@charset "Shift_JIS";

/* ===================================
   TERASA ナノシェーバー LP ? PC版
   対象幅：769px以上（デスクトップ）
   =================================== */

/* ---------- カスタムプロパティ ---------- */
:root {
  --blue:       #78a5dc;
  --blue-dark:  #3d6fae;
  --blue-mid:   #789ed5;
  --blue-soft:  #eef5ff;
  --ink:        #20242a;
  --muted:      #5f6670;
  --line:       #d9e1ec;
  --cream:      #fff5c8;
  --orange:     #f4a12e;
  --gray-bg:    #f0f0f0;
  --page-max:   1920px;
}

/* ---------- リセット ---------- */
#nanoshaver-lp *,
#nanoshaver-lp *::before,
#nanoshaver-lp *::after {
  box-sizing: border-box;
}


#nanoshaver-lp {
  scroll-behavior: smooth;
    background: #0b0b0b;
  color: var(--ink);
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  line-height: 1.6;
  letter-spacing: 0.02em;
}

#nanoshaver-lp {
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
}

#nanoshaver-lp img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* ---------- ページシェル ---------- */
.page-shell {
  width: min(100%, var(--page-max));
  margin: 0 auto;
  background: #fff;
  overflow: hidden;
}

/* ---------- ユーティリティ ---------- */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.image-block img {
  width: 100%;
}

/* ====================================
   ファーストビュー（hero）
   ==================================== */
.hero__image {
  width: 100%;
  display: block;
}

/* ====================================
   Movie
   ==================================== */
.movie-section {
  padding: 40px 0 48px;
  background: #fff;
  text-align: center;
}

.section-heading--movie {
  color: var(--blue-dark);
  font-size: clamp(1.4rem, 2.5vw, 1.8rem);
  font-style: italic;
  font-weight: 900;
  letter-spacing: 0.1em;
  margin-bottom: 16px;
}

.movie-frame {
  position: relative;
  display: grid;
  place-items: center;
  width: min(50%, 520px);
  aspect-ratio: 16 / 9;
  margin: 0 auto;
  border: none;
  background: #c8c8c8;
  cursor: pointer;
  transition: opacity 0.2s;
}

.movie-frame:hover {
  opacity: 0.9;
}

.movie-frame__play {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.80);
  clip-path: polygon(20% 10%, 90% 50%, 20% 90%);
}

.movie-frame.is-active::after {
  content: "動画URLを設定してください";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 700;
  background: rgba(34, 38, 43, 0.65);
}

.cta-button a:hover {
  transform: translateY(3px);
  filter: brightness(1.06);
}

/* ====================================
   コンテンツ03~04共通：幅指定
   ==================================== */
.container {
  width: 100%;
  margin: 0 auto;
}
   
/* ====================================
   コンテンツ05(商品情報）：幅指定
   ==================================== */
.container-spec {
  width: 980px;
  margin: 0 auto;
}
   
/* ====================================
   コンテンツ01：こんな方におすすめ
   ==================================== */
.worry {
  padding: 100px 40px 110px;
  background: #f2f9fc;
  text-align: center;
}

.worry h2 {
  font-size: clamp(28px, 3.2vw, 42px);
  font-weight: bold;
  color: #050505;
  transform: skewX(-5deg);
  transform-origin: center;
  display: inline-block;
}

.worry__list {
  display: grid;
  gap: 14px;
  width: min(100%, 560px);
  margin: 44px auto 0;
  list-style: none;
}

.worry__list li {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 64px;
  padding: 12px 36px 12px 104px;
  border-radius: 999px;
  background: var(--blue-mid);
  color: #fff;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-align: left;
}

.worry__check {
  position: absolute;
  left: 50px;
  top: 50%;
  width: 40px;
  height: 33px;
  transform: translateY(-50%);
  background: url("../image/2x/check.png") center / contain no-repeat;
}

/* ====================================
   コンテンツ02：features-intro（一枚画像）
   ==================================== */
   .feature-intro {
  width: 100%;
}

.feature-intro img {
  width: 100%;
  display: block;
}

/* ====================================
   コンテンツ03：TERASAナノシェーバーの特徴
   ==================================== */
.features {
  background: #fff;
}

/* ------ POINT 01 ------ */
.feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.feature--01 {
  min-height: 640px;
}

.feature__visual {
  position: relative;
  overflow: hidden;
}

.feature__visual--01 {
  background: #fff;
  overflow: visible;
}

