@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}
}

form{
margin:0;
}
form dl{
margin:0;
}
form dt{
margin:1.5rem 0 0 0;
}
form dd{
margin:.5rem 0 0 0;
padding-left:1rem;
border-left:1px #ccc solid;
}
form dl dd input,
form dl dd textarea{
margin:0;
padding:.5rem;
outline:0;
vertical-align:top;
}
form dl dd input{
height:35px;
}
form p{
margin:2rem 0 0 0;
}
form p input{
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 56px;
width:1242px;
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{
background:#eee;
color:#222;
border-top:5px #33ccdd solid;
line-height:1.2;
}
header .wrap{
background:#eee;
}
header .main{
position:relative;
margin-bottom:2rem;
padding:1rem 0 0 0;
height:100px;
}
header .main h1{
display:block;
overflow:hidden;
font-size:2rem;
font-weight:bold;
margin:0;
max-width:100%;
}
header .main a{
display:block;
color:#222;
text-decoration:none;
}
header .main img{
max-width:100%;
height:40px;
}
header .main p{
position:absolute;
bottom:0;
display:block;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
margin:0;
padding:0;
width:100%;
font-size:12px;
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;
border-top:100px solid transparent;
border-left:30px solid transparent;
border-right:30px solid transparent;
position:relative;
color:#fff;
}
header .aside a span{
display:block;
position:absolute;
text-align:center;
width:100%;
}
header .aside a span:first-child{
top:-80px;
font-size:2rem;
}
header .aside a span:last-child{
bottom:10px;
font-size:12px;
}
/*島大用*/
header .aside a img{
height:45px;
margin-top:-10px;
}
header .aside i{
font-size:10px;
display:block;
text-align:center;
}

/*wdecoオフィシャル*/
header .aside i.fa-home{
font-size:3rem;
}

/***************
 INTRO
***************/
#intro{
display:block;
overflow:hidden;
width:100%;
background:#33ccdd;
}
#intro .wrap{
height:0;
padding:0 0 25%;
background-position:center center;
background-repeat:no-repeat;
background-size:cover;
}

/***************
 GLOBAL NAV
***************/
nav{
display:block;
overflow:hidden;
margin:0;
padding:0;
background:#33ccdd;
}
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;
text-align:center;
text-decoration:none;
font-size:1.5rem;
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-weight:normal;
font-size:.9rem;
text-align:center;
}
nav a.current,
nav a:hover,
nav a:focus{
padding:20px 0 0 0;
background:#fff;
color:#33ccdd;
border-top:5px #33ccdd solid;
/*box-shadow:0px 5px 3px -3px #33ccdd inset;*/
}

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

/***************
 FOOTER
***************/
footer{
display:block;
overflow:hidden;
line-height:1.0;
background:#333;
color:#fff;
}
footer a{
text-decoration:none;
color:#fff;
}
footer .aside a{
line-height:1.2;
font-size:.9rem;
}
footer .aside a:hover{
text-decoration:underline;
color:#fff;
}
footer .wrap{
padding:3rem 56px;
}
footer h2{
font-size:1.8rem;
margin:0 0 .5rem 0;
padding:0 0 .5rem 0;
line-height:1.0;
border-bottom:1px #fff dotted;
}
footer ul{
list-style:none;
line-height:1.0;
font-size:.9rem;
margin:.5rem 0 0 0;
padding:0;
}
footer li{
list-style:none;
margin:1rem 0 0 0;
padding:0;
}
footer li span{
display:block;
}
footer li a{
display:block;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
padding:0 0 0 1rem;
text-decoration:none;
border-left:3px #fff solid;
}
footer li a:hover{
text-decoration:none;
color:#33ccdd;
border-left:3px #33ccdd solid;
}
footer li:last-child{
font-size:11px;
text-align:right;
}

