@charset "utf-8";

/* ---------------------------------------------------------------
	Base
--------------------------------------------------------------- */
body {
	margin: 0;
	padding: 0;
	color: #000;
	font-size: 18px;
	font-weight: normal;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	line-height: 1.7;
	word-break: normal;
	overflow-wrap: break-word;
	word-wrap: break-word;
	-webkit-font-smoothing: antialiased;
	text-align: center;
}

a {
	color: #333;
	text-decoration: underline;
}

img {
	max-width: 100%;
	height: auto !important;
	display: block;
	margin: auto;
	pointer-events: none;
	-webkit-touch-callout:none;
	user-select:none;
}

ul,li {
	list-style: none;
	margin: 0;
	padding: 0;
}
dl,dd {
	margin: 0;
	padding: 0;
}

#all {
	background: #fff;
}

/* PCのみ */
@media all and (min-width: 751px) {
	body {
		background-color: #fff1f1;
	}
	#all {
		width: 400px;
		margin: auto;
		box-shadow: 0px 0px 30px 0px rgb(0 0 0 / 15%);
		overflow: hidden;
	}
	
	a,
	a img {
		-webkit-transition: 0.3s;
		-moz-transition: 0.3s;
		-o-transition: 0.3s;
		-ms-transition: 0.3s;
		transition: 0.3s;
		-webkit-transition-property: opacity;
		-ms-transition-property: opacity;
		transition-property: opacity;
	}
	a:hover {
		text-decoration: none;
		opacity: 0.7;
	}
	a:hover img {
		opacity: 0.7;
		filter: alpha(opacity=70);
		-ms-filter: "alpha( opacity=70 )";
	}
}
/* SPのみ */
@media all and (max-width: 750px) {
	body {
		width: 100%;
	}
	#all {
		width: 100%;
		overflow: hidden;
	}
}

/* ---------------------------------------------------------------
	Content
--------------------------------------------------------------- */
article > div {
	position: relative;
}
.pr {
	position: relative;
}
.pa {
	position: absolute;
}
.z2 {
	z-index: 2;
}
.z3 {
	z-index: 3;
}
.elmFv_01 {
    top: 65.5%;
    left: 83.6%;
}
.elmFv_02 {
    top: 79%;
    left: 41%;
}
.elmFv_03 {
    top: 75.3%;
    left: 67.1%;
}
.elmFv_04 {
    top: 32.9%;
    left: 2.1%;
}
.elmFv_05 {
    top: 67.8%;
    left: 3%;
}
.elmFv_06 {
    top: 74.4%;
    left: 20%;
}
.elmFv_07 {
    top: 18.8%;
    left: 43%;
}
.elmFv_08 {
    top: 45.2%;
    left: 88.2%;
}
.elmFv_09 {
    top: 34.5%;
    left: 86.3%;
}
.elmFv_10 {
    top: 23.2%;
    left: 19.6%;
}
.elmFv_11 {
    top: 47%;
    left: 1.6%;
}
.elmFv_12 {
    top: 21.1%;
    left: 67.1%;
}
.elm02_01 {
    top: 7.2%;
    left: 0;
}
.elm02_02 {
    top: 5.1%;
    left: 16.3%;
}
.elm02_03 { top: 26.7%; }
.elm02_03-1 { left: 13.2%; }
.elm02_03-2 { left: 32%; }
.elm02_03-3 { left: 50.8%; }
.elm02_03-4 { left: 69.3%; }
.elm02_04 { top: 47.4%; }
.elm02_04-1 { left: 13.4%; }
.elm02_04-2 { left: 32%; }
.elm02_04-3 { left: 50.7%; }
.elm02_04-4 { left: 69.2%; }
.btnList {
	display: flex;
	margin: auto;
	top: 19.2%;
	left: 0;
	right: 0;
	flex-wrap: wrap;
	justify-content: center;
}
.elm04_01 {
    top: 4.2%;
    left: 0;
}
.elm04_dc01 {
    top: 11.2%;
    left: 0;
}
.elm04_dc02 {
    top: 19.7%;
    left: 13.3%;
}
.elm04_dc03 {
    top: 19.7%;
    right: 0;
}
.elm04_dc04 {
    top: 10.9%;
    left: 84.2%;
}
.elm04_02 {
    top: 29.5%;
    left: 0;
}
.elm04_03 {
    top: 48.2%;
    left: 0;
}
.elm04_04 {
    top: 66.9%;
    left: 0;
}

