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

html,
body {
	padding: 0;
	margin: 0;
}
img {
	width: 100%;
	border: none;
}
ul,li {
	list-style: none;
	padding: 0;
	margin: 0;
}
h1,h2,h3,p,a {
	padding: 0;
	margin: 0;
	color: #5C1D24;
	text-decoration: none;
}

#mw {
	position: relative;
	color: #5C1D24;
	font-family: "Baskervville", serif;
	font-family: "GFS Didot", serif;
	background: #f4d7db;
}

@media only screen and (min-width: 769px)  {

}
#main_contents {
	max-width: 500px;
	margin: 0 auto;
	overflow: hidden;
}
.section {
	position: relative;
	padding: 10% 0;
	background: #FFF;
}
.section .img {
	line-height: 0;
	position: relative;
}

.visual {
	position: relative;
	padding: 0 0 10%;
}
.visual h1 {
	position: absolute;
	top: 18%;
	left: 50%;
	transform: translate(-50%,0);
	width: 80%;
}
.visual .read {
	width: 90%;
	margin: 10% auto 0;
}
.visual .read p {
	margin: 5% auto;
	font-size: 12px;
	color: #5C1D24;
	text-align: center;
	font-family: "Noto Sans JP", sans-serif;
}
.visual .read .link {
	position: relative;
	text-align: center;
	border: 1px solid #5C1D24;
	margin: 10% auto 0;
}
.visual .read .link a {
	font-size: 14px;
	color: #5C1D24;
	width: 100%;
	display: block;
	box-sizing: border-box;
	padding: 25px 5px;
	text-align: center;
}
.visual .read .link a span {
	font-weight: 600;
	background: #5C1D24;
	color: #FFF;
	padding: 10px;
	display: inline-block;
	margin: 15px auto 0;
	text-align: center;
}

.section .title {
	text-align: center;
	padding: 5% 0 10%;
	max-width: 250px;
	margin: 0 auto;
	font-style: italic;
}
.section .box {
	position: relative;

}
.section .list a,.section .list p {
	display: block;
	color: #5C1D24;
	font-size: 11px;
	margin: 5px 10px

}

.slider {
  width: 100%;
  overflow: hidden;
}

.slider-track {
  display: flex;
  gap: 5px;
  width: max-content;
	animation: infinite-scroll_r 15s linear infinite;
}

.slider-track img {
	width: 200px;
  object-fit: cover;
  flex-shrink: 0;
}

@keyframes infinite-scroll_r {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(calc(-50% - 10px));
  }
}

.switch {
  position: relative;
}
.switch img {
  position: absolute;
  inset: 0;
  width: 100%;
  opacity: 0;
  transition: opacity 1s ease;
}
.switch img:nth-of-type(1) {
	position: relative;
}
.switch img.active {
  opacity: 1;
}



.ch1 {
	background: #e0ebf5;
}
.ch1 .box1 {
	position: relative;
	width: 90%;
	margin:0 auto;
}
.ch1 .box1 .img {
	background: #FFF;
	box-sizing: border-box;
	padding: 10px;
	box-shadow: 0px 0px 2px 1px rgb(0 0 0 / 0.1);
	border-radius: 5px;
	width: 70%;
}
.ch1 .box1 .img:nth-of-type(1) {
	transform: rotate(10deg);
	margin: 0 0 0 30%;
}
.ch1 .box1 .img:nth-of-type(2) {
	transform: rotate(-5deg);
	margin: -20% 0 0 0;
}
.ch1 .box2 {
	position: relative;
	width: 90%;
	margin:10% auto 0;
}
.ch1 .box2 .img {
	margin:2% auto;
}
.ch1 .list {
	text-align: right;
}
.ch1 .box3 {
	margin: 10% auto;
}