/***************
 address
***************/
address{
display:block;
overflow:hidden;
height:50px;
background:#000;
color:#fff;
}
address a:first-child{
display:block;
/*overflow:hidden;*/
white-space:nowrap;
float:left;
line-height:1.0;
font-size:11px;
font-weight:bold;
margin:10px 0;
text-decoration:none;
color:#fff;
}
address a:first-child img{
float:left;
margin:1px 5px 0 0;
height:30px;
}
address a:last-child{
display:block;
overflow:hidden;
text-decoration:none;
font-size:1.5rem;
float:right;
height:50px;
line-height:50px;
color:#666;
}
address a:hover{
color:#30CEDC;
}

/***************
 information
***************/
#information{
display:block;
overflow:hidden;
}

/************************************************************
 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
***************/
.pagepath{
display:block;
overflow:hidden;
margin:2rem 0 0 0;
width:100%;
height:50px;
line-height:50px;
border-top:1px #ccc dotted;
border-bottom:1px #ccc dotted;
}
.pagepath ul{
display:flex;
list-style:none;
margin:0;
padding:0;
font-size:12px;
}
.pagepath li{
list-style:none;
margin:0;
padding:0;
white-space:nowrap;
}
.pagepath li:before{
content:'≫';
margin:0 .5rem;
}
.pagepath li:first-child:before{
content:'';
margin:0;
}
.pagepath li:last-child{
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
.pagepath a{
text-decoration:underline;
color:#666;
}
.pagepath a:hover{
text-decoration:none;
}

/***************
 SNS
***************/
ul.sns{
list-style:none;
display:table;
table-layout:fixed;
margin:2rem 0 0 0;
padding:0;
width:100%;
}
ul.sns li{
list-style:none;
display:table-cell;
margin:0;
padding:0;
border-left:1px rgba(0,0,0,0) solid;
}
ul.sns li:first-child{
border-left:0;
}
ul.sns a{
display:block;
overflow:hidden;
text-align:center;
text-decoration:none;
font-size:1.5rem;
width:100%;
height:50px;
line-height:50px;
color:#fff;
}
ul.sns a:hover{
opacity:0.7;
}
ul.sns a.fa-twitter{
background:#00AAEC;
}
ul.sns a.fa-facebook-f{
background:#3C5A99;
}
ul.sns a.fa-get-pocket{
background:#F23B52;
}
ul.sns a.fa-linkedin-in{
background:#0182A5;
}
ul.sns a.fa-pinterest-p{
background:#ee0023;
}
ul.sns a.fa-line{
background:#1DB43C;
}

/***************
 SEARCH FORM
***************/
form.search{
display:block;
overflow:hidden;
width:100%;
margin:20px 0 0 0;
border:1px #ccc solid;
}
form.search input[type=text]{
float:left;
width:100%;
height:50px;
padding:0 50px 0 10px;
outline:none;
border:0;
}
form.search button,
form.search input[type=submit]{
float:left;
font-size:1.5rem;
width:50px;
height:50px;
margin:0 0 0 -50px;
padding:0;
border:none;
outline:none;
cursor:pointer;
text-align:center;
background:inherit;
color:#ccc;
-webkit-transition:all 0.2s ease-out;
   -moz-transition:all 0.2s ease-out;
    -ms-transition:all 0.2s ease-out;
     -o-transition:all 0.2s ease-out;
        transition:all 0.2s ease-out;
}
form.search:hover button:hover,
form.search input[type=submit]:hover{
background:#ccc;
color:#fff;
}

/***************
 SELECT LINK
***************/
div.selectlink{
display:block;
overflow:hidden;
position:relative;
width:100%;
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:50px;
height:50px;
line-height:50px;
text-align:center;
margin:0;
padding:0;
background:#33ccdd;
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 #ccc solid;
width:100%;
height:50px;
}
div.selectlink:hover:after,
div.selectlink:focus:after{
background:#222;
}

/***************
 Page MENU
***************/
.utility_page ul{
list-style:none;
margin:2rem 0 0 0;
padding:0;
}
.utility_page li{
list-style:none;
margin:1rem 0 0 0;
padding:0;
}
.utility_page a{
display:block;
overflow:hidden;
text-decoration:none;
line-height:1.2;
padding:1em 0;
color:#333;
border-top:1px #333 dotted;
border-bottom:1px #333 dotted;
}
.utility_page a:after{
content:"\f061";
font-family:'Font Awesome 5 Free';
font-weight:900;
float:right;
}
.utility_page a:hover{
font-weight:bold;
}

/***************
 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 #33ccdd;
}
.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 #33ccdd solid;
}
ul.paging li{
list-style:none;
margin:1px 0 0 1px;
padding:0;
width:calc(100% / 10 - 1px);
}
ul.paging a{
display:block;
overflow:hidden;
text-align:center;
text-decoration:none;
width:100%;
height:50px;
line-height:50px;
background:#33ccdd;
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
************************************************************/
.archive,
.archivePickup{
display:block;
overflow:hidden;
margin:1rem 0 0 -10px;
padding:0;
line-height:1.4;
}
.archive a,
.archive span,
.archivePickup a,
.archivePickup span{
display:block;
overflow:hidden;
}
.archive a,
.archivePickup a{
text-decoration:none;
float:left;
margin:1rem 0 0 10px;
width:calc(100% / 3 - 10px);
}
.archivePickup a{
width:calc(100% / 4 - 10px);
}
.archive a:hover,
.archivePickup a:hover{
font-weight:bold;
}
.archive .eyecatch,
.archivePickup .eyecatch{
width:100%;
position:relative;
height:0;
padding:0 0 56.25%;
overflow:hidden;
}
.archive .eyecatch .img,
.archivePickup .eyecatch .img{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background-position:center center;
background-repeat:no-repeat;
background-size:cover;
-webkit-transition:all 0.2s ease-out;
   -moz-transition:all 0.2s ease-out;
    -ms-transition:all 0.2s ease-out;
     -o-transition:all 0.2s ease-out;
        transition:all 0.2s ease-out;
}
.archive a:hover .eyecatch .img,
.archivePickup a:hover .eyecatch .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);
}
.archive .date,
.archivePickup .date{
font-size:.8em;
font-weight:normal;
text-align:center;
line-height:1.2;
margin:0;
padding:.5rem;
position:absolute;
bottom:0;
width:100%;
height:30px;
background:rgba(0,0,0,0.5);
color:#fff;
}
.archive i,
.archivePickup i{
font-size:.8em;
font-style:normal;
margin:0 0 0 5px;
padding:0 3px 1px 3px;
line-height:1.0;
border-radius:3px;
background:#ff0000;
color:#fff;
}
.archive .title,
.archivePickup .title{
margin:.5em 0 0 0;
height:4.2em;
}

