@charset "utf-8";
/************************************************************
 HTML再定義
************************************************************/
/*
body{
animation:fadeIn 1s ease 0s 1 normal;
-webkit-animation:fadeIn 1s ease 0s 1 normal;
}
@keyframes fadeIn{
0%{opacity:0}
100%{opacity:1}
}
@-webkit-keyframes fadeIn{
0%{opacity:0}
100%{opacity:1}
}
*/

input[type=text],
input[type=email],
input[type=url],
input[type=tel],
input[type=password],
textarea{
width:100%;
padding:.5rem;
}


/************************************************************
 Layout
************************************************************/
header, nav, #body, footer,
.main, main, .aside, aside, .wrap{
display:block;
overflow:hidden;
margin:0;
padding:0;
}
.wrap{
margin:0 auto;
padding:0 51px;
width:1232px;
border-left:5px solid #FFF;
border-right:5px solid #FFF;
}

#body .wrap{
padding-bottom:56px !important;
}

.main,
main{
float:left;
width:728px;
}
.aside,
aside{
float:right;
width:336px;
}

/***************
 HEADER
***************/
header{
border-top:5px #669999 solid;
}
header .wrap{
padding-bottom:1rem;
}
header h1{
float:left;
height:50px;
max-height:50px;
margin:10px 0 0 0;
padding:0;
background:none;
}
header h1 img{
height:100%;
}
header p{
float:left;
width:728px;
font-size:12px;
white-space:nowrap;
font-weight:bold;
text-align:justify;
text-justify:inter-ideograph;
-moz-text-align-last:justify;
text-align-last:justify;
margin:8px 0 0 0;
line-height:20px;
border-top:1px #ccc solid;
border-bottom:1px #ccc solid;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
header dl{
float:right;
list-style:none;
width:336px;
margin:0;
padding:0;
border-top:90px solid #669999;
border-left:1.5em solid transparent;
border-right:1.5em solid transparent;
position:relative;
}
header dt{
text-align:center;
font-size:2.5rem;
margin:0;
padding:0;
white-space:nowrap;
width:100%;
position:absolute;
top:-80px;
}
header dd{
display:block;
overflow:hidden;
text-align:center;
font-size:12px;
font-weight:bold;
margin:0;
padding:0;
width:100%;
border:0;
position:absolute;
top:-1.75rem;
}
header dl a{
color:#eee;
}
header dl a:hover{
color:#fff;
}

/***************
 INTRO
***************/
#intro{
display:block;
overflow:hidden;
width:100%;
background:repeating-linear-gradient(to right,
#c4e17f 0px, #c4e17f 50px,
 #f7fdca 50px, #f7fdca 100px,
 #fad071 100px, #fad071 150px,
 #f0766b 150px, #f0766b 200px,
 #db9dbe 200px, #db9dbe 250px,
 #c49cdf 250px, #c49cdf 300px,
 #6599e2 300px, #6599e2 350px,
 #61c2e4 350px, #61c2e4 400px);
}
#intro .wrap{
text-align:right;
position:relative;
}
#intro span{
display:block;
overflow:hidden;
font-size:15vw;
line-height:.55;
padding:1.55rem 0;
position:absolute;
top:50%;
left:3%;
transform:translate(3%,-50%);
-webkit-transform:translate(3%,-50%));
-ms-transform:translate(3%,-50%));
color:#fff;
text-shadow:rgba(0,0,0,.5) 0 0 .55rem;
}
#intro img{
/*margin:1rem 0;*/
/*width:50%;*/
height:100%;
}

/***************
 GLOBAL NAV
***************/
nav{
display:block;
overflow:hidden;
margin:0;
padding:0;
background:#669999;
}
nav ul{
list-style:none;
display:table;
table-layout:fixed;
border-collapse:collapse;
width:100%;
margin:0;
padding:0;
line-height:0;
}
nav li{
display:table-cell;
margin:0;
padding:0;
border-left:1px solid #fff;
border-right:1px solid #fff;
}
nav a{
display:block;
overflow:hidden;
font-size:12px;
text-align:center;
text-decoration:none;
margin:5px 0 0 0;
padding:10px 0;
width:100%;
height:60px;
line-height:1;
color:#fff;
}
nav a u{
display:block;
overflow:hidden;
text-align:center;
text-decoration:none;
margin-bottom:.5em;
}
nav a i{
display:block;
overflow:hidden;
font-size:1.5rem;
text-align:center;
}
nav a span{
display:block;
overflow:hidden;
font-size:13px;
font-weight:bold;
text-align:center;
margin:0 0 5px 0;
}
nav a.current,
nav a:hover,
nav a:focus{
background:#fff;
color:#669999;
}

