body {
  background: url(/img/schoolphoto/background.png), var(--myBackground);
  background-repeat: repeat, no-repeat;
  background-size: contain, cover;
}
.header {
  background-image: url(/img/schoolphoto/header.jpg);
}
/* 使命について */
.mission {
  position: relative;
  background: url(/img/schoolphoto/mission/mission_back.png) no-repeat center/contain;
  margin: auto;
  box-sizing: border-box;
  max-width: 768px;
  margin-bottom: 150px;
  padding: 70px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  text-align: center;
  font-size: 2.4rem;
  line-height: 3.2rem;
}
.contents-wrapper {
  width: 100%;
}
/* 各パーツ配置 */
.mission-title, .rainbow, .child-fuki, .child {
  position: absolute;
}
.mission-title {
  top: -30px;
  left: 0;
}
.rainbow {
  bottom: 0px;
  right: 0px;
  width: 20%;
}
.child {
  bottom: -80px;
  right: 0px;
  width: 30%;
  overflow: hidden;
}
.child-fuki {
  top: -100px;
  right: 10px;
  transform: scale(1);
  animation: fukiAnime 1.5s;
  animation-iteration-count: infinite;
}
@keyframes fukiAnime
{
  from{transform: scale(1); }
  50% {transform: scale(1); }
  60%{ transform: scale(1.2); }
  70%{ transform: scale(0.9); }
  80%{ transform: scale(1.1); }
  90%{ transform: scale(0.8); }
  to{ transform: scale(1); }
}

