/* style.css（元サイトの見た目）に足す部分。元サイトが画像・スライダーの部品・jQuery に任せていたものを、
   CSS と素の JS（script.js）で置き換える。色の --accent はリードごとに accent.css が後から差す。 */
:root { --accent: #ff473d; }

/* 文字のロゴ（fill.py が <span class="text-logo"> を入れる）。元は縦書きの画像ロゴ。 */
.text-logo { display: inline-block; font-weight: 700; color: #111; line-height: 1.3; }
.g-logo a { display: flex; justify-content: center; width: 80px; height: auto; min-height: 386px; text-indent: 0; background: none; }
.g-logo .text-logo { writing-mode: vertical-rl; max-height: 330px; font-size: 17px; letter-spacing: .32em; text-align: start; }
.g-mb-logo a { width: auto; height: auto; text-indent: 0; background: none; }
.g-mb-logo .text-logo { font-size: 13px; letter-spacing: .08em; white-space: nowrap; }
.g-footer-information_title a { color: inherit; }
.g-footer-information_title .text-logo { color: inherit; font-weight: inherit; letter-spacing: .08em; }
@media screen and (max-width: 992px) {
  .g-logo { width: auto; padding: 0 20px; }
  .g-logo a { width: auto; min-height: 0; }
  .g-logo .text-logo { writing-mode: horizontal-tb; max-height: none; font-size: 17px; letter-spacing: .1em; text-align: center; }
}

/* メニュー。fill.py の {{nav_links}} は <a> だけを並べるので、元の li.g-nav_item と a.g-nav_link を1つの a にまとめた。 */
.g-nav_options > a {
  position: relative; display: block; width: 100%; margin-top: -1px; padding: 14px 0;
  text-align: center; font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  transition: background-color .4s ease 0s;
}
.g-nav_options > a:before {
  content: ""; position: absolute; top: 0; left: 50%; width: 170px; height: 1px;
  background: #efefef; transform: translateX(-50%);
}
.g-nav_options > a:after {
  content: ""; position: absolute; top: 50%; right: 16px; width: 6px; height: 6px;
  border-top: 1px solid currentColor; border-right: 1px solid currentColor;
  transform: translateY(-50%) rotate(45deg); opacity: 0; transition: opacity .4s ease 0s;
}
.g-nav_options:after { content: ""; display: block; width: 170px; height: 1px; margin: 0 auto; background: #efefef; }
.pc .g-nav_options > a:hover { background-color: #f6f6ed; }
.pc .g-nav_options > a:hover:after { opacity: 1; }
@media screen and (max-width: 992px) {
  .g-nav_options > a {
    padding: 17px 0; font-size: 16px; opacity: 0; transform: translateY(10px);
    transition: opacity .5s ease 0s, transform .5s cubic-bezier(.215, .61, .355, 1) 0s;
  }
  .g-nav_options > a:before { left: 0; width: 100%; background: #d0d2d1; transform: none; z-index: 1; }
  .g-nav_options > a:after { display: none; }
  .g-nav_options:after { width: 100%; background: #d0d2d1; }
  .is-nav-open .g-nav_options > a { opacity: 1; transform: translateY(0); }
  .is-nav-open .g-nav_options > a:nth-child(1) { transition-delay: .5s; }
  .is-nav-open .g-nav_options > a:nth-child(2) { transition-delay: .53s; }
  .is-nav-open .g-nav_options > a:nth-child(3) { transition-delay: .56s; }
  .is-nav-open .g-nav_options > a:nth-child(4) { transition-delay: .59s; }
  .is-nav-open .g-nav_options > a:nth-child(5) { transition-delay: .62s; }
  .pc .g-nav_options > a:hover { background-color: transparent; opacity: .3; }
}

/* 写真。元は figure の background-image。ストックの写真へ差し替えるため <img> を全面に敷く（見た目は同じ cover）。 */
.m-slider .m-slider_image img, .topics-item_image img, .Home-explore_image img {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: 50% 50%; visibility: visible;
}

/* 写真の縦横比。元は style2.css で 3:2（padding-bottom の 45.8% は効かない）。 */
.m-slider .m-slider_image_aspect { height: initial !important; aspect-ratio: 3 / 2 !important; }

/* 最初の画面の写真。元は slick のフェード切り替え（5秒ごと・1.6秒かけて）。 */
.m-slider_body { position: relative; display: grid; }
.m-slider_body .m-slider_item { grid-area: 1 / 1; float: none; opacity: 0; transition: opacity 1.6s ease-in-out; }
.m-slider_body .m-slider_item.is-active { opacity: 1; }
.m-slider_body .slick-dots { grid-area: 2 / 1; }
.m-slider_body .slick-dots li button { appearance: none; -webkit-appearance: none; }
.slick-dots li button:before {
  width: 6px; height: 6px; border-radius: 50%; background: #c9c9c9;
  transition: background-color .4s ease 0s, width .4s ease 0s, height .4s ease 0s;
}
.slick-dots li.slick-active button:before { width: 8px; height: 8px; background: var(--accent); }

/* お知らせ。元は 992px 以下で slick の横スライド。素の CSS のスクロールスナップにした。 */
@media screen and (max-width: 992px) {
  .topics-list { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .topics-list::-webkit-scrollbar { display: none; }
  .topics-list .topics-item { flex: 0 0 50%; max-width: 50%; scroll-snap-align: start; }
}
@media screen and (max-width: 576px) {
  .topics-list .topics-item { flex: 0 0 82%; max-width: 82%; scroll-snap-align: center; }
}

/* ページ先頭へ戻る丸いボタン（元は SVG の書き込み文字。文字は <text> で描き直した）。 */
.g-goto-top .cls-text { fill: #273200; }

/* スクロールで現れる表示（元は IntersectionObserver が data-animate を active に変える）。動きを減らす設定なら最初から見せる。 */
@media (prefers-reduced-motion: reduce) {
  [data-animate][fade-in], [data-animate][fade-in-up] { opacity: 1; transform: none; transition: none; }
  .m-slider_body .m-slider_item { transition: none; }
}