@charset "utf-8";

/*------------------------------------------------------------------------------------------------------------------------
	Universal Style
------------------------------------------------------------------------------------------------------------------------*/
html{
font-size:62.5%;
}
body{
background:#fff;
color:#2c2c2c;
font-family:"メイリオ",Meiryo,"ＭＳ Ｐゴシック","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,sans-serif;
-webkit-text-size-adjust:100%;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, main, menu, nav, section{
display:block;
}
html,body,div,
article, aside, details, figcaption, figure,
footer, header, hgroup, main, menu, nav, section,
h1,h2,h3,h4,h5,h6,
p,dl,dt,dd,ul,ol,li,img,
table,caption,th,td,
form,fieldset,legend,input,textarea,select,
pre,code,blockquote,address{
margin:0;
padding:0;
}
img{
max-width:100%;
height:auto;
border:0;
vertical-align:bottom;
}
ul{
list-style-position:outside;
list-style-type:none;
}
ol{
margin-left:2em;
list-style-position:outside;
}
dl dd{
margin-bottom:7px;
}
em{
font-style:normal;
color:#f00;
}
table{
border:medium none;
border-collapse:collapse;
}
th,td{
font-weight:normal;
vertical-align:top;
}
a:link,
a:visited{color:#1565c0;text-decoration:underline;}
a:hover,
a:active{color:#1565c0;text-decoration:none;}

fieldset{border:0;}
legend{display:none;}
input{vertical-align:middle;}
input[type="text"],
input[type="password"],
input[type="submit"]{
-webkit-appearance:none;
border-radius:0;
}
select{border-radius:0;}
input,
button,
select,
textarea{
font-size:inherit;
font-family:inherit;
}
button{cursor:pointer;}
sup{vertical-align:text-top;line-height:0.6;}
sub{vertical-align:baseline;}
iframe{border:0;}

::before,
::after{display:inherit;}

.font-playfair{font-family:'Playfair Display';}


/*========================================================================================================================
Base Layout
========================================================================================================================*/
#page{
overflow:hidden;
min-width:320px;
}
#shadow01{
display:none;
content:'';
position:fixed;
top:0;
left:0;
z-index:900;
width:100%;
height:100%;
background:rgba(0,0,0,.85);
}


/*------------------------------------------------------------------------------------------------------------------------
Header Area
------------------------------------------------------------------------------------------------------------------------*/
#header{
display:block;
position:relative;
z-index:2;
min-width:320px;
box-shadow:0 0 3px rgba(0,0,0,.3);
background:#fff;
}
#header > .lay{
margin:0 auto;
padding:10px 10px 12px;
max-width:1080px;
}
#header .site-id{
float:left;
margin:0;
font-size:1rem;
}
#header .utility{
float:right;
margin:0 0 10px;
}
#header .utility li{
float:left;
margin:0 0 0 5px;
font-size:1.2rem;
}

/* tel */
#header .utility .tel{margin-top:17px;}
#header .utility .tel::before{
display:inline-block;
content:'';
margin:-2px 5px 0 0;
width:17px;
height:17px;
background:url(/common/images/bg/icon.png) -180px 0 no-repeat;
vertical-align:middle;
}
#header .utility .tel img{
margin:-2px 13px 0 0;
vertical-align:middle;
}
#header .utility .tel a{display:none;}

/* contact */
#header .utility .contact{
margin-top:-10px;
font-size:1.6rem;
font-weight:bold;
}
#header .utility .contact a{
display:block;
padding:17px 20px 14px 15px;
border-radius:0 0 5px 5px;
background:#eb3c70;
color:#fff;
text-decoration:none;
}
#header .utility .contact a::before{
display:inline-block;
content:'';
margin:-2px 9px 0 0;
width:18px;
height:12px;
background:url(/common/images/bg/icon.png) 0 0 no-repeat;
vertical-align:middle;
}
#header .utility .contact a:hover{opacity:.7;}

/* search */
#header .utility .search{display:none;}

/* search */
#header #gnav-menu{display:none;}


