/*
Theme Name: andCoffee
Description: andCoffeeのテーマ
Author URI: http://one-daytrip.com
Template: andcoffee
Version:1
*/

/* favorite */

.wpfp-hide { display: none; }
.wpfp-img { border: 0; vertical-align: middle; margin-right: 2px; }

/* MW MAP */

img.side-banner{
    width: 100%;
    heihgt:auto;
    display: block;
}

.mw-google-maps-map {
    height: 500px;
    width: 100%;
    margin:auto auto 30px
}
.mw-google-maps-map img {
    max-width: none;
}

.outline{
  display:block;
  margin:auto auto 30px;
}

.outline li{
  display:block;
  margin:0 0 10px 0;
}

.outline li a{
  color: #f74739;
  text-decoration: none;
}

.b-map{
    width: 100%;
    height: 500px;
    margin: auto auto 30px;
}

.fb_iframe_widget{
    display: block !important;
    margin: auto;
}

.fb_iframe_widget span{
    display: block !important;
    margin: auto;
}

blockquote p{
    margin: 0 !important;
}

html,
button,
input,
select,
textarea {
    color: #222;
}

html {
    font-size: 14px;
    line-height: 1.4;
    margin: 0;
    background-color: #f5f5f5;
}

body{
    font-family:'Quicksand', Verdana,"游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
    margin: 0;
    padding: 0;
}

a,.archive .title a h2,.archive .main-contents-txt a p{
    -webkit-transition: all 0.4s ease-in-out;
	-moz-transition: all 0.4s ease-in-out;
	-o-transition: all 0.4s ease-in-out;
	-ms-transition: all 0.4s ease-in-out;
	transition: all 0.4s ease-in-out;
}

a:hover{
	filter: alpha(opacity=60);
	-moz-opacity:0.60;
	opacity:0.60;
}/* 画像のロールオーバー時の設定　必要な場合のみ */

ul,li,ol{
    list-style: none;
    margin: 0;
    padding: 0;
}

blockquote{
    background-color: #efefef;
    margin: 20px auto;
    width: 90%;
    padding: 25px 5% 25px;
}

.post blockquote p{
    margin: 0;
    font-style: italic;
    color: #555;
}

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

audio,
canvas,
img,
video {
    vertical-align: middle;
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

textarea {
    resize: vertical;
}

.browsehappy {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

ul,ol,li{
    list-style: none;
    margin: 0;
    padding: 0;
}

#top{
    position: absolute;
    top: 0;
}

.fl{
    float: left;
}

.fr{
    float: right;
}

/*	clearfix
================================================== */

.cf:before, .cf:after { content: " ";display: table; }
.cf:after { clear: both; }
.cf { *zoom: 1; }


/* ==========================================================================
   Media Queries
   ========================================================================== */

@media only screen and (min-width: 35em) {

}

@media print,
       (-o-min-device-pixel-ratio: 5/4),
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 120dpi) {

}

.category{
    font-size: 13px;
    letter-spacing: 0.05em;
    color: #f74739;
}

#wrapper{
    margin: 0;
    padding: 0;
    width: 100%;
}

#googlemap{
    width: 300px;
    height: 250px;
    display: block;
}

#breadcrumbs{
    width: 1020px;
    margin: 15px auto;
    display: block;
    font-size: 11px;
}

#breadcrumbs a{
    color: #f74739;
    text-decoration: none;
}

/*#breadcrumbs ul li{
    display: inline-block;
    float: left;
    margin-right: 5px;
}

#breadcrumbs ul li a{
    color: #f74739;
    text-decoration: none;
    font-size: 11px;
}*/

/* ==========================================================================
   HEADER
   ========================================================================== */

.head-inner{
    width: 960px;
    margin: auto;
}

.head-inner .logo{
    display: block;
}

.head-inner h1,.head-inner .logo{
    text-align: center;
    margin: 50px auto;
    width: 400px;
    height: auto;
}

.head-inner h1 img,.head-inner .logo img{
    max-width :100%;
    height: auto;
}

