@charset "UTF-8";

/*
 * メインページ（resources/views/pages/index.php）のスタイル。
 * デザインは Penpot の ganmen-catch の LP ボード（作図幅 360px）。
 * 寸法は作図の値に --u（作図の 1px が画面で占める幅）を掛けて、コンテンツの幅に合わせて伸縮させる。
 */

:root {
  /* コンテンツの幅（最大 480px）÷ 作図幅 360px */
  --u: calc(min(100vw, 480px) / 360);
  --main: #1f5fae;
  --main-light: #d5e3f4;
  /* LINE の緑（#06c755）の色相のまま、白の文字とのコントラスト比が 4.5:1 以上になるまで暗くした色 */
  --line: #0f8842;
  /* Google Play ストア（play.google.com）の「インストール」ボタンの緑 */
  --google-play: #01875f;
}

body,
h1,
h2,
p,
ul {
  margin: 0;
  padding: 0;
}

body {
  font-family: "Noto Sans JP", sans-serif;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

img,
svg {
  display: block;
}

.lp {
  max-width: 480px;
  margin: 0 auto;
  overflow: hidden;
  background: #fafafa;
}

/* Header */
.header {
  display: flex;
  align-items: center;
  column-gap: calc(12 * var(--u));
  padding: calc(12 * var(--u)) calc(16 * var(--u));
  background: #fff;
}

.header__icon {
  flex-shrink: 0;
  width: calc(48 * var(--u));
  height: calc(48 * var(--u));
  border-radius: calc(12 * var(--u));
  background: var(--main-light);
  object-fit: cover;
}

.header__info {
  display: flex;
  flex: 1;
  align-items: center;
  column-gap: calc(6 * var(--u));
  min-width: 0;
}

.header__name-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  row-gap: calc(4 * var(--u));
  min-width: 0;
}

.header__name {
  color: var(--main);
  font-size: calc(18 * var(--u));
  font-weight: 900;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.header__tag {
  padding: calc(2 * var(--u)) calc(6 * var(--u));
  border-radius: calc(4 * var(--u));
  background: var(--main);
  color: #fff;
  font-size: calc(10 * var(--u));
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
}

/* 内容の幅で右端に寄せる（商材名が長いときは、商材名と幅を分け合って折り返す） */
.header__note {
  display: flex;
  min-width: 0;
  margin-left: auto;
  color: #444;
  font-size: calc(11 * var(--u));
  line-height: 1.4;
}

/* Headline */
.headline {
  position: relative;
}

.headline__image {
  width: 100%;
  height: auto;
}

.headline__title {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  padding: calc(10 * var(--u)) calc(16 * var(--u));
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: calc(14 * var(--u));
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
}

.stamp {
  position: absolute;
  top: calc(16 * var(--u));
  left: calc(223 * var(--u));
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: calc(118 * var(--u));
  height: calc(118 * var(--u));
  border: calc(5 * var(--u)) solid #d3241b;
  border-radius: calc(10 * var(--u));
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 calc(2 * var(--u)) calc(6 * var(--u)) rgba(0, 0, 0, 0.3);
}

/* 内側の細い線（作図では枠から 8px 内側、線の太さ 1.5px） */
.stamp::before {
  content: "";
  position: absolute;
  inset: calc(2.25 * var(--u));
  border: calc(1.5 * var(--u)) solid #d3241b;
  border-radius: calc(5.75 * var(--u));
}

.stamp__text {
  color: #d3241b;
  font-size: calc(40 * var(--u));
  font-weight: 900;
  line-height: 1.1;
  text-align: center;
}

/* MainVisual */
.main-visual {
  position: relative;
  overflow: hidden;
}

.hero {
  position: relative;
  height: calc(275 * var(--u));
  overflow: hidden;
  background: #f0f0f0;
}

.hero__image {
  position: absolute;
  top: calc(24 * var(--u));
  left: calc(110 * var(--u));
  width: calc(280 * var(--u));
  height: calc(251 * var(--u));
}

.bg-gallery,
.gallery {
  position: relative;
}

.image-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.image-grid--bg {
  grid-auto-rows: calc(341.25 * var(--u));
}

.image-grid--gallery {
  grid-auto-rows: calc(320 * var(--u));
}

.image-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 画像の色調とテクスチャ */
.grid-overlay {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: linear-gradient(rgba(0, 0, 0, 0.28) 0%, rgba(0, 0, 0, 0.2) 55%, rgba(0, 0, 0, 0.28) 100%);
}

.grid-overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("images/texture.webp") no-repeat;
  opacity: 0.1;
}

