@charset "utf-8";

/*フォント：Noto Sans JP/ Interの読み込み*/
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Noto+Sans+JP:wght@100..900&display=swap');

/* CSS 共通 
---------------------------------------*/
#willerferrycontents * {
  font-family:"notosanjp", sans-serif;
  line-height: 1.6;
}
#tx-page h1 {
  border-left: 10px solid #8dc4e0;
  padding: 0px 20px 0;
  font-size: 24px;
  margin-bottom: 15px;
  margin-top: 15px;
}
#willerferrycontents {
  width: 100%;
  padding-bottom: 30px;
  color: #000;
  margin: auto;
}
#willercontents > p,#willercontents dt,#willercontents dd,#willercontents li,#willercontents span {
  font-size: 16px;
}
#willerferrycontents img {
  border: 0px;
  vertical-align: top;
  max-width: 100%;
  height: auto;
  -webkit-backface-visibility: hidden;
}

/*見出し*/
#willerferrycontents h1, 
#willerferrycontents h2, 
#willerferrycontents h3, 
#willerferrycontents h4, 
#willerferrycontents h5 {
  font-size: 100%;
  font-weight: bold;
}
#willerferrycontents h3,
#willerferrycontents h3 img{
  text-align: center;
}
#willerferrycontents h3 + p{
  text-align: center;
  margin-bottom: 50px;
}

/*txt*/
#willerferrycontents .txt-bold{
	font-weight: bold;
}
#willerferrycontents .txt-small {
  font-size: 14px;
}
#willerferrycontents .txt-center {
    text-align: center;
}
#willerferrycontents .txt-kome {
  display: inline-block;
  position: relative;
  padding-left: 16px;
}
#willerferrycontents .txt-kome:before {
    content: '・';
    position: absolute;
    left: 0;
}

/* marker */
#willerferrycontents .marker-yellow {
  background: linear-gradient(transparent 70%, #EFDB9E 85%);
}

/* color */
#willerferrycontents .color-red {
    color: #D20909;
}

/* font */
#willerferrycontents .font-bold {
    font-weight: bold !important;
}


/* btn */
#willerferrycontents .btn-main {
  background: #FFF;
  box-shadow: 0 0 0 2px #1C1C1C inset;
  border-radius: 10px;
  color: #1C1C1C;
  display: block;
  width: 420px;
  margin: 0 auto;
}
#willerferrycontents .btn-main span {
  background: #F678A9;
  border: solid 2px #1C1C1C;
  border-radius: 10px;
  color: #fff;
  padding: 11px 20px 12px 10px;
  position: relative;
  display: block;
  text-align: center;
  top: -8px;
  left: -8px;
  font-weight: 700;
  font-size: 20px;
}
#willerferrycontents .btn-main span:before {
  content: "";
  background: url("../img/willer-ferry/ic-arrow-r.png") no-repeat center/100%;
  background-size: contain;
  width: 12px;
  height: 20px;
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  right: 96px;
  font-weight: bold;
}
#willerferrycontents .btn-main:hover {
  text-decoration: none;
  color: #1C1C1C;
}
#willerferrycontents .btn-main:hover span {
  top: 0;
  left: 0;
}
    #willerferrycontents .benefit .btn-main span:before {
        right: 100px;
    }
    #willerferrycontents .recommend .btn-main span:before {
        right: 70px;
    }
    #willerferrycontents .charm .btn-main span:before {
        right: 100px;
    }
    #willerferrycontents .other .btn-main span:before {
        right: 50px;
    }



/* btn sub */
#willerferrycontents .btn-sub {
  background: #FFF;
  box-shadow: 0 0 0 2px #000 inset;
  border-radius: 30px;
  display: block;
  width: 396px;
  margin: 0 auto;
}
#willerferrycontents .btn-sub span {
  background: #FFEFBE;
  border: solid 2px #1C1C1C;
  border-radius: 30px;
  color: #000;
  padding: 12px 20px 12px 10px;
  position: relative;
  display: block;
  text-align: center;
  top: -6px;
  left: -6px;
  font-weight: 900;
  font-size: 20px;
}

#willerferrycontents .btn-sub span:before,
#willerferrycontents .btn-sub span:after {
    content: "";
    position: absolute;
    display: inline-block;
} 

#willerferrycontents .btn-sub span:before {
  background: url("../img/willer-ferry/ic-arrow-r-black.png") no-repeat center/100%;
  top: 50%;
  right: 103px;
  transform: translate(0, -50%);
  width: 13px;
  height: 27px;
}
#willerferrycontents .btn-sub span:after {
  top: -23px;
  left:50%;
  transform: translateX(-50%);
  background: url("../img/willer-ferry/img-seikyo-fukidashi.png") no-repeat center/contain;
  width: 178px;
  height: 34px;
}
#willerferrycontents .btn-sub:hover {
  text-decoration: none;
  color: #000;
}
#willerferrycontents .btn-sub:hover span {
  top: 0;
  left: 0;
}

