@charset "utf-8";
img { width:100%;}
.title { background: url(/img/howto/title_bk.jpg) center no-repeat; background-size: cover;text-shadow: 0px 0px 6px rgba(51, 51, 51, 0.8);}
.intro h3 { padding: 0 5%;}
.intro h3 img { max-width: 100%; width: auto; }

article { width: 100%; margin-top: 20px; margin-bottom: 60px; font-size:16px; line-height: 2em; }
article:last-of-type { margin-bottom: 0; }
article h4{ font-size:24px; color:#b78554; text-align: center; margin:25px 0 20px; }
article .txt {margin-bottom:20px;}

article#howto01,article#howto02,article#howto03,article#howto04{ padding-top: 180px; margin-top: -180px; }

.bk {
background:
    url(/img/top/bk_point07.png) 0 0 no-repeat,
    url(/img/top/bk_point01.png) 100% 160px no-repeat;
}

.txt { margin: 40px 0;}
.txt h4 { font-size: 24px; color: #b78554; text-align: center; margin-bottom:30px;}
.howto_image01 dl { width: 100%;clear:both;display:flex;align-items:center;position:relative; }
.howto_image01 dl + dl{margin-top:20px;}
.howto_image01 dt{width:50%;}
.howto_image01 dd {background: #fff;padding:30px 0 30px 30px;width: 50%;box-sizing: border-box;}
.howto_image01 dd h5{font-size:18px;margin-bottom:10px;}
.howto_image01 dd h5:not(:first-child){margin-top:20px;}
.howto_image01 dd .note{margin-top: 10px;color:#b78554;font-size:14px;}
.howto_image01.right dl {flex-direction: row-reverse; }
.howto_image01.right dd {padding:30px 30px 30px 0;}

.tour_link { margin: 80px 0; text-align: center; line-height: 1.5em; }
.tour_link h3 { font-size: 28px; margin-bottom: 30px; color: #b78554; }
.tour_link p { width: 96%; margin: 0 auto 30px; }
.tour_link .tour_link_inner { padding: 60px 0 100px; background-image: url(../..//img/activity/tourlink_bg_btm.png);
  background-position: center; background-repeat: no-repeat; background-size: cover; background-color: #e9eff6;}

.act_link_btn { width: 100%; max-width: 240px; height: 40px; display: table; }
.act_link_btn a { display: table-cell; vertical-align: middle; text-align: center; font-size: 14px; font-weight: bold; color: #b78554;box-sizing: border-box; border: solid 1px #b78554; background: #FFF; transition: 0.3s; position: relative; }
.act_link_btn a:hover { opacity: 0.6; }
.act_link_btn.back,.act_link_btn.readmore { margin: auto; max-width: 320px; height: 50px; }
.act_link_btn.readmore a { background: #000; color: #FFF; border: solid 1px #000; }
.act_link_btn.readmore a:after { content: ""; width: 6px; height: 12px; background: url(../../img/common/arrow_next_w.png) center / 6px 12px no-repeat;
position: absolute; top: 1.25em; right: 2em; transition: 0.2s; }
.act_link_btn.readmore a:hover { background: #FFF; color: #000; opacity: 1; }
.act_link_btn.readmore a:hover:after { background: url(../../img/common/arrow_next_b.png) center / 6px 12px no-repeat; right: 1.5em; }


@media print, screen and (min-width: 901px) and (max-width: 1100px) {
button#room-prev { width: 30px; height: 30px; background: url(../../img/common/maru_prev.png) 0 0 / 100% no-repeat; left: -15px; }
button#room-next { width: 30px; height: 30px; background: url(../../img/common/maru_next.png) 0 0 / 100% no-repeat; right: -15px; }

article .txt { width: 45%; float:left; margin-right: 3%; }
}

@media print, screen and (max-width: 900px) {
    .howto_image01 dd {padding:10px 0 10px 20px;}
    .howto_image01.right dd {padding:10px 20px 10px 0;}
}

@media print, screen and (max-width: 640px) {
    .bk { background: none}
    .intro {
    background:
                url(/img/top/bk_point01.png) 120% 0 / 50% no-repeat,
                url(/img/top/bk_point07.png) 0 50% / 40% no-repeat;
    }
    article { width: 100%; margin-bottom:60px; }
    article#howto01, article#howto02, article#howto03, article#howto04 {
        padding-top: 60px;
        margin-top: -60px;
    }
    .intro .block_inner { margin: 30px auto 0;}
    button#room-prev { width: 40px; height: 40px; background: url(../../img/common/maru_prev.png) 0 0 / 100% no-repeat; left: -15px; }
    button#room-next { width: 40px; height: 40px; background: url(../../img/common/maru_next.png) 0 0 / 100% no-repeat; right: -15px; }

    .howto_image01 dl,.howto_image01.right dl {flex-direction: column;}
    .howto_image01 dt,.howto_image01.right dt{width:100%;}
    .howto_image01 dd,.howto_image01.right dd {padding:20px 0 20px;width: 100%;}
    
    .act_detail_table td p{font-size: 1em;}
    .act_link_btn { max-width: inherit; height: 60px; }
    .act_link_btn a { font-size: 16px;}

}