@charset "utf-8";
/* CSS Document */

/* reset *************************************************************/
body {margin:0; font-family:arial,sans-serif;}
h1, h2, h3, h4, h5, h6, p {margin:0; font-size:100%; font-weight:normal; line-height:1.3;display:block;}
article,footer,header {display:block;}
ul,li {list-style:none; padding:0;margin:0;}
dl,dt,dd {padding:0; margin:0;}
table,tr,td {border:0;padding:0;margin:0;}
a {display:block;color:#ff6699;text-decoration:none;}
img {vertical-align:baseline; border:0; padding:0; margin:0;}
div {margin:0;padding:0;}
/* //reset *************************************************************/
*{
box-sizing: border-box;
}
body {
  font-family: "m-plus-1p", sans-serif;
  font-size: 1.6rem;
  background-color: #fff;
  position: relative;
  max-width: 750px;
  width: 100%;
  margin: 0 auto;
}
img,video{
  max-width: 100%;
  width: auto;
  height: auto;
  margin:0 auto;
  vertical-align: bottom;
}
video{
 max-width: 100%;
 /* 白線消す*/
 filter: drop-shadow(0px 0px rgba(0,0,0,0));
 outline: none;
 border: none;
}
#wrapper {
  overflow: hidden;
  max-width: 750px;
  width: 100%;
}
.bg-video {
  position: fixed;
  left: 0;
  top: 0;
  z-index: -1;
  height: auto;
  overflow: hidden;
}
.bg-video video {
    min-height: 100vh;
    max-width: 140% !important;
    max-height: 200% !important;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.bg-video::before {
  display: block;
  content: "";
  width: 100vw;
  height: 100vh;
  position: absolute;
  left: 0;
  top:0;
  z-index: 1;
}

/******************************/
/*section1*/
/******************************/

.fV01{
  position: relative;
  margin-top: -10%;
  
}
.fv{
width: 100vw;
height: 160vw;
max-height: calc(768px * 1.6);
}

.section1,.background02,.button_wrapper{
  position: relative;
}
.logo{
  position: absolute;
  top:8%;
  left:2%;
  width: 50%;
}
.logo img{
  width: 79%;
}
.background02{
text-align: center;
margin-bottom:-10%;
}
.title01{
  position:absolute;
  bottom: 5%;
  width: 100%;
  margin: 0 auto;
  right:0;
  left:0;
}
.button01{
  position:absolute;
  bottom: 82%;
  width: 83.2%;
  margin:0% auto;
  right:0;
  left:0;
}
.section01_doinnrann{
  position:absolute;
  bottom: 19%;
  width: 100%;
  margin:0 auto;
  right:0;
  left:0;
  text-align: center;
  z-index: 3;
}
.section02_smartphone_video{
  position: absolute;
  z-index:-1;
  width:41%;
  top:28%;
  left:3%;
  clip-path: inset(1.5% 0% 0% 0% round 6.9%);
  z-index:2;
}
.button02{
  position:absolute;
  bottom: 4%;
  width: 83.2%;
  margin:0 auto;
  right:0;
  left:0;
}

/******************************/
/*section2*/
/******************************/
.section2{
margin:10% auto;
background: rgba(0, 0, 0, 0.8);
}
.about_tsubaki{
width: 96.4%;
margin: 10% auto;
padding-top: 10%;
}
.button_wrapper{
position: relative;

}
.button03{
width: 83.2%;
position: absolute;
top: 10%;
right:0;
left:0;
margin:0 auto;
}

/******************************/
/*section3*/
/******************************/
.section3{
margin:10% auto;
background: rgba(0, 0, 0, 0.8); 
margin-top: -10%;
}
.section03_title{
width: 80%;
margin:10% auto;
    padding-top: 10%;
}

.voice01,.voice02,.voice03{
	display:flex;
  justify-content: center;
  margin:10% auto;
}
.photo01{
  width:27%;
  
}
.balloon01{
  width: 47%;
}

.photo02{
  width:27%;
}
.balloon02{
  width: 47%;
}

.photo03{
  width:27%;
}
.balloon03{
  width: 47%;
}

.section03_text02{
  width: 91%;
  margin:10% auto;
}

/* 右から左に移動しながらフェードイン */
.fadeInLeft {
    opacity: 0;
    transform:  translate(-100px, 0);
}
/* 左から右に移動しながらフェードイン */
.fadeInRight {
    opacity: 0;
    transform: translateX(100px);
}
/* フェードインアニメーション */
@keyframes fadeIn {
    0% {
    }
    100% {
        opacity: 1;
        transform: translate(0);
    }
}
/* フェードインさせるクラス */
.fadeIn {
    animation-name: fadeIn;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

/*---------
slider
-------------*/
/* 今回は未使用
.slider_wrapper {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 8px;
}
.slider_wrapper::-webkit-scrollbar { height: 0; }
.slider_wrapper { scrollbar-width: none; }


.autoplay-slider {
  display: flex;
  min-width: 100%;
  width: min-content;
}
.slider-left {
  animation: 30s linear infinite sliderAnimation;
}
.slider-right {
  animation: 30s linear infinite reverse sliderAnimation;
}
.slider{
  width: 100%;
  
  margin: 0 auto;
  overflow: hidden;
 
}
.track{
  display: flex;
  will-change: transform;
  animation: snapSlide 12s ease-in-out infinite;
}
.slide {
  flex: 0 0 100%;
}
.slide img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.slide video {
  border-radius: 8px;
}
@keyframes snapSlide{
  0%    { transform: translateX(0%); }
  16%   { transform: translateX(0%); }
  20%   { transform: translateX(-100%); }
  36%   { transform: translateX(-100%); }
  40%   { transform: translateX(-200%); }
  56%   { transform: translateX(-200%); }
  60%   { transform: translateX(-300%); }
  76%   { transform: translateX(-300%); }
  80%   { transform: translateX(-400%); }
  100%  { transform: translateX(-400%); }
}
.slider:hover .track{
  animation-play-state: paused;
}*/
.slider_wrapper {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  width: 100%;
  margin: auto;
}

.slider_wrapper::-webkit-scrollbar { display: none; }
.slider_wrapper { scrollbar-width: none; }

.slide {
  flex: 0 0 100%;            /* 1画面に1枚表示 */
  scroll-snap-align: start;  /* スナップでピタッと止まる */
}

.slide img {
  width: 100%;
  display: block;
  object-fit: cover;
}
/******************************/
/*スライド*/
/******************************/
/* スライドの動き等速 */
.swiper-wrapper {
  width: 100%;
  overflow: hidden;
  transition-timing-function: linear;
  }


/******************************/
/*section4*/
/******************************/
.section4{
background: rgba(0, 0, 0, 0.8); 
margin-top: -10%;
margin-bottom: -10%;
}
.section04_slide{
  width: 100%;
  display: flex;
  margin: 10% auto;
animation: slide 24s linear infinite;
}
.slidevideo{
  min-width: 30%;
  padding-right: 3%; 
}
.kadomaru{
border-radius:12px;
}

/* スライダー部分の設定 */
.gallery_slide {
  display: flex; /* 横並びにする */
  width: 100%; /* 横幅いっぱいにする */
  animation: slide 24s linear infinite; /* アニメーションの設定 */
}

/* 各アイテムの設定 */
.gallery_slide li {
  flex: 0 0 25%; /* 1つの画像が全体の4分の1の幅を取る */
  width: 100%; /* 幅を指定 */
}

/* アニメーション（スライド） */
@keyframes slide {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%); /* 1周分の移動 */
  }
}

