body {
line-height: 1.8;
font-size: 14px;
}


@media screen and (max-width: 550px) {
.hero-area {
margin:0 -10px;
}
}

.topic-path h1{
display: inline-block;
font-weight: normal;
}

/* hdg
--------------------------------------------------*/
.hdg-lv2 {
margin-top: 40px;
text-align:center;
}

.hdg-l2-01{
font-size: 20px;
font-weight: normal;
margin: 50px 0 10px;
padding: 7px 15px 5px;
border-top: 2px solid #ccc;
background-color: #f5f5f5;
}

.hdg-lv3-01,
.hdg-lv3-02 {
position:relative;
padding:0 40px;
margin: 45px auto 20px;
}

.hdg-lv3-01:before {
content: "";
display: block;
position: absolute;
top: 50%;
left: 0;
width: 100%;
margin-top: -8px;
height:21.85%;
background: #755c31;
z-index:0;
}

.hdg-lv3-02:before {
content: "";
display: block;
position: absolute;
top: 50%;
left: 0;
width: 100%;
margin-top: -8px;
height:21.85%;
background: #e95515;
z-index:0;
}

.hdg-lv3-01 span,
.hdg-lv3-02 span {
position: relative;
display: block;
text-align: center;
z-index:1;
}

[class^="hdg-lv4"] {
font-size: 18px;
box-sizing: border-box;
line-height:1.2;
}

.hdg-lv4-01 {
margin: 10px 0;
}

.hdg-lv4-02 {
margin: 0 0 10px;
padding: 3px 0 3px 30px;
position:relative;
}

.hdg-lv4-02:before {
content:"";
width: 16px;
height:16px;
border:solid 4px #e95515;
position:absolute;
top:0;
left:0;
border-radius: 100%;
}

.hdg-lv5 {
margin-bottom: 20px;
font-size: 20px;
line-height: 1.5;
text-align:center;
}

.hdg-lv5 span {
padding-left: 40px;
position:relative;
}

.hdg-lv5 span:before {
content:"";
display:block;
position:absolute;
top:0;
height: 30px;
background:url(/j_special/hokkaido_model/images/sprite-icon.png) no-repeat;
}

.box-optional .hdg-lv5 span:before {
left:0;
width: 35px;
background-position: 0 0;
}

.box-hotel .hdg-lv5 span:before {
left: 0;
width: 35px;
background-position: -39px 0;
}

.box-rentacar .hdg-lv5 span:before {
left:-10px;
width: 45px;
background-position: -75px 0;
}


.hdg-lv6 {
font-size: 14px;
line-height: 1.5;
}

.hdg-lv6 a {
text-decoration: none;
}

.hdg-lv6 a:hover {
text-decoration: underline;
}

.hdg-lv6 span {
font-weight: normal;
}

@media screen and (max-width: 720px) {
.hdg-lv4-02 {
padding:0;
}

.hdg-lv4-02:before{
display:none;
}
}

@media screen and (max-width: 550px) {
.hdg-lv3-01:before,
.hdg-lv3-02:before {
margin-top: -4px;
height:8px;
}

.hdg-lv4-02 {
margin: 5px 0 10px;
}

.hdg-lv5 {
font-size: 15px;
text-align:left;
margin-bottom: 10px;
}

.hdg-lv5 span {
padding-left:0;
}

.hdg-lv5 span:before {
display:none;
}

}

/* intro
--------------------------------------------------*/
.intro {
text-align:center;
margin: 20px 0;
}

@media screen and (max-width: 720px) {
.intro {
text-align:left;
}

.intro br{
display:none;
}
}


/* nav-internal
--------------------------------------------------*/
.nav-internal {
margin:10px -5px 0;
overflow:hidden;
}

.nav-internal li {
width: 20%;
float:left;
margin-bottom: 10px;
padding:0 5px;
text-align: center;
box-sizing: border-box;
}

.nav-internal li img {
opacity: 1;
}

.nav-internal li a:hover img{
transition-property: opacity;
transition-duration: 0.4s;
transition-timing-function: ease-out;
opacity: .6;
}

