/*
Theme Name: Arkhe
Theme URI: https://arkhe-theme.com/
Version: 3.12.0
Tested up to: 6.8
Requires at least: 6.0
Requires PHP: 7.0
Description: A very simple theme for production templates. Customize as you like.
Tags: two-columns, one-column, right-sidebar, custom-colors, custom-menu, editor-style, theme-options, block-styles, wide-blocks
Author: LOOS,Inc.
Author URI: https://loos.co.jp/
Text Domain: arkhe
Domain Path: /languages
License: GNU General Public License v3 or later
License URI: https://www.gnu.org/licenses/gpl-3.0.html
*/



.clearfix:after {
  content: ".";  /* 新しい要素を作る */
  display: block;  /* ブロックレベル要素に */
  clear: both;
  height: 0;
  visibility: hidden;
}

.clearfix {
  min-height: 1px;
}

a{
	text-decoration: none;
}
body{
    font-family: a-otf-ud-shin-go-pr6n, sans-serif;
	background: #fff;
}
.pcnon{
	display: none;
}

.spnon{
	display: block;
}

.footer-phone{
	margin-bottom: 20px;
}
.footer-phone a{
	color: #333;
	font-size: 24px;
}
.footer-phone i{
	font-size: 24px;
    color: #f39800;
}

.privacy{
	text-align: center;
	margin-bottom: 20px;
	font-size: 13px;
}
.privacy a{
	color: #333;
	text-decoration: underline;
}



.head_wrap {
    height: 140px;
    background: #fff;
    width: 100%;
    z-index: 100;
}


.hmenu{
	z-index: 1000;
	position: absolute;
	top: 80px;
    left: 400px;
	font-size: 14px;
    background: rgba(0,0,0,0.0);
	padding: 0;
}
.hmenu.is-animation{
    background: rgba(0,0,0,0.5);
	padding: 20px;
	top: 0;
	right: 0;
}


.hmenu li{
	float: left;
	margin: 0 25px 0 0;
	display:  block;
	line-height: 1;
}

.hmenu a{
 color: #000;	
	display:  block;
	padding: 5px 0;
	font-size: 16px;
	text-decoration: none;
}
.hmenu a:hover{
	opacity: 0.7;
}

.hmenu > li > a span {
    display: block;
    font-size: 12px;
    color: #888;
    font-weight: normal;
    margin-top: 10px;
    text-align: center;
}

.hcon01{
	position: absolute;
	right: 400px;
	top: 0px;
	z-index: 1000;
}

.hcon01 img,.hcon02 img{
	height: 50px;
}

.hcon02{
	position: absolute;
	right: 200px;
	top: 0px;
	z-index: 1000;
}

.top_logo{
	z-index: 1000;
	position: absolute;
	top: 10px;
	left: 20px;
}
.top_logo img{
    height: 100px;
    width: auto;
}



li.menu__single {
    position: relative;
}

ul.hmenu li span{
	display: block;
	text-align: center;
	margin-top: 7px;
	font-size: 11px;
    color: #ea941a;
}

.hmenu li.menu__single ul.menu__second-level {
    position: absolute;
    top: 50px;
    width: 200px;
    background: #5272b8;
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
    float: none;
	padding: 0;
	margin: 0;
}


.hmenu ul.menu__second-level li{
    float: none;
	font-size: 16px;
	margin: 0;
	padding: 0;
}

.hmenu ul.menu__second-level li a{
	display: block;
	padding: 15px 10px;
	font-size: 14px;
	color: #fff;
}

li.menu__single:hover ul.menu__second-level {
    top: 50px;
    visibility: visible;
    opacity: 1;
}

ul.menu__second-level {
    visibility: hidden;
    opacity: 0;
    z-index: 1;
}

ul.menu__third-level {
    visibility: hidden;
    opacity: 0;
}

ul.menu__fourth-level {
    visibility: hidden;
    opacity: 0;
}

ul.menu__second-level a:hover{
    background: #708bc4;
	color: #fff;
	display: block;
}


.menu__second-level li {
}

.menu__third-level li {
}


/* floatクリア */
.menu:before,
.menu:after {
    content: " ";
    display: table;
}

.menu:after {
    clear: both;
}

.menu {
    *zoom: 1;
}


	html.is-fixed,
　　　　html.is-fixed body {
  height: 100%;
  overflow: hidden;
　　　　}
	.side_btn{
		display: none;
	}
.hamburger-menu{
	display: block;	
	}

.menu-btn {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    height: 140px;
    width: 140px;
    justify-content: center;
    align-items: center;
    z-index: 10001;
    background-color: #ea941a;
}

.mtitle{
	position: absolute;
	color: #fff;
	bottom: 15px;
	font-family: serif;
}
.menu-btn span,
.menu-btn span:before,
.menu-btn span:after {
    content: '';
    display: block;
    height: 3px;
    width: 65px;
    border-radius: 3px;
    background-color: #fff;
    position: absolute;
}
.menu-btn span:before {
    bottom: 15px;
}
.menu-btn span:after {
    top: 15px;
}
#menu-btn-check:checked ~ .menu-btn span {
    background-color: rgba(255, 255, 255, 0);
}
#menu-btn-check:checked ~ .menu-btn span::before {
    bottom: 0;
    transform: rotate(45deg);
}
#menu-btn-check:checked ~ .menu-btn span::after {
    top: 0;
    transform: rotate(-45deg);
}
#menu-btn-check {
    display: none;
}

.menu-content ul {
    padding: 70px 30px 0 30px;
}
.menu-content ul li {
    border-bottom: solid 1px #d49e38;
    list-style: none;
}
.menu-content ul li a {
    display: block;
    width: 100%;
    font-size: 15px;
    box-sizing: border-box;
    color:#333;
    text-decoration: none;
    padding: 20px 15px 20px 0;
    position: relative;
}
.menu-content ul li a::before {
    content: "";
    width: 7px;
    height: 7px;
    border-top: solid 2px #ffffff;
    border-right: solid 2px #ffffff;
    transform: rotate(45deg);
    position: absolute;
    right: 11px;
    top: 24px;
}
.menu-content {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
	padding: 50px 5% 0 5%;
    left: 100%;
    z-index: 10000;
    background-color: #fff;
    transition: all 0.5s;
}
#menu-btn-check:checked ~ .menu-content {
    left: 0;
}


.mv-section{
	padding-bottom: 20px;
	background-image: url(/wp-content/uploads/bg02.png),url(/wp-content/uploads/bg01.jpg);
	background-repeat: no-repeat;
	background-position: right,left bottom;
}

.mv_photo{
	position: relative;
	margin: 70px 10%;
}
.mv_photo img{
    display: block;
    height: 700px;
    object-fit: cover;
    width: 100%;
}


.slideshow-container {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

.slideshow-images {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.slideshow-images .slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1.5s ease-in-out; /* フェードの時間を1.5秒に設定 */
    z-index: 1; /* テキストより後ろ */
}

.slideshow-images .slide.active {
    opacity: 1;
    z-index: 2; /* 表示中の画像を最前面に */
}

.slideshow-text {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    text-align: center;
    z-index: 3; /* 画像より手前 */
    /* テキストのスタイルは既存のものを流用、またはここで再定義 */
    color: #fff; /* 白文字など、画像上で見やすい色に */
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5); /* 影をつけて視認性を上げる */
}

.slideshow-text h2 {
    font-size: 45px;
    margin-bottom: 15px;
    opacity: 0;
    transform: translateY(0px);
    animation: fadeUpAnimation 1s ease-out 0.5s forwards;
}

.slideshow-text h3 {
    font-size: 22px;
    opacity: 0; /* アニメーション適用のため初期状態を透明に */
    transform: translateY(20px);
    animation: fadeUpAnimation 1s ease-out 1s forwards;
}

/* スマホ表示用のテキストサイズ調整 */
@media (max-width: 768px) {
    .slideshow-text h2 {
        font-size: 26px;
    }
    .slideshow-text h3 {
        font-size: 14px;
    }
    /* スマホ用の高さを調整する場合 */
    .slideshow-container {
       height: 300px; /* 例えば固定の高さを指定 */
       aspect-ratio: auto; /* 比率指定を解除 */
    }
}

