@charset "UTF-8";


/*---------------------------------
amber common styleSheet
----------------------------------*/
/*base

font #607d8b

#546e7a
#455a64
#37474f 
#263238



----------------------------------*/












html {
  min-width: 320px;
  font-size: 62.5%;/*10px*/
}
body {
	margin:0;
	padding:0;
	width: 100%;
	height:100%;
	line-height: 1.5;
	font-size: 14px;
	font-size: 1.4rem;
  	font-family: "a-otf-ud-shin-go-pr6n","ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","メイリオ","ＭＳ Ｐゴシック",sans-serif;
  	background-color: #f5f5f5;
  	color: #263238;
  	text-rendeling:optimizeLegibility;
    -webkit-font-smoothing: subpixel-antialiased;
	-moz-osx-font-smoothing: grayscale;
	-webkit-text-size-adjust: 100%;	
  	-webkit-tap-highlight-color:rgba(0,0,0,0);
}
.fixed{ height: 100%; overflow: hidden;}

html,body,div,h1,h2,h3,h4,h5,h6,
p,blockquote,pre,address,
ul,ol,li,dl,dt,dd,
form,fieldset, input {margin: 0;padding: 0;}
input, button, textarea, select {
	border-radius: 0;
	border: none;
}
ul li{ list-style-type: none;} 
img {
  max-width: 100%;
  height: auto;
}
.img-responsive {
  display: block;
  width: 100%;
  height: auto;
}

.ie8 img{
  width: auto;
}
/*clearfix*/
.clearfix {
  zoom: 1;
}
.clearfix:after {
  content: "";
  display: block;
  clear: both;
}
.t-m-4{ margin-top: 4px !important;}

.t-m-8{ margin-top: 8px !important;}
.t-m-16{ margin-top: 16px !important;}
.t-m-24{ margin-top: 24px !important;}
.t-m-32{ margin-top: 32px !important;}
.t-m-40{ margin-top: 40px !important;}
.t-m-48{ margin-top: 48px !important;}
.t-m-72{ margin-top: 72px !important;}
.t-m-80{ margin-top: 80px !important;}

.b-m-4{ margin-bottom: 4px !important;}
.b-m-8{ margin-bottom: 8px !important;}
.b-m-16{ margin-bottom: 16px !important;}
.b-m-24{ margin-bottom: 24px !important;}
.b-m-32{ margin-bottom: 32px !important;}
.b-m-48{ margin-bottom: 48px !important;}

.b-p-4{ padding-bottom: 4px !important;}
.b-p-8{ padding-bottom: 8px !important;}
.b-p-16{ padding-bottom: 16px !important;}
.b-p-24{ padding-bottom: 24px !important;}
.b-p-32{ padding-bottom: 32px !important;}
.b-p-40{ padding-bottom: 40px !important;}
.b-p-48{ padding-bottom: 48px !important;}

.t-p-4{ padding-top: 4px !important;}
.t-p-8{ padding-top: 8px !important;}
.t-p-16{ padding-top: 16px !important;}
.t-p-24{ padding-top: 24px !important;}
.t-p-32{ padding-top: 32px !important;}
.t-p-48{ padding-top: 48px !important;}


.tb-m-8{ margin-top: 8px !important;margin-bottom: 8px !important;}
.tb-m-16{ margin-top: 16px !important;margin-bottom: 16px !important;}
.tb-m-24{ margin-top: 246px !important;margin-bottom: 24px !important;}
.tb-m-32{ margin-top: 32px !important;margin-bottom: 16px !important;}
.tb-m-48{ margin-top: 48px !important;margin-bottom: 16px !important;}

.tb-p-8{ padding-top: 8px !important;padding-bottom: 8px !important;}
.tb-p-16{ padding-top: 16px !important;padding-bottom: 16px !important;}
.tb-p-24{ padding-top: 24px !important;padding-bottom: 24px !important;}
.tb-p-32{ padding-top: 32px !important;padding-bottom: 32px !important;}
.tb-p-48{ padding-top: 48px !important;padding-bottom: 48px !important;}

.posi-rela{ position: relative;}

.txt-block{ display: block;}
.b-border{ border-bottom: 1px solid #ccc;}
.sh-none{box-shadow:none !important;}
.out-sh{box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.4);}

.img-wrap{ padding-left: 12px; padding-right: 12px;}

.hutoji{ font-weight: bold;} 

.pa-l-r{ padding-left: 12px; padding-right: 12px;}



.pe-none{
	pointer-events:none;
}

