@charset "utf-8";
/* CSS Document */
#contents{font-family: "游ゴシック体", YuGothic, "Yu Gothic M", "游ゴシック Medium", "Yu Gothic Medium", -apple-system, BlinkMacSystemFont, "Helvetica Neue", HelveticaNeue, "Segoe UI", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN W3", HiraKakuProN-W3, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;word-wrap: break-word;word-break: break-word;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;font-feature-settings: "palt";letter-spacing: 0.06em;}
*, ::after, ::before {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
abbr, address, article, aside, audio, b, blockquote, body, canvas, caption, cite, code, dd, del, details, dfn, div, dl, dt, em, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, p, pre, q, samp, section, small, span, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, ul, var, video {
font-size: 100%;
margin: 0;
padding: 0;
vertical-align: baseline;
border: 0;
outline: 0;
background: transparent;
font-weight: 300;
}
button {
padding: 0;
cursor: pointer;
border: none;
background-color: transparent;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
img {
display: inline-block;
max-width: 100%;
height: auto;
vertical-align: bottom;
line-height: 1;
}
.cf:before,
.cf:after {
    content:"";
    display:table;
}
.cf:after {
    clear:both;
}
/* For IE 6/7 (trigger hasLayout) */
.cf {
    zoom:1;
}
#contents{
position: relative;
}
.bg_glay{
background-color: #F0F1F4;
}
.top_link p{
margin:20px 0;
font-size:1.19rem !important;;
}

/* ===============================================================================
* TOPページ
* =============================================================================== */
#main_image .top_main{
    width: 100%;
    height: auto;
}
#main_image{
position: relative;
}
#main_image h1{
    position: absolute;
    top: 0%;
    left: 0%;
    font-size: 2.81rem;
    line-height: 1;
    letter-spacing: .05em;
    color: #FFF;
    padding: 40px 60px 60px;
    text-shadow:#000 1px 1px 10px, #000 -1px 1px 10px, #000 1px -1px 10px, #000 -1px -1px 10px;
    z-index: 2;
}
#main_image h1 span{
font-size: 2.25rem;
line-height:2em;
}
@media screen and (min-width: 769px) and (max-width: 840px) {
#main_image h1 span{
  font-size: 2.25rem;
  line-height:1.5em;
}
}

#main_image p{
    position: absolute;
    top: 50%;
    width:60%;
    left: 0%;
    font-size: 1rem;
    line-height: 1.5em;
    letter-spacing: .05em;
    color: #FFF;
    padding: 40px 60px 0px;
    z-index: 2;
  }

@media screen and (min-width: 769px) and (max-width: 950px) {
  #main_image p{
    width:100%;
  }
}


#main_image p strong{
  text-shadow:#000 1px 1px 10px, #000 -1px 1px 10px, #000 1px -1px 10px, #000 -1px -1px 10px;
}
#main_image .hokkaido{
position: absolute;
top: 18%;
right: 7%;
width: 32%;
height: auto;
}
#main_image  > .rightPic{
right: 0;
text-align: left;
}
#main_image  > .rightPic > p:first-of-type{
padding:108px 0 65px;
line-height: 1;
position: relative;
}
#main_image  > .leftPic{
text-align: right;
padding-right:20px;
}
#main_image  > .leftPic > h2{
z-index: 2;
}
#main_image  .leftPic::before{
content:"";
display: block;
position: absolute;
right: 0;
top: 0;
width: 300px;
height: 100%;
background-color:#fff;
}
#main_image  > .leftPic > p:first-of-type{
padding:108px 0 20px;
line-height: 1;
position: relative;
}

#contents.top .layout_block{
padding: 20px 0 60px;
}
#contents.top .layout_block:nth-child(even){
background: #EEE;
}
#contents.top .columnBlock{
padding:0 50px;
}

#contents.top .ttlSubTxt{
font-size:1rem;
line-height: 2;
letter-spacing: .05em;
margin-bottom:50px;
}

