@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Template:   cocoon-master
Version:    1.0.8
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
/* フレックスボックスの基本設定 等間隔（両端揃え）折返しあり */
[class^="flex-col"] {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

/* コンテンツ下のマージン */
.flex-child {
	margin-bottom: 20px;
    font-size:1.5rem;
	font-weight: bold;
	text-align:  center;
	background: #f8e6e0;
}
.flex-child img { width: 100%; }

.flex-child-text {
	font-size:1.2rem;
	font-weight: bold;
	text-align:  center;
	line-height: 1.5;
}

/* 各カラム毎のコンテンツと疑似要素の横幅 */
.flex-col2 .flex-child { width: calc( (100% - 10px) / 2 ); }

.flex-col3::after,
.flex-col3 .flex-child { width: calc( (100% - 20px) / 3 ); }

.flex-col4::before,
.flex-col4::after,
.flex-col4 .flex-child { width: calc( (100% - 30px) / 4 ); }
	
/* 最終行は両端揃えにしない */
.flex-col3::after,
.flex-col4::before,
.flex-col4::after { content: ""; }

.flex-col4::before { order: 1; }

/* レスポンシブ対応 */

/* 991px以下で4列 → 3列 */
@media screen and (max-width: 991px) {
	.flex-col4::after,
	.flex-col4 .flex-child { width: calc( (100% - 20px) / 3 ); }
}

/* 767px以下で4列・3列 → 2列 */
@media screen and (max-width: 667px) {
	.flex-col3 .flex-child,	
	.flex-col4 .flex-child { width: calc( (100% - 10px) / 2 ); }
}

/* 575px以下で全て1列 */
@media screen and (max-width: 325px) {
	.flex-col2 .flex-child,
	.flex-col3 .flex-child,
	.flex-col4 .flex-child { width: 100%; }
}

#rec-img {
	width: auto;
	height: auto;
	align-self: flex-start;
}


/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1240px以下*/
@media screen and (max-width: 1240px){
  /*必要ならばここにコードを書く*/
}

/*1030px以下*/
@media screen and (max-width: 1030px){
  /*必要ならばここにコードを書く*/
}

/*768px以下*/
@media screen and (max-width: 768px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}

/************************************
** h2書式
************************************/
.article h2 {
    padding: 0;
	margin:0 0 0 0;
    background: none;
}
.article h2 {
    padding: 0.4em 0.5em;/*文字の上下 左右の余白*/
    color: #494949;/*文字色*/
    background: #f4f4f4;/*背景色*/
    border-left: solid 5px #7db4e6;/*左線*/
    border-bottom: solid 3px #d7d7d7;/*下線*/
	margin: 0px 0 0px 0;
}

#cth2 {
	margin: 1em 0px 1em 0px;
}

#enth2 {
	margin: 1em 0px 1em 0px;
}

#spah2 {
	margin: 1em 0px 1em 0px;
}

#logh2 {
	margin: 1em 0px 1em 0px;
}

/*#rech2 {
	margin: 1em 0px 1em 0px;
}*/

/************************************
** iframe書式
************************************/
iframe{width:100%;}
.autoHeight{
	width:100%;
}

/************************************
** エントリーカード書式
************************************/
.entry-card-wrap{font-size: 120%;}
.entry-card-title {font-weight: 800;}

/************************************
** ヘッダーナビ
************************************/
/*固定*/
/*
以下はグローバルナビカスタマイズで使用
*/
/*ナビを固定*/
.fixed {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 10000;
}
/*
これでカスタマイズ終了*/

.navi{
    display: flex;
    justify-content: space-between;
    width: 100%;
}
.navi.fixed{
    position: fixed;
    top: 0;
    z-index: 10000;
    opacity:0.9;
    padding:0px 0px 0px 0px;
}
/* PCグローバルナビメニュー */
#navi-in{ 
   z-index: 10000;
}
/* モバイルのグローバルナビ(メニュー)の設定 */
ul.mobile-footer-menu-buttons mobile-menu-buttons{
  z-index: 10000;
}
li.navi-menu-button menu-button {
	z-index: 10000;
}
#navi-footer-in > .menu-footer li {
  z-index: 10000;
}
#navi-footer-in > .menu-footer li:last-child {
  z-index: 10000;
}
#slide-in-sidebar {
  z-index: 10000;
}
.sidebar-menu-button menu-button {
  z-index: 10000;
}

