@charset "UTF-8";

/* ===================================================================
  CSS information
  file name  :  style.css
  style info :  LPスタイル
=================================================================== */
/* --------------------------------------
  common
-------------------------------------- */
:root {
  --pink: #f773a2;
  --green: #28c2b5;
  --yellow: #fff385;
  --orange: #f06e00;
  --blue: #23a6ed;
  --purple: #a87be6;
  --black: #4a4a4a;
  --lightpink: #fff0f5;
  --lightgreen: #e8fffd;
  --lightyellow: #fffbe3;
  --zen-maru: "Zen Maru Gothic", "Noto Sans JP", "ヒラギノ角ゴPro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", Arial, Helvetica, Verdana, sans-serif;
  --noto-sans: "Noto Sans JP", "ヒラギノ角ゴPro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", Arial, Helvetica, Verdana, sans-serif
}

html {
  line-height: 1.42857143;
}

main {
  color: var(--black);
  font-size: min(4vw, 30px);
  font-family: var(--zen-maru);
  font-weight: 400;
  letter-spacing: 0.1em;
}

header a {
  display: block;
}

main a {
  display: inline-block;
}

img {
  max-height: 100%;
}

.content-wrapper {
  width: 100%;
  max-width: 750px;
  margin: 0 auto;
}

.content-inner {
  padding: 0 min(5.33vw, 40px);
}

.noto {
  font-family: var(--noto-sans);
}

.line {
  --txtColor: var(--pink);
  color: var(--txtColor);
  position: relative;
  padding: 0.1em 0.2em 0.1em 0;
}

.line::after {
  content: '';
  background-color: var(--txtColor);
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: min(0.4vw, 3px);
  mask: url(../images/dashed_line.svg) space left bottom / auto 100%;
}

.ttl {
  text-align: center;
  letter-spacing: 0.07em;
  font-weight: 700;
  font-size: min(7.47vw, 56px);
  line-height: 1.6;
}

.ttl-sub {
  display: block;
}

.card {
  --border-color: var(--green);
  background-color: #fff;
  border: min(0.53vw, 4px) solid var(--border-color);
  border-radius: min(2.67vw, 20px);
  box-shadow: 0 min(1.6vw, 12px) 0 var(--border-color);
  padding: min(13.33vw, 100px) min(4vw, 30px) min(8.53vw, 64px);
}

.ttl.card {
  font-size: min(7.47vw, 56px);
}

.ttl.card .line {
  --txtColor: var(--border-color);
}

.card.has-balloon {
  position: relative;
}

.balloon {
  width: min(60.8vw, 456px);
  height: min(14.13vw, 106px);
  margin: 0 auto;
}

.card.has-balloon .balloon {
  --balloon-offset: max(-18vw, -135px);
  /*.cardのpadding-topを足す */
  --balloon-bg-offset: min(4.13vw, 31px);
  margin-top: var(--balloon-offset);
  background: linear-gradient(to bottom, transparent var(--balloon-bg-offset), #fff var(--balloon-bg-offset));
}

.btn {
  border: none;
  border-radius: 0;
  padding: 0;
}

/* due-date-box */
.due-date-box {
  display: grid;
}

.due-date-box .due-date,
.due-date-box .box-bg {
  grid-area: 1 / 1;
}

.due-date {
  font-weight: 700;
  text-align: center;
}

.due-date .month,
.due-date .day {
  letter-spacing: 0.07em;
}

.due-date .month-num,
.due-date .day-num {
  line-height: 1;
}

.due-date .weekday {
  border-radius: 50%;
  text-align: center;
  display: inline-block;
  width: 1.5em;
  line-height: 1.4;
  text-indent: 0.1em;
  vertical-align: 0.2em;
  padding-bottom: 0.1em;
}

/* --------------------------------------
  header
-------------------------------------- */
.l-header--youji {
  padding: 0;
}

.l-header--youji .c-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: min(2vw, 15px) min(4vw, 30px);
}