/* fadeUpAnimation のキーフレーム定義 (既存のものがあれば不要) */
@keyframes fadeUpAnimation {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* アニメーション前の初期状態 */
.fade-in {
  opacity: 0; /* 最初は透明 */
  transform: translateY(30px); /* 少し下に移動させておく */
  transition: opacity 1.2s ease-out, transform 1.2s ease-out; /* アニメーション効果 */
}

/* 画面内に入った後に付与されるクラス */
.fade-in.active {
  opacity: 1; /* 不透明にする */
  transform: translateY(0); /* 元の位置に戻す */
}

/* 全体のリセットと基本設定 */
body {
    margin: 0;
    padding: 0;
    font-family: "Zen Old Mincho", "Hiragino Mincho ProN", serif;
    color: #333;
    line-height: 1.6;
}

/* セクション全体 */
.concept-section {
    width: 100%;
    padding: 60px 20px;
    background-color: #fff;
    box-sizing: border-box;
	background-image: url(/wp-content/uploads/mark01.png),url(/wp-content/uploads/mark02.png);
	background-repeat: no-repeat;
	background-size: 200px;
	background-position: right 20px top 0px,left 20px bottom 0px;
}

/* コンテンツ幅を制限して中央寄せ */
.concept-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    align-items: center; /* 垂直方向中央 */
    justify-content: space-between;
    flex-wrap: wrap; /* スマホでの折り返し用 */
    gap: 40px;
}

/* 左側テキストエリア */
.concept-content {
    flex: 1; /* PCでは幅を分け合う */
    min-width: 300px; /* 極端に小さくならないように */
}

/* 英語タイトル (Concept) */
.concept-en-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 56px;
    color: #d49e38; /* 画像のようなゴールド/オレンジ系 */
    font-weight: 400;
    margin: 0 0 10px 0;
    line-height: 1.0;
}

/* 日本語タイトル (当店のこだわり) */
.concept-jp-title {
    font-size: 32px;
    font-weight: 500;
    margin: 0 0 40px 0;
    color: #000;
    letter-spacing: 0.05em;
}

/* キャッチコピー (伝統と革新...) */
.concept-catch {
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 30px;
    line-height: 1.8;
}

/* 本文 */
.concept-description p {
    font-size: 14px;
    line-height: 2.2; /* 行間を広めに */
    margin-bottom: 40px;
    text-align: justify; /* 両端揃えできれいに見せる */
}

/* ボタン設定 */
.concept-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #f39800; /* ボタンのオレンジ */
    color: #fff;
    text-decoration: none;
    padding: 15px 40px;
    border-radius: 50px; /* 丸み */
    font-size: 15px;
    letter-spacing: 0.1em;
    transition: opacity 0.3s;
    position: relative;
    padding-right: 60px; /* 矢印分のスペース */
}

.concept-btn:hover {
    opacity: 0.8;
}

/* ボタンの矢印を作る */
.concept-btn .arrow {
    position: absolute;
    right: 30px;
    width: 20px;
    height: 1px;
    background-color: #fff;
}

.concept-btn .arrow::after {
    content: '';
    position: absolute;
    right: 0;
    width: 6px;
    height: 1px;
    background-color: #fff;
    transform: rotate(45deg);
    transform-origin: right bottom;
}

/* 右側画像エリア */
.concept-image {
    flex: 1.2; /* 画像の方を少し広く取るバランス */
    text-align: right; /* 画像を右寄せ */
}

.concept-image img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* レスポンシブ対応（スマホ） */
@media screen and (max-width: 768px) {
    .concept-inner {
        flex-direction: column-reverse;

    }

.concept-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f39800;
    color: #fff;
    text-decoration: none;
    padding: 15px 40px;
    border-radius: 50px;
    font-size: 15px;
    letter-spacing: 0.1em;
    transition: opacity 0.3s;
    position: relative;
    padding-right: 60px;
    width: 260px;
    margin: 0 auto;
}  
    .concept-content, .concept-image {
        width: 100%;
        flex: auto;
        text-align: left;
    }
    
    .concept-en-title {
        font-size: 40px;
    }
    
    .concept-jp-title {
        font-size: 24px;
        margin-bottom: 30px;
    }
    
    .concept-catch {
        font-size: 18px;
    }
    
    /* スマホでは画像の余白調整 */
    .concept-image {
        margin-top: 20px;
        text-align: center;
    }
}


.item-section {
    padding: 40px 20px 80px 20px;
    background-color: #fff;
}

.item-inner {
    max-width: 1100px;
    margin: 0 auto;
}

/* --- タイトル周り --- */
.section-header {
    text-align: center;
    margin-bottom: 60px;
    /* タイトル下の飾り画像を背景として設定 */
    background-image: url('/wp-content/uploads/title_bottom.png');
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: 300px auto;
    padding-bottom: 50px;
}

.section-en-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 56px;
    color: #f39800;
    font-weight: 400;
    margin: 0;
    line-height: 1.0;
}

.section-jp-title {
    font-size: 32px;
    font-weight: 500;
    margin: 10px 0 0 0;
    color: #000;
}


.item-list {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 40px;
    margin-bottom: 60px;
}

.item-card {
    width: 30%; /* 3列並び */
    box-sizing: border-box;
}

/* 画像周りの枠デザイン */
.item-image-box {
    position: relative; /* バッジの基準位置 */
    background-color: #fcce86; /* 薄いオレンジの枠色 */
    padding: 10px; /* 枠の太さ */
    margin-bottom: 25px;
}

.item-thumb img {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 4 / 3; /* 画像比率を統一したい場合 */
    object-fit: cover;
}

/* バッジアイコン (左上絶対配置) */
.item-badge {
    position: absolute;
    top: -15px;  /* 枠からはみ出す調整 */
    left: -15px; /* 枠からはみ出す調整 */
    width: 80px; /* アイコンのサイズ */
    z-index: 10;
}

.item-badge img {
    width: 100%;
    height: auto;
    display: block;
    /* 影をつけて浮かせる場合 */
    filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.1));
}

/* 商品情報 */
.item-body {
    text-align: center;
}

.item-name {
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 15px 0;
}

.item-desc {
    font-size: 13px;
    line-height: 1.8;
    text-align: left; /* または center */
    margin: 0;
}

/* --- ボタン (前回のスタイルを流用) --- */
.btn-container {
    text-align: center;
}

.common-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #f39800;
    color: #fff;
    text-decoration: none;
    padding: 15px 50px;
    border-radius: 50px;
    font-size: 15px;
    letter-spacing: 0.1em;
    transition: opacity 0.3s;
    position: relative;
    padding-right: 70px;
}

.common-btn:hover {
    opacity: 0.8;
}

.common-btn .arrow {
    position: absolute;
    right: 35px;
    width: 20px;
    height: 1px;
    background-color: #fff;
}

.common-btn .arrow::after {
    content: '';
    position: absolute;
    right: 0;
    width: 6px;
    height: 1px;
    background-color: #fff;
    transform: rotate(45deg);
    transform-origin: right bottom;
}

/* --- レスポンシブ (スマホ) --- */
@media screen and (max-width: 768px) {
    .item-card {
        width: 100%; /* 1列にする */
        max-width: 400px;
        margin: 0 auto; /* 中央寄せ */
    }
    
    .section-en-title {
        font-size: 40px;
    }
    
    .section-jp-title {
        font-size: 24px;
    }
    
    /* スマホで飾り画像が大きすぎる場合の調整 */
    .section-header {
        background-size: 80% auto;
        padding-bottom: 40px;
    }
}

.chef-section {
    width: 100%;
    padding: 80px 20px;
    background-color: #fff;
    box-sizing: border-box;
}

.chef-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    align-items: center; /* 垂直方向中央 */
    justify-content: space-between;
    gap: 50px; /* 画像とテキストの間隔 */
}

/* 画像エリア (左) */
.chef-image {
    flex: 1.2; /* 画像を少し大きく見せるバランス */
    text-align: left; /* 画像の寄せ方向 */
}

.chef-image img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* テキストエリア (右) */
.chef-content {
    flex: 1;
}

/* 英語タイトル (Pastry chef) */
.chef-en-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 56px;
    color: #f39800; /* オレンジ/ゴールド系 */
    font-weight: 400;
    margin: 0 0 10px 0;
    line-height: 1.0;
}

/* 日本語タイトル (菓子職人のご紹介) */
.chef-jp-title {
    font-size: 32px;
    font-weight: 500;
    margin: 0 0 40px 0;
    color: #000;
}

/* キャッチコピー */
.chef-catch {
    font-size: 20px;
    font-weight: 600; /* 太字 */
    margin-bottom: 30px;
    line-height: 1.8;
}

/* 本文 */
.chef-description p {
    font-size: 14px;
    line-height: 2.2;
    margin-bottom: 40px;
    text-align: justify;
}

/* --- レスポンシブ (スマホ) --- */
@media screen and (max-width: 768px) {
    .chef-inner {
        /* テキストを上に、画像を下に表示する場合 */
        flex-direction: column-reverse; 
        gap: 30px;
    }

    .chef-image, .chef-content {
        flex: auto;
        width: 100%;
        text-align: left;
    }

    /* スマホでの画像位置調整 */
    .chef-image {
        margin-top: 10px;
        text-align: center;
    }

    .chef-en-title {
        font-size: 40px;
    }

    .chef-jp-title {
        font-size: 24px;
        margin-bottom: 30px;
    }

    .chef-catch {
        font-size: 18px;
    }
}


