/* * * * * * * * * * * * * * * * * * * *
 * oki ftop.css
 * * * * * * * * * * * * * * * * * * * */

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

/* ■■■■ コンテナー ■■■■ */
#container {
background-color : #333333;
/* background-image : url("https://websmart.zappallas.com/web_image?url=http%3A%2F%2Foki.pga.jp%2Fi.cgi%3Fn%3D%2Fspbg%26decrypt%3D1"); */
background-repeat : repeat;
color : #9D9C79;
position : relative;
margin : 0 auto;
padding : 5px;
max-width : 380px;
box-shadow : 0px 0px 10px 10px #b7844f;
-webkit-box-shadow : 0px 0px 10px 10px #b7844f;
}

/* ■■■■ コンテンツ（タイトル有） ■■■■ */
.ftop_box {
margin : 8px auto;
margin-right : 5px;
margin-left : 5px;
max-width : 1000px;
height: auto;
background-color : #000000;
color : #EAB942;
padding : 2px;
padding-top : 5px;
text-align : center;
border : solid 1px #000000;
border-radius : 6px;
box-shadow : 0 0 2px #333333;
-webkit-box-shadow : 0 0 2px #333333;
}

.ftop_box .main {
text-align : left;
width : auto;
height: auto;
border : none;
background-color : #484724;
color : #FFE459;
margin : 0 auto;
margin-top : 2px;
padding : 10px;
border-bottom-left-radius : 4px;
border-bottom-right-radius : 4px;
box-shadow : 0 0 2px #333333;
-webkit-box-shadow : 0 0 2px #333333;
}

.ftop_box2 {
margin : 8px auto;
margin-right : 5px;
margin-left : 5px;
max-width : 1000px;
height: auto;
background-color : #000000;
color : #EAB942;
padding : 2px;
padding-top : 5px;
text-align : center;
border : solid 1px #000000;
border-radius : 6px;
box-shadow : 0 0 2px #333333;
-webkit-box-shadow : 0 0 2px #333333;
}

.ftop_box2 .main {
text-align : left;
width : auto;
height: auto;
border : none;
background-color : #484724;
color : #FFE459;
margin : 0 auto;
margin-top : 2px;
padding : 10px;
border-bottom-left-radius : 4px;
border-bottom-right-radius : 4px;
box-shadow : 0 0 2px #333333;
-webkit-box-shadow : 0 0 2px #333333;
}

/* ■■■■ リスト（横幅100%） ■■■■ */
.ftop_list01 {
border-bottom : none; /*一番外の枠色*/
width : 100%;
margin-top : 5px;
list-style : none;
margin-bottom : none;
}

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

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

.ftop_list01 li:first-child {
border-top : solid 1px #484724;
}

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

.ftop_list01 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 #EAB942; /*右端　>　の色*/
border-right : solid 2px #EAB942; /*右端　>　の色*/
-webkit-transform : rotate(45deg);
}

.ftop_list01 li a .ftop_date{
font-size : 12px;
color : #336699;
}
.ftop_list01 li a .ftop_cn{
font-size : 12px;
color : #a30000;
}
.ftop_list01 li a .ftop_menu{
font-size : 12px;
color : #654423;
}

/* ■■■■ 基本性格タイトル ■■■■ */
.ftop_basictitle {
height : auto;
margin-top : 5px;
padding : 5px;
text-align : center;
vertical-align : bottom;
}

/* ■■■■ リスト（横幅100%） ■■■■ */
.ftop_list01 {
border-bottom : none; /*一番外の枠色*/
width : 100%;
margin-top : 5px;
list-style : none;
margin-bottom : 15px;
}

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

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

.ftop_list01 li:first-child {
border-top : solid 1px #484724;
}

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

.ftop_list01 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 #EAB942; /*右端　>　の色*/
border-right : solid 2px #EAB942; /*右端　>　の色*/
-webkit-transform : rotate(45deg);
}

.ftop_list01 li a .ftop_cap{
font-size : 12px;
color : #336699;
}
.ftop_list01 li a .ftop_cn{
font-size : 12px;
color : #FFE459;
}
.ftop_list01 li a .ftop_menu{
font-size : 12px;
color : #484724;
}

/* ■■■■ シチュエーション用リスト（横幅100%） ■■■■ */
.ftop_list02 {
border-bottom : none; /*一番外の枠色*/
width : 100%;
margin-top : 5px;
list-style : none;
margin-bottom : 15px;
}

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

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

.ftop_list02 li:first-child {
border-top : solid 1px #484724;
}

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