.l-header--youji .l-header__logo {
  width: min(33.33vw, 250px);
  height: auto;
}

.l-header--youji .l-header__logo img {
  width: 100%;
  height: 100%;
  margin: 0;
}

.l-header--youji .header-btn {
  width: 37.33%;
  max-width: 280px;
}

.l-header--youji .header_deadline01_date {
  font-size: min(calc(38/750 * 100vw), 38px);
  font-weight: 700;
  font-family: "Zen Kaku Gothic New", sans-serif;
  line-height: 1;
}

.l-header--youji .header_deadline01_date_color {
  color: #f06e00;
  font-size: min(calc(48/750 * 100vw), 48px);
}

.l-header--youji .header_deadline01_date_num {
  font-size: min(calc(60/750 * 100vw), 60px);
}

/* --------------------------------------
  fv
-------------------------------------- */
.fv_link {
  position: absolute;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  letter-spacing: -.04em;
  padding: 0 min(5.3333333333vw, 40px);
  bottom: min(4.4vw, 33px);
  left: 0;
  width: 100vw;
  max-width: 1000px;
  z-index: 2;
}

.fv_link a {
  color: #fff;
  border: 1px solid #fff;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: min(calc(34/750 * 100vw), 34px);
  font-weight: 700;
  text-align: center;
  width: min(calc(255/750 * 100vw), 255px);
  height: min(calc(255/750 * 100vw), 255px);
}

.fv_link a:hover img {
  opacity: 1
}

.fv_link a:hover {
  opacity: .6
}

.fv_link a .text_small {
  display: inline;
  font-size: min(calc(27/750 * 100vw), 27px);
}

.fv_link a .text_default {
  display: inline;
  font-size: min(calc(34/750 * 100vw), 34px);
}

.fv_link a .text_medium {
  display: inline;
  font-size: min(calc(42/750 * 100vw), 42px);
}

.fv_link a .text_large {
  display: inline;
  font-size: min(calc(56/750 * 100vw), 56px);
}

.fv_link a .text_num {
  display: inline;
  font-size: min(calc(90/750 * 100vw), 90px);
}

.fv_link .fv_link01 a {
  background-color: #f06e00;
  line-height: 1.1;
  margin-top: min(calc(-5/750 * 100vw), -5px);
}

.fv_link .fv_link01 a .text_label {
  background-color: #fff;
  color: #000;
  border: 1px solid #000;
  border-radius: min(calc(30/750 * 100vw), 30px);
  position: absolute;
  top: min(calc(-5/750 * 100vw), -5px);
  font-size: min(calc(28/750 * 100vw), 28px);
  font-weight: 500;
  padding: min(calc(10/750 * 100vw), 10px) min(calc(20/750 * 100vw), 20px);
}

.fv_link .fv_link02 a {
  background-color: var(--green);
  line-height: 1.3;
  padding-top: min(calc(20/750 * 100vw), 20px);
}

.fv_link .fv_link02 a .img_label {
  position: absolute;
  top: min(calc(-20/750 * 100vw), -20px);
  width: min(calc(131/750 * 100vw), 131px);
  height: auto;
}

#Bpattern01.fv_link .fv_link01 a {
  padding-top: min(calc(25/750 * 100vw), 25px);
}

#Bpattern01.fv_link .fv_link01 a .text_large {
  display: inline;
  font-size: min(calc(50/750 * 100vw), 50px);
}

.fv .video-area {
  display: grid;
  place-content: center;
  place-items: center;
  position: relative;
}

.fv .video-area .fv-ttl,
.fv .video-area .fv_link,
.fv .video-area .video-box,
.fv .video-area .fv-medal-box {
  grid-area: 1 / 1;
}