#contents.top .ttlBlock > .rightPic{
right: 0;
text-align: left;
}
#contents.top .ttlBlock > .rightPic > p:first-of-type{
padding:108px 0 65px;
line-height: 1;
position: relative;
}
#contents.top .ttlBlock > .leftPic{
text-align: right;
padding-right:20px;
}
#contents.top .ttlBlock > .leftPic > h2{
z-index: 2;
}
#contents.top .ttlBlock .leftPic::before{
content:"";
display: block;
position: absolute;
right: 0;
top: 0;
width: 300px;
height: 100%;
background-color:#fff;
}
#contents.top .ttlBlock > .leftPic > p:first-of-type{
padding:108px 0 20px;
line-height: 1;
position: relative;
}
#contents.top .contentInner{
margin:60px auto 40px;
}
#contents.top .bg_glay .contentInner{
padding:20px 20px 40px;
}

/* 紹介文 */
#contents.top .introduction{
text-align:center;
margin:30px 0;
}
#contents.top .introduction h2{
font-size: 1.86rem;
margin:40px 0;
}
#contents.top .introduction h2:after {
content: '';
display: block;
position: absolute;
left: 46%;
height: 2px;
width: 8%;
margin-top:10px;
background: #000;
}
#contents.top .introduction p{
font-size: 1rem;
}

/* 5コース紹介 */
#contents.top ul.course_top{
display: block;
font-size: 0;
width: 97.91666666666667%;
margin: 0 auto;
}
#contents.top ul.course_top li{
display: inline-block;
width: 32.03125%;
margin:8px 0.6% 30px;
position:relative;
}
#contents.top ul.course_top li:hover{
opacity: 0.7;
}
#contents.top ul.course_top li .thumbCap{
background-color: #3369C3;
width:90%;
left:5%;
font-size:.75rem;
color:#FFF;
padding:10px;
position:absolute;
bottom:-20px;
text-align:center;
}
#contents.top ul.course_top li strong.ttl{
position:absolute;
top:0;
left:0;
padding: .5em .8em;
font-size: 1rem;
line-height: 1;
letter-spacing: .1em;
color: #3369C3;
background: #FFF;
display: inline-block;
}

/* 4カテゴリー紹介 */
#contents.top ul.category_top{
display: block;
font-size: 0;
width: 97.91666666666667%;
margin: 0 auto;
}
#contents.top ul.category_top li{
display: inline-block;
width: 48.7%;
margin:10px 0.6%;
position:relative;
}
#contents.top ul.category_top li:hover{
opacity: 0.7;
}
#contents.top ul.category_top li .thumbCap{
width:90%;
left:5%;
font-size:2rem;
color:#FFF;
padding:10px;
position:absolute;
bottom:35%;
text-align:center;
}
@media screen and (min-width: 769px) and (max-width: 870px) {
#contents.top ul.category_top li .thumbCap.line2 {
bottom:13%;
}
}

#contents.top ul.category_top li .thumbCap span{
background: rgba(0,0,0,0.6);
padding:0 10px;
}

/* 外部バナーリンク */
#recommendArea a img{
  width: 100%;
}
#recommendArea a {
  backface-visibility: hidden;
  transition: opacity .2s linear 0s;
}
#recommendArea a:hover{
  opacity: .8;
}
#recommendArea > div{
  max-width:1280px;
  width: 100%;
  margin: 0 auto;
}
#recommendArea h2{
font-size: 1.86rem;
margin:40px 0;
text-align:center;
}
#recommendArea h2:after {
content: '';
display: block;
position: absolute;
left: 46%;
height: 2px;
width: 8%;
margin-top:10px;
background: #000;
}


#recommendArea .rcmBtn{
  margin: 0 auto;
  text-align: center;
  letter-spacing: .2em;
  line-height: 1;
}
#recommendArea .rcmBtn a{
  min-width: 45%;
  padding:.8em 2em .9em;
  font-weight: 300;
  position: relative;
  display: inline-block;
}
#recommendArea .rcmBtn a::after{
  content: "";
  display: block;
  width: .5em;
  height: .5em;
  border-width: 1px;
  border-bottom-style: solid;
  border-right-style: solid;
  transform: rotate(-45deg) translateY(-50%);
  position: absolute;
  right: 1em;
  top: 48%;
  box-sizing: border-box;
  vertical-align: middle;
}
#recommendArea .rcmBtn.orangeBtn a{
  background-color: #d54100;
  color: #fff;
}
#recommendArea .rcmBtn.orangeBtn a::after{
  border-color: #fff;
}
#recommendArea .rcmBtn.greenBtn a{
  border: solid 1px #006978;
  color: #006978;
}
#recommendArea .rcmBtn.greenBtn a::after{
  border-color: #006978;
}
#recommendArea .clm2Block{
  overflow: hidden;
  width: 100%;
}
#recommendArea .clm4Block{
  overflow: hidden;
  width: 100%;
}
#recommendArea .clm2Block::after{
  content:"";
  display: table;
  clear: both;
}
#recommendArea .clm4Block::after{
  content:"";
  display: table;
  clear: both;
}
#recommendArea .clm2Block > li{
  width:590px;
  max-width: 47.58%;
}


