@charset "UTF-8";
/* CSS Document */
/* ======================================

リセット・調整

====================================== */
html, body, div, p, span,
ul, ol, li, table, th, td,
h1, h2, h3, h4, h5, h6, a,
form, input, textarea, dl, dt, dd, iframe {
  margin: 0;
  padding: 0;
  box-sizing: border-box; }

* {
  -webkit-appearance: none; }

body {
  line-height: 1;
  -webkit-text-size-adjust: 100%; }

img {
  display: block;
  border: 0; }

ol, ul {
  list-style: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

/* ======================================

クリアフィックス

====================================== */
.cf {
  overflow: hidden; }

.cf:before,
.cf:after {
  content: "";
  display: table; }

.cf:after {
  clear: both; }

.cf {
  zoom: 1; }

/* ======================================

基本設定

====================================== */
body {
  font-family: Helvetica, Arial, Verdana, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
  line-height: 180%;
  font-size: 16px;
  color: #4B4B4B; }
  @media screen and (max-width: 768px) {
    body {
      line-height: 160%; } }

.inner {
  width: 1100px;
  margin: 0 auto; }
  @media screen and (max-width: 768px) {
    .inner {
      width: 100%;
      padding: 0 10px 0 10px; } }

/* ======================================

ヘッダー

====================================== */
#header {
  width: 100%;
  position: fixed;
  z-index: 10; }
  @media screen and (max-width: 768px) {
    #header {
      position: static; } }
  #header a {
    color: #FFFFFF; }
  #header #function {
    background: #044085;
    color: #FFFFFF; }
    #header #function #functionheadWrap {
		min-height: 138px;
      padding-top: 8px;
      height: auto; }
      @media screen and (max-width: 768px) {
        #header #function #functionheadWrap {
          height: auto; } }
      #header #function #functionheadWrap #inner-l {
        /*float: left;*/
		  display: flex;
		  gap:30px;
		  padding-top: 15px;
		  align-items: flex-start;
		  
}
        @media screen and (max-width: 768px) {
          #header #function #functionheadWrap #inner-l {
            float: none; } }
        #header #function #functionheadWrap #inner-l h1#logo {
          display: inline-block;
          vertical-align: bottom;
          width: 225px;
          height: auto; }
          @media screen and (max-width: 768px) {
            #header #function #functionheadWrap #inner-l h1#logo {
              width: 100%;
              text-align: center;
              margin: 15px 0 15px; } }
          #header #function #functionheadWrap #inner-l h1#logo img {
            display: inline;
            width: 225px; }
        #header #function #functionheadWrap #inner-l p#catch {
          display: inline-block;
          vertical-align: bottom;
          font-size: 12px;
          line-height: 180%; }
          @media screen and (max-width: 768px) {
            #header #function #functionheadWrap #inner-l p#catch {
              display: none; } }
      #header #function #functionheadWrap #inner-r {
        /*float: right;
        width: 460px;*/
		display: flex;
		  flex-direction: column;
}
        @media screen and (max-width: 768px) {
          #header #function #functionheadWrap #inner-r {
            float: none;
            width: 100%; } }
        #header #function #functionheadWrap #inner-r #official {
          font-size: 11px;
          text-align: center; }
          @media screen and (max-width: 768px) {
            #header #function #functionheadWrap #inner-r #official {
              display: none; } }
        #header #function #functionheadWrap #inner-r div#buttons {
          padding-bottom: 3px; }
          #header #function #functionheadWrap #inner-r div#buttons div#foreign {
            float: left; }
            @media screen and (max-width: 768px) {
              #header #function #functionheadWrap #inner-r div#buttons div#foreign {
                float: none;
                margin: 0 auto; } }
            @media screen and (max-width: 768px) {
              #header #function #functionheadWrap #inner-r div#buttons div#foreign ul {
                width: 208px;
                margin: 0 auto; } }
            @media screen and (max-width: 768px) {
              #header #function #functionheadWrap #inner-r div#buttons div#foreign ul li {
                float: left;
                width: 100px; } }
            #header #function #functionheadWrap #inner-r div#buttons div#foreign ul li:first-child {
              margin-bottom: 8px; }
              @media screen and (max-width: 768px) {
                #header #function #functionheadWrap #inner-r div#buttons div#foreign ul li:first-child {
                  margin-right: 8px; } }
            #header #function #functionheadWrap #inner-r div#buttons div#foreign ul li a {
              display: block;
              width: 100px;
              height: 30px;
              line-height: 30px;
              color: #FFFFFF;
              background: #D08617;
              box-shadow: 2px 2px 0px #744b0d;
              border-radius: 5px;
              text-align: center;
              text-decoration: none;
              -webkit-transition: 0.3s;
              -moz-transition: 0.3s;
              -o-transition: 0.3s;
              transition: 0.3s; }
              #header #function #functionheadWrap #inner-r div#buttons div#foreign ul li a:hover {
                position: relative;
                top: 1px;
                left: 1px; }
          #header #function #functionheadWrap #inner-r div#buttons div#reserve {
            float: right;
            margin-left: 8px;
            margin-right: 2px; }
            @media screen and (max-width: 768px) {
              #header #function #functionheadWrap #inner-r div#buttons div#reserve {
                float: none;
                margin: 0 auto; } }
            #header #function #functionheadWrap #inner-r div#buttons div#reserve a {
              display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
              width: 290px;
              height: 68px;
              color: #FFFFFF;
              background: #B20000;
              box-shadow: 2px 2px 0px #4c0000;
              border-radius: 5px;
              text-align: center;
              text-decoration: none;
              padding: 0 0 0 0;
              -webkit-transition: 0.3s;
              -moz-transition: 0.3s;
              -o-transition: 0.3s;
              transition: 0.3s; }
              #header #function #functionheadWrap #inner-r div#buttons div#reserve a:hover {
                position: relative;
                top: 1px;
                left: 1px; }
              @media screen and (max-width: 768px) {
                #header #function #functionheadWrap #inner-r div#buttons div#reserve a {
                  width: 100%;
                  height: auto;
                  margin: 0 0 8px 0;
                  line-height: 1.6em;
                  padding: 5px 0; } }
            #header #function #functionheadWrap #inner-r div#buttons div#reserve span {
              font-size: 24px; }
              @media screen and (max-width: 768px) {
                #header #function #functionheadWrap #inner-r div#buttons div#reserve span {
                  font-size: 16px; } }
    #header #function #telmailWrap {
      background-color: #021c3b; }
      #header #function #telmailWrap #telmailInner {
        padding-left: 75px; }
        @media screen and (max-width: 768px) {
          #header #function #telmailWrap #telmailInner {
            padding: 8px 0 !important; } }
        #header #function #telmailWrap #telmailInner a {
          color: #FFFFFF !important; }
        #header #function #telmailWrap #telmailInner ul#telmail {
          height: 45px;
          line-height: 45px;
          color: #FFFFFF;
          font-size: 14px;
          letter-spacing: 0.05em; }
          @media screen and (max-width: 768px) {
            #header #function #telmailWrap #telmailInner ul#telmail {
              height: auto;
              line-height: 1.6em;
              font-size: 12px; } }
          #header #function #telmailWrap #telmailInner ul#telmail li {
            display: inline-block; }
            @media screen and (max-width: 768px) {
              #header #function #telmailWrap #telmailInner ul#telmail li {
                display: block;
                text-align: center; } }
          #header #function #telmailWrap #telmailInner ul#telmail li#tel {
            margin-right: 50px; }
            #header #function #telmailWrap #telmailInner ul#telmail li#tel br {
              display: none; }
            @media screen and (max-width: 768px) {
              #header #function #telmailWrap #telmailInner ul#telmail li#tel {
                margin-right: 0px; }
                #header #function #telmailWrap #telmailInner ul#telmail li#tel br {
                  display: block; }
                #header #function #telmailWrap #telmailInner ul#telmail li#tel a {
                  color: #FFFFFF; }
                #header #function #telmailWrap #telmailInner ul#telmail li#tel span {
                  display: none; } }
          #header #function #telmailWrap #telmailInner ul#telmail li#mail {
            background: url(images/icon-mail.png) no-repeat left center;
            padding-left: 25px; }
            @media screen and (max-width: 768px) {
              #header #function #telmailWrap #telmailInner ul#telmail li#mail {
                background: none;
                padding-left: 0px; } }
            @media screen and (max-width: 768px) {
              #header #function #telmailWrap #telmailInner ul#telmail li#mail a {
                display: inline-block;
                background: url(images/icon-mail.png) no-repeat left center;
                padding-left: 25px; } }

#gNav {
  box-shadow: 0px 1px 4px #A4A4A4;
  background: #F0F0E1;
  padding-top: 184px; }
  @media screen and (max-width: 768px) {
    #gNav {
      padding-top: 0px; } }
  #gNav .inner ul li {
    display: inline-block; }
    @media screen and (max-width: 768px) {
      #gNav .inner ul li {
        display: block;
        border-bottom: 1px solid #e7e7d0; } }
    #gNav .inner ul li a {
      display: inline-block;
      height: 88px;
      line-height: 88px;
      padding: 0px 21px;
      text-align: center;
      font-size: 16px;
      text-decoration: none;
      color: #044085; }
      #gNav .inner ul li a:hover {
        text-decoration: underline; }
      @media screen and (max-width: 768px) {
        #gNav .inner ul li a {
          display: block;
          height: 44px;
          line-height: 44px; } }

/*----------------------------

軍艦島クルーズヘッダー専用 CSS

-----------------------------*/
/*軍艦島クルーズはヘッダーも含め固定している*/
@media screen and (max-height: 805px) {
  #gunakan .header-gunkan {
    position: static; } }
#gunakan .header-gunkan #gNav {
  padding-top: 0 !important;
  height: 90px; }
  @media screen and (max-width: 768px) {
    #gunakan .header-gunkan #gNav {
      height: auto; } }

/*----------------------------

観光丸LPヘッダー専用 CSS

-----------------------------*/
#kankomaru {
  /* #telmailInner{
       padding-left: 75px !important;
   }*/ }
  #kankomaru #function {
    background: #73C1CC;
    /* #inner-l {
         padding-top: 10px;
     }*/ }
    #kankomaru #function #telmailWrap {
      background-color: #41a4b2; }

/*----------------------------

三池島原LPヘッダー専用 CSS

-----------------------------*/
#ms {
  /* #telmailInner{
       padding-left: 75px !important;
   }*/ }
  #ms #function {
    background: #D95326; }
    #ms #function #telmailWrap {
      background-color: #983a1b; }
  #ms div#buttons {
    padding-bottom: 3px; }
    #ms div#buttons #reserve {
      line-height: 65px; }
  #ms #header_telmail {
    float: right;
    font-size: 14px;
    margin-top: 3px;
    background: url(images/icon-tel.png) no-repeat left center;
    padding-left: 25px; }
    @media screen and (max-width: 768px) {
      #ms #header_telmail {
        float: none;
        padding-left: 0px;
        background-image: none;
        text-align: center;
        margin: 0px auto 5px; }
        #ms #header_telmail a {
          color: #FFFFFF; } }
    @media screen and (max-width: 768px) {
      #ms #header_telmail li span {
        display: block; } }
  #ms #gNav {
    padding-top: 184px !important;
    /*公開したら165px*/ }
    @media screen and (max-width: 768px) {
      #ms #gNav {
        padding-top: 0px !important; } }
    #ms #gNav .inner ul li a {
      padding: 0px 50px; }

/* ======================================

メインイメージ

====================================== */
#main-image {
  background-color: #C9E5F8; }
  @media screen and (max-width: 768px) {
    #main-image {
      width: 100%;
      text-align: center; }
      #main-image img {
        width: 100%; } }
  #main-image #img-01 {
    margin: 0 auto; }

