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

body{
	font-family: 'Noto Sans JP','ヒラギノ角ゴシック','Hiragino Sans',YuGothic,'Yu Gothic','Yu Gothic UI',sans-serif;
	background: #ffffff;
	width: 100%;
	margin: 0;
	padding: 0;
}
#content{
	display: none;
}
a{
	text-decoration: none;
	color: #000000;
}
ul{
	list-style: none;
	padding: 0;
}
img{
	width: 100%;
	vertical-align: bottom;
}
h1, h2, h3, h4, h5, p{
	margin: 0;
	padding: 0;
}
h1 img, h2 img, h3 img, p img{
	line-height: 0;	
}
#content{
	position: relative;
	width: 100%;
	overflow: hidden;
	height: auto;
	background: #ffffff;
}
p{
	font-size: calc(22/750*100vw);
	line-height: calc(32/750*100vw);
	font-weight: 500;
	font-feature-settings: "palt";
	letter-spacing: 0.3vw;
}
@media all and (min-width: 751px){
	body{
		width: 400px;
		margin: 0 auto;
		background-image: url("img/bg.jpg");
		background-repeat: repeat;
	}
	
	p{
		font-size: calc(22/750*400px);
		line-height: calc(32/750*400px);
		letter-spacing: 1px;
	}
	#content{
		width: 400px;
		-webkit-box-shadow: 0px 0px 30px 0px rgb(212 183 168 / 90%);
		box-shadow: 0px 0px 30px 0px rgb(212 183 168 / 90%);
	}
}
/* --------------- bt-buy ---------------------- */
.bt-buy {
	width: calc(322/750*100vw);
	z-index: 50;
}
.bt-buy > div {
	position: relative;
}
.bt-buy_main {
	cursor: pointer;
}
.bt-buy_pulldown {
	overflow: hidden;
	position: absolute;
	top: 0.3vw;
	height: 0;
	width: calc(322/750*100vw);
	display: block;
	opacity: 0;
	transition: all .4s;
}
.bt-buy_pulldown a{
	display: block;
	cursor: pointer;
}
.bt-buy_pulldown a:first-of-type{
	margin-bottom: 0.5vw;
}
.bt-buy_pulldown a img{	
	width: 100%;
}
.bt-buy_pulldown.bt-buy_pulldown_active {
	height: 21vw;
	opacity: 1;
	transition: all .4s;
}
.bt-buy_main:after {
	content: "";
	display: inline-block;
	width: calc(17/750*100vw);
	height: calc(10/750*100vw);
	position:absolute;
	top: 4.1vw;
	right: 4.2vw;
	transition: 0.3s;
	background:url("img/bt-arrow.png") no-repeat right top;
	background-size: calc(17/750*100vw);
}
.bt-buy_main.bt-buy_main_active:after {
	transform: translateY(-50%) rotate(180deg);
	transform-origin:50% 70%;
	transition: 0.3s;
}
@media all and (min-width: 751px){
	.bt-buy {
		width: 172px;
	}
	.bt-buy_pulldown {
		top: 3px;
		height: 0;
		width: calc(322/750*400px);
	}
	.bt-buy_pulldown a:first-of-type{
		margin-bottom: 3px;
	}
	.bt-buy_pulldown.bt-buy_pulldown_active {
		 height: 79.4px;
	}
	.bt-buy_main:after {
		width: calc(17/750*400px);
		height: calc(10/750*400px);
		top: 17px;
		right: 17px;
		background-size: calc(17/750*400px);
	}
}


/* --------------- header ----------------------- */
header{
	position: relative;
	height: 161vw;
}
.bg-top{
	position: absolute;
}
h1, .ph-top{
	z-index: 2;
	position: absolute;
}
h1{
	top: 76vw;
}
h1 img:nth-of-type(2){
	margin-top: 1vw;
}

@media all and (min-width: 751px){
	header{
		height: 640px;
	}
	h1{
		top: 304px;
	}
	h1 img:nth-of-type(2){
		margin-top: 4px;
	}
}

