/*
Theme Name: Grändia
Theme URL: https://chuko-grandia.jp/
Description: Grändia
Author: Grändia
Version: 26.01.21
*/

@charset "utf-8";
/* html5のブラウザ互換用
----------------------------------------------------------- */
@import url("/wp-content/themes/template/css/reset.css");
@import url("/wp-content/themes/template/css/default.css");


/* ページ設定
----------------------------------------------------------- */

    @charset "utf-8";

    .clearfix {
        display: block;
    }

    .sp {
        display: none;
    }
html {
  scroll-behavior: smooth;
}
    body {
        font-family: "Noto Sans JP", sans-serif;
        font-size: 14px;
        color: #000;
        line-height: 1.8;
    }

    /* header */
    header {
        width: 100%;
        max-width: 1900px;
        margin: 0 auto;
        position: relative;
        padding: 1%;
        box-sizing: border-box;
    }

    header#top {
        display: flex;
    }

    header#top h1 {
        margin-left: auto;
        width: 4%;
    }

    /* fv */
    #fv {
        width: 100%;
        max-width: 1900px;
        position: relative;
        margin: 0 auto;
    }

    #fv h2 {
        position: absolute;
        top: -8%;
        left: 2%;
        width: 58.4%;
        z-index: 10;
    }

    #fv_wrapper {
        display: flex;
        justify-content: space-between;
    }

    #fv_left {
        width: 25%;
        padding: 12% 0 0 0;
    }


    #fv_left h3 {
        font-size: 14px;
        padding: 0 0 0 7%;
    }

    #fv_left ul {
        text-align: center;
        padding: 65% 0 0;
    }

    #fv_left ul li {
        margin: 0 0 2em 0;
    }

    #fv_left ul li a {
        color: #000;
        text-decoration: none;
        font-weight: 400;
        font-size: 14px;
    }
#fv_left ul li a:hover{
        color: #666;
}
    #fv_left ul li:nth-child(4) a,
    #nav_menu ul li:nth-child(4) a {
        font-size: 1.1em;
        border-bottom: #000 1px solid;
    }

    #fv_right {
        width: 75%;
        position: relative;
        /* 画像の縦横比を固定して高さを確保する (例: 16:9なら 56.25%) */
        /* 横幅に対して高さが何%か。計算式：(高さ ÷ 幅) × 100 */
        padding-top: 49.6%;
        /* ここを画像の比率に合わせて調整（3:2なら66.6%、4:3なら75%） */
        overflow: hidden;
    }

    #fv_right img.fv_slide {
        width: 100%;
        height: 100%;
        /* 親要素いっぱいに広げる */
        object-fit: cover;
        /* 画像を枠内に綺麗に収める */
        position: absolute;
        top: 0;
        left: 0;
        display: none;
        /* 最初は非表示 */
        z-index: 1;
    }

    #fv_right img.fv_slide:first-child {
        display: block;
        /* 1枚目だけ表示 */
        z-index: 2;
        /* 1枚目を少し上に */
    }


