@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&display=swap');


/* --------------------------------
設定
-------------------------------- */

:root{
    --main-color: #2A353F;
    --accent-color:   #FF9333;
    --base-color: #F7F8F9;    
    --content-width: 1032px;
    --space-3xs: 10px; 
    --space-2xs: 20px; 
    --space-xs: 14px; 
    --space-s: 20px; 
    --space-m: 30px; 
    --space-l: 60px; 
    --space-xl: 80px;
    --font-size-body: 1.4rem;
    --font-size-s: 1.8rem;
    --font-size-m: 2.2rem;
    --font-size-l: 2.6rem;
    --font-size-xl: 3.4rem;
    --font-weight-Regular: 400;
    --font-weight-Medium: 500;
    --font-weight-Semi-Bold: 600;
    --font-weight-Bold: 700;
    --font-weight-Extra-Bold: 800;
    --font-weight-Black: 900;
    --content-marigin-left-and-right: calc(60 * (100vw / 1512));
    --card-3items: calc(1032/3 * (100vw  / 1512));
}

/* @media (max-width: 400px) {
    :root {
      --font-size-s: 7.2vw;
      --font-size-m: 8.8vw;
      --font-size-l: 10.4vw;
      --font-size-xl: 13.6vw;
    }
  } */


html{
    font-size: 10px;
    font-family: "Noto Sans JP", serif;
    color: var(--main-color);
}

body{
    font-size: 1.4rem;
}

a{
    color: #333333;
    text-decoration: none;
}

h2{
    font-size: var(--font-size-m);
}
img{
    max-width: 100%;
    vertical-align:top;
}

ul{
    list-style-type: none;
}

address{
    font-style: normal;
}

*{
    box-sizing: border-box;
    max-width: 100%;
}

/* --------------------------------
pc sp 切り替え
-------------------------------- */


@media screen and (min-width: 801px) {
    .sp-style{
        display: none;
    }

    #embbed-form{
        width: 40%;
        height: 900px;
        overflow-y: scroll;
    }
}

@media screen and (max-width: 800px) {
    .pc-style{
        display: none;
    }
}

/* --------------------------------
共通
-------------------------------- */

/* .main{
    overflow-x: hidden;
} */

.main__wrapper{
    display: flex;
    width: 100%;
    position: relative;
}

/* section共通 */

.section{
    width: 100%;
    overflow-x: hidden;
    
}

.section > .wrap{
    width: calc(1030 * (100vw /1512));
    margin: 0 var( --content-marigin-left-and-right);
    gap: calc(30 * (100vw / 1512));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-l) 0;
}

.section__text-box{
    color: #fff;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    /* background-color: var(--main-color); */
    width: 100%;
    gap: var(--space-xs);
    position: relative;
    margin-bottom: var(--space-m);
}

.section__heading{
    color: var(--main-color);
    font-size: var(--font-size-l);
    font-weight: var( --font-weight-Bold);
    text-align: center;
    position: relative;
}

span.accent{
    color:var(--accent-color);
}

.solution,.reason,.suggestion,.hr,.flow,.faq{
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* padding: var(--space-l) 0;
    box-sizing: border-box; */
}

/* --------------------------------
header
-------------------------------- */

#header{
    height: 70px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 20;
    background-color: #fff;
}

.logo{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 40px;
}

.main{
    width: 100%;
}


/* --------------------------------
contact form
-------------------------------- */



/* --------------------------------
fv
-------------------------------- */

.fv{
    position: relative;
    top: 0;
    width: auto;
}

.fv__description{
    background-color: var(--main-color);
    color: #fff;
    padding: 1% 5%;border-radius: 8px;
    position: absolute;
    z-index: 1;
    width: fit-content;
    left: 50%;
    transform: translateX(-50%);
    bottom: -8%;
}

picture{
    display: block;
    width: 100%;
    height: auto;
}

.fv__description > p{
    font-size: 1.4vw;
    text-align: center;
}

@media screen and (min-width: 801px){
    .fv__description > p{
        white-space: nowrap;
    }
}

.fv__text-wrap{
    position: absolute;
    top: 54%;
    transform: translateY(-60%);
    width: 30vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--space-3xs);
    margin-left: 8vw;
    z-index: 10;
}

@media screen and (min-width: 1000px){
    .fv__text-wrap{
        width: 40vw;
    }
}

@media screen and (max-width: 1001px){
    .fv__text-wrap{
        width: 30vw;
    }
}