/* global-nav
--------------------------------------*/
#global-nav{
position:relative;
z-index:1;
clear:both;
box-shadow:0 0 3px rgba(0,0,0,.4);
background:#eb3c70;
}
#global-nav::before{
content:'';
position:absolute;
bottom:0;
left:0;
z-index:0;
width:100%;
height:4px;
background:#e22550;
}
#global-nav ul{
box-sizing:border-box;
position:relative;
margin:0 auto;
max-width:1080px;
border-left:1px solid #f59eb8;
}
#global-nav ul li{
box-sizing:border-box;
float:left;
margin:0;
width:20%;
border-right:1px solid #f59eb8;
font-size:1.6rem;
font-weight:bold;
text-align:center;
}
#global-nav ul li a{
display:block;
position:relative;
padding:15px 0;
color:#fff;
text-decoration:none;
}
#global-nav ul li a::before{
display:inline-block;
content:'';
margin:-2px 8px 0 0;
background:url(/common/images/bg/icon.png) 0 0 no-repeat;
vertical-align:middle;
}
#global-nav ul li.home a::before{width:20px;height:18px;background-position:-600px -150px;}
#global-nav ul li.search a::before{width:20px;height:20px;background-position:-650px -150px;}
#global-nav ul li.ranking a::before{width:24px;height:18px;background-position:-700px -150px;}
#global-nav ul li.about a::before{width:21px;height:17px;background-position:-750px -150px;}
#global-nav ul li.companion a::before{width:18px;height:15px;background-position:-800px -150px;}
#global-nav ul li a:hover{opacity:.7;}
/*#global-nav ul .current a::after,
#global-nav ul li a:hover::after{
display:block;
content:'';
position:absolute;
bottom:0;
right:10px;
left:10px;
height:4px;
background:#f66d91;
}*/

/* sbs */
#global-nav .sns{display:none;}


/*------------------------------------------------------------------------------------------------------------------------
Contents Area
------------------------------------------------------------------------------------------------------------------------*/
#contents{
padding-bottom:50px;
}

/* contents-footer
--------------------------------------*/
#contents .contents-footer{
margin-right:auto;
margin-left:auto;
padding:0 10px;
max-width:1080px;
}
#contents .contents-footer .smart-share{
display:flex;
justify-content:flex-start;
flex-wrap:wrap;
margin-bottom:45px;
border:5px solid #212121;
background:#fff;
}
#contents .contents-footer .smart-share .hdg{
margin-bottom:15px;
font-size:3rem;
font-family:'Playfair Display';
font-weight:normal;
line-height:1.1;
}

/* smart */
#contents .contents-footer .smart{
box-sizing:border-box;
position:relative;
padding:19px 19px 19px 180px;
width:50%;
min-height:161px;
background:#212121;
color:#fff;
}
#contents .contents-footer .smart::before{
content:'';
position:absolute;
top:19px;
left:19px;
width:123px;
height:123px;
background:url(/common/images/bg/icon.png) -650px 0 no-repeat;
}
#contents .contents-footer .smart .hdg{
position:relative;
padding-left:34px;
}
#contents .contents-footer .smart .hdg::before{
content:'';
position:absolute;
top:4px;
left:0;
width:17px;
height:28px;
background:url(/common/images/bg/icon.png) -600px 0 no-repeat;
}

/* share */
#contents .contents-footer .share{
box-sizing:border-box;
padding:20px 30px 24px 24px;
width:50%;
background:#fff;
}
#contents .contents-footer .share .txt01{
float:left;
margin:0 0 20px;
}
#contents .contents-footer .share .sns{
float:right;
margin:-10px 0 0;
}
#contents .contents-footer .share .sns li{
float:left;
margin:0 0 0 10px;
}
#contents .contents-footer .share .sns .tw a,
#contents .contents-footer .share .sns .line a,
#contents .contents-footer .share .sns .hatena a{
display:block;
overflow:hidden;
position:relative;
width:48px;
height:48px;
border-radius:48px;
background:#212121;
text-indent:100%;
white-space:nowrap;
}
#contents .contents-footer .share .sns .tw a{background:#32a7e0;}
#contents .contents-footer .share .sns .line a{background:#00b900;}
#contents .contents-footer .share .sns .hatena a{background:#2b65a9;}
#contents .contents-footer .share .sns a::before{
content:'';
position:absolute;
top:50%;
left:50%;
margin:-12px 0 0 -12px;
width:25px;
height:25px;
background:url(/common/images/bg/icon.png) no-repeat;
}
#contents .contents-footer .share .sns .tw a::before{background-position:-200px 0;}
#contents .contents-footer .share .sns .line a::before{background-position:-300px 0;}
#contents .contents-footer .share .sns .hatena a::before{background-position:-400px 0;}
#contents .contents-footer .share .sns a:hover{opacity:.7;}