.head-inner nav ul{
    text-align: center;
    margin: 0 0 30px;
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 0.07em;
}

.head-inner nav ul li{
    display: inline-block;
    padding: 0 15px;
}

.head-inner nav ul li a{
    text-decoration: none;
    color: #111;
}

.pageBar{
    background: #333;
    height:26px;
    width:100%;
    display: block;
    padding:4px 20px 4px 20px;
    box-sizing: border-box;
    position: relative;
    text-align: center;
}

.page-h{
    color: #fff;
    font-size:12px;
    margin:0;
    text-align: center;
}

.pageBar .head-prev{
    position: absolute;
    left:20px;
    top:5px;
    color: #fff;
    font-size:12px;
}

.pageBar .head-next{
    position: absolute;
    right:20px;
    top:5px;
    color: #fff;
    font-size:12px;
}

/* ==========================================================================
   SIDE
   ========================================================================== */

#side{
    width: 300px;
    overflow: hidden;
    display: block;
    float: right;
}

.side-contents{
    margin: 0 0 20px;
    display: block;
}

input.search{
    width: 278px;
    background-color: #111;
    border: 1px solid #fff;
    padding: 12px 10px;
    color: #fff;
    font-size: 13px;
}

h3.side-title{
    font-size: 1.3em;
    letter-spacing: 0.1em;
    margin: 20px 0 10px;
}

.side-contents ul{
    border-top: 1px dotted #ddd;
    width: 300px;
}
    
.side-contents ul li{
    padding: 15px 0;
    border-bottom: 1px dotted #ddd;
}


.side-contents ul li .thumb{
    width: 70px;
    height: 70px;
    display:block;
    overflow: hidden;
    float: left;
    margin: 0 15px 0 0;
    position: relative;
}

.side-contents ul li .thumb img{
    max-height: 100%;
    width: auto;
    display: block;
    margin: auto;
    position: absolute;
    right: 0;
    left: 0;
    top: 0;
    bottom: 0;
}

.side-contents ul li a{
    text-decoration: none;
}

.side-contents ul li a h3{
    margin:0 0 0 85px;
    font-size: 1em;
    color: #111;
    line-height: 1.2em;
}

.side-contents ul li a .category{
    margin:0 0 5px 85px;
    font-size: 11px;
    display: block;
}

.side-contents.shopinfo h2{
    font-size: 14px;
    line-height: 1.4em;
    margin: 0 0 5px;
}

.side-contents ul.shopinfo-list li{
    padding: 10px 0;
    font-size: 12px;
}

.side-contents ul.shopinfo-list li.url a{
    color: #f74739;
}

.vide-thumb img{
    max-width: 100%;
    height: auto;
}

.fixBox {
   position: fixed;
   top: 30px;
}

