/* ===============================================### 
基本設定
###=============================================== */
.FU250619summer{
  --font-ja: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "Yu Gothic", "Open Sans", "メイリオ", sans-serif;
  --font-en: "abadi-condensed", sans-serif;
  font-weight: 400;
  font-style: normal;
  --color-white: #ffffff;
  --color-blue: #85dad3;
  --color-blue02: #a5bbe0;
  --color-black: #333333;
  --color-pink: #f2d2d2;
  --color-beige: #eae9d9;
  --color-yellow: #f5e180;
  --color-brown: #cf672f;
  --color-gold: #bdb176;
  --color-silver: #cccccc;
  color: #000000;
  margin-bottom: calc(160 * var(--formula));
}

.txt {
  font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "Yu Gothic", "Open Sans", "メイリオ", sans-serif;
}

.FU250619summer {
  --pc-width: 1400;
  --sp-width: 750;
  --pc-artboard-width: 460;
  --sp-artboard-width: 750;
  --formula: calc(var(--variable) * var(--ratio)); /*SP→PC 可変設定*/
  --formula_pc: calc(var(--variable) * 1); /*PC 1400以上は固定*/
}
/* PC画面幅 1400px以上 固定 */
@media (min-width: 1400px) {
  .FU250619summer {
    --ratio: calc(var(--pc-artboard-width) / var(--sp-artboard-width)); /* PCとSPのデザイン幅の比率 */
    --variable: 1px; /* 固定値（可変しない） */
  }
}
/* PC画面幅 768～1400px 可変 */
@media (min-width: 768px) and (max-width: 1400px) {
  .FU250619summer {
    --ratio: calc(var(--pc-artboard-width) / var(--sp-artboard-width)); /* PCとSPのデザイン幅の比率 */
    --variable: calc(100vw / var(--pc-width)); /* 画面幅に基づく可変値 */
  }
}
/* SP画面幅 767px以下 可変 */
@media (max-width: 767px) {
  .FU250619summer {
    --ratio: 1; /* 比率は1（変わらない） */
    --variable: calc(100vw / var(--sp-width)); /* 画面幅に基づく可変値 */
  }
}

.FU250619summer img,
.FU250619summer svg,
.FU250619summer video{
  width: 100%;
  height: auto;
}
.FU250619summer .article-area {
  width: 100%;
  max-width: 46rem;
  margin: 0 auto 10rem;
}
@media screen and (max-width: 767px) {
  .FU250619summer .sec01 {
    overflow-x: hidden;
  }
  .FU250619summer .article-area {
    max-width: 100%;
    margin: 0 auto 0;
  }
}

/* ===========### PC版用設定 ###=========== */
.spOnly {
  display: none;
}
.pcOnly {
  display: block;
}

/* ===========### SP版用設定 ###=========== */
@media screen and (max-width: 767px) {
  .spOnly {
    display: block;
  }
  .pcOnly {
    display: none;
  }
}


