@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{
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 50px;
width:1224px;
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{
font-size:11px;
border-top:5px #CC0066 solid;
line-height:1.0;
height:120px;
}
header .wrap{
height:100%;
}
header .main{
position:relative;
padding:10px 0 0 0;
height:100px;
}
header .main h1{
display:block;
overflow:hidden;
margin:0;
}
header .main a{
display:block;
color:#222;
text-decoration:none;
}
header .main img{
max-width:100%;
height:50px;
}
header .main p{
position:absolute;
bottom:0;
display:block;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
margin:0;
padding:0;
width:100%;
font-weight:bold;
text-align:justify;
text-justify:inter-ideograph;
-moz-text-align-last:justify;
text-align-last:justify;
height:30px;
line-height:30px;
border-top:1px #222 dotted;
border-bottom:1px #222 dotted;
}

header .aside a{
display:block;
width:336px;
height:60px;
text-decoration:none;
border-top:100px solid #CC0066;
border-left:30px solid transparent;
border-right:30px solid transparent;
position:relative;
color:#fff;
}
header .aside a:hover{
font-weight:bold;
}

header .aside a span,
header .aside i,
header .aside img,
header .aside b{
display:block;
overflow:hidden;
text-align:center;
width:100%;
position:absolute;
top:0;
left:50%;
transform:translateX(-50%);
-webkit-transform:translateX(-50%);
-ms-transform:translateX(-50%);
}
header .aside a span{
top:-20px;
}
header .aside i{
top:-50px;
font-size:1.5rem;
}
header .aside img{
top:-50px;
height:20px;
}

header .aside b{
/*font-size:1.8rem;
font-weight:normal;*/
top:-90px;
}


/***************
 INTRO
***************/
#intro{
display:block;
overflow:hidden;
width:100%;
height:calc(100% - 120px);
background:#CC0066;
position:relative;
}
#intro .wrap{
height:100%;
padding:0;
position:absolute;
top:0;
left:50%;
transform:translateX(-50%);
-webkit-transform:translateX(-50%);
-ms-transform:translateX(-50%);
/*
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% 30%;
background-repeat:no-repeat;
*/
}

#intro picture img{
margin:0;
width:100%;
height:100%;
object-fit:cover;
}
#intro .wrap div{
position:absolute;
top:10%;
left:50px;
width:50%;
height:auto;
}
/*タイトル文字*/
#intro .wrap div img{
object-fit:unset;
width:100%;
}
#intro .wrap div a{
display:inline-block;
overflow:hidden;
font-weight:bold;
text-decoration:none;
white-space:nowrap;
margin:1.5rem 0 0 0;
padding:0 1rem 0 0;
line-height:1;
width:auto;
border:1px #fff solid;
border-radius:10px;
background:rgba(255,255,255,.7);
color:#333;
}
#intro .wrap div a:hover{
background:rgba(255,255,255,1);
}
#intro .wrap div a img{
width:50px;
height:50px;
margin:0 1rem 0 0;
}

/***************
 GLOBAL NAV
***************/
nav{
display:block;
overflow:hidden;
margin:0;
padding:0;
background:#CC0066;
}
nav ul{
line-height:0;
list-style:none;
display:table;
table-layout:fixed;
border-collapse:collapse;
width:100%;
margin:0;
padding: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:1.5rem;
text-align:center;
text-decoration:none;
margin:0;
padding:10px 0;
width:100%;
color:#fff;
border-top:5px rgba(0,0,0,0) solid;
}
nav a span{
display:block;
overflow:hidden;
font-size:.9rem;
text-align:center;
margin-top:5px;
}
nav a.current,
nav a:hover,
nav a:focus{
padding:20px 0 0 0;
background:#fff;
color:#CC0066;
border-top:5px #CC0066 solid;
/*box-shadow:0px 5px 3px -3px #CC0066 inset;*/
}

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