/* 項目メニューアイコン */
.sch-menu {
  margin: auto;
  max-width: 1024px;
  width: 100%;
  margin-bottom: 150px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.sch-menu-btn {
  background-color: white;
  border: 3px solid var(--myAccentColor);
  border-radius: 50px;
  padding: 15px;
  margin: 10px;
  width: 45%;
  box-sizing: border-box;

}
.sch-menu-btn:hover {
  transform: scale(1.05);
}
.sch-menu-btn img, .sch-menu-btn p{
  display: block;
  text-align: center;
  margin: auto;
}
.sch-menu-btn img {
  height: 35px;
}
.sch-menu-btn p {
  color: var(--myAccentColor);
  width: 100%;
  font-size: 2rem;
  font-weight: 700;
  margin-top: 5px;
}
/* 各項目のボックスデザイン */
.sch-wrapper {
  max-width: 976px;
  width: 100%;

  box-sizing: border-box;
  margin: auto;
  margin-bottom: 100px;
  padding: 30px 30px 45px 30px;
  border-radius: 50px;

  background-color: white;
  color: var(--myFontColor);
  font-size: 1.8rem;
  line-height: 3.0rem;
  text-align: center;

}
/* スクールフォトとは */
.about-msg {
  background: url(/img/schoolphoto/about/msg_back.png) no-repeat center/cover;
  box-sizing: border-box;
  max-width: 750px;
  padding: 30px 0;
  margin: auto;
  margin-bottom: 30px;
}
.about-msg h3 {
  font-size: 2.6rem;
  padding-bottom: 10px;
  margin-bottom: 10px;
}
.about-msg p {


}
.about-flow {
  text-align: center;
}
.about-flow ul {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: 0 20px;
  font-size: 1.6rem;
}
.about-flow img {
  margin-left: -10px;
  width: 90%;
}
/* スクールフォト導入のメリット */
/* お困りですかブロック */
.adv-negative {
  position: relative;
  background: url(/img/schoolphoto/advantage/negative_back.png) no-repeat bottom center/contain;
  box-sizing: border-box;
  width: 100%;
  padding-top: 60%;
  height: 0;
  margin-bottom: 50px;
}
.fuki {
  position: absolute;
  z-index: 50;
  width: 25%;
}
.fuki-1 { top: 7%; left: 12%; }
.fuki-2 { top: 5%; right: 10%; }
.fuki-3 { bottom: -2%; left: 2%; }
.fuki-4 { bottom: -2%; right: 3%; }
.n-person {
  position: absolute;
  width: 40%;
  bottom: 0;
  left: 28%;
  margin:auto;
}
/* お任せくださいブロック */
.adv-positive {
  position: relative;
  background-color: var(--myAccentColor);
  background: linear-gradient(
    -45deg,
    #84BF3E 25%, var(--myAccentColor) 25%,
    var(--myAccentColor) 50%, #84BF3E 50%,
    #84BF3E 75%, var(--myAccentColor) 75%,
    var(--myAccentColor)
    );
  background-size: 40px 40px;
  height: auto;
  padding: 30px 0;
  margin-top: 150px;
  margin-bottom: 0;
  border-radius: 25px;
}
.posi-p {
  margin-top: -150px;
  font-weight: 700;
}
.posi-p img {
  width: 70%;
}
.price-free {
  color: var(--myBackground);
  margin-top: 15px;
}
.price-free-main {
  display: inline-block;
  margin: 10px auto;
  background-color: #07572E;
  padding: 40px 100px 30px 100px;
  border-radius: 100px;
  font-size: 3.8rem;
  line-height: 1;
}
.posi-area {
  display: flex;
  justify-content: space-around;
  margin: auto;
  margin-top: -15px;
  margin-bottom: 15px;
  width: 90%;
}
.posi-fuki {
  background: url(/img/schoolphoto/advantage/posi_fuki.png) no-repeat center/contain;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  font-size: 1.8rem;
  line-height: 2.4rem;

  width: calc(240px*1.1);
  height: calc(250px*1.1);

  transform: translateY(50px);
  transition: 1s;
  opacity: 0;
}
.posi-fuki:nth-child(2) {
  margin-top: 50px;
  align-self: flex-start;
}
.posi-fuki i{
  font-size: 5rem;
  margin: 10px auto;
  color: var(--myAccentColor);
}
.posi-fuki span {
  font-size: 120%;
  font-weight: 700;
  padding-bottom: 5px;
  margin-bottom: 10px;
  border-bottom: dashed 1px var(--myFontColor);
}
.posi-header {
  width: 100%;
  text-align: center;
  margin-bottom: 15px;
  color: var(--myAccentColor);
  font-size: 6rem;
  line-height: 1;
  font-weight: bold;
}
.posi-matome {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items:center;
  flex-wrap: wrap;

  color: var(--myAccentColor);
  font-size: 2.4rem;
  font-weight: bold;

  border: solid 10px var(--myBorderColor);
  background-color: var(--myBorderColor);
  border-radius: 25px;
  margin: auto;
  margin-bottom: 50px;
  padding: 30px 0;
  box-sizing: border-box;
}
.posi-matome-p {
  text-align: left;

}
.posi-matome i {
  font-size: 210%;
  margin-right: 10px;
}

/* 保護者のメリット */
.adv-parent ul{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 50px;
}
.adv-parent li {
  box-sizing: border-box;
  padding: 15px 0;
  margin: auto;
  margin-bottom: 15px;
  border: solid 2px var(--myAccentColor);
  border-radius: 25px;

  width: 32%;
  display: flex;
  justify-content: center;
  align-items: center;

  text-align: left;
  font-size: 1.8rem;
  line-height: 1.5;
}
.adv-parent i {
  font-size: 350%;
  margin-right: 15px;
}
.adv-parent li:nth-child(1),.adv-parent li:nth-child(2) {
  width: 49%;

}

.contact-guide {
  width: 100%;
  margin: auto;
}
.contact-guide p {
  color: var(--myAccentColor2);
  font-size: 2rem;
  line-height: 1.5;
  font-weight: bold;
}
.contact-guide a {
  display: inline-block;
  border: solid 3px var(--myAccentColor2);
  background-color: var(--myAccentColor2);
  margin-top: 15px;
  padding: 20px 50px;
  border-radius: 100px;
  color: white;
  font-size: 2.6rem;
  font-weight: bold;
  box-shadow: 0px 5px 0px rgb(119, 69, 28);
}
.contact-guide a:hover {
  background-color: white;
  color: var(--myAccentColor2);
}
.contact-guide a:active {
  transform: translateY(5px);
  box-shadow: none;
}

/* 他社との違い */
.point {
  margin: auto;
  margin-bottom: 50px;
}
.sample-photo {
  position: relative;
  margin: auto;
  margin-top: 30px;
  max-width: 720px;
  width: 90%;
}
.sample-tag {
  position: absolute;
  top: -6px;
  left: -9px;
  z-index: 100;
}
.slick-slide {
  height: auto;
}
.slider {
  margin: auto;
  max-width: 720px;
  width: 100%;
  height: auto;
}
.slider img {
  margin: 0 3px;
}
.thumb {
  margin: auto;
  margin-top: -0.5%;
  margin-bottom: -0.6%;
  width: 60%;
}
.thumb img{
  max-width: 100px;
  height: auto;
  padding: 0 2px;
}
.thumb-frame1,.thumb-frame2 {
  width: 60%;
}
.thumb-frame2 {
  transform: rotate(180deg);
}
.net-image {
  width: 50%;
  margin: 15px 0;
}
.net-image:hover{
  opacity: 0.8;
}
.net-point {
  width: 85%;
  margin: 30px auto;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.net-point p{
  background-color: var(--myAccentColor);
  box-sizing: border-box;
  padding: 30px;
  border-radius: 150px;
  width: 200px;
  height: 200px;

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

  color: white;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.5;
}

.flow-wrapper {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  margin-bottom: 50px;
}
.flow-step {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  width: 30%;
  padding: 15px;
  border-radius: 25px;
  box-sizing: border-box;
}
.flow-vector {
  font-size: 3rem;
  color: var(--myAccentColor);
  align-self: center;
}
.before-flow .flow-step {
  background-color: var(--myBackground);
  border: solid 3px var(--myAccentColor);
}
.after-flow .flow-step {
  background-color: var(--myAccentColor);
}
.flow-num {
  width: 100%;
  height: 30px;
  border-radius: 100px;
  font-size: 1.8rem;
  font-weight: bold;
  line-height: 30px;
  margin-bottom: 15px;
}
.before-flow .flow-num {
  background-color: var(--myAccentColor);
  color: var(--myBackground);
}
.after-flow .flow-num {
  background-color: var(--myBackground);
  color: var(--myAccentColor);
}
.flow-h {
  text-align: center;
  font-size: 2.2rem;
  line-height: 1;
  font-weight: bold;
  align-self: center;
  height: 50px;
}
.flow-h span {
  font-size: 60%;
}
.before-flow .flow-h {
  color: var(--myAccentColor);
}
.after-flow .flow-h {
  color: var(--myBackground);
}
.flow-p {
  width: 100%;
  text-align: left;
  font-size: 1.4rem;
  line-height: 1.5;
  align-self: flex-start;
}
.after-flow .flow-p {
  color: var(--myBackground);
}
.flow-step i {
  display: block;
  width: 100%;
  margin: 15px 0;
  font-size: 6rem;
}
.before-flow .flow-step i {
  color: var(--myAccentColor);
}
.after-flow .flow-step i {
  color: var(--myBackground);
}

#voice-sch {
  background-color: #ECF9FA;
}
.voice-row {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  flex-wrap: nowrap;
  width: 95%;
  margin: 50px auto;
}
.voice-fuki {
  position: relative;
  background-color: white;
  box-sizing: border-box;
  padding: 30px 50px;
  margin-right: 30px;
  text-align: left;
  border-radius: 100px;
}
.voice-fuki::before {
  content: url(/img/schoolphoto/voice/fuki_parts.png);
  position: absolute;
  transform: rotate(-45deg);
  bottom: 30px;
  right: -20px;
}
.voice-row:nth-child(2n+1){
  flex-direction: row-reverse;
}
.voice-row:nth-child(2n+1) > .voice-fuki{
  margin-left: 30px;
  margin-right: 0;
}
.voice-row:nth-child(2n+1) > .voice-fuki::before{
  bottom: 30px;
  left: -25px;
  right: auto;
  transform: scale(-1, 1) rotate(-45deg);
}
.person {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.person p {
  font-size: 1.6rem;
  line-height: 2.0rem;
}
.person span {
  font-size: 1.2rem;
}
.person img {
  margin-top: 15px;
}

.con-illust {
  position: relative;
  max-width: 968px;
  margin: auto;
  width: 100%;
  min-height: 400px;
  box-sizing: border-box;
}
.con-illust img {
  position: absolute;
}
.con-fuki1, .con-fuki2, .con-fuki3 {
  width: 30%;
  z-index: 5;
}
.con-fuki1 {
  left: 10px;
  top: 30px;
}
.con-fuki2 {
  left: 0;
  right: 0;
  top: -50px;
  margin: auto;
}
.con-fuki3 {
  right: 10px;
  top:50px;
}
.con-hoiku {
  width: 450px;
  left: 0;
  right: 0;
  bottom:0;
  margin: auto;
}
.contact-box {
  margin: auto;
  max-width: 968px;
  width: 100%;
  margin-top: 50px;
  margin-top: -5px;
  margin-bottom: 150px;
  box-sizing: border-box;
}
.contact-box-p {
  text-align: center;
  font-size: 2.2rem;
  line-height: 1.5;
  width: 90%;
}
.contact-big {
  text-align: center;
  font-size: 150%;
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 15px;
}
.contact-box-parts {
  width: 90%;
  display: flex;
  justify-content:space-around;
  flex-wrap: wrap;
}
.contact-line {
  padding: 0;
  margin-bottom: 30px;

  display: flex;
  display: none;
  flex-wrap: wrap;
  justify-content: space-around;

  background-color: var(--myBackground);
  border: solid 3px var(--myAccentColor);
  color: var(--myAccentColor);
  width: 80%;
}
p.contact-line-title {
  width: 100%;
  color: var(--myBackground);
  background-color: var(--myAccentColor);
  padding: 15px 0;
  margin-bottom: 15px;
}
p.contact-line-desc {
  font-size: 2rem;
  line-height: 1.5;
  font-weight: 400;
  width: 90%;
  text-align: left;
  padding-bottom: 15px;
  border-bottom: 1px dashed var(--myAccentColor);
}
.contact-line-parts {
  width: 45%;
  margin: 15px auto;
}
.contact-line-parts p{
  font-size: 1.8rem;
  line-height: 2;
  font-weight: 400;
}
.line-button-wrapper {
  height: 100px;
  align-self: flex-end;
}
.line-button{
  filter:drop-shadow(0px 3px 0px var(--myShadowColor));
}
.line-button-img{
  width: 150px;
}
.line-qr {
  height: 100px;
}
.slide-under {
  transform: translateY(50px);
  transition: 1s;
  opacity: 0;
}
.slide-over {
  transform: translateY(-50px);
  transition: 2s;
  opacity : 0;
}