@charset "UTF-8";

/* ==========================================
   トップページ専用（style-top.css）
   ========================================== */

/* ---------- Hero（右カラム先頭） ---------- */
.hero {
   text-align: center
}

/* 上部（ロゴ・縦書きコピー）：グラデーションの終わりの色を、下の .scene の始まりの色（#0e1228）とそろえて繋ぎ目を消す */
.hero-top {
   background: linear-gradient(180deg, #1a2045 0%, #141937 45%, #0e1228 100%);
   padding: 140px 0 0
}

/* ---------- 縦線（スクロールを促す・区切り）：上から伸びて下へ抜けるのをくり返す ---------- */
.v-line {
   display: block;
   position: relative;
   width: 1px;
   height: 125px;
   margin: 0 auto;
   overflow: hidden
}

.v-line::before {
   content: "";
   position: absolute;
   inset: 0;
   background: #fff;
   animation: vline 2.6s cubic-bezier(.6, 0, .4, 1) infinite
}

@keyframes vline {
   0% {
      transform: scaleY(0);
      transform-origin: top
   }

   50% {
      transform: scaleY(1);
      transform-origin: top
   }

   50.1% {
      transform: scaleY(1);
      transform-origin: bottom
   }

   100% {
      transform: scaleY(0);
      transform-origin: bottom
   }
}

/* ヒーロー：縦書きコピーの下、上部エリアの下端まで */
.hero-top .v-line {
   margin-top: 70px
}

/* 美味しく：見出し → 縦線 → 写真 */
.enjoy .v-line {
   margin-top: 110px
}

/* 開け方：レシピバナー → 縦線 → 会社概要 */
.howto .v-line {
   margin-top: 130px
}

.hero .logo {
   width: min(300px, 60%);
   margin: 0 auto
}

/* 縦書きコピー（画像） */
.hero .v-copy img {
   width: 104px;
   margin: 100px auto 0
}

/* 下部：海の写真＋地図＋Born in NOTO, JAPAN */
.scene {
   position: relative;
   /* 下の余白は右カラムの幅に対する割合（%）→ どの画面幅でもデザインと同じ比率 */
   padding: 120px 0 48%;
   text-align: left;
   background: #0e1228
}

/* 海の写真：幅140%で下端に合わせ（山並みがボタンの少し下、Born の上に来る位置）、
   上側は背景色へなじむようにフェード */
.scene::before {
   content: "";
   position: absolute;
   left: -20%;
   right: -20%;
   bottom: 0;
   aspect-ratio: 1400/794;
   background:
      linear-gradient(180deg, rgba(14, 18, 40, .55) 0%, rgba(14, 18, 40, .2) 45%, rgba(14, 18, 40, 0) 70%),
      url(../img/hero_bg.jpg) center bottom/cover no-repeat;
   -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 35%);
   mask-image: linear-gradient(180deg, transparent 0%, #000 35%);
   pointer-events: none
}

.scene .inner {
   position: relative;
   z-index: 2
}

.scene .en img {
   width: 230px
}

.scene .intro {
   margin-top: 26px;
   font-size: 14px;
   line-height: 1.85
}

.scene .btn-gold {
   margin-top: 36px;
   padding: 8px 26px;
   font-size: 13px
}

.scene .btn-gold img {
   width: 18px
}

/* 地図は本文の下あたりから、山並みの手前まで */
.scene .map {
   position: absolute;
   z-index: 1;
   right: 14%;
   top: 177px;
   width: 45%;
   pointer-events: none
}

/* 「Born in NOTO, JAPAN」：右カラムの幅いっぱい。文字の下端はセクションの端で少し切れる */
.born {
   position: absolute;
   left: 0;
   bottom: 0;
   width: 100%;
   height: auto;
   display: block;
   overflow: hidden;
   font-family: var(--cond);
   font-weight: 500;
   font-size: 160px;
   fill: rgba(255, 255, 255, .28);
   pointer-events: none
}

/* ---------- 生で味わうための理由 ---------- */
.raw {
   position: relative
}

.raw img {
   width: 100%
}

.raw-copy {
   position: absolute;
   inset: 0;
   font-weight: 500;
   font-size: 20px;
   line-height: 1.5;
   color: #222
}

.raw-copy span {
   position: absolute;
   writing-mode: vertical-rl;
   background: #fff;
   padding: 10px 6px
}

.raw-copy .l1 {
   left: 21%;
   top: 10%
}

.raw-copy .l2 {
   left: 13%;
   top: 33%
}

/* ---------- 選ばれる理由 ---------- */
.reason {
   background: var(--brown);
   padding: 120px 0 130px
}

.reason .ttl {
   color: var(--gold-light)
}

.reason .ttl small {
   color: rgba(255, 255, 255, .35)
}

.carousel {
   --cw: min(384px, 54%);
   --gap: 7%;
   position: relative;
   margin-top: 60px
}

.viewport {
   overflow: hidden;
   padding: 10px 0
}

.track {
   display: flex;
   align-items: stretch;
   gap: var(--gap);
   transition: transform .6s cubic-bezier(.4, 0, .2, 1)
}

.track.no-anim {
   transition: none
}

/* カード内の文字や余白はカード幅に対する割合（cqw）で指定
   → 画面幅が変わってもデザインと同じ比率・同じ改行位置を保つ（1cqw ＝ カード幅の1%） */
.card {
   flex: 0 0 var(--cw);
   container-type: inline-size;
   background: #fff;
   color: var(--ink);
   border-radius: 22px;
   /* cqw はカード自身の padding には使えないので、余白は中の要素側で取る */
   padding: 0
}

.card>* {
   margin-left: 11cqw;
   margin-right: 11cqw
}

.card>:first-child {
   margin-top: 10cqw
}

.card>:last-child {
   margin-bottom: 10cqw
}

/* 番号＋見出しをひとまとまりにして中央寄せ。
   見出しは番号のすぐ右、英字は見出しの右端にそろえる。下端は番号の下端とそろえる */
.card-head {
   display: flex;
   justify-content: center;
   align-items: flex-end;
   gap: 2.5cqw
}

.card-head>div {
   text-align: right;
   white-space: nowrap
}

/* 番号は画像（num-01〜03.png：3枚とも同じキャンバスサイズ 91×109px） */
.card .num {
   flex: none;
   width: 14cqw;
   height: auto;
   margin-bottom: -1.2cqw
}

.card h3 {
   font-weight: 500;
   font-size: 4.8cqw;
   line-height: 1.4;
   color: var(--wine)
}

.card .en {
   font-family: var(--didone);
   font-size: 3cqw;
   line-height: 1.2;
   margin-top: .5cqw;
   color: var(--wine)
}

.card .ph {
   width: 78cqw;
   aspect-ratio: 570/364;
   object-fit: cover;
   margin-top: 5cqw
}

/* 本文（.card-head 内の英字とは別） */
.card>p {
   font-size: 3.85cqw;
   line-height: 1.75;
   letter-spacing: .05em;
   color: #555;
   margin-top: 5cqw
}

.arrow {
   position: absolute;
   top: 50%;
   z-index: 2;
   width: 28px;
   height: 40px;
   margin-top: -20px;
   border: 0;
   background: none;
   cursor: pointer;
   padding: 0
}

.arrow::before {
   content: "";
   position: absolute;
   top: 50%;
   left: 50%;
   margin: -12px 0 0 -6px;
   border-top: 12px solid transparent;
   border-bottom: 12px solid transparent
}

.arrow.prev {
   left: calc(50% - var(--cw)/2 - var(--gap)/2 - 14px)
}

.arrow.prev::before {
   border-right: 12px solid var(--gold)
}

.arrow.next {
   right: calc(50% - var(--cw)/2 - var(--gap)/2 - 14px)
}

.arrow.next::before {
   border-left: 12px solid var(--gold)
}

/* ---------- 産地直送（バナー）→ 器の写真で暗い背景へ切り替え ---------- */
/* 背景は暗い色。クリーム色は .plate::before で、下側が丸く垂れる形に重ねる */
.shop {
   position: relative;
   background: var(--charcoal);
   padding-top: 70px;
   overflow: hidden
}

.shop>.inner {
   position: relative;
   z-index: 1
}

.bnr {
   display: block;
   border-radius: 12px;
   overflow: hidden;
   /* バナー画像の縁はそのまま活かし、影だけでふんわり浮かせる */
   box-shadow: 0 6px 20px rgba(150, 120, 70, .18);
   transition: opacity .3s
}

.bnr:hover {
   opacity: .85
}

.plate {
   position: relative;
   margin-top: 65px
}

/* クリーム色の面：上はバナーの裏まで伸ばし、下端は器の上部にかかる弧
   弧の一番低いところ（中央）＝ 器の上から約1/3、両端は少し上がる */
.plate::before {
   content: "";
   position: absolute;
   left: -20%;
   right: -20%;
   top: -2000px;
   bottom: 66%;
   background: var(--cream);
   border-radius: 0 0 50% 50% / 0 0 150px 150px
}

.plate img {
   position: relative;
   width: 70%;
   margin: 0 auto
}

/* ---------- 美味しくお召し上がりいただくために ---------- */
.enjoy {
   background: var(--charcoal);
   padding: 45px 0 0
}

.enjoy-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   margin-top: 180px
}