.fv__text-wrap::after{
    content: "";
    position: absolute;
    z-index: -1;
    top: -1vw;
    right: -4vw;
    background-image: url("../img/fv-illust.png");
    background-repeat: no-repeat;
    width: calc(271 * (100vw / 1512));
    height: calc(275 * (100vw / 1512));
    background-size: contain;

}

.fv__text-wrap img{
    margin-top: 4px;
}

.fv__text-wrap > p{
    text-align: center;
    white-space: nowrap;
}


.fv__text-wrap > p:first-of-type{
    margin-right: auto;
}


.fv__text-wrap > p:nth-of-type(2){
    font-weight: var(--font-weight-Semi-Bold);
    line-height: 1.6rem;
}

/* 改行調整 */
@media screen and (min-width: 1201px){
    .fv__text-wrap .hidden{
    display: none
}
}

@media screen and (max-width: 801px){
    .fv__text-wrap .hidden{
    display: none;
}
}

.fv__main-copy{
    width: 120vw;
}

.fv__sub-copy{
    color: #fff;
    background-color: var(--main-color);
    text-align: center;
    padding: 1% 14%;
}


.fv__sub-copy::after {
    content: "";
    background-image: url(../img/tower.png);
    width: calc(35 *(100vw / 1512));
    height: calc(78 *(100vw / 1512));
    background-size: contain;
    position: absolute;
    top: 13%;
    transform: translateY(calc(78 *(100vw / 1512) *-1));
    margin-left: 2%;
}

.fv__achivement-wrap{
    width: 100%;
    display: flex;
    justify-content: space-between;
    gap: var(--space-s);
}

.fv__achivement-wrap > picture{
    
width: fit-content;
height: 100%;
}

/* --------------------------------
problem
-------------------------------- */

.problem{
    background-color: var(--base-color);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--space-l) 0;
    text-align: center;
    background-image: url(img/achivement_03.png);
    position: relative;
    overflow: visible;
}

