@charset "utf-8";

/**
 * 共通コンポーネント
 * ヘッダー・フッター・基本レイアウトの統一スタイル
 * TOPページ基準のデザインルール適用
 */

/* ==========================================================================
   ヘッダー（共通）
   ========================================================================== */

.header {
  background: #fff url(../images/common/pattern_dot.png);
  border-bottom: 1px solid var(--col_gray);
  display: grid;
  place-items: center;
  height: 116px;
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 900;
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: 48px;
  width: 100%;
}

.header__inner .logo {
  width: 285px;
}

.header__inner .logo a {
  display: block;
  width: 100%;
}

.header__inner .nav {
  display: flex;
  align-items: center;
  gap: 43px;
}

.header__inner .nav__item.contact {
  background: var(--col_primary);
  border: 2px solid var(--col_primary);
  border-radius: 1000px;
  color: #fff;
  padding-block: 12px;
  padding-inline: 58px 35px;
  position: relative;
  transition: background .3s ease, color .3s ease;
  will-change: background, color;
}

.header__inner .nav__item.contact:before {
  background: url(../images/common/icon_contact.svg) center/contain no-repeat;
  content: "";
  height: 20px;
  position: absolute;
  top: 50%;
  left: 30px;
  translate: 0 -50%;
  transition: filter .3s ease;
  will-change: filter;
  width: 20px;
}

@media (any-hover: hover) {
  .header__inner .nav__item.contact:hover {
    background: #fff;
    color: var(--col_primary);
  }
  
  .header__inner .nav__item.contact:hover:before {
    filter: invert(76%) sepia(100%) saturate(3111%) hue-rotate(350deg) brightness(90%) contrast(95%);
  }
}

/* ==========================================================================
   フッター（共通）
   ========================================================================== */

.footer {
  background: #252525;
  color: #fff;
  margin-top: 168px;
}

.footer__cnt {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 1fr;
  grid-template-areas: "brochure contact" "brochure tel";
}

.footer__cnt--wrap {
  display: flex;
}

.footer__cnt--wrap .lbl {
  border-right: 1px solid #3f3f3f;
  border-left: 1px solid #3f3f3f;
  height: 100%;
  display: grid;
  place-items: center;
  width: 90px;
}

.footer__cnt--wrap .lbl .icon {
  height: 30px;
  width: 30px;
}

.footer__cnt--wrap .cnt {
  display: grid;
  place-items: center start;
  grid-auto-rows: auto;
  color: #fff;
  font-size: .875rem;
  line-height: 1.5;
  padding-block: 40px;
  padding-inline: 40px;
  width: 100%;
}

.footer__cnt--wrap .cnt .ttl {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.6;
  padding-left: 24px;
  position: relative;
}

/* Icon decoration removed per user request */

.footer__cnt--wrap.brochure {
  grid-area: brochure;
}

.footer__cnt--wrap.brochure .lbl .icon {
  background: url(../images/common/icon_brochure.svg) center/contain no-repeat;
}

.footer__cnt--wrap.brochure .cnt {
  display: grid;
  place-items: center;
  row-gap: 28px;
}

.footer__cnt--wrap.brochure .cnt figure {
  width: 282px;
}

.footer__cnt--wrap.brochure .cnt .linkTxt {
  border-bottom: 1px solid rgb(255, 255, 255, .2);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  font-size: 1rem;
  line-height: 2;
  padding-bottom: 10px;
  position: relative;
}

.footer__cnt--wrap.brochure .cnt .linkTxt .icon {
  background: rgb(255, 255, 255, .2);
  border-radius: 50%;
  height: 32px;
  position: relative;
  width: 32px;
}

.footer__cnt--wrap.brochure .cnt .linkTxt .icon:before {
  background: url(../images/common/icon_arr.svg) center/contain no-repeat;
  content: "";
  height: 12px;
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  scale: -1;
  width: 12px;
}

.footer__cnt--wrap.contact {
  grid-area: contact;
}

.footer__cnt--wrap.contact .lbl .icon {
  background: url(../images/common/icon_contact.svg) center/contain no-repeat;
}

.footer__cnt--wrap.contact .cnt {
  position: relative;
}

.footer__cnt--wrap.contact .cnt:before {
  background: url(../images/common/icon_arr.svg) center/contain no-repeat;
  content: "";
  height: 14px;
  position: absolute;
  top: 50%;
  right: 40px;
  translate: 0 -50%;
  scale: -1;
  width: 14px;
}

.footer__cnt--wrap.tel {
  grid-area: tel;
  border-top: 1px solid #3f3f3f;
  pointer-events: none;
}

