@charset "utf-8";

body {
    margin: 0;
    color: #222222;
    font-size: 16px;
    font-family: "fot-tsukubrdgothic-std", sans-serif;
    font-weight: 700;
    font-style: normal;
    line-height: 1.8;
    letter-spacing: .1em;
}

:root {
    --black: #222222;
    --white: #ffffff;
    --green: #007d89;
    --lightgreen: #a3d0d4;
    --yellow: #f6efc2;
    --lightblue: #d3edf5;
    --lightgray: #eeeeee;
}

/*メディアクエリ*/
.is-sp {
    display: none;
}
@media screen and (max-width: 768px) { /*レスポンシブ対応（TAB・SP）*/
    
}
@media screen and (max-width: 576px) { /*レスポンシブ対応（SP）*/
    .is-pc {
        display: none;
    }
    .is-sp {
        display: block;
    }
}

/*骨組み*/
.wrapper{
  max-width: 1200px;
  margin: 0 auto;
}
.container-910 {
    max-width: 910px;
    margin: 0 auto;
}
.container-860 {
    max-width: 860px;
    margin: 0 auto;
}
.container-780 {
    max-width: 780px;
    margin: 0 auto;
}
.box-container {
    display: block;
}
.col-container {
    display: flex;
    gap: 2.5rem;
}
.width-70 {
    width: 70%;
}
.width-50 {
    width: 50%;
}
.width-40 {
    width: 40%;
}
.col-60 {
    width: 60%;
}
.col-50 {
    width: 50%;
}
.col-40 {
    width: 40%;
}
.col-30 {
    width: 30%;
}
.col-25 {
    width: 25%;
}
.col-20 {
    width: 20%;
}
.m-auto {
    margin: 0 auto;
}
.mb-50 {
    margin-bottom: 5.0rem;
}
.mb-30 {
   margin-bottom: 3.0rem; 
}
.mb-15 {
    margin-bottom: 1.5rem;
}
.mb-05 {
    margin-bottom: 0.5rem;
}
.mt-50 {
    margin-top: 5.0rem;
}
.mt-30 {
    margin-top: 3.0rem;
}
.p-30 {
    padding: 3.0rem;
}
.p-15 {
    padding: 1.5rem;
}
.ptb-50 {
    padding-top: 5.0rem;
    padding-bottom: 5.0rem;
}
.ptb-30 {
    padding-top: 3.0rem;
    padding-bottom: 3.0rem;
}
.ptb-05 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}
.plr-15 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}
.pt-30 {
    padding-top: 3.0rem;
}
.pb-15 {
    padding-bottom: 1.5rem;
}
.d-table {
    display: table;
}
.v-align {
    display: table-cell;
    vertical-align: middle;
}
.radius-50 {
    border-radius: 50px;
}
.radius-15 {
    border-radius: 15px;
}
@media screen and (max-width: 576px) { /*レスポンシブ対応（SP）*/
    .wrapper , .container-910 , .container-860 , .container-780 {
        max-width: 576px;
        width: 95%;
    }
    .col-container {
        display: block;
        gap: 0;
    }
    .col-sp-container {
        display: flex;
        gap: .5rem;
    }
    .width-70 , .width-50 , .width-40 , .col-60 , .col-50 , .col-40 , .col-30 , .col-25 , .col-20 {
        width: 100%;
    }
    .col-sp-50 {
        width: 50%;
    }
    .m-sp-auto {
        margin: 0 auto;
    }
    .mb-sp-30 {
        margin-bottom: 3.0rem;
    }
    .mb-sp-15 {
        margin-bottom: 1.5rem;
    }
    .mb-sp-05 {
        margin-bottom: 0.5rem;
    }
    .ptb-sp-30 {
        padding-top: 3.0rem;
        padding-bottom: 3.0rem;
    }
    
}


/*テキスト*/
h2 {
    font-size: 2.5rem;
    line-height: 1.4;
    color: var(--green);
}
.h2 {
    font-size: 2.0rem;
    line-height: 1.4;
}
h3 , .h3 {
    font-size: 1.5rem;
    line-height: 1.4;
}
.h4 {
    font-size: 1.25rem;
    line-height: 1.4;
}
.ref {
    font-size: 0.8rem;
    line-height: 1.4;
}
.a-text {
    color: var(--black);
    text-decoration: underline;
}
.center {
    text-align: center;
}
.black {
    color: var(--black);
}
.white {
    color: var(--white);
}
.green {
    color: var(--green);
}
@media screen and (max-width: 576px) { /*レスポンシブ対応（SP）*/
    h2 {
        font-size: 2.0rem;
    }
    .h2 {
        font-size: 1.75rem;
    }
    h3 , .h3 {
        font-size: 1.25rem;
    }
    .h4 {
        font-size: 1.0rem;
    }
    .ref-sp {
        font-size: .8rem;
    }
    .center-sp {
        text-align: center;
    }
}