.enjoy-grid img {
   width: 100%;
   height: 100%;
   aspect-ratio: 700/467;
   object-fit: cover
}

.enjoy-grid .txt {
   position: relative;
   display: flex;
   flex-direction: column;
   justify-content: center;
   padding: 20px 6%;
   font-size: 12.5px;
   line-height: 2.1
}

/* 右上の波の飾り（wave-02.png） */
.enjoy-grid .t1::before {
   content: "";
   position: absolute;
   right: 0;
   bottom: 72%;
   width: 62%;
   aspect-ratio: 448/263;
   background: url(../img/wave-02.png) right bottom/contain no-repeat;
   opacity: .3;
   pointer-events: none
}

.enjoy-grid ul {
   list-style: none;
   color: #F2E222
}

.enjoy-grid li::before {
   content: "○"
}

.enjoy-grid ul+p {
   margin-top: 22px
}

/* ---------- 牡蠣の開け方 ---------- */
/* 開け方 → 会社概要：明るさの頂点（--charcoal-2）がちょうど境目にあると、
   そこが線のように見えるため、境目の前後を同じ色の平らな帯にしてなだらかにつなぐ */
.howto {
   background: linear-gradient(180deg, var(--charcoal) 0%, var(--charcoal-2) 75%, var(--charcoal-2) 100%);
   padding: 150px 0 0
}