.tagcloud{font-size:11px !important;}
.tagcloud a{color:#fff;text-decoration:none;padding:5px 12px;border:1px solid #333;width:inherit;float:left;margin:0 5px 5px 0;font-size:11px !important;background-color: #333;letter-spacing: 0.05em;}
.tagcloud a:hover{-webkit-transition:all .3s;transition:all .3s;background-color:#f74739;color:#fff;border: 1px solid #f74739;opacity:1;-moz-opacity:1;
-ms-filter: "alpha(opacity=100)";}
.tagcloud a:active{background-color:#f74739;color:#fff;border: 1px solid #f74739;}

.foot-top .tagcloud{text-align: center;}
.foot-top .tagcloud a{float: none;display: inline-block;border: 1px solid #fff;background-color: #111;}
.foot-top .tagcloud a:hover{background-color: #f74739;border: 1px solid #f74739}
.foot-top h3{margin: 20px auto 20px;text-align: center;letter-spacing: 0.1em;font-size: 120%;}

/* ==========================================================================
   FOOTER
   ========================================================================== */

#footer{
    width: 100%;
    /*height: 150px;*/
    margin: 70px 0 0 0;
    min-width: 1020px;
}

.foot-top{
    background-color: #111;
    width: 100%;
    height: auto;
    padding: 20px 0 40px 0;
    min-width: 1020px;
}

.foot-top{
    color: #fff;
}

.foot-bottom{
    background: #f5f5f5;
    width: 100%;
    height: auto;
    padding: 20px 0 20px 0;
    min-width: 1020px;
}

.foot-inner{
    width: 1000px;
    margin: auto;
    display: block;
}

.c-4{
    width: 33.3%;
    display: block;
    overflow: hidden;
}

.foot-bottom .foot-inner a{
    color: #111;
    text-decoration: none;
}

#back-top{
    position: fixed;
    bottom: 50px;
    right: 50px;
}

/* ==========================================================================
   SNS
   ========================================================================== */

.post-share{
    width:100%;
    display: block;
    padding: 0 0 20px 0;
    margin: auto;
    font-weight: bolder;
}

.post-share span{
    padding: 13px 20px 13px 0;
}

ul.share_btn {
    margin: 5px auto 15px auto;
}

.share_btn li {
    width: 32.5%;
    margin: 0 1% 0 0;
    list-style: none !important;
    display: inline-block;
    float: left;
}
.share_btn li.last{
    margin: 0;
}


.share_btn a {
display: block;
color: #fff;
text-decoration: none;
letter-spacing:0.1em;
text-align: center;
height: 40px;
line-height: 40px;
padding: 0;
font-size: 11px;
-webkit-transition-duration: 500ms;
-moz-transition-duration: 500ms;
-o-transition-duration: 500ms;
transition-duration: 500ms;
-webkit-transition-timing-function: ease;
-moz-transition-timing-function: ease;
-o-transition-timing-function: ease;
transition-timing-function: ease;
-webkit-transition-property: all;
-moz-transition-property: all;
-o-transition-property: all;
transition-property: all;
}
 
.share_btn a:hover {
color: #fff;
position: relative;
opacity:0.8;
-moz-opacity:0.8;
-ms-filter: "alpha(opacity=80)";
}
 
span.social_icon {
    margin-right: 3px;
    font-size: 80%;
}
 
.share_btn li:last-child {
margin-right: 0;
}
 
.share_btn:after {
content: ".";
display: block;
clear: both;
height: 0;
visibility: hidden;
}
 

a.facebook_btn {
background: #3B5998;
}
 
.facebook_btn:hover {
background: #5979be;
}
 
a.twitter_btn {
background: #33CCFF;
}
 
.twitter_btn:hover {
background: #88e1ff;
}
 
a.hatebu_btn {
    background: #aaa;
}
 
.hatebu_btn:hover {
    background: #d4d4d4;
}
 
span.hatebu_icon {
    font-family: Verdana;
    margin-right: -10px;
    font-size: 100%;
    text-align: center;
}
 
a.hatebu_btn span {
    text-align: center;
    margin: auto;
    padding: 0;
}
 
ul.share_btn_bottom {
    margin: 20px 0 30px 0;
}

/* ==========================================================================
   PAGER
   ========================================================================== */

.pager{
	display: block;
	text-align: center;
	margin: 20px auto -20px;
	width: 100%;
	overflow: hidden;
}

div.pagenation {
	clear:both;
	padding:0 0 20px;
	position:relative;
	line-height:13px ;
	background:none;
	margin:10px auto 20px;
	vertical-align: middle;
	text-align:center;
	display:inline-block;
	overflow:hidden;
}

div.pagenation span, .pagenation a {
	display:block;
	float:left ;
	margin: 2px 2px 2px 0 ;
	padding:9px 12px 8px 12px ;
	text-decoration:none;
	width:auto ;
	color:#111 ;
	background: #fff;
	border:2px solid #111;
	font-size:12px;
    font-weight: bolder;
}

div.pagenation a:hover{
	color:#fff;
	background: #111;
	border:2px solid #111;
    filter: alpha(opacity=100);
	-moz-opacity:1;
	opacity:1
}

div.pagenation .current{
	padding:9px 12px 8px 12px ;
	background: #111;
	color:#fff ;
	border:2px solid #111;
}

/* ==========================================================================
   Helper classes
   ========================================================================== */

#contents{
    width: 1020px;
    margin: auto;
    position: relative;
}

.page-body{
    position: relative;
    width: 1020px;
    margin: auto;
}

#contents .page-list ul li{
    width: 300px;
    float: left;
    padding: 15px;
    background-color: #fff;
    margin: 0 15px 15px 0;
    height: 395px;
    position: relative;
}