#sp_box02_text{
    display: none;
}

    @media (max-width: 768px) {
        #fv_wrapper {
            display: block;
            /* 縦並びに強制 */
        }

        #fv_right {
            width: 100%;
            margin-top: 10px;
            /* 必要に応じて調整 */
        }
    }

    #fv_right img {
        width: 100%;
    }

    /* box01 */
    #box01 {
        width: 100%;
        max-width: 1900px;
        margin: 0 auto;
        padding: 10% 0 8%;
    }

    #box01 h2 {
        padding: 0 0 0 2%;
        font-size: clamp(20px, 10.2609px + 3.0435vw, 48px);
        font-weight: 500;
        margin: 0 0 1%;
    }

    #box01 article {
        display: flex;
    }

    #box01 article figure img {
        margin: 0 0 1%;
    }

    #box01 article figure p {
        text-align: right;
        font-size: clamp(10px, 9.3043px + 0.2174vw, 12px);
    }



    #box01 article>div {
        position: relative;
        margin: 0 0 0 -5%;
        z-index: 10;
    }

    #box01 article div div {
        background-color: #fff;
        padding: 0 0 5% 5%;
    }

    #box01 article div div h3 {
        font-size: clamp(36px, 23.4783px + 3.913vw, 72px);
        line-height: 1;
        font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
        margin: 0 0 4%;
    }

    #box01 article div div h3 span {
        font-size: 2em;
    }

    /* box02 */
    #box02 {
        background-color: #e6dfce;
        padding: 5% 0;
    }

    #box02_wrapper,
    #box03_wrapper {
        width: 90%;
        max-width: 1200px;
        margin: 0 auto;
    }

    #box02_wrapper>h2 {
        text-align: center;
        font-family: "Yu Mincho", "YuMincho", serif;
        font-size: clamp(48px, 22.9565px + 7.8261vw, 120px);
        font-weight: normal;
    }

    #box02_wrapper>h3,
    #box03_wrapper>h3 {
        text-align: center;
        font-size: clamp(18px, 13.8261px + 1.3043vw, 30px);
        margin: 0 0 5%;
        font-weight: 500;
    }

    #box02_photo {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        margin: 0 0 5%;
    }

    #box02_photo div,
    #box02_text div {
        width: 49%;
    }

    #box02_photo div figure:first-of-type {
        margin: 0 0 4%;
    }

    #box02_text {
        display: flex;
        justify-content: space-between;
        margin: 0 0 8%;
        font-size: clamp(12px, 7.8261px + 1.3043vw, 24px);
    }

    #box02_text div h3,#sp_box02_text h3 {
        font-size:clamp(13px, 9.1739px + 1.1957vw, 24px);
        font-weight: 500;
        margin: 0 0 1%;
    }

    #box02_text div h3 span,#sp_box02_text h3 span {
        font-family: "Yu Mincho", "YuMincho", serif;
        font-size: 1.5em;
    }

    #box02_text div:nth-child(2) p:first-of-type {
        margin: 0 0 8%;
    }

    #flow {
        background-image: url(../template/images/flow.webp);
        background-repeat: no-repeat;
        background-position: 0 0;
        min-height: 2244px;
    }

    #flow h2 {
        font-size: clamp(36px, 23.4783px + 3.913vw, 72px);
        font-family: "Yu Mincho", "YuMincho", serif;
        font-weight: normal;
        padding: 0 0 0 130px;
        margin: 0 0 230px 0;
    }

    #flow p {
        font-size:  clamp(12px, 9.913px + 0.6522vw, 18px);
    }

    #flow01,
    #flow03,
    #flow05,
    #flow07,
    #flow09 {
        padding: 0 0 0 235px;
    }

    #flow02,
    #flow04,
    #flow06,
    #flow08 {
        padding: 0 0 0 540px;
    }

    #flow01 {
        margin: 0 0 170px 0;
    }

    #flow02 {
        margin: 0 0 150px 0;
    }

    #flow03 {
        margin: 0 0 150px 0;
    }

    #flow04 {
        margin: 0 0 150px 0;
    }

    #flow05 {
        margin: 0 0 190px 0;
    }

    #flow06 {
        margin: 0 0 180px 0;
    }

    #flow07 {
        margin: 0 0 180px 0;
    }

    #flow08 {
        margin: 0 0 170px 0;
    }

    #flow09 {
        margin: 0 0 170px 0;
    }

    /* box03 */
    #box03 {
        background-color: #e6e6e6;
        padding: 5% 0;
    }

    #box03_wrapper>h2 {
        text-align: center;
        font-family: "Yu Mincho", "YuMincho", serif;
        font-size: clamp(36px, 23.4783px + 3.913vw, 72px);
        font-weight: normal;
    }

    #box03_top {
        display: flex;
        justify-content: space-between;
        margin: 0 0 8%;
    }

    .box03_list,
    .order_list {
        width: 48.3%;
    }

    .box03_top_photo {
        position: relative;
    }

    .box03_top_photo>h4 {
        position: absolute;
        right: 5%;
        top: 5%;
        width: 12%;
    }

    .box03_top_photo div {
        width: 100%;
        position: absolute;
        left: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.5);
        padding: 2% 3%;
        box-sizing: border-box;
    }

    .box03_top_photo div h4 {
        color: #fff;
        font-family: "Yu Mincho", "YuMincho", serif;
        font-size: clamp(18px, 11.7391px + 1.9565vw, 36px);
        font-weight: normal;
    }

    .box03_top_photo div p {
        color: #fff;
    }

    .box03_top_text_body {
        background-color: #fff;
        padding: 3% 5%;
    }

    .box03_top_text,
    .order_data {
        display: flex;
        justify-content: space-between;
        margin: 0 0 2%;
    }

    .box03_top_text p,
    .order_data p {
        font-size: clamp(16px, 13.2174px + 0.8696vw, 24px);
        font-weight: 500;
    }

    .box03_top_text p:first-of-type,
    .order_data p:first-of-type {
        font-family: "Yu Mincho", "YuMincho", serif;
    }

    .box03_top_text p:last-of-type span,
    .order_data p:last-of-type span {
        font-size: .6em;
        font-weight: 400;
    }

    .box03_top_btn {
        text-align: center;
    }

    .box03_top_btn a {
        display: block;
        background-color: #c48252;
        text-decoration: none;
        color: #fff;
        padding: 1%;
        box-sizing: border-box;
        font-size: clamp(16px, 13.2174px + 0.8696vw, 24px);
        font-weight: 400;
    }