/***************
 FOOTER
***************/
footer{
display:block;
overflow:hidden;
text-align:center;
font-size:.85rem;
line-height:1.4;
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{
height:auto;
min-height:2rem;;
line-height:none;
margin:3.5rem 0 0 0;
padding:0 0 .5rem 0;
background-image:none;
border-bottom:1px #ccc dotted;
}
footer a{
display:block;
overflow:hidden;
text-decoration:none;
color:#ccc;
}
footer a:hover{
color:#fff;
}
footer li a span{
float:right;
}

/***************
 address
***************/
address{
display:block;
overflow:hidden;
font-size:11px;
line-height:60px;
background:#000;
color:#fff;
}

/************************************************************
 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:.7rem;
}
.pankuzu li:not(:first-child):before{
content:"/";
margin:0 .5rem;
}
.pankuzu strong{
font-weight:bold;
color:#333;
}
.pankuzu a{
text-decoration:none;
color:#336699;
}
.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;
}
.pankuzu:hover::-webkit-scrollbar{
height:10px;
}


/***************
 SNS
***************/
ul.sns{
display:flex;
align-items:center;
justify-content:space-between;
margin:2rem 0 0 0;
background:#f9f9f9;
}
ul.sns li{
display:block;
overflow:hidden;
list-style:none;
margin:0;
padding:0;
width:100%;
}
ul.sns a{
display:block;
overflow:hidden;
text-align:center;
width:100%;
height:60px;
line-height:60px;
}
ul.sns img{
height:20px;
-webkit-transition:0.2s;
   -moz-transition:0.2s;
    -ms-transition:0.2s;
     -o-transition:0.2s;
        transition:0.2s;
}
ul.sns a:hover{
background:#eee;
}
ul.sns a:hover img{
height:25px;
}

/***************
 SEARCH FORM
***************/
form.search{
display:block;
overflow:hidden;
width:100%;
margin:20px 0 0 0;
border:1px #CC0066 solid;
}
form.search input[type=text]{
float:left;
width:100%;
height:60px;
padding:0 60px 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:#CC0066;
color:#fff;
}
form.search:hover button:hover,
form.search input[type=submit]:hover{
background:#222;
color:#fff;
}

/***************
 SELECT LINK
***************/
div.selectlink{
display:block;
overflow:hidden;
position:relative;
width:100%;
height:60px;
margin:1rem 0 0 0;
}
div.selectlink:after{
pointer-events:none;
content:"≡";
font-size:2rem;
position:absolute;
top:0;
right:0;
display:block;
overflow:hidden;
width:60px;
height:60px;
line-height:60px;
text-align:center;
margin:0;
padding:0;
background:#CC0066;
color:#fff;
}
div.selectlink select::-ms-expand{
display:none;
}
div.selectlink select{
-moz-appearance:none;
-webkit-appearance:none;
-o-appearance:none;
-ms-appearance:none;
appearance:none;
margin:0;
padding:0 1rem;
background:none transparent;
vertical-align:middle;
font-size:inherit;
color:inherit;
outline:none;
cursor:pointer;
border:1px #CC0066 solid;
width:100%;
height:60px;
}
div.selectlink:hover:after,
div.selectlink:focus:after{
background:#222;
}

/******************************
Page Menu
******************************/
ul.navi{
list-style:none;
margin:1.5rem 0 0 0;
padding:0;
}
ul.navi li{
list-style:none;
margin:1px 0 0 0;
padding:0;
}
ul.navi a{
display:flex;
align-items:center;
justify-content:space-between;
overflow:hidden;
text-decoration:none;
padding:0 0 .2rem .5rem;
height:3.5rem;
line-height:1.2;
color:#333;
border-left:5px #eee solid;
}
ul.navi a:after{
content:"\f142";
font-family:'Font Awesome 5 Free';
font-weight:900;
font-size:2.5rem;
margin-left:1rem;
color:#ccc;
}
ul.navi a:hover{
background:linear-gradient(to right, #eee, transparent);
}
ul.navi a:hover:after{
color:#CC0066;
}

/******************************
Tagcloud
******************************/
ul.tagcloud{
text-align:center;
margin-left:0;
}
ul.tagcloud li{
display: inline;
list-style: none;
}
ul.tagcloud li a{
word-break:keep-all;
text-decoration:none;
}
ul.tagcloud li a:hover{
text-decoration:underline;
}


/***************
 Page MENU
***************/
div.utility_page{
display:block;
overflow:hidden;
margin:1rem 0 0 0;
}
div.utility_page ul{
list-style:none;
line-height:1.4;
width:100%;
margin:0;
padding:0;
}
div.utility_page li{
list-style:none;
margin:0;
padding:0;
}
div.utility_page a{
display:flex;
align-items:center;
font-size:.9rem;
text-decoration:none;
margin:.5rem 0 0 0;
padding:0 2.5em 0 0;
width:100%;
height:4.2em;
border-top:1px #ccc solid;
border-bottom:1px #ccc solid;
color:#333;
position:relative;
}
div.utility_page a:after{
display:block;
content:"\f15c";
font-family:'Font Awesome 5 Free';
font-weight:900;
font-size:2.6em;
position:absolute;
top:.6rem;
right:0;
line-height:1.0;
color:#ccc;
}
div.utility_page a:hover{
font-weight:bold;
border-top:1px #666 solid;
border-bottom:1px #666 solid;
}
div.utility_page a:hover:after{
color:#666;
}

div.utility_page li ul a,
div.utility_page li ul a:hover{
margin-left:.5rem;
padding:0 0 0 .5rem;;
height:2.4em;
border:0;
border-left:1px #ccc solid;
font-size:95%;
}
div.utility_page li ul a:hover{
border-left:1px #666 solid;
}
div.utility_page li ul a:after{
content:"";
}


/***************
 CATEGORY LIST
***************/
.utility_category ul{
list-style:none;
margin:1rem 0 0 0;
padding:0;
line-height:1.2;
}
.utility_category li{
margin:1px 0 0 0;
padding:0 0 0 .5em;
border-left:3px solid #CC0066;
}
.utility_category li:hover{
border-left:3px solid #333;
}
.utility_category a{
display:block;
overflow:hidden;
text-decoration:none;
margin:0;
padding:.5em 0;
}
.utility_category span{
float:right;
}
.utility_category li ul{
margin:0 0 0 .4em;
}

/***************
 PAGE NAVI
***************/
ul.paging{
display:flex;
justify-content:space-between;
flex-wrap:wrap;
list-style:none;
margin:2rem 0 0 0;
padding:1rem 0 0 0;
width:100%;
border-top:1px #CC0066 solid;
}
ul.paging li{
list-style:none;
margin:1px 0 0 0;
padding:0;
width:calc(100% / 10 - 1px);
}
ul.paging a{
display:block;
overflow:hidden;
text-align:center;
text-decoration:none;
width:100%;
height:60px;
line-height:60px;
background:#CC0066;
color:#fff;
}
ul.paging a:hover,
ul.paging a.current{
background:#666;
color:#fff;
}
/* Responsive */
@media all and (max-width:828px){
	ul.paging li{
		width:calc(100% / 5 - 1px);
	}
}

/*****/
ul.paging li.next,
ul.paging li.back{
width:calc(100% / 2 - 1px);
}
li.back a{
padding:0 1rem;
text-align:right;
}
li.back a:before{
float:left;
content:'\f060';
font-family:'Font Awesome 5 Free';
font-weight:900;
font-size:1.5rem;
}
li.next a{
padding:0 1rem;
text-align:left;
}
li.next a:after{
float:right;
content:'\f061';
font-family:'Font Awesome 5 Free';
font-weight:900;
font-size:1.5rem;
}

/************************************************************
 ENTRY LIST
************************************************************/
main div.archive a{width:calc(100% / 3 - .5rem);}
aside div.archive a{width:calc(100% / 2 - .5rem);}
div.archive{
display:flex;
justify-content:space-between;
flex-wrap:wrap;
margin:.5rem 0 0 0;
}
div.archive a{
display:block;
overflow:hidden;
font-size:1rem;
line-height:1.4;
text-decoration:none;
margin:1rem 0 0 0;
padding:0;
color:#333;
}
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 .5em;
width:100%;
height:2.5em;
line-height:2.5em;
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{
display:-webkit-box;
-webkit-line-clamp:3;
-webkit-box-orient:vertical;
margin-top:.25em;
height:4.2em;
}
/*******************************
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:850px){
	main div.archive a,
	aside div.archive a{
		width:calc(100% / 4 - .5rem);
	}
}
@media all and (max-width:750px){
	main div.archive a,
	aside div.archive a{
		width:calc(100% / 3 - .5rem);
	}
}
@media all and (max-width:550px){
	main div.archive a,
	aside div.archive a{
		width:calc(100% / 2 - .5rem);
	}
}

/***********************/
table.sammary{
display:block;
overflow:hidden;
margin:1rem 0 0 0;
padding:0;
width:auto;
font-size:12px;
}
table.sammary th,
table.sammary td{
font-weight:normal;
line-height:1.1;
border:0;
margin:0;
padding:5px 5px 0 0;
vertical-align:top;
background:none;
color:#333;
}
table.sammary th{
text-align:right;
}
table.sammary a{
text-decoration:none;
color:#333;
}
table.sammary a:hover{
text-decoration:underline;
}


/************************************************************
 Entry list
************************************************************/
dl.entrylist{
display:flex;
flex-wrap:wrap;
}
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 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;
}

/************************************************************
 DataBase
************************************************************/
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{
font-size:1rem;
display:block;
margin-bottom:.3rem;
}
dl.dblist span{
display:block;
}
dl.dblist p{
margin:.5em 0 0 0;
line-height:1.2;
}

/************************************************************
PRリスト
************************************************************/
table.pr{
margin:1.5rem 0 0 0;
}
table.pr th,
table.pr td{
text-align:center;
width:calc(100% / 3);
padding:.5rem;
border:1px #ccc solid;
}
table.pr hr{
margin:.5rem;
border:0;
border-bottom:1px #ccc dotted;
}
table.pr img{
object-fit:cover;
width:100%;
height:100%;
}
table.pr a{
display:block;
overflow:hidden;
font-size:14px;
font-weight:bold;
text-align:center;
text-decoration:none;
padding:1rem 0;
line-height:1.0;
background:#CC0066;
color:#333;
border-radius:5px;
position:relative;
}
table.pr a:hover{
background:#33DDDD;
color:#FFF;
}

/************************************************************
QR
************************************************************/
#qrcode{
float:left;
margin:0;
padding:0;
vertical-align:top;
border:0;
}
#qrcode + textarea{
float:right;
font-size:.9rem;
outline:none;
margin:0;
padding:0;
width:calc(100% - 165px - .9rem);
height:165px;
background:inherit;
color:#fff;
border:0;
}

