@charset "utf-8";

/****************************************
 * 共通
 ****************************************/
:root{
  --page-main-inner: min(var(--100vw) - 10rem, 120rem);
  --page-side-margin: calc((var(--100vw) - var(--page-main-inner)) / 2);
  --page-mv-blur: blur(10px);
}
.l-main--page{
  margin-top: var(--header-height);
}
.p-page-mv{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 40rem;
  position: relative;
  color: var(--color-white);
  /* overflow: hidden; */

  background-color: rgb(45 45 45 / 0.5);
}
.p-page-mv::after{
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: -5;
  /* filter: var(--page-mv-blur); */
}
.p-page-mv::after{
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  /* background-color: #989898; */
}
.p-page-mv__title-en{
  font-size: 4.8rem;
  text-align: center;
  font-family: var(--font-family-en);
  font-weight: var(--font-weight-bold);
  line-height: 1;
}
.p-page-mv__title-ja{
  font-size: 2.4rem;
  text-align: center;
  font-weight: var(--font-weight-bold);
}
.p-page-news{
  position: absolute;
  top: 2rem;
  left: var(--side-margin);
}

.p-page-contents{
  padding: 10rem 0;
}

.p-page-inner{
  width: var(--page-main-inner);
  margin: 0 auto;
}
.p-page-contents :where(div, h2, h3, ul, ol, p) + :where(ul, ol, p){
  margin-top: 2rem;
} 
.p-page-contents :where(ul, ol, p){
  font-size: 1.8rem;
  line-height: 2;
}
.p-page-contents :where(div, h2, h3, ul, ol, p) + :where(div){
  margin-top: 6rem;
}

@media (width <= 768px){
  :root{
    --page-main-inner: min(var(--100vw) - 6rem, 120rem);
  }
  .p-page-mv{
    height: 32rem;
  }
  .p-page-mv__title-container{
    margin-top: 8rem;
  }
  .p-page-mv__title-en{
    font-size: 4rem;
  }
  .p-page-mv__title-ja{
    font-size: 1.8rem;
    font-weight: var(--font-weight-semibold);
  }
  .p-page-contents{
    padding: 5rem 0;
  }
  .p-page-contents :where(div, h2, h3, ul, ol, p) + :where(ul, ol, p){
    margin-top: 1.8rem;
  } 
  .p-page-contents :where(ul, ol, p){
    font-size: 1.6rem;
  }
  .p-page-contents :where(div, h2, h3, ul, ol, p) + :where(div){
    margin-top: 3rem;
  }
}

/****************************************
 * メッセージ /message/
 ****************************************/
.p-message .p-page-mv::after{
  background-image: url(../images/pages/message-mv.jpg);
}

.p-message__image{
  width: min(100%, 72rem);
  margin-right: auto;
  margin-left: auto;

  aspect-ratio: 4 / 3;
  background-color: #989898;
}
.p-message__message{
  margin-top: 4rem;
  font-size: 2.4rem;
  color: var(--color-orange);
  text-align: center;
}
.p-message__link-container{
  width: max-content;
  margin-right: auto;
  margin-left: auto;
}
.p-message__link{
  --this-hover-text-color: var(--color-orange);
  --this-hover-bg-color: var(--color-white);
  padding: 0.5em 2em;
  font-size: 2.4rem;
  color: var(--color-white);
  background-color: var(--color-orange);
  border-color: var(--color-orange);
}

@media (width <= 768px){
  .p-message__message{
    margin-top: 3rem;
    font-size: 2rem;
    line-height: 1.5;
    text-align: left;
  }
  .p-message__link{
    font-size: 2rem;
  }
}



/****************************************
 * 募集職種 /category/
 ****************************************/
.p-category .p-page-mv{
  overflow: hidden;
}
.p-category .p-page-mv::after{
  filter: var(--page-mv-blur);
}
.p-category .p-page-contents{
  padding-top: 0;
}

