/*
Theme Name: Arisaka Stone Child
File: front-page.css
Description: トップページ専用のスタイル
*/
@charset "UTF-8";

body {
 overflow-x: hidden;
}
/* ========================================
   front-page専用：z-index階層の管理
   ======================================== */
/* body.is-front-page header#masthead.site-header {
 position: fixed;
 z-index: 1000;
}


body.is-front-page section#footer-inmeaage-form {
 position: relative;
 z-index: 1;
} */


body.is-front-page footer#colophon.footer-colophon {
 position: relative;
 z-index: 1;
 
 &::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #161b26e6;
  z-index: 1;
  pointer-events: none;
 }
 
 .footer-inner-block {
  position: relative;
  z-index: 2;
 }
}

.hero {
 height: 100dvh;
 display: grid;
 place-items: center;
 position: relative;
 text-align: center;

 &::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100dvh;
  background-color: #3a3a3a61;
  mix-blend-mode: multiply;
  z-index: 0;
 }

 h1.moving {
  opacity: 0;
  transition: all 0.75s ease 0.75s;
  margin: 0;
  letter-spacing: 0.05em;
  font-size: clamp(2.5em, -2.245em + 9.26vw, 5.625em);
  letter-spacing: 0.025em;
  z-index: 1;
  line-height: 1.25;
  color: var(--wp--preset--color--white);
 }
 h1.moving.in-view{opacity: 1;}

 .mv_scroll {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -3em;
  z-index: 1;
  width: 2em;
  display: block;
  text-decoration: none;
  color: transparent;
 }

 svg {
  display: block;
  margin-inline: auto;
  width: 1px;
  height: 200px;
  background-color: #6e6e6e;
  shape-rendering: crispEdges;
 }

 .vertical-line {
  stroke: var(--wp--preset--color--white);
  stroke-width: 1;
  stroke-dasharray: 0.75 0.25;
  animation: dashFlow 3s linear infinite;
 }
}

.undeeMessage {
 padding-block: 10em;
 background-color: #161b26e6;
 backdrop-filter: blur(10px);
 color: var(--wp--preset--color--white);

 h2.topMessage {
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-size: clamp(1.25em, 0.688em + 1.5vw, 2em);
  margin-inline-end: 2.8em;
  justify-self: center;
  line-height: 2.5;
  letter-spacing: 0.1em;
 }

 >.inner-block-content {
  max-width: var(--arisaka-narrow-width);
  margin-inline: auto;
  display: grid;

  >div {
   width: 90%;
   margin-inline: auto;
  }

  p {
   letter-spacing: 0.1em;
   margin-block-end: 2em;
   line-height: 2.5;
  }

  p:nth-last-child(1) {
   margin-block-end: 0;
  }
 }
}

@media (width > 1024px) {
 .undeeMessage {
  >.inner-block-content {
   grid-template-columns: var(--arisaka-aspect-rate, 0.3fr 0.7fr);
   gap: 2em;

   >div {
    grid-column: 2 / 3;
    max-width: 38.2em;
    align-self: end;
   }
  }
 }
}

.carousel-home {
 .card {
  &:nth-child(odd) {
   clip-path: inset(10% 0);
  }
 }
}

/* H2の中央寄せ */
.front-page-service,
.faq-block,
.front-page-news {
 h2 {
  text-align: center;
 }

 h2+p {
  text-align: center;
 }
}

.front-page-service {
 background-color: var(--wp--preset--color--white);
 padding-block-start: 4.5em;

 h2+p {
  letter-spacing: 0.05em;
  margin-block: 3em;
  padding-inline: 2em;
 }

 a {
  display: block;
 }

 >div {
  background-image: url(../images/front-page-service-bg.webp);
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  padding-block: 100px clamp(3.813rem, 1.984rem + 4.88vw, 6.25rem);
  display: grid;
  grid-template-columns: repeat(auto-fit, 22em);
  justify-content: center;
  gap: 1.5em 1em;

  >a {
   background-color: var(--wp--preset--color--white);
   padding: 0.75em;
   display: grid;
   grid-template-rows: subgrid;
   grid-row: span 3;
   grid-template-columns: 1fr 2em;
   gap: 0;
   transition: 0.4s ease;

   h3 {
    font-size: clamp(1.25em, 1.156em + 0.25vw, 1.375em);
    grid-column: 1 / 2;
    grid-row: 2 / 3;
   }

   p {
    font-size: clamp(0.75em, 0.656em + 0.25vw, 0.875em);
    letter-spacing: unset;
    grid-column: 1/2;
    grid-row: 3 / 4;

    &.letterspace-none {
     letter-spacing: -0.5px;
    }
   }

   span {
    display: block;
    grid-column: 2 / 3;
    grid-row: 2 / 4;
    justify-self: end;
    align-self: center;
    transition: 0.4s ease;
   }

   img {
    width: auto;
    height: 100%;
    aspect-ratio: 360 / 500;
    object-fit: cover;
    object-position: center;
    transition: 0.4s ease;
   }

   &:hover {
    color: color-mix(in srgb,
      var(--wp--preset--color--arisaka-main-color) 65%,
      transparent);

    img {
     transform: scale(1.05);
    }

    span {
     transform: translateX(0.2em);
    }
   }
  }

  figure {
   margin-block-end: 0.85em;
   overflow: hidden;
   grid-column: 1 / 3;
   grid-row: 1 / 2;
  }

  svg {
   line-height: 1;
   aspect-ratio: 1 / 1;
   width: 1.62em;
  }
 }
}