/************************************************************
 apiフォーム
************************************************************/
form.api input[type=text],
form.api select{
width:100%;
}
form.api textarea{
width:100%;
height:10em;
}
form.api input[type=radio],
form.api input[type=checkbox]{
width:35px;
height:35px;
vertical-align:middle;
}
form.api input.jscolor{
width:120px;
}

/*********************************************
modal window
*********************************************/
.modalArea{
display:none;
position:fixed;
top:0;
left:0;
z-index:9999;
width:100%;
height:100%;
background:rgba(0,0,0,.9);
}
.modalArea div:first-child{
display:flex;
justify-content:space-between;
align-items:center;
margin:0 auto;
padding:15px;
height:50px;
}
.modalArea #closeModal{
display:block;
font-size:1.5rem;
cursor:pointer;
color:#ccc;
}
.modalArea #closeModal:hover{
color:#fff;
}
.modalArea div:last-child{
display:block;
font-size:11px;
text-align:center;
height:30px;
line-height:30px;
background:#333;
color:#fff;
}
.modalContents{
display:flex;
flex-flow:column;
width: 100%;
height:calc(100% - 80px);
border-top:1px #ccc solid;
}
.modalContents a{
display:flex;
flex-flow:column;
justify-content:center;
align-items:center;
text-decoration:none;
font-size:14px;
font-weight:bold;
margin:0;
padding:0;
height:inherit;
background:rgba(0,0,0,.1);
color:#fff;
}
.modalContents a i{
font-size:2rem;
}
.modalContents a:hover{
background:rgba(255,255,255,.9);
color:#666;
}

