body {
	margin: 0;
	padding: 0;
	color: #000000;
	background-color: #fff;
}

body img {
    width: 100%;
	border: 0;
	vertical-align: bottom;/*余白削除*/
}

#container {
}


.pc {
	display:block;
}
.sp {
	display:none;
}
	
.st_wrap {
		background-color: #fff;
	width: 100%;
	max-width: 1000px;
	margin: auto;
	padding: 0;
	}
	
	#main_ {
	width: 700px;
		margin: auto;
	}
	
	.w_600 {
	width: 600px;
		margin: auto;
	}
	
	.w_600 img {
	width: 100%;
	}
	
.main_copy {
	width: 100%;
	margin: 3% auto 1%;
	padding: 0 0 2%;
	text-align: center;
	font-size: 44px;
	font-family: "century-gothic", sans-serif;
	font-weight: 700;
	font-style: normal;
	line-height: 0.5em;
	color: #000;
	}

.main_copy span {
	font-size: 14px;
	color: #000;
	font-family: "century-gothic", sans-serif;
	font-weight: 700;
	font-style: normal;
	line-height: 0.5em;
	}

.main_copy p {
	width: 70%;
	margin: auto;
	font-size: 28px;
	color: #000;
	font-family: "kozuka-gothic-pr6n", sans-serif;
	font-weight: 400;
	font-style: normal;
	line-height: 2.4em;
	letter-spacing: 0.1em;
	}

.Lead {
	text-align: center;
	font-size: 16px;
	font-family: "kozuka-gothic-pr6n", sans-serif;
	font-weight: 400;
	font-style: normal;
	line-height: 2.1em;
    margin: 4% auto 8%;
	color: #000;
	letter-spacing: 0.11em;
}

.Lead span {
	font-size: 24.5px;
	line-height: 3.5em;
	font-family: "kozuka-gothic-pr6n", sans-serif;
	font-weight: bold;
	font-style: normal;
	letter-spacing: 0.13em;
}

span.marker {
    background-color: #e1fc2a;
	padding: 1% 1.6% 1% 2.4%;
}

.scroll_box{
	width: 14%;
	margin: 2% auto 5%;
}

.scroll_box img{
	width: 100%;
}

.fluffy {
  animation: fluffy 3s infinite;
}

@keyframes fluffy {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-15px);
  }
}


.navi_box {
	width: 94%;
	margin: auto;
}

.navi_box img {
	float: left;
	width: 30%;
	margin: 1.5%;
	border: solid 1px #000;
	border-radius: 20px;
}

.navi_style {
	padding-top: 70px;
}

.style_img_1 {
	border-radius: 10px 0 0 0px;
}

.style_img_2 {
	border-radius: 0 10px 0px 0;
}

.chapter_content {
	width: 100%;
	margin:0 auto 0;
	padding: 3.3% 3.5% 3%;
	position: relative;
	z-index: 100;
	font-size: 18px;
	letter-spacing: 0.01em;
	color: #000;
	font-family: "century-gothic", sans-serif;
	font-weight: 700;
	font-style: normal;
	position: relative;
	background-color: #f1f1f1;
	box-sizing: border-box;
	border-radius: 0 0 10px 10px;
	line-height: 1em;
}

.chapter_content p {
  font-size: 11.5px;
	letter-spacing: 0.01em;
	color: #000;
	font-family: "kozuka-gothic-pr6n", sans-serif;
	font-weight: 400;
	font-style: normal;
	position: relative;
	line-height: 1.4em;
	padding-top: 3%;
}

.chapter_content a{
	font-size: 11.5px;
	color: #000;
	text-decoration: underline;
	line-height: 0em;
	padding-bottom: 3%;
	font-family: "kozuka-gothic-pr6n", sans-serif;
	font-weight: 400;
	font-style: normal;
}

.chapter_content a:hover{
	color: #000;
	text-decoration: none;
	font-family: "kozuka-gothic-pr6n", sans-serif;
	font-weight: 400;
	font-style: normal;
}

.a_non {
	font-size: 11.5px;
	color: #000;
	text-decoration: underline;
	line-height: 0em;
	padding-bottom: 3%;
	font-family: "kozuka-gothic-pr6n", sans-serif;
	font-weight: 400;
	font-style: normal;
	pointer-events: none;
}