/* list-pick-keyword01 */
#contents .contents-footer .list-pick-keyword01 li{margin-bottom:20px;}
#contents .contents-footer .list-pick-keyword01 li > .hdg{
position:relative;
float:left;
margin:0 10px 20px 0;
padding-left:22px;
width:88px;
font-size:1.8rem;
}
#contents .contents-footer .list-pick-keyword01 li > .hdg::before{
content:'';
position:absolute;
top:6px;
left:0;
width:16px;
height:18px;
background:url(/common/images/bg/icon.png) no-repeat;
}
#contents .contents-footer .list-pick-keyword01 li > .hdg.hot-spring::before{background-position:-100px -40px;}
#contents .contents-footer .list-pick-keyword01 li > .hdg.prefecture::before{left:3px;background-position:-50px -40px;}
#contents .contents-footer .list-pick-keyword01 li > ul{
overflow:hidden;
margin-bottom:20px;
padding-top:2px;
}
#contents .contents-footer .list-pick-keyword01 li > ul li{
float:left;
margin:0 30px 5px 0;
font-size:1.8rem;
}

/* contents-footer-simple
--------------------------------------*/
#contents .contents-footer-simple{
margin-right:auto;
margin-left:auto;
padding:0 10px;
max-width:1080px;
}
#contents .contents-footer-simple > .lay{
overflow:hidden;
padding:30px 0;
border-top:2px solid #2c2c2c;
}
#contents .contents-footer-simple .logo{
float:left;
margin:0 45px 0 0;
}
#contents .contents-footer-simple dl{
overflow:hidden;
margin:0;
}
#contents .contents-footer-simple dt{
margin:0;
font-weight:bold;
}
#contents .contents-footer-simple dd{margin:0;}


/*------------------------------------------------------------------------------------------------------------------------
Footer Area
------------------------------------------------------------------------------------------------------------------------*/
footer{
background:#212121;
color:#fff;
}
footer a:link,
footer a:visited{color:#fff;text-decoration:none;}
footer a:hover,
footer a:active{color:#fff;text-decoration:underline;}

footer > .lay{
position:relative;
margin:0 auto;
padding:90px 10px 45px;
max-width:1080px;
}
footer .utility01{margin:0 0 20px;}
footer .utility01 li{
float:left;
margin:0 40px 5px 0;
font-size:1.4rem;
}
footer .utility02{
float:left;
margin:0;
}
footer .utility02 li{
float:left;
margin:0 35px 5px 0;
font-size:1.2rem;
}
footer .sns{
position:absolute;
top:38px;
right:10px;
margin:0;
}
footer .sns li{
float:left;
margin:0 0 0 30px;
}
footer .sns .securecore{display:none;}
footer .sns .tw a,
footer .sns .line a,
footer .sns .hatena a{
display:block;
overflow:hidden;
width:25px;
height:25px;
text-indent:200%;
white-space:nowrap;
background:url(/common/images/bg/icon.png) no-repeat;
}
footer .sns .tw a{background-position:-200px 0;}
footer .sns .line a{background-position:-300px 0;}
footer .sns .hatena a{background-position:-400px 0;}
footer .sns a:hover{opacity:.7;}
footer .site-id{
position:absolute;
top:19px;
left:10px;
margin:0;
}
#copyright{
float:right;
margin:0 0 5px;
font-size:1.2rem;
}
#copyright img{vertical-align:baseline;}
#pagetop{
position:fixed;
bottom:30px;
right:30px;
}
#pagetop a{
display:block;
overflow:hidden;
height:70px;
width:70px;
background:url(/common/images/bg/pagetop.png) left top no-repeat;
text-indent:100%;
white-space:nowrap;
}
#pagetop a:hover{opacity:.7;}
#foot-contact{display:none;}


/*------------------------------------------------------------------------------------------------------------------------
clearFix
------------------------------------------------------------------------------------------------------------------------*/
#header > .lay::after,
#global-nav ul::after,
footer > .lay::after,
footer .utility01::after,
footer .utility02::after{
display:block;
content:'';
clear:both;
}


/*---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
screen
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/* 1060px以下
------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:1060px){

/*------------------------------------------------------------------------------------------------------------------------
Header Area
------------------------------------------------------------------------------------------------------------------------*/
#header .site-id img{width:230px;}
#header .utility{margin:0;}
#header .utility li{font-size:1rem;}

/* tel */
#header .utility .tel{margin-top:10px;}
#header .utility .tel img{width:140px;}

