.shortstay-bg {
  background: url(../img/cmn/bg01.png) no-repeat center top, url(../img/cmn/bg.svg) no-repeat center bottom, hsl(194, 100%, 95%);
  background-size: 100%, contain;
  background-blend-mode: normal;
}

.shortstay__content {
  width: min(1200px, 98%);
  margin: auto;
}
.shortstay__content{
  margin: min(80px,6vw) auto;
  background:#fff;
  padding:min(50px,5%);
}
.shortstay__content .flex{
  display: flex;
  align-items: flex-start;
}
.shortstay__content .flex .textarea{
  flex:0 1 70%;
  order:1;
}
.shortstay__content .textarea:after{
  content:"";
  display: block;
  height: 1;
  clear:both;
}
.shortstay__content .flex .photoarea{
  flex:0 0 45%;
  order:2;
  position: relative;
}

.shortstay__content .photoarea .imgs,
.shortstay__content .textarea .imgs{
  height: auto;
  aspect-ratio: 54/31;
  background:#ccc;
  border-radius:10px;
  overflow: hidden;
}
.shortstay__content .imgs{
    background:#ccc;
}
.shortstay__content .imgs img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.shortstay__content .textarea .imgs {
  float: right;
  width: min(520px,43%);
  height: auto;
  aspect-ratio: 50/31;
  margin: 0 0 1em 2em;
}
.shortstay__content dl.kakomi{
  position: relative;
  border-radius: 10px;
  border:1px solid #643c1e;
  background:#fffeeb;
  font-size:clamp(15px,calc(20 / 1200 * 100vw),20px);
  padding:1.8em 1.5em 1.3em;
  margin:2.5em 0 0 0;
}
.shortstay__content dl.data{
    margin:0 0 2.5em 0;
}
.shortstay__content dl.data > dt{
  background:#643c1e;
  color:white;
  font-weight: 500;
  text-align: center;
  padding:.3em .8em;
  margin-bottom: 1em;
  border-radius:10px;
  display: inline-block;
  font-size:clamp(15px,calc(20 / 1200 * 100vw),20px);
}
.shortstay__content dl.kakomi > dt{
  position: absolute;
  translate:0 -50%;
  top:0;
}
.shortstay__content dl dd p{
  margin:0;
}
.shortstay__content {
  counter-reset: num;
}
.shortstay__content h3.title{
  counter-increment:num;
  font-size:clamp(16px,calc(24 / 1200 * 100vw),24px);
  color:#fff;
  line-height: 1.7;
  background:#3f96e0;
  padding:.3em .5em .3em 2.3em;
  border-radius:10px;
  margin:2.5em 0 1.3em;
  position: relative;
}
.shortstay__content h3.title:first-child{
  margin-top:0;
}
.shortstay__content h3.title:before{
  content:counter(num);
  display: block;
  text-align: center;
  line-height: 1.5;
  color:#3f96e0;
  z-index: 2;

}
.shortstay__content h3.title:after{
  content:"";
  display: block;
  border-radius:50%;
  background:white;
  z-index: 1;
}
.shortstay__content h3.title:before,
.shortstay__content h3.title:after{
  width: 1.4em;
  height: auto;
  aspect-ratio:1;
  position: absolute;
  left:.5em;
  top:.35em;
}
.shortstay__content h4.title{
  border:1px solid #643c1e;
  border-radius:10px;
  background:#fffcd1;
  font-size:clamp(16px, calc(22 / 1200 * 100vw),22px);
  color:#643c1e;
  padding:.3em 1em .3em 2.5em;
  margin:2em 0 1em ;
  position: relative;
}
.shortstay__content .cont{
  counter-reset: num2;
}
.shortstay__content h4.title{
  counter-increment:num2;
  margin-left:1.25em;
}
.shortstay__content h4.title .mini{
  font-size:.8em;
}
.shortstay__content h4.title:before{
 content:counter(num2);
  display: block;
  text-align: center;
  line-height: 1.5;
  color:white;
  font-size:clamp(20px, calc(30 / 1200 * 100vw),30px);
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
}
.shortstay__content h4.title:after{
  content:"";
  display: block;
  border-radius:50%;
  background:#643c1e;
  z-index: 1;
}
.shortstay__content h4.title:before,
.shortstay__content h4.title:after{
  width: 2.5em;
  height: auto;
  aspect-ratio:1;
  position: absolute;
  left:0em;
  top:50%;
  translate:-50% -50%;
}
.shortstay__content h5{
    font-size:clamp(16px, calc(20 / 1200 * 100vw),20px);
    letter-spacing: .5em;
    border-top:1px solid #643c1e;
    border-bottom:1px solid #643c1e;
    padding:.5em 0;
    margin:2em 0 .5em;
    display: inline-block;
}
.shortstay__content .wrap{
  width:min(900px,95%);
  margin:auto;
}
.shortstay__content .blue{
  color:#3f96e0;
}
.shortstay__content p{
  font-size:clamp(14px, calc(18 / 1200 * 100vw),18px);
  color:#643c1e;
  line-height: 1.7;
  margin:1.5em 0;
}
.shortstay__content .bluebox{
  background:#eaf6fd;
  border:1px solid #643c1e;
  padding:min(30px,3%);
  position: relative;
}
.shortstay__content .bluebox.dogear:after{
  content:"";
  display: block;
  width: clamp(40px,7%,90px);
  height: auto;
  aspect-ratio: 1;
  background:url(../img/shortstay/ear.png) no-repeat left top white;
  background-size:contain;
  position: absolute;
  bottom:-1px;
  right:-1px;
}
.shortstay__content .large{
  font-size:1.12em;
  font-weight: 500;
}
.shortstay__content table.large{
  margin:.5em 0;
}
.shortstay__content table.large tr th,
.shortstay__content table.large tr td{
    font-size:clamp(15px, calc(21 / 1200 * 100vw),20px);
    font-weight: 500;
    padding:.2em 0;
}
.shortstay__content li{
  font-size:clamp(15px, calc(21 / 1200 * 100vw),20px);
  font-weight: 500;
  margin:1em 0;
}
.shortstay__content li p{
  margin:.3em 0;
  font-weight: 400;
}
.shortstay__content p a{
  text-decoration: underline;
}
.shortstay__content ol{
  margin-left:2em;
}
.shortstay__content ol li{
  list-style-type: decimal;
}
.relative{
  position: relative;
}
.shortstay__content .flow{
  position: relative;
  width: 100%;
}
.shortstay__content .flow dl{
  display: flex;
  margin-bottom: 35px;
}
.shortstay__content .flow dl dt{
  width:min(275px,30%);
  background:#fee087;
  border-radius:10px 0 0 10px;
  color:#643c1e;
  font-size:clamp(16px, calc(20 / 1200 * 100vw),22px);
  padding:1em 2em;
  position: relative;
}
.shortstay__content .flow dl dt:after{
  content:"";
  display: block;
  width:28px ;
  height: auto;
  aspect-ratio: 2/1;
  background:url(../img/shortstay/arrow.png) no-repeat center center;
  background-size:contain;
  position: absolute;
  bottom:-10px;
  left:50%;
  translate:-50% 100%;
}
.shortstay__content .flow dl:last-child dt:after{
  display: none;
}
.shortstay__content .flow dl dd{
  width:70%;
  padding:1em ;
  background:#fffcd1;
 font-size:clamp(14px, calc(20 / 1200 * 100vw),22px);
  font-weight: 400;
}
.shortstay_about{
  flex-wrap: wrap;
  gap:min(30px,3vw);
  margin:4em 0 0 0;
}
.shortstay_about .elem{
  flex:0 1 calc(50% - min(30px,3vw));
  display: flex;
  gap:3%;
  align-items: flex-start;
}
.shortstay_about .elem .imgs{
  flex: 0 1 47%;
  order:2;
}
.shortstay_about .elem dl{
  flex:1 1 50%;
  order:1;
}
.shortstay_about .elem dl dt{
  color:#3f96e0;
  font-size:clamp(16px, calc(20 / 1200 * 100vw),22px);
  margin-bottom: .5em;
}
.shortstay__content .marker{
  background:#ffff00;
}