/*btn-banner*/
#willerferrycontents .btn-banner {
    display: block;
    margin: 50px auto 0;
    max-width: 728px;
    width: 100%;
    cursor: pointer;
    transition: 0.3s;
    text-align: center;
}
#willerferrycontents .btn-banner img{

}
#willerferrycontents .btn-banner:hover {
    opacity: 0.6;
}


/*link*/
#willerferrycontents .pagelink{
	text-decoration: underline;
	margin: 10px auto;
	text-align: center;
    color: #457AFF;
    font-size: 16px;
}
#willerferrycontents .pagelink:hover{
	text-decoration: none;
}
#willerferrycontents .pagelink{
    position: relative;
}
#willerferrycontents .pagelink::after{
    content: '';
    position: absolute;
    bottom: 4px;
    right: -20px;
    display: inline-block;
    width: 18px;
    height: 14px;
    background: url("../img/willer-ferry/ico-pagelink.svg") no-repeat center center/100%;
}
#willerferrycontents .img-center{
	width: 80%;
	max-width: 360px;
	margin: 0 auto 40px;
}

#willerferrycontents .m-10{
    margin: 10px;
}
#willerferrycontents .mt-0{
    margin-top: 0 !important;
}
#willerferrycontents .txt-pc-right{
	text-align: right;
}
#willerferrycontents .box-select{
	padding: 10px 20px 11px;
	text-align: center;
	width: 100%;
	background: #fff;
	border: 1px solid #000;
    font-weight: 500;
}

/*Utility*/
#willerferrycontents .mt-2 {
  margin-top: 20px;
}
#willerferrycontents .mb-4 {
  margin-bottom: 30px;
}

#willerferrycontents .above {
  position: relative;
}
#willerferrycontents .above .ttl_main {
  text-align: center;
}
#willerferrycontents .above .bt_tour {
  position: absolute;
  left: 40px;
  right: 40px;
  bottom: 30px;
}
#willerferrycontents .bt_tour a {
  display: block;
  font-size: 35px;
  color: #FFF;
  font-weight: bold;
  text-align: center;
  letter-spacing: 3px;
  background: url("../img/webtyoku/icon_arrow.png") no-repeat 96% center;
  background-color: #f21970;
  border-radius: 10px;
  padding: 10px 0px 6px;
  box-shadow: 5px 5px #262222;
}


/* point
----------------------------------*/
#willerferrycontents .point {
  padding: 120px 20px 60px;
  background: #FAFAFA;
  position: relative;
  z-index: 0;
}
#willerferrycontents .point .bg-map {
  max-width: 840px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}
#willerferrycontents .point .bg-map::after {
  position: absolute;
  z-index: 1;
  content: ''; /*何も入れない*/
  width: 415px; /*画像の幅*/
  height: 379px; /*画像の高さ*/
  background: url(../img/willer-ferry/map-ferry.png) no-repeat;
  background-size: contain;
  top: -60px;
  right: 0;
}
#willerferrycontents .point h2 {
  color: #000;
  font-weight: bold;
  margin-bottom: 20px;
}
#willerferrycontents .point .txt-howto {
  margin-bottom: 24px;
  font-size: 18px;
  font-weight: bold;
}
#willerferrycontents .point .txt-howto small{
  font-size: 60%;
}
#willerferrycontents .point .txt-howto-n {
  font-size: 22px;
}
#willerferrycontents .point .txt-big{
    display: inline-block;
    font-size: 28px;
    margin-bottom: 12px;
}
#willerferrycontents .point .txt-howto.sub {
    display: inline-block;
    font-size: 28px;
    margin-bottom: 6px;
    font-weight: bold;
}
#willerferrycontents .point .txt-howto.sub > .txt-big{
    margin-bottom: 0;
}
#willerferrycontents .point .txt-howto.sub > .txt-small{
    font-size: 22px;
}


/* benefit
-------------------------------------------------*/
#willerferrycontents .benefit {
  padding: 40px 40px 50px;
  background: #FAFAFA;
  text-align: center;
  position: relative;
}
#willerferrycontents .txt-comment {
  position: relative;
  padding: 0 5px;
  text-align: center;
  width: 90%;
  max-width: 280px;
  margin: 0 auto 10px;
  font-size: 20px;
  font-weight: bold;
}
#willerferrycontents .txt-comment::before, 
#willerferrycontents .txt-comment::after {
  position: absolute;
  bottom: 5px;
  content: '';
  display: inline-block;
  width: 13px;
  height: 17px;
}
#willerferrycontents .txt-comment::before {
    left: 10px;
    background: url("../img/willer-ferry/ico-comme-l.svg") no-repeat center / 100%;
}
#willerferrycontents .txt-comment::after {
    right: 10px;
    background: url("../img/willer-ferry/ico-comme-r.svg") no-repeat center / 100%;
}
#willerferrycontents .bg-square {
  position: relative;
  z-index: 1;
  text-align: center;
  margin: 0 auto;
  width: 76%;
  padding: 10px;
  font-size: 20px;
  font-weight: bold;
}
#willerferrycontents .bg-square::before {
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  transform: skewX(-15deg);
  content: "";
  background-color: #FFEFBE;
  border: 2px solid #000;
}

