@charset "utf-8";
/*
Theme Name: 福乃鶴LP
*/

/*基本設定
---------------------------------------------------------------------------*/

html{
	font-size: 100%;
	font-family: Quicksand, 游ゴシック体, "Yu Gothic", YuGothic, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	color: #333;
	background: var(--parts-color-1);
}

body {
	-webkit-text-size-adjust: 100%;
	line-height: 1.5;
}

*{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

img{
	border: 0;
	vertical-align: top;
	max-width: 100%;
}

ul,ol{
	list-style: none;
}

a{
	text-decoration: none;
	color: #FFF;
}

a:hover,
a:active{
	opacity: 0.7;
}

.Clear{clear: both;}

.Center{
	width: 100%;
	text-align: center;
}

.Right{
	text-align: right;
}

/*メインパーツ
---------------------------------------------------------------------------*/

:root{
	--main-color: #1F4666;
	--sub-color: #B19EC9;
	--bg-color: #F9F9F9;
	--red-color: #CC0A0A;
	--parts-color-1: #DDD;
}

#main_wrapper{
	width: 960px;
	margin: 0 auto 0 auto;
	background: var(--sub-color);
	box-shadow: 0 0 20px #696969;
}

section{
	width: 100%;
	padding: 60px 0;
	opacity : 0;
	transform : translate(0, 45px);
	transition : all 500ms;
}

section.effect-scroll{
	opacity : 1;
	transform : translate(0, 0);
}

h1{
	color: #FFF;
	font-size: 4em;
	text-align: center;
	margin-bottom: 50px;
}

h2{
	position: relative;
	width: 100%;
	text-align: center;
	margin-top: 10px;
	margin-bottom: 40px;
	font-size: 1.2em;
}

h2::after{
	position: absolute;
	left: 50%;
	bottom: -10px;
	display: block;
	width: 210px;
	content: "";
	height: 2px;
	margin-left: -105px;
	background: var(--main-color);
}

h3{
	color: var(--sub-color);
	font-size: 1.5em;
	margin-bottom: 5px;
}

h4{
	width: 100%;
	font-size: 1.1em;
	text-align: center;
	margin-bottom: 10px;
}

#page_top{
	width: 50px;
	height: 50px;
	line-height: 50px;
	position: fixed;
	right: 30px;
	bottom: -50px;
	background: var(--sub-color);
	border-radius: 50%;
	font-weight: bold;
	font-size: 25px;
	text-align: center;
	color: #FFF;
	transition: 0.3s;
	cursor: pointer;
}

#page_top:hover{
	width: 55px;
	height: 55px;
	line-height: 55px;
	right: 28px;
	bottom: -48px;
}

.white{
	background: #FFF !important;
	padding: 15px;
}

/*form
---------------------------------------------------------------------------*/

form{
	max-width: 680px;
	width: 100%;
	text-align: center;
	margin: 0 auto 0 auto;
}

form label{
	display: block;
	margin: 10px 0 5px 0;
}

form span{
	font-size: 0.9em;
	color: var(--sub-color);
	margin-left: 5px;
}

form input,
form select,
form textarea{
	width: 100%;
	-webkit-appearance: none;
	border: 1px solid #A9A9A9;
	border-radius: 5px;
	padding: 10px;
}

form textarea{
	height: 100px;
	margin-bottom: 15px;
}

form input:focus,
form select:focus,
form textarea:focus {
	transition: 0.3s;
	border: 1px solid var(--main-color);
}

form input::placeholder,
form textarea::placeholder{
	color: #919191;
}

input[type="button"],
form input[type="button"],
form input[type="submit"]{
	-webkit-appearance: none;
	border: none;
	width: 300px;
	height: 50px;
	background-color: #000;
	background: var(--sub-color);
	color: #FFF;
	border-radius: 5px;
	transition: 0.3s;
	margin-top: 20px;
	margin-bottom: 20px;
	cursor: pointer;
}

input[type="button"]:hover,
form input[type="button"]:hover,
form input[type="submit"]:hover{
	opacity: 0.8;
}

/*ヘッダー
--------------------------------------------------------------------------

header{
	background: var(--main-color);
	height: 30px;
	width: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10;
	display: flex;
	justify-content: space-between;
	align-items: center;
	color: #FFF;
	padding: 0 7px;
}

header .logo{
	width: auto;
	height: 20px;
}

header .logo img{
	height: 100%;
}
-*/

/*登録ボタン
---------------------------------------------------------------------------*/

.regist_line,
.regist_mail{
	width: 80%;
	color: #FFF;
	text-align: center;
	font-weight: bold;
	padding: 15px 0;
	margin: 0 auto 0 auto;
	margin-bottom: 30px;
	cursor: pointer;
}

.regist_line img{
	cursor: pointer;
}

.regist_mail{
	width: 60%;
	border-radius: 50px;
	font-size: 2.7em;
	background: var(--main-color);
}

.regist p{
	font-size: 1.4em;
	font-weight: bold;
	color: #FFF;
	text-shadow: 0 0 10px var(--main-color);
}