.ftop_list02 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 #EAB942; /*右端　>　の色*/
border-right : solid 2px #EAB942; /*右端　>　の色*/
-webkit-transform : rotate(45deg);
}

.ftop_list02 li a .ftop_cap{
font-size : 12px;
color : #336699;
}
.ftop_list02 li a .ftop_cn{
font-size : 12px;
color : #FFE459;
}
.ftop_list02 li a .ftop_menu{
font-size : 12px;
color : #484724;
}

/* ■■■■ 監修者紹介用リスト（横幅100%） ■■■■ */
.ftop_list03 {
border-bottom : none; /*一番外の枠色*/
width : 100%;
margin-top : 5px;
list-style : none;
margin-bottom : 15px;
}

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

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

.ftop_list03 li:first-child {
border-top : solid 1px #484724;
}

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

.ftop_list03 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 #EAB942; /*右端　>　の色*/
border-right : solid 2px #EAB942; /*右端　>　の色*/
-webkit-transform : rotate(45deg);
}

.ftop_list03 li a .ftop_cap{
font-size : 12px;
color : #336699;
}
.ftop_list03 li a .ftop_cn{
font-size : 12px;
color : #FFE459;
}
.ftop_list03 li a .ftop_menu{
font-size : 12px;
color : #484724;
}

/* ■■■■ 日運用 ■■■■ */
.mtop_day {
padding : 10px;
width : 80%;
-webkit-box-shadow : 0px 0px 10px #0b0b0b;
-moz-box-shadow : 0px 0px 10px #0b0b0b;
box-shadow : 0px 0px 10px #0b0b0b;
text-align : center;
background-color : #484724;
margin-left : auto;
margin-right : auto;
-webkit-border-radius : 10px;
-moz-border-radius : 10px;
border-radius : 10px;
border : solid 3px #0b0b0b;
}

/* ■■■■ コーナー(タイトルあり) ■■■■ */
.mtop_corner {
margin : 8px auto;
margin-right : 5px;
margin-left : 5px;
max-width : 1000px;
height: auto;
background-color : #0b0b0b;
color : #FFC33A;
padding : 2px;
padding-top : 5px;
text-align : center;
border : solid 1px #000000;
border-radius : 6px;
box-shadow : 0 0 2px #333333;
-webkit-box-shadow : 0 0 2px #333333;
}

.mtop_corner .main {
text-align : left;
width : auto;
height: auto;
border : none;
background-color : #484724;
color : #b47551;
margin : 0 auto;
margin-top : 2px;
padding : 10px;
border-bottom-left-radius : 4px;
border-bottom-right-radius : 4px;
box-shadow : 0 0 2px #333333;
-webkit-box-shadow : 0 0 2px #333333;
}

/* ■■■■ コーナー(タイトルなし) ■■■■ */
.mtop_corner02 {
margin : 8px auto;
margin-right : 5px;
margin-left : 5px;
max-width : 1000px;
height: auto;
background-color : #0b0b0b;
color : #FFC33A;
padding : 2px;
padding-top : 5px;
text-align : center;
border : solid 1px #000000;
border-radius : 6px;
box-shadow : 0 0 2px #333333;
-webkit-box-shadow : 0 0 2px #333333;
}

.mtop_corner02 .main {
text-align : left;
width : auto;
height: auto;
border : none;
background-color : #484724;
color : #b47551;
margin : 0 auto;
margin-top : none;
padding : none;
border-bottom-left-radius : 4px;
border-bottom-right-radius : 4px;
box-shadow : 0 0 2px #333333;
-webkit-box-shadow : 0 0 2px #333333;
}

/* ■■■■ リスト（横幅100%） ■■■■ */
.mtop_list01 {
border-bottom : solid 1px #654423; /*一番外の枠色*/
width : 100%;
margin-top : 5px;
list-style : none;
margin-bottom : 15px;
}

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

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

.mtop_list01 li:first-child {
border-top : solid 1px #654423;
}

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

.mtop_list01 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 #EAB942; /*右端　>　の色*/
border-right : solid 2px #EAB942; /*右端　>　の色*/
-webkit-transform : rotate(45deg);
}

.mtop_list01 li a .mtop_cap{
font-size : 12px;
color : #336699;
}
.mtop_list01 li a .mtop_cn{
font-size : 12px;
color : #b47551;
}
.mtop_list01 li a .mtop_menu{
font-size : 12px;
color : #654423;
}

/* ■■■■ リスト02（横幅50％） ■■■■ */
.mtop_list02 {
overflow : hidden;
border-top : 1px solid #22140f;
margin-bottom : 15px;
}