.p-category-contents__image{
  width: min(var(--page-main-inner), 80rem);
  margin: -8rem auto 4rem;
  position: relative;
  z-index: 0;
  border-radius: var(--main-border-radius);
  overflow: hidden;
}
.p-category-contents__image img{
  width: 100%;
  height: auto;
}

.p-category-contents__copy{
  font-size: 2.8rem;
  color: var(--color-darkbrown);
  line-height: 1.5;
  font-weight: var(--font-weight-semibold);
}
.p-category-type__tag-list{
  list-style-type: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  padding-left: 0;
  
}
.p-category-type__tag-item{
  padding: 0.2rem 1rem;
  font-size: 1.5rem;
  color: var(--color-orange);
  font-weight: var(--font-weight-medium);
  background-color: var(--color-lightorange);
  border-radius: 2rem;
}

.p-category-detail__row{
  display: grid;
  grid-template-columns: 24rem 1fr;
}
.p-category-detail__row + .p-category-detail__row{
  margin-top: 0.2rem;
}

.p-category-detail__term{
  padding: 1em;
  color: var(--color-darkbrown);
  font-size: 2rem;
  font-weight: var(--font-weight-semibold);
  background-color: var(--color-lightorange);
}

.p-category-detail__description{
  margin-top: 0;
  padding: 1em 1em 1em 2em;
  font-size: 1.8rem;
  line-height: 2;
}
.p-category-detail__description ul{
  list-style-type: none;
  padding-left: 2rem;
}
.p-category-detail__description :where(p, ul) + ul{
  margin-top: 1rem;
}
.p-category-detail__description ul > li{
  position: relative;
}
.p-category-detail__description ul > li::before{
  content: "";
  display: block;
  width: 1rem;
  aspect-ratio: 1 / 1;
  position: absolute;
  top: 1.4rem;
  left: -2rem;
  border-radius: 50%;
  background-color: var(--color-orange);
}
.p-category-detail__description p[style]{
  margin-top: 0;
}
.p-category-detail__description :is(p, ul) + br,
.p-category-detail__description ul > br{
  display: none;
}


.p-category-link__container{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2rem;
  
  margin: 6rem auto 0;
}
.p-category-link{
  width: min(100%, 34rem);
  padding: 0.5em 2em;
  font-size: 2.4rem; 
}
/* .p-category-link--back{
  color: #989898;
  border-color: #989898;
} */
.p-category-link--entry{
  --this-hover-text-color: var(--color-white);
  color: var(--color-white);
  background-image: var(--main-gradient);
  background-color: var(--color-red);
  border-width: 0;
}

@media (width <= 768px){
  .p-category-contents__image{
    margin-top: -4rem;
  }
  .p-category-contents__copy{
    font-size: 2rem;
  }
  .p-category-type__tag-item{
    font-size: 1.4rem;
    font-weight: var(--font-weight-regular);
  }
  .p-category-detail__row{
    grid-template-columns: 1fr;
  }
  .p-category-detail__term{
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    padding-left: 0.5em;
    font-size: 1.8rem;
  }
  .p-category-detail__description{
    padding-top: 0.5em;
    padding-bottom: 1.5em;
    padding-left: 0.5em;
    font-size: 1.6rem;
    line-height: 1.5;
  }

  .p-category-detail__description ul > li::before{
    width: 0.6rem;
    top: 1.3rem;
    left: -1.6rem;
    border-radius: 50%;
    background-color: var(--color-orange);
  }
  .p-category-link{
    font-size: 2rem;
  }
}

/****************************************
 * 社員インタビュー /interview/
 ****************************************/
.p-interview .p-page-contents{
  padding-top: 0;
}
.p-interview .p-page-mv{
  overflow: hidden;
}
.p-interview .p-page-mv::after{
  filter: var(--page-mv-blur);
}
.p-detail01 .p-page-mv::after{
  background-image: url(../images/pages/interview-01-mv.jpg);
}
.p-detail02 .p-page-mv::after{
  background-image: url(../images/pages/interview-02-mv.jpg);
}
.p-detail03 .p-page-mv::after{
  background-image: url(../images/pages/interview-03-mv.jpg);
}


