@charset "utf-8";

/*フォント*/

.zen-old-mincho-regular {
  font-family: "Zen Old Mincho", serif;
  font-weight: 400;
  font-style: normal;
}

/* 全体設定 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: aqua; /* 元の設定を維持 */
    /*font-family: "Hiragino Mincho ProN", "MS Mincho", serif;*/ /* 和風デザインなので明朝体推奨 */
    color: #333;
    line-height: 1.8;
	color: #343434;
    overflow-x: hidden;
    background-color: #fdfdfd; /* 和紙のような白 */
}

p{
font-size: 1.5rem;
 font-family: "Zen Old Mincho", serif; 
}

#flower-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* コンテンツの背面に配置 */
    pointer-events: none;
}

/* 咲く前の状態とアニメーション */
.flower-circle {
    position: absolute;
    border-radius: 50%;
    filter: blur(40px); /* グラデーションのぼかし */
    opacity: 0;
    transform: scale(0); /* 最初はサイズ0 */
    transition: transform 3s ease-out, opacity 3s ease-out;
}

/* 咲いた後の状態 */
.flower-circle.is-bloomed {
    opacity: 0.6; /* 柔らかい透明度 */
    transform: scale(1); /* 実寸に広がる */
}

.container {
    max-width: 720px;
    margin: 0 auto;
    padding: 60px 20px;
    /*background: linear-gradient(180deg, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0) 100%); /* ほんのり白を混ぜて読みやすく */
	font-family: "fot-tsukuardgothic-std", sans-serif;
	font-weight: 400;
	font-style: normal;	
	color: #343434;
}

/* ヘッダー全体の固定設定 */
#header {
    width: 100%;
    background-color: rgba(255,255,255,0.75); 
    position: sticky;          /* スクロール追従 */
    top: 0;
    z-index: 2000;            /* 他の要素より上に表示 */
    box-shadow: 0 2px 10px rgba(0,0,0,0.05); /* 境目がわかりやすいよう薄い影 */
}

/* 中身を横並びにする設定 */
.header_container {
    max-width: 1000px;        /* サイトの幅に合わせて調整してください */
    margin: 0 auto;
    display: flex;
    justify-content: space-between; /* ロゴとナビを左右にわける */
    align-items: center;
    padding: 4px 20px;
}

/* ロゴのサイズ調整 */
.header_logo img {
    height: 30px; /* お好みの高さに */
    width: auto;
	display: flex;
	justify-content: center;
}

/* 右側のアイコンとメニューを横に並べる */
.header_nav {
    display: flex;
    align-items: center;
    gap: 40px; /* 要素間の隙間 */
}

.header_nav img {
    width: 60px; /* アイコンのサイズ */
    height: auto;
    display: block;
}

/* ハンバーガーメニューのデザイン */
.hamburger {
    width: 30px;
    height: 24px;
    display: flex;
	position: relative;
    cursor: pointer;
	z-index: 2001;
}

.hamburger span {
    display: block;
	position: absolute;
    width: 100%;
    height: 2px;
    background-color: #333; /* 三本線の色 */
	transition: all 0.3s ease-in-out;
    left: 0;	
}

/* メニュー全体のスタイル */
.sp-nav {
    position: fixed;
    top: 60px;
    right: -100%; /* 初期状態は画面の外（右）に隠す */
    width: 100%;
    height: calc(100vh - 60px);
    background-color: rgba(255, 255, 255, 0.98); /* 背景を少し透過させた白 */
    z-index: 1999;
    transition: 0.5s; /* 動くスピード */
    display: flex;
	flex-direction: column;
    align-items: center;
    justify-content: center;
	font-family: "fot-tsukuardgothic-std", sans-serif;
}

/* メニューが開いた時（JSでクラスを付与） */
.sp-nav.open {
    right: 0;
}

/* リストのスタイル */
.sp-nav ul {
    list-style: none;
    text-align: center;
}

.sp-nav ul li {
    margin: 25px 0;
}

.sp-nav ul li a {
    text-decoration: none;
    color: #333;
    font-size: 2rem;
    font-weight: bold;
	padding: 10px 25px;
    transition: 0.3s;
	display: block;
}

.sp-nav ul li a:hover {
    color: #d36b52; /* 温かい朱色 */
}