/* --------------- 01-chart ----------------------- */
#chart{
	position: relative;
	height: 182vw;
}
.bg-chart{
	position: absolute;
}
#chart h2, .bt-chart, .bt-chart li{
	position: absolute;
	z-index: 2;
}
#chart h2{
	top: 26vw;
}

.bt-chart{
	width: 100%;
	top: 134vw;
	list-style: none;
}
.bt-chart li{
	display: block;
	cursor: pointer;
}
.bt-chart li a{
	display: block;
	width: 100%;
	cursor: pointer;
}
.bt-chart li:nth-child(1){
	width: calc(201/750*100vw);
	left: calc(22/750*100vw);
}
.bt-chart li:nth-child(2){
	width: calc(170/750*100vw);
	left: calc(220/750*100vw);
}
.bt-chart li:nth-child(3){
	width: calc(145/750*100vw);
	left: calc(389/750*100vw);
}
.bt-chart li:nth-child(4){
	width: calc(148/750*100vw);
	left: calc(547/750*100vw);
}
@media all and (min-width: 751px){
	#chart{
		height: 736px;
	}
	#chart h2{
		top: 103px;
	}
	.bt-chart{
		top: 530px;
	}
	.bt-chart li:nth-child(1){
		width: calc(201/750*400px);
		left: calc(22/750*400px);
	}
	.bt-chart li:nth-child(2){
		width: calc(170/750*400px);
		left: calc(220/750*400px);
	}
	.bt-chart li:nth-child(3){
		width: calc(145/750*400px);
		left: calc(389/750*400px);
	}
	.bt-chart li:nth-child(4){
		width: calc(148/750*400px);
		left: calc(547/750*400px);
	}
}


/* --------------- point-01 ----------------------- */
#point01{
	position: relative;
	height: 494vw;
}
.bg-01{
	position: absolute;
}
#point01 h2{
	position: absolute;
	z-index: 2;
	top: 10vw;
}
.p_and_bt{
	text-align: center;
	width: calc(322/750*100vw);
	right: 0;
	margin-right: calc(50/750*100vw);
}
.p_and_bt p{
	margin-bottom: 2vw;
}
#point01_item_A, #point01_item_B, #point01_item_C, #point01_item_D{
	position: absolute;
}
.point01_item_child{
	position: relative;
}
.ph-01_item{
	position: absolute;
	z-index: 2;
}
.tx-01_item_A, .tx-01_item_B,
.tx-01_item_C, .tx-01_item_D, .p_and_bt{
	position: absolute;
	z-index: 3;
}
.point01_item_child{
	width: 100%;
	height: 100%;	
}
#point01_item_A{ top: 127vw; width: 100%; height: 65vw; }
.tx-01_item_A{ top: 6vw; }
.p_and_bt_A{ top: 32vw; }

#point01_item_B{ top: 223vw; width: 100%; height: 65vw; }
.tx-01_item_B{ top: 5vw; }
.p_and_bt_B{ top: 31vw; }

#point01_item_C{ top: 320vw; width: 100%; height: 65vw; }
.tx-01_item_C{ top: 5vw; }
.p_and_bt_C{ top: 36vw; }

#point01_item_D{ top: 411vw; width: 100%; height: 65vw;	}
.tx-01_item_D{ top: 5vw; }
.p_and_bt_D{ top: 36vw; }