.box03_top_btn a:hover {
    background-color: #d19a6f;
}

    #box03_wrapper>h3:last-of-type {
        margin: 0 0 2% 0;
    }

    #order_title {
        width: 90%;
        max-width: 450px;
        margin: 0 auto 5%;
        border: #000 1px solid;
        text-align: center;
        font-family: "Yu Mincho", "YuMincho", serif;
        font-size: clamp(36px, 23.4783px + 3.913vw, 72px);
        font-weight: normal;
        line-height: 1;
        padding: .5% 0 0;
    }

    #order {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .order_list {
        margin: 0 0 5%;
        background-color: #e6dfce;
        padding: 8% 3% 3%;
        box-sizing: border-box;
        text-align: center;
    }

    .order_list figure {
        margin: 0 0 8%;
    }

    .order_list figure img {
        margin: 0 auto;
    }

    .order_list h4 {
        font-family: "Yu Mincho", "YuMincho", serif;
        font-size:clamp(18px, 10.7391px + 1.9565vw, 36px);
        font-weight: normal;
        line-height: 1.3;
    }
.order_list h4 strong{
        font-size: clamp(36px, 23.4783px + 3.913vw, 72px);
        display: block;
        font-weight: normal;
}
    .order_list h4 span {
        display: block;
        font-size: clamp(18px, 11.7391px + 1.9565vw, 36px);
    }

    .order_list address {
        font-size: clamp(14px, 12.6087px + 0.4348vw, 18px);
        font-weight: 400;
        margin: 0 0 10%;
    }

    .order_text {
        margin: 0 0 1%;
    }

    .order_btn a {
        display: block;
        background-color: #2c5560;
        text-decoration: none;
        color: #fff;
        padding: 1%;
        box-sizing: border-box;
        font-size: clamp(16px, 13.2174px + 0.8696vw, 24px);
        font-weight: 400;
    }
.order_btn a:hover {
    filter: brightness(1.35);
}
    /* footer */
    footer {
        padding: 3%;
        background-color: #000;
        text-align: center;
        color: #fff;
    }

    footer a {
        color: #fff;
        text-decoration: none;
    }

    /* sub */
    header#sub {
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
        padding: 20px 0;
        position: relative;
        /* ボタンの基準位置にする */
        display: flex;
        justify-content: center;
        /* ロゴを中央に寄せる */
        align-items: center;
    }

    header#sub h1 {
        max-width: 64px;
        margin: 0;
        /* 余計なマージンを消す */
    }

    header#sub h1 img {
        width: 100%;
        display: block;
    }

    /* ハンバーガーボタンを右端に固定 */
    #nav_toggle {
        width: 30px;
        height: 24px;
        position: absolute;
        /* 親要素に対して絶対配置 */
        right: 20px;
        /* 右端からの距離 */
        top: 50%;
        /* 上から50% */
        transform: translateY(-50%);
        /* 自身の高さの半分戻して中央合わせ */
        cursor: pointer;
        z-index: 101;
    }

    /* 線などの基本スタイルは前回同様 */
    #nav_toggle span {
        display: block;
        width: 100%;
        height: 2px;
        background-color: #333;
        position: absolute;
        transition: all 0.4s;
    }

    #nav_toggle span:nth-child(1) {
        top: 0;
    }

    #nav_toggle span:nth-child(2) {
        top: 11px;
    }

    #nav_toggle span:nth-child(3) {
        bottom: 0;
    }

    /* ×印への変化 */
    #nav_toggle.open span:nth-child(1) {
        transform: translateY(11px) rotate(-45deg);
    }

    #nav_toggle.open span:nth-child(2) {
        opacity: 0;
    }

    #nav_toggle.open span:nth-child(3) {
        transform: translateY(-11px) rotate(45deg);
    }

    /* メニュー本体の設定（前回と同じ） */
    #nav_menu {
        position: fixed;
        top: 0;
        right: -100%;
        width: 100%;
        height: 100vh;
        background: rgba(255, 255, 255, 0.95);
        transition: all 0.5s;
        padding-top: 100px;
        z-index: 100;
    }

    #nav_menu.open {
        right: 0;
    }

    #nav_menu ul {
        list-style: none;
        text-align: center;
    }

    #nav_menu ul li {
        margin-bottom: 30px;
    }

    #nav_menu ul li a {
        text-decoration: none;
        color: #000;
        font-size: 14px;
        font-weight: bold;
    }
    
 #nav_menu ul li a:hover{
 color: #666;
 }
 
 
    #sub_wrapper {
        width: 90%;
        max-width: 1200px;
        margin: 0 auto;
    }

    #sub_photo_gallery {
        width: 100%;
        max-width: 1200px;
        /* ヘッダー等に合わせて調整 */
        margin: 0 auto 5%;
    }

    /* メイン画像 */
    #sub_photo_main {
        width: 100%;
        margin-bottom: 10px;
        background-color: #f0f0f0;
        /* 画像がない部分の背景色（任意） */
        overflow: hidden;
    }

    #sub_photo_main img {
        width: 100%;
        height: 800px;
        object-fit: contain;
        display: block;
    }

    /* サムネイル（グリッドレイアウト） */
    #sub_photo_thumbs {
        display: grid;
        grid-template-columns: repeat(8, 1fr);
        /* 8列 */
        gap: 5px;
        /* 画像間の隙間 */
        list-style: none;
        padding: 0;
    }

    #sub_photo_thumbs li {
        cursor: pointer;
        opacity: 0.6;
        transition: opacity 0.3s;
        aspect-ratio: 3 / 2;
        overflow: hidden;
        background-color: #eee;
    }

    #sub_photo_thumbs img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        display: block;
    }

    /* 選択中のサムネイルを明るくする */
    #sub_photo_thumbs li.active,
    #sub_photo_thumbs li:hover {
        opacity: 1;
    }

    #sub_photo_thumbs img {
        width: 100%;
        height: auto;
        display: block;
    }

    /* スマホ対応：4列 × 4段に切り替え */
    @media (max-width: 768px) {
        #sub_photo_thumbs {
            grid-template-columns: repeat(4, 1fr);
        }

        #sub_photo_main img {
            height: auto;
            width: 100%;
            /* スマホでは高さを抑える */
        }
    }