.mtop_list02 li {
float : left;
width : 50%;
}

.mtop_list02 li a {
background-position : 5px 50%;
text-decoration : none;
background-repeat : no-repeat;
border-color : #22140f;
border-style : solid;
border-width : 0 1px 1px 0;
display : block;
height : 43px;
line-height : 43px;
padding-left : 5px;
text-align : center;
overflow : hidden;        /*はみ出たら…*/
text-overflow : ellipsis; /*はみ出たら…*/
white-space : nowrap;     /*はみ出たら…*/
}

.mtop_list02 li:nth-child(2n) a {
border-right : none;
}

/* ■■■■ リスト03（タブ用） ■■■■ */
.mtop_list03 {
border-bottom : solid 1px #654423; /*一番外の枠色*/
width : 100%;
list-style : none;
text-align : center;
background-color : #484724;
color : #484724;
}

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

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

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

.mtop_list03 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 #EAB942; /*右端　>　の色*/
border-right : solid 2px #EAB942; /*右端　>　の色*/
-webkit-transform : rotate(45deg);
}

/* ■■■■ 汎用リスト04（タブ用） ■■■■ */
.mtop_list04 {
border-bottom : solid 1px #9c781f; /*一番外の枠色*/
width : 100%;
list-style : none;
text-align : center;
background-color : #0b0b0b;
color : #ffffff;
}

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

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

.mtop_list04 li a {
color : #ffffff;
}

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

.mtop_list04 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 #9c781f; /*右端　>　の色*/
border-right : solid 2px #9c781f; /*右端　>　の色*/
-webkit-transform : rotate(45deg);
}

/* ===== タブ切り替え用 ===== */

#tab_js {
margin-left : auto;
margin-right : auto;
margin-top : 8px;
font-size : 15px
width : 100%;
text-align:center;
background-color : #484724;
}

#tab_js ul#tab {
margin : 0;
padding : 0;
background: -webkit-gradient(linear, left top, left bottom, color-stop(100%,#654423), color-stop(0%,#0b0b0b));/* webkit */
float : left;
width : 100%;
-webkit-border-top-left-radius : 5px;
-webkit-border-top-right-radius : 5px;
}

#tab_js ul#tab li {
font-size : 120%;
margin : 5px 5px 5px 5px;
padding : 7px 0 7px 0;
text-align : center;
border-bottom : none;
float : left;
width : 45%;
list-style : none;
-webkit-border-top-left-radius : 8px;
-webkit-border-top-right-radius : 8px;
}

#tab_js ul#tab li a {
display : block;
text-decoration : none;

}

#tab_js ul#tab li.selected { /*選択されているタブ*/
background : -webkit-gradient(linear, left top, left bottom, from(#825d06), to(#9c781f)); /*背景グラデーション*/
}

#tab_js ul#tab li.selected a {
color : #ffffff;
}

/* ■■■■ リスト05（横幅50％ヘッダ用） ■■■■ */
.mtop_list05 {
overflow : hidden;
border-top : 1px solid #22140f;
margin-bottom : 15px;
}

.mtop_list05 li {
float : left;
width : 50%;
}

.mtop_list05 li a {
background-position : 5px 33%;
text-decoration : none;
background-repeat : no-repeat;
border-color : #22140f;
border-style : solid;
border-width : 0 1px 1px 0;
display : block;
height : 43px;
line-height : 43px;
padding-left : 5px;
text-align : center;
overflow : hidden;        /*はみ出たら…*/
text-overflow : ellipsis; /*はみ出たら…*/
white-space : nowrap;     /*はみ出たら…*/
}

.mtop_list05 li:nth-child(2n) a {
border-right : none;
}

/* ■■■■ リスト06（横幅30％ヘッダ用） ■■■■ */
.mtop_list06 {
overflow : hidden;
margin-bottom : none;
}

.mtop_list06 li {
float : left;
font-size : 60%;
width : 33%;
}

.mtop_list06 li a {
background-position : 5px 50%;
text-decoration : none;
background-repeat : no-repeat;
border-color : #484724;
border-style : solid;
border-width : 0 1px 1px 0;
display : block;
height : 30px;
line-height : 43px;
padding-left : 5px;
text-align : center;
overflow : hidden;        /*はみ出たら…*/
text-overflow : ellipsis; /*はみ出たら…*/
white-space : nowrap;     /*はみ出たら…*/
}

/* ■■■■ 相談者の声BG変更 ■■■■ */
.bg_01 {
background-color : #ECC75D;
}
.bg_02 {
background-color : #ffcc66;
}
.bg_03 {
background-color : #000000;
}