.ch2 {
	background: #ededed;
}
.ch2 .box1 {
	width: 100%;
}
.ch2 .box2 {
	width: 96%;
	margin: 5% auto
}
.ch2 .box2 .img:nth-of-type(1) {
	width: 60%;
	z-index: 2
}
.ch2 .box2 .img:nth-of-type(2) {
	width: 60%;
	margin: -12% 0 0 40%;
}
.ch2 .list {
	position: absolute;
	top: 20%;
	right: 0;
	text-align: right;
}
.ch2 .box3 {
	background: #FFF;
	box-sizing: border-box;
	padding: 10px;
	width: 86%;
	margin: 0 auto;
	box-shadow: 0px 0px 2px 1px rgb(0 0 0 / 0.1);
	border-radius: 5px;
}
.ch2 .box3 .img:nth-of-type(1) {
	margin-bottom: 10px;
}
.ch2 .box3 .copy {
	font-size: 12px;
	text-align: right;
	padding: 5% 0 0 ;
	font-style: italic;
}

.ch3 {
	background: #eee;
}
.ch3 .box1 {
	width: 90%;
	margin: 0 auto
}
.ch3 .list {
	margin: 2% 0 0 ;
	text-align: right;
}

.ch3 .box2 {
	margin: 5% auto;
}
.ch3 .slider-track {
	background: url("../images/photo_bg.webp") repeat top;
	background-size: auto 100%;
	padding: 10% 0
	
}
.ch3 .box3 {
	margin: 10% auto 0
}
.ch3 .box3 .img {
	background: #FFF;
	box-sizing: border-box;
	padding: 10px;
	box-shadow: 0px 0px 2px 1px rgb(0 0 0 / 0.1);
	width: 70%;
	border-radius: 5px;
}
.ch3 .box3 .img:nth-of-type(1) {
	transform: rotate(-6deg);
	margin: 0 auto;
}


.ch4 .box1 {
	width: 100%;
	margin: 0 auto
}
.ch4 .box2 .img {
	background: #FFF;
	box-sizing: border-box;
	padding: 10px;
	box-shadow: 0px 0px 2px 1px rgb(0 0 0 / 0.1);
	width: 80%;
	border-radius: 5px;
}
.ch4 .box2 .img:nth-of-type(1) {
	transform: rotate(-5deg);
	margin: 5% 0 0 0;
}
.ch4 .box2 .img:nth-of-type(2) {
	transform: rotate(5deg);
	margin: 7% 0 0 20%;
}
.ch4 .box3 {
	display: flex;
	flex-wrap: wrap;
	width: 90%;
	margin: 10% auto;
}
.ch4 .box3 .img {
	width: 50%;
}
.ch4 .list {
	width: 100%;
}
.ch4 .list {
	margin: 2% 0 0 ;
	text-align: right;
}

.ch4 .box4  {
	width: 80%;
	border-radius: 100%;
	overflow: hidden;
	margin: 10% auto 0;
}


.ch5 .box1 .img {
	background: #FFF;
	box-sizing: border-box;
	padding: 10px;
	box-shadow: 0px 0px 2px 1px rgb(0 0 0 / 0.1);
	width: 80%;
	border-radius: 5px;
	transform: rotate(-5deg);
	margin: 0 auto;
}
.ch5 .list {
	margin: 2% 0 0 ;
	text-align: right;
}
.ch5 .box2 {
	margin: 5% auto;
}


.ch6 .box1 {
	width: 96%;
	background: #FFF;
	box-sizing: border-box;
	padding: 10px;
	box-shadow: 0px 0px 2px 1px rgb(0 0 0 / 0.1);
	border-radius: 5px;
	margin: 0 auto;
}
.ch6 .box2 {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	margin: 10% auto 0;
}
.ch6 .box2 .img:nth-of-type(1){
	width: 55%;
	z-index: 2
	
}
.ch6 .box2 .img:nth-of-type(2){
	width: 35%;
	margin: 0 5%;
}
.ch6 .box2 .img:nth-of-type(3){
	width: 45%;
	margin: 0;
}
.ch6 .box2 .img:nth-of-type(3) img:nth-of-type(1){
	width: 90%;
	margin: 0 0 5%;
}
.ch6 .box2 .img:nth-of-type(3) img:nth-of-type(2){
	width: 80%;
	margin: 0 10%;
}
.ch6 .box2 .img:nth-of-type(4){
	width: 55%;
	margin: -5% 0 0 0;
}
.ch6 .list {
	width: 100%;
}
.ch6 .list {
	margin: 2% 0 0 ;
	text-align: right;
}