.fv .video-area .fv-ttl {
  z-index: 2;
  writing-mode: vertical-rl;
  //font-size: min(13.33vw, 100px);
  font-size: min(calc(87/750 * 100vw), 87px);
  font-weight: 700;
  line-height: 1.6;
  color: #fff;
  letter-spacing: 0.2em;
  margin-top: min(calc(-130/750 * 100vw), -130px);
}

@media screen and (min-width: 751px) {
  .fv .video-area .fv-ttl {
    margin-top: -130px;
  }
}

.fv .video-area .fv-ttl .sideline {
  border-right: min(0.67vw, 5px) solid #fff;
}

.fv .video-box {
  width: 100vw;
  max-width: 1000px;
  max-height: 1021px;
  overflow: hidden;
}

.fv .video-box video {
  width: 100%;
  vertical-align: bottom;
}

.fv .video-area .fv-medal-box {
  width: min(38.93vw, 292px);
  height: min(40.13vw, 301px);
  justify-self: end;
  align-self: end;
  z-index: 3;
  display: grid;
  place-content: center;
  place-items: center;
}

.fv-medal-box .countdown,
.fv-medal-box .box-bg {
  grid-area: 1 / 1;
}

.fv-medal-box .countdown {
  color: var(--pink);
  font-size: min(11.73vw, 88px);
  letter-spacing: -0.06em;
  text-align: center;
  font-weight: 700;
  padding-top: 0.3em;
  padding-right: 0.2em;
}

.fv-medal-box .countdown .num {
  font-size: min(17.33vw, 130px);
}

.fv .bnr-area {
  width: 100%;
  max-width: 1000px;
  height: min(20vw, 150px);
  background-color: var(--pink);
  display: grid;
  grid-template-columns: auto auto;
  grid-gap: min(3.2vw, 24px);
  place-items: center;
  place-content: center;
  padding-inline: min(3.2vw, 24px);
  margin: 0 auto;
}

.fv .bnr-area .bnr-txt {
  color: #fff;
  text-align: center;
  font-size: min(5.87vw, 44px);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.25;
}

.fv .bnr-area .bnr-txt .small {
  font-size: min(4.27vw, 32px);
}

.fv .bnr-area .due-date {
  color: #fff;
  font-size: min(5.33vw, 50px);
  letter-spacing: 0;
}

.fv .bnr-area .due-date .line {
  --txtColor: currentColor;
  padding: 0.2em 0;
}

.fv .bnr-area .due-date time {
  color: var(--yellow);
}

.fv .bnr-area .due-date .month,
.fv .bnr-area .due-date .day {
  font-size: min(7.2vw, 68px);
  letter-spacing: 0.04em;
}

.fv .bnr-area .due-date .month-num,
.fv .bnr-area .due-date .day-num {
  font-size: min(11.73vw, 112px);
  letter-spacing: 0;
  line-height: 0;
}

.fv .bnr-area .due-date .weekday {
  font-size: min(4vw, 38px);
  color: var(--pink);
  background-color: #fff;
  text-indent: 0.04em;
}

.fv-btn-area {
  /* padding-top: min(6.53vw, 49px); */
  /* padding-bottom: min(9.07vw, 68px); */
  /* padding-bottom: min(calc(26/750 * 100vw), 26px); */
}

.fv-btn-area-inner {
  width: 100%;
  max-width: 1000px;
  padding: min(calc(40/750 * 100vw), 40px) 0 min(calc(60/750 * 100vw), 60px);
  margin: 0 auto;
  /* background: #ebeff4; */
}

.fv-btn-area li {
  margin: 0 auto;
  width: min(calc(670/750 * 100vw), 670px);
}

.fv-btn-area li+li {
  margin-top: min(3.73vw, 28px);
}

.c-closingdate,
.c-closingdate--chugaku,
.c-closingdate--koukou {
  text-align: center;
  background-color: white;
}

/* --------------------------------------
  about
-------------------------------------- */
.about {
  background-color: var(--lightyellow);
  padding: min(13.33vw, 100px) 0 min(11.73vw, 88px);
}