#willerferrycontents .benefit .list-benefit {
  background: #FFF;
  border: 2px solid #000;
  border-radius: 10px;
  padding: 40px 4% 24px;
  position: relative;
  z-index: 0;
  display: flex;
  max-width: 820px;
  margin: -20px auto 0;
}
#willerferrycontents .box-benefit.right .list-benefit{
  background: #FFF3F8;
  padding: 36px 4%;
  justify-content: center;
}

#willerferrycontents .benefit .list-benefit div {
    margin: 0 1%;
}

#willerferrycontents .benefit-flex {
    display: flex;
    gap: 30px;
    justify-content: space-between;
}
#willerferrycontents .box-benefit.left {
    width: 48%;
}
#willerferrycontents .box-benefit.right {
    width: 44%;
    position: relative;
}
#willerferrycontents .box-benefit.right::before {
    content: "";
    position: absolute;
    background: url(../img/willer-ferry/plus.png) no-repeat center;
    background-size: contain;
    width: 30px;
    height: 70px;
    top: calc(50% - 58px);
    left: -13%;
    transform: translateY(50%);
}

#willerferrycontents .benefit .benefit-copy span{
    font-size: 16px;
    position: absolute;
    top: -30px;
    left: 50%;
    font-weight: bold;
    transform: translateX(-50%);
}
#willerferrycontents .benefit .benefit-copy span::before,
#willerferrycontents .benefit .benefit-copy span::after{
    content: '';
    position: absolute;
    width: 2px;
    height: 100%;
    bottom: 0;
    background: #000;
    display: inline-block;
    border-radius: 50px;
}
#willerferrycontents .benefit .benefit-copy span::before{
    left: -18px;
   transform: translateX(-50%) rotate(-28deg);
}
#willerferrycontents .benefit .benefit-copy span::after{
   right: -18px;
   transform: translateX(-50%) rotate(28deg);
}
#willerferrycontents .benefit .list-benefit dt {
    margin: 0 auto 10px;
}
#willerferrycontents .box-benefit.right dt{
    text-align: center;
    width: 92%;
}
#willerferrycontents .benefit .list-benefit dt .benefit-label {
    font-weight: bold;
    padding: 2px 24px;
    background: #2CADE3;
    border-radius: 6px;
    color: #fff;
    font-size: 16px;
}
#willerferrycontents .benefit dl dd {
    font-size: 15px;
    font-weight: 500;
    margin-top: 13px;
    line-height: 1.4;
}
#willerferrycontents .benefit dl dd.img-benefit {
    height: 108px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    flex-direction: column;
    justify-content: center;
}
#willerferrycontents .benefit .pagelink {
    margin-top: 5px;
    display: inline-block;
    font-weight: 400;
    font-size: 14px;
}
#willerferrycontents .benefit .pagelink::after {
    width: 15px;
    height: 13px;
}


/* recommend
--------------------------------*/
#willerferrycontents .recommend {
    background-color: #C4F3E8;
    padding: 48px 16px 60px;
}
#willerferrycontents .ttl_recommend {
    margin-bottom: 30px;
}
#willerferrycontents .flex-recommend {
    display: flex;
}
#willerferrycontents .list-recommend {
    width: 49%;
    margin: 0 5px;
}
#willerferrycontents .list-recommend li {
    border: 2px solid #000;
    border-radius: 40px;
    padding: 10px 6% 12px;
    background-color: #fff;
    margin: 10px 0 0;
    display: flex;
    align-items: center;
    font-family: "Inter", sans-serif;
    line-height: 1.2;
    position: relative;
}
#willerferrycontents .list-recommend li.ico-st-discount::before {
    content: '';
    position: absolute;
    z-index: 2;
    top: -11px;
    right: -3px;
    display: inline-block;
    width: 52px;
    height: 47px;
    background: url("../img/willer-ferry/ico-st-discount.png") no-repeat center center/ 100%;
}
#willerferrycontents .list-recommend .recommend-route{
    font-size: 16px;
    font-weight: 500;
    font-family: "Inter", sans-serif;
}
#willerferrycontents .list-recommend .recommend-ico {
    padding: 0 2px;
}
#willerferrycontents .list-recommend .recommend-ico img {
    vertical-align: middle;
}
#willerferrycontents .list-recommend .recommend-price {
   margin-left: auto;
    font-size: 28px;
    letter-spacing: 0.04em;
    font-weight: 700;
    color: #F678A9;
    font-family: "Inter", sans-serif;
}
#willerferrycontents .btn-main {
    margin-top: 46px;
}


/* charm
--------------------------------*/
#willerferrycontents .charm {
    background-color: #FAFAFA;
    padding: 50px 0;
}

#willerferrycontents .ttl_charm {
    margin-bottom: 20px;
}
#willerferrycontents .ttl_charm + p{
    margin-bottom: 30px;
    font-weight: 500;
}

