html {

  margin: 0 auto;
  background: #fff; /* Fills the page */
  font-size: 62.5%;
  -webkit-overflow-scrolling: touch;
  overflow-x: hidden;
background-size:5800px;
  background-image: url("../images/mainbg.webp");
background-position: right top;
  max-width:1200px;
}

body {
  font-family: 'Arial',YuGothic,'Yu Gothic','Hiragino Kaku Gothic ProN',sans-serif;
  font-size: 14px;
  font-size: 1.4rem;
  background-color:#fff;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}
/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc { display: block !important; }
.sp { display: none !important; }
 
/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width: 750px) {
    .pc { display: none !important; }
    .sp { display: block !important; }
}

.bgzone{
  background-image: url("../images/mainbg.webp");
  padding:50px;
}
.whitebg{
  background-color:#fff;
}
/* カルーセル追加指定**************************************** */
    /* .carousel-inner の flex 指定を削除 */
    .carousel-item {
      text-align: center;
    }

    /* .row の余白を削除して中央揃え */
    .carousel-item .row {
      margin-left: 0;
      margin-right: 0;
      justify-content: center;
    }

/* スライダーの中身を少し縮小 */
.carousel-item .row {
  transform: scale(0.75); /* 90% に縮小 */
}

/* スライダー内の余白を調整 */
.carousel-inner {
  padding-bottom: 40px; /* インジケーターを見やすくする */

}

/* インジケーターの位置を調整 */
.carousel-indicators {
  bottom: -10px; /* 少し下げる */
}
/* 750px以下でスライダーのサイズを調整 */
@media (max-width: 750px) {
  .carousel-item .row {
    transform: scale(0.8); /* 少し縮小 */
  }
}
/* カルーセル追加指定**************************************** */

/* --- Bootstrap4/5 両対応：インジケーターを確実に丸く・黒にする --- */
.carousel-indicators li,
.carousel-indicators button,
.carousel-indicators [data-bs-target],
.carousel-indicators [data-target] {
  width: 12px !important;
  height: 12px !important;
  margin: 0 6px !important;
  padding: 0 !important;
  border-radius: 50% !important;        /* 丸くする */
  background-color: #000 !important;    /* 黒にする */
  background-image: none !important;    /* グラデ等がある場合キャンセル */
  opacity: 0.35 !important;             /* 非アクティブ時の薄さ */
  border: none !important;              /* 枠線を消す */
  box-shadow: none !important;          /* 影を消す */
  appearance: none !important;
  -webkit-appearance: none !important;
  vertical-align: middle !important;
  display: inline-block !important;
  box-sizing: border-box !important;
}

/* アクティブなものは濃く（完全に黒） */
.carousel-indicators .active,
.carousel-indicators .active[data-bs-slide-to],
.carousel-indicators .active[data-slide-to] {
  opacity: 1 !important;
  background-color: #000 !important;
}

/* ::before / ::after で装飾されているケースの除去 */
.carousel-indicators li::before,
.carousel-indicators button::before,
.carousel-indicators [data-target]::before,
.carousel-indicators [data-bs-target]::before,
.carousel-indicators li::after,
.carousel-indicators button::after {
  content: none !important;
  display: none !important;
}

/* オブジェ指定**************************************** */

/* メイン1 矢印が左上*/
.obje1{
  width:14%;
    top:23%;
    left: 16%;

    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);

    z-index:1;
    position: absolute;
    z-index:0;
}
/* メイン2 矢印が右上*/
.obje2{
  width:16%;
    top: 15%;
    right: 3%;

    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);

    z-index:1;
    position: absolute;
}
/* メイン3 右上の縦長キャッチコピー*/
.obje3{
  width:5%;
    top: 38%;
    right: 6%;

    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);

    z-index:1;
    position: absolute;
        z-index:2;
}
/* メイン4 女子*/
.obje4{
  width:40%;
    top: 22%;
    left: 20%;

    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);

    z-index:1;
    position: absolute;
        z-index:2;
}
/* メイン5 男子*/
.obje5{
  width:42%;
    top: 18%;
    left: 44%;

    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);

    z-index:1;
    position: absolute;
        z-index:1;
}
/* メイン6 メインタイトル*/
.obje6{
  width:86%;
    bottom: 0%;
    left: 50%;

    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);

    z-index:1;
    position: absolute;
        z-index:2;
}

/* 人配置*/
.man{
  width:15%;
    top: 70%;
    right: 0%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    position: absolute;
    z-index:2;
}
.woman{
  width:15%;
    top: 70%;
    right: 10%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    position: absolute;
    z-index:2;
}

   /*===================
    slider
====================*/

