@charset "utf-8";

/* ------------------------------------------------------------------ */
/* a. Webfonts and Icon fonts
 ------------------------------------------------------------------ */

@import url("fontello/css/fontello.css");


/* ------------------------------------------------------------------ */
/* b. General Styles
/* ------------------------------------------------------------------ */

*,
*:before,
*:after {
 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
 box-sizing: border-box;
}

/* clear設定 */
.cf:before,
.cf:after{
  content:"";
  display: table;
}
.cf:after{
  clear:both;
}

	
html { font-size:62.5% ;}
  @media screen and (min-width: 960px){html{font-size:16px ;}}
  @media screen and (max-width: 960px){html{font-size:16px ;}}
  @media screen and (max-width: 860px){html{font-size:15px ;}}
  @media screen and (max-width: 760px){html{font-size:14px ;}}
  @media screen and (max-width: 640px){html{font-size:13.5px;}}
  @media screen and (max-width: 540px){html{font-size:13px;}}
  @media screen and (max-width: 450px){html{font-size:12px ;}}
  @media screen and (max-width: 320px){html{font-size:11px;}}


body {
  width:100%;
  background-color:#2c425a;
  font-family: "游ゴシック", Yu Gothic, "ヒラギノ角ゴシック ProN W3", "Hiragino Gothic ProN", "HGゴシックE", "ＭＳ Ｐゴシック", "ＭＳ ゴシック", sans-serif;
  -webkit-font-smoothing: antialiased; /* Fix for webkit rendering */
  -webkit-text-size-adjust: 100%;
  color: #fffff5;
  font-weight: 400;
  line-height: 1.6;
  }

.hide-sp {
  display: none;
  }
	
/* ****************** Media Queries による切り替え ***************** */

/* タブレットレイアウト 600px
-------------------------------------------------- */
@media only screen and (min-width: 600px) {

  .hide-sp {
    display: block;
  }

  .show-sp,
  .show-h3 {
    display: none;
  }

}
/* ****************** Media Queries 切り替えおわり ***************** */


	

/* ------------------------------------------------------------------ */
/* c. Header Styles
/* ------------------------------------------------------------------ */


header {
  position: static;
}

.headbox {
  position: absolute;
  width: 85%;
  right: 50%;
  bottom: 50%;
  -webkit-transform: translate3d(50%, 50%, 0);
          transform: translate3d(50%, 50%, 0);
  z-index: 99;
  text-align: center;
}

.catchcopy {
  font-size: 2.4rem;
  font-weight: 600;
  line-height: 1.3;
  text-shadow:0 1px 2px rgba(0,0,0,.5);
  margin-bottom: 1.5rem;
}
	
.secondcopy {
  font-size: 1.2rem;
  font-weight: 400;
  text-shadow:0 1px 2px rgba(0,0,0,.5);
  margin-bottom: 1.5rem;
}
	
.report {
  font-size: 1.2rem;
  font-weight: 600;
  text-shadow:0 1px 2px rgba(0,0,0,.5);
  margin: 1em auto;
}
	
.report:before {
  font-size: 1.2rem;
  margin-right:5px;
  font-family:"FontAwesome";
  content:"\f071";
  color: #f66e5e;
  text-shadow:0 1px 2px rgba(0,0,0,.5);
  position: relative;
  display:inline-block;
}

.failure {
  font-size: 1.2rem;
  line-height: 1.4;
  font-weight: 600;
  text-shadow:0 1px 2px rgba(0,0,0,.5);
  margin: 1rem auto;
}

.failure a,
.failure a:hover {
  color: #fff;
}
	
.failure:before {font-size: 1.2rem;
  margin-right:5px;
  font-family:"FontAwesome";
  content:"\f071";
  color: #f66e5e;
  text-shadow:0 1px 2px rgba(0,0,0,.5);
  position: relative;
  display:inline-block;
}


/* ****************** Media Queries による切り替え ***************** */

/* タブレットレイアウト 600px
-------------------------------------------------- */
@media only screen and (min-width: 600px) {
	
  .catchcopy {
    font-size: 3.0rem;
    font-weight: 600;
    margin-bottom: 2rem;
  }
  .secondcopy {
    font-size: 1.2rem;
    font-weight: 400;
    text-shadow:0 1px 2px rgba(0,0,0,.5);
    margin-bottom: 3rem;
  }
  
}

/* PCレイアウト 961px〜
-------------------------------------------------- */

@media only screen and (min-width: 961px) {
	
  .catchcopy {
    font-size: 4.0rem;
  }
  
}

/* ****************** Media Queries 切り替えおわり ***************** */



/* グループメニュー
-------------------------------------------------- */

.group_menu {
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
  padding: 0;
  background-color: rgba(21,38,56,.6);
  border-radius: 0 0 0 4px;
  z-index: 999;
}

.group_menu dt {
  font-size: 0.9rem;
  line-height: 1;
  background-size: 20px auto;
  padding: 10px 15px 10px 20px;
  cursor: pointer;
}

.group_menu dt:after {
  content: " \f107";
  font-family: 'FontAwesome';
  padding-left : 0.5rem;
  color: #fff;
}

.group_menu dd {
  display: none;
  position: absolute;
  top: 36px;
  right: 0;
  background: rgba(44, 65, 89, 0.9);
  border-radius: 4px;
  line-height: 1.1;
}

.group_menu dd ul {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 1.0rem;
}

.group_menu dd ul li {
  border-top: 1px solid #546c7c;
  white-space: nowrap;
  background-repeat: no-repeat;
  min-width: 220px;
}

.group_menu dd ul li:first-child {
  border-top: none;
}

.group_menu dd ul li:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

.group_menu dd ul li.btn_close {
  text-align: center;
  padding: 12px 0;
  cursor: pointer;
  color: #fff;
}

.group_menu dd ul li.btn_close img {
  width: 15px;
  vertical-align: middle;
  margin-right: 1rem;
}

.group_menu dd ul li a {
  display: flex;
  color: #fff;
  align-items: center;
  height: 45px;
  text-decoration: none;
}

.group_menu dd ul li a .icon {
  width: 50px;
  text-align: center;
  opacity: 0.7;
}

/* ****************** Media Queries による切り替え ***************** */

@media screen and (min-width: 800px) { /* 800px以上用の記述 */
  .group_menu {
    top: 0;
  }
}

/* ****************** Media Queries 切り替えおわり ***************** */




/* ハンコ
-------------------------------------------------- */
		
.image-container {
  position: absolute;
  bottom: 5%;
  right: 4%;
  max-width: 30%;
  height:auto;
  z-index: 999;
  }

.image-container img {
  width: 100%;
  height :auto;
  }
	
.hanco {
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
  }
	
/* ****************** Media Queries による切り替え ***************** */

/* タブレットレイアウト 600px
-------------------------------------------------- */
@media only screen and (min-width: 600px) {
  .image-container {
    bottom: 10%;
    right: 4%;
    max-width: 22%;
  }
}

/* PCレイアウト 961px〜
-------------------------------------------------- */

@media only screen and (min-width: 961px) {
  
  .image-container {
    bottom: 10%;
    right: 5%;
    width: 16%;
    max-width: 300px;
  }  
}

/* ****************** Media Queries 切り替えおわり ***************** */




/* ヘッダー部ボタン
-------------------------------------------------- */

.headlink {
  margin: 1.5rem 0 1.5rem 0;
  padding: 0;
  }
	
.headlink li {
  display: inline-block;
  margin: 0 0 0.2rem 0;
  padding: 1rem 0.3rem;
  font-size: 1.1rem;
  line-height: 2.0;
  text-shadow:0 1px 2px rgba(0,0,0,.5);
}

.headbtn {
  padding: 0.8rem 1rem;
  border: 1px solid #fff;
  border-radius: 6px;
  background: rgba(25,47,70,.4);
  color: #fff;
  text-align: center;
  text-decoration: none;
  line-height: 1.0;
  transition: .3s;
}

.headbtn:before { /*アイコン*/
  font-family: FontAwesome;
  content: '\f107';
  font-weight: normal;
  font-size: 1.2rem;
  margin-right: 0.5rem;
  color: #ffca19;
}

.headbtn:hover {
  border: 1px solid rgba(25,47,70,.1);
  background: rgba(99,182,207,.9);
  color: #fff;
  text-decoration: none;
}

/* ****************** Media Queries による切り替え ***************** */

/* タブレットレイアウト 600px
-------------------------------------------------- */
@media only screen and (min-width: 600px) {
  
  .headlink {
    margin: 3rem 0 2rem 0;
    padding: 0;
    }  
  .headlink li {
    font-size: 1.2rem;
  }
}

/* ****************** Media Queries 切り替えおわり ***************** */




/* ヘッダー部ロゴ
-------------------------------------------------- */

h1.logo {
  margin: 0 0 !important;
  clear: both;
}

.h-logo {
  width: 150px;
  height: 25px;
}

.topbnr {
  margin: 20px 0 10px !important;
  clear: both;
} 

.topbnrimg {
  width: 180px;
  height: 50px;
}

/* ****************** Media Queries による切り替え ***************** */

/* タブレットレイアウト 600px
-------------------------------------------------- */
@media only screen and (min-width: 600px) {

  h1.logo {
    margin: 50px 0 25px!important;
    clear: both;
  }
  
  header img.h-logo {
    width: 240px;
    height: 40px;
  }
  
  .topbnr {
    margin: 25px 0 10px !important;
    clear: both;
  }
  
  .topbnrimg {
    width: 280px;
    height: 84px;
  }
}

/* PCレイアウト 961px〜
-------------------------------------------------- */

@media only screen and (min-width: 961px) {

  h1.logo {
    margin: 50px 0 25px!important;
    clear: both;
  }
  
  .topbnr {
    margin: 25px 0 10px !important;
    clear: both;
  }
  
  .topbnrimg {
    width: 300px;
    height: 90px;
  }
  
}

/* ****************** Media Queries 切り替えおわり ***************** */




/* トップスライドショー
-------------------------------------------------- */

.slideshow {
  position: absolute;
  width: 100%;
  height: 100vh;
  overflow: hidden;
	}

.slideshow-image {
  position: absolute;
  width: 100%;
  height: 100%;
  background: no-repeat 50% 50%;
  background-size: cover;
  -webkit-animation-name: toroslide;
          animation-name: toroslide;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-duration: 24s;
          animation-duration: 24s;
  opacity: 1;
  -webkit-transform: scale(1);
          transform: scale(1);
	}

.slideshow-image:nth-child(1) {
  -webkit-animation-name: toroslide-1;
          animation-name: toroslide-1;
  z-index: 3;
	}

.slideshow-image:nth-child(2) {
  -webkit-animation-name: toroslide-2;
          animation-name: toroslide-2;
  z-index: 2;
	}

.slideshow-image:nth-child(3) {
  -webkit-animation-name: toroslide-3;
          animation-name: toroslide-3;
  z-index: 1;
	}

.slideshow-image:nth-child(4) {
  -webkit-animation-name: toroslide-4;
          animation-name: toroslide-4;
  z-index: 0;
	}

