@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@400;700&display=swap');

*{margin: 0; padding: 0; list-style: none; box-sizing: border-box;}
a{color: #222; cursor: pointer; border: none; text-decoration: none;}
img{
	display: inline-block;
	font-size: 0;
	vertical-align: bottom;
	line-height: normal;
	width: 100%;
	height: auto;
}
article, section,header,footer{
	display: block;
	width: 100%;
}

.show920vw{
	display: none;
}

html,
body,
#base{
	height: 100%;
}
body{
	font-size: 16px;
	line-height: 2;
	font-family: 'Zen Maru Gothic', "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Hiragino Sans W3", "ヒラギノ角ゴ ProN W3", "Yu Gothic Medium", "游ゴシック Medium", "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	color: #3a3a3a;
}
h1,h2,h3,h4,h5,h6,p,div,li,dt,dd {
	font-size:100%;
}
h1,h2,h3,h4,h5,h6,strong{
	line-height: normal;
	font-weight: 700;
}

#base{
	position: relative;
}

#sLink{
	position: fixed;
	z-index: 9998;
	left: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
}
#sLink div:first-child{
	margin-right: 10px;
}
#sLink a{
	display: block;
	background: #00c2c4;
	border-radius: 20px 20px 0 0;
	padding: 35px 60px;
	color: #fff;
	font-weight: 700;
	font-size: 114%;
	line-height: normal;
}
#sLink div:first-child a{
	background: #f66696;
}
#sLink a #fLinkL{
	display: inline-block;
	max-width: 15px;
	margin-left: 8px;
}

header{
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 68px;
}
header #mNav{
	display: flex;
	align-items: center;
}
header h1 img{
	max-width: 330px;
}
header #secNav{
	display: flex;
	align-items: center;
}
header ul{
	display: flex;
	align-items: center;
}
header #fstNav li{
	margin-left: 68px;
	font-size: 87%;
	font-weight: 700;
	line-height: normal;
}
header #fstNav li a{
	display: block;
	border-bottom: solid 2px #3a3a3a;
	padding: 17px 10px;
}
header #btnOnline{
	margin-left: 58px;
}
header #btnOnline li{
	margin-left: 10px;
}
header #btnOnline li a{
	display: block;
	color: #fff;
	padding: 16px 40px;
	font-size: 87%;
	font-weight: 700;
	line-height: normal;
	border-radius: 10px;
}
header #btnOnline li:first-child a{
	background: #f66696;
}
header #btnOnline li:last-child a{
	background: #00c2c4;
}
/*header #btnOnline a img{
	display: inline-block;
	max-width: 14px;
	margin-right: 8px;
}*/

#noteBox{
	width: calc(100% - 68px);
	padding: 102px 68px;
	margin: 34px;
	background: #41c9b4;
	border-radius: 10px;
}
#noteBox h4{
	color: #fff;
	font-size: 150%;
	text-align: center;
	margin-bottom: 34px;
}
#noteBox h4 img{
	max-width: 97px;
	margin-right: 8px;
}
#noteBox #noteList{
	display: flex;
	justify-content: center;
}
#noteBox #noteList > div{
	width: calc(100% / 3);
	max-width: 416px;
	padding: 0 17px;
}
#noteBox #noteList > div > div{
	margin-bottom: 10px;
}
#noteBox #noteList > div p{
	color: #fff;
	font-size: 87%;
	line-height: 1.3;
	padding: 0 10px;
}
#noteBox #noteList > div p a{
	color: #fff;
}
#noteBox #noteList > div p span{
	display: block;
	margin-bottom: 0.5em;
}
#noteBox #noteBtn{
	display: flex;
	justify-content: center;
	margin-top: 34px;
}
#noteBox #noteBtn a{
	display: block;
	border-radius: 999px;
	text-align: center;
	font-size: 128%;
	font-weight: 700;
	width: 278px;
	padding: 24px 12px;
	background: url("/parts/common/img/noteBlank.svg") right 30px center no-repeat #fff;
	background-size: 16px;
}