/* SP */
@media all and (max-width: 750px) {
	.elmFv_01 {	width: calc(111vw / 750 * 100); }
	.elmFv_02 { width: calc(133vw / 750 * 100); }
	.elmFv_03 { width: calc(126vw / 750 * 100); }
	.elmFv_04 { width: calc(93vw / 750 * 100); }
	.elmFv_05 { width: calc(89vw / 750 * 100); }
	.elmFv_06 { width: calc(103vw / 750 * 100); }
	.elmFv_07 {	width: calc(108vw / 750 * 100); }
	.elmFv_08 { width: calc(74vw / 750 * 100); }
	.elmFv_09 { width: calc(76vw / 750 * 100); }
	.elmFv_10 { width: calc(100vw / 750 * 100); }
	.elmFv_11 { width: calc(75vw / 750 * 100); }
	.elmFv_12 { width: calc(95vw / 750 * 100); }
	.elm02_02 { width: calc(94vw / 750 * 100); }
	.elm02_03,.elm02_04 { width: calc(140vw / 750 * 100); }
	.btnList { gap: calc(24vw / 750 * 100); }
	.btnList li { width: calc(189vw / 750 * 100); }
	.elm04_dc01 { width: calc(49vw / 750 * 100); }
	.elm04_dc02 { width: calc(73vw / 750 * 100); }
	.elm04_dc03 { width: calc(43vw / 750 * 100); }
	.elm04_dc04 { width: calc(77vw / 750 * 100); }
}
@media all and (min-width: 751px) {
	.elmFv_01 { width: calc(111 / 750 * 400px); }
	.elmFv_02 { width: calc(133 / 750 * 400px); }
	.elmFv_03 { width: calc(126 / 750 * 400px); }
	.elmFv_04 { width: calc(94 / 750 * 400px); }
	.elmFv_05 { width: calc(89 / 750 * 400px); }
	.elmFv_06 { width: calc(103 / 750 * 400px); }
	.elmFv_07 { width: calc(108 / 750 * 400px); }
	.elmFv_08 { width: calc(74 / 750 * 400px); }
	.elmFv_09 { width: calc(76 / 750 * 400px); }
	.elmFv_10 { width: calc(100 / 750 * 400px); }
	.elmFv_11 { width: calc(75 / 750 * 400px); }
	.elmFv_12 { width: calc(95 / 750 * 400px); }
	.elm02_02 { width: calc(94 / 750 * 400px); }
	.elm02_03,.elm02_04 { width: calc(140 / 750 * 400px); }
	.btnList { gap: calc(24 / 750 * 400px); }
	.btnList li { width: calc(189 / 750 * 400px); }
	.elm04_dc01 { width: calc(49 / 750 * 400px); }
	.elm04_dc02 { width: calc(73 / 750 * 400px); }
	.elm04_dc03 { width: calc(43 / 750 * 400px); }
	.elm04_dc04 { width: calc(77 / 750 * 400px); }
}

/* ---------------------------------------------------------------
	Footer
--------------------------------------------------------------- */
footer {
	background-image:url("img/bg-ft.jpg");
	background-position: top center;
	background-repeat: no-repeat;
	background-size: 100%;
	padding: 0 0 5%;
	font-size: 19.5px;
	box-sizing: border-box;
}
.logo {
	display: inline-block;
}
footer ul {
	margin-top: 8%;
	list-style: none;
	display: flex;
	justify-content: center;
}
footer ul li {
	padding: 0 1em;
	line-height: 1;
	color: #000000;
}
footer ul li:first-child {
	border-right: 1px solid #000000;
}
footer ul li a {
	color: #000000;
	text-decoration: none;
}
address {
	font-style: normal;
	line-height: 2;
	color: #000000;
}
.txt-att {
	display: block;
	margin-top: 4%;
}
/* SP */
@media all and (max-width: 750px) {
	footer {
		font-size: calc(19.5vw / 750 * 100);
	}
	.logo {
		width: calc(468vw / 750 * 100);
	}
}
@media all and (min-width: 751px) {
	footer {
		font-size: calc(19.5 / 750 * 400px);
	}
	.logo {
		width: calc(468 / 750 * 400px);
	}
}