#contents .page-list ul li:hover{
    background: url(img/line-hover.png) no-repeat;
    background-color: #fff;
}

#contents .page-list ul li.first{
    background-color: transparent;
    background: url(img/list-line.png) no-repeat;
    width: 298px;
}

#contents .page-list ul li.first:hover{
    background: url(img/line-hover.png) no-repeat;
}


#contents .page-list ul li.last{
    margin: 0 0 20px 0;
}

#contents .page-list ul li .img{
    width: 100%;
    height: 200px;
    display: block;
    overflow: hidden;
    margin: 0 auto 13px;
}

#contents .page-list ul li img{
    max-width: 100%;
    height: auto;
}

#contents .page-list ul li .txt a{
    text-decoration: none;
    display: block;
}

#contents .page-list ul li .txt h2{
    color: #111;
    margin: 8px 0;
}

#contents .page-list ul li .txt p{
    font-size: 13px;
    line-height: 1.6em;
    color: #222;
    height: 70px;
    margin: 0;
}

.more{
    width: 90%;
    position: absolute;
    bottom: 15px;
}

.more a{
    color: #111;
    font-weight: bolder;
    letter-spacing: -0.02em;
    font-size: 16px;
    border-bottom: 2px solid #222;
    padding: 0 0 5px 0;
    text-decoration: none;
    width: 100%;
    display: block;
    text-align: right;
}

.more a:hover{
    color: #f74739;
    border-bottom: #f74739 solid 2px;
    filter: alpha(opacity=100);
	-moz-opacity:1;
	opacity:1;
}

#contents .page-list ul li.first a{
    color: #111;
    text-decoration: none;
}

#contents .page-list ul li.first .more span{
    color: #111;
    font-weight: bolder;
    letter-spacing: -0.05em;
    font-size: 16px;
    border-bottom: 2px solid #222;
    padding: 0 0 5px 0;
    text-decoration: none;
    width: 100%;
    display: block;
    text-align: right;
}

.main-contents{
    width: 690px;
    display: block;
    position: relative;
    margin: 15px 30px 50px 0;
    float: left;
}

.main-contents-inner{
    background-color: #FFF;
    width: 660px;
    padding: 15px 15px 25px 15px;
    margin: 0 0 15px;
    display: block;
}

.main-contents-inner.normal{
    margin: -15px 0 15px;
}

.main-contents .visual{
    position: relative;
    margin:-30px auto -15px; 
}

.main-contents img{
    max-width: 100%;
    height: auto;
    margin: 0 auto 20px;
}

.main-contents .title{
    margin: 25px 0;
}

.main-contents .title h1{
    font-weight: bold;
    border-left: 2px solid #111;
    padding:0 0 0 12px;
    line-height: 1.3em;
}

.main-contents .title.mt15{
    margin: 15px 0 30px !important;
}

.main-contents .desc{
    margin: 20px 0;
}

.main-contents .main-contents-txt p,.main-contents .desc p{
    line-height: 1.9em;
    font-size: 14px;
    margin: 0 0 20px;
}

.main-contents .desc p{
    color: #555;
}

.main-contents-tag{
    padding: 25px 0 15px 0;
    border-top: 1px solid #eee;
    font-size: 12px;
    margin: 45px 0 0 0;
}

.main-contents-tag a,li.tag a{
    background-color: #333;
    padding: 3px 6px 3px 6px;
    color: #fff;
    text-decoration: none;
    margin: 0 5px 5px 0;
    letter-spacing: 0.05em;
    display: inline-block;
}

