/**
 * 初期設定
 */

@font-face {
  font-family: "Local Noto Sans JP";
  src: local("Noto Sans JP");
}

:root {
  /* 便利系 */
  --lt: calc((1em - 1lh) / 2); /* leading-trimの略. 行間によるテキスト上下の余白の大きさ. */

  --slope-1807-1260: calc((100 * var(--vw) - 1260px) / (1807 - 1260));
  --slope-1750-1260: calc((100 * var(--vw) - 1260px) / (1750 - 1260));
  --slope-1400-1260: calc((100 * var(--vw) - 1260px) / (1400 - 1260));

  --slope-1920-420: calc((100 * var(--vw) - 420px) / (1920 - 420));
  --slope-1260-420: calc((100 * var(--vw) - 420px) / (1260 - 420));

  --triangle-top: polygon(50% 0%, 100% 100%, 0% 100%);
  --triangle-right: polygon(0% 0%, 100% 50%, 0% 100%);
  --triangle-down: polygon(0% 0%, 100% 0%, 50% 100%);
  --triangle-left: polygon(0% 50%, 100% 0%, 100% 100%);

  /* 寸法（数値） */
  --design-width-pc: 1920;
  /* --design-height-pc: ; */
  --design-width-sp: 420;
  /* --design-height-sp: ; */
  --container-width: 1200;

  /* 寸法（単位あり） */
  --vw: 1vw;
  --header-height: min(152px, 50px + 32 * var(--slope-1750-1260));

  /* 色 */
  --color-base: #000;

  /* フォント */
  --ff-base: "Local Noto Sans JP", "Noto Sans JP", sans-serif;
  --ff-roboto: "Roboto", sans-serif;
  --ff-roboto-condensed: "Roboto Condensed", sans-serif;
  --ff-roboto-mono: "Roboto Mono", monospace;
  --ff-league-spartan: "League Spartan", sans-serif;
  --ff-arial: Arial, "Helvetica Neue", Helvetica, "Segoe UI", sans-serif;
  --ff-montserrat: "Montserrat", sans-serif;
  --ff-din2014: "din-2014", sans-serif;

  /* z-index */
  --z-index-header: 100;
  
  /* 行間 */
  --line-height-base: 1.8;
  
  /* フォントサイズ */
  --font-size-18px: clamp(1.5rem,1.8vw,1.8rem);
  
  /* ベース色 */
  --font-base-color: #0075C2;
  --back-base-color: #0075C2;

  @media (max-width: 1200px) {
    --header-height: 60px;
  }
}

html {
  font-size: 62.5%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-height);
}

body {
  background-color: #fff;
  color: var(--color-base);
  font-family: var(--ff-base);
  font-weight: 400;
  line-height: 1.6;
  font-size: 1.6rem;
  overflow-wrap: break-word; /* 英単語（特にURL）が途中で改行できるように */
  line-break: normal;
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeSpeed;
  @media (min-width: 768px) {
    /* min-width: 1260px; */
  }
}

main {
  display: block;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: 1.4;
}

.l-body-inner {
  display: flow-root;
  min-height: 100dvh;
  overflow: clip;
}

.l-wrapper {
  /* ↓ ヘッダーが追従なら ↓ */
  margin-top: var(--header-height);
  @media (max-width: 1200px) {
    /* padding-top: 1px; */
  }
}

.l-main {
  display: flow-root;
  position: relative;
}

.l-inner {
  container-type: inline-size;
  width: calc(388 / 420 * 100%);
  max-width: calc(var(--container-width) * 1px);
  margin-inline: auto;
}
.l-inner--width-360 {
  width: calc(360 / 420 * 100%);
}
.l-inner--max-width-1530 {
  max-width: 1530px;
}
.l-inner--max-width-1649 {
  max-width: 1649px;
}
.l-inner--max-width-1669 {
  max-width: 1669px;
}

@media (min-width: 1200px) {
  .u-for-x-large {
    display: none !important;
  }
}

@media (max-width: 767.98px) {
  .u-for-pc {
    display: none !important;
  }
}

@media (min-width: 768px) {
  .u-for-sp {
    display: none !important;
  }
}

.u-wbr {
  word-break: keep-all; /* CJKテキストの途中で改行できないように */
}

.u-dib {
  display: inline-block;
}

.u-form-reset {
  appearance: none;
  display: block;
  width: -webkit-fill-available;
  width: stretch;
  border: none;
  border-radius: 0;
  padding: 0;
  background: none;
  box-shadow: none;
  text-align: inherit;
}

@media (min-width: 1024.02px) {
  a[href^="tel:"] {
    pointer-events: none;
  }
}

.simplebar-content-wrapper {
  overscroll-behavior: none;
}

.swiper-wrapper {
  cursor: grab;
  &:active {
    cursor: grabbing;
  }
}

/**
 * ヘッダー
 */

.l-header {
  height: var(--header-height);
  background-color: #fff;
  position: relative;
  position: fixed;
  top: 0;
  inset-inline: 0;
  z-index: var(--z-index-header);
}
.l-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 92%;
  max-width: none;
  height: 100%;
  @media (max-width: 1200px) {
    width: 96%;
  }
}
.l-header__logo {
  display: block;
  position: relative;
  z-index: 1;
  &:hover {
    opacity: 0.8;
  }
  img {
    width: min(264px, 230px + 34 * var(--slope-1750-1260));
    @media (max-width: 1200px) {
      width: 178px;
    }
  }
}
.l-header__body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  @media (max-width: 1200px) {
    display: none;
    background-color: #3ca2de;
    position: fixed;
    inset-block: var(--header-height) 0;
    inset-inline: 0;
    color: #fff;
    overflow-y: auto;
  }
}







.l-header__nav {
  height: 100%;
  @media (max-width: 1200px) {
    height: auto;
  }
}
.l-header__nav-list {
  display: grid;
  grid-auto-columns: minmax(0, auto);
  grid-auto-flow: column;
  align-items: center;
  column-gap: min(54px, 24px + 30 * var(--slope-1750-1260));
  height: 100%;
  @media (max-width: 1200px) {
    grid-auto-flow: row;
    column-gap: 0;
    height: auto;
    border-bottom: 1px solid #fff;
  }
}

.l-header__nav-item {
  height: 100%;
  @media (max-width: 1200px) {
    border-top: 1px solid #fff;
    height: auto;
  }
}
.l-header__nav-item--recruit {
  height: auto;
  background-color: #0075c2;
  border: 1px solid #707070;
  border-radius: 5px;
  @media (max-width: 1200px) {
    border: none;
    border-top: 1px solid #fff;
  }
}
.l-header__nav-link--recruit {
  padding: 8px 20px 8px;
  color: #fff;
  font-weight: 700;
  font-size: clamp(1.4rem, 1.8vw, 1.8rem);
  &::after {
    content: "";
    flex-shrink: 0;
    display: block;
    width: calc(12.227 / 14 * 1em);
    aspect-ratio: 12.227 / 10.283;
    height: fit-content;
    margin-top: 6px;
    margin-left: 8px;
    background-color: #fff;
    mask: url(../img/common/icon-external.svg) no-repeat center center / contain;
    @media (max-width: 1200px) {
      background-color: #fff;
    }
  }
}
.l-header__nav-link-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: calc(10.9 / 18 * 1em);
  height: 100%;
  @media (max-width: 1200px) {
    column-gap: 1px;
    background-color: #fff;
    height: auto;
  }
}
.l-header__nav-link {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  height: 100%;
  font-weight: 700;
  font-size: min(1.8rem, 14px + 4 * var(--slope-1750-1260));
  z-index: 1;
  @media (max-width: 1200px) {
    align-items: start;
    justify-content: start;
    padding-block: calc(14 / 14 * 1em);
    padding-inline: calc(30 / 420 * 100 * var(--vw));
    background-color: #027dc5;
    font-size: 1.4rem;
    height: auto;
  }
  &:hover {
    text-decoration: underline;
    text-underline-offset: 0.15em;
  }
  &:hover + .l-header__nav-toggle::before {
    transform: rotate(45deg);
    @media (max-width: 1200px) {
      transform: none;
    }
  }
  &:hover + .l-header__nav-toggle::after {
    transform: rotate(-45deg);
    @media (max-width: 1200px) {
      transform: rotate(45deg);
    }
  }
}
/* ✅ 追加：メガが開いている（toggleがactive）間も同じ見た目 */
.l-header__nav-toggle.is-active::before {
  transform: rotate(45deg);
  @media (max-width: 1200px) {
    transform: rotate(-45deg);
  }
}
.l-header__nav-toggle.is-active::after {
  transform: rotate(-45deg);
  @media (max-width: 1200px) {
    transform: rotate(45deg);
  }
}
.l-header__nav-toggle {
  display: block;
  width: 12px;
  aspect-ratio: 1;
  position: relative;
  height: 100%;
  @media (max-width: 1200px) {
    align-self: stretch;
    width: 62px;
    aspect-ratio: auto;
    background-color: #027dc5;
  }
  &::before {
    content: "";
    display: block;
    width: 100%;
    height: fit-content;
    border-top: 2px solid;
    margin: auto;
    position: absolute;
    inset: 0;
    transition: transform 0.4s;
    @media (max-width: 1200px) {
      content: none;
    }
  }
  &::after {
    content: "";
    display: block;
    width: 100%;
    height: fit-content;
    border-top: 2px solid;
    margin: auto;
    position: absolute;
    inset: 0;
    transform: rotate(90deg);
    transition: transform 0.4s;
    @media (max-width: 1200px) {
      width: 11px;
      aspect-ratio: 1;
      height: auto;
      min-height: fit-content;
      border-top: none;
      border-right: 2px solid;
      border-bottom: 2px solid;
      rotate: none;
      transform: rotate(45deg);
      transition:
        scale 0.4s,
        translate 0.4s;
    }
  }
  &.is-active {
    &::after {
      @media (max-width: 1200px) {
        translate: 0 25%;
        scale: 1 -1;
      }
    }
  }
}