/* ---------------------------------------------------------------
	星座プルダウン
--------------------------------------------------------------- */
.acMenuMore {
	z-index: 3;
	position: relative;
}
.acMenuMore .acdtMore {
	text-indent: -9999px;
	background-repeat: no-repeat;
	background-size:100% auto;
	display:block;
	text-align:center;
	cursor:pointer;
	margin: auto;
	margin-left: 22.4%;
	transition: 0.3s;
}
.secBox {
	padding-bottom: 5%;
}
.acMenuMore .acdtMore{
	background-image:url("img/btn_more.png");
}
.acMenuMore .acdtMore.active{
	background-image:url("img/btn_more_up.png");
}
.acMenuMore dd {
	text-align:center;
	display:none;
}
.acMenuMore dd a {
	display: block;
}
.acMenuMore dd img {
	width: 100%;
}
.sec .btnMore { margin: -22% auto 0; }

.sec01 .acMenu dt{ background-image:url("img/sec01/btn_link_down.png"); }
.sec01 .acMenu dt.active{ background-image:url("img/sec01/btn_link_up.png"); }

.sec02 .acMenu dt{ background-image:url("img/sec02/btn_link_down.png"); }
.sec02 .acMenu dt.active{ background-image:url("img/sec02/btn_link_up.png"); }

.sec03 .acMenu dt{ background-image:url("img/sec03/btn_link_down.png"); }
.sec03 .acMenu dt.active{ background-image:url("img/sec03/btn_link_up.png"); }

.sec04 .acMenu dt{ background-image:url("img/sec04/btn_link_down.png"); }
.sec04 .acMenu dt.active{ background-image:url("img/sec04/btn_link_up.png"); }

.sec05 .acMenu dt{ background-image:url("img/sec05/btn_link_down.png"); }
.sec05 .acMenu dt.active{ background-image:url("img/sec05/btn_link_up.png"); }

.sec06 .acMenu dt{ background-image:url("img/sec06/btn_link_down.png"); }
.sec06 .acMenu dt.active{ background-image:url("img/sec06/btn_link_up.png"); }

.sec07 .acMenu dt{ background-image:url("img/sec07/btn_link_down.png"); }
.sec07 .acMenu dt.active{ background-image:url("img/sec07/btn_link_up.png"); }

.sec08 .acMenu dt{ background-image:url("img/sec08/btn_link_down.png"); }
.sec08 .acMenu dt.active{ background-image:url("img/sec08/btn_link_up.png"); }

.sec09 .acMenu dt{ background-image:url("img/sec09/btn_link_down.png"); }
.sec09 .acMenu dt.active{ background-image:url("img/sec09/btn_link_up.png"); }

.sec10 .acMenu dt{ background-image:url("img/sec10/btn_link_down.png"); }
.sec10 .acMenu dt.active{ background-image:url("img/sec10/btn_link_up.png"); }

.sec11 .acMenu dt{ background-image:url("img/sec11/btn_link_down.png"); }
.sec11 .acMenu dt.active{ background-image:url("img/sec11/btn_link_up.png"); }

.sec12 .acMenu dt{ background-image:url("img/sec12/btn_link_down.png"); }
.sec12 .acMenu dt.active{ background-image:url("img/sec12/btn_link_up.png"); }

.sec01 .ill { top: 5.6%; left: 66.4%; }
.sec01 .btnMore { margin: -27% auto 0; }
.sec01 .txt { top: 41.9%; left: 0; }
.sec01 .pulldown { top: 86.9%; }

.sec02 .ill { top: 7.3%; left: 5.1%; }
.sec02 .txt { top: 40%; left: 0; }
.sec02 .pulldown { top: 83.3%; }

.sec03 .ill { top: 6.1%; left: 66%; }
.sec03 .txt { top: 38.6%; left: 0; }
.sec03 .pulldown { top: 82.8%; }

