/* =====================================
    共通レイアウト
===================================== */
* {
  box-sizing: border-box;
}

html, body {
  overflow-x: hidden; /* 横スクロールを禁止 */
  width: 100%;
  margin: 0;
  padding: 0;
}

body {
    padding-top: 70px !important; 
}

body#home_page {
  padding-top: 0 !important;
}

br.pc-br { display: none; }
br.sp-br { display: inline; }

.pc-display { display: none; }
.sp-display { display: inline; }

.logo {
  flex-shrink: 0;
  z-index: 9999; /* メニューの下に隠れないようにする */
}

.logo img {
  max-width: 200px; /* スマホでは少し小さめがおすすめ */
  height: auto;
}




/* =====================================
    ヘッダー（スマホ用・透過と固定の制御）
===================================== */
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10000;
  height: 70px;
}

#home_page header {
  position: relative; 
  /* ★箱全体の高さ ＝ 画像(75vh) ＋ アイコン用余白(80px) */
  height: calc(30vh + 40px); 
}

/* --- トップ以外のページ (book.htmlなど) --- */
body:not(#home_page) header {
  background: #fff;
  border-bottom: 1px solid #eee;
}

/* メニュー部分を画像の上に重ねる（変更なし） */
#home_page header .inner {
  position: fixed; 
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10;        
  height: 70px;
  padding: 10px 30px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4em;
}

/* =====================================
    ハンバーガーボタン（.ac_menu）
===================================== */
.ac_menu {
  display: flex; 
  background-color: #40210f; 
  border-radius: 5px;       
  width: 45px; 
  height: 41px; 
  align-items: center;
  justify-content: center;
  position: relative; /* ★追加：中の線の基準点にする */
  z-index: 10001; /* メニューボタンは常に一番上 */
  cursor: pointer;
}

.ac_menu.active {
  position: fixed;
  z-index: 10001;
}

/* ハンバーガーの3本線 */
.ac_menu span,
.ac_menu span::before,
.ac_menu span::after {
  position: absolute; /* ★追加：これを入れないとtopやleftが効かない */
  width: 25px;        /* 枠内に収まるように少し短く */
  height: 2px;        /* 線の太さ */
  background-color: #fff; /* 線の色 */
  transition: all 0.3s ease; /* ★追加：バツ印になる動きを滑らかにする */
}