/* ボタンが押された時の「×」アニメーション 均等配置*/
.hamburger span:nth-child(1) { top: 0px; }
.hamburger span:nth-child(2) { top: 10px; } /* 中央 */
.hamburger span:nth-child(3) { top: 20px; }

/* 開いている時の「×」の状態 */
/* 開いた時：中心でクロスさせる */
.hamburger.active span:nth-child(1) {
    top: 11px; /* 中央に移動してから回転 */
    transform: rotate(45deg);
}
.hamburger.active span:nth-child(2) {
    opacity: 0; /* 真ん中の線は消す */
}
.hamburger.active span:nth-child(3) {
    top: 11px; /* 中央に移動してから回転 */
    transform: rotate(-45deg);
}

/*メイン*/

.main_vs {
    position: relative;
    /* 画像の最大幅（450px）に合わせて、文字の可動範囲を制限する */
    max-width: 450px; 
    margin: 0 auto 450px; /* 中央寄せ ＋ 下の余白 */
}

.main_vs img {
    width: 100%; /* 親の450pxに対して100%にする */
    height: auto;
    aspect-ratio: 1 / 2;
    border-radius: 500px;
    object-fit: cover;
    display: block;
}

/* 縦書き文字のまとまり */
.hitoiki {
    position: absolute;
    /* 位置の基準を「右下」にする */
    right: -80px;    /* 画像の右側にはみ出す距離 */
    bottom: -400px;   /* 画像の下端からどれくらいの位置にするか */
/* フレッスボックスで並び順をコントロール */
    display: flex;
    flex-direction: row-reverse; /* これで中の要素の左右を入れ替えます */
    align-items: flex-start;    /* 上端を揃える */
}

.line1, .line2 {
    writing-mode: vertical-rl;
    position: relative; /* absoluteから変更（2つを並べやすくするため） */
    display: inline-block;
    white-space: nowrap;
    font-size: 3rem;
    letter-spacing: 0.3em;
    font-family: "fot-tsukuardgothic-std", sans-serif;
    font-weight: 700;
}

/* 1行目（ホッと一息） */
.line1 {
    /* 位置の微調整が必要なければそのままでOK */
}

/* 2行目（ちょっと贅沢） */
.line2 {
    margin-top: 80px; /* 1行目より少し下げる（段違いにする） */
    margin-right: 5px; /* 1行目との横の隙間 */
}

.story p {
    padding: 20px;
    text-align: justify;
    clear: both; /* 念のため回り込みを解除 */
}

/* 横いっぱいの背景画像エリア */
.full-width-img {
    width: 100%;
    margin: 40px 0;
}

.intro, .under_img {
    width: 100%;
    height: 450px;
    background-size: cover;
    background-position: center;
	background-attachment: fixed;
	background-size: 100%;
	background-repeat: no-repeat;
}

.intro { background-image: url("../images/intro_img.jpg"); }
.under_img { background-image: url("../images/intro_book.jpg"); }

/* こだわり（3カラム風） */
/* --- カード全体の基本設定（スマホ用：画像が上、文字が下） --- */
.card {
    display: flex;
    flex-direction: column; /* 縦並び */
    align-items: center;
    margin-bottom: 60px;
    background: rgba(255, 255, 255, 0.5); /* カードっぽく薄く背景を敷く */
    padding: 30px 20px;
    /*border-radius: 15px;*/
    text-align: center;
}

.card_img {
    width: 100%; /* 画像コンテナを横いっぱいに */
    display: flex;
    justify-content: center;
}

.card_img img {
    width: 280px;
    height: 280px;
    border-radius: 50%; /* 正円 */
    object-fit: cover;
    margin-bottom: 30px;
}

.card_text h3 {
    margin-bottom: 50px;
    font-size: 2.5rem;
    border-bottom: 2px solid #d36b52;
    display: inline-block;
}

.card_text p {
    font-size: 1.5rem;
    line-height: 1.6;
    margin-bottom: 15px;
	text-align: justify;
    text-justify: inter-character;
}

/* View more全体のスタイル */
.view-more {
    display: inline-flex;
    align-items: center;
    color: #343434;
    font-size: 1.5rem;
    font-weight: bold;
    letter-spacing: 0.1em;
    cursor: pointer;
    transition: color 0.3s;
}