@media screen and (max-width: 720px) {
.nav-internal li {
width: 50%;
}
}

/* Image
--------------------------------------------------*/
.item-box img {
width: 100%;
}

.img-map {
margin-bottom: 15px;
}

@media screen and (max-width: 550px) {
.img-map {
height:0;
width: 100%;
padding-top: 60%;
}

.img-map img {
display:none;
}

.img-map.area01 {
background-repeat: no-repeat;
background-image: url(/j_special/hokkaido_model/images/map-bg-01-01.png);
background-size: 100%;
}

.img-map.area02 {
background-repeat: no-repeat;
background-image: url(/j_special/hokkaido_model/images/map-bg-02-01.png);
background-size: 100%;
}

.img-map.area03 {
background-repeat: no-repeat;
background-image: url(/j_special/hokkaido_model/images/map-bg-03-01.png);
background-size: 100%;
}

.img-map.area04 {
background-repeat: no-repeat;
background-image: url(/j_special/hokkaido_model/images/map-bg-04-01.png);
background-size: 100%;
}

.img-map.area05 {
background-repeat: no-repeat;
background-image: url(/j_special/hokkaido_model/images/map-bg-05-01.png);
background-size: 100%;
}
}


.img-secret {
max-width:280px;
}

/* box
--------------------------------------------------*/
.box {
margin:0 30px;
}

.box p {
margin: 10px 0;
}

.box-secret .item-box{
margin-bottom: 25px;
}

.box-ranking {
border-style:solid;
border-width: 4px 1px 1px;
border-color:#ccc;
margin-top: -1px;
margin:0 30px;
padding: 20px 40px 10px;
}

.box-plan {
margin-bottom: 20px;
}

.box-plan .route {
display:block;
position: relative;
z-index: 1;
margin: 0;
max-width: 960px;
height: 0;
padding-top: 6.05%;
background-repeat: no-repeat;
background-position: 0 0;
overflow:hidden;
}

.route ol {
list-style-type: none;
margin:0;
}

.route ol li {
display:inline;
}

.route ol li:after {
content:"\ff0f";
margin-right: -.3em;
}

.route ol li:last-child:after {
content:"";
}

.box-plan.area01-01 .route {
background-image: url(/j_special/hokkaido_model/images/bg-route-01-01.png);
background-size: 100%;
}
.box-plan.area01-02 .route {
background-image: url(/j_special/hokkaido_model/images/bg-route-01-02.png);
background-size: 100%;
}
.box-plan.area01-03 .route {
background-image: url(/j_special/hokkaido_model/images/bg-route-01-03.png);
background-size: 100%;
}

.box-plan.area02-01 .route {
background-image: url(/j_special/hokkaido_model/images/bg-route-02-01.png);
background-size: 100%;
}
.box-plan.area02-02 .route {
background-image: url(/j_special/hokkaido_model/images/bg-route-02-02.png);
background-size: 100%;
}
.box-plan.area02-03 .route {
background-image: url(/j_special/hokkaido_model/images/bg-route-02-03.png);
background-size: 100%;
}

.box-plan.area03-01 .route {
background-image: url(/j_special/hokkaido_model/images/bg-route-03-01.png);
background-size: 100%;
}
.box-plan.area03-02 .route {
background-image: url(/j_special/hokkaido_model/images/bg-route-03-02.png);
background-size: 100%;
}
.box-plan.area03-03 .route {
background-image: url(/j_special/hokkaido_model/images/bg-route-03-03.png);
background-size: 100%;
}

.box-plan.area04-01 .route {
background-image: url(/j_special/hokkaido_model/images/bg-route-04-01.png);
background-size: 100%;
}
.box-plan.area04-02 .route {
background-image: url(/j_special/hokkaido_model/images/bg-route-04-02.png);
background-size: 100%;
}
.box-plan.area04-03 .route {
background-image: url(/j_special/hokkaido_model/images/bg-route-04-03.png);
background-size: 100%;
}