.l-header__overlay {
  display: none;
  background-color: rgba(0, 0, 0, 0.7);
  position: fixed;
  inset-block: var(--header-height) 0;
  inset-inline: 0;
  z-index: 101;
  @media (max-width: 1200px) {
    display: none !important;
  }
}
.l-header__mega {
  display: none;
  height: fit-content;
  background-color: #007dc5;
  position: fixed;
  top: var(--header-height);
  inset-inline: 0;
  bottom: 0;
  color: #fff;
  z-index: 102;
  @media (max-width: 1200px) {
    border-top: 1px solid #fff;
    background-color: transparent;
    position: relative;
    inset: auto;
  }
  &.is-active {
    z-index: 103;
  }
}
.l-header__mega-inner {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: calc(80 / 1649 * 100%);
  padding-block: 40px;
  position: relative;
  @media (max-width: 1200px) {
    display: block;
    width: calc(360 / 420 * 100%);
    padding-block: 13px;
  }
}
.l-header__mega-media {
  @media (max-width: 1200px) {
    display: none;
  }
  img {
    width: min(328px, 260px + 68 * var(--slope-1750-1260));
  }
}
.l-header__mega-body {
  padding-top: min(15px, 10px + 5 * var(--slope-1750-1260));
  @media (max-width: 1200px) {
    padding-top: 0;
  }
}
.l-header__mega-title {
  display: flex;
  align-items: center;
  width: fit-content;
  line-height: calc(44 / 30);
  font-size: min(3rem, 2.5rem + 5 * var(--slope-1750-1260));
  @media (max-width: 1200px) {
    display: none;
  }
  &::after {
    content: "";
    display: block;
    width: 0.5em;
    aspect-ratio: 1;
    height: fit-content;
    margin-left: calc(22 / 30 * 1em);
    border-top: 1px solid;
    border-right: 1px solid;
    scale: 1 0.9;
    transform: rotate(45deg);
  }
  &:hover {
    text-decoration: underline;
    text-underline-offset: 0.15em;
  }
}
.l-header__mega-title-inner {
}
.l-header__mega-list {
  display: grid;
  /* grid-template-columns: repeat(auto-fill, min(370px, 100%)); */
  grid-template-columns: repeat(3, minmax(0, max-content));
  column-gap: calc(50 / 1649 * 100cqw);
  row-gap: min(21px, 15px + 6 * var(--slope-1750-1260));
  margin-top: min(14px, 10px + 4 * var(--slope-1750-1260));
  @media (max-width: 1200px) {
    display: block;
    margin-top: 0;
  }
}
.l-header__mega-item {
}
.l-header__mega-link {
  /* display: flex; */
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, auto);
  align-items: center;
  width: fit-content;
  max-width: 100%;
  line-height: calc(29 / 20);
  font-size: min(2rem, 1.6rem + 4 * var(--slope-1750-1260));
  @media (max-width: 1200px) {
    align-items: start;
    line-height: calc(24 / 14);
    font-size: 1.4rem;
  }
  &::before {
    @media (max-width: 1200px) {
      content: "";
      display: block;
      width: calc(10 / 14 * 1em);
      margin-top: calc(0.5lh - 0.5px);
      margin-right: calc(10 / 14 * 1em);
      border-top: 1px solid;
    }
  }
  &::after {
    content: "";
    display: block;
    width: 0.5em;
    aspect-ratio: 1;
    height: fit-content;
    margin-left: calc(22 / 30 * 1em);
    border-top: 1px solid;
    border-right: 1px solid;
    scale: 1 0.9;
    transform: rotate(45deg);
    @media (max-width: 1200px) {
      display: none;
    }
  }
  &:hover {
    text-decoration: underline;
    text-underline-offset: 0.15em;
  }
}

.l-header__nav-item--asoken {
  @media (min-width: 1200px) {
    display: none;
  }
}
.l-header__nav-item--news {
  @media (min-width: 1200px) {
    display: none;
  }
}
.l-header__nav-item--others {
  @media (min-width: 1200px) {
    display: none;
  }
}









.l-header__link-english {
  display: flex;
  align-items: center;
  margin-left: min(40px, 20px + 20 * var(--slope-1750-1260));
  border-left: 1px solid #000;
  padding-left: min(40px, 20px + 20 * var(--slope-1750-1260));
  position: relative;
  font-family: var(--ff-roboto-condensed);
  font-weight: 600;
  /* font-size: 1.8rem; */
  font-size: min(1.8rem, 14px + 4 * var(--slope-1750-1260));
  z-index: 1;
  @media (max-width: 1200px) {
    margin-left: 0;
    border-left: none;
    border-bottom: 1px solid #fff;
    padding-block: calc(14 / 14 * 1em);
    padding-inline: calc(30 / 420 * 100 * var(--vw));
    background-color: #027dc5;
    position: relative;
    font-weight: 700;
    font-size: 1.4rem;
    z-index: 1;
  }
}
.l-header__link-english::before {
  content: "";
  flex-shrink: 0;
  display: block;
  width: calc(13.8 / 18 * 1em);
  height: fit-content;
  aspect-ratio: 1;
  margin-right: calc(6.7 / 18 * 1em);
  background-color: #666;
  mask: url(../img/common/icon-global.svg) no-repeat center center / contain;
  @media (max-width: 1200px) {
    background-color: currentColor;
  }
}

.l-burger {
  width: 60px;
  height: var(--header-height);
  margin-left: auto;
  margin-right: calc(50cqw - 50 * var(--vw));
  position: relative;
  background-color: #0075c2;
}
@media screen and (min-width: 1200.02px) {
  .l-burger {
    display: none;
  }
}
.l-burger__bar {
  width: 32px;
  height: fit-content;
  margin: auto;
  border-radius: 1px;
  border-top: 2px solid #fff;
  position: absolute;
  inset: 0;
  transition:
    translate 0.4s,
    rotate 0.4s,
    opacity 0.4s;
  &:nth-child(1) {
    translate: 0 -10px;
    .l-burger.is-active & {
      translate: none;
      rotate: 45deg;
    }
  }
  &:nth-child(2) {
    .l-burger.is-active & {
      opacity: 0;
    }
  }
  &:nth-child(3) {
    translate: 0 10px;
    .l-burger.is-active & {
      translate: none;
      rotate: -45deg;
    }
  }
}

/**
 * フッター
 */
.l-sticky-bottom {
  position: sticky;
  margin-top: 10rem;
  top: 100%;
  @media (max-width: 1200px) {
    margin-top: 50px;
  }
}

/* タイトル */
.l-gray_blue_ttl {
  background: #f5f5f5;
  font-size: clamp(1.4rem, 1.8vw, 1.8rem);
  font-weight: bold;
  position: relative;
  padding: 14px 30px;
  @media (max-width: 767.98px) {
    font-size: 1.4rem;
  }
}

.l-gray_blue_ttl::before {
  content: "";
  background: #027dc5;
  display: inline-block;
  width: 12px;
  height: 100%;
  top: 0px;
  left: 0px;
  position: absolute;
}

.l-blue_txt_ttl {
  font-size: clamp(2rem, 3vw, 3rem);
  font-weight: bold;
  color: #027dc5;
  @media (max-width: 767.98px) {
    font-size: 2rem;
  }
}

.l-blue_mark_ttl {
  font-size: clamp(2rem, 3vw, 3rem);
  font-weight: bold;
  display: flex;
  align-items: center;
  @media (max-width: 767.98px) {
    font-size: 2rem;
  }
  &::before {
    content: "";
    background: #027dc5;
    display: inline-block;
    width: 10px;
    height: 62px;
    margin-right: 20px;
    @media (max-width: 767.98px) {
      height: 40px;
      margin-right: 10px;
    }
  }
}

.l-blue_mark_s_ttl {
  font-size: clamp(1.4rem, 1.8vw, 1.8rem);
  font-weight: bold;
  display: flex;
  align-items: center;
  color: #0075C2;
  @media (max-width: 767.98px) {
    font-size: 1.4rem;
  }
  &::before {
    content: "";
    background: #027dc5;
    display: inline-block;
    width: 10px;
    height: 43px;
    margin-right: 20px;
    @media (max-width: 767.98px) {
      height: 40px;
      margin-right: 10px;
    }
  }
}

.l-line_ttl {
  color: #000;
  font-size: clamp(2rem, 3vw, 3rem);
  font-weight: 500;
  position: relative;
  padding-bottom: clamp(10px, 2vw, 20px);
  border-bottom: 3px solid #cccccc;
  @media (max-width: 767.98px) {
    font-size: 2rem;
  }
  &::after {
    content: "";
    background: #0075c2;
    display: inline-block;
    max-width: 250px;
    width: 30%;
    height: 3px;
    left: 0px;
    bottom: -3px;
    position: absolute;
  }
}

.l-blue_box_ttl {
  background: #0075c2;
  color: #fff;
  font-size: clamp(1.4rem, 1.8vw, 1.8rem);
  font-weight: 600;
  padding: 10px 50px;
  text-align: center;
  line-height: 130%;
  left: 50%;
  transform: translateX(-50%);
  position: relative;
  display: inline-block;
  @media (max-width: 767.98px) {
    font-size: 1.4rem;
  }
}

.l-gray_box_ttl {
	font-size: clamp(1.4rem,1.8vw,1.8rem);
	font-weight: bold;
	color: #0075C2;
	background: #F4F4F4;
	width: auto;
	padding-block: clamp(10px,2vw,18px);
	padding-inline: 2vw;
	display: inline-flex;
	justify-content: center;
	@media (max-width: 767.98px) {
    display: flex;
    align-items: center;
    width: fit-content;
		padding-inline: 5vw;
    text-align: center;
    font-size: 1.4rem;
	}
}

.l-blue_line_ttl {
	font-size: clamp(2rem,3vw,3rem);
	font-weight: bold;
	letter-spacing: 0.035em;
	border-bottom: 5px solid #80BEE2;
	padding-bottom: 20px;
	@media (max-width: 767.98px) {
		padding-bottom: 10px;
    font-size: 2rem;
	}
}


/* アソケン */
.c-asoken {
  margin-bottom: 100px;
  @media (max-width: 767.98px) {
    margin-bottom: 5rem;
  }
}
.c-asoken__inner {
}
.c-asoken__link {
  display: block;
}
.c-asoken__link:hover {
  opacity: 0.8;
}
.c-asoken__img {
}

/* Aso Cement Network */
.c-network {
  margin-top: 24px;
  @media (max-width: 767.98px) {
    margin-top: 20px;
  }
}
.c-network__inner {
}
.c-network__box {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding-inline: 2.2%;
  background: url(../img/common/network-bg.jpg) no-repeat center center / cover;
  @media (max-width: 767.98px) {
    grid-template-columns: minmax(0, auto);
    background: none;
    padding-inline: 0;
  }
}
.c-network__box::before {
  content: "";
  display: block;
  @media (max-width: 767.98px) {
    aspect-ratio: 360 / 69;
    background: url(../img/common/network-bg.jpg) no-repeat center center / cover;
  }
}
.c-network__body {
  padding-block: 31px 29px;
  @media (max-width: 767.98px) {
    padding-block: 3.5px 18.5px;
    padding-inline: 5cqw;
    background-color: #000;
  }
}
.c-network__title {
  color: #027dc5;
  font-family: var(--ff-roboto);
  font-weight: 500;
  line-height: calc(38 / 29);
  font-size: 2.9rem;
  text-align: center;
  @media (max-width: 767.98px) {
    font-size: 2rem;
  }
}
.c-network__list {
  display: grid;
  grid-template-columns: minmax(0, auto);
  row-gap: 16px;
  margin-top: 16px;
  @media (max-width: 767.98px) {
    row-gap: 8px;
    justify-content: center;
    margin-top: 5px;
  }
}
.c-network__item {
}
.c-network__item-link {
  display: grid;
  place-content: center;
  max-width: 493px;
  margin-inline: auto;
  border: 1px solid #707070;
  border-radius: 5em;
  padding-block: calc(10.5 / 20 * 1em);
  color: #fff;
  font-weight: 500;
  line-height: calc(27 / 20);
  font-size: 2rem;
  text-align: center;
  transition:
    background-color 0.3s,
    color 0.3s,
    border-color 0.3s;
  @media (max-width: 767.98px) {
    max-width: none;
    padding-inline: 20px;
    font-size: 1.4rem;
  }
}
.c-network__item-link:hover {
  border-color: #fff;
  background-color: #fff;
  color: #000;
}