.tour-section {
    width: 100%;
    padding: 40px 20px 80px 20px;
    background-color: #fff;
    box-sizing: border-box;
    overflow: hidden;
	position: relative;
}

/* 背景のオレンジ帯 */
.tour-section::before {
    content: '';
    position: absolute;
    top: 0;
	width: 100%;
	height: 400px;
    bottom: 40px;
    left: 0;
    background-color: #f39800;
}

.tour-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;/
}

/* 左側：画像エリア */
.tour-image {
    flex: 1;
    z-index: 1; /* 重なり順の調整 */
    margin-right: -50px;
}

.tour-image img {
    width: 100%;
    height: auto;
    display: block;
}

/* 右側：コンテンツラッパー */
.tour-content-wrapper {
    flex: 1;
    position: relative;
    padding: 40px 0 40px 40px; /* 背景オレンジを見せるための余白 */
    z-index: 2;
	background-image: url(/wp-content/uploads/mark03.png);
	background-size: 250px;
	background-repeat: no-repeat;
}



/* 白いコンテンツボックス */
.tour-card {
    background-color: #fff;
    padding: 60px 40px 60px 60px; /* 内部余白 */
    position: relative;
    
    /* 左上を斜めにカットする */
    /* polygon(左上のX開始点 0, 100% 0, 100% 100%, 0 100%, 0 左上のY開始点) */
    clip-path: polygon(80px 0, 100% 0, 100% 100%, 0 100%, 0 80px);
}

/* 飾り枠アイコン */
.tour-mark {
    position: absolute;
    top: -15px;  /* 位置調整：カットされた角に合わせる */
    left: -10px; /* 位置調整 */
    width: 120px; /* アイコンサイズ */
    pointer-events: none; /* クリックの邪魔にならないように */
}

.tour-mark img {
    width: 100%;
    height: auto;
    display: block;
}

/* --- テキストスタイル (これまでのセクションと共通性を持たせています) --- */

.tour-en-title {
    font-family: 'Cormorant Garamond', serif; /* 画像のような筆記体風に見せるなら italic を追加 */
    font-style: italic;
    font-size: 50px;
    color: #f39800; /* オレンジ */
    font-weight: 400;
    margin: 0 0 10px 0;
    line-height: 1.0;
}

.tour-jp-title {
    font-size: 32px;
    font-weight: 500;
    margin: 0 0 40px 0;
    color: #000;
}

.tour-catch {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 30px;
    line-height: 1.8;
}

.tour-description p {
    font-size: 14px;
    line-height: 2.2;
    margin-bottom: 40px;
    text-align: justify;
}

/* ボタンの位置調整（右寄せにする場合） */
.tour-text-body {
    text-align: right; /* 画像のデザインに合わせて右寄せにしています */
}

.tour-text-body .tour-catch,
.tour-text-body .tour-description {
    text-align: right; /* 本文も右寄せ */
}
/* もし本文は左揃えが良い場合は上記を削除して .tour-text-body { text-align: left; } にしてください */


/* --- レスポンシブ (スマホ) --- */
@media screen and (max-width: 768px) {
    .tour-inner {
        flex-direction: column;
        gap: 30px;
    }
    
    .tour-image {
        margin-right: 0;
        width: 100%;
    }
    
    .tour-content-wrapper {
        padding: 0; /* スマホでは複雑な背景レイアウトをリセット */
        width: 100%;
    }
    
    .tour-content-wrapper::before {
        /* スマホでのオレンジ背景の扱い */
        right: -20px;
        left: -20px;
        top: 20px;
        bottom: -20px;
    }

    .tour-card {
        padding: 40px 20px;
        /* スマホでもカットを残すか、四角にするか */
        clip-path: none; /* 狭い画面ではカットをなくす場合 */
        /* カットを残すなら polygon の値を調整してください */
    }

    .tour-mark {
        width: 80px;
        top: -10px;
        left: -10px;
    }
    
    .tour-en-title {
        font-size: 36px;
    }
    
    .tour-jp-title {
        font-size: 24px;
    }
    
    .tour-text-body,
    .tour-text-body .tour-catch,
    .tour-text-body .tour-description {
        text-align: left; /* スマホでは読みやすく左揃え推奨 */
    }
    
    /* ボタンを中央に */
    .tour-text-body {
        text-align: center; 
    }
}

.faq_btn{
	text-align: center;
	margin-bottom: 80px;
}


.faq_btn img{
	max-width: 800px;
}

.news-section {
    width: 100%;
    padding: 50px 20px;
    background-image: url('/wp-content/uploads/newsbg.jpg');
    background-repeat: repeat; /* パターン素材の場合はrepeat、1枚絵ならno-repeat & size: cover */
    background-size: auto; 
    box-sizing: border-box;
}

.news-inner {
    max-width: 1100px;
    margin: 0 auto;
}

/* ニュースリスト（グリッド） */
.news-list {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    margin-bottom: 40px;
}

/* カード本体 */
.news-card {
    width: 31%; /* 3列 */
    background-color: #fff;
    border-radius: 20px; /* 大きめの角丸 */
    overflow: hidden; /* 角丸からはみ出さないように */
    box-shadow: 0 5px 15px rgba(0,0,0,0.05); /* うっすら影 */
    transition: transform 0.3s;
}

.news-card:hover {
    transform: translateY(-5px); /* ホバー時に少し浮く */
}

.news-link {
    text-decoration: none;
    color: inherit;
    display: block;
    height: 100%;
}

/* アイキャッチ画像 */
.news-thumb {
    margin: 0;
    width: 100%;
    aspect-ratio: 16 / 10; /* 画像の比率を固定（横長） */
    overflow: hidden;
}

.news-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 枠いっぱいにトリミングして表示 */
    transition: transform 0.5s;
}

.news-card:hover .news-thumb img {
    transform: scale(1.05); /* ホバー時に画像ズーム */
}

/* テキストエリア */
.news-body {
    padding: 20px;
}

.news-date {
    display: block;
    color: #a73636; /* 赤茶色っぽい日付色 */
    font-size: 14px;
    margin-bottom: 10px;
    font-family: 'Times New Roman', serif; /* 日付は明朝系英数字 */
}

.news-title {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.6;
    margin: 0;
    color: #333;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-color: rgba(0,0,0,0.1);
}

/* --- レスポンシブ (スマホ) --- */
@media screen and (max-width: 768px) {
    .news-list {
        flex-direction: column;
        gap: 40px;
    }
    
    .news-card {
        width: 100%;
        max-width: 400px;
        margin: 0 auto;
    }

    /* 背景画像のサイズ調整（必要であれば） */
    .news-section {
        background-size: cover; 
    }
}


.contact-section {
    width: 100%;
    padding: 80px 20px;
    background-image: url('/wp-content/uploads/conbg.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    position: relative; /* オーバーレイ配置用 */
    color: #fff; /* テキストは基本白 */
    text-align: center;
    box-sizing: border-box;
}

/* 背景を暗くするオーバーレイ */
.contact-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4); /* 黒の透過度40% */
    z-index: 1;
}

/* コンテンツをオーバーレイの上に表示 */
.contact-inner {
    position: relative;
    z-index: 2;
    max-width: 1100px;
    margin: 0 auto;
}

/* タイトル周り */
.contact-en-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 50px;
    color: #e5b96b; /* ゴールドっぽい色 */
    font-weight: 400;
    margin: 0;
    line-height: 1.0;
}

.contact-jp-title {
    font-size: 32px;
    font-weight: 500;
    margin: 10px 0 30px 0;
    color: #fff;
    letter-spacing: 0.1em;
}

.contact-desc {
    font-size: 15px;
    line-height: 1.8;
    margin-bottom: 50px;
}

/* ボタンリスト */
.contact-btn-list {
    display: flex;
    justify-content: center;
    gap: 30px; /* ボタン間の隙間 */
    flex-wrap: wrap;
}

/* ボタン共通スタイル */
.contact-box-btn {
    background-color: #fff;
    border: 3px solid #f39800; /* 枠線オレンジ */
    border-radius: 15px; /* 角丸 */
    width: 320px; /* PCでの幅 */
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #333;
    font-size: 18px;
    font-weight: 600;
    transition: all 0.3s;
    box-sizing: border-box;
    position: relative;
}

.contact-box-btn:hover {
    background-color: #fef4e3; /* ホバー時に薄いオレンジ背景 */
    transform: translateY(-3px);
}

/* アイコンスタイル */
.contact-box-btn i {
    font-size: 24px;
    margin-right: 15px;
    position: absolute; /* アイコンの位置を微調整しやすいように */
    left: 30px; /* 左端からの距離固定 */
}