#sub_photo_main {
    position: relative;
}

.gallery_nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 60px;
    background: rgba(0,0,0,0.4);
    border: none;
    cursor: pointer;
    z-index: 10;
}

/* 矢印本体をCSSで描く */
.gallery_nav::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 16px;
    border-top: 3px solid #fff;
    border-right: 3px solid #fff;
    transform-origin: center;
}

/* 左矢印 */
.gallery_nav.prev {
    left: 0;
}
.gallery_nav.prev::before {
    transform: translate(-50%, -50%) rotate(-135deg);
}

/* 右矢印 */
.gallery_nav.next {
    right: 0;
}
.gallery_nav.next::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

/* ホバー */
.gallery_nav:hover {
    background: rgba(0,0,0,0.6);
}

/* スマホサイズ */
@media (max-width:768px){

    .gallery_nav{
        width: 25px;
        height: 30px;
        background: rgba(0,0,0,0.4);
    }

    .gallery_nav::before{
        width: 10px;
        height: 10px;
        border-width: 2px;
    }

}





    #sub_title_top {
        display: flex;
    }

    #sub_title_top li {
        font-size: clamp(16px, 13.2174px + 0.8696vw, 24px);
        font-weight: 500;
        padding: .5% 3%;
        box-sizing: border-box;
    }

    #sub_title_top li:first-of-type {
        margin: 0 2% 0 0;
    }



    #sub_title h2 {
        padding: 2%;
        font-size: clamp(16px, 9.0435px + 2.1739vw, 36px);

    }

    #sub_title_bottom {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
    }

    #sub_title_bottom div:first-of-type {
        padding: 0 2%;
        font-size:  clamp(12px, 9.913px + 0.6522vw, 18px);
        font-weight: 500;
    }
#sub_title_bottom div:first-of-type span{
padding: 0 0 0 3em;
    display: inline-block;
}
    .sub_link {
        margin-left: auto;
    }

    .sub_link ul {
        display: flex;
        align-items: center;
        width: 480px;
        margin-left: auto;
    }

    .sub_link ul>li {
        margin: 0 3% 0 0;
    }

    .sub_link ul>li:first-of-type {
        width: 180px;
    }

    .sub_link>ul>li:first-of-type a,.sub_link>ul>li:first-of-type span {
        font-size: clamp(12px, 10.6087px + 0.4348vw, 16px);
        color: #fff;
        text-decoration: none;
        font-weight: 500;
        display: block;
        text-align: center;
        background-color: #c48252;
        padding: 1% 2%;
    }

.sub_link>ul>li:first-of-type a:hover {
    background-color: #d19a6f;
}

    .sub_link ul>li:nth-child(2) a {
        font-size: clamp(18px, 13.8261px + 1.3043vw, 30px);
        text-decoration: none;
        color: #000;
        font-weight: 500;
        line-height: 1;

    }

    /* 親のliを基準にする */
    .sub_link ul>li:last-of-type {
        position: relative;
        margin: 0;
    }
.sub_link ul>li img{
transition: filter .25s ease, transform .25s ease;
}

