@charset "UTF-8";
/*
 * setting font-weight
 */
/**
 * メディアクエリー 横幅 以下
 */
/**
 * メディアクエリー 横幅 以上
 */
/**
 * メディアクエリー 横幅 自由
 */
/**
 * メディアクエリー 横幅 中間
 */
/**
 * メディアクエリー 解像度
 */
/*
 * leffter-spacing
 */
/*
 * line-height
 */
/**
 * コンテナー
 */
/**
 * クリアフィックス
 */
/**
 * リストのリセット
 */
/**
 * テーブルのリセット
 * width:100%をデフォルトに -- 2017.06.08
 */
/**
 * ディーエルのリセット
 */
/**
 * retina-sprite のラッパー
 *
 * @param string $name 変数名
 */
/**
 * Retina 対応背景画像
 *
 * @param string $src    普通サイズの画像の URL
 * @param string $size   普通サイズの画像の横幅 ( 無い場合は contain となる )
 * @param string $repeat 繰り返し指定
 * @param string $x      X軸
 * @param string $y      Y軸
 * @param string $query  クリエーフラグ
 */
/**
 * クロスブラウザを考慮したフォントサイズ
 *
 * @param string $important 強制するか / しないか
 */
/*
 * AdobeBlank を使用した要素間のホワイトスペース除去
 *
 * @param string  $element ターゲット要素
 * @param boolean $root    $element をルート出力にするか / しないか
 */
/*
 * グリッド ( 親 )
 *
 * @param boolean $mode モードを指定
 * @param string  $x    X軸間隔指定
 * @param string  $y    Y軸間隔指定
 */
/**
 * グリッド ( 子 )
 *
 * @param string  $element ターゲット要素
 * @param boolean $root    $element をルート出力にするか
 * @param boolean $mode    モードを指定
 * @param string  $x       X軸間隔指定
 * @param string  $y       Y軸間隔指定
 */
/*
 * グリッド
 * _grid-wrap() と _grid-col() のラッパー関数
 *
 * @param string  $element ターゲット要素
 * @param boolean $root    $element をルート出力にするか
 * @param boolean $mode    モードを指定
 * @param string  $x       X軸間隔指定
 * @param string  $y       Y軸間隔指定
 */
/*
 * ホバー、フォーカス
 *
 * $element が無ければ指定要素そのものに適用される
 *
 * @param string $class   ルートのクラス
 * @param string $element ターゲット要素
 * @param string $parent  親 null | 親要素
 * @param string $support サポート null | js
 */
/*
 * ホバー（only）
 * フォーカスが聞いてほしくない場合がでてきたので追加 -- 2017.06.08
 *
 * $element が無ければ指定要素そのものに適用される
 *
 * @param string $class   ルートのクラス
 * @param string $element ターゲット要素
 * @param string $parent  親 null | 親要素
 * @param string $support サポート null | js
 */
/*
 * アクティブ
 *
 * $element が無ければ指定要素そのものに適用される
 *
 * @param string $element ターゲット要素
 * @param string $support サポート null | js
 */
/*
 * テキストリンク簡易動作
 *
 * none         なし
 * underline    下線
 * overline     上線
 * line-through 打ち消し線。
 * blink        点滅
 *
 * @param boolean $reverse   逆転 true = する （true の場合、 $static, $dynamic を無視して逆の動作をする）
 * @param string  $static    描画時 none | underline | overline | line-through | blink
 * @param string  $dynamic   アクション時 none | underline | overline | line-through | blink
 * @param string  $support   サポートするタイプ
 * @param boolean $important 強制
 */
/**
 * iOS における Vh 及び Vw のバグ解消
 *
 * VH and VW units can cause issues on iOS devices: http://caniuse.com/#feat=viewport-units
 *
 * To overcome this, create media queries that target the width, height, and orientation of iOS devices.
 * It isn't optimal, but there is really no other way to solve the problem. In this example, I am fixing
 * the height of element `.foo` —which is a full width and height cover image.
 *
 * iOS Resolution Quick Reference: http://www.iosres.com/
 */
/**
 * 最初と最後の要素のマージンの初期化
 */
/**
 * インラインブロック縦中央
 */
/**
 * linear-gradient を使った dotted を任意の間隔に
 *
 * http://12px.com/blog/2014/02/dotted/
 * http://qiita.com/shaggggy/items/b18bed850eeb665104ac
 */
/*
 * テキストの境界線
 * 16分割して滑らか感をだす
 * https://www.chatwork.com/#!rid29164628-1972186661
 */
/*
 * サイトユニーク
 */
/*
 * font-smoothing
 */
/**
 * フォントサイズ
 *
 * @param  string $size 要求するフォントサイズ
 * @param  string $unit 単位
 * @return string       rem と px の場合、単位付きの値。 em の場合は em 値に加工。
 */
/**
 * フォントサイズ 足し引き計算
 * _fs() のラッパー関数
 *
 * @param  string $size 要求するフォントサイズ
 * @param  string $unit 単位
 * @return string       rem と px の場合、単位付きの値。 em の場合は em 値に加工。
 */
/**
 * フォントサイズ em 計算
 *
 *  @param  string $av 求める値 ( 基本的に、単位必須 )
 *  @param  string $rv 参照値   ( 基本的に、単位必須 )
 *  @return string     計算済み em
 */
/**
 * ハーフ・リーディング ( half-leading ) 計算
 *
 *  @param  string  $line  行サイズ ( 単位なし )
 *  @param  string  $size  フォントサイズ ( 単位なし )
 *  @param  boolean $debug デバッグするしない
 *  @return string         ハーフ・リーディング
 */
/**
 * 行間計算 ( line-height )
 *
 * @param  string $line 行サイズ ( 単位必須 )
 * @param  string $size フォントサイズ ( 単位必須 )
 * @return string       行間
 */
/**
 * 重なり順
 *
 * @param  string $name 要素の配列名
 * @return string       重なり値
 */
/**
 * Round ( 四捨五入 )
 * _to-fixed のラッパー
 * http://terkel.jp/archives/2012/12/decimal-digits-and-rounding-sass-function/
 *
 * @param  string $number 計算する数字
 * @param  string $digits 小数点
 * @return string
 */
/**
 * Ceil ( 切り上げ )
 * _to-fixed のラッパー
 * http://terkel.jp/archives/2012/12/decimal-digits-and-rounding-sass-function/
 *
 * @param  string $number 計算する数字
 * @param  string $digits 小数点
 * @return string
 */
/**
 * Floor ( 切り捨て )
 * _to-fixed のラッパー
 * http://terkel.jp/archives/2012/12/decimal-digits-and-rounding-sass-function/
 *
 * @param  string $number 計算する数字
 * @param  string $digits 小数点
 * @return string
 */
/**
 * Round, Ceil, Floor より呼び出される
 * http://terkel.jp/archives/2012/12/decimal-digits-and-rounding-sass-function/
 *
 * @param  string $number 計算する数字
 * @param  string $digits 小数点
 * @param  string $round  計算方法
 * @return string
 */
/**
 * Helper function for str-to-num fn.
 * Source: http://sassmeister.com/gist/9647408
 */
/**
 * Helper function for linear/radial-gradient-parsers.
 * Source: http://sassmeister.com/gist/9647408
 */
/*
 * cubic-bezier
 * http://www.knockknock.jp/archives/184
 *
 * @param  string $mode モード
 * @return string
 */
/*
 * テキストの境界線
 * 16分割して滑らか感をだす
 * https://www.chatwork.com/#!rid29164628-1972186661
 */
/*
 * AdobeBlank
 * 空白のフォントを読み込む
 * woffをAndroid4.3以下が対応していないためttfも用意
 */
@font-face {
  font-family: "AdobeBlank";
  src: url("data:application/font-woff;base64,d09GRk9UVE8AAATUAAkAAAAACkAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABDRkYgAAAA4AAAAOcAAAEhIl9jq09TLzIAAAHIAAAARQAAAGBRQK3+Y21hcAAAAhAAAAAmAAAALAAMAFNoZWFkAAACOAAAADAAAAA2BZfPvmhoZWEAAAJoAAAAGgAAACQHWf+LaG10eAAAAoQAAAAIAAAACAPoAYhtYXhwAAACjAAAAAYAAAAGAAJQAG5hbWUAAAKUAAACKwAAB2b3USAEcG9zdAAABMAAAAATAAAAIP+4ADJ42mNkYGFmYGRkFHRMyU9KdcpJzMvWLS5ITE4FCZr8kP4h080j183D+EOW8Ycc0w955h8SLN2/eX7V/GJh7eVRkmF4xS/DyCcow/CeR1WG4TuPCgMbEwMjAxsDH0M4QzpDOUM72GDPlNS8ksySSuf8gsqizPSMEgUFIwNDYx0QaaoAVqIQXFlckppbrOCZl5xfVJBflFiSmqKgkVFSUmClr19eXq6XCFKml5yfq6+ph+5cQnwGBpCzGJhBBJjNyMj1Q4FHbYoMI6tQD4/grxqRHx2iDEwsQFlGsAoGBla+Px18AK/lT1cAeNpjYGZ+wTiBgZWBgamLKYKBgcEbQjPGMRgx3GFABYzIHEcXJ38GBwYFBgXmgv8dDAzMBQwVCfqM/5GUKDAwAAArbQs0AAAAeNpjYGBgZGAGYgYGHgYWBgUgzQKEIL7C//8Q8v9DMJ8BAEreBlwAAHjaY2BkYGAA4vc75S7F89t8ZWBmfgEUYbjo4/oZQf/vYH7BXADkMjMwgUQBcKYMvHjaY2BkYGAu+N/BAAXMLxgYGVABEwBNCALqAAAD6AGIAAAAAAAAUAAAAgAAeNrtkz9r20AYxp+zpZhSCEnpBzgolKQk5/8m2FOSJckUYgi0U2VZtlzbkpAVG2+dSukYQj5Bh36A0KFzpw6dOvXLpI/k1ynNYkq3UB8n/+798zx3JwTgufoOhcXvmHPBChtcLTiHAl4K5xl/LWyRI2EbTbwVXmP8i3CB/I2s8DjT/ylMffVMmPqqKkx91RSmvjoRpr56JUx9dSVMffVR+An5JuXbWzwlf6Wash7R91L9EFbQuZ5wDuu5d8J5xq+ELfKNsI0kt+xdg84fCRfIvvAG+b3wJtbznzLeTH3zn4Xpax0J09fyhelrTYXpa10L09da9tLXfiFMX/tEmL72G2H62h8Ow2geD/p+onWlVK7upM+63u+GHU+355PEG0/0ceCGcRTGTuJ19ZafJFGzWJzNZsZJy4wbjovbJms5GDnBcHcSOa535vUvRk58P3x/fe7Fk0EY6LIp1eqt07aAHyZuGEzTldmrtMbO0AuTnhkNOhVTN41qrdRYpfxwT7ZqjUOE/MrmiDFAHz4SaI4KSiijip07rpP20WV1Bx65zZ4Jqz2M+a/57QVwmY2plj6dLNdlZitTTRhvosgxy4ZhxVLNZJ1j5rbJv10OMGJVgCF26RGRXUbPOPu4yHLxyupV+XPOmOsBqwLutswdlFDjeVs45Sn/jPisSrLdBpje5Qz2eEstnsChupfV9BgdUbXDjGGvQYP3WWN145/3/Hc39P8NP/A3/AvEJ2JBAHjaY2BmAIP/WxmMGLAAACzCAeoA") format("woff"), url("data:application/font-ttf;base64,AAEAAAALAIAAAwAwT1MvMlFArj8AAAFYAAAAYGNtYXAAtAAcAAAHtAAAADRnYXNwAAcABwAAB6gAAAAMZ2x5ZiWrBswAAAgEAAAAHGhlYWQFrTXWAAAAvAAAADZoaGVhB14E+AAAAPQAAAAkaG10eAPoAYgAAAf4AAAADGxvY2EAAABUAAAH6AAAABBtYXhwCBgABgAAARgAAAAgbmFtZd+DekQAAAG4AAAF7nBvc3T/nwAyAAABOAAAACAAAQAAAAEAAF6NK1NfDzz1AAED6AAAAADRTEXzAAAAANFMrCIBkgECAm4B3gAAAAMAAgABAAAAAAABAAADcP+IAAAD6AGIAYQCZAABAAAAAAAAAAAAAAAAAAAAAwABAAAAAwAEAAEAAAAAAAIABAAAAA8AAAgAAAAAAAAAAAMAAAAAAAD/nAAyAAAAAAAAAAAAAAAAAAAAAAAAAAAAAwPoAZAABQAAAooCWAAAAEsCigJYAAABXgAyANwAAAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAQURCTwBAACAAYQNw/4gAAANwAHhgLwH/AAAAAAAAAAAAAAAgAAAAAAAgAYYAAQAAAAAAAABJAAAAAQAAAAAAAQAKAEkAAQAAAAAAAgAHAFMAAQAAAAAAAwAKAFoAAQAAAAAABAAKAGQAAQAAAAAABQA6AG4AAQAAAAAABgAKAKgAAQAAAAAABwAKALIAAQABAAsAAABJALwAAQABAAsAAQAKAQUAAQABAAsAAgAHAQ8AAQABAAsAAwAKARYAAQABAAsABAAKASAAAQABAAsABQA6ASoAAQABAAsABgAKAWQAAQABAAsABwAKAW4AAwABBAkAAACSAXgAAwABBAkAAQAUAgoAAwABBAkAAgAOAh4AAwABBAkAAwAUAiwAAwABBAkABAAUAkAAAwABBAkABQB0AlQAAwABBAkABgAUAsgAAwABBAkABwAUAtwAAwABBBEAAACSAvAAAwABBBEAAQAUA4IAAwABBBEAAgAOA5YAAwABBBEAAwAUA6QAAwABBBEABAAUA7gAAwABBBEABQB0A8wAAwABBBEABgAUBEAAAwABBBEABwAUBFRDb3B5cmlnaHQgIDIwMTMsIDIwMTUgQWRvYmUgU3lzdGVtcyBJbmNvcnBvcmF0ZWQgKGh0dHA6Ly93d3cuYWRvYmUuY29tLykuQWRvYmVCbGFua1JlZ3VsYXJBZG9iZUJsYW5rQWRvYmVCbGFua1ZlcnNpb24gMS4wNDU7UFMgMS4wNDU7aG90Y29udiAxLjAuODI7bWFrZW90Zi5saWIyLjUuNjM0MDZBZG9iZUJsYW5rQWRvYmVCbGFua0NvcHlyaWdodCAgMjAxMywgMjAxNSBBZG9iZSBTeXN0ZW1zIEluY29ycG9yYXRlZCAoaHR0cDovL3d3dy5hZG9iZS5jb20vKS5BZG9iZUJsYW5rUmVndWxhckFkb2JlQmxhbmtBZG9iZUJsYW5rVmVyc2lvbiAxLjA0NTtQUyAxLjA0NTtob3Rjb252IDEuMC44MjttYWtlb3RmLmxpYjIuNS42MzQwNkFkb2JlQmxhbmtBZG9iZUJsYW5rAEMAbwBwAHkAcgBpAGcAaAB0ACAAIAAyADAAMQAzACwAIAAyADAAMQA1ACAAQQBkAG8AYgBlACAAUwB5AHMAdABlAG0AcwAgAEkAbgBjAG8AcgBwAG8AcgBhAHQAZQBkACAAKABoAHQAdABwADoALwAvAHcAdwB3AC4AYQBkAG8AYgBlAC4AYwBvAG0ALwApAC4AQQBkAG8AYgBlAEIAbABhAG4AawBSAGUAZwB1AGwAYQByAEEAZABvAGIAZQBCAGwAYQBuAGsAQQBkAG8AYgBlAEIAbABhAG4AawBWAGUAcgBzAGkAbwBuACAAMQAuADAANAA1ADsAUABTACAAMQAuADAANAA1ADsAaABvAHQAYwBvAG4AdgAgADEALgAwAC4AOAAyADsAbQBhAGsAZQBvAHQAZgAuAGwAaQBiADIALgA1AC4ANgAzADQAMAA2AEEAZABvAGIAZQBCAGwAYQBuAGsAQQBkAG8AYgBlAEIAbABhAG4AawBDAG8AcAB5AHIAaQBnAGgAdAAgACAAMgAwADEAMwAsACAAMgAwADEANQAgAEEAZABvAGIAZQAgAFMAeQBzAHQAZQBtAHMAIABJAG4AYwBvAHIAcABvAHIAYQB0AGUAZAAgACgAaAB0AHQAcAA6AC8ALwB3AHcAdwAuAGEAZABvAGIAZQAuAGMAbwBtAC8AKQAuAEEAZABvAGIAZQBCAGwAYQBuAGsAUgBlAGcAdQBsAGEAcgBBAGQAbwBiAGUAQgBsAGEAbgBrAEEAZABvAGIAZQBCAGwAYQBuAGsAVgBlAHIAcwBpAG8AbgAgADEALgAwADQANQA7AFAAUwAgADEALgAwADQANQA7AGgAbwB0AGMAbwBuAHYAIAAxAC4AMAAuADgAMgA7AG0AYQBrAGUAbwB0AGYALgBsAGkAYgAyAC4ANQAuADYAMwA0ADAANgBBAGQAbwBiAGUAQgBsAGEAbgBrAEEAZABvAGIAZQBCAGwAYQBuAGsAAAAAAAIACAAC//8AAwAAAAEAAwABAAAADAAEACgAAAAGAAQAAQACACAAYf//AAAAIABh////4f+hAAEAAAAAAAAAAAAAAAAAHAAAABwAAAAcA+gBiAAAAAAAAAAAAAEBkgECAm4B3gADAAABESERAZIA3AECANz/JA==") format("truetype");
}

/*!
 *  Font Awesome 4.7.0 by @davegandy - http://fontawesome.io - @fontawesome
 *  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
 */
/* FONT PATH
 * -------------------------- */
.fa {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* makes the font 33% larger relative to the icon container */
.fa-lg {
  font-size: 1.33333333em;
  line-height: 0.75em;
  vertical-align: -15%;
}

.fa-2x {
  font-size: 2em;
}

.fa-3x {
  font-size: 3em;
}

.fa-4x {
  font-size: 4em;
}

.fa-5x {
  font-size: 5em;
}

.fa-fw {
  width: 1.28571429em;
  text-align: center;
}

.fa-ul {
  padding-left: 0;
  margin-left: 2.14285714em;
  list-style-type: none;
}

.fa-ul > li {
  position: relative;
}

.fa-li {
  position: absolute;
  left: -2.14285714em;
  width: 2.14285714em;
  top: 0.14285714em;
  text-align: center;
}

.fa-li.fa-lg {
  left: -1.85714286em;
}

.fa-border {
  padding: .2em .25em .15em;
  border: solid 0.08em #eeeeee;
  border-radius: .1em;
}

.fa-pull-left {
  float: left;
}

.fa-pull-right {
  float: right;
}

.fa.fa-pull-left {
  margin-right: .3em;
}

.fa.fa-pull-right {
  margin-left: .3em;
}

/* Deprecated as of 4.4.0 */
.pull-right {
  float: right;
}

.pull-left {
  float: left;
}

.fa.pull-left {
  margin-right: .3em;
}

.fa.pull-right {
  margin-left: .3em;
}

.fa-spin {
  -webkit-animation: fa-spin 2s infinite linear;
  animation: fa-spin 2s infinite linear;
}

.fa-pulse {
  -webkit-animation: fa-spin 1s infinite steps(8);
  animation: fa-spin 1s infinite steps(8);
}

@-webkit-keyframes fa-spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}

@keyframes fa-spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}

.fa-rotate-90 {
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}

.fa-rotate-180 {
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2)";
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}

.fa-rotate-270 {
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";
  -webkit-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  transform: rotate(270deg);
}

.fa-flip-horizontal {
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)";
  -webkit-transform: scale(-1, 1);
  -ms-transform: scale(-1, 1);
  transform: scale(-1, 1);
}

.fa-flip-vertical {
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)";
  -webkit-transform: scale(1, -1);
  -ms-transform: scale(1, -1);
  transform: scale(1, -1);
}

:root .fa-rotate-90,
:root .fa-rotate-180,
:root .fa-rotate-270,
:root .fa-flip-horizontal,
:root .fa-flip-vertical {
  -webkit-filter: none;
          filter: none;
}

.fa-stack {
  position: relative;
  display: inline-block;
  width: 2em;
  height: 2em;
  line-height: 2em;
  vertical-align: middle;
}

.fa-stack-1x,
.fa-stack-2x {
  position: absolute;
  left: 0;
  width: 100%;
  text-align: center;
}

.fa-stack-1x {
  line-height: inherit;
}

.fa-stack-2x {
  font-size: 2em;
}

.fa-inverse {
  color: #ffffff;
}

/* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
   readers do not read off random characters that represent icons */
.fa-glass:before {
  content: "\f000";
}

.fa-music:before {
  content: "\f001";
}

.fa-search:before {
  content: "\f002";
}

.fa-envelope-o:before {
  content: "\f003";
}

.fa-heart:before {
  content: "\f004";
}

.fa-star:before {
  content: "\f005";
}

.fa-star-o:before {
  content: "\f006";
}

.fa-user:before {
  content: "\f007";
}

.fa-film:before {
  content: "\f008";
}

.fa-th-large:before {
  content: "\f009";
}

.fa-th:before {
  content: "\f00a";
}

.fa-th-list:before {
  content: "\f00b";
}

.fa-check:before {
  content: "\f00c";
}

.fa-remove:before,
.fa-close:before,
.fa-times:before {
  content: "\f00d";
}

.fa-search-plus:before {
  content: "\f00e";
}

.fa-search-minus:before {
  content: "\f010";
}

.fa-power-off:before {
  content: "\f011";
}

.fa-signal:before {
  content: "\f012";
}

.fa-gear:before,
.fa-cog:before {
  content: "\f013";
}

.fa-trash-o:before {
  content: "\f014";
}

.fa-home:before {
  content: "\f015";
}

.fa-file-o:before {
  content: "\f016";
}

.fa-clock-o:before {
  content: "\f017";
}

.fa-road:before {
  content: "\f018";
}

.fa-download:before {
  content: "\f019";
}

.fa-arrow-circle-o-down:before {
  content: "\f01a";
}

.fa-arrow-circle-o-up:before {
  content: "\f01b";
}

.fa-inbox:before {
  content: "\f01c";
}

.fa-play-circle-o:before {
  content: "\f01d";
}

.fa-rotate-right:before,
.fa-repeat:before {
  content: "\f01e";
}

.fa-refresh:before {
  content: "\f021";
}

.fa-list-alt:before {
  content: "\f022";
}

.fa-lock:before {
  content: "\f023";
}

.fa-flag:before {
  content: "\f024";
}

.fa-headphones:before {
  content: "\f025";
}

.fa-volume-off:before {
  content: "\f026";
}

.fa-volume-down:before {
  content: "\f027";
}

.fa-volume-up:before {
  content: "\f028";
}

.fa-qrcode:before {
  content: "\f029";
}

.fa-barcode:before {
  content: "\f02a";
}

.fa-tag:before {
  content: "\f02b";
}

.fa-tags:before {
  content: "\f02c";
}

.fa-book:before {
  content: "\f02d";
}

.fa-bookmark:before {
  content: "\f02e";
}

.fa-print:before {
  content: "\f02f";
}

.fa-camera:before {
  content: "\f030";
}

.fa-font:before {
  content: "\f031";
}

.fa-bold:before {
  content: "\f032";
}

.fa-italic:before {
  content: "\f033";
}

.fa-text-height:before {
  content: "\f034";
}

.fa-text-width:before {
  content: "\f035";
}

.fa-align-left:before {
  content: "\f036";
}

.fa-align-center:before {
  content: "\f037";
}

.fa-align-right:before {
  content: "\f038";
}

.fa-align-justify:before {
  content: "\f039";
}

.fa-list:before {
  content: "\f03a";
}

.fa-dedent:before,
.fa-outdent:before {
  content: "\f03b";
}

.fa-indent:before {
  content: "\f03c";
}

.fa-video-camera:before {
  content: "\f03d";
}

.fa-photo:before,
.fa-image:before,
.fa-picture-o:before {
  content: "\f03e";
}

.fa-pencil:before {
  content: "\f040";
}

.fa-map-marker:before {
  content: "\f041";
}

.fa-adjust:before {
  content: "\f042";
}

.fa-tint:before {
  content: "\f043";
}

.fa-edit:before,
.fa-pencil-square-o:before {
  content: "\f044";
}

.fa-share-square-o:before {
  content: "\f045";
}

.fa-check-square-o:before {
  content: "\f046";
}

.fa-arrows:before {
  content: "\f047";
}

.fa-step-backward:before {
  content: "\f048";
}

.fa-fast-backward:before {
  content: "\f049";
}

.fa-backward:before {
  content: "\f04a";
}

.fa-play:before {
  content: "\f04b";
}

.fa-pause:before {
  content: "\f04c";
}

.fa-stop:before {
  content: "\f04d";
}

.fa-forward:before {
  content: "\f04e";
}

.fa-fast-forward:before {
  content: "\f050";
}

.fa-step-forward:before {
  content: "\f051";
}

.fa-eject:before {
  content: "\f052";
}

.fa-chevron-left:before {
  content: "\f053";
}

.fa-chevron-right:before {
  content: "\f054";
}

.fa-plus-circle:before {
  content: "\f055";
}

.fa-minus-circle:before {
  content: "\f056";
}

.fa-times-circle:before {
  content: "\f057";
}

.fa-check-circle:before {
  content: "\f058";
}

.fa-question-circle:before {
  content: "\f059";
}

.fa-info-circle:before {
  content: "\f05a";
}

.fa-crosshairs:before {
  content: "\f05b";
}

.fa-times-circle-o:before {
  content: "\f05c";
}

.fa-check-circle-o:before {
  content: "\f05d";
}

.fa-ban:before {
  content: "\f05e";
}

.fa-arrow-left:before {
  content: "\f060";
}

.fa-arrow-right:before {
  content: "\f061";
}

.fa-arrow-up:before {
  content: "\f062";
}

.fa-arrow-down:before {
  content: "\f063";
}

.fa-mail-forward:before,
.fa-share:before {
  content: "\f064";
}

.fa-expand:before {
  content: "\f065";
}

.fa-compress:before {
  content: "\f066";
}

.fa-plus:before {
  content: "\f067";
}

.fa-minus:before {
  content: "\f068";
}

.fa-asterisk:before {
  content: "\f069";
}

.fa-exclamation-circle:before {
  content: "\f06a";
}

.fa-gift:before {
  content: "\f06b";
}

.fa-leaf:before {
  content: "\f06c";
}

.fa-fire:before {
  content: "\f06d";
}

.fa-eye:before {
  content: "\f06e";
}

.fa-eye-slash:before {
  content: "\f070";
}

.fa-warning:before,
.fa-exclamation-triangle:before {
  content: "\f071";
}

.fa-plane:before {
  content: "\f072";
}

.fa-calendar:before {
  content: "\f073";
}

.fa-random:before {
  content: "\f074";
}

.fa-comment:before {
  content: "\f075";
}

.fa-magnet:before {
  content: "\f076";
}

.fa-chevron-up:before {
  content: "\f077";
}

.fa-chevron-down:before {
  content: "\f078";
}

.fa-retweet:before {
  content: "\f079";
}

.fa-shopping-cart:before {
  content: "\f07a";
}

.fa-folder:before {
  content: "\f07b";
}

.fa-folder-open:before {
  content: "\f07c";
}

.fa-arrows-v:before {
  content: "\f07d";
}

.fa-arrows-h:before {
  content: "\f07e";
}

.fa-bar-chart-o:before,
.fa-bar-chart:before {
  content: "\f080";
}

.fa-twitter-square:before {
  content: "\f081";
}

.fa-facebook-square:before {
  content: "\f082";
}

.fa-camera-retro:before {
  content: "\f083";
}

.fa-key:before {
  content: "\f084";
}

.fa-gears:before,
.fa-cogs:before {
  content: "\f085";
}

.fa-comments:before {
  content: "\f086";
}

.fa-thumbs-o-up:before {
  content: "\f087";
}

.fa-thumbs-o-down:before {
  content: "\f088";
}

.fa-star-half:before {
  content: "\f089";
}

.fa-heart-o:before {
  content: "\f08a";
}

.fa-sign-out:before {
  content: "\f08b";
}

.fa-linkedin-square:before {
  content: "\f08c";
}

.fa-thumb-tack:before {
  content: "\f08d";
}

.fa-external-link:before {
  content: "\f08e";
}

.fa-sign-in:before {
  content: "\f090";
}

.fa-trophy:before {
  content: "\f091";
}

.fa-github-square:before {
  content: "\f092";
}

.fa-upload:before {
  content: "\f093";
}

.fa-lemon-o:before {
  content: "\f094";
}

.fa-phone:before {
  content: "\f095";
}

.fa-square-o:before {
  content: "\f096";
}

.fa-bookmark-o:before {
  content: "\f097";
}

.fa-phone-square:before {
  content: "\f098";
}

.fa-twitter:before {
  content: "\f099";
}

.fa-facebook-f:before,
.fa-facebook:before {
  content: "\f09a";
}

.fa-github:before {
  content: "\f09b";
}

.fa-unlock:before {
  content: "\f09c";
}

.fa-credit-card:before {
  content: "\f09d";
}

.fa-feed:before,
.fa-rss:before {
  content: "\f09e";
}

.fa-hdd-o:before {
  content: "\f0a0";
}

.fa-bullhorn:before {
  content: "\f0a1";
}

.fa-bell:before {
  content: "\f0f3";
}

.fa-certificate:before {
  content: "\f0a3";
}

.fa-hand-o-right:before {
  content: "\f0a4";
}

.fa-hand-o-left:before {
  content: "\f0a5";
}

.fa-hand-o-up:before {
  content: "\f0a6";
}

.fa-hand-o-down:before {
  content: "\f0a7";
}

.fa-arrow-circle-left:before {
  content: "\f0a8";
}

.fa-arrow-circle-right:before {
  content: "\f0a9";
}

.fa-arrow-circle-up:before {
  content: "\f0aa";
}

.fa-arrow-circle-down:before {
  content: "\f0ab";
}

.fa-globe:before {
  content: "\f0ac";
}

.fa-wrench:before {
  content: "\f0ad";
}

.fa-tasks:before {
  content: "\f0ae";
}

.fa-filter:before {
  content: "\f0b0";
}

.fa-briefcase:before {
  content: "\f0b1";
}

.fa-arrows-alt:before {
  content: "\f0b2";
}

.fa-group:before,
.fa-users:before {
  content: "\f0c0";
}

.fa-chain:before,
.fa-link:before {
  content: "\f0c1";
}

.fa-cloud:before {
  content: "\f0c2";
}

.fa-flask:before {
  content: "\f0c3";
}

.fa-cut:before,
.fa-scissors:before {
  content: "\f0c4";
}

.fa-copy:before,
.fa-files-o:before {
  content: "\f0c5";
}

.fa-paperclip:before {
  content: "\f0c6";
}

.fa-save:before,
.fa-floppy-o:before {
  content: "\f0c7";
}

.fa-square:before {
  content: "\f0c8";
}

.fa-navicon:before,
.fa-reorder:before,
.fa-bars:before {
  content: "\f0c9";
}

.fa-list-ul:before {
  content: "\f0ca";
}

.fa-list-ol:before {
  content: "\f0cb";
}

.fa-strikethrough:before {
  content: "\f0cc";
}

.fa-underline:before {
  content: "\f0cd";
}

.fa-table:before {
  content: "\f0ce";
}

.fa-magic:before {
  content: "\f0d0";
}

.fa-truck:before {
  content: "\f0d1";
}

.fa-pinterest:before {
  content: "\f0d2";
}

.fa-pinterest-square:before {
  content: "\f0d3";
}

.fa-google-plus-square:before {
  content: "\f0d4";
}

.fa-google-plus:before {
  content: "\f0d5";
}

.fa-money:before {
  content: "\f0d6";
}

.fa-caret-down:before {
  content: "\f0d7";
}

.fa-caret-up:before {
  content: "\f0d8";
}

.fa-caret-left:before {
  content: "\f0d9";
}

.fa-caret-right:before {
  content: "\f0da";
}

.fa-columns:before {
  content: "\f0db";
}

.fa-unsorted:before,
.fa-sort:before {
  content: "\f0dc";
}

.fa-sort-down:before,
.fa-sort-desc:before {
  content: "\f0dd";
}

.fa-sort-up:before,
.fa-sort-asc:before {
  content: "\f0de";
}

.fa-envelope:before {
  content: "\f0e0";
}

.fa-linkedin:before {
  content: "\f0e1";
}

.fa-rotate-left:before,
.fa-undo:before {
  content: "\f0e2";
}

.fa-legal:before,
.fa-gavel:before {
  content: "\f0e3";
}

.fa-dashboard:before,
.fa-tachometer:before {
  content: "\f0e4";
}

.fa-comment-o:before {
  content: "\f0e5";
}

.fa-comments-o:before {
  content: "\f0e6";
}

.fa-flash:before,
.fa-bolt:before {
  content: "\f0e7";
}

.fa-sitemap:before {
  content: "\f0e8";
}

.fa-umbrella:before {
  content: "\f0e9";
}

.fa-paste:before,
.fa-clipboard:before {
  content: "\f0ea";
}

.fa-lightbulb-o:before {
  content: "\f0eb";
}

.fa-exchange:before {
  content: "\f0ec";
}

.fa-cloud-download:before {
  content: "\f0ed";
}

.fa-cloud-upload:before {
  content: "\f0ee";
}

.fa-user-md:before {
  content: "\f0f0";
}

.fa-stethoscope:before {
  content: "\f0f1";
}

.fa-suitcase:before {
  content: "\f0f2";
}

.fa-bell-o:before {
  content: "\f0a2";
}

.fa-coffee:before {
  content: "\f0f4";
}

.fa-cutlery:before {
  content: "\f0f5";
}

.fa-file-text-o:before {
  content: "\f0f6";
}

.fa-building-o:before {
  content: "\f0f7";
}

.fa-hospital-o:before {
  content: "\f0f8";
}

.fa-ambulance:before {
  content: "\f0f9";
}

.fa-medkit:before {
  content: "\f0fa";
}

.fa-fighter-jet:before {
  content: "\f0fb";
}

.fa-beer:before {
  content: "\f0fc";
}

.fa-h-square:before {
  content: "\f0fd";
}

.fa-plus-square:before {
  content: "\f0fe";
}

.fa-angle-double-left:before {
  content: "\f100";
}

.fa-angle-double-right:before {
  content: "\f101";
}

.fa-angle-double-up:before {
  content: "\f102";
}

.fa-angle-double-down:before {
  content: "\f103";
}

.fa-angle-left:before {
  content: "\f104";
}

.fa-angle-right:before {
  content: "\f105";
}

.fa-angle-up:before {
  content: "\f106";
}

.fa-angle-down:before {
  content: "\f107";
}

.fa-desktop:before {
  content: "\f108";
}

.fa-laptop:before {
  content: "\f109";
}

.fa-tablet:before {
  content: "\f10a";
}

.fa-mobile-phone:before,
.fa-mobile:before {
  content: "\f10b";
}

.fa-circle-o:before {
  content: "\f10c";
}

.fa-quote-left:before {
  content: "\f10d";
}

.fa-quote-right:before {
  content: "\f10e";
}

.fa-spinner:before {
  content: "\f110";
}

.fa-circle:before {
  content: "\f111";
}

.fa-mail-reply:before,
.fa-reply:before {
  content: "\f112";
}

.fa-github-alt:before {
  content: "\f113";
}

.fa-folder-o:before {
  content: "\f114";
}

.fa-folder-open-o:before {
  content: "\f115";
}

.fa-smile-o:before {
  content: "\f118";
}

.fa-frown-o:before {
  content: "\f119";
}

.fa-meh-o:before {
  content: "\f11a";
}

.fa-gamepad:before {
  content: "\f11b";
}

.fa-keyboard-o:before {
  content: "\f11c";
}

.fa-flag-o:before {
  content: "\f11d";
}

.fa-flag-checkered:before {
  content: "\f11e";
}

.fa-terminal:before {
  content: "\f120";
}

.fa-code:before {
  content: "\f121";
}

.fa-mail-reply-all:before,
.fa-reply-all:before {
  content: "\f122";
}

.fa-star-half-empty:before,
.fa-star-half-full:before,
.fa-star-half-o:before {
  content: "\f123";
}

.fa-location-arrow:before {
  content: "\f124";
}

.fa-crop:before {
  content: "\f125";
}

.fa-code-fork:before {
  content: "\f126";
}

.fa-unlink:before,
.fa-chain-broken:before {
  content: "\f127";
}

.fa-question:before {
  content: "\f128";
}

.fa-info:before {
  content: "\f129";
}

.fa-exclamation:before {
  content: "\f12a";
}

.fa-superscript:before {
  content: "\f12b";
}

.fa-subscript:before {
  content: "\f12c";
}

.fa-eraser:before {
  content: "\f12d";
}

.fa-puzzle-piece:before {
  content: "\f12e";
}

.fa-microphone:before {
  content: "\f130";
}

.fa-microphone-slash:before {
  content: "\f131";
}

.fa-shield:before {
  content: "\f132";
}

.fa-calendar-o:before {
  content: "\f133";
}

.fa-fire-extinguisher:before {
  content: "\f134";
}

.fa-rocket:before {
  content: "\f135";
}

.fa-maxcdn:before {
  content: "\f136";
}

.fa-chevron-circle-left:before {
  content: "\f137";
}

.fa-chevron-circle-right:before {
  content: "\f138";
}

.fa-chevron-circle-up:before {
  content: "\f139";
}

.fa-chevron-circle-down:before {
  content: "\f13a";
}

.fa-html5:before {
  content: "\f13b";
}

.fa-css3:before {
  content: "\f13c";
}

.fa-anchor:before {
  content: "\f13d";
}

.fa-unlock-alt:before {
  content: "\f13e";
}

.fa-bullseye:before {
  content: "\f140";
}

.fa-ellipsis-h:before {
  content: "\f141";
}

.fa-ellipsis-v:before {
  content: "\f142";
}

.fa-rss-square:before {
  content: "\f143";
}

.fa-play-circle:before {
  content: "\f144";
}

.fa-ticket:before {
  content: "\f145";
}

.fa-minus-square:before {
  content: "\f146";
}

.fa-minus-square-o:before {
  content: "\f147";
}

.fa-level-up:before {
  content: "\f148";
}

.fa-level-down:before {
  content: "\f149";
}

.fa-check-square:before {
  content: "\f14a";
}

.fa-pencil-square:before {
  content: "\f14b";
}

.fa-external-link-square:before {
  content: "\f14c";
}

.fa-share-square:before {
  content: "\f14d";
}

.fa-compass:before {
  content: "\f14e";
}

.fa-toggle-down:before,
.fa-caret-square-o-down:before {
  content: "\f150";
}

.fa-toggle-up:before,
.fa-caret-square-o-up:before {
  content: "\f151";
}

.fa-toggle-right:before,
.fa-caret-square-o-right:before {
  content: "\f152";
}

.fa-euro:before,
.fa-eur:before {
  content: "\f153";
}

.fa-gbp:before {
  content: "\f154";
}

.fa-dollar:before,
.fa-usd:before {
  content: "\f155";
}

.fa-rupee:before,
.fa-inr:before {
  content: "\f156";
}

.fa-cny:before,
.fa-rmb:before,
.fa-yen:before,
.fa-jpy:before {
  content: "\f157";
}

.fa-ruble:before,
.fa-rouble:before,
.fa-rub:before {
  content: "\f158";
}

.fa-won:before,
.fa-krw:before {
  content: "\f159";
}

.fa-bitcoin:before,
.fa-btc:before {
  content: "\f15a";
}

.fa-file:before {
  content: "\f15b";
}

.fa-file-text:before {
  content: "\f15c";
}

.fa-sort-alpha-asc:before {
  content: "\f15d";
}

.fa-sort-alpha-desc:before {
  content: "\f15e";
}

.fa-sort-amount-asc:before {
  content: "\f160";
}

.fa-sort-amount-desc:before {
  content: "\f161";
}

.fa-sort-numeric-asc:before {
  content: "\f162";
}

.fa-sort-numeric-desc:before {
  content: "\f163";
}

.fa-thumbs-up:before {
  content: "\f164";
}

.fa-thumbs-down:before {
  content: "\f165";
}

.fa-youtube-square:before {
  content: "\f166";
}

.fa-youtube:before {
  content: "\f167";
}

.fa-xing:before {
  content: "\f168";
}

.fa-xing-square:before {
  content: "\f169";
}

.fa-youtube-play:before {
  content: "\f16a";
}

.fa-dropbox:before {
  content: "\f16b";
}

.fa-stack-overflow:before {
  content: "\f16c";
}

.fa-instagram:before {
  content: "\f16d";
}

.fa-flickr:before {
  content: "\f16e";
}

.fa-adn:before {
  content: "\f170";
}

.fa-bitbucket:before {
  content: "\f171";
}

.fa-bitbucket-square:before {
  content: "\f172";
}

.fa-tumblr:before {
  content: "\f173";
}

.fa-tumblr-square:before {
  content: "\f174";
}

.fa-long-arrow-down:before {
  content: "\f175";
}

.fa-long-arrow-up:before {
  content: "\f176";
}

.fa-long-arrow-left:before {
  content: "\f177";
}

.fa-long-arrow-right:before {
  content: "\f178";
}

.fa-apple:before {
  content: "\f179";
}

.fa-windows:before {
  content: "\f17a";
}

.fa-android:before {
  content: "\f17b";
}

.fa-linux:before {
  content: "\f17c";
}

.fa-dribbble:before {
  content: "\f17d";
}

.fa-skype:before {
  content: "\f17e";
}

.fa-foursquare:before {
  content: "\f180";
}

.fa-trello:before {
  content: "\f181";
}

.fa-female:before {
  content: "\f182";
}

.fa-male:before {
  content: "\f183";
}

.fa-gittip:before,
.fa-gratipay:before {
  content: "\f184";
}

.fa-sun-o:before {
  content: "\f185";
}

.fa-moon-o:before {
  content: "\f186";
}

.fa-archive:before {
  content: "\f187";
}

.fa-bug:before {
  content: "\f188";
}

.fa-vk:before {
  content: "\f189";
}

.fa-weibo:before {
  content: "\f18a";
}

.fa-renren:before {
  content: "\f18b";
}

.fa-pagelines:before {
  content: "\f18c";
}

.fa-stack-exchange:before {
  content: "\f18d";
}

.fa-arrow-circle-o-right:before {
  content: "\f18e";
}

.fa-arrow-circle-o-left:before {
  content: "\f190";
}

.fa-toggle-left:before,
.fa-caret-square-o-left:before {
  content: "\f191";
}

.fa-dot-circle-o:before {
  content: "\f192";
}

.fa-wheelchair:before {
  content: "\f193";
}

.fa-vimeo-square:before {
  content: "\f194";
}

.fa-turkish-lira:before,
.fa-try:before {
  content: "\f195";
}

.fa-plus-square-o:before {
  content: "\f196";
}

.fa-space-shuttle:before {
  content: "\f197";
}

.fa-slack:before {
  content: "\f198";
}

.fa-envelope-square:before {
  content: "\f199";
}

.fa-wordpress:before {
  content: "\f19a";
}

.fa-openid:before {
  content: "\f19b";
}

.fa-institution:before,
.fa-bank:before,
.fa-university:before {
  content: "\f19c";
}

.fa-mortar-board:before,
.fa-graduation-cap:before {
  content: "\f19d";
}

.fa-yahoo:before {
  content: "\f19e";
}

.fa-google:before {
  content: "\f1a0";
}

.fa-reddit:before {
  content: "\f1a1";
}

.fa-reddit-square:before {
  content: "\f1a2";
}

.fa-stumbleupon-circle:before {
  content: "\f1a3";
}

.fa-stumbleupon:before {
  content: "\f1a4";
}

.fa-delicious:before {
  content: "\f1a5";
}

.fa-digg:before {
  content: "\f1a6";
}

.fa-pied-piper-pp:before {
  content: "\f1a7";
}

.fa-pied-piper-alt:before {
  content: "\f1a8";
}

.fa-drupal:before {
  content: "\f1a9";
}

.fa-joomla:before {
  content: "\f1aa";
}

.fa-language:before {
  content: "\f1ab";
}

.fa-fax:before {
  content: "\f1ac";
}

.fa-building:before {
  content: "\f1ad";
}

.fa-child:before {
  content: "\f1ae";
}

.fa-paw:before {
  content: "\f1b0";
}

.fa-spoon:before {
  content: "\f1b1";
}

.fa-cube:before {
  content: "\f1b2";
}

.fa-cubes:before {
  content: "\f1b3";
}

.fa-behance:before {
  content: "\f1b4";
}

.fa-behance-square:before {
  content: "\f1b5";
}

.fa-steam:before {
  content: "\f1b6";
}

.fa-steam-square:before {
  content: "\f1b7";
}

.fa-recycle:before {
  content: "\f1b8";
}

.fa-automobile:before,
.fa-car:before {
  content: "\f1b9";
}

.fa-cab:before,
.fa-taxi:before {
  content: "\f1ba";
}

.fa-tree:before {
  content: "\f1bb";
}

.fa-spotify:before {
  content: "\f1bc";
}

.fa-deviantart:before {
  content: "\f1bd";
}

.fa-soundcloud:before {
  content: "\f1be";
}

.fa-database:before {
  content: "\f1c0";
}

.fa-file-pdf-o:before {
  content: "\f1c1";
}

.fa-file-word-o:before {
  content: "\f1c2";
}

.fa-file-excel-o:before {
  content: "\f1c3";
}

.fa-file-powerpoint-o:before {
  content: "\f1c4";
}

.fa-file-photo-o:before,
.fa-file-picture-o:before,
.fa-file-image-o:before {
  content: "\f1c5";
}

.fa-file-zip-o:before,
.fa-file-archive-o:before {
  content: "\f1c6";
}

.fa-file-sound-o:before,
.fa-file-audio-o:before {
  content: "\f1c7";
}

.fa-file-movie-o:before,
.fa-file-video-o:before {
  content: "\f1c8";
}

.fa-file-code-o:before {
  content: "\f1c9";
}

.fa-vine:before {
  content: "\f1ca";
}

.fa-codepen:before {
  content: "\f1cb";
}

.fa-jsfiddle:before {
  content: "\f1cc";
}

.fa-life-bouy:before,
.fa-life-buoy:before,
.fa-life-saver:before,
.fa-support:before,
.fa-life-ring:before {
  content: "\f1cd";
}

.fa-circle-o-notch:before {
  content: "\f1ce";
}

.fa-ra:before,
.fa-resistance:before,
.fa-rebel:before {
  content: "\f1d0";
}

.fa-ge:before,
.fa-empire:before {
  content: "\f1d1";
}

.fa-git-square:before {
  content: "\f1d2";
}

.fa-git:before {
  content: "\f1d3";
}

.fa-y-combinator-square:before,
.fa-yc-square:before,
.fa-hacker-news:before {
  content: "\f1d4";
}

.fa-tencent-weibo:before {
  content: "\f1d5";
}

.fa-qq:before {
  content: "\f1d6";
}

.fa-wechat:before,
.fa-weixin:before {
  content: "\f1d7";
}

.fa-send:before,
.fa-paper-plane:before {
  content: "\f1d8";
}

.fa-send-o:before,
.fa-paper-plane-o:before {
  content: "\f1d9";
}

.fa-history:before {
  content: "\f1da";
}

.fa-circle-thin:before {
  content: "\f1db";
}

.fa-header:before {
  content: "\f1dc";
}

.fa-paragraph:before {
  content: "\f1dd";
}

.fa-sliders:before {
  content: "\f1de";
}

.fa-share-alt:before {
  content: "\f1e0";
}

.fa-share-alt-square:before {
  content: "\f1e1";
}

.fa-bomb:before {
  content: "\f1e2";
}

.fa-soccer-ball-o:before,
.fa-futbol-o:before {
  content: "\f1e3";
}

.fa-tty:before {
  content: "\f1e4";
}

.fa-binoculars:before {
  content: "\f1e5";
}

.fa-plug:before {
  content: "\f1e6";
}

.fa-slideshare:before {
  content: "\f1e7";
}

.fa-twitch:before {
  content: "\f1e8";
}

.fa-yelp:before {
  content: "\f1e9";
}

.fa-newspaper-o:before {
  content: "\f1ea";
}

.fa-wifi:before {
  content: "\f1eb";
}

.fa-calculator:before {
  content: "\f1ec";
}

.fa-paypal:before {
  content: "\f1ed";
}

.fa-google-wallet:before {
  content: "\f1ee";
}

.fa-cc-visa:before {
  content: "\f1f0";
}

.fa-cc-mastercard:before {
  content: "\f1f1";
}

.fa-cc-discover:before {
  content: "\f1f2";
}

.fa-cc-amex:before {
  content: "\f1f3";
}

.fa-cc-paypal:before {
  content: "\f1f4";
}

.fa-cc-stripe:before {
  content: "\f1f5";
}

.fa-bell-slash:before {
  content: "\f1f6";
}

.fa-bell-slash-o:before {
  content: "\f1f7";
}

.fa-trash:before {
  content: "\f1f8";
}

.fa-copyright:before {
  content: "\f1f9";
}

.fa-at:before {
  content: "\f1fa";
}

.fa-eyedropper:before {
  content: "\f1fb";
}

.fa-paint-brush:before {
  content: "\f1fc";
}

.fa-birthday-cake:before {
  content: "\f1fd";
}

.fa-area-chart:before {
  content: "\f1fe";
}

.fa-pie-chart:before {
  content: "\f200";
}

.fa-line-chart:before {
  content: "\f201";
}

.fa-lastfm:before {
  content: "\f202";
}

.fa-lastfm-square:before {
  content: "\f203";
}

.fa-toggle-off:before {
  content: "\f204";
}

.fa-toggle-on:before {
  content: "\f205";
}

.fa-bicycle:before {
  content: "\f206";
}

.fa-bus:before {
  content: "\f207";
}

.fa-ioxhost:before {
  content: "\f208";
}

.fa-angellist:before {
  content: "\f209";
}

.fa-cc:before {
  content: "\f20a";
}

.fa-shekel:before,
.fa-sheqel:before,
.fa-ils:before {
  content: "\f20b";
}

.fa-meanpath:before {
  content: "\f20c";
}

.fa-buysellads:before {
  content: "\f20d";
}

.fa-connectdevelop:before {
  content: "\f20e";
}

.fa-dashcube:before {
  content: "\f210";
}

.fa-forumbee:before {
  content: "\f211";
}

.fa-leanpub:before {
  content: "\f212";
}

.fa-sellsy:before {
  content: "\f213";
}

.fa-shirtsinbulk:before {
  content: "\f214";
}

.fa-simplybuilt:before {
  content: "\f215";
}

.fa-skyatlas:before {
  content: "\f216";
}

.fa-cart-plus:before {
  content: "\f217";
}

.fa-cart-arrow-down:before {
  content: "\f218";
}

.fa-diamond:before {
  content: "\f219";
}

.fa-ship:before {
  content: "\f21a";
}

.fa-user-secret:before {
  content: "\f21b";
}

.fa-motorcycle:before {
  content: "\f21c";
}

.fa-street-view:before {
  content: "\f21d";
}

.fa-heartbeat:before {
  content: "\f21e";
}

.fa-venus:before {
  content: "\f221";
}

.fa-mars:before {
  content: "\f222";
}

.fa-mercury:before {
  content: "\f223";
}

.fa-intersex:before,
.fa-transgender:before {
  content: "\f224";
}

.fa-transgender-alt:before {
  content: "\f225";
}

.fa-venus-double:before {
  content: "\f226";
}

.fa-mars-double:before {
  content: "\f227";
}

.fa-venus-mars:before {
  content: "\f228";
}

.fa-mars-stroke:before {
  content: "\f229";
}

.fa-mars-stroke-v:before {
  content: "\f22a";
}

.fa-mars-stroke-h:before {
  content: "\f22b";
}

.fa-neuter:before {
  content: "\f22c";
}

.fa-genderless:before {
  content: "\f22d";
}

.fa-facebook-official:before {
  content: "\f230";
}

.fa-pinterest-p:before {
  content: "\f231";
}

.fa-whatsapp:before {
  content: "\f232";
}

.fa-server:before {
  content: "\f233";
}

.fa-user-plus:before {
  content: "\f234";
}

.fa-user-times:before {
  content: "\f235";
}

.fa-hotel:before,
.fa-bed:before {
  content: "\f236";
}

.fa-viacoin:before {
  content: "\f237";
}

.fa-train:before {
  content: "\f238";
}

.fa-subway:before {
  content: "\f239";
}

.fa-medium:before {
  content: "\f23a";
}

.fa-yc:before,
.fa-y-combinator:before {
  content: "\f23b";
}

.fa-optin-monster:before {
  content: "\f23c";
}

.fa-opencart:before {
  content: "\f23d";
}

.fa-expeditedssl:before {
  content: "\f23e";
}

.fa-battery-4:before,
.fa-battery:before,
.fa-battery-full:before {
  content: "\f240";
}

.fa-battery-3:before,
.fa-battery-three-quarters:before {
  content: "\f241";
}

.fa-battery-2:before,
.fa-battery-half:before {
  content: "\f242";
}

.fa-battery-1:before,
.fa-battery-quarter:before {
  content: "\f243";
}

.fa-battery-0:before,
.fa-battery-empty:before {
  content: "\f244";
}

.fa-mouse-pointer:before {
  content: "\f245";
}

.fa-i-cursor:before {
  content: "\f246";
}

.fa-object-group:before {
  content: "\f247";
}

.fa-object-ungroup:before {
  content: "\f248";
}

.fa-sticky-note:before {
  content: "\f249";
}

.fa-sticky-note-o:before {
  content: "\f24a";
}

.fa-cc-jcb:before {
  content: "\f24b";
}

.fa-cc-diners-club:before {
  content: "\f24c";
}

.fa-clone:before {
  content: "\f24d";
}

.fa-balance-scale:before {
  content: "\f24e";
}

.fa-hourglass-o:before {
  content: "\f250";
}

.fa-hourglass-1:before,
.fa-hourglass-start:before {
  content: "\f251";
}

.fa-hourglass-2:before,
.fa-hourglass-half:before {
  content: "\f252";
}

.fa-hourglass-3:before,
.fa-hourglass-end:before {
  content: "\f253";
}

.fa-hourglass:before {
  content: "\f254";
}

.fa-hand-grab-o:before,
.fa-hand-rock-o:before {
  content: "\f255";
}

.fa-hand-stop-o:before,
.fa-hand-paper-o:before {
  content: "\f256";
}

.fa-hand-scissors-o:before {
  content: "\f257";
}

.fa-hand-lizard-o:before {
  content: "\f258";
}

.fa-hand-spock-o:before {
  content: "\f259";
}

.fa-hand-pointer-o:before {
  content: "\f25a";
}

.fa-hand-peace-o:before {
  content: "\f25b";
}

.fa-trademark:before {
  content: "\f25c";
}

.fa-registered:before {
  content: "\f25d";
}

.fa-creative-commons:before {
  content: "\f25e";
}

.fa-gg:before {
  content: "\f260";
}

.fa-gg-circle:before {
  content: "\f261";
}

.fa-tripadvisor:before {
  content: "\f262";
}

.fa-odnoklassniki:before {
  content: "\f263";
}

.fa-odnoklassniki-square:before {
  content: "\f264";
}

.fa-get-pocket:before {
  content: "\f265";
}

.fa-wikipedia-w:before {
  content: "\f266";
}

.fa-safari:before {
  content: "\f267";
}

.fa-chrome:before {
  content: "\f268";
}

.fa-firefox:before {
  content: "\f269";
}

.fa-opera:before {
  content: "\f26a";
}

.fa-internet-explorer:before {
  content: "\f26b";
}

.fa-tv:before,
.fa-television:before {
  content: "\f26c";
}

.fa-contao:before {
  content: "\f26d";
}

.fa-500px:before {
  content: "\f26e";
}

.fa-amazon:before {
  content: "\f270";
}

.fa-calendar-plus-o:before {
  content: "\f271";
}

.fa-calendar-minus-o:before {
  content: "\f272";
}

.fa-calendar-times-o:before {
  content: "\f273";
}

.fa-calendar-check-o:before {
  content: "\f274";
}

.fa-industry:before {
  content: "\f275";
}

.fa-map-pin:before {
  content: "\f276";
}

.fa-map-signs:before {
  content: "\f277";
}

.fa-map-o:before {
  content: "\f278";
}

.fa-map:before {
  content: "\f279";
}

.fa-commenting:before {
  content: "\f27a";
}

.fa-commenting-o:before {
  content: "\f27b";
}

.fa-houzz:before {
  content: "\f27c";
}

.fa-vimeo:before {
  content: "\f27d";
}

.fa-black-tie:before {
  content: "\f27e";
}

.fa-fonticons:before {
  content: "\f280";
}

.fa-reddit-alien:before {
  content: "\f281";
}

.fa-edge:before {
  content: "\f282";
}

.fa-credit-card-alt:before {
  content: "\f283";
}

.fa-codiepie:before {
  content: "\f284";
}

.fa-modx:before {
  content: "\f285";
}

.fa-fort-awesome:before {
  content: "\f286";
}

.fa-usb:before {
  content: "\f287";
}

.fa-product-hunt:before {
  content: "\f288";
}

.fa-mixcloud:before {
  content: "\f289";
}

.fa-scribd:before {
  content: "\f28a";
}

.fa-pause-circle:before {
  content: "\f28b";
}

.fa-pause-circle-o:before {
  content: "\f28c";
}

.fa-stop-circle:before {
  content: "\f28d";
}

.fa-stop-circle-o:before {
  content: "\f28e";
}

.fa-shopping-bag:before {
  content: "\f290";
}

.fa-shopping-basket:before {
  content: "\f291";
}

.fa-hashtag:before {
  content: "\f292";
}

.fa-bluetooth:before {
  content: "\f293";
}

.fa-bluetooth-b:before {
  content: "\f294";
}

.fa-percent:before {
  content: "\f295";
}

.fa-gitlab:before {
  content: "\f296";
}

.fa-wpbeginner:before {
  content: "\f297";
}

.fa-wpforms:before {
  content: "\f298";
}

.fa-envira:before {
  content: "\f299";
}

.fa-universal-access:before {
  content: "\f29a";
}

.fa-wheelchair-alt:before {
  content: "\f29b";
}

.fa-question-circle-o:before {
  content: "\f29c";
}

.fa-blind:before {
  content: "\f29d";
}

.fa-audio-description:before {
  content: "\f29e";
}

.fa-volume-control-phone:before {
  content: "\f2a0";
}

.fa-braille:before {
  content: "\f2a1";
}

.fa-assistive-listening-systems:before {
  content: "\f2a2";
}

.fa-asl-interpreting:before,
.fa-american-sign-language-interpreting:before {
  content: "\f2a3";
}

.fa-deafness:before,
.fa-hard-of-hearing:before,
.fa-deaf:before {
  content: "\f2a4";
}

.fa-glide:before {
  content: "\f2a5";
}

.fa-glide-g:before {
  content: "\f2a6";
}

.fa-signing:before,
.fa-sign-language:before {
  content: "\f2a7";
}

.fa-low-vision:before {
  content: "\f2a8";
}

.fa-viadeo:before {
  content: "\f2a9";
}

.fa-viadeo-square:before {
  content: "\f2aa";
}

.fa-snapchat:before {
  content: "\f2ab";
}

.fa-snapchat-ghost:before {
  content: "\f2ac";
}

.fa-snapchat-square:before {
  content: "\f2ad";
}

.fa-pied-piper:before {
  content: "\f2ae";
}

.fa-first-order:before {
  content: "\f2b0";
}

.fa-yoast:before {
  content: "\f2b1";
}

.fa-themeisle:before {
  content: "\f2b2";
}

.fa-google-plus-circle:before,
.fa-google-plus-official:before {
  content: "\f2b3";
}

.fa-fa:before,
.fa-font-awesome:before {
  content: "\f2b4";
}

.fa-handshake-o:before {
  content: "\f2b5";
}

.fa-envelope-open:before {
  content: "\f2b6";
}

.fa-envelope-open-o:before {
  content: "\f2b7";
}

.fa-linode:before {
  content: "\f2b8";
}

.fa-address-book:before {
  content: "\f2b9";
}

.fa-address-book-o:before {
  content: "\f2ba";
}

.fa-vcard:before,
.fa-address-card:before {
  content: "\f2bb";
}

.fa-vcard-o:before,
.fa-address-card-o:before {
  content: "\f2bc";
}

.fa-user-circle:before {
  content: "\f2bd";
}

.fa-user-circle-o:before {
  content: "\f2be";
}

.fa-user-o:before {
  content: "\f2c0";
}

.fa-id-badge:before {
  content: "\f2c1";
}

.fa-drivers-license:before,
.fa-id-card:before {
  content: "\f2c2";
}

.fa-drivers-license-o:before,
.fa-id-card-o:before {
  content: "\f2c3";
}

.fa-quora:before {
  content: "\f2c4";
}

.fa-free-code-camp:before {
  content: "\f2c5";
}

.fa-telegram:before {
  content: "\f2c6";
}

.fa-thermometer-4:before,
.fa-thermometer:before,
.fa-thermometer-full:before {
  content: "\f2c7";
}

.fa-thermometer-3:before,
.fa-thermometer-three-quarters:before {
  content: "\f2c8";
}

.fa-thermometer-2:before,
.fa-thermometer-half:before {
  content: "\f2c9";
}

.fa-thermometer-1:before,
.fa-thermometer-quarter:before {
  content: "\f2ca";
}

.fa-thermometer-0:before,
.fa-thermometer-empty:before {
  content: "\f2cb";
}

.fa-shower:before {
  content: "\f2cc";
}

.fa-bathtub:before,
.fa-s15:before,
.fa-bath:before {
  content: "\f2cd";
}

.fa-podcast:before {
  content: "\f2ce";
}

.fa-window-maximize:before {
  content: "\f2d0";
}

.fa-window-minimize:before {
  content: "\f2d1";
}

.fa-window-restore:before {
  content: "\f2d2";
}

.fa-times-rectangle:before,
.fa-window-close:before {
  content: "\f2d3";
}

.fa-times-rectangle-o:before,
.fa-window-close-o:before {
  content: "\f2d4";
}

.fa-bandcamp:before {
  content: "\f2d5";
}

.fa-grav:before {
  content: "\f2d6";
}

.fa-etsy:before {
  content: "\f2d7";
}

.fa-imdb:before {
  content: "\f2d8";
}

.fa-ravelry:before {
  content: "\f2d9";
}

.fa-eercast:before {
  content: "\f2da";
}

.fa-microchip:before {
  content: "\f2db";
}

.fa-snowflake-o:before {
  content: "\f2dc";
}

.fa-superpowers:before {
  content: "\f2dd";
}

.fa-wpexplorer:before {
  content: "\f2de";
}

.fa-meetup:before {
  content: "\f2e0";
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.sr-only-focusable:active,
.sr-only-focusable:focus {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
}

@font-face {
  font-family: _YuGothicM;
  font-weight: normal;
  src: local("YuGothic-Medium"), local("Yu Gothic Medium"), local("YuGothic-Regular");
}

@font-face {
  font-family: _YuGothicM;
  font-weight: bold;
  src: local("YuGothic-Bold"), local("Yu Gothic");
}

@font-face {
  font-family: _YuGothic;
  font-weight: normal;
  src: local(YuGothic-Medium), local("Yu Gothic Medium");
}

@font-face {
  font-family: _YuGothic;
  font-weight: bold;
  src: local(YuGothic-Bold), local("Yu Gothic");
}

[class^="tv-"], [class*=" tv-"] {
  display: inline-block;
  font: normal normal normal 14px/1 'drtvtan';
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.tv-matsubazue:before {
  content: "\e920";
}

.tv-reha:before {
  content: "\e921";
}

.tv-tooth:before {
  content: "\e922";
}

.tv-tyosinki:before {
  content: "\e923";
}

.tv-info-card:before {
  content: "\e916";
}

.tv-info-dog:before {
  content: "\e917";
}

.tv-info-emergency:before {
  content: "\e918";
}

.tv-info-global:before {
  content: "\e919";
}

.tv-info-holiday:before {
  content: "\e91a";
}

.tv-info-housecall:before {
  content: "\e91b";
}

.tv-info-night:before {
  content: "\e91c";
}

.tv-info-nurse:before {
  content: "\e91d";
}

.tv-info-reservation:before {
  content: "\e91e";
}

.tv-info-vaccination:before {
  content: "\e91f";
}

.tv-mike:before {
  content: "\e915";
}

.tv-horn:before {
  content: "\e914";
}

.tv-kkt:before {
  content: "\e913";
}

.tv-accent:before {
  content: "\e912";
}

.tv-home:before {
  content: "\e911";
}

.tv-yey-l:before {
  content: "\e90e";
}

.tv-yey-r:before {
  content: "\e90f";
}

.tv-line:before {
  content: "\e910";
}

.tv-doctor:before {
  content: "\e90d";
}

.tv-h-news:before {
  content: "\e900";
}

.tv-checksheet:before {
  content: "\e901";
}

.tv-cracker:before {
  content: "\e902";
}

.tv-document:before {
  content: "\e903";
}

.tv-h-medical:before {
  content: "\e904";
}

.tv-h-program:before {
  content: "\e905";
}

.tv-hospital:before {
  content: "\e906";
}

.tv-memo:before {
  content: "\e907";
}

.tv-paper:before {
  content: "\e908";
}

.tv-pencil:before {
  content: "\e909";
}

.tv-searching:before {
  content: "\e90a";
}

.tv-tv:before {
  content: "\e90b";
}

.tv-virus:before {
  content: "\e90c";
}

/*!
 * ress.css • v1.2.2
 * MIT License
 * github.com/filipelinhares/ress
 */
/* # =================================================================
   # Global selectors
   # ================================================================= */
html {
  box-sizing: border-box;
  overflow-y: scroll;
  /* All browsers without overlaying scrollbars */
  -webkit-text-size-adjust: 100%;
  /* iOS 8+ */
}

*,
:before,
:after {
  background-repeat: no-repeat;
  /* Set `background-repeat: no-repeat` to all elements and pseudo elements */
  box-sizing: inherit;
}

:before,
:after {
  text-decoration: inherit;
  /* Inherit text-decoration and vertical align to ::before and ::after pseudo elements */
  vertical-align: inherit;
}

* {
  padding: 0;
  /* Reset `padding` and `margin` of all elements */
  margin: 0;
}

/* # =================================================================
   # General elements
   # ================================================================= */
/* Add the correct display in iOS 4-7.*/
audio:not([controls]) {
  display: none;
  height: 0;
}

hr {
  overflow: visible;
  /* Show the overflow in Edge and IE */
}

/*
* Correct `block` display not defined for any HTML5 element in IE 8/9
* Correct `block` display not defined for `details` or `summary` in IE 10/11
* and Firefox
* Correct `block` display not defined for `main` in IE 11
*/
article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {
  display: block;
}

summary {
  display: list-item;
  /* Add the correct display in all browsers */
}

small {
  font-size: 80%;
  /* Set font-size to 80% in `small` elements */
}

[hidden],
template {
  display: none;
  /* Add the correct display in IE */
}

abbr[title] {
  border-bottom: 1px dotted;
  /* Add a bordered underline effect in all browsers */
  text-decoration: none;
  /* Remove text decoration in Firefox 40+ */
}

a {
  background-color: transparent;
  /* Remove the gray background on active links in IE 10 */
  -webkit-text-decoration-skip: objects;
  /* Remove gaps in links underline in iOS 8+ and Safari 8+ */
}

a:active,
a:hover {
  outline-width: 0;
  /* Remove the outline when hovering in all browsers */
}

code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  /* Specify the font family of code elements */
}

b,
strong {
  font-weight: bolder;
  /* Correct style set to `bold` in Edge 12+, Safari 6.2+, and Chrome 18+ */
}

dfn {
  font-style: italic;
  /* Address styling not present in Safari and Chrome */
}

/* Address styling not present in IE 8/9 */
mark {
  background-color: #ff0;
  color: #000;
}

/* https://gist.github.com/unruthless/413930 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* # =================================================================
   # Forms
   # ================================================================= */
input {
  border-radius: 0;
}

/* Apply cursor pointer to button elements */
button,
[type="button"],
[type="reset"],
[type="submit"],
[role="button"] {
  cursor: pointer;
}

/* Replace pointer cursor in disabled elements */
[disabled] {
  cursor: default;
}

[type="number"] {
  width: auto;
  /* Firefox 36+ */
}

[type="search"] {
  -webkit-appearance: textfield;
  /* Safari 8+ */
}

[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
  /* Safari 8 */
}

textarea {
  overflow: auto;
  /* Internet Explorer 11+ */
  resize: vertical;
  /* Specify textarea resizability */
}

button,
input,
optgroup,
select,
textarea {
  font: inherit;
  /* Specify font inheritance of form elements */
}

optgroup {
  font-weight: bold;
  /* Restore the font weight unset by the previous rule. */
}

button {
  overflow: visible;
  /* Address `overflow` set to `hidden` in IE 8/9/10/11 */
}

/* Remove inner padding and border in Firefox 4+ */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: 0;
  padding: 0;
}

/* Replace focus style removed in the border reset above */
button:-moz-focusring,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  outline: 1px dotted ButtonText;
}

button,
html [type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
  /* Correct the inability to style clickable types in iOS */
}

button,
select {
  text-transform: none;
  /* Firefox 40+, Internet Explorer 11- */
}

/* Remove the default button styling in all browsers */
button,
input,
select,
textarea {
  background-color: transparent;
  border-style: none;
  color: inherit;
}

/* Style select like a standard input */
select {
  -moz-appearance: none;
  /* Firefox 36+ */
  -webkit-appearance: none;
  /* Chrome 41+ */
}

select::-ms-expand {
  display: none;
  /* Internet Explorer 11+ */
}

select::-ms-value {
  color: currentColor;
  /* Internet Explorer 11+ */
}

legend {
  border: 0;
  /* Correct `color` not being inherited in IE 8/9/10/11 */
  color: inherit;
  /* Correct the color inheritance from `fieldset` elements in IE */
  display: table;
  /* Correct the text wrapping in Edge and IE */
  max-width: 100%;
  /* Correct the text wrapping in Edge and IE */
  white-space: normal;
  /* Correct the text wrapping in Edge and IE */
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* Correct the inability to style clickable types in iOS and Safari */
  font: inherit;
  /* Change font properties to `inherit` in Chrome and Safari */
}

[type="search"] {
  -webkit-appearance: textfield;
  /* Correct the odd appearance in Chrome and Safari */
  outline-offset: -2px;
  /* Correct the outline style in Safari */
}

/* # =================================================================
   # Specify media element style
   # ================================================================= */
img {
  border-style: none;
  /* Remove border when inside `a` element in IE 8/9/10 */
}

/* Add the correct vertical alignment in Chrome, Firefox, and Opera */
progress {
  vertical-align: baseline;
}

svg:not(:root) {
  overflow: hidden;
  /* Internet Explorer 11- */
}

audio,
canvas,
progress,
video {
  display: inline-block;
  /* Internet Explorer 11+, Windows Phone 8.1+ */
}

/* # =================================================================
   # Accessibility
   # ================================================================= */
/* Hide content from screens but not screenreaders */

/* Specify the progress cursor of updating elements */
[aria-busy="true"] {
  cursor: progress;
}

/* Specify the pointer cursor of trigger elements */
[aria-controls] {
  cursor: pointer;
}

/* Specify the unstyled cursor of disabled, not-editable, or otherwise inoperable elements */
[aria-disabled] {
  cursor: default;
}

/* # =================================================================
   # Selection
   # ================================================================= */
/* Specify text selection background color and omit drop shadow */

::selection {
  background-color: #b3d4fc;
  /* Required when declaring ::selection */
  color: #000;
  text-shadow: none;
}

html {
  background-color: #ffffff;
  font-size: 62.5%;
}

body {
  overflow-x: hidden;
  min-width: 320px;
}

body, button, code, input, optgroup, pre, select, textarea {
  color: #333333;
  font-size: 16px;
  font-size: 1.6rem;
  font-family: "YakuHanJP", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴシック Pro", Meiryo, "メイリオ", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  -webkit-font-feature-settings: normal;
          font-feature-settings: normal;
  -webkit-font-smoothing: subpixel-antialiased;
  font-weight: normal;
  line-height: 1.8;
  -webkit-text-size-adjust: 100%;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

img {
  vertical-align: bottom;
  max-width: 100%;
  height: auto;
}

img[src$=".svg"]:not([width]), img[src*=".svg?"]:not([width]) {
  width: 100%;
}

a {
  text-decoration: none;
  color: inherit;
  outline-color: #333333;
}

html:not(.sp) a:hover, html:not(.sp) a:focus {
  text-decoration: underline;
}

.pc a[href^="tel:"] {
  cursor: text;
  pointer-events: none;
  text-decoration: none;
}

a, button, [type="submit"], label[for] {
  cursor: pointer;
}

button:focus {
  outline: none;
}

.pc a:not(.c-noactive):active,
.pc button:not(.c-noactive):active,
.pc [type="submit"]:not(.c-noactive):active {
  top: 1px;
}

html:not(.sp) a.c-nounderline:hover, html:not(.sp) a.c-nounderline:focus {
  text-decoration: none;
}

ol,
ul {
  padding-left: 1.3em;
}

p:first-child {
  margin-top: 0;
}

p:last-child {
  margin-bottom: 0;
}

img[align="left"] + p {
  margin-top: 0;
}

img[align="right"] + p {
  margin-top: 0;
}

input[type="url"],
input[type="tel"],
input[type="text"],
input[type="email"],
input[type="number"],
input[type="password"],
textarea,
select {
  border: 1px solid #dddddd;
  background-color: #f5f5f5;
  outline: none !important;
  width: 100%;
  -webkit-transition: border-color .35s ease-in-out 0s, box-shadow .35s ease-in-out 0s;
  transition: border-color .35s ease-in-out 0s, box-shadow .35s ease-in-out 0s;
}

html:not(.sp) input[type="url"]:hover, html:not(.sp) input[type="url"]:focus, html:not(.sp)
input[type="tel"]:hover, html:not(.sp)
input[type="tel"]:focus, html:not(.sp)
input[type="text"]:hover, html:not(.sp)
input[type="text"]:focus, html:not(.sp)
input[type="email"]:hover, html:not(.sp)
input[type="email"]:focus, html:not(.sp)
input[type="number"]:hover, html:not(.sp)
input[type="number"]:focus, html:not(.sp)
input[type="password"]:hover, html:not(.sp)
input[type="password"]:focus, html:not(.sp)
textarea:hover, html:not(.sp)
textarea:focus, html:not(.sp)
select:hover, html:not(.sp)
select:focus {
  border-color: #009944;
  box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.25);
}

html.sp input[type="url"], html.sp
input[type="tel"], html.sp
input[type="text"], html.sp
input[type="email"], html.sp
input[type="number"], html.sp
input[type="password"], html.sp
textarea, html.sp
select {
  font-size: 16px !important;
  font-size: 1.6rem !important;
}

select {
  background-color: #fff;
}

input[type="url"]::-webkit-input-placeholder,
input[type="tel"]::-webkit-input-placeholder,
input[type="text"]::-webkit-input-placeholder,
input[type="email"]::-webkit-input-placeholder,
input[type="number"]::-webkit-input-placeholder,
input[type="password"]::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  color: #999;
}

input[type="url"]:-ms-input-placeholder,
input[type="tel"]:-ms-input-placeholder,
input[type="text"]:-ms-input-placeholder,
input[type="email"]:-ms-input-placeholder,
input[type="number"]:-ms-input-placeholder,
input[type="password"]:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  color: #999;
}

input[type="url"]::-moz-placeholder,
input[type="tel"]::-moz-placeholder,
input[type="text"]::-moz-placeholder,
input[type="email"]::-moz-placeholder,
input[type="number"]::-moz-placeholder,
input[type="password"]::-moz-placeholder,
textarea::-moz-placeholder {
  color: #999;
}

/*
#styleguide
 (  )

@使用頻度 ★☆☆

```
```
*/
.c-hide {
  height: 0;
  position: absolute;
  left: 2px;
  top: 6px;
  opacity: 0;
  
  overflow: hidden;
  width: 0;
}

.c-n {
  display: none;
}

/*
#styleguide
hover and focus 時のスタイル ( change )

@使用頻度 ★★☆

```
```
*/
.c-change-img {
  font-size: 0;
  display: inline-block;
  position: relative;
  vertical-align: top;
  max-width: 100%;
}

.c-change-img > * {
  font-size: 16px;
  font-size: 1.6rem;
}

.c-change-img:before {
  background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 50%, white 100%);
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 50%, white 100%);
  content: "";
  height: 100%;
  opacity: 0;
  
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  -webkit-transition: opacity 0.45s cubic-bezier(0.645, 0.045, 0.355, 1), visibility 0s 0.45s;
  transition: opacity 0.45s cubic-bezier(0.645, 0.045, 0.355, 1), visibility 0s 0.45s;
  visibility: hidden;
  width: 100%;
}

.c-change-img img {
  -webkit-transition: box-shadow 0.45s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: box-shadow 0.45s cubic-bezier(0.645, 0.045, 0.355, 1);
}

html:not(.sp) .c-change-img:hover:before, html:not(.sp) .c-change-img:focus:before {
  opacity: .4;
  
  -webkit-transition-delay: 0s;
          transition-delay: 0s;
  visibility: visible;
}

html:not(.sp) .c-change-img:hover img, html:not(.sp) .c-change-img:focus img {
  box-shadow: 0 0 4px 0 rgba(51, 51, 51, 0.4);
}

.c-change-figure figure {
  display: block;
  position: relative;
}

.c-change-figure figure:before {
  background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 50%, white 100%);
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 50%, white 100%);
  content: "";
  height: 100%;
  opacity: 0;
  
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  -webkit-transition: opacity 0.45s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: opacity 0.45s cubic-bezier(0.645, 0.045, 0.355, 1);
  width: 100%;
}

.c-change-figure figure img {
  -webkit-transition: box-shadow 0.45s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: box-shadow 0.45s cubic-bezier(0.645, 0.045, 0.355, 1);
}

html:not(.sp) .c-change-figure:hover figure:before, html:not(.sp) .c-change-figure:focus figure:before {
  opacity: .4;
  
}

html:not(.sp) .c-change-figure:hover figure img, html:not(.sp) .c-change-figure:focus figure img {
  box-shadow: 0 0 4px 0 rgba(51, 51, 51, 0.4);
}

.c-change-opacity img {
  -webkit-transition: opacity 0.45s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: opacity 0.45s cubic-bezier(0.645, 0.045, 0.355, 1);
}

html:not(.sp) .c-change-opacity:hover img, html:not(.sp) .c-change-opacity:focus img {
  opacity: .7;
  
}

/*
#styleguide
hover and focus 時のスタイル ( h-hoge )

@使用頻度 ★★☆

```
```
*/
[class*="c-h-"],
[class*="c-h-"]:before,
[class*="c-h-"]:after {
  display: inline-block;
  -webkit-transition: color 0.45s ease-out 0s, box-shadow 0.45s ease-out 0s, background 0.45s ease-out 0s, background-color 0.45s ease-out 0s, opacity 0.45s ease-out 0s, border 0.45s ease-out 0s, -webkit-transform 0.45s ease-out 0s;
  transition: color 0.45s ease-out 0s, box-shadow 0.45s ease-out 0s, background 0.45s ease-out 0s, background-color 0.45s ease-out 0s, opacity 0.45s ease-out 0s, border 0.45s ease-out 0s, -webkit-transform 0.45s ease-out 0s;
  transition: transform 0.45s ease-out 0s, color 0.45s ease-out 0s, box-shadow 0.45s ease-out 0s, background 0.45s ease-out 0s, background-color 0.45s ease-out 0s, opacity 0.45s ease-out 0s, border 0.45s ease-out 0s;
  transition: transform 0.45s ease-out 0s, color 0.45s ease-out 0s, box-shadow 0.45s ease-out 0s, background 0.45s ease-out 0s, background-color 0.45s ease-out 0s, opacity 0.45s ease-out 0s, border 0.45s ease-out 0s, -webkit-transform 0.45s ease-out 0s;
}

[class*="c-h-"] img,
[class*="c-h-"]:before img,
[class*="c-h-"]:after img {
  -webkit-transition: color 0.45s ease-out 0s, box-shadow 0.45s ease-out 0s, background 0.45s ease-out 0s, background-color 0.45s ease-out 0s, opacity 0.45s ease-out 0s, border 0.45s ease-out 0s, -webkit-transform 0.45s ease-out 0s;
  transition: color 0.45s ease-out 0s, box-shadow 0.45s ease-out 0s, background 0.45s ease-out 0s, background-color 0.45s ease-out 0s, opacity 0.45s ease-out 0s, border 0.45s ease-out 0s, -webkit-transform 0.45s ease-out 0s;
  transition: transform 0.45s ease-out 0s, color 0.45s ease-out 0s, box-shadow 0.45s ease-out 0s, background 0.45s ease-out 0s, background-color 0.45s ease-out 0s, opacity 0.45s ease-out 0s, border 0.45s ease-out 0s;
  transition: transform 0.45s ease-out 0s, color 0.45s ease-out 0s, box-shadow 0.45s ease-out 0s, background 0.45s ease-out 0s, background-color 0.45s ease-out 0s, opacity 0.45s ease-out 0s, border 0.45s ease-out 0s, -webkit-transform 0.45s ease-out 0s;
}

html:not(.sp) .c-h-float:hover, html:not(.sp) .c-h-float:focus {
  -webkit-transform: translateY(-1px);
      -ms-transform: translateY(-1px);
          transform: translateY(-1px);
  box-shadow: 0 36px 50px -34px #000;
}

html:not(.sp) .c-h-fade:hover, html:not(.sp) .c-h-fade:focus {
  opacity: .75;
  
}

.c-h-outline {
  position: relative;
}

.c-h-outline.c-h-outline--radius:before {
  border-radius: 8px;
}

.c-h-outline.c-h-outline--radius2x:before {
  border-radius: 16px;
}

.c-h-outline:before {
  content: " ";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
}

html:not(.sp) .c-h-outline:hover:before, html:not(.sp) .c-h-outline:focus:before {
  box-shadow: inset 0 0 0 2px #009944;
}

.c-h-outline-img.c-h-outline-img--radius img {
  border-radius: 8px;
}

.c-h-outline-img.c-h-outline-img--radius2x img {
  border-radius: 8px;
}

html:not(.sp) .c-h-outline-img:hover img, html:not(.sp) .c-h-outline-img:focus img {
  box-shadow: inset 0 0 0 2px #009944;
}

html:not(.sp) .c-h-icon:hover .fa, html:not(.sp) .c-h-icon:hover [class^="tv-"], html:not(.sp) .c-h-icon:focus .fa, html:not(.sp) .c-h-icon:focus [class^="tv-"] {
  -webkit-transform: scale(1.1) rotate(4deg);
      -ms-transform: scale(1.1) rotate(4deg);
          transform: scale(1.1) rotate(4deg);
}

html:not(.sp) .c-h-icon:hover .fa[class*="right"], html:not(.sp) .c-h-icon:hover [class^="tv-"][class*="right"], html:not(.sp) .c-h-icon:focus .fa[class*="right"], html:not(.sp) .c-h-icon:focus [class^="tv-"][class*="right"] {
  -webkit-transform: translateX(3px);
      -ms-transform: translateX(3px);
          transform: translateX(3px);
}

html:not(.sp) .c-h-icon:hover .fa[class*="left"], html:not(.sp) .c-h-icon:hover [class^="tv-"][class*="left"], html:not(.sp) .c-h-icon:focus .fa[class*="left"], html:not(.sp) .c-h-icon:focus [class^="tv-"][class*="left"] {
  -webkit-transform: translateX(-3px);
      -ms-transform: translateX(-3px);
          transform: translateX(-3px);
}

html:not(.sp) .c-h-icon:hover .fa[class*="down"], html:not(.sp) .c-h-icon:hover [class^="tv-"][class*="down"], html:not(.sp) .c-h-icon:focus .fa[class*="down"], html:not(.sp) .c-h-icon:focus [class^="tv-"][class*="down"] {
  -webkit-transform: translateY(3px);
      -ms-transform: translateY(3px);
          transform: translateY(3px);
}

html:not(.sp) .c-h-icon:hover .fa[class*="up"], html:not(.sp) .c-h-icon:hover [class^="tv-"][class*="up"], html:not(.sp) .c-h-icon:focus .fa[class*="up"], html:not(.sp) .c-h-icon:focus [class^="tv-"][class*="up"] {
  -webkit-transform: translateY(-3px);
      -ms-transform: translateY(-3px);
          transform: translateY(-3px);
}

/*
#styleguide
クリアフィックス ( cf )

@使用頻度 ★☆☆

```
```
*/
.c-cf:before, .c-wpedit:before, .c-cf:after, .c-wpedit:after {
  content: "";
  display: table;
}

.c-cf:after, .c-wpedit:after {
  clear: both;
}

/*
#styleguide
コンテナー ( container )

@使用頻度 ★★★

描画の基本となる箱になります。

```
<div class="c-container">
  基本箱
</div>
```
*/
.c-container, .l-area--sub .l-area__inner {
  display: block;
  margin-right: auto;
  margin-left: auto;
  padding-right: 15px;
  padding-left: 15px;
  max-width: 1200px;
}

.c-container--lg {
  max-width: 1054px;
}

.c-container--md {
  max-width: 798px;
}

.c-container--sm {
  max-width: 598px;
}

.c-container--xs {
  max-width: 442px;
}

.c-container--base {
  max-width: 1200px;
}

.c-container--max {
  max-width: 1630px;
}

.c-container.c-container--short, .l-area--sub .c-container--short.l-area__inner {
  max-width: 600px;
}

.c-container.c-container--short-just, .l-area--sub .c-container--short-just.l-area__inner {
  max-width: 570px;
  padding-left: 0;
  padding-right: 0;
}

.c-container.c-container--smart, .l-area--sub .c-container--smart.l-area__inner {
  max-width: 800px;
}

.c-container.c-container--smart-just, .l-area--sub .c-container--smart-just.l-area__inner {
  max-width: 770px;
  padding-left: 0;
  padding-right: 0;
}

.c-container.c-container--dull, .l-area--sub .c-container--dull.l-area__inner {
  max-width: 1000px;
}

.c-container.c-container--dull-just, .l-area--sub .c-container--dull-just.l-area__inner {
  max-width: 970px;
  padding-left: 0;
  padding-right: 0;
}

/*
#styleguide
データ属性 ( data )

@使用頻度 ★☆☆

```
```
*/
[data-tooltip] {
  position: relative;
}

[data-tooltip]:before {
  background-color: #009944;
  border-radius: 3px;
  box-shadow: 0 1px 2px 0 rgba(43, 43, 43, 0.3);
  color: #fff;
  content: attr(data-tooltip);
  opacity: 0;
  
  font-size: 12px;
  font-size: 1.2rem;
  font-family: "YakuHanJP", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴシック Pro", Meiryo, "メイリオ", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-weight: 700;
  line-height: 1;
  padding: .75em .6em .75em;
  position: absolute;
  left: 50%;
  top: -3.33333em;
  pointer-events: none;
  -webkit-transform: translate(-50%, 0.41667em);
      -ms-transform: translate(-50%, 0.41667em);
          transform: translate(-50%, 0.41667em);
  -webkit-transition: opacity 0.175s cubic-bezier(0.645, 0.045, 0.355, 1), visibility 0s 0.175s, -webkit-transform 0.175s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: opacity 0.175s cubic-bezier(0.645, 0.045, 0.355, 1), visibility 0s 0.175s, -webkit-transform 0.175s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: opacity 0.175s cubic-bezier(0.645, 0.045, 0.355, 1), transform 0.175s cubic-bezier(0.645, 0.045, 0.355, 1), visibility 0s 0.175s;
  transition: opacity 0.175s cubic-bezier(0.645, 0.045, 0.355, 1), transform 0.175s cubic-bezier(0.645, 0.045, 0.355, 1), visibility 0s 0.175s, -webkit-transform 0.175s cubic-bezier(0.645, 0.045, 0.355, 1);
  visibility: hidden;
  white-space: pre;
  z-index: 1;
}

[disabled][data-tooltip]:before {
  background-color: #454545;
}

.is-disabled[data-tooltip]:before {
  background-color: #454545;
}

[data-tooltip]:after {
  content: "";
  border: 0.5em solid transparent;
  border-top-color: #009944;
  font-size: 12px;
  font-size: 1.2rem;
  opacity: 0;
  
  position: absolute;
  left: 50%;
  top: -0.83333em;
  pointer-events: none;
  -webkit-transform: translate(-50%, 0.41667em);
      -ms-transform: translate(-50%, 0.41667em);
          transform: translate(-50%, 0.41667em);
  -webkit-transition: opacity 0.175s cubic-bezier(0.645, 0.045, 0.355, 1), visibility 0s 0.175s, -webkit-transform 0.175s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: opacity 0.175s cubic-bezier(0.645, 0.045, 0.355, 1), visibility 0s 0.175s, -webkit-transform 0.175s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: opacity 0.175s cubic-bezier(0.645, 0.045, 0.355, 1), transform 0.175s cubic-bezier(0.645, 0.045, 0.355, 1), visibility 0s 0.175s;
  transition: opacity 0.175s cubic-bezier(0.645, 0.045, 0.355, 1), transform 0.175s cubic-bezier(0.645, 0.045, 0.355, 1), visibility 0s 0.175s, -webkit-transform 0.175s cubic-bezier(0.645, 0.045, 0.355, 1);
  visibility: hidden;
  z-index: 1;
}

[disabled][data-tooltip]:after {
  border-top-color: #454545;
}

.is-disabled[data-tooltip]:after {
  border-top-color: #454545;
}

html:not(.sp) [data-tooltip]:hover:before, html:not(.sp) [data-tooltip]:hover:after, html:not(.sp) [data-tooltip]:focus:before, html:not(.sp) [data-tooltip]:focus:after {
  opacity: 1;
  
  -webkit-transform: translate(-50%, 0);
      -ms-transform: translate(-50%, 0);
          transform: translate(-50%, 0);
  -webkit-transition-delay: 0s;
          transition-delay: 0s;
  visibility: visible;
}

/*
#styleguide
定義、説明 ( dl )

@使用頻度 ★☆☆

dl, dt, dd のデフォルトスタイルを打ち消しているスタイルです。

```
<dl class="c-dl">
  <dt>dt</dt>
  <dd>dd</dd>
</dl>
```
*/
.c-dl {
  margin: 0;
}

.c-dl dd {
  margin: 0;
}

.fa,
[class^="tv-"] {
  -webkit-transition: color 0.45s ease-out 0s, box-shadow 0.45s ease-out 0s, text-shadow 0.45s ease-out 0s, background 0.45s ease-out 0s, background-color 0.45s ease-out 0s, opacity 0.45s ease-out 0s, border 0.45s ease-out 0s, -webkit-transform 0.45s ease-out 0s;
  transition: color 0.45s ease-out 0s, box-shadow 0.45s ease-out 0s, text-shadow 0.45s ease-out 0s, background 0.45s ease-out 0s, background-color 0.45s ease-out 0s, opacity 0.45s ease-out 0s, border 0.45s ease-out 0s, -webkit-transform 0.45s ease-out 0s;
  transition: transform 0.45s ease-out 0s, color 0.45s ease-out 0s, box-shadow 0.45s ease-out 0s, text-shadow 0.45s ease-out 0s, background 0.45s ease-out 0s, background-color 0.45s ease-out 0s, opacity 0.45s ease-out 0s, border 0.45s ease-out 0s;
  transition: transform 0.45s ease-out 0s, color 0.45s ease-out 0s, box-shadow 0.45s ease-out 0s, text-shadow 0.45s ease-out 0s, background 0.45s ease-out 0s, background-color 0.45s ease-out 0s, opacity 0.45s ease-out 0s, border 0.45s ease-out 0s, -webkit-transform 0.45s ease-out 0s;
}

/*
#styleguide
フレックスボックス ( flex )

@使用頻度 ★☆☆

```
```
*/
.c-flex {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.c-flex > * {
  -webkit-box-flex: 0;
  -webkit-flex: 0 1 auto;
      -ms-flex: 0 1 auto;
          flex: 0 1 auto;
}

/*
#styleguide
横並び ( row )

@使用頻度 ★★☆

```
```
*/
.c-row {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  margin-top: 100px;
  margin-bottom: 100px;
}

.c-row > * {
  -webkit-box-flex: 0;
  -webkit-flex: 0 1 auto;
      -ms-flex: 0 1 auto;
          flex: 0 1 auto;
}

.c-row__header {
  min-height: 0%;
}

.c-row--gutter .c-row__header {
  padding-right: 15px;
}

.c-row--gutter.c-row--reversal .c-row__header {
  padding-right: 0;
  padding-left: 15px;
}

.c-row--reversal .c-row__header {
  -webkit-box-ordinal-group: 2;
  -webkit-order: 1;
      -ms-flex-order: 1;
          order: 1;
}

.c-row__content {
  min-height: 0%;
}

.c-row--gutter .c-row__content {
  padding-left: 15px;
}

.c-row--gutter.c-row--reversal .c-row__content {
  padding-right: 15px;
  padding-left: 0;
}

/*
#styleguide
グリッド ( grid )

@使用頻度 ★★★

グリッドシステムを形成します。
組み合わせにより様々なレイアウトを表現することが可能です。
.
全スタイル共通で言えることですが、
例では div を使いますが、意味合いがあれば ul, ol などなどの別のタグでも問題ありません。

```
<div class="fn-preview__grid">

<!-- まずは基本形 -->
<div class="c-grid"><!-- グリッドを内包するための枠 -->
  <div class="c-col"></div><!-- グリッド1つ1つを表す要素 -->
</div>


<!--
グリッドには描画領域の横幅に合うように、いくつか種類があり、適用されるための条件があります

□大きさ早見表
xs   ... 412px
sm   ... 568px
md   ... 768px
lg   ... 1024px
-->

<div class="c-grid">
  <div class="c-col"></div> <!-- xs よりも小さい場合に適用 -->
  <div class="c-col-xs-12"></div><!-- 条件なし（前後が無ければ適用） -->
  <div class="c-col-sm-12"></div><!-- xs よりも大きい場合に適用 -->
  <div class="c-col-md-12"></div><!-- sm よりも大きい場合に適用 -->
  <div class="c-col-lg-12"></div><!-- md よりも大きい場合に適用 -->
</div>


<!--
グリッドは1行横12分割で計算されています

□横幅早見表
12   ... 100%
11   ... 91.66666667%
10   ... 83.33333333%
9    ... 75%
8    ... 66.66666667%
7    ... 58.33333333%
6    ... 50%
5    ... 41.66666667%
4    ... 33.33333333%
3    ... 25%
2    ... 16.66666667%
1    ... 8.33333333%
auto ... auto
-->
<div class="c-grid">
  <div class="c-col-xs-3">xs 3 +</div>
  <div class="c-col-xs-3">xs 3 +</div>
  <div class="c-col-xs-6">xs 6 = 12</div>

  <div class="c-col-md-3">md 3 +</div>
  <div class="c-col-md-3">md 3 +</div>
  <div class="c-col-md-6">md 6 = 12</div>

  <div class="c-col-base-3">base 3 +</div>
  <div class="c-col-base-3">base 3 +</div>
  <div class="c-col-base-6">base 6 = 12</div>
</div>


<br><br>


<!-- ひとつのグリッドに複数条件を設けることができます。この方法でグリッドのレスポンシブデザインを行います -->
<div class="c-grid">
  <div class="c-col-base-12  c-col-md-4  c-col-xs-3">base では横いっぱい、 md では 3分割、 xs は 2.5割</div>
  <div class="c-col-base-12  c-col-md-4  c-col-xs-3">base では横いっぱい、 md では 3分割、 xs は 2.5割</div>
  <div class="c-col-base-12  c-col-md-4  c-col-xs-6">base では横いっぱい、 md では 3分割、 xs は 5割</div>
</div>

</div>
```
*/
.c-grid {
  clear: both;
  display: block;
  font-family: AdobeBlank;
  list-style: none;
  margin: -15px -15px;
  padding: 0;
}

.c-grid > [class*="c-col"] {
  clear: both;
  display: inline-block;
  font-family: "YakuHanJP", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴシック Pro", Meiryo, "メイリオ", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  letter-spacing: normal;
  min-height: 1px;
  margin: 15px 0;
  padding: 0 15px;
  position: relative;
  vertical-align: top;
  word-spacing: normal;
}

.c-grid--flex {
  clear: both;
  display: block;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  font-family: AdobeBlank;
  list-style: none;
  margin: -15px -15px;
  padding: 0;
}

.c-grid--flex > [class*="c-col"] {
  clear: both;
  display: inline-block;
  display: block;
  -webkit-box-flex: 0;
  -webkit-flex: 0 1 auto;
      -ms-flex: 0 1 auto;
          flex: 0 1 auto;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  flex: 0 1 auto;
  letter-spacing: normal;
  min-height: 1px;
  position: relative;
  vertical-align: top;
  word-spacing: normal;
  font-family: "YakuHanJP",  "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴシック Pro", Meiryo, "メイリオ", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  letter-spacing: normal;
  min-height: 1px;
  margin: 15px 0;
  padding: 0 15px;
  position: relative;
  vertical-align: top;
  word-spacing: normal;
}

.c-grid--flex > [class*="c-col"] > * {
  width: 100%;
}

.c-grid--ib {
  clear: both;
  display: block;
  display: inline-block;
  vertical-align: top;
  font-family: AdobeBlank;
  list-style: none;
  margin: -15px -15px;
  padding: 0;
}

.c-grid--ib > [class*="c-col"] {
  clear: both;
  display: inline-block;
  font-family: "YakuHanJP", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴシック Pro", Meiryo, "メイリオ", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  letter-spacing: normal;
  min-height: 1px;
  margin: 15px 0;
  padding: 0 15px;
  position: relative;
  vertical-align: top;
  word-spacing: normal;
}

.c-grid > [class*="c-col"] {
  max-width: 100%;
}

.c-col-12_ {
  width: 97%;
}

.c-col-11_ {
  width: 88.66667%;
}

.c-col-10_ {
  width: 80.33333%;
}

.c-col-9_ {
  width: 72%;
}

.c-col-8_ {
  width: 63.66667%;
}

.c-col-7_ {
  width: 55.33333%;
}

.c-col-6_ {
  width: 47%;
}

.c-col-5_ {
  width: 38.66667%;
}

.c-col-4_ {
  width: 30.33333%;
}

.c-col-3_ {
  width: 22%;
}

.c-col-2_ {
  width: 13.66667%;
}

.c-col-1_ {
  width: 5.33333%;
}

.c-col-12 {
  width: 100%;
}

.c-col-11 {
  width: 91.66666667%;
}

.c-col-10 {
  width: 83.33333333%;
}

.c-col-9 {
  width: 75%;
}

.c-col-8 {
  width: 66.66666667%;
}

.c-col-7 {
  width: 58.33333333%;
}

.c-col-6 {
  width: 50%;
}

.c-col-5 {
  width: 41.66666667%;
}

.c-col-4 {
  width: 33.33333333%;
}

.c-col-3 {
  width: 25%;
}

.c-col-2 {
  width: 16.66666667%;
}

.c-col-1 {
  width: 8.33333333%;
}

.c-col-auto {
  width: auto;
}

.c-col-xs-12_ {
  width: 97%;
}

.c-col-xs-11_ {
  width: 88.66667%;
}

.c-col-xs-10_ {
  width: 80.33333%;
}

.c-col-xs-9_ {
  width: 72%;
}

.c-col-xs-8_ {
  width: 63.66667%;
}

.c-col-xs-7_ {
  width: 55.33333%;
}

.c-col-xs-6_ {
  width: 47%;
}

.c-col-xs-5_ {
  width: 38.66667%;
}

.c-col-xs-4_ {
  width: 30.33333%;
}

.c-col-xs-3_ {
  width: 22%;
}

.c-col-xs-2_ {
  width: 13.66667%;
}

.c-col-xs-1_ {
  width: 5.33333%;
}

.c-col-xs-12 {
  width: 100%;
}

.c-col-xs-11 {
  width: 91.66666667%;
}

.c-col-xs-10 {
  width: 83.33333333%;
}

.c-col-xs-9 {
  width: 75%;
}

.c-col-xs-8 {
  width: 66.66666667%;
}

.c-col-xs-7 {
  width: 58.33333333%;
}

.c-col-xs-6 {
  width: 50%;
}

.c-col-xs-5 {
  width: 41.66666667%;
}

.c-col-xs-4 {
  width: 33.33333333%;
}

.c-col-xs-3 {
  width: 25%;
}

.c-col-xs-2 {
  width: 16.66666667%;
}

.c-col-xs-1 {
  width: 8.33333333%;
}

.c-col-xs-auto {
  width: auto;
}

.c-grid--top > [class*="c-col"] {
  vertical-align: top;
}

.c-grid--middle > [class*="c-col"] {
  vertical-align: middle;
}

.c-grid--bottom > [class*="c-col"] {
  vertical-align: bottom;
}

.c-grid--x0 {
  margin-right: 0;
  margin-left: 0;
}

.c-grid--x0 > [class*="c-col"] {
  padding-right: 0;
  padding-left: 0;
}

.c-grid--y0 {
  margin-top: 0;
  margin-bottom: 0;
}

.c-grid--y0 > [class*="c-col"] {
  margin-top: 0;
  margin-bottom: 0;
}

.c-grid--x {
  margin-right: -15px;
  margin-left: -15px;
}

.c-grid--x > [class*="c-col"] {
  padding-right: 15px;
  padding-left: 15px;
}

.c-grid--x_ {
  margin-right: -7.5px;
  margin-left: -7.5px;
}

.c-grid--x_ > [class*="c-col"] {
  padding-right: 7.5px;
  padding-left: 7.5px;
}

.c-grid--y {
  margin-top: -15px;
  margin-bottom: -15px;
}

.c-grid--y > [class*="c-col"] {
  margin-top: 15px;
  margin-bottom: 15px;
}

.c-grid--y_ {
  margin-top: -7.5px;
  margin-bottom: -7.5px;
}

.c-grid--y_ > [class*="c-col"] {
  margin-top: 7.5px;
  margin-bottom: 7.5px;
}

.c-grid--x5 {
  margin-right: -5px;
  margin-left: -5px;
}

.c-grid--x5 > [class*="c-col"] {
  padding-right: 5px;
  padding-left: 5px;
}

.c-grid--x5_ {
  margin-right: -2.5px;
  margin-left: -2.5px;
}

.c-grid--x5_ > [class*="c-col"] {
  padding-right: 2.5px;
  padding-left: 2.5px;
}

.c-grid--y5 {
  margin-top: -5px;
  margin-bottom: -5px;
}

.c-grid--y5 > [class*="c-col"] {
  margin-top: 5px;
  margin-bottom: 5px;
}

.c-grid--y5_ {
  margin-top: -2.5px;
  margin-bottom: -2.5px;
}

.c-grid--y5_ > [class*="c-col"] {
  margin-top: 2.5px;
  margin-bottom: 2.5px;
}

.c-grid--x10 {
  margin-right: -10px;
  margin-left: -10px;
}

.c-grid--x10 > [class*="c-col"] {
  padding-right: 10px;
  padding-left: 10px;
}

.c-grid--x10_ {
  margin-right: -5px;
  margin-left: -5px;
}

.c-grid--x10_ > [class*="c-col"] {
  padding-right: 5px;
  padding-left: 5px;
}

.c-grid--y10 {
  margin-top: -10px;
  margin-bottom: -10px;
}

.c-grid--y10 > [class*="c-col"] {
  margin-top: 10px;
  margin-bottom: 10px;
}

.c-grid--y10_ {
  margin-top: -5px;
  margin-bottom: -5px;
}

.c-grid--y10_ > [class*="c-col"] {
  margin-top: 5px;
  margin-bottom: 5px;
}

.c-grid--x15 {
  margin-right: -15px;
  margin-left: -15px;
}

.c-grid--x15 > [class*="c-col"] {
  padding-right: 15px;
  padding-left: 15px;
}

.c-grid--x15_ {
  margin-right: -7.5px;
  margin-left: -7.5px;
}

.c-grid--x15_ > [class*="c-col"] {
  padding-right: 7.5px;
  padding-left: 7.5px;
}

.c-grid--y15 {
  margin-top: -15px;
  margin-bottom: -15px;
}

.c-grid--y15 > [class*="c-col"] {
  margin-top: 15px;
  margin-bottom: 15px;
}

.c-grid--y15_ {
  margin-top: -7.5px;
  margin-bottom: -7.5px;
}

.c-grid--y15_ > [class*="c-col"] {
  margin-top: 7.5px;
  margin-bottom: 7.5px;
}

.c-grid--x20 {
  margin-right: -20px;
  margin-left: -20px;
}

.c-grid--x20 > [class*="c-col"] {
  padding-right: 20px;
  padding-left: 20px;
}

.c-grid--x20_ {
  margin-right: -10px;
  margin-left: -10px;
}

.c-grid--x20_ > [class*="c-col"] {
  padding-right: 10px;
  padding-left: 10px;
}

.c-grid--y20 {
  margin-top: -20px;
  margin-bottom: -20px;
}

.c-grid--y20 > [class*="c-col"] {
  margin-top: 20px;
  margin-bottom: 20px;
}

.c-grid--y20_ {
  margin-top: -10px;
  margin-bottom: -10px;
}

.c-grid--y20_ > [class*="c-col"] {
  margin-top: 10px;
  margin-bottom: 10px;
}

.c-grid--x25 {
  margin-right: -25px;
  margin-left: -25px;
}

.c-grid--x25 > [class*="c-col"] {
  padding-right: 25px;
  padding-left: 25px;
}

.c-grid--x25_ {
  margin-right: -12.5px;
  margin-left: -12.5px;
}

.c-grid--x25_ > [class*="c-col"] {
  padding-right: 12.5px;
  padding-left: 12.5px;
}

.c-grid--y25 {
  margin-top: -25px;
  margin-bottom: -25px;
}

.c-grid--y25 > [class*="c-col"] {
  margin-top: 25px;
  margin-bottom: 25px;
}

.c-grid--y25_ {
  margin-top: -12.5px;
  margin-bottom: -12.5px;
}

.c-grid--y25_ > [class*="c-col"] {
  margin-top: 12.5px;
  margin-bottom: 12.5px;
}

.c-grid--x30 {
  margin-right: -30px;
  margin-left: -30px;
}

.c-grid--x30 > [class*="c-col"] {
  padding-right: 30px;
  padding-left: 30px;
}

.c-grid--x30_ {
  margin-right: -15px;
  margin-left: -15px;
}

.c-grid--x30_ > [class*="c-col"] {
  padding-right: 15px;
  padding-left: 15px;
}

.c-grid--y30 {
  margin-top: -30px;
  margin-bottom: -30px;
}

.c-grid--y30 > [class*="c-col"] {
  margin-top: 30px;
  margin-bottom: 30px;
}

.c-grid--y30_ {
  margin-top: -15px;
  margin-bottom: -15px;
}

.c-grid--y30_ > [class*="c-col"] {
  margin-top: 15px;
  margin-bottom: 15px;
}

.c-grid--x35 {
  margin-right: -35px;
  margin-left: -35px;
}

.c-grid--x35 > [class*="c-col"] {
  padding-right: 35px;
  padding-left: 35px;
}

.c-grid--x35_ {
  margin-right: -17.5px;
  margin-left: -17.5px;
}

.c-grid--x35_ > [class*="c-col"] {
  padding-right: 17.5px;
  padding-left: 17.5px;
}

.c-grid--y35 {
  margin-top: -35px;
  margin-bottom: -35px;
}

.c-grid--y35 > [class*="c-col"] {
  margin-top: 35px;
  margin-bottom: 35px;
}

.c-grid--y35_ {
  margin-top: -17.5px;
  margin-bottom: -17.5px;
}

.c-grid--y35_ > [class*="c-col"] {
  margin-top: 17.5px;
  margin-bottom: 17.5px;
}

.c-grid--x40 {
  margin-right: -40px;
  margin-left: -40px;
}

.c-grid--x40 > [class*="c-col"] {
  padding-right: 40px;
  padding-left: 40px;
}

.c-grid--x40_ {
  margin-right: -20px;
  margin-left: -20px;
}

.c-grid--x40_ > [class*="c-col"] {
  padding-right: 20px;
  padding-left: 20px;
}

.c-grid--y40 {
  margin-top: -40px;
  margin-bottom: -40px;
}

.c-grid--y40 > [class*="c-col"] {
  margin-top: 40px;
  margin-bottom: 40px;
}

.c-grid--y40_ {
  margin-top: -20px;
  margin-bottom: -20px;
}

.c-grid--y40_ > [class*="c-col"] {
  margin-top: 20px;
  margin-bottom: 20px;
}

.c-grid--x45 {
  margin-right: -45px;
  margin-left: -45px;
}

.c-grid--x45 > [class*="c-col"] {
  padding-right: 45px;
  padding-left: 45px;
}

.c-grid--x45_ {
  margin-right: -22.5px;
  margin-left: -22.5px;
}

.c-grid--x45_ > [class*="c-col"] {
  padding-right: 22.5px;
  padding-left: 22.5px;
}

.c-grid--y45 {
  margin-top: -45px;
  margin-bottom: -45px;
}

.c-grid--y45 > [class*="c-col"] {
  margin-top: 45px;
  margin-bottom: 45px;
}

.c-grid--y45_ {
  margin-top: -22.5px;
  margin-bottom: -22.5px;
}

.c-grid--y45_ > [class*="c-col"] {
  margin-top: 22.5px;
  margin-bottom: 22.5px;
}

.c-grid--x50 {
  margin-right: -50px;
  margin-left: -50px;
}

.c-grid--x50 > [class*="c-col"] {
  padding-right: 50px;
  padding-left: 50px;
}

.c-grid--x50_ {
  margin-right: -25px;
  margin-left: -25px;
}

.c-grid--x50_ > [class*="c-col"] {
  padding-right: 25px;
  padding-left: 25px;
}

.c-grid--y50 {
  margin-top: -50px;
  margin-bottom: -50px;
}

.c-grid--y50 > [class*="c-col"] {
  margin-top: 50px;
  margin-bottom: 50px;
}

.c-grid--y50_ {
  margin-top: -25px;
  margin-bottom: -25px;
}

.c-grid--y50_ > [class*="c-col"] {
  margin-top: 25px;
  margin-bottom: 25px;
}

.c-grid--x55 {
  margin-right: -55px;
  margin-left: -55px;
}

.c-grid--x55 > [class*="c-col"] {
  padding-right: 55px;
  padding-left: 55px;
}

.c-grid--x55_ {
  margin-right: -27.5px;
  margin-left: -27.5px;
}

.c-grid--x55_ > [class*="c-col"] {
  padding-right: 27.5px;
  padding-left: 27.5px;
}

.c-grid--y55 {
  margin-top: -55px;
  margin-bottom: -55px;
}

.c-grid--y55 > [class*="c-col"] {
  margin-top: 55px;
  margin-bottom: 55px;
}

.c-grid--y55_ {
  margin-top: -27.5px;
  margin-bottom: -27.5px;
}

.c-grid--y55_ > [class*="c-col"] {
  margin-top: 27.5px;
  margin-bottom: 27.5px;
}

.c-grid--x60 {
  margin-right: -60px;
  margin-left: -60px;
}

.c-grid--x60 > [class*="c-col"] {
  padding-right: 60px;
  padding-left: 60px;
}

.c-grid--x60_ {
  margin-right: -30px;
  margin-left: -30px;
}

.c-grid--x60_ > [class*="c-col"] {
  padding-right: 30px;
  padding-left: 30px;
}

.c-grid--y60 {
  margin-top: -60px;
  margin-bottom: -60px;
}

.c-grid--y60 > [class*="c-col"] {
  margin-top: 60px;
  margin-bottom: 60px;
}

.c-grid--y60_ {
  margin-top: -30px;
  margin-bottom: -30px;
}

.c-grid--y60_ > [class*="c-col"] {
  margin-top: 30px;
  margin-bottom: 30px;
}

.c-grid--x65 {
  margin-right: -65px;
  margin-left: -65px;
}

.c-grid--x65 > [class*="c-col"] {
  padding-right: 65px;
  padding-left: 65px;
}

.c-grid--x65_ {
  margin-right: -32.5px;
  margin-left: -32.5px;
}

.c-grid--x65_ > [class*="c-col"] {
  padding-right: 32.5px;
  padding-left: 32.5px;
}

.c-grid--y65 {
  margin-top: -65px;
  margin-bottom: -65px;
}

.c-grid--y65 > [class*="c-col"] {
  margin-top: 65px;
  margin-bottom: 65px;
}

.c-grid--y65_ {
  margin-top: -32.5px;
  margin-bottom: -32.5px;
}

.c-grid--y65_ > [class*="c-col"] {
  margin-top: 32.5px;
  margin-bottom: 32.5px;
}

.c-grid--x70 {
  margin-right: -70px;
  margin-left: -70px;
}

.c-grid--x70 > [class*="c-col"] {
  padding-right: 70px;
  padding-left: 70px;
}

.c-grid--x70_ {
  margin-right: -35px;
  margin-left: -35px;
}

.c-grid--x70_ > [class*="c-col"] {
  padding-right: 35px;
  padding-left: 35px;
}

.c-grid--y70 {
  margin-top: -70px;
  margin-bottom: -70px;
}

.c-grid--y70 > [class*="c-col"] {
  margin-top: 70px;
  margin-bottom: 70px;
}

.c-grid--y70_ {
  margin-top: -35px;
  margin-bottom: -35px;
}

.c-grid--y70_ > [class*="c-col"] {
  margin-top: 35px;
  margin-bottom: 35px;
}

.c-grid--x75 {
  margin-right: -75px;
  margin-left: -75px;
}

.c-grid--x75 > [class*="c-col"] {
  padding-right: 75px;
  padding-left: 75px;
}

.c-grid--x75_ {
  margin-right: -37.5px;
  margin-left: -37.5px;
}

.c-grid--x75_ > [class*="c-col"] {
  padding-right: 37.5px;
  padding-left: 37.5px;
}

.c-grid--y75 {
  margin-top: -75px;
  margin-bottom: -75px;
}

.c-grid--y75 > [class*="c-col"] {
  margin-top: 75px;
  margin-bottom: 75px;
}

.c-grid--y75_ {
  margin-top: -37.5px;
  margin-bottom: -37.5px;
}

.c-grid--y75_ > [class*="c-col"] {
  margin-top: 37.5px;
  margin-bottom: 37.5px;
}

/*
#styleguide
アイコン ( icon )

@使用頻度 ★★☆

```
```
*/
.c-icon {
  display: table;
}

.c-icon > [class*="p-icon-"],
.c-icon > [class*="tv-"],
.c-icon > .fa {
  display: table-cell;
  color: #009944;
}

.c-icon > [class*="p-icon-"]:before,
.c-icon > [class*="tv-"]:before,
.c-icon > .fa:before {
  display: inline-block;
  margin-right: .25em;
  vertical-align: .025em;
}

/*
#styleguide
リスト ( list )

@使用頻度 ★☆☆

ul, ol, li のデフォルトスタイルを打ち消しているスタイルです。

```
<ul class="c-list">
  <li>list</li>
  <li>リスト</li>
</ul>
```
*/
.c-list {
  list-style: none;
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 0;
}

[class*="c-list"] > li[data-list] {
  padding-left: 1em;
}

[class*="c-list"] > li[data-list]:before {
  display: inline-block;
  content: attr(data-list);
  font-family: "FontAwesome", "YakuHanJP", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴシック Pro", Meiryo, "メイリオ", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  margin-left: -1em;
  text-align: center;
  width: 1em;
}

[class*="c-list"] > li[data-list="・"] {
  padding-left: .65em;
}

[class*="c-list"] > li[data-list="・"]:before {
  margin-left: -.65em;
  width: .65em;
}

/*
 * <div class="c-loading"></div>
 */
.c-loadingest {
  position: relative;
  z-index: 2;
}

.c-loading {
  z-index: 1;
  position: relative;
  display: block;
  width: 40px;
  height: 20px;
}

.c-loading:before, .c-loading:after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 20px;
}

.c-loading:before {
  background: #009944;
  left: -5px;
  -webkit-animation: loading-before 1.5s infinite ease-in-out;
          animation: loading-before 1.5s infinite ease-in-out;
}

.c-loading:after {
  background: #fff100;
  right: -5px;
  -webkit-animation: loading-after 1.5s infinite ease-in-out;
          animation: loading-after 1.5s infinite ease-in-out;
}

.c-loading.c-loading--ver2:before {
  background-color: #009944;
}

.c-loading.c-loading--center {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -10px;
  margin-left: -20px;
}

@-webkit-keyframes loading-before {
  0% {
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
  }
  50% {
    -webkit-transform: translateX(30px);
            transform: translateX(30px);
  }
  100% {
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
    z-index: 1;
  }
}

@keyframes loading-before {
  0% {
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
  }
  50% {
    -webkit-transform: translateX(30px);
            transform: translateX(30px);
  }
  100% {
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
    z-index: 1;
  }
}

@-webkit-keyframes loading-after {
  0% {
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
  }
  50% {
    -webkit-transform: translateX(-30px);
            transform: translateX(-30px);
  }
  100% {
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
  }
}

@keyframes loading-after {
  0% {
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
  }
  50% {
    -webkit-transform: translateX(-30px);
            transform: translateX(-30px);
  }
  100% {
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
  }
}

.c-map-container {
  width: 100%;
  position: relative;
}

.c-map-container .c-loading {
  z-index: 0;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}

.c-map {
  position: relative;
  z-index: 2;
  height: 100%;
  width: 100%;
}

/*
#styleguide
動画な iframe のレスポンシブ用ラッパー ( movie )

@使用頻度 ★☆☆

```
<div class="c-movie">
  <iframe src="https://www.youtube.com/embed/HB4QrJyWqEw?feature=oembed" allowfullscreen="" height="375" frameborder="0" width="500"></iframe>
</div>
```
*/
.c-movie {
  position: relative;
  padding-top: 56.25%;
  height: 0;
  overflow: hidden;
}

.c-movie > iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/*
#styleguide
フレーズ ( phrase )

@使用頻度 ★★★

文節で区切る
text-align: center; の時に見た目を意識する
.
参考: http://dotgraphy.com/notes/entry-141.html

```
<p class="u-xxlarge  u-textcenter">
  <span class="c-phrase">2005年に</span>
  <span class="c-phrase">1年の</span>
  <span class="c-phrase">総括</span>
  <span class="c-phrase">として、</span>
  <span class="c-phrase">撮った写真、</span>
  <span class="c-phrase">旅行先、</span>
  <span class="c-phrase">聞いた音楽、</span>
  <span class="c-phrase">読んだ本</span>
  <span class="c-phrase">などを</span>
  <span class="c-phrase">手作業で</span>
  <span class="c-phrase">まとめたそうです。</span>
  <span class="c-phrase">りんご</span>
  <span class="c-phrase">ばなな</span>
  <span class="c-phrase">きのこ</span>
  <span class="c-phrase">みかん</span>
  <span class="c-phrase">たけのこ</span>
  <span class="c-phrase">2005年に</span>
  <span class="c-phrase">1年の</span>
  <span class="c-phrase">総括</span>
  <span class="c-phrase">として、</span>
  <span class="c-phrase">撮った写真、</span>
  <span class="c-phrase">旅行先、</span>
  <span class="c-phrase">聞いた音楽、</span>
  <span class="c-phrase">読んだ本</span>
  <span class="c-phrase">などを</span>
  <span class="c-phrase">手作業で</span>
  <span class="c-phrase">まとめたそうです。</span>
  <span class="c-phrase">りんご</span>
  <span class="c-phrase">ばなな</span>
  <span class="c-phrase">きのこ</span>
  <span class="c-phrase">みかん</span>
  <span class="c-phrase">たけのこ</span>
</p>
```
*/
.c-phrase {
  display: inline-block;
}

/*
#styleguide
パラグラフ ( paragraph )

```
```
*/
.c-paragraph {
  font-size: 16px;
  font-size: 1.6rem;
  line-height: 1.8;
}

.c-paragraph-text {
  font-size: 14px;
  font-size: 1.4rem;
  line-height: 1.4;
}

.c-paragraph-ligth {
  letter-spacing: .045em;
}

.c-paragraph-top-arrange {
  margin-top: -.45em;
}

/* Slider */
.slick-slider {
  position: relative;
  display: block;
  box-sizing: border-box;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -ms-touch-action: pan-y;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}

.slick-list {
  position: relative;
  overflow: hidden;
  display: block;
  margin: 0;
  padding: 0;
}

.slick-list:focus {
  outline: none;
}

.slick-list.dragging {
  cursor: pointer;
  cursor: hand;
  outline: none;
}

.slick-slider .slick-track,
.slick-slider .slick-list {
  -webkit-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.slick-track {
  position: relative;
  left: 0;
  top: 0;
  display: block;
}

.slick-track:before, .slick-track:after {
  content: "";
  display: table;
}

.slick-track:after {
  clear: both;
}

.slick-loading .slick-track {
  visibility: hidden;
}

.slick-slide {
  float: left;
  height: 100%;
  min-height: 1px;
  display: none;
}

[dir="rtl"] .slick-slide {
  float: right;
}

.slick-slide img {
  display: block;
}

.slick-slide.slick-loading img {
  display: none;
}

.slick-slide.dragging img {
  pointer-events: none;
}

.slick-initialized .slick-slide {
  display: block;
}

.slick-loading .slick-slide {
  visibility: hidden;
}

.slick-vertical .slick-slide {
  display: block;
  height: auto;
  border: 1px solid transparent;
}

.slick-slide:focus {
  outline: none;
}

.slick-arrow.slick-hidden {
  display: none;
}

/* Slider */
/* Icons */
/* Arrows */
.slick-prev,
.slick-next {
  position: absolute;
  display: block;
  line-height: 0px;
  font-size: 0px;
  cursor: pointer;
  background: transparent;
  color: transparent;
  top: 50%;
  -webkit-transform: translate(0, -50%);
      -ms-transform: translate(0, -50%);
          transform: translate(0, -50%);
  padding: 0;
  border: none;
  outline: none;
}

.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before {
  opacity: .5;
  
}

/* Dots */
.slick-dotted.slick-slider {
  margin-bottom: 30px;
}

.slick-dots {
  position: absolute;
  bottom: -25px;
  list-style: none;
  display: block;
  text-align: center;
  padding: 0;
  margin: 0;
  width: 100%;
}

.slick-dots li {
  position: relative;
  display: inline-block;
  height: 20px;
  width: 20px;
  margin: 0 5px;
  padding: 0;
  cursor: pointer;
}

.slick-dots li button {
  border: 0;
  background: transparent;
  display: block;
  height: 20px;
  width: 20px;
  outline: none;
  line-height: 0px;
  font-size: 0px;
  color: transparent;
  padding: 5px;
  cursor: pointer;
}

.slick-dots li button:hover, .slick-dots li button:focus {
  outline: none;
}

.slick-dots li button:hover:before, .slick-dots li button:focus:before {
  opacity: 1;
  
}

.slick-dots li button:before {
  position: absolute;
  top: 0;
  left: 0;
  content: "•";
  width: 20px;
  height: 20px;
  font-family: "slick";
  font-size: 6px;
  line-height: 20px;
  text-align: center;
  color: black;
  opacity: 0.25;
  
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.slick-dots li.slick-active button:before {
  color: black;
  opacity: 0.75;
  
}

/*
 * slick.js
 */
[data-slick] {
  /*
   * 左右間隔
   */
  /*
   * 左右を常に見える状態に
   */
  /*
   * スペース狭め
   */
  /*
   * ドット関係
   */
  /*
   * prev next 関係
   */
  /*
   * group
   */
}

[data-slick].slider-test .slick-slide {
  min-height: 300px;
  background-color: #f4f4f4;
}

[data-slick] .slick-slide {
  margin-left: 15px;
  margin-right: 15px;
}

[data-slick] .slick-list {
  margin-left: -15px;
  margin-right: -15px;
  padding-left: 20px;
  padding-right: 20px;
}

[data-slick][data-slick-opt="visible"] > .slick-list {
  overflow: visible !important;
}

[data-slick][data-slick-o="space-s"] .slick-slide {
  margin-left: 5px;
  margin-right: 5px;
}

[data-slick][data-slick-o="space-s"] .slick-list {
  margin-left: -5px;
  margin-right: -5px;
}

[data-slick].slick-dotted.slick-slider {
  margin-bottom: 30px;
}

[data-slick] .slick-dots {
  bottom: -30px;
}

[data-slick] .slick-dots li {
  width: 10px;
  height: 10px;
  margin: 0 5px;
}

[data-slick] .slick-dots li.slick-active button {
  background-color: #009944;
}

[data-slick] .slick-dots button {
  width: 10px;
  height: 10px;
  padding: 0;
  border-radius: 50%;
  background-color: rgba(0, 153, 68, 0.5);
  -webkit-transition: background-color 0.45s ease 0s, -webkit-transform 0.45s ease 0s;
  transition: background-color 0.45s ease 0s, -webkit-transform 0.45s ease 0s;
  transition: background-color 0.45s ease 0s, transform 0.45s ease 0s;
  transition: background-color 0.45s ease 0s, transform 0.45s ease 0s, -webkit-transform 0.45s ease 0s;
}

html:not(.sp) [data-slick] .slick-dots button:hover, html:not(.sp) [data-slick] .slick-dots button:focus {
  background-color: #009944;
  -webkit-transform: translateY(-2px);
      -ms-transform: translateY(-2px);
          transform: translateY(-2px);
}

[data-slick] .slick-dots button:before {
  content: none;
}

[data-slick] .slick-arrow {
  top: 50%;
  border-radius: 8px;
  width: 40px;
  height: 60px;
  background-size: 7px 14px;
  background-image: none;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.5);
  -webkit-transition: background-color .5s ease 0s,
 box-shadow .5s ease 0s;
  transition: background-color .5s ease 0s,
 box-shadow .5s ease 0s;
}

[data-slick] .slick-arrow:before {
  line-height: 1;
  font-size: 18px;
  font-size: 1.8rem;
  font-family: "FontAwesome";
  position: absolute;
  font-smoothing: antialiased;
  -webkit-font-smoothing: antialiased;
  top: 50%;
  display: inline-block;
  margin-top: -.5em;
  color: #fff;
}

html:not(.sp) [data-slick] .slick-arrow:hover, html:not(.sp) [data-slick] .slick-arrow:focus {
  background-color: #ff6666;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
  top: 50%;
}

[data-slick] .slick-prev {
  left: 0;
  z-index: 2;
}

[data-slick] .slick-prev:before {
  content: "\f104";
  left: 42%;
}

[data-slick] .slick-next {
  right: 0;
  z-index: 2;
}

[data-slick] .slick-next:before {
  content: "\f105";
  right: 39%;
}

[data-slick][data-slick-group] .slick-slide {
  cursor: pointer !important;
}

.p-slick.p-slick--gNav {
  margin-top: 20px;
  padding-left: 30px;
  padding-right: 30px;
}

.p-slick.p-slick--gNav .slick-slide {
  margin-left: 1px;
  margin-right: 1px;
}

.p-slick.p-slick--gNav .slick-list {
  margin-left: -1px;
  margin-right: -1px;
}

/*
          <div class="p-slick" data-slick="{slidesToShow: 1, fade: false, autoplay: false}" data-slick-group="js-slider-groupNav" id="js-slider-groupMain">
            <div>
              <img src="../../assets/images/sample/sample-gallery01.jpg" width="570" height="360" alt="">
            </div>
            <div>
              <img src="../../assets/images/sample/sample-gallery02.jpg" width="570" height="360" alt="">
            </div>
            <div>
              <img src="../../assets/images/sample/sample-gallery03.jpg" width="570" height="360" alt="">
            </div>
            <div>
              <img src="../../assets/images/sample/sample-gallery04.jpg" width="570" height="360" alt="">
            </div>
            <div>
              <img src="../../assets/images/sample/sample-gallery05.jpg" width="570" height="360" alt="">
            </div>
            <div>
              <img src="../../assets/images/sample/sample-gallery01.jpg" width="570" height="360" alt="">
            </div>
          </div>
          <div class="p-slick  p-slick--gNav" data-slick="{slidesToShow: 5, arrows: true, autoplay: false, responsive:[{breakpoint: 528,settings: { slidesToShow: 3 }}]}" data-slick-group="js-slider-groupMain" id="js-slider-groupNav" data-slick-opt="space-s">
            <div>
              <img src="../../assets/images/sample/sample-gallery01.jpg" width="100" height="63" alt="">
            </div>
            <div>
              <img src="../../assets/images/sample/sample-gallery02.jpg" width="100" height="63" alt="">
            </div>
            <div>
              <img src="../../assets/images/sample/sample-gallery03.jpg" width="100" height="63" alt="">
            </div>
            <div>
              <img src="../../assets/images/sample/sample-gallery04.jpg" width="100" height="63" alt="">
            </div>
            <div>
              <img src="../../assets/images/sample/sample-gallery05.jpg" width="100" height="63" alt="">
            </div>
            <div>
              <img src="../../assets/images/sample/sample-gallery01.jpg" width="100" height="63" alt="">
            </div>
          </div>
 */
/*
#styleguide
名称：テーブル
class：table

table のデフォルトスタイルを打ち消しているスタイルです。

@カテゴリー table
@使用頻度
@--top
@--middle
@--bottom
@--md-row

```
<table class="c-table">
  <tbody>
    <tr>
      <th>th</th>
      <td>td</td>
    </tr>
  </tbody>
</table>

<table class="c-table  c-table--top">
  <tbody>
    <tr>
      <th>th<br>th</th>
      <td>td</td>
    </tr>
  </tbody>
</table>

<table class="c-table  c-table--middle">
  <tbody>
    <tr>
      <th>th<br>th</th>
      <td>td</td>
    </tr>
  </tbody>
</table>

<table class="c-table  c-table--md-row  c-table--bottom">
  <tbody>
    <tr>
      <th>th<br>th</th>
      <td>td</td>
    </tr>
  </tbody>
</table>
```
*/
.c-table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  border: 0;
}

.c-table.c-table--top th, .c-table.c-table--top td {
  vertical-align: top;
}

.c-table.c-table--middle th, .c-table.c-table--middle td {
  vertical-align: middle;
}

.c-table.c-table--bottom th, .c-table.c-table--bottom td {
  vertical-align: bottom;
}

.c-table-scroll {
  overflow-x: auto;
  background: -webkit-linear-gradient(right, rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.4)) 0 0/20px 100%, -webkit-linear-gradient(left, rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.4)) right/20px 100%;
  background: linear-gradient(to left, rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.4)) 0 0/20px 100%, linear-gradient(to right, rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.4)) right/20px 100%;
  background-repeat: no-repeat;
  background-attachment: scroll;
  -webkit-overflow-scrolling: touch;
}

.c-table-scroll > table {
  background: -webkit-linear-gradient(right, rgba(255, 255, 255, 0), white 15px) 0 0/50px 100%, -webkit-linear-gradient(left, rgba(255, 255, 255, 0), white 15px) right/50px 100%;
  background: linear-gradient(to left, rgba(255, 255, 255, 0), white 15px) 0 0/50px 100%, linear-gradient(to right, rgba(255, 255, 255, 0), white 15px) right/50px 100%;
  background-repeat: no-repeat;
  background-attachment: local;
  border-bottom: 1px solid #CCC;
  border-collapse: collapse;
}

.c-table-scroll > table th, .c-table-scroll > table td {
  white-space: nowrap;
}

.c-table-scroll > table td {
  background-color: transparent;
}

/*
#styleguide
wpedit

```
<div class="c-wpedit">
 記事内容
</div>
```
*/
.c-wpedit :first-child {
  margin-top: 0;
}

.c-wpedit :last-child {
  margin-bottom: 0;
}

.c-wpedit h1,
.c-wpedit h2,
.c-wpedit h3,
.c-wpedit h4,
.c-wpedit h5,
.c-wpedit h6 {
  clear: both;
  font-weight: 900;
  margin: 56px 0 28px;
}

.c-wpedit h1 {
  font-size: 33px;
  line-height: 1.2727272727;
}

.c-wpedit h2 {
  font-size: 28px;
  line-height: 1.25;
}

.c-wpedit h3 {
  font-size: 23px;
  line-height: 1.2173913043;
}

.c-wpedit h4,
.c-wpedit h5,
.c-wpedit h6 {
  font-size: 19px;
  line-height: 1.1052631579;
}

.c-wpedit h4 {
  letter-spacing: 0.13333em;
  text-transform: uppercase;
}

.c-wpedit h6 {
  font-style: italic;
}

.c-wpedit h1:first-child,
.c-wpedit h2:first-child,
.c-wpedit h3:first-child,
.c-wpedit h4:first-child,
.c-wpedit h5:first-child,
.c-wpedit h6:first-child {
  margin-top: 0;
}

.c-wpedit p {
  margin: 0 0 28px;
}

.c-wpedit b,
.c-wpedit strong {
  font-weight: 700;
}

.c-wpedit dfn,
.c-wpedit cite,
.c-wpedit em,
.c-wpedit i {
  font-style: italic;
}

.c-wpedit blockquote {
  border-left: 4px solid #1a1a1a;
  color: #686868;
  font-size: 19px;
  font-style: italic;
  line-height: 1.4736842105;
  margin-bottom: 28px;
  padding: 0 0 0 24px;
}

.c-wpedit blockquote blockquote:not(.alignleft):not(.alignright) {
  margin-left: 0;
}

.c-wpedit blockquote:before,
.c-wpedit blockquote:after {
  content: "";
  display: table;
}

.c-wpedit blockquote:after {
  clear: both;
}

.c-wpedit blockquote > :last-child {
  margin-bottom: 0;
}

.c-wpedit blockquote cite,
.c-wpedit blockquote small {
  color: #1a1a1a;
  font-size: 16px;
  line-height: 1.75;
}

.c-wpedit blockquote em,
.c-wpedit blockquote i,
.c-wpedit blockquote cite {
  font-style: normal;
}

.c-wpedit blockquote strong,
.c-wpedit blockquote b {
  font-weight: 400;
}

.c-wpedit blockquote.alignleft,
.c-wpedit blockquote.alignright {
  border: 0 solid #1a1a1a;
  border-top-width: 4px;
  padding: 18px 0 0;
  width: calc(50% - 14px);
}

.c-wpedit address {
  font-style: italic;
  margin: 0 0 28px;
}

.c-wpedit code,
.c-wpedit kbd,
.c-wpedit tt,
.c-wpedit var,
.c-wpedit samp,
.c-wpedit pre {
  font-family: Inconsolata, monospace;
}

.c-wpedit pre {
  border: 1px solid #d1d1d1;
  font-size: 16px;
  line-height: 1.3125;
  margin: 0 0 28px;
  max-width: 100%;
  overflow: auto;
  padding: 14px;
  white-space: pre;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.c-wpedit code {
  background-color: #d1d1d1;
  padding: 2px 4px;
}

.c-wpedit abbr[title] {
  border-bottom: 1px dotted #d1d1d1;
  cursor: help;
}

.c-wpedit mark,
.c-wpedit ins {
  background: #007acc;
  color: #fff;
  padding: 2px 4px;
  text-decoration: none;
}

.c-wpedit sup,
.c-wpedit sub {
  font-size: 75%;
  height: 0;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

.c-wpedit sub {
  top: -6px;
}

.c-wpedit sup {
  bottom: -3px;
}

.c-wpedit small {
  font-size: 80%;
}

.c-wpedit big {
  font-size: 125%;
}

.c-wpedit hr {
  background-color: #d1d1d1;
  border: 0;
  height: 1px;
  margin-bottom: 28px;
}

.c-wpedit ul {
  list-style: disc;
}

.c-wpedit ol {
  list-style: decimal;
}

.c-wpedit li > ul,
.c-wpedit li > ol {
  margin-bottom: 0;
}

.c-wpedit li > ul,
.c-wpedit blockquote > ul {
  margin-left: 20px;
}

.c-wpedit li > ol,
.c-wpedit blockquote > ol {
  margin-left: 24px;
}

.c-wpedit dl {
  margin: 0 0 28px;
}

.c-wpedit dt {
  font-weight: bold;
}

.c-wpedit dd {
  margin: 0 0 28px;
}

.c-wpedit table,
.c-wpedit th,
.c-wpedit td,
.c-wpedit .mce-item-table,
.c-wpedit .mce-item-table th,
.c-wpedit .mce-item-table td {
  border: 1px solid #d1d1d1;
}

.c-wpedit table a {
  color: #007acc;
}

.c-wpedit table,
.c-wpedit .mce-item-table {
  border-collapse: separate;
  border-spacing: 0;
  border-width: 1px 0 0 1px;
  margin: 0 0 28px;
  width: 100%;
}

.c-wpedit table th,
.c-wpedit .mce-item-table th,
.c-wpedit table caption {
  border-width: 0 1px 1px 0;
  font-size: 16px;
  font-weight: 700;
  padding: 7px;
  text-align: left;
  vertical-align: baseline;
}

.c-wpedit table td,
.c-wpedit .mce-item-table td {
  border-width: 0 1px 1px 0;
  font-size: 16px;
  padding: 7px;
  vertical-align: baseline;
}

.c-wpedit img {
  border: 0;
  height: auto;
  max-width: 100%;
  vertical-align: middle;
}

.c-wpedit a img {
  display: block;
}

.c-wpedit figure {
  margin: 0;
}

.c-wpedit del {
  opacity: 0.8;
  
}

.c-wpedit a {
  box-shadow: 0 1px 0 0 currentColor;
  color: #007acc;
  text-decoration: none;
}

.c-wpedit fieldset {
  border: 1px solid #d1d1d1;
  margin: 0 0 28px;
  padding: 14px;
}

.c-wpedit .alignleft {
  float: left;
  margin: 6px 28px 28px 0;
}

.c-wpedit .alignright {
  float: right;
  margin: 6px 0 28px 28px;
}

.c-wpedit .aligncenter {
  clear: both;
  display: block;
  margin: 0 auto 28px;
}

.c-wpedit .wp-caption {
  background: transparent;
  border: none;
  margin-bottom: 28px;
  max-width: 100%;
  padding: 0;
  text-align: inherit;
}

.c-wpedit .wp-caption-text,
.c-wpedit .wp-caption-dd {
  color: #686868;
  font-size: 13px;
  font-style: italic;
  line-height: 1.6153846154;
  padding-top: 7px;
}

.c-wpedit .mce-content-body .wpview-wrap {
  margin-bottom: 28px;
}

.c-wpedit .gallery {
  margin: 0 -1.1666667%;
  padding: 0;
}

.c-wpedit .gallery .gallery-item {
  display: inline-block;
  max-width: 33.33%;
  padding: 0 1.1400652% 2.2801304%;
  text-align: center;
  vertical-align: top;
  width: 100%;
}

.c-wpedit .gallery-columns-1 .gallery-item {
  max-width: 100%;
}

.c-wpedit .gallery-columns-2 .gallery-item {
  max-width: 50%;
}

.c-wpedit .gallery-columns-4 .gallery-item {
  max-width: 25%;
}

.c-wpedit .gallery-columns-5 .gallery-item {
  max-width: 20%;
}

.c-wpedit .gallery-columns-6 .gallery-item {
  max-width: 16.66%;
}

.c-wpedit .gallery-columns-7 .gallery-item {
  max-width: 14.28%;
}

.c-wpedit .gallery-columns-8 .gallery-item {
  max-width: 12.5%;
}

.c-wpedit .gallery-columns-9 .gallery-item {
  max-width: 11.11%;
}

.c-wpedit .gallery .gallery-caption {
  font-size: 13px;
  margin: 0;
}

.c-wpedit .gallery-columns-6 .gallery-caption,
.c-wpedit .gallery-columns-7 .gallery-caption,
.c-wpedit .gallery-columns-8 .gallery-caption,
.c-wpedit .gallery-columns-9 .gallery-caption {
  display: none;
}

.c-wpedit .wp-audio-shortcode a,
.c-wpedit .wp-playlist a {
  box-shadow: none;
}

.c-wpedit .mce-content-body .wp-audio-playlist {
  margin: 0;
  padding-bottom: 0;
}

.c-wpedit .mce-content-body .wp-playlist-tracks {
  margin-top: 0;
}

.c-wpedit .mce-content-body .wp-playlist-item {
  padding: 10px 0;
}

.c-wpedit .mce-content-body .wp-playlist-item-length {
  top: 10px;
}

.c-wpedit .rtl blockquote {
  border: 0 solid #1a1a1a;
  border-right-width: 4px;
}

.c-wpedit .rtl blockquote.alignleft,
.c-wpedit .rtl blockquote.alignright {
  border: 0 solid #1a1a1a;
  border-top-width: 4px;
}

.c-wpedit .rtl blockquote:not(.alignleft):not(.alignright) {
  margin-right: -28px;
  padding: 0 24px 0 0;
}

.c-wpedit .rtl blockquote blockquote:not(.alignleft):not(.alignright) {
  margin-right: 0;
  margin-left: auto;
}

.c-wpedit .rtl li > ul,
.c-wpedit .rtl blockquote > ul {
  margin-right: 20px;
  margin-left: auto;
}

.c-wpedit .rtl li > ol,
.c-wpedit .rtl blockquote > ol {
  margin-right: 24px;
  margin-left: auto;
}

.c-wpedit .rtl table th,
.c-wpedit .rtl .mce-item-table th,
.c-wpedit .rtl table caption {
  text-align: right;
}

.js-yearningModal-cover,
.js-yearningModal-cover * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -ms-touch-action: none;
      touch-action: none;
  -webkit-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.js-yearningModal-cover {
  background-color: rgba(0, 0, 0, 0.8);
  background-image: -webkit-linear-gradient(45deg, rgba(0, 0, 0, 0.1) 25.1%, transparent 0), -webkit-linear-gradient(45deg, transparent 75%, rgba(0, 0, 0, 0.1) 0), -webkit-linear-gradient(45deg, rgba(0, 0, 0, 0.1) 25.1%, transparent 0), -webkit-linear-gradient(45deg, transparent 75%, rgba(0, 0, 0, 0.1) 0);
  background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.1) 25.1%, transparent 0), linear-gradient(45deg, transparent 75%, rgba(0, 0, 0, 0.1) 0), linear-gradient(45deg, rgba(0, 0, 0, 0.1) 25.1%, transparent 0), linear-gradient(45deg, transparent 75%, rgba(0, 0, 0, 0.1) 0);
  background-position: 7px 0, 14px 7px, 0 7px, 7px 14px;
  background-size: 14px 14px;
  background-repeat: repeat;
  opacity: 0;
  
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  -webkit-transition: opacity .4s, visibility 0s .4s;
  transition: opacity .4s, visibility 0s .4s;
  visibility: hidden;
  z-index: -999999;
}

.js-yearningModal-cover.opacity {
  opacity: 1;
  
  -webkit-transition-delay: 0s;
          transition-delay: 0s;
  visibility: visible;
}

.js-yearningModal-cover.z-index {
  z-index: 999999;
}

.js-yearningModal-stage {
  height: 100%;
  position: relative;
  width: 100%;
}

.js-yearningModal-view {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.js-yearningModal-length {
  font-size: 0;
  position: absolute;
  left: 0;
  bottom: 0;
  -webkit-transform: translateY(100%);
      -ms-transform: translateY(100%);
          transform: translateY(100%);
  text-align: center;
  width: 100%;
}

.js-yearningModal-length-self {
  background-color: #000;
  border-radius: 100px;
  display: inline-block;
  color: #fff;
  font-family: 'Times New Roman', serif;
  font-size: 14px;
  line-height: 1;
  padding: 7px 14px;
  vertical-align: top;
}

.js-yearningModal-pager {
  visibility: hidden;
  /*
  // 誤って閉じないようにサポート
  // TODO: もしかしたら無い方が良いかも
  &:before,
  &:after {
    content: "";
    display: block;
    height: 94px;
    margin-top: -47px;
    position: absolute; top: 50%;
    width: 30%;
    z-index: 0;
  }
  &:before {
    left: -15%;
  }
  &:after {
    right: -15%;
  }
  */
}

.js-yearningModal-pager > div {
  background-color: rgba(0, 0, 0, 0.8);
  cursor: pointer;
  height: 44px;
  margin-top: -22px;
  opacity: 0;
  
  position: absolute;
  top: 50%;
  -webkit-transition: background-color .4s, opacity .4s .4s;
  transition: background-color .4s, opacity .4s .4s;
  width: 44px;
  z-index: 1;
}

.js-yearningModal-pager > div:before {
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  content: "";
  display: block;
  height: 15px;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 15px;
}

.js-yearningModal-pager > div:active {
  margin-top: -20px;
}

.js-yearningModal-pager > div:hover {
  background-color: rgba(0, 0, 0, 0.6);
}

.js-yearningModal-pager-prev {
  left: 0;
}

.js-yearningModal-pager-prev:before {
  margin: -8px 0 0 -5px;
  -webkit-transform: rotate(-135deg);
      -ms-transform: rotate(-135deg);
          transform: rotate(-135deg);
}

.js-yearningModal-pager-next {
  right: 0;
}

.js-yearningModal-pager-next:before {
  margin: -8px 0 0 -11px;
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg);
}

.js-add-is-modal-pager .js-yearningModal-pager {
  visibility: visible;
}

.js-add-is-modal-pager .js-yearningModal-pager > div {
  opacity: 1;
  
}

.js-yearningModal-cover.opacity .js-yearningModal-loader {
  position: absolute;
  left: 50%;
  top: 50%;
  display: block;
  margin: -25px 0 0 -25px;
  width: 50px;
  height: 50px;
  border: 2px solid #fff;
  border-top-width: 0;
  border-radius: 50%;
  -webkit-animation: js-yearningModal-loading 0.75s infinite linear;
          animation: js-yearningModal-loading 0.75s infinite linear;
  z-index: -1;
}

@-webkit-keyframes js-yearningModal-loading {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes js-yearningModal-loading {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

.js-yearningModal-cover.opacity .js-yearningModal-loader .loader:before,
.js-yearningModal-cover.opacity .js-yearningModal-loader .loader:after {
  left: -2px;
  top: -2px;
  display: none;
  position: absolute;
  content: '';
  width: inherit;
  height: inherit;
  border: inherit;
  border-radius: inherit;
}

.js-yearningModal-img {
  cursor: pointer;
  opacity: 0;
  
  -webkit-transition: opacity .4s;
  transition: opacity .4s;
  max-width: 100%;
}

.js-yearningModal-img.opacity {
  opacity: 1;
  
}

.js-yearningModal-close {
  background-color: rgba(0, 0, 0, 0.6);
  cursor: pointer;
  display: block;
  height: 44px;
  position: absolute;
  right: 0;
  top: 0;
  width: 44px;
}

.js-yearningModal-close:before,
.js-yearningModal-close:after {
  background: #fff;
  content: '';
  display: block;
  height: 2px;
  position: absolute;
  left: 14.5%;
  top: 50%;
  width: 70%;
}

.js-yearningModal-close:before {
  -webkit-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
          transform: rotate(-45deg);
}

.js-yearningModal-close:after {
  -webkit-transform: rotate(-135deg);
      -ms-transform: rotate(-135deg);
          transform: rotate(-135deg);
}

.js-yearningModal-title {
  background-color: rgba(102, 102, 102, 0.8);
  color: #fff;
  font-size: 14px;
  padding: 10px;
  position: absolute;
  left: 0;
  bottom: 80px;
  text-align: center;
  -webkit-user-select: text;
      -ms-user-select: text;
          user-select: text;
  width: 100%;
}

.js-yearningModal-title-self {
  display: block;
  margin: 0 auto;
  width: 800px;
  max-width: 100%;
}

html:not(.js-add-is-modal-title) .js-yearningModal-title {
  display: none;
}

html:not(.js-add-is-modal-thumb) .js-yearningModal-title {
  font-size: 16px;
  padding-top: 12px;
  padding-bottom: 13px;
  bottom: 0;
}

.js-yearningModal-thumb-group {
  background-color: rgba(0, 0, 0, 0.6);
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
}

.js-yearningModal-thumb-group-inner {
  height: 80px;
  overflow: hidden;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  text-align: center;
}

.js-yearningModal-thumb-list {
  display: inline-block;
  list-style: none;
  letter-spacing: -.4em;
  margin: 0;
  overflow: hidden;
  padding: 5px;
  vertical-align: top;
  white-space: nowrap;
}

.js-yearningModal-thumb-item {
  display: inline-block;
  letter-spacing: 0;
  padding: 5px;
  vertical-align: top;
}

.js-yearningModal-thumb-self {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  border: 3px solid #999;
  display: block;
  height: 60px;
  opacity: .6;
  
  -webkit-transition: border-color .175s, opacity .175s;
  transition: border-color .175s, opacity .175s;
  width: 60px;
}

.js-yearningModal-thumb-self.js-add-is-current {
  border-color: #fff;
  opacity: 1;
  
}

/*! Lity - v2.2.2 - 2016-12-14
* http://sorgalla.com/lity/
* Copyright (c) 2015-2016 Jan Sorgalla; Licensed MIT */
.lity {
  z-index: 9990;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  white-space: nowrap;
  background: #0b0b0b;
  background: rgba(0, 0, 0, 0.9);
  outline: none !important;
  opacity: 0;
  
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}

.lity.lity-opened {
  opacity: 1;
  
}

.lity.lity-closed {
  opacity: 0;
  
}

.lity * {
  box-sizing: border-box;
}

.lity-wrap {
  z-index: 9990;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  text-align: center;
  outline: none !important;
}

.lity-wrap:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em;
}

.lity-loader {
  z-index: 9991;
  color: #fff;
  position: absolute;
  top: 50%;
  margin-top: -0.8em;
  width: 100%;
  text-align: center;
  font-size: 14px;
  font-family: Arial, Helvetica, sans-serif;
  opacity: 0;
  
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}

.lity-loading .lity-loader {
  opacity: 1;
  
}

.lity-container {
  z-index: 9992;
  position: relative;
  text-align: left;
  vertical-align: middle;
  display: inline-block;
  white-space: normal;
  max-width: 100%;
  max-height: 100%;
  outline: none !important;
}

.lity-content {
  z-index: 9993;
  width: 100%;
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  -webkit-transition: -webkit-transform 0.3s ease;
  transition: -webkit-transform 0.3s ease;
  transition: transform 0.3s ease;
  transition: transform 0.3s ease, -webkit-transform 0.3s ease;
}

.lity-loading .lity-content,
.lity-closed .lity-content {
  -webkit-transform: scale(0.8);
  -ms-transform: scale(0.8);
  transform: scale(0.8);
}

.lity-content:after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  display: block;
  right: 0;
  width: auto;
  height: auto;
  z-index: -1;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
}

.lity-close {
  z-index: 9994;
  width: 35px;
  height: 35px;
  position: fixed;
  right: 0;
  top: 0;
  -webkit-appearance: none;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  padding: 0;
  color: #fff;
  font-style: normal;
  font-size: 35px;
  font-family: Arial, Baskerville, monospace;
  line-height: 35px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  border: 0;
  background: none;
  outline: none;
  box-shadow: none;
}

.lity-close::-moz-focus-inner {
  border: 0;
  padding: 0;
}

.lity-close:hover,
.lity-close:focus,
.lity-close:active,
.lity-close:visited {
  text-decoration: none;
  text-align: center;
  padding: 0;
  color: #fff;
  font-style: normal;
  font-size: 35px;
  font-family: Arial, Baskerville, monospace;
  line-height: 35px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  border: 0;
  background: none;
  outline: none;
  box-shadow: none;
}

.lity-close:active {
  top: 1px;
}

/* Image */
.lity-image img {
  max-width: 100%;
  display: block;
  line-height: 0;
  border: 0;
}

/* iFrame */
.lity-iframe .lity-container,
.lity-youtube .lity-container,
.lity-vimeo .lity-container,
.lity-facebookvideo .lity-container,
.lity-googlemaps .lity-container {
  width: 100%;
  max-width: 964px;
}

.lity-iframe-container {
  width: 100%;
  height: 0;
  padding-top: 56.25%;
  overflow: auto;
  pointer-events: auto;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-overflow-scrolling: touch;
}

.lity-iframe-container iframe {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
}

.lity-hide {
  display: none;
}

/**
 * Swiper 3.4.2
 * Most modern mobile touch slider and framework with hardware accelerated transitions
 *
 * http://www.idangero.us/swiper/
 *
 * Copyright 2017, Vladimir Kharlampidi
 * The iDangero.us
 * http://www.idangero.us/
 *
 * Licensed under MIT
 *
 * Released on: March 10, 2017
 */
.swiper-container {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
  /* Fix of Webkit flickering */
  z-index: 1;
}

.swiper-container-no-flexbox .swiper-slide {
  float: left;
}

.swiper-container-vertical > .swiper-wrapper {
  -webkit-box-orient: vertical;
  -ms-flex-direction: column;
  -webkit-flex-direction: column;
  flex-direction: column;
}

.swiper-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-transition-property: -webkit-transform;
  transition-property: -webkit-transform;
  transition-property: transform;
  transition-property: transform, -webkit-transform;
  box-sizing: content-box;
}

.swiper-container-android .swiper-slide,
.swiper-wrapper {
  -webkit-transform: translate3d(0px, 0, 0);
  -ms-transform: translate3d(0px, 0, 0);
  transform: translate3d(0px, 0, 0);
}

.swiper-container-multirow > .swiper-wrapper {
  -webkit-box-lines: multiple;
  -moz-box-lines: multiple;
  -ms-flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}

.swiper-container-free-mode > .swiper-wrapper {
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
  margin: 0 auto;
}

.swiper-slide {
  -webkit-flex-shrink: 0;
  -ms-flex: 0 0 auto;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 100%;
  height: 100%;
  position: relative;
}

/* Auto Height */
.swiper-container-autoheight,
.swiper-container-autoheight .swiper-slide {
  height: auto;
}

.swiper-container-autoheight .swiper-wrapper {
  -webkit-box-align: start;
  -ms-flex-align: start;
  -webkit-align-items: flex-start;
  align-items: flex-start;
  -webkit-transition-property: -webkit-transform, height;
  -webkit-transition-property: height, -webkit-transform;
  transition-property: height, -webkit-transform;
  transition-property: transform, height;
  transition-property: transform, height, -webkit-transform;
}

/* a11y */
.swiper-container .swiper-notification {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  opacity: 0;
  
  z-index: -1000;
}

/* IE10 Windows Phone 8 Fixes */
.swiper-wp8-horizontal {
  -ms-touch-action: pan-y;
  touch-action: pan-y;
}

.swiper-wp8-vertical {
  -ms-touch-action: pan-x;
  touch-action: pan-x;
}

/* Arrows */
.swiper-button-prev,
.swiper-button-next {
  position: absolute;
  top: 50%;
  width: 27px;
  height: 44px;
  margin-top: -22px;
  z-index: 10;
  cursor: pointer;
  background-size: 27px 44px;
  background-position: center;
  background-repeat: no-repeat;
}

.swiper-button-prev.swiper-button-disabled,
.swiper-button-next.swiper-button-disabled {
  opacity: 0.35;
  
  cursor: auto;
  pointer-events: none;
}

.swiper-button-prev,
.swiper-container-rtl .swiper-button-next {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");
  left: 10px;
  right: auto;
}

.swiper-button-prev.swiper-button-black,
.swiper-container-rtl .swiper-button-next.swiper-button-black {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E");
}

.swiper-button-prev.swiper-button-white,
.swiper-container-rtl .swiper-button-next.swiper-button-white {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");
}

.swiper-button-next,
.swiper-container-rtl .swiper-button-prev {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");
  right: 10px;
  left: auto;
}

.swiper-button-next.swiper-button-black,
.swiper-container-rtl .swiper-button-prev.swiper-button-black {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E");
}

.swiper-button-next.swiper-button-white,
.swiper-container-rtl .swiper-button-prev.swiper-button-white {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");
}

/* Pagination Styles */
.swiper-pagination {
  position: absolute;
  text-align: center;
  -webkit-transition: 300ms;
  transition: 300ms;
  -webkit-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  z-index: 10;
}

.swiper-pagination.swiper-pagination-hidden {
  opacity: 0;
  
}

/* Common Styles */
.swiper-pagination-fraction,
.swiper-pagination-custom,
.swiper-container-horizontal > .swiper-pagination-bullets {
  bottom: 10px;
  left: 0;
  width: 100%;
}

/* Bullets */
.swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  display: inline-block;
  border-radius: 100%;
  background: #000;
  opacity: 0.2;
  
}

button.swiper-pagination-bullet {
  border: none;
  margin: 0;
  padding: 0;
  box-shadow: none;
  -moz-appearance: none;
  -ms-appearance: none;
  -webkit-appearance: none;
  appearance: none;
}

.swiper-pagination-clickable .swiper-pagination-bullet {
  cursor: pointer;
}

.swiper-pagination-white .swiper-pagination-bullet {
  background: #fff;
}

.swiper-pagination-bullet-active {
  opacity: 1;
  
  background: #007aff;
}

.swiper-pagination-white .swiper-pagination-bullet-active {
  background: #fff;
}

.swiper-pagination-black .swiper-pagination-bullet-active {
  background: #000;
}

.swiper-container-vertical > .swiper-pagination-bullets {
  right: 10px;
  top: 50%;
  -webkit-transform: translate3d(0px, -50%, 0);
  -ms-transform: translate3d(0px, -50%, 0);
  transform: translate3d(0px, -50%, 0);
}

.swiper-container-vertical > .swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 5px 0;
  display: block;
}

.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 0 5px;
}

/* Progress */
.swiper-pagination-progress {
  background: rgba(0, 0, 0, 0.25);
  position: absolute;
}

.swiper-pagination-progress .swiper-pagination-progressbar {
  background: #007aff;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
  -webkit-transform-origin: left top;
  -ms-transform-origin: left top;
  transform-origin: left top;
}

.swiper-container-rtl .swiper-pagination-progress .swiper-pagination-progressbar {
  -webkit-transform-origin: right top;
  -ms-transform-origin: right top;
  transform-origin: right top;
}

.swiper-container-horizontal > .swiper-pagination-progress {
  width: 100%;
  height: 4px;
  left: 0;
  top: 0;
}

.swiper-container-vertical > .swiper-pagination-progress {
  width: 4px;
  height: 100%;
  left: 0;
  top: 0;
}

.swiper-pagination-progress.swiper-pagination-white {
  background: rgba(255, 255, 255, 0.5);
}

.swiper-pagination-progress.swiper-pagination-white .swiper-pagination-progressbar {
  background: #fff;
}

.swiper-pagination-progress.swiper-pagination-black .swiper-pagination-progressbar {
  background: #000;
}

/* 3D Container */
.swiper-container-3d {
  -webkit-perspective: 1200px;
  -o-perspective: 1200px;
  perspective: 1200px;
}

.swiper-container-3d .swiper-wrapper,
.swiper-container-3d .swiper-slide,
.swiper-container-3d .swiper-slide-shadow-left,
.swiper-container-3d .swiper-slide-shadow-right,
.swiper-container-3d .swiper-slide-shadow-top,
.swiper-container-3d .swiper-slide-shadow-bottom,
.swiper-container-3d .swiper-cube-shadow {
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.swiper-container-3d .swiper-slide-shadow-left,
.swiper-container-3d .swiper-slide-shadow-right,
.swiper-container-3d .swiper-slide-shadow-top,
.swiper-container-3d .swiper-slide-shadow-bottom {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
}

.swiper-container-3d .swiper-slide-shadow-left {
  background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
  /* Safari 4+, Chrome */
  background-image: -webkit-linear-gradient(right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  /* Chrome 10+, Safari 5.1+, iOS 5+ */
  /* Firefox 3.6-15 */
  /* Opera 11.10-12.00 */
  background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  /* Firefox 16+, IE10, Opera 12.50+ */
}

.swiper-container-3d .swiper-slide-shadow-right {
  background-image: -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
  /* Safari 4+, Chrome */
  background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  /* Chrome 10+, Safari 5.1+, iOS 5+ */
  /* Firefox 3.6-15 */
  /* Opera 11.10-12.00 */
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  /* Firefox 16+, IE10, Opera 12.50+ */
}

.swiper-container-3d .swiper-slide-shadow-top {
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
  /* Safari 4+, Chrome */
  background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  /* Chrome 10+, Safari 5.1+, iOS 5+ */
  /* Firefox 3.6-15 */
  /* Opera 11.10-12.00 */
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  /* Firefox 16+, IE10, Opera 12.50+ */
}

.swiper-container-3d .swiper-slide-shadow-bottom {
  background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
  /* Safari 4+, Chrome */
  background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  /* Chrome 10+, Safari 5.1+, iOS 5+ */
  /* Firefox 3.6-15 */
  /* Opera 11.10-12.00 */
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  /* Firefox 16+, IE10, Opera 12.50+ */
}

/* Coverflow */
.swiper-container-coverflow .swiper-wrapper,
.swiper-container-flip .swiper-wrapper {
  /* Windows 8 IE 10 fix */
  -ms-perspective: 1200px;
}

/* Cube + Flip */
.swiper-container-cube,
.swiper-container-flip {
  overflow: visible;
}

.swiper-container-cube .swiper-slide,
.swiper-container-flip .swiper-slide {
  pointer-events: none;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  z-index: 1;
}

.swiper-container-cube .swiper-slide .swiper-slide,
.swiper-container-flip .swiper-slide .swiper-slide {
  pointer-events: none;
}

.swiper-container-cube .swiper-slide-active,
.swiper-container-flip .swiper-slide-active,
.swiper-container-cube .swiper-slide-active .swiper-slide-active,
.swiper-container-flip .swiper-slide-active .swiper-slide-active {
  pointer-events: auto;
}

.swiper-container-cube .swiper-slide-shadow-top,
.swiper-container-flip .swiper-slide-shadow-top,
.swiper-container-cube .swiper-slide-shadow-bottom,
.swiper-container-flip .swiper-slide-shadow-bottom,
.swiper-container-cube .swiper-slide-shadow-left,
.swiper-container-flip .swiper-slide-shadow-left,
.swiper-container-cube .swiper-slide-shadow-right,
.swiper-container-flip .swiper-slide-shadow-right {
  z-index: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* Cube */
.swiper-container-cube .swiper-slide {
  visibility: hidden;
  -webkit-transform-origin: 0 0;
  -ms-transform-origin: 0 0;
  transform-origin: 0 0;
  width: 100%;
  height: 100%;
}

.swiper-container-cube.swiper-container-rtl .swiper-slide {
  -webkit-transform-origin: 100% 0;
  -ms-transform-origin: 100% 0;
  transform-origin: 100% 0;
}

.swiper-container-cube .swiper-slide-active,
.swiper-container-cube .swiper-slide-next,
.swiper-container-cube .swiper-slide-prev,
.swiper-container-cube .swiper-slide-next + .swiper-slide {
  pointer-events: auto;
  visibility: visible;
}

.swiper-container-cube .swiper-cube-shadow {
  position: absolute;
  left: 0;
  bottom: 0px;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: 0.6;
  
  -webkit-filter: blur(50px);
  filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feGaussianBlur stdDeviation="50" /></filter></svg>#filter');
  filter: blur(50px);
  z-index: 0;
}

/* Fade */
.swiper-container-fade.swiper-container-free-mode .swiper-slide {
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}

.swiper-container-fade .swiper-slide {
  pointer-events: none;
  -webkit-transition-property: opacity;
  transition-property: opacity;
}

.swiper-container-fade .swiper-slide .swiper-slide {
  pointer-events: none;
}

.swiper-container-fade .swiper-slide-active,
.swiper-container-fade .swiper-slide-active .swiper-slide-active {
  pointer-events: auto;
}

.swiper-zoom-container {
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  text-align: center;
}

.swiper-zoom-container > img,
.swiper-zoom-container > svg,
.swiper-zoom-container > canvas {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Scrollbar */
.swiper-scrollbar {
  border-radius: 10px;
  position: relative;
  -ms-touch-action: none;
  background: rgba(0, 0, 0, 0.1);
}

.swiper-container-horizontal > .swiper-scrollbar {
  position: absolute;
  left: 1%;
  bottom: 3px;
  z-index: 50;
  height: 5px;
  width: 98%;
}

.swiper-container-vertical > .swiper-scrollbar {
  position: absolute;
  right: 3px;
  top: 1%;
  z-index: 50;
  width: 5px;
  height: 98%;
}

.swiper-scrollbar-drag {
  height: 100%;
  width: 100%;
  position: relative;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 10px;
  left: 0;
  top: 0;
}

.swiper-scrollbar-cursor-drag {
  cursor: move;
}

/* Preloader */
.swiper-lazy-preloader {
  width: 42px;
  height: 42px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -21px;
  margin-top: -21px;
  z-index: 10;
  -webkit-transform-origin: 50%;
  -ms-transform-origin: 50%;
      transform-origin: 50%;
  -webkit-animation: swiper-preloader-spin 1s steps(12, end) infinite;
  animation: swiper-preloader-spin 1s steps(12, end) infinite;
}

.swiper-lazy-preloader:after {
  display: block;
  content: "";
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%236c6c6c'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  background-position: 50%;
  background-size: 100%;
  background-repeat: no-repeat;
}

.swiper-lazy-preloader-white:after {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%23fff'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}

@-webkit-keyframes swiper-preloader-spin {
  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes swiper-preloader-spin {
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

/*
#styleguide
wpedit

```
<div class="c-wpedit">
 記事内容
</div>
```
*/
.c-wpedit :first-child {
  margin-top: 0;
}

.c-wpedit :last-child {
  margin-bottom: 0;
}

.c-wpedit h1,
.c-wpedit h2,
.c-wpedit h3,
.c-wpedit h4,
.c-wpedit h5,
.c-wpedit h6 {
  clear: both;
  font-weight: 900;
  margin: 56px 0 28px;
}

.c-wpedit h1 {
  font-size: 33px;
  line-height: 1.2727272727;
}

.c-wpedit h2 {
  font-size: 28px;
  line-height: 1.25;
}

.c-wpedit h3 {
  font-size: 23px;
  line-height: 1.2173913043;
}

.c-wpedit h4,
.c-wpedit h5,
.c-wpedit h6 {
  font-size: 19px;
  line-height: 1.1052631579;
}

.c-wpedit h4 {
  letter-spacing: 0.13333em;
  text-transform: uppercase;
}

.c-wpedit h6 {
  font-style: italic;
}

.c-wpedit h1:first-child,
.c-wpedit h2:first-child,
.c-wpedit h3:first-child,
.c-wpedit h4:first-child,
.c-wpedit h5:first-child,
.c-wpedit h6:first-child {
  margin-top: 0;
}

.c-wpedit p {
  margin: 0 0 28px;
}

.c-wpedit b,
.c-wpedit strong {
  font-weight: 700;
}

.c-wpedit dfn,
.c-wpedit cite,
.c-wpedit em,
.c-wpedit i {
  font-style: italic;
}

.c-wpedit blockquote {
  border-left: 4px solid #1a1a1a;
  color: #686868;
  font-size: 19px;
  font-style: italic;
  line-height: 1.4736842105;
  margin-bottom: 28px;
  padding: 0 0 0 24px;
}

.c-wpedit blockquote blockquote:not(.alignleft):not(.alignright) {
  margin-left: 0;
}

.c-wpedit blockquote:before,
.c-wpedit blockquote:after {
  content: "";
  display: table;
}

.c-wpedit blockquote:after {
  clear: both;
}

.c-wpedit blockquote > :last-child {
  margin-bottom: 0;
}

.c-wpedit blockquote cite,
.c-wpedit blockquote small {
  color: #1a1a1a;
  font-size: 16px;
  line-height: 1.75;
}

.c-wpedit blockquote em,
.c-wpedit blockquote i,
.c-wpedit blockquote cite {
  font-style: normal;
}

.c-wpedit blockquote strong,
.c-wpedit blockquote b {
  font-weight: 400;
}

.c-wpedit blockquote.alignleft,
.c-wpedit blockquote.alignright {
  border: 0 solid #1a1a1a;
  border-top-width: 4px;
  padding: 18px 0 0;
  width: calc(50% - 14px);
}

.c-wpedit address {
  font-style: italic;
  margin: 0 0 28px;
}

.c-wpedit code,
.c-wpedit kbd,
.c-wpedit tt,
.c-wpedit var,
.c-wpedit samp,
.c-wpedit pre {
  font-family: Inconsolata, monospace;
}

.c-wpedit pre {
  border: 1px solid #d1d1d1;
  font-size: 16px;
  line-height: 1.3125;
  margin: 0 0 28px;
  max-width: 100%;
  overflow: auto;
  padding: 14px;
  white-space: pre;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.c-wpedit code {
  background-color: #d1d1d1;
  padding: 2px 4px;
}

.c-wpedit abbr[title] {
  border-bottom: 1px dotted #d1d1d1;
  cursor: help;
}

.c-wpedit mark,
.c-wpedit ins {
  background: #007acc;
  color: #fff;
  padding: 2px 4px;
  text-decoration: none;
}

.c-wpedit sup,
.c-wpedit sub {
  font-size: 75%;
  height: 0;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

.c-wpedit sub {
  top: -6px;
}

.c-wpedit sup {
  bottom: -3px;
}

.c-wpedit small {
  font-size: 80%;
}

.c-wpedit big {
  font-size: 125%;
}

.c-wpedit hr {
  background-color: #d1d1d1;
  border: 0;
  height: 1px;
  margin-bottom: 28px;
}

.c-wpedit ul {
  list-style: disc;
}

.c-wpedit ol {
  list-style: decimal;
}

.c-wpedit li > ul,
.c-wpedit li > ol {
  margin-bottom: 0;
}

.c-wpedit li > ul,
.c-wpedit blockquote > ul {
  margin-left: 20px;
}

.c-wpedit li > ol,
.c-wpedit blockquote > ol {
  margin-left: 24px;
}

.c-wpedit dl {
  margin: 0 0 28px;
}

.c-wpedit dt {
  font-weight: bold;
}

.c-wpedit dd {
  margin: 0 0 28px;
}

.c-wpedit table,
.c-wpedit th,
.c-wpedit td,
.c-wpedit .mce-item-table,
.c-wpedit .mce-item-table th,
.c-wpedit .mce-item-table td {
  border: 1px solid #d1d1d1;
}

.c-wpedit table a {
  color: #007acc;
}

.c-wpedit table,
.c-wpedit .mce-item-table {
  border-collapse: separate;
  border-spacing: 0;
  border-width: 1px 0 0 1px;
  margin: 0 0 28px;
  width: 100%;
}

.c-wpedit table th,
.c-wpedit .mce-item-table th,
.c-wpedit table caption {
  border-width: 0 1px 1px 0;
  font-size: 16px;
  font-weight: 700;
  padding: 7px;
  text-align: left;
  vertical-align: baseline;
}

.c-wpedit table td,
.c-wpedit .mce-item-table td {
  border-width: 0 1px 1px 0;
  font-size: 16px;
  padding: 7px;
  vertical-align: baseline;
}

.c-wpedit img {
  border: 0;
  height: auto;
  max-width: 100%;
  vertical-align: middle;
}

.c-wpedit a img {
  display: block;
}

.c-wpedit figure {
  margin: 0;
}

.c-wpedit del {
  opacity: 0.8;
  
}

.c-wpedit a {
  color: #007acc;
  text-decoration: none;
}

.c-wpedit fieldset {
  border: 1px solid #d1d1d1;
  margin: 0 0 28px;
  padding: 14px;
}

.c-wpedit .alignleft {
  float: left;
  margin: 6px 28px 28px 0;
}

.c-wpedit .alignright {
  float: right;
  margin: 6px 0 28px 28px;
}

.c-wpedit .aligncenter {
  clear: both;
  display: block;
  margin: 0 auto 28px;
}

.c-wpedit .wp-caption {
  background: transparent;
  border: none;
  margin-bottom: 28px;
  max-width: 100%;
  padding: 0;
  text-align: inherit;
}

.c-wpedit .wp-caption-text,
.c-wpedit .wp-caption-dd {
  color: #686868;
  font-size: 13px;
  font-style: italic;
  line-height: 1.6153846154;
  padding-top: 7px;
}

.c-wpedit .mce-content-body .wpview-wrap {
  margin-bottom: 28px;
}

.c-wpedit .gallery {
  margin: 0 -1.1666667%;
  padding: 0;
}

.c-wpedit .gallery .gallery-item {
  display: inline-block;
  max-width: 33.33%;
  padding: 0 1.1400652% 2.2801304%;
  text-align: center;
  vertical-align: top;
  width: 100%;
}

.c-wpedit .gallery-columns-1 .gallery-item {
  max-width: 100%;
}

.c-wpedit .gallery-columns-2 .gallery-item {
  max-width: 50%;
}

.c-wpedit .gallery-columns-4 .gallery-item {
  max-width: 25%;
}

.c-wpedit .gallery-columns-5 .gallery-item {
  max-width: 20%;
}

.c-wpedit .gallery-columns-6 .gallery-item {
  max-width: 16.66%;
}

.c-wpedit .gallery-columns-7 .gallery-item {
  max-width: 14.28%;
}

.c-wpedit .gallery-columns-8 .gallery-item {
  max-width: 12.5%;
}

.c-wpedit .gallery-columns-9 .gallery-item {
  max-width: 11.11%;
}

.c-wpedit .gallery .gallery-caption {
  font-size: 13px;
  margin: 0;
}

.c-wpedit .gallery-columns-6 .gallery-caption,
.c-wpedit .gallery-columns-7 .gallery-caption,
.c-wpedit .gallery-columns-8 .gallery-caption,
.c-wpedit .gallery-columns-9 .gallery-caption {
  display: none;
}

.c-wpedit .wp-audio-shortcode a,
.c-wpedit .wp-playlist a {
  box-shadow: none;
}

.c-wpedit .mce-content-body .wp-audio-playlist {
  margin: 0;
  padding-bottom: 0;
}

.c-wpedit .mce-content-body .wp-playlist-tracks {
  margin-top: 0;
}

.c-wpedit .mce-content-body .wp-playlist-item {
  padding: 10px 0;
}

.c-wpedit .mce-content-body .wp-playlist-item-length {
  top: 10px;
}

.c-wpedit .rtl blockquote {
  border: 0 solid #1a1a1a;
  border-right-width: 4px;
}

.c-wpedit .rtl blockquote.alignleft,
.c-wpedit .rtl blockquote.alignright {
  border: 0 solid #1a1a1a;
  border-top-width: 4px;
}

.c-wpedit .rtl blockquote:not(.alignleft):not(.alignright) {
  margin-right: -28px;
  padding: 0 24px 0 0;
}

.c-wpedit .rtl blockquote blockquote:not(.alignleft):not(.alignright) {
  margin-right: 0;
  margin-left: auto;
}

.c-wpedit .rtl li > ul,
.c-wpedit .rtl blockquote > ul {
  margin-right: 20px;
  margin-left: auto;
}

.c-wpedit .rtl li > ol,
.c-wpedit .rtl blockquote > ol {
  margin-right: 24px;
  margin-left: auto;
}

.c-wpedit .rtl table th,
.c-wpedit .rtl .mce-item-table th,
.c-wpedit .rtl table caption {
  text-align: right;
}

.c-wpedit {
  /*右寄せ、左寄せの設定*/
}

.c-wpedit p {
  margin-top: 0;
  margin-bottom: 0;
  line-height: 1.7;
}

.c-wpedit p + p {
  margin-top: 30px;
}

.c-wpedit img[class*="wp-image-"] {
  margin-top: .8em;
  margin-bottom: .8em;
  float: none;
}

.c-wpedit img[class*="wp-image-"].alignright {
  float: right;
  margin-left: .8em;
}

.c-wpedit img[class*="wp-image-"].alignleft {
  float: left;
  margin-right: .8em;
}

.c-wpedit img[class*="wp-image-"].aligncenter {
  margin-left: auto;
  margin-right: auto;
}

.c-wpedit img[class*="wp-image-"],
.c-wpedit img[class*="attachment-"] {
  height: auto;
  max-width: 100%;
}

.c-wpedit table {
  width: 100% !important;
}

.c-wpedit table th, .c-wpedit table td {
  border: 1px solid #cccccc;
  vertical-align: middle;
  padding: .4em .7em;
  text-align: center;
  background-color: #fff;
  line-height: 1.6;
}

.c-wpedit table th p, .c-wpedit table td p {
  margin: 0;
}

.c-wpedit table th {
  background-color: color-font;
  color: #ffffff;
  border-right: 1px solid #ffffff;
}

.c-wpedit table th:last-child {
  border-right: 1px solid #cccccc;
}

/*
 * トップアピール
 */
.p-apeal-overlay {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  padding: 15px 30px;
}

.p-apeal-overlay__filter {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 10;
}

.p-apeal-overlay__close {
  display: block;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  position: absolute;
  top: -22px !important;
  right: -22px;
  cursor: pointer;
  z-index: 1;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  color: #ffffff;
  background-color: #009944;
  -webkit-transition: box-shadow .35s;
  transition: box-shadow .35s;
  box-shadow: inset 0 0 0 1px #009944, inset 0 0 0 2px #009944;
}

html:not(.sp) .p-apeal-overlay__close:hover, html:not(.sp) .p-apeal-overlay__close:focus {
  box-shadow: inset 0 0 0 1px #009944, inset 0 0 0 2px #ffffff;
}

.p-apeal-overlay__content {
  min-width: 0;
  -webkit-box-flex: 0;
  -webkit-flex: 0 1 auto;
      -ms-flex: 0 1 auto;
          flex: 0 1 auto;
  position: relative;
  z-index: 15;
}

.p-apeal-overlay-main {
  width: 400px;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

.p-apeal-overlay-main__btn {
  top: auto !important;
  display: inline-block;
  width: 41.25%;
  position: absolute;
  bottom: 3%;
  -webkit-transition: opacity .4s;
  transition: opacity .4s;
}

html:not(.sp) .p-apeal-overlay-main__btn:hover, html:not(.sp) .p-apeal-overlay-main__btn:focus {
  opacity: 0.65;
  
}

.p-apeal-overlay-main__btn.p-apeal-overlay-main__btn--left {
  left: 7%;
}

.p-apeal-overlay-main__btn.p-apeal-overlay-main__btn--right {
  right: 7%;
}

.js-simple-modal {
  z-index: -99999;
  visibility: hidden;
  -webkit-transition: z-index 0s ease-in-out 1s, visibility 0s ease-in-out 1s;
  transition: z-index 0s ease-in-out 1s, visibility 0s ease-in-out 1s;
}

.js-simple-modal__view,
.js-simple-modal__filter {
  opacity: 0;
  
  visibility: hidden;
  -webkit-transition: opacity .8s ease-in-out 0s, visibility .8s ease-in-out 0s;
  transition: opacity .8s ease-in-out 0s, visibility .8s ease-in-out 0s;
}

html.js-simple-modal-opened .js-simple-modal {
  z-index: 99999;
  visibility: visible;
  -webkit-transition: z-index 0s ease-in-out 0s, visibility 0s ease-in-out 0s;
  transition: z-index 0s ease-in-out 0s, visibility 0s ease-in-out 0s;
}

html.js-simple-modal-opened .js-simple-modal__filter,
html.js-simple-modal-opened .js-simple-modal__view {
  opacity: 1;
  
  visibility: visible;
  -webkit-transition: opacity .8s ease-in-out .35s, visibility .8s ease-in-out .35s;
  transition: opacity .8s ease-in-out .35s, visibility .8s ease-in-out .35s;
}

/*
 * トップアピール
 */
.p-app-bnr {
  width: 1170px;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  display: block;
  background-color: #fefefc !important;
  background-size: 120px !important;
  border-radius: 12px;
}

.p-app-bnr__thumb {
  min-width: 0;
}

.p-app-bnr__content {
  min-width: 0;
}

.p-app-bnr__caption {
  line-height: 1;
  margin-top: 45px;
  margin-bottom: 15px;
}

.p-app-bnr__text {
  margin-bottom: 42px;
  font-size: 16px;
  font-size: 1.6rem;
  color: #666666;
  line-height: 1.8;
}

.p-app-bnr__link {
  width: 420px;
  max-width: 100%;
  margin-left: auto;
}

.p-app-bnr__link a {
  -webkit-transition: opacity .4s;
  transition: opacity .4s;
}

html:not(.sp) .p-app-bnr__link a:hover, html:not(.sp) .p-app-bnr__link a:focus {
  opacity: 0.65;
  
}

/*
#styleguide
名称：アーティクル（お知らせ）
class：article-info

@カテゴリー article

#お知らせを表示するバー


```
        <div class="p-article-info">
          <div class="p-article-info__link  c-h-icon-right">
            <span class="p-article-info__col  p-article-info__col--tag  p-article-info__tag">
              <i class="fa  fa-info-circle" aria-hidden="true"></i>
              お知らせ
            </span>

            <div class="p-article-info__col  p-article-info__col--contents">
              <div id="newsTicker" class="swiper-container">
                <ul class="swiper-wrapper  c-list">
                  <li class="swiper-slide">
                    <a href="<%- _root %>" class="p-article-info__inner">
                      <time class="p-article-info__date">2017.04.01</time>
                      <p class="p-article-info__text">
                        ここにお知らせを表示します。
                      </p>
                    </a>
                  </li>
                  <li class="swiper-slide">
                    <a href="<%- _root %>" class="p-article-info__inner">
                      <time class="p-article-info__date">2017.04.01</time>
                      <p class="p-article-info__text">
                        ここにお知らせを表示します。クリックすると詳細ページへ移動します。
                      </p>
                    </a>
                  </li>
                  <li class="swiper-slide">
                    <a href="<%- _root %>" class="p-article-info__inner">
                      <time class="p-article-info__date">2017.04.01</time>
                      <p class="p-article-info__text">
                        ここにお知らせを表示します。
                      </p>
                    </a>
                  </li>
                  <li class="swiper-slide">
                    <a href="<%- _root %>" class="p-article-info__inner">
                      <time class="p-article-info__date">2017.04.01</time>
                      <p class="p-article-info__text">
                        ここにお知らせを表示します。クリックすると詳細ページへ移動します。
                      </p>
                    </a>
                  </li>
                </ul>
              </div>
            </div>

            <div class="p-article-info__col  p-article-info__col--link  u-max-md-n">
              <span id="newsTicker-more" class="p-article-info__more">
                <span class="p-article-info__next">次のお知らせ</span>
                <i class="fa  fa-angle-right" aria-hidden="true"></i>
              </span>
            </div>
          </div><!-- /.p-article-info__link -->
        </div><!-- /.p-article-info -->

        <div class="p-article-info  p-article-info--important">
          <a href="<%- _root %>" class="p-article-info__link  c-h-icon-right">
            <span class="p-article-info__col  p-article-info__col--tag  p-article-info__tag">
              <i class="fa  fa-info-circle" aria-hidden="true"></i>
              重要なお知らせ
            </span>

            <div class="p-article-info__col  p-article-info__col--contents">
              <div class="p-article-info__inner">
                <time class="p-article-info__date">2017.04.01</time>
                <p class="p-article-info__text">
                  ここにお知らせを表示します。クリックすると詳細ページへ移動します。
                </p>
              </div>
            </div>
          </a><!-- /.p-article-info__link -->
        </div><!-- /.p-article-info -->
```
*/
.p-article-info {
  line-height: 1.3;
  font-size: 14px;
  font-size: 1.4rem;
  color: #009944;
  /*
   * カラー
   */
}

.p-article-info__link {
  -webkit-transition: background-color 0.45s ease 0s;
  transition: background-color 0.45s ease 0s;
  background-color: #fff;
  border-radius: 15px;
  width: 100%;
}

html:not(.sp) .p-article-info a.p-article-info__link:hover, html:not(.sp) .p-article-info a.p-article-info__link:focus {
  text-decoration: none;
  background-color: #f4f4f4;
}

html:not(.sp) .p-article-info a.p-article-info__link:hover .p-article-info__tag .fa, html:not(.sp) .p-article-info a.p-article-info__link:focus .p-article-info__tag .fa {
  -webkit-transform: translate(-1px, -1px) scale(1.2) rotate(-5deg);
      -ms-transform: translate(-1px, -1px) scale(1.2) rotate(-5deg);
          transform: translate(-1px, -1px) scale(1.2) rotate(-5deg);
}

html:not(.sp) .p-article-info a.p-article-info__link:hover .p-article-info__col.p-article-info__col--contents:before, html:not(.sp) .p-article-info a.p-article-info__link:focus .p-article-info__col.p-article-info__col--contents:before {
  -webkit-transform: translateX(5px);
      -ms-transform: translateX(5px);
          transform: translateX(5px);
}

.p-article-info #newsTicker .swiper-slide {
  background-color: #ffffff;
}

.p-article-info.p-article-info--important {
  color: #cc6666;
}

.p-article-info.p-article-info--important .p-article-info__tag {
  background-color: #cc6666;
}

.p-article-info.p-article-info--important .p-article-info__text {
  color: #cc6666;
  padding-right: 1em;
}

.p-article-info.p-article-info--important .p-article-info__next {
  visibility: hidden;
}

.p-article-info.p-article-info--important .p-article-info__col.p-article-info__col--contents {
  position: relative;
  padding-right: 36px;
}

.p-article-info.p-article-info--important .p-article-info__col.p-article-info__col--contents:before {
  content: "\f105";
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  vertical-align: top;
  font-size: 1.33333em;
  position: absolute;
  top: 50%;
  margin-top: -.5em;
  right: 16px;
  -webkit-transition: -webkit-transform 0.45s ease-out 0s;
  transition: -webkit-transform 0.45s ease-out 0s;
  transition: transform 0.45s ease-out 0s;
  transition: transform 0.45s ease-out 0s, -webkit-transform 0.45s ease-out 0s;
}

.p-article-info__tag {
  background-color: #663300;
}

.p-article-info__text {
  color: #333333;
}

.p-article-info__tag {
  -webkit-transition: box-shadow 0.45s ease 0s, -webkit-transform 0.45s ease 0s;
  transition: box-shadow 0.45s ease 0s, -webkit-transform 0.45s ease 0s;
  transition: box-shadow 0.45s ease 0s, transform 0.45s ease 0s;
  transition: box-shadow 0.45s ease 0s, transform 0.45s ease 0s, -webkit-transform 0.45s ease 0s;
  display: inline-block;
  height: 100%;
  width: 100%;
  border-radius: 15px 15px 0 0;
  text-align: center;
  color: #fff;
  font-weight: 900;
  padding-top: 8px;
  padding-bottom: 8px;
}

.p-article-info__tag .fa {
  display: inline-block;
  color: #fff100;
}

.p-article-info__date {
  font-weight: 700;
}

.p-article-info__text {
  font-weight: 400;
}

.p-article-info__more {
  cursor: pointer;
  -webkit-transition: background-color 0.45s ease 0s;
  transition: background-color 0.45s ease 0s;
  display: inline-block;
  text-align: center;
  border-radius: 15px;
  vertical-align: middle;
  width: 100%;
  padding: 9px 15px;
  text-align: center;
  font-size: 12px;
  font-size: 1.2rem;
}

.p-article-info__more .fa {
  vertical-align: top;
  margin-left: 10px;
  font-size: 1.5em;
}

html:not(.sp) .p-article-info__more:hover, html:not(.sp) .p-article-info__more:focus {
  background-color: rgba(238, 238, 238, 0.5);
}

html:not(.sp) .p-article-info__more:hover .fa, html:not(.sp) .p-article-info__more:focus .fa {
  -webkit-transform: translateX(5px);
      -ms-transform: translateX(5px);
          transform: translateX(5px);
}

.p-article-info__next {
  vertical-align: middle;
  display: inline-block;
}

.p-article-info__inner {
  display: block;
  padding: 15px;
  overflow: hidden;
}

.p-article-info__inner .p-article-info__date,
.p-article-info__inner .p-article-info__text {
  vertical-align: middle;
  display: block;
}

.p-article-info__inner .p-article-info__date {
  margin-bottom: 5px;
}

.p-article-info__col {
  vertical-align: middle;
}

/*
#styleguide
名称：アーティクル（シンプル）
class：article-simple

画像と住所と病院名などシンプルにみせます

@カテゴリー article

```
<!-- マスク用SVG -->
<svg class="p-svgmask-clipper" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 270 150">
  <defs>
    <clipPath id="svg-mocomoco">
      <path d="M269.95,76.09a28.22,28.22,0,0,0-.4-4.65v-.55a32.22,32.22,0,0,0-5.25-11.75l.2-.2a16.13,16.13,0,0,0,5-8.4h0a17.56,17.56,0,0,0,0-7.9v0s0,0,0-.1a16.34,16.34,0,0,0-4.6-7.95,21.43,21.43,0,0,0-2.25-2c1.6-8,.35-15.3-5.65-21.25s-13.35-7.2-21.25-5.55c-9.05-7.15-18.3-7.5-28-1.4C193.8-1.81,180-1.41,166.4,6c-6-3-12.35-3.2-18.9-.8-4.05-2.95-8.4-5-13.65-5.15a22.32,22.32,0,0,0-14,4.6c-16.4-7.2-32.2-6.1-47.2,3.85-8.55-4.7-15-4-21.5-1.45C44.45.54,36.5-1.86,27.55,1.54s-13.3,10.25-13.9,19.8c-.4.25-.9.55-1.4.8A21.26,21.26,0,0,0,3,30.84,20.15,20.15,0,0,0,5.6,55.44,24,24,0,0,0,8.1,58c-5.6,8.5-5.85,17-.45,25.7a21.19,21.19,0,0,0-6.2,17.9c.8,6.8,4.35,12.05,10.25,15.8-2.85,8.75-1.6,16.4,6,22.3A17.42,17.42,0,0,0,29,143.24c4.25-.1,7.85-1.8,11.35-4.25,4.1,5.55,9.35,9.05,16.25,9.65s12.55-1.7,17.5-6.45a46.31,46.31,0,0,0,19.3,5.05,44.53,44.53,0,0,0,19.65-4c7.4,4.85,15.1,5.35,23.35,1.35,1.05.75,2.15,1.45,3.25,2.1a20.73,20.73,0,0,0,6.75,2.8h.05a22.65,22.65,0,0,0,4.55.5,20.59,20.59,0,0,0,14.9-6.25c11.35,5,22.45,4.7,33.4-1.15,11.7,9.05,23.25,9,34.75-.5,10.8,5.75,21.05,5.4,29.25-4.45,7.45-9,6.4-18.6-.2-27.95,5-5.5,5.55-11.45,1.5-17.9.1-.15.2-.35.3-.5A25.18,25.18,0,0,0,269.95,76.09Z"/>
    </clipPath>
  </defs>
</svg>

<div class="p-ticker-group">
  <div class="p-ticker">
    <ul class="p-ticker__list  c-list">
      <li class="p-ticker__col">
        <div class="p-article-simple  p-ticker__item">
          <a href="#" class="p-article-simple__inner">
            <figure class="p-article-simple__pic">
              <svg class="p-article-simple__picImg  p-svgmask-image" viewBox="0 0 270 150">
                <image class="p-svgmask-image__free" xlink:href="/assets/images/sample/sample-doctor-search@2x.jpg" width="270" height="150"></image>
              </svg>
            </figure>

            <span class="p-article-simple__text">
              <i class="fa  fa-map-marker" aria-hidden="true"></i>
              熊本市中央区岡田町
            </span>

            <p class="p-article-simple__name">
              成尾整形外科病院
            </p>
          </a><!-- /.p-article-simple__inner -->
        </div><!-- /.p-article-simple -->
      </li>
      <li class="p-ticker__col">
        <div class="p-article-simple  p-ticker__item">
          <a href="#" class="p-article-simple__inner">
            <figure class="p-article-simple__pic">
              <svg class="p-article-simple__picImg  p-svgmask-image" viewBox="0 0 270 150">
                <image class="p-svgmask-image__free" xlink:href="/assets/images/sample/sample-doctor-search@2x.jpg" width="270" height="150"></image>
              </svg>
            </figure>

            <span class="p-article-simple__text">
              <i class="fa  fa-map-marker" aria-hidden="true"></i>
              熊本市東区長嶺南
            </span>

            <p class="p-article-simple__name">
              熊本赤十字病院
            </p>
          </a><!-- /.p-article-simple__inner -->
        </div><!-- /.p-article-simple -->
      </li>
      <li class="p-ticker__col">
        <div class="p-article-simple  p-ticker__item">
          <a href="#" class="p-article-simple__inner">
            <figure class="p-article-simple__pic">
              <svg class="p-article-simple__picImg  p-svgmask-image" viewBox="0 0 270 150">
                <image class="p-svgmask-image__free" xlink:href="/assets/images/sample/sample-doctor-search@2x.jpg" width="270" height="150"></image>
              </svg>
            </figure>

            <span class="p-article-simple__text">
              <i class="fa  fa-map-marker" aria-hidden="true"></i>
              菊池市大琳寺
            </span>

            <p class="p-article-simple__name">
              菊池郡市医師会立病院
            </p>
          </a><!-- /.p-article-simple__inner -->
        </div><!-- /.p-article-simple -->
      </li>
      <li class="p-ticker__col">
        <div class="p-article-simple  p-ticker__item">
          <a href="#" class="p-article-simple__inner">
            <figure class="p-article-simple__pic">
              <svg class="p-article-simple__picImg  p-svgmask-image" viewBox="0 0 270 150">
                <image class="p-svgmask-image__free" xlink:href="/assets/images/sample/sample-doctor-search@2x.jpg" width="270" height="150"></image>
              </svg>
            </figure>

            <span class="p-article-simple__text">
              <i class="fa  fa-map-marker" aria-hidden="true"></i>
              熊本市西区池田
            </span>

            <p class="p-article-simple__name">
              桜が丘病院
            </p>
          </a><!-- /.p-article-simple__inner -->
        </div><!-- /.p-article-simple -->
      </li>
      <li class="p-ticker__col">
        <div class="p-article-simple  p-ticker__item">
          <a href="#" class="p-article-simple__inner">
            <figure class="p-article-simple__pic">
              <svg class="p-article-simple__picImg  p-svgmask-image" viewBox="0 0 270 150">
                <image class="p-svgmask-image__free" xlink:href="/assets/images/sample/sample-doctor-search@2x.jpg" width="270" height="150"></image>
              </svg>
            </figure>

            <span class="p-article-simple__text">
              <i class="fa  fa-map-marker" aria-hidden="true"></i>
              熊本市西区池田
            </span>

            <p class="p-article-simple__name">
              桜が丘病院
            </p>
          </a><!-- /.p-article-simple__inner -->
        </div><!-- /.p-article-simple -->
      </li>
      <li class="p-ticker__col">
        <div class="p-article-simple  p-ticker__item">
          <a href="#" class="p-article-simple__inner">
            <figure class="p-article-simple__pic">
              <svg class="p-article-simple__picImg  p-svgmask-image" viewBox="0 0 270 150">
                <image class="p-svgmask-image__free" xlink:href="/assets/images/sample/sample-doctor-search@2x.jpg" width="270" height="150"></image>
              </svg>
            </figure>

            <span class="p-article-simple__text">
              <i class="fa  fa-map-marker" aria-hidden="true"></i>
              熊本市西区池田
            </span>

            <p class="p-article-simple__name">
              桜が丘病院
            </p>
          </a><!-- /.p-article-simple__inner -->
        </div><!-- /.p-article-simple -->
      </li>
    </ul>
  </div><!-- /.p-ticker -->
</div><!-- /.p-ticker-group -->
```
*/
.p-article-simple {
  display: inline-block;
  text-align: center;
  font-size: 16px;
  font-size: 1.6rem;
  color: #663300;
  font-weight: 700;
  line-height: 1.3;
}

.p-article-simple .fa {
  color: #ff9900;
}

html:not(.sp) .p-article-simple:hover, html:not(.sp) .p-article-simple:focus {
  text-decoration: none;
}

.p-article-simple__pic {
  max-width: 270px;
  margin: 0;
  margin-left: auto;
  margin-right: auto;
}

.p-article-simple__pic img {
  border-radius: 8px;
}

.p-article-simple__text {
  font-size: 12px;
  font-size: 1.2rem;
  display: block;
  margin-top: 18px;
}

.p-article-simple__name {
  display: inline;
  font-size: 16px;
  font-size: 1.6rem;
  margin-top: 0;
  margin-bottom: 0;
  -webkit-transition: background 0.45s ease 0s;
  transition: background 0.45s ease 0s;
  background: -webkit-linear-gradient(transparent 75%, transparent 0%);
  background: linear-gradient(transparent 75%, transparent 0%);
}

.p-article-simple--detail {
  display: table;
  width: 100%;
  color: #333333;
  text-align: left;
}

.p-article-simple--detail .fa {
  color: #009944;
}

.p-article-simple--detail .p-article-simple__pic,
.p-article-simple--detail .p-article-simple__contents {
  display: table-cell;
  vertical-align: top;
}

.p-article-simple--detail .p-article-simple__text {
  font-size: 14px;
  font-size: 1.4rem;
  margin-top: 4px;
  font-weight: 400;
}

.p-article-simple--detail .p-article-simple__pic {
  width: 90px;
}

.p-article-simple--detail .p-article-simple__name {
  color: #009944;
}

.p-article-simple--detail .p-article-simple__contents {
  padding-left: 10px;
}

/*
#styleguide
名称：アーティクル（アバウト）
class：article-about

これも article-simple とさほど変わらぬ内容ですがaboutです

@カテゴリー article

```
<a href="" class="p-sort__itemInner  p-article-about">
  <figure class="p-article-about__pic">
    <img src="/assets/images/sample/sample-drinfo01.png" width="90" height="60" alt="イメージ画像：医療機関名の外観">
  </figure>

  <div class="p-article-about__contents">
    <p class="p-article-about__name">
      東病院
    </p>

    <span class="p-article-about__text">
      <i class="fa  fa-map-marker" aria-hidden="true"></i>
      熊本市中央区岡田町
    </span>

    <span class="p-article-about__text">
      <i class="fa  fa-phone" aria-hidden="true"></i>
      096-378-2222
    </span>
  </div>
</a><!-- /.p-sort__itemInner -->
```
*/
.p-article-about {
  font-size: 16px;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.1;
  display: table;
  width: 100%;
  color: #333333;
  text-align: left;
  padding: 20px 0;
  -webkit-transition: background-color 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955) 0s;
  transition: background-color 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955) 0s;
}

.p-article-about .fa {
  color: #009944;
}

.p-article-about__pic, .p-article-about__contents {
  display: table-cell;
  vertical-align: top;
}

.p-article-about__text {
  font-size: 14px;
  font-size: 1.4rem;
  margin-top: 4px;
  display: block;
  font-weight: 400;
}

.p-article-about__pic {
  width: 90px;
  margin: 0;
  margin-left: auto;
  margin-right: auto;
}

.p-article-about__pic img {
  border-radius: 8px;
}

.p-article-about__name {
  display: inline;
  font-size: 16px;
  font-size: 1.6rem;
  margin-top: 0;
  margin-bottom: 0;
  color: #009944;
}

.p-article-about__contents {
  padding-left: 10px;
}

html:not(.sp) .p-article-about:hover, html:not(.sp) .p-article-about:focus {
  text-decoration: none;
  background-color: #f5f5f5;
}

html:not(.sp) .p-article-about:hover .p-article-about__name, html:not(.sp) .p-article-about:focus .p-article-about__name {
  text-decoration: underline;
}

/*
#styleguide
名称：アーティクル（スティック型）
class：article-stick

棒状のアーティクルです。

@カテゴリー article

```
<ul class="c-list">
  <li class="p-article-stick">
    <a href="/" class="p-article-stick__link">
      <figure class="p-article-stick__col  p-article-stick__col--pic">
        <img src="/assets/images/sample/sample-drinfo05.png" srcset="/assets/images/sample/sample-drinfo05.png 1x , /assets/images/sample/sample-drinfo05@2x.png 2x" width="90" height="60" alt="イメージ画像：医療機関名の外観">
      </figure><!-- /.p-article-stick__pic -->

      <div class="p-article-stick__col">
        <time class="p-article-stick__date">2017.08.19</time>

        <span class="p-article-stick__tag  p-article-stick__tag--for">
          <span class="p-article-stick__tagFree">
            <i class="fa  fa-stethoscope" aria-hidden="true"></i>
            熊本託麻台リハビリテーション病院
          </span>
          からのお知らせ
        </span>

        <p class="p-article-stick__title">
          栄養管理科だより(夏号)
        </p>
      </div><!-- /.p-article-stick__contents -->
    </a><!-- /.p-article-stick__link -->
  </li><!-- /.p-article-stick -->
<ul>
```

*/
.p-article-stick {
  font-size: 14px;
  font-size: 1.4rem;
}

.p-article-stick + .p-article-stick {
  margin-top: 10px;
}

.p-article-stick__link {
  display: table;
  width: 100%;
  border-radius: 8px;
  background-color: #fff;
  padding: 10px;
  -webkit-transition: box-shadow .3s ease 0s;
  transition: box-shadow .3s ease 0s;
}

html:not(.sp) .p-article-stick a.p-article-stick__link:hover, html:not(.sp) .p-article-stick a.p-article-stick__link:focus {
  text-decoration: none;
  box-shadow: inset 0 0 0 2px #fff100;
}

html:not(.sp) .p-article-stick a.p-article-stick__link:hover .p-article-stick__title, html:not(.sp) .p-article-stick a.p-article-stick__link:focus .p-article-stick__title {
  text-decoration: underline;
}

.p-article-stick__col {
  display: table-cell;
  vertical-align: top;
}

.p-article-stick__col--pic {
  width: 100px;
  padding-right: 10px;
}

.p-article-stick__col--pic img {
  border-radius: 8px;
}

.p-article-stick__date, .p-article-stick__tag {
  display: inline-block;
  vertical-align: top;
  line-height: 1;
  margin-top: 3px;
  font-weight: 700;
}

.p-article-stick__date {
  margin-right: .8em;
  color: #663300;
}

.p-article-stick__tag:not(.p-article-stick__tag--for) {
  min-width: 85px;
  color: #fff;
  border-radius: 20px;
  padding: 4px 20px;
  text-align: center;
  font-size: 12px;
  font-size: 1.2rem;
  margin-top: 0;
  background-color: #009944;
}

.p-article-stick__tag {
  color: #663300;
}

.p-article-stick__tagFree {
  color: #009944;
}

.p-article-stick__title {
  display: block;
  font-weight: normal;
  font-size: 1em;
}

/*
#styleguide
名称：アーティクル（カード型）
class：article-card

カード型のアーティクルです。

@カテゴリー article

```
<a href="#" class="p-article-card  p-article-card--play">
  <div class="p-article-card__inner">
    <figure class="p-article-card__pic">
      <span class="p-article-card__time">
        <i class="fa  fa-clock-o" aria-hidden="true"></i>
        09:16
      </span>

      <img src="/assets/images/sample/sample-program-thumb03.jpg"
           srcset="/assets/images/sample/sample-program-thumb03.jpg 1x ,
                   /assets/images/sample/sample-program-thumb03@2x.jpg 2x"
           width="270" height="152" alt="イメージ画像：タイトルのイメージ画像">
    </figure>

    <div class="p-article-card__contents">
      <p class="p-article-card__title">
        住民の健康を支える集団がん検診
      </p>

      <p class="p-article-card__text">
        熊本県ではがん検診普及率50％以上を目指しています。各市町村で実施される集団検診では、基礎健診をはじめ胃[...]
      </p>
    </div>
  </div><!-- /.p-article-card__inner -->
</a><!-- /.p-article-card -->
```
*/
.p-article-card {
  text-align: left;
  border-radius: 8px;
  background-color: #fff;
  display: block;
  max-width: 100%;
  width: 300px;
  border-radius: 8px;
  margin-bottom: 4px;
  -webkit-transition: box-shadow .3s ease 0s;
  transition: box-shadow .3s ease 0s;
  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.15), inset 0 0 0 0 transparent;
}

html:not(.sp) .p-article-card:hover, html:not(.sp) .p-article-card:focus {
  text-decoration: none;
  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.15), inset 0 0 0 2px #fff100;
}

html:not(.sp) .p-article-card:hover .p-article-card__title, html:not(.sp) .p-article-card:focus .p-article-card__title {
  text-decoration: underline;
}

.p-article-card__inner {
  height: 100%;
  display: block;
}

.p-article-card__pic {
  border-radius: 8px 8px 0 0;
  position: relative;
  margin: auto;
  max-height: 152px;
  overflow: hidden;
}

.p-article-card__pic img {
  border-radius: 8px 8px 0 0;
  width: 100%;
}

.p-article-card__contents {
  padding: 10px 15px 25px 15px;
  line-height: 1.4;
}

.p-article-card__title {
  display: inline;
  font-weight: 700;
  color: #009944;
  font-size: 16px;
  font-size: 1.6rem;
  margin-top: 0;
  -webkit-transition: box-shadow 0.45s ease 0s;
  transition: box-shadow 0.45s ease 0s;
  margin-bottom: 0;
}

.p-article-card__text {
  margin-top: .8em;
  margin-bottom: 0;
  color: #666666;
  font-weight: 400;
  font-size: 14px;
  font-size: 1.4rem;
}

.p-article-card__time {
  font-size: 12px;
  font-size: 1.2rem;
  display: block;
  width: 60px;
  height: 20px;
  background-color: #333333;
  color: #fff;
  text-align: center;
  line-height: 1;
  padding: 3px 5px;
  box-sizing: border-box;
  font-weight: 700;
  position: absolute;
  right: 0;
  bottom: 0;
}

.p-article-card__time .fa {
  display: inline;
}

.p-article-card__dl {
  line-height: 1.4;
  font-size: 14px;
  font-size: 1.4rem;
}

.p-article-card__dl dt {
  margin-top: 15px;
  color: #009944;
  font-weight: bold;
}

.p-article-card--new .p-article-card__pic:before {
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  background-image: url(../images/sprite.png?1588222826014);
  background-position: -78px -79px;
  width: 60px;
  height: 60px;
}

.p-article-card--play .p-article-card__pic:after {
  content: " ";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  border-radius: 4px;
  -webkit-transition: box-shadow 0.45s ease-in-out 0s, -webkit-transform 0.45s ease-in-out 0s;
  transition: box-shadow 0.45s ease-in-out 0s, -webkit-transform 0.45s ease-in-out 0s;
  transition: transform 0.45s ease-in-out 0s, box-shadow 0.45s ease-in-out 0s;
  transition: transform 0.45s ease-in-out 0s, box-shadow 0.45s ease-in-out 0s, -webkit-transform 0.45s ease-in-out 0s;
  background-image: url(../images/sprite.png?1588222826014);
  background-position: 0px -207px;
  width: 30px;
  height: 30px;
}

.p-article-link {
  width: 100%;
  padding-top: 18px;
  padding-bottom: 15px;
  border-bottom: 1px dashed #999999;
}

.p-article-link__title {
  color: #009944;
  font-weight: bold;
  line-height: 1.3;
  margin-top: -.2em;
  font-size: 18px;
  font-size: 1.8rem;
  margin-bottom: 5px;
}

/*
#styleguide
アーティクル：投稿 ( article )

```
```
*/
.p-article {
  background-color: #ffffff;
  border-radius: 8px;
  padding: 40px;
}

.p-article__info .fa {
  color: #ff9900;
}

.p-article__cat {
  font-size: 14px;
  font-size: 1.4rem;
}

.p-article__date {
  color: #663300;
  font-size: 14px;
  font-size: 1.4rem;
}

.p-article__heading {
  margin-top: 8px;
  font-size: 24px;
  font-size: 2.4rem;
  line-height: 1.4;
}

.p-article__content {
  margin-top: 20px;
  padding-bottom: 20px;
}

.p-article__footer {
  margin-top: 20px;
  margin-bottom: 20px;
}

/*
#styleguide
アーティクル：サブ ( article-sub )

```
```
*/
.p-article-sub {
  background-color: #ffffff;
  border-radius: 8px;
  padding: 10px 15px 25px 15px;
  position: relative;
}

.p-article-sub:before {
  content: " ";
  display: block;
  background-image: url("../images/common/h-tvtan-state-halfhead.png");
  background-size: 60px;
  background-repeat: no-repeat;
  position: absolute;
  width: 60px;
  height: 46px;
  top: -42px;
  right: 10px;
  pointer-events: none;
}

.p-article-sub__title {
  font-size: 14px;
  font-size: 1.4rem;
  margin-top: 3px;
}

.p-article-sub__list li {
  font-size: 14px;
  font-size: 1.4rem;
  line-height: 1.4;
  border-bottom: 1px dashed #333333;
}

.p-article-sub__list li a {
  display: block;
  padding: 10px 25px 10px 5px;
  position: relative;
  -webkit-transition: background-color 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955), color 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955), box-shadow 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  transition: background-color 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955), color 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955), box-shadow 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

html:not(.sp) .p-article-sub__list li a:hover, html:not(.sp) .p-article-sub__list li a:focus {
  text-decoration: none;
  background-color: #fffde4;
}

html:not(.sp) .p-article-sub__list li a:hover:before, html:not(.sp) .p-article-sub__list li a:focus:before {
  -webkit-transform: translateX(3px) rotateY(360deg);
          transform: translateX(3px) rotateY(360deg);
}

.p-article-sub__list li a:before {
  content: "\f105";
  font-family: "FontAwesome";
  -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  transition: -webkit-transform 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  transition: transform 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  transition: transform 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955), -webkit-transform 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  display: inline-block;
  position: absolute;
  right: 10px;
  color: #009944;
  font-size: 14px;
  font-size: 1.4rem;
  top: 50%;
  margin-top: -.6em;
}

.p-article-sub__list .fa {
  color: #ff9900;
}

/*
#styleguide
名称：プログラム
class：article-program

番組動画関連のコンテンツです

@カテゴリー article
@使用頻度 ★☆☆v

```
<article class="p-article-program">
  <div class="p-article-program__inner">
    <div class="c-grid  c-grid--x15   c-grid--y10">
      <div class="c-col-md-6  c-col-xs-12">
        <div class="p-article-program__iframe  c-movie">
          <iframe frameborder="0" src="https://www.videog.jp/player/1RwSbQM1sYd5" scrolling="no" width="100%" height="100%" allowfullscreen></iframe>
          <span class="p-article-program__time">
            <i class="fa  fa-clock-o  u-mr-xxs" aria-hidden="true"></i>08:33
          </span>
        </div>
      </div>
      <div class="c-col-md-6  c-col-xs-12">
        <!-- 背景色は u- -->
        <span class="p-tag">メディカルリポート</span>

        <!-- 色は u- -->
        <h2 class="p-article-program__heading  u-theme">
          ハチミツは与えないで！赤ちゃんに危険な食品とは
        </h2>

        <div class="c-paragraph-text  u-mt-xs">
          <p>
            乳児ボツリヌス症で生後６か月の男児が亡くなりました。原因は離乳食で与えていたハチミツでした。なぜ１歳未満の乳児にハチミツを与えてはいけないのか、その理由や症状などを小児科医師に聞きました。またハチミツ以外に注意すべき食品や赤ちゃんの食事のポイントなども紹介します。
          </p>
        </div>

        <div class="p-article-program__footer">
          <a href="" class="p-btn  u-mr-n">
            <span class="p-btn__inner">
              この動画を見る
              <i class="fa  fa-arrow-circle-right" aria-hidden="true"></i>
            </span>
          </a>
        </div>
      </div>
    </div>
  </div>
</article><!-- /.p-article-program -->
```
*/
.p-article-program {
  margin-bottom: 30px;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.15);
}

.p-article-program__inner {
  padding: 30px;
}

.p-article-program [class].p-tag {
  border: 1px solid #ffffff;
  font-size: 14px;
  font-size: 1.4rem;
  padding: .45em 1.66667em;
}

.p-article-program__heading {
  margin-top: 2px;
  font-size: 24px;
  font-size: 2.4rem;
  line-height: 1.4;
}

.p-article-program__footer {
  margin-top: 20px;
}

.p-article-program__iframe {
  overflow: hidden;
  border-radius: 8px;
  position: relative;
}

.p-article-program__iframe .p-article-program__time {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 4;
  display: block;
  font-size: 12px;
  font-size: 1.2rem;
  min-width: 60px;
  height: 20px;
  color: #ffffff;
  background-color: #333333;
  text-align: center;
  line-height: 1;
  padding: 4px;
  font-weight: bold;
}

.p-article-program-group {
  margin-top: 30px;
  position: relative;
}

/*
#styleguide
名称：アーティクル？：ドキュメント
class：article-document

comment

@カテゴリー article
@使用頻度 ☆☆★
@-- important

```
<a href="" class="p-article-document  p-article-document--important">
  <span class="p-article-document__free  u-bold">
    2017年5月22日～2017年5月28日の感染症情報
  </span>
  <span class="p-article-document__text">
     <i class="fa fa-info-circle" aria-hidden="true"></i> 特記事項：インフルエンザ流行中
  </span>
</a>

<a href="" class="p-article-document">
  <span class="p-article-document__free  u-bold">
    2017年5月22日～2017年5月28日の感染症情報
  </span>
</a>
```
*/
.p-article-document {
  display: block;
  border-radius: 8px;
  margin-bottom: 20px;
  background-color: #ffffff;
  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.15), inset 0 0 0 0 transparent;
  padding: 15px 15px 19px 30px;
  color: #009944;
  position: relative;
  overflow: hidden;
  -webkit-transition: background-color 0.25s cubic-bezier(0.455, 0.03, 0.515, 0.955), color 0.25s cubic-bezier(0.455, 0.03, 0.515, 0.955), box-shadow 0.25s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  transition: background-color 0.25s cubic-bezier(0.455, 0.03, 0.515, 0.955), color 0.25s cubic-bezier(0.455, 0.03, 0.515, 0.955), box-shadow 0.25s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  /*
   * @--important
   * 説明：特記事項
   */
  /*
   * @change
   * 説明：ホバーフォーカス
   */
}

.p-article-document:before {
  content: " ";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 10px;
  height: 100%;
  background-color: #009944;
}

.p-article-document__free {
  display: block;
  line-height: 1.4;
}

.p-article-document__free + .p-article-document__text {
  margin-top: 4px;
}

.p-article-document__text {
  display: block;
  line-height: 1.3;
  font-size: 14px;
  font-size: 1.4rem;
  color: #663300;
}

.p-article-document [class].fa {
  color: #ff9900;
}

.p-article-document.p-article-document--important {
  color: #e76666;
}

.p-article-document.p-article-document--important:before {
  background-color: #e76666;
}

html:not(.sp) .p-article-document:hover, html:not(.sp) .p-article-document:focus {
  text-decoration: none;
  box-shadow: 0px 0px 0px 0px transparent, inset 0 0 0 2px rgba(255, 241, 0, 0.75);
}

html:not(.sp) .p-article-document:hover .p-article-document__free, html:not(.sp) .p-article-document:focus .p-article-document__free {
  text-decoration: underline;
}

/*
#styleguide
名称：イベント情報一覧
class：article-event

comment

@カテゴリー article

```
<article class="p-article-event">
  <div class="p-article-event__inner">
    <figure class="p-article-event__thumb">
      <a class="c-h-float" href="./single.html">
        <img src="/assets/images/sample/sample-event01.jpg"
             srcset="/assets/images/sample/sample-event01.jpg 1x ,
                     /assets/images/sample/sample-event01@2x.jpg 2x"
             width="238" height="340" alt="">
      </a>
    </figure>

    <h3 class="p-article-event__heading">
      <a href="./single.html">医療業界就職説明会くまもと</a>
    </h3>

    <div class="p-article-event__info  u-bold">
      <ul class="c-list">
        <li><i class="fa  fa-calendar" aria-hidden="true"></i> 2017年9月3日（日）</li>
        <li><i class="fa  fa-map-marker" aria-hidden="true"></i> くまもと県民交流会館パレアホール</li>
      </ul>
    </div>
  </div>
</article><!-- /.p-article-event -->
```
*/
.p-article-event {
  display: block;
  background-color: #ffffff;
  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.15);
  padding: 40px 15px 35px 15px;
  border-radius: 8px;
}

.p-article-event__inner {
  display: block;
  max-width: 250px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.p-article-event__thumb {
  text-align: center;
  padding-left: 5px;
  padding-right: 5px;
  margin-bottom: 15px;
}

.p-article-event__heading {
  color: #009944;
  line-height: 1.4;
  font-size: 16px;
  font-size: 1.6rem;
}

.p-article-event__info {
  margin-top: 8px;
  font-size: 14px;
  font-size: 1.4rem;
  color: #663300;
  line-height: 1.4;
}

.p-pickup {
  border-radius: 8px;
  background-color: #ffffff;
  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.15);
  padding: 30px 40px  44px 40px;
}

.p-pickup [class].p-heading-underline {
  margin-bottom: 30px;
}

.p-pickup [class].p-heading-underline + .p-info-address {
  margin-top: -.5em;
}

.p-pickup__content + .p-pickup__content {
  margin-top: 50px;
}

.p-pickup__content.p-pickup__content--space-m + .p-pickup__content.p-pickup__content--space-m {
  margin-top: 70px;
}

.p-pickup-grid {
  font-size: 0;
}

.p-pickup-grid__col {
  display: inline-block;
  vertical-align: top;
}

.p-pickup-grid__col.p-pickup-grid__col--media {
  text-align: center;
}

.p-pickup__paragraph p + p {
  margin-top: 3.5em;
}

.p-pickup__footer {
  border-top: 1px dashed #009944;
  margin-top: 51px;
  padding-top: 40px;
}

/*
#styleguide
名称： 番組動画
class：feed-program

comment

@カテゴリー article

```
<a href="" class="p-feed-program">
  <figure class="p-feed-program__thumb">
    <img src="https://api.videog.jp/1/media/fcH4nsXaoSyH/thumbnails/files/o.jpg" alt="" width="270" height="152">
  </figure>

  <div class="p-feed-program__content">
    <!-- 背景色は u- -->
    <span class="p-tag">市民公開講座・イベント</span>

    <!-- 色は u- -->
    <h3 class="p-feed-program__heading">
      街の声に答えます！新型コロナここが知りたい
    </h3>
  </div>

  <div class="p-feed-program__bottom">
    <p class="p-feed-program__label">熊本赤十字病院</p>
    <p class="p-feed-program__day">放送日：2020年03月28日</p>
  </div>
</a>
```
*/
.p-feed-program-group {
  padding-top: 60px;
  padding-bottom: 10px;
}

.p-feed-program {
  width: 100%;
  max-width: 270px;
  -webkit-box-flex: 0;
  -webkit-flex: 0 1 auto;
      -ms-flex: 0 1 auto;
          flex: 0 1 auto;
  margin-left: auto;
  margin-right: auto;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  overflow: hidden;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.15), inset 0 0 0 2px transparent;
  line-height: 1.4;
  -webkit-transition: box-shadow .4s ease-in-out;
  transition: box-shadow .4s ease-in-out;
}

html:not(.sp) .p-feed-program[href]:hover, html:not(.sp) .p-feed-program[href]:focus {
  text-decoration: none;
  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.15), inset 0 0 0 2px currentColor;
}

html:not(.sp) .p-feed-program[href]:hover .p-feed-program__heading, html:not(.sp) .p-feed-program[href]:focus .p-feed-program__heading {
  text-decoration: underline;
}

.p-feed-program__thumb {
  width: 100%;
}

.p-feed-program__thumb img {
  position: relative;
  z-index: 1;
}

.p-feed-program__content {
  width: 100%;
  padding: 20px 15px 15px 15px;
}

.p-feed-program__bottom {
  width: 100%;
  margin-top: auto;
  padding: 0 15px 27px 15px;
  font-size: 12px;
  font-size: 1.2rem;
}

.p-feed-program [class].p-tag {
  vertical-align: top;
  color: inherit;
  font-size: 10px;
  font-size: 1rem;
  padding: 5px 12px;
  background: currentColor;
}

.p-feed-program__heading {
  font-size: 16px;
  font-size: 1.6rem;
  margin-top: 8px;
  font-weight: 700;
}

.p-feed-program__label {
  font-weight: 700;
}

.p-feed-program__label + .p-feed-program__day {
  margin-top: 3px;
}

.p-feed-program__day {
  color: #333333;
}

/*
#styleguide
名称：パターン Dr.テレビたん（ノーマル）
class：bg-drtvtan

パターン Dr.テレビたん

@カテゴリー bg
@使用頻度 ★★★

```
<div style="height:150px" class="p-bg-drtvtan"></div>
<div style="height:150px" class="p-bg-drtvtan-green"></div>
<div style="height:150px" class="p-bg-drtvtan-lightgreen"></div>
<div style="height:150px" class="p-bg-drtvtan-yellow"></div>
<div style="height:150px" class="p-bg-drtvtan-yellow-deep"></div>
<div style="height:150px" class="p-bg-drtvtan-lightyellow"></div>
<div style="height:150px" class="p-bg-drtvtan-gray"></div>
<div style="height:150px" class="p-bg-drtvtan-blue"></div>
<div style="height:150px" class="p-bg-drtvtan-lightblue"></div>
<div style="height:150px" class="p-bg-drtvtan-pink"></div>
<div style="height:150px" class="p-bg-drtvtan-pink-deep"></div>

```
*/
.p-bg-drtvtan {
  background-color: #fff;
  background-image: url("../images/bg/bg-dr-tvtan.jpg");
  background-position: left -15px;
  background-repeat: repeat;
  background-size: 240px;
}

.p-bg-drtvtan-green, .p-post-theme-news .l-area.l-area--sub[class] {
  background-color: #009944;
  background-image: url("../images/bg/bg-dr-tvtan-green.jpg");
  background-position: left -15px;
  background-repeat: repeat;
  background-size: 240px;
}

.p-bg-drtvtan-lightgreen {
  background-color: #e0ebdf;
  background-image: url("../images/bg/bg-dr-tvtan-lightgreen.jpg");
  background-position: left -15px;
  background-repeat: repeat;
  background-size: 240px;
}

.p-bg-drtvtan-yellow, .p-post-theme-blog .l-area.l-area--sub[class] {
  background-color: #fffde5;
  background-image: url("../images/bg/bg-dr-tvtan-yellow.jpg");
  background-position: left -15px;
  background-repeat: repeat;
  background-size: 240px;
}

.p-bg-drtvtan-yellow-deep {
  background-color: #ff9900;
  background-image: url("../images/bg/bg-dr-tvtan-yellow-deep.jpg");
  background-position: left -15px;
  background-repeat: repeat;
  background-size: 240px;
}

.p-bg-drtvtan-lightyellow {
  background-color: #1886b9;
  background-image: url("../images/bg/bg-dr-tvtan-lightyellow.jpg");
  background-position: left -15px;
  background-repeat: repeat;
  background-size: 240px;
}

.p-bg-drtvtan-gray {
  background-color: #f8f8f6;
  background-image: url("../images/bg/bg-dr-tvtan-gray.jpg");
  background-position: left -15px;
  background-repeat: repeat;
  background-size: 240px;
}

.p-bg-drtvtan-blue, .p-post-theme-new-medical .l-area.l-area--sub[class] {
  background-color: #1886b9;
  background-image: url("../images/bg/bg-dr-tvtan-blue.jpg");
  background-position: left -15px;
  background-repeat: repeat;
  background-size: 240px;
}

.p-bg-drtvtan-lightblue {
  background-color: #ddedf3;
  background-image: url("../images/bg/bg-dr-tvtan-lightblue.jpg");
  background-position: left -15px;
  background-repeat: repeat;
  background-size: 240px;
}

.p-bg-drtvtan-pink {
  background-color: #fbe8e6;
  background-image: url("../images/bg/bg-dr-tvtan-pink.jpg");
  background-position: left -15px;
  background-repeat: repeat;
  background-size: 240px;
}

.p-bg-drtvtan-pink-deep {
  background-color: #e76666;
  background-image: url("../images/bg/bg-dr-tvtan-pink-deep.jpg");
  background-position: left -15px;
  background-repeat: repeat;
  background-size: 240px;
}

/*
#styleguide
名称：パターン ノート
class：bg-drtvtan

パターン ノート

@カテゴリー bg
@使用頻度 ★☆☆

```
<div style="height:150px" class="p-bg-note"></div>

```
*/
.p-bg-note {
  background-color: #f8f8f8;
  background-image: url("../images/bg/ptn-note.jpg");
  background-position: left top;
  background-repeat: repeat;
  background-size: 412px;
}

/*
#styleguide
名称：パターン コルク
class：bg-drtvtan

パターン コルク

@カテゴリー bg
@使用頻度 ★☆☆

```
<div style="height:150px" class="p-bg-cork"></div>

```
*/
.p-bg-cork {
  background-color: #ba8e61;
  background-image: url("../images/bg/ptn-cork.jpg");
  background-position: left top;
  background-repeat: repeat;
  background-size: 128px;
}

/*
#styleguide
名称：バインダー
class：binder

バインダーテンプレートです。

@カテゴリー binder
@使用頻度 ★★☆

```
  <div class="p-binder">
    <div class="p-binder__inner">
      バインダーテンプレートです。
    </div><!-- /.p-binder__inner -->
  </div><!-- /.p-binder -->
```
*/
.p-binder {
  padding: 8px;
  background-color: #ba8e61;
  background-image: url("../images/bg/ptn-cork.jpg");
  background-position: left top;
  background-repeat: repeat;
  background-size: 128px;
  border-radius: 8px;
  box-shadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.4);
  position: relative;
}

.p-binder:before {
  content: " ";
  position: absolute;
  top: -10px;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  -webkit-transform-origin: center top;
      -ms-transform-origin: center top;
          transform-origin: center top;
  background-image: url(../images/sprite.png?1588222826014);
  background-position: 0px 0px;
  width: 280px;
  height: 79px;
}

.p-binder__inner {
  padding-top: 35px;
  padding-bottom: 20px;
  padding-left: 15px;
  padding-right: 15px;
  background-color: #f8f8f8;
  box-shadow: 0px 1px 8px 0px rgba(4, 0, 0, 0.4);
  background-image: url("../images/bg/ptn-note.jpg");
  background-position: left top;
  background-repeat: repeat;
  background-size: 412px;
}

.p-binder__outline {
  background-color: #fff;
  border-radius: 8px;
}

.p-bnrlist {
  width: 1120px;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-top: 20px;
  padding-bottom: 30px;
  text-align: center;
  padding-left: 15px;
  padding-right: 15px;
}

.p-bnrgroup {
  padding-top: 20px;
  padding-bottom: 20px;
  text-align: center;
}

.p-bnrgroup img {
  border-radius: 8px;
}

.p-bnrgroup.p-bnrgroup--btr-outline img {
  border: 1px solid #ccc;
}

/*
#styleguide
名称：バンくずリスト
class：breadcrumns

パンくずリストです
windowサイズが自身の横幅より小さいとスクロールします

@カテゴリー breadcrumns
@使用頻度 ☆☆☆

```
<div class="p-breadcrumns">
  <div class="p-breadcrumns__scroll">
    <ul class="p-breadcrumns__inner" itemscope="" itemtype="http://schema.org/BreadcrumbList">
      <li class="p-breadcrumns__col" itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
        <a class="p-breadcrumns__link" itemprop="item" href="<%= data.public_url  %>"><span itemprop="name"><i class="fa  fa-home  u-mr-xxs" aria-hidden="true"></i>ホーム</span></a>
      </li>
      <li class="p-breadcrumns__col" itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
        <a class="p-breadcrumns__link" itemprop="item" href="<%= data.public_url  %>"><span itemprop="name">医療機関紹介</span></a>
      </li>
      <li class="p-breadcrumns__col" itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
        <span class="p-breadcrumns__link  is-active" itemprop="item"><span itemprop="name">熊本機能病院</span></span>
      </li>
    </ul>
  </div>
</div><!-- /.p-breadcrumb -->
```
*/
.p-breadcrumns {
  margin-bottom: 20px;
  line-height: 1;
  position: relative;
  z-index: 1;
}

.p-breadcrumns__scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.p-breadcrumns__inner {
  border-radius: 30px;
  overflow: hidden;
  font-size: 0;
  display: inline-block;
  white-space: nowrap;
  vertical-align: top;
  border: 1px solid #dddddd;
}

.p-breadcrumns__col {
  display: inline-block;
  vertical-align: top;
  position: relative;
}

.p-breadcrumns__col:first-child .p-breadcrumns__link:before {
  content: none;
}

.p-breadcrumns__col:last-child .p-breadcrumns__link:after {
  content: none;
}

.p-breadcrumns__link {
  height: 28px;
  line-height: 1.2;
  padding: 5px 20px 7px 30px;
  position: relative;
  font-size: 14px;
  font-size: 1.4rem;
  position: relative;
  display: block;
  color: #999999;
  background-color: #f5f5f5;
}

.p-breadcrumns__link:before {
  content: " ";
  display: block;
  position: absolute;
  left: 0;
  top: -2.5px;
  z-index: 0;
  border-width: 17px 0 17px 11px;
  border-style: solid;
  border-color: transparent transparent transparent #dddddd;
}

.p-breadcrumns__link:after {
  content: " ";
  display: block;
  position: absolute;
  right: -10px;
  top: -2px;
  z-index: 1;
  border-width: 17px 0 17px 11px;
  border-style: solid;
  border-color: transparent transparent transparent #f5f5f5;
}

.p-breadcrumns__link.is-active {
  color: #fff;
  background-color: #009944;
}

.p-breadcrumns__link.is-active:after {
  border-color: transparent transparent transparent #009944;
}

/*
#styleguide
名称：ボタン
class：btn

ブットンです。
・基本サイズ：270×50
・Modifierによって横幅（x）、縦幅（y）、色（反転有）を調整します
・アイコン（iタグ）のclassに right があった場合自動的に右寄りになります
  | オリジナル（tv-）は含まない
・block要素になっております
・横幅を制御するのは --x-hoge で x=x軸の意味です
・縦幅を制御するのは --y-hoge で y=y軸の意味です
・色は -rv を付けることで反転します（p-btn--accent-rv） rv=rivers

■横幅 x系
--x-xs：100px
--x-s：170px
--x-m：320px
--x-ml：370px
--x-l：570px
--x-max：100%
--x-auto：auto


■縦幅 y系
--y-xs：25px
--y-s：40px
--y-ms：45px
--y-m：60px
--y-ml：70px
--y-auto：auto


@使用頻度 ★★★
@カテゴリー btn
@--theme
@--accent
@--point
@--brown
@--orange
@--green
@--yellow
@--aqua
@--blue
@--daidai
@--square

@--x-xs
@--x-s
@--x-m
@--x-ml
@--x-l
@--x-auto

@--y-xs
@--y-s
@--y-m
@--y-ml
@--y-auto


```
<div class="c-grid  u-mb-p">
  <div class="c-col">
    <a href="" class="p-btn">
      <span class="p-btn__inner">
        ボタンですよ。
        <i class="fa  fa-arrow-circle-right" aria-hidden="true"></i>
      </span>
    </a>
  </div>

  <div class="c-col">
    <!-- p-btn--x-hoge の xは横軸のx -->
    <a href="" class="p-btn  p-btn--green-rv  p-btn--x-m">
      <span class="p-btn__inner">
        ボタンですよ。
        <i class="fa  fa-arrow-circle-right" aria-hidden="true"></i>
      </span>
    </a>
  </div>

  <div class="c-col">
    <!-- p-btn--x-hoge の xは横軸のx -->
    <a href="" class="p-btn  p-btn--green-rv  p-btn--x-m" disabled="">
      <span class="p-btn__inner">
        ボタンですよ。
        <i class="fa  fa-arrow-circle-right" aria-hidden="true"></i>
      </span>
    </a>
  </div>

  <div class="c-col">
    <!-- p-btn--y-hoge の yは横軸のy -->
    <a href="" class="p-btn  p-btn--point  p-btn--y-m">
      <span class="p-btn__inner">
        ボタンですよ。
        <i class="fa  fa-arrow-circle-right" aria-hidden="true"></i>
      </span>
    </a>
  </div>
</div>

<!-- p-btn--x-hoge の xは横軸のx -->
<a href="" class="p-btn  p-btn--x-auto  p-btn--y-auto">
  <span class="p-btn__inner">
    ボタンですよ。
    <i class="fa  fa-arrow-circle-right" aria-hidden="true"></i>
  </span>
</a>
```


*/
.p-btn {
  border: 1px solid #009944;
  color: #009944;
  background-color: #ffffff;
  border-radius: 50px;
  overflow: hidden;
  font-size: 16px;
  font-size: 1.6rem;
  display: block;
  font-weight: bold;
  max-width: 100%;
  margin: 0 auto;
  padding: 0 1.2em;
  position: relative;
  text-align: center;
  -webkit-transition: background-color 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955), color 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955), box-shadow 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  transition: background-color 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955), color 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955), box-shadow 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  /*
   * インナー
   * .p-btn__inner
   */
  /*
   * アイコン
   */
  /*
   * 横幅バリエーション
   * .p-btn--x-hoge
   * x = x軸
   */
  width: 270px;
  /*
   * 縦幅バリエーション
   * .p-btn--y-hoge
   * y = y軸
   */
  height: 50px;
  line-height: 48px;
  /*
   * カラーバリエーション
   * .p-btn--hoge
   * .p-btn--hoge-rv（rivers）
   */
  /*
    * input系
    */
  /*
   * ボタン角
   */
  /*
   * ボタンPDF
   */
}

html:not(.sp) .p-btn:not([disabled]):hover, html:not(.sp) .p-btn:not([disabled]):focus {
  box-shadow: inset 0 0 0 1px #fff, inset 0 0 0 3px #fff100;
}

.p-btn[disabled] {
  border-color: #f0f0f0 !important;
  background: none #f0f0f0 !important;
  color: #b0b0b0 !important;
  cursor: not-allowed !important;
  transtion: none !important;
  text-decoration: none !important;
}

.p-btn[disabled] > * {
  transtion: none !important;
}

.p-btn .fa[class*="-right"] {
  font-size: 0.875em;
  vertical-align: .025em;
  position: absolute;
  right: 1.28571em;
  top: 50%;
  margin-top: -.5em;
  -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  transition: -webkit-transform 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  transition: transform 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  transition: transform 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955), -webkit-transform 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

.p-btn.p-btn--ico-static .fa[class*="-right"] {
  position: relative;
  margin-top: 0;
  right: 0;
  vertical-align: middle;
  display: inline-block;
  top: auto;
  height: 1.35714em;
}

.p-btn.p-btn--x-xs {
  width: 100px;
}

.p-btn.p-btn--x-s {
  width: 170px;
}

.p-btn.p-btn--x-ms {
  width: 200px;
}

.p-btn.p-btn--x-m {
  width: 320px;
}

.p-btn.p-btn--x-ml {
  width: 370px;
}

.p-btn.p-btn--x-l {
  width: 570px;
}

.p-btn.p-btn--x-max {
  width: 100%;
  padding-left: 1.5em;
  padding-right: 1.5em;
}

.p-btn.p-btn--x-auto {
  width: auto;
  padding-left: 1.5em;
  padding-right: 1.5em;
}

.p-btn.p-btn--y-xs {
  height: 25px;
  line-height: 23px;
}

.p-btn.p-btn--y-s {
  height: 40px;
  line-height: 38px;
}

.p-btn.p-btn--y-ms {
  height: 45px;
  line-height: 43px;
}

.p-btn.p-btn--y-m {
  height: 60px;
  line-height: 58px;
}

.p-btn.p-btn--y-ml {
  height: 70px;
  line-height: 68px;
}

.p-btn.p-btn--y-auto {
  height: auto;
  line-height: normal;
  padding-top: .65em;
  padding-bottom: .65em;
}

.p-btn.p-btn--auto .p-btn__inner {
  line-height: 1.3;
}

.p-btn.p-btn--theme {
  border: 1px solid #009944;
  color: #009944;
  background-color: #ffffff;
}

.p-btn.p-btn--accent {
  border: 1px solid #fff100;
  color: #fff100;
  background-color: #ffffff;
}

.p-btn.p-btn--point {
  border: 1px solid #ff6666;
  color: #ff6666;
  background-color: #ffffff;
}

.p-btn.p-btn--font {
  border: 1px solid #333333;
  color: #333333;
  background-color: #ffffff;
}

.p-btn.p-btn--link {
  border: 1px solid #333333;
  color: #333333;
  background-color: #ffffff;
}

.p-btn.p-btn--error {
  border: 1px solid #cc6666;
  color: #cc6666;
  background-color: #ffffff;
}

.p-btn.p-btn--attention {
  border: 1px solid #cc0000;
  color: #cc0000;
  background-color: #ffffff;
}

.p-btn.p-btn--action {
  border: 1px solid #cc0000;
  color: #cc0000;
  background-color: #ffffff;
}

.p-btn.p-btn--white {
  border: 1px solid #ffffff;
  color: #ffffff;
  background-color: #ffffff;
}

.p-btn.p-btn--black {
  border: 1px solid #000000;
  color: #000000;
  background-color: #ffffff;
}

.p-btn.p-btn--gray {
  border: 1px solid #cccccc;
  color: #cccccc;
  background-color: #ffffff;
}

.p-btn.p-btn--brown {
  border: 1px solid #663300;
  color: #663300;
  background-color: #ffffff;
}

.p-btn.p-btn--orange {
  border: 1px solid #ff9900;
  color: #ff9900;
  background-color: #ffffff;
}

.p-btn.p-btn--green {
  border: 1px solid #009944;
  color: #009944;
  background-color: #ffffff;
}

.p-btn.p-btn--yellow {
  border: 1px solid #fff100;
  color: #fff100;
  background-color: #ffffff;
}

.p-btn.p-btn--aqua {
  border: 1px solid #20a3df;
  color: #20a3df;
  background-color: #ffffff;
}

.p-btn.p-btn--pink {
  border: 1px solid #e76666;
  color: #e76666;
  background-color: #ffffff;
}

.p-btn.p-btn--blue {
  border: 1px solid #1886ba;
  color: #1886ba;
  background-color: #ffffff;
}

.p-btn.p-btn--purple {
  border: 1px solid #9965cb;
  color: #9965cb;
  background-color: #ffffff;
}

.p-btn.p-btn--daidai {
  border: 1px solid #e54a24;
  color: #e54a24;
  background-color: #ffffff;
}

.p-btn.p-btn--theme-rv {
  border: 1px solid #009944;
  color: #ffffff;
  background-color: #009944;
}

.p-btn.p-btn--accent-rv {
  border: 1px solid #fff100;
  color: #ffffff;
  background-color: #fff100;
}

.p-btn.p-btn--point-rv {
  border: 1px solid #ff6666;
  color: #ffffff;
  background-color: #ff6666;
}

.p-btn.p-btn--font-rv {
  border: 1px solid #333333;
  color: #ffffff;
  background-color: #333333;
}

.p-btn.p-btn--link-rv {
  border: 1px solid #333333;
  color: #ffffff;
  background-color: #333333;
}

.p-btn.p-btn--error-rv {
  border: 1px solid #cc6666;
  color: #ffffff;
  background-color: #cc6666;
}

.p-btn.p-btn--attention-rv {
  border: 1px solid #cc0000;
  color: #ffffff;
  background-color: #cc0000;
}

.p-btn.p-btn--action-rv {
  border: 1px solid #cc0000;
  color: #ffffff;
  background-color: #cc0000;
}

.p-btn.p-btn--white-rv {
  border: 1px solid #ffffff;
  color: #ffffff;
  background-color: #ffffff;
}

.p-btn.p-btn--black-rv {
  border: 1px solid #000000;
  color: #ffffff;
  background-color: #000000;
}

.p-btn.p-btn--gray-rv {
  border: 1px solid #cccccc;
  color: #ffffff;
  background-color: #cccccc;
}

.p-btn.p-btn--brown-rv {
  border: 1px solid #663300;
  color: #ffffff;
  background-color: #663300;
}

.p-btn.p-btn--orange-rv {
  border: 1px solid #ff9900;
  color: #ffffff;
  background-color: #ff9900;
}

.p-btn.p-btn--green-rv {
  border: 1px solid #009944;
  color: #ffffff;
  background-color: #009944;
}

.p-btn.p-btn--yellow-rv {
  border: 1px solid #fff100;
  color: #ffffff;
  background-color: #fff100;
}

.p-btn.p-btn--aqua-rv {
  border: 1px solid #20a3df;
  color: #ffffff;
  background-color: #20a3df;
}

.p-btn.p-btn--pink-rv {
  border: 1px solid #e76666;
  color: #ffffff;
  background-color: #e76666;
}

.p-btn.p-btn--blue-rv {
  border: 1px solid #1886ba;
  color: #ffffff;
  background-color: #1886ba;
}

.p-btn.p-btn--purple-rv {
  border: 1px solid #9965cb;
  color: #ffffff;
  background-color: #9965cb;
}

.p-btn.p-btn--daidai-rv {
  border: 1px solid #e54a24;
  color: #ffffff;
  background-color: #e54a24;
}

.p-btn.p-btn--submit {
  cursor: pointer;
  font-family: "FontAwesome", "YakuHanJP", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴシック Pro", Meiryo, "メイリオ", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif !important;
  speak: none;
  font-style: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
}

.p-btn.p-btn--submit:focus {
  outline: none;
}

.p-btn.p-btn--square {
  padding: 0 10px;
  border-radius: 8px;
  font-size: 15px;
  font-size: 1.5rem;
}

.p-btn.p-btn--square i {
  margin-right: 7px;
  display: inline-block;
  position: relative;
  bottom: -.15em;
  font-size: 1.2em;
}

.p-btn.p-btn--pdf .p-btn__inner {
  width: 100%;
  text-align: left;
  display: block;
  padding-left: 14px;
}

.p-btn.p-btn--pdf .p-btn__inner i {
  margin-right: 20px;
}

html:not(.sp) .p-btn:not([disabled]):hover, html:not(.sp) .p-btn:not([disabled]):focus {
  text-decoration: none;
}

html:not(.sp) .p-btn:not([disabled]):hover i, html:not(.sp) .p-btn:not([disabled]):focus i {
  -webkit-transform: scale(1.1) rotate(4deg);
      -ms-transform: scale(1.1) rotate(4deg);
          transform: scale(1.1) rotate(4deg);
}

html:not(.sp) .p-btn:not([disabled]):hover i[class*="right"], html:not(.sp) .p-btn:not([disabled]):focus i[class*="right"] {
  -webkit-transform: translateX(3px);
      -ms-transform: translateX(3px);
          transform: translateX(3px);
}

html:not(.sp) .p-btn:not([disabled]):hover i[class*="left"], html:not(.sp) .p-btn:not([disabled]):focus i[class*="left"] {
  -webkit-transform: translateX(-3px);
      -ms-transform: translateX(-3px);
          transform: translateX(-3px);
}

html:not(.sp) .p-btn:not([disabled]):hover i[class*="down"], html:not(.sp) .p-btn:not([disabled]):focus i[class*="down"] {
  -webkit-transform: translateY(3px);
      -ms-transform: translateY(3px);
          transform: translateY(3px);
}

html:not(.sp) .p-btn:not([disabled]):hover i[class*="up"], html:not(.sp) .p-btn:not([disabled]):focus i[class*="up"] {
  -webkit-transform: translateY(-3px);
      -ms-transform: translateY(-3px);
          transform: translateY(-3px);
}

.p-btn-fixed-bottom {
  position: relative;
  padding-bottom: 75px;
}

.p-btn-fixed-bottom > .p-btn {
  position: absolute;
  right: 0;
  bottom: 0;
}

.p-btn-next {
  /*
   * @__inner
   * 説明：インナー
   */
  cursor: auto;
  overflow: hidden;
  position: relative;
  max-width: 100%;
  display: block;
  text-align: left;
  margin-left: auto;
  margin-right: auto;
  border-radius: 40px;
  padding-left: 9px;
  padding-right: 9px;
  color: #333333;
  font-size: 14px;
  font-size: 1.4rem;
  width: 100%;
  line-height: 1.3;
  padding-top: 11px;
  padding-bottom: 11px;
  background-color: #f8f8f8;
  -webkit-transition: background-color 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955), color 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955), box-shadow 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  transition: background-color 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955), color 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955), box-shadow 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  /*
   * アイコン
   */
}

.p-btn-next__inner {
  position: relative;
  z-index: 1;
  display: table;
}

.p-btn-next__inner .p-btn-next__icon,
.p-btn-next__inner .p-btn-next__free {
  display: table-cell;
  vertical-align: middle;
}

.p-btn-next__icon {
  color: #1886ba;
}

.p-btn-next__free {
  padding-left: 4px;
}

.p-btn-next.p-btn-next--x200 {
  width: 200px;
}

.p-btn-next .fa[class*="-right"] {
  -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  transition: -webkit-transform 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  transition: transform 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  transition: transform 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955), -webkit-transform 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

html:not(.sp) a.p-btn-next:not([disabled]):hover, html:not(.sp) a.p-btn-next:not([disabled]):focus {
  text-decoration: none;
  box-shadow: inset 0 -3.4em 0px -3.2em rgba(0, 0, 0, 0), inset 0 0 0 0.2em rgba(0, 0, 0, 0.25);
}

html:not(.sp) a.p-btn-next:not([disabled]):hover i, html:not(.sp) a.p-btn-next:not([disabled]):focus i {
  -webkit-transform: scale(1.1) rotate(4deg);
      -ms-transform: scale(1.1) rotate(4deg);
          transform: scale(1.1) rotate(4deg);
}

html:not(.sp) a.p-btn-next:not([disabled]):hover i[class*="right"], html:not(.sp) a.p-btn-next:not([disabled]):focus i[class*="right"] {
  -webkit-transform: translateX(3px);
      -ms-transform: translateX(3px);
          transform: translateX(3px);
}

html:not(.sp) a.p-btn-next:not([disabled]):hover i[class*="left"], html:not(.sp) a.p-btn-next:not([disabled]):focus i[class*="left"] {
  -webkit-transform: translateX(-3px);
      -ms-transform: translateX(-3px);
          transform: translateX(-3px);
}

html:not(.sp) a.p-btn-next:not([disabled]):hover i[class*="down"], html:not(.sp) a.p-btn-next:not([disabled]):focus i[class*="down"] {
  -webkit-transform: translateY(3px);
      -ms-transform: translateY(3px);
          transform: translateY(3px);
}

html:not(.sp) a.p-btn-next:not([disabled]):hover i[class*="up"], html:not(.sp) a.p-btn-next:not([disabled]):focus i[class*="up"] {
  -webkit-transform: translateY(-3px);
      -ms-transform: translateY(-3px);
          transform: translateY(-3px);
}

.p-caption {
  color: #663300;
  font-size: 18px;
  font-size: 1.8rem;
  line-height: 1.3;
  margin-top: 0;
}

.p-chartgallery {
  margin-top: 40px;
  overflow: hidden;
  border-radius: 8px;
  padding: 5px;
  border: 1px solid #cccccc;
}

.p-chartgallery > * {
  width: 100% !important;
  max-width: 100% !important;
}

.p-chartgallery > * [dir="ltr"] {
  position: static !important;
  width: 100% !important;
}

.p-chartgallery > * [dir="ltr"] > div {
  position: static !important;
}

/*
#styleguide
名称：コンテナ（アウトライン）
class：container-outline

@カテゴリー container
@使用頻度 ★★☆
@発展途上
@--info

```
<div class="p-container-outline  p-container-outline--info">
  <div class="c-grid  c-grid--middle  c-grid--x15  c-grid--y5">
    <div class="c-col-lg-8  c-col-xs-12">
      <div class="p-container-outline__content">
        <p class="p-container-outline__title">
          <i class="fa  fa-info-circle  u-mr-xxs" aria-hidden="true"></i>情報掲載をご希望の医療機関様へ
        </p>

        <div class="c-paragraph-text">
          <p>
            Dr.テレビたんのテレビ番組、ホームページへの情報掲載、資料請求をご希望される医療機関様は、情報掲載お申し込みのページをご覧ください。
          </p>
        </div>
      </div>
    </div>

    <div class="c-col-lg-4  c-col-xs-12">
      <a href="" class="p-btn  p-btn--y-ms  p-btn--square  p-btn--green-rv  u-ml-n">
        <span class="p-btn__inner">
          <i class="tv-document  u-mr-xxs" aria-hidden="true"></i>
          情報掲載のお申し込みはこちら
        </span>
      </a>
    </div>
  </div>
</div>
```
*/
.p-container-outline {
  padding: 15px 30px 18px 30px;
  border-radius: 16px;
  border: 1.2px dashed #009944;
  background-color: #ffffff;
}

.p-container-outline__title {
  line-height: 1.5;
  font-weight: bold;
  font-size: 16px;
  font-size: 1.6rem;
  color: #009944;
}

.p-container-outline.p-container-outline--info {
  margin-top: 40px;
  margin-bottom: 100px;
}

.p-container-outline.p-container-outline--caution {
  border-color: #e76666;
}

.p-container-outline.p-container-outline--caution .p-container-outline__title {
  color: #e76666;
}

.p-dl-agreement {
  margin: 0;
}

.p-dl-agreement dd {
  margin: 0;
}

.p-dl-agreement dt {
  font-weight: bold;
  font-size: 18px;
  font-size: 1.8rem;
}

.p-dl-agreement dt + dd {
  margin-top: 0;
}

.p-dl-agreement dd {
  margin-top: 1.65em;
}

.p-dl-agreement dd + dt {
  margin-top: 3.8em;
}

.p-dl-agreement__indent {
  padding-left: 10px;
}

.p-dl-agreement__sub {
  margin-top: 15px;
  margin-left: 2.6em;
}

/*
#styleguide
名称：医師紹介
class：dr-info

医師紹介で使用するやつ。
複数のコンポーネントを組み合わせることで実現しています。

@カテゴリー dr
@使用頻度 ★☆☆
@コンポーネント p-name-dr
@コンポーネント p-table-profile
@コンポーネント p-tag

```
code
```
*/
.p-dr-info {
  width: 100%;
}

.p-dr-info__pic img {
  border: 1px solid #cccccc;
  border-radius: 8px;
}

.p-dr-info [class].p-tag {
  vertical-align: top;
}

.p-dr-info [class].p-name-dr {
  margin-top: -2px;
}

.p-dr-chief {
  display: inline-block;
  background-color: #fff;
  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.15);
  border-radius: 8px;
  padding: 35px 35px 20px 35px;
  text-align: center;
}

.p-dr-chief__pic {
  padding-bottom: 5px;
}

.p-dr-chief__pic img {
  border-radius: 8px;
}

.p-dr-greeting:before, .p-dr-greeting:after {
  content: "";
  display: table;
}

.p-dr-greeting:after {
  clear: both;
}

.p-dr-greeting + .p-dr-greeting {
  margin-top: 60px;
  padding-top: 60px;
  border-top: 1px dashed #999999;
}

/*
#styleguide
名称：フォーム
class：form

comment

@カテゴリー form
@使用頻度 ★☆☆


```
<div class="p-binder  p-form-outer">
  <div class="p-binder__inner">
    <div class="p-form">
      <!-- <div class="p-form__header">
        <h3 class="p-form__heading">医療相談受付フォーム</h3>
      </div> -->
      <div class="p-form__inner">
        <div role="form" class="wpcf7" id="wpcf7-f418-p2-o1" dir="ltr" lang="ja">
          <form action="/contact/#wpcf7-f418-p2-o1" method="post" class="wpcf7-form" novalidate="novalidate">
            <table class="p-form-table">
              <tbody>
                <tr>
                  <th>
                    <label class="p-form-table__label" for="inquiry-name">
                      <span class="p-form-table__labelTag  p-form-table__labelTag--required">必須</span>
                      <span class="p-form-table__labelName">お名前</span>
                    </label>
                  </th>
                  <td>
                    <div class="p-form-table__content  p-form-table__content--input-max">
                      <span>
                        <input id="inquiry-name-last" placeholder="お名前" name="your-name-last" value="" size="40" type="text">
                      </span>
                    </div>
                  </td>
                </tr>
                <tr>
                  <th>
                    <label class="p-form-table__label" for="inquiry-email">
                      <span class="p-form-table__labelTag  p-form-table__labelTag--required">必須</span>
                      <span class="p-form-table__labelName">メールアドレス</span>
                    </label>
                  </th>
                  <td>
                    <div class="p-form-table__content">
                      <span class="your-email">
                        <input name="your-email" placeholder="example@dr-tvtan.jp" value="" id="inquiry-email" type="email">
                      </span>
                    </div>
                  </td>
                </tr>
                <tr>
                  <th>
                    <label class="p-form-table__label" for="inquiry-sex">
                      <span class="p-form-table__labelTag  p-form-table__labelTag--any">任意</span>
                      <span class="p-form-table__labelName">性別</span>
                    </label>
                  </th>
                  <td>
                    <div class="p-form-table__content">
                      <ul class="c-grid  c-grid--x10  c-grid--y5">
                        <li class="c-col-md-auto  c-col-xs-6">
                          <span>
                            <label class="p-form-table__label" for="inquiry-sex-radio01">
                              <input name="your-sex" name="your-sex" value="" id="inquiry-sex-radio01" type="radio"> 男性
                            </label>
                          </span>
                        </li>
                        <li class="c-col-md-auto  c-col-xs-6">
                          <span>
                            <label class="p-form-table__label" for="inquiry-sex-radio02">
                              <input name="your-sex" name="your-sex" value="" id="inquiry-sex-radio02" type="radio"> 女性
                            </label>
                          </span>
                        </li>
                      </ul>
                    </div>
                  </td>
                </tr>
                <tr>
                  <th>
                    <label class="p-form-table__label" for="inquiry-age">
                      <span class="p-form-table__labelTag  p-form-table__labelTag--any">任意</span>
                      <span class="p-form-table__labelName">年齢</span>
                    </label>
                  </th>
                  <td>
                    <div class="p-form-table__content">
                      <span>
                        <select name="inquiry-age" class="inquiry-age" id="inquiry-age">
                          <option value="選択してください">選択してください</option>
                          <option value="10代以下">10代以下</option>
                          <option value="10代">10代</option>
                          <option value="20代">20代</option>
                          <option value="30代">30代</option>
                          <option value="40代">40代</option>
                          <option value="50代">50代</option>
                          <option value="60代">60代</option>
                          <option value="70代">70代</option>
                          <option value="80代以上">80代以上</option>
                        </select>
                      </span>
                    </div>
                  </td>
                </tr>
                <tr>
                  <th>
                    <label class="p-form-table__label" for="inquiry-contact">
                      <span class="p-form-table__labelTag  p-form-table__labelTag--required">必須</span>
                      <span class="p-form-table__labelName">お問い合わせ<br>内容</span>
                    </label>
                  </th>
                  <td>
                    <div class="p-form-table__content">
                      <span class="your-message">
                        <textarea name="your-message" placeholder="お問い合わせ内容" id="inquiry-contact"></textarea>
                      </span>
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>

            <div class="p-form__footer">
              <div class="c-paragraph-text">
                <p>
                  <span class="u-theme  u-bold"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> ご注意：</span>すべてのご相談について対応・採用できるとは限りません。また、あまりに個別な症状などについてはご回答できないこともあります。ご了承いただいたうえ、ご相談ください。
                </p>
              </div>

              <div class="p-form__btn">
                <input type="submit" value="この内容で送信する&nbsp;&#xf0a9;" class="p-btn  p-btn--orange-rv  p-btn--submit">
              </div>
            </div>
          </form>
        </div><!-- /.wpcf7 Wordpressの場合 -->
      </div>
    </div><!-- /.p-form -->
  </div><!-- /.p-binder__inner -->
</div><!-- /.p-binder -->
```
*/
.p-form {
  width: 770px;
  background-color: #fff;
  font-size: 14px;
  font-size: 1.4rem;
  border-radius: 8px;
  border: 4px solid #009944;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
}

.p-form__inner {
  width: 600px;
  margin-left: auto;
  margin-right: auto;
  padding: 30px 15px 40px 15px;
  max-width: 100%;
}

.p-form-table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  border: 0;
  width: 100%;
  /*
   * 見出し：項目
   */
  /*
   * contactform依存系
   */
}

.p-form-table th {
  color: #009944;
}

.p-form-table th, .p-form-table td {
  font-weight: normal;
  vertical-align: top;
  text-align: left;
}

.p-form-table__footer {
  margin-top: 1em;
  text-align: center;
}

.p-form-table__hint {
  color: #999999;
  display: inline-block;
  font-size: .85em;
  vertical-align: 1px;
}

.p-form-table__hint.p-form__hint--right {
  margin-left: .5em;
}

.p-form-table__hint.p-form__hint--left {
  margin-right: .5em;
}

.p-form-table__hint + [type="text"] {
  width: 205px;
}

.p-form-table__checktext {
  padding-top: 1em;
  padding-bottom: 1em;
}

.p-form-table__label {
  margin-top: 6px;
  vertical-align: top;
  display: inline-block;
  line-height: 1;
}

.p-form-table__labelTag {
  border-radius: 3px;
  font-size: 12px;
  font-size: 12px;
  font-size: 1.2rem;
  padding-top: 3.5px;
  letter-spacing: 0.05em;
  margin: 0 7px 0 0;
  text-align: center;
  width: 40px;
  height: 20px;
  display: inline-block;
  font-weight: 500;
  vertical-align: top;
  vertical-align: top;
  color: #fff;
  font-weight: normal;
}

html.ie .p-form-table__labelTag {
  line-height: 17px;
}

.p-form-table__labelTag--required {
  background-color: #009944;
}

.p-form-table__labelTag--any {
  background-color: #bbbbbb;
}

.p-form-table__labelName {
  font-size: 14px;
  font-size: 1.4rem;
  display: inline-block;
  vertical-align: top;
  line-height: 1.42857;
}

.p-form-table__content + .p-form-table__content {
  margin-top: 10px;
}

.p-form-table__content [type="text"],
.p-form-table__content [type="tel"],
.p-form-table__content [type="email"],
.p-form-table__content [type="number"] [type="password"],
.p-form-table__content select,
.p-form-table__content textarea {
  border: 1px solid #ccc;
  box-shadow: 0 -1px 0 #ccc;
  font-family: "YakuHanJP", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴシック Pro", Meiryo, "メイリオ", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-weight: 400;
  padding: 3px 5px;
  -webkit-transition: border-color .3s,box-shadow .3s;
  transition: border-color .3s,box-shadow .3s;
  width: 100%;
  max-width: 100%;
  background-color: #fff;
}

.p-form-table__content [type="text"],
.p-form-table__content [type="tel"],
.p-form-table__content [type="email"],
.p-form-table__content [type="number"] [type="password"],
.p-form-table__content select {
  height: 30px;
}

.p-form-table__content [type="radio"],
.p-form-table__content [type="checkbox"] {
  margin-right: 0;
}

.p-form-table__content select {
  display: block;
  width: 170px;
  border-radius: 0;
  -webkit-appearance: menulist;
     -moz-appearance: menulist;
          appearance: menulist;
}

.p-form-table__content [type="text"] {
  width: 300px;
}

.p-form-table__content [type="tel"] {
  width: 140px;
}

.p-form-table__content + .p-form-table__item {
  margin-top: 10px;
}

.p-form-table__content.p-form-table__content--input-max [type="text"],
.p-form-table__content.p-form-table__content--input-max [type="tel"],
.p-form-table__content.p-form-table__content--input-max [type="email"],
.p-form-table__content.p-form-table__content--input-max [type="number"] [type="password"],
.p-form-table__content.p-form-table__content--input-max select,
.p-form-table__content.p-form-table__content--input-max textarea {
  width: 100%;
}

.p-form-table__content.p-form-table__content--address [type="text"] {
  width: 90px;
}

.p-form-table__content.p-form-table__content--input-auto [type="text"],
.p-form-table__content.p-form-table__content--input-auto [type="tel"],
.p-form-table__content.p-form-table__content--input-auto [type="email"],
.p-form-table__content.p-form-table__content--input-auto [type="number"] [type="password"],
.p-form-table__content.p-form-table__content--input-auto select,
.p-form-table__content.p-form-table__content--input-auto textarea {
  width: auto;
}

.p-form-table__content textarea {
  height: 220px;
}

.p-form-table .wpcf7-list-item:not(:last-child) {
  margin-right: 1em;
  margin-bottom: 10px;
}

/*
 * サイトごとのカスタマイズ
 */
.p-form-outer {
  max-width: 890px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

.p-form {
  margin-bottom: 5px;
}

.p-form__header {
  text-align: center;
  position: relative;
  z-index: 2;
  padding-left: 10px;
  padding-right: 10px;
}

.p-form__header + .p-form__inner {
  padding-top: 10px;
}

.p-form .p-form__heading {
  line-height: 1.3;
  font-size: 24px;
  font-size: 2.4rem;
  color: #ffffff;
  margin-top: -.75em;
  text-shadow: 0px -2.2px 0 #009944, 0.726px -2.178px 0 #009944, 1.452px -1.452px 0 #009944, 2.178px -0.726px 0 #009944, 2.2px 0px 0 #009944, 2.178px 0.726px 0 #009944, 1.452px 1.452px 0 #009944, 0.726px 2.178px 0 #009944, 0px 2.2px 0 #009944, -0.726px 2.178px 0 #009944, -1.452px 1.452px 0 #009944, -2.178px 0.726px 0 #009944, -2.2px 0px 0 #009944, -2.178px -0.726px 0 #009944, -1.452px -1.452px 0 #009944, -0.726px -2.178px 0 #009944;
}

.p-form__btn {
  margin-top: 40px;
}

.p-form__check {
  display: block;
  background-color: #f5f5f5;
  border-radius: 8px;
  text-align: center;
  padding: 8px 10px;
  margin-bottom: 40px;
  margin-top: 20px;
  cursor: pointer;
}

.p-form__footer {
  padding-top: 20px;
}

.p-form__footerHeading {
  padding-left: 1em;
  color: #009944;
  font-size: 19px;
  font-size: 1.9rem;
  margin-bottom: 8px;
}

.p-gallery {
  margin-bottom: 40px;
}

.p-gallery:before, .p-gallery:after {
  content: "";
  display: table;
}

.p-gallery:after {
  clear: both;
}

.p-gallery__col {
  display: block;
  vertical-align: top;
}

.p-gallery__col.p-gallery__col--view img {
  overflow: hidden;
  border-radius: 16px;
  width: 100%;
}

.p-gallery__col.p-gallery__col--list {
  margin-top: -5px;
}

.p-gallery__col.p-gallery__col--list img {
  overflow: hidden;
  border-radius: 5px;
}

.p-gallery__col.p-gallery__col--list a.is-active {
  opacity: .5;
  
}

.p-heading {
  text-align: center;
}

.p-heading-outer {
  margin-bottom: 40px;
}

.p-heading-outer.p-heading-outer--s {
  margin-bottom: 30px;
}

/*
#styleguide
名称：見出し（あなたの街のお医者さん）
class：heading-homedr

セクション：あなたの街のお医者さんに使用している見出しです。

@カテゴリー heading
@使用頻度 ☆☆☆

```
<header class="p-heading">
  <h2 class="p-heading-homedr  is-active">
    <span class="p-heading-homedr__inner">
      <span class="p-heading-homedr__free  p-heading-homedr__free--sub">ホームドクターを見つけよう！</span>
      <span class="p-heading-homedr__free">
        あなた<span class="p-heading-homedr__freeS">の</span>街<span class="p-heading-homedr__freeS">の</span>お医者さん
      </span>
    </span>
  </h2>
</header><!-- /.p-heading -->
```
*/
.p-heading-homedr {
  margin-top: 0;
  display: inline-block;
  color: #663300;
  text-align: center;
  font-weight: 700;
  line-height: 1.2;
  width: 100%;
  z-index: 0;
  position: relative;
  letter-spacing: -0.02em;
  font-size: 18px;
  font-size: 1.8rem;
  max-width: 266px;
  margin-left: -26.6px;
  height: 63px;
}

.p-heading-homedr__inner {
  display: inline-block;
  width: 100%;
  height: 100%;
  padding-top: 15.3px;
  position: relative;
  z-index: 0;
  background-image: url("../images/common/h-mocomoco.png");
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: 266px;
}

.p-heading-homedr__free {
  display: block;
}

.p-heading-homedr__free--sub {
  letter-spacing: 0.05em;
  font-size: 0.46667em;
}

.p-heading-homedr__freeS {
  font-size: 0.8em;
}

.p-heading-homedr:before, .p-heading-homedr:after {
  content: " ";
  display: block;
  position: absolute;
}

.p-heading-homedr:before {
  width: 64px;
  height: 60.8px;
  z-index: 2;
  right: -32px;
  top: 5px;
  background-image: url("../images/common/h-tvtan-state-normal.png");
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: 64px;
}

.p-heading-homedr:after {
  width: 59.2px;
  height: 32px;
  right: -4.8px;
  top: -12px;
  z-index: -1;
  background-image: url("../images/common/h-rainbow.png");
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: 59.2px;
}

/*
#styleguide
名称：見出し（大）
class：heading-fine

主にトップページに使用されている見出し。
見出しによってアイコンを変更しなければならない...

@カテゴリー heading
@使用頻度 ☆☆☆
@--inverted


```
<header class="p-heading">
  <h2 class="p-heading-fine">
    <span class="p-heading-fine__icon">
      <i class="tv-h-program" aria-hidden="true"></i>
    </span>

    <span class="p-heading-fine__free">
      番組動画
    </span>
  </h2><!-- /.p-heading-fine -->
</header><!-- /.p-heading -->
```
*/
.p-heading-fine {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 20px;
  font-size: 2rem;
  line-height: 1.2;
  font-weight: 700;
}

.p-heading-fine__icon {
  font-size: 2.5em;
  color: #009944;
  display: block;
  /*
     * 各アイコン
     */
}

.p-heading-fine__icon--medical {
  font-size: 2.66667em;
}

.p-heading-fine__free {
  color: #fff100;
  display: inline-block;
  position: relative;
  z-index: 1;
  text-shadow: 0px -2px 0 #009944, 0.66px -1.98px 0 #009944, 1.32px -1.32px 0 #009944, 1.98px -0.66px 0 #009944, 2px 0px 0 #009944, 1.98px 0.66px 0 #009944, 1.32px 1.32px 0 #009944, 0.66px 1.98px 0 #009944, 0px 2px 0 #009944, -0.66px 1.98px 0 #009944, -1.32px 1.32px 0 #009944, -1.98px 0.66px 0 #009944, -2px 0px 0 #009944, -1.98px -0.66px 0 #009944, -1.32px -1.32px 0 #009944, -0.66px -1.98px 0 #009944;
}

.p-heading-fine--inverted .p-heading-fine__icon {
  color: #fff;
}

/*
#styleguide
名称：見出し（アウトライン）
class：heading-outline

問題ありの見出し...
アウトラインをcssで再現しているがsafariで角が汚い...
せっかくの源柔ゴシックの柔らかさが台無しに!

@カテゴリー heading
@使用頻度 ★★☆
@todo

```
<h2 class="p-heading-outline">
  医療機関検索
</h2>
```
*/
.p-heading-outline {
  color: #fff;
  font-size: 20px;
  font-size: 2rem;
  line-height: 1.2;
  font-weight: 700;
  text-shadow: 0px -2px 0 #009944, 0.66px -1.98px 0 #009944, 1.32px -1.32px 0 #009944, 1.98px -0.66px 0 #009944, 2px 0px 0 #009944, 1.98px 0.66px 0 #009944, 1.32px 1.32px 0 #009944, 0.66px 1.98px 0 #009944, 0px 2px 0 #009944, -0.66px 1.98px 0 #009944, -1.32px 1.32px 0 #009944, -1.98px 0.66px 0 #009944, -2px 0px 0 #009944, -1.98px -0.66px 0 #009944, -1.32px -1.32px 0 #009944, -0.66px -1.98px 0 #009944;
}

/*
#styleguide
名称：見出し（ノーマル）
class：heading-normal

普通の見出し。
色の変更は u- でOK

@カテゴリー heading
@使用頻度 ★★☆

```
<h2 class="p-heading-normal">
  <span class="p-heading-normal__free">医療機関一覧</span>
  <span class="p-heading-normal__sub">（50音で探す）</span>
</h2><!-- /.p-heading-normal -->
```
*/
.p-heading-normal {
  color: #009944;
  font-size: 20px;
  font-size: 2rem;
}

.p-heading-normal__sub {
  font-size: 0.66667em;
}

/*
#styleguide
名称：見出し（下線）
class：heading-underline

下線見出し。

@カテゴリー heading
@使用頻度 ★★★
@--blue

```
<div class="u-bg-green">
  <h3 class="p-heading-underline">
    <span class="p-heading-underline__free">病院紹介</span>
  </h3>
</div>

<h3 class="p-heading-underline  p-heading-underline--blue">
  <span class="p-heading-underline__free">病院紹介</span>
</h3>

<h3 class="p-heading-underline  p-heading-underline--theme">
  <span class="p-heading-underline__free">病院紹介</span>
</h3>
```
*/
.p-heading-underline {
  text-align: left;
  position: relative;
  color: #fff100;
  font-size: 20px;
  font-size: 2.0rem;
  padding-bottom: 3px;
  padding-left: 8px;
  margin-top: 0;
  margin-bottom: 20px;
  /*
   * カラーバリエーション
   */
  /*
   * カラーバリエーション
   */
}

.p-heading-underline:before, .p-heading-underline:after {
  content: " ";
  position: absolute;
  display: block;
  width: 100%;
  height: 4px;
  bottom: 0;
  left: 0;
}

.p-heading-underline:before {
  background-color: #fff;
  z-index: 1;
  width: 85px;
}

.p-heading-underline:after {
  z-index: 0;
  background-image: url("../images/bg/line-shash.png");
  background-position: left top;
  background-repeat: repeat-x;
  background-size: 3px;
}

.p-heading-underline__free {
  position: relative;
}

.p-heading-underline.p-heading-underline--blue {
  color: #1886ba;
}

.p-heading-underline.p-heading-underline--blue:before {
  background-color: #1886ba;
}

.p-heading-underline.p-heading-underline--blue:after {
  background-image: url("../images/bg/line-shash-gray.png");
  background-position: left top;
  background-repeat: repeat-x;
  background-size: 3px;
}

.p-heading-underline.p-heading-underline--theme {
  color: #009944;
}

.p-heading-underline.p-heading-underline--theme:before {
  background-color: #009944;
}

.p-heading-underline.p-heading-underline--theme:after {
  background-image: url("../images/bg/line-shash-gray.png");
  background-position: left top;
  background-repeat: repeat-x;
  background-size: 3px;
}

/*
#styleguide
名称：見出し（イェイ）
class：heading-yey

名前は雰囲気でつけました。

@カテゴリー heading
@使用頻度 ★☆☆

```
<h4 class="p-heading-yey">
  <span class="p-heading-yey__free">
    2017年02月28日（土）の放送内容
  </span>
</h4>
```
*/
.p-heading-yey {
  margin-top: 0;
  text-align: center;
  color: #663300;
  font-size: 16px;
  font-size: 1.6rem;
  line-height: 1.3;
  margin-bottom: 0;
}

.p-heading-yey__free {
  display: inline-block;
  position: relative;
}

.p-heading-yey__free:before, .p-heading-yey__free:after {
  content: " ";
  display: inline-block;
  width: 1px;
  height: 1.1em;
  border-left: 1px dashed #663300;
  margin-left: .5em;
  margin-right: .5em;
  vertical-align: -.1em;
}

.p-heading-yey__free:before {
  -webkit-transform: rotate(-30deg);
      -ms-transform: rotate(-30deg);
          transform: rotate(-30deg);
}

.p-heading-yey__free:after {
  -webkit-transform: rotate(30deg);
      -ms-transform: rotate(30deg);
          transform: rotate(30deg);
}

/*
#styleguide
名称：見出し（病院名）
class：heading-hospitalname

病院名に使う見出しです。
色は u- でOK。

@カテゴリー heading
@使用頻度 ★☆☆

```
<h2 class="p-heading-hospitalname">
  <span class="p-heading-hospitalname__sub">医療法人社団　寿量会</span>
  <span class="p-heading-hospitalname__free">熊本機能病院</span>
</h2>
```
*/
.p-heading-hospitalname {
  line-height: 1.2;
}

.p-heading-hospitalname__sub {
  font-size: 16px;
  font-size: 1.6rem;
}

.p-heading-hospitalname__free {
  font-size: 36px;
  font-size: 3.6rem;
}

.p-heading-hospitalname__sub, .p-heading-hospitalname__free {
  display: block;
}

.p-heading-dashed {
  font-size: 18px;
  font-size: 1.8rem;
  color: #009944;
  line-height: 1.4;
  padding-bottom: .25em;
  border-bottom: 1px dashed #009944;
  margin-bottom: 15px;
}

/*
#styleguide
名称：見出し：アーカイブ
class：heading-archive

色は u- で変更します

@deprecated
@非推奨
@todo
@カテゴリー
@使用頻度
@--

```
<h2 class="p-heading-archive">
  「看護師」募集のお知らせ
</h2>
```
*/
.p-heading-archive {
  text-align: center;
  font-size: 32px;
  font-size: 3.2rem;
  margin-bottom: 40px;
}

.p-heading-search {
  font-size: 18px;
  font-size: 1.8rem;
  text-align: center;
  line-height: 1;
  margin-bottom: 30px;
}

.p-heading-search__icon {
  display: block;
  font-size: 2.22222em;
}

.p-heading-search__free {
  margin-top: 10px;
  display: block;
  font-size: 1em;
}

.p-heading-direct {
  line-height: 1.2;
  font-size: 36px;
  font-size: 3.6rem;
  color: #1886ba;
}

.p-heading-direct-text {
  color: #1886ba;
}

.p-heading-jump {
  line-height: 1.3;
  text-align: center;
  font-size: 16px;
  font-size: 1.6rem;
  color: #663300;
}

.p-heading-jump__l {
  margin-left: .1em;
  margin-right: .1em;
  color: #009944;
  font-size: 1.5em;
}

.p-icon-info {
  font-size: 40px;
  font-size: 4.0rem;
  color: #009944;
}

/*
#styleguide
名称：そんなときは....
class：induction-down

目線を誘導（induction）する補助的なものです。

@カテゴリー induction

```
<p class="p-induction-down  u-brown">
  <svg width="160px" height="45px"><path d="M160.000,2.999 L81.000,44.999 L79.000,44.999 L0.000,2.999 L2.000,0.000 L80.000,41.359 L158.000,0.000 L160.000,2.999 Z"/></svg>
  <span class="p-induction-down__free">
    そんなときは...
  </span>
</p>
```
*/
.p-induction-down {
  pointer-events: none;
  text-align: center;
  line-height: 1;
}

.p-induction-down__free {
  display: block;
  font-size: 24px;
  font-size: 2.4rem;
  font-weight: bold;
  margin-top: 12px;
}

.p-induction-down-fixed {
  position: relative;
}

.p-induction-down-fixed .p-induction-down {
  position: absolute;
  bottom: -49px;
  left: 0;
  width: 100%;
  z-index: 2;
}

/*
#styleguide
名称：電話・FAX番号
class：info-number

電話・FAX番号の表記に使用します。
複数コンポーネントを組み合わせて実現しています。

@カテゴリー info
@コンポーネント p-tag
@使用頻度 ★☆☆

```
<a href="tel:096-345-8111" class="p-info-number">
  <span class="p-tag  u-bg-blue">TEL</span>
  <span class="p-info-number__free">096-345-8111</span>
</a>

<span class="p-info-number">
  <span class="p-tag  u-bg-blue">FAX</span>
  <span class="p-info-number__free">096-345-8188</span>
</span>
```
*/
.p-info-number {
  font-size: 0;
  line-height: 1;
  display: block;
}

.p-info-number [class].p-tag, .p-info-number__free {
  display: inline-block;
  vertical-align: middle;
  font-size: 30px;
  font-size: 3.0rem;
}

.p-info-number [class].p-tag {
  font-size: 12px;
  font-size: 1.2rem;
  width: 60px;
  padding-left: 5px;
  padding-right: 5px;
  margin-right: 10px;
  margin-bottom: -2px;
}

.p-info-number__free {
  font-weight: bold;
}

/*
#styleguide
名称：アドレス
class：info-address

comment

@カテゴリー info

```
<dl class="p-info-address">
  <dt>KKT Dr.テレビたん事務局</dt>
  <dd>〒860-8522　熊本市中央区世安町7</dd>
  <dd><a href="tel:096-363-6139">TEL.096-363-6139</a>（平日10:00〜17:30）</dd>
</dl>
```
*/
.p-info-address {
  margin: 0;
}

.p-info-address dd {
  margin: 0;
}

.p-info-address dt {
  font-size: 18px;
  font-size: 1.8rem;
  font-weight: 500;
}

.p-info-notices {
  display: block;
  overflow: hidden;
  border-radius: 35px;
  border: 2px solid #e76666;
  color: #e76666;
  line-height: 1.3;
  font-weight: bold;
  background-color: #ffffff;
}

.p-info-notices__inner {
  display: table;
  width: 100%;
}

.p-info-notices__col {
  display: table-cell;
  vertical-align: middle;
}

.p-info-notices__col.p-info-notices__col--heading {
  font-size: 14px;
  font-size: 1.4rem;
  background-color: #e76666;
  color: #ffffff;
  text-align: center;
  border-radius: 17.5px;
}

.p-info-notices__col.p-info-notices__col--heading i {
  color: #ffcc33;
}

.p-info-notices__col.p-info-notices__col--content {
  padding: 5px 15px 6px 15px;
  font-size: 16px;
  font-size: 1.6rem;
}

/*
#styleguide
名称：熊本の街並み
class：kumamoto-village

使うことなしです。

```
<div class="p-kumamoto-village"></div>
```
*/
.p-kumamoto-village {
  padding-bottom: 105px;
  position: relative;
}

.p-kumamoto-village:before, .p-kumamoto-village:after {
  content: " ";
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
}

.p-kumamoto-village:before {
  width: 1170px;
  height: 81px;
  background-image: url("../images/home/kumamoto-tujunkyo.png"), url("../images/home/kumamoto-castle.png"), url("../images/home/kumamoto-komeduka.png"), url("../images/home/kumamoto-amakusagokyo.png");
  background-size: 14.52991%, 14.52991%, 14.52991%, 14.52991%;
  background-position: left bottom, 30% bottom, 70% bottom, right bottom;
  background-repeat: no-repeat,no-repeat,no-repeat,no-repeat;
}

.p-kumamoto-village:after {
  width: 100%;
  height: 21px;
  background-image: url("../images/home/kumamoto-machinami.png");
  background-position: left bottom;
  background-repeat: repeat-x;
  background-size: 500px;
}

/*
#styleguide
名称：ブランクリンク
class：label-blank

labelのカテゴリーにしてしまったことが腑に落ちない...
--mirrorで反転します

@カテゴリー label
@使用頻度 ★☆☆
@--mirror

```
<a href="" target="_blank" rel="noopener" class="p-label-blank">
  <span class="p-label-blank__inner">
    <span class="p-label-blank__tag">公式ホームページ</span>
    <span class="p-label-blank__url">
      https://www.juryo.or.jp/
      <i class="fa  fa-external-link" aria-hidden="true"></i>
    </span>
  </span>
</a>

<div class="u-bg-blue  u-mt">
  <a href="" target="_blank" rel="noopener" class="p-label-blank  p-label-blank--mirror">
    <span class="p-label-blank__inner">
      <span class="p-label-blank__tag">公式ホームページ</span>
      <span class="p-label-blank__url">
        https://www.juryo.or.jp/
        <i class="fa  fa-external-link" aria-hidden="true"></i>
      </span>
    </span>
  </a>
</div>
```
*/
.p-label-blank {
  display: inline-block;
  border-radius: 25px;
  border: 2px solid #1886ba;
  background-color: #ffffff;
  color: #1886ba;
  overflow: hidden;
  -webkit-transition: box-shadow .35s ease 0s;
  transition: box-shadow .35s ease 0s;
}

html:not(.sp) .p-label-blank:hover, html:not(.sp) .p-label-blank:focus {
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.5);
}

.p-label-blank__inner {
  display: table;
  width: 100%;
}

.p-label-blank__tag, .p-label-blank__url {
  display: table-cell;
  padding: 5px 10px;
  line-height: 1.2;
  vertical-align: middle;
}

.p-label-blank__tag {
  font-weight: 500;
  text-align: center;
  width: 120px;
  border-radius: 28px;
  color: #ffffff;
  font-size: 12px;
  font-size: 1.2rem;
  background-color: #1886ba;
}

.p-label-blank__url {
  font-size: 10px;
  font-size: 1.0rem;
  padding-right: 25px;
  position: relative;
  font-weight: bold;
}

.p-label-blank__url .fa {
  position: absolute;
  right: 10px;
  top: 50%;
  margin-top: -.4em;
}

.p-label-blank.p-label-blank--mirror {
  border: 2px solid #ffffff;
  background-color: #1886ba;
  color: #ffffff;
}

.p-label-blank.p-label-blank--mirror .p-label-blank__tag {
  color: #1886ba;
  background-color: #ffffff;
}

.p-link {
  color: #009944;
  text-decoration: underline;
}

.p-list {
  font-weight: 700;
}

.p-list .fa {
  margin-right: .3em;
  display: inline-block;
}

.p-list__child {
  margin-top: -.1em;
  font-weight: 400;
  font-size: 0.875em;
}

.p-list + .p-list {
  margin-top: 1.25em;
}

.p-list-icon > li[data-list]:before {
  color: #1886ba;
}

/*
#styleguide
名称：連番リスト
class：list-ol

連番リストになります。

@カテゴリー list
@使用頻度 ★☆☆

```
<ol class="p-list-ol">
  <li>ほげほげほげほげほげほげ</li>
  <li>ほげほげほげほげほげほげほげほげほげほげほげほげ</li>
</ol>
```
*/
.p-list-ol {
  list-style: none;
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 0;
  counter-reset: number;
}

.p-list-ol > li {
  padding-left: 1.9375em;
}

.p-list-ol > li:before {
  counter-increment: number;
  content: counter(number);
  font-size: 0.875em;
  display: inline-block;
  width: 1.71429em;
  height: 1.71429em;
  background-color: #009944;
  color: #ffffff;
  text-align: center;
  line-height: 1.71429em;
  border-radius: 50%;
  font-weight: normal;
  margin-left: -2.21429em;
  margin-right: 0.5em;
}

.p-list-ol > li:not(:first-child) {
  margin-top: 30px;
}

/*
#styleguide
名称：連番リスト
class：list-disc

連番リストになります。

@カテゴリー list
@使用頻度 ★☆☆

```
<ul class="p-list-disc  u-mt">
  <li>当社、または他のユーザーを含む第三者の著作権等の財産権、プライバシー、名誉その他の権利を侵害する行為、 及び侵害するおそれのある行為。</li>
  <li>当社の社員や他のユーザーと偽る行為。</li>
</ul>
```
*/
.p-list-disc {
  list-style: none;
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 0;
}

.p-list-disc > li {
  padding-left: 1.4375em;
}

.p-list-disc > li:before {
  content: " ";
  line-height: 1;
  display: inline-block;
  width: 0.875em;
  height: 0.875em;
  background-color: #009944;
  border-radius: 50%;
  margin-left: -1.4375em;
  margin-bottom: -0.0625em;
  margin-right: 0.4375em;
}

.p-list-disc > li:not(:first-child) {
  margin-top: 30px;
}

.p-mainview {
  padding-top: 15px;
  position: relative;
  /*
   * お知らせ
   */
  /*
   * 季節ごとの
   */
  padding-bottom: 50px;
}

.p-mainview [class].p-article-info {
  position: relative;
  z-index: 2;
  width: 1000px;
  padding-left: 15px;
  padding-right: 15px;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 15px;
}

.p-mainview.is-spring {
  background-color: #fddfdf;
}

.p-mainview.is-spring .p-season__wood--left {
  background-image: url("../images/mv/season-wood-spring-l.png");
  background-position: left top;
  background-repeat: no-repeat;
  background-size: 585px;
}

.p-mainview.is-spring .p-season__wood--right {
  background-image: url("../images/mv/season-wood-spring-r.png");
  background-position: left top;
  background-repeat: no-repeat;
  background-size: 585px;
}

.p-mainview.is-spring .p-season__wood--right:before {
  content: " ";
  top: 23.43499%;
  right: 29.74359%;
  background-image: url(../images/sprite.png?1588222826014);
  background-position: 0px -79px;
  width: 78px;
  height: 63px;
}

.p-mainview.is-summer {
  background-color: #bbe7ff;
}

.p-mainview.is-summer .p-season__wood--left {
  background-image: url("../images/mv/season-wood-summer-l.png");
  background-position: left top;
  background-repeat: no-repeat;
  background-size: 585px;
}

.p-mainview.is-summer .p-season__wood--left:before {
  content: " ";
  top: 26.16372%;
  left: 35.38462%;
  background-image: url(../images/sprite.png?1588222826014);
  background-position: -138px -79px;
  width: 54px;
  height: 57px;
}

.p-mainview.is-summer .p-season__wood--right {
  background-image: url("../images/mv/season-wood-summer-r.png");
  background-position: left top;
  background-repeat: no-repeat;
  background-size: 585px;
}

.p-mainview.is-summer .p-season__wood--right:before {
  content: " ";
  top: 25.20064%;
  right: 26.83761%;
  background-image: url(../images/sprite.png?1588222826014);
  background-position: 0px -142px;
  width: 65px;
  height: 65px;
}

.p-mainview.is-summer.p-mainview--summer-simple .p-season__wood--left:before {
  content: none;
}

.p-mainview.is-summer.p-mainview--summer-simple .p-season__wood--right:before {
  content: none;
}

.p-mainview.is-spring-summer {
  background-color: #bbe7ff;
}

.p-mainview.is-spring-summer .p-season__wood--left {
  background-image: url("../images/mv/season-wood-summer-l.png");
  background-position: left top;
  background-repeat: no-repeat;
  background-size: 585px;
}

.p-mainview.is-spring-summer .p-season__wood--right {
  background-image: url("../images/mv/season-wood-summer-r.png");
  background-position: left top;
  background-repeat: no-repeat;
  background-size: 585px;
}

.p-mainview.is-autom {
  background-color: #ffd987;
}

.p-mainview.is-autom .p-season__wood--left {
  background-image: url("../images/mv/season-wood-autom-l.png");
  background-position: left top;
  background-repeat: no-repeat;
  background-size: 585px;
}

.p-mainview.is-autom .p-season__wood--left:before {
  content: " ";
  top: 26.48475%;
  left: 31.28205%;
  background-image: url(../images/sprite.png?1588222826014);
  background-position: -145px -142px;
  width: 60px;
  height: 39px;
}

.p-mainview.is-autom .p-season__wood--left:after {
  content: " ";
  top: 23.91653%;
  left: 25.81197%;
  background-image: url(../images/sprite.png?1588222826014);
  background-position: -205px -142px;
  width: 41px;
  height: 26px;
}

.p-mainview.is-autom .p-season__wood--right {
  background-image: url("../images/mv/season-wood-autom-r.png");
  background-position: left top;
  background-repeat: no-repeat;
  background-size: 585px;
}

.p-mainview.is-autom .p-season__wood--right:before {
  content: " ";
  top: 27.12681%;
  right: 26.83761%;
  background-image: url(../images/sprite.png?1588222826014);
  background-position: -192px -79px;
  width: 60px;
  height: 39px;
}

.p-mainview.is-winter {
  background-color: #dbdbdc;
}

.p-mainview.is-winter .p-season__wood--left {
  background-image: url("../images/mv/season-wood-winter-l.png");
  background-position: left top;
  background-repeat: no-repeat;
  background-size: 585px;
}

.p-mainview.is-winter .p-season__wood--right {
  background-image: url("../images/mv/season-wood-winter-r.png");
  background-position: left top;
  background-repeat: no-repeat;
  background-size: 585px;
}

.p-mainview.p-mainview--simple .p-season__wood--left:before {
  content: none !important;
}

.p-mainview.p-mainview--simple .p-season__wood--right:before {
  content: none !important;
}

.p-mainview__inner {
  padding-left: 15px;
  padding-right: 15px;
  position: relative;
  z-index: 2;
}

.p-mainview:before, .p-mainview:after {
  display: block;
  width: 100%;
  height: 30px;
  position: absolute;
}

.p-mainview:after {
  content: " ";
  bottom: 0;
  background-image: url("../images/common/footer-curv-bottom.png");
  background-position: center top;
  background-repeat: no-repeat;
  background-size: 100% 30px;
}

/*
 * 季節
 */
.p-season {
  pointer-events: none;
  position: absolute;
  top: 0;
  display: block;
  height: 100%;
  width: 1600px;
  left: 50%;
  margin-left: -800px;
}

.p-season__inner {
  position: relative;
  height: 100%;
  display: block;
  width: 100%;
}

.p-season__wood {
  z-index: 1;
  content: " ";
  width: 585px;
  height: 623px;
  display: block;
  position: absolute;
  top: -21.06227%;
}

.p-season__wood--left {
  left: 0;
  -webkit-transform-origin: left bottom;
      -ms-transform-origin: left bottom;
          transform-origin: left bottom;
  -webkit-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
          transform: rotate(-45deg);
}

.p-season__wood--right {
  right: 0;
  -webkit-transform-origin: right bottom;
      -ms-transform-origin: right bottom;
          transform-origin: right bottom;
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg);
}

.p-season__wood:before, .p-season__wood:after {
  display: block;
  position: absolute;
}

html.complete .p-mainview:not(.js-mvMax) .p-season__wood {
  -webkit-transform: none;
      -ms-transform: none;
          transform: none;
}

#js-season {
  -webkit-transition: background-color 2s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
  transition: background-color 2s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}

#js-season .c-loading {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

html:not(.complete) #js-season {
  background-color: transparent;
}

html:not(.complete) #js-season > :not(.c-loading) {
  visibility: hidden;
}

html.complete #js-season.is-summer .p-season__wood--left:before {
  -webkit-transform-origin: 50% 50%;
      -ms-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
  -webkit-animation: ziguzagu .25s linear 1.2s 6 alternate;
          animation: ziguzagu .25s linear 1.2s 6 alternate;
}

html.complete #js-season.is-summer .p-season__wood--right:before {
  -webkit-transform-origin: 50% 50%;
      -ms-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
  -webkit-animation: ziguzagu .5s linear 2.2s 6 alternate;
          animation: ziguzagu .5s linear 2.2s 6 alternate;
}

@-webkit-keyframes ziguzagu {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(15deg);
            transform: rotate(15deg);
  }
}

@keyframes ziguzagu {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(15deg);
            transform: rotate(15deg);
  }
}

@-webkit-keyframes animationFrames {
  0% {
    -webkit-transform: translate(0px, 0px);
            transform: translate(0px, 0px);
  }
  40% {
    -webkit-transform: translate(95px, -83px);
            transform: translate(95px, -83px);
  }
  100% {
    -webkit-transform: translate(95px, -83px);
            transform: translate(95px, -83px);
  }
}

@keyframes animationFrames {
  0% {
    -webkit-transform: translate(0px, 0px);
            transform: translate(0px, 0px);
  }
  40% {
    -webkit-transform: translate(95px, -83px);
            transform: translate(95px, -83px);
  }
  100% {
    -webkit-transform: translate(95px, -83px);
            transform: translate(95px, -83px);
  }
}

.p-medical {
  margin-top: 30px;
  margin-bottom: 80px;
}

.p-medical__title {
  font-size: 20px;
  font-size: 2.0rem;
  width: 2.18182em;
  height: 2.18182em;
  background-color: #009944;
  color: #ffffff;
  text-align: center;
  line-height: 2.18182em;
  border-radius: 50%;
  display: inline-block;
}

.p-medical__leftside {
  padding-top: 25px;
  padding-bottom: 20px;
  text-align: center;
}

.p-medical-list {
  width: 100%;
  max-width: 970px;
}

.p-medical-list__col {
  position: relative;
}

.p-medical-list__col:before, .p-medical-list__col:after {
  content: " ";
  position: absolute;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  width: calc( 100% - 34px);
  height: 1px;
  z-index: 1;
  background-color: #009944;
}

.p-medical-list__col:before {
  top: -1px;
}

.p-medical-list__col:after {
  bottom: 0;
}

/*
#styleguide
名称：ネームDr
class：name-dr

主に先生方の名前に使用。

@カテゴリー name
@使用頻度 ★☆☆
@--block

```
<h4 class="p-name-dr">
  <span class="p-name-dr__free">米満 弘一郎</span>
  <span class="p-name-dr__free  p-name-dr__free--sub">（よねみつ こういちろう）</span>
</h4>

<h4 class="p-name-dr  p-name-dr--block  u-mt">
  <span class="p-name-dr__free">米満 弘一郎</span>
  <span class="p-name-dr__free  p-name-dr__free--sub">（よねみつ こういちろう）</span>
</h4>
```
*/
.p-name-dr {
  font-weight: bold;
  text-align: center;
  line-height: 1.3;
}

.p-name-dr__free {
  display: inline-block;
  color: #1886ba;
  font-size: 24px;
  font-size: 2.4rem;
}

.p-name-dr__free.p-name-dr__free--sub {
  color: #333333;
  font-weight: normal;
  font-size: 14px;
  font-size: 1.4rem;
}

.p-name-dr.p-name-dr--block {
  text-align: center;
}

.p-name-dr.p-name-dr--block .p-name-dr__free {
  display: block;
}

.p-name-reporter {
  font-weight: bold;
  line-height: 1.3;
}

.p-name-reporter__free {
  display: inline-block;
  font-size: 40px;
  font-size: 4.0rem;
}

.p-name-reporter__free.p-name-reporter__free--sub {
  font-weight: normal;
  font-size: 14px;
  font-size: 1.4rem;
}

.p-name-reporter.p-name-reporter--block {
  text-align: center;
}

.p-name-reporter.p-name-reporter--block .p-name-reporter__free {
  display: block;
}

/*
#styleguide
名称：ナビ
class：nav

内部ページで使用する各ページにリンクさせるためのナビゲーション。

@todo ( 改良 )
@カテゴリー nav
@使用頻度 ★☆☆

```
<div class="p-nav">
  <ul class="p-nav__list  c-list">
    <li class="p-nav__col">
      <a href="" class="p-nav__link">
        <span class="p-nav__text">トップ</span>
      </a>
    </li>
    <li class="p-nav__col">
      <a href="" class="p-nav__link">
        <span class="p-nav__text">施設情報</span>
      </a>
    </li>
    <li class="p-nav__col">
      <a href="" class="p-nav__link">
        <span class="p-nav__text">医師紹介</span>
      </a>
    </li>
    <li class="p-nav__col">
      <a href="" class="p-nav__link">
        <span class="p-nav__text">病院の特徴</span>
      </a>
    </li>
    <li class="p-nav__col">
      <a href="" class="p-nav__link">
        <span class="p-nav__text">求人情報</span>
      </a>
    </li>
    <li class="p-nav__col">
      <a href="" class="p-nav__link">
        <span class="p-nav__text">お知らせ</span>
      </a>
    </li>
    <li class="p-nav__col">
      <a href="" class="p-nav__link">
        <span class="p-nav__text">交通アクセス</span>
      </a>
    </li>
  </ul>
</div>
```
*/
.p-nav {
  width: 100%;
  display: inline-block;
  vertical-align: bottom;
}

.p-nav__list {
  width: 100%;
}

.p-nav__link {
  color: #ffffff;
  text-align: center;
  display: block;
  line-height: 1;
  font-size: 16px;
  font-size: 1.6rem;
  font-weight: 500;
  -webkit-transition: box-shadow .35s ease 0s, background-color .35s ease 0s;
  transition: box-shadow .35s ease 0s, background-color .35s ease 0s;
}

.p-nav__link.is-current {
  background-color: #ffffff;
  color: #1886ba;
}

html:not(.sp) .p-nav__link:not(.is-current):hover, html:not(.sp) .p-nav__link:not(.is-current):focus {
  background-color: rgba(0, 0, 0, 0.1);
}

/*
#styleguide
名称：内部ページヘッダー
class：page-header

色んなコンポーネントの集まりで成り立ちます。

@todo ( レスポンシブ,メニューをどうするか )
@カテゴリー page
@使用頻度 ★☆☆
@コンポーネント p-label-blank
@コンポーネント p-nav
@コンポーネント p-heading-hospitalname

```
<div class="p-page-header">
  <div class="p-page-header__main">
    <h2 class="p-heading-hospitalname">
      <span class="p-heading-hospitalname__sub">医療法人社団　寿量会</span>
      <span class="p-heading-hospitalname__free">熊本機能病院</span>
    </h2>

    <a href="" target="_blank" rel="noopener" class="p-label-blank  p-label-blank--mirror">
      <span class="p-label-blank__inner">
        <span class="p-label-blank__tag">公式ホームページ</span>
        <span class="p-label-blank__url">
          https://www.juryo.or.jp/
          <i class="fa  fa-external-link" aria-hidden="true"></i>
        </span>
      </span>
    </a>
  </div>

  <div class="p-page-header__menu">
    <div class="p-nav">
      <ul class="p-nav__list  c-list">
        <li class="p-nav__col">
          <a href="" class="p-nav__link">
            <span class="p-nav__text">トップ</span>
          </a>
        </li>
        <li class="p-nav__col">
          <a href="" class="p-nav__link">
            <span class="p-nav__text">施設情報</span>
          </a>
        </li>
        <li class="p-nav__col">
          <a href="" class="p-nav__link">
            <span class="p-nav__text">医師紹介</span>
          </a>
        </li>
        <li class="p-nav__col">
          <a href="" class="p-nav__link">
            <span class="p-nav__text">病院の特徴</span>
          </a>
        </li>
        <li class="p-nav__col">
          <a href="" class="p-nav__link">
            <span class="p-nav__text">求人情報</span>
          </a>
        </li>
        <li class="p-nav__col">
          <a href="" class="p-nav__link">
            <span class="p-nav__text">お知らせ</span>
          </a>
        </li>
        <li class="p-nav__col">
          <a href="" class="p-nav__link">
            <span class="p-nav__text">交通アクセス</span>
          </a>
        </li>
      </ul>
    </div>
  </div>
</div>
```
*/
.p-page-header {
  background-color: #1886ba;
  color: #ffffff;
  border-radius: 16px;
  padding: 0 20px;
  margin-top: 20px;
  margin-bottom: 40px;
}

.p-page-header__main {
  padding: 20px;
}

.p-page-header__main:before, .p-page-header__main:after {
  content: "";
  display: table;
}

.p-page-header__main:after {
  clear: both;
}

.p-page-header__main [class].p-heading-hospitalname {
  display: inline-block;
  float: left;
}

.p-page-header__main [class].p-label-blank {
  float: right;
  margin-top: 15px;
  margin-bottom: 15px;
  margin-right: -20px;
}

/*
#styleguide
名称：ページャー
class：pager

comment

@カテゴリー pager
@使用頻度 ★☆☆
@--

```
<div class="p-pager">
  <div class="p-pager-skin">
    <ul class="p-pager__inner">
      <li class="p-pager__col  p-pager__col--prev">
        <span class="p-pager__item">
          <a class="p-pager__link" href="">
            <i class="fa fa-arrow-circle-left  u-mr-xxs" aria-hidden="true"></i>前の8件
          </a>
        </span>
      </li>
      <li class="p-pager__col  p-pager__col--scroll">
        <div class="p-pager__col__inner">
          <ol class="p-pageer__num">
            <li class="p-pager__item">
              <a class="p-pager__link" href="">1</a>
            </li>
            <li class="p-pager__item">
              <span class="p-pager__link  is-active" href="">2</span>
            </li>
            <li class="p-pager__item">
              <a class="p-pager__link" href="">3</a>
            </li>
            <li class="p-pager__item">
              <a class="p-pager__link" href="">4</a>
            </li>
            <li class="p-pager__item">
              <a class="p-pager__link" href="">5</a>
            </li>
          </ol>
        </div>
      </li>
      <li class="p-pager__col  p-pager__col--next">
        <span class="p-pager__item">
          <a class="p-pager__link" href="">
            <i class="fa fa-arrow-circle-right  u-mr-xxs" aria-hidden="true"></i>次の8件
          </a>
        </span>
      </li>
    </ul>
  </div>
</div><!-- /.p-pager -->
```
*/
.p-pager {
  line-height: 1;
  margin-top: 30px;
  margin-bottom: 30px;
  text-align: center;
}

.p-pager.p-pager--before-margin {
  margin-top: 70px;
}

.p-pager.p-pager--single {
  border-top: 1px dashed #009944;
  border-bottom: 1px dashed #009944;
  padding-top: 20px;
  padding-bottom: 20px;
}

.p-pager.p-pager--single .p-pager__inner {
  width: 100%;
}

.p-pager-skin {
  display: inline-block;
}

.p-pager__inner {
  list-style: none;
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 0;
  display: table;
  table-layout: fixed;
}

.p-pager__col {
  padding-top: 5px;
  padding-bottom: 5px;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

.p-pager__col.p-pager__col--prev .p-pager__link, .p-pager__col.p-pager__col--next .p-pager__link {
  width: auto;
  height: auto;
  padding-top: 0;
  border-radius: 20px;
  border: none;
  color: #333333;
  background-color: transparent;
}

.p-pager__col.p-pager__col--prev .p-pager__link .fa, .p-pager__col.p-pager__col--next .p-pager__link .fa {
  color: #009944;
}

.p-pager__col.p-pager__col--prev-post, .p-pager__col.p-pager__col--next-post {
  padding-top: 8px;
  padding-bottom: 8px;
  vertical-align: top;
  text-align: left;
  position: relative;
  -webkit-transition: background-color .45s ease 0s;
  transition: background-color .45s ease 0s;
}

.p-pager__col.p-pager__col--prev-post:before, .p-pager__col.p-pager__col--prev-post:after, .p-pager__col.p-pager__col--next-post:before, .p-pager__col.p-pager__col--next-post:after {
  content: "";
  display: table;
}

.p-pager__col.p-pager__col--prev-post:after, .p-pager__col.p-pager__col--next-post:after {
  clear: both;
}

.p-pager__col.p-pager__col--prev-post .p-pager__item, .p-pager__col.p-pager__col--next-post .p-pager__item {
  padding: 0;
}

.p-pager__col.p-pager__col--prev-post .p-pager__icon, .p-pager__col.p-pager__col--next-post .p-pager__icon {
  top: 0;
  display: block;
  width: 20px;
  height: 100%;
  position: absolute;
  text-align: center;
  background-color: #009944;
  border-radius: 6px;
  color: #ffffff;
  font-size: 9p.xrem;
  font-size: 9p.xrem;
}

.p-pager__col.p-pager__col--prev-post .p-pager__icon .fa, .p-pager__col.p-pager__col--next-post .p-pager__icon .fa {
  position: absolute;
  top: 50%;
  width: 100%;
  left: 0;
  margin-top: -8px;
}

html:not(.sp) .p-pager__col.p-pager__col--prev-post:hover, html:not(.sp) .p-pager__col.p-pager__col--prev-post:focus, html:not(.sp) .p-pager__col.p-pager__col--next-post:hover, html:not(.sp) .p-pager__col.p-pager__col--next-post:focus {
  background-color: rgba(0, 0, 0, 0.05);
}

html:not(.sp) .p-pager__col.p-pager__col--prev-post:hover .p-pager__title, html:not(.sp) .p-pager__col.p-pager__col--prev-post:focus .p-pager__title, html:not(.sp) .p-pager__col.p-pager__col--next-post:hover .p-pager__title, html:not(.sp) .p-pager__col.p-pager__col--next-post:focus .p-pager__title {
  text-decoration: underline;
}

.p-pager__col.p-pager__col--prev-post {
  border-right: 1px dashed #009944;
  padding-left: 40px;
  padding-right: 15px;
}

.p-pager__col.p-pager__col--prev-post .p-pager__icon {
  left: 0;
}

.p-pager__col.p-pager__col--prev-post .p-pager__item {
  float: left;
}

.p-pager__col.p-pager__col--prev-post .p-pager__text {
  text-align: left;
}

.p-pager__col.p-pager__col--next-post {
  padding-right: 40px;
  padding-left: 15px;
}

.p-pager__col.p-pager__col--next-post .p-pager__icon {
  right: 0;
}

.p-pager__col.p-pager__col--next-post .p-pager__item {
  float: right;
}

.p-pager__col.p-pager__col--next-post .p-pager__text {
  text-align: right;
}

.p-pager__col.p-pager__col--scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.p-pager__col.p-pager__col--scroll::-webkit-scrollbar, .p-pager__col.p-pager__col--scroll::-webkit-scrollbar-track, .p-pager__col.p-pager__col--scroll::-webkit-scrollbar-thumb {
  height: 0;
  width: 0;
  display: none;
  background-color: transparent;
}

.p-pager__col.p-pager__col--scroll .p-pager__col__inner {
  overflow: hidden;
  display: inline-block;
  white-space: nowrap;
  vertical-align: middle;
}

.p-pager__col.p-pager__col--scroll .p-pageer__num {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  list-style: none;
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 0;
  vertical-align: middle;
  font-family: AdobeBlank;
}

.p-pager__item {
  display: inline-block;
  vertical-align: middle;
  padding-left: 5px;
  padding-right: 5px;
}

.p-pager__link {
  width: 40px;
  height: 40px;
  display: inline-block;
  line-height: 1;
  font-family: "YakuHanJP", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴシック Pro", Meiryo, "メイリオ", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-size: 15px;
  font-size: 1.5rem;
  padding-top: 11px;
  border-radius: 50%;
  border: 1.65px dotted #009944;
  color: #009944;
  text-align: center;
  background-color: transparent;
  -webkit-transition: background-color .45s ease 0s, box-shadow .45s ease 0s, border .45s ease 0s, -webkit-transform .45s ease 0s;
  transition: background-color .45s ease 0s, box-shadow .45s ease 0s, border .45s ease 0s, -webkit-transform .45s ease 0s;
  transition: background-color .45s ease 0s, box-shadow .45s ease 0s, border .45s ease 0s, transform .45s ease 0s;
  transition: background-color .45s ease 0s, box-shadow .45s ease 0s, border .45s ease 0s, transform .45s ease 0s, -webkit-transform .45s ease 0s;
}

.p-pager__link.is-active {
  background-color: #009944;
  color: #ffffff;
}

.p-pager__link.p-pager__link--disabled {
  background-color: #cccccc;
  color: #cccccc;
  border-color: #cccccc;
  box-shadow: none !important;
}

.p-pager__link.p-pager__link--more {
  letter-spacing: -0.02em;
  width: 25px;
  background-color: transparent;
  border: none;
  box-shadow: none !important;
}

.p-pager__text {
  display: block;
  font-size: 14px;
  font-size: 1.4rem;
  color: #333333;
}

.p-pager__title {
  margin-top: 1.07143em;
  font-weight: bold;
  display: block;
  font-size: 14px;
  font-size: 1.4rem;
  color: #009944;
  letter-spacing: -0.02em;
}

html:not(.sp) .p-pager a.p-pager__link:not(.is-active):hover, html:not(.sp) .p-pager a.p-pager__link:not(.is-active):focus {
  text-decoration: none;
  background-color: rgba(0, 0, 0, 0.1);
}

/*
 * ブログテーマ切替
 htmlに付与されているclassで判断
 p-post-theme-staff
 p-post-theme-news
 p-post-theme-newshos
 */
.p-post-theme-news [class].p-article-sub__list li {
  border-color: #009944;
}

.p-post-theme-news [class].p-side-heading__free {
  color: #fff100;
}

.p-post-theme-news [class].p-side-heading__free.p-side-heading__free--sub {
  color: #99cc99;
}

.p-post-theme-news [class].p-pager__col.p-pager__col--prev .p-pager__link, .p-post-theme-news [class].p-pager__col.p-pager__col--next .p-pager__link {
  color: #ffffff;
}

.p-post-theme-news [class].p-pager__col.p-pager__col--prev .p-pager__link .fa, .p-post-theme-news [class].p-pager__col.p-pager__col--next .p-pager__link .fa {
  color: #ffffff;
}

.p-post-theme-news [class].p-pager__link {
  border-color: #ffffff;
  color: #ffffff;
  background-color: transparent;
}

.p-post-theme-news [class].p-pager__link.is-active {
  background-color: #ffffff;
  color: #009944;
}

.p-post-theme-new-medical [class].p-article-sub__list li {
  border-color: #009944;
}

.p-post-theme-new-medical [class].p-side-heading__free {
  color: #fff100;
}

.p-post-theme-new-medical [class].p-side-heading__free.p-side-heading__free--sub {
  color: #99cccc;
}

.p-post-theme-new-medical [class].p-pager__col.p-pager__col--prev .p-pager__link, .p-post-theme-new-medical [class].p-pager__col.p-pager__col--next .p-pager__link {
  color: #ffffff;
}

.p-post-theme-new-medical [class].p-pager__col.p-pager__col--prev .p-pager__link .fa, .p-post-theme-new-medical [class].p-pager__col.p-pager__col--next .p-pager__link .fa {
  color: #ffffff;
}

.p-post-theme-new-medical [class].p-pager__link {
  border-color: #ffffff;
  color: #ffffff;
  background-color: transparent;
}

.p-post-theme-new-medical [class].p-pager__link.is-active {
  background-color: #ffffff;
  color: #1886ba;
}

.p-post-theme-blog [class].p-article-stick__link {
  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.15);
}

.p-post-theme-blog [class].p-article-sub {
  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.15);
}

.p-post-theme-blog [class].p-article-sub__list li {
  border-bottom: 1px dashed #1886ba;
}

.p-post-theme-blog [class].p-article-sub__list li a:before {
  color: #1886ba;
}

.p-post-theme-blog [class].p-article__heading {
  color: #1886ba;
}

.p-post-theme-blog [class].p-side-heading__free {
  color: #1886ba;
}

.p-post-theme-blog [class].p-side-heading__free.p-side-heading__free--sub {
  color: #1886ba;
}

.p-post-theme-blog [class].p-pager.p-pager--single {
  border-color: #1886ba;
}

.p-post-theme-blog [class].p-pager__title {
  color: #1886ba;
}

.p-post-theme-blog [class].p-pager__col.p-pager__col--prev .p-pager__link .fa, .p-post-theme-blog [class].p-pager__col.p-pager__col--next .p-pager__link .fa {
  color: #1886ba;
}

.p-post-theme-blog [class].p-pager__col.p-pager__col--prev-post .p-pager__icon, .p-post-theme-blog [class].p-pager__col.p-pager__col--next-post .p-pager__icon {
  background-color: #1886ba;
  color: #ffffff;
}

.p-post-theme-blog [class].p-pager__col.p-pager__col--prev-post {
  border-right-color: #1886ba;
}

.p-post-theme-blog [class].p-pager__link {
  border-color: #1886ba;
  color: #1886ba;
  background-color: transparent;
}

.p-post-theme-blog [class].p-pager__link.is-active {
  background-color: #1886ba;
  color: #ffffff;
}

.p-programlimit {
  line-height: 1.2;
  max-width: 570px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  font-weight: 700;
  text-align: center;
  position: relative;
  z-index: 1;
}

.p-programlimit.p-programlimit--ib {
  display: inline-block;
  max-width: none;
  width: auto;
}

.p-programlimit.p-programlimit--ib .p-programlimit__inner {
  padding-left: 45px;
  padding-right: 45px;
}

.p-programlimit__inner {
  display: block;
  width: 100%;
  border-radius: 50px;
  border: 2px solid #cc6666;
  padding: 5px 10px;
  background-color: #fff;
  position: relative;
  z-index: 0;
}

.p-programlimit:before {
  content: " ";
  display: block;
  position: absolute;
  right: 30px;
  top: -42px;
  width: 60px;
  height: 46px;
  z-index: 1;
  background-image: url("../images/common/h-tvtan-state-halfhead.png");
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: 60px;
}

.p-programlimit__text .tv-accent {
  position: relative;
  top: -1em;
  font-size: 10px;
  font-size: 1.0rem;
}

.p-programlimit__textS {
  color: #cc6666;
  font-size: 1.875em;
}

.p-programlimit-wrapper {
  text-align: center;
}

/*
#styleguide
名称：ランキング
class：ranking

comment

@カテゴリー ranking

```
<div class="p-ranking">
  <h4 class="p-ranking__heading"><i class="fa fa-user" aria-hidden="true"></i> 0歳</h4>
  <ol class="p-list-ol  u-xsmall">
    <li>感染性胃腸炎 （38 人）</li>
    <li>突発性発しん （25 人）</li>
    <li>手足口病 （22 人）</li>
  </ol>
</div>
```
*/
.p-ranking__heading {
  font-size: 18px;
  font-size: 1.8rem;
  font-weight: bold;
  color: #663300;
  padding-bottom: 4px;
}

.p-ranking [class].p-list-ol {
  margin-top: -9px;
}

.p-ranking [class].p-list-ol li {
  padding-top: 9px;
  padding-bottom: 9px;
  border-bottom: 1px dashed #999999;
}

.p-ranking [class].p-list-ol li + li {
  margin-top: 0;
}

.p-recruit-card {
  margin-bottom: 30px;
  overflow: hidden;
  border-radius: 8px;
  background-color: #ffffff;
  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.15);
}

.p-recruit-card__header {
  padding-top: 6px;
  padding-bottom: 6px;
  padding-left: 10px;
  padding-right: 10px;
  background-color: #009944;
  color: #ffffff;
}

.p-recruit-card__header:before, .p-recruit-card__header:after {
  content: "";
  display: table;
}

.p-recruit-card__header:after {
  clear: both;
}

.p-recruit-card__header [class].p-label-blank.p-label-blank--mirror {
  background-color: transparent;
  color: #ffffff;
}

.p-recruit-card__header [class].p-label-blank.p-label-blank--mirror .p-label-blank__tag {
  color: #009944;
  background-color: #ffffff;
}

.p-recruit-card__title {
  line-height: 1.4;
  font-size: 18px;
  font-size: 1.8rem;
}

.p-recruit-card__inner {
  padding: 25px 30px 30px 30px;
}

.p-recruit-card__pic {
  overflow: hidden;
  display: inline-block;
  vertical-align: top;
  border-radius: 8px;
}

.p-recruit-card__footer {
  margin-top: 40px;
}

.p-recruit-card__address {
  margin-top: 10px;
}

.p-recruit-card__address [class].fa {
  color: #009944;
}

.p-recruit-card__content:not(:first-child) {
  margin-top: 50px;
}

.p-reporter__header {
  margin-bottom: 25px;
}

.p-reporter__header [class].p-tag {
  min-width: 106px;
  margin-bottom: 10px;
}

.p-reporter__dl dt {
  font-weight: bold;
  color: #663300;
  font-size: 18px;
  font-size: 1.8rem;
  margin-bottom: 3px;
}

.p-reporter-grid {
  position: relative;
  clear: both;
  display: block;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  font-family: AdobeBlank;
  list-style: none;
  margin: -15px -15px;
  padding: 0;
  margin-top: 0;
  margin-bottom: 0;
}

.p-reporter-grid:before, .p-reporter-grid:after {
  content: "";
  display: table;
}

.p-reporter-grid:after {
  clear: both;
}

.p-reporter-grid > .p-reporter-grid__col {
  clear: both;
  display: inline-block;
  display: block;
  -webkit-box-flex: 0;
  -webkit-flex: 0 1 auto;
      -ms-flex: 0 1 auto;
          flex: 0 1 auto;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  flex: 0 1 auto;
  letter-spacing: normal;
  min-height: 1px;
  position: relative;
  vertical-align: top;
  word-spacing: normal;
  font-family: "YakuHanJP", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴシック Pro", Meiryo, "メイリオ", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  letter-spacing: normal;
  min-height: 1px;
  margin: 15px 0;
  padding: 0 15px;
  position: relative;
  vertical-align: top;
  word-spacing: normal;
}

.p-reporter-grid > .p-reporter-grid__col > * {
  width: 100%;
}

.p-reporter-grid > .p-reporter-grid__col {
  margin-top: 0;
  margin-bottom: 0;
}

.p-reporter-grid > .p-reporter-grid__col.p-reporter-grid__col--pic {
  text-align: center;
}

/*
 * view.js（スクロールイベント系）によるアニメーション発火の動作
 * http://cubic-bezier.com/
 */
html.ef {
  /*
   * ホームドクターを見つけよう！
   * あなたの街のお医者さん
   */
  /*
   * 番組動画
   */
  /*
   * .p-tvtan-search
   */
  /*
   * フッターshareボタン
   */
}

html.ef .p-heading-homedr {
  /*
     * animation setting
     */
  /*
     * 開始前
     */
}

html.ef .p-heading-homedr:before {
  -webkit-transition: opacity 0.5s ease 0s, -webkit-transform 0.5s cubic-bezier(0.12, 1.54, 0.8, 1.3) 0s;
  transition: opacity 0.5s ease 0s, -webkit-transform 0.5s cubic-bezier(0.12, 1.54, 0.8, 1.3) 0s;
  transition: transform 0.5s cubic-bezier(0.12, 1.54, 0.8, 1.3) 0s, opacity 0.5s ease 0s;
  transition: transform 0.5s cubic-bezier(0.12, 1.54, 0.8, 1.3) 0s, opacity 0.5s ease 0s, -webkit-transform 0.5s cubic-bezier(0.12, 1.54, 0.8, 1.3) 0s;
  -webkit-animation: anm-view-fuwari 1.5s linear 4;
          animation: anm-view-fuwari 1.5s linear 4;
}

html.ef .p-heading-homedr:after {
  -webkit-transform-origin: center bottom;
      -ms-transform-origin: center bottom;
          transform-origin: center bottom;
  -webkit-transition: opacity .5s linear 1s, -webkit-transform .5s linear 1s;
  transition: opacity .5s linear 1s, -webkit-transform .5s linear 1s;
  transition: transform .5s linear 1s, opacity .5s linear 1s;
  transition: transform .5s linear 1s, opacity .5s linear 1s, -webkit-transform .5s linear 1s;
}

html.ef .p-heading-homedr .p-heading-homedr__inner {
  -webkit-transition: opacity .5s ease .4s;
  transition: opacity .5s ease .4s;
  -webkit-animation: anm-view-cloud 2s linear 4;
          animation: anm-view-cloud 2s linear 4;
}

html.ef .p-heading-homedr:not(.js-lookon-is-effect):before {
  opacity: 0;
  
  -webkit-transform: translateY(-30px);
      -ms-transform: translateY(-30px);
          transform: translateY(-30px);
}

html.ef .p-heading-homedr:not(.js-lookon-is-effect):after {
  -webkit-transform: rotate(190deg);
      -ms-transform: rotate(190deg);
          transform: rotate(190deg);
  opacity: 0;
  
}

html.ef .p-heading-homedr:not(.js-lookon-is-effect) .p-heading-homedr__inner {
  opacity: 0;
  
}

html.ef .p-programlimit {
  /*
     * animation setting
     */
  /*
     * 開始前
     */
}

html.ef .p-programlimit:before {
  -webkit-transition: z-index 0s ease 1.4s, -webkit-transform 0.5s cubic-bezier(0, 1.24, 0.53, 0.97) 1s;
  transition: z-index 0s ease 1.4s, -webkit-transform 0.5s cubic-bezier(0, 1.24, 0.53, 0.97) 1s;
  transition: transform 0.5s cubic-bezier(0, 1.24, 0.53, 0.97) 1s, z-index 0s ease 1.4s;
  transition: transform 0.5s cubic-bezier(0, 1.24, 0.53, 0.97) 1s, z-index 0s ease 1.4s, -webkit-transform 0.5s cubic-bezier(0, 1.24, 0.53, 0.97) 1s;
}

html.ef .p-programlimit:not(.js-lookon-is-effect):before {
  z-index: 0;
  -webkit-transform: translateY(46px);
      -ms-transform: translateY(46px);
          transform: translateY(46px);
}

html.ef .p-tvtan-search {
  /*
     * animation setting
     */
  /*
     * 開始前
     */
}

html.ef .p-tvtan-search.js-lookon-is-effect:before {
  -webkit-animation: anm-view-tada 1.3s ease 1s;
          animation: anm-view-tada 1.3s ease 1s;
}

html.ef .l-footer-share .p-caption {
  /*
     * animation setting
     */
  /*     * 開始前
     */
}

html.ef .l-footer-share .p-caption > span {
  display: inline-block;
}

html.ef .l-footer-share .p-caption > span:not(.fa) {
  -webkit-animation-duration: .3s;
          animation-duration: .3s;
  -webkit-animation-timing-function: ease-in;
          animation-timing-function: ease-in;
}

html.ef .l-footer-share .p-caption > span:not(.fa):nth-child(1) {
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
}

html.ef .l-footer-share .p-caption > span:not(.fa):nth-child(2) {
  -webkit-animation-delay: 0.1s;
          animation-delay: 0.1s;
}

html.ef .l-footer-share .p-caption > span:not(.fa):nth-child(3) {
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
}

html.ef .l-footer-share .p-caption > span:not(.fa):nth-child(4) {
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
}

html.ef .l-footer-share .p-caption > span:not(.fa):nth-child(5) {
  -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s;
}

html.ef .l-footer-share .p-caption > span:not(.fa):nth-child(6) {
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
}

html.ef .l-footer-share .p-caption > span:not(.fa):nth-child(7) {
  -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s;
}

html.ef .l-footer-share .p-caption > span:not(.fa):nth-child(8) {
  -webkit-animation-delay: 0.7s;
          animation-delay: 0.7s;
}

html.ef .l-footer-share .p-caption > span:not(.fa):nth-child(9) {
  -webkit-animation-delay: 0.8s;
          animation-delay: 0.8s;
}

html.ef .l-footer-share .p-caption > span:not(.fa):nth-child(10) {
  -webkit-animation-delay: 0.9s;
          animation-delay: 0.9s;
}

html.ef .l-footer-share .p-caption > span:not(.fa):nth-child(11) {
  -webkit-animation-delay: 1.0s;
          animation-delay: 1.0s;
}

html.ef .l-footer-share .p-caption > span:not(.fa):nth-child(12) {
  -webkit-animation-delay: 1.1s;
          animation-delay: 1.1s;
}

html.ef .l-footer-share .p-caption > span:not(.fa):nth-child(13) {
  -webkit-animation-delay: 1.2s;
          animation-delay: 1.2s;
}

html.ef .l-footer-share .p-caption > span:not(.fa):nth-child(14) {
  -webkit-animation-delay: 1.3s;
          animation-delay: 1.3s;
}

html.ef .l-footer-share .p-caption > span:not(.fa):nth-child(15) {
  -webkit-animation-delay: 1.4s;
          animation-delay: 1.4s;
}

html.ef .l-footer-share .p-caption > span:not(.fa):nth-child(16) {
  -webkit-animation-delay: 1.5s;
          animation-delay: 1.5s;
}

html.ef .l-footer-share .p-caption > span:not(.fa):nth-child(17) {
  -webkit-animation-delay: 1.6s;
          animation-delay: 1.6s;
}

html.ef .l-footer-share .p-caption > span:not(.fa):nth-child(18) {
  -webkit-animation-delay: 1.7s;
          animation-delay: 1.7s;
}

html.ef .l-footer-share .p-caption > span:not(.fa):nth-child(19) {
  -webkit-animation-delay: 1.8s;
          animation-delay: 1.8s;
}

html.ef .l-footer-share .p-caption > span.fa {
  -webkit-animation-duration: .3s;
          animation-duration: .3s;
  -webkit-animation-timing-function: ease;
          animation-timing-function: ease;
  -webkit-animation-delay: 2.3s;
          animation-delay: 2.3s;
}

html.ef .l-footer-share .p-caption.js-lookon-is-effect > span:not(.fa) {
  -webkit-animation-name: anm-view-jump;
          animation-name: anm-view-jump;
}

html.ef .l-footer-share .p-caption.js-lookon-is-effect > span.fa {
  -webkit-animation-name: anm-view-yey;
          animation-name: anm-view-yey;
}

@-webkit-keyframes anm-view-cloud {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  25% {
    -webkit-transform: translateY(-3px);
            transform: translateY(-3px);
  }
  50% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  75% {
    -webkit-transform: translateY(3px);
            transform: translateY(3px);
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

@keyframes anm-view-cloud {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  25% {
    -webkit-transform: translateY(-3px);
            transform: translateY(-3px);
  }
  50% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  75% {
    -webkit-transform: translateY(3px);
            transform: translateY(3px);
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

@-webkit-keyframes anm-view-yey {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@keyframes anm-view-yey {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@-webkit-keyframes anm-view-fuwari {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  25% {
    -webkit-transform: translateY(1px);
            transform: translateY(1px);
  }
  50% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  75% {
    -webkit-transform: translateY(-1px);
            transform: translateY(-1px);
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

@keyframes anm-view-fuwari {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  25% {
    -webkit-transform: translateY(1px);
            transform: translateY(1px);
  }
  50% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  75% {
    -webkit-transform: translateY(-1px);
            transform: translateY(-1px);
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

@-webkit-keyframes anm-view-jump {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(-5px);
            transform: translateY(-5px);
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

@keyframes anm-view-jump {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(-5px);
            transform: translateY(-5px);
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

@-webkit-keyframes anm-view-tada {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  7.69231% {
    -webkit-transform: scale(0.9) rotate(-8deg);
            transform: scale(0.9) rotate(-8deg);
  }
  15.38462% {
    -webkit-transform: scale(0.9) rotate(-8deg);
            transform: scale(0.9) rotate(-8deg);
  }
  23.07692% {
    -webkit-transform: scale(1.05) rotate(8deg);
            transform: scale(1.05) rotate(8deg);
  }
  30.76923% {
    -webkit-transform: scale(1.05) rotate(-8deg);
            transform: scale(1.05) rotate(-8deg);
  }
  38.46154% {
    -webkit-transform: scale(1.05) rotate(8deg);
            transform: scale(1.05) rotate(8deg);
  }
  46.15385% {
    -webkit-transform: scale(1.05) rotate(-8deg);
            transform: scale(1.05) rotate(-8deg);
  }
  53.84615% {
    -webkit-transform: scale(1.05) rotate(8deg);
            transform: scale(1.05) rotate(8deg);
  }
  61.53846% {
    -webkit-transform: scale(1) rotate(0);
            transform: scale(1) rotate(0);
  }
  100% {
    -webkit-transform: scale(1) rotate(0);
            transform: scale(1) rotate(0);
  }
}

@keyframes anm-view-tada {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  7.69231% {
    -webkit-transform: scale(0.9) rotate(-8deg);
            transform: scale(0.9) rotate(-8deg);
  }
  15.38462% {
    -webkit-transform: scale(0.9) rotate(-8deg);
            transform: scale(0.9) rotate(-8deg);
  }
  23.07692% {
    -webkit-transform: scale(1.05) rotate(8deg);
            transform: scale(1.05) rotate(8deg);
  }
  30.76923% {
    -webkit-transform: scale(1.05) rotate(-8deg);
            transform: scale(1.05) rotate(-8deg);
  }
  38.46154% {
    -webkit-transform: scale(1.05) rotate(8deg);
            transform: scale(1.05) rotate(8deg);
  }
  46.15385% {
    -webkit-transform: scale(1.05) rotate(-8deg);
            transform: scale(1.05) rotate(-8deg);
  }
  53.84615% {
    -webkit-transform: scale(1.05) rotate(8deg);
            transform: scale(1.05) rotate(8deg);
  }
  61.53846% {
    -webkit-transform: scale(1) rotate(0);
            transform: scale(1) rotate(0);
  }
  100% {
    -webkit-transform: scale(1) rotate(0);
            transform: scale(1) rotate(0);
  }
}

/*
#styleguide
名称：検索フォーム
class：search

検索フォームのテンプレートです

@カテゴリー search
@使用頻度 ★★☆
@コンポーネント p-select
@--large
@--select


```
<form class="p-search" role="search" method="get" id="searchform" action="">
  <input class="p-search__input" id="web-serching" value="" name="s" placeholder="サイト内検索" type="text">
  <button class="p-search__btn  u-smoothing" type="submit">
    <i class="fa  fa-search" aria-hidden="true"></i>
  </button>
</form><!-- /.p-search -->

<form class="p-search  p-search--large  u-mt  u-mb" role="search" method="get" id="searchform" action="">
  <input class="p-search__input" id="web-serching" value="" name="s" placeholder="サイト内検索" type="text">
  <button class="p-search__btn  u-smoothing" type="submit">
    <i class="fa  fa-search" aria-hidden="true"></i>
    検索する
  </button>
</form><!-- /.p-search -->

<form class="p-search  p-search--select" role="search" method="get" id="searchform" action="">
  <select class="p-select  u-middle" name="" id="">
    <option value="">診療科目</option>
    <option value="">診療科目1</option>
  </select><!--
--><span class="p-search__plus  u-middle">+</span><!--
--><select class="p-select" name="" id="">
    <option value="">地区・エリア</option>
    <option value="">地区・エリア1</option>
  </select><!--
--><button class="p-search__btn  u-smoothing  u-middle" type="submit">
    <i class="fa  fa-search" aria-hidden="true"></i>
    検索する
  </button>
</form><!-- /.p-search -->
```
*/
.p-search {
  position: relative;
}

.p-search__input {
  height: 30px;
  border-radius: 30px;
  border: 1px solid #dddddd;
  padding-left: 1em;
  font-size: 14px;
  font-size: 1.4rem;
  padding-right: 40px;
}

.p-search__btn {
  display: inline-block;
  vertical-align: top;
  cursor: pointer;
  border: 1px solid #009944;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  outline: none !important;
  vertical-align: middle;
  position: absolute;
  top: 0;
  right: 0;
  border-radius: 30px;
  width: 30px;
  height: 100%;
  color: #fff;
  background-color: #009944;
  font-size: 14px;
  font-size: 1.4rem;
  -webkit-transition: border 0.45s ease 0s, box-shadow 0.45s ease 0s;
  transition: border 0.45s ease 0s, box-shadow 0.45s ease 0s;
}

html:not(.sp) .p-search__btn:hover, html:not(.sp) .p-search__btn:focus {
  border: 1px solid #fff100;
}

html:not(.sp) .p-search__btn:hover .fa, html:not(.sp) .p-search__btn:focus .fa {
  text-shadow: 1px 1px 0 rgba(51, 51, 51, 0.5);
}

.p-search__btn:active {
  box-shadow: inset 0 0 2px 2px rgba(0, 0, 0, 0.1);
}

.p-search__btn .fa {
  position: relative;
  top: -.07em;
}

.p-search--large {
  width: 670px;
  max-width: 100%;
}

.p-search--large .p-search__input {
  height: 40px;
  padding-right: 110px;
}

.p-search--large .p-search__btn {
  width: auto;
  padding-left: 18px;
  padding-right: 18px;
  border-radius: 40px;
  font-weight: 700;
}

.p-search--large .p-search__btn .fa {
  margin-right: .05em;
  font-size: 16px;
  font-size: 1.6rem;
}

.p-search--select {
  color: #999999;
}

.p-search--select .p-select {
  width: 200px;
}

.p-search--select .p-search__btn {
  height: 40px;
  position: relative;
  width: 110px;
  font-weight: 700;
  margin-left: 16px;
}

.p-search--select .p-search__btn .fa {
  position: relative;
  top: auto;
  left: auto;
  margin-right: .05em;
  font-size: 16px;
  font-size: 1.6rem;
}

.p-search--select .p-search__plus {
  margin-left: 8px;
  margin-right: 8px;
  font-size: 15px;
  font-size: 1.5rem;
}

.p-search--select .p-select,
.p-search--select .p-search__btn,
.p-search--select .p-search__plus {
  display: inline-block;
}

.p-search-list {
  list-style: none;
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 0;
}

.p-search-list__col {
  border-top: 1px dashed #999999;
}

.p-search-list__col:last-child {
  border-bottom: 1px dashed #999999;
}

.p-search-list__link {
  display: block;
  line-height: 1.3;
  padding: 12px 22px 12px 9px;
  position: relative;
  z-index: 0;
  -webkit-transition: background-color 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  transition: background-color 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

.p-search-list__link:before {
  content: "\f105";
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: absolute;
  right: 8px;
  color: #009944;
  top: 50%;
  margin-top: -.5em;
  -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  transition: -webkit-transform 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  transition: transform 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  transition: transform 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955), -webkit-transform 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

html:not(.sp) .p-search-list__link:hover, html:not(.sp) .p-search-list__link:focus {
  text-decoration: none;
  background-color: #f5f5f5;
}

html:not(.sp) .p-search-list__link:hover:before, html:not(.sp) .p-search-list__link:focus:before {
  -webkit-transform: translateX(3px);
      -ms-transform: translateX(3px);
          transform: translateX(3px);
}

html:not(.sp) .p-search-list__link:hover .p-search-list__title, html:not(.sp) .p-search-list__link:focus .p-search-list__title {
  color: #009944;
}

.p-search-list__title {
  display: block;
  color: #333333;
  font-size: 14px;
  font-size: 1.4rem;
  margin-bottom: 4px;
  -webkit-transition: color 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  transition: color 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

.p-search-list__url {
  display: block;
  color: #999999;
  font-size: 12px;
  font-size: 1.2rem;
}

/*
#styleguide
名称：セクション
class：section

セクションです。
c-containerをインナーに使うことが多々あります。

@発展途上
@カテゴリー section
@使用頻度 ★★★
@--nest
@--before-padding
@--after-padding

```
<section class="p-section">
  <section class="p-section  p-section--nest">
    セクションをネストした時に p-section--nest
  </section>

  <div class="p-section__footer">
    p-section__footer
  </div>
</section><!-- /.p-section -->
```
*/
.p-section {
  padding-top: 35px;
  /*
   * .p-section--nest
   */
}

.p-section__content {
  padding-left: 40px;
  padding-bottom: 60px;
}

.p-section__caption {
  margin-bottom: 30px;
  font-weight: bold;
  font-size: 32px;
  font-size: 3.2rem;
  color: #009944;
  line-height: 1.2;
}

.p-section__caption__down {
  font-size: 0.5625em;
}

.p-section__footer {
  padding-top: 30px;
  padding-bottom: 30px;
}

.p-section__footer.p-section__footer--padding-l {
  padding-top: 60px;
  padding-bottom: 60px;
}

.p-section--nest {
  padding-top: 25px;
}

.p-section.p-section--before-padding {
  padding-top: 60px;
}

.p-section.p-section--before-padding-s {
  padding-top: 20px;
}

.p-section.p-section--before-padding-ms {
  padding-top: 40px;
}

.p-section.p-section--before-padding-m {
  padding-top: 50px;
}

.p-section.p-section--before-padding-l {
  padding-top: 75px;
}

.p-section.p-section--before-padding-xl {
  padding-top: 100px;
}

.p-section.p-section--after-padding {
  padding-bottom: 60px;
}

.p-section.p-section--after-padding-s {
  padding-bottom: 20px;
}

.p-section.p-section--after-padding-ms {
  padding-bottom: 40px;
}

.p-section.p-section--after-padding-m {
  padding-bottom: 50px;
}

.p-section.p-section--after-padding-l {
  padding-bottom: 75px;
}

.p-section.p-section--after-padding-xl {
  padding-bottom: 100px;
}

.p-section.p-section--before-margin {
  margin-top: 60px;
}

.p-section.p-section--before-margin-m {
  margin-top: 50px;
}

.p-section.p-section--before-margin-l {
  margin-top: 75px;
}

.p-section.p-section--before-margin-xl {
  margin-top: 100px;
}

.p-section.p-section--after-margin {
  margin-bottom: 60px;
}

.p-section.p-section--after-margin-m {
  margin-bottom: 50px;
}

.p-section.p-section--after-margin-l {
  margin-bottom: 75px;
}

.p-section.p-section--after-margin-xl {
  margin-bottom: 100px;
}

/*
 * トップ
 *  あなたの街のお医者さん
 */
.p-home-doctor {
  padding-top: 15px;
}

.p-home-doctor [class].p-section__footer {
  padding-top: 27px;
}

.p-home-doctor [class].p-ticker-group {
  margin-bottom: 13px;
}

/*
 * トップ
 *  番組動画
 */
.p-home-program {
  padding-bottom: 25px;
}

.p-home-program [class].p-programlimit {
  margin-top: 19px;
  margin-bottom: 28px;
}

.p-home-program [class].p-btngroup {
  margin-top: 25px;
}

.p-home-program [class].p-tablist__inner {
  width: 100%;
  max-width: 990px;
}

/*
 * トップ
 *  新着情報・お知らせ
 */
.p-home-news {
  padding-bottom: 10px;
}

.p-home-news [class].p-heading {
  margin-bottom: 30px;
}

.p-home-news [class].p-section--nest [class].p-heading {
  padding-top: 3px;
  margin-bottom: 20px;
}

/*
 * トップ
 *  熊本の医療機関情報
 */
.p-home-medical [class].p-heading {
  margin-bottom: 8px;
}

.p-home-medical [class].p-binder {
  margin-top: 25px;
}

.p-sickchildren-bord {
  margin-bottom: 110px;
}

.p-sickchildren-bord .p-binder {
  margin-top: 30px;
}

.p-sickchildren-bord .p-binder {
  max-width: 1170px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

.p-sickchildren-bord__inner {
  position: relative;
  padding-left: 15px;
  padding-right: 15px;
}

.p-sickchildren-bord__inner:before {
  content: " ";
  display: block;
  width: 100%;
  height: 50%;
  position: absolute;
  bottom: 0;
  left: 0;
  background-color: #fff;
}

.p-recruit-section {
  position: relative;
  text-align: center;
}

.p-recruit-section > [class].c-container, .l-area--sub .p-recruit-section > .l-area__inner[class] {
  text-align: left;
  z-index: 3;
  position: relative;
}

.p-recruit-section__illust {
  display: inline-block;
  vertical-align: bottom;
}

.p-section-search {
  padding-top: 5px;
  margin-top: 15px;
  background-color: #ffffff;
  border-radius: 8px;
  padding-left: 40px;
  padding-right: 40px;
  padding-bottom: 25px;
}

.p-section-search__header {
  margin-top: -20px;
  text-align: center;
  position: relative;
  max-width: 530px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: -7px;
}

.p-section-search__header__text {
  font-size: 18px;
  font-size: 1.8rem;
}

.p-section-search__header__tvtan {
  position: absolute;
  display: inline-block;
  top: -25px;
  right: 0;
}

.p-section-search [class].p-heading-outline {
  text-shadow: 0px -3px 0 #1886ba, 0.99px -2.97px 0 #1886ba, 1.98px -1.98px 0 #1886ba, 2.97px -0.99px 0 #1886ba, 3px 0px 0 #1886ba, 2.97px 0.99px 0 #1886ba, 1.98px 1.98px 0 #1886ba, 0.99px 2.97px 0 #1886ba, 0px 3px 0 #1886ba, -0.99px 2.97px 0 #1886ba, -1.98px 1.98px 0 #1886ba, -2.97px 0.99px 0 #1886ba, -3px 0px 0 #1886ba, -2.97px -0.99px 0 #1886ba, -1.98px -1.98px 0 #1886ba, -0.99px -2.97px 0 #1886ba;
}

.p-section-search__content {
  padding-top: 40px;
  padding-bottom: 40px;
  padding-left: 30px;
  padding-right: 30px;
}

.p-section-search__content + .p-section-search__content {
  border-top: 1px dashed #1886ba;
}

.p-infection-section__illust-cover {
  position: relative;
}

.p-infection-section [class].p-heading-underline {
  margin-bottom: 30px;
}

select.p-select {
  border: 1px solid #999999;
  height: 40px;
  font-size: 14px;
  font-size: 1.4rem;
  color: #666666;
  border-radius: 8px;
  padding-left: 10px;
  padding-right: 10px;
}

/*
#styleguide
サイド：side

```
```
*/
.p-side {
  margin-bottom: 30px;
}

.p-side__list li {
  margin-bottom: 10px;
}

.p-side.p-side--white [class].p-side-heading__free {
  color: #ffffff;
}

.p-side.p-side--white [class].p-article-sub__list li {
  border-color: #cccccc;
}

.p-side-heading {
  margin-bottom: 10px;
}

.p-side-heading__free {
  display: block;
  line-height: 1;
  color: #fff100;
  font-weight: bold;
  font-size: 24px;
  font-size: 2.4rem;
}

.p-side-heading__free.p-side-heading__free--sub {
  margin-top: 3px;
  font-weight: normal;
  font-size: 14px;
  font-size: 1.4rem;
  font-weight: normal;
  color: #99cc99;
}

/*
 * アニメーション
 */
@-webkit-keyframes sns-ef-fb {
  0% {
    opacity: 0.3;
    
  }
  40% {
    opacity: 1;
    
    box-shadow: 0 0 0 0 white, 0 0 0 2px #39599f, 0 0 0 4px white;
  }
  100% {
    box-shadow: 0 0 0 0 white, 0 0 0 2px #39599f, 0 0 0 4px white;
    -webkit-transform: scale(1.5);
    opacity: 0;
    
  }
}
@keyframes sns-ef-fb {
  0% {
    opacity: 0.3;
    
  }
  40% {
    opacity: 1;
    
    box-shadow: 0 0 0 0 white, 0 0 0 2px #39599f, 0 0 0 4px white;
  }
  100% {
    box-shadow: 0 0 0 0 white, 0 0 0 2px #39599f, 0 0 0 4px white;
    -webkit-transform: scale(1.5);
    opacity: 0;
    
  }
}

@-webkit-keyframes sns-ef-line {
  0% {
    opacity: 0.3;
    
  }
  40% {
    opacity: 1;
    
    box-shadow: 0 0 0 0 white, 0 0 0 2px #25af00, 0 0 0 4px white;
  }
  100% {
    box-shadow: 0 0 0 0 white, 0 0 0 2px #25af00, 0 0 0 4px white;
    -webkit-transform: scale(1.5);
    opacity: 0;
    
  }
}

@keyframes sns-ef-line {
  0% {
    opacity: 0.3;
    
  }
  40% {
    opacity: 1;
    
    box-shadow: 0 0 0 0 white, 0 0 0 2px #25af00, 0 0 0 4px white;
  }
  100% {
    box-shadow: 0 0 0 0 white, 0 0 0 2px #25af00, 0 0 0 4px white;
    -webkit-transform: scale(1.5);
    opacity: 0;
    
  }
}

@-webkit-keyframes sns-ef-twitter {
  0% {
    opacity: 0.3;
    
  }
  40% {
    opacity: 1;
    
    box-shadow: 0 0 0 0 white, 0 0 0 2px #45b0e3, 0 0 0 4px white;
  }
  100% {
    box-shadow: 0 0 0 0 white, 0 0 0 2px #45b0e3, 0 0 0 4px white;
    -webkit-transform: scale(1.5);
    opacity: 0;
    
  }
}

@keyframes sns-ef-twitter {
  0% {
    opacity: 0.3;
    
  }
  40% {
    opacity: 1;
    
    box-shadow: 0 0 0 0 white, 0 0 0 2px #45b0e3, 0 0 0 4px white;
  }
  100% {
    box-shadow: 0 0 0 0 white, 0 0 0 2px #45b0e3, 0 0 0 4px white;
    -webkit-transform: scale(1.5);
    opacity: 0;
    
  }
}

.p-sns {
  width: 48px;
  height: 48px;
  line-height: 48px;
  display: inline-block;
  border-radius: 50%;
  color: #fff;
  text-align: center;
  position: relative;
  -webkit-transition: box-shadow .2s, background-color .2s, -webkit-transform .2s;
  transition: box-shadow .2s, background-color .2s, -webkit-transform .2s;
  transition: transform .2s, box-shadow .2s, background-color .2s;
  transition: transform .2s, box-shadow .2s, background-color .2s, -webkit-transform .2s;
}

.p-sns:before {
  content: '';
  top: 0;
  left: 0;
  padding: 0;
  z-index: -1;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1);
  opacity: 0;
  
  -webkit-transform: scale(0.9);
      -ms-transform: scale(0.9);
          transform: scale(0.9);
  pointer-events: none;
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  -webkit-transition: -webkit-transform 0.2s;
  transition: -webkit-transform 0.2s;
  transition: transform 0.2s;
  transition: transform 0.2s, -webkit-transform 0.2s;
}

.p-sns--facebook {
  background-color: #3B5998;
  font-size: 22px;
  font-size: 2.2rem;
}

html:not(.sp) .p-sns--facebook:hover:before, html:not(.sp) .p-sns--facebook:focus:before {
  -webkit-animation: sns-ef-fb .8s ease-out .05s;
          animation: sns-ef-fb .8s ease-out .05s;
}

.p-sns--twitter {
  background-color: #55ACEE;
  font-size: 20px;
  font-size: 2.0rem;
}

html:not(.sp) .p-sns--twitter:hover:before, html:not(.sp) .p-sns--twitter:focus:before {
  -webkit-animation: sns-ef-twitter .8s ease-out .05s;
          animation: sns-ef-twitter .8s ease-out .05s;
}

.p-sns--line {
  background-color: #00C300;
  font-size: 19px;
  font-size: 1.9rem;
}

html:not(.sp) .p-sns--line:hover:before, html:not(.sp) .p-sns--line:focus:before {
  -webkit-animation: sns-ef-line .8s ease-out .05s;
          animation: sns-ef-line .8s ease-out .05s;
}

html:not(.sp) .p-sns:hover, html:not(.sp) .p-sns:focus {
  text-decoration: none;
  -webkit-transform: scale(0.93);
      -ms-transform: scale(0.93);
          transform: scale(0.93);
}

/*
医療機関検索 ( sortarea )
*/
.p-sortarea {
  width: 970px;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
}

.p-sortarea__outline {
  background-color: #ffffff;
  border: 4px solid #009944;
  border-radius: 8px;
  padding-left: 35px;
  padding-right: 35px;
  padding-bottom: 20px;
  margin-bottom: 30px;
}

.p-sortarea [class].p-heading-outline {
  margin-top: -.8em;
}

.p-sortarea__subtitle {
  margin-top: 10px;
  margin-bottom: 7px;
  font-size: 18px;
  font-size: 1.8rem;
  font-weight: normal;
}

.p-sortarea__word {
  line-height: 1;
  color: #009944;
  font-size: 18px;
  font-size: 1.8rem;
  margin-top: 0;
  margin-bottom: 0;
}

.p-sortarea__word [class^="tv-"] {
  margin-right: 11px;
  position: relative;
  top: -.1em;
  vertical-align: middle;
  font-size: 2.22222em;
}

.p-sortarea__word .tv-checksheet {
  margin-right: .45em;
}

.p-sortarea__search {
  padding-top: 15px;
  padding-bottom: 15px;
}

.p-sortarea__search + .p-sortarea__search {
  border-top: 1px dashed #009944;
}

/*
医療機関検索一覧 ( sort )
*/
.p-sort__list {
  border-bottom: 2px solid #009944;
  padding-bottom: 27px;
  position: relative;
}

.p-sort__link {
  position: relative;
  font-weight: 700;
  display: inline-block;
  font-size: 22px;
  font-size: 2.2rem;
  color: #fff;
  background-color: #cccccc;
  text-align: center;
  width: 2.18182em;
  height: 2.18182em;
  line-height: 2.09091em;
  border-radius: 50%;
  -webkit-transition: background-color 0.45s ease 0s;
  transition: background-color 0.45s ease 0s;
}

.p-sort__link.is-active {
  background-color: #009944;
}

html:not(.sp) .p-sort__link:hover, html:not(.sp) .p-sort__link:focus {
  background-color: #009944;
  text-decoration: none;
}

.p-sort__contents {
  margin-top: 10px;
}

.p-sort__item {
  border-bottom: 1px solid #009944;
}

/*
#styleguide
名称：スタッフプロフィール
class：sfaff

ブログのスタッフプロフィールです


```
  <div class="p-staff">
    <div class="p-staff__hero">
      <img src="/assets/images/staff/staff-matsumoto-ryu-info.png"
           srcset="/assets/images/staff/staff-matsumoto-ryu-info.png 1x,
                   /assets/images/staff/staff-matsumoto-ryu-info@2x.png 2x" width="270" height="120" alt="スタッフヘッダー画像">
    </div>
    <div class="p-staff__inner">
      <div class="p-staff__prof">
        <p class="p-staff__thumb">
          <img src="/assets/images/staff/staff-matsumoto-ryu.png"
               srcset="/assets/images/staff/staff-matsumoto-ryu.png 1x,
                       /assets/images/staff/staff-matsumoto-ryu@2x.png 2x" width="130" height="130" alt="スタッフ写真">
        </p>

        <span class="p-tag  u-bg-blue">Dr.テレビたん担当</span>
        <h4 class="p-staff__name">
          松本 龍<span>（まつもと りゅう）</span>
        </h4>

        <div class="c-paragraph-text  u-blue">
          <p>
            1978年1月26日生 （みずがめ座）<br>
            169cm/ 99kg / A型 / 既婚
          </p>
        </div>
      </div>

      <div class="p-staff__footer">
        <img src="/assets/images/staff/staff-matsumoto-ryu-ninteisyou.png"
             srcset="/assets/images/staff/staff-matsumoto-ryu-ninteisyou.png 1x,
                     /assets/images/staff/staff-matsumoto-ryu-ninteisyou@2x.png 2x" width="110" height="70" alt="スタッフ写真">

        <div class="c-paragraph-text">
          <p class="u-bold">AHA BLSヘルスケアプロバイダー</p>
          <p>
            成人・乳児・小児の一次救命処置等<br>
            最新のG2010版を取得しました！
          </p>
        </div>
      </div>
    </div>
  </div><!-- /.p-staff -->
```
*/
.p-staff {
  max-width: 270px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.15);
  overflow: hidden;
}

.p-staff__inner {
  padding: 0 20px 30px 20px;
}

.p-staff__hero {
  margin-bottom: -25%;
}

.p-staff__hero img {
  width: 100%;
}

.p-staff__thumb {
  margin-bottom: 5px;
}

.p-staff__name {
  margin-bottom: 12px;
  line-height: 1.4;
  font-size: 24px;
  font-size: 2.4rem;
  color: #1886ba;
  font-weight: bold;
}

.p-staff__name span {
  display: block;
  font-weight: normal;
  color: #333333;
  font-size: 0.58333em;
}

.p-staff__footer {
  margin-top: 10px;
}

.p-staff__footer > *:not(:first-child) {
  margin-top: 10px;
}

.p-staff-hero {
  padding-left: 15px;
  padding-right: 15px;
}

.p-staff-hero__inner {
  width: 970px;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
  position: relative;
  text-align: right;
}

.p-staff-hero__inner:before {
  content: " ";
  pointer-events: none;
  z-index: -1;
  display: block;
  background-image: url("../images/staff/blog-hero-ryu_matsumoto_2.png");
  background-repeat: no-repeat;
}

.p-staff-hero__inner:after {
  content: " ";
  content: "";
  display: inline-block;
  height: 100%;
  margin-left: -.25em;
  pointer-events: none;
  vertical-align: middle;
  visibility: hidden;
}

.p-staff-hero__header {
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  margin-top: 50px;
  margin-bottom: 15px;
}

.p-staff-hero__subtext {
  color: #999999;
  margin-top: 20px;
}

.l-separate {
  padding-top: 20px;
  position: relative;
}

.l-separate .p-staff-hero {
  margin-top: -70px;
}

/*
 * SVGマスク
 * clip-pathにベンダープレフィックスを付けるとsafariで機能しない...
 * auto-prefixしている場合はgulpでコンパイル前に処理を加える
 */
.p-svgmask-clipper {
  width: 0;
  height: 0;
  position: absolute;
}

html.ie .p-svgmask-clipper {
  display: none;
}

.p-svgmask-image {
  max-width: 100%;
  display: block;
  margin-left: auto;
  margin-right: auto;
  border-radius: 8px;
  -webkit-transition: all 0.5s ease 0.2s;
  -moz-transition: all 0.5s ease 0.2s;
  opacity: 1;
  
  transition: all 0.5s ease 0.2s;
}

html:not(.ie) .p-svgmask-image__free {
  -webkit-clip-path: url("#svg-mocomoco");
          clip-path: url("#svg-mocomoco");
}

/*
#styleguide
名称：スライダー
class：swiper

jQuery 版の Swiper を使用 ( .js-swiper がトリガー )
http://idangero.us/swiper/
http://idangero.us/swiper/api/
|
■p-swiper--buttom-over
次・前のボタンをはみ出す効果
|
■p-swiper__skin（追加class）
itemのシャドウを切れさせないためにpaddingを入れている
また左右を表示させないで、ボタンをはみ出す（p-swiper--buttom-over）ときに使用
|
■p-swiper--hidden
デフォルトで左右を見えるようにカスタムしているのでその補助

@カテゴリー swiper
@使用頻度 ★☆☆
@トリガー .js-swiper-4col
@トリガー .js-swiper-3col
@トリガー .js-swiper-row
@トリガー .js-swiper-fade
@--buttom-over
@--max
@--auto
@--hidden

```
<div class="c-container">
  <div class="p-swiper  p-swiper--buttom-over  p-swiper--max">
    <div class="p-swiper__inner">
      <div class="js-swiper-4col  swiper-container">
        <div class="p-swiper__skin">
          <ul class="swiper-wrapper  c-list">
            <li class="swiper-slide">
              <img src="http://placehold.jp/1200x800.png" alt="">
            </li><!-- /.swiper-slide -->
            <li class="swiper-slide">
              <img src="http://placehold.jp/1200x800.png" alt="">
            </li><!-- /.swiper-slide -->
            <li class="swiper-slide">
              <img src="http://placehold.jp/1200x800.png" alt="">
            </li><!-- /.swiper-slide -->
            <li class="swiper-slide">
              <img src="http://placehold.jp/1200x800.png" alt="">
            </li><!-- /.swiper-slide -->
            <li class="swiper-slide">
              <img src="http://placehold.jp/1200x800.png" alt="">
            </li><!-- /.swiper-slide -->
          </ul><!-- /.swiper-wrapper -->
        </div><!-- /.p-swiper__skin -->

        <div class="swiper-button-next  swiper-button-white"></div>
        <div class="swiper-button-prev  swiper-button-white"></div>
      </div><!-- /.swiper-container -->
    </div><!-- /.p-swiper__inner -->
  </div><!-- /.p-swiper -->

  <div class="p-swiper  p-swiper--max  u-mt-xl  u-mb-xl">
    <div class="p-swiper__inner">
      <div class="js-swiper-3col  swiper-container">
        <ul class="swiper-wrapper  c-list">
          <li class="swiper-slide">
            <img src="http://placehold.jp/1200x800.png" alt="">
          </li><!-- /.swiper-slide -->
          <li class="swiper-slide">
            <img src="http://placehold.jp/1200x800.png" alt="">
          </li><!-- /.swiper-slide -->
          <li class="swiper-slide">
            <img src="http://placehold.jp/1200x800.png" alt="">
          </li><!-- /.swiper-slide -->
          <li class="swiper-slide">
            <img src="http://placehold.jp/1200x800.png" alt="">
          </li><!-- /.swiper-slide -->
          <li class="swiper-slide">
            <img src="http://placehold.jp/1200x800.png" alt="">
          </li><!-- /.swiper-slide -->
        </ul><!-- /.swiper-wrapper -->

        <div class="swiper-button-next  swiper-button-white"></div>
        <div class="swiper-button-prev  swiper-button-white"></div>
      </div><!-- /.swiper-container -->
    </div><!-- /.p-swiper__inner -->
  </div><!-- /.p-swiper -->

  <div class="p-swiper  p-swiper--max">
    <div class="p-swiper__inner">
      <div class="js-swiper-row  swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <a href="http://www.kkt.jp/touch/" target="_blank" rel="noopener" class="c-h-fade">
              <img src="/assets/images/bnr/bnr-touchgan.jpg"
                   srcset="/assets/images/bnr/bnr-touchgan.jpg 1x ,
                           /assets/images/bnr/bnr-touchgan@2x.jpg 2x"
                   width="210" height="72" alt="バナー：タッチ！がん検診">
            </a>
          </div><!-- /.swiper-slide -->
          <div class="swiper-slide">
            <a href="http://drone.kkti.jp/" target="_blank" rel="noopener" class="c-h-fade">
              <img src="/assets/images/bnr/bnr-kkti.jpg"
                   srcset="/assets/images/bnr/bnr-kkti.jpg 1x ,
                           /assets/images/bnr/bnr-kkti@2x.jpg 2x"
                   width="210" height="72" alt="バナー：KKTイノベート">
            </a>
          </div><!-- /.swiper-slide -->
          <div class="swiper-slide">
            <a href="http://www.ysreading.co.jp/" target="_blank" rel="noopener" class="c-h-fade">
              <img src="/assets/images/bnr/bnr-ws_reading.jpg"
                   srcset="/assets/images/bnr/bnr-ws_reading.jpg 1x ,
                           /assets/images/bnr/bnr-ws_reading@2x.jpg 2x"
                   width="210" height="72" alt="バナー：株式会社ワイズ・リーディング　遠隔画像診断サービス">
            </a>
          </div><!-- /.swiper-slide -->
          <div class="swiper-slide">
            <a href="http://cancerinfo.tri-kobe.org/" target="_blank" rel="noopener" class="c-h-fade">
              <img src="/assets/images/bnr/bnr-cij.jpg"
                   srcset="/assets/images/bnr/bnr-cij.jpg 1x ,
                           /assets/images/bnr/bnr-cij@2x.jpg 2x"
                   width="210" height="72" alt="バナー：がん情報サイト">
            </a>
          </div><!-- /.swiper-slide -->
          <div class="swiper-slide">
            <a href="http://www.ohta-isan.co.jp/" target="_blank" rel="noopener" class="c-h-fade">
              <img src="/assets/images/bnr/bnr-otaisan.jpg"
                   srcset="/assets/images/bnr/bnr-otaisan.jpg 1x ,
                           /assets/images/bnr/bnr-otaisan@2x.jpg 2x"
                   width="210" height="72" alt="バナー：太田胃散">
            </a>
          </div><!-- /.swiper-slide -->
          <div class="swiper-slide">
            <a href="http://allwomen.jp/index.html" target="_blank" rel="noopener" class="c-h-fade">
              <img src="/assets/images/bnr/bnr-allwoman.jpg"
                   srcset="/assets/images/bnr/bnr-allwoman.jpg 1x ,
                           /assets/images/bnr/bnr-allwoman@2x.jpg 2x"
                   width="210" height="72" alt="バナー：しきゅうのお知らせ 子宮頸がん情報">
            </a>
          </div><!-- /.swiper-slide -->
          <div class="swiper-slide">
            <a href="https://page.line.me/kkt-tv" target="_blank" rel="noopener" class="c-h-fade">
              <img src="/assets/images/bnr/bnr-line.jpg"
                   srcset="/assets/images/bnr/bnr-line.jpg 1x ,
                           /assets/images/bnr/bnr-line@2x.jpg 2x"
                   width="210" height="72" alt="バナー：KKT公式LINE">
            </a>
          </div><!-- /.swiper-slide -->
          <div class="swiper-slide">
            <a href="http://www.japa.org/" target="_blank" rel="noopener" class="c-h-fade">
              <img src="/assets/images/bnr/bnr-jseijinbyo.jpg"
                   srcset="/assets/images/bnr/bnr-jseijinbyo.jpg 1x ,
                           /assets/images/bnr/bnr-jseijinbyo@2x.jpg 2x"
                   width="210" height="72" alt="バナー：日本成人病予防協会">
            </a>
          </div><!-- /.swiper-slide -->
          <div class="swiper-slide">
            <a href="http://www.med.or.jp/99/index.html" target="_blank" rel="noopener" class="c-h-fade">
              <img src="/assets/images/bnr/bnr-qqsoseihou.jpg"
                   srcset="/assets/images/bnr/bnr-qqsoseihou.jpg 1x ,
                           /assets/images/bnr/bnr-qqsoseihou@2x.jpg 2x"
                   width="210" height="72" alt="バナー：日本医師会　救急蘇生法">
            </a>
          </div><!-- /.swiper-slide -->
        </div><!-- /.swiper-wrapper -->

        <div class="swiper-button-next  swiper-button-white"></div>
        <div class="swiper-button-prev  swiper-button-white"></div>
      </div><!-- /.swiper-container -->
    </div><!-- /.p-swiper__inner -->
  </div><!-- /.p-swiper -->
</div>
```
*/
.p-swiper {
  position: relative;
  width: 670px;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.p-swiper.p-swiper--max {
  width: 100%;
}

.p-swiper.p-swiper--auto {
  width: auto;
}

.p-swiper [class].swiper-button-disabled {
  display: none !important;
}

.p-swiper__skin {
  overflow: hidden;
  padding: 5px;
  margin: -5px;
  display: block;
}

.p-swiper [class].swiper-slide {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  letter-spacing: normal;
  min-height: 1px;
  position: relative;
  vertical-align: top;
  word-spacing: normal;
  height: auto;
}

.p-swiper [class].swiper-slide > * {
  width: 100%;
}

.p-swiper__wrapper {
  overflow: hidden;
}

.p-swiper [class].swiper-container {
  overflow: visible;
}

.p-swiper.p-swiper--hidden [class].swiper-container {
  overflow: hidden;
}

.p-swiper [class].swiper-pagination {
  font-size: 0;
  bottom: 20px;
}

.p-swiper [class].swiper-pagination-bullet {
  background-color: transparent;
  border-radius: 0;
  height: auto;
  margin: 0;
  opacity: 1;
  
  overflow: hidden;
  width: auto;
  padding-left: 5px;
  padding-right: 5px;
}

.p-swiper [class].swiper-pagination-bullet:before {
  background-color: #cccccc;
  content: "";
  display: block;
  height: 12px;
  width: 12px;
  border-radius: 50%;
  border: 1px solid #cccccc;
}

.p-swiper [class].swiper-pagination-bullet[class].swiper-pagination-bullet-active {
  background-color: transparent;
}

.p-swiper [class].swiper-pagination-bullet[class].swiper-pagination-bullet-active:before {
  background-color: #ffcc33;
}

.p-swiper__pagination[class].swiper-pagination {
  bottom: 10px;
}

.p-swiper__pagination [class].swiper-pagination-bullet[class].swiper-pagination-bullet-active:before {
  background-color: #009944;
  border: 1px solid #009944;
}

.p-swiper [class].swiper-button-next,
.p-swiper [class].swiper-button-prev {
  top: 45%;
  border-radius: 8px;
  width: 40px;
  height: 60px;
  background-size: 7px 14px;
  background-image: none;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.5);
  -webkit-transition: background-color .5s ease 0s,
 box-shadow .5s ease 0s;
  transition: background-color .5s ease 0s,
 box-shadow .5s ease 0s;
}

.p-swiper [class].swiper-button-next:before,
.p-swiper [class].swiper-button-prev:before {
  line-height: 1;
  font-size: 18px;
  font-size: 1.8rem;
  font-family: "FontAwesome";
  position: absolute;
  font-smoothing: antialiased;
  -webkit-font-smoothing: antialiased;
  top: 50%;
  display: inline-block;
  margin-top: -.5em;
  color: #fff;
}

html:not(.sp) .p-swiper [class].swiper-button-next:hover, html:not(.sp) .p-swiper [class].swiper-button-next:focus, html:not(.sp)
.p-swiper [class].swiper-button-prev:hover, html:not(.sp)
.p-swiper [class].swiper-button-prev:focus {
  background-color: #ff6666;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
}

.p-swiper [class].swiper-button-prev {
  left: -20px;
  z-index: 2;
}

.p-swiper [class].swiper-button-prev:before {
  content: "\f104";
  left: 42%;
}

.p-swiper [class].swiper-button-next {
  right: -20px;
  z-index: 2;
}

.p-swiper [class].swiper-button-next:before {
  content: "\f105";
  right: 39%;
}

.p-swiper.p-swiper--buttom-over [class].swiper-button-prev {
  left: -55px;
}

.p-swiper.p-swiper--buttom-over [class].swiper-button-next {
  right: -55px;
}

.p-swiper.p-swiper--buttom-over [class].swiper-container.swiper-container-rtl [class].swiper-button-prev {
  right: -55px;
  left: auto;
}

.p-swiper.p-swiper--buttom-over [class].swiper-container.swiper-container-rtl [class].swiper-button-next {
  left: -55px;
  right: auto;
}

.p-swiper [class].swiper-container.swiper-container-rtl table {
  direction: ltr;
}

.p-swiper [class].swiper-container.swiper-container-rtl [class].swiper-button-prev {
  right: -20px;
  left: auto;
}

.p-swiper [class].swiper-container.swiper-container-rtl [class].swiper-button-prev:before {
  content: "\f105";
  left: 39%;
  right: auto;
}

.p-swiper [class].swiper-container.swiper-container-rtl [class].swiper-button-next {
  left: -20px;
  right: auto;
}

.p-swiper [class].swiper-container.swiper-container-rtl [class].swiper-button-next:before {
  content: "\f104";
  right: 42%;
  left: auto;
}

.p-swiper.p-swiper--simple [class].swiper-button-next,
.p-swiper.p-swiper--simple [class].swiper-button-prev {
  top: 50%;
}

.p-swiper.p-swiper--simple [class].swiper-button-prev {
  left: -70px;
}

.p-swiper.p-swiper--simple [class].swiper-button-next {
  right: -70px;
}

.p-swiper.p-swiper--simple [class].swiper-container.swiper-container-rtl [class].swiper-button-prev {
  right: -70px;
  left: auto;
}

.p-swiper.p-swiper--simple [class].swiper-container.swiper-container-rtl [class].swiper-button-next {
  left: -70px;
  right: auto;
}

.p-swiper .js-swiper-2col {
  max-width: 790px;
}

/*
#styleguide
名称：タブUI
class：tab


■仕様
・aタグとdata-tabui="tabpanel"のidを紐付けて動作します
・data-tabui="tabpanel"内でswiper使えます
・WAI-ARIAやってみました


@カテゴリー tab
@トリガー data-select

```
<div data-tabui="container">
  <div class="p-tablist">
    <div class="p-tablist__inner">
      <ul data-tabui="tablist" class="p-tablist__nav">
        <li class="p-tablist__col">
          <a data-anchor="false" href="#id01" class="p-tablist__link">id01</a>
        </li>
        <li class="p-tablist__col">
          <a data-anchor="false" href="#id02" class="p-tablist__link">id02</a>
        </li>
        <li class="p-tablist__col">
          <a data-anchor="false" href="#id03" class="p-tablist__link">id03</a>
        </li>
        <li class="p-tablist__col">
          <a data-anchor="false" href="#id04" class="p-tablist__link">id04</a>
        </li>
        <li class="p-tablist__col">
          <a data-anchor="false" href="#id05" class="p-tablist__link">id05</a>
        </li>
      </ul>
    </div>
  </div>

  <div data-tabui="contents" class="p-tabcontent">
    <div id="id01" data-tabui="tabpanel">
      <h1>id01</h1>
    </div>
    <div id="id02" data-tabui="tabpanel">
      <h1>id02</h1>
    </div>
    <div id="id03" data-tabui="tabpanel">
      <h1>id03</h1>
    </div>
    <div id="id04" data-tabui="tabpanel">
      <h1>id04</h1>
    </div>
    <div id="id05" data-tabui="tabpanel">
      <h1>id05</h1>
    </div>
  </div><!-- /data-tabui="contents" -->
</div><!-- /data-tabui="container" -->
```
*/
.p-tablist {
  border-bottom: 2px solid #009944;
  text-align: center;
  font-weight: bold;
}

.p-tablist.is-active .p-tablist__selecthead:before {
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg);
}

.p-tablist__selecthead {
  color: #ffffff;
  display: block;
  width: 100%;
  text-align: left;
  line-height: 1.4;
  padding: 17px 36px 17px 10px;
  background-color: #009944;
  position: relative;
}

.p-tablist__selecthead:before {
  -webkit-transition: -webkit-transform .5s ease 0s;
  transition: -webkit-transform .5s ease 0s;
  transition: transform .5s ease 0s;
  transition: transform .5s ease 0s, -webkit-transform .5s ease 0s;
  content: "\f055";
  font-family: "FontAwesome";
  -webkit-transform-origin: center;
      -ms-transform-origin: center;
          transform-origin: center;
  font-size: 16px;
  font-size: 1.6rem;
  display: block;
  position: absolute;
  top: 50%;
  margin-top: -.5em;
  right: 10px;
  line-height: 1;
}

.p-tablist__inner {
  display: inline-block;
  padding-left: 15px;
  padding-right: 15px;
  max-width: 100%;
  vertical-align: top;
}

.p-tablist__nav {
  list-style: none;
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 0;
  width: 100%;
}

.p-tablist__nav > .p-tablist__col {
  font-family: "YakuHanJP", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴシック Pro", Meiryo, "メイリオ", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  display: inline-block;
  vertical-align: bottom;
  padding: 0 5px;
  margin: 0;
}

.p-tablist__link {
  display: block;
  border-radius: 8px 8px 0 0;
  border: 2px solid #009944;
  border-bottom: none;
  background-color: #ffffff;
  text-align: center;
  color: #009944;
  line-height: 1;
  padding: 10px 5px;
  text-decoration: none !important;
  -webkit-transition: background-color ease .45s 0s, color ease .45s 0s;
  transition: background-color ease .45s 0s, color ease .45s 0s;
}

.p-tablist__link.is-active {
  background-color: #009944;
  color: #ffffff;
}

html:not(.sp) .p-tablist__link:not(.is-active):hover {
  text-decoration: none;
  background-color: #f5f5f5;
}

.p-tabcontent {
  padding-top: 20px;
  padding-bottom: 40px;
}

.p-tabcontent__main {
  margin-top: 15px;
}

/*
#styleguide
名称：テーブル（プロフィール）
class：table-profile

 c- 多様

@todo
@カテゴリー table
@使用頻度 ★★☆


```
<table class="p-table-info  c-table  c-talbe--md-row">
  <caption class="p-table-info__title">
    <i class="fa  fa-stethoscope  u-mr-xxs  u-blue" aria-hidden="true"></i>プロフィール・経歴
  </caption>
  <tbody>
    <tr>
      <th>担当分野</th>
      <td>整形外科／リハビリテーション科</td>
    </tr>
    <tr>
      <th>専門医</th>
      <td>日本救急医学会 救急科専門医／日本外科学会 外科専門医</td>
    </tr>
  </tbody>
</table>
```
*/
.p-table-info {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  border: 0;
  font-size: 14px;
  font-size: 1.4rem;
}

.p-table-info__title {
  text-align: left;
  font-weight: bold;
  font-size: 14px;
  font-size: 1.4rem;
  padding-bottom: 5px;
  padding-top: 5px;
}

.p-table-info th, .p-table-info td {
  background-color: #fff;
  vertical-align: middle;
  padding-top: .4em;
  padding-bottom: .4em;
  font-weight: normal;
  border-top: 1px solid #cccccc;
  padding-left: 15px;
  padding-right: 15px;
}

.p-table-info tr:last-child th, .p-table-info tr:last-child td {
  border-bottom: 1px solid #cccccc;
}

.p-table-info th {
  text-align: center;
  background-color: #f5f5f5;
  width: 100px;
}

.p-table-price {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  border: 0;
  font-size: 14px;
  font-size: 1.4rem;
}

.p-table-price th, .p-table-price td {
  font-weight: normal;
  text-align: center;
  border: 1px solid #cccccc;
  padding-top: .4em;
  padding-bottom: .4em;
  padding-left: 15px;
  padding-right: 15px;
  vertical-align: middle;
}

.p-table-price th {
  background-color: #1886ba;
  color: #ffffff;
}

.p-table-price th:first-child {
  width: 200px;
}

.p-table-standard {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  border: 0;
  font-size: 14px;
  font-size: 1.4rem;
}

.p-table-standard thead th {
  background-color: #009944;
  color: #ffffff;
}

.p-table-standard th, .p-table-standard td {
  text-align: center;
  vertical-align: middle;
  border: 1px solid #cccccc;
  padding-top: .4em;
  padding-bottom: .4em;
  padding-left: 15px;
  padding-right: 15px;
}

.p-table-standard tbody th, .p-table-standard tbody td {
  background-color: #ffffff;
}

.p-table-standard tbody tr:nth-child(2n) th, .p-table-standard tbody tr:nth-child(2n) td {
  background-color: #fffde5;
}

.c-table-scroll .p-table-standard tbody th, .c-table-scroll .p-table-standard tbody td {
  background-color: transparent;
}

.c-table-scroll .p-table-standard tbody tr:nth-child(2n) th, .c-table-scroll .p-table-standard tbody tr:nth-child(2n) td {
  background-color: rgba(255, 236, 0, 0.1);
}

/*
#styleguide
名称：テーブル：バックナンバー
class：table-backnumber

コメントなし

@カテゴリー table

```
<table class="p-table-backnumber  c-table">
  <caption>2016年のバックナンバー</caption>
  <tbody>
    <tr>
      <td><a href=""><span>1月</span></a></td>
      <td><a href=""><span>2月</span></a></td>
      <td><a href=""><span>3月</span></a></td>
    </tr>
    <tr>
      <td><a href=""><span>4月</span></a></td>
      <td><a href=""><span>5月</span></a></td>
      <td><a href=""><span>6月</span></a></td>
    </tr>
    <tr>
      <td><a href=""><span>7月</span></a></td>
      <td><a href=""><span>8月</span></a></td>
      <td><a href=""><span>9月</span></a></td>
    </tr>
    <tr>
      <td><a href=""><span>10月</span></a></td>
      <td><a href=""><span>11月</span></a></td>
      <td><a href=""><span>12月</span></a></td>
    </tr>
  </tbody>
</table><!-- /.p-table-backnumber -->
```
*/
.p-table-backnumber {
  box-sizing: border-box;
  text-align: center;
  table-layout: fixed;
  margin-left: auto;
  margin-right: auto;
  font-size: 18px;
  font-size: 1.8rem;
  font-weight: bold;
}

.p-table-backnumber caption {
  background-color: #009944;
  color: #ffffff;
  line-height: 1.4;
  font-size: 18px;
  font-size: 1.8rem;
  padding: 8px 10px 10px 10px;
}

.p-table-backnumber tbody {
  line-height: 1.4;
}

.p-table-backnumber tbody th, .p-table-backnumber tbody td {
  border: 1px solid #999999;
  vertical-align: middle;
  color: #ccc;
}

.p-table-backnumber tbody th > *, .p-table-backnumber tbody td > * {
  display: block;
  padding: 8px 10px 10px 10px;
  width: 100%;
}

.p-table-backnumber tbody a {
  -webkit-transition: color .45s ease 0s, background-color .45s ease 0s;
  transition: color .45s ease 0s, background-color .45s ease 0s;
  text-decoration: none;
  color: #009944;
}

.p-table-backnumber tbody a > span {
  display: inline-block;
  position: relative;
}

.p-table-backnumber tbody a > span:before {
  content: " ";
  display: block;
  width: 100%;
  height: 2px;
  background-color: #b5d3bc;
  left: 0;
  position: absolute;
  bottom: -2px;
}

html:not(.sp) .p-table-backnumber tbody a:hover, html:not(.sp) .p-table-backnumber tbody a:focus {
  background-color: rgba(181, 211, 188, 0.2);
  text-decoration: none;
}

.p-table-cover-graph > table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  border: 0;
  text-align: center;
  font-size: 14px;
  font-size: 1.4rem;
}

.p-table-cover-graph > table th, .p-table-cover-graph > table td {
  border: 1px solid #cccccc;
  vertical-align: middle;
  padding-top: .4em;
  padding-bottom: .4em;
  font-weight: normal;
  padding-left: 5px;
  padding-right: 5px;
}

.p-table-cover-graph > table .p-table-cover-graph__thead th {
  background-color: #009944;
  color: #ffffff;
}

/*
#styleguide
名称：タグ
class：tag

色は u- でOK

@カテゴリー tag
@使用頻度 ★★☆
@発展途上

```
<span class="p-tag">
  理事長
</span>

<span class="p-tag  u-bg-aqua">
  理事長
</span>

<span class="p-tag  u-bg-point">
  理事長
</span>
```
*/
.p-tag {
  font-size: 12px;
  font-size: 1.2rem;
  line-height: 1;
  display: inline-block;
  background-color: #009944;
  color: #ffffff;
  text-align: center;
  padding: 0.33333em 1.66667em;
  border-radius: 1.66667em;
}

.p-tag.p-tag--outline {
  color: #333333;
  padding: 5px;
  width: 145px;
  border: 1px solid #cccccc;
  background-color: #fff;
}

/*
 * @theme
 * 説明：テーマ切替
 */
.p-theme-bg-drtvtan {
  background-color: #ddedf3;
  background-image: url("../images/bg/bg-dr-tvtan-lightblue.jpg");
  background-position: left -15px;
  background-repeat: repeat;
  background-size: 240px;
}

.p-theme-bg-drtvtan [class].p-heading-underline {
  color: #1886ba;
}

.p-theme-bg-drtvtan [class].p-heading-underline:before {
  background-color: #1886ba;
}

.p-theme-bg-drtvtan [class].p-heading-underline:after {
  background-image: url("../images/bg/line-shash-gray.png");
  background-position: left top;
  background-repeat: repeat-x;
  background-size: 3px;
}

.p-theme-bg-drtvtan.p-theme-bg-drtvtan--deep {
  background-color: #1886b9;
  background-image: url("../images/bg/bg-dr-tvtan-blue.jpg");
  background-position: left -15px;
  background-repeat: repeat;
  background-size: 240px;
}

.p-theme-bg-drtvtan.p-theme-bg-drtvtan--deep [class].p-heading-underline {
  color: #ffffff;
}

.p-theme-bg-drtvtan.p-theme-bg-drtvtan--deep [class].p-heading-underline:before {
  background-color: #ffffff;
}

.p-theme-bg-drtvtan.p-theme-bg-drtvtan--deep [class].p-heading-underline:after {
  background-image: url("../images/bg/line-shash.png");
  background-position: left top;
  background-repeat: repeat-x;
  background-size: 3px;
}

/*
 * @theme-green
 * 説明：テーマ切替　青
 */
.p-theme-blue [class].p-tablist {
  border-bottom-color: #1886ba;
}

.p-theme-blue [class].p-tablist__selecthead {
  background-color: #1886ba;
}

.p-theme-blue [class].p-tablist__link {
  border-color: #1886ba;
  color: #1886ba;
}

.p-theme-blue [class].p-tablist__link.is-active {
  color: #ffffff;
  background-color: #1886ba;
}

.p-theme-blue [class].p-page-header {
  background-color: #1886ba;
}

.p-theme-blue [class].p-page-header [class].p-heading-hospitalname {
  color: #ffffff !important;
  fill: #ffffff !important;
}

.p-theme-blue [class].p-heading-underline {
  color: #1886ba;
}

.p-theme-blue [class].p-heading-underline:before {
  background-color: #1886ba;
}

.p-theme-blue [class].p-btn.p-btn--theme {
  border-color: #1886ba;
  color: #1886ba;
}

/*
 * @theme-green
 * 説明：テーマ切替　緑
 */
.p-theme-green [class].p-page-header {
  background-color: #009944;
}

.p-theme-green [class].p-page-header [class].p-heading-hospitalname {
  color: #ffffff !important;
  fill: #ffffff !important;
}

.p-theme-green [class].p-heading-direct,
.p-theme-green [class].p-heading-direct-text {
  color: #009944;
}

.p-theme-green [class].p-btn.p-btn--theme {
  border-color: #009944;
  color: #009944;
}

.p-theme-green [class].p-label-blank.p-label-blank--mirror {
  background-color: transparent;
}

.p-theme-green [class].p-label-blank.p-label-blank--mirror .p-label-blank__tag {
  color: #009944;
}

.p-theme-green [class].p-nav__link.is-current {
  color: #009944;
}

.p-theme-green [class].p-heading-underline {
  color: #009944;
}

.p-theme-green [class].p-heading-underline:before {
  background-color: #009944;
}

.p-theme-green [class].p-heading-hospitalname {
  color: #009944 !important;
  fill: #009944 !important;
}

.p-theme-green [class].p-info-number [class].p-tag {
  background-color: #009944 !important;
}

.p-theme-green .l-area [class].p-table-info [class].fa {
  color: #009944 !important;
  fill: #009944 !important;
}

.p-theme-green .l-area [class].u-anchor,
.p-theme-green .l-area [class].u-anchor.u-blue {
  color: #009944 !important;
}

.p-theme-green .l-area [class].p-tag:not(.p-tag--outline) {
  background-color: #009944 !important;
}

.p-theme-green .l-area [class].p-name-dr__free:not(.p-name-dr__free--sub) {
  color: #009944;
}

.p-theme-green .l-area [class].p-list-icon li:before {
  color: #009944;
}

.p-theme-green .l-area .p-theme-bg-drtvtan {
  background-color: #e0ebdf;
  background-image: url("../images/bg/bg-dr-tvtan-lightgreen.jpg");
  background-position: left -15px;
  background-repeat: repeat;
  background-size: 240px;
}

.p-theme-green .l-area .p-theme-bg-drtvtan.p-theme-bg-drtvtan--deep {
  background-color: #009944;
  background-image: url("../images/bg/bg-dr-tvtan-green.jpg");
  background-position: left -15px;
  background-repeat: repeat;
  background-size: 240px;
}

.p-theme-green .l-area .p-theme-bg-drtvtan [class].p-btn {
  border: 1px solid #009944;
  color: #009944;
}

.p-theme-green .l-area [class].p-table-price th {
  background-color: #009944;
}

/*
 * @theme-pink
 * 説明：テーマ切替　ピンク
 */
.p-theme-pink [class].p-page-header {
  background-color: #e76666;
}

.p-theme-pink [class].p-page-header [class].p-heading-hospitalname {
  color: #ffffff !important;
  fill: #ffffff !important;
}

.p-theme-pink [class].p-heading-direct,
.p-theme-pink [class].p-heading-direct-text {
  color: #e76666;
}

.p-theme-pink [class].p-heading-direct,
.p-theme-pink [class].p-heading-direct-text {
  color: #e76666;
}

.p-theme-pink [class].p-tablist {
  border-bottom-color: #e76666;
}

.p-theme-pink [class].p-tablist__selecthead {
  background-color: #e76666;
}

.p-theme-pink [class].p-tablist__link {
  border-color: #e76666;
  color: #e76666;
}

.p-theme-pink [class].p-tablist__link.is-active {
  color: #ffffff;
  background-color: #e76666;
}

.p-theme-pink [class].p-label-blank.p-label-blank--mirror {
  background-color: transparent;
}

.p-theme-pink [class].p-label-blank.p-label-blank--mirror .p-label-blank__tag {
  color: #e76666;
}

.p-theme-pink [class].p-nav__link.is-current {
  color: #e76666;
}

.p-theme-pink [class].p-heading-underline {
  color: #e76666;
}

.p-theme-pink [class].p-heading-underline:before {
  background-color: #e76666;
}

.p-theme-pink [class].p-heading-hospitalname {
  color: #e76666 !important;
  fill: #e76666 !important;
}

.p-theme-pink [class].p-info-number [class].p-tag {
  background-color: #e76666 !important;
}

.p-theme-pink [class].l-area [class].p-table-info [class].fa {
  color: #e76666 !important;
  fill: #e76666 !important;
}

.p-theme-pink [class].l-area [class].u-anchor,
.p-theme-pink [class].l-area [class].u-anchor.u-blue {
  color: #e76666 !important;
}

.p-theme-pink [class].l-area [class].p-tag:not(.p-tag--outline) {
  background-color: #e76666 !important;
}

.p-theme-pink [class].l-area [class].p-name-dr__free:not(.p-name-dr__free--sub) {
  color: #e76666;
}

.p-theme-pink [class].l-area [class].p-list-icon li:before {
  color: #e76666;
}

.p-theme-pink [class].l-area .p-theme-bg-drtvtan {
  background-color: #fbe8e6;
  background-image: url("../images/bg/bg-dr-tvtan-pink.jpg");
  background-position: left -15px;
  background-repeat: repeat;
  background-size: 240px;
}

.p-theme-pink [class].l-area .p-theme-bg-drtvtan.p-theme-bg-drtvtan--deep {
  background-color: #e76666;
  background-image: url("../images/bg/bg-dr-tvtan-pink-deep.jpg");
  background-position: left -15px;
  background-repeat: repeat;
  background-size: 240px;
}

.p-theme-pink [class].l-area .p-theme-bg-drtvtan [class].p-btn {
  border: 1px solid #e76666;
  color: #e76666;
}

.p-theme-pink [class].l-area [class].p-table-price th {
  background-color: #e76666;
}

/*
 * @theme-yellow
 * 説明：テーマ切替　黄色
 */
.p-theme-yellow [class].p-page-header {
  background-color: #ff9900;
}

.p-theme-yellow [class].p-page-header [class].p-heading-hospitalname {
  color: #ffffff !important;
  fill: #ffffff !important;
}

.p-theme-yellow [class].p-heading-direct,
.p-theme-yellow [class].p-heading-direct-text {
  color: #ff9900;
}

.p-theme-yellow [class].p-heading-direct,
.p-theme-yellow [class].p-heading-direct-text {
  color: #ff9900;
}

.p-theme-yellow [class].p-label-blank.p-label-blank--mirror {
  background-color: transparent;
}

.p-theme-yellow [class].p-label-blank.p-label-blank--mirror .p-label-blank__tag {
  color: #ff9900;
}

.p-theme-yellow [class].p-tablist {
  border-bottom-color: #ff9900;
}

.p-theme-yellow [class].p-tablist__selecthead {
  background-color: #ff9900;
}

.p-theme-yellow [class].p-tablist__link {
  border-color: #ff9900;
  color: #ff9900;
}

.p-theme-yellow [class].p-tablist__link.is-active {
  color: #ffffff;
  background-color: #ff9900;
}

.p-theme-yellow [class].p-nav__link.is-current {
  color: #ff9900;
}

.p-theme-yellow [class].p-heading-underline {
  color: #ff9900;
}

.p-theme-yellow [class].p-heading-underline:before {
  background-color: #ff9900;
}

.p-theme-yellow [class].p-heading-hospitalname {
  color: #ff9900 !important;
  fill: #ff9900 !important;
}

.p-theme-yellow [class].p-info-number [class].p-tag {
  background-color: #ff9900 !important;
}

.p-theme-yellow [class].l-area [class].p-table-info [class].fa {
  color: #ff9900 !important;
  fill: #ff9900 !important;
}

.p-theme-yellow [class].l-area [class].u-anchor,
.p-theme-yellow [class].l-area [class].u-anchor.u-blue {
  color: #ff9900 !important;
}

.p-theme-yellow [class].l-area [class].p-tag:not(.p-tag--outline) {
  background-color: #ff9900 !important;
}

.p-theme-yellow [class].l-area [class].p-name-dr__free:not(.p-name-dr__free--sub) {
  color: #ff9900;
}

.p-theme-yellow [class].l-area [class].p-list-icon li:before {
  color: #ff9900;
}

.p-theme-yellow [class].l-area .p-theme-bg-drtvtan {
  background-color: #fffde5;
  background-image: url("../images/bg/bg-dr-tvtan-yellow.jpg");
  background-position: left -15px;
  background-repeat: repeat;
  background-size: 240px;
}

.p-theme-yellow [class].l-area .p-theme-bg-drtvtan.p-theme-bg-drtvtan--deep {
  background-color: #ff9900;
  background-image: url("../images/bg/bg-dr-tvtan-yellow-deep.jpg");
  background-position: left -15px;
  background-repeat: repeat;
  background-size: 240px;
}

.p-theme-yellow [class].l-area .p-theme-bg-drtvtan [class].p-btn {
  border: 1px solid #ff9900;
  color: #ff9900;
}

.p-theme-yellow [class].l-area [class].p-table-price th {
  background-color: #ff9900;
}

/*
 * @theme-white
 * 説明：テーマ切替　白
 */
.p-theme-white [class].p-page-header {
  border: 1px solid #cccccc;
  background-color: transparent;
}

.p-theme-white [class].p-heading-direct,
.p-theme-white [class].p-heading-direct-text {
  color: #009944;
}

.p-theme-white [class].p-label-blank {
  border: 1px solid #cccccc;
}

.p-theme-white [class].p-label-blank.p-label-blank--mirror {
  color: #009944;
  background-color: transparent;
}

.p-theme-white [class].p-label-blank.p-label-blank--mirror .p-label-blank__tag {
  color: #009944;
}

.p-theme-white [class].p-nav__link {
  font-weight: bold;
  color: #009944;
}

.p-theme-white [class].p-nav__link.is-current {
  border-top: 1px solid #cccccc;
  border-right: 1px solid #cccccc;
  border-left: 1px solid #cccccc;
}

.p-theme-white [class].p-heading-underline {
  color: #009944;
}

.p-theme-white [class].p-heading-underline:before {
  background-color: #009944;
}

.p-theme-white [class].p-heading-hospitalname {
  color: #009944 !important;
  fill: #009944 !important;
}

.p-theme-white [class].p-info-number [class].p-tag {
  background-color: #009944 !important;
}

.p-theme-white .l-area [class].p-table-info [class].fa {
  color: #009944 !important;
  fill: #009944 !important;
}

.p-theme-white .l-area [class].u-anchor,
.p-theme-white .l-area [class].u-anchor.u-blue {
  color: #009944 !important;
}

.p-theme-white .l-area [class].p-tag:not(.p-tag--outline) {
  background-color: #ffffff !important;
  border: 1px solid #cccccc;
  color: #333333;
}

.p-theme-white .l-area [class].p-name-dr__free:not(.p-name-dr__free--sub) {
  color: #009944;
}

.p-theme-white .l-area [class].p-list-icon li:before {
  color: #009944;
}

.p-theme-white .l-area [class].p-article-stick__link {
  border: 1px solid #cccccc;
}

.p-theme-white .l-area [class].p-heading-underline {
  color: #009944;
}

.p-theme-white .l-area [class].p-heading-underline:before {
  background-color: #cccccc;
}

.p-theme-white .l-area [class].p-heading-underline:after {
  background-image: url("../images/bg/line-shash-gray.png");
  background-position: left top;
  background-repeat: repeat-x;
  background-size: 3px;
}

.p-theme-white .l-area .p-theme-bg-drtvtan {
  background-color: #ffffff;
  background-image: none !important;
}

.p-theme-white .l-area .p-theme-bg-drtvtan [class].p-btn {
  border: 1px solid #009944;
  color: #009944;
}

.p-theme-white .l-area [class].p-table-price th {
  background-color: #009944;
}

/*
#styleguide
名称：サムネイル画像
class：thumbnail-pic

画像を角丸（16px）にできます

@カテゴリー thumbnail
@使用頻度 ★☆☆

```
<figure class="p-thumbnail-pic">
  <img src="../../../assets/images/sample/sample-hospital-kinou.jpg"
       srcset="../../../assets/images/sample/sample-hospital-kinou.jpg 1x ,
               ../../../assets/images/sample/sample-hospital-kinou@2x.jpg 2x" width="570" height="360" alt="イメージ画像：病院外観">
</figure>
```
*/
.p-thumbnail-pic {
  display: inline-block;
  overflow: hidden;
  border-radius: 16px;
}

/*
js-ticker: ( ticker )
*/
.p-ticker-group {
  margin-top: 30px;
  margin-bottom: 30px;
  text-align: center;
  overflow: hidden;
}

.p-ticker-group .p-ticker {
  display: inline-block;
  width: auto;
}

.p-ticker {
  margin: 0 auto;
  text-align: center;
  position: relative;
  display: block;
}

.p-ticker__list {
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
  overflow: hidden;
}

.p-ticker__list:before, .p-ticker__list:after {
  content: "";
  display: table;
}

.p-ticker__list:after {
  clear: both;
}

.p-ticker__col {
  float: left;
  width: 270px;
  margin-left: 15px;
  margin-right: 15px;
  text-align: center;
}

.p-ticker__item {
  width: 100%;
}

/**
 * CSS style for carouselTicker
 **/
.carouselTicker__list {
  overflow: hidden;
}

.carouselTicker__list:before, .carouselTicker__list:after {
  content: "";
  display: table;
}

.carouselTicker__list:after {
  clear: both;
}

.carouselTicker__item {
  float: left;
  width: 270px;
  text-align: center;
}

.carouselTicker__loader {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

/**
 * CSS style for vertical direction
 **/
.carouselTicker_vertical .carouselTicker__list {
  margin: 0;
}

.carouselTicker_vertical .carouselTicker__item {
  text-align: center;
}

/*
 * Dr.テレビたん アイコン
 */
.p-tvtan-search {
  position: relative;
}

.p-tvtan-search:before {
  content: " ";
  position: absolute;
  top: -24px;
  right: 78px;
  display: block;
  background-image: url("../images/common/h-tvtan-state-searching.png");
  background-repeat: no-repeat;
  background-position: 0 0;
  width: 110px;
  height: 85px;
  background-size: 110px 85px;
}

.p-tvtan-stick {
  position: relative;
}

.p-tvtan-stick:after {
  content: " ";
  display: block;
  background-image: url(../images/sprite.png?1588222826014);
  background-position: -246px -142px;
  width: 30px;
  height: 25px;
  position: absolute;
  right: 30px;
  top: -10px;
}

.js-mvMax .p-season__wood.p-season__wood--left {
  left: -200px;
}

.js-mvMax .p-season__wood.p-season__wood--right {
  right: -200px;
}

html.animation-start-mv .js-mvMax [class].p-article-info,
html.animation-start-mv .js-mvMax [id]#carousel,
html.complete .js-mvMax [class].p-article-info,
html.complete .js-mvMax [id]#carousel {
  opacity: 1;
  
  visibility: visible;
  -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
          transform: translateY(0);
}

html.animation-start-mv .js-mvMax [class].p-article-info,
html.complete .js-mvMax [class].p-article-info {
  -webkit-transition: opacity 1s ease .3s, visibility 1s ease .3s, -webkit-transform 1s ease .3s;
  transition: opacity 1s ease .3s, visibility 1s ease .3s, -webkit-transform 1s ease .3s;
  transition: opacity 1s ease .3s, visibility 1s ease .3s, transform 1s ease .3s;
  transition: opacity 1s ease .3s, visibility 1s ease .3s, transform 1s ease .3s, -webkit-transform 1s ease .3s;
}

html.animation-start-mv .js-mvMax [id]#carousel,
html.complete .js-mvMax [id]#carousel {
  -webkit-transition: opacity 1s ease .9s, visibility 1s ease .9s, -webkit-transform 1s ease .9s;
  transition: opacity 1s ease .9s, visibility 1s ease .9s, -webkit-transform 1s ease .9s;
  transition: opacity 1s ease .9s, visibility 1s ease .9s, transform 1s ease .9s;
  transition: opacity 1s ease .9s, visibility 1s ease .9s, transform 1s ease .9s, -webkit-transform 1s ease .9s;
}

html.animation-start-mv .js-mvMax .p-season__wood.p-season__wood--left,
html.complete .js-mvMax .p-season__wood.p-season__wood--left {
  left: 0px;
}

html.animation-start-mv .js-mvMax .p-season__wood.p-season__wood--right,
html.complete .js-mvMax .p-season__wood.p-season__wood--right {
  right: 0px;
}

/*
 * 動画
 */
/*
#styleguide
名称：ビデオグ用
class：video

ビデオグ用videoテンプレートです。
メインビジュアルに使用しているため読み込みを早くするため画像を表示し
lity.jsと組み合わせてiframeをポップアップします。
|
画像取得はビデオグ側で画像を表示するためのURLがあるのでそれに
動画idを指定すると取得できます
ビデオグのサムネイル画像取得 兼 サイズ確認（現状アルファベット：m,o,s,u,v,x）<br>
URL:http://api.videog.jp/1/media/ここにID/thumbnails/files/現状アルファベット.jpg

@コンポーネント lity
@発展途上
@カテゴリー video
@使用頻度 ★☆☆
@--smart

```
<div class="p-video">
  <div class="p-video__inner">
    <a class="p-video__iframe" href="https://www.videog.jp/player/TamBkV9apO7Y" data-lity="data-lity" style="background-image: url( http://api.videog.jp/1/media/TamBkV9apO7Y/thumbnails/files/o.jpg )"></a>
    <div class="p-video__info">
      <span class="p-video__infoTag">
        メディカルリポート
      </span><div class="p-video__infoTitle">
        2集団感染する”はしか”とは～感染症から身を守るために～
      </div>
    </div>
  </div>
</div>

<div class="p-video  p-video--smart">
  <div class="p-video__inner">
    <a class="p-video__iframe" href="https://www.videog.jp/player/TamBkV9apO7Y" data-lity="data-lity" style="background-image: url( http://api.videog.jp/1/media/TamBkV9apO7Y/thumbnails/files/o.jpg )"></a>
    <div class="p-video__info">
      <span class="p-video__infoTag">
        メディカルリポート
      </span><div class="p-video__infoTitle">
        2集団感染する”はしか”とは～感染症から身を守るために～
      </div>
    </div>
  </div>
</div>
```
*/
.p-video {
  box-sizing: border-box;
  max-width: 670px;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}

.p-video.p-video--smart {
  max-width: 570px;
}

.p-video.p-video--smart .p-video__info {
  padding: 8px 20px 11px 20px;
}

.p-video.p-video--smart .p-video__infoTag {
  min-width: 120px;
  font-size: 12px;
  font-size: 1.2rem;
}

.p-video.p-video--smart .p-video__infoTitle {
  font-size: 14px;
  font-size: 1.4rem;
}

.p-video__inner {
  position: relative;
  z-index: 2;
  height: 0;
  overflow: hidden;
  padding-top: 56.25%;
  border-radius: 8px;
}

.p-video__iframe {
  z-index: -1;
  overflow: hidden;
  background-color: #f4f4f4;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: left top;
}

.p-video__iframe:before {
  content: "\f04b";
  font-family: "FontAwesome";
  display: block;
  width: 70px;
  height: 70px;
  font-size: 36px;
  font-size: 3.6rem;
  background-color: rgba(0, 0, 0, 0.7);
  color: #fff;
  text-align: center;
  line-height: 70px;
  position: absolute;
  top: 50%;
  left: 50%;
  font-smoothing: antialiased;
  -webkit-font-smoothing: antialiased;
  border-radius: 8px;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  -webkit-transition: background-color 0.45s ease 0s;
  transition: background-color 0.45s ease 0s;
}

html:not(.sp) .p-video__iframe:hover:before, html:not(.sp) .p-video__iframe:focus:before {
  text-decoration: none;
  background-color: #139ed5;
}

.p-video__iframe iframe {
  background-color: transparent;
  display: block;
  position: relative;
  z-index: 0;
  width: 100%;
  height: 100%;
}

.p-video__info {
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1;
  color: #fff;
  background-color: rgba(51, 51, 51, 0.85);
  padding: 12px 20px 15px 20px;
}

.p-video__infoTag {
  display: inline-block;
  line-height: 1;
  border-radius: 30px;
  border: 1px solid #fff;
  font-size: 14px;
  font-size: 1.4rem;
  padding: .5em 1em;
  font-weight: 700;
  text-align: center;
  background-color: #009944;
  vertical-align: middle;
  margin-right: 1em;
}

.p-video__infoTitle {
  line-height: 1.3;
  vertical-align: middle;
  display: inline-block;
  font-weight: 700;
}

/*
 * @config
 * 設定

// チェックボックス
<input type="checkbox" id="trigger-accessible" class="l-accessible">

// ヘッダー付属
.l-accessible-depend__bar

// ハンバーガーメニュー
<label for="trigger-accessible" class="p-accessible">
  <span class="p-accessible__text">MENU</span>
  <span class="p-accessible__line"></span>
</label>

// メニューラッパー
<div class="l-accessible-contents">
  <div class="l-accessible-contents__inner">
  	hoge
  </div><!-- /.l-accessible-contents__inner -->
</div><!-- /.l-accessible-contents -->

 */
.l-accessible-depend {
  overflow: hidden;
}

.l-accessible {
  display: none;
}

.l-accessible-contents__extend {
  display: none;
}

/*
 * ＠ハンバーガーメニュー ver1.0
 *
 * 拡張機能：なし
 * サイズ：50x50
 */
.l-accessible-trigger {
  display: none;
  z-index: 9;
  right: 0;
  top: 0;
  vertical-align: top;
  text-align: center;
  width: 60px;
  height: 60px;
  color: #fff;
  background-color: #009944;
  line-height: 1;
  -webkit-transition: box-shadow .35s ease-in-out .35s;
  transition: box-shadow .35s ease-in-out .35s;
  position: absolute;
}

.l-accessible-trigger__text {
  position: absolute;
  display: block;
  width: 100%;
  font-family: "Muli", sans-serif;
  font-weight: 700;
  font-size: 11px;
  font-size: 1.1rem;
  letter-spacing: 0.05em;
  bottom: 10px;
}

.l-accessible-trigger__text + .l-accessible-trigger__line {
  top: 22px;
}

.l-accessible-trigger__line {
  top: 50%;
  margin-top: -2px;
  left: 50%;
  margin-left: -15px;
  position: absolute;
  display: inline-block;
  width: 30px;
  height: 3px;
  border-radius: 2px;
  background-color: #fff;
  -webkit-transition: background-color .3s ease-in-out 0s;
  transition: background-color .3s ease-in-out 0s;
}

.l-accessible-trigger__line:before, .l-accessible-trigger__line:after {
  position: absolute;
  content: " ";
  display: inline-block;
  width: 100%;
  height: 100%;
  border-radius: 2px;
  background-color: #fff;
  left: 0;
  -webkit-transition: -webkit-transform .35s ease-in-out 0s;
  transition: -webkit-transform .35s ease-in-out 0s;
  transition: transform .35s ease-in-out 0s;
  transition: transform .35s ease-in-out 0s, -webkit-transform .35s ease-in-out 0s;
}

.l-accessible-trigger__line:before {
  top: -8px;
}

.l-accessible-trigger__line:after {
  top: 8px;
}

/*
 * ＠メニュー ver1.0
 *
 * グローバルメニューがメニューになることが多いので、タブレット幅からに制限
 * 拡張機能：なし
 * 動作順序
 */

/*
 * @トリガーの発火後
 *
 * <input type="checkbox" id="trigger-accessible" class="l-accessible">
 * <div class="l-accessible-depend"></div>
 */
[id="trigger-accessible"]:checked + .l-accessible-depend {
  width: 100%;
  /*
	 * メニュー動作
	 */
  /*
	 * ヘッダー
	 */
  /*
	 * ナビゲーション展開
	 */
}

[id="trigger-accessible"]:checked + .l-accessible-depend .l-accessible-trigger[for="trigger-accessible"] .l-accessible-trigger__line {
  background-color: transparent;
}

[id="trigger-accessible"]:checked + .l-accessible-depend .l-accessible-trigger[for="trigger-accessible"] .l-accessible-trigger__line:before {
  -webkit-transform: translateY(8px) rotate(135deg);
      -ms-transform: translateY(8px) rotate(135deg);
          transform: translateY(8px) rotate(135deg);
}

[id="trigger-accessible"]:checked + .l-accessible-depend .l-accessible-trigger[for="trigger-accessible"] .l-accessible-trigger__line:after {
  -webkit-transform: translateY(-8px) rotate(-135deg);
      -ms-transform: translateY(-8px) rotate(-135deg);
          transform: translateY(-8px) rotate(-135deg);
}

[id="trigger-accessible"]:checked + .l-accessible-depend .l-accessible-contents {
  height: 100%;
  opacity: 1;
  
}

[id="trigger-accessible"]:checked + .l-accessible-depend .l-accessible-contents__inner {
  opacity: 1;
  
}

/*
 * @ヘルパー
 * ヘッダーとメニューの重なり順などの関係について
 */

/*
 * @サイトユニーク
 * サイトごとに色が違うのでその辺を記述
 */

.l-footer-share {
  text-align: center;
  background-color: #eee;
}

.l-footer-share [class].p-caption {
  margin-bottom: 1.1em;
}

.l-footer-share__inner {
  z-index: 5;
  position: relative;
  width: 796px;
  max-width: 100%;
  padding-left: 15px;
  padding-right: 15px;
  margin-left: auto;
  margin-right: auto;
  padding-top: 20px;
  padding-bottom: 20px;
}

/*
 * サイトマップ部分
 */
.l-footer-contents {
  position: relative;
  z-index: 4;
  margin-top: -30px;
  color: #fff;
  font-family: "YakuHanJP", "Noto Sans Japanese", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴシック Pro", Meiryo, "メイリオ", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  position: relative;
}

.l-footer-contents__inner {
  display: block;
  margin-right: auto;
  margin-left: auto;
  padding-right: 15px;
  padding-left: 15px;
  max-width: 1200px;
  padding-top: 60px;
  padding-bottom: 55px;
}

.l-footer-contents:before, .l-footer-contents:after {
  content: " ";
  display: block;
  width: 100%;
  height: 30px;
  position: absolute;
}

.l-footer-contents:before {
  background-image: url("../images/common/footer-curv-top.png");
  background-position: center top;
  background-repeat: no-repeat;
  background-size: 100% 30px;
  top: 0;
}

.l-footer-contents:after {
  background-image: url("../images/common/footer-curv-bottom.png");
  background-position: center top;
  background-repeat: no-repeat;
  background-size: 100% 30px;
  bottom: 0;
}

.l-footer-contents .p-list a {
  border-radius: 5px;
  -webkit-transition: padding 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955) 0s, background-color 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955) 0s;
  transition: padding 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955) 0s, background-color 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955) 0s;
}

html:not(.sp) .l-footer-contents .p-list a:hover, html:not(.sp) .l-footer-contents .p-list a:focus {
  background-color: rgba(0, 0, 0, 0.1);
  padding-left: .5em;
  padding-right: .5em;
}

/*
 * その他。ロゴ、リンクなど
 */
.l-footer-sub {
  text-align: center;
}

.l-footer-sub__inner {
  padding-top: 8px;
  padding-bottom: 20px;
}

.l-footer-sub__logo {
  display: inline-block;
  vertical-align: middle;
  padding: 0 15px;
}

.l-footer-sub .p-copyright {
  font-size: 12px;
  font-size: 1.2rem;
  letter-spacing: 0.05em;
}

.l-footer-sub__nav {
  margin-top: 20px;
  margin-bottom: 15px;
  color: #009944;
  font-size: 14px;
  font-size: 1.4rem;
  letter-spacing: -0.03em;
}

.l-footer-sub__nav li {
  display: inline-block;
}

.l-header {
  position: relative;
  z-index: 4;
  padding-left: 15px;
  padding-right: 15px;
}

.l-header__inner {
  max-width: 1170px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.l-header__logo {
  font-size: 2em;
  width: 300px;
  margin-top: 0;
  margin-bottom: 0;
}

.l-header__area {
  display: table;
  width: 100%;
}

.l-header__areaCol {
  display: table-cell;
  vertical-align: top;
  width: 270px;
}

.l-header__areaCol[class].p-bnrarea {
  width: auto;
}

.l-header [class].p-search {
  margin-top: 25px;
}

.l-header [class].p-bnrarea {
  text-align: center;
  padding-left: 15px;
  padding-right: 15px;
  vertical-align: middle;
}

/*
#styleguide
情報掲載のお申し込みはこちら

ヘッダーの「情報掲載のお申し込みはこちら」部分

@deprecated
@非推奨
@todo
@your-attribute

```
<a href="<%- _root %>" class="p-appdocuments">
  <span class="fa  fa-t-document" aria-hidden="true"></span>
  情報掲載のお申し込みはこちら
</a><!-- /.p-appdocuments -->
```
*/
.p-appdocuments {
  display: inline-block;
  vertical-align: bottom;
  background-color: #009944;
  color: #fff;
  text-align: center;
  font-size: 15px;
  font-size: 1.5rem;
  width: 270px;
  max-width: 100%;
  padding-top: 7px;
  padding-bottom: 7px;
  border-radius: 0 0 8px 8px;
}

.p-appdocuments [class^="tv-"] {
  margin-right: 7px;
  display: inline-block;
  position: relative;
  bottom: -.15em;
  font-size: 1.2em;
}

html:not(.sp) .p-appdocuments:hover, html:not(.sp) .p-appdocuments:focus {
  text-decoration: none;
}

html:not(.sp) .p-appdocuments:hover .fa, html:not(.sp) .p-appdocuments:hover [class^="tv-"], html:not(.sp) .p-appdocuments:focus .fa, html:not(.sp) .p-appdocuments:focus [class^="tv-"] {
  -webkit-transform: scale(1.3) rotate(5deg);
      -ms-transform: scale(1.3) rotate(5deg);
          transform: scale(1.3) rotate(5deg);
  text-shadow: 1px 1px 0 rgba(85, 85, 85, 0.5);
}

/*
 * タブレットから表示
 */
.l-header__pr {
  background-color: #fefac1;
  padding-top: 5px;
  padding-bottom: 5px;
}

.l-header__pr .p-programlimit {
  border: none;
  font-size: 10px;
  font-size: 1rem;
  background-color: transparent;
}

.l-header__pr .p-programlimit:before {
  content: none;
}

.l-header__pr .p-programlimit .tv-accent {
  top: -.8em;
}

.l-logo-main {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}

.l-logo-main__col {
  -webkit-box-flex: 0;
  -webkit-flex: 0 1 auto;
      -ms-flex: 0 1 auto;
          flex: 0 1 auto;
  display: block;
}

.l-logo-main__col--thanks {
  padding-left: 30px;
}

.l-logo-main__col--thanks img {
  vertical-align: middle;
}

/*
#styleguide
ヒーロー:  ( hero )

```

```
*/
.l-hero {
  position: relative;
  background-color: #009944;
  text-align: center;
  line-height: 1.3;
}

.l-hero__inner {
  padding-top: 40px;
  padding-bottom: 40px;
  padding-left: 15px;
  padding-right: 15px;
  position: relative;
  width: 860px;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
  font-size: 32px;
  font-size: 3.2rem;
}

.l-hero__inner:after {
  z-index: 0;
  content: "\e908";
  display: inline-block;
  line-height: 1;
  font-size: 2.5em;
  font-family: 'drtvtan';
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: rgba(255, 255, 255, 0.2);
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  margin-left: auto;
  margin-right: auto;
  margin-top: -.5em;
  text-shadow: none !important;
}

.l-hero-heading {
  font-size: 1em;
  position: relative;
  z-index: 3;
  color: #fff100;
  text-shadow: 0px -2.5px 0 #009944, 0.825px -2.475px 0 #009944, 1.65px -1.65px 0 #009944, 2.475px -0.825px 0 #009944, 2.5px 0px 0 #009944, 2.475px 0.825px 0 #009944, 1.65px 1.65px 0 #009944, 0.825px 2.475px 0 #009944, 0px 2.5px 0 #009944, -0.825px 2.475px 0 #009944, -1.65px 1.65px 0 #009944, -2.475px 0.825px 0 #009944, -2.5px 0px 0 #009944, -2.475px -0.825px 0 #009944, -1.65px -1.65px 0 #009944, -0.825px -2.475px 0 #009944;
}

.l-hero.l-hero--medical .l-hero__inner:after, .l-hero.l-hero--medical-single .l-hero__inner:after, .l-hero.l-hero--medical-news .l-hero__inner:after {
  content: "\e906";
}

.l-hero.l-hero--useful-information .l-hero__inner:after {
  content: "\e908";
}

.l-hero.l-hero--company .l-hero__inner:after, .l-hero.l-hero--search .l-hero__inner:after, .l-hero.l-hero--inquiry .l-hero__inner:after, .l-hero.l-hero--kyujitsutobani .l-hero__inner:after, .l-hero.l-hero--kumamoto8000 .l-hero__inner:after, .l-hero.l-hero--sick_children .l-hero__inner:after, .l-hero.l-hero--link .l-hero__inner:after {
  content: "\e913";
  font-size: 1.875em;
}

.l-hero.l-hero--news .l-hero__inner:after, .l-hero.l-hero--news-medical .l-hero__inner:after, .l-hero.l-hero--blog .l-hero__inner:after {
  content: "\e914";
}

.l-hero.l-hero--program .l-hero__inner:after {
  content: "\e90b";
}

.l-hero.l-hero--recruit .l-hero__inner:after {
  content: "\e90d";
}

.l-hero.l-hero--reporter .l-hero__inner:after {
  content: "\e915";
}

.l-hero.l-hero--infection .l-hero__inner:after {
  content: "\e90c";
}

.l-hero.l-hero--event .l-hero__inner:after {
  content: "\e902";
}

.l-nojs {
  background-color: #000000;
  box-shadow: 0 0 4px 0 rgba(51, 51, 51, 0.4);
  color: #ffffff;
  font-weight: bold;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 4;
}

.l-nojs [class*="c-container"] > p {
  padding: .5em 0;
  text-align: center;
}

.l-area--sub {
  padding-top: 40px;
  padding-bottom: 100px;
  margin-bottom: 0;
  background-color: #f4f4f4;
}

.l-area--sub .l-area__inner {
  max-width: 1000px;
  width: 100%;
}

/*
  <div class="l-loading" id="js-loading" aria-hidden="true">
    <div class="l-loading__bg"></div>
    <div class="l-loading__self"></div>
  </div>
 */
.no-js .l-loading {
  display: none;
}

.l-loading__bg {
  background: #fff;
  display: block;
  height: 100%;
  opacity: 1;
  
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 50;
}

.load.wf-active .l-loading__bg {
  opacity: 0;
  
  -webkit-transition: opacity .25s linear;
  transition: opacity .25s linear;
}

.complete .l-loading__bg {
  display: none;
}

.l-loading__self {
  display: block;
  position: fixed;
  left: 50%;
  top: 50%;
  -webkit-transform-origin: 50% 50%;
      -ms-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
  z-index: 51;
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
  -webkit-animation: loadding 1.7s infinite ease, round 1.7s infinite ease;
          animation: loadding 1.7s infinite ease, round 1.7s infinite ease;
  overflow: hidden;
  width: 1em;
  height: 1em;
  color: #009944;
  border-radius: 50%;
  font-size: 50px;
  font-size: 5.0rem;
  width: 128px;
  height: 128px;
  margin-top: -64px;
  margin-left: -64px;
  background-image: url("../images/common/loading.gif");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 128px;
}

.complete .l-loading__self {
  display: none;
}

.load.wf-active:not(.barba) .l-loading__self {
  opacity: 0;
  
  -webkit-transition: opacity 0.275s cubic-bezier(0.82, 0.01, 0.28, 0.99), visibility 0s 0.275s, z-index 0s 0.275s;
  transition: opacity 0.275s cubic-bezier(0.82, 0.01, 0.28, 0.99), visibility 0s 0.275s, z-index 0s 0.275s;
  visibility: hidden;
  z-index: -1;
}

.barba-begin .l-loading__self {
  display: block;
}

.barba-end .l-loading__self {
  display: none;
}

.l-mediaquery {
  height: 0;
  overflow: hidden;
  position: absolute;
  visibility: hidden;
  width: 0;
}

.l-mediaquery:before {
  content: "pc";
}

/*
#styleguide
グローバルナビゲーション

```

```
*/
.l-menu {
  position: relative;
  z-index: 12;
}

.l-menu__inner {
  max-width: 1170px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.l-menu__list {
  width: 100%;
}

.l-menu__link {
  display: block;
  padding-left: 5px;
  padding-right: 5px;
}

.l-menu__link [class^="tv-"] {
  display: inline-block;
  height: 32px;
  margin-bottom: -.3em;
}

html:not(.sp) .l-menu__link:hover, html:not(.sp) .l-menu__link:focus {
  text-decoration: none;
}

html:not(.sp) .l-menu__link:hover .fa, html:not(.sp) .l-menu__link:hover [class^="tv-"], html:not(.sp) .l-menu__link:focus .fa, html:not(.sp) .l-menu__link:focus [class^="tv-"] {
  -webkit-transform: scale(1.3) rotate(5deg);
      -ms-transform: scale(1.3) rotate(5deg);
          transform: scale(1.3) rotate(5deg);
  text-shadow: 1px 1px 0 rgba(255, 241, 0, 0.5);
}

.l-menu__text {
  font-weight: 500;
  font-size: 16px;
  font-size: 1.6rem;
  display: block;
}

.l-menu__text.l-menu__text--sub {
  font-weight: normal;
  font-size: 12px;
  font-size: 1.2rem;
  color: #99cc99;
}

.l-menu__item {
  text-align: center;
  line-height: 1.3;
  color: #fff;
}

.l-menu__item .tv-tv {
  font-size: 20px;
  font-size: 2.0rem;
}

.l-menu__item .tv-hospital {
  font-size: 20px;
  font-size: 2.0rem;
}

.l-menu__item .tv-doctor {
  font-size: 25px;
  font-size: 2.5rem;
}

.l-menu__item .tv-cracker {
  font-size: 25px;
  font-size: 2.5rem;
}

.l-menu__item .tv-virus {
  font-size: 24px;
  font-size: 2.4rem;
}

.l-menu__item .tv-paper {
  font-size: 20px;
  font-size: 2.0rem;
}

.l-menu__item .tv-pencil {
  font-size: 22px;
  font-size: 2.2rem;
}

.l-pagetop {
  position: relative;
}

.l-pagetop__inner {
  cursor: pointer;
  z-index: 10;
  position: fixed;
  right: 50px;
  bottom: 5%;
  width: 110px;
  height: 150px;
  display: inline-block;
  -webkit-transition: bottom 2s cubic-bezier(0.15, 1.37, 0.61, 1.23) 0s;
  transition: bottom 2s cubic-bezier(0.15, 1.37, 0.61, 1.23) 0s;
}

body.app .l-pagetop__inner {
  bottom: 110px;
}

.l-pagetop__inner:not(.is-show) {
  bottom: -200px;
}

html:not(.sp) .l-pagetop__inner:hover, html:not(.sp) .l-pagetop__inner:focus {
  text-decoration: none;
}

.l-pagetop__innerText {
  width: 70px;
  height: 73px;
  padding-top: 13px;
  display: block;
  text-align: center;
  line-height: 1.2;
  position: relative;
  z-index: 1;
  color: #fff;
  font-size: 12px;
  font-size: 1.2rem;
  font-weight: 700;
  font-family: "YakuHanJP", "Noto Sans Japanese", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴシック Pro", Meiryo, "メイリオ", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

.l-pagetop__innerText .fa {
  display: block;
  margin-bottom: 2px;
}

.l-pagetop__inner:before {
  content: " ";
  top: 0;
  left: 0;
  z-index: 0;
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-transform-origin: 35px 35px;
      -ms-transform-origin: 35px 35px;
          transform-origin: 35px 35px;
  background-image: url("../images/common/tvtan-balloon.png");
  background-position: left top;
  background-repeat: no-repeat;
  background-size: 100%;
  -webkit-animation: balloon 1.3s ease-in-out infinite alternate;
          animation: balloon 1.3s ease-in-out infinite alternate;
}

@-webkit-keyframes balloon {
  from {
    -webkit-transform: rotate(-5deg);
            transform: rotate(-5deg);
  }
  to {
    -webkit-transform: rotate(5deg);
            transform: rotate(5deg);
  }
}

@keyframes balloon {
  from {
    -webkit-transform: rotate(-5deg);
            transform: rotate(-5deg);
  }
  to {
    -webkit-transform: rotate(5deg);
            transform: rotate(5deg);
  }
}

.l-spmenu-access {
  display: none;
}

/*
 * ＠ハンバーガーメニュー ver1.0
 *
 * 拡張機能：なし
 * サイズ：50x50
 */
.l-spmenu-trigger {
  display: none;
  z-index: 9;
  left: 15px;
  top: 5px;
  vertical-align: top;
  text-align: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: #fff;
  background-color: #1886ba;
  line-height: 1;
  -webkit-transition: box-shadow .35s ease-in-out .35s;
  transition: box-shadow .35s ease-in-out .35s;
  position: absolute;
}

.l-spmenu-trigger__text {
  position: absolute;
  display: block;
  width: 100%;
  font-family: "Muli", sans-serif;
  font-weight: 400;
  font-size: 10px;
  font-size: 1.0rem;
  letter-spacing: -0.05em;
  bottom: 7px;
}

.l-spmenu-trigger__text + .l-spmenu-trigger__line {
  top: 19px;
}

.l-spmenu-trigger__line {
  top: 50%;
  margin-top: -2px;
  left: 50%;
  margin-left: -13px;
  position: absolute;
  display: inline-block;
  width: 26px;
  height: 2px;
  border-radius: 2px;
  background-color: #fff;
  -webkit-transition: background-color .3s ease-in-out 0s;
  transition: background-color .3s ease-in-out 0s;
}

.l-spmenu-trigger__line:before, .l-spmenu-trigger__line:after {
  position: absolute;
  content: " ";
  display: inline-block;
  width: 100%;
  height: 100%;
  border-radius: 2px;
  background-color: #fff;
  left: 0;
  -webkit-transition: -webkit-transform .35s ease-in-out 0s;
  transition: -webkit-transform .35s ease-in-out 0s;
  transition: transform .35s ease-in-out 0s;
  transition: transform .35s ease-in-out 0s, -webkit-transform .35s ease-in-out 0s;
}

.l-spmenu-trigger__line:before {
  top: -6px;
}

.l-spmenu-trigger__line:after {
  top: 6px;
}

/*
 * ＠メニュー ver1.0
 *
 * グローバルメニューがメニューになることが多いので、タブレット幅からに制限
 * 拡張機能：なし
 * 動作順序
 */

/*
 * @トリガーの発火後
 *
 * <input type="checkbox" id="trigger-accessible" class="l-accessible">
 * <div class="l-accessible-depend"></div>
 */
[id="page-menu-medical"]:checked + .l-spmenu {
  height: 100%;
  opacity: 1;
  
  /*
	 * メニュー動作
	 */
}

[id="page-menu-medical"]:checked + .l-spmenu .l-spmenu__inner {
  opacity: 1;
  
}

[id="page-menu-medical"]:checked + .l-spmenu + .l-spmenu-bar .l-spmenu-trigger[for="page-menu-medical"] .l-spmenu-trigger__line {
  background-color: transparent;
}

[id="page-menu-medical"]:checked + .l-spmenu + .l-spmenu-bar .l-spmenu-trigger[for="page-menu-medical"] .l-spmenu-trigger__line:before {
  -webkit-transform: translateY(6px) rotate(135deg);
      -ms-transform: translateY(6px) rotate(135deg);
          transform: translateY(6px) rotate(135deg);
}

[id="page-menu-medical"]:checked + .l-spmenu + .l-spmenu-bar .l-spmenu-trigger[for="page-menu-medical"] .l-spmenu-trigger__line:after {
  -webkit-transform: translateY(-6px) rotate(-135deg);
      -ms-transform: translateY(-6px) rotate(-135deg);
          transform: translateY(-6px) rotate(-135deg);
}

/*
 * @サイトユニーク
 * サイトごとに色が違うのでその辺を記述
 */

/*
#styleguide
整列 ( align )

@使用頻度 ★★☆

```
<div class="fn-preview__black">

  <table style="border: 1px solid #fff; width: 100%;">
    <tr><td class="u-textright" style="border: 1px solid #fff;">右寄せ .u-textright</td></tr>
    <tr><td class="u-textcenter" style="border: 1px solid #fff;">中央寄せ .u-textcenter</td></tr>
    <tr><td class="u-textleft" style="border: 1px solid #fff;">左寄せ .u-textleft</td></tr>
  </table>

  <table style="border: 1px solid #fff; width: 100%;">
    <tr>
      <td class="u-top" style="border: 1px solid #fff; height: 100px;">上寄り .u-top</td>
      <td class="u-middle" style="border: 1px solid #fff; height: 100px;">中寄り .u-middle</td>
      <td class="u-bottom" style="border: 1px solid #fff; height: 100px;">下寄り .u-bottom</td>
    </tr>
  </table>

  <p><svg class="p-icon-clock  u-vicon" aria-hidden="true"><use xlink:href="#clock"></use></svg> アイコン用 .u-vicon</p>

  <a class="p-jump  p-jump--default2  u-flex-items-center  u-width-full" href="#sitemap-programs">
    <span class="p-jump__self  u-flex-11auto">
      <span class="p-link">TKUの番組</span>
    </span>
  </a>

</div>
```
*/
.u-textright {
  text-align: right !important;
}

.u-textcenter {
  text-align: center !important;
}

.u-textleft {
  text-align: left !important;
}

.u-top {
  vertical-align: top !important;
}

.u-middle {
  vertical-align: middle !important;
}

.u-bottom {
  vertical-align: bottom !important;
}

.u-baseline {
  vertical-align: baseline !important;
}

/*
#styleguide
アンカー ( anchor )

@使用頻度 ★☆☆

```
<a class="u-anchor" href="#top">アンカー</a>


<!-- 比較用に class なし --><br>
<a href="#top">アンカー</a>
```
*/
.u-anchor {
  text-decoration: underline !important;
  color: #333333 !important;
}

html:not(.sp) .u-anchor:hover, html:not(.sp) .u-anchor:focus {
  text-decoration: none !important;
}

/*
#styleguide
カラー ( color )

@使用頻度 ★★☆

```
<div class="fn-preview__black">

  <!-- テキスト色 -->
  <ul class="c-grid  c-grid--flex  c-grid--x0  c-grid--y0">
    <li class="c-col-base-4  c-col-xs-6  u-theme">.u-theme</li>
    <li class="c-col-base-4  c-col-xs-6  u-accent">.u-accent</li>
    <li class="c-col-base-4  c-col-xs-6  u-font">.u-font</li>
    <li class="c-col-base-4  c-col-xs-6  u-link">.u-link</li>
    <li class="c-col-base-4  c-col-xs-6  u-error">.u-error</li>
    <li class="c-col-base-4  c-col-xs-6  u-attention">.u-attention</li>
    <li class="c-col-base-4  c-col-xs-6  u-purple">.u-purple</li>
  </ul>

  <!-- 背景色 -->
  <ul class="c-grid  c-grid--flex  c-grid--x0  c-grid--y0">
    <li class="c-col-base-4  c-col-xs-6  u-bg-theme">.u-bg-theme</li>
    <li class="c-col-base-4  c-col-xs-6  u-bg-accent">.u-bg-accent</li>
    <li class="c-col-base-4  c-col-xs-6  u-bg-font">.u-bg-font</li>
    <li class="c-col-base-4  c-col-xs-6  u-bg-link">.u-bg-link</li>
    <li class="c-col-base-4  c-col-xs-6  u-bg-error">.u-bg-error</li>
    <li class="c-col-base-4  c-col-xs-6  u-bg-attention">.u-bg-attention</li>
    <li class="c-col-base-4  c-col-xs-6  u-bg-purple">.u-bg-purple</li>
  </ul>

</div>
```
*/
.u-theme {
  color: #009944 !important;
  fill: #009944 !important;
}

.u-accent {
  color: #fff100 !important;
  fill: #fff100 !important;
}

.u-point {
  color: #ff6666 !important;
  fill: #ff6666 !important;
}

.u-font {
  color: #333333 !important;
  fill: #333333 !important;
}

.u-link {
  color: #333333 !important;
  fill: #333333 !important;
}

.u-error {
  color: #cc6666 !important;
  fill: #cc6666 !important;
}

.u-attention {
  color: #cc0000 !important;
  fill: #cc0000 !important;
}

.u-action {
  color: #cc0000 !important;
  fill: #cc0000 !important;
}

.u-white {
  color: #ffffff !important;
  fill: #ffffff !important;
}

.u-black {
  color: #000000 !important;
  fill: #000000 !important;
}

.u-gray {
  color: #cccccc !important;
  fill: #cccccc !important;
}

.u-brown {
  color: #663300 !important;
  fill: #663300 !important;
}

.u-orange {
  color: #ff9900 !important;
  fill: #ff9900 !important;
}

.u-green {
  color: #009944 !important;
  fill: #009944 !important;
}

.u-yellow {
  color: #fff100 !important;
  fill: #fff100 !important;
}

.u-aqua {
  color: #20a3df !important;
  fill: #20a3df !important;
}

.u-pink {
  color: #e76666 !important;
  fill: #e76666 !important;
}

.u-blue {
  color: #1886ba !important;
  fill: #1886ba !important;
}

.u-purple {
  color: #9965cb !important;
  fill: #9965cb !important;
}

.u-bg-theme {
  background-color: #009944 !important;
}

.u-bg-accent {
  background-color: #fff100 !important;
}

.u-bg-point {
  background-color: #ff6666 !important;
}

.u-bg-font {
  background-color: #333333 !important;
}

.u-bg-link {
  background-color: #333333 !important;
}

.u-bg-error {
  background-color: #cc6666 !important;
}

.u-bg-attention {
  background-color: #cc0000 !important;
}

.u-bg-action {
  background-color: #cc0000 !important;
}

.u-bg-white {
  background-color: #ffffff !important;
}

.u-bg-black {
  background-color: #000000 !important;
}

.u-bg-gray {
  background-color: #cccccc !important;
}

.u-bg-brown {
  background-color: #663300 !important;
}

.u-bg-orange {
  background-color: #ff9900 !important;
}

.u-bg-green {
  background-color: #009944 !important;
}

.u-bg-yellow {
  background-color: #fff100 !important;
}

.u-bg-aqua {
  background-color: #20a3df !important;
}

.u-bg-pink {
  background-color: #e76666 !important;
}

.u-bg-blue {
  background-color: #1886ba !important;
}

.u-bg-purple {
  background-color: #9965cb !important;
}

/*
#styleguide
ディスプレイ ( display )

@使用頻度 ★★☆

ブレイクポイントごとにも用意しているので、詳細は _display.scss を確認。


```
<!-- 継承 -->
<p class="u-d">.u-d</p>

<!-- インラインブロック -->
<p class="u-ib">.u-ib</p>

<!-- インライン -->
<p class="u-i">.u-i</p>

<!-- ブロック -->
<p class="u-b">.u-b</p>

<!-- 非表示 -->
<p class="u-n">.u-n</p>
```
*/
.u-d {
  display: inherit !important;
}

.u-ib {
  display: inline-block !important;
}

.u-i {
  display: inline !important;
}

.u-b {
  display: block !important;
}

.u-n {
  display: none !important;
}

.u-f {
  display: -webkit-box !important;
  display: -webkit-flex !important;
  display: -ms-flexbox !important;
  display: flex !important;
}

.u-if {
  display: -webkit-inline-box !important;
  display: -webkit-inline-flex !important;
  display: -ms-inline-flexbox !important;
  display: inline-flex !important;
}

.u-empty:empty {
  display: none !important;
}

.no-js .u-nojs-d {
  display: inherit !important;
}

.no-js .u-nojs-ib {
  display: inline-block !important;
}

.no-js .u-nojs-i {
  display: inline !important;
}

.no-js .u-nojs-b {
  display: block !important;
}

.no-js .u-nojs-n {
  display: none !important;
}

/*
#styleguide
フレックスボックス ( flex )

@使用頻度 ★☆☆

```
```
*/
.u-flex-row {
  -webkit-box-orient: horizontal !important;
  -webkit-box-direction: normal !important;
  -webkit-flex-direction: row !important;
      -ms-flex-direction: row !important;
          flex-direction: row !important;
}

.u-flex-row-reverse {
  -webkit-box-orient: horizontal !important;
  -webkit-box-direction: reverse !important;
  -webkit-flex-direction: row-reverse !important;
      -ms-flex-direction: row-reverse !important;
          flex-direction: row-reverse !important;
}

.u-flex-column {
  -webkit-box-orient: vertical !important;
  -webkit-box-direction: normal !important;
  -webkit-flex-direction: column !important;
      -ms-flex-direction: column !important;
          flex-direction: column !important;
}

.u-flex-column-reverse {
  -webkit-box-orient: vertical !important;
  -webkit-box-direction: reverse !important;
  -webkit-flex-direction: column-reverse !important;
      -ms-flex-direction: column-reverse !important;
          flex-direction: column-reverse !important;
}

.u-justify-content-start {
  -webkit-box-pack: start !important;
  -webkit-justify-content: flex-start !important;
      -ms-flex-pack: start !important;
          justify-content: flex-start !important;
}

.u-justify-content-end {
  -webkit-box-pack: end !important;
  -webkit-justify-content: flex-end !important;
      -ms-flex-pack: end !important;
          justify-content: flex-end !important;
}

.u-justify-content-center {
  -webkit-box-pack: flex-center !important;
  -webkit-justify-content: flex-center !important;
      -ms-flex-pack: flex-center !important;
          justify-content: flex-center !important;
}

.u-justify-content-between {
  -webkit-box-pack: justify !important;
  -webkit-justify-content: space-between !important;
      -ms-flex-pack: justify !important;
          justify-content: space-between !important;
}

.u-justify-content-around {
  -webkit-justify-content: space-around !important;
      -ms-flex-pack: distribute !important;
          justify-content: space-around !important;
}

.u-flex-nowrap {
  -webkit-flex-wrap: nowrap !important;
      -ms-flex-wrap: nowrap !important;
          flex-wrap: nowrap !important;
}

.u-flex-wrap {
  -webkit-flex-wrap: wrap !important;
      -ms-flex-wrap: wrap !important;
          flex-wrap: wrap !important;
}

.u-flex-wrap-reverse {
  -webkit-flex-wrap: wrap-reverse !important;
      -ms-flex-wrap: wrap-reverse !important;
          flex-wrap: wrap-reverse !important;
}

.u-align-items-start {
  -webkit-box-align: start !important;
  -webkit-align-items: flex-start !important;
      -ms-flex-align: start !important;
          align-items: flex-start !important;
}

.u-align-items-end {
  -webkit-box-align: end !important;
  -webkit-align-items: flex-end !important;
      -ms-flex-align: end !important;
          align-items: flex-end !important;
}

.u-align-items-center {
  -webkit-box-align: center !important;
  -webkit-align-items: center !important;
      -ms-flex-align: center !important;
          align-items: center !important;
}

.u-align-items-baseline {
  -webkit-box-align: baseline !important;
  -webkit-align-items: baseline !important;
      -ms-flex-align: baseline !important;
          align-items: baseline !important;
}

.u-align-items-stretch {
  -webkit-box-align: stretch !important;
  -webkit-align-items: stretch !important;
      -ms-flex-align: stretch !important;
          align-items: stretch !important;
}

.u-order-0 {
  -webkit-box-ordinal-group: 1 !important;
  -webkit-order: 0 !important;
      -ms-flex-order: 0 !important;
          order: 0 !important;
}

.u-order-1 {
  -webkit-box-ordinal-group: 2 !important;
  -webkit-order: 1 !important;
      -ms-flex-order: 1 !important;
          order: 1 !important;
}

.u-order-_1 {
  -webkit-box-ordinal-group: 0 !important;
  -webkit-order: -1 !important;
      -ms-flex-order: -1 !important;
          order: -1 !important;
}

.u-flex-00auto {
  -webkit-box-flex: 0 !important;
  -webkit-flex: 0 0 auto !important;
      -ms-flex: 0 0 auto !important;
          flex: 0 0 auto !important;
}

.u-flex-01auto {
  -webkit-box-flex: 0 !important;
  -webkit-flex: 0 1 auto !important;
      -ms-flex: 0 1 auto !important;
          flex: 0 1 auto !important;
}

.u-flex-11auto {
  -webkit-box-flex: 1 !important;
  -webkit-flex: 1 1 auto !important;
      -ms-flex: 1 1 auto !important;
          flex: 1 1 auto !important;
}

.u-flex-10auto {
  -webkit-box-flex: 1 !important;
  -webkit-flex: 1 0 auto !important;
      -ms-flex: 1 0 auto !important;
          flex: 1 0 auto !important;
}

.u-align-self-auto {
  -webkit-align-self: auto !important;
      -ms-flex-item-align: auto !important;
              -ms-grid-row-align: auto !important;
          align-self: auto !important;
}

.u-align-self-start {
  -webkit-align-self: flex-start !important;
      -ms-flex-item-align: start !important;
          align-self: flex-start !important;
}

.u-align-self-end {
  -webkit-align-self: flex-end !important;
      -ms-flex-item-align: end !important;
          align-self: flex-end !important;
}

.u-align-self-center {
  -webkit-align-self: center !important;
      -ms-flex-item-align: center !important;
              -ms-grid-row-align: center !important;
          align-self: center !important;
}

.u-align-self-baseline {
  -webkit-align-self: baseline !important;
      -ms-flex-item-align: baseline !important;
          align-self: baseline !important;
}

.u-align-self-stretch {
  -webkit-box-align: stretch !important;
  -webkit-align-items: stretch !important;
      -ms-flex-align: stretch !important;
          align-items: stretch !important;
}

/*
#styleguide
フロート ( float )

@使用頻度 ★☆☆

```
<div class="u-clear">u-clear</div>

<div class="u-cf" style="border: 1px solid #999; padding: 10px;">
  <div>u-cf ( クリアフィックス )</div>
  <div class="u-right" style="background-color: #f0f0f0;">u-right</div>
  <div class="u-left" style="background-color: #f0f0f0;">u-left</div>
</div>

<div class="u-overflow" style="border: 1px solid #999; padding: 10px;">
  <div>u-overflow</div>
  <div class="u-right" style="background-color: #f0f0f0;">u-right</div>
  <div class="u-left" style="background-color: #f0f0f0;">u-left</div>
</div>
```
*/
.u-clear {
  clear: both !important;
}

.u-clear-right {
  clear: right !important;
}

.u-clear-left {
  clear: left !important;
}

.u-overflow {
  overflow: hidden !important;
}

.u-right {
  float: right !important;
}

.u-left {
  float: left !important;
}

/*
#styleguide
フォント ( font )

@使用頻度 ★★☆

```
<div>
  <h4 class="fn-preview__caption">■font-feature-settings:</h4>
  <span class="u-ffs-normal">.u-ffs-normal ( 普通 )</span>
  <span class="u-ffs-palt">.u-ffs-palt ( メトリクス )</span>
</div>
<div>
  <h4 class="fn-preview__caption">■font-style:</h4>
  <span class="u-regular">.u-regular ( 標準 )</span>
  <span class="u-medium">.u-medium ( 中間 )</span>
  <span class="u-bold">.u-bold ( 太い )</span>
  <span class="u-nomal">.u-nomal ( スタイル：普通 )</span>
  <span class="u-italic">.u-italic ( スタイル：傾き )</span>
</div>
<div>
  <h4 class="fn-preview__caption">■font-size:</h4>
  <div>
    <span class="u-large">.u-large ( 大 )</span>
    <span class="u-xlarge">.u-xlarge ( 大大 )</span>
    <span class="u-xxlarge">.u-xxlarge ( 大大大 )</span>
  </div>
  <div>
    <span class="u-size">.u-size ( 標準 )</span>
  </div>
  <div>
    <span class="u-small">.u-small ( 小 )</span>
    <span class="u-xsmall">.u-xsmall ( 小小 )</span>
    <span class="u-xxsmall">.u-xxsmall ( 小小小 )</span>
  </div>
</div>
<div>
  <h4 class="fn-preview__caption">■font-family:</h4>
  <div>
    <span class="u-family">.u-family ( 標準 )</span>
    <span class="u-gothic">.u-gothic ( ゴシック )</span>
    <span class="u-mincho">.u-mincho ( 明朝 )</span>
    <span class="u-mincho-lm">.u-mincho-lm ( 明朝 [無かったらメイリオ] )</span>
    <span class="u-meiryo">.u-meiryo ( メイリオ )</span>
  </div>
  <div>
    <span class="u-ab">.u-ab ( AdobeBlank )</span>
  </div>
  <div>
    <span class="u-quicksand">.u-quicksand ( Quicksand )</span>
  </div>
  <div>
    <span class="u-gg">.u-gg ( 源柔ゴシック )</span>
    <span class="u-ggp">.u-ggp ( 源柔ゴシックP )</span>
  </div>
</div>
```
*/
.u-ffs-normal {
  -webkit-font-feature-settings: normal !important;
          font-feature-settings: normal !important;
}

.u-ffs-palt {
  -webkit-font-feature-settings: "palt" 1 !important;
          font-feature-settings: "palt" 1 !important;
}

.u-regular {
  font-weight: 400 !important;
}

.u-medium {
  font-weight: 500 !important;
}

.u-bold {
  font-weight: 700 !important;
}

.u-normal {
  font-style: normal !important;
}

.u-italic {
  font-style: italic !important;
}

.u-0 {
  font-size: 0 !important;
}

.u-size {
  font-size: 16px !important;
  font-size: 1.6rem !important;
}

.u-large {
  font-size: 17px !important;
  font-size: 1.7rem !important;
}

.u-xlarge {
  font-size: 18px !important;
  font-size: 1.8rem !important;
}

.u-xxlarge {
  font-size: 19px !important;
  font-size: 1.9rem !important;
}

.u-small {
  font-size: 15px !important;
  font-size: 1.5rem !important;
}

.u-xsmall {
  font-size: 14px !important;
  font-size: 1.4rem !important;
}

.u-xxsmall {
  font-size: 13px !important;
  font-size: 1.3rem !important;
}

.u-family {
  font-family: "YakuHanJP", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴシック Pro", Meiryo, "メイリオ", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif !important;
}

.u-gothic {
  font-family: "YakuHanJP", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴシック Pro", Meiryo, "メイリオ", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif !important;
}

.u-yugo {
  font-family: YuGothicM, YuGothic, "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴシック Pro", Meiryo, "メイリオ", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif !important;
}

/* .u-genjyu {
  font-family: "YakuHanJP", "GenJyuuGothic-P", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴシック Pro", Meiryo, "メイリオ", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif !important;
} */

.u-mincho {
  font-family: "Hiragino Mincho ProN", "Hiragino Mincho Pro", YuMincho, "Yu Mincho", "游明朝", "HG明朝E", serif !important;
}

.u-mincho-lm {
  font-family: "Hiragino Mincho ProN", "Hiragino Mincho Pro", YuMincho, "Yu Mincho", "游明朝", "HG明朝E", Meiryo, "メイリオ", sans-serif !important;
}

.u-yumin {
  font-family: YuMinch, "Yu Mincho", oserif !important;
}

.u-meiryo {
  font-family: Meiryo, "メイリオ", sans-serif !important;
}

.u-applesystem {
  font-family: -apple-system, BlinkMacSystemFont, sans-serif !important;
}

.u-ab {
  font-family: AdobeBlank !important;
}

.u-noto {
  font-family: "YakuHanJP", "Noto Sans Japanese", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴシック Pro", Meiryo, "メイリオ", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif !important;
}

.u-opensans {
  font-family: "Open Sans", -apple-system, BlinkMacSystemFont, sans-serif !important;
}

.u-muli {
  font-family: "Muli", sans-serif !important;
}

.u-fontawesome {
  font-family: "FontAwesome" !important;
}

.u-noto,
.u-opensans,
.u-muli {
  -webkit-font-smoothing: antialiased !important;
}

/*
#styleguide
入力モード ( ime )

@使用頻度 ★☆☆

```
<p>初期値が日本語入力 ( .u-ime-active ) <input class="u-ime-active" type="text"></p>
<p>初期値が英数字入力 ( .u-ime-inactive ) <input class="u-ime-inactive" type="text"></p>
<p>英数字入力 変更不可 ( .u-ime-disabled ) <input class="u-ime-disabled" type="text"></p>
```
*/
.u-ime-active {
  ime-mode: active !important;
}

.u-ime-inactive {
  ime-mode: inactive !important;
}

.u-ime-disabled {
  ime-mode: disabled !important;
}

/*
#styleguide
余白 ( margin )

@使用頻度 ★★★

.u-mt-30 の様な数字指定はとても分かりやすいですが、
際限がなくなるので廃止しました。

```
<div class="u-m-auto" style="background-color: #f0f0f0; width: 10em;">
  真ん中 ( .u-m-auto )
</div>

<!-- 方向基礎 -->
.u-m
.u-mt
.u-mr
.u-mb
.u-ml

<!-- なし -->
.u-m-n
.u-mt-n
.u-mr-n
.u-mb-n
.u-ml-n

<!-- 1em パラグラフの意 -->
.u-m-p
.u-mt-p
.u-mr-p
.u-mb-p
.u-ml-p

<!-- 小小小 空ける -->
.u-m-xxs
.u-mt-xxs
.u-mr-xxs
.u-mb-xxs
.u-ml-xxs

<!-- 小小 空ける -->
.u-m-xs
.u-mt-xs
.u-mr-xs
.u-mb-xs
.u-ml-xs

<!-- 小 空ける -->
.u-m-s
.u-mt-s
.u-mr-s
.u-mb-s
.u-ml-s

<!-- 中 空ける -->
.u-m-m
.u-mt-m
.u-mr-m
.u-mb-m
.u-ml-m

<!-- 大 空ける -->
.u-m-l
.u-mt-l
.u-mr-l
.u-mb-l
.u-ml-l

<!-- 大大 空ける -->
.u-m-xl
.u-mt-xl
.u-mr-xl
.u-mb-xl
.u-ml-xl

<!-- 大大大 空ける -->
.u-m-xxl
.u-mt-xxl
.u-mr-xxl
.u-mb-xxl
.u-ml-xxl
```
*/
.u-p-n {
  padding: 0 !important;
}

.u-pt-n {
  padding-top: 0 !important;
}

.u-pr-n {
  padding-right: 0 !important;
}

.u-pb-n {
  padding-bottom: 0 !important;
}

.u-pl-n {
  padding-left: 0 !important;
}

.u-m-auto {
  margin-right: auto !important;
  margin-left: auto !important;
}

.u-m-fl > *:first-child {
  margin-top: 0 !important;
}

.u-m-fl > *:last-child {
  margin-bottom: 0 !important;
}

.u-gutter-killer {
  margin-right: -15px !important;
  margin-left: -15px !important;
}

/**
 * $margin
 * 
 * ""
 * n
 * p
 * xxs
 * xs
 * s
 * m
 * l
 * xl
 * xxl
 * gutter
 */
.u-m {
  margin: 1.65em !important;
}

.u-mt {
  margin-top: 1.65em !important;
}

.u-mr {
  margin-right: 1.65em !important;
}

.u-mb {
  margin-bottom: 1.65em !important;
}

.u-ml {
  margin-left: 1.65em !important;
}

.u-m-n {
  margin: 0 !important;
}

.u-mt-n {
  margin-top: 0 !important;
}

.u-mr-n {
  margin-right: 0 !important;
}

.u-mb-n {
  margin-bottom: 0 !important;
}

.u-ml-n {
  margin-left: 0 !important;
}

.u-m-p {
  margin: 1em !important;
}

.u-mt-p {
  margin-top: 1em !important;
}

.u-mr-p {
  margin-right: 1em !important;
}

.u-mb-p {
  margin-bottom: 1em !important;
}

.u-ml-p {
  margin-left: 1em !important;
}

.u-m-xxs {
  margin: 0.25em !important;
}

.u-mt-xxs {
  margin-top: 0.25em !important;
}

.u-mr-xxs {
  margin-right: 0.25em !important;
}

.u-mb-xxs {
  margin-bottom: 0.25em !important;
}

.u-ml-xxs {
  margin-left: 0.25em !important;
}

.u-m-xs {
  margin: 0.5em !important;
}

.u-mt-xs {
  margin-top: 0.5em !important;
}

.u-mr-xs {
  margin-right: 0.5em !important;
}

.u-mb-xs {
  margin-bottom: 0.5em !important;
}

.u-ml-xs {
  margin-left: 0.5em !important;
}

.u-m-s {
  margin: 0.75em !important;
}

.u-mt-s {
  margin-top: 0.75em !important;
}

.u-mr-s {
  margin-right: 0.75em !important;
}

.u-mb-s {
  margin-bottom: 0.75em !important;
}

.u-ml-s {
  margin-left: 0.75em !important;
}

.u-m-ms {
  margin: 2em !important;
}

.u-mt-ms {
  margin-top: 2em !important;
}

.u-mr-ms {
  margin-right: 2em !important;
}

.u-mb-ms {
  margin-bottom: 2em !important;
}

.u-ml-ms {
  margin-left: 2em !important;
}

.u-m-m {
  margin: 2.25em !important;
}

.u-mt-m {
  margin-top: 2.25em !important;
}

.u-mr-m {
  margin-right: 2.25em !important;
}

.u-mb-m {
  margin-bottom: 2.25em !important;
}

.u-ml-m {
  margin-left: 2.25em !important;
}

.u-m-ml {
  margin: 2.85em !important;
}

.u-mt-ml {
  margin-top: 2.85em !important;
}

.u-mr-ml {
  margin-right: 2.85em !important;
}

.u-mb-ml {
  margin-bottom: 2.85em !important;
}

.u-ml-ml {
  margin-left: 2.85em !important;
}

.u-m-l {
  margin: 3.5em !important;
}

.u-mt-l {
  margin-top: 3.5em !important;
}

.u-mr-l {
  margin-right: 3.5em !important;
}

.u-mb-l {
  margin-bottom: 3.5em !important;
}

.u-ml-l {
  margin-left: 3.5em !important;
}

.u-m-xl {
  margin: 4.5em !important;
}

.u-mt-xl {
  margin-top: 4.5em !important;
}

.u-mr-xl {
  margin-right: 4.5em !important;
}

.u-mb-xl {
  margin-bottom: 4.5em !important;
}

.u-ml-xl {
  margin-left: 4.5em !important;
}

.u-m-xxl {
  margin: 5.5em !important;
}

.u-mt-xxl {
  margin-top: 5.5em !important;
}

.u-mr-xxl {
  margin-right: 5.5em !important;
}

.u-mb-xxl {
  margin-bottom: 5.5em !important;
}

.u-ml-xxl {
  margin-left: 5.5em !important;
}

.u-m-gutter {
  margin: 15px !important;
}

.u-mt-gutter {
  margin-top: 15px !important;
}

.u-mr-gutter {
  margin-right: 15px !important;
}

.u-mb-gutter {
  margin-bottom: 15px !important;
}

.u-ml-gutter {
  margin-left: 15px !important;
}

/*
#styleguide
大きさ ( size )

@使用頻度 ★☆☆

```
<p class="u-width-auto" style="background-color: #f0f0f0;">.u-width-auto</p>
<p class="u-width-half" style="background-color: #f0f0f0;">.u-width-half</p>
<p class="u-width-full" style="background-color: #f0f0f0;">.u-width-full</p>

<p class="u-lg" style="background-color: #f0f0f0;">.u-lg</p>
<p class="u-md" style="background-color: #f0f0f0;">.u-md</p>
<p class="u-sm" style="background-color: #f0f0f0;">.u-sm</p>
<p class="u-xs" style="background-color: #f0f0f0;">.u-xs</p>
<p class="u-base" style="background-color: #f0f0f0;">.u-base</p>
<p class="u-max" style="background-color: #f0f0f0;">.u-max</p>

<p class="u-lg-wide" style="background-color: #f0f0f0;">.u-lg-wide</p>
<p class="u-md-wide" style="background-color: #f0f0f0;">.u-md-wide</p>
<p class="u-sm-wide" style="background-color: #f0f0f0;">.u-sm-wide</p>
<p class="u-xs-wide" style="background-color: #f0f0f0;">.u-xs-wide</p>
<p class="u-base-wide" style="background-color: #f0f0f0;">.u-base-wide</p>
<p class="u-content-wide" style="background-color: #f0f0f0;">.u-content-wide</p>

<p class="u-height-auto" style="background-color: #f0f0f0;">.u-height-auto</p>
<p class="u-height-half" style="background-color: #f0f0f0;">.u-height-half</p>
<p class="u-height-full" style="background-color: #f0f0f0;">.u-height-full</p>
```
*/
.u-sizing-c {
  box-sizing: content-box !important;
}

.u-sizing-b {
  box-sizing: border-box !important;
}

.u-sizing-i {
  box-sizing: inherit !important;
}

.u-width-auto {
  width: auto !important;
}

.u-width-half {
  width: 50% !important;
}

.u-width-full {
  width: 100% !important;
}

.u-lg {
  width: 1024px !important;
  max-width: 100% !important;
}

.u-lg-wide {
  width: 1054px !important;
  max-width: 100% !important;
}

.u-md {
  width: 768px !important;
  max-width: 100% !important;
}

.u-md-wide {
  width: 798px !important;
  max-width: 100% !important;
}

.u-sm {
  width: 568px !important;
  max-width: 100% !important;
}

.u-sm-wide {
  width: 598px !important;
  max-width: 100% !important;
}

.u-xs {
  width: 412px !important;
  max-width: 100% !important;
}

.u-xs-wide {
  width: 442px !important;
  max-width: 100% !important;
}

.u-base {
  width: 1170px !important;
  max-width: 100% !important;
}

.u-base-wide {
  width: 1200px !important;
  max-width: 100% !important;
}

.u-max {
  width: 1600px !important;
  max-width: 100% !important;
}

.u-max-wide {
  width: 1630px !important;
  max-width: 100% !important;
}

.u-height-auto {
  height: auto !important;
}

.u-height-half {
  height: 50% !important;
}

.u-height-full {
  height: 100% !important;
}

.u-smoothing {
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

.u-smoothing-no {
  -webkit-font-smoothing: subpixel-antialiased !important;
  -moz-osx-font-smoothing: auto !important;
}

/*
#styleguide
スペース、インデント関連 ( space )

@使用頻度 ★☆☆

```
<div>
  <h4 class="fn-preview__caption">■1文字 空ける ( u-indent ):</h4>
  <div class="u-indent" style="background-color: #f0f0f0;">あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。TKU - 20160920</div>
</div>

<div>
  <h4 class="fn-preview__caption">■先頭行以外字下げ ( u-kome ):</h4>
  <div class="u-kome" style="background-color: #f0f0f0;">あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。TKU - 20160920</div>
</div>

<div>
  <h4 class="fn-preview__caption">■折り返さない ( u-nowrap ):</h4>
  <div class="u-nowrap" style="background-color: #f0f0f0;">あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。TKU - 20160920</div>
</div>
```
*/
.u-indent {
  text-indent: 1em !important;
}

.u-kome {
  padding-left: 1em !important;
  text-indent: -1em !important;
}

[class*="u-kome1.1"] {
  padding-left: 1.1em !important;
  text-indent: -1.1em !important;
}

[class*="u-kome1.2"] {
  padding-left: 1.2em !important;
  text-indent: -1.2em !important;
}

[class*="u-kome1.3"] {
  padding-left: 1.3em !important;
  text-indent: -1.3em !important;
}

[class*="u-kome1.4"] {
  padding-left: 1.4em !important;
  text-indent: -1.4em !important;
}

[class*="u-kome1.5"] {
  padding-left: 1.5em !important;
  text-indent: -1.5em !important;
}

.u-pre {
  white-space: pre !important;
}

.u-nowrap {
  white-space: nowrap !important;
}

/*
#styleguide
Scalable Vector Graphics ( svg )

@使用頻度 ★☆☆

svg を非表示にする。

```
```
*/
.u-svg-n {
  height: 0 !important;
  overflow: hidden !important;
  position: absolute !important;
  width: 0 !important;
}
@media screen{
  [hidden~="screen"]{
    display: inherit;
  }
  [hidden~="screen"]:not(:active):not(:focus):not(:target){
    position: absolute !important;
    clip: rect(0 0 0 0) !important;
  }
  [data-lookon-style="fade"].js-lookon:not(.js-lookon-is-effect){
    opacity: 0;
    
  }
  [data-lookon-style="fade"].js-lookon-is-effect{
    opacity: 1;
    
    -webkit-transition: opacity 0.75s cubic-bezier(0.82, 0.01, 0.28, 0.99);
    transition: opacity 0.75s cubic-bezier(0.82, 0.01, 0.28, 0.99);
  }
  [data-lookon-style="fadeup"].js-lookon:not(.js-lookon-is-effect){
    opacity: 0;
    
    -webkit-transform: translateY(10px);
        -ms-transform: translateY(10px);
            transform: translateY(10px);
  }
  [data-lookon-style="fadeup"].js-lookon-is-effect{
    opacity: 1;
    
    -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
            transform: translateY(0);
    -webkit-transition: opacity 0.75s cubic-bezier(0.82, 0.01, 0.28, 0.99), -webkit-transform 0.75s cubic-bezier(0.82, 0.01, 0.28, 0.99);
    transition: opacity 0.75s cubic-bezier(0.82, 0.01, 0.28, 0.99), -webkit-transform 0.75s cubic-bezier(0.82, 0.01, 0.28, 0.99);
    transition: opacity 0.75s cubic-bezier(0.82, 0.01, 0.28, 0.99), transform 0.75s cubic-bezier(0.82, 0.01, 0.28, 0.99);
    transition: opacity 0.75s cubic-bezier(0.82, 0.01, 0.28, 0.99), transform 0.75s cubic-bezier(0.82, 0.01, 0.28, 0.99), -webkit-transform 0.75s cubic-bezier(0.82, 0.01, 0.28, 0.99);
  }
  [data-lookon-style="fadedown"].js-lookon:not(.js-lookon-is-effect){
    opacity: 0;
    
    -webkit-transform: translateY(-10px);
        -ms-transform: translateY(-10px);
            transform: translateY(-10px);
  }
  [data-lookon-style="fadedown"].js-lookon-is-effect{
    opacity: 1;
    
    -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
            transform: translateY(0);
    -webkit-transition: opacity 0.75s cubic-bezier(0.82, 0.01, 0.28, 0.99), -webkit-transform 0.75s cubic-bezier(0.82, 0.01, 0.28, 0.99);
    transition: opacity 0.75s cubic-bezier(0.82, 0.01, 0.28, 0.99), -webkit-transform 0.75s cubic-bezier(0.82, 0.01, 0.28, 0.99);
    transition: opacity 0.75s cubic-bezier(0.82, 0.01, 0.28, 0.99), transform 0.75s cubic-bezier(0.82, 0.01, 0.28, 0.99);
    transition: opacity 0.75s cubic-bezier(0.82, 0.01, 0.28, 0.99), transform 0.75s cubic-bezier(0.82, 0.01, 0.28, 0.99), -webkit-transform 0.75s cubic-bezier(0.82, 0.01, 0.28, 0.99);
  }
  [data-lookon-style="faderight"].js-lookon:not(.js-lookon-is-effect){
    opacity: 0;
    
    -webkit-transform: translateX(10px);
        -ms-transform: translateX(10px);
            transform: translateX(10px);
  }
  [data-lookon-style="faderight"].js-lookon-is-effect{
    opacity: 1;
    
    -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
            transform: translateX(0);
    -webkit-transition: opacity 0.75s cubic-bezier(0.82, 0.01, 0.28, 0.99), -webkit-transform 0.75s cubic-bezier(0.82, 0.01, 0.28, 0.99);
    transition: opacity 0.75s cubic-bezier(0.82, 0.01, 0.28, 0.99), -webkit-transform 0.75s cubic-bezier(0.82, 0.01, 0.28, 0.99);
    transition: opacity 0.75s cubic-bezier(0.82, 0.01, 0.28, 0.99), transform 0.75s cubic-bezier(0.82, 0.01, 0.28, 0.99);
    transition: opacity 0.75s cubic-bezier(0.82, 0.01, 0.28, 0.99), transform 0.75s cubic-bezier(0.82, 0.01, 0.28, 0.99), -webkit-transform 0.75s cubic-bezier(0.82, 0.01, 0.28, 0.99);
  }
  [data-lookon-style="fadeleft"].js-lookon:not(.js-lookon-is-effect){
    opacity: 0;
    
    -webkit-transform: translateX(-10px);
        -ms-transform: translateX(-10px);
            transform: translateX(-10px);
  }
  [data-lookon-style="fadeleft"].js-lookon-is-effect{
    opacity: 1;
    
    -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
            transform: translateX(0);
    -webkit-transition: opacity 0.75s cubic-bezier(0.82, 0.01, 0.28, 0.99), -webkit-transform 0.75s cubic-bezier(0.82, 0.01, 0.28, 0.99);
    transition: opacity 0.75s cubic-bezier(0.82, 0.01, 0.28, 0.99), -webkit-transform 0.75s cubic-bezier(0.82, 0.01, 0.28, 0.99);
    transition: opacity 0.75s cubic-bezier(0.82, 0.01, 0.28, 0.99), transform 0.75s cubic-bezier(0.82, 0.01, 0.28, 0.99);
    transition: opacity 0.75s cubic-bezier(0.82, 0.01, 0.28, 0.99), transform 0.75s cubic-bezier(0.82, 0.01, 0.28, 0.99), -webkit-transform 0.75s cubic-bezier(0.82, 0.01, 0.28, 0.99);
  }
  [data-lookon-style="post-list"].js-lookon{
    opacity: 0;
    
    -webkit-transform: translateY(4px) scale(0.975);
        -ms-transform: translateY(4px) scale(0.975);
            transform: translateY(4px) scale(0.975);
    visibility: hidden;
  }
  [data-lookon-style="post-list"].js-lookon-is-effect{
    opacity: 1;
    
    -webkit-transform: none;
        -ms-transform: none;
            transform: none;
    -webkit-transition: opacity 0.4s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: opacity 0.4s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: opacity 0.4s cubic-bezier(0.645, 0.045, 0.355, 1), transform 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: opacity 0.4s cubic-bezier(0.645, 0.045, 0.355, 1), transform 0.4s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
    visibility: visible;
  }
  [data-lookon-style="post-list2"].js-lookon{
    opacity: 0;
    
    -webkit-transform: rotate(-2deg) scale(0.975);
        -ms-transform: rotate(-2deg) scale(0.975);
            transform: rotate(-2deg) scale(0.975);
    visibility: hidden;
  }
  [data-lookon-style="post-list2"].js-lookon-is-effect{
    opacity: 1;
    
    -webkit-transform: none;
        -ms-transform: none;
            transform: none;
    -webkit-transition: opacity 0.4s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: opacity 0.4s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: opacity 0.4s cubic-bezier(0.645, 0.045, 0.355, 1), transform 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: opacity 0.4s cubic-bezier(0.645, 0.045, 0.355, 1), transform 0.4s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
    visibility: visible;
  }
  .u-screen-d{
    display: inherit !important;
  }
  .u-screen-ib{
    display: inline-block !important;
  }
  .u-screen-i{
    display: inline !important;
  }
  .u-screen-b{
    display: block !important;
  }
  .u-screen-n{
    display: none !important;
  }
  .u-screen-f{
    display: -webkit-box !important;
    display: -webkit-flex !important;
    display: -ms-flexbox !important;
    display: flex !important;
  }
  .u-screen-if{
    display: -webkit-inline-box !important;
    display: -webkit-inline-flex !important;
    display: -ms-inline-flexbox !important;
    display: inline-flex !important;
  }
}
@media screen and (max-width: 1629px){
  html{
    width: auto;
  }
}
@media screen and (max-width: 1599px){
  html{
    width: auto;
  }
  .l-footer-contents:before, .l-footer-contents:after{
    width: 1600px;
    left: 50%;
    margin-left: -800px;
  }
}
@media screen and (max-width: 1199px){
  html{
    width: auto;
  }
  .p-swiper{
    max-width: 100%;
  }
}
@media screen and (max-width: 1169px){
  html{
    width: auto;
  }
  .c-row--base{
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    margin-top: 70px;
    margin-bottom: 70px;
  }
  .c-row--base .c-row__header{
    -webkit-box-ordinal-group: 1 !important;
    -webkit-order: 0 !important;
        -ms-flex-order: 0 !important;
            order: 0 !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
    width: auto;
  }
  .c-row--base .c-row__content{
    margin-top: 20px;
    -webkit-box-ordinal-group: 1 !important;
    -webkit-order: 0 !important;
        -ms-flex-order: 0 !important;
            order: 0 !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
    width: auto;
  }
  .c-grid--base{
    margin: -7.5px;
  }
  .c-grid--base > [class*="c-col"]{
    margin-top: 7.5px;
    margin-bottom: 7.5px;
    padding-right: 7.5px;
    padding-left: 7.5px;
  }
  .c-grid--base-x{
    margin-right: -7.5px;
    margin-left: -7.5px;
  }
  .c-grid--base-x > [class*="c-col"]{
    padding-right: 7.5px;
    padding-left: 7.5px;
  }
  .c-grid--base-y{
    margin-top: -7.5px;
    margin-bottom: -7.5px;
  }
  .c-grid--base-y > [class*="c-col"]{
    margin-top: 7.5px;
    margin-bottom: 7.5px;
  }
  .p-swiper [class].swiper-button-prev{
    left: 15px;
  }
  .p-swiper [class].swiper-button-next{
    right: 15px;
  }
  .u-break-base-d{
    display: inherit !important;
  }
  .u-break-base-n{
    display: none !important;
  }
  .no-js .u-nojs-break-base-d{
    display: inherit !important;
  }
  .no-js .u-nojs-break-base-n{
    display: none !important;
  }
}
@media screen and (max-width: 1023px){
  html{
    width: auto;
  }
  .c-row--lg{
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    margin-top: 70px;
    margin-bottom: 70px;
  }
  .c-row--lg .c-row__header{
    -webkit-box-ordinal-group: 1 !important;
    -webkit-order: 0 !important;
        -ms-flex-order: 0 !important;
            order: 0 !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
    width: auto;
  }
  .c-row--lg .c-row__content{
    margin-top: 20px;
    -webkit-box-ordinal-group: 1 !important;
    -webkit-order: 0 !important;
        -ms-flex-order: 0 !important;
            order: 0 !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
    width: auto;
  }
  .c-grid--lg{
    margin: -7.5px;
  }
  .c-grid--lg > [class*="c-col"]{
    margin-top: 7.5px;
    margin-bottom: 7.5px;
    padding-right: 7.5px;
    padding-left: 7.5px;
  }
  .c-grid--lg-x{
    margin-right: -7.5px;
    margin-left: -7.5px;
  }
  .c-grid--lg-x > [class*="c-col"]{
    padding-right: 7.5px;
    padding-left: 7.5px;
  }
  .c-grid--lg-y{
    margin-top: -7.5px;
    margin-bottom: -7.5px;
  }
  .c-grid--lg-y > [class*="c-col"]{
    margin-top: 7.5px;
    margin-bottom: 7.5px;
  }
  .p-app-bnr{
    width: 560px;
  }
  .p-app-bnr__thumb{
    padding: 0 15px;
    position: relative;
  }
  .p-app-bnr__thumb:before{
    content: " ";
    display: block;
    width: 100%;
    height: 23px;
    position: absolute;
    left: 0;
    bottom: -5px;
    z-index: 1;
    background-image: -webkit-linear-gradient(bottom, #fefefc 0%, #fefefc 35%, rgba(254, 254, 252, 0) 100%);
    background-image: linear-gradient(0deg, #fefefc 0%, #fefefc 35%, rgba(254, 254, 252, 0) 100%);
  }
  .p-app-bnr__content{
    padding: 0 15px 15px 15px;
  }
  .p-app-bnr__link{
    padding-bottom: 5px;
  }
  .p-app-bnr__caption{
    line-height: 1;
    margin-top: 15px;
    margin-bottom: 15px;
  }
  .p-app-bnr__caption img{
    max-width: 90%;
  }
  .p-app-bnr__text{
    margin-bottom: 25px;
  }
  .p-container-outline{
    padding: 20px 30px;
  }
  .p-season{
    width: 100%;
    left: 0;
    margin-left: auto;
    margin-right: auto;
  }
  .p-season__wood{
    top: -8%;
  }
  .p-nav__list{
    font-size: 0;
  }
  .p-nav__col{
    font-size: 1.6rem;
    display: inline-block;
    width: 50%;
    padding: 2px;
  }
  .p-nav__col.p-nav__col--first{
    width: 100%;
  }
  .p-nav__link{
    border-radius: 8px;
    padding: 1em;
    font-size: 1.4rem;
  }
  .p-nav__link:not(.is-current){
    background-color: rgba(0, 0, 0, 0.1);
  }
  .p-page-header__menu{
    padding-bottom: 15px;
  }
  .p-search--select .p-search__btn{
    display: block;
    margin: 15px auto;
    height: auto;
    position: static;
    width: 200px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .p-home-program [class].p-heading{
    margin-bottom: 25px;
  }
  .p-recruit-section__illust{
    margin-top: 25px;
    width: 50%;
    padding-left: 5px;
    padding-right: 5px;
  }
  .p-sortarea [class].p-search.p-search--select{
    text-align: center;
  }
  .p-sort__list:before, .p-sort__list:after{
    content: " ";
    display: block;
    position: absolute;
    width: 0;
    height: 0;
    bottom: -2px;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
  }
  .p-sort__list:before{
    border-bottom: 15px solid #009944;
    border-right: 13px solid transparent;
    border-left: 13px solid transparent;
    border-top: 0 solid transparent;
  }
  .p-sort__list:after{
    border-bottom: 13px solid #f9f9f9;
    border-right: 11px solid transparent;
    border-left: 11px solid transparent;
    border-top: 0 solid transparent;
  }
  .p-staff-hero__inner{
    text-align: center;
  }
  .p-staff-hero__inner:before{
    position: static;
    border: 2px solid #1886ba;
    background-color: #ffffff;
    display: inline-block;
    vertical-align: middle;
    border-radius: 50%;
    width: 180px;
    height: 180px;
    background-position: center bottom;
    background-size: 115%;
    margin: 15px;
  }
  .p-staff-hero__header{
    margin-top: 25px;
  }
  .l-separate .p-staff-hero{
    margin-top: 0;
    padding-bottom: 20px;
  }
  .p-theme-white [class].p-nav__link.is-current{
    border-bottom: 1px solid #cccccc;
  }
  .p-theme-white [class].p-nav__link{
    background-color: rgba(204, 204, 204, 0.1);
  }
  .p-tvtan-search:before{
    top: -14.4px;
    right: 46.8px;
    width: 66px;
    height: 51px;
    background-size: 66px 51px;
  }
  .l-accessible-contents__extend{
    display: inherit;
  }
  .l-accessible-trigger{
    display: inline-block;
  }
  .l-accessible-contents{
    opacity: 0;
    
    height: 0;
    width: 100%;
    -webkit-transition: opacity .5s ease-in .4s, height .65s ease-in-out .4s, width .65s ease-in-out .4s;
    transition: opacity .5s ease-in .4s, height .65s ease-in-out .4s, width .65s ease-in-out .4s;
    position: fixed;
    display: block;
    top: 60px;
    left: 0;
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    top: 60px;
  }
  .l-accessible-contents__inner{
    opacity: 0;
    
    -webkit-transition: opacity .3s ease-in 0s, display 0s linear 1s;
    transition: opacity .3s ease-in 0s, display 0s linear 1s;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    height: 100%;
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
  }
  .l-accessible-contents__inner > *{
    padding-bottom: 90px;
  }
  .l-accessible-depend__bar{
    background-color: #fff;
    position: relative;
  }
  .l-accessible-contents{
    z-index: 6;
  }
  .l-accessible-contents{
    background-color: rgba(0, 0, 0, 0.6);
  }
  .l-accessible-contents__extend{
    padding: 15px 5px;
  }
  .l-header{
    line-height: 1;
  }
  .l-header__inner{
    padding-top: 10px;
    padding-bottom: 10px;
    padding-right: 75px;
  }
  .l-header__logo{
    display: inline-block;
    vertical-align: middle;
    float: left;
    width: auto;
  }
  .l-header__logo img{
    width: auto;
    height: 40px;
    vertical-align: top;
  }
  .l-header__other{
    display: inline-block;
    float: right;
    width: auto;
  }
  .l-header [class].p-bnrarea img{
    width: auto;
    height: 40px;
    vertical-align: top;
  }
  .l-logo-main__col{
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    height: 40px;
  }
  .l-logo-main__col img{
    max-width: 100%;
    height: auto;
    vertical-align: middle;
    max-height: 40px;
  }
  .l-logo-main__col--thanks{
    padding-left: 15px;
  }
  .l-header__inner{
    padding-right: 45px;
  }
  .l-header [class].p-bnrarea img{
    max-width: 100%;
    height: auto;
    max-height: 40px;
  }
  .l-area--sub .l-area__main{
    margin-bottom: 30px;
  }
  .l-mediaquery:before{
    content: "tab";
  }
  .l-menu__list{
    display: block;
    font-family: AdobeBlank;
  }
  .l-menu__link{
    background-color: #009944;
    height: 100px;
    padding-bottom: 15px;
    padding-top: 15px;
  }
  .l-menu__link [class^="tv-"]{
    height: 25px;
  }
  .l-menu__text{
    margin-top: 5px;
    margin-bottom: 0;
  }
  .l-menu__text.l-menu__text--sub{
    font-size: 1.4rem;
  }
  .l-menu__text.l-menu__text--sub{
    margin-top: 0;
  }
  .l-menu__item{
    max-width: 100%;
    clear: both;
    font-size: 1.6rem;
    font-family: "YakuHanJP", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴシック Pro", Meiryo, "メイリオ", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    display: inline-block;
    min-height: 1px;
    position: relative;
    vertical-align: top;
    word-spacing: normal;
    width: 50%;
    font-weight: 700;
    padding-top: 1px;
  }
  .l-menu__item:not(:nth-child(2n+1)){
    padding-left: 1px;
  }
  .l-menu__item:not(:nth-child(2n+1)).l-menu__item--free{
    padding-right: 0;
  }
  .l-menu__item.l-menu__item--free{
    width: 100%;
  }
  .l-menu__item.l-menu__item--free .l-menu__link{
    height: auto;
    padding-top: 20px;
    padding-bottom: 20px;
  }
  .l-menu__item.l-menu__item--free .l-menu__text{
    padding-top: 37px;
  }
  .l-menu__item.l-menu__item--free [class^="tv-"]{
    margin-right: .2em;
    font-size: 2.4rem;
    vertical-align: top;
  }
  .l-menu__item.l-menu__item--home{
    width: 100%;
  }
  .l-menu__item.l-menu__item--serching{
    background-color: #009944;
    padding-top: 15px;
    padding-bottom: 15px;
    width: 100%;
    padding-left: 8%;
    padding-right: 8% !important;
  }
  .l-menu__item.l-menu__item--serching .p-searching__btn{
    top: 1px;
    right: 1px;
    width: 28px;
    height: 28px;
  }
  .l-pagetop__inner{
    right: 15px;
    width: 66px;
    height: 90px;
  }
  .l-pagetop__innerText{
    font-size: 1.0rem;
    width: 42px;
    height: 43.8px;
    padding-top: 3px;
    -webkit-transform: scale(0.8);
        -ms-transform: scale(0.8);
            transform: scale(0.8);
  }
  .l-pagetop__inner:before{
    -webkit-transform-origin: 21px 21px;
        -ms-transform-origin: 21px 21px;
            transform-origin: 21px 21px;
  }
  .l-spmenu-trigger{
    display: inline-block;
  }
  .l-spmenu{
    opacity: 0;
    
    height: 0;
    width: 100%;
    -webkit-transition: opacity .3s ease-in .4s, height 0s ease-in-out 0s, width .65s ease-in-out .4s;
    transition: opacity .3s ease-in .4s, height 0s ease-in-out 0s, width .65s ease-in-out .4s;
    position: fixed;
    z-index: 15;
    display: block;
    bottom: 50px;
    left: 0;
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  .l-spmenu__inner{
    opacity: 0;
    
    -webkit-transition: opacity .3s ease-in 0s, display 0s linear 1s;
    transition: opacity .3s ease-in 0s, display 0s linear 1s;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    height: 100%;
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
  }
  .l-spmenu-bar{
    position: fixed;
    width: 100%;
    height: 50px;
    z-index: 15;
    bottom: 0;
    left: 0;
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0.8);
  }
  .l-spmenu{
    background-color: rgba(0, 0, 0, 0.6);
  }
  [id="wpadminbar"]{
    display: none;
  }
  html[class]{
    margin-top: 0 !important;
  }
  .u-break-lg-d{
    display: inherit !important;
  }
  .u-break-lg-n{
    display: none !important;
  }
  .no-js .u-nojs-break-lg-d{
    display: inherit !important;
  }
  .no-js .u-nojs-break-lg-n{
    display: none !important;
  }
}
@media screen and (max-width: 767px){
  html{
    width: auto;
  }
  .c-row--md{
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    margin-top: 70px;
    margin-bottom: 70px;
  }
  .c-row--md .c-row__header{
    -webkit-box-ordinal-group: 1 !important;
    -webkit-order: 0 !important;
        -ms-flex-order: 0 !important;
            order: 0 !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
    width: auto;
  }
  .c-row--md .c-row__content{
    margin-top: 20px;
    -webkit-box-ordinal-group: 1 !important;
    -webkit-order: 0 !important;
        -ms-flex-order: 0 !important;
            order: 0 !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
    width: auto;
  }
  .c-grid--md{
    margin: -7.5px;
  }
  .c-grid--md > [class*="c-col"]{
    margin-top: 7.5px;
    margin-bottom: 7.5px;
    padding-right: 7.5px;
    padding-left: 7.5px;
  }
  .c-grid--md-x{
    margin-right: -7.5px;
    margin-left: -7.5px;
  }
  .c-grid--md-x > [class*="c-col"]{
    padding-right: 7.5px;
    padding-left: 7.5px;
  }
  .c-grid--md-y{
    margin-top: -7.5px;
    margin-bottom: -7.5px;
  }
  .c-grid--md-y > [class*="c-col"]{
    margin-top: 7.5px;
    margin-bottom: 7.5px;
  }
  .c-map-container{
    height: 300px;
  }
  .c-table-md-row,
  .c-table-md-row > thead,
  .c-table-md-row > tbody,
  .c-table-md-row > tbody > tr,
  .c-table-md-row > tbody > tr > th,
  .c-table-md-row > tbody > tr > td,
  .c-table-md-row > caption,
  .c-table-md-row > tfoot{
    width: 100% !important;
    display: block !important;
  }
  .p-article-info.p-article-info--important .p-article-info__col.p-article-info__col--contents{
    padding-right: 5px;
  }
  .p-article-info.p-article-info--important .p-article-info__col.p-article-info__col--contents:before{
    right: 8px;
  }
  .p-article-info__more{
    padding: 10px 15px;
    border-radius: 0 0 15px 15px;
    background-color: rgba(238, 238, 238, 0.5);
  }
  .p-article-info__inner{
    padding: 10px 15px 10px 15px;
  }
  .p-article-info__col{
    font-size: 1.2rem;
  }
  .p-article-link__col{
    padding-top: 7.5px;
    padding-bottom: 7.5px;
  }
  .p-article{
    padding: 40px 15px;
  }
  .p-article__heading{
    font-size: 2.0rem;
  }
  .p-article__footer{
    margin-bottom: 10px;
  }
  .p-article-program__inner{
    padding: 15px;
  }
  .p-article-program__footer{
    padding-bottom: 20px;
  }
  .p-article-document{
    padding: 12px 10px 16px 25px;
  }
  .p-pickup{
    padding: 25px 15px 35px 15px;
  }
  .p-pickup [class].p-heading-underline{
    margin-bottom: 20px;
  }
  .p-pickup__content + .p-pickup__content{
    margin-top: 35px;
  }
  .p-pickup__content.p-pickup__content--space-m + .p-pickup__content.p-pickup__content--space-m{
    margin-top: 40px;
  }
  .p-pickup-grid__col{
    width: 100%;
    margin-bottom: 25px;
  }
  .p-pickup__paragraph p + p{
    margin-top: 1.65em;
  }
  .p-pickup__footer{
    margin-top: 40px;
    padding-top: 35px;
  }
  .p-feed-program-group{
    padding-top: 40px;
  }
  .p-feed-program__heading{
    font-size: 1.4rem;
  }
  .p-feed-program__content{
    padding: 15px 10px 15px 10px;
  }
  .p-feed-program__bottom{
    padding: 0 10px 20px 10px;
  }
  .p-binder:before{
    -webkit-transform: scale(0.5);
        -ms-transform: scale(0.5);
            transform: scale(0.5);
  }
  .p-binder .p-form{
    margin-top: 20px;
  }
  .p-bnrlist [class].swiper-button-prev{
    left: -20px;
  }
  .p-bnrlist [class].swiper-button-next{
    right: -20px;
  }
  .p-caption{
    font-size: 1.6rem;
  }
  .p-container-outline{
    padding: 20px 15px;
  }
  .p-container-outline.p-container-outline--info{
    margin-top: 20px;
    margin-bottom: 50px;
  }
  .p-dl-agreement dd{
    margin-top: 1em;
  }
  .p-dl-agreement dd + dt{
    margin-top: 2.4em;
  }
  .p-dl-agreement__indent{
    padding-left: 5px;
  }
  .p-dl-agreement__sub{
    margin-left: 1em;
  }
  .p-dr-info__pic, .p-dr-info__content{
    margin-bottom: 15px;
  }
  .p-dr-chief{
    padding: 20px;
  }
  .p-dr-greeting__col{
    margin-bottom: 15px;
  }
  .p-dr-greeting + .p-dr-greeting{
    margin-top: 30px;
    padding-top: 30px;
  }
  .p-form__inner{
    padding: 25px 12px 25px 12px;
  }
  .p-form-table,
  .p-form-table tr,
  .p-form-table tbody,
  .p-form-table thead,
  .p-form-table th,
  .p-form-table td{
    display: block;
    width: 100%;
  }
  .p-form-table tr{
    padding-top: 9px;
    padding-bottom: 15px;
  }
  .p-form-table th, .p-form-table td{
    padding-top: 5px;
    padding-bottom: 5px;
  }
  .p-form .p-form__heading{
    font-size: 2.0rem;
  }
  .p-form__btn{
    margin-top: 25px;
  }
  .p-gallery__col{
    margin-bottom: 15px;
  }
  .p-gallery__col.p-gallery__col--list img{
    width: 100%;
  }
  .p-heading-outer{
    margin-bottom: 25px;
  }
  .p-heading-outer.p-heading-outer--s{
    margin-bottom: 25px;
  }
  .p-heading-underline{
    line-height: 1.3;
    padding-bottom: 9px;
  }
  .p-heading-underline--drtvtan:before{
    width: 43px;
  }
  .p-heading-underline--drtvtan .p-heading-underline__free{
    padding-left: 40px;
  }
  .p-heading-underline--drtvtan .p-heading-underline__free:before{
    position: absolute;
    left: -5px;
    bottom: 0;
    content: " ";
    z-index: 2;
    background-image: url(../images/sprite.png?1588222826014);
    background-position: -246px -142px;
    width: 30px;
    height: 25px;
  }
  .p-heading-underline--hospital:before{
    width: 43px;
  }
  .p-heading-underline--hospital .p-heading-underline__free{
    padding-left: 40px;
  }
  .p-heading-underline--hospital .p-heading-underline__free:before{
    position: absolute;
    left: 0;
    bottom: -5px;
    content: " ";
    z-index: 2;
    background-image: url(../images/sprite.png?1588222826014);
    background-position: -30px -207px;
    width: 30px;
    height: 23px;
  }
  .p-heading-hospitalname__sub{
    font-size: 1.4rem;
  }
  .p-heading-hospitalname__free{
    font-size: 2.8rem;
  }
  .p-heading-archive{
    font-size: 2.2rem;
  }
  .p-heading-direct{
    font-size: 2.2rem;
  }
  .p-info-notices{
    border-radius: 16px;
  }
  .p-info-notices__inner{
    display: block;
  }
  .p-info-notices__col{
    display: block;
    width: 100%;
  }
  .p-info-notices__col.p-info-notices__col--heading{
    padding: 5px;
    border-radius: 0;
  }
  .p-info-notices__col.p-info-notices__col--content{
    font-size: 1.4rem;
  }
  .p-kumamoto-village{
    padding-bottom: 55px;
  }
  .p-kumamoto-village:before{
    width: 375px;
    height: 41px;
    background-size: 23%, 23%, 23%, 23%;
    background-position: left bottom, 33% bottom, 66% bottom, right bottom;
  }
  .p-kumamoto-village:after{
    height: 10px;
    background-image: url("../images/home/kumamoto-machinami.png");
    background-position: left bottom;
    background-repeat: repeat-x;
    background-size: 250px;
  }
  .p-label-blank__inner{
    display: block;
  }
  .p-label-blank__tag, .p-label-blank__url{
    padding: 5px 15px;
    display: block;
    width: 100% !important;
  }
  .p-label-blank__tag{
    border-radius: 10px 10px 0 0;
  }
  .p-label-blank__url .fa{
    position: static;
  }
  .p-list-ol > li:not(:first-child){
    margin-top: 20px;
  }
  .p-list-disc > li:not(:first-child){
    margin-top: 20px;
  }
  .p-mainview [class].swiper-button-prev{
    left: -10px;
  }
  .p-mainview [class].swiper-button-next{
    right: -10px;
  }
  .p-mainview [class].p-video__inner{
    height: auto;
    padding-top: 0;
  }
  .p-mainview [class].p-video__iframe{
    position: relative;
    padding-top: 56.5%;
  }
  .p-mainview [class].p-video__info{
    position: relative;
  }
  .p-season__wood{
    top: 30%;
  }
  #js-season [class].p-video__inner{
    position: relative;
    z-index: 2;
    height: auto;
    overflow: hidden;
    padding-top: 0;
    border-radius: 8px;
  }
  #js-season [class].p-video__iframe{
    position: relative;
    padding-top: 56.25%;
  }
  #js-season [class].p-video__info{
    position: static;
  }
  .p-medical{
    margin-top: 15px;
    margin-bottom: 30px;
  }
  .p-medical__title{
    font-size: 1.8rem;
  }
  .p-name-dr__free{
    font-size: 2.0rem;
  }
  .p-name-dr__free.p-name-dr__free--sub{
    font-size: 1.2rem;
  }
  .p-name-reporter__free{
    font-size: 2.6rem;
  }
  .p-page-header{
    padding: 0 10px;
  }
  .p-page-header [class].p-heading-hospitalname{
    margin-bottom: 5px;
  }
  .p-page-header__main{
    padding: 15px 10px;
  }
  .p-page-header__main [class].p-label-blank{
    width: 100%;
    text-align: center;
    margin-top: 8px;
    margin-right: 0;
    margin-bottom: 8px;
  }
  .p-pager.p-pager--before-margin{
    margin-top: 40px;
  }
  .p-pager.p-pager--single{
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .p-pager__inner{
    width: 100%;
  }
  .p-pager__col.p-pager__col--prev-post .p-pager__icon, .p-pager__col.p-pager__col--next-post .p-pager__icon{
    width: 14px;
  }
  .p-pager__col.p-pager__col--prev-post{
    padding-left: 20px;
  }
  .p-pager__col.p-pager__col--next-post{
    padding-right: 20px;
  }
  .p-pager__text{
    font-size: 1.0rem;
  }
  .p-pager__title{
    font-size: 1.2rem;
  }
  .p-programlimit.p-programlimit--ib .p-programlimit__inner{
    padding-left: 20px;
    padding-right: 20px;
  }
  .p-programlimit.p-programlimit--ib .p-programlimit__textS{
    font-size: 1.25em;
  }
  .p-recruit-card__header{
    padding: 10px;
  }
  .p-recruit-card__header [class].p-label-blank{
    margin-top: 10px;
    float: right;
    vertical-align: top;
  }
  .p-recruit-card__header .p-recruit-card__blank{
    vertical-align: top;
  }
  .p-recruit-card__header .p-recruit-card__blank:before, .p-recruit-card__header .p-recruit-card__blank:after{
    content: "";
    display: table;
  }
  .p-recruit-card__header .p-recruit-card__blank:after{
    clear: both;
  }
  .p-recruit-card__inner{
    padding: 25px 15px 30px 15px;
  }
  .p-recruit-card__content:not(:first-child){
    margin-top: 30px;
  }
  .p-recruit-card__col.p-recruit-card__col--sub{
    margin-bottom: 25px;
  }
  .p-reporter__header{
    margin-bottom: 10px;
  }
  .p-reporter-grid > .p-reporter-grid__col{
    width: 100%;
  }
  .p-reporter-grid > .p-reporter-grid__col.p-reporter-grid__col--pic{
    padding-top: 30px;
  }
  .p-reporter-grid > .p-reporter-grid__col.p-reporter-grid__col--pic img{
    max-width: 70%;
  }
  .p-search--large{
    text-align: center;
  }
  .p-search--large .p-search__input{
    padding-right: 0;
  }
  .p-search--large .p-search__btn{
    margin: 15px 0;
    position: static;
    width: 200px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .p-search--select{
    text-align: center;
  }
  .p-search--select .p-search__input{
    padding-right: 0;
  }
  .p-search--select .p-select,
  .p-search--select .p-search__plus{
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
  .p-section__content{
    padding-left: 0;
    padding-bottom: 30px;
  }
  .p-section__caption{
    font-size: 2.4rem;
    margin-bottom: 20px;
  }
  .p-section__footer.p-section__footer--padding-l{
    padding-top: 40px;
    padding-bottom: 40px;
  }
  .p-section.p-section--before-padding{
    padding-top: 30px;
  }
  .p-section.p-section--before-padding-ms{
    padding-top: 30px;
  }
  .p-section.p-section--before-padding-m{
    padding-top: 30px;
  }
  .p-section.p-section--before-padding-l{
    padding-top: 30px;
  }
  .p-section.p-section--before-padding-xl{
    padding-top: 70px;
  }
  .p-section.p-section--after-padding{
    padding-bottom: 30px;
  }
  .p-section.p-section--after-padding-ms{
    padding-bottom: 30px;
  }
  .p-section.p-section--after-padding-m{
    padding-bottom: 30px;
  }
  .p-section.p-section--after-padding-l{
    padding-bottom: 30px;
  }
  .p-section.p-section--after-padding-xl{
    padding-bottom: 70px;
  }
  .p-section.p-section--before-margin{
    margin-top: 30px;
  }
  .p-section.p-section--before-margin-m{
    margin-top: 30px;
  }
  .p-section.p-section--before-margin-l{
    margin-top: 30px;
  }
  .p-section.p-section--before-margin-xl{
    margin-top: 70px;
  }
  .p-section.p-section--after-margin{
    margin-bottom: 30px;
  }
  .p-section.p-section--after-margin-m{
    margin-bottom: 30px;
  }
  .p-section.p-section--after-margin-l{
    margin-bottom: 30px;
  }
  .p-section.p-section--after-margin-xl{
    margin-bottom: 70px;
  }
  .p-home-program [class].p-tablist{
    margin-left: -15px;
    margin-right: -15px;
  }
  .p-sickchildren-bord{
    margin-bottom: 60px;
  }
  .p-section-search{
    padding-left: 15px;
    padding-right: 15px;
  }
  .p-section-search__header{
    margin-top: -17px;
  }
  .p-section-search__header__tvtan{
    width: 50px;
  }
  .p-section-search [class].p-heading-outline{
    text-shadow: 0px -2px 0 #1886ba, 0.66px -1.98px 0 #1886ba, 1.32px -1.32px 0 #1886ba, 1.98px -0.66px 0 #1886ba, 2px 0px 0 #1886ba, 1.98px 0.66px 0 #1886ba, 1.32px 1.32px 0 #1886ba, 0.66px 1.98px 0 #1886ba, 0px 2px 0 #1886ba, -0.66px 1.98px 0 #1886ba, -1.32px 1.32px 0 #1886ba, -1.98px 0.66px 0 #1886ba, -2px 0px 0 #1886ba, -1.98px -0.66px 0 #1886ba, -1.32px -1.32px 0 #1886ba, -0.66px -1.98px 0 #1886ba;
  }
  .p-section-search__content{
    padding-top: 25px;
    padding-bottom: 25px;
    padding-left: 0;
    padding-right: 0;
  }
  .p-infection-section [class].p-heading-underline{
    margin-bottom: 20px;
  }
  .p-sortarea__outline{
    margin-top: 20px;
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 0;
    margin-bottom: 20px;
  }
  .p-sortarea__subtitle{
    font-size: 1.5rem;
    line-height: 1.6;
    margin-top: 20px;
    margin-bottom: 10px;
  }
  .p-sortarea__word [class^="tv-"]{
    font-size: 1.66667em;
  }
  .p-sortarea__word{
    font-size: 1.6rem;
    text-align: center;
  }
  .p-sortarea [class].p-search.p-search--select [class].p-select{
    width: 100%;
  }
  .p-sort__link{
    font-size: 1.8rem;
  }
  .p-sort .p-heading-normal{
    margin-top: 0;
  }
  .p-sort__listCol{
    width: 20%;
  }
  .p-swiper [class].swiper-pagination{
    bottom: 10px;
  }
  .p-tablist{
    border-bottom: none;
  }
  .p-tablist__inner{
    display: block;
    padding-left: 0;
    padding-right: 0;
  }
  .p-tablist__nav > .p-tablist__col{
    padding: 0;
    width: 100%;
    border-top: 1px solid #f5f5f5;
  }
  .p-tablist__link{
    border: none;
    border-radius: 0;
    padding: 15px 5px;
  }
  .p-tabcontent{
    padding-top: 25px;
    padding-bottom: 20px;
  }
  .p-table-info tr:last-child th, .p-table-info tr:last-child td{
    border-bottom: none;
  }
  .p-table-info tr:last-child th:last-child, .p-table-info tr:last-child td:last-child{
    border-bottom: 1px solid #cccccc;
  }
  .p-theme-white [class].p-label-blank.p-label-blank--mirror .p-label-blank__tag{
    border-bottom: 1px solid #cccccc;
  }
  .p-tvtan-search:before{
    top: -12px;
    right: -30px;
    width: 55px;
    height: 42.5px;
    background-size: 55px 42.5px;
  }
  .p-video{
    font-size: 1.4rem;
  }
  .p-video__infoTag{
    font-size: 1.1rem;
    margin-bottom: 10px;
  }
  .l-footer-sub__logo--kkt{
    width: 90px;
  }
  .l-footer-sub__logo--dtt{
    width: 160px;
  }
  .l-footer-sub__nav{
    background-color: #f5f5f5;
  }
  .l-footer-sub__nav li{
    border-bottom: 1px solid #fff;
    width: 100%;
  }
  .l-footer-sub__nav li a{
    padding: 15px 8px;
    display: block;
  }
  .l-footer-sub__nav li:not(:nth-child(2n)){
    border-right: 1px solid #fff;
  }
  .l-footer-sub__nav li:not(:last-child){
    width: 50%;
  }
  .l-footer-sub .p-copyright{
    font-size: 1.0rem;
    color: #009944;
  }
  .l-footer-sub__inner{
    padding-top: 20px;
    padding-bottom: 10px;
  }
  .l-header__pr{
    text-align: center;
  }
  .l-header__pr .p-programlimit{
    display: inline-block;
    -webkit-transform: scale(0.9);
        -ms-transform: scale(0.9);
            transform: scale(0.9);
    width: auto;
    position: relative;
    margin-left: -5%;
    margin-right: -5%;
  }
  .l-header__inner{
    padding-right: 55px;
  }
  .l-hero__inner{
    font-size: 2.4rem;
  }
  .l-hero__inner{
    padding-top: 25px;
    padding-bottom: 25px;
  }
  .l-area--sub{
    padding-bottom: 75px;
  }
  .l-mediaquery:before{
    content: "tab-small";
  }
  .l-menu__link{
    padding-bottom: 18px;
    padding-top: 20px;
  }
  .l-menu__text{
    font-size: 1.4rem;
  }
  .l-menu__text.l-menu__text--sub{
    font-size: 1.2rem;
  }
  .u-break-md-d{
    display: inherit !important;
  }
  .u-break-md-n{
    display: none !important;
  }
  .no-js .u-nojs-break-md-d{
    display: inherit !important;
  }
  .no-js .u-nojs-break-md-n{
    display: none !important;
  }
}
@media screen and (max-width: 567px){
  html{
    width: auto;
  }
  .c-row--sm{
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    margin-top: 70px;
    margin-bottom: 70px;
  }
  .c-row--sm .c-row__header{
    -webkit-box-ordinal-group: 1 !important;
    -webkit-order: 0 !important;
        -ms-flex-order: 0 !important;
            order: 0 !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
    width: auto;
  }
  .c-row--sm .c-row__content{
    margin-top: 20px;
    -webkit-box-ordinal-group: 1 !important;
    -webkit-order: 0 !important;
        -ms-flex-order: 0 !important;
            order: 0 !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
    width: auto;
  }
  .c-grid--sm{
    margin: -7.5px;
  }
  .c-grid--sm > [class*="c-col"]{
    margin-top: 7.5px;
    margin-bottom: 7.5px;
    padding-right: 7.5px;
    padding-left: 7.5px;
  }
  .c-grid--sm-x{
    margin-right: -7.5px;
    margin-left: -7.5px;
  }
  .c-grid--sm-x > [class*="c-col"]{
    padding-right: 7.5px;
    padding-left: 7.5px;
  }
  .c-grid--sm-y{
    margin-top: -7.5px;
    margin-bottom: -7.5px;
  }
  .c-grid--sm-y > [class*="c-col"]{
    margin-top: 7.5px;
    margin-bottom: 7.5px;
  }
  .p-binder__inner{
    padding-top: 20px;
  }
  .p-binder:before{
    -webkit-transform: scale(0.3);
        -ms-transform: scale(0.3);
            transform: scale(0.3);
  }
  .p-heading-jump{
    font-size: 1.4rem;
  }
  .l-mediaquery:before{
    content: "sp";
  }
  .u-break-sm-d{
    display: inherit !important;
  }
  .u-break-sm-n{
    display: none !important;
  }
  .no-js .u-nojs-break-sm-d{
    display: inherit !important;
  }
  .no-js .u-nojs-break-sm-n{
    display: none !important;
  }
}
@media screen and (max-width: 411px){
  html{
    width: auto;
  }
  .c-row--xs{
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    margin-top: 70px;
    margin-bottom: 70px;
  }
  .c-row--xs .c-row__header{
    -webkit-box-ordinal-group: 1 !important;
    -webkit-order: 0 !important;
        -ms-flex-order: 0 !important;
            order: 0 !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
    width: auto;
  }
  .c-row--xs .c-row__content{
    margin-top: 20px;
    -webkit-box-ordinal-group: 1 !important;
    -webkit-order: 0 !important;
        -ms-flex-order: 0 !important;
            order: 0 !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
    width: auto;
  }
  .c-grid--xs{
    margin: -7.5px;
  }
  .c-grid--xs > [class*="c-col"]{
    margin-top: 7.5px;
    margin-bottom: 7.5px;
    padding-right: 7.5px;
    padding-left: 7.5px;
  }
  .c-grid--xs-x{
    margin-right: -7.5px;
    margin-left: -7.5px;
  }
  .c-grid--xs-x > [class*="c-col"]{
    padding-right: 7.5px;
    padding-left: 7.5px;
  }
  .c-grid--xs-y{
    margin-top: -7.5px;
    margin-bottom: -7.5px;
  }
  .c-grid--xs-y > [class*="c-col"]{
    margin-top: 7.5px;
    margin-bottom: 7.5px;
  }
  .p-btn.p-btn--pdf .p-btn__inner{
    text-align: center;
    padding-left: 0;
  }
  .p-btn.p-btn--pdf .p-btn__inner i{
    margin-right: 7px;
  }
  .p-season__wood{
    width: 175.5px;
    height: 186.9px;
    background-size: 175.5px !important;
  }
  .l-mediaquery:before{
    content: "sp-small";
  }
  .u-break-xs-d{
    display: inherit !important;
  }
  .u-break-xs-n{
    display: none !important;
  }
  .no-js .u-nojs-break-xs-d{
    display: inherit !important;
  }
  .no-js .u-nojs-break-xs-n{
    display: none !important;
  }
}
@media print, screen and (min-width: 412px){
  html{
    width: auto;
  }
  .c-row--xs .c-row__content{
    margin-top: 0 !important;
  }
  .u-over-xs-d{
    display: inherit !important;
  }
  .u-over-xs-n{
    display: none !important;
  }
  .no-js .u-nojs-over-xs-d{
    display: inherit !important;
  }
  .no-js .u-nojs-over-xs-n{
    display: none !important;
  }
}
@media print, screen and (min-width: 568px){
  html{
    width: auto;
  }
  .c-row--sm .c-row__content{
    margin-top: 0 !important;
  }
  .c-col-sm-12_{
    width: 97%;
  }
  .c-col-sm-11_{
    width: 88.66667%;
  }
  .c-col-sm-10_{
    width: 80.33333%;
  }
  .c-col-sm-9_{
    width: 72%;
  }
  .c-col-sm-8_{
    width: 63.66667%;
  }
  .c-col-sm-7_{
    width: 55.33333%;
  }
  .c-col-sm-6_{
    width: 47%;
  }
  .c-col-sm-5_{
    width: 38.66667%;
  }
  .c-col-sm-4_{
    width: 30.33333%;
  }
  .c-col-sm-3_{
    width: 22%;
  }
  .c-col-sm-2_{
    width: 13.66667%;
  }
  .c-col-sm-1_{
    width: 5.33333%;
  }
  .c-col-sm-12{
    width: 100%;
  }
  .c-col-sm-11{
    width: 91.66666667%;
  }
  .c-col-sm-10{
    width: 83.33333333%;
  }
  .c-col-sm-9{
    width: 75%;
  }
  .c-col-sm-8{
    width: 66.66666667%;
  }
  .c-col-sm-7{
    width: 58.33333333%;
  }
  .c-col-sm-6{
    width: 50%;
  }
  .c-col-sm-5{
    width: 41.66666667%;
  }
  .c-col-sm-4{
    width: 33.33333333%;
  }
  .c-col-sm-3{
    width: 25%;
  }
  .c-col-sm-2{
    width: 16.66666667%;
  }
  .c-col-sm-1{
    width: 8.33333333%;
  }
  .c-col-sm-auto{
    width: auto;
  }
  .p-heading-homedr{
    font-size: 3.0rem;
    max-width: 380px;
    height: 90px;
  }
  .p-heading-homedr__inner{
    padding-top: 18px;
    background-image: url("../images/common/h-mocomoco.png");
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: 380px;
  }
  .u-over-sm-d{
    display: inherit !important;
  }
  .u-over-sm-n{
    display: none !important;
  }
  .no-js .u-nojs-over-sm-d{
    display: inherit !important;
  }
  .no-js .u-nojs-over-sm-n{
    display: none !important;
  }
}
@media print, screen and (min-width: 768px){
  html{
    width: auto;
  }
  .c-row--md .c-row__content{
    margin-top: 0 !important;
  }
  .c-col-md-12_{
    width: 97%;
  }
  .c-col-md-11_{
    width: 88.66667%;
  }
  .c-col-md-10_{
    width: 80.33333%;
  }
  .c-col-md-9_{
    width: 72%;
  }
  .c-col-md-8_{
    width: 63.66667%;
  }
  .c-col-md-7_{
    width: 55.33333%;
  }
  .c-col-md-6_{
    width: 47%;
  }
  .c-col-md-5_{
    width: 38.66667%;
  }
  .c-col-md-4_{
    width: 30.33333%;
  }
  .c-col-md-3_{
    width: 22%;
  }
  .c-col-md-2_{
    width: 13.66667%;
  }
  .c-col-md-1_{
    width: 5.33333%;
  }
  .c-col-md-12{
    width: 100%;
  }
  .c-col-md-11{
    width: 91.66666667%;
  }
  .c-col-md-10{
    width: 83.33333333%;
  }
  .c-col-md-9{
    width: 75%;
  }
  .c-col-md-8{
    width: 66.66666667%;
  }
  .c-col-md-7{
    width: 58.33333333%;
  }
  .c-col-md-6{
    width: 50%;
  }
  .c-col-md-5{
    width: 41.66666667%;
  }
  .c-col-md-4{
    width: 33.33333333%;
  }
  .c-col-md-3{
    width: 25%;
  }
  .c-col-md-2{
    width: 16.66666667%;
  }
  .c-col-md-1{
    width: 8.33333333%;
  }
  .c-col-md-auto{
    width: auto;
  }
  .c-map-container{
    height: 450px;
  }
  [data-slick] .slick-list{
    padding-left: 0;
    padding-right: 0;
  }
  .p-article-info__link{
    border-radius: 30px;
    display: table;
    table-layout: fixed;
  }
  .p-article-info__tag{
    border-radius: 30px;
  }
  .p-article-info__more{
    border-radius: 30px;
  }
  .p-article-info__inner{
    width: 100%;
    padding: 0;
    display: table;
  }
  .p-article-info__inner .p-article-info__date{
    width: 105px;
    margin-bottom: 0;
    text-align: center;
  }
  .p-article-info__inner .p-article-info__date,
  .p-article-info__inner .p-article-info__text{
    padding-top: 8px;
    padding-bottom: 8px;
    display: table-cell;
  }
  .p-article-info__col{
    display: table-cell;
  }
  .p-article-info__col--tag{
    width: 150px;
  }
  .p-article-info__col--link{
    width: 120px;
  }
  .p-article-card{
    width: 270px;
  }
  .p-article-link{
    display: table;
  }
  .p-article-link__col{
    display: table-cell;
    vertical-align: top;
  }
  .p-article-link__col.p-article-link__col--content{
    padding-right: 30px;
  }
  .p-article-link__col.p-article-link__col--bnr{
    width: 170px;
  }
  .p-pickup-grid__col.p-pickup-grid__col--media{
    width: 37.07865%;
  }
  .p-pickup-grid__col.p-pickup-grid__col--media + .p-pickup-grid__col--other{
    width: 62.92135%;
    padding-left: 30px;
  }
  .p-binder{
    padding: 35px;
    border-radius: 16px;
  }
  .p-binder__inner{
    padding-top: 65px;
    padding-bottom: 30px;
  }
  .p-bnrlist{
    padding-top: 75px;
    padding-bottom: 95px;
  }
  .p-dr-info{
    display: table;
    padding-left: 10px;
    padding-right: 10px;
  }
  .p-dr-info__pic, .p-dr-info__content{
    display: table-cell;
    vertical-align: top;
  }
  .p-dr-info__pic{
    width: 100px;
  }
  .p-dr-info__content{
    padding-left: 10px;
  }
  .p-dr-greeting__col{
    float: left;
  }
  .p-dr-greeting__col.p-dr-greeting__col--content{
    float: right;
    width: 69.07216%;
  }
  .p-dr-greeting__col.p-dr-greeting__col--header{
    width: 27.83505%;
  }
  .p-form-table th{
    width: 170px;
    padding-left: 10px;
  }
  .p-form-table tr th, .p-form-table tr td{
    position: relative;
  }
  .p-form-table tr th:before, .p-form-table tr td:before{
    content: " ";
    position: absolute;
    left: -1px;
    bottom: 0;
    display: block;
    width: 100%;
    height: 1px;
    border-bottom: 1px dashed #009944;
  }
  .p-form-table th, .p-form-table td{
    padding-top: 20px;
    padding-bottom: 20px;
  }
  .p-form-outer{
    padding: 30px;
  }
  .p-gallery__col.p-gallery__col--view{
    width: 58.76289%;
    float: left;
  }
  .p-gallery__col.p-gallery__col--list{
    width: 38.14433%;
    float: right;
  }
  .p-heading-homedr{
    margin-left: -38px;
  }
  .p-heading-homedr:before{
    width: 80px;
    height: 76px;
    right: -40px;
    background-image: url("../images/common/h-tvtan-state-normal.png");
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: 80px;
  }
  .p-heading-homedr:after{
    width: 74px;
    height: 40px;
    right: -6px;
    top: -15px;
    background-image: url("../images/common/h-rainbow.png");
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: 74px;
  }
  .p-heading-fine{
    font-size: 2.4rem;
  }
  .p-heading-outline{
    font-size: 2.4rem;
  }
  .p-heading-normal{
    font-size: 2.4rem;
  }
  .p-heading-underline{
    font-size: 2.4rem;
  }
  .p-heading-yey{
    font-size: 2.0rem;
  }
  .p-info-notices__col.p-info-notices__col--heading{
    width: 120px;
  }
  .p-label-blank{
    min-width: 300px;
  }
  .p-mainview [class].p-article-info{
    margin-bottom: 25px;
  }
  .p-pager__col.p-pager__col--prev .p-pager__link, .p-pager__col.p-pager__col--next .p-pager__link{
    padding: 10px;
  }
  .p-recruit-card__header .p-recruit-card__title,
  .p-recruit-card__header .p-recruit-card__blank{
    display: inline-block;
    vertical-align: top;
  }
  .p-recruit-card__header .p-recruit-card__title{
    float: left;
    margin-top: 5px;
    margin-bottom: 5px;
    padding-left: 10px;
  }
  .p-recruit-card__header .p-recruit-card__blank{
    float: right;
    margin-top: 5px;
    margin-bottom: 5px;
  }
  .p-recruit-card__header .p-recruit-card__blank [class].p-label-blank{
    vertical-align: bottom;
  }
  .p-recruit-card__footer [class].p-btn{
    margin-right: 0;
  }
  .p-recruit-card__layout{
    display: table;
    width: 100%;
    table-layout: fixed;
  }
  .p-recruit-card__col{
    display: table-cell;
    vertical-align: top;
  }
  .p-recruit-card__col.p-recruit-card__col--sub{
    width: 270px;
  }
  .p-recruit-card__col.p-recruit-card__col--content{
    padding-left: 30px;
  }
  .p-reporter-grid.p-reporter-grid--rv{
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -webkit-flex-direction: row-reverse;
        -ms-flex-direction: row-reverse;
            flex-direction: row-reverse;
  }
  .p-reporter-grid.p-reporter-grid--rv > .p-reporter-grid__col.p-reporter-grid__col--pic img{
    left: auto;
    right: 15px;
  }
  .p-reporter-grid > .p-reporter-grid__col.p-reporter-grid__col--content{
    width: 65.81197%;
    padding-bottom: 75px;
  }
  .p-reporter-grid > .p-reporter-grid__col.p-reporter-grid__col--pic{
    padding-left: 0;
    padding-right: 0;
    width: 31.62393%;
  }
  .p-reporter-grid > .p-reporter-grid__col.p-reporter-grid__col--pic > *{
    position: relative;
  }
  .p-reporter-grid > .p-reporter-grid__col.p-reporter-grid__col--pic img{
    position: absolute;
    bottom: 0;
    right: 0;
  }
  .p-home-program{
    padding-bottom: 55px;
  }
  .p-infection-section__illust-cover > img{
    position: absolute;
    bottom: 0;
    left: 0;
  }
  .p-sortarea__word.p-sortarea__word--free{
    margin-right: 30px;
  }
  .p-sortarea__word.p-sortarea__word--sort{
    margin-right: 20px;
  }
  .p-swiper [class].js-swiper-row [class].swiper-button-disabled{
    display: none !important;
  }
  .p-tablist__nav{
    display: table;
    table-layout: fixed;
  }
  .p-tablist__nav > .p-tablist__col{
    display: table-cell;
  }
  .p-theme-white [class].p-tablist{
    border-bottom-color: #cccccc;
  }
  .p-theme-white [class].p-tablist__selecthead{
    background-color: #009944;
  }
  .p-theme-white [class].p-tablist__link{
    border: none;
    color: #009944;
  }
  .p-theme-white [class].p-tablist__link.is-active{
    border-top: 2px solid  #cccccc;
    border-left: 2px solid  #cccccc;
    border-right: 2px solid  #cccccc;
    color: #009944;
    background-color: #ffffff;
  }
  .p-theme-white [class].p-label-blank.p-label-blank--mirror .p-label-blank__tag{
    box-shadow: 1px 0 0 0 #ccc, 1px 0 0 0 #ccc, 1px 0 0 0 #ccc;
  }
  .l-footer-share__inner{
    padding-top: 47px;
    padding-bottom: 50px;
  }
  .l-footer-sub__logo{
    padding: 0 20px;
  }
  .l-footer-sub__nav li:not(:first-child):before{
    content: "";
    height: 1em;
    width: 1px;
    vertical-align: middle;
    background-color: #009944;
    display: inline-block;
    margin-left: .5em;
    margin-right: .5em;
  }
  .l-header__pr .p-programlimit{
    font-size: 1.4rem;
  }
  .l-header .l-header__inner{
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }
  .l-header .l-header__logo, .l-header .l-header__other{
    -webkit-box-flex: 0;
    -webkit-flex: 0 1 auto;
        -ms-flex: 0 1 auto;
            flex: 0 1 auto;
  }
  .l-header .l-header__logo{
    width: auto;
    margin-right: auto;
  }
  .l-hero__inner:before{
    content: " ";
    background-image: url("../images/common/tvtan-hero.png");
    background-size: 183px 140px;
    background-position: 0 0;
    background-repeat: no-repeat;
    width: 183px;
    height: 140px;
    right: 15px;
    bottom: -12px;
    z-index: 3;
    position: absolute;
  }
  .u-over-md-d{
    display: inherit !important;
  }
  .u-over-md-n{
    display: none !important;
  }
  .no-js .u-nojs-over-md-d{
    display: inherit !important;
  }
  .no-js .u-nojs-over-md-n{
    display: none !important;
  }
}
@media print, screen and (min-width: 1024px){
  html{
    width: auto;
  }
  body{
    border-top: 5px solid #009944;
  }
  .c-row--lg .c-row__content{
    margin-top: 0 !important;
  }
  .c-col-lg-12_{
    width: 97%;
  }
  .c-col-lg-11_{
    width: 88.66667%;
  }
  .c-col-lg-10_{
    width: 80.33333%;
  }
  .c-col-lg-9_{
    width: 72%;
  }
  .c-col-lg-8_{
    width: 63.66667%;
  }
  .c-col-lg-7_{
    width: 55.33333%;
  }
  .c-col-lg-6_{
    width: 47%;
  }
  .c-col-lg-5_{
    width: 38.66667%;
  }
  .c-col-lg-4_{
    width: 30.33333%;
  }
  .c-col-lg-3_{
    width: 22%;
  }
  .c-col-lg-2_{
    width: 13.66667%;
  }
  .c-col-lg-1_{
    width: 5.33333%;
  }
  .c-col-lg-12{
    width: 100%;
  }
  .c-col-lg-11{
    width: 91.66666667%;
  }
  .c-col-lg-10{
    width: 83.33333333%;
  }
  .c-col-lg-9{
    width: 75%;
  }
  .c-col-lg-8{
    width: 66.66666667%;
  }
  .c-col-lg-7{
    width: 58.33333333%;
  }
  .c-col-lg-6{
    width: 50%;
  }
  .c-col-lg-5{
    width: 41.66666667%;
  }
  .c-col-lg-4{
    width: 33.33333333%;
  }
  .c-col-lg-3{
    width: 25%;
  }
  .c-col-lg-2{
    width: 16.66666667%;
  }
  .c-col-lg-1{
    width: 8.33333333%;
  }
  .c-col-lg-auto{
    width: auto;
  }
  .p-app-bnr{
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    height: 350px;
  }
  .p-app-bnr__thumb{
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 auto;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    padding-left: 47px;
  }
  .p-app-bnr__content{
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 auto;
        -ms-flex: 1 1 auto;
            flex: 1 1 auto;
    padding-left: 27px;
    padding-right: 30px;
  }
  .p-container-outline.p-container-outline--info{
    padding: 20px 0;
  }
  .p-container-outline.p-container-outline--info .p-container-outline__content{
    padding-left: 30px;
  }
  .p-mainview{
    padding-top: 55px;
  }
  .p-mainview:before{
    content: " ";
    top: 0;
    background-image: url("../images/common/main-visula-top-wave.png");
    background-position: center top;
    background-repeat: no-repeat;
    background-size: 100% 30px;
  }
  .p-nav__list{
    display: table;
    table-layout: fixed;
  }
  .p-nav__col{
    display: table-cell;
    vertical-align: bottom;
  }
  .p-nav__link{
    padding: 15px 10px 15px 10px;
    border-radius: 8px 8px 0 0;
    margin-left: 5px;
    margin-right: 5px;
  }
  .p-recruit-section{
    padding-bottom: 90px;
  }
  .p-recruit-section__illust{
    position: absolute;
    bottom: -35px;
    z-index: 1;
  }
  .p-recruit-section__illust.p-recruit-section__illust--left{
    left: 0;
    width: 17.73196%;
  }
  .p-recruit-section__illust.p-recruit-section__illust--right{
    right: 0;
    width: 17.1134%;
  }
  .p-sort__link.is-active:before, .p-sort__link.is-active:after{
    content: " ";
    display: block;
    position: absolute;
    width: 0;
    height: 0;
    bottom: -29px;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
  }
  .p-sort__link.is-active:before{
    border-bottom: 15px solid #009944;
    border-right: 13px solid transparent;
    border-left: 13px solid transparent;
    border-top: 0 solid transparent;
  }
  .p-sort__link.is-active:after{
    border-bottom: 12px solid #f9f9f9;
    border-right: 10px solid transparent;
    border-left: 10px solid transparent;
    border-top: 0 solid transparent;
  }
  .p-staff-hero__inner{
    height: 320px;
  }
  .p-staff-hero__inner:before{
    width: 100%;
    height: 375px;
    position: absolute;
    background-size: 470px;
    top: -19px;
    left: 0;
  }
  .l-header__inner{
    display: table;
  }
  .l-header__logo, .l-header__other{
    display: table-cell;
    vertical-align: top;
  }
  .l-header__logo{
    padding-top: 20px;
    padding-left: 22px;
  }
  .l-header__areaCol[class].p-bnrarea{
    padding-right: 40px;
  }
  .l-hero{
    padding-top: 30px;
  }
  .l-hero:after{
    content: " ";
    display: block;
    width: 100%;
    height: 30px;
    position: absolute;
    top: 0;
    background-image: url("../images/common/main-visula-top-wave.png");
    background-position: center top;
    background-repeat: no-repeat;
    background-size: 100% 30px;
  }
  .l-area--sub .l-area__main{
    width: 69.07216%;
    float: left;
  }
  .l-area--sub .l-area__sub{
    width: 27.83505%;
    float: right;
  }
  .l-menu{
    margin-top: 22px;
    padding-bottom: 27px;
    margin-bottom: -30px;
  }
  .l-menu__list{
    border-left: 1px dashed #cccccc;
    border-right: 1px dashed #cccccc;
    display: table;
    table-layout: fixed;
  }
  .l-menu__text.l-menu__text--sub{
    color: #cccccc;
  }
  .l-menu__item{
    display: table-cell;
    width: auto;
    vertical-align: top;
    color: #333333;
  }
  .l-menu__item.l-menu__item--large{
    width: 185px;
  }
  .l-menu__item [class^="tv-"]{
    color: #009944;
  }
  .l-menu__item:not(.l-menu__item--first){
    border-left: 1px dashed #cccccc;
  }
  .u-over-lg-d{
    display: inherit !important;
  }
  .u-over-lg-n{
    display: none !important;
  }
  .no-js .u-nojs-over-lg-d{
    display: inherit !important;
  }
  .no-js .u-nojs-over-lg-n{
    display: none !important;
  }
}
@media print, screen and (min-width: 1170px){
  html{
    width: auto;
  }
  .c-row--base .c-row__content{
    margin-top: 0 !important;
  }
  .c-col-base-12_{
    width: 97%;
  }
  .c-col-base-11_{
    width: 88.66667%;
  }
  .c-col-base-10_{
    width: 80.33333%;
  }
  .c-col-base-9_{
    width: 72%;
  }
  .c-col-base-8_{
    width: 63.66667%;
  }
  .c-col-base-7_{
    width: 55.33333%;
  }
  .c-col-base-6_{
    width: 47%;
  }
  .c-col-base-5_{
    width: 38.66667%;
  }
  .c-col-base-4_{
    width: 30.33333%;
  }
  .c-col-base-3_{
    width: 22%;
  }
  .c-col-base-2_{
    width: 13.66667%;
  }
  .c-col-base-1_{
    width: 5.33333%;
  }
  .c-col-base-12{
    width: 100%;
  }
  .c-col-base-11{
    width: 91.66666667%;
  }
  .c-col-base-10{
    width: 83.33333333%;
  }
  .c-col-base-9{
    width: 75%;
  }
  .c-col-base-8{
    width: 66.66666667%;
  }
  .c-col-base-7{
    width: 58.33333333%;
  }
  .c-col-base-6{
    width: 50%;
  }
  .c-col-base-5{
    width: 41.66666667%;
  }
  .c-col-base-4{
    width: 33.33333333%;
  }
  .c-col-base-3{
    width: 25%;
  }
  .c-col-base-2{
    width: 16.66666667%;
  }
  .c-col-base-1{
    width: 8.33333333%;
  }
  .c-col-base-auto{
    width: auto;
  }
  .u-over-base-d{
    display: inherit !important;
  }
  .u-over-base-n{
    display: none !important;
  }
  .no-js .u-nojs-over-base-d{
    display: inherit !important;
  }
  .no-js .u-nojs-over-base-n{
    display: none !important;
  }
}
@media print, screen and (min-width: 1200px){
  html{
    width: auto;
  }
}
@media print, screen and (min-width: 1600px){
  html{
    width: auto;
  }
  .p-season{
    width: 100%;
    left: 0;
    margin-left: auto;
    margin-right: auto;
  }
}
@media print, screen and (min-width: 1630px){
  html{
    width: auto;
  }
}
@media screen and (-webkit-min-device-pixel-ratio: 0){
  .android *{
    max-height: 999999px;
  }
  .c-change-img ::i-block-chrome, .c-change-img{
    font-size: 0.00001em;
    letter-spacing: -0.33266em;
  }
  .c-change-img ::i-block-chrome > *, .c-change-img > *{
    letter-spacing: normal;
  }
  .p-pickup-grid ::i-block-chrome, .p-pickup-grid{
    font-size: 0.00001em;
    letter-spacing: -0.33266em;
  }
  .p-pickup-grid ::i-block-chrome > *, .p-pickup-grid > *{
    letter-spacing: normal;
  }
  .p-info-number ::i-block-chrome, .p-info-number{
    font-size: 0.00001em;
    letter-spacing: -0.33266em;
  }
  .p-info-number ::i-block-chrome > *, .p-info-number > *{
    letter-spacing: normal;
  }
  .p-swiper [class].swiper-pagination ::i-block-chrome, .p-swiper [class].swiper-pagination{
    font-size: 0.00001em;
    letter-spacing: -0.33266em;
  }
  .p-swiper [class].swiper-pagination ::i-block-chrome > *, .p-swiper [class].swiper-pagination > *{
    letter-spacing: normal;
  }
  .u-0 ::i-block-chrome, .u-0{
    font-size: 0.00001em !important;
    letter-spacing: -0.33266em;
  }
  .u-0 ::i-block-chrome > *, .u-0 > *{
    letter-spacing: normal !important;
  }
}
@media only screen and (max-width: 767px){
  .js-yearningModal-length-self{
    font-size: 12px;
    padding: 5px 14px;
  }
  .js-yearningModal-title{
    padding: 5px 7px;
    bottom: 64px;
  }
  .js-yearningModal-thumb-group-inner{
    height: 64px;
  }
  .js-yearningModal-thumb-self{
    border-width: 1px;
    height: 44px;
    width: 44px;
  }
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi){
  .p-article-card--new .p-article-card__pic:before{
    background-image: url(../images/sprite@2x.png?1588222826014);
    background-size: 280px 237px;
  }
  .p-article-card--play .p-article-card__pic:after{
    background-image: url(../images/sprite@2x.png?1588222826014);
    background-size: 280px 237px;
  }
  .p-binder:before{
    background-image: url(../images/sprite@2x.png?1588222826014);
    background-size: 280px 237px;
  }
  .p-mainview.is-spring .p-season__wood--right:before{
    background-image: url(../images/sprite@2x.png?1588222826014);
    background-size: 280px 237px;
  }
  .p-mainview.is-summer .p-season__wood--left:before{
    background-image: url(../images/sprite@2x.png?1588222826014);
    background-size: 280px 237px;
  }
  .p-mainview.is-summer .p-season__wood--right:before{
    background-image: url(../images/sprite@2x.png?1588222826014);
    background-size: 280px 237px;
  }
  .p-mainview.is-autom .p-season__wood--left:before{
    background-image: url(../images/sprite@2x.png?1588222826014);
    background-size: 280px 237px;
  }
  .p-mainview.is-autom .p-season__wood--left:after{
    background-image: url(../images/sprite@2x.png?1588222826014);
    background-size: 280px 237px;
  }
  .p-mainview.is-autom .p-season__wood--right:before{
    background-image: url(../images/sprite@2x.png?1588222826014);
    background-size: 280px 237px;
  }
  .p-tvtan-stick:after{
    background-image: url(../images/sprite@2x.png?1588222826014);
    background-size: 280px 237px;
  }
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 3 / 2), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5){
  .p-article-sub:before{
    background-image: url("../images/common/h-tvtan-state-halfhead@2x.png");
  }
  .p-bg-drtvtan{
    background-image: url("../images/bg/bg-dr-tvtan@2x.jpg");
    background-position: left -15px;
    background-repeat: repeat;
    background-size: 240px;
  }
  .p-bg-drtvtan-green, .p-post-theme-news .l-area.l-area--sub[class]{
    background-image: url("../images/bg/bg-dr-tvtan-green@2x.jpg");
    background-position: left -15px;
    background-repeat: repeat;
    background-size: 240px;
  }
  .p-bg-drtvtan-lightgreen{
    background-image: url("../images/bg/bg-dr-tvtan-lightgreen@2x.jpg");
    background-position: left -15px;
    background-repeat: repeat;
    background-size: 240px;
  }
  .p-bg-drtvtan-yellow, .p-post-theme-blog .l-area.l-area--sub[class]{
    background-image: url("../images/bg/bg-dr-tvtan-yellow@2x.jpg");
    background-position: left -15px;
    background-repeat: repeat;
    background-size: 240px;
  }
  .p-bg-drtvtan-yellow-deep{
    background-image: url("../images/bg/bg-dr-tvtan-yellow-deep@2x.jpg");
    background-position: left -15px;
    background-repeat: repeat;
    background-size: 240px;
  }
  .p-bg-drtvtan-lightyellow{
    background-image: url("../images/bg/bg-dr-tvtan-lightyellow@2x.jpg");
    background-position: left -15px;
    background-repeat: repeat;
    background-size: 240px;
  }
  .p-bg-drtvtan-gray{
    background-image: url("../images/bg/bg-dr-tvtan-gray@2x.jpg");
    background-position: left -15px;
    background-repeat: repeat;
    background-size: 240px;
  }
  .p-bg-drtvtan-blue, .p-post-theme-new-medical .l-area.l-area--sub[class]{
    background-image: url("../images/bg/bg-dr-tvtan-blue@2x.jpg");
    background-position: left -15px;
    background-repeat: repeat;
    background-size: 240px;
  }
  .p-bg-drtvtan-lightblue{
    background-image: url("../images/bg/bg-dr-tvtan-lightblue@2x.jpg");
    background-position: left -15px;
    background-repeat: repeat;
    background-size: 240px;
  }
  .p-bg-drtvtan-pink{
    background-image: url("../images/bg/bg-dr-tvtan-pink@2x.jpg");
    background-position: left -15px;
    background-repeat: repeat;
    background-size: 240px;
  }
  .p-bg-drtvtan-pink-deep{
    background-image: url("../images/bg/bg-dr-tvtan-pink-deep@2x.jpg");
    background-position: left -15px;
    background-repeat: repeat;
    background-size: 240px;
  }
  .p-bg-note{
    background-image: url("../images/bg/ptn-note@2x.jpg");
    background-position: left top;
    background-repeat: repeat;
    background-size: 412px;
  }
  .p-bg-cork{
    background-image: url("../images/bg/ptn-cork@2x.jpg");
    background-position: left top;
    background-repeat: repeat;
    background-size: 128px;
  }
  .p-binder{
    background-image: url("../images/bg/ptn-cork@2x.jpg");
    background-position: left top;
    background-repeat: repeat;
    background-size: 128px;
  }
  .p-binder__inner{
    background-image: url("../images/bg/ptn-note@2x.jpg");
    background-position: left top;
    background-repeat: repeat;
    background-size: 412px;
  }
  .p-heading-homedr__inner{
    background-image: url("../images/common/h-mocomoco@2x.png");
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: 266px;
  }
  .p-heading-homedr:before{
    background-image: url("../images/common/h-tvtan-state-normal@2x.png");
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: 64px;
  }
  .p-heading-homedr:after{
    background-image: url("../images/common/h-rainbow@2x.png");
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: 59.2px;
  }
  .p-heading-underline:after{
    background-image: url("../images/bg/line-shash@2x.png");
    background-position: left top;
    background-repeat: repeat-x;
    background-size: 3px;
  }
  .p-heading-underline.p-heading-underline--blue:after{
    background-image: url("../images/bg/line-shash-gray@2x.png");
    background-position: left top;
    background-repeat: repeat-x;
    background-size: 3px;
  }
  .p-heading-underline.p-heading-underline--theme:after{
    background-image: url("../images/bg/line-shash-gray@2x.png");
    background-position: left top;
    background-repeat: repeat-x;
    background-size: 3px;
  }
  .p-kumamoto-village:before{
    background-image: url("../images/home/kumamoto-tujunkyo@2x.png"), url("../images/home/kumamoto-castle@2x.png"), url("../images/home/kumamoto-komeduka@2x.png"), url("../images/home/kumamoto-amakusagokyo@2x.png");
  }
  .p-kumamoto-village:after{
    background-image: url("../images/home/kumamoto-machinami@2x.png");
    background-position: left bottom;
    background-repeat: repeat-x;
    background-size: 500px;
  }
  .p-mainview.is-spring .p-season__wood--left{
    background-image: url("../images/mv/season-wood-spring-l@2x.png");
    background-position: left top;
    background-repeat: no-repeat;
    background-size: 585px;
  }
  .p-mainview.is-spring .p-season__wood--right{
    background-image: url("../images/mv/season-wood-spring-r@2x.png");
    background-position: left top;
    background-repeat: no-repeat;
    background-size: 585px;
  }
  .p-mainview.is-summer .p-season__wood--left{
    background-image: url("../images/mv/season-wood-summer-l@2x.png");
    background-position: left top;
    background-repeat: no-repeat;
    background-size: 585px;
  }
  .p-mainview.is-summer .p-season__wood--right{
    background-image: url("../images/mv/season-wood-summer-r@2x.png");
    background-position: left top;
    background-repeat: no-repeat;
    background-size: 585px;
  }
  .p-mainview.is-spring-summer .p-season__wood--left{
    background-image: url("../images/mv/season-wood-summer-l@2x.png");
    background-position: left top;
    background-repeat: no-repeat;
    background-size: 585px;
  }
  .p-mainview.is-spring-summer .p-season__wood--right{
    background-image: url("../images/mv/season-wood-summer-r@2x.png");
    background-position: left top;
    background-repeat: no-repeat;
    background-size: 585px;
  }
  .p-mainview.is-autom .p-season__wood--left{
    background-image: url("../images/mv/season-wood-autom-l@2x.png");
    background-position: left top;
    background-repeat: no-repeat;
    background-size: 585px;
  }
  .p-mainview.is-autom .p-season__wood--right{
    background-image: url("../images/mv/season-wood-autom-r@2x.png");
    background-position: left top;
    background-repeat: no-repeat;
    background-size: 585px;
  }
  .p-mainview.is-winter .p-season__wood--left{
    background-image: url("../images/mv/season-wood-winter-l@2x.png");
    background-position: left top;
    background-repeat: no-repeat;
    background-size: 585px;
  }
  .p-mainview.is-winter .p-season__wood--right{
    background-image: url("../images/mv/season-wood-winter-r@2x.png");
    background-position: left top;
    background-repeat: no-repeat;
    background-size: 585px;
  }
  .p-mainview:after{
    background-image: url("../images/common/footer-curv-bottom@2x.png");
    background-position: center top;
    background-repeat: no-repeat;
    background-size: 100% 30px;
  }
  .p-programlimit:before{
    background-image: url("../images/common/h-tvtan-state-halfhead@2x.png");
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: 60px;
  }
  .p-staff-hero__inner:before{
    background-image: url("../images/staff/blog-hero-ryu_matsumoto_2@2x.png");
  }
  .p-theme-bg-drtvtan{
    background-image: url("../images/bg/bg-dr-tvtan-lightblue@2x.jpg");
    background-position: left -15px;
    background-repeat: repeat;
    background-size: 240px;
  }
  .p-theme-bg-drtvtan [class].p-heading-underline:after{
    background-image: url("../images/bg/line-shash-gray@2x.png");
    background-position: left top;
    background-repeat: repeat-x;
    background-size: 3px;
  }
  .p-theme-bg-drtvtan.p-theme-bg-drtvtan--deep{
    background-image: url("../images/bg/bg-dr-tvtan-blue@2x.jpg");
    background-position: left -15px;
    background-repeat: repeat;
    background-size: 240px;
  }
  .p-theme-bg-drtvtan.p-theme-bg-drtvtan--deep [class].p-heading-underline:after{
    background-image: url("../images/bg/line-shash@2x.png");
    background-position: left top;
    background-repeat: repeat-x;
    background-size: 3px;
  }
  .p-theme-green .l-area .p-theme-bg-drtvtan{
    background-image: url("../images/bg/bg-dr-tvtan-lightgreen@2x.jpg");
    background-position: left -15px;
    background-repeat: repeat;
    background-size: 240px;
  }
  .p-theme-green .l-area .p-theme-bg-drtvtan.p-theme-bg-drtvtan--deep{
    background-image: url("../images/bg/bg-dr-tvtan-green@2x.jpg");
    background-position: left -15px;
    background-repeat: repeat;
    background-size: 240px;
  }
  .p-theme-pink [class].l-area .p-theme-bg-drtvtan{
    background-image: url("../images/bg/bg-dr-tvtan-pink@2x.jpg");
    background-position: left -15px;
    background-repeat: repeat;
    background-size: 240px;
  }
  .p-theme-pink [class].l-area .p-theme-bg-drtvtan.p-theme-bg-drtvtan--deep{
    background-image: url("../images/bg/bg-dr-tvtan-pink-deep@2x.jpg");
    background-position: left -15px;
    background-repeat: repeat;
    background-size: 240px;
  }
  .p-theme-yellow [class].l-area .p-theme-bg-drtvtan{
    background-image: url("../images/bg/bg-dr-tvtan-yellow@2x.jpg");
    background-position: left -15px;
    background-repeat: repeat;
    background-size: 240px;
  }
  .p-theme-yellow [class].l-area .p-theme-bg-drtvtan.p-theme-bg-drtvtan--deep{
    background-image: url("../images/bg/bg-dr-tvtan-yellow-deep@2x.jpg");
    background-position: left -15px;
    background-repeat: repeat;
    background-size: 240px;
  }
  .p-theme-white .l-area [class].p-heading-underline:after{
    background-image: url("../images/bg/line-shash-gray@2x.png");
    background-position: left top;
    background-repeat: repeat-x;
    background-size: 3px;
  }
  .p-tvtan-search:before{
    background-image: url("../images/common/h-tvtan-state-searching@2x.png");
  }
  .l-footer-contents:before{
    background-image: url("../images/common/footer-curv-top@2x.png");
    background-position: center top;
    background-repeat: no-repeat;
    background-size: 100% 30px;
  }
  .l-footer-contents:after{
    background-image: url("../images/common/footer-curv-bottom@2x.png");
    background-position: center top;
    background-repeat: no-repeat;
    background-size: 100% 30px;
  }
  .l-pagetop__inner:before{
    background-image: url("../images/common/tvtan-balloon@2x.png");
    background-position: left top;
    background-repeat: no-repeat;
    background-size: 100%;
  }
}
@media print, screen and (min-width: 768px) and (min-width: 1024px){
  .p-pickup-grid__col.p-pickup-grid__col--media + .p-pickup-grid__col--other{
    padding-right: 60px;
  }
  .p-reporter-grid.p-reporter-grid--rv > .p-reporter-grid__col.p-reporter-grid__col--content{
    padding-left: 30px;
    padding-right: 100px;
  }
  .p-reporter-grid > .p-reporter-grid__col.p-reporter-grid__col--content{
    padding-left: 110px;
    padding-right: 35px;
  }
}
@media only screen and (min-width: 568px) and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-width: 568px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-width: 568px) and (-o-min-device-pixel-ratio: 3 / 2), only screen and (min-width: 568px) and (min--moz-device-pixel-ratio: 1.5), only screen and (min-width: 568px) and (min-device-pixel-ratio: 1.5){
  .p-heading-homedr__inner{
    background-image: url("../images/common/h-mocomoco@2x.png");
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: 380px;
  }
}
@media only screen and (min-width: 768px) and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-width: 768px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-width: 768px) and (-o-min-device-pixel-ratio: 3 / 2), only screen and (min-width: 768px) and (min--moz-device-pixel-ratio: 1.5), only screen and (min-width: 768px) and (min-device-pixel-ratio: 1.5){
  .p-heading-homedr:before{
    background-image: url("../images/common/h-tvtan-state-normal@2x.png");
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: 80px;
  }
  .p-heading-homedr:after{
    background-image: url("../images/common/h-rainbow@2x.png");
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: 74px;
  }
}
@media screen and (max-width: 767px) and (-webkit-min-device-pixel-ratio: 2), screen and (max-width: 767px) and (min-resolution: 192dpi){
  .p-heading-underline--drtvtan .p-heading-underline__free:before{
    background-image: url(../images/sprite@2x.png?1588222826014);
    background-size: 280px 237px;
  }
  .p-heading-underline--hospital .p-heading-underline__free:before{
    background-image: url(../images/sprite@2x.png?1588222826014);
    background-size: 280px 237px;
  }
}
@media only screen and (max-width: 767px) and (-webkit-min-device-pixel-ratio: 1.5), only screen and (max-width: 767px) and (-webkit-min-device-pixel-ratio: 2), only screen and (max-width: 767px) and (-o-min-device-pixel-ratio: 3 / 2), only screen and (max-width: 767px) and (min--moz-device-pixel-ratio: 1.5), only screen and (max-width: 767px) and (min-device-pixel-ratio: 1.5){
  .p-kumamoto-village:after{
    background-image: url("../images/home/kumamoto-machinami@2x.png");
    background-position: left bottom;
    background-repeat: repeat-x;
    background-size: 250px;
  }
}
@media only screen and (min-width: 1024px) and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-width: 1024px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-width: 1024px) and (-o-min-device-pixel-ratio: 3 / 2), only screen and (min-width: 1024px) and (min--moz-device-pixel-ratio: 1.5), only screen and (min-width: 1024px) and (min-device-pixel-ratio: 1.5){
  .p-mainview:before{
    background-image: url("../images/common/main-visula-top-wave@2x.png");
    background-position: center top;
    background-repeat: no-repeat;
    background-size: 100% 30px;
  }
  .l-hero:after{
    background-image: url("../images/common/main-visula-top-wave@2x.png");
    background-position: center top;
    background-repeat: no-repeat;
    background-size: 100% 30px;
  }
}
@media screen and (max-width: 1023px) and (min-width: 768px){
  .p-season__wood{
    width: 468px;
    height: 498.4px;
    background-size: 468px !important;
  }
}
@media screen and (max-width: 767px) and (min-width: 568px){
  .p-season__wood{
    width: 351px;
    height: 373.8px;
    background-size: 351px !important;
  }
}
@media screen and (max-width: 567px) and (min-width: 412px){
  .p-season__wood{
    width: 234px;
    height: 249.2px;
    background-size: 234px !important;
  }
}
@media screen and (max-width: 1023px) and (-webkit-min-device-pixel-ratio: 0){
  .p-nav__list ::i-block-chrome, .p-nav__list{
    font-size: 0.00001em;
    letter-spacing: -0.33266em;
  }
  .p-nav__list ::i-block-chrome > *, .p-nav__list > *{
    letter-spacing: normal;
  }
}
@media screen and (max-width: 1023px) and (max-width: 767px){
  .p-staff-hero__inner:before{
    width: 120px;
    height: 120px;
  }
}
@media screen and (max-width: 1279px){
  .p-swiper.p-swiper--buttom-over [class].swiper-button-prev{
    left: -10px;
  }
  .p-swiper.p-swiper--buttom-over [class].swiper-button-next{
    right: -10px;
  }
  .p-swiper.p-swiper--simple [class].swiper-button-prev{
    left: -10px;
  }
  .p-swiper.p-swiper--simple [class].swiper-button-next{
    right: -10px;
  }
}
@media screen and (max-width: 1189px){
  .p-swiper.p-swiper--buttom-over [class].swiper-container.swiper-container-rtl [class].swiper-button-prev{
    left: auto;
    right: -10px;
  }
  .p-swiper.p-swiper--buttom-over [class].swiper-container.swiper-container-rtl [class].swiper-button-next{
    right: auto;
    left: -10px;
  }
  .p-swiper.p-swiper--simple [class].swiper-container.swiper-container-rtl [class].swiper-button-prev{
    left: auto;
    right: -10px;
  }
  .p-swiper.p-swiper--simple [class].swiper-container.swiper-container-rtl [class].swiper-button-next{
    right: auto;
    left: -10px;
  }
}
@media print, screen and (min-width: 730px){
  .l-footer-share .l-footer-share__inner:before{
    content: " ";
    display: block;
    position: absolute;
    right: 17px;
    bottom: 0;
    width: 190px;
    height: 228px;
    z-index: 9;
    background-image: url("../images/common/pic-drwoman.png");
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: 190px;
  }
}
@media only screen and (min-width: 730px) and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-width: 730px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-width: 730px) and (-o-min-device-pixel-ratio: 3 / 2), only screen and (min-width: 730px) and (min--moz-device-pixel-ratio: 1.5), only screen and (min-width: 730px) and (min-device-pixel-ratio: 1.5){
  .l-footer-share .l-footer-share__inner:before{
    background-image: url("../images/common/pic-drwoman@2x.png");
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: 190px;
  }
}
@media print{
  .u-print-d{
    display: inherit !important;
  }
  .u-print-ib{
    display: inline-block !important;
  }
  .u-print-i{
    display: inline !important;
  }
  .u-print-b{
    display: block !important;
  }
  .u-print-n{
    display: none !important;
  }
  .u-print-f{
    display: -webkit-box !important;
    display: -webkit-flex !important;
    display: -ms-flexbox !important;
    display: flex !important;
  }
  .u-print-if{
    display: -webkit-inline-box !important;
    display: -webkit-inline-flex !important;
    display: -ms-inline-flexbox !important;
    display: inline-flex !important;
  }
}