/* テキスト位置 */
.contact-box-btn .btn-text {
    padding-left: 20px; /* アイコンと重ならないように調整 */
}

/* アイコンごとの色設定 */
.icon-orange {
    color: #f39800;
}

.icon-line {
    color: #06c755; /* LINEの緑色 */
}

/* --- レスポンシブ (スマホ) --- */
@media screen and (max-width: 768px) {
    .contact-jp-title {
        font-size: 24px;
    }
    
    .contact-desc {
        font-size: 14px;
        text-align: left; /* スマホでは左揃えが見やすい場合 */
        display: inline-block; /* 中央寄せしつつ左揃えにするテクニック */
        text-align: center; /* やはり中央寄せのままでいく場合 */
    }
    
    .contact-desc br {
        display: none; /* スマホでは改行を消して自然に折り返す */
    }

    .contact-btn-list {
        flex-direction: column;
        gap: 20px;
        align-items: center;
    }

    .contact-box-btn {
        width: 100%;
        max-width: 350px; /* スマホでの最大幅 */
        height: 60px;
        font-size: 16px;
    }

    .contact-box-btn i {
        font-size: 20px;
        left: 20px;
    }
}
.site-footer {
    width: 100%;
    /* 指定の背景色 */
    background-color: #f6f3ee;
    padding-top: 80px;
    box-sizing: border-box;
    position: relative;
    overflow: hidden; /* イラストのはみ出し制御 */
}

.footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center; /* 上下中央揃え */
    justify-content: space-between;
    gap: 60px;
    padding-bottom: 80px; /* 下部にイラスト用の余白 */
    padding-left: 20px;
    padding-right: 20px;
}

/* 左側：店舗写真 */
.footer-shop-image {
    flex: 1;
}

.footer-shop-image img {
    width: 100%;
    height: auto;
    display: block;
    box-sizing: border-box;
}

/* 右側：店舗情報エリア */
.footer-info {
    flex: 1;
    text-align: center;
    position: relative; /* イラストの配置基準 */
}

.footer-en-name {
    font-family: 'Cormorant Garamond', serif;
    font-size: 60px;
    color: #f39800; /* オレンジ */
    margin: 0;
    line-height: 1.0;
}

.footer-jp-name {
    font-size: 22px;
    font-weight: 500;
    margin: 10px 0 40px 0;
    letter-spacing: 0.1em;
}

.footer-address,
.footer-hours {
    font-size: 15px;
    line-height: 2.0;
    margin-bottom: 30px;
}

/* 注釈の文字サイズ調整 */
.footer-hours .note {
    font-size: 13px;
}

/* 右下のシェフイラスト */
.footer-illust {
    position: absolute;
    bottom: -60px; /* 位置調整 */
    right: -20px;  /* 位置調整 */
    width: 200px;  /* イラストのサイズ */
    pointer-events: none; /* クリックの邪魔にならないように */
}

.footer-illust img {
    width: 100%;
    height: auto;
    display: block;
}

/* コピーライト */
.copyright {
    background-color: #f39800; /* オレンジ帯 */
    color: #fff;
    text-align: center;
    padding: 15px 0;
    font-size: 12px;
    letter-spacing: 0.05em;
    font-family: 'Cormorant Garamond', serif; /* 英語部分に合わせて */
}

/* --- レスポンシブ (スマホ) --- */
@media screen and (max-width: 768px) {
    .footer-inner {
        flex-direction: column;
        gap: 40px;
        padding-bottom: 120px; /* イラスト分のスペース確保 */
    }

    .footer-shop-image {
        width: 100%;
    }

    .footer-info {
        width: 100%;
    }

    .footer-en-name {
        font-size: 48px;
    }

    .footer-jp-name {
        font-size: 18px;
    }

    /* スマホでのイラスト位置調整 */
    .footer-illust {
        width: 150px;
        bottom: -100px;
        right: 0;
    }
}

.slideshow-text {
    text-align: left; 
    left: 5%; /* 画面左端からの距離 */
    right: auto;
    width: auto;
    z-index: 10;
display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
}


.slideshow-text h2,
.slideshow-text h3 {
    background-color: rgba(243, 152, 0, 0.85); 
    color: #fff;
	font-size: 28px !important;
	font-weight: normal;
    display: inline-block; /* 文字幅に合わせて背景を止める */
    padding: 15px 30px;    /* 背景の余白 */
    white-space: nowrap;   /* 改行させない */
    margin: 0 0 10px 0;    /* 下の行との間隔 */
    box-shadow: 2px 2px 10px rgba(0,0,0,0.1);
    clip-path: inset(0 100% 0 0);
    -webkit-clip-path: inset(0 100% 0 0);
    
    /* 以前のフェード設定をリセット */
    opacity: 1; 
    transform: none;
}

/* --- 1行目 (昭和7年創業。) --- */
.slideshow-text h2 {
    font-size: 32px;
    letter-spacing: 0.1em;
    /* 左から開くアニメーション実行 */
    animation: curtainOpen 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: 0.5s; /* 0.5秒後に開始 */
}

/* --- 2行目 (伝統の和菓子から...) --- */
.slideshow-text h3 {
    font-size: 20px;
    font-weight: 500;
    letter-spacing: 0.1em;
    /* 左から開くアニメーション実行 */
    animation: curtainOpen 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: 1.2s; /* 1行目が開ききった頃に開始 */
}

/* --- カーテンアニメーションの定義 --- */
@keyframes curtainOpen {
    0% {
        /* 右側100%までマスク（見えない） */
        clip-path: inset(0 100% 0 0);
        -webkit-clip-path: inset(0 100% 0 0);
    }
    100% {
        /* マスクなし（全部見える） */
        clip-path: inset(0 0 0 0);
        -webkit-clip-path: inset(0 0 0 0);
    }
}

/* --- スマホ表示の調整 --- */
@media screen and (max-width: 768px) {
    .slideshow-text {
        left: 5%; /* スマホでは少し端に寄せる */
        right: 5%; /* はみ出し防止 */
    }

    .slideshow-text h2 {
        font-size: 20px;
        padding: 10px 20px;
        margin-bottom: 5px;
    }
    
    .slideshow-text h3 {
        font-size: 13px;
        padding: 8px 15px;
    }
}


/* --- アニメーション共通設定 --- */

/* 基本のフェードアップ（下からふわっと） */
.js-fade-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1.0s cubic-bezier(0.16, 1, 0.3, 1), transform 1.0s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 画面に入った時の状態（アクティブ） */
.js-fade-up.is-active {
    opacity: 1;
    transform: translateY(0);
}

/* --- 順番に表示させる（スタッガー）設定 --- */

/* 親要素（リスト全体）が画面に入ったら、子の動きを開始させるトリガー */
.js-stagger-trigger {
    /* 親自体は特に動かさないが、監視対象にする */
}

/* 子要素（カード単体）の初期状態 */
.js-stagger-child {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* 親に is-active がついたら、子要素を表示 */
.js-stagger-trigger.is-active .js-stagger-child {
    opacity: 1;
    transform: translateY(0);
}

/* 順番に遅延させる (3つ目まで設定) */
.js-stagger-trigger.is-active .js-stagger-child:nth-child(1) {
    transition-delay: 0.1s;
}
.js-stagger-trigger.is-active .js-stagger-child:nth-child(2) {
    transition-delay: 0.3s;
}
.js-stagger-trigger.is-active .js-stagger-child:nth-child(3) {
    transition-delay: 0.5s;
}
/* 記事が動的なので念のため多めに作っておくか、nth-child(n)で回す */
.js-stagger-trigger.is-active .js-stagger-child:nth-child(n+4) {
    transition-delay: 0.7s;
}


.slideshow-container {
    position: relative;
    width: 80%;
	margin: 50px 10% 0 auto;
    height: 700px; 
    overflow: hidden;
}

/* --- 画像エリアの設定 --- */
.slideshow-images {
    width: 100%;
    height: 100%;
}

/* --- 各スライド画像の共通設定 --- */
.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* 画像を枠いっぱいにトリミングして表示 */
    opacity: 0; /* 最初は透明に */
    
    /* アニメーション設定: 全体で15秒、無限ループ */
    animation: slideAnime 15s infinite;
}

/* --- 1枚目 --- */
.slideshow-images .slide:nth-child(1) {
    /* 遅延なしですぐ開始 */
    animation-delay: 0s;
}

/* --- 2枚目 --- */
.slideshow-images .slide:nth-child(2) {
    /* 5秒後に開始 */
    animation-delay: 5s;
}

/* --- 3枚目 --- */
.slideshow-images .slide:nth-child(3) {
    /* 10秒後に開始 */
    animation-delay: 10s;
}


