@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap');
*{
  box-sizing: border-box;
}
html{
  font-size:18px;
  font-family: 'Noto Sans JP', sans-serif;
  line-height:2.1rem;
  color:#3e3a39;
  font-feature-settings: "palt";
  /* scroll-behavior:smooth; */
}
.wrapper{
  overflow-x:hidden;
  position:relative;
}
header{
  width:100%;
  padding:25px;
  display:flex;
  align-items:center;
  position:absolute;
  top:-100%;
  left:0;
  z-index:99;
  animation:headerIn 1.5s ease-out forwards;
}
br.sp{
  display:none;
}
header h1{
  margin:0 auto 0 0;
  display:inline-block;
}
header h1 img{
  width:222px;
  height:auto;
}
.header-contact{
  display:none;
}
.hbg-menu{
  display:none;
}
header .gnav{
  margin:0 0 0 auto;
  list-style:none;
  display:flex;
  align-items:center;
}
header .gnav li{  
  padding:0 80px 0 0;
  vertical-align: middle;
}
header .gnav li:last-of-type{
  padding:0;
}
header .gnav li a{
  color:#000;
  font-style:italic;
  text-decoration:none;
  font-size:23px;
}
header .gnav li a:hover{
  opacity:.5;
  transition:.3s;
}
header .gnav:last-child{
  padding:0;
}
header .gnav li a.gnav-contact{
  padding:15px 65px 15px 68px;
  display:block;
  width:230px;
  color:#ea5504;
  font-style:italic;
  border:4px solid #facc22;
  border-image:linear-gradient(to right,#facc22,#f83600);
  border-image-slice:1;
  background:#fff;
  position:relative;
}
header .gnav li a.gnav-contact::before{
  content:"";
  display:block;
  background:url('../img/mail-icon.png') no-repeat center/cover;
  position:absolute;
  width:26px;
  height:19px;
  top:50%;
  transform:translateY(-50%);
  left:16px;
}
.mv{
  background:url('../img/mv-bg.jpg') no-repeat center bottom 41px/cover;
  width:100vw;
  position:relative;
  text-align:right;
  padding-top:180px;
}
.mv-inner{
  width:100%;
  margin-left:10vw;
  position:relative;
  z-index:2;
}
.mv .copy{
  position:absolute;
  left:10vw;
  z-index:2;
  text-align:left;
  font-size:5.5vw;
  font-style:italic;
  color:#000;
  line-height:1.3;
  letter-spacing:1rem;
  font-weight:500;
  opacity:0;
  animation:mv-fadein .6s ease-in-out 1.5s forwards;
}
.mv .copy>span{
  font-size:6.5vw;
}
.mv img.future{
  width: 20vw;
  height: auto;
  position: absolute;
  left:calc(10vw - 3.5rem) ;
  top: 28.5vw;
  opacity: 0;
  animation: mv-fadein .3s ease-in-out 2.2s forwards;
}
.mv img.family{
  width:60%;
  height:auto;
  position:relative;
  right:-100vw;
  animation:mv-img-fadein .6s ease-in-out .3s forwards;
  filter:drop-shadow(0 0 46px #999);
}
.mv .plywood{
  font-family: 'Helvetica','Noto Sans JP',sans-serif;
  text-align: center;
  font-style: italic;
  font-weight: bold;
  color: #ff8a4b;
  mix-blend-mode: hard-light;
  font-size:17vw;
  letter-spacing: 1.5rem;
  position: absolute;
  left: 110px;
  z-index: 2;
  line-height: 1;
  width: 100%;
  top:60%;
  opacity: 0;
  animation: mv-fadein .3s ease-in-out 3s forwards;
}
/* サービス */
.service-area{
  background:url('../img/service-bg.jpg') no-repeat center top 33px/cover ;
  margin:220px auto 0;
  padding:0 0 238px 0;
  scroll-margin-top:5rem;
}
.service-area section{
  max-width:1024px;
  width:90%;
  margin:0 auto;
  height:576px;
}
.service-inner{
  width:50%;
  margin:0 auto 0 0;
  position:relative;
  z-index:2;
}
.service-inner p{
  text-shadow:0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff,0 0 10px #fff;
}
.service-inner.right-text{
  margin:0 0 0 auto;
}
.service-area h2{
  font-size:2rem;
  font-weight:500;
  font-style:italic;
  margin:0 0 27px 0;
}
.service-area .service-img{
  position:absolute;
  top:0;
  right:-100vw;
  width:auto;
  height:100%;
  filter:none;
}
.service-area .restaurant .service-img{
  position:absolute;
  top:0;
  left:-100vw;
  width:auto;
  height:100%;
}
.service-area .delivery h2,
.service-area .nursing h2{
  padding:123px 0 0 0;
}
.service-area .restaurant h2{
  padding:97px 0 0 0;
}
.service-area .delivery{
  position:relative;
  margin-bottom:92px;
}
.service-area .restaurant{
  position:relative;
  margin-bottom:92px;
}
.service-area .nursing{
  position:relative;
}
.delivery span,
.restaurant span,
.nursing span{
  font-family:'Helvetica','Noto Sans JP',sans-serif;
  font-style:italic;
  font-weight:bold;
  color:#ff8a4b;
  mix-blend-mode:hard-light;
  font-size:clamp(1rem,18vw,13rem);
  letter-spacing:.5rem;
  position:absolute;
  z-index:2;
  left:-1.3rem;
  height:1em;
  width:100%;
  bottom:-1.7rem;
}
.restaurant span{
  letter-spacing:0;
}
.service-inner{
  position:relative;
  z-index:2;
}
.comingsoon{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  display: grid;
  place-items: center;
  text-align:center;
  z-index:3;
  background:rgba(255,255,255,.8);
}
.comingsoon-inner img{
  vertical-align:bottom;
}
.comingsoon-inner p:first-of-type{
  color:#ea5504;
  font-size:2rem;
  font-style:italic;
  margin:20px 0;
}
.comingsoon-inner p:last-of-type{
  margin:20px 0 0 0;
  font-size:20px;
}
.comingsoon::before{
  content:"";
  position:absolute;
  left:-155px;
  border-top: 288px solid transparent;
  border-right: 155px solid rgba(255,255,255,.8);
  border-bottom: 288px solid transparent;
}
.comingsoon::after{
  content:"";
  position:absolute;
  right:-155px;
  border-top: 288px solid transparent;
  border-left: 155px solid rgba(255,255,255,.8);
  border-bottom: 288px solid transparent;
}

/* 当社について */
.about-area{
  scroll-margin-top:5rem;
  position:relative;
}
.about-area .about-inner{
  width:90%;
  max-width:1024px;
  margin:0 auto;
  padding:110px 0 245px;
}
.about-area h2{
  font-weight:500;
  font-style:italic;
  font-size:2rem;
  position:relative;
  margin-top:0;
}
.about-area>.about-inner>span{
  display:block;
  width:90%;
  height:142px;
  background:url('../img/logo.png') no-repeat left top/contain;
  position:absolute;
  top:-70px;
}
.about-area p>span{
  font-weight:700;
  font-size:1.5rem;
  font-style:italic;
}

/* 会社概要 */
.company-area{
  scroll-margin-top:5rem;
}
.company-area .company-inner{
  width:90%;
  max-width:1024px;
  margin:0 auto;
  position:relative;
  padding:0 0 181px 0;
}
.company-area>.company-inner>span{
  content:"Company";
  font-family:'Helvetica','Noto Sans JP',sans-serif;
  font-weight:bold;
  font-style:italic;
  color:#fff5dd;
  position:absolute;
  z-index:1;
  top:.7rem;
  left:-1.3rem;
  font-size:clamp(1rem,19vw,14rem);
  letter-spacing:.5rem;
}
.company-area h2{
  font-size:2rem;
  font-weight:500;
  font-style:italic;
  margin:0 0 35px 0;
  position:relative;
  z-index:2;
}
.company-area table tr{
  border-bottom:1px solid #d4d4d4;
}
.company-area table tr:first-of-type{
  border-top:1px solid #d4d4d4;
}
.company-area table{
  width:100%;
  border-collapse:collapse;
  font-size:1rem;
  position:relative;
  z-index:2;
}
.company-area table th{
  font-weight:400;
  text-align:left;
  padding:31px 0 31px 70px;
  width:calc(5rem + 207px);
}

/* お問合せ */
.contact-area{
  background:#f9f9f9;
  scroll-margin-top:5rem;
}
.contact-area .contact-inner{
  width:90%;
  max-width:1024px;
  margin:0 auto;
  position:relative;
  padding:0 0 140px 0;
}
.contact-area>.contact-inner>span{
  content:"Contact";
  font-family:'Helvetica','Noto Sans JP',sans-serif;
  font-weight:bold;
  font-style:italic;
  color:#fff5dd;
  position:absolute;
  z-index:1;
  top:.2rem;
  left:-1.3rem;
  font-size:clamp(1rem,23.3vw,14rem);
  letter-spacing:.5rem;
}
.contact-area h2{
  position:relative;
  z-index:2;
  font-weight:500;
  font-style:italic;
  font-size:2rem;
  margin:0 0 143px 0;
}
.contact-area form .contact-row{
  display:flex;
  align-items:center;
  margin:0 0 42px 0;
}
.contact-area .caution{
  line-height:1.7rem;
  margin:0 0 75px 0;
  position:relative;
  z-index:2;
}
.contact-area .contact-success,
.contact-area .contact-success-text{
  text-align:center;
}
.contact-area .contact-success{
  font-size:1.5rem;
  margin:210px 0 1rem;
}
.contact-area form input,textarea{
  border:none;
  width:100%;
  height:90px;
  padding:1rem;
  box-shadow:0 0 54px 4px rgba(0,0,0,.07);
}
.contact-area form span{
  color:#ea5504;
  font-size:10px;
  vertical-align:text-bottom;
}
.contact-area form textarea{
  height:350px;
  resize:vertical;
  line-height:1.7;
}
.contact-area form .contact-row>p{
  width:calc(8rem + 63px);
}
.contact-area form .contact-row.submit{
  justify-content:center;
  margin-top:98px;
}
.contact-area form button{
  width:100%;
  max-width:430px;
  padding:24px 0 26px;
  color:#ea5504;
  font-style:italic;
  font-size:23px;
  border:4px solid #facc22;
  border-image:linear-gradient(to right,#facc22,#f83600);
  border-image-slice:1;
  background:#fff;
  box-shadow:0 0 54px 4px rgba(0,0,0,.07);
  position:relative;
}
.contact-area form button::before{
  content:"";
  display:block;
  background:url('../img/mail-icon.png') no-repeat center/cover;
  position:absolute;
  width:26px;
  height:19px;
  top:50%;
  transform:translateY(-50%);
  left:24px;
}
.contact-area form button:hover{
  cursor:pointer;
}
/* フッター */
footer{
  padding:43px 0 37px 0;
}
.copyright{
  font-style:italic;
  font-size:.5rem;
  letter-spacing:.15rem;
  text-align:center;
  margin:0;
}
@media screen and (max-width:1340px){
  .comingsoon::before,
  .comingsoon::after{
    display:none;
  }
}
@media screen and (max-width:1024px){
  .rellax{
    transform:none !important;
  }
  header h1 img{
    width:111px;
    height:auto;
  }
  header .gnav{
    display:none;
  }
  header{
    padding:0 0 0 20px;
  }
  .sp-menu{
    display:flex;
  }
  .hbg-menu{
    display:block;
  }
  .header-contact{
    display:block;
    width:64px;
    height:64px;
    color:#ea5504;
    background:#fff;
    font-size:12px;
    font-weight:500;
    border:4px solid #facc22;
    border-image:linear-gradient(to right,#facc22,#f83600);
    border-image-slice:1;
    padding:39px 0 0;
    line-height:1;
    position:relative;
    font-style:italic;
    text-decoration:none;
    text-align:center;
  }
  .header-contact::before{
    position:absolute;
    top:8px;
    left:50%;
    transform:translateX(-50%);
    content:"";
    width:35px;
    height:26px;
    background:url('../img/mail-icon.png') no-repeat center/cover;
  }
  #menu-btn-check{
    display:none;
  }
  .menu-btn{
    width:64px;
    height:64px;
    background:linear-gradient(to right,#facc22,#f83600);
    display: grid;
    place-items: center;
    z-index:100;
  }
  .menu-btn:hover{
    cursor:pointer;
  }
  .menu-btn span,
  .menu-btn span::before,
  .menu-btn span::after{
    content:"";
    display:block;
    width:28px;
    height:2px;
    background:#fff;
  }
  .menu-btn span{
    position:relative;
  }
  .menu-btn span::before{
    position:absolute;
    top:-8px;
  }
  .menu-btn span::after{
    position:absolute;
    bottom:-8px;
  }
  #menu-btn-check:checked~.black-bg{
    position:fixed;
    top:0;
    left:0;
    width:30%;
    height:100vh;
    background:rgba(0,0,0,.4);
    z-index:100;
    transition:.3s;
    transition-delay:.2s;
  }
  #menu-btn-check:checked~.menu-btn{
    background:#fff;
    position:fixed;
    top:0;
    right:0;
  }
  #menu-btn-check:checked~.menu-btn span{
    background:transparent;
  }
  #menu-btn-check:checked~.menu-btn span::before{
    rotate:45deg;
    background:#000;
    top:0;
    transition:.3s;
  }
  #menu-btn-check:checked~.menu-btn span::after{
    rotate:-45deg;
    background:#000;
    bottom:0;
    transition:.3s;
  }
  #menu-btn-check:checked~.menu-content{
    right:0;
    transition:.3s;
  }  
  .menu-content{
    width:70%;
    height:100vh;
    padding:94px 35px;
    background:#fff;
    position:fixed;
    top:0;
    right:-100%;
    z-index:99;
  }
  .menu-content ul{
    list-style:none;
    padding:0;
  }
  .menu-content ul li{
    padding:0 0 35px 0;
  }
  .menu-content ul li a{
    color:#000;
    text-decoration:none;
    font-style:italic;
    font-weight:500;
    font-size:24px;
  }
  .menu-content ul li .gnav-contact{
    display:block;
    width:100%;
    padding:10px 0;
    color:#ea5504;
    font-style:italic;
    border:4px solid #facc22;
    border-image:linear-gradient(to right,#facc22,#f83600);
    border-image-slice:1;
    background:#fff;
    position:relative;
    text-align:center;
  }
  .menu-content ul li .gnav-contact::before{
    content:"";
    display:block;
    background:url('../img/mail-icon.png') no-repeat center/cover;
    position:absolute;
    width:26px;
    height:19px;
    top:50%;
    transform:translateY(-50%);
    left:16px;
  }
  .mv{
    background:url('../img/mv-bg.jpg') no-repeat left -20px bottom 40px/cover;
    position:relative;
    padding-top:200px;
  }
  .mv .copy{
    left:18px;
    top:80px;
    font-size:35px;
    letter-spacing:.7rem;
    font-weight:500;
  }
  .mv .copy>span{
    font-size:42px;
  }
  .mv img.future{
    width:129px;
    height:auto;
    position:absolute;
    left:9px;
    top:181px;
  }
  .mv img.family{
    width:90%;
    height:auto;
  }
  .mv .plywood{
    letter-spacing:.8rem;
    top:73%;
    left:0;
    bottom:40px;
    font-size:19vw;
  }
}
@media screen and (min-width:750px){
  .mv-sp{
    display:none;
  }
}
@media screen and (max-width:750px){
  html{
    font-size:14px;
  }
  br.sp{
    display:block;
  }
  /* サービス */
  .service-area{
    padding:0 0 110px 0;
    margin:80px auto 0;
  }
  .service-area section{
    height:auto;
  }
  .service-area .delivery .service-img,
  .service-area .restaurant .service-img,
  .service-area .nursing .service-img{
    width:80%;
    height:auto;
  }
  .service-area .delivery{
    margin:0 auto 60px;
  }
  .service-area .restaurant{
    margin:0 auto 60px;
  }
  .service-inner{
    width:100%;
  }
  .service-inner p{
    line-height:1.7;
  }
  .service-area .delivery h2,
  .service-area .restaurant h2,
  .service-area .nursing h2{
    font-size:36px;
    padding:65% 0 0 0;
    margin:0 0 20px;
  }
  .delivery span,
  .restaurant span,
  .nursing span{
    top:0;
    left:-.3rem;
  }
  .service-area .delivery span{
    padding:57% 0 0;
  }
  .service-area .restaurant span{
    padding:57% 0 0;
  }
  .service-area .nursing span{
    padding:56% 0 0;
  }
  .comingsoon::before,
  .comingsoon::after{
    display:none;
  }
  /*当社について*/
  .about-area h2{
    font-size:36px;
    margin:0 0 20px;
  }
  .about-area .about-inner{
    padding:44px 0 100px 0;
  }
  .about-area>.about-inner>span{
    display:block;
    width:90%;
    height:60px;
    background:url('../img/logo.png') no-repeat left center/contain; 
    position:absolute;
    top:-30px;
  }
  .about-area p{
    line-height:1.7;
  }
  /*会社情報*/
  .company-area h2{
    font-size:36px;
    margin:0 0 20px;
  }
  .company-area>.company-inner>span{
    top:-1.6rem;
    left:-1.5rem;
  }
  .company-area .company-inner{
    padding:0 0 105px 0;
  }
  .company-area table{
    line-height:1.5;
  }
  .company-area table th{
    padding:24px 0 24px 14px;
    width:calc(5rem + 37px);
  }
  /*お問合せ*/
  .contact-area .contact-inner{
    padding:0 0 40px 0;
  }
  .contact-area>.contact-inner>span{
    top:-1.5rem;
    left:-1.5rem;
  }
  .contact-area h2{
    margin:0 0 22px 0;
    font-size:36px;
  }
  .contact-area .caution{
    margin:0 0 30px;
  }
  .contact-area .contact-success{
    margin:22px 0 1rem;
  }  
  .contact-area form .contact-row>p{
    width:100%;
    margin:0 0 15px 0;
  }
  .contact-area form .contact-row{
    margin:0 0 30px 0;
    flex-wrap:wrap;
  }
  .contact-area form .contact-row input,textarea{
    width:100%;
    height:42px;
  }
  .contact-area form .contact-row textarea{
    height:213px;
  }
  .contact-area form .contact-row.submit{
    margin:0;
  }
  .contact-area form .contact-row.submit button{
    height:60px;
    padding:0;
  }
  footer{
    padding:20px 0 30px;
  }
}
/* アニメーション */
@keyframes headerIn{
  0%{
    top:-100%;
  }
  100%{
    top:0;
  }
}
@keyframes mv-img-fadein{
  0%{}
  100%{
    right:0;
  }
}
@keyframes mv-fadein{
  0%{
    opacity:0;
    transform:translateY(100px);
  }
  100%{
    opacity:1;
    transform:translateY(0);
  }
}
@keyframes serviceImg-shadow{
  0%{
    filter:none;
  }
  100%{
  filter:drop-shadow(0px 0px 46px #ccc);
  }
}
@keyframes serviceImg-opacity{
  0%{
    opacity:0;
  }
  100%{
    opacity:1;
  }
}
.fadein{
  opacity:0;
  transform:translateY(100px);
}
.fadein-active{
  opacity:1;
  transform:translateY(0);
  transition:.5s;
}
.fadein-active.fadein-delay{
  opacity:1;
  transform:translateY(0);
}
.service-area .service-img.fadeinx-active{
  right:0;
  transition:1.5s ease-in-out;
  animation:serviceImg-opacity 3s ease-out,
            serviceImg-shadow .3s ease-out 3s forwards;
}
.service-area .restaurant .service-img.fadeinx-active{
  left:0;
  transition:1.5s ease-in-out;
  animation:serviceImg-opacity 3s ease-out,
            serviceImg-shadow .3s ease-out 3s forwards;
}