.sub_link ul>li:hover img{
    filter: brightness(1.25);
    transform: translateY(-2px);
}


    /* 隠れているメニューのスタイル */
    .sub_link ul li ul.share_menu {
        display: none;
        /* 初期状態は非表示 */
        position: absolute;
        top: 110%;
        /* アイコンの少し下に配置 */
        right: 0;
        width: 160px;
        background: #fff;
        border: 1px solid #ccc;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        z-index: 100;
        flex-direction: column;
        /* 横並びを防いで縦並びに */
        padding: 10px 0;
    }

    .sub_link ul li ul.share_menu li {
        width: 100%;
        margin: 0;
    }



    .sub_link ul li ul.share_menu li a {
        display: block;
        padding: 8px 15px;
        font-size: 14px;
        color: #000;
        text-decoration: none;
        text-align: left;
        line-height: 1;
    }

    .sub_link ul li ul.share_menu li a:hover {
        background-color: #f5f5f5;
    }

    #sub_text {
        padding: 0 2%;
        font-size: clamp(14px, 12.6087px + 0.4348vw, 18px);
        font-weight: 500;
        margin: 0 0 8%;
    }

#pdf_btn {
text-align: center;
    padding: 0 0 8%;
}

#pdf_btn img{
    margin: 0 auto;
}
#pdf_btn img:hover{
    filter: brightness(1.1);
}
    #map {
        width: 100%;
        margin: 0 0 5%;
    }

    #map iframe {
        width: 100%;
        height: 450px;
    }

    #data {
        display: flex;
        justify-content: space-between;
        margin: 0 0 5%;
        font-size:clamp(10px, 7.2174px + 0.8696vw, 18px);
        font-weight: 500;
    }

    #data h2 {
        font-weight: 500;
    }

    #data_left,
    #data_right {
        width: 49%;
    }

    #data_left table,
    #data_right table {
        width: 100%;
    }

    #data_left table th,
    #data_right table th {
        text-align: left;
        font-weight: 500;
        padding: .5% 0;
    }

    #data_left table th {
        width: 35%;
    }

    #data_left table td {
        width: 65%;
    }

    #data_right table th {
        width: 60%;
    }

    #data_right table td:nth-child(2) {
        width: 15%;
        text-align: right;
    }

    #data_right table td:nth-child(3) {
        width: 18%;
        text-align: center;
    }

    #data_right table td:nth-child(4) {
        width: 8%;
        text-align: right;
    }

    #sub_btn {
        padding: 5% 0 8%;
        margin: 0 auto;
        display: flex;
    justify-content: center;
    gap: 1em;
    }

    #sub_btn a {
        display: block;
        text-align: center;
        color: #fff;
        text-decoration: none;
        font-weight: 500;
        font-size: clamp(16px, 13.2174px + 0.8696vw, 24px);
        padding: 1% 0 2%;
        width: 300px;
        box-sizing: border-box;
    }

#back_btn {
text-align: center;
    padding: 0 0 8%;
}

#back_btn a{
        color: #000;
        text-decoration: none;
        font-weight: 500;
        font-size:16px;

}

#back_btn a:hover{
        color: #666;

}
    /* sub01 */
    #sub01 #sub_title {
        border-left: #2c5560 5px solid;
        padding: 0 0 2%;
        margin: 0 0 5%;
    }

    #sub01 #sub_title_top li:first-of-type {
        background-color: #2c5560;
        color: #fff;
    }

    #sub01 #sub_title_top li:last-of-type {
        border: #000 2px solid;
    }


    #sub01 #sub_btn a {
        background-color: #c48252;
    }

    #sub01 #sub_btn a:hover {
        background-color: #d19a6f;
    }
    /* sub02 */
    body#sub02 {
        background-color: #e6dfce;
    }

    #sub02 #sub_title {
        border-left: #998675 5px solid;
        padding: 0 0 2%;
        margin: 0 0 5%;
    }

    #sub02 #sub_title_top li:first-of-type {
        background-color: #998675;
        color: #fff;
    }

    #sub02 #sub_title_top li:last-of-type {
        border: #000 2px solid;
    }


    #sub02 #sub_btn a {
        background-color: #2c5560;
    }
#sub02 #sub_btn a:hover{
background-color: #447a87;
}

    #sub02 #sub_btn li:last-of-type a {
        background-color: #197b95;
    }
#sub02 #sub_btn li:last-of-type a:hover{
background-color: #288fab;
}



    #sub01 #sub_btn li:last-of-type a {
        background-color: #c4a252;
    }

    #sub01 #sub_btn li:last-of-type a:hover {
        background-color: #d7b972;
    }

    /* contact */
    #contact_text {
        padding: 0 0 5%;
        text-align: center;
        font-size: clamp(14px, 12.6087px + 0.4348vw, 18px);
    }

    #contact_text h2 {
        font-family: "Yu Mincho", "YuMincho", serif;
        font-size: clamp(36px, 23.4783px + 3.913vw, 72px);
        font-weight: normal;
    }

    #contact {
        padding: 0 0 10%;
    }

    #contact table {
        width: 100%;
        border-top: #000 1px solid;
        margin: 0 0 2%;
        font-size: clamp(14px, 12.6087px + 0.4348vw, 18px);
    }

    #contact table tr {
        border-bottom: #000 1px solid;
    }

    #contact table th {
        width: 30%;
        text-align: left;
        padding: 2% 0;
        vertical-align: middle;
    }

    #contact table td {
        width: 70%;
        text-align: left;
        padding: 2% 0;
        vertical-align: middle;
    }

    #contact table td input,
    #contact table td textarea {
        width: 100%;
    }