/* --- フェードアニメーションの動き定義 --- */
@keyframes slideAnime {
    0% {
        opacity: 0;
    }
    10% {
        opacity: 1; /* フェードイン完了 */
    }
    33% {
        opacity: 1; /* 表示維持（3枚なので100%÷3=約33%） */
    }
    43% {
        opacity: 0; /* 次の画像へフェードアウト */
    }
    100% {
        opacity: 0; /* 待機 */
    }
}

/* スマホ表示の高さ調整 */
@media (max-width: 768px) {
    .slideshow-container {
        height: 300px; /* スマホでの高さ */
    }
}


:root {
    --brand-color: #d4a037; /* ゴールド/オレンジ系 */
    --text-main: #444;
    --text-sub: #666;
}

.commitment-wrapper {
    font-family: "Yu Mincho", "YuMincho", serif;
    color: var(--text-main);
    padding-bottom: 80px;
}

.commitment-wrapper img {
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
}

/* ページメインビジュアル（ヘッダー画像） */
.page-main-visual {
    max-width: 1200px;
    margin: 40px auto 60px auto;
}
.page-main-visual img {
    width: 100%;
    display: block;
	border-radius: 20px;
}

/* ページタイトル周り */
.page-header {
    text-align: center;
    margin-bottom: 70px;
    padding: 0 20px;
}

.sub-page-title {
    font-size: 2.2rem;
    margin-bottom: 25px;
    position: relative;
    display: inline-block;
    padding-bottom: 35px;
    font-weight: normal;
}

.sub-page-title::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 120%;
    height: 30px;
    background: url('/wp-content/uploads/title_bottom.png') no-repeat center top;
    background-size: contain;
}

.sub-page-title .en {
    display: block;
    font-size: 1rem;
    color: var(--brand-color);
    letter-spacing: 0.1em;
    font-family: sans-serif;
    margin-bottom: 5px;
}

.page-intro {
    font-size: 1rem;
    line-height: 2;
    color: var(--text-sub);
}

/* ====================================
   コンテンツエリア
   ==================================== */
.commitment-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

.commitment-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 100px;
}

.commitment-item.reverse {
    flex-direction: row-reverse;
}

/* ====================================
   画像フレーム設定（枠装飾）
   ==================================== */
.comm-img-frame {
    width: 45%;
    position: relative;
    padding: 15px; /* 装飾の被りを考慮した余白 */
}

.comm-img-frame figure {
    margin: 0;
    line-height: 0;
}

.comm-img-frame figure img {
    width: 100%;
    display: block;
    box-shadow: 0 0 15px rgba(0,0,0,0.1);
}

/* 枠装飾の共通設定 */
.frame-deco {
    position: absolute;
    width: 60px !important;
    height: auto;
    z-index: 2;
    pointer-events: none;
}

/* ご指定の順序で四隅に配置
  1. mark03 -> 左上
  2. mark01 -> 右上
  3. mark02 -> 左下
  4. mark04 -> 右下
*/
.pos-tl { top: -5px; left: -5px; }      /* mark03 */
.pos-tr { top: -5px; right: -5px; }     /* mark01 */
.pos-bl { bottom: -5px; left: -5px; }   /* mark02 */
.pos-br { bottom: -5px; right: -5px; }  /* mark04 */


/* ====================================
   テキストエリア
   ==================================== */
.comm-text-box {
    width: 48%;
}

/* 見出しとアイコンの設定 */
.comm-title {
    font-size: 1.6rem;
    color: var(--text-main);
    margin-bottom: 25px;
    line-height: 1.5;
    border-bottom: 1px solid #ddd;
    padding-bottom: 20px;
    font-weight: normal;
    display: flex;
    flex-direction: column; /* 縦並び */
    align-items: center;    /* 中央揃え */
    text-align: center;
}

.icon-top {
    color: var(--brand-color);
    font-size: 36px; /* 少し大きめに */
    margin-bottom: 15px; /* 見出し文字との間隔 */
}

.comm-desc {
    font-size: 1rem;
    line-height: 2;
    color: var(--text-sub);
    text-align: justify; /* 文章の両端揃え */
}

/* ====================================
   スマホ対応
   ==================================== */
@media screen and (max-width: 768px) {
    .sub-page-title {
        font-size: 1.6rem;
    }

    .commitment-item {
        display: block;
        margin-bottom: 60px;
    }
    
    .commitment-item.reverse {
        flex-direction: column;
    }

    .comm-img-frame {
        width: 100%;
        margin-bottom: 40px; /* 画像下の余白を確保 */
        padding: 10px;
    }

    .comm-text-box {
        width: 100%;
    }

    .comm-title {
        font-size: 1.4rem;
    }

    .sp-only {
        display: none;
    }

    .frame-deco {
        width: 45px !important;
    }
}

.js-fade {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1.2s cubic-bezier(0.2, 1, 0.3, 1), transform 1.2s cubic-bezier(0.2, 1, 0.3, 1);
    will-change: opacity, transform;
}

/* 表示状態：不透明で元の位置へ */
.js-fade.active {
    opacity: 1;
    transform: translateY(0);
}

/* 少し遅れて表示させたい場合（もしあれば） */
.delay-05 { transition-delay: 0.5s; }


.prod-badge {
    position: absolute;
    top: -15px;
    left: -15px;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #fff;
    font-weight: bold;
    z-index: 20;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    /* ギザギザ風の装飾（簡易的な波線borderで表現） */
    border: 3px solid #fff;
}

.prod-badge span {
    font-size: 0.9rem;
    line-height: 1.2;
    font-family: "Yu Mincho", serif;
    transform: rotate(-5deg); /* 少し傾ける */
}

/* 赤バッジ（看板商品） */
.badge-red {
    background: #cc0000; /* 鮮やかな赤 */
}

/* オレンジバッジ（人気商品） */
.badge-orange {
    background: #e67e22; /* 鮮やかなオレンジ */
}

/* 商品名を目立たせる */
.prod-name {
    font-size: 1.8rem;
    font-weight: bold;
    display: block;
}

/* ====================================
   2. ネットショップセクション
   ==================================== */
.online-shop-section {
    background-color: #f9f9f9; /* 背景色で区分け */
    padding: 80px 20px;
    margin-top: 80px;
    text-align: center;
}

.section-header {
    margin-bottom: 50px;
}

.section-header h3 {
    font-family: "Times New Roman", serif;
    font-size: 2rem;
    color: var(--brand-color);
    margin-bottom: 15px;
}

.shop-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3列 */
    gap: 30px;
    max-width: 1000px;
    margin: 0 auto 50px;
}

.shop-card {
    background: #fff;
    box-shadow: 0 3px 10px rgba(0,0,0,0.05);
    transition: transform 0.3s;
    text-align: left;
}

.shop-card:hover {
    transform: translateY(-5px);
}

.shop-img img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
}

.shop-txt {
    padding: 20px;
}

.shop-txt h4 {
    font-size: 1.1rem;
    margin-bottom: 10px;
    min-height: 1.5em; /* 2行になっても崩れにくいように */
}

.price {
    font-size: 1.2rem;
    font-weight: bold;
    color: var(--text-main);
    margin-bottom: 15px;
}

.price .tax {
    font-size: 0.8rem;
    font-weight: normal;
}

.btn-shop {
    display: block;
    background: #333;
    color: #fff;
    text-align: center;
    padding: 10px;
    text-decoration: none;
    font-size: 0.9rem;
    transition: opacity 0.3s;
}

.btn-shop:hover {
    opacity: 0.8;
}

.btn-main {
    display: inline-block;
    background: var(--brand-color);
    color: #fff;
    padding: 15px 60px;
    border-radius: 30px;
    text-decoration: none;
    font-size: 1.1rem;
    transition: opacity 0.3s;
}
.btn-main:hover {
    opacity: 0.8;
}

/* ====================================
   3. 店舗取り扱いカテゴリセクション
   ==================================== */
.instore-section {
    padding: 80px 20px;
    max-width: 1000px;
    margin: 0 auto;
    text-align: center;
}

.category-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3列 */
    gap: 40px 30px;
}

.cat-card {
    text-align: left;
}

.cat-card figure {
    margin: 0 0 15px;
    overflow: hidden;
}

.cat-card figure img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    transition: transform 0.5s;
}

.cat-card:hover figure img {
    transform: scale(1.05);
}

.cat-txt h4 {
    font-size: 1.2rem;
    border-left: 4px solid var(--brand-color);
    padding-left: 10px;
    margin-bottom: 10px;
    color: var(--text-main);
}

.cat-txt p {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #666;
}

/* ====================================
   レスポンシブ (スマホ)
   ==================================== */
