@charset "UTF-8";
/* カラー指定　*/
body {
  font-size: 1.1rem;
}

/* =====================
  共通
===================== */
/* PC改行解除用*/
@media screen and (min-width: 960px) {
  .u-sp {
    display: none;
  }
}
/* SPスタイル打消し */
.sp-content {
  padding: 0;
}

.pc-contentInner {
  max-width: 1200px;
  margin: 0 auto;
}

/* PCだけflex */
.pc-flex {
  display: flex;
}

/* 見出し */
.title {
  font-size: 2.5rem;
}
.title span {
  font-size: 1.5rem;
}

/* リンクボタン */
.btn {
  font-size: 1.125rem;
  filter: drop-shadow(12px 12px 0px rgba(0, 0, 0, 0.1));
  transition: all 0.3s;
}
.btn::before {
  right: 2rem;
}
.btn:hover {
  translate: 0 -3px;
  filter: brightness(1.2);
  filter: drop-shadow(16px 16px 0px rgba(0, 0, 0, 0.1));
}

/* キャプション */
ol.caption li {
  font-size: 0.75rem;
}

ul.caption li {
  font-size: 0.75rem;
}

p.caption {
  font-size: 0.75rem;
}

/* dlリスト */
dl dt {
  font-size: 0.75rem;
}

dl dd {
  font-size: 0.875rem;
}

/* =====================
  header
===================== */
.header {
  height: 60px;
  padding: 0 5%;
}
.header .smcc {
  width: 230px;
}
.header .meitetsu {
  width: 130px;
}

.end {
  font-size: 1.5rem;
}