/* ===============================================### 
ぼかし アニメーション設定
###=============================================== */
.First_inview-blur,
.inview-blur {
  opacity: 0;
  -moz-transition: -moz-transform 0.5s linear;
  -webkit-transition: -webkit-transform 0.5s linear;
  -o-transition: -o-transform 0.5s linear;
  -ms-transition: -ms-transform 0.5s linear;
  transition: transform 0.5s linear;
  -webkit-animation-duration: 1.5s;
  animation-duration: 1.5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.First_blur,
.blur {
  -webkit-animation-name: imageBlur;
  animation-name: imageBlur;
  opacity: 1;
  transition: .8s;
}
@-webkit-keyframes imageBlur {
  from {
      opacity: 0;
      -webkit-filter: blur(15px);
      -moz-filter: blur(15px);
      -ms-filter: blur(15px);
      -o-filter: blur(15px);
      filter: blur(15px);
  }
  to {
      opacity: 1;
      -webkit-filter: blur(0px);
      -moz-filter: blur(0px);
      -ms-filter: blur(0px);
      -o-filter: blur(0px);
      filter: blur(0px);
  }
}
@keyframes imageBlur {
  from {
      opacity: 0;
      -webkit-filter: blur(15px);
      -moz-filter: blur(15px);
      -ms-filter: blur(15px);
      -o-filter: blur(15px);
      filter: blur(15px);
  }
  to {
      opacity: 1;
      -webkit-filter: blur(0px);
      -moz-filter: blur(0px);
      -ms-filter: blur(0px);
      -o-filter: blur(0px);
      filter: blur(0px);
  }
}

/* ===============================================### 
コンテンツ共通設定
###=============================================== */


/* ===============================================### 
left_area
###=============================================== */
.FU250619summer .left__area{
  width: 50%;
}

.FU250619summer .left__area .content-sticky{
  position: sticky;
  top: 0;
}

.FU250619summer .left__area .image-wrapper{
  position: relative;
  width: 100%;
}

/************** image **************/
.FU250619summer .left__area .content__image{
  width: 100%;
  /* height: 100vh; */
}

.FU250619summer .left__area .content__image{
  height: 100vh;
}

.FU250619summer .image-wrapper .mv_pc_txt {
  width: 28rem;
  position: absolute;
  top: 17.4%;
  right: 6.6%;
  z-index: 2;
}

.FU250619summer .left__area .content__image img{
  height: 100vh;
  object-position: top center;
  display: block;
  max-width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 100%;
  min-height: 100%;
  object-fit: cover;
}


.txtbox {
  font-size: calc(24 * var(--formula));
  line-height: 2.18;
  font-feature-settings: "palt";
  letter-spacing: 0.05em;
  text-align: center;
  font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "Yu Gothic", "Open Sans", "メイリオ", sans-serif;
}
.credit p a {
  font-size: calc(26 * var(--formula));
  letter-spacing: 0.05em;
  font-family: "alumni-sans", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.credit .top,
.credit .btm {
  display: flex;
  justify-content: center;
}

/* ===============================================### 
right_area 共通
###=============================================== */
@media screen and (min-width: 768px) {
  .FU250619summer .right__area{
    width: 50%;
  }
}


/* ===============================================### 
contents スタイル
###=============================================== */
.flex-wrapper {
  display: flex;
}
@media screen and (max-width: 767px) {
  .flex-wrapper {
    display: block;
  }
}

section.contentsarea {
  background: url(../img/bg_01.jpg) no-repeat;
  display: block;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
}
.contentsarea .contents01 {
  padding-top: calc(113 * var(--formula));
}
.contentsarea .contents01 .text01 {
  width: calc(514 * var(--formula));
  margin: 0 auto;
}
.contentsarea .contents01 .txtbox {
  margin-top: calc(40 * var(--formula));
}


.contents02 {
  margin-top: calc(110 * var(--formula));
}
.contents02 .img01 {
  width: calc(630 * var(--formula));
  margin: 0 auto;
}
.contents02 .txtbox {
  margin-top: calc(68 * var(--formula));
}
.contents02 .img02 {
  width: calc(750 * var(--formula));
  margin: calc(70 * var(--formula)) auto 0;
}
.contents02 .credit {
  margin-top: calc(50 * var(--formula));
}
.contents02 .credit .top {
  gap: 0 calc(5 * var(--formula));
}
.contents02 .credit .btm {
  margin-top: calc(27 * var(--formula));
  gap: 0 calc(5 * var(--formula));
}


.contents03 {
  margin-top: calc(162 * var(--formula));
}
.contents03 .img03 {
  width: calc(480 * var(--formula));
  margin: 0 auto;
}


.contents04 {
  margin-top: calc(130 * var(--formula));
}
.contents04 .img04 {
  width: calc(750 * var(--formula));
  margin: 0 auto;
}
.contents04 .txtbox {
  margin-top: calc(66 * var(--formula));
}
.contents04 .img05box {
  width: calc(750 * var(--formula));
  margin: calc(70 * var(--formula)) auto 0;
  position: relative;
}
.contents04 .img05 {
  width: calc(600 * var(--formula));
  position: absolute;
  top: calc(40 * var(--formula));
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
}
.contents04 .credit {
  margin-top: calc(50 * var(--formula));
}
.contents04 .credit .top {
  gap: 0 calc(5 * var(--formula));
}


.contents05 {
  margin-top: calc(162 * var(--formula));
}
.contents05 .swiper {
  width: calc(630 * var(--formula));
  margin: 0 auto;
  position: relative;
}
.contents05 .swiper-pagination {
  position: inherit;
  margin: calc(42 * var(--formula)) auto 0;
}
.contents05 .txtbox {
  margin-top: calc(54 * var(--formula));
}
.contents05 .img07 {
  width: calc(630 * var(--formula));
  margin: calc(70 * var(--formula)) auto 0;
}
.contents05 .credit {
  margin-top: calc(48 * var(--formula));
}
.contents05 .credit .top {
  gap: 0 calc(5 * var(--formula));
}
.contents05 .credit .btm {
  margin-top: calc(27 * var(--formula));
  gap: 0 calc(5 * var(--formula));
}


.contents06 {
  margin-top: calc(162 * var(--formula));
}
.contents06 .img08 {
  width: calc(630 * var(--formula));
  margin: 0 auto;
}
.contents06 .txtbox {
  margin-top: calc(70 * var(--formula));
}
.contents06 .img09 {
  width: calc(750 * var(--formula));
  margin: calc(68 * var(--formula)) auto 0;
}
.contents06 .credit {
  margin-top: calc(48 * var(--formula));
}
.contents06 .credit .top {
  gap: 0 calc(5 * var(--formula));
}
.contents06 .credit .btm {
  margin-top: calc(27 * var(--formula));
  gap: 0 calc(5 * var(--formula));
}


.contents07 {
  margin-top: calc(162 * var(--formula));
}
.contents07 .img10 {
  width: calc(510 * var(--formula));
  margin: 0 auto;
}
.contents07 .credit {
  margin-top: calc(52 * var(--formula));
  text-align: center;
}



.contents08 {
  margin-top: calc(160 * var(--formula));
}
.contents08 .swiper {
  width: calc(750 * var(--formula));
  margin: 0 auto;
}
.contents08 .swiper-pagination {
  position: inherit;
  margin: calc(42 * var(--formula)) auto 0;
}
.contents08 .txtbox {
  margin-top: calc(56 * var(--formula));
}
.contents08 .credit {
  margin-top: calc(50 * var(--formula));
}
.contents08 .credit .top {
  gap: 0 calc(5 * var(--formula));
}


.contents09 {
  margin-top: calc(162 * var(--formula));
}
.contents09 .img12 {
  width: calc(750 * var(--formula));
  margin: 0 auto;
}
.contents09 .txtbox {
  margin-top: calc(68 * var(--formula));
}
.contents09 .img13 {
  width: calc(600 * var(--formula));
  margin: calc(69 * var(--formula)) auto 0;
}
.contents09 .credit {
  margin-top: calc(48 * var(--formula));
}
.contents09 .credit .top {
  gap: 0 calc(5 * var(--formula));
}
.contents09 .credit .btm {
  margin-top: calc(27 * var(--formula));
  gap: 0 calc(5 * var(--formula));
}


.contents10 {
  margin-top: calc(162 * var(--formula));
}
.contents10 .img14 {
  width: calc(480 * var(--formula));
  margin: calc(50 * var(--formula)) auto 0;
}
.contents10 .text02 {
  width: calc(265 * var(--formula));
  margin: calc(87 * var(--formula)) auto 0;
}
.contents10 .text03 {
  width: calc(540 * var(--formula));
  margin: calc(67 * var(--formula)) auto 0;
  padding-bottom: calc(161 * var(--formula));
}



/************** swiper **************/
.FU250619summer .swiper{
  position: relative;
}

.FU250619summer .swiper-pagination-bullet {
  width: calc(60 * var(--formula));
  height: calc(4 * var(--formula));
}

.FU250619summer .swiper-container-horizontal > .swiper-pagination-bullets{
  column-gap: calc(20 * var(--formula));
}

.FU250619summer .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{
  margin: 0;
}

/* .FU250619summer .swiper-pagination-bullets {
  position: relative;
  top: calc(30 * var(--formula));
  display: flex;
  align-items: center;
  justify-content: center;
  width: initial;
} */

.FU250619summer .swiper-pagination-bullet {
  position: relative;
  margin: 0;
  background: #dc8d97;
  border-radius: 0;
  opacity: 1;
}

.FU250619summer .swiper-pagination-bullet-active{
  background: #dc8d97;
}

.FU250619summer .swiper-pagination-bullet::before {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 0;
  height: 100%;
  content: "";
  background-color: #b91b30;
}

.FU250619summer .swiper-pagination-bullet-active::before {
    -webkit-animation: paginationAnime 5s linear forwards;
    animation: paginationAnime 5s linear forwards;
}

@-webkit-keyframes paginationAnime {
  100% {
    width: 100%;
    opacity: 1;
  }
}

@keyframes paginationAnime {
  100% {
    width: 100%;
    opacity: 1;
  }
}