/* ======================================================
   Base
====================================================== */

:root{

    --green:#63b246;
    --green-dark:#4a9733;

    --blue-1:#27479c;
    --blue-2:#3f61b5;
    --blue-3:#5f84d8;
    --blue-4:#82aff2;
    --blue-5:#aac9f5;
    --blue-6:#c8dcf8;

    --blue:#1b5ca9;

    --text:#333;

    --border:#dddddd;

    --bg:#f7f9fb;

    --marker:#ffe868;

    --container:1100px;

}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{

    scroll-behavior:smooth;
    overflow-x:hidden;

}

body{

    overflow-x:hidden;

    color:var(--text);

    font-family:
    "Yu Gothic",
    "Hiragino Kaku Gothic ProN",
    sans-serif;

    line-height:1.8;

    background:#fff;

}

img{

    display:block;
    width:100%;
    height:auto;

}

a{

    color:inherit;
    text-decoration:none;

}

ul{

    list-style:none;

}

.container{

    width:100%;
    max-width:var(--container);

    margin:auto;

    padding:0 20px;

}

section{

    padding:60px 0;

}

.section-title{

    text-align:center;

    font-size:34px;

    margin-bottom:50px;

}


/* ======================================================
   Hero
====================================================== */

.hero-section{

    background: linear-gradient(#ffffff, #f8fcff);
    border-top: 3px solid #d7ebfa;

    text-align:center;

}

.hero-subtitle{

    font-size:28px;

    margin-bottom:15px;

}

.hero-title{

    margin-bottom:20px;

}

.hero-title > span{

    display:inline-block;

    position:relative;

    color:#e40012;

    font-size:64px;

    font-weight:bold;

    line-height:1.2;

    z-index:1;

}

.hero-title > span::after{

    content:"";

    position:absolute;

    left:-6px;

    right:-6px;

    bottom:8px;

    height:24px;

    background:var(--marker);

    z-index:-1;

}

.hero-notice{

    color:#d70000;

    font-weight:bold;

    margin-bottom:15px;

}

.hero-description{

    color:#666;

    margin-bottom:45px;

}

.hero-image{

    max-width:900px;

    margin:auto;

}

.hero-image img{

    border-radius:10px;

}

.date-unit{

    font-size:0.45em;

    vertical-align:baseline;

}


.date-week{

    font-size:0.45em;

    margin-left:5px;

    vertical-align:baseline;

}

/* ======================================================
   Target
====================================================== */

.target-section{

    background:#fff;

}

.target-box{

    background:#fffdf0;

    border:3px solid #f5a623;

    border-radius:8px;

    padding:35px;

}

.target-list{

    display:grid;

    gap:18px;

}

.target-list li{

    position:relative;

    padding-left:24px;

}

.target-list li::before{

    content:"■";

    position:absolute;

    left:0;

    color:#004ea2;

}
/* =====================================
   Target Sub List
===================================== */

.target-sub-list{

    margin-top:15px;

    margin-left:25px;

}


.target-sub-list li{

    position:relative;

    padding-left:18px;

    margin-bottom:8px;

}


.target-sub-list li::before{

    content:"・";

    position:absolute;

    left:0;

    color:#333;

    font-size:18px;

}

/* ======================================================
   STEP
====================================================== */

.flow-section{

    background:#fafafa;

}

.flow-list{

    display:flex;

    flex-direction:column;

    gap:20px;

}

.flow-item{

    display:flex;

    border:1px solid #ddd;

    background:#fff;

    overflow:hidden;

    border-radius:8px;

}

.flow-step{

    width:180px;

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:22px;

    font-weight:bold;

    position:relative;

}

/* =====================================
   Flow Down Arrow
===================================== */

.flow-item{

    position:relative;

    overflow:visible;

}


.flow-step{

    position:relative;

}

.flow-step::after{

    content:"";

    position:absolute;

    left:50%;

    bottom:-25px;

    transform:translateX(-50%);


    width:0;

    height:0;


    border-left:35px solid transparent;

    border-right:35px solid transparent;

    border-top:35px solid var(--blue-1);

    z-index:5;

}

.flow-item:nth-child(1) .flow-step{

    background:var(--blue-1);

}

.flow-item:nth-child(2) .flow-step{

    background:var(--blue-2);

}

.flow-item:nth-child(3) .flow-step{

    background:var(--blue-3);

}

.flow-item:nth-child(4) .flow-step{

    background:var(--blue-4);

}

.flow-item:nth-child(5) .flow-step{

    background:var(--blue-5);

}

.flow-item:nth-child(1) .flow-step::after{

    border-top-color:var(--blue-1);

}


.flow-item:nth-child(2) .flow-step::after{

    border-top-color:var(--blue-2);

}


.flow-item:nth-child(3) .flow-step::after{

    border-top-color:var(--blue-3);

}


.flow-item:nth-child(4) .flow-step::after{

    border-top-color:var(--blue-4);

}


.flow-item:nth-child(5) .flow-step::after{

    border-top-color:var(--blue-5);

}

.flow-item:nth-child(6) .flow-step{
    background:var(--blue-6);
}

.flow-item:nth-child(6) .flow-step::after{
    border-top-color:var(--blue-6);
}

/* =====================================
   STEP６ 最終ステップの矢印非表示
===================================== */

.flow-item:last-child .flow-step::after{

    display:none;

}

.flow-content{

    flex:1;

    padding:35px 40px;

}

.flow-content h3{

    font-size:24px;

    margin-bottom:10px;

}

@media (max-width:767px){

    .flow-step::after{

        bottom:-28px;

        border-left-width:28px;

        border-right-width:28px;

        border-top-width:28px;

        display:block;
    }

    /* PCで消したSTEP6の矢印を復活 */

    .flow-item:last-child .flow-step::after{

        display:block;

    }

}
/* =====================================
   STEP1 Card Image
===================================== */

.flow-step1-content{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:30px;

}


.flow-text{

    flex:1;

}


.flow-card-image{

    width:220px;

    flex-shrink:0;

}


.flow-card-image img{

    width:100%;

}
@media(max-width:767px){


    .flow-step1-content{

        display:block;

    }


    .flow-card-image{

        width:80%;

        max-width:260px;

        margin:25px auto 0;

    }


    .flow-step::after{
           
        bottom:-28px;

        border-left-width:28px;

        border-right-width:28px;

        border-top-width:28px;

    }


}
/* ======================================================
   Tablet
====================================================== */

@media (max-width:1023px){

.section-title{

    font-size:28px;

}

.hero-title > span{

    font-size:38px;

}

.hero-image{

    max-width:700px;

}

.flow-step{

    width:150px;

}

}


/* ======================================================
   Smartphone
====================================================== */

@media (max-width:767px){

section{

    padding:55px 0;

}

.container{

    padding:0 16px;

}

.section-title{

    font-size:24px;

    margin-bottom:35px;

}

.hero-subtitle{

    font-size:22px;

}

.hero-title > span{

    font-size:38px;

}

.hero-title span::after{

    height:18px;

    bottom:6px;

}

.hero-description{

    margin-bottom:30px;

}

.date-unit,
.date-week{

    font-size:0.45em;

}

.hero-title > span::after{

    height:24px;

}

.hero-title > span::after{

    height:14px;

    bottom:5px;

    left:-4px;

    right:-4px;
}

/* ---------- Target ---------- */

.target-box{

    padding:20px;

}

.target-list li{

    font-size:15px;

}

/* ---------- STEP ---------- */

.flow-item{

    display:block;

}

.flow-step{

    width:100%;

    min-height:70px;

}

.flow-step::after{

    content:"";

    position:absolute;

    left:50%;

    top:100%;

    transform:translateX(-50%);

    width:0;
    height:0;

    border-left:18px solid transparent;
    border-right:18px solid transparent;
    border-top:18px solid currentColor;

    border-bottom:none;

}

.flow-content{

    padding:30px 20px 20px;

}

.flow-content h3{

    font-size:18px;

}

}

/* タイトル */

.title_content {
    background-color: #e9f3fa;
    color: #585858;
    border-bottom: 7px solid #e2f1cf;
}

.title_text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    height: 100%;
}
/* ======================================================
   Schedule
====================================================== */