.map{
	position: relative;
	z-index:5000;
}

ul.mobile-footer-menu-buttons mobile-menu-buttons{z-index:10000;}
li.navi-menu-button menu-button{z-index:10000;}
label#navi-menu-open{z-index:10000;}
label.menu-open menu-button-in{z-index:10000;}
#navi-menu-content{z-index:10000;}
div#navi-menu-content menu-content{z-index:10000;}
ul.menu-drawer{z-index:10000;}
ul.sub-menu{z-index:10000;}
li.sidebar-menu-button menu-button{z-index:10000;}
#sidebar-menu-content{z-index:10000;}
.sidebar-menu-content menu-content{z-index:10000;}
#slide-in-sidebar{z-index:10000;}
.sidebar nwa cf{z-index:10000;}
#slide-in-common_ad-2{z-index:10000;}
.widget widget-sidebar widget-sidebar-standard widget_common_ad{z-index:10000;}
.ad-area no-icon common-ad-widget ad-none ad-label-visible cf{z-index:10000;}
aside#slide-in-recent-comments-2{z-index:10000;}
aside.widget widget-sidebar widget-sidebar-standard widget_recent_comments{z-index:10000;}
aside#slide-in-custom_html-2{z-index:10000;}
aside.widget_text widget widget-sidebar widget-sidebar-standard widget_custom_html{z-index:10000;}
.textwidget custom-html-widget{z-index:10000;}

.leaflet-container leaflet-touch leaflet-retina leaflet-fade-anim leaflet-grab leaflet-touch-drag leaflet-touch-zoom{z-index:9999;}
.entry-content cf{z-index:9999;}

/************************************
** 複数改行
************************************/
.topMargin2 { margin-top: 4em; }
.topMargin3 { margin-top: 7em; }
.topMargin4 { margin-top: 10em; }


/************************************
** 絞り込み画面
************************************/
.openbtn{
	display: block;
	font-size: 80%;
	text-decoration: none;
	background: #f8e6e0;
	height:40px;
	width:80px;
	text-align: center;
	line-height: 40px;
	color: #848484;
}

#chbox{
	background: #f8e6e0;
	padding:20px 20px 0px 20px;
	opacity: 0;
	visibility: hidden;
    z-index: 100;
	position: absolute;
}
.select p{
	display:inline-block;
	background: #f8e6e0;
	font-size:80%;
	margin:0;
	padding:0;
}

.selectbtn{
	padding:5px;
	margin:10px 0px 0px 10px;
}

.openbtn:hover + #chbox{
	opacity: 1;
	visibility: visible;
}

#chbox:hover{
	opacity: 1;
	visibility: visible;
}

.mlist{
	font-size:80%;
}

#mselectbox{
	width:50%
}

#minput{
	width:50%
}

.selectbtwrap{
	margin:0px 0px 20px 0px;
}

/************************************
** ページネーション
************************************/
.pagination2 {
  margin: 24px 0;
  clear: both;
  text-align: center;
  display: inline-flex;
  justify-content: center;
  width: 100%;
}
.pagination2 .current2 {
	background-color: #eee;
	color: #333;
	height:30px;
	width:28px;
}
.pagination2 .prev::before {
  font-family: FontAwesome;
	content: "";
  padding-right: 4px;
  padding-right: 3px;
}
.pagination2 .next::before {
  font-family: FontAwesome;
	content: "";
  padding-right: 4px;
  padding-left: 3px;
}
.pagination2 a:hover {
  background-color: #b75e4c;
  transition: all 0.7s;
  color: #f0ffff;
}

.page-numbers2 {
	background-color: #c57d6e;
	height:30px;
	width:28px;
	color: #f0ffff;
	line-height: 30px;
	text-align: center;
	display: inline-flex;
	justify-content: center;
    text-decoration: none;
    display: inline-block;
/*  border: 1px solid #ccc;*/
  margin: 0 4px;
  border-radius: 4px;
}
.next page-numbers2{
	background-color: #de9c85;
	height:30px;
	width:28px;
	color: #f0ffff;
}
.prev page-numbers2{
	background-color: #de9c85;
	height:30px;
	width:28px;
	color: #f0ffff;
}