#recommendArea .clm2Block > li:nth-child(2n - 1){
  float: left;
}
#recommendArea .clm2Block > li:nth-child(2n){
  float: right;
}

#recommendArea dt h3{
  line-height: 1;
  padding:1em 0 .5em;
  letter-spacing: .05em;
}
#recommendArea dt p.mwbp-ttl-h3{
  line-height: 1;
  padding:1em 0 .5em;
  letter-spacing: .05em;
}

#recommendArea dd p{
  line-height: 1.5;
  letter-spacing: .05em;
  height:50px;
}
.bn_topofjapan{
width:300px;
height:auto;
padding:60px 0;
margin:0 auto;
}
  

/* ===============================================================================
* 下層共通
* =============================================================================== */

#contents .second .ttlBlock{
margin-bottom: 60px;
}
#contents .second .ttlBlock > div{
position: relative;
height: 100%;
width: 100%;
max-width: 1280px;
margin: 0 auto;
}
#contents.course h1,#contents.category h1{
font-size: 1.86rem;
margin:20px 0 30px;
}


/* ===============================================================================
* コース紹介ページ
* =============================================================================== */

.iconBlank img{
width:15px !important;
vertical-align: baseline;
padding-left:5px
}

#contents .second .ttlBlock {
position: relative;
}
#contents .second .ttlBlock::after{
content:"";
display: block;
width:70.83333333333333%;
height: 100%;
position: absolute;
top: 0;
/*background-size: auto;*/
background-size: cover;
background-repeat: no-repeat;
z-index: -1;
}
#contents .second .ttlBlock.picR::after{
right: 0;
background-position: left center;
}
#contents .second .ttlBlock.picL::after{
left: 0;
background-position: right center;
}
#course01 .ttlBlock::after{
background-image: url("/japan-travel-planner/northern-hokkaido-01/images/course01_top.jpg");
}
#course02 .ttlBlock::after{
background-image: url("/japan-travel-planner/northern-hokkaido-01/images/course02_top.jpg");
}
#course03 .ttlBlock::after{
background-image: url("/japan-travel-planner/northern-hokkaido-01/images/course03_top.jpg");
}
#course04 .ttlBlock::after{
background-image: url("/japan-travel-planner/northern-hokkaido-01/images/course04_top.jpg");
}
#course05 .ttlBlock::after{
background-image: url("/japan-travel-planner/northern-hokkaido-01/images/course05_top.jpg");
}

#contents .second .ttlBlock > div > h2{
position: relative;
padding: .75em 1.5em .75em;
font-size: 1.63rem;
line-height: 1.3em;
letter-spacing: .2em;
color:#FFF;
background: #3369C3;
display: inline-block;
margin: 3em 0;
margin-right: 60%;
font-weight:bold;
}
#contents .second .ttlBlock > div > h2 span{
padding: .5em .8em;
font-size: 1rem;
line-height: 1;
letter-spacing: .1em;
color:#3369C3;
background: #FFF;
display: inline-block;
margin: 0 0 1em;
font-weight:bold;
}
/* 1日のコース */
#contents.course .introduction{
padding: 20px 20px 60px;
}
#contents.course table {
width:100%;
}
#contents.course table th,#contents.course table td {
padding: 15px 5px;
display: table-cell;
text-align: left;
vertical-align: middle;
border-radius: 2px;
}
#contents.course table th{
width:8em;
text-align:center;
}
#contents.course table.striped>tbody>tr:nth-child(odd) {
background-color: rgba(242,242,242,0.5);
}
#contents.course table a{
color:#3369C3;
text-decoration:underline;
font-weight:bold;
}
#contents .second .course_area{
width:25%;
height:auto;
}
#contents .icon_spot{
width:13%;
height:auto;
}
#contents.course h3{
margin:30px 0 10px;
font-size:1.36rem;
font-weight:bold;
}

