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

body{
	margin: 0;
}

.wrapper{
	width: 100%;
	margin: 0 auto;
	background-color: #fef2f9;
	padding-bottom: 10%;
	font-family: "dnp-shuei-gothic-gin-std", sans-serif;
	font-weight: 500;
	font-style: normal;
}

.wrapper img{
	display: block;
	line-height: 0;
}

.css-slider { width: 100%; max-width: 1000px; margin: 0 auto; overflow: hidden; }
.slider-inner {
  display: flex;
  width: 500%;
  list-style: none;
  padding: 0;
  margin: 0;
  animation: slide-anim 15.00s infinite;
}
.slider-inner li { width: 20.0000%; }
.slider-inner li img { width: 100%; height: auto; display: block; }

.css-slider:hover .slider-inner { animation-play-state: paused; }
@keyframes slide-anim {
    0.00%, 19.23% { transform: translateX(-0.0000%); }
    25.00%, 44.23% { transform: translateX(-20.0000%); }
    50.00%, 69.23% { transform: translateX(-40.0000%); }
    75.00%, 94.23% { transform: translateX(-60.0000%); }
    100.00%, 100% { transform: translateX(-80.0000%); }
}


    /* 画像カルーセル */
    .carousel-wrapper {
      position: relative;
      width: 100%;
      height: auto;
      overflow: hidden;
    }
    .image-carousel {
      display: flex;
      flex-direction: row;
      width: auto;
      height: 100%;
      list-style: none;
      transition: transform 30s ease;
      padding: 0;
      margin: 0;
    }
    .image-carousel li {
      transform: translateX(calc(-50% - 0.1rem));
      flex-shrink: 0;
      flex-basis: 50%;
      position: relative;
      padding:0 1rem;
    }
    .image-carousel li img {
      width: 100%;
      height: auto;
    }
    .image-carousel li span {
      display: block;
      position: absolute;
      right: 1.5rem;
      bottom: 0.5rem;
      color: #fff;
    }
    /* ナビゲーション矢印 */
    .prev-button, .next-button {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      background-color: rgba(0, 0, 0, 0.5);
      color: #fff;
      border: none;
      font-size: 1rem;
      padding: 0.5rem;
      cursor: pointer;
      z-index: 10;
    }
    .prev-button {
      left: 1rem;
    }
    .next-button {
      right:1rem;
    }
    .prev-button:hover, .next-button:hover {
      background-color: rgba(0, 0, 0, 0.9);
    }
    /* インジケーター */
    .carousel-indicators {
      position: absolute;
      top: 31.8rem;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      gap: 0.5rem;
    }
    .carousel-indicators span {
      width: 0.5rem;
      height: 0.5rem;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.5);
      cursor: pointer;
    }
    .carousel-indicators span.active {
      background: #fff;
    }


.chapter {
	margin: 0;
  padding: 0;
}

.chapter__title {
  font-size: 22px;
  color: var(--color-primary);
  margin-top: 1.5%;	
  margin-left: 5%;
  margin-bottom: 36px;
	position: relative;
	z-index: 100;
}

.chapter_content {
  width: 95%;
  gap: 12px;
  margin:2% auto 4%;
  position: relative;
  z-index: 100;
	line-height: 1.7;
	font-size: 11px;
	color: #c7b4b8;
}

.chapter_content a{
  color: #333333;
  text-decoration: none;
}

.chapter_content a:hover{
  color: #333333;
  text-decoration: underline;
}

.chapter_content2 {
  width: 100%;
  gap: 12px;
  margin:2% auto 4%;
  position: relative;
  z-index: 100;
	line-height: 1.7;
	font-size: 11px;
	color: #c7b4b8;
}

.chapter_content2 a{
  color: #333333;
  text-decoration: none;
}

.chapter_content2 a:hover{
  color: #333333;
  text-decoration: underline;
}

.img-box {
  position: relative;
  overflow: hidden;
}

.img-box img {
  display: block; /* 下部の隙間を消す */
  width: 100%; /* 必要に応じてサイズ調整 */
  height: auto;
}

.clear {
	clear: both;
}

/* 切り替えアニメーション */
.slide_container {
  position: relative;
  aspect-ratio: 600 / 800;
  width: 100%;
  height: auto;
animation: zoomIn 3s ease-out forwards;
}