/***************
 BODY
***************/
#body{
/*background:#eee;*/
}
#body .wrap{
padding-bottom:2rem;
background:#fff;
}

/***************
 FOOTER
***************/
footer{
display:block;
overflow:hidden;
font-size:.9rem;
background:#333;
color:#fff;
}
footer .wrap{
padding-bottom:2rem;
  background-image: repeating-linear-gradient(to right,
  #c4e17f 0px, #c4e17f 50px,
  #f7fdca 50px, #f7fdca 100px,
  #fad071 100px, #fad071 150px,
  #f0766b 150px, #f0766b 200px,
  #db9dbe 200px, #db9dbe 250px,
  #c49cdf 250px, #c49cdf 300px,
  #6599e2 300px, #6599e2 350px,
  #61c2e4 350px, #61c2e4 400px);
  background-size: 100% 10px;
  background-repeat:no-repeat;
}
footer .wrap h2{
text-align:left;
margin:2rem 0 0 0;
padding:1rem 0;
background:none;
border:0;
border-bottom:1px #fff solid;
}
footer a{
text-decoration:none;
color:#ccc;
}
footer a:hover{
color:#fff;
}

/***************
 address
***************/
address{
display:block;
overflow:hidden;
font-size:11px;
height:60px;
background:#000;
}
address .wrap{
display:flex;
justify-content:space-between;
align-items:center;
height:100%;
}
address a{
text-decoration:none;
margin-right:10px;
white-space:nowrap;
color:#ccc;
}
address a:hover{
color:#fff;
}
address a:last-child{
text-align:right;
margin:0;
width:100%;
}
address a i{
margin-right:3px;
color:#FF9900;
}
@media all and (max-width:850px){
	address a:last-child{
		margin-right:50px;
	}
}

/************************************************************
 UTILITY
************************************************************/
.utility{
display:flex;
flex-wrap:wrap;
width:100%;
}
.utility_page,
.utility_pickup,
.utility_newentry,
.utility_category,
.utility_parts{
display:block;
overflow:hidden;
width:100%;
}

/***************
 PANKUZU
***************/
.pankuzu{
display:flex;
overflow:hidden;
overflow-x:scroll;
margin:1.5rem 0 0 0;
padding:0 0 .5rem 0;
width:100%;
line-height:1.0;
user-select:none;
height:25px;
}
.pankuzu ol,
.pankuzu li{
list-style:none;
margin:0;
padding:0;
white-space:nowrap;
font-size:11px;
}
.pankuzu li:not(:first-child):before{
content:">";
margin:0 .5rem;
}
.pankuzu strong{
font-weight:bold;
color:#333;
}
.pankuzu a{
text-decoration:none;
}
.pankuzu a:hover{
text-decoration:underline;
}
/*スクロールバーサイズ*/
.pankuzu::-webkit-scrollbar{
width:100%;
height:1px;
}
/*スクロールバー背景色*/
.pankuzu::-webkit-scrollbar-track{
background:#eee;
}
/*スクロールバー色*/
.pankuzu::-webkit-scrollbar-thumb{
background:#09C9D9;
}

/***************
 Home & SNS
***************/
.sns{
display:flex;
align-items:center;
justify-content:space-between;
gap:1px;
line-height:1.0;
padding:1.5rem 0 0 0;
border-top:1px #ccc solid;
}
.sns a{
display:block;
overflow:hidden;
text-align:center;
text-decoration:none;
font-size:1.3rem;
line-height:60px;
width:100%;
background:rgba(0,0,0,.05);
color:#666;
}
.sns i,
.sns img{
height:1.3rem;
-webkit-transition:0.2s;
   -moz-transition:0.2s;
    -ms-transition:0.2s;
     -o-transition:0.2s;
        transition:0.2s;
}
.sns a:hover{
background:rgba(0,0,0,.1);
}
.sns a:hover i,
.sns a:hover img{
font-size:1.5rem;
height:1.5rem;
color:#333;
}

/***************
 SEARCH FORM
***************/
form.search{
display:block;
overflow:hidden;
width:100%;
margin:1.5rem 0 0 0;
border:1px #669999 solid;
}
form.search input{
float:left;
width:100%;
height:60px;
padding:0 70px 0 10px;
outline:none;
border:0;
}
form.search button,
form.search input[type=submit]{
float:left;
font-size:1.5rem;
width:60px;
height:60px;
margin:0 0 0 -60px;
padding:0;
border:none;
outline:none;
cursor:pointer;
text-align:center;
background:#669999;
color:#eee;
}
form.search:hover button:hover,
form.search input[type=submit]:hover{
color:#fff;
}

/************************************************************
 Pagelist
************************************************************/
section.nav{
display:block;
overflow:hidden;
margin:0;
line-height:1.3;
}
section.nav dl,
section.nav dt,
section.nav dd{
margin:0;
padding:0;
line-height:1;
border:0;
}
section.nav dt{
font-size:1rem;
padding:2rem 0 .7rem 0;
color:#333;
}
section.nav dt i{
font-size:1.5rem;
margin:0 5px 0 0;
}
section.nav dd{
margin:-1px 0 0 0;
border-top:1px #eee solid;
border-bottom:1px #eee solid;
}
section.nav a{
display:flex;
align-items:center;
text-decoration:none;
font-weight:bold;
font-size:.9rem;
margin:.5rem 0;
padding:5px 0 5px .7rem;
height:2.5rem;
line-height:1.3;
color:#669999;
border-left:5px #eee solid;
}
section.nav dd:hover{
}
section.nav a:hover{
border-left:5px #669999 solid;
color:#333;
}
section.nav a.current{
border-left:5px #669999 solid;
color:#333;
}
/*
section.nav dd:has(a.current){
border-top:1px #669999 solid;
border-bottom:1px #669999 solid;
}
*/

/************************************************************
 ENTRY LIST
************************************************************/
main div.archive a{width:calc(100% / 4 - .5rem);}
aside div.archive a{width:calc(100% / 2 - .5rem);}
div.archive{
display:flex;
justify-content:space-between;
flex-wrap:wrap;
margin:.25rem 0 0 0;
}
div.archive a{
display:block;
overflow:hidden;
text-decoration:none;
line-height:1.3;
margin:1rem 0 0 0;
padding:0;
color:#333;
}
div.archive img.mark{
position:absolute;
top:5px;
left:5px;
width:24px;
height:11px;
}
div.archive span{
display:block;
overflow:hidden;
}
div.archive span.eyecatch{
position:relative;
height:0;
padding:0 0 56.25%;
overflow:hidden;
}
div.archive span.eyecatch span.img{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background-position:center center;
background-repeat:no-repeat;
background-size:cover;
-webkit-transition:0.2s;
   -moz-transition:0.2s;
    -ms-transition:0.2s;
     -o-transition:0.2s;
        transition:0.2s;
}
div.archive span.sub{
font-size:11px;
font-weight:bold;
text-align:center;
text-overflow:ellipsis;
white-space:nowrap;
position:absolute;
bottom:0;
left:0;
z-index:9999;
padding:0 .5rem;
width:100%;
height:2.5rem;
line-height:2.5rem;
background:rgba(255,255,255,0.7);
color:#333;
-webkit-transition:0.2s;
   -moz-transition:0.2s;
    -ms-transition:0.2s;
     -o-transition:0.2s;
        transition:0.2s;
}
div.archive span.title{
font-size:.9em;
display:-webkit-box;
-webkit-line-clamp:3;
-webkit-box-orient:vertical;
margin-top:.25rem;
height:4em;
}
div.archive span.title b{
display:block;
overflow:hidden;
font-size:11px;
margin-top:.5rem;
}
/*******************************
hover
*******************************/
div.archive a:hover{
font-weight:bold;
}
div.archive a:hover span.eyecatch span.img{
-webkit-transform:scale(1.1);
   -moz-transform:scale(1.1);
    -ms-transform:scale(1.1);
    -o-transition:scale(1.1);
        transform:scale(1.1);
}
div.archive a:hover span.sub{
height:0;
}
/*******************************
responsive
*******************************/
@media all and (max-width:650px){
	main div.archive a,
	aside div.archive a{
		width:calc(100% / 2 - .5rem);
	}
}



/************************************************************
 Entry list
************************************************************/
dl.entrylist{
display:flex;
flex-wrap:wrap;
margin-top:0;
}
dl.entrylist dt{
margin:1.5rem 0 0 0;
position:relative;
width:8rem;
height:0;
padding:0 0 8rem;
overflow:hidden;
}
dl.entrylist dt img{
object-fit:cover;
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
}
dl.entrylist dt img.mark{
top:5px;
left:5px;
width:24px;
height:11px;
}

dl.entrylist dd{
width:calc(100% - 8rem);
margin:1.5rem 0 0 0;
padding:0 0 0 1rem;
font-size:.9rem;
line-height:1.2;
border:0;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:6;
overflow:hidden;
}
dl.entrylist strong{
font-size:1.2rem;
display:block;
margin-bottom:.3rem;
}
dl.entrylist span{
display:block;
}
dl.entrylist p{
margin:.5em 0 0 0;
line-height:1.4;
}

/************************************************************
AREA DB HEADER
************************************************************/
.areaComment{
display:block;
overflow:hidden;
position:relative;
height:100%;
}
.areaComment div{
display:block;
overflow:hidden;
position:absolute;
top:0;
display:block;
overflow:hidden;
margin:0;
}
.areaComment div p{
display:block;
overflow:hidden;
margin:0;
padding:1rem;
line-height:1.3;
font-size:.85rem;
font-weight:bold;
background:rgba(255,255,255,.5);
}
@media all and (max-width:600px){
	.areaComment div{
		position:relative;
	}
	.areaComment div p{
		padding:1rem 0 0 0;
		font-weight:normal;
	}
}


/************************************************************
AREA DB LIST
************************************************************/
dl.dblist{
display:flex;
flex-wrap:wrap;
margin:0;
}
dl.dblist dt{
margin:1rem 0 0 0;
position:relative;
width:8rem;
height:0;
padding:0 0 8rem;
overflow:hidden;
}
dl.dblist dt img{
object-fit:cover;
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
}
dl.dblist dt span{
display:flex;
gap:10px;
position:absolute;
bottom:5px;
left:50%;
transform:translateX(-50%);
-webkit-transform:translateX(-50%);
-ms-transform:translateX(-50%);
}
dl.dblist dt a{
display:inline-block;
text-align:center;
width:35px;
height:35px;
line-height:35px;
color:#666;
background:rgba(255,255,255,.5);
border-radius:50%;
}
dl.dblist dt a:hover{
color:#333;
background:rgba(255,255,255,.9);
}
dl.dblist dd{
width:calc(100% - 8rem);
margin:1rem 0 0 0;
padding:0 0 0 1rem;
font-size:.85rem;
line-height:1.2;
border:0;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:7;
overflow:hidden;
}
dl.dblist strong{
display:block;
margin-bottom:.3rem;
}
dl.dblist span{
display:block;
}
dl.dblist p{
margin:.5em 0 0 0;
line-height:1.2;
}

/************************************************************
QR
************************************************************/
#qrcodeWrap{
display:flex;
overflow:hidden;
text-align:center;
width:100%;
margin:1.5rem auto 0 auto;
}
#qrcode{
display:block;
vertical-align:top;
margin:0;
padding:0;
min-width:130px;
min-height:130px;
border:10px #fff solid;
}
#qrcodeWrap p{
display:block;
overflow:hidden;
font-size:.85rem;
line-height:1.2;
margin:0 0 0 10px;
padding:0;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:5;
height:5rem;
}