.color-red{ color: #f44336;}
.color-blue{ color: #2196f3;}
.color-teal{ color: #00897b;}
.color-green{ color: #43a047;}


.heading{font-family: "a-otf-gothic-bbb-pr6n";}


#help-menu-in{ display: none;}
#help-menu-in.index-show{ display:none;}


/* ---- grid ---- */
.grid {
	padding-top: 72px;
	overflow: hidden;
	width: 100%;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

/* clearfix */
.grid:after {
	content: '';
	display: block;
	clear: both;
}


/* ---- grid-item ---- */
.grid-sizer,
.grid-item {
	width: 100%;
  	margin: 0;
  	float: left;
  	margin-bottom: 16px;
   	-webkit-box-sizing: border-box;
   	box-sizing: border-box;
}

.rectangle-list-wrap2{ background-color: #fff;box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.4);}



#wrap{ position: relative; padding-left:4px; padding-right: 4px; max-width: 1490px; margin: 0 auto;}
#pageWrap{ position: relative; width: 100%; overflow: hidden;}

.overlay {
	display: none;
	position: fixed;
	overflow: hidden;
    top: 0;
    left: 0;
    z-index: 9900;
    width: 100%;
    height: 100%;
    background: #263238;
    opacity: 0.7;
    filter: alpha(opacity=70);
    -ms-filter: "alpha(opacity=70)";
    cursor:pointer;
	-webkit-transition: all 0.25s ease-in-out;
   	-moz-transition: all 0.25s ease-in-out;
    -ms-transition: all 0.25s ease-in-out;
    -o-transition: all 0.25s ease-in-out;
    transition: all 0.25s ease-in-out;
}
.overlay span {
	opacity: 1;
    filter: alpha(opacity=100);
    -ms-filter: "alpha(opacity=100)"; color: #fff; position: absolute;right: 16px; top: 50%;  margin-top: -21px;width: 42px; height: 42px; border: 1px solid #fff; text-align: center; line-height: 42px; font-size: 30px; font-weight: bold;
  		-webkit-border-radius: 50%;
		-moz-border-radius: 50%;
		border-radius: 50%;
	
}
.heder-shadow{
	box-shadow: inset 0px 5px 6px -3px rgba(0, 0, 0, 0.5);
    height: 6px;
    left: 0;
    position: fixed;
    right: 0;
    top: 56px;
    z-index: 5000;
}
.heder-shadow:before{content:""; position:absolute; width: 100%; height: 56px; background-color: #fff; top: -56px; display: block;}


p{ font-size: 14px; letter-spacing: 1px; line-height: 1.6;text-align:justify;padding: 0 12px;text-shadow: 0 1px 1px #eeeeee;}

.ul-list{ font-size: 14px;letter-spacing: 1px; line-height: 1.6; padding-left: 12px; padding-right: 12px; margin-left: 2em;}
	.ul-list li{list-style-type: disc;}
a,
.to-link{
	color: #2196f3; 
	cursor: pointer; 
	position: relative; 
  	-webkit-transition: all .3s ease;
  	transition: all .3s ease;
	}
	
	.to-link{ text-decoration: underline; color: #03a9f4;} 
	.to-link:after{
		content: "\e801";
		font-family: 'icomoon';
	}	
	.to-link:hover{ color:#ff9800;}
	

	.to-link2::before {
  		content: '';
  		position: absolute;
  		bottom: 0;
  		left: 0;
  		width: 100%;
  		height: 1px;
  		-webkit-transform: scaleX(0);
  		-ms-transform: scaleX(0);
  		transform: scaleX(0);
  		background-color: #ff9800;
  		-webkit-transition: all .3s ease;
 		 transition: all .3s ease;
	}
	.to-link2:hover::before {
  		-webkit-transform: scaleX(1);
  		-ms-transform: scaleX(1);
  		transform: scaleX(1);
  }


header{position: relative;height: auto; z-index: 5000; margin-top: 72px;}


 #header{ position: relative;width: 300px; padding:56px 0 0 0; margin: 0 auto;}
 #svg-b{ position: absolute; width: 100%; top: 0; left: 0; z-index: 0;}
 #svg-b img{ width: auto;}
 #svg-b span{ padding: 12px; display: block;}
 
 	#header-box{ border-bottom: 1px solid #00bcd4; padding-bottom: 8px; height: 240px; background-color:#00bcd4; position: relative;} 
  
  	#tel{ width: 122px; height: 40px; 
  		border: 1px solid #fff; z-index: 1; 
  		display: block; position: absolute;
  		left: 50%; margin-left: -62px; color: #fff; letter-spacing: 1px; cursor: pointer; line-height: 40px; text-align: center; bottom: 28px; 
  		-webkit-border-radius: 4px;
		-moz-border-radius: 4px;
		border-radius: 4px;
		-webkit-transition: all 0.15s ease-in-out;
   		-moz-transition: all 0.15s ease-in-out;
    	-ms-transition: all 0.15s ease-in-out;
    	-o-transition: all 0.15s ease-in-out;
    	transition: all 0.15s ease-in-out;
		-moz-transform: scale(1);
		-webkit-transform: scale(1);
		-o-transform: scale(1);
		-ms-transform: scale(1);
    	transform: scale(1);	
		opacity: 1;
		filter: alpha(opacity=100);
		-ms-filter: "alpha(opacity=100)";
	}
	#tel:hover{ background-color: #26c6da;}
		
 		
 		
 		#con-panel{
 			width: 100%; background: #00bcd4; height: 100%; bottom: 0; position: absolute; opacity: 0;
 			
			-webkit-transition: all 0.3s ease-in-out;
   			-moz-transition: all 0.3s ease-in-out;
    		-ms-transition: all 0.3s ease-in-out;
    		-o-transition: all 0.3s ease-in-out;
    		transition: all 0.3s ease-in-out;
			-webkit-transform: scale(0);
			-o-transform: scale(0);
			-ms-transform: scale(0);
    		transform: scale(0);
    		opacity:0;	
 		}
 		#con-panel #contact-nav{ position: absolute; bottom: 26px; left: 50%; margin-left: -155px; width: 100%; max-width: 310px; color: #fff; display: block;}
 		#con-panel #contact-nav li { width: 33.33%; float: left; text-align: center; cursor: pointer; position: relative; font-size: 13px; letter-spacing: 1px; color: #fff;}
 		#con-panel #contact-nav li span{ position: relative; z-index: 1; text-shadow:0 1px 3px rgba(0,0,0,0.4); font-family: "a-otf-gothic-bbb-pr6n";}
		#con-panel #contact-nav li:before{
			content:""; width: 44px; height: 44px; bottom: -20px; display: block; position: relative; margin: auto; z-index: 0; border:1px solid rgba(255,255,255,0.4);
  			-webkit-border-radius: 50%;
			-moz-border-radius: 50%;
			border-radius: 50%;
		}
		#con-panel #contact-nav .to-link{ text-decoration: none; background: #000; width: auto;}
		#con-panel #contact-nav li a{ position: relative; padding-top: 24px; color: #fff; text-decoration: none; z-index: 2;}
		
 		#contact-nav li.to-tel:after{content:"\e60d"; line-height: 46px; font-size: 26px; font-family: 'icomoon'; position: absolute; width: 46px; height: 46px; z-index: 0; bottom:0; left: 50%; margin-left: -23px; text-align: center; color: rgba(255,255,255,0.4);}
 		#contact-nav li.to-form:after{content:"\e801"; line-height: 46px; font-size: 26px; font-family: 'icomoon'; position: absolute; width: 46px; height: 46px; z-index: 0; bottom:0; left: 50%; margin-left: -23px; text-align: center;color: rgba(255,255,255,0.4);}
 		#contact-nav li.to-mail i{line-height: 46px; font-size: 26px; position: absolute; width: 46px; height: 46px; z-index: 0; bottom:0; left: 50%; margin-left: -23px; text-align: center; color: rgba(255,255,255,0.4);}
 		#con-panel #contact-nav li:hover::before{ background-color: #26c6da;}
 		
  		#con-panel.on-doropdown2{
  			opacity: 1;
			-webkit-transform: scale(1);
			-o-transform: scale(1);
			-ms-transform: scale(1);
    		transform: scale(1);
  		}
  		
  		.info-number{ position: absolute; top: 125px; font-size: 12px; width: 264px; left: 50%;margin-left: -132px; color: #fff;}
  		.info-number li{ float: left; width: 50%; font-size: 12px;}
  		.info-number li:nth-child(2){ text-align: right;}
  		.info-number li:last-child{ width: 100%; text-align: center; font-size: 13px;}
  		.info-number li span{ display: block;}
  		#con-panel #contact-nav li:hover::after{ color: #fff;}
		#con-panel #contact-nav li:hover i{ color: #fff;}  		
		#con-panel #contact-nav li span:hover{text-shadow:0 2px 4px rgba(0,0,0,0.8);}
		  		  		  		
  		#contact-close.panel-close2{
  			position: absolute;  
  			margin-top: 0; 
  			right: 12px; top: 12px; 
  			color: #fff; width: 30px; 
  			height: 30px; text-align: center; 
  			line-height: 30px;
  			border: 1px solid #fff; 
  			cursor: pointer;
  			font-size: 16px;
  			-webkit-border-radius: 50%;
			-moz-border-radius: 50%;
			border-radius: 50%;
			-webkit-transition: all 0.3s ease-in-out;
   			-moz-transition: all 0.3s ease-in-out;
    		-ms-transition: all 0.3s ease-in-out;
    		-o-transition: all 0.3s ease-in-out;
    		transition: all 0.3s ease-in-out;
  		}
  		#contact-close.panel-close2:hover{ background-color: #26c6da;}
  
  		#tel.btn-open2{
			-moz-transform: scale(0);
			-webkit-transform: scale(0);
			-o-transform: scale(0);
			-ms-transform: scale(0);
    		transform: scale(0);	
			opacity: 0;
			filter: alpha(opacity=0);
			-ms-filter: "alpha(opacity=0)";
  		}
  		
  		
  		
  h1{ font-size: 26px; position: relative; padding-bottom: 26px;width: 300px; text-align: center; z-index: 1;} 
  .main-t{ position: relative; font-size: 26px; letter-spacing: 0.14em; width: 300px; text-align: center; color: #fff;font-weight: normal;}
  
  .sub-t{ position: absolute; bottom: 4px;font-size: 10px; color: #fff; background-color: #263238; padding: 2px 0;width:264px;  letter-spacing: 1px;text-align: center; left: 0; margin-left: 18px; font-weight: normal;}
  
  .sub-t:after{content:"SHOP";}


 
 header p{padding: 12px 12px 24px 12px;}
 
 .header-img{ padding: 0 8px;}
 .header-img li{
 	width: 25%; font-size: 11px; float: left;text-align: center;
 }
 
 .h-img-in { margin: 0 4px;}
  .h-img-in:before{
  	content:""; width: 50px; height: 50px; background-color: #ccc; display: block; margin: 0 auto 4px auto; 
		-webkit-border-radius: 50%;
		-moz-border-radius: 50%;
		border-radius: 50%;
  }
  #h-img1 .h-img-in:before{
   background-image: url(../../images/top/siagari-icon.jpg); background-size:50px 50px;
  }
    #h-img2 .h-img-in:before{
   background-image: url(../../images/top/fullcolor-icon.jpg); background-size:50px 50px;
  }
    #h-img3 .h-img-in:before{
   background-image: url(../../images/top/tokuten-icon.jpg); background-size:50px 50px;
  }

  #h-img4 .h-img-in:before{
   background-image: url(../../images/top/syame-icon.jpg); background-size:50px 50px;
  }
  
	.h-img-in span{ display: block;}
 
 .info { position: relative; width: 264px;font-size: 14px; margin: 4px auto 8px auto; color: #fff;}
  .info li{ float: left; width: 50%; font-size: 12px; letter-spacing: 1px;}
   .info li:nth-child(2){ text-align: right;}
   .info li:last-child{ font-size: 12px; width: 100%; text-align: center; }
  
  

 #header-menu{ width: 100%; height: 56px; position: fixed; top: 0; left: 0; border-bottom: 1px solid #ccc; background: #fff; z-index: 9400;}
 .menu{ position: fixed; z-index: 9500; margin: 6px 0 0 12px; top: 0;width: 42px; height: 42px;font-size: 9px;text-align: center; cursor: pointer; border: 1px solid #ccc;	
		-webkit-border-radius: 4px;
		-moz-border-radius: 4px;
		border-radius: 4px;
		transform: translate3d(0, -100px, 0);
		-webkit-animation: anime2 0.5s ease-in-out 0.6s 1 normal forwards;
		animation: anime2 0.5s ease-in-out 0.6s 1 normal forwards;
		-webkit-transition:all 0.5s ease-in-out;
		transition:all 0.5s ease-in-out;				
 }
 .menu span{ position: absolute;}
 
 
 .menu-inner{float: right;}
  #header-menu ul{
  	padding-right: 4px; position: relative;
	-webkit-transform: translate3d(0, -100px, 0);
	transform: translate3d(0, -100px, 0);
	-webkit-animation: anime2 0.5s ease-in-out 0.6s 1 normal forwards;
	animation: anime2 0.5s ease-in-out 0.6s 1 normal forwards;
	-webkit-transition:all 0.5s ease-in-out;
	transition:all 0.5s ease-in-out;				
  }
	@-webkit-keyframes anime2 {
		0% {-webkit-transform: translate3d(0, -100px, 0);}
		100% {-webkit-transform: translate3d(0, 0, 0);}
	}

	@keyframes anime2 {
		0% {transform: translate3d(0, -100px, 0);}
		100% {transform: translate3d(0, 0, 0);}
	}

  #header-menu li{margin: 6px 12px 0 0; color: #fff; text-align: center;}
  
  .menu span,#header-menu li span{ position: absolute; width: 100%;  bottom: 0; display: block;height: 12px;text-align: center; display: block; padding-bottom: 2px;}

	#header-menu li{
		position: relative;float: left;width: 42px; height: 42px;font-size: 9px;text-align: center; cursor: pointer; border: 1px solid #ccc;	
		-webkit-border-radius: 4px;
		-moz-border-radius: 4px;
		border-radius: 4px;
		-webkit-transition: all 0.15s ease-in-out;
   		-moz-transition: all 0.15s ease-in-out;
    	-ms-transition: all 0.15s ease-in-out;
    	-o-transition: all 0.15s ease-in-out;
    	transition: all 0.15s ease-in-out;
		-moz-transform: scale(1);
		-webkit-transform: scale(1);
		-o-transform: scale(1);
		-ms-transform: scale(1);
    	transform: scale(1);	
	}
	.menu i{ line-height: 34px;}
	#header-menu li i{ color: #fff;line-height: 32px; text-align: center;}
	.menu i{ color: #37474f;}
	#header-menu li:first-child{ background-color: #00bcd4; border: 1px solid #26c6da;}
	#header-menu li:nth-child(2){ background-color: #ff9800;border: 1px solid #ff9800;}
	
	#header-menu li:nth-child(3){ background-color: #7cb342;border: 1px solid  #7cb342;}
	
	#header-menu li:last-child{ background-color: #ec407a;border: 1px solid  #ec407a;}

	#header-menu li.active{
		-moz-transform: scale(0.8);
		-webkit-transform: scale(0.8);
		-o-transform: scale(0.8);
		-ms-transform: scale(0.8);
    	transform: scale(0.8);	
	}	
	.menu:hover{opacity: 0.6;}

.wrap{ position: relative;  padding-left:4px; padding-right: 4px;max-width: 1200px; margin-left:auto; margin-right: auto; position: relative;}
.wrap2{ position: relative; padding-left:4px; padding-right: 4px;max-width: 1224px; margin-left:auto; margin-right: auto; position: relative;}


	
 .list-wrap{ background-color: #fff;box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.4); position: relative;}
 
 h2,h3,h4{font-size: 20px;  color: #263238; display: block;padding: 0 12px; font-weight: normal;text-shadow: 0 1px 1px #eeeeee;}



/*サブヘッダー*/
.sub-header { padding-top: 40px; padding-bottom: 40px;}
.sub-header.color-pink { background: #ec407a;}
.sub-header.color-orange { background: #ff9800;}
.sub-header.color-green { background: #7CB342;}

.sub-header h2,.sub-header h3,.sub-header p{text-shadow: none; color: #fff;}
.sub-header.sub-h-pa1,.sub-header.sub-h-pa2,.sub-header.sub-h-pa3 { padding-top: 24px; padding-bottom: 24px; position: relative;}
.sub-header.sub-h-pa1:after,
.sub-header.sub-h-pa1:before,
.sub-header.sub-h-pa2:after,
.sub-header.sub-h-pa3:after{
	position: absolute; 
	width: 56px; height: 20px; text-align: center;font-size: 12px;
	color: #263238;
	border: 1px solid #78909c;
	line-break: 20px;
}


.sub-header.sub-h-pa1:after{content:"代金引換";bottom: -28px; right: 12px;background: #e8f5e9;}

.sub-header.sub-h-pa1:before{content:"事前振込";bottom: -28px;right: 74px;background:#fffde7;}

.sub-header.sub-h-pa2:after{content:"事前振込";bottom: -28px;right: 12px;background:#fffde7;}
.sub-header.sub-h-pa3:after{content:"代金引換";bottom: -28px;right: 12px;background: #e8f5e9;}

/*ステップ*/
#step{ margin: 0 6px 6px 6px;}


.step-inner{ width: 50%; float: left; position: relative;}
.step-img{ margin: 6px; position: relative;}
.step-img img{ vertical-align: bottom;}
.step-txt{ font-size: 12px;}

.s-bar{
	overflow: auto;
}
.s-bar::-webkit-scrollbar{
	width: 5px;
	background: #000;
}
.s-bar::-webkit-scrollbar:horizontal{
	width: 5px;
	background: #000;
}
.s-bar::-webkit-scrollbar-thumb{
	background: #607d8b;
	border-radius: 2px;
}
.s-bar::-webkit-scrollbar-thumb:horizontal{ 
	background: #ccc;
	border-radius: 2px;
}
.s-bar::-webkit-scrollbar-track-piece:start{
	background: #000;
}
.s-bar::-webkit-scrollbar-track-piece:end{
	background: #000;
}
.s-bar::-webkit-scrollbar-corner{
	background: transparent;
}





/*モーダル*/
	
.modal.mo1{ display: none;}
.modal.mo2{ display: none;}
.modal.mo3{ display: none;}
.modal.mo4{ display: none;}
.modal.mo5{ display: none;}
.modal.mo6{ display: none;}
.indent-p1{ text-indent: 1em;}

#step .md-btn {
	position: absolute;
	bottom: 0;
	right: 0px;
	width: 28px;
	height: 28px;
  	cursor: pointer;
  	display: block;
  	color: #f5f5f5;
  	text-align: center;
  	line-height: 30px;
  	background:#00bcd4 ;
  	border-radius: 2px;
  	-webkit-box-shadow: 0 0 0 1px #222;
  	box-shadow: 0 1px 2px 0 #000;
}
#step .md-btn i{ font-size: 20px; vertical-align: -4px; color: #fff;}


#step-5-6{ padding-left:6px; padding-right: 6px;position: relative; padding-bottom: 16px;}
#step-5-6 li{ position: relative;color: #2196f3; line-height: 40px; list-style-type: disc; margin-left: 2em; letter-spacing: 1px;}
#step-5-6 .md-btn { display:inline; margin-left: 6px; margin-right: 6px; cursor: pointer;}
#step-5-6 i{ font-size: 16px; vertical-align: -2px; padding-left: 2px;}
#step-5-6:after{content:""; clear: both;}
#step .md-btn:hover {
  background: #03a9f4; 
}

#step-5-6 .md-btn:hover {background-color:transparent; color: #f44336 ;}
.modal {
  position: fixed;
  top: 3%;
  right: 3%;
  width: 94%;
  max-width: 480px;
  height: 94%;
  padding: 64px 6px 24px 6px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-shadow: 0 2px 6px rgba(0,0,0,0.5);
  box-shadow: 0 2px 6px rgba(0,0,0,0.5);
  border-radius: 12px;
  background-color: rgba(0,0,0,0.85);
  color: #fff;
  font-size: 20px;
  z-index: 9999;
}
.modal-inner{ width: 100%; height: 100%;overflow-y: auto; text-align: left;}
.modal .close {
  position: absolute;
  top: 16px;
  right: 6px;
  width: 36px;
  height: 36px;

  border-radius: 50%;
  cursor:pointer;
  border: 1px solid rgba(255,255,255,0.8);
}
.modal .close:before,
.modal .close:after{
  position:absolute;
  top:6px;
  border:1px solid #fff;
  height:22px;
  content:"";
}
.modal .close:before {
  left:18px;
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.modal .close:after {
  right:18px;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
.modal .close span {
  display:none;
}

#pageWrap.bg-blur:before {
  content: "";
  z-index: 9998;
  position: absolute;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background: #fff;
  opacity:0.1;
}



.modal h4,.modal p,.modal dl,.modal ul{text-shadow: 0 1px 1px #000; color: #fff;}
.modal h5{ font-size: 16px; font-weight: normal; margin: 0 12px; text-align: center;}
.modal dl{ margin-left: 12px; margin-right: 12px; font-size: 14px; line-height: 1.6; letter-spacing: 1px;}
 .modal dt{ font-size: 16px; text-align: center;}














/*シェアボタン*/
	.sher-btn-area{ position: absolute; top: 226px; right: 0; z-index: 9000; margin-right: 16px;}
		
		
		.sher-btn-area .dropdown-button{ position: relative; width: 42px; height: 42px;border: 1px solid #fff; background-color: #f1f1f1;cursor: pointer;
		-webkit-border-radius: 50%;
		-moz-border-radius: 50%;
		border-radius: 50%;
		box-shadow: 0 1px 3px 0 rgba(0,0,0,0.5);
		-webkit-transition: all 0.15s ease-in-out;
   		-moz-transition: all 0.15s ease-in-out;
    	-ms-transition: all 0.15s ease-in-out;
    	-o-transition: all 0.15s ease-in-out;
    	transition: all 0.15s ease-in-out;
		-moz-transform: scale(1);
		-webkit-transform: scale(1);
		-o-transform: scale(1);
		-ms-transform: scale(1);
    	transform: scale(1);	
		opacity: 1;
		filter: alpha(opacity=100);
		-ms-filter: "alpha(opacity=100)";
		}
		.sher-btn i{ width: 44px; text-align: center; position: absolute; top: 10px;color: #37474f;}
		.dropdown-button.btn-open{ 
		-webkit-transform: scale(0);
		-o-transform: scale(0);
		-ms-transform: scale(0);
    	transform: scale(0);
    	opacity: 0;	
    	box-shadow: 0 1px 3px 0 rgba(0,0,0,0);
		}
		.sher-btn-area .dropdown-button:hover{ background-color: #fff;}
		#dropdown-sher{ 
		width: 194px; position: absolute; right: 0; z-index: 100; background-color: #fafafa;top:-24px; 
		-webkit-border-radius: 4px;
		-moz-border-radius: 4px;
		border-radius: 4px;
			
		box-shadow: 0 1px 3px 0 rgba(0,0,0,0.5);
			
		-webkit-transition: all 0.25s ease-in-out;
   		-moz-transition: all 0.25s ease-in-out;
    	-ms-transition: all 0.25s ease-in-out;
    	-o-transition: all 0.25s ease-in-out;
    	transition: all 0.25s ease-in-out;
    	
    	-moz-transform-origin:90% 14%;
		-webkit-transform-origin:90% 14%;
		-o-transform-origin:90% 14%;
		-ms-transform-origin:90% 14%;
		transform-origin:90% 14%;

			-moz-transform: scale(0);
			-webkit-transform: scale(0);
			-o-transform: scale(0);
			-ms-transform: scale(0);
    		transform: scale(0);	
		
		opacity: 1;
		filter: alpha(opacity=100);
		-ms-filter: "alpha(opacity=100)";
		}
		
		#dropdown-sher.on-doropdown{
			-moz-transform: scale(1);
			-webkit-transform: scale(1);
			-o-transform: scale(1);
			-ms-transform: scale(1);
    		transform: scale(1);	
		}

	
	#dropdown-sher li { position: relative; letter-spacing: 1px; color: #455a64; cursor: pointer; font-size: 12px;line-height: 22px !important;display: block; height: 22px; margin: 16px 18px 16px 16px;}
		#dropdown-sher a { text-decoration: none;color: #455a64; font-size: 12px;line-height: 22px;height: 22px; padding-left: 32px;}
		#dropdown-sher li.panel-title{ font-size: 13px;  font-weight: bold; line-height: 24px; cursor: default;}
			#dropdown-sher .sns-logo{ position: absolute; left: 0; line-height: 30px;}
			#dropdown-sher li.panel-title i { position: absolute; right: -10px; top: -6px; font-size: 24px; line-height: 24px; padding: 5px 5px; cursor: pointer; z-index: 1; display: block;}
			
				#dropdown-sher .counter{ position: absolute; top: 1px; right: 0; font-size: 12px; color: #c0c0c0;}
				#dropdown-sher li:hover,#dropdown-sher li a:hover{ background: none; color: #f44336;}
					#dropdown-sher li.panel-title:hover{ color: #455a64;}
						#dropdown-sher li.panel-title i:hover{ color: #f44336;}



/*ニュース*/
 #new-news dt{ font-size: 12px; padding-bottom: 4px;}
 #new-news dd{ margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid #ccc;}
 #new-news dd:last-child{ border-bottom: none;}
	#new-news a:hover{ color: #f44336;}

footer{ font-size: 10px; background-color: #263238; margin-top: 32px; padding-top: 6px;}
footer small{ color: #fff; padding-left: 12px;}
#footer-menu a{ line-height: 32px; font-size: 12px; letter-spacing: 1px; text-decoration: none; color: #03a9f4 ;}
#footer-menu a span{ margin-left: 12px; border-bottom: 1px solid #03a9f4 ; } 

.tab-swiper{ width: 100%;}
section{ position: relative; display: block;}

#footer-menu span:hover{ color: #f44336 ;border-bottom: 1px solid #f44336; }




#sidewarapper {
  	position: fixed;
  	top: 0;
  	width: 100%;
  	height: 100%;
  	max-width: 240px;
  	z-index: 9997;
  	background-color: #f1f1f1;
  	overflow-y: auto;
  	box-shadow: 1px 1px 10px 0 rgba(0, 0, 0, 0.3);
  	-webkit-overflow-scrolling: touch;
	-webkit-transform: translate3d(-290px, 0, 0);
   	-moz-transform: translate3d(-290px, 0, 0);
    -ms-transform: translate3d(-290px, 0, 0);
    -o-transform: translate3d(-290px, 0, 0);
    transform: translate3d(-290px, 0, 0);	

	-webkit-transition: all 0.25s ease-in-out;
   	-moz-transition: all 0.25s ease-in-out;
    -ms-transition: all 0.25s ease-in-out;
    -o-transition: all 0.25s ease-in-out;
    transition: all 0.25s ease-in-out;
        
    -webkit-backface-visibility:hidden;
	backface-visibility:hidden;	
	}

#sidewarapper:after {
	content:"";
	box-shadow: inset 0px 5px 6px -3px rgba(0, 0, 0, 0.5);
	width: 100%;
    height: 6px;
    right: 0;
    position: fixed;
    top: 0;
    z-index: 9999;
	-webkit-transform: translate3d(0, -6px, 0);
   	-moz-transform: translate3d(0, -6px, 0);
    -ms-transform: translate3d(0, -6px, 0);
    -o-transform: translate3d(0, -6px, 0);
    transform: translate3d(0, -6px, 0);	
	}


	#sidewarapper.navOpen{
		-webkit-transform: translate3d(0, 0, 0);
   		-moz-transform: translate3d(0, 0, 0);
    	-ms-transform: translate3d(0, 0, 0);
     	-o-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);	
	}

#sidewarapper.navOpen:after{
	content:"";
	-webkit-transform: translate3d(0, 0, 0);
   	-moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);	

}

#nav-mobile{ width: 239px; background-color: #607d8b; color: #fff; font-size: 12px; height: 100%; min-height: 100%;border-right: 1px solid #78909c;
	-webkit-tap-highlight-color:rgba(0,0,0,0);
	-webkit-user-select:none;
	-moz-user-select:none;
	user-select:none;
  	overflow-y: auto;
  	-webkit-overflow-scrolling: touch;
    -webkit-backface-visibility:hidden;
	backface-visibility:hidden;	
}

#nav-mobile ul{box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.6); margin: 8px 4px;background:#37474f; border-width: 1px;border-style: solid; border-color:#263238 #263238 #455a64 #263238; 
		border-radius: 4px;
}

.nav-list li{ position: relative; height: 48px; line-height: 48px; border-bottom: 1px solid #263238; border-top: 1px solid #455a64;margin: 0 12px; letter-spacing: 1px;}
	#nav-mobile ul li:first-child{ border-top: none;}
	#nav-mobile ul li:last-child{ border-bottom: none;}
	#nav-mobile ul li a{ color: #b0bec5; text-decoration: none; display: block;}
	#nav-mobile ul li a:hover{ color: #ff9800;}

#nav-mobile ul li a:after{
	content:"\e801";
	font-family: 'icomoon';
	position: absolute; right: 0;
	font-size: 18px;
	color: #78909c;
	z-index: 1;
}
#nav-mobile ul li:first-child:after{
	content:"";
	position: absolute;
	top: 20px;
	right: 5px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 8px 5px 0 5px;
	border-color: #fff transparent transparent transparent;
}	

#nav-mobile ul li a:hover:after{color: #ff9800;}

/*カレンダー*/

#cal_warap{ background: #fff;border-bottom: 1px dotted #ccc;height: auto; position: relative;}

 
/* カレンダー */

#cal_warap { padding-top: 22px; padding-bottom: 56px;}
.calenderArea { 
	width: 100%;
	height: 100%;
	color: #6C7885;
	user-select: none;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	color:#000;
	}
.calender_inner1 { 
	margin: 10px;
}

.calenderArea table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 2px;
	margin-bottom: 1px;
}
.calenderArea table th {
	font-size: 12px;
	text-align: center;
	font-weight: normal;
}
.calenderArea table td {
	font-size: 10px;
	border: 1px solid #ccc;
	text-align: center;
	padding: 4px 0;
}
.calenderArea table .off {
	background: #f44336;
	border-color: #f44336;
	color: #fff;
	
}
.calenderArea table .off1-2 {
	background: #ffebee;	
}
.pr-ne-man{ color: #78909c;}
.calenderArea table .off2 {
	background: #2196f3;
	border-color: #2196f3;
	color: #fff;	
}

tr.week th:first-child{ color: #f44336;}
tr.week th:last-child{ color: #3f51b5;}


.month1 {

	position: absolute;
	bottom: 0;
	right: 12px;
	margin-bottom: 12px;
	text-align: right;
	font-size: 24px;
}

.calender-detail{ position: absolute; bottom: 0; font-size: 12px; margin-bottom: 12px; left: 12px; line-height: 1.8; letter-spacing: 1px;} 
.shop-off1{ color: #f44336;}
.shop-off2{ color: #2196f3;}


	
	



/*ヘルプ*/
   /* faq */
   	.faq {margin-left: 12px; margin-right: 12px; position: relative;}
    .faq dt{ padding-left: 2em;font-size: 14px; line-height: 1.8;text-align: justify; text-indent: -2em; color: #2196f3;}
    .faq dd{ padding-left: 2em;font-size: 14px; line-height: 1.8;text-align: justify; text-indent: -2em; color: #455a64;}
    
    
    .faq dt::before{
    content: "Q";
    color: #2196f3;
    position: relative;
    padding-right: 1em;
    
    }
    .faq dd::before {
    content: "A";
    padding-right: 1em;
    color: #f44336;
    }
	.faq .to-link{ color: #2196f3;}
	.faq .to-link:hover{ color: #f44336;}
/*インデックスリスト*/
.index-list{ padding-left: 12px; padding-right: 12px;}
	.index-list li{  border-bottom: 1px solid #ccc; line-height: 48px; font-size: 14px; letter-spacing: 1px;}
	.index-list li a{text-decoration: none;}
	.index-list li:last-child{ border-bottom: none;}
	.index-list li a{ color:#2196f3;}
	.index-list li a:hover{ color: #f44336;}
	
/*印刷*/
#print-box li img{ width: 100%;} 

#print-box li span{ display: block;padding-left: 12px; padding-right: 12px;}
#print-box h3{ font-size: 16px;}
#print-box .to-link{ display: inline-block; color: #2196f3; text-decoration: none;}
#print-box .to-link:after{ text-decoration: none; padding-left: 6px;}
#print-box h3:hover{ color: #f44336 ;} 

/*more*/

.more-link{ position: absolute; right: 12px; top:24px;}
.more-link .dropdown-button{
	float: right; text-align: center; width: 30px; height: 30px; background: #f5f5f5; cursor: pointer;border-radius: 50%; 

}

.more-link .dropdown-button i{ line-height: 30px; color: #37474f;}
.more-link .zoom-panel{
	width: 100%;
	top: -4px;
	position: relative;
	z-index: 1;
	background-color: #fafafa;
		-webkit-border-radius: 4px;
		-moz-border-radius: 4px;
		border-radius: 4px;
			
		box-shadow: 0 1px 3px 0 rgba(0,0,0,0.5);
			
		-webkit-transition: all 0.25s ease-in-out;
   		-moz-transition: all 0.25s ease-in-out;
    	-ms-transition: all 0.25s ease-in-out;
    	-o-transition: all 0.25s ease-in-out;
    	transition: all 0.25s ease-in-out;
    	-moz-transform-origin:95% 6%;
		-webkit-transform-origin:95% 6%;
		-o-transform-origin:95% 6%;
		-ms-transform-origin:95% 6%;
		transform-origin:95% 6%;
			-moz-transform: scale(0);
			-webkit-transform: scale(0);
			-o-transform: scale(0);
			-ms-transform: scale(0);
    		transform: scale(0);	
}
.more-link .zoom-panel.on-doropdown{
			-moz-transform: scale(1);
			-webkit-transform: scale(1);
			-o-transform: scale(1);
			-ms-transform: scale(1);
    		transform: scale(1);	
		}


.more-link .zoom-panel li { line-height: 40px; padding-left: 12px; padding-right: 12px; letter-spacing: 1px;}
.more-link .zoom-panel li.panel-title{ position: relative; width: auto; display: block;  border-bottom: 1px solid #ccc;}
	.more-link i.panel-close{ position: absolute; right: 2px; top: 4px; width: 30px; height: 30px; text-align: center; line-height: 30px; cursor: pointer; z-index: 2;}
.more-link .dropdown-button:hover{ background-color: #eeeeee;}
.more-link .zoom-panel li a{ font-size: 12px;}
.more-link .zoom-panel li a:after{
		content: "\e801";
		font-family: 'icomoon';
		font-size: 16px;
		padding-left: 2px;
	}	

	.more-link i.panel-close:hover,.more-link a:hover {
	color: #f44336 ;
  }
	.more-link .to-link2::before {
  		background-color: #f44336;
	}






/*その他*/
.lef-ri-box{ position: relative; }
.lef-ri-box h3{ position: absolute; top: -2px; left: 40%; margin-left: 12px; font-size: 16px;}
.left-img { width: 40%; float: left; margin-left: 12px; margin-right: 12px; position: relative; box-shadow:0 0 0 1px #78909c;}
.right-txt{ padding-top: 30px;}


#line-box{ width: auto;padding-left: 6px; padding-right: 6px;}
#line-box img{ width: auto; vertical-align: bottom;}
#line-box li{
	width: 33%;
   width : -webkit-calc(100% / 3) ;
   width : calc(100% / 3) ; 
 float: left;box-sizing: border-box;

}
.line-b-inner{ margin-left: 6px; margin-right: 6px; display: block; margin-top: 6px; margin-bottom: 6px; border: 1px solid #78909c;}


.sample-price1 .print-img{ margin-left: 12px; margin-right: 12px; display: block;}
.sample-price1 h3{ font-size: 16px;}
.lef-ri-box h3 a:hover{ color:#f44336;}

/*テーブル*/
.w-50{ width: 50%;}
.w-100{ width: 100%;}

.table-wrap{ padding-left: 12px; padding-right: 12px;}
.table-wrap caption{ text-align: left; letter-spacing: 1px; font-size: 16px;}
.pr-ta{ border: none; text-align: left;border-collapse:collapse; }
.pr-ta th,.pr-ta td{ border: 1px solid #ccc;padding: 6px 1em; font-weight: normal;}
h3.exli{ width: 50%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
h3.exli.to-link:after{content:"";}
h3.exli:hover{ color: #f44336;}


ul.list-note li{ border-bottom: 1px dotted #ccc;padding: 6px 12px; letter-spacing: 1px;}


/*box下リンク*/
.click-erea{ border-top: 1px solid #ccc; height: 40px; padding-top: 8px; padding-bottom: 8px;}
	.click-erea li{ width: 50%; float: left; position: relative;}
		.click-erea li.right-link:before{content:""; position:absolute; left: 0; top: -8px; width: 1px; height: 56px; background: #ccc; z-index: 200;}
.click-erea a{
	height: 40px; padding: 0 6px;margin-left: 6px;  
	text-decoration: none;
	line-height: 40px; 
	letter-spacing: 1px;
	background: #fff; 
	display: inline-block;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	-webkit-transition: all 250ms;
   	-moz-transition: all 250mst;
    -ms-transition: all 250ms;
    -o-transition: all 250ms;
    transition: all 250ms;
}
.click-erea a:hover{ background: #f2f2f2; color: #f44336;}
span.af-ryoukin:after{content:"の料金";}
span.af-ryoukin2:after{content:"料金";}
span.af-page:after{content:"のページへ";}
span.af-page2:after{content:"ページへ";}
span.af-womiru:after{content:"を見る";}
span.af-kakunin:after{content:"確認";}
span.af-kakunin2:after{content:"を確認";}
span.af-kakunin3:after{content:"の確認";}

footer{ clear: both;}
@media only screen and (min-width:  31.25em) { /*460px*/
.step-inner{ width: 25%; float: left;}


}


@media only screen and (min-width:  41.875em) { /*670px*/
.pe-none{
	pointer-events:auto;
}
.dis-none{ display: none;}
.b-m-16-2{ margin-bottom: 16px !important;}





 ul#step li{ float: left; width: 33%; margin: 4px 0;}


.rectangle-list-wrap2{margin-left: 16px; margin-right: 16px;}

	.sher-btn-area{ position: absolute; top: 226px; right: 12px;margin-right: 16px;}




}/* small～mid media Queries ed*/


/* ミディアム～ラージ*//*media Queries ----------------------------------------------------------*/

@media only screen and (min-width: 62.0625em) { /*993px*/
.wrap{ padding-left:32px; padding-right: 32px;}
.wrap2{}
.wrap3{ position: fixed; top: 0; right: 0; width: 100%; z-index: 800;}
.list-box{ padding-left: 240px;}
.left-wrap{ width: 58%; float: left;}
.grid-sizer{ width: 50%;}
.grid-item {
  width:50%;
  float: left;
}


#help-menu-in{
	-webkit-transform: translate3d(0, -500px, 0);
	transform: translate3d(0, -500px, 0);
}
#help-menu-in.index-show{
	 display: block;
	-webkit-animation: anime1 0.5s ease-in-out 0.6s 1 normal forwards;
	animation: anime1 0.5s ease-in-out 0.6s 1 normal forwards;
	-webkit-transition:all 0.5s ease-in-out;
	transition:all 0.5s ease-in-out;				

}
@-webkit-keyframes anime1 {

0% {-webkit-transform: translate3d(0, -500px, 0);}
100% {-webkit-transform: translate3d(0, 0, 0);}
}

@keyframes anime1 {

0% {transform: translate3d(0, -500px, 0);}
100% {transform: translate3d(0, 0, 0);}
}





.right-wrap{width: 38%; margin-top: 72px; float: right;height: 100%; position: relative;}

	.sher-btn-area{ position: absolute; top: 298px; right: 42%; z-index: 9000; margin-right: 17px;}

#pageWrap.bg-blur .list-wrap,
#pageWrap.bg-blur #sidewarapper,
#pageWrap.bg-blur .menu-inner,
#pageWrap.bg-blur #menu-btn,
#pageWrap.bg-blur .sher-btn-area,
#pageWrap.bg-blur footer{
background:inherit;
	-webkit-filter: blur(4px);
    -moz-filter: blur(4px);
    filter: blur(4px);
    }

footer{ clear: both;}


}/* media Querie ed*/


@media only screen and (min-width: 70em) { /*1120px*/

main,footer,.box{ margin-left: 240px;}
	.wrap{  padding-left:16px; padding-right: 16px;margin: auto;}	


#sidewarapper {
	-webkit-transform: none;
   	-moz-transform:none;
    -ms-transform:none;
    -o-transform:none;
    transform:none);
}
		
		#sidenav {
			overflow: auto;
			box-shadow:none;
		} 

}/* media Querie ed*/