/* ===================================================================
CSS information
 file name  :  style.css
 style info :  標準デザイン
=================================================================== */

@font-face {font-family: 'FontAwesome';
    src: url('./css/font/fontawesome-webfont.eot'); /* IE9 Compat Modes */
    src: url('./css/font/fontawesome-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('./css/font/fontawesome-webfont.woff') format('woff'), /* Modern Browsers */
         url('./css/font/fontawesome-webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
         url('./css/font/fontawesome-webfont.svg') format('svg'); /* Legacy iOS */
}

body{ background:#fffdf9; font-family: 'Quicksand', "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", 'メイリオ' , Meiryo , Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; line-height:1.6em; font-size:13px; color:#474747;}

#wrapper{}
#wrapper>main {width: 980px; margin:0 auto; /*padding-top:75px*/padding-top: 20px;}

a:link {color:#797979; text-decoration: none;}
a:visited {color:#797979; text-decoration: none;}
a:hover {color:#797979; }

/*-----------------------------------
common
-----------------------------------*/


/* banner */
#pr {text-align:center; margin:20px 0px;}
.pr-top img {width:83%;}
.pr a {color:#0096e7; text-decoration:underline;}


/* header */

#head {background:#88d8c9;}
#head>div {position: relative; width:980px; margin:0 auto;}
#head>div img {width:100%;}
#head div h1 {float:left; width:90px; }
#head div h1 a {display: block;}
#head div h2 {color:#474747; display: block; float:left; margin: 20px 15px;letter-spacing: 0.01em; color:#fff;}
#head div form {}
#head div form input {margin-top: 25px; position:absolute; top:0; right:0; width: 207px; height:29px; border-radius:3px; border:none; padding-left: 15px; line-height: 13px; font-family: FontAwesome; }
#head div form input[type="text"]{ z-index:1; margin-top: 25px;}
#head div form label{ display:none; }

/* nav */

#nav {float:left; font-weight: bold; margin:15px 20px 25px 0px;}
#nav .nav_wrapper { position:relative; width:106px;}
/*#nav .nav_wrapper ul{ position:fixed; }:*/
#nav ul li {padding:8px 0px 8px 25px; word-wrap : break-word;}
#nav ul li a {position: relative; display: block; line-height:1.8em;}
#nav ul li a:hover{text-decoration:underline;}
#nav ul li.top a:after {position: absolute;  display: block; content:""; background:url(./img/home.png) no-repeat; width:20px; height:20px; top:0; left:-25px;}
#nav ul li.cute a:after {position: absolute;  display: block; content:""; background:url(./img/cute.png) no-repeat; width:20px; height:20px; top:0; left:-25px;}
#nav ul li.culture a:after {position: absolute;  display: block; content:""; background:url(./img/culture.png) no-repeat; width:20px; height:20px; top:0; left:-25px;}
#nav ul li.world a:after {position: absolute;  display: block; content:""; background:url(./img/world.png) no-repeat; width:20px; height:20px; top:0; left:-25px;}
#nav ul li.cry a:after {position: absolute;  display: block; content:""; background:url(./img/cry.png) no-repeat; width:20px; height:20px; top:0; left:-25px;}
#nav ul li.smile a:after {position: absolute;  display: block; content:""; background:url(./img/smile.png) no-repeat; width:20px; height:20px; top:0; left:-25px;}
#nav ul li.comfort a:after {position: absolute;  display: block; content:""; background:url(./img/comfort.png) no-repeat; width:20px; height:20px; top:0; left:-25px;}
#nav ul li.work a:after {position: absolute;  display: block; content:""; background:url(./img/work.png) no-repeat; width:20px; height:20px; top:0; left:-25px;}
#nav ul li.love a:after {position: absolute;  display: block; content:""; background:url(./img/love.png) no-repeat; width:20px; height:20px; top:0; left:-25px;}
#nav ul li.know a:after {position: absolute;  display: block; content:""; background:url(./img/know.png) no-repeat; width:20px; height:20px; top:0; left:-25px;}
#nav ul li.supiritual a:after {position: absolute;  display: block; content:""; background:url(./img/supiritual.png) no-repeat; width:20px; height:20px; top:0; left:-25px;}
#nav ul li.fashion a:after {position: absolute;  display: block; content:""; background:url(./img/fashion.png) no-repeat; width:20px; height:20px; top:0; left:-25px;}
#nav ul li.beauty a:after {position: absolute;  display: block; content:""; background:url(./img/beauty.png) no-repeat; width:20px; height:20px; top:13px; left:-25px;}

#nav .info {margin-top: 30px; text-align: center; padding: 5px 8px 5px 8px; border: 1px solid #797985;}
#nav .info a:hover{text-decoration:underline;}

/* contents */

#contents{float:left; width: 569px; border-left: 1px solid #E5E5E5;  border-right: 1px solid #E5E5E5;}
#contents_main { padding-bottom:1px; margin: 0px 13px;}
#contents_main div p a img{ max-width:542px; }
.index_main article {border-bottom:1px solid #E5E5E5;}
.index_main article:first-child{border-top:none; padding-top:0;}
.index_main article>a { 
	display: block;
	height: 146px;
	padding:25px 15px;
	background-color:none;
	-webkit-transition-property: background-color;
	-webkit-transition-duration: 0.1s;
	-webkit-transition-timing-function: linear;
}
.index_main article a:hover {background:#F7F7F7; color:#02aae9;}
.index_main article a:hover h2{color:#02aae9;}
.index_main article a figure { max-width:208px; width:100%; float:left; height:148px; overflow-y:hidden;}
.index_main article a figure img{ width:100%; }
.index_main article a>div{ margin-left:223px; }
.index_main article a>div h2{ font-size:18px; font-weight:bold; color:#474747; margin-bottom:5px; }
.index_main article a>div>.category_tag { font-size:10px; color:#fff;}
.index_main article a>div>.category_tag p{ padding: 0 5px;background:#989898; text-align: center; display:inline-block; margin:0 5px 5px 0; height:20px; line-height:20px; }
.index_main article a:hover>div .category_tag{text-decoration:none;}
iframe{ width:100%; }
.next { margin:0 auto; width:240px;margin-top:25px;}
.next li { float:left; text-align: center; margin:0px 5px;}
.next li.arrow { font-family: FontAwesome ; color:#472d21; font-size: 14px;}
.next li a { border:1px solid #472d21; display:block; width: 28px; height:28px; line-height:28px;}
.next li a:hover { background:#472d21; color:#fff; text-decoration: none;}
.next li a img { padding-bottom:8px;}

.wp-pagenavi { margin:15px 0; text-align:right;}
span.extend { display:none !important; }

/* sidebar */

#sidebar {float:left; margin:15px 0 0 19px; width:264px;}

#sidebar h2 {font-size: 16px; font-weight: bold; border-bottom: 1px solid #E5E5E5; padding-bottom:5px; margin-bottom: 10px;}
#sidebar h2 span {margin: 0px 13px 5px 13px; display:inline;}
#sidebar ul li{margin:15px 0;}
#sidebar article{ display:block;  position:relative; height:60px; margin:10px 0;}
#sidebar article figure{ width:60px; float:left; }
#sidebar article figure img{ width:100%; }
#sidebar article>div{ margin-left:70px;}
#sidebar article:after , .wpp-list>li:after{display: block; content:""; width:35px; height:35px; position:absolute; top:-10px; left:-10px;}
#sidebar article.rank1:after , .wpp-list>li.rank1:after{ background:url(./img/rank1.png) no-repeat; }
#sidebar article.rank2:after , .wpp-list>li.rank2:after{ background:url(./img/rank2.png) no-repeat;}
#sidebar article.rank3:after , .wpp-list>li.rank3:after{ background:url(./img/rank3.png) no-repeat;}
#sidebar article.rank4:after , .wpp-list>li.rank4:after{ background:url(./img/rank4.png) no-repeat;}
#sidebar article.rank5:after , .wpp-list>li.rank5:after{ background:url(./img/rank5.png) no-repeat;}
#sidebar article.rank6:after , .wpp-list>li.rank6:after{ background:url(./img/rank6.png) no-repeat;}
#sidebar article.rank7:after , .wpp-list>li.rank7:after{ background:url(./img/rank7.png) no-repeat;}
#sidebar article.rank8:after , .wpp-list>li.rank8:after{ background:url(./img/rank8.png) no-repeat;}
#sidebar article.rank9:after , .wpp-list>li.rank9:after{ background:url(./img/rank9.png) no-repeat;}
#sidebar article.rank10:after , .wpp-list>li.rank10:after{ background:url(./img/rank10.png); no-repeat}
#sidebar article>div .category_tag { background:#836456; text-align: center; max-width: 90px; padding:0 5px; margin:0; height:20px; line-height:20px; font-size:10px; color:#fff;}
.wpp-list>li  { display:block;  position:relative; height:60px;　clear:none !important; margin: 10px 0px:;}
.wpp-list span {display: none;}
.wpp-thumbnail {margin-right: 11px;}



/* footer */

#footer{ margin-top:25px; text-align: center; background:#88d8c9; padding:10px 0; }
#footer img {width:5%;}
#footer p.copyright{ text-align:center; font-size:0.8em; color:#474747;}
p.copyright a {color:#474747;}

/*-----------------------------------
index
-----------------------------------*/

#index_main {}

/*-----------------------------------
single
-----------------------------------*/
.single_main{ margin-top:21px; }
.single_main > h2 { font-size:22px; font-weight:bold; color:#474747; padding-bottom:7px; margin-bottom:5px; border-bottom:2px solid #f7f7f7;}
.single_main > div {padding:10px  0px 25px;}
.single_main > div figure{ width:100%; max-height:370px; overflow-y:hidden; }
.single_main > div figure img{ width:100%; }
.single_main > div > p {margin-top: 25px; line-height:1.5em; letter-spacing:0.02em;}
.single_main > div > p > b {font-size: 15px;}
.rcmd h2 {font-size: 16px; font-weight: bold; border-bottom: 1px solid #e5e5e5; padding-bottom:5px; margin-bottom: 20px;}
.rcmd h2 span {margin: 0px 13px 5px 13px; letter-spacing: 0.03em; display:inline-block;}
.rcmd ul li{ width:46%; margin:0 2% 5px; float:left; }

.rcmd ul li a figure{ height:145px; overflow-y:hidden; }
.rcmd ul li a,.rcmd ul li a figure,.rcmd ul li a figure img{ width:100%; }

.rcmd ul li a{ display:block; min-height:200px; }
.rcmd ul li a .category_tag { background:#836456; text-align: center; max-width: 90px; padding:0 5px; margin:0; height:20px; line-height:20px; font-size:10px; color:#fff;}
.rcmd ul li a div p{ min-height:42px; } 

.p-item__image img,.article_img{ max-width:543px; }
/*-----------------------------------
coupon
-----------------------------------*/
.coupon article a { padding: 25px 37px !important; height:auto !important; }
.coupon article a figure {max-width:468px !important; float:none; margin:0 auto; height:auto !important; }