@-webkit-keyframes toroslide-1 {
  0% {
    opacity: 1;
    -webkit-transform: scale(1.01);
            transform: scale(1.01);
  }
  1.5625% {
    opacity: 1;
  }
  23.4375% {
    opacity: 1;
  }
  26.5625% {
    opacity: 0;
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(1.01);
            transform: scale(1.01);
  }
  98.4375% {
    opacity: 0;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  100% {
    opacity: 1;
  }
}

@keyframes toroslide-1 {
  0% {
    opacity: 1;
    -webkit-transform: scale(1.01);
            transform: scale(1.01);
  }
  1.5625% {
    opacity: 1;
  }
  23.4375% {
    opacity: 1;
  }
  26.5625% {
    opacity: 0;
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(1.01);
            transform: scale(1.01);
  }
  98.4375% {
    opacity: 0;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes toroslide-2 {
  23.4375% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  26.5625% {
    opacity: 1;
  }
  48.4375% {
    opacity: 1;
  }
  51.5625% {
    opacity: 0;
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@keyframes toroslide-2 {
  23.4375% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  26.5625% {
    opacity: 1;
  }
  48.4375% {
    opacity: 1;
  }
  51.5625% {
    opacity: 0;
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@-webkit-keyframes toroslide-3 {
  48.4375% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  51.5625% {
    opacity: 1;
  }
  73.4375% {
    opacity: 1;
  }
  76.5625% {
    opacity: 0;
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@keyframes toroslide-3 {
  48.4375% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  51.5625% {
    opacity: 1;
  }
  73.4375% {
    opacity: 1;
  }
  76.5625% {
    opacity: 0;
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@-webkit-keyframes toroslide-4 {
  73.4375% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  76.5625% {
    opacity: 1;
  }
  98.4375% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
}
@keyframes toroslide-4 {
  73.4375% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  76.5625% {
    opacity: 1;
  }
  98.4375% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
}

.slideshow-image::before{
  /* 透過した黒を重ねる */
  background-color: rgba(0,0,0,0.15);
  /* どの範囲に重ねるかを指定 */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  content: ' ';
}


	

/* ------------------------------------------------------------------ */
/* d. Navigation styles
/* ------------------------------------------------------------------ */

nav {
  position: absolute;
  bottom: 0;
  width: 100%;
  text-align: center;
  background-color: rgba(21,38,56,.6);
  z-index:100;
  }
	
nav ul {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
  }

nav li {
  padding: 1.0rem 0.5rem;
  font-size: 1.1rem;
  font-weight: bold;
  background: ;
  }

nav li a:before { /*アイコン*/
  font-family: FontAwesome;
  content: '\f107';
  font-weight: normal;
  font-size: 1rem;
  margin-right: 0.5rem;
  color: #ffca19;
}

nav li a {
  color: #fffef7;
  text-decoration: none;
  padding: 1rem 0.2rem;
  }
	
nav a:hover {
  color: #fffef7;
  text-decoration: none;
  border-bottom: 2px solid #ffca19;
  }


/* This class is added on scroll */
.fixed {
  position: fixed; 
  top: 0; 
  height: 60px; 
  z-index: 100;
  background-color: #2c425a;
  }


/* ****************** Media Queries による切り替え ***************** */

/* スマートフォンレイアウト 〜766px
-------------------------------------------------- */

@media only screen and (max-width: 766px) {
	
  nav ul {
    -webkit-justify-content: center; /* Safari */
    justify-content: center;
    padding: 0.5rem;
    }

  nav li {
    padding: 0 0.5rem;
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
    }

  nav li a {
    color: #fffef7;
    text-decoration: none;
    }

  nav a:hover {
    color: #fffef7;
    text-decoration: none;
    border: none;
    }

  /* This class is added on scroll */
  .fixed {
    position: fixed; 
    top: 0; 
    height: 5rem; 
    z-index: 100;
    background-color: #2c425a;
    }

}

/* ****************** Media Queries 切り替えおわり ***************** */

/* ------------------------------------------------------------------ */
/* パンくずリスト
/* ------------------------------------------------------------------ */

.breadcrumb {
  width: 100%;
  padding: 2rem 0.8rem 2rem 1rem;
  margin: 0 auto;
  font-size: 0.9rem;
  line-height: 1.5;
}

.breadcrumb li{
  display:inline;
  list-style: none;
}

.breadcrumb li:after{ /* >を表示*/
  content: '';
  padding: 0 0.7rem;
  background: url(../images/bread-arrow.svg) no-repeat center center;
}

.breadcrumb > li.bc-current {
  color: #fff;
}

.breadcrumb li:last-child:after{
  content: '';
  background : none;
}

.breadcrumb li a {
  text-decoration: none;
  color: #fff;
}

.breadcrumb li:first-child a:before{ /*家アイコン*/
  font-family: FontAwesome;
  content: '\f015';
  font-weight: normal;
  font-size: 1rem;
  color: #fff;
}

.breadcrumb li a:hover {
  color: #ffd564;
}

.breadcrumb li a:hover:before {
  color: #ffd564;
}


/* ****************** Media Queries による切り替え ***************** */

@media screen and (min-width: 580px) { /* 580px以上用の記述 */  
  .breadcrumb {
    padding: 2rem 0.8rem 1rem 4rem;
  }
}


/* ------------------------------------------------------------------ */
/* e. Contents styles
/* ------------------------------------------------------------------ */

#contents {
  position: relative;
  top: 100vh;
}
	
.inner {
  width: 85%;
  margin: 0 auto 50px;
  overflow: hidden;
}
	
.imgstd{
  max-width: 100%;
  height: auto;
  width /***/:auto;
  margin-bottom: 1.8rem;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
}

.bnrimg{
  max-width: 100%;
  height: auto;
  width /***/:auto;
  margin-bottom: 0;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  transition: filter 0.3s ease;
  filter: brightness(
    1
  );
}

.bnrimg:hover{
  filter: brightness(1.25);
}


/* 間隔調整
------------------------------------------------------------------ */

.mt15 {
  margin-top: 10px;
}
.mt20 {
  margin-top: 10px;
}
.mt30 {
  margin-top: 15px;
}
.mt50 {
  margin-top: 25px;
}
.mt80 {
  margin-top: 40px;
}

.mb15 {
  margin-bottom: 10px;
}
.mb20 {
  margin-bottom: 10px;
}
.mb30 {
  margin-bottom: 15px;
}
.mb50 {
  margin-bottom: 25px;
}
.mb80 {
  margin-bottom: 40px;
}

.pb10 {
  padding-bottom: 10rem;
}

/* ****************** Media Queries による切り替え ***************** */

/* タブレットレイアウト 600px
-------------------------------------------------- */
@media only screen and (min-width: 600px) {
	
  .inner {
    width: 85%;
    margin: 0 auto 50px;
    }
  .mt15 {
    margin-top: 10px;
  }
  .mt20 {
    margin-top: 10px;
  }
  .mt30 {
    margin-top: 15px;
  }
  .mt50 {
    margin-top: 25px;
  }
  .mt80 {
    margin-top: 50px;
  }
  
  .mb15 {
  margin-bottom: 10px;
  }
  .mb20 {
    margin-bottom: 10px;
  }
  .mb30 {
    margin-bottom: 15px;
  }
  .mb50 {
    margin-bottom: 25px;
  }
  .mb80 {
    margin-bottom: 50px;
  }

  .pb10 {
    padding-bottom: 10rem;
  }

}

/* PCレイアウト 961px〜
-------------------------------------------------- */

@media only screen and (min-width: 961px) {
	
  .inner {
    max-width: 1000px;
    }
  .mt15 {
    margin-top: 15px;
  }
  .mt20 {
    margin-top: 20px;
  }
  .mt30 {
    margin-top: 30px;
  }
  .mt50 {
    margin-top: 50px;
  }
  .mt80 {
    margin-top: 80px;
  }
  
  .mb15 {
  margin-bottom: 15px;
  }
  .mb20 {
    margin-bottom: 20px;
  }
  .mb30 {
    margin-bottom: 30px;
  }
  .mb50 {
    margin-bottom: 50px;
  }
  .mb80 {
    margin-bottom: 80px;
  }

  .pb10 {
    padding-bottom: 10rem;
  }
}

/* ****************** Media Queries 切り替えおわり ***************** */




/* 映像
------------------------------------------------------------------ */

.moviewrap {
  margin: 2rem auto 3rem;
  width: 100%;
  text-align: center;
}

/*Youtube 埋め込み */
.movie{
  position:relative;
  width:100%;
  padding-top:56.25%;
  margin: 0;
}
.movie iframe{
  position:absolute;
  top:0;
  right:0;
  width:100%;
  height:100%;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -khtml-border-radius: 5px;
  border-radius: 5px;
}

/* ****************** Media Queries による切り替え ***************** */

@media screen and (min-width: 800px) { /* 800px以上用の記述 */
  
  .moviewrap {
    margin: 2rem auto 4rem;
    max-width: 700px;
  }
  
  .movie{
    margin: 0 0 30px;
  }
}




/* ------------------------------------------------------------------ */
/* テキスト設定
/* ------------------------------------------------------------------ */

.txtwrap {
  margin: 2rem auto 3rem;
  width: 100%;
}

/* ****************** Media Queries による切り替え ****************** */

@media screen and (min-width: 800px) { /* 800px以上用の記述 */
  .txtwrap {
    margin: 2rem auto 4rem;
    max-width: 700px;
  }
}
/* ****************** Media Queries 切り替えおわり ***************** */

/* 本文テキスト 白文字 */

.txtstd {
  margin-bottom: 1rem;
  font-size: 1.0rem;
  font-weight: 500;
  color: #fffef7;
  -webkit-font-smoothing: antialiased;
  text-align: left;
}

.txtstd-l {
  margin-bottom: 1rem;
  font-size: 1.3rem;
  font-weight: 500;
  color: #fffef7;
  -webkit-font-smoothing: antialiased;
  text-align: left;
}

span.bld {
  font-weight: 600;
}

.txtstd a{
  color: #fff9b7;
  display: inline-block;
  text-decoration: underline;
}
	
.txtstd a:hover{
  color: #e7e723;
  text-decoration: underline;
}
	
.tel{
  font-size: 2.2rem;
  line-height: 1.3;
  font-weight: 600;
  margin: 0 auto 1rem 0;
  text-align: center;
  }

.telnumber{
  font-size: 2.2rem;
  line-height: 1.3;
  font-weight: 600;
  margin: 0 auto 1rem 0;
  text-align: center;
  color: #e0401a;
  }

.large{
  font-size: 1.8rem;
  line-height: 1.5;
  font-weight: 600;
  margin: 0 auto 1rem 0;
  text-align: center;
  }
	
.txtmid{
  font-size: 1.2rem;
  line-height: 1.5;
  font-weight: 300;
  margin: 0 auto 20px;
  text-align: center;
  }

.txtmid-l{
  font-size: 1.5rem;
  line-height: 1.5;
  font-weight: 500;
  margin: 0 auto 20px;
  text-align: center;
  }

.txtmid-s{
  font-size: 0.9rem;
  line-height: 1.5;
  font-weight: 300;
  margin: 1rem auto;
  text-align: center;
  }

/* 枠付き */
.txtbox{
  padding: 0.8rem 1.2rem;
  margin: 2rem auto;
  border: dashed 1px #f66e5e;
  border-radius: 4px;
  background-color: rgba(255,255,255,0.2);
  width: 100%;
}

.txtbox>p{
  font-size: 1.0rem;
  line-height: 1.6;
  font-weight: 600;
  margin: 0;
  padding: 0;
}


.txtbox2{
  padding: 0.8rem 1.2rem;
  margin: 0.5rem auto 2rem;
  border: solid 1px #ffc9c2;
  border-radius: 4px;
  background-color: rgba(255,255,255,0.1);
  width: 100%;
}

.txtbox2>p{
  font-size: 1.0rem;
  line-height: 1.5;
  font-weight: 600;
  text-align: left;
  margin: 0;
  padding: 0;
}

.txtbox2>p.midlarge{
  font-size: 1.2rem;
  line-height: 1.5;
  font-weight: 600;
  text-align: center;
  margin: 0;
  padding: 0;
}

/* ****************** Media Queries による切り替え ****************** */

@media screen and (min-width: 800px) { /* 800px以上用の記述 */
  .txtbox {
    max-width: 650px;
  }
  .txtbox2 {
    max-width: 650px;
  }
}
/* ****************** Media Queries 切り替えおわり ***************** */



/* 注意書き */
.ctn {
  margin-bottom: 0.3rem;
  font-size: 0.9rem;
  line-height: 1.5;
  font-weight: 300;
  color: #666;
  padding-left:1rem;
  text-indent:-1rem;
  text-align: left;
  }

.ctn-w {
  margin-bottom: 0.3rem;
  font-size: 0.9rem;
  line-height: 1.5;
  font-weight: 300;
  color: #fff;
  padding-left:1rem;
  text-indent:-1rem;
  text-align: left;
  }

.note {
  margin-bottom: 0.3rem;
  font-size: 0.9rem;
  line-height: 1.5;
  font-weight: 300;
  color: #666;
  padding-left:1rem;
  text-indent:-1rem;
  }

.note:last-child {
  margin-bottom: 3rem;
  }

.note-w {
  margin-bottom: 0.3rem;
  font-size: 0.9rem;
  line-height: 1.5;
  font-weight: 300;
  color: #fff;
  padding-left:1rem;
  text-indent:-1rem;
  }

.note-w:last-child {
  margin-bottom: 3rem;
  }



/* 署名 */
	
.signarea {
  float: right;
  overflow: hidden;
  width: 30%;
  }

.signarea:after {
  clear:both;
  }

.sign {
  margin: 30px 0 10px;
  font-size: 0.9rem;
  line-height: 1.3;
  text-align: right;
  }

@media only screen and (min-width: 600px) {
  .signarea {
    width: 20%;
    }
}



/* 本文テキスト グレー文字 */

.txtgry {
  margin-bottom: 1rem;
  font-size: 1.0rem;
  font-weight: 300;
  color: #666;
  text-align: left;
}

.txtgry a {
  color: #f7726c;
  display: inline-block;
  text-decoration: underline;
}

/* 赤文字 */
.txtred {
  color: #eb0000;
}


/*------ 改行制御 ------*/
.spbr {
  display: inline;
}

/* ****************** Media Queries による切り替え ****************** */

@media screen and (min-width: 800px) { /* 800px以上用の記述 */
  .spbr{
    display: none;
  }
}

/* ------------------------------------------------------------------ */
/* ライン枠リンク
/* ------------------------------------------------------------------ */

.linenavwrap{
  margin: 50px 0;
  padding: 0;
  text-align: center;
}


/*------ 4列版 ------*/

ul.linenav{
  list-style-type: none;
  position: relative;
  box-sizing: border-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  flex-wrap:wrap;
  line-height: 1.4;
  border-left: solid 1px #ccc;
}

ul.linenav li{
  box-sizing: border-box;
  border-top: solid 1px #ccc;
  border-bottom: solid 1px #ccc;
  border-right: solid 1px #ccc;
  width : 100%;
  width : -webkit-calc(100%/1);
  width : calc(100%/1);
  margin-top: -1px;
}

ul.linenav li a{
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 13px 25px;
  display: flex;
  align-items:center;
  justify-content:center;
  color: #333;
  font-size: 1.1rem;
  text-decoration: none;
  background-color: #fff;
  -webkit-transition: all .2s ease-in-out;
  -moz-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  -ms-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
}

ul.linenav li a.linecurrent{
  color:#f7726c;
}

ul.linenav li a:hover {
  color: #fff;
  background-color: #f7726c;
}

ul.linenav li a:hover:after {
  position:absolute;
  content:" ";
  right: 15px;
  width: 6px;
  height: 6px;
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  top: 45%;
}

ul.linenav li a:after {
  position:absolute;
  content:" ";
  right: 15px;
  width: 6px;
  height: 6px;
  border-top: 1px solid #f7726c;
  border-right: 1px solid #f7726c;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  top: 45%;
}

/* ******************** Media Queries による切り替え ******************** */

@media screen and (min-width: 600px) {
  ul.linenav li{
    width: 50%;
    width: -webkit-calc(100%/2);
    width: calc(100%/2);
  }
}

@media screen and (min-width: 1000px) {
  ul.linenav li{
    width: 25%;
    width: -webkit-calc(100%/4);
    width: calc(100%/4);
  }
}


/*------ 3列版 ------*/

ul.linenav-trio{
  list-style-type: none;
  position: relative;
  box-sizing: border-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  flex-wrap:wrap;
  line-height: 1.4;
  border-left: solid 1px #ccc;
}

ul.linenav-trio li{
  box-sizing: border-box;
  border-top: solid 1px #ccc;
  border-bottom: solid 1px #ccc;
  border-right: solid 1px #ccc;
  width : 100%;
  width : -webkit-calc(100%/1);
  width : calc(100%/1);
  margin-top: -1px;
}

ul.linenav-trio li a{
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 13px 25px;
  display: flex;
  align-items:center;
  justify-content:center;
  color: #333;
  font-size: 1.1rem;
  text-decoration: none;
  background-color: #fff;
  -webkit-transition: all .2s ease-in-out;
  -moz-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  -ms-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
}

ul.linenav-trio li a.linecurrent{
  color:#f7726c;
}

ul.linenav-trio li a:hover {
  color: #fff;
  background-color: #f7726c;
}

ul.linenav-trio li a:hover:after {
  position:absolute;
  content:" ";
  right: 15px;
  width: 6px;
  height: 6px;
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  top: 45%;
}

ul.linenav-trio li a::after{
  position:absolute;
  content:" ";
  right: 15px;
  width: 6px;
  height: 6px;
  border-top: 1px solid #f7726c;
  border-right: 1px solid #f7726c;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  top: 45%;
}

/* ******************** Media Queries による切り替え ******************** */

@media screen and (min-width: 600px) {
  ul.linenav-trio li{
    width: 33.33333333%;
    width: -webkit-calc(100%/3);
    width: calc(100%/3);
  }
}


/*------ 2列版 ------*/

ul.linenav-duo{
  list-style-type: none;
  position: relative;
  box-sizing: border-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  flex-wrap:wrap;
  line-height: 1.4;
  border-left: solid 1px #ccc;
}

ul.linenav-duo li{
  box-sizing: border-box;
  border-top: solid 1px #ccc;
  border-bottom: solid 1px #ccc;
  border-right: solid 1px #ccc;
  width : 100%;
  width : -webkit-calc(100%/1);
  width : calc(100%/1);
  margin-top: -1px;
}

ul.linenav-duo li a{
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 13px 25px;
  display: flex;
  align-items:center;
  justify-content:center;
  color: #333;
  font-size: 1.1rem;
  text-decoration: none;
  background-color: #fff;
  -webkit-transition: all .2s ease-in-out;
  -moz-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  -ms-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
}

ul.linenav-duo li a.linecurrent{
  color:#f7726c;
}

ul.linenav-duo li a:hover {
  color: #fff;
  background-color: #f7726c;
}

ul.linenav-duo li a:hover:after {
  position:absolute;
  content:" ";
  right: 15px;
  width: 6px;
  height: 6px;
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  top: 45%;
}

ul.linenav-duo li a::after{
  position:absolute;
  content:" ";
  right: 15px;
  width: 6px;
  height: 6px;
  border-top: 1px solid #f7726c;
  border-right: 1px solid #f7726c;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  top: 45%;
}

/* ******************** Media Queries による切り替え ******************** */

@media screen and (min-width: 600px) {
  ul.linenav-duo li{
    width: 50%;
    width: -webkit-calc(100%/2);
    width: calc(100%/2);
  }
}



/* ------------------------------------------------------------------ */
/* リストスタイル
/* ------------------------------------------------------------------ */

ul.dotlist {
  margin: 0;
  text-align: left;
  }

ul.dotlist li{
  position:relative;
  padding:0 0 0 20px;
  margin: 5px 0px 10px 0px !important;
  font-size: 1.0rem;
  line-height: 1.5;
  list-style-type:none !important;
  list-style-image:none !important;
  }

ul.dotlist li:before{
  content:''; 
  height:0px; 
  width: 90%;
  display:block; 
  position:absolute; 
  top:10px; 
  left:0px; 
  }

ul.dotlist li:after{
  content:'';
  display:block; 
  position:absolute; 
  background:#fff;
  width:5px;
  height:5px; 
  top:7px; 
  left:5px; 
  border-radius: 5px;
}



ul.komelist {
  margin: 0;
  text-align: left;
  }

ul.komelist li{
  position:relative;
  padding:0 0 0 20px;
  margin: 5px 0px 12px 0px !important;
  font-size: 1.0rem;
  line-height: 1.5;
  font-weight: 400;
  list-style-type:none !important;
  list-style-image:none !important;
  }

ul.komelist li:before{
  content:'※'; 
  height:0px; 
  width: 90%;
  display:block; 
  position:absolute; 
  left:0px; 
  }


/*------ 番号リスト ------*/

.numberlist {
  margin: 2rem 1rem;
  padding: 0 1rem 0.5rem 0rem;
}
.numberlist li{
  position: relative;
  padding: 0 0 0 0.5rem;
  margin: 1rem 0px 1rem 0px !important;
  font-size: 1rem;
  line-height: 1.6;
  list-style-type: decimal !important;
  list-style-image:none !important;
}
.numberlist li span {
  margin-top: 2rem;
}




/* ------------------------------------------------------------------ */
/* ボタン設定
/* ------------------------------------------------------------------ */

.btn{
  margin-top: 2rem;
  font-size: 1.2rem;
  line-height: 1.3;
  text-align: center;
  clear: both;
}

/* 中央ボタン（オレンジ） */

.button,
.button:visited,
button {
  position: relative;
  font-weight: 600;
  line-height: 1.4;
  background: #eb6853;
  display: inline-block;
  text-decoration: none;
  letter-spacing: 0;
  color: #fff;
  padding: 1rem 3rem;
  margin-bottom: 18px;
  border: 0;
  cursor: pointer;
  height: auto;

  -webkit-transition: all .2s ease-in-out;
  -moz-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  -ms-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;

  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -khtml-border-radius: 5px;
  border-radius: 5px;
  }

.button:after {
  position:absolute;
  content:" ";
  right: 18px;
  width: 8px;
  height: 8px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  top: 45%;
}

.button:hover,
button:hover {
  background: #c45240;
  color: #fff;
  text-decoration: none;
  }

.button:active,
button:active {
  background: #eb6853;
  color: #fff;
  }

.button.full-width,
button.full-width {
  width: 100%;
  padding-left: 0 !important;
  padding-right: 0 !important;
  text-align: center;
  }

/* Fix for odd Mozilla border & padding issues */
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
  }


/* 中央ボタン（カラシ） */

.button-r,
.button-r:visited,
button-r {
  position: relative;
  font-size: 1.2rem;
  letter-spacing: 0.5rem;
  font-weight: 600;
  background: #e1bf36;
  display: inline-block;
  text-decoration: none;
  letter-spacing: 0;
  color: #fffef7;
  padding: 1rem 3rem;
  margin-top: 30px;
  margin-bottom: 18px;
  border: none;
  cursor: pointer;
  height: auto;

  -webkit-transition: all .2s ease-in-out;
  -moz-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  -ms-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;

  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  -khtml-border-radius: 6px;
  border-radius: 6px;
  }

.button-r:after {
  position:absolute;
  content:" ";
  right: 18px;
  width: 8px;
  height: 8px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  top: 45%;
}

.button-r:hover,
button-r:hover {
  background: #e5d160;
  color: #fff;
  text-decoration: none;
  }

.button-r:active,
button-r:active {
  background: #e5d160;
  color: #fff;
  }

.button-r.full-width,
button-r.full-width {
  width: 100%;
  padding-left: 0 !important;
  padding-right: 0 !important;
  text-align: center;
  }

.button-r >span {
  font-size: 1.1rem;
  text-align: center;
  clear: both;
}
	
/* Fix for odd Mozilla border & padding issues */
button-r::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
  }

/* 中央ボタン（カラシ・大サイズ） */

.button-rl,
.button-rl:visited,
button-rl {
  position: relative;
  font-size: 1.4rem;
  font-weight: 600;
  background: #e1bf36;
  display: inline-block;
  text-decoration: none;
  letter-spacing: 0;
  color: #fffef7;
  padding: 1.5rem 4rem;
  margin-top: 30px;
  margin-bottom: 18px;
  border: none;
  cursor: pointer;
  height: auto;

  -webkit-transition: all .2s ease-in-out;
  -moz-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  -ms-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;

  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  -khtml-border-radius: 6px;
  border-radius: 6px;
  }

.button-rl:after {
  position:absolute;
  content:" ";
  right: 20px;
  width: 10px;
  height: 10px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  top: 45%;
}

.button-rl:hover,
button-rl:hover {
  background: #e5d160;
  color: #fff;
  text-decoration: none;
  }

.button-rl:active,
button-rl:active {
  background: #e5d160;
  color: #fff;
  }

.button-rl.full-width,
button-rl.full-width {
  width: 100%;
  padding-left: 0 !important;
  padding-right: 0 !important;
  text-align: center;
  }

.button-rl >span {
  font-size: 1.1rem;
  text-align: center;
  clear: both;
}
	
/* Fix for odd Mozilla border & padding issues */
button-rl::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
  }


/* 中央ボタン（ブルー）*/	
	
.button-b,
.button-b:visited,
button-b {
  position: relative;
  font-weight: 600;
  line-height: 1.4;
  background: #32849d;
  display: inline-block;
  text-decoration: none;
  letter-spacing: 1;
  color: #fffef7;
  padding: 1rem 2rem;
  margin: 30px 0 18px 0;
  border: none;
  cursor: pointer;
  height: auto;

  -webkit-transition: all .2s ease-in-out;
  -moz-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  -ms-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;

  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  -khtml-border-radius: 6px;
  border-radius: 6px;
  }

.button-b > span {
  font-size: 1.1rem;
  text-align: center;
  clear: both;
}

.button-b:after {
  position:absolute;
  content:" ";
  right: 18px;
  width: 8px;
  height: 8px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  top: 45%;
}

.button-b:hover,
button-b:hover {
  background: #1f677c;
  color: #fffef7;
  text-decoration: none;
  }

.button-b:active,
button-b:active {
  background: #1f677c;
  color: #f66e5e;
  }

.button-b.full-width,
button-b.full-width {
  width: 100%;
  padding-left: 0 !important;
  padding-right: 0 !important;
  text-align: center;
  }
	
/* Fix for odd Mozilla border & padding issues */
button-b::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
  }
	



/* フロート画像
-------------------------------------------------- */
.phr {
  float: right;
  width: 100%;
  margin: 5px 0 10px 0!important;
}

.phr:after {
  content:"";
  clear: both;
  display: block;
}

.phr-s {
  float: right;
  width: 28%;
  margin: 5px 0 10px 15px!important;
}

.phr-s:after {
  content:"";
  clear: both;
  display: block;
}

.phr-m {
  float: right;
  width: 50%;
  margin: 5px 0 10px 15px!important;
}

.phr-m:after {
  content:"";
  clear: both;
  display: block;
}


/* ****************** Media Queries による切り替え ***************** */

/* モバイルレイアウト
---------------------------------------------------- */

@media only screen and (min-width: 601px) {	
  .phr {
    width: 32%;
    margin-left: 20px!important;
  }
  .phr-s {
    width: 23%;
    margin-left: 20px!important;
  }
  .phr-m {
    width: 35%;
    margin-left: 20px!important;
  }	
} /* /@media */


/* PCレイアウト 961px〜
---------------------------------------------------- */
@media only screen and (min-width: 961px) {
  .phr {
    width: 40%;
    margin: 5px 0 10px 30px!important;
  }
  .phr-s {
    width: 18%;
    margin: 5px 0 10px 30px!important;
  }
  .phr-m {
    width: 20%;
    margin: 5px 0 10px 30px!important;
    min-width: 200px;
  }
}

/* ****************** Media Queries 切り替えおわり ***************** */




/* スクロールアニメーション設定
-------------------------------------------------- */

.animated {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }
 
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
 
@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }
 
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}


	

/* ------------------------------------------------------------------ */
/* 赤青背景共通設定
/* ------------------------------------------------------------------ */

.markw{
  font-size: 1.8rem;
  line-height: 1.6;
  font-weight: 600;
  margin: 0 auto 4rem;
  padding-top: 70px;
  text-align: center;
  background: url(../images/icon-truck-w2.png) no-repeat top center;
  position: relative;
  }

.markw:after {
  content:'';
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  margin: 1.8rem auto;
  width: 60px;
  height: 1px;
  background: #fffef7;
  }

h1.markw span {
  font-size: 1.3rem;
  line-height: 1.6;
}

.greeting{
  font-size: 2.0rem;
  line-height: 1.3;
  font-weight: 600;
  margin: 50px auto 40px;
  padding-bottom: 10px;
  text-align: left;
  color: #fff;
  border-bottom: 1px solid #fff;
  }
	
.mheadline-w {
  clear: both;
  margin: 2rem 0;
  padding-bottom: 1rem;
  font-size: 1.5rem;
  font-weight: 600;
  text-align: center;
  border-bottom: 1px dotted #fff;
  }

.sheadline-w {
  font-size: 1.25rem;
  line-height: 1.4;
  font-weight: 600;
  margin: 10px auto 15px;
  text-align: left;
  }

.ssheadline-w {
  font-size: 1.05rem;
  line-height: 1.4;
  font-weight: 600;
  margin: 10px auto 15px;
  text-align: left;
  }

/*H3見出し*/
h3.hc {
  font-size: 1.25rem;
  line-height: 1.4;
  font-weight: 600;
  display: inline-block;
  margin: 10px auto 15px;
  padding: 0 0 0 38px;
  background: url(../images/icon-hc.svg) no-repeat;
}




/* ****************** Media Queries による切り替え ***************** */

/* PCレイアウト 961px〜
-------------------------------------------------- */

@media only screen and (min-width: 961px) {

  .markw{
    margin: 50px auto 5rem;
    padding-top: 100px;
    background: url(../images/icon-truck-w.png) no-repeat top center;
    font-size: 2.0rem;
    }
  .mheadline-w {
    margin: 4rem 0 3rem 0;
    }
}

/* ****************** Media Queries 切り替えおわり ***************** */




/* 赤背景設定
-------------------------------------------------- */

.redback {
  margin: 0;
  padding: 20px 0;
  width: 100%;
  background-color: #f66e5e;
  background-image:
  url(../images/bg-scissors.png), /* 最前面の背景レイヤーの背景画像 */
  url(../images/bg-r.gif);

  background-repeat:
  no-repeat, /* 最前面の背景レイヤーに対応 */
  repeat;

  background-position:
  bottom right, /* 最前面の背景レイヤーに対応 */
  top;
}



/* 青背景設定
-------------------------------------------------- */

.blueback {
  margin: 0;
  padding: 20px 0 40px 0;
  width: 100%;
  background-color: #63b6cf;
  background-image:
  url(../images/bg-scissors.png), /* 最前面の背景レイヤーの背景画像 */
  url(../images/bg-b.gif);

  background-repeat:
  no-repeat, /* 最前面の背景レイヤーに対応 */
  repeat;

  background-position:
  bottom right, /* 最前面の背景レイヤーに対応 */
  top;
  }
	
	


/* ------------------------------------------------------------------ */
/* 白背景設定
/* ------------------------------------------------------------------ */


.markr{
  font-size: 1.8rem;
  line-height: 1.3;
  font-weight: 600;
  margin: 20px auto 5rem;
  padding-top: 70px;
  text-align: center;
  background: url(../images/icon-truck-r2.png) no-repeat top center;
  color: #666;
  position: relative;
  }

.markr:after {
  content:'';
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  margin: 1.8rem auto;
  width: 60px;
  height: 1px;
  background: #ea6b5b;
  }

.ivoryback {
  margin: 0;
  padding: 20px 0;
  width: 100%;
  color: #666;
  background-color:#fff6e6;
  }
	
.mheadline-g {
  margin: 6rem 0 3rem 0;
  padding-bottom: 1rem;
  font-size: 1.6rem;
  font-weight: 600;
  color: #666;
  text-align: center;
  border-bottom: 1px dotted #666;
  }

.sheadline-g {
  font-size: 1.25rem;
  line-height: 1.4;
  margin: 0;
  text-align: left;
  }

.ssheadline-g {
  font-size: 1.05rem;
  line-height: 1.4;
  margin: 0;
  text-align: left;
  }

.hl4 {
  font-size: 1.0rem;
  line-height: 1.4;
  margin: 0.5rem 0;
  padding: 0;
  }

/* ****************** Media Queries による切り替え ***************** */

/* PCレイアウト 961px〜
-------------------------------------------------- */

@media only screen and (min-width: 961px) {

  .markr{
    margin-top: 50px;
    padding-top: 100px;
    background: url(../images/icon-truck-r.png) no-repeat top center;
    font-size: 2.0rem;
    }
}

/* ****************** Media Queries 切り替えおわり ***************** */



	

/* ------------------------------------------------------------------ */
/* お知らせ 設定
/* ------------------------------------------------------------------ */

/* ソーシャルボタン
-------------------------------------------------- */

#socialButton {
  width: 100%;
  margin-top: 0px;
  padding: 18px 0;
}

#socialButton ul {
  height: 36px;
  text-align: center;
}

#socialButton ul li {
  display: inline-block;
  margin-left: 24px;
  text-indent: -9999px;
}

#socialButton ul li:first-child {
  margin-left: 0px;
}

