@charset "UTF-8";



/******************************************

    bace

    *******************************************/



    *{-moz-box-sizing: border-box;
    	-webkit-box-sizing: border-box;
    	-o-box-sizing: border-box;
    	-ms-box-sizing: border-box;}

      html{-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;}
      article,aside,canvas,details,figcaption,figure,header,footer,main,menu,nav,section,summary{display:block;}

      body{font-family:"Helvetica Neue", Helvetica, "Arial", "游ゴシック", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
      font-size:13px;line-height: 1.8;color:#000;-webkit-font-smoothing:antialiased;position:relative;
    }
    ul li {
    	list-style-type: none;
    }
    ol{list-style-position: inside;}
    /*デフォルトホバー*/
    a{cursor:pointer;text-decoration:none;-webkit-transition:all .3s;transition:all .3s;-webkit-transition:all all .3s ease;-moz-transition:all all .3s ease;-ms-transition:all all .3s ease;-o-transition:all all .3s ease;transition:all all .3s ease;color: #000;
      /*-webkit-tap-highlight-color:rgba(244,198,182,0.3);*/
    }
    a:hover,a:focus{outline:none;text-decoration:none;text-decoration: none;}
    a:focus, *:focus { outline:none; }
    input[type="button"]::-moz-focus-inner,
    input[type="reset"]::-moz-focus-inner,
    input[type="submit"]::-moz-focus-inner {
     border: 0px;
     outline:none;
   }
   select {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    border-radius: 0;
    border: 0;
    margin: 0;
    padding: 0;
    background: none transparent;
    vertical-align: middle;
    font-size: inherit;
    color: inherit;
    box-sizing: content-box;
    outline:none;
  }


  img{vertical-align: bottom;}

  /*clearfix*/
  .clear{clear:both;}
  .clear hr{display:none;}

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

 .clearfix:after {
   clear: both;
 }

 .clearfix {
   *zoom: 1; /* for IE 6/7 only */
 }

 .l-wrapper{position:relative;overflow: hidden;}
 .container,.gNavArea{max-width: 1200px;margin: 0 auto;}


 .on-small-only .container,
 .on-med-only .container{padding: 0px 20px;}
 .on-med-only .container{width: 90%;}

 .container640{max-width: 640px;margin-left: auto;margin-right: auto;}
 .container740{max-width: 740px;margin-left: auto;margin-right: auto;}
 .container800{max-width: 800px;margin-left: auto;margin-right: auto;}
 .container900{max-width: 900px;margin-left: auto;margin-right: auto;}
 .container1000{max-width: 1000px;margin-left: auto;margin-right: auto;}
 .container1020{max-width: 1020px;margin-left: auto;margin-right: auto;}

 @media only screen and (min-width : 768px) and
 (max-width : 1230px)  {
  .container,.gNavArea{padding: 0px 20px;width: 90%;}
}

@media screen and (min-width : 1024px) {
a[href^="tel:"] {
    pointer-events: none;
}
}


.no-padding{padding: 0 !important;}
.no-margin{margin: 0 !important;}
.relative{position: relative;}
.center{text-align: center !important;}
.center{text-align: center !important;}

