@charset "utf-8";
/* CSS Document */

/* =Reset-------------------------------------- */ 

html {
    font-size: 62.5%; /* 基準 10px */
    font-family: 'Merriweather', serif;
}

* {
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
    color: #006400; /* リンクのカラーをディープグリーンに設定 */
}

ul {
    list-style: none;
}

img {
    max-width: 100%;
    vertical-align: middle;
    border: 0;
}

/* デフォルトのスタイル（パソコン） */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

.container {
    width: 80%;
    margin: auto;
}

/* タブレット向けのスタイル */
@media only screen and (max-width: 768px) {
    .container {
        width: 90%;
    }
}

/* スマートフォン向けのスタイル */
@media only screen and (max-width: 480px) {

    /* スマホは文字が小さく見える端末があるので微調整 */
    html {
        font-size: 58%;
    }

    .container {
        width: 100% !important;
        padding: 0 12px !important; /* 読みやすい余白に調整 */
    }
}





/* 色調を調整 */
body { 
    font-family: 'Merriweather', serif;
    color: #4A4A4A; /* チャコールグレーに変更 */
    background-color: #FFFFFF; /* ライトグレーの背景色 */
}

h1, h2, h3 {
    font-family: 'Playfair Display', serif;
    color: #4A4A4A; /* チャコールグレーに変更 */
}

p {
    font-family: 'Lora', serif;
    color: #7D7D7D; /* ダスティグレーに変更 */
}

.highlight {
    font-family: 'Roboto', sans-serif;
    background-color: #FFFFFF;
    color: #4A4A4A; /* チャコールグレーに変更 */
}

blockquote {
    font-family: 'Noto Serif', serif;
    background-color: #FFFFFF;
    border-left: 5px solid #006400; /* 左側にディープグリーンのラインを追加 */
    color: #7D7D7D; /* ダスティグレーに変更 */
    padding: 10px;
    margin: 10px 0;
}

/* 最新ブラウザ向けの禁則処理 */
p.li, dt, dd, th, td, pre {
    line-break: strict;
    word-break: break-word; /* modern browsers including Edge */
}

/* ===== スマホ最適化（768px以下） ===== */
@media (max-width: 768px) {

    /* 見出しの行間を少し広げて読みやすく */
    h1, h2, h3 {
        line-height: 1.4;
    }

    /* スマホでは本文の行間を広げて読みやすく */
    p {
        line-height: 1.8;
        font-size: 1.35rem; /* 少し大きくして読みやすく */
    }

    /* blockquote の左右余白を調整 */
    blockquote {
        padding: 12px;
        margin: 15px 0;
        font-size: 1.3rem;
        line-height: 1.7;
    }
}

/* ===== スマホ最適化（480px以下） ===== */
@media (max-width: 480px) {

    /* 見出しをスマホ向けに少し小さく */
    h1 {
        font-size: 2.2rem;
    }
    h2 {
        font-size: 1.9rem;
    }
    h3 {
        font-size: 1.7rem;
    }

    /* 本文の読みやすさをさらに調整 */
    p {
        font-size: 1.3rem;
        line-height: 1.8;
    }

    blockquote {
        font-size: 1.25rem;
        padding: 10px 12px;
    }
}




/*link----------------------------------------*/
a:link { text-decoration: none; color:#004d00 }
a:visited { text-decoration: none; color:#004d00 }
a:hover {
    text-decoration: none;
    color:#004d00;
    opacity:0.8;
    filter: alpha(opacity=80);
    -ms-filter: "alpha( opacity=80 )";
}
a:active { text-decoration: none; color:#004d00 }

/*margin,clear:both----------------------------------------*/
.margin-10px{ width:100%; margin-bottom:10px; clear:both }
.margin-20px{ width:100%; margin-bottom:20px; clear:both }
.margin-30px{ width:100%; margin-bottom:30px; clear:both }
.margin-40px{ width:100%; margin-bottom:40px; clear:both }
.margin-60px{ width:100%; margin-bottom:60px; clear:both }
.margin-120px{ width:100%; margin-bottom:120px; clear:both }
.clr{ width:100%; clear:both }

/*font-decoration----------------------------------------*/
.font-bold{ font-weight:bold }
.blue{ color:#0F3FD8 }
.red{ color:#FF0004 }
.red-b { color:#C40509; font-weight:bold }
.red-b-2rem { color:#C40509; font-weight:bold; font-size:2rem }

/* =start-------------------------------------- */
body { background-color:#ffffff }

/* header-------------------------------------- */
header { width: 100%; }

#h-nav {
    width: 95%;
    margin: 0 auto;
}

/* PC用（floatレイアウト） */
#h-nav-left {
    float: left;
    width: 40%;
}

#h-nav h1 { font-size: 1.4rem; }

#h-nav-left img {
    margin-top: 5px;
    margin-bottom: 10px;
}

#h-nav-left span { display: none; }

/* 右側のボックス（スマホでは縦並び） */
#h-nav-right {
    width: 100%;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-top: 20px;
}

.hnr-t-box {
    width: 100%;
    margin-bottom: 10px;
    text-align: center;
}

.hnr-t-box-L,
.hnr-t-box-R {
    display: block;
    width: 100%;
    margin: 5px 0;
}

/* スマホ最適化（768px以下） */
@media only screen and (max-width: 768px) {

    /* float解除 → スマホで崩れない */
    #h-nav-left {
        float: none;
        width: 100%;
        text-align: center;
        margin-bottom: 10px;
    }

    #h-nav-left img {
        max-width: 70%;
        height: auto;
    }

    #h-nav-right {
        flex-direction: column;
        align-items: center;
        margin-top: 10px;
    }

    .hnr-t-box {
        flex-direction: column;
        align-items: center;
        padding: 5px;
        margin-bottom: 8px;
    }

    .hnr-t-box-L,
    .hnr-t-box-R {
        text-align: center;
        font-size: 1.2rem;
        margin: 3px 0;
    }

    /* スマホでは文字が小さすぎるので調整 */
    #h-nav h1 {
        font-size: 1.8rem;
        margin-bottom: 5px;
    }

    #h-nav-p {
        font-size: 1.2rem;
        line-height: 1.6;
    }
}

/* 全体をセンタリング */
#sp-header { text-align: center; }

/* ロゴをセンタリング */
.sph-left {
    display: flex;
    justify-content: center;
}

/* 表示設定 */
.hnr-t-box {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-bottom: 5px;
    text-align: center;
    padding: 5px;
}

.hnr-t-box-L,
.hnr-t-box-R {
    width: 100%;
    margin: 2px 0;
    font-size: 1rem;
}

/* 電話ボタン */
.phone-button {
    display: block;
    width: 90%;
    padding: 5px 10px;
    margin: 10px auto;
    background-color: #FFF5CC;
    color: #004d00;
    text-align: center;
    text-decoration: none;
    font-size: 1rem;
    border: 2px solid #004d00;
    border-radius: 8px;
    transition: background-color 0.3s, transform 0.2s;
    cursor: pointer;
}

.phone-button:hover {
    background-color: #F5DEB3;
    transform: scale(1.05);
}

