/*==================================================
SECTION BACKGROUND
==================================================*/

.first-hero{

    background:var(--color-bg);

}

.first-problem{

    background:#fff;

}

.first-flow{

    background:#fff;

}

.first-proposal{

    background:var(--color-bg);

}

.first-support{

    background:#fff;

}

.first-cta{

    background:var(--color-bg);

}




/*==================================================
FIRST HERO
==================================================*/

.first-hero{

    padding:80px 0;

}

.first-hero .container{

    max-width:1100px;

}

.first-hero__inner{

    display:grid;

    grid-template-columns:1fr 1fr;

    align-items:center;

    gap:80px;

    min-height:50vh;

}

/*----------------------------------
Content
-----------------------------------*/

.first-hero__content{

    max-width:500px;

}

.first-hero__content h1{

    margin:20px 0 35px;

    font-size:clamp(2.4rem,4vw,3.5rem);

    line-height:1.4;

}

.hero-divider{

    width:80px;

    height:2px;

    background:#ffa93a;

    margin:35px 0;

}


.first-hero__text{

    line-height:2.2;

    color:var(--color-gray);

}

/*----------------------------------
Image
-----------------------------------*/

.first-hero__image{

    display:flex;

    justify-content:center;

}

.first-hero__image img{

    width:100%;

    max-width:500px;

    border-radius:16px;

    display:block;

    object-fit:cover;

    box-shadow:0 20px 50px rgba(0,0,0,.08);

}



/*==================================================
SECTION DIVIDER
==================================================*/

.section-divider{

    width:100px;

    height:2px;

    margin:70px auto 0;

    background:#ffa93a;

    opacity:.9;

}


/*==================================================
Responsive
==================================================*/
/*==================================================
Tablet 1024px
==================================================*/

/* Hero */

.first-hero{

    padding:90px 0;

}

.first-hero__inner{

    gap:50px;

}

.first-hero__content{

    max-width:460px;

}

.first-hero__content h1{

    font-size:clamp(2.8rem,3.8vw,3.8rem);

}

.first-hero__image img{

    max-width:420px;

}


/* Problem */

.first-problem{

    padding:90px 0;

}

.problem-item summary{

    padding:24px 28px;

}

.problem-answer{

    padding:0 28px 24px 60px;

}


/* Flow */

.first-flow{

    padding:100px 0;

}

.first-flow__inner{

    max-width:900px;

}


/* Proposal */

.first-proposal{

    padding:100px 0;

}

.first-proposal__inner{

    gap:50px;

}

.first-proposal__content{

    max-width:440px;

}

.first-proposal__image img{

    max-width:420px;

}


/* Support */

.first-support{

    padding:100px 0;

}

.first-support__inner{

    gap:50px;

}

.first-support__content{

    max-width:440px;

}

.first-support__image img{

    max-width:420px;

}












@media (max-width:768px){

.first-hero{

    padding:80px 0;

}

.first-hero__inner{

    grid-template-columns:1fr;

    gap:50px;

}

.first-hero__content{

    max-width:100%;

}

.first-hero__image{

    order:-1;

}

.first-hero__image img{

    max-width:100%;

}


/*==================================================
Responsive
FIRST HERO
==================================================*/

.first-hero{

    padding:70px 0;

}

.first-hero__inner{

    display:flex;

    flex-direction:column;

    gap:40px;

}

/*----------------------------------
Content
-----------------------------------*/

.first-hero__content{

    order:2;

    max-width:100%;

    text-align:left;

}

.first-hero__content h1{

    font-size:clamp(2.4rem,7vw,3.4rem);

    line-height:1.3;

}

.first-hero__text{

    font-size:1rem;

    line-height:2;

}

/*----------------------------------
Image
-----------------------------------*/

.first-hero__image{

    order:1;

}

.first-hero__image img{

    width:100%;

    max-width:420px;

    display:block;

    margin:0 auto;

    border-radius:16px;

}

/*----------------------------------
Section EN
-----------------------------------*/

.first-hero .section-en{

    text-align:center;

}

.first-hero .hero-divider{

    margin:18px auto 32px;

}

}








/*==================================================
PROBLEM
==================================================*/

.first-problem{

    padding:90px 0 100px;

    background:#fff;

}

.first-problem .container{

    max-width:900px;

}

/* COMMON QUESTIONだけ左 */

.first-problem .section-title .section-en{

    align-self:flex-start;

    margin-left:0;

    text-align:left;

}

.first-problem .section-title h2{

    margin-top:16px;

    text-align:center;

    font-size:clamp(2.4rem,4vw,3.2rem);

    line-height:1.2;

    word-break:keep-all;

}