.sns-tw {
  display: block;
  width: 36px;
  height: 36px;
  background: url('../images/btn_twitter.png') no-repeat;
  background-size: cover;
  text-indent:  -9999px;
}
.sns-tw:hover {
  background-size: cover;
  background-position: 0 -36px;
}
.sns-fb {
  display: block;
  width: 36px;
  height: 36px;
  background: url('../images/btn_facebook.png') no-repeat;
  background-size: cover;
  text-indent:  -9999px;
}
.sns-fb:hover {
  background-size: cover;
  background-position: 0 -36px;
}
.sns-ig {
  display: block;
  width: 36px;
  height: 36px;
  background: url('../images/btn_instagram.png') no-repeat;
  background-size: cover;
  text-indent:  -9999px;
}
.sns-ig:hover {
  background-size: cover;
  background-position: 0 -36px;
}
.sns-yt {
  display: block;
  width: 36px;
  height: 36px;
  background: url('../images/btn_youtube.png') no-repeat;
  background-size: cover;
  text-indent:  -9999px;
}
.sns-yt:hover {
  background-size: cover;
  background-position: 0 -36px;
}



/* カレンダー
-------------------------------------------------- */

.calendar{
  border-collapse:collapse;
  width:100%;
  table-layout:fixed;
  color: #555;
  margin-bottom: 1rem;
}

