:root {
  --fcorange: #ff912b;
  --fcblue: #378ed2;
  --fclorange: #f4ae5e;
}

body{
  color: #342727;
  background: #fff;
  font-size: 1.5rem;
  font-family: "IBM Plex Sans JP", sans-serif;
  font-weight: 500;
  font-style: normal;
  font-optical-sizing: auto;
  line-height: 1.7;
  position: relative;
  min-height: 100vh;
  min-height: -webkit-fill-available;
}
header .btn,
#glmenu{
  display: none!important;
}
.enttl{
  font-family: var(--ffamily);
  font-size: 2rem;
  font-weight: 700;
  line-height: 10rem;
  text-align: center;
  position: relative;
  margin: 4rem 0;
  z-index: 2;
}
.enttl::before {
  font-family: "IBM Plex Sans JP", sans-serif;
  content: attr(data-text);
  font-size: 8.5rem;
  font-weight: 100;
  line-height: 10rem;
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -50%);
  opacity: .2;
  z-index: -1;
}
@media screen and (min-width: 900px){
  .enttl{
    text-align: left;
    padding: 0 0 0 3rem;
  }
  .enttl::before {
    font-size: 10rem;
    left: 0;
    transform: none;
  }
}

.ccatch{
  font-family: var(--ffamily);
  font-size: 1.8rem;
  font-weight: 600;
  background: #fff;
  border-radius: 10rem;
  width: auto;
  display: inline-block;
  padding: 2rem 5rem 2rem 12rem;
  text-align: left;
  margin: 0 auto;
  position: relative;
}
@media screen and (min-width: 900px){
  .ccatch{
    margin: -8rem auto 0;
  }
}
.ccatch::before{
  content: "";
  position: absolute;
  left: 2rem;
  bottom: 0;
  background: url(/img/halal-person5.webp) left bottom no-repeat;
  background-size: contain;
  width: 9rem;
  height: 9rem;
}
.ccatch.inview{
  transform: translateY(5rem);
  filter: blur(0);
}
.ccatch.inview.display{
  transform: translateY(0);
}
.boxLF{
  width: 100%;
  padding: 5rem 2svw 10rem;
  margin: 0;
}
.boxRF{
  width: 100%;
  padding: 5rem 2svw 10rem;
  margin: 0;
}
.boxLF.inview,
.boxRF.inview{
  transform: translateY(5rem);
}
.boxLF.display,
.boxRF.display{
  transform: translateY(0);
}
@media screen and (min-width: 1300px){
  .boxLF{
    width: 93svw;
    border-radius: 0 5rem 5rem 0;
    margin: 10rem auto 0 0;
  }
  .boxRF{
    width: 93svw;
    border-radius: 5rem 0 0 5rem;
    margin: 10rem 0 0 auto;
  }
}

.inview{
  opacity: 0;
  filter: blur(1rem);
  transition: all .6s ease;
}
.inview.display{
  opacity: 1;
  filter: blur(0);
}

/* fv */

.halal_mainview{
  margin: 3rem 0 8rem;
}
.halal_mainview .wrap{
  background: url(/img/bg-mv_sp.webp) center center no-repeat;
  background-size: cover;
  text-align: left;
  padding: 5rem 0;
  margin: -5rem auto;
}
.halal_mainview h1,
.halal_mainview h3{
  color: #ab2800;
  font-family: var(--ffamily);
  width: min(120rem, 87svw);
  margin: 2rem auto;
  text-shadow: 0 0 2px #FFF, 0 0 2px #FFF, 0 0 2px #FFF, 0 0 2px #FFF, 0 0 2px #FFF, 0 0 2px #FFF;
}
.halal_mainview h1{
  font-size: 3.3rem;
  line-height: 1.4;
  writing-mode: tb;
  width: 25rem;
  margin: 0 auto 0 4rem;
}
.halal_mainview h1 span{
  letter-spacing: -1.3rem;
}
.halal_mainview h3{
  font-size: 1.8rem;
}
h2.hr-catch{
  position: absolute;
  top: 7rem;
  right: 7svw;
  width: 8rem;
}
@media screen and (min-width: 900px){
  .halal_mainview h1{
    writing-mode: horizontal-tb;
    width: min(120rem, 87svw);
    margin: 0 auto;
  }
  .halal_mainview .wrap{
    background: url(/img/bg-mv.webp) center center no-repeat;
    background-size: cover;
    padding: 20svh 0;
    margin: -9rem auto;
  }
  h2.hr-catch{
    top: 0;
    right: 15svw;
    width: 10rem;
  }
  h2.hr-catch.inview,
  .marquee_wrap.inview{
    transition-delay: 2s;
  }
/*  h2.hr-catch.inview{
    transform: scale3d(1, 0, 1);
    transform-origin: center top;
  }
  h2.hr-catch.inview.display{
    transform: scale3d(1, 1, 1);
  }*/
}

