/* コピペ用コード */
.font-size-dummy {
  font-size: .75rem; /* 12px */
  font-size: .8125rem; /* 13px */
  font-size: .875rem; /* 14px */
  font-size: 1rem; /* 16px */
  font-size: 1.125rem; /* 18px */
  font-size: 1.25rem; /* 20px */
  font-size: 1.5rem; /* 24px */
  font-size: 1.75rem; /* 28px */
  font-size: 2rem; /* 32px */
  font-size: 2.63rem; /* 42px */
  font-size: 3rem; /*48px*/
  font-size: 3.5rem; /* 56px */
}
/*-----------------------------------------------------------------------common*/ 
:root {
  --white: #F5F5F5;
  --white-opa: rgba(245, 245, 245, .8);
  --black: #663A28;
  --orange: #D36028;
  --orange-dark: #a1481f;
  --red: #B31E23;
  --green: #6D8243;
  --green-dark: #516132;
  --purple: #BF3F8C;
  --yellow: #BEBB6D;
  --cream: #E9DABF;
  --font-family-shippori: "shippori-mincho", sans-serif; /*normal 400 bold 700*/
  --font-family-notosans: "noto-sans-cjk-jp", sans-serif; /*normal 400 medium 500 bold 700*/
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  --padding-common: 2em;
  --line-height-large: 2;
  --line-height-normal: 1.7;
  --line-height-narrow: 1.5;
  --radius-6: 6px;
  --radius-10: 10px;
  --radius-20: 20px;
}
body {
    margin:0;
}
.tb, .sp{
    display: none;
}
main{
    position: relative;
    font-style: normal;
    line-height: var(--line-height-normal);
    flex-shrink: 0;
    line-break: strict;
}
main img{
    width: 100%;
}
main p{
    font-family: var(--font-family-notosans);
    font-size: 1.125rem;
    font-weight: var(--font-weight-regular);
    color: var(--black);
}
.container{
    max-width: 1000px;
    width: 95%;
    margin: 0 auto;
    padding: 6em 0;
}
.wrapper .title {
    display: grid;
    grid-template-columns: 50px fit-content(400px) 50px;
    justify-items: center;
    align-items: center;
    justify-content: center;
    column-gap: 1em;
}
.wrapper .title h2{
    font-family: var(--font-family-shippori);
    font-weight: var(--font-weight-bold);
    font-size: 2rem;
    color: var(--orange);
}
.wrapper .title .icon{
    width: 50px;
}
/*-------------------- pankuzu */
#pankuzu ul{
    overflow: auto;
    padding: 0 10px;
    _zoom: 1;
}
#pankuzu li{
    float: left;
    list-style: none;
}
#pankuzu li + li:before{
    margin: 0 8px;
    content: '>';
}
/*-------------------- top-v */
#top-v .wrapper{
    position: relative;
    background-image: url("../img/main.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
}
#top-v .inner{
    position: relative;
}
#top-v h1{
    display: block;
}
#top-v h1 div{
    max-width: 400px;
     margin: 0 auto;
}
#top-v .text{
    background-color: var(--red);
    width: 800px;
    margin: 2em auto 0;
    padding: .1em 1em;
    border-radius: 50px;
}
#top-v .text p{
    font-family: var(--font-family-shippori);
    font-weight: var(--font-weight-bold);
    font-size: 1.5rem;
    text-align: center;
    color: var(--white);
}
#top-v .text span{
    font-size: 2.5rem;
    margin: 0 .1em;
}
#top-v .text .middle-large{
    font-size: 2rem;
}
/*-------------------- about */
#about .wrapper{
    background-image: url("../img/bg01.webp");
    background-size: 50%;
}
#about .inner {
    background-color: var(--white-opa);
    padding: 4em 6em;
    max-width: 700px;
    width: 100%;
    margin: 0 auto;
    border-radius: var(--radius-10);
}
#about .text-content {
    margin: 2em 0 0;
}
#about .col-red {
    font-weight: var(--font-weight-medium);
    color: var(--red);
    text-align: center;
    font-size: 1.25rem;
    margin-bottom: 1em;
}
/*-------------------- tourist-spot */
#tourist-spot .wrapper{
    background-image: url("../img/bg02.webp");
    background-size: 50%;
}
#tourist-spot .container{
    padding: 6em 0 2em;
}
.spot-wrapper li{
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-items: center;
    align-items: flex-start;
    justify-content: center;
    margin: 0 0 8em;
}
.spot-wrapper li .spot-img img{
    border-radius: var(--radius-20);
}
.spot-wrapper li .spot-text{
    position: relative;
     margin: 1em 0 0;  
}
.spot-wrapper li:nth-of-type(2n) .spot-img{
    order: 2;   
}
.spot-wrapper li:nth-of-type(2n) .spot-text{
    order: 1;   
}

.spot-wrapper li .spot-text h3{
    font-family: var(--font-family-shippori);
    font-weight: var(--font-weight-normal);
    font-size: 2rem;
    color: var(--white);
}
.spot-wrapper li:nth-child(1) .spot-text .subtitle{
    border-radius: 0 50px 50px 0;
    background-color: var(--red);
    padding: .5em 2em .5em 2em;
}
.spot-wrapper li:nth-child(2) .spot-text .subtitle{
    border-radius: 50px 0 0 50px ;
    background-color: var(--green);
    padding: .5em 2em .5em 2em;
}
.spot-wrapper li:nth-child(3) .spot-text .subtitle{
    border-radius: 0 50px 50px 0;
    background-color: var(--orange);
    padding: .5em 2em .5em 2em;
}
.spot-wrapper li:nth-child(4) .spot-text .subtitle{
    border-radius: 50px 0 0 50px;
    background-color: var(--purple);
    padding: .5em 2em .5em 2em;
}
.spot-wrapper li:nth-child(5) .spot-text .subtitle{
    border-radius: 0 50px 50px 0;
    background-color: var(--yellow);
    padding: .5em 2em .5em 2em;
}
.spot-wrapper li .spot-text .text-item{
    padding: 2em;
}
/*-------------------- link-collection*/
#link-collection .wrapper{
    background-color: var(--cream);
}
.link-container{
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-items: center;
    align-items: flex-start;
    justify-content: center;
    column-gap: 2em;
    margin: 4em 0 0;
}
#link-collection a{
    color: var(--white);
    font-size: 1.5rem;
    line-height: var(--line-height-narrow);
    display: block;
    width: 100%;
}
.link-container .stay{
    background-color: var(--orange);
     border-radius: var(--radius-10);
    transition: .5s all ease-out;
    width: 100%;
}
.link-container .aviation{
    background-color: var(--green);
     border-radius: var(--radius-10);
    transition: .5s all ease-out;
    width: 100%;
}
.link-container li ul{
    font-family: var(--font-family-shippori);
    font-weight: var(--font-weight-bold);
    display: grid;
    grid-template-columns: fit-content(400px) 80px;
    justify-items: flex-start;
    align-items: flex-end;
    justify-content: center;
    padding: .5em 1em;
}
.link-container li ul .icon{
    width: 80px;
    display: flex;
    align-items: flex-end;
}
/*-------------------- Page-top */
#page-top{
    position: fixed;
    z-index: 100;
    right: 20px;
    bottom: 20px;
}
#page-top a{
    display: block;
    width: 80px;
    height: 65px;
    padding: 20px 10px;
    text-align: center;
    text-decoration: none;
    color: #fff;
    border-radius: 10px;
    background: #ddd;
}
#page-top a:hover{
    text-decoration: none;
    background: #a5a5a5;
}