@charset "UTF-8";

/*================================
plan
================================*/
.top_main{
   background-image: url(/images/plan/main.jpg);
}
@media screen and ( max-width:750px) {
   /*.top_main{
   background-image: url(/images/menu/main_sp.jpg);
}*/
}



/*================================
plan_top
================================*/
section.plan {
   /*padding: 0;*/
}
.plan h2{
   width: 70%;
   min-width: 250px;
  font-size: 3.0rem;
  margin: -1.0em auto .5em 1.0em;
  background-color: #fff;
  border-radius: 30px;
  position: inherit;
  padding: 0px 10px 15px;
  line-height: 1.2;
  text-align: center;
   letter-spacing: .05em;
}
.plan h2 span{
   font-size: 1.4rem;
  line-height: 1.5em;
  display: block;
}
.plan .boxFlex{
   margin: 0 auto 0;
   /*width: 95%; */ 
   display: flex;
   flex-flow: wrap;
   justify-content:center;
   align-items: flex-start;
   gap:2.5%;
}
.plan .boxCont{
   width: 48.75%;
   padding: 0 0 4%;
   /*text-align: center;*/
   position: relative;
}
.plan .boxCont img.photo{
   width: 100%;
   max-height: 350px;
   height: 50%;
   object-fit: cover;
   border-radius: 20px;
}
/*.boxCont .kids{
   position: absolute;
   top: -15px;
  right: 15px;
}*/
.plan .boxContImg{
   width: 100%;
   /*padding: 2% 3%;*/
   text-align: center;
   position: relative;
}
.plan .boxCont p{
   padding: 0 1em 2em;
}
@media screen and ( max-width:1000px) {
   .plan h2{
   width: 85%;
  margin: -1.0em auto .5em
   }
   .plan .boxCont{
   /*width: 48%;*/
   }
}
@media screen and ( max-width:750px) {
   .plan .boxCont{
   width: 100%;
      margin-bottom: 40px;
}
   .plan h2{
      margin: -1.0em auto .5em;
   }
}



/*================================
plan_details
================================*/
section.plan_details{
   margin: 70px 0 5% 0;
}
.plan_details{
   overflow: visible;/*sticky対策*/
}
.boxContL{
   width: 45%;
   position: -webkit-sticky;
   position: sticky;
   top: 90px;
   left: 0;
}
.boxContL img{
   border-radius: 20px;
  height: 65vh;
  object-fit: cover;
}
.boxContR{
   width: 50%;
   margin: -82vh 0 0 auto;
}
.plan_details .cont_top,
.plan_details .cont_plan,
.plan_details .kids{
   margin-bottom: 10%;
}
.plan_details h2.contTtl {
  font-size: 6.5rem;
}
.plan_details h2.contTtl span {
  font-size: 2.4rem;
   padding: 10px 5px 0;
}
.plan_details .point span{
   display: inline-block;
   border: 1px solid #3F6B73;
   border-radius: 1.5em;
   margin: 0 .8em .8em 0;
   padding: .8em;
}
.plan_details .catch {
  text-align: left;
   font-size: 1.6rem;
   padding: .5em 0 1.0em;
}
.plan_details .cont_plan h3{
   font-size: 2.2rem;
   border: 1px solid #3F6B73;
   border-radius: 1.0em;
   padding: .5em .8em;
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
}
.plan_details .cont_plan h3 .ttl{
}
.plan_details .cont_plan h3 .price{
   font-size: 1.3rem;
   text-align: right;
}
.plan_details .cont_plan .content{
   padding: 1.2em;
}
.plan_details p{
   font-size: 1.4rem;
}
.plan_details .kids{
   background: #FFF9D8;
   border-radius: 20px;
   border: 1px #3F6B73 dashed;
   padding: 8%;
}
.plan_details .kids h3{
   border: none;
   padding: 0;
}
.cancel{
   width: 90%;
   max-width: 900px;
   margin: 0 auto 2em;
   padding: 40px 0 40px;
   border-top: 1px solid #3F6B73;
   border-bottom: 1px solid #3F6B73;
}
.cancel h3{
   font-size: 1.6rem;
   margin-bottom: 2em;
}
.cancel .boxFlex{
   display: flex;
   gap:5%;
}
.note{
   margin-top: 1.5em;
   background: #fff;
   border: 1px solid #3F6B73;
   padding: 5px;
   width: fit-content;
}
.cancel p{
   font-size: 1.4rem;
}
@media screen and ( max-width:1000px) {
.boxContR{
}
.plan_details .cont_plan h3 .price{
   width: 100%;
   }
}
@media screen and ( max-width:750px) {
   .boxContL{
      width: 100%;
      position: static;
      margin-bottom: 5%;
   }
   .boxContL img{
      width: 100%;
      height: 45vh;
   }
   .boxContR{
   width: 100%;
   margin: 0;
}
   .cancel .boxFlex{
   display: block;
   }
}