#point02 .bt-buy, #point03 .bt-buy, #point04 .bt-buy,
#point05 .bt-buy, #point06 .bt-buy, #point07 .bt-buy{
	left: calc(291/750*100vw);
}
@media all and (min-width: 751px){
	#point01{
		height: 1971px;
	}
	#point01 h2{
		top: 40px;
	}
	.p_and_bt{
		width: calc(322/750*400px);
		margin-right: calc(50/750*400px);
	}
	.p_and_bt p{
		margin-bottom: 10px;
	}
	#point01_item_A{ top: 509px; height: 264px; }
	.tx-01_item_A{ top: 22px; }
	.p_and_bt_A{ top: 124px; }

	#point01_item_B{ top: 891px; height: 264px; }
	.tx-01_item_B{ top: 22px; }
	.p_and_bt_B{ top: 123px; }

	#point01_item_C{ top: 1278px; height: 264px; }
	.tx-01_item_C{ top: 19px; }
	.p_and_bt_C{ top: 142px; }

	#point01_item_D{ top: 1644px; height: 264px; }
	.tx-01_item_D{ top: 17px; }
	.p_and_bt_D{ top: 140px; }

	#point02 .bt-buy, #point03 .bt-buy, #point04 .bt-buy,
	#point05 .bt-buy, #point06 .bt-buy, #point07 .bt-buy{
		left: calc(291/750*400px);
	}	
}

/* --------------- point-02 ----------------------- */
#point02{
	position: relative;
	height: 191vw;
}
.bg-02{
	position: absolute;
}
#point02 h2, #point02 .bt-buy, .tx-02_point{
	position: absolute;
}
#point02 h2{
	top: 9vw;
	z-index: 2;
}
#point02 .bt-buy{
	top: 142vw;
}
.tx-02_point{
	top: 162vw;
	z-index: 2;
}
@media all and (min-width: 751px){
	#point02{
		height: 765px;
	}
	#point02 h2{
		top: 34px;
	}
	#point02 .bt-buy{
		top: 570px;
	}
	.tx-02_point{
		top: 652px;
	}	
}



/* --------------- point-03 ----------------------- */
#point03{
	position: relative;
	height: 220vw;
}
.bg-03{
	position: absolute;
}
#point03 h2, #point03 .bt-buy, .tx-03_point{
	position: absolute;
}
#point03 h2{
	top: 16vw;
	z-index: 2;
}
#point03 .bt-buy{
	top: 136vw;
}
.tx-03_point{
	top: 168vw;
	z-index: 2;
}
@media all and (min-width: 751px){
	#point03{
		height: 875px;
	}
	#point03 h2{
		top: 64px;
	}
	#point03 .bt-buy{
		top: 547px;
	}
	.tx-03_point{
		top: 670px;
	}
}


/* --------------- point-04 ----------------------- */
#point04{
	position: relative;
	height: 193vw;
}
.bg-04{
	position: absolute;
}
#point04 h2, #point04 .bt-buy, .tx-04_point{
	position: absolute;
}
#point04 h2{
	top: 10vw;
	z-index: 2;
}
#point04 .bt-buy{
	top: 114vw;
}
.tx-04_point{
	top: 144vw;
	z-index: 2;
}
@media all and (min-width: 751px){
	#point04{
		height: 774px;
	}
	#point04 h2{
		top: 39px;
	}
	#point04 .bt-buy{
		top: 454px;
	}
	.tx-04_point{
		top: 578px;
	}	
}


/* --------------- point-05 ----------------------- */
#point05{
	position: relative;
	height: 209vw;
}
.bg-05{
	position: absolute;
}
#point05 h2, #point05 .bt-buy, .tx-05_point{
	position: absolute;
}
#point05 h2{
	top: 11.5vw;
	z-index: 2;
}
#point05 .bt-buy{
	top: 126vw;
}
.tx-05_point{
	top: 158vw;
	z-index: 2;
}
@media all and (min-width: 751px){
	#point05{
		height: 840px;
	}
	#point05 h2{
		top: 46px;
	}
	#point05 .bt-buy{
		top:500px;
	}
	.tx-05_point{
		top: 631px;
	}
}


/* --------------- point-06 ----------------------- */
#point06{
	position: relative;
	height: 197vw;
}
.bg-06{
	position: absolute;
}
#point06 h2, #point06 .bt-buy, .tx-06_point{
	position: absolute;
}
#point06 h2{
	top: 9vw;
	z-index: 2;
}
#point06 .bt-buy{
	top: 132vw;
}
.tx-06_point{
	top: 166vw;
	z-index: 2;
}
@media all and (min-width: 751px){
	#point06{
		height: 786px;
	}
	#point06 h2{
		top: 37px;
	}
	#point06 .bt-buy{
		top: 528px;
	}
	.tx-06_point{
		top: 665px;
	}	
}



