@charset "UTF-8";
#mainImage {
  position: relative;
  height: 42vw;
  z-index: 0;
}
#mainImage::before, #mainImage::after{
  width: 100%;
  height: 36.5vw;
  position: absolute;
  content: "";
  z-index: 1;
  left: 0;  
}
#mainImage::before {
  background: linear-gradient(90deg, #62deb5 0%, #63cde0 100%);
  top: 24.5vw;
  clip-path: polygon(0 52%, 100% 0%, 100% 100%);
}
#mainImage::after {
  background: #d3fc32;
  top: 24vw;
  clip-path: polygon(0 48%, 100% 0, 100% 52%, 0 100%);
}

#mainImage .mv {
  background-image: url(../img/utils/mv.jpg);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  height: 100%;
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
}
.hero-contents {
  top: 0;
  left: 0;
  color: #fff;
  text-align: left;
  margin: 0 auto;
  width: 60vw;
  max-width: 864px;
  padding: 17.3vw 0 0;
  font-weight: 700;
}

.hero-contents .hero-copy {
  margin-bottom: 0rem;
  position: relative;
  z-index: 1;
  text-align: center;
  filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.35));
}

.hero-contents .en {
  font-style: italic;
  filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.15));
  text-align: center;
}
.hero-contents h1 {
  font-size: clamp(3rem, 10.2vw,11rem);
  line-height: 0.9;
  letter-spacing: 1px;
}
.lnav-company .hero-contents h1,
.lnav-privacy .hero-contents h1 {
  font-size: clamp(3rem, 4.9vw, 7.1rem);
}
/* .hero-contents h3 {
  font-size: clamp(2rem, 2.4vw, 3.2rem);
  letter-spacing: 0px;
  line-height: 1.2;
} */
.hero-contents h5 {
  font-size: clamp(1.1rem, 1.64vw, 2rem);
  font-weight: 900;
  margin: 0.5vw 0 1vw;
}
.lnav-company .hero-contents h5,
.lnav-privacy .hero-contents h5 {
  margin-top: 1vw;
}

@media only screen and (max-width: 640px) {
  #mainImage {
    height: 90vw;
  }
  #mainImage::before, #mainImage::after{
    top: 95vw;
  }
  #mainImage::before {
    height: 70vw;
    clip-path: polygon(0 0, 100% 25%, 100% 100%, 0 75%);
  }
  #mainImage::after {
    height: 84vw;
    clip-path: polygon(0 21%, 100% 0, 100% 79%, 0 100%);
    top: 69vw;
  }
  #mainImage .mv {
    height: 90vw;
    background-image: url(../img/utils/mv_sp.jpg);
    background-position: top;
  }
  .hero-contents{
    margin: 0 8vw;
    padding: 30vw 0 0;
    width: 84vw;
  }
  .hero-copy{
    margin-left: 1.2vw;
  }
  .hero-contents h1,
  .lnav-company .hero-contents h1,
  .lnav-privacy .hero-contents h1 {
    font-size: 14vw;
    line-height: 1;
  }  
  /* .hero-contents h1:first-child {
    margin-left: -4vw;
    letter-spacing: -0.3vw;
  } */
  .hero-contents h2 {
    letter-spacing: -0.1vw;
    font-size: 7vw;
  }
  .hero-copy::after{
    width: 100%;
    top: 4vw;
    left: -4vw;
  }
  .hero-contents h5 {
    margin: 2vw 0;
    font-size: 2.8vw;
  }
}

.lnav-access #mainImage .mv {
  background-image: url(../img/utils/mv-access.jpg);
}
section .section-content {
  margin-top: -5vw;
  margin-bottom: 14vw;
}
.map {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 66%;
  margin-bottom: 3vw;
}
 
.map iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

p {
  font-size: clamp(1rem,1vw,1.5rem);
  text-align: left;
}
.map + p {
  margin-bottom: 3vw;
}

.section-content.row {
  background: #fff;
  padding: 5vw 7vw;
  margin-top: -9vw;
  font-size: clamp(1rem,1vw,1.5rem);
  text-align: left;
}
.company-info dl {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  justify-content: flex-start;
  /* text-align: left; */
}
.company-info dt, .company-info dd {
  padding: 1.8vw 0;
  border-bottom: 1px solid #cacaca;
}
.company-info dt{ width: 20%;}
.company-info dd{ width: 80%;}

.privacy ol{
  margin-bottom: 2vw;
}
.privacy ol > li {
  list-style-type: decimal;
  padding: 1vw 0 1vw 1vw;
  text-indent: -1vw;
}
.privacy ol ul li {
  list-style-type: "・ ";
}
.privacy li{ list-style-position: inside; line-height: 2;}

@media only screen and (max-width: 640px) {
  .section-content.row{
    width: 95%;
    margin-top: 0;
    padding: 10vw 10vw 15vw;
    font-size: 2.4vw;
  }
  p{
    font-size: 2.4vw;
  }
}

