@charset "utf-8";
/*
Template: understrap
theme Name: UnderStrap-Tabiigue-Theme
Author: Shingo.Nita
Description: UnderStrap child theme for Tabiigue
version： 1.0.1
*/

.webfont-roboto {
  font-family: 'Roboto', sans-serif !important;
}
.webfont-noto {
  font-family: 'Noto Sans JP', sans-serif !important;
}
.webfont-noto-min{
  font-family: 'Noto Serif JP', serif !important;
}
.webfont-noto-min{
  font-family: 'Sawarabi Mincho', sans-serif;
}
body {
  font-family: -apple-system, blinkMacSystemFont, /* Macの欧文はSan Francisco (OS X 10.11以降) */
               'Helvetica Neue', /* Macの欧文 (OS X 10.10以前) */
               'Segoe UI',       /* Windowsの欧文 */
               YuGothicM,        /* Windows8.1以上は游ゴシック */
               YuGothic,         /* Macの游ゴシック */
               Meiryo,           /* 游ゴシックが入っていないWindows */
               sans-serif !important;
}
/* IE8〜11はメイリオ */
@media screen\0 {
  body {
    font-family: 'Segoe UI', /* Windowsの欧文 */
                 Meiryo,     /* メイリオ */
                 sans-serif !important;
  }
}

/* Windows */
@font-face {
  font-family: YuGothicM;
  font-weight: normal;
  src: local('YuGothic-Medium'),  /* Mediumを明示的に指定 */
       local('Yu Gothic Medium'), /* Chrome用 */
       local('YuGothic-Regular'); /* Windows8.1ではMediumがないのでRegularを指定 */
}
@font-face {
  font-family: YuGothicM;
  font-weight: bold;
  src: local('YoGothic-Bold'), /* Boldはそのまま */
       local('Yu Gothic');     /* Chrome用 */
}
body,html{
  height: 100%;
}
body {
  font-family:"游ゴシック体","Yu Gothic",YuGothic,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","ヒラギノ角ゴ Pro","メイリオ","Meiryo",メイリオ,Meiryo,Osaka,"ＭＳ Ｐゴシック","Helvetica","Verdana",sans-serif;
  /*
  font-family: 'Roboto', 'Noto Sans JP', 'Yu Gothic Medium', '游ゴシック Medium', 'YuGothic', '游ゴシック体', sans-serif;
  font-family: 'メイリオ', 'Meiryo', 'ヒラギノ角ゴ Pro', 'Hiragino Kaku Gothic Pro', 'Noto Sans Japanese', Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
  font-family: 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, Helvetica, Arial, sans-serif;
  */
  font-size: 16px !important;
  line-height: 1.8;
  margin: 0;
  padding: 0;
  color: #333;
  background: #fff !important;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: bold;
}

img {
  max-width: 100%;
  height: auto;
}

input[type=text] {
  font-size: 16px !important;
  /*
  transform: scale(0.8);
  */
}
select{
  font-size: 16px !important;
  /*
  transform: scale(0.8);
  */
}

/*
header {
  border-bottom: solid 1px #ddd;
}
footer {
  border-top: solid 1px #ddd;
}
*/
/*
section {
  height: 100%;
  min-height: 100vh;
}
*/

.header-inner, .container, .footer-inner {
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 100% !important;
  max-width: 1280px;
  margin-right: auto;
  margin-left: auto;
  padding: 10px 0;
}
.container-s {
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 100% !important;
  max-width: 990px !important;
  margin-right: auto;
  margin-left: auto;
  padding: 10px 0;
}

.contents, #sidebar {
  margin: 20px 0;
}

@media (min-width: 768px) {
  /*コンテンツとサイドバーを横に並べる*/
  .container:after {
    display: block;
    clear: both;
    content: '';
  }
  .contents {
    margin: auto;
  }
  .contentsFull {
    width: 100%;
  }
  #sidebar {
    margin: auto;
  }
}

/*ヘッダー*/
body {
  /*
  padding-top: 4.5rem;
  */
}
button.navbar-toggler:focus {
  outline:none;
}
.navbar {
  padding: 0 1.0rem !important;
  height: 56px;
  background: rgba(252, 252, 252, 0.9);
}
.navbar-dropshadow {
  -webkit-box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2);
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2);
}
.navbar-brand img.header-logo {
  width: auto;
  height:40px !important;
}
.navbar-opa{
  background: rgba(255, 255, 255, 0.9);
}