.phone-button h2,
.phone-button div {
    margin: 0;
    padding: 0;
    color: #006400;
}


/* 共通の深緑色のバー */
.header-bar { 
    background-color: #006400;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 100px;
    padding: 10px 0;
}

/* PCロゴ（大きめ） */
.logo-img {
    width: 400px;
}

/* 電話番号の縦並び */
.contact-details {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

/* 電話ボタン */
.call-button {
    background-color: #f5f5dc;
    color: #006400;
    padding: 5px 10px;
    text-decoration: none;
    border-radius: 5px;
    display: inline-block;
    font-size: 1.2em;
    border: 2px solid #006400;
}

.call-button:hover {
    background-color: #f0f0f0;
}

/* PCヘッダーをスマホで非表示 */
@media (max-width: 768px) {
    #pc-header {
        display: none;
    }
}

/* 特定ページ用バー */
.header-bar-specific { 
    background-color: #006400;
    height: 10px;
    width: 100%;
    position: relative;
    top: 0;
    left: 0;
    z-index: 1;
}

/* 特定ページのメイン画像 */
.main-image-box-specific {
    width: 100%;
    overflow: hidden;
}

.main-image-box-specific .main-image img {
    width: 100%;
    height: auto;
    max-width: 100%;
    object-fit: cover;
}

/* tel-banner-sp */
#tel-banner-sp { width:100% }

/* PCヘッダー中央揃え */
#pc-header {
    text-align: center;
}

/* メインイメージ（PC基準） */
.main-image {
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
}

/* メインイメージボックス */
#main-image-box {
    position: relative;
    top: 0;
    width: 100%;
    height: auto;
    margin: 0 auto;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
}

#main-image-box img { 
    max-width: 960px;
    width: 100%;
    height: auto;
    display: block;
}

.index-bigbanner {
    margin-bottom: 40px;
}

/* PC専用画像 */
.desktop-img {
  display: none;
}

/* PC表示 */
@media (min-width: 768px) {
  #sp-header {
    display: none;
  }
  .desktop-img {
    display: block;
  }
}

/* スマホ表示 */
@media (max-width: 767px) {

  /* PCヘッダー非表示 */
  #pc-header {
    display: none;
  }

  /* スマホヘッダーのロゴを小さく */
  .logo-img {
    width: 65%;
    max-width: 260px;
  }

  /* 深緑バーのレイアウト調整 */
  .header-bar {
    flex-direction: column;
    gap: 15px;
    padding: 12px 0;
  }

  /* 電話番号の文字サイズ調整 */
  .contact-details {
    gap: 3px;
  }

  .call-button {
    font-size: 1.1rem;
    padding: 6px 12px;
    width: 80%;
    text-align: center;
  }

  /* メイン画像の高さを抑える（スマホで縦長になりすぎ防止） */
  #main-image-box img {
    max-width: 100%;
    width: 100%;
    height: auto;
  }

  /* スマホでの余白調整 */
  .index-bigbanner {
    margin-bottom: 25px;
  }
}



/* subpage-image-------------------------------------- */
#subpage-image-box { 
    width:100%;
}
.subpage-image { 
    margin:0 auto;
}

/* banner-3c---------------------------------------- */
#banner-3c { 
    width:95%; 
    margin:0 auto;
}
#banner-3c ul { 
    padding:0; 
    margin:0 auto; 
    list-style-type:none;
}
#banner-3c li { 
    font-size:1.2rem; 
    line-height:160%; 
    color:#999999;
}

/* sub-banner-3c---------------------------------------- */
#sub-banner-3c { 
    width:100%; 
    margin:0 auto 20px;
}
#sub-banner-3c ul { 
    padding:0; 
    margin:0 auto; 
    list-style-type:none;
}
#sub-banner-3c li { 
    margin-bottom:20px; 
    font-size:1.2rem; 
    line-height:160%; 
    color:#999999;
}

#sub-banner-3c h2 { 
    font-size:1.8rem; 
    font-weight:bold; 
    color:#122a88;
    border-bottom:2px #122a88 solid; 
    margin-bottom:20px;
}

#sub-banner-3c h3 { 
    font-size:1.6rem; 
    font-weight:bold; 
    color:#122a88;
    border-bottom:1px #122a88 solid; 
    margin-bottom:10px;
}

#sub-banner-3c h4 { 
    font-size:1.6rem; 
    font-weight:bold; 
    color:#b4344b;
}

#sub-banner-3c p { 
    font-size:1.2rem; 
    margin-bottom:10px;
}

/* sub-contents---------------------------------------- */
#sub-contents {
    width: 100%;
    margin: 0 auto;
}

#sub-contents h1 {
    font-size: 1.8rem;
    font-weight: bold;
    color: #4A4A4A;
    border-bottom: 2px solid #006400;
    margin-bottom: 20px;
}

#sub-contents p {
    font-size: 1.2rem;
    color: #7D7D7D;
}

/* infobox-shop-tel */
.infobox-shop-tel { 
    color: #006400;
    font-size: 2rem;
    font-weight: bold;
}

/* index-contents---------------------------------------- */
#index-contents { 
    position: relative;
    top: 0;
    z-index: 4;
    width: 960px; 
    margin: 20px auto;
}

.mc-left { width:100%; }
.mc-right { width:100%; }

#topics h2 { 
    font-size:1.8rem; 
    font-weight:bold; 
    color:#D4AF37;
    border-bottom:2px #D4AF37 solid; 
    margin-bottom:20px;
}

#main-contents h2 { 
    font-size:1.8rem; 
    font-weight:bold; 
    color:#333;
    border-bottom:2px #333 solid; 
    margin-bottom:20px;
}

#pc-umekomi-topics { display:none; }
#sp-umekomi-topics {}

/* frow-box（左右並び） */
.frow-box { 
    width:90%; 
    border:2px #83c3d0 solid; 
    padding:10px;
    border-radius: 5px;
    margin-bottom:10px;
}

.frow-box-left { 
    float:left; 
    width:30%;
}

.frow-box-right { 
    float:right; 
    width:70%;
}

.frow-box-left img { 
    width:70px;
}

.frow-box-right h3 { 
    font-size:1.4rem;
}

.down-arrow { 
    text-align:center; 
    margin-top:10px; 
    margin-bottom:10px;
}

/* ===== スマホ最適化（480px以下） ===== */
@media only screen and (max-width: 480px) {

    /* index-contents をスマホ幅に */
    #index-contents {
        width: 100% !important;
        margin: 0 auto !important;
        padding: 10px !important;
    }

    /* sub-banner の文字サイズ調整 */
    #sub-banner-3c h2 { font-size: 1.6rem; }
    #sub-banner-3c h3 { font-size: 1.4rem; }
    #sub-banner-3c h4 { font-size: 1.3rem; }
    #sub-banner-3c p  { font-size: 1.15rem; }

    /* sub-contents の文字を読みやすく */
    #sub-contents h1 { font-size: 1.6rem; }
    #sub-contents p  { font-size: 1.25rem; line-height: 1.7; }

    /* frow-box を縦並びに変更 */
    .frow-box {
        width: 100%;
        padding: 12px;
    }

    .frow-box-left,
    .frow-box-right {
        float: none;
        width: 100%;
        text-align: center;
    }

    .frow-box-left img {
        width: 60px;
        margin-bottom: 10px;
    }

    .frow-box-right h3 {
        font-size: 1.3rem;
        margin-top: 5px;
    }
}