.main-contents-tag a:hover,li.tag a:hover{
    background-color: #f74739;
    filter: alpha(opacity=100);
	-moz-opacity:1;
	opacity:1;
}

.ad{
    width: 620px;
    height: 250px;
    margin: auto;
    display: block;
    padding: 20px 0;
}

.ad ul li{
    float: left;
    display: block;
    margin:0 20px 0 0;
    width: 300px;
    height: 250px;
}

.ad ul li img{
    height:250px !important;
}

.ad ul li.last{
    margin: 0;
}

.main-contents-nav{
    display: block;
    padding: 10px 0;
    position: relative;
}

.prev{
    width: 300px;
    display: block;
    height: 40px;
    float: left;
}

.next{
    width: 300px;
    display: block;
    height: 40px;
    float: right;
}

.backtolist{
    padding: 0 10px;
    width: 40px;
    height: 40px;
    position: absolute;
    right: 0;
    left: 0;
    margin: auto;
}

.backtolist{
    text-indent: -9999px;
}

.backtolist a{
    display: block;
    width: 40px;
    height: 40px;
    background: url(img/btn-backtolist.png) no-repeat center center;
}

.prev a,.next a{
    color: #111;
    text-decoration: none;
}

.prev a{
    background: url(img/btn-prev.png) no-repeat left top;
    width: 300px;
    height: 40px;
    display: block;
}

.next a{
    background: url(img/btn-next.png) no-repeat right top;
    width: 300px;
    height: 40px;
    display: block;
}

.prev span{
    width: 250px;
    padding: 0 0 0 50px;
    font-size: 13px;
    display: block;
}

.next span{
    width: 250px;
    padding: 0 50px 0 0;
    font-size: 13px;
    text-align: right;
    display: block;
}

.page-nav{
    padding: 30px 0 0 0;
}

.page-nav h3.nav-ttl{
    text-align: center;
    font-size: 1.5em;
    letter-spacing: 0.1em;
    margin: 20px 0 15px;
}

.page-nav-list{
    display: block;
    overflow: hidden;
}

.page-nav-list ul{
    display: block;
}

.page-nav-list ul li{
    width: 240px;
    display: block;
    height: 300px;
    float: left;
    margin: 0 20px 0 0;
}

.page-nav-list ul li.last{
    margin: 0;
}

.page-nav-list ul li .thumb{
    width: 100%;
    height: 160px;
    overflow:hidden;
    margin: 0 0 12px;
}

.page-nav-list ul li .thumb img{
    max-width: 100%;
    height: auto;
}

.page-nav-list ul li a{
    text-decoration: none;
    display: block;
}

.page-nav-list ul li a h3{
    color: #111;
    margin: 3px 0;
    font-size: 1.1em;
    letter-spacing: 0.05em;
}

.page-nav-list ul li a .category{
    font-size: 12px;
    letter-spacing: 0.05em;
    color: #f74739;
}

.main-contents-txt .more{
    width: 40% !important;
    position: relative !important;
    float: right;
    margin: 0 0 10px;
}

.archive-title{
    width: 660px;
    padding: 0 15px 0 15px;
    margin: 0 0 40px;
    display: block;
}

.archive-title h1{
    margin: -15px 0 15px;
    letter-spacing: 0.05em;
    line-height: 1em;
}

.archive-title p{
    font-size: 13px;
    color: #555;
    margin: 0 0 10px;
}

.archive-title p.results{
    text-align: right;
    font-size: 12px;
    color: #555;
}

.archive .title{
    margin: 15px 0 15px;
}

.archive .title h2{
    margin: 10px 0 5px;
    font-size: 1.4em;
}

.title .category{
    font-size: 12px;
    margin: 0 0 5px;
    display: block;
}

.archive .visual a,.archive .title a,.archive .main-contents-txt a{
    text-decoration: none;
}

.archive .title a{
    color: #111;
}

.archive .main-contents-txt a p{
    color: #333;
    line-height: 1.65em;
    font-size: 13px;
}