#caseBox{
	position: relative;
	width: calc(100% - 68px);
	padding: 68px;
	margin: 34px;
	background: url("/parts/common/img/bg_sand.png") center top #f7f7ee;
	border-radius: 10px;
}
#caseBox #caseImg{
	position: absolute;
	z-index: 1;
	left: 30px;
	bottom: -40px;
	max-width: 421px;
}
#caseBox section{
	position: relative;
	z-index: 2;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	max-width: 1214px;
	margin: 0 auto;
}
#caseBox section > div:first-child{
	width: 44%;
	max-width: 503px;
}
#caseBox section > div:last-child{
	width: 56%;
	max-width: 711px;
	display: flex;
	justify-content: center;
}
#caseBox dt{
	text-align: center;
	line-height: 1.3;
}
#caseBox dt strong{
	display: block;
	font-size: 200%;
	margin-bottom: 0.2em;
}
#caseBox dt span{
	display: block;
	font-weight: 700;
}
#caseBox dd{
	font-size: 87%;
	padding: 0 34px 0 68px;
	margin-top: -1.5em;
}
#caseBox #caseList{
	max-width: 624px;
	padding: 0 17px;
}
#caseBox #caseList ul{
	display: flex;
	justify-content: center;
}
#caseBox #caseList li{
	max-width: 208px;
	padding: 0 17px;
	text-align: center;
}
#caseBox #caseList li img{
	border-radius: 999px;
	width: 90%;
}
#caseBox #caseList li span{
	display: block;
	font-size: 87%;
	line-height: 1.3;
	font-weight: 700;
	margin-top: 10px;
}
#caseBox #caseList li span strong{
	font-size: 128%;
}

footer{
	padding: 102px;
	padding-bottom: 170px;
	border-top: solid 1px #f3f3eb;
	margin-top: 136px;
}
footer #footerBox{
	display: flex;
	flex-wrap: wrap;
	max-width: 1214px;
	margin: 0 auto;
}
footer #footerBox #footerLogo{
	width: 26%;
	max-width: 312px;
	padding-right: 34px;
	text-align: center;
}
footer #footerBox #footerLogo h2 img{
	max-width: 173px;
}
footer #footerBox #footerLogo p{
	font-size: 87%;
	line-height: normal;
	margin-top: 1em;
}
footer #footerBox #footerLogo ol{
	display: flex;
	justify-content: center;
	margin-top: 20px;
}
footer #footerBox #footerLogo li{
	padding: 0 5px;
}
footer #footerBox #footerLogo img{
	max-width: 30px;
}
footer #footerBox nav{
	width: 74%;
	max-width: 902px;
}
footer #footerBox nav ul{
	display: flex;
	flex-wrap: wrap;
	font-size: 87%;
	line-height: 1.3;
}
footer #footerBox nav li{
	display: flex;
	align-items: center;
	justify-content: center;
	width: calc(100% / 3);
	border: solid 1px #f3f3eb;
}
footer #footerBox nav li:nth-child(2),
footer #footerBox nav li:nth-child(3),
footer #footerBox nav li:nth-child(5),
footer #footerBox nav li:nth-child(6){
	margin-left: -1px;
}
footer #footerBox nav li:nth-child(4),
footer #footerBox nav li:nth-child(5),
footer #footerBox nav li:nth-child(6){
	margin-top: -1px;
}
footer #footerBox nav li a{
	display: block;
	width: 100%;
	text-align: center;
	padding: 26px 17px;
}
footer > p{
	text-align: right;
	font-size: 87%;
	font-weight: 700;
	margin-top: 136px;
}