/* contact */
#header .utility .contact{
margin-top:-10px;
font-size:1.2rem;
}
#header .utility .contact a{
padding:17px 10px 14px 10px;
border-radius:0 0 5px 5px;
background:#eb3c70;
color:#fff;
text-decoration:none;
}
#header .utility .contact a::before{
display:inline-block;
content:'';
margin:-2px 9px 0 0;
width:18px;
height:12px;
background:url(/common/images/bg/icon.png) 0 0 no-repeat;
vertical-align:middle;
}

/* global-nav
--------------------------------------*/
#global-nav ul .home,
#global-nav ul .ranking{width:17%;}
#global-nav ul .search{width:14%;}
#global-nav ul .about{width:24%;}
#global-nav ul .companion{width:28%;}

}

/* 767px以下
------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:767px){

/*========================================================================================================================
Base Layout
========================================================================================================================*/
#page{padding-top:50px;}


/*------------------------------------------------------------------------------------------------------------------------
Header Area
------------------------------------------------------------------------------------------------------------------------*/
#header{
box-sizing:border-box;
position:fixed;
top:0;
left:0;
z-index:100;
width:100%;
box-shadow:0 0 5px rgba(0,0,0,.5);
background:#fff;
}
#header > .lay{
box-sizing:border-box;
padding:11px 10px 0;
height:50px;
}
#header > .lay::after{
display:block;
content:'';
clear:both;
}
#header .site-id{
float:left;
margin:3px 0 0;
font-size:1rem;
}
#header .site-id img{width:170px;}
#header .utility{
float:right;
margin:0;
}
#header .utility li{
float:right;
margin:3px 1px 0 3px;
font-size:1.2rem;
}
#header .utility li a{
display:block;
position:relative;
overflow:hidden;
padding:2px 4px;
height:20px;
width:20px;
text-indent:200%;
white-space:nowrap;
}
#header .utility a::before{
content:'';
position:absolute;
top:50%;
left:50%;
background:url(/common/images/bg/icon.png) 0 0 no-repeat;
background-size:600px auto;
}
#header .utility .tel{margin:5px 1px 0 3px;}
#header .utility .tel span{display:none;}
#header .utility .tel a{display:block;}
#header .utility .search{display:block;}
#header .utility .search a::before{margin:-10px 0 0 -10px;width:20px;height:20px;background-position:-60px 0;}
#header .utility .contact{margin:5px 1px 0 3px;}
#header .utility .contact a{
position:position;
padding:2px 4px;
border-radius:0;
background-color:transparent;
}
#header .utility .contact a::before{margin:-6px 0 0 -8px;width:18px;height:10px;background-position:-30px 0;background-size:600px auto;}
#header .utility .tel::before{display:none;}
#header .utility .tel a::before{margin:-8px 0 0 -8px;width:16px;height:20px;background-position:-90px 0;}
#header .utility #gnav-menu{
display:block;
margin-right:0;
}
#header .utility #gnav-menu a::before{margin:-6px 0 0 -7px;width:15px;height:12px;background-position:-250px 0;background-size:500px auto;}

/* global-nav
--------------------------------------*/
#global-nav{
display:none;
position:fixed;
top:50px;
left:0;
z-index:100;
width:100%;
height:100%;
box-shadow:none;
background:#212121;
}
#global-nav.open{display:block;}
#global-nav.open::before{
content:'';
position:absolute;
top:50px;
left:0;
width:100%;
height:100%;
background:#212121;
}
#global-nav ul{
margin:0;
border:0;
}
#global-nav ul li{
float:none;
margin:0;
width:auto;
border-right:0;
border-bottom:1px solid #414141;
font-size:1.6rem;
font-weight:normal;
text-align:left;
}
#global-nav ul li a{
display:block;
position:relative;
padding:12px 22px 12px 15px;
color:#fff;
text-decoration:none;
}
#global-nav ul li a::before{display:none;}
#global-nav ul .home,
#global-nav ul .ranking,
#global-nav ul .search,
#global-nav ul .about,
#global-nav ul .companion{width:auto;}

/* sns */
#global-nav .sns{
display:block;
position:static;
margin:20px 0 30px;
text-align:center;
letter-spacing:-.4em;
}
#global-nav .sns li{
display:inline-block;
float:none;
margin:0 15px;
border:0;
letter-spacing:normal;
vertical-align:middle;
}
#global-nav .sns .securecore{display:inline-block;}
#global-nav .sns .tw a,
#global-nav .sns .line a,
#global-nav .sns .hatena a{
display:block;
overflow:hidden;
padding:0;
width:21px;
height:20px;
text-indent:200%;
white-space:nowrap;
background:url(/common/images/bg/icon.png) no-repeat;
background-size:500px auto;
}
#global-nav .sns .tw a{background-position:-125px 0;}
#global-nav .sns .line a{background-position:-175px 0;}
#global-nav .sns .hatena a{background-position:-225px 0;}