.about .ttl {
  margin-bottom: min(5.73vw, 43px);
}

.about .content-inner {
  padding: 0 min(4vw, 30px);
}

.about .tab-area {
  margin-bottom: min(13.87vw, 104px);
}

.about .tab-nav {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-gap: min(2vw, 15px);
}

.about .tab-note {
  font-size: min(3.47vw, 26px);
  text-align: center;
  font-weight: 700;
  letter-spacing: 0.07em;
  margin: min(4.27vw, 32px) 0 min(7.2vw, 54px);
}

.about .tab-note .pink {
  color: var(--pink);
}

.about .tab-content-wrapper {
  background: url(../images/about_tablet.webp) no-repeat center top / contain;
  width: 100%;
  height: 71.47vw;
  max-height: 536px;
  padding-top: min(7.2vw, 54px);
}

.about .tab-content {
  width: min(74.13vw, 556px);
  height: min(46.67vw, 350px);
  margin: 0 auto;
  overflow: hidden;
}

.about .tab-content>div {
  max-height: 100%;
}

.about .tab-content video {
  max-width: 100%;
  max-height: 100%;
}

.about .tab-content #tab-04 {
  background-color: #fff;
  height: 100%;
  display: flex;
  justify-content: center;
}

.about-note {
  font-size: 0.6em;
  text-align: center;
  letter-spacing: 0.06em;
  margin: min(3.2vw, 24px) 0 min(8vw, 60px);
}

/* --------------------------------------
  recommend
-------------------------------------- */
.recommend {
  padding-top: min(13.07vw, 98px);
}

.recommend>.content-wrapper .ttl {
  margin-bottom: min(10.67vw, 80px);
}

.recommend>.content-wrapper .ttl .ttl-sub {
  width: 100%;
  margin-bottom: min(4vw, 30px);
}

.recommend-01 {
  background-color: var(--lightgreen);
  padding: min(10.67vw, 80px) 0 min(15.33vw, 115px);
  margin-top: min(9.6vw, 72px);
}

.recommend-01>.content-wrapper .ttl {
  margin-bottom: min(10vw, 75px);
}

.recommend-01>.content-wrapper .ttl .small {
  color: var(--black);
  font-weight: 700;
  letter-spacing: 0.08em;
}

.recommend-01>.content-wrapper .ttl .box-marker {
  color: #fff;
  background-color: var(--green);
  border-radius: min(0.67vw, 5px);
  padding-inline: 0.2em;
  margin-inline: 0.2em;
}

.recommend-01-01 .ttl {
  font-size: min(6.67vw, 50px);
  letter-spacing: 0.08em;
  margin-bottom: min(5.47vw, 41px);
}

.recommend-01-01 .ttl .ttl-sub {
  width: min(68.8vw, 516px);
}

.recommend-01-01 .ttl .line {
  --txtColor: var(--green);
}

/* --------------------------------------
  difference
-------------------------------------- */
.difference {
  background: url(../images/difference_bg_cloud.webp) no-repeat top center / auto min(71.33vw, 535px), url(../images/difference_bg.webp) repeat top left / min(2.67vw, 20px);
  border-radius: min(3.6vw, 27px);
  margin-top: max(-3.6vw, -27px);
  padding-top: min(23.47vw, 176px);
  padding-bottom: min(17.07vw, 128px);
}

.difference .ttl {
  margin-bottom: min(12.27vw, 92px);
  font-size: min(10.67vw, 80px);
}

.difference .ttl .small {
  color: #fff;
  font-weight: 700;
  font-size: min(6.13vw, 46px);
  display: block;
  line-height: 1.3;
}

.difference .ttl .line {
  --txtColor: var(--yellow);
  letter-spacing: 0;
}

.difference .anchor-area {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: min(3.6vw, 27px);
  margin-top: min(5.6vw, 42px);
}

.difference .anchor-area>li {
  position: relative;
}