#contents.course p{
font-size:1.17rem;
line-height:1.8em;
}

#contents.course .layout_block{
padding: 20px 0 60px;
}
#contents.course .layout_block:nth-child(even){
background: #EEE;
}
#contents.course .columnBlock{
padding:0 50px;
}

#contents .ttlSubTxt{
font-size:1rem;
line-height: 2;
letter-spacing: .05em;
margin-bottom:50px;
}

#contents .second .ttlBlock > .rightPic{
right: 0;
text-align: left;
}


#contents .second .ttlBlock > .rightPic > p:first-of-type{
padding:108px 0 65px;
line-height: 1;
position: relative;
}
#contents .second .ttlBlock > .leftPic{
text-align: right;
padding-right:20px;
}
#contents .second .ttlBlock > .leftPic > h2{
z-index: 2;
}
#contents .second .ttlBlock .leftPic::before{
content:"";
display: block;
position: absolute;
right: 0;
top: 0;
width: 300px;
height: 100%;
background-color:#fff;
}
#contents .second .ttlBlock > .leftPic > p:first-of-type{
padding:108px 0 20px;
line-height: 1;
position: relative;
}



/* ===============================================================================
* カテゴリーページ
* =============================================================================== */

#contents .second > ul{
display: block;
font-size: 0;
width: 97.91666666666667%;
margin: 0 auto;
}
#contents .second > ul > li{
display: inline-block;
width: 32.03125%;
margin:auto 0.6%;
position:relative;
cursor: pointer;
cursor: hand;
}
#contents .second > ul > li:hover{
opacity: 0.7;
}
#contents .second > ul > li .thumbCap{
background-color: rgba(000,0,0,0.5);
font-size:1rem;
color:#FFF;
padding:10px;
position:absolute;
width:100%;
bottom:0;
text-align:center;
font-weight:bold;
}
#contents.category h2{
font-size:1.63rem;
padding:50px 0;
color:#3369C3;
margin-bottom:40px;
font-weight:bold;
}
#gourmet,#activity,#history{
margin-top:100px;
}
/* モーダルCSS */
.modalArea {
display: none;
position: fixed;
z-index: 10; /*サイトによってここの数値は調整 */
top: 40px;
left: 0;
width: 100%;
height: 100%;
}
.modalBg {
width: 100%;
height: 100%;
background-color: rgba(30,30,30,0.9);
}
.modalWrapper {
position: absolute;
top: 50%;
left: 50%;
transform:translate(-50%,-50%);
width: 70%;
max-width: 500px;
padding: 30px;
background-color: #fff;
}
.closeModal {
position: absolute;
top: 0.5rem;
right: 1rem;
cursor: pointer;
font-size:1.86rem;
font-weight:bold;
}
.modalWrapper h3 {
font-size:1.13rem;
font-weight:bold;
margin-bottom: 10px;
}
.modalWrapper p {
font-size:.75rem;
line-height: 1.3em;
padding:0 0 15px;
}

.modalWrapper .detail_image_box{
text-align:center;
}

.modalWrapper img {
width:75%;
}

.TxtView{
position: absolute;
top: 0;
width: 100%;
height: 100%;
}

.btn_a{
    line-height: 1.3em;
text-align:center;
float:left;
display: block;
width:48%;
background: #3369C3;
border-radius: 3px;
color: #fff;
padding: 10px 20px!important;
font-size: .75rem;
font-weight:bold;
position: relative;
margin: 0px 0 0px;
box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);
}
.btn_a:nth-of-type(2){
float:right;
}
.link_btn:nth-of-type(3){
margin-top:10px;
}
.link_btn:nth-of-type(4){
margin-top:10px !important;
}
.btn_b{
line-height:1.3em;
text-align:center;
float:right;
display: block;
width:48%;
background:#707070;
border-radius: 3px;
color: #fff;
padding: 10px 20px!important;
font-size: .75rem;
font-weight:bold;
position: relative;
margin: 0px 0 0px;
box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);
}


/* ===============================================================================
* PC以外
* =============================================================================== */

@media screen and (min-width:769px) {
.dispNoPc:not(.mov){display: none !important;}
.dispNoSp:not(.mov){display: block !important;}
.dispNoSpIn{display: inline !important;}
.dispNoPcIn{display: none !important;}

#contents .second > ul > li:nth-child(n + 4){
margin-top:1.953125%;
}

