/* ロゴアニメーション
-------------------------------------------------- */

.our-moments-logo {
  width: 253px;
  /* height: 57.394px; */   /* 旧ロゴ用（新ロゴではaspect-ratioで高さ算出するため無効化） */
  flex-shrink: 0;
  /* aspect-ratio: 216/49; */ /* 旧ロゴ比率 */
  aspect-ratio: 432 / 72.69;  /* 新ロゴ比率（下の余白解消） */
}

#logo-text {
  mask: url(#mask);
}

.our-moments-logo {
  width: 300px;
}

.logo-animation {
  width: 100%;
  height: auto;
  display: block;   /* inline由来の下余白を除去 */
}

.logo-line {
  fill: #fff;
}

.logo-animation_text {
  fill: #fff;
}

.logo-animation_mask_line {
  fill: none;
  stroke: #fff;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 遅延 */
.logo-animation_mask_line.__num01 {
  animation-delay: 0s;
  stroke-dasharray: 3000px;
  stroke-dashoffset: 3000px;
  animation: logo-animation 4s linear forwards;
}

.logo-animation_mask_line.__num02,
.logo-animation_mask_line.__num03 {
  stroke-dasharray: 1500px;
  stroke-dashoffset: 1500px;
  animation: logo-animation_2 4s linear forwards;
}

/* アニメーション対象の要素はデフォルトでpausedにしておく */
.logo-animation_mask_line.__num01,
.logo-animation_mask_line.__num02,
.logo-animation_mask_line.__num03 {
  animation-play-state: paused;
}

/* このクラスが付いたら再生開始 */
.logo-animation--start .logo-animation_mask_line.__num01,
.logo-animation--start .logo-animation_mask_line.__num02,
.logo-animation--start .logo-animation_mask_line.__num03 {
  animation-play-state: running;
}

.logo-animation_mask_line.__num02 {
  animation-delay: 0.6s;
}

.logo-animation_mask_line.__num03 {
  animation-delay: 0.9s;
}

.logo-fade {
  opacity: 0;
  isolation: isolate;
}

.logo-animation--start .logo-fade-moments {
  animation: logo-fade-in 1.2s ease forwards;
  animation-delay: 1.2s;
}

.logo-animation--start .logo-fade-ja {
  animation: logo-fade-in 1.2s ease forwards;
  animation-delay: 1.6s;
}

/* つながったO：Momentsのフェードインと同期してフェードアウト（クロスフェードで滑らかに欠けOへ切替） */
.logo-animation--start #o-connected {
  animation: logo-fade-out 1.2s ease forwards;
  animation-delay: 1.2s;
}


/* クリップアニメーション */
/* .logo-animation--start .logo-fade-moments {
  animation: logo-clip-reveal 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  animation-delay: 1s;
  clip-path: inset(0 100% 0 0);
}

.logo-animation--start .logo-fade-ja {
  animation: logo-clip-reveal 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  animation-delay: 1.4s;
  clip-path: inset(0 100% 0 0);
}

@keyframes logo-clip-reveal {
  from {
    clip-path: inset(0 100% 0 0);
    opacity: 0;
  }

  to {
    clip-path: inset(0 0% 0 0);
    opacity: 1;
  }
} */

@keyframes logo-animation {
  from {
    stroke-dashoffset: 3000px;
    stroke-width: 4;
  }

  50% {
    stroke-width: 4;
  }

  to {
    stroke-dashoffset: 0;
    stroke-width: 7;
  }
}

@keyframes logo-animation_2 {
  from {
    stroke-dashoffset: 1500px;
    stroke-width: 4;
  }

  50% {
    stroke-width: 4;
  }

  to {
    stroke-dashoffset: 0;
    stroke-width: 7;
  }
}