.front-page-promise,
.front-page-actual-result,
.faq-block,
.front-page-company,
.front-page-item-list,
.front-page-news {
 padding-block: clamp(3.813rem, 1.984rem + 4.88vw, 6.25rem) calc(clamp(3.813rem, 1.984rem + 4.88vw, 6.25rem) + 0.5em);

 h2 {
  margin-block-end: 1em;
  letter-spacing: 0.1em;
 }

 h2+p {
  letter-spacing: 0.05em;
  /* line-height: 1.8; */
  line-height: 2.25;
 }
}

.front-page-promise {
 color: var(--wp--preset--color--arisaka-lightgray-color);
 background-image: url(../images/pattern.webp);
 counter-reset: promise-count 0;

 >div {
  display: grid;
  row-gap: 4em;

  >div {
   h3 {
    counter-increment: promise-count;
    font-size: clamp(1.25rem, 0.875rem + 1vw, 1.75rem);
    line-height: 1.4;
    margin-block-end: 2.5em;

    &::before {
     content: counter(promise-count) ".";
     display: block;
     width: 100%;
     height: 1px;
     margin-block-end: 1.4em;
     color: #314260;
     font-size: clamp(3.875rem, 2.938rem + 2.5vw, 5.125rem);
     font-weight: normal;
     font-family: "EB Garamond", serif;
     font-kerning: normal;
     font-feature-settings: "kern" 1, "liga" 1;
     text-size-adjust: 100%;
    }
   }

   h3,
   p {
    max-width: 34.4em;
   }

   p {
    margin-block-end: unset;
    line-height: 2.1;
   }

   figure {
    display: block;
    width: 100%;
    margin-block-start: 2em;

    img {
     width: 100%;
     height: auto;
     object-fit: cover;
     aspect-ratio: 4 / 2.65;
     /* max-width:340px; */
    }
   }
  }
 }
}

.front-page-actual-result {
 background-color: var(--wp--preset--color--white);
 font-size: 1em;
 padding-inline: 2em;

 /* 抜粋を2行表示にする */
 .wp-block-post-excerpt__excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.5em;
  font-size: clamp(0.75rem, 0.609rem + 0.38vw, 0.938rem);
 }

 h3 {
  font-size: clamp(0.938rem, 0.703rem + 0.63vw, 1.25rem);
 }

 time {
  font-size: 12px;
 }

 p {
  margin-block: 0.5em 0;
  line-height: 1.3;
 }

 ul {
  display: grid;
  grid-template-columns: repeat(2,
    clamp(9.375rem, -1.733rem + 48.03vw, 16.25rem));
  gap: 1em;
  justify-content: center;

  figure {
   width: 100%;
   aspect-ratio: 1 / 0.7;
   overflow: hidden;

   img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform-origin: left bottom;
    transition: 0.4s ease;

    &:hover {
     transform: scale(1.05);
    }
   }
  }
 }

 li {
  display: grid;
  grid-template-rows: subgrid;
  row-gap: 0.45em;
  grid-row: span 4;

  a {
   display: block;
  }

  figure {
   grid-row: 1 / 2;
  }

  h3 {
   grid-row: 2 / 3;
  }

  p {
   grid-row: 3 / 4;
  }

  time {
   grid-row: 4 / 5;
  }
 }
}

.faq-block {
 padding-inline: 2em;
 background-color: #122648;
 color: var(--wp--preset--color--arisaka-lightgray-color);

 p:has(a).link-other-page.dark {
  margin-block-end: 0;

  a {
   margin-inline: auto;
  }
 }
}

.front-page-company,
.front-page-item-list,
.front-page-news {
 background-color: var(--wp--preset--color--white);
}

