/*****基本情報*****/
html{
    font-family: "游明朝", "YuMincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}
body{
    margin: 0;
    box-sizing: border-box;
    position: relative;
    min-height: 100vh;
    padding-bottom: 40px;
    overflow-x: hidden;
}
header{
    margin-top: 50px;
}
.header-a1{
    margin-right: 10px;
}
.title{
    height: 300px;
    display: block;
    text-decoration: none;
    font-size: 100px;
    font-weight: 500;
    margin-top: -50px;
    margin-left: 50px;
    line-height: 80px;
    color: #000;

}
.subtitle{
    width: 400px;
    margin-left: 400px;
    margin-right: auto;
    font-size: 40px;
    text-align: center;
    margin-top: -200px;
    border-bottom: 2px solid #000;

}
.header-div{
    text-decoration: none;
    display: block;
    width: 320px;
    margin-left: auto;
    margin-right: 0;
}
.fixed_btn { 
    position: fixed;
    bottom: 0px;
    right: 0px;
    padding: 10px;
    color: #fff;
    background: linear-gradient(90deg,red 0%, red 50%, blue 50%, blue 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    }
h1{
    text-align: center;
    font-size: 50px;
    margin-top: 50px;
}
h2{
    text-align: left;
    line-height: 100%;
}   
.image-container img {
    display: inline-block;
    margin-right: 10px; /* 画像間の隙間を設定 */
}

@media screen and (max-width:768px){
    .title{
        margin-left: 25px;
        color: black;
        height: 450px;
        font-size: 100px;
        line-height: 100%
    }    
.header-div{
    height: 120px;
}
.subtitle{
    width: 300px;
    height: 70px;
    margin-left: 40px;
    margin-right: auto;
    font-size: 17px;
    text-align: 100px;
    margin-top: -150px;
    border-bottom: 2px solid #000;
}
.pc-small01{
  width: 60%;
  height: auto;
}
.pc-small02{
  width: 60%;
  height: auto;
}
.pc-small03{
  width: 100%;
  height: auto;
}
}       
.Gyokan{
    text-align: left;
    line-height: 200%;
    font-size: 25px;
} 







/* ===== 独語18（テスト版2）用 最終CSS：このブロックを丸ごと差し替え ===== */

/* 画面読み上げ用の非表示テキスト（必要なら残す） */
.visually-hidden{
  position:absolute!important; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* 顔見せ：PC=横並び 左寄せ／SP=縦並び */
#isshu18-face{
  margin: 1.2em 0 0;
  display: flex;
  justify-content: flex-start;     /* 左寄せ */
  align-items: flex-start;
  gap: 36px;                       /* 画像間隔（PC） */
  padding-left: 24px;              /* 左余白（調整可） */
}

/* 画像フレーム：同サイズで整列（多少の縦横比引っぱり許容） */
#isshu18-face .shell-frame{
  width: 420px;                    /* PC固定幅 */
  height: 315px;                   /* 4:3の枠で統一 */
  border: 1px solid #cfcfcf;
  background:#fff;
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
  display:flex; align-items:center; justify-content:center;
  text-decoration: none;
  transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
}
#isshu18-face .shell-frame:hover{
  transform: translateY(-1px);
  filter: brightness(1.03);
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
}
#isshu18-face .shell-frame img{
  width: 100%; height: 100%;
  object-fit: fill;                /* 枠にフィット（多少の歪みOK） */
  display:block;
}

/* スマホ：縦並び＆端末幅優先で同サイズ */
@media (max-width: 768px){
  #isshu18-face{
    flex-direction: column;
    gap: 18px;
    align-items: flex-start;       /* 左寄せのまま */
    padding-left: 12px;
  }
  #isshu18-face .shell-frame{
    width: 92vw;
    height: calc(92vw * 0.75);     /* 4:3で統一 */
  }
}

/* CTA ボタンの位置合わせ：PC=2枚の中央／SP=上の1枚の中央 */
.isshu18-cta{
  /* PC想定：画像2枚(420px×2)＋間隔36px＝876px */
  width: 876px;                    /* 画像並び幅に合わせる */
  margin-left: 24px;               /* #isshu18-face の左余白に合わせる */
  margin-top: 20px;
  text-align: center;              /* ボタンを中央寄せ */
  position: relative;
  z-index: 10;
}
@media (max-width: 768px){
  .isshu18-cta{
    /* SP想定：上の画像の幅=92vw、左余白=12px（#isshu18-face と揃える） */
    width: 92vw;
    margin-left: 12px;
    text-align: center;
  }
}

/* ボタン：百人一首ページのヘッダー風グラデ */
.btn-isshu{
  display:inline-block;
  padding:.66em 1.4em;
  border-radius: 10px;
  color:#fff; text-decoration:none; font-size: 1rem;
  border: 1px solid #a88838;
  background: linear-gradient(90deg,#151515 0%,#6e5c33 44%,#c79d46 78%,#e8c46a 100%);
  box-shadow: 0 3px 12px rgba(0,0,0,.12), inset 0 0 0 1px rgba(255,255,255,.06);
  transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
}
.btn-isshu:hover{
  transform: translateY(-1px);
  filter: brightness(1.06);
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
}
.btn-isshu:active{
  transform: translateY(0);
  filter: none;
  box-shadow: 0 2px 10px rgba(0,0,0,.12);
}
@media (max-width: 768px){
  .btn-isshu{
    background: linear-gradient(90deg,#1a1a1a 0%,#7a6236 45%,#d8b157 100%);
    padding:.8em 1.5em; font-size:1.06rem; border-radius:12px;
  }
}




/* ===================== フッターだけ追加 ===================== */
.p-footer{
  background:#666;       /* 他ページと同等のグレー */
  color:#fff;
  padding:24px 16px 18px;
}

.p-footer table{
  width:100%;
  max-width:640px;       /* PCで横に広げすぎない */
  margin:0 auto;         /* 中央寄せ */
  border-collapse:separate;
  border-spacing:0;
}

.p-footer img{
  display:block;
  height:auto;
}

.p-footer a{
  color:#fff;
  text-decoration:underline;
}

.p-footer a:hover{
  text-decoration:none;
}

.p-footer__copyLight{
  color:#fff;
  text-align:center;
  display:block;
  margin-top:14px;
  font-size:12px;
}

/* スマホは少し詰める */
@media (max-width: 768px){
  .p-footer{
    padding:20px 12px 16px;
  }
  .p-footer table{
    max-width:520px;
  }
}