/* 三池島原ライン */
/* ======================================

 共通

====================================== */
a.shadow-button {
  display: inline-block;
  width: 530px;
  font-size: 24px;
  text-align: center;
  height: 70px;
  line-height: 70px;
  color: #FFFFFF;
  text-decoration: none;
  box-shadow: 3px 3px 0px #ab3f4a;
  border-radius: 10px;
  /* CSS3  */
  -webkit-border-radius: 10px;
  /* Safari,Google Chrome */
  -moz-border-radius: 10px;
  /* Firefox */
  background: #B20000;
  box-shadow: 2px 2px 0px #4c0000;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s; }
  a.shadow-button:hover {
    position: relative;
    top: 1px;
    left: 1px; }
  @media screen and (max-width: 768px) {
    a.shadow-button {
      width: 100%;
      font-size: 18px;
      padding: 10px 0;
      height: auto;
      line-height: 1.4em; } }

a.shadow-button + a.shadow-button {
  margin-left: 30px; }
  @media screen and (max-width: 768px) {
    a.shadow-button + a.shadow-button {
      margin: 10px 0 0 0; } }

a.shadow-button:not(:target) {
  filter: none\9; }

.normal-h2 {
  font-size: 36px;
  font-weight: 400;
  letter-spacing: 0.2em;
  line-height: 1.8em; }
  @media screen and (max-width: 768px) {
    .normal-h2 {
      font-size: 28px;
      line-height: 1.4em;
      letter-spacing: 0.01em; } }

.normal-h3 {
  padding: 60px 0 40px;
  font-size: 36px;
  font-weight: 400;
  letter-spacing: 0.2em;
  line-height: 1.8em; }
  @media screen and (max-width: 768px) {
    .normal-h3 {
      font-size: 28px;
      padding: 30px 0 20px;
      line-height: 1.4em;
      letter-spacing: 0.05em; } }

.h2-midashi {
  position: relative;
  width: 100%;
  font-size: 36px;
  height: 80px;
  line-height: 80px;
  text-align: center;
  font-weight: 400;
  letter-spacing: 0.2em;
  color: #FFFFFF; }
  @media screen and (max-width: 768px) {
    .h2-midashi {
      font-size: 28px;
      height: auto;
      line-height: 1.4em;
      letter-spacing: -0.01em;
      padding: 8px 0; } }
  .h2-midashi:after {
    content: ' ';
    height: 0;
    position: absolute;
    width: 0;
    border: 20px solid transparent;
    top: 100%;
    left: 50%;
    margin-left: -10px; }
    @media screen and (max-width: 768px) {
      .h2-midashi:after {
        border: 10px solid transparent; } }

.h2add {
  width: 100%;
  height: 450px;
  background-size: cover;
  background-position: center center; }
  .h2add .gradation {
    background: -moz-linear-gradient(top, rgba(30, 87, 153, 0) 50%, black 100%);
    background: -webkit-linear-gradient(top, rgba(30, 87, 153, 0) 50%, black 100%);
    background: linear-gradient(to bottom, rgba(30, 87, 153, 0) 50%, black 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#001e5799', endColorstr='#000000',GradientType=0 );
    /* IE9 */ }
    .h2add .gradation .inner {
      position: relative;
      height: 450px;
      margin: 0 auto; }
      .h2add .gradation .inner p {
        position: absolute;
        bottom: 0;
        padding-bottom: 50px;
        line-height: 1.8em;
        font-size: 20px;
        color: #FFFFFF;
        text-shadow: 1px 2px 2px #000; }
        @media screen and (max-width: 768px) {
          .h2add .gradation .inner p {
            font-size: 16px; }
            .h2add .gradation .inner p br {
              display: none; } }
        .h2add .gradation .inner p strong {
          display: block;
          color: #FFD24C; }
        .h2add .gradation .inner p span {
          font-size: 40px;
          display: block;
          margin-top: 10px; }
          @media screen and (max-width: 768px) {
            .h2add .gradation .inner p span {
              font-size: 24px; } }
  .h2add .gradation:not(:target) {
    filter: none\9; }

.data {
  margin: 40px 0 80px; }
  @media screen and (max-width: 768px) {
    .data {
      margin: 20px 0 40px; } }

.sp {
  display: none; }

h4 {
  font-size: 20px;
  font-weight: bold;
  padding: 0 0 0.5em; }
  @media screen and (max-width: 768px) {
    h4 {
      font-size: 18px; }
      h4:before {
        content: "●";
        font-size: 28px; } }

* + h4 {
  padding: 30px 0 0.5em; }

#movieWrapper {
  /*スライドショーの代わりに掲載しているムービー用CSS */
  width: 100%;
  padding: 255px 0 0;
  background: #000; }
  @media screen and (max-width: 768px) {
    #movieWrapper {
      padding: 0; } }
  @media screen and (max-height: 805px) {
    #movieWrapper {
      padding: 0; } }
  #movieWrapper #movie {
    display: block;
    margin: 0 auto;
    max-width: 980px;
    max-height: 550px;
    width: 100%;
    height: auto; }

/* ======================================

やまさ海運からのお知らせ

====================================== */
#gunakan #bx-wrapperBox {
  padding-top: 255px; }
  @media screen and (max-width: 768px) {
    #gunakan #bx-wrapperBox {
      padding-top: 0; } }

#schedule-news {
  padding: 20px 0 50px; }
  #schedule-news .social-area {
    margin-bottom: 30px; }
    @media screen and (max-width: 768px) {
      #schedule-news .social-area {
        display: none; } }
    #schedule-news .social-area .s-buttonsWrap {
      float: right; }
      #schedule-news .social-area .s-buttonsWrap .s-buttons {
        display: block;
        line-height: 1;
        margin-left: 10px;
        float: left; }
  #schedule-news a#go-yamasa {
    display: block;
    width: 530px;
    height: 100px;
    padding-top: 25px;
    text-align: center;
    margin: 10px auto 50px;
    box-shadow: 2px 2px 0px #011022;
    background-color: #18314E;
    background-image: url(images/icon-white-circle-arrow.png);
    background-repeat: no-repeat;
    background-position: 95% 50%;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
    border-radius: 5px;
    /* CSS3  */
    -webkit-border-radius: 5px;
    /* Safari,Google Chrome */
    -moz-border-radius: 5px;
    /* Firefox */ }
    #schedule-news a#go-yamasa:hover {
      position: relative;
      top: 1px;
      left: 1px; }
    @media screen and (max-width: 768px) {
      #schedule-news a#go-yamasa {
        width: 100%;
        padding: 15px 0px 15px 15px;
        color: #FFFFFF;
        text-decoration: none;
        height: auto;
        text-align: left; } }
    @media screen and (max-width: 768px) {
      #schedule-news a#go-yamasa:after {
        content: attr(data-label); } }
    #schedule-news a#go-yamasa img {
      display: inline; }
      @media screen and (max-width: 768px) {
        #schedule-news a#go-yamasa img {
          display: none; } }
#scheduleC {
    width:100%;
    max-width:1130px;
    box-sizing: border-box;
    margin: 0 auto;
    padding: 15px;
}
  #scheduleC .scs {
    float: left; }
    @media screen and (max-width: 768px) {
      #scheduleC .scs {
        float: none; } }
    #scheduleC .scs p.midashi {
      font-size: 24px;
      font-weight: bold;
      margin-bottom: 0.5em; }
      @media screen and (max-width: 768px) {
        #scheduleC .scs p.midashi {
          font-size: 20px; } }
    #scheduleC .scs p.weather {
      text-align: right;
      font-size: 83%;
      vertical-align: middle; }
      #scheduleC .scs p.weather span {
        display: inline-block;
        margin-bottom: -4px; }
  #scheduleC #sc01 {
    width: 240px;
    margin-right: 50px; }
    @media screen and (max-width: 768px) {
      #scheduleC #sc01 {
        width: 100%;
        margin-right: 0px; }
        #scheduleC #sc01 table {
          font-size: 16px; } }
  #scheduleC #sc02 {
    width: 240px;
    margin-right: 50px; }
    @media screen and (max-width: 768px) {
      #scheduleC #sc02 {
        width: 100%;
        margin-right: 0px;
        margin-top: 50px;
        margin-bottom: 30px;} }
    @media screen and (max-width: 768px) {
      #scheduleC #sc02 div#iframeWrap {
        width: 100%;
        height: 300px;
        overflow: auto;
        -webkit-overflow-scrolling: touch; } }
    #scheduleC #sc02 div#iframeWrap iframe {
      width: 425px;
      height: 335px;
      border: none; }
      @media screen and (max-width: 768px) {
        #scheduleC #sc02 div#iframeWrap iframe {
          width: 100%;
          margin-right: 0px;
          height: 100%;
          display: block; } }
      @media screen and (max-width: 768px) {
        #scheduleC #sc02 div#iframeWrap iframe * {
          width: 80% !important; } }
  #scheduleC #sc03 {
    width: 335px; }
    @media screen and (max-width: 768px) {
      #scheduleC #sc03 {
        /*display: none;*/ width:100%; padding-top: 30px; } }
  #schedule-news table.program {
    padding: 0;
    width: 100%;
    margin: 0;
    font-size: 12px;
    border-collapse: collapse;
    line-height: 1.8em; }
    #schedule-news table.program th.programTime,
    #schedule-news table.program th.programThings {
      border: #1A315E solid 1px;
      background-color: #1A315E;
      color: #fff; }
    #schedule-news table.program th.programTime {
      text-align: left; }
    #schedule-news table.program th.programThings {
      text-align: right; }
    #schedule-news table.program th.time {
      text-align: right; }
    #schedule-news table.program th.jyoriku {
      background-color: #EFD3D5; }
    #schedule-news table.program th.syuyu {
      background-color: #D9E5BF; }
    #schedule-news table.program th.kankoumaru {
      background-color: #BEE2E7; }
    #schedule-news table.program th,
    #schedule-news table.program td {
      border-bottom: #ccc solid 1px;
      padding: 2px;
      vertical-align: middle; }
    #schedule-news table.program th {
      font-weight: 400;
      text-align: left; }
    #schedule-news table.program td {
      text-align: right; }

/*障がい者割引*/
#shogai_waribiki {
  padding-top: 50px;
  clear: both; }
  #shogai_waribiki span {
    color: #cb3232; }
  #shogai_waribiki ul {
    margin-top: 20px;
    list-style: none;
    padding: 0;
    display: flex;
    display: -ms-flexbox;
    /* IE10 */
    display: -webkit-box;
    /* Android4.3以下、Safari3.1〜6.0 */
    display: -webkit-flex;
    /* Safari6.1以降 */
    justify-content: space-between;
    -ms-flex-pack: justify;
    /*IE10*/
    -webkit-box-pack: justify;
    /* Android4.3以下、Safari3.1〜6.0 */
    -webkit-justify-content: space-between;
    /* Safari6.1以降 */ }
    @media screen and (max-width: 768px) {
      #shogai_waribiki ul {
        display: block;
        margin-top: 10px; } }
    #shogai_waribiki ul li {
      text-indent: 0;
      background-color: #EBECED;
      padding: 25px 20px;
      width: 48%; }
      @media screen and (max-width: 768px) {
        #shogai_waribiki ul li {
          width: 100%;
          padding: 10px; } }
      #shogai_waribiki ul li p.shubetsu {
        font-size: 18px;
        font-weight: bold;
        margin-bottom: 10px;
        line-height: 1.4; }
        @media screen and (max-width: 768px) {
          #shogai_waribiki ul li p.shubetsu {
            font-size: 16px; } }
        #shogai_waribiki ul li p.shubetsu span {
          color: #cb3232 !important;
          font-size: 12px; }

#kankomaru #shogai_waribiki {
  padding-top: 30px; }
  #kankomaru #shogai_waribiki h4 {
    font-size: 18px; }

@media screen and (max-width: 768px) {
  #ms #shogai_waribiki ul li {
    margin: 10px 0px; } }

@media screen and (max-width: 768px) {
  #kankomaru .s-buttonsWrap {
    margin-top: 0px !important;
    margin-bottom: 0px !important; } }