@keyframes logo-fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes logo-fade-out {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes logo-clip-reveal {
  from {
    clip-path: inset(0 100% 0 0);
    opacity: 0;
  }

  to {
    clip-path: inset(0 0% 0 0);
    opacity: 1;
  }
}

@media screen and (max-width: 1080px) {
  .our-moments-logo {
    width: 253px;
  }
}

/* mv-search
-------------------------------------------------- */
.mv-search {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px;
  background: var(--Primary_black);
  color: var(--Text_white);

  p,
  a {
    color: var(--Text_white);
  }

  >*:first-child {
    padding-right: 32px;
  }

  >*:last-child {
    border-left: 1px solid var(--Devider_gray);
    padding-left: 32px;
  }

  /* /search/our-moments/ と同じ <mf-search-box> を使用。
     列幅は従来の .search-form ピルに合わせる */
  /* .mv-search-input {
    width: 380px;
  } */
}

/* mv-search 内の MarsFlag 検索バーを旧 .search-form と同じ見た目に揃える。
   mf-custom.css が未適用でも (= MF SDK 既定スタイルのままでも) 旧デザインになるよう、
   旧 .search-form / .search-form input の値をバー本体・入力欄へ直接指定する。
   #main + .mv-search スコープで MF SDK 既定スタイルおよび mf-custom.css に勝たせる。 */
#main .mv-search .mf-search-box .mf-search-bar {
  display: flex;
  align-items: center;
  width: 380px;
  max-width: 100%;
  height: 48px;
  /* 上下パディングは持たせない (ヘッダー / /search/ と同じ)。
     サジェスト (.mf-search-bar_dropdown-list) の起点となる入力ラッパー
     (.mf-search-bar_input-wrapper, align-self:stretch) をバー全高に伸ばし、
     top:calc(100%+1px) のサジェストがバーに被らずバー直下に出るようにする。
     入力欄は flex 中央寄せのままなので見た目の高さは変わらない */
  padding: 0 24px;
  margin: 0;
  background: var(--Bg_gray);
  border: 1px solid var(--Devider_gray);
  border-radius: 80px;
  box-shadow: none;
}

#main .mv-search .mf-search-box .mf-search-bar:focus-within {
  background: #fff;
  box-shadow: 0 1px 6px rgba(32, 33, 36, 0.2);
}

/* 入力欄: 旧 .search-form input と同じく高さ 30px・透明背景・枠なし。
   MF 既定の height:35px / 白背景 / 枠 を打ち消し、バー高さを 48px に揃える */
#main .mv-search .mf-search-box .mf-search-bar .mf-search-bar_input {
  height: 30px;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-size: 1.6rem;
  color: var(--Text_black);
}

/* プレースホルダー色は検索ページ (mf-custom.css) と同じ --Text_black 50% に揃える */
#main .mv-search .mf-search-box .mf-search-bar .mf-search-bar_input::placeholder {
  color: rgba(46, 49, 59, 0.5);
}

#main .mv-search .mf-search-box .mf-search-bar .mf-search-bar_button .mf-search-bar_button_icon {
  width: 14px;
  height: 14px;
  color: #3036E6;
}

/* MF 既定 UI のうち旧デザインに無い要素を非表示 (mf-custom.css 未適用時の保険) */
#main .mv-search .mf-search-box .mf-filters,
#main .mv-search .mf-search-box .mf-search-bar .mf-search-bar_doc-type,
#main .mv-search .mf-search-box .mf-search-bar .mf-search-bar_button span {
  display: none !important;
}

#main .mv-search .mf-search-box .mf-search-bar .mf-search-bar_input-wrapper {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0;
}

#main .mv-search .mf-search-box .mf-search-bar .mf-search-bar_button {
  margin-left: 8px;
  padding: 0;
  background: none;
  border: none;
}

@media screen and (max-width: 1080px) {
  .mv-search {
    padding: 32px 40px;

    >*:first-child {
      padding-right: 24px;
    }

    >*:last-child {
      padding-left: 24px;
    }

    .mv-search-input {
      width: 276px;
    }
  }

  #main .mv-search .mf-search-box .mf-search-bar {
    width: 276px;
    /* 上下パディングを 0 にしたぶん、従来 (height:auto + padding 8px + input 40px)
       と同等のバー高を明示して維持する */
    height: 56px;
  }

  /* 旧 .search-form input はタブレットで height:40px */
  #main .mv-search .mf-search-box .mf-search-bar .mf-search-bar_input {
    height: 40px;
  }

  /* mf-custom.css はタブレットでアイコンを 28px に拡大するため、従来サイズに戻す */
  #main .mv-search .mf-search-box .mf-search-bar .mf-search-bar_button .mf-search-bar_button_icon {
    width: 14px;
    height: 14px;
  }
}

@media screen and (max-width: 769px) {
  .mv-search {
    flex-direction: column;
    gap: 24px;
    padding: 32px 16px;

    >*:first-child,
    >*:last-child {
      width: 100%;
      padding: 0;
      border: none;
    }

    .mv-search-input {
      width: 100%;
    }
  }

  #main .mv-search .mf-search-box .mf-search-bar {
    width: 100%;
    padding: 0 24px;
    /* タブレットで明示した height:56px を打ち消し、従来どおり入力欄基準の
       コンパクトな高さに戻す (上下パディング 0 のためサジェスト被りは無し) */
    height: auto;
  }
}