.first-problem__lead{

    max-width:650px;

    margin:35px auto 60px;

    text-align:center;

    line-height:2;

    color:var(--color-gray);

}

/*==================================================
Problem List
==================================================*/

.problem-list{

    display:flex;

    flex-direction:column;

    gap:18px;

}

.problem-item{

    background:#fff;

    border:1px solid #e8e8e8;

    border-radius:12px;

    overflow:hidden;

    transition:.3s;

}

.problem-item:hover{

    transform:translateY(-2px);

    box-shadow:0 10px 25px rgba(0,0,0,.05);

}

.problem-item[open]{

    border-left:5px solid #ffa93a;

    box-shadow:0 15px 35px rgba(0,0,0,.06);

}

/*==================================================
Summary
==================================================*/

.problem-item summary{

    list-style:none;

    cursor:pointer;

    padding:26px 30px;

    font-size:1.1rem;

    font-weight:700;

    display:flex;

    align-items:center;

}

.problem-item summary::-webkit-details-marker{

    display:none;

}

.problem-item summary::before{

    content:"✓";

    color:#ffa93a;

    font-weight:700;

    margin-right:16px;

}

/*==================================================
Answer
==================================================*/

.problem-answer{

    padding:0 30px 28px 62px;

}

.problem-answer::before{

    content:"";

    display:block;

    width:70px;

    height:2px;

    background:#ffa93a;

    margin-bottom:20px;

}

.problem-answer p{

    line-height:2;

    color:var(--color-gray);

}

/*==================================================
Responsive
==================================================*/

@media (max-width:768px){

.first-problem{

    padding:70px 0;

}

.first-problem__lead{

    text-align:left;

}

.problem-item summary{

    padding:22px;

    font-size:1rem;

}

.problem-answer{

    padding:0 22px 22px 50px;

}


/*==================================================
Responsive
PROBLEM
==================================================*/

.first-problem{

    padding:70px 0;

}

.first-problem .section-title{

    margin-bottom:25px;

}

.first-problem .section-title h2{

    font-size:1.7rem;

    line-height:1.35;

}

.first-problem__lead{

    margin:0 auto 40px;

    text-align:left;

    line-height:2;

}

.problem-list{

    gap:14px;

}

.problem-item summary{

    padding:20px;

    font-size:1rem;

    line-height:1.6;

}

.problem-item summary::before{

    margin-right:12px;

}

.problem-answer{

    padding:0 20px 20px 48px;

}

.problem-answer::before{

    width:50px;

    margin-bottom:16px;

}

.problem-answer p{

    line-height:1.9;

}


}



/*==================================================
FLOW
==================================================*/

.first-flow {

    padding: 120px 0;

}

.first-flow .container {

    max-width: 900px;

}

.flow-timeline {

    margin-top: 80px;

}

.flow-item {

    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 50px;

    position: relative;

    padding-bottom: 70px;

}

.flow-item:last-child {

    padding-bottom: 0;

}

.first-flow .section-title h2{

    font-size: clamp(2.6rem, 4vw, 3.8rem);

    line-height: 1.25;

}

.first-flow .section-title{

    text-align:center;

    margin:0 auto 50px;

    max-width:900px;

}

.first-flow .section-en{

    text-align: left !important;

    display: block;

}

/*------------------------------
数字エリア
------------------------------*/

.flow-number {

    position: relative;

    text-align: center;

}

/* 縦ライン */

.flow-item:not(:last-child) .flow-number::after {

    content: "";

    position: absolute;

    top: 95px;
    left: 50%;

    transform: translateX(-50%);

    width: 2px;
    height: calc(100% - 40px);

    background: #dddddd;

}

.flow-label {

    display: block;

    margin-bottom: 6px;

    font-size: .75rem;

    letter-spacing: .25em;

    color: #ffa93a;

    text-transform: uppercase;

}

.flow-count {

    display: block;

    font-family: "Anton", sans-serif;

    font-size: 4rem;

    line-height: 1;

    color: var(--color-black);

}

/*------------------------------
本文
------------------------------*/

.first-flow__lead{

    max-width:900px;

    margin:0 auto 70px;

    text-align:center;

    line-height:2;

    color:var(--color-gray);

}

.flow-content h3 {

    font-size: 1.6rem;

    margin-bottom: 20px;

}

.flow-content hr {

    width: 80px;

    height: 2px;

    border: none;

    background: #ffa93a;

    margin-bottom: 25px;

}

.flow-content p {

    line-height: 2;

    color: var(--color-gray);

}

.flow-message {

    margin-top: 35px;

    font-weight: 700;

    color: var(--color-black);

}

/*==================================================
Responsive
==================================================*/