/* カタログ・安全データシート */
.c-catalog {
  margin-top: 129px;
  background-color: #18a3b2;
  color: #fff;
  @media (max-width: 767.98px) {
    margin-top: 34px;
  }
}
.c-catalog__inner {
}
.c-catalog__link {
  display: grid;
  grid-template: "sample ..... title ..... after" / auto 33fr minmax(0, auto) 354fr auto 68fr;
  align-items: center;
  @media (max-width: 767.98px) {
    grid-template-columns: auto 20fr minmax(0, auto) 52fr auto 5fr;
  }
}
.c-catalog__link:hover {
  opacity: 0.8;
}
.c-catalog__link::after {
  grid-area: after;
  content: "";
  display: block;
  width: 84px;
  height: fit-content;
  aspect-ratio: 1;
  background-color: currentColor;
  mask: url(../img/common/icon-arrow-catelog.svg) no-repeat center center / contain;
  @media (max-width: 767.98px) {
    width: 42px;
    mask-image: url(../img/common/icon-arrow-catelog-sp.svg);
  }
}
.c-catalog__sample {
  grid-area: sample;
  @media (max-width: 767.98px) {
    margin-left: calc(-11 / 420 * 100 * var(--vw));
  }
  img {
    @media (max-width: 767.98px) {
      width: 151px;
    }
  }
}
.c-catalog__title {
  grid-area: title;
  font-weight: 700;
  line-height: calc(52 / 36);
  font-size: 3.6rem;
  @media (max-width: 767.98px) {
    line-height: calc(20 / 16);
    font-size: 1.6rem;
  }
}

.l-cta {
  border-top: 1px solid #707070;
}
.l-cta__inner {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  justify-content: space-between;
  @media (max-width: 1200px) {
    display: block;
  }
}
.l-cta__body {
  padding-block: 89px 84.9px;
  @media (max-width: 1200px) {
    padding-block: 24px 32px;
  }
}
.l-cta__title {
  font-weight: 700;
  line-height: calc(54 / 36.79);
  font-size: min(3.7rem, 3.3rem + 4 * var(--slope-1400-1260));
  @media (max-width: 1200px) {
    font-size: 1.8rem;
    text-align: center;
  }
}
.l-cta__subtitle {
  color: #007dc5;
  font-family: var(--ff-montserrat);
  font-weight: 300;
  line-height: calc(43 / 34.63);
  font-size: 3.463rem;
  @media (max-width: 1200px) {
    margin-top: calc(2.5 / 17 * 1em);
    font-size: 1.7rem;
    text-align: center;
  }
}
.l-cta__btn {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, auto));
  align-items: center;
  justify-content: space-between;
  max-width: 478.7px;
  margin-top: 31.3px;
  border: 2px solid #007dc5;
  border-radius: 5em;
  padding-block: 24px;
  padding-inline: 62.6px;
  background-color: #007dc5;
  color: #fff;
  line-height: calc(29 / 20);
  font-size: 2rem;
  transition:
    background-color 0.3s,
    color 0.3s;
  @media (max-width: 1200px) {
    width: fit-content;
    max-width: none;
    margin-top: calc(16.7 / 16 * 1em);
    margin-inline: auto;
    border-width: 1px;
    padding-block: 12px;
    padding-inline: 32px 20px;
    font-size: 1.6rem;
  }
  &:hover {
    background-color: #fff;
    color: #007dc5;
  }
  &::after {
    content: "";
    display: block;
    width: 55.514px;
    aspect-ratio: 55.514 / 51.388;
    background-color: currentColor;
    mask: url(../img/common/icon-arrow-cta.svg) no-repeat center center / contain;
    @media (max-width: 1200px) {
      width: calc(29 / 16 * 1em);
      mask-image: url(../img/common/icon-arrow-cta-sp.svg);
      margin-left: 13px;
    }
  }
}
.l-cta__photo {
  margin-left: auto;
  margin-right: calc(50cqw - 50 * var(--vw));
  @media (max-width: 1200px) {
    display: none;
  }
  img {
    height: 100%;
    object-fit: cover;
  }
}

/* フッター */
.l-footer {
  background-color: #f0f2f2;
  color: #333;
}
.l-footer__inner {
}
.l-footer__group {
  padding-block: 90px 80px;
  @media (max-width: 1200px) {
    padding-block: 38px 35px;
  }
}
.l-footer__group-link {
  display: block;
  width: fit-content;
  margin-inline: auto;
  &:hover {
    opacity: 0.8;
  }
}
.l-footer__group-img {
  img {
    @media (max-width: 1200px) {
      width: 240px;
    }
  }
}
.l-footer__logos {
  display: flex;
  flex-wrap: wrap;
  gap: 25px;
  padding-block: 140px 0;
  --max-width: 1347px;
  padding-inline: max(0px, (100% - var(--max-width)) / 2);
  @media (max-width: 1200px) {
    padding-block: 13px;
    justify-content: center;
  }
}
.l-footer__logos-item {
}
.l-footer__logos-item-link {
  display: grid;
  place-content: center;
  width: 334.3px;
  height: 110.12px;
  border: 1px solid #ccc;
  background-color: #fff;
  @media (max-width: 1200px) {
    width: 185px;
    height: 61px;
    border: none;
  }
}
.l-footer__logos-item-link:hover {
  opacity: 0.8;
}
.l-footer__logos-item-img {
  width: 100%;
}
.l-footer__info {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, auto);
  align-items: center;
  justify-content: start;
  column-gap: 46px;
  padding-block: 70px 28.8px;
  --max-width: 1347px;
  padding-inline: max(0px, (100% - var(--max-width)) / 2);
  @media (max-width: 1200px) {
    grid-auto-flow: row;
    justify-content: stretch;
    padding-block: 25px 15px;
  }
}
.l-footer__logo {
  @media (max-width: 1200px) {
    margin-inline: auto;
  }
  &:hover {
    opacity: 0.8;
  }
  img {
    @media (max-width: 1200px) {
      width: 242px;
    }
  }
}
.l-footer__contact {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, max-content);
  align-items: center;
  column-gap: 46px;
  @media (max-width: 1200px) {
    display: none;
    grid-auto-flow: row;
  }
}
.l-footer__address {
}
.l-footer__tel {
}
.l-footer__fax {
}
.l-footer__nav {
  display: grid;
  grid-auto-columns: minmax(0, auto);
  grid-template:
    "about company product sustainability  others "
    "about company product sustainability policy "
    "..... extra   extra recruit recruit"
    "..... ....... ........ english english";
  justify-content: space-between;
  row-gap: 14px;
  column-gap: min(16px, 12px + 4 * var(--slope-1807-1260));
  border-top: 1px solid #fff;
  padding-block: 34px 50px;
  @media (max-width: 1200px) {
    display: flex;
    flex-direction: column;
    row-gap: 0;
    padding-block: 0 29px;
  }
}
.l-footer__nav-group {
}

.l-footer__nav-group--about {
  grid-area: about;
}
.l-footer__nav-group--product {
  grid-area: product;
}
.l-footer__nav-group--sustainability {
  grid-area: sustainability;
}
.l-footer__nav-group--company {
  grid-area: company;
  @media (max-width: 1200px) {
  }
}
.l-footer__nav-group--others {
  grid-area: others;
}
.l-footer__nav-group--recruit {
  grid-area: recruit;
  align-self: end;
  @media (max-width: 1200px) {
    order: 1;
    align-self: stretch;
  }
}
.l-footer__nav-group--policy {
  grid-area: policy;
}
.l-footer__nav-group--extra {
  grid-area: extra;
  display: grid;
  grid-template-columns: subgrid;
  align-self: end;
  @media (max-width: 1200px) {
    display: block;
  }
}
.l-footer__nav-group--english {
  grid-area: english;
  margin-left: 70px;
  @media (max-width: 1200px) {
    order: 2;
    margin-left: 0;
    margin-inline: calc(50cqw - 50 * var(--vw));
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
  }
}

