@charset "UTF-8";

/*********************************************************

					　　　　初期設定

**********************************************************/

html{
  font-family: "Shippori Mincho", serif;
	font-feature-settings: "palt";
	font-style: normal;
    font-size: min(2.2vw, 24px);
	font-weight: 400;
	text-align: justify;
	line-height: 1.5;
	letter-spacing: .1rem;
	box-sizing: border-box;
	scroll-behavior: smooth;
}

body{
	width: 100vw;
	height: 100vh;
	z-index: 10;
	background: url(../img/back_01.webp) repeat center / contain;
}

main{
	position: relative;
	margin: 0 auto; 
	width: 100%;
	height: auto;
	overflow: hidden;
	overflow-x: hidden;
}

.pc{ display: block;}

.sp{ display: none;}

.sp_1200 {display: none;}

.inner{
	margin: 0 auto;
	width: 90%;
	max-width: 1300px;
	height: auto;
}

 /* -----------------------------------ヘッダー----------------------------------- */ 

header {
	margin-bottom: 8vw;
}

 .top_img {
	background: url(../img/top.webp) no-repeat top / cover;
	margin-bottom: 15vw;
	width: 100vw;
	height: auto;
	aspect-ratio: 2 / 1;
	opacity: 0;
	animation: top 1.5s linear forwards;
 }
@keyframes top {
  0% {
    opacity: 0;
  }
  100% {
	opacity: 1;
  }
}

 .top_img img {
	width: 100%;
	height: auto;
 }

 h1 {
	width: 55%;
	margin: 0 auto;
	transform: translateY(100px);
    opacity: 0;
 }
h1.active {
	animation: popup 1s ease forwards;
}
@keyframes popup {
  0% {
    transform: translateY(100px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
	opacity: 1;
  }

}

 h1 img {
	width: 100%;
	height: auto;
 }

/* -----------------------------------メイン----------------------------------- */ 

 .sec {
	margin-bottom: 25vw;
 }

#sec02 {
	background: url(../img/back_02.webp) no-repeat center / cover;
}
#sec03 {
	background: url(../img/back_03.webp) no-repeat center / cover;
}

#sec01 {
	transform: translateY(100px);
    opacity: 0;
}