.howto .inner {
   position: relative
}

/* 見出しは1行目（貝柱の写真）の右側。右列の中央より少し左に */
.howto-ttl {
   position: relative;
   isolation: isolate;
   justify-self: center;
   align-self: start;
   margin: -10px 20% 0 0;
   writing-mode: vertical-rl;
   font-weight: 500;
   font-size: 34px;
   line-height: 1.4;
   letter-spacing: .15em
}

/* 背景の牡蠣の線画（oyster_line.png）：見出しの右下に重ねる。文字サイズ連動のため em で指定 */
.howto-ttl::before {
   content: "";
   position: absolute;
   z-index: -1;
   left: -2.25em;
   top: 1.55em;
   width: 9.55em;
   aspect-ratio: 724/573;
   background: url(../img/oyster_line.png) left top/contain no-repeat;
   pointer-events: none
}

/* 写真の中心を通る縦線でつなぐ（--cx ＝ 写真の中心の位置） */
.steps {
   --cx: 25.6%;
   position: relative;
   list-style: none
}

.steps::before {
   content: "";
   position: absolute;
   left: var(--cx);
   top: 100px;
   bottom: 120px;
   width: 1px;
   background: rgba(255, 255, 255, .7)
}

.step {
   position: relative;
   display: grid;
   grid-template-columns: calc(var(--cx) * 2) 1fr;
   align-items: start
}

.step+.step {
   margin-top: 38px
}

/* 貝柱の写真 → 手順1 だけ少し広く */
.step.s0+.step {
   margin-top: 66px
}

.step .pic {
   position: relative;
   justify-self: center;
   width: 165px
}

.step .pic img {
   width: 100%;
   border-radius: 50%
}

.step.s0 .pic {
   width: 220px
}

.step.s3 .pic {
   width: 228px
}

/* 手順3：外側に細いリング */
.step.s3 .pic>img:first-of-type {
   padding: 4px;
   border: 1px solid rgba(255, 255, 255, .8);
   background: var(--charcoal-2)
}

.step .star {
   position: absolute;
   right: -16px;
   top: 8%;
   width: 44px !important;
   border-radius: 0 !important
}

