@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
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/

/************************************
** プロフィールのリンクアイコン
************************************/

/* リンクアイコンの基本設定 */
.author-box .sns-follow .sns-follow-buttons a.follow-button {
  font-size: 22px;
  width: 30px;
  height: 30px;
  margin-top: 4px;
  margin-right: 6px;
  color: #fff;
  border: none;
  border-radius: 5px;
  box-shadow: 0 0 5px 0 rgba(0,0,0,.1),0 3px 5px 0 rgba(0,0,0,.2);
}

/* リンクアイコンをセンタリングする */
.author-box .sns-follow-buttons a.follow-button span::before {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -55%);
}

/* リンクアイコンの背景色にSNSのブランドカラーを設定する */
.author-box .sns-follow-buttons a.twitter-button {
  background-color: #000 !important;
}
.author-box .sns-follow-buttons a.instagram-button {
  background-color: #405de6 !important;
}
.author-box .sns-follow-buttons a.youtube-button {
  background-color: #cd201f !important;
}
.author-box .sns-follow-buttons a.feedly-button {
  background-color: #6cc655 !important;
}
.author-box .sns-follow-buttons a.rss-button {
  background-color: #f26522 !important;
}

/************************************
** 固定ページの日付を非表示にする
************************************/

.post-3 .date-tags,
.post-133 .date-tags,
.post-145 .date-tags,
.post-1265 .date-tags {
  display: none;
}

/************************************
** reCAPTCHAのバッジを非表示にする
************************************/

.grecaptcha-badge { visibility: hidden; }

/************************************
** 縦書き表示
************************************/

.tategaki { writing-mode: vertical-rl;}

/************************************
** 独自のWebフォント
************************************/

/*DiaPro*/

@font-face {
  font-family: "DiaPro";
  src: url("https://hodo-lab.com/wp-content/uploads/2024/09/DiaPro-Regular.woff") format("woff"),
	  url("https://hodo-lab.com/wp-content/uploads/2024/09/DiaPro-Regular.woff2") format("woff2"),
	  url("https://hodo-lab.com/wp-content/uploads/2024/09/DiaPro-Regular.ttf") format("truetype"),
	  url("https://hodo-lab.com/wp-content/uploads/2024/09/DiaPro-Regular.otf") format("opentype"),
	  url("https://hodo-lab.com/wp-content/uploads/2024/09/DiaPro-Regular.eot") format("embedded-opentype"),
	  url("https://hodo-lab.com/wp-content/uploads/2024/09/DiaPro-Regular.svg") format("svg");
}

.diapro { font-family: "DiaPro"; }

.diapro b { /* 太い数字 */
	font-weight: normal;
	font-family: "DiaPro";
	font-feature-settings: "titl";
}

/*天浜線フォント*/

@font-face {
  font-family: "Tenhama";
  src: url("https://hodo-lab.com/wp-content/uploads/2024/09/TenhamasenFontVer3-Regular.woff") format("woff"),
	  url("https://hodo-lab.com/wp-content/uploads/2024/09/TenhamasenFontVer3-Regular.woff2") format("woff2"),
	  url("https://hodo-lab.com/wp-content/uploads/2024/09/TenhamasenFontVer3-Regular.ttf") format("truetype"),
	  url("https://hodo-lab.com/wp-content/uploads/2024/09/TenhamasenFontVer3-Regular.otf") format("opentype"),
	  url("https://hodo-lab.com/wp-content/uploads/2024/09/TenhamasenFontVer3-Regular.eot") format("embedded-opentype");
}

.tenhama { font-family: "Tenhama"; }

.tenhama b { /* 太い数字 */
	font-weight: normal;
	font-family: "Tenhama";
	font-feature-settings: "titl";
}

/************************************
** シンプルな時刻表
************************************/

html {
  font-size: 16px;
  font-size: 62.5%;
}

.train-table-scrollbar {
  overflow-x: auto;
}