/*スマホ用のメニューボタン*/
.header-inner {
  position: relative;
}

/*------フッター------*/
footer {
  width: 100%;
  position: relative;
  bottom: 0;
  height: 44px;
}
footer ul{
  list-style: none;
}
.footer-logo{
  width: 100%;
  max-width: 250px;
  margin: auto;
  padding: 1.0rem;
}
.footer-company-parts{
  margin: 1.5rem auto;
}
.footer-company-parts a{
  color: #333;
  transition: .2s;
}
.footer-company-parts a:hover{
  color: #f44336;
  text-decoration: underline;
}
.footer-company-parts .text-l{
  font-size: 1.5rem;
  line-height: 1.5;
}
.footer-company-parts .text-m{
  font-size: 1.2rem;
  line-height: 1.5;
}
.footer-company-parts .text{
  font-size: 1.0rem;
  line-height: 1.5;
}
.footer-company-parts .text-s{
  font-size: 0.9rem;
  line-height: 1.5;
}
.footer-company-parts .text-xs{
  font-size: 0.8rem;
  line-height: 1.5;
}
.footer-text{
  color: #fff;
  line-height: 1.8;
  font-size: 0.9rem;
}
/*コピーライト*/
.copyright {
  color: #ffffff;
  background: #183073;
  width:100%;
  font-size: 18px;
  height: 44px;
  /*

   font-size: 20pxの場合、文字の高さ27px
   (44px-27px)/2 = 8.5px
  */
  padding-top: 9.5px;
  margin: auto;
  text-align: center;
}

/*
@media (min-width: 768px) {
  .copyright {
    text-align: right;
  }
}
*/

.sns a{
  font-size: 2.0rem;
  transition: .2s
}
.sns a.text-twitter:hover{
  color: #55acee !important;
}
.sns a.text-facebook:hover{
  color: #3b5998 !important;
}
.sns a.text-youtube:hover{
  color: #cd201f !important;
}
.sns a.text-vimeo:hover{
  color: #1ab7ea !important;
}



/********************* 追加分(2018/09/05) *********************/
a.noline:hover{
  text-decoration: none !important;
}
.noborder{
  border: none !important;
}
i {
  margin-right: 0.25rem;
  margin-left: 0.25rem;
}
.text-normal{
  font-weight: normal !important;
}
.text-bold{
  font-weight: bold !important;
}
.pc-disp{
  display: none !important;
}
@media (min-width: 992px) {
  .pc-disp{
    display: block   !important;
  }
}

.btn-bluegray {
  color: #fff;
  background-color: #607d8b;
  border-color: #607d8b;
  outline: none;
}

.btn-bluegray:hover {
  color: #fff;
  background-color: #546e7a;
  border-color: #546e7a;
}

.btn-bluegray:focus, .btn-bluegray.focus {
  box-shadow: 0 0 0 0.2rem rgba(207, 216, 220, 0.5);
}

.btn-bluegray.disabled, .btn-bluegray:disabled {
  color: #fff;
  background-color: #607d8b;
  border-color: #607d8b;
}

.btn-bluegray:not(:disabled):not(.disabled):active, .btn-bluegray:not(:disabled):not(.disabled).active,
.show > .btn-bluegray.dropdown-toggle {
  color: #fff;
  background-color: #607d8b;
  border-color: #607d8b;
}

.btn-bluegray:not(:disabled):not(.disabled):active:focus, .btn-bluegray:not(:disabled):not(.disabled).active:focus,
.show > .btn-bluegray.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(207, 216, 220, 0.5);
}

