/*
========================================================================
							全体的なスタイル
========================================================================
*/

/*キャンセルスタイル*/
*{
	margin:0;
	padding:0;
	box-sizing: border-box;
}

/*html5タグ非対応ブラウザ用*/
header,footer,main,nav,article,aside,section{
  display: block;
}

/*リストタグ特有のインデントは基本的に残しておく*/
ul {
	margin: 0 0 0 1em;
	padding: 0;
}

ol {
	margin: 0 0 0 1em;
	padding: 0;
	list-style: none;/*cssでは細かい統御がでいきないので゛JSでナンバーを振ることにした*/
}

/*
.skip{
	visibility:hidden
}
*/
/*
.add_number:before{
	counter-increment: number 1;
	content:counter(number) ".";
}

.skip_number{
	padding-left:1em;
}
*/
body{
	/*iPhoneの明朝体対策*/
	font-family: sans-serif;
	/*行間調整(ここで指定するのは問題ありかも)*/
	line-height:140%;
	font-size: 62.5%;
	/*背景画像を設定視した時に意味を成す*/
	background-repeat:no-repeat;
	background-position:center;
	background-attachment: fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

/*
========================================================================
							天井メニュー
========================================================================
*/

.fast_menu ul{
	margin:0;/*リストタグのインデントを除去*/
	list-style:none;
	display:flex;
	flex-direction:row;
}

.fast_menu ul li{
	font-size:14px;
	margin-left:10px;
	/*天地左右文字中央*/
	display:flex;
	flex-direction:row;
	justify-content:center;
	align-items:center;
}
/*
========================================================================
							カラムズ
========================================================================
*/


#columns{
	width:100%;
	display:flex;
}

/*
========================================================================
							見出し
========================================================================
*/

#contents_h1{
	padding:16px;
}

h1{
	font-size:27px;
	line-height:140%;
}

/*サブタイトル*/

.sub{
	padding-top:20px;
}

/*h1と同列の副題*/

.sub_t{
	font-size:15px
}

h2{
	font-size:18px;
	margin-bottom: 15px;
	margin-top: 15px;
}

h3{
	font-size:16px;
	margin-bottom: 15px;
	margin-top: 15px;
}


/*
========================================================================
							各ボックス
========================================================================
*/

/*まとまりは2つ以上あるときがある*/
.matomari{
	padding-bottom:20px;
}


.flex{
	display:flex;
}

#head_contents{
	width:100%;
	padding:0px;
	display:flex;
	flex-wrap:wrap;
}



#head_contents .contents{

	flex-shrink:0;
	flex-basis:100%;
	flex:1;
}

.NextPrev{
/*	min-width:350px;*/
	padding:10px;
	width:100%;
}

.NextPrev .small{
	font-size: 65%;
	font-weight: normal;
	display: flex;
	justify-content: center;
	align-items: center;
}

.NextPrev li {
  border-radius: 5px;
  padding: 4px;
  margin-right: 5px;
}

/*リストタグ特有のインデントを除去*/
.NextPrev ul{
	margin:0;
}
/*
これがあるとchromeでずれる
.koukoku{
	min-width:350px;
	text-align:center;
	
}
*/
/*右下固定ボタン*/
#fixed_button{
    position: fixed;
    bottom:25px;
    right:25px;
    width:50px;
    height:50px;
    border-radius:25px;
    background-color: #26aee3cf;
    display: flex;
    flex-direction: column; /* 子要素をflexboxにより縦方向に揃える */
    justify-content: center; /* 子要素をflexboxにより中央に配置する */
    align-items: center;  /* 子要素をflexboxにより中央に配置する */
    color:white;
    font-size: 25px;
    cursor:pointer;
    z-index: 2;
}

/*
========================================================================
							メインブロック
========================================================================
*/


/*中央の本文が広がりすぎると読みにくいため設定する*/
#center{
	max-width:830px;
}

/*
------------------------------------------------------------------------
									A
------------------------------------------------------------------------
*/

#contents_A{
	padding:10px;
}

/*
画像キャプション内の改行タグ
(floatからflexに移行したら不要になる)
*/
.cap br{
	clear:left;
}

/*新形式の画像用。十分大きな画像を用意しておいて小さく表示するためのもの*/
.size320{
/*
	max-width:320px;
	max-height:320px;
*/
	width:320px;
	max-width:100%;
	height:auto;
}

.size400{
/*
	max-width:400px;
	max-height:400px;
*/
	width:400px;
	max-width:100%;
	height:auto;
}

.size520{
/*
	max-width:520px;
	max-height:520px;
*/
	width:520px;
	max-width:100%;
	height:auto;
}