/* 「手順1」ラベル：写真の左上。下に黄色い筆の線（wave-03.png） */
/* 数字の右端が写真の左端に少しかかる位置。筆の線は「手順」の少し左から数字の下まで */
.step .no {
   position: absolute;
   right: 100%;
   top: -5px;
   margin-right: -4px;
   padding: 0 0 17px 14px;
   display: flex;
   align-items: flex-end;
   white-space: nowrap;
   font-size: 15px;
   line-height: 1;
   color: #F2E222;
   background: url(../img/wave-03.png) left bottom/80px auto no-repeat
}

/* 「手順」の文字の下端を数字の下端にそろえる */
.step .no span {
   padding-bottom: 4px
}

/* 数字は画像（step-01〜03.png）。高さをそろえて表示 */
/* max-width:none … 共通の img { max-width:100% } があると、ラベルの幅計算で数字の幅が0扱いになり、
   数字がラベルからはみ出して写真に重なるため */
.step .no img {
   flex: none;
   width: auto;
   max-width: none;
   height: 44px;
   margin-left: 8px;
   border-radius: 0
}

/* 説明文：写真の下寄り（上から約9割の位置）から始め、次の手順の横まではみ出してよい
   （負の margin-bottom で、文章の長さが行の高さに影響しないようにしている） */
.step p {
   align-self: start;
   margin: 94px 0 -200px -4%;
   font-size: 15px;
   line-height: 1.8;
   letter-spacing: .05em;
   /* デザインの改行（<br>）どおりに。右カラムが狭い画面では下の @media で折り返しに切り替え */
   white-space: nowrap
}

/* 手順3：写真の中ほど、少し右から・文字は大きめ */
.step.s3 p {
   margin: 120px 0 -200px 15%;
   font-size: 15px;
   line-height: 1.8
}

.howto-btn {
   text-align: center;
   margin-top: 140px
}

.howto .bnr {
   margin-top: 90px
}

