@charset "UTF-8";

/*
  よくある質問
-----------------------------------------------*/
.sec-01 {
  /*background-color: var(--c-main-dark-green);*/
  padding: 60px 0;
}
.faq_inner {
  display: flex;
  flex-direction: column;
  gap: 30px 4%;
}

.faq_inner + .faq_inner {
  border-top: 1px solid #ddd;
  padding-top: 60px;
  margin-top: 50px;
}
/* お問い合わせのよくある質問タイトル囲み */
.faq_inner .c-faq-ttl__wrap {
  width: max(23%, 280px);/*280px以上*/
  flex-shrink: 0;
}

/* よくある質問タイトル囲み */
.faq_inner .faq-ttl__wrap {
  width: max(26%, 310px);/*310px以上*/
  flex-shrink: 0;
  position: relative;
}

/* アイコンなしタイトル（お問い合わせトップ） */
.faq_inner .faq-ttl {
  font-size: clamp( 1.25rem, calc( 1.02rem + 0.96vw ), 1.75rem );/* 20px - 28px */
  font-feature-settings: "palt";
  letter-spacing: 0.05em;
  line-height: 1.6;
  position: relative;
}

/* アイコン付きタイトル */
.faq_inner .faq-ttl._icon {
  padding-left: 2.5em;
}

/* タイトルの小文字 */
.faq_inner .faq-ttl ._small {
  font-size: clamp( 0.9375rem, calc( 0.79rem + 0.60vw ), 1.25rem );/* 15px - 20px */
}
.faq__wrap {
  flex: 1;
}

/* FAQアイコン */
.faq_inner .faq-ttl._icon::after {
  content: '';
  background-color: var(--c-link01);
  position: absolute;
  left: 0;
  top: -0.3em;
  display: block;
  width: 2.2em;
  height: 2.2em;
  border-radius: 100px;
  z-index: -1;
}
.faq_inner .faq-ttl._icon::before {
  content: '';
  background-color: #fff;
  position: absolute;
  left: 0.4em;
  top: 0.1em;
  display: block;
  width: 1.4em;
  height: 1.4em;
  mask-repeat: no-repeat; 
  mask-position: center;
  mask-size: contain;
}
.faq_inner .faq-ttl.icon-faq01::before {
  mask-image: url("/images/icon_products.svg");
  -webkit-mask-image: url("/images/icon_products.svg");
}
.faq_inner .faq-ttl.icon-faq02::before {
  mask-image: url("/images/icon_estimate.svg");
  -webkit-mask-image: url("/images/icon_estimate.svg");
}
.faq_inner .faq-ttl.icon-faq03::before {
  mask-image: url("/images/icon_calendar.svg");
  -webkit-mask-image: url("/images/icon_calendar.svg");
}
.faq_inner .faq-ttl.icon-faq04::before {
  mask-image: url("/images/icon_postage.svg");
  -webkit-mask-image: url("/images/icon_postage.svg");
}
.faq_inner .faq-ttl.icon-faq05::before {
  mask-image: url("/images/icon_order.svg");
  -webkit-mask-image: url("/images/icon_order.svg");
}
.faq_inner .faq-ttl.icon-faq06::before {
  mask-image: url("/images/icon_support.svg");
  -webkit-mask-image: url("/images/icon_support.svg");
}
.faq_inner .faq-ttl.icon-faq07::before {
  mask-image: url("/images/icon_business.svg");
  -webkit-mask-image: url("/images/icon_business.svg");
}

/* FAQリスト */
.faq__wrap .faq__list {}/*ul*/
.faq__wrap .faq__list .faq__group {}

/* 質問 */
.faq__wrap .faq__list .faq__group ._question {
  background-color: #fff;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5em;
  font-size: calc(15rem / 16);
  padding: 16px 20px;
  margin-bottom: 10px;
}
.faq__group ._question ._btn__txt {
  font-weight: 600;
}
.faq__group ._question ._btn__toggle {
  border: 1px solid #ccc;
  border-radius: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  transition: transform 0.2s;
}
.js-faq-accordion-btn ._btn__toggle::before,
.js-faq-accordion-btn ._btn__toggle::after {
  background-color: #ccc;
  content: "";
  display: block;
  position: absolute;
  transition: 0.2s;
}
.js-faq-accordion-btn ._btn__toggle::before {
  width: 14px;
  height: 2px;
}
.js-faq-accordion-btn ._btn__toggle::after {
  width: 2px;
  height: 14px;
}
/*トグルアイコン 回転してマイナス*/
.js-faq-accordion-btn ._btn__toggle.is-active {
  transform: rotate(90deg);
}
.js-faq-accordion-btn ._btn__toggle.is-active::before {
  width: 0;
}

