/* 基本スタイル - リキッドレイアウト対応 */
:root {
    --primary-color: #51748E;
    --text-color: #444446;
    --light-text: #7A7A7C;
    --background-color: #FFF;
    --accent-color: #E75D57;
    --section-spacing: 5%;
    --border-radius: 4rem;
    --container-max-width: 1180px; /* コンテナの最大幅 */
    --container-padding: 5%; /* コンテナの左右パディング */
  }
  
  body {
    font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "游ゴシック", YuGothic, "メイリオ", Meiryo, sans-serif;
    color: var(--text-color);
    line-height: 1.7;
    font-size: 16px;
    font-size: clamp(14px, 1.6vw, 16px); /* レスポンシブフォントサイズ */
    background-color: #F8F8F8;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
  }
  
  /* リキッドレイアウト用コンテナ */
  .container {
    width: 90%;
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 var(--container-padding);
    box-sizing: border-box;
  }
  
  /* タイポグラフィ - リキッドに対応 */
  h1 {
    font-size: clamp(2.4rem, 5vw, 4.8rem);
    line-height: 1.65;
    margin-bottom: 2rem;
  }
  
  h2 {
    font-size: clamp(2.2rem, 4vw, 3.8rem);
    line-height: 1.7;
  }
  
  h3 {
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    line-height: 1.6;
  }
  
  p {
    font-size: clamp(1.4rem, 2vw, 1.8rem);
    line-height: 1.8;
  }
  
  .brPc {
    display: block;
  }
  
  .brSp {
    display: none;
  }
  
  @media screen and (max-width: 768px) {
    .brPc {
      display: none;
    }
    
    .brSp {
      display: block;
    }
  }
  
  /* ヘッダー */
  .site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background-color: var(--background-color);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  }
  
  .site-header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 8rem;
  }
  
  .logo {
    height: clamp(3rem, 5vw, 4rem);
    width: auto;
  }
  
  .main-navigation .menu-items {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  
  .main-navigation .menu-items li {
    margin-left: clamp(1rem, 2vw, 2rem);
  }
  
  .main-navigation .menu-items a {
    color: var(--text-color);
    text-decoration: none;
    font-size: clamp(1.4rem, 1.6vw, 1.6rem);
    font-weight: 600;
    position: relative;
  }
  
  .main-navigation .menu-items a:hover::after {
    content: "";
    display: block;
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--primary-color);
  }
  
  .mobile-menu-toggle {
    display: none;
  }
  
  @media screen and (max-width: 767px) {
    .main-navigation {
      display: none;
    }
    
    .mobile-menu-toggle {
      display: block;
      cursor: pointer;
    }
    
    .mobile-menu-toggle span {
      display: block;
      width: 25px;
      height: 2px;
      background-color: var(--text-color);
      margin: 5px 0;
    }
  }
  
  /* メインビジュアルエリア - リキッドレイアウト */
  .ly_pageTopMainVisualArea {
    padding: clamp(7rem, 10vw, 10.4rem) 0 clamp(4rem, 8vw, 8rem);
    background-color: var(--background-color);
  }
  
  .bl_pageTopMainVisualArea {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 3vw, 4rem);
    align-items: center;
  }
  
  .bl_pageTopMainVisualArea_message {
    padding: clamp(2rem, 4vw, 4rem) 0;
    padding-left: 4rem;
  }
  
  .bl_pageTopMainVisualArea_title {
    margin-bottom: clamp(1.5rem, 2vw, 2rem);
  }
  
  .bl_pageTopMainVisualArea_text {
    font-size: clamp(1.4rem, 1.8vw, 1.8rem);
    line-height: 2.5;
    margin-bottom: clamp(2rem, 4vw, 4rem);
  }
  
  .bl_pageTopMainVisualArea_messageLink_link {
    display: flex;
    align-items: center;
    font-size: clamp(1.4rem, 1.8vw, 1.8rem);
    font-weight: 600;
    color: var(--primary-color);
    text-decoration: none;
  }
  
  .bl_pageTopMainVisualArea_messageLink_link::before {
    content: "";
    display: block;
    width: clamp(2.2rem, 3vw, 3rem);
    height: clamp(2.2rem, 3vw, 3rem);
    margin-right: clamp(0.8rem, 1.2vw, 1.2rem);
    background-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M29.9763 16.6384L30 15L29.9763 13.3616L29.9053 12.1519L29.7871 11.071L29.6218 10.0726L29.4097 9.13755L29.1512 8.25645L28.8466 7.42402L28.4963 6.6372L28.1008 5.89433L27.6607 5.19458L27.1763 4.5375L26.6482 3.92317L26.0768 3.35183L25.4625 2.82367L24.8054 2.33932L24.1057 1.89915L23.3628 1.50367L22.576 1.15335L21.7435 0.848775L20.8624 0.59025L19.9274 0.378225L18.9289 0.212925L17.848 0.094725L16.6384 0.0237L15 0L13.3616 0.0237L12.1519 0.094725L11.071 0.212925L10.0726 0.378225L9.13755 0.59025L8.25645 0.848775L7.42402 1.15335L6.6372 1.50367L5.89433 1.89915L5.19458 2.33932L4.5375 2.82367L3.92317 3.35183L3.35183 3.92317L2.82367 4.5375L2.33932 5.19458L1.89915 5.89433L1.50367 6.6372L1.15335 7.42402L0.848775 8.25645L0.59025 9.13755L0.378225 10.0726L0.212925 11.0711L0.094725 12.1519L0.0237 13.3616L0 15L0.0237 16.6384L0.094725 17.848L0.212925 18.9289L0.378225 19.9274L0.59025 20.8624L0.848775 21.7435L1.15335 22.576L1.50367 23.3628L1.89915 24.1057L2.33932 24.8054L2.82367 25.4625L3.35183 26.0768L3.92317 26.6482L4.5375 27.1763L5.19458 27.6607L5.89433 28.1008L6.6372 28.4963L7.42402 28.8466L8.25645 29.1512L9.13755 29.4097L10.0726 29.6218L11.0711 29.7871L12.1519 29.9053L13.3616 29.9763L15 30L16.6384 29.9763L17.848 29.9053L18.9289 29.7871L19.9274 29.6218L20.8624 29.4097L21.7435 29.1512L22.576 28.8466L23.3628 28.4963L24.1057 28.1008L24.8054 27.6607L25.4625 27.1763L26.0768 26.6482L26.6482 26.0768L27.1763 25.4625L27.6607 24.8054L28.1008 24.1057L28.4963 23.3628L28.8466 22.576L29.1512 21.7435L29.4097 20.8624L29.6218 19.9274L29.7871 18.9289L29.9053 17.848L29.9763 16.6384ZM21.7969 14.3328C21.9688 14.4968 22.0703 14.739 22.0703 14.9734C22.0703 15.2156 21.9688 15.4578 21.7969 15.6218L16.9297 20.4812C16.7422 20.6609 16.5312 20.7468 16.3125 20.7468C15.8125 20.7468 15.4531 20.3953 15.4531 19.9187C15.4531 19.6687 15.5547 19.45 15.7188 19.2937L17.3672 17.6218L19.4219 15.7546L17.7188 15.8484H8.89062C8.35938 15.8484 8 15.4968 8 14.9734C8 14.4578 8.35938 14.1062 8.89062 14.1062H17.7188L19.4141 14.2L17.3672 12.3328L15.7188 10.6609C15.5547 10.4968 15.4531 10.2859 15.4531 10.0359C15.4531 9.55933 15.8125 9.19995 16.3125 9.19995C16.5312 9.19995 16.75 9.2937 16.9453 9.4812L21.7969 14.3328Z' fill='%2351748E'/%3E%3C/svg%3E");
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
  }
  
  .bl_pageTopMainVisualArea_image {
    position: relative;
    height: clamp(25rem, 40vw, 40rem);
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .bl_pageTopMainVisualAnimationRoot{
    width: 100%;
    height: 100%;
  }
  
  .bl_pageTopMainVisualAnimationRoot img{
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .bl_pageTopMainVisualAnimationBaseImage {
    height: 100%;
    max-width: 100%;
    object-fit: contain;
    display: block;
  }
  
  @media screen and (max-width: 991px) {
    .bl_pageTopMainVisualArea {
      grid-template-columns: 1fr;
      gap: clamp(3rem, 4vw, 5rem);
    }
    
    .bl_pageTopMainVisualArea_message {
      grid-row: 2;
    }
    
    .bl_pageTopMainVisualArea_image {
      grid-row: 1;
    }
  }
  
  /* セクションタイトル - リキッドレイアウト対応 */
  .ly_topNewsTitleFrame,
  .ly_topLongLifeStandardTitleFrame {
    margin-bottom: clamp(3rem, 4vw, 4rem);
  }
  
  .bl_topNewsTitleSubTitle,
  .bl_topLongLifeStandardTitleSubTitle {
    font-size: clamp(1.4rem, 2vw, 2rem);
    font-weight: 600;
    text-align: center;
    padding-bottom: clamp(0.8rem, 1.6vw, 1.6rem);
  }
  
  .bl_topNewsTitleTitle,
  .bl_topLongLifeStandardTitleTitle {
    text-align: center;
    padding-bottom: clamp(3rem, 7vw, 7rem);
  }
  
  /* 新着ポエムセクション - リキッドレイアウト対応 */
  .ly_topNewsSection {
    padding: 0 0 var(--section-spacing);
  }
  
  .ly_topNewsNewsList {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 350px), 1fr));
    gap: clamp(1.5rem, 2vw, 2rem);
  }
  
  .ly_topNewsNewsList_item {
    opacity: 0;
    transform: translateY(3rem);
    transition: opacity 300ms ease-out, transform 450ms ease-out;
  }
  
  .ly_topNewsNewsList_item:nth-child(2) {
    transform: translateY(6rem);
    transition: opacity 500ms ease-out, transform 600ms ease-out;
  }
  
  .ly_topNewsNewsList_item:nth-child(3) {
    transform: translateY(8rem);
    transition: opacity 500ms ease-out, transform 600ms ease-out;
  }
  
  .ly_topNewsNewsList_item[data-bind-scroll-event="true"] {
    opacity: 1;
    transform: translateY(0);
  }
  
  .bl_topNewsNewsContentImage {
    border-radius: clamp(2rem, 4vw, 4rem);
    overflow: hidden;
    aspect-ratio: 356/237;
    position: relative;
    margin-bottom: clamp(1.5rem, 2vw, 2rem);
  }
  
  .bl_topNewsNewsContentImage_content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .bl_topNewsNewsContentTitle {
    font-size: clamp(1.5rem, 1.6vw, 1.6rem);
    font-weight: 600;
    line-height: 1.5;
    margin-bottom: 0.5rem;
  }
  
  .bl_topNewsNewsContentTime {
    font-size: clamp(1.2rem, 1.4vw, 1.4rem);
    color: var(--light-text);
  }
  
  .ly_topNewsNewsContentLink {
    display: block;
    color: inherit;
    text-decoration: none;
    transition: transform 0.3s ease;
  }
  
  .ly_topNewsNewsContentLink:hover {
    transform: translateY(-5px);
  }
  
  /* コンセプトセクション - リキッドレイアウト対応 */
  .ly_topLongLifeStandardSection {
    padding: 0 0 var(--section-spacing);
  }
  
  .ly_topLongLifeStandardLongLifeStandardFrame {
    position: relative;
  }
  
  .ly_topLongLifeStandardLongLifeStandardFrame::before {
    content: "";
    background-image: url("../images/concept-bg.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
  }
  
  .ly_topLongLifeStandardLongLifeStandard {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 350px), 1fr));
    gap: clamp(2rem, 3vw, 3rem);
    margin: 0 auto;
    max-width: calc(var(--container-max-width) * 0.9); /* コンテナよりも少し小さめ */
  }
  
  .ly_topLongLifeStandardLongLifeStandard_item:first-child {
    grid-column: 1 / -1; /* 全幅 */
  }
  
  .ly_topLongLifeStandardLongLifeStandard_item {
    opacity: 0;
    transform: translateY(3rem);
    transition: opacity 300ms ease-out, transform 450ms ease-out;
  }
  
  .ly_topLongLifeStandardLongLifeStandard_item:nth-child(2) {
    transform: translateY(6rem);
    transition: opacity 500ms ease-out, transform 600ms ease-out;
  }
  
  .ly_topLongLifeStandardLongLifeStandard_item:nth-child(3) {
    transform: translateY(9rem);
    transition: opacity 500ms ease-out, transform 600ms ease-out;
  }
  
  .ly_topLongLifeStandardLongLifeStandard_item[data-bind-scroll-event="true"] {
    opacity: 1;
    transform: translateY(0);
  }
  
  .ly_topLongLifeStandardLongLifeStandardContent {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-image: url("data:image/svg+xml,%3Csvg width='420' height='264' viewBox='0 0 420 264' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M420 132L419.668 146.417L418.674 157.063L417.019 166.574L414.705 175.361L411.736 183.589L408.117 191.343L403.853 198.669L398.949 205.592L393.412 212.129L387.249 218.288L380.469 224.069L373.074 229.475L365.076 234.504L356.475 239.151L347.276 243.414L337.479 247.287L327.079 250.768L316.064 253.851L304.41 256.531L292.074 258.805L278.984 260.672L265.004 262.126L249.873 263.166L232.937 263.792L210 264L187.063 263.792L170.127 263.166L154.996 262.126L141.016 260.672L127.926 258.805L115.59 256.531L103.936 253.851L92.9208 250.768L82.5206 247.287L72.724 243.414L63.525 239.151L54.9244 234.504L46.9255 229.475L39.5314 224.069L32.7505 218.288L26.5881 212.129L21.0514 205.592L16.1469 198.669L11.8828 191.343L8.2635 183.589L5.29515 175.361L2.98095 166.574L1.32615 157.063L0.3318 146.417L0 132L0.3318 117.583L1.32615 106.937L2.98095 97.4258L5.29515 88.6393L8.2635 80.4111L11.8828 72.6572L16.1469 65.3312L21.0514 58.408L26.5881 51.8707L32.7505 45.7119L39.5314 39.9306L46.9255 34.5247L54.9244 29.4963L63.525 24.8486L72.724 20.5857L82.5206 16.7129L92.9208 13.2324L103.936 10.1504L115.59 7.46898L127.926 5.19453L141.016 3.32808L154.995 1.87381L170.127 0.833858L187.063 0.2082L210 0L232.937 0.2082L249.873 0.833858L265.004 1.87381L278.984 3.32808L292.074 5.19453L304.41 7.46898L316.064 10.1493L327.079 13.2324L337.479 16.7119L347.276 20.5857L356.475 24.8486L365.076 29.4963L373.074 34.5247L380.469 39.9306L387.249 45.7119L393.412 51.8707L398.949 58.408L403.853 65.3312L408.117 72.6572L411.736 80.4111L414.705 88.6393L417.019 97.4258L418.674 106.937L419.668 117.583L420 132Z' fill='white'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    padding: clamp(2rem, 3vw, 3rem);
    aspect-ratio: 420/264;
  }
  
  .bl_topLongLifeStandardLongLifeStandardContentTitle {
    margin-bottom: clamp(1rem, 2vw, 2rem);
  }
  
  .el_topLongLifeStandardLongLifeStandardContentReadMore {
    display: flex;
    align-items: center;
    font-size: clamp(1.4rem, 1.8vw, 1.8rem);
    font-weight: 600;
    color: var(--primary-color);
    text-decoration: none;
  }
  
  .el_topLongLifeStandardLongLifeStandardContentReadMore::before {
    content: "";
    display: block;
    width: clamp(2.2rem, 3vw, 3rem);
    height: clamp(2.2rem, 3vw, 3rem);
    margin-right: clamp(0.8rem, 1.2vw, 1.2rem);
    background-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M29.9763 16.6384L30 15L29.9763 13.3616L29.9053 12.1519L29.7871 11.071L29.6218 10.0726L29.4097 9.13755L29.1512 8.25645L28.8466 7.42402L28.4963 6.6372L28.1008 5.89433L27.6607 5.19458L27.1763 4.5375L26.6482 3.92317L26.0768 3.35183L25.4625 2.82367L24.8054 2.33932L24.1057 1.89915L23.3628 1.50367L22.576 1.15335L21.7435 0.848775L20.8624 0.59025L19.9274 0.378225L18.9289 0.212925L17.848 0.094725L16.6384 0.0237L15 0L13.3616 0.0237L12.1519 0.094725L11.071 0.212925L10.0726 0.378225L9.13755 0.59025L8.25645 0.848775L7.42402 1.15335L6.6372 1.50367L5.89433 1.89915L5.19458 2.33932L4.5375 2.82367L3.92317 3.35183L3.35183 3.92317L2.82367 4.5375L2.33932 5.19458L1.89915 5.89433L1.50367 6.6372L1.15335 7.42402L0.848775 8.25645L0.59025 9.13755L0.378225 10.0726L0.212925 11.0711L0.094725 12.1519L0.0237 13.3616L0 15L0.0237 16.6384L0.094725 17.848L0.212925 18.9289L0.378225 19.9274L0.59025 20.8624L0.848775 21.7435L1.15335 22.576L1.50367 23.3628L1.89915 24.1057L2.33932 24.8054L2.82367 25.4625L3.35183 26.0768L3.92317 26.6482L4.5375 27.1763L5.19458 27.6607L5.89433 28.1008L6.6372 28.4963L7.42402 28.8466L8.25645 29.1512L9.13755 29.4097L10.0726 29.6218L11.0711 29.7871L12.1519 29.9053L13.3616 29.9763L15 30L16.6384 29.9763L17.848 29.9053L18.9289 29.7871L19.9274 29.6218L20.8624 29.4097L21.7435 29.1512L22.576 28.8466L23.3628 28.4963L24.1057 28.1008L24.8054 27.6607L25.4625 27.1763L26.0768 26.6482L26.6482 26.0768L27.1763 25.4625L27.6607 24.8054L28.1008 24.1057L28.4963 23.3628L28.8466 22.576L29.1512 21.7435L29.4097 20.8624L29.6218 19.9274L29.7871 18.9289L29.9053 17.848L29.9763 16.6384ZM21.7969 14.3328C21.9688 14.4968 22.0703 14.739 22.0703 14.9734C22.0703 15.2156 21.9688 15.4578 21.7969 15.6218L16.9297 20.4812C16.7422 20.6609 16.5312 20.7468 16.3125 20.7468C15.8125 20.7468 15.4531 20.3953 15.4531 19.9187C15.4531 19.6687 15.5547 19.45 15.7188 19.2937L17.3672 17.6218L19.4219 15.7546L17.7188 15.8484H8.89062C8.35938 15.8484 8 15.4968 8 14.9734C8 14.4578 8.35938 14.1062 8.89062 14.1062H17.7188L19.4141 14.2L17.3672 12.3328L15.7188 10.6609C15.5547 10.4968 15.4531 10.2859 15.4531 10.0359C15.4531 9.55933 15.8125 9.19995 16.3125 9.19995C16.5312 9.19995 16.75 9.2937 16.9453 9.4812L21.7969 14.3328Z' fill='%2351748E'/%3E%3C/svg%3E");
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
  }
  
  /* フッター - リキッドレイアウト対応 */
  .site-footer {
    background-color: var(--primary-color);
    color: #fff;
    padding: clamp(3rem, 5vw, 5rem) 0 clamp(1.5rem, 2vw, 2rem);
  }
  
  .footer-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: clamp(2rem, 3vw, 3rem);
  }
  
  .footer-logo {
    flex-basis: 20%;
    min-width: 150px;
    margin-right: 2rem;
  }
  
  .footer-logo img {
    max-width: 100%;
    height: auto;
  }
  
  .footer-navigation {
    flex-basis: 60%;
  }
  
  .footer-menu {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
  }
  
  .footer-menu li {
    margin-right: clamp(1rem, 2vw, 2rem);
    margin-bottom: 1rem;
  }
  
  .footer-menu a {
    color: #fff;
    text-decoration: none;
    font-size: clamp(1.2rem, 1.4vw, 1.4rem);
  }
  
  .footer-social {
    flex-basis: 20%;
    display: flex;
    justify-content: flex-end;
  }
  
  .social-link {
    margin-left: 1rem;
    color: #fff;
    font-size: clamp(1.8rem, 2vw, 2rem);
  }
  
  .footer-copyright {
    text-align: center;
    font-size: clamp(1rem, 1.2vw, 1.2rem);
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    padding-top: clamp(1.5rem, 2vw, 2rem);
  }
  
  .page-top {
    position: fixed;
    bottom: clamp(2rem, 3vw, 3rem);
    right: clamp(2rem, 3vw, 3rem);
    z-index: 100;
  }
  
  .page-top-link {
    display: flex;
    justify-content: center;
    align-items: center;
    width: clamp(4rem, 5vw, 5rem);
    height: clamp(4rem, 5vw, 5rem);
    background-color: var(--primary-color);
    color: #fff;
    border-radius: 50%;
    text-decoration: none;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s ease;
  }
  
  .page-top-link:hover {
    background-color: #3c5a6d;
  }
  
  .icon-arrow-up {
    border: solid #fff;
    border-width: 0 2px 2px 0;
    display: inline-block;
    padding: 5px;
    transform: rotate(-135deg);
  }
  
  .screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  
  @media screen and (max-width: 767px) {
    .footer-content {
      flex-direction: column;
      align-items: center;
      text-align: center;
    }
    
    .footer-logo {
      margin-bottom: clamp(1.5rem, 2vw, 2rem);
      margin-right: 0;
    }
    
    .footer-navigation,
    .footer-social {
      flex-basis: 100%;
    }
    
    .footer-menu {
      justify-content: center;
    }
    
    .footer-social {
      justify-content: center;
      margin-top: clamp(1.5rem, 2vw, 2rem);
    }
  }
  
  /* 詳細ページ - リキッドレイアウト対応 */
  .poem-single-section {
    padding: clamp(8rem, 10vw, 10rem) 0 clamp(3rem, 5vw, 5rem);
  }
  
  .poem-content {
    background-color: var(--background-color);
    border-radius: clamp(2rem, 4vw, 4rem);
    padding: clamp(2rem, 4vw, 4rem);
    margin-bottom: clamp(2rem, 3vw, 3rem);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
  }
  
  .poem-header {
    margin-bottom: clamp(2rem, 3vw, 3rem);
  }
  
  .poem-meta {
    margin-bottom: clamp(0.5rem, 1vw, 1rem);
  }
  
  .poem-date {
    font-size: clamp(1.2rem, 1.4vw, 1.4rem);
    color: var(--light-text);
  }
  
  .poem-title {
    font-size: clamp(2.2rem, 3vw, 3rem);
    margin-bottom: clamp(1.5rem, 2vw, 2rem);
  }
  
  .poem-thumbnail {
    margin-bottom: clamp(2rem, 3vw, 3rem);
  }
  
  .poem-featured-image {
    border-radius: clamp(1rem, 2vw, 2rem);
    width: 100%;
    height: auto;
  }
  
  .poem-body {
    font-size: clamp(1.4rem, 1.6vw, 1.6rem);
    line-height: 2;
  }
  
  .poem-navigation {
    display: flex;
    justify-content: space-between;
    margin-top: clamp(3rem, 5vw, 5rem);
  }
  
  .poem-nav-links {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
  }
  
  .nav-to-archive {
    text-align: center;
  }
  
  .archive-link {
    display: inline-block;
    padding: clamp(0.8rem, 1vw, 1rem) clamp(1.5rem, 2vw, 2rem);
    background-color: var(--primary-color);
    color: #fff;
    border-radius: 3rem;
    text-decoration: none;
    font-weight: 600;
    transition: background-color 0.3s ease;
  }
  
  .archive-link:hover {
    background-color: #3c5a6d;
  }
  
  .nav-previous,
  .nav-next {
    display: flex;
    align-items: center;
  }
  
  .nav-previous a,
  .nav-next a {
    display: flex;
    align-items: center;
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 600;
    font-size: clamp(1.4rem, 1.6vw, 1.6rem);
  }
  
  .nav-arrow {
    font-size: clamp(1.6rem, 2vw, 2rem);
    margin: 0 0.5rem;
  }
  
  @media screen and (max-width: 519px) {
    .poem-nav-links {
      flex-direction: column;
      gap: 2rem;
    }
  }
  
  /* アーカイブページ - リキッドレイアウト対応 */
  .poem-archive-section {
    padding: clamp(8rem, 10vw, 10rem) 0 clamp(3rem, 5vw, 5rem);
  }
  
  .archive-header {
    text-align: center;
    margin-bottom: clamp(3rem, 5vw, 5rem);
  }
  
  .archive-title {
    font-size: clamp(2.2rem, 3.8vw, 3.8rem);
    margin-bottom: clamp(1.5rem, 2vw, 2rem);
  }
  
  .archive-filter {
    margin-bottom: clamp(3rem, 5vw, 5rem);
    background-color: var(--background-color);
    border-radius: clamp(2rem, 4vw, 4rem);
    padding: clamp(2rem, 3vw, 3rem);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
  }
  
  .filter-title {
    font-size: clamp(1.6rem, 2vw, 2rem);
    margin-bottom: clamp(1.5rem, 2vw, 2rem);
    color: var(--primary-color);
  }
  
  .month-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: clamp(0.5rem, 1vw, 1rem);
  }
  
  .month-list li {
    margin-bottom: clamp(0.5rem, 1vw, 1rem);
  }
  
  .month-list a {
    display: inline-block;
    padding: 0.5rem 1.5rem;
    background-color: #f0f0f0;
    color: var(--text-color);
    border-radius: 2rem;
    text-decoration: none;
    font-size: clamp(1.2rem, 1.4vw, 1.4rem);
    transition: background-color 0.3s ease;
  }
  
  .month-list a:hover {
    background-color: #e0e0e0;
  }
  
  .poem-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
    gap: clamp(1.5rem, 2vw, 2rem);
  }
  
  .poem-item {
    background-color: var(--background-color);
    border-radius: clamp(2rem, 4vw, 4rem);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  }
  
  .poem-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  }
  
  .poem-link {
    display: block;
    color: inherit;
    text-decoration: none;
  }
  
  .poem-image {
    width: 100%;
    height: auto;
    aspect-ratio: 16/9;
    object-fit: cover;
  }
  
  .poem-meta {
    padding: clamp(1.5rem, 2vw, 2rem);
  }
  
  .poem-title {
    font-size: clamp(1.6rem, 1.8vw, 1.8rem);
    line-height: 1.4;
  }
  
  .pagination {
    margin-top: clamp(3rem, 5vw, 5rem);
    display: flex;
    justify-content: center;
  }
  
  .pagination .page-numbers {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: clamp(3rem, 4vw, 4rem);
    height: clamp(3rem, 4vw, 4rem);
    margin: 0 0.5rem;
    background-color: var(--background-color);
    color: var(--text-color);
    border-radius: 50%;
    text-decoration: none;
    font-weight: 600;
    transition: background-color 0.3s ease;
  }
  
  .pagination .page-numbers.current {
    background-color: var(--primary-color);
    color: #fff;
  }
  
  .pagination .page-numbers:hover:not(.current) {
    background-color: #e0e0e0;
  }
  
  .no-posts {
    text-align: center;
    padding: clamp(3rem, 5vw, 5rem);
    font-size: clamp(1.6rem, 1.8vw, 1.8rem);
    background-color: var(--background-color);
    border-radius: clamp(2rem, 4vw, 4rem);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  }
  
  /* アニメーション */
  @keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translateY(30px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  .fadeInUp {
    animation: fadeInUp 0.8s ease-out forwards;
  }
  
  /* リキッドレイアウト用追加スタイル */
  .content-wrap {
    width: 100%;
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 clamp(1.5rem, 5%, 5rem); /* PCでの左右マージン */
    box-sizing: border-box;
  }
  
  /* コンテナ内のコンテンツに左右マージンを持たせる */
  .inner-content {
    width: 90%;
    margin: 0 auto;
  }
  
  /* 大画面での調整 */
  @media screen and (min-width: 1400px) {
    :root {
      --container-padding: 8%; /* 大画面での左右パディングを増やす */
    }
    
    .content-wrap {
      padding: 0 clamp(3rem, 8%, 8rem); /* 大画面での左右マージンを増やす */
    }
  }