/*---------------------------------------

三池島原 LP やまさ海運からのお知らせ

----------------------------------------*/
#ms #schedule-news {
  padding: 20px 0 40px; }
  @media screen and (max-width: 768px) {
    #ms #schedule-news {
      padding: 0px 0 40px; } }
  #ms #scheduleC {
    width: 1130px;
    margin: 0 auto; }
    @media screen and (max-width: 768px) {
      #ms #scheduleC {
        width: 100%; } }
    #ms #scheduleC #sc01 {
      width: 425px;
      margin-right: 50px;
      padding-bottom: 3px; }
      @media screen and (max-width: 768px) {
        #ms #scheduleC #sc01 {
          width: 100%; } }
      #ms #scheduleC #sc01 .nownews {
        color: #FF4000;
        font-size: 20px;
        font-weight: bold; }
      #ms #scheduleC #sc01 .kinen {
        margin-bottom: 40px; }
        #ms #scheduleC #sc01 .kinen span {
          color: #FF4000;
          font-weight: bold; }
      #ms #scheduleC #sc01 a,
      #ms #scheduleC #sc03 a.pdf {
        display: block;
        width: 100%;
        height: 55px;
        padding: 15px;
        color: #FFFFFF;
        text-decoration: none;
        font-size: 18px;
        background-image: url(images/icon-white-arrow.png);
        background-repeat: no-repeat;
        background-position: 95% 50%;
        -webkit-transition: 0.3s;
        -moz-transition: 0.3s;
        -o-transition: 0.3s;
        transition: 0.3s;
        border-radius: 5px;
        /* CSS3  */
        -webkit-border-radius: 5px;
        /* Safari,Google Chrome */
        -moz-border-radius: 5px;
        /* Firefox */ }
        #ms #scheduleC #sc01 a:hover,
        #ms #scheduleC #sc03 a.pdf:hover {
          position: relative;
          top: 1px;
          left: 1px; }
        @media screen and (max-width: 768px) {
          #ms #scheduleC #sc01 a,
          #ms #scheduleC #sc03 a.pdf {
            width: 99%;
            font-size: 16px;
            background-size: auto 10px; } }
      #ms #scheduleC #sc01 #knLink {
        box-shadow: 2px 2px 0px #002821;
        background-color: #008E76;
        margin: 10px 0 50px 0; }
        @media screen and (max-width: 768px) {
          #ms #scheduleC #sc01 #knLink span {
            display: none; } }
      #ms #scheduleC #sc01 #ntNet {
        box-shadow: 2px 2px 0px #196d93;
        background-color: #35A8DD;
        margin-top: 10px; }
        @media screen and (max-width: 768px) {
          #ms #scheduleC #sc01 #ntNet span {
            display: none; } }

      #ms #scheduleC #sc01 #rsvLink,
      #ms #scheduleC #sc03 #rsvLink {
        box-shadow: 2px 2px 0px #4c0000;
        background-color: #B20000;
        margin: 10px 0 50px 0; }
        @media screen and (max-width: 768px) {
          #ms #scheduleC #sc01 #rsvLink span,
          #ms #scheduleC #sc03 #rsvLink span {
            display: none; } }

/*==========================================

ご予約前に

==========================================*/
#before {
  padding: 40px 0 80px;
  background-color: #F0F0E1;
  /*table#go-graph {
      display: none;
      width: 800px;
      @media screen and (max-width: 768px) {
          display: table;
          width: 100%;
          text-align: center;
          p{ width: 100%;
              font-weight: bold;
              text-align: center;
          }
          span{ display: inline-block;
          padding-left: 1em;}
         
      }
  }*/ }
  @media screen and (max-width: 768px) {
    #before {
      padding: 40px 0 40px; } }
  #before h2 {
    width: 300px;
    float: left; }
    @media screen and (max-width: 768px) {
      #before h2 {
        width: 100%;
        float: none; } }
  #before div#beforeData {
    width: 725px;
    float: right;
    padding-right: 30px;
    margin-top: 15px; }
    @media screen and (max-width: 768px) {
      #before div#beforeData {
        width: 100%;
        padding-right: 0;
        padding-left: 1em;
        margin-top: 1em;
        float: none; } }
    #before div#beforeData ul.beforeDataUl li {
      padding-bottom: 0.5em;
      text-indent: -0.5em;
      font-size: 18px; }
      @media screen and (max-width: 768px) {
        #before div#beforeData ul.beforeDataUl li {
          font-size: 16px; } }
      #before div#beforeData ul.beforeDataUl li span {
        color: #044085;
        font-size: 20px;
        display: inline-block;
        padding-right: 0.3em; }
      #before div#beforeData ul.beforeDataUl li ul {
        list-style: disc;
        padding-left: 2em !important; }
        @media screen and (max-width: 768px) {
          #before div#beforeData ul.beforeDataUl li ul {
            padding-left: 1em !important; } }
        #before div#beforeData ul.beforeDataUl li ul li {
          text-indent: 0em;
          font-size: 16px; }
          #before div#beforeData ul.beforeDataUl li ul li ol {
            list-style: decimal;
            padding: 1em 0 1em 1em; }
            @media screen and (max-width: 768px) {
              #before div#beforeData ul.beforeDataUl li ul li ol {
                padding: 0.5em 0 0.5em 1em; } }
            #before div#beforeData ul.beforeDataUl li ul li ol li {
              padding-bottom: 0em; }
  #before p.shadow-buttonWrap {
    width: 533px;
    margin: 0 auto;
    padding-bottom: 5px;
    display: none; }
    @media screen and (max-width: 768px) {
      #before p.shadow-buttonWrap {
        display: block;
        width: 100%; } }
    #before p.shadow-buttonWrap a.shadow-button {
      background-image: url(images/icon-white-arrow.png);
      background-repeat: no-repeat;
      background-position: 95% center;
      padding: 10px 30px 10px 10px; }
      @media screen and (max-width: 768px) {
        #before p.shadow-buttonWrap a.shadow-button {
          width: 99%;
          background-size: auto 10px; } }
      #before p.shadow-buttonWrap a.shadow-button span {
        display: inline-block;
        line-height: 1.8em;
        padding-right: 45px; }

#graph {
  width: 1100px;
  height: 500px;
  margin: 30px auto;
  float: right;
  font-size: 13px;
  display: block; }
  @media screen and (max-width: 768px) {
    #graph {
      display: none; } }
  #graph .flotr-title {
    font-size: 24px !important; }

.flotr-grid-label-x {
  line-height: 1.4em; }

/*==========================================

観光丸 LP ご予約前に

==========================================*/
#kankomaru {
  /*スライドショー*/ }
  #kankomaru .bxslider li {
    width: 1100px;
    background-color: #C9E5F8; }
    #kankomaru .bxslider li img {
      margin: 0 auto; }
  #kankomaru .bxslider * {
    opacity: 0; }
  #kankomaru ul#telmail li#companyName {
    margin-right: 1em; }
    @media screen and (max-width: 768px) {
      #kankomaru ul#telmail li#companyName {
        margin-right: 0em; } }
  #kankomaru #before div#beforeData ul.beforeDataUl li span {
    color: #73C1CC; }

/* ======================================

軍艦島 LP 軍艦島上陸周遊クルーズ・軍艦島周遊クルーズ 共通

====================================== */
.data-table {
  border-top: #A4A4A4 1px solid;
  width: 1100px; }
  @media screen and (max-width: 768px) {
    .data-table {
      width: 100%; } }
  .data-table .midashi {
    font-size: 18px;
    font-weight: bold; }
  .data-table th {
    width: 200px;
    padding: 20px 10px;
    vertical-align: top;
    text-align: center;
    border-bottom: #A4A4A4 1px solid; }
    @media screen and (max-width: 768px) {
      .data-table th {
        width: 100%;
        padding: 10px 5px;
        vertical-align: middle;
        display: block;
        background-color: #044085;
        color: #FFFFFF !important; } }
  .data-table td {
    padding: 20px 10px;
    border-bottom: #A4A4A4 1px solid; }
    @media screen and (max-width: 768px) {
      .data-table td {
        width: 100%;
        padding: 10px 5px;
        display: block; }
        .data-table td img {
          width: 100%; } }
    .data-table td ul {
      padding-left: 1em; }
      .data-table td ul li {
        margin-bottom: 0.3em;
        text-indent: -0.5em; }
        .data-table td ul li span {
          display: inline-block;
          padding-right: 0.3em;
          font-size: 20px; }
    .data-table td div.box {
      width: 415px; }
      @media screen and (max-width: 768px) {
        .data-table td div.box {
          width: 100%; } }
      .data-table td div.box table {
        width: 415px; }
        @media screen and (max-width: 768px) {
          .data-table td div.box table {
            width: 100%; } }
    .data-table td div.box-l {
      float: left; }
      @media screen and (max-width: 768px) {
        .data-table td div.box-l {
          float: none; } }
    .data-table td div.box-r {
      float: right; }
      @media screen and (max-width: 768px) {
        .data-table td div.box-r {
          float: none; } }
    .data-table td p.add {
      clear: both; }
    .data-table td table {
      margin-top: 0.5em; }
      @media screen and (max-width: 768px) {
        .data-table td table .tableMidashi {
          display: none; }
        .data-table td table .sp {
          font-size: 14px; }
        .data-table td table .siyoryo {
          display: block; }
        .data-table td table .binsu {
          display: inline-block; }
        .data-table td table .plus {
          display: inline-block;
          font-size: 18px; } }
      .data-table td table th {
        border-bottom: none;
        padding: 5px 10px;
        text-align: left;
        /*font-weight: 400;*/
        color: #4B4B4B !important;
        white-space: nowrap;
        width: auto; }
        @media screen and (max-width: 768px) {
          .data-table td table th {
            display: block;
            text-align: center;
            border-bottom: #A4A4A4 1px solid; } }
      .data-table td table td {
        border-bottom: none;
        padding: 5px 10px;
        white-space: nowrap;
        text-align: center; }
        @media screen and (max-width: 768px) {
          .data-table td table td {
            display: block; } }

.tablebc {
  width: 100%;
  margin-bottom: 1em;
  border-bottom: 1px solid #EBECED; }
  @media screen and (max-width: 768px) {
    .tablebc th, .tablebc td {
      background-color: #FFFFFF; } }
  .tablebc tr:nth-child(odd) {
    background-color: #EBECED; }
    @media screen and (max-width: 768px) {
      .tablebc tr:nth-child(odd) th, .tablebc tr:nth-child(odd) td {
        background-color: #EBECED; } }

.attention {
  color: #FF3333; }

/*----------------------------

軍艦島上陸周遊クルーズ（軍艦島）

-----------------------------*/
#appeal .data {
  margin: 40px 0 30px !important; }
  @media screen and (max-width: 768px) {
    #appeal .data {
      margin: 40px 0 10px !important; } }
  #appeal .data h3 {
    color: #BF525E;
    font-size: 28px;
    line-height: 1.5em;
    margin-bottom: 15px; }
    @media screen and (max-width: 768px) {
      #appeal .data h3 {
        font-size: 18px;
        margin-bottom: 10px; } }
  #appeal .data h4 {
    color: #D2868D;
    font-size: 28px;
    line-height: 1.5em;
    padding-top: 0px !important; }
    @media screen and (max-width: 768px) {
      #appeal .data h4 {
        font-size: 16px; } }
  #appeal .data h5 {
    color: #000000;
    font-size: 20px;
    line-height: 1.4em;
    margin-bottom: 10px; }
    @media screen and (max-width: 768px) {
      #appeal .data h5 {
        font-size: 16px; }
        #appeal .data h5 br {
          display: none; } }
  @media screen and (max-width: 768px) {
    #appeal .data p.text br {
      display: none; } }
  @media screen and (max-width: 768px) {
    #appeal .data .main_appeal {
      margin-bottom: 30px; } }
  #appeal .data .y-line {
    background: linear-gradient(transparent 60%, #ffff66 60%); }
  #appeal .data #img-24 {
    margin: 50px auto; }
    @media screen and (max-width: 768px) {
      #appeal .data #img-24 {
        display: none; } }
  #appeal .data .box2-column {
    margin-bottom: 60px; }
    @media screen and (max-width: 768px) {
      #appeal .data .box2-column {
        margin-bottom: 30px; } }
    #appeal .data .box2-column div.box {
      width: 525px;
      float: left;
      padding: 20px;
      background-color: #ECECFB; }
      @media screen and (max-width: 768px) {
        #appeal .data .box2-column div.box {
          width: 100%;
          float: none;
          padding: 10px; } }
      #appeal .data .box2-column div.box span {
        display: block;
        font-size: 14px; }
        @media screen and (max-width: 768px) {
          #appeal .data .box2-column div.box span {
            font-size: 12px; } }
  #appeal .data .box2-column div.box + div.box {
    margin-left: 50px; }
    @media screen and (max-width: 768px) {
      #appeal .data .box2-column div.box + div.box {
        margin-left: 0px;
        margin-top: 15px; } }
  #appeal .data #topSales {
    background-image: url(https://www.miike-shimabara-line.net/lp/wp-content/themes/lp-miike/images/img-25.png);
    background-position: top left;
    height: 195px;
    padding-left: 220px;
    background-repeat: no-repeat; }
    @media screen and (max-width: 768px) {
      #appeal .data #topSales {
        height: auto;
        background: none;
        padding-left: 0; } }