.calendar-title {
  font-size: 0.9rem;
  line-height: 1.5;
  font-weight: bold;
  margin: 0.5rem auto;
  text-align: center;
}

.calendar caption{
  padding-bottom:6px;
  font-size: 0.8rem
}
 
.calendar th,.calendar td{
  font-size: 0.8rem;
  border: 1px solid #bbb;
  text-align:center;
  line-height: 2.0;
}
 
.calendar th{
  background:#efefef;
}
.calendar th:first-child{
  color:#f30;
}
.calendar th:last-child{
  color:#03c;
}
.calendar td{
  text-align:center;
}
 
.wdy{
  background:#bbe4ff;
}
.hdy{
  background:#ffc7b6;
}
.temporary{
  background:#f8e193;
}
.discon{
  background:#dedede;
}
.suspension{
  background:#fffff5;
}

.maxround {
  font-weight: bold;
  color: #be2d08;
}




/* newsリスト
-------------------------------------------------- */

.news {
  margin-left: 0px;
}

.newsdate {
  font-size: 0.9rem;
  margin: 1rem 0 0.3rem 0;
  padding-left: 7px;
  text-align: center;
}

.newstitle {
  font-size: 1.0rem;
  line-height: 1.6;
  margin: 0 0 1.5rem 0;
  text-align: center;
}