.shortstay__content .illust01{
  position: absolute;
  top:0;
  right:5%;
  translate:0 -80%;
  width: clamp(100px,20%,189px);
}
.shortstay__content .illust02{
  position: absolute;
  top:50%;
  right:5%;
  translate:0 -50%;
  width: min(238px,25%);
}
.shortstay__content .illust03{
position: absolute;
  top: 47%;
  right: 5%;
  translate: 0 -50%;
  width: clamp(55px,13%,105px);
}
.shortstay__content .illust04{
  position: absolute;
  bottom:0%;
  right:0%;
  translate:-40% 80%;
  width: clamp(90px,22vw,223px);
}
.shortstay__content .illust05{
  position: absolute;
  top:65%;
  right:0%;
  translate:0% -50%;
  width: clamp(60px,20vw,250px);
  z-index: 20;
}
/*-------------------*/
.br768,
.br480{
  display: none;
}

@media screen and (max-width:1024px) {
  .shortstay__content .illust05{
    position: absolute;
    top:unset;
    bottom:0;
    right:0%;
    translate:0% 50%;
    width: clamp(60px,20vw,250px);
  }
    .sp-padding{
  padding-right:min(150px,20%);
}
}
@media screen and (max-width:769px) {
  .spbr768{
    display: inline;
  }  
  .hidden768{
    display: none;
  }

  .shortstay__content .flex{
    display: block;
  }
  .shortstay__content .textarea .imgs{
    float:none;
    width: 100%;
    margin:0 0 30px 0;
  }
   .shortstay__content .flex .photoarea{
    margin-bottom: 30px;
  }
  .shortstay_about .elem {
    margin-bottom: 2em;
  }
.shortstay__content .illust02 {
  top: unset;
  right: -5%;
  translate: 0 70%;
  width: clamp(80px,20%,238px,);
  bottom: 0;
  z-index: 20;
}
  .shortstay__content .illust01{
    right:0;
  }

}
@media screen and (max-width:640px) {
  .hidden640{
    display: none;
  }
  .shortstay__content .flow dl{
    display: block;
  }
  .shortstay__content .flow dl dt{
    width:100%;
    border-radius:10px 10px 0 0;
  }
  .shortstay__content .flow dl dd{
    width:100%;
    border-radius:0 0 10px 10px;
    position: relative;
  }
  .shortstay__content .flow dl dt:after{
  display: none;
}
.shortstay__content .flow dl dd:after{
  content:"";
  display: block;
  width:28px ;
  height: auto;
  aspect-ratio: 2/1;
  background:url(../img/shortstay/arrow.png) no-repeat center center;
  background-size:contain;
  position: absolute;
  bottom:-10px;
  left:50%;
  translate:-50% 100%;
}
.shortstay__content .flow dl:last-child dd:after{
  display: none;
}

.shortstay__content .illust03{
  right:-8%;
}
.shortstay__content dl.data{
  margin-top:60px;
}

}
@media screen and (max-width:480px) {
  .br480{
    display: inline;
  }
  .hidden480{
    display: none;
  }

}