/* 連載
-------------------------------------------------- */
.series_content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
  width: 100%;
  padding: 56px 48px 40px;
  min-height: 360px;
  position: relative;

  /* 背景 */
  --bg-current: var(--bg-pc);
  background-image: var(--bg-current);
  background-position: var(--bg-position, center center);
  background-size: cover;
  background-repeat: no-repeat;

  +.series_content {
    margin-top: 32px;
  }

  &.white {
    p {
      color: var(--Text_white);
    }
  }
}

.series_content_num {
  display: inline-block;
  padding: 4px 12px;
  background-color: var(--Secondary_purple);
  color: var(--Text_white);
  font-size: 1.4rem;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  letter-spacing: 0.7px;
  position: absolute;
  top: 0;
  left: 0;
}

.series_content_txt {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;

  >p {
    max-width: 572px;
  }
}

.series_content_img {
  width: 100%;
  max-width: 380px;
}

@media screen and (max-width: 1080px) {
  .series_content {
    flex-direction: column;
    padding: 64px 16px 40px;
    --bg-current: var(--bg-tb);

    +.series_content {
      margin-top: 24px;
    }
  }
}

@media screen and (max-width: 769px) {
  .series_content {
    --bg-current: var(--bg-sp);
  }
}

/* 背景 */
.default-content section {
  position: relative;
  z-index: 1;
}

.default-content section.bg-g-our-moments {
  z-index: 0;
}

.bg-g-our-moments {
  position: relative;

  >div {
    position: relative;
    z-index: 1;
  }
}

.bg-g-our-moments {
  position: relative;
}

.bg-g-our-moments_img {
  display: block;
  position: absolute;
  z-index: 0;
  top: -65%;
  left: -10%;
  width: 824px;
  aspect-ratio: 50 / 67;
  transform: rotate(30deg);
  max-width: none;
}

@media screen and (max-width: 1080px) {
  .bg-g-our-moments_img {
    width: 564px;
    top: -23%;
    left: auto;
    right: 50%;
  }
}

@media screen and (max-width: 769px) {
  .bg-g-our-moments_img {
    width: 362px;
    top: -15%;
    right: 70%;
    transform: translateX(50%) rotate(30deg);
  }
}

/* 見出し
-------------------------------------------------- */
.h2-basis-lead {
  font-size: 1.4rem;
}

.h2-basis {
  &.new-posts,
  &.special-series {
    position: relative;
    margin-bottom: 16px;
  }
}

.new-posts::before,
.special-series::before {
  content: "";
  position: absolute;
}

.new-posts::before {
  background: url(/our-moments/common/img/index/new_posts.webp) no-repeat center / contain;
  width: 358px;
  height: 86px;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  z-index: -1;
}

.special-series::before {
  background: url(/our-moments/common/img/index/special_series.webp) no-repeat center / contain;
  width: 288px;
  height: 188px;
  top: -40px;
  left: 0;
  z-index: -1;
}

@media screen and (max-width: 1080px) {
  .h2-basis-lead {
    font-size: 1.2rem;
  }

  .new-posts::before {
    width: 260px;
    height: 62px;
    bottom: -6px;
  }

  .special-series::before {
    background: url(/our-moments/common/img/index/special_series_tb.webp) no-repeat center / contain;
    width: 174px;
    height: 110px;
    top: -48px;
    left: 50%;
    transform: translateX(-50%);
  }
}


/* コンセプト 
-------------------------------------------------- */
.concept {
  width: 100%;
  padding: 64px 72px;
  background-image: url(/our-moments/common/img/index/bg_001.webp);
  background-size: cover;
  background-position: right center;
  background-repeat: no-repeat;

  p {
    font-size: 1.4rem;
  }
}

@media screen and (max-width: 1080px) {
  .concept {
    background-image: url(/our-moments/common/img/index/bg_001_tb.webp);
    padding: 32px 20px 40px;
  }

  .concept-logo {
    width: 256px;
    margin-top: 32px;
  }
}

@media screen and (max-width: 769px) {
  .concept {
    background-image: url(/our-moments/common/img/index/bg_001_sp.webp);
  }
}


/* その他調整 */
@media screen and (max-width: 1080px) {
  .thumbnail-link p {
    margin: 2px 0 0;
  }

  .thumbnail-link ul.tag-list {
    margin-top: 20px;
    gap: 12px 8px;

    li {
      line-height: 100%;
    }
  }
}