.marquee{
  overflow: hidden;
  width: 100%;
}

.marquee_inner{
  display: flex;
  gap: 2rem;
  margin-left: 2rem;
  align-items: flex-start;
}
.marquee_inner img{
  width: 19rem;
  height: auto;
  border-radius: 1rem;
  display: block;
  flex: 0 0 auto;
}
.marquee_inner img:nth-child(odd){
  margin-top: 3rem;
}
@media screen and (min-width: 900px){
  .marquee_inner img{
    width: 22rem;
  }
}


.cta{
  display: flex;
  flex-direction: row;
  justify-content: center;
  position: relative;
  padding: 0;
}
.cta a{
  width: 50svw;
  display: block;
  color: #fff;
  padding: 8.5rem 0 2rem;
}
.ctacom{
  color: #7d7170;
  font-family: var(--ffamily);
  font-size: 1.6rem;
  font-weight: 600;
  background: #fff;
  border-radius: 10rem;
  width: auto;
  display: inline-block;
  padding: 1rem 3rem 1rem 11rem;
  text-align: left;
  margin: 2rem auto 0;
  position: absolute;
}
.ctacom::before{
  content: "";
  position: absolute;
  left: 2rem;
  bottom: 0;
  background: url(/img/halal-person5.webp) left bottom no-repeat;
  background-size: contain;
  width: 8rem;
  height: 8rem;
}
.ctacom br{
  display: none;
}
.diagnosis{
  background: #5bb381;
}
.tour{
  background: #ee7a2d;
}
@media screen and (min-width: 900px){
  .cta a{
    padding: 2rem 0;
  }
  .cta a img{
    width: auto;
    height: 15rem;
  }
  .ctacom{
    margin: 6rem auto 0;
  }
  .ctacom br{
    display: block;
  }
}


.why{
  background: #ecebee;
}
.why b{
  background: #fff100;
}
.why .header{
  background: #ecebee url(/img/bg-why-sp.webp) top center no-repeat;
  background-size: 100% auto;
  padding: 18rem 2svw 3rem;
}
.why .header h2{
  font-size: 3.5rem;
  font-family: var(--ffamily);
  font-weight: 700;
  margin: 2rem auto 3rem;
}
.why .header{
  font-size: 1.8rem;
}
.why .header p{
  text-align: left;
  padding: 0 3svw;
}

.why .fukidashi{
  width: min(105rem, 96svw);
  display: flex;
  flex-direction: row;
  text-align: left;
  gap: 6rem;
  flex-wrap: wrap;
  margin: 8rem auto 0;
  padding-bottom: 12rem;
}
.why .fukidashi section{
  padding-left: 12rem;
  background-position: left top;
  background-repeat: no-repeat;
  background-size: 11rem;
}
.why .fukidashi section.p1{background-image: url(/img/halal-person1.webp);}
.why .fukidashi section.p2{background-image: url(/img/halal-person2.webp);}
.why .fukidashi section.p3{background-image: url(/img/halal-person3.webp);}
.why .fukidashi section.p4{background-image: url(/img/halal-person4.webp);}