.newstitle a {
  text-decoration: underline;
  color: #ffebad;
}

.newstitle a:hover {
  color: #fff288;
  text-decoration: none;
}
	

/* facebook
-------------------------------------------------- */

.fbbox {
  margin: 4rem auto;
  width: 100%;
  text-align: center;
}
	



/* ------------------------------------------------------------------ */
/* ボックス設定 - ALL Flexbox
/* ------------------------------------------------------------------ */

/* 2列タイプ A
------------------------------------------------------------------ */

.flexcontainer {
  width:100%;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-flex-wrap:wrap;
  -ms-flex-wrap:wrap;
  flex-wrap: wrap;
  justify-content: space-between;
  flex-direction:row;
}

.duobox_l >img{
  max-width: 100% !important;
  height: auto;
  margin-bottom: 1.8rem;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  }

.flxbox {
  width: 100%;
  margin-bottom: 20px;
}


/* PCレイアウト 800px〜
-------------------------------------------------- */

@media only screen and (min-width: 800px) {

  .flxbox {
    width: 46%;
    margin-bottom: 2rem;
    position: relative;
    margin-right: 8%;
  }

  .flxbox:nth-child(2n) {
    margin-right: 0;
  }


  .duobox_l {
    flex: 1;
    padding: 1rem;
    max-width: 50%;
    flex-basis: 50%; /*IE11対応*/
  }

  .duobox_r {
    flex: 2;
    padding: 1rem;
    max-width: 50%;
    flex-basis: 50%; /*IE11対応*/
  }

}



/* 2列タイプ B
------------------------------------------------------------------ */

.flx2 {
  overflow: hidden; 
  margin: 0;
  }

.flx2 li {
  width: 100%;
  list-style-type: none;
  margin: 0;
  padding: 15px 0 10px;
  border-bottom: 1px dotted #fca297;
  position: relative;
  }

.flx2 li a {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  text-indent:-9999px;
}

.flx2 li a:hover{
  background-color:#FFF;
  filter:alpha(opacity=20);
  -moz-opacity: 0.2;
  opacity: 0.2;
}

.ttl-flx3 {
  font-size: 1.2rem;
  line-height: 1.3;
  font-weight: 600; 
  margin-bottom: 10px;
  }

.txt-flx3 {
  margin: 0 0 10px 0;
  padding-bottom: 40px;
  font-size: 1.0rem;
  line-height: 1.6;
  letter-spacing: 0;
  color: #fff;
  overflow: auto;
}

/* ボタンなし仕様 */
.txt-flx2-nml {
  margin: 0 0 10px 0;
  padding-bottom: 0;
  font-size: 1.0rem;
  line-height: 1.6;
  letter-spacing: 0;
  color: #fff;
  overflow: auto;
}
  
.flx2 li img {
  float: left;
  margin-right: 1.5rem;
  margin-bottom: 1rem;
  width: 35% !important;
  height: auto;
  min-height: 0%; /*IE対策*/
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}

.btn-flx2 a:hover {
  border-color: #fff;
  text-decoration: none;
  background-color: #fd897c;
}


/* ******************** Media Queries による切り替え ******************** */

@media only screen and (min-width: 450px) {
  .flx2 li img {
    margin-bottom: .5rem;
  }
}

@media only screen and (min-width: 600px) {
  
  .flx2 {
    width:100%;
    margin: 2rem 0 0;
    padding:0;
    display:-webkit-box;
    display:-moz-box;
    display:-ms-box;
    display:-webkit-flexbox;
    display:-moz-flexbox;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:-moz-flex;
    display:-ms-flex;
    display:flex;
     -webkit-flex-wrap:wrap;
    -moz-flex-wrap:wrap;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
    align-items: stretch;
  }
  .flx2 li {
    width: 47%;
    list-style: none;
    margin: 0 6% 50px 0;
    text-align: center;
    color: #666;
    background-color: #fff;
    padding: 0;
    border: none;
    display: flex;
    flex-direction: column;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
  }
  .flx2 li:nth-child(2n) {
    margin-right: 0;
  }
  .flx2 li img {
    float: none;
    margin: 0 0 1rem 0;
    width: 100% !important;
    max-width: 100%;
    height: auto;
    -webkit-border-radius: 8px 8px 0 0;
    -moz-border-radius: 8px 8px 0 0;
    border-radius: 8px 8px 0 0;
  }
  .ttl-flx2 {
    font-size: 1.2rem;
    line-height: 1.4;
    margin: 0 1rem 1rem 1rem;
  }
  .txt-flx2 {
    margin: 0 1rem 0.8rem;
    text-align: left;
    color: #666;
    padding-bottom: 0;
  }
  /* ボタンなし仕様 */
  .txt-flx2-nml {
    margin: 0 1rem 0.8rem;
    text-align: left;
    color: #666;
    padding-bottom: 0;
  }
}

@media only screen and (min-width: 800px) {
  .flx2 li {
    background-color: #fff;
    }
}



/* ------------------------------------------------------------------ */
/* FLEXBOX（新！）
/* ------------------------------------------------------------------ */

