/*
Theme Name: meguru_lp
Description: 
Author:
Author URI: 
*/

/* ===========================
reset.css
=========================== */
:where(:not(audio, canvas, html, iframe, img, svg, video):not(svg, symbol)) {
  all: unset;
  display: revert
}

html {
  font-size: 62.5%
}

body {
  font-size: 10px
}

*,
:after,
:before {
  box-sizing: border-box
}

a,
button {
  cursor: revert
}

menu,
ol,
summary,
ul {
  list-style: none
}

details summary::-webkit-details-marker {
  display: none
}

img {
  max-inline-size: 100%;
  max-block-size: 100%
}

table {
  border-collapse: collapse
}

input,
textarea {
  -webkit-user-select: auto
}

textarea {
  white-space: revert
}

meter {
  -webkit-appearance: revert;
  appearance: revert
}

pre {
  all: revert
}

::placeholder {
  color: unset
}

::marker {
  content: initial
}

:where([hidden]) {
  display: none
}

:where([contenteditable]:not([contenteditable="false"])) {
  -moz-user-modify: read-write;
  -webkit-user-modify: read-write;
  overflow-wrap: break-word;
  -webkit-line-break: after-white-space;
  -webkit-user-select: auto
}

:where([draggable="true"]) {
  -webkit-user-drag: element
}

:where(dialog:modal) {
  all: revert
}


/* ===========================
style.css
=========================== */
@charset "UTF-8";

/* font
--------------------- */
/* color
--------------------- */
/* layout
--------------------- */
.body {
  margin-inline: auto;
  width: min(75rem, 100%);
  font-family: "こぶりなゴシック W3 JIS2004", "Koburina Gothic W3 JIS2004", sans-serif;
  color: #333;
  background: #1b2026;
}

html,
body {
  max-width: 100vw;
  overflow-x: hidden;
}

.main {
  background-color: #fff;
}

img {
  width: 100%;
  vertical-align: middle;
  -o-object-fit: cover;
  object-fit: cover;
  object-position: top;
  height: auto;
}

a {
  transition: .3s;
}

a:hover {
  transform: scale(1.05);
  transition: .3s;
  opacity: 0.7;

}

@-webkit-keyframes scaleChange {
  0% {
    scale: 1.05;
  }

  50% {
    scale: 0.95;
  }

  100% {
    scale: 1.05;
  }
}

@keyframes scaleChange {
  0% {
    scale: 1.05;
  }

  50% {
    scale: 0.95;
  }

  100% {
    scale: 1.05;
  }
}

/* ボタン */
.cvBtn {
  display: block;
  margin-inline: auto;
  width: clamp(0px, 89.4vw, 67.05rem);
  -webkit-animation: scaleChange 2s infinite;
  animation: scaleChange 2s infinite;
  -webkit-backdrop-filter: unset;
  backdrop-filter: unset;
}

/* 注釈エリア */
*[data-ahead-double] {
  position: relative;
  padding-left: 2em;
}

*[data-ahead-double]::before {
  position: absolute;
  left: 0;
  top: 0;
  content: attr(data-ahead-double);
  display: inline-block;
  color: inherit;
  font: inherit;
}

*[data-ahead-single] {
  position: relative;
  padding-left: 1.3em;
}

*[data-ahead-single]::before {
  position: absolute;
  left: 0;
  top: 0;
  content: attr(data-ahead-single);
  display: inline-block;
  color: inherit;
  font: inherit;
}

.floating {
  display: none;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  background: #fff;
}


.header__logo {
  flex-basis: clamp(0px, 8vw, 23rem);
}

.header__nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2.5%;
}

.header__navItem:first-of-type {
  width: clamp(0px, 40vw, 23rem);
}

.header__navItem:nth-of-type(2) {
  width: clamp(0px, 38.4vw, 28.8rem);
}


.header__navItem--medical {
  width: clamp(0px, 30.3vw, 25rem);
}

.cvBtn {
  -webkit-backdrop-filter: blur(1px);
  backdrop-filter: blur(1px);
}

