@charset "utf-8";

/* === Josh's Custom CSS Reset === */
*, *::before, *::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    interpolate-size: allow-keywords;
  }
}

body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

input, button, textarea, select {
  font: inherit;
}

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

p {
  text-wrap: pretty;
}

h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}

#root, #__next {
  isolation: isolate;
}

/* === Common === */
#wrapper{
	width: 100%;
  height: auto;
	margin: 0 auto;

	height: 100dvh;
	overflow: auto;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  
  -ms-overflow-style: none;
  
  /* Firefox 対応 */
  scrollbar-width: none;
}

/* Chrome, Safari 対応 */
#wrapper::-webkit-scrollbar {
  display:none;
}

.block_area{
	width: 100%;
	height: 100dvh;

	display: flex;
	align-items: center;

	scroll-snap-align: start;
}

/*  */
/* iPhone SE対応 */
@media screen and (max-height: 765px) {

  .block_area{
    align-items: flex-start;
  }

}

/* iPhone SE対応 */
@media screen and (max-height: 622px) {

  /* .block_area{
    align-items: flex-start;
  } */

  .snap_ctr{
    scroll-snap-type: none !important;
  }

}

.block_area_inner{
	width: 100%;
  aspect-ratio: 179 / 266;
	/* aspect-ratio: 9 / 16; */
  /* aspect-ratio: 9 / 14; */

  display: flex;
  justify-content: center;
  align-items: flex-start;
}

/* === Area01-06 === */
.area_01{
  /* background: #fdfdf4; */
  /* background-image: url("../img/back_01.jpg");
  background-size: cover; */
}

.area_02{
  /* background: #fff9e1; */
}

.area_03{
  /* background: #fffcf3; */
  /* background-image: url("../img/back_03.jpg");
  background-size: cover; */
}

.area_04{
  /* background: #f7f5e0; */
  /* background-image: url("../img/back_04.jpg");
  background-size: cover; */
}

.area_05{
  /* background: #fcf9e6; */
  /* background-image: url("../img/back_05.jpg");
  background-size: cover; */
}

.area_06{
  background: #f8f8f8;
}

.area_01 picture,
.area_02 picture,
.area_03 picture,
.area_04 picture,
.area_05 picture,
.area_06 picture{
  width: 100%;
  display: flex;
  justify-content: center;
  aspect-ratio: 179 / 266;
}

.area_01 picture img,
.area_02 picture img,
.area_03 picture img,
.area_04 picture img,
.area_05 picture img,
.area_06 picture img{
  width: 100%;
  /* aspect-ratio: 179 / 266; */

  /* width: 99%; */
  /* aspect-ratio: 266 / 395; */
}

/* iPhone SE対応 */
@media screen and (max-height: 622px) {
  
  .area_01 picture,
  .area_02 picture,
  .area_03 picture,
  .area_04 picture,
  .area_05 picture,
  .area_06 picture{
    aspect-ratio: 375 / 473;
  }

  .area_01 picture img,
  .area_02 picture img,
  .area_03 picture img,
  .area_04 picture img,
  .area_05 picture img,
  .area_06 picture img{
    width: 100%;
    /* aspect-ratio: 375 / 473; */
  }

}

/* === Anker_btn === */
.anker_area{
  width: 100%;
  height: auto;
  max-height: 82px;

  position: fixed;
  left: 0;
  bottom: 0;

  background: #FFF;

  transition: all 0.4s ease;
}

.anker_area_inner{
  width: 100%;
  max-width: 540px;

  margin: 0 auto;
  padding: 0.3rem 0;

  background: #FFF;

  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;

}

.anker_area p{
  display: flex;
  justify-content: center;
  align-items: center;

  padding: 0 0 0.2rem 0;
}

.anker_area p img{
  width: 60%;
}

.anker_area picture{
  display: flex;
  justify-content: center;
  align-items: center;
}

.anker_area picture img{
  width: 72%;
}

/* iPhone SE対応 */
@media screen and (max-height: 622px) {
  
  .anker_area picture img{
    width: 74%;
  }

}

/* iPhone SE Firefox対応 */
@media screen and (max-height: 539px) {
     
  .anker_area p img{
    width: 54%;
  }  

  .anker_area picture img{
    width: 60%;
  }

}

.disp_ctr{
  visibility: hidden;
  opacity: 0;
  transition: all 0.4s ease;
}

/* === Area07 - Form === */
.area_07{
  font-family: 'Noto Sans JP', sans-serif;
  background-image: url("../img/back_form.png");
  background-size: cover;
}

.area_07_inner{
  padding: 0;
  flex-direction: column;
  aspect-ratio: unset;
}