/* contact-big-bannerのスタイルを統一 */
.contact-big-banner {
    background-color: #006400;
    color: white;
    padding: 10px;
    font-size: 1.6rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.cbb-arrow {
    font-size: 2rem;
    font-weight: bold;
    color: white;
    margin-left: 10px;
}

.margin-60px {
    margin: 60px 0;
}

.tel-banner {
    width:100%;
    text-align:center;
}

.tel-banner img {
    width:90%;
    margin-bottom:40px;
}

/* scb---------------------------------------- */
.scb-h2 {
    font-size: 1.8rem;
    font-weight: bold;
    color: #006400;
    border-bottom: 2px #006400 solid;
    margin-bottom: 20px;
}

.scb-h2-2 {
    background-color: #2E8B57;
    color: #FFFFFF;
    padding: 10px;
    font-size: 1.8rem;
}

.scb-h3 {
    color: #006400;
    padding: 10px;
    font-size: 1.6rem;
    margin-bottom: -10px;
}

.scb-h3-2 {
    color: #006400;
    padding: 10px;
    font-size: 1.6rem;
    border: 4px #006400 solid;
    margin-bottom: 5px;
}

.scb-p2 {
    font-size: 1.6rem;
    font-weight: bold;
    padding: 10px;
    margin-bottom: 10px;
    color: #006400;
}

.infobox-shop-tel {
    color: #006400;
    font-size: 2rem;
    font-weight: bold;
}

#scb-item-01 {
    border:#D0D0D0 1px solid;
    text-align:center;
    width:96%;
    padding-top:5px;
    padding-bottom:5px;
    border-radius: 5px;
    background-color:#F4F4F4;
}

.scb-item-02 {
    width: 98%;
    background-image: url(../img/scb-map.jpg);
    background-repeat: no-repeat;
    background-position: left;
    background-size: 100%;
    height: auto;
    min-height: none;
    overflow: hidden;
}

.scb-border {
    border: 2px solid #006400;
}

#scb-contents {
    height: auto;
    max-height: none;
    overflow: visible;
}

/* ===== スマホ最適化（480px以下） ===== */
@media (max-width: 480px) {

    /* contact-big-banner を縦並びに */
    .contact-big-banner {
        flex-direction: column;
        text-align: center;
        gap: 8px;
        font-size: 1.4rem;
        padding: 12px;
    }

    .cbb-arrow {
        font-size: 1.6rem;
        margin-left: 0;
    }

    /* scb 見出しのサイズ調整 */
    .scb-h2,
    .scb-h2-2 {
        font-size: 1.6rem;
    }

    .scb-h3,
    .scb-h3-2 {
        font-size: 1.4rem;
        padding: 8px;
    }

    .scb-p2 {
        font-size: 1.4rem;
        padding: 8px;
    }

    /* scb-item の幅調整 */
    #scb-item-01 {
        width: 100%;
        padding: 8px 0;
    }

    .scb-item-02 {
        width: 100%;
        background-size: cover;
        background-position: center;
        min-height: 180px;
    }

    /* 電話番号の文字サイズ調整 */
    .infobox-shop-tel {
        font-size: 1.6rem;
    }
}



/*subpage-contents----------------------------------------*/

#subpage-contents { 
    width:95%; 
    margin:0 auto;
}

#subpage-contents::after {
    content: "";
    display: block;
    clear: both;
}

#sc-left { width:100% }
#sc-right {
    width: 100%;
    display: block;
}

/* PCレイアウト（2カラム） */
@media screen and (min-width: 768px) {
    #sc-left { float:left; width:67%; }
    #sc-right { float:right; width:30%; }
}

/* 見出し・本文 */
#sc-left h2 {
    font-size:1.8rem;
    font-weight:bold;
    color:#4A4A4A;
    border-bottom:2px #006400 solid;
    margin-bottom:20px;
}

#sc-left h3 {
    font-size:1.6rem;
    font-weight:bold;
    color:#4A4A4A;
    border-bottom:1px #006400 dotted;
    margin-bottom:20px;
    border-left:2px #006400 solid;
    text-indent:5px;
}

#sc-left p {
    font-size:1.4rem;
    margin-bottom:20px;
}

.subpage-basic-p { font-size:1.4rem }

.sc-image { margin-bottom:20px }

/* タイトルリスト */
.ul-title-roop ul li {
    font-size:1.6rem;
    border:2px #006400 solid;
    margin-bottom:10px;
    border-radius: 5px;
    padding:5px;
    font-weight:bold;
}

/* アイコンリスト */
.ul-icon-roop ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.ul-icon-roop li {
    margin: 10px;
}

#sc-left img {
    max-width: 100%;
    height: auto;
}

/*page-02.html----------------------------------------*/

.scl-pointbox {
    float:left;
    width:98%;
    border:2px #122a88 dotted;
    padding:1%;
    border-radius: 5px;
    margin-bottom:20px;
}

.scl-pointbox h1 {
    background-color:#EBCEB5;
    padding:7px;
    color:#582D10;
    font-size:1.6rem;
    background-image:url(../img/page-2/page-02-point-bg.jpg);
    border-radius: 5px;
}

.sclpi-p1 {
    color:#3B3B3B;
    font-size:1.4rem !important;
    margin-top:5px;
}

.scl-pointbox-inner-left { float:left; width:49%; }
.scl-pointbox-inner-right { float:right; width:50%; }

.sclpi-h3 {
    background-color:#122a88;
    font-size:1.2rem !important;
    padding:3px;
    border-radius: 5px;
    color:#ffffff !important;
    margin:0 !important;
    text-align:center;
}

.sclpi-p2 { font-size:1.2rem !important; }

/* 表 */
.page-2-table {
    width:100%;
    font-size:14px;
    border:1px #ed6d00 solid;
    background-color:#ed6d00;
}

.page-2-table td {
    border:1px #ed6d00 solid;
    background-color:#ffffff;
    white-space:nowrap;
}

.p2ttd { width:200px; text-align:center }

/* ハイライトボックス */
.highlight-box {
    background-color: #FFF5CC !important;
    color: #004d00 !important;
    padding: 10px !important;
    border: 2px solid #004d00 !important;
    border-radius: 8px !important;
    margin: 20px auto !important;
    width: 90% !important;
    position: relative !important;
}

.highlight-box::before {
    content: '' !important;
    position: absolute !important;
    bottom: -10px !important;
    left: 10px !important;
    right: 10px !important;
    height: 2px !important;
    background-color: #004d00 !important;
    border-radius: 4px !important;
}