/* 矢印を包む丸い枠 */
.arrow-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;  /* 丸のサイズ */
    height: 60px;
    border: 1px solid #343434; /* 枠線 */
    border-radius: 50%;
    margin-left: 12px;
    position: relative;
    overflow: hidden; /* 枠からはみ出した矢印を隠す */
    transition: background-color 0.3s;
}

/* 矢印（棒の部分） */
.arrow {
    width: 30px;
    height: 1px;
    background-color: #343434;
    position: relative;
    transition: transform 0.3s ease;
}

/* 矢印（先端の > 部分） */
.arrow::after {
    content: '';
    position: absolute;
    right: 0;
    top: -3px;
    width: 6px;
    height: 6px;
    border-top: 1px solid #343434;
    border-right: 1px solid #343434;
    transform: rotate(45deg);
}

/* --- ホバーアニメーション --- */

/* --- ホバーアニメーションの連動 --- */

/* 1. 全体のテキスト色を朱色に */
.view-more:hover {
    color: #d36b52;
}

/* 2. 丸い枠の線を朱色に */
.view-more:hover .arrow-circle {
    border-color: #d36b52;
    background-color: rgba(211, 107, 82, 0.05);
}

/* 3. 矢印の「棒」を朱色に */
.view-more:hover .arrow {
    background-color: #d36b52; /* ここが重要 */
    animation: arrowSlideIn 0.5s forwards;
}

/* 4. 矢印の「先端（::after）」を朱色に */
.view-more:hover .arrow::after {
    border-color: #d36b52; /* ここも重要 */
}
@keyframes arrowSlideIn {
    0% {
        transform: translateX(0);
        opacity: 1;
    }
    40% {
        transform: translateX(20px); /* 右に消える */
        opacity: 0;
    }
    41% {
        transform: translateX(-20px); /* 左から準備 */
        opacity: 0;
    }
    100% {
        transform: translateX(0); /* 元の位置に戻る */
        opacity: 1;
    }
}

/* --- PC用の設定(画像と文字が横並び） --- */
@media (min-width: 768px) {
    /* .container の 720px という制限を 1100px まで強制的に広げます */
    section.container.kodawari {
        max-width: 900px !important; 
        width: 90%; /* 画面端にピッタリくっつかないよう少し余裕を持たせる */
        margin: 0 auto;
        padding: 100px 80px;
    }

    .card {
        display: flex !important;
        flex-direction: row !important; /* 横並びを強制 */
        align-items: center;
		justify-content: center; /* 中央に寄せる */
        gap: 80px; /* パーセントではなくpxで固定 */
        margin-bottom: 120px; /* カード同士の間隔も広げる */
        padding: 30px 80px;
    }

	.card_text {
	text-align: left;
	}

	.card.reverse {
        flex-direction: row-reverse !important;
    }

    /* 反転した時のテキストの向きを整える（お好みで） */
    .card.reverse .card_text {
        text-align: right;
    }
    .card_img {
        width: 300px !important; /* 画像エリアを確保 */
        flex-shrink: 0;
    }

    .card_text {
        flex: 1; /* 残りのスペース（これがテキストエリアになります）をすべて使う */
    }
}

/*店舗情報*/

.accsess  img:nth-child(1){
width: 280px;
height: auto;
display: block;
margin: 0 auto; /* 左右を自動計算して中央にする */
padding-bottom:30px;
}

.accsess img:nth-child(3){
width: 600px;
height: auto;
display: block;
margin: 0 auto; /* 左右を自動計算して中央にする */
padding:30px 0;
}


.accsess iframe{
display: flex;
margin: 0 auto;
}

/*オンラインショップ*/

/* タイトル画像 */
.onlinestore h2 img {
    width: 400px;
    height: auto;
    display: block;
    margin: 0 auto;
    padding: 30px 0;
}

/* 画像の「枠」の設定 */
.onlinestore_link {
    display: block;
    width: 600px;        /* お好みのサイズに調整してください */
    height: 400px;
    margin: 0 auto;
    position: relative;  /* 中の要素を重ねる基準 */
    overflow: hidden;    /* ズームした時のはみ出しを隠す */
    text-decoration: none; /* リンクの下線を消す */
}

/* 中の画像 */
.onlinestore_img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.5s ease; /* ズームの速さ */
    display: block;
}

