@charset "UTF-8";

:root {
    --main-color: #FCEDA8;
    --sub-color: #4CAF50;

    /* テキストフォント */
    --font-base-family: 'Noto Sans JP', sans-serif;
    --font-base-size: 17px;
    --font-base-weight-medium: 500;
    --font-base-weight-bold: 700;
    --font-base-weight-black: 900;
    --font-base-line-height: 1.8;

    --font-midashi-size: 32px;
    --font-midashi-weight: 900;

    /* テキストカラー */
    --base-text-color: #343434;
    --green-text: #0C9B23;
    --white-text: #FFFFFF;
    --orenge-text: #FF833D;

    /* 丸角緑ボタン背景グラデーション */
    --marukado-button-gradient: linear-gradient(180deg, #4CAF50 0%, #359B39 100%);
    --marukado-button-gradient-hover: linear-gradient(180deg, #3BA840 0%, #128717 100%);
}

html {
    font-family: var(--font-base-family);
    font-size: var(--font-base-size);
    line-height: var(--font-base-line-height);
    background: var(--main-color);
    color: var(--base-text-color);
    scroll-behavior: smooth;
    overscroll-behavior: none;
    overflow-x: hidden;
}

body {
    margin: 0;
    padding: 0;
    position: relative;
}

:is(h1, h2, h3, h4, h5, h6) {
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
}

a:is(:link, :visited) {
    color: inherit;
}

a:hover {
	color: var(--orenge-text);
	transition : all 0.5s ease 0s;
}


address {
    font-style: normal;
}

:where(ol, ul) {
    list-style: none;
    padding:0px;
}

img {
    height: auto;
    /* max-width: 100%; */
    vertical-align: bottom;
}

.pc {
    display: block;
}

.sp {
    display: none;
}


/*===========================================================================
*   トップに戻るボタン
===========================================================================*/

/* 位置固定 */
.return-top-button-wrapper {
    position: fixed;
    display:block;
    bottom: 4.17vw; /* PC画面幅1920px基準 */
    left: 63%;
    transform: translateX(25vw);
    width: 109.65px;
    height: 120px;
    z-index: 10000;
    pointer-events:none;
    opacity:0;
    transition:opacity 0.5s;

    &.active { opacity:1; pointer-events:auto; cursor:pointer;}
}

/* 画像を重ねる */
.return-top-button {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: opacity 1s ease;
}

/* ホバー用画像は最初透明 */
.return-top-button.hover {
    opacity: 0;
}

/* !!!! 一旦ホバー無し !!!!*/
/* ホバー時に背景の透明度を切り替え */
/* .return-top-button-wrapper:hover .return-top-button.hover {
    opacity: 1;
} */

/* ===========================================================================
*   丸角ページリンクボタン
=========================================================================== */

/* 共通ボタン（PC基準） */
.common-button {
    display: flex;
    justify-content: center;
}

.common-button > a {
    position: relative;
    display: inline-flex;
    align-items: center;
    /* height: 40px; */
    padding: 0.75em 2.778em 0.75em 1.111em;
    border-radius: 100px;
    cursor: pointer;
    overflow: hidden;
    /* gap: 10px; */

    font-weight: var(--font-base-weight-bold);
    font-size: 18px;
    color: var(--white-text);
    text-decoration: none;
    line-height: 1;
    white-space: nowrap;

    background-image: url("../../image/basic/yajirushi.webp");
    background-repeat: no-repeat;
    background-position: calc(100% - 1.111em) center; /* 右端に小さく寄せる */
    background-size: 20px 20px;
}

/* --- 背景の基底レイヤー（常時表示） --- */
.common-button > a::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  /* 普通時のグラデ */
  background: var(--marukado-button-gradient);
  transition: opacity 1s ease;
  opacity: 1;
  pointer-events: none;
  z-index: -2;
}

/* --- ホバー用オーバーレイ（opacity を切り替えて差し替える） --- */
.common-button > a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--marukado-button-gradient-hover);
  opacity: 0;
  transition: opacity 1s ease;
  pointer-events: none;
  z-index: -1;
}

/* ホバー時（もしくはフォーカス時）に色を切り替える */
.common-button > a:hover::after,
.common-button > a:focus::after {
  opacity: 1;
}

/*===========================================================================
*   header
===========================================================================*/

.responsive-header,
.responsive-drawer {
    display: none;
}

