:root {
    --wh: #fff;
    --bk: #000;
    --gy: #666;
    --gy_dark: #4d4d4d;
    --gy_right: #ddd;

    /* break point */
    --bp: 1000px;

    --mainColor: #0f8b43;
    --mainColor_dark: #007837;
    --mainColor_dark02: #006837;

    --mainColor_light: #008c55;
    --mainColor_light02: #52a07d;

    --subColor: #f3f3ed;
    --textColor: #0a0000;
    --secBg: #e6e6e6;
    --gy_line: #cccccc;

    --gradation: linear-gradient(45deg, rgba(50, 174, 70, 1), rgba(41, 161, 75, 1) 29%, rgba(5, 110, 94, 1) 84%, rgba(0, 104, 96, 1));
    --gradation_toRight: linear-gradient(to right, rgba(50, 174, 70, 1), rgba(41, 161, 75, 1) 29%, rgba(5, 110, 94, 1) 84%, rgba(0, 104, 96, 1));
    --gradation_environment: linear-gradient(to right, rgba(1, 151, 70, 1), rgba(0, 104, 55, 1));
    --slideMask: rgba(0, 60, 30, 0.6);
    --mainColor_10: rgba(15, 139, 67, 0.1);
    --mainColor_20: rgba(15, 139, 67, 0.2);
    --mainColor_30: rgba(15, 139, 67, 0.3);

    --container_max-width: 1000px;
    --container_width_light: 900px;
    --container_width_100: 100%;
    --container_width_sp: 90%;

    /* for font-size or margin,padding */
    --s_10-14: clamp(10px, 0.73vw, 14px);
    --s_12-16: clamp(12px, 0.83vw, 16px);
    --s_14-18: clamp(14px, 0.93vw, 18px);
    --s_16-20: clamp(16px, 1.04vw, 20px);
    --s_18-22: clamp(18px, 1.14vw, 22px);
    --s_20-24: clamp(20px, 1.25vw, 24px);
    --s_22-26: clamp(22px, 1.35vw, 26px);
    --s_24-28: clamp(24px, 1.45vw, 28px);
    --s_26-30: clamp(26px, 1.56vw, 30px);

    /* half size@sp */
    --s_2_half: clamp(1px, 0.1vw, 2px);
    --s_3_half: clamp(1.5px, 0.16vw, 3px);
    --s_4_half: clamp(2px, 0.21vw, 4px);
    --s_8_half: clamp(4px, 0.42vw, 8px);

    --s_10_half: clamp(5px, 0.52vw, 10px);
    --s_10_half: clamp(5px, 0.52vw, 10px);
    --s_11_half: clamp(5.5px, 0.57vw, 11px);
    --s_12_half: clamp(6px, 0.625vw, 12px);
    --s_14_half: clamp(7px, 0.73vw, 14px);
    --s_16_half: clamp(8px, 0.83vw, 16px);
    --s_18_half: clamp(9px, 0.93vw, 18px);

    --s_20_half: clamp(10px, 1.04vw, 20px);
    --s_22_half: clamp(11px, 1.14vw, 22px);
    --s_24_half: clamp(12px, 1.25vw, 24px);
    --s_25_half: clamp(12.5px, 1.3vw, 25px);
    --s_26_half: clamp(13px, 1.35vw, 26px);
    --s_28_half: clamp(14px, 1.45vw, 28px);

    --s_30_half: clamp(15px, 1.45vw, 30px);
    --s_32_half: clamp(16px, 1.67vw, 32px);
    --s_34_half: clamp(17px, 1.77vw, 34px);
    --s_36_half: clamp(18px, 1.87vw, 36px);
    --s_38_half: clamp(19px, 1.98vw, 38px);

    --s_40_half: clamp(20px, 2.08vw, 40px);
    --s_45_half: clamp(22.5px, 2.34vw, 45px);
    --s_46_half: clamp(23px, 2.4vw, 46px);
    --s_48_half: clamp(24px, 2.5vw, 48px);

    --s_50_half: clamp(25px, 2.6vw, 50px);
    --s_52_half: clamp(26px, 2.7vw, 52px);
    --s_55_half: clamp(27.5px, 2.86vw, 55px);

    --s_60_half: clamp(30px, 3.13vw, 60px);
    --s_68_half: clamp(34px, 3.54vw, 68px);

    --s_70_half: clamp(35px, 3.65vw, 70px);
    --s_78_half: clamp(39px, 4.06vw, 78px);

    --s_80_half: clamp(40px, 4.17vw, 80px);

    --s_90_half: clamp(45px, 4.69vw, 90px);
    --s_95_half: clamp(47.5px, 4.95vw, 95px);

    --s_100_half: clamp(50px, 5.2vw, 100px);
    --s_110_half: clamp(55px, 5.73vw, 110px);
    --s_116_half: clamp(58px, 6.04vw, 116px);
    --s_118_half: clamp(59px, 6.15vw, 118px);


    --s_120_half: clamp(60px, 6.25vw, 120px);

    --s_130_half: clamp(65px, 6.77vw, 130px);

    --s_150_half: clamp(75px, 7.81vw, 150px);


    --s_160_half: clamp(80px, 8.33vw, 160px);

    --s_200_half: clamp(100px, 10.42vw, 200px);
    --s_250_half: clamp(125px, 13vw, 250px);

    --s_300_half: clamp(150px, 15.6vw, 300px);
    --s_340_half: clamp(170px, 17.7vw, 340px);

    --s_400_half: clamp(200px, 20.8vw, 400px);

    --h1: clamp(14px, 1.25vw, 24px);
    --h2: clamp(25px, 2.08vw, 40px);
    --h3: clamp(17px, 1.82vw, 35px);
    --h4: clamp(, , );
    --h5: clamp(, , );
    --h6: clamp(, , );

    /* gradation */
    --textGradation: linear-gradient(45deg, rgba(50, 174, 70, 1), rgba(41, 161, 75, 1) 29%, rgba(5, 110, 94, 1) 84%, rgba(0, 104, 96, 1));

    /* transition */
    --transition: 0.7s;
    --transition03: 0.3s;
    --transition02: 0.2s;

    /* letter-spacing */
    --ls-name: 0.16em;
    --ls-intro: 0.14em;
    --ls-title: 0.12em;
    --ls-sub: 0.1em;
    --ls-discription: 0.08em;
    --ls-deco: 0.06em;
    --ls-item: 0.04em;
    --ls-lead: 0.02em;

}