.difference .anchor-area>li .tap {
  color: #fff;
  font-size: min(3.47vw, 26px);
  font-weight: 700;
  letter-spacing: -.08em;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  bottom: min(32.93vw, 247px);
  width: min(14.00vw, 105px);
  height: min(14.00vw, 105px);
  border-radius: min(14.00vw, 105px);
}

.difference .anchor-area>li:nth-of-type(1) .tap {
  background-color: #28c2b5;
  right: min(2.13vw, 16px);
}

.difference .anchor-area>li:nth-of-type(2) .tap {
  background-color: #f773a2;
  right: min(2.80vw, 21px);
}

.difference .anchor-area>li .tap-icon {
  position: absolute;
  bottom: min(28.26vw, 212px);
  width: min(8.13vw, 61px);
  animation: tap 2s ease infinite;
}

.difference .anchor-area>li:nth-of-type(1) .tap-icon {
  right: min(1.6vw, 12px);
}

.difference .anchor-area>li:nth-of-type(2) .tap-icon {
  right: min(2.26vw, 17px);
}

@keyframes tap {
  0% {
    animation-timing-function: ease-out;
    transform: scale(1);
    transform-origin: center center;
  }

  /*
	10% {
		animation-timing-function: ease-in;
		transform: scale(0.91);
	}
*/
  5% {
    animation-timing-function: ease-out;
    transform: scale(0.98);
  }

  17% {
    animation-timing-function: ease-in;
    transform: scale(0.87);
  }

  45% {
    animation-timing-function: ease-out;
    transform: scale(1);
  }
}

/* --------------------------------------
  point
-------------------------------------- */
.point {
  padding: min(13.33vw, 100px) 0 0;
}

.point .ttl.card {
  --border-color: var(--blue);
  margin-bottom: min(12.67vw, 95px);
}

.point .point-box+.point-box {
  margin-top: min(11.73vw, 88px);
}

.point .point-box .ttl-sub {
  width: min(17.33vw, 130px);
  margin: 0 auto;
}

.point .point-box .ttl {
  letter-spacing: 0.04em;
  margin-bottom: min(6vw, 45px);
  line-height: 1.5;
}

.point .point-box .ttl .small {
  font-size: 0.64em;
  font-weight: 700;
  color: var(--black);
}

.point .point-box .ttl .line {
  --txtColor: var(--blue);
}

.point .point-box .txt {
  font-weight: 500;
  margin-bottom: min(10vw, 75px);
}

.point .point-box .video-box video {
  max-width: 100%;
}

.point.point-add {
  background-color: #f3f0ff;
  padding-top: 0;
  padding-bottom: min(10vw, 75px);
}

.point.point-add .has-icon {
  position: relative;
}

.point.point-add .icon {
  position: relative;
  left: min(2.13vw, 16px);
  top: min(3.73vw, 28px);
  width: min(19.33vw, 145px);
  height: min(18vw, 135px);
  margin: 0;
  margin-bottom: min(3.2vw, 24px);
}

.point.point-add h2.ttl {
  font-size: min(4.8vw, 36px);
}

.point.point-add h3.ttl {
  margin-bottom: 0;
}

.point.point-add .ttl .line {
  --txtColor: var(--purple);
  letter-spacing: -0.05em;
}

.point.point-add .ttl .line:not(:first-child) {
  line-height: 2;
}

/* --------------------------------------
  merit
-------------------------------------- */
.merit {
  background-color: var(--lightpink);
  padding: min(14.53vw, 109px) 0 0;
}

.merit .ttl.card {
  --border-color: var(--pink);
  margin-bottom: min(10vw, 75px);
}

.merit-01 .ttl .small {
  color: var(--black);
  font-weight: 700;
  font-size: min(4.8vw, 36px);
}

.merit-01 .ttl .line {
  font-size: min(10.67vw, 80px);
  letter-spacing: 0;
  line-height: 1.2;
}