.box-plan.area05-01 .route {
background-image: url(/j_special/hokkaido_model/images/bg-route-05-01.png);
background-size: 100%;
}
.box-plan.area05-02 .route {
background-image: url(/j_special/hokkaido_model/images/bg-route-05-02.png);
background-size: 100%;
}
.box-plan.area05-03 .route {
background-image: url(/j_special/hokkaido_model/images/bg-route-05-03.png);
background-size: 100%;
}

.box-plan .detail {
font-size: 12px;
margin: -3px 0 0 7.25%;
}


@media screen and (max-width: 720px) {
.box {
margin:0 10px;
}

.box-plan .route{
margin:10px 0;
height:auto;
padding:0;
line-height: 1.4;
font-size: 14px;
font-weight: bold;
}

.box-plan.area01-01 .route,
.box-plan.area02-01 .route,
.box-plan.area03-01 .route,
.box-plan.area04-01 .route,
.box-plan.area05-01 .route {
background-image: none;
color:#0099c5;
}

.box-plan.area01-02 .route,
.box-plan.area02-02 .route,
.box-plan.area03-02 .route,
.box-plan.area04-02 .route,
.box-plan.area05-02 .route {
background-image: none;
color:#f53272;
}

.box-plan.area01-03 .route,
.box-plan.area02-03 .route,
.box-plan.area03-03 .route,
.box-plan.area04-03 .route,
.box-plan.area05-03 .route {
background-image: none;
color:#9360df;
}

.box-plan .route b{
display:block;
width: 3.5em;
padding:3px 0;
margin-bottom: 5px;
text-align:center;
color:#fff;
}

.box-plan.area01-01 .route b,
.box-plan.area02-01 .route b,
.box-plan.area03-01 .route b,
.box-plan.area04-01 .route b {
background:#0099c5;
}

.box-plan.area01-02 .route b,
.box-plan.area02-02 .route b,
.box-plan.area03-02 .route b,
.box-plan.area04-02 .route b  {
background:#f53272;
}

.box-plan.area01-03 .route b,
.box-plan.area02-03 .route b,
.box-plan.area03-03 .route b,
.box-plan.area04-03 .route b  {
background:#9360df;
}

.box-plan .detail {
margin: 0;
}
}

@media screen and (max-width: 550px) {
.box {
font-size: 12px;
}

.box-inner {
margin:0 10px;
}
}


/* .btn-search
--------------------------------------------------*/
.btn-search {
margin:0;
}

.btn-search li {
border-radius: 4px;
line-height: 1.4;
background:#369600;
padding-bottom: 2px;
}

.btn-search a{
display:block;
text-align:center;
color:#fff;
padding: 12px 5px 10px;
text-decoration: none;
font-weight: bold;
font-size: 16px;
background:#73b613;
border-radius: 4px;
min-height: 1em;
}

.btn-search a:hover {
color:#fcee4d;
}

@media screen and (max-width: 940px) {
.btn-search a {
min-height: 3em;
}
}


@media screen and (max-width: 720px) {
.btn-search {
margin:-10px 0 0;
}

.btn-search a {
min-height:inherit;
}

.box-ranking {
padding: 10px;
margin: 0 10px;
}
}


/* ranking
--------------------------------------------------*/
.box-optional .item-box {
margin-bottom: 30px;
}

.box-optional .outline {
font-size:12px;
}

.box-optional .img-box{
overflow:hidden;
}

.box-optional .optional-img {
width: 144px;
height: auto;
}

.box-optional .optional-info{
text-align:left;
}

.box-hotel .item-box{
padding-bottom: 30px;
}

.tbl-score th {
font-size:11px;
text-align:left;
font-weight:normal;
vertical-align: top;
width: 7em;
}

.tbl-score td {
line-height: 1.2;
}

.tbl-score td img{
width: auto;
vertical-align: top;
margin: 2px 1px 0 0;
}

.tbl-score  td span.text {
font-size: 11px;
}

.tbl-score  td span[class^="review"] {
font-weight: bold;
}