& html:focus-within {
    scroll-behavior: smooth;
}

/* sp width adjustment */
.w_sp {
    width: var(--container_width_sp);
    margin: 0 auto;
}

.sp_only {
    display: block;

    @media screen and (min-width:1000px) {
        display: none;
    }
}

.pc_only {
    display: none;

    @media screen and (min-width:1000px) {
        display: block;
    }
}

/* text-align */
.ta-center_pc {
    text-align: justify;

    @media screen and (min-width:1000px) {
        text-align: center;
    }
}

/* font-family */
& body {
    font-family: "Noto Sans JP", sans-serif;
}

.ja_mincho {
    font-family: "Noto Serif JP", serif;
    font-style: normal;
}

.ja_gothic {
    font-family: "Gothic A1", sans-serif;
    font-style: normal;
}

.en_sansserif,
.number {
    font-family: "Roboto Condensed", sans-serif;
}

.en_serif {
    font-family: "Noto Serif JP", serif;
}

.sec-title {
    font-optical-sizing: auto;
    font-weight: 100;
}

/* color */
.c_wh {
    color: var(--wh);
}

.c_mainColor_dark02,
.mainColor_dark02 {
    color: var(--mainColor_dark02);
}

.bg_wh {
    background-color: var(--wh);
}

/* font-weight */
.fw_bold {
    font-weight: bold;
}

/* gradation */
.bg_gradation {
    background-image: linear-gradient(45deg, rgba(50, 174, 70, 1), rgba(41, 161, 75, 1) 29%, rgba(5, 110, 94, 1) 84%, rgba(0, 104, 96, 1));
}

.bg_gray {
    background-color: var(--footerBg);
}

/* responsive width */
& div[class*="-inner"],
.inner {
    max-width: 1720px;
    width: 84%;
    margin: 0 auto;

    &.w100 {
        max-width: 100%;
        width: 100%;
        margin: 0 auto;
    }
}

/* content size */
.content-wrapper_694 {
    max-width: 694px;
    padding: 0 20px;
    margin: 0 auto;

    &.w100 {
        max-width: 100%;
        width: 100%;
        margin: 0 auto;
    }
}

