/* ==================================================
   トップページ専用スタイル
   メインビジュアル・スライド
================================================== */
.hero {
  position: relative;
  min-height: 570px;
  color: #fff;
  overflow: hidden;
  background: #263946;
}
.hero-slides,
.slide {
  position: absolute;
  inset: 0;
}
.slide {
  opacity: 0;
  background-color: #334b58;
  background-size: cover;
  transition: opacity 1.2s;
}
.slide.active {
  opacity: 1;
}
.hero-copy {
  position: relative;
  z-index: 2;
  padding-top: 50px;
}
.logo {
  margin: 0;
  font:
    56px Georgia,
    serif;
    width:350px;
}
@media(max-width:640px){
  .logo {
    width:250px;
  }
}
.hero h1 {
  margin: 12px 0 20px;
  font: 500 29px serif;
  letter-spacing: 0.14em;
}
.hero-copy > p:not(.logo) {
  margin: 0;
  font: 16px/1.9 serif;
  letter-spacing: 0.08em;
}
.area {
  display: flex;
  margin: 22px 0;
  font-size: 14px;
}
.area span,
.area small {
  display: block;
}
.area small {
  margin-top: 5px;
  font-size: 11px;
  opacity: 0.8;
}
.hero-btn {
  min-width: 235px;
}
.dots {
  position: absolute;
  z-index: 4;
  right: max(24px, calc((100vw - 1120px) / 2));
  bottom: 22px;
  display: flex;
  gap: 9px;
}
.dots button {
  width: 28px;
  height: 3px;
  padding: 0;
  border: 0;
  background: #ffffff55;
}
.dots button.active {
  background: #fff;
}
/* ==================================================
   何したい？ カテゴリー
================================================== */
.interest-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 7px;
}
.card {
  min-height: 188px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  background-color: #40505a;
  background-position: center;
  background-size: cover;
  border-radius: 3px;
}
.card:before {
  content: "";
  position: absolute;
}
.card i {
  font: 40px serif;
  margin-bottom: 10px;
}
.card b {
  font-size: 17px;
}
.card span {
  margin-top: 6px;
  font-size: 13px;
  font-weight: 300;
}
.travel {
  background-image:
    linear-gradient(#09121644, #091216bb), url(../images/top_category/interest-travel.jpg);
}
.food {
  background-image: linear-gradient(#09121644, #091216bb), url(../images/top_category/interest-food.jpg);
}
.beauty {
  background-image:
    linear-gradient(#09121644, #091216bb), url(../images/top_category/interest-beauty.jpg);
}
.korea { background-image: linear-gradient(#09121644, #091216bb), url(../images/top_category/interest-korea.jpg); }
.spiritual { background-image: linear-gradient(#09121644, #091216bb), url(../images/top_category/interest-spiritual.jpg); }
.mystery { background-image: linear-gradient(#09121644, #091216bb), url(../images/top_category/interest-mystery.jpg); }
.anime { background-image: linear-gradient(#09121644, #091216bb), url(../images/top_category/interest-anime.jpg); }
.entertainment { background-image: linear-gradient(#09121644, #091216bb), url(../images/top_category/interest-entertainment.jpg); }
.sports-game { background-image: linear-gradient(#09121644, #091216bb), url(../images/top_category/interest-sports-game.jpg); }
.pet { background-image: linear-gradient(#09121644, #091216bb), url(../images/top_category/interest-pet.jpg); }
.talk-advice { background-image: linear-gradient(#09121644, #091216bb), url(../images/top_category/interest-talk-advice.jpg); }
.connect { background-image: linear-gradient(#09121644, #091216bb), url(../images/top_category/interest-connect.jpg); }
/* ==================================================
   Otonacica JOURNAL
================================================== */
.journal {
  padding-top: 6px;
}
.journal-title {
  display: flex;
  align-items: center;
  gap: 25px;
  margin: 18px 0 20px;
}
.journal-title > div {
  white-space: nowrap;
}
.journal-title h2 {
  margin: 0;
  font:
    500 26px Georgia,
    serif;
}
.journal-title h2 small {
  font-size: 16px;
}
.journal-title p {
  margin: 4px 0 0 72px;
  font: 11px serif;
}
.journal-title:after {
  content: "";
  height: 1px;
  flex: 1;
  background: var(--line);
  order: 1;
}
.journal-title .more {
  width: 155px;
  min-height: 34px;
  margin: 0;
  order: 2;
}
.stories {
  display: grid;
  grid-template-columns: 2fr 0.86fr 0.86fr;
  gap: 14px;
}
.story {
  position: relative;
  min-height: 282px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: #fff;
  background: #59656b center/cover;
  border-radius: 4px;
	overflow: hidden;
	transition: transform .25s ease, box-shadow .25s ease;
}
.feature {
  padding: 28px;
  justify-content: center;
  background-image:
    linear-gradient(90deg, #080f12e8, #080f1208),
    url(../images/journal-feature.jpg);
}
.jtravel {
  background-image:
    linear-gradient(#080f1210, #080f12c8), url(../images/journal-travel.jpg);
}
.jstyle {
  background-image:
    linear-gradient(#080f1210, #080f12c8), url(../images/journal-style.jpg);
}
.story em {
  position: absolute;
  top: 17px;
  left: 17px;
  padding: 4px 12px;
  background: #a89b72;
  font: 700 10px Arial;
  font-style: normal;
}
.story h3 {
  margin: 0 0 16px;
  font: 500 19px/1.6 serif;
}
.story p {
  font-size: 12px;
  line-height: 1.8;
}
.story-more {
  font-size: 11px;
  font-weight: 700;
}
.story:hover,
.story:focus-visible {
	color: #fff;
	transform: translateY(-3px);
	box-shadow: 0 12px 28px rgba(8, 15, 18, .2);
}
.story:focus-visible,
.mini-post:focus-visible {
	outline: 3px solid #a89b72;
	outline-offset: 3px;
}
.mini-posts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  margin: 30px 0 35px;
}
.mini-post {
  display: grid;
  grid-template-columns: 74px 1fr;
  gap: 12px;
	transition: transform .2s ease;
}
.mini-post:hover {
	transform: translateY(-2px);
}
.thumb {
  min-height: 88px;
  background: #d6d1c6 center/cover;
}
.go {
  background-image: url(../images/journal-go.jpg);
}
.jf {
  background-image: url(../images/journal-food.jpg);
}
.jt {
  background-image: url(../images/journal-try.jpg);
}
.jp {
  background-image: url(../images/journal-people.jpg);
}
.mini-post__body {
  margin: 0;
	display: block;
  font: 16px/1.55 serif;
}
.mini-post__body small,
.mini-post__body b {
  display: block;
  font: 10px Arial;
  margin-bottom: 4px;
}
.mini-post__body b {
  margin-top: 9px;
}

/* 記事が少なく小カード一覧が出ない場合も、下のCTAとの間隔を保つ */
.stories + .member {
  margin-top: 35px;
}
/* 会員登録・横長CTA */
.member {
  min-height: 250px;
  padding: 30px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  color: #fff;
  background: #344047 center/cover;
  background-image:
    linear-gradient(90deg, #0a1113dc, #0a111322), url(../images/member-cta.jpg);
  border-radius: 4px;
}
.member h2 {
  margin: 0 0 6px;
  font: 500 21px serif;
}
.member p {
  margin: 0 0 19px;
  font: 14px serif;
}
/* 下部の3つのプロモーション */
.promos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 45px;
}
.promo {
  min-height: 170px;
  padding: 25px 22px 17px;
  display: flex;
  flex-direction: column;
  background: #fff center/cover;
}
.promo b {
  font: 500 20px/1.45 serif;
}
.promo span {
  margin-top: 6px;
  font: 12px serif;
}
.promo small {
  margin-top: auto;
  font-size: 10px;
}
.select {
  /*background: linear-gradient(135deg, #fff, #f0ece2);*/
  background-image:
    linear-gradient(90deg, #fffffff5, #ffffff08), url(../images/promo-item.jpg);
}
.go-promo {
  background-image:
    linear-gradient(90deg, #fffffff5, #ffffff08), url(../images/promo-go.jpg);
}
.rebirth {
  background-image:
    linear-gradient(90deg, #faf7effa, #faf7ef33), url(../images/promo-rebirth.jpg);
}
/* ==================================================
   トップページ：スマートフォン（640px以下）
================================================== */
@media (max-width: 640px) {
  .hero {
    min-height: 670px;
  }
  .slide {
    background-position: 66% center !important;
  }
  .hero-copy {
    padding-top: 220px;
  }
  .logo {
    font-size: 43px;
  }
  .hero h1 {
    font-size: 24px;
  }
  .hero-copy > p:not(.logo) {
    font-size: 14px;
  }
  .hero-btn {
    width: 100%;
  }
  .interest-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 5px;
  }
  .card {
    min-height: 145px;
  }
  .stories {
    grid-template-columns: 1fr 1fr;
  }
  .feature {
    grid-column: 1/-1;
    min-height: 300px;
  }
  .story:not(.feature) {
    min-height: 245px;
    padding: 14px;
  }
  .mini-posts {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .member {
    min-height: 245px;
  }
  .promos {
    grid-template-columns: 1fr;
    margin-top: 28px;
  }
  .promo {
    min-height: 180px;
  }
}

.category-icon {
  width: 52px;
  height: 52px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}