@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+1p&display=swap');

.pc { display: block !important; }
.sp { display: none !important; }

body {

	background-color: #fff;
	scroll-behavior: smooth;
	
	}

img {
  vertical-align: top;
}

/* リンク画像 */
a:hover img{
	filter:alpha(opacity=70);
	-ms-filter:""alpha(opacity=70)"";
	-moz-opacity:0.7;
	-khtml-opacity:0.7;
	opacity:0.7;
}


/* ボタン修正 */
.button .mallLink.reserve::before {
left: unset;
background-size: contain;
}

.button .mallLink.on.reserve::after {
left: 10%; /* 「予約する」width: 80%なので 左10%で重ねる*/
background-size: contain;
}

.button .mallLink.waiting::before {
left: unset;
background-size: contain;
}

.button .mallLink.on.waiting::after {
left: 10%; /* 「入荷予約」width: 80%なので 左10%で重ねる*/
background-size: contain;
}


.Title-line-shinka {
  background-color: #003966;
  color: #fff;
  padding-top: 10px;
  padding-right: 10px;
  padding-left: 10px;
  padding-bottom: 10px;
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 20px;
  width: 960px;
}


.shinka-contents {
  width: 960px;
  margin-left: auto;
  margin-right: auto;
}

.shinka-wrapper {
	background-color: #fff;
	text-align: left;
	background-image: url(../images/bg.png);
	background-position: center top;
	background-repeat: repeat;
	background-attachment: fixed;
	
	background-size: 473px ;
}




.TopMainHead {
	background-color: #FFFFFF;
	position: relative;
}

.Top_Main_Logo {
	margin-left: auto;
	margin-right: auto;
	margin-top: 25px;
	margin-bottom: 25px;
	width: 50%;
}
.Cont_Main_Logo {
	margin-left: auto;
	margin-right: auto;
	margin-top: 15px;
	margin-bottom: 15px;
	width: 30%;
}

.c-txt {
	font-size: 0.7em;
	line-height: 1.3;
	text-align: center;
	margin-right: 5px;
	margin-left: 5px;
}

.MMenu-wrapper {
	background-color: #fff;
	text-align: left;
	background-image: url(../images/menu-bg.png);
	background-position: center top;
	background-repeat: repeat;
/*	padding-top: 23px;*/
/*	height: 326px;*/
	
}

.ConMainP{

}


/*メニュ*/


/*動き*/
.MMenu-wrapper li a{
  transition: 0.5s;
}
.MMenu-wrapper li a:hover {
  -webkit-transform: translate(0px, -10px);
  -moz-transform: translate(0px, -10px);
  -ms-transform: translate(0px, -10px);
  -o-transform: translate(0px, -10px);
  transform: translate(0px, -10px);
}



.MMenu-wrapper ul {
	position: relative;
	width: 100%;
	height: auto;
	padding-top: 30%;
	/*	padding-top: 36.50%;*/
	margin-bottom: 20px;
}


ul .MM01 a:link {
	/*	width: 200px;*/
	width: 20.83%;
	/*	height: 173px;*/
	height: 53.56%;
	
	
	background-image: url(../images/01@0.5x.png);
	background-repeat: no-repeat;
	background-position: left top;
	display: block;
		text-indent: -9999px;
	position: absolute;
	top: 8.62%;
	left: 3.54%;
	background-clip: padding-box;
	background-size: contain;
/*	background-color: #F4090D;*/
}

ul .MM01 a:hover {
/*	  opacity: 0.7;*/
	background-image: url(../images/01-on@0.5x.png);

}
ul .MM01.current  a:link{
	background-image: url(../images/01-on@0.5x.png);
}
 


ul .MM02 a:link {
	/*	width: 200px;*/
	width: 20.83%;
	/*	height: 173px;*/
	height: 53.56%;
	
	background-image: url(../images/02@0.5x.png);
	background-repeat: no-repeat;
	background-position: left top;
	display: block;
		text-indent: -9999px;
	position: absolute;
	top: 36.10%;
	left: 21.25%;
	background-clip: padding-box;
	background-size: contain;
/*	background-color: #F4090D;*/
}

ul .MM02 a:hover {
/*	  opacity: 0.7;*/
	background-image: url(../images/02-on@0.5x.png);

}
ul .MM02.current  a:link{
	background-image: url(../images/02-on@0.5x.png);
}
 



ul .MM03 a:link {
	/*	width: 200px;*/
	width: 20.83%;
	/*	height: 173px;*/
	height: 53.56%;
	
	background-image: url(../images/03@0.5x.png);
	background-repeat: no-repeat;
	background-position: left top;
	display: block;
		text-indent: -9999px;
	position: absolute;
	top: 8.62%;
	left: 39.37%;
	background-clip: padding-box;
	background-size: contain;
/*	background-color: #F4090D;*/
}

ul .MM03 a:hover {
/*	  opacity: 0.7;*/
	background-image: url(../images/03-on@0.5x.png);

}
ul .MM03.current  a:link{
	background-image: url(../images/03-on@0.5x.png);
}
 





ul .MM04 a:link {
	/*	width: 200px;*/
	width: 20.83%;
	/*	height: 173px;*/
	height: 53.56%;
	
	background-image: url(../images/04@0.5x.png);
	background-repeat: no-repeat;
	background-position: left top;
	display: block;
		text-indent: -9999px;
	position: absolute;
	top: 36.10%;
	left: 57.70%;
	background-clip: padding-box;
	background-size: contain;
/*	background-color: #F4090D;*/
}