@media screen and (max-width: 768px) {
    /* 看板商品のバッジ調整 */
    .prod-badge {
        width: 70px;
        height: 70px;
        top: -10px;
        left: -10px;
    }
    .prod-badge span {
        font-size: 0.75rem;
    }

    /* ネットショップ・カテゴリグリッド */
    .shop-grid,
    .category-grid {
        grid-template-columns: 1fr; /* 1列に */
        gap: 40px;
    }
    
    .shop-card, .cat-card {
        max-width: 400px;
        margin: 0 auto;
    }

    .shop-img img,
    .cat-card figure img {
        height: auto;
        aspect-ratio: 16/9; /* スマホでの比率固定 */
    }
}


.shop-greeting-section {
    margin-bottom: 80px;
}


/* ====================================
   2. 店舗概要 & マップ セクション
   ==================================== */
.shop-info-section {
    background-color: #fafafa;
    padding: 80px 20px;
}

.info-container {
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

/* 左側：店舗情報テキスト */
.info-details {
    width: 45%;
    margin-bottom: 40px;
}

.info-title {
    font-size: 1.8rem;
    font-family: "Yu Mincho", serif;
    border-left: 5px solid var(--brand-color);
    padding-left: 15px;
    margin-bottom: 30px;
    color: var(--text-main);
}

.shop-data-list {
    border-top: 1px solid #ddd;
}

.shop-data-list dt {
    float: left;
    width: 100px; /* 見出しの幅 */
    padding: 15px 0;
    font-weight: bold;
    clear: both;
    color: var(--text-main);
}

.shop-data-list dd {
    margin-left: 100px; /* 見出し幅分空ける */
    padding: 15px 0;
    border-bottom: 1px solid #ddd;
    color: var(--text-sub);
}

.tel-link {
    color: var(--text-main);
    text-decoration: none;
    font-size: 1.2rem;
    font-weight: bold;
}

/* 右側：マップ */
.info-map {
    width: 50%;
}

.map-wrapper {
    position: relative;
    padding-bottom: 75%; /* アスペクト比 4:3 */
    height: 0;
    overflow: hidden;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

.map-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
}


/* ====================================
   3. 特別注文・イベント出店 セクション
   ==================================== */
.special-order-section {
    max-width: 1000px;
    margin: 80px auto;
    padding: 0 20px;
}

.special-order-box {
    border: 2px solid var(--brand-color); /* ブランドカラーの枠 */
    padding: 50px;
    background-color: #fff;
    position: relative;
    text-align: center;
}

/* 枠を二重線風にする装飾（任意） */
.special-order-box::before {
    content: "";
    position: absolute;
    top: 5px; left: 5px; right: 5px; bottom: 5px;
    border: 1px solid #eee;
    pointer-events: none;
}

.special-title {
    font-size: 1.6rem;
    color: var(--brand-color);
    margin-bottom: 25px;
    font-family: "Yu Mincho", serif;
}

.special-lead {
    font-size: 1rem;
    line-height: 1.8;
    margin-bottom: 40px;
}

/* 4つの項目グリッド */
.special-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    text-align: left;
    margin-bottom: 40px;
}

.special-item {
    background: #fdfaf5; /* 薄いベージュ */
    padding: 20px;
    border-radius: 8px;
}

.special-item h4 {
    color: var(--text-main);
    font-size: 1.1rem;
    margin-bottom: 10px;
    border-bottom: 1px dashed #ccc;
    padding-bottom: 10px;
}

.special-item h4 i {
    color: var(--brand-color);
    margin-right: 8px;
}

.special-item p {
    font-size: 0.9rem;
    margin: 0;
    line-height: 1.6;
}

/* お問い合わせボタン */
.btn-contact {
    display: inline-block;
    background-color: var(--text-main);
    color: #fff;
    padding: 15px 50px;
    border-radius: 30px;
    text-decoration: none;
    transition: opacity 0.3s;
    font-weight: bold;
}

.btn-contact:hover {
    opacity: 0.8;
}


/* ====================================
   レスポンシブ (スマホ)
   ==================================== */
@media screen and (max-width: 768px) {
    /* 情報とマップを縦積みに */
    .info-details, 
    .info-map {
        width: 100%;
    }
    
    .info-details {
        margin-bottom: 50px;
    }

    /* 特別注文ボックス */
    .special-order-box {
        padding: 30px 20px;
    }

    .special-grid {
        grid-template-columns: 1fr; /* 1列 */
        gap: 20px;
    }

    .btn-contact {
        width: 100%;
        box-sizing: border-box;
    }
}


.faq-container {
    max-width: 800px;
    margin: 0 auto 80px;
    padding: 0 20px;
}

.faq-item {
    border-bottom: 1px solid #e0e0e0;
    margin-bottom: 20px;
}

/* --- 質問エリア (Q) --- */
.faq-question {
    position: relative;
    padding: 20px 50px 20px 60px; /* 左にQのスペース、右にアイコンのスペース */
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
    line-height: 1.5;
    transition: color 0.3s;
    color: var(--text-main);
}

.faq-question:hover {
    color: var(--brand-color);
}

/* 疑似要素で「Q」を表示 */
.faq-question::before {
    content: "Q";
    position: absolute;
    top: 18px;
    left: 10px;
    width: 35px;
    height: 35px;
    background-color: var(--brand-color); /* ブランドカラー */
    color: #fff;
    border-radius: 50%;
    text-align: center;
    line-height: 35px;
    font-family: "Georgia", serif;
    font-weight: bold;
    font-size: 1.2rem;
}

/* 開閉の＋－アイコン */
.toggle-icon {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
}

.toggle-icon::before,
.toggle-icon::after {
    content: "";
    position: absolute;
    background-color: #ccc;
    transition: transform 0.3s;
}

/* 横棒 */
.toggle-icon::before {
    top: 9px;
    left: 0;
    width: 100%;
    height: 2px;
}

/* 縦棒 */
.toggle-icon::after {
    top: 0;
    left: 9px;
    width: 2px;
    height: 100%;
}

/* 開いている状態のアイコン変化（－になる） */
.faq-item.is-open .toggle-icon::after {
    transform: rotate(90deg);
}
.faq-item.is-open .toggle-icon::before {
    transform: rotate(180deg); /* アニメーション用 */
}


/* --- 回答エリア (A) --- */
.faq-answer {
    height: 0;
    overflow: hidden;
    transition: height 0.4s ease-out; /* スライドのアニメーション */
    background-color: #fdfaf5; /* 薄い背景色 */
    border-radius: 8px;
}

.faq-answer-inner {
    padding: 25px 30px 25px 60px; /* 左にAのスペース */
    position: relative;
    font-size: 1rem;
    line-height: 1.8;
    color: var(--text-sub);
}

/* 疑似要素で「A」を表示 */
.faq-answer-inner::before {
    content: "A";
    position: absolute;
    top: 25px;
    left: 15px;
    font-family: "Georgia", serif;
    font-weight: bold;
    font-size: 1.5rem;
    color: var(--brand-color);
}

/* レスポンシブ対応 */
@media screen and (max-width: 768px) {
    .faq-question {
        font-size: 1rem;
        padding: 15px 40px 15px 50px;
    }
    
    .faq-question::before {
        width: 30px;
        height: 30px;
        line-height: 30px;
        font-size: 1rem;
        top: 13px;
    }
    
    .faq-answer-inner {
        padding: 20px 20px 20px 50px;
    }
    
    .faq-answer-inner::before {
        top: 20px;
        left: 15px;
        font-size: 1.2rem;
    }
}

.sightseeing-container {
    max-width: 1100px;
    margin: 0 auto 80px;
    padding: 0 20px;
}

/* 2列のグリッドレイアウト */
.spot-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 80px;
}

/* スポットカード */
.spot-card {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 3px 15px rgba(0,0,0,0.08);
    transition: transform 0.3s;
}

.spot-card:hover {
    transform: translateY(-5px); /* ホバーで少し浮く */
}

/* 画像エリア設定 */
.spot-img {
    margin: 0;
    overflow: hidden;
    aspect-ratio: 4 / 3; /* 写真の比率を4:3に固定 */
    position: relative;
}

.spot-img img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 枠に合わせてトリミング */
    transition: transform 0.5s ease;
}

.spot-card:hover .spot-img img {
    transform: scale(1.05); /* ホバーでゆっくりズーム */
}

/* テキストエリア設定 */
.spot-txt {
    padding: 25px;
}

.spot-txt h3 {
    font-size: 1.4rem;
    color: var(--text-main);
    margin-bottom: 15px;
    font-family: "Yu Mincho", serif;
    border-left: 4px solid var(--brand-color); /* 左にアクセントカラーの線 */
    padding-left: 15px;
    display: flex;
    flex-direction: column; /* 英語名を下に */
}