/* ---------- 会社概要 ---------- */
.company {
   padding-top: 140px;
   background: linear-gradient(180deg, var(--charcoal-2) 0%, var(--charcoal-2) 15%, #2f3243 60%, #2b3048 100%);
   padding-bottom: 120px
}

.info {
   margin-top: 70px
}

.info h3 {
   font-family: "Shippori Mincho", var(--mincho);
   font-weight: 600;
   font-size: 22px;
   padding-bottom: 8px;
   border-bottom: 1px solid rgba(255, 255, 255, .5)
}

.info-body {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 16px;
   margin-top: 16px
}

.info address {
   font-family: "Shippori Mincho", var(--mincho);
   font-style: normal;
   font-size: 14px;
   font-weight: 500;
   line-height: 1.8
}

.info dl {
   font-family: "Shippori Mincho", var(--mincho);
   display: grid;
   grid-template-columns: 70px 1fr;
   gap: 8px 12px;
   margin-top: 14px;
   font-size: 13px;
   align-items: center
}

.info dt {
   font-family: "Shippori Mincho", var(--mincho);
   background: #fff;
   color: var(--navy);
   font-size: 12px;
   font-weight: 600;
   border-radius: 15px;
   text-align: center;
   line-height: 1.9
}

.info dd a {
   text-decoration: none
}

.info .map {
   aspect-ratio: 4/3;
   background: #e9e3dc;
   overflow: hidden
}

.info .map iframe {
   width: 100%;
   height: 100%;
   border: 0;
   display: block
}

/* 代表メッセージ */
.message {
   display: grid;
   grid-template-columns: 230px minmax(0, 1fr);
   gap: 24px;
   margin-top: 100px
}

.person .face {
   width: 230px;
   height: 230px;
   border-radius: 50%;
   object-fit: cover
}

/* 会社名・役職はしっぽり明朝 */
.person .role {
   font-family: "Shippori Mincho", var(--mincho);
   font-size: 13px;
   line-height: 1.7;
   margin-top: 24px
}

.person .sign {
   width: 140px;
   margin-top: 10px
}

/* 右揃え。デザインの改行（<br>）を保ち、長い行は写真側（左）へはみ出させる */
.msg {
   display: flex;
   flex-direction: column;
   align-items: flex-end;
   text-align: right;
   font-size: 16px;
   line-height: 1.8;
   padding-top: 70px
}

.msg p {
   white-space: nowrap
}

.msg p+p {
   margin-top: 35px
}

/* ---------- 能登の海とこれからも。 ---------- */
.closing {
   background: linear-gradient(180deg, #2b3048 0%, var(--navy-foot) 100%);
   padding: 80px 0 40px;
   text-align: center
}

.closing .v-copy {
   writing-mode: vertical-rl;
   font-size: 37px;
   line-height: 1.4;
   margin: 0 auto;
   height: 11em;
   text-align: start
}

.closing .txt {
   margin-top: 70px;
   font-size: 16px;
   line-height: 2.2
}

/* フッター（トップは背景をクロージングから続ける） */
.content>.footer {
   background: var(--navy-foot)
}

/* ==========================================
   右カラムの幅が狭いPC（幅1240px以下）
   ========================================== */
@media (max-width:1240px) {
   .enjoy-grid .txt br {
      display: none
   }

   .step p {
      white-space: normal
   }

   .step p br {
      display: none
   }
}

/* ==========================================
   スマホ（幅900px以下）
   ========================================== */
@media (max-width:900px) {
   .hero-top {
      padding: 90px 0 0
   }

   .v-line {
      height: 90px
   }

   .hero-top .v-line {
      margin-top: 50px
   }

   .enjoy .v-line {
      margin-top: 70px
   }

   .howto .v-line {
      margin-top: 80px
   }

   .company {
      padding-top: 90px
   }

   .hero .v-copy img {
      width: 84px;
      margin-top: 70px
   }

   .scene {
      padding-top: 80px;
      padding-bottom: 70%
   }

   .scene::before {
      left: -35%;
      right: -35%
   }

   .scene .intro br {
      display: none
   }

   .scene .map {
      top: auto;
      bottom: 14%;
      width: 58%;
      right: 2%
   }

   .raw-copy {
      font-size: 16px
   }

   .reason {
      padding: 90px 0 100px
   }

   .carousel {
      --cw: min(300px, 76%);
      --gap: 30px
   }

   .plate::before {
      border-radius: 0 0 50% 50% / 0 0 80px 80px
   }

   .shop {
      padding-top: 50px
   }

   .plate {
      margin-top: 45px
   }

   .plate img {
      width: 84%
   }

   /* 美味しく：写真→文章を1列に */
   .enjoy-grid {
      grid-template-columns: 1fr;
      margin-top: 100px
   }

   .enjoy-grid .txt {
      padding: 40px 8%
   }

   .enjoy-grid .t1::before {
      width: 50%;
      bottom: auto;
      top: -30px;
      opacity: .2
   }

   .howto {
      padding: 100px 0 0
   }

   .howto-ttl {
      font-size: 24px;
      margin-top: 0
   }

   .steps {
      --cx: 30%
   }

   .step {
      align-items: center
   }

   .step+.step {
      margin-top: 30px
   }

   .step .pic {
      width: 110px
   }

   .step.s0 .pic,
   .step.s3 .pic {
      width: 150px
   }

   .step .no {
      font-size: 12px;
      padding: 0 0 13px 10px;
      background-size: 60px auto
   }

   .step .no img {
      height: 33px;
      margin-left: 6px
   }

   .step .star {
      width: 32px !important
   }

   /* スマホは右列が狭いので、写真の横・上下中央に収める */
   .step p,
   .step.s3 p {
      align-self: center;
      margin: 0 0 0 4%;
      font-size: 12px;
      line-height: 1.9
   }

   .step p br {
      display: none
   }

   .howto-ttl {
      margin-right: 0
   }

   .howto-btn {
      margin-top: 90px
   }

   .howto .bnr {
      margin-top: 60px
   }

   /* 会社概要：地図を上、文字を下に */
   .info-body {
      grid-template-columns: 1fr;
      gap: 20px
   }

   .info .map {
      order: -1
   }

   /* 代表：写真と名前を上、文章を下に */
   .message {
      grid-template-columns: 1fr;
      text-align: center;
      margin-top: 70px
   }

   .person .face {
      width: 190px;
      height: 190px;
      margin: 0 auto
   }

   /* スマホは右揃えのまま、収まらない行だけ画面幅で折り返す */
   .msg {
      padding-top: 20px;
      align-items: stretch
   }

   /* keep-all … HTMLの <wbr> の位置でだけ改行（Androidで1文字だけ次の行に落ちるのを防ぐ）
      overflow-wrap … それでも収まらない極端に狭い画面では、はみ出さずに折り返す */
   .msg p {
      white-space: normal;
      word-break: keep-all;
      overflow-wrap: anywhere
   }

   .closing .v-copy {
      font-size: 24px
   }
}
/* ==========================================
   牡蠣の開け方：PC（幅901px以上）はデザインどおりの配置
   位置・大きさはすべて右カラム幅に対する割合（cqw：1cqw ＝ 右カラム幅の1%）
   → デザイン（右カラム幅916px）の座標 ÷ 9.16 の値。どの画面幅でも同じ見え方になる
   ========================================== */
@media (min-width:901px) {
   .howto {
      container-type: inline-size
   }

   /* .steps を右カラムの左端〜右端いっぱいに広げ、そこを基準に配置 */
   .steps {
      width: 100cqw;
      margin-left: -8cqw;
      height: 142.7cqw
   }

   /* 写真の中心を通る縦線（貝柱の写真の下 〜 手順3の写真の上） */
   .steps::before {
      left: 29.55cqw;
      top: 34.06cqw;
      bottom: auto;
      height: 73.25cqw
   }

   /* 背景の牡蠣の線画 */
   .steps::after {
      content: "";
      position: absolute;
      left: 53.1cqw;
      top: 2.4cqw;
      width: 51.2cqw;
      aspect-ratio: 724/573;
      background: url(../img/oyster_line.png) left top/contain no-repeat;
      pointer-events: none
   }

   .howto-ttl::before {
      display: none
   }

   /* li の枠をなくし、中の要素を .steps 基準で配置 */
   .step {
      display: contents
   }

   .step .pic {
      position: absolute;
      margin: 0;
      left: var(--pl);
      width: var(--pw)
   }

   .s0 .pic {
      --pl: 12.55cqw;
      --pw: 34.06cqw;
      top: 0
   }

   .s1 .pic {
      --pl: 16.92cqw;
      --pw: 25.44cqw;
      top: 44.21cqw
   }

   .s2 .pic {
      --pl: 16.92cqw;
      --pw: 25.44cqw;
      top: 75.66cqw
   }

   .s3 .pic {
      --pl: 11.9cqw;
      --pw: 35.37cqw;
      top: 107.31cqw
   }

   .step.s0 .pic,
   .step.s3 .pic {
      width: var(--pw)
   }

   .step.s3 .pic>img:first-of-type {
      padding: .5cqw
   }

   /* 星：手順3の写真の右上 */
   .step .star {
      left: 85.5%;
      right: auto;
      top: 13%;
      width: 18.5% !important
   }

   /* 見出し */
   .howto-ttl {
      position: absolute;
      z-index: 1;
      left: 64.85cqw;
      top: -1.64cqw;
      margin: 0;
      font-size: 5.15cqw;
      line-height: 1;
      letter-spacing: .17em
   }

   /* 「手順」ラベル：3つとも左端をそろえる（筆の線の左端 ＝ 右カラムの5.8%） */
   .step .no {
      right: auto;
      left: calc(5.79cqw - var(--pl));
      margin: 0;
      padding: 0 0 2.18cqw 3.06cqw;
      font-size: 2.1cqw;
      background-size: 12.2cqw auto
   }

   .s1 .no {
      top: -.65cqw
   }

   .s2 .no {
      top: -1.64cqw
   }

   .s3 .no {
      top: -3.71cqw
   }

   .step .no span {
      padding-bottom: .5cqw
   }

   .step .no img {
      height: 6.5cqw;
      margin-left: .9cqw
   }

   /* 説明文 */
   .step p,
   .step.s3 p {
      position: absolute;
      margin: 0;
      padding: 0;
      white-space: nowrap;
      font-size: 2cqw;
      line-height: 2.05;
      letter-spacing: .05em
   }

   .step p br {
      display: inline
   }

   .s1 p {
      left: 49.67cqw;
      top: 65.94cqw
   }

   .s2 p {
      left: 49.67cqw;
      top: 97.38cqw
   }

   .step.s3 p {
      left: 57.42cqw;
      top: 125.44cqw;
      font-size: 2.35cqw;
      line-height: 1.77;
      letter-spacing: .03em
   }
}