.btn-bluegray:hover, .btn-bluegray:focus,
.btn-bluegray:active, .btn-bluegray:active:focus, .btn-bluegray:active:hover, .btn-bluegray:active.focus,
.btn-bluegray.active, .btn-bluegray.active:focus, .btn-bluegray.active:hover, .btn-bluegray.active.focus,
.open > .dropdown-toggle.btn-bluegray,
.open > .dropdown-toggle.btn-bluegray:hover,
.open > .dropdown-toggle.btn-bluegray:focus,
.open > .dropdown-toggle.btn-bluegray.focus,
.btn-bluegray.disabled:hover, .btn-bluegray[disabled]:hover, fieldset[disabled] .btn-bluegray:hover,
.btn-bluegray.disabled:focus, .btn-bluegray[disabled]:focus, fieldset[disabled] .btn-bluegray:focus,
.btn-bluegray.disabled.focus, .btn-bluegray[disabled].focus, fieldset[disabled] .btn-bluegray.focus {
    background: #546e7a !important; //ボタンの上にポインタを持ってきたり、クリックしたりした時の背景色
    color: #ffffff !important; //ボタンの上にポインタを持ってきたり、クリックしたりした時のテキストの色
}

.btn-outline-bluegray {
  color: #607d8b;
  background-color: transparent;
  background-image: none;
  border: 1px solid #607d8b !important;
}

.btn-outline-bluegray:hover {
  color: #fff;
  background-color: #546e7a;
  border-color: #546e7a;
}

.btn-outline-bluegray:focus, .btn-outline-bluegray.focus {
  box-shadow: 0 0 0 0.2rem rgba(207, 216, 220, 0.5);
}

.btn-outline-bluegray.disabled, .btn-outline-bluegray:disabled {
  color: #607d8b;
  background-color: transparent;
}

.btn-outline-bluegray:not(:disabled):not(.disabled):active, .btn-outline-bluegray:not(:disabled):not(.disabled).active,
.show > .btn-outline-bluegray.dropdown-toggle {
  color: #fff;
  background-color: #546e7a;
  border-color: #546e7a;
}

.btn-outline-bluegray:not(:disabled):not(.disabled):active:focus, .btn-outline-bluegray:not(:disabled):not(.disabled).active:focus,
.show > .btn-outline-bluegray.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(207, 216, 220, 0.5);
}

.badge-bluegray {
  color: #fff;
  background-color: #546e7a;
}

.badge-dark[href]:hover, .badge-dark[href]:focus {
  color: #fff;
  text-decoration: none;
  background-color: #607d8b;
}

.img-thumbnail-trim-wrap{
  /*
  border-top-left-radius: calc(.25rem - 1px);
  border-top-right-radius: calc(.25rem - 1px);
  */
  overflow: hidden;
  position: relative;
  width: 100%;
  height: auto;
  padding-top: 75%;
  background: #cfd8dc;
}

@media (max-width: 767px) {
  .img-thumbnail-trim-wrap {
    /*
    border-top-left-radius: calc(.25rem - 1px);
    border-top-right-radius: calc(.25rem - 1px);
    */
    overflow: hidden;
    position: relative;
    width: 100%;
    height: auto;
    /*
    padding-top: 56.25%;
    */
    padding-top: 56.25%;
    background: #cfd8dc;
  }
}

.img-thumbnail-trim-wrap img {
  position: absolute;
  width: auto;
  height: auto;
  max-width: 136%;
  max-height: 150%;
  top: 50%;
  left: 50%;
  -ms-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}

.no-gutter {
  padding-right: 0 !important;
  padding-left: 0 !important;
}
.breakingWrap{
  /*
  background:#ef9a9a;
  */
  border: 2px solid #dc3545;
}
hr{
  display: block;
  width: 100%;
  max-width: 1200px;
  height: 2px;
  background-color: #e0e0e0;
  border: 0;  /*デフォルトデザインでは線がある場合があるので、消しておく。*/
}

.borderTop{
  border-top: 1px solid #e0e0e0;
}
.borderLeft{
  border-left: 1px solid #e0e0e0;
}
.borderRight{
  border-right: 1px solid #e0e0e0;
}
.borderBottom{
  border-bottom: 1px solid #e0e0e0;
}
@media (max-width: 991px) {
  .borderTop{
    border-top: none;
  }
  .borderLeft{
    border-left: none;
  }
  .borderRight{
    border-right: none;
  }
  .borderBottom{
    border-bottom: none;
  }
}
.borderTop-md{
  border-top: 1px solid #e0e0e0;
}
.borderLeft-md{
  border-left: 1px solid #e0e0e0;
}
.borderRight-md{
  border-right: 1px solid #e0e0e0;
}
.borderBottom-md{
  border-bottom: 1px solid #e0e0e0;
}
@media (max-width: 767px) {
  .borderTop-md{
    border-top: none;
  }
  .borderLeft-md{
    border-left: none;
  }
  .borderRight-md{
    border-right: none;
  }
  .borderBottom-md{
    border-bottom: none;
  }
}
.rad4px{
  border-radius: 4px;
}
.rad25{
  border-radius: 0.25rem;
}
.rad50{
  border-radius: 0.5rem;
}
.rad100{
  border-radius: 1.0rem;
}
.rad-circle{
  border-radius: 50%;
}