[class^="flex-col"] {
  margin-top: 3rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

/* コンテンツ下のマージン */
.flex-child {
  margin-bottom: 2rem;
}
.flex-child img { width: 100%; }

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

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

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

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

.flex-child .caption {
  margin: 8px 0 12px;
  font-size: 1rem;
  text-align: center;
}


/* ******************** Media Queries による切り替え ******************** */

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

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

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

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


/* ------------------------------------------------------------------ */
/* ボックス設定 - PC Flexbox - SP Float
/* ------------------------------------------------------------------ */


/* 3列タイプ
------------------------------------------------------------------ */

.flx3 {
  overflow: hidden; 
  margin: 0;
  }

.flx3 li {
  width: 100%;
  list-style-type: none;
  margin: 0;
  padding: 15px 0 10px;
  border-bottom: 1px dotted #fca297;
  position: relative;
  }

.flx3 li a {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  text-indent:-9999px;
}

.flx3 li a:hover{
  background-color:#FFF;
  filter:alpha(opacity=20);
  -moz-opacity: 0.2;
  opacity: 0.2;
}

.ttl-flx3 {
  font-size: 1.2rem;
  line-height: 1.3;
  font-weight: 600; 
  margin-bottom: 10px;
  }

.txt-flx3 {
  margin: 0 0 10px 0;
  padding-bottom: 40px;
  font-size: 1.0rem;
  line-height: 1.6;
  letter-spacing: 0;
  color: #fff;
  overflow: auto;
}

/* ボタンなし仕様 */
.txt-flx3-nml {
  margin: 0 0 10px 0;
  padding-bottom: 0;
  font-size: 1.0rem;
  line-height: 1.6;
  letter-spacing: 0;
  color: #fff;
  overflow: auto;
}
  
.flx3 li img {
  float: left;
  margin-right: 1.5rem;
  margin-bottom: 1rem;
  width: 35% !important;
  height: auto;
  min-height: 0%; /*IE対策*/
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}

.dmy-btn {
  margin: 0 0 7px;
  font-size: 1.0rem;
  line-height: 1.4;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  display: inline-block;
  padding: 6px 16px;
  border: 1px solid #ffc5b5;
  border-radius: 50px;
  background-color: #ff9279;
  -webkit-transition: all .2s ease-in-out;
  -moz-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  -ms-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
  position: absolute;
  bottom: 10px;
  left: 40%;
}

.dmy-btn-yet {
  margin: 0 0 10px;
  font-size: 1.0rem;
  line-height: 1.4;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  display: inline-block;
  padding: 8px 10px;
  background-color: #ccc;
  -webkit-transition: all .2s ease-in-out;
  -moz-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  -ms-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
}

.btn-flx3 a:hover {
  border-color: #fff;
  text-decoration: none;
  background-color: #fd897c;
}


/* ******************** Media Queries による切り替え ******************** */

@media only screen and (min-width: 450px) {
  .flx3 li img {
    margin-bottom: .5rem;
  }
}

@media only screen and (min-width: 600px) {
  
  .flx3 {
    width:100%;
    margin: 2rem 0 0;
    padding:0;
    display:-webkit-box;
    display:-moz-box;
    display:-ms-box;
    display:-webkit-flexbox;
    display:-moz-flexbox;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:-moz-flex;
    display:-ms-flex;
    display:flex;
     -webkit-flex-wrap:wrap;
    -moz-flex-wrap:wrap;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
    align-items: stretch;
  }
  .flx3 li {
    width: 32%;
    list-style: none;
    margin: 0 2% 30px 0;
    text-align: center;
    color: #666;
    background-color: #fff;
    padding: 0;
    border: none;
    display: flex;
    flex-direction: column;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
  }
  .flx3 li:nth-child(3n) {
    margin-right: 0;
  }
  .flx3 li img {
    float: none;
    margin: 0 0 1rem 0;
    width: 100% !important;
    max-width: 100%;
    height: auto;
    -webkit-border-radius: 8px 8px 0 0;
    -moz-border-radius: 8px 8px 0 0;
    border-radius: 8px 8px 0 0;
  }
  .ttl-flx3 {
    font-size: 1.0rem;
    font-weight: bold;
    text-align: center;
    line-height: 1.4;
    margin: 0 1rem 0.7rem 1rem;
  }
  .txt-flx3 {
    margin: 0 1rem 0.8rem;
    text-align: left;
    color: #666;
    padding-bottom: 0;
  }
  /* ボタンなし仕様 */
  .txt-flx3-nml {
    margin: 0 1rem 0.8rem;
    text-align: left;
    color: #666;
    padding-bottom: 0;
  }
  .rcmd-btn {
    margin-top: auto;
  } 
  .dmy-btn {
    position: relative;
    left: auto;
    padding: .6rem 1.2rem;
    margin: 1rem 0 1rem;
  }
  
  .dmy-btn-yet {
    padding: 1rem 1.5rem;
    margin: 1rem 0 2rem;
  }
}

@media only screen and (min-width: 800px) {
  .flx3 li {
    background-color: #fff;
    }
}



/* 3列タイプ（画像なし）
------------------------------------------------------------------ */

.flx3np {
  overflow: hidden; 
  margin: 0;
  }

.flx3np li {
  width: 100%;
  list-style-type: none;
  color: #666;
  background-color: #fff;
  margin: 10px 0 0 0;
  padding: 10px 15px 10px;
  position: relative;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  }

.flx3np li a {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  text-indent:-9999px;
}

.flx3np li a:after {
  position:absolute;
  content:" ";
  right: 15px;
  width: 8px;
  height: 8px;
  border-top: 2px solid #f7726c;
  border-right: 2px solid #f7726c;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  top: 45%;
}

.flx3np li:hover{
  filter:alpha(opacity=90);
  -moz-opacity: 0.9;
  opacity: 0.9;
}

.ttl-flx3np {
  position: relative;
  font-size: 1.2rem;
  font-weight: 600; 
  margin-bottom: 10px;
  color: #d35546;
  line-height: 1.5;
  padding-left: 1.8rem;
  }

.ttl-flx3np::before {
  position:absolute;
  left: 0;
  content:"";
  display: inline-block;
  background: url(../images/icon-sl.svg) no-repeat;
  background-size:contain;
  width: 1.5rem;
  height: 1.5rem;
}


.ttl-flx3np-pdf {
  position: relative;
  font-size: 1.2rem;
  font-weight: 600; 
  margin-bottom: 10px;
  color: #d35546;
  line-height: 1.5;
  padding-left: 1.8rem;
}

.ttl-flx3np-pdf::before {
  position:absolute;
  left: 0;
  content:"";
  display: inline-block;
  background: url(../images/icon-pdf.svg) no-repeat;
  background-size:contain;
  width: 1.5rem;
  height: 1.5rem;
}

.txt-flx3np {
  margin: 0;
  font-size: 1.0rem;
  line-height: 1.6;
  letter-spacing: 0;
  overflow: auto;
}

/* ******************** Media Queries による切り替え ******************** */

@media only screen and (min-width: 450px) {
  .flx3np li img {
    margin-bottom: .5rem;
  }
}

@media only screen and (min-width: 600px) {
  
  .flx3np {
    width:100%;
    margin: 2rem 0 0;
    padding:0;
    display:-webkit-box;
    display:-moz-box;
    display:-ms-box;
    display:-webkit-flexbox;
    display:-moz-flexbox;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:-moz-flex;
    display:-ms-flex;
    display:flex;
     -webkit-flex-wrap:wrap;
    -moz-flex-wrap:wrap;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
    align-items: stretch;
  }
  .flx3np li {
    width: 32%;
    list-style: none;
    margin: 0 2% 20px 0;
    text-align: left;
    padding: 1rem 1.5rem 0.8rem 1rem;
    border: none;
    display: flex;
    flex-direction: column;
    font-size: 0.9rem;
  }
  .flx3np li:nth-child(3n) {
    margin-right: 0;
  }
  .ttl-flx3np {
    font-size: 1.1rem;
    margin: 0 1rem 0.7rem 0;
  }
  .ttl-flx3np-pdf {
    font-size: 1.1rem;
    margin: 0 1rem 0.7rem 0;
  }
  .txt-flx3np {
    margin: 0 1rem 00 0;
    color: #666;
    padding-bottom: 0;
  }
}

@media only screen and (min-width: 800px) {
  .flx3np li {
    background-color: #fff;
    }
}




/* アクセスマップ
-------------------------------------------------- */
		
.show-h3 {
  font-size: 1.0rem;
  line-height: 1.4;
  font-weight: 600;
  margin: 10px auto 10px;
  text-align: left;
}
	
.show-h3:before {
  font-size: 1.2rem;
  margin-right:5px;
  font-family:"FontAwesome";
  content:"\f101";
  position: relative;
  display:inline-block;
	}
	
.show-sp {
  margin-bottom: 1rem;
  font-size: 1.2rem;
  font-weight: 300;
  color: #fffef7;
  }


/* テーブル（レスポンシブ）
-------------------------------------------------- */

.rsv {
  border-collapse: collapse;
  width: 100%;
  font-size: 1rem;
  line-height: 1.8;
  margin: 1rem 0;
  border-top: 1px solid #ea6b5b;
}

.rsv th,
.rsv td {
  -moz-box-sizing: border-box; /* box-size[border・padding 込み] */
  box-sizing: border-box; /* box-size[border・padding 込み] */
  border: 1px solid #ea6b5b;
}

.rsv td {
  display: block;
  padding: 0.8rem;
  text-align: left;
  background-color:#fffdf9;
  color: #666;
  border: 1px solid #ea6b5b;
}

.rsv th {
  display: block;
  padding: 0.5rem;
  border-top: none;
  border-bottom: none;
  width: 100%;
  background-color: #fc9483;
  text-align: center;
  vertical-align: middle;
}

/* 白背景 */

.rsv-w {
  border-collapse: collapse;
  width: 100%;
  font-size: 1rem;
  line-height: 1.4;
  margin: 1rem 0;
  border-top: 1px solid #ea6b5b;
}
.rsv-w th,
.rsv-w td {
  -moz-box-sizing: border-box; /* box-size[border・padding 込み] */
  box-sizing: border-box; /* box-size[border・padding 込み] */
  border: 1px solid #ea6b5b;
}
.rsv-w td {
  display: block;
  padding: 0.8rem;
  text-align: center;
  background-color:#fffdfa;
  color: #666;
  border: 1px solid #ea6b5b;
}
.rsv-w th {
  display: block;
  padding: 0.5rem;
  border-top: none;
  border-bottom: none;
  width: 100%;
  background-color: #ff9b84;
  text-align: center;
  vertical-align: middle;
  color: #fff;
}



/* ****************** Media Queries による切り替え ***************** */

@media only screen and (min-width: 600px) {

  
  /* テーブル（レスポンシブ）
  -------------------------------------------------- */
    
  .rsv th {
    width: 30%;
    display: table-cell;
    border: 1px solid #ea6b5b;
  }

  .rsv td {
    display: table-cell;
    text-align: left;
  }

  /* 白背景 */

  .rsv-w th {
    width: 30%;
    display: table-cell;
    border: 1px solid #ea6b5b;
  }

  .rsv-w td {
    display: table-cell;
    text-align: left;
  }
  
}

/* テーブル（ノーマル）
--------------------------------------------------------------------- */


.nmltable {
  width: 100%;
  margin:0 0 2rem 0;
  padding:0;
  table-layout: fixed;
  color: #666;
}

.nmltable th{
  padding: 8px;
  background:#ff9b84;
  border: 1px solid #ea6b5b;
}
	
.nmltable th.relay{
  background: #b2b2b2;
}

th.train-number {
  padding: 8px;
}

.nmltable td.gry {
  background: #e6e6e6;
  text-align: center;
  padding: 8px !important;
}
	
.nmltable td.holdy {
  background-color: #df503f;
}
	
.nmltable td.wekdy{
  background-color: #5aa5bc;
}

.nmltable p.thr {
  font-size: 0.9rem;
  line-height: 1.3;
  color: #FFF !important;
  text-align: right !important;
  margin-bottom: 0 !important;
}

.nmltable p.thm {
  font-size: 0.9rem;
  line-height: 1.3;
  color: #FFF !important;
  text-align: center !important;
  margin-bottom: 0 !important;
}
	
.nmltable p.tdr {
  text-align: right !important;
  margin-bottom: 0 !important;
  font-size: 0.9rem;
  line-height: 1.3;
  color: #666;
}

.nmltable p.tdm {
  text-align: center !important;
  margin-bottom: 0 !important;
  font-size: 0.9rem;
  line-height: 1.3;
  color: #666;
}

.nmltable td {
  background:#FFF;
  text-align: right;
  border: 1px solid #a5a5a5;
  border-collapse:collapse;
  padding: 8px;
  vertical-align: middle;
}
	
.nmltable td.gry {
  background: #e7e7e7;
  padding: 2px 8px;
}
	
.nmltable p.change  {
  color: #666;
  text-align: center !important;
  margin-bottom: 0 !important;
  }





/* PCレイアウト 961px〜
-------------------------------------------------- */

@media only screen and (min-width: 961px) {
	
  /* newsエリア
  -------------------------------------------------- */

  .floatcontainer {
    overflow: hidden;
    width:100%;
    padding-bottom: 3rem;
  }

  .newsbox {
    float: left;
    margin: 0 10% 0 0;
    width: 45%;
    text-align: left;
    overflow: hidden;
  }

  .fbbox {
    float: left;
    margin: 70px 0 0 0;
    width: 45%;
    text-align: left;
    overflow: hidden;
  }

  .newsdate {
    text-align: left;
  }

  .newstitle {
    text-align: left;
  }

  .show-sp {
    display: none;
  }

  .show-h3 {
    display: none;
  }

}



/* ------------------------------------------------------------------ */
/* ご乗車方法 設定
/* ------------------------------------------------------------------ */


/* 路線図
-------------------------------------------------- */

#timeline {
  margin-top: 100px;
  margin-bottom: 30px;
  padding: 0;
  border-top: 8px solid #aaa;
  list-style: none;
  display: flex;
  display: -webkit-flex;
  display: box;
}

#timeline li {
  padding-top: 30px;
  position: relative;
  -webkit-flex: 1;
  flex: 1;
  box-flex: 1;
  font-size: 1.4rem;
  line-height: 1.3;
  font-weight: 600;
  -webkit-font-smoothing: antialiased;
}