#joriku .joriku-h2 {
  background-color: #DEA5AB; }
#joriku .joriku-h2:after {
  border-top-color: #DEA5AB; }
#joriku .h2add {
  background-image: url(https://www.miike-shimabara-line.net/lp/wp-content/themes/lp-miike/images/img-02.jpg); }
#joriku #photos {
  width: 1100px;
  padding-bottom: 50px; }
  #joriku #photos li {
    float: left;
    width: 333px; }
  #joriku #photos li + li {
    margin-left: 50px; }
#joriku .data-table th {
  color: #DEA5AB; }
#joriku .data-table ul li span {
  color: #DEA5AB; }
#joriku .shadow-buttonWrap {
  margin-top: 40px; }
  @media screen and (max-width: 768px) {
    #joriku .shadow-buttonWrap {
      margin-top: 20px; } }

/*----------------------------

クルーズ概要（観光丸）専用CSS

-----------------------------*/
#kankomaru #joriku .joriku-h2 {
  background-color: #73C1CC; }
#kankomaru #joriku .joriku-h2:after {
  border-top-color: #73C1CC; }
#kankomaru #joriku .h2add {
  background-image: url(https://www.miike-shimabara-line.net/lp/wp-content/themes/lp-miike/images/kankomaru/img-15.jpg); }
  @media screen and (max-width: 768px) {
    #kankomaru #joriku .h2add {
      height: 225px; } }
#kankomaru #joriku .data-table th {
  color: #73C1CC; }
#kankomaru #joriku .data-table td p.add {
  clear: both; }
#kankomaru #joriku .data-table ul li span {
  color: #73C1CC; }
#kankomaru #joriku p.text {
  text-align: center;
  margin-top: 25px; }
  @media screen and (max-width: 768px) {
    #kankomaru #joriku p.text {
      text-align: left; } }
#kankomaru #joriku img#yuranMap {
  width: 100%; }
#kankomaru #joriku .shadow-buttonWrap {
  margin-top: 40px;
  text-align: center; }
  @media screen and (max-width: 768px) {
    #kankomaru #joriku .shadow-buttonWrap {
      margin-top: 20px; } }

/*----------------------------

三池島原LP 料金について 専用CSS

-----------------------------*/
#ms div#ryokin {
  padding-bottom: 50px; }
  @media screen and (max-width: 768px) {
    #ms div#ryokin {
      padding-bottom: 30px; } }
  #ms div#ryokin ul#kingaku {
    width: 100%;
    display: flex;
    display: -ms-flexbox;
    /* IE10 */
    display: -webkit-box;
    /* Android4.3以下、Safari3.1〜6.0 */
    display: -webkit-flex;
    /* Safari6.1以降 */
    justify-content: space-between;
    -ms-flex-pack: justify;
    /*IE10*/
    -webkit-box-pack: justify;
    /* Android4.3以下、Safari3.1〜6.0 */
    -webkit-justify-content: space-between;
    /* Safari6.1以降 */
    border: 3px solid #D95326;
    margin-top: 10px; }
    @media screen and (max-width: 768px) {
      #ms div#ryokin ul#kingaku {
        display: block; } }
    #ms div#ryokin ul#kingaku li {
      width: 50%;
      border: 3px solid #D95326; }
      @media screen and (max-width: 768px) {
        #ms div#ryokin ul#kingaku li {
          width: 100%; } }
      #ms div#ryokin ul#kingaku li p.midashi {
        background-color: #D95326;
        font-size: 26px;
        color: #FFFFFF;
        text-align: center;
        padding: 10px 0; }
        @media screen and (max-width: 768px) {
          #ms div#ryokin ul#kingaku li p.midashi {
            font-size: 16px; } }
      #ms div#ryokin ul#kingaku li p.course {
        font-size: 26px;
        text-align: center;
        line-height: 1.6;
        padding: 10px 0; }
        @media screen and (max-width: 768px) {
          #ms div#ryokin ul#kingaku li p.course {
            font-size: 16px; } }

/*----------------------------

三池島原LP 三池島原ラインについて 専用CSS

-----------------------------*/
#ms #unzen-banner {
  display: block;
  margin-top: 25px;
  width: 335px; }
#ms #joriku .joriku-h2 {
  background-color: #D95326; }
#ms #joriku .joriku-h2:after {
  border-top-color: #D95326; }
#ms #joriku .h2add {
  background-image: url(images/ms/img-02.jpg); }
#ms #joriku #img-19 {
  width: 520px;
  margin-right: 50px;
  display: inline-block;
  vertical-align: top; }
  @media screen and (max-width: 768px) {
    #ms #joriku #img-19 {
      display: block;
      width: 100%;
      margin-right: 0px;
      margin-bottom: 15px; } }
#ms #joriku div.text {
  display: inline-block;
  width: 520px; }
  @media screen and (max-width: 768px) {
    #ms #joriku div.text {
      display: block;
      width: 100%; } }
  #ms #joriku div.text p + p {
    margin-top: 1em; }
#ms #joriku div.text span {
  color: #999999; }
@media screen and (max-width: 768px) {
  #ms #joriku h3.normal-h3 {
    font-size: 20px; } }
#ms #joriku .schedule .go-flow {
  margin-bottom: 15px; }
  #ms #joriku .schedule .go-flow img {
    border: 1px solid #999999; }
  #ms #joriku .schedule .go-flow .box-l {
    width: 525px;
    float: left; }
  #ms #joriku .schedule .go-flow .box-r {
    width: 525px;
    float: right; }
  #ms #joriku .schedule .go-flow .box-full {
    width: 1100px;
    border: #999999 1px solid;
    padding: 8px; }
    #ms #joriku .schedule .go-flow .box-full .box-l {
      width: 510px; }
    #ms #joriku .schedule .go-flow .box-full .box-r {
      width: 560px; }
    #ms #joriku .schedule .go-flow .box-full .flowbox {
      border: none;
      padding: 0; }
    #ms #joriku .schedule .go-flow .box-full ul.photos li {
      width: 274px;
      font-size: 12px;
      float: left; }
    #ms #joriku .schedule .go-flow .box-full ul.photos li + li {
      margin-left: 10px; }
    #ms #joriku .schedule .go-flow .box-full p.text {
      font-size: 18px;
      margin-top: 1em; }
  #ms #joriku .schedule .go-flow .box-one {
    width: 525px;
    margin: 0 auto; }
  #ms #joriku .schedule .go-flow .orangespot {
    border: 2px solid #D95326;
    padding: 8px; }
    #ms #joriku .schedule .go-flow .orangespot .spotname {
      color: #D95326; }
    #ms #joriku .schedule .go-flow .orangespot .line {
      background-color: #D95326 !important; }
  #ms #joriku .schedule .go-flow p.kaisatsu {
    margin-bottom: 8px;
    font-size: 12px; }
  #ms #joriku .schedule .go-flow #img-15 {
    width: 100%; }
  #ms #joriku .schedule .go-flow #img-16 {
    width: 100%; }
  #ms #joriku .schedule .go-flow .goalspot .guidebox {
    width: 210px; }
  #ms #joriku .schedule .go-flow .goalspot .goledata {
    width: 280px;
    float: right; }
    #ms #joriku .schedule .go-flow .goalspot .goledata p.golemidashi {
      background-color: #B20000;
      color: #FFFFFF;
      font-size: 16px;
      line-height: 1.4em;
      padding: 10px 10px 10px 0; }
      #ms #joriku .schedule .go-flow .goalspot .goledata p.golemidashi span {
        display: block;
        padding: 10px 15px 10px 15px;
        font-size: 22px;
        float: left;
        height: 50px; }
    #ms #joriku .schedule .go-flow .goalspot .goledata table {
      font-weight: bold;
      font-size: 22px;
      width: 100%; }
      #ms #joriku .schedule .go-flow .goalspot .goledata table th,
      #ms #joriku .schedule .go-flow .goalspot .goledata table td {
        padding: 10px 0; }
      #ms #joriku .schedule .go-flow .goalspot .goledata table th {
        text-align: left; }
      #ms #joriku .schedule .go-flow .goalspot .goledata table td {
        color: #B20000;
        text-align: right; }
  #ms #joriku .schedule .go-flow .sankakuWrap {
    padding-bottom: 30px;
    background-image: url(images/ms/icon-orange-sankaku.png);
    background-position: center bottom;
    background-repeat: no-repeat; }
  #ms #joriku .schedule .go-flow .upsankaku {
    padding-top: 30px;
    background-image: url(images/ms/icon-orange-sankaku.png);
    background-position: center top;
    background-repeat: no-repeat; }
  #ms #joriku .schedule .go-flow p.start {
    border-top: #999999 1px solid;
    border-left: #999999 1px solid;
    border-right: #999999 1px solid;
    background-color: #D95326;
    font-size: 20px;
    color: #FFFFFF;
    padding: 15px 15px 15px 20px; }
    #ms #joriku .schedule .go-flow p.start span {
      display: inline-block;
      margin-right: 20px;
      font-weight: bold; }
  #ms #joriku .schedule .go-flow .flowbox {
    border: #999999 1px solid;
    padding: 8px; }
  #ms #joriku .schedule .go-flow div.guidebox {
    width: 150px;
    float: left; }
    #ms #joriku .schedule .go-flow div.guidebox p.spotname {
      font-size: 20px;
      margin: 15px 0;
      line-height: 1.6em; }
      #ms #joriku .schedule .go-flow div.guidebox p.spotname span {
        display: block;
        font-size: 30px;
        font-weight: bold; }
    #ms #joriku .schedule .go-flow div.guidebox p.line {
      background-color: #333333;
      color: #FFFFFF;
      text-align: center;
      font-size: 16px;
      padding: 5px 0; }
    #ms #joriku .schedule .go-flow div.guidebox table {
      width: 100%; }
      #ms #joriku .schedule .go-flow div.guidebox table th,
      #ms #joriku .schedule .go-flow div.guidebox table td {
        padding: 5px 0;
        font-size: 18px; }
      #ms #joriku .schedule .go-flow div.guidebox table th {
        text-align: left; }
      #ms #joriku .schedule .go-flow div.guidebox table td {
        text-align: right; }
  #ms #joriku .schedule .go-flow .spotdata table {
    float: right;
    width: 345px;
    font-size: 18px; }
    #ms #joriku .schedule .go-flow .spotdata table tr:first-child {
      background-color: #BBBBBB; }
      #ms #joriku .schedule .go-flow .spotdata table tr:first-child th {
        padding-top: 10px;
        padding-bottom: 10px; }
    #ms #joriku .schedule .go-flow .spotdata table tr:nth-child(even) {
      background-color: #EBECED; }
    #ms #joriku .schedule .go-flow .spotdata table th {
      font-weight: bold; }
    #ms #joriku .schedule .go-flow .spotdata table td {
      height: 80px; }
    #ms #joriku .schedule .go-flow .spotdata table .bin {
      width: 4em; }
    #ms #joriku .schedule .go-flow .spotdata table .starttime {
      text-align: center; }
    #ms #joriku .schedule .go-flow .spotdata table .endtime {
      text-align: right;
      padding-right: 1em; }
    #ms #joriku .schedule .go-flow .spotdata table span {
      color: #D95326; }
@media screen and (max-width: 768px) {
  #ms #joriku .schedule img {
    width: 100%; } }
#ms #joriku #rootguide {
  clear: both; }
  #ms #joriku #rootguide iframe {
    width: 1100px;
    height: 500px;
    border: none;
    margin: 0 auto 30px; }
    @media screen and (max-width: 768px) {
      #ms #joriku #rootguide iframe {
        width: 100%;
        height: 250px; } }
  #ms #joriku #rootguide div.text {
    text-align: center;
    width: 1100px !important;
    display: block !important; }
    @media screen and (max-width: 768px) {
      #ms #joriku #rootguide div.text {
        text-align: left; } }