.problem::after{
    content: "";
    position: absolute;
    bottom: -8vh; /* 親要素の下部に配置 */
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 8vh; /* 必要な高さを指定 */
    background-image: url("../img/problem_triangle.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.problem > .wrap > .section__heading{
    line-height: 6rem;
}

.accent.dot-text{
    font-size: 4.5rem;
}
.dot-text{
    background-image: radial-gradient(circle at center, #FF9333 20%, transparent 20%); /* 点の色とサイズ調整 */
    background-position: top right; /* 点の位置 */
    background-repeat: repeat-x; /* 横方向に繰り返し */
    background-size: 1em 0.3em; /* 点の間隔とサイズ調整 */
    padding-top: 2px; /* 縦方向の位置調整 */
}



/* --------------------------------
solution
-------------------------------- */

.solution.section{
    padding-top: calc(8vh + var(--space-s));
    

}

section.text-box *{
    text-align: center;
}

.speech-bubble{
    position: relative;
    background-color: var(--accent-color);
    font-size: var(--font-size-m);
    color: #fff;
    border-radius: 6px;
    font-weight: Semi-bold;
    width: fit-content;
    margin: 0 auto;
}

.speech-bubble::after{
    box-sizing: inherit;
    content: "";
    display: block;
    position: absolute;
    height: 20px;
    aspect-ratio: cos(30deg);
    clip-path: polygon(50% 100%, 0 0, 100% 0);
    background-color: var(--accent-color);
    left: 50%; /* 左右中央に配置 */
    transform: translateX(-50%); /* 三角形の中央揃え */
    bottom: -18px;
}

.speech-bubble p{
    padding: 4px 10px;
    font-weight: var(--font-weight-Bold);
    width: fit-content;
}

.speech-bubble span{
    color: var(--main-color);
}

.section .text-box > p{
    white-space: nowrap;
    margin-top: var(--space-s);
    font-size: var(--font-size-m);
    font-weight: var(--font-weight-Semi-Bold);
    color: var(--main-color);
}

.solution .marker{
    background: linear-gradient(transparent 50%, #FFE4CC 50%);
    padding: 4px;
    font-feature-settings: "palt";
}

/* case card */

.solution__card-wrap{
    display: flex;
    gap: calc(30 * (100vw / 1512));
    color: #fff;
    justify-content: center;
}

.solution__card{
    background-color: var(--main-color);
    width: var( --card-3items);
    border-radius: 10px;
    display: flex;
    text-align: left;
    align-items: center;
    flex-direction: column;
    padding: 20px var(--space-xs);
    gap: calc(20 * (100vw / 1512));
    margin-top: calc(140 * (100vw / 1512));
    position: relative;
}

.solution__card::before{
    content: "";
    position: absolute;
    top: calc((140 * (100vw / 1512))*-1); /* カード直前に配置 */
    left: 50%;
    transform: translateX(-50%);
    width: calc(262 * (100vw / 1512));
    height: calc(142 * (100vw / 1512));
    background-size: cover;
    background-position: center;
    z-index: -1;
}

.solution__card:nth-child(1)::before {
    background-image: url('../img/case_01.svg'); /* 画像パス */
}

.solution__card:nth-child(2)::before {
    background-image: url('../img/case_02.svg'); /* 画像パス */
}

.solution__card:nth-child(3)::before {
    background-image: url('../img/case_03.svg'); /* 画像パス */
}


.solution__card > span{
    text-align: center;
    font-family: "Roboto Condensed", serif;
    font-size: var(--font-size-m);
}

.solution__card-title{
    font-size: var(--font-size-m);
    font-weight: var(--font-weight-Bold);
    text-align: center;
}
.solution__card > span{
    /* padding-top: var(--space-s); */
}

.solution__card-sub-title{
    border-bottom: 1px solid #fff;
    margin-bottom: 6px;
}

.solution__card > div > p:nth-child(2){
    font-size: 1.8rem;
    font-weight: var(--font-weight-Bold);
    margin-bottom: 4px;
}

/* --------------------------------
reason
-------------------------------- */

.reason.section{
    background-image: url("../img/check-bg.png");
    background-size: 100%;
    padding-top: 0;
}

.reason .section__text-box{
    background-color: var(--main-color);
    padding:  var(--space-m) 0 calc(216 * (100vw / 1512)) ;
    z-index: 1; /* 背面に配置 */
    position: absolute;
    top: 0;
}

.reason .wrap{
    width: 100%;
    padding-top: 0;
    position: relative;
}

.section__text-box{
    position: relative;
}
.reason.section .section__text-box .section__heading{
    color: #fff;
    font-weight: var(--font-weight-Bold);
}

.reason__icon-wrap{
    width: calc(980 * (100vw /1512));
    background-color: var(--base-color);
    position: relative;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3vw;
    padding: calc(20 * (100vw /1512));
    bottom: -250px;
    z-index: 2; /* .section__text-box より前面に表示 */
}

.reason__icon-wrap > small{
    position: absolute;
    bottom: 4px;
    right: 7vw;

}

.reason__icon-item{
    position: relative;
    width: calc(240 * (100vw /1512));
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.reason__icon-item::before {
    content: "";
    display: block;
    position: absolute;
    top: 1vw;
    left: -1vw;
    width: calc(82.15 * 100vw /1512);
    height: calc(29 * 100vw /1512);
    background-size: contain;
}

.reason__icon-item:nth-child(1):before {
    background-image: url(../img/reason-number-01.svg);
}

.reason__icon-item:nth-child(2):before {
    background-image: url(../img/reason-number-02.svg);
}

.reason__icon-item:nth-child(3):before {
    background-image: url(../img/reason-number-03.svg);
}

.reason__icon-item p{
    font-size: min(calc(24 * (100vw / 1512)), 22px);
    font-weight: var(--font-weight-Bold);
    position: absolute;
    bottom: calc(25 * (100vw /1512));
    line-height: calc(23 * (100vw / 1512)*1.2);
    color: var(--main-color);
    z-index: 100;
}

.reason__icon-item p span{
    color: var(--accent-color);
}

.resason__reason3-wrap{
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* 左寄せがデフォルト */
    margin: 310px 0 var(--space-xl) 0;
}

.reason__card{
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    position: relative;
    background-color: var(--base-color);
    width: calc(916 * (100vw /1512));
    margin-top: calc(100 * (100vw / 1512));
    padding: calc(60 * (100vw /1512)) calc(296 * (100vw /1512)) calc(60 * (100vw /1512)) calc(60 * (100vw /1512));
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
}

.reason__card .reason__visual{
    position: absolute;
    right: calc(-180 * (100vw / 1512));
    top: calc(-30 * (100vw /1512));
    width: calc(440 * (100vw /1512));
}

.reason__reasoncard-heading{
    font-size: var(--font-size-m);
    font-weight: var(--font-weight-Bold);
    padding: 4px;
    border-bottom: var(--accent-color) solid 1px;
    color: var(--main-color);
}

.reason__reasoncard-heading span{
    color: var(--accent-color);
}

.reason__card:nth-child(even){
    right: calc(-236 *(100vw /1512));
    padding: calc(60 * (100vw /1512)) calc(60 * (100vw /1512)) calc(60 * (100vw /1512)) calc(296 * (100vw /1512));
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.reason__card:nth-child(even) > div > p:first-of-type{
    background-color: var(--main-color);
    width: fit-content;
    padding: 2px 10px;
    margin-bottom: 4px;
    color: #fff;
}

.reason__card:nth-child(even) .reason__visual{
    left: calc(-180 * (100vw / 1512));
    top: calc(-30 * (100vw /1512));
}


.reason__card::before{
    content: "";
    width: calc(89 * (100vw /1512));
    height: calc(66 * (100vw /1512));
    position: absolute;
    background-size: contain;
    top: calc(-30 * (100vw / 1512));
}


.reason__card:nth-of-type(1)::before{
    content: "";
    background-image: url(../img/reason-before-01.png);
}

.reason__card:nth-of-type(2)::before{
    content: "";
    background-image: url(../img/reason-before-02.png);
}

.reason__card:nth-of-type(3)::before{
    content: "";
    background-image: url(../img/reason-before-03.png);
}

/* --------------------------------
suggestion
-------------------------------- */

.suggestion{
    background-color: var(--base-color);
}

.suggestion__sarani{
    background-color: var(--main-color);
    color: #fff;
    font-size: var(--font-size-m);
    font-weight: var(--font-weight-Bold);
    padding: 10px 30px ;
    border-radius: 50%;
    width: fit-content;
    margin: auto;
    margin-bottom: var(--space-xs);
}

/* ここまでflex改行位置＆調整 */

.section__heading span{
    color: var(--accent-color);
}

.suggestion__card-wrap{
    display: flex;  
    flex-wrap: wrap;
    gap: 20px;      /* カード間のスペース */
    align-items: stretch; /* カードの高さを揃える */
}

.suggestion__card {
    display: flex;
    flex-direction: column;  /* 縦に並べる */
    flex: 1;                 /* カードを均等に広げる */
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.suggestion__card--shadow{
    display: flex;
    flex-direction: column;
    flex: 1;
    box-shadow: 0px 10px 15px -9px rgba(0, 0, 0, 0.3);
    border-radius: 10px;
}

.suggestion__card .suggestion__card-heading{
    height: calc(50 * (100vw / 1512));
    background-color: var(--accent-color);
    color: #fff;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    font-size: 1.8rem;
    font-weight: var(--font-weight-Bold);
    display: flex;
    align-items: center;
    justify-content: center;
}

.suggestion__card:nth-child(even) .suggestion__card-heading{
   background-color: var(--main-color);
}

.suggestion__card > p:first-of-type{
    margin-bottom: 4px;
}



.suggestion__card-wrap > .suggestion__card:nth-child(odd) > p:first-of-type {
    color: var(--accent-color);
}

.suggestion__card-content {
    display: flex;           /* 中の要素をフレックスに */
    flex-direction: column;  /* 縦に並べる */
    flex: 1;                 /* 高さを均等に伸ばす */
    text-align: left;
    padding: 14px 10px;
    background-color: #fff;
    gap: 10px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.suggestion__card-body {
    flex-grow: 1;            /* 余ったスペースを埋める */
}


/* flex改行位置＆調整 */
.flex-break,.suggestion__card-wrap i{
    margin: 0 -10px;
}

@media screen and (min-width: 801px) and (max-width: 1250px){
.flex-break{
    width: 100%;
    margin: 0 -20px;
}

.suggestion__card .suggestion__card-heading{
    height: 6vw;
}

.adjustment{
    display: none !important;
    margin: 0 -10px;
}

.suggestion__card:nth-child(5) .suggestion__card-heading{
    background-color: var(--main-color);
}

.suggestion__card:nth-child(5) > p:first-of-type{
    color: var(--main-color) !important;
}

.suggestion__card:nth-child(6) .suggestion__card-heading{
    background-color: var(--accent-color);

}

.suggestion__card:nth-child(6) > p:first-of-type{
    color: var(--accent-color) !important;
}
}


/* --------------------------------
hr
-------------------------------- */

.hr.section{
    position: relative;
    overflow: hidden;
}
.hr.section::after{
    position: absolute;
    bottom: 3vh;
    z-index: -10;
    content: "";
    background-color: var(--main-color);
    width: 140%;
    height: calc(300 * (100vw / 1512));
    transform: rotate(-5deg);

}

.hr .section__text-box p{
    color: var(--main-color);
}

.hr__card-wrap{
    display: flex;
    gap: calc(30 * (100vw / 1512));
}

.hr__card-wrap::after{
    background-color: var(--main-color);
    width: 100%;
    height: 50px;
}

.hr__card{
    background-color: #fff;
    width: var(--card-3items);
    text-align: left;
    padding: 20px;
    box-shadow: 0px 10px 15px -9px rgba(0, 0, 0, 0.3);
    border-radius: 20px;
    gap: var(--space-m);
}

.hr__card img{
    width: calc(130 *(100vw / 1512));

}

.hr__card div:first-of-type{
    display: flex;
    align-items: center;
    gap: calc(20 * (100vw / 1512));
}

.hr__card-job{
    font-size: var(--font-size-m);
    font-weight: var(--font-weight-Bold);
    padding-left: var(--space-3xs);
    border-left: var(--main-color) solid 4px;
}

.hr .section__heading::after{
    content: url(../img/hr-title-bg.svg);
    position: absolute;
    top: -45%;
    left: 50%;
    transform: translateX(-50%);
    z-index: -1;
}

/* --------------------------------
area　
【250403 エリアセクションごと削除】
-------------------------------- */


/* .area{
    background-color: var(--base-color);
}

.area > .wrap > p{
    background-color: var(--main-color);
    color: #fff;
    font-size: var(--font-size-m);
    width: 100%;
    text-align: center;
    padding: 4px;
}

.area__wrap{
    display: flex;
    align-items: center;
    justify-content: center;
    height: calc(420 * (100vw /1512));
    margin-top: var(--space-s);
    gap: calc(80 * (100vw /1512));
}

.area__wrap > div:first-child{
    height: 100%;
    width: calc(400 * (100vw /1512));
}

.area__text-box{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-color: #fff;
    border-radius: 10px;
    width: calc(500 * (100vw /1512));
    height: fit-content;
    padding: var(--space-xs);
    gap: calc(20 * (100vw /1512));
}

.area__text-box p:nth-child(1){
    color: var(--accent-color);
    font-size: var(--font-size-m);
    font-weight: var(--font-weight-Bold);
    padding-bottom: 2px;
    border-bottom: var(--accent-color) 2px solid;
}

.area__text-box p:nth-child(2){
    font-size: 1.8rem;
} */

/* --------------------------------
flow
-------------------------------- */

.flow.section{
    background-image: url("../img/check-bg.png");
    background-size: 100%;
}

.flow__wrap{
    width: 100%;
    background-size:cover;
    display: flex;
    flex-direction: column; /* 縦並び */
    align-items: stretch;   /* 子要素の高さを合わせる */
    height: 100%;           /* 必要に応じて高さを指定 */
    /* height: calc(60 * (100vw / 1512));
    gap: var(--space-xl); */
    gap: calc(var(--space-s) + (60 * (100vw / 1512)));
}

/* フローカード＆カード内コンテンツ */

li.flow__card{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--main-color);
    color: #fff;
    width: 100%;
    gap: calc(40* (100vw / 1512));
    /* height: calc(260* (100vw / 1512)); */
    padding: var(--space-xs) 0;
    position: relative;
    box-sizing: border-box;
}

li.flow__card::after{
    box-sizing: border-box;
    content: "";
    background-image: url(../img/odd-triangle.png);
    background-size: 100%;
    width: 100%;
    height: calc(60 * (100vw / 1512));
    position: absolute;
    bottom: calc(60 * (100vw / 1512) * -1);
}

li.flow__card:nth-of-type(even)::after{
    background-image: url(../img/even-triangle.svg);
}

li.flow__card:last-child:after{
    content: none;
}


.flow__num{
    width: calc(54* (100vw / 1512));
    height: fit-content;
}

.flow__card-text-box{
    text-align: left;
    width: calc(520 * (100vw / 1512));
    gap: var(--space-xs);
    display: flex;
    flex-direction: column;
}

.flow__card-text-box > .flow__card-heading{
    font-size: var(--font-size-m) ;
    font-weight: var(--font-weight-Bold) ;
    padding-bottom: 4px;
    border-bottom: #fff solid 1px;
}

.flow__card:nth-of-type(even) > .flow__card-text-box > .flow__card-heading{
    font-size: var(--font-size-m) ;
    font-weight: var(--font-weight-Bold) ;
    padding-bottom: 4px;
    border-bottom: var(--main-color) solid 1px;
}


.flow__inner-box{
    background-color: #fff;
    color: var(--main-color);
    padding: 10px;
}

.flow__inner-box p:first-of-type{
    font-weight: var(--font-weight-Bold);
}

.flow__visual{
    width: calc(296 * (100vw / 1512));
    height: fit-content;
}

/* 偶数スタイル変更 */

.flow__card:nth-of-type(even){
    background-color: var(--base-color);
    color: var(--main-color)
}

.flow__card:nth-of-type(even) .flow__inner-box{
    background-color: var(--main-color);
    color: #fff;
}


/* --------------------------------
faq
-------------------------------- */

.faq{
    background-color: var(--base-color);
    text-align: left;
}

.faq__wrap{
    display: flex;
    flex-direction: column;
    gap: var(--space-m);
    width: 100%;
    /* font-size: var(--font-size-m); */
}

.faq__item{
    position: relative;
    width: 100%;
}

/* Q */

.faq__q i{
    position: relative;
    right: 10px;
}


.faq__q{
    background-color: var(--main-color);
    color: #fff;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: calc(50 * (100vw / 1512));
    padding: calc(10 * (100vw / 1512)) calc(50 * (100vw / 1512));
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border: var(--main-color) solid 1px;

}

.faq__q p:first-of-type{
    text-align: center;
    background-color: #fff;
    color: var(--main-color);
    width: 40px;
    height: 40px;
    line-height: 40px;
    border-radius: 50px;
}

.faq__q p:last-of-type{
    max-width: 87%;
    max-width: calc(87% - 40px);* /*丸潰れないように */
}

/* A */

.faq__a{
    background-color:  #fff;
    color: var(--main-color);
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: calc(50 * (100vw / 1512));
    padding: calc(10 * (100vw / 1512)) calc(50 * (100vw / 1512));
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    border: var(--main-color) solid 1px;
}

.faq__a p:first-of-type{
    text-align: center;
    background-color: var(--main-color);
    color: #fff;
    width: 40px;
    height: 40px;
    line-height: 40px;
    border-radius: 50px;
}

.faq__a p:last-of-type{
    max-width: 87%;
    max-width: calc(87% - 40px);
}

/* --------------------------------
aside
-------------------------------- */

aside {
    z-index: 20;
    height: fit-content;
    display: flex;
    flex-direction: column;
    width: 100%;
    top: 0;
    position: sticky;
    margin-top: -70px;
    overflow-y: auto; /* aside内部だけスクロール */
}

aside a{
    text-decoration: none;
}


aside a:hover{
    background-color: #475766;
    transition: .5s;
}


.contact-btn{
    font-size: var(--font-size-xs);
    position: sticky;
    background-color: var(--main-color);
    color: #fff;
    text-align: center;
    height: 70px;
    /* margin-top: -70px; */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    z-index: 1;
    top: 0;
}

@media screen and (min-width: 801px) {
    a .contact-btn{
        display: none;
}
}

.contact-btn > img{
    width: min(40px, 70%);
    height: 40px;
    object-fit: contain;
}
 /* --------------------------------
footer-original
-------------------------------- */

.footer-original caption{
    font-size: var(--font-size-m);
    font-weight: var(--font-weight-Semi-Bold);
    margin-bottom: var(--space-s);
}

table{
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

tbody{
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
}

.footer-original{
    color: #fff;
    background-color: var(--main-color);
    padding: var(--space-s);
}


.footer-origina.tr{
    width: fit-content;
    display: flex;
    white-space: nowrap;
}

.footer-original td{
    width: fit-content;
}

.footer-original th{
    width: calc(200 * (100vw / 1512));
}

.footer-original td a {
    color: #FFF;
    text-decoration: underline;
}


/* --------------------------------
--------------------------------
--------------------------------
footer 移植
--------------------------------
--------------------------------
-------------------------------- */

/* -------------------------------- footer */
#footer {
    background: #97999B;
  }
  #footer .footer-cont::after {
    content: "";
    display: block;
    clear: both;
  }
  #footer .footer-logo{
    float: left;
    width: 240px;
    padding: 30px 0 0 0;
    margin-left: 5.8%;
  }
  #footer .footer-slogan{
    float: right;
    width: 300px;
    padding: 35px 0 0 0;
    margin-right: 5.8%;
  }
  #footer .footer-copyright{
    color: #ffffff;
    text-align: center;
    padding: 45px 0 20px;
  }
  #footer .footer-copy{
    font-size: 1rem;
  }
  @media screen and (max-width: 767px){
    #footer .footer-logo{
      width: 108px;
      padding-top: 25px;
      margin-left: 5.3%;
    }
    #footer .footer-slogan{
      width: 135px;
      padding-top: 27px;
      margin-right: 5.3%;
    }
    #footer .footer-copyright{
      padding: 25px 0 10px;
    }
}