.scroll-container {
  width: 100%;
  height: 166px;
  overflow: visible;
}

.scroll-images {
  display: flex;
  animation: scroll-left 1s linear infinite;
  /* 重要: 幅は画像セットの合計分だけ自動で計算される */
}

.scroll-images img {
  height: 166px;
  width: auto;
  flex-shrink: 0; /* 画像が潰れないように */
}
@keyframes scroll-left {
  0% { transform: translateX(0); }
  100% { transform: translateX(calc(-1 * (100% / 2))); } 
  /* 2セットなので半分だけ左に移動 */
}

   /*===================
    slider追加
====================*/
:root {
  --img-width: 2578px; /* ← 実際の画像幅 */
  --height: 166px;     /* 表示高さ（任意で変更OK） */
  --duration: 50s;     /* ループ時間（短くすると速くなる） */
}



/* 外枠：画像がはみ出さないように */
.slider {
  width: 100%;
  overflow: hidden;
  border: none;
  padding:50px 0 0 0;
  
}

/* スライドトラック */
.slide-track {
  display: flex;
  animation: scroll var(--duration) linear infinite;
  will-change: transform;
  transform: translateZ(0); /* GPUで滑らかに */
}

/* 画像設定 */
.slide-track img {
  width: var(--img-width);
  height: var(--height);
  flex-shrink: 0;
  user-select: none;
  pointer-events: none;
  display: block;
}

/* ピクセル単位で動かすのがカクつかないコツ */
@keyframes scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(calc(-1 * var(--img-width))); }
}

@media (max-width: 740px) {
  :root { --height: 18vw; --duration: 30s;--img-width: 500px; }
  
}

   /*===================
    ふわふわ他
====================*/
.fuwafuwa {
  animation: fuwafuwa 3s infinite ease-in-out .8s alternate;

  display: inline-block;
  transition: 1.5s ease-in-out; 
    width:15vw; 
}
 
@keyframes fuwafuwa {
  0% {
    transform:translate(0, 0) rotate(-7deg);
  }
  50% {
    transform:translate(0, -7px) rotate(0deg);
  }
  100% {
    transform:translate(0, 0) rotate(7deg);
  }
}
 
.balloon {
 

    animation: sway 3s linear infinite; /* swayというアニメーションを等速で4秒かけて無限に行う。 */
}
@keyframes sway {
    /* 最初と最後の位置 */
    0%,
    100% {
        transform: translateY(0px);
    }

    /* 途中の位置 */
    50% {
        transform: translateY(18px);
    }
}

.balloondelay {
 

    animation: sway 4s linear infinite; /* swayというアニメーションを等速で4秒かけて無限に行う。 */
}
@keyframes sway {
    /* 最初と最後の位置 */
    0%,
    100% {
        transform: translateY(23px);
    }

    /* 途中の位置 */
    50% {
        transform: translateY(0px);
    }
}
.dance{ 
  display: inline-block;
  animation: textAnim 1s linear infinite alternate;
}

@keyframes textAnim{
  from{
    transform-origin: left bottom;
    transform: rotate(-3deg);
  }
  to{
    transform-origin: right bottom;
    transform: rotate(+3deg);
  }
}
.dancedelay{ 
  display: inline-block;
  animation: textAnim 0.7s linear infinite alternate;
}

@keyframes textAnim{
  from{
    transform-origin: left bottom;
    transform: rotate(-2deg);
  }
  to{
    transform-origin: right bottom;
    transform: rotate(+2deg);
  }
}
.dancedelay2{ 
  display: inline-block;
  animation: textAnim 1s linear infinite alternate;
}

@keyframes textAnim{
  from{
    transform-origin: left bottom;
    transform: rotate(-2.5deg);
  }
  to{
    transform-origin: right bottom;
    transform: rotate(+2.5deg);
  }
}

   /*===================
    ふわふわここまで
====================*/


@keyframes scroll-left {
  0% { transform: translateX(0); }
  100% { transform: translateX(calc(-1 * (100% / 3))); } 
  /* 2セットなので半分だけ左に移動 */
}

/* オブジェ指定**************************************** */

main{
  width: 600px;
  margin: 0 auto;
}

img{
  vertical-align: bottom;
  width: 10%;
}

.images{
  display: flex;
}

.main{
  width: 150px;
  margin-bottom: 8px;
}

ul{
  list-style: none;
  padding: 0;
  margin: 0;
}