/* ロゴワッパー */
.logo-wrap {
    position: absolute;
    top: 0.78vw;     /* PC画面幅1920px基準 */
    left: 0.83vw;    /* PC画面幅1920px基準 */
    width: 16.72vw;  /* PC画面幅1920px基準 */
    height: auto;
    background-size: contain;
}

.h1-site-title a {
    display: block;
    line-height: 1;
}

/* ロゴ画像 */
.site-logo {
    width: clamp(286px, 16.72vw, 321px);
    height: auto;
}

.site-header {
    height: 90px;
    /* background-image: url("../../image/basic/header-bg-white.webp"); */
    background-size: cover;
    background-position: top center;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10000;
    transition: background 0.2s ease;
}

/* ----------------------------
    PCヘッダー管理
---------------------------- */
/* デフォルト */
html.pc-default {

    & .site-header { background-image:none;}
    & .site-logo.scrolled { display:none;}
    & .nav-happa.scrolled { display:none;}
}

/* スクロール時 */
html.pc-scrolled {

    & .site-header { background-image:url(../../image/basic/header-bg-white.webp);}
    & .site-logo.default { display:none;}
    & .nav-happa.normal { display:none;}
}



html.pc-default .header-nav-content-text {
    color: var(--white-text);
}

html.pc-scrolled .header-nav-content-text {
    color: var(--base-text-color);
}

.header-nav {
    position: absolute;
    top: 1.41vw; /* PC画面幅1920px基準 */
    right: 175px;
    /* right: 9.11vw; */
}

/* ナビリスト */
.header-nav ul {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1.3vw; /* PC画面幅1920px基準 */
    /* gap: 25px; */
}

.header-nav-content {
    display: flex;
    align-items: center;
    gap: 7px;
    position: relative;
}

/* 葉っぱアイコン */
.nav-happa-wrap {
    position: relative;
    width: 19px;
    height: 15px;
}

/* 2つの画像を完全に重ねる */
.nav-happa-wrap .nav-happa {
    position: absolute;
    top: 0;
    left: 0;
    width: 19px;
    height: 15px;
    transition: opacity 0.5s;
}

/* 初期状態は白葉っぱ visible */
.nav-happa.normal {
    opacity: 1;
}

/* オレンジ葉っぱ hidden */
.nav-happa.hover {
    opacity: 0;
}

/* hover で切り替え */
.header-nav a:hover .nav-happa:is(.normal, .scrolled) {
    opacity: 0;
}

.header-nav a:hover .nav-happa.hover {
    opacity: 1;
}

.header-nav-content-text,
.otoiawase-text {
    font-weight: var(--font-base-weight-black);
    color: var(--white-text);
    transition: color 0.5s;
}

.header-nav a:hover .header-nav-content-text {
    color: var(--orenge-text) !important;
}

/* ============================
   お問い合わせ：葉っぱのラッパー設定
============================= */

.header-otoiawase-green-happa {
    position: absolute;
    right: 0;
}

.otoiawase-wrap {
    position: relative;
}

.otoiawase-happa-wrap {
    position: relative;
    width: 145px; /* 画像と同じ幅にする */
    height: 80px;
}

.otoiawase-happa-wrap .otoiawase-happa {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: auto;
    transition: opacity 0.5s;
}

/* 初期状態 */
.otoiawase-happa.normal {
    opacity: 1;
}
.otoiawase-happa.hover {
    opacity: 0;
}

/* ホバーで切り替え*/
.header-otoiawase-green-happa a:hover .otoiawase-happa.normal {
    opacity: 0;
}

.header-otoiawase-green-happa a:hover .otoiawase-happa.hover {
    opacity: 1;
}

.infomation-btn {
    padding-top: 13px;
    padding-bottom: 13px;
}

/* お問い合わせテキスト */
.otoiawase-happa-wrap .otoiawase-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    white-space: nowrap;
}

/*===========================================================================
*   footer
===========================================================================*/

footer {
    position: relative;
    background-color: #FFFFFF;
    padding-top: 1.09vw; /* PC画面幅1920px基準 */
    text-align: center;
    font-size: 18px;
}

/* 1枚目の背景（白） */
footer::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 0;
    width: 100%;
    aspect-ratio: 1920 / 21.5;
    background-image: url('../../image/basic/footer-bg.webp');
    background-repeat: repeat-x;
    background-position: top center;
    background-size: 100% auto;
    z-index: 2;
}

