/* * * * * * * * * * * * * * * * * * * *
 * okuni custom.css
 * * * * * * * * * * * * * * * * * * * */

/* ■■■■ body設定 ■■■■ */
body {
color : #887853;
background-color : #fffee1;
}



/* ■■■■ リンク周り ■■■■ */
a:link{color : #cd9758;}
a:visited{color : #c99f80;}
/*ウラ風水ページ用*/
.ura_fusui {
color : #887888;
background-color : #000000;
}
.ura_fusui a:link{color : #ff5555;}
.ura_fusui a:visited{color : #887888;}


/* ■■■■ サイトのフォントカラー設定 ■■■■ */
/* 強調するとき用　赤 */
.st_1 {color : #ff0000;}

/* 強調するとき用　白 */
.st_2 {color : #ffffff;}

/* 強調するとき用　黒 */
.st_3 {color : #000000;}

/* 強調するとき用　ピンク */
.st_4 {color : #ff3498;}

/* 強調するとき用　オレンジ */
.st_5 {color : #ea6401;}

/* 強調するとき用　青 */
.st_6 {color : #6a5acd;}

/* 強調するとき用　茶色 */
.st_7 {color : #814102;}

/* 強調するとき用　灰色 */
.st_8 {color : #494949;}

/* 強調するとき用　薄い茶色 */
.st_9 {color : #cd9758;}

.st_10 {color : #ff9999;}

.st_11 {color : #698abb;}

.st_12 {color : #ffa500;}

/* 強調するとき用（太）オレンジ */
.st_14 {
color : #ea6401;
font-weight : bold;
}

/* ■■■■ Inc用hr設定 ■■■■ */
.hr {
border-radius : 8px;
-webkit-border-radius : 8px;
background-color : #454d5a;
background : -webkit-gradient(linear, left top, left bottom, from(#454d5a), to(#454d5a));
font-size : 0;
line-height : 0;
width : 100%;
height : 1px;
margin : 10px auto;
}



/* ■■■■ マーキー設定 ■■■■ */
#marquee {
border : none;
background-color : #fd9640;
color : #ffeee1;
width : 100%;
overflow : hidden;
overflow : -webkit-marquee;
display : -wap-marquee;
-wap-marquee-loop : infinite;
white-space : nowrap;
}



/* ■■■■ TOPに戻る ■■■■ */
#box_top {
border : solid 1px #8c3310;
border-radius : 8px;
-webkit-border-radius : 8px;
background-color : #ffb501;
background : -webkit-gradient(linear, left top, left bottom, from(#d8be9a), to(#ba9866));

font-size : 100%;
line-height : 30px;
width : 95%;
height : 30px;
margin-left : 1px;
margin-right : 1px;
text-align : left;
text-shadow : -1px -1px 0 #969696;
box-shadow : 0px 0px 10px #000000;
-webkit-box-shadow : 0px 0px 5px #000000;
}

#box_top a{
display : block;
width : auto;
text-decoration : none;
color : #572d00;
}



/* ■■■■ 登録する ■■■■ */
.box_reg {
border : solid 1px #8c3310;
border-radius : 8px;
-webkit-border-radius : 8px;
background-color : #f30101;
background : -webkit-gradient(linear, left top, left bottom, from(#fff6dd), to(#f30101));

font-size : 150%;
line-height : 30px;
width : 60%;
height : 30px;
margin-left : auto;
margin-right : auto;
text-align : center;
text-shadow : -1px -1px 0 #969696;
box-shadow : 0px 0px 10px #000000;
-webkit-box-shadow : 0px 0px 5px #000000;
}

.box_reg a{
display : block;
width : auto;
text-decoration : none;
color : #572d00;
}

/* ■■■■ 台湾キャンペーン用■■■■ */
/* ■■■■ メニューリスト中３段 中央寄せ ■■■■ */
.top_navi_4 ul {
margin-top : auto;
margin-bottom : auto;
display: block;
}

.top_navi_4 ul li {
display: inline-block;
border: 1px solid #dddddd;
border-right: 1px solid #dddddd;
border-bottom: 1px solid #dddddd;
border-right : none;
list-style : none;
width : 32%;
text-align : center;
background: #1f1f1f;
background: rgb(147,206,222); /* Old browsers */
background: -moz-linear-gradient(top, rgba(147,206,222,1) 0%, rgba(117,189,209,1) 41%, rgba(73,165,191,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(147,206,222,1)), color-stop(41%,rgba(117,189,209,1)), color-stop(100%,rgba(73,165,191,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(147,206,222,1) 0%,rgba(117,189,209,1) 41%,rgba(73,165,191,1) 100%); /* Chrome10+,Safari5.1+ */
box-shadow : 2px 2px 3px rgba(50,50,50,1), 0px 1px 1px rgba(255,255,255,1) inset, 0px 0px 1px rgba(0,0,0,0.5) inset;
}

.top_navi_4 ul li a{
text-shadow : -1px -1px 1px #352D26;
font-size:12px;
width : auto;
display : block;
padding : 10px 2px 8px 2px;
color : #ffffff;
text-decoration : none;
}

.top_navi_4 ul li:first-child{
border-top-left-radius : 8px;
border-bottom-left-radius : 8px;
}

.top_navi_4 ul li:last-child{
border: 1px solid #dddddd;
border-right: 1px solid #dddddd;
border-bottom: 1px solid #dddddd;
border-top-right-radius : 8px;
border-bottom-right-radius : 8px;
}

.top_navi_4 .no{
color:#778899;
text-shadow : -1px -1px 1px #352D26;
font-size:12px;
width : auto;
display : block;
padding : 10px 2px 8px 2px;
text-decoration : none;
}

/* ■■■■ 角丸ボックス　影つき ■■■■ */
.box_tokubetu {
padding : 5px;
box-shadow : 0px 0px 10px #000000;
-webkit-box-shadow : 0px 0px 10px #000000;
border : solid 3px #f76700;
border-radius : 10px;
-webkit-border-radius : 10px;
}



/* ■■■■ 枠（白　角丸） ■■■■ */
.waku {
border : solid 1px #ffffff; /*枠の色*/
border-radius : 8px;
-webkit-border-radius : 8px;
background-color : #ffffff; /*背景色*/
background : -webkit-gradient(linear, left top, left bottom,);
width : 90%; /*横幅*/
height : auto; /*高さ　自動*/
margin-left : auto;
margin-right : auto;
padding : 10px 10px 10px 10px; /*枠と文字の隙間　上右下左*/
box-shadow : 0px 0px 5px #000000; /*枠全体の影*/
-webkit-box-shadow : 0px 0px 5px #000000; /*枠全体の影*/
}

■■■f用リスト■■■

.example {
margin: 0;
padding: 0;
list-style-type: none;
font-size: 11px;
}

.example li {
cursor: pointer;
float: left;
height: auto;
margin-left: 3%;
/* padding: 2px; */
/* border: 1px #ffb366 solid; */
background-color: #FFFFFF;
/* text-align: center; */
}

.example li img{
width:155px;
height:auto;}

.clearLeft { 
clear: left; 
}


/* ■■■■ 汎用リスト01 ■■■■ */
.list_01 {
border-radius : 10px;
-webkit-border-radius : 10px;
border : solid 1px #cccccc; /*一番外の枠色*/
margin-left : auto;
margin-right : auto;
width : 95%;
list-style : none;
}

.list_01 li {
position : relative;
border-bottom : solid 1px #dddddd; /*リスト内の区切り線の色*/
height : 30px;
overflow : hidden;
}

.list_01 li a:not(.noListLink) {
position : relative;
display : block;
width : 100%;
height : 100%;
padding : 10px;
color : #000000; /*リスト内の文字色*/
text-decoration : none;
-webkit-box-sizing : border-box;
}

.list_01 li:last-child {
border-bottom : none;
}

.list_01 li a:not(.noListLink):after {
content : "";
position : absolute;
right : 10px;
top : 50%;
display : block;
width : 6px;
height : 6px;
margin-top : -4px;
border-top : solid 2px #979797; /*右端　>　の色*/
border-right : solid 2px #979797; /*右端　>　の色*/
-webkit-transform : rotate(45deg);
}



/* ■■■■ 汎用リスト02 背景とかの装飾設定なしバージョン ■■■■ */
.list_02 {
border-bottom : solid 1px #cccccc; /*一番外の枠色*/
width : 100%;
list-style : none;
}

.list_02 li {
position : relative;
border-bottom : solid 1px #dddddd; /*リスト内の区切り線の色*/
height : auto;
}

.list_02 li a:not(.noListLink) {
position : relative;
display : block;
width : 100%;
height : 100%;
padding : 10px;
text-decoration : none;
-webkit-box-sizing : border-box;
}

.list_02 li:last-child {
border-bottom : none;
}

.list_02 li a:not(.noListLink):after {
content : "";
position : absolute;
right : 10px;
top : 50%;
display : block;
width : 6px;
height : 6px;
margin-top : -4px;
border-top : solid 2px #979797; /*右端　>　の色*/
border-right : solid 2px #979797; /*右端　>　の色*/
-webkit-transform : rotate(45deg);
}

/* ■■■■ 汎用リストアイコンならべる ■■■■ */
.yoko_list{
width:100%;}

.yoko_list li{
float: left;
width: 20%;
padding-left: 5px;
}


/* ■■■■　会員登録　■■■■ */
.reg {
margin-right : auto;
margin-left : auto;
margin-top : 5px;
margin-bottom : 5px;
height : auto;
width : 100px;
height : auto;
text-align : center;
font-size : 14px;
font-weight : bold;
border : solid 1px #d66f1a;
border-radius : 8px;
-webkit-border-radius : border-radius : 8px;
background-image : -webkit-gradient(linear,left top,left bottom,color-stop(0,#ff943d),color-stop(0.40,#ff943d),color-stop(0.60,#F27911),color-stop(1,#F27911));
background-image : linear-gradient(-90deg,#ff943d) 0%,#ff943d 40%,#F27911 60%,#F27911 100%);
box-shadow : 1px 1px 2px 1px #cccccc;
-webkit-box-shadow : 1px 1px 2px 1px #cccccc;
}

.reg a {
padding : 5px;
color : #ffffff;
text-decoration : none;
display : block;
}

/* ■■■■　会員削除　■■■■ */
.unreg {
margin-right : auto;
margin-left : auto;
margin-top : 5px;
margin-bottom : 5px;
height : auto;
width : 100px;
height : auto;
text-align : center;
font-size : 14px;
font-weight : bold;
border : solid 1px #2369d9;
border-radius : 8px;
-webkit-border-radius : border-radius : 8px;
background-image : -webkit-gradient(linear,left top,left bottom,color-stop(0,#3d84ff),color-stop(0.40,#3d84ff),color-stop(0.60,#2773f5),color-stop(1,#2773f5));
background-image : linear-gradient(-90deg,#3d84ff) 0%,#3d84ff 40%,#2773f5 60%,#2773f5 100%);
box-shadow : 1px 1px 2px 1px #cccccc;
-webkit-box-shadow : 1px 1px 2px 1px #cccccc;
}

.unreg a {
color : #ffffff;
padding : 5px;
text-decoration : none;
display : block;
}



/* ■■■■　ログイン　■■■■ */
.login {
margin-right : auto;
margin-left : auto;
margin-top : 5px;
margin-bottom : 5px;
height : auto;
width : 100px;
height : auto;
text-align : center;
font-size : 14px;
font-weight : bold;
border : solid 1px #61ad23;
border-radius : 8px;
-webkit-border-radius : 8px;
background-image : -webkit-gradient(linear,left top,left bottom,color-stop(0,#78d42d),color-stop(0.40,#78d42d),color-stop(0.60,#69ba27),color-stop(1,#69ba27));
background-image : linear-gradient(-90deg,#78d42d) 0%,#78d42d 40%,#69ba27 60%,#69ba27 100%);
box-shadow : 1px 1px 2px 1px #cccccc;
-webkit-box-shadow : 1px 1px 2px 1px #cccccc;
}

.login a {
color : #ffffff;
padding : 5px;
text-decoration : none;
display : block;
}

/* ■■■■　スペーサー　■■■■ */
.li_space {
margin-right : auto;
margin-left : auto;
width : 10px;
display : block;
}



/* ■■■■　リストでブロック要素を横並び　■■■■ */
.li_yoko {
margin-right : auto;
margin-left : auto;
text-align : center;
width : 215px;
}

.li_yoko ul {
margin-right : 0 auto;
margin-left : 0 auto;
}

.li_yoko li {
margin-right : 0 auto;
margin-left : 0 auto;
float : left;
list-style : none;
}


/* ■■■■ 各コーナーフォーマット ■■■■ */
.corner {
margin : 5px 5px 15px 5px;
border-radius : 10px;
box-shadow : 2px 2px 3px #000000;
-webkit-box-shadow : 2px 2px 3px #000000;
}

.corner h2 {
text-align : center;
margin : 0 1px;
border-top : solid 1px #ffffff;
border-radius : 10px 10px 0 0;
padding : 5px 0 0 0;
color : #ffffff;
font-weight : none;
font-size : 15px;
text-shadow : -1px -1px 1px #a77b18;
letter-spacing : 3px;
}

.corner article {
border-radius : 0 0 5px 5px;
margin : 3px;
padding : 5px;
background-color : #ffffff;
box-shadow : 1px 1px 5px #555555 inset;
-webkit-box-shadow : 1px 1px 5px #555555 inset;
}

.corner aside {
text-align : right;
padding : 10px;
}

.corner aside a {
color : #000000 !important;
font-weight : bold;
letter-spacing : 2px;
}

/* ■■■■ 基本性格 ■■■■ */
#basic {
}

.basic {
border : solid 1px #fe923a;
background-color : #fe923a;
}
/* ■■■■ ftestBOX並び ■■■■ */
#fbox {
}

.fbox {
width:100%;
}
.fbox li{
display:inline-block;
width:30%;
margin-top :5px;
list-style-type: none;
box-sizing:border-box;
}


.fbox li a {
color : #000000 !important;
font-weight : bold;
letter-spacing : 2px;
}
.clear {clear:both;　/*floatの解除、ここがポイント*/}



/* ■■■■ 勝ちスパイラル ■■■■ */
#kachi {
}

.kachi {
border : solid 1px #ff3498;
background-color : #ff3498;
}


/* ■■■■ ウラ風水 ■■■■ */
#ura {
}

.ura {
border : solid 1px #6a5acd;
background-color : #6a5acd;
}


/* ■■■■ 東洋風ポジティブシンキング ■■■■ */
#touyou {
}

.touyou {
border : solid 1px #ea6401;
background-color : #ea6401;
}

/* ■■■■ 家相チェック ■■■■ */
#kasou {
}

.kasou {
border : solid 1px #DFCB00;
background-color : #DFCB00;
}

/* ■■■■ 100選 ■■■■ */
#ten {
}

.ten {
border : solid 1px #4CC5BD;
background-color : #4CC5BD;
}



/* ■■■■ 特集用table ■■■■ */
table.graduate1 {
width: 100%;
margin:20px 0px 50px;
border-top: 1px solid #CCC;
border-left: 1px solid #CCC;
border-spacing:0px;
}
table.graduate1 tr th,table.graduate1 tr td {
font-size: 12px;
border-bottom: 1px solid #CCC;
border-right: 1px solid #CCC;
padding: 7px;
}
table.graduate1 tr th {
background: #ffc0cb;
}
/* ■■■■ モーダル ■■■■ */
#glayLayer{
display:none;
position:fixed;
top:0;
left:0;
height:100%;
width:100%;
background:#000;
opacity:0.75;
filter:alpha(opacity=75);
}

#overLayer{
position:fixed;
z-index:1000;
border:solid 4px #ff3498;
border-radius : 8px;
-webkit-border-radius : 8px;
display:none;
width:280px;
height:85%;
background:white;
padding:5px;
position:fixed;
top:50%;
left:50%;
}

#overLayer img.close{
width:30px;
height:30px;
position:absolute;
top:-10px;
right:-10px;
cursor:pointer;}

#overLayer img.modal{
display:block;
margin:auto;
width:140px;
height:140px;}


/* ■■■■ 監修者紹介ボタン ■■■■ */
.okuni_button {
margin-right : auto;
margin-left : auto;
margin-top : 5px;
margin-bottom : 10px;
height : auto;
width : 100%;
height : auto;
border-radius : 8px;
-webkit-border-radius : 8px;
text-align : center;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.87, #ffb420), color-stop(0.00, #f2d721));
background: -webkit-linear-gradient(top, #f2d721 0%, #ffb420 87%);
background: -moz-linear-gradient(top, #f2d721 0%, #ffb420 87%);
background: -o-linear-gradient(top, #f2d721 0%, #ffb420 87%);
background: -ms-linear-gradient(top, #f2d721 0%, #ffb420 87%);
background: linear-gradient(to bottom, #f2d721 0%, #ffb420 87%);
}

.okuni_button a {
padding : 10px;
font-size : 22px;
font-weight : bold;
letter-spacing : 2px;
color : #eeeeee;
text-decoration : none;
display : block;
}

.okuni_button span{
padding : 5px 5px 5px 5px;
line-height : 14px;
font-size : 15px;
font-weight : bold;
letter-spacing : 1px;
}


/* ■■■■ ふきだし１ ■■■■ */
* {
    box-sizing: border-box;
}

.wrapper {
   padding: 10px;
   position: relative;
} 
  
.fuki {
display: table-cell;
position: relative;
vertical-align: middle;
background: #ccc;
height: 45px;
width: 80%;
margin-bottom: 20px;
border-radius: 50px;

}
  
.fuki:before {
    content: '';
    position: absolute;
    background: #ccc;
    height: 20px;
    width: 20px;
    border-radius: 10px;
    bottom: -20px;
    left: 70px;
}
 
.fuki:after {
    content: '';
    position: absolute;
    background: #ccc;
    height: 10px;
    width: 10px;
    border-radius: 5px;
    bottom: -30px;
    left: 90px;
}

/* ■■■■ ふきだし２ ■■■■ */
* {
    box-sizing: border-box;
}

.wrapper2 {
   padding: 10px;
   position: relative;
   margin-top:15px;
} 
  
.fuki2 {
display: table-cell;
vertical-align: middle;
height: 45px;
width: 80%;
  text-align:right;
  position: relative;
  background: #eaa8a8;
  height: 55px;
  margin-bottom: 20px;
  border-radius: 50px;
  padding:0 5%;
}
  
.fuki2:before {
    content: '';
    position: absolute;
    background: #eaa8a8;
    height: 20px;
    width: 20px;
    border-radius: 10px;
    bottom: -20px;
    right: 70px;
}
 
.fuki2:after {
    content: '';
    position: absolute;
    background: #eaa8a8;
    height: 10px;
    width: 10px;
    border-radius: 5px;
    bottom: -30px;
    right: 90px;
}

.hoge{
position:relative;
}

.hoge p{
    position: absolute;
    top: 10px;
    right: 20px;
    text-align: center;
}
.hoge img{
width:40%;
 
}

/* ■■■■ 画像指定※ ■■■■ */
.w90c{
width:90%;
display:block;
margin:0 auto;
}


/* ■■■■ モーダル内・新規会員登録ボタン ■■■■ */
.new_reg2 {
margin-right : auto;
margin-left : auto;
margin-top : 5px;
margin-bottom : 10px;
height : auto;
width : 200px;
height : auto;
text-align : center;
border : solid 1px #d66f1a;
border-radius : 8px;
-webkit-border-radius : 8px;
background-image : -webkit-gradient(linear,left top,left bottom, from(#ff943d), to(#f27911));
-webkit-box-shadow : 2px 2px 3px rgba(50,50,50,1), 0px 1px 1px rgba(255,255,255,1) inset, 0px 0px 1px rgba(0,0,0,0.5) inset;
box-shadow : 2px 2px 3px rgba(50,50,50,1), 0px 1px 1px rgba(255,255,255,1) inset, 0px 0px 1px rgba(0,0,0,0.5) inset;
}

.new_reg2 a {
padding : 5px 5px 8px 5px;
font-size : 15px;
font-weight : bold;
letter-spacing : 2px;
color : #eeeeee;
text-decoration : none;
display : block;
text-shadow : -1px -1px 1px #633e21, 1px 1px 1px #ffaa65;
}

.new_reg2 span{
padding : 5px 5px 5px 5px;
line-height : 14px;
font-size : 13px;
font-weight : bold;
letter-spacing : 1px;
text-shadow : -1px -1px 1px #633e21, 1px 1px 1px #ffaa65;
}
/* ■■■■ 右下固定リンク ■■■■ */
#fixed-link {
  width: 150px;
  position: fixed !important;
  position: absolute;
  bottom: 0;
  right: 0;
  padding: 10px;
  z-index: 50;
}

#fixed-link img{
  width: 100%;
}

.img_f_201502{
position: relative;
  background:#FFFEE1;
}
.img_f_201502 .img_f_201502_btn{
position: absolute;
  margin-left: 30px;
  width: 48%;
  top: 78%;
  left: -10px;
}
.img_f_201503{
position: relative;
  background:#FFFEE1;
}
.img_f_201503 .img_f_201503_btn{
position: absolute;
  margin-left: 30px;
  width: 48%;
  top: 78%;
  left: -10px;
}
.img_f_201504{
position: relative;
  background:#FFFEE1;
}
.img_f_201504 .img_f_201504_btn{
position: absolute;
  margin-left: 30px;
  width: 48%;
  top: 61%;
  left: -10px;
}

/* ■■■■ LP用 ■■■■ */
.cocoloni-banner { font: 0/0 a; color: transparent; text-shadow: none; background-color: transparent; border: 0; background-color: #fff; background-image: url(/image/rn/site/common/cocoloni-brand2.sp.480.png); background-repeat: no-repeat; background-position: center; -webkit-background-size: 64px 10px; background-size: 64px 10px; height: 24px; }

 .btn-lp{
   width : 70%;
   text-align:center;
   margin-right : auto;
   margin-left : auto;
   margin-top : 5px;
   margin-bottom : 5px;
   background-color:#ff0cef;
   border-style:solid 3px;
   border-color:#ffffff;
   border-radius: 5px;
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   box-shadow : 2px 2px 3px rgba(50,50,50,1), 0px 1px 1px rgba(255,255,255,1) inset, 0px 0px 1px rgba(0,0,0,0.5) inset;
   }
   .btn-lp a p{
   color:#ffffff;
   padding: 10px;
   margin: auto;
   font-weight:bold;
   font-size:145%;
   }