#willerferrycontents .list-charm {
    display: flex;
    padding: 0 16px;
}

#willerferrycontents .list-charm li {
    width: 32%;
    margin: 10px 10px 0;
    border: 2px solid #000;
    border-radius: 10px;
    background-color: #FFF6DC;
    padding: 30px 16px;
    position: relative;
}

#willerferrycontents .list-charm li.num3 {
    padding: 15px 16px 30px;
}

#willerferrycontents .list-charm li::before {
  content: "";
  position: absolute;
  left: -1px;
  top: -1px;
  width: 54px;
  height: 54px;
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: top left;
}
#willerferrycontents .list-charm li.num1::before {
    background-image: url('../img/willer-ferry/ico-charm-num1.svg');
}
#willerferrycontents .list-charm li.num2::before {
    background-image: url('../img/willer-ferry/ico-charm-num2.svg');
}
#willerferrycontents .list-charm li.num3::before {
    background-image: url('../img/willer-ferry/ico-charm-num3.svg');
}

#willerferrycontents .list-charm-inner dt {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 30px;
    text-align: center;
    color: #000;
    padding-left: 40px;
}
#willerferrycontents .list-charm li.num3 .list-charm-inner dt {
    margin-bottom: 20px;
}
#willerferrycontents .list-charm-inner dd {
    font-size: 16px;
    font-weight: 400;
    color: #000;
    line-height: 1.2;
}

#willerferrycontents .scroll-container {
    overflow-x: scroll;
    max-width: 100%;
    margin-top: 50px;
    margin-right: 0;
    margin-left: 0;
}
#willerferrycontents .scroll-wrap {
    width: fit-content;
    margin: auto;
}
#willerferrycontents .list-scroll-obj {
    display: flex;
    flex-wrap: nowrap;
    max-width: initial;
    margin: initial;
}
#willerferrycontents .list-scroll-obj .scroll-item {
    width: 327px;
}

#willerferrycontents .charm .btn-main {
    margin-top: 60px;
}


/* other
--------------------------------*/
#willerferrycontents .other {
    padding: 50px 30px;
    background: #FCD9E6;
}
#willerferrycontents .other h3,
#willerferrycontents .other h3 img{
  text-align: center;
}
#willerferrycontents .other h3 + p{
  margin-bottom: 20px;
}
#willerferrycontents .list-other {
    width: 96%;
    margin: 0 auto 50px;
    box-sizing: border-box;
    display: flex;
}
#willerferrycontents .list-other li{
    width: 49%;
    margin: 0 10px;
}
#willerferrycontents .list-other li dl {
    text-align: left;
    margin-top: 4px;
}
#willerferrycontents .list-other li dl dt{
    font-weight: 700;
    font-size: 18px;
    margin-bottom: 11px;
    color: #2A2A2A;
    min-height: 60px;
    line-height: 1.6;
}
#willerferrycontents .list-other li dl dd{
    font-weight: 500;
    font-size: 16px;
    line-height: 1.3;
}


/* Discount
-----------------------------------*/
#willerferrycontents .discount{
	padding: 50px 20px;
    background: #fafafa;
}
#willerferrycontents .discount h3 {
  position: relative;
  margin-top: 70px;
  font-size: 26px;
  text-align: center;
}
#willerferrycontents .ttl_discount + p{
    margin-bottom: 50px;
    font-weight: 500;
}
#willerferrycontents .ul-discount {
	width: 80%;
    max-width: 786px;
	margin: 0 auto;
    box-sizing: border-box;
}
#willerferrycontents .ul-discount li{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding-bottom: 90px;
	position: relative;
}
#willerferrycontents .ul-discount li:last-child{
	padding-bottom: 0;
}

#willerferrycontents .ul-discount li::after{
  content: "";
  background: url("../img/willer-ferry/ico-arrow-reserve.png") no-repeat center;	
  background-size: contain;
  width: 66px;
  height: 30px;
  position: absolute;
  transform: translate(-50%, -50%);
  left: 50%;
  bottom: 3%;
}
#willerferrycontents .ul-discount li:last-child::after{
	display: none;
}
#willerferrycontents .ul-discount li img{
	width: 36%;
}
#willerferrycontents .ul-discount li p{
	width: 60%;
	align-self: center;
	text-align: left;
    font-size: 16px;
}
#willerferrycontents .ul-discount li p > span {
    display: block;
    margin-top: 12px;
}
#willerferrycontents .ul-discount li p > span.txt-kome {
    margin-top: 0;
}
#willerferrycontents .discount .btn-sub {
    margin: 50px auto 0;
    position: relative;
}