.footer__cnt--wrap.tel .lbl .icon {
  background: url(../images/common/icon_tel.svg) center/contain no-repeat;
}

.footer__cnt--wrap.tel .cnt .telTxt {
  font-family: var(--font_MavenPro);
  font-size: 2.5rem;
  font-weight: 700;
  letter-spacing: .02em;
}

/* フッターサイトマップ */
.footer__sitemap {
  background: #1a1a1a;
  border-top: 1px solid #3f3f3f;
  padding: 40px 48px;
}

.sitemap-nav {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  max-width: 1200px;
  margin: 0 auto;
}

.sitemap-column .sitemap-title {
  color: #fff;
  font-size: 1.125rem;
  font-weight: 700;
  margin-bottom: 20px;
  padding-left: 20px;
  position: relative;
}

/* Icon decoration removed per user request */

.sitemap-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sitemap-list li {
  margin-bottom: 10px;
}

.sitemap-list li a {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  font-size: 0.875rem;
  line-height: 1.8;
  transition: color 0.3s ease;
}

.sitemap-list li a:hover {
  color: #fff;
}

.footer__bottom {
  border-top: 1px solid #3f3f3f;
  color: rgb(255, 255, 255, .4);
  font-family: var(--font_MavenPro);
  font-size: .75rem;
  display: flex;
  justify-content: space-between;
  letter-spacing: .02em;
  padding-block: 28px;
  padding-inline: 48px;
}

.footer__bottom a {
  transition: all .3s ease;
}

@media (any-hover: hover) {
  .footer__bottom a:hover {
    color: rgb(255, 255, 255, 1);
  }
}

/* ==========================================================================
   TOPページ基準の共通セクションタイトル
   ========================================================================== */

.sectionTtl .en {
  font-family: var(--font_MavenPro);
  font-size: 5.625rem;
  font-weight: 700;
  letter-spacing: .02em;
}

.sectionTtl .ja {
  color: var(--col_primary);
  font-size: 1.25rem;
  font-weight: 700;
}

.sectionTtl .ja:before {
  background: url(../images/common/icon_circle.svg) center/contain no-repeat;
  content: "";
  display: inline-block;
  height: 14px;
  margin-inline-end: 6px;
  width: 14px;
}

/* ==========================================================================
   レスポンシブ対応
   ========================================================================== */

/* タブレット */
@media (min-width: 768px) and (max-width: 1439px) {
  .header {
    height: 8.06vw;
  }
  
  .header__inner {
    padding-inline: 3.33vw;
  }
  
  .header__inner .logo {
    width: 19.79vw;
  }
  
  .header__inner .nav {
    gap: 2.99vw;
  }
  
  .header__inner .nav__item.contact {
    border: .14vw solid var(--col_primary);
    border-radius: 69.44vw;
    padding-block: .83vw;
    padding-inline: 4.03vw 2.43vw;
  }
  
  .header__inner .nav__item.contact:before {
    height: 1.39vw;
    left: 2.08vw;
    width: 1.39vw;
  }
  
  .footer {
    margin-top: 11.67vw;
  }
  
  .footer__cnt--wrap .lbl {
    width: 6.25vw;
  }
  
  .footer__cnt--wrap .lbl .icon {
    height: 2.08vw;
    width: 2.08vw;
  }
  
  .footer__cnt--wrap .cnt {
    font-size: .97vw;
    padding-block: 2.78vw;
    padding-inline: 2.78vw;
  }
  
  .footer__cnt--wrap .cnt .ttl {
    font-size: 1.39vw;
    padding-left: 1.67vw;
  }
  
  .footer__cnt--wrap .cnt .ttl:before {
    height: 1.11vw;
    top: .63vw;
    width: 1.11vw;
  }
  
  .footer__cnt--wrap.brochure .cnt {
    row-gap: 1.94vw;
  }
  
  .footer__cnt--wrap.brochure .cnt figure {
    width: 19.58vw;
  }
  
  .footer__cnt--wrap.brochure .cnt .linkTxt {
    gap: 1.67vw;
    font-size: 1.11vw;
    padding-bottom: .69vw;
  }
  
  .footer__cnt--wrap.brochure .cnt .linkTxt .icon {
    height: 2.22vw;
    width: 2.22vw;
  }
  
  .footer__cnt--wrap.brochure .cnt .linkTxt .icon:before {
    height: .83vw;
    width: .83vw;
  }
  
  .footer__cnt--wrap.contact .cnt:before {
    height: .97vw;
    right: 2.78vw;
    width: .97vw;
  }
  
  .footer__cnt--wrap.tel .cnt .telTxt {
    font-size: 2.78vw;
  }
  
  .footer__sitemap {
    padding: 2.78vw 3.33vw;
  }
  
  .sitemap-nav {
    gap: 2.78vw;
  }
  
  .sitemap-column .sitemap-title {
    font-size: 1.25vw;
    margin-bottom: 1.39vw;
    padding-left: 1.39vw;
  }
  
  .sitemap-column .sitemap-title:before {
    height: 0.97vw;
    top: 0.56vw;
    width: 0.97vw;
  }
  
  .sitemap-list li {
    margin-bottom: 0.69vw;
  }
  
  .sitemap-list li a {
    font-size: 0.97vw;
  }
  
  .footer__bottom {
    font-size: .83vw;
    padding-block: 1.94vw;
    padding-inline: 3.33vw;
  }
  
  .sectionTtl .en {
    font-size: 6.25vw;
  }
  
  .sectionTtl .ja {
    font-size: 1.39vw;
  }
  
  .sectionTtl .ja:before {
    height: .97vw;
    margin-inline-end: .42vw;
    width: .97vw;
  }
}