.sec04 .ill { top: 4.7%; left: 4%; }
.sec04 .txt { top: 41.6%; left: 0; }
.sec04 .pulldown { top: 86.5%; }

.sec05 .ill { top: 6.3%; left: 73.3%; }
.sec05 .txt { top: 41.4%; left: 0; }
.sec05 .pulldown { top: 87.1%; }

.sec06 .ill { top: 3.6%; left: 0.5%; }
.sec06 .txt { top: 41.9%; left: 0; }
.sec06 .pulldown { top: 87%; }

.sec07 .ill { top: 5.6%; left: 71.7%; }
.sec07 .txt { top: 41.7%; left: 0; }
.sec07 .pulldown { top: 87.2%; }

.sec08 .ill { top: 4.3%; left: 3.8%; }
.sec08 .txt { top: 41.9%; left: 0; }
.sec08 .pulldown { top: 87.1%; }

.sec09 .ill { top: 6.1%; left: 72.5%; }
.sec09 .txt { top: 41.8%; left: 0; }
.sec09 .pulldown { top: 87.1%; }

.sec10 .ill { top: 6%; left: 5.2%; }
.sec10 .txt { top: 39.4%; left: 0; }
.sec10 .pulldown { top: 82.3%; }

.sec11 .ill { top: 5.6%; left: 76.8%; }
.sec11 .txt { top: 40%; left: 0; }
.sec11 .pulldown { top: 83.3%; }

.sec12 .ill { top: 4.6%; left: 5.7%; }
.sec12 .txt { top: 41.3%; left: 0; }
.sec12 .pulldown { top: 87.1%; }

@media all and (max-width: 750px) {
	.acdlMore .acdtMore {
		width: calc(434vw / 750 * 100);
		height: calc(111vw / 750 * 100);
	}
	.sec { min-height: calc(589vw / 750 * 100); }

	.sec01 .ill { width: calc(211vw / 750 * 100); }
	.sec02 .ill { width: calc(249vw / 750 * 100); }
	.sec03 .ill { width: calc(226vw / 750 * 100); }
	.sec04 .ill { width: calc(233vw / 750 * 100); }
	.sec05 .ill { width: calc(169vw / 750 * 100); }
	.sec06 .ill { width: calc(186vw / 750 * 100); }
	.sec07 .ill { width: calc(183vw / 750 * 100); }
	.sec08 .ill { width: calc(202vw / 750 * 100); }
	.sec09 .ill { width: calc(158vw / 750 * 100); }
	.sec10 .ill { width: calc(196vw / 750 * 100); }
	.sec11 .ill { width: calc(142vw / 750 * 100); }
	.sec12 .ill { width: calc(170vw / 750 * 100); }
}
@media all and (min-width: 751px) {
	.acdlMore .acdtMore {
		width: calc(434 / 750 * 400px);
		height: calc(111 / 750 * 400px);
	}
	.sec { min-height: calc(589 / 750 * 400px); }

	.sec01 .ill { width: calc(211 / 750 * 400px); }
	.sec02 .ill { width: calc(249 / 750 * 400px); }
	.sec03 .ill { width: calc(226 / 750 * 400px); }
	.sec04 .ill { width: calc(233 / 750 * 400px); }
	.sec05 .ill { width: calc(169 / 750 * 400px); }
	.sec06 .ill { width: calc(186 / 750 * 400px); }
	.sec07 .ill { width: calc(183 / 750 * 400px); }
	.sec08 .ill { width: calc(202 / 750 * 400px); }
	.sec09 .ill { width: calc(158 / 750 * 400px); }
	.sec10 .ill { width: calc(196 / 750 * 400px); }
	.sec11 .ill { width: calc(142 / 750 * 400px); }
	.sec12 .ill { width: calc(170 / 750 * 400px); }

	
	.acdlMore .acdtMore:hover {
		opacity: 0.7;
	}
}


