@charset "UTF-8";

/* ===========================
Base
=========================== */
*, *::before, *::after {
box-sizing: border-box;
}
html, body, h1, h2, h3, h4, h5, h6, p, ul, ol, dl, li, figure, blockquote, fieldset, form, input, select {
margin: 0;
padding: 0;
}
html, body {
overflow-x: hidden;
}
html {
font-family: 'Noto Sans JP', sans-serif;
}
body {
line-height: 1.6;
color: #333;
font-size: 16px;
font-weight: 500;
-webkit-text-size-adjust: 100%;
}
li {
list-style: none;
}
img {
max-width: 100%;
height: auto;
vertical-align: bottom;
}
a {
text-decoration: none;
color: inherit;
}
@media (any-hover: hover) {
a:hover {
opacity: 0.6;
transition: 0.3s;
}
}
table {
border-collapse: collapse;
border-spacing: 0;
}
hr {
border: none;
border-top: 1px solid #ddd;
margin: 2rem 0;
}
p {
line-height: 1.5;
}
input, button, textarea, select {
font: inherit;
}

/* ===========================
Utility
=========================== */
.inner {
width: 1024px;
max-width: calc(100% - 40px);
margin: 0 auto;
}

/* PC / SP 出し分け */
@media screen and (min-width : 769px){
.sp-only { display: none; }
}
@media screen and (max-width : 768px){
.pc-only { display: none; }
}


/* ===========================
Header
=========================== */
.header {
background-color: #ffffff;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.08);
display: flex;
align-items: center;
padding: 0 30px;
height: 100px;
position: relative;
z-index: 1;
}

/* ---- ロゴエリア ---- */
.header .logo-wrap{
display: flex;
gap:24px;
align-items: center;
margin-right: auto;
}
.logo img {
width: 400px;
height: auto;
}
.header__campany {
color: #4d4d4d;
font-size: 22px;
font-weight: 400;
line-height: 1.2;
}
.header__campany .s{
font-size: 13px;
}

/* ---- 電話番号エリア ---- */
.contact {
text-align: right;
width: 346px;
}
.contact a{
display: block;
}
.contact img {
width: 100%;
height: auto;
}
.contact__note {
color: #0a2342;
font-size: 12px;
line-height: 1.4;
display: block;
margin-top: 3px;
transform: translateX(8px);
}

/* ===========================
Header　レスポンシブ
=========================== */
@media screen and (max-width : 1300px){
.header{
padding: 0 20px;
}
.header .logo-wrap{
gap:calc(2vw - 2px) ;
}
.header .logo img {
width:calc(20vw + 110px);
}
.header__campany .s {
font-size: calc(0.5vw + 5px);
}
.header__campany{
font-size: calc(1vw + 6px);
}
.contact {
width: calc(12.5vw + 160px);
}
.contact__note{
font-size: calc(0.5vw + 6px);
}
}

@media screen and (max-width : 768px){
.header{
height:calc(8.47vw + 34.98px);
padding: 0 calc(2.646vw - 0.317px);
box-shadow: 0 0 4px rgba(0, 0, 0, 0.08);
}
.header .logo-wrap {
flex-direction: column;
gap: calc(0.6614vw - 0.0794px);
}
.header .logo img {
width: calc(32.804vw + 48.063px);
}
.header__campany br{
display: none;
}
.header__campany,.header__campany .s {
font-size: calc(0.794vw + 3.905px);
}
.contact {
width: fit-content;
}
.contact a{
background: #ffe603;
box-shadow: 0 calc(0.3968vw + 1.9524px) 0 #ffbe06;
padding: calc(1.852vw + 0.778px) ;
border-radius: calc(1.323vw - 0.16px);
text-align: center;
line-height: 1;
}
.contact img {
width: 96%;    
}
.contact a::after {
content: '営業時間：11時～21時まで（年末年始を除く）';
color: #0a2342;
font-size: calc(1.058vw + 2.873px);
line-height: 1;
display: block;
margin-top: 6px;
transform: translateX(calc(0.661vw + 0.921px));
}
.contact__note{
display: none;
}
}

@media screen and (max-width : 480px){
.header .logo img {
width: calc(60vw - 58px);
}
}


/* ===========================
FV（ファーストビュー）
=========================== */
.fv{
text-align: center;
}
.fv__inner {
background-color: #fbeed8; /* フォールバックカラー（暖色クリーム） */
position: relative;
display: flex;
flex-direction: column;
align-items: center;
padding: 56px 0 12px;
z-index: 0;
margin-bottom: 66px;
}
.fv__bg{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: hidden;
z-index: -2;
}
.fv__bg img {
width: 1920px;
min-width: 100%;
max-width: none;
height: 100%;
object-fit: cover;
position: relative;
left: 50%;
transform: translateX(-50%);
}
.fv__title {
margin-bottom: 26px;
}