/* 回答 */
.faq__wrap .faq__list .faq__group ._answer {}

/* js 制御 */
.js-faq-accordion-target {
  overflow: hidden;
  max-height: 0;
  margin: 0 20px;
  transition: 0.3s;
}
.js-faq-accordion-target.is-open {
  margin: 30px 20px 40px;
}

/*回答の中のボタン*/
.faq__wrap .faq__list .faq__group ._answer .btn {
  margin: 20px 0;
}
.faq__wrap .faq__list .faq__group ._answer .btn .btn-02 {
  min-width: 300px;
  width: max-content;
}

@media (hover: hover) {
  .faq__group ._question:hover ._btn__toggle {
    border: 1px solid var(--c-link01-hv);
  }
  .js-faq-accordion-btn:hover ._btn__toggle::before,
  .js-faq-accordion-btn:hover ._btn__toggle::after {
    background-color: var(--c-link01-hv);
  }
}

@media screen and (min-width: 768px) {
  .sec-01 {
    padding: 100px 0 80px;
  }
  .faq_inner {
    flex-direction: row;
  }
  .faq__wrap .faq__list .faq__group ._question {
    font-size: 1rem;
  }
  .js-faq-accordion-target {
    margin: 0 30px;
  }
  .js-faq-accordion-target.is-open {
    margin: 30px 30px 50px;
  }
}

/* ページ内リンク */
.faq__local-link {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 60px auto 0;
  width: 90%;
  max-width: 1200px;
}
.faq__local-link li {
  font-feature-settings: "palt";
  letter-spacing: 0.05em;
}
.faq__local-link li a {
	display: block;
	background-color: #dde1e1;
	padding: 6px 16px;
	border-radius: 6px;
	text-align: center;
  transition: 0.3s;
}
@media (hover: hover) {
  .faq__local-link li a:hover {
    background-color: #C9CDCD;
  }
}

/*
  sec-02 お問い合わせ
-----------------------------------------------*/
.sec-02 {
  background-color: var(--c-main-dark-green);
  padding: 60px 0;
}
.sec-02 .sec-ttl-02 {
  color: #fff;
  text-align: center;
}
.sec-02 .contact_inner {
  display: flex;
  flex-direction: column;
  gap: 40px 3.3%;
}
.contact_inner .contact__item {}

/* 問い合わせバナーのリンク */
.sec-02 .contact-bnr {
  display: block;
}
.sec-02 .contact-bnr ._pic {
  overflow: hidden;
}
.sec-02 .contact-bnr ._pic img {
  transition: transform .4s ease;
}
.sec-02 .contact-bnr .bn-txt {
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  gap: 1em;
  min-height: 100px;
}
.sec-02 .contact-bnr .bn-txt ._txt {
  font-size: clamp( 1.125rem, calc( 1.06rem + 0.24vw ), 1.25rem );/* 18px - 20px */
  font-weight: 700;
  line-height: 1.4;
  transition: 0.3s;
}
.sec-02 .contact-bnr .bn-txt ._s-txt {
  font-size: calc(13rem / 16);
  font-weight: normal;
}
@media (hover: hover) {
  .sec-02 .contact-bnr:hover ._pic img {
    transform: scale(1.1);
  }
  .sec-02 .contact-bnr:hover .bn-txt ._txt {
    transform: translateX(0.3em);
  }
}

@media screen and (min-width: 768px) {
  .sec-02 {
    padding: 100px 0 80px;
  }
  .sec-02 .contact_inner {
    flex-direction: row;
  }
  .contact_inner .contact__item {
    width: calc(100% * (580 / 1200));
  }
  .contact_inner .contact__item .bn-txt ._s-txt {
    font-size: calc(14rem / 16);
  }
}

/* サプライヤー向け情報 */
.sec-02 .for-suppliers {
  margin: 80px 0 0;
}
.sec-02 .for-suppliers .sec-ttl-04 {
  color: #fff;
}

/* パートナーへ */
.sec-02 .to-partner {
  color: #fff;
  margin-bottom: 30px;
}
.sec-02 .to-partner dt {
  display: inline-block;
  font-weight: 700;
  padding-right: 0.5em;
}
.sec-02 .to-partner dd {
  display: inline-block;
}

.sec-02 .supplier_inner {
  display: flex;
  flex-direction: column;
  gap: 40px 3.3%;
}
.supplier_inner .supplier__item {}