.grid-overlay--bg::after {
  background-position: center;
  background-size: cover;
}

/* 作図ではテクスチャの高さが 1280px で、上の 640px だけが見える */
.grid-overlay--gallery::after {
  background-position: top;
  background-size: 100% auto;
}

/* 画像の上に重ねる文言（上下左右の中央。画像の上でも読めるように、黒い影で縁取る） */
.gallery__caption {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: calc(22 * var(--u));
  font-weight: 900;
  line-height: 1.6;
  text-align: center;
  white-space: nowrap;
  text-shadow:
    0 0 calc(4 * var(--u)) rgba(0, 0, 0, 0.9),
    0 calc(2 * var(--u)) calc(8 * var(--u)) rgba(0, 0, 0, 0.6);
}

.main-visual__overlay {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  row-gap: calc(16 * var(--u));
  width: 100%;
}

.main-description {
  padding: calc(24 * var(--u)) calc(10 * var(--u));
  color: var(--main);
  font-size: calc(40 * var(--u));
  font-weight: 900;
  line-height: 1.45;
  letter-spacing: calc(-1.5 * var(--u));
  white-space: nowrap;
  /* 作図の白いドロップシャドウ（ぼかし 4px・広がり 2px） */
  text-shadow:
    calc(2 * var(--u)) 0 calc(4 * var(--u)) #fff,
    calc(-2 * var(--u)) 0 calc(4 * var(--u)) #fff,
    0 calc(2 * var(--u)) calc(4 * var(--u)) #fff,
    0 calc(-2 * var(--u)) calc(4 * var(--u)) #fff,
    calc(1.4 * var(--u)) calc(1.4 * var(--u)) calc(4 * var(--u)) #fff,
    calc(-1.4 * var(--u)) calc(1.4 * var(--u)) calc(4 * var(--u)) #fff,
    calc(1.4 * var(--u)) calc(-1.4 * var(--u)) calc(4 * var(--u)) #fff,
    calc(-1.4 * var(--u)) calc(-1.4 * var(--u)) calc(4 * var(--u)) #fff;
}

.main-description .s {
  font-size: calc(28 * var(--u));
}

.feature-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: calc(16 * var(--u));
  align-self: center;
  width: calc(330 * var(--u));
  box-sizing: border-box;
  padding: calc(24 * var(--u)) calc(15 * var(--u));
  background:
    url("images/feature-noise.webp") center / cover no-repeat,
    rgba(0, 0, 0, 0.4);
  box-shadow:
    inset 0 0 0 calc(1 * var(--u)) rgba(255, 255, 255, 0.08),
    inset 0 0 0 calc(7 * var(--u)) rgba(0, 0, 0, 0.12);
}

.feature-panel__heading {
  width: 100%;
  color: #fff;
  font-size: calc(28 * var(--u));
  font-weight: 900;
  line-height: 1.5;
  text-align: center;
  overflow-wrap: anywhere;
}

.feature-panel__heading .s {
  font-size: calc(20 * var(--u));
}

.feature-list {
  width: 100%;
  list-style: none;
}

.feature-list li {
  display: flex;
  align-items: flex-start;
  column-gap: calc(8 * var(--u));
  padding: calc(16 * var(--u)) calc(7 * var(--u));
}

.feature-list li + li {
  border-top: calc(1 * var(--u)) solid rgba(255, 255, 255, 0.3);
}

/* 幅と高さを固定し、本文の 1 行目（16px・行の高さ 1.5）の縦中央に揃える */
.feature-list__check {
  flex-shrink: 0;
  width: calc(16 * var(--u));
  height: calc(16 * var(--u));
  margin-top: calc(4 * var(--u));
  color: #ee6f7c;
}

.feature-list p {
  flex: 1;
  color: #fff;
  font-size: calc(16 * var(--u));
  font-weight: 700;
  line-height: 1.5;
}

/* Message */
.message {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: calc(48 * var(--u)) calc(20 * var(--u));
  background: #f0f0f0;
}

.message .bg-words {
  z-index: -1;
}