.feature__face {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.feature--01 .feature__face {
  min-height: 560px;
}

.feature__blades {
  position: absolute;
  top: auto;
  left: 252px;
  right: auto;
  bottom: -66px;
  width: 416px;
  height: 233px;
  object-fit: cover;
  z-index: 2;
  border: 1px solid #222;
  box-sizing: border-box;
}

#nanoshaver-lp .feature--01 .hacobune-univideo {
  position: absolute;
  z-index: 2;
  top: 470px;
  left: 160px;
  right: auto;
  width: 416px;
  max-width: none;
  height: 233px;
  object-fit: cover;
  border: 1px solid #222;
  box-sizing: border-box;
}

#nanoshaver-lp .feature--01 {
  margin-bottom: 66px;
}

#nanoshaver-lp .feature__copy--01 {
  position: relative;
}

#nanoshaver-lp .feature__copy--01::after {
  content: "";
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  height: 66px;
  background: #f0f0f0;
}

.feature__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 55px 90px;
  color: #050505;
}

.feature__copy--01 {
  background: var(--gray-bg);
  justify-content: flex-start;
  padding-top: 90px;
}

.feature__badge {
  width: 90px;
  margin-bottom: 48px;
}

.feature__copy h3 {
  font-size: clamp(24px, 3vw, 36px);
  font-weight: bold;
  line-height: 1.3;
  margin-bottom: 28px;
  transform: skewX(-5deg);
  transform-origin: left center;
}

.feature__copy p {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.95;
}

.feature__copy p + p {
  margin-top: 24px;
}

.feature__before-after {
  width: min(100%, 400px);
  margin-top: 24px;
}

/* ------ POINT 02 ------ */
.feature--02 {
  position: relative;
  isolation: isolate;
  display: block;
  aspect-ratio: 1280 / 498;
  overflow: hidden;
}

.feature__copy--02 {
  position: absolute;
  z-index: 5;
  left: 48px;
  top: 50%;
  transform: translateY(-50%);
  width: min(380px, 35%);
  background: transparent;
  padding: 0;
}

.feature__copy--02 .feature__badge--02 {
  /* point02はラベル画像がないので非表示 */
  display: none;
}

.feature__copy--02 h3 {
  font-size: clamp(22px, 2.2vw, 32px);
  color: #fff;
  text-shadow: 0 1px 8px rgba(0,0,0,0.45);
  transform: skewX(-5deg);
  transform-origin: left center;
}

.feature__h3--02 {
  color: #fff !important;
}

.feature__copy--02 p {
  color: #fff;
  font-size: 14px;
  line-height: 1.8;
  text-shadow: 0 1px 6px rgba(0,0,0,0.4);
}

.feature__full-image {
  position: absolute;
  z-index: 1;
  right: 0;
  top: 0;
  width: 88%;
  max-width: none;
}

/* ------ POINT 03 ------ */
.feature--03 {
  position: relative;
  min-height: 424px;
  overflow: hidden;
}

.feature__visual--03 {
  position: relative;
  overflow: hidden;
}

.feature__visual--03 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.feature__copy--03 {
  background: var(--gray-bg);
  padding: 80px 40px 60px 150px;
}

/* ------ POINT 04 ------ */
.feature--04 {
  position: relative;
  aspect-ratio: 2232 / 1449;
  overflow: hidden;
}

.feature__copy--04 {
  position: relative;
  z-index: 2;
  justify-content: flex-start;
  padding-top: 25px;
  background: transparent;
}

.feature__copy--04 h3 {
  width: 520px;
}

.feature__visual--04 {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  bottom: 0;
  width: 87%;
  overflow: hidden;
}

.feature__visual--04 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

/* ------ 使い方簡単 ------ */
.howto {
  padding: 75px 40px 0;
  background: #f8f8f8;
  text-align: center;
  min-height: 780px;
}

.howto h2 {
  font-size: clamp(26px, 3vw, 40px);
  font-weight: bold;
  display: inline-block;
  transform: skewX(-5deg);
  transform-origin: center;
  color: #262626;
}

.howto p {
  margin: 36px auto 60px;
  color: var(--muted);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.75;
}