/* サプライヤー向け要件 */
.requirement__wrap {
  background-color: rgba(255,255,255,0.1);
  border-radius: 10px;
  color: #fff;
  padding: 30px;
}
.requirement {
  margin-left: 20px;
} 
.requirement li {
  list-style-type: disc;
  margin-bottom: 1em;
  line-height: 1.6;
}
.requirement li ._ttl {
  font-weight: 700;
  margin-bottom: 5px;
}
.requirement li ._s-txt {
  font-size: calc(14rem / 16);
}

@media screen and (min-width: 768px) {
  .sec-02 .supplier_inner {
    flex-direction: row;
  }
  .supplier_inner .supplier__item {
    width: calc(100% * (580 / 1200));
  }

}

/*
  sec-03 電話でのお問い合わせ
-----------------------------------------------*/
.sec-03 {
  background-color: var(--c-bg01);
  padding: 60px 0;
}
.sec-03 .sec-ttl-02 {
  text-align: center;
  margin-bottom: 0.5em;
}
.sec-03 .tel-container {
  background-color: #fff;
  border-radius: 10px;
  width: 92%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px;
  text-align: center;
}
.sec-03 .tel-container .phone {
  font-size: clamp( 1.5rem, calc( 1.32rem + 0.72vw ), 1.875rem );/* 24px - 30px */
  font-weight: 700;
}
.sec-03 .tel-container .hours {
  font-size: calc(14rem / 16);
}
@media screen and (min-width: 768px) {
  .sec-03 {
    padding: 100px 0;
  }
}

/*
  お問い合わせフォーム
-----------------------------------------------*/
.sec-contactForm {
  /*background-color: var(--c-main-dark-green);*/
  padding: 60px 0;
}
.contactForm {
  display: flex;
  flex-direction: column;
  gap: 30px 6%;
}
.contactForm__side {
}
.contactForm__main {
  background-color: #e6e9e9;
  flex: 1;
  padding: 30px 20px;
}
.contactForm__ttl {
  font-size: clamp( 1.25rem, calc( 1.13rem + 0.48vw ), 1.5rem );/* 20px - 24px */
  margin-bottom: 30px;
  font-feature-settings: "palt";
  letter-spacing: 0.05em;
}
/*フォームの説明文*/
.sec-contactForm .form__info {
  font-size: clamp( 0.9375rem, calc( 0.9rem + 0.12vw ), 1rem ); /*15px - 16px*/
  font-feature-settings: "palt";
  letter-spacing: 0.05em;
}