/* ===== スマホ最適化（480px以下） ===== */
@media (max-width: 480px) {

    /* 2カラム → 1カラム */
    #sc-left,
    #sc-right {
        float: none;
        width: 100% !important;
    }

    /* 見出しサイズ調整 */
    #sc-left h2 { font-size: 1.6rem; }
    #sc-left h3 { font-size: 1.4rem; }

    /* 本文読みやすく */
    #sc-left p,
    .subpage-basic-p {
        font-size: 1.3rem;
        line-height: 1.7;
    }

    /* タイトルリスト */
    .ul-title-roop ul li {
        font-size: 1.4rem;
        padding: 8px;
    }

    /* アイコンリスト */
    .ul-icon-roop ul {
        flex-direction: column;
        align-items: center;
    }

    .ul-icon-roop li {
        margin: 8px 0;
    }

    /* ポイントボックス */
    .scl-pointbox {
        width: 100%;
        padding: 10px;
    }

    .scl-pointbox-inner-left,
    .scl-pointbox-inner-right {
        float: none;
        width: 100%;
        margin-bottom: 10px;
        text-align: center;
    }

    /* 表の横スクロールを許可（崩れ防止） */
    .page-2-table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }

    /* ハイライトボックス */
    .highlight-box {
        width: 95% !important;
        padding: 12px !important;
    }
}



/*link----------------------------------------*/
.p2ttd a:link,
.p2ttd a:visited,
.p2ttd a:hover,
.p2ttd a:active {
    text-decoration: none;
    color:#3E73DC !important;
}

/*page-03.html----------------------------------------*/

.anime-list {
    font-size:1.4rem;
    font-weight:bold;
}

.anime-list a:link,
.anime-list a:visited,
.anime-list a:active {
    text-decoration: none;
    color:#f4a00c;
}

.anime-lista:hover {
    text-decoration:underline !important;
    color:#f4a00c;
    opacity:0.8;
    filter: alpha(opacity=80);
    -ms-filter: "alpha( opacity=80 )";
}

/* テーブル（PC基準） */
table.arrow-table {
    width: 100%;
    margin: 0 auto;
    border-collapse: separate;
    border-spacing: 0px 15px;
    font-size: 12px;
}

table.arrow-table th,
table.arrow-table td {
    padding: 10px;
}

table.arrow-table th {
    background: #D3D3D3;
    vertical-align: middle;
    text-align: left;
    width: 100px;
    overflow: visible;
    position: relative;
    color: #fff;
    font-weight: normal;
    font-size: 12px;
}

table.arrow-table th:after {
    left: 100%;
    top: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(136, 183, 213, 0);
    border-left-color: #D3D3D3;
    border-width: 10px;
    margin-top: -10px;
}

/* firefox */
@-moz-document url-prefix() {
    table.arrow-table th::after {
        float: right;
        padding: 0;
        left: 30px;
        top: 10px;
        content: " ";
        height: 0;
        width: 0;
        position: relative;
        pointer-events: none;
        border: 10px solid transparent;
        border-left: #295890 10px solid;
        margin-top: -10px;
    }
}

table.arrow-table td {
    background: #f8f8f8;
    width: 360px;
    padding-left: 20px;
}

.right-red { color:#D51114; text-align:right; float:right }
.menu-hr { border:1px #ffffff dotted; margin-bottom:5px }

/*page-05.html----------------------------------------*/

.scl-staffbox {
    float:left;
    width:98%;
    border:2px #122a88 dotted;
    padding:1%;
    border-radius: 5px;
    margin-bottom:20px;
}

.scl-staffbox h1 {
    background-color:#EBCEB5;
    padding:7px;
    color:#582D10;
    font-size:1.6rem;
    background-image:url(../img/page-2/page-02-point-bg.jpg);
    border-radius: 5px;
}

.sclpi-p3 {
    color:#3B3B3B;
    font-size:1.2rem !important;
    margin-top:5px;
}

.shop-box { width:100%; margin-bottom:10px }
.shop-box-left { width:100% }
.shop-box-right { width:100% }
.sbr-p { margin:0; padding:0 }

.shop-box-left img { width:100% }
.shop-box-right h3 { font-size:1.4rem }

/*page-06.html----------------------------------------*/
#page-6 .infobox-page-6-p {
    font-size:1.6rem;
    font-weight:bold;
    margin-bottom:0;
}
#page-6 .infobox-shop-tel { margin-bottom:0 }

/*page-07.html----------------------------------------*/
.faq dt {
    font-size:1.4rem;
    color:#000;
    height:30px;
    margin-top:10px;
    font-weight:bold;
}
.faq dd {
    font-size:16px;
    margin-top:10px;
}

#page-7 dd { font-size:1.2rem }

.privacy-table th {
    vertical-align:text-top;
    width:25%;
    text-align:left;
}
.privacy-table td {
    vertical-align:text-top;
    text-align:left;
}

/*page-8.html----------------------------------------*/
#page-8 ol { margin-left:30px }
#page-8 ol li { font-size:1.2rem }

/*page-09.html----------------------------------------*/
#page-9 h3 { font-size:1.8rem }
#page-9 p { font-size:1.4rem !important }

#page-9 dt {
    font-size:1.8rem;
    color:#fff;
    margin-top:10px;
    font-weight:bold;
    background-color:#2E8B57;
    text-indent:10px;
    padding:5px;
    line-height:30px;
}
#page-9 dd {
    font-size:1.4rem;
    margin-top:10px;
    margin-bottom:40px;
}

#page-9 ol { margin-left:30px }
#page-9 ol li { font-size:1.4rem }

table.arrow-table {
    width: 100%;
    margin: 0 auto;
    border-collapse: separate;
    border-spacing: 0px 2px;
    font-size:1.4rem;
}

table.arrow-table th,
table.arrow-table td {
    padding: 5px;
}

table.arrow-table th {
    background:#40C56C;
    vertical-align: middle;
    text-align: left;
    color: #fff;
    font-weight:normal;
    max-width:100px;
    font-size:1.4rem;
}

table.arrow-table td {
    background: #f8f8f8;
    padding-left: 20px;
}

table.arrow-table th:after {
    left: 100%;
    top: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(136, 183, 213, 0);
    border-left-color: #40C56C;
    border-width: 10px;
    margin-top: -10px;
}

#page-9 .infobox-page-6-p {
    font-size:1.6rem;
    font-weight:bold;
    margin-bottom:0;
}
#page-9 .infobox-shop-tel { margin-bottom:0 }

.red-big { font-size:2.0rem; color:#E8090D }

/* ===== スマホ最適化（480px以下） ===== */
@media (max-width: 480px) {

    /* テーブルを横スクロール可能にして崩れ防止 */
    table.arrow-table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
        font-size: 1.2rem;
    }

    table.arrow-table th {
        font-size: 1.2rem;
        max-width: 80px;
    }

    table.arrow-table td {
        width: auto;
        padding-left: 10px;
    }

    /* アニメリストの文字サイズ調整 */
    .anime-list {
        font-size: 1.3rem;
    }

    /* スタッフボックス */
    .scl-staffbox {
        width: 100%;
        padding: 10px;
    }

    /* shop-box */
    .shop-box-right h3 {
        font-size: 1.3rem;
    }

    /* FAQ */
    .faq dt {
        font-size: 1.3rem;
        height: auto;
    }
    .faq dd {
        font-size: 1.2rem;
    }

    /* page-9 */
    #page-9 h3 { font-size: 1.6rem }
    #page-9 p { font-size: 1.3rem !important }
    #page-9 dt { font-size: 1.6rem }
    #page-9 dd { font-size: 1.3rem }

    .red-big { font-size:1.6rem }
}