.tbl-score  td span[class^="review"]:before {
content: '';
display: inline-block;
margin: 0 3px 0 0;
padding: 13px 0 0 0;
width: 75px;
height: 0;
vertical-align: top;
overflow: hidden;
background-image: url(/element/j_hotel/index/images/special_ps01_001.png);
background-repeat: no-repeat;
}

.tbl-score  td .review00:before {
background-position: -75px 0;
}

.tbl-score  td .review05:before {
background-position: -60px -20px;
}

.tbl-score  td .review10:before {
background-position: -60px 0;
}

.tbl-score  td .review15:before {
background-position: -45px -20px;
}

.tbl-score  td .review20:before {
background-position: -45px 0;
}

.tbl-score  td .review25:before {
background-position: -30px -20px;
}

.tbl-score  td .review30:before {
background-position: -30px 0;
}

.tbl-score  td .review35:before {
background-position: -15px -20px;
}

.tbl-score  td .review40:before {
background-position: -15px 0px;
}

.tbl-score  td .review45:before {
background-position: 0 -20px;
}

.tbl-score  td .review50:before {
background-position: 0 0;
}

.rentacar-img{
width:144px;
}

.box-optional .sup {
display:inline-block;
padding:0 5px;
border:solid 1px #ccc;
}

.sup {
font-size:13px;
margin:0;
color:#333;
}

.price {
color:#ff0000;
margin:0;
font-size: 14px;
font-weight: bold;
}

.price b {
font-size: 18px;
}

@media screen and (max-width: 900px) {
.box-optional .cmn-image,
.box-rentacar .cmn-image{
float:none;
max-width: 100%;
}

.box-optional .optional-img,
.box-rentacar .rentacar-img {
float:left;
margin-right: 10px;
}
}

@media screen and (max-width: 550px) {
.box-hotel .item-box{
padding-bottom: 10px;
margin-bottom: 10px;
border-bottom: solid 1px #ccc;
}

.box-hotel :last-child {
border-bottom: none;
}
}


/* nav-top
--------------------------------------------------*/
.link-top {
position: relative;
padding: 0 8px 8px 20px;
margin-bottom:60px;
text-align:right;
}

.link-top:before {
position: absolute;
display: inline-block;
display: block;
width: 0;
height: 0;
margin: 0;
content: '';
border-style: solid;
border-color: transparent transparent #0b41a1;
top: 8px;
right: 11em;
border-width: 0 4px 6px;
}

@media screen and (max-width: 550px) {
.link-other-tour{
display:none;
}
.link-top{
margin: -20px -10px 5px 0;
}
}


/* .page-info
----------------------------------------------- */

.page-info {
margin-top: 40px;
border-top: 1px solid #ddd;
}

/* .sns
----------------------------------------------- */

.sns li {
display: inline-block;
margin-left: 10px;
vertical-align: top;
}

.sns li:first-child {
margin-left: 0;
}

/* ----------------------------------------------------------------
  related item
----------------------------------------------------------------- */
/* .related-container
----------------------------------------------- */
.related-container {
padding: 0 15px;
}

/* .related
----------------------------------------------- */

.related {
font-size: 13px;
position: relative;
min-height: 140px;
margin-top: 10px;
padding-left: 150px;
}

.related a {
text-decoration: none;
color: #333;
}

.related a:active .related-hdg,
.related a:hover .related-hdg,
.related a:focus .related-hdg {
text-decoration: underline;
}

.related .related-hdg {
font-size: 18px;
font-weight: bold;
line-height: 1.25;
margin-bottom: -10px;
color: #0b41a1;
}

.related .related-thumb {
position: absolute;
top: 0;
left: 0;
}

@media screen and (max-width: 720px) {
.related-container {
padding: 0;
}

.related {
min-height: 110px;
padding-left: 110px;
}

.related .related-hdg {
font-size: 15px;
}

.related .related-thumb {
max-width: 100px;
}
}

@media screen and (max-width: 550px) {
.related-container {
margin-top: -10px;
}

.related {
margin-top: 20px;
}
}