/* ---------------------------------------------------------------
	プルダウンリンクボタン
--------------------------------------------------------------- */
.acMenu {
	z-index: 3;
	position: relative;
}
.acMenu dt {
	text-indent: -9999px;
	background-repeat: no-repeat;
	background-size:100% auto;
	display:block;
	text-align:center;
	cursor:pointer;
	transition: 0.3s;
}
.acMenu dt{
	background-image:url("img/btn_link_down.png");
}
.acMenu dt.active{
	background-image:url("img/btn_link_up.png");
}
.acMenu dd {
	text-align:center;
	display:none;
}
.acMenu dd a {
	display: block;
}
.acMenu dd img {
	width: 100%;
}
.acdl dt {
	transition: 0.3s;
}
.store_btn {
	position: absolute;
	left: 0;
	right: 0;
	display: block;
	margin: auto;
	z-index: 4;
	margin-left: 7%;
}
.pulldown_02 {
	top: 85.2%;
}

@media all and (max-width: 750px) {
	.store_btn,.acdl dt {
		width: calc(659vw / 750 * 100);
		height: calc(114vw / 750 * 100);
	}
	.acdl dd a {
		margin-top: 1.5vw;
	}
}
@media all and (min-width: 751px) {
	.acdl dt:hover {
		background-image:url("img/btn_link_down_h.png");
	}
	.acMenu dt.active:hover {
		background-image:url("img/btn_link_up_h.png");
	}
	.store_btn,.acdl dt {
		width: calc(659 / 750 * 400px);
		height: calc(114 / 750 * 400px);
	}
	.acdl dd a {
		margin-top: 6px;
	}
}


/* ---------------------------------------------------------------
	Animation
--------------------------------------------------------------- */
.fadein-top {
	opacity: 0;
	transition: all .5s ease-in-out;
}
.fadein-top.scrollin-top {
	opacity: 1;
	transform: translate(0, 0) scale(1);
}
.fadein,.fadeinAcd,.order {
	opacity: 0;
	transition: all .5s;
}
.anim-up {
	transform: translate(0, 20px);
}
.anim-down {
	transform: translate(0, -20px);
}
.anim-zoom {
	transform: scale(0.8);
}
.fadein.scrollin,
.fadeinAcd.scrollin,
.order.scrollin {
	opacity: 1;
	transform: translate(0, 0) scale(1);
}
.fadein.delay05s {
	transition-delay: 0.5s;
}
.anim-pico01 {
    animation: pico01 2s linear infinite;
}
@keyframes pico01 {
	0% {transform: rotate(-3deg);}
    50% {transform: rotate(-3deg);}
    51% {transform: rotate(3deg);}
    100% {transform: rotate(3deg);}
}
.anim-pico02 {
    animation: pico02 2s linear infinite;
}
@keyframes pico02 {
	0% {transform: rotate(3deg);}
    50% {transform: rotate(3deg);}
    51% {transform: rotate(-3deg);}
    100% {transform: rotate(-3deg);}
}

.anim-flash01 {
	animation: flash01 3s ease-in-out infinite alternate;
}
@keyframes flash01 {
	0%    { opacity: 0; }
    30%,70%   { opacity: 1; }
    100%  { opacity: 0; }
}
.anim-flash02 {
	animation: flash02 2.7s ease-in-out infinite alternate;
}
@keyframes flash02 {
	0%,10%    { opacity: 1; }
    50%   { opacity: 0; }
    70%,100%  { opacity: 1; }
 }
.anim-flash03 {
	animation: flash03 2.6s ease-in-out infinite alternate;
}
@keyframes flash03 {
	0%    { opacity: 0; }
    10%,50%   { opacity: 1; }
    100%  { opacity: 0; }
}
.anim-flash04 {
	animation: flash04 2.5s ease-in-out infinite alternate;
}
@keyframes flash04 {
	0%    { opacity: 1; }
    40%,60%   { opacity: 0; }
    80%,100%  { opacity: 1; }
 }

.anim-yura01 {
    animation: yura01 3s linear infinite;
}
@keyframes yura01 {
  0% , 100%{  transform: rotate(7deg); }
  50%{  transform: rotate(-7deg); }
}
.anim-yura03 {
    animation: yura02 3s linear infinite;
}
@keyframes yura02 {
  0% , 100%{  transform: rotate(-7deg); }
  50%{  transform: rotate(7deg); }
}
.anim-yura04 {
    animation: yura01 3s linear infinite;
	animation-delay: -1s;
}
.anim-yura02 {
    animation: yura02 3s linear infinite;
	animation-delay: -1s;
}