.slide_image {
  position: absolute;
	width: 100%;
	opacity: 0;
	animation: change-img-anim 16s infinite;
}

.slide_image:nth-of-type(1) {
  animation: change-img-anim-first 16s infinite;
	animation-delay: 0s;
}
.slide_image:nth-of-type(2) {
	animation-delay: 4s;
}
.slide_image:nth-of-type(3) {
	animation-delay: 8s;
}
.slide_image:nth-of-type(4) {
	animation-delay: 12s;
}

@keyframes change-img-anim-first {
	0%{ opacity: 0;}
  30%{ opacity: 1;}
  36%{ opacity: 1;}
  45%{ opacity: 0;}
  100%{ opacity: 0;}
}
@keyframes change-img-anim {
  0%{ opacity: 0;}
  30%{ opacity: 1;}
  36%{ opacity: 1;}
  45%{ opacity: 0;}
  100%{ opacity: 0;}
}

.slide_container2 {
  position: relative;
  aspect-ratio: 600 / 800;
  width: 100%;
  height: auto;
animation: zoomIn 3s ease-out forwards;
}

.slide_image2 {
  position: absolute;
	width: 100%;
	opacity: 0;
	animation: change-img-anim 12s infinite;
}

.slide_image2:nth-of-type(1) {
  animation: change-img-anim-first 12s infinite;
	animation-delay: 0s;
}
.slide_image2:nth-of-type(2) {
	animation-delay: 4s;
}
.slide_image2:nth-of-type(3) {
	animation-delay: 8s;
}

@media(max-width:750px){

.sp_view{
	display: block;
}

.pc_view{
	display: none;
}

.pc-box_l{
	display: none;
}
	
.pc-box_r{
	display: none;
}

.main {
  width: 100%;
  padding: 0;
  margin: 0;
  margin-left: 0;
  background-color: #fef2f9;
  box-sizing: border-box;
	overflow: hidden;
}

.in_box {
  width: 100%;
  background-color: #fef2f9;
  box-sizing: border-box;
	margin: 0 0 ;
	padding: 0 0 10%;
	position: relative;
}
	
.video_box {
  position: relative;
  box-sizing: border-box;
  width: 92%;
  margin: -20% auto 1%;
  z-index: 10;
}
	
.video_box video {
  width: 100%;
  margin: 0 0 3%;
}
	
}


@media(min-width:750px){
	
.sp_view{
	display: none;
}

.pc_view{
	display: block;
}
	
.nav_sp {
	display: none;
}

	
	.sticky-contner{
		width: 100%;
		margin: 0;
		padding: 0;
		display: flex;
		background-color: #fef2f9;
	}
	
	.pc-box{
		width: 50%;
		height: 100vh;
		position: sticky;
		left: 0;
		top: 0;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.pc-box_l{
		width: 25%;
		height: 100vh;
		position: sticky;
		left: 0;
		top: 0;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.pc-box_r{
		width: 25%;
		height: 100vh;
		position: sticky;
		left: 0;
		top: 0;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
.chapter_content {
	font-size: 13px;
}
	
.chapter_content2 {
	font-size: 13px;
}
	
.main {
  width: 100%;
  max-width: 100%;
	margin-left: -53%;
	margin-top: 0;
	margin-bottom: 0;
	padding-top: 0;
	padding-bottom: 0;
}
	
#no_1 {
	margin: -3% 0 0 0;
	padding: 0;
}
	
#no_2 {
	margin: -1% 0 0 0;
	padding: 0;
}
	
#no_3 {
	margin: -1% 0 0 0;
	padding: 0;
}
	
#no_4 {
	margin: -1% 0 0 0;
	padding: 0;
}
	
#no_5 {
	margin: -1% 0 0 0;
	padding: 0;
}
	.in_box {
		width: 50%;
		margin-left: 53%;
		min-height: 100vh;
		padding: 0 0 6%;
		position: relative;
		background-image: none;
		background-color: #fff;
	}
	
.fiximg {
	display: none;
}

.video_box {
	width: 94%;
	margin: -21.2% auto 1%;
	position: relative;
	z-index: 10;
}
	
.video_box video {
  width: 100%;
}

}