#contact table td input[type="date"]{
    width: auto;
}

    #contact table td textarea {
        height: 250px;
    }

    #contact p {
        margin: 0 0 3%;
        font-size: clamp(14px, 12.6087px + 0.4348vw, 18px);
    }

    #contact p a {
        color: #2c5560;
        text-decoration: none;
    }
 #contact table p{
        margin: 0;
 }
 
    #contact_btn {
        text-align: center;
    }

    #contact_btn input[type="submit"] {
        border: none;
        background-color: #c48252;
        color: #fff;
        font-weight: 500;
        font-size: clamp(16px, 13.2174px + 0.8696vw, 24px);
        padding: 1% 3%;
        border-radius: 0;
         cursor:pointer
    }
#contact_btn input[disabled] {
    background-color: #ccc;
    cursor: not-allowed;
    opacity: 0.6;
}


.readmore-btn{
        display: none;
}
    @media screen and (max-width: 1700px) {
        #box01 article figure p {
            padding: 0 8% 0 0;
        }
    }

    @media screen and (max-width: 1300px) {
        #fv_left ul {
            text-align: center;
            padding: 45% 0 0;
        }

        #box01 article>div {
            margin: 0;
            position: static;
            width: 50%;
        }

        #box01 article figure {
            width: 50%;
        }
    }

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

            .pc {
            display: none;
        }

        .sp {
            display: block;
        }
        
        html {
  scroll-behavior: smooth;
  scroll-padding-top: 70px;
}

        /* header */

        header#top {
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 10px 0;
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
                    position: fixed;
        background: #fff;
        top: 0;
        left: 0;
            z-index: 999;
        }

        header#top h1 {
            max-width: 40px;
            margin: 0;
            width: 100%;
        }

        header#top h1 img {
            width: 100%;
            display: block;
        }

        /* fv */
        #fv {
            margin: 150px 0 0;
        }

        #fv h2 {
            position: absolute;
            top: -4%;
            left: 2%;
            width: 80%;
        }

        #fv h2 p {
            font-size: 10px;
            padding: 3% 0 0;
        }

        #fv_right {
            width: 100%;
        }

        /* box01 */


        #box01 article {
            display: flex;
            flex-direction: column;
        }

        #box01 article figure {
            width: 94%;
            margin: 0 auto;
        }


        #box01 article figure p {
            padding: 0;
        }



        #box01 article>div {
            position: relative;
            margin: 0 auto;
            z-index: 10;
            width: 94%;
        }

        #box01 article div div {
            padding: 0;
        }
        
        #box01 h2 {
            padding: 0 0 0 3%;
            font-size: clamp(20px, 10.2609px + 3.0435vw, 48px);
            margin: 0 0 3%;
        }


        /* box02 */


        #box02_text {
            flex-direction: column;
        }

        #box02_text div {
            width: 100%;
        }

        #box02_text div:nth-child(1) {
            margin: 0 0 8%;
        }


        #flow {
            background-image: none;
            min-height: auto;
        }

        #flow h2 {
            font-size: clamp(36px, 23.4783px + 3.913vw, 72px);
            font-family: "Yu Mincho", "YuMincho", serif;
            font-weight: normal;
            padding: 0;
            margin: 0;
            text-align: center;
        }

        #flow h3 {
            border: #000 1px solid;
            text-align: center;
            font-size: 18px;
            font-weight: 500;
            padding: .5em 0;
            margin: 50px 0 .5em;
            position: relative;
        }

        /* 縦線の設定 */
        #flow h3::before {
            content: "";
            position: absolute;
            /* タイトルの真上、中央に配置 */
            top: -40px;
            left: 50%;
            transform: translateX(-50%);
            /* 線の見た目 */
            width: 1px;
            height: 40px;
            background-color: #000;
        }

        /* 最初のステップだけは上に線がいらない場合 */
        #flow h3.first {
            margin: 0 0 .5em;
        }

        #flow h3.first::before {
            display: none;
        }

        #flow01,
        #flow03,
        #flow05,
        #flow07,
        #flow09,
        #flow02,
        #flow04,
        #flow06,
        #flow08 {
            padding: 0;
            margin: 0 0 10px;
        }

        /* box03 */



        /* sub */
        header#sub {
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
                                position: fixed;
        background: #fff;
        top: 0;
        left: 0;
            z-index: 999;
        }

#sub02 header#sub{
background: #e6dfce;
}

