@charset "utf-8";




/* ■■■■■■ 基本設定 */

*{
margin: 0;
padding: 0;
}

body{
font-family: Roboto, "Droid Sans", "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ",Meiryo, sans-serif;
color: black;
-webkit-text-size-adjust: 100%;
background: #000033 url(img/base/bg024_09.gif);/*bg024_09.gif*/
overflow-wrap:break-word;/*英単語の折り返しあり*/
/*word-wrap: break-word;*/
}

nav,
div,
li,
a,
img,
h1,h2,h3,
h4,
span,
fieldset,
.ad-banner{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}

.main:after,
.text-box:after,
#like:after,
#sns:after,
#head-nav:after{/*clearfix*/
content: "";
display: block;
clear: both;
}

pre{
line-height: 1.6em;
margin: 10px 0;
font-family: Roboto, "Droid Sans", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ",Meiryo, "ＭＳ Ｐゴシック", sans-serif;

word-wrap: break-word;
overflow-wrap:break-word;/*英単語の折り返しあり*/
white-space: -moz-pre-wrap;/* Mozilla */
white-space: -pre-wrap;/* Opera 4-6 */
white-space: -o-pre-wrap;/* Opera 7 */
white-space: pre-wrap;/* CSS3：自動改行 */
}




/* ■■■■■■ ボックス */

.sign,
.main,
#font-size,
.site_frame,
#head-nav{
max-width: 1440px;
min-width: 312px;
margin: 0 auto;
}
.main{
text-align: left;
padding: 10px 4px;
margin-bottom: 60px;
line-height: 1.6em;
background: #E3E3FC url(img/base/bg034_08.gif);

/*
-webkit-box-shadow: 10px 10px 20px black;
box-shadow: 10px 10px 20px black;
*/
}
@media screen and (min-width:568px){
.main{
padding: 10px 8px;
}
	}
@media screen and (min-width:1280px){
.sign,
.main,
#font-size,
.site_frame,
#head-nav{
width: 92%;
}
.main{
padding: 10px 16px;
}
	}



/* ■■■■■■ リンク */

#home-header,
#select-header,
nav a,
.return_top,
.dead-link{
display: block;
position: relative;
text-overflow: ellipsis;/*以下３行ではみ出し文を省略*/
white-space: nowrap;
overflow: hidden;
}
a:hover{
color: black;
background: #FFFF99;
background: rgba(255,255,100,0.4);
}
header a,
#font-size a,
nav a,
footer a,
.link-table a,
.list-table a,
.return_top{
text-decoration: none;
}
a{
-webkit-tap-highlight-color: rgba(255,255,0,0.4);
}

.photo-box a,
.photo-w80 a,
.photo-w60 a{
text-decoration: underline;
}

a.link-box:hover,
#home-header:hover,
#select-header:hover,
#home-footer:hover,
nav a:hover,
.return_top:hover{
color: black;
background: #FFFFCC;
background: -webkit-linear-gradient(top, #FFFFCC, #EEEE00);
background: linear-gradient(to bottom, #FFFFCC, #EEEE00);
}
#home-footer:hover p:first-child{
color: black;
}

.link-box,
#home-header,
#select-header,
#home-footer,
nav,
fieldset,
.return_top{
overflow: hidden;
border: 2px solid #AAAAAA;
border-right: 2px solid #444444;
border-bottom: 2px solid #444444;
}




/* ■■■■■■ リンクＢＯＸ */

.link-table,
.link-footer{
display: table;
width: 100%;
border-spacing: 2px;
table-layout: fixed;
margin-bottom: 20px;
line-height: 1.4em;
}

.link-box,
#home-header,
#select-header,
#home-footer{
display: table-cell;
border-radius: 10px;
}

.link-box p{
margin-bottom: 0;
}
.empty{
display: table-cell;
}


@media screen and (max-width:567px){
.link-table{
margin-bottom: 0;
border-spacing: 0;
}
.link-table div,
.link-table a{
display: block;
margin-bottom: 10px;
}
.empty{
display: none;
}
	}