.fv__title img {
width: 900px;
}

.fv__subtitle img {
width: 720px;
max-width: 56vw;
}
.fv__note{
font-size: 14px;
color: #fff;
margin-top: 18px;
text-shadow: 0px 1px rgba(0,0,0,0.7);
}
.fv__note br{
display: none;
}
@keyframes float-updown {
0%   { transform: translateY(0); }
50%  { transform: translateY(-16px); }
100% { transform: translateY(0); }
}
@keyframes sway-leftright {
0%   { transform: rotate(0deg); }
25%  { transform: rotate(2deg); }
75%  { transform: rotate(-2deg); }
100% { transform: rotate(0deg); }
}
.fv-human01{
width: 360px;
position: absolute;
left: calc(50% - 770px);
bottom: 48px;
animation: float-updown 3.5s ease-in-out infinite;
transform-origin: center bottom;
}
.fv-human02{
width: 330px;
position: absolute;
right: calc(50% - 810px);
bottom: 14px;
z-index: -1;
animation: sway-leftright 3s linear infinite;
transform-origin: center bottom;
}
.fv__lead{
background: linear-gradient(transparent 74%, #ffdad9 74% , #ffdad9 97% , transparent 97%);
display: inline;
font-size: 48px;
font-weight: 700;
}

/* ===========================
FV（ファーストビュー）　レスポンシブ
=========================== */
@media screen and (min-width : 769px){
.fv__subtitle{
pointer-events: none;
}
}

@media screen and (max-width : 1400px){
.fv-human01{
width: 23%;
left: -3%;
}
.fv-human02{
width: 22%;
right: -8%;
}
.fv__bg img{
width: 130%;
}
}

@media screen and (max-width : 1300px){
.fv__inner{
padding-top: calc(13.333px + 2.667vw);
}
.fv__title{
width: 66%;
}
.fv__title img{
width: 100%;
}
}

@media screen and (max-width : 1250px){
.fv__note br {
display: block;
}
}

@media screen and (max-width : 900px){
.fv-human01,.fv-human02{
display: none;
}
.fv__title {
width: 80%;
}
.fv__subtitle img {
max-width: 60vw;
}
}

@media screen and (max-width : 768px){
.fv__inner{
padding-top: calc(5.29vw + 19.37px);
padding-bottom: calc(2.65vw + 19.68px);
}
.fv__title {
width: 84%;
width: calc(74.07vw + 75.11px);
max-width: calc(100vw - 20px);
margin-bottom: calc(1.587vw + 17.809px);
}
.fv__subtitle img {
max-width: calc(100vw - 40px);
width: calc(28.95vw + 237.11px);
}
.fv__note{
background: rgba(255, 255, 255, 0.8);
color: #333;
text-shadow:none;
padding: 12px 24px;
border-radius: 12px;
font-size: calc(0.53vw + 9.95px);
margin-top: calc(1.058vw + 15.873px);
}
}

@media screen and (max-width : 650px){
.fv__inner{
margin-bottom: calc(6.15vw + 26px);
}
}

@media screen and (max-width : 500px){
.fv__inner{
background: url(img/sp_fv-bg.png) no-repeat center bottom / cover;
}
.fv__bg{
display: none;
}
}

@media screen and (max-width : 391px){
.fv__note{
padding: 10px 14px;
border-radius: 10px;
}
}


/* ===========================
共通 section-title
=========================== */
.section-title {
text-align: center;
margin-bottom: 14px;
font-size: 32px;
color: #d22615;
}
.section-title__en {
display: block;
font-family: "Lexend Exa", sans-serif;
font-weight: 300;
margin-bottom: 8px;
}
.section-title__ja {
display: block;
font-weight: 500;
line-height: 1.4;
}

@media screen and (max-width : 550px){
.section-title{
font-size: calc(5vw + 4.5px);
}
}


/* ===========================
About
=========================== */
.about {
padding: 70px 0 160px;
}

/* ---- 上部カード（人物イラスト＋タイトル＋説明文） ---- */
.about__intro {
position: relative;
background: #fff6e3;
border-radius: 36px;
padding: 54px 30px 60px;
text-align: center;
margin-bottom: 66px;
}

/* 左：女性イラスト (human-img-03.svg) */
.about__intro::before {
content: '';
display: block;
width: 96px;
height: 356px;
background: url(img/human-img-03.svg) no-repeat bottom center / contain;
position: absolute;
left: 118px;
top: -206px;
}

/* 右：スーツ男性イラスト (human-img-04.svg) */
.about__intro::after {
content: '';
display: block;
width: 156px;
height: 356px;
background: url(img/human-img-04.svg) no-repeat bottom center / contain;
position: absolute;
right: 70px;
top: -206px;
}

.about__desc {
font-size: 18px;
text-align: left;
width: fit-content;
margin: 0 auto;
font-weight: 400;
}
.about__desc .b {
font-weight: 600;
font-size: 24px;
}

/* ---- キャッチコピー ---- */
.about__catch {
text-align: center;
font-size: 32px;
font-weight: 700;
margin-bottom: 30px;
}
.about__catch span {
display: inline-block;
position: relative;
}
/* 「\ テキスト /」の装飾 */
.about__catch span::before, .about__catch span::after {
content: '';
display: block;
width: 3px;
height: 34px;
background: #333;
position: absolute;
bottom: 3px;
}
.about__catch span::before {
left: -20px;
transform: rotate(-32deg);
}
.about__catch span::after {
right: -20px;
transform: rotate(32deg);
}

/* ---- アイコングリッド ---- */
.about__iconsWrap{
position: relative;
margin-bottom: 30px;
}
.about__iconsWrap::before{
content: '';
display: block;
width: calc(100% - 300px);
height: calc(100% - 300px);
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
box-shadow: inset 0 0 0 8px #ffdad9,0 0 0 8px #ffdad9;
}
.about__icons {
display: grid;
grid-template-columns: repeat(3, 300px);
grid-auto-rows: 300px;
gap: 64px;
}

.icon-item {
background: url(img/icon-bg.png) no-repeat center bottom / 100% #fff6e3;
border-radius: 36px;
padding-bottom: 30px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
text-align: center;
position: relative;
z-index: 0;
}

.icon-item img {
width: 100%;
position: absolute;
left: 0;
top: 0;
z-index: -1;
}

.icon-item span {
font-size: 24px;
font-weight: 500;
color: #d22615;
}

/* ---- 注記テキスト ---- */
.about__note {
font-size: 14px;
text-align: right;    
color: #d22615;
}


/* ===========================
About　レスポンシブ
=========================== */
@media screen and (max-width : 1080px){
.about__icons{
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: auto;
}
.icon-item{
padding-bottom: 100%;
border-radius: calc(2.92vw + 4.5px);
}
.icon-item span{
position: absolute;
bottom: calc(4vw - 12px);
left: 0;
right: 0;
font-size: calc(2vw + 2px);
}
.about__iconsWrap::before{
width: calc(100% - ((100% - 128px) / 3));
height:calc(100% - ((100% - 64px) / 2)) ;
}
}

@media screen and (max-width : 1050px){
.fv__lead{
font-size: calc(1.6vw + 31.2px);
}
.about__intro::before{
left:calc(-96.4px + 16.8vw);
width: calc(5.6vw + 37.2px);
}
.about__intro::after{
right:calc(12vw - 86px);
width: calc(10.4vw + 46.8px);
}
}

@media screen and (max-width : 800px){
.about__icons {
gap: 50px;
}
.about__iconsWrap::before{
width: calc(100% - ((100% - 100px) / 3));
height:calc(100% - ((100% - 50px) / 2)) ;
box-shadow: inset 0 0 0 7px #ffdad9,0 0 0 7px #ffdad9;
}
}

@media screen and (max-width : 768px){
.about__catch span::before, .about__catch span::after{
height: 120px;
bottom: -3px;
}
.about__catch span::before {
left: -56px;
}
.about__catch span::after {
right: -56px;
}
}

@media screen and (max-width : 710px){
.about__note{
text-align: left;
}
}

@media screen and (max-width : 700px){
.about__intro{
padding-top: calc(7.1vw + 4.32px);
padding-bottom: calc(6.45vw + 14.84px);
}
.about__intro::before{
left: calc(29.68vw - 87.74px);
width: calc(7.1vw + 4.32px);
top: -46px;
height: calc(14.19vw + 100.65px);
}
.about__intro::after {
right: calc(24.516vw - 81.613px);
width: calc(10.97vw + 9.23px);
top: -46px;
height: calc(14.19vw + 100.65px);
}
.about__icons {
gap: 40px;
}
.about__iconsWrap::before{
width: calc(100% - ((100% - 80px) / 3));
height:calc(100% - ((100% - 40px) / 2)) ;
}
}

@media screen and (max-width : 600px){
.about__catch{
font-size: calc(5.71vw - 2.29px);
}
.about__catch span::before, .about__catch span::after{
height: calc(20.95vw - 5.71px);
}
.about__catch span::before {
left: calc(-9.52vw + 1.14px);
}
.about__catch span::after {
right: calc(-9.52vw + 1.14px);
}
.about__icons {
gap: 30px;
}
.about__iconsWrap::before{
width: calc(100% - ((100% - 60px) / 3));
height:calc(100% - ((100% - 30px) / 2)) ;
box-shadow: inset 0 0 0 6px #ffdad9,0 0 0 6px #ffdad9;
}
.about__note {
font-size: 12px;
}
}

@media screen and (max-width : 550px){
.about__icons {
grid-template-columns: repeat(2, 1fr);
}
.icon-item span{
font-size: calc(3.125vw + 2.81px);
bottom: calc(6.25vw - 6.38px);
font-weight: 600;
}
.about__iconsWrap::before {
width: calc(100% - ((100% - 30px) / 2));
height: calc(100% - ((100% - 60px) / 3));
}
.about__iconsWrap::after{
content: '';
display: block;
width: 50%;
height: 12px;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
background: #ffdad9;
z-index: -1;
}
}

@media screen and (max-width : 460px){
.about {
padding: calc(12.86vw + 4.86px) 0 calc(20vw + 48px);
}
.fv__lead {
font-size: calc(8.57vw - 1.43px);
}
.about__desc{
font-size: 16px;
}
.about__desc .b {
font-size: 20px;
}
}

@media screen and (max-width : 431px){
.about__intro{
padding-left: 20px;
padding-right: 20px;
border-radius: 24px;
}
}

@media screen and (max-width : 415px){
.about__catch span::before, .about__catch span::after{
width: 2px;
}
.about__icons {
gap: 20px;
}
.about__iconsWrap::before {
width: calc(100% - ((100% - 20px) / 2));
height: calc(100% - ((100% - 40px) / 3));
}
}


/* ===========================
Flow
=========================== */
.flow-advantage{
position: relative;
padding: 150px 0 260px;
margin-bottom: 154px;
}
.flow-advantage::before{
content: '';
display: block;
width: 100%;
min-width: 1920px;
height: 100%;
position: absolute;
left: 50%;
top: 0;
transform: translateX(-50%);
background-image: url(img/flow-bg-top.png), url(img/flow-bg-bottom.png);
background-repeat: no-repeat, no-repeat;
background-position: center top, center bottom;
background-size: 100% auto, 100% auto;
background-color: #fff6e3;
-webkit-clip-path: ellipse(120% 50% at 50% 50%);
clip-path: ellipse(120% 50% at 50% 50%);
}
.flow {
margin-bottom: 160px;
}
.flow .inner{
position: relative;
}

.flow .section-title {
margin-bottom: 16px;
}

/* サブリード */
.flow__lead {
text-align: center;
font-size: 24px;
font-weight: 600;
position: relative;
width: fit-content;
margin: 0 auto 76px;;
}
.flow__lead::before,.flow__lead::after{
content: '';
display: block;
width: 3px;
height: 24px;
background: #333;
position: absolute;
bottom: 4px;
}
.flow__lead::before{
left: -16px;
transform: rotate(-32deg);
}
.flow__lead::after{
right: -16px;
transform: rotate(32deg);
}
.flow__lead br{
display: none;
}

/* ---- STEP リスト ---- */
.flow__steps {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 64px;
margin-bottom: 0;
}

/* ステップ番号バッジ（SVG） */
.step__num{
position: relative;
z-index: 0;
margin-bottom: 10px;
text-align: center;
}
.step__num::before{
content: '';
display: block;
width: 130%;
height: 4px;
background: #ffc5c5;
position: absolute;
left: 0;
top: 0;
bottom: 0;
margin: auto;
z-index: -1;
}
.step:nth-of-type(3) .step__num::before{
right: 0;
left: auto;
}
.step:nth-of-type(5) .step__num::before{
width: 50%;
}
.step__num img{
width: 48px;
}

/* ステップ写真 */
.step__img {
width: 100%;
border-radius: 18px;
display: block;
margin-bottom: 16px;
}

/* ステップテキスト */
.step__text {
font-size: 18px;
font-weight: 600;
text-align: center;
background: #fff;
height: 140px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 18px;
}

/* ---- 右下の人物イラスト ---- */
.human-img05 {
position: absolute;
bottom: 5px;
right: -120px;
width: 430px;
height: auto;
animation: float-updown 3.5s ease-in-out infinite;
}
.human-img12,.human-img13{
display: none;
}


/* ===========================
Flow　レスポンシブ
=========================== */
@media screen and (max-width: 1050px) {
.human-img05{
right: -10px;
bottom: calc(4.08vw - 2.86px);
width: calc(33.33vw - 6.67px);
}
}

@media screen and (max-width: 900px) {
.step__img{
border-radius: 2vw;
}
.step__num img {
width: calc(6vw - 6px);
}
.step__text{
font-size: calc(1.83vw + 1px);
height: calc(20vw - 40px);
border-radius: 2vw;
}
}

@media screen and (max-width: 850px) {
.step__num::before{
width: 150%;
}
}

@media screen and (max-width: 800px) {
.flow-advantage{
padding-top: calc(18.05vw + 5.61px);
padding-bottom: calc(21.95vw + 4.39px);
margin-bottom: calc(12.2vw + 52.44px);
}
.flow__steps{
gap: 50px;
}
}

@media screen and (max-width: 700px) {
.flow__steps{
gap: 40px;
}
}

@media screen and (max-width: 600px) {
.flow__steps{
gap: 30px;
}
}

@media screen and (max-width: 550px) {
.flow {
margin-bottom: calc(37.5vw + 53.75px);
}
.flow .section-title {
margin-bottom: calc(6.25vw - 0.38px);
}
.flow__lead{
font-size: calc(3.75vw + 3.38px);
margin-bottom: calc(12.5vw + 7.25px);
}    
.flow__lead br{
display: block;
}
.flow__lead::before, .flow__lead::after{
height: calc(1.88vw + 13.69px);
width: 2px;
}
.flow__steps{
display: block;
}
.step{
position:relative;
padding-left: 22%;
padding-bottom: calc(16.25vw - 29.38px);
}
.step__img {
border-radius: calc(10vw - 19px);
margin-bottom: calc(2.5vw + 6.25px);
}
.step__num{
position: absolute;
left: 0;
top: 0;
width: 16%;
height: 100%;
text-align: center;
}
.step__num img{
display: none;
}
.step__num::before {
width: calc(2.5vw - 5.75px);
height: 110%;
bottom: auto;
right: 0;
transform: translateX(-50%);
}
.step:nth-of-type(3) .step__num::before {
left: 0;
}
.step:nth-of-type(5) .step__num::before{
display: none;
}
.step__num::after{
content: '';
display: inline-block;
width: 100%;
height: 100%;
background-size: contain;
background-repeat: no-repeat;
background-position: center top;
}
.step:nth-of-type(1) .step__num::after{
background-image: url(img/sp_flow-num-01.svg);
}
.step:nth-of-type(2) .step__num::after{
background-image: url(img/sp_flow-num-02.svg);
}
.step:nth-of-type(3) .step__num::after{
background-image: url(img/sp_flow-num-03.svg);
}
.step:nth-of-type(4) .step__num::after{
background-image: url(img/sp_flow-num-04.svg);
}
.step:nth-of-type(5) .step__num::after{
background-image: url(img/sp_flow-num-05.svg);
}
.step__text{
font-size: calc(1.25vw + 11.13px);
height: auto;
padding: calc(4.38vw - 0.06px) 0;
border-radius: 20px;
}
.human-img05{
display: none;
}
.human-img12,.human-img13{
display: block;
}
.human-img12 {
position: absolute;
width: calc(38.125vw + 30.3125px);
bottom: calc(-12.86vw - 94.71px);
left: 0;
animation: float-updown 4s ease-in-out infinite;
}
.human-img13 {
position: absolute;
width: calc(43.75vw + 19.38px);
right: -32px;
bottom: calc(-7.14vw - 57.29px);
animation: float-updown 4s ease-in-out 0.8s infinite;
}
}

@media screen and (max-width: 391px) {
.flow__lead::before, .flow__lead::after{
bottom: 3px;
}
}


/* ===========================
Advantage
=========================== */

/* ---- カードコンテナ ---- */
.advantage__cont {
position: relative;
background: #fff;
border-radius: 30px;
padding: 70px 20px 80px; 
margin-bottom: 14px;
box-shadow: 0px 10px 40px 0px rgba(255, 124, 51, 0.4);
}

/* 左：男性イラスト (human-img-06.svg) */
.human-img06 {
position: absolute;
left: -104px;
bottom: 44px;
width: 230px;
height: auto;
}

/* 右：女性イラスト (human-img-07.svg) */
.human-img07 {
position: absolute;
right: -70px;
bottom: -94px;
width: 294px;
height: auto;
}

.advantage .section-title {
margin-bottom: 28px;
}

/* ---- メリットリスト ---- */
.advantage__list {
display: flex;
flex-direction: column;
gap: 46px;
width: fit-content;
margin: 0 auto;
}

.adv-item {
padding-left: 78px;
position: relative;
}

.adv-item::before {
content: '';
display: block;
width: 58px;
height: 58px;
background: url(img/icon-good.svg) no-repeat center / contain;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
}

.adv-item__text {
display: inline;
font-size: 28px;
font-weight: 500;
line-height: 1.5;
background: linear-gradient(transparent 70%, #fcee21 70% , #fcee21 95% , transparent 95%);
}

/* ---- 注記 ---- */
.advantage__note {
font-size: 14px;
color: #4d4d4d;
font-weight: 600;
text-align: center;
position: relative;
white-space: nowrap;
}


/* ===========================
Advantage　レスポンシブ
=========================== */
@media screen and (max-width: 1120px) {
.human-img06 {
left: -50px;
bottom: 94px;
width: 170px;
}
.human-img07{
right: -24px;
width: 200px;
}
}

@media screen and (max-width: 1000px) {
.human-img06,.human-img07 {
display: none;
}
}

@media screen and (max-width: 850px) {
.adv-item__text{
font-size: calc(3.33vw - 0.33px);
}
}

@media screen and (max-width: 768px) {
.advantage__cont{
padding-top: 60px;
}
}

@media screen and (max-width: 700px) {
.adv-item__text{
font-size: 24px;
}
}

@media screen and (max-width: 630px) {
.advantage__list{
gap: 30px;
}
}

@media screen and (max-width: 550px) {
.advantage__cont{
padding-top: calc(16.25vw + -29.38px);
padding-bottom: calc(20vw + -40px);
}
.advantage .section-title{
margin-bottom: calc(7.5vw - 13.25px);
}
.advantage__list{
gap: calc(3.75vw + 7.38px);
}
.adv-item {
padding-left: calc(7.5vw + 22.75px);
}
.adv-item::before{
width: calc(3.75vw + 25.38px);
height:calc(3.75vw + 25.38px) ;
transform: none;
top: 5px;
}
.adv-item__text{
font-size: calc(3.75vw + 3.38px);
}
.advantage__note{
font-size: 12px;
}
}

@media screen and (max-width: 440px) {
.advantage__note{
font-size: calc(3.125vw - 1.75px);
}
.advantage__cont{
border-radius: 24px;
}
}

@media screen and (max-width: 391px) {
.adv-item::before{
top: 3px;
}
}

/* ===========================
Faq
=========================== */
.faq{
margin-bottom: 160px;
}
.faq .section-title{
margin-bottom: 20px;
}
.faq__list::before{
content: '';
display: block;
width: 100%;
height: 200px;
background: url(img/human-img-08.svg) no-repeat center bottom -3px / contain;
}
.faq__list details {
background-color: #fff6e3;
border-radius: 16px;
overflow: hidden;
margin-bottom: 30px;
}
.faq__list details:last-child{
margin-bottom: 0;
}

.faq__list summary {
display: flex;
align-items: center;
gap: 30px;
height: auto;
min-height: 100px;
cursor: pointer;
list-style: none;
font-size: 24px;
font-weight: 500;
color: #d22615;
padding: 0 62px;
position: relative;
line-height: 1.3;
}
.faq__list summary::after{
content: '';
display: block;
width: calc(100% - 124px);
height: 2px;
background: #d22615;
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: auto;
opacity: 0;
transition: opacity 0.2s ease;
}

.faq__list summary::-webkit-details-marker {
display: none;
}

.faq__list summary::before,.faq__aCont::before{
font-family: "Lexend Exa", sans-serif;
color: #d22615;
font-size: 32px;
flex-shrink: 0;
line-height: 1;
}
.faq__list summary::before {
content: 'Q';
}
.faq__aCont::before {
content: 'A';
}
.faq__list summary .plus{
margin-left: auto;
flex-shrink: 0;
width: 24px;
height: 24px;
position: relative;
}
.faq__list summary .plus::before,.faq__list summary .plus::after{
content: '';
display: block;
width: 100%;
height: 5px;
position: absolute;
left: 0;
top: 0;
bottom: 0;
margin: auto;
background: #d22615;
}
.faq__list summary .plus::before{
transform: rotate(90deg);
transition: transform 0.5s ease;
}

.faq__list details[open] > summary::after {
opacity: 1;
}

.faq__list details[open]:not(.is-closing) > summary .plus::before {
transform: rotate(180deg);
}
.faq__a{
overflow: hidden;
}
.faq__aCont {
display: flex;
align-items: center;
gap: 30px;
font-size: 24px;
font-weight: 400;
padding: 25px 62px 55px;
}

details[open] .faq__a {
animation: faqOpen 0.5s linear forwards;
}

.faq__list details.is-closing .faq__a {
animation: faqClose 0.5s ease-in-out forwards;
}

@keyframes faqOpen {
  0% {
    opacity: 0;
    max-height: 0;
  }
  30% {
    opacity: 1;
  }
  100% {
    max-height: 500px;
  }
}

@keyframes faqClose {
0% {
opacity: 1;
max-height: 500px;
animation-timing-function: ease-out;
}
  80% {
    opacity: 0.3;
    animation-timing-function: linear;
  }
100% {
opacity: 0;
max-height: 0;
}
}


/* ===========================
Faq　レスポンシブ
=========================== */
@media screen and (max-width: 900px) {
.faq__list summary,.faq__aCont{
padding-left: calc(8.24vw - 12.12px);
padding-right: calc(8.24vw - 12.12px);
}
.faq__aCont{
padding-bottom: calc(5.88vw + 2.06px);
}
.faq__list summary::after{
width: calc(100% - ((8.24vw - 12.12px) * 2));
}
}

@media screen and (max-width: 800px) {
.faq{
margin-bottom: calc(18.05vw + 15.61px);
}
}

@media screen and (max-width: 550px) {
.faq__list::before{
height: calc(25vw + 22.5px);
}
.faq__list details{
margin-bottom: calc(6.25vw - 4.38px);
}
.faq__list summary,.faq__aCont{
font-size: calc(3.75vw + 3.38px);
gap: calc(5vw - 7.5px);
}
.faq__aCont{
padding-top: calc(3.13vw + 7.81px);
}
.faq__list summary::before, .faq__aCont::before{
font-size: calc(5vw + 4.5px);
}
.faq__list summary .plus{
width: calc(3.75vw + 3.38px);
height: calc(3.75vw + 3.38px);
}
.faq__list summary .plus::before, .faq__list summary .plus::after{
height: calc(1.25vw - 1.88px);
}
}


/* ===========================
Voice
=========================== */
.voice{
background: #e6f5ff;
padding: 154px 0 ;
}
.voice .section-title{
color: #003a8e;
}

.voice__list {
display: flex;
flex-direction: column;
gap: 148px;
margin-top: 100px;
}

.voice__item {
display: flex;
gap: 66px;
}

.voice__item:nth-child(even) {
flex-direction: row-reverse;
}

.voice__item .img-wrap{
width: 320px;
min-height: 250px;
flex-shrink: 0;
background: url(img/voice-bg.png) no-repeat center bottom 8px / 100%;
position: relative;
}
.voice__img {
position: absolute;
}
.voice__item:nth-of-type(1) .voice__img {
width: 170px;
bottom: -16px;
left: 28%;
}
.voice__item:nth-of-type(2) .voice__img {
width: 270px;
bottom: -56px;
left: 7%;
}
.voice__item:nth-of-type(3) .voice__img {
width: 285px;
bottom: -30px;
left: 5%;
}

.voice__content {
flex: 1;
}

.voice__title {
font-size: 24px;
font-weight: 500;
color: #003a8e;
margin-bottom: 18px;
line-height: 1.4;
}

.voice__attr {
display: inline-block;
background: #4d6c91;
color: #fff;
font-size: 18px;
font-weight: 400;
line-height: 32px;
padding: 0 16px;
border-radius: 100px;
margin-bottom: 14px;
}

.voice__text {
font-size: 18px;
font-weight: 400;
line-height: 1.8;
}

/* ===========================
Voice　レスポンシブ
=========================== */
@media screen and (max-width: 1000px) {
.voice__item {
gap: 30px;
}
}

@media screen and (max-width: 950px) {
.voice__title {
font-size: 22px;
}
.voice__attr{
font-size: 16px;
}
.voice__text {
font-size: 17px;
}
.voice__item .img-wrap {
width: 35%;
min-height: calc(((100vw - 40px) * 0.35) * (481 / 640) + 10px);
}
}

@media screen and (max-width: 900px) {
.voice__text {
font-size: 16px;
}
}

@media screen and (max-width: 850px) {
.voice__list {
gap: 110px;
margin-top: 130px;
}
.voice__item,.voice__item:nth-child(even){
flex-direction: column;
}
.voice__item .img-wrap {
width: 100%;
height: 250px;
min-height:auto;
background: url(img/voice-bg.png) no-repeat center / contain;
}
.voice__item:nth-of-type(1) .voice__img,.voice__item:nth-of-type(2) .voice__img,.voice__item:nth-of-type(3) .voice__img {
left: 50%;
}
.voice__item:nth-of-type(1) .voice__img{
transform: translateX(-42%);
}
.voice__item:nth-of-type(2) .voice__img{
transform: translateX(-51%);
}
.voice__item:nth-of-type(3) .voice__img{
transform: translateX(-51%);
}
.voice__item:nth-of-type(1){
gap: 34px;
}
.voice__item:nth-of-type(2){
gap: 100px;
}
.voice__item:nth-of-type(3){
gap: 70px;
}
.voice__title {
font-size: 24px;
}
.voice__attr {
font-size: 18px;
}
.voice__text {
font-size: 18px;
}
}

@media screen and (max-width: 800px) {
.voice{
padding: calc(20vw - 6px) 0;
}
}

@media screen and (max-width: 550px) {
.voice__list {
gap: calc(22.5vw - 13.75px);
margin-top: calc(18.75vw + 26.88px);
}
.voice__item .img-wrap {
height: calc(43.75vw + 9.38px);
}
.voice__item:nth-of-type(1) {
gap: 30px;
}
.voice__item:nth-of-type(2) {
gap: calc(11.25vw + 38.13px);
}
.voice__item:nth-of-type(3) {
gap: 64px;
}
.voice__item:nth-of-type(1) .voice__img {
width: calc(26.88vw + 22.19px);
}
.voice__item:nth-of-type(2) .voice__img {
width: calc(41.25vw + 43.13px);
}
.voice__item:nth-of-type(3) .voice__img {
width: calc(44.38vw + 40.94px);
}
.voice__title {
font-size: calc(3.75vw + 3.38px);
}
.voice__attr {
font-size: calc(1.88vw + 7.69px);
line-height: calc(3.75vw + 11.38px);
}
.voice__text {
font-size: calc(1.25vw + 11.125px);
}
}

@media screen and (max-width: 391px) {
.voice__title {
font-size: 18px;
}
.voice__text {
font-size: 16px;
}
}


/* ===========================
Footer
=========================== */
.footer{
text-align: center;
padding-top: 160px;
overflow: hidden;
}
.footer__company {
background: #fff;
padding: 80px 0 160px;
}

.footer .inner {
display: flex;
gap: 64px;
text-align: left;
}

.footer__info {
flex: 1;
min-width: 0;
}

.footer__heading {
font-size: 24px;
font-weight: 500;
color: #333;
margin-bottom: 16px;
}

/* ---- 会社情報テーブル ---- */
.company-table {
width: 100%;
margin-bottom: 36px;
}

.company-table__row {
display: flex;
align-items: baseline;
padding: 20px 0;
border-bottom: 1px solid #e6e6e6;
font-size: 14px;
}

.company-table__row:first-child {
border-top: 1px solid #e6e6e6;
}

.company-table__label {
flex-shrink: 0;
width: 96px;
font-weight: 400;
}
.company-table__value{
margin: 0;
font-weight: 400;
}
.company-table__value br.sp{
display: none;
}
.footer__info .contact{
width: 374px;
max-width: 100%;
display: block;
}

/* ---- マップエリア ---- */
.footer__map-area {
flex-shrink: 0;
width: 470px;
max-width: 46%;
display: flex;
flex-direction: column;
padding-top: 46px;
}

.footer__map-area iframe {
display: block;
width: 100%;
height: 300px;
border: 0;
border-radius: 30px;
margin-bottom: 24px;
flex-grow: 1;
}

.footer__jpx-wrap {
display: flex;
align-items: center;
gap: 16px;
}

.footer__jpx {
width: 60px;
height: auto;
flex-shrink: 0;
}

.footer__jpx-text {
font-size: 14px;
font-weight: 400;
line-height: 1.6;
}

/* ---- コピーライトバー ---- */

.footer__copyright {
color: #fff;
line-height: 70px;
font-size: 14px;
font-weight: 400;
text-align: center;
background: #0a2342;
}


/* ===========================
Footer　レスポンシブ
=========================== */
@media screen and (max-width: 1000px) {
.footer .inner {
gap: 40px;
}
}

@media screen and (max-width: 800px) {
.footer{
padding-top: calc(20vw - 6px);
}
.footer__company{
padding-bottom: calc(20vw - 6px);
}
.footer__copyright{
font-size: 13px;
line-height: 56px;
}
}

@media screen and (max-width: 768px) {
.footer .inner{
flex-direction: column;
gap: 42px;
}
.company-table__label{
font-weight: 500;
}
.footer__info .contact{
width: 350px;
margin: 0 auto;
}
.footer__info .contact a{
box-shadow: 0 6px 0 #ffbe06;
padding: 20px 0;
border-radius: 12px;
}
.footer__info .contact a::after{
font-size: 14px;
}
.footer__info .contact img {
width: 88%;
}
.footer__map-area {
width: 100%;
max-width: none;
padding-top: 0;
display: block;
}
.footer__map-area iframe{
height: calc((100vw - 40px) * (240 / 350));
}
}

@media screen and (max-width: 500px) {
.footer .logo img{
width: calc(67.27vw - 13.64px);
min-width: 276px;
}
.footer__company{
padding-top: calc(9.09vw + 20.55px);
}
.footer__heading{
padding-left: 8px;
margin-bottom: 10px;
}
.company-table__row{
flex-direction: column;
padding: 12px 8px;
line-height: 1.4;
gap: 4px;
}
.company-table__label{
font-size: 15px;
}
.company-table__value br.sp{
display: block;
}
.footer__map-area iframe{
border-radius: calc(9.09vw - 15.45px);
}
}

@media screen and (max-width: 391px) {
.footer__heading {
font-size: 18px;
}
.footer__jpx {
width: 50px;
}
}

@media screen and (max-width: 376px) {
.footer__info .contact a::after {
font-size: 13px;
}
}