@charset "UTF-8";
/*-------------------------
__common
-------------------------*/
strong,dt,h1,h2,h3,h4,h5,h6,th{font-size:10px; font-weight: 700;}
#content{font-family:"Noto Serif JP",serif;color:#1f1f1f; font-weight: 300;}

#referral{padding:120px 0 0; min-width: 1080px;}
#content .topic_path {width:1020px;margin:0 auto;text-align:left;padding:10px 10px 0;box-sizing:border-box;clear:both;}
#content .topic_path ul {font-size:14px;line-height:25px;}
#content .topic_path li {vertical-align:top;display:inline-block;*display:inline;*zoom:1;}
#content .topic_path li a {color:#D5AE3C;text-decoration:underline;}
#content .topic_path li::after {content:">";margin:0 5px;}
#content .topic_path li:last-child::after {content:"";}

@media screen and (min-width: 768px){
  #content .topic_path li a:hover{text-decoration:none;opacity:0.7;}
}
@media screen and (max-width: 767px){
	#referral{padding:70px 0 0; min-width: auto;}
	#content .topic_path {width:100%;padding:0 20px 0;}
}

/*-------------------------
__title_box
-------------------------*/

#referral .inner{ min-width: 1020px; padding: 80px 100px; box-sizing: border-box; margin: 0 auto;}
.blue{ color: #434090;}
.gold{ color: #B88917;}
.gray{ color: #999;}
.en{ font-size: clamp(1.8em, 3.2vw, 2.4em); margin-bottom: 15px;}
.sec_ttl{ font-size: clamp(1.6em, 3vw, 2em); line-height: 1.4; margin-bottom: 30px;}
.read_txt{ font-size: clamp(1.4em, 2vw, 1.6em); line-height: 1.6;}
.img_box{width:100%;height:auto;}
.img_box img{width:100%;height:auto;}
@media screen and (max-width: 767px){
	#referral .inner{ min-width: auto; padding: 40px 20px;}
	.en{ margin-bottom: 10px;}
	.sec_ttl{ margin-bottom: 20px;}
}
/*-------------------------
__concept
-------------------------*/
.mv{}
.mv .mv_inner{ position: relative;}
.mv .mv_inner .mv_img{ height: 540px; overflow: hidden;}
.mv .mv_inner .mv_img img{ width: 100%; height: 100%; object-fit: cover;}
.mv .mv_inner .mv_txt{ position: absolute; left: calc((100% - 1300px) / 2); top: 50%; transform: translateY(-50%); text-align: left;}
.mv .mv_inner .mv_txt .ttl_en{ font-size: 20px; margin-bottom: 20px;}
.mv .mv_inner .mv_txt .mv_ttl{ font-size: 36px; margin-bottom: 40px;}
.mv .mv_inner .mv_txt a{ background: #434090; padding: 20px 70px 20px 20px; box-sizing: border-box; color: #fff; text-decoration: none; border-radius: 5px; width: 266px; display: block; margin-top: 40px; position: relative; transition: .3s;}
.mv .mv_inner .mv_txt a::after{ content: ""; position: absolute; display: inline-block; vertical-align: middle; color: #FFF; line-height: 1; width: 1em; height: 1em; border: 0.15em solid currentColor; border-left: 0; border-bottom: 0; box-sizing: border-box; transform: translate(-25%, -50%) rotate(45deg); right: 20px; top: 50%; transition: .3s;}
.mv .mv_inner .mv_txt a span{ font-size: 16px;}
.mv .mv_inner .accent{ position: absolute; right: calc((100% - 1300px) / 2); bottom: 40px; width: 432px; height: auto; background: rgba(255, 255, 255, 0.6); padding: 15px; box-sizing: border-box; border-radius: 10px; border: 1px solid #B88917;}
.mv .mv_inner .accent img{ filter: drop-shadow(0px 0px 3px rgba(255, 255, 255, 0.8)) drop-shadow(0px 0px 6px rgba(255, 255, 255, 0.8)) drop-shadow(0px 0px 6px rgba(255, 255, 255, 0.8));width: 100%; height: auto;}
.mv .mv_inner .accent .kome{ font-size: 12px; font-weight: 700; text-shadow: 0px 0px 5px rgba(255, 255, 255, 0.8), 0px 0px 8px rgba(255, 255, 255, 0.8), 0px 0px 10px rgba(255, 255, 255, 0.8); margin-top: 10px;}
/*
.mv .mv_inner .circle{ background: #B88917; border-radius: 75px; position: absolute; right: calc((100% - 1000px) / 2); bottom: 40px; width: 140px; height: 140px; color: #fff; font-size: 18px; padding: 25px 10px 0; box-sizing: border-box; line-height: 1.2;}
.mv .mv_inner .circle span{ font-size: 32px;}
*/

@media screen and (max-width: 1350px){
.mv .mv_inner .mv_txt{ left: calc((100% - 1000px) / 2);}
.mv .mv_inner .accent{ right: calc((100% - 1000px) / 2);}
}
@media screen and (max-width: 1080px){
	.mv .mv_inner .mv_txt{ left: 20px;}
}
@media screen and (min-width: 768px){
	.mv .mv_inner .mv_txt a:hover{ filter: brightness(1.25);}
	.mv .mv_inner .mv_txt a:hover::after{ right: 15px;}
}
@media screen and (max-width: 767px){
	.mv .mv_inner .mv_txt{ position: initial; left: auto; top: auto; transform: none; padding: 20px; margin-top: -90px;}
	.mv .mv_inner .mv_txt .ttl_en{ font-size: 16px; margin-bottom: 10px;}
	.mv .mv_inner .mv_txt .mv_ttl{ font-size: 21px; margin-bottom: 40px;}
	.mv .mv_inner .mv_txt a{ padding: 16px; margin-top: 20px; width: 100%; text-align: center;}
	.mv .mv_inner .mv_txt a span{ font-size: 18px;}
	.mv .mv_inner .accent{ position: initial; right: auto; bottom: auto; width: 100%; height: auto; padding: 0 20px 20px; box-sizing: border-box; background: none; border: none;}
	
	/* .mv .mv_inner .circle{ border-radius: 75px; right: 20px; top: 20px; bottom: 0; width: 100px; height: 100px; font-size: 14px; padding: 20px 10px 0;}
	.mv .mv_inner .circle span{ font-size: 20px;} */

	.mv .mv_inner .mv_img{ height: 180px; }
}
@media screen and (max-width: 499px){
	.mv .mv_inner .mv_img{ height: 140px;}
}


/*-------------------------
__concept
-------------------------*/
#concept{display:flex;align-items:center;}
#concept .inner .sec_ttl{ position: relative; margin-bottom: 65px;}
#concept .inner .sec_ttl::before{ content: ""; position: absolute; height: 2px; width: 67px; bottom: -20px; left: 50%; transform: translateX(-50%); background: #434090;}
#concept .inner .sub_ttl{font-size:2.4em;line-height:1.6;padding:0 0 45px;}
#concept .inner .read_txt{ margin-bottom: 40px;}
#concept .inner ul{ display: flex; gap: 50px; justify-content: center; align-items: center; margin-bottom: 50px;}
#concept .inner ul li{font-size: clamp(1.4em, 2vw, 2.1em); line-height: 1.6; position: relative;}
#concept .inner ul li:nth-child(2),
#concept .inner ul li:nth-child(3){margin-top: 100px;}
#concept .inner ul li.bg_b::before{	content: ""; position: absolute; top: 50%; left: 50%; width: 80px; height: 80px; background: #434090; border-radius: 50%; filter: blur(45px); transform: translate(-50%, -50%); z-index: -1;}
#concept .inner ul li.bg_g::before{	content: ""; position: absolute; top: 50%; left: 50%; width: 80px; height: 80px; background: #B88917; border-radius: 50%; filter: blur(45px); transform: translate(-50%, -50%); z-index: -1;}

@media screen and (max-width: 767px){
	#concept .inner .sec_ttl{ margin-bottom: 45px;}
	#concept .inner .sub_ttl{font-size:1.8em;padding:0 0 25px;}
	#concept .inner .read_txt{ margin-bottom: 30px; text-align: left;}
	#concept .inner ul{ flex-wrap: wrap; gap: 30px 10px; margin-bottom: 20px;}
	#concept .inner ul li{ width: calc(40% - 5px);}
	#concept .inner ul li:nth-child(2),
	#concept .inner ul li:nth-child(3){margin-top: 0;}
	#concept .inner ul li:first-child{ order: 0;}
	#concept .inner ul li:nth-child(2){ order: 1;}
	#concept .inner ul li:nth-child(3){ order: 3;}
	#concept .inner ul li:last-child{ order: 2;}
	#concept .inner ul li.bg_b::before{ width: 60px; height: 60px; filter: blur(30px);}
	#concept .inner ul li.bg_g::before{	width: 60px; height: 60px; filter: blur(30px);}
}
@media screen and (max-width: 499px){
	#concept .inner ul li{ width: calc(50% - 5px);}
	#concept .inner ul li.bg_g::before{	width: 40px; height: 40px; filter: blur(25px);}
	#concept .inner ul li.bg_b::before{ width: 40px; height: 40px; filter: blur(25px);}
}

/*-------------------------
__about
-------------------------*/
#about{ background: #FAFAFA; position: relative; height: 400px;}
#about .inner{ text-align: left; position: absolute; z-index: 1; padding: 0; left: calc((100% - 1000px) / 2); top: 50%; transform: translateY(-50%); width: 45%; max-width: 600px;min-width: auto;}
#about .inner .read_txt{ line-height: 2;}
#about .img_box{ position: absolute; top: 0; right: 0; width: 65%; height: 100%; z-index: 0; overflow: hidden;}
#about .img_box img{ width: 100%; height: 100%; object-fit: cover;}
#about .img_box::before{ content: ""; position: absolute; inset: 0; background: linear-gradient( 90deg, #fafafa 0%, #fafafa 15%, rgba(250,250,250,.95) 25%, rgba(250,250,250,.6) 30%, rgba(250,250,250,0) 50%);}
@media screen and (max-width: 1080px){
	#about .inner{ left: 50px;}
}
@media screen and (max-width: 767px){
	#about{ height: auto; display: flex; flex-direction: column-reverse;}
	#about .inner{ left: auto; position: inherit; top: auto; transform: none; width: 100%; padding: 20px 20px 40px;}
	#about .inner .read_txt{ line-height: 1.6;}
	#about .img_box{ position: initial; width: 100%; height: 180px;}
	#about .img_box::before{ content: none;}
}
@media screen and (max-width: 499px){
	#about .img_box{ height: 140px;}
}

/*-------------------------
__benefits
-------------------------*/
#benefit{ background: #FAF7EF;}
#benefit .inner{ max-width: 980px;}
#benefit .inner .gold_bg{ background: #B88917; padding: 10px 30px; font-size: 2.1em; display: inline-block; color: #fff; margin-bottom: 110px;}
#benefit .inner .flex{ display: flex; gap: 50px; color: #fff; margin: 0 auto;}
#benefit .inner .flex .flex_box{ width: 50%; position: relative; padding: 90px 10px 60px; border-radius: 10px;}
#benefit .inner .flex .flex_box:first-child{background: #434090;}
#benefit .inner .flex .flex_box:last-child{background: #B88917;}
#benefit .inner .flex .flex_box .img_box{ position: absolute; top: -60px; left: 50%; transform: translateX(-50%); width: 120px; height: auto;}
#benefit .inner .flex .flex_box .ttl{ font-size: 2.4em; margin-bottom: 40px; padding-bottom: 20px; border-bottom: 1px solid #fff; display: inline-block;}
#benefit .inner .flex .flex_box .txt{ font-size: 1.8em; line-height: 1.4;}
#benefit .inner .flex .flex_box .txt .price{ font-size: 1.18em;}
#benefit .inner .flex .flex_box .txt .price em{ font-size: 2.5em;}
#benefit .inner .flex .flex_box .txt .price small{ font-size: .6em;}
#benefit .inner .flex .flex_box .kome{ margin-top: 10px; font-size: 1.4em;}
#benefit .inner > .kome{ font-size: 1.4em; text-align: left; margin-top: 20px; line-height: 1.4;}

@media screen and (max-width: 767px){
	#benefit .inner .gold_bg{ padding: 10px; font-size: 1.4em; margin-bottom: 50px;}
	#benefit .inner .flex{ gap: 10px;}
	#benefit .inner .flex .flex_box{ padding: 50px 0 30px;}
	#benefit .inner .flex .flex_box .img_box{ top: -30px; width: 60px;}
	#benefit .inner .flex .flex_box .ttl{ font-size: 1.8em; margin-bottom: 30px; padding-bottom: 10px;}
	#benefit .inner .flex .flex_box .txt{ font-size: 1.4em;}
	#benefit .inner .flex .flex_box .txt .price{ font-size: 1.1em;}
	#benefit .inner .flex .flex_box .txt .price em{ font-size: 2em;}
}
@media screen and (max-width: 499px){
	#benefit .inner .flex{ flex-wrap: wrap; gap: 50px;}
	#benefit .inner .flex .flex_box{ width: 100%;}
}

/*-------------------------
__step up
-------------------------*/
#step_up{ background: #ECECF4;}
#step_up .inner{ max-width: 980px;}
#step_up .inner .read_txt{ margin-bottom: 30px;}
#step_up .inner .flex{ display: flex;}
#step_up .inner .flex dl{ width: calc(100% / 3); padding: 25px 10px 30px; color: #fff; position: relative;}
#step_up .inner .flex .blue1{ background: #8c8cbc; border-radius: 5px 0 0 5px;}
#step_up .inner .flex .blue2{ background: #6966A6;}
#step_up .inner .flex .blue3{ background: #434090; border-radius: 0 5px 5px 0;}
#step_up .inner .flex .blue1::after,
#step_up .inner .flex .blue2::after{ content: ""; position: absolute; width: 20px; height: 40px; right: -20px; top: 50%; transform: translateY(-50%); z-index: 1;}
#step_up .inner .flex .blue1::after{ background: url('images/arrow01@2x.png') no-repeat 100%;}
#step_up .inner .flex .blue2::after{ background: url('images/arrow02@2x.png') no-repeat 100%;}
#step_up .inner .flex dl dt{ margin-bottom: 40px; position: relative; font-size: 2em; font-weight: 300;}
#step_up .inner .flex dl dt::before{ content: ""; position: absolute; width: 67px; height: 2px; background: #fff; bottom: -20px; left: 50%; transform: translateX(-50%);}
#step_up .inner .flex dl dd{ font-size: 2em;}
#step_up .inner .flex dl dd em{ font-size: 2.4em;}

@media screen and (max-width: 767px){
	#step_up .inner .read_txt{ margin-bottom: 20px;}
	#step_up .inner .flex dl{ width: calc(100% / 3); padding: 20px 5px;}
	#step_up .inner .flex .blue1::after,
	#step_up .inner .flex .blue2::after{ width: 10px; height: 20px; right: -10px;}
	#step_up .inner .flex dl dt{ margin-bottom: 30px; font-size: 1.4em;}
	#step_up .inner .flex dl dd{ font-size: 1.6em;}
	#step_up .inner .flex dl dd em{ font-size: 2em;}
}
@media screen and (max-width: 499px){
#step_up .inner .flex{ flex-wrap: wrap;}
#step_up .inner .flex dl{ width: 100%; padding: 30px 10px;}
#step_up .inner .flex .blue1{ border-radius: 5px 5px 0 0;}
#step_up .inner .flex .blue3{ border-radius: 0 0 5px 5px;}
#step_up .inner .flex .blue1::after,
#step_up .inner .flex .blue2::after{ right: 47%; top: auto; bottom: -14px; transform: translateX(-50%)rotate(90deg);}
}

/*-------------------------
__note
-------------------------*/
#note{ background: #E6E6E6;}
#note .inner{ max-width: 900px;}
#note .inner .txt_wrap{ background: #fff; padding: 45px; box-sizing: border-box; border-radius: 5px;}
#note .inner .txt_wrap .read_txt{ text-align: left; margin-left: 20px; margin-bottom: 1em; position: relative;}
#note .inner .txt_wrap .read_txt::before{ content: ""; position: absolute; background: #B88917; width: 6px; height: 6px; left: -15px; top: 0.65em; border-radius: 3px;}
@media screen and (max-width: 767px){
#note .inner .txt_wrap{ padding: 20px;}
}
/*-------------------------
__entry
-------------------------*/
#entry a{ color: #fff; text-decoration: none; padding: 50px 0; box-sizing: border-box; display: block; background: #434090; transition: .4s;}
#entry a .en{ color: #C7C6DE;}
#entry a .sec_ttl{ font-size: 3em;}

@media screen and (min-width: 768px){
	#entry a:hover{ filter: brightness(1.25);}
}
@media screen and (max-width: 767px){
#entry a{ padding: 40px 10px; margin: 20px; border-radius: 10px;}
#entry a .sec_ttl{ font-size: 2em;}
}

.footer { padding: 0!important;}