/* =====================
  メインビジュアル
===================== */
.mv {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(5, 1fr);
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  grid-template-rows: inherit;
  position: relative;
}
.mv-block1 {
  grid-area: 1/1/3/2;
  align-items: flex-start;
  padding: 4vw 9vw 2vw 5vw;
}
.mv-free {
  width: 5vw;
}
.mv-cardimg {
  width: 12vw;
}
.mv-nomalcatch {
  width: 16vw;
  margin-left: 0.75em;
}
.mv-5000point {
  width: 30vw;
}
.mv p.caption {
  font-size: clamp(0.438rem, 0.73vw, 0.875rem);
  display: inline-block;
  position: absolute;
  width: 13vw;
  height: fit-content;
  bottom: 2vw;
  left: 23vw;
}
.mv-block2 {
  grid-area: 3/1/6/2;
  height: inherit;
}
.mv-block3 {
  grid-area: 1/2/4/3;
  height: inherit;
}
.mv-block4 {
  grid-area: 4/2/6/3;
  padding: 2vw 5vw 2vw 13vw;
}
.mv-catch {
  width: 100%;
}
.mv .day {
  border-radius: 10px;
}
.mv .daytxt {
  font-size: clamp(0.625rem, 1.04vw, 1.25rem);
  white-space: nowrap;
}
.mv-title {
  grid-area: inherit;
  width: 21vw;
  height: fit-content;
  border-radius: 130px;
  padding: 3vw;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  flex-direction: column;
  gap: 1rem;
}
.mv-title::before {
  width: 4.5vw;
  height: 4.5vw;
  top: 70px;
  left: -30px;
  margin: 0;
}
.mv-title::after {
  --r: 4px;
  width: 66px;
  aspect-ratio: 2;
  --_g: calc(var(--r)/tan(22.5deg)) bottom var(--r), #000 98%, #0000 101%;
  -webkit-mask: conic-gradient(from -22.5deg at 50% calc(341.4213562373% - var(--r) / 0.2426406871), #000 45deg, rgba(0, 0, 0, 0) 0) 0 100%/100% calc(100% - var(--r) / 1.4142135624) no-repeat, radial-gradient(var(--r) at 50% calc(var(--r) * 1.4142135624), #000 98%, rgba(0, 0, 0, 0) 101%), radial-gradient(var(--r) at left var(--_g)), radial-gradient(var(--r) at right var(--_g));
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  background: #fff;
  right: -20px;
  bottom: 100px;
}
.mv-title img {
  width: 100%;
}
.mv-train {
  width: 100%;
  padding-top: 0;
  position: relative;
  z-index: 1;
}
.mv-train p {
  font-size: 1.5rem;
  color: #999;
  padding: 0.5vw;
}

/* =====================
  選べる特典
===================== */
.select {
  background-size: 5%;
  padding-top: 5vw;
  padding-bottom: 100px;
}
.select-list {
  flex-direction: row;
  align-items: stretch;
  gap: 3%;
  padding-bottom: 2rem;
}
.select-item {
  border: 5px solid #007BC7;
  border-radius: 60px;
  height: 100%;
}
.select h2 {
  font-size: 1.25rem;
  width: 186px;
  height: 53px;
  filter: drop-shadow(10px 10px 0px rgba(0, 0, 0, 0.1));
}
.select h2 span {
  font-size: 2.5rem;
}
.select h3 {
  font-size: 1.5rem;
  padding: 1.2em 1em 0.5em;
}
.select dl dt {
  font-size: 1rem;
}
.select dl dd {
  font-size: 1.125rem;
}
.select-code {
  font-size: 1.25rem;
  gap: 2rem;
}
.select-code p {
  margin-top: 0;
}

/* =====================
  新規入会・ご利用特典
===================== */
.benefit .title {
  font-size: 3rem;
}
.benefit picture {
  flex-shrink: 0;
}
.benefit-icon {
  width: 125px;
  aspect-ratio: 125/115;
}
.benefit-detail {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5em;
}
.benefit h3 {
  align-items: center;
}
.benefit p.conditions {
  font-size: 1.125rem;
  text-align: left;
  margin: 0 0 0.5rem;
}
.benefit p.conditions span {
  font-size: 0.875rem;
}
.benefit .btn {
  margin: 2rem auto 0;
}
.benefit .dlList {
  text-align: left;
  display: flex;
  flex-direction: column;
}
.benefit .train7000 {
  height: 88px;
  top: -80px;
  right: 10%;
}

.benefit ol.camBenefit {
  flex-direction: row;
}
.benefit ol.camBenefit > li {
  width: calc((100% - 1px) / 2);
  padding: 2rem;
  margin-bottom: 0;
  align-items: center;
  gap: 1em;
  border-top: none;
}
.benefit ol.camBenefit > li:first-of-type {
  border-radius: 0;
}
.benefit ol.camBenefit > li::before {
  font-size: 1.125rem;
  width: 60px;
  top: 30px;
  left: 30px;
  padding-left: 1em;
}
.benefit ol.camBenefit > li::after {
  font-size: 2.25rem;
  left: 5.5rem;
  top: 28px;
}

/* =====================
  6つのメリット
===================== */
.merit {
  padding-bottom: 100px;
}
.merit .title {
  line-height: 0.3;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}
.merit .title span {
  margin: 0;
}
.merit .title strong {
  font-size: 4rem;
  width: 90px;
  height: 90px;
  border-radius: 5vw;
  margin-right: 0;
}
.merit .merit-list {
  align-items: stretch;
}
.merit .merit-list li {
  width: calc((100% - 2px) / 3);
  padding: 2em;
  margin-bottom: 0;
}
.merit .merit-list li::before {
  border-width: 74px 74px 0px 0px;
  left: 0;
}
.merit .merit-list li::after {
  font-size: 1.75rem;
  left: 0.5em;
  top: 0;
}
.merit h3 {
  font-size: clamp(0.8rem, 0.582rem + 1.09vw, 1.4rem);
  min-height: 0;
}
.merit p {
  font-size: 1.125rem;
}
.merit ol.caption {
  gap: 2em;
}
.merit .btn-meitetsu {
  font-size: 1.25rem;
  width: 18em;
  margin-inline: auto;
}

/* =====================
  ポイント使い方
===================== */
.train-bg .train2000 {
  height: 88px;
  top: -80px;
  left: 10%;
}

.point .point-list {
  gap: 4%;
}
.point .point-list > li {
  padding: 50px 2rem 40px;
  margin-bottom: 2rem;
}
.point .point-list > li::before {
  font-size: 1.5rem;
  width: 60px;
  height: 40px;
  padding-top: 0.5em;
}
.point .point-list > li::after {
  font-size: 3rem;
  top: 1vw;
  left: 18px;
}
.point .point-list > li:nth-child(1) {
  width: 68%;
}
.point .point-list > li:nth-child(2) {
  width: 28%;
}
.point h3 {
  font-size: 1.5rem;
}
.point h3 strong {
  font-size: 1.75rem;
}
.point p {
  font-size: clamp(0.875rem, 0.625rem + 0.42vw, 1.125rem);
}
.point-link {
  font-size: 1.125rem;
  width: fit-content;
  padding: 0.3em 1em;
  display: inline-block;
}

/* =====================
  注意事項
===================== */
.attention label {
  font-size: 1.5rem;
}
.attention li {
  font-size: 0.75rem;
  margin-bottom: 0.5em;
}
.attention-benefit {
  font-size: 1.125rem;
}

small {
  font-size: 0.75rem;
}

/* =====================
  フローティングボタン
===================== */
.btn-entry a {
  font-size: 1.125rem;
  width: 180px;
  height: 180px;
  border: 5px solid #FFF100;
  filter: drop-shadow(10px 10px 0px rgba(0, 0, 0, 0.1));
  transition: all 0.3s;
}
.btn-entry a::after {
  width: 64px;
  height: 85px;
  bottom: -25px;
}
.btn-entry a:hover {
  translate: 0 -3px;
  filter: brightness(1.2);
  filter: drop-shadow(16px 16px 0px rgba(0, 0, 0, 0.1));
}
.btn-entry a span {
  font-size: 0.857rem;
  padding-top: 2.5rem;
}