@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

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

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

/* スマホでの大きさ */
/*google mapの地図を小さくする。heightを小さくする。 by officeup */
@media (max-width: 767px) {
    iframe {
        width: 100%;
        /* 横幅 */
        height: 500px;
        /* 縦幅 */
    }
}



/*---------------------------------
複数の固定ページの日付を非表示にする by officeup
--------------------------------*/
.post-35 .date-tags,
.post-37 .date-tags,
.post-39 .date-tags,
.post-175 .date-tags,
.post-419 .date-tags,
.post-183 .date-tags {
display: none;
}

/* テーブルの1列目をセル内改行をしないようにする */
.access-nowrap td:nth-of-type(1) { white-space: nowrap;}

/* テーブルの2列目を中央揃え */
.access-2center td:nth-of-type(2) { text-align:center;}
/* テーブルの2列目を中央揃えしてアイコン小 */
.access-2center2 td:nth-of-type(3) { text-align:center;font-size: 10px;}

/* テーブルの1列目文字を小 */
.access-1shou td:nth-of-type(1) { font-size: 12px;}

/* 幅を固定(一旦使用中止) */
.haba1 td:nth-of-type(1) { width:10%;}

.haba2 td:nth-of-type(2) { width:95px;}

.haba3 td:nth-of-type(3) { width:95px;}

.haba4 td:nth-of-type(4) { width:85px;}

.haba5 td:nth-of-type(5) { width:130px;}

.haba6 td:nth-of-type(6) { width:50px;}

.haba7 td:nth-of-type(7) { width:50px;}

.haba8 td:nth-of-type(8) { width:50px;}

/* 右寄せ */
.migi2 td:nth-of-type(2) { text-align:right;}

.migi3 td:nth-of-type(3) { text-align:right;}

.migi4 td:nth-of-type(4) { text-align:right;}


/* h2要素の個別指定 positionなどの先頭にスペース入れるとおかしくなるので注意(一旦オフ) */
.h-customOff {
  position: relative;
  padding: 0.5rem !important;
  text-align: center;
	background: initial !important;
	font-weight: initial !important;
}

.h-customOff:before {
  position: absolute;
  bottom: -10px;
  left: calc(50% - 30px);
  width: 60px;
  height: 1px;
  content: '';
  border-radius: 3px;
  background: #000;
}

/*---------------------------------
ブロックメニューの星アイコンを消す by officeup
--------------------------------*/
.box-menu-icon {
   display: none;
}

.box-menu {
   display: flex;
   flex-direction: column;
   justify-content: center;
   color: black;
}

.1oyacon {
	display: flex;
	width: 100px;
}



 /*テーブルの縦横交換ここから*/
.table-ex {	
    -ms-writing-mode : tb-lr;
    writing-mode : vertical-lr;
	width: 100%;
	 
		
}
.table-ex th {
	writing-mode:horizontal-tb;
	white-space:normal;
}
.table-ex td {
    writing-mode:horizontal-tb;	
	white-space:normal;
}
 /*テーブルの縦横交換ここまで*/

/*テーブル罫線の色(全体の設定。なんで今更2022!!怒り。いきなり黒になった対処)*/
table td,th {
    border: 1px solid #EEEEEE !important;   
 }

.navi-entry-cards.large-thumb a {
width: 25%;
}

/************************************
** おすすめ記事(top記事)横並び表示 
************************************/
.navi-entry-cards.large-thumb {
display: flex;
flex-wrap: wrap;
}

.navi-entry-cards.large-thumb a {
width: 50%;
}

/*テーブルの横スクロールのためのCSSはここから*/
/*これは旧。名前を使われてない「scroll-3」にリネーム*/
.scroll-3{
    overflow: auto;
    white-space:nowrap;
}
 /*テーブルの横スクロールのためのCSSはここまで*/

/*
★table press★
テーブルの横スクロールのためのCSSはここから↓
【重要】テーブルの幅が記事の幅を少し超えるようにすること。
(水平スクロールバーが表示されるようにする)
記事の幅に達しないと自動調節で1列目などの列幅が自動調整(恐らく広がる)されてしまう
*/
.scroll-1 {
  table-layout: fixed;
  width: 100%;
}