/* 2枚目の背景（緑） */
footer::after {
    content: "";
    position: absolute;
    top: -2px;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../../image/top/company-bg-green.webp');
    background-repeat: repeat;
    background-position: top center;
    background-size: 48px auto;
    z-index: 1;
}

/* footer 内の通常コンテンツ */
footer > * {
    position: relative;
    z-index: 3;
}

.site-footer {
    position: relative;
    background-color: #FFFFFF;
    margin-bottom: -2px;
}

.footer-bg-illustration {
    position: absolute;
    top: -101px;
    /* top: -5.26vw; */
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
}

.footer-bg-illustration img {
    width: 393.85px;
    height: auto;
}

.footer-icon {
    padding-top: 30px;
    /* padding-top: 1.56vw; */
    display: flex;
    justify-content: center;
}

.footer-icon img {
    width: 429px;
    height: auto;
}

footer .container-1200 {
    padding: 22.36px;
    padding-bottom: 19px;
}

.company-address {
    color: #000000;
    text-align: center;
}

.footer-nav {
    margin-top: 32px;
    margin-bottom: 50px;
}

.footer-nav ul {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap:7.5px 30px;
}

.footer-nav-content {
    display: flex;
    align-items: center;
    gap: 7px;
}

.footer-nav-content-text {
    font-size: var(--font-base-size);
    font-weight: var(--font-base-weight-black);
    transition: color 0.5s;
}

div.footer-nav-content {
    & .nav-happa { width:19px; height:15px;}
    & .nav-happa.normal { display:block;}
    & .nav-happa.hover { display:none;}

    &:hover {
        & .footer-nav-content-text { color:var(--orenge-text);}
        & .nav-happa.normal { display:none;}
        & .nav-happa.hover { display:block; opacity:1;}
    }
}


footer .common-button > a  {
    padding-right: 3.778em;
    padding-left: 2.111em;
    background-position: calc(100% - 2.111em) center;
    white-space: nowrap;
}

.privacy-policy-wrap {
    text-align: center;
}

footer .privacy-policy {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 7px;
    font-size: 16px;
    margin-top: 20px;

    &:after {
        content:"";
        display:block;
        width:auto;
        height:0.6em;
        aspect-ratio:5.86/8;
        background-color:var(--green-text);
        clip-path:polygon(0 0, 100% 50%, 0 100%);
        transition:background 0.5s;
    }
}

.privacy-policy-text {
    transition: color 0.5s;
}

/* hover できるデバイス（PCなど）だけ hover を適用 */
@media (hover: hover) and (pointer: fine) {
    footer .privacy-policy:hover {
        & .privacy-policy-text { color: var(--orenge-text);}
        &:after { background-color:var(--orenge-text);}
    }
}

footer .privacy-policy img {
    width: auto;
    /* width: 11px; */
    height: 8px;
}

.copyright {
    background-color: #FFFFFF;
    width: 100%;
    height: 97px;
    padding-top: 50px;
    text-align: center;
    background-image: url('../../image/basic/copy-right-bg-brown.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.copyright-text {
    font-size: 14px;
    color: var(--white-text);
    background-color: #40220F;
}

/*===========================================================================
*   main
===========================================================================*/
main {
    width: 100%;
}

.container-1200 {
    width: 1200px;
    max-width: 100%;
    margin: 0 auto;
    position: relative;
}

/* 見出し */
.midashi {
    position: relative;
    display: flex;
    align-items: center;
    padding-bottom: clamp(12px, calc(20px + 3 * ((100vw - 769px) / 1151)), 23px);
    font-size: clamp(22px, calc(22px + 8 * ((100vw - 769px) / 1151)), 32px);
    font-weight: var(--font-base-weight-black);
    gap: 10px;
}

/* 左葉っぱ */
.midashi::before {
    content: "";
    display: inline-block;
    width: 32px;
    height: 25px;
    background-image: url('../../image/basic/happa_green.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0;
}

/* 下線 */
.midashi::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 6px;
    margin-top: 23px;
    background-image: url('../../image/basic/midashi_border.webp');
    background-repeat: repeat-x;
    background-size: contain;
}

.nakamidashi {
    position: relative;
    width: 100%;
    height: auto;
    text-align: center;
    margin: 32px 0;
    padding: 20px 0;
    /* padding: 1.67vw 0; */
    background-color: var(--sub-color);
    border-radius: 15px;
    overflow: hidden;
}

/* 左側の repeat 画像 */
.nakamidashi::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 30px;
    height: 100%;
    background-image: url("../../image/basic/midashi-waki-gazou.webp");
    background-repeat: repeat-y;
    background-position: top center;
    background-size: 100%;
}