nav{
  margin-bottom: 8px;
}

nav ul{
  display:flex;
  justify-content: space-between;
}

nav li{
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 12px;
  padding: 4px;
  text-align: center;
  cursor: pointer;
  user-select: none;
}
nav li:hover{
  background-color: #f8f8f8;
}

img.age{
margin-top:-30px;

}
#play{
width: 140px;
}

#prev,#next{
  width: 60px;
}

.thumbnails{
  display: grid;
  grid-template-columns: repeat(5,56px);
  gap: 5px;
}

.thumbnails li{
  cursor: pointer;
  opacity: 0.4;
}

.thumbnails li:hover,
.thumbnails li.current{
  opacity: 1.0;
}

.thumbnails img{
  width: 56px;
}















img{
width:100%;
margin: 0px;
padding: 0px;
vertical-align: bottom;
}

video{
width:100%;
margin: 0px;
padding: 0px;
vertical-align: bottom;
}
.area{
position:relative;
}
.topimages{
width:40%;
top:45%;
right:0%;
position:absolute;
}
.pchead{
max-width:650px;
display:block;
margin:50px auto;
}
@media only screen and (max-width: 740px) {
.pchead{
max-width:90vw;
display:block;
margin:0px auto;
}
}
.pcheadb{
max-width:480px;
display:block;
margin:50px auto;
}
.ctop{
 margin-top:130px;
}
.card{
border:none!important;
}
header{

    position: sticky;
    top: 0px;
    left: 0;

    z-index: 5;

}

footer{
	padding:0;
	height:300px;
  max-width:1300px;
  margin:0 auto;
  text-align:center;
}
footer p.chusyaku{
color:#00a0e9;
font-size:0.9rem;
display: inline-block;
margin:0 auto;
text-align:left;
}
footer p.address{
color:#00a0e9;
font-size:1.1rem;
margin-top:2vw;

}


  * {
 margin: 0;
 padding: 0;

 box-sizing: border-box;

}

*:focus {
outline: none;
}

ul {
  list-style:none;
  padding:0px;

}
ul.yoko {
  list-style:none;
  display:flex;
  padding:0px;
}
ul.yoko li{
  width:100%;
  padding-right:10px;
}
ul.yoko li:last-child{
  width:100%;
  padding-right:0px;  
}
ul.yokolife {
  list-style:none;
  display:flex;
  padding:0px;
  max-width:650px;
  margin:0 auto;
}
ul.yokolife li{
  width:100%;
  padding-right:30px;
}
ul.yokolife li:last-child{
  width:100%;
  padding-right:0px;  
}
ul.yokof {
  max-width:360px;
  list-style:none;
  display:flex;
  padding:0px;
  margin:50px auto;
}
ul.yokof li{
  width:80%;
  padding-right:30px;
}
ul.yokof li:last-child{
  width:73%;
  padding:0;  
}
/* スマートフォンul */
@media only screen and (max-width: 750px) {
.ctop{
 margin:5vw auto;
 display:block;
}
.topimages{
width:75%;
top:40%;
right:0%;
position:absolute;
}

.inner{
max-width:95vw;
margin:5vw auto;
display:block;
}

ul.yoko {
  list-style:none;
  display:block;
  padding:0px;
}
ul.yoko li{
  width:100%;
  margin:3vw auto;
  padding-right:0;
}
ul.yoko li:last-child{
  width:100%;
  margin:3vw auto; 
  padding-right:0;
}
ul.yokolife {
  list-style:none;
  display:flex;
  padding:0px;
  max-width:70vw;
}
ul.yokolife li{
  width:100%;
  margin:3vw auto;
  padding-right:5vw;
}
ul.yokolife li:last-child{
  width:100%;
  margin:3vw auto; 
  padding-right:0;
}

ul.yokof {
  max-width:90vw;
  list-style:none;
  display:flex;
  padding:0px;
  margin:5vw auto;
}
ul.yokof li{
  width:80%;
  padding-right:3vw;
}
ul.yokof li:last-child{
  width:73%;
  padding:0;  
}
.spfoot{
  max-width:70vw;
  margin:5vw auto;  
}



}


.pcfoot{
  max-width:360px;
  margin:50px auto;  
}



div {
  padding: 0px;
}



a{
text-decoration: none;
color:black;

}

/*スクロールヒント --------------------------------------------------*/
.table{
    overflow-x: scroll;
}
.table img{
    width:750px;
}
/*スクロールヒント */
.carousel-item img{width:90%;margin:0 auto;}