/* card */
.card {
  transition: .2s;
  outline:none;
  /*
  border: none !important;
  */
}
.card-block {
  display: block\0 !important;
  display: block\9 !important;
}
.card-shasow {
  transition: .2s;
  outline:none;
  /*
  border: none !important;
  */
}
.card-shadow:hover {
  box-shadow: 0 6px 8px 0 rgba(80,80,80,0.14), 0 3px 12px 0 rgba(80,80,80,0.12), 0 4px 6px -2px rgba(80,80,80,0.2);
}
.card:hover {
  background: #f5f5f5;
  opacity: 0.8;
}
a.cardlink {
  /*
  padding: 10px 0;
  */
  outline:none;
  transition: .2s;
  background: transparent;
}
a.cardlink:hover {
  text-decoration: none;
  /*
  opacity: 0.8;
  box-shadow: 0 6px 8px 0 rgba(80,80,80,0.14), 0 3px 12px 0 rgba(80,80,80,0.12), 0 4px 6px -2px rgba(80,80,80,0.2);
  background: #fff;
  */
}
.card-title {
  text-align:left;
  font-size: 100%;
  margin-bottom: 16px;
  color: #333;
  line-height: 1.5;
  font-weight: bold;
}
.card-img-overlay {
  position: relative;
}
.card-img-overlay-cont-top {
  position: absolute;
  top: 0;
  left: 0;
  width:100%;
}
.card-img-overlay-cont-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  width:100%;
}

.card-title-overlay {
  font-weight: bold !important;
  position: absolute;
  padding: 0 15px;
  bottom: 0;
  left: 0;
  font-size: 100%;
  opacity: 0.85;
  text-shadow:
  black 2px 2px 3px, black -2px 2px 3px,
  black 2px -2px 3px, black -2px -2px 3px;
}
.card-badge-overlay{
  position: absolute;
  top: 0;
  left: 5px;
  opacity: 0.85;
}
.card-title-s {
  font-size: 100%;
  /*
  margin-bottom: 16px;
  */
  text-align: left;
  color: #333;
  line-height: 1.5;
  font-weight: bold;
}
.card-text {
  text-align: left;
  color: #757575;
  line-height: 1.8;
  font-size: 85%;
}
.card-body-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  margin:0;/*余計な隙間を除く*/
  padding:0;/*余計な隙間を除く*/
  color: white;/*文字色*/
  font-size: 25px;/*文字サイズ*/
}
.list-group-item{
  font-size: 0.9rem;
}
figure{
  clear: both;
}
.wp-caption {
  width: 100%;
  margin: 1.0rem auto;
  text-align: center;
  margin: 1.0rem auto 2.0rem auto;
}
@media (min-width: 768px) {
  .wp-caption {
    width: 40%;
    max-width: 350px;
    text-align: center;
    float: left;
    padding: 0 1.5rem;
  }
}

.wp-caption-text {
  font-size: 0.85rem;
  color: #757575;
  text-align: left;
  line-height: 1.5;
  margin: 0.5rem;
}

/* イメージ直接入稿 */
.size-large,
.size-full {
  float: left;
  width: 100%;
  max-width: 350px;
  text-align: center;
}

