@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;900&family=Roboto&display=auto');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200..900&display=auto');

html{
font-family: 'Noto Sans JP','Noto Serif JP', sans-serif;
font-size: 10px;
}
body{
font-size: 1.5rem;
line-height: 1.5;
margin: 0;
padding: 0;
}
.pc-pad-only{
display: block;
}
.sp-only{
display: none;
}
#wrapper{ 
margin: 0; 
padding: 0;
}
.inner {
max-width: 1200px;
width: 95.85%; 
margin: 0 auto;
padding: 6rem 0;
text-align: center;
}
p{line-height: 1.6;}
a{text-decoration: none;cursor: pointer;}
a:hover{opacity: 0.8;}
img{max-width: 100%;}
ul.list-disc li {list-style: disc; margin-left: 1em;}
.in-1half {text-indent: -1em; margin-left: 1em;}
.in-1 {text-indent: -1em; margin-left: 1em;}
.in-2 {text-indent: -2em; margin-left: 2em;}


/* カラム */
.flex-item {
display: flex;
flex-wrap: wrap;
}
.column2 > .item{ width: 48%;}
.column4 > .item{ width: 23.5%;}
.column2 > .item img, 
.column4 > .item img { margin: 0 auto;}

/* 位置 */
.text-left{
text-align: left;
}

/* 共通 */
.onlysp_ideways_br{
display: none;
}
.onlysp_br{
display: none;
}
h2{
font-size: 3.6rem;
font-family: 'Noto Serif JP', sans-serif;
font-weight: bold;
padding-bottom: 20px;
}
h2.h2_small{font-size: 3rem !important;}
h2 .en{
font-size: 1.5rem;
font-family: 'Noto Sans JP', sans-serif;
color: #b9981a;
display: block;
font-weight: normal;
}
h3{font-size: 2.2rem;margin-bottom: 1.5rem;}

.emphasis_small{
color: #b9981a;
}
.mgB0 {margin-bottom: 0 !important;}
.mgB2rem {margin-bottom: 2rem !important;}
.mgB3rem {margin-bottom: 3rem !important;}
.mgB4rem {margin-bottom: 4rem !important;}
.block {display: block;}
/* CVボタン */
.cv_btn a{
background-color: #b9981a;
color: #fff;
font-size: 1.8rem;
text-align: center;
padding: 15px 20px;
}

/*header
--------------------------------------------*/
header{
box-sizing: border-box;
position: fixed;
z-index: 10;
width: 100%;
margin: 0 auto;
/* 以下MVが明るめのため追加。MVの明るさに応じてコメントアウト
color: #000;
background-color: rgba(255, 255, 255, 0.8);
height: auto;
box-shadow: 0px 1px 10px #93939329; */
}
.header_inner {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.5rem 1rem;

height: 72px;
justify-content: space-between;
}
header h1{
width: 230px;
}
.header_right{
align-items: center;
}
.drawer_nav_menu{
display: flex;
}
.drawer_nav_item{
display: flex;
margin-left: 1em;
align-items: center;
} 
.drawer_nav_item:not(:last-child):after{
content: "";
margin-left: 1em;
width: 1px;
height: 14px;
background: #fff;
transform: translateY(-50%);
position: relative;
top: 35%;
} 
.header_inner .cv_btn{
margin-left: 20px;
}
.drawer_button{
display: none;
}
/*クロールでヘッダーの色変更*/
.header {
transition: color 0.2s ease-out;
}
.header.headerColorScroll {
color: #000;
background-color: rgba(255, 255, 255, 0.8);
height: auto;
box-shadow: 0px 1px 10px #93939329;
transition: color 0.2s ease-out;
}
.headerColorScroll .header_list-item:not(:last-child):after {
background: #000;
}
/*スクロールでヘッダーのロゴ画像変更*/
.header-logo.headerLogoScroll.-before {
display : none;
}
.header-logo.-after {
display : none;
}
.header-logo.headerLogoScroll.-after {
display : block;
}
/*スクロールでハンバーガーアイコンの色変更*/
.header.headerHamburgerScroll .drawer_button > span {
background-color: #000;
}