/***********************/
table.sammary{
display:block;
overflow:hidden;
margin:2rem 0 0 0;
padding:1rem 0 0 0;
width:100%;
font-size:.8rem;
background:-moz-linear-gradient(top, rgba(0,0,0,0.1), rgba(0,0,0,0));
background:-webkit-linear-gradient(top, rgba(0,0,0,0.1), rgba(0,0,0,0));
background:linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0));
color:#222;
}
table.sammary th,
table.sammary td{
font-weight:normal;
line-height:1;
border:0;
margin:0;
padding:0 0 .5rem .5rem;
vertical-align:top;
background:none;
}
table.sammary th{
text-align:right;
white-space:nowrap;
}
table.sammary a{
text-decoration:underline;
color:#222;
}
table.sammary a:hover{
text-decoration:none;
}

/************************************************************
QR
************************************************************/
#qrcode{
text-align:center;
margin:2rem 0 0 0;
padding:1rem 0 0 0;
border-top:1px #ccc solid;
}
#qrcode + div{
text-align:center;
font-size:.9rem;
}
@media all and (max-width:828px){
	#qrcode,
	#qrcode + div{
		display:none;
	}
}

/************************************************************
 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;
}

/************************************************************
広告
************************************************************/
.ad{
display:block;
overflow:hidden;
line-height:1.0;
text-align:center;
margin:2rem auto 0 auto;
padding:0;
}
/************************************************************
END
************************************************************/