/* Notes
------------------------------------*/
#willerferrycontents .notes {
  background: #C4F3E8;
  padding: 20px;
  text-align: center;
}
#willerferrycontents .notes h3 {
  position: relative;
  margin-top: 50px;
  font-size: 26px;
  color: #fff;
}
#willerferrycontents .list-notes {
  border-radius: 10px;
  background: #fff;
  padding: 20px 20px 20px 32px;
  text-align: left;
  width: 90%;
  margin: 40px auto;
}
#willerferrycontents .list-notes li {
  position: relative;
}
#willerferrycontents .list-notes li::before {
  content: "・";
  left: -20px;
  position: absolute;
}
#willerferrycontents .txt-attention {
	font-size: 0.8em;
}
#willerferrycontents .list-attention {
    max-width: 700px;
    margin: 40px auto 0;
}
#willerferrycontents .list-attention li{
    position: relative;
    padding-left: 20px;
    text-align: left;
    line-height: 1.8;
    font-weight: 400;
    font-size: 16px;
}
#willerferrycontents .list-attention li::before{
    content: '※';
    position: absolute;
    left: 0;
    font-size: 14px;
}
#willerferrycontents .list-attention li span {
    position: relative;
    text-align: left;
    line-height: 1.8;
    font-weight: 400;
    font-size: 14px;   
}



/* PC 
---------------------------------*/
@media (min-width: 768px) {
  .pc_none {
    display: none !important;
  }
  #tx-page h1 {
    font-size: 24px;
  }
  .mid-base ul li .box {
    height: 490px;
  }
  /*.header-pc-menu .menu-inner {
    display: none !important;
  }*/
}

/* レスポンシブ
-------------------------------*/
@media (min-width: 768px) and (max-width: 1023px){
    #willerferrycontents {
        max-width: 98%;
    }
    
    /* point
    ----------------------------------*/
    #willerferrycontents .point .bg-map::after {
        width: 48%;
    }
    
    /* benefit
    ----------------------------*/
    #willerferrycontents .benefit .list-benefit div:last-of-type::before {
      left: -9vw;
    }
    #willerferrycontents .benefit .list-benefit div {
        margin: 0 1%;
    }
    #willerferrycontents .benefit .list-benefit dt .benefit-label {
        font-size: 14px;
    }
    #willerferrycontents .benefit dl dd,
    #willerferrycontents .benefit .pagelink {
        font-size: 13px;
    }
    #willerferrycontents .benefit .pagelink::after {
        width: 14px;
        height: 10px;
        right: -16px;
    }

    /* reccommend
    -----------------------*/
    #willerferrycontents .list-recommend .recommend-route {
        font-size: 13px;
    }
    #willerferrycontents .list-recommend .recommend-price {
        font-size: 22px;
    }
    
    /* charm
    -------------------------*/
    #willerferrycontents .list-charm-inner dt {
        font-size: 16px;
    }
    #willerferrycontents .list-charm-inner dd {
        font-size: 14px;
    }

}


@media (max-width: 930px) {
    /* benefit
    -------------------------------------------------*/
    #willerferrycontents .benefit {
      padding: 40px 40px 50px;
      background: #FAFAFA;
      text-align: center;
      position: relative;
    }
    #willerferrycontents .benefit .list-benefit {
      background: #FFF;
      border: 2px solid #000;
      border-radius: 10px;
      padding: 40px 4% 24px;
      position: relative;
      z-index: 0;
      display: flex;
      max-width: 820px;
      margin: -20px auto 0;
    }
    #willerferrycontents .box-benefit.right .list-benefit{
      background: #FFF3F8;
      padding: 36px 4% 18px;
    }

    #willerferrycontents .benefit .list-benefit div {
        margin: 0 1%;
    }

    #willerferrycontents .benefit-flex {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0;
    }
    #willerferrycontents .box-benefit.left {
        width: 100%;
    }
    #willerferrycontents .box-benefit.right {
        width: 100%;
        margin-top: 60px;
    }
    #willerferrycontents .box-benefit.right::before {
        width: 30px;
        height: 70px;
        top: calc(50% - 58px);
        left: -13%;
    }
    
    #willerferrycontents .benefit .list-benefit {
        justify-content: center;
    }

    #willerferrycontents .benefit .benefit-copy span{
        font-size: 16px;
        position: absolute;
        top: -30px;
        left: 50%;
        font-weight: bold;
        transform: translateX(-50%);
    }
    #willerferrycontents .benefit .benefit-copy span::before,
    #willerferrycontents .benefit .benefit-copy span::after{
        content: '';
        position: absolute;
        width: 2px;
        height: 100%;
        bottom: 0;
        background: #000;
        display: inline-block;
        border-radius: 50px;
    }
    #willerferrycontents .benefit .benefit-copy span::before{
        left: -18px;
       transform: translateX(-50%) rotate(-28deg);
    }
    #willerferrycontents .benefit .benefit-copy span::after{
       right: -18px;
       transform: translateX(-50%) rotate(28deg);
    }
    #willerferrycontents .benefit .list-benefit dt {
        margin: 0 auto 10px;
    }
    #willerferrycontents .box-benefit.right dt{
        text-align: center;
        width: 75%;
    }
    #willerferrycontents .benefit .list-benefit dt .benefit-label {
        font-weight: bold;
        padding: 2px 24px;
        background: #2CADE3;
        border-radius: 6px;
        color: #fff;
        font-size: 16px;
    }
    #willerferrycontents .benefit dl dd {
        font-size: 15px;
        font-weight: 500;
        margin-top: 13px;
        line-height: 1.4;
    }
    #willerferrycontents .benefit dl dd.img-benefit {
        height: 108px;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        flex-direction: column;
        justify-content: center;
    }
    #willerferrycontents .benefit .pagelink {
        margin-top: 5px;
        display: inline-block;
        font-weight: 400;
        font-size: 14px;
    }
    #willerferrycontents .benefit .pagelink::after {
        width: 15px;
        height: 13px;
    }
}