/*sec_mv
--------------------------------------------*/
.sec_mv{
position: relative;
width: 100%;
margin: 0 auto;
color: #fff;
}
.mv_inner{
max-width: 1200px;
margin: 0 auto;
}
.mv_ttl{
position: absolute;
top: 20%;
padding: 0 2%;
max-width: 1200px;
width: 100%;
color: #fff;
font-family: 'Noto Serif JP', sans-serif;
font-weight: bold;
}
p.main_ttl {font-size: 1.7rem; letter-spacing: 0.5rem;margin-left: 1em;}
.main_ttl span{
font-size: 3rem;
}
.mv_ttl h1{
font-size: 7.2rem;
font-weight: bold;
margin-bottom: 1.5rem;
line-height: 1;
}
.secondary_ttl{
font-size: 2rem;
}
.tertiary_ttl{
font-size: 2rem;
}
.mv_item {
padding-top: 20px;
font-family: 'Noto Serif JP', sans-serif;
}
.mv_item p {
margin: 0 auto;
}
.mv_item .emphasis {
color: #b9981a;
}
.item_01,.item_02{
background-color: #fff;
opacity:0.9;
color: #000;
width: 180px;
height: 180px;
border-radius: 50%;
text-align: center;
align-items: center;
display: flex;
}
.item_01{
margin-right: 15px;
}
.item_01 p{
font-size: 1.8rem;
line-height: 1.5;
}
.item_02 p{
font-size: 1.8rem;
line-height: 1.7;
}
.item_01 .emphasis{
font-size: 2.9rem;
}
.item_02 .emphasis{
font-size: 2.9rem;
}
.mv_cta{
position: absolute;
bottom: 0;
background-color: rgba(48,57,92,0.8);
height: 90px;
margin: 0 auto;
right: 0;
left: 0;
}
.mv_cta_inner{
align-items: center;
margin: 0 auto;
}
.mv_cta_inner .emphasis{
font-size: 4rem;
color: #b9981a;
}
.mv_cta_inner p{
padding-right: 15px;
}
.mv_img{
min-height: 600px;
}
.mv_img img{
width: 100%;
object-fit: cover;
height: auto;
min-height: 600px;
}
/*1440px以上のサイズの時のMV画像高さ指定*/
@media screen and (min-width: 1440px) {
.mv_img{
max-height: 700px;
}
.mv_img img{
object-fit: cover;
height: auto;
max-height: 700px;
}
}

/*sec_problem
--------------------------------------------*/
.problem_left{
position: absolute;
background: rgba(255, 255, 255, 0.5);
}
.problem_right{
margin-left: auto;
}
.problem_list li{
font-size: 2.2rem;
text-align: left;
line-height: 1.6em;
background: url(../img/icon_checkbox.png) left 0px top 3px no-repeat;
background-size: 30px auto;
padding-left: 40px;
padding-bottom: 20px;
}

/*sec_aboutus
--------------------------------------------*/
#sec_aboutus p{
font-size: 2rem;
}
.slant_bg {
width: 100%;
margin: 0;
padding: 0;
position: relative;
}
.slant_bg::before {
content: '';
position: absolute;
top: 100px;
bottom: 0;
left: 0;
right: 0;
background-color: #f4f4f4;
transform: skewY(-10deg);
z-index: -10;
}

/*movie指定共通
--------------------------------------------*/
.movie_wrap{max-width: 560px; margin:0 auto;}
.movie {
position: relative;
width: 100%;
padding-top: 56.25%;
}
.movie iframe {
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
}

/*sec_reason
--------------------------------------------*/
.reason_item{
/* justify-content: space-between; */
margin-top: 10px;
}
.reason_item .item{
width: 20%;
height: auto;
margin:4% 2% 0 0;
border-radius: 10px;
position: relative;
padding-top: 20px;
background-color: #fff;
box-shadow: 0 4px 20px rgba(0, 0, 0, .08);
}
.reason_item .item::after{
content: "";
display: block;
padding-top: 20%; 
}

.reason_item .item:first-child{
width: 30%;
margin-top:0;
}
.reason_item .item:last-child{
margin-right: 0;
}
.reason_item .item h3{
font-size: 2rem;
margin: 8px 0;
line-height: 1.2;
}
.reason_item .item:first-child h3 span{
color: #ce3170;
font-size: 2.7rem;
}
.reason_item .item p{
position: absolute;
bottom: 0;
height: 58px;
width: 100%;
font-size: 1.6rem;
line-height: 1.5;
color: #fff;
padding: 0.5rem 0;
background-color: #b9981a;
border-radius: 0 0 10px 10px;
display: flex;
justify-content: center;
align-items: center;
}
.reason_item .item:first-child p{
font-size: 2rem;
height: 58px;
}
.reason_item .item p span{display: block;}
.number{
font-size: 4rem;
font-family: 'Noto Serif JP', sans-serif;
color: #b9981a;
top: -3rem;
left: 10px;
position: absolute;
}
.reason_item .item:first-child .number {
background: url("../img/bg_number.png") no-repeat 50% 65%;
background-size: 100%;
padding: 0.5em;
top: -5rem;
left: 0px;
}