#ms #joriku .shadow-buttonWrap {
  margin-top: 40px;
  text-align: center; }

/*=======================================

軍艦島周遊クルーズ（軍艦島LP）

=======================================*/
#shuyu .shuyu-h2 {
  background-color: #B9CE8B; }
#shuyu .shuyu-h2:after {
  border-top-color: #B9CE8B; }
#shuyu .h2add {
  background-image: url(https://www.miike-shimabara-line.net/lp/wp-content/themes/lp-miike/images/img-03.jpg); }
#shuyu .data-table th {
  color: #B9CE8B; }
#shuyu .data-table ul li span {
  color: #B9CE8B; }
#shuyu p.shadow-buttonWrap {
  margin-top: 40px;
  text-align: center; }
@media screen and (max-width: 768px) {
  #shuyu #img-13 {
    width: 100%; } }

/*=======================================

軍艦島 クルーズ船のご紹介

=======================================*/
@media screen and (max-width: 768px) {
  #cruise img {
    width: 100%; }
  #cruise .data {
    margin-top: 0px; } }
#cruise .cruise-h2 {
  background-color: #EC996C; }
#cruise .cruise-h2:after {
  border-top-color: #EC996C; }
#cruise .normal-h2 {
  margin: 60px 0 40px; }
#cruise .box2-column div.box {
  width: 525px;
  float: left; }
  @media screen and (max-width: 768px) {
    #cruise .box2-column div.box {
      float: none;
      width: 100%; } }
  #cruise .box2-column div.box p.name {
    font-size: 24px;
    font-weight: bold;
    margin: 15px 0; }
    @media screen and (max-width: 768px) {
      #cruise .box2-column div.box p.name {
        font-size: 18px; } }
  #cruise .box2-column div.box table.tablebc th {
    width: 130px;
    padding: 5px 10px 5px 20px;
    text-align: left; }
    @media screen and (max-width: 768px) {
      #cruise .box2-column div.box table.tablebc th {
        display: block;
        width: 100%;
        text-align: center;
        border-bottom: #A4A4A4 1px solid;
        padding: 5px 0px; } }
  #cruise .box2-column div.box table.tablebc td {
    padding: 5px 10px;
    text-align: center; }
    @media screen and (max-width: 768px) {
      #cruise .box2-column div.box table.tablebc td {
        display: block;
        width: 100%;
        text-align: center;
        padding: 5px 0px; } }
#cruise .box2-column div.box + div.box {
  margin-left: 50px; }
  @media screen and (max-width: 768px) {
    #cruise .box2-column div.box + div.box {
      margin-left: 0px; } }

/*=======================================

観光丸 LP クルーズ船のご紹介

=======================================*/
#kankomaru #cruise .cruise-h2:after {
  border-top-color: #EC996C; }
#kankomaru #cruise .h2add {
  background-image: url(https://www.miike-shimabara-line.net/lp/wp-content/themes/lp-miike/images/kankomaru/img-17.jpg); }
  @media screen and (max-width: 768px) {
    #kankomaru #cruise .h2add {
      height: 225px !important;
      margin-bottom: 20px; } }
#kankomaru #cruise dl {
  width: 650px;
  float: left; }
  @media screen and (max-width: 768px) {
    #kankomaru #cruise dl {
      float: none;
      width: 100%; } }
  #kankomaru #cruise dl dt {
    font-size: 24px;
    color: #EC996C;
    margin-bottom: 1em; }
  #kankomaru #cruise dl dd {
    margin-bottom: 2em; }
    #kankomaru #cruise dl dd p + p {
      margin-top: 1em; }
    #kankomaru #cruise dl dd span {
      color: #999999; }
#kankomaru #cruise div.cruisedataWrap {
  float: right; }
  @media screen and (max-width: 768px) {
    #kankomaru #cruise div.cruisedataWrap {
      float: none;
      width: 100%; } }
  #kankomaru #cruise div.cruisedataWrap p.midashi {
    font-size: 24px;
    color: #EC996C;
    margin-bottom: 1em; }
  #kankomaru #cruise div.cruisedataWrap table.tablebc {
    width: 400px; }
    @media screen and (max-width: 768px) {
      #kankomaru #cruise div.cruisedataWrap table.tablebc {
        width: 100%; } }
    #kankomaru #cruise div.cruisedataWrap table.tablebc th,
    #kankomaru #cruise div.cruisedataWrap table.tablebc td {
      padding: 5px 10px; }
      @media screen and (max-width: 768px) {
        #kankomaru #cruise div.cruisedataWrap table.tablebc th,
        #kankomaru #cruise div.cruisedataWrap table.tablebc td {
          width: 100%;
          display: block;
          text-align: center; } }
    #kankomaru #cruise div.cruisedataWrap table.tablebc th {
      width: 150px;
      text-align: left; }
      @media screen and (max-width: 768px) {
        #kankomaru #cruise div.cruisedataWrap table.tablebc th {
          width: 100%;
          text-align: center;
          border-bottom: #A4A4A4 1px solid; } }
#kankomaru #cruise .hyosho {
  margin-top: 40px;
  clear: both;
  border: 1px #EC996C solid;
  padding: 60px 0 60px 180px;
  background-image: url(https://www.miike-shimabara-line.net/lp/wp-content/themes/lp-miike/images/kankomaru/img-16.png);
  background-repeat: no-repeat;
  background-position: 30px center; }
  @media screen and (max-width: 768px) {
    #kankomaru #cruise .hyosho {
      margin-top: 20px;
      padding: 1em 1em 1em 1em;
      background-image: none; } }
  #kankomaru #cruise .hyosho p {
    display: inline;
    font-size: 14px; }

/*=====================================

軍艦島・観光丸LP共通 教育旅行 

=====================================*/
#education .education-h2 {
  background-color: #542D26; }
#education .education-h2:after {
  border-top-color: #542D26; }
#education .h2add {
  background-image: url(https://www.miike-shimabara-line.net/lp/wp-content/themes/lp-miike/images/img-05.jpg); }
#education p.shadow-buttonWrap {
  text-align: center; }
  #education p.shadow-buttonWrap a.shadow-button {
    background: #562e27;
    background: -moz-linear-gradient(top, #562e27 0%, #381d18 100%);
    background: -webkit-linear-gradient(top, #562e27 0%, #381d18 100%);
    background: linear-gradient(to bottom, #562e27 0%, #381d18 100%);
    box-shadow: 3px 3px 0px black;
    margin: 20px 0 50px; }
#education .data div.text p + p {
  margin-top: 1em; }
#education .data .normal-h2 {
  margin: 60px 0 40px; }
#education .data .data-table th {
  color: #542D26; }
#education .data .data-table td p + p {
  margin-top: 1em; }
#education .data .data-table ol {
  list-style: decimal;
  padding-left: 1em; }
  @media screen and (max-width: 768px) {
    #education .data .data-table ol {
      padding-left: 1.5em; } }
  #education .data .data-table ol li {
    margin-bottom: 0.5em; }
#education .data .shadow-buttonWrap a.shadow-button {
  margin: 20px 0 0; }

#kankomaru #education .data {
  margin: 0px 0 40px; }

/*=====================================

軍艦島 LP お客様の声

=======================================*/
#gunakan #voice {
  background-color: #F0F0E1;
  padding-top: 30px;
  /*  p.shadow-buttonWrap {
      width: 533px;
      float: right;
      a.shadow-button {
          span {
              background: url(images/icon-pdf.png) no-repeat right center;
              display: inline-block;
              line-height: 1.8em;
              padding-right: 45px;
          }
      }
  }*/ }
  #gunakan #voice .normal-h2 {
    margin-bottom: 40px; }
    @media screen and (max-width: 768px) {
      #gunakan #voice .normal-h2 {
        width: 100%;
        float: none;
        margin-bottom: 20px; } }
  #gunakan #voice #img-16 {
    clear: both;
    margin: 0 auto; }
    @media screen and (max-width: 768px) {
      #gunakan #voice #img-16 {
        display: none; } }
  #gunakan #voice h3 {
    font-size: 24px; }
    @media screen and (max-width: 768px) {
      #gunakan #voice h3 {
        font-size: 18px;
        margin-bottom: 1em; } }
  #gunakan #voice div.box {
    margin-top: 20px; }
    @media screen and (max-width: 768px) {
      #gunakan #voice div.box {
        margin-bottom: 20px; } }
    #gunakan #voice div.box ul li {
      text-indent: -0.5em;
      padding-left: 0.5em;
      margin-bottom: 0.5em; }
      @media screen and (max-width: 768px) {
        #gunakan #voice div.box ul li {
          margin-bottom: 0.3em; } }
  #gunakan #voice #wg {
    width: 910px;
    margin: 40px auto 0; }
    @media screen and (max-width: 768px) {
      #gunakan #voice #wg {
        width: 100%;
        margin: 0; } }
    #gunakan #voice #wg #wg-l {
      width: 240px;
      float: left;
      margin-right: 20px; }
      @media screen and (max-width: 768px) {
        #gunakan #voice #wg #wg-l {
          width: 100%;
          float: none;
          margin-right: 0px; } }
      #gunakan #voice #wg #wg-l #wg01 {
        margin-bottom: 20px; }
        #gunakan #voice #wg #wg-l #wg01 #CDSWIDEXC {
          margin: 0 !important;
          width: 240px !important; }
          @media screen and (max-width: 768px) {
            #gunakan #voice #wg #wg-l #wg01 #CDSWIDEXC {
              width: 100% !important; } }
      @media screen and (max-width: 768px) {
        #gunakan #voice #wg #wg-l #wg02 {
          display: none; } }
    #gunakan #voice #wg #wg-r {
      float: right; }
      @media screen and (max-width: 768px) {
        #gunakan #voice #wg #wg-r {
          display: none; } }
      @media screen and (max-width: 768px) {
        #gunakan #voice #wg #wg-r #wg03 {
          display: none; } }
      #gunakan #voice #wg #wg-r #wg03 #CDSWIDSSP {
        width: 650px !important; }

/*=====================================

観光丸 LP お客様の声 

=======================================*/
#voices {
  background-color: #F0F0E1;
  padding: 40px 0 40px; }
  #voices .normal-h2 {
    width: 500px;
    float: left;
    margin-bottom: 40px; }
    @media screen and (max-width: 768px) {
      #voices .normal-h2 {
        width: 100%;
        float: none; } }
  #voices p.shadow-buttonWrap {
    width: 533px;
    float: right; }
    #voices p.shadow-buttonWrap a.shadow-button span {
      background: url(images/icon-pdf.png) no-repeat right center;
      display: inline-block;
      line-height: 1.8em;
      padding-right: 45px; }
  #voices ul {
    clear: both;
    padding-bottom: 4px; }
    #voices ul li {
      float: left;
      width: 348px;
      margin: 0 4px; }
      @media screen and (max-width: 768px) {
        #voices ul li {
          width: 100%;
          float: none;
          margin: 0; } }
      #voices ul li p.titleWrap {
        vertical-align: middle;
        padding: 0 0 0 15px;
        height: 106px;
        line-height: 106px;
        padding-left: 130px;
        margin-bottom: 25px;
        font-size: 18px;
        background-repeat: no-repeat; }
        @media screen and (max-width: 768px) {
          #voices ul li p.titleWrap {
            background-image: none !important;
            height: auto;
            line-height: 1.6em;
            margin: 2em 0 1em 0;
            padding: 0 0 0 0.5em; } }
        #voices ul li p.titleWrap#voice01 {
          background: url(https://www.miike-shimabara-line.net/lp/wp-content/themes/lp-miike/images/img-09.png) 8px 0 no-repeat; }
        #voices ul li p.titleWrap#voice02 {
          background: url(https://www.miike-shimabara-line.net/lp/wp-content/themes/lp-miike/images/img-10.png) 10px 0 no-repeat; }
        #voices ul li p.titleWrap#voice03 {
          background: url(https://www.miike-shimabara-line.net/lp/wp-content/themes/lp-miike/images/img-11.png) 5px 0 no-repeat; }
      #voices ul li p.text {
        padding: 30px;
        min-height: 290px;
        margin: 0 4px;
        background-color: #FFFFFF;
        border-radius: 10px;
        /* CSS3  */
        -webkit-border-radius: 10px;
        /* Safari,Google Chrome */
        -moz-border-radius: 10px;
        /* Firefox */
        overflow: hidden;
        /*  position: relative;*/ }
        @media screen and (max-width: 768px) {
          #voices ul li p.text {
            min-height: 0px; } }
      #voices ul li div {
        padding-top: 30xp;
        position: relative; }
        #voices ul li div span.sankaku {
          position: absolute;
          top: -40px;
          left: 33px;
          width: 0;
          height: 0;
          border: 20px solid transparent;
          border-bottom: 30px solid #FFFFFF; }
          @media screen and (max-width: 768px) {
            #voices ul li div span.sankaku {
              display: none; } }
      @media screen and (max-width: 768px) {
        #voices ul li:first-child .titleWrap {
          margin: 0 0 1em 0; } }
    #voices ul li + li {
      margin-left: 20px; }
      @media screen and (max-width: 768px) {
        #voices ul li + li {
          margin-left: 0px; } }