/*form----------------------------------------*/

#mail-form-box {
    width:100%;
    font-size:1.4rem;
}

#mail-form-box h3 {
    font-size:1.6rem;
    font-weight:bold;
    color:#333;
    border:0;
    margin-bottom:5px;
}

.form-name,
.form-mail {
    height:25px;
    width:100%;
    text-indent:5px;
}

.form-comment {
    width:96%;
    padding:2%;
}

.form-bt-area {
    width:100%;
    text-align:center;
}

.form-bt {
    padding:10px;
}

.font-1rem-red {
    font-size:1rem;
    color:#C12225;
}

.formTable {
    font-size:1.4rem;
    text-align:left;
}

/*footer----------------------------------------*/

footer {
    width:100%;
    background-color:#006400;
}

#footer-inner {
    padding-top:20px;
}

#footer-icon {
    width: 95%;
    height: 45px;
    margin:0 auto;
}

#footer-icon-table {
    width:100%;
}

#footer-icon-table td {
    width:20%;
    text-align:center;
    height:30px;
}

#footer-icon img {
    width:30px;
}

#footer-nav {
    width:100%;
    background-color:#006400;
}

#footer-nav ul {
    padding:0;
    margin:0;
    list-style-type:none;
}

#footer-nav li {
    float:left;
    font-size:1.4rem;
    color:#FFF;
    text-align:left;
    background-color:#006400;
    text-indent:20px;
    line-height:45px;
    width:100%;
    border-bottom:1px solid #333;
}

#footer-nav a:link,
#footer-nav a:visited,
#footer-nav a:hover,
#footer-nav a:active {
    text-decoration: none;
    color:#C5A770;
}

#footer-adress {
    width:100%;
    background-color:#006400;
    margin-bottom:10px;
    margin-top:10px;
}

#footer-adress h1 {
    font-size:1.4rem;
    font-weight:normal;
    color:#FFFFFF;
    text-align:center;
    margin-bottom:10px;
}

#footer-adress p {
    font-size:1.2rem;
    font-weight:normal;
    color:#FFFFFF;
    text-align:center;
    line-height:1.6rem;
}

#copylight {
    font-size:1.2rem;
    font-weight:normal;
    color:#C5A770;
    text-align:center;
    line-height:2rem;
    background-color:#006400;
}

/* width 480以上　768px未満 */
@media screen and (min-width : 480px){
    header { width: 100%; }
}

/* ===== スマホ最適化（480px以下） ===== */
@media (max-width: 480px) {

    /* フォームの文字サイズ調整 */
    #mail-form-box {
        font-size:1.3rem;
    }

    #mail-form-box h3 {
        font-size:1.4rem;
    }

    .form-name,
    .form-mail {
        height:32px;
        font-size:1.3rem;
    }

    .form-comment {
        width:100%;
        padding:10px;
        font-size:1.3rem;
    }

    .formTable {
        font-size:1.3rem;
    }

    /* フッターのアイコンを縦並びに */
    #footer-icon-table td {
        width:33%;
        height:40px;
    }

    #footer-icon img {
        width:28px;
    }

    /* フッターナビの文字サイズ調整 */
    #footer-nav li {
        font-size:1.3rem;
        line-height:40px;
        text-indent:15px;
    }

    /* 住所部分の文字サイズ調整 */
    #footer-adress h1 {
        font-size:1.3rem;
    }

    #footer-adress p {
        font-size:1.1rem;
        line-height:1.5rem;
    }

    #copylight {
        font-size:1.1rem;
    }
}










/* width 768以上　1024px未満 */
@media screen and (min-width: 768px) and (max-width: 1024px) {

/*----------------------------------------
  header
----------------------------------------*/

#h-nav {
    height: 130px;
}

#pc-header {
    display: block;
}

#h-nav-left {
    padding-top: 20px;
    margin-bottom: 10px;
}

#h-nav-right {
    padding-top: 20px;
}

/* スマホ用住所は非表示、PC用を表示 */
#header-adress-sp { display: none; }
#header-adress-pc {
    display: block;
    line-height: 140%;
}
#header-adress-pc h2 {
    font-size: 1.4rem;
    margin-top: 20px;
    margin-bottom: 5px;
}
#header-adress-pc p {
    color: #333;
    font-size: 1.2rem;
    line-height: 200%;
}
#header-adress-pc span {
    font-size: 1.4rem;
    font-weight: bold;
}

/* 電話ボックス */
.hnr-t-box {
    display: block;
    width: 360px;
    background-color: #F5E1A4;
    height: auto;
    padding: 5px 10px;
    float: right;
    border-radius: 5px;
    border: 1px #DDDDDD solid;
}

.hnr-t-box-L {
    float: left;
    background-color: #F5E1A4;
    font-size: 1.2rem;
}

.hnr-t-box-R {
    float: right;
    background-color: #F5E1A4;
    font-size: 1.4rem;
    font-weight: bold;
    color: #006400;
}

/*----------------------------------------
  g-nav（グローバルナビ）
----------------------------------------*/

#g-nav {
    display: block;
    background-color: #006400;
    width: 100%;
    padding: 20px 0;
    box-sizing: border-box;
    clear: both;
    position: relative;
    z-index: 3;
    margin-top: 0;
}

#g-nav ul {
    width: 100%;
    margin: 0 auto;
    background-color: #006400;
    display: flex;
    justify-content: center;
    list-style: none;
    padding: 0;
}

#g-nav a {
    font-family: 'Lora', serif;
    text-decoration: none;
    color: white;
    font-size: 1.4rem;
}

#g-nav li {
    font-family: 'Lora', serif;
    margin: 0 10px;
    background-image: url(../img/g-nav-arrow.png);
    background-repeat: no-repeat;
    background-position: left;
    font-size: 1.4rem;
    text-indent: 25px;
    margin-bottom: 0;
}

/*----------------------------------------
  concept
----------------------------------------*/

.margin-20px {
    margin: 20px 0;
}

#concept-p {
    width: 95%;
    margin: 0 auto;
    font-size: 1.2rem;
    line-height: 140%;
    color: #666;
    margin-bottom: 10px;
}

/*----------------------------------------
  banner-3c
----------------------------------------*/

#banner-3c {
    display: block;
}

#banner-3c ul {
    display: table;
    width: 100%;
    table-layout: fixed;
}

#banner-3c li {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    padding: 10px;
}

#banner-3c li:nth-child(-n+2) {
    border-right: 5px #ffffff solid;
}

}
	

/*index-contents----------------------------------------*/
.mc-left { width:67%; float:left; }
.mc-right { width:31%; float:right; }

#topics { width:100%; float:left; }
#topics h2 { width:100%; }

#pc-umekomi-topics { display:block; }
#sp-umekomi-topics { display:none; }

#sub-banner-3c { width:100%; float:right; }