.p-interview-mv{
  column-gap: 4.8rem;
}
.p-interview-mv__image{
  flex-basis: 64rem;
  position: relative;
  z-index: 5;
  border-radius: var(--main-border-radius);
  overflow: hidden;

  aspect-ratio: 64 / 48;
  /* background-color: #989898; */
}
.p-interview .p-interview-mv__image{
  margin-top: -8rem;
}
.p-interview-mv__body{
  flex-grow: 1;
  padding-top: 3rem;
}
.p-interview-mv .p-interview-mv__body{
  margin-top: -2.4rem;
}
.p-interview-mv__copy{
  position: relative;
  z-index: 0;
  color: var(--color-darkbrown);
  font-size: 3.2rem;
  font-weight: var(--font-weight-bold);
  line-height: 1.75;
}
.p-interview-mv__copy::before{
  content: "";
  display: block;
  width: 30rem;
  aspect-ratio: 1 / 1;
  position: absolute;
  top: calc(50% - 15rem);
  right: calc((100% + 5rem) - 15.8rem);
  z-index: -5;
  background-color: var(--color-lightorange);
  border-radius: 50%;
}
.p-interview-mv__heading-container{
  display: flex;
  flex-direction: column;
  width: max-content;
  margin: 6rem auto 0;
}
.p-interview-mv__job{
  font-size: 2rem;
  color: var(--color-darkbrown);
  line-height: 1.5;
}
.p-interview-mv__name{
  width: max-content;
  margin-top: 0;
  padding-left: 7rem;
  color: transparent;
  font-size: 4.8rem;
  font-weight: var(--font-weight-bold);
  line-height: 1.5;
  background-clip: text;
  background-image: var(--main-gradient);
}

.p-interview-contents{
  margin-top: 10rem;
  overflow: hidden;
}
.p-interview-contents__heading{
  display: grid;
  grid-template-columns: var(--page-side-margin) [text] 60rem [line] 1fr var(--page-side-margin);
  align-items: center;
  position: relative;
  z-index: 0;
  font-size: 2.8rem;
  font-weight: var(--font-weight-bold);
  line-height: 1.5;
}
.p-interview-contents__heading:has(+ .p-interview-contents__row > .p-interview-contents__image:first-child){
  grid-template-columns: [line] var(--page-side-margin) 1fr [text] 60rem var(--page-side-margin);
}
.p-interview-contents__heading::before{
  grid-column-start: line;
  grid-column-end: span 2;
  grid-row: 1;
  content: "";
  display: block;
  width: 100%;
  height: 1rem;
  background-image: var(--main-gradient);
}
.p-interview-contents__heading-inner{
  grid-column: text;
  grid-row: 1;
}
.p-interview-contents__heading:has(+ .p-interview-contents__row > .p-interview-contents__image:first-child) .p-interview-contents__heading-inner{
  justify-self: flex-end;
}

.p-interview-contents__row{
  align-items: flex-start;
  column-gap: 12rem;
  margin-top: 0;
}
.p-interview-contents__image{
  flex-shrink: 0;
  flex-basis: 48rem;
  border-radius: var(--main-border-radius);
  overflow: hidden;

  /* aspect-ratio: 48 / 35; */
  background-color: #989898;
}
.p-interview-contents__image > image{
  width: 100%;
  height: auto;
}
.p-interview-contents__text{
  flex-grow: 0;
  flex-basis: 60rem;
  padding-top: 3rem;
}

.p-interview-link__container{
  width: min(var(--page-main-inner), 39.6rem);
  margin: 10rem auto 0;
}
.p-interview-link{
  --this-hover-text-color: var(--color-orange);
  width: 100%;
  height: 5.9rem;
  color: var(--color-white);
  font-size: 2.4rem;
  background-color: var(--color-orange);
  border-color: currentColor;
}