.train-table-scrollbar .scrollbar-inner {
  height: 1px;
}

.train-table-block {
  overflow-x: auto;
  overflow-y: scroll;
  height: 800px;
}

.train-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  border-bottom: 1px solid #333;
}

.train-table tr th,
.train-table tr td {
  border: 1px solid #333;
  padding: 5px 5px;
  text-align: center;
}

.train-table tr th {
  background-color: #e9eff2;
  font-size: 1.1rem;
  vertical-align: middle;
  border-bottom: none;
}

.train-table tr td {
  background-color: #fff;
  width: 50px;
  font-size: 1.1rem;
  border-left: none;
  border-bottom: none;
}

.train-table .train-type {
  position: sticky;
  top: 0;
  min-height: 32px;
  z-index: 3;
}

.train-table .train-type > td {
  font-size: 1.1rem;
  padding: 5px;
  vertical-align: middle;
}

.train-table .train-name {
  position: sticky;
  top: 32px;
  min-height: 32px;
  z-index: 3;
}

.train-table .train-name > th,
.train-table .train-name td {
  border-bottom: 2px solid #333;
}

.train-table .train-name > td {
  font-size: 1.1rem;
  padding: 5px;
  vertical-align: top;
}

.train-table .train-name > td .train-name-text {
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
      writing-mode: vertical-rl;
      writing-mode: tb-rl;
  text-orientation: upright;
  margin: auto;
  display: block;
  white-space: nowrap;
}

.train-table .train-name > td .train-name-number {
  text-combine-upright: all;
}

.train-table .bound > td {
  font-size: 0.9rem;
}

.train-table .facility > td .facility-icon {
  margin-bottom: 5px;
  width: 2.8em;
  font-family: "DiaPro";
  font-size: 190%;
}

.train-table .operating-day > td {
  font-size: 1.1rem;
  padding: 5px;
  vertical-align: middle;
}

.train-table .operating-day > th,
.train-table .operating-day td {
  border-bottom: 1px solid #333;
}

.train-table .track-number > th,
.train-table .track-number td {
  border-bottom: 1px solid #333;
}

.train-table .station-bottom > th,
.train-table .station-bottom td {
  border-bottom: 1px solid #333;
}

.train-table .th01 {
  width: 70px;
  position: sticky;
  left: 0;
  border-right: none;
  z-index: 2;
}

.train-table .th02 {
  width: 30px;
  position: sticky;
  left: 70px;
  border-right: 3px double #333;
  z-index: 2;
}

/************************************
** 席番配置図
************************************/

/*角外をカット*/
.overflow-hidden table {
  overflow: hidden;
}

/*左側に運転台*/

.rounded-left.rounded-left table {
  border: 1px solid #333;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 40px 0 0 40px;
  overflow: hidden;
}

.rounded-left.rounded-left table tr th,
.rounded-left.rounded-left table tr td {
  border: 1px solid #333;
  text-align: center;
}

.rounded-left.rounded-left table tr th {
  border-bottom: none;
}

.rounded-left.rounded-left table tr td {
  border-left: none;
  border-bottom: none;
}

.rounded-left.rounded-left table tr:first-child td {
  border-top: none;
}

.rounded-left.rounded-left table tr td:last-child {
  border-right: none;
}

/*右側に運転台*/

.rounded-right.rounded-right table {
  border: 1px solid #333;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 0 40px 40px 0;
  overflow: hidden;
}

.rounded-right.rounded-right table tr th,
.rounded-right.rounded-right table tr td {
  border: 1px solid #333;
  text-align: center;
}

.rounded-right.rounded-right table tr th {
  border-bottom: none;
}

.rounded-right.rounded-right table tr td {
  border-left: none;
  border-bottom: none;
}

.rounded-right.rounded-right table tr:first-child td {
  border-top: none;
}

.rounded-right.rounded-right table tr td:last-child {
  border-right: none;
}


/************************************
** 必要ならばここにコードを書く
************************************/



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

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

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