.l-footer__nav-list {
  display: grid;
  grid-template-columns: minmax(0, auto);
  row-gap: 24.8px;
  @media (max-width: 1200px) {
    display: block;
    margin-inline: calc(50cqw - 50 * var(--vw));
  }
}
.l-footer__nav-item {
  @media (max-width: 1200px) {
    border-bottom: 1px solid #fff;
  }
}
.l-footer__nav-item--has-child {
  @media (max-width: 1200px) {
  }
}
.l-footer__nav-link-wrap {
  display: contents;
  @media (max-width: 1200px) {
    display: grid;
    column-gap: 1px;
    grid-template-columns: minmax(0, 1fr) minmax(0, auto);
    background-color: #fff;
  }
}
.l-footer__nav-link {
  display: block;
  width: fit-content;
  max-width: 100%;
  color: #007dc5;
  font-weight: 700;
  line-height: calc(26 / 18);
  font-size: min(1.8rem, 1.6rem + 2 * var(--slope-1807-1260));
  letter-spacing: 0.039em;
  text-underline-offset: 2px;
  @media (max-width: 1200px) {
    width: auto;
    padding-block: calc(15 / 14 * 1em);
    padding-inline: calc(30 / 420 * 100 * var(--vw));
    background-color: #027dc5;
    color: #fff;
    font-size: 1.4rem;
    letter-spacing: 0;
  }
  &:hover {
    text-decoration: underline;
  }
}
.l-footer__nav-link--external {
  display: flex;
  align-items: center;
  &::after {
    content: "";
    flex-shrink: 0;
    display: block;
    width: calc(12.227 / 18 * 1em);
    aspect-ratio: 12.227 / 10.283;
    height: fit-content;
    margin-left: 10px;
    background-color: #666;
    mask: url(../img/common/icon-external.svg) no-repeat center center / contain;
    @media (max-width: 1200px) {
      background-color: #fff;
    }
  }
}
.l-footer__nav-link--english {
  display: flex;
  align-items: center;
  @media (max-width: 1200px) {
    justify-content: center;
    padding-block: calc(12 / 18 * 1em);
    background-color: transparent;
    color: #0075c2;
    font-size: 1.8rem;
    text-align: center;
  }
  &::before {
    content: "";
    flex-shrink: 0;
    display: block;
    width: calc(13.8 / 18 * 1em);
    aspect-ratio: 1;
    height: fit-content;
    margin-right: calc(6.7 / 18 * 1em);
    background-color: #666;
    mask: url(../img/common/icon-global.svg) no-repeat center center / contain;
  }
}
.l-footer__nav-toggle {
  display: none;
  @media (max-width: 1200px) {
    display: block;
    width: 62px;
    background-color: #027dc5;
    position: relative;
  }

  &::after {
    content: "";
    display: block;
    width: 11px;
    min-height: fit-content;
    aspect-ratio: 1;
    margin: auto;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    position: absolute;
    inset: 0;
    rotate: none;
    transform: rotate(45deg);
    transition:
      scale 0.4s,
      translate 0.4s;
  }
  &.is-active {
    &::after {
      @media (max-width: 1200px) {
        translate: 0 25%;
        scale: 1 -1;
      }
    }
  }
}
.l-footer__nav-sublist {
  display: grid;
  grid-template-columns: minmax(0, auto);
  row-gap: 9px;
  @media (max-width: 1200px) {
    display: none;
    border-top: 1px solid #fff;
    padding-inline: calc(30 / 420 * 100 * var(--vw));
    background-color: #3ca2de;
    color: #fff;
  }
  &::before,
  &::after {
    @media (max-width: 1200px) {
      content: "";
      display: block;
      height: 13px;
    }
  }
  &:nth-child(n + 2) {
    margin-top: 26.8px;
    @media (max-width: 1200px) {
      margin-top: 0;
    }
  }
  .l-footer__nav-group--extra & {
    grid-column: 1 / -1;
    grid-template-rows: repeat(2, auto);
    grid-template-columns: subgrid;
  }
}
/* .l-footer__nav-sublist--sp-default {
  @media (max-width: 767.98px) {
    display: flex !important;
    flex-wrap: wrap;
    row-gap: 13px;
    margin-top: 13px;
    background-color: transparent;
    border-top: none;
    padding-block: 0;
    padding-inline: 0;
    color: var(--color-base);
  }
  &::before,
  &::after {
    @media (max-width: 767.98px) {
      content: none;
    }
  }
} */
.l-footer__nav-subitem {
  .l-footer__nav-sublist--sp-default & {
    @media (max-width: 1200px) {
      min-width: 50%;
      flex-grow: 1;
    }
  }
}
.l-footer__nav-sublink {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: start;
  width: fit-content;
  max-width: 100%;
  line-height: calc(24 / 16);
  font-size: min(1.6rem, 1.3rem + 3 * var(--slope-1807-1260));
  text-underline-offset: 2px;
  @media (max-width: 1200px) {
    line-height: calc(24 / 14);
    font-size: 1.4rem;
  }
  .l-footer__nav-sublist--sp-default & {
    @media (max-width: 1200px) {
      line-height: calc(16 / 11);
      font-size: 1.4rem;
    }
  }
  &::before {
    content: "";
    flex-shrink: 0;
    display: block;
    width: calc(10 / 16 * 1em);
    margin-top: calc(0.5lh - 0.5px);
    margin-right: calc(4 / 16 * 1em);
    border-top: 1px solid;
    @media (max-width: 1200px) {
      width: calc(10 / 14 * 1em);
      margin-right: calc(10 / 14 * 1em);
    }
    .l-footer__nav-sublist--sp-default & {
      @media (max-width: 1200px) {
        margin-right: calc(6 / 11 * 1em);
      }
    }
  }
  &:hover {
    text-decoration: underline;
  }
}

.l-footer__nav-sublink--message {
  display: flex;
  gap: 5px;
}

.icon-new {
  width: 12px;
  height: 12px;
  margin-top: 6px;
  margin-left: 7px;

  -webkit-mask-image: url(../img/common/icon-new.svg);
	-webkit-mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;

	mask-image: url(../img/common/icon-new.svg);
	mask-size: contain;
	mask-repeat: no-repeat;
	mask-position: center;

  background-color: #666666;

  @media (max-width: 1200px) {
    background-color: #fff;
  }
}


.l-footer__nav-mynavi {
  display: flex;
  flex-wrap: wrap;
  column-gap: 10px;
  margin-top: 8.5px;
  @media (max-width: 1200px) {
    justify-content: center;
    column-gap: 21px;
    margin-top: 27px;
    padding-bottom: 15px;
  }
}
.l-footer__nav-mynavi-item {
  max-width: calc((100% - 21px) / 2);
}
.l-footer__nav-mynavi-link {
  display: grid;
  place-content: center;
  width: min(275px, 210px + 65 * var(--slope-1807-1260));
  max-width: 100%;
  padding-inline: 4%;
  aspect-ratio: 275 / 72;
  background-color: #fff;
  @media (max-width: 1200px) {
    width: 183px;
  }
  &:hover {
    opacity: 0.8;
  }
  img {
    width: min(220px, 190px + 30 * var(--slope-1807-1260));
    @media (max-width: 1200px) {
      width: 147px;
    }
  }
}
.l-footer__copyright {
  margin-inline: calc(50cqw - 50 * var(--vw));
  padding-block: calc(20 / 14 * 1em);
  padding-inline: calc(50 * var(--vw) - 50cqw);
  background-color: #fff;
  line-height: calc(20 / 14);
  font-size: 1.4rem;
  text-align: center;
  @media (max-width: 1200px) {
    padding-block: calc(15 / 11 * 1em);
    line-height: calc(16 / 11);
    font-size: 1.1rem;
  }
  small {
    font-size: 1em;
  }
}

/**
 * 共通パーツ
 */
.c-mv__inner {
}
.c-mv__bg {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-inline: calc(50cqw - 50 * var(--vw));;
  img {
    @media (max-width: 767.98px) {
      aspect-ratio: 420 / 324;
      object-fit: cover;
    }
  }
}
.c-mv__title {
  margin-top: 54.4px;
  font-weight: 700;
  line-height: calc(72 / 50);
  font-size: clamp(2.4rem, 5vw, 5rem);
  letter-spacing: 0.08em;
  @media (max-width: 767.98px) {
    margin-top: 17px;
    font-size: 2.4rem;
  }
}

.c-mv__title.no-bg {
  margin-bottom: 10rem;
  @media (max-width: 767.98px) {
    margin-bottom: 5rem;
  }
}

/* .c-mv__subtitle {
  margin-top: 21px;
  color: #007dc5;
  font-family: var(--ff-league-spartan);
  font-weight: 700;
  line-height: calc(18 / 20);
  font-size: 2rem;
  letter-spacing: 0.1em;
  @media (max-width: 767.98px) {
    margin-top: 6px;
    font-size: 1rem;
  }
} */

.c-mv__txt {
  font-size: clamp(1.4rem, 1.8vw, 1.8rem);
  max-width: 1200px;
  width: 90%;
  margin: 0px auto;
  line-height: 200%;
  margin-top: 10rem;
  @media (max-width: 767.98px) {
    margin-top: 4rem;
    font-size: 1.4rem;
  }
}

.c-breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  column-gap: 10px;
  margin-top: 27.4px;
  line-height: calc(20 / 14);
  font-size: 1.4rem;
  letter-spacing: 0.039em;
  @media (max-width: 767.98px) {
    column-gap: 4px;
    margin-top: 11px;
    font-size: 1.1rem;
  }
  a {
    &:hover {
      text-underline-offset: 2px;
      text-decoration: underline;
    }
  }
}

/* お問い合わせフォームボタン設定 */
.form_btn {
  background: #0075c2;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  padding: 4vw 10px;
  position: relative;
  font-size: clamp(1.4rem, 1.8vw, 1.8rem);
  font-weight: bold;
  margin: 3rem auto;
  max-width: 846px;
  width: 100%;
  border: 1px solid #007;
  transition: background 0.3s, color 0.3s, border 0.3s;
  &:hover {
    background: #fff;
    color: #0075c2;
    border: 1px solid #0075c2;
  }
  &::before {
    content: "";
    mask: url(../img/common/icon-email.svg) no-repeat center center / contain;
    display: block;
    width: 34px;
    height: 25px;
    position: relative;
    background-color: currentColor;
    @media (max-width: 767.98px) {
      width: 27px;
      height: 20px;
    }
  }
}

.form_send {
  margin-block: 10rem 0px;
  @media (max-width: 767.98px) {
    margin-block: 5rem 0px;
  }
}

.form_send_txt_01 {
  font-size: clamp(1.4rem, 1.8vw, 1.8rem);
  font-weight: 600;
  color: #0075c2;
  text-align: center;
  @media (max-width: 767.98px) {
    font-size: 1.4rem;
  }
}

.form_send_txt_02 {
  display: block;
  width: fit-content;
  margin-inline: auto;
  font-size: clamp(1.2rem, 1.6vw, 1.6rem);
  font-weight: 500;
  
  @media (max-width: 767.98px) {
    font-size: 1.2rem;
  }
}

/* 会社情報 */
.p-company__link {
  display: grid;
  @media (max-width: 767.98px) {
    grid-template-columns: repeat(1, 1fr);
    gap: 0px;
  }
}

.p-company__link > dl > a {
  padding-block: clamp(3rem, 6vw, 6rem);
  display: flex;
  flex-wrap: wrap;
  gap: clamp(0rem, 3vw, 3rem);
  @media (max-width: 767.98px) {
    gap: 0px;
    width: 100%;
  }
}

.p-company__link > dl > a > * {
  @media (max-width: 767.98px) {
    width: 100%;
    justify-content: space-between;
  }
}