h1{
 margin: 0;
 padding: 0;

}


h2{

font-weight:bold;
font-size: 200%;
color:#000;

}

h3{

font-weight:bold;
font-size: 100%;
color:#000;
margin-bottom:5px;

}

h4{
margin-top:20px;
}
h5{
margin-top:20px;
}
h5 img{
max-width:501px;
}

h6{

}






*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    max-width: 1300px;
}
.content{
    margin: 0 auto;
    padding: 40px;

}


.btb{

  margin:20px auto 20px;
  text-align: center;

}



p.apli{
color:#FFF;
background-color:#ba2589;
padding-left:5px;
}

p.shopmawari{
  margin-top:10px;
  display:inline-block;
  font-size: 80%;
}







.carousel-control-next,
.carousel-control-prev {
    filter: invert(100%);
}





.fade { max-width: 600px; margin: 0 auto 50px; padding: 0; height: auto;}
.fade img{ width: 100%;}

.close_btn {
  position: absolute;
  top: 14px;
  right: 16px;
  font-size: 30px;
  cursor: pointer;
  z-index: 4;
}

.modal input:checked ~ .modal__content {
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.5s;
}


/* メニュー部分の色　largeは大見出し smallはキャッチコピー */
.large{
  font-size:120%;
  color:#FFF;
}
.small{
  font-size:70%;
  color:#FFF;
}


@media ( prefers-reduced-motion: reduce ) {
   .sip-slider, .swiper-container, .swiper-wrapper, .swiper-slide, .swiper-slide img{
    transition-duration: 100ms !important;
  }
}


.fadein {
  opacity : 0;
  transform: translateY(20px);
  transition: all 1s;
}

.fadeind {
  opacity : 0;
  transform: translateY(50px);
  transition: all 1.5s;
}



#row-1st #row-1st-in img{
      margin:13px;
    }
.flexwraptitle{

  display: flex;
        flex-wrap: wrap;
      width: 78.3vw;
      max-width: 940px;
      margin: auto;
}
.leftbox{ width: 56%;

    padding-right: 4vw;
}
.rightbox{ width: 44%;
            margin-top:10vw;

}

.rightbox p{
      color:#00a0e9;
      line-height:2;
}


@media only screen and (max-width: 740px) {
/* メイン1 矢印が左上*/
.obje1{
  width:14%;
    top:18%;
    left: 16%;

    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);

    z-index:1;
    position: absolute;
    z-index:0;
}
/* メイン2 矢印が右上*/
.obje2{
  width:16%;
    top: 12%;
    right: 0%;

    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);

    z-index:1;
    position: absolute;
}
/* メイン3 右上の縦長キャッチコピー*/
.obje3{
  width:8%;
    top: 29%;
    right: 2%;

    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);

    z-index:1;
    position: absolute;
        z-index:2;
}
/* メイン4 女子*/
.obje4{
  width:42%;
    top:20%;
    left: 17%;

    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);

    z-index:1;
    position: absolute;
        z-index:2;
}
/* メイン5 男子*/
.obje5{
  width:44%;
    top: 16%;
    left: 44%;

    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);

    z-index:1;
    position: absolute;
        z-index:1;
}
/* メイン6 メインタイトル*/
.obje6{
  width:92%;
    bottom: 22%;
    left: 49%;

    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);

    z-index:1;
    position: absolute;
        z-index:2;
}

/* 人配置*/
.man{
  width:18%;
    top: 47%;
    right: -5%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    position: absolute;
    z-index:2;
}
.woman{
  width:18%;
    top: 47%;
    right: 0%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    position: absolute;
    z-index:2;
}






.flexwraptitle{

  display: flex;
        flex-wrap: wrap;
      width: 78.3vw;
      max-width: 940px;
      margin: auto;
}
.leftbox{ width: 90%;


}
.rightbox{ width: 90%;
           
margin:0 auto;
}

.rightbox p{
      color:#00a0e9;
      line-height:2;
      font-size:0.9rem;

}

.wrapper{
  margin:10vw auto 50px;
  text-align: center;
  max-width:740px;
}
  /*===================
    slider
====================*/

.scroll-container {
  width: 100%;
  height: 10vw;
  overflow: hidden;
}

.scroll-images {
  display: flex;
  animation: scroll-left 3s linear infinite;
  /* 重要: 幅は画像セットの合計分だけ自動で計算される */
}

.scroll-images img {
  height: 10vw;
  width: auto;
  flex-shrink: 0; /* 画像が潰れないように */
}


}