.section04_text{
width: 80%;
margin:10% auto;
}

.button04{
width: 83.2%;
margin:10% auto;
margin-top: 10%;
padding-bottom: 10%;
}


/******************************/
/*flow*/
/******************************/
.flow{
width: 100%;
display: block;
padding-bottom: 0%;
}


/******************************/
/*footer*/
/******************************/
footer{
	background-color:#000;
  width: 100%;
  height: auto;
  margin: 0 auto;
  text-align: center;
}
footer p{
	color:#fff;
	display:inline-block;
	padding:2.25%;
	font-size:96%;
}
.fadein {
    opacity : 0;
    transform : translate(0, 50px);
    transition : all 300ms;
}
.fadein.scrollin {
    opacity : 1;
    transform : translate(0, 0);
}

/******************************/
/*ボタンアニメーション*/
/******************************/
.button01,.button02,.button03,.button04,.title01{
  animation-name:button04 ;	/* アニメーション名の指定 */
  animation-delay:0s;		/* アニメーションの開始時間指定 */
  animation-duration: 1s;	/* アニメーション動作時間の指定 */
  animation-timing-function: ease-in-out;
  /* アニメーションの動き（徐々に早く徐々に遅く）*/
  animation-iteration-count: infinite; /* アニメーションをループさせる */
  }
  @keyframes button04{
  0% {
  transform: scale(1);
  }
  40% {
  transform: scale(1);
  }
  50% {
  transform: scale(1.1);
  }
  60% {
  transform: scale(1);
  }
  100% {
  transform: scale(1);
  }
  }