.ch7 .box1 .img {
	background: #FFF;
	box-sizing: border-box;
	padding: 10px;
	box-shadow: 0px 0px 2px 1px rgb(0 0 0 / 0.1);
	border-radius: 5px;
	width: 90%;
	margin: 0 auto;
}
.ch7 .box1 .img:nth-of-type(1) {
	transform: rotate(-10deg);
}
.ch7 .box1 .img:nth-of-type(2) {
	transform: rotate(5deg);
	position: absolute;
	top: 0;
	left: 5%;
}
.ch7 .box1 .img:nth-of-type(3) {
	transform: rotate(-1deg);
	position: absolute;
	top: 0;
	left: 5%;
}
.ch7 .box2 {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin: 15% auto 0;
}
.ch7 .box2 .img {
	width: 50%;
}
.ch7 .box2 .img:nth-of-type(2) {
	width: 44%;
	margin: 0 3%;
}
.ch7 .box2 .img:nth-of-type(3) {
	width: 65%;
	margin: 5% 0 0 35%;
}
.ch7 .box2 .list {
	width: 35%;
	position: absolute;
	top: 50%;
	left: 10px;
}
.ch7 .box2 .list {
	margin: 2% 0 0 ;
	text-align: left;
}
.ch7 .box3 {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin: 5% auto 0;
}
.ch7 .box3 .img {
	width: 52%;
}
.ch7 .box3 .img img:nth-of-type(1) {
	/*width: 80%;
	margin-bottom: 5%;*/
	width: 92%;
    margin-bottom: 12%;
    margin-left: 15%;
}
.ch7 .box3 .img:nth-of-type(2) {
	width: 44%;
	margin: 0 2%;
}
.ch7 .box3 .list {
	width: 44%;
	position: absolute;
	bottom: 0%;
	left: 56%;
}
.ch7 .box3 .list {
	margin: 2% 0 0 ;
	text-align: left;
}

.end .copy {
	margin: 10% auto;
		text-align: center;
}
.end .copy p {
	text-align: center;
	font-size: 11px;
	font-family: "Noto Sans JP", sans-serif;
	margin: 15% 0 5%;
	line-height: 2;
}
.end .copy .btn a {
	display: inline-block;
	border: 1px solid #5C1D24;
	padding: 10px 25px;
	box-sizing: border-box;
	margin: 10% auto;
	font-style: italic;
}
.end .copy .staff p {
	margin: 5px auto;
	font-style: italic;
	font-family: "GFS Didot", serif;
}
.end .copy .staff p:nth-of-type(1) {
	font-size: 14px;
}


    /* 動画画面 */
    #video-screen {
      position: relative;
      width: 100%;
      height: 100svh;
      overflow: hidden;
      background: #fff;
    }

    #intro-video {
      width: 100%;
      height: 100%;

      display: block;
    }

    /* SKIPボタン */
    #skip-button {
      position: absolute;
      left: 50%;
      bottom: 30px;
      z-index: 10;
      padding: 12px 28px;
      color: #fff;
      background: rgba(0, 0, 0, 0.5);
      border: 1px solid #fff;
      cursor: pointer;
      font-size: 14px;
      letter-spacing: 2px;
		transform: translate(-50%,0);
    }

    #skip-button:hover {
      background: #fff;
      color: #000;
    }

    /* メインコンテンツ：最初は非表示 */
    #main_contents {
      display: none;
      box-sizing: border-box;
    }

.img {
	opacity: 0;
	transition: 1.4s all 0s ease;
}
.img.ac {
	opacity: 1;
}
.ch1 .box1 .img:nth-of-type(1) {
	opacity: 0;
	transition: 1s all 0s ease;
}
.ch1 .box1 .img:nth-of-type(2) {
	opacity: 0;
	transition: 1s all 0.6s ease;
}
.ch1 .box1 .img.ac {
	opacity: 1;
}
.ch7 .box1 .img:nth-of-type(1) {
	opacity: 0;
	transition: 1.5s all 0s ease;
}
.ch7 .box1 .img:nth-of-type(2) {
	opacity: 0;
	transition: 1.5s all 1s ease;
}
.ch7 .box1 .img:nth-of-type(3) {
	opacity: 0;
	transition: 1.5s all 2.6s ease;
}
.ch7 .box1 .img.ac {
	opacity: 1;
}