/* --------------------------------
SPレスポンシブ
-------------------------------- */

@media screen and (max-width: 800px) {


    /* --------------------------------
    共通
    -------------------------------- */

    .section__heading{
        margin-bottom: var(--space-2xs);
        white-space: nowrap;
        font-size: var(--font-size-m);
    }
    .section > .wrap{
        margin: 0 auto;
        width: calc(370 *(100vw / 400));
        padding: var(--space-m) 0;
    }

    /* --------------------------------
    header
    -------------------------------- */

    #header{
        height: 50px;
    }

    .logo{
        width: calc(200 *(100vw/400));
        margin-left: 16px;
    }

    /* --------------------------------
    fv
    -------------------------------- */

    .fv__achivement-wrap img{
        width: calc(200 * (100vw / 400));
        height: 100%;
    }

    .fv{
        display: flex;
        justify-content: center;
    }

    .fv__text-wrap{
        top: 56%;
        width: calc(367 * (100vw /400));
        margin: 0 auto;
        gap: 7px;
    }

    .fv__text-wrap::after{
        content: none;
    }

    /* 【250403 削除】 */
    /* .fv__sub-copy{
        width: 100%;
    }

    .fv__sub-copy::after {
        width: calc(20 *(100vw / 400));
        height: calc(38 *(100vw / 400));
        background-size: contain;
        top: 50;
        transform: translateYcalc(38 *(100vw / 400) *-1);
    } */

    .fv{
        display: flex;
        justify-content: center;
    }

    .fv__text-wrap > p{
        text-align: center;
        position: relative;
        white-space: normal;
    }



    .fv__text-wrap > p:first-of-type{
        margin: auto;
    }

    .fv__achivement-wrap{
        flex-direction: column;
        align-items: flex-start;
    }

    .fv__achivement-wrap source {
        width: calc(212 * (100vw / 400));
        height: 40%;
    }

    .fv__description{
        width: calc(367 *(100vw /400));
        padding: 3%;
        border-radius: 6px;
        bottom: -50px;
    }

    .fv__description > p{
        font-size: var(--font-size-xs);
    }

    /* --------------------------------
    problem
    -------------------------------- */

    .accent.dot-text{
        font-size: 3rem;
    }

    .problem > .wrap > .section__heading{
        font-size: 1.8rem;
        line-height: 4.5rem;
    }


    .problem > .wrap{
        padding: 0;

    }

    .problem::after{
        height: 3vh;
        bottom: -3vh;
    }
    /* --------------------------------
    solution
    -------------------------------- */

    .solution.section{
        padding-top: var(--space-m);
    }

    .solution .text-box{
        margin-bottom: calc(140 * (100vw /400));
    }

    .solution .text-box >.speech-bubble{
        font-size: var(--font-size-s);
    }

    .solution .text-box > p{
        font-size: var(--font-size-s);
    }

    .solution__card-wrap{
        flex-direction: column;
        gap: calc(140 * (100vw /400));
    }

    .solution__card{
        width: 100%;
    }

    .solution__card::before {
        width: calc(262 * (100vw / 400));
        height: calc(142 * (100vw / 400));
        top: calc((140 * (100vw / 400))*-1);
    }

    .solution__card-title,.solution__card > div > p:nth-child(2){
        font-size: var(--font-size-s);
    }


    
    /* --------------------------------
    reason
    -------------------------------- */

    .reason .wrap{
        width: 100%;
    }

    .reason.section{
        background-size: 150%;
        background-image: url("../img/check-bg.png");
        background-repeat: repeat-y;
    }

    .reason h2, .reason p{
        width: calc(370 *(100vw / 400));
    }


    .reason .section__text-box{
        margin-top: var(--space-m);
    }
    
    .reason__icon-wrap{
        width: calc(320 * (100vw / 400));
        flex-direction: column;
        position: relative;
        gap: var(--space-s);
        padding: var(--space-s) 0;
        bottom: -320px;
    }

    .reason__icon-item{
        width: calc(200 *(100vw / 400));

    }

    .reason__icon-item p{
        font-size: var(--font-size-s);
        line-height: calc(23 * (100vw / 400)*1.2);
        bottom: calc(18 * (100vw / 400));
    }

    /* reason wrap */


    .reason__icon-item::before {
        content: "";
        top: 2vw;
        left: -1vw;
        width: calc(82.15 * 100vw /400);
        height: calc(29 * 100vw /400);
    }

    .resason__reason3-wrap{
        flex-direction: column;
        align-items: center;
        gap: var(--space-m);
        margin: 0;
        margin-top: 360px;
    }

    .reason__card::before{
        width: calc(89 *(100vw /400));
        height: calc(60 *(100vw /400));
        top: calc(-40 *(100vw /400));
    }

    .reason__card,.reason__card:nth-child(even){
        width: calc(374 *(100vw /400));
        padding: calc(30 *(100vw /400))  calc(10 *(100vw /400));
    }

    .reason__card:nth-child(odd){
        left: calc(-5 *(100vw /400))
    }

    .reason__card:nth-child(even){
        right: calc(-5 *(100vw /400))
    }

    .reason__card:nth-child(even)::before{
        right: 0;
    }

    .reason__card .reason__visual{
        width: 100%;
        position: relative;
        right: 0;
        top: 0;
    }

    .reason__card:nth-child(even) .reason__visual{
        left: 0;
    }

    /* --------------------------------
    suggestion
    -------------------------------- */

    .flex-break,.suggestion__card-wrap i{
        margin: -15px 0;
    }

    .suggestion__card-wrap{
        flex-direction: column;
        gap: var(--space-m);
    }

    .suggestion__card .suggestion__card-heading{
        height: calc(50 * (100vw/400));
    }

    .suggestion__card-content{
        padding: var(--space-s);
    }

    .suggestion__card-content img{
        width: 90%;
        margin:  0 auto;
    }

    /* --------------------------------
    hr
    -------------------------------- */
    .hr.section{
        padding-top: var(--space-l);
    }

    .hr.section::after{
        height: calc(740 * (100vw / 400));
    }

    .hr__card-wrap{
        flex-direction: column;
        gap: var(--space-m);
        align-items: center;
    }

    .hr__card{
        width: 100%;
    }

    .hr__card div:first-of-type{
        gap: var(--space-xs);
    }

    .hr__card img {
        width: calc(130 *(100vw / 400));
    }

    .hr .section__heading::after{
        top: -70%;
    }

    /* --------------------------------
    area
    【250403 エリアセクションごと削除】
    -------------------------------- */
    /* .area__wrap{
        flex-direction: column;
        height: auto;
    }

    .area__text-box{
        height: fit-content;
        width: 100%;
        gap: calc(20 * (100vw /400));
    }

    .area__text-box p:nth-child(2){
        font-size: var(--font-size-s);
    }

    .area__text-box p:nth-child(1){
        width: 100%;
    }

    .area__wrap > div:first-child{
        width: 100%;
    } */

    /* --------------------------------
    flow
    -------------------------------- */

    .flow.section{
        background-image: url("../img/check-bg.png");
        background-repeat: repeat-y;
    }

    .flow__wrap{
        gap: calc(var(--space-s) + (60 * (100vw / 400)));
    }

    li.flow__card{
        flex-direction: column;
        gap: calc(30* (100vw / 400));
    }

    .flow__num{
        width: calc(54* (100vw / 400));
    }

    .flow__card-text-box{
        width: calc(340 *(100vw / 400));
    }

    .flow__visual{
        width: calc(340 *(100vw / 400));
    }

    li.flow__card::after {
        background-image: url(../img/odd-triangle-sp.svg);
        height: calc(50 * (100vw/400));
        bottom: calc(49 * (100vw/400) *-1);
    }

    li.flow__card:nth-child(even)::after {
        background-image: url(../img/even-triangle-sp.svg);
    }

    /* --------------------------------
    faq
    -------------------------------- */

    .faq__q,.faq__a{
        padding: calc(10 * (100vw / 400));
    }

    /* --------------------------------
    footer-original
    -------------------------------- */
    
    .footer-original tr{
        width: fit-content;
        display: flex;
        flex-direction: column;
    }

    .footer-original th {
        width: calc(200 * (100vw / 400));
    }

    /* --------------------------------
    contact-btn
    -------------------------------- */

    #header .contact-btn{
        position: fixed;
        background-color: var(--accent-color);
        font-size: var(--font-size-xs);
        width: 100%;
        height: 50px;
        z-index: 100;
        margin: 0;
        right: 0;
        bottom: 0;
        top: initial    ;
    }

    .contact-btn p{
        font-size: var(--font-size-xs);
    }
  }