.station {
  width: 100%;
  padding-bottom: 30px;
  text-align: center;
  position: absolute;
  top: -55px;
  display: block;
}

.station-e {
  width: 100%;
  padding-bottom: 30px;
  text-align: center;
  position: absolute;
  top: -65px;
  display: block;
}

.station-pass {
  display: none;
}

.station-pass-e {
  display: none;
}

.circle {
  width: 24px;
  height: 24px;
  margin-left: -12px;
  background: #f7726c;
  border: 3px solid #fff;
  border-radius: 50%;
  position: absolute;
  top: -16px;
  left: 50%;
}

.pass {
  width: 20px;
  height: 20px;
  margin-left: -12px;
  background: #567e8a;
  border: 2px solid #eee9dc;
  border-radius: 50%;
  position: absolute;
  top: -14px;
  left: 50%;
	}
	
.passname {
  display: none;
}
	
.parking {
  margin-top: -10px;
  text-align: center;
  padding: 2px;
  display: block;
  font-size: 1.0rem;
}

#timeline a{
  color: #f7726c;
  text-decoration: underline;
}
	
#timeline a:hover{
  color: #fd897c;
  text-decoration: underline;
}



/* ****************** Media Queries による切り替え ***************** */	

/* PCレイアウト 961px
-------------------------------------------------- */
@media only screen and (min-width: 961px) {

  .passname {
    display: block;
  }

  .station {
    font-size: 1.2rem;
    font-weight: 600;
  }

  .station-e {
    width: 100%;
    padding-bottom: 30px;
    text-align: center;
    position: absolute;
    top: -74px;
    display: block;
    font-size: 1.2rem;
  }

  .station-pass {
    width: 100%;
    padding-bottom: 30px;
    text-align: center;
    position: absolute;
    top: -50px;
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
  }

  .station-pass-e {
    width: 100%;
    padding-bottom: 30px;
    text-align: center;
    position: absolute;
    top: -65px;
    display: block;
    font-size: 1rem;
    font-weight: 500;
  }

  .circle {
    width: 36px;
    height: 36px;
    margin-left: -16px;
    background: #f7726c;
    border: 5px solid #fff;
    border-radius: 50%;
    position: absolute;
    top: -22px;
    left: 50%;
  }

  .pass {
    width: 28px;
    height: 28px;
    margin-left: -16px;
    background: #567e8a;
    border: 4px solid #fff;
    border-radius: 50%;
    position: absolute;
    top: -18px;
    left: 50%;
  }

}


/* 運賃表
--------------------------------------------------------------------- */

.faretable {
  width: 100%;
  margin: 0 0 30px 0;
  padding:0;
  table-layout: fixed;
}

p.fareitem {
  font-size: 1rem;
  color: #fff;
  margin-bottom:0;
  line-height: 1.2;
}

p.fareitem-e {
  font-size: 1rem;
  color: #fff;
  padding: 0.7rem 0;
  line-height: 1.2;
}

P.faretxt {
  font-size: 1rem;
  color: #666;
  margin-bottom:0;
  line-height: 1.2;
  text-align: right;
}

p.adult {
  font-size: 1rem;
  line-height: 1.1;
  color:#666666;
  margin: 2px;
}

.childcolor{
  color:#e96546;
}

p.round {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.1;
  color:#666666;
  margin: 2px;
}
	
p.child {
  font-size: 1rem;
  line-height: 1.1;
  color:#e96546;
  margin: 2px;
}

.faretable th {
  background:#f7726c;
}

.faretable td.exist {
  background: #FFF;
  text-align: right;
}

.faretable td.exist-padd {
  width: 40%;
  background: #FFF;
  text-align: right;
  padding-top:1rem;
  padding-bottom: 1rem;
  padding-right: 1rem;
  border: 1px solid #ccc;
}
	
.faretable td.gry {
  background: #efefef;
}

.faretable td.exist,
.faretable th {
  border: 1px solid #ccc;
  border-collapse: collapse;
  margin:0;
  padding: 2px;
  vertical-align: middle;
}



/* 時刻表
--------------------------------------------------------------------- */

.week-end {
  display: inline-block;
  font-size: 1.0rem;
  padding: 0.2rem 1.5rem;
  background-color: #f7726c;
  border: 1px solid #fff;
  margin: 0;
}

.week-day {
  display: inline-block;
  font-size: 1.0rem;
  color: #666;
  background-color: #fff;
  border: 1px solid #efefef;
  padding: 0.2rem 2.5rem;
  margin: 0;
}


.timetable {
  width: 100%;
  margin:0 0 2rem 0;
  padding:0;
  table-layout: auto;
}

.timetable th{
  padding: 3px;
  background:#5994ae;
  border: 1px solid #4f869e;
}

.timetable th.redcel {
  background:#f7726c;
}
	
.timetable th.relay{
  background: #b2b2b2;
}

th.train-number {
  padding: 8px;
}

.timetable th.w22p {
  width: 22%;
}
.timetable th.w50p {
  width: 50%;
}

.timetable td.gry {
  background: #e6e6e6;
}

.timetable td.holdy {
  background-color: #df503f;
}
	
.timetable td.wekdy{
  background-color: #5aa5bc;
}

.timetable p.thr {
  font-size: 0.9rem;
  line-height: 1.3;
  color: #FFF !important;
  text-align: right !important;
  margin-bottom: 0 !important;
}

.timetable p.thm {
  font-size: 0.9rem;
  line-height: 1.3;
  color: #FFF !important;
  text-align: center !important;
  margin-bottom: 0 !important;
}
	
.timetable p.tdr {
  text-align: right !important;
  margin-bottom: 0 !important;
  font-size: 0.9rem;
  line-height: 1.3;
  color: #666;
}

.timetable p.tdm {
  text-align: center !important;
  margin-bottom: 0 !important;
  font-size: 0.9rem;
  line-height: 1.3;
  color: #666;
}

.timetable td {
  background:#FFF;
  text-align: right;
  border: 1px solid #4f869e;
  border-collapse:collapse;
  padding: 8px;
  vertical-align: middle;
}
	
.timetable td.gry {
  background: #e7e7e7;
  padding: 2px 8px;
}
	
.timetable p.change  {
  color: #666;
  text-align: center !important;
  margin-bottom: 0 !important;
  }

.timetable td.hachaku-l{
  border-left: none;
}
.timetable td.hachaku-r{
  border-right: none;
}


/* ------------------------------------------------------------------ */
/* 車両のご案内 設定
/* ------------------------------------------------------------------ */


/* スライダー設定
-------------------------------------------------- */

#carslide .sp-thumbnail {
  width: 100%;
  padding: 1px;
  background-color: #fffcf5;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

#carslide .sp-thumbnail-title {
  margin-bottom: 0px;
  text-transform: none;
  font-size: 1.0rem;
  color: #666;
  margin-left: .5rem;
}

#carslide .sp-thumbnail-description {
  font-size: 1.0rem;
  color: #666;
  margin-left: .5rem;
}


@media (max-width: 767px) {
  #carslide .hide-medium-screen {
    display: none;
  }
}

@media (max-width: 767px) {
  #carslide .sp-layer {
    font-size: 1.0rem;
  }
  #carslide .hide-small-screen {
    display: none;
  }
}

@media (max-width: 480px) {
  #carslide .sp-thumbnail {
    text-align: center;
  }

  #carslide .sp-thumbnail-title {
    font-size: 0.9rem;
    text-transform: none;
  }

  #carslide .sp-thumbnail-description {
    display: none;
  }
}

.links {
  text-align: center;
  margin-top: 10px;
  }

	
/* ダブルリスト（赤背景）
-------------------------------------------------- */
	
.wlist{
  margin: 0 0 3rem 0;
  width: 100%;
  list-style: none;
  padding:0 2px 12px 0;
  text-align: left;
}

.wlist li{
  font-size: 1.0rem;
  padding: 7px 0px 7px 10px;
  border-bottom: 1px dotted #fff;
  line-height: 1.6;
  min-height:5px;
  display:block;
}
	
.wlist li a{
  color: #fff9b7;
  text-decoration: underline;
}
	
.wlist li a:hover{
  color: #e7e723;
  text-decoration: underline;
}
	

.wlist li span{
  margin:-1.6em 0 0 9em;
  display:block;
}

/* ダブルリスト（白背景）
-------------------------------------------------- */
	
.wlist-w{
  margin: 0 0 3rem 0;
  width: 100%;
  list-style: none;
  padding:0 2px 12px 0;
  text-align: left;
}

.wlist-w li{
  font-size: 1.0rem;
  padding: 7px 0px 7px 10px;
  border-bottom: 1px dotted #cccccc;
  line-height: 1.6;
  min-height:5px;
  display:block;
}
	
.wlist-w li a{
  color: #f66e5e;
  text-decoration: underline;
}
	
.wlist-w li a:hover{
  color: #f66e5e;
  text-decoration: underline;
}
	

.wlist-w li span{
  margin:-1.6em 0 0 9rem;
  display:block;
}
	

/* ------------------------------------------------------------------ */
/* i. トロッコグッズ 設定
/* ------------------------------------------------------------------ */

.goodslist {
	width: 90%;
	margin: 0 auto;
	}
	
li.item {
	list-style-type: none;
	vertical-align: top;
	padding: 1rem;
	background-color: #fdf8f0;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-khtml-border-radius: 5px;
	border-radius: 5px;
	}

li.item a{
	padding: 4px;
	display: block;
	text-decoration: none;
	}

.item-img{
	margin-bottom: 1rem;
	}

.itempic{
	width: 100%;
	height: auto;
	margin-bottom: 0 !important;
	}

.item-name{
	margin-bottom: 1rem;
	font-size: 1.1rem;
	line-height: 1.3;
	font-weight: 600;
	color: #666;
	}

.item-price{
	font-size: 1.1rem;
	color: #e96546;
	}

.detail {
	display: none;
	}

.detailBtn {
  display: block;
  color: #e25323;
  border: 2px solid #e25323;
  border-radius: 40px;
  padding: 0.4rem 0;
  display: block;
  width: 8.5em;
  margin: 1rem auto;
  text-align: center !important;
  }
	
  li.item a.detailBtn:hover{
  background: #e25323 !important;
  color: #fff !important;
  }
	
/* ****************** Media Queries による切り替え ***************** */	


/* PCレイアウト 961px
-------------------------------------------------- */
@media only screen and (min-width: 961px) {
	
  .detail {
    display: block;
    color: #666;
    margin-bottom: 1rem;
  }

}



/* ------------------------------------------------------------------ */
/* イベント 設定
/* ------------------------------------------------------------------ */


.flxitem2 {
  width: 48%;
  margin-bottom: 2rem;
  position: relative;
  text-align: center;
  margin-right: 4%;
}

.flxitem2:nth-child(2n) {
  margin-right: 0;
}




/* テーブル（イベントカレンダー）
-------------------------------------------------- */

.event-calendar {
  width: 100%;
  margin: 0;
  padding:0;
  border: 1px solid #fff;
  font-size: 0.8rem;
  color: #555;
  background-color: #fff;
  table-layout: fixed;
}