@media (width <= 1080px){
  .p-interview-mv{
    flex-direction: column;
    column-gap: 2rem;
  }
  .p-interview-mv__image{
    flex-basis: auto;
    width: min(100%, 64rem);
  }
  .p-interview-mv .p-interview-mv__body{
    margin-top: 0;
  }
  .p-interview-mv__body{
    padding-top: 2rem;
  }
  .p-interview-mv__heading-container{
    margin-top: 2rem;
  }
  .p-interview-mv__copy{
    line-height: 1.5;
  }
  .p-interview-contents{
    margin-top: 6rem;
  }
  .p-interview-contents__heading{
    --this-template-columns: var(--page-side-margin) [text] minmax(60rem, 1fr) [line] 1fr var(--page-side-margin);
    margin-bottom: 3rem;
  }
  .p-interview-contents__heading,
  .p-interview-contents__heading:has(+ .p-interview-contents__row > .p-interview-contents__image:first-child){
    grid-template-columns: var(--this-template-columns);
  }
  .p-interview-contents__heading:has(+ .p-interview-contents__row > .p-interview-contents__image:first-child) .p-interview-contents__heading-inner{
    justify-self: flex-start;
  }
  .p-interview-contents__row{
    flex-direction: column;
    row-gap: 3rem;
  }
  .p-interview-contents__image{
    flex-basis: auto;
    align-self: center;
    width: min(100%, 48rem);
    margin: 0 auto;
    order: 2;
  }
  .p-interview-contents__text{
    flex-basis: auto;
    padding-top: 0;
    order: 3;
  }
}
@media (width <= 768px){
  .p-interview .p-interview-mv__image{
    margin-top: -4rem;
  }
  .p-interview-mv__copy{
    font-size: min(6vw, 2.4rem);
  }
  .p-interview-mv__copy br{
    display: none;
  }
  .p-interview-mv__heading-container{
    position: relative;
    z-index: 0;
  }
  .p-interview-mv__job{
    font-size: 1.8rem;
  }
  .p-interview-mv__name{
    padding-left: 1em;
    font-size: 3.2rem;
  }

  .p-interview-contents__heading{
    --this-template-columns: var(--page-side-margin) [text] 1fr var(--page-side-margin);
    margin-bottom: 3.2rem;
    font-size: min(6vw, 2.8rem);
    font-weight: var(--font-weight-semibold);
    white-space: break-spaces;
    text-wrap: inherit;
  }
  .p-interview-contents__heading::before{
    width: calc(var(--page-main-inner) + var(--page-side-margin));
    height: 0.4rem;
    position: absolute;
    left: var(--page-side-margin);
    bottom: -1.2rem;
  }
  .p-interview-contents__heading br{
    display: none;
  }
  .p-interview-contents__row{
    row-gap: 2rem;
  }

  .p-interview-link__container{
    margin-top: 5rem;
  }
  .p-interview-link{
    font-size: min(5vw, 2rem);
  }
}

/****************************************
 * 仕事風景 /gallery/
 ****************************************/
.p-gallery .p-page-mv::after{
  background-image: url(../images/pages/gallery-mv.jpg);
}