#sub_wrapper {
    padding: 90px 0 0;
}


        header#sub h1 {
            max-width: 10%;
        }

        #sub_title_top li {
            font-size: 14px;
            padding: 1% 3% .5% 3%;
        }

        #sub_title h2 {
            padding: 5%;
        }

        #sub_title_bottom {
            flex-direction: column;
        }

        #sub_title_bottom div:first-of-type {
            margin: 0 0 5%;
            padding: 0 5%;
            width: 100%;
            box-sizing: border-box;
        }

        .sub_link ul {
            width: 100%;
            padding: 0 0 0 5%;
            box-sizing: border-box;
            flex-wrap: wrap;
        }

        .sub_link ul>li:first-of-type {
            width: 122px;
        }

        .sub_link ul>li:first-of-type a {
            font-size: 12px;
        }

        .sub_link {
            margin-left: auto;
            width: 100%;
        }

        #sub_text {
            padding: 0;
        }

        #data {
            flex-direction: column;
        }

        #data_left,
        #data_right {
            width: 100%;
        }

        #data_left table,
        #data_right table {
            margin: 0 0 2%;
        }

        #data_left table tr,
        #data_right table tr {
            border-bottom: #e6e6e6 1px solid;
        }

        #data_left table th,
        #data_right table th {
            width: 38%;
            padding: 2% 0;
        }

        #data_left table td,
        #data_right table td {
            padding: 2% 0;
        }

        #data_right table td:nth-child(2) {
            width: 25%;
        }

        div#bottom.sub_link ul {
            padding: 0;
        }

        .sub_link ul>li:nth-child(2) a {
            font-size: 14px;
        }

        /* sub01 */
        #sub01 #sub_title {
            border-left: #2c5560 3px solid;
        }

        #sub01 #sub_title_top li:last-of-type {
            border: #000 1px solid;
        }

        #sub02 #sub_title {
            border-left: #998675 3px solid;
        }

        #sub02 #sub_title_top li:last-of-type {
            border: #000 1px solid;
        }

        /* contact */


        #contact table th {
            width: 100%;
            display: block;
            padding: 2% 0 0;
            font-weight: 500;
        }

        #contact table td {
            width: 100%;
            display: block;
            padding: 2% 0 3%;
        }

        #map iframe {
            width: 100%;
            height: 250px;
        }


    #contact_text h2 {
        font-size:33px;
    }
    
    
#back_btn a{
        font-size:12px;

}

.box03_top_photo div p{
font-size: 9px;
}

#flow p{
text-align: center;
}

#box01 article div div p{
font-size: clamp(12px, 7.8261px + 1.3043vw, 24px);

}


        .order_text {
            font-size: 12px;
        }



#sp_btn{
padding: 2em;
}

#sp_btn img{
    margin: 0 auto;
}

#fv_right {
    padding-top: 132vw;
}
    }
    
    

        
        
        
        
    /*ページトップ*/
    .pagetop-btn{
    position: fixed;
    right: 30px;
    bottom: 30px;
    width: 56px;
    height: 56px;
    background: #333;
    border-radius: 50%;
    z-index: 9999;
    text-decoration: none;
}

.pagetop-btn::before{
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14px;
    height: 14px;
    border-top: 3px solid #fff;
    border-left: 3px solid #fff;
    transform: translate(-50%, -30%) rotate(45deg);
}

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

        #box02_wrapper>h3,
        #box03_wrapper>h3 {
            font-size: 16px;
        }
        
        #box03_wrapper>h2 {
            font-size: 30px;
        }
    
        #box03_top {
            flex-direction: column;
        }

        .box03_list,
        .order_list {
            width: 100%;
            margin: 0 0 5%;
        }

        #order_title {
            max-width: 150px;
            font-size: 24px;
        }

        #order {
            flex-direction: column;
        }

        .order_list figure img {
            height: 100px;
        }

        
        .order_list {
    padding: 8% 5% 3%;
}

    .pagetop-btn{
        display: none;
    }
    
    .box03_top_photo figure img{
            width: 100%;
    
    }
#sub_btn {
flex-direction: column;
}

#sub_btn a {
    width: 100%;
}

        /* fv */
        #fv {
            margin: 110px 0 0;
            position: static;
        }
         #fv h2 {
position: static;
        top: 0;
        left: 2%;
        width: 90%;
        padding: 0 0 2% 2%;
  }
.readmore-hidden {
    display: none;
}

.readmore-btn {
    display: block;
    margin-top: 10px;
    text-align: right;
    color: #2d545f;
    text-decoration: underline;
    cursor: pointer;
    font-weight: 500;
}

.readmore-btn::after {
    content: " ＞";
}

#box02_text.pc{
display:none;
}

#sp_box02_text{
    display: block;
}

#sp_box02_text p{
            margin:0 0 8%;
}
}


@media screen and (max-width: 500px){
        /* fv */
        #fv {
            margin: 90px 0 0;
        }
        }
        
        
/*coupon*/
    #coupon {
        width: 100%;
    }

#toppage #coupon {
position: fixed;
    bottom: 10%;
    right: 0;
        z-index: 99;
        max-width: 350px;
}