/* スマホ
----------------------------------*/
@media screen and (max-width: 767px) {
    
  /* 共通
  -----------------------*/
  .sp_none {
    display: none !important;
  }
  #tx-page h1 {
    padding: 10px;
    font-size: 1.2rem;
    margin-bottom: 0;
  }
  #willerferrycontents {
    padding-bottom: 16vw;
    margin-top: 2vw;
  }
  #willerferrycontents p {
    text-align: left;
    font-size: 14px;
  }
  #willerferrycontents .point {
    padding: 40px 12px 140px;
  }
  #willerferrycontents .txt-small {
    font-size: 11px;
  }
  #willerferrycontents .point .txt-howto {
    font-size: 16px;
  }
  #willerferrycontents .point h2 img {
    width: 60%;
  }

  /* btn */
  #willerferrycontents .btn-main {
    width: 96%;
    font-size: 18px;
  }
  #willerferrycontents .btn-main span {
      font-size: 18px;
      padding: 8px 12px 10px 10px;
  }
  #willerferrycontents .btn-main span:before {
      width: 12px;
      height: 14px;
  }
  #willerferrycontents .btn-sub {
      width: 96%;
      font-size: 18px;
      margin-top: 40px;
  }
  #willerferrycontents .btn-sub span {
      font-size: 18px;
      padding: 12px 12px 10px 10px;
  }
  #willerferrycontents .btn-sub span:before {
    right: 80px;
  }
    
  #willerferrycontents .benefit .btn-main span:before {
    right: 75px;
  }
  #willerferrycontents .recommend .btn-main span:before {
    right: 50px;
  }
  #willerferrycontents .charm .btn-main span:before {
    right: 75px;
  }
  #willerferrycontents .other .btn-main span:before {
    right: 32px;
  }
    
  /*safari適用*/
  _::-webkit-full-page-media, _:future, #willerferrycontents .btn-main span:before {
      top: 45%;
      width: 12px;
      height: 14px;
  }
  _::-webkit-full-page-media, _:future, #willerferrycontents .benefit .btn-main span:before {
    right: 70px;
  }
  _::-webkit-full-page-media, _:future, #willerferrycontents .recommend .btn-main span:before {
    right: 46px;
  }
  _::-webkit-full-page-media, _:future, #willerferrycontents .charm .btn-main span:before {
    right: 70px;
  }
  _::-webkit-full-page-media, _:future, #willerferrycontents .other .btn-main span:before {
    right: 28px;
  }
    
  /* pagelink
  -------------------------*/
   #willerferrycontents .pagelink::after {
        bottom: 3px;
        width: 16px;
        height: 10px;
    }

    #willerferrycontents h3 {
        font-size: 18px !important;
    /*    margin-top: 100px !important;*/
    }
    #willerferrycontents h3.bg-square{
        margin-top: 0!important;
    }
    
    #willerferrycontents h3 + p{
     font-size: 16px;
    }
    
    /* point
    ----------------------------------*/
    #willerferrycontents .point {
        padding: 40px 12px 100px;
    }
    #willerferrycontents .point .bg-map::after {
        width: 50%;
        top: 10px;
        right: -8px;
     }
    #willerferrycontents .point h2 {
      margin-bottom: 8px;
      line-height: 1.2;
    }
    #willerferrycontents .point .txt-howto {
      margin-bottom: 20px;
      font-size: 16px;
    }
    #willerferrycontents .point .txt-howto small{
      font-size: 60%;
    }
    #willerferrycontents .point .txt-howto-n {
      font-size: 22px;
    }
    #willerferrycontents .point .txt-big{
        font-size: 28px;
        margin-bottom: 5px;
    }
    #willerferrycontents .point .txt-howto.sub {
        font-size: 28px;
        margin-bottom: 6px;
    }
    #willerferrycontents .point .txt-howto.sub > .txt-big{
        margin-bottom: 0;
    }
    #willerferrycontents .point .txt-howto.sub > .txt-small{
        font-size: 22px;
    }
    #willerferrycontents .point .pagelink {
        font-size: 14px;
    }

    
    /* benefit
    -------------------------------------------------*/
    #willerferrycontents .benefit {
      padding: 10px 16px 60px;
    }
    #willerferrycontents .txt-comment {
      padding: 0 5px;
      width: 90%;
      margin: 0 auto 10px;
      font-size: 16px;
      max-width: 220px;
    }
    #willerferrycontents .txt-comment::before, 
    #willerferrycontents .txt-comment::after {
      bottom: 5px;
      width: 13px;
      height: 17px;
    }
    #willerferrycontents .txt-comment::before {
        left: 0;
    }
    #willerferrycontents .txt-comment::after {
        right: 0;
    }
    #willerferrycontents .bg-square {
      margin: 0 auto;
      width: 85%;
      padding: 10px;
      font-size: 16px;
    }
    #willerferrycontents .bg-square::before {
      z-index: -1;
      border: 2px solid #000;
    }
    
    #willerferrycontents .box-benefit.right {
        margin-top: 20px;
    }
    
    #willerferrycontents .box-benefit.right::before {
        top: -100px;
        left: calc(50% - 10px);
    }
    
    #willerferrycontents .benefit .list-benefit{
      padding: 10px 4% 20px;
      flex-wrap: wrap;
      justify-content: center;
      max-width: 100%;
      margin: -20px auto 40px;
    }
    #willerferrycontents .box-benefit.right .list-benefit {
        padding: 10px 4% 18px;
        margin: -20px auto 20px;
    }
    #willerferrycontents .benefit .list-benefit div {
        margin: 28px auto 0;
    }