.schedule-section{

    background:#fff;

}

.schedule-wrapper{

    display:grid;

    grid-template-columns:1fr 420px;

    gap:60px;

    align-items:center;

}

.schedule-content p{

    margin-bottom:30px;

    color:#666;

}

.schedule-image{

    text-align:center;

}

.schedule-image img{

    max-width:100%;

}

/* ======================================================
   New Card
====================================================== */

.newcard-section{

    background:#f8fbfd;

    padding:80px 0;

}

.newcard-intro{

    margin-bottom:50px;

}

.newcard-item{

    display:grid;

    grid-template-columns:48% 52%;

    gap:40px;

    align-items:center;

    margin-bottom:60px;

}

.newcard-image{

    display:flex;

    justify-content:center;

    align-items:center;

}

.newcard-image img{

    display:block;

    width:100%;

    max-width:420px;

    height:auto;

}

.newcard-content h3{

    font-size:24px;

    margin-bottom:20px;

}

.newcard-content ul{

    background:#f5f5f5;

    padding:20px 25px;

    margin:0;

}

.newcard-content ul ul{

    background:none;

    padding:10px 0 0 20px;

}

.newcard-content li{

    margin-bottom:8px;

}

.newcard-button{

    margin-top:30px;

}

.newcard-button .btn-green{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-width:260px;

}