/******************************/
/*フェードイン*/
/******************************/

.fadein{
  opacity: 0;
  transform: translate(0,0);
  transition: all 1.7s;
&.fadein-left{
    transform: translate(-30px,0);
}
&.fadein-right{
    transform: translate(30px,0);
}
&.fadein-up{
    transform: translate(0,-30px);
}
&.fadein-bottom{
    transform: translate(0,30px);
}
&.scrollin{
  opacity: 1 !important;
  transform: translate(0, 0) !important;
}
}
/*---------
スクロール上下
-------------*/
@keyframes updown {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, -30px);
  }
  100% {
    transform: translate(0, 0);
  }
}
/*---------
▼ 自動スライド
-------------*/
.autoplay {
  animation: slideLoop 10s infinite;
}

@keyframes slideLoop {
  0%, 15%   { scroll-snap-align: start; scroll-padding-left: 0; transform: translateX(0%); }

  
  
}


/*---------
ブルブル
-------------*/
.buruburu {
  animation: hurueru .1s  infinite;
}

.buruburu2 {
  display: inline-block;
  animation: hurueru2 .1s  infinite;
}
@keyframes hurueru {
  0% {transform: translate(0px, 0px) rotateZ(0deg)}
  25% {transform: translate(2px, 2px) rotateZ(1deg)}
  50% {transform: translate(0px, 2px) rotateZ(0deg)}
  75% {transform: translate(2px, 0px) rotateZ(-1deg)}
  100% {transform: translate(0px, 0px) rotateZ(0deg)}
}

@keyframes hurueru2 {
  0% {transform: translate(0px, 0px) rotateZ(0deg)}
  25% {transform: translate(1px, 30px) rotateZ(1deg)}
  50% {transform: translate(1px, 30px) rotateZ(0deg)}
  75% {transform: translate(1px, 30px) rotateZ(-1deg)}
  100% {transform: translate(1px, 0px) rotateZ(0deg)}
}

@media screen and (min-width:768px) and ( max-width:1024px) {
.section02_smartphone_video{
  position: absolute;
  z-index:-1;
  width:41%;
  top:28.%;
  left:3%;
  clip-path: inset(2.5% 0% 0% 0% round 9%);
  z-index:2;
}
.slider_wrapper { max-width: 960px; margin: 0 auto; }
}
@media screen and (min-width: 751px) {
  body {font-size:24px;}
  #wrapper {width:750px;margin:auto;}
  body::before {
    display: block;
    background-size: auto;
}
.recommend-item{
  font-size: 1.7rem;
}
}
@media screen and (max-width: 750px) {
  body {font-size:14px;}
  #wrapper {width:100%;}
  body::before {
    display: block;
    background-size: 100% auto;
}
footer p{
  font-size: 3vw;
}
}