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

.tn {
	font-family: "Zen Maru Gothic", sans-serif !important;
	color:#000 !important;
	overflow-x: hidden;
}
.bg-nook01 {
	background-color: #eae4d1
}
.bg-nook02 {
	background-color: #e0dac7
}
/* ---------------------------------------------------------------------------------------------------------------------------------------------------------

            HEAD MENU

           --------------------------------------------------- */
 /* =========================================================
           ナビゲーション共通
           ========================================================= */
        .global-nav-container {
            width: 100%;
        }

        .menu-toggle-btn {
            display: none;
        }

        .nav-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .nav-list a {
            text-decoration: none;
            color: #000;
            font-size: 18px;
            font-weight: 500;
            display: block;
            transition: opacity 0.2s;
        }

        .nav-list a:hover {
            opacity: 0.6;
        }

        /* =========================================================
           PC表示（992px以上）のスタイル
           ========================================================= */
        @media (min-width: 992px) {
            .nav-list {
                display: flex;
                justify-content: center;
                align-items: center;
            }

            .nav-list li {
                display: flex;
                align-items: center;
            }

            .nav-list li:not(:last-child)::after {
                content: "／";
                margin: 0 10px;
                color: #999;
                font-weight: normal;
            }
        }

        /* =========================================================
           スマホ表示（991px以下）のスタイル
           ========================================================= */
        @media (max-width: 991px) {
            
            /* ★追加: メニューを絶対配置にするための基準点 */
            .global-nav-container {
                position: relative;
            }

            /* 1. スマホ用開閉ボタン */
            .menu-toggle-btn {
                display: block;
                margin: 0 auto;
                width: 270px;
                height: 50px;
                background-color: #fff;
                border: 1px solid #333;
                border-radius: 12px;
                cursor: pointer;
                position: relative;
                -webkit-appearance: none;
                appearance: none;
            }

            /* アイコンの線（3本線） */
            .icon-bar {
                position: absolute;
                left: 50%;
                height: 0;
                border-top: 1px solid #333; 
                transition: all 0.3s ease;
            }
            
            .icon-bar-top,
            .icon-bar-middle {
                width: 45px;
                margin-left: -22.5px; 
            }
            
            .icon-bar-bottom {
                width: 30px;
                margin-left: -22.5px; 
            }
            
            /* 閉じてる時の縦位置 */
            .icon-bar-top { top: 17px; }
            .icon-bar-middle { top: 24.5px; } 
            .icon-bar-bottom { top: 32px; }

            /* 開いている時の平べったい×印 */
            .menu-toggle-btn.is-active .icon-bar-top {
                top: 24.5px;
                transform: rotate(19.5deg);
            }
            .menu-toggle-btn.is-active .icon-bar-middle {
                opacity: 0; 
            }
            .menu-toggle-btn.is-active .icon-bar-bottom {
                top: 24.5px;
                width: 45px; 
                transform: rotate(-19.5deg);
            }

            /* 2. スライドメニュー本体 */
            .nav-menu {
                width: 270px;
                
                /* ★変更: 下の要素を押し下げないように絶対配置にする */
                position: absolute;
                top: 60px; /* ボタンの高さ(50px) + 下の隙間(10px) */
                left: 0;
                right: 0;
                margin: 0 auto; /* absoluteの状態で中央に寄せるテクニック */
                z-index: 100; /* 重なり順を手前に */

                background-color: rgba(255, 255, 255, 0.95);
                max-height: 0;
                overflow: hidden;
                transition: max-height 0.4s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.4s ease;
                opacity: 0;
            }

            .nav-menu.is-open {
                max-height: 500px;
                opacity: 1;
            }

            /* 3. メニュー内のリストデザイン */
            .nav-list {
                padding: 10px 0;
            }

            .nav-list li {
                text-align: center;
            }

            .nav-list li:not(:last-child) {
                border-bottom: 1px solid #ccc;
            }

            .nav-list a {
                display: flex;
                justify-content: center;
                align-items: center;
                height: 50px;       
                padding: 0;         
                font-size: 1rem;
            }
        }

        /* ★確認用ダミーブロックのスタイル（テストが終わったら消してください） */
        .dummy-block {
            max-width: 600px;
            margin: 30px auto;
            padding: 40px 20px;
            background-color: #d2cbb0;
            text-align: center;
            border-radius: 8px;
        }
		
		
		
		/* ---------------------------------------------------------------------------------------------------------------------------------------------------------

          FOOT MENU

           --------------------------------------------------- */