.content-wrapper_920 {
    max-width: 920px;
    width: 84%;
    margin: 0 auto;

    &.w100 {
        max-width: 100%;
        width: 100%;
        margin: 0 auto;
    }
}

.content-wrapper_1110 {
    max-width: 1110px;
    width: 84%;
    margin: 0 auto;

    &.w100 {
        max-width: 100%;
        width: 100%;
        margin: 0 auto;
    }
}

.content-wrapper_1440 {
    max-width: 1440px;
    width: 84%;
    margin: 0 auto;

    &.w100 {
        max-width: 100%;
        width: 100%;
        margin: 0 auto;
    }
}

.content-wrapper_1440_sp-wide {
    max-width: 1440px;
    width: 94%;
    margin: 0 auto;

    &.w100 {
        max-width: 100%;
        width: 100%;
        margin: 0 auto;
    }
}

.content-wrapper_1720 {
    max-width: 1720px;
    width: 84%;
    margin: 0 auto;

    &.w100 {
        max-width: 100%;
        width: 100%;
        margin: 0 auto;
    }
}

/* .main-inner.w100 {
    max-width: 100%;
    width: 100%;
} */

& div[class*="narrowest"] {
    max-width: 1440px;
    width: 100%;
    margin: 0 auto;
}

/* letter-spacing */
[class*="name"],
.name {
    letter-spacing: var(--ls-name);
}

[class*="intro"],
.intro {
    letter-spacing: var(--ls-name);
}

[class*="title"],
.title {
    letter-spacing: var(--ls-title);
}

[class*="sub"],
.sub {
    letter-spacing: var(--ls-sub);
}

[class*="disc"] {
    letter-spacing: var(--ls-discription);
}

[class*="deco"] {
    letter-spacing: var(--ls-deco);
}

[class*="lead"],
.lead {
    letter-spacing: var(--ls-lead);
    line-height: 2;
}

[class*="item"],
.item {
    letter-spacing: var(--ls-item);
}

.text-gradation {
    background: var(--textGradation);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.en-title {
    font-size: var(--font_10xl_half);
    line-height: 1.2;
    font-style: italic;
}

.w100_m {
    max-width: 90%;
    width: 100%;
    margin: 0 auto;
}

.sec-inner {
    max-width: var(--container_max-width);
    width: var(--container_width_sp);
    margin: 0 auto;

    @media screen and (min-width:1000px) {
        max-width: 100%;
        width: 100%;
    }
}

.img-wrapper img {
    width: 100%;
}

/*アニメーション要素のスタイル*/
.fadeIn {
    opacity: 0;
    transform: translateY(20px);
    /* 下に30pxの位置から */
    transition: opacity .8s, transform .8s;
    /* 透過率と縦方向の移動を0.8秒 */
}

.fadeIn.is-show {
    opacity: 1;
}

/*アニメーション要素のスタイル*/
.inview {
    opacity: 0;
    transform: translateY(20px);
    transition-duration: 1s;
    transition-delay: 0s;
}

.inview.is-show {
    opacity: 1;
    transform: translateY(0);
    transition-duration: 1s;
    transition-delay: 0s;
}

/*アニメーション要素までスクロールした時のスタイル*/
.active {
    opacity: 1;
    transition: all 2s ease-in-out;
    /* transform: translate(0, 0); */
    transition-duration: 1.5s;
    transition-delay: 0s;
}

.content-wrapper {
    .content {
        & h1 {
            /* font-size: var(--h1); */
            margin-bottom: 20px;
        }

        & h2 {
            /* font-size: var(--h2); */
            font-size: 22px;
            line-height: 1.5;
            padding: .3em 0;
            border-bottom: 2px solid #181818;
            margin: 2em 0 1em;
        }

        & h3 {
            /* font-size: var(--h3); */
            margin: 2em 0;
        }

        & h4 {
            /* font-size: var(--h4); */
        }

        & h5 {
            /* font-size: var(--h5); */
        }

        & h6 {
            /* font-size: var(--h6); */
        }

        & h1,
        & h2,
        & h3,
        & h4,
        & h5,
        & h6 {
            line-height: 1.2em;
        }

        & p {
            line-height: 1.75em;
            font-size: 14px;
        }

        & li {
            line-height: 1.5em;
            font-size: 14px;
        }

        & figure {
            margin-bottom: 30px;
        }
    }
}