@charset "UTF-8";

.intro img{width: 100%;margin-bottom: 7vw;}
.intro .en{font-family: balboa;font-weight: 300;color: var(--green01);font-size: 4vw;margin-bottom: 0;letter-spacing: 0.08em;}
.intro .ttl{font-size: 5.6vw;font-family: var(--mincho);margin-bottom: 6vw;font-weight: 600;border-bottom: 1px solid #888;padding-bottom: 5vw;line-height: 1.5;}
.intro .read{font-weight: bold;font-size: 4.4vw;line-height: 1.6;margin-bottom: 2vw;}

.entry a{padding: 8% 4% 8%;background:#222;color: #fff;text-align: center;position: relative;outline: 1px solid #8d8d8d;outline-offset: -6px;}
.entry p{text-align: center;margin-bottom: 10px;font-weight: bold;}
.entry a .en{opacity: 0.2;font-size: 4vw;text-align: center;margin: 0 auto;line-height: 1;font-family: balboa;font-weight: 300;letter-spacing: 0.09em;}
.entry a .jp{font-size: 5vw;text-align: center;display: block;letter-spacing: 0.09em;line-height: 1.4;}
.entry a:after {content: '\f105';font-size: 5vw;font-family: 'icon';position: absolute;top: 50%;right: 6vw;-moz-transform: translateY(-42%);-ms-transform: translateY(-42%);-webkit-transform: translateY(-42%);transform: translateY(-42%);}

.top-company {padding: 12vw 0 14vw;background: var(--gray);margin-bottom: 12vw;}
.top-company-title{text-align-last: left;}
.top-company-content { width: 90vw; margin: 0 auto; }
.top-company-items { width: 100%; border-top: 1px solid #9a9b9a; }
.top-company-items li { width: 100%; border-bottom: 1px solid #9a9b9a; }
.top-company-items a { padding: 5vw 0; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: center; align-items: center; }

.top-company-item-image { width: 25vw; margin-right: 5vw; }
.top-company-item-title { flex: 1; }
.top-company-item-title .en { margin-bottom: 2.5vw; font-size: 7.8vw; font-family: balboa; font-weight: 300; letter-spacing: 0.04em; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: center; align-items: center; }
.top-company-item-title .en .plus { width: 2.5vw; height: 2.5vw; margin-left: 2vw; position: relative; }
.top-company-item-title .en .plus:before { content: ''; width: 100%; height: 2px; background: #000; position: absolute; top: 50%; left: 50%; -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
.top-company-item-title .en .plus:after { content: ''; width: 2px; height: 100%; background: #000; position: absolute; top: 50%; left: 50%; -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
.top-company-item-title .jp { font-size: 3.42vw; opacity: 0.6; display: block; }

.numbers{padding: 0;margin-bottom: 8vw;}
.numbers ul{display: -webkit-flex;display: flex;-webkit-flex-wrap: wrap;flex-wrap: wrap;-webkit-justify-content: space-between;justify-content: space-between;}
.numbers li{padding: 8% 4% 3%;width: 48%;margin-bottom: 3vw;background: var(--gray);border-radius: 10px;}
.numbers li img{width: 50%;margin: 0 auto 7vw;}
.numbers li .read{display: table;background: #222;color: #fff;font-weight: bold;margin: 0 auto 2vw;padding: 1% 4%;font-size: 3.5vw;}
.numbers li p{text-align: center;font-size: 3.8vw;line-height: 1.5;font-weight: bold;}
.numbers li span{font-size: 150%;font-weight: bold;color: var(--green02);}
.numbers li small{color: #555;font-weight: 100;}

.gallery{margin-bottom: 10vw;}
.gallery span{font-family: balboa;font-weight: 300;}
.gallery img { height: auto; width: 100%;}
.gallery .slider { margin-bottom: 2vw;}
.gallery .thumbnail img { border:1px solid #fff;}

.info li{margin-bottom: 8vw;}
.info li .ttl{font-weight: bold;border-bottom: 1px solid #aaaaaa;margin-bottom: 2vw;border-left: 4px solid var(--green01);padding: 1vw 0 2vw 2vw;}
.info li a{background: var(--gray);margin-bottom: 1vw;padding: 2vw 3vw;position: relative;}
.info li a:after {content: '\f105';font-size: 3vw;font-family: 'icon';position: absolute;top: 50%;right: 4vw;-moz-transform: translateY(-50%);-ms-transform: translateY(-50%);-webkit-transform: translateY(-50%);transform: translateY(-50%);}

.flow{background: var(--gray);margin-bottom: 12vw;padding: 10vw 6vw 6vw;}
.flow_inner{padding: 0;}
.flow ul{padding: 0;}
.flow li{background: #fff;padding: 8vw 5vw 3vw;margin-bottom: 7vw;position: relative;border-top: 2px solid var(--green01);}
.flow li .num{padding: 2vw 2vw 1.5vw 2vw;background: #222;color: #fff;text-align: center;font-family: balboa;font-weight: 300;line-height: 1;width: 20vw;display: table;position: absolute;left: -2vw;top: -0.5vw;background: var(--green01);}
.flow li .read{font-weight: bold;font-size: 4.6vw;}
.flow li .read small{font-size: 70%;}

.value{margin-bottom: 10vw;}
.value img{width: 100%;margin-bottom: 6vw;}
.value > .read{font-size: 5vw;font-family: var(--mincho);margin-bottom: 2vw;font-weight: 600;}
.value .ttl{border-bottom: 1px solid #afafaf;padding-bottom: 1vw;margin-bottom: 5vw;}
.value .ttl .en{font-size: 11vw;font-family: balboa;font-weight: 300;}
.value .ttl .jp{padding: 0;position: relative;}
.value li{margin-bottom: 13vw;}
.value li:last-child{margin-bottom: 0;border-right: none;}
.value li .en{font-size: 5vw;font-family: balboa;font-weight: 300;letter-spacing: 0.04em;display: block;text-align: center;display: -webkit-flex;display: flex;-webkit-justify-content: center;justify-content: center;-webkit-align-items: center;align-items: center;border-radius: 100px;width: 26vw;height: 26vw;margin: 0 auto 4vw;border: 1px solid #a4a4a4;}
.value li .en span{padding: 0;}
.value li .read{text-align: center;font-weight: bold;font-size: 4.4vw;margin-bottom: 0vw;}
.value li .list{margin-bottom: 1vw;text-align: center;}
.value li .list span{padding: 0% 3%;background: var(--green01);font-weight: bold;color: #fff;margin-right: 2vw;min-width: 20vw;display: inline-table;text-align: center;}

.point{margin-bottom: 10vw;}
.point .ttl{font-size: 4.4vw;margin-bottom: 5vw;background: #222;color: #fff;font-weight: bold;padding: 1vw 0 1vw 3vw;}
.point li{border-bottom: 1px solid #ddd;padding-bottom: 2vw;margin-bottom: 4vw;}
.point li:last-child{border-bottom: none;}
.point li .read{font-size: 4vw;font-weight: bold;line-height: 1.6;margin-bottom: 2vw;}
.point li .read span{font-family: balboa;font-weight: 300;display: block;color: var(--green01);font-size: 3.5vw;}

.qa-list dl {margin: 0 auto 4%;}
.qa-list dt {position: relative;padding: 3% 13% 3% 11%;cursor: pointer;line-height: 1.5;font-size: 3.6vw;text-indent: -1.8em;font-feature-settings: "palt";letter-spacing: .02em;font-weight: bold;background: var(--gray);}
.qa-list dt:before, .qa-list dt:after {content: '';background: #999;position: absolute;top: 0;right: 0;}
.qa-list dt:before {width: 16px;height: 1px;top: calc(50% - 0px);right: 16px;}
.qa-list dt:after {width: 1px;height: 16px;top: calc(50% - 11px);right: 24px;-webkit-transition: 0.3s;transition: 0.3s;transform: translate(0, 3px);}
.qa-list dt.open:after {-moz-transform: rotate(90deg) translate(3px, 0);-ms-transform: rotate(90deg) translate(3px, 0);-webkit-transform: rotate(90deg) translate(3px, 0);transform: rotate(90deg) translate(3px, 0);}
.qa-list dt p:before{content:"Q.";font-size: 4vw;color: var(--green01);line-height: 1;margin-right: 3%;font-family: balboa;font-weight: 300;}
.qa-list dt p {margin-bottom: 0;line-height: 1.5;}
.qa-list dd {display: none;padding: 4% 1% 6%;}
.qa-list dd p {font-size: 3.4vw;}
.qa-list dd p:last-child {margin-bottom: 0;}
.qa-list dd a{color: #222;margin: 0 auto 0 0;}

.top-sns{background: var(--gray);padding: 10vw 8vw;}
.top-sns li{border: 1px solid #9d9d9d;margin-bottom: 3vw;}
.top-sns li a{display: -webkit-flex;display: flex;-webkit-align-items: center;align-items: center;background: #fff;}
.top-sns li img{width: 22vw;margin-right: 3vw;}
.top-sns li dl{text-justify: inter-ideograph;font-feature-settings: "palt";line-height: 1.8;letter-spacing: 0.04em;}
.top-sns li dt{font-size: 4vw;margin-bottom: 2vw;line-height: 1.4;}
.top-sns li dd{position: relative;color: #999;font-weight: bold;}


/* ============================================= 
pc
================================================*/
@media screen and (min-width: 736px) { 
.intro{margin-bottom: 60px;}
.intro img{margin-bottom: 40px;}
.intro .en{font-size: 18px;margin-bottom: 10px;}
.intro .ttl{font-size: 30px;margin-bottom: 40px;line-height: 1.6;padding-bottom: 36px;}
.intro .read{font-size: 20px;margin-bottom: 20px;}
.intro p{line-height: 1.9;}

.entry{width: 70%;margin: 0 auto;}
.entry a{padding: 40px 40px 40px;}
.entry a .en{font-size: 16px;}
.entry a .jp{font-size: 26px;}
.entry a:after {font-size: 30px;right: 30px;}


.top-company {padding: 100px 0 110px;margin-bottom: 100px;}
.top-company-content {width: clamp(730px, 90%, 1200px);display: -webkit-box;display: -webkit-flex;display: flex;justify-content: space-between;align-items: flex-start;}
.top-company-items {width: 100%;max-width: 810px;margin-left: 5vw;}
.top-company-items li { z-index: 1; position: relative; }
.top-company-items li:hover:before { width: 100%; }
.top-company-items li:hover a { opacity: 1; }
.top-company-items li:hover .top-company-item-title .en { letter-spacing: 4px; }
.top-company-items li:hover .top-company-item-title .jp { letter-spacing: 2px; }
.top-company-items li:hover .top-company-item-image{margin-left: 20px;transition: .6s;}
.top-company-items li:hover .top-company-item-more { right: 20px; }
.top-company-items li:before {content: '';width: 0;height: 100%;background: #74daac;z-index: -1;position: absolute;top: 0;left: 0;-moz-transition: all 0.3s cubic-bezier(0.05, 0.05, 0.31, 0.97);-o-transition: all 0.3s cubic-bezier(0.05, 0.05, 0.31, 0.97);-webkit-transition: all 0.3s cubic-bezier(0.05, 0.05, 0.31, 0.97);transition: all 0.3s cubic-bezier(0.05, 0.05, 0.31, 0.97);}
.top-company-items a { padding: 30px 0; }
.top-company-item-image { width: 110px; margin-right: 20px; transition: .6s;}
.top-company-item-title { padding-right: 130px; }

.top-company-item-title .en { margin-bottom: 8px; font-size: 36px; letter-spacing: 2px; -moz-transition: all 0.3s cubic-bezier(0.05, 0.05, 0.31, 0.97); -o-transition: all 0.3s cubic-bezier(0.05, 0.05, 0.31, 0.97); -webkit-transition: all 0.3s cubic-bezier(0.05, 0.05, 0.31, 0.97); transition: all 0.3s cubic-bezier(0.05, 0.05, 0.31, 0.97); }
.top-company-item-title .jp { font-size: 15px; -moz-transition: all 0.3s cubic-bezier(0.05, 0.05, 0.31, 0.97); -o-transition: all 0.3s cubic-bezier(0.05, 0.05, 0.31, 0.97); -webkit-transition: all 0.3s cubic-bezier(0.05, 0.05, 0.31, 0.97); transition: all 0.3s cubic-bezier(0.05, 0.05, 0.31, 0.97); }
.top-company-item-more { font-size: 20px; font-family: balboa; font-weight: 300; letter-spacing: 1px; position: absolute; top: 50%; right: 10px; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: center; align-items: center; -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%); -moz-transition: all 0.3s cubic-bezier(0.05, 0.05, 0.31, 0.97); -o-transition: all 0.3s cubic-bezier(0.05, 0.05, 0.31, 0.97); -webkit-transition: all 0.3s cubic-bezier(0.05, 0.05, 0.31, 0.97); transition: all 0.3s cubic-bezier(0.05, 0.05, 0.31, 0.97); }
.top-company-item-more .plus { width: 10px; height: 10px; margin-left: 15px; position: relative; }
.top-company-item-more .plus:before { content: ''; width: 100%; height: 1px; background: #000; position: absolute; top: 50%; left: 50%; -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
.top-company-item-more .plus:after { content: ''; width: 1px; height: 100%; background: #000; position: absolute; top: 50%; left: 50%; -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }

.top-company-item-more .plus:hover{background: #fff;}
.top-company-item-more .plus:before:hover{background: #fff;}
.top-company-item-more .plus:after:hover{background: #fff;}

.numbers{margin-bottom: 100px;}
.numbers li{padding: 40px 30px 10px;width: 32.5%;margin-bottom: 15px;}
.numbers li img{width: 100%;margin: 0 auto 20px;max-width: 100px;}
.numbers li .read{margin: 0 auto 14px;padding: 6px 10px;font-size: 15px;}
.numbers li p{font-size: 18px;}
.numbers li span{font-size: 190%;}
.numbers li small{color: #555;}

.gallery{width: 90%;margin: 0 auto 100px;}
.gallery span{font-family: balboa;font-weight: 300;font-size: 20px;}
.gallery img { height: auto; width: 100%;}
.gallery .slider { margin-bottom: 2vw;}
.gallery .thumbnail img { border:1px solid #fff;}

.info ul{display: -webkit-flex;display: flex;-webkit-flex-wrap: wrap;flex-wrap: wrap;-webkit-justify-content: flex-start;justify-content: flex-start;gap: 0 20px;}
.info li{margin-bottom: 30px;width: calc((100% - 40px) / 3);}
.info li .ttl{margin-bottom: 20px;padding: 10px 0 10px 14px;}
.info li p{margin-bottom: 20px;padding: 8px 0 10px 14px;}
.info li a{margin-bottom: 10px;padding: 14px 20px;}
.info li a:after {font-size: 20px;right: 20px;}

.flow{margin-bottom: 100px;padding: 80px 0 10px;}
.flow_inner{width: clamp(730px, 90%, 1200px);margin: 0 auto;}
.flow ul{gap: 0 10px;display: -webkit-flex;display: flex;-webkit-flex-wrap: wrap;flex-wrap: wrap;-webkit-justify-content: flex-start;justify-content: flex-start;}
.flow li{padding: 40px 30px 30px;margin-bottom: 40px;width: calc((100% - 40px) / 3);}
.flow li .num{padding: 10px 10px 10px 10px;top: -17px;width: 60%;left: 0;left: 50%;-moz-transform: translateX(-50%);-ms-transform: translateX(-50%);-webkit-transform: translateX(-50%);transform: translateX(-50%);}
.flow li .read{font-size: 18px;line-height: 1.4;margin-bottom: 20px;}
.flow li .read small{font-size: 70%;}

.value{margin-bottom: 80px;}
.value .ttl{padding-bottom: 10px;margin-bottom: 40px;}
.value .ttl .en{font-size: 60px;}
.value img{margin-bottom: 40px;}
.value img{margin-bottom: 40px;}
.value > .read{font-size: 26px;margin-bottom: 20px;line-height: 1.6;}
.value ul{display: -webkit-flex;display: flex;-webkit-justify-content: space-between;justify-content: space-between;-webkit-align-items: flex-start;align-items: flex-start;}
.value li{border-right: 1px solid #ddd;margin: 0 auto;width: calc(100% / 4);padding: 0 30px;}
.value li:last-child{margin-bottom: 0;}
.value li .en{font-size: 18px;width: 130px;height: 130px;margin: 0 auto 15px;}
.value li .read{font-size: 22px;}
.value li .list span{padding: 0% 10px;margin-right: 10px;min-width: 79px;display: -webkit-flex;display: flex;-webkit-justify-content: center;justify-content: center;-webkit-align-items: center;align-items: center;}

.point{margin-bottom: 100px;}
.point .ttl{font-size: 20px;margin-bottom: 30px;padding: 10px 0 10px 20px;}
.point ul{padding: 0;}
.point li{padding-bottom: 0px;margin-bottom: 30px;}
.point li .read{font-size: 20px;margin-bottom: 10px;}
.point li .read span{font-size: 15px;}

.qa-list dl {margin: 0 auto 20px;}
.qa-list dt {padding: 14px 50px 14px 50px;font-size: 16px;text-indent: -2em;line-height: 1.6;}
.second-text .qa-list dt p {font-size: 16px;}
.qa-list dt p:before{font-size: 20px;margin-right: 10px;}
.qa-list dt:before {right: 20px;}
.qa-list dt:after {right: 28px;}
.qa-list dd {padding: 10px 10px 30px 40px;}
.qa-list dd p {font-size: 15px;margin-bottom: 24px;}
.qa-list dd img { margin: 0 auto 30px; width: auto;}

.top-sns{padding: 100px 0 80px;}
.top-sns ul{display: -webkit-flex;display: flex;-webkit-flex-wrap: wrap;flex-wrap: wrap;-webkit-justify-content: flex-start;justify-content: flex-start;-webkit-align-items: center;align-items: center;gap: 0 20px;width: 90%;margin: 0 auto;}
.top-sns li{margin-bottom: 20px;width: calc((100% - 40px) / 3);}
.top-sns li a{display: -webkit-flex;display: flex;-webkit-align-items: center;align-items: center;}
.top-sns li img{width: 100px;margin-right: 20px;}
.top-sns li dl{position: relative;padding: 10px 10px 10px 0;}
.top-sns li dt{margin-bottom: 6px;font-size: clamp(0.938rem, 0.640rem + 0.647vw, 1.125rem);}
.top-sns li dd{position: relative;color: #999;font-weight: bold;}

}


@media screen and (min-width: 736px)and (max-width: 960px) { 
.top-sns ul{gap: 0 15px;}
.top-sns li{ width: calc((100% - 30px) / 2);}
}


/* ============================================= 
pc
================================================*/
@media screen and (min-width: 1150px) { 
.flow ul{gap: 0 10px;}
.flow li{width: calc((100% - 40px) / 5);}
}