/* 右側の repeat 画像 */
.nakamidashi::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 30px;
    height: 100%;
    background-image: url("../../image/basic/midashi-waki-gazou.webp");
    background-repeat: repeat-y;
    background-position: top center;
    background-size: 100%;
    transform: scaleX(-1);
}

h4 {
    line-height: 1;
    font-size: clamp(20px, calc(20px + 4 * ((100vw - 769px) / 1151)), 24px);
    /* font-size: 24px; */
    font-weight: var(--font-base-weight-bold);
    color: var(--white-text);
}

@media screen and (min-width: 1920px) {}

/* ▼ 1600px～1401px：PC */
@media screen and (min-width: 1401px) and (max-width: 1600px) {

    .site-header {
        height: 83.44px;
    }

    .otoiawase-happa-wrap {
        width: 130px;
        height: 71.719px;
    }
}

/* ▼ 1400px～769px：PC～タブレット */
@media screen and (min-width: 769px) and (max-width: 1400px) {

    .site-header {
        height: 6.24vw;  /* PC画面幅1400px基準 */
        /* height: 87.4px; */
    }

    .otoiawase-happa-wrap {
        width: 10vw;     /* PC画面幅1400px基準 */
        height: 5.517vw; /* PC画面幅1400px基準 */
    }

    .header-nav {
        right: 12.5vw;   /* PC画面幅1400px基準 */
    }
}

/* ▼ 1000px～769px：PC～タブレット */
@media screen and (min-width: 769px) and (max-width: 1000px) {
    .logo-wrap {
        top: 0.5vw; /* PC画面幅1000px基準 */
        /* left: 0.83vw; */
    }
}

@media screen and (max-width: 1400px) {

    .site-logo {
        width: 18vw; /* PC画面幅1000px基準 */
    }

    .header-nav {
        top: 1.6vw; /* PC画面幅1400px基準 */
    }

    .header-nav ul {
        gap: 1vw;   /* PC画面幅1400px基準 */
    }

    .header-nav-content-text, .otoiawase-text {
        font-size: 1.2vw; /* PC画面幅1400px基準 */
    }
}

@media screen and (max-width: 1200px) {
    .container-1200 {
        padding-left: 30px;
        padding-right: 30px;
    }
}

/* ▼ 900px～769px：PC～タブレット */
@media screen and (min-width: 769px) and (max-width: 900px) {

    .return-top-button-wrapper {
        left: 60%;
    }

    .hero .hero-links {
        top: 50vw /* PC画面幅900px基準 */
    }
    .header-nav ul {
        gap: 5px;
    }
    .header-nav-content {
        gap: 5px;
    }
}