.scroll-1 td:first-of-type { /*最初の列の指定*/
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
  width: 100px;
  min-width: 100px;
  max-width: 100px;
}

.scroll-1 td:nth-child(2) {
  width: 85px;
  min-width: 85px;
  max-width: 85px;
}

.scroll-1 td:nth-child(3) {
  width: 80px;
  min-width: 80px;
  max-width: 80px;
}

.scroll-1 td:nth-child(4) {
  width: 95px;
  min-width: 95px;
  max-width: 95px;
}

.scroll-1 td:nth-child(5) {
  width: 95px;
  min-width: 95px;
  max-width: 95px;
}

.scroll-1 td:nth-child(6) {
  width: 80px;
  min-width: 80px;
  max-width: 80px;
}

.scroll-1 td:nth-child(7) {
  width: 70px;
  min-width: 80px;
  max-width: 80px;
}

.scroll-1 td:nth-child(8) {
  width: 120px;
  min-width: 120px;
  max-width: 120px;
}

.scroll-1 td:not(:first-of-type) {  /*2列目以降の列が水平方向にスクロールできるように*/
  white-space: nowrap;
  overflow: auto;
}
 /*テーブルの横スクロールのためのCSSはここまで*/


.tablepress-haba {
  width: 100%;
	max-width: 800px;
}


 
.scroll-x {
  table-layout: fixed;
  width: 100%;
}

.scroll-2 {
  table-layout: fixed;
  width: 100%;
}

.scroll-2 td:first-of-type { /*最初の列の指定*/
  width: 30px;
  min-width: 30px;
  max-width: 30px;
}

.scroll-2 td:nth-child(2) {
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
  width: 110px;
  min-width: 110px;
  max-width: 110px;
}

.scroll-2 td:not(:nth-child(2)) {  /*3列目以降の列が水平方向にスクロールできるように*/
  white-space: nowrap;
  overflow: auto;
}

.1retsuhaba td:nth-of-type(1) {
	width: 20%;
}

/* 山小屋記事の地図サイズ */
#mapcontainer {
    width: 100%;
    height: 600px;
    z-index: 0;
}

/* 山小屋地図現在位置ボタン */
#locate-btn {
  font-size: 15px;
  padding: 10px 20px;
  border-radius: 5px; /* 角を丸くする */
  border: none; /* ボタンの周囲に2pxの黒い実線を設定 */
  background-color: #4caf50; /* ボタンの初期背景色 */
  color: white; /* ボタンの文字色 */
  cursor: pointer; /* ホバー時にカーソルをポインターに */
  outline: none; /* フォーカス時のアウトラインを削除 */
}

#locate-btn:hover {
  background-color: #45a049; /* ホバー時の背景色 */
  color: white; /* ホバー時の文字色（必要に応じて変更） */
}

#locate-btn:focus {
  outline: 1px solid black; /* フォーカス時のアウトラインを設定 */
}



/* 天気のcss */
.table-OWT {
    width: 100%;
    border-collapse: collapse;
}
.table-OWT, .table-OWT th, .table-OWT td {
    border: 0px solid black;
}
.table-OWT th, .table-OWT td {
    text-align: center;
    padding: 10px;
    font-size: 18px; /* 文字サイズを設定 */
}
.table-OWT td img {
    display: block;
    margin: 0 auto;
    vertical-align: middle;
}
.section-title {
    margin-top: 20px;	
    font-size: 20px;
    text-align: center;
}

/* 地図のタイトルのcss */
.section-title-chizu {
    margin-top: 20px;	
    font-size: 20px;
    text-align: center;
}

/*youtubeのサイズ変更。cocoonはこれないとだめらしい*/
.video-container {
max-width: 100%;
margin: 0px auto;
}

/*経路情報用。横スクロール対応*/
.dk-table-wrapper {
    width: 100%;
    overflow-x: auto;
}

.dk-table-wrapper table {
    width: 100%;
    border-collapse: collapse;
}

.dk-table-wrapper th, .dk-table-wrapper td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
}

.dk-table-wrapper th {
    background-color1: #f2f2f2;
    font-weight: bold;
}

.dk-table-wrapper tr:nth-child(even) {
    background-color1: #f9f9f9;
}

.dk-table-wrapper th, .dk-table-wrapper td {
    white-space: nowrap; /* テーブルの内容を1行に収める */
}