@charset "UTF-8";

/*
common variables
----------------------------------------------------------- */
:root {
     /* プライマリーカラー - #70C498を基準 */
    --primary-color: #70C498;
    --primary-hover-color: #5DB085;
    --primary-light-color: #B8E0C7;
    --on-primary-color: #FFFFFF;

    /* セカンダリーカラー - 緑系統 */
    --secondary-color: #52B788;
    --secondary-hover-color: #40916C;
    --on-secondary-color: #FFFFFF;

    /* アクセントカラー */
    --accent-color: #A4D65E;
    --accent-hover-color: #8BC34A;
    --on-accent-color: #1B4332;

    /* 背景色 */
    --bg-color: #e9f5f2;
    --light-bg-color: #ecf5f4;
    --surface-color: #FFFFFF;
    --bg-muted-color: #e0fdfe;

    /* テキストカラー */
    --text-color: #1B4332;
    --dark-text-color: #081C15;
    --text-secondary-color: #2D5A3D;
    --text-muted-color: #52796F;

    /* その他 */
    --border-color: #e2f0ed;
    --white-color: #FFFFFF;
    --black-color: #000000;

    --primary: var(--primary-color);
    --secondary: var(--secondary-color);
    --text: var(--dark-text-color);
    --white: var(--white-color);
    --highlight: var(--accent-color);
    --border: #ddd;

    --rgb-primary-color: 3, 40, 41;
    --rgb-accent-color: 250, 204, 21;

    /* Fonts */
    --font-base:"Noto Sans JP", "Helvetica Neue", "Segoe UI", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    --font-xs: 0.666em; /* 約12px if base is 18px */
    --font-s: 0.777em;  /* 約14px */
    --font-m: 1.333em;  /* 約24px */
    --font-l: 2.222em;  /* 約40px */
    --font-xl: 3.333em; /* 約60px */
}

/*
Base Settings
----------------------------------------------------------- */
html {
    font-size: 62.5%;
}
body {
    font-family: var(--font-base);
    font-size: 1.8rem;
    line-height: 1.65;
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    word-break: break-all;
    overflow-wrap: break-word;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}
h1, h2, h3 {
    line-height: 1.4;
    margin: 0;
    padding: 0;
}

/*
c-img-hover（枠固定のままズーム＋明るさアップ）
----------------------------------------------------------- */
.c-img-hover {
    display: block;
    overflow: hidden;
}
.c-img-hover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease, filter 0.4s ease;
}
.c-img-hover:hover img {
    transform: scale(1.08);
    filter: brightness(1.1);
}

