@charset "utf-8";

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

/* CSSの .zen-old-mincho-regular の下あたりに追加してください */
.lp-wrapper {
    width: 100%;
    overflow-x: hidden; /* 横揺れ・はみ出しを強制カット */
    margin: 0 auto;
}

/* --- 1. 基本リセット --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    line-height: 1.8;
    color: #343434;
    overflow-x: hidden;
    background-color: #fdfdfd;
    font-family: "Hiragino Mincho ProN", "MS 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); /* 実寸に広がる */
}

/* ヘッダー全体の固定設定 */
#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: 10px 20px;
}

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

/* 右側のアイコンとメニューを横に並べる */
.header_nav {
    display: flex;
    align-items: center;
    gap: 30px; /* 要素間の隙間をトップページに合わせる */
}

.header_nav img {
    width: 50px; /* アイコンのサイズ */
    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;
}

/* メニュー全体のスタイル */
.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: 0; }
.hamburger span:nth-child(2) { top: 10px; }
.hamburger span:nth-child(3) { top: 20px; }

/* 開いた時の状態 */
.hamburger.active span:nth-child(1) {
    top: 10px;
    transform: rotate(45deg);
}
.hamburger.active span:nth-child(2) {
    opacity: 0;
}
.hamburger.active span:nth-child(3) {
    top: 10px;
    transform: rotate(-45deg);
}

/* commitment.css または共通CSSに追加 */
html {
  scroll-behavior: smooth; /* スクロールを滑らかにする（任意） */
}

/* アンカーの着地地点を調整 */
#sozai, #circle, #book {
  scroll-margin-top: 80px; /* ヘッダーの高さに合わせて数値を調整してください */
}

.intro {
    width: 100%;
    height: 450px;
    background-image: url("../images/SHIORI_hiraoki.png");
    background-size: cover;
    background-position: center;
	background-attachment: fixed;
	background-size: 100%;
	background-repeat: no-repeat;
}

/* --- 3. メインビジュアル --- */
.main.container {
    max-width: 100% !important;
    width: 100%;
    padding: 0 !important;
    margin: 0 auto !important;
}

.main-visual-bg {
    width: 100%;
    min-height: auto;
    padding: 120px 20px 0px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    /* グラデーション背景に統一 */
      background: linear-gradient(180deg, #cca89b 0%, rgba(253, 253, 253, 0) 100%);
    box-sizing: border-box;
    /* アニメーションの初期状態 */
    opacity: 0;
    transform: translateY(40px);
    transition: all 1.2s ease;
}

/* 表示された時のクラス（JSで付与） */

.main-visual-bg h1{
font-family: "fot-tsukuardgothic-std", sans-serif;
font-size: 3rem;
}

h2, h3 {
    font-family: "fot-tsukuardgothic-std", sans-serif;
    /* 必要であればフォントサイズも個別に設定 */
}

h2 {
    font-size: 2.5rem;
    margin-bottom: 30px;
}

h3 {
    font-size: 1.5rem;
    margin-bottom: 20px;
}

.main.is-active .main-visual-bg {
    opacity: 1;
    transform: translateY(0);
}

.kodawari__txt {
    font-size: 3.5rem;
    margin-bottom: 60px;
    color: #fff;
    letter-spacing: 0.3em;
    font-family: "Zen Old Mincho", serif;
    text-shadow: 2px 2px 10px rgba(0,0,0,0.1);
}

/* スマホ対応 */
@media screen and (max-width: 768px) {
    .main-visual-bg {
        padding: 100px 20px 0px;
    }
    .kodawari__txt {
        font-size: 2rem;
        margin-bottom: 30px;
    }
    .main-text {
        font-size: 1rem;
        line-height: 2.2;
        
}

@media screen and (max-width: 768px) {
    /* スマホで改行を無効化して、文章を自然な流れにする */
    .main-text p br {
        display: none;
    }

    /* フォントサイズを少し小さくして、1行に入る文字数を増やす */
    .main-text {
        font-size: 0.95rem; /* 1remより少し小さく */
        line-height: 2;    /* 行間も少し詰めるとスッキリします */
        padding: 0 15px;
    }
}
    }

/* --- 4. その他のセクション共通 --- */

main section {
    width: 100%;
    margin: 0 auto;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1.2s ease, transform 1.2s ease;
}

/* フェードインの実行クラス */
main section.is-active {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* 最初から見せておきたいセクション用 */
main section.no-fade {
    opacity: 1 !important;
    transform: none !important;
}
/* --- 4. その他のセクション共通 --- */
.container {
    max-width: 800px;
    margin: 0 auto !important; /* 確実に中央へ */
    padding: 80px 20px;
    text-align: center;
    width: 95%; /* スマホで見切れないよう少し余裕を持たせる */
    box-sizing: border-box; /* パディングを含めて計算 */
}

main section {
    width: 100%;
    margin-left: auto !important;
    margin-right: auto !important;
    opacity: 0;
    /* transformを一度リセットして安定させます */
    transform: translateY(30px); 
    transition: opacity 1.2s ease, transform 1.2s ease;
}

main section.is-active {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

#main {
    opacity: 1 !important;
    transform: none !important;
}

.main-text {
    margin: 40px auto;   /* 上下の余白を広げ、左右は中央寄せ */
    max-width: 850px;    /* ここを 800px から 600px（またはお好み）に狭める */
    width: 90%;          /* スマホで見た時に画面端に密着しないように */
    padding: 0 20px;
    font-size: 1.1rem;
    line-height: 2.8; /* ゆったりした行間 */
    letter-spacing: 0.15em;
    color: #4a4a4a;
    text-align: center;  /* テキストを中央寄せにする */
}

.main-text p{
max-width: 850px;  /* 最大幅を制限 */
    width: 90%;       /* 幅を100%に */
    margin: 0 auto;    /* 左右中央寄せの魔法 */
    display: block;    /* flexを解除して文章として扱う */
    text-align: center; /* 行内のテキストも中央寄せ */
}

/* もし中の p タグに個別に設定が残っていたら、ここも合わせておくと確実です */
.main.container p {
    max-width: 700px;
    margin: 0 auto;
}

/* アニメーション除外用 */
main section.no-fade, #main {
    opacity: 1 !important;
    transform: none !important;
}

/* 画像を丸くする設定 */
.sozai img, .circle img, .book img {
    width: 250px;
    height: 250px;
    object-fit: cover;
    border-radius: 50%;
    margin: 40px auto;
    display: block;
}

.book h2{
color: #cca89b;
}

.book h3{
color: #C28F7E;
}

.book p{
color: #C39E94;
}

/* ボタン */
/* ボタンの基本形状 */
.btn.practice01 {
    display: block;
    width: 200px;
    margin: 20px auto;
    padding: 10px;
    text-align: center;
    text-decoration: none;
    border-radius: 25px; /* 丸み */
    font-weight: bold;
    
    /* 初期の色の設定 */
    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;
}

/*店舗情報*/

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

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

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

/* ボタン */
/* ボタンの基本形状 */
.btn.practice01 {
    display: block;
    width: 400px;
    margin: 50px auto;
    padding: 20px;
    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;
}

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

/* タイトル画像 */
.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;
}

/* ページトップボタンの基本スタイル */
.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;
    }

footer img {
    max-width: 100%;
}