/************************************************************
広告
************************************************************/
.ad{
display:block;
overflow:hidden;
width:100%;
line-height:1.0;
text-align:center;
margin:1.5rem auto 0 auto;
padding:0;
}
.ad span{
display:block;
font-size:.8rem;
text-align:center;
margin:.5rem 0 0 0;
line-height:1.4;
}

/*********************************************
広告：3選
*********************************************/
table.comparison{
border-collapse:collapse;
table-layout:fixed;
margin:1.5rem 0 0 0;
width:100%;
}
table.comparison thead th{
font-weight:bold;
}
table.comparison th,
table.comparison td{
text-align:center;
font-size:.9rem;
line-height:1.5;
vertical-align:top;
padding:1rem .5rem;
border:1px #ccc solid;
}
table.comparison th{
text-align:center;
background:#eee;
}
table.comparison tr.comparison td{
padding:1px;
}
table.comparison tr.comparison td a:before{
content:"- PR -";
display:block;
font-weight:normal;
font-size:11px;
}

table.comparison a{
display:block;
font-size:13px;
font-weight:bold;
text-align:center;
text-decoration:none;
margin:0;
padding:1rem 0;
background:#FF9900;
color:#333;
}
table.comparison a:hover{
background:#CC0066;
color:#fff;
}
table.comparison img,
table.comparison i{
display:block;
text-align:center;
margin:0 auto;
}


/*********************************************
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:14px;
text-align:center;
text-decoration:none;
width:100%;
height:40px;
line-height:40px;
}
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;
	}
}


/*********************************************
占いフォーム
*********************************************/
form.app{
display:block;
margin:1rem 0 0 0;
padding:.5rem 1rem 1rem 1rem;
background:#f9f9f9;
/*background-image:url('https://navi.uranai.wdeco.jp/_/images/intro.svg');*/
background-image:url('../files/medias/uranaishi1.svg');
background-repeat:no-repeat;
background-position:bottom right;
background-size:30%;
border:5px #ccc dotted;
}
form.app dl{
font-size:.85rem;
margin:0;
padding:0;
}
form.app dt{
margin:0;
}
form.app dd{
padding:0 0 0 1rem;
border-left:1px #ccc solid;
}
form.app p{
margin-top:1.5rem;
}
form.app input[type=number]{
width:auto;
vertical-align:bottom;
margin:0;
padding:.5rem;
}
form.app select{
margin:0;
padding:.5rem;
}
form.app button[type=submit]{
text-align:center;
cursor:pointer;
padding:0 1rem;
line-height:3rem;
background:rgba(0,0,0,.3);
color:#fff;
border:0;
border-radius:5px;
}
form.app button[type=submit]:hover{
background:rgba(0,0,0,.5);
color:#fff;
}

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