/*-=====================================

軍艦島・観光丸 よくある質問 共通

=====================================*/
#faq {
  padding: 40px 0 80px; }
  @media screen and (max-width: 768px) {
    #faq {
      padding: 20px 0 40px; } }
  #faq h2 {
    width: 360px;
    float: left; }
    @media screen and (max-width: 768px) {
      #faq h2 {
        width: 100%;
        float: none; } }
  #faq div#faqData {
    width: 725px;
    height: 355px;
    float: right;
    overflow: scroll;
    overflow-x: hidden;
    padding-right: 30px;
    margin-top: 15px; }
    @media screen and (max-width: 768px) {
      #faq div#faqData {
        width: 100%; } }
    #faq div#faqData dl dt {
      font-size: 22px;
      color: #044085;
      margin-bottom: 0.5em; }
      @media screen and (max-width: 768px) {
        #faq div#faqData dl dt {
          font-size: 16px;
          font-weight: bold; } }
    #faq div#faqData dl dd {
      color: #666666;
      margin-bottom: 30px; }
      #faq div#faqData dl dd ol {
        list-style: decimal;
        padding-left: 1.5em; }
  #faq #faqData::-webkit-scrollbar {
    width: 10px;
    background-color: #EEEEEE; }
  #faq #faqData::-webkit-scrollbar:horizontal {
    height: 5px; }
  #faq #faqData::-webkit-scrollbar-button {
    display: none; }
  #faq #faqData::-webkit-scrollbar-piece {
    background-color: #EEEEEE; }
  #faq #faqData::-webkit-scrollbar-piece:start {
    background-color: #EEEEEE; }
  #faq #faqData::-webkit-scrollbar-thumb {
    background: #A4A4A4; }

#kankomaru #faq {
  padding: 40px 0 40px; }

/*=====================================

 コース別リンク 共通

=====================================*/
#courseWrap ul#course li {
  float: left;
  width: 355px;
  height: 350px;
  background-repeat: no-repeat;
  border-radius: 10px;
  /* CSS3  */
  -webkit-border-radius: 10px;
  /* Safari,Google Chrome */
  -moz-border-radius: 10px;
  /* Firefox */
  overflow: hidden;
  cursor: pointer; }
  @media screen and (max-width: 768px) {
    #courseWrap ul#course li {
      width: 100%;
      height: auto;
      margin: 0 0 8px 0; } }
  #courseWrap ul#course li a {
    display: block;
    color: #FFFFFF;
    text-decoration: none;
    height: 100px;
    margin-top: 250px;
    padding: 15px;
    background-image: url(images/icon-white-arrow.png);
    background-repeat: no-repeat;
    background-position: 95% center; }
    @media screen and (max-width: 768px) {
      #courseWrap ul#course li a {
        margin-top: 0px;
        height: auto;
        background-size: auto 10px; } }
    #courseWrap ul#course li a span {
      display: block; }
      #courseWrap ul#course li a span.catch {
        font-size: 13px; }
      #courseWrap ul#course li a span.name {
        font-size: 32px;
        line-height: 1.4em; }
        @media screen and (max-width: 768px) {
          #courseWrap ul#course li a span.name {
            font-size: 20px; } }
#courseWrap ul#course li + li {
  margin-left: 17px; }
  @media screen and (max-width: 768px) {
    #courseWrap ul#course li + li {
      margin-left: 0px; } }
#courseWrap ul#course li#course01 {
  background-image: url(images/img-05.png); }
  @media screen and (max-width: 768px) {
    #courseWrap ul#course li#course01 {
      background-image: none; } }
  #courseWrap ul#course li#course01 a {
    background-color: #18314E; }
    #courseWrap ul#course li#course01 a .name {
      margin-top: 20px; }
#courseWrap ul#course li#course02 {
  background-image: url(images/img-06.png); }
  @media screen and (max-width: 768px) {
    #courseWrap ul#course li#course02 {
      background-image: none; } }
  #courseWrap ul#course li#course02 a {
    background-color: #73C1CC; }
#courseWrap ul#course li#course03 {
  background-image: url(https://www.miike-shimabara-line.net/lp/wp-content/themes/lp-miike/images/img-07.png); }
  @media screen and (max-width: 768px) {
    #courseWrap ul#course li#course03 {
      background-image: none; } }
  #courseWrap ul#course li#course03 a {
    background-color: #D95326; }

/*=====================================

 観光丸LP コース別リンク 

=====================================*/
@media screen and (max-width: 768px) {
  #kankomaru #courseWrap ul#course {
    padding: 40px 0px; } }
#kankomaru #courseWrap ul#course li#course01 a .name {
  margin-top: 0px; }
#kankomaru #courseWrap ul#course li#course02 {
  background-image: url(images/kankomaru/img-14.png); }
  #kankomaru #courseWrap ul#course li#course02 a {
    background-color: #044085; }

/*=====================================

三池島原LP コース別リンク 

=====================================*/
@media screen and (max-width: 768px) {
  #ms #courseWrap {
    padding-bottom: 40px; } }
#ms #courseWrap ul#course li#course02 {
  background-image: url(images/kankomaru/img-14.png); }
  #ms #courseWrap ul#course li#course02 a {
    background-color: #044085; }
#ms #courseWrap ul#course li#course03 {
  background-image: url(images/img-06.png); }
  #ms #courseWrap ul#course li#course03 a {
    background-color: #73C1CC; }
@media screen and (max-width: 768px) {
  #ms #courseWrap ul#course li#course01 span.name {
    margin-top: 0px; } }

/*=====================================

 お申し込みの流れ

=====================================*/
div#flow {
  padding: 60px 0 0; }
  @media screen and (max-width: 768px) {
    div#flow {
      padding: 0; } }
  div#flow h2 {
    margin-bottom: 40px; }
    @media screen and (max-width: 768px) {
      div#flow h2 {
        margin-bottom: 20px; } }
  div#flow ul.flowUl {
    padding-bottom: 4px; }
    @media screen and (max-width: 768px) {
      div#flow ul.flowUl {
        width: 100%; } }
    div#flow ul.flowUl li.arrow {
      background-image: url(images/icon-navy-arrow.png);
      background-repeat: no-repeat;
      background-position: center center;
      height: 50px; }
    div#flow ul.flowUl li.flowUl-li {
      width: 1050px;
      display: table;
      margin: 3px;
      background-color: #FFFFFF;
      box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 4px 2px;
      -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 4px 2px;
      -moz-box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 4px 2px;
      border-radius: 10px;
      /* CSS3  */
      -webkit-border-radius: 10px;
      /* Safari,Google Chrome */
      -moz-border-radius: 10px;
      /* Firefox */
      overflow: hidden; }
      @media screen and (max-width: 768px) {
        div#flow ul.flowUl li.flowUl-li {
          width: 99% !important;
          margin: 3px auto;
          display: block; } }
      div#flow ul.flowUl li.flowUl-li p.titleWrap {
        background-color: #044085;
        padding: 15px;
        text-align: center;
        width: 200px;
        vertical-align: middle;
        display: table-cell; }
        @media screen and (max-width: 768px) {
          div#flow ul.flowUl li.flowUl-li p.titleWrap {
            width: 100%;
            display: block; } }
        div#flow ul.flowUl li.flowUl-li p.titleWrap span {
          display: block;
          color: #FFFFFF; }
        div#flow ul.flowUl li.flowUl-li p.titleWrap span.title {
          font-size: 22px;
          color: #FFFFFF; }
      div#flow ul.flowUl li.flowUl-li div {
        display: table-cell;
        padding: 15px; }
        @media screen and (max-width: 768px) {
          div#flow ul.flowUl li.flowUl-li div {
            width: 100%;
            display: block; } }
        div#flow ul.flowUl li.flowUl-li div p + p {
          margin-top: 1em; }
        div#flow ul.flowUl li.flowUl-li div a.button {
          display: block;
          width: 100%;
          height: 45px;
          margin: 10px 0;
          line-height: 40px;
          font-size: 18px;
          color: #FFFFFF;
          background: #B20000;
          box-shadow: 2px 2px 0px #4c0000;
          border-radius: 5px;
          text-align: center;
          text-decoration: none;
          padding: 5px 0 0 0;
          -webkit-transition: 0.3s;
          -moz-transition: 0.3s;
          -o-transition: 0.3s;
          transition: 0.3s; }
          div#flow ul.flowUl li.flowUl-li div a.button:hover {
            position: relative;
            top: 1px;
            left: 1px; }
          @media screen and (max-width: 768px) {
            div#flow ul.flowUl li.flowUl-li div a.button {
              margin: 0 0 10px;
              height: auto;
              line-height: 1.4em;
              font-size: 16px;
              padding: 10px 0; } }
        div#flow ul.flowUl li.flowUl-li div span {
          display: block;
          text-align: center;
          font-size: 18px;
          font-weight: bold; }
      div#flow ul.flowUl li.flowUl-li ul {
        padding: 15px;
        line-height: 1.6em; }
        div#flow ul.flowUl li.flowUl-li ul li {
          text-indent: -1em;
          padding-left: 1.5em;
          margin-bottom: 0.5em; }
        div#flow ul.flowUl li.flowUl-li ul li + li {
          margin-top: 0.5em; }

@media screen and (max-width: 768px) {
  #gunkan #flow {
    padding: 0px 0 40px; } }

@media screen and (max-width: 768px) {
  #kankomaru #flow {
    padding: 30px 0 40px; } }

/*=====================================

 アクセス

=====================================*/
div#access {
  padding-top: 80px; }
  @media screen and (max-width: 768px) {
    div#access {
      padding: 40px 8px;
      background-color: #F0F0E1; } }
  div#access h2 {
    margin-bottom: 20px; }
  div#access iframe {
    width: 550px;
    height: 550px;
    float: left;
    border: none; }
    @media screen and (max-width: 768px) {
      div#access iframe {
        width: 100%;
        height: 300px;
        float: none;
        pointer-events: none; } }
  div#access div {
    width: 500px;
    float: right; }
    @media screen and (max-width: 768px) {
      div#access div {
        width: 100%;
        float: none; } }
    div#access div #img-12 {
      width: 250px;
      float: left; }
      @media screen and (max-width: 768px) {
        div#access div #img-12 {
          width: 100%;
          float: none;
          margin: 15px auto; } }
    div#access div ul {
      width: 245px;
      padding-left: 20px;
      float: right; }
      @media screen and (max-width: 768px) {
        div#access div ul {
          width: 100%;
          float: none;
          padding-left: 0px; } }
      div#access div ul li {
        text-indent: -1em;
        padding-left: 1em; }
        @media screen and (max-width: 768px) {
          div#access div ul li br {
            display: none; } }
    div#access div #img-20 {
      padding-top: 15px; }
      @media screen and (max-width: 768px) {
        div#access div #img-20 {
          width: 100%; } }