.howto__on { color: #c41f19; font-size: 1.6em; line-height: 1; }
.howto__slash { color: #000; font-size: 1.6em; line-height: 1; }
.howto__off { color: #1f286f; font-size: 1.6em; line-height: 1; }

.howto__visual {
  position: relative;
  width: min(660px, 100%);
  margin: 0 auto;
}

.howto__img {
  width: 100%;
}

.howto__label {
  position: absolute;
  z-index: 2;
  top: -70px;
  right: -110px;
  width: 260px;
}

/* ====================================
   コンテンツ04：様々なシーンで活躍
   ==================================== */
.use-scenes img {
  width: 100%;
}

/* ====================================
   Voice（お客様の声）
   ==================================== */
.voice {
  position: relative;
  background: #fff4c8;
}

.voice img {
  margin: 0 auto;
}

.voice__inner {
  position: relative;
}

.voice__bg {
  width: 100%;
  display: block;
}

.voice__content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.voice__content h2 {
  position: absolute;
  top: 14%;
  left: 50%;
  transform: translateX(-50%) skewX(-5deg);
  font-size: clamp(24px, 3.2vw, 44px);
  font-weight: bold;
  white-space: nowrap;
  color: var(--ink);
}

.voice-card {
  position: absolute;
  top: 43%;
  left: 36%;
  width: min(540px, 45%);
}

.voice-card__stars {
  color: var(--orange);
  font-size: 22px;
  letter-spacing: 4px;
  margin-bottom: 14px;
}

.voice-card__text {
  font-size: 15px;
  line-height: 1.85;
  color: var(--ink);
}

.voice-card__note {
  margin-top: 12px;
  font-size: 12px;
  color: var(--muted);
}

/* ====================================
   コンテンツ05：機能サマリー
   ==================================== */
   .features-summary img {
  width: 100%;
}
/* ====================================
   コンテンツ06：セット内容
   ==================================== */
#nanoshaver-lp .set {
  padding: 0;
  background: #f7f7f7;
  text-align: center;
  position: relative;
  margin-bottom: 20px;
}

.set h2 {
  position: absolute;
  z-index: 2;
  top: 11%;
  left: 50%;
  transform: translateX(-50%) skewX(-5deg);
  color: var(--blue-mid);
  font-size: clamp(24px, 3.2vw, 44px);
  font-weight: bold;
  white-space: nowrap;
}

.set img {
  position: relative;
  z-index: 1;
  width: 100% !important;
}

.set__note {
  padding: 16px 0 24px;
  font-size: 13px;
  color: var(--muted);
}

/* ====================================
   コンテンツ07：商品情報
   ==================================== */
.spec {
  padding: 80px 0px 90px;
  background: linear-gradient(180deg, #75a6dd 0%, #3f75ad 100%);
  color: #fff;
}

.spec h2 {
  display: grid;
  place-items: center;
  min-height: 60px;
  background: #fff;
  color: #050505;
  font-size: 24px;
  font-weight: bold;
  text-align: center;
}

.spec table {
  width: 100%;
  margin-top: 20px;
  border-collapse: collapse;
  background: #fff;
  color: #111;
  font-size: 14px;
  margin-bottom: 10px;
}

.spec th,
.spec td {
  padding: 12px 16px;
  border: 1px solid #5f5f5f;
  text-align: left;
  vertical-align: top;
}

.spec th {
  width: 22%;
  background: #707070;
  color: #fff;
  font-weight: 800;
}

@font-face {
  font-family: "Inter Local";
  src: url("../font/Inter.ttc") format("truetype-collection");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Source Han Sans JP VF";
  src: url("../font/SourceHanSansJP-VF.otf") format("opentype");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

/* ---------- ダイレクトテレショップ組み込み調整 ---------- */
html,
body,
.wrapper_,
#main_contents {
  background-color: #fff;
}

#main_contents,
#main_contents > main,
#main_contents > main > article {
  float: none;
  width: 100% !important;
  max-width: none;
  margin-right: auto;
  margin-left: auto;
}

#nanoshaver-lp.page-shell {
  width: min(100%, 1920px);
  margin-right: auto;
  margin-left: auto;
  background-color: #fff;
}

#nanoshaver-lp .section-heading--movie {
  font-family: "Inter Local", Inter, sans-serif;
  font-size: 63pt;
  font-style: italic;
  font-weight: 900 !important;
  letter-spacing: 0;
  color: #789ed5 !important;
}

#main_contents .hacobune-vjs-big-play-button {
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  margin: auto;
  font-size: 3em;/* 任意の大きさを指定。(2.2〜3emがおすすめ)ボタンの四角形のサイズ */
}

#main_contents .hacobune-vjs-big-play-button .hacobune-vjs-icon-placeholder:before {
   font-size: 3em;/* 任意の大きさを指定。(2.2〜3emがおすすめ)ボタンのアイコンのサイズ */
}



#nanoshaver-lp .movie-frame {
  width: 565px;
  max-width: 100%;
  height: 565px;
  aspect-ratio: auto;
}

#nanoshaver-lp .feature--01 .feature__badge,
#nanoshaver-lp .feature--03 .feature__badge,
#nanoshaver-lp .feature--04 .feature__badge {
  width: auto;
  height: 69px;
  align-self: flex-start;
}

/* 「こんな方におすすめ」共通サイトCSS対策 */
#nanoshaver-lp .worry {
  min-height: 642px;
  padding: 134px 28px 118px;
  background: #f2f9fc;
  text-align: center;
}

#nanoshaver-lp .worry h2 {
  display: inline-block;
  float: none;
  width: auto;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: #050505;
  font-family: var(--font-sans);
  font-size: 39px;
  font-weight: 700;
  line-height: 1.45;
  transform: skewX(-5deg);
  transform-origin: center;
}