/* ----------------------------------------------------------------
  Common Sprite Icons
----------------------------------------------------------------- */
/* review-rate
----------------------------------------------- */
.review-rate {
font-size: 11px;
}

.review-rate .btn-qa {
font-size: 9px;
font-weight: bold;
line-height: 1;
display: inline-block;
margin: 0 4px;
padding: 0 2px;
color: #56a5f4;
border: 1px solid #98cfff;
border-radius: 2px;
text-decoration: none;
}

.review-rate .icon-qa {
margin: 0 5px;
vertical-align: middle;
cursor: pointer;
}

[class^='icon-r-'] span {
line-height: 2;
display: inline-block;
overflow: hidden;
width: 69px;
height: 0;
padding-top: 13px;
content: '';
vertical-align: middle;
background-image: url(/element/shared/images/sprite/sprite-icon-rate.png);
background-repeat: no-repeat;
}

[class^='icon-r-'].icon-r-shopping span,
[class^='icon-r-'].icon-r-attraction span,
[class^='icon-r-'].icon-r-restaurant span{
width: 63px;
padding-top: 10px;
}

[class^='icon-r-'].icon-r-face.rank-5 span {
background-position: -10px -9px;
}

[class^='icon-r-'].icon-r-face.rank-45 span {
background-position: -10px -40px;
}

[class^='icon-r-'].icon-r-face.rank-4 span {
background-position: -24px -9px;
}

[class^='icon-r-'].icon-r-face.rank-35 span {
background-position: -24px -40px;
}

[class^='icon-r-'].icon-r-face.rank-3 span {
background-position: -38px -9px;
}

[class^='icon-r-'].icon-r-face.rank-25 span {
background-position: -38px -40px;
}

[class^='icon-r-'].icon-r-face.rank-2 span {
background-position: -52px -9px;
}

[class^='icon-r-'].icon-r-face.rank-15 span {
background-position: -52px -40px;
}

[class^='icon-r-'].icon-r-face.rank-1 span {
background-position: -66px -9px;
}

[class^='icon-r-'].icon-r-face.rank-05 span {
background-position: -66px -40px;
}

[class^='icon-r-'].icon-r-face.rank-0 span {
background-position: -80px -9px;
}

[class^='icon-r-'].icon-r-price.rank-5 span {
background-position: -10px -138px;
}

[class^='icon-r-'].icon-r-price.rank-45 span {
background-position: -10px -171px;
}

[class^='icon-r-'].icon-r-price.rank-4 span {
background-position: -24px -138px;
}

[class^='icon-r-'].icon-r-price.rank-35 span {
background-position: -24px -171px;
}

[class^='icon-r-'].icon-r-price.rank-3 span {
background-position: -38px -138px;
}

[class^='icon-r-'].icon-r-price.rank-25 span {
background-position: -38px -171px;
}

[class^='icon-r-'].icon-r-price.rank-2 span {
background-position: -52px -138px;
}

[class^='icon-r-'].icon-r-price.rank-15 span {
background-position: -52px -171px;
}

[class^='icon-r-'].icon-r-price.rank-1 span {
background-position: -66px -138px;
}

[class^='icon-r-'].icon-r-price.rank-05 span {
background-position: -66px -171px;
}

[class^='icon-r-'].icon-r-price.rank-0 span {
background-position: -80px -138px;
}

[class^='icon-r-'].icon-r-hotel.rank-5 span {
background-position: -10px -72px;
}

[class^='icon-r-'].icon-r-hotel.rank-45 span {
background-position: -10px -105px;
}

[class^='icon-r-'].icon-r-hotel.rank-4 span {
background-position: -24px -72px;
}

[class^='icon-r-'].icon-r-hotel.rank-35 span {
background-position: -24px -105px;
}

[class^='icon-r-'].icon-r-hotel.rank-3 span {
background-position: -38px -72px;
}

[class^='icon-r-'].icon-r-hotel.rank-25 span {
background-position: -38px -105px;
}