/*----------------------------------

三池島原LP アクセス

-------------------------------------*/
#ms div#access {
  padding: 80px 0 80px; }
  @media screen and (max-width: 768px) {
    #ms div#access {
      padding: 30px 10px 40px; } }
  #ms div#access .box2-column {
    width: 1100px;
    padding-bottom: 50px; }
    @media screen and (max-width: 768px) {
      #ms div#access .box2-column {
        width: 100% !important;
        padding-bottom: 15px; } }
    #ms div#access .box2-column .box-l {
      width: 575px;
      float: left; }
      @media screen and (max-width: 768px) {
        #ms div#access .box2-column .box-l {
          width: 100%;
          float: none; } }
      #ms div#access .box2-column .box-l img {
        width: 575px;
        height: auto; }
        @media screen and (max-width: 768px) {
          #ms div#access .box2-column .box-l img {
            width: 100%;
            margin-bottom: 15px; } }
    #ms div#access .box2-column .box-r {
      width: 450px;
      float: right;
      padding-top: 10px; }
      @media screen and (max-width: 768px) {
        #ms div#access .box2-column .box-r {
          width: 100%;
          float: none; } }
      #ms div#access .box2-column .box-r span {
        font-size: 24px;
        margin-bottom: 0.5em;
        display: block;
        letter-spacing: 0.05em; }
        @media screen and (max-width: 768px) {
          #ms div#access .box2-column .box-r span {
            font-size: 18px;
            font-weight: bold; } }
  #ms div#access iframe {
    width: 525px;
    height: 525px; }
    @media screen and (max-width: 768px) {
      #ms div#access iframe {
        width: 100%;
        height: 250px;
        margin-top: 15px; } }
  #ms div#access iframe + iframe {
    margin-left: 50px; }
    @media screen and (max-width: 768px) {
      #ms div#access iframe + iframe {
        margin-left: 0px; } }

/*==========================================

軍艦・観光丸LP 共通 早割キャンペーン

==========================================*/
#hayawari {
  padding: 120px 0 70px; }
  @media screen and (max-width: 768px) {
    #hayawari {
      padding: 40px 0; } }
  #hayawari .normal-h2 {
    line-height: 1.4em;
    margin-bottom: 10px; }
  #hayawari .campaign {
    margin-bottom: 40px; }
    @media screen and (max-width: 768px) {
      #hayawari .campaign {
        margin-bottom: 20px; } }
  #hayawari #hayawariMain {
    background-color: #33855C;
    padding: 30px 0 10px; }
    #hayawari #hayawariMain img {
      margin: 0 auto; }
  #hayawari p.buttonWrap {
    text-align: center;
    margin: 40px 0 0; }
    #hayawari p.buttonWrap a {
      display: inline-block;
      height: 70px;
      line-height: 70px;
      font-size: 30px;
      text-decoration: none;
      text-align: center;
      color: #FFFFFF;
      width: 800px;
      background-color: #B20000;
      border-radius: 5px;
      /* CSS3  */
      -webkit-border-radius: 5px;
      /* Safari,Google Chrome */
      -moz-border-radius: 5px;
      /* Firefox */
      -webkit-transition: 0.3s;
      -moz-transition: 0.3s;
      -o-transition: 0.3s;
      transition: 0.3s;
      box-shadow: 2px 2px 0px #650000; }
      #hayawari p.buttonWrap a:hover {
        position: relative;
        top: 1px;
        left: 1px; }
      @media screen and (max-width: 768px) {
        #hayawari p.buttonWrap a {
          width: 100%; } }
  @media screen and (max-width: 768px) {
    #hayawari #netCampaign {
      width: 100%; } }

@media screen and (max-width: 768px) {
  #kankomaru #hayawari .buttonWrap {
    padding: 0 10px;
    margin: 20px 0 0; }
    #kankomaru #hayawari .buttonWrap a {
      font-size: 18px;
      height: auto;
      line-height: 1.6em;
      padding: 10px 0; } }

/*==========================================

三池島原 LP 専用 特典

==========================================*/
#tokuten {
  background-color: #D95326; }
  #tokuten .inner {
    background-color: #F6F6F6;
    width: 1200px;
    padding: 50px; }
    @media screen and (max-width: 768px) {
      #tokuten .inner {
        width: 100%;
        padding: 30px 10px 40px; } }
    #tokuten .inner dl#campaignInfo {
      margin-top: 40px; }
      #tokuten .inner dl#campaignInfo div#tokutenWrap-l {
        width: 525px;
        float: left;
        clear: both; }
        @media screen and (max-width: 768px) {
          #tokuten .inner dl#campaignInfo div#tokutenWrap-l {
            width: 100%;
            float: none;
            clear: both; } }
      #tokuten .inner dl#campaignInfo div#tokutenWrap-r {
        width: 500px;
        float: right; }
        @media screen and (max-width: 768px) {
          #tokuten .inner dl#campaignInfo div#tokutenWrap-r {
            width: 100%;
            float: none; } }
      #tokuten .inner dl#campaignInfo dt {
        font-size: 26px;
        color: #D95326;
        font-weight: bold;
        padding-bottom: 1em; }
        @media screen and (max-width: 768px) {
          #tokuten .inner dl#campaignInfo dt {
            line-height: 1.4em;
            font-size: 20px; } }
      #tokuten .inner dl#campaignInfo dd {
        padding-bottom: 2em; }
        #tokuten .inner dl#campaignInfo dd ol {
          list-style: decimal;
          padding-left: 1.5em; }
          #tokuten .inner dl#campaignInfo dd ol li {
            margin-bottom: 0.5em; }
        #tokuten .inner dl#campaignInfo dd p {
          line-height: 1.4em; }
        #tokuten .inner dl#campaignInfo dd strong {
          display: block;
          font-size: 20px;
          margin-bottom: 0.5em; }
          @media screen and (max-width: 768px) {
            #tokuten .inner dl#campaignInfo dd strong {
              line-height: 1.4em;
              font-size: 18px; } }
        #tokuten .inner dl#campaignInfo dd ul {
          margin-top: 0.5em; }
          #tokuten .inner dl#campaignInfo dd ul li {
            margin-bottom: 0.5em;
            text-indent: -0.5em;
            padding-left: 2em; }
            @media screen and (max-width: 768px) {
              #tokuten .inner dl#campaignInfo dd ul li {
                padding-left: 1em; } }
            #tokuten .inner dl#campaignInfo dd ul li span {
              font-size: 20px;
              color: #D95326;
              display: inline-block;
              margin-right: 0.3em; }
              @media screen and (max-width: 768px) {
                #tokuten .inner dl#campaignInfo dd ul li span {
                  font-size: 16px; } }
    #tokuten .inner #img-04 {
      padding: 40px 0 0; }
    #tokuten .inner h3 {
      font-size: 22px;
      margin: 50px 0 20px; }
      @media screen and (max-width: 768px) {
        #tokuten .inner h3 {
          font-size: 18px; } }
  #tokuten #panf {
    background-color: #FFFFFF;
    position: relative;
    padding: 15px;
    border-top: 15px #F6F6F6 solid;
    border-bottom: 15px #F6F6F6 solid;
    margin-bottom: 45px; }
    @media screen and (max-width: 768px) {
      #tokuten #panf {
        border-top: none;
        border-bottom: none;
        margin-bottom: 15px; } }
    #tokuten #panf p {
      text-align: center;
      font-size: 24px; }
      @media screen and (max-width: 768px) {
        #tokuten #panf p {
          font-size: 16px;
          text-align: left; }
          #tokuten #panf p br {
            display: none; } }
    #tokuten #panf img {
      position: absolute;
      left: 130px;
      top: -15px; }
      @media screen and (max-width: 768px) {
        #tokuten #panf img {
          display: none; } }
  #tokuten #img-17 {
    width: 1100px; }
    @media screen and (max-width: 768px) {
      #tokuten #img-17 {
        width: 100%; } }
  #tokuten #img-18, #tokuten #img-21 {
    width: 518px;
    display: inline-block;
    vertical-align: top;
    padding: 12px; }
    @media screen and (max-width: 768px) {
      #tokuten #img-18, #tokuten #img-21 {
        width: 100%;
        display: block;
        padding: 10px 0; } }

/*==========================================

お問い合わせ 共通

==========================================*/
#contact {
  padding: 40px 0 100px; }
  @media screen and (max-width: 768px) {
    #contact {
      padding: 40px 0 50px; }
      #contact .normal-h2 br {
        display: none; } }
  #contact div#contactWrap-l {
    width: 300px;
    float: left; }
    @media screen and (max-width: 768px) {
      #contact div#contactWrap-l {
        width: 100%;
        float: none; } }
    #contact div#contactWrap-l p {
      border-top: #C7C7C7 1px solid;
      padding-top: 20px;
      color: #666666; }
      @media screen and (max-width: 768px) {
        #contact div#contactWrap-l p br {
          display: none; } }
  #contact div#contactWrap-r {
    width: 650px;
    float: right; }
    @media screen and (max-width: 768px) {
      #contact div#contactWrap-r {
        width: 100%;
        float: none; } }
    @media screen and (max-width: 768px) {
      #contact div#contactWrap-r table {
        width: 100%; } }
    #contact div#contactWrap-r table th,
    #contact div#contactWrap-r table td {
      padding: 15px 0; }
      @media screen and (max-width: 768px) {
        #contact div#contactWrap-r table th,
        #contact div#contactWrap-r table td {
          width: 100%;
          display: block; } }
    #contact div#contactWrap-r table th {
      width: 250px;
      vertical-align: top;
      text-align: left;
      font-weight: 400; }
      #contact div#contactWrap-r table th span {
        color: #B20000; }
      @media screen and (max-width: 768px) {
        #contact div#contactWrap-r table th {
          padding: 8px 0 0 0; } }
    #contact div#contactWrap-r table td {
      width: 400px; }
      @media screen and (max-width: 768px) {
        #contact div#contactWrap-r table td {
          width: 100%; } }
      #contact div#contactWrap-r table td input,
      #contact div#contactWrap-r table td textarea {
        border: 2px #D6D6D6 solid;
        width: 400px; }
        @media screen and (max-width: 768px) {
          #contact div#contactWrap-r table td input,
          #contact div#contactWrap-r table td textarea {
            width: 100%; } }
      #contact div#contactWrap-r table td input {
        height: 40px;
        font-size: 18px; }
      #contact div#contactWrap-r table td textarea {
        height: 200px;
        font-family: Helvetica, Arial, Verdana, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif !important;
        line-height: 180% !important;
        font-size: 16px !important; }
        @media screen and (max-width: 768px) {
          #contact div#contactWrap-r table td textarea {
            width: 100%; } }
    #contact div#contactWrap-r #submitWrap {
      text-align: right;
      padding: 4px; }
      #contact div#contactWrap-r #submitWrap #submit {
        display: inline-block;
        height: 50px;
        line-height: 50px;
        font-size: 20px;
        text-align: center;
        color: #FFFFFF;
        border: none;
        background-color: #D9A300;
        border-radius: 5px;
        /* CSS3  */
        -webkit-border-radius: 5px;
        /* Safari,Google Chrome */
        -moz-border-radius: 5px;
        /* Firefox */
        -webkit-transition: 0.3s;
        -moz-transition: 0.3s;
        -o-transition: 0.3s;
        transition: 0.3s;
        width: 400px;
        font-family: Helvetica, Arial, Verdana, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
        box-shadow: 2px 2px 0px #8c6a00; }
        #contact div#contactWrap-r #submitWrap #submit:hover {
          position: relative;
          top: 1px;
          left: 1px; }
        @media screen and (max-width: 768px) {
          #contact div#contactWrap-r #submitWrap #submit {
            width: 100%;
            font-size: 18px; } }
    #contact div#contactWrap-r #t-tel {
      ime-mode: inactive; }

/*==========================================

三池島原 LP お問い合わせ

==========================================*/
#ms div#contactWrap-l,
#ms div#contactWrap-r {
  padding-top: 60px; }
@media screen and (max-width: 768px) {
  #ms div#contactWrap-l {
    padding-top: 0px; }
  #ms div#contactWrap-r {
    padding-top: 40px; } }

/*==========================================

footer 共通

==========================================*/
#button-Top {
  display: none;
  position: fixed;
  right: 50px;
  bottom: 130px; }
  @media screen and (max-width: 768px) {
    #button-Top {
      right: 25px;
      bottom: 50px; }
      #button-Top img {
        width: 44px;
        height: 44px; } }