/*sec_price
--------------------------------------------*/
#sec_price h2{
padding-bottom: 0px;
}
#sec_price .lead{
color: #b9981a;
font-size: 3.2rem;
font-weight: bold;
position: relative;
display: inline-block;
padding-bottom: 20px;
}
#sec_price .lead::before{
position: absolute;
top: 10px;
left: -1.5em;
content: '';
display: inline-block;
width: 25px;
height: 36px;
background: url(../img/icon_lead_left.png) no-repeat 50% 50%;
}
#sec_price .lead::after{
position: absolute;
top: 10px;
right: -1.5em;
content: '';
display: inline-block;
width: 25px;
height: 36px;
background: url(../img/icon_lead_right.png) no-repeat 50% 50%;
}
div.table-scroll {
	width: 100%;
	display: block;
	overflow-x: none;
}
div.table-scroll figure {width: 100%;}
.price_item figure img {display: block;width:100%; }
.price_att {margin-top: 1em; text-align: left;}
/*
.price_item{
justify-content: space-between;
margin-top: 10px;
}
.price_item .item{
margin:0 2% 0 0;
border-radius: 10px;
position: relative;
box-shadow: 0 4px 20px rgba(0, 0, 0, .08);
}
.price_item .item:last-child{
margin-right: 0;
}
.price_item h3{
border-radius: 10px 10px 0 0;
padding: 20px 0;
color: #fff;
font-size: 20px;
}
.price_right h3{
background-color: #38659a;
}
.price_premium h3{
background-color: #30395c;
}
.item_text{
padding: 30px 40px;
font-size: 1.8rem;
}
.price_monthly{
color: #9b9b9b;
padding-bottom: 15px;
}
.price_monthly .large{
font-size: 3.4rem;
color: #000;
}
.price_option{
border-top: 1px solid #cacaca;
padding-top: 20px;
margin-top: 20px
}
.price_option h4{
font-size: 2.4rem;
padding-bottom: 10px;
}
.price_option h5{
font-size: 2.2rem;
}
.price_option ul{
padding-left: 2rem;
}
.price_option li{
list-style: disc;
margin-left: 1.5rem;
}
.price_option li{
list-style: disc;
margin-left: 1.5rem;
}
.price_option li:not(:last-child){
padding-bottom: 12px;
}
*/
/*sec_actualresults
--------------------------------------------*/
.actualresults_inner{
width: 100%;
margin: 0 auto;
padding: 6rem 0;
text-align: center;
}
.logo_group .item{
margin-right: 1rem;
}
.slider .item{
width: 200px;
}
.slider .item img{
/*height: 40px;*/
width: auto;
}
.slick-slider {margin-top: 30px;}
/* 巻き戻しをさせない */
.slick-slider .slick-track {
transition: none; 
}
/* 画像をクリアに */
element{
backface-visibility: visible;
backface-visibility: hidden;
}
.slider img {
backface-visibility: hidden;
}

/*sec_faq
--------------------------------------------*/
#sec_faq{
background-color: #f4f4f4;
}
.accordion {
padding: 20px 0;
border-bottom: 1px solid #cacaca;;
}
.accordion_summary {
display: block;
position: relative;
list-style: none; 
cursor: pointer;
font-size: 2rem;
padding: 10px 38px 10px 60px;
}
.accordion_summary::before {
display: block;
content: 'Q';
color: #b9981a;
font-size: 3.8rem;
line-height: 1;
position: absolute;
top: 2px;
left: 12px;
}
.accordion_summary::-webkit-details-marker {
display: none;
}
.accordion_summary::after {
content: "+";
font-size: 1.4em; 
position: absolute;
color: #b9981a;
right: 10px;
top: 50%;
transform: translateY(-50%);
}
.accordion[open] .accordion_summary::after {
content: "−";
}
.accordion_detail {
padding: 5px 38px 5px 60px;
margin: 10px 0;
position: relative;
}
.accordion_text {
font-size: 1.8rem;
margin: 0;
}
.accordion_text::before {
display: block;
content: 'A';
color: #b9981a;
font-size: 3.8rem;
line-height: 1;
position: absolute;
top: 2px;
left: 14px;
}
.note {
font-size: 1.6rem;
padding-top: 4px;
}