/*画像*/
.img-100 {
    width: 100%;
}
.img-80 {
    width: 80%;
}

@media screen and (max-width: 576px) { /*レスポンシブ対応（SP）*/
    .img-sp-100 {
        width: 100%;
    }
    .img-sp-80 {
        width: 80%;
    }
}

/*カラー*/
.back-white {
    background-color: var(--white);
}
.back-green {
    background-color: var(--green);
}
.back-lightgreen {
    background-color: var(--lightgreen);
}
.back-yellow {
    background-color: var(--yellow);
}
.back-lightblue {
    background-color: var(--lightblue);
}
.back-lightgray {
    background-color: var(--lightgray);
}
.back-headerback {
    background-image: url(../img/top2025/header-back-pc.png);
    background-size: cover;
    background-repeat: no-repeat;
}
@media screen and (max-width: 576px) { /*レスポンシブ対応（SP）*/
    .back-headerback {
        background-image: url(../img/top2025/header-back-sp.png);
    }
}

/*ヘッダー*/
header {
    width: 100%;
    padding-top: 5.0rem;
}
.header-container {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}
.header-container img {
    width: 100%;
}

@media screen and (max-width: 768px) { /*レスポンシブ対応（TAB・SP）*/
    
}
@media screen and (max-width: 576px) { /*レスポンシブ対応（SP）*/
    header {
        padding-bottom: 1.5rem;
    }
    .header-container {
        max-width: 576px;
    }
    .header-img-sp-text {
        width: 85% !important;
        margin: 0 auto;
    }
}

/*ヘッダー*/
.button-green {
    position: relative;
    text-align: center;
    padding: .5rem 0;
    border-radius: 50px;
    font-size: 1.25rem;
    line-height: 1.4;
    color: var(--white);
    background-color: var(--green);
    box-shadow: 0 .25rem .5rem .25rem rgba(0, 125, 137,0.3);
}
.button-green::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 2.0rem;
    transform: translateY(-50%);
    width: 1.5rem;
    height: 1.5rem;
    background: url(../img/top2025/arrow-white.png) no-repeat center center;
    background-size: contain;
    transition: 5s;
}
.button-white {
    position: relative;
    text-align: center;
    padding: .5rem 0;
    border-radius: 50px;
    font-size: 1.25rem;
    line-height: 1.4;
    color: var(--green);
    border: 1px solid var(--green);
    background-color: var(--white);
    box-shadow: 0 .15rem .3rem .15rem rgba(0, 125, 137,0.3);
}
.button-white::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 2.0rem;
    transform: translateY(-50%);
    width: 1.5rem;
    height: 1.5rem;
    background: url(../img/top2025/arrow-green.png) no-repeat center center;
    background-size: contain;
}
.button-green:hover , .button-white:hover {
    box-shadow: none;
    transition: .5s;
}
.jfa::before {
    content: "";
    position: absolute;
    top: 50%;
    right: 5.0rem;
    transform: translateY(-50%);
    width: 4.5rem;
    height: 4.5rem;
    background: url(../img/top2025/logo-jfa.png) no-repeat center center;
    background-size: contain;
}
@media screen and (max-width: 768px) { /*レスポンシブ対応（TAB・SP）*/
    
}
@media screen and (max-width: 576px) { /*レスポンシブ対応（SP）*/
    .button-green {
        font-size: 1rem;
    }
    .button-green::after , .button-white::after {
        right: 1.0rem;
        width: 1.0rem;
        height: 1.0rem;
    }
    .jfa {
        font-size: 16px;
    }
    .jfa::before {
        right: 2.25rem;
        width: 2.5rem;
        height: 2.5rem;
    }
}

/*フッター*/
.footer {
    display: flex;
    justify-content: space-between;
    font-size: .8rem;
}
@media screen and (max-width: 576px) { /*レスポンシブ対応（SP）*/
    .footer {
        display: block;
        font-size: .6rem;
        text-align: center;
    }
}

/*リンクホバー*/

a:hover img {
    opacity: 0.9;
    transform: scale(1.05);
    transition: transform 0.3s, filter 0.3s;
}