/******************************************

    common

    *******************************************/

    .leftAlign{text-align: left !important;}
    .centerAlign{text-align: center !important;}
    .rightAlign{text-align: right !important;}

    .floatLeft{float: left !important;}
    .floatRight{float: right !important;}

    .on-small-only .floatLeft,.on-small-only .floatRight{float: none !important;}

    .mAuto{margin: auto;}
     .mlrAuto{margin-left: auto !important;margin-right: auto !important;}
    .mt-20{margin-top: -20px !important;}
    .mt0{margin-top: 0px !important;}
    .mt5{margin-top: 5px !important;}
    .mt6{margin-top: 6px !important;}
    .mt10{margin-top: 10px !important;}
    .mt15{margin-top: 15px !important;}
    .mt20{margin-top: 20px !important;}
    .mt30{margin-top: 30px !important;}
    .mt40{margin-top: 40px !important;}
    .mt50{margin-top: 50px !important;}
    .mt60{margin-top: 60px !important;}
    .mt70{margin-top: 70px !important;}
    .ml10{margin-left: 10px;}
    .ml15{margin-left: 15px;}
    .mr-10{margin-right: -10px;}
    .mr15{margin-right: 15px;}
    .mr70{margin-right: 70px;}
    .mb0{margin-bottom: 0px !important;}
    .mb7{margin-bottom: 7px !important;}
    .mb10{margin-bottom: 10px !important;}
    .mb20{margin-bottom: 20px !important;}
    .mb30{margin-bottom: 30px !important;}
    .mb40{margin-bottom: 40px !important;}
    .mb50{margin-bottom: 50px !important;}
    .mb60{margin-bottom: 60px !important;}
    .mb70{margin-bottom: 70px !important;}
    .mb80 {margin-bottom: 80px !important;}
    .mb90 {margin-bottom: 90px !important;}
    .mb100 {margin-bottom: 100px !important;}
    .mb-70 {margin-bottom: -70px !important;}


    .lh15{line-height: 1.5;}
    .dpIb{display: inline-block;}
    .dpB{display: block;}

    main .container p{margin-bottom: 30px;}
    .on-small-only main .container p,
    .on-med-only main .container p{margin-bottom: 10px;}

    /*clickBox*/
    .clickBox,.wink {display: block;cursor: pointer;
      -webkit-transition: 0.3s ease-in-out;
      -moz-transition: 0.3s ease-in-out;
      -o-transition: 0.3s ease-in-out;
      transition: 0.3s ease-in-out;}

      .clickBox:hover,.wink:hover{text-decoration: none;
        opacity: 0.7;
        filter: alpha(opacity=30);}

        /*.wink{background: #fff;}*/


        /*空間調整*/
        .l-colArea{padding: 60px 0;}
        .on-small-only .l-colArea{padding: 30px 0px;}

        .l-colArea--T{padding-top: 60px;}
        .on-small-only .l-colArea--T{padding-top: 30px;}
        .l-colArea--B{padding-bottom:60px;}
        .on-small-only .l-colArea--B{padding-bottom:30px;}


        /*文字の大きさ*/
        .bold{font-weight: bold;}
        .normal{font-weight: normal;}

        .big-text{font-size: 120%;}
        .big-text13{font-size: 13px;}
        .big-text14{font-size: 14px;}
        .big-text30{font-size: 30px;}
        .big-text33{font-size: 33px;}
        .on-small-only .big-text14{line-height: 1.5;}
        .on-small-only .big-text33{line-height: 1.5;}
        .big-text140p{font-size: 140% !important;}
          .on-small-only .big-text140p{line-height: 1.5;}
        .big-text200p{font-size: 200% !important;line-height:normal;}
          .on-small-only .big-text200p{font-size: 150% !important;line-height: 1.5;}

        .small-text{font-size: 10px !important;}
        .small-text11{font-size: 11px !important;}
        .small-text12{font-size: 12px !important;}
        .small-text80p{font-size: 80% !important;}
        .small-text85p{font-size: 85% !important;}
        .small-text90p{font-size: 90% !important;}

        .mark{font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;}


        /*書体*/
        .mincho{font-family: "Ryumin Regular KL", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", "Meiryo", serif;}


        /*row*/

        .row.row2 {margin-left: -2px;margin-right: -2px;}
        .row.row2 .col {padding: 0 2px;}


        .row.row3 {margin-left: -3px;margin-right: -3px;}
        .row.row3 .col {padding: 0 3px;}

        .row.row3i {margin-left: -3px !important;margin-right: -3px !important;}
        .row.row3i .col {padding: 0 3px !important;}

        .row.row4i {margin-left: -4px !important;margin-right: -4px !important;}
        .row.row4i .col {padding: 0 4px !important;}

        .row.row5i {margin-left: -5px !important;margin-right: -5px !important;}
        .row.row5i .col {padding: 0 5px !important;}

        .row.row10i {margin-left: -10px !important;margin-right: -10px !important;}
        .row.row10i .col {padding: 0 10px !important;}

        .row.row12 {margin-left: -12px;margin-right: -12px;}
        .row.row12 .col {padding: 0 12px;}

        .row.row16 {margin-left: -16px;margin-right: -16px;}
        .row.row16 .col {padding: 0 16px;}

        .row.row16i {margin-left: -16px !important;margin-right: -16px !important;}
        .row.row16i .col {padding: 0 16px !important;}

        .row.row20 {margin-left: -20px;margin-right: -20px;}
        .row.row20 .col {padding: 0 20px;}


        .row.row20i {margin-left: -20px !important;margin-right: -20px !important;}
        .row.row20i .col {padding: 0 20px !important;}

        .row.row25 {margin-left: -25px;margin-right: -25px;}
        .row.row25 .col {padding: 0 25px;}

        .row.row25i {margin-left: -25px !important;margin-right: -25px !important;}
        .row.row25i .col {padding: 0 25px !important;}

        .row.row30 {margin-left: -30px;margin-right: -30px;}
        .row.row30 .col {padding: 0 30px;}

        .row.row40 {margin-left: -40px;margin-right: -40px;}
        .row.row40 .col {padding: 0 40px;}

        .on-med-only .row.row30,
        .on-med-only .row.row40 {margin-left: -20px;margin-right: -20px;}
        .on-med-only .row.row30 .col,
        .on-med-only .row.row40 .col {padding: 0 20px;}



/* col内画像gridネスト
-------------------------------------*/


/*.img2col{margin-left: 4px !important;margin-right: -6px !important;}*/

/*.on-small-only .img2col{margin-left: -1px !important;}*/
.img2col img{width: 50%;padding:0 3px;float: left;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;}

  .img2col img:first-child{padding-left: 0;}
  .img2col img:last-child{padding-right: 0;}

  .img2col figure{width: 50%;padding:0 3px;float: left;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;}
    .img2col figure img{padding: 0;float: none;width: 100%;}

    .img2col figure:first-child{padding-left: 0;}
    .img2col figure:last-child{padding-right: 0;}


    .img4col img{width: 25%;font-size: 0;line-height: 0;float: left;}
    .on-small-only .img4col img{width: 100%;font-size: 0;line-height: 0;float: none;}
    .img5col img{width: 20%;font-size: 0;line-height: 0;float: left;}


    .imageBox_unit3{margin-left: -3px !important;margin-right: -3px !important;}
    .imageBox_unit3 .col{padding:0 3px !important;}

a.underLineLink{ word-wrap: break-word;text-decoration: underline;color: #49B2E0;-webkit-transition:all .3s;transition:all .3s;-webkit-transition:all all .3s ease;-moz-transition:all all .3s ease;-ms-transition:all all .3s ease;-o-transition:all all .3s ease;transition:all all .3s ease;}
    a.underLineLink:hover{text-decoration: none;}


    /*画像エリア*/
    .imgAreaRight{float: right !important;}
    .imgAreaLeft{float: left !important;}

    .on-small-only .imgAreaLeft,.on-small-only .imgAreaRight{float: none !important;}

    /*borderなし*/
    .bd--none{border-bottom: none !important;}


/* 埋め込み動画レスポンシブ
-------------------------------------*/


.video{
  position:relative;
  width:100%;
  padding-top:56.25%;
}
.video iframe{
  position:absolute;
  top:0;
  right:0;
  width:100%;
  height:100%;
}

/*---------------------------------------
　　　　-　title
---------------------------------------*/

.heading {
  font-weight: bold;
  font-size: 21px;
  letter-spacing: 3px;
  position: relative;
  line-height: 1.2;
}
.on-small-only .heading{font-size: 20px;}


/* border
-------------------------------------*/

.heading__bd {
  border-bottom: 1px solid #000;
  margin-bottom: 30px;
  padding-bottom: 10px;
  padding-top: 0px;
  margin-top: 0px;
  display: inline-block;
}

.heading__bdCenter{

  margin-bottom: 30px;

  text-align: center;
}
.heading__bdCenter span.smallTxt{font-size: 70%;letter-spacing: 2px;}
.heading__bdCenter span.heading__bdCenterIn{border-bottom: 1px solid #000;padding-bottom: 10px;display: inline-block;}

/*sp*/
.on-small-only .heading__bdCenter span.smallTxt{display: block;margin-bottom: 5px;}


/* wave
-------------------------------------*/

.heading__wave{color: #fff;text-align: center;position: relative;line-height: 1.7;margin-bottom: 30px;letter-spacing: 4px;}
.heading__wave span{display: block;font-size: 15px;font-weight: 500;letter-spacing: 2px;}
.heading__wave span:before{
	content: "";
	/*position: absolute;*/
	/*top: 0;*/
	/*left: 0;*/
	display: block;
	margin: auto;
	width: 40%;
	height: 10px;
	background: url(../img/all/bd_wave_white.svg) repeat-x center center;
	-webkit-background-size: contain;
	background-size: contain;
	fill: white;}

	.on-small-only .heading__wave span:before{width: 85%;}


/* aqua border small
-------------------------------------*/

.heading__bdAqua{
  color: #49B2E0;
  border-bottom: 1px solid #00A0E9;
  font-size: 16px;
  margin-bottom: 25px;
  padding-bottom: 10px;
  padding-top: 0px;
  /*margin-top: 90px;*/
  margin-top: 60px;
  letter-spacing: 2px;
}

.on-small-only .heading__bdAqua{font-size: 14px;
  margin-bottom: 20px;
  padding-bottom: 7px;}


  .heading__bdGreen{
    color: #6D9631;
    border-bottom: 1px solid #6D9631;
    font-size: 16px;
    margin-bottom: 25px;
    padding-bottom: 10px;
    padding-top: 0px;
    /*margin-top: 90px;*/
    margin-top: 60px;
    letter-spacing: 2px;
  }

  .on-small-only .heading__bdGreen{font-size: 14px;
    margin-bottom: 20px;
    padding-bottom: 7px;}



    .heading__bdRed{
      color: #C30D23;
      border-bottom: 1px solid #C30D23;
      font-size: 16px;
      margin-bottom: 25px;
      padding-bottom: 10px;
      padding-top: 0px;
      /*margin-top: 90px;*/
      margin-top: 60px;
      letter-spacing: 2px;
    }

    .on-small-only .heading__bdRed{font-size: 14px;
      margin-bottom: 20px;
      padding-bottom: 7px;}



      .heading__bdS{
        border-bottom: 1px solid #000;
        font-size: 15px;
        margin-bottom: 15px;
        padding-bottom: 10px;
        padding-top: 0px;
        /*margin-top: 90px;*/
        margin-top: 40px;
        letter-spacing: 2px;
      }

      .on-small-only .heading__bdS{font-size: 14px;}


      .heading__bdL{
        border-bottom: 1px solid #000;
        font-size: 15px;
        margin-bottom: 15px;
        padding-bottom: 2px;
        padding-top: 0px;
        /*margin-top: 90px;*/
        margin-top: 50px;
        letter-spacing: 2px;
      }

      .on-small-only .heading__bdL{font-size: 14px; margin-top: 30px;line-height: 1.4}


      .heading__bdS--red{color: #C30D23;border-bottom: 1px solid #C30D23;}
      .heading__bdS--blue{color: #49B2E0;border-bottom: 1px solid #49B2E0;}


/* yellow border small
-------------------------------------*/

.heading__bdYellow{
  color: #DBB048;
  border-bottom: 1px solid #DBB048;
  font-size: 16px;
  margin-bottom: 25px;
  padding-bottom: 10px;
  padding-top: 0px;
  margin-top: 60px;
  letter-spacing: 2px;
}

.on-small-only .heading__bdYellow{font-size: 14px;
  margin-bottom: 20px;
  padding-bottom: 7px;}



/* small title
-------------------------------------*/

.heading__small{
  font-size: 14px;
  margin-bottom: 7px;
  margin-top: 15px;
  letter-spacing: 2px;
  line-height: 1.3;
}

.on-small-only .heading__small{font-size: 13px;}


/* betaTitle
-------------------------------------*/

.betaTitle{padding: 5px 16px;margin-bottom: 30px;margin-top: 70px;color: #fff;font-size: 19px;letter-spacing: 3px;position: relative;}
.betaTitle span.betaTitle__small{float: right;font-size: 11px;line-height: 32px;letter-spacing: 1px;}
.container__blue .betaTitle{background: #49B2E0;}
.container__green .betaTitle{background: #6D9631;}
.container__orange .betaTitle{background: #F77A1E;}

.betaTitle:nth-of-type(1){margin-top: 0;}

/*sp*/
.on-small-only .betaTitle{padding: 4px 5px 4px 10px;font-size: 14px;margin-top: 25px;margin-bottom: 10px;line-height: 1.3;}
.on-med-only .betaTitle{margin-top: 25px;margin-bottom: 15px;}

.on-small-only .betaTitle span.betaTitle__small {
  font-size: 10px;
  line-height: 1.3;
  letter-spacing: 0px;
  width: 10em;
  margin-top: 4px;
}

.on-small-only .betaTitle01:before{
  margin-right: 5px;margin-top: 4px;
  width: 30px;height: 22px;
  -webkit-background-size: contain;
  background-size: contain;
}
.on-small-only .betaTitle02:before,.on-small-only .betaTitle03:before{
  margin-right: 5px;margin-top: 6px;
  width: 45px;height: 20px;
  -webkit-background-size: contain;
  background-size: contain;
}

/*iphone5*/
@media screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2){
  /*スタイル記述*/
  .on-small-only .betaTitle span.betaTitle__small {width: 8.5em;}
  .on-small-only .betaTitle {letter-spacing: 1px;}

}


/* betaTitle
-------------------------------------*/

.discHeadingSS{font-size: 14px;font-weight: bold;line-height: 1.4;margin-bottom: 7px;margin-top: 15px;}
.discHeadingSS:before{content: "●";color: #49B2E0;margin-right: 3px;}

.on-small-only .discHeadingSS{font-size: 13px;margin-bottom: 5px;margin-top: 12px;}
.on-small-only .row .col.stepBox__in--R h3 + .on-small-only .discHeadingSS{margin-top: 0;}

.discHeadingSSS{font-size: 13px;font-weight: bold;line-height: 1.4;margin-bottom: 7px;margin-top: 15px;}
.discHeadingSSS:before{content: "●";color: #49B2E0;margin-right: 3px;}


/*ベタ（小）*/

.betaTitleS{margin-bottom: 30px;font-size: 14px;padding: 3px 15px;}
.heading--mtM{margin-top: 40px;}


/*sp*/
  .on-small-only .heading--mtM {
      margin-top: 30px;
  }
  .on-small-only .betaTitleS {
      margin-bottom: 20px;
      font-size: 13px;
      padding: 2px 10px;
  }



/* 両側にラインのあるTitle
-------------------------------------*/


.cLine__heading{
  border-top: 1px solid black; 
  margin:100px 0 25px; 
  text-align:center; 
  padding:0; 
  height:24px;
}


.cLine__heading span { 
  position: relative; 
  top: -50%; 
  padding: 0 20px; 
  background:white;
}


  .on-small-only .cLine__heading{font-size: 15px;margin-top: 60px;letter-spacing: 1px;}
  .on-small-only .cLine__heading:after {
    border-left: 0.5em solid #fff;
  }
  .on-small-only .cLine__heading:before {
    border-right: 0.5em solid #fff;
  }



  /*タイトル内にアイコンが入る場合*/

/*.cLine__heading .cLine__heading--ico{padding-right: 3em;}
.on-small-only .cLine__heading .cLine__heading--ico{padding-right: 4em;}
*/


/* アコーディオンと同じ形のタイトル
-------------------------------------*/

.heading__acco{padding: 15px 20px;margin-top: 30px;color: #49B2E0;
}


/* テキストのみのタイトル
-------------------------------------*/

.txtHeading {margin-bottom: 25px;font-size: 18px;}
.on-small-only .txtHeading {margin-bottom: 20px;font-size: 16px;}


.txtHeadingS{margin-bottom: 20px;font-size: 16px;}

.on-small-only .txtHeadingS {
  margin-bottom: 10px;
  font-size: 14px;
  margin-top: 20px;line-height: 1.5;
}

.txtHeadingSS{margin-bottom: 10px;font-size: 15px;}
.on-small-only .txtHeadingSS {
  margin-bottom: 7px;
  font-size: 13px;
  margin-top: 30px;line-height: 1.5;
}


.txtHeadingSSS{margin-bottom: 10px;font-size: 14px;}
.on-small-only .txtHeadingSSS,.on-med-only .txtHeadingSSS{margin-bottom: 7px;font-size: 13px;}

/*.on-small-only .txtHeadingS:nth-of-type(1){margin-top: 15px;}*/

.txtHeadingSSSS{margin-bottom: 7px;font-size: 13px;margin-top: 20px;}



.txtHeading--blue{color: #0081CC;}
.txtHeading--brown{color: #270B00;}


.on-small-only .title1st{margin-top: 0;}


/*---------------------------------------
　　　　-　hr line
---------------------------------------*/

hr.line{height: 1px;border: none;margin: 20px 0;}
.on-small-only hr.line,hr.lineS{height: 1px;border: none;margin: 10px 0;}

.on-small-only hr.lineS{height: 1px;border: none;margin: 5px 0;}

hr.line--gray {border-top: 1px #9FA0A0 solid !important;}
hr.line--lGray {border-top: 1px #ddd solid !important;}

hr.lineDot--gray {border-top: 1px #9FA0A0 dotted !important;}
hr.lineDot--lGray {border-top: 1px #ddd dotted !important;}


/*---------------------------------------
　　　　-　ico
---------------------------------------*/

.ico__new{font-size: 10px;
  padding: 2px 5px;
  color: #FFF;
    background: #5FB7E1;
  border: 1px solid #5FB7E1;
  vertical-align: middle;
  line-height: 1;
  display: inline-block;}

/*---------------------------------------
　　　　-　マーカー
---------------------------------------*/

.marker {
  background: linear-gradient(transparent 60%, #D8EBF8 60%);
}


/*---------------------------------------
　　　　-　フレーム
---------------------------------------*/

/* 角丸
-------------------------------------*/

.frameBox{margin: 15px 0;}
.frame{padding: 15px;border-radius: 3px;text-align: center;}
.frame--blue{border: 1px solid #49B2E0;}

.frame__heading{color: #49B2E0;font-size: 13px;font-weight: bold;}


.on-small-only .frameBox{margin-top: 0px;}
.on-small-only .frame{margin-top: 6px;}
.on-small-only .frameBox .frame p{line-height: 1.5;}



/*---------------------------------------
　　　　-　btn
---------------------------------------*/

.btn{display: block;padding:10px 20px;text-align: center;font-size: 13px;letter-spacing: 1px;font-weight: bold;}
.btn.btn_yoyaku{color: #fff;}



/* 共通の角丸ボタン
-------------------------------------*/
.btn__common{
  position: relative;
  text-align: left;
  max-width: 300px;
  color: #1D2A73;
  background: #fff;
  border: 1px solid #1D2A73;
  border-radius: 3px;
  box-shadow:2px 2px 0px 0px #9FA0A0;
  -moz-box-shadow:2px 2px 0px 0px #9FA0A0;
  -webkit-box-shadow:2px 2px 0px 0px #9FA0A0;}
  .btn__common:hover{
    background: #1D2A73;color: #fff;
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    transform: translate3d(0, 3px, 0);}

    .btn__common::before,
    .btn__common::after{
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      margin: auto;
      content: "";
      vertical-align: middle;
    }

    .btn__common::before{
      right: 15px;left: auto;
      width: 10px;
      height: 10px;
      border-top: 1px solid #1D2A73;
      border-right: 1px solid #1D2A73;
      -webkit-transform: rotate(45deg);
      transform: rotate(45deg);
    }
    .btn__common:hover::before{
      border-top: 1px solid #fff;
      border-right: 1px solid #fff;

    }

    /*sp*/
    .on-small-only .btn__common{text-align: center;max-width: 100%;}


.btn__common--yellow{border: 1px solid #DBB048;color: #DBB048;}
.btn__common--yellow::before{
      border-top: 1px solid #DBB048;
      border-right: 1px solid #DBB048;}
      .btn__common--yellow:hover{
    background: #DBB048;}



.btn__common--blue{border: 1px solid #0081CC;color: #0081CC;}
.btn__common--blue::before{
      border-top: 1px solid #0081CC;
      border-right: 1px solid #0081CC;}
      .btn__common--blue:hover{
    background: #0081CC;}


/* 共通の角丸ボタン（大）
-------------------------------------*/
.btn__commonL{
  position: relative;
  text-align: left;
  max-width: 100%;
  font-size: 16px;
  padding: 15px 20px;
  color: #fff;
  background: #0081CC;
  border: 1px solid #0081CC;
  border-radius: 3px;
  box-shadow:2px 2px 0px 0px #9FA0A0;
  -moz-box-shadow:2px 2px 0px 0px #9FA0A0;
  -webkit-box-shadow:2px 2px 0px 0px #9FA0A0;}
  .btn__commonL:hover{
    background: #005BAC;color: #fff;
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    transform: translate3d(0, 3px, 0);}

    .btn__commonL::before,
    .btn__commonL::after{
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      margin: auto;
      content: "";
      vertical-align: middle;
    }

    .btn__commonL::before{
      right: 20px;left: auto;
      width: 16px;
      height: 16px;
      border-top: 1px solid #fff;
      border-right: 1px solid #fff;
      -webkit-transform: rotate(45deg);
      transform: rotate(45deg);
    }
    .btn__commonL:hover::before{
      border-top: 1px solid #fff;
      border-right: 1px solid #fff;

    }

    /*sp*/
    .on-small-only .btn__commonL{text-align: center;font-size: 14px;padding: 10px 20px;line-height: 1.5;}
    .on-small-only .btn__commonL::before {right: 15px;width: 12px;height: 12px;}


/*色変え版*/
    .btn__commonL--green{background: #6D9631;
      border: 1px solid #6D9631;}
      .btn__commonL--green:hover{background: #567734;}


    .btn__commonL--skyBlue{background: #49B2E0;
      border: 1px solid #49B2E0;}
      .btn__commonL--skyBlue:hover{background: #0091D1;}


      .btn__commonL--navy{background: #002D60;
      border: 1px solid #002D60;}
      .btn__commonL--navy:hover{background: #06172E;}


      .btn__commonL--navy2{background: #2C51A2;
      border: 1px solid #2C51A2;}
      .btn__commonL--navy2:hover{background: #244385;}


      .btn__commonL--brown{background: #4E2E29;
      border: 1px solid #4E2E29;}
      .btn__commonL--brown:hover{background: #2D1A17;}





/* 共通の角丸ボタン（小）
-------------------------------------*/
.btn__commonS{
  position: relative;
  text-align: left;
  max-width: 230px;
  font-size: 12px;
  padding: 8px 20px;
  color: #49B2E0;
  background: #fff;
  border: 1px solid #49B2E0;
  border-radius: 3px;
  box-shadow:2px 2px 0px 0px #9FA0A0;
  -moz-box-shadow:2px 2px 0px 0px #9FA0A0;
  -webkit-box-shadow:2px 2px 0px 0px #9FA0A0;}
  .btn__commonS:hover{
    background: #49B2E0;color: #fff;
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    transform: translate3d(0, 3px, 0);}

    .btn__commonS::before,
    .btn__commonS::after{
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      margin: auto;
      content: "";
      vertical-align: middle;
    }

    .btn__commonS::before{
      right: 15px;left: auto;
      width: 8px;
      height: 8px;
      border-top: 1px solid #49B2E0;
      border-right: 1px solid #49B2E0;
      -webkit-transform: rotate(45deg);
      transform: rotate(45deg);
    }
    .btn__commonS:hover::before{
      border-top: 1px solid #fff;
      border-right: 1px solid #fff;

    }

    /*sp*/
    .on-small-only .btn__commonS{text-align: center;max-width: 100%;}


    .btn__commonS--center{text-align: center;max-width: 100%;}



    .btn__commonS--right{text-align: center;}
    .btn__commonS--right::before{
      left: 15px;right: auto;
      width: 8px;
      height: 8px;
      border-bottom: 1px solid #49B2E0;
      border-left: 1px solid #49B2E0;
      border-top: none;
      border-right: none;
      -webkit-transform: rotate(45deg);
      transform: rotate(45deg);
    }



    .btn__commonS--green{color: #6D9631;border: 1px solid #6D9631;}
    .btn__commonS--green:hover{background: #6D9631;}
    .btn__commonS--green::before{border-top: 1px solid #6D9631;border-right: 1px solid #6D9631;}


    .btn__commonS--brown{color: #270B00;border: 1px solid #270B00;}
    .btn__commonS--brown:hover{background: #270B00;}
    .btn__commonS--brown::before{border-top: 1px solid #270B00;border-right: 1px solid #270B00;}







/* 共通の角丸ボタン（予約）
-------------------------------------*/
.btn__common.btn--yoyaku{
  background: #F18D00;color: #fff;border: 1px solid #F18D00;
}
.btn__common.btn--yoyaku:hover{
  background: #ed6a00;border: 1px solid #ed6a00;
}
.btn__common.btn--yoyaku::before{border-top: 1px solid #fff;
  border-right: 1px solid #fff;}


/* わんこのボタン（黄色）
-------------------------------------*/
.btn__square.bg--yerrow2{height: 100%;line-height: 1.3;}
.btn__square.bg--yerrow2:hover{background: #DBB048;}

.on-med-only .btn__square.bg--yerrow2 span{display: block;}


/* 角丸ボタン
-------------------------------------*/
.btn--kadomaru{width: 100%;border-radius: 3px;}
.kadomaru{border-radius: 3px;}


/* 四角ベタボタン
-------------------------------------*/

.btn__square {
  position: relative;
  text-align: left;
  display: block;
  padding: 20px;
  font-size: 13px;
  letter-spacing: 1px;
  font-weight: bold;
}

.btn__square::before {
  position: absolute;
  top: 0;bottom: 0;
  margin: auto;
  content: "";
  vertical-align: middle;
  right: 20px;
  left: auto;
  width: 14px;
  height: 14px;
  border-top: 1px solid #000;
  border-right: 1px solid #000;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.btn__square:hover{opacity: .7;}

.btn__square--btmW{color: #fff;}
.btn__square--btmW:before{
  width: 10px;
height: 10px;
border-bottom: 1px solid #fff;
border-right: 1px solid #fff;}



/* 二重ボタン
-------------------------------------*/
.btn--double{box-shadow:2px 2px 0px 0px #9FA0A0;
  -moz-box-shadow:2px 2px 0px 0px #9FA0A0;
  -webkit-box-shadow:2px 2px 0px 0px #9FA0A0;}
  .btn--double:hover{
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    -webkit-transform:translate3d(0, 3px, 0);
    -ms-transform:translate3d(0, 3px, 0);
    -o-transform:translate3d(0, 3px, 0);
    transform:translate3d(0, 3px, 0);}


/* ラインボタン
-------------------------------------*/

/*黒*/
.btn--blackLine{border: 1px solid #000;}

/*白*/
.btn--whiteLine{border: 1px solid #fff;color: #fff;}


/*紺*/
.btn--navyLine{border: 1px solid #1D2A73;color: #1D2A73;}
.btn--navyLine:hover{background: #1D2A73;color: #fff;}
.btn--navyLine.arrowNormal--navy:hover:before{border-top: 1px solid #fff;
  border-right: 1px solid #fff;}

  /*水色*/
  .btn--lBlueLine{border: 1px solid #5FB7E1;color: #5FB7E1;}
  .btn--lBlueLine:hover{background: #5FB7E1;color: #fff;}
  .btn--lBlueLine .arrowMaru--lBlue:hover:before{background: #fff;}
  .btn--lBlueLine .arrowMaru--lBlue:hover:after{border-top: 1px solid #5FB7E1;
    border-right: 1px solid #5FB7E1;}

/*水色+背景白*/
    .btn--lBlueLineW{border: 1px solid #5FB7E1;color: #5FB7E1;background: #fff;}
  .btn--lBlueLineW:hover{background: #5FB7E1;color: #fff;}
  .btn--lBlueLineW:hover .arrowMaru--lBlue:before{background: #fff;}
  .btn--lBlueLineW:hover .arrowMaru--lBlue:after{border-top: 1px solid #5FB7E1;
    border-right: 1px solid #5FB7E1;}

.btn--lBlueLineW2:hover{background: #2a9dd8;color: #fff;}


    /*濃い水色*/
    .btn--lBlueLine2{border: 1px solid #32A2D9;color: #32A2D9;}



    /*短くしたい場合*/

    .btn--short{max-width: 280px;}
    .btn--shortL{max-width: 350px;}
    .on-small-only .btn--short,.on-small-only .btn--shortL{max-width: 100%;}



/* ラインボタン - hoverで色変わる版
-------------------------------------*/

.btn__line,.btn__line2 {
  border: 1px solid #49B2E0;
  color: #49B2E0;
  display: block;
  text-align: center;
  font-size: 13px;
  letter-spacing: 1px;
  font-weight: bold;
  border-radius: 3px;
  line-height: 1.5;
}
.btn__line{padding: 10px 20px;}

.btn__line:before,.btn__line2:before  {
  right: 20px;
  left: auto !important;
  width: 14px;
  height: 14px;
  border-top: 1px solid #49B2E0;
  border-right: 1px solid #49B2E0;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.btn__line:hover::before,.btn__line2:hover::before{border-top: 1px solid #fff;
  border-right: 1px solid #fff;}

  .btn__line:hover,.btn__line2:hover{background: #49B2E0;color: #fff;}


  .btn__lineL{padding: 30px 20px;}



  .btn__line--blue{color: #fff;background: #49B2E0;}
  .btn__line--blue:before{border-top: 1px solid #fff;border-right: 1px solid #fff;}
  .btn__line--blue:hover{background: #fff;color: #49B2E0;}
  .btn__line--blue:hover::before{border-top: 1px solid #49B2E0;
    border-right: 1px solid #49B2E0;}

  .btn__line--yellow{color: #DBB048;border: 1px solid #DBB048;background: #fff;}
  .btn__line--yellow:before{border-top: 1px solid #DBB048;border-right: 1px solid #DBB048;}
  .btn__line--yellow:hover{background: #DBB048;color: #fff;}
  .btn__line--yellow:hover::before{border-top: 1px solid #fff;
    border-right: 1px solid #fff;}






/* ベタボタン
-------------------------------------*/

/*オレンジ*/
.btn--orangeBeta{background: #F18D00;color: #fff;}
.btn--orangeBeta:hover{background: #ed6a00;}

/*---------------------------------------
　　　　-　arrow
---------------------------------------*/

.arrow{
  position: relative;
  vertical-align: middle;
  text-decoration: none;
}
.arrow::before,
.arrow::after{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  content: "";
  vertical-align: middle;
}


/* くの字のarrow
-------------------------------------*/

.arrowNormal::before{
  right: 10px;left: auto;
  width: 10px;
  height: 10px;
  border-top: 1px solid #000;
  border-right: 1px solid #000;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.arrowNormal--L::before{
  right: 20px;left: auto;
  width: 14px;
  height: 14px;
  border-top: 1px solid #000;
  border-right: 1px solid #000;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.arrowNormal--navy::before{border-top: 1px solid #1D2A73;border-right: 1px solid #1D2A73;}

.arrowNormal--white::before{border-top: 1px solid #fff;border-right: 1px solid #fff;}

.arrowNormal--black::before{border-top: 1px solid #000;border-right: 1px solid #000;}

.arrowNormal--lBlueLine2::before{border-top: 1px solid #49B2E0;border-right: 1px solid #49B2E0;}


/* くの字の矢印アイコン（正円背景）
-------------------------------------*/


.arrowMaru{padding-left: 1.5em;}

.arrowMaru::before{
  width: 12px;
  height: 12px;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  background: #000;
}
.arrowMaru::after{
  left: 3px;
  width: 5px;
  height: 5px;
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}



/*背景色変更*/
.arrowMaru--lBlue::before{background: #5FB7E1;}

.arrowMaru--orange::before{background: #F18D00;}
.arrowMaru--white::before{background: #fff;}
.arrowMaru--white::after{border-top: 1px solid #F18D00;
  border-right: 1px solid #F18D00;}



/* 三角矢印リスト
-------------------------------------*/

.arrowList li{position: relative;padding-left: 10px;}
.arrowList li:before{
	content: "";
	position: absolute;
  top: 0.4em;
  left: 0px;
  vertical-align: middle;
  box-sizing: border-box;
  width: 5px;
  height: 5px;
  border: 5px solid transparent;
  border-left: 5px solid #000;
}



/* 矢印文字ボックス
-------------------------------------*/

.arrowTxtBox {
  font-size: 14px;
  margin: 0;
  padding: 4px 10px 3px; /* 要素の上の余白調整 */
  /*width: 94px;*/ /* 四角形の幅 */
  color: #fff;
  background: #49B2E0;
  position: relative;
}

.arrowTxtBox:after {
 border-left: 12px solid #49B2E0; /* 右向きの三角形を作るため左のボーダーに色を付ける */
 border-top: 13px solid transparent; /* 上のボーダーを透過に指定 */
 border-bottom: 13px solid transparent; /* 下のボーダーを透過に指定 */
 content: "";
 position: absolute;
 right: -12px;
 top: 0;
}

.on-med-and-up .arrowTxtBox:after{border-top: 14px solid transparent;border-bottom: 14px solid transparent;}

/* テキストの指定 */
.arrowTxtBox {
 position: relative;
 z-index: 1;
}


/* 上だけ矢印
-------------------------------------*/

.arrow__katagawaT{position: relative;margin-right: 1.6em;}
.arrow__katagawaT::before{
  content: '';
  position: absolute;
  right: -20px;
  top: 13px;
  bottom: 0;
  width: 17px;
    border-top: 1px solid #000;
    /*height: 1px;
    background: #000;*/
}
.arrow__katagawaT::after{
  content: '';
  position: absolute;
  right: -19px;
  top: 8px;
  bottom: 0;
  width: 10px;
  height: 10px;
  border-top: 1px solid #000;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}


.on-small-only .arrow__katagawaT::before,
.on-med-only .arrow__katagawaT::before{
  right: -16px;
  top: 12px;
  bottom: 0;
  width: 13px;
}
.on-small-only .arrow__katagawaT::after,
.on-med-only .arrow__katagawaT::after{
  right: -15px;
  bottom: 0;
  width: 8px;
  height: 8px;
}

/*---------------------------------------
　　　　-　list
---------------------------------------*/

/* 水色disc
-------------------------------------*/

.discList li{position: relative;margin-top: 15px;
  margin-left: 1em;
  text-indent: -0.5em;}
  .discList li:first-of-type{margin-top: 0;}


  .discList li:before{
    content: '';
    width: 6px;
    height: 6px;
    display: inline-block;
    border-radius: 100%;
    background: #000;
    position: relative;
    left: -7px;
    top: -1px;
  }

  .discList--aqua li:before{background: #49B2E0 !important;}


  .discListS li{position: relative;margin-top: 5px;
    margin-left: 1em;
    text-indent: -0.5em;line-height: 1.4;}
    .discListS li:first-of-type{margin-top: 0;}


    .discListS li:before{
      content: '';
      width: 6px;
      height: 6px;
      display: inline-block;
      border-radius: 100%;
      background: #000;
      position: relative;
      left: -7px;
      top: -1px;
    }

    .indent li{margin-left: 1em;text-indent: -0.5em !important;}


/* btnList
-------------------------------------*/

.btnList li{margin-top: 20px;}

.on-small-only .btnList li{margin-top: 10px;}

.on-large-only .btnList li:nth-of-type(-n+2),
.on-med-only .btnList li:nth-of-type(-n+2),
.on-small-only .btnList li:nth-of-type(1){margin-top: 0;}


/*スマホだけボタンの間隔を開けたい場合*/
.on-small-only .btnList2 li{margin-top: 10px;}
.on-small-only .btnList2 li:nth-of-type(1){margin-top: 0;}


/* olList
-------------------------------------*/

.olList{list-style-position: outside;}
.olList li{margin-left: 1em;margin-top: 10px;line-height: 1.4;}
.on-small-only .olList li:first-child{margin-top: 0;}

.olList .discListS{margin-left: 1em;margin-top: 10px;}

.on-small-only .olList{margin-left: 10px;margin-bottom: 15px;}
.on-small-only .olList .discListS{margin-left: 0.5em;}


/*（）囲みのカウント*/
.parentheses{
  padding:0;
  margin:0;
}

.parentheses li{
  list-style-type:none;
  list-style-position:inside;
  counter-increment: cnt;
}
.parentheses li:before{
  display: marker;
  content: "（" counter(cnt) "）";
}


.parentheses--left li{
  margin-left: 2em;
  text-indent: -2.5em;
}


.parentheses--left2{padding: 0px 0px 0px 1em !important;}

.parentheses--left2 li{margin-left: 1.5em;
text-indent: -2.5em;}



/*（）囲みのカウント　直書き版 ※ネストするときなど*/
.parentheses2{
  padding:0;
  margin:15px 0;
}
 
.parentheses2 li{
  list-style-type:none;
  list-style-position:inside;
}


/*丸の中に数字のリスト*/

.noList {
  counter-reset: my-counter;
  list-style: none;
  padding: 0;
}

.noList li {
  margin-bottom: 6px;
  padding-left: 30px;
  position: relative;
  font-size: 13px;font-weight: bold;
}
.noList li:before {
  content: counter(my-counter);
  counter-increment: my-counter;
  background-color: #49B2E0;
  color: #fff;
  display: block;
  float: left;
  line-height: 22px;
  margin-left: -30px;
  text-align: center;
  height: 22px;
  width: 22px;
  border-radius: 50%;
}


.on-small-only .noList li {margin-bottom: 2px;}
.on-small-only .noList li:before{height: 18px;width: 18px;line-height: 18px;}

/*---------------------------------------
　　　　- fukidashi
---------------------------------------*/


.balloon--bottom {
  position: relative;
  display: inline-block;
  margin: 1.5em 0;
  padding: 7px 10px;
  min-width: 120px;
  max-width: 100%;
  color: #333;
  font-size: 16px;
    background: #ffff99;
}

.balloon--bottom:before{
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -8px;
  border: 8px solid transparent;
    border-top: 15px solid #ffff99;
}

.balloon--bottom p {
  margin: 0 !important;
  padding: 0;
}

.on-small-only .balloon--bottom{width: 100%;text-align: center; font-size: 13px;}

/*---------------------------------------
　　　　- バナー配置部分
---------------------------------------*/


.container .row.bnBox{margin-top: 35px;margin-left: -16px;margin-right: -16px;}
.bnBox .col{padding:0 16px;}

.bnBox__upper{margin-top: 60px;}
  .on-small-only .bnBox__upper{margin-top: 30px;}


.container .row.bnBox20{margin-top: 35px;margin-left: -20px;margin-right: -20px;}
.bnBox20 .col{padding:0 20px;}

.on-small-only .bnBox20.bnBox__upper{margin-top: 20px;}


.container .row.bnBox25{margin-top: 35px;margin-left: -25px;margin-right: -25px;}
.bnBox25 .col{padding:0 25px;}

.on-small-only .bnBox25.bnBox__upper{margin-top: 20px;}
.on-small-only .container .row.bnBox25 div{margin-top: 10px;}
.on-small-only .container .row.bnBox25 div:nth-of-type(1){margin-top: 0px;}




/*sp*/
.on-small-only .container .row.bnBox{margin-top: 25px;}
.on-small-only .container .row.bnBox a{margin-top: 10px;}
.on-small-only .container .row.bnBox a:first-of-type{margin-top: 0;}



/*spだけ画像を小さくする*/
.on-small-only .smallImg,.on-small-only .smallImg img{max-width: 70%;}




/*---------------------------------------
　　　　- 問い合わせなど電話部分
---------------------------------------*/

.telList dt{font-size: 13px;font-weight: bold;}
.telList dt:before{content: "●";color: #49B2E0;margin-right: 3px;}
.telList dd{font-weight: bold;font-size: 14px;}

.on-small-only .telList{margin-top: 5px;}

.on-med-only .telList dt,
.on-med-only .telList dd,
.on-small-only .telList dt,
.on-small-only .telList dd{display: inline-block;}

.on-small-only .telList dt {font-size: 12px;}
.on-small-only .telList dd {font-size: 13px;}



.on-small-only .tel-link{text-decoration: underline;}
.on-small-only .tel-link a{color: #49B2E0;}






/*---------------------------------------
　　　　- color
---------------------------------------*/

.txt--white{color: #fff;}
.txt--black{color: #000;}
.txt--red{color: #C30D23;}
.txt--orange{color: #F18D00;}
.txt--navy{color: #1D2A73;}
.txt--blue{color: #49B2E0;}
.txt--dBlue{color: #0081CC;}
.txt--aqua{color: #DFF2FC;}
.txt--yerrow{color: #DBB048;}
.txt--lYerrow{color: #ffff99;}
.txt--green {color: #6D9631;}
.txt--brown {color: #4E2E29;}

.bg--white{background: #fff !important;}
.bg--black{background: #000;}
.bg--red{background: #C30D23;}
.bg--orange{background: #F18D00;}
.bg--navy{background: #1D2A73;}
.bg--dBlue{background: #0081CC;}
.bg--blue{background: #49B2E0;}
.bg--aqua{background: #DFF2FC;}
.bg--gray{background: #DCDDDD;}
.bg--gray2{background: #F5F7F7;}
.bg--lGray{background: #F7F8F8;}
.bg--lGray2{background: #EFEFEF;}
.bg--lYerrow{background: #ffff99;}
.bg--lYerrow2{background: #F9F1DE;}
.bg--yerrow{background: #DBB048;}
.bg--yerrow2{background: #E8CC8B;}
.bg--lAqua{background: #EAF6FD;}
.bg--lGreen{background: #EBF5E7;}
.bg--green{background: #6D9631;}
.bg--skyBlue{background: #7ECEF4;}
.bg--brown{background: #6A3906;}



.bg--yellow{background: #F4BB1B;}
.bg--yellow2{background: #FAEE00;}

.border--red{border: solid 1px #C30D23;padding:10px 20px;}

/*---------------------------------------
　　　　- before after
---------------------------------------*/
.txt--aquaSquare:before{
    content: "";
    width: 20px;
    height: 10px;
    background-color: #DFF2FC;
    display: inline-block;
    border: 1px solid #000;
    margin-right: 3px;
}
.txt--yellowSquare:before{
    content: "";
    width: 20px;
    height: 10px;
    background-color: #ffff99;
    display: inline-block;
    border: 1px solid #000;
    margin-right: 3px;
}


.txt--redAnnotation:before{
    content: "「※」";
    width: 25px;
    height: 10px;
    color: #C30D23;
    display: inline-block;
    margin-right: 3px;
    font-size: 10px;
}
.txt--redAnnotation2:before{
    content: " \"※\" ";
    width: 15px;
    height: 10px;
    color: #C30D23;
    display: inline-block;
    margin-right: 3px;
    font-size: 10px;
}

/*---------------------------------------
　　　　- font
---------------------------------------*/


.gFont_josefin{font-family: 'Josefin Sans', sans-serif;}



/******************************************

    header

    *******************************************/

    .description{line-height: 1;font-size: 11px;position: absolute;
      left: 270px;top: 20px;}




      @media only screen and (min-width : 768px) and
      (max-width : 1369px)  {
        .description{left: 173px;top: 30px;}
      }



      /* ----iPad in 縦----*/
      @media only screen and (min-width: 481px) and (max-width: 768px) and (orientation:portrait) {
        .description{left: 230px;}
        .cd-primary-nav { padding: 0 40px 0 220px;}
      }

      /* ----iPad in 横----*/
      @media only screen and (orientation:landscape) {

        .ipad .description{left: 250px;top: 25px;}
        .ipad .cd-primary-nav { padding: 0 40px 0 240px;}
      }





      .on-med-only .description{left: 173px;top: 30px;}

/* nav
-------------------------------------*/

/*※ナビゲーション、headerの一部の記述は
「megamenu.css」に記載*/


/* rightnav
-------------------------------------*/
.l-rightMenu{position: absolute;top: 0px;right: 0;}

.l-rightMenu .rightMenu{position: relative;margin: 0;}
.l-rightMenu .rightMenu li{line-height: 1;float: left;padding: 0;
	border-left: 1px solid #000;
}
.l-rightMenu .rightMenu li:first-child{border-left: none;}
.l-rightMenu .rightMenu li a {
	font-size: 11px;
	font-weight: bold;
	color: #000;
	letter-spacing: 1px;
	line-height: 1;
	padding: 0;
	line-height: 1;
	margin:0 10px;
	position: relative;
	display: inline-block;
	text-decoration: none;

}
.l-rightMenu .rightMenu li a:hover{text-decoration: underline;}

.l-rightMenu{display: table;}
.l-rightMenu .rightMenu,.l-rightMenu .google__box,
.l-rightMenu .btn_yoyaku,.l-rightMenu .sns__box{display: table-cell;vertical-align: middle;padding-top: 20px;}

.l-rightMenu .google__box{padding-right: 20px;}
.l-rightMenu .sns__box {padding-right: 30px;}
.l-rightMenu .sns__box a.twitter{padding-right: 5px;}
.l-rightMenu .btn_yoyaku{padding: 8px 40px 8px 20px;
  font-size: 14px;
  letter-spacing: 3px;}
  .on-large-only .l-rightMenu .btn_yoyaku{width: 120px;}

  .l-rightMenu .btn_yoyaku:hover{background: #ed6a00;}
  .l-rightMenu .btn_yoyaku::before{right: 10px;margin-right: 10px;width: 16px;height: 16px;}
  .l-rightMenu .btn_yoyaku::after{right: 16px;margin-right: 10px;width: 6px;height: 6px;}

  .l-rightMenu .btn_yoyaku:hover::before{background: #F18D00;}
  .l-rightMenu .btn_yoyaku.arrowMaru--white:hover::before{background: #fff;}
  .l-rightMenu .btn_yoyaku.arrowMaru--white:hover::after{border-top: 1px solid #F18D00;
    border-right: 1px solid #F18D00;}
    .l-rightMenu .btn_yoyaku:hover::after{border-top: 1px solid #fff;
      border-right: 1px solid #fff;}

      /*search*/
      .inputSearch {
        margin: 0px;
        width: 110px;
        height: 20px;
        color: #999;
        border: 1px solid #000;
        border-radius: 3px;
        padding: 3px 5px;
        vertical-align: middle;
      }
      .btnSearch{vertical-align: middle;}

      @media only screen and (min-width : 768px) and
      (max-width : 1010px)  {
        .l-rightMenu .google__box{padding-right: 5px;}
        .l-rightMenu .sns__box{padding-right: 10px;}
        .l-rightMenu .sns__box a.twitter{padding-right: 2px;}
        .l-rightMenu .rightMenu li a{margin:0 5px;}
      }



      @media only screen and (min-width : 768px) and
      (max-width : 1169px)  {
        .l-rightMenu {right: 20px;}
        .l-rightMenu .rightMenu, .l-rightMenu .google__box, .l-rightMenu .sns__box{padding-top: 20px;}
        .on-large-only .l-rightMenu .btn_yoyaku{width: auto;}
      }



/*---------------------------------------
　　　　-　sp nav
---------------------------------------*/

/* ナビゲーションアイコン */

.spList__txt{
/*position: absolute;
top: 35px;
left: 90%;
transform: translateX(-50%);
-moz-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
width: 140%;*/
position: absolute;
top: 35px;
left: 30%;
transform: translateX(-50%);
-moz-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
width: 100%;
}


/* 予約ボタン
-------------------------------------*/
.spList__yoyakuBtn{
  display: block;
  height: 70px;width: 67px;
  position: absolute;
  top: 0px;
  right: 67px;
  padding:18px;
  background: #F18D00;
  cursor: pointer;
  z-index: 99999;
  text-align: center;
}


.hide-on-large-only2{display: none;}


@media only screen and (max-width: 990px) {
  .hide-on-large-only2{display: block;}
}




#logo img{max-width: 100%;height: auto;}
.spNav .logo{display: inline-block;width: 120px;margin: 6px 10px 0px;}
.spNav .logo img{max-width: 100%;}





/* 2ndnav メニュー部分
-------------------------------------*/

.l-commonNav{border-top: 1px solid #ddd;padding-top: 25px;}
.commonNav{max-width: 1200px;padding: 0px 0px 20px;}
.on-large-only .commonNav__list:nth-of-type(1){padding-left: 0;}
.on-large-only .commonNav__list:nth-of-type(2){padding-right: 0;}

@media only screen and (max-width: 1230px) and (min-width: 768px){
  .commonNav {
    padding: 5px 20px 20px;
    width: 90%;
  }
}


.commonNav__col a{padding: 7px 0 7px 30px;color: #1D2A73;font-size: 15px;position: relative;display: block;}

.commonNav__col a:hover{opacity: .7;}

.commonNav__col a::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 10px;
  margin: auto;
  content: "";
  width: 14px;
  height: 14px;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  background: #1D2A73;
}

.commonNav__col a::after {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  content: "";
  left: 13px;
  width: 6px;
  height: 6px;
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}


.commonNav a.current{background: #EEE;}




/*sp*/

.on-small-only .commonNav__list .secondaryNav__title{font-size: 14px !important;}

.on-small-only .commonNav{padding: 0px 10px 20px;}
.on-med-only .commonNav{padding: 0px 10px 20px;}
.on-small-only .commonNav__list:nth-of-type(2){margin-top: 15px;}

.on-med-only .commonNav__col,
.on-small-only .commonNav__col{margin-left: -12px;margin-right: -12px;}
.on-med-only .commonNav__col a,
.on-small-only .commonNav__col a{font-size: 13px;line-height: 1.3;padding: 7px 0 7px 28px;}

.on-med-only .commonNav__col a::before,
.on-small-only .commonNav__col a::before {top: 8px;bottom: auto;}
.on-med-only .commonNav__col a::after,
.on-small-only .commonNav__col a::after {top: 12px;bottom: auto;}




/******************************************

    index

    *******************************************/

    /*main{background: #ccc;}*/


    .responsive-img{max-width: 100%;height: auto;vertical-align: bottom;}
    .responsive-img2{width: 100%;height: auto;vertical-align: bottom;}

/* operatingArea
-------------------------------------*/

.operatingArea{max-width: 1200px;margin: auto;}



/*タイトル部分*/
.operatingFirst{background: #1D2A73;position: relative;}
.operatingFirst__heading{color: #fff;font-size: 16px;padding: 25px 0;line-height: 1.4;text-align: center;

  position: relative;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit-transform: translateY(-50%) translateX(-50%);
  -ms-transform: translateY(-50%) translateX(-50%);

}

/*sp*/
.on-small-only .operatingFirst__heading,
.on-small-only .operatingBox{display: inline-block;}

.on-small-only .operatingFirst__heading{font-size: 13px;padding: 10px;
  width: 7em;}



  /*各ターミナル運航部分*/
  .operating{background: #F7F8F8;position: relative;}
  .on-large-only .operatingNest__col,.on-med-only .operatingNest__col{position: relative;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    -webkit-transform: translateY(-50%) translateX(-50%);
    -ms-transform: translateY(-50%) translateX(-50%);}

    .on-large-only .operatingNest,
    .on-med-only .operatingNest{height: 73px;padding: 0 20px;}

    .on-large-only .operatingEmergency,
    .on-med-only .operatingEmergency{height: 70px;padding: 0 20px;margin:20px 0;}

    .operatingNest__col p{float: left;
      display: block;
      font-size: 13px;
      font-weight: bold;
      letter-spacing: 2px;
      padding: 2px 5px;
        margin-right: 20px;
    }



    .operatingNest__col .arrowTxt{margin-left: 22px;}

    /*ターミナル案内リンク*/
    .operatingWhite{display: table;}
    .operatingWhite__txt,
    .operatingWhite .l-btn--navyLine{display: table-cell;vertical-align: middle;}
    .on-large-only .operatingWhite .l-btn--navyLine .btn--navyLine{max-width: 300px;}

    .on-large-only .operatingWhite,.on-med-only .operatingWhite{padding: 15px 40px !important;}
    .operatingWhite .operatingWhite__txt{text-align: center;font-size: 11px;color: #58595B;}

    /*.on-large-only .operatingWhite__in{max-width: 80%;}*/




/*運航状況フォントカラー*/
/*平常運航*/.status_green{}
/*運航便なし*/.status_gray{color:#DDD;}
/*欠航*/.status_red{color:red}
/*欠航便あり*/.status_red{color:red}
/*午前欠航便あり*/.status_red{color:red}
/*午後欠航便あり*/.status_red{color:red}
/*夜間欠航便あり*/.status_red{color:red}
/*運休便あり*/.status_blue{color:blue}
/*法定検査運休便あり*/.status_blue{color:blue}
/*ダイヤ乱れあり*/.status_orange{color:orange}
/*お問い合わせください*/.status_brown{color: brown}
/*天候調査中*//*.status_blue{color:skyblue}
/*天候調査中*/.status_blue{color:blue}

#unkou {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  text-align: center;
}
#unkou::after {display: none;}
#unkou dl {
  display: inline-block;
  width: auto;
  min-width: 120px;
  text-align: center;
  font-size: 16px;
  font-weight: 500;
  margin-block-start: 0;
  margin-block-end: 0;
}
#unkou dl dt {
  color: #FFFFFF;
  height: 25px;
  line-height: 25px;
}
#unkou dl.unkou_muroran dt {background: #F77A1E;}
#unkou dl.unkou_hakodate dt {background: #0081CC;}
#unkou dl.unkou_oma dt {background: #6D9631;}
#unkou dl dd {height: 20px;}

  @media only screen and (max-width : 767px){
   
    #unkou {
      justify-content: space-around;
      align-items: flex-start;
    }
#unkou dl {
  padding: 10px 5px;
  min-width: 90px;
  font-size: 14px;
}
#unkou dl dt {
  color: #FFFFFF;
  height: 20px;
  line-height: 20px;
}
#unkou dl dd {
  height: auto;
  padding: 5px 0 0;
  line-height: 1.2;
}
    
    
    
  }



    /*緊急インフォメーション*/
    .emergency{border: 1px solid #C30D23;background: #fff;margin-bottom: 15px;}
    .emergency__heading{background: #C30D23;color: #fff;padding:4px 10px;}
    .emergency p{padding:4px 10px;color: #C30D23;}
.emergencylist{padding:10px;}

    /*sp*/
    .on-small-only .operatingFirst__heading{position: absolute;}
    .on-small-only .operatingNest{margin-bottom: 10px;}
    .on-small-only .operatingNest:first-of-type{margin-top: 15px;}
    .on-small-only .operatingWhite{display: block;padding:20px;}
    .on-small-only .operatingWhite .operatingWhite__txt,
    .on-small-only .operatingWhite .l-btn--navyLine{display: block;margin-top: 3px;}
    .on-small-only .emergency{margin-bottom: 5px;}

    .on-small-only .operatingNest__col p{font-size: 12px;margin-left: 15px;}
    .on-small-only .emergency p{line-height: 1.4;font-size: 11px;}

/* campaignArea
-------------------------------------*/

.l-campaignArea .bnCampaignList li,.l-campaignArea .bnCampaignList .bnCampaignList__heading a{color: #fff;}
.l-campaignArea .bnCampaignList li{margin:0 15px;}
.l-campaignArea .bnCampaignList li img{border: 1px solid #fff;}
.l-campaignArea .bnCampaignList__heading{margin-top: 13px;margin-bottom: 2px;}

.on-large-only .l-campaignArea .slick-dots{display: block;
  position: absolute;
  top: -105px;
  right: -18px;
  width: 100%;
  text-align: right;
  width: auto;
  color: #fff;}

  /*sp*/
  .on-small-only .l-campaignArea{padding-left: 35px;padding-right: 35px;}

  @media only screen and (min-width : 768px) and
  (max-width : 1230px)  {
    .on-large-only .l-campaignArea .slick-dots {right: -25px;}

  }


  /*arrowカスタマイズ*/
  #bnCampaignList__arrow .slick-next{
   content: "";
   position: absolute;
   top: 54%;
   margin: auto;
   right: -30px;
   width: 24px;height: 44px;
   background-image: url(../img/top/campaignlist_arrow_r.svg);background-size:100%;

 }
 #bnCampaignList__arrow .slick-prev{
   content: "";
     display:none;
   position: absolute;
   top: 54%;
   margin: auto;
   left: -30px;
   width: 24px;height: 44px;
   background-image: url(../img/top/campaignlist_arrow_l.svg);background-size:100%;
 }

 .on-small-only #bnCampaignList__arrow .slick-next,
 .on-small-only #bnCampaignList__arrow .slick-prev {background: none;}

 .on-small-only .slick-dots{bottom: -35px;}


 /*ページャーカスタマイズ*/

 .l-campaignArea .slick-dots li button::before {
  border: 1px solid #fff;
}
.l-campaignArea .slick-dots li.slick-active button::before {
	color: #fff !important;}


  .l-campaignArea .slick-dots li.slick-active button::before {
    opacity: 1;
    background: #fff;
  }


  @media only screen and (min-width : 768px) and
  (max-width : 1230px)  {
    .l-campaignArea{padding-left:50px;padding-right:50px;}
  }



/* newsArea
-------------------------------------*/
.newsArea.row{max-width: 1200px;padding-top: 6px;}
.on-large-only .newsAreaBoxL{padding-left: 0;}
.on-large-only .newsAreaBoxR{padding-right: 0;}
.newsArea.row .col{padding: 0 3px;}
.newsArea .newsAreaBox__in{background: #fff;border-radius: 3px;padding:60px 50px 50px;height: 100%;}
.on-large-only .newsArea .newsAreaBox__in .newsList__day{width: 15%;}
.on-large-only .newsArea .newsAreaBox__in .newsList__text{width: 80%;}

/*newsList*/
.newsList__heading{background: #EAF6FD;padding:3px 10px;margin-top: 23px;margin-bottom: 8px;font-size: 12px;}
.newsList li{border-bottom: 1px dashed rgb(204, 204, 204);
  padding-bottom: 12px;
  margin-bottom: 12px;}

  .newsList:last-of-type li:last-child{border-bottom: none;}

  .newsList__day{float: left;width: 10.5%;margin-right: 1.5%;line-height: 1.4;}
  .newsList__text{float: left;width: 88%;line-height: 1.4;}
  .newsList__text a{text-decoration: underline;
color: #49B2E0;
-webkit-transition: all .3s;
transition: all .3s;
-webkit-transition: all all .3s ease;
-moz-transition: all all .3s ease;
-ms-transition: all all .3s ease;
-o-transition: all all .3s ease;
transition: all all .3s ease;}
.newsList__text a:hover{text-decoration: none;}



.on-large-only .topics_entry_date{
    margin-bottom:10px;
    font-weight: bold;
}

.topics_area_body {width:100%;}
.on-small-only .topics_area_body img{max-width:100% !important;height:auto !important;}

.navi .btn__common:before{right: auto;left: 15px;}
.navi .btn__common--blue::before {
    border-bottom: 1px solid #0081CC;
    border-left: 1px solid #0081CC;
    border-top:none;
    border-right: none;
}
.navi .btn__common--blue:hover:before {
    border-bottom: 1px solid #fff;
    border-left: 1px solid #fff;}



*.navi_back,*.navi_next {/*次のページへ*/
    margin:0px 0px 0px 2px; 
    padding-right:13px;  
    background-repeat:no-repeat;
    background-position:right center;
    text-align:right;
    background-color:#f9f9f9;
    border: solid 1px #cdcdcd;
    padding:2px 6px;
    border-radius: 2px;
}

*.navi_page{/*ページ数*/
    color:#6b6b6b;
    background-color:#f9f9f9;
    border: solid 1px #cdcdcd;
    padding:2px 6px;
    margin:0px 2px;
    font-weight:bold; 
    border-radius: 2px;
}

*.navi_page a{ /*詳しくはこちら のリンク設定*/
    text-decoration:none;
    color:#49B2E0;
}

*.navi_page a:link{ /*リンク指定*/
    text-decoration:none;
    color:#49B2E0;
}

*.navi_page a:visited{ /*リンク後指定*/
    text-decoration:none;
    color:#49B2E0;
}

*.navi_page a:active{ /*アクティブリンク指定*/
    text-decoration:none;
    color:#71c8de;
}

*.navi_page a:hover	{ /*ホバ－リンク指定*/
    text-decoration:none;
    color:#71c8de;
}

*.navi_page-topic {/*現在表示中のページ数*/
    color:#FFFFFF;
    background-color:#49B2E0;
    border: solid 1px #cdcdcd;
    padding:2px 6px;
    margin:0px 2px ;
    font-weight:bold; 
    border-radius: 2px;
}



  /*sp*/

  .on-small-only .newsList__day{width: 25%;margin-right: 2%;}
  .on-small-only .newsList__text{width: 73%;}


  .on-med-only .newsList__day{width: 28%;margin-right: 2%;}
  .on-med-only .newsList__text{width: 69%;}
  .on-med-only .newsArea .newsAreaBox__in{padding:30px;}

  .on-small-only .newsArea .newsAreaBox__in{
    padding: 20px;margin-bottom: 5px;

  }
  .on-small-only .l-newsArea .btn--lBlueLine{margin-bottom: 10px;}


/* newsArea-tab(sp)
-------------------------------------*/


.tab__button{overflow:hidden;cursor:pointer;}
.on-med-only .newsAreaBox{width: 50% !important;float: left;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;}

  .on-med-only .newsAreaBoxR{float: right;}

  .on-med-only .newsArea.row{max-width: 100%;padding-top: 6px;}
  .on-med-only div.row.newsArea.tab__contents{width: 100% !important;-webkit-transform: translate3d(0, 0, 0) !important;}



  .on-small-only .l-tabContainer{
   max-width: 100%;
   margin: auto;
   background: #fff;
 }

 .on-small-only .tabContainer{
   overflow-x: auto;
 }
 .on-small-only .tabContainer::-webkit-scrollbar{
   height: 5px;
 }
 .on-small-only .tabContainer::-webkit-scrollbar-track {
   background: #000;
 }
 .on-small-only .tabContainer::-webkit-scrollbar-thumb {
   background: #000;
 }

 .on-small-only .tab,
 .on-med-only .tab{
   /*display: table;*/
   margin-top: 20px;
   text-align: center;
   width: 100%;
   border-bottom: 1px solid #5FB7E1;
 }

 .on-small-only .tab__button{
   /*display: table-cell;*/
   display: inline-block;
   text-align: center;
   vertical-align: middle;
   border: 1px solid #5FB7E1;
   /*border-bottom-width: 4px;*/
   width: 47%;
   margin: 0 3px -1px;
   border-top-left-radius: 3px;
   border-top-right-radius: 3px;
     padding: 7px 15px 6px;
     color: #5FB7E1;
     background: #EFEFEF;
     text-decoration: none;
     font-size: 14px;
     font-weight: bold;
 }

 .on-small-only .tab__button.active{
   /*border-bottom: none;*/
   border-bottom: 1px solid #fff;
 }

 .on-small-only .tab__button.active{
   background: #fff;
 }


.on-small-only .hide{display:none;}


/* enjoyArea
-------------------------------------*/

/*centerItem*/
.centerItem li{margin:0 13px;}
.centerItem .centerItem__in {
  background: #fff;
  padding: 10px 10px 20px;
  position: relative;
  height: 100%;
}
.on-large-only .centerItem .centerItem__in{min-height: 300px;}

.centerItem__heading,.centerItem .centerItem__in p,.centerItem__day{padding-left: 10px;padding-right: 10px;}
.centerItem__heading{font-size: 16px;margin-top: 16px;margin-bottom: 5px;line-height: 1.4;}
.centerItem__day{font-size: 14px;font-weight: bold;margin-top: 5px;}

.centerItem .slick-dots{bottom: -45px;}


/*sp*/
.on-small-only .l-enjoyArea{padding: 30px 0px 45px;}


/* bnArea
-------------------------------------*/
.l-bnArea{padding: 20px 0;}
.bnArea__box{margin: auto;max-width: 1120px;position: relative;}


.bnAreaList .slick-slide {
  margin: 0px 12px;
}

.on-small-only .slick-slide {
    display: flex;
    align-items: center;
}

.on-large-only .bnAreaList li img,.on-med-only .bnAreaList li img{/*height: 50px;*/background: #fff;text-align: center;}
.bnAreaList .slick-slide img {display: inline-block;}
.on-small-only .bnAreaList .slick-slide img{text-align: center;margin:auto;}

@media only screen and (min-width : 768px) and
(max-width : 1230px)  {
  .l-bnArea {padding: 20px 60px;}

  .on-large-only .bnAreaList li img, .on-med-only .bnAreaList li img {
    width: 100%;
    height: auto;
  }
}


.on-large-only .bnAreaList{height: 70px;overflow: hidden;}
.on-large-only .bnAreaList li{width: 200px !important;text-align: center;}
/*.on-large-only .bnArea__box li a{display: block;}*/
.on-large-only .bnAreaList .slick-slide {margin: 9px 12px 0;}


/*arrowカスタマイズ*/
#bnAreaList__arrow .slick-next{
	content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;

  right: -30px;
  width: 24px;
  height: 24px;
  border-top: 1px solid #000;
  border-right: 1px solid #000;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);

}
#bnAreaList__arrow .slick-prev{
	content: "";
    display:none;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;

  left: -30px;
  width: 24px;
  height: 24px;
  border-bottom: 1px solid #000;
  border-left: 1px solid #000;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);

}


/*med*/
.on-med-only .l-bnArea{background: #fff;}

/*sp*/

.on-small-only .l-bnArea{background: #fff;padding: 20px;max-width: 70%;
  margin: auto;}

  .on-small-only .bnAreaList li img{width: 100%;height: auto;}
/*.on-small-only #bnAreaList__arrow .slick-next,
.on-small-only #bnAreaList__arrow .slick-prev{display: none;}*/

/******************************************

    footer

    *******************************************/


    .footer {margin: 90px auto 0;}
    .footer.topFooter {margin: 40px auto 0;}
    .footerBox{max-width: 1200px;margin: auto;}

    @media only screen and (min-width : 768px) and
    (max-width : 1230px)  {
     .footerBox{padding: 0px 20px;}
   }


   .footer .footerLeft,.footer .footerRight{float: left;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin-left: 0;}

    .footer .row .col.m10.footerLeft{width: 86.33333%;padding-left: 0 !important;margin-left: -32px !important;margin-right: -32px;}

    .footer .row .col.m2.footerRight{width: 13.66667%;padding-right: 0 !important;float: right !important;}


    /*sp*/
    .on-med-only .footer,.on-small-only .footer{margin: 40px auto 0;}
    .on-med-only .footer.topFooter,.on-small-only .footer.topFooter {margin: 0px auto;}

/* footerTopNav
-------------------------------------*/

.footerTopNavBox{background: #49B2E0;margin-bottom: 40px;}

.footerTopNav{display: table;max-width: 1200px;width: 100%;
  margin: 0px auto;padding: 15px 0;}
  .footerTopNav li{display: table-cell;border-left: 1px solid #fff;text-align: center;}
  .footerTopNav li:first-child{border-left: none;}
  .footerTopNav li a{color: #fff;display: block;font-weight: bold;font-size: 14px;letter-spacing: 2px;}
  .footerTopNav li a:hover{text-decoration: none;
    opacity: 0.7;
    filter: alpha(opacity=30);}




/* footerList__nav
-------------------------------------*/

.footerList{border-left: 1px solid #898989;}
.row .col.footerList{padding: 0 32px;}
.footerList:first-child{border-left: none !important;}

.footerList .footerList__nav{margin-left: 7px;}
.footerList .footerList__nav li{margin-top: 10px;line-height: 1.5;}
.footerList .footerList__nav li:first-child{margin-top: 0;}
.footerList .footerList__nav li a:hover{opacity: .5;}

/*footerL__heading*/
.footerList__heading{position: relative;padding-left: 27px;margin-bottom: 20px;letter-spacing: 1px;}
.footerList__heading:before{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	display: inline-block;
	width: 22px;
	height: 22px;
}
.icoOtoku:before{background-image: url(../img/all/ico_otoku.svg);background-size:100%;}
.icoEmbarkation:before{background-image: url(../img/all/ico_embarkation.svg);background-size:100%;}
.icoKnow:before{background-image: url(../img/all/ico_know.svg);background-size:100%;}
.icoFun:before{background-image: url(../img/all/ico_fun.svg);background-size:100%;}

/*sp*/

.on-small-only .footerList__heading,
.on-med-only .footerList__heading {
  position: relative;
  padding-left: 27px;
  margin-bottom: 6px;
  letter-spacing: 1px;
}
.on-small-only .footerList__heading::before,
.on-med-only .footerList__heading::before {
  content: "";
  position: absolute;
  top: 25%;left: 14px;
  display: inline-block;
  width: 22px;
  height: 22px;
}


.footerListSp__nav li{padding: 0 !important;border-bottom: 1px solid #fff;}
.footerListSp__nav li:nth-child(odd){border-right: 1px solid #fff;}
.footerListSp__nav li a{background: #49B2E0;color: #fff;padding: 8px 10px;display: block;font-size: 12px;
  font-weight: bold;
  letter-spacing: 1px;}





/* footerR__bn
-------------------------------------*/

.footer .footerRight .footerR__bn li{margin-top: 35px;}
.footer .footerRight .footerR__bn li:first-child{margin-top: 0;}
.footer .footerRight .footerR__bn li img{width: 100%;height: auto;}
.footer .footerRight .footerR__bn li a:hover{opacity: .5;}


/* footer__secondNav
-------------------------------------*/

.footerSecondNav{text-align: center;margin-top: 65px;}
.footerSecondNav li{display: inline-block;font-size: 11px;line-height: 1;text-align: center;border-right: 1px solid #000;}
.footerSecondNav li:first-child{border-left: 1px solid #000;}
.footerSecondNav li a {padding:0 10px;}
.footerSecondNav li a:hover{text-decoration: underline;}

.footerCopy{text-align: center;margin-top: 20px;margin-bottom: 20px;font-size: 11px;}


/*sp*/
.on-small-only .footerSecondNav{margin-top: 20px;padding: 0 20px;}
.on-small-only .footerCopy{margin-top: 15px;margin-bottom: 15px;}
.on-small-only .footerSecondNav li{margin-bottom: 7px;}
.on-small-only .footerSecondNav li a {padding:0 15px;letter-spacing: 1px;}

/* toTop
-------------------------------------*/

.toTop{background: #EAF6FD;text-align: center;padding: 13px;position: relative;text-indent: -9999px;line-height: 1;}
.toTop a:before{
	position: absolute;
  top: 25%;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  content: "";
  width: 14px;
  height: 14px;
  border-top: 1px solid #000;
  border-left: 1px solid #000;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);}

/******************************************

    reservationArea

    *******************************************/

    .l-reservationArea{position: relative;max-width: 1200px;margin:0 auto;}
    .reservationArea{position: absolute;
      top: 55px;
      right: 25px;
      z-index: 1;padding: 20px 20px 26px;width: 320px;height: 410px;border: 5px solid #1D2A73;background: #fff;}

      .reservation--heading{text-align: center;font-size: 20px;margin-bottom: 10px;}





      /*sp*/
      .reservationArea__sp{position: absolute;right: 15px;
        top: 40%;
        transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -webkit-transform: translateY(-50%);z-index: 1;}


        @media only screen and (min-width : 768px) and
        (max-width : 1230px)  {
          .reservationArea{right: 30px;top: 20px;}
        }




/* form
-------------------------------------*/

.route{width: 102%;table-layout: fixed;border-collapse: separate;
  border-spacing: 6px 5px;margin:0 -6px 10px;}
  .route th,.route td{padding: 7px;}

  .route th{border-right: 1px solid #000;border-bottom: 1px solid #000;
    text-align: center;width: 35%;}
    .route td{border: 1px solid #c0c0c0;border-radius: 3px;position: relative;}


    .route td.selectBox:after
    {
      position: absolute;
      top: 0;
      right: 8px;
      bottom: 0;

      width: 0;
      height: 0;
      margin: auto;

      content: '';

      border-top: 4px solid #002D60;
      border-right: 4px solid transparent;
      border-left: 4px solid transparent;
    }
    .route td select{width: 100%;}
    .route__change{width: 30px;cursor: pointer;}


    #DatePicker{cursor: pointer;}



/******************************************

    slider

    *******************************************/

#slider .bnTopList {
    display:none;
}
#slider .bnTopList.slick-initialized {
    display: block;
}
#slider .slick-slide {
    position: relative;
}

#slider .slick-dots{bottom: 15px}
.on-large-only #slider .slick-dots{
    display: block;
    position: absolute;
    top: 475px;
    right: 1230px;
    width: 100%;
    text-align: right;
    color: #fff;
    width: 400px;
}

/*sp*/
.on-small-only #slider{}
.on-small-only .bnTopList{margin-bottom: 30px !important;}
.on-small-only #slider .slick-dots {
    bottom: -20px;
}

@media only screen and (min-width : 768px) and
    (max-width : 1230px)  {
    }

}

#slider .slick-dots li button:before,
#slider .slick-dots li.slick-active button:before {
    color: #49b2df;
    border: 1px solid #49b2df;
}


/* bxslider
-------------------------------------*/

/* スライドショー */

.bx-wrapper {
  margin:0 auto;
  position:relative;
}
.bnTopList {
    margin:0 auto !important;
    position:relative;
}


#slider {
  overflow:hidden;
  position:relative;
  width:100%;
}



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

.ebook_link {
    position: absolute;
    bottom: 50px;
    left: 420px;
    width: 380px;
    text-align: center;
    height: 50px;
    line-height: 50px;
    background-color: #192977;
    color: #fff;
    border-radius: 50px;
    font-size: 1.3em;
}
.on-med-and-down .ebook_link {
    display: none;
}
.ebook_link2 {
    position: absolute;
    left: 350px;
    bottom: 60px;
    height: 40px;
    line-height: 40px;
}
.tugcp_link {
    position: absolute;
    bottom: 50px;
    left: 350px;
    width: 380px;
    text-align: center;
    height: 65px;
    line-height: 50px;
    background-color: #ea6da4;
    color: #fff;
    border-radius: 50px;
    font-size: 1.3em;
}
.on-med-and-down .tugcp_link {
    display: none;
}
.tugcp_link2 {
    bottom: 45px;
    height: 40px;
    line-height: 40px;
}

/*slide3枚*/

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

  .on-large-only #slider__in {
    position:relative;
    left:50%;
    width:3600px;
    margin-left:-1800px;
  }


  .on-large-only #slider__in li {width:auto;}
  .on-large-only #slider .bx-wrapper {height: 517px;}
  .on-large-only #slider .bnTopList {height: 517px;}
  .on-med-and-up #slider .bnTopList {height: 517px;}

  .on-large-only #slideFilterL,.on-large-only #slideFilterR {
    position:absolute;
    top:0;
    width:1200px;
    height:100%;
    opacity:0.6;
    filter:alpha(opacity=60);
    -ms-filter:"alpha( opacity=60 )";
    background:#fff;
  }
  #slideFilterL {left:0;}
  #slideFilterR {right:0;}


}







/* ページャー */
#slider .bx-wrapper .bx-pager {
  padding-top:0px;
  text-align:center;
  font-size:.85em;
  font-family:Arial;
  font-weight:bold;
  color:#666;
}

#slider .bx-wrapper .bx-pager {
  margin:0 auto;
  /*width:1200px;*/
  /*background:#fff;*/
  text-indent: 0;
}

.on-small-only #slider .bx-wrapper .bx-pager{text-indent: 0;
  text-align: center;
  margin-top: 13px;margin-bottom: 15px;
  position: static;
  bottom: 0;
  width: auto;}
  .on-small-only #slider .bx-wrapper .bx-pager.bx-default-pager a {border: 1px solid #00A0E9;}
  .on-small-only #slider .bx-wrapper .bx-pager.bx-default-pager .active{background: #00A0E9;}

  #slider .bx-wrapper .bx-controls-direction a {
    position:absolute;
    top:109px;
    outline:0;
    width:32px;
    height:32px;
    text-indent:-9999px;
    z-index:9999;
  }



  #slider .bx-wrapper .bx-pager .bx-pager-item,
  #slider .bx-wrapper .bx-controls-auto .bx-controls-auto-item {
    display:inline-block;
    *zoom:1;
    *display:inline;
  }

  #slider .bx-wrapper .bx-pager.bx-default-pager a:hover,
  #slider .bx-wrapper .bx-pager.bx-default-pager a.active {
    background:#CCC;
  }

  #slider .bx-wrapper .bx-pager.bx-default-pager a {
    display:block;
    width:10px;
    height:10px;
    margin:0 5px;
    outline:0;
    text-indent:-9999px;
    -moz-border-radius:50%;
    -webkit-border-radius:50%;
    border-radius:50%;
    border: 1px solid #CCC;
  }
  #slider .bx-wrapper .bx-pager-item{display: inline-block;}

  .on-large-only #slider .bx-wrapper .bx-pager,.on-large-only #slider .bx-wrapper .bx-controls-auto {
    position: absolute;
    bottom: 20px !important;
    text-indent: 0 !important;}


    .on-large-only #slider .bx-wrapper .bx-pager, .on-large-only #slider .bx-wrapper .bx-controls-auto{right: 0px;}


    @media only screen and (min-width : 768px) and
    (min-width : 1200px)  {
      .on-large-only #slider .bx-wrapper .bx-pager, .on-large-only #slider .bx-wrapper .bx-controls-auto {
        right: -490px;
      }
    }




    /* コントローラー */
    #slider .bx-wrapper .bx-prev {
      /*left:1035px;*/
      /*background:url(../images/controls.png) no-repeat 0 -32px;*/
      background: none;
    }

    #slider .bx-wrapper .bx-next {
      /*right:1035px;*/
      /*background:url(../images/controls.png) no-repeat -43px -32px;*/
      background: none;
    }

    #slider .bx-wrapper .bx-prev:hover {
      background-position:0 0;
    }

    #slider .bx-wrapper .bx-next:hover {
      background-position:-43px 0;
    }

    #slider .bx-wrapper .bx-controls-direction a {
      position:absolute;
      top:109px;
      outline:0;
      width:32px;
      height:32px;
      text-indent:-9999px;
      z-index:9999;
    }



    #slider .bx-wrapper .bx-pager .bx-pager-item,
    #slider .bx-wrapper .bx-controls-auto .bx-controls-auto-item {
      display:inline-block;
      *zoom:1;
      *display:inline;
    }


/* slick
-------------------------------------*/


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


.slick-dots li{background:transparent;margin: 0 5px !important;}

/*arrow非表示*/
.slick-prev:before, .slick-next:before {
  content:"" !important;
}



/******************************************

    下層

    *******************************************/

/*---------------------------------------
　　　　-　共通
---------------------------------------*/

.btnBox{margin-top: 50px;}
.on-small-only .btnBox{margin-top: 30px;}

.on-small-only .l-colArea .btnBox {
    margin-top: 50px;
}

/* パンくず
-------------------------------------*/

.topicpath{background: #EFEFEF;}
.topicpath ul{max-width: 1200px;margin:0;padding: 8px 20px;}
.on-large-only .topicpath ul{padding: 8px 40px;}
.topicpath ul li{display: inline-block;position: relative;margin-left: 20px;font-weight: bold;letter-spacing: 2px;font-size: 11px;}
.topicpath ul li:before{
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  content: "";
  vertical-align: middle;
  left: -17px;
  width: 8px;
  height: 8px;
  border-top: 1px solid #000;
  border-right: 1px solid #000;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.topicpath ul li:first-child{margin-left: 0;}
.topicpath ul li:first-child:before{
  border-top: none;border-right: none;
}

.on-small-only .topicpath ul li{font-weight: normal;
  letter-spacing: 1px;
  font-size: 8px;}


/*.topicpath ul{white-space:nowrap; text-overflow:ellipsis; overflow:hidden; display:block;}


.on-small-only .topicpath ul{max-width: 90%;position: relative;}

.on-small-only .topicpath ul{max-width: 90%;position: relative;}
.on-small-only .topicpath ul:after{
position: relative;

content: "…";
vertical-align: middle;
bottom: 0;
margin: auto;
right: 0px;
top: -4px;

}*/




/*.topicpath ul.open{white-space:normal; text-overflow:none; overflow:visible;}*/

.topicpath ul li a{text-decoration: underline;}
.topicpath ul li a:hover{text-decoration: none;}




/*@media only screen and (min-width : 768px) and
(max-width : 1230px)  {
  .topicpath ul{padding: 8px 20px;}
}
*/
.on-small-only .topicpath ul,
.on-med-only .topicpath ul{padding: 5px 20px;}






/* ページタイトル
-------------------------------------*/

.pageHeading{font-size: 24px;letter-spacing: 4px;max-width: 1200px;margin:0 auto;padding: 35px 0 40px;}
.pageHeading span{border-bottom: 3px solid #000;
  display: inline-block;}

  @media only screen and (min-width : 768px) and
  (max-width : 1230px)  {
    .pageHeading{padding: 35px 20px 40px;width: 90%;}
  }

.on-med-only .pageHeading{padding: 25px 20px 30px;/*width: 90%;*/}
.on-small-only .pageHeading{font-size: 15px;padding: 15px 20px 20px;}
.on-small-only .pageHeading span {letter-spacing: 2px;border-bottom: 2px solid #000;}

/*グレー線のみの場合*/

.l-pageHeading{border-bottom: 1px solid #ddd;margin-bottom: 80px;}

.on-med-only .l-pageHeading {margin-bottom: 50px;}
.on-small-only .l-pageHeading {margin-bottom: 20px;}




/* table
-------------------------------------*/

/*共通*/
.on-small-only .commonTable__wrapper {
    overflow-x: auto;
    max-width: 770px;
}
.commonTable__wrapper__more {
    display: none;
}
.on-small-only .commonTable__wrapper__more {
    display: block;
    position: relative;
    margin-top: 0.5em;
    display: block;
    padding-right: 15px;
    text-align: right;
    font-size: 12px;
}
.on-small-only .commonTable__wrapper__more:before {
    content: '';
    font-size: 11px;
    width: 12px;
    height: 12px;
    border-top: solid 1px black;
    /* border-right: solid 1px black; */
    transform: rotate(45deg);
    position: absolute;
    bottom: -2px;
    right: 0;
}
.on-small-only .commonTable__wrapper__more:after {
    content: '';
    width: 50px;
    height: 1px;
    border: 0px;
    background-color: black;
    position: absolute;
    bottom: 3px;
    right: -2px;
}
.commonTable{border-collapse: collapse;width: 100%;}

.commonTable th,.commonTable td{
  border:1px solid #9FA0A0;letter-spacing: 2px;font-size: 14px;line-height: 1.4;}

  .commonTable th{padding:7px 10px;}
  .commonTable td{padding: 12px 20px;}

  .commonTable .tableTitle__blue{background: #49B2E0;color: #fff;}


  .on-med-only .commonTable td{padding: 6px 10px;}
  .on-small-only .commonTable th,.on-small-only .commonTable td{letter-spacing: 1px;
    font-size: 11px;
    padding: 5px 6px;
    line-height: 1.3;}


    /*線のみtable*/
    .lineTable{border-collapse: collapse;width: 100%;}
    .lineTable th{text-align: center;/*vertical-align: top;*/width: 20%;padding: 10px 15px;}
    .lineTable td{padding: 10px 25px;}
    .lineTable th,.lineTable td{line-height: 1.5;border-bottom: 1px solid #000;}

    .lineTable--dot th,.lineTable--dot td{border-bottom: 1px dotted #000;}


    .lineTable td img{margin: 7px 0;}


    .lineTable--rLine th{border-right: 1px solid #000;}


    .lineRight{border-right: 1px solid #000;}
    .lineBottomNone{border-bottom: none;}

    .on-small-only .lineTable th{width: 27%;text-align: center;vertical-align: middle;padding: 5px;}
    .on-small-only .lineTable th span{display: block;}
    .on-small-only .lineTable td{padding: 10px 12px;}


    /*線のないtable*/

    .noLineTable th{text-align: left;padding-right: 1em;}
    .noLineTable th,.noLineTable td{line-height: 1.5;padding-top: 2px;padding-bottom: 2px;}

    .on-small-only .noLineTable th{width: 36%;}





/* アコーディオン
-------------------------------------*/

/*レイアウト部分*/

.openCloseBox{margin-bottom: 30px;}
.openCloseBox:last-of-type{margin-bottom: 0;}


.openCloseBox dd{margin-top: 35px;margin-bottom: 60px;}


/*sp*/
.on-small-only .openCloseBox,.on-med-only .openCloseBox{margin-bottom: 15px;}
.on-small-only .openCloseBox dd,
.on-med-only .openCloseBox dd{margin-top: 15px;margin-bottom: 30px;}


/*タイトル部分*/
.openClose__title{
  font-size: 15px;font-weight: bold;letter-spacing: 2px;
  border: 1px solid #1D2A73;
  border-radius: 3px;
  box-shadow:2px 2px 0px 0px #9FA0A0;
  -moz-box-shadow:2px 2px 0px 0px #9FA0A0;
  -webkit-box-shadow:2px 2px 0px 0px #9FA0A0;
  position: relative;}

  .openClose__btn{color: #1D2A73;padding: 15px 20px;display: block;}

  .openClose__btn:before{
    position: absolute;
    /*top: -5px;
    bottom: 0;
    margin: auto;*/
    top: 33%;
transform: translateY(-50%);
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);

    content: "";
    vertical-align: middle;
    right: 20px;
    width: 16px;
    height: 16px;
    border-bottom: 1px solid #1D2A73;
    border-right: 1px solid #1D2A73;
    border-top: none;
    border-left: none;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transition:all .3s;transition:all .3s;-webkit-transition:all all .3s ease;-moz-transition:all all .3s ease;-ms-transition:all all .3s ease;-o-transition:all all .3s ease;transition:all all .3s ease;
  }


  .openClose__btn.active:before{
    /*top: 10px;*/
    /*top: -3px;
    bottom: 0px;*/
    top: 44%;
    -webkit-transform: rotate(225deg);
    transform: rotate(225deg);
  }


  .OPEN .openClose__btn:before{
    border-top: 1px solid #1D2A73;
    border-left: 1px solid #1D2A73;
    border-right: none;
    border-bottom: none;
    /*top: 8px;*/
    top: 43%;
  }

  .OPEN .openClose__btn.active:before{
    /*top: 0px;
    bottom: 0px;*/
    top: 30%;
    -webkit-transform: rotate(225deg);
    transform: rotate(225deg);
  }


  .openClose__title--navy{background: #1D2A73;}
  .openClose__title--navy a{color: #fff;}
  .openClose__title--navy .openClose__btn::before {
    border-top: 1px solid #fff;
    border-left: 1px solid #fff;
  }


  .openClose__title--blueLine{border: 1px solid #49B2E0;}
  .openClose__title--blueLine a{color: #49B2E0;}
  .openClose__title--blueLine .openClose__btn::before {
    border-bottom: 1px solid #49B2E0;
    border-right: 1px solid #49B2E0;
  }
  .OPEN .openClose__title--blueLine .openClose__btn::before {
    border: none;
    border-top: 1px solid #49B2E0;
    border-left: 1px solid #49B2E0;
  }


  .openClose__title--greenLine{border: 1px solid #6D9631;}
  .openClose__title--greenLine a{color: #6D9631;}
  .openClose__title--greenLine .openClose__btn::before {
    border-bottom: 1px solid #6D9631;
    border-right: 1px solid #6D9631;
  }


  .openClose__title--yerrowLine{border: 1px solid #DBB048;}
  .openClose__title--yerrowLine a{color: #DBB048;}
  .openClose__title--yerrowLine .openClose__btn::before {
    border-bottom: 1px solid #DBB048;
    border-right: 1px solid #DBB048;
      border-top: 0px solid;
      border-left: 0px solid;
      
      
  }



 .openClose__title--yerrowBeta{border: 1px solid #DBB048;background: #DBB048;}
  .openClose__title--yerrowBeta a{color: #fff;}
  .openClose__title--yerrowBeta .openClose__btn::before {
    border-bottom: 1px solid #fff;
    border-right: 1px solid #fff;
  }

.OPEN .openClose__title--yerrowBeta .openClose__btn::before {
    border-top: 1px solid #fff;
    border-left: 1px solid #fff;
  border-right: none;
    border-bottom: none;}


  .openClose__data .row{margin-top: 50px;}
  .openClose__data .row:nth-of-type(1){margin-top: 0;}

 


  /*sp*/

  .on-small-only .openClose__data .row{margin-top: 0;}

  .on-small-only .openClose__title{font-size: 13px;text-align: center;line-height: 1.5;}

  .on-small-only .openClose__btn{padding: 15px 10px 30px;}
  .on-small-only .openClose__btn:before{right: 0;
    left: 0;margin: auto;
    bottom: 12px !important;
    top: auto !important;width: 12px;
    height: 12px;}

    .on-small-only .OPEN .openClose__btn:before{
      bottom: 10px !important;}



.on-small-only .openClose__btnR .openClose__btn {
    padding: 15px 45px 12px 15px;
}
.on-small-only .openClose__btnR .openClose__btn::before {
    right: 20px;
    left: auto;
    bottom: 0 !important;
    top: 0 !important;
}





/* 航路別画像タイトル
-------------------------------------*/

.pageImgBox{margin-bottom: 80px;height: 250px;position: relative;}
.pageImgBox .pageImg{max-width: 1200px;margin:0 auto;height: inherit;position: relative;}
.on-large-only .pageImgBox .pageImg__col{display: table;
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
}
.pageImgBox .pageImgCol__heading,.pageImgCol__btn{display: table-cell;}
.on-large-only .pageImgBox .pageImgCol__heading{width: 435px;}

.pageImgBox.pageImg--nos .pageImg__col{right: 20px;}
.pageImgBox.pageImg--tkr .pageImg__col{margin-left: 20px;}

.pageImg--tkr{
  background: url(../img/all/bg_tkr.jpg) no-repeat bottom center;
  -webkit-background-size: cover;
  background-size: cover;}

  .pageImg--nos{
    background: url(../img/all/bg_nos.jpg) no-repeat bottom center;
    -webkit-background-size: cover;
    background-size: cover;}

  .pageImg--muroran{
    background: url(../img/all/bg_muroran.jpg) no-repeat bottom center;
    -webkit-background-size: cover;
    background-size: cover;}

    .pageImgBox.pageImgBox__L{height: 320px;overflow: hidden;}

    .on-large-only .pageImgBox.pageImgBox__L img,
    .on-med-only .pageImgBox.pageImgBox__L img{position: absolute;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      width: 100%;
      height: auto;}


      .on-large-only .pageImgBox.pageImgBox__LBottom img,
      .on-med-only .pageImgBox.pageImgBox__LBottom img{position: absolute;
        bottom: 0%;top: auto;
        left: 50%;
        -webkit-transform: translate(-50%, 0%);
        -ms-transform: translate(-50%, 0%);
        transform: translate(-50%,0%);
        width: 100%;
        height: auto;}



        @media only screen and (min-width: 481px) and (max-width: 1200px) {

          .pageImgBox.pageImgBox__L{height: 250px;}
        }

        .on-med-only .pageImgBox.pageImgBox__L {height: 190px;}

        .on-small-only .pageImgBox.pageImgBox__L {margin-bottom: 20px;}

        .pageImgCol__txt{font-size: 13px;
          font-weight: bold;
          letter-spacing: 2px;
          margin-top: 5px;}





          @media only screen and (min-width : 768px) and(max-width : 1230px)  {
            .pageImgBox .pageImg{padding: 0 20px;}
          }

          /*med*/
          .on-med-only .pageImgBox{margin-bottom: 50px;}
          .on-med-only .pageImgBox .pageImg__col{
            display: table;
            position: absolute;
            top: 35%;
            transform: translateY(-50%);
            -moz-transform: translateY(-50%);
            -webkit-transform: translateY(-50%);
          }

          /*sp*/
          .on-small-only .pageImg__col,.on-med-only .pageImg__col{padding: 12px 20px;}
          .on-small-only .pageImgBox{margin-bottom: 40px;height: 186px;}
.on-small-only .pageImgBox.pageImgBox__L{/*height: 108px;*/height: auto;}


          .on-small-only .pageImg--tkr{
            background: url(../img/all/bg_tkr_sp.jpg) no-repeat bottom center;
            -webkit-background-size: 100% auto;
            background-size: 100% auto;}

            .on-small-only .pageImg--nos{
              background: url(../img/all/bg_nos_sp.jpg) no-repeat bottom center;
              -webkit-background-size: 100% auto;
              background-size: 100% auto;}

          .on-small-only .pageImg--muroran{
            background: url(../img/all/bg_muroran_sp.jpg) no-repeat bottom center;
            -webkit-background-size: 100% auto;
            background-size: 100% auto;}


              .on-small-only .pageImgCol__heading img{max-width: 85%;height: auto;}
              .on-small-only .pageImgCol__btn img{max-width: 95%;height: auto;}

              .on-small-only .pageImgCol__txt {
                font-size: 11px;
                letter-spacing: 1px;
                margin-top: 6px;
              }


/* タブタイトル
-------------------------------------*/

.tabHeading{
  /*display: table;*/width: 100%;text-align: center;
  display: flex;
  justify-content: space-around;
  align-items: stretch;
}
.tabHeading--blue{border-bottom: 5px solid #0081CC;}
.tabHeading--green{border-bottom: 5px solid #6D9631;}
.tabHeading--orange{border-bottom: 5px solid #F77A1E;}

.tabHeading .tab__col{display: inline-block;
  text-align: center;
  vertical-align: middle;
  width: 49%;
  margin: 0 2px -1px;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;letter-spacing: 3px;
  font-weight: bold;
}
.tabHeading .tab__col.tab__col03 {width: 32.5%;}
.tabHeading .tab__col a{color: #fff;display: block;padding: 20px 5px 15px;font-size: 18px;height:100%;}

@media screen and (max-width : 1100px)  {
  .tabHeading .tab__col a{font-size: 16px;}
  .tabHeading .tab__col a span {display:block;margin: 0 20px;}
}

.tabHeading .tab__col span.tab--small{font-size: 65%;letter-spacing: 2px;font-weight: normal;position: relative;}

/*.tabHeading .tab__col span.tab--arrow{margin-left: 0.8em;}
.on-large-only .tabHeading .tab__col span.tab--arrow{padding-left: 1.2em;}*/
.tabHeading .tab__col.tab--orange{
  background: #F77A1E;
  border: 1px solid #F77A1E;
  border-bottom-width: 0px;
}

.tabHeading .tab__col.tab--blue{
  background: #0081CC;
  border: 1px solid #0081CC;
  border-bottom-width: 0px;
}

.tabHeading .tab__col.tab--green{
  background: #6D9631;
  border: 1px solid #6D9631;
  border-bottom-width: 0px;
}

.tabHeading .tab__col span.tab--arrow{position: relative;}

.tabHeading .tab__col span.tab--arrow::before{
  position: absolute;
  top: 6px;
  left: 1px;
  margin: auto;
  content: "";
  vertical-align: middle;
  width: 0.8em;
  height: 0.8em;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  background: #fff;
}
.tabHeading .tab__col.tab--blue span.tab--arrow::after{
  position: absolute;
  left: 6px;
  top: 13px;
  content: "";
  vertical-align: middle;
  width: 8px;
  height: 8px;
  border-top: 1px solid #0081CC;
  border-right: 1px solid #0081CC;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.tabHeading .tab__col{
  position: relative;
  display: inline-block;
  /*padding: 0 0 0 16px;*/
  color: #fff;
  vertical-align: middle;
  text-decoration: none;

}


/*sp*/

.on-small-only .tabHeading .tab__col,
.on-med-only .tabHeading .tab__col{width: 46%;font-size: 13px;font-weight: normal;letter-spacing: 2px;line-height: 1.4;}

.on-med-only .tabHeading .tab__col a,
.on-small-only .tabHeading .tab__col a{padding: 10px 0 9px;font-size: 12px;margin: 0 0 -1px;}

.on-small-only .tabHeading .tab__col.tab--blue span.tab--arrow::after {
  position: absolute;
  left: 3px;
  top: 9px;
  content: "";
  vertical-align: middle;
  width: 5px;
  height: 5px;
  border-top: 1px solid #0081CC;
  border-right: 1px solid #0081CC;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}


.on-med-only .tabHeading .tab__col span.tab--small,
.on-small-only .tabHeading .tab__col span.tab--small{font-size: 80%;
  letter-spacing: 0px;}
  .on-small-only .tabHeading .tab__col span.tab--small{display: block;}


  .on-small-only .tabHeading .tab__col,
  .on-med-only .tabHeading .tab__col{width: 47%;font-size: 13px;font-weight: normal;letter-spacing: 2px;line-height: 1.4;}
  .on-small-only .tabHeading .tab__col.tab__col03,
.on-med-only .tabHeading .tab__col.tab__col03 {width:32%;;letter-spacing: 0px;margin:0;}

  .on-small-only .tabHeading .tab__col.tab__col03 span,
.on-med-only .tabHeading .tab__col.tab__col03 span {margin: 0;}





  .arrow1{
    position: relative;
    display: inline-block;
    vertical-align: middle;
    text-decoration: none;
    margin-left: 1em;
  }
  .arrow1::before,
  .arrow1::after{
    position: absolute;
    top: 0;
    bottom: 0;
    left: -1.4em;
    margin: auto;
    content: "";
    vertical-align: middle;
  }


  .tabArrow::before{
    width: 12px;
    height: 12px;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    background: #fff;
  }
  .tabArrow::after{
    left: -1.2em;
    width: 5px;
    height: 5px;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  .tab--orange .tabArrow::after{
    border-top: 1px solid #CCC;border-right: 1px solid #CCC;
  }
  .tab--blue .tabArrow::after{
    border-top: 1px solid #0081CC;border-right: 1px solid #0081CC;
  }
  .tab--green .tabArrow::after{
    border-top: 1px solid #6D9631;border-right: 1px solid #6D9631;
  }


  .on-large-only .tabArrow::before{
    width: 20px;
    height: 20px;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    background: #fff;
  }
  .on-large-only .tabArrow::after{
    left: -1.2em;
    width: 8px;
    height: 8px;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  .on-small-only .arrow1::before,
  .on-small-only .arrow1::after,
  .on-med-only .arrow1::before,
  .on-med-only .arrow1::after{
    left: 0.1em;
  }
  .on-small-only .tabArrow::after,
  .on-med-only .tabArrow::after{
    left: 0.3em;
  }




/* わんこ対応船舶周り
-------------------------------------*/

.on-large-only .taiouList{display: table;table-layout: fixed;margin-top: 40px;}
.on-large-only .taiouList ul{display: table;
  width: 100%;
  table-layout: fixed;}
  .on-large-only .taiouList .taiouList__title,.taiouList li{display: table-cell;line-height: 1;}
  .on-large-only .taiouList li{border-right: 1px solid #000;text-align: center;font-size: 14px;}
  .on-large-only .taiouList li a{color: #49B2E0;}

  .on-large-only .taiouList li.taiouList--green a {
    color: #6D9631;
  }
  .on-large-only .taiouList li.taiouList--orange a {color: #F77A1E;}


  .on-large-only .taiouList .taiouList__title {
    position: relative;
    background: #fff;
    width: 12%;
  }
  .on-large-only .taiouList .taiouList__title span:after,.on-large-only .taiouList .taiouList__title span:before {
    left: 100%;
    top: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
  }

  .on-large-only .taiouList .taiouList__title span:after {
    border-color: rgba(136, 183, 213, 0);
    border-left-color: #fff;
    border-width: 26px;
    margin-top: -26px;
  }
  .on-large-only .taiouList .taiouList__title span:before {
    border-color: rgba(0, 0, 0, 0);
    border-left-color: #000;
    border-width: 28px;
    margin-top: -28px;
  }


  .taiouList .taiouList__title span{font-weight: bold;display: block;}


  .on-large-only .taiouList .taiouList__title span{
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    padding: 20px;
    border-bottom: 2px solid #000;border-top: 2px solid #000;border-left: 2px solid #000;
  }


  .on-large-only .taiouList a{font-weight: bold;display:block; width:100%; height:100%;padding: 20px 0;}


  /*sp*/

  /*small*/
  .on-small-only .taiouList .taiouList__title,
  .on-med-only .taiouList .taiouList__title{padding: 0 3px !important;margin: 15px 0 10px;}

  .on-small-only .taiouList .taiouList__title span,
  .on-med-only .taiouList .taiouList__title span{text-align: center;position: relative;
    background: url(../img/all/sankaku_bottom.svg) no-repeat left bottom;
    -webkit-background-size: cover;
    background-size: cover;
    width: 100%;}

    .on-small-only .taiouList .taiouList__title span{padding: 5px 5px 10px;border-top: 1px solid #595757;}
    .on-med-only .taiouList .taiouList__title span{padding:11px 10px 25px;border-top: 2px solid #595757;}



    .on-small-only .taiouList,
    .on-med-only .taiouList{margin-left: -3px;margin-right: -3px;}

    .on-small-only .taiouList li,
    .on-med-only .taiouList li {
      position: relative;
      text-align: left;
      display: inline-block;
      font-size: 12px;
      letter-spacing: 1px;
      font-weight: bold;
      margin-bottom: 6px;
      width: 50%;
      padding: 0 3px !important;
    }
    .on-small-only .taiouList li a,
    .on-med-only .taiouList li a{color: #fff;background: #0081CC;padding: 10px;display: block;border-radius: 3px;position: relative;}

    .on-small-only .taiouList li.taiouList--green a,
    .on-med-only .taiouList li.taiouList--green a{background: #6D9631;}

    .on-small-only .taiouList li.taiouList--orange a,
    .on-med-only .taiouList li.taiouList--orange a{background: #F77A1E;}

    .on-small-only .taiouList li a::before,
    .on-med-only .taiouList li a::before {
      position: absolute;
      top: 0;bottom: 0;
      margin: auto;
      content: "";
      vertical-align: middle;
      right: 11px;
      left: auto;
      width: 8px;
      height: 8px;
      border-top: 1px solid #fff;
      border-right: 1px solid #fff;
      -webkit-transform: rotate(45deg);
      transform: rotate(45deg);
    }



    .hoverImg--figure{position: relative;}

    .hoverTxt .figure a::before,
    .hoverImg--figure a::before {
      content: "";
      position: absolute;
      bottom: 0;
      top: 50%;
      left: 50%;
      transform: translateY(-50%) translateX(-50%);
      -webkit-transform: translateY(-50%) translateX(-50%);
      -ms-transform: translateY(-50%) translateX(-50%);
      width: 50px;
      height: 50px;
      background-image: url(../img/all/ico_zoom.png);
      background-size: 100%;
    }


/* step
-------------------------------------*/

.stepBox{
  position: relative;
  text-align: center;
  background-color: #EFEFEF;
  height: 100%;
}

.stepBox--blue{background: #DFF2FC;}
.row .col.stepBox__in--R {
  border-top: 10px solid #EFEFEF;
  border-right: 10px solid #EFEFEF;
  border-bottom: 10px solid #EFEFEF;padding:20px 25px;}


  .on-small-only .stepBox,.on-med-only .stepBox{
    padding: 8px 0 3px;
  }
  .on-large-only .stepBox__in{
    line-height: 1.1;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }

  .row .col.stepBox__in--R.stepBox__in--blueR{
    border-top: 10px solid #DFF2FC;
    border-right: 10px solid #DFF2FC;
    border-bottom: 10px solid #DFF2FC;
  }


  .row .col.stepBox__in--R h3{    color: #49B2E0;
    font-size: 16px;
    margin-bottom: 15px;
    letter-spacing: 2px;
  }
  .on-small-only .row .col.stepBox__in--R h3{line-height: 1.5;}



  main .container .row .col.stepBox__in--R p{margin-bottom: 0;}

  .stepBox__in .no{display: block;font-size: 34px;font-weight: bold;}

  .downArrow{
    width: 20px;
    height: 20px;
    border: 20px solid transparent;
    border-left: 15px solid #999;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    display: block;
    margin: 15px auto -5px;
  }



  /*sp*/

  .on-small-only .row .col.stepBox__in--R,
  .on-med-only .row .col.stepBox__in--R{
    border: 5px solid #EFEFEF;
    padding: 15px 20px;}


    .on-small-only .row .col.stepBox__in--blueR,
    .on-med-only .row .col.stepBox__in--blueR{
      border: 5px solid #DFF2FC;
      padding: 15px 20px;}


      .on-small-only .row .col.stepBox__in--R h3,
      .on-med-only .row .col.stepBox__in--R h3{font-size: 14px;margin-bottom: 10px;text-align: center;}


      .on-small-only .stepBox__in,.on-med-only .stepBox__in
      {vertical-align: middle;line-height: 1.1;margin-bottom: 0 !important;}
      .on-small-only .stepBox__in .no,
      .on-med-only .stepBox__in .no{display: inline-block;margin-left: 5px;font-size: 24px;}

      .on-small-only .downArrow,.on-med-only .downArrow{
        width: 20px;
        height: 20px;
        border: 20px solid transparent;
        border-left: 15px solid #999;
        margin: 10px auto -10px;
        margin: 10px auto -10px;
      }


      .on-small-only .stepBox__in--R img{margin-top: 10px;}



/* ラベル部分
-------------------------------------*/

/* NEW 左上に表示 */
.triangle__new::before {
    content: "";
    top: 0;
    left: 0;
    border-bottom: 4em solid transparent;
    border-left: 4em solid #C30D23; /* ラベルの色はここで変更 */
    position: absolute;
    z-index: 1;
}
.triangle__new::after {
    content: "New";
    display: block;
    top: 6px;
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    color: #fff; /* 文字色はここで変更 */
    left: 3px;
    position: absolute;
    z-index: 2;
}

/* カード
-------------------------------------*/

.col4Card__top{position: relative;}
.col4Card__in{background: #EBEBEC;height: 100%;}

.col4Card__heading{background: #49B2E0;font-size: 14px;line-height: 1.5;}
.col4Card__heading a{display: block;color: #fff;padding: 8px 15px;}

.col4Card__txt{padding: 10px 15px;margin-bottom: 0 !important;}

/*sp*/
.on-small-only .col4Card__top:before{width: 25px;height: 25px;}
.on-small-only .col4Card {margin-top: 14px;}
.on-small-only .col4Card__txt {padding: 8px 10px;font-size: 11px;line-height: 1.7;}


/* 画像リスト（安全への取り組み safety01 など）
-------------------------------------*/
/*.imgColList{margin-bottom: 30px;}*/


.on-small-only .l-imgColList .txtHeadingSS{margin-top: 0;}


/* ferrypon,“わんこ”とおでかけ♪おすすめスポットガイド
-------------------------------------*/

/*---------------------------------------
　　　　-　共通・一覧
---------------------------------------*/
/*枠*/
.spotList .spot__in.row.row16i{margin-left: 0 !important;margin-right: 0 !important;}

.spot__in{background: #F7F8F8;height: 100%;position: relative;
  padding: 10px 45px 15px 25px;
-webkit-transition:all .3s;transition:all .3s;-webkit-transition:all all .3s ease;-moz-transition:all all .3s ease;-ms-transition:all all .3s ease;-o-transition:all all .3s ease;transition:all all .3s ease;}

.spot__in p{line-height: 1.4;font-size: 12px;}



.spotList{margin-top: 20px;}
.on-large-only .spotList:nth-of-type(-n+2),
.on-small-only .spotList:nth-of-type(1),
.on-med-only .spotList:nth-of-type(1){margin-top: 0px;}

.on-large-only .openCloseBox--gas .spotList:nth-of-type(2){margin-top: 20px;}

/*枠 arrow*/
.spotList .spot__in:before{content: "";position: absolute;right: 0;top: 0;background: #DBB048;width: 30px;height: 100%;z-index: 1;}

.spotList .spot__in:after{
  content: "";
    position: absolute;
    right: 11px;
    left: auto !important;
top: 45%;
transform: translateY(-50%);
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
    width: 10px;
    height: 10px;
    border-top: 1px solid #fff;
    border-right: 1px solid #fff;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    z-index: 2;
}

    /*sp*/
    .on-small-only .spotList .spot__in:before{width: 20px;}
    .on-small-only .spotList .spot__in:after{right: 7px;}


/*タイトル*/

.heading__spot{position: relative;
padding: 0px 15px 5px;line-height: 1.4;border-bottom: 1px solid #C9CACA;margin: 0px -25px 20px;font-size: 15px;}

     .on-small-only .heading__spot{padding: 0px 25px 5px 15px;font-size: 14px;}






/*特殊タイトル*/

.heading__subSpot{background: #DBB048;color: #fff;margin: 15px 0 5px;padding: 1px 10px;
font-size: 12px;display: inline-block;}


.heading__subSpot--lineBlue{background: none;border: 1px solid #0081CC;color: #0081CC;}



/*特殊テキスト*/

.txt__subSpot{font-weight: bold;letter-spacing: 2px;}



/*---------------------------------------
　　　　-　詳細
---------------------------------------*/



/*枠*/
.l-spotBox{background: #F7F8F8;padding:0 80px 80px;margin-bottom: 40px;}
.heading__spotBox{color: #fff;padding: 20px 80px;margin: 0 -80px 45px;letter-spacing: 2px;position: relative;line-height: 1.4;font-size: 20px;}



.subBox{padding: 40px;margin-top: 25px;}

.heading__subBox{font-size: 16px;color: #DBB048;margin-top: 30px;line-height: 1.5;}
.heading__subBoxIn{
    font-size: 13px;
    border: 1px solid #DBB048;
color: #DBB048;
margin: 0px 15px 5px 0;
padding: 2px 7px;
/*display: inline-block;*/
width: 110px;
float: left;
text-align: center;
}

.on-small-only .heading__subBoxIn{float: none;}

.subBox p{clear: both;margin-top: 10px;}

.heading__subBox--blue{color: #0081CC;}
.heading__subBox--blue .heading__subBoxIn{border: 1px solid #0081CC;color: #0081CC;}



.heading__subBox:nth-of-type(1){margin-top: 0;}



/*med*/
  .on-med-only .l-spotBox{padding:0 40px 40px;}
  .on-med-only .heading__spotBox{padding: 20px 40px;margin: 0 -40px 45px;font-size: 16px;}

    /*sp*/
     .on-small-only .l-spotBox{padding: 0 20px 15px;margin-bottom: 30px;}
     .on-small-only .heading__spotBox{padding: 10px 15px;margin: 0 -20px 15px;font-size: 14px;}
     .on-small-only .subBox {padding: 25px;margin-top: 20px;}
     .on-small-only .heading__subBox {font-size: 14px;line-height: 1.5;margin-bottom: 10px;}
     .on-small-only .heading__subBoxIn{margin: 0px 0px 10px;display: block;text-align: center;}


/*table*/
.infoTable {
    border-collapse: collapse;
    width: 100%;
    border-top: 1px solid #000;
}
.infoTable th, .infoTable td {
    line-height: 1.3;
    border-bottom: 1px solid #000;
}
.infoTable th {
    text-align: center;
    vertical-align: middle;
    width: 30%;
    padding: 8px 10px;
    background: #fff;
}
.infoTable td{padding: 6px 0 6px 10px;}


/*map*/
.on-small-only .spotBox .spotBox__inR1,
.on-small-only .spotBox .spotBox__inR2,
.on-med-only .spotBox .spotBox__inR2{margin-top: 20px;}


/*戻るボタンarrowの向き*/

#dogspot_single .btn__common:before {right: auto;left: 15px;}
#dogspot_single .btn__common--yellow::before {
   border-bottom: 1px solid #DBB048;
   border-left: 1px solid #DBB048;
    border-top:none;
    border-right: none;
}
#dogspot_single .btn__common--yellow:hover:before {
   border-bottom: 1px solid #fff;
   border-left: 1px solid #fff;}

#ferrypon_single .btn__common:before,
.reportSingle .btn__common:before {right: auto;left: 15px;}
#ferrypon_single .btn__common--blue::before,
.reportSingle .btn__common--blue::before {
   border-bottom: 1px solid #0081CC;
   border-left: 1px solid #0081CC;
    border-top:none;
    border-right: none;
}
#ferrypon_single .btn__common--blue:hover:before,
.reportSingle .btn__common--blue:hover:before  {
   border-bottom: 1px solid #fff;
   border-left: 1px solid #fff;}


/*タイトルのアイコン*/
.icoWankoBox{position: absolute;right: 70px;}
.icoWankoBox img{margin-right: 10px;}
/*.on-med-only .icoWankoBox{right: 30px;}*/
.on-med-and-down .icoWankoBox{position: static;display: block;margin-bottom: 5px;}
.on-med-and-down .icoWankoBox img{width: 100px;height: auto;}

.on-med-and-up #dogspot .icoWankoBox{right: 40px;}



/* バックナンバー
-------------------------------------*/

.imgList .heading__imgList{line-height: 1.3;font-size: 14px;margin-bottom: 6px;}

.imgList li{margin-top: 45px;}
.on-med-and-down .imgList li,
.on-small-only .openClose__data .row.imgList li{margin-top: 30px;}

  .on-large-only .imgList li:nth-of-type(-n+4),
  .on-med-only .imgList li:nth-of-type(-n+2){margin-top: 0px;}

  .on-small-only .openClose__data .row.imgList li:nth-of-type(1){margin-top: 10px;}

.imgList .col p{font-size: 11px;line-height: 1.5;margin-bottom: 11px;}


/* 2019年9月5日更新
-------------------------------------*/

.indent {
    text-indent:-0.8em;
}

/* 2019年12月4日更新
-------------------------------------*/

@media screen and (min-width: 768px){	
  .pc { display:block; }
  .sp { display:none; }
}
@media screen and (max-width: 768px){	
  .pc { display:none; }
  .sp { display:block; }
}


/* 2020年6月3日更新
-------------------------------------*/

.annotation {
    position: relative;
}
.annotation:after {
    position: absolute;
    content: '※';
    color: #C30D23;
    top: -0.5em;
    right: -1.5em;
}
.on-small-only .annotation:after {
    font-size: 80%;
    right: -1.2em;
}

.annotation_br {
    margin-left: 1em;
}

/* 2020年12月22日更新
-------------------------------------*/
/* text-align
========================================= */
.tal {text-align: left !important;}
.tac {text-align: center !important;}
.tar {text-align: right !important;}
.taj {text-align: justify !important;}

@media screen and (max-width: 959px) {
    .sp-tal {text-align: left !important;}
    .sp-tac {text-align: center !important;}
    .sp-tar {text-align: right !important;}
    .sp-taj {text-align: justify !important;}
}


* block
========================================= */
.block {
    display: block !important;
}
.iblock {
    display: inline-block !important;
}
.flex{
    display: -webkit-box;  /* この辺が */
    display: -webkit-flex; /* Android2.3~とか */
    display: -ms-flexbox; /* IE9~用 */
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
.iflex{
    display: inline-flex !important;
}
.flex-start {
    justify-content: flex-start !important;
}
.flex-end {
    justify-content: flex-end !important;
}
.center-flex{
    display: -webkit-box;  /* この辺が */
    display: -webkit-flex; /* Android2.3~とか */
    display: -ms-flexbox; /* IE9~用 */
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}
.vmiddle-flex{
    display: -webkit-box;  /* この辺が */
    display: -webkit-flex; /* Android2.3~とか */
    display: -ms-flexbox; /* IE9~用 */
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
}
static{position: static;}
.rel, .relative{position: relative;}
.abs, .absolute{position: absolute;}
.fixed{position: fixed !important;}
.center-abs{
    position: absolute;
    top: 50%;
    left: 50%;
    right: auto !important;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    z-index: 100;
}
.center-abs2{
    position: absolute;
    left: 50%;
    right: auto !important;
    transform: translate(-50%, 0%);
    -webkit-transform: translate(-50%, 0%);
    -ms-transform: translate(-50%, 0%);
    z-index: 100;
}

/* 960px以下用の記述
========================================= */
@media screen and (max-width: 959px) {
    .center-flex{
        display: -webkit-box;  /* この辺が */
        display: -webkit-flex; /* Android2.3~とか */
        display: -ms-flexbox; /* IE9~用 */
        display: flex;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
    }
    .vmiddle-flex{
        display: -webkit-box;  /* この辺が */
        display: -webkit-flex; /* Android2.3~とか */
        display: -ms-flexbox; /* IE9~用 */
        display: flex;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center;
    }
}
@media screen and (max-width: 767px) {
    .sp-mauto {margin-left: auto !important;margin-right: auto !important;}
    .sp-m00 {margin: 0 !important;}
    .sp-mb {margin-bottom: 1.5em !important;}
    .sp-mb00 {margin-bottom: 0 !important;}
    .sp-mb05 {margin-bottom: 5px !important;}
    .sp-mb08 {margin-bottom: 8px !important;}
    .sp-mb10 {margin-bottom: 10px !important;}
    .sp-mb15 {margin-bottom: 15px !important;}
    .sp-mb20 {margin-bottom: 20px !important;}
    .sp-mb25 {margin-bottom: 25px !important;}
    .sp-mb30 {margin-bottom: 30px !important;}
    .sp-mb35 {margin-bottom: 35px !important;}
    .sp-mb40 {margin-bottom: 40px !important;}
    .sp-mb45 {margin-bottom: 45px !important;}
    .sp-mb50 {margin-bottom: 50px !important;}
    .sp-mb60 {margin-bottom: 60px !important;}
    .sp-mb70 {margin-bottom: 70px !important;}
    .sp-mb80 {margin-bottom: 80px !important;}
    .sp-mb90 {margin-bottom: 90px !important;}
    .sp-mb100 {margin-bottom: 100px !important;}
    .sp-mt {margin-top: 1.5em !important;}
    .sp-mt00 {margin-top: 0 !important;}
    .sp-mt05 {margin-top: 5px !important;}
    .sp-mt08 {margin-top: 8px !important;}
    .sp-mt10 {margin-top: 10px !important;}
    .sp-mt15 {margin-top: 15px !important;}
    .sp-mt20 {margin-top: 20px !important;}
    .sp-mt25 {margin-top: 25px !important;}
    .sp-mt30 {margin-top: 30px !important;}
    .sp-mt35 {margin-top: 35px !important;}
    .sp-mt40 {margin-top: 40px !important;}
    .sp-mt45 {margin-top: 45px !important;}
    .sp-mt50 {margin-top: 50px !important;}
    .sp-mt60 {margin-top: 60px !important;}
    .sp-mt70 {margin-top: 70px !important;}
    .sp-mt80 {margin-top: 80px !important;}
    .sp-mt90 {margin-top: 90px !important;}
    .sp-mt100 {margin-top: 100px !important;}


    .sp-ml00 {margin-left: 0 !important;}
    .sp-ml05 {margin-left: 5px !important;}
    .sp-ml08 {margin-left: 8px !important;}
    .sp-ml10 {margin-left: 10px !important;}
    .sp-ml15 {margin-left: 15px !important;}
    .sp-ml20 {margin-left: 20px !important;}
    .sp-ml25 {margin-left: 25px !important;}
    .sp-ml30 {margin-left: 30px !important;}
    .sp-ml35 {margin-left: 35px !important;}
    .sp-ml40 {margin-left: 40px !important;}
    .sp-ml45 {margin-left: 45px !important;}
    .sp-ml50 {margin-left: 50px !important;}

    .sp-mr00 {margin-right: 0 !important;}
    .sp-mr05 {margin-right: 5px !important;}
    .sp-mr08 {margin-right: 8px !important;}
    .sp-mr10 {margin-right: 10px !important;}
    .sp-mr15 {margin-right: 15px !important;}
    .sp-mr20 {margin-right: 20px !important;}
    .sp-mr25 {margin-right: 25px !important;}
    .sp-mr30 {margin-right: 30px !important;}
    .sp-mr35 {margin-right: 35px !important;}
    .sp-mr40 {margin-right: 40px !important;}
    .sp-mr45 {margin-right: 45px !important;}
    .sp-mr50 {margin-right: 50px !important;}
}
/* 480px以下用の記述
========================================= */
@media screen and (max-width: 479px) {
    .flex{display: block;}
    .sp-flex{display: flex;}
}