@charset "utf-8";

html, body {
    margin: 0;
    padding: 0;

    overflow-x: hidden;
	transform-origin: top center;
	animation: loading 1s;
}

@keyframes loading {
	0% {opacity: 0;transform: scale(1.05);}
	100% {opacity: 1;transform: scale(1);}
}

#container{
    margin: 0 auto;
    width: 100%;
    max-width :390px;
    background-color: white;
    background-image: url(back3.png); 
    background-repeat: repeat-y;
    background-position: right 0pt top 200pt;
    overflow: hidden;
}

/*------
ここからヘッダー
------*/

#header{
    background-color: white;
}

.header_back{
    position: relative;
    width: 100%;
    height: 167px;
    margin-top:47px;
    margin-bottom:47px;
}

.tutuanna{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: 0 auto;
    padding-top:94px;
}

.gummi1{
    position:absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: 0 auto;
    padding-left:270px;
    padding-top:200px;
    height: 110px
}

.logo{
    position:absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: 0 auto;
    padding-left:30px;
    padding-top:570px;

}

.douga{
    position:relative;
    width: 390px;
    height: 527px;
}

.gummi2{
    position:absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: 0 auto;
    padding-right:250px;
    padding-top:750px;
    height: 90px;
}


/*------
ここからイントロ
------*/

#intro{
    padding-top:80px;
}

.gr1{
    position:relative;
    top:-100px;
    left:167px;
}

.introtx h1{
    position:absolute;
    top:871px;
    color:white;
    display: inline-block;
    margin-top:10px;
    margin-bottom:10px;
    background:black;
    padding:6px;
    font-family: toppan-bunkyu-midashi-min-st, serif;
    font-style: Extrabold;
    font-size: 31px;

}

.introtx2 h1{
    position:absolute;
    top:939px;
    color:white;
    display: inline-block;
    margin-top:10px;
    margin-bottom:10px;
    background:black;
    padding:6px;
    font-family: toppan-bunkyu-midashi-min-st, serif;
    font-style: Extrabold;
    font-size: 31px;

}

.intropic{
    position:relative;
    top:-150px;
    height:576px;
    width: 362px;
    margin: auto;
    display: block;
}

.introduce{
    position:relative;
    top:-200px;
    margin-left:57px;
    margin-bottom:-200px;
    padding-bottom:20px;
    background-color: #ffffff;
    border-top: 3px solid #000000;
    border-left: 3px solid #000000;
    border-bottom: 3px solid #000000;

}

.fadein{
    opacity: 0;
    transform: translateY(50px); /* 50px下に配置 */
    transition: opacity 1s, transform 1s;
}

.fadein.visible {
  opacity: 1;
  transform: translateY(0);
}


.introduce h1{
    font-family: "Jacquard 24", system-ui;
    font-size: 24px;
    margin-left:37px;
    margin-top:30px;
    margin-bottom:2px;
    font-weight: 400;
}

.introduce h2{
    font-family: "Jacquard 24", system-ui;
    font-size: 36px;
    margin-left:37px;
    font-weight: 400;
    margin-top:0px;
}

.introduce h3{
    font-family: hiragino-mincho-pron, sans-serif;
    font-weight: 300;
    font-size:16px;
    text-align: center;
    line-height:200%;
}

.gummi3{
    position:relative;
    bottom:100px;
    margin: 0 auto;
    height: 100px;
}


/*------
ここからCODE1
------*/

#code1{
    width: auto;
    margin-bottom:200px;
}

.gummi4{
    margin-left:80px;
}

.model{
    height:532px;
    margin: auto;
    display: block;
}

.comment{
    position:relative;
    margin-bottom:-100px;
    top:-100px;
    left:22px;
    background-color: #ffffff;
    border-top: 3px solid #000000;
    border-left: 3px solid #000000;
    border-bottom: 3px solid #000000;
    width:368px;
    height:250px;
}

.comment h1{
    color:black;
    margin:15px;
    margin-bottom:10px;
    margin-left:25px;
    padding:6px;
    font-family: hiragino-mincho-pron, sans-serif;
    font-weight: 300;
    font-size: 34px;
    font-feature-settings: "palt";
}