#sub_wrapper #coupon{
        max-width: 600px;
            margin: 0 auto 2em;
}

    #sub_wrapper #coupon_main h3 {
        font-size:20px;
    }
    
    
    #sub_wrapper #coupon_main p {
        font-size:15px;
    }

    #sub_wrapper #coupon_main h4 {
        font-size:22px;
    }
    
    
    #sub_wrapper #coupon_main #coupon_main_bottom p {
        font-size:18px;
    }
    
   #sub_wrapper #coupon_close {
        font-size:22px;
    }
    
    
    #sub_wrapper #coupon_expand {
        font-size:22px;
    }
    
    #coupon h2 {
        margin: 0;
    }

    #coupon_main {
        background-image: linear-gradient(150deg, rgba(26, 17, 15, 1), rgba(84, 73, 68, 1) 49%, rgba(38, 29, 26, 1) 72%, rgba(0, 0, 0, 1));
        color: #fff;
        padding: 1em 1em;
        box-sizing: border-box;
        text-align: center;
    }

    #coupon_main h3 {
        font-size:16px;
        font-family: "游明朝 Medium", "Yu Mincho Medium", "YuMincho Medium", "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", serif;
    }

    #coupon_main p {
        font-size:11px;
    }

    #coupon_main_bottom {
        padding: 1em 0 .5em;
    }

    #coupon_main h4 {
        font-size:16px;
        font-family: "游明朝 Medium", "Yu Mincho Medium", "YuMincho Medium", "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", serif;
        line-height: 1.8;
    }

    #coupon_main #coupon_main_bottom p {
        text-align: left;
        width: 80%;
        margin: 0 auto;
        font-size:10px;
    }

    #coupon_main_bottom figure {
        padding: 1em 0 2em;
    }
    #coupon_main_bottom figure img{
        margin: 0 auto;
        width: 80%;
    
    }
    #coupon_close {
        font-size:16px;
        font-weight: bold;
        font-family: "游明朝 Medium", "Yu Mincho Medium", "YuMincho Medium", "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", serif;
        line-height: 1.2;
    }

    #coupon_close span {
        display: block;
    }

    #coupon_expand {
        background-image: url(../template/images/coupon_bottom.png);
        background-size: cover;
        text-align: center;
        font-size:16px;
        font-weight: bold;
        font-family: "游明朝 Medium", "Yu Mincho Medium", "YuMincho Medium", "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", serif;
        color: #000;
        line-height: 1.2;
        padding: .5em 0 .3em;
    }

    #coupon_expand span {
        display: block;
    }


    /* 初期は閉じる */
    #coupon_main_bottom {
        display: none;
    }

    /* 開いたとき */
    #coupon.open #coupon_main_bottom {
        display: block;
    }

    /* 開いている時は下ボタン非表示 */
    #coupon.open #coupon_expand {
        color: transparent;
    }

    /* spanも念のため */
    #coupon.open #coupon_expand span {
        opacity: 0;
    }

    /* 開くボタン */
    #coupon_expand {
        cursor: pointer;
    }

    /* 閉じるボタン */
    #coupon_close {
        cursor: pointer;
    }

    /* ---------------- */
    /* キラン演出 */
    /* ---------------- */

    #coupon {
        position: relative;
        overflow: hidden;
    }

    /* 閉じている時だけキラン */
    #coupon:not(.open)::after {
        content: "";
        position: absolute;
        top: 0;
        left: -60%;
        width: 40%;
        height: 100%;
        background: linear-gradient(120deg,
                rgba(255, 255, 255, 0) 0%,
                rgba(255, 255, 255, 0.7) 50%,
                rgba(255, 255, 255, 0) 100%);
        transform: skewX(-20deg);
        animation: shineCoupon 4s ease-in-out infinite;
        pointer-events: none;
        /* クリック邪魔しない */
    }

    /* アニメーション */
    @keyframes shineCoupon {
        0% {
            left: -80%;
        }

        25% {
            left: 140%;
        }

        /* ここから待機タイム */
        100% {
            left: 140%;
        }
    }

@media screen and (max-width: 500px){
#coupon {
    position: relative;
    overflow: hidden;
    margin: 0 auto;
    padding: 2em 0 0;
}

#toppage #coupon {
position: static;
    top: 50%;
    right: 0;
}

    #sub_wrapper #coupon_main h3 {
        font-size:16px;
    }
    
    
    #sub_wrapper #coupon_main p {
        font-size:11px;
    }

    #sub_wrapper #coupon_main h4 {
        font-size:16px;
    }
    
    
    #sub_wrapper #coupon_main #coupon_main_bottom p {
        font-size:10px;
    }
    
   #sub_wrapper #coupon_close {
        font-size:16px;
    }
    
    
    #sub_wrapper #coupon_expand {
        font-size:16px;
    }
}