.message__text {
  color: var(--main);
  font-size: calc(40 * var(--u));
  font-weight: 900;
  white-space: nowrap;
}

.message__text span {
  display: block;
  line-height: 1.3;
}

.message__text span:nth-child(even) {
  line-height: 1.2;
}

/* 背景に敷き詰めた語（partials/bg-words） */
.bg-words {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  overflow: hidden;
  color: rgba(31, 95, 174, 0.14);
  font-size: calc(18 * var(--u));
  font-weight: 900;
  line-height: 1.2;
  white-space: nowrap;
}

/* 1 語ずつ 120px の幅に中央揃えで置き、奇数行（2 行目から 1 行おき）は半分ずらす */
.bg-words__row {
  display: grid;
  grid-auto-columns: calc(120 * var(--u));
  grid-auto-flow: column;
  justify-items: center;
}

.bg-words__row:nth-child(even) {
  margin-left: calc(-60 * var(--u));
}

/* Offer */
.offer {
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: calc(12 * var(--u));
  padding: calc(48 * var(--u)) calc(20 * var(--u));
  box-shadow: inset 0 0 0 calc(6 * var(--u)) var(--main);
}

.offer__icon {
  width: calc(96 * var(--u));
  height: calc(96 * var(--u));
  border-radius: calc(20 * var(--u));
  background: var(--main-light);
  box-shadow: 0 calc(4 * var(--u)) calc(12 * var(--u)) rgba(31, 95, 174, 0.18);
  object-fit: cover;
}

.offer__name {
  width: 100%;
  color: var(--main);
  font-size: calc(26 * var(--u));
  font-weight: 900;
  line-height: 1.3;
  text-align: center;
  overflow-wrap: anywhere;
}

.offer__description {
  width: 100%;
  color: #333;
  font-size: calc(14 * var(--u));
  line-height: 1.7;
  text-align: center;
}

.cta {
  --cta: var(--line);
  --cta-shadow: #0b6330;

  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(320 * var(--u));
  height: calc(96 * var(--u));
  margin-top: calc(16 * var(--u));
  border-radius: calc(48 * var(--u));
  background: var(--cta);
  box-shadow:
    0 calc(5 * var(--u)) 0 var(--cta-shadow),
    0 calc(10 * var(--u)) calc(16 * var(--u)) rgba(0, 0, 0, 0.2);
  color: #fff;
  text-decoration: none;
}

/* App Store・Google Play の案件（channel が store）を、Android 以外で表示するときの配色 */
.cta--store {
  --cta: var(--main);
  --cta-shadow: #16467f;
}

/* store の案件を Android で表示するときの配色 */
.cta--google-play {
  --cta: var(--google-play);
  --cta-shadow: #016245;
}

/* 中央を 8px 左へずらし、最も長い「LINEで友だち追加して」でも矢印との間を 14px 以上空ける */
.cta__label {
  flex-shrink: 0;
  margin-right: calc(16 * var(--u));
  font-size: calc(28 * var(--u));
  font-weight: 900;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
}

.cta__label .s {
  font-size: calc(20 * var(--u));
}

/* 1 行目の経路（「LINEで友だち追加して」が最も長い）を、ボタンの丸い端に掛からない大きさにする */
.cta__route {
  font-size: calc(22 * var(--u));
}

.cta__route .s {
  font-size: calc(16 * var(--u));
}

.cta__em {
  color: #ffe45c;
}

/* 文言の長さによらず、ボタンの右端の近くに固定する（上下は中央） */
.cta__arrow {
  position: absolute;
  top: 0;
  right: calc(20 * var(--u));
  bottom: 0;
  width: calc(28 * var(--u));
  height: calc(28 * var(--u));
  margin: auto 0;
}

.cta__arrow path {
  stroke: var(--cta);
}

/* Footer */
.footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: calc(20 * var(--u));
  padding: calc(32 * var(--u)) calc(20 * var(--u));
  background: var(--main);
}

.footer__links {
  display: flex;
  column-gap: calc(24 * var(--u));
}

.footer__links a {
  color: #fff;
  font-size: calc(13 * var(--u));
  line-height: 1.2;
  text-decoration: underline;
}

.footer__copyright {
  color: var(--main-light);
  font-size: calc(12 * var(--u));
  line-height: 1.2;
}