@charset "UTF-8";

/* ==== root ========================== */
:root {
  --color-black: #6F6F6F;
  --color-white: #fff;
  --color-primary: #F29600;
  --color-bg: #FFF7E7;

  --zen-maru: "Zen Maru Gothic", serif;


  --header: 15rem;
  scroll-padding: var(--header);
}

@media screen and (max-width:767px) {
  :root {
    --header: 10rem;
    scroll-padding: var(--header);
  }
}



/*================================================
 *  subVisual
 ================================================*/
#intro .wrap {
  width: 129.6rem;
  padding-left: 3rem;
}

.intro_lead {
  display: flex;
  align-items: start;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: 3.2rem;
}

.intro_lead p {
  width: 63rem;
  font-size: 1.8rem;
}

.intro_clm {
  display: flex;
  align-items: start;
  justify-content: center;
  gap: 3rem 4rem;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  padding: 4rem 4.5rem;
  border-radius: 2rem;
  border: 1px solid var(--color-primary);
  box-shadow: 1rem 1rem 0 #F9CE88;
  margin: 4rem auto 0;
  background: var(--color-white);
}

.intro_card {
  max-width: 28.4rem;
}

.intro_card h3 {
  font-weight: 700;
  font-size: 2rem;
  margin: 1.6rem 0 1rem;
  text-align: center;
}

.intro_card img {
  border-radius: 2rem;
}

.intro_card p {
  font-weight: 500;
  width: 96%;
  margin: 0 auto;
}

@media screen and (max-width:767px) {
  #intro .wrap {
    width: 36rem;
    padding-left: 0;
  }

  .intro_lead {
    margin-top: 3rem;
  }

  .intro_lead p {
    width: 100%;
    font-size: 1.8rem;
    margin-top: 2rem;
    font-weight: 500;
  }

  .intro_clm {
    flex-wrap: wrap;
    gap: 3rem 4rem;
    padding: 4rem 2rem;
    margin: 2rem auto 0;
    width: 36rem;
  }

  .intro_card {
    width: 100%;
    max-width: unset;
  }


}

/*================================================
 *  handling
 ================================================*/
#handling .wrap {
  max-width: 86rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: start;
}

#handling .wrap h2 {
  width: 100%;
  font-size: 2.8rem;
  font-weight: 700;
  margin-bottom: 3rem;
}

#handling .wrap dl {
  width: 37rem;
}

#handling .wrap dl dt {
  font-size: 2.4rem;
  font-weight: 700;
  background-image: repeating-linear-gradient(90deg, #000000, #000000 2px, transparent 2px, transparent 4px);
  background-position: left bottom;
  background-repeat: repeat-x;
  background-size: 100% 1px;
  position: relative;
  margin-bottom: 1.6rem;
  padding-bottom: 1rem;
}

#handling .wrap dl dt::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 1px;
  box-shadow: 0.4rem 0.4rem 5px hsl(0deg 0% 0% / 25%);
  bottom: 0;
  left: 0;
}

#handling .wrap dl dd {
  font-size: 2rem;
  padding-left: 1em;
  position: relative;
  font-weight: 700;
}

#handling .wrap dl dd::before {
  position: absolute;
  content: "・";
  left: 0;
  top: 0;
}

@media screen and (max-width:767px) {
  #handling .wrap h2 {
    width: 100%;
    font-size: 2.2rem;
    margin-bottom: 0;
  }

  #handling .wrap dl {
    width: 100%;
    margin-top: 2rem;
  }

  #handling .wrap dl dt {
    font-size: 2rem;
  }

  #handling .wrap dl dd {
    font-size: 1.6rem;
  }
}

/*================================================
 *  qa
 ================================================*/
#qa {
  background: var(--color-primary);
  color: var(--color-white);
}

.qa_ttl {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 0.3rem dotted var(--color-white);
  padding-bottom: 3rem;
}

.qa_ttl h2 {
  color: var(--color-white);
}

.qa_ttl span {
  display: block;
  width: 7rem;
}


.qa_list dt {
  font-size: 2.4rem;
  padding-left: 3.6rem;
  position: relative;
  font-weight: 700;
  margin-top: 4.5rem;
}

.qa_list dd {
  font-size: 2rem;
  padding-left: 3.6rem;
  position: relative;
  font-weight: 700;
  margin-top: 1.6rem;
}

.qa_list dt::before,
.qa_list dd::before {
  position: absolute;
  content: "Q.";
  left: 0;
  top: 0;
  font-size: 2.4rem;
}

.qa_list dd::before {
  content: "A.";
}

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

  .qa_ttl span {
    width: 5rem;
  }

  .qa_list dt {
    font-size: 2rem;
    padding-left: 2.5rem;
  }

  .qa_list dd {
    font-size: 1.6rem;
    padding-left: 2.5rem;
  }

  .qa_list dt::before,
  .qa_list dd::before {
    font-size: 2rem;
  }
}

/*================================================
 *  schoolPages
 ================================================*/

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

  .schoolPages .main_bg,
  .festivalPages .main_bg,
  .clothingPages .main_bg,
  .toraichiPages .main_bg {
    background-image: none;
  }

}