.why .fukidashi h3{
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.5;
  background: #fff;
  border-radius: 2.5rem;
  display: inline-block;
  padding: 2rem 2rem 2rem 1.5rem;
  text-align: left;
  position: relative;
}
.why .fukidashi h3::before{
  content: "";
  position: absolute;
  background: url(/img/fukidashi.webp) right top no-repeat;
  background-size: contain;
  width: 2rem;
  height: 2rem;
  left: -1.8rem;
  top: 2.3rem;
}
.why .fukidashi .p4 h3{
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.why .fukidashi p{
  text-align: left;
  padding: 1rem 0 0 2rem;
  position: relative;
  transition-delay: 1s;
}
.why .fukidashi p::before{
  content: "";
  width: 0;
  height: 0;
  border: .6rem solid transparent;
  border-left-color: #00a04c;
  position: absolute;
  left: .7rem;
  top: 1.5rem;
}
/*.why .fukidashi h3.inview {
  transform: scale3d(0, 1, 1);
  transform-origin: left top;
}
.why .fukidashi h3.inview.display{
  transform: scale3d(1, 1, 1);
}*/
@media screen and (min-width: 900px){
  .why .header{
    background-image: url(/img/bg-why.webp);
  }
  .why .header h2{
    font-size: 4rem;
    margin: 5rem auto 5rem;
  }
  .why .header p{
    text-align: center;
    margin-bottom: 1rem;
  }
  .why .fukidashi section{
    background-position: left bottom;
    background-size: contain;
    padding-left: 15rem;
  }
}


.basic{
  color: #fff;
  background-color: #009b4b;
  opacity: 1;
  background-image:  linear-gradient(135deg, #00a04c 25%, transparent 25%), linear-gradient(225deg, #00a04c 25%, transparent 25%), linear-gradient(45deg, #00a04c 25%, transparent 25%), linear-gradient(315deg, #00a04c 25%, #009b4b 25%);
  background-position:  6px 0, 6px 0, 0 0, 0 0;
  background-size: 6px 6px;
  background-repeat: repeat;
  position: relative;
  padding: 15rem 5svw;
}
.basic::before{
  content: "";
  width: 0;
  height: 0;
  border: 7rem solid transparent;
  border-top-color: #ecebee;
  position: absolute;
  top: -2px;
  left: calc(50% - 7rem);
}
.basic.inview{
  filter: blur(0);
}
.basic.inview::before{
  border-top-width: 0rem;
  transition: all .6s ease;
}
.basic.inview.display::before{
  border-top-width: 5rem;
}
.basic .catch{
  font-size: 1.7rem;
  text-align: left;
}
.basic .catch b{
  color: #fff100;
  font-size: x-large;
}
.basic h2{
  color: #00a04c;
  background: #fff;
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -1px;
  padding: 1.5rem 3rem 1rem 11rem;
  margin: 4rem auto 2rem;
  display: inline-block;
  border-radius: 6rem;
  position: relative;
}
.basic h2::before{
  content: "";
  position: absolute;
  left: 2rem;
  bottom: 0;
  background: url(/img/halal-person5.webp) left bottom no-repeat;
  background-size: contain;
  width: 8rem;
  height: 8rem;
}
.basic .wrap{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8rem 6rem;
}
.basic .wrap h3{
  font-family: var(--ffamily);
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1.4;
}
.basic .wrap h3 span{
  font-family: "IBM Plex Sans JP", sans-serif;
  font-size: 2rem;
  font-weight: 100;
  display: block;
}
.basic .wrap h3 span b{
  font-size: 3rem;
  font-weight: 100;
}
.basic .wrap h3 strong{
  color: #fff100;
}

.basic .wrap img{
  margin: 1rem auto;
}
.basic .wrap p{
  text-align: left;
  width: 85svw;
}
@media screen and (min-width: 900px){
  .basic .catch{
    font-size: 2rem;
    line-height: 2;
    text-align: center;
    margin: 2rem auto;
  }
  .basic .wrap{
    flex-direction: row;
    align-items: flex-start;
  }
  .basic h2{
    font-size: 2.5rem;
    margin:5rem auto 4rem;
  }
  .basic .wrap p{
    width: 32rem;
  }
  .halal-point2{transition-delay: .7s;}
  .halal-point3{transition-delay: 1.4s}
}

.solution{
  background: #37add8 url(/img/bg-price.svg) left top no-repeat;
  background-size: cover;
  position: relative;
  padding: 10rem 2svw;
  overflow: hidden;
}
.solution .enttl{
  color: #fff;
  text-align: center;
  margin-bottom: 7rem;
}
.solution .enttl::before{
    color: #fff;
    left: 50%;
    transform: translateX(-50%);
  }
.solution .ccatch{
  color: #46aed9;
}
@media screen and (min-width: 900px){
  .solution .ccatch{
    margin-bottom: 24rem;
  }
}
.halal-solution{
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}
.halal-solution h3{
  font-size: 4rem;
  font-weight: 700;
}
.halal-solution h3::after{
  content: "・・・";
  display: block;
  margin: 0 auto;
  opacity: .4;
  letter-spacing: -1rem;
  line-height: 1;
  text-shadow: none;
}
/*
.solution .catch{
  color: var(--fcolor3);
  font-size: 2rem;
  font-weight: 700;
  background: #fff;
  border-radius: 100%;
  width: 60rem;
  height: 60rem;
  display: flex;
  justify-content: center;
  align-items: center;
}*/
.solution .ccatch strong{
  color: #045596;
  background: linear-gradient(transparent 70%, #ffffaa 70%);
  margin: 0 .2rem;
  font-size: 2rem;
}
.solution .wrap{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.halal-solution_txt{
  color: #fff;
  font-weight: bold;
  position: relative;
  background: #1a75bd33;
  width: 60rem;
  height: 60rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 10rem;
  border-radius: 100%;
  text-shadow: 0 0 10px #1a75bd;
  backdrop-filter: blur(3px);
}
.halal-solution_txt p{
  font-size: 1.7rem;
  margin-bottom: .5rem;
  line-height: 1.7;
  display: inline-block;
  line-height: 1.5;
  margin: 1rem auto;
}
.halal-solution_txt p strong{
  color: #ffffcc;
  margin: 0 .1rem;
  font-size: 2rem;
}
.halal-solution_txt small{
  font-size: 1.2rem;
}
.halal-solution_txt h3 span{
  font-size: 2rem;
  font-weight: 100;
  display: block;
  text-shadow: none;
}
.halal-solution_txt h3 span b{
  font-size: 3rem;
  font-weight: 100;
}
.halal-solution_img{
  z-index: 2;
  margin: 10rem auto -15rem;
}
.halal-solution_img.inview{
  transform: translateY(5rem);
}
.halal-solution_img.display{
  transform: translateY(0);
}
.halal-solution_img.fadeImg{
  position: relative;
  width: 420px;
  aspect-ratio: 4 / 3.3;
  overflow: hidden;
}
.halal-solution_img.fadeImg .img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 1s ease;
}
.halal-solution_img.fadeImg .img1{
  opacity: 1;
  animation: fadeImg1 7s infinite;
}

.halal-solution_img.fadeImg .img2{
  opacity: 0;
  animation: fadeImg2 7s infinite;
}
@keyframes fadeImg1{
  0%, 40%   { opacity: 1; }
  50%, 90%  { opacity: 0; }
  100%      { opacity: 1; }
}

@keyframes fadeImg2{
  0%, 40%   { opacity: 0; }
  50%, 90%  { opacity: 1; }
  100%      { opacity: 0; }
}
/*  .halal-solution_txt::before {
    content: "";
    position: absolute;
    border-radius: 100%;
    width: 55rem;
    height: 55rem;
    left: -3rem;
    top: -19rem;
    background: #ffffff44;
    z-index: -1;
}*/
.comment .ramse,
.comment .shopper{
  background:var(--fcolor3);
  color: #fff;
  border-radius: 2rem;
  text-align: left;
  padding: 1.5rem;
  line-height: 1.5;
  margin-bottom: 2.5rem;
}
.comment .shopper{
  background: var(--fcblue);
}
.comment img{
  float: left;
  margin-right: 1rem;
  border-radius: 2rem;
  width: 7rem;
}
.comment h3{
  font-weight: 600;
  margin-bottom: .5rem;
}
@media screen and (min-width: 900px){
  .halal-solution{
    flex-direction: row;
    margin-bottom: -4rem;
  }
  .halal-solution:nth-child(odd){
    flex-direction: row-reverse;
  }
  .halal-solution_img{
    width: min(42rem, 40svw);
  }
  .halal-solution1{
    margin-top: -20rem;
  }
  .halal-solution3{
    margin-bottom: 0;
  }
  .halal-solution1 .halal-solution_img{
    margin: 0 auto 0 -10rem;
  }
  .halal-solution2 .halal-solution_img{
    margin: 0 -5rem 0 auto;
  }
  .halal-solution3 .halal-solution_img{
    width: 30rem;
    margin: 0 auto;
  }

  .comment{
    width: 62rem;
    margin: 0 auto;
  }
  .comment h3{
    border-bottom: 1px solid;
    font-size: 1.7rem;
  }
}


.route{
  background: #ffebd8;
  position: relative;
  margin-top: -10rem;
  padding-top: 14rem;
}
.route h2{
  color: #fff;
  font-size: 3rem;
  font-weight: 700;
  padding: 1rem 2rem;
  background: #ff912b;
  border-radius: 0 5rem 5rem 0;
  position: absolute;
  left: 0;
  top: 5rem;
}
.route .separate{
  background: #ff912b44;
  width: 100%;
  height: .5rem;
  border-radius: 1rem;
}
.route2 h3{
  font-size: 1.8rem;
  font-weight: 600;
  border: 3px solid #ff912b;
  background: #fff;
  display: inline-block;
  padding: .8rem 2rem .5rem;
  border-radius: 3rem;
  position: relative;
}
.route2 h3 span{
  color: #fff;
  font-size: 1.2rem;
  background: #ff912b;
  padding: .2rem 1rem;
  border-radius: 3rem;
  position: absolute;
  top: -1.2rem;
  left: calc(50% - 3.3rem);
}
.route2 img{
  display: block;
  margin: 0 auto;
}
.route .wrap{
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4rem;
}
.route2 ul{
  color: #fff;
  background: #ff912b;
  width: 27rem;
  font-size: 1.4rem;
  line-height: 1.5;
  border-radius: 2rem;
  text-align: left;
  margin: 2rem auto 0;
  padding: 1rem 1rem 1rem 3rem;
  position: relative;
}
.route2 h4{
  color: #ff912b;
  background: #fff;
  border: 2px solid #ff912b;
  border-radius: 2rem;
  display: inline-block;
  padding: 0 2rem;
  position: absolute;
  top: -1.2rem;
  left: calc(50% - 5rem);
}
.route2 li{
  list-style: disc;
  text-indent: -0.5rem;
}
.route h3{
  background: #fff;
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.3;
  padding: 1.5rem 3rem;
  margin: 4rem auto 2rem;
  display: inline-block;
  border-radius: 4rem;
  position: relative;
}
.route h3.recommend{
  padding-left: 12rem;
  margin: 9rem auto 4rem;
}
.route h3.recommend::before{
  content: "";
  position: absolute;
  left: 2rem;
  bottom: 0;
  background: url(/img/halal-person5.webp) left bottom no-repeat;
  background-size: contain;
  width: 8rem;
  height: 8rem;
}
.route h3 b{
  color: #ff912b;
}
.partner section{
  display: flex;
  flex-direction: row;
}
.partner div{
  margin-right: 1rem;
  line-height: 1.3;
}
.partner img{
  width: 6rem;
  border-radius: 100%;
  display: block;
  margin-bottom: 1rem;
}
.partner p{
  background: #fff;
  text-align: left;
  border-radius: 2rem;
  display: inline-block;
  padding: 1rem 2rem;
  width: 35rem;
  position: relative;
}
.route section:nth-child(2),
.route section:nth-child(3){
  transition-delay: .7s;
}
@media screen and (min-width: 900px){
  .route{
    padding-top: 5rem;
    padding-left: calc(10svw + 10rem);
  }
  .route h2{
    font-size: 3.5rem;
    padding: 4rem 3rem;
    border-radius: 0 0 7rem 7rem;
    writing-mode: vertical-lr;
    left: 4svw;
    top: 0;
  }
  .route .wrap{
    flex-direction: row;
  }
  .route .separate{
    width: .5rem;
    height: auto;
  }
  .route h3.recommend{
    font-size: 2.5rem;
  }
  .partner p::before{
    content: "";
    position: absolute;
    background: url(/img/fukidashi.webp) right top no-repeat;
    background-size: contain;
    width: 2rem;
    height: 2rem;
    left: -1.8rem;
    top: 2.3rem;
  }
  .partner section:nth-child(2) p{
    width: 25rem;
  }
}
@media screen and (min-width: 1300px){
  .route h2{
    left: 10svw;
  }
}

.evidence{
  background: #ece4da;
  padding: 10rem 0;
}
.evidence .enttl{
  color: #000;
  margin-bottom: 0;
}
.evidence .enttl::before {
  color: #cfc4b7;
  left: 50%;
  transform: translate(-50%, 0%);
}
.evidence .ccatch{
  color: #917e69;
  margin-left: 0;
}
.evidence .wrap{
  margin-top: 5rem;
}
.evidence .case .block{
  display: block;
  width: 33rem;
  background: #fff;
  border-radius: 2rem;
  padding: 2rem;
  margin: 1rem 0;
  transform: scale(0.9);
  transform-origin: center center;
  transition: all .3s ease;
}
.evidence .case a.block:hover{
  transform: scale(1);
}
.evidence .case .block img{
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  width: 85%;
  border-radius: 2rem;
  margin: 2rem auto;
}
.evidence .case .block h3{
  font-size: 1.8rem;
  line-height: 1.5;
  margin-bottom: 1rem;
}
.evidence .case .block p{
  display: block;
  text-align: center;
  min-height: 8rem;
}
.evidence .slick-prev:before, 
.evidence .slick-next:before {
  filter: drop-shadow(0px 0px 3px rgba(0, 0, 0, .3)) invert(1);
  opacity: .3;
}
@media screen and (min-width: 900px){
  .evidence .enttl{
    text-align: center;
    margin-bottom: 6rem;
  }
  .evidence .ccatch{
    text-align: center;
  }
}


.step{
  background: #c9e2ff;
  padding: 10rem 0;
}
.step .enttl{
  color: var(--fcblue);
  font-size: 3rem;
  line-height: 2;
  padding-top: 1rem;
}
.step .enttl::before{
  color: #fff;
}
.step .enttl small{
  display: block;
}
.step section{
  background: #fff;
  width: 30rem;
  border-radius: 2rem;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem 2rem;
  padding: 2rem 2rem 2rem 4rem;
  margin: 0 auto 3rem;
}
.step section::after{
  content: "";
  border: 1.2rem solid transparent;
  border-top-color: var(--fcblue);
  position: absolute;
  bottom: -3.2rem;
  left: calc(50% - 1.5rem);
}
.step section.inview{
  transform: scale3d(1, 0, 1);
  transform-origin: center top;
}
.step section.display{
  transform: scale3d(1, 1, 1);
}
.step section.step4::after{
  display: none;
}
.step h3{
  color: var(--fcblue);
  font-size: 2.2rem;
  font-weight: 700;
}
.step p{
  text-align: left;
}
@media screen and (min-width: 900px){
  .step .wrap{
    width: min(110rem, 80svw);
    margin: -10rem auto 0;
  }
  .step section{
    flex-direction: row;
    align-items: center;
    width: 70rem;
  }
  .step section::after{
    left: calc(50% - 3rem);
  }
  .step .enttl{
    margin-left: 2svw;
  }
  .step h3{
    width: 16rem;
  }
  .step section.step1{margin-right: 0;}
  .step section.step2{margin-right: calc(45% - 35rem);}
  .step section.step3{margin-left: calc(45% - 35rem);}
  .step section.step4{margin-left: 0;}
}
@media screen and (min-width: 1300px){
  .step .enttl{
    margin-left: 8svw;
  }
}

.plan{
  background: #ffebd8;
  padding-top: 10rem;
}
.plan h2.enttl{
  text-align: center;
  padding: 0;
}
.plan h2.enttl::before{
  color: #fff;
  left: 50%;
  transform: translateX(-50%);
}
.plan .wrap{
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.plan table{
  margin: 0 auto;
  border-collapse: separate;
  border-spacing: 1rem;
}
.plan th,
.plan td{
  padding: 2rem 1rem;
}
.plan th{
  background: var(--fclorange);
  font-weight: 600;
  text-align: center;
  word-break: keep-all;
}
.plan th.light{background: #c9e2ff; padding: 2rem 4rem;}
.plan th.standard{background: #90eca2;}
.plan th.premium{background: var(--fclorange);}
.plan th h3{
  font-size: 4rem;
  letter-spacing: -1px;
}
.plan td{
  text-align: left;
  background: #fff;
  line-height: 1.3;
  position: relative;
}
.plan td.blank{
  background: none;
  padding: 0;
}
.plan td img{
  display: block;
  margin: 0 auto;
}
.plan td ul{
  list-style: disc;
  text-align: left;
  display: inline-block;
  padding-left: 2rem;
}
.plan td li{
  margin-bottom: .5rem;
}
.plan .l1 td.blank img{
  margin-bottom: -1rem;
  transform: scale3d(1, 0, 1);
  transform-origin: center bottom;
}
.plan .l1 td.blank img.display{
  transform: scale3d(1, 1, 1);
}
.plan .l2 td img{
  margin: 1rem auto;
  height: 8rem;
}
.plan .fukidashi{
  background: var(--fcorange);
  color: #fff;
  font-size: 1.2rem;
  border-radius: 2rem;
  padding: .2rem 1rem;
  position: absolute;
  display: inline-block;
  transform: translate(-50%, 5px);
  word-break: keep-all;
}
.plan .fukidashi::before{
  content: "";
  position: absolute;
  border: .8rem solid transparent;
  border-bottom-color: var(--fcorange);
  left: calc(50% - .8rem);
  top: -1.5rem;
}
.plan .monthly td span{
  display: block;
}
.plan .monthly td b{
  color: #ec6941;
  font-weight: 600;
  font-size: 2.5rem;
}
.plan .monthly td b small{
  font-size: 1.2rem;
}
.plan .notice{
  color: #ec6941;
  font-size: 1.2rem;
}
@media screen and (min-width: 900px){
  .plan th,
  .plan td{
    padding: 2rem;
  }
  .plan td{
    text-align: center;
  }
  .plan td li{
    text-indent: -.6rem;
  }
}


.ourstance{
  background: #ffebd8;
  padding: 8rem 0 20rem;
}
.ourstance .wrap{
  background-color: #fff;
  background-image: url(/img/bg-ourstance1.webp), url(/img/bg-ourstance2.webp);
  background-position: center bottom, right 20% top;
  background-size: 140% auto, 10rem auto;
  background-repeat: no-repeat;
  text-align: left;
  padding-bottom: 33rem;
}
.ourstance .enttl{
  font-size: 2rem;
  line-height: 2;
  padding-top: 1rem;
  width: min(90rem, 80svw);
  margin: 4rem auto; 
}
.ourstance .enttl::before{
  opacity: .1;
  font-size: 7rem;
  line-height: .7;
}
.ourstance .wrap p{
  width: min(90rem, 85svw);
  margin: 0 auto 1rem;
}

@media screen and (min-width: 900px){
  .ourstance .wrap{
    background-image: url(/img/bg-ourstance1.webp), url(/img/bg-ourstance2.webp);
    background-position: right bottom, right 30% top;
    background-size: 80rem auto, 14rem auto;
    padding-bottom: 10rem;
  }
  .ourstance .enttl::before{
    line-height: .2;
  }
}

.halal_tocta{
  background: url(/img/bg-mv_sp.webp) center center no-repeat;
  background-size: cover;
}
.halal_tocta .wrap{
  background: linear-gradient(to bottom,  rgba(255,235,216,1) 0%,rgba(252,233,209,0) 35%,rgba(250,232,203,0) 65%,rgba(247,230,196,1) 100%);
  font-size: 2rem;
  padding: 10rem 0 ;
}
.halal_tocta h2{
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 1rem;
}
@media screen and (min-width: 900px){
  .halal_tocta{
    background: url(/img/bg-mv.webp) center center no-repeat;
    background-size: cover;
  }
}


.gallery{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding: 10rem 0 0;
  margin-bottom: -25rem;
  z-index: 2;
}
.gallery img{
  border-radius: 2rem;
  box-shadow: 0 0 10px #00000022;
}
.gallery img.inview{
  transform: translateY(5rem);
}
.gallery img.display{
  transform: translateY(0);
}

.gallery.g3{
  margin-bottom: -10rem;
}

.gallery.g1 img:nth-child(1){
  width: 50svw;
  height: auto;
  margin: 0 auto 0 10%;
}
.gallery.g1 img:nth-child(2){
  width: 45svw;
  height: auto;
  margin: -25rem 4% 0 auto;
}
.gallery.g1 img:nth-child(3){
  width: 65svw;
  height: auto;
  margin: -17% auto 0 -5%;
}
.gallery.g1 img:nth-child(4){
  width: 70svw;
  height: auto;
  border-radius: 2rem 0 0 2rem;
  margin: -2rem 0 35% auto;
}

.gallery.g2 img:nth-child(1){
  width: 60svw;
  height: auto;
  margin: 0 auto 0 15%;
}
.gallery.g2 img:nth-child(2){
  width: 33svw;
  height: auto;
  margin: -10rem 4% 0 auto;
}
.gallery.g2 img:nth-child(3){
  width: 65svw;
  height: auto;
  margin: -5% auto 0 5%;
}
.gallery.g2 img:nth-child(4){
  width: 70svw;
  height: auto;
  border-radius: 2rem 0 0 2rem;
  margin: -2rem 0 35% auto;
}

.gallery.g3 img:nth-child(1){
  width: 60svw;
  height: auto;
  margin: 0 auto 0 20%;
}
.gallery.g3 img:nth-child(2){
  width: 40svw;
  height: auto;
  margin: -5rem 5% 0 auto;
}
.gallery.g3 img:nth-child(3){
  width: 62svw;
  height: auto;
  margin: 1rem 2% 0 auto;
}
@media screen and (min-width: 900px){
  .gallery.g1 img:nth-child(1){
    width: 30rem;
    margin: 0 28% 0 auto;
  }
  .gallery.g1 img:nth-child(2){
    width: 24rem;
    margin: -37rem 17% 0 auto;
  }
  .gallery.g1 img:nth-child(3){
    width: 50rem;
    margin: -18% calc(33% + 25rem) 0 auto;
  }
  .gallery.g1 img:nth-child(4){
    width: min(70rem, 50svw);
    margin: -6rem 0 0 auto;
  }

  .gallery.g2 img:nth-child(1){
    width: 35rem;
    margin: 0 22% 0 auto;
  }
  .gallery.g2 img:nth-child(2){
    width: 18rem;
    margin: -18rem calc(20% - 9rem) 0;
  }
  .gallery.g2 img:nth-child(3){
    width: 44rem;
    margin: -15rem calc(32% + 22rem) 0 auto;
  }
  .gallery.g2 img:nth-child(4){
    width: min(65rem, 45svw);
    margin: -9rem 0 0 auto;
  }

  .gallery.g3 img:nth-child(1){
    width: 35rem;
    margin: 0 37% 0 auto;
  }
  .gallery.g3 img:nth-child(2){
    width: 20rem;
    margin: -8rem calc(46% + 12rem) 0;
  }
  .gallery.g3 img:nth-child(3){
    width: min(60rem, 40svw);
    margin: -20rem 0 0 auto;
  }
}