.spot-en {
    font-size: 0.9rem;
    color: var(--brand-color);
    font-family: sans-serif;
    font-weight: normal;
    margin-top: 5px;
}

.spot-txt p {
    font-size: 0.95rem;
    line-height: 1.8;
    color: var(--text-sub);
}

/* ====================================
   レスポンシブ (スマホ)
   ==================================== */
@media screen and (max-width: 768px) {
    .spot-grid {
        grid-template-columns: 1fr; /* スマホは1列表示 */
        gap: 40px;
    }

    .spot-card {
        max-width: 500px; /* カードの最大幅を制限 */
        margin: 0 auto;
    }
    
    .spot-txt {
        padding: 20px;
    }
    
    .spot-txt h3 {
        font-size: 1.3rem;
    }
}


.artisan-container {
    max-width: 1100px; /* 少し広めに設定 */
    margin: 0 auto 100px;
    padding: 0 20px;
}

.artisan-section {
    margin-bottom: 120px; /* セクション間の余白を広めに */
}

/* 部門タイトル */
.dept-title {
    text-align: center;
    font-size: 1.8rem;
    font-family: "Yu Mincho", serif;
    color: var(--text-main);
    margin-bottom: 50px;
    position: relative;
    display: inline-block;
    left: 50%;
    transform: translateX(-50%);
}

/* タイトル両脇の装飾線 */
.dept-title::before,
.dept-title::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 60px;
    height: 1px;
    background-color: var(--brand-color);
}
.dept-title::before { right: 110%; }
.dept-title::after { left: 110%; }


/* 職人紹介カード（全体レイアウト） */
.artisan-card {
    display: flex;
    justify-content: space-between;
    align-items: center; /* 垂直方向中央揃え */
    gap: 50px;
}

/* 偶数番目（和菓子部門）は左右反転 */
.artisan-card.reverse {
    flex-direction: row-reverse;
}

/* --- 写真エリア（グリッドレイアウト） --- */
.photo-grid {
    flex: 0 0 48%; /* 幅を固定 */
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2列 */
    gap: 15px; /* 写真間の隙間 */
}

.photo-grid figure {
    margin: 0;
    overflow: hidden;
    border-radius: 4px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
}

.photo-grid img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s;
}

.photo-grid figure:hover img {
    transform: scale(1.05);
}

/* メイン写真（上部、2列分連結） */
.main-photo {
    grid-column: 1 / 3; /* 横いっぱいに広げる */
    aspect-ratio: 3 / 2; /* メイン写真の比率 */
}

/* サブ写真（下部、横並び） */
.sub-photo {
    aspect-ratio: 1 / 1; /* 正方形 */
}


/* --- テキストエリア --- */
.text-box {
    flex: 1; /* 残りの幅を使用 */
}

/* 名前と役職 */
.artisan-name {
    font-size: 2rem;
    font-family: "Yu Mincho", serif;
    color: var(--text-main);
    margin-bottom: 20px;
    border-bottom: 1px solid #ddd;
    padding-bottom: 15px;
}

.position {
    display: block;
    font-size: 1rem;
    color: var(--brand-color);
    font-family: sans-serif;
    margin-bottom: 5px;
    font-weight: normal;
}

.en-name {
    font-size: 1.1rem;
    color: #999;
    font-family: sans-serif;
    font-weight: normal;
    margin-left: 15px;
}

/* キャッチコピー */
.catch-copy {
    font-size: 1.4rem;
    font-family: "Yu Mincho", serif;
    font-weight: bold;
    color: var(--text-main);
    margin: 30px 0;
    line-height: 1.4;
}

/* 紹介文 */
.introduction p {
    font-size: 1rem;
    line-height: 2;
    color: var(--text-sub);
    text-align: justify; /* 両端揃え */
}


/* ====================================
   レスポンシブ (スマホ)
   ==================================== */
@media screen and (max-width: 768px) {
    .artisan-section {
        margin-bottom: 80px;
    }

    /* カードを縦積みに */
    .artisan-card,
    .artisan-card.reverse {
        display: block;
        gap: 0;
    }

    /* 写真エリア */
    .photo-grid {
        width: 100%;
        margin-bottom: 35px;
        gap: 10px;
    }
    
    /* スマホでのメイン写真の比率調整（少し横長に） */
    .main-photo {
        aspect-ratio: 16 / 9;
    }

    /* タイトル周りの調整 */
    .dept-title {
        font-size: 1.5rem;
        margin-bottom: 40px;
    }
    /* スマホでは横線を短く */
    .dept-title::before, .dept-title::after {
        width: 30px;
    }
    
    /* テキスト周りの調整 */
    .artisan-name {
        font-size: 1.6rem;
    }
    .en-name {
        display: block; /* 英語名を改行 */
        margin-left: 0;
        margin-top: 5px;
        font-size: 1rem;
    }
    
    .catch-copy {
        font-size: 1.2rem;
        margin: 25px 0;
    }
}

.news-wrapper{
	max-width: 1200px;
	margin: 0 auto;
}

.single-wrapper{
	max-width: 1200px;
	margin: 0 auto;
}
/* ====================================
   News (category-news.php) カードスタイル
   ==================================== */

.news-wrapper, .single-wrapper {
    padding-bottom: 80px;
}

.news-container {
    max-width: 1100px; /* カード3列のために少し広げる */
    margin: 0 auto;
    padding: 0 20px;
}



/* カード本体スタイル */
.news-card {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 3px 15px rgba(0,0,0,0.08);
    transition: transform 0.3s, box-shadow 0.3s;
    height: 100%; /* 高さを揃える */
}