@media (max-width:768px){

.flow-item{

    grid-template-columns:70px 1fr;

    gap:25px;

}

.flow-count{

    font-size:3rem;

}

.flow-content h3{

    font-size:1.3rem;

}

.flow-item:not(:last-child) .flow-number::after{

    top:75px;

}


/*==================================================
Responsive
FLOW
==================================================*/

.first-flow{

    padding:70px 0;

}

/* ---------- タイトル ---------- */

.first-flow .section-title{

    margin-bottom:30px;

}

.first-flow .section-title h2{

    font-size:1.7rem;

    line-height:1.35;

}

/* FLOWだけ左寄せ */

.first-flow .section-en{

    text-align:left;

}

.first-flow .hero-divider{

    margin:18px 0 24px;

}

/* ---------- リード文 ---------- */

.first-flow__lead{

    text-align:left;

    line-height:2;

    margin-bottom:50px;

}

/* ---------- 各ステップ ---------- */

.flow-item{

    display:block;

    margin-bottom:60px;

}

.flow-number{

    margin-bottom:24px;

    text-align:left;

}

.flow-content{

    width:100%;

}

.flow-content h3{

    font-size:1.5rem;

    line-height:1.4;

}

.flow-content p{

    line-height:2;

}

.flow-item:not(:last-child) .flow-number::after{

    content:none;

}

}








/*==================================================
PROPOSAL
==================================================*/

.first-proposal{

    padding:120px 0;

    background:var(--color-bg);

}

.first-proposal .container{

    max-width:1100px;

}

.first-proposal__inner{

    display:grid;

    grid-template-columns:1fr 1fr;

    align-items:center;

    gap:80px;

}

/*----------------------------------
Content
-----------------------------------*/

.first-proposal__content{

    max-width:480px;

}

.first-proposal__content h2{

    margin-bottom:30px;

    font-size:clamp(2rem,3vw,2.8rem);

    line-height:1.4;

}

/* section-title内のPROPOSALはオレンジ */

.first-proposal__content .section-en{

    color:var(--color-main);

}

/* 本文だけ指定 */

.first-proposal__content > p{

    color:var(--color-gray);

    line-height:2.2;

}

/*----------------------------------
Image
-----------------------------------*/

.first-proposal__image{

    display:flex;

    justify-content:center;

}

.first-proposal__image img{

    width:100%;

    max-width:520px;

    display:block;

    border-radius:16px;

    object-fit:cover;

    box-shadow:0 20px 50px rgba(0,0,0,.08);

}






/*==================================================
Responsive
==================================================*/

@media (max-width:768px){

/*==================================================
Responsive
PROPOSAL
==================================================*/

.first-proposal{

    padding:70px 0;

}

.first-proposal__inner{

    grid-template-columns:1fr;

    gap:35px;

}

.first-proposal__content{

    order:2;

}

.first-proposal__image{

    order:1;

}

.first-proposal__image img{

    width:100%;

    max-width:100%;

}

.first-proposal .section-title h2{

    font-size:1.7rem;

    line-height:1.35;

}

.first-proposal__content p{

    line-height:2;

}

}



/*==================================================
SUPPORT
==================================================*/

.first-support{

    padding:120px 0;

    background:var(--color-white);

    border-top:1px solid #ececec;

    border-bottom:1px solid #ececec;

    padding:120px 0 140px;


}

.first-support .container{

    max-width:1100px;

}

.first-support__inner{

    display:grid;

    grid-template-columns:1fr 1fr;

    align-items:center;

    gap:80px;

}

/*----------------------------------
Content
-----------------------------------*/

.first-support__content{

    max-width:520px;

}

.first-support__content .section-en{

    color:var(--color-main);

}

.first-support__content h2{

    font-size:clamp(1.9rem,2.8vw,2.5rem);

    line-height:1.35;

    margin-bottom:24px;

    color:var(--color-black);

}

.first-support__content > p{

    color:var(--color-gray);

    line-height:2.2;

}

/*----------------------------------
Image
-----------------------------------*/

.first-support__image{

    display:flex;

    justify-content:center;

}

.first-support__image img{

    width:100%;

    max-width:500px;

    display:block;

    border-radius:16px;

    object-fit:cover;

    box-shadow:0 18px 45px rgba(0,0,0,.08);

}





/*==================================================
Responsive
==================================================*/

@media (max-width:768px){

/*==================================================
Responsive
SUPPORT
==================================================*/

.first-support{

    padding:70px 0;

}

.first-support__inner{

    grid-template-columns:1fr;

    gap:35px;

}

.first-support__content{

    width:100%;

}

.first-support__image{

    width:100%;

}

.first-support__image img{

    width:100%;

    max-width:100%;

}

.first-support .section-title h2{

    font-size:1.7rem;

    line-height:1.35;

}

.first-support__content p{

    line-height:2;

}

}