.p-company__link > dl > a > dt img {
  @media (max-width: 767.98px) {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.p-company__link > dl > a > dd {
  font-weight: bold;
  display: flex;
  flex-wrap: wrap;
  position: relative;
  padding-block: 3rem;
  @media (max-width: 767.98px) {
    align-items: center;
    padding-block: 1rem 0px;
  }
}

.p-company__link > dl > a > dd::after {
  content: "";
  background: url("../img/company/icon-arrow__link.svg");
  background-repeat: no-repeat;
  background-size: contain;
  display: inline-block;
  width: 39px;
  height: 6px;
  bottom: 30px;
  position: absolute;
  @media (max-width: 767.98px) {
  	width: 30px;
	height: 4px;
    right: 0px;
    bottom: 0px;
    position: relative;
  }
}

.p-company-list .p-company__link {
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem 2rem;
  @media (max-width: 767.98px) {
    grid-template-columns: repeat(2, 1fr);
  }
}

.p-company-list {
  background: #f0f2f2;
  padding-block: clamp(1rem, 12vw, 10rem);
}

.p-company-list .p-company__link > dl {
  border-bottom: 1px solid #006dbf;
}

.p-company-list .p-company__link > dl > a {
  padding-block: clamp(1rem, 6vw, 3rem);
}

.p-company-list .p-company__link > dl > a > dt {
  @media (max-width: 767.98px) {
    height: 100px;
  }
}

.p-company-list .p-company__link > dl > a > dd {
  font-size: clamp(1.6rem, 2.2vw, 2.2rem);
  @media (max-width: 767.98px) {
    font-size: 1.6rem;
  }
}

/* 製品情報 */

.c-packaging_wrap {
  background: #f8f8f8;
  padding: 3vw;
  @media (max-width: 767.98px) {
    padding: 30px 20px;
  }
}

.c-packaging_img {
  display: grid;
  place-items: center;
  margin-bottom: 3rem;
}

.c-packaging_img > dl {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  row-gap: 1rem;
  @media (max-width: 767.98px) {
    row-gap: 0rem;
    height: 200px;
  }
}

.c-packaging_img > dl > * {
  width: 100%;
  display: flex;
  justify-content: center;
}

.c-packaging_img > dl > dt {
  height: 200px;
  @media (max-width: 767.98px) {
    height: 140px;
  }
}

.c-packaging_img > dl > dt img {
  height: 100%;
  object-fit: contain;
}

.c-packaging_list li {
  font-size: clamp(1.2rem, 1.6vw, 1.6rem);
  line-height: 1.8;
  text-indent: -1em;
  margin-left: 1em;
  @media (max-width: 767.98px) {
    font-size: 1.2rem;
  }
}

.c-packaging_list li::before {
  content: "※";
}

section#caution .c-product_ttl {
  color: #000;
  display: flex;
  align-items: center;
  font-size: clamp(1.8rem,2.4vw,2.4rem);
	font-weight: 500;
	position: relative;
  padding-bottom: clamp(10px,2vw,20px);
	border-bottom: 3px solid #CCCCCC;
  @media (max-width: 767.98px) {
    font-size: 1.8rem;
  }
}

section#caution .c-product_ttl::before {
  content: "";
  background: url("../img/products/icon_caution.svg");
  background-repeat: no-repeat;
  background-size: contain;
  display: inline-block;
  width: 35px;
  height: 35px;
  margin-right: 10px;
  top: 2px;
  position: relative;
  @media (max-width: 767.98px) {
    width: 26px;
    height: 26px;
  }
}

section#caution .c-product_ttl::after {
	content: '';
	background: #0075C2;
	display: inline-block;
	max-width: 250px;
	width: 30%;
	height: 3px;
	left: 0px;
	bottom: -3px;
	position: absolute;
}

.caution_list {
  margin-top: clamp(2rem, 3vw, 4rem);
  display: grid;
  row-gap: 1rem;
}

.caution_list li {
  font-size: clamp(1.4rem, 1.8vw, 1.8rem);
  text-indent: -24px;
  margin-left: 24px;
}

.caution_list li::before {
  content: "●";
  color: #0075c2;
  margin-right: 4px;
  top: 1px;
  position: relative;
}

.product_contact_ttl {
  font-size: clamp(2rem, 3vw, 3rem);
  font-weight: 600;
  color: #0075c2;
  @media (max-width: 767.98px) {
    font-size: 2rem;
  }
}

.product_contact_wrap {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  margin-top: 2rem;
  @media (max-width: 767.98px) {
    grid-template-columns: repeat(1, 1fr);
  }
}

.product_contact_wrap > div {
  border: 2px solid #0075c2;
  font-size: clamp(1.2rem, 1.6vw, 1.6rem);
  text-align: center;
  @media (max-width: 767.98px) {
    font-size: 1.2rem;
  }
}

.product_contact_wrap > div#tel {
  padding: 3rem;
  row-gap: 6px;
}

.product_tel_ttl {
  background: #f1f9fc;
  color: #0075c2;
  text-align: center;
  padding: 1rem 2rem;
  font-size: clamp(1.2rem, 1.6vw, 1.6rem);
  font-weight: 600;
  max-width: 356px;
  width: 100%;
  margin: 0px auto;
  @media (max-width: 767.98px) {
    font-size: 1.2rem;
  }
}

.product_tel {
  font-size: clamp(2rem, 3vw, 3rem);
  font-weight: bold;
  @media (max-width: 767.98px) {
    font-size: 2rem;
  }
}

.product_tel > small {
  font-size: clamp(1.6rem, 2.2vw, 2.2rem);
  @media (max-width: 767.98px) {
    font-size: 1.6rem;
  }
}

.product_contact_wrap > div#mail {
  background: #0075c2;
  color: #fff;
  transition: background 0.3s, color 0.3s, border 0.3s;
  &:hover {
    background: #fff;
    color: #0075c2;
    border: 2px solid #0075c2;
  }
  @media (max-width: 767.98px) {
    height: 10vh;
  }
}

.product_contact_wrap > div#mail > a {
  font-size: clamp(1.6rem, 2.2vw, 2.2rem);
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  @media (max-width: 767.98px) {
    font-size: 1.6rem;
  }
}

.product_contact_wrap > div#mail > a::before {
  content: "";
  mask: url(../img/common/icon-email.svg) no-repeat center center / contain;
  display: block;
  background-color: currentColor;
  width: 34px;
  height: 28px;
  margin-right: 10px;
  top: 1px;
  position: relative;
}

/* 生コン工場・販売店・二次製品工場マップ */

.p-retailer {
  margin-top: 10rem;
  background: #f4f4f4;
  padding-block: 10rem;
  @media (max-width: 767.98px) {
    margin-top: 5rem;
    padding-block: 5rem;
  }
}

/*タブボタン*/
.tab-retailer-buttons {
  display: flex;
  align-items: stretch;
  gap: 8px;
  @media (max-width: 767.98px) {
  }
}

.tab-retailer-buttons button {
  padding: 19px 10px;
  cursor: pointer;
  background: #fff;
  border: 0px;
  font-size: clamp(1.8rem, 2.4vw, 2.4rem);
  font-weight: bold;
  color: #232323;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 30%;
  border-radius: 10px 10px 0px 0px;
  line-height: 110%;
  @media (max-width: 767.98px) {
    width: 100%;
    padding: 10px 5px;
    font-size: 1.8rem;
  }
}

.tab-retailer-buttons button.active {
  background: #0075c2;
  color: #fff;
}

/*タブコンテンツ*/
.tab-retailer-content {
  display: none;
  padding: 6rem;
  border-top: none;
  background: #fff;
  border-top: 1px solid #0075c2;
  @media (max-width: 767.98px) {
    padding: 3rem;
  }
}

.tab-retailer-content.active {
  display: block;
}

.shop_list {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 4rem;
  @media (max-width: 576px) {
    gap: 1rem 2rem;
  }
}

.shop_list li {
  font-size: clamp(1.4rem, 1.8vw, 1.8rem);
  position: relative;
  display: flex;
  @media (max-width: 767.98px) {
    font-size: 1.4rem;
  }
}

.shop_list li a {
  display: flex;
  align-items: center;
  position: relative;
  padding-left: 16px;
}

.shop_list li a::before,
.shop_list li a::after {
  content: "";
  position: absolute;
  top: calc(50% - 0px);
  left: 0px;
  width: 7px;
  height: 1px;
  border-radius: 9999px;
  background: #027dc5;
  transform-origin: calc(100% - 0px) 50%;
}

.shop_list li a::before {
  transform: rotate(45deg);
}

.shop_list li a::after {
  transform: rotate(-45deg);
}

/* 現在表示中の地域リンク */
.shop_list li a.is-current {
  color: #0075c2;
  font-weight: bold;
  text-decoration: underline;
}

.shop_list li a.is-current::before,
.shop_list li a.is-current::after {
  background: #0075c2;
}

.p-retailer_ttl {
  background: #f4f4f4;
  padding-block: 3vw;
}

.p-retailer_ttl__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px 20px;
}

.retailer_name {
  color: #027dc5;
  font-size: clamp(2rem, 3vw, 3rem);
  font-weight: 500;
}

.retailer_category {
  background: #027dc5;
  color: #fff;
  font-size: clamp(1.4rem, 1.8vw, 1.8rem);
  font-weight: bold;
  border-radius: 10px;
  padding: 6px 4vw;
  @media (max-width: 767.98px) {
    font-size: 1.4rem;
  }
}

.p-factory {
  margin-top: 10rem;
  @media (max-width: 767.98px) {
    margin-top: 5rem;
  }
}

#map_canvas {
  height: 680px;
  margin-top: 14rem;
  @media (max-width: 767.98px) {
    height: 60vw;
    margin-top: 5rem;
  }
}

.map_txt {
  margin-top: 10px;
  text-indent: -1em;
  margin-left: 1em;
  line-height: 130%;
  font-size: clamp(1.2rem, 1.6vw, 1.6rem);
  @media (max-width: 767.98px) {
    font-size: 1.2rem;
  }
  &::before {
    content: "※";
    color: #b90000;
  }
}

/* 店舗・工場ののリスト用テーブル */
.area_name {
  background: #66b1dc;
  color: #fff;
  font-size: clamp(1.4rem, 1.8vw, 1.8rem);
  padding: 8px 10px 8px 44px;
  display: flex;
  align-items: center;
  position: relative;
  @media (max-width: 767.98px) {
    font-size: 1.4rem;
  }
  &::before {
    content: "";
    background: #fff;
    display: inline-block;
    width: 9px;
    height: 60%;
    left: 20px;
    position: absolute;
  }
}

.factory_list tr {
  border-bottom: 1px solid #c1c1c1;
  padding-block: 2rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  row-gap: 10px;
}

.factory_list tr > * {
  color: #636363;
  @media (max-width: 767.98px) {
    width: 100% !important;
  }
}

.factory_list tr > th {
  width: 40%;
}

.factory_list tr > th > p {
  color: #027dc5;
  font-size: clamp(1.4rem, 1.8vw, 1.8rem);
  @media (max-width: 767.98px) {
    font-size: 1.4rem;
  }
  &::before {
    content: "■";
    color: #c1c1c1;
    margin-right: 10px;
  }
  & a {
    text-decoration: underline;
  }
}

.factory_list tr > th > span {
  font-size: clamp(1.2rem, 1.4vw, 1.4rem);
  display: block;
  margin-left: 1.5em;
  @media (max-width: 767.98px) {
    font-size: 1.2rem;
  }
}


.factory_list tr > td {
  font-size: clamp(1.4rem, 1.8vw, 1.8rem);
  @media (max-width: 767.98px) {
    font-size: 1.4rem;
  }
}

.factory_address {
  line-height: 130%;
  width: 40%;
}