#sec01.active {
	animation: popup 1s ease forwards;
}
@keyframes popup {
  0% {
    transform: translateY(100px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
	opacity: 1;
  }

}

 h2 {
	text-align: center;
	font-size: min(4.2vw,50px);
	letter-spacing: .4rem;
	padding-bottom: 1rem;
	line-height: 2;
 }

 .consept {
	margin: 0 auto;
	width: 72%;
	max-width: 1001px;
 }

 .consept p {
	display: flex;
    justify-content: center;
	line-height: 3;
 }

 .book_inner {
	position: relative;
	width: 100%;
	height: 28.2vw;
	margin-bottom: 10vw;
 }

.book_img {
	display: flex;
	gap: min(6vw,135px);
	width: 100vw;
	position: absolute;
	top: 0;
}
.book_img_left {
	right: 0;
	justify-content: end;
}
.book_img_right {
	left: 0;
}

.book_img_main01,
.book_img_main02 {
	width: 47%;
	height: auto;
	aspect-ratio: 5 / 3;
	opacity: 0;
}
.book_img_main01 {
	background: url(../img/forest_01.webp) no-repeat left center / cover;
}
.book_img_main02 {
	background: url(../img/wine_01.webp) no-repeat right  center / cover;
}

.book_img.active .book_img_main01 {
	animation: book 1s ease forwards;
}
@keyframes book {
  0% {
    opacity: 0;
  }
  100% {
	opacity: 1;
  }

}

.book_img.active .book_img_main02 {
	animation: book1 1s ease forwards;
}
@keyframes book1 {
  0% {
    opacity: 0;
  }
  100% {
	opacity: 1;
  }

}

.book_img_mini {
	width: 44%;
	max-width: 620.5px;
	align-content: center;
	opacity: 0;
}

.book_img.active .book_img_mini {
	animation: book2 1s .5s ease forwards;
}
@keyframes book2 {
  0% {
    opacity: 0;
  }
  100% {
	opacity: 1;
  }

}

h3 {
	line-height: 1;
    margin-bottom: 2rem;
	text-align: center;
	height: 4vw;
	max-height: 62px;
	width: auto;
}

h3 img {
	height: 100%;
	width: auto;
}

.mini_img {
	display: flex;
    gap: min(2rem, 35px);
	width: 100%;
	height: auto;
}

.mini_img img {
	width: calc(100% / 3);
}

.book_kind {
	display: flex;
	gap: 5vw;
	align-items: end;
	width: 75%;
    margin: 0 auto;
}

.kind {
	display: flex;
    flex-direction: column;
	width: 50%;
}
.kind img {
	display: block;
	margin: 0 auto;
	padding-bottom: 2vw;
}

.kind_01 {
	transform: translateY(50%);
    opacity: 0;
}

.book_kind.active .kind_01 {
	animation: kind 1s ease forwards;
}
@keyframes kind {
  0% {
	transform: translateY(50%);
    opacity: 0;
  }
  100% {
	transform: translateY(0%);
	opacity: 1;
  }

}

.kind_02 {
	transform: translateY(50%);
    opacity: 0;
}

.book_kind.active .kind_02 {
	animation: kind2 1s .5s ease forwards;
}
@keyframes kind2 {
  0% {
	transform: translateY(50%);
    opacity: 0;
  }
  100% {
	transform: translateY(0%);
	opacity: 1;
  }

}
.kind_01 img {
	width: 57%;
}
.kind_02 img {
	width: 80%;
}

.kind_cont {
	display: inline-block;
	margin: 0 auto;
}
.kind_cont1 {
	font-size: min(2.3vw,30px);
	line-height: 1.7;
}
.kind_cont2 {
	font-size: min(1.7vw,24px);
	line-height: 1.7;
}

.kind_price {
	text-align: center;
	font-size: min(2.6vw,33.5px);
}
.en {
	font-size: min(1.7vw,20px);
}
.tax {
	font-size: min(1.5vw,15px);
}

/* -----------------------------------メイン2----------------------------------- */ 

.inner_box {
	position: relative;
	padding: 12vw 0 30vw;
	margin-bottom: 2vw;
}

.inner_box::before {
	position: absolute;
	content: "";
	top: 0;
	left: 50%;
	transform: translateX(-.25px);
	height: 100%;
	border: solid #000 .5px;
}

.flex {
	display: flex;
	justify-content: center;
	width: 100%;
    margin: 0 auto 10vw;
}

.flex_p {
	position: relative;
	display: flex;
	width: 50%;
	align-items: center;
	line-height: 2;
}

.border1,
.border2 {
	position: absolute;
    height: 20px;
    width: 12.5%;
    top: 50%;
}

.border1::before,
.border2::before {
	position: absolute;
	content: "";
	top: 50%;
	border: solid #000 .5px;
	width: 100%;
}
.border1::after,
.border2::after {
	position: absolute;
	content: "";
	top: 50%;
	border: solid #000 1px;
	border-radius: 50%;
	width: 15px;
    height: 15px;
}
.border1,
.border1::before {
	right: 0;
}
.border2,
.border2::before {
	left: 0;
}
.border1::after {
	transform: translate(-100%,-50%);
}
.border2::after {
	right: 0;
	transform: translate(100%,-50%);
}


.p_inner {
	margin: 0 auto;
}
.p_inner p {
	font-size: min(2.2vw, 28px);
}

.flex_p p {
	margin: 0 auto;
}

.flex_img {
	width: 50%;
	transform: translateY(50%);
    opacity: 0;
}
.flex_img.active {
	animation: flex_img 1s ease forwards;
}
@keyframes flex_img {
  0% {
	transform: translateY(50%);
    opacity: 0;
  }
  100% {
	transform: translateY(0%);
	opacity: 1;
  }

}

.flex_img img {
	display: block;
	width: 90%;
	height: auto;
}

.img_right img {
	margin-left: auto;
}

#sec04 h2 {
	transform: translateY(50%);
    opacity: 0;
}

#sec04 h2.active {
	animation: h2 1s ease forwards;
}
@keyframes h2 {
  0% {
	transform: translateY(50%);
    opacity: 0;
  }
  100% {
	transform: translateY(0%);
	opacity: 1;
  }

}

#sec04 h2 {
	font-size: min(3.9vw, 45px);
}

/* -----------------------------------フッター----------------------------------- */ 

.footer {
	text-align: center;
	padding-bottom: 15vw;
	width: 15%;
	margin: 0 auto;
	opacity: 0;
}
.footer.active {
	animation: footer 2s ease forwards;
}
@keyframes footer {
  0% {
    opacity: 0;
  }
  100% {
	opacity: 1;
  }
}