/*-- COOKIE --*/
#cookie{
	width: 100%;
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 9999;
	background: rgba(255, 255, 255, 0.9);
	color: #222;
	padding: 20px;
	text-align: center;
}
#cookie button{
	cursor: pointer;
	display: block;
	background: #3a3a3a;
	border: none;
	border-radius: 999px;
	width: 60%;
	max-width: 300px;
	padding: 20px;
	color: #fff;
	margin: 0 auto;
	margin-top: 1em;
	line-height: normal;
	font-size: 100%;
}

/*-- UnderContent --*/
#underContent{
	padding-top: 85px;
}
#underContent h4{
	text-align: center;
}
#underContent h4 strong{
	display: block;
	font-size: 200%;
	line-height: 1.3;
	margin-bottom: 34px;
}
#underContent h4 span{
	display: block;
	font-size: 130%;
	line-height: 1.3;
	margin-bottom: 10px;
}

/*-- 404 --*/
#nfTxt{
	padding-top: 4em;
	padding-bottom: 4em;
}
#nfTxt p{
	padding: 4em 0;
	text-align: center;
}
#nfTxt p a{
	text-decoration: underline;
}

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

	header{
		flex-wrap: wrap;
		justify-content: center;
	}
	header #mNav{
		width: 100%;
		justify-content: center;
		margin-bottom: 34px;
	}
	header #fstNav li{
		margin-left: 0;
		margin-right: 34px;
	}
	header #btnOnline{
		margin-left: 0;
	}

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

	#noteBox{
		padding: 102px 34px;
	}

	footer #footerBox{
		max-width: inherit;
	}
	footer #footerBox #footerLogo{
		width: 100%;
		max-width: inherit;
		padding-right: 0;
	}
	footer #footerBox nav{
		width: 100%;
		max-width: inherit;
		margin-top: 34px;
	}

}

@media screen and (max-width: 1024px) {/* iPad pro */

	#caseBox section{
		display: block;
		max-width: inherit;
	}
	#caseBox section > div:first-child{
		width: 100%;
		max-width: inherit;
		margin-bottom: 34px;
	}
	#caseBox section > div:last-child{
		width: 100%;
		max-width: inherit;
	}
	#caseBox #caseList{
		max-width: inherit;
	}
	#caseBox #caseList ul{
		display: flex;
		justify-content: center;
	}

}