.size640{
/*
	max-width:640px;
	max-height:640px;
*/
	width:640px;
	max-width:100%;
	height:auto;
}

.sizeMax{
	max-width:100%;
	max-height:100%;
}

/*
------------------------------------------------------------------------
									B
------------------------------------------------------------------------
*/

#contents_B{
/*
これがないと地獄を見る
早期にfloatの全廃が必要
*/
	clear:left;
}

/*
========================================================================
						リンクとリストボックス
========================================================================
*/

/*アンカータグの下線除去*/
a{
	text-decoration: none;
}

.number_in_cat{
	display:none;
}

.serial_No{
	display:none;
}

.dir > ul > .dir > ul{
	display:none;
}

.dir > .li_group > .dir > .li_group{
	display:none;
}

/*
//////////////////////////////////////////////////////

                contents_D(リンクバー)

//////////////////////////////////////////////////////
*/

#contents_D{
	/*必須*/
		min-width:210px;
		width:210px;
		padding:10px;
	}
	
/*3連の右上*/
.link_unit{
	margin-bottom:10px;
	padding: 10px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.link_unit ul{
    list-style: none;
    margin-left:auto;
    margin-right:auto;
    padding:10px;
}

/*3連の右下wikipediaと旅行記リンク*/

#contents_D .kanren_link{
	padding:10px;
	word-break:break-all;
	word-wrap:break-word;
	margin-bottom:10px;
}
	
.kanren_link a{
	cursor: pointer;
}
	


/*現在のページにはリンクのような文字列にしない*/
.CurrentPageLinkString{
	font-weight:bold;
	cursor:default !important;
}
/*
//////////////////////////////////////////////////////

                contents_F(アイコンバー)

//////////////////////////////////////////////////////
*/

.icon {
    margin-left: auto;
    margin-right: auto;
    margin-top:10px;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}    


.icon svg{
    width: 30px;
    height: 30px;
    margin: auto;
}

.menuIcon svg{
    width: 25px;
    height: 25px;
    margin: auto;
}

.icon .svg_cap{
    font-size:0.75em;
    border-radius:4px;
    text-align: center;
}

.icon .svg_cap2{
    font-size:0.9em;
}

/*本来のチェックボックスを隠す*/
.icon input[type=checkbox]{
    display: none;
}

/*疑似チェックボックス*/
.icon label:before{
    display: block;
    width:25px;
    height:25px;
    content:'';
    background-color: rgb(107, 200, 255);
    border: solid 2px #333;
    border-radius: 5px;
    margin-right: auto;
    margin-left: auto;
}

/*元からダークモードのページなので無効にするときの扱い*/
/*テキストオブジェクトがないのでnoTextできないとき*/
.icon .checkBoxForDisabled::before{
    content: '\2713';
    font-size: 25px;
    background-color:gray;
    cursor: default;
}

/*テキストオブジェクトがないのでnoTextできないとき*/
.icon .checkBoxForDisabled2::before{
    content: '';
    font-size: 25px;
    background-color:gray;
    cursor: default;
}


/*閲覧者が有効にするときの扱い*/
.chk_box:checked + label:before {
    content: '\2713';       /* チェックの文字content CSS */
    font-size: 25px;            /* チェックのサイズ */
    color: rgb(202, 202, 202);            /* チェックの色 */
    background-color: #06f;         /* チェックした時の色 */
}

/* ラベル*/
.icon label {
    font-size: 0.75em;
    display: block;
    cursor: pointer;
    text-align: center;
    flex:1;
}

/*
========================================================================
							画像関連
========================================================================
*/
.img_box3{
	width:100%;
	margin-top: 10px;
	margin-bottom: 10px;
	font-size:small;
	display: flex;
	-ms-flex-align: start;
	align-items: flex-start;
	flex-wrap: wrap;
}

/*
.n_img3{
	flex-shrink: 0;
}
*/

.cap3{
	padding: 5px;
	flex:1;
	min-width:80px;
}

[data-filter="monochrome_blur"]{
	filter: grayscale(100%) blur(4px);
	cursor: pointer;
}

/*
========================================================================
							本文
========================================================================
*/

.text{
	padding: 10px;
	margin-top: 10px;
	margin-bottom: 10px;
}

.text_n{
	margin-bottom:30px
}


/*文字列装飾*/

/*事実上h1タイトルのダッシュ付きサブタイトルに対するスタイルとなっている*/
.small{
	font-size:65%;
	font-weight:normal
}

.large{
	font-size:larger
}


/*
------------------------------------------------------------------------
								フッター
------------------------------------------------------------------------
*/
#contents_bottom{
	clear:both;
}