/*================================================
 *  schoolPages
 ================================================*/
.schoolPages #handling .ill01 {
  width: 6.5rem;
  left: -17vw;
  top: 3rem;
}

.schoolPages #handling .ill02 {
  width: 11.6rem;
  right: -19vw;
  top: 6rem;
}

.schoolPages #handling .ill03 {
  width: 5.7rem;
  right: -22vw;
  top: -4rem;
}

.schoolPages #handling .ill04 {
  width: 5.5rem;
  left: -20rem;
  bottom: -15rem;
}


.schoolPages #newsSec .ill01 {
  width: 13rem;
  right: -13vw;
  top: 33rem;
}

.schoolPages #newsSec .ill02 {
  width: 17rem;
  left: -15vw;
  top: 42rem;
}

.schoolPages #newsSec .ill03 {
  width: 7.8rem;
  left: -15vw;
  left: -10rem;
  bottom: -10rem;
}

.schoolPages #newsSec .ill04 {
  width: 6.2rem;
  right: -8rem;
  bottom: 7rem;
}

@media screen and (max-width:767px) {
  .schoolPages #handling .ill01 {
    width: 3.5rem;
    left: 0rem;
    top: -9rem;
  }

  .schoolPages #handling .ill02 {
    width: 7.6rem;
    right: 0;
    top: -11rem;
  }

  .schoolPages #handling .ill03 {
    width: 3.7rem;
    right: 6rem;
    top: 2rem;
  }

  .schoolPages #handling .ill04 {
    width: 3.5rem;
    left: 7rem;
    bottom: -9rem;
  }


  .schoolPages #newsSec .ill01 {
    width: 9rem;
    right: 2rem;
    top: -10rem;
  }

  .schoolPages #newsSec .ill02 {
    width: 12rem;
    left: -1.5rem;
    top: -5rem;
  }

  .schoolPages #newsSec .ill03 {
    width: 4.8rem;
    left: 0rem;
    bottom: -10.5rem;
    z-index: 3;
  }

  .schoolPages #newsSec .ill04 {
    width: 4.2rem;
    right: 0rem;
    bottom: -4rem;
    z-index: 3;
  }
}

/*================================================
 *  clothing
 ================================================*/
.clothingPages #intro .ill01 {
  width: 13rem;
  left: -2vw;
  bottom: -60rem;
  z-index: 3;
}

.clothingPages #intro .ill02 {
  width: 15rem;
  right: -3vw;
  bottom: -58rem;
  z-index: 3;
}

.clothingPages #newsSec .ill01 {
  width: 6.2rem;
  left: -10rem;
  bottom: 10rem;
  z-index: 3;
}

@media screen and (max-width:767px) {
  .clothingPages #intro .ill01 {
    width: 7.5rem;
    left: 2rem;
    bottom: -142rem;
  }

  .clothingPages #intro .ill02 {
    width: 9rem;
    right: 0;
    bottom: -147rem;
  }

  .clothingPages #newsSec .ill01 {
    width: 4.2rem;
    left: 1rem;
    bottom: -8rem;
  }
}

/*================================================
 *  festivalPages
 ================================================*/

.festivalPages #newsSec .ill01 {
  width: 17.7rem;
  left: -12vw;
  top: -3rem;
  z-index: 3;
}

.festivalPages #newsSec .ill02 {
  width: 17.7rem;
  right: -12vw;
  top: 4rem;
}

.festivalPages #newsSec .ill03 {
  width: 6.2rem;
  right: -9vw;
  bottom: 10rem;
}

@media screen and (max-width:767px) {
  .festivalPages #newsSec .ill01 {
    width: 12.7rem;
    left: 2rem;
    top: -12rem;
  }

  .festivalPages #newsSec .ill02 {
    width: 11.7rem;
    right: -1rem;
    top: -14rem;
  }

  .festivalPages #newsSec .ill03 {
    width: 4.2rem;
    right: 2rem;
    bottom: -9rem;
    z-index: 3;
  }

}

/*================================================
 *  clothing
 ================================================*/


.toraichiPages #intro .ill01 {
  width: 19rem;
  right: -9rem;
  bottom: -71rem;
}

.toraichiPages #newsSec .ill01 {
  width: 13rem;
  left: -16rem;
  bottom: 10rem;
  z-index: 3;
}

.toraichiPages .intro_card:first-of-type img {
  border: 5px solid #FFD4D4;
}

@media screen and (max-width:767px) {
  .toraichiPages #newsSec {
    padding-bottom: 20rem;
  }

  .toraichiPages #intro .ill01 {
    width: 13rem;
    right: -2rem;
    bottom: -177rem;
  }

  .toraichiPages #newsSec .ill01 {
    width: 9rem;
    left: 1rem;
    bottom: -19rem;
  }
}

/*================================================
 *  
 ================================================*/


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

/*================================================
 *  
 ================================================*/


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

/*================================================
 *  
 ================================================*/


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

/*================================================
 *  
 ================================================*/


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

/*================================================
 *  
 ================================================*/


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