/*
Helper Classes
----------------------------------------------------------- */
.m0a { margin: 0 auto; }
.posr { position: relative; }
.imgr { display: block; max-width: 100%; height: auto; }
.fdrr { flex-direction: row-reverse; }
/* Text Utilities */
.fwb { font-weight: bold !important; }
.underline { text-decoration: underline; }
.font-xs { font-size: var(--font-xs); }
.font-s { font-size: var(--font-s); }
.font-m { font-size: var(--font-m); }
.font-l { font-size: var(--font-l); }
.font-xl { font-size: var(--font-xl); }
.ta-c { text-align: center !important; }
.ta-l { text-align: left !important; }
.ta-r { text-align: right !important; }
.font-min { font-family: "Yu Mincho", YuMincho, "MS Mincho", serif; }
.font-go { font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "游ゴシック体", YuGothic, "YuGothic M", sans-serif; }
.indent { text-indent: -1em; padding-left: 1em; }
.shadow { text-shadow: 0 0 3px #fff,0 0 3px #fff,0 0 3px #fff; }
/* Note Style */
.note {
    position: relative;
    font-size: 0.777em;
    padding-left: 1em;
}
.note:before {
    position: absolute;
    content: "※";
    top: 0;
    left: 0;
    font-size: 1em;
    line-height: 1.554em;
}

/*
Margin & Padding Utilities
----------------------------------------------------------- */
.mt-0{margin-top: 0;} .mt-5{margin-top: 5px;} .mt-10{margin-top: 10px;} .mt-15{margin-top: 15px;}
.mt-20{margin-top: 20px;} .mt-30{margin-top: 30px;} .mt-45{margin-top: 45px;} .mt-60{margin-top: 60px;}
.mt-75{margin-top: 75px;} .mt-90{margin-top: 90px;} .mt-120{margin-top: 120px;}
.mb-0{margin-bottom: 0;} .mb-5{margin-bottom: 5px;} .mb-10{margin-bottom: 10px;} .mb-15{margin-bottom: 15px;}
.mb-20{margin-bottom: 20px;} .mb-30{margin-bottom: 30px;} .mb-45{margin-bottom: 45px;} .mb-60{margin-bottom: 60px;}
.mb-75{margin-bottom: 75px;} .mb-90{margin-bottom: 90px;} .mb-120{margin-bottom: 120px;}

.pt-0{padding-top: 0;} .pt-5{padding-top: 5px;} .pt-10{padding-top: 10px;} .pt-15{padding-top: 15px;}
.pt-20{padding-top: 20px;} .pt-30{padding-top: 30px;} .pt-45{padding-top: 45px;} .pt-60{padding-top: 60px;}
.pt-75{padding-top: 75px;} .pt-90{padding-top: 90px;} .pt-120{padding-top: 120px;}
.pb-0{padding-bottom: 0;} .pb-5{padding-bottom: 5px;} .pb-10{padding-bottom: 10px;} .pb-15{padding-bottom: 15px;}
.pb-20{padding-bottom: 20px;} .pb-30{padding-bottom: 30px;} .pb-45{padding-bottom: 45px;} .pb-60{padding-bottom: 60px;}
.pb-75{padding-bottom: 75px;} .pb-90{padding-bottom: 90px;} .pb-120{padding-bottom: 120px;}

.pl-0{padding-left: 0;} .pr-0{padding-right: 0;}
.ph-0{padding-left: 0; padding-right: 0;} .ph-15{padding-left: 15px; padding-right: 15px;}

@media (width < 768px) {
    .spmt-0{margin-top: 0;} .spmt-5{margin-top: 5px;} .spmt-10{margin-top: 10px;}
    .spmt-15{margin-top: 15px;} .spmt-20{margin-top: 20px;} .spmt-30{margin-top: 30px;}
    .spmt-45{margin-top: 45px;} .spmt-60{margin-top: 60px;}
    .spmb-0{margin-bottom: 0;} .spmb-5{margin-bottom: 5px;} .spmb-10{margin-bottom: 10px;}
    .spmb-15{margin-bottom: 15px;} .spmb-20{margin-bottom: 20px;} .spmb-30{margin-bottom: 30px;}
    .spmb-45{margin-bottom: 45px;} .spmb-60{margin-bottom: 60px;}

    .sppt-0{padding-top: 0;} .sppt-5{padding-top: 5px;} .sppt-10{padding-top: 10px;}
    .sppt-15{padding-top: 15px;} .sppt-20{padding-top: 20px;} .sppt-30{padding-top: 30px;}
    .sppt-45{padding-top: 45px;} .sppt-60{padding-top: 60px;}
    .sppb-0{padding-bottom: 0;} .sppb-5{padding-bottom: 5px;} .sppb-10{padding-bottom: 10px;}
    .sppb-15{padding-bottom: 15px;} .sppb-20{padding-bottom: 20px;} .sppb-30{padding-bottom: 30px;}
    .sppb-45{padding-bottom: 45px;} .sppb-60{padding-bottom: 60px;}

    .sppl-0 { padding-left: 0; }
    .sppr-0 { padding-right: 0; }
    .spph-0 { padding-left: 0; padding-right: 0; }
}

/*
Container Settings
----------------------------------------------------------- */
/* PC (1200px以上) */
@media (width >= 1200px) {
    .container {
        width: 1200px;
        margin: 0 auto;
        position: relative;
        padding-left: 15px;
        padding-right: 15px;
        box-sizing: border-box;
    }
    .p-none { display: none; }
    .pt-none { display: none; }
    .ps-none { display: none; }
    .t-none { display: block; }
    .ts-none { display: block; }
    .s-none { display: block; }
}
@media (768px <= width <= 1199px) {
/* Container */
.container {
    width: 100%;
    margin: 0 auto;
    position: relative;
    padding-left: 15px;
    padding-right: 15px;
    box-sizing: border-box;
}
/* Display Controls */
.p-none { display: block; }
.pt-none { display: none; }
.ps-none { display: block; }
.t-none { display: none; }
.ts-none { display: none; }
.s-none { display: block; }
}
@media (width < 768px) {
    /* Container */
    .container {
        margin-right: auto;
        margin-left: auto;
        padding-left: 15px;
        padding-right: 15px;
        box-sizing: border-box;
    }
    /* Display Controls */
    .p-none { display: block; }
    .pt-none { display: block; }
    .ps-none { display: none; }
    .t-none { display: block; }
    .ts-none { display: none; }
    .s-none { display: none; }
}

/*
Component Styles
----------------------------------------------------------- */
/* Page Top Button */
.pagetop {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-out, visibility 0.3s ease-out;
}
.pagetop a {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    background-color: transparent;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--primary);
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.pagetop a:hover {
    background-color: var(--primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}
.pagetop a i {
    color: var(--primary);
    font-size: 1.8rem;
    transition: color 0.3s ease;
}
.pagetop a:hover i {
    color: var(--white);
}

/*
Flexbox Support
----------------------------------------------------------- */
/* Base Flexbox */
.flex {
    --grid-gap: 30px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--grid-gap);
    width: 100%;
}
.flex > * {
    flex: 0 0 auto;
    box-sizing: border-box;
    word-break: break-all;
}
.flex.col-2 > * { width: calc(50% - var(--grid-gap) / 2); }
.flex.col-3 > * { width: calc((100% - var(--grid-gap) * 2) / 3); }
.flex.col-4 > * { width: calc((100% - var(--grid-gap) * 3) / 4); }
@media (768px <= width <= 1199px) {
    .flex { --grid-gap: 15px; }
    .flex.col-4 > * { width: calc((100% - var(--grid-gap)) / 2); }
}
@media (width < 768px) {
    .flex.col-2 > *,
    .flex.col-3 > *,
    .flex.col-4 > * { width: 100%; }
    .flex { --grid-gap: 15px; }
}

/*
Grid Support
----------------------------------------------------------- */
/* 最小幅だけ決めて、あとは画面幅に応じて自動で列数が変わるカードグリッド */
.grid {
    --grid-gap: 30px;
    --grid-min: 350px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--grid-min), 1fr));
    gap: var(--grid-gap);
}
@media (width < 768px) {
    .grid { --grid-gap: 15px; }
}