@media (max-width:767px){

    .newcard-item{

        display:block;

        margin-bottom:50px;

    }

    .newcard-item:last-of-type{

        display:flex;

        flex-direction:column-reverse;

    }

    .newcard-image{

        margin-bottom:25px;

    }

    .newcard-content h3{

        font-size:20px;

    }

    .newcard-button{

        text-align:center;

    }

}

/* ======================================================
   Important
====================================================== */

.important-section{

    background:#fff;

}

.important-list{

    display:flex;

    flex-direction:column;

    gap:24px;

}

.important-item{

    padding:30px;

    border:1px solid #e5e5e5;

    border-left:8px solid #004ea2;

    border-radius:8px;

    background:#fff;

}

.important-item h3{

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:10px;

    font-size:22px;

}

.button-area{

    margin-top:50px;

    text-align:center;

}

/* =====================================
   Important Icon
===================================== */

.important-icon{

    width:38px;

    height:38px;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

}


.important-icon img{

    width:100%;

    height:100%;

    object-fit:contain;

}
/* ======================================================
   Button
====================================================== */

.btn-green{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    min-width:280px;

    padding:18px 36px;

    border-radius:10px;

    background:#004ea2 !important;

    color:#fff !important;

    font-weight:bold;

    transition:.3s;

}

.btn-green:hover{

    background:var(--green-dark);

    transform:translateY(-3px);

}

/* =====================================
   Premium CTA Button (Blue)
===================================== */

.cta-section{

    padding:70px 0;

}


.btn-blue{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;


    width:100%;


    padding:26px 40px;


    background:

    linear-gradient(
        135deg,
        #2f75c8,
        #164a8a
    );


    color:#fff;


    font-size:22px;

    font-weight:bold;


    letter-spacing:.03em;


    border-radius:12px;


    box-shadow:

    0 10px 25px rgba(22,74,138,.25);


    transition:

    transform .3s ease,

    box-shadow .3s ease;


    overflow:hidden;

}



/* 上品な光沢 */

.btn-blue::before{

    content:"";


    position:absolute;


    top:0;

    left:-120%;


    width:60%;


    height:100%;


    background:

    linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,.25),
        transparent
    );


    transform:skewX(-20deg);


    transition:.7s;

}


.btn-blue:hover::before{

    left:140%;

}


/* ホバー */

.btn-blue:hover{

    transform:translateY(-3px);


    box-shadow:

    0 15px 35px rgba(22,74,138,.35);

}
@media(max-width:767px){


    .btn-blue{

        padding:20px 18px;

        font-size:16px;

        line-height:1.6;

        border-radius:10px;

        text-align:center;

    }


}

/* ======================================================
   CTA
====================================================== */

.cta-section{

    padding:50px 0;

}


/* ======================================================
   FAQ
====================================================== */

.faq-section{

    background:#fff;

}

.faq-item{

    border:1px solid var(--border);

    border-radius:8px;

    overflow:hidden;

    margin-bottom:16px;

}

.faq-item summary{

    position:relative;

    cursor:pointer;

    list-style:none;

    padding:22px 60px 22px 24px;

    font-weight:bold;

    background:#fff;

}

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

    display:none;

}

.faq-item summary::after{

    content:"+";

    position:absolute;

    right:24px;

    top:50%;

    transform:translateY(-50%);

    font-size:28px;

    transition:.3s;

}

.faq-item[open] summary::after{

    transform:translateY(-50%) rotate(45deg);

}

.faq-answer{

    padding:24px;

    border-top:1px solid #eee;

    background:#fafafa;

}
/* =====================================
   FAQ
===================================== */


.faq-item{

    border:1px solid #ddd;

    border-radius:8px;

    overflow:hidden;

    margin-bottom:16px;

    background:#fff;

}


/* 質問 */

.faq-item summary{

    position:relative;

    display:flex;

    align-items:center;


    cursor:pointer;


    list-style:none;


    padding:22px 60px 22px 65px;


    font-weight:bold;

    font-size:18px;


    background:#fff;

}


/* Qマーク */

.faq-item summary::before{

    content:"Q";


    position:absolute;


    left:20px;


    top:50%;


    transform:translateY(-50%);


    display:flex;


    justify-content:center;

    align-items:center;


    width:32px;

    height:32px;


    border-radius:50%;


    background:#6eba44;


    color:#fff;


    font-size:18px;


    font-weight:bold;

}


/* 開閉アイコン */

.faq-item summary::after{

    content:"+";


    position:absolute;


    right:25px;


    top:50%;


    transform:translateY(-50%);


    font-size:28px;


    color:#6eba44;


    transition:.3s;

}


.faq-item[open] summary::after{

    transform:translateY(-50%) rotate(45deg);

}



/* 回答 */