.frow-box {
    width:90%;
    float:left;
    margin-right:10px;
    margin-bottom:10px;
}
.frow-box-left { float:left; width:20%; }
.frow-box-right { float:right; width:80%; }

.tel-banner {
    width:100%;
    text-align:center;
    margin-top:20px;
}
.tel-banner img { width:70%; }

/* ===== スマホ（480px以下） ===== */
@media only screen and (max-width: 480px) {

    .container {
        width: 100% !important;
        padding: 10px !important;
    }

    #index-contents {
        width: 100% !important;
        margin: 0 auto !important;
        padding: 10px !important;
    }

    .mc-left, .mc-right {
        width: 100% !important;
        float: none !important;
    }

    .frow-box {
        width: 100% !important;
        margin-right: 0 !important;
        float: none !important;
    }

    .frow-box-left,
    .frow-box-right {
        width: 100% !important;
        float: none !important;
        text-align: center;
    }

    .tel-banner img {
        width: 100% !important;
    }
}

/*subpage-contents----------------------------------------*/

/* スマホ（デフォルト） */
#sc-left { width:100%; float:none; }
#sc-right { width:100%; float:none; }

/* PC用 */
@media screen and (min-width: 768px) {
    #sc-left { float:left; width:67%; }
    #sc-right { float:right; width:30%; }
}

/*page-02.html----------------------------------------*/
.scl-pointbox {
    width:45%;
    margin-right:10px;
}

/*page-05.html----------------------------------------*/
.scl-staffbox {
    float:left;
    width:29%;
    border:2px #122a88 dotted;
    padding:1%;
    border-radius: 5px;
    margin-bottom:20px;
    margin-right:5px;
}

.shop-box {
    width:100%;
    border:0;
    padding:0;
    border-radius: 0;
    margin-bottom:10px;
}

.shop-box-left { float:left; width:55%; }
.shop-box-right { float:right; width:40%; }
.sbr-p { margin:0; padding:0; }

.shop-box-left img { width:100%; }
.shop-box-right h3 { font-size:1.4rem; }

/*form----------------------------------------*/
#mail-form-box {
    width:50%;
    font-size:1.4rem;
}

footer----------------------------------------/
#footer-icon table { width:200px; } #footer-icon td:nth-child(4){ display:none } #footer-icon td:nth-child(5){ display:none }
#footer-inner { width:100%; margin:0 auto; background-color:#006400; padding-bottom:40px; }
#footer-nav { width:50%; float:left; padding-top:0; }
#footer-nav ul { padding:0; margin:0; }
#footer-nav li { font-size:1.2rem; color:#999; text-align:left; background-color:#006400; line-height:160%; border-bottom:0; }
#footer-adress { width:40%; float:right; padding-top:0; margin-right:20px; }
#footer-adress h1 { font-size:1.4rem; font-weight:bold; color:#000; margin-bottom:10px; padding:5px; border-radius: 5px; background-color:#FFFFFF; }
#footer-adress p { font-size:1.2rem; font-weight:normal; color:#999; line-height:1.6rem; } 

/* コピーライト */
#copylight {
    text-align: center;
    color: #fff;
    margin-top: 20px;
}






/* width 1024以上 */
@media screen and (min-width: 1024px) {

    /* header */
    #h-nav { width: 960px; margin: 0 auto; }
    #g-nav ul { width: 960px; }

    /* subpage-image */
    #subpage-image-box { width: 100%; }
    .subpage-image { width: 960px; margin: 0 auto; }

    /* banner-3c */
    #banner-3c ul { width: 950px; }

    /* sub-contents */
    #sub-contents {
        width: 100%;
        margin: 0 auto;
        color: #4A4A4A;
    }

    #sub-contents h1 {
        font-size: 1.8rem;
        font-weight: bold;
        color: #4A4A4A;
        border-bottom: 2px solid #006400;
        margin-bottom: 20px;
    }

    #sub-contents p {
        font-size: 1.2rem;
        color: #7D7D7D;
    }

    /* subpage-contents */
    #subpage-contents { width: 960px; margin: 0 auto; }

    /* footer */
    #footer-icon { width: 960px; margin: 0 auto; }
    #footer-inner { width: 960px; }
    #footer-nav { width: 500px; }
    #footer-adress { width: 460px; margin-right: 0; }
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
    .stylish-box {
        /* アイパッド用のスタイルをここに追加 */
    }
}


/*----------------------------------------
画像付き吹き出し(会話)
----------------------------------------*/

/* 吹き出し 全体*/
.talking { 
　　　margin-bottom:2em;
      position:relative;
}

.talking:before , .talking:after { 
      clear:both;
      content:"";
      display:block;
}

/*アイコン*/
.talking figure {
　　　width:60px;     /*アイコンの横幅*/
      height:60px;    /*アイコンの縦幅*/
}

.talking-left_icon { 
      float:left;
      margin-right:20px;      /*アイコンの右の余白(左の吹き出し)*/
}

.talking-right_icon { 
      float:right;
      margin-left:20px;      /*アイコンの左の余白(右の吹き出し)*/
}

.talking figure img{
　　　width:100%;
      height:100%;
　　　margin:0;
      border:2px solid #aaa;
      border-radius:50%;    /*アイコンの角丸*/
}

/*吹き出しのセリフ部分*/
.talking-left , .talking-right  { 
      position:relative;
      padding:10px;
      border-style:solid;    /*枠線の線種*/
　　　border-radius:20px;    /*セリフを入れる部分の角丸*/
      max-width: calc(100% - 80px);
}

.talking p{
　　　margin:0;
}

.talking p :last-child {
　　　margin:0;
}

/*------------------------------
  画像付き吹き出し(会話)
------------------------------*/
/* 吹き出し 全体*/
.talking {
      margin-bottom:2em;
      position:relative;
}

.talking:before , .talking:after {
      clear:both;
      content:"";
      display:block;
}

/*アイコン*/
.talking figure {
      width:60px;     /*アイコンの横幅*/
      height:50px;    /*アイコンの縦幅*/
}

.talking-left_icon {
      float:left;
      margin-right:20px;    /*アイコンの右の余白(左の吹き出し)*/
}

.talking-right_icon {
      float:right;
      margin-left:20px;    /*アイコンの左の余白(右の吹き出し)*/
}

.talking figure img {
      width:100%;
      height:100%;
      margin:0;
      border:2px solid #aaa;
      border-radius:50%;    /*アイコンの角丸*/
}

/*アイコンの下の名前*/
.talking-left_icon figcaption ,
.talking-right_icon figcaption {
      padding:2px 0 0;
      font-size:12px;
      text-align:center;
}

/*吹き出しのセリフ部分*/
.talking-left , .talking-right  {
      position:relative;
      padding:10px;
      border-style:solid;    /*枠線の線種*/
      border-radius:10px;    /*セリフを入れる部分の角丸*/
      max-width: calc(100% - 80px);
}

.talking p {
      margin:0;
}

.talking p :last-child {
      margin:0;
}

/*---左の吹き出し---*/
.talking-left {
      float:left;
      border-width:3px;         /*枠線の太さ*/
      border-color:#90EE90;   /*枠線の色*/
      background:#90EE90;    /*背景色*/
}