.page-numbers dots2 {
/*  opacity: 0.6;*/
  background-color: #f7f8f8;
}



/************************************
** 「次のページ」ページネーション
************************************/
.pagination-next-link2, .comment-btn2 {
  background-color: #f9f9f9;
  border: 1px solid #ccc;
  color: #333;
  display: block;
  font-size: 1.2em;
  text-decoration: none;
  width: 100%;
  text-align: center;
  padding: 10px;
  display: block;
}
.pagination-next-link2:hover, .comment-btn2:hover {
  background-color: #f5f8fa;
  transition: all 0.7s;
  color: #333;
}


/************************************
** データマップログマーク
************************************/
.marker-cluster-circle{
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #FF6600;
  border: 0;
}

.leaflet-marker-icon{
	border: 0 !important;
}

/************************************
** 楽天アフィリエイト広告
************************************/
.raku {
	background-color: #fff;
	border: none;
}

.raku table {
	background-color: #fff;
	border: none;
}

.raku table tr {
    background-color: #fff;
	border: none;
}

.raku table td {
    background-color: #fff;
	border: none;
}

/************************************
** 写真読み込み時のレイアウト崩れ防止

.entry-content img {
   width: 100%;
   height: auto;
   aspect-ratio: attr(width) / attr(height);
  }
************************************/

/************************************
** サイドバーボタン
************************************/
.line{
	bgcolor="#ffffff"
}

.line-img {

}

.button-img {
  max-width: 70%;
  width: 88px;
  height:31px;
}

/************************************
** サイドバーイメージ用
************************************/
#custom_html-2 img {
  width:100%;
}

/************************************
** マップコード
************************************/
.mc-img {
	/*width:80px;*/
	max-width: 10%;
	float: left;
}

.mc-p{
	color:#C0C0C0;
}

/************************************
** h2 GPSログ後のbrを消す
************************************/
.br br {
	display: none;
}

/************************************
** ログマップ関連
************************************/
/*ログマップ　上にマージン*/
#logmap{
	margin-top:20px;
}
/* トラック再生パネルの枠 */
.playroute {
	margin: 10px 0px 0px 0px;
	padding: 5px 10px;
	border: solid 1px steelblue;
	background-color: lightsteelblue;
	display: flex;
}
/* トラック再生パネルのボタン */
.playroute .playbuttons {
	margin: 0px 3px;
	padding: 0px 5px;
}
/* GPXファイルリンクの外枠 */
#loglink {
	margin: 0px;
	padding: 5px 10px;
}

/* CT解析表示部 */
#cttbl {
	width: 90%;
	margin-left: auto;
    margin-right: auto;
}
/* ログ解析表示部 */
#logtbl {
	width: 90%;
	margin-left: auto;
    margin-right: auto;
}
/* ログ解析のテーブル */
table {
	font-size: 16px;
	font-family: Arial, Helvetica, "メイリオ", "ヒラギノ角ゴPro W3", Osaka, sans-serif;
}
/* ログ解析の項目名 */
.itemname {
	width: 20%;
	padding: 3px;
	background-color: black;
	color: white;
	text-align: center;
}
/* ログ解析のデータ */
.itemvalue {
	width: 25%;
	padding: 3px;
	background-color: gainsboro;
	color: black;
	text-align: right;
}
.spstr {
	width: 25%;
	padding: 3px;
	background-color: gainsboro;
	color: black;
	text-align: left;
}


/*サイトロゴのフォント変更-文字白*/
.logo-header a span{
font-weight: bold;
font-size:36px;
text-shadow:2px 2px 0 #333333, -2px -2px 0 #333333,
              -2px 2px 0 #333333, 2px -2px 0 #333333,
              0px 2px 0 #333333,  0 -2px 0 #333333,
              -2px 0 0 #333333, 2px 0 0 #333333;
}

/*キャッチフレーズのフォント変更-文字黒*/
.tagline{
font-weight: bold;
text-shadow:1px 1px 0 #333333, -1px -1px 0 #333333,
              -1px 1px 0 #333333, 1px -1px 0 #333333,
              0px 1px 0 #333333,  0 -1px 0 #333333,
              -1px 0 0 #333333, 1px 0 0 #333333;
}