.inside p:first-child,
.outside p:first-child,
.select p:first-child,
.blog p:first-child,
.kuchikomi p:first-child,
.info p:first-child,
#home-footer p:first-child{
color: white;
font-weight: bold;
padding: 5px 24px 5px 4px;
}

.inside p:first-child,
.select p:first-child{
background: navy;
}
.outside p:first-child{
background: maroon;
}
.blog p:first-child{
background: darkgreen;
}
.kuchikomi p:first-child{
background: #CC6600;
}


.link-box p:nth-child(2),
.info p:nth-child(2){
text-decoration: underline;
margin: 5px 4px;
font-weight: bold;
}
.link-box p:nth-child(3),
.info p:nth-child(3){
color: black;
margin: 0 4px;
font-weight: bold;
}
.dead-link p:nth-child(2){
font-weight: normal;
}

.select p:not(:first-child){
font-weight: bold;
color: black;
margin: 4px 4px 0 4px;
}

.annotation{
padding-left: 0.25em;
font-size: 75%;
line-height: 1.25em;
color: black;
}

.l-pdf{
min-width: 3em;
color: white;
background: #CC3300;
margin-left: 4px;
}



.link-box p:first-child{
position: relative;
}
.link-box p:first-child:after{/*リンク矢印アイコン*/
position: absolute;
top: 50%;
right: 8px;
content: '';
width: 8px;
height: 8px;
margin-top: -5px;
border-top: 3px solid white;
border-right: 3px solid white;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
footer .link-box p:first-child:after{/*リンク矢印アイコン 解除*/
display: none;
}




/* ■■■■■■ リンクバー */

.link_bar{
list-style-type: none;
margin: 0 0 1em 0;
}
.link_bar p{
margin: 0;
line-height: 1.5em;
}

.link_bar a,
.link_bar .dead{
position: relative;
width: 100%;
display: inline-block;
text-decoration: none;
font-weight: bold;
padding: 2.5em 24px 0.25em 0.25em;
border-radius: 10px;
overflow: hidden;
}

.link_bar p:first-child{
width: 100%;
font-weight: bold;
color: white;
background: navy;
position: absolute;
left: 0;
top: 0;
padding: 0.25em;
}
.link_bar p:nth-child(2){
text-decoration: underline;
}
.link_bar p:nth-child(3){
color: black;
}

.annotation{
font-weight: normal;
font-size: 75%;
color: black;
}




/* ■■■■■■ リンクバー・カラー */

.in a{
background: #9999DD;
background: -webkit-linear-gradient(top, #DDDDFF, #9999DD);
background: linear-gradient(to bottom, #DDDDFF, #9999DD);
}
.out a{
background: #DD9999;
background: -webkit-linear-gradient(top, #FFDDDD, #DD9999);
background: linear-gradient(to bottom, #FFDDDD, #DD9999);
}
.sns a{
background: #99DD99;
background: -webkit-linear-gradient(top, #DDFFDD, #99DD99);
background: linear-gradient(to bottom, #DDFFDD, #99DD99);
}
.buzz a{
background: #FFCC00;
background: -webkit-linear-gradient(top, #FFCC66 30%, #EE9900);
background: linear-gradient(to bottom, #FFCC66 30%, #EE9900);
}

.dead{
background: #999999;
background: -webkit-linear-gradient(top, #CCCCCC, #666666);
background: linear-gradient(to bottom, #CCCCCC, #666666);
}

.link_bar a:hover{
color: black;
background: #DDDD00;
background: -webkit-linear-gradient(top, #FFFFCC, #FFFF00);
background: linear-gradient(to bottom, #FFFF99, #DDDD00);
}


.link_bar a:after{/*リンク矢印アイコン*/
position: absolute;
top: 50%;
right: 8px;
content: '';
width: 8px;
height: 8px;
margin-top: -4px;
border-top: 3px solid navy;
border-right: 3px solid navy;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}




/* ■■■■■■ リンクバー・サブタイトル */

.out p:first-child{
background: #800000;
}
.sns p:first-child{
background: #008000;
}
.buzz p:first-child{
background: #CC6600;
}

.dead p:first-child{
color: gray;
background: #000000;
}
.link_bar b{
display: inline-block;
position: relative;
}

@media screen and (min-width:568px){
.link_bar a,
.link_bar .dead{
padding: 0.5em 24px 0.25em 7em;
}
.link_bar p:first-child{
width: 6em;
height: 100%;
text-align: center;
}
.link_bar b{
width: 100%;
}
	}




/* ■■■■■■ リンクバー・ラベル・アイコン */

.link_bar span{
margin: 0 0 0 0.5em;
}
.link_bar img{
margin-left: 4px;
width: 24px;
}




/* ■■■■■■ ナビボーダー＋コメント */

.h2,
.h3{
border-top: 2px solid gray;
}
nav a:last-of-type{
border-bottom: 2px solid gray;
}
nav .h3{
margin-left: 16px;
border-left: 2px solid gray;
}

nav p:first-child{
margin: 10px;
font-weight: bold;
font-size: 112.5%;
text-align: center;
}
nav p:last-child{
margin: 10px 0 0 4px;
font-size: 75%;
}




/* ■■■■■■ ナビ */

.h1-box{
width: 100%;
padding: 0 4px;
}
nav{
width: 100%;
color: white;
background: navy;
border-radius: 10px;
margin: 20px 0 20px 0;
}

.h2,
.h3{
text-align: left;
font-weight: bold;
padding: 20px 8px;}/*サブタイトル有り*/

.return_top{
color: black;
margin: 10px 0;
font-weight: bold;
text-align: center;
float: right;
padding: 10px 24px;
}

@media screen and (min-width:568px){
.h1-box{
width: 38%;
float: left;
padding: 0 8px 0 0;
}
nav{
width: 62%;
float: right;
margin: 0 0 20px 0;
}

  }

@media screen and (min-width:768px){
.h1-box{
width: 50%;
}
nav{
width: 50%;
}

  }

@media screen and (min-width:1024px){
.h1-box{
width: 60%;
}
nav{
width: 40%;
}
.h2,
.h3{
padding: 10px 8px;
}
.return_top{
padding: 5px 24px;
}

  }



/* ■■■■■■ ＢＧカラー */

.outside{
background: #FFDDDD;
background: -webkit-linear-gradient(top, #FFDDDD 30%, #EEAAAA);
background: linear-gradient(to bottom, #FFDDDD 30%, #EEAAAA);
}
h1{
font-size: 162.5%;
background: navy;
background: -webkit-linear-gradient(top, blue, navy);
background: linear-gradient(to bottom, blue, navy);
}
#home-header,
#select-header,
h2,
.h2,
.inside,
.select,
.return_top{
background: #CCEEFF;
background: -webkit-linear-gradient(top, #CCEEFF 30%, #AACCFF);
background: linear-gradient(to bottom, #CCEEFF 30%, #AACCFF);
}
h3,
.h3,
.blog{
background: #CCFFCC;
background: -webkit-linear-gradient(top, #CCFFCC 30%, #99FF99);
background: linear-gradient(to bottom, #CCFFCC 30%, #99FF99);
}
.kuchikomi{
background: #FFCC00;
background: -webkit-linear-gradient(top, #FFCC66 30%, #EE9900);
background: linear-gradient(to bottom, #FFCC66 30%, #EE9900);
}

.back{
font-weight: bold;
background: #FFCCFF;
background: -webkit-linear-gradient(top, #FFCCFF 30%, violet);
background: linear-gradient(to bottom, #FFCCFF 30%, violet);
}
.dead-link{
color: dimgray;
background: lightgray;
background: -webkit-linear-gradient(top, lightgray 30%, darkgray);
background: linear-gradient(to bottom, lightgray 30%, darkgray);
}

.back p:first-child,
.dead-link p:first-child{
color: white;
font-weight: bold;
margin: 0;
padding: 5px 4px;
}
.back p:first-child{
background: indigo;
}
.dead-link p:first-child{
color: lightgray;
background: dimgray;
}
.dead-link p:nth-child(3){
color: dimgray;
}




/* ■■■■■■ インフォ */

.info{
background: #DDDDDD;
background: -webkit-linear-gradient(top, #EEEEEE, #AAAAAA);
background: linear-gradient(to bottom, #EEEEEE, #AAAAAA);
}

.info p:first-child{
color: yellow;
background: black;
}
.info p.aqua:first-child{
color: aqua;
}
.info p.red:first-child{
color: #FF3333;
}




/* ■■■■■■ テキスト */

p{
margin-bottom: 1em;
}
em{
font-style: normal;
font-weight: bold;
}
i{
font-style: normal;
font-weight: normal;
}

.red{
color: #E60000;
}
.blue{
color: #0000CC;
}
.green{
color: #00AA00;
}
.yellow{
color: #FFFF00;
}
.orange{
color: #DD6600;
}
.white{
color: #FFFFFF;
}
.gray{
color: #999999;
}
.violet{
color: violet;
}
.purple{
color: #FF00FF;
}

.font-ss{
font-size: 75%;
}
.font-s,
.photo-box p,
.photo-amazon{
font-size: 87.5%;
line-height: 1.5em;
}

.font-l{
font-size: 112.5%;
}
.font-exl{
font-size: 125%;
}

.font-bold{
font-weight: bold;
}

dt{
font-weight: bold;
margin-bottom: 0.2em;
}

dd{
margin: 0 0 1em 2em;
}




/* ■■■■■■ ミニコラム */

fieldset{
margin: 40px 0 40px 0;
background: #FFEEAA url(img/base/bg034_03.gif);
border-radius: 20px;
overflow: visible;
padding: 10px 4px 5px 4px;
}
legend{
margin: 0 0 10px 20px;
font-size: 125%;
color: white;
font-weight: bold;
text-shadow: 0 0 10px #000080, 0 0 10px #000080;
}

fieldset .title{
clear: both;
line-height: 2em;
padding-left: 1em;
border-left: 8px solid orange;
border-bottom: 4px solid #EECC00;
}
@media screen and (min-width:568px){
fieldset{
padding: 10px 8px 5px 8px;
}
	}
@media screen and (min-width:1024px){
fieldset{
padding: 10px 16px 5px 16px;
}
	}

fieldset .date{
font-size: 87.5%;
text-align: right;
}
fieldset .title{
font-size: 112.5%;
margin-top: 10px;
}


blockquote .title{
padding-left: 0;
border: none;
}

blockquote{
background: #EEEEEE url(img/base/bg034_08.gif);
padding: 42px 8px 32px 8px;
border: 1px solid lightgray;
border-radius: 5px;
position: relative;
margin-bottom: 10px;
}
blockquote:before,
blockquote:after{
font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W6", "Hiragino Mincho ProN", "HGS明朝E", "ＭＳ Ｐ明朝", serif;
color: gray;
font-size: 64px;
}

blockquote:before{
position: absolute;
content: "“";
line-height: 1em;
top: 10px;
left: 0;
}
blockquote:after{
position: absolute;
content: "”";
bottom: 0;
right: 0;
}

@media screen and (min-width:568px){
blockquote{
padding: 40px 40px 40px 40px;
}
  }
@media screen and (max-width:1023px){
blockquote:before{
margin-left: -0.5em;
}
blockquote:after{
letter-spacing: -0.5em;
}
  }




/* ■■■■■■ リスト */

ul,
ol{
margin: 2em 0 2em 1.5em;
}
ul ul{
margin: 0 0 1em 1.5em;
}

li{
line-height: 1.8em;
}
.no-mark,
.style-none{
list-style: none;
margin-left: 0;
}

table ul,
table ol{
margin: 1em 0 1em 1em;
}




/* ■■■■■■ 画像ウインドウ割合 */

img{
border-style: none;
vertical-align: middle;
}
.photo-box img,
.photo-w80 img,
.photo-w60 img{
width: 100%;
}
.photo-box img{
max-width: 640px;
}

.photo-box,
.text-box{
width: 100%;
margin: 0 0 10px 0;
position: relative;
}
.text-box,
.text{
margin-top: 20px;
padding: 0 4px;
}
@media screen and (min-width:568px){
.text-box{
padding: 0;
}
	}

.paragraph{
padding-left: 0.25em;
margin-bottom: 0.5em;
clear: both;
line-height: 1.6em;
font-size: 125%;
margin-top: 40px;
border-bottom: 2px solid lightgray;
}
fieldset:first-child .paragraph,
.text .paragraph:first-child,
.photo-table .paragraph:first-child{
margin-top: 0;
}

.photo-w80,
.photo-w60{
width: 100%;
}

.photo-amazon{
float: left;
margin: 0 8px 10px 0;
}
.photo-amazon img{
max-width: 180px;
}


@media screen and (min-width:568px){
.photo-box{
width: 80%;
}
.photo-w80,
.photo-w60{
width: 90%;
margin-bottom: 20px;
}

  }

@media screen and (min-width:1024px){
.photo-table{
display: table;
width: 100%;
margin-top: 20px;
}
/* .photo-table:not(:first-of-type){
margin-top: 80px;
} */

.photo-box,
.text-box{
float: left;
display: table-cell;
}
.text{
width: 80%;
max-width: 960px;
margin: 0 auto 40px auto;
}

.photo-box{
width: 40%;
margin: 0;
}
.text-box{
float: right;
width: 60%;
padding: 0 0 0 16px;
margin-top: 0;
}

.photo-w80{
width: 80%;
margin: 0 auto 20px auto;
}
.photo-w60{
width: 60%;
margin: 0 auto 20px auto;
}
	}
@media screen and (min-width:1024px){
.photo-box{
width: 35%;
}
.text-box{
width: 65%;
}
	}




/* ■■■■■■ アイコン(2016-12-31削除) */

.icon-camera,
.icon-mark,
.icon-mail{
margin-right: 4px;
}
.icon-camera,
.icon-mark{
width: 24px;
}

.icon-mark{
border-radius: 5px;
}
.icon-mail{
height: 24px;
border-radius: 2px;
}




/* ■■■■■■ 配置 */

.float-clear,
h2,
h3,
h4,
fieldset{
clear: both;
}
.float-left,
#home-header,
#select-header{
margin: 0 8px 10px 0;
float: left;
}
.float-right{
float: right;
}
.float-none{
float: none;
}

.margin-r0{
margin-right: 0;
}

.text-left{
text-align: left;
}
.text-right{
text-align: right;
}
.text-center{
text-align: center;
}




/* ■■■■■■ ヘッドライン */

h1,
h2,
h3,
h4{
margin: 10px 0 40px 0;
line-height: 2em;
padding: 0.5em 0.25em;
color: white;
text-align: center;
}

h2{
color: navy;
font-size: 150%;
border-left: 10px solid navy;
border-bottom: 2px solid navy;
}
h3{
margin-top: 160px;
font-size: 137.5%;
color: darkgreen;
border-left: 10px solid darkgreen;
border-bottom: 2px solid darkgreen;
}
h4{
margin: 0 auto 40px auto;
width: 80%;
margin-top: 60px;
font-size: 125%;
font-weight: bold;
color: maroon;
border-top: 2px solid orange;
background: #FFCC66;
background: -webkit-linear-gradient(top, #FFEE99, #FFCC66);
background: linear-gradient(to bottom, rgba(255,240,150,0.4), rgba(255,200,0,0.4));
}




/* ■■■■■■ snsボタン */

/* like-2016-02書換
クリアーＦＩＸにもあり */

#like,
#sns{
width: 100%;
}
#like div,
#sns div{
float: left;
width: 100px;
height: 86px;
margin: 0 16px 40px 0;
}

#like #plus{
display: none;
}
#like #line,
#sns #line{
width: 36px;
}


#twi{
height: 60px;
padding: 20px 0 0 0;
}
#follow{
width: 180px;
height: 60px;
padding: 20px 0 0 0;
margin-right: 0;
}

@media screen and (min-width:568px){
#like div,
#sns div{
width: auto;
margin: 0 12px 60px 0;
}
#like #fb,
#sns #fb{
width: 90px;
}

#like #line{
display: none;
}
#twi,
#follow{
padding: 40px 0 0 0;
}
	}




/* ■■■■■■ 文字サイズ変更 */

#font-size{
line-height: 36px;
color: white;
font-size: 16px;
min-height: 44px;
padding: 4px;
}

#font-size a{
width: 36px;
height: 36px;
margin-left: 24px;
float: left;
}
#font-size a:nth-child(2){
margin-left: 0;
}

#font-size a:hover{
background: rgba(255,255,0,0.8);
}
#font-small,
#font-standard,
#font-large,
#font-ex_large{
display: block;
text-align: center;
color: black;
font-weight: bold;
border-radius: 18px;
}
#font-standard{
background: violet;
background: rgba(255,100,255,0.8);
}
#font-small,
#font-large,
#font-ex_large{
background: rgba(255,255,255,0.8);
}




/* ■■■■■■ ヘッダー */

header,
footer{
background: #CCEEBB url(img/base/bg024_04.gif);/*bg024_04.gif*/
}
header{
text-align: left;
width: 100%;
padding: 15px 0 10px 0;
}
#head-nav{
min-height: 18px;
padding: 0 4px;
}

#home-header,
#select-header{
width: 80px;
height: 46px;
color: navy;
font-size: 16px;
font-weight: bold;
line-height: 42px;
text-align: center;
margin-bottom: 0;
}
#select-header{
font-size: 87.5%;
}




/* ■■■■■■ フッター */

footer{
min-height: 60px;
padding: 10px 0 2px 0;
}
#home-footer{
padding-bottom: 32px;
text-align: center;
background: navy url(img/home/fuji180x60.png) no-repeat bottom left;
-moz-background-size:contain;
-o-background-size:contain;
-webkit-background-size:contain;
-ms-background-size:contain;
}


@media screen and (min-width:568px){
footer{
padding: 10px 16px 2px 16px;
}
#home-header,
#select-header{
height: 24px;
line-height: 22px;
}

  }




/* ■■■■■■ スマホ */

@media screen and (max-width:1023px){
.empty{
display: none;
}

  }


#font-size div{
line-height: 36px;
}
  }

@media screen and (max-width:1023px){
.h1-box .empty{
display: none;
}
  }

@media screen and (max-width:1023px){
.hide_at-mob{
display: none;
}
  }


/* ■■■■■■ タブレット */


/* ■■■■■■ ＰＣ */

@media screen and (min-width:1024px){
.hide_at-pc{
display: none;
}

  }





/* ■■■■■■ 広告 */

.ad-sp{
font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W6", "Hiragino Mincho ProN", "HGS明朝E", "ＭＳ Ｐ明朝", serif;
margin: 0;
font-size: 150%;
color: white;
text-shadow: 2px 2px 2px black;
}
#ad-a,
#ad-b{
background: #DDFFDD;
background: rgba(255,255,255,0.9);
}




/* ■■■■■■ イメージ　リンク */

.img-link:after{/*リンク矢印アイコン*/
position: absolute;
top: 50%;
right: 16px;
content: '';
width: 16px;
height: 16px;
margin-top: -8px;
border-top: 4px solid blue;
border-right: 4px solid blue;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.img-link:hover:after{/*リンク矢印アイコン*/
border-top: 4px solid yellow;
border-right: 4px solid yellow;
}

.img-link img{
border: 2px solid blue;
border-radius: 10px;
}
.img-link img:hover{
border: 2px solid yellow;
}

.ad-banner{
display: table-cell;
width: 100%;
max-width: 640px;
padding: 0 4px;
}
@media screen and (min-width:1024px){
.ad-banner{
width: 50%;
float: left;
}
	}