/* 透かした背景 ＋ 文字の土台 */
.hover_text {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
     background-color: rgba(211, 107, 82, 0.3); /* 透かし背景の色 */
    display: flex; /* 文字の位置を真ん中に */
    justify-content: center;
    align-items: center;
    color: #fff;/* 文字のスタイル */
    font-size: 36px;
    font-weight: bold;
    letter-spacing: 0.1em; 
    opacity: 0;/* 最初は隠しておく */
    transition: 0.5s ease; /* ふわっと出すための設定 */
}

/* --- ホバー時の動き --- */

/* 画像をズームさせる */
.onlinestore_link:hover .onlinestore_img {
    transform: scale(1.1);
}

/* 透かし背景と文字をふわっと出す */
.onlinestore_link:hover .hover_text {
    opacity: 1;
}

/* お知らせ */

.information h2 img {
    width: 300px;
    height: auto;
    display: block;
    margin: 0 auto;
	padding-top: 50px;
}

.information-list {
    list-style: none;
    margin-top: 20px;
}

.information-list li {
    border-bottom: 1px solid rgba(0,0,0,0.1);
    padding: 10px 0;
}

.information-list a {
    text-decoration: none;
    color: inherit;
    display: flex;
	padding-bottom: 10px;
    gap: 20px;
}

.date {
    font-weight: bold;
    color: #888;
	font-size: 1.5rem;
	padding-right: 5px;
}

.information-btn-wrap {
    display: flex;
    justify-content: flex-end; /* 中身を右端に寄せる */
    margin-top: 20px;          /* リストとの間隔 */
	font-size: 1.5rem;
}

.information-btn-wrap .btn {
    display: inline-block;
    text-decoration: none;
    color: #343434;            /* 指定の文字色 */
    padding: 10px 20px;        /* ボタンらしい余白 */
    transition: color 0.3s;    /* 色の変化を滑らかに */
}

.information-btn-wrap .btn:hover {
    color: #d36b52;            /* 指定のホバーカラー */
}

/* ボタン */
/* ボタンの基本形状 */
.btn.practice01 {
    display: block;
    width: 400px;
    margin: 50px auto;
    padding: 25px;
    text-align: center;
    text-decoration: none;
    border-radius: 100px; /* 丸み */
    font-family: "fot-tsukuardgothic-std", sans-serif;
    background: #d36b52;      /* オレンジ背景 */
    color: #fff;              /* 白文字 */
    border: 1px solid #d36b52; /* 枠線 */
    
    /* アニメーションの設定（ご指定の数値） */
    transition: .4s cubic-bezier(0.37, 0, 0.63, 1);
    cursor: pointer;
}

/* ホバー時の変化 */
.btn.practice01:hover {
    background: #fff;       /* 背景を白に */
    color: #d36b52;         /* 文字をオレンジに */
    letter-spacing: 0.15em; /* 文字間隔を広く */
}

/* pタグの余白リセット */
.btn.practice01 p {
    margin: 0;
	font-family: "fot-tsukuardgothic-std", sans-serif;
}

/* ページトップボタンの基本スタイル */
.page-top {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 100;
    opacity: 0; /* 最初は隠す */
    visibility: hidden;
    transition: all 0.5s;
}

/* スクロールしてクラスがついた時に表示 */
.page-top.is-show {
    opacity: 1;
    visibility: visible;
}

/* 既存の .page-top a を上書き・調整 */
.page-top a {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #cca89b;
    color: #fff;
    width: 60px; /* 少し小さくしてもスマートです（お好みで80pxのままでもOK） */
    height: 60px;
    text-decoration: none;
    border-radius: 50%;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    transition: all 0.3s;
    position: relative;
}

/* 矢印の形を作る設定 */
.page-top a span {
    display: block;
    width: 15px;      /* 矢印のサイズ */
    height: 15px;     /* 矢印のサイズ */
    border-top: 3px solid #fff;   /* 矢印の太さ */
    border-left: 3px solid #fff;  /* 矢印の太さ */
    transform: rotate(45deg);     /* 45度回転させて「く」を上に向ける */
    margin-top: 6px;              /* 中心に見えるように微調整 */
}

/* ホバー時の動き（少し上に浮く演出を追加） */
.page-top a:hover {
    background: #d36b52;
    transform: translateY(-5px); /* ホバーでふわっと上に動く */
}

footer {
    text-align: center;
    padding: 40px;
    background-color: #c5a99e; /* 画像のフッター色に合わせる */
}

footer img {
    max-width: 100%;
}