@charset "utf-8";

/*--------------------------------------------------------------
	Common
--------------------------------------------------------------*/

html {
	overflow-y: scroll;
	overflow-x: hidden;
	-ms-overflow-style: scrollbar;
	font-size: 62.5%;
}

/* layout */
body {
	margin: 0;
	padding: 0;
	text-align: center;
	font-size: 1.6em;
	color: #444444;
	box-sizing: border-box;
	font-family: 'Noto Sans JP', sans-serif;
}

a, .btn { transition: all 0.125s ease-in-out 0s; }
.widthFit {	width: 100%; height:auto;}
.mB40{margin-bottom:40px;}

.item_text a{ color:#444444; text-decoration:underline;}
.linkbutton{ background-color:#8fc120; color:#FFFFFF;} 

/* テキスト装飾 **********************/
.txtBold { font-weight: bold;}
.txtRed { color: #aa0000;}

/* ヘッダ **********************/
#header_pc { text-align: left;}

/* 本文 **********************/

#container{
	box-sizing:border-box;
}

#container img{max-width:100%; height:auto;}

#top{ position:relative;}
#top img{width:100%; height:auto;}
#toppatent{z-index:2; position: absolute;}
#topclock{position:absolute; }
#clockinfo{width:100%;}
#clockinfo span{display:inline-block;width:33%; text-align:center;}
#top_appr{z-index:2;position:absolute;}

#appeal{background-color:#a9d6af; color:#3d4c1b;}

.line_title{ color:#a9d6af;}

/* 横幅769以上(PC想定) */
@media only screen and (min-width: 769px) {
	.mbonly{display:none;}
	.pc80per{width:80%; margin-left:auto; margin-right:auto;}
	.linkbutton{ margin:0 auto 20px; font-size: 2.2rem; letter-spacing:0.3vw; border-radius:100px; padding: 10px 20px; display:inline-block;} 
   
	#container{	font-size:1.4rem; letter-spacing:0.05px; max-width:910px; margin:0 auto;}
	#container img{max-width:100%; height:auto;}
	
	#top img{width:100%; height:auto;}
	#toppatent{top: 5px; right: 5px; width: 10%;}
	#topclock{width:60%;  top:50%; left:50%; transform: translateY(-50%) translateX(-50%); -webkit-transform: translateY(-50%) translateX(-50%); margin:auto; }
	#topclock img{box-shadow: 3px 3px 3px rgba(50,50,50,0.4);}
	#clockinfo{width:100%;}
	#clockinfo span{font-size: 1.6rem;}
	#top_appr{bottom:5px; right: 5px; width:25%;}
	
	#top_appeal{margin:50px auto;}
	#top_appeal h2{font-size: 2.4rem; line-height: 1.6em; }
	#top_appeal h3{font-size:1.8rem; margin-bottom: 10px; }
	#top_appeal .text{margin:30px auto;}
	
	#cashless{ display:flex;width:70%; text-align:center; margin:30px auto 0;}
	#cashless div{ width:50%; margin:0 auto 10px;}
	
	#appeal{ display:flex; margin-bottom:30px; padding:20px 10px;}
	.ap_point{ width:25%; margin-bottom:20px; padding:10px;}
	.ap_point .ap_img{padding: 10px;}
	.ap_point .ap_img img {border-radius:10000px; width:100%; height:auto;}
	.ap_point .ap_text{text-align:left; font-size: 1.2rem;}
	.ap_text h3{ margin-bottom:10px; font-size:1.4rem; text-align:center; font-weight:normal;}
	
	#lineup{margin:80px auto; width:75%;}

	.line_title{margin-top:120px; position:relative; font-size: 1.2rem; margin-bottom:50px;  border-bottom: 1px solid #b2a69f;}
	.line_img{position:absolute; left:0; bottom: -30px; width:55%;}
	.line_img img{width:100%; height:auto;}
	.line_text{position:absolute;right:0; bottom:0; width:45%;}
	
	#lineup .item{margin-bottom:30px; display:flex; align-items: center;}
	#lineup h3{margin-bottom:10px;}
	#lineup .item .item_img{width:60%; padding: 0 10px 0 0;}
	#lineup .item .item_img img{width:100%; height:auto;}
	#lineup .item .item_info{width:40%;}
	#lineup .item .item_info .item_logo{width:20%;margin:0 auto;}
	#lineup .item .item_info .item_logo img{width:100%; height:auto;}
	#lineup .item .item_info .item_text{font-size: 1.2rem;}
} /* 横幅769以上(PC想定) */

 /* 横幅768px以下(スマホ想定) */
@media only screen and (max-width: 768px) {
	.pconly{display:none;}
	.pc80per{width:100%;}

	.linkbutton{ margin:0 auto 20px; font-size: 4.5vw; letter-spacing:0.2vw; border-radius:100px; padding: 10px 20px; display:inline-block;} 

	#container{	font-size:3.5vw; letter-spacing:0.05vw;	}
	#container img{max-width:100%; height:auto;}
	
	#top img{width:100%;height:auto;}
	#toppatent{top: 5px; right: 5px; width: 10%;}
	#topclock{width:70%;  top:50%; left:50%; transform: translateY(-50%) translateX(-50%); -webkit-transform: translateY(-50%) translateX(-50%); margin:auto; }
	#topclock img{box-shadow: 3px 3px 3px rgba(50,50,50,0.4);}
	#clockinfo{width:100%;}
	#clockinfo span{font-size: 2.2vw;}
	#top_appr{bottom:5px; right: 5px; width:25%;}
	
	#top_appeal{margin:50px auto;}
	#top_appeal h2{font-size: 4.5vw; line-height: 1.6em; }
	#top_appeal h3{font-size:4.2vw; margin-bottom: 10px; }
	#top_appeal .text{margin:30px auto;}
	
	#cashless{ display:flex;width:70%; text-align:center; margin:30px auto 0;}
	#cashless div{ width:50%; margin:0 auto 10px;}
	
	#appeal{margin-bottom:30px; padding:20px 10px;}
	.ap_point{display:flex; margin-bottom:20px; align-items:center;}
	.ap_point .ap_img{display:inline-block;width:40%; padding: 10px;}
	.ap_point .ap_img img {border-radius:10000px; width:100%;height:auto;}
	.ap_point .ap_text{display:inline-block;width:60%; padding-left:10px; text-align:left; font-size: 3vw;}
	.ap_text h3{ font-size: 3.5vw; margin-bottom:10px; }
	
	#lineup{margin:30px auto; width:75%;}
	.line_title{ font-size: 3.5vw; margin-bottom:30px; }
	.line_img{position:relative; border-bottom: 1px solid #b2a69f;height: 15vw;}
	.line_img img{position:absolute; bottom: -20px; right:0; left:0; margin: auto;}
	.line_text{padding-top:20px;}
	
	#lineup .item{margin-bottom:30px; align-items: center;}
	#lineup h3{margin-bottom:10px; font-size:4.2vw;}
	#lineup .item .item_info{display:flex;}
	#lineup .item .item_img img{width:100%;height:auto;}
	#lineup .item .item_info .item_logo{width:20%;padding-right:10px;border-right:1px solid #AAAAAA;}
	#lineup .item .item_info .item_logo img{width:100%; height:auto;}
	#lineup .item .item_info .item_text{margin:20px auto 0;width:90%; text-align:center; font-size: 3.5vw;}
} /* 横幅768px以下(スマホ想定) */