.merit-01 .txt {
  font-weight: 500;
  margin: min(5.33vw, 40px) 0 min(5.87vw, 44px);
  text-align: justify;
}

.merit-02 {
  margin-top: min(6.67vw, 50px);
}

.merit-02 .ttl {
  margin-bottom: min(9.07vw, 68px);
}

.merit-02 .voice-slider {
  overflow: hidden;
  padding-bottom: min(26.93vw, 202px);
  margin-bottom: 0;
}

.merit-02 .voice-slider .voice {
  width: min(86.67vw, 400px);
  max-height: 1234px;
  margin: 0 0.3em;
}

.merit-02 .voice-slider .voice img {
  object-fit: contain;
}

.merit-02 .voice-slider .slick-arrow {
  top: initial;
  bottom: min(16vw, 120px);
  width: min(2.8vw, 21px);
  height: min(2.8vw, 21px);
  border-top: min(0.53vw, 4px) solid var(--pink);
  border-left: min(0.53vw, 4px) solid var(--pink);
  z-index: 4;
}

.merit-02 .voice-slider .slick-prev {
  left: 18.67%;
  transform: rotate(-45deg);
}

.merit-02 .voice-slider .slick-next {
  right: 18.67%;
  transform: rotate(135deg);
}

.merit-02 .voice-slider .slick-prev::before,
.merit-02 .voice-slider .slick-next::before {
  font-size: 0;
  display: none;
}

.merit-02 .voice-slider .slick-dots {
  bottom: min(16vw, 120px);
}

.merit-02 .voice-slider .slick-dots li {
  width: 1em;
  height: 1em;
  opacity: 1;
  margin: 0 0.7em;
}

.merit-02 .voice-slider .slick-dots li button,
.merit-02 .voice-slider .slick-dots li button::before {
  width: 100%;
  height: 100%;
  opacity: 1;
}

.merit-02 .voice-slider .slick-dots li button {
  padding: 0;
}

.merit-02 .voice-slider .slick-dots li button::before {
  background-color: transparent;
  border: 1px solid var(--pink);
  border-radius: 50%;
}

.merit-02 .voice-slider .slick-dots li.slick-active button::before {
  background-color: var(--pink);
}