/*********************************************
MAP Link
*********************************************/
div.maplink{
display:block;
overflow:hidden;
margin:1.5rem 0 0 0;
font-weight:bold;
line-height:1.0;
background-image:url('../images/map.svg');
background-position:right center;
background-repeat:no-repeat;
background-size:contain;
}
div.maplink ul,
div.maplink li{
list-style:none;
margin:0;
padding:0;
}
div.maplink ul{
display:block;
overflow:hidden;
margin:0 0 0 -1px;;
}
div.maplink li{
float:left;
width:calc(100% / 8 - 1.01px);
margin:1px 0 0 1px;
}
div.maplink a{
display:block;
overflow:hidden;
font-size:.9rem;
text-align:center;
text-decoration:none;
width:100%;
line-height:2.5rem;
}
div.maplink a:hover{
background-color:rgba(0,0,0,0.5) !important;
color:#fff !important;
}
div.maplink ul.area1 a{background-color:rgba( 87,179,219,0.7);color:#333;}
div.maplink ul.area2 a{background-color:rgba( 65,181,173,0.7);color:#333;}
div.maplink ul.area3 a{background-color:rgba(100,188,110,0.7);color:#333;}
div.maplink ul.area4 a{background-color:rgba(217,222, 88,0.7);color:#333;}
div.maplink ul.area5 a{background-color:rgba(244,187,101,0.7);color:#333;}
div.maplink ul.area6 a{background-color:rgba(235, 76, 71,0.7);color:#333;}
div.maplink ul.area7 a{background-color:rgba(233,121, 81,0.7);color:#333;}
div.maplink ul.area8 a{background-color:rgba(255,174,191,0.7);color:#333;}

aside div.maplink li{
		width:calc(100% / 5 - 1px);
	}

/********************/
@media all and (max-width:500px){
	div.maplink li{
		width:calc(100% / 5 - 1px);
	}
	div.maplink a{
		height:50px;
		line-height:50px;
	}
}

/************************************************************
SUGGEST LIST
************************************************************/
ul.suggestlist{
font-size:.9rem;
margin:1rem 0 0 0;
padding:0;
line-height:1.3;
width:100%;
}
ul.suggestlist ul,
ul.suggestlist li{
margin:0;
padding:0;
}
ul.suggestlist li{
display:flex;
align-items:center;
justify-content:flex-end;
}
ul.suggestlist span{
margin-right:auto;
text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;
max-width:calc(100% - 4.5rem - 20px);
}
ul.suggestlist span:before{
content:"・";
}
ul.suggestlist a{
text-decoration:none;
}
ul.suggestlist a:first-child{
}
ul.suggestlist a:not(:first-child){
text-align:center;
font-size:13px;
width:1.5rem;
height:1.5rem;
line-height:1.5rem;
display:block;
margin:2.5px 0 2.5px 5px;
background:#eee;
color:#333;
}
ul.suggestlist a:first-child:hover{
text-decoration:underline;
}
ul.suggestlist a:not(:first-child):hover{
background:#ccc;
}
ul.suggestlist li.current{
list-style:none;
margin:0;
padding:0;
}
ul.suggestlist li.current a:first-child,
ul.suggestlist li.current a:first-child:hover{
font-weight:bold;
color:#333;
}

/************************************************************
先日 先週 先月 移動リンク
************************************************************/
ul.deteNaition{
display:flex;
justify-content:space-between;
align-items:center;
gap:1rem;
width:100%;
margin:1.5rem 0 0 0;
padding:0;
}
ul.deteNaition li{
list-style:none;
margin:0;
padding:0;
width:100%;
}
ul.deteNaition a{
display:block;
overflow:hidden;
text-align:center;
text-decoration:none;
font-size:.9rem;
margin:0;
padding:.5rem 0;
width:100%;
line-height:1;
background:rgba(0,0,0,.05);
color:#666;
}
ul.deteNaition a:hover{
background:rgba(0,0,0,.1);
}
ul.deteNaition a i{
display:block;
font-size:1rem;
margin-bottom:5px;
text-align:center;
}

/************************************************************
END
************************************************************/