/*フォーム*/
.sec-contactForm .field {
  margin-bottom: 30px;
}
.sec-contactForm .field-label{
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 8px;
}
.sec-contactForm .badge-required{
  color: #fff;
  background-color: var(--c-required);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: calc(12rem / 16);
  font-weight: 600;
  letter-spacing: 0.05em;
  border-radius: 20px;
  padding: 0 6px;
  min-width: 44px;
  height: 22px;
}
.sec-contactForm .hint {
  font-size: calc(12rem / 16);
  color: #888;
  margin: 8px 0;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
select,
textarea{
  width: 100%;
  font-family: "Noto Sans JP","Helvetica Neue", Arial, sans-serif;/*記号が小さく表示されるのを回避*/
  font-size: calc(15rem / 16);
  padding: 11px 12px;
  border: 1px solid #ddd;
  border-radius: 5px;
  background: #FBFCFD;/*入力欄の背景色*/
  transition: border-color .15s ease, box-shadow .15s ease;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible{
  outline: none;
  border-color: var(--c-main-bright-green);
  box-shadow: 0 0 0 3px #d9e2e2;
}

textarea {
  min-height: 140px;
  resize: vertical;
}

select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M0 0L5 6L10 0Z' fill='%2352606D'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}

/* エラー時のボックス */
input[type="text"].error_box,
input[type="email"].error_box,
input[type="tel"].error_box,
input[type="url"].error_box,
select.error_box,
textarea.error_box {
  border: var(--c-required) 1px solid;
  background: #f7ebeb;
}

/* バリデーションエラー時 */
.error-message {
  color: var(--c-required);
  font-size: calc(14rem / 16);
  margin-top: 3px;
}
.sec-contactForm .row,
.sec-contactForm .row-narrow {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 20px;
  /*margin-bottom: 30px;*/
}

/* Radio group */
.radio-group {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  margin: 10px;
}
.radio-option {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: calc(15rem / 16);
  cursor: pointer;
}
.radio-option input[type="radio"]{
  width: 18px;
  height: 18px;
  accent-color: var(--c-link01);
  cursor: pointer;
}

/* radioボタンで表示される内容 */
.sec-contactForm .subfield {
  margin-top: 16px;
  padding: 16px 18px;
  background: #F7F9FA;
  border-left: 3px solid var(--c-link01);
  border-radius: 5px;
}
.sec-contactForm .subfield .field{
  margin-bottom: 16px;
}
.subfield .field:last-child{
  margin-bottom: 0;
}

/* 添付ファイル */
.sec-contactForm .file-upload {
  font-size: calc(14rem / 16);
  margin: 10px 0;
}
.sec-contactForm .browse_btn {
  background-color: #d3d3d3;
  padding: 6px;
  border-radius: 6px;
}

/* プライバシー同意 */
.sec-contactForm .agreement{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px;
  background: #d9e2e2;
  border-radius: 5px;
}
.sec-contactForm .agreement input[type="checkbox"]{
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--c-link01);
  cursor: pointer;
  flex-shrink: 0;
}
.sec-contactForm .agreement label {
  font-size: calc(15rem / 16);
}
.sec-contactForm .agreement a {
  color: var(--c-link01);
  font-weight: 600;
  text-decoration: underline;
  transition: 0.2s;
}
.sec-contactForm .agreement a:hover {
  color: var(--c-link01-hv);
}

/* Submit */
.sec-contactForm .submit-area {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 40px auto 0;
}
.sec-contactForm .btn-submit {
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #fff;
  background: var(--c-link01);
  border: none;
  padding: 15px;
  width:100%;
  max-width: 300px;
  cursor: pointer;
  transition: background .15s ease, transform .1s ease;
}

.sec-contactForm .btn-back {
	font-weight: 700;
  letter-spacing: 0.08em;
  color: #fff;
	background: #979797;
	border: none;
  padding: 15px;
  width: 100%;
  max-width: 300px;
  cursor: pointer;
  transition: background .15s ease, transform .1s ease;
}

.sec-contactForm .btn-submit:hover {
  background: var(--c-link01-hv);
}
.sec-contactForm .btn-back:hover {
  background: #B1B1B1;
}
.sec-contactForm .btn-submit:active,
.sec-contactForm .btn-back:active {
  transform: translateY(1px);
}
.sec-contactForm .btn-submit:focus-visible,
.sec-contactForm .btn-back:focus-visible {
  outline: 3px solid #888;
  outline-offset: 2px;
}

/* フォーム内のタイトル */
.section-head {
  border-top: 1px solid #ccc;
  margin: 20px 0;
  padding: 1em 0;
}
.section-head .field-ttl {
  display: flex;
  align-items: center;
  gap: 0.5em;
  font-size: calc(17rem / 16);
  font-weight: 600;
  line-height: 1.6;
  position: relative;
}
.section-head .field-ttl::before {
  background-color: var(--c-main-green);
  content: "";
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  flex-shrink: 0;
}

@media screen and (min-width: 768px) {
  .sec-contactForm {
    padding: 100px 0 80px;
  }
  .contactForm__main {
    padding: 40px;
  }
  .sec-contactForm .row {
    grid-template-columns: 1fr 1fr;
  }
  .sec-contactForm .row-narrow {
    grid-template-columns: 160px 1fr;
  }
  .sec-contactForm .submit-area {
    flex-direction: row;
  }
  .sec-contactForm .btn-submit {
    width: 48%;
  }
  .sec-contactForm .btn-back {
    width: 48%;
  }
}
@media screen and (min-width: 1024px) {
  .contactForm {
    flex-direction: row;
  }
  .contactForm__side {
    width: 35%;
    max-width: 380px;
    padding-top: 30px;
  }
}

/*
  確認画面
-----------------------------------------------*/
.confirm-row {
	display:flex;
  flex-wrap: wrap;
  flex-direction: column;
  gap: 5px 20px;
  padding: 20px 0;
	border-bottom: 1px solid #ccc;
}
.confirm-row .field-label {
  margin-bottom: 0;
}
/* タイトルが長い場合 */
.confirm-row .field-label.long-label {
  width: 100%;
}
.confirm-row .confirm-value {
  width: 100%;
  min-width: 0;
  overflow-wrap: break-word;
}
@media screen and (min-width: 768px) {
  .confirm-row {
    flex-direction: row;
    padding: 20px 0;
  }
  .confirm-row .field-label {
    width: 30%;
  }
  .confirm-row .confirm-value {
    flex: 1;
  }
}

/*
  完了画面
-----------------------------------------------*/
.thanks__inner {
  min-height: 300px;
}
.thanks__inner .thanks-txt01 {
  font-size: calc(20rem / 16);
  font-weight: 600;
  margin-bottom: 30px;
}