/*@media only screen and (min-width: 641px) {
   nav.local {
    z-index: 2;
    background: #000;
    margin: -13vw auto 13vw;
    padding: 0;
    width: 50%;
    transform: skew(-30deg);
  }
  nav.local .local-inner {
    transform: skew(30deg);
}
  nav.local .l-nav{ justify-content: flex-start; }
  ul.l-nav li:first-child {
    background: #4fb401;
    color: #fff;
    padding: 1.8vw 5.6vw 1.8vw 5.4vw;
    clip-path: polygon(20% 0, 100% 0, 80% 100%, -1% 101%);
    margin-right: 2.6vw;
    margin-left: -1.6vw;
    font-size: clamp(1.1rem, 1.64vw, 1.7rem);
  }
  ul.l-nav li {
    padding: 0 1.8vw 0 1.8vw;
    font-weight: 700;
    font-size: clamp(1.1rem, 1.64vw, 1.55rem);
    min-width: 8vw;
  }
  nav.local .l-nav a{ 
    position: relative;
    overflow: visible;
    filter: drop-shadow(1px 2px 3px rgba(0,0,0,0.3));
  }

  nav.local .l-nav a::before{
    content: "";
      border: #d3fc32 solid 40px;
      clip-path: polygon(70% 0%, 75% 0, 35% 100%, 30% 100%);
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      height: 150%;
      width: 5vw;
      z-index: 1;
      opacity: 0;
      transition: all .5s;
      box-sizing: content-box;
    }
    ul.l-nav li:nth-child( n + 5 ) a::before{
      height: 115%;
      border-width: 30px 40px 30px;
      left: 25%;
    }
    nav.local .l-nav a:hover::before{
      opacity: 1;
      transition: all .5s;
    }

  .lnav-footer nav.local{
    margin: 0 auto 7vw;
  }
} */
section::before,
section::after {
  position: absolute;
  width: 100%;
  content: "";
  top: 0;
}
section::before {
  z-index: 0;
  left: 0;
}
section::after {
  z-index: -1;
  bottom: 0;
  right: 0;
}

section .section-content{
  z-index: 1;
}
section .section-content.flex,
section .section-content > .flex{
  align-items: flex-start;
  flex-wrap: wrap;
}
.section-content .flex > .flex-box {
  width: 50%;
  z-index: 2;
}
.section-content .flex .flex-box .hero-copy {
  position: relative;
  z-index: 1;
  top: 0;
  left: 0;
  text-align: left;
  margin: 4vw 0 0 -3.5vw;
  padding: 0;
  font-weight: 700;
  justify-content: flex-start;
}
.section-content .flex .flex-box .hero-copy h1 {
  transform: rotate(-10deg);
  transform-origin: left;
  font-style: italic;
  filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.15));
  font-size: clamp(5.5rem, 7.7vw, 11rem);
  line-height: 0.85;
  letter-spacing: 0;
}
.section-content .flex .flex-box .hero-copy h1:last-child {
  left: 2.8vw;
  position: relative;
}

.section-content .flex .flex-box .hero-copy::after {
  content: '';
  width: 104%;
  height: 16vw;
  position: absolute;
  top: 0;
  bottom: -3.6rem;
  left: 0;
  z-index: -1;
}
.section-content .flex .flex-box.text-content {
  margin: -3vw 0 0 0vw;
  width: 50%;
  text-align: left;
  z-index: 1;
}
.flex-box.text-content h5,
.flex-box .text-content h5 {
  font-size: clamp(1.0rem, 2.0vw, 2.9rem);
  font-weight: 900;
  margin: 1.2vw -2vw 1.5vw 0;
}

.flex-box p {
  font-size: clamp(0.9rem, 1.05vw, 1.5rem);
  line-height: 2;
  font-weight: 700;
  padding-bottom: 2.5vw;
  margin-bottom: 0;
}
#wrapper .note a {
  color: #0072ff;
  text-decoration: underline;
  text-underline-offset: 0.5em;
}
@media only screen and (max-width: 640px) {
  .section-content .flex > .flex-box {
    width: 100%;
  }
  .section-content .flex .flex-box .hero-copy {
    margin: 2vw 0 0 2vw;
  }
  .section-content .flex .flex-box .hero-copy h1{
    font-size: 14.7vw;
  }
  .section-content .flex .flex-box .hero-copy h1:last-child{
    left: 5vw;
  }
  .section-content .flex .flex-box .hero-copy::after {
    width: 100%;
    height: 31vw;
    bottom: 0;
    top: -1vw;
  }
  .section-content .flex .flex-box.text-content {
    width: 90%;
    margin: -14vw auto 0;
    position: relative;
  }
  .flex-box h5 {
    line-height: 1.6;
    margin-bottom: 3vw;
    text-align: center;
    font-size: 6.4vw;
  }
  .flex-box p {
    line-height: 1.8;
    padding-bottom: 6vw;
    font-size: 3.2vw;
  }
}