/* 真ん中の線 */
.ac_menu span {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* 上の線 */
.ac_menu span::before {
  content: "";
  top: -8px; 
  left: 50%;
  transform: translateX(-50%); 
}

/* 下の線 */
.ac_menu span::after {
  content: "";
  bottom: -8px; 
  left: 50%;
  transform: translateX(-50%); 
}

/* メニューが開いた時（バツ印になる動き） */
.ac_menu.active span {
  background-color: transparent; /* 真ん中の線を消す */
}
.ac_menu.active span::before {
  top: 0; 
  transform: translateX(-50%) rotate(45deg); 
}
.ac_menu.active span::after {
  bottom: 0; 
  transform: translateX(-50%) rotate(-45deg);
}

/* =====================================
    メニュー本体（.navi）
===================================== */
header nav ul.navi {
  display: flex;             /* ★変更：noneからflexへ。常にフレックスにしておく */
  flex-direction: column;
  position: fixed !important;
  justify-content: start;
  top: 0;
  right: -100%;              /* 初期状態は画面の右外に隠す */
  width: 50%;                /* ★変更：スマホで押しやすいよう50%から75%に拡大 */
  height: 100%;             /* ★変更：画面の高さに合わせる */
  background: #fff;
  box-shadow: -5px 0 15px rgba(0,0,0,0.2);
  z-index: 999;  /* 背景よりは上、ボタンよりは下 */
  transition: right 0.4s ease; /* ★右からスライドしてくるアニメーション */
  padding: 80px 1em 1em;     /* 上に余白を開けて、閉じるボタンと被らないように */
  margin: 0;
}

/* メニューが開いた時 */
header nav ul.navi.active {
  right: 0 !important;       /* 画面内にスライドインさせる */
}

header nav ul.navi li {
  width: 100%;
  border-bottom: 1px solid #eee;
  padding: 15px 0;           /* スマホで指で押しやすい高さに */
  margin: 0;
}

header nav ul.navi li:last-child {
  border-bottom: none;
}

header nav ul.navi a {
  display: block;            /* ★変更：横幅いっぱいをクリック可能にする */
  text-decoration: none;
  color: #333;
  font-size: 1em;
}

header nav ul.navi a:hover {
  color: #40210f;            /* ★変更：青ではなくサイトカラーの茶色に */
}

/* PCの斜線区切りを無効化 */
header nav ul.navi li + li::before {
  content: none;
}

/* =====================================
    index.html専用：ヘッダースライダー（スマホ）
===================================== */
.mySwiper {
  /* 画像の高さ(60vh) + アイコン用余白(60px) */
  height: calc(30vh + 60px); 
  background-color: #fff;
  position: relative;
  overflow: visible; /* アイコンをはみ出させて表示 */
}

.mySwiper .swiper-slide img {
  height: 30vh; /* 画像自体の高さ */
  width: 100%;
  object-fit: cover;
  display: block;
}

/* パジネーション（丸い点）を画像の下に配置 */
.mySwiper .swiper-pagination {
  position: absolute;
  bottom: 15px !important; /* calc(60vh + 60px) の底からの位置 */
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
}

/* スマホでも点々の色を調整 */
.mySwiper .swiper-pagination-bullet {
  background: #333 !important;
  opacity: 0.4;
}

.mySwiper .swiper-pagination-bullet-active {
  background: #000 !important;
  opacity: 1;
}

/* スマホでは左右の矢印は基本非表示（必要なら display: block に） */
.mySwiper .swiper-button-prev,
.mySwiper .swiper-button-next {
  display: none;
}


/* =====================================
    背景オーバーレイ
===================================== */
.menu-overlay {
  display: none;        /* 初期状態は非表示 */
  position: fixed;      /* 画面に固定 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5); /* 半透明の黒 */
  z-index: 998;         /* メニュー(.navi)より一つ下の階層 */
}

/* activeが付いた時に表示 */
.menu-overlay.active {
  display: block;
  animation: fadeIn 0.3s forwards;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}


  /* =====================================
    スマホ用（768px以下）の調整
===================================== */

/* 1. スライダー（著書）の幅を広げる */
.bookSwiper {
    width: 95% !important; /* PCの60%から、画面いっぱいに広げる */
    margin-top: 20px;
    padding-bottom: 0.4em;
}

#book .sub_title img{
  width: 60%;
}

#book .container{
  padding-left: 0;
}

/* 2. 本文テキストの余白調整 */
#book .text {
    width: 90% !important;
    margin: 0 auto 3em;
}

#book .text p {
    margin-left: 0 !important; /* PCで設定していた深いインデントを解除 */
    margin-right: 0 !important;
    font-size: 15px;           /* スマホで読みやすいサイズに */
    line-height: 1.8;
}

#book .text h3 {
    margin-left: 0 !important;
    font-size: 18px;
}

/* 3. 書籍詳細テーブルの調整 */
#book_detail table {
    width: 90%;
}

#book_detail table tbody tr th,
#book_detail table tbody td {
    display: block;    /* 縦に並べる（スマホの横幅不足解消） */
    width: 100%;
    text-align: center;
    padding-left: 0;
}

#book_detail table tbody tr th {
    font-size: 18px;
    margin-top: 15px;
    border-bottom: 1px solid #40210f; /* 項目名に下線をつけて見やすく */
    text-align-last: center;
}

#book_detail table tbody td {
    font-size: 16px;
    padding-top: 5px;
}

/* 4. ECサイトボタン（メッケモノミヤギ） */
.mekkemonomiyagi img {
    width: 80%; /* ロゴを少し大きく */
}

.mekkemonomiyagi .ecsite{
  width: 80%;
}


/* =====================================
    ごあいさつ（スマホ）
===================================== */
#introduction {
  padding: 20px 0;
}