.faq-answer{

    position:relative;


    padding:22px 60px 22px 65px;


    border-top:1px solid #eee;


    background:#fafafa;


}


/* Aマーク */

.faq-answer::before{

    content:"A";


    position:absolute;


    left:20px;


    top:22px;


    display:flex;


    justify-content:center;

    align-items:center;


    width:32px;

    height:32px;


    border-radius:50%;


    background:#d70000;


    color:#fff;


    font-size:18px;


    font-weight:bold;

}

/* ==========================================================
   Contact
========================================================== */

.contact-section{

    background:#fff;

}

.contact-box{

    background:#fffdd8;

    border:2px solid #ddd49d;

    padding:55px 40px;

    text-align:center;

    border-radius:10px;

}

.contact-box h2{

    font-size:40px;

    color:#555;

}

.contact-phone{

    color:#e30000;

    font-size:50px;

    font-weight:700;

    margin:25px 0;

}

.contact-time{

    font-size:22px;

    font-weight:bold;

}

.contact-note{

    margin-top:25px;

    color:#666;

    font-size:15px;

}
/* ======================================================
   Fade Animation
====================================================== */

.fade-up{

    opacity:0;

    transform:translateY(40px);

    transition:.8s;

}

.fade-up.show{

    opacity:1;

    transform:none;

}


/* ======================================================
   Tablet
====================================================== */

@media (max-width:1023px){

.schedule-wrapper{

    grid-template-columns:1fr;

    gap:40px;

}

.newcard-wrapper{

    grid-template-columns:1fr;

    gap:40px;

}

.newcard-image{

    order:-1;

}

.contact-phone{

    font-size:40px;

}

}


/* ======================================================
   Smartphone
====================================================== */

@media (max-width:767px){

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

section{

    padding:50px 0;

}

.container{

    padding:0 16px;

}

/* ---------- Schedule ---------- */

.schedule-wrapper{

    grid-template-columns:1fr;

    gap:30px;

}

.schedule-content{

    text-align:center;

}

.schedule-image{

    width:100%;

}

.schedule-image img{

    max-width:320px;

    margin:0 auto;

}

/* ---------- New Card ---------- */

.newcard-wrapper{

    grid-template-columns:1fr;

    gap:30px;

}

.newcard-content{

    text-align:center;

}

.newcard-image img{

    max-width:300px;

    margin:0 auto;

}

/* ---------- Important ---------- */

.important-item{

    padding:20px;

}

 .important-item h3{

    font-size:18px;

    gap:10px;

}


.important-icon{

    width:32px;

    height:32px;

}

.important-item p{

    font-size:15px;

}

/* ---------- Button ---------- */

.btn-green{

    width:100%;

    min-width:auto;

    padding:16px;

}

.btn-blue{

    width:100%;

    padding:18px 14px;

    font-size:16px;

    line-height:1.5;

    text-align:center;

}

/* ---------- FAQ ---------- */

.faq-item summary{

    padding:18px 50px 18px 55px;

    font-size:16px;

}


.faq-answer{

    padding:18px 20px 18px 55px;

    font-size:15px;

}


.faq-item summary::before,
.faq-answer::before{

    left:15px;

    width:28px;

    height:28px;

    font-size:16px;

}

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


.contact-box{

    padding:35px 20px;

}

.contact-box h2{

    font-size:28px;

}

.contact-phone{

    font-size:34px;
    line-height:1.3;

}

.contact-time{

    font-size:17px;

}

.contact-note{

    font-size:14px;

}

/* ---------- 横スクロール防止 ---------- */

img{

    max-width:100%;

    height:auto;

}

table{

    display:block;

    overflow-x:auto;

}

iframe{

    max-width:100%;

}

}
/* =====================================
   Title Underline Common
===================================== */

.title_underline{

    position:relative;

    display:block;

    width:fit-content;

    margin:0 auto;

    padding-bottom:15px;

}


.title_underline::after{

    content:"";

    position:absolute;

    bottom:0;

    left:50%;

    transform:translateX(-50%);

    width:70px;

    height:3px;

    background-color:#004ea2;

    border-radius:2px;

}


.hero-subtitle{

    margin:0;

}

.title_underline .section-title{

    margin-bottom:0;

}

.list-inside{
    position:relative;
    list-style:none;
    padding-left:1.2em;
}

.list-inside::before{
    content:"・";
    position:absolute;
    left:0;
    top:0;
}

.bg-gray {
    background-color: #F9F9F9;
    padding: 10px;
    text-align: left;
}

.text-red {
    color: #b22222;
}

.business-card-list{
    list-style: none;
    padding-left: 0;
}

.business-card-list > li{
    position: relative;
    padding-left: 1.4em;
}

.business-card-list > li::before{
    content: "〇";
    position: absolute;
    left: 0;
    top: 0;
}