/*
cmn-img / cmn-txt（画像とテキストの横並び。floatを使わないので高さのズレが起きない）
----------------------------------------------------------- */
.cmn-media-row {
    display: flex;
    align-items: center;
    gap: 30px;
    margin: 2em 0;
}
.cmn-media-row.is-reverse {
    flex-direction: row-reverse;
}
.cmn-media-row .cmn-img {
    flex: 0 0 40%;
    margin: 0;
}
.cmn-media-row .cmn-img img {
    width: 100%;
    height: auto;
    border-radius: 6px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
.cmn-media-row .cmn-img figcaption {
    margin-top: 0.8em;
    font-size: 1.3rem;
    color: var(--medium-text-color);
    text-align: center;
}
.cmn-media-row .cmn-txt {
    flex: 1;
}
.cmn-media-row .cmn-txt p:last-child {
    margin-bottom: 0;
}
/*
white-box
----------------------------------------------------------- */
.white-box {
    background-color: var(--white);
    padding: 30px;
    border-radius: 8px;
    box-shadow: 2px 2px 8px rgba(var(--primary-rgb, 21, 58, 161), 0.1);
}

@media (768px <= width <= 1199px) {
    .white-box {
        padding: 15px;
    }
}
@media (width < 768px) {
    .white-box {
        padding: 15px;
    }
}

/*
check-list
----------------------------------------------------------- */
.check-list,
.is-style-check-list {
    list-style: none;
    padding-left: 0;
}
.check-list li,
.is-style-check-list li {
    position: relative;
    padding-left: 1.5em;
    margin-bottom: 8px;
}
.check-list li:before,
.is-style-check-list li:before {
    font: var(--fa-font-solid);
    content: "\f00c";
    position: absolute;
    left: 0;
    top: 0.1em;
    color: var(--primary);
    font-size: 1em;
}

/*
list-border
----------------------------------------------------------- */
.list-border {
    border-bottom: 2px dashed #000;
}
.list-border-stop {
    border-bottom: 2px dashed #000;
    display: inline-block;
}

/*
fadeup-animation
----------------------------------------------------------- */
.fadeInTrigger, .fadeUpTrigger, .fadeDownTrigger, .fadeLeftTrigger, .fadeRightTrigger,
.flipLeftTopTrigger, .flipLeftTrigger, .blurTrigger, .zoomInTrigger, .scrollTrigger {
    opacity: 0;
    transition-property: opacity, transform;
    transition-duration: 0.8s;
    transition-timing-function: ease-out;
}
.fadeIn.fadeInTrigger, .fadeInTrigger.is-animated {
    opacity: 1;
}
.fadeUp.fadeUpTrigger, .fadeUpTrigger.is-animated {
    opacity: 1;
    transform: translateY(0);
}
.fadeUpTrigger {
    transform: translateY(30px);
}
.delay-time02 { transition-delay: 0.2s; }
.delay-time04 { transition-delay: 0.4s; }
.delay-time06 { transition-delay: 0.6s; }
.delay-time08 { transition-delay: 0.8s; }
@media (width < 768px) {
    .delay-time02, .delay-time04, .delay-time06, .delay-time08 {
        transition-delay: 0s;
    }
}
/*
Button Styles
----------------------------------------------------------- */
.btn {
    display: inline-block;
    padding: 12px 28px;
    border: 1px solid transparent;
    border-radius: 6px;
    font-size: 1.6rem;
    font-weight: 600;
    text-align: center;
    vertical-align: middle;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease;
    line-height: 1.4;
    white-space: nowrap;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* プライマリボタン */
.btn-primary {
    background-color: var(--primary);
    border-color: var(--primary);
    color: var(--white);
}
.btn-primary:hover {
    background-color: transparent;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-color: var(--primary);
    color: var(--primary);
    box-shadow: 0 4px 10px rgba(var(--primary-rgb), 0.15);
}

/* アウトラインボタン */
.btn-outline {
    background-color: transparent;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-color: var(--primary);
    color: var(--primary);
    box-shadow: none;
}
.btn-outline:hover {
    background-color: var(--primary);
    color: var(--white);
    box-shadow: 0 4px 10px rgba(var(--primary-rgb), 0.15);
}

/* アクセントカラーボタン */
.btn-accent {
    background-color: var(--highlight);
    border-color: var(--highlight);
    color: var(--text);
}
.btn-accent:hover {
    background-color: transparent;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-color: var(--highlight);
    color: var(--highlight);
}

/* ボタンのサイズバリエーション (任意) */
.btn-lg {
    padding: 15px 35px;
    font-size: 1.8rem;
}
.btn-sm {
    padding: 8px 18px;
    font-size: 1.4rem;
}

/*
ページネーション
----------------------------------------------------------- */
.pagination-wrapper {
    margin-top: 60px;
    display: flex;
    justify-content: center;
}
.pagination {
    display: flex;
    justify-content: center;
}
.pagination-list {
    display: flex;
    align-items: center;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.pagination-item {
    display: flex;
    align-items: center;
}
.pagination-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--medium-text-color);
    text-decoration: none;
    font-size: 1.5rem;
    font-weight: 600;
    transition: all 0.3s ease;
    background-color: var(--white);
}
.pagination-link:hover {
    border-color: var(--primary);
    color: var(--primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.15);
}
.pagination-link.active {
    background-color: var(--primary);
    border-color: var(--primary);
    color: var(--white);
    box-shadow: 0 4px 15px rgba(var(--primary-rgb), 0.3);
}
.pagination-ellipsis {
    padding: 0 8px;
    color: var(--medium-text-color);
    font-size: 1.5rem;
}
@media (768px <= width <= 1199px) {
    .pagination-link {
        width: 40px;
        height: 40px;
        font-size: 1.4rem;
    }
    .pagination-wrapper {
        margin-top: 40px;
    }
}
@media (width < 768px) {
    .pagination-list {
        gap: 5px;
        flex-wrap: wrap;
        justify-content: center;
    }
    .pagination-link {
        width: 35px;
        height: 35px;
        font-size: 1.3rem;
    }
    .pagination-ellipsis {
        padding: 0 5px;
        font-size: 1.3rem;
    }
    .pagination-wrapper {
        margin-top: 30px;
    }
}