/* frame:New */
.new {
	position: relative;
	display: inline-block;
	overflow: hidden; /* 不要部分を消す */
	padding: 0px;
}
.new:after {
  opacity: 0.9;
	content: "";
	position: absolute;
	z-index: 1;
	width: 150px;
	height: auto;
	background: red;
	content: "NEW";	/* 表示するテキスト */
	text-align: center;
	color: #fff;
	font-family: 'Arial';
	font-weight: bold;
	padding: 5px 10px;
	left: -48px;
	top: 3px;
	transform: rotate(-40deg);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* frame:Free */
.free {
	position: relative;
	display: inline-block;
	overflow: hidden; /* 不要部分を消す */
	padding: 0px;
}
.free:after {
  opacity: 0.9;
	content: "";
	position: absolute;
	z-index: 1;
	width: 150px;
	height: auto;
	background: green;
	content: "FREE";	/* 表示するテキスト */
	text-align: center;
	color: #fff;
	font-family: 'Arial';
	font-weight: bold;
	padding: 5px 10px;
	left: -48px;
	top: 3px;
	transform: rotate(-40deg);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* frame:MemberOnly */
.member-only {
	position: relative;
	display: block;
	overflow: hidden; /* 不要部分を消す */
	padding: 0px;
}
.member-only:after {
  opacity: 0.8;
	content: "";
	position: absolute;
	z-index: 1;
	width: 100%;
	height: auto;
	background: #f44336;
	content: "会員限定コンテンツ";	/* 表示するテキスト */
	text-align: center;
	color: #fff;
	font-family: 'Arial';
	font-weight: bold;
	padding: 15px 5px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
}
.member-only img{
  opacity: 0.4;
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
}

/* 記事リスト ページネーション */
/*ページネーション*/
.pagination {
  margin: 40px 0 30px;
  text-align: center;
  clear: both;
  text-align: center;
}

.pagination ul {
  margin: auto;
  list-style: none;
}

.pagination li {
  display: inline-block;
  width: auto;
}

.pagination li a, .pagination li > span {
  display: block;
  text-decoration: none;
}

.pagination li .dots {
  padding: 0;
  /*
  color: #000;
  border-color: transparent;
  background-color: transparent;
  */
  border: 1px solid #455a64 !important;
  border-radius: 0.25rem;
  background: #fff !important;
  color: #333 !important;
  transition: .3s;
}

ul.page-numbers li:hover{
  text-decoration: none;
}

ul.page-numbers li span.page-numbers,
ul.page-numbers li a.page-numbers{
  border: 1px solid #455a64;
  border-radius: 0.25rem;
  background: #455a64;
  color: #fff;
  padding: 0.3rem 1.0rem;
  margin: auto;
  text-align:center !important;
}

ul.page-numbers li a{
  border: 1px solid #455a64 !important;
  border-radius: 0.25rem;
  background: #fff !important;
  color: #333 !important;
  transition: .3s;
}

ul.page-numbers li a:hover{
  background: #90a4ae !important;
  color: #f5f5f5 !important;
}

ul.page-numbers .current {
  font-weight: normal !important;
}

ul.page-numbers li a.prev,
ul.page-numbers li a.next {
  display: none;
}

/* 企画・連載 ページネーション */
.post-pagenation{
  clear: both;
  text-align: center;
  margin: 20px 0;
}
.post-pagenation a:hover{
  text-decoration: none;
}
.post-pagenation .pagination-num{
  border: 1px solid #455a64;
  border-radius: 0.25rem;
  background: #455a64;
  color: #fff;
  padding: 0.5rem 1.0rem;
}
a span.pagination-num{
  border: 1px solid #455a64 !important;
  border-radius: 0.25rem;
  background: #fff !important;
  color: #333 !important;
  transition: .3s;
}
a span.pagination-num:hover{
  background: #90a4ae !important;
  color: #f5f5f5 !important;
}

/* トップボタン用 */
.pagetop {
  display: none;
  position: fixed;
  bottom: 15px;
  right: 15px;
  z-index:1000;
  filter:alpha(opacity=75);
  -moz-opacity: 0.75;
  opacity: 0.75;
}
.pagetop a {
  display: block;
}
.pagetop a:hover {
  display: block;
}

/* トップ用日付 */
.title-date {
  border-radius: 0.25rem;
  text-align: center;
  width: 80px;
  height: 50px;
  margin: 5px 0;
  padding: 5px 0;
  background-color: #37474f;
  color: #fff;
}
.title-date-day {
  display:block;
  height:28px;
  font-size:32px;
  line-height:24px;
  overflow:hidden;
}
.title-date-month {
  display:block;
  height:22px;
  overflow:hidden;
  font-size:14px;
  line-height:14px;
}

/* 行間 */
.line200{
  line-height: 200% !important;
}
.line190{
  line-height: 190% !important;
}
.line180{
  line-height: 180% !important;
}
.line170{
  line-height: 170% !important;
}
.line160{
  line-height: 160% !important;
}
.line150{
  line-height: 150% !important;
}

/* フォントサイズ */
.fs200{
  font-size: 200% !important;
}
.fs195{
  font-size: 195% !important;
}
.fs190{
  font-size: 190% !important;
}
.fs185{
  font-size: 185% !important;
}
.fs180{
  font-size: 180% !important;
}
.fs175{
  font-size: 175% !important;
}
.fs170{
  font-size: 170% !important;
}
.fs165{
  font-size: 165% !important;
}
.fs160{
  font-size: 160% !important;
}
.fs155{
  font-size: 155% !important;
}
.fs150{
  font-size: 150% !important;
}
.fs145{
  font-size: 145% !important;
}
.fs140{
  font-size: 140% !important;
}
.fs135{
  font-size: 135% !important;
}
.fs130{
  font-size: 130% !important;
}
.fs125{
  font-size: 125% !important;
}
.fs120{
  font-size: 120% !important;
}
.fs115{
  font-size: 115% !important;
}
.fs110{
  font-size: 110% !important;
}
.fs105{
  font-size: 105% !important;
}
.fs100{
  font-size: 100% !important;
}
.fs95{
  font-size: 95% !important;
}
.fs90{
  font-size: 90% !important;
}
.fs85{
  font-size: 85% !important;
}
.fs80{
  font-size: 80% !important;
}

/* opacity */
.opa100{
  opacity: 1.0;
}
.opa90{
  opacity: 0.9;
}
.opa80{
  opacity: 0.8;
}
.opa70{
  opacity: 0.7;
}
.opa60{
  opacity: 0.6;
}
.opa50{
  opacity: 0.5;
}
.opa40{
  opacity: 0.4;
}
.opa30{
  opacity: 0.3;
}
.opa20{
  opacity: 0.2;
}
.opa10{
  opacity: 0.1;
}

/* display */
.disp-lg,.disp-md,.disp-sm,.disp-xs {
  display: none;
}
@media (max-width: 1199px) {
  .disp-lg{
    display: block;
  }
}
@media (max-width: 991px) {
  .disp-md{
    display: block;
  }
}
@media (max-width: 767px) {
  .disp-sm{
    display: block;
  }
}
@media (max-width: 575px) {
  .disp-xs{
    display: block;
  }
}

/* color */
.text-lightgray {
  color: #bdbdbd !important;
}
.text-red {
  color: #f44336 !important;
}
.text-blue {
  color: #2196f3 !important;
}
.text-green {
  color: #4caf50 !important;
}
.text-yellow {
  color: #ffeb3b !important;
}
.text-orange {
  color: #ff9800 !important;
}
.text-navy {
  color: #3f51b5 !important;
}
.text-bluegray {
  color: #607d8b !important;
}
.text-tabi-blue {
  color: #183073 !important;
}
.text-jtb-red {
  color: #c81428 !important;
}

/* background-color */
.bg-purple { background: #6f42c1; }
.bg-blue { background: #0d47a1; }
.bg-deepblue{ background: #311b92; }
.bg-teal500 { background: #009688; }
.bg-teal900 { background: #004d40; }
.bg-bluegray100 { background: #cfd8dc; }
.bg-bluegray200 { background: #B0BEC5; }
.bg-bluegray300 { background: #90a4ae; }
.bg-bluegray400 { background: #78909c; }
.bg-bluegray500 { background: #607d8b; }
.bg-bluegray600 { background: #546e7a; }
.bg-bluegray700 { background: #455a64; }
.bg-bluegray800 { background: #37474f; }
.bg-bluegray900 { background: #263238; }
.bg-cyan100 { background: #b2ebf2; }
.bg-cyan200 { background: #80deea; }
.bg-cyan300 { background: #4dd0e1; }
.bg-cyan400 { background: #26c6da; }
.bg-cyan500 { background: #00bcd4; }
.bg-cyan600 { background: #00acc1; }
.bg-cyan700 { background: #0097a7; }
.bg-cyan800 { background: #00838f; }
.bg-cyan900 { background: #006064; }
.bg-brown100 { background: #d7ccc8; }
.bg-brown200 { background: #bcaaa4; }
.bg-brown300 { background: #a1887f; }
.bg-brown400 { background: #8d6e63; }
.bg-brown500 { background: #795548; }
.bg-brown600 { background: #6d4c41; }
.bg-brown700 { background: #5d4037; }
.bg-brown800 { background: #4e342e; }
.bg-brown900 { background: #3e2723; }
.bg-gray-light { background: #fafafa; }
.bg-gray100 { background: #f5f5f5; }
.bg-gray200 { background: #eeeeee; }
.bg-gray300 { background: #e0e0e0; }
.bg-gray400 { background: #bdbdbd; }
.bg-gray500 { background: #9e9e9e; }
.bg-gray600 { background: #757575; }
.bg-gray700 { background: #616161; }
.bg-gray800 { background: #424242; }
.bg-gray900 { background: #212121; }
.bg-tabi-blue { background: #183073; }
/*
.bg-tabi-blue-light { background: #35d5ff; }
*/
.bg-tabi-blue-light { background: rgba( 129, 212, 250, .7 ); }
/*
.bg-tabi-green { background: #c5e1a5; }
*/
.bg-tabi-green { background: #dcedc8; }

.bg-trans-white10{ background-color: rgba(255, 255, 255, .1) !important; }
.bg-trans-white20{ background-color: rgba(255, 255, 255, .2) !important; }
.bg-trans-white30{ background-color: rgba(255, 255, 255, .3) !important; }
.bg-trans-white40{ background-color: rgba(255, 255, 255, .4) !important; }
.bg-trans-white50{ background-color: rgba(255, 255, 255, .5) !important; }
.bg-trans-white60{ background-color: rgba(255, 255, 255, .6) !important; }
.bg-trans-white70{ background-color: rgba(255, 255, 255, .7) !important; }
.bg-trans-white80{ background-color: rgba(255, 255, 255, .8) !important; }
.bg-trans-white90{ background-color: rgba(255, 255, 255, .9) !important; }

/*
.bg-grad01 { background: linear-gradient( 180deg, rgba(250, 250, 250, 0.9), rgba(189, 189, 189, 0.9) ); }
.bg-grad01-re { background: linear-gradient(180deg, #bdbdbd, #fafafa); }
*/

.bg-grad01 { background: linear-gradient( 180deg, transparent, rgba(97, 97, 97, 0.9) ); }
.bg-grad02 { background: linear-gradient( 180deg, #fafafa, #212121 ); }
.bg-footer-grad01 { background: linear-gradient( 180deg, #ffffff, #bdbdbd ); }

/* border */
.border-lightgray {
  border: 1px solid #bdbdbd;
}
.border-red {
  border: 1px solid #f44336;
}
.border-blue {
  border: 1px solid #2196f3;
}
.border-green {
  border: 1px solid #4caf50;
}
.border-yellow {
  border: 1px solid #ffeb3b;
}
.border-orange {
  border: 1px solid #ff9800;
}
.border-navy {
  border: 1px solid #3f51b5;
}
.border-bluegray {
  border: 1px solid #607d8b;
}

.float-left{
  float: left;
}
.float-right{
  float: right;
}
.clear {
  clear: both;
}
.underline-dark{
  border-bottom: 1px solid #212121;
}


/* ナビゲーション設定 */
/* 狭いデバイスでのスクロールを防止 */

/*
html,
body {
  overflow-x: hidden;
}
*/
body {
}

li.nav-item {
  font-weight: normal;
  transition: .2s;
}
li.nav-item a {
  transition: .2s;
}
li.nav-item a.nav-link {
  color: #183073 !important;
}
li.nav-item a.active {
  color: #183073 !important;
  font-weight: bold;
  border-radius: 0.25rem;
  /*
  background: #f8f9fa;
  */
  background: rgba( 52, 152, 219, .4 );
}

@media (max-width: 991.98px) {
  .offcanvas-collapse {
    position: fixed;
    top: 56px;
    bottom: 0;
    left: 100%;
    width: 100%;
    padding-right: 1rem;
    padding-left: 1rem;
    overflow-y: auto;
    background-color: rgba( 248, 249, 250, .9 );
    transition-timing-function: ease-in-out;
    transition-duration: .2s;
    transition-property: left, visibility;
  }
  .offcanvas-collapse.open {
    left: 0;
    visibility: visible;
  }
  li.nav-item a.nav-link {
    color: #183073 !important;
    border-bottom: 1px solid #183073;
  }
  li.nav-item a.active {
    font-size: 110%;
    border-bottom: 1px solid #183073;
    border-radius: 0;
    background: transparent;
  }
}

.navbar-toggler-icon {
  background-image: none !important;
}
.nav-scroller {
  position: relative;
  z-index: 2;
  height: 2.75rem;
  overflow-y: hidden;
}
.nav-scroller .nav {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  padding-bottom: 1rem;
  margin-top: -1px;
  overflow-x: auto;
  color: rgba(255, 255, 255, .75);
  text-align: center;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}
.nav-underline .nav-link {
  padding-top: .75rem;
  padding-bottom: .75rem;
  font-size: .875rem;
  color: #6c757d;
}
.nav-underline .nav-link:hover {
  color: #007bff;
}
.nav-underline .active {
  font-weight: 500;
  color: #343a40;
}

.text-white-50 { color: rgba(255, 255, 255, .5); }

.title-underline {
  padding-bottom: 0.5rem;
  border-bottom:1px solid #757575;
}

.embed {
  position: relative;
  width: 100%;    /* 左右に余白が必要なら値を変更してもOK */
  height: 0;
  overflow: hidden;
}
.embed-4-3 {
  padding-bottom: 75%;    /* padding-topでもOK */
}
.embed-16-9 {
  padding-bottom: 56.25%;    /* padding-topでもOK */
}
.embed iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;    /* 必要であれば!importantを付けてください */
  height: 100%;    /* 必要であれば!importantを付けてください */
}

/*
トップページ
*/
i {
  margin-right: 0.5rem;
}
section {
  width: 100%;
  display: table;
/*
  height: auto !important;
  min-height: 100vh;
*/
}


/*
section#lineup,
section#about,
section#info,
section#contactus {
  background: rgba(224, 247, 250, .7);
  border-radius: 1.0rem;
  margin-top:56px;
  box-shadow: 0 0 8px rgba(189, 189, 189, .8);
}
*/

section#about,
section#lineup {
  background: rgba(224, 247, 250, .6);
  border-radius: 1.0rem;
  box-shadow: 0 0 8px rgba(128, 128, 128, .8);
}

.title {
  text-align: center;
  padding: 0.5rem 1.0rem;
  font-weight: 400;
}

@media (min-width: 992px) {
  .title {
    font-size: 1.2rem;
  }
}
@media (max-width: 991.98px) {
  .title {
    font-size: 1.2rem;
  }
}
@media (max-width: 767.98px) {
  .title {
    font-size: 1.2rem;
  }
}
@media (max-width: 575.98px) {
  .title {
    font-size: 1.0rem;
  }
}

/*
#top {
  background-image: url("images/image.jpg");
  background-position: top center;
  background-attachment: fixed;
  background-size: cover;
  background-repeat: no-repeat;
}
@media (max-width: 575px) {
  #top {
    background-image: none;
  }
}
*/
.jumbotron {
  min-height: 100%;
  height: 100vh;
  display: table-cell;
  vertical-align: middle;
  background: transparent !important;
}
.wrap-top {
  width: 100%;
  max-width: 1024px;
}
.badge {
  width: 5.0rem;
}
img.item-icon {
  width: 100%;
  margin-right: 1.0rem;
}
.disp-table {
  display: table;
}
.disp-table-cell {
  display: table-cell;
}

/*
.bg-window {
  background-image: url("images/parallax.png");
  background-position: center center;
  background-attachment: fixed;
  background-size: contain;
  background-repeat: repeat-x
}
@media screen and (max-width: 768px) {
  .bg-window {
    background-image: none;
  }
}
*/

.parallax-window {
  /*
  height: 100vh;
  */
  height: 100%;
  background: transparent;
}