.styleimg {
	float: left;
	width: 50%;
	margin: 0;
	padding: 0;
	position: relative;
}

.styleimg img {
	width: 100%;
}

.styleicon {
	position: absolute;
	width: 25%;
}

.styleicon img {
	width: 100px;
}

.right1 {
	top:3%;
	left: 3%;
}

.right2 {
	top:3%;
	right: 3%;
}

.left1 {
	bottom:3%;
	right: 3%;
}



/* カルーセル外枠 */
    .carousel-container {
      width: 100%;
      max-width: 1200px;
      margin: 0 auto;
      padding: 0;
    }

    /* 画像カルーセルラッパー */
    .carousel-wrapper {
      position: relative;
      width: 100%;
      height: auto;
      overflow: hidden;
    }

    /* スライドリストの基盤 */
    .image-carousel {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      width: auto;
      height: 100%;
      list-style: none;
      padding: 0;
      margin: 0;
      overflow: visible;
    }

    /* 各スライド(li)の設定 */
    .image-carousel li {
      flex-shrink: 0;
      flex-basis: 68%;
      box-sizing: border-box;
      position: relative;
      padding: 0 2rem;
    }



    .image-carousel li img {
      width: 100%;
      height: auto;
      display: block;
    }

    /* ナビゲーション矢印 */
    .prev-button, .next-button {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      background-color: rgba(0, 0, 0, 0.1);
      color: #fff;
      border: none;
      font-size: 1rem;
      padding: 0.5rem 0.7rem;
      cursor: pointer;
      z-index: 10;
		border-radius: 20px;
    }
    .prev-button {
      left: 6.8rem;
    }
    .next-button {
      right:6.8rem;
    }

    .prev-button:hover, .next-button:hover {
      background-color: rgba(0, 0, 0, 0.3);
    }

    /* インジケーター */
    .carousel-indicators {
      position: absolute;
      bottom: 1rem;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      gap: 0.5rem;
      z-index: 10;
    }

    .carousel-indicators span {
      width: 0.75rem;
      height: 0.75rem;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.5);
      cursor: pointer;
      transition: background 0.3s;
    }

    .carousel-indicators span.active {
      background: #fff;
    }


/* 3枚版 */
    .carousel-container-v3 {
      width: 100%;
      max-width: 1000px;
      margin: 0 auto;
      padding: 0;
    }

    .carousel-wrapper-v3 {
      position: relative;
      width: 100%;
      height: auto;
      overflow: hidden;
    }

    .image-carousel-v3 {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      width: auto;
      height: 100%;
      list-style: none;
      padding: 0;
      margin: 0;
      overflow: visible;
    }

    .image-carousel-v3 li {
      flex-shrink: 0;
      flex-basis: 68%;
      box-sizing: border-box;
      position: relative;
      padding: 0 2rem;
    }

    .image-carousel-v3 li img {
      width: 100%;
      height: auto;
      display: block;
    }

    .prev-button-v3, .next-button-v3 {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      background-color: rgba(0, 0, 0, 0.1);
      color: #fff;
      border: none;
      font-size: 1rem;
      padding: 0.5rem 0.7rem;
      cursor: pointer;
      z-index: 10;
		border-radius: 20px;
    }

    .prev-button-v3 { left: 6.8rem; }
    .next-button-v3 { right: 6.8rem; }

    .prev-button-v3:hover, .next-button-v3:hover {
      background-color: rgba(0, 0, 0, 0.3);
    }

    .carousel-indicators-v3 {
      position: absolute;
      bottom: 1.5rem;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      gap: 0.8rem;
      z-index: 10;
    }

    .carousel-indicators-v3 span {
      width: 0.8rem;
      height: 0.8rem;
      border-radius: 50%;
      background: rgba(0, 0, 0, 0.2);
      cursor: pointer;
      transition: background 0.3s;
    }

    .carousel-indicators-v3 span.active {
      background: #333;
    }



.btn_code {
	width:38%;
	margin: 5% auto 5%;
	padding:1.2% 0;
	border:2px solid #000;
	border-radius: 40px;
	background-color: #000;
	font-family: "kozuka-gothic-pr6n", sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 120%;
	letter-spacing: 0.1em;
	text-align: center;
}

.btn_code a{
	text-decoration: none;
	display: block;
	color:#fff;
	font-family: "kozuka-gothic-pr6n", sans-serif;
	font-weight: 400;
	font-style: normal;
}