/*sec_cta
--------------------------------------------*/
#sec_cta{
background-image: url(../img/cta_bg.png);
background-repeat: no-repeat;
background-position: center;
width: 100%;
margin: 0 auto;
color: #fff;
}
#sec_cta p {
font-size: 3.2rem;
padding-bottom: 20px;
}
#sec_cta p .large {
font-size: 5.6rem;
}
#sec_cta .inner .cv_btn{
margin: 0 auto;
}

/*footer
--------------------------------------------*/
footer{
padding: 50px 0;
text-align: center;
display: block;
}
.footer_link{
display: flex;
width: 300px;
margin: 0 auto;
justify-content: center;
}
.footer_link_item{
display: flex;
margin-left: 1em;
font-size: 1.6rem;
}
.footer_link_item:not(:last-child):after{
content: "";
background-color: #000;
margin-left: 1em;
width: 1px;
height: 14px;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
position: relative;
top: 50%;
}
.footer_copy{
font-size: 1.4rem;
padding-top: 20px;
}


/*
============================ TB CSS ============================

TB専用CSS ipadpro 1024px

====================================================================
*/
@media screen and (max-width: 1023px) {
/* カラム */
.column4 > .item{ width: 48%;}
.inner{
width: 90%;
}
/*sec_mv*/
.mv_ttl {
position: absolute;
top: 20%;
padding: 0 5%;
}
.main_ttl {
font-size: 1.6rem;
}
.main_ttl .emphasis {
font-size: 4rem;
}
.secondary_ttl {
font-size: 2.2rem;
}
.tertiary_ttl {
font-size: 1.8rem;
}
.item_01,.item_02{
width: 180px;
height: 180px;
}
.item_01 .emphasis{
font-size: 3.6rem;
}
.item_02 .emphasis{
font-size: 2.6rem;
}
/*header*/
.header_inner {height: 53px;padding: 0.5rem 0.5rem 0.5rem 1rem;}

header h1{
width: 140px;
}
.drawer_nav_menu{
display: block;
padding-top: 20px;
}
.drawer_nav_item:not(:last-child):after{
content: none;
} 
/* ハンバーガーボタンのデザイン */
.drawer_button {
display: block;
position: relative;
width: 5rem;
height: 5rem;
background-color: transparent;
border: none;
cursor: pointer;
z-index: 999; 
}
/* ハンバーガーボタン内の線 */
.drawer_button > span {
display: block;
position: absolute;
top: 50%;
left: 50%;
width: 3rem;
height: 2px;
/*background-color: #000;*/
background-color: #fff;
transform: translateX(-50%);
}
.drawer_button > span:first-child {
transform: translate(-50%, calc(-50% - 1rem));
transition: transform 0.3s ease;
}
.drawer_button > span:nth-child(2) {transform: translate(-50%, -50%);transition: opacity 0.3s ease;}
.drawer_button > span:last-child {
transform: translate(-50%, calc(-50% + 1rem));transition: transform 0.3s ease;}
/* 展開時のデザイン */
.drawer_button.active > span:first-child {transform: translate(-50%, -50%) rotate(-45deg);}
.drawer_button.active > span:nth-child(2) {opacity: 0;}
.drawer_button.active > span:last-child {transform: translate(-50%, -50%) rotate(45deg);}
/* メニューのデザイン */
.drawer_nav {
position: fixed; 
top: 0;
left: 0;
width: 100%;
height: 100vh;
background-color: rgba(0, 0, 0, 0.5);
transition: opacity 0.3s ease;
opacity: 0;
visibility: hidden;
}
.drawer_nav.active {opacity: 1;visibility: visible;}
.drawer_nav_inner {
position: relative;
width: 80%;
height: 100%;
background-color: #b6bedb;
padding: 4rem 1.5rem 1rem;
margin: 0 0 0 auto;
overflow: scroll;
transform: translateX(100%);
transition: transform 0.3s ease;
}
.drawer_nav.active .drawer_nav_inner {
transform: translateX(0);}
.drawer_nav_menu {list-style: none;padding-left: 0;}
.drawer_nav_link {padding: 1rem 1rem;}
/* sec_reason */
.reason_item .item:nth-child(n + 3){margin-top: 30px;}
/*REASON -01のみ設定*/
.reason_item .item:first-child {width: 48%;}
}