/* ▼ ～768px：タブレット */
@media screen and (max-width: 768px) {

    .common-button > a {
        /* width: 300px; */
        height: 55px;

        /* padding: 1em 5.889em 1.167em 4.778em; */
        padding: 1.167em 5.889em 1.167em 4.778em;

        background-position: calc(100% - 3.778em) center; /* 右端に小さく寄せる */
        background-size: 15px 15px;
    }

    .yajirushi {
        width: 15px;
        height: 15px;
    }

    .return-top-button {
        width: 82px;
        height: 90px;
    }

    /* トップに戻るボタンのホバー無効化 */
    .return-top-button-wrapper .return-top-button.normal {
        opacity: 1 !important;
    }
    .return-top-button-wrapper .return-top-button.hover {
        opacity: 0 !important;
    }

    /*===========================================================================
    *   header
    ===========================================================================*/

    .header-nav,
    .header-otoiawase-green-happa {
        display: none;
    }

    .logo-wrap {
        top: 5px;
        left: 5px;
    }

    .site-logo {
        width: 286px;
    }


    /* ----------------------------
        スマホヘッダー管理
    ---------------------------- */
    html.is-mobile {
        & .responsive-header-wrap { background-image: none;}
        & .site-logo.default { display:block;}
        & .site-logo.scrolled { display:none;}
    }

    /* スクロール後（白ヘッダー） */
    html.is-mobile.is-scrolled {
        & .responsive-header-wrap { background-image: url(../../image/basic/header-bg-white-mobile.webp);}
        & .site-logo.default { display:none;}
        & .site-logo.scrolled { display:block;}
    }

    /* メニューオープン時（スクロールより優先） */
    html.menu-open.is-mobile {
        & .site-logo.default { display:none;}
        & .site-logo.scrolled { display:block;}
    }

    html.is-mobile .header-nav-content-text {
        color: var(--white-text);
    }

    /* --- レスポンシブ対応（ハンバーガーメニュー） --- */
    .responsive-header-wrap{
        height: 78px;
        transition: background 0.2s ease;
        background-size: cover;
        background-position: center;
        background-size: 100% 78px;
    }

    /* 緑背景とハンバーガーメニュー */
    .responsive-header {
        position: absolute;
        top: 0;
        right: 0;
        display: block;
        height: 65px;
    }

    .responsive-hamburger img {
        width: 65px;
        height: 65px;
    }

    .hamburger {
        position: absolute;
        display: flex;
        flex-direction: column;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        gap: 8px;
        z-index: 100;
    }

    .hamburger span {
        display: block;
        width: 35px;
        height: 4px;
        background-color: #FFFFFF;
        border-radius: 4px;
        transition: all 0.2s linear;
    }

    /* active(バツ状態) */
    html.menu-open.is-mobile .hamburger span:nth-child(1) {
        transform: translateY(12px) rotate(45deg);
    }

    html.menu-open.is-mobile .hamburger span:nth-child(2) {
        opacity: 0;
    }

    html.menu-open.is-mobile .hamburger span:nth-child(3) {
        transform: translateY(-12px) rotate(-45deg);
    }

    /* スマホメニュー表示 */
    .responsive-drawer {
        line-height: normal;

        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100dvh;

        background-color: var(--main-color);
        overflow-y: auto;
        overscroll-behavior:none;
        scrollbar-width:none;

        opacity: 0;
        visibility: hidden;
        pointer-events: none;

        transform: scale(1.03);
        transition:
            opacity 0.25s ease,
            transform 0.25s ease,
            visibility 0s linear 0.25s;

        display: flex;
        z-index: -1;
    }

    html.menu-open.is-mobile .responsive-drawer {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;

        transform: scale(1);
        transition:
            opacity 0.25s ease,
            transform 0.25s ease,
            visibility 0s;
        padding-top: 65px;
    }

    .drawer-bg-white {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        /* height: 100dvh; */
        height: 200px;
        background-color: #FFFFFF;
        z-index: -2;
    }

    .drawer-bg {
        width: 100%;
        display: block;
        position: absolute;
        top: 65px;
        left: 0;
        z-index: -1;
    }

    .drawer-menu-wrap-wrap {
        position: relative;
        top: 70px;
        width: 100%;
    }

    /* 背景画像（top + bottom）を完全にはみ出しで設置 */
    .drawer-menu-wrap-wrap::before,
    .drawer-menu-wrap-wrap::after {
        content: "";
        position: absolute;
        left: 50%;
        width: 100%;
        height: 100%;
        transform: translateX(-50%);
        background-repeat: no-repeat;
        background-size: 100%;
        /* background-size: contain; */
        pointer-events: none;
        z-index: -1;
    }

    /* top画像 */
    .drawer-menu-wrap-wrap::before {
        top: -61px;
        background-image: url("../../image/basic/hamburger-menu-bg-top.webp");
        z-index: 1;
    }

    /* bottom画像 */
    .drawer-menu-wrap-wrap::after {
        bottom: -16vw;
        /* bottom: -65px; */
        background-image: url("../../image/basic/hamburger-menu-bg-bottom.webp");
        /* background-size: 100% 100%; */
        height: calc(100% + 65px);
        /* height: 100%; */
    }

    .drawer-menu-wrap {
        position: relative;
        width: 87%;
        margin: 0 auto;
        /* margin-top: 25px; */
        margin-top: 6.4vw; /* PC画面幅768px基準 */
        /* margin-top: 150px; */
        max-height: calc(100vh - 170px);
        /* overflow-y: auto; */
    }

    .drawer-menu {
        position: relative;
        list-style: none;
        text-align: center;
        /* margin-top: 6.4vw; */
        margin-bottom: 66px;
        padding: 20px 40px 50px 40px;
        border-radius: 10px;
        background-color: #FFFFFF;
        display: flex;
        flex-direction: column;
        gap: 10px;
        overflow: visible;
        z-index: 0;
    }

    .drawer-menu li {
        border-bottom: 1px solid #4CAF50;
        padding: 12.5px 0;
    }

    .drawer-menu li:last-child {
        border-bottom: none;
        padding: 0;
        padding-top: 30px;
    }

    .drawer-menu .common-button > a {
        width: 214px;
        height: 40px;
        padding: 0.75em 3.778em 0.75em 2.111em;

        background-position: calc(100% - 2.111em) center;
        background-size: 20px 20px;
    }
    
    /* .drawer-menu .common-button > a::after {
        width: 20px;
        height: 20px;
    } */

    .responsive-drawer .drawer-menu .header-nav-content .header-nav-content-text {
        font-size: 21px;
        color: var(--base-text-color);
    }
    .responsive-drawer .drawer-menu .header-nav-content .nav-happa {
        width: 28px;
        height: 21px;
    }

    /*===========================================================================
    *   footer
    ===========================================================================*/

    footer {
        background-image: url(../../image/basic/footer-bg-mobile.webp), url(../../image/top/company-bg-green.webp);
        background-repeat: repeat-x, repeat;
        background-position: top center, top center;
        background-size: 100% auto, 48px auto;
    }
    
    footer .container-1200 {
        padding-top: 10px;
    }

    .footer-icon {
        padding-top: 52px;
    }

    .footer-bg-illustration {
        top: -62px;
    }

    .footer-bg-illustration img {
        width: 307.81px;
    }

    .footer-icon img {
        width: 321px;
    }

    .company-address-wrap {
        display: flex;
        justify-content: center;
    }

    .company-address {
        font-size: 15px;
        text-align: left;
    }

    footer .common-button {
        margin-top: 25px;
    }

    footer .common-button > a  {
        padding: 0 5.8898em 0 4.778em;
        line-height: 1px;

        background-position: calc(100% - 86px) center;
    }

    footer .privacy-policy {
        margin-top: 20px;
    }

    footer .privacy-policy {
        font-size: 14px;
    }

    .footer-nav-wrapper {
        display: none;
    }

    footer .container-1200 {
        padding-bottom: 0px;
    }

    .copyright {
        background-color: #FFFFFF;
        width: 100%;
        height: 82px;
        padding-top: 45px;
        background-image: url('../../image/basic/copy-right-bg-brown-mobile.webp');
    }

    .copyright-text {
        font-size: 13px;
    }

    /*===========================================================================
    *   main
    ===========================================================================*/

    /* 見出し */
    .midashi {
        padding-bottom: 6.5px;
    }

    .midashi::before {
        width: 26px;
        height: 20px;
    }

    .nakamidashi {
        line-height: normal;
        margin: 20px 0;
        padding: 7.5px 0;
    }

    .nakamidashi::before,
    .nakamidashi::after {
        width: 18px;
    }

}

@media screen and (min-width: 431px) and (max-width: 768px) {

    .drawer-menu-wrap {
        margin-top: 11.72vw; /* PC画面幅768px基準 */
        /* margin-top: 90px; */
    }
}

@media screen and (min-width: 431px) and (max-width: 700px) {
    .return-top-button-wrapper {
        left: 56%;
    }
}

/* ▼ ～430px：スマホ */
@media screen and (max-width: 430px) {

    /* トップに戻るボタン */
    .return-top-button-wrapper {
        left: 53%;
    }

    /* 見出し下線画像 */
    .midashi::after {
        height: 4.4px;
    }

    /*===========================================================================
    *   header
    ===========================================================================*/

    .drawer-menu {
        padding: 20px 20px 50px 20px;
    }

    .drawer-menu li {
        padding: 10px 0;
    }

    /*===========================================================================
        *   footer
    ===========================================================================*/

}

/* ▼ ～383px：スマホ */
@media screen and (max-width: 383px) {
    .drawer-menu-wrap-wrap::before {
        top: -59px;
    }
}

/* ▼ ～375px：スマホ */
@media screen and (max-width: 375px) {}