.p-gallery__overview{
  font-size: 2rem;
  text-align: center;
  line-height: 2;
}
.p-gallery__gallery{
  grid-auto-flow: dense;
  gap: 2rem;
}
.p-gallery__gallery + .p-gallery__gallery{
  margin-top: 2rem;
}
.p-gallery-item{
  border-radius: var(--main-border-radius);
  overflow: hidden;
}
.p-gallery__gallery--column2 .p-gallery-item{
  aspect-ratio: 590 / 354;
}
.p-gallery__gallery--column3 .p-gallery-item{
  aspect-ratio: 387 / 309;
}
.p-gallery__gallery .p-gallery-item--multirow{
  grid-row-end: span 2;
  aspect-ratio: inherit;
}
.p-gallery-item img,
.p-gallery-item picture{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.p-gallery__link-container{
  width: max-content;
  margin-right: auto;
  margin-left: auto;
}
.p-gallery__link{
  --this-hover-text-color: var(--color-orange);
  --this-hover-bg-color: var(--color-white);
  padding: 0.5em 2em;
  font-size: 2.4rem;
  color: var(--color-white);
  background-color: var(--color-orange);
  border-color: var(--color-orange);
}
@media (width <= 1080px){
  .p-gallery__overview{
    width: var(--page-main-inner);
    margin-right: auto;
    margin-left: auto;
    text-align: left;
  }
}

@media (width <= 768px){
  .p-gallery__gallery{
    gap: 1rem;
  }
  .p-gallery__gallery + .p-gallery__gallery{
    margin-top: 1rem;
  }
  .p-gallery .p-gallery__gallery--column3{
    grid-template-columns: 1fr;
  }
  .p-gallery .p-gallery__gallery--column3:has(.p-gallery-item--multirow){
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .p-gallery__link{
    font-size: 2rem;
  }
}

/****************************************
 * お問い合わせ /contact/
 ****************************************/
.p-contact .p-page-mv::after{
  background-image: url(../images/pages/contact-mv.jpg);
}
.p-contact .p-page-contents{
  padding-bottom: 11rem;
}
.p-contact .js-step-input[aria-hidden="true"],
.p-contact .js-step-confirm[aria-hidden="true"]{
  display: none;
}
.p-contact-overview p{
  font-size: 2rem;
}

.p-contact-flow{
  width: min(var(--page-main-inner) + 5rem, 125rem);
  margin: 10rem auto 0;
  padding: 4.5rem 2.5rem 3.6rem;
  position: relative;
  border: 0.1rem solid var(--color-orange);
  border-radius: var(--main-border-radius);
}
.p-contact-flow__heading{
  width: min(100%, 38rem);
  padding: 0.8rem 3.5rem 1rem;
  position: absolute;
  top: -2.9rem;
  left: calc(50% - 19rem);
  z-index: 5;
  font-size: 2.8rem;
  color: var(--color-orange);
  font-weight: var(--font-weight-medium);
  background-color: var(--color-white);
}

.p-contact .p-contact-flow__list{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  align-items: stretch;
  gap: 5.3rem;
  margin-top: 0;
}
.p-contact-flow__title-container{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6rem;
  position: relative;
  color: var(--color-orange);
  line-height: 1;
}
.p-contact .p-contact-flow__list .p-contact-flow__item:not(:last-of-type) .p-contact-flow__title-container::after{
  content: "";
  display: block;
  width: 1.4rem;
  height: 2.5rem;
  position: absolute;
  bottom: 0;
  left: calc(100% + 1.1rem);
  z-index: 0;
  background-color: var(--color-orange);
  mask-image: url(./mask-image/chevron.svg);
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
}
.p-contact-flow__title-container > p{
  font-size: 2.4rem;
  font-family: var(--font-family-en);
  font-weight: var(--font-weight-semibold);
  line-height: 1;
}
.p-contact-flow__title-container > h3{
  font-size: 2.4rem;
  font-weight: var(--font-weight-bold);
}
.p-contact-flow__image{
  width: 12rem;
  margin: 1.6rem auto 0;
}
.p-contact-flow__description{
  margin-top: 1rem;
}
.p-contact-flow__description p{
  font-size: 1.6rem;
  line-height: 1.6875;
}

.p-contact-flow + div{
  margin-top: 8.5rem;
}
.p-contact-form,
.p-contact-confirm{
  width: min(var(--main-inner), 111rem);
  margin-right: auto;
  margin-left: auto;
}
.p-contact-form__row{
  display: grid;
  grid-template-columns: 27.4rem 1fr;
  column-gap: 5rem;
  align-items: center;
}
.p-contact-form__row:has(.p-contact-form__input > [data-name="your-subject"]),
.p-contact-form__row:has(.p-contact-form__input > [data-name="your-file"], .p-contact-form__input [name="your-file"]),
.p-contact-form__row:has(.p-contact-form__input > [data-name="your-message"], .p-contact-form__input [name="your-message"]){
  align-items: flex-start;
}
.p-contact-form__row + .p-contact-form__row{
  margin-top: 3.5rem;
}
.p-contact-form__row.is-hidden{
  display: none;
}
.p-contact-form__row > div{
  margin-top: 0;
}
.p-contact-form__term{
  padding-left: 2rem;
  text-align: right;
}

.p-contact-form__label{
  display: inline-flex;
  align-items: center;
  column-gap: 0.8rem;
  text-align: right;
}
.p-contact-form__label:has(br){
  align-items: flex-start;
}
.p-contact-form__label > span:first-of-type{
  font-size: 1.8rem;
  line-height: 1.35;
}
.p-contact-form__label > span:first-of-type::first-line{
  font-size: 2rem;
}
.p-contact-form__mark{
  display: inline-flex;
  justify-content: center;
  align-items: flex-start;
  width: 4.8rem;
  height: 2.4rem;
  padding-top: 0.1rem;
  padding-bottom: 0.3rem;
  font-size: 1.4rem;
  color: var(--color-white);
  font-weight: var(--font-weight-medium);
  border-radius: 0.2rem;
}
.p-contact-form__mark--require{
  background-color: var(--color-red);
}
.p-contact-form__mark--optional{
  background-color: #787878;
}
.p-contact-form__input{
  padding-right: 1.9rem;
  font-size: 1.8rem;
}
[data-name="your-subject"] .wpcf7-radio{
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 1.2rem;
  font-size: 1.8rem;
  line-height: 1.5;
}
[data-name="your-subject"] .wpcf7-list-item{
  margin-left: 0;
}
[data-name="your-subject"] label{
  padding-left: 3.2rem;
  position: relative;
}
[data-name="your-subject"] input[type="radio"]{
  appearance: none;
  display: inline-block;
  width: 2.4rem;
  height: 2.4rem;
  position: absolute;
  top: 0.2rem;
  left: 0;
  border-radius: 50%;
}
[data-name="your-subject"] label::before,
[data-name="your-subject"] label::after{
  content: "";
  display: block;
  width: 2.4rem;
  height: 2.4rem;
  position: absolute;
  top: 0.2rem;
  left: 0;
  z-index: 0;
  border-radius: 50%;
}
[data-name="your-subject"] label::before{
  background-color: var(--color-white);
  border: 0.1rem solid #787878;
}
[data-name="your-subject"] label::after{
  width: 1.4rem;
  height: 1.4rem;
  top: 0.7rem;
  left: 0.5rem;
  background-color: var(--color-orange);
  scale: 0;
}
[data-name="your-subject"] label:has(:checked)::after{
  scale: 1;
}
.p-contact-form__input input[type="text"],
.p-contact-form__input input[type="email"],
.p-contact-form__input input[type="tel"],
.p-contact-form__input select,
.p-contact-form__input textarea{
  width: min(100%, 57rem);
  padding: 1.0rem 1.2rem 1.0rem;
  background-color: var(--color-white);
  border: 0.1rem solid #787878;
  border-radius: 1rem;
}
.p-contact-form__input select{
  appearance: none;
  color: inherit;
}
.p-contact-form__input .wpcf7-form-control-wrap:has(select){
  position: relative;
}
.p-contact-form__input .wpcf7-form-control-wrap:has(select)::after{
  content: "";
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  top: calc(50% - 0.3rem);
  right: 1.2rem;
  z-index: 0;
  border-top: 1rem solid #4A4038;
  border-right: 1rem solid transparent;
  border-bottom: none;
  border-left: 1rem solid transparent;
  pointer-events: none;
}
::file-selector-button,
::-webkit-file-upload-button{
  appearance: none;
  margin-right: 2rem;
  padding: 0.7rem 1.2rem 0.8rem;
  color: inherit;
  font-family: inherit;
  font-size: 1.8rem;
  background-color: var(--color-lightorange);
  border: none;
}
[data-name="your-file"] + p{
  display: flex;
  margin-top: 0.5rem;
  font-size: 1.6rem;
}
::placeholder{
  color: #958E89;
  opacity: 1;
}
.p-contact-form__input textarea{
  height: 17.4rem;
  resize: vertical;
}

.p-contact-agreement{
  text-align: center;
}
.p-contact-agreement > p{
    font-size: 1.6rem;
}
.p-contact-agreement__heading{
  margin-bottom: 0.6rem;
}
.p-contact-agreement__text{
  margin-top: 0;
}
.p-contact-agreement__text > a{
  color: var(--color-orange);
}

.p-contact-agreement__input{
  display: inline-flex;
  align-items: center;
  column-gap: 0.6rem;
  margin: 1.8rem auto 0;
  position: relative;
  font-size: 1.8rem;
}
.p-contact-agreement__input > input{
  appearance: none;
  display: inline-block;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 0.4rem;
}
.p-contact-agreement__input:has(input)::before,
.p-contact-agreement__input:has(input)::after{
  content: "";
  display: block;
  position: absolute;
}
.p-contact-agreement__input:has(input)::before{
  width: 2.4rem;
  height: 2.4rem;
  top: 0.2rem;
  left: 0;
  z-index: 0;
  background-color: var(--color-white);
  border: 0.1rem solid #787878;
  border-radius: 0.4rem;
}
.p-contact-agreement__input:has(input)::after{
  width: 1.6rem;
  height: 1.2rem;
  top: calc(50% - 0.7rem);
  left: 0.4rem;
  z-index: 5;
  border-bottom: 0.4rem solid var(--color-orange);
  border-left: 0.4rem solid var(--color-orange);
  scale: 0;
  rotate: -47deg;
}
.p-contact-agreement__input:has(> input:checked)::after{
  scale: 1;
}

.p-contact__button-container{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4rem;
  margin: 8rem auto 0;
}
.p-contact__button-container :where([class^="p-contact__"]),
.p-contact__button-container :where(input[type="submit"]){
  width: 31.2rem;
  padding: 1.2rem;
  font-size: 2.4rem;
  font-weight: var(--font-weight-bold);
  background-color: transparent;
  background-image: none;
}
.p-contact__to-confirm:not(:disabled){
  --this-hover-text-color: var(--color-orange);
  --this-hover-bg-color: var(--color-white);
  color: var(--color-white);
  background-color: var(--color-orange);
  border-color: var(--color-orange);
  cursor: pointer;
  background-position: 0;
}
.p-contact__to-confirm:disabled{
  color: var(--color-white);
  border-color: #9c9c9c;
  background-color: #9c9c9c;
  cursor: not-allowed;
  background-position: 0;
}
.p-contact__back-input{
  color: #9c9c9c;
  background-position: 0;
  cursor: pointer;
}
.p-contact__submit{
  --this-hover-text-color: var(--color-white);
  color: var(--color-white);
  background-image: var(--main-gradient);
  border-width: 0;
  cursor: pointer;
}
.p-contact form .wpcf7-response-output{
  width: var(--page-main-inner);
  margin-right: auto;
  margin-left: auto;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
}

.wpcf7-reflection{
  padding: 0;
  font: inherit;
  border: none;
  background-color: none;
}

.p-contact .l-breadclumb{
  position: relative;
}
.p-contact .l-breadclumb::before{
  content: "";
  display: block;
  width: 100%;
  height: 1rem;
  position: absolute;
  bottom: 100%;
  left: 0;
  z-index: 0;
  background-image: var(--main-gradient);
}

/* JSによる制御 */
.confirm-open .js-step-input,
.js-step-confirm .is-hidden,
.p-contact-overview[aria-hidden="true"],
.p-contact-flow[aria-hidden="true"]{
  display: none;
}
:not(.confirm-open) .js-step-confirm{
  display: none;
}
.confirm-open .js-step-confirm{
  display: block;
}
.confirm-open .p-contact__button-container--confirm{
  display: flex;
}
/* Thanksページ */
.p-thanks .p-page-mv::after{
  background-image: url(../images/pages/contact-mv.jpg);
}
.p-thanks__link{
  --this-hover-text-color: var(--color-orange);
  --this-hover-bg-color: var(--color-white);
  padding: 0.5em 2em;
  font-size: 2.4rem;
  color: var(--color-white);
  background-color: var(--color-orange);
  border-color: var(--color-orange);
}

@media (width <= 1080px){
  .p-contact-flow{
    width: calc(var(--page-main-inner) + 4rem);
    padding-right: 6rem;
    padding-left: 6rem;
  }
  .p-contact .p-contact-flow__list {
    grid-template-columns: 1fr 1fr;
  }
  .p-contact-form__row{
    grid-template-columns: 1fr;
    row-gap: 1rem;
  }
  .p-contact-form__term{
    padding-left: 0;
    text-align: left;
  }
  .p-contact-form__label{
    text-align: left;
  }
  .p-contact-form__input{
    padding-left: 2rem;
  }
}
@media (width <= 768px){
  .p-contact-overview p{
    font-size: 1.6rem;
  }

  .p-contact-flow{
    width: calc(var(--page-main-inner) + 2rem);
    margin-top: 6rem;
    padding-right: 4rem;
    padding-left: 4rem;
  }
  .p-contact-flow__heading{
    width: auto;
    padding: 0.8rem 2rem;
    top: -2.4rem;
    left: calc(50% - 13rem);
    font-size: 2rem;
  }
  .p-contact .p-contact-flow__list{
    grid-template-columns: 1fr;
  }
  .p-contact-flow__title-container{
    gap: 1rem;
  }
  .p-contact .p-contact-flow__list .p-contact-flow__item:not(:last-of-type) .p-contact-flow__title-container::after{
    display: none;
  }
  .p-contact-flow__item{
    position: relative;
  }
  .p-contact-flow__item:has(+ .p-contact-flow__item)::after{
    content: "";
    display: block;
    width: 1.4rem;
    height: 2.5rem;
    position: absolute;
    bottom: -3rem;
    left: calc(50% - 0.7rem);
    z-index: 0;
    background-color: var(--color-orange);
    mask-image: url(./mask-image/chevron.svg);
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: contain;
    rotate: 90deg;
  }
  .p-contact-flow__image{
    margin-top: 0.4rem;
  }
  .p-contact-flow__description{
    margin-top: 0;
  }

  .p-contact-flow + div{
    margin-top: 6rem;
  }

  /* .p-contact-form__row + .p-contact-form__row{
    margin-right: 2rem;
  } */
  .p-contact-form__label > span:first-of-type{
    font-size: 1.6rem;
  }
  .p-contact-form__label > span:first-of-type::first-line{
    font-size: 1.8rem;
  }
  .p-contact-form__input{
    padding-right: 0;
    padding-left: 0;
    font-size: 1.6rem;
    font-weight: var(--font-weight-regular);
  }
  [data-name="your-subject"] .wpcf7-radio{
    font-size: 1.6rem;
    row-gap: 0.6rem;
  }
  .p-contact-form__input select{
    overflow: hidden;
  }
  ::file-selector-button,
  ::-webkit-file-upload-button{
    font-size: 1.6rem;
  }
  [data-name="your-file"] > input{
    width: 100%;
  }
  [data-name="your-file"] + p{
    font-size: 1.4rem;
    line-height: 1.5;
  }

  .p-contact-agreement > p{
    font-size: 1.5rem;
  }
  .p-contact-agreement__text{
    text-align: left;
  }
  .p-contact-agreement__input{
    font-size: 1.6rem;
  }
  .p-contact__button-container{
    flex-wrap: wrap;
    gap: 2rem;
    margin-top: 4rem;
    position: relative;
  }
  .p-contact__button-container :where([class^="p-contact__"]), .p-contact__button-container :where(input[type="submit"]){
    width: min(100%, 24rem);
    font-size: 2rem;
  }
  .wpcf7-spinner{
    margin: 0;
    position: absolute;
    top: calc(100% + 0.6rem);
    left: calc(50% - 12px);
  }

  .p-thanks__link{
    font-size: 2rem;
  }
}