/*左の吹き出し 三角*/
.talking-left:before {
      position: absolute;
      content: '';
      border: 10px solid transparent;
      border-right: 10px solid #90EE90;  /*三角の線になる部分*/
      top: 15px;
      left: -22px;
}

.talking-left:after {
      position: absolute;
      content: '';
      border: 10px solid transparent;
      border-right: 10px solid #90EE90;
      top: 15px;
      left: -19px;
}

/*---右の吹き出し---*/
.talking-right {
      float:right;
      border-width:3px;      /*枠線の太さ*/
      border-color:#F4A460;    /*枠線の色*/
      background:#F4A460;    /*背景色*/
}

/*右の吹き出し 三角*/
.talking-right:before {
      position: absolute;
      content: '';
      border: 10px solid transparent;
      border-left: 10px solid #F4A460;  /*三角の線になる部分*/
      top: 15px;
      right: -22px;
}

.talking-right:after {
      position: absolute;
      content: '';
      border: 10px solid transparent;
      border-left: 10px solid #F4A460;
      top: 15px;
      right: -19px;
}

/* スクロールのデザイン---------------------------------------- */


.stylish-box {
    width: 98%;
    height: 200px;
    overflow-y: scroll;
    background: #ffffff;
    padding: 10px;
    font-family: 'Arial', sans-serif;
    font-size: 1rem;
}
.stylish-box::-webkit-scrollbar { width: 10px; }
.stylish-box::-webkit-scrollbar-thumb {
    background-color: #ccc;
    border-radius: 10px;
}
.stylish-box p {
    font-family: 'Comic Sans MS', serif;
    font-size: 1.2rem;
    color: #000;
    line-height: 1.6;
}

/* その他のスタイル */ 
.image-container {
    display: flex;
    width: 100%;
}
.image-container div,
.image-container a {
    width: 50%;
}
.image-container img {
    width: 100%;
    height: auto;
}







/* 左下に配置するフローティングボタンのスタイル */
.floating-button {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 1000;
}
.floating-button a {
    display: block;
    width: 195px;
    height: 195px;
}
.floating-button img {
    width: 100%;
    height: auto;
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
    transition: transform 0.3s;
}
.floating-button img:hover {
    transform: scale(1.1);
}




/* スマホ表示時に表示するスタイル */
@media only screen and (max-width: 768px) {
  .header-bar-specific, 
  .main-image-box-specific {
    display: block; /* 表示する */
  }
}


/* スマホ表示時のナビゲーションメニューのスタイル */
@media only screen and (max-width: 768px) {
  #g-nav ul {
    padding: 0;
    list-style-type: none;
  }

  #g-nav ul li {
    margin: 10px 0; /* 縦に並べるためのマージン */
  }

  #g-nav ul li a {
    display: block;
    padding: 15px;
    background-color: #2E8B57; /* 深緑 */
    color: white;
    text-align: center;
    text-decoration: none;
    border-radius: 5px; /* ボタンの角を丸くする */
  }

  #g-nav ul li a:hover {
    background-color: #4CAF50; /* ホバー時の少し明るい緑 */
  }
}



.shop-box-new {
  display: flex;
  justify-content: space-between;
  align-items: center; /* ボタンの高さの中央に画像を配置 */
  height: 100%; /* 必要に応じて高さを設定 */
}

.shop-box-new-left {
  flex: 6; /* 左側のボタンの幅を6に設定 */
}

.shop-box-new-right {
  flex: 4; /* 右側の画像の幅を4に設定 */
  display: flex;
  align-items: center; /* 画像を中央に配置 */
  justify-content: center; /* 画像を中央寄せ */
}

.shop-box-new-right img {
  width: 90%;
  height: auto;
  max-height: 600px; /* 画像の最大高さを調整 */
  object-fit: cover;
}

.contact-big-banner-new {
  padding: 10px; /* パディングを少し減らします */
  margin-bottom: 15px;
  border-radius: 5px;
  color: #000;
  text-align: center;
  position: relative;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  height: 80px; /* ボタンの高さを設定 */
  display: flex;
  align-items: center;
  justify-content: flex-start; /* ここを justify-content: flex-start に変更 */
  width: 90%; /* ボタンの幅を調整 */
  font-size: 16px; /* ボタンの文字を大きくします */
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); /* ここで影を追加 */
}

.contact-big-banner-new .cbb-arrow {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}

.contact-big-banner-new img.button-img {
  width: 30px; /* 画像の幅を調整 */
  height: 30px; /* 画像の高さを調整 */
  margin-right: 10px; /* テキストとの間隔を調整 */
  object-fit: contain; /* 画像がコンテナ内に収まるように調整 */
}



.banner-red    { background-color: rgba(255,182,193,0.5); border: 2px solid rgba(255,182,193,1); }
.banner-blue   { background-color: rgba(173,216,230,0.5); border: 2px solid rgba(173,216,230,1); }
.banner-green  { background-color: rgba(144,238,144,0.5); border: 2px solid rgba(144,238,144,1); }
.banner-yellow { background-color: rgba(255,255,204,0.5); border: 2px solid rgba(255,255,204,1); }
.banner-purple { background-color: rgba(221,160,221,0.5); border: 2px solid rgba(221,160,221,1); }

.sbr-p {
  line-height: 1.6;
}

.margin-10px {
  margin: 10px 0;
}






/* モーダルウィンドウのスタイル */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    padding-top: 30px; /* パディングをさらに小さくする */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
}

.modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 10px; /* パディングを小さくする */
    border: 1px solid #888;
    width: 60%; /* 幅をさらに小さくする */
    font-size: 14px; /* フォントサイズをさらに小さくする */
    text-align: center; /* テキストを中央揃えにする */
}

.modal-content img {
    width: 40%; /* 画像の幅をさらに小さくする */
    display: block;
    margin: 5px auto; /* 余白を減らす */
}

.modal-content p {
    margin: 5px 0; /* 段落間の余白を減らす */
}

.close {
    color: #aaa;
    float: right;
    font-size: 20px; /* フォントサイズをさらに小さくする */
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}


.clearfix::after {
    content: "";
    display: table;
    clear: both;
}


/* 特定のページに限定したモーダルウィンドウのスタイル */
#specific-page .modal-content {
    display: none;
    padding: 10px;
    background-color: #fefefe;
    margin: auto;
    border: 1px solid #888;
    width: 60%;
    font-size: 14px;
    text-align: center;
    position: absolute;
    z-index: 1000;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* details がopenの時に表示 */
#specific-page details[open] .modal-content {
    display: block;
}

/* summaryをボタンのようにスタイル */
#specific-page summary.contact-big-banner-new {
    cursor: pointer;
    list-style: none;
}

#specific-page summary.contact-big-banner-new::marker {
    display: none;
}

/* オプション: 矢印の追加スタイル */
#specific-page .cbb-arrow {
    display: inline-block;
    margin-left: 10px;
}

/* 閉じるボタンのスタイル */
#specific-page .close-button {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    font-size: 24px;
    font-weight: bold;
}