@media screen and (max-width: 920px) {/* vw */

	.hide920vw{
		display: none;
	}
	.show920vw{
		display: block;
	}

	body{
		font-size: 2.5vw;
	}

	#sLink{
		display: none;
	}

	header{
		padding: 8vw;
	}
	header h1 img{
		width: 50vw;
		max-width: inherit;
	}
	header #mNav{
		margin-bottom: 0;
	}
	header #secNav{
		position: fixed;
		flex-wrap: wrap;
		z-index: 9999;
		left: 0;
		bottom: 0;
		width: 100%;
		background: #fff;
	}
	header #secNav ul{
		flex-wrap: wrap;
	}
	header #secNav ul li{
		display: flex;
		justify-content: center;
		align-items: center;
		width: 50%;
		height: 100%;
		margin-right: 0;
		font-size: 68%;
	}
	header #secNav #fstNav{
		border-top: 1px solid #f8f8ee;
		width: 100%;
	}
	header #secNav #fstNav li:first-child{
		border-right: 1px solid #f8f8ee;
	}
	header #secNav ul li a{
		border-bottom: none;
		width: 100%;
		padding: 6vw 2vw;
		text-align: center;
	}
	header #btnOnline{
		width: 100%;
	}
	header #btnOnline li{
		width: 50%;
		margin: 0;
	}
	header #btnOnline li a{
		width: 100%;
		padding: 6vw 2vw;
		text-align: center;
		border-radius: 0;
		font-size: 100%;
	}
	header #btnOnline a img{
		max-width: inherit;
		width: 2.3vw;
		margin-right: 1vw;
	}

	#noteBox{
		width: calc(100% - 8vw);
		padding: 12vw 4vw;
		margin: 4vw;
	}
	#noteBox h4{
		margin-bottom: 6vw;
	}
	#noteBox h4 img{
		width: 20vw;
		max-width: inherit;
		margin-right: 1.5vw;
	}
	#noteBox #noteList{
		flex-wrap: wrap;
	}
	#noteBox #noteList > div{
		width: 68vw;
		max-width: inherit;
		padding: 0;
		margin-bottom: 6vw;
	}
	#noteBox #noteList > div > div{
		margin-bottom: 10px;
	}
	#noteBox #noteList > div p{
		color: #fff;
		font-size: 87%;
		line-height: 1.3;
		padding: 0 10px;
	}
	#noteBox #noteBtn{
		margin-top: 2vw;
	}
	#noteBox #noteBtn a{
		width: 60vw;
		padding: 4vw 2vw;
		background: url("/parts/common/img/noteBlank.svg") right 6vw center no-repeat #fff;
		background-size: 4vw;
	}

	#caseBox{
		width: calc(100% - 8vw);
		padding: 9vw 3vw;
		margin: 4vw;
	}
	#caseBox #caseImg{
		left: 2.5vw;
		bottom: -6vw;
		width: 45vw;
		max-width: inherit;
	}
	#caseBox dd{
		padding: 0 4vw 0 9vw;
	}
	#caseBox #caseList{
		max-width: inherit;
		padding: 0 1.5vw;
	}
	#caseBox #caseList li{
		width: 25vw;
		max-width: inherit;
		padding: 0 1.5vw;
	}
	#caseBox #caseList li span{
		margin-top: 1.2vw;
	}

	footer{
		padding: 12vw 0;
		padding-bottom: 42vw;
		margin-top: 15vw;
	}
	footer #footerBox #footerLogo h2 img{
		width: 30vw;
		max-width: inherit;
	}

	footer #footerBox #footerLogo ol{
		margin-top: 3vw;
	}
	footer #footerBox #footerLogo li{
		padding: 0 1.5vw;
	}
	footer #footerBox #footerLogo img{
		width: 6vw;
		max-width: inherit;
	}
	footer #footerBox nav{
		overflow: hidden;
		margin-top: 9vw;
	}
	footer #footerBox nav li{
		border: none;
	}
	footer #footerBox nav li:nth-child(2),
	footer #footerBox nav li:nth-child(3),
	footer #footerBox nav li:nth-child(5),
	footer #footerBox nav li:nth-child(6){
		margin-left: 0;
	}
	footer #footerBox nav li:nth-child(4),
	footer #footerBox nav li:nth-child(5),
	footer #footerBox nav li:nth-child(6){
		margin-top: 0;
	}
	footer #footerBox nav li:nth-child(1),
	footer #footerBox nav li:nth-child(2){
		border-top: solid 1px #f3f3eb;
	}
	footer #footerBox nav li:nth-child(odd){
		width: calc(50% + 1px);
		border-right: solid 1px #f3f3eb;
		border-bottom: solid 1px #f3f3eb;
	}
	footer #footerBox nav li:nth-child(even){
		width: calc(50% - 1px);
		border-bottom: solid 1px #f3f3eb;
	}
	footer #footerBox nav li a{
		padding: 4vw 2vw;
		font-size: 88%;
	}
	footer > p{
		text-align: center;
		margin-top: 9vw;
	}

	/*-- COOKIE --*/
	#cookie{
		padding: 4vw;
	}
	#cookie button{
		width: 60%;
		max-width: inherit;
		padding: 4vw;
	}

	/*-- UnderContent --*/
	#underContent{
		padding-top: 4vw;
	}
	#underContent h4 strong{
		margin-bottom: 4vw;
	}
	#underContent h4 span{
		margin-bottom: 1vw;
	}

}

@media screen and (max-width: 768px) {/* TB */



}

@media screen and (max-width: 759px) {/* SP */

	body{
		font-size: 3.6vw;
	}


}