/*------------------------------------------------------------------------------------------------------------------------
Contents Area
------------------------------------------------------------------------------------------------------------------------*/
#contents{
padding:0 15px 20px;
}

/* contents-footer
--------------------------------------*/
#contents .contents-footer{display:none;}

/* contents-footer-simple
--------------------------------------*/
#contents .contents-footer-simple{padding:0;}
#contents .contents-footer-simple > .lay{
padding:20px 0;
}
#contents .contents-footer-simple .logo{
float:none;
margin:0 0 15px;
}
#contents .contents-footer-simple .logo img{width:225px;}
#contents .contents-footer-simple dl{
overflow:hidden;
margin:0;
}
#contents .contents-footer-simple dt{
margin:0;
font-weight:bold;
}
#contents .contents-footer-simple dd{margin:0;}


/*------------------------------------------------------------------------------------------------------------------------
Footer Area
------------------------------------------------------------------------------------------------------------------------*/
footer{padding-bottom:50px;}
footer > .lay{padding:0;}
footer .utility01{margin:0;}
footer .utility01 li{
float:none;
margin:0;
border-bottom:1px solid #414141;
font-size:1.6rem;
text-align:center;
}
footer .utility01 li a{
display:block;
position:relative;
padding:12px 22px;
}
footer .utility01 li a:after{
content:"";
position:absolute;
right:15px;
top:50%;
margin-top:-5px;
width:7px;
height:7px;
border-top:2px solid #646464;
border-right:2px solid #646464;
transform:rotate(45deg);
}
footer .utility02{
float:none;
margin:0 0 20px;
}
footer .utility02 li{
box-sizing:border-box;
float:left;
margin:0;
width:50%;
border-bottom:1px solid #414141;
font-size:1.4rem;
text-align:center;
}
footer .utility02 li a{
display:block;
padding:12px 0;
}
footer .utility02 li:nth-child(2n){border-left:1px solid #414141;}
footer .utility02 li:nth-child(2n+1){clear:both;}
footer .sns{
position:static;
margin:0 0 30px;
text-align:center;
letter-spacing:-.4em;
}
footer .sns li{
display:inline-block;
float:none;
margin:0 10px;
letter-spacing:normal;
vertical-align:middle;
}
footer .sns .securecore{display:inline-block;}
footer .sns .tw a,
footer .sns .line a,
footer .sns .hatena a{
width:21px;
height:20px;
background-size:500px auto;
}
footer .sns .tw a{background-position:-125px 0;}
footer .sns .line a{background-position:-175px 0;}
footer .sns .hatena a{background-position:-225px 0;}
footer .site-id{
position:static;
margin:0 0 15px;
text-align:center;
}
footer .site-id img{width:276px;}
#copyright{
float:none;
margin:0 0 20px;
font-size:1rem;
text-align:center;
}
#copyright img{
margin-top:-2px;
width:57px;
}
#pagetop{
display:block;
position:static;
clear:both;
font-size:1rem;
font-weight:bold;
text-align:center;
}
#pagetop a{
display:block;
position:relative;
padding:30px 0 15px;
width:auto;
height:auto;
background:#000;
text-indent:0;
}
#pagetop a:after{
content:"";
position:absolute;
top:20px;
left:50%;
margin-left:-5px;
width:7px;
height:7px;
border-top:2px solid #fff;
border-right:2px solid #fff;
transform:rotate(-45deg);
}

#foot-contact{
display:none;
box-sizing:border-box;
position:fixed;
bottom:0;
left:0;
z-index:99;
padding:5px 10px;
width:100%;
height:50px;
background:#e1e1e1;
}
#foot-contact ul{
overflow:hidden;
margin:0;
}
#foot-contact ul li{
box-sizing:border-box;
float:left;
margin:0;
padding-right:5px;
width:50%;
font-size:1.4rem;
text-align:center;
line-height:1.1;
}
#foot-contact ul li:nth-child(2n){
padding:0 0 0 5px;
}
#foot-contact ul li a{
display:table-cell;
width:400px;
height:40px;
vertical-align:middle;
}
#foot-contact ul li.contact a{background:#eb3c70;}
#foot-contact ul li.tel a{background:#04ce0a;}
#foot-contact ul li.tel .num{font-size:1.1rem;}

}