#introduction .container {
  width: 92%;
  padding-left: 1em;
  border-left-width: 2px;
}

#introduction .text {
  width: 100%;
}

#introduction .text p {
  font-size: 15px;
  line-height: 1.8;
  margin-bottom: 1.2em;
}

/* =====================================
    プロフィール（スマホ）
===================================== */
#profile {
  padding: 20px 0;
}

#profile .container {
  flex-direction: column;    /* 縦並びに変更 */
  align-items: center;
  width: 100%;
  padding-left: 0;
  border-left: none;
  gap: 20px;
}

#profile .profile_name h3 {
  font-size: 22px;
  text-align: center;
}

#profile .container .image_box {
  width: 100%;
}

#profile .container .image img {
  max-width: 200px;
  margin: 0 auto;
}

#profile .container .text_box {
  width: 80%;
}

#profile .container .text {
  width: 100% !important;
  margin-bottom: 1.2em;
}

#profile .container .text p{
  font-size: 15px;
}

#profile .container .text h3{
  font-size: 18px;
}

#profile .container .text table {
  width: 100%;
}

#profile .container .text table tbody tr th {
  font-size: 15px;
  display: block;
  width: 100%;
}

#profile .container .text table tbody td {
  font-size: 15px;
  display: block;
  width: 100%;
  padding-left: 0.5em;
}



/* =====================================
    著書ボタン（index.html スマホ）
===================================== */
#book .image img {
  width: 80%;
}

#book .book-button {
  width: 200px;
  font-size: 1.1rem;
}

/* =====================================
    作品一覧（index.html スマホ）
===================================== */
#works .works_list {
  grid-template-columns: 1fr;   /* 1列に変更 */
  max-width: 400px;
  margin: 0 auto;
}

#works .works_list .card h3 {
  font-size: 1.2em;
}

/* =====================================
    作品個別ページ（スマホ）
===================================== */
#works .title img {
  width: 40%;
}

#works .title h2 {
  font-size: 20px;
  padding: 0 10px;
}

#works .container {
  width: 100%;
  padding-left: 0;
  flex-direction: column;
}

#works .image img {
  width: 95%;
}

#works .text {
  width: 95%;
  margin: 0 auto 2em;
}

#works .text p {
  font-size: 15px;
  line-height: 1.8;
  text-align: left;
}

#works .container .gallery {
  width: 100%;
  margin-bottom: 3em;
}

#works .container .gallery img,
#works .container .work1 img {
  width: 90%;
}

#works .container .gallery p {
  font-size: 14px;
  text-align: center;
  padding: 0 10px;
}

/* =====================================
    お問合せ（スマホ）
===================================== */

#contact{
  padding: 0 1em;
}

.form-row {
    /* justify-content: center; はそのまま維持 */
    width: 100%;
    display: inline;
    margin: 0;
}

.form-group {
    display: inline;
    width: 100%; 
    /* 中央寄せの感覚を出すため、左右のマージンを auto に */
    margin-left: auto;
    margin-right: auto;
}

/* .form-group.full-width: 全幅の要素も同じく親要素の幅いっぱいに */
.form-group.full-width {
    display: block;
}

label {
    font-size: 15px;
}

/* input/textarea: 入力欄自体がはみ出さないように調整 */
input[type="text"],
input[type="email"],
input[type="tel"],
textarea {
    box-sizing: border-box; /* paddingやborderを含めてwidthを計算 */
    width: 100%; /* 親要素の幅いっぱいに広げる */
}

.button{
  display: block;
}

    #confirm_content h2{
    font-size: 32px;
  }
#confirm_content h2 br.sp-br{
    display: inline; /* もしくは inline, initial など */
}
.data-row{
  display: block;
}
.data-label,
.data-value {
  width: 100%;
  padding: 5px 0;
}
.data-label {
  border-top: 1px solid #eee;
}

.buttons{
  text-align: center;
  margin-top: 40px;
}

.buttons button {
  padding: 10px 30px;
  cursor: pointer;
  border: none;
  border-radius: 5px;
  font-weight: bold;
}

