*{
  font-family: "Noto Sans JP", sans-serif;
  padding:0;
  margin:0;
  color:#333;
  font-weight: 400;
}
img{
  display: block;
}
body{
  background: #f7f3ef;
}
p{
  font-size:18px;
  line-height: 38px;
  text-align: justify;
}
#wrapper{
  position: relative;
  width: 100%;
  overflow: hidden;
}
header{
  position:relative;
}
h1{
  font-family: "Noto Serif JP", serif;
  font-size: 60px;
  list-style: 70px;
  font-weight: normal;
  text-align: center;
  font-weight: 600;
}
h1 span{
  font-family: "Noto Serif JP", serif;
  font-size: 26px;
  line-height: 26px;
  margin-top: 0px;
  font-weight: 600;
  display: block;
}
#main_text{
  padding: 120px 60px;
  background: #FFF;
}
#main_text p{
  text-align: center;
  margin-top: 40px;
}
#moreinfo{
  position: relative;
  padding: 120px 60px;
  background: #90867c;
}
#moreinfo:before{
  content:"";
  position: absolute;
  right: 30px;
  bottom:30px;
  opacity: 0.7;
  background: url(../img/coffy.webp) no-repeat left top;
  background-size:100% auto;
  width:280px;
  height: 140px;
}
#moreinfo h2{
  color:#FFF;
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 10px;
}
#flex_info{
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
#raconter_photo{
  color:#FFF;
  width: calc(50% - 30px);
  margin-right: 30px;
  align-self: stretch; /* 親（#flex_info）の高さ一杯に広がる */
}
#raconter_photo img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#raconter_photo p{
  color: #FFF;
}
#open_info{
  padding: 0 0 0 30px;
  color:#FFF;
  width: calc(50% - 30px);
}
#open_info h3{
  border-bottom: dotted 1px #FFF;
  padding-bottom: 5px;
  margin-bottom: 5px;
  color:#FFF;
  font-weight: 600;
  font-size: 20px;
}
#open_info p{
  color:#FFF;
}
#raconter_photo h2{
  font-weight: 600;
  font-size: 18px;
  padding-bottom: 10px;
}
.caution{
  position: relative;
  color:#FFF;
  font-size: 14px;
  line-height: 28px;
}
#last_cta .caution{
  text-align: left;
  margin-top:10px;
}
.info_section{
  position: relative;
}
.info_section h2{
  text-align: center;
  font-size: 36px;
  line-height: 52px;
  font-weight:600;
  margin-bottom: 40px;
}
.info_flex{
  display: flex;
  align-items: center;
}
.info_flex .info_img{
  width: 50%;
  align-self: stretch;
}
.info_flex .info_img img{
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.info_flex p{
  width:calc(50% - 120px);
  padding: 60px;
}
.reverse{
  flex-direction: row-reverse;
}
#morning_info{
  padding: 120px 60px;
}
.info_section{
  padding-bottom: 120px;
}
.imgshadow img{
  box-shadow: 2px 2px 4px rgba(0,0,0,0.1);
  overflow: hidden;
}
#last_cta{
  padding: 120px 60px;
  background: #90867c;
  text-align: center;
}
#last_cta h2{
  font-size: 42px;
  margin-bottom: 40px;
  color: #FFF;
  font-weight: 600;
}
#last_cta p{
  color: #FFF;
  text-align: center;
}
#last_img{
  margin: 40px auto 0;
  max-width: 1000px;
  padding: 0;
}
footer{
  text-align: center;
  padding: 30px 60px 60px;
}
footer p{
  text-align: center;
  font-size: 16px;
  line-height: 28px;
}
footer #tel{
  font-size: 24px;
  font-weight: 600;
  margin-top: 10px;
  text-align: center;
}
a{
  color:#333;
  text-decoration: none;
}
a:hover{
  text-decoration: underline;
}
.effects{
  position: absolute;
  right: -40px;
  bottom:0px;
  width: 300px;
}
.reverse .effects{
  right: auto;
  left: -40px;
}

@media screen and (max-width: 999px){
  #moreinfo,#main_text{
    padding:60px 30px;
  }
  #morning_info{
    padding:120px 30px;
  }
  .info_flex p {
    width: calc(50% - 80px);
    padding: 40px;
  }
  .effects{
    width: 200px;
    bottom:-40px;
  }
  #moreinfo:before {
    right: 20px;
    bottom: 20px;
    width: 160px;
    height: 76px;
  }
  #raconter_photo {
    width: calc(50% - 15px);
    margin-right: 15px;
  }
  #open_info {
    padding: 0 0 0 15px;
    width: calc(50% - 15px);
  }
  #last_cta{
    padding:120px 30px;
  }
}