.factory_tel {
  width: 20%;
  height: auto;
  display: grid;
  @media (max-width: 767.98px) {
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
  }
}

.factory_email a {
  background: #0075c2;
  display: inline-flex;
  color: #fff;
  padding: 2px 10px;
  border-radius: 5px;
}

.factory_spec {
  width: 20%;
  display: grid;
  text-align: right;
  @media (max-width: 767.98px) {
    width: 100%;
    place-items: flex-end;
  }
}

/* 生コン工場 */
.readymixplant_list tr > th {
  width: 40%;
}

.readymixplant_list .factory_address {
  width: 30%;
}

.readymixplant_list .factory_tel {
  width: 14%;
}

.readymixplant_list .factory_spec {
  width: 20%;
}

/* サステナビリティ ローカルナビ */
.c-sustainability-localnav {
  margin-bottom: clamp(60px, 10vw, 100px);
  /* padding-top: clamp(40px, 8.3vw, 83px); */
  @media (max-width: 767.98px) {
    margin-bottom: 0;
  }
}
.c-sustainability-localnav__inner {
}
.c-sustainability-localnav__title {
  margin-right: -0.07em;
  color: #0075c2;
  font-weight: 700;
  line-height: calc(44 / 30);
  font-size: clamp(2rem, 3vw, 3rem);
  letter-spacing: 0.07em;
  @media (max-width: 767.98px) {
    font-size: 2rem;
  }
}
.c-sustainability-localnav__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 382px));
  justify-content: center;
  column-gap: 27px;
  margin-top: 20px;
  @media (max-width: 767.98px) {
    grid-template-columns: minmax(0, 382px);
    column-gap: 0;
    row-gap: 20px;
  }
}
.c-sustainability-localnav__item {
  grid-row: span 2;
  display: grid;
  grid-template-rows: subgrid;
  row-gap: 0;
}
.c-sustainability-localnav__item-link {
  grid-row: span 2;
  display: grid;
  grid-template-rows: subgrid;
  padding-block: clamp(20px, 2.4vw, 37px) clamp(20px, 2.4vw, 37px);
  padding-inline: clamp(20px, 2.1vw, 21px);
  background-color: #fff;
  border: 1px solid #c1c1c1;
  position: relative;
  color: #0075c2;
  isolation: isolate;
  transition: background 0.3s, color 0.3s, border 0.3s;
  &:hover {
    background: #0075c2;
    color: #fff;
    border: 1px solid #0075c2;
  }
  &:hover .c-sustainability-localnav__item-title {
    color: #fff;
  }
  &::after {
    content: "";
    display: block;
    width: 19px;
    min-height: fit-content;
    aspect-ratio: 1;
    background: linear-gradient(to right bottom, transparent calc(50% - 0.5px), #0075c2 calc(50% + 0.5px));
    position: absolute;
    right: 0;
    bottom: 0;
    translate: -6px -6px;
    transition: translate 0.3s;
  }
  &:hover::after {
    translate: 0 0;
    background: linear-gradient(to right bottom, transparent calc(50% - 0.5px), #fff calc(50% + 0.5px));
  }
}
.c-sustainability-localnav__item-media {
  overflow: clip;
  img {
    transition: scale 0.3s;
    .c-sustainability-localnav__item-link:hover & {
      scale: 1.05;
    }
  }
}
.c-sustainability-localnav__item-title {
  font-weight: 600;
  line-height: calc(34 / 26);
  font-size: clamp(1.4rem, 1.8vw, 1.8rem);
  @media (max-width: 767.98px) {
    font-size: 1.4rem;
  }
}

/* ページ冒頭部分 */
.p-intro {
  margin-block: 10rem;
  @media (max-width: 767.98px) {
    margin-block: 6rem 0;
  }
}
.p-intro__inner {
}

.p-intro__ttl {
  color: #0075c2;
  font-size: clamp(1.8rem, 2.4vw, 2.4rem);
  font-weight: 600;
  letter-spacing: 0.08em;
  margin-bottom: 1vw;
  @media (max-width: 767.98px) {
    margin-bottom: 2rem;
    font-size: 1.8rem;
  }
  span {
    color: #0075c2;
  }
  .p-intro__line {
  	  border-bottom: 5px solid #80BEE2;
  }
}

.p-intro__desc {
  line-height: calc(32 / 18);
  font-size: clamp(1.4rem, 1.8vw, 1.8rem);
  @media (max-width: 767.98px) {
    font-size: 1.4rem;
  }
}

.p-sec__wrap {
	display: grid;
	row-gap: 1vw;
	margin-block: 2rem;
	@media (max-width: 767.98px) {
		row-gap: 2rem;
		margin-block: 5vw;
	}
}

.p-sec__ttl {
  color: #0075c2;
  font-size: clamp(1.8rem,2.4vw,2.4rem);
  letter-spacing: 0.035em;
  font-weight: bold;
  @media (max-width: 767.98px) {
    font-size: 1.8rem;
  }
  span {
    color: #0075c2;
  }
  .u-for-co2 {
	font-weight: normal;
  }
}

.p-sec__sub_ttl {
	font-size: clamp(2rem,3vw,3rem);
	font-weight: bold;
  @media (max-width: 767.98px) {
    font-size: 2rem;
  }
}

.p-sec__desc {
  line-height: calc(32 / 18);
  font-size: clamp(1.4rem,1.8vw,1.8rem);
  text-align: justify;
  @media (max-width: 767.98px) {
    font-size: 1.4rem;
  }
}


/* 画像ボックス */
.img_box {
	display: grid;
	margin-block: 5rem;
	gap: 3vw 3rem;
	@media (max-width: 767.98px) {
		gap: 3rem 3rem;
	}
	&.three_box {
		grid-template-columns: repeat(3,1fr);
	}
	&.half_box {
		grid-template-columns: repeat(2,1fr);
	}
	@media (max-width: 599.98px) {
		grid-template-columns: repeat(1,1fr) !important;
		margin-block: 3rem;
	}
	li {
		display: grid;
		row-gap: 2rem;
		place-items: center;
		@media (max-width: 767.98px) {
			row-gap: 1rem;
		}
		picture {
			width: 100%;
			@media (max-width: 599.98px) {
				width: 80%;
			}
			img {
				width: 100%;
			}
		}
		p {
			font-size: clamp(1.6rem,1.8vw,1.8rem);
			line-height: calc(34 / 18);
			letter-spacing: 0.08em;
			font-weight: bold;
		}
	}
}

.p-products__cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	row-gap: 25px;
	column-gap: 25px;
	margin-top: 40px;
	@media (max-width: 767.98px) {
	  grid-template-columns: repeat(1, minmax(0, 1fr));
	  row-gap: 25px;
	  /* width: calc(360 / 420 * 100 * var(--vw)); */
	  /* margin-inline: auto; */
	}
  }
  .p-products__card {
	  background: #fff;
  }
  .p-products__card-link {
	display: block;
	padding-block: 40px 35px;
	padding-inline: min(30px, 30 / 383 * 100%);
	border: 1px solid #007dc5;
	position: relative;
	isolation: isolate;
	transition: background 0.3s, color 0.3s, border 0.3s;
	&:hover {
		background: #0075C2;
		color: #fff;
		border: 1px solid #0075C2;
	}
	&:hover .p-products__card-title {
		color: #fff;
	}
  }
  .p-products__card-link::after {
	content: "";
	display: block;
	width: 20px;
	aspect-ratio: 1;
	background: linear-gradient(to right bottom, transparent calc(50% - 0.5px), #007dc5 calc(50% + 0.5px));
	position: absolute;
	right: 0;
	bottom: 0;
	z-index: 1;
	translate: -6px -6px;
	transition: translate 0.3s;
  }
  .p-products__card-link:hover::after {
	translate: none;
	background: linear-gradient(to right bottom, transparent calc(50% - 0.5px), #fff calc(50% + 0.5px));
  }
  .p-products__no-padding {
	padding: 0;
  }
  .p-products__card-title {
	margin-top: calc(3.3 / 20 * 1em);
	color: #007dc5;
	padding-bottom: 7px;
	font-weight: 700;
	line-height: calc(29 / 20);
	font-size: clamp(1.6rem,1.8vw,1.8rem);
	@media (max-width: 767.98px) {
	  font-size: 1.6rem;
	}
  }
  
  .p-products__card-title > small {
	  font-size: clamp(1.2rem,1.6vw,1.6rem);
    @media (max-width: 767.98px) {
      font-size: 1.2rem;
    }
  }
  
  
  .p-products__card-desc {
	margin-top: calc(0 / 50 * 1em);
	margin-bottom: 10px;
	line-height: calc(24 / 16);
	font-size: clamp(1.2rem,1.6vw,1.6rem);
	@media (max-width: 767.98px) {
	  font-size: 1.2rem;
	}
  }



/* トップページ
----------------------------------------------- */

.top-fv {
  position: relative;
  height: 100vh;
}

.top-fv::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
}

.top-fv-video {
  width: 100%;
  height: 100%;
}

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

.top-fv-title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  max-width: 1530px;
  padding-inline: 20px;
  @media (max-width: 767.98px) {
    width: 60%;
  }
  @media (max-width: 576px) {
    width: 80%;
  }
}

.top-fv-link {
  position: absolute;
  right: 50%;
  bottom: 6.75%;
  transform: translateX(50%);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4rem;
  width: 100%;
  max-width: 525px;
  padding: 10px 15px 10px 20px;
  background: #0075C2;
  border-radius: 10px;
  transition: opacity 0.3s;
  &:hover {
    opacity: 0.8;
  }
  @media (max-width: 767.98px) {
    right: 50%;
    transform: translateX(50%);
  }
  @media (max-width: 576px) {
    gap: 2rem;
    width: 90%;
  }
}

.top-fv-link-flex {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.top-fv-link-item--top {
  color: #fff;
  font-size: clamp(2rem, 2.6vw, 2.6rem);
  font-weight: bold;
  line-height: calc(44 / 26);
  letter-spacing: 0.035em;
  @media (max-width: 767.98px) {
    font-size: 2rem;
  }
}

.top-fv-link-item--bottom {
  color: #fff;
  font-size: clamp(1.2rem, 2.2vw, 2.2rem);
  font-weight: 400;
  line-height: calc(44 / 22);
  letter-spacing: 0.035em;
  @media (max-width: 767.98px) {
    font-size: 1.2rem;
  }
}

.top-fv-link-icon {
  width: 40px;
  height: 40px;
  @media (max-width: 576px) {
    width: 30px;
    height: 30px;
  }
}

/* トップニュース
----------------------------------------------- */

.top-news {
  padding-block: 100px 80px;
  background: #F1F9FC;
  @media (max-width: 767.98px) {
    padding-block: 5rem 3rem;
  }
}

.top-common__inner {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 20px;
}

.top-common__inner--news {
  display: flex;
  /* gap: 8rem; */
  @media (max-width: 767.98px) {
    flex-direction: column;
    gap: 3rem;
  }
}

.top-news__header {
  display: flex;
  flex-direction: column;
  gap: 4rem;
  width: calc(290 / 1200 * 100%);
  @media (max-width: 767.98px) {
    gap: 3rem;
    width: 100%;
  }
}

.top-news__title {
  font-size: clamp(2.4rem, 5vw, 5rem);
  font-weight: 700;
  line-height: calc(58 / 50);
  letter-spacing: 0.02em;
  @media (max-width: 767.98px) {
    font-size: 2.4rem;
  }
}

.top-news__tab {
  display: flex;
  flex-direction: column;
  gap: 3rem;
  @media (max-width: 767.98px) {
  }
}

.top-news__tab-item button {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-inline: 0;
  border: none;
  background: none;
  cursor: pointer;
}

.top-news__tab-icon {
  display: inline-block;
  width: 10px;
  height: 10px;
  background: #C1C1C1;
  border-radius: 50%;
}

.top-news__tab-icon.is-active-icon {
  background: #0075c2;
}

.top-news__tab-text {
  font-size: clamp(1.6rem, 1.8vw, 1.8rem);
  font-weight: 500;
  @media (max-width: 767.98px) {
    font-size: 1.6rem;
  }
}

.top-news__tab-text.is-active-text {
  font-weight: bold;
}

.top-news__list {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  width: calc(910 / 1200 * 100%);
  @media (max-width: 767.98px) {
    width: 100%;
  }
}

.top-news__item-link {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding-block: 10px;
  border-bottom: 1px solid #070707;
  @media (max-width: 767.98px) {
    flex-direction: column;
    align-items: flex-start;
  }
}

.top-news__item-head {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.top-news__date {
  font-size: clamp(1.4rem, 1.8vw, 1.8rem);
  @media (max-width: 767.98px) {
    font-size: 1.4rem;
  }
}

.top-news__category {
  width: 180px;
  padding: 3px 8px;
  color: #0075c2;
  font-size: clamp(1.2rem, 1.6vw, 1.6rem);
  border: 1px solid #0075c2;
  border-radius: 30px;
  text-align: center;
  @media (max-width: 767.98px) {
    width: 160px;
    padding: 5px;
    font-size: 1.2rem;
  }
}

.top-news__item-title {
  flex: 1;
  font-size: clamp(1.4rem, 1.8vw, 1.8rem);
  padding-right: 20px;
  @media (max-width: 767.98px) {
    font-size: 1.4rem;
  }
}

.top-news__more-link-wrap--pc {
  display: block;
  @media (max-width: 767.98px) {
    display: none;
  }
}

.top-news__more-link-wrap--sp {
  display: none;
  @media (max-width: 767.98px) {
    display: block;
  }
}

.top-news__more-link {
  display: flex;
  align-items: center;
  gap: 15px;
}

.top-news__more-link-text {
  color: #0075c2;
  font-size: clamp(1.4rem, 1.8vw, 1.8rem);
  font-weight: bold;
  line-height: calc(17 / 18);
  letter-spacing: 0.039em;
}

.top-news__more-link-icon {
  width: 20px;
  height: 20px;
  background: url(../img/top/title-icon.png) no-repeat center center / contain;
}

/* PC: タブ表示 / select非表示 */
.top-news__filter-select { display: none; }

/* SP: select表示 / タブ非表示 */
@media (max-width: 767px) {
  .top-news__tab { display: none; }
  .top-news__filter-select { display: block; }

  .top-news__filter {
    width: 100%;
    padding: 10px 12px;
    font-size: 16px;
    @media (max-width: 767.98px) {
      font-size: 1.2rem;
    }
  }

  .top-news__filter option {
    font-size: 32px;
  }
}


/* トップページ 麻生セメントについて
----------------------------------------------- */

.top-about {
  padding-block: 110px 160px;
  background: #0075C2;
  @media (max-width: 767.98px) {
    padding-block: 5rem;
  }
}

.top-about__promotion-title {
  margin-bottom: 5rem;
  color: #fff;
  font-size: clamp(2.4rem, 5vw, 5rem);
  font-weight: bold;
  @media (max-width: 767.98px) {
    margin-bottom: 3rem;
    font-size: 2.4rem;
  }
}

.top-about__promotion-text {
  margin-bottom: 5rem;
  color: #fff;
  font-size: clamp(1.4rem, 1.8vw, 1.8rem);
  font-weight: 500;
  line-height: calc(35 / 18);
  @media (max-width: 767.98px) {
    font-size: 1.4rem;
  }
}

.top-about__promotion-video {
  width: 100%;
  max-width: 1020px;
  margin-inline: auto;
  margin-bottom: 10rem;
  @media (max-width: 767.98px) {
    margin-bottom: 5rem;
  }
}

.top-title__wrap {
  display: flex;
  align-items: center;
  gap: 4rem;
  margin-bottom: 5rem;
  @media (max-width: 767.98px) {
    gap: 2rem;
    margin-bottom: 3rem;
  }
}

.top-title__wrap a {
  display: flex;
  align-items: center;
  gap: 3rem;
  transition: opacity 0.3s;
  &:hover {
    opacity: 0.8;
  }
}

.top-title__common {
  font-size: clamp(2.4rem, 5vw, 5rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  @media (max-width: 767.98px) {
    font-size: 2.4rem;
  }
}

.top-title--white {
  color: #fff;
}

.top-title__icon {
  width: 40px;
}

.top-about__cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  @media (max-width: 1090px) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  @media (max-width: 767.98px) {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}

.top-card__link {
  display: block;
  padding-block: 20px 10px;
  padding-inline: min(30px, 30 / 383 * 100%);
  border: 1px solid #c1c1c1;
  position: relative;
  background: #fff;
  isolation: isolate;
  transition: background 0.3s, color 0.3s;
}

.top-card__link:hover {
  background: #0075c2;
  color: #fff;
  border: 1px solid #fff;
}

.top-card__link::after {
  content: "";
  display: block;
  width: 20px;
  aspect-ratio: 1;
  background: linear-gradient(to right bottom, transparent calc(50% - 0.5px), #007dc5 calc(50% + 0.5px));
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: -1;
  translate: -6px -6px;
  transition: translate 0.3s;
}

.top-card__link:hover::after {
  translate: none;
  background: linear-gradient(to right bottom, transparent calc(50% - 0.5px), #fff calc(50% + 0.5px));
}

.top-card__title {
  color: #007dc5;
  padding-bottom: 7px;
  font-weight: 700;
  font-size: clamp(1.4rem, 1.8vw, 1.8rem);
  transition: color 0.3s;
  @media (max-width: 767.98px) {
    font-size: 1.4rem;
  }
}

.top-card__link:hover .top-card__title {
  color: #fff;
}


/* トップページ 製品情報
----------------------------------------------- */

.top-products {
  padding-block: 120px 100px;
  background: #F3F5F6;
  overflow: hidden;
  @media (max-width: 767.98px) {
    padding-block: 5rem 3rem;
  }
}

.top-products__flex {
  position: relative;
  display: flex;
  align-items: center;
}

.top-products__flex-text {
  position: relative;
  z-index: 2;
}

.top-products__flex-img {
  position: absolute;
  top: -50%;
  right: -30%;
  z-index: 1;
  width: 100%;
  @media (max-width: 1200px) {
    right: -10%;
  }
  @media (max-width: 992px) {
    top: -30%;
  }
  @media (max-width: 767.98px) {
    display: none;
  }
}

.top-title--blue {
  color: #0075c2;
}

.top-products__text {
  margin-bottom: 5rem;
  font-size: clamp(1.4rem, 1.8vw, 1.8rem);
  font-weight: bold;
  font-family: var(--ff-roboto);
  line-height: calc(37 / 18);
  @media (max-width: 767.98px) {
    font-size: 1.4rem;
  }
}

.top-products__item-title {
  position: relative;
  z-index: 2;
  margin-bottom: 3rem;
  padding-left: 50px;
  color: #0075c2;
  font-size: clamp(1.6rem, 2.2vw, 2.2rem);
  font-weight: 700;
  font-family: var(--ff-roboto);
  @media (max-width: 767.98px) {
    font-size: 1.6rem;
  }
}

.top-products__item-title::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 35px;
  height: 1px;
  background: #0075c2;
}

.top-products__cards--top {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-bottom: 5rem;
  @media (max-width: 767.98px) {
    grid-template-columns: repeat(1, minmax(0, 1fr));
    margin-bottom: 3rem;
  }
}

.top-products__card .top-card__title {
  font-size: clamp(1.4rem, 1.8vw, 1.8rem);
  @media (max-width: 767.98px) {
    font-size: 1.4rem;
  }
}

.top-products__cards--bottom {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-bottom: 11rem;
  @media (max-width: 767.98px) {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}

/* トップページ 会社概要
----------------------------------------------- */

.top-company {
  padding-block: 100px 150px;
  background: #0075c2;
  @media (max-width: 767.98px) {
    padding-block: 5rem 3rem;
  }
}

.top-company__flex {
  display: flex;
  align-items: center;
  gap: 7rem;
  @media (max-width: 1200px) {
    flex-direction: column;
    gap: 3rem;
  }
}

.top-company__cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  flex: 1;
  @media (max-width: 1200px) {
    width: 100%;
  }
  @media (max-width: 767.98px) {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}

.top-company__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 20px;
  border-bottom: 1px solid #c1c1c1;
  transition: opacity 0.3s;
  &:hover {
    opacity: 0.8;
  }
}

.top-company__title {
  font-size: clamp(1.4rem, 1.8vw, 1.8rem);
  font-weight: 500;
  color: #fff;
  @media (max-width: 767.98px) {
    font-size: 1.4rem;
  }
}

.top-company__title-icon {
  width: 30px;
}

.top-company__img {
  width: 50%;
  max-width: 500px;
  @media (max-width: 767.98px) {
    width: 100%;
  }
}


/* トップページ アソケン
----------------------------------------------- */

.top-asoken {
  position: relative;
  padding-block: 120px 100px;
  @media (max-width: 767.98px) {
    padding-block: 5rem 3rem;
  }
}

.top-asoken--footer {
  padding-block: 0 80px;
  @media (max-width: 767.98px) {
    padding-block: 0 50px;
  }
}

.top-asoken__bg {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
}

.top-asoken__bg img {
  width: 100%;
  height: 100%;
}

.top-asoken__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4rem;
  @media (max-width: 767.98px) {
    flex-direction: column;
    gap: 3rem;
    margin-bottom: 3rem;
  }
}

.top-asoken__img {
  width: 100%;
  max-width: 240px;
  @media (max-width: 767.98px) {
    max-width: 100%;
  }
}

.top-asoken__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  @media (max-width: 767.98px) {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}

.top-asoken__item {
  text-align: center;
}

.top-asoken__item a {
  display: block;
  width: 100%;
  height: 100%;
  transition: opacity 0.3s;
  &:hover {
    opacity: 0.8;
  }
}


/* トップページ 製品情報ほか
----------------------------------------------- */

.top-products-etc {
  padding-block: 120px 100px;
  background: #0075c2;
  @media (max-width: 767.98px) {
    padding-block: 5rem 3rem;
  }
}

.top-products-etc__img-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  @media (max-width: 767.98px) {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}

.top-products-etc__img-item a {
  transition: opacity 0.3s;
  &:hover {
    opacity: 0.8;
  }
}


/* トップページ 情報
----------------------------------------------- */

.top-info {
  padding-block: 120px 100px;
  @media (max-width: 767.98px) {
    padding-block: 5rem 3rem;
  }
}

.top-info__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 50px;
  @media (max-width: 767.98px) {
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 2rem;
  }
}

.top-info__item a {
  transition: opacity 0.3s;
  &:hover {
    opacity: 0.8;
  }
}

.top-info__item-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 40px;
  color: #fff;
  background: #0075c2;
}

.top-info__item-body-inner {
  display: flex;
  align-items: center;
  gap: 10px;
}

.top-info__item-title {
  font-size: clamp(1.8rem, 2.4vw, 2.4rem);
  font-weight: bold;
  @media (max-width: 767.98px) {
    font-size: 1.8rem;
  }
}

.icon-new--recruit {
  width: 20px;
  height: 20px;

  -webkit-mask-image: url(../img/common/icon-new.svg);
	-webkit-mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;

	mask-image: url(../img/common/icon-new.svg);
	mask-size: contain;
	mask-repeat: no-repeat;
	mask-position: center;

  background-color: #fff;

  @media (max-width: 1200px) {
    background-color: #fff;
  }
}

.top-info__item-icon {
  width: 30px;
}

.c-contact-recycle-title {
	@media (max-width: 767.98px) {
		font-size: 2.8rem;
	}
}


/* トップページ 固定バナー
----------------------------------------------- */

.c-fix-banner {
  position: fixed;
  z-index: 1000;
  bottom: 30px;
  right: 35px;
  width: 240px;
  opacity: 1;
  transition: opacity 0.3s;
}

.c-fix-banner.is-hidden {
  display: none;
  opacity: 0;
  pointer-events: none;
}

.c-fix-banner.is-intersecting {
  display: none;
  opacity: 0;
  pointer-events: none;
}

.c-fix-banner__link {
  display: block;
  width: 100%;
  height: 100%;
  transition: opacity 0.3s;
  &:hover {
    opacity: 0.8;
  }
}

.c-fix-banner__close {
  position: absolute;
  top: 10px;
  right: 40px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 35px;
  height: 35px;
  color: #0075c2;
  font-size: 18px;
  background: #fff;
  border: none;
  border-radius: 50%;
}


/* トップページ 固定バナー スマホ
----------------------------------------------- */

.c-footer-fix-banner {
  position: fixed;
  z-index: 1000;
  bottom: 0;
  left: 0;
  width: 100%;
}

.c-footer-fix-banner.is-hidden {
  display: none;
}

.c-footer-fix-banner.is-intersecting {
  display: none;
}

.c-footer-fix-banner__text {
  width: 100%;
  font-size: 20px;
  font-weight: bold;
  color: #136db1;
  font-style: italic;
  text-align: center;
  background: #D4E9F5;
}

.c-footer-fix-banner__link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #007DC5;
  transition: all 0.7s;
  &:hover {
    background: #fff;
    opacity: 0.8;
  }
}

.c-footer-fix-banner__link-text {
  font-size: 30px;
  font-weight: bold;
  color: #fff;
}

.c-footer-fix-banner__link:hover .c-footer-fix-banner__link-text {
  color: #007DC5;
}

.c-footer-fix-banner__link-icon {
  display: inline-block;
  width: 13px;
  height: 15px;
  background: #ffffff;
  clip-path: polygon(0 0, 0 100%, 100% 50%);
}

.c-footer-fix-banner__link:hover .c-footer-fix-banner__link-icon {
  background: #007DC5;
}

.c-footer-fix-banner__close {
  position: absolute;
  top: -15%;
  right: 5%;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 25px;
  height: 25px;
  color: #707070;
  font-size: 18px;
  background: #fff;
  border: none;
  border-radius: 50%;
}

/* 検索フォーム
----------------------------------------------- */

/* 検索ボタン */
.header-search {
  position: relative;
  z-index: 1001;
  margin-left: min(40px, 20px + 20 * var(--slope-1750-1260));
  padding-left: min(40px, 20px + 20 * var(--slope-1750-1260));
  border-left: 1px solid #000;
  @media (max-width: 1200px) {
    padding-block: calc(14 / 14 * 1em);
    padding-inline: calc(30 / 420 * 100 * var(--vw));
    border-left: none;
  }
}

.search-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: #000;
  font-size: 18px;
  padding: 8px 12px;
  @media (max-width: 1200px) {
    color: #fff;
  }
}