#recommendArea{
  padding:30px 0 60px;
}
#recommendArea > div{
  padding:0 20px;
}
#recommendArea .secondDiv{
  padding-top: 100px;
}
#recommendArea h2{
  margin-bottom: 80px;
}
#recommendArea > .visibleAsw > ul{
padding-right: 30px;
}
#recommendArea .clm4Block > li{
max-width: 25%;
float: left;
padding-left: 30px;
}
#recommendArea .clm2Block > dt{
  float: left;
  display: block;
  width: 280px;
  max-width: 47.46%;
}
#recommendArea .clm4Block > dt{
  float: left;
  display: block;
}
#recommendArea .clm2Block > dd{
  float: right;
  display: block;
  width: 310px;
  max-width: 52.54%;
  padding-left:2em;
  font-size: 1rem;
  line-height:1.5;
  letter-spacing: .05em;
}

#recommendArea .clm4Block > dd{
  float: right;
  display: block;
  max-width: 98%;
  font-size: 1rem;
  line-height:1.5;
  letter-spacing: .05em;
  padding: 10px 0 10px 0;
}

#recommendArea dt h3{
  font-size: 1.5rem;
}
#recommendArea dt p.mwbp-ttl-h3{
  font-size: 1.5rem;
}

#recommendArea dd p{
  font-size: 1rem;
  margin-bottom:30px;
}
#recommendArea .rcmBtn a,
#recommendArea .rcmBtn a::before{
  transition:all .2s linear 0s;
}
#recommendArea .rcmBtn.orangeBtn a:hover{
  opacity:.8;
}
#recommendArea .rcmBtn.greenBtn a:hover{
  background-color: #006978;
  color: #fff;
}
#recommendArea .rcmBtn.greenBtn a:hover::after{
  border-color: #fff;
}

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

#contents .second .ttlBlock > .rightPic > h2{
padding-left:40px;
}

#contents .second .ttlBlock::after{
width: 78.9%;
}
}
@media screen and (max-width:768px) {
.dispNoSpIn{display: none !important;}
.dispNoPcIn{display: inline !important;
position: relative;
height: auto;
}
.contentInner {
padding: 0;
}
.top_link p{
font-size: .81rem !important;;
padding:0 20px;
}
/* TOPページ */
#main_image h1{
    top: 0%;
    padding: 15px 20px 30px;
    width: 100%;
    font-size: 1.75rem;
    line-height: 1.3em;
    left: 0%;
    font-weight: bold;
}
#main_image h1 span {
font-size: 1rem;
    line-height: 2.5em;
    font-weight: bold;
}
#main_image p{
    position: absolute;
    top: 30%;
    width:80%;
    left: 6%;
    font-size: .81rem;
    line-height: 1.5em;
    letter-spacing: .05em;
    color: #FFF;
    font-weight:bold;
    padding:70px 0 0;
}
#main_image .hokkaido {
    top: 13%;
    width: 35%;
    right: 2%;
}
#contents.top .introduction {
    text-align: center;
    margin: 30px 0 15px;
}
#contents.top .introduction h2 {
    font-size: 1.13rem;
    margin: 20px 0;
    font-weight:bold;
}
#contents.top .introduction p {
    font-size: .81rem;
    padding-top:10px;
}
#contents.top .contentInner {
    margin: 20px 20px 0px;
}
#contents.top .bg_glay .contentInner {
    padding: 20px 0 40px;
}
#contents.top ul.category_top li .thumbCap {
    font-size: 1.13rem;
    bottom: 28%;
    font-weight:bold;
}