.event-calendar td {
  border: 1px solid #dadada;
  border-collapse: collapse;
  margin:0;
  padding: 2px;
  width: 20%;
  vertical-align: middle;
}

.operatin-a {
  background-color: #ffcec6;
}

.operatin-b {
  background-color: #c6eaff;
}


/* テーブル（クルーズ列車）
-------------------------------------------------- */

.cruise {
  width: 100%;
  margin: 20px 0;
  padding:0;
  border: 3px solid #fff;
}

.cruise tr {
  border-bottom: 1px dashed #a45a4e;
}

.cruise td.operating {
  background:#fc9483;
  padding: 1.4rem 1rem;
  vertical-align: middle;
}

.cruise td.operating-b {
  background:#204f63;
  padding: 1.4rem 1rem;
  vertical-align: middle;
}

.cruise td.availability  {
  background: #ffefdd;
  text-align: right;
  vertical-align: middle;
}

p.cruisedate {
  font-size: 1.6rem;
  font-weight: 700;
  color: #fff;
  margin-bottom:0;
  line-height: 1.2;
  text-align: center;
}

P.cruiseava {
  font-size: 1.0rem;
  font-weight: 700;
  color: #666;
  margin-bottom:0;
  line-height: 1.2;
  text-align: center;
}

P.cruiseacc {
  font-size: 1.2rem;
  font-weight: 700;
  color: #666;
  margin-bottom:0;
  line-height: 1.8;
  text-align: center;
}

P.cruisefull {
  font-size: 1.2rem;
  font-weight: 700;
  color: red;
  margin-bottom:0;
  line-height: 1.2;
  text-align: center;
}

P.cruisenote {
  font-size: 1.0rem;
  font-weight: 500;
  color: #666;
  margin: 5px 0 0;
  line-height: 1.2;
  text-align: center;
}



/* ------------------------------------------------------------------ */
/* タイムライン
/* ------------------------------------------------------------------ */

.distance {
  width: 100%;
  background: #fffdf9;
  padding: 60px 20px 20px;
  position: relative;
  margin: 40px 0 30px;
  color: #666;
}
.distance:before {
  content: '';
  position: absolute;
  top: 0px;
  left: calc(30% + 15px);
  bottom: 0px;
  width: 4px;
  background: #ddd;
}
.distance:after {
  content: "";
  display: table;
  clear: both;
}

.timeside {
  clear: both;
  text-align: left;
  position: relative;
}
.timeside .timetitle {
  margin-bottom: .5rem;
  float: left;
  width: 30%;
  padding-right: 10px;
  text-align: right;
  position: relative;
}
.timeside .timetitle:before {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  border: 4px solid #f7726c;
  background-color: #fff;
  border-radius: 100%;
  top: 5%;
  right: -18px;
  z-index: 99;
}
.timeside .timetitle h3 {
  margin: 0 0 1.1rem 0;
  font-size: 1rem;
  line-height: 1.4;
  font-weight: 600;
}
.timeside .timetitle p {
  margin: 0 0 1rem 0;
  font-size: 1rem;
  line-height: 1.4;
}
.timeside .matterside {
  margin: 0 0 1.5rem;
  float: right;
  width: 70%;
  padding-left: 30px;
}
.timeside .matterside p {
  margin: 0 0 1.5rem 0;
  line-height: 1.6;
}
.timeside .body p:first-child {
  margin-top: 0;
  font-weight: 400;
}

.timeimg {
  width: 100%;
  margin: 0 0 1rem 0;
}


/* ******************** Media Queries による切り替え ******************** */

@media only screen and (min-width: 600px) {
  
  .distance {
    padding: 60px 50px 20px;
  }
  
  .timeside .timetitle {
    padding-right: 30px;
  }
  
  .timeside .timetitle:before {
    right: -6px;
  }
  
  .timeimg {
    float: right;
    width: 30%;
    margin: 0 0 1rem 1rem;
  }
}



/* ------------------------------------------------------------------ */
/* j. フッター設定
/* ------------------------------------------------------------------ */

/* Go To Top Button */

footer {
  padding-top: 48px;
  padding-bottom: 48px;
  color: #FFF;
  font-size: 0.8rem;
  text-align: center;
  position: relative;
  top: 100vh;
  background-color: #2c425a;
  }

footer a, footer a:visited { color: #525252; }
footer a:hover, footer a:focus { color: #fff; }

/* copyright */
footer .copyright {
    margin: 0;
    padding: 3rem 0 0 0;
	 }

footer .copyright li {
    display: inline-block;
    margin: 0;
    padding: 0;
    line-height: 24px;
	}

.ie footer .copyright li {
   display: inline;
	}

footer .copyright li:before {
    content: "\2022";
    padding-left: 10px;
    padding-right: 10px;
    color: #095153;
	}

footer .copyright  li:first-child:before {
    display: none;
	}

#go-top {
	position:absolute;
	top:-24px;
	left:50%;
	margin-left:-30px;
	}

#go-top a {
	text-decoration:none;
	border:0 none;
	display:block;
	width:50px;
	height:50px;
	background-color:#c2a75f;
	-webkit-transition:all .2s ease-in-out;
	-moz-transition:all .2s ease-in-out;
	-o-transition:all .2s ease-in-out;
	-ms-transition:all .2s ease-in-out;
	transition:all .2s ease-in-out;
	color:#fff;
	font-size:2rem;
	line-height:48px;
	border-radius:100%;
	}

#go-top a:hover {
	background-color:#f66e5e;
	}


/* a link setting */
a {
	color:#000;
	text-decoration:none;
	}

a:hover {
	color:#333;
	text-decoration:underline;
	}



/* ****************** Media Queries による切り替え ***************** */


/* PCレイアウト 961px
-------------------------------------------------- */
@media only screen and (min-width: 961px) {
	
    #go-top a {
        width: 70px;
        height: 70px;
        line-height:63px;
    }

}


/* ------------------------------------------------------------------ */
/* k. 中階層ページ 設定
/* ------------------------------------------------------------------ */

#contents-m {
	position: relative;
	top: 0;
	}
	
.midfooter {
   padding-top: 48px;
   padding-bottom: 48px;
   color: #FFF;
   font-size: 0.8rem;
   text-align: center;
   position: relative;
   top: 0;
   background-color: #2c425a;
	}
	
/* ニュース
-------------------------------------------------- */
	.newsimg {
	display: block;
	margin: 0 auto 3rem;
	}

	

/* ------------------------------------------------------------------ */
/* l. 沿線案内ページ
/* ------------------------------------------------------------------ */

.bgrail {
  width: 100%;
  overflow: hidden;
  background: url(../images/bg-rail.svg) repeat-y top center;
  margin: 0 auto 50px;
  padding: 0 0 40px 0;
  }
  	
.sta {
  color: #2c425a;
  font-size: 1.4rem;
  line-height: 1.3;
  font-weight: 600;
  margin: 40px 0 20px;
  padding: 7px 0;
  text-align: center;
  background-color: #ffefdd;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  }
	
div.fb-sta {
  margin: 10px 10px 20px 10px;
  }
	
@media only screen and (min-width: 961px) {

  div.inner-rail {
    overflow: hidden;
    max-width: 1000px;
    background-image: url(../images/bg-rail.svg);
  }

  div.bgrail {
    background: url(../images/bg-rail.svg) repeat-y top right;
  }

} /* /@media */



/* 沿線トピック2列
-------------------------------------------------- */

.sta-topic-wrap {
  margin: 0 0 30px 0;
  width: 100%;
}

.sta-topic {
  overflow: hidden; 
  margin: 0;
  }

.sta-topic li {
  width: 100%;
  background-color: #fff;
  list-style-type: none;
  margin: 10px 0 30px 0;
  padding: 10px;
  position: relative;
  }

.sta-topic li a {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  text-indent:-9999px;
}

.sta-topic li a:hover{
  background-color:#FFF;
  filter:alpha(opacity=20);
  -moz-opacity: 0.2;
  opacity: 0.2;
}

.sta-topic-right {
  float: right;
  width: 58%;
}

.ttl-sta-topic  {
  font-size: 1.2rem;
  line-height: 1.3;
  font-weight: 600; 
  margin-bottom: 10px;
  color: #2c425a;
  }

.txt-sta-topic  {
  margin: 10px 0 10px 0;
  font-size: 1.0rem;
  line-height: 1.6;
  letter-spacing: 0;
  color: #333;
  overflow: auto;
}
  
.sta-topic li img {
  float: left;
  margin-right: 1.5rem;
  margin-bottom: 2.2rem;
  width: 35% !important;
  height: auto;
  min-height: 0%; /*IE対策*/
}

.sta-topic-btn {
  margin: 0;
  font-size: 1.0rem;
  line-height: 1.4;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  display: inline-block;
  padding: 8px 10px;
  background-color: #32849d;
  -webkit-transition: all .2s ease-in-out;
  -moz-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  -ms-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
}

.dmy-btn-yet {
  margin: 0 0 10px;
  font-size: 1.0rem;
  line-height: 1.4;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  display: inline-block;
  padding: 8px 10px;
  background-color: #ccc;
  -webkit-transition: all .2s ease-in-out;
  -moz-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  -ms-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
}

.sta-topic a:hover {
  border-color: #fff;
  text-decoration: none;
  background-color: #fd897c;
}


/* ******************** Media Queries による切り替え ******************** */

@media only screen and (min-width: 450px) {
  .sta-topic li img {
    margin-bottom: .5rem;
  }
}

@media only screen and (min-width: 600px) {
  
  .sta-topic-wrap {
    margin: 0 auto 30px;
    width: 96%;
    text-align: center;
  }
  
  .sta-topic {
    width:100%;
    margin: 2rem 0 0;
    padding:0;
    display:-webkit-box;
    display:-moz-box;
    display:-ms-box;
    display:-webkit-flexbox;
    display:-moz-flexbox;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:-moz-flex;
    display:-ms-flex;
    display:flex;
     -webkit-flex-wrap:wrap;
    -moz-flex-wrap:wrap;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
    align-items: stretch;
  }
  .sta-topic li {
    width: 32%;
    list-style: none;
    margin: 0 2% 30px 0;
    text-align: center;
    background-color: #fff;
    padding-bottom: 0;
    border: none;
    display: flex;
    flex-direction: column;
  }
  .sta-topic li:nth-child(3n) {
    margin-right: 0;
  }
  .sta-topic li img {
    float: none;
    margin: 0 0 1rem 0;
    width: 100% !important;
    max-width: 100%;
    height: auto;
  }
  .sta-topic-right {
    float: none;
    width: 100%;
  }
  .ttl-sta-topic {
    font-size: 1.2rem;
    line-height: 1.4;
    margin: 0 1rem 1rem 1rem;
  }
  .txt-sta-topic {
    margin: 1rem;
    text-align: left;
  }
  .btn-wrap {
    margin-top: auto;
  } 
  .sta-topic-btn {
    padding: 1rem 1.5rem;
    margin: 1rem 0 2rem;
  }
  .dmy-btn-yet {
    padding: 1rem 1.5rem;
    margin: 1rem 0 2rem;
  }
}

@media only screen and (min-width: 800px) {
  .sta-topic li {
    background-color: #fff;
    }
}