/* =====================================
    共通レイアウト：全ページ共通の設定
===================================== */
body {
  /* 全ページ共通でヘッダーの高さ分（70px）だけ中身を下げる */
  padding-top: 70px; 
}

/* トップページだけは、画像を最上部（メニューの裏）に入れたいので余白を消す */
body#home_page {
  padding-top: 0;
}

/* タイトル内の画像も確実に中央に配置 */
.title img,.sub_title img{
    display: block;
    width: 50%;
}

/* =====================================
    ヘッダー（タブレット用修正）
===================================== */
header {
  position: fixed; /* 全ページでメニューを上部に固定 */
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;    
  height: 70px;
}

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

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

header .inner {
  max-width: 100%;
  height: 70px;
  padding: 10px 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* メニュー部分を画像の上に重ねる（変更なし） */
#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.6) 0%, rgba(0, 0, 0, 0) 100%);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mySwiper {
  /* ★スライダー全体も箱と同じ高さにする */
  height: calc(75vh + 80px); 
  background-color: #fff; 
  position: relative;     
}

.mySwiper .swiper-slide img {
  width: 100%;    
  /* ★実際の画像の高さ（60vh → 75vh にアップ！） */
  height: 75vh;   
  object-fit: cover; 
  object-position: center; 
  display: block; /* 画像の下にできる不要な数ピクセルの隙間を消す */
}

/* =====================================
    アイコンを画像下の白余白に配置
===================================== */
/* パジネーション（点々） */
.mySwiper .swiper-pagination {
  position: absolute;
  bottom: 25px; /* 余白の中央付近に配置 */
  left: 50%;
  transform: translateX(-50%);
  width: auto;
  z-index: 10;
}

/* ナビゲーション（左右の矢印） */
.mySwiper .swiper-button-prev,
.mySwiper .swiper-button-next {
  position: absolute;
  top: auto;          
  bottom: 20px;       /* パジネーションと高さを合わせる */
  transform: none;    
  margin-top: 0;      
  color: #fff;        /* 白背景で見えるように濃いグレーに */
  z-index: 10;
}

/* ナビゲーション（左右の矢印）の横位置を両端に変更 */
.mySwiper .swiper-button-prev {
  left: 20px; /* ★中央寄せをやめて、左端から20pxの位置に配置 */
}

.mySwiper .swiper-button-next {
  right: 20px; /* ★中央寄せをやめて、右端から20pxの位置に配置 */
}
/* =====================================
    ごあいさつ
===================================== */
#introduction .container {
  width: 92%;
  padding-left: 1.5em;
}

#introduction .text {
  width: 95%;
}

/* =====================================
    プロフィール
===================================== */
#profile .container {
  width: 92%;
  padding-left: 1.5em;
  gap: 20px;
}

#profile .container .image img {
  max-width: 220px;
}

#profile .container .text table tbody tr th,
#profile .container .text table tbody td {
  font-size: 15px;
}

/* =====================================
    著書（index.html）
===================================== */
#book .image img {
  width: 80%;
}

/* =====================================
    著書（book.html）
===================================== */
#book_page header{
  height: 0;
}

.bookSwiper {
  width: 60%;
  padding: 0;
}
 
#book .text {
  width: 90%;
}
 
#book .text p {
  margin-left: 1.5em;
  margin-right: 1em;
}
 
#book .text h3 {
  margin-left: 1.5em;
}
 
#book_detail table tbody tr th {
  font-size: 20px;
}
 
#book_detail table tbody td {
  font-size: 18px;
  padding-left: 2em;
}


/* =====================================
    作品一覧（index.html）
===================================== */
#works .works_list {
  grid-template-columns: repeat(2, minmax(0, 360px));
  column-gap: 40px;
  row-gap: 30px;
}

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

/* =====================================
    作品個別ページ（substyle.css 側）
===================================== */
#work_page header{
  height: 0;
}

#works .container {
  width: 95%;
  padding-left: 1em;
}

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

#works .text {
  width: 90%;
}

#works .container .gallery img {
  width: 55%;
}

#works .container .work1 img {
  width: 55%;
}

/* =====================================
    お問合せ
===================================== */
.form-row {
  max-width: 700px;
}

.form-group {
  grid-template-columns: 110px 65px 1fr;
}

.form-group.full-width {
  grid-template-columns: 110px 65px 1fr;
}

.confirm-button,
.reset-button,
.back-button {
  width: 200px;
  font-size: 1.1rem;
  padding: 12px 20px;
}

/* =====================================
    index.html専用：ごあいさつ・プロフィール・作品一覧（タブレット）
    ※tablet.css上部に記載済みのため省略
===================================== */

/* =====================================
    作品個別ページ（substyle.css から移動）（タブレット）
===================================== */

#works .title h2 {
  padding: 0 10px;
}

#works .container {
  width: 95%;
  padding-left: 1em;
}

#works .text {
  width: 90%;
}

#works .text p {
  font-size: 16px;
}

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