.comment h2{
    color:black;
    font-family: hiragino-mincho-pron, sans-serif;
    font-weight: 300;
    font-size: 15px;
    margin-left:25px;
    margin-right:25px;
    margin-top:0px;
    text-align: justify;
    line-height: 1.7;
}

.gummi5{
    height: 110px;
    margin-left:-20px;
}


.awesome{
    font-family: "Baskervville SC", serif;
    font-style: normal;
    background-color: black;
    color: white;
    font-size: 18px;
    padding:5px;
    padding-left:5px;
    padding-right:5px;
    margin-top:80px;
    width:175px;
    text-align: center;
}

.hito{
    display: flex;
}

.katagaki{
    background-color: black;
    margin-top:20px;
    height:102px;
    width:212px;
}

.katagaki h2{
    font-family: hiragino-mincho-pron, sans-serif;
    font-weight: 300;
    font-size: 14px;
    color: white;
    margin-left: 27px;
    margin-bottom:0px;
}

.katagaki h1{
    font-family: hiragino-mincho-pron, sans-serif;
    font-weight: 600;
    font-size: 32px;
    color: white;
    margin-left: 27px;
    margin-right: 70px;
    margin-top:5px;
    white-space: nowrap;
}



.kao{
    height:220px;
    margin-top:-60px;
}



.shop{
    background-color: white;
    border-top: 3px solid #000000;
    border-bottom: 3px solid #000000;
    margin-top:50px;
}

.shop p{
    font-family: hiragino-mincho-pron, sans-serif;
    font-weight: 600;
    font-size: 32px;
    color: #000000;
    margin-left:30px;
}

.shop span{
    font-family: "Baskervville SC", serif;
    font-style: normal;
    font-size: 32px;
    font-weight: 400;
    color: #000000;
}

.kutusita{
    width:262px;
    margin: auto;
    display: block;
}

.k_name{
    font-family: hiragino-mincho-pron, sans-serif;
    font-weight: 300;
    font-size: 24px;
    text-align: center;
    margin-top:20px;
    margin-bottom:20px;
}

.sansoku{
    background-color: #000000;
    font-family: "yu-gothic-pr6n", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    color: #ffffff;
    width: 198px;
    text-align: center;
    margin: auto;
    display: block;
    margin-top: 10px;
}

.value{
    font-family: hiragino-mincho-pron, sans-serif;
    font-weight: 300;
    font-size: 24px;
    color: #000000;
    text-align: center;
    margin: 10px;
}

.online{
    font-family: "yu-gothic-pr6n", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 20px;
    color: #000000;
    background-color: #00FF00;
    border-radius: 23.5px;
    width: 273px;
    text-align: center;
    margin: auto;
    display: block;
    margin-bottom:50px;
}

.online a{
    text-decoration: none;
    color:black;
}

/*------
ここからスライダー
------*/

/* --- スライダー全体のコンテナ --- */
  .slider-container {
    position: relative;
    width: 262px;
    max-width: 600px; /* スライダーの最大幅 */
    overflow: hidden;
    background: #fff;
    margin: auto;
    display: block;
  }

  /* --- 画像が並ぶスクロール領域 --- */
  .slider {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory; /* スクロールを画像ごとにピタッと止める */
    scroll-behavior: smooth;
    height: 100%;
    
    /* スクロールバーを隠す設定 */
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
  }
  .slider::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
  }

  /* --- 個々の画像 --- */
  .slider img {
    flex: 0 0 100%; /* 幅を親要素の100%に固定 */
    width: 262px;
    object-fit: cover; /* 画像の比率を維持してトリミング */
    scroll-snap-align: center; /* 中央にスナップ */
  }

  /* --- インジケーター（丸い点）のコンテナ --- */
  .indicators {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 10;
  }

  /* --- 丸い点のスタイル --- */
  .dot {
    width: 12px;
    height: 12px;
    background-color: lightgrey;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s;
  }

  /* アクティブな点のスタイル */
  .dot.active {
    background-color: #fff;
    transform: scale(1.2);
  }


#footer{
    background-color: #000000;
}

#footer h1{
    color: white;
    margin:0px;
    font-size: 14px;
    padding:10px;
    text-align: end;
}