.merit-02 .voice-slider.only-wide-pc {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.merit-btn-area {
  padding-top: min(10vw, 75px);
  padding-bottom: min(10vw, 75px);
}

/* --------------------------------------
  gift
-------------------------------------- */
.gift {
  background: url(../images/gift_bg.webp) repeat left top / min(2.67vw, 20px);
  padding: min(16vw, 120px) 0 min(14.4vw, 108px);
}

.gift .ttl {
  margin-bottom: min(10.27vw, 77px);
}

.gift-01 .ttl {
  margin-top: max(-23.6vw, -177px);
  margin-bottom: 0;
}

.gift-01 .notes {
  font-size: 0.6em;
  line-height: 1.56;
  letter-spacing: 0;
  text-align: justify;
  margin: 1.5em 0;
}

.gift-01 .notes li {
  padding-left: 1em;
  text-indent: -1em;
}

.gift .due-date {
  color: var(--pink);
  font-size: min(6.67vw, 50px);
  letter-spacing: 0.02em;
  width: 92%;
  height: min(21.33vw, 160px);
  padding-left: 0.2em;
  margin: min(12vw, 90px) auto 0;
}

.gift .due-date .line {
  padding: 0.2em 0.2em 0.2em 0;
}

.gift .due-date .month,
.gift .due-date .day {
  font-size: min(8.8vw, 66px);
  letter-spacing: 0.07em;
}

.gift .due-date .month-num,
.gift .due-date .day-num {
  font-size: min(14.67vw, 110px);
  letter-spacing: 0.07em;
}

.gift .due-date .weekday {
  font-size: min(5.07vw, 38px);
  color: #fff;
  background-color: var(--pink);
  text-indent: 0.04em;
}

/* --------------------------------------
  taiken
-------------------------------------- */
.taiken {
  padding: min(10.67vw, 80px) 0 min(15.33vw, 115px);
}

.taiken .ttl {
  color: var(--blue);
  margin-bottom: min(8vw, 60px);
}

.taiken-btn-area li+li {
  margin-top: min(3.73vw, 28px);
}

/* --------------------------------------
  floating
-------------------------------------- */
.floating {
  display: grid;
  place-content: center;
  grid-template-columns: repeat(1, min(70%, 345px));
  grid-gap: min(2.67vw, 20px);
  padding: min(2.93vw, 22px) min(2.67vw, 20px);
  position: sticky;
  bottom: 0;
  left: 0;
  z-index: 5;
  background-color: rgb(255 255 255 / 0.8);
}

/* --------------------------------------
  Animations
-------------------------------------- */
.btn-anim {
  position: relative;
}

.btn-anim .shine {
  width: 100%;
  height: min(20vw, 150px);
  border-radius: min(2.67vw, 20px);
  overflow: hidden;
}

.shine {
  position: absolute;
  overflow: hidden;
  top: 0%;
  left: 0%;
  z-index: 2;
  pointer-events: none;
  mix-blend-mode: soft-light;
}

.shine::before {
  content: '';
  width: 200%;
  height: 200%;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 20%, rgb(255, 255, 255) 45%, rgb(255, 255, 255) 50%, rgb(255, 255, 255) 55%, rgba(255, 255, 255, 0) 80%, rgba(255, 255, 255, 0) 100%);
  position: absolute;
  top: -50%;
  left: -50%;
  z-index: 1;
  animation: shine 1.8s linear infinite;
}

@keyframes shine {
  0% {
    transform: translate3d(-100%, 0, 0) rotate(45deg);
    opacity: 0;
  }

  20% {
    transform: translate3d(-100%, 0, 0) rotate(45deg);
    opacity: 1;
  }

  70% {
    transform: translate3d(100%, 0, 0) rotate(45deg);
    opacity: 1;
  }

  80% {
    transform: translate3d(100%, 0, 0) rotate(45deg);
    opacity: 0;
  }

  100% {
    transform: translate3d(-100%, 0, 0) rotate(45deg);
    opacity: 0;
  }
}


/* --------------------------------------
  bnr
-------------------------------------- */
.bnr01 {
  width: 94%;
  max-width: 750px;
  margin: 0 auto;
  padding: 20px 0 0;
}

@media screen and (min-width: 751px) {
  .bnr01 {
    padding: 40px 0 0;
  }
}

.bnr01 img {
  width: 100%;
  height: auto;
}

.bnr-area_2 {
  width: 100%;
  max-width: 750px;
  margin: auto;
  padding: 0 0 20px;
}

@media screen and (min-width: 751px) {
  .bnr-area_2 {
    padding: 0 0 40px;
  }
}

.bnr-area_2 p {
  font-size: 20px;
  font-weight: 700;
  color: #4daa97;
  text-align: center;
  padding-bottom: 0.3em;
}

@media screen and (min-width: 751px) {
  .bnr-area_2 p {
    font-size: 30px;
  }
}

.bnr-area_2 img {
  width: 90%;
  height: auto;
  margin: 0 auto 20px;
}

/*--------------------------------------
  202512_fv
-------------------------------------- */
.fv {
  position: relative;
  width: 100%;
  max-width: 750px;
  margin: auto;
}
.fv img {
  width: 100%;
  height: auto;
}
.fv_circle_btn {
  position: absolute;
  top: 31%;
  right: 2%;
  width: calc(250 / 750 * 100%);
  margin: 0 auto;
}
.fv .note{
  position: absolute;
  top: 49%;
  right: 1%;
  text-align: right;
  font-size: 9px;
  @media screen and (min-width: 751px) {
    font-size: 14px;
  }
}