[class^='icon-r-'].icon-r-hotel.rank-2 span {
background-position: -52px -72px;
}

[class^='icon-r-'].icon-r-hotel.rank-15 span {
background-position: -52px -105px;
}

[class^='icon-r-'].icon-r-hotel.rank-1 span {
background-position: -66px -72px;
}

[class^='icon-r-'].icon-r-hotel.rank-05 span {
background-position: -66px -105px;
}

[class^='icon-r-'].icon-r-hotel.rank-0 span {
background-position: -80px -72px;
}

[class^='icon-r-'].icon-r-shopping.rank-5 span {
background-position: -10px -204px;
}

[class^='icon-r-'].icon-r-shopping.rank-45 span {
background-position: -10px -234px;
}

[class^='icon-r-'].icon-r-shopping.rank-4 span {
background-position: -23px -204px;
}

[class^='icon-r-'].icon-r-shopping.rank-35 span {
background-position: -23px -234px;
}

[class^='icon-r-'].icon-r-shopping.rank-3 span {
background-position: -37px -204px;
}

[class^='icon-r-'].icon-r-shopping.rank-25 span {
background-position: -37px -234px;
}

[class^='icon-r-'].icon-r-shopping.rank-2 span {
background-position: -50px -204px;
}

[class^='icon-r-'].icon-r-shopping.rank-15 span {
background-position: -50px -234px;
}

[class^='icon-r-'].icon-r-shopping.rank-1 span {
background-position: -63px -204px;
}

[class^='icon-r-'].icon-r-shopping.rank-05 span {
background-position: -63px -234px;
}

[class^='icon-r-'].icon-r-shopping.rank-0 span {
background-position: -77px -204px;
}

[class^='icon-r-'].icon-r-attraction.rank-5 span {
background-position: -10px -264px;
}

[class^='icon-r-'].icon-r-attraction.rank-45 span {
background-position: -10px -294px;
}

[class^='icon-r-'].icon-r-attraction.rank-4 span {
background-position: -23px -264px;
}

[class^='icon-r-'].icon-r-attraction.rank-35 span {
background-position: -23px -294px;
}

[class^='icon-r-'].icon-r-attraction.rank-3 span {
background-position: -37px -264px;
}

[class^='icon-r-'].icon-r-attraction.rank-25 span {
background-position: -37px -294px;
}

[class^='icon-r-'].icon-r-attraction.rank-2 span {
background-position: -50px -264px;
}

[class^='icon-r-'].icon-r-attraction.rank-15 span {
background-position: -50px -294px;
}

[class^='icon-r-'].icon-r-attraction.rank-1 span {
background-position: -63px -264px;
}

[class^='icon-r-'].icon-r-attraction.rank-05 span {
background-position: -63px -294px;
}

[class^='icon-r-'].icon-r-attraction.rank-0 span {
background-position: -77px -264px;
}

[class^='icon-r-'].icon-r-restaurant.rank-5 span {
background-position: -10px -324px;
}

[class^='icon-r-'].icon-r-restaurant.rank-45 span {
background-position: -10px -354px;
}

[class^='icon-r-'].icon-r-restaurant.rank-4 span {
background-position: -23px -324px;
}

[class^='icon-r-'].icon-r-restaurant.rank-35 span {
background-position: -23px -354px;
}

[class^='icon-r-'].icon-r-restaurant.rank-3 span {
background-position: -37px -324px;
}

[class^='icon-r-'].icon-r-restaurant.rank-25 span {
background-position: -37px -354px;
}

[class^='icon-r-'].icon-r-restaurant.rank-2 span {
background-position: -50px -324px;
}

[class^='icon-r-'].icon-r-restaurant.rank-15 span {
background-position: -50px -354px;
}

[class^='icon-r-'].icon-r-restaurant.rank-1 span {
background-position: -63px -324px;
}

[class^='icon-r-'].icon-r-restaurant.rank-05 span {
background-position: -63px -354px;
}

[class^='icon-r-'].icon-r-restaurant.rank-0 span {
background-position: -77px -324px;
}