@charset 'utf-8';
/* CSS Document */
@media screen and (min-width: 1001px) {
  .link-stay a:hover {
    filter: brightness(.7);
  }
}
@media screen and (max-width: 1500px) {
  /*-------------------- common */
  .small-pc {
    display: block;
  }
  .bg01 {
    z-index: 10;
  }
  /*-------------------- pankuzu */
  /*-------------------- top-v */
  /*-------------------- period */
  #period .wrapper {
    max-width: 800px;
    width: 90%;
    margin: 0 auto;
    padding: 4em 0 6em;
  }
  /*-------------------- about */
  #about .right-img {
    position: absolute;
    top: -90px;
    left: auto;
    right: -50px;
  }
  #about .right-img::after {
    content: '';
    position: absolute;
    top: auto;
    bottom: -50px;
    left: -50px;
    right: auto;
    background-color: var(--deco-yellow);
    width: 240px;
    height: 210px;
    border-radius: 50%;
    overflow: hidden;
  }
  #about .right-img div {
    width: 350px;
    height: 300px;
  }
  #about .right-img img {
    position: absolute;
    top: -60px;
    left: -120px;
    display: block;
    object-fit: cover;
    width: auto;
    height: 120%;
  }
  #about .left-img {
    position: absolute;
    bottom: -180px;
    left: -70px;
    right: auto;
  }
  #about .left-img::after {
    position: absolute;
    top: 0;
    left: auto;
    right: -100px;
  }
  #about .left-img div {
    width: 350px;
    height: 300px;
  }
  #about .wrapper {
    padding: 7em 0;
  }
  /*-------------------- example */
  #example .wrapper {
    padding: 7em 0 6em;
  }
  #example .wrapper ul li .middle {
    position: relative;
    padding: 1em 0;
    height: 450px;
  }
  #example .wrapper ul li h3 {
    padding: .5em 1em;
  }
  #example .wrapper ul li p .col-red {
    margin: .2em 0 0;
  }
  /*-------------------- ecommended-sightseeing*/
  #recommended-sightseeing {
    position: relative;
    z-index: 10;
  }
  #recommended-sightseeing .container {
    position: relative;
  }
  #recommended-sightseeing .illust-list {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* ★重要: これがないと、画像の下にあるリンクやテキストがクリックできなくなります */
    pointer-events: none;
    overflow-x: clip;
    overflow-y: visible;
  }
  #recommended-sightseeing .illust-list img {
    width: 200px;
    filter: drop-shadow(var(--shadow04));
  }
  #recommended-sightseeing .illust-list .illust01 {
    position: absolute;
    top: 0;
    left: 30px;
    transform: rotate(-20deg);
  }
  #recommended-sightseeing .illust-list .illust02 {
    position: absolute;
    top: -100px;
    left: auto;
    right: 20px;
    transform: rotate(20deg);
  }
  #recommended-sightseeing .illust-list .illust03 {
    position: absolute;
    top: auto;
    bottom: -120px;
    left: auto;
    right: 80px;
    transform: rotate(-10deg);
  }
  #recommended-sightseeing h2 {
    margin: 0 0 3em;
  }
  #recommended-sightseeing .spot-list .spot-img img {
    box-shadow: var(--shadow04);
  }
  /*-------------------- link-contents*/
  #link-contents .illust-list img {
    width: 200px;
    filter: drop-shadow(var(--shadow04));
  }
  #link-contents .illust-list .illust01 {
    position: absolute;
    top: 40px;
    left: 30px;
  }
  #link-contents .illust-list .illust02 {
    position: absolute;
    top: 270px;
    left: auto;
    right: 30px;
  }
  /*-------------------- Page-top */
}
@media screen and (max-width: 1001px) {
  /*-------------------- common */
  .pc {
    display: none;
  }
  .tb {
    display: block;
  }
  /*-------------------- pankuzu */
  /*-------------------- top-v */
  #top-v .container {
    height: auto;
  }
  #top-v .swiper img {
    height: auto;
  }
  #top-v h1 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  /*-------------------- period */
  #period .wrapper {
    padding: 3em 0 8em;
  }
  #period .wrapper h2 {
    font-size: 1.5rem;
    padding: 1em 1em;
  }
  #period .wrapper .period-list {
    box-shadow: var(--shadow03);
  }
  #period .wrapper .date {
    font-size: 1.25rem;
  }
  .link-stay {
    margin: 2em auto 0;
  }
  .link-stay {
    position: relative;
    margin: 3em auto 0;
  }
  .link-stay a {
    margin: 0 auto;
    box-shadow: var(--shadow03);
    font-size: 1.25rem;
    height: 100px;
  }
  /*-------------------- about */
  #about .left-img {
    z-index: 10;
  }
  #about .left-img::after {
    width: 200px;
    height: 175px;
  }
  #about .right-img::after {
    width: 200px;
    height: 175px;
  }
  #about .wrapper {
    padding: 8em 0;
  }
  #about h2 {
    font-size: 1.75rem;
    max-width: 450px;
    width: 90%;
    padding: .5em 0;
  }
  #about ul li {
    font-size: 1.25rem;
  }
  /*-------------------- example */
  #example .wrapper {
    padding: 8em 0 6em;
  }
  #example h2 {
    position: relative;
    left: auto;
    right: 80px;
    width: 150px;
    margin: 0 0 1.5em auto;
  }
  #example .wrapper ul {
    display: block;
  }
  #example .wrapper ul li {
    max-width: 520px;
    width: 90%;
    margin: 2em auto 0;
    box-shadow: var(--shadow03);
  }
  #example .wrapper ul li h3 {
    font-size: 1.5rem;
    padding: 1em 1em;
  }
  #example .wrapper ul li .middle {
    position: relative;
    padding: 1em 0;
    height: 410px;
  }
  #example .wrapper ul li p {
    font-size: 1.25rem;
  }
  #example .wrapper ul li p .col-red {
    font-size: 3rem;
  }
  #example .wrapper ul li p .small {
    font-size: 1.75rem;
  }
  .small-pc {
    display: none;
  }
  /*-------------------- ecommended-sightseeing*/
  #recommended-sightseeing h2 {
    font-size: 1.75rem;
  }
  #recommended-sightseeing .illust-list .illust03 {
    position: absolute;
    left: auto;
    right: 60px;
    transform: rotate(-10deg);
  }
  #recommended-sightseeing .spot-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 1.5em;
    grid-row-gap: 3em;
  }
  #recommended-sightseeing .spot-list h3 {
    font-size: 1.5rem;
    margin: .5em 0 .2em;
  }
  #recommended-sightseeing .spot-list li h3::after {
    position: absolute;
    top: -50px;
    left: 10px;
    content: '';
    width: 120px;
    height: 96px;
  }
  /*-------------------- link-contents*/
  #link-contents h2 {
    font-size: 1.75rem;
  }
  #link-contents .illust-list img {
    width: 180px;
  }
  #link-contents .illust-list .illust01 {
    position: absolute;
    top: 40px;
    left: 10px;
  }
  #link-contents .illust-list .illust02 {
    position: absolute;
    top: 260px;
    left: auto;
    right: -10px;
  }
  #link-contents .link-stay {
    margin: 0 auto 0;
  }
  /*-------------------- Page-top */
}
/* Tablet */
@media screen and (max-width: 768px) {
  /*-------------------- common */
  .tb {
    display: none;
  }
  .sp {
    display: block;
  }
  /*-------------------- pankuzu */
  #pankuzu {
    display: none;
  }
  /*-------------------- top-v */
  #top-v .container {
    position: relative;
    width: 100%;
    height: 580px;
  }
  #top-v .swiper img {
    object-fit: cover;
    object-position: center;
    height: 580px;
  }
  .c-logo {
    width: 150px;
    margin: 0 0 0 -80px;
  }
  /*-------------------- period */
  #period .wrapper {
    padding: 2em 0 8em;
  }
  #period .wrapper .period-list {
    display: block;
    margin: 1.5em auto;
  }
  #period .wrapper .period-list li:nth-child(1) {
    height: 70px;
  }
  #period .wrapper h2 {
    padding: .5em 30px;
  }
  #period .wrapper .period-list li div {
    padding: 1em 30px;
  }
  .link-list {
    display: block;
  }
  .link-stay {
    margin: 2em auto 0;
  }
  .link-stay a {
    max-width: 500px;
    height: 100px;
  }
  /*-------------------- about */
  #about .wrapper {
    padding: 9em 0 8em;
  }
  #about .right-img {
    position: absolute;
    top: -100px;
  }
  /*-------------------- example */
  #example h2 {
    position: relative;
    left: auto;
    right: 40px;
    width: 150px;
    margin: 0 0 1.5em auto;
  }
  #example .wrapper ul {
    display: block;
  }
  #example .wrapper ul li {
    max-width: 520px;
    width: 90%;
    margin: 2em auto 0;
  }
  #example .wrapper ul li h3 {
    font-size: 1.25rem;
    padding: 1em 1em;
  }
  /*-------------------- recommended-sightseeing*/
  #recommended-sightseeing .wrapper {
    padding: 6em 0 4em;
  }
  #recommended-sightseeing .spot-list {
    display: block;
  }
  #recommended-sightseeing .spot-list li {
    margin: 1em 0 2em;
  }
  #recommended-sightseeing .illust-list img {
    width: 150px;
  }
  #recommended-sightseeing .illust-list .illust01 {
    position: absolute;
    top: 40px;
    left: 20px;
    transform: rotate(-20deg);
  }
  #recommended-sightseeing .illust-list .illust02 {
    position: absolute;
    top: -80px;
    left: auto;
    right: 20px;
    transform: rotate(20deg);
  }
  #recommended-sightseeing .illust-list .illust03 {
    position: absolute;
    bottom: -100px;
    left: auto;
    right: 40px;
    transform: rotate(-10deg);
  }
  /*-------------------- link-contents*/
  #link-contents .wrapper {
    padding: 6em 0 7em;
  }
  #link-contents .illust-list img {
    width: 150px;
  }
  #link-contents .illust-list .illust01 {
    position: absolute;
    top: 30px;
    left: 10px;
  }
  #link-contents .illust-list .illust02 {
    position: absolute;
    top: 450px;
    left: auto;
    right: -10px;
  }
  #link-contents .link-stay {
    margin: 2em auto 0;
  }
  /*-------------------- Page-top */
}
/* Smart */
@media only screen and (max-width: 599px) {
  /*-------------------- common */
  .container {
    font-size: 1rem;
  }
  /*-------------------- pankuzu */
  /*-------------------- top-v */
  #top-v .container {
    position: relative;
    width: 100%;
    height: 400px;
  }
  #top-v .swiper img {
    object-fit: cover;
    object-position: center;
    height: 400px;
  }
  .add-text {
    position: absolute;
    left: 10px;
    bottom: 0;
  }
  #top-v h1 {
    margin: 0 auto;
    max-width: 300px;
    width: 70%;
  }
  .c-logo {
    width: 100px;
    margin: 0 0 0 0;
  }
  /*-------------------- period */
  #period .wrapper {
    width: 95%;
    padding: 1em 0 8em;
  }
  #period .wrapper h2 {
    font-size: 1.25rem;
    padding: .5em 15px;
  }
  #period .wrapper .period-list {
    box-shadow: var(--shadow04);
  }
  #period .wrapper .period-list li:nth-child(1) {
    height: 50px;
  }
  #period .wrapper .period-list li div {
    padding: 1em 15px;
  }
  #period .wrapper .date {
    font-size: 1rem;
  }
  .link-stay {
    margin: 1em auto 0;
  }
  .link-stay a {
    font-size: 1.125rem;
    height: 80px;
    box-shadow: var(--shadow04);
  }
  .link-stay .link-img {
    position: absolute;
    top: 30px;
    height: 80px;
  }
  .link-stay .link-img img {
    width: auto;
    height: 50px;
  }
  /*-------------------- about */
  #about .right-img {
    position: absolute;
    top: -90px;
    left: auto;
    right: -50px;
  }
  #about .right-img::after {
    content: '';
    position: absolute;
    top: auto;
    bottom: 20px;
    left: -70px;
    right: auto;
    width: 150px;
    height: 130px;
  }
  #about .right-img div {
    width: 280px;
    height: 240px;
  }
  #about .right-img img {
    position: absolute;
    top: -50px;
    left: -100px;
  }
  #about .left-img {
    position: absolute;
    bottom: -140px;
    left: -70px;
    right: auto;
  }
  #about .left-img::after {
    position: absolute;
    top: 0;
    left: auto;
    right: -70px;
    width: 150px;
    height: 130px;
  }
  #about .left-img div {
    width: 280px;
    height: 240px;
  }
  #about .left-img img {
    position: absolute;
    top: -50px;
    left: -70px;
  }
  #about h2 {
    font-size: 1.25rem;
  }
  #about ul {
    margin: 0 auto .5em;
  }
  #about ul li {
    font-size: 1.125rem;
  }
  /*-------------------- example */
  #example .wrapper {
    padding: 8em 0 4em;
  }
  #example h2 {
    position: relative;
    left: auto;
    right: 0;
    width: 120px;
    margin: 0 0 1.5em auto;
  }
  #example .wrapper ul li {
    width: 95%;
  }
  #example .wrapper ul li .middle {
    position: relative;
    padding: 1em 0;
    height: 300px;
  }
  #example .wrapper ul li h3 {
    font-size: 1.125rem;
    padding: .7em 1em;
  }
  #example .wrapper ul li p {
    font-size: 1rem;
  }
  #example .wrapper ul li p .col-red {
    font-size: 2.25rem;
  }
  #example .wrapper ul li p .small {
    font-size: 1.5rem;
  }
  .small-pc {
    display: block;
  }
  /*-------------------- ecommended-sightseeing*/
  #recommended-sightseeing .wrapper {
    position: relative;
    max-width: 1200px;
    width: 90%;
    margin: 0 auto;
    padding: 4em 0 2em;
  }
  #recommended-sightseeing .illust-list img {
    width: 100px;
  }
  #recommended-sightseeing .illust-list .illust01 {
    position: absolute;
    top: 20px;
    left: 0;
    transform: rotate(-20deg);
  }
  #recommended-sightseeing .illust-list .illust02 {
    position: absolute;
    top: -50px;
    left: auto;
    right: 10px;
    transform: rotate(20deg);
  }
  #recommended-sightseeing .illust-list .illust03 {
    position: absolute;
    bottom: -80px;
    left: auto;
    right: 10px;
    transform: rotate(-10deg);
  }
  #recommended-sightseeing h2 {
    font-size: 1.5rem;
    margin: 0 0 2em;
  }
  #recommended-sightseeing .spot-list h3 {
    font-size: 1.25rem;
    margin: .5em 0 0;
  }
  #recommended-sightseeing .spot-list p {
    font-size: .9375rem;
  }
  /*-------------------- link-contents*/
  #link-contents .container {
    overflow-x: clip;
  }
  #link-contents .wrapper {
    padding: 4em 0 6em;
  }
  #link-contents h2 {
    font-size: 1.5rem;
    margin: 0 0 1em;
  }
  #link-contents .illust-list img {
    width: 100px;
  }
  #link-contents .illust-list .illust01 {
    position: absolute;
    top: 20px;
    left: -20px;
  }
  #link-contents .illust-list .illust02 {
    position: absolute;
    top: 340px;
    left: auto;
    right: 10px;
  }
  #link-contents .link-stay {
    margin: 1em auto 0;
  }
  /*-------------------- Page-top */
}