/* --------------- point-07 ----------------------- */
#point07{
	position: relative;
	height: 224vw;
}
.bg-07{
	position: absolute;
}
#point07 h2, #point07 .bt-buy, .tx-07_point{
	position: absolute;
}
#point07 h2{
	top: 11vw;
	z-index: 2;
}
#point07 .bt-buy{
	top: 146vw;
}
.tx-07_point{
	top: 179.5vw;
	z-index: 2;
}
@media all and (min-width: 751px){
	#point07{
		height: 884px;
	}
	#point07 h2{
		top: 44px;
	}
	#point07 .bt-buy{
		top: 584px;
	}
	.tx-07_point{
		top: 719px;
	}	
}

/* --------------- 08_lineup ---------------------- */
#lineup{
	position: relative;
	height: 281vw;
}
.tx-lineup_title{
	z-index: 2;
	position: absolute;
	top:0;
	width: calc(635/750*100vw);
	right: 0;
	left: 0;
	margin: 0 auto;
}
#lineup ul li{
	z-index: 2;
	width: calc(320/750*100vw);
	text-align: center;
	position: absolute;
}
#lineup ul li p{
	margin-bottom: 2vw;
}
#lineup ul li:nth-of-type(1){
	top: 74vw;
	left: calc(50/750*100vw);
}
#lineup ul li:nth-of-type(2){
	top: 74vw;
	right: calc(50/750*100vw);
}
#lineup ul li:nth-of-type(3){
	top: 157vw;
	left: calc(50/750*100vw);
}
#lineup ul li:nth-of-type(4){
	top: 157vw;
	right: calc(50/750*100vw);
}
#lineup ul li:nth-of-type(5){
	top: 238vw;
	right: 0;
	left: 0;
	margin: 0 auto;
}
@media all and (min-width: 751px){
	#lineup{
		height: 1124px;
	}
	.tx-lineup_title{
		width: calc(635/750*400px);
	}
	#lineup ul li{
		width: calc(320/750*400px);
	}
	#lineup ul li p{
		margin-bottom: 8px;
	}
	#lineup ul li:nth-of-type(1){
		top: 292px;
		left: calc(50/750*400px);
	}
	#lineup ul li:nth-of-type(2){
		top: 292px;
		right: calc(50/750*400px);
	}
	#lineup ul li:nth-of-type(3){
		top: 624px;
		left: calc(50/750*400px);
	}
	#lineup ul li:nth-of-type(4){
		top: 624px;
		right: calc(50/750*400px);
	}
	#lineup ul li:nth-of-type(5){
		top: 948px;
	}	
}


/* --------------- footer ---------------------- */
footer{
	position: relative;
	height: 80vw;
	background-image: url("img/bg-ft.jpg");
	background-repeat: no-repeat;
	background-size: 100%;
	background-position: center top;
}
.logo{
	width: calc(468/750*100vw);
	margin: 0 auto;
	padding: 12vw 0 6vw;
}
.logo a{
	display: block;
}
.link_text{
	top:40vw;
	line-height: 2.5vw;
}
.link_text ul {
    text-align: center;
	margin: 0 auto;
	padding-bottom: 1vw;
}
.link_text ul li{
	display: inline-block;
	padding: 0 1vw;
	position: relative;
}
.link_text ul li:first-child{
	border-right: solid .1ex #000000;
	padding-right: 3vw;
}
.link_text ul li a{
	font-size:2.5vw;
	font-weight: 300;
}
.link_text p{
	text-align: center;
	margin: 0 auto;
	font-size:2.2vw;
	font-weight: 300;
}