.main-contents-txt p a{
    color: #f74739;
    text-decoration: none;
}

.main-contents-txt h2{
    background: url(img/line-h2.png) no-repeat left bottom;
    padding: 0 0 5px;
    font-weight:bolder;
}    

.archive .title a:hover h2,.archive .main-contents-txt a:hover p{
    filter: alpha(opacity=60);
	-moz-opacity:0.60;
	opacity:0.60;
}/* 画像のロールオーバー時の設定　必要な場合のみ */


.category-list ul{
    margin: 0;
}

.category-list ul li{
    padding: 20px 0;
    position: relative;
    border-bottom: 1px solid #f5f5f5;
}

.category-list ul li a{
    text-decoration: none;
    color: #111;
    display: block;
}

.category-list ul li .thumb{
    width: 240px;
    height: 160px;
    display: block;
    overflow: hidden;
    float: left;
    margin: 0 20px 0 0;
}

.category-list ul li .desc{
    margin: 0 0 0 260px;
}

.category-list ul li .desc .category{
    font-size: 11px;
    margin: 0 0 5px;
    display: block;
}

.category-list ul li .desc h2{
    margin: 0 0 10px;
    font-size: 17px;
    color: #111;
}

.category-list ul li .desc p{
    font-size: 13px;
    margin: 0;
    line-height: 1.65em;
    color: #333;
}

.feature-list{
    /*width: 100%;*/
    display: block;
    width: 1040px;
    margin: auto auto 20px;
}

.feature-list ul{
    width: 1040px;
    margin: auto;
    text-align: center;
}

.feature-list ul li{
    width: 330px;
    display: inline-block;
    overflow: hidden;
    position: relative;
    margin: 0 5px;
}

.feature-list ul li .thumb{
    width: 100%;
    height:auto;
    padding-top: 66.6%;
    overflow: hidden;
    position: relative;
}

.feature-list ul li .thumb img{
    max-width: 100%;
    height: auto;
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}

.feature-list ul li a{
    text-decoration: none;
}

.feature-list ul li a .thumb img,.feature-list ul li a .desc h2{
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}

.feature-list ul li a:hover .thumb img{
    -webkit-transform: scale(1.2);  
    -moz-transform: scale(1.2);  
}


.feature-list ul li .desc{
    width: 90%;
    display: block;
    position: absolute;
    top: 120px;
    color: #fff;
    padding: 0 5% 0 5%;
}

.feature-list ul li .desc h2{
    font-size: 14px;
}

.index-tag{
    text-align: center;
    display: block;
    margin: 30px auto 30px;
    width: 900px;
}

.index-tag .tagcloud{text-align: center;}
.index-tag .tagcloud a{float: none;display: inline-block;border: 1px solid #fff;background-color: #111;}
.index-tag .tagcloud a:hover{background-color: #f74739;border: 1px solid #f74739}
.index-tag h3{margin: 20px auto 20px;text-align: center;letter-spacing: 0.1em;font-size: 120%;}

/* ==========================================================================
   VIDEO
   ========================================================================== */

.main-contents.video{
    margin: 0 30px 0 0;
}

.video-container,.photo-container{
    display: block;
    margin: 0 0 30px;
}

.main-contents.video .title{
    margin: 0 0 25px !important;
}

.photo-container img{
    max-width: 100%;
    height: auto;
    margin: auto;
}


.wpfp-span{
    width: 200px;
    padding: 5px;
    text-decoration: none;
    border: 2px solid #333;
    border-radius:4px;
    color: #333;
    text-align: center;
    margin: 0 0 10px;
    display: block;
}

.wpfp-span a{
    display: block;
    text-decoration: none;
    color: #333;
}

ul.bookmarklist li{
    float: left;
    width: 300px;
    display: block;
    padding:15px;
    overflow: hidden;
    height: 350px;
}

ul.bookmarklist li a{
    color: #222;
    text-decoration: none;
}

ul.bookmarklist li .thumb{
    width: 300px;
    height: 200px;
    margin-bottom: 15px;
}