/* チェックボックスがチェックされているときにモーダルウィンドウを非表示にする */
input[type="checkbox"]:checked ~ details .modal-content {
    display: none;
}

/* CTA全体 */
.cta-area {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 40px 0;
}

/* 各店舗ボックス */
.cta-box {
  padding: 20px;
  border: 1px solid #d6c7b2; /* 柔らかいベージュの枠線 */
  border-radius: 10px;
  background: #faf7f0; /* クリーム色の背景 */
}

/* 店舗情報 */
.shop-info {
  font-size: 14px;
  color: #5a5a5a;
  margin-bottom: 15px;
}

/* ボタン並び */
.cta-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ボタン共通 */
.cta-button {
  display: block;
  text-align: center;
  padding: 14px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: bold;
  font-size: 15px;
  transition: background-color 0.3s ease, color 0.3s ease;
  color: #2f4f3e; /* 深緑文字で統一（白文字競合回避） */
  border: 2px solid #2f4f3e;
}

/* CTAボタンだけはリンク色の影響を受けないようにする */
.cta-button,
.cta-button:link,
.cta-button:visited,
.cta-button:hover,
.cta-button:active {
  color: inherit !important;
}

/* 電話ボタン（淡いグリーン） */
.cta-call {
  background-color: #dce5dd !important;
  color: #2f4f3e !important;
  border: 2px solid #2f4f3e !important;
}

.cta-call:hover {
  background-color: #c2d3c4 !important;
}

/* 予約ボタン（淡いベージュ） */
.cta-reserve {
  background-color: #f3e2c6 !important;
  color: #2f4f3e !important;
  border: 2px solid #2f4f3e !important;
}

.cta-reserve:hover {
  background-color: #e6d2b1 !important;
}


/* 全体の余白 */
.story-wrapper {
  display: flex;
  flex-direction: column;
  gap: 40px;
  margin: 40px 0;
}

/* 各ブロック */
.story-block {
  background: #FFFFFF;
  border: 1px solid #E0E0E0;
  border-radius: 8px;
  padding: 30px;
}

/* タイトル */
.story-title {
  color: #2F4F3E;
  font-size: 1.8rem;
  margin-bottom: 25px;
  text-align: center;
  font-weight: 600;
}

/* 横並び（スマホでも維持） */
.story-row {
  display: flex;
  justify-content: space-between;
  align-items: center; /* 高さ揃え */
  gap: 20px;
  flex-wrap: nowrap;   /* ← スマホでも折り返さない */
}

/* アイテム */
.story-item {
  width: 33%;
  text-align: center;
}

/* 画像 */
.story-item img {
  width: 140px;
  height: auto;
  display: block;
  margin: 0 auto 12px;
}

/* ラベル（本文） */
.story-label {
  color: #444;
  font-size: 1.1rem;
  font-weight: 500;
  margin-top: 6px;
}

/* 元本だけ背景を変える */
.principal-box {
  background: #F7F3EB;
  padding: 18px;
  border-radius: 8px;
}

/* 元本の注釈 */
.story-note {
  color: #2F4F3E;
  font-size: 1rem;
  margin-top: 8px;
  font-weight: bold;
}

/* 不安・安心の背景 */
.sad-box {
  background: #F2F2F2;
  padding: 18px;
  border-radius: 8px;
}

.happy-box {
  background: #E6F3E9;
  padding: 18px;
  border-radius: 8px;
}

/* 矢印部分 */
.story-arrow {
  text-align: center;
}

.story-arrow img {
  width: 70px;
  height: auto;
}

.arrow-note {
  font-size: 0.95rem;
  color: #2F4F3E;
  margin-top: 6px;
}

/* ▼▼ スマホ縮小対応（横並び維持） ▼▼ */
@media (max-width: 768px) {

  /* 横並びのまま縮小 */
  .story-row {
    transform: scale(0.85);      /* 全体を縮小 */
    transform-origin: left top;  /* 左上基準で縮小 */
  }

  /* 縮小で余白が出るので調整 */
  .story-block {
    padding: 20px;
  }

  /* タイトル少し小さく */
  .story-title {
    font-size: 1.6rem;
  }

  /* 画像も少し小さく */
  .story-item img {
    width: 110px;
  }

  .story-arrow img {
    width: 55px;
  }

  /* ラベルも微調整 */
  .story-label {
    font-size: 1rem;
  }
}



/* ▼ PC（1024px以上）用 g-nav ▼ */
@media screen and (min-width: 1024px) {

  #g-nav {
    display: block;
    background-color: #006400;
    width: 100%;
    padding: 20px 0;
    box-sizing: border-box;
    clear: both;
    position: relative;
    z-index: 3;
  }

  #g-nav ul {
    width: 960px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    list-style: none;
    padding: 0;
  }

  #g-nav li {
    margin: 0 10px;
    background-image: url(../img/g-nav-arrow.png);
    background-repeat: no-repeat;
    background-position: left;
    text-indent: 25px;
    font-size: 1.4rem;
  }

  #g-nav a {
    color: white;
    text-decoration: none;
    font-family: 'Lora', serif;
    font-size: 1.4rem;
  }
}

/* ▼ スマホ（768px以下）用 g-nav ※重複を1つに統合 ▼ */
@media only screen and (max-width: 768px) {

  #g-nav ul {
    padding: 0;
    list-style-type: none;
    flex-direction: column;
  }

  #g-nav ul li {
    margin: 10px 0;
    background-image: none;
    text-indent: 0;
  }

  #g-nav ul li a {
    display: block;
    padding: 15px;
    background-color: #2E8B57;
    color: white;
    text-align: center;
    border-radius: 5px;
  }

  #g-nav ul li a:hover {
    background-color: #4CAF50;
  }
}

html, body {
  overflow-x: hidden;
}

.sub-contents {
    width: 100%;
    margin: 0 auto;
}

.sub-contents h1 {
    font-size: 1.8rem;
    font-weight: bold;
    color: #4A4A4A;
    border-bottom: 2px solid #006400;
    margin-bottom: 20px;
}

.sub-contents p {
    font-size: 1.2rem;
    color: #7D7D7D;
}

.sub-contents h1 { font-size: 1.6rem; }
.sub-contents p  { font-size: 1.25rem; line-height: 1.7; }

.sub-contents {
    width: 100%;
    margin: 0 auto;
    color: #4A4A4A;
}

.sub-contents h1 {
    font-size: 1.8rem;
    font-weight: bold;
    color: #4A4A4A;
    border-bottom: 2px solid #006400;
    margin-bottom: 20px;
}

.sub-contents p {
    font-size: 1.2rem;
    color: #7D7D7D;
}



.first-link {
  display: inline-block;
  padding: 8px 18px;
  border-radius: 999px;
  background: #ffffff;
  color: #0066cc;
  border: 1px solid #0066cc;
  font-size: 14px;
  text-decoration: underline; /* ← 下線追加 */
  text-underline-offset: 4px; /* ← 下線を少し下げて上品に */
  font-weight: 600;
  letter-spacing: 0.03em;
}

.first-link:hover {
  background: #0066cc;
  color: #ffffff;
  text-decoration: none; /* ← ホバー時は下線を消すと“押した感”が出る */
}