.pc{display: block;}
.sp{display: none;}
.image div {padding: 30px;background: #000;border-radius: 1px;color: #fff;}
.image div p {font-size: 16px;line-height: 1.5em;}
.image img{object-fit: cover;}
.places h3,.places h2{margin: 0 0 20px;font-size: 24px;line-height: 1.3em;letter-spacing: 0;font-weight: 400;color: #3c6478;}
.forecast-txt{padding: 20px; background: #f6f5f4;height: fit-content;}
section.contents li{letter-spacing: 0;vertical-align: top;}
section.contents li a{padding: 10px;}
section.contents li a img{border-radius: 2px;object-fit: cover;aspect-ratio: 16/11;}    
section.contents li a span{ color: #28d;}   
section.contents li a:hover{text-decoration: none;}
.forecast-txt tr{font-weight: 400;color: #444;}
.forecast .text-center img{width: 80%;}

.contents .detail h2 {margin: 6px 0 10px;font-size: 24px;line-height: 30px;color: #3c6478;font-weight: 400;}
.contents .detail i {width: 360px;height: 240px;}
.contents .detail table {border-collapse: collapse;border-spacing: 0;height: 240px;}
.contents .detail table th {background: #f6f5f4;width: 30%;}
.contents .detail table td, .contents .detail table th {word-break: break-all;padding: 11px;border: 1px solid #ccc;font-size: 14px;line-height: 1.3em;}
.contents .photos ul li {letter-spacing: 0;vertical-align: top;}
.contents .photos ul li>* {position: relative;display: block;padding: 10px;font-size: 14px;line-height: 1.5em;color: #444;text-decoration: none;}
.contents .photos ul li img{width: 100%;height: unset;}
.contents .explains h2{margin: 0 0 10px;font-size: 20px;line-height: 1.3em;color: #3c6478;font-weight: 400;}
.contents .map #map {width: 100%;}
.contents .hotels h2 {margin: 10px 0 20px;font-size: 20px;line-height: 1.3em;color: #3c6478;font-weight: 400;}
.contents .hotels ul li {margin-bottom: 20px;}
.contents .hotels ul li a {color: #444;text-decoration: none;background: #f6f5f4;padding: 0 !important;}
.contents .hotels ul li a dl dt i {background-repeat: no-repeat;background-position: 50%;height: 180px;width: auto;background-size: cover;}
.contents .hotels ul li a dl dd {padding: 10px 12px 12px; margin: 0;} 
.contents .hotels ul li a dl dd b {font-size: 17px;font-weight: 600;padding-bottom: 8px;}
.contents .hotels ul li a dl dd b em {font-size: 13px;display: block;font-weight: 400;}
.contents .hotels ul li a dl dd p img {display: inline-block;margin-right: 8px;vertical-align: middle;height: unset;aspect-ratio: unset;}
.contents .hotels ul li a dl dd div p object a {font-size: 12px;display: block;height: 24px;line-height: 25px;background: #ff7d73;color: #fff;font-weight: 600;cursor: pointer;padding: 0 12px !important;}



@media screen and (min-width:769px) {
  main.sakura,main.area{max-width: 1024px;margin: 0 auto;}
    section.detail .img{width: 50%; margin: 50px auto;}
    section.image{height: 300px;}
    .image div {opacity: .6;width: 90%;}
    .contents .detail,.contents .photos,.contents .explains
    ,.contents .map,.contents .hotels,.contents .places{padding: 0 0 40px;}
    section.contents li{width: 25%;}
    .contents .detail table {width: 100%;}
    .contents .photos ul li {width: 25%;}
    .contents .map #map {height: 400px;}
    .lity-close {right: -5%;}
    .contents,.forecast,.places{padding: 40px 40px 0;}
    .places{margin-bottom: 40px;}
    .search-area{margin: 50px 0;}
    .search-area h2{margin: 5px 0;color: #444;font-size: 18px;}
    .search-area input{height: 33px;margin-left: 10px;margin-right: 10px;width: 270px;}
    .search-area button{height: 33px; width: 75px; background-color: #2271b1;color: #fff;border: solid 1px#2271b1; border-radius: 3px;}
}

@media screen and (max-width:768px){
  .pc{display: none;}
  .sp{display: block;}
  section{margin-bottom: 50px;}
    .header h1{margin-top: 15px;}
    section.contents li{width: 50%;}
    .contents{padding:0 ;}
    .contents .explanation .explains{margin: 50px 0;}
    .contents .places {margin: 0 0 30px;}
    section.forecast {margin: 0 0 30px;}
    .places h3,.places h2{font-size: 20px;}
    .contents .detail table {margin-top: 15px;table-layout: fixed;width: 100%;}
    .contents .photos ul li {width: 50%;}
    .contents .map #map {height: 200px;}
    section.contents .hotels li {width: 100%;}
    .contents .hotels ul li a dl dt i {height: 150px;width: 120px;}
    .contents .hotels ul li a dl dd div p{font-size: 13px;}
    .lity-container {max-width: 80% !important;}
    .lity-close {right: -10%;}
    section.contents li a span{font-size: 12px;}
    .search-area{margin: 30px 0;display: flex;flex-flow: column;}
    .search-area h2{margin: 0; color: #444;}
    .search-area input{height: 33px;}
    .search-area button{height: 33px; width: 100%; margin: 10px auto 0;background-color: #2271b1;color: #fff;border: solid 1px#2271b1; border-radius: 3px;}
}
@media screen and (min-width: 769px){
    .contents .hotels ul li {width: calc(33% - 0px);padding: 10px;box-sizing: border-box;}
    .contents .hotels ul li a dl dd {height: 173px;}
    .contents .hotels ul li a {height: unset;}
}
@media screen and (min-width: 1365px){
    .contents .hotels ul li {width: calc(33% - 0px);padding: 10px;box-sizing: border-box;}
    .contents .hotels ul li a dl dd {height: unset;}
    .contents .hotels ul li a {height: 335px;}
}

/*! Lity - v2.2.2 - 2017-07-17
* http://sorgalla.com/lity/
* Copyright (c) 2015-2017 Jan Sorgalla; Licensed MIT */
.lity {
    z-index: 999;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    white-space: nowrap;
    background: #0b0b0b;
    background: rgba(0, 0, 0, 0.6);
    outline: none !important;
    opacity: 0;
    -webkit-transition: opacity 0.3s ease;
    -o-transition: opacity 0.3s ease;
    transition: opacity 0.3s ease;
  }
  .lity.lity-opened {
    opacity: 1;
  }
  .lity.lity-closed {
    opacity: 0;
  }
  .lity * {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
  }
  .lity-wrap {
    z-index: 999;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    text-align: center;
    outline: none !important;
  }
  .lity-wrap:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin-right: -0.25em;
  }
  .lity-loader {
    z-index: 999;
    color: #fff;
    position: absolute;
    top: 50%;
    margin-top: -0.8em;
    width: 100%;
    text-align: center;
    font-size: 14px;
    font-family: Arial, Helvetica, sans-serif;
    opacity: 0;
    -webkit-transition: opacity 0.3s ease;
    -o-transition: opacity 0.3s ease;
    transition: opacity 0.3s ease;
  }
  .lity-loading .lity-loader {
    opacity: 1;
  }
  .lity-container {
    height: 380px;
    z-index: 999;
    position: relative;
    text-align: left;
    vertical-align: middle;
    display: inline-block;
    white-space: normal;
    max-width: 100%;
    max-height: 100%;
    outline: none !important;
  }
  .lity-content {
    z-index: 999;
    width: 100%;
    -webkit-transform: scale(1);
        -ms-transform: scale(1);
         -o-transform: scale(1);
            transform: scale(1);
    -webkit-transition: -webkit-transform 0.3s ease;
    transition: -webkit-transform 0.3s ease;
    -o-transition: -o-transform 0.3s ease;
    transition: transform 0.3s ease;
    transition: transform 0.3s ease, -webkit-transform 0.3s ease, -o-transform 0.3s ease;
  }
  .lity-content img{height: 100%;object-fit: cover;}
  .lity-loading .lity-content,
  .lity-closed .lity-content {
    -webkit-transform: scale(0.8);
        -ms-transform: scale(0.8);
         -o-transform: scale(0.8);
            transform: scale(0.8);
  }
  .lity-content:after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    display: block;
    right: 0;
    width: auto;
    height: auto;
    z-index: -1;
    -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
            box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
  }
  .lity-close {
    z-index: 9990;
    width: 35px;
    height: 35px;
    position: absolute;
    top: 0;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    padding-left: 10px;
    color: #fff;
    font-style: normal;
    font-size: 35px;
    font-family: Arial, Baskerville, monospace;
    line-height: 35px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
    border: 0;
    background: none;
    outline: none;
    -webkit-box-shadow: none;
            box-shadow: none;
  }
  .lity-close::-moz-focus-inner {
    border: 0;
    padding: 0;
  }
  .lity-close:hover,
  .lity-close:focus,
  .lity-close:active,
  .lity-close:visited {
    text-decoration: none;
    text-align: center;
    padding-left: 10px;
    color: #fff;
    font-style: normal;
    font-size: 35px;
    font-family: Arial, Baskerville, monospace;
    line-height: 35px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
    border: 0;
    background: none;
    outline: none;
    -webkit-box-shadow: none;
            box-shadow: none;
  }
  .lity-close:active {
    top: 1px;
  }
  /* Image */
  .lity-image img {
    max-width: 100%;
    display: block;
    line-height: 0;
    border: 0;
  }
  /* iFrame */
  .lity-iframe .lity-container,
  .lity-youtube .lity-container,
  .lity-vimeo .lity-container,
  .lity-facebookvideo .lity-container,
  .lity-googlemaps .lity-container {
    width: 100%;
    max-width: 964px;
  }
  .lity-iframe-container {
    width: 100%;
    height: 0;
    padding-top: 56.25%;
    overflow: auto;
    pointer-events: auto;
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
    -webkit-overflow-scrolling: touch;
  }
  .lity-iframe-container iframe {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
            box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
    background: #000;
  }
  .lity-hide {
    display: none;
  }