.search-toggle:hover {
  opacity: 0.8;
}

.search-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* オーバーレイ */
.search-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: 999;
}

.search-overlay.is-active {
  opacity: 1;
  visibility: visible;
}

/* 検索フォーム全体 */
.header-search-form-wrap {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background: #fff;
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
  z-index: 1000;
}

/* header に position: relative; を付けておくと安定しやすい */
.site-header {
  position: relative;
}

.header-search-form-wrap.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.header-search-form {
  display: flex;
  gap: 10px;
  max-width: 900px;
  margin: 0 auto;
}

.header-search-form input {
  color: #000 !important;
}

.header-search-field {
  flex: 1;
  height: 48px;
  padding: 0 14px;
  border: 1px solid #ccc;
  font-size: 16px;
  border-radius: 4px;
}

.header-search-submit {
  height: 48px;
  padding: 0 20px;
  border: none;
  background: #222;
  color: #fff;
  cursor: pointer;
  border-radius: 4px;
  white-space: nowrap;
}

.header-search-submit:hover {
  opacity: 0.9;
}

@media (max-width: 767px) {
  .header-search-form {
    flex-direction: column;
  }

  .header-search-submit {
    width: 100%;
  }
}


/* search php */

/* search */
.search-page {
  padding: 60px 20px;
}

