/*-------------全体-------------*/

html{
  scroll-behavior: smooth;
}

p{
	line-height: 1.8;
	font: 11pt  Meiryo,Meiryo UI,Osaka,Hiragino Kaku Gothic Pro;
	margin: 0;
	color: #fff;
}

body{
	margin: 0;
	padding: 0;
	background: #000;
	width: 100%;
}

ul{
	padding-left: 0px;
	list-style: none;
}

/* index */
.index{
	display: flex;
	justify-content: center;
	align-items: center;
	height: 40vh; 
	width: 100vw;  
}

.index img{
	max-width: 90%;
	height: auto;
}

.index_sub{
	width: 80%;
	margin-bottom: 24px;
	border-bottom: 2px solid #FF0086;
	margin: 0 auto;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 80px;
}

.index_title{
	font-size: 26pt;
	color: #FF0086;
	font-weight: bold;
	
}

/* flexbox */
.flexbox {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

/* link*/
.link{
	font-size: 10pt;
}

.link a,.marker{
	color: #F33;
}

a{
	transition: color 0.4s;
	text-decoration: none;
}


/* image*/
.img_alignment{
	width: 100%;
}

.img_border{
	border: 4px solid #FFE500;
}

.resize_img img{
	width: 100%;
	padding-top: 24px;
}

/* text color */
.text_bk{
	color: #000;
}

.text_red{
	color: #FF0000;
}

.text_yellow{
	color: #FFAE00;
}

.text_ly{
	color: #E8FF00;
}

.text_wh{
	color: #fff;
}

/* text position*/
.tx_center{
	text-align: center;
}

.tx_right{
	text-align: right;
}

/* clearfx */
.cf:before, .cf:after {
    content:"";
    display:table
}
.cf:after {
	clear:both
}

/* Prevent gaps from appearing under the image */
img{
	vertical-align: bottom;
}


/*-------------Main-------------*/
.contents{
    animation: 10s contents linear infinite;
	width: 100%;
	height: 100%;
}


.img_top{
	margin: 0 auto;
	padding: 0;
	width: 100%;
}

.img_top_s{
	display: none;
}

.area_base{
	margin: 0 auto;
	padding: 40px 0;
	width: 75%;
}

.img_btn{
	margin: 48px auto;
	width: 25em;
}

.img_btn02{
	margin: 0 auto;
	width: 53em;
	padding-bottom: 120px;
}

.bg{
	background-image: url("../img/bg_w.png");
}

.bg_001{
    background: rgba(0,250,0,0.5);
	margin: 80px 0;
}



.text{
	margin: 0 auto;
	background-color: rgb(0,0,0,0.8);
	border: 4px solid #fff;
	border-radius: 8px;
	width: 50%;
	padding: 24px;
}

.color_wh{
	color: #fff;
}

h2{
	border-bottom: 1px solid;
}

/* 画像表示用 */
.lb {
    display: flex;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    justify-content: center;
    align-items: center;
    background: rgba(0,0,0,.7);
    opacity: 0;
    transition: .3s opacity ease;
    pointer-events: none;
    z-index: 100;
}

.lb img {
    width: 80% !important;
    height: auto !important;
    cursor: pointer;
}

.lb img:before {
    content: "";
    display: block;
}

.lb img,.lb iframe {
    transform: scale(.85);
    transition: .3s all ease;
}

.lb:target {
    opacity: 1;
    pointer-events: auto;
    z-index: 101;
}

.lb:target img,.lb:target iframe {
    transform: scale(1);
}

/* 閉じる */
.lb::before,.lb::after {
    display: block;
    position: fixed;
    content: "";
    width: 24px;
    height:3px;
    top: 24px;
    right: 12px;
    background: #fff;
    border-radius: 4px;
}
.lb::before {
    transform: rotate(-315deg);
}
.lb::after {
    transform: rotate(315deg);
}

/*-------------製品情報-------------*/
.box_product{
	width: 60%;
	height: auto;
	border-top: 4px solid #FF00A6;
	border-bottom: 4px solid #FF00A6;
	padding: 24px;
    background: rgba(255,255,255,0.7);
	margin: 80px auto;
	display: flex;
	align-items: flex-start;
	flex-wrap: wrap;
}

.product_image {
	flex: 1 1 40%;
}

.product_image img {
	width: 95%;
	height: auto;
	display: block;
}

.product_text {
	flex: 1 1 50%;
}

.spec-table {
	margin: 0 auto;
	border-collapse: collapse;
}

.spec-row {
	display: flex;
	flex-wrap: wrap;
	border-bottom: 1px solid #ddd;
	padding: 16px 0;
}

.spec-label {
	width: 30%;
	font-weight: bold;
	color: #FF00A6;
	padding-right: 16px;
	box-sizing: border-box;
}

.spec-value {
	width: 70%;
	color: #000;
	box-sizing: border-box;
}

/*-------------予約-------------*/
.bg_002{
    background-image: url("../img/BG_001.png");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	height: auto;
}

.name_shop{
	color: #FF0086;
	font-size: 15pt;
	font-weight: bold;
	padding-bottom: 24px;
	width: 90%;
}

.box_shop_sp{
	width: 45%;
	height: auto;
	border-top: 4px solid #FF00A6;
	border-bottom: 4px solid #FF00A6;
	padding: 24px;
    background: rgba(255,255,255,0.7);
	margin: 24px 0;
}

.box_shop{
	width: 20%;
	height: auto;
	border-top: 4px solid #FF00A6;
	border-bottom: 4px solid #FF00A6;
	padding: 24px;
    background: rgba(255,255,255,0.7);
	margin: 24px 0;
}

.img_item{
    position: relative;
    display: flex;
    max-width: 100%;
}

.img_item img{
	max-width: 100%;
	padding-bottom: 16px;
}

.name_item{
	width: 100%;
	color: #444;
	font-weight: bold;
	font-size: 13pt;
	padding-bottom: 8px;
	margin-bottom: 16px;
	border-bottom: 2px solid #FF00A6;
}

.buy_btn a{
    background: #eee;
    border-radius: 6px;
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 0 auto;
    max-width: 100%;
    padding: 16px;
    color: #313131;
    transition: 0.3s ease-in-out;
	border: 2px solid #FF0086;
	font-weight: bold;
	font-size: 16pt;
}

.buy_btn a:hover {
    background: #FF0086;
    color: #FFF;
}
.buy_btn a:after {
    content: '';
    width: 5px;
    height: 5px;
    border-top: 3px solid #313131;
    border-right: 3px solid #313131;
    transform: rotate(45deg) translateY(-50%);
    position: absolute;
    top: 50%;
    right: 20px;
    border-radius: 1px;
    transition: 0.3s ease-in-out;
}
.buy_btn a:hover:after {
    border-color: #FFF;
}




/*-------------footer-------------*/
footer{
	background-color: #000;
	background-size: auto;
	clear: both;
	text-align: center;
	color: #fff;
	padding: 40pt;
	font-size: 8pt;
	line-height: 1.4;
}

footer ul li{
	display: inline-block;
	padding: 8px;
}

/*-------------copyright-------------*/
.copy-text{
	font-size: 8pt;
	color: #fff;
	font-weight: 100;
}




/*-------------Mobile-------------*/
@media screen and (min-width:320px) and (max-width:920px){

	.img_top{
		display: none;
}

	.img_top_s{
		display: block;
		margin: 0 auto;
		padding: 0;
		width: 100%;
	}

	.img_btn02{
		margin: 0 auto;
		width: 25em;
	}

	.index{
		height: auto; 
		padding: 64px 0 40px 0;
		width: 100vw;  
}

	.index img{
		max-width: 100%;
		height: auto;
	}
	
	
	.text{
		margin: 0 auto;
		background-color: rgb(0,0,0,0.8);
		border: 4px solid #fff;
		border-radius: 8px;
		width: 80%;
		padding: 24px;
	}

	.btn_bt{
		margin-bottom: 16px;		
	}

	.sc{
		width: 100%;
		margin: 0 auto;
		overflow: hidden;
		
		padding-bottom: 80px;
	}

	.area{
		width: 70%;
		margin: 0 auto 40px auto;
	}

	.right,.left{
		float: none;
	}
	
/*-------------製品情報-------------*/
	.box_product{
		width: 70%;
		
		display: block;
	}
	
	
	.product_image img {
		width: 100%;
		height: auto;
		display: block;
	}

	.product_text {
		flex: none;
	}
	
/*-------------予約-------------*/
	.bg_002{
		background-image: url("../img/BG_001.png");
	}

	.name_shop{
		color: #FF0086;
		font-size: 15pt;
		font-weight: bold;
		padding-bottom: 24px;
		width: 100%;
	}

	.box_shop,.box_shop_sp{
		width: 100%;
	}



	.buy_btn a{
		max-width: 100%;
		padding: 8px;
		font-size: 14pt;
	}

	.buy_btn a:after {
		content: '';
		width: 5px;
		height: 5px;
		border-top: 3px solid #313131;
		border-right: 3px solid #313131;
		transform: rotate(45deg) translateY(-50%);
		position: absolute;
		top: 50%;
		right: 20px;
		border-radius: 1px;
		transition: 0.3s ease-in-out;
	}
	.buy_btn a:hover:after {
		border-color: #FFF;
	}

	
}/*920*/