.subtitle {
	width: 100%;
	margin: 10% auto 4%;
	font-family: "century-gothic", sans-serif;
	font-weight: 700;
	font-style: normal;
	font-size: 30px;
	letter-spacing: 0.12em;
	text-align: center;
}

.brandlist {
	width: 99.7%;
	margin: auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  gap: 1px;
  background-color: #000;
  border: 1px solid #000;
}

.cell {
  background-color: #ffffff; /* セルの背景色 */
  padding: 0;
}

.clr_box {
    width: 100%;
    margin: 0 auto 0;
    padding: 0 0 2%;
	box-sizing: border-box;
}

.footer_sb {
    width: 84%;
    max-width: 400px;
    margin: 2% auto -12%;
}

.footer_sb img {
    padding: 0;
	margin: 0 0 5%;
}

.float_box_sns{
	float: left;
	width: 17%;
	margin: 0% 4%;
}

.float_box_sns img{
	width: 100%;
}

.clear {
	clear: both;
}


@media only screen and (max-width:750px){
	#main_ {
	width: 100%;
	}
	
	.w_600 {
	width: 100%;
	}
.pc {
	display:none;
}
.sp {
	display:block;
}


.Lead {
		font-size: 12.5px;
    margin: 3% auto 10%;
	font-weight: 500;
	}	
	
.Lead span {
	font-size: 18px;
	font-weight: 500;
}
	
.scroll_box{
	width: 16%;
	margin: 2% auto 5%;
}
	
.navi_box img {
	float: left;
	width: 30%;
	margin: 1.45%;
	border: solid 1px #000;
	border-radius: 20px;
}
	
.main_copy {
	margin: 14% auto 1%;
	font-size: 44px;
	}

.main_copy span {
	font-size: 13px;
	}

.main_copy p {
	width: 100%;
	font-size: 22px;
	}
	
.styleicon {
	position: absolute;
	width: 27%;
}
	
.right1 {
	top:3%;
	right: 3%;
	left: auto;
}

.left1 {
	top:3%;
	left: 3%;
}

.styleicon img {
	width: 100px;
}
	
    .prev-button, .next-button {
      padding: 0.5rem 0.8rem;
    }
	
    .prev-button {
      left: 1.1rem;
    }
    .next-button {
      right:1.1rem;
    }
	
	
    .prev-button-v3, .next-button-v3 {
      padding: 0.5rem 0.8rem;
    }
	
    .prev-button-v3 {
      left: 1.1rem;
    }
    .next-button-v3 {
      right:1.1rem;
    }
	
	
.btn_code {
	width:60%;
	margin: 10% auto 5%;
	padding:1.2% 0;
	border:2px solid #000;
	border-radius: 40px;
	background-color: #000;
	font-family: "kozuka-gothic-pr6n", sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 105%;
	letter-spacing: 0.1em;
	text-align: center;
}

.subtitle {
	width: 100%;
	margin: 15% auto 5%;
	font-size: 23px;
}
	
.brandlist {
	width: 100%;
	margin: 0 auto -7%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1px;
  background-color: #000;
  border: 1px solid #000;
}
	
.navi_style {
	padding-top: 0px;
}
	
.style_img_1 {
	border-radius: 10px 10px 0 0;
	width: 100%;
}

.style_img_2 {
	border-radius: 0 0 10px 10px;
}
	
.styleimg {
	float: none;
	width: 100%;
	margin: 0;
	padding: 0;
	position: relative;
}
	
.chapter_content {
  border-radius: 0;
	padding: 5% 3.5% 2.5%;
	font-size: 17px;
}
	
.chapter_content p {
  font-size: 10px;
}

.chapter_content a{
	font-size: 10px;
}

.a_non {
	font-size: 10px;
}
	
    .image-carousel li {
      flex-shrink: 0;
      flex-basis: 70%;
      position: relative;
      padding:0 1.5rem;
		margin: 0 0%;
    }
	
      .image-carousel-v3 li {
      flex-shrink: 0;
      flex-basis: 70%;
      position: relative;
      padding:0 1.5rem;
		margin: 0 0%;
      }
	
.footer_sb {
    width: 84%;
    max-width: 500px;
    margin: 12% auto 0;
}

	
}