ul .MM04 a:hover {
	/*	  opacity: 0.7;*/
	background-image: url(../images/04-on@0.5x.png);
	margin-bottom: 1835px;
}

ul .MM04.current  a:link{
	background-image: url(../images/04-on@0.5x.png);
}
 


ul .MM05 a:link {
	/*	width: 200px;*/
	width: 20.83%;
	/*	height: 173px;*/
	height: 53.56%;
	
	
	background-image: url(../images/05@0.5x.png);
	background-repeat: no-repeat;
	background-position: left top;
	display: block;
		text-indent: -9999px;
	position: absolute;
	top: 8.62%;
	left: 75.93%;
	background-clip: padding-box;
	background-size: contain;
/*	background-color: #F4090D;*/
}

ul .MM05 a:hover {
/*	  opacity: 0.7;*/
	background-image: url(../images/05-on@0.5x.png);

}
ul .MM05.current  a:link{
	background-image: url(../images/05-on@0.5x.png);
}
 


/**/

.Ind-itemBox {
	margin-bottom: 40px;
}

.Cont-itemBox {
	margin-bottom: 40px;
}


.YTzone {
	margin-bottom: 20px;
}


.embed-container {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.embed-container iframe, .embed-container object, .embed-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


.IndexTitBox {
	margin-bottom: 20px;
}

.ContTitBox {
	margin-bottom: 20px;
}

.IndBass01 {
	width: 98.95%;
	margin-left: auto;
	margin-right: auto;
	position: relative;
}
.IndBass01-p1 {
	width: 98.94%;
	position: absolute;
	top: 0px;
}


.IndBass01-p2 {
	width: 97.21%;
	position: absolute;
	top: 43.18%;
}


.flx{
	
display: flex;	
justify-content: space-around;	
	flex-wrap: wrap;
}


.flx-bn{
	
display: flex;	
justify-content: space-between;	
	flex-wrap: wrap;
}








.BtnBox {
	width: 45%;
}



.Ind-bn-Box {
	width: 33.3%;
	padding-bottom: 15px;
	text-align: center;


}

.Ind-bn-Box span {
	display: block;
	text-align: center;
}

.Ind-bn-Box img {
	width: 90%;

}



.Ind-bn-Zone {
	background-color: #000000;
	padding-top: 30px;
	padding-bottom: 30px;
	padding-left: 10px;
	padding-right: 10px;
}

.txt_white {
	color: whitesmoke;
}


/**/

.Item-flx{
	
display: flex;	

flex-direction: row;
justify-content: flex-start;	
flex-wrap: wrap;	
	
}


 
.Item-Box {
	width: 45%;
	background-color: rgba(3,3,3,0.50);
	margin-bottom: 20px;
	margin-left: 20px;
	margin-right: 10px;
}
.Item-Box-Tit {
	margin-bottom: 20px;
}
.Cont-BtnBox {
	/* [disabled]margin-bottom: 20px; */
	text-align: center;
	padding-bottom: 15px;
}

.Cont-BtnBox img {
	width: 80%;
	height: auto;
}

.top-text {
  font-family: "M PLUS 1p", sans-serif;
  font-weight: 800;
  font-style: normal;
font-size: 26px;
	color:lightslategray;
}

.item-text {
  font-family: "M PLUS 1p", sans-serif;
  font-weight: 800;
  font-style: normal;
font-size: 26px;
	color: seashell;
}


/*mov_title*/

.mov_title{
	font-size: 3em;
	line-height: 1em;
background-color: #F4D03F;
background-image: linear-gradient(90deg, #21D4FD 0%, #B721FF 100%);
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
 display: inline-block;
	
}

.mov_bg {
	width: 100%;
	background-color: black;
	padding-bottom: 20px;
	padding-top: 20px;
}

.mov_title_02{
	font-size: 3em;
	line-height: 1em;
background-color: #21D4FD;
background-image: linear-gradient(132deg, #F4D03F 0%, #16A085 100%);
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
 display: inline-block;
}


/*うごき*/
.img-wrap {
  animation: img-wrap 2s cubic-bezier(.4, 0, .2, 1);
}

@keyframes img-wrap {
  0% {
    clip-path: circle(0 at 50% 50%);
    -webkit-clip-path: circle(0 at 50% 50%);
  }

  100% {
    clip-path: circle(100% at 50% 50%);
    -webkit-clip-path: circle(100% at 50% 50%);
  }
}





/*TOPうごき*/


.img-wrap-top {
  overflow: hidden;
  position: relative;
}

.img-wrap-top:before,
.img-wrap-top:after {
  animation: 2s cubic-bezier(.4, 0, .2, 1) forwards;
  background: #fff;
  bottom: 0;
  content: '';
  pointer-events: none;
  position: absolute;
  top: 0;
  z-index: 1;
}

.img-wrap-top:before {
  animation-name: img-wrap-before;
  left: 0;
  right: 50%;
}

.img-wrap-top:after {
  animation-name: img-wrap-after;
  left: 50%;
  right: 0;
}


@keyframes img-wrap-before {
  100% {
    transform: translateY(100%);
  }
}

@keyframes img-wrap-after {
  100% {
    transform: translateY(-100%);
  }
}