@charset "utf-8";


/* ------------------------------------------------------------ common */
:root{
	--main-gradient: linear-gradient(90deg, rgba(175,235,255,1) 0%, rgba(189,163,227,1) 100%);
	--sub-gradient: linear-gradient(280deg, rgba(175,235,255,1) 0%, rgba(189,163,227,1) 100%);
	--orange-gradient: linear-gradient(180deg, rgba(255,210,152,1) 0%, rgba(255,195,203,1) 100%);
	--blue-gradient: linear-gradient(180deg, rgba(147,224,235,1) 0%, rgba(246,218,180,1) 63%);
	--green-gradient: linear-gradient(180deg, rgba(222,235,121,1) 0%, rgba(255,212,180,1) 100%);
}
h3,h4,h5,h6{ font-family: 'Noto-Sans-JP-Bold'; }

.form-box table,
.form-box tbody,
.form-box tr,
.form-box th,
.form-box td{ display: block; width: 100%; text-align: left; }
.form-box input{ width: 100%; padding: 10px; background: #F3F5F7; border-radius: 7px; border: none; }

.form-box .required{ color: #fff; margin-left: 10px; padding: 2px 10px; background: #BA0000; text-align: center; font-family: 'Noto-Sans-JP-Regular'; }
.form-box .submit{ position: relative; }
.form-box .submit:after{ position: absolute; content: ""; top: 40%; right: 20px; translate: 0 -50%; width: 10px; height: 10px; border-top: 1px solid #fff; border-right: 1px solid #fff; rotate: 45deg; }
.form-box .submit-btn{ width: 100%; height: 65px; color: #fff; background: #000; text-align: center; border: 1px solid #000; border-radius: 50px !important; font-size: 15px; }
.form-box .submit-btn:hover{ color: #000; background: #fff; }
.form-box .textarea{ width: 100%; height: 230px; background: #F3F5F7; border-radius: 7px; border: none; padding: 10px; }


.en-ttl{ position: relative; top: 40px; font-size: 150px; font-family: "neue-haas-grotesk-text", sans-serif; font-weight: 700; font-style: normal; text-align: center; }
.ja-ttl{ z-index: 1; position: relative; padding: 0 0 40px; font-size: 34px; line-height: 150%; text-align: center; font-family: 'Noto-Sans-JP-Bold'; }
.white-ttl{ color: #fff; }
.gradation-ttl{ background: linear-gradient(90deg, rgba(187,233,248,1) 0%, rgba(196,183,216,1) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }


/* ------------------------------------------------------------ fv */
#fv{ overflow: hidden; position: relative; padding: 30px 0 70px; background: url(../images/bg_fv.png) 50% -170% no-repeat; }
#fv .flex{ display: flex; align-items: flex-end; justify-content: space-between; }

.fv-roop{ animation: roop 80s infinite linear 0.5s both; position: absolute; top: 30px; display: flex; align-items: center; width: 100%; }
.fv-roop img{ border-radius: 45px; margin: 0 10px; }
@keyframes roop{
	0%{ translate: 0 0; }
	100%{ translate: -100% 0; }
}


.fv-main{ margin: 160px 0 70px; }
.fv-main .text{ width: 700px; }
.fv-main h2{ padding: 0 0 25px; font-size: 32px; font-family: 'Noto-Sans-JP-Bold'; }
.fv-main h2 strong{ display: block; padding: 20px 0 0; font-size: 80px; }
.fv-main h2 small{ font-size: 24px; padding-left: 20px; }
.fv-main p{ padding: 0 0 30px; font-size: 19px; line-height: 200%; }

.fv-main ul{ display: flex; align-items: center; justify-content: space-between; width: 570px; }
.fv-main li{ display: flex; align-items: center; justify-content: center; flex-direction: column; width: 180px; height: 180px; border-radius: 100%; background: #FFE764; font-size: 18px; line-height: 200%; text-align: center; }
.fv-main li strong{ font-size: 39px; font-family: "neue-haas-grotesk-text", sans-serif; font-weight: 700; font-style: normal; }
.fv-main li span{ font-family: 'Noto-Sans-JP-Bold'; }

#fv .form-box{ width: 465px; padding: 40px 35px 50px; background: #fff; border-radius: 30px; filter: drop-shadow(0 0 10px rgba(0,0,0,0.1)); text-align: center; }
#fv .form-box h3{ padding: 0 0 15px; font-size: 28px; }
#fv .form-box p{ font-size: 14px; padding: 0 0 10px; }
#fv .form-box img{ padding: 0 0 10px; }

#fv .form-box tr{ padding: 0 0 25px; }
#fv .form-box th{ margin: 0 0 10px; }
#fv .form-box .required{ font-size: 11px; }


.clients h3{ padding: 0 0 30px; font-size: 34px; text-align: center; }
.clients .pic{text-align: center;}

/* ------------------------------------------------------------ theme */
#theme{ clip-path: polygon(0 0, 100% 0, 100% 85%, 50% 100%, 0 85%); padding: 30px 0 200px; background: var(--main-gradient); }

.theme-list{ display: flex; align-items: flex-start; justify-content: space-between; }
.theme-list li{ padding: 50px 15px 30px; width: calc(100% / 3 - 40px); height: 530px; background: #fff; }
.theme-list li figure{ display: flex; align-items: center; justify-content: center; width: 100%; height: 230px; }
.theme-list li .text{ padding: 30px 0 0; }
.theme-list li h3{ padding: 0 0 20px; font-size: 24px; text-align: center; }
.theme-list li p{ font-size: 15px; line-height: 200%; }


/* ------------------------------------------------------------ solution */
.connection{ padding: 100px 0 70px; text-align: center; font-size: 34px; line-height: 200%; font-family: 'Noto-Sans-JP-Bold'; letter-spacing: 0.05em; }
.connection img{ margin: 0 10px 0 0; vertical-align: sub; }
.line{ background:linear-gradient(transparent 60%, #FFE764 60%); }

#solution{ }

.solution-list{ display: flex; align-items: flex-start; }
.solution-list li{ width: calc(100% / 3); padding: 40px 30px; }
.solution-list li:first-of-type{ background: var(--orange-gradient); }
.solution-list li:nth-of-type(2){ background: var(--blue-gradient); }
.solution-list li:last-of-type{ background: var(--green-gradient); }

.solution-list li h3{ padding: 0 0 20px; font-size: 24px; letter-spacing: 0.05em; text-align: center; }
.solution-list li .box:first-of-type{ margin-bottom: 35px; }
.solution-list li .text{ height: 120px; background: #fff; }
.solution-list li .text p{ padding: 30px; font-size: 19px; font-family: 'Noto-Sans-JP-Bold'; line-height: 150%; }


/* ------------------------------------------------------------ reason */
#reason{ padding: 100px 0; }

.ttl-box{ display: flex; align-items: center; justify-content: center; padding: 0 0 80px; }
.ttl-box span{ padding: 5px 25px 10px 25px; color: #fff; background: #000; text-align: center; font-family: "neue-haas-grotesk-text", sans-serif; font-weight: 700; font-style: normal; font-size: 31px; }
.ttl-box strong{ padding-left: 10px; font-size: 58px; }
.ttl-box h3{ padding-left: 30px; font-size: 46px; letter-spacing: 0.05em; }

.reoson{ padding: 80px 0 0; }
.node-ttl{ padding: 0 0 60px; font-size: 36px; letter-spacing: 0.05em; font-family: 'Noto-Sans-JP-Bold'; text-align: center; }
.sec-ttl{ width: 100%; margin: 0 0 20px; padding: 15px; font-size: 36px; text-align: center; font-family: 'Noto-Sans-JP-Bold'; background: var(--main-gradient); color: #fff; }

.plane-box{ padding: 0 0 100px; }
.plane-box p{ padding: 0 0 50px; font-size: 16px; line-height: 200%; text-align: center; }
.plane-box .key{ width: 100%; height: auto; margin: 0 0 90px; }

.package-list{ display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }
.package-list li{ width: calc(100% / 3 - 20px ); padding: 0 0 40px; text-align: center; cursor: pointer; }
.package-list li::hover { opacity: 0.7;}
.package-list li .stage{ margin: 20px 0 0; }

.package-list li.large{ width: 590px; }
.package-list li.large .pic{ width: 100%; }

.order-list{ display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap;}
.order-list:first-of-type{ margin: 0 0 150px;  }
.order-list li{ width: calc(100% / 2 - 25px); }
.order-list .text{ padding: 30px 0 0; }
.order-list li .title{ padding: 0 0 20px; font-size: 24px; }
.order-list li p{ font-size: 15px; line-height: 200%; text-align: left; }

.case-list{ display: flex; align-items: flex-start; flex-wrap: wrap; justify-content: center; max-width: 1600px; margin: 0 auto;}
.case-list li{ width: 450px; margin:0 30px 80px; }

.case-list li img{ width: 100%; height: auto; }
.case-list li .text{ padding: 35px 0 0; }
.case-list li span{ display: block; padding: 0 0 10px; font-size: 13px; color: #969696; }
.case-list li h6{ padding: 0 0 18px; font-size: 19px; line-height: 200%; }
.case-list li p{line-height: 150%; }

.flex-list li{ display: flex; align-items: center; }
.flex-list li:nth-of-type(even){ flex-direction: row-reverse; }
.flex-list li img{ width: 50%; height: auto; }
.flex-list li .text{ }
.flex-list li h4{ width: 90%; padding: 0 0 30px; font-size: 28px; line-height: 150%; }
.flex-list li p{ width: 90%; font-size: 16px; line-height: 200%; }

.flex-list li .text{ width: 50%; display: flex; flex-direction: column; }
.flex-list li .box{ width: 90%; }
.flex-list li:nth-of-type(odd) .text{ align-items: flex-end; }
.flex-list li:nth-of-type(even) .text{ align-items: flex-start; }

.reoson03{ padding: 180px 0 0; }
.reoson03 .ttl-box{ padding: 0 0 30px; }

.cost-table,
.cost-table tbody,
.cost-table tr{ display: block; width: 100%; }
.cost-table th{ font-size: 26px; font-family: 'Noto-Sans-JP-Bold'; }

.cost-table thead th{ width: 230px; height: 100px; text-align: center; }
.cost-table thead .blank{ width: 260px; }

.cost-table tbody tr{ display: flex; align-items: center; background: #F5F5F5; margin: 5px 0; }
.cost-table tbody tr:first-of-type{ margin-top: 0; }
.cost-table tbody th{ width: 260px; padding: 0 40px; font-size: 21px; font-family: 'Noto-Sans-JP-Bold'; text-align: left; }
.cost-table tbody td{ width: 230px; }
.cost-table tbody td p{ display: flex; align-items: center; justify-content: center; flex-direction: column; width: 210px; height: 140px; margin: 10px; background: #fff; border-radius: 13px; font-size: 15px; line-height: 150%; text-align: center; }
.cost-table tbody td img{ margin: 0 0 10px; }

.cost-table .color01{ background: #D5F0FA; }
.cost-table .color02{ background: linear-gradient(180deg, rgba(210,233,244,1) 0%, rgba(211,226,240,1) 100%); }
.cost-table .color03{ background: linear-gradient(180deg, rgba(211,225,239,1) 0%, rgba(213,220,235,1) 100%); }
.cost-table .color04{ background: linear-gradient(180deg, rgba(213,220,235,1) 0%, rgba(213,213,230,1) 100%); }
.cost-table .color05{ background: linear-gradient(180deg, rgba(214,213,229,1) 0%, rgba(216,207,227,1) 100%); }



/* ------------------------------------------------------------ howto */
#howto{ padding: 100px 0; background: var(--sub-gradient); }

.step-list li{ position: relative; display: flex; align-items: center; margin: 0 0 60px; padding: 20px 35px; background: #fff; border-radius: 13px; }
.step-list li:last-of-type{ margin-bottom: 0; }

.step-list li:after{ position: absolute; content: ""; bottom: -40px; left: 50%; translate: -50% 0; width: 50px; height: 25px; background: #fff; clip-path: polygon(0 0, 100% 0, 50% 100%); }
.step-list li:last-of-type:after{ display: none; }

.step-list .num{ width: 80px; margin: 0 20px 0 0; font-size: 50px; font-family: "neue-haas-grotesk-text", sans-serif; font-weight: 700; font-style: normal; text-align: center; line-height: 100%; }
.step-list .num small{ display: block; font-size: 21px; line-height: 100%; }

.step-list img{ width: 255px; height: auto; }
.step-list .text{ width: calc(100% - 335px); margin-left: 30px; }
.step-list h3{ padding: 0 0 20px; font-size: 24px; line-height: 150%; }
.step-list h3 small{ padding-left: 10px; font-size: 15px;}
.step-list p{ font-size: 16px; line-height: 150%; }


/* ------------------------------------------------------------ faq */
#faq{ padding: 100px 0 ; }

.faq-list .type{ padding: 0 15px 0 0; font-size: 34px; font-family: "neue-haas-grotesk-text", sans-serif; font-weight: 700; font-style: normal; }

.faq-list dl{ margin: 0 0 10px; padding: 30px 40px; border: 1px solid #D0D0D0; border-radius: 15px; }
.faq-list dt{ position: relative; display: flex; align-items: center; }
.faq-list dt p{ font-size: 24px; letter-spacing: 0.05em; line-height: 150%; font-family: 'Noto-Sans-JP-Bold'; }

.faq-list dl dt:after{ transition: 0.8s; position: absolute; content: ""; right: 0; top: 50%; translate: 0 -50%; width: 15px; height: 15px; border-right: 2px solid #000; border-bottom: 2px solid #000; rotate: 45deg; }
.faq-list .open dt:after{ transition: 0.8s; rotate: -135deg; }

.faq-list dd{ margin: 40px 0 0; display: flex; align-items: center; }
.faq-list dd .type{ color: #C10000; }
.faq-list dd p{ font-size: 16px; letter-spacing: 0.05em; line-height: 150%; font-family: 'Noto-Sans-JP-Medium'; }


/* ------------------------------------------------------------ modal */
.modals{ width: 100%; height: 100%; }
.modals .modal{ display: none; position: fixed; width: 100%; height: 100%;z-index: 2000;top: 0px; left: 0px; background: rgba(0,0,0,0.5); visibility: visible; overflow-y: scroll; padding: 50px 0; }
.modals .modal .meta_pkg,
.modals .modal .meta_case{ width: 1000px; margin: 0 auto; }
.modals .modal .bg_img{ position: relative; padding-bottom: 563px; background: no-repeat center center / cover; }
.modals .modal .bg_img .cross{ position: absolute; top: 30px; right: 25px; }
.modals .modal .bg_img .cross span{ position: absolute; top: 0; left: 7px; display: inline-block; width: 20px; height: 1px; background: #000; transform: rotate(45deg); }
.modals .modal .bg_img .cross span:last-of-type{  transform: rotate(-45deg); }
.modals .modal .bg_img .cross p{ font-size: 11px; padding-top: 18px; }
.modals .modal .textarea{ padding: 65px 100px 0; background: #fff; min-height: 690px; }
.modals .modal .meta_pkg .textarea .flex{ display: flex; justify-content: space-between; margin-bottom: 60px; }
.modals .modal .meta_pkg .textarea .flex .name{ width: 275px; }
.modals .modal .meta_pkg .textarea .flex .name h3{ margin-bottom: 47px; }
.modals .modal .meta_pkg .textarea .flex .name h3 img { width: 100%; height: auto; }
.modals .modal .meta_pkg .textarea .flex .name .price{ border: 1px solid #707070; padding: 20px 0; text-align: center; }
.modals .modal .meta_pkg .textarea .flex .name .price p{ font-size: 20px; letter-spacing: 0.05em; }
.modals .modal .meta_pkg .textarea .flex .name .price p small{ font-size: 12px; display: block; margin-bottom: 8px; }
.modals .modal .meta_pkg .textarea .flex .name .price p em{ font-size: 39px; font-weight: 700; font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif; }
.modals .modal .meta_pkg .textarea .flex .name .price p.mini{ font-size: 16px; margin-top: 11px; }
.modals .modal .meta_pkg .textarea .flex .name .price p.mini em{ font-size: 29px; }

.modals .modal .meta_pkg .textarea .flex .name .price p span{ font-size: 13px; }
.modals .modal .meta_pkg .textarea .flex .detail{ width: 485px; }
.modals .modal .meta_pkg .textarea .flex .detail h4{ font-size: 22px; letter-spacing: 0.05em; line-height: 170%; margin-bottom: 35px; }
.modals .modal .meta_pkg .textarea .flex .detail p{ font-size: 15px; line-height: 200%; }
.modals .modal .textarea .btns{ width: 240px; margin: 0 auto; padding: 13px 0; font-size: 15px; border: 1px solid #707070; border-radius: 50px; }

.modals .modal .meta_case .textarea{ padding: 45px 100px 0; }
.modals .modal .meta_case .textarea h3{ font-size: 22px; line-height: 170%; font-family: 'Noto-Sans-JP-Bold'; margin-bottom: 40px; text-align: center; }
.modals .modal .meta_case .textarea h3 span{ display: block; font-size: 14px; font-family: 'Noto-Sans-JP-Medium'; margin-top: 30px; }
.modals .modal .meta_case .textarea p{ font-size: 15px; line-height: 200%; margin-bottom: 75px; }


.modals .modal .meta_pkg .close { cursor: pointer;}

.modals #modal01 .meta_pkg .bg_img{ background-image: url(../images/modal/bg_m_01.jpg); }
.modals #modal02 .meta_pkg .bg_img{ background-image: url(../images/modal/bg_m_02.jpg); }
.modals #modal03 .meta_pkg .bg_img{ background-image: url(../images/modal/bg_m_03.jpg); }
.modals #modal04 .meta_pkg .bg_img{ background-image: url(../images/modal/bg_m_04.jpg); }
.modals #modal05 .meta_pkg .bg_img{ background-image: url(../images/modal/bg_m_05.jpg); }
.modals #modal06 .meta_pkg .bg_img{ background-image: url(../images/modal/bg_m_06.jpg); }
.modals #modal07 .meta_pkg .bg_img{ background-image: url(../images/modal/bg_m_07.jpg); }
.modals #modal08 .meta_pkg .bg_img{ background-image: url(../images/modal/bg_m_08.jpg); }
.modals #modal09 .meta_pkg .bg_img{ background-image: url(../images/modal/bg_m_09.jpg); }
.modals #modal10 .meta_pkg .bg_img{ background-image: url(../images/modal/bg_m_10.jpg); }
.modals #modal11 .meta_pkg .bg_img{ background-image: url(../images/modal/bg_m_11.jpg); }

.modals #case01 .meta_case .bg_img{ background-image: url(../images/modal/bg_c_01.jpg); }
.modals #case02 .meta_case .bg_img{ background-image: url(../images/modal/bg_c_02.jpg); }
.modals #case03 .meta_case .bg_img{ background-image: url(../images/modal/bg_c_03.jpg); }
.modals #case04 .meta_case .bg_img{ background-image: url(../images/modal/bg_c_04.jpg); }
.modals #case05 .meta_case .bg_img{ background-image: url(../images/modal/bg_c_05.jpg); }
.modals #case06 .meta_case .bg_img{ background-image: url(../images/modal/bg_c_06.jpg); }



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

/* ------------------------------------------------------------ common */
	.en-ttl{ top: 24px; font-size: 60px; }
	.ja-ttl{ padding: 0 0 30px; font-size: 17px; }



/* ------------------------------------------------------------ fv */
	#fv{ padding: 30px 0 50px; }
	#fv .flex{ display: block; }
	
	.fv-roop{ animation-duration: 15s; top: 45px; }
	.fv-roop img{ width: 250px; height: auto; }

	.fv-main{ position: relative; z-index: 1; margin: 200px 0 40px; padding: 10px 0; background: rgba(255,255,255,0.6); }
	.fv-main .text{ width: 100%; padding: 0 0 30px; }
	.fv-main h2{ padding: 0 0 16px; font-size: 16px; }
	.fv-main h2 strong{ padding: 10px 0 0; font-size: 38px; }
	.fv-main h2 small{ font-size: 12px; padding-left: 11px; }
	.fv-main p{ padding: 0 0 15px; font-size: 14px; }
	
	.fv-main ul{ width: 350px; margin: 0 auto; }
	.fv-main li{ width: 110px; height: 110px; font-size: 11px; line-height: 160%; }
	.fv-main li strong{ font-size: 19px; }

	#fv .form-box{ width: 100%; padding: 30px 15px 30px; border-radius: 15px; }
	#fv .form-box h3{ padding: 0 0 10px; font-size: 19px; }
	#fv .form-box p{ font-size: 13px; }
	#fv .form-box th{ font-size: 13px; }
	#fv .form-box .required{ padding: 1px 8px; font-size: 10px; }

	.form-box input{ border-radius: 5px; font-size: 13px; }
	.form-box .submit-btn{ height: 60px; font-size: 12px; }
	.form-box .submit:after{ width: 8px; height: 8px; top: 35%; }

	.clients h3{ padding: 0 0 5px; font-size: 20px; line-height: 150%; }
	.clients .pic img{ width: 100%; height: auto;}


/* ------------------------------------------------------------ theme */
	#theme{ clip-path: polygon(0 0, 100% 0, 100% 95%, 50% 100%, 0 95%); padding: 40px 0 80px; }
	
	.theme-list{ display: block; }
	.theme-list li{ margin: 0 0 20px; padding: 35px 25px 25px; width: 100%; height: auto; }
	.theme-list li figure{ width: 50%; height: auto; margin: 0 auto; }
	.theme-list li:last-of-type figure{ width: 25%; }
	.theme-list li .text{ padding: 20px 0 0; }
	.theme-list li h3{ padding: 0 0 10px; font-size: 20px; }
	.theme-list li p{ font-size: 13px; line-height: 170%; }
	
	.connection{ padding: 70px 0 40px; font-size: 17px; }
	.connection img{ width: 250px; height: auto; }


/* ------------------------------------------------------------ solution */
	.solution-list{ display: block; }
	.solution-list li{ width: 100%; padding: 40px 20px; }
	.solution-list li h3{ font-size: 20px; }
	.solution-list li img{ width: 100%; height: auto; }
	.solution-list li .text{ height: 100px; }
	.solution-list li .text p{ padding: 20px 30px; font-size: 17px; }


/* ------------------------------------------------------------ reason */
	#reason{ padding: 50px 0; }
	.reoson{ padding: 0 0 30px; }
	
	.ttl-box{ padding: 0 0 30px; }
	.ttl-box span{ padding: 10px; font-size: 13px; width: 130px; }
	.ttl-box strong{ padding-left: 0; font-size: 30px; display: block; }
	.ttl-box h3{ padding-left: 15px; font-size: 26px; line-height: 130%; }
	
	.sec-ttl{ margin: 0 0 10px; padding: 10px; font-size: 22px; }
	.node-ttl{ padding: 0 0 30px; font-size: 20px; line-height: 150%; }
	
	.plane-box p{ padding: 0 0 30px; font-size: 14px; line-height: 170%; }
	.plane-box{ padding: 0 0 50px; }
	.plane-box .key{ margin: 0 0 15px; }
	
	.package-list li{ width: calc(100% / 2 - 2% ); padding: 0 0 30px; }
	.package-list li.large{ width: calc(100% / 2 - 2% ); }
	.package-list li .stage{ margin: 15px 0 0; width: 80%; }
	.package-list li.flex{ display: block; }
	.package-list li.flex .pic{ width: 100%; }
	.package-list li.flex div{ padding: 20px 0 0; width: 100%; }
	.package-list li.flex div img{ width: 80%; }
	.package-list li.flex a{ width: 80%; margin: 30px auto 0; padding: 15px 10px; }
	
	.order-list li{ width: 100%; }
	.order-list .text{ padding: 15px 0 0; }
	.order-list li .title{ padding: 0 0 15px; font-size: 17px; }
	.order-list li h6{ padding: 0 0 10px; font-size: 19px; }
	.order-list li p{ font-size: 13px; }
	.order-list:first-of-type{ margin: 0; }
	.create{ margin: 40px 0 0; }
	
	.case-list li{ width: 100%; margin: 0 5% 40px; }
	.case-list li .text{ padding: 20px 0 0; }
	.case-list li span{ padding: 0 0 10px; font-size: 11px; }
	.case-list li h6{ padding: 0 0 10px; font-size: 16px; line-height: 170%; }
	.case-list li p{ font-size: 14px; }
	
	.flex-list li{ display: block; padding: 0 0 40px; }
	.flex-list li img{ width: 100%; }
	.flex-list li .text{ width: 100%; padding: 15px 0 0; }
	.flex-list li h4{ width: 100%; padding: 0 0 10px; font-size: 20px; }
	.flex-list li p{ width: 100%; font-size: 14px; }
	
	.cost-table{ width: 100%; }
	.cost-table tbody tr{ flex-wrap: wrap; padding: 0 0 5px; }
	.cost-table thead .blank{ width: 140px;display: none; }
	.cost-table thead th{ width: 160px; height: 80px; font-size: 20px; }
	
	.cost-table tbody th{ width: 100%; padding: 10px; font-size: 16px; text-align: center; }
	.cost-table tbody td{ width: calc(100% / 4); height: 120px; }
	.cost-table tbody td p{ width: 90%; height: 110px; margin: 5px auto; font-size: 0.7em; }
	.cost-table tbody td img{ width: 30px; height: auto; }


	.reoson01 .plane-box p{ padding: 0 0 10px; }
	.reoson01 .plane-box .key{ margin: 0 0 50px; }
	

/* ------------------------------------------------------------ howto */
	#howto{ padding: 40px 0 80px; }
	
	.step-list li{ flex-wrap: wrap; margin: 0 0 50px; padding: 30px 20px; }
	.step-list li:after{ bottom: -36px; width: 40px; height: 20px; }
	.step-list .num{ width: 50px; font-size: 35px; }
	.step-list .num small{ font-size: 14px; }
	
	.step-list img{ width: calc(100% - 70px); }
	.step-list .text{ width: 100%; margin: 15px 0 0; }
	.step-list h3{ padding: 0 0 5px; font-size: 16px; }
	.step-list p{ font-size: 13px; }


/* ------------------------------------------------------------ faq */
	#faq{ padding: 40px 0 50px; }
	
	.faq-list dl{ padding: 20px 10px; }
	.faq-list .type{ padding: 0 10px 0 0; font-size: 17px; }
	.faq-list dl dt:after{ top: 9px; width: 10px; height: 10px; }
	.faq-list dt p{ padding-right: 15px; font-size: 14px; }
	.faq-list dd{ margin: 20px 0 0; }
	.faq-list dd p{ font-size: 14px; line-height: 150%; }


/* ------------------------------------------------------------ modal */
	.modals .modal{ display: none; position: fixed; width: 100%; height: 100%;z-index: 2000;top: 0px; left: 0px; background: rgba(0,0,0,0.5); visibility: visible; overflow-y: scroll; padding: 50px 0; }
	.modals .modal .meta_pkg,
	.modals .modal .meta_case{ width: 90%; }
	.modals .modal .bg_img{ padding-bottom: 200px; }
	.modals .modal .textarea{ padding: 30px 5% 40px; min-height: auto; }
	.modals .modal .meta_pkg .textarea .flex{ display: block; margin-bottom: 30px; }
	.modals .modal .meta_pkg .textarea .flex .name{ width: 100%; display: flex; justify-content: space-between; align-items: center; }
	.modals .modal .meta_pkg .textarea .flex .name h3{ width: 30%; margin-bottom: 0; }
	.modals .modal .meta_pkg .textarea .flex .name h3 img { width: 100%; height: auto; }
	.modals .modal .meta_pkg .textarea .flex .name .price{ width: 65%; padding: 10px 0; }
	.modals .modal .meta_pkg .textarea .flex .name .price p{ font-size: 14px; }
	.modals .modal .meta_pkg .textarea .flex .name .price p small{ font-size: 11px; margin-bottom: 4px; }
	.modals .modal .meta_pkg .textarea .flex .name .price p em{ font-size: 28px; }
	.modals .modal .meta_pkg .textarea .flex .name .price p.mini{ font-size: 13px; margin-top: 11px; }
	.modals .modal .meta_pkg .textarea .flex .name .price p.mini em{ font-size: 20px; padding-left: 3px; }
	.modals .modal .meta_pkg .textarea .flex .name .price p span{ font-size: 11px; }
	.modals .modal .meta_pkg .textarea .flex .detail{ width: 100%; }
	.modals .modal .meta_pkg .textarea .flex .detail h4{ font-size: 16px; margin-bottom: 20px; text-align: center; }
	.modals .modal .meta_pkg .textarea .flex .detail p{ font-size: 13px; }
	.modals .modal .textarea .btns{ padding: 18px 0; }
	
	.modals .modal .meta_case .textarea{ padding: 30px 5% 40px; }
	.modals .modal .meta_case .textarea h3{ font-size: 18px; margin-bottom: 20px; }
	.modals .modal .meta_case .textarea h3 span{ font-size: 12px; line-height: 150%; margin-top: 15px; }
	.modals .modal .meta_case .textarea p{ font-size: 13px;  margin-bottom: 40px; }


}