@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Zen+Kaku+Gothic+New&display=swap');

:root {
    --width-ratio: 1px / 1;
    --width-ratio-pc: 100vw / 1440;
    --color-main: #428C67;
    --color-lightgreen: #6BB74F;
    --color-lightgreen2: #35A041;
    --color-yellowgreen: #D3DF8F;
    --color-text: #000;
    --color-creem: #FBF8E9;
    --font-Inter: 'Inter', sans-serif;
    --font-ZenKakuGothicNew: 'Zen Kaku Gothic New', sans-serif;
}

@media screen and (min-width: 1921px) {
    :root {
        /* --width-ratio-pc: 1.333px / 1; */
    }
}
@media screen and (max-width: 1440px) {
    :root {
        --width-ratio: 100vw / 1440;
        --width-ratio-pc: 1px / 1;
    }
}
@media screen and (max-width: 768px) {
    :root {
        --width-ratio: 100vw / 375;
        --width-ratio-pc: 1px / 375;
    }
}

* {
    box-sizing: border-box;
}
html {
    font-size: 62.5%; /* 10px = 1rem */
    overflow-x: hidden;
}
body {
    font-family: var(--font-ZenKakuGothicNew);
    color: var(--color-text);
    letter-spacing: 0;
    overflow-x: hidden;
}
img {
    width: 100%;
    height: auto;
    vertical-align: bottom;
}
a {
    color: var(--color-text);
    text-decoration: none;
    transition: 0.3s;
}
a:hover {
    opacity: 0.7;
}

@media screen and (max-width: 768px) {
    a:hover {
        opacity: 1;
    }
}

/*============================
ユーティリティー
============================*/
.u-pcb {
    display: block;
}
.u-pci {
    display: inline-block;
}
.u-pcf {
    display: flex;
}
.u-spb {
    display: none;
}
.u-spi {
    display: none;
}
.u-spf {
    display: none;
}
@media screen and (max-width: 768px) {
    .u-pcb {
        display: none;
    }
    .u-pci {
        display: none;
    }
    .u-pcf {
        display: none;
    }
    .u-spb {
        display: block;
    }
    .u-spi {
        display: inline;
    }
    .u-spf {
        display: flex;
    }
    .u-sp-mt-8 {
        margin-top: -8px;
    }
    .u-sp-mb16 {
        margin-bottom: 16px;
    }
}

/*============================
ラッパー
============================*/
.c-cntInner {
    max-width: 1380px;
    width: calc(100% - calc(60 *var(--width-ratio)));
    border-left: 1px solid var(--color-main);
    border-right: 1px solid var(--color-main);
    margin: 0 auto;
}

@media screen and (max-width: 768px) {
    .c-cntInner {
        width: calc(100% - calc(20 *var(--width-ratio)));
    }
}

/*============================
セクションタイトル
============================*/
.c-secTitle {
    font-size: 3.6rem;
    font-weight: 700;
    line-height: 1.75;
    color: var(--color-main);
}
.c-secTitle::before {
    content: '';
    display: block;
    width: 7.48rem;
    height: 1.32rem;
    background-image: url(../images/common/icon_section_top.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-bottom: 3.5rem;
}
.c-secTitle--center {
    text-align: center;
}
.c-secTitle--center::before {
    margin-left: auto;
    margin-right: auto;
}

@media screen and (max-width: 768px) {
    .c-secTitle {
        font-size: calc(20 *var(--width-ratio));
    }
    .c-secTitle::before {
        width: calc(48 *var(--width-ratio));
        height: calc(8.5*var(--width-ratio));
        margin-bottom: calc(16 *var(--width-ratio));
    }
}

/*============================
サブタイトル
============================*/
.c-subTitle {
    display: flex;
    align-items: flex-start;
    column-gap: 1.7rem;
    font-size: 3.2rem;
    font-weight: 700;
    line-height: 1.44;
    letter-spacing: 0.03em;
    color: var(--color-main);
}
.c-subTitle::before {
    content: '';
    display: block;
    width: 3rem;
    height: 2.4rem;
    background-image: url(../images/common/icon_subttl.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-top: 1.3rem;
}

@media screen and (max-width: 768px) {
    .c-subTitle {
        font-size: calc(20 *var(--width-ratio));
        line-height: 1.5;
        column-gap: calc(8 *var(--width-ratio));
    }
    .c-subTitle::before {
        width: calc(15 *var(--width-ratio));
        height: calc(12*var(--width-ratio));
        margin-top: calc(9*var(--width-ratio));
    }
}

/*============================
フェードインアニメーション
============================*/
.c-fadeIn {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}
.c-fadeIn.is-active {
    opacity: 1;
    transform: translateY(0);
}