.front-page-company {
 .wp-block-video {
  position: relative;
  /* aspect-ratio: 1 / 0.65;
  width: 100dvw;
  overflow-x: hidden;
  left: 50%;
  transform: translateX(-50%); */

  video {
   width: 100%;
   height: 100%;
   object-fit: cover;
  }
 }
}

.front-page-company,
.front-page-item-list {
 p.link-page.dark {
  margin-block: 2.5em;
 }
}

.front-page-item-list {
 padding-block-start: 0;

 ul {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 0.7;
  overflow: hidden;
  list-style: none;
  padding: 0;
  margin: 0;

  >li {
   position: absolute;
   width: 100%;
   height: 100%;

   figure {
    margin: 0;
    width: 100%;
    height: 100%;

    img {
     display: block;
     width: 100%;
     height: 100%;
     object-fit: cover;
    }
   }
  }
 }
}

.front-page-item-list .wp-block-post-template>li {
 opacity: 0;
 transition: opacity 1000ms ease-in-out;
}

.front-page-news {
/*  padding-block: 0 2em; */
 padding-block-end: 2em;
 padding-inline: 2em;

 ul.news-category,
 .wp-block-query+p {
  width: clamp(20rem, 5.208rem + 67.62vw, 64.375rem);
  margin-inline: auto;
 }

 h2+div {
  margin-block-end: 2em;
 }

 .link-other-page a {
  margin-inline: auto;
 }
}

ul.news-category {
 border-top: 1px solid var(--wp--preset--color--arisaka-main-color);

 li {
  display: grid;
  align-items: center;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  row-gap: 0.5em;
  column-gap: 1.5em;
  border-bottom: 1px solid var(--wp--preset--color--arisaka-main-color);
  padding-block: 1.25em;

  figure {
   grid-column: 1 / 2;
   grid-row: 1 / 3;
   width: 30vw;
   aspect-ratio: 105/97;
   overflow: hidden;
   transition: 0.4s ease;

   img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.4s ease;

    &:hover {
     transform: scale(1.05);
    }
   }
  }

  .wp-block-post-date {
   grid-column: 2 / 3;
   grid-row: 1 / 2;
   font-size: 12px;
   align-self: end;
  }

  h3 {
   font-size: clamp(0.938rem, 0.703rem + 0.63vw, 1.25rem);
   grid-column: 2 / 3;
   grid-row: 2 / 3;
   line-height: 1;
   margin: 0;
   align-self: start;
   font-size: 1em;
   line-height: 1;
  }
 }
}

@media (width <=600px) {

 .front-page-promise {
  padding-inline: 1.5em;
 }

 .width-wide-block_front-page {
  img {
   /* width:unset; */
   /* object-position: center top; */
   height: 100%;
   width: 100%;
  }
 }

 .front-page-company,
 .front-page-news {
  padding-inline: 2em;
 }

 .front-page-item-list>div:nth-child(1) {
  padding-inline: 2em;
  margin-block-end: 3.5em;
 }

 .front-page-company {
  .wp-block-video {
   position: relative;
   aspect-ratio: 1 / 0.65;
   width: 100dvw;
   overflow-x: hidden;
   left: 50%;
   transform: translateX(-50%);

   /* video {
   width: 100%;
   height: 100%;
   object-fit: cover;
  } */
  }
 }
}

/* 600px over */
@media (600px < width) {
 .front-page-promise {
  padding-block-end: 6.5em;
 }

 .front-page-actual-result {
  >div {
   p:has(a).link-other-page {
    margin-block: 3.5em;

    >a {
     margin-inline: 0 auto;
    }
   }
  }
 }

 .faq-block {
  dl.faq {
   margin-block-start: 4.3em;
  }

  dl.faq,
  p:has(a).link-other-page.dark {
   max-width: 58.8125em;
   margin-inline: auto;
  }
 }

 .front-page-news {
  ul.news-category {
   li {
    position: relative;
    column-gap: 2.7em;
    transition: 0.3s ease-in;

    figure {
     max-width: 15.375rem;
     aspect-ratio: 15/9;
    }
    .wp-block-post-date a,
    h3 a{display: block;}

    &::after {
     content: "";
     position: absolute;
     right: 1rem;
     /* 右端からの余白を調整 */
     top: 50%;
     transform: translateY(-50%);
     width: 35px;
     height: 13px;
     background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='35' height='13' viewBox='0 0 35 13' fill='none'><path d='M28.5 0.5L34.5 6.5L28.5 12.5' stroke='%231F304E' stroke-linecap='round' stroke-linejoin='round'/><path d='M0.5 6.5H34.5' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round'/></svg>");
     background-repeat: no-repeat;
     background-size: contain;
     pointer-events: none;
     z-index: 2;
     transition: 0.3s ease-in;
    }
    &:hover{
     opacity: 0.7;
     &::after {
      transform: translate(6px, -50%);
     }
    }
   }
  }
 }
}