.confirm-button{
  margin: 20px auto;
}
.reset-button,.back-button{
  margin: 20px auto;
}

/* =====================================
    作品個別ページ（substyle.css から移動）（スマホ）
===================================== */
main > div {
  padding: 1em 0;
}

h3 {
  font-size: 17px;
}

p {
  font-size: 15px;
}

#works .title {
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

#works .title img {
  width: 55%;
}

#works .title h2 {
  font-size: 18px;
  text-align: center;
  padding: 0 10px;
  line-height: 1.5;
}

#works .container {
  width: 100%;
  padding-left: 0;
  flex-direction: column;
}

#works .image img {
  width: 95%;
}

#works .image h3 {
  font-size: 15px;
  text-align: center;
  padding: 0 5px;
}

#works .text {
  width: 95%;
  margin: 0 auto 2em;
}

#works .text p {
  font-size: 15px;
  line-height: 1.8;
  text-align: center;
}

#works .container .gallery {
  width: 100%;
  margin-bottom: 2.5em;
}

#works .container .gallery img,
#works .container .work1 img {
  width: 90%;
}

#works .container .gallery p {
  font-size: 13px;
  text-align: center;
  padding: 5px 10px 0;
}

/* =====================================
    スマホ用ライトボックス：矢印とレイアウト調整
===================================== */
/* 1. 全体を縦並びのレイアウトにする */
.lightbox-overlay {
  display: flex;
  flex-direction: column; /* 縦に並べる */
  align-items: center;
  justify-content: center;
  padding: 20px 0; /* 上下に最低限の余白 */
}

/* 2. 画像とボタンを包むコンテナ */
.lightbox-container {
  position: relative;
  display: flex;
  flex-direction: column; /* 画像の下にボタンを置く */
  align-items: center;
  width: 100%;
  max-width: 100vw;
}

/* 3. 画像が入るフレーム */
.lightbox-frame {
  /* 画像の高さを画面の70%程度に抑え、下にボタン用のスペースを作る */
  max-height: 65vh; 
  max-width: 95vw; /* 左右に少し余白 */
  overflow: hidden; /* ズーム用 */
  position: relative;
  margin-bottom: 1em; /* 画像とボタンの間隔 */
}

/* 拡大・移動する画像本体 */
.lightbox-img {
  max-height: 70vh; /* フレームに合わせる */
  width: auto;
  max-width: 100%;
  object-fit: contain; /* 画像全体を表示 */
  touch-action: none; /* ズーム・ドラッグ用 */
}

/* 4. 矢印ボタン（画像の下に配置） */
.lightbox-prev,
.lightbox-next {
  position: relative; /* absolute から relative に変更 */
  top: auto;
  transform: none; /* 中央寄せを解除 */
  display: flex !important; /* スマホでも必ず表示 */
  visibility: visible !important;
  opacity: 1 !important;
  width: 50px;
  height: 50px;
  background: rgba(255, 255, 255, 0.2); /* 白背景で見やすく */
  color: #fff;
  border-radius: 50%;
  font-size: 24px;
  margin: 0 0; /* ボタン同士の間隔 */
  z-index: 1010;
}

/* 矢印ボタンを横並びにするためのコンテナ（JSで追加、またはCSSで擬似的に作成） */
.lightbox-container::after {
  content: "";
  display: flex;
  justify-content: center;
  width: 100%;
}

/* 実際のボタン配置調整（CSSのみで完結させる場合） */
.lightbox-prev {
  position: absolute;
  bottom: -2em; /* 画像フレームの下に配置 */
  left: calc(50% - 65px); /* 中央から左にずらす */
}

.lightbox-next {
  position: absolute;
  bottom: -2em; /* 画像フレームの下に配置 */
  right: calc(50% - 65px); /* 中央から右にずらす */
}

/* 5. 閉じるボタン（×）：右上に配置 */
.lightbox-close {
  position: fixed; /* 画面に固定 */
  top: 10px;
  right: 15px;
  font-size: 35px;
  color: #fff;
  z-index: 1020;
}