.fv {
  /* padding-bottom: 7%; */
  background: #222A37;
}

.fv--light {
  background: #3c4856;
}

.fv__num {
  display: block;
  text-align: center;
  font-size: clamp(0px, 4.8vw, 3.6rem);
  font-family: "Koburina Gothic W6 JIS2004", "こぶりなゴシック W6 JIS2004", sans-serif;
  line-height: 1.5em;
  padding: 0.5rem 0;
  color: #fff;
  background: #60b3f9;
}

.fv__atn {
  margin-inline: auto;
  width: 89.4%;
  padding-block: 2.5% 4.5%;
  font-size: min(2.6vw, 20px);
  color: #fff;
}


/* ================================
動画
================================ */
.video-container {
  width: 80%;
  margin: 0 auto;
}

/* ================================
CTA価格
================================ */
.cta_price_area,
.sub_cta_area,
.prices_area {
  position: relative;
}

.cta_price_discount {
  position: absolute;
  width: 100%;
  text-align: center;
  color: #fff;
  font-size: clamp(10px, 3vw, 30px);
  font-weight: bold;
  top: 3%;
  left: 36%;
  line-height: 1;
}

.cta_price_discount_text_big {
  font-size: clamp(14px, 10vw, 76px);
  color: #f9f871;
}

.cta_price_content,
.prices_content {
  position: absolute;
  width: 100%;
  text-align: center;
  color: #3c4856;
  font-size: clamp(10px, 3vw, 30px);
  font-weight: bold;
}

.cta_price_text_big {
  font-size: clamp(14px, 10vw, 76px);
  color: #e37154
}

.strike {
  text-decoration: line-through;
}

.hige {
  top: 36%;
  left: 2%;
}

.vio {
  top: 48.5%;
  left: 2%;
}

.zenshin {
  top: 61%;
  right: -1%;
}

.zenshin_vio {
  top: 74%;
  right: -1%;
}

.zenshin_vio_hige {
  top: 87%;
  right: -1%;
}

.sub_cta_content {
  position: absolute;
  width: 100%;
  text-align: center;
  color: #3c4856;
  font-size: clamp(14px, 5vw, 36px);
  font-weight: bold;
  top: 32%;
  left: 0;
}

.line_yellow {
  padding: 0 2px;
  background-color: #f9f871;
  font-weight: bold;
}


.sub_cta_text_big {
  font-size: clamp(14px, 6vw, 46px);
  color: #e37154
}

.sub_cta_text_underline {
  text-decoration: underline;
  text-decoration-color: #e37154;
  font-weight: bold;
  color: #e37154;
}

/*-------------------------------------
価格
-------------------------------------*/
.hige_price {
  top: 18%;
}

.vio_price {
  top: 36%;
}

.zenshin_price {
  top: 68%;
}

.zenshin_vio_price {
  top: 79.5%;
}

.zenshin_vio_hige_price {
  top: 91.3%;
}

/*-------------------------------------
アクセスエリア設定
-------------------------------------*/
.access {
  background-color: #e4e8ed;
}

.map {
  height: 70vw;
  max-height: 500px;
  padding: 2rem;
}

/*-------------------------------------
フッター
-------------------------------------*/
.footer {
  background: #000;
  padding: 2em 0em;
  text-align: center;
  font-size: 1.4em;
  color: #fff;
}

.footer a {
  color: #fff;
}


/* ===========================
rwd.css
=========================== */
@media only screen and (max-width : 768px) {

  /* フローティングエリア */
  .floating {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    padding-block: 3%;
    padding-left: 5%;
    -webkit-backdrop-filter: blur(5rem);
    backdrop-filter: blur(5rem);
    z-index: 999;
    margin: 0 auto;
  }


  .footer_cvBtn {
    display: block;
    width: clamp(0px, 89.4vw, 67.05rem);
    -webkit-animation: scaleChange 2s infinite;
    animation: scaleChange 2s infinite;
    -webkit-backdrop-filter: unset;
    backdrop-filter: unset;
  }

  .footer {
    padding-block: 3em 11em;
  }
}