.search-page__inner {
  max-width: 1000px;
  margin: 0 auto;
}

.search-page__header {
  margin-bottom: 32px;
}

.search-page__title {
  margin: 0 0 10px;
  font-size: 32px;
  line-height: 1.4;
}

.search-page__count {
  margin: 0;
  color: #666;
  font-size: 15px;
}

.search-page__form-area {
  margin-bottom: 40px;
  padding: 24px;
  background: #f7f7f7;
  border-radius: 8px;
}

.search-page__form {
  display: flex;
  gap: 10px;
}

.search-page__input {
  flex: 1;
  height: 48px;
  padding: 0 14px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
  background: #fff;
}

.search-page__button {
  height: 48px;
  padding: 0 20px;
  border: none;
  border-radius: 4px;
  background: #222;
  color: #fff;
  cursor: pointer;
  white-space: nowrap;
}

.search-page__button:hover {
  opacity: 0.9;
}

.search-results {
  display: grid;
  gap: 24px;
}

.search-result-item {
  border-bottom: 1px solid #ddd;
  padding-bottom: 24px;
}

.search-result-item__linkwrap {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 20px;
  color: inherit;
  text-decoration: none;
}

.search-result-item__linkwrap:hover .search-result-item__title {
  text-decoration: underline;
}

.search-result-item__thumb {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 6px;
  background: #eee;
}

.search-result-item__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.search-result-item__thumb--placeholder {
  background: #f0f0f0;
}

.search-result-item__content {
  min-width: 0;
}

.search-result-item__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.search-result-item__type {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  background: #eee;
  font-size: 12px;
  line-height: 1.4;
}

.search-result-item__date {
  color: #666;
  font-size: 14px;
}

.search-result-item__title {
  margin: 0 0 12px;
  font-size: 24px;
  line-height: 1.5;
  color: #222;
}

.search-result-item__excerpt {
  color: #444;
  line-height: 1.8;
  font-size: 15px;
}

.search-result-item__more {
  display: inline-block;
  margin-top: 14px;
  font-weight: bold;
  font-size: 14px;
}

.search-page__pagination {
  margin-top: 40px;
}

.search-page__pagination .nav-links {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.search-page__pagination .page-numbers {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  text-decoration: none;
  color: #222;
}

.search-page__pagination .page-numbers.current {
  background: #222;
  border-color: #222;
  color: #fff;
}

.search-page__no-results {
  padding: 20px 0 0;
}

.search-page__no-results-text {
  margin: 0;
  color: #444;
}

@media (max-width: 767px) {
  .search-page {
    padding: 40px 16px;
  }

  .search-page__title {
    font-size: 24px;
  }

  .search-page__form {
    flex-direction: column;
  }

  .search-result-item__linkwrap {
    grid-template-columns: 1fr;
  }

  .search-result-item__title {
    font-size: 20px;
  }
}

/* 404 */

.p-404 {
  padding: 80px 20px;
}

.p-404__inner {
  max-width: 900px;
  margin: 0 auto;
}

.p-404__box {
  text-align: center;
  padding: 60px 20px;
}

.p-404__sub {
  margin: 0 0 12px;
  font-size: 14px;
  letter-spacing: 0.08em;
  color: #666;
}

.p-404__title {
  margin: 0 0 20px;
  font-size: 36px;
  line-height: 1.4;
  color: #222;
}

.p-404__text {
  margin: 0 auto;
  max-width: 680px;
  font-size: 16px;
  line-height: 1.9;
  color: #444;
}

.p-404__buttons {
  margin-top: 32px;
}

.p-404__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 240px;
  min-height: 52px;
  padding: 0 24px;
  background: #222;
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
  transition: opacity 0.3s ease;
}

.p-404__button:hover {
  opacity: 0.9;
}

.p-404__search {
  margin-top: 40px;
}

.p-404__search-form {
  display: flex;
  justify-content: center;
  gap: 10px;
  max-width: 640px;
  margin: 0 auto;
}

.p-404__search-input {
  flex: 1;
  height: 48px;
  padding: 0 14px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
}

.p-404__search-button {
  height: 48px;
  padding: 0 20px;
  border: none;
  background: #222;
  color: #fff;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
}

@media (max-width: 767px) {
  .p-404 {
    padding: 56px 16px;
  }

  .p-404__box {
    padding: 20px 0;
  }

  .p-404__title {
    font-size: 28px;
  }

  .p-404__search-form {
    flex-direction: column;
  }

  .p-404__search-button {
    width: 100%;
  }
}