.news-card:hover {
    transform: translateY(-5px); /* ホバーで少し浮く */
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.news-card-link {
    text-decoration: none;
    color: var(--text-main);
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* アイキャッチ画像エリア */
.news-thumb {
    margin: 0;
    overflow: hidden;
    aspect-ratio: 16 / 9; /* 画像比率を固定 */
    position: relative;
}

.news-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.news-card:hover .news-thumb img {
    transform: scale(1.05); /* ホバーでズーム */
}

/* テキストエリア */
.news-body {
    padding: 25px;
    flex-grow: 1; /* 下部を揃えるために伸長 */
    display: flex;
    flex-direction: column;
}

/* メタ情報（日付・カテゴリ） */
.news-meta {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    font-size: 0.9rem;
}

.news-date {
    font-family: "Georgia", serif;
    color: #888;
    margin-right: 15px;
}

.news-cat {
    display: inline-block;
    background-color: var(--brand-color);
    color: #fff;
    font-size: 0.8rem;
    padding: 3px 10px;
    border-radius: 2px;
}

/* タイトル */
.news-title {
    font-size: 1.1rem;
    margin: 0;
    line-height: 1.5;
    font-weight: bold;
    /* 長すぎるタイトルを2行で省略 */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

/* ページネーション（前回と同じ） */
.news-pagination {
    margin-top: 60px;
    text-align: center;
    clear: both;
}

.news-pagination .page-numbers {
    display: inline-block;
    padding: 10px 15px;
    margin: 0 5px;
    border: 1px solid #ddd;
    color: var(--text-main);
    text-decoration: none;
    transition: all 0.3s;
}

.news-pagination .page-numbers.current,
.news-pagination .page-numbers:hover {
    background-color: var(--brand-color);
    border-color: var(--brand-color);
    color: #fff;
}

/* ====================================
   レスポンシブ (スマホ)
   ==================================== */
@media screen and (max-width: 768px) {
    /* グリッドを1列に */
    .news-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .news-card {
        max-width: 400px;
        margin: 0 auto;
    }

    .news-body {
        padding: 20px;
    }

    .news-title {
        font-size: 1.1rem;
    }
}

.single-container {
    max-width: 800px; /* 本文は少し狭めて読みやすく */
    margin: 0 auto;
    padding: 0 20px;
}

/* 記事ヘッダー */
.article-header {
    margin-bottom: 40px;
    text-align: center;
    border-bottom: 1px solid #eee;
    padding-bottom: 30px;
}

.article-meta {
    margin-bottom: 15px;
    color: #888;
    font-family: "Georgia", serif;
}

.article-date {
    margin-right: 15px;
}

.article-title {
    font-size: 1.8rem;
    line-height: 1.4;
    color: var(--text-main);
}

/* アイキャッチ画像 */
.article-thumbnail {
    margin-bottom: 50px;
}
.article-thumbnail img {
    width: 100%;
    height: auto;
    display: block;
}

/* 本文エリア（WordPressの自動出力への対応） */
.article-content {
    font-size: 1rem;
    line-height: 1.8;
    color: var(--text-main);
    margin-bottom: 80px;
}

.article-content p {
    margin-bottom: 1.5em;
}

.article-content h2,
.article-content h3,
.article-content h4 {
    margin-top: 2em;
    margin-bottom: 1em;
    color: var(--text-main);
}

.article-content h2 {
    font-size: 1.5rem;
    border-left: 5px solid var(--brand-color);
    padding-left: 15px;
}

.article-content h3 {
    font-size: 1.3rem;
    border-bottom: 2px solid var(--brand-color);
    padding-bottom: 10px;
}

.article-content img {
    max-width: 100%;
    height: auto;
    margin: 20px 0;
}

.article-content ul, 
.article-content ol {
    margin-bottom: 1.5em;
    padding-left: 1.5em;
    background: #f9f9f9;
    padding: 20px 20px 20px 40px;
}


/* 前後の記事ナビゲーション */
.post-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    padding: 20px 0;
    margin-top: 60px;
}

.nav-prev, .nav-next {
    width: 30%;
}
.nav-next {
    text-align: right;
}
.nav-list {
    text-align: center;
}

.post-navigation a {
    color: var(--text-sub);
    text-decoration: none;
    transition: color 0.3s;
    font-size: 0.9rem;
}

.post-navigation a:hover {
    color: var(--brand-color);
}

.nav-list a {
    display: inline-block;
    padding: 8px 20px;
    border: 1px solid #ddd;
    border-radius: 20px;
}

.nav-list a:hover {
    background: var(--brand-color);
    border-color: var(--brand-color);
    color: #fff;
}


/* ====================================
   レスポンシブ (スマホ)
   ==================================== */
@media screen and (max-width: 768px) {
    /* リスト */
    .news-link {
        display: block; /* 縦積みに */
        padding: 20px 10px;
    }
    
    .news-meta {
        margin-bottom: 10px;
    }

    .news-arrow {
        display: none; /* スマホでは矢印消すか、右下に配置するなど */
    }

    /* 詳細 */
    .article-title {
        font-size: 1.4rem;
    }

    .post-navigation {
        flex-direction: column;
        gap: 20px;
    }
    .nav-prev, .nav-next, .nav-list {
        width: 100%;
        text-align: center;
    }
}

.contact-container {
    max-width: 800px;
    margin: 0 auto 100px;
    padding: 0 20px;
}

.contact-sub-title {
    font-size: 1.4rem;
    font-family: "Yu Mincho", serif;
    border-left: 5px solid var(--brand-color);
    padding-left: 15px;
    margin-bottom: 20px;
	text-align: left;
}

/* --- 電話エリア --- */
.contact-phone-area {
    background-color: #fdfaf5; /* 薄いベージュ */
    padding: 40px;
    border-radius: 8px;
    margin-bottom: 60px;
    text-align: center;
}

.phone-desc {
    margin-bottom: 20px;
    font-size: 0.95rem;
}

.phone-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.phone-link {
    font-size: 2rem;
    font-weight: bold;
    color: var(--text-main);
    text-decoration: none;
    font-family: "Georgia", serif;
    transition: color 0.3s;
}

.phone-link:hover {
    color: var(--brand-color);
}

.phone-link i {
    font-size: 1.5rem;
    color: var(--brand-color);
    margin-right: 10px;
}

.phone-hours {
    font-size: 0.9rem;
    color: var(--text-sub);
}


/* --- フォームエリア (Contact Form 7 カスタマイズ) --- */
.form-desc {
    margin-bottom: 40px;
    font-size: 0.95rem;
    line-height: 1.8;
}

/* 入力欄のデザイン */
.cf7-container input[type="text"],
.cf7-container input[type="email"],
.cf7-container input[type="tel"],
.cf7-container textarea {
    width: 100%;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 1rem;
    background-color: #fff;
    box-sizing: border-box; /* パディングを含める */
    margin-bottom: 20px; /* パーツ間の余白 */
    font-family: inherit;
}

.cf7-container textarea {
    height: 200px; /* テキストエリアの高さ */
}

.cf7-container input:focus,
.cf7-container textarea:focus {
    border-color: var(--brand-color);
    outline: none;
    box-shadow: 0 0 5px rgba(212, 160, 55, 0.3);
}

/* ラベル（項目名） */
.cf7-container label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
    color: var(--text-main);
    font-size: 0.95rem;
}

/* 必須マーク（CF7側で設定している場合用） */
.wpcf7-required {
    color: #cc0000;
    margin-left: 5px;
}

/* 送信ボタン */
.cf7-container input[type="submit"] {
    background-color: var(--brand-color);
    color: #fff;
    border: none;
    padding: 15px 60px;
    font-size: 1.1rem;
    font-weight: bold;
    border-radius: 30px;
    cursor: pointer;
    transition: opacity 0.3s, background-color 0.3s;
    display: block;
    margin: 40px auto 0; /* 中央寄せ */
    width: auto; /* 幅を自動調整 */
    min-width: 250px;
}

.cf7-container input[type="submit"]:hover {
    opacity: 0.8;
}



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

.hmenu {
    z-index: 1000;
    position: absolute;
    top: 80px;
    left: 250px;
    font-size: 14px;
    background: rgba(0, 0, 0, 0.0);
    padding: 0;
}
}
@media screen and (max-width: 1151px) {
	.hmenu {
		display: none;
	}
}

@media screen and (max-width: 1000px) {
	.faq_btn{
	margin: 0 10% 60px 10%;		
	}
	.faq_btn img {
 width: 100%;
}
.hcon01{
display: none;		
	}
.hcon02{
display: none;		
	}
}

/* レスポンシブ対応 */
@media screen and (max-width: 768px) {
    .contact-phone-area {
        padding: 30px 20px;
    }
.page-main-visual {
    width: 100%;
    margin: 0 auto 60px auto;
}
	.concept-inner{
		margin: 0 5%;
	}
.mv-section {
    padding-bottom: 20px;
    background-image: url(/wp-content/uploads/bg02.png), url(/wp-content/uploads/bg01.jpg);
    background-repeat: no-repeat;
    background-position: right, left bottom;
	background-size: 100px,300px;
}
.chef-inner {
        flex-direction: column ;
        gap: 30px;
	margin: 0 5%;
}
.common-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f39800;
    color: #fff;
    text-decoration: none;
    padding: 15px 50px;
    border-radius: 50px;
    font-size: 15px;
    letter-spacing: 0.1em;
    transition: opacity 0.3s;
    position: relative;
    padding-right: 70px;
    width: 260px;
    margin: 0 auto;
}
.slideshow-container {
    margin: 0 10% 0 auto;
}
.menu-btn span:before {
    bottom: 15px;
}
	.menu-btn span{
		top: 35px;
	}
.mtitle {
    position: absolute;
    color: #fff;
    bottom: 10px;
    font-family: serif;
}
.menu-btn span:after {
    top: 15px;
}
.menu-btn span, .menu-btn span:before, .menu-btn span:after {
    content: '';
    display: block;
    height: 3px;
    width: 45px;
    border-radius: 3px;
    background-color: #fff;
    position: absolute;
}
	.page-main-visual img{
		width: 90%;
		margin: 0 5%;
	}
.menu-btn {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    height: 100px;
	width: 100px;
	}
    .phone-link {
        font-size: 1.6rem;
    }
    
    .cf7-container input[type="submit"] {
        width: 100%; /* スマホではボタン幅いっぱい */
    }
	
.pcnon{
	display: block;
}

.spnon{
	display: none;
}
	    .slideshow-text h2 {
        font-size: 18px !important;
        padding: 10px 20px;
        margin-bottom: 5px;
    }
	    .slideshow-text h3 {
        font-size: 18px !important;
        padding: 10px 20px;
        margin-bottom: 5px;
    }
}

/* ====================================
   プライバシーポリシーページ専用スタイル
   ==================================== */

.privacy-container {
    max-width: 900px;
    margin: 0 auto 100px;
    padding: 0 20px;
}

/* 大見出し (priv_t) */
.priv_t {
    font-size: 1.4rem;
    font-family: "Yu Mincho", serif;
    color: var(--text-main);
    margin-bottom: 30px;
    text-align: center;
    border-bottom: 1px solid #ddd;
    padding-bottom: 20px;
    margin-top: 20px;
}

/* 中見出し (priv_t2) */
.priv_t2 {
    font-size: 1.1rem;
    color: var(--text-main);
    margin-top: 40px;
    margin-bottom: 15px;
    border-left: 4px solid var(--brand-color); /* ブランドカラーのアクセント */
    padding-left: 10px;
}

/* 本文 (priv_txt) */
.priv_txt {
    font-size: 1rem;
    line-height: 1.8;
    color: var(--text-sub);
    margin-bottom: 1em;
    text-align: justify;
}

/* 右寄せ署名 (priv_txt_r) */
.priv_txt_r {
    margin-top: 60px;
    text-align: right;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text-main);
}

.l-article {
    max-width: unset;
}