.footer img {
	width: 100%;
	height: auto;
}

/* -----------------------------------sp版----------------------------------- */ 


@media screen and (max-width: 1200px){

	.sp_1200 {display: block;}

}

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

	.pc {
		display: none;
	}

	.sp {
		display: block;
	}

	.sec {
		margin-bottom: 35vw;
	}

	.top_img {
		animation: none;
		opacity: 1;
	}

	.consept {
		width: 100%;
	}

	.consept p {
		font-size: min(4.3vw,20.5px);
		line-height: 2.2;
	}

	h1 {
		width: 60%;
		max-width: 500px;
		opacity: 1;
		transform: translateY(0);
	}
	h1.active {
		animation: initial;
	}

	#sec01 {
		transform: translateY(0);
		opacity: 1;
	}
	#sec01.active {
		animation: initial;
	}

	h2 {
		font-size: min(5vw,32px);
		line-height: 1.8;
	}

	h3 {
		height: 5vw;
		min-height: 25px;
	}


	#sec02 {
		background: url(../img/back_02.webp) no-repeat center bottom / 150vw auto;
	}
	#sec03 {
		background: url(../img/back_03.webp) no-repeat center bottom / 150vw auto;
	}

	.book_inner {
		height: 100%;
		margin-bottom: 15vw;
	}

	.book_img {
		gap: min(2rem, 135px);
	}

	.book_img_left {
		position: initial;
		flex-direction: column-reverse;
		width: 100%;
	}

	.book_img_right {
		position: initial;
		flex-direction: column;
		width: 100%;
	}

	.book_img_main01,
	.book_img_main02 {
		width: 100%;
	}
	.book_img.active .book_img_main01 {
    animation: book 1s .8s ease forwards;
	}
	.book_img.active .book_img_main02 {
    animation: book 1s .8s ease forwards;
	}

	.book_img_mini {
		width: 100%;
		max-width: initial;
	}

	.book_img.active .book_img_mini {
		animation: book2 1s ease forwards;
	}

	.book_kind {
		display: block;
		width: 100%;
	}

	.kind {
		width: 75%;
		max-width: 483px;
		margin: 0 auto 10vw;
	}
	.book_kind.active .kind_02 {
		animation: kind2 1s 1s ease forwards;
	}

	.kind_01 img {
		width: 54%;
	}
	.kind_02 img {
		width: 76%;
	}

	.kind_cont1 {
		font-size: min(5vw,26px); /*16px*/
	}

	.kind_cont2 {
		text-align: initial;
		font-size: min(4.3vw,20px); /*14px*/
	}

	.kind_price {
		font-size: min(5.6vw,24px);
	}
	
	.en {
		font-size: min(3.7vw,16px);
	}

	.tax {
		font-size: min(3.4vw,13px);
	}


	/* ---------------メイン2--------------- */

	.inner_box {
		margin-bottom: 5vw;
		padding: 12vw 0 20vw;
	}

	.inner_box::before {
		left: 0;
		transform: none;
		border: solid #000 min(.2vw,1px);
	}

	.unity {
		margin-bottom: 35vw;
	}

	.box_inner {
		position: relative;
		margin-bottom: 3vw;
	}
	.box_inner::before {
		position: absolute;
		content: "";
		top: 50%;
		left: 0;
		width: 20%;
		border: solid #000 min(.2vw,1px);
	}

	.box_p {
		margin: 0 0 0 auto;
		width: 80%;
		font-size: min(4.7vw,30px);
		margin-bottom: 5vw;
		padding-left: 1rem;
		line-height: 1.8;
	}

	.img_block {
		margin: 0 0 5vw auto;
		width: 80%;
		transform: translateY(50%);
		opacity: 0;

	}

	.img_block.active {
    animation: block 1s ease forwards;
	}
	@keyframes block {
		0% {
			transform: translateY(50%);
			opacity: 0;
		}
		100% {
			transform: translateY(0%);
			opacity: 1;
		}
	}

	.img_block:last-child {
		margin: 0 0 0vw auto;
	}

	.img_block img {
		width: 100%;
		height: auto;
	}

	.p_block {
		margin: 0 0 0vw auto;
		width: 80%;
	}

	#sec04 h2 {
		transform: initial;
		opacity: 1;
		text-align: left;
		padding-left: 1rem;
		font-size: min(4.7vw, 30px);
	}

	.footer {
		width: 25%;
	}
}