@charset "UTF-8";
/*
 variable-definition
----------------------------------------------------------- */
:root {
    --color-primary: #109680;
    --color-primary-light: #d0efeb;
    --color-primary-hover: #14bba0;
    --color-primary-lightest: #f0f9f8;
    --color-primary-lighter: #66bdae;
    --color-primary-dark: #0b6b5c;
    --color-primary-darkest: #063d34;
    --color-primary-transparent: rgba(16, 150, 128, 0.26);
    --color-secondary: #fff8e7;
    --color-accent: #e98b77;
    --color-tertiary: #4a6b66;
    --color-text: #2c3e50;
    --color-line: #06c755;
    --color-blue: #3d5a80;
    --color-blue02: #98c1d9;
    --color-blue03: #e0f2f1;
    --color-green: #4caf50;
    --color-green02: #a5d6a7;
    --color-green03: #1b5e20;
    --color-green04: #e8f5e9;
    --color-pink: #d81b60;
    --color-pink02: #f48fb1;
    --color-pink03: #fce4ec;
    --color-pink04: #ad1457;
    --color-pink05: #880e4f;
    --color-pink06: #fff1f6;
    --color-yellow: #f4d35e;
    --color-yellow02: #faf3dd;
    --color-black: #1a1a1a;
    --color-white: #ffffff;
    --color-gray: #5f6368;
    --color-gold: #b8860b;
    --color-silver: #a9a9a9;
    --color-bronze: #cd7f32;
    --font-gothic: 'Noto Sans JP','Hiragino Sans','Hiragino Kaku Gothic ProN','BIZ UDPGothic','Yu Gothic','Meiryo',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
    --font-mincho: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "HGS明朝E", "MS PMincho", "MS Mincho", serif;
    --font-shuei: dnp-shuei-gothic-gin-std, sans-serif;
    --font-ex-gothic: 游ゴシック体, "Yu Gothic", YuGothic, "Hiragino Sans", ヒラギノ角ゴシック, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", メイリオ, Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.cl-primary { color: var(--color-primary);}
.cl-secondary { color: var(--color-secondary);}
.cl-accent { color: var(--color-accent);}
.cl-gold{background: #92871e;padding: 15px 0;}
.cl-silver{background: #8d8d92;padding: 15px 0;}
.cl-bronze{background: #865d37;padding: 15px 0;}
/*
basic-settings
----------------------------------------------------------- */
html {
    font-size: 62.5%;
}
body {
    font-family: 'Noto Sans JP','Hiragino Sans','Hiragino Kaku Gothic ProN','BIZ UDPGothic','Yu Gothic','Meiryo',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-weight: normal;
    font-size: 1.8rem;
    line-height: 1.65;
    color: var(--color-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
    word-break: break-word;
    line-break: strict;
    overflow-wrap: break-word;
}
h1, h2, h3, h4, h5, h6 {
    font-family: 'Noto Sans JP','Hiragino Sans','BIZ UDPGothic',system-ui,sans-serif;
    font-weight: bold;
}
.font-min {font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "HGS明朝E", "MS PMincho", "MS Mincho", serif;}
.en {
    font-family: 'Outfit','Helvetica Neue',Arial,sans-serif;
}
/* Images
----------------------------------------------------------- */
/* 画像保護CSS */
img {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
    user-drag: none;
    pointer-events: none;
}

img, video {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

a, button, input, textarea, select {
    pointer-events: auto;
    user-select: auto;
}

a {
    transition: all .3s;
}
a img {
    transition: all 0.3s ease-in-out;
    backface-visibility: hidden;
}
.hover-zoom {
    position: relative;
    overflow: hidden;
}
.hover-zoom a {
    display: block;
}
.hover-zoom a img {
    display: block;  /* 画像下の余白を削除 */
    width: 100%;     /* 親要素いっぱいに広げる */
    height: auto;    /* アスペクト比を維持 */
    transition: all 0.3s ease-in-out;
    backface-visibility: hidden;
}
/* ホバー設定 */
@media (hover: hover) and (pointer: fine) {
    .hover-zoom a:hover img {
        transform: scale(1.05);
    }
    .hover-float a:hover img {
        transform: translateY(-8px);
        box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
    }
    .hover-contrast a:hover img {
        filter: contrast(1.1) saturate(1.1);
    }
    .hover-rotate a:hover img {
        transform: perspective(1000px) rotateY(5deg);
        box-shadow: -5px 5px 15px rgba(0, 0, 0, 0.1);
    }
    .hover-glow a:hover img {
        box-shadow: 0 0 15px var(--color-primary);
        filter: brightness(1.05);
    }
}
/* タッチデバイス用設定 */
@media (hover: none) or (pointer: coarse) {
    a:hover,
    .pagetop a:hover {
        opacity: 1;
    }
    a img:hover {
        transform: none;
        filter: none;
        box-shadow: none;
    }
}
/* utility
----------------------------------------------------------- */
.m0a {margin: 0 auto;}
.posr {position: relative;}
.imgr {display: block; max-width: 100%; height: auto;}
.ovfh {overflow: hidden;}
.fdrr {flex-direction: row-reverse;}
/* Typography Classes
----------------------------------------------------------- */
.fwb { font-weight: bold !important; }
.underline { text-decoration: underline; }
.font-xs { font-size: 0.666em; } /* 12px */
.font-s { font-size: 0.777em; }  /* 14px */
.font-m { font-size: 1.333em; }  /* 24px */
.font-l { font-size: 2.222em; }  /* 40px */
.font-xl { font-size: 3.333em; } /* 60px */
.tac { text-align: center !important; }
.tal { text-align: left !important; }
.tar { text-align: right !important; }
.shadow {
    text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff,
    0 0 6px #fff, 0 0 6px #fff, 0 0 9px #fff;;
}
.font-min { font-family: "Yu Mincho", YuMincho, HG明朝B, "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;
}
.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;
}
/* show / hide */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}
/* Spacing Classes
----------------------------------------------------------- */
.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 (min-width: 768px) and (max-width: 1199px) {
    .tpb-0{padding-bottom: 0px;}.tpb-45{padding-bottom: 45px;}
}

@media screen and (max-width: 767px){
    .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;}.sppb-75{padding-bottom: 75px;}.sppb-90{padding-bottom: 90px;}

    .sppl-0{padding-left:0;}
    .sppr-0{padding-right:0;}
    .spph-0{padding-left:0;padding-right:0;}
}
/* Grid System
----------------------------------------------------------- */
.fbox {
    --grid-gap: 15px;
    display: flex;
    flex-wrap: wrap;
    gap: var(--grid-gap);
    width: 100%;
}
.fbox > * {
    box-sizing: border-box;
    word-break: break-all;
    flex: 0 0 auto; 
}
.fbox-2 > * {
    width: calc(50% - var(--grid-gap) / 2);
}
.fbox-3 > * {
    width: calc((100% - var(--grid-gap) * 2) / 3);
}
.fbox-4 > * {
    width: calc((100% - var(--grid-gap) * 3) / 4);
}
@media (min-width: 768px) and (max-width: 1199px) {
    .fbox-4 > * {
        width: calc((100% - var(--grid-gap)) / 2);
    }
}
@media (max-width: 767px) {
    .fbox {
        --grid-gap: 15px; /* スマホは隙間を狭くする */
    }
    .fbox-2 > *,
    .fbox-3 > *,
    .fbox-4 > * {
        width: 100%;
    }
}
.grid {
    display: grid;
    gap: 15px;
    width: 100%;
}
/* 2カラム */
.grid-2 {
    grid-template-columns: repeat(2, 1fr);
}
/* 3カラム */
.grid-3 {
    grid-template-columns: repeat(3, 1fr);
}
/* 4カラム */
.grid-4 {
    grid-template-columns: repeat(4, 1fr);
}
/* タブレット */
@media (min-width: 768px) and (max-width: 1199px) {
    .grid-3 {
        grid-template-columns: repeat(3, 1fr);
    }
    .grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}
/* スマートフォン */
@media (max-width: 767px) {
    .grid-2,
    .grid-3,
    .grid-4 {
        grid-template-columns: 1fr;
    }
}
/* Check List
----------------------------------------------------------- */
.check-list li {
    position: relative;
    padding-left: 1.5em;
    margin-bottom: 3px;
}
.check-list li:before {
    position: absolute;
    content: "\f14a";
    font-family: "Font Awesome 7 Free";
    font-weight: bolder;
    top: 0;
    left: 0;
    color: var(--color-primary);
}
.list-border {
    border-bottom: 2px dashed #000;
}
.list-border-stop {
    border-bottom: 2px dashed #000;
    display: inline-block;
}
/* Buttons
----------------------------------------------------------- */
.btn {
    background: #fff;
    color: var(--color-primary);
    border-radius: 8px; /* 角を少し丸く */
    font-size: 0.9em;
    font-weight: 600;
    padding: 12px 45px 12px 20px;
    position: relative;
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--color-primary);
}
.btn::after {
    content: "\f054"; /* 細い矢印アイコン */
    font-family: "Font Awesome 7 Free";
    font-weight: 900;
    position: absolute;
    right: 20px;
    transition: transform 0.3s ease;
}
.btn p {
    margin: 0;
    letter-spacing: 0.05em;
}
.btn:hover {
    background: var(--color-primary);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
    color: #fff;
}
.btn:hover::after {
    transform: translateX(5px);
}

/* Select Box */
select {
    appearance: none;
    width: 100%;
    padding: 10px 30px 10px 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #fff url("../img/select-arrow.png") right 10px center no-repeat;
    background-size: 12px auto;
}
/* White Box
----------------------------------------------------------- */
.white-box {
    padding: 50px;
    background-color: #fff;
    margin-bottom: 30px;
}
.white-box:last-of-type {
    margin-bottom: 0;
}
/* Animation Classes
----------------------------------------------------------- */
.delay-time02 { animation-delay: 0.2s; }
.delay-time04 { animation-delay: 0.4s; }
.delay-time06 { animation-delay: 0.6s; }
.delay-time08 { animation-delay: 0.8s; }
/* Base Animation Classes */
.fadeIn { animation-name: fadeInAnime; animation-duration: 1s; animation-fill-mode: forwards; opacity: 0; }
.fadeUp { animation-name: fadeUpAnime; animation-duration: 1s; animation-fill-mode: forwards; opacity: 0; }
.fadeDown { animation-name: fadeDownAnime; animation-duration: 1s; animation-fill-mode: forwards; opacity: 0; }
.fadeLeft { animation-name: fadeLeftAnime; animation-duration: 1s; animation-fill-mode: forwards; opacity: 0; }
.fadeRight { animation-name: fadeRightAnime; animation-duration: 1s; animation-fill-mode: forwards; opacity: 0; }
.flipLeft { animation-name: flipLeftAnime; animation-duration: 1s; animation-fill-mode: forwards; perspective-origin: left center; opacity: 0; }
.flipLeftTop { animation-name: flipLeftTopAnime; animation-duration: 1.5s; animation-fill-mode: forwards; opacity: 0; }
.blur { animation-name: blurAnime; animation-duration: 1s; animation-fill-mode: forwards; }
.zoomIn { animation-name: zoomInAnime; animation-duration: 1s; animation-fill-mode: forwards; }

/* Animation Keyframes */
@keyframes fadeInAnime {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes fadeUpAnime {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeDownAnime {
    from { opacity: 0; transform: translateY(-30px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeLeftAnime {
    from { opacity: 0; transform: translateX(-30px); }
    to { opacity: 1; transform: translateX(0); }
}
@keyframes fadeRightAnime {
    from { opacity: 0; transform: translateX(30px); }
    to { opacity: 1; transform: translateX(0); }
}
@keyframes flipLeftAnime {
    from { transform: perspective(600px) translate3d(0, 0, 0) rotateY(30deg); opacity: 0; }
    to { transform: perspective(600px) translate3d(0, 0, 0) rotateY(0deg); opacity: 1; }
}
@keyframes flipLeftTopAnime {
    from { transform: translate(-20px, 80px) rotate(-15deg); opacity: 0; }
    to { transform: translate(0, 0) rotate(0deg); opacity: 1; }
}
@keyframes blurAnime {
    from { filter: blur(10px); transform: scale(1.02); opacity: 0; }
    to { filter: blur(0); transform: scale(1); opacity: 1; }
}
@keyframes zoomInAnime {
    from { transform: scale(0.9); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* Animation Triggers */
.fadeInTrigger,
.fadeUpTrigger,
.fadeDownTrigger,
.fadeLeftTrigger,
.fadeRightTrigger,
.flipLeftTopTrigger,
.flipLeftTrigger,
.blurTrigger,
.zoomInTrigger {
    opacity: 0;
}
.floating {
    animation: floatingAnime 3s linear infinite;
    transform-origin: center;
}
@keyframes floatingAnime {
    25% { transform: translateY(-8px); }
    75% { transform: translateY(8px); }
}
/* Page Top Button
----------------------------------------------------------- */
.pagetop {
    position: fixed;
    bottom: 15px;
    right: 15px;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-out;
}
.pagetop a {
    position: relative;
    display: block;
    width: 50px;
    height: 50px;
    background-color: #fff;
    border: solid 1px var(--color-primary);
    border-radius: 50%;
    filter: drop-shadow(3px 3px 4px rgba(0,0,0,0.3));
}
.pagetop a:before {
    position: absolute;
    content: "";
    height: 10px;
    width: 10px;
    border-top: 2px solid var(--color-primary);
    border-right: 2px solid var(--color-primary);
    translate: 0 20%;
    rotate: -45deg;
    top: calc(50% - 5px);
    left: calc(50% - 5px);
}
.pagetop a:hover {
    background-color: var(--color-primary);
}
.pagetop a:hover:before {
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
}
/* Bottom Fixed Area
----------------------------------------------------------- */
.btm-fix {
    position: fixed;
    left: 0;
    bottom: 0;
    background: rgba(0,0,0,.8);
    width: 100%;
    padding: 5px 0;
    z-index: 998;
}
.btm-fix a {
    width: 50%;
    min-width: 400px;
}
/* Container / Break
----------------------------------------------------------- */
/* PC (1200px以上) */
@media (min-width: 1200px) {
    .container {
        width: 100%;
        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; }
}

/* Tablet (768px - 1199px) */
@media (min-width: 768px) and (max-width: 1199px) {
    body {
        overflow-x: hidden;
    }
    .container {
        width: 100%;
        max-width: 1199px;
        margin: 0 auto;
        padding-left: 15px;
        padding-right: 15px;
        box-sizing: border-box;
    }
    .p-none { display: block; }
    .pt-none { display: none; }
    .ps-none { display: block; }
    .t-none { display: none; }
    .ts-none { display: none; }
    .s-none { display: block; }
    .tab-shadow {
        text-shadow: 0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff;
    }
    .white-box {
        padding: 30px;
        margin-bottom: 15px;
    }
    .delay-time02, .delay-time04, .delay-time06, .delay-time08 {
        animation-delay: 0s;
    }
}
/* Mobile (767px以下) */
@media (max-width: 767px) {
    body {
        font-size: 1.7rem;
        line-height: 1.5;
        overflow-x: hidden;
    }
    .container {
        width: 100%;
        padding-left: 15px;
        padding-right: 15px;
        box-sizing: border-box;
    }
    .p-none { display: block; }
    .pt-none { display: block; }
    .ps-none { display: none; }
    .t-none { display: block; }
    .ts-none { display: none; }
    .s-none { display: none; }
    .sp-scroll {
        width: 100%;
        overflow-x: scroll;
    }
    .sp-scroll > * {
        min-width: 768px;
    }
    .sp-tal { text-align: left !important; }
    .sp-shadow {
        text-shadow: 0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff;
    }
    .white-box {
        padding: 15px;
        margin-bottom: 15px;
    }
    .btm-fix a {
        width: 90%;
        min-width: inherit;
        font-size: 1.2em;
    }
    .delay-time02, .delay-time04, .delay-time06, .delay-time08 {
        animation-delay: 0s;
    }
    /* Mobile Grid Modifiers */
    .spwd-50 { width: 50% !important; }
    .spwd-60 { width: 60% !important; }
    .spwd-70 { width: 70% !important; }
    .spwd-80 { width: 80% !important; }
    .spwd-90 { width: 90% !important; }
}
/* 共通のレイアウトクラス */
.cmn-img,
.cmn-top-img,
.cmn-mdl-img,
.cmn-btm-img {
  width: 300px !important; /* fboxのスタイルを上書き */
}
.cmn-txt,
.cmn-top-txt,
.cmn-mdl-txt,
.cmn-btm-txt {
  width: calc(100% - 300px - var(--grid-gap)) !important; /* ギャップを考慮した計算 */
}
/* common-button */
.cmn-btn {
    display: flex;
    justify-content: center;
    margin-bottom: 45px;
}
.cmn-btn-inner {
    font-size: 1.4rem;
    text-decoration: none;
    border: 1px solid #ccc;
    padding: 15px;
    transition: all .3s;
}
.cmn-btn-inner:hover {
    background: var(--color-primary);
    color: #fff;
    border: 1px solid var(--color-primary);
}
/* タブレット */
@media (min-width: 768px) and (max-width: 1199px) {
    .cmn-img,
    .cmn-top-img,
    .cmn-mdl-img,
    .cmn-btm-img {
        width: 40% !important;
    }
    .cmn-txt,
    .cmn-top-txt,
    .cmn-mdl-txt,
    .cmn-btm-txt {
        width: calc(60% - var(--grid-gap)) !important;
    }
}
@media (max-width: 767px) {
    .cmn-img,
    .cmn-top-img,
    .cmn-mdl-img,
    .cmn-btm-img,
    .cmn-txt,
    .cmn-top-txt,
    .cmn-mdl-txt,
    .cmn-btm-txt {
        width: 100% !important;
    }
    .cmn-btn {
        margin-bottom: 30px;
    }
}