/* iPhone SE対応 */
@media screen and (max-height: 622px) {
  
  .area_07{
    height: auto;
  }
  
  .area_07_inner {
    padding: 0 0 2rem 0;
  }  

}

.area_07_inner h3{
  width: 100%;
  margin: 1.2rem 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.area_07_inner h3 img{
  width: 34%;
}

.form_area_inner{
  width: 90%;
  margin: 0 auto;
  background: #fff;
  border-radius: 5px;
  padding: 1rem;
}

.form_area_inner h4{
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
  font-family: 'Noto Sans JP', sans-serif;
}

.form_area_inner p{
  font-size: 0.7rem;
  font-weight: 500;
  font-family: 'Noto Sans JP', sans-serif;
}

.form_area_inner .form_area_bar{
  margin: 1.2rem 0;
}

#mailformpro{
  margin: 0.5rem 0 0.5rem 0;
  padding: 0 !important;
}

#mailformpro .mail_form_inner dt{
  float: none !important;
  width: auto !important;
  font-size: 0.8rem !important;

  margin-bottom: 0.2rem !important;
  padding: 0 !important;

  border: none !important;

  display: flex;
  align-items: center;
}

#mailformpro .mail_form_inner dt span{
  font-size: 0.6rem;
  font-weight: 500;

  margin-right: 0.5rem;
  padding: 0.05rem 1rem;
  border-radius: 20px;

  display: flex;
  align-items: center;
  color: #FFF;
}

#mailformpro .mail_form_inner dd{
  width: 100%;

  margin-bottom: 1rem !important;
  padding: 0 !important;

  border: none !important;
}

#mailformpro .mail_form_inner dd input{
  width: 100% !important;
  padding: 0.5rem !important;
  background: #FAFAFA !important;
  border: 1px solid #CCC !important;
  box-shadow: none !important;
}

#mailformpro .mail_form_inner dd textarea{
  width: 100% !important;
  height: 10rem !important;
  padding: 0.5rem !important;
  background: #FAFAFA !important;
  border: 1px solid #CCC !important;
  box-shadow: none !important;
}

#mailformpro .submit_btn{
  margin: 1.5rem 0 0 0 !important;
  text-align: center;
}

#mailformpro .submit_btn button{
  background: none;
  border: none;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  text-shadow: none !important;
}

#mailformpro .submit_btn button:hover{
  box-shadow: none;
}

.icon_any{
  background: #337AB7;
}

.icon_rq{
  background: #D9534F;
}

#mfp_phase_stat{
  display: none;
}

/* === Thanks Page === */
.thanks_area{
  align-items: center;
}

.thanks_logo{
  margin-top: 12dvh;
}

.thanks_logo a{
  display: flex;
  justify-content: center;
}

.thanks_logo img{
  width: 80%;
}

/* === For PC === */
@media screen and (min-width: 767px) {

  #wrapper{
    max-width: 540px;
    height: auto;
    overflow: unset;
    scroll-snap-type: none;
    scroll-behavior: auto;
  }

  .block_area{
    height: auto;
    align-items: flex-start;
  }

  .block_area_inner{
    aspect-ratio: auto;
  }

  .area_01 picture,
  .area_02 picture,
  .area_03 picture,
  .area_04 picture,
  .area_05 picture,
  .area_06 picture{
    aspect-ratio: auto;
  }

  .area_01 picture img,
  .area_02 picture img,
  .area_03 picture img,
  .area_04 picture img,
  .area_05 picture img,
  .area_06 picture img{
    width: 100%;
    aspect-ratio: auto;
  }

  .form_area_inner h4 {
    font-size: 1.2rem;
  }

  .form_area_inner p {
    font-size: 0.8rem;
  }

  .anker_area{
    max-height: none;
  }

  .anker_area_inner{
    max-width: 540px;
    /* padding: 0.8rem 0; */
    padding:  0;
    align-items: normal;
    align-content: space-evenly;
  }

  .anker_area p{
    padding: 0;
  }

  .anker_area p img{
    width: 60%;
  }
  
  .anker_area picture img{
    width: 72%;
  }

  .area_07 {
    height: 100lvh;
    align-items: center;
    /* padding: 2rem 0; */
  }

  .area_07_inner {
    height: auto;
    justify-content: center;
  }

  .form_ank_btn img{
    transition: all 0.4s ease;
  }

  .form_ank_btn img:hover{
    opacity: 0.8;
    transition: all 0.4s ease;
  }

  .submit_btn img{
    transition: all 0.4s ease;
  }

  .submit_btn img:hover{
    opacity: 0.8;
    transition: all 0.4s ease;
  }

}

/* === innerwidth / height test === */
.test_area{
  width: 100%;
  position: fixed;
  top: 0;
  z-index: 9999;
}

.test_area p{
  font-weight: 500;
  text-align: center;
}