#contents.top ul.course_top li .thumbCap{
font-size:.81rem;
padding: 15px 10px;
}

  #recommendArea{
    padding:13.33% 0;
    padding:13.33vw 0;
  }
  #recommendArea > div{
    padding:0 2.66%;
    padding:0 2.66vw;
  }
  #recommendArea .secondDiv{
    padding-top:13.33%;
    padding-top:13.33vw;
  }
  #recommendArea h2{
    font-size: 1.5rem;
    font-size: 6.4vw;
    margin-bottom:.9em;
    padding: 0 1.25em;
    line-height: 1.3;
  }
  #recommendArea .clm4Block > li{
  max-width: 50%;
  float: left;
  padding-left: 5px;
  padding-right: 5px;
  margin-bottom:8.45%;
  margin-bottom:8vw;
  }
  #recommendArea .clm4Block > li:nth-child(2n-1){
  padding-left: 0px;
  }
  #recommendArea .clm4Block > li:nth-child(2n){
  padding-right: 0px;
  }
  #recommendArea .clm2Block > dd{
    font-size: .88rem;
    font-size: 3.3vw;
    padding: .5em 0;
  }

  #recommendArea .clm4Block > dd{
    font-size: .88rem;
    font-size: 3.3vw;
    padding: .5em 0;
  }

    #recommendArea .visibleWws .clm2Block > li,
  #recommendArea .countryVisible .clm2Block > li{
    float: none;
    width: 100%;
    max-width: 100%;
    margin-bottom:8.45%;
    margin-bottom:8vw;
  }

  #recommendArea dt h3{
    font-size:1rem;
    font-size:4.26vw;
  }

  #recommendArea dt p.mwbp-ttl-h3 {
    font-size:1rem;
    font-size:4.26vw;
  }
  #recommendArea dl,
  #recommendArea dt,
  #recommendArea dd{
    height: auto;
  }
  #recommendArea dd p{
    font-size: .88rem;
    font-size: 3.73vw;
	height:auto;
  }
  #recommendArea .visibleWws dd p,
  #recommendArea .countryVisible dd p{
    margin-bottom:.8em;
  }
  
  
/* コース紹介ページ */
#contents .second > ul > li{
margin-top:10px;
}
#contents .second .ttlBlock::after{
width: 100%;
}

#contents .second .ttlBlock.picR::after{
right: 0;
top:80px;
background-position: left center;
background-size: 100%;
}
#contents .second .course_area {
    width: 40%;
    height: auto;
    padding:10px;
background:rgba(255,255,255,0.7);
}
#contents.course .columnBlock {
padding: 0 20px;
}
#contents.course .introduction{
padding: 20px 20px 0;
}
#contents.course .ttlSubTxt{
font-size:.81rem;
margin-bottom: 30px;
}
#contents.course table {
font-size:.81rem;
margin-bottom:30px;
}
#contents.course p {
    font-size: .81rem;
    line-height: 1.8em;
}
#contents.course .layout_block {
    padding: 20px 0 40px;
}
#contents.course table th {
    width: 6em;
    text-align: center;
}
#contents.course h1, #contents.category h1 {
font-size: 1.25rem;
margin: 20px;
}
#contents.course h3 {
font-size: 1.25rem;
margin: 15px 0 10px;
}
#contents.category h2{
font-size:1.13rem;
padding:20px;
color:#3369C3;
margin-bottom:40px;
}

#contents .second .ttlBlock {
margin-bottom: 80px;
}
#contents .second .ttlBlock > .rightPic{
position:relative;
right: auto;
top: auto;
text-align: left;
background-position: left -460% center;
background-size: cover;
padding: 0;
}
#contents .second .ttlBlock > .rightPic > p:first-of-type{
width: 38.26%;
width: 38.26vw;
position: relative;
margin-left:2.67%;
padding:18vw 0 5.86%;
}
#contents .second .ttlBlock > .rightPic > h2{
padding: 20px;
margin: 0;
font-size: 1.13rem;
}
#contents .second .ttlBlock > div > h2 span{
margin:0.5em 0 1em;
font-size: .81rem;
padding: .5em .8em .3em;
}

#contents .second .ttlBlock > .leftPic{
position:relative;
left: auto;
top: auto;
text-align: right;
background-position: right -460% center;
background-size: cover;
}
#contents .second .ttlBlock > .leftPic > p:first-of-type {
position: relative;
margin-right:2.67%;
padding:18vw 0 5.86%;
}
#contents .second .ttlBlock > .leftPic > p:first-of-type img{
width: 38.26%;
width: 38.26vw;
}
#contents .second .ttlBlock > .leftPic > h3{
padding: .15em;
margin: 0 0 26.13vw 5.33vw;
font-size:1.88rem;
font-size:8vw;
}

