@charset "UTF-8";

.pane-contents,
.edit-format {
    background: #fff;
}

/* .pane-contents--container {
    width: 1200px;
} */
/* .pane-main {
    
} */

@media screen and (max-width: 768px) {}


/* ==================================================
Page Head Custom
================================================== */
#page-head {}

@media screen and (max-width: 768px) {

    #page-head {}

}

/* ==================================================
Page Body
================================================== */
#page-body {
    overflow-x: hidden;
    max-width: 700px;
    position: relative;
}

.none {
    display: none;
}

.flex {
	display: flex;
	justify-content: center;
	margin-inline: auto;
	align-items: flex-start;
}

.articleSet {
    position: relative;
}

#head-title {
    margin-top: 60px;
}

.top-logo {
position:relative;
margin:0 auto;
}


.toptitle {
position: absolute;
  font-family: "the-seasons", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 60px;
  text-align: left;
  line-height: 1em;
  left: 10px;
  bottom: 40px;
  margin:0;
}

.sub-title {
position: absolute;
  font-size: 12px;
  bottom: 5px;
  left: 10px;
}

.textbox {
 margin:0 auto;
}

.layout {
  position: relative;
  width: 100%;
  max-width: 700px;
  aspect-ratio: 3 / 4;
  margin: auto;
    margin-top: auto;
    padding-bottom: 600px;

    }

    .layout img {
      position: absolute;
      object-fit: cover;
      height: auto;
      max-height: 100%;
    }

    .pic1 {
left: 5%;
  top: 15%;
  width: 38%;
  z-index: 1;
    }

    .pic2 {
   right: 5%;
  top: 5%;
  width: 38%;
  z-index: 1;
    }

    .pic3 {
left: 28%;
  top: 50%;;
  width: 30%;
  z-index: 2;
    }

    .pic4 {
right: 5%;
  top: 52%;
  width: 32%;
  z-index: 1;
    }

    .title {
font-family: "the-seasons", sans-serif;
  position: absolute;
  top: 40%;
  left: 65%;
  transform: translateX(-50%);
  font-size: 45px;
  z-index: 3;
  line-height: 1.1;
  text-align: left;
  opacity: 50%;
    }

    .text-left {
position: absolute;
  left: 5%;
  top: 75%;
  font-size: 13px;
  text-align: center;
  z-index: 3;
    }

    .text-btm {
position: absolute;
  right: 5%;
  top: 100%;
  transform: translateY(-100%);
  font-size: 10px;
  z-index: 2;
  text-align: right;
  margin-top: 50px;
    }

 .Glp1 {
     margin:0 auto;
     gap: 50px;
     font-family: "the-seasons", sans-serif;
     font-size: 20px;
     
     .item1 { width:38%;}
     .item2 { width:38%;}
 }

.checkbtn {
font-size: 15px;
}

/*STYLING02*/

.layout2 {
  position: relative;
  width: 100%;
  max-width: 700px;
  aspect-ratio: 3 / 4;
  margin: auto;
    margin-top: auto;
  padding-bottom: 120px;
    }

.layout2 img {
      position: absolute;
      object-fit: cover;
      height: auto;
      max-height: 100%;
 }
 
  .pic2_1 {
  left: 5%;
  top: 5%;
  width: 42%;
  z-index: 2;
    }

.pic2_2 {
right: 5%;
  top: 20%;
  width: 52%;
  z-index: 1;
    }
    
.pic2_3 {
right: 5%;
  top: 0;
  width: 23%;
    }
    
.pic2_4 {
left: 10%;
  top: 72%;
  width: 30%;
    } 

 .title2 {
 font-family: "the-seasons", sans-serif;
  position: absolute;
  top: 12%;
  left: 58%;
  transform: translateX(-50%);
  font-size: 43px;
  z-index: 3;
  line-height: 1.1;
  text-align: left;
  opacity: 50%;
    }
    
 .text-left2 {
position: absolute;
  left: 10%;
  top: 60%;
  font-size: 13px;
  text-align: center;
    }
    
 .text-btm2 {
position: absolute;
  right: 5%;
  top: 85%;
  transform: translateY(-100%);
  font-size: 10px;
  text-align: right;
    }
    
    
/*STYLING03*/

 .stylingtitle {
margin: 0 auto;
  font-family: "the-seasons", sans-serif;
  font-size: 50px;
  opacity: 50%;
  justify-content: space-between;
  line-height: 1.3em;

 }
 
  .Glp2 {
     margin:0 auto;
     gap: 12px;

 }
 
  .textdesc {
  font-size: 13px;
  text-align: center;
    }


/* タブレット用 */
@media screen and (max-width: 768px) {


}

/* SP用 */
@media screen and (max-width: 480px) {

      .layout {padding-bottom:100px;}
      .pic1 {width: 40%;}
      .pic2 {width: 40%; right: 2%;}
      .title {left: 67%;font-size: 30px;white-space: nowrap;}
      .text-btm { font-size: 9px;}
      .text-left {left: 3%; font-size:9px; }
      .title2 {top: 10%;font-size: 30px;}
      .text-left2 {left: 5%;top: 60%;font-size: 9px;}
      .stylingtitle {font-size: 33px;}
      .toptitle {font-size: 33px;bottom: 50px;}
      .sub-title {font-size: 11px;bottom: 2%;text-align: left; }
      .pic2_4 {top: 75%;}
      .text-btm2 {top: 91%;}
}




/* Fade in */
.inView {
    opacity: 0;
}

.imgFade {
    opacity: 0;
}

.imgAnim {
    -webkit-animation-name: imgAnim;
    animation-name: imgAnim;
    -webkit-animation-duration: 1.6s;
    animation-duration: 1.6s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

@keyframes imgAnim {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
        transform: translate(0);
    }
}

.imgFade.fadeT {
    opacity: 0;
    transform: translateY(50px);
    position: relative;
    z-index: 5;
}

.imgAnim.fadeT {
    -webkit-animation-name: imgAnim;
    animation-name: imgAnim;
    -webkit-animation-duration: 1.4s;
    animation-duration: 1.4s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

.imgFade.fadeR {
    opacity: 0;
    transform: translateX(50px);
    position: relative;
    z-index: 5;
}

.imgFade.fadeL {
    opacity: 0;
    transform: translateX(-50px);
    position: relative;
    z-index: 5;
}

.imgAnim.fadeR {
    -webkit-animation-name: imgAnim;
    animation-name: imgAnim;
    -webkit-animation-duration: 1.4s;
    animation-duration: 1.4s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

.imgAnim.fadeL {
    -webkit-animation-name: imgAnim;
    animation-name: imgAnim;
    -webkit-animation-duration: 1.4s;
    animation-duration: 1.4s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}