.menu ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
}
h1 {
	/* スマホ(375px)で約20px、iPad(768px)で約28px、PC(960px以上)で32pxになるの数値 */
  font-size: clamp(20px, calc(12.4px + 2.04vw), 32px);
	margin-bottom: 0px;
	letter-spacing:0;
}
/* 共通 */
.menu li {
	padding: 20px 7px;
	white-space: nowrap;
}
.menu a {
	text-decoration: none;
	color: #333;
}
.menu a:hover {
	opacity: 0.7;
}
.slash {
	color: #999;
}

.nf .menu.tn.mt-xl-n3 .fs-16 li {
	padding: 20px 2px;
	white-space: nowrap;
}

/* ===== スマホ ===== */
@media (max-width: 991px) {

  /*.menu {
    border-top: 1px solid #ccc;     
    border-bottom: 1px solid #ccc;  
  }*/

  .menu ul {
 flex-direction: column;
 align-items: stretch;
}
 .slash {
 display: none;  /* スラッシュ非表示 */
}
 .menu li {
 padding: 15px 0;
 border-bottom: 1px solid #ccc;
}
 .menu li:last-child {
 border-bottom: none;  /* 最後の二重線防止 */
}
 .menu a {
 display: block;
 width: 100%;
}
}
/* ---------------------------------------------------------------------------------------------------------------------------------------------------------

           波枠線のコンテナ

           --------------------------------------------------- */

        .wave-dashed-box {
	position: relative;
	/* PCでのサイズ指定（変更なし） */

            width: 640px;
	height: 110px;
	display: flex;
	justify-content: center;
	align-items: center;
	box-sizing: border-box;
}
/* 見出し(h2)のスタイル（変更なし） */

        .wave-dashed-box h2 {
	font-size: 1.6rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	margin: 0;
	text-align: center;
}



        /* ---------------------------------------------------

           スマホ用のサイズ調整

           --------------------------------------------------- */

        @media (max-width: 750px) {
 .wave-dashed-box {
 width: 80%; /* 横幅80%、高さは110pxのまま */
}
 .wave-dashed-box h2 {
 font-size: 1.25rem;
}
}



        /* ---------------------------------------------------

           1. 上下の波線（変更なし：等間隔のまま）

           --------------------------------------------------- */

        .wave-dashed-box::before {
 content: "";
 position: absolute;
 top: 0;
 bottom: 0;
 left: 32px;
 right: 32px;
 pointer-events: none;
 background-image: 
 radial-gradient(circle at 19px 19px, transparent 10.5px, #fff 11px, #fff 12.5px, transparent 13px), radial-gradient(circle at 19px -7px, transparent 10.5px, #fff 11px, #fff 12.5px, transparent 13px);
 background-position: top left, bottom left;
 background-size: 38px 12px;
 background-repeat: space no-repeat;
}



        /* ---------------------------------------------------

           2. 左右の波線（★ここを変更しました）

           110pxの中に「2つの波線」を狭めの間隔で配置します

           --------------------------------------------------- */

        .wave-dashed-box::after {
 content: "";
 position: absolute;

            /* 四隅の空間を少し調整し、描画できる高さを60pxに設定 */

            top: 25px;
 bottom: 25px;
 left: 0;
 right: 0;
 pointer-events: none;



            /* 波の余白部分をカットし、「波単体」のサイズでグラデーションを作成 */

            background-image: 

                /* 左辺の波線 */

                radial-gradient(circle at 19px 12px, transparent 10.5px, #fff 11px, #fff 12.5px, transparent 13px),                 /* 右辺の波線 */  radial-gradient(circle at -7px 12px, transparent 10.5px, #fff 11px, #fff 12.5px, transparent 13px);
 background-position: top left, top right;

            

            /* 波線の高さを24pxに設定。

               描画エリア(60px)に24pxの波が2つ入り、残りの12pxが自動的に間の余白になります */

            background-size: 12px 24px;
 background-repeat: no-repeat space;
}
/* ---------------------------------------------------------------------------------------------------------------------------------------------------------

           カードのスタイル

           --------------------------------------------------- */
		   

        .nook-card {
	background-color: #fff;
	border: 1px solid #000;
	border-radius: 20px;
	padding: 20px 35px; /* 上下は固定、左右は可変 */
	/* 横幅をパーセントで指定 */

            width: 100%;
	position: relative; /* 擬似要素の基準位置 */
	box-sizing: border-box;
}


        /* --------------------------------------

           枠線を「切る」ための仕掛け

           白い四角形を枠線の上に被せて隠しています

           -------------------------------------- */

        

        /* 左上の切れ目 */

        .nook-card::before {
 content: "";
 position: absolute;
 background-color: #fff;
 width: 25px;      /* 切れ目の幅 */
 height: 1px;     /* 線の太さをカバーする高さ */
 top: -1px;        /* 枠線の上に重なるよう調整 */
 left: 10%;        /* 左からの位置 */
 background: linear-gradient(to bottom, #e0dac7 50%, #fff 50%);
}


        /* 右下の切れ目 */

        .nook-card::after {
 content: "";
 position: absolute;
 background-color: #fff;
 width: 25px;      /* 切れ目の幅 */
 height: 1px;     /* 線の太さをカバーする高さ */
 bottom: -1px;     /* 枠線の上に重なるよう調整 */
 right: 10%;       /* 右からの位置 */
 background: linear-gradient(to bottom, #e0dac7 50%, #fff 50%);
}
/* テキストのスタイル */

        .nook-title {
	text-align: center;
	font-size: 1.2rem;
	margin-top: 0;
	margin-bottom: 10px;
	letter-spacing: 0.1em;
	font-weight: 500;
}
.nook-text {
	font-size: 1.125rem;
	line-height: 1.8; /* ゆったりとした行間 */
	text-align: justify; /* 両端揃え（お好みでleftにしてもOK） */
	margin: 0;
	font-weight: 500;
}
        /* ---------------------------------------------------

           スマホ用のサイズ調整

           --------------------------------------------------- */

        @media (max-width: 750px) {
 .nook-card {
 padding: 20px;
}
}
/* ---------------------------------------------------------------------------------------------------------------------------------------------------------

           PCサイズ（画面幅768px以上）でのみガター80px適用する場合

           --------------------------------------------------- */

@media (min-width: 768px) {
 .gutter-80 {
 margin-right: -40px;
 margin-left: -40px;
}
 .gutter-80 > [class*="col-"] {
 padding-right: 40px;
 padding-left: 40px;
}
}
/* ---------------------------------------------------------------------------------------------------------------------------------------------------------

           カードのスタイル02

           --------------------------------------------------- */

.nook-card02 {
	background-color: #fff; /* 内側の白 */
	border: 1px solid #000; /* 1pxの枠線 */
	border-radius: 20px;
	padding: 50px 40px 30px;
	width: 100%;
	position: relative;
	box-sizing: border-box;
	margin-top: 0px;
}



        /* =================================================================

           ★超精密調整: 背景の境界を枠線の「中心」に揃える

           ================================================================= */

        

/* 1. 左上の枠線を隠すブロック */

.nook-card02::before {
 content: "";
 position: absolute;
 top: -1px; /* 枠線(1px)の真上にピタッと配置 */
 left: 52px;
 width: 116px;
 height: 1px; /* 高さを枠線と全く同じ1pxにする */

            

/* ★ポイント: 1pxの中で、上半分(0.5px)を外側のベージュ、下半分を白にする */

            background: linear-gradient(to bottom, #E3DEC9 50%, #fff 50%);
 z-index: 1;
}



/* 2. 右下の枠線を隠すブロック */

.nook-card02::after {
 content: "";
 position: absolute;
 bottom: -1px; /* 下の枠線の真上に配置 */
 right: 10%;
 width: 25px;
 height: 1px; /* 高さ1px */

            

/* ★ポイント: 下の枠線なので、上半分が白、下半分が外側のベージュ */

background: linear-gradient(to bottom, #fff 50%, #E3DEC9 50%);
 z-index: 1;
}
/* =================================================================

           正円のスタイル（変更なし）

           ================================================================= */

.circle-number {
	position: absolute;
	left: 70px;
	top: -30px;
	width: 80px;
	height: 80px;
	background-color: #fff;
	border: 1px solid #000;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 2rem;
	font-weight: 500;
	z-index: 2; /* 隠しブロックより上に配置 */
}
/* テキストスタイル（変更なし） */

.nook-title02 {
	text-align: center;
	font-size: 24px;
	margin-top: 0;
	margin-bottom: 25px;
	letter-spacing: 0.1em;
	font-weight: 500;
}
.nook-text02 {
	font-size: 18px;
	line-height: 1.8;
	text-align: justify;
	margin: 0;
	font-weight: 500;
}

/* ---------------------------------------------------

           スマホ用のサイズ調整

           --------------------------------------------------- */

@media (max-width: 750px) {
.nook-card02 {
 background-color: #fff; /* 内側の白 */
 border: 1px solid #000; /* 1pxの枠線 */
 border-radius: 20px;
 padding: 40px 20px 20px;
 width: 100%;
 position: relative;
 box-sizing: border-box;
 margin-top: 0px;
}
.nook-card02::before {
 content: "";
 position: absolute;
 top: -1px; /* 枠線(1px)の真上にピタッと配置 */
 left: 32px;
 width: 100px;
 height: 1px; /* 高さを枠線と全く同じ1pxにする */

            

/* ★ポイント: 1pxの中で、上半分(0.5px)を外側のベージュ、下半分を白にする */

　background: linear-gradient(to bottom, #E3DEC9 50%, #fff 50%);
 z-index: 1;
}
 .circle-number {
 position: absolute;
 left: 50px;
 top: -30px;
 width: 65px;
 height: 65px;
 background-color: #fff;
 border: 1px solid #000;
 border-radius: 50%;
 display: flex;
 justify-content: center;
 align-items: center;
 font-size: 2rem;
 font-weight: 500;
 z-index: 2; /* 隠しブロックより上に配置 */
}
.nook-title02 {
 text-align: center;
 font-size: 20px;
 margin-top: 10px;
 margin-bottom: 15px;
 letter-spacing: 0.1em;
 font-weight: 500;
}
.nook-text02 {
 font-size: 18px;
 line-height: 1.8;
 text-align: justify;
 margin: 0;
 font-weight: 500;
}
}
/* ---------------------------------------------------------------------------------------------------------------------------------------------------------

           矢印

           --------------------------------------------------- */
.arrow-down {
	width: 60px;
	height: 40px;
	position: relative;
	margin: 0 auto;
	/* 縦線を描画（変更なし） */
  background-image: linear-gradient( to right, transparent 29px, #000 29px, #000 30px, transparent 30px );
}

/* 2. 左右の斜め線（V字）の共通設定 */
.arrow-down::before, .arrow-down::after {
 content: "";
 position: absolute;
 bottom: 0;
  
  /* 縦線と全く同じ位置（左から29px）に配置 */
  left: 29px;
 width: 1px;
 height: 35px; /* 斜め線の長さ（お好みで変更可能です） */
 background-color: #000;
  
  /* 回転軸を「一番下の中央」に固定して、縦線の真下にピッタリ繋ぎます */
  transform-origin: bottom center;
}

/* 左の斜め線（水平に対して約30度の緩やかな角度＝垂直から60度回転） */
.arrow-down::before {
 transform: rotate(-50deg);
}

/* 右の斜め線 */
.arrow-down::after {
 transform: rotate(50deg);
}
/* ---------------------------------------------------------------------------------------------------------------------------------------------------------

           BKカスタムボタン

           --------------------------------------------------- */
.custom-btn {
	position: relative; /* 矢印の配置基準になります */
	display: flex;
	justify-content: center; /* 文字を横の中央に配置 */
	align-items: center;     /* 文字を縦の中央に配置 */
}
/* ---------------------------------------------------
           Bootstrapアイコンのスタイル
           --------------------------------------------------- */
        .custom-btn-icon {
	position: absolute;
	right: 20px; /* 右端からの距離 */
	font-size: 1.2rem; /* アイコンの大きさ */
	color: #000; /* アイコンの色 */
}
/* ---------------------------------------------------
           下部の問い合わせボタンのスタイル
           --------------------------------------------------- */
        .custom-btn02 {
	position: relative; /* アイコンの配置基準 */
	display: flex;
	justify-content: center; /* 文字を横の中央に配置 */
	align-items: center;     /* 文字を縦の中央に配置 */
	width: 280px;
	height: 40px;
	background-color: #fff;
	border: 1px solid #000;
	border-radius: 12px;
}
/* ---------------------------------------------------
           上部の問い合わせボタンのスタイル
           --------------------------------------------------- */
        .custom-btn03 {
	position: relative; /* アイコンの配置基準 */
	display: flex;
	justify-content: center; /* 文字を横の中央に配置 */
	align-items: center;     /* 文字を縦の中央に配置 */
	width: 160px;
	height: 28px;
	background-color: #fff;
	border: 1px solid #000;
	border-radius: 8px;
	margin-left:30px;
}
.custom-btn-icon03 {
	position: absolute;
	right: 7px; /* 右端からの距離 */
	font-size: 0.8rem; /* アイコンの大きさ */
	color: #000; /* アイコンの色 */
}
/** {
  outline: 1px solid red !important;
}*/