footer {
  background-color: #044085;
  color: #FFFFFF; }
  footer p {
    padding: 25px 0;
    text-align: center;
    color: #FFFFFF; }
    @media screen and (max-width: 768px) {
      footer p {
        font-size: 12px;
        line-height: 1.4;
        padding: 15px 0; } }
    footer p img {
      display: inline; }
      @media screen and (max-width: 768px) {
        footer p img {
          max-width: 70%;
          min-width: 190px;
          padding-bottom: 10px; } }
  footer div#copy {
    background-color: #18314E;
    text-align: center;
    font-size: 12px; }
  footer a {
    color: #FFFFFF !important; }

/*------------------------------------------

観光丸 LP フッター

------------------------------------------*/
#kankomaru footer {
  background-color: #73C1CC; }

/*------------------------------------------

三池島原 LP フッター

------------------------------------------*/
#ms footer {
  background-color: #D95326; }

/*------------------------------------------

スマホ版のみ ボタンのリンク先のグラフページ

------------------------------------------*/
.graphOnly {
  width: 100% !important;
  background-color: #F0F0E1; }
  @media screen and (max-width: 768px) {
    .graphOnly #graph {
      display: block; } }

/*------------------------------------------

三池島原 期間限定 雲仙シーライナー

------------------------------------------*/
.limited {
  width: 100%; }
  .limited a {
    display: block;
    width: 100%;
    text-align: center;
    margin: 15px auto; }
  .limited #pc_limited {
    display: inline-block; }
    @media screen and (max-width: 768px) {
      .limited #pc_limited {
        display: none; } }
  .limited #sp_limited {
    display: none; }
    @media screen and (max-width: 768px) {
      .limited #sp_limited {
        display: inline-block;
        width: 100%;
        max-width: 400px; } }

/*========================================

WP管理バーの整理

========================================*/
#wp-admin-bar-wp-logo, #wp-admin-bar-customize, #wp-admin-bar-updates, #wp-admin-bar-edit, #wp-admin-bar-new-content, #wp-admin-bar-comments, #wp-admin-bar-search {
  display: none; }


.caution {
    width: 950px;
    font-size: 120%;
    border: 3px solid #FF0000;
    padding: 15px 15px;
    line-height: 1.65;
    margin: 10px auto 10px;
}

.caution strong {
    font-size: 130%;
    padding-top: 15px;
}

.caution span {
    color: #FF0000;
}


@media screen and (max-width:850px){

.caution {
    width: 95%;
    font-size: 80%;
}


}



/* ---------------------------------------------------------------------
    緊急宣言用バナー
--------------------------------------------------------------------- */

.caution_banner {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.caution_banner_inner {
    border: none;
    margin: 20px;
    width: 100%;
    max-width: 450px;
}
.caution_banner_qr,
.caution_banner_youtube {
    width: 100%;
}


.trafficinfo_new {
    margin-top: 0;
}
.trafficinfo_new table.program {
    width:100%;
	line-height: 1.5;
}
.trafficinfo_new table.program tr:first-child {
    display: none;
}
.trafficinfo_new table.program tr th,
.trafficinfo_new table.program tr td {
    font-weight: 700;
    font-size: 11px;
	padding-top:5px;
	padding-bottom: 5px;
}
.trafficinfo_new table.program tr th:first-child,
.trafficinfo_new table.program tr td:first-child {
    padding-left: 5px;
    text-align: left;
}
.trafficinfo_new table.program tr th:last-child,
.trafficinfo_new table.program tr td:last-child {
    padding-right: 5px;
    text-align: right;
}

.trafficinfo_g_new table.program {
    border: 2px solid #044085;
}
.trafficinfo_m_new table.program {
    border: 2px solid #73C1CC;
}
.trafficinfo_ms_new table.program {
    border: 2px solid #D95326;
}

.trafficinfo_new table.program th.jyoriku,
.trafficinfo_new table.program th.syuyu {
    background: rgba(4,64,133,0.8);
    color: #fff;
}
.trafficinfo_new table.program th.kankoumaru {
    background: rgba(115,193,204,0.9);
    color: #fff;
}
.trafficinfo_new table.program th.msline_ms,
.trafficinfo_new table.program th.msline_sm {
    background: rgba(217,83,38,0.8);
    color: #fff;
}

#ms #joriku .schedule img {
    width:100%;
}

#lang {
    display: flex;
    justify-content:flex-end;
    gap:0;
    flex-wrap: nowrap;
}
#lang li {
    font-size: 14px;
}
#lang li a {
    text-decoration: none;
}

@media screen and (max-width: 768px) {
	#lang {
		justify-content: center;
		margin-bottom: 1em;
	}
}

.tabs,
.tabs2 {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 50px;
}
.tabs .tab,
.tabs2 .tab2 {
	flex:1;
	font-size: 20px;
	text-align: center;
	border-radius: 20px 20px 0 0;
	color: #fff;
	padding: 1em;
}
.tabs .tab#tab-a,
.tabs2 .tab2#tab2-a {
	background: #1161a9;
}
.tabs .tab#tab-b,
.tabs2 .tab2#tab2-b {
	background: #209444;
}
.tabs .tab-inactive,
.tabs2 .tab2-inactive {
	background: #ddd !important;
	color: #999 !important;
}

h4.jikoku {
	font-size: 24px;
	color: #fff;
	background: #983a1b;
	font-weight: normal;
	padding: 10px;
	margin-bottom: 1em;
}
.icon-small {
	height: 20px;
	margin-right: 5px;
	display: inline-block;
	vertical-align: sub;
}
.icon-large {
	height: 30px;
	margin-right: 10px;
	display: inline-block;
	vertical-align: middle;
}
span.train {
	color:#a91f33; 
	font-weight:bold;
}
span.bus {
	color:#58807c; 
	font-weight:bold;
}
span.ferry {
	color:#d95326; 
	font-weight:bold;
}
span.train-large {
	font-size:20px;
	color:#a91f33; 
	font-weight:bold;
}
span.bus-large {
	font-size:20px;
	color:#58807c; 
	font-weight:bold;
}
span.ferry-large {
	font-size:20px;
	color:#d95326; 
	font-weight:bold;
}
span.route-a {
	color:#1161a9;
	font-weight:bold;
}
span.route-b {
	color:#209444;
	font-weight:bold;
}
table.table,
table.table2 {
	width:100%;
}
table#table-a,
table#table2-a {
	border-top: 3px solid #1161a9;
}
table#table-b,
table#table2-b {
	border-top: 3px solid #209444;
}
table.table > tbody > tr,
table.table2 > tbody > tr {
	border-bottom: 1px solid #999;
}
table#table-a > tbody > tr > th,
table#table2-a > tbody > tr > th {
	background: #e7eff6;
	white-space: nowrap;
}
table#table-b > tbody > tr > th,
table#table2-b > tbody > tr > th {
	background: #e8f4ec;
	white-space: nowrap;
}
table.table > tbody > tr > th,
table.table > tbody > tr > td, 
table.table2 > tbody > tr > th,
table.table2 > tbody > tr > td {
	padding: 1em;
	text-align: center;
	font-size: 20px;
}
table.table > tbody > tr > td:nth-of-type(2), 
table.table2 > tbody > tr > td:nth-of-type(2) {
	white-space: nowrap;
}
table.table .shokei,
table.table2 .shokei {
	width:fit-content;
	background: #eee;
	border-radius: 10px;
	padding: 15px;
	margin: 20px auto 0;
	font-size: 18px;
}
table.table .shokei table,
table.table2 .shokei table {
	text-align: right;
	font-weight: bold;
}
span.spot {
	font-size: 20px;
	font-weight: bold;
}
span.hacchaku {
	font-size: 16px;
	margin-left: 0.5em;
}
span.fee {
	color: #d11111;
	margin-left: 1em;
}
span.kaitei {
	font-size: 10px;
	font-weight: normal;
}

.gokei {
	display: flex;
	flex-wrap: wrap;
	width:600px;
	margin: 0 auto;
	background: #eee;
	border-width: 5px;
	border-style: solid;
	font-weight: bold;
	font-size: 20px;
	margin-top: 50px;
	border-radius: 20px;
	padding: 1em;
}
.gokei#gokei-a,
.gokei#gokei2-a {
	border-color: #1161a9;
}
.gokei#gokei-a .route-name,
.gokei#gokei2-a .route-name {
	color: #1161a9;
}
.gokei#gokei-b,
.gokei#gokei2-b {
	border-color: #209444;
}
.gokei#gokei-b .route-name,
.gokei#gokei2-b .route-name {
	color: #209444;
}
.gokei .route-name {
	margin-right: auto;
}
.gokei .child-fee {
	margin-left: 2em;
}
.gokei .kaitei {
	flex-basis: 100%;
	font-size: 10px;
	text-align: right;
	font-weight: normal;
}
.route-qr-jr {
	display: flex;
	flex-wrap: nowrap;
	gap:50px;
}
.route-qr-jr img {
	width:70px;
	height: 70px;
}
.route-qr-jr div {
	text-align: left;
	flex: 1;
}
.route-qr-jr div p.s1 {
	font-size: 16px;
	font-weight: bold;
}
.route-qr-jr div p.s1 a {
	color: #d11111;
	text-decoration: underline;
}

.route-qr-jr div p.s2 {
	font-size: 13px;
}

h5.access-hd {
	margin-top: 50px;
	font-size: 24px;
	font-weight: normal;
	margin-bottom: 1em;
}
div.access-list {
	display: flex;
	flex-wrap: nowrap;
	gap:100px;
}
div.access-list div {
	flex: 1;
}
div.access-list h6 {
	color: #d95326;
	font-size: 16px;
	margin-bottom: 0.5em;
}
div.access-list p {
	font-size: 14px;
	margin-bottom: 1.5em;
}

@media screen and (max-width: 768px) {
.tabs,
.tabs2 {
	margin-top: 25px;
}
.tabs .tab,
.tabs2 .tab2 {
	font-size: 12px;
	border-radius: 10px 10px 0 0;
	padding: 10px;
}

h4.jikoku {
	font-size: 16px;
	padding: 5px;
	margin-bottom: 0.5em;
}
.icon-small {
	height: 14px;
	margin-right: 3px;
}
.icon-large {
	height: 20px;
	margin-right: 5px;
}
span.train-large {
	font-size:12px;
}
span.bus-large {
	font-size:12px;
}
span.ferry-large {
	font-size:12px;
}
table#table-a,
table#table2-a {
	border-top: 2px solid #1161a9;
	line-height:1.6;
}
table#table-b,
table#table2-b {
	border-top: 2px solid #209444;
	line-height:1.6;
}
table.table > tbody > tr > th,
table.table > tbody > tr > td, 
table.table2 > tbody > tr > th,
table.table2 > tbody > tr > td {
	padding: 10px 2px;
	font-size: 11px;
}
table.table .shokei,
table.table2 .shokei {
	border-radius: 5px;
	padding: 5px;
	margin: 10px auto 0;
	font-size: 12px;
}
span.spot {
	font-size: 12px;
}
span.hacchaku {
	font-size: 10px;
	margin-left: 0.5em;
}
span.fee {
	margin-left: 0.5em;
}
span.kaitei {
	font-size: 8px;
}

.gokei {

	width:90%;
	border-width: 3px;
	font-size: 15px;
	margin-top: 25px;
	border-radius: 10px;
	padding: 0.5em;
}
.gokei .child-fee {
	margin-left: 1em;
}
.route-qr-jr {
	flex-direction: column;
	gap:10px;
	align-items: center;
}
.route-qr-jr img {
	width:50px;
	height: 50px;
	
}
.route-qr-jr div p.s1 {
	font-size: 13px;
}
.route-qr-jr div p.s2 {
	font-size: 11px;
}

h5.access-hd {
	margin-top: 25px;
	font-size: 16px;
	margin-bottom: 0.5em;
}
div.access-list {
	gap:50px;
}
div.access-list h6 {
	font-size: 13px;

}
div.access-list p {
	font-size: 12px;
	margin-bottom: 1em;
}
}


#header #function #functionheadWrap .inner {
	display: flex;
	justify-content: space-between;
}
#header #function #functionheadWrap::before,
#header #function #functionheadWrap::after {
}

@media screen and (max-width: 768px) {
	#header #function #functionheadWrap .inner {
		flex-direction: column;
	}
}