.link_text p.footer_cr_t{
	margin-top: 3vw;
}
@media all and (min-width: 751px){
	footer{
		height: 352px;
	}
	.logo{
		width: calc(468/750*400px);
		padding: 54px 0 30px;
	}
	.link_text{
		top:80px;
		line-height: 16px;
	}
	.link_text ul {
		padding-bottom: 4px;
	}
	.link_text ul li{
		padding: 0 6px;
	}
	.link_text ul li:first-child{
		border-right: solid .1px #000000;
		padding-right: 12px;
	}
	.link_text ul li a{
		font-size:12px;
	}
	.link_text p{
		font-size:12px;
	}
	.link_text p.footer_cr_t{
		margin-top: 20px;
	}
}

#banner{
	z-index: 99;
	position:fixed;
	bottom: 0;
	display: block;
	width: 100%;
	margin: 0 auto;
}
#banner a{
	display: block;
}
@media all and (min-width: 751px){
	#banner{
		width: 400px;	
	}
}

/* --------------- hover-animation ---------------------- */
@media all and (min-width: 751px){
	#banner a, .link_text ul li a, .logo a,
	.bt-buy_main, .bt-buy_pulldown a, .bt-chart li{
		transition : all .3s;
		opacity: 1;
	}
	#banner a:hover, .link_text ul li a:hover, .logo a:hover,
	.bt-buy_main:hover, .bt-buy_pulldown a:hover, .bt-chart li:hover{
		transition : all .3s;
		opacity: 0.7;
	}
}


/* --------------- inview-animation ---------------------- */
.fadein{
	transition : all .6s;
	transition-delay: .2s;
}
.anim-top-title_1{
	animation-name: katakata;
	animation-duration: 6s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: 1;
	animation-delay: .2s;
}
@keyframes katakata {
  0% {transform:translate(0, 0) rotate(0deg);}
  21% {transform:translate(0, 0) rotate(0deg);}
 
  22% {transform:translate(0, 0) rotate(-2deg);}
  23% {transform:translate(0, 0) rotate(0deg);}
  24% {transform:translate(0, 0) rotate(2deg);}
 
  25% {transform:translate(0, 0) rotate(-2deg);}
  26% {transform:translate(0, 0) rotate(0deg);}
  27% {transform:translate(0, 0) rotate(2deg);}
 
  28% {transform:translate(0, 0) rotate(0deg);}
  100% {transform:translate(0, 0) rotate(0deg);}
}
header .anim-zoom.fadein{
	transition-delay: .5s;
}

.anim-fade-up.fadein{
	transform: translate(0, 30px);
	opacity: 0;
}

.anim-fade-up.scrollin{
	opacity : 1;
	transform : translate(0, 0);
}

.anim-zoom.fadein{
	transform: scale(0.5);
	opacity: 0;
}
.anim-zoom.scrollin{
	transform: scale(1);
	opacity: 1;
}





/* --------------- loading ---------------------- */
#loader{
	width: 100px;
	height: 100px;
	display: none;
	position: fixed;
	top: 50%;
	left: 0;
	right: 0;
	z-index: 200;
	
}
#fade{
	width: 100%;
	height: 100%;
	display: none;
	background-color: #efd9cc;
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 100; 
}

.spinner {
  width: 100px;
  text-align: center;
	margin:  0 auto;
}

.spinner > div {
  width: 10px;
  height: 10px;
  background-color: #ffffff;
	margin: 5px;

  border-radius: 100%;
  display: inline-block;
  -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
  animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}
.spinner .bounce1 {
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}

.spinner .bounce2 {
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}

@-webkit-keyframes sk-bouncedelay {
  0%, 80%, 100% { -webkit-transform: scale(0) }
  40% { -webkit-transform: scale(1.0) }
}

@keyframes sk-bouncedelay {
  0%, 80%, 100% { 
    -webkit-transform: scale(0);
    transform: scale(0);
  } 40% { 
    -webkit-transform: scale(1.0);
    transform: scale(1.0);
  }
}