/*
============================ sp CSS ============================

SP専用CSS 横スマホ　ipad 768px

================================================================
*/
@media screen and (max-width: 767px) {
.onlysp_ideways_br{display: block;}
.reason_item .item:first-child {width: 96%;margin: 0 auto 3rem auto!important;}
.column2 > .item, 
.column4 > .item {
width: 96%;
margin: 0 auto 3rem auto!important;}
.inner {max-width:100%; width: 90%;padding: 4rem 0;}	
/* h2 */
h2{font-size: 2.6rem;padding-bottom: 20px;}
h2 .en{font-size: 2rem;}
h3{font-size: 1.8rem;}
/* CVボタン */
.cv_btn a{font-size: 1.6rem;padding: 6px 15px;}
/* mv */
.mv_ttl h1 {font-size: 5.2rem;}
p.main_ttl {font-size: 1.7rem;letter-spacing: 0rem;text-align: center;}
p.main_ttl  span {font-size: 2.5rem;}
.mv_ttl{top: 18%;}
.main_ttl{font-size: 2.8rem;}
.main_ttl .emphasis{font-size: 2.5rem;font-weight: bold;}
.secondary_ttl{font-size: 2rem;}
.tertiary_ttl{font-size: 1.6rem;}
.item_01,.item_02{width: 140px;height: 140px;}
.item_01 p{font-size: 1.5rem;}
.item_02 p{font-size: 1.5rem;}
.item_01 .emphasis, .item_02 .emphasis{font-size: 2.2rem;line-height: 1.2;}
.mv_cta{height: 70px;}
/* sec_problem */
.problem_left {width: 100%;position: static;background: none;}
.problem_left h2 {text-align: center;}
.problem_list li {
font-size: 1.6rem;
background-size: 25px auto;
padding-left: 35px;
padding-bottom: 20px;}
/*sec_aboutus*/
#sec_aboutus p{font-size: 1.6rem;}
.slant_bg::before {top: 70px;}
/*sec_movie*/
.movie_wrap {width: 100%;}
.movie {padding-top: 56.25%;}
/* sec_reason */
.reason_item .item img{width: 60px;}
/*sec_price*/
#sec_price .lead{font-size: 2rem;padding-bottom: 0;}
#sec_price .lead::before{
top: 5px;
left: -1.5em;
width: 20px;
height: 29px;
background-size: 80%;
}
#sec_price .lead::after{
top: 5px;
right: -1.5em;
width: 20px;
height: 29px;
background-size: 80%;}
div.table-scroll {
width: 100%;display: block;overflow-x: scroll;}
div.table-scroll figure{width: 720px;}
/*sec_actualresults*/
.logo_group .item{margin-right: 2rem;}
.slider .item{width: 150px;}
.slider .item img{
height: 20px;
width: auto;}
/*sec_faq*/
.accordion {padding: 20px 0;}
.accordion_summary {font-size: 1.6rem;padding: 8px 30px 8px 50px;}
.accordion_summary::before {font-size: 2.8rem;}
.accordion_text {font-size: 1.5rem;}
.accordion_text::before {font-size: 2.8rem;}
.note {font-size: 1.3rem;padding-top: 3px;}	
.accordion_detail {padding: 5px 30px 5px 50px;margin: 10px 0;position: relative;}
/*sec_cta*/
#sec_cta p {font-size: 2rem;padding-bottom: 20px;}
#sec_cta p {font-size: 2rem;}
#sec_cta p .large {font-size: 4rem;}	
.sec_cta_contents p {line-height: 1.3;}	
/*footer*/
footer {padding: 30px 0;}
.footer_link_item {font-size: 1.2rem;}
.footer_copy {font-size: 1rem;padding-top: 15px;}
}
/*
============================ sp CSS ============================

SP専用CSS 縦スマホ 480px

================================================================
*/
@media screen and (max-width: 479px) {
.pc-pad-only{display: none;}
.sp-only{display: block;}
.onlysp_br{display: block;}
/*sec_mv*/
.main_ttl{font-size: 2.6rem;white-space: nowrap;}
.mv_ttl {text-align: center;top: 15%;}
.mv_cta {height: 120px;}
.mv_cta_inner{display: block;}
.mv_cta_inner p {text-align: center;}
.mv_item {display: inline-flex;}
.mv_cta_inner p {padding: 0 0 8px 0;}
}