.sp_br{
  display: none;
}
#logo{
  max-width: 150px;
  margin: 0 auto;
}
#reserved{
  text-align: center;
  padding: 120px 60px;
  background: #FFF;
}
#reserved h2{
  font-family: "Noto Serif JP", serif;
  font-weight: 600;
  font-size: 42px;
  margin-bottom: 40px;
  text-shadow: 0 0 1px rgba(255,255,255,1),0 0 2px rgba(255, 255, 255, 1),0 0 2px rgba(255, 255, 255, 1);
  color: #4f2d0b;
}
#reserved p{
  text-align: center;
  text-shadow: 0 0 1px rgba(255,255,255,1),0 0 2px rgba(255, 255, 255, 1),0 0 2px rgba(255, 255, 255, 1);
}
.submit{
  border-radius: 100px;
  text-align: center;
  display:inline-block;
  padding: 15px 40px;
  border: solid 1px #4f2d0b;
  color: #4f2d0b;
  font-size: 20px;
  font-weight: 600;
  margin-top: 40px;
  cursor: pointer;
  background: #FFF;
}
.submit:hover{
  opacity: 0.9;
}

#reserved{
  padding: min(calc(120px + (100vw - 1440px) * (120 / 1440)), calc(120px + (100% - 1440px) * (120 / 1440))) 0;
  margin-bottom: 0;
  clip-path: inset(0);
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
}
#reserved:before {
  content: "";
  position: fixed;
  width: 100%;
  height: 100vh;
  left: 0;
  top: 0;
  background: url("../img/ctabg.webp") no-repeat center center;
  background-size: cover;
  z-index: -1;
  pointer-events: none;
  opacity: 0.2;
}




@media screen and (max-width: 768px){
  p{
    font-size:16px;
    line-height: 30px;
  }  
  .sp_br{
    display: block;
  }
    h1{
      font-size: 40px;
    }
    h1 span{
      font-size:20px;
      margin-top: 0;
    }
    #main_text p {
    text-align: justify;
    font-size: 16px;
    line-height: 30px;
    margin-top: 20px;
    }
    #main_text p br{
      display: none;
    }
    #flex_info{
      display: block;
    }
    
    #moreinfo,#main_text{
      padding:60px 20px;
    }
    #morning_info{
      padding:80px 20px;
    }
    .info_flex p {
      width: calc(50% - 80px);
      padding: 20px;
    }
    .effects{
      width: 140px;
      bottom:-20px;
      right: -20px;
    }
  .reverse .effects{
    right: auto;
    left: -20px;
  }
      #moreinfo:before {
      right: 20px;
      bottom: 20px;
      width: 160px;
      height: 76px;
    }
    #raconter_photo {
      width:100%;
      margin-right:0;
    }
    #open_info {
      margin-top: 20px;
      padding: 0;
      width:100%
    }
    .caution{
      padding-bottom: 40px;
      font-size: 12px;
      line-height: 24px;
    }
    #last_cta .caution{
      padding-bottom: 0;
    }
    #last_cta{
      padding:80px 20px;
    }
    .info_section h2 {
      font-size: 24px;
      line-height: 36px;
      margin-bottom: 20px;
    }
    .info_flex{
      display: block;
    }
    .info_flex .info_img{
      width: 100%;
    }
    .info_flex p {
        width: 100%;
        padding: 0;
        margin-top:20px;
    }
    #last_cta h2 {
      font-size: 36px;
      margin-bottom: 20px;
    }
    #last_cta p{
      text-align: justify;
    }
    #last_cta p br{
      display: none;
    }
    #last_img{
      margin-top: 20px;
    }
    footer{
      padding: 0 20px 30px;
    }
    #reserved h2{
      margin-bottom: 20px;
    }
    .submit{
      margin-top: 20px;
    }
    #reserved p{
      text-align: justify;
    }
    #reserved p br{
      display: none;
    }
    #reserved {
      padding: 80px 20px;
      margin-bottom: 0;
      clip-path: inset(0);
      overflow: hidden;
      -webkit-overflow-scrolling: touch;
    }
    #reserved h2{
      font-size: 36px;
    }

}