@charset "utf-8";
/* CSS Document */
/* =============================================== */
/* moon common
-------------------------------------------------- */
/* body, parts
-------------------------------------------------- */
body {
	font-family: "zen-kaku-gothic-new", sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size:10px;
	letter-spacing: 0.14em;
	line-height: 1.05;
	color: #5f5f5f;
	
	overflow-x: hidden;
}

a { color: #5f5f5f; text-decoration: none;}

img { max-width:100%; height: auto;}

.inner { position: relative;}

main h2 { font-family: "goldenbook", serif; font-weight: 700; text-align: center; letter-spacing: .24em;}

h3 {
	margin:0.34em 0 0.88em;
	font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
	font-weight: 600;
	font-size:2.5em;
	letter-spacing: -0.05em;
}
h3 small { font-size: 0.62em; letter-spacing: 0;}

.moon--btn_01 {}
.moon--btn_01 a { 
	position: relative; 
	display: block;
	font-family: goldenbook, YuMincho, "Yu Mincho", serif;
	font-weight: 400;
	font-style: normal;
	font-size:1.5em;
	line-height: 48px;
	color:  #5f5f5f;	 
	border:1px solid #5f5f5f;
	border-radius: 30px;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.24em;
	background: #fff;
}
.moon--btn_01 a::after {
	content:''; position: absolute; right:8%; top:50%; transform: translateY(-50%);
	width:10px; height:8px;
	background: url("../img/common/arrow_01.svg") right center no-repeat;
	background-size:100% auto;
	transition:.4s all;
}
.moon--btn_01 a:hover { color: #999;}
.moon--btn_01 a:hover::after { right:6%; opacity: .75;} 

.moon--cart {
	position: relative; 
}
.moon--btn--cart {
	display: flex; align-items: center;
	position: relative;
	width:48px; height: 48px;
	line-height: 48px;	
	border:1px solid #5f5f5f;
	border-radius: 30px;
	text-align: center;
	background: #fff;
}
.moon--btn--cart img { display: inline-block; width:21px; margin: 0 auto; transform: translateX(-1px);}
.moon--btn--cart:hover { cursor: pointer;}

.moon--buy {
	position: absolute; right:0; top:100%;
	width:100%;
	z-index: 11;
	
	display: none;
}
.ul--moon--buy {
	display: flex; flex-wrap: wrap; gap:8px;
	margin-top: 14px; padding: 20px;
	background: #d2e9f8;
}
.ul--moon--buy::before {
	content:''; position: absolute; right:0; top:2px; transform: translateX(-102%);
	width:0; height:0;
	border-bottom:12px solid #d2e9f8;
	border-left: 7px solid transparent;
	border-right:7px solid transparent;
}
.ul--tab--items li .ul--moon--buy li { 
	width:calc(100% / 2 - 4px);
	padding:5px 0;
	border-radius: 30px;
	background: #fff;
	box-shadow: 0px 0px 8px -6px #777777;
}
.ul--moon--buy li img { border-radius: 30px;}

@media all and (min-width: 769px), print {
	.inner {
		position: relative;
		margin:0 auto;
	}
	
	main h2 { font-size:3.8em;}
	
	.sp { display: none;}
	.pc { display: block;}
}
@media all and (max-width: 768px) {
	.sp { display: block;}
	.pc { display: none;}
	
	main h2 { font-size:2.5em;}
	h3 { font-size: 2.1em;}
	
	.moon--btn_01 a,
	.moon--btn--cart { height:42px; line-height: 42px; font-size:1.3em;}
	.moon--btn--cart { width:42px;}
	
	.ul--moon--buy { padding: 14px;}
	.ul--tab--items li .ul--moon--buy li { 
		width:100%;
	}
}
@media all and (max-width: 480px) {}


/* menu
-------------------------------------------------- */
.btn--menu {
	position: fixed; z-index: 6; right:22px; top:22px; width:84px; height:84px; padding-top: 54px;
	text-align: center;
	font-family: goldenbook, serif;
	font-weight: bold;
	font-style: normal;
	font-size:1.3em;
	color: #fff;
	text-transform: uppercase;
	border:1px solid #fff;
	border-radius: 50px;
	background: rgba(255, 255, 255, .2);
	transition: .6s all;
	filter: drop-shadow(1px 1px 7px rgba(0, 0, 0, 0.4));
}
.btn--menu span { position: absolute; height: 1px; left:18px; background: #fff;}
.btn--menu span:nth-child(1) {top:22px; width:48px;}
.btn--menu span:nth-child(2) {top:32px; width:40px;}
.btn--menu span:nth-child(3) {top:42px; width:32px;}
.btn--menu:hover { cursor: pointer;}
/*---- open  ----*/
.is--open .btn--menu { opacity: 0; visibility: visible;}
/*---- open  ----*/

/*---- menu open ----*/
.btn--menu--open {
	position: absolute; right:40px; top:25px; z-index: 41;
	border:none;
	color: #5f5f5f; transition:.4s all; 
}
.btn--menu--open span { position: absolute; height: 1px; left:0; background: #5f5f5f;}
.btn--menu--open span:nth-child(1) { top:50%; width:40px; transform: rotate(30deg);}
.btn--menu--open span:nth-child(2) { top:50%; width:0;}
.btn--menu--open span:nth-child(3) { top:50%; width:40px; transform: rotate(-30deg);}
.btn--menu--open small { display: block; padding-top: 45px; letter-spacing: 0.24em;}
.btn--menu--open:hover { cursor: pointer;}

.menu--wrapper { position: fixed; right: -100%; top:12px; width:410px;
	padding:85px 0 85px 75px;
	border-radius: 18px 0 0 18px;
	background: #fff;
	box-shadow: 0 0 10px -5px rgba(106,106,106, .3);
	z-index: 31;  transition:.6s all;
	visibility: hidden;
}
/*---- open ----*/
.is--open .menu--wrapper { right: 0; visibility: visible;}
/*---- open ----*/

.main--nav { position: relative; 
	margin-bottom: 4em;	padding-bottom: 4em; 
}
.main--nav::after {
	content:''; position: absolute; bottom:0 ; left: 0; right: 75px;
	width:80%;
	border-bottom:2px dotted #ccc;
}
.main--nav li { position: relative; margin-bottom: 2.4em;}
.main--nav li a { 
	font-family: "goldenbook", YuMincho, "Yu Mincho", serif; 
	font-size:22px; letter-spacing: 0.2em;
}
.main--nav li a small { display: block; margin-top:.65em; font-size:14px; letter-spacing: 0.24em;}

.main--nav li.current a,
.main--nav li a:hover { color: #6cc1ea;}
.main--nav li.current::before {
	content:''; position: absolute; left: 0; top:0; transform: translate(-300%, .5em);
	width:10px; height:10px;
	background: url("../img/top/moon_bl.svg") center center no-repeat;
	background-size:10px auto;
}

@media all and (min-width: 769px), print {
}
@media all and (max-width: 768px) {
	.btn--menu { right:14px; top:14px; width:54px; height:54px; padding-top: 32px; font-size:10px;}
	
	.btn--menu span { left:10px;}
	.btn--menu span:nth-child(1) {top:10px; width:27px;}
	.btn--menu span:nth-child(2) {top:17px; width:23px;}
	.btn--menu span:nth-child(3) {top:24px; width:18px;}
	
	/*---- menu open ----*/
	.menu--wrapper { width:96%;}
}
@media all and (max-width: 480px) {}



@media all and (min-width: 769px), print {}
@media all and (max-width: 768px) {}
@media all and (max-width: 480px) {}



@media all and (min-width: 769px), print {}
@media all and (max-width: 768px) {}
@media all and (max-width: 480px) {}



/* =============================================== */
/* moon index
-------------------------------------------------- */
/* footer
-------------------------------------------------- */
.shop--area { 
	padding: 70px 0 90px;
	background:url("../img/bg_shop@2x.png") center center no-repeat;
	background-size: cover;
	position: relative;
}
@media all and (min-width: 769px), print {
	.shop--area { margin-top: -40px;}
	.ul--ft--shop { display: flex; justify-content: space-between; gap:30px; flex-wrap: wrap; margin:35px auto; align-content:center; max-width:1120px; width:94%;}
	.ul--ft--shop li { max-width:255px; width:22.8%; border-radius: 3px;}
}
@media all and (max-width: 768px) {
	.shop--area { 
		margin-top: -32%; padding: 40px 0 1px;
		background:url("../img/bg_shop@2x.png") center right no-repeat;
		background-size: auto 100%;
	}
	.ul--ft--shop { display: flex; justify-content: space-between; gap:20px; flex-wrap: wrap; margin:35px 4%; align-content:center; }
	.ul--ft--shop li { width:45.8%; border-radius: 3px;}
}
@media all and (max-width: 480px) {}


/* footer
-------------------------------------------------- */
.ul--policy { display: flex; align-items: center;}
.ul--policy li { position: relative; padding: 0 2.2em;}
.ul--policy li::before { content:'|'; position: absolute; left: 0; top:0;}
.ul--policy li:nth-child(1)::before { content:'';}
.ul--policy li a { font-size:1.2em; letter-spacing: .14em; white-space: nowrap;}

.copyright { text-align: center; padding-bottom: 30px; font-size: 1.0em; letter-spacing: 0.14em;}

@media all and (min-width: 769px), print {
	.footer .wrapper {
		display: flex; justify-content: space-between; align-items: center;
		padding:32px 85px 10px;
	}
	.ft_01 { display: flex;}
	.ft_01 .logo { width:212px; margin-right: 10%;}
}
@media all and (max-width: 768px) {
	.footer .logo { padding:2em 30%;}
	.footer p.sp { margin:0 5% 2em; line-height:1.5; font-size:.9em; text-align: center; letter-spacing: 0;}
	
	.ul--policy { justify-content: center; flex-wrap: wrap; margin:0 5% 2em;}
	.ul--policy li { margin-bottom: 1.1em; font-size:1em; letter-spacing: 0;}
}
@media all and (max-width: 480px) {}


/* 
-------------------------------------------------- */
@media all and (min-width: 769px), print {}
@media all and (max-width: 768px) {}
@media all and (max-width: 480px) {}

/* =============================================== */
/* moon index
-------------------------------------------------- */
/* header
-------------------------------------------------- */
header { }
.header .logo { 
	filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.5));
}

@media all and (min-width: 769px), print {
	.header .logo {
		position: fixed;
		top:33px; left: 40px;
		width:146px;
		z-index: 7;
	}
}
@media all and (max-width: 768px) {
	.header .logo {
		position: fixed;
		top:18px; left: 18px;
		width:17.3%;
		z-index: 7;
	}
}
@media all and (max-width: 480px) {}
@media print {}


/* kv--area
-------------------------------------------------- */
.kv--area,
.kv--area .slider--wrap { position: relative; z-index: 5;}

.slick-dots { display: flex; justify-content: center; align-items: center; position: relative; z-index: 5;}
.slick-dots li { padding: 0 10px;}
.slick-dots li button { 
	width:10px; height: 10px; padding: 0; 
	font-size: 0; text-indent: -3000%; overflow: hidden; 
	border:1px solid  #ccd0d1; border-radius: 5px; background: #fff;
}
.slick-active button { opacity: 0;}
.slick-dots li:nth-child(1).slick-active {
	background: url("../img/top/moon_gr.svg") center 4px no-repeat;
	background-size:10px 10px;
}
.slick-dots li:nth-child(2).slick-active {
	background: url("../img/top/moon_pk.svg") center 4px no-repeat;
	background-size:10px 10px;
}
.slick-dots li:nth-child(3).slick-active {
	background: url("../img/top/moon_bl.svg") center 4px no-repeat;
	background-size:10px 10px;
}

@media all and (min-width: 769px), print {
	.kv--area .slider--wrap { padding-bottom:4vw;}
	.kv--area .slider--wrap .item { position: absolute; right: 9%; bottom:0; width:16%;}
	.slick-dots { margin-top: -20px;}
}
@media all and (max-width: 768px) {
	.kv--area .slider--wrap { padding-bottom:6%;}
	.kv--area .slider--wrap .item { position: absolute; right: 4%; bottom:0; width:37%;}
}
@media all and (max-width: 480px) {}
@media print { 
	.kv--area { display: none; opacity: 0; visibility: hidden;} 
}


/* main
-------------------------------------------------- */
.moon--index main {
	position: relative; z-index: 1;
	padding: 145px 0 0;
	background: url("../img/common/bg_pc@2x.jpg") center top no-repeat;
	background-size:cover;
}
.moon--index main section { position: relative;}

@media all and (min-width: 769px), print {
	.moon--index main { margin-top:calc(-4vw)}
}
@media all and (max-width: 768px) {
	.moon--index main {
		margin-top:calc(-6% - 15px);
		padding: 90px 0 0;
		background: url("../img/common/bg_sp@2x.jpg") center 5% no-repeat;
		background-size:cover;
		overflow-x: hidden;
	}
}
@media all and (max-width: 480px) {}


/* slider--movie
-------------------------------------------------- */
.movie--area { padding-bottom: 75px;}
.slider--movie { max-width:94%; width:1120px; margin:45px auto 0;}
.slider--movie div p { margin:1em 0 1em; text-align: center; letter-spacing: 0.14em; font-size:14px;}

.movie--area .slider--wrap { transition:.4s all;}
.movie--area .slider--wrap a { position: relative; display: block;}
.movie--area .slider--wrap span { 
	display: flex; justify-content: center; align-items: center;
	position: absolute; right:14px; bottom:14px; width:40px; height:40px;
	border:1px solid #f00; border-radius: 50%; background: rgba(255, 255, 255, .2);
}
.movie--area .slider--wrap span img { width:20px; height: auto;}

@media all and (min-width: 769px), print {
	.slick-list.draggable { padding: 0 !important;}
	.movie--area .slider--wrap { padding:0 20px;}
}
@media all and (max-width: 768px) {
	.slider--movie { max-width:100%;}
	
	.movie--area .slider--wrap { padding:0 10px;}
	.movie--area .slider--wrap span { right:7px; bottom:7px;}
}
@media all and (max-width: 480px) {}


/* story--area
-------------------------------------------------- */
.story--area {
	padding: 65px 0 150px;
	text-align: center;
}
.story--area .catch {
	max-width:94%; width:312px; margin:55px auto 45px;
}
.story--area p {
	font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
	font-size:16px; font-weight: 500; line-height: 2.5;  letter-spacing: 0.14em;
}
.story--area p + p { margin-top:2.5em;}

.story--img_01 { position: absolute; right:0; top:-6em; z-index: 1;
	width:24.51388888888889%;
}


@media all and (min-width: 769px), print {
	.story--img_02 { position: absolute; right:6.3888888888%; top:0; z-index: 0;}
	.story--img_02 img { position: relative; border-radius: 10px; z-index: 2;}

	.story--img_03 { position: absolute; right:0; top:380px; z-index: 0;}
	.story--img_03 img { position: relative; border-radius: 10px 0 0 10px;  z-index: 2;}

	.story--img_04 { position: absolute; left:0; top:135px; z-index: 0;}
	.story--img_04 img { position: relative; border-radius:0 10px 10px 0; z-index: 2;}

	.story--img_05 { position: absolute; left:0; top:135px; z-index: 1;}
	.story--img_05 img { position: relative; z-index: 1;}
	
	
	.story--img_02 { width:19.444444444%; max-width:280px;}
	
	.story--img_03 { width:22.222222222%; max-width:320px;}
	.story--img_03::after { content:''; position: absolute; left: -41%; bottom: -74px;
		width:260px; height:300px;
		background: url("../img/top/bg_img_02@2x.png") left bottom no-repeat;
		background-size:100% auto; z-index: 1;
	}
	.story--img_04 { width:25.694444444%; max-width:370px;}
	.story--img_04::after { content:''; position: absolute; 
		left: 31%;
		bottom: -167px;
		width: 315px;
		height: 420px;
		background: url("../img/top/bg_img_01@2x.png") right bottom no-repeat;
		background-size:100% auto; z-index: 1;
	}
}
@media all and (max-width: 768px) {
	.story--area { padding-bottom: 33%;}
	.story--area .catch {
		width:auto;
		margin:34px 20% 35px 17%;
	}
	.story--area p { font-size:1.4em;}
	
	.story--img_02 { position: relative; z-index: 0; margin:8% 28% 0 0; }
	.story--img_03 { position: relative; z-index: 0; margin:6.5% 49% 0 0;}
	.story--img_04 { position: relative; z-index: 0; margin:-52% 0 0 64%;}
}
@media all and (max-width: 480px) {}


/* frag--area
-------------------------------------------------- */
.frag--area { padding: 0 0 150px;}

.top--frag .photo { position: relative; z-index: 3;}
.top--frag .txt { z-index: 2;}
.top--frag .txt--inner { position: relative; z-index: 3;}
.top--frag .txt::after {
	content:''; position: absolute; 
	background: rgba(255, 255, 255, .8);
	z-index: 1;
}

.top--frag .txt--inner p { margin-bottom: 1.3em; font-size:1.5em; line-height: 1.6; letter-spacing: 0.1em;}

@media all and (min-width: 769px), print {
	.top--frag {
		position: relative;
		display: flex; flex-direction: row-reverse;
		width:1440px; max-width:100%;
		margin:165px 0 0 auto;
	}
	.top--frag_01 { flex-direction: row; margin:165px auto 0 0;}
	.top--frag_03 { margin-top:125px;}
	
	.top--frag .photo { width:894px; margin-left: 100px;}
	.top--frag .photo img { border-radius: 20px 0 0 20px;}
	.top--frag_01 .photo { margin:0 100px 0 0;}
	.top--frag_01 .photo img { border-radius: 0 20px 20px 0;}
	
	.top--frag .txt {}
	.top--frag .txt--inner { width:290px;}
	.top--frag .txt::after {
		left: 0; top:-65px;
		width:936px; height: 515px;
	}
	.top--frag_01 .txt::after { left: auto; right: 0;}
	
	.top--frag .txt .txt--inner {}
	.top--frag_01 .txt .call { margin:0 -16% 0 -11%;}
	.top--frag_02 .txt .call { margin:0 -20% 0 -10%;}
	.top--frag_03 .txt .call { margin:0 -12% 0 -8%;}
	
	.top--frag .moon--btn_01 a { margin-right: 10px;}
}
@media all and (max-width: 768px) {
	.frag--area { padding-bottom: 24%;}
	
	.top--frag { position: relative; margin-top: 13%; padding-bottom: 9.2%; overflow: hidden;}
	.top--frag_03 { margin-top: 12%;}
	.top--frag .photo { position: relative; z-index: 3; width:100%; transform: translateX(12%);}
	.top--frag_01 .photo { transform: translateX(-12%);}
	
	.top--frag .photo img { border-radius: 12px 0 0 12px;}
	.top--frag_01 .photo img { border-radius: 0 12px 12px 0;}
	
	.top--frag .txt::after { top:42%; height:52%; width:95%;
		margin:-15% 5% 0 0; padding:14% 0 8.6%;}
	.top--frag_01 .txt::after { margin:-15% 0 0 5%;}
	
	.top--frag .txt--inner { margin-top: -8.2%; padding: 0 15.53333%;}
	.top--frag .txt--inner .call { margin-left: -11%; margin-right: 8.5%;}
	.top--frag .txt--inner p { font-size:1.3em; line-height: 1.7;}
}
@media all and (max-width: 480px) {}


/* item--area
-------------------------------------------------- */
.ul--category--tab li {
	display: block;
	font-size:1.4em; text-align: center; line-height: 36px; 
	border: 1px solid #5f5f5f; border-radius: 36px; letter-spacing: .04em; background: #fff;
}
.ul--category--tab li.current { color: #6cc1ea; border-color: #6cc1ea;}
.ul--category--tab li:hover { cursor: pointer;}

.tab--wrapper { position: relative; width:1080px; max-width:94%; margin:0 auto; padding-bottom: 150px; }

.tab_00 { display: none; transition: .4s all;}
.tab_00.active { display: block;}

.ul--tab--items { display: flex;}
.ul--tab--items li {}
.ul--tab--items .photo {}
.ul--tab--items .tag img { height: 25px; margin:25px 0 17px;}
.ul--tab--items p { font-size:1.4em; line-height: 1.5; letter-spacing: .14em;}

.ul--tab--items .btn--area { position: relative; display: flex; justify-content: space-between; margin-top: 20px;}

@media all and (min-width: 769px) {
	.ul--category--tab { display: flex; justify-content: space-between;
		max-width:956px; width:90%; margin: 50px auto 40px;
	}
	.ul--category--tab li { width:19.456%; }
	
	.ul--tab--items { column-gap: 60px;}
	.ul--tab--items li { width:29.63%;}
	
	.moon--btn_01 { width:calc(100% - 58px);}
}
@media all and (max-width: 768px) {
	.ul--category--tab { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin:8% 4% 7%;}
	.ul--category--tab li { padding:0 1.4em;
		font-size:1.1em; line-height: 2.5em; white-space: nowrap;
	}
	
	.wrapper--inner { padding-right: 50px;}
	.ul--tab--items { width:660px; height: 570px; padding:0 3.5%;}
	.ul--tab--items li { width:31%; margin-left: 3.5%;}
	.ul--tab--items li:nth-child(1) { margin-left: 0;}
	
	.ul--tab--items .tag img { height: 16px;}
	.ul--tab--items p { font-size:1.2em;}
	
	.ul--tab--items .btn--area { gap:6px;}
	
	.moon--btn_01 { width:calc(100% - 44px);}
	
	
	.tab_00 .swiper-scrollbar {
		position: relative;		
		width: 89.4%;
		height: 6px;
		margin:-45% 5.3333% 0;
		border-radius: 5px;
		background-color: #fff;
		z-index: -1;
	}
	.tab_00 .swiper-scrollbar-drag {
		height: 6px;
		background-color: #d2e9f8;
		z-index: 2;
	}
}
@media all and (max-width: 480px) {}
@media print {}


/* =============================================== */
/* moon lower
-------------------------------------------------- */
/* 
-------------------------------------------------- */
@media all and (min-width: 769px), print {}
@media all and (max-width: 768px) {}
@media all and (max-width: 480px) {}