@charset "UTF-8";

/*-------------------------
__voice_style
-------------------------*/
body { font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;}
#content{ margin-top: 177px; text-align: left;}
#main .inner{ max-width: 1200px; padding: 100px 50px; box-sizing: border-box; margin: auto;}
#main .inner .sec_ttl_wrap{ margin-bottom: 50px;}
#main .inner .sec_ttl_wrap .en{ font-size: 54px; margin-bottom: 14px;}
#main .inner .sec_ttl_wrap .sec_ttl{ font-size: 24px;}
#main .inner .txt{ font-size: 14px; line-height: 1.4;}
#main .inner .img_wrap img{ width: 100%; height: auto; vertical-align: bottom;}
#main .inner .flex{ display: flex;}
@media screen and (max-width: 1199px) {
	#main .inner{ padding: 70px 30px;}
}
@media screen and (min-width: 768px) {
	.sph_on{ display: none;}
}
@media screen and (max-width: 767px) {
	#content{ margin-top: 56px;}
	#main .inner{ padding: 50px 20px;}
	#main .inner .sec_ttl_wrap{ margin-bottom: 30px;}
	#main .inner .sec_ttl_wrap .en{ font-size: 32px; margin-bottom: 10px;}
	#main .inner .sec_ttl_wrap .sec_ttl{ font-size: 20px;}
}
@media screen and (min-width: 374px) {
	.sph374_on{ display: none;}
}
/*-------------------------
__mv
-------------------------*/
#main .mv{ background: url('./images/main_bg@2x.jpg') no-repeat; background-size: cover; background-position: bottom; height: auto; position: relative; max-width: 1400px; aspect-ratio: 5 / 4; margin: 0 auto 100px;}
#main .mv .mv_txt_wrap{ position: absolute; left: 50px; top: 50px;}
#main .mv .mv_txt_wrap .mv_txt{ font-size: 24px; line-height: 1.4; margin-bottom: 20px;}
#main .mv .mv_txt_wrap .mv_en{ font-size: 72px;}
#main .mv .mv_txt_wrap .mv_ttl{ font-size: 27px; padding: 5px 10px; border: 1px solid #000; box-sizing: border-box; background: #fff; margin-top: 10px; display: inline-block;}
@media screen and (max-width: 1399px) {
	#main .mv{ margin: 0 auto;}
}
@media screen and (max-width: 1199px) {
	#main .mv .mv_txt_wrap{ left: 30px; top: 30px;}
	#main .mv .mv_txt_wrap .mv_txt{ font-size: 20px;}
	#main .mv .mv_txt_wrap .mv_en{ font-size: 63px;}
	#main .mv .mv_txt_wrap .mv_ttl{ font-size: 20px;}
}
@media screen and (max-width: 767px) {
	#main .mv{ background: url('./images/main_bg_sph@2x.jpg') no-repeat; background-size: cover; background-position: bottom; height: auto; position: relative; aspect-ratio: 7 / 8;}
	#main .mv .mv_txt_wrap{ left: 20px; top: 20px;}
	#main .mv .mv_txt_wrap .mv_txt{ font-size: 20px; margin-bottom: 10px;}
	#main .mv .mv_txt_wrap .mv_en{ font-size: 54px;}
	#main .mv .mv_txt_wrap .mv_ttl{ font-size: 14px; padding: 7px;}
}
@media screen and (max-width: 499px) {
	#main .mv .mv_txt_wrap .mv_txt{ font-size: 16px;}
	#main .mv .mv_txt_wrap .mv_en{ font-size: 36px;}
}
@media screen and (max-width: 374px) {
	#main .mv .mv_txt_wrap .mv_txt{ font-size: 14px;}
	#main .mv .mv_txt_wrap .mv_en{ font-size: 30px;}
}
/*-------------------------
__concept
-------------------------*/
#main #concept{ background: #f4efea;}
#main #concept .inner{}
#main #concept .inner .flex{ justify-content: space-between; align-items: center;}
#main #concept .inner .flex .txt_wrap{ position: relative; flex: 1;}
#main #concept .inner .flex .txt_wrap::before{ position: absolute; content: ""; top: 0; right: 0; background: url("./images/concept_bg@2x.png") no-repeat; width: 65%; height: 100%; background-size: 100%;}
#main #concept .inner .flex .txt_wrap .sub_ttl{ font-size: 28px; line-height: 1.6; margin-bottom: 20px; text-shadow: 0px 0px 1px rgba(244, 239, 234, 1), 0px 0px 3px rgba(244, 239, 234, 1), 0px 0px 5px rgba(244, 239, 234, 1), 0px 0px 7px rgba(244, 239, 234, 1), 0px 0px 9px rgba(244, 239, 234, 1); position: relative;}
#main #concept .inner .flex .txt_wrap .txt{ font-size: 16px; text-shadow: 0px 0px 1px rgba(244, 239, 234, 1), 0px 0px 3px rgba(244, 239, 234, 1), 0px 0px 5px rgba(244, 239, 234, 1), 0px 0px 7px rgba(244, 239, 234, 1), 0px 0px 9px rgba(244, 239, 234, 1); position: relative;}
#main #concept .inner .flex .txt_wrap .txt + .txt{ margin-top: 20px;}
#main #concept .inner .flex .img_wrap{ width: 45%;}
@media screen and (max-width: 1199px) {
	#main #concept .inner .flex .img_wrap{ width: 40%;}
}
@media screen and (max-width: 767px) {
	#main #concept .inner .flex{ flex-wrap: wrap; gap: 50px;}
	#main #concept .inner .flex .txt_wrap .sub_ttl{ font-size: 20px;}
	#main #concept .inner .flex .img_wrap{ width: 100%;}
}
/*-------------------------
__features
-------------------------*/
#main #features{ background: #ede9e2;}
#main #features .inner{ padding-bottom: 0;}
#main #features .inner .list{ display: flex; flex-wrap: wrap; gap: 40px;}
#main #features .inner .list li{ width: calc(50% - 20px); display: flex; align-items: center; gap: 20px;}
#main #features .inner .list li .img_wrap{ width: 80px;}
#main #features .inner .list li .txt_wrap{ width: calc(100% - 100px);}
#main #features .inner .list li .list_ttl{ font-size: 18px; margin-bottom: 15px;}
#main #features .inner .list li .txt{}
@media screen and (max-width: 1199px) {
}
@media screen and (max-width: 767px) {
	#main #features .inner .list{ gap: 30px; max-width: 463px; margin: auto;}
	#main #features .inner .list li{ width: 100%; }
}
/*-------------------------
__spec
-------------------------*/
#main #spec{ background: #ede9e2;}
#main #spec .inner{}
#main #spec .inner .flex{ gap: 50px;}
#main #spec .inner .flex .img_wrap{ width: calc(100% - 615px);}
#main #spec .inner .flex table{ width: 565px;}
#main #spec .inner .flex tr{font-size: 20px;display: flex; border: 1px solid #000; border-bottom: none;}
#main #spec .inner .flex tr:last-child{ border-bottom: 1px solid #000;}
#main #spec .inner .flex tr th{width: 150px;padding: 20px;display: inline-block;box-sizing: border-box; border-right: 1px solid #000;}
#main #spec .inner .flex tr td{width: calc(100% - 150px);padding: 20px;display: inline-block;box-sizing: border-box;}
@media screen and (max-width: 960px) {
	#main #spec .inner .flex{ gap: 30px;}
	#main #spec .inner .flex .img_wrap{ width: calc(100% - 480px);}
	#main #spec .inner .flex table{ width: 450px;}
	#main #spec .inner .flex tr{font-size: 16px;}
	#main #spec .inner .flex tr th{width: 120px;padding: 10px;}
	#main #spec .inner .flex tr td{width: calc(100% - 120px);padding: 10px;}
}
@media screen and (max-width: 767px) {
	#main #spec .inner .flex{ gap: 20px; flex-wrap: wrap;}
	#main #spec .inner .flex .img_wrap{ width: 100%;}
}
@media screen and (max-width: 499px) {
#main #spec .inner .flex table{ width: 100%;}
#main #spec .inner .flex tr{ flex-wrap: wrap; border: none;}
#main #spec .inner .flex tr:last-child{ border-bottom: none;}
#main #spec .inner .flex tr th{width: 100%; border-right: none; background: #928372; color: #fff;}
#main #spec .inner .flex tr td{width: 100%; padding: 10px 0;}
}
/*-------------------------
__plan
-------------------------*/
#main #plan{ background: #928372;}
#main #plan .inner{ color: #fff;}
#main #plan .inner .plan_wrap{ display: flex; align-items: center; gap: 50px;}
#main #plan .inner .plan_wrap + .plan_wrap{ display: flex; align-items: center; gap: 50px; margin-top: 50px; padding-top: 50px; border-top: 1px solid #fff;}
#main #plan .inner .plan_wrap .img_wrap{ display: flex; gap: 20px; width: calc(100% - 350px);}
#main #plan .inner .plan_wrap .img_wrap img{ width: calc(50% - 10px);}
#main #plan .inner .plan_wrap .txt_wrap{text-align: left; width: 300px;}
#main #plan .inner .plan_wrap .txt_wrap .ttl_wrap{ display: flex; align-items: center; gap: 20px; margin-bottom: 20px;}
#main #plan .inner .plan_wrap .txt_wrap .ttl_wrap .img_wrap{ height: 50px; width: auto;}
#main #plan .inner .plan_wrap .txt_wrap .ttl_wrap .img_wrap img{ height: 100%; width: auto;}
#main #plan .inner .plan_wrap .txt_wrap .ttl_wrap .ttl{ font-size: 18px; line-height: 1.4;}
#main #plan .inner .plan_wrap .txt_wrap .ttl_wrap .ttl .en{ font-size: 24px;}
#main #plan .inner .plan_wrap .txt{}
#main #plan .kome{ color: #fff; font-size: 14px; text-align: right; max-width: 1200px; padding: 0 50px 20px; box-sizing: border-box; margin: auto;}
@media screen and (max-width: 1199px) {
	#main #plan .kome{ padding: 0 30px 20px;}
}
@media screen and (max-width: 767px) {
	#main #plan .inner .plan_wrap{ flex-wrap: wrap; gap: 20px;}
	#main #plan .inner .plan_wrap + .plan_wrap{ gap: 30px; margin-top: 30px; padding-top: 30px;}
	#main #plan .inner .plan_wrap .img_wrap{ gap: 10px; width: 100%;}
	#main #plan .inner .plan_wrap .img_wrap img{ width: calc(50% - 5px);}
	#main #plan .inner .plan_wrap .txt_wrap{ width: 100%;}
	#main #plan .inner .plan_wrap .txt_wrap .ttl_wrap{ margin-bottom: 10px;}
	#main #plan .inner .plan_wrap .txt_wrap .ttl_wrap .img_wrap{ height: 42px; width: auto;}
	#main #plan .inner .plan_wrap .txt_wrap .ttl_wrap .ttl{ font-size: 16px;}
	#main #plan .inner .plan_wrap .txt_wrap .ttl_wrap .ttl .en{ font-size: 20px;}
	#main #plan .inner .plan_wrap .txt br{ display: none;}
	#main #plan .kome{ text-align: left; padding: 0 20px 20px;}
}
@media screen and (max-width: 499px) {
	#main #plan .inner .plan_wrap .img_wrap{ flex-wrap: wrap; width: 100%;}
	#main #plan .inner .plan_wrap .img_wrap img{ width: 100%;}
}

#main .contact { background: #ede9e2; padding: 50px; margin: 0 auto;}
#main .contact a { display: block; background: #2c1f11; color: #fff; font-size: 20px; padding: 20px; box-sizing: border-box; text-decoration: none; border-radius: 5px; margin: auto; text-align: center; max-width: 270px; transition: .3s;}
@media screen and (min-width: 768px) {
	#main .contact a:hover{ background: #928372;}
}
@media screen and (max-width: 767px) {
	#main .contact { padding: 20px;}
	#main .contact a { font-size: 16px;}
}