/*
    #willerferrycontents .benefit .list-benefit div:last-of-type {
         margin: 90px auto 0;
    }
    #willerferrycontents .benefit .list-benefit div:last-of-type::before {
        top: -126px;
        left: 44%;
    }
*/
    #willerferrycontents .benefit .list-benefit dt {
        margin-bottom: 10px;
    }
    #willerferrycontents .box-benefit.right dt {
        width: 100%;
    }
    #willerferrycontents .benefit .list-benefit dt .benefit-label {
        padding: 2px 30px;
        border-radius: 6px;
        font-size: 16px;
        width: 208px;
        display: inline-block;
    }
    #willerferrycontents .benefit dl dd {
      margin-top: 5px;
      line-height: 1.25;
      font-size: 14px;
      font-weight: 500;
    }
    #willerferrycontents .benefit .pagelink {
        margin-top: 5px;
    }
    
    /*safari適用*/
    _:lang(x)+_:-webkit-full-screen-document, #willerferrycontents .benefit .pagelink::after {
        bottom: 7px;
    }

    
    /* recommend
    --------------------------------*/
    #willerferrycontents .recommend {
        padding: 50px 16px;
    }
    #willerferrycontents .ttl_recommend {
        margin-bottom: 10px;
        text-align: center;
        margin: 0 auto 10px;
    }
    #willerferrycontents .flex-recommend {
        flex-wrap: wrap;
    }
    #willerferrycontents .list-recommend {
        width: 100%;
        max-width: 100%;
        margin: auto;
    }
    #willerferrycontents .list-recommend li {
        padding: 10px 8%;
        background-color: #fff;
        margin: 12px 0 0;
        display: flex;
        line-height: 1.2;
    }
    #willerferrycontents .list-recommend li.ico-st-discount::before {
        top: -13px;
        right: -10px;
        width: 52px;
        height: 47px;
    }
    #willerferrycontents .list-recommend .recommend-route{
        font-size: 14px;
    }
    #willerferrycontents .list-recommend .recommend-ico {
        padding: 0 4px;
    }
    #willerferrycontents .list-recommend .recommend-price {
        font-size: 24px;
    }
    #willerferrycontents .btn-main {
        margin-top: 30px;
    }
    
    
    /* charm
    --------------------------------*/
    #willerferrycontents .charm {
        padding: 40px 0 50px;
    }
    #willerferrycontents .ttl_charm + p {
        margin-bottom: 20px;
        padding: 0 16px;
        font-size: 16px;
    }
    #willerferrycontents .list-charm {
        flex-wrap: wrap;
        justify-content: center;
    }
    #willerferrycontents .list-charm li {
        width: 48%;
        max-width: 100%;
        margin: 10px 1%;
        padding: 16px 24px;
    }
    #willerferrycontents .list-charm li.num3 {
        padding: 15px 20px 16px;
    }
    #willerferrycontents .list-charm li::before {
      left: -1px;
      top: -1px;
      width: 42px;
      height: 42px;
    }
    #willerferrycontents .list-charm-inner dt {
        font-size: 18px;
        margin-bottom: 20px;
        padding-left: 0;
    }
    #willerferrycontents .list-charm-inner dd {
        font-size: 14px;
    }
    #willerferrycontents .scroll-container {
        overflow-x: scroll;
        max-width: 100%;
        margin-top: 30px;
        margin-right: 0;
        margin-left: 0;
    }
    #willerferrycontents .scroll-wrap {
        width: fit-content;
        margin: auto;
    }
    #willerferrycontents .list-scroll-obj {
        display: flex;
        flex-wrap: nowrap;
        max-width: initial;
        margin: initial;
    }
    #willerferrycontents .list-scroll-obj .scroll-item {
        width: 190px;
    }

    #willerferrycontents .charm .btn-wrap {
        margin: 40px 0 0;
        padding: 0 16px;
    }
    
    /* other
    --------------------------------*/
    #willerferrycontents .other {
        padding: 50px 16px;
    }
    #willerferrycontents .list-other {
        width: 100%;
        margin: 0 auto 6px;
        flex-wrap: wrap;
    }
    #willerferrycontents .list-other li{
        margin: 0 auto 24px;
    }
    #willerferrycontents .list-other li dl {
        line-height: 1.3;
        margin-top: 4px;
    }
    #willerferrycontents .list-other li dl dt{
        margin-bottom: 10px;
        min-height: inherit;
    }
    #willerferrycontents .list-other li dl dd{
        font-size: 15px;
    }
    
    #willerferrycontents .list-other .list-other-img {
        text-align: center;
    }
    
    #willerferrycontents .list-other .list-other-img img {
        width: 100%;
        margin: auto;
    }


    /* Discount
    -----------------------------------------*/
    #willerferrycontents .discount{
        padding: 50px 16px 24px;
    }
    #willerferrycontents .discount h3 {
        margin-top: 50px;
    }
    #willerferrycontents .discount h3 img{
        width: 96%;
    }
    #willerferrycontents .discount p {
       font-size: 15px;
    }
    #willerferrycontents .ttl_discount + p{
        margin-bottom: 20px;
        font-size: 16px;
    }
    #willerferrycontents .ul-discount{
        width: 100%;
        max-width: 100%;
    }
    #willerferrycontents .ul-discount li {
        padding-bottom: 68px;
    }
    
    #willerferrycontents .ul-discount li::after {
        bottom: 0;
    }

    #willerferrycontents .ul-discount li img{
        width: 100%;
        margin-bottom: 10px;
    }

    #willerferrycontents .ul-discount li p{
        width: 100%;
        align-self: center;
        text-align: left;
        font-size: 15px;
    }
    
    #willerferrycontents .ul-discount li p > span.txt-kome {
        margin-top: 0;
        font-size: 15px;
    }
	
    
    /* Note
    --------------------------------------------*/
      #willerferrycontents .notes {
        padding: 16px;
      }
      #willerferrycontents .notes h3{
        margin-top: 34px;
      }
      #willerferrycontents .list-notes {
        width: 100%;
        margin: 20px auto;
      }
      #willerferrycontents .list-notes li {
        font-size: 14px;
      }

    #willerferrycontents .txt-pc-right{
        text-align: left;
    }
}