/* スマートフォン */
@media only screen and (max-width: 767px) {
  .header {
    height: 21.61vw;
    position: fixed;
  }
  
  .header__inner {
    background: #fff url(../images/common/pattern_dot.png);
    height: 100%;
    padding-inline: 5.21vw;
    position: relative;
    z-index: 900;
  }
  
  .header .logo {
    width: 44.79vw;
  }
  
  .header .navTrigger {
    background: var(--col_primary);
    border-radius: 50%;
    display: grid;
    place-items: center;
    height: 14.32vw;
    position: relative;
    transition: background .3s ease;
    width: 14.32vw;
  }
  
  .footer {
    margin-top: 0;
  }
  
  .footer__cnt {
    grid-template-columns: 1fr;
    grid-template-areas: "brochure" "contact" "tel";
  }
  
  .footer__cnt--wrap .lbl {
    width: 20.83vw;
  }
  
  .footer__cnt--wrap .lbl .icon {
    height: 5.21vw;
    width: 5.21vw;
  }
  
  .footer__cnt--wrap .cnt {
    font-size: 3.65vw;
    padding-block: 7.81vw;
    padding-inline: 5.21vw;
  }
  
  .footer__cnt--wrap .cnt .ttl {
    font-size: 4.69vw;
    padding-left: 3.91vw;
  }
  
  .footer__cnt--wrap .cnt .ttl:before {
    height: 2.6vw;
    top: 1.56vw;
    width: 2.6vw;
  }
  
  .footer__cnt--wrap.brochure .cnt {
    row-gap: 5.21vw;
  }
  
  .footer__cnt--wrap.brochure .cnt figure {
    width: 58.59vw;
  }
  
  .footer__cnt--wrap.brochure .cnt .linkTxt {
    gap: 3.91vw;
    font-size: 3.91vw;
    padding-bottom: 2.6vw;
  }
  
  .footer__cnt--wrap.brochure .cnt .linkTxt .icon {
    height: 5.21vw;
    width: 5.21vw;
  }
  
  .footer__cnt--wrap.brochure .cnt .linkTxt .icon:before {
    height: 2.08vw;
    width: 2.08vw;
  }
  
  .footer__cnt--wrap.contact .cnt:before {
    height: 2.6vw;
    right: 5.21vw;
    width: 2.6vw;
  }
  
  .footer__cnt--wrap.tel .cnt .telTxt {
    font-size: 6.77vw;
  }
  
  .footer__sitemap {
    padding: 7.81vw 5.21vw;
  }
  
  .sitemap-nav {
    grid-template-columns: 1fr;
    gap: 7.81vw;
  }
  
  .sitemap-column .sitemap-title {
    font-size: 4.69vw;
    margin-bottom: 3.91vw;
    padding-left: 4.17vw;
  }
  
  .sitemap-column .sitemap-title:before {
    height: 2.6vw;
    top: 1.56vw;
    width: 2.6vw;
  }
  
  .sitemap-list li {
    margin-bottom: 2.6vw;
  }
  
  .sitemap-list li a {
    font-size: 3.65vw;
  }
  
  .footer__bottom {
    font-size: 3.13vw;
    padding-block: 5.21vw;
    padding-inline: 5.21vw;
    flex-direction: column;
    gap: 2.6vw;
    text-align: center;
  }
  
  .sectionTtl .en {
    font-size: 15.63vw;
  }
  
  .sectionTtl .ja {
    font-size: 4.17vw;
  }
  
  .sectionTtl .ja:before {
    height: 2.6vw;
    margin-inline-end: .78vw;
    width: 2.6vw;
  }
}