/*TOP:section0
---------------------------------------------------------------------------*/

#content0{
	position: relative;
	width: 100%;
	padding: 0;
}

#content0 img{
	width: 100%;
}

#content0 .regist{
	position: absolute;
	bottom: -400px;
	left: 0;
	width: 100%;
}

/*アバウト1：section1
---------------------------------------------------------------------------*/

#content1 {
	width: 100%;
	padding-top: 490px;
	background: -moz-linear-gradient(rgba(0, 0, 0, 0) 25%, #FFF 35%, #FFF);
	background: -webkit-linear-gradient(rgba(0, 0, 0, 0) 25%, #FFF 35%, #FFF);
	background: linear-gradient(rgba(0, 0, 0, 0) 25%, #FFF 35%, #FFF);
	pointer-events: none;
}

/*アバウト2：section2
---------------------------------------------------------------------------*/

#content2 {
	background: #FFF;
	padding-top: 0;
}

.inner_image{
	padding: 40px 200px;
}

.inner_text{
	font-size: 1.8em;
	font-weight: bold;
	padding: 0 130px;
	color: var(--main-color);
}

/*アバウト2：section3
---------------------------------------------------------------------------*/

#content3 {
	background: #FFF;
	padding-top: 0;
}


/*お客様ボイス：section4
---------------------------------------------------------------------------*/

#content4 {
	background: #FFF;
	padding-top: 20px;
}

#content4 img{
	width: 80%;
}

/*登録：section5
---------------------------------------------------------------------------*/

#content5{
	width: 100%;
	background: linear-gradient(#FFF 15%, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0));
	padding-top: 0;
}

/*フッターメニュー：section5
---------------------------------------------------------------------------*/

#content6{
	background: #FFF;
	padding-top: 20px;
	padding-bottom: 0;
}

#content6 ul{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
}

#content6 ul li{
	width: 47%;
	padding: 20px;
	background: var(--main-color);
	font-size: 1.8em;
	font-weight: bold;
	text-align: center;
	margin-bottom: 20px;
}

#content6 ul li a{
	display: block;
}

#content6 p{
	background: var(--main-color);
	width: 100%;
	height: 50px;
	line-height: 50px;
	text-align:center;
	color: #FFF;
}

/********************************************************************
↓↓以下960px以下用↓↓
********************************************************************/

@media screen and (max-width: 959px) {


	/*メインパーツ
	---------------------------------------------------------------------------*/

	#main_wrapper{
		width: 100%;
	}

	section{
		padding: 40px 0;
	}

	section.effect-scroll{
		opacity : 1;
		transform : translate(0, 0);
	}

	h1{
		font-size: 8vw;
		margin-bottom: 30px;
	}

	h3{
		font-size: 6vw;
		margin-bottom: 5px;
		text-align: center;
	}

	h4{
		font-size: 0.8em;
		margin-bottom: 5px;
	}

	#page_top{
		width: 40px;
		height: 40px;
		line-height: 40px;
		right: 5px;
		bottom: -50px;
		font-size: 25px;
		opacity: 0.7;
	}

	#page_top:hover{
		width: 40px;
		height: 40px;
		line-height: 40px;
	}

}

/********************************************************************
↓↓以下スマホ用↓↓
********************************************************************/

@media screen and (max-width: 822px) {


	/*登録ボタン
	---------------------------------------------------------------------------*/

	.regist_line,
	.regist_mail{
		width: 90%;
		margin-bottom: 10px;
		padding: 10px 0;
	}

	.regist_mail{
		width: 60%;
		font-size: 5vw;
		margin-bottom: 20px;
	}

	.regist p{
		font-size: 0.9em;
		padding: 0 10px;
	}

	/*TOP:section0
	---------------------------------------------------------------------------*/

	#content0 .regist{
		bottom: -230px;
	}

	/*アバウト1：section1
	---------------------------------------------------------------------------*/

	#content1 {
		padding-top: 290px;
		background: -moz-linear-gradient(rgba(0, 0, 0, 0) 30%, #FFF 43%, #FFF);
		background: -webkit-linear-gradient(rgba(0, 0, 0, 0) 30%, #FFF 43%, #FFF);
		background: linear-gradient(rgba(0, 0, 0, 0) 30%, #FFF 43%, #FFF);
	}

	/*アバウト2：section2
	---------------------------------------------------------------------------*/

	.inner_image{
		padding: 30px 60px;
	}

	.inner_text{
		font-size: 1em;
		padding: 0 20px;
		color: var(--main-color);
	}

	#content4 img {
		width: 100%;
	}

	/*フッターメニュー：section5
	---------------------------------------------------------------------------*/

	#content6{
		padding-top: 10px;
	}

	#content6 ul{
		justify-content: space-around;
	}

	#content6 ul li{
		width: 95%;
		padding: 10px 0;
		font-size: 4vw;
		margin-bottom: 10px;
	}

	#content6 p{
		height: 50px;
		line-height: 50px;
		font-size: 0.8em;
	}

}