@charset "utf-8";

.doc-tit {margin-bottom: 50px;}
.doc-tit h3 {font-size: 32px; font-weight: 600; line-height: 1.4; letter-spacing: -.04em;}
.doc-tit h3 small {color: #878787; font-size: 0.571em; font-weight: 400;}
.doc-tit .txt {color: #505050; letter-spacing: -.04em; margin-top: 12px;}
.doc-cnt {position: relative; margin-bottom: 90px;}
.doc-cnt:last-child {margin-bottom: 0;}
.doc-cnt.bg {padding: 90px 0; background-color: #fff9f3;}

.vision {}
.vision-list {display: flex;flex-wrap:wrap; margin: -20px; text-align: center;}
.vision-list li {width: 25%; padding: 20px;}
.vision-list li:nth-child(even) {margin-top: 60px;}
.vision-list li span {display: block; font-size: 1.25em; font-weight: 600; line-height: 1.5; letter-spacing: -.04em; margin-top: 22px;}
.deco-fade-txt {position: absolute; right: 0; top: 0; color: #fcf1e5; font-family: 'Lora', serif; font-size: 150px; line-height: 1em; letter-spacing: -.03em; font-weight: 600; z-index: -1;}

.symbol-list {display: flex;flex-wrap:wrap; margin: -20px;}
.symbol-list li {width: 50%; padding: 20px;}

.color-palette {}
.color-palette ul {display: flex;flex-wrap:wrap; margin: -20px;}
.color-palette ul li {width: 50%; padding: 20px;}
.color-palette ul li .pan {display: flex;align-items:center;justify-content: space-between; height: 100px; padding: 20px; border-radius:16px; color: #fff; letter-spacing: -.04em; margin-bottom: .875em;}
.color-palette ul li .pan.c1 {background-color: #c2b59b;}
.color-palette ul li .pan.c2 {background-color: #d6c19e;}
.color-palette ul li .pan span {display: inline-block;}
.color-palette ul li p {padding-left: 20px;}
.color-palette ul li p span {display: inline-block; color: #505050; font-weight: 500; line-height: 1.5; letter-spacing: -.04em; margin: 0 -7px;}
.color-palette ul li p span.slash {margin: 0;}
.color-palette ul li p em {display: inline-block; font-style: normal; margin: 0 7px;}

.intro .bnr {height: 460px; background: no-repeat url("../images/sub/intro.jpg") center center / cover; border-radius:50vh 0 0 50vh;}
.intro .bnr:before {content:''; position: absolute; top: 0; right: 0; width: 100%; height: 100%; background-color: #fff; transition:1.5s;}
.intro .bnr.aos-animate:before {width: 0; left: 0; right: auto;}

.system-list {display: flex;flex-wrap:wrap; margin: -20px; text-align: center;}
.system-list li {position: relative; width: 25%; padding: 20px; z-index: 1; transition:.2s;}
.system-list li .img {padding: 0 10px; transform:translateY(26px); transition:.2s;}
.system-list li .img img {transition:.2s;}
.system-list li .box {position: relative; width: 100%; height: 383px; padding-top: 208px; margin-top: -182px; transform:translateY(26px); transition:.2s; z-index: -1;}
.system-list li .box:before {content:''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: no-repeat url("../images/sub/hex.png") center center / cover; z-index: -1; opacity: 0; transition:.2s;}
.system-list li .box .txt {padding: 0 20px;}
.system-list li .box strong {display: block; font-size: 1.25em; font-weight: 600; line-height: 1.4; letter-spacing: -.04em; margin-bottom: 6px;}
.system-list li .box p {color: #505050; letter-spacing: -.04em; opacity: 0; transition:.2s;}

.system-list li:hover .img {transform:translateY(0);}
.system-list li:hover .img img {filter: drop-shadow(0 14px 34px rgba(0,0,0,.1));}
.system-list li:hover .box {transform:translateY(0);}
.system-list li:hover .box:before {opacity: 1;}
.system-list li:hover .box p {opacity: 1;}

.franchise-step {display: flex;flex-wrap:wrap;justify-content: center; margin: 0 0 -60px -75px;}
.franchise-step li {position: relative; margin: 0 0 60px 75px;}
.franchise-step li:before {content:''; position: absolute; top: 0; left: -44.5px; bottom: 0; margin: auto; width: 19px; height: 19px; background: no-repeat url("../images/sub/arrow.png") center center / contain;}
.franchise-step li:first-child:before {display: none;}
.franchise-step li .one {display: flex;flex-direction: column;justify-content: center;align-items: center; width: 220px; height: 220px; border-radius:100%; background-color: #fff9f3;}
.franchise-step li .one span {display: block; color: #505050; font-weight: 500; line-height: 1.5; letter-spacing: -.04em; margin-top: 10px;}
.franchise-step li:last-child .one {background-color: #c9bc9c;}
.franchise-step li:last-child .one span {color: #fff;}

.program {display: flex;align-items:center; overflow:hidden;}
.program .img {width: 54%; padding-right: 30px;}
.program .cnt {flex: 1 1 auto; min-width: 0; width: 1%;}
.program .cnt .doc-tit {margin-bottom: 15px;}
.program .cnt .desc {color: #505050; font-size: 1.125em; line-height: 1.778em; letter-spacing: -.04em;}
.program .cnt .process {color: #505050; letter-spacing: -.04em; margin-top: 35px;}
.program .cnt .process .tt {margin-bottom: 20px;}
.program .cnt .process .tt span {display: inline-block; color: #fff; font-size: 1.125em; font-weight: 500; line-height: 1.5; letter-spacing: -.04em; background-color: #c9bc9c; border-radius:50vh; padding: 7px 28px;}
.program .swiper {max-width:640px;}
.program .swiper-button {width:26px; height:26px; margin-top:-13px; border:0; background-color:transparent; background-repeat:no-repeat; background-position:50% 50%; background-size:contain; opacity:.6;}
.program .swiper-button:after {display:none;}
.program .swiper-button:hover {opacity:1;}
.program .swiper-button-prev {left:20px; background-image:url('../images/sub/slide_prev.svg');}
.program .swiper-button-next {right:20px; background-image:url('../images/sub/slide_next.svg');}
.program .swiper-pagination {bottom:35px; line-height:0;}
.program .swiper-pagination-bullet {background:#fff;}

.inquiry-wrap {display:flex; justify-content:space-between;}
.inquiry-head {flex:1 1 auto; min-width:0; width:1%; margin-right:30px;}
.inquiry-head h3 {margin-bottom:20px;}
.inquiry-head p {color:#505050; font-size:22px; font-weight:600; line-height:1.5em;}
.inquiry-head .text {font-size:16px; font-weight:400; line-height:1.6em;}

.inquiry-form {width:60%; max-width:760px; background:#fff9f3; padding:40px; border-radius:16px;}
.inquiry-form .inner {background:#fff; padding:40px; border-radius:16px;}
.inquiry-form .ico-required {display:inline-block; vertical-align:middle; margin:-.3em 0 0 0; width:16px; height:14px; background:url("../images/sub/inquiry_required.svg") 0 50% no-repeat; background-size:contain;}
.inquiry-form .group {margin-bottom:55px;}
.inquiry-form .group:last-child {margin-bottom: 0;}
.inquiry-form .title {display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:25px;}
.inquiry-form .title h4 {color:#242424; font-size:1.125em; line-height:1.33em; letter-spacing:-.03em;}
.inquiry-form .form {display:grid; gap:20px; line-height:1.5em; letter-spacing:-.03em;}
.inquiry-form .form dt {margin-bottom:8px; line-height:1.3em;}
.inquiry-form .form .input {display:block; width:100%; height:40px; padding:5px 12px; font-size:14px; line-height:1.5em; border-radius:6px;}
.inquiry-form .submit-area {display:flex; justify-content:space-between; align-items:center; margin-top:40px;}
.inquiry-form .form-agree {margin:0;}
.inquiry-form .form-agree .check {text-align:left; margin-top:0;}
.inquiry-form .form-agree .check a {border-radius:6px;}
.inquiry-form .btn-pack.focus {border-radius:50px;}