@media (max-width: 560px) {
    
    /* point
    -----------------------------*/
    #willerferrycontents .point {
      padding: 40px 16px 290px;
    }
    #willerferrycontents .point .bg-map {
      max-width: 100%;
      margin: 0 auto;
    }
    #willerferrycontents .point .bg-map::after {
        width: 100%;
        height: 280px;
        top: 288px;
        max-width: 370px;
        margin-top: 35px;
    }

    
    /* other
    ---------------------------*/
    #willerferrycontents .list-other li{
        width: 100%;
    }
    
    /* charm
    ---------------------------*/
    #willerferrycontents .list-charm {
        flex-wrap: wrap;
    }
    #willerferrycontents .list-charm li{
        width: 100%;
        margin: 10px auto 0;
    }

}

@media (max-width: 380px) {
    /* 共通
    ---------------------------*/
    /* btn */
    #willerferrycontents .btn-main span,
    #willerferrycontents .btn-sub span {
        font-size: 16px;
    }
    #willerferrycontents .btn-main span:before {
        width: 9px;
        height: 13px;
        right: 14px;
    }
    #willerferrycontents .btn-sub span:before{
        top: 53%;
        width: 10px;
        height: 16px;
        right: 80px;
    }
    
    /*safari適用*/
    _:lang(x)+_:-webkit-full-screen-document, #willerferrycontents .btn-main span:before {
      top: 48%;
    }
    _:lang(x)+_:-webkit-full-screen-document, #willerferrycontents .btn-sub span:before {
      top: 49%;
    }
    
    #willerferrycontents .btn-banner {
        max-width: 100%;
        margin: 24px auto 0;
    }

    
    /* point
    -----------------------------*/
    #willerferrycontents .point .bg-map::after {
        right: -10px;
    }
    
    /* benefit
    ------------------------------*/
    #willerferrycontents .benefit .pagelink {
       font-size: 13px; 
    }
    #willerferrycontents .benefit .pagelink::after {
       width: 16px;
      height: 11px;
    }
    
    /* charm
    ---------------------------------*/
    #willerferrycontents .ttl_charm + p {
        padding: 0 12px;
    }
    #willerferrycontents .list-charm-inner dt {
        padding-left: 25px;
    }
    
    
    /* recommend
    -----------------------*/
    #willerferrycontents .list-recommend .recommend-route {
        font-size: 13px;
    }
    #willerferrycontents .list-recommend .recommend-price {
        font-size: 22px;
    }
    #willerferrycontents .list-recommend li.ico-st-discount::before {
        width: 48px;
        height: 42px;
    }

}