#nanoshaver-lp .worry ul {
  display: grid;
  float: none;
  width: min(100%, 510px);
  margin: 38px auto 0;
  padding: 0;
  gap: 13px;
  list-style: none;
}

#nanoshaver-lp .worry li {
  position: relative;
  display: flex;
  float: none;
  width: auto;
  min-height: 62px;
  margin: 0;
  padding: 10px 36px 10px 112px;
  align-items: center;
  border: 0;
  border-radius: 999px;
  background: #789ed5;
  color: #fff;
  font-family: var(--font-sans);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.16em;
  text-align: left;
  box-sizing: border-box;
}

#nanoshaver-lp .worry li::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 52px;
  width: 42px;
  height: 35px;
  background: url("/item/terasa-nanoshaver-nm-a/pc/img/check.png") center / contain no-repeat;
  transform: translateY(-50%);
}

#nanoshaver-lp .worry li::after {
  content: none;
}

/* POINT 02 本文位置・文字色 */
#nanoshaver-lp .feature__copy--02 {
  left: 110px;
  transform: translateY(calc(-50% + 75px));
}

#nanoshaver-lp .feature__copy--02 p {
  color: #000;
  text-shadow: none;
}

/* POINT 02・03 境界の微小な隙間を解消 */
#nanoshaver-lp .feature--02 {
  margin: 0;
  padding: 0;
}

#nanoshaver-lp .feature--02 .feature__full-image {
  display: block;
  width: auto;
  max-width: none;
  height: 100%;
}

#nanoshaver-lp .feature--03 {
  margin: -1px 0 0;
  padding: 0;
}

/* POINT 03 画像を本文背景より前面に配置 */
#nanoshaver-lp .feature--03 .feature__copy--03 {
  grid-column: 2;
  width: 495px;
  height: 424px;
  box-sizing: border-box;
}

#nanoshaver-lp .feature--03 .feature__visual--03 {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  width: auto;
  max-width: none;
  height: 424px;
  overflow: visible;
}

#nanoshaver-lp .feature--03 .feature__point3-main {
  position: absolute;
  top: 0;
  left: 0;
  width: auto;
  max-width: none;
  height: 424px;
}

/* POINT 04 文字コンテンツを画像より前面に配置 */
#nanoshaver-lp .feature--04 {
  height: 724px;
  min-height: 0;
  aspect-ratio: auto;
  margin-bottom: 0;
}

#nanoshaver-lp .feature--04 .feature__copy--04 {
  position: relative;
  z-index: 3;
}

#nanoshaver-lp .feature--04 .feature__badge {
  margin-bottom: 23px;
}

#nanoshaver-lp .feature--04 .feature__visual--04 {
  z-index: 1;
  top: 0;
  right: 0;
  bottom: auto;
  width: 100%;
  max-width: none;
  height: auto;
  overflow: visible;
}

#nanoshaver-lp .feature--04 .feature__visual--04 img {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  object-fit: contain;
  object-position: right top;
}

#nanoshaver-lp .feature--04 .feature__copy--04 h3 {
  width: 510px;
  max-width: none;
  white-space: nowrap;
}

/* 正方形動画 */
#main_contents .contents_wrapper {
    max-width: 562px;
    position: relative;
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    z-index: 1;
  }

#main_contents .movie_box {
      width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    position: relative;
    margin-right: auto;
    margin-left: auto;
    line-height: 1;
    background: #000;
}

#main_contents .hacobune-univideo {
    width: 100%;
    height: 100%;
}

/* 使い方動画・安全ラベル */
#nanoshaver-lp .howto__movie {
  position: relative;
  width: 656px;
  max-width: 100%;
  margin-right: auto;
  margin-left: auto;
  overflow: visible;
}

#nanoshaver-lp .howto__movie-image {
  display: block;
  width: 656px;
  max-width: 100%;
  height: auto;
}

#nanoshaver-lp .howto__movie-label {
  position: absolute;
  z-index: 2;
  top: -80px;
  right: -113px;
  width: 265px;
  max-width: none;
  height: auto;
}

/* Voice 本文位置 */
#nanoshaver-lp .voice-card {
    position: absolute;
    top: 55%;
    left: 56%;
    transform: translateX(-50%);
}

#nanoshaver-lp .voice-card p {
  font-size: 15px;
}

#nanoshaver-lp .voice__note {
  position: absolute;
  z-index: 2;
  top: auto;
  right: 265px;
  bottom: 70px;
  left: auto;
  margin: 0;
  font-size: 12px;
}

/* POINT 01?04 本文ウェイト */
#nanoshaver-lp .feature__copy p {
  font-size: 16px;
}