@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@500;900&display=swap');

*{ 
	margin: 0;
	padding: 0;
	font-size: 1em;
	font-style: normal;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}
#loading {
  width: 100vw;
  height: 100vh;
  transition: all 1s;
  background-color: #fff;

 display: flex;
  justify-content: center;
  align-items: center;
  
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
}
.spinner {
  width: 100px;
  height: 100px;

  background-color: #ddd;
  border-radius: 100%;
  animation: sk-scaleout 1.0s infinite ease-in-out;
}
/* ローディングアニメーション */
@keyframes sk-scaleout {
  0% {
    transform: scale(0);
  } 100% {
    transform: scale(1.0);
    opacity: 0;
  }
}
.loaded {
  opacity: 0;
  visibility: hidden;
}


body{
	margin:0;
	padding:0;
	background:#021947;
	color:#fff;
    font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN","メイリオ", Meiryo, "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
img{
	vertical-align:bottom;
}
.main{
	text-align:center;
}

h2{
	font-family: 'Oswald', sans-serif;
}
.wrapper{
	width:1000px;
	margin:50px auto;
	text-align:center;
}
.inst_btn{
	margin:20px auto;
}
.copy{
	font-size:11px;
	text-align:center;
	color:#fff;
	margin-top:50px;
	padding:10px 0;
}
ul{
	margin:0;
	padding:0 0 0 0;
	list-style: none;
}
ul.ul_base{
	list-style-type: disc;
	padding-left:1rem;
	margin-bottom:20px;
	margin-left:20px;
}
ul.ul_base li{
	margin-bottom:12px;
}
a{
	color:#fff;
}
.clearfix:after {
	content: "."; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden;
}
.thanks{
	text-align:center;
	margin:50px auto;
}


footer{
	text-align:center;
}
footer a:hover{
	opacity:0.7;
}
footer p{
	margin-top:8px;
	font-size:13px;
}



/* pc **************************************************************************** */
@media screen and (min-width: 768px) {

	.sp{
		display:none;
	}
	header{
		margin:40px auto;
		padding:0;
		text-align:center;
	}
	.main{
		position:relative;
		width:100%;
		height:90vh;
		/*
		background: url(../images/mask_bg.png) -200px -50px no-repeat;
		*/
	}
	.main .main_mask_l{
		position:absolute;
		width:40%;
		top:60px;
		left:5%;
		overflow:visible;
	}
	.main .main_mask_r{
		position:absolute;
		width:50%;
		right:0;
	}
	
	.main h1{
		margin-bottom:30px;
	}
	.main .main_mask_img_01{
		position:absolute;
		right:-30%;
		z-index:3;
		width:100%;
	}
	.main .main_mask_img_01 img{
		width:100%;
		min-width:584px;
	}
	.main .main_mask_img_02{

	}
	.main .main_mask_img_02 img{
		right:0;
		width:100%;
		margin:0 auto 0 auto;
	}
	
	
	h2{
		position:relative;
		font-weight:200;
		font-size:60px;
		margin:70px auto 70px auto;
		padding-bottom:20px;
		text-align:center;
	}
	h2::after {
		content: '';
		display: inline-block;
		width: 38px;
		height: 2px;
		background-color: #fff;
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
	}
	.wrap{
		width:90%;
		max-width:1200px;
		margin:0 auto;
	}
	.sec{
		margin-bottom:150px;
	}
	table.base_table{
		max-width:1000px;
		min-width:750px;
	    border: 1px #cccccc solid;
	    border-collapse: collapse;
	    border-spacing: 0;
	    margin:0 auto 80px auto;
	}

	table.base_table th{
		width:240px;
	    padding: 10px 10px 10px 10px;
	    border: #cccccc solid;
	    border-width: 0 0 1px 1px;
	    background: none;
		font-weight:normal;
	    line-height: 120%;
	    text-align: center;
	}
	table.base_table td{
	    padding: 10px 10px 10px 20px;
	    border: 1px #cccccc solid;
	    border-width: 0 0 1px 1px;
	    background: none;
	}
	.map{
		width:750px;
		margin:50px auto;
	}
	.txt{
		margin-bottom:50px;
		text-align:center;
		line-height:2;
	}







	.detail{
	
	}
	.detail .collabo{
		margin:0 auto 50px;
		width:400px;
		text-align:center;
	}
	.detail .collabo img{
		width:100%;
	}
	.detail .detail_01{
		display:flex;
		flex-wrap: nowrap;
		justify-content:space-between;
		align-items:center;
		width:90%;
		margin:0 auto 40px auto;
		padding:0;
	}
	.detail .detail_01 .detail_01_img{
		width:48%;
	}
	.detail .detail_01 .detail_01_img img{
		width:100%;
	}
	.detail .detail_01 .detail_01_txt{
		width:48%;
	}
	.detail .detail_01 .detail_01_txt p{
		margin-bottom:40px;
		line-height:2;
	}
	
	
	.detail .mask_img{
		display:flex;
		flex-wrap: nowrap;
		justify-content:space-between;
		width:90%;
		margin:0 auto 100px auto;
		padding:0;
	}
	.detail .mask_img li{
		width:32%;
	}
	.detail .mask_img li img{
		width:100%;
	}

	.detail .model_img{
		display:flex;
		flex-wrap: wrap;
		justify-content:space-between;
		width:90%;
		margin:0 auto;
		padding:0;
	}
	.detail .model_img li{
		margin-bottom:60px;
		width:48%;
	}
	.detail .model_img li img{
		width:100%;
	}



	.quality{
	
	}
	.quality .quality_img{
		display:flex;
		flex-wrap: nowrap;
		justify-content:space-between;
		width:90%;
		margin:0 auto 40px auto;
		padding:0;
	}
	.quality .quality_img li{
		width:32%;
	}
	.quality .quality_img li img{
		width:100%;
	}
	
	
	
	.order{
	
	}
	.order .order_list{
	
	}
	.order .order_list li{
		display:flex;
		flex-wrap: nowrap;
		justify-content:space-between;
		align-items:center;
		width:90%;
		margin:0 auto 80px auto;
		padding:0;
	}
	.order .order_list .order_list_img{
		width:48%;
	}
	.order .order_list .order_list_img img{
		width:100%;
	}
	.order .order_list .order_list_txt{
		width:46%;
	}
	.order .order_list .order_list_txt .buy{
		border-top:1px solid #2e4993;
		padding-top:20px;
		margin-bottom:30px;
	}
	.order .order_list .order_list_txt h3{
		margin-bottom:40px;
		font-size:36px;
		font-weight:normal;
	}
	.order .order_list .order_list_txt p{
		margin-bottom:10px;
		font-size:24px;
		line-height:1.8;
	}
	.order .order_list .order_list_txt p span{
		font-size:16px;
	}


}







/* smartPhone ******************************************************************* */
@media screen and (max-width: 767px) {
	.pc{
		display:none;
	}
	img{
		max-width:100%;
	}
	header{
		width:100%;
		margin:20px auto;
		padding:0;
		text-align:center;
	}
	header img{
		width:60%;
	}

	
	.main{
		position:relative;
		width:100%;  
		
		
		
	}
	
	
	
	.main .main_mask_l{

	}
	.main .main_mask_r{

	}
	
	.main h1{
		margin:0 0 20px 30px;
		width:70%;
	}
	.main .main_mask_img_01{
		position: relative;
		width:80%;
		margin:-30px 0 30px 20%;
		z-index:10;
	}
	.main .main_mask_img_01 img{
		width:100%;

	}
	.main .main_mask_img_02{
		position: relative;
		margin-top:-70px;
		z-index:0;
	}
	.main .main_mask_img_02 img{
		width:90%;
		margin:0 auto 0 auto;

	}
	
	
	h2{
		position:relative;
		font-weight:200;
		font-size:50px;
		margin:50px auto 50px auto;
		padding-bottom:20px;
		text-align:center;
	}
	h2::after {
		content: '';
		display: inline-block;
		width: 38px;
		height: 2px;
		background-color: #fff;
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
	}
	.wrap{
		width:90%;
		margin:0 auto;
	}
	.sec{
		margin-bottom:70px;
	}
	table.base_table{
		max-width:100%;
	    border: 1px #cccccc solid;
	    border-collapse: collapse;
	    border-spacing: 0;
	    margin:0 auto 40px auto;
	}

	table.base_table th{
		width:25%;
	    padding: 10px 8px 10px 8px;
	    border: #cccccc solid;
	    border-width: 0 0 1px 1px;
	    background: none;
		font-weight:normal;
	    line-height: 120%;
	    text-align: center;
	}
	table.base_table td{
	    padding: 10px 8px 10px 12px;
	    border: 1px #cccccc solid;
	    border-width: 0 0 1px 1px;
	    background: none;
	}
	.map{
		width:100%;
		margin:50px auto;
	}
	.txt{
		margin-bottom:40px;
		text-align:left;
		line-height:2;
	}

	








	.detail{
	
	}
	.detail .collabo{
		margin:0 auto 50px;
		width:100%;
		text-align:center;
	}
	.detail .collabo img{
		width:80%;
	}
	.detail .detail_01{
		margin:0 auto 40px auto;
		padding:0;
	}
	.detail .detail_01 .detail_01_img{
	}
	.detail .detail_01 .detail_01_img img{
		width:100%;
	}
	.detail .detail_01 .detail_01_txt{
	}
	.detail .detail_01 .detail_01_txt p{
		margin-bottom:40px;
		line-height:2;
	}
	
	
	.detail .mask_img{
		display:flex;
		flex-wrap: nowrap;
		justify-content:space-between;
		margin:0 auto 50px auto;
		padding:0;
	}
	.detail .mask_img li{
		width:32%;
	}
	.detail .mask_img li img{
		width:100%;
	}

	.detail .model_img{
		display:flex;
		flex-wrap: wrap;
		justify-content:space-between;
		width:100%;
		margin:0 auto;
		padding:0;
	}
	.detail .model_img li{
		margin-bottom:10px;
		width:49%;
	}
	.detail .model_img li img{
		width:100%;
	}



	.quality{
	
	}
	.quality .quality_img{
		display:flex;
		flex-wrap: nowrap;
		justify-content:space-between;
		width:100%;
		margin:0 auto 40px auto;
		padding:0;
	}
	.quality .quality_img li{
		width:32%;
	}
	.quality .quality_img li img{
		width:100%;
	}
	
	
	
	.order{
	
	}
	.order .order_list{
	
	}
	.order .order_list li{
		width:100%;
		margin:0 auto 50px auto;
		padding:0;
	}
	.order .order_list .order_list_img{
		margin-bottom:15px;
	}
	.order .order_list .order_list_img img{
		width:100%;
	}
	.order .order_list .order_list_txt{

	}
	.order .order_list .order_list_txt .buy{
	
		border-top:1px solid #2e4993;
		padding-top:20px;
		margin-bottom:30px;
		text-align:center;
	}
	.order .order_list .order_list_txt h3{
		margin-bottom:40px;
		font-size:28px;
		font-weight:normal;
	}
	.order .order_list .order_list_txt p{
		margin-bottom:10px;
		font-size:20px;
		line-height:1.8;
	}
	.order .order_list .order_list_txt p span{
		font-size:14px;
	}





}