/* @media (width > 1024px) {} */
@media (600px < width < 1140px) {
 .front-page-service {
  >div {
   grid-template-columns: repeat(2,
     clamp(13.625em, 5.737em + 20.9vw, 20.625em));
  }
 }

 .front-page-promise {

  h2,
  >div {
   margin-inline: auto;
   width: 550px;
  }

  >div {
   >div {
    figure {
     max-width: 34.4em;
    }
   }
  }
 }

 .front-page-actual-result {
  >div {
   width: 550px;
   margin-inline: auto;
  }
 }

 .front-page-company,
 .front-page-item-list {
  >div {
   max-width: 26.7em;
   margin-inline: auto;
   display: grid;
   justify-content: center;

   /* >figure {
   justify-self: center;
  } */

   .wp-block-video,
   div.wp-block-query {
    width: 100%;
    width: clamp(35rem, -13.139rem + 67.56vw, 67.938rem);
    height: auto;
    aspect-ratio: 1087/750;
   }

   div.wp-block-query {
    aspect-ratio: 1087/750;
   }

   p.link-page.dark {
    a {
     margin-inline: auto;
     /* width:100%; */
    }
   }

  }

 }

}

@media (width >=1140px) {
 .front-page-service {
  >div {
   grid-template-columns: repeat(3,
     clamp(20.625rem, 19.125rem + 4vw, 22.625rem));
  }
 }

 .front-page-promise {

  h2,
  >div>div:nth-child(even) {
   padding-inline-start: var(--arisaka-aspect-inlinewidth);
  }

  >div>div:nth-child(odd) {
   padding-inline-end: var(--arisaka-aspect-inlinewidth);
  }

  >div {
   max-width: 1920px;
   margin-inline: auto;

   >div {
    display: flex;
    justify-content: space-between;
    flex-direction: row-reverse;
    align-items: center;

    &:nth-child(1) {
     margin-block-start: 4.3em;
    }

    &:nth-child(even) {
     flex-direction: row;
    }

    figure {
     margin-block-start: 0;
     aspect-ratio: 1 / 0.669;
     height: 100%;
     max-width: clamp(31.25rem, -10.769rem + 58.97vw, 60rem);

     img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      max-width: unset;
     }
    }
   }
  }
 }

 .front-page-actual-result {
  padding-inline: var(--arisaka-aspect-inlinewidth) calc(var(--arisaka-aspect-inlinewidth) / 2);
 }

 .front-page-actual-result {
  display: grid;
  grid-template-columns: auto 1fr;
  justify-content: space-between;
  column-gap: clamp(2.5rem, 0.015rem + 3.49vw, 4.2rem);

  >div:nth-child(1) {
   max-width: 27.1em;
  }

  >section {
   justify-self: end;
  }

  ul {
   grid-template-columns: repeat(2, auto);
   column-gap: clamp(2rem, -2.019rem + 5.64vw, 4.75rem);
  }

  li {
   max-width: 24.5em;
  }

  li:nth-child(-n+2) {
   margin-block-end: 2em
  }

  h3 {
   line-height: 1.4;
   margin: 0;
  }
 }

 .faq-block {
  p:has(a).link-other-page.dark {
   a {
    margin-inline: auto 0;
   }
  }
 }


 .front-page-company,
 .front-page-item-list {
  >div {
   max-width: 1920px;
   margin-inline: auto;
   display: grid;
   align-items: center;
   grid-template-columns: var(--arisaka-aspect-rate, 0.3fr 0.7fr);

   >div:nth-child(1) {
    grid-column: 1/2;
    max-width: 26.7em;
   }

   >figure {
    grid-column: 2 /3;
    justify-self: end;
   }

   .wp-block-video,
   div.wp-block-query {
    width: 100%;
    width: clamp(35rem, -13.139rem + 67.56vw, 67.938rem);
    height: auto;
    aspect-ratio: 1087/750;
   }

   div.wp-block-query {
    aspect-ratio: 1087/750;
    grid-column: 1/2;
    grid-row: 1/2;
   }



   p.link-page.dark {
    a {
     margin-inline: 0 auto;
     width: 100%;
    }
   }

  }

 }

 .front-page-company {
  >div {
   >div {
    margin-inline-start: var(--arisaka-aspect-inlinewidth);
   }
  }
 }

 .front-page-item-list {
  >div {
   grid-template-columns: var(--arisaka-aspect-rateR, 0.7fr 0.3fr);

   >div:nth-child(1) {
    grid-column: 2/3;
    grid-row: 1/2;
    margin-inline-end: unset;
   }
  }



 }


}