#contents .second .ttlBlock .leftPic::before{
width:28%;
width:28vw;
}
#contents .second > ul {
padding:0 20px;
display: block;
font-size: 1rem;
width:100%;
margin: 0 auto;
}
#contents .second > ul > li{
display: block;
width:100%;
border-bottom:solid 2px #fff;
cursor : pointer;
}
#contents .second > ul > li > a .thumbCap{
font-size: 1rem;
font-size:4.26vw;
text-align: left;
line-height: 1;
opacity: 1;
background-color:rgba(0,20,25,.55);
top: inherit;
bottom:0;
left: 0;
height: auto;
padding: .5em;
transform: none;
}
#contents .second > ul > li > a .thumbImg{
height:150px;
height:40.26vw;
overflow: hidden;
}
#contents .second > ul > li > a .thumbImg img {
opacity: 1;
transform:translateY(-20%);
transition: none;
}
#contents .second > ul > li > a:hover .thumbImg img {
opacity: 1;
transform:translateY(-20%);
transition: none;
}

#contents.top ul.course_top {
display: block;
font-size: 1rem;
width:100%;
margin: 0 auto;
}
#contents.top ul.course_top > li{
display: block;
width:100%;
border-bottom:solid 2px #fff;
cursor : pointer;
margin-bottom:40px;
}
#contents.top ul.course_top > li > a .thumbCap{
font-size: 1rem;
font-size:4.26vw;
text-align: left;
line-height: 1;
opacity: 1;
background-color:rgba(0,20,25,.55);
top: inherit;
bottom:-20px;
left: 0;
height: auto;
padding: .5em;
transform: none;
}
#contents.top ul.course_top > li > a .thumbImg{
height:150px;
height:40.26vw;
overflow: hidden;
}
#contents.top ul.course_top > li > a .thumbImg img {
opacity: 1;
transform:translateY(-20%);
transition: none;
}
#contents.top ul.course_top > li > a:hover .thumbImg img {
opacity: 1;
transform:translateY(-20%);
transition: none;
}

/* カテゴリーページ */
#gourmet, #activity, #history {
    margin-top: 40px;
}
#contents.category h2 {
    margin-bottom: 20px;
}
#contents.top ul.category_top {
display: block;
font-size: 1rem;
width:100%;
margin: 0 auto;
}
#contents.top ul.category_top > li{
display: block;
width:100%;
border-bottom:solid 2px #fff;
cursor : pointer;
margin-bottom:20px;
}
#contents.top ul.category_top > li > a .thumbCap{
font-size: 1rem;
font-size:4.26vw;
text-align: left;
line-height: 1;
opacity: 1;
background-color:rgba(0,20,25,.55);
top: inherit;
bottom:-20px;
left: 0;
height: auto;
padding: .5em;
transform: none;
}
#contents.top ul.category_top > li > a .thumbImg{
height:150px;
height:40.26vw;
overflow: hidden;
}
#contents.top ul.category_top > li > a .thumbImg img {
opacity: 1;
transform:translateY(-20%);
transition: none;
}
#contents.top ul.category_top > li > a:hover .thumbImg img {
opacity: 1;
transform:translateY(-20%);
transition: none;
}
.modalWrapper{
width: 90%;
padding: 30px;
}

.modalWrapper p {
    font-size: .75rem;
    padding: 0 0 15px;
}

.followingAnchor > div > p{
font-size:.88rem;
font-size:3.2vw;
}


.btn_a{
width:100%;
float:none !important;
font-size:.75rem;
padding: 10px 20px!important;
}
.link_btn:nth-of-type(2){
margin-top:10px;
}
.btn_b{
width:100%;
float:none;
margin-top:10px;
font-size:.75rem;
padding: 10px 20px!important;
}


}

/* mwbp icon-blank*/
a.icon-blank { position: relative;}
.ico-blank-img {
width: 12px!important;
}
.ico-blank-img.ico-over-img {
position: absolute;
right: 2px;
bottom: 2px;
margin-right: 0;
background-color: #fff;
width: auto;
padding: 1px;
}
.ico-blank-img, .ico-pdf-img {
display: inline-block!important;
height: auto!important;
margin-right: .8em;
margin-left: .5em;
vertical-align: middle;
}

.top_link p a {
  text-decoration: underline;
}
.top_link p a:hover {
  text-decoration: none;
}
img.pt-bottom {
  bottom: -2px!important;
}

.mwbp-ico-blank-img.ico-blank-img.ico-over-img {
  right: -8px;
}
.mwbp-top_link {
  text-align: center;
}
.mwbp-top_link__theme {
  margin-top: 60px;
}