@charset "utf-8";
/* CSS Document */
/**------------------------------ 
_box _list _item _waku
 ------------------------------**/

/*-------------------------------------
基本装飾 -サイトにより変更-
1紺
2水色
3グレー
4赤
5黄色
6青
-------------------------------------*/
:root {
  --base-width: 1100px;
  --over-width-half: calc((100% - var(--base-width)) / 2);
  --ff: "Noto Sans JP", sans-serif;
  --webf: "Kanit", sans-serif;
  --header-height: 105px;
  --fz: 16px;

  --black: #00000a;
  --white: #ffffff;

  --color_type1: #000c4b;
  --color_type2: #0099ff;
  --color_type3: #e9e9e9;
  --color_type4: #f70101;
  --color_type5: #fff9c4;
  --color_type6: #005bac;
  --color_type7: #50bfff;

  --filebtn: linear-gradient(
    to bottom,
    rgba(233, 233, 233, 0.2) 0%,
    rgba(233, 233, 233, 1) 50%,
    rgba(0, 0, 0, 0.1) 100%
  );

  --asp-post: 520/347;
  /**.fw-b.fw-bb*/
  --fw-b: 700;
  --fw-bb: 900;
  /**.pagenation**/
  --pgn-c: var(--white);
  --pgn-bg: var(--color_type1);
}

@media screen and (max-width: 1100px) {
  :root {
    --over-width-half: 0;
  }
}

@media screen and (max-width: 520px) {
  :root {
    --fz: 14px;
    --base-width: 100%;
    --over-width-half: 5%;
    --header-height: 56px;
  }
}

html {
  font-size: var(--fz);
}

body {
  font-family: var(--ff);
  min-width: var(--base-width);
  padding-top: var(--header-height);
  color: var(--black);
}

/**================================================================================
レイアウト
================================================================================**/

/**------------------------------ 
横並びリスト 均等
box nth column
.boxNC>li
 ------------------------------**/

:root {
  --boxNC_w: 100%;
  --boxNC_m: 30px auto;
  --boxNC_gap: 20px 3%;
  --boxNC_child_w: calc(94% / 3);
}

.boxNC {
  display: flex;
  flex-wrap: wrap;
  width: var(--boxNC_w);
  margin: var(--boxNC_m);

  gap: var(--boxNC_gap);
}

.boxNC > * {
  width: var(--boxNC_child_w);
}

@media screen and (max-width: 520px) {
  :root {
    --boxNC_w: 100%;
    --boxNC_m: 20px auto;
    --boxNC_gap: 0 20px;
    --boxNC_child_w: 100%;
  }
}

/**------------------------------ 
横並びリスト 2カラム不均等
box left right
.boxLR>.left+.right
 ------------------------------**/
:root {
  --boxLR_w: 100%;
  --boxLR_m: 30px auto;
  --boxLR_gap: 10px;
  --boxLR_1_w: 30%;
  --boxLR_2_w: calc(40% - var(--boxLR_gap));
  --boxLR_1_m: 0;
  --boxLR_2_m: 0;
  --boxLR_jc: flex-start;
  --boxLR_ai: stretch;
  --boxLR_fflow: wrap;
}

.boxLR {
  display: flex;
  flex-flow: var(--boxLR_fflow);
  justify-content: var(--boxLR_jc);
  align-items: var(--boxLR_ai);
  width: var(--boxLR_w);
  margin: var(--boxLR_m);

  gap: var(--boxLR_gap);
}

.boxLR > .LR1 {
  width: var(--boxLR_1_w);
  margin: var(--boxLR_1_m);
}

.boxLR > .LR2 {
  width: var(--boxLR_2_w);
  margin: var(--boxLR_2_m);
}

@media screen and (max-width: 520px) {
  :root {
    --boxLR_w: var(--base-width);
    --boxLR_m: 30px auto;
    --boxLR_gap: 10px;
    --boxLR_1_w: 100%;
    --boxLR_2_w: 100%;
    --boxLR_1_m: 0;
    --boxLR_2_m: 0;
  }
}

/**------------------------------ 
横並びリスト 2カラム不均等 互い違い
box odd even
boxOE>li>.left+.right
 ------------------------------**/
:root {
  --boxOE_w: var(--base-width);
  --boxOE_m: 30px auto;
  --boxOE_gap: 10px;
  --boxOE_1_w: 30%;
  --boxOE_2_w: calc(50% - var(--boxOE_gap));
  --boxOE_3_w: calc(20% - var(--boxOE_gap));
}

.boxOE > * {
  display: flex;
  flex-wrap: wrap;
  width: var(--boxOE_w);
  margin: var(--boxOE_m);

  gap: var(--boxOE_gap);
}

.boxOE > *:nth-child(odd) {
  flex-direction: row;
}

.boxOE > *:nth-child(even) {
  flex-direction: row-reverse;
}

.boxOE > * > .OE1 {
  width: var(--boxOE_1_w);
}

.boxOE > * > .OE2 {
  width: var(--boxOE_2_w);
}

@media screen and (max-width: 520px) {
  :root {
    --boxOE_w: var(--base-width);
    --boxOE_m: 20px auto;
    --boxOE_gap: 10px;
    --boxOE_1_w: 100%;
    --boxOE_2_w: 100%;
    --boxOE_3_w: 100%;
  }

  .boxOE > *:nth-child(odd) {
    flex-direction: row;
  }

  .boxOE > *:nth-child(even) {
    flex-direction: row;
  }
}

/**------------------------------ 
画像なしお知らせリスト
.list-noimg>*>a>(time+.em>em+h3)
 ------------------------------**/
.list-noimg a {
  display: flex;
  align-items: center;
  gap: 30px;
}

.list-noimg a:hover h3 {
  text-decoration: underline;
}

@media screen and (max-width: 520px) {
  .list-noimg a {
    flex-flow: wrap;
    gap: 10px 8px;
  }

  .list-noimg h3 {
    width: 100%;
    line-height: 1.5;
  }
}

/**================================================================================
装飾
================================================================================**/

/* -------------------------------------
カテゴリボタン
-------------------------------------*/
:root {
  --catBtn_c: var(--color_type1);
  --catBtn_bd: 1px solid var(--color_type1);
  --catBtn_bg: var(--white);
}

.catBtn {
  width: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
  margin: 40px auto;
  border-left: var(--catBtn_bd);
  border-top: var(--catBtn_bd);

  gap: 0;
}

.catBtn a {
  position: relative;
  display: block;
  padding: 10px;
  text-align: center;
  color: var(--catBtn_c);
  border-right: var(--catBtn_bd);
  border-bottom: var(--catBtn_bd);
  background: var(--catBtn_bg);
}

.catBtn a:hover,
.catBtn a.current {
  color: var(--catBtn_bg);
  background: var(--catBtn_c);
}

@media screen and (max-width: 520px) {
  .catBtn {
    width: 100%;
    gap: 0;
    margin: 20px auto;
  }
}

.termBtn {
  display: flex;
  flex-flow: wrap;
  gap: 15px;
}

.termBtn a {
  flex: 1;
  text-align: center;
  white-space: nowrap;
  padding: 5px 30px 5px 20px;
  color: var(--color_type1);
  border: 1px solid var(--color_type1);
  border-radius: 50px;
  background: var(--color_type1);
  position: relative;
}

.termBtn a:after {
  position: absolute;
  top: 50%;
  right: 0.5em;
  transform: translateY(-50%);
  content: "→";
  z-index: 5;
  font-size: 0.9rem;
}

.termBtn a:hover {
  background: var(--color_type1);
  color: var(--white);
}

@media screen and (max-width: 520px) {
  .termBtn {
    gap: 10px;
  }

  .termBtn a {
    padding: 5px 10px 5px 0px;
  }
}

/* -------------------------------------
文字装飾
-------------------------------------*/
:root {
  /**.edge**/
  --liner_c: #fff552;
  --edge_c: var(--white);
  --edge2_c: var(--white);
  --edge3_c: var(--white);
}

/**黄色マーカー**/
b.liner {
  text-decoration: underline;
  /* 下線 */
  text-decoration-thickness: 0.5em;
  /* 線の太さ */
  text-decoration-color: var(--liner_c);
  /* 線の色 */
  text-underline-offset: -0.2em;
  /* 線の位置。テキストに重なるようにやや上部にする */
  text-decoration-skip-ink: none;
  /* 下線と文字列が重なる部分でも下線が省略されない（線が途切れない） */
}

b.liner2 {
  background: -webkit-linear-gradient(transparent 40%, var(--liner_c) 0%);
  background: linear-gradient(transparent 40%, var(--liner_c) 0%);
}

/*縁くくり*/
.edge {
  text-shadow:
    1px 1px 0 var(--edge_c),
    -1px 1px 0 var(--edge_c),
    1px -1px 0 var(--edge_c),
    -1px -1px 0 var(--edge_c);
}

/*縁 2px以上*/
.edge2 {
  text-shadow:
    2px 2px 1px var(--edge2_c),
    -2px 2px 1px var(--edge2_c),
    2px -2px 1px var(--edge2_c),
    -2px -2px 1px var(--edge2_c),
    2px 0 1px var(--edge2_c),
    0 2px 1px var(--edge2_c),
    -2px 0 1px var(--edge2_c),
    0 -2px 1px var(--edge2_c);
}

/*縁 枠*/
.edge3 {
  color: transparent;

  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: var(--edge3_c);
}

/* -------------------------------------
写真のエフェクト
-------------------------------------*/
img {
  width: auto;
  height: auto;
}

/**4辺ぼかし：親要素にかける**/
.blur_w {
  position: relative;
  display: inline-block;
}

.blur_w:after {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  content: "";
  background: rgba(255, 255, 255, 0);
  box-shadow:
    inset 0 0 40px var(--black),
    inset 0 0 40px var(--black),
    inset 0 0 40px var(--black),
    inset 0 0 40px var(--black);
}

/**角丸：画像に直接かけれる**/
.radius {
  border-radius: 15px;
}

/**ひし形**/
:root {
  --diamondw: 320px;
  --sqrt: calc(var(--diamondw) * sqrt(2));
  --diamondm: calc((var(--sqrt) - var(--diamondw)) / 2);
}

@media screen and (max-width: 520px) {
  :root {
    --diamondw: 180px;
    --sqrt: calc(var(--diamondw) * sqrt(2));
    --diamondm: calc((var(--sqrt) - var(--diamondw)) / 2);
  }
}

.diamond {
  display: block;
  aspect-ratio: 1/1;
  width: var(--diamondw);
  transform: rotate(45deg);
  margin: var(--diamondm) auto;
  overflow: hidden;
}

.diamond img {
  max-width: none;
  width: var(--sqrt);
  height: var(--sqrt);
  object-fit: cover;
  transform: rotate(-45deg);
  margin: calc(-1 * var(--diamondm)) 0 0 calc(-1 * var(--diamondm));
}

/**hover：透過**/
a:hover img {
  --opacity: 0.7;
  opacity: var(--opacity);
}

/**hover時画像拡大**/
.scale {
  overflow: hidden;
}

.scale img {
  -webkit-transition: -webkit-transform 0.3s linear;
  -moz-transition: -moz-transform 0.3s linear;
  -ms-transition: -ms-transform 0.3s linear;
  -o-transition: -o-transform 0.3s linear;
  transition: transform 0.3s linear;
}

a:hover .scale img {
  -webkit-transform: scale(1.2);
  -moz-transform: scale(1.2);
  -ms-transform: scale(1.2);
  -o-transform: scale(1.2);
  transform: scale(1.2);
}

/**画像トリミング：親要素にwとhを指定する**/
.ojf img {
  width: 100%;
  height: 100%;

  -o-object-fit: cover;
  object-fit: cover;
}

/**-------------------------------------
youtube
-------------------------------------**/
iframe {
  width: 100%;
}

.youtube {
  margin: 30px auto 20px;
}

.youtube iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
}

@media screen and (max-width: 520px) {
  .youtube {
    margin: 20px auto 10px;
  }
}

/* -------------------------------------
google gmap
-------------------------------------*/
/**地図**/
.gmap iframe {
  width: 100%;
  height: 480px;
}

@media screen and (max-width: 480px) {
  .gmap iframe {
    height: 45vh;
  }
}

/* -------------------------------------
PDF埋め込み src="URL末尾#view=Fit"を入れる
-------------------------------------*/
.pdf_wrap {
  aspect-ratio: 1/1;
  width: 100%;
  height: auto;
  overflow: hidden;
}

.pdf_wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.pdf_wrap iframe {
  display: block;
  width: 333%;
  height: 333%;
  transform: scale(0.3);
  transform-origin: 0 0;
}

.pdf_btn {
  display: flex;
  align-items: center;
  gap: 5px;
}
.pdf_btn:before {
  content: "";
  display: block;
  background: url(../images/icon_pdf.png) no-repeat center / contain;
  aspect-ratio: 117/128;
  width: 1.5em;
}
.pdf_btn:after {
  content: "→";
  margin: 0 0 0 10px;
}
.pdf_btn:hover {
  color: var(--color_type4);
}

/**================================================================================
サイト用 CSS
================================================================================**/

/**-------------------------------------
アイコン
-------------------------------------**/
.em {
  display: flex;
  gap: 3px;
  font-size: 0.75rem;
  font-style: normal;
  color: var(--color_type1);
  line-height: 1;
}

.em svg {
  width: 1rem;
  height: 1rem;
  fill: var(--color_type1);
}

.time {
  font-style: normal;
  font-size: 0.8rem;
  display: inline-block;
  white-space: nowrap;
  color: color-mix(in srgb, var(--black) 50%, var(--white) 0%);
  line-height: 1;
}

.post-term {
  display: flex;
  flex-flow: wrap;
  gap: 10px;
}

/**-------------------------------------
見出し
-------------------------------------**/
.pageTitle {
  position: sticky;
  top: var(--header-height);
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 100%;
  height: 400px;
  padding: 0 var(--over-width-half);
  color: var(--white);
  font-size: 1.25rem;
  line-height: 1.3;
  font-weight: bold;
  background-color: var(--black);
  background-image: url(../images/bg0.webp);
  background-position: center right;
  background-repeat: no-repeat;
  background-size: cover;
  z-index: -1;

  filter: grayscale(100%);
}

.pageTitle:before {
  --bgc: 0, 153, 255;
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, var(--black) 0%, rgba(var(--bgc), 0.4) 80%);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  mix-blend-mode: multiply;
}

.pageTitle .h1 {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  z-index: 5;
}

.pageTitle .h1 i {
  font-family: var(--webf);
  font-size: 4.3rem;
}

main {
  background: var(--white);
}

:root {
  --titAd: flex;
  --titAff: column;
  --titAjc: flex-start;
  --titAai: flex-start;
  --titAta: left;
  --titAgap: 8px;
  --titAfz: 1.25rem;
  --titAc: var(--black);
  --titAm: 0 0 60px;
  --titAp: 0;
  --titAlh: 1.2;

  --titAfz_i: 6.25rem;
  --titAc_i: var(--color_type1);
}

.titA {
  display: var(--titAd);
  justify-content: var(--titAjc);
  align-items: var(--titAai);
  text-align: var(--titAta);
  gap: var(--titAgap);
  flex-flow: var(--titAff);
  font-size: var(--titAfz);
  color: var(--titAc);
  margin: var(--titAm);
  padding: var(--titAp);
  font-family: var(--ff);
  line-height: var(--titAlh);
  font-weight: bold;
}

.titA i {
  display: block;
  color: var(--titAc_i);
  font-size: var(--titAfz_i);
  font-family: var(--webf);
  font-weight: normal;
  line-height: 1;
}

:root {
  --titBd: flex;
  --titBff: row;
  --titBjc: flex-start;
  --titBai: flex-end;
  --titBta: left;
  --titBgap: 20px;
  --titBfz: 1.5rem;
  --titBc: var(--black);
  --titBm: 0 0 30px;
  --titBta: left;
  --titBbg: none;
  --titBls: 0;
  --titBp: 0;
  --titBlh: 1.3;
  --titBw: auto;

  --titBfz_i: 1.3rem;
  --titBc_i: var(--color_type2);
}

.titB {
  display: var(--titBd);
  justify-content: var(--titBjc);
  align-items: var(--titBai);
  text-align: var(--titBta);
  gap: var(--titBgap);
  flex-flow: var(--titBff);
  width: var(--titBw);
  font-size: var(--titBfz);
  color: var(--titBc);
  margin: var(--titBm);
  background: var(--titBbg);
  padding: var(--titBp);
  letter-spacing: var(--titBls);
  position: relative;
  line-height: var(--titBlh);
  font-family: var(--ff);
  font-weight: bold;
}

.titB i {
  color: var(--titBc_i);
  font-size: var(--titBfz_i);
  font-family: var(--webf);
  font-weight: normal;
  line-height: 1;
}

:root {
  --titCta: left;
  --titCfz: 2rem;
  --titCc: var(--black);
  --titCm: 0 0 40px;
  --titCta: left;
  --titCbg: none;
  --titCls: 0;
  --titCp: 0;
  --titClh: 1.3;
  --titCw: auto;
}

.titC {
  text-align: var(--titCta);
  flex-flow: var(--titCff);
  width: var(--titCw);
  font-size: var(--titCfz);
  color: var(--titCc);
  margin: var(--titCm);
  background: var(--titCbg);
  padding: var(--titCp);
  letter-spacing: var(--titCls);
  position: relative;
  line-height: var(--titClh);
  font-weight: bold;
}

:root {
  --titDta: left;
  --titDfz: 1.2rem;
  --titDc: var(--color_type1);
  --titDm: 0 0 40px;
  --titDta: left;
  --titDbg: var(--white);
  --titDls: 0;
  --titDp: 5px;
  --titDlh: 1.3;
  --titDw: auto;
}

.titD {
  text-align: var(--titDta);
  flex-flow: var(--titDff);
  width: var(--titDw);
  font-size: var(--titDfz);
  color: var(--titDc);
  margin: var(--titDm);
  background: var(--titDbg);
  padding: var(--titDp);
  letter-spacing: var(--titDls);
  position: relative;
  line-height: var(--titDlh);
  font-weight: bold;
}

.tit {
  padding: 0.5em;
  line-height: 1.3;
  border-bottom: 2px solid var(--color_type3);
  position: relative;
  font-weight: bold;
  color: var(--color_type1);
}

.tit:before {
  content: "";
  height: 2px;
  width: 47px;
  background: var(--color_type1);
  position: absolute;
  left: 0;
  bottom: -2px;
}

@media screen and (max-width: 520px) {
  .pageTitle {
    height: 140px;
    font-size: 1.1rem;
    top: 0;
  }

  .pageTitle .h1 i {
    font-size: 2.5rem;
  }

  :root {
    --titAfz: 1.1rem;
    --titAm: 0 auto 20px;
    --titAlh: 1.3;
    --titAgap: 5px;

    --titAfz_i: 3.5rem;
  }

  :root {
    --titBfz: 1.75em;
    --titBm: 0 0 20px;
    --titBlh: 1.5;
    --titBai: flex-start;
    --titBgap: 0px;
    --titBff: column;
  }

  :root {
    --titCfz: 1.5rem;
    --titCm: 0 0 20px;
  }

  :root {
    --titDfz: 1.2rem;
    --titDm: 0 0 20px;
  }
}

/**-------------------------------------
ボタン
-------------------------------------**/
:root {
  --btnAfz: 1.2rem;
  --btnAw: 180px;
  --btnAc: var(--white);
  --btnAbg: var(--color_type1);
  --btnAbd: 1px solid var(--color_type1);
  --btnAm: 60px auto 1px;
  --btnAp: 20px 1em;
  --btnAjc: center;
  --btnAta: center;

  --btnAbd_hover: 1px solid var(--color_type2);
  --btnAbg_hover: var(--color_type2);
  --btnAc_hover: var(--white);
}

.btnA {
  position: relative;
  display: flex;
  justify-content: var(--btnAjc);
  align-items: center;
  gap: 10px;
  padding: var(--btnAp);
  margin: var(--btnAm);
  width: var(--btnAw);
  border: var(--btnAbd);
  background: var(--btnAbg);
  color: var(--btnAc);
  font-family: var(--webf), var(--ff);
  font-size: var(--btnAfz);
  text-align: var(--btnAta);
  border-radius: 50px;
  font-weight: bold;
  line-height: 1;
}

.btnA:after {
  content: "→";
  z-index: 5;
  font-size: 0.9rem;
  font-weight: normal;
}

.btnA.before:after {
  display: none;
}
.btnA.before:before {
  content: "";
  z-index: 5;
  /*font-size: 0.9rem;
  font-weight: normal;*/
  --hen: 8px;
  display: inline-block;
  background: var(--btnAc);
  height: calc(tan(60deg) * var(--hen) / 1.5);
  width: var(--hen);
  clip-path: polygon(0 0, 100% 50%, 0 100%); /*右*/
  margin-bottom: 3px;
}

.btnA.current,
.btnA:hover {
  border-color: var(--btnAbd_hover);
  background: var(--btnAbg_hover);
  color: var(--btnAc_hover);
}

:root {
  --btnBfz: 1.1rem;
  --btnBw: fit-content;
  --btnBc: var(--color_type1);
  --btnBbg: var(--white);
  --btnBbd: 1px solid var(--white);
  --btnBm: 60px auto 1px;
  --btnBp: 20px 3em;
  --btnBjc: center;
  --btnBta: center;
}

.btnB {
  position: relative;
  display: flex;
  justify-content: var(--btnBjc);
  align-items: center;
  padding: var(--btnBp);
  margin: var(--btnBm);
  width: var(--btnBw);
  border: var(--btnBbd);
  background: var(--btnBbg);
  color: var(--btnBc);
  font-size: var(--btnBfz);
  text-align: var(--btnBta);
  border-radius: 50px;
  font-weight: bold;
}

.btnB:after {
  position: absolute;
  top: 50%;
  right: 1em;
  transform: translateY(-50%);
  content: "→";
  z-index: 5;
  font-size: 0.9rem;
}

.btnB.current,
.btnB:hover {
  border-color: var(--btnBbd);
  background: var(--btnBc);
  color: var(--btnBbg);
}

.btnC {
  display: inline-block;
  background: var(--color_type1);
  border: 1px solid var(--color_type1);
  color: var(--white);
  padding: 5px 15px;
  margin: 15px 0;
  text-decoration: none;
  border-radius: 50px;
  font-size: 15px;
}
.btnC:hover {
  background: var(--white);
  color: var(--color_type1);
}

@media screen and (max-width: 520px) {
  :root {
    --btnAw: 240px;
    --btnAm: 30px auto 0;
    --btnAp: 20px 1em;

    --btnBw: clamp(90%, 100%, 90vw);
    --btnBp: 10px 1em;
    --btnBm: 30px auto;
  }
}

/**================================================== 
 テーブル
================================================== **/

/* -------------------------------------
テーブル
-------------------------------------*/
.table {
}

.table table {
  width: 100%;
}

.table :is(th, td) {
  padding: 15px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--color_type1);
  border-bottom-color: color-mix(in srgb, var(--color_type1) 20%, var(--white) 0%);
}

.table th {
  white-space: nowrap;
  width: 20%;
  color: var(--color_type1);
}

.table .table-head td {
  background: var(--color_type1);
  color: var(--white);
  text-align: center;
  border: 1px solid var(--white);
  font-weight: bold;
}

@media screen and (max-width: 520px) {
  .table :is(table, tbody, tr, th, td) {
    display: block;
  }

  .table :is(th, td) {
    padding: 10px 0;
    white-space: unset;
  }

  .table th {
    width: 100%;
    color: var(--color_type1);
  }

  .table .table-head {
    display: flex;
  }

  .table .table-head td {
    flex: 1;
  }
}

/**================================================== 
 セクション
================================================== **/
.sec-A {
  padding: 60px var(--over-width-half);
}

.sec-B {
  margin: 60px auto;
}

/**================================================== 
header

読み込み時=.white付与。
スクロールすると.white消える。
================================================== **/
header {
  position: fixed;
  top: 0;
  left: 0;
  display: grid;
  grid-template-rows: auto;
  grid-template-columns: 350px 1fr;
  grid-template-areas: "logo nav";
  gap: 0;
  flex-flow: wrap;
  width: 100%;
  z-index: 100;
  background: var(--black);
  min-width: var(--base-width);
  padding: 10px 20px;
}

header .logo {
  color: var(--white);
  grid-area: logo;
}

header .logo .h1 {
  font-size: 0.8rem;
  line-height: 1.3;
  margin: 0 0 5px;
}

header nav {
  grid-area: nav;

  display: grid;
  grid-template-rows: auto auto;
  grid-auto-columns: auto auto;
  grid-template-areas:
    "menu menu"
    "lang gnav ";
  justify-content: end;
}

header .menu {
  grid-area: menu;
  display: flex;
  justify-content: flex-end;
  gap: 1vw;
  margin: 0 0 10px;
}

header .menu a {
  display: block;
  min-width: 180px;
  background: var(--white);
  color: var(--black);
  font-weight: bold;
  padding: 10px;
  border-radius: 50px;
  text-align: center;
}

header .menu a:hover {
  background: var(--color_type2);
  color: var(--white);
}

header nav .gnav {
  grid-area: gnav;
  display: flex;
  justify-content: flex-end;
  gap: 1.5vw;
  color: var(--white);
  font-weight: bold;
}

header nav .gnav a:hover {
  color: var(--color_type2);
}

header .lang {
  grid-area: lang;
  margin: 0 15px;
  font-weight: bold;
  align-items: center;
}

header .lang-pc {
  display: flex;
}

header .lang-sp {
  display: none;
}

header .lang a {
  background: none;
  color: var(--white);
  padding: 1px 10px;
  border: 1px solid var(--white);
  line-height: 1.5;
}

header .lang a.current {
  background: var(--white);
  color: var(--black);
}

.hamburger,
#hamburger-check {
  display: none;
}

@media screen and (max-width: 520px) {
  header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    grid-template-rows: auto;
    grid-template-columns: 200px auto 1fr;
    grid-template-areas: none;
    padding: 10px;
  }

  header .logo {
    grid-row: 1/2;
    grid-column: 1/2;
  }

  header .logo .h1 {
    display: none;
  }

  header .lang {
    grid-row: 1/2;
    grid-column: 2/3;
  }

  header .lang-pc {
    display: none;
  }

  header .lang-sp {
    display: flex;
  }

  /**------------------------------ 
ハンバーガーjqueryなし
 ------------------------------**/
  .hamburger {
    --size: 44px;
    position: fixed;
    top: calc((var(--header-height) - var(--size)) / 2);
    right: 5px;
    display: flex;
    height: var(--size);
    width: var(--size);
    justify-content: center;
    align-items: center;
    z-index: 90;
    background: var(--white);
    color: var(--color_type1);
    box-shadow: 0 0 0 1px var(--color_type1);
    border-radius: 50px;
  }

  #hamburger-check {
    display: none;
  }

  /**タップされる前 open**/
  .hamburger span,
  .hamburger span:before,
  .hamburger span:after {
    content: "";
    display: block;
    height: 1px;
    width: 25px;
    border-radius: 3px;
    background-color: var(--black);
    position: absolute;
  }

  .hamburger span:before {
    bottom: 8px;
  }

  .hamburger span:after {
    top: 8px;
  }

  /**タップされたとき close**/
  #hamburger-check:checked ~ .hamburger span {
    background-color: var(--white);
  }

  #hamburger-check:checked ~ .hamburger span::before {
    bottom: 0;
    transform: rotate(45deg);
  }

  #hamburger-check:checked ~ .hamburger span::after {
    top: 0;
    transform: rotate(-45deg);
  }

  /**------------------------------ 
	ハンバーガー中身
	 ------------------------------**/
  header nav {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 100%;
    /*leftの値を変更してメニューを画面外へ*/
    z-index: 80;
    background-color: var(--black);
    color: var(--white);
    transition: all 0.5s;
    /*アニメーション設定*/

    display: flex;
    font-size: 1.2em;
    flex-flow: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 25px;
    padding: 70px 5% 20px;
    margin: 0;
  }

  #hamburger-check:checked ~ nav {
    left: 0;
    /*メニューを画面内へ*/
  }

  header nav .menu {
    flex-flow: wrap;
    gap: 1px;
    margin: 0 0 30px;
  }

  header nav .menu > * {
    width: calc(50% - 1px);
    min-width: auto;
    border-radius: 0;
    padding: 10px 5px;
  }

  header nav .gnav {
    flex-flow: column;
    gap: 20px;
    margin: 0 5%;
  }
}

/**================================================== 
 スマホfixボタン
================================================== **/

.sp_fix {
  display: none;
}

@media screen and (max-width: 520px) {
  .sp_fix {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    display: flex;
    flex-flow: wrap;
    align-items: stretch;
    z-index: 50;
    font-size: 0.9rem;
    font-size: 14px;
    gap: 1px;
    background: var(--white);
  }

  .sp_fix a {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 2px;
    padding: 10px 0;
    color: var(--white);
    background: var(--color_type2);
  }
  .sp_fix a.entry {
    flex: none;
    width: 100%;
    background: var(--color_type2);
    color: yellow;
    font-weight: bold;
    border-top: 1px solid var(--white);
    font-size: 1.1em;
    padding: 8px 0;
  }
  .sp_fix a svg {
    width: 15px;
    height: 15px;
    fill: var(--white);
  }
}

/**================================================== 
 footer
================================================== **/
footer {
  padding: 35px var(--over-width-half) 60px;
  background: var(--black);
  color: var(--white);
  --opacity: 0.7;
}

footer .footer-bnr {
  display: flex;
  justify-content: center;
  gap: 30px;
}

footer .footer-info {
  display: flex;
  justify-content: space-between;
  margin: 95px 0;
}

footer .footer-info .info {
  width: 450px;
}

footer .footer-info .logo {
  width: min(100%, 400px);
  height: auto;
  margin: 0 0 50px;
}

footer .footer-info dl {
  margin: 0 0 20px;
}

footer .footer-info dl dt {
  font-weight: bold;
  font-size: 1.1rem;
}

footer .footer-info .waku {
  border: 1px solid var(--white);
  padding: 20px;
  font-size: 0.9rem;
}

footer .footer-info .sitemap {
  width: fit-content;
  font-size: 1.1rem;
  font-weight: bold;

  column-count: 2;
}

footer .footer-info .sitemap a {
  display: block;
  margin: 0 0 15px;
}

footer .footer-info a:hover {
  color: var(--color_type2);
}

footer .footer-office {
  opacity: var(--opacity);
  border-top: 1px solid var(--white);
  padding: 60px 0;

  column-count: 3;
}

footer .footer-office dl {
  break-inside: avoid;
  margin: 0 0 20px;
}

footer .footer-office dl dt {
  font-weight: bold;
}

footer .footer-office dl dd {
  font-size: 0.9rem;
}

footer .footer-sns {
  opacity: var(--opacity);
  display: flex;
  justify-content: center;
  gap: 30px;
  margin: 0 0 50px;
}

footer .footer-sns svg {
  width: 30px;
  height: 30px;
  fill: var(--white);
}

footer .copyright {
  text-align: center;
  font-size: 0.8rem;
}

@media screen and (max-width: 520px) {
  footer {
    padding: 35px var(--over-width-half) 60px;
  }

  footer .footer-bnr {
    text-align: center;
    flex-flow: column;
    gap: 10px;
  }

  footer .footer-info {
    flex-flow: column;
    margin: 40px 0;
  }

  footer .footer-info .info {
    width: 100%;
    margin: 0 0 40px;
  }

  footer .footer-info .logo {
    width: min(300px, 100%);
    margin: 0 auto 20px;
  }

  footer .footer-info .waku {
    padding: 10px;
  }

  footer .footer-info .sitemap {
    --border: #555;
    width: 100%;
    font-size: 0.9rem;
    column-count: 1;
    display: flex;
    flex-flow: wrap;
    box-shadow: 0 0 0 1px var(--border) inset;
  }

  footer .footer-info .sitemap a {
    margin: 0;
  }

  footer .footer-info a {
    padding: 10px 0 10px 15px;
    width: calc(50% - 1px);
    border-bottom: 1px solid var(--border);
    margin: 0;
    font-size: 0.9rem;
  }

  footer .footer-info a:nth-child(odd) {
    border-right: 1px solid var(--border);
  }

  footer .footer-office {
    padding: 30px 0;

    column-count: 1;
  }

  footer .footer-office dl {
    margin: 0 0 10px;
  }

  footer .footer-sns {
    margin: 0 0 30px;
    gap: 20px;
  }
}

/**================================================== 
 アドレスセクション
================================================== **/
.address {
  background: url(../images/bg3.webp) no-repeat center / cover;
  padding: 120px var(--over-width-half);

  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0 80px;
}

.page-template-page-calculation .address {
  padding-top: 30px;
  padding-bottom: 30px;
}

.address .ttl-ttl-p {
  --titAm: 0 0 50px;
}

.page-template-page-calculation .address .ttl-ttl-p {
  --titAm: 0 0 20px;
}

.address .wrap-btn {
  width: fit-content;
  text-align: center;
}

:is(.h-toi, .h-tel) {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  text-align: center;
  font-weight: bold;
  padding: 15px;
  width: 400px;
  font-size: 1.3rem;
  border-radius: 50px;
  margin: 0 0 20px;
  font-style: normal;
}

:is(.h-toi, .h-tel) svg {
  width: 1.5rem;
  height: 1.5rem;
}

.h-toi {
  background: var(--color_type1);
  color: var(--white);
  border: 1px solid var(--color_type1);
}

.h-toi:hover {
  background: var(--white);
  color: var(--color_type1);
  border: 1px solid var(--color_type1);
}

.h-toi svg {
  fill: var(--white);
}

.h-toi:hover svg {
  fill: var(--color_type1);
}

.h-tel {
  background: var(--white);
  color: var(--color_type1);
  border: 1px solid var(--color_type1);
}

.h-tel:hover {
  background: var(--color_type1);
  color: var(--white);
  border: 1px solid var(--white);
}

.h-tel svg {
  fill: var(--color_type1);
}

.h-tel:hover svg {
  fill: var(--white);
}

@media screen and (max-width: 520px) {
  .address {
    padding: 60px var(--over-width-half);

    flex-flow: column;
    gap: 30px;
  }

  .page-template-page-calculation .address {
    padding-top: 15px;
    padding-bottom: 15px;
    gap: 15px;
  }

  .address .ttl-ttl-p {
    --titAm: 0 0 20px;
  }

  .address .wrap-btn {
    width: 100%;
  }

  :is(.h-toi, .h-tel) {
    width: 100%;
    margin: 0 0 20px;
  }
}

/**================================================== 
 snow monkey form
================================================== **/
.form .smf-form--simple-table .smf-item {
  display: flex;
  padding: 0;
  margin: 2px 0 20px;
  /*flex-flow: column;*/
}

.form .smf-form--simple-table .smf-item__col {
  flex: 1 1 auto;
}

.form .smf-form--simple-table .smf-item__col--label {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-flow: wrap;
  gap: 15px;
  padding: 20px 15px 15px;
  flex: none;
  max-width: none;
  width: 25%;
  color: var(--black);
  font-size: 1rem;
  font-weight: bold;
  line-height: 1;
}

.form .smf-checkbox-control {
  padding: 5px 0;
  display: block;
}

.form .smf-item__description {
  background: var(--color_type4);
  color: var(--white);
  border-radius: 3px;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: normal;
  margin: -3px 0 0;
}

.form .smf-form--simple-table .smf-item__col--controls {
  flex: 1;
  padding: 15px;
  line-height: 1;
}

.form .smf-error-messages {
  color: var(--color_type4);
}

.form .smf-form .smf-item [data-invalid="1"] {
  border-color: var(--color_type4);
}

/**file**/
.form .smf-form .smf-item .smf-file-control__label {
  background: var(--filebtn);
}

/**郵便番号**/
.form input[name="addpost"] {
  width: 10em;
}

/**生年月日 .birth追加すること**/
.form .birth .smf-item__controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

.form .birth select {
  margin: 0;
  border: none;
}

.form .birth div[data-name="birthyear"]:before {
  content: "西暦";
}

.form .birth div[data-name="birthyear"]:after {
  content: "年";
}

.form .birth div[data-name="birthmonth"]:after {
  content: "月";
}

.form .birth div[data-name="birthday"]:after {
  content: "日";
}

/**住所 都道府県セレクト .h-adr追加すること(JS的にも必要)**/
.form .h-adr select,
form select {
  margin: 0;
}

.form .h-adr .smf-item__controls {
  display: flex;
  flex-flow: wrap;
  align-items: center;
  gap: 5px 10px;
}

.form .h-adr .smf-item__controls div[data-name="addpost"] {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 5px;
}

.form .h-adr .smf-item__controls div[data-name="addpost"]:before {
  content: "〒 ";
}

.form .h-adr .smf-item__controls div[data-name="address2"] {
  flex: 1;
}

/**年齢**/
.form input[name="age"] {
  width: 10em;
}

/**個人情報保護方針**/
.form p {
  line-height: 2;
}

.form h2 {
  font-weight: bold;
  text-align: center;
  margin: 1em 0;
}

.pp-wrap {
  width: 100%;
  height: 200px;
  background: #fff;
  margin: 15px auto;
  overflow-y: auto;
  border: 1px solid #aaa;
  padding: 15px;
}

.pp-wrap :is(h2, h3) {
  font-weight: bold;
  font-size: 1.1rem;
  margin: 2em 0 0.5rem;
}

.pp-wrap h2 {
  text-align: center;
  margin: 1rem 0;
}

/**個人情報同意**/
.form div[data-name="agree"] {
  text-align: center;
}

/**ボタンと確認画面、完了画面**/
.form {
  --size: 300px;
  --_lighter-color-gray: var(--color_type1);
  --_form-control-border-color-focus: var(--color_type1);

  background-image: none;
}

.form .smf-action .smf-button-control__control {
  --_color-text: var(--white);
  --_form-control-border-color: var(--color_type1);
  width: var(--size);
  background-image: none;
}

.form .smf-action .smf-button-control__control:hover {
  --_color-text: var(--color_type1);
  --_form-control-border-color-hover: var(--color_type1);
  --_lighter-color-gray: var(--white);
}

.form .smf-complete-content {
  text-align: center;
}

.form .smf-error-messages {
  color: var(--color_type4);
}

@media screen and (max-width: 520px) {
  .form .smf-form--simple-table .smf-item {
    display: flex;
    flex-flow: column;
    margin: 2px 0;
  }

  .form .smf-form--simple-table .smf-item__col--label {
    font-size: 1rem;
    padding: 5px 0;
    margin: 0 0 5px;
    width: 100%;
  }

  .form .smf-form--simple-table .smf-item__col--controls {
    padding: 0;
    margin: 2px 0 20px;
  }

  .form .smf-radio-buttons-control__control {
    display: flex;
    gap: 20px;
  }

  .form .smf-select-control__control {
    width: 100%;
  }

  /**生年月日 .birth追加すること**/
  .form .birth .smf-item__controls {
    /*flex-flow: wrap;*/
    gap: 10px;
  }

  /**住所 都道府県セレクト .h-adr追加すること(JS的にも必要)**/
  .form .h-adr .smf-item__controls {
    flex-flow: column;
    align-items: flex-start;
    gap: 5px 10px;
  }

  .form .h-adr .smf-item__controls div[data-name="address2"] {
    width: 100%;
  }

  .form {
    --size: 100%;
  }

  .form .smf-complete-content {
    text-align: left;
  }
}

/**================================================== 
 追加共通
================================================== **/
.ttl-p {
  display: flex;
  align-items: center;
  gap: 122px;

  --titAm: 0;
}

.ttl-ttl-p {
  --titAm: 0 0 70px;

  --titCm: 0 0 30px;
  --titCfz: 1.6rem;
  --titClh: 1.5;

  --titDm: 0;

  --btnAbg: var(--white);
  --btnAc: var(--black);
  --btnAm: 60px 0 40px;
}

.ttl-ttl-p p {
  line-height: 2;
}

.ttl-contents-btn {
  display: grid;
  grid-template-columns: auto 180px;
  grid-template-rows: auto auto;
  grid-template-areas:
    "ttl btn"
    "contents contents";
  align-items: center;
  gap: 30px;

  --titAm: 0;
  --titBm: 0;
  --btnAm: 0;
}

.btn-btn {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px 30px;

  --btnAm: 0;
  --btnAw: 40%;
  --btnAp: 20px 1em;
}

@media screen and (max-width: 520px) {
  .btn-btn {
    flex-flow: column;
    --btnAw: 100%;
  }
}

/**------------------------------ 
↑直書き
grid-area: ttl;
grid-area: btn;
grid-area: contents;
 ------------------------------**/

@media screen and (max-width: 520px) {
  .ttl-p {
    flex-flow: column;
    align-items: flex-start;
    gap: 30px;

    --titAd: block;
  }

  .ttl-ttl-p {
    --titAm: 0 0 50px;

    --titCm: 0 0 20px;
    --titCfz: 1.6rem;
    --titClh: 1.5;

    --btnAm: 40px auto 0;
  }

  .ttl-contents-btn {
    grid-template-columns: 100%;
    grid-template-rows: auto auto auto;
    grid-template-areas:
      "ttl"
      "contents"
      "btn";

    --btnAm: 0 auto;
  }
}

/**================================================== 
 スライド
================================================== **/
:is(.swiper-btn, .swiper-btn2) .swiper-pagination {
  position: static;
}

:is(.swiper-btn, .swiper-btn2) .swiper-pagination-bullet-active {
  background: var(--black);
}

:is(.swiper-btn, .swiper-btn2) :is(.swiper-button-next, .swiper-button-prev) {
  --size: 32px;
  position: static;
  margin: 0;
  height: 2em;
  top: auto;
  left: auto;
  bottom: auto;
  right: auto;
}

:is(.swiper-btn, .swiper-btn2) :is(.swiper-button-next, .swiper-button-prev):after {
  flex: none;
  font-family: var(--ff);
  content: "→";
  font-size: 1rem;
  line-height: 1;
  width: var(--size);
  height: var(--size);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color_type1);
  color: var(--white);
  border-radius: 50px;
}

.swiper-btn2 :is(.swiper-button-next, .swiper-button-prev):after {
  background-color: var(--white);
  color: var(--color_type1);
}

:is(.swiper-btn, .swiper-btn2) :is(.swiper-button-prev):after {
  content: "←";
}

:is(.swiper-btn, .swiper-btn2) {
  width: 160px;
  margin: 0 5px 0 auto;
  padding: 5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.swiper-btn2 {
  color: var(--white);
}

@media screen and (max-width: 520px) {
  .swiper-btn {
    justify-content: center;
    margin: 0 auto 5px;
  }

  .swiper-btn2 {
    justify-content: space-between;
    margin: 0 auto 5px;
  }
}

/**================================================== 
拡大
==================================================*/
#view {
  position: relative;
  cursor: pointer;
}

#view:after {
  content: "+";
  background: var(--black);
  color: var(--white);
  width: 20px;
  height: 20px;
  font-weight: normal;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: absolute;
  bottom: 10px;
  right: 10px;
}

/**================================================== 
 アニメーション
================================================== **/
.invisible {
  visibility: hidden;
}

/**================================================== 
 TOP
================================================== **/
.page-hero {
  background: var(--black) url(../images/bg0.webp) no-repeat center bottom / 100% auto;
  padding: 1px 0;
  overflow: hidden;
}

.page-hero .item {
  padding: 25px var(--over-width-half);
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  position: relative;
}

.page-hero .item h2 {
  color: var(--white);
  font-family: var(--webf);
  font-size: 124px;
  line-height: 1;
  margin: 100px 0 0;
}

.page-hero .item small {
  display: block;
  font-size: 32px;
}

.page-hero .item picture {
  margin-left: -10px;
}

/**------------------------------ 
無限スライド
------------------------------**/
.hero-loop {
  height: 630px;
}

#hero-loop .swiper-wrapper {
  transition-timing-function: linear;
  margin: 85px 0 60px;

  --minus: 0px;
  --minus2: 0px;

  /**JSにも設定**/
  --loopwidth: 2352px;
}

#hero-loop li {
  min-width: var(--loopwidth);
}

.hero-loop :is(.top, .bottom) {
  display: flex;
  align-items: flex-end;
  width: 100%;
  position: relative;
  margin: 0 0 10px;
}

.hero-loop .slide1 {
  width: calc(205px - var(--minus));
  margin: 50px 60px 0;
}

.hero-loop .slide2 {
  width: calc(498px - var(--minus));
}

.hero-loop .slide3 {
  width: calc(288px - var(--minus));
  margin: 0 10px 0 0;
}

.hero-loop .slide4 {
  width: calc(246px - var(--minus));
  margin: 0 0 -35px 10px;
}

.hero-loop .slide5 {
  width: calc(276px - var(--minus));
  margin: 0 0 -84px 10px;
}

.hero-loop .slide6 {
  width: calc(354px - var(--minus));
  margin: 0 0 -26px 160px;
  margin-left: calc(160px - var(--minus2));
}

.hero-loop .slide7 {
  width: calc(338px - var(--minus));
  margin: 0 0 20px 190px;
  margin-bottom: calc(20px - var(--minus2));
}

.hero-loop .slide8 {
  width: calc(195px - var(--minus));
  margin: 0 0 0 5px;
}

.hero-loop .slide9 {
  width: calc(277px - var(--minus));
  margin: 0 0 -60px 10px;
}

.hero-loop .slide10 {
  width: calc(400px - var(--minus));
  margin: 0 0 -10px 60px;
}

.hero-loop .slide11 {
  width: calc(250px - var(--minus));
  margin: 0 0 -115px 70px;
}

.hero-loop .slide12 {
  width: calc(246px - var(--minus));
  margin: 0 0 30px 45px;
}

.hero-loop .slide13 {
  width: calc(246px - var(--minus));
  margin: 0 0 0 30px;
}

@media screen and (max-width: 520px) {
  .page-hero {
    background: var(--black) url(../images/bg0_sp.webp) no-repeat center bottom / 100% auto;
  }

  .page-hero .item {
    padding: 45px var(--over-width-half) 0;
    flex-flow: column;
    align-items: center;
  }

  .page-hero .item h2 {
    font-size: 56px;
    line-height: 1;
    margin: 0;
  }

  .page-hero .item small {
    font-size: 21px;
    margin: 40px 0 0;
  }

  .page-hero .item picture {
    width: 170px;
    margin: 0;
    position: absolute;
    top: 60px;
    right: 5%;
  }

  .hero-loop {
    height: 400px;
  }

  #hero-loop .swiper-wrapper {
    margin: 15px 0 60px;

    --minus: 100px;
    --minus2: 80px;

    /**JSにも設定**/
    --loopwidth: 1440px;
  }
}

/**------------------------------ 
バナー
 ------------------------------**/
.page-bnr {
  background: var(--black);
  padding: 70px var(--over-width-half);
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "bnr4 bnr1"
    "bnr4 bnr2"
    "bnr3 bnr3";
  gap: 18px;
}

.page-bnr a {
  grid-area: var(--area_name);
}

@media screen and (max-width: 520px) {
  .page-bnr {
    padding: 20px var(--over-width-half);
    grid-template-columns: 1fr;
    grid-template-areas:
      "bnr4"
      "bnr1"
      "bnr2"
      "bnr3";
    gap: 15px;
  }
}

/**------------------------------ 
プロダクト
 ------------------------------**/
.page-product {
  background: url(../images/bg1.webp) no-repeat top right;
  padding: 140px var(--over-width-half) 220px;
}

.page-product .ttl-p {
  margin: 0 0 70px;
}

.page-product .list-termA {
  margin: 80px 0 0;
}

@media screen and (max-width: 520px) {
  .page-product {
    background-size: 90% auto;
    padding: 60px var(--over-width-half) 80px;
  }

  .page-product .ttl-p {
    margin: 0 0 20px;

    --titAfz: 1.7rem;
  }

  .page-product .list-termA {
    margin: 50px 0 0;
  }
}

/**================================================== 
 製品一覧
================================================== **/

/**
slideの時  
#product-slid.list-productA＞ul
**/
#product-slide {
  overflow: hidden;
  width: var(--base-width);
  position: relative;

  /**JSにも設定**/
  --height: 732px;
}

#product-slide ul {
  height: var(--height);
}

#product-slide li.swiper-slide {
  height: auto;
  margin: 0;
}

#product-slide li.swiper-slide a {
  padding: 0 0 15px;
}

/**
slideじゃない時 
ul.list-productA
**/
ul.list-productA {
  display: flex;
  flex-flow: wrap;
  gap: 40px 10px;

  --btnAfz: 1.1rem;
  --btnAm: 15px auto;
  --btnAp: 15px 1em;
}

ul.list-productA li {
  width: calc((100% - (10px * 3)) / 4);
  padding-bottom: 20px;
}

.list-productA .swiper-wrapper li {
  padding-bottom: 0;
}

.list-productA li a:not(.btnA) {
  display: block;
}

.list-productA li a:not(.btnA):hover {
  color: var(--color_type2);
}

.list-productA li figure {
  width: 100%;
  background: var(--color_type3);
  position: relative;
  aspect-ratio: 768/693;
}

.list-productA li figure img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.list-productA li figure figcaption {
  background: var(--color_type1);
  color: var(--white);
  font-family: var(--webf), var(--ff);
  font-weight: bold;
  position: absolute;
  top: 0;
  left: 0;
  width: fit-content;
  padding: 10px;
  font-size: 1.6rem;
  line-height: 1;
}

.list-productA li h3 {
  font-weight: bold;
  font-size: 1.15rem;
  text-align: center;
  line-height: 1.3;
  margin: 15px 0 0;
  height: auto;
}

.list-productA .swiper-wrapper li h3 {
  height: 5.3em;
}

.list-productA li h3 i {
  display: block;
  font-weight: normal;
  font-size: 0.9rem;
  font-style: normal;
}

@media screen and (max-width: 520px) {
  #product-slide {
    padding: 0 0 5px;
    /**JSにも設定**/
    --height: 450px;
  }

  #product-slide li.swiper-slide a {
    padding: 0 0 5px;
  }

  ul.list-productA {
    display: flex;
    flex-flow: wrap;
    gap: 30px 10px;

    --btnAw: fit-content;
    --btnAp: 10px 1em;
    --btnAfz: 1rem;
  }

  ul.list-productA li {
    width: calc((100% - (10px * 1)) / 2);
  }

  .list-productA li figure figcaption {
    padding: 5px 8px;
    font-size: 1rem;
  }

  .list-productA li h3 {
    font-size: 0.9rem;
    margin: 8px 0 0;
  }

  .list-productA li h3 i {
    font-size: 0.8rem;
  }
}

/**------------------------------
RKの実例と同じ
------------------------------**/
.list-works {
  --gap: 15px;
  display: flex;
  flex-flow: wrap;
  gap: var(--gap);
  margin: 0 0 80px;
}

.list-works > * {
  width: calc((100% - var(--gap) * 2) / 3);
  background: color-mix(in srgb, var(--color_type1) 3%, var(--white) 100%);
  padding: 15px 15px 25px;

  --btnAw: 90%;
  --btnAm: 15px auto 5px;
}

.list-works picture {
  display: block;
  aspect-ratio: var(--asp-post);
  width: 100%;
  margin: 0 0 15px;
}

.list-works picture img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.list-works :is(strong, .the_content) {
  padding: 0 5px;
  word-break: break-all;
}

.list-works strong {
  display: block;
  font-weight: bold;
  font-size: 1.1rem;
  margin: 0 0 5px;
}

@media screen and (max-width: 520px) {
  .list-works > * {
    width: calc((100% - var(--gap) * 1) / 2);
    padding: 8px 8px 15px;
  }

  .list-works :is(strong, .the_content) {
    padding: 0;
    line-height: 1.3;
  }

  .list-works strong {
    font-size: 1rem;
  }
}

/**================================================== 
 カテゴリ一覧
================================================== **/
.list-termA {
  display: flex;
  flex-flow: wrap;
  justify-content: space-between;
  gap: 50px;
}

.list-termA li {
  width: calc((100% - (50px * 1)) / 2);
  --btnAm: 20px auto 0;
}

.list-termA li a {
  display: block;
}

.list-termA li a:hover {
  color: var(--color_type2);
}

.list-termA li figure {
  width: 100%;
  background: var(--color_type3);
  position: relative;
}

.list-termA li figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media screen and (max-width: 520px) {
  .list-termA {
    flex-flow: column;
    gap: 50px;
  }

  .list-termA li {
    width: 100%;
    --btnAm: 20px auto 0;
  }
}

/**------------------------------ 
	強み
	 ------------------------------**/

/*==============================
	アコーディオン
	==============================*/
.page-strengths {
  padding: 0 5% 0 0;
  position: relative;
  margin: 0 0 120px;
}

#accordion {
  position: relative;
  width: 100%;
  margin: 0 auto;
  display: flex;
  gap: 80px;
  --width: 50vw;
}

#accordion::before {
  content: "";
  display: block;
}

#accordion > *,
#accordion::before {
  width: var(--width);
  flex: none;
}

#accordion::before,
#accordion picture {
  aspect-ratio: 670/1038;
  max-height: 980px;
}

#accordion ul {
  width: auto;
  margin: 0;
  flex: 1;
}

#accordion .ttl-ttl-p {
  flex: 1;
  cursor: pointer;
  margin: 30px 0 0;
}

#accordion dl {
  flex: 1;
  cursor: pointer;
}

#accordion picture {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: var(--width);
  margin: 0;
  flex: none;
}

#accordion picture {
  height: 0;
  opacity: 0;
  transition: 0.3s;
}

#accordion .open picture {
  height: auto;
  opacity: 1;
}

#accordion img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/**list**/
.list-accordion {
  padding: 0 0 80px;

  --titBfz: 2.25rem;
  --titBd: block;
  --titBgap: 3px;
  --titBp: 0 0 0 40px;
  --titBm: 0;
}

.list-accordion small {
  display: block;
  position: absolute;
  top: -40px;
  left: -15px;
}

.list-accordion li .ttl-ttl-p {
  margin: 0 0 50px;

  --titAm: 0 0 50px;
}

.list-accordion dl {
  display: grid;
  grid-template-columns: 200px 1fr;
  padding: 45px 15px 15px;
  border-bottom: 2px solid var(--color_type3);
  position: relative;
}

.list-accordion dl:before {
  content: "";
  height: 2px;
  width: 47px;
  background: var(--color_type1);
  position: absolute;
  left: 0;
  bottom: -2px;
}

/**button**/
.page-strengths .btnA {
  --btnAw: 180px;
  position: absolute;
  bottom: 0;
  right: 5%;
}

@media screen and (max-width: 520px) {
  .page-strengths {
    margin: 0 0 40px;
    padding: 0 5% 40px;
    position: relative;
  }

  #accordion {
    position: relative;
    width: 100%;
    margin: 0 auto;
    display: block;
    gap: 40px;
    --width: 100%;
  }

  #accordion::before {
    display: none;
  }

  #accordion picture {
    aspect-ratio: 520/423;
  }

  #accordion ul {
    width: auto;
    margin: 0;
    flex: 1;
  }

  #accordion picture {
    position: relative;
    left: auto;
    top: auto;
  }

  #accordion picture {
    height: auto;
    opacity: 1;
    transition: 0.3s;
  }

  #accordion picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /**list**/
  .list-accordion {
    padding: 0 0 20px;

    --titBfz: 2rem;
    --titBta: center;
    --titBlh: 1;
    --titBm: 0;
  }

  .list-accordion small {
    width: 100px;
    display: block;
    position: absolute;
    top: -30px;
    left: 20%;
  }

  .list-accordion li {
    position: relative;
  }

  .list-accordion li.open {
    display: flex;
    flex-flow: column-reverse;
    gap: 20px;
  }

  #accordion .list-accordion li:not(.open) picture {
    position: absolute;
    left: 0;
    bottom: 15px;
    width: 140px;
  }

  .list-accordion dl {
    display: grid;
    grid-template-rows: auto 115px;
    grid-template-columns: 140px 1fr;
    grid-template-areas:
      "dt dt"
      "pic dd";
    gap: 15px 10px;
    padding: 35px 0 15px;
  }

  .list-accordion dl dt {
    grid-area: dt;
  }

  .list-accordion dl dd {
    grid-area: dd;
  }

  /**button**/
  .page-strengths .btnA {
    --btnAw: 180px;
    --btnAm: 1px auto;
    position: relative;
    bottom: auto;
    right: auto;
  }
}

/**================================================== 
使命と目的 
================================================== **/
.page-purpose {
  background: var(--black);
  color: var(--white);
  padding: 1px 0 1px 8%;

  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 100px;
}

.page-purpose .ttl-ttl-p {
  flex: 1;

  --titAc: var(--white);
  --titAc_i: var(--white);

  --titCc: var(--white);
}

.page-purpose .picture {
  width: min(40%, 660px);
}

.page-purpose .picture img {
  width: 100%;
  height: auto;
}

@media screen and (max-width: 520px) {
  .page-purpose {
    padding: 40px 0 0;

    flex-flow: column;
    gap: 40px;
  }

  .page-purpose .ttl-ttl-p {
    margin: 0 5%;
  }

  .page-purpose .picture {
    width: 100%;
  }
}

/**------------------------------ 
お知らせ
 ------------------------------**/
.page-news {
  padding: 100px var(--over-width-half) 140px;
}

.page-news .list-postA {
  margin: 40px 0 0;
}

@media screen and (max-width: 520px) {
  .page-news {
    padding: 60px var(--over-width-half) 80px;
  }

  .page-news .list-postA {
    margin: 1px 0 10px;
  }
}

/**================================================== 
 お知らせブログ一覧
================================================== **/
.list-postA {
  display: flex;
  justify-content: space-between;
  flex-flow: wrap;
  gap: 50px;
}

.list-postA > * {
  width: calc((100% - 50px) / 2);
}

.list-postA a {
  --size: 258px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: var(--size) 1fr;
  grid-template-areas:
    "pic time"
    "pic h3"
    "pic term";
  align-items: start;
  gap: 15px;
  line-height: 1.5;
}

.list-postA picture {
  grid-area: pic;
  aspect-ratio: var(--asp-post);
  display: block;
  width: var(--size);
  height: auto;
}

.list-postA picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.list-postA .time {
  grid-area: time;
  margin: 8px 0 0;
}

.list-postA h3 {
  grid-area: h3;
  font-weight: bold;
}

.list-postA .post-term {
  grid-area: term;
  margin: 0 0 8px;
}

@media screen and (max-width: 520px) {
  .list-postA {
    display: flex;
    justify-content: space-between;
    flex-flow: column;
    gap: 40px;
  }

  .list-postA > * {
    width: 100%;
  }

  .list-postA a {
    --size: 150px;
    gap: 5px 15px;
  }

  .list-postA .time {
    margin: 0;
  }

  .list-postA .post-term {
    margin: 0;
    gap: 3px 5px;
  }
}

/**------------------------------ 
リクルート
 ------------------------------**/
.page-recruit {
  padding: 120px var(--over-width-half) 1px;
  background:
    url(../images/recruit_sb_catch.webp) no-repeat top 100px right 90px,
    url(../images/bg2.webp) no-repeat center / cover;
  color: var(--white);
  overflow: hidden;

  --titAc: var(--white);
  --titAc_i: var(--white);

  --titBfz: 1.7rem;
  --titBjc: center;
  --titBc: var(--white);

  --btnAbg: var(--white);
  --btnAc: var(--color_type1);
  --btnAm: 0 auto 100px;

  --btnBw: 320px;
  --btnBm: 0 auto 100px;
  --btnBp: 15px 1em;
}

.page-recruit .ttl-ttl-p {
  width: 50%;
}

.page-recruit .list-postB {
  margin: 60px 0;

  --btnBw: 80%;
  --btnBp: 5px 1em;
  --btnBm: 25px auto 0;
  --btnBfz: 14px;
}

.page-recruit .swiper-btn2 {
  display: none;
}

.list-movie {
  display: flex;
  flex-flow: wrap;
  gap: 30px;
}

.list-movie li {
  width: calc((100% - 30px * 1) / 2);
  aspect-ratio: 16/9;
  padding: 5px;
  background: var(--white);
}

.list-movie li iframe {
  width: 100%;
  height: 100%;
}

.list-movie li p {
  display: none;
}

.page-recruit .list-movie {
  margin: 0 auto 100px;
}

@media screen and (max-width: 520px) {
  .page-recruit {
    padding: 40px var(--over-width-half) 1px;
    background-size:
      250px auto,
      cover;
    background-position:
      top 90px left 70px,
      center;

    --btnAm: 30px auto 50px;

    --btnBw: 100%;
    --btnBm: 30px auto 50px;
  }

  .page-recruit .ttl-ttl-p {
    width: 100%;

    --titAm: 0 0 100px;
  }

  .page-recruit .list-postB {
    margin: 30px 0;
  }

  .page-recruit .swiper-btn2 {
    display: flex;
  }

  .list-movie {
    gap: 15px;
  }

  .list-movie li {
    width: 100%;
  }

  .page-recruit .list-movie {
    margin: 0 auto 50px;
  }
}

/**================================================== 
 スタッフインタビュー一覧/採用一覧
================================================== **/
.list-postB {
  width: 100%;
  display: flex;
  flex-flow: wrap;
  gap: 50px;
}

.list-postB > * {
  width: calc((100% - (50px * 3)) / 4);
}

.list-postB h3 {
  font-weight: bold;
  font-size: 1.4rem;
  margin: 20px 0 15px;
  line-height: 1.3;
}

.list-postB h3 small {
  display: block;
}

.list-postB picture {
  display: block;
  aspect-ratio: 1/1;
  width: 100%;
  height: auto;
}

.list-postB picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media screen and (max-width: 520px) {
  .list-postB {
    flex-flow: column;
    gap: 40px;
  }

  #sp-slide {
    overflow: hidden;
  }

  #sp-slide .list-postB {
    flex-flow: row;
    gap: 0;
  }

  .list-postB > * {
    width: 100%;
  }

  .list-postB h3 {
    font-size: 1.3rem;
    margin: 15px 0 5px;
  }
}

/**================================================== 
 無限スライド
================================================== **/
#infinite-loop .swiper-wrapper {
  transition-timing-function: linear;
}

.infinite-loop img {
  aspect-ratio: 1/1;
  width: 100%;
  max-width: none;
  object-fit: cover;
}

@media screen and (max-width: 520px) {
  .infinite-loop {
    margin: 40px auto 1px;
    gap: 20px;
  }
}

/**------------------------------ 
SDGS
 ------------------------------**/
.page-sdgs {
  padding: 100px var(--over-width-half);

  display: grid;
  grid-template-rows: auto auto 1fr;
  grid-template-columns: 1fr 500px;
  grid-template-areas:
    "ttl pic"
    "p pic"
    "btn pic";
  align-items: flex-start;
  gap: 20px 50px;

  --titCm: 0;
  --btnAm: 20px 0 0;
  --btnAw: 300px;
}

.page-sdgs .picture img {
  display: block;
  margin: 0 auto 30px;
}

.page-sdgs .picture img[src$=".svg"] {
  width: 440px;
}

@media screen and (max-width: 520px) {
  .page-sdgs {
    padding: 50px var(--over-width-half);

    display: grid;
    grid-template-rows: auto auto auto auto;
    grid-template-columns: 100%;
    grid-template-areas:
      "ttl"
      "p"
      "pic"
      "btn";
    gap: 20px;

    --titCm: 0;
    --btnAm: 0 auto;
  }

  .page-sdgs .picture img {
    width: 100%;
  }

  .page-sdgs .picture img[src$=".svg"] {
    width: 90%;
  }
}

/**================================================== 
お知らせブログ一覧 
================================================== **/
.archive-sidebar {
  padding: 40px var(--over-width-half);
  background-color: color-mix(in srgb, var(--black) 5%, var(--white) 0%);
  margin: 0;
  display: flex;
  flex-flow: wrap;
  gap: 15px;
}

.archive-sidebar a {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 5px 30px;
  border-radius: 50px;
  background: var(--white);
}

.archive-sidebar a svg {
  width: 0.9rem;
  height: 0.9rem;
  color: var(--black);
  margin-top: 0.2rem;
}

.archive-sidebar :is(a:hover, a.current) {
  background: var(--color_type1);
  color: var(--white);
}

.archive-sidebar :is(a:hover, a.current) svg {
  fill: var(--white);
}

.archive-news {
  padding: 80px var(--over-width-half) 100px;
}

@media screen and (max-width: 520px) {
  .archive-sidebar {
    padding: 20px var(--over-width-half);
    margin: 0;
    gap: 10px;
  }

  .archive-sidebar a {
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 5px 30px;
    border-radius: 50px;
    background: var(--white);
  }

  .archive-sidebar a svg {
    width: 0.9rem;
    height: 0.9rem;
    color: var(--black);
    margin-top: 0.2rem;
  }

  .archive-sidebar :is(a:hover, a.current) {
    background: var(--black);
    color: var(--white);
  }

  .archive-sidebar :is(a:hover, a.current) svg {
    fill: var(--white);
  }

  .archive-news {
    padding: 30px var(--over-width-half) 50px;
  }
}

/**================================================== 
 お知らせ詳細
================================================== **/

.single-detail {
  text-align: center;
  padding: 80px var(--over-width-half) 100px;

  --titBta: center;
  --titBjc: center;
  --titBm: 0 auto 60px;

  --btnBbd: 1px solid var(--color_type1);
  --btnBw: 320px;
}

.single-detail .post-term {
  justify-content: center;
}

.post-term_wrap {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin: 0 0 30px;
}

.single-list {
  padding: 100px var(--over-width-half) 100px;
  background-color: color-mix(in srgb, var(--color_type1) 3%, var(--white) 0%);
}

.prev-next {
  margin: 100px auto 0;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-areas: "prev list next";
  border-top: 1px solid var(--color_type3);
  font-size: 0.9rem;
}

.prev-next a {
  padding: 15px;
  grid-area: list;
}

.prev-next a[rel="prev"] {
  text-align: left;
  grid-area: prev;
}

.prev-next a[rel="prev"]:before {
  content: "« ";
}

.prev-next a[rel="next"] {
  text-align: right;
  grid-area: next;
}

.prev-next a[rel="next"]:after {
  content: " »";
}

@media screen and (max-width: 520px) {
  .single-detail {
    padding: 30px var(--over-width-half) 50px;

    --titBfz: 1.5rem;
    --titBta: left;
    --titBm: 0 auto 30px;
  }

  .single-list {
    padding: 50px var(--over-width-half);
  }

  .prev-next {
    margin: 50px auto 0;
  }

  .prev-next a {
    padding: 10px 0;
  }
}

/**================================================== 
投稿の詳細 
================================================== **/

.the_content {
  text-align: left;
}

.the_content
  :is(
    h1.has-background,
    h2.has-background,
    h3.has-background,
    h4.has-background,
    h5.has-background,
    h6.has-background
  ) {
  padding: 15px;
}

.the_content .thumbnail {
  text-align: center;
  margin: 0 auto 1.5em;
}

.the_content :is(h1, h2, h3) {
  margin: 1em 0;
  padding: 0.5em;
  line-height: 1.3;
  border-bottom: 2px solid var(--color_type3);
  position: relative;
  font-weight: bold;
  color: var(--color_type1);
}

.the_content :is(h1, h2, h3):before {
  content: "";
  height: 2px;
  width: 47px;
  background: var(--color_type1);
  position: absolute;
  left: 0;
  bottom: -2px;
}

.the_content :is(h4, h5, h6) {
  margin: 1em 0;
  line-height: 1.3;
  font-weight: bold;
  color: var(--color_type1);
}

.the_content h1.the_title {
  display: flex;
  align-items: center;
  gap: 20px;

  font-size: 1.6em;
  margin: 0 0 40px;
  line-height: 1.5;
  text-align: left;
  color: var(--color_type1);
  font-weight: bold;
}

.the_content h1.the_title i {
  --size: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1.5;
  width: var(--size);
  height: var(--size);
  background: var(--color_type1);
  color: var(--white);
  text-align: center;
  border-radius: 50px;
  font-size: 12px;
}

.the_content p {
  margin: 15px 0;
  padding-left: 10px;
  padding-right: 10px;
  line-height: 2;
}

.the_content h1 {
  font-size: 1.6rem;
}

.the_content h2 {
  font-size: 1.5rem;
}

.the_content h3 {
  font-size: 1.4rem;
}

.the_content h4 {
  font-size: 1.3rem;
}

.the_content h5 {
  font-size: 1.2rem;
}

.the_content h6 {
  font-size: 1.1rem;
}

.the_content .wp-block-button__link {
  background: var(--color_type1);
}

.the_content .wp-block-button .wp-block-button__link.is-style-outline:not(.has-background),
.the_content .wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background) {
  background: var(--white);
}

.the_content .wp-block-button .wp-block-button__link.is-style-outline:not(.has-text-color),
.the_content .wp-block-button.is-style-outline > .wp-block-button__link:not(.has-text-color) {
  color: var(--color_type1);
}

.the_content iframe {
  display: block;
  aspect-ratio: 16/9;
  width: 100%;
  height: auto;
  margin: 1em 0;
}

.the_content .wp-block-image {
  margin: 1em 0;
  overflow: hidden;
}

.the_content table :is(th, td) {
  border: 1px solid var(--black);
  border-color: color-mix(in srgb, var(--black) 5%, var(--white) 0%);
  padding: 0.5em;
}

.the_content .wp-block-columns.is-layout-flex {
  gap: calc(8% - 20px);
}

@media screen and (max-width: 520px) {
  .the_content {
    margin-bottom: 40px;
    --wp--preset--font-size--large: 26px;
    --wp--preset--font-size--x-large: 32px;
  }

  .the_content h1.titB {
    font-size: 26px;
  }

  .the_content .wp-block-media-text .wp-block-media-text__content {
    padding: 0;
  }
}

/**================================================== 
 製品情報
================================================== **/
/**------------------------------ 
一覧カテゴリ説明
 ------------------------------**/
.product-terms {
  background: var(--color_type1);
  color: var(--white);
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  gap: 100px;
  padding: 0 0 0 8%;
}

.product-terms .ttl-ttl-p {
  flex: 1;
  padding: 50px 0;
  margin: auto 0;

  --titAc: var(--white);
  --titAc_i: var(--white);

  --titDm: 1em 0 0.8em;
  --titDw: fit-content;
  --titDp: 5px 15px;

  --titCc: var(--white);

  --btnAw: 420px;
  --btnAm: 2em 0 0;
}

.product-terms .picture {
  width: min(40%, 660px);
}

.product-terms .picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-terms2 {
  padding: 60px var(--over-width-half);
  background-color: color-mix(in srgb, var(--color_type1) 5%, var(--white) 0%);
}

.box-exp {
  display: grid;
  grid-template-rows: auto 1fr;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-areas:
    "hA hB hC hD"
    "pA pB pC pD";
  gap: 0 1%;
}

.box-exp h3 {
  background: var(--color_type1);
  color: var(--white);
  padding: 15px;
  font-weight: bold;
}

.box-exp h3 i {
  display: block;
  font-size: 0.8rem;
  color: var(--color_type2);
}

.box-exp p {
  background: var(--white);
  padding: 15px 20px;
}

.product-terms2 .list-exp li {
  width: calc((100% - (3% * 3)) / 4);
  border: 1px solid var(--color_type1);
}

.archive-products {
  padding: 80px var(--over-width-half) 100px;
}

@media screen and (max-width: 520px) {
  .product-terms {
    flex-flow: column;
    gap: 15px;
    padding: 0;
  }

  .product-terms .ttl-ttl-p {
    width: 90%;
    padding: 20px 0;
    margin: 0 auto;

    --btnAw: 100%;
    --btnAm: 1em 0 0;
  }

  .product-terms .picture {
    width: 100%;
    height: 60vw;
  }

  .product-terms2 {
    padding: 20px var(--over-width-half);
  }

  .box-exp {
    display: grid;
    grid-template-rows: repeat(4, auto auto);
    grid-template-columns: 1fr;
    grid-template-areas:
      "hA"
      "pA"
      "hB"
      "pB"
      "hC"
      "pC"
      "hD"
      "pD";
    gap: 0;
  }

  .box-exp h3 {
    padding: 5px 15px;
  }

  .box-exp p {
    padding: 8px 15px;
  }

  .archive-products {
    padding: 30px var(--over-width-half) 50px;
  }
}

/**------------------------------ 
詳細 - the_contentも使用
 ------------------------------**/
.product-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  margin: 0 0 50px;

  --titBm: 0;
}

.product-title div {
  background: var(--color_type1);
  color: var(--white);
  font-family: var(--webf), var(--ff);
  font-weight: bold;
  width: fit-content;
  padding: 10px;
  font-size: 1.6rem;
  line-height: 1;
}

.product-box {
  display: flex;
  flex-flow: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  text-align: left;
  gap: 30px;
  margin: 0 0 40px;

  --btnAm: 0 auto;
  --btnAw: fit-content;
  --btnAp: 15px 3em;
}

.product-box h2 {
  width: 100%;
  margin: 0;
}

.product-box .figure {
  width: 400px;
  flex: none;
  border: 1px solid var(--black);
  border-color: color-mix(in srgb, var(--black) 5%, var(--white) 0%);
  padding: 15px;
}

.product-box .p {
  flex: 1;
}

.product-box .btn {
  width: 100%;
}

@media screen and (max-width: 520px) {
  .product-title {
    flex-flow: wrap;
    gap: 15px;
    margin: 0 0 30px;

    --titBai: center;
    --titBta: center;
  }

  .product-title h1 {
    width: 100%;
  }

  .product-box {
    gap: 0;
    margin: 0 0 20px;
  }

  .product-box h2 {
    margin: 0 0 1em;
  }

  .product-box .figure {
    width: 100%;
  }
}

/**------------------------------ 
製品CVバナー領域
 ------------------------------**/
.post-bnr {
  display: flex;
  justify-content: space-between;
  gap: 50px;
  position: relative;
  font-weight: bold;
  color: var(--white);
  padding: 60px var(--over-width-half);
  background: var(--color_type1);
}

.post-bnr a {
  flex: 1;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 40px;
  border: 1px solid var(--white);
  font-size: 1.2rem;
  line-height: 1.5;
}

.post-bnr a picture {
  flex: none;
  width: 40%;
  aspect-ratio: 520/263;
}

.post-bnr a picture img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.post-bnr a small {
  font-family: var(--webf);
  font-size: 1rem;
  display: block;
  font-style: italic;
  color: var(--color_type2);
}

.post-bnr a:hover {
  --opacity: 0.7;
  opacity: var(--opacity);
}

@media screen and (max-width: 520px) {
  .post-bnr {
    flex-flow: column;
    gap: 20px;
    padding: 30px var(--over-width-half);
  }

  .post-bnr a {
    gap: 10px;
    font-size: 1rem;
  }

  .post-bnr a picture {
    width: 40%;
    aspect-ratio: 520/263;
  }
}

/**================================================== 
 計算
================================================== **/
/* -------------------------------
   鏡板・円錐の計算情報
------------------------------- */
.page-calculation {
  padding: 60px var(--over-width-half);
}

.page-calculation aside {
  border: 5px solid var(--color_type3);
  padding: 10px 20px 20px;
  margin: 20px auto 0;
}

.page-calculation aside dt {
  font-weight: bold;
  color: var(--color_type1);
  font-size: 1.1rem;
  margin: 0 0 10px;
}

.page-calculation aside ul {
  display: flex;
  flex-flow: wrap;
  gap: 5px;
}

.page-calculation aside ul li {
  background-color: color-mix(in srgb, var(--color_type3) 50%, var(--white) 0%);
  padding: 3px 10px;
}

.page-calculation aside ul li b {
  color: var(--color_type1);
}

.sec-calc {
  padding: 60px var(--over-width-half);

  --titBbg: var(--color_type1);
  --titBc: var(--white);
  --titBfz: 1.3rem;
  --titBm: 0 0 1em;
  --titBp: 10px;
  --titBjc: center;
}

.sec {
  padding: 1px var(--over-width-half) 60px;
}

.sec .tit {
  font-size: 1.5rem;
  margin: 0 0 1em;
}

.sec .sec-inner {
  display: flex;
  margin: 20px auto 0;
}

.sec .sec-inner picture {
  border: 5px solid var(--color_type3);
  border-color: color-mix(in srgb, var(--color_type3) 50%, var(--white) 0%);
  flex: none;
  width: 250px;
}

.sec .sec-inner > div {
  display: flex;
  flex: 1;
}

.sec .inputForm {
  background-color: color-mix(in srgb, var(--color_type3) 50%, var(--white) 0%);
}

.sec .resultForm {
  background: var(--black);
  color: var(--white);
  display: flex;
  flex-flow: column;
}

.sec :is(.inputForm, .resultForm) {
  width: 50%;
  padding: 25px;
  position: relative;
}

.sec :is(.inputForm, .resultForm) dl {
  width: 100%;
  display: grid;
  grid-template-rows: auto;
  grid-template-columns: 1fr 140px 50px;
  gap: 5px;
  margin: 0 0 5px;
}

.sec :is(.inputForm) dl {
  grid-template-columns: 1fr 140px 1fr;
}

.sec :is(.inputForm, .resultForm) dl dt {
  text-align: right;
}

.sec :is(.inputForm, .resultForm) input[type="text"] {
  border: 1px solid var(--color_type3);
  background: var(--white);
  padding: 4px;
  line-height: 20px;
  width: 100%;
}

.sec :is(.inputForm, .resultForm) input:disabled {
  background: var(--color_type3);
  -webkit-text-fill-color: var(--black);
}

.sec .resultForm p {
  font-size: 0.8rem;
  margin: auto 0 0;
}

.sec .resultForm button {
  display: flex;
  -ms-align-items: center;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: fit-content;
  text-decoration: none;
  background: var(--white);
  color: var(--color_type4);
  border: 1px solid var(--color_type4);
  text-align: center;
  padding: 5px 15px;
  margin: auto 0 0 auto;
  border-radius: 50px;
  cursor: pointer;
}
.sec .resultForm button:before {
  content: "";
  width: 1.2em;
  height: 1.2em;
  background: url(../images/icon_pdf.png) no-repeat center / contain;
}

.sec .resultForm .btnB {
  --btnBp: 5px 30px 5px 15px;
  --btnBm: auto 0 0 auto;
  --btnBfz: 1rem;
  font-weight: normal;
}
.sec .resultForm .calc-contact-btn {
  --btnBbg: var(--_color-red);
  --btnBc: var(--white);
}

.sec .btn {
  margin: 30px auto 0;
  width: 140px;
}

.sec .btn button {
  display: block;
  width: 100%;
  text-decoration: none;
  background: var(--black);
  color: var(--white);
  text-align: center;
  padding: 5px;
  border-radius: 50px;
}

@media screen and (max-width: 520px) {
  .page-calculation {
    padding: 40px var(--over-width-half);
  }

  .sec-calc {
    padding: 1px var(--over-width-half);
    --titBm: 2em 0 1em;
  }

  .sec {
    padding: 1px 0 30px;
  }

  .sec .sec-inner {
    flex-flow: column;
    margin: 20px auto 0;
  }

  .sec .sec-inner picture {
    width: 100%;
  }

  .sec .sec-inner > div {
    flex-flow: column;
    flex: 1;
  }

  .sec :is(.inputForm, .resultForm) {
    width: 100%;
    padding: 25px 10px;
    position: relative;
  }

  .sec :is(.inputForm, .resultForm) dl {
    grid-template-columns: 1fr 140px 2.5em;
  }

  .sec :is(.inputForm) dl {
    grid-template-columns: 1fr 140px 1fr;
  }

  .sec .resultForm p {
    margin: 2em 0 0;
  }

  .sec .resultForm button {
    margin: 20px auto 0;
  }

  .sec .resultForm .btnB {
    margin: 20px auto 0;
    max-width: 100%;
  }
}

/**================================================== 
 採用ページ（固定ページ/スタッフ一覧含む）
================================================== **/
.recruit-hero {
  background: var(--black);
  position: relative;
  padding: 80px 1px;
  margin-top: -1px;

  --btnBm: 40px var(--over-width-half) 0 auto;
}

.recruit-hero figure {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 50%;
  height: 100%;
  opacity: 0.8;
}

.recruit-hero figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.recruit-hero h1 {
  background: var(--black);
  color: var(--white);
  font-weight: bold;
  font-size: 2rem;
  padding: 5px 100px 5px var(--over-width-half);
  position: absolute;
  bottom: 80px;
  left: 0;
  z-index: 5;
  text-align: center;
}

.recruit-hero .item {
  width: fit-content;
  margin: 0 var(--over-width-half) 0 auto;
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  position: relative;
  flex-flow: column;
  z-index: 2;
}

.recruit-hero .item h2 {
  color: var(--white);
  font-family: var(--webf);
  font-size: 124px;
  line-height: 1;
}

.recruit-hero .item picture {
  margin-top: -50px;
}

.recruit-hero .item picture img {
  width: 250px;
  height: auto;
}

.recruit-hero .item p {
  color: var(--white);
  display: block;
  font-weight: bold;
  text-align: right;
  font-size: 26px;
  line-height: 1.5;
  margin: 15px 0 0;
}

.recruit-hero a {
  position: relative;
  z-index: 2;
}

@media screen and (max-width: 520px) {
  .recruit-hero {
    padding: 1px;

    --btnBm: 30px auto 40px;
  }

  .recruit-hero figure {
    position: relative;
    width: 100%;
    height: 60vw;
  }

  .recruit-hero h1 {
    font-size: 1.6rem;
    padding: 5px 40px;
    top: 40px;
    bottom: auto;
  }

  .recruit-hero .item {
    padding: 1px var(--over-width-half);
  }

  .recruit-hero .item h2 {
    font-size: 52px;
    line-height: 1;
    margin: -10vw 0 0;
  }

  .recruit-hero .item p {
    font-size: 18px;
    margin: 0;
  }

  .recruit-hero .item picture {
    width: 170px;
    margin-top: -20px;
  }
}

.recruit-selling {
  --bgc: 233, 233, 233;
  background: linear-gradient(
    170deg,
    var(--black),
    var(--black) 27%,
    rgba(var(--bgc), 0.5) 27.1%,
    rgba(var(--bgc), 0.5) 100%
  );
  padding: 80px var(--over-width-half) 60px;
}

.recruit-selling :is(.list-boxA, .list-boxB) {
  margin: 0 0 50px;
}

.recruit-selling :is(.list-boxA, .list-boxB) :is(h3, p) {
  padding: 0 15px;
}

.recruit-selling :is(.list-boxA, .list-boxB) > * {
  background: var(--white);
  padding: 0 0 15px;
}

:is(.list-boxA, .list-boxB) {
  display: flex;
  flex-flow: wrap;
  justify-content: space-between;
  gap: 50px;
  --titBm: 15px 0;
}

.list-boxA > * {
  width: calc((100% - 50px) / 2);
}

.list-boxB > * {
  width: calc((100% - 100px) / 3);
}

:is(.list-boxA, .list-boxB) picture {
  display: block;
  aspect-ratio: var(--asp-post);
}

:is(.list-boxA, .list-boxB) picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media screen and (max-width: 520px) {
  .recruit-selling {
    padding: 40px var(--over-width-half) 30px;
  }

  .recruit-selling :is(.list-boxA, .list-boxB) {
    margin: 0 0 15px;
    gap: 15px;
    --titBfz: 1.4rem;
  }

  .list-boxA > * {
    width: 100%;
  }

  .list-boxB > * {
    width: 100%;
  }
}

.recruit-statue {
  padding: 60px 0 100px;

  --titAp: 0 var(--over-width-half);
}

.list-statue {
  --wsize: calc(100% / 3);
  --hsize: 300px;
  display: grid;
  grid-template-rows: repeat(2, var(--hsize));
  grid-template-columns: repeat(3, var(--wsize));
  grid-template-areas:
    "img1 p2 img3"
    "p1 img2 p3";
  align-items: center;
}

.list-statue > * {
  text-align: center;
  font-size: 1.4rem;
  font-weight: bold;
  position: relative;
}

.list-statue > *:nth-child(even) {
  counter-increment: number;
}

.list-statue > *:nth-child(even):before {
  content: counter(number, decimal-leading-zero);
  display: block;
  text-align: center;
  margin: 0 auto 15px;
  font-family: var(--webf);
  font-size: 3rem;
  font-style: italic;
  line-height: 1;
  color: var(--color_type1);
}

.list-statue img {
  width: 100%;
  height: var(--hsize);
  object-fit: cover;
}

@media screen and (max-width: 520px) {
  .recruit-statue {
    padding: 40px 0 30px;
  }

  .list-statue {
    --wsize: calc(100% / 2);
    --hsize: 40vw;
    display: grid;
    grid-template-rows: repeat(3, var(--hsize));
    grid-template-columns: repeat(2, var(--wsize));
    grid-template-areas:
      "img1 p1"
      "p2 img2"
      "img3 p3";
    align-items: center;
  }

  .list-statue > *:nth-child(even):before {
    font-size: 2rem;
    margin: 0 auto 5px;
  }

  .list-statue > * {
    text-align: center;
    font-size: 1rem;
  }
}

.recruit-charm {
  background: var(--color_type1) url(../images/recruit_sb_catch2.webp) no-repeat top 15px right 90px;
  color: var(--white);
  padding: 80px var(--over-width-half);

  --titAc: var(--white);
  --titAc_i: var(--white);
}

.list-charm {
  width: 92%;
  display: flex;
  flex-flow: column;
  gap: 2px;
}

.list-charm > * {
  display: flex;
  gap: 100px;
}

.list-charm picture {
  flex: none;
  width: 250px;
  aspect-ratio: var(--asp-post);
}

.list-charm picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.list-charm dl {
  flex: 1;
}

.list-charm dl dt {
  font-size: 1.5rem;
  font-weight: bold;
  margin: 0 0 15px;
  color: var(--color_type2);
}

.list-charm > * {
  counter-increment: number;
}

.list-charm dl dt:before {
  content: counter(number, decimal-leading-zero);
  font-family: var(--webf);
  font-size: 3rem;
  font-style: italic;
  display: inline-block;
  margin: 0 20px 0 0;
  line-height: 1;
}

@media screen and (max-width: 520px) {
  .recruit-charm {
    background-size: 60vw auto;
    background-position: top 70px right 5%;
    padding: 40px 0 0;

    --titAp: 0 var(--over-width-half);
  }

  .list-charm {
    width: 100%;
    gap: 30px;
    margin: 40px 0 0;
  }

  .list-charm > * {
    gap: 20px;
    flex-flow: column;
    position: relative;
  }

  .list-charm picture {
    width: 100%;
    z-index: 1;
  }

  .list-charm dl {
    width: 90%;
    margin: 0 auto;
    position: relative;
    z-index: 2;
  }

  .list-charm dl dt {
    font-size: 1.3rem;
  }
}

/**------------------------------ 
職種紹介 トグル
 ------------------------------**/

.recruit-kind {
  padding: 60px var(--over-width-half);
  --btnAw: 320px;
  --btnAm: 40px auto 0;
  --btnAp: 20px 3em;
}

.list-kind > * {
  background-color: color-mix(in srgb, var(--black) 5%, var(--white) 0%);
  padding: 30px;
  display: flex;
  gap: 10px;
  margin: 0 0 5px;

  --size: 150px;
}

.list-kind picture {
  flex: none;
  width: var(--size);
  height: var(--size);
  aspect-ratio: 1/1;
}

.list-kind picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.list-kind .toggle-wrap {
  --mt: calc((var(--size) - 71px) / 2);
  flex: 1;
  border: 1px solid var(--color_type1);
  background: var(--white);
  transition: all 0.3s;
}

.toggle {
  display: none;
}

.kindA,
.kindB {
  --pR: 30px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translateZ(0);
  transition: all 0.3s;
}

.kindA {
  padding: 0.5em var(--pR);
  display: flex;
  align-items: center;
  background: var(--white);
  color: var(--color_type1);
  font-size: 1.6rem;
  font-weight: bold;
  gap: 15px;
  height: 100%;
}

.kindA i {
  font-family: var(--webf);
  color: var(--color_type2);
  font-size: 0.7em;
  display: inline-block;
  margin: 0 0 0 15px;
}

.kindA::after {
  content: "+ 詳細を開く";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 20px;
  font-size: 0.7rem;
}

.kindB {
  height: 0;
  overflow: hidden;
  font-size: 0.9em;
  padding: 0 var(--pR);
}

.kindB figure {
  float: right;
  margin: 0 0 20px 30px;
  width: calc(var(--size) + 100px);
}

.kindB h3 {
  font-weight: bold;
  font-size: 1.1rem;
  margin: 0 0 15px;
}

.toggle:checked + .toggle-wrap .kindA {
  border-bottom: 1px dashed var(--color_type1);
  height: auto;
}

.toggle:checked + .toggle-wrap .kindA + .kindB {
  height: auto;
  padding: 1.5em var(--pR);
  transition: all 0.3s;
}

.toggle:checked + .toggle-wrap .kindA::after {
  content: "- 閉じる";
}

@media screen and (max-width: 520px) {
  .recruit-kind {
    padding: 30px var(--over-width-half);
    --btnAw: 100%;
    --btnAm: 40px auto 0;
    --btnAp: 20px 3em;
  }

  .list-kind > * {
    padding: 15px;
    display: flex;
    align-items: center;
    flex-flow: column;
    gap: 10px;
    margin: 0 0 5px;
  }

  .list-kind picture {
    flex: none;
    width: var(--size);
    height: var(--size);
    aspect-ratio: 1/1;
  }

  .list-kind picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .list-kind .toggle-wrap {
    --mt: 0;
    flex: 1;
    border: 1px solid var(--color_type1);
    margin: var(--mt) auto;
    background: var(--white);
    transition: all 0.3s;
  }

  .kindA,
  .kindB {
    --pR: 15px;
  }

  .kindA:before,
  .kindB:before {
    --size: 30px;
    left: 10px;
  }

  .kindA {
    line-height: 1.3;
  }

  .kindB {
    padding: 0 var(--pR);
  }

  .kindB figure {
    float: none;
    margin: 0 auto 15px;
    width: 100%;
  }

  .toggle:checked + .toggle-wrap {
    margin: 0 auto;
  }

  .toggle:checked + .kindA + .kindB {
    padding: 1em var(--pR);
  }
}

.recruit-outline {
  padding: 60px var(--over-width-half) 80px;
}

.recruit-company {
  padding: 60px var(--over-width-half) 80px;
  background-color: color-mix(in srgb, var(--color_type3) 50%, var(--white) 0%);
}

.recruit-faq {
  padding: 60px var(--over-width-half);
}

@media screen and (max-width: 520px) {
  .recruit-outline {
    padding: 30px var(--over-width-half) 40px;
  }

  .recruit-company {
    padding: 30px var(--over-width-half) 40px;
  }

  .recruit-faq {
    padding: 30px var(--over-width-half) 40px;
  }
}

.recruit-sns {
  display: flex;
  justify-content: center;
  gap: 30px;
  margin: 0 0 50px;
}

.recruit-sns svg {
  width: 30px;
  height: 30px;
  fill: var(--color_type1);
}

/**------------------------------ 
FAQ
 ------------------------------**/
.faq {
  border: 1px solid var(--color_type3);
  border-radius: 25px;
  margin: 0 auto 40px;
}

.faq dt {
  border-bottom: 1px solid var(--color_type3);
  margin: 0;
  margin-top: 0px;
  padding: 25px 30px 25px 110px;
  font-size: 20px;
  font-weight: bold;
  position: relative;
  color: var(--black);
  min-height: 60px;
}

.faq dt:before {
  content: "Q";
  display: flex;
  width: 50px;
  height: 50px;
  border: 1px solid var(--color_type1);
  box-sizing: border-box;
  border-radius: 50%;
  color: var(--color_type1);
  font-weight: bold;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 30px;
  top: 15px;
  font-size: 22px;
}

.faq dd {
  padding: 25px 30px 25px 110px;
  position: relative;
  color: var(--black);
  min-height: 60px;
}

.faq dd p a {
  text-decoration: underline;
  color: var(--color_type2);
}

.faq dd:before {
  content: "A";
  display: flex;
  width: 50px;
  height: 50px;
  border: 1px solid var(--color_type1);
  background: var(--color_type1);
  box-sizing: border-box;
  border-radius: 25px;
  font-family: "Roboto", sans-serif;
  color: var(--white);
  font-weight: bold;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 30px;
  top: 15px;
  font-size: 18px;
}

@media screen and (max-width: 520px) {
  .faq {
    margin: 0 auto 20px;
    border-radius: 10px;
  }

  .faq dt {
    padding: 20px 15px 20px 50px;
    font-size: 15px;
    min-height: 60px;
  }

  .faq dt:before {
    width: 30px;
    height: 30px;
    left: 10px;
    top: 15px;
    font-size: 17px;
  }

  .faq dd {
    padding: 20px 15px 20px 50px;
    min-height: 60px;
    font-size: 14px;
  }

  .faq dd:before {
    width: 30px;
    height: 30px;
    left: 10px;
    top: 15px;
    font-size: 17px;
  }
}

/**================================================== 
 エントリーフォーム
================================================== **/
.page-entry {
  width: 980px;
  margin: 0 auto 80px;
  background-color: color-mix(in srgb, var(--color_type1) 5%, var(--white) 0%);
}

.page-entry .ttl-ttl-p {
  background: var(--color_type1);
  color: var(--white);
  padding: 40px;

  --titBc: var(--white);
  --titBjc: center;
  --titBm: 0 0 10px;
}

.page-entry .wrap-tel {
  width: 100%;
  border: 1px solid var(--white);
  background: var(--white);
  color: var(--color_type1);
  padding: 15px 30px;
  text-align: center;
  margin: 20px auto 0;
}

.page-entry .wrap-tel h3 {
  font-weight: bold;
  font-size: 1.2rem;
}

.page-entry .wrap-tel a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  font-size: 2.7rem;
  font-weight: bold;
  margin: 0;
}

.page-entry .wrap-tel svg {
  width: 1em;
  height: 1em;
  fill: var(--color_type1);
}

.page-entry .wrap-tel .fax {
  font-size: 1.2rem;
  font-weight: bold;
}

.page-entry .wrap-form {
  padding: 40px;

  --titBff: column;
  --titBm: 0 0 30px;
  --titBfz: 2rem;
  --titBgap: 5px;
  --titBai: center;
  --titBc: var(--color_type1);
}

@media screen and (max-width: 520px) {
  .page-entry {
    width: 100%;
    margin: 0 auto 50px;
  }

  .page-entry .ttl-ttl-p {
    padding: 20px 15px;

    --titBai: center;
  }

  .page-entry .wrap-tel {
    width: 100%;
    padding: 15px;
  }

  .page-entry .wrap-form {
    padding: 20px 15px;

    --titBfz: 1.7rem;
  }

  .page-entry .wrap-tel a {
    font-size: 2rem;
  }
}

/**================================================== 
 スタッフインタビュー（詳細）
================================================== **/
.staff-hero {
  padding: 60px 0 100px;

  --titAp: 0 var(--over-width-half);
  --titAfz: 1.7rem;
}

.list-staff {
  margin: 20px auto 0;
}

.list-staff li {
  display: flex;
  align-items: center;
  gap: 100px;
}

.list-staff li:nth-child(even) {
  flex-flow: row-reverse;
}

.list-staff picture {
  width: 45%;
  flex: none;
}

.list-staff picture img {
  width: 100%;
}

.list-staff li dl {
  padding: 40px var(--over-width-half);
}

.list-staff li picture + dl {
  padding: 40px var(--over-width-half) 40px 0;
}

.list-staff li:nth-child(even) picture + dl {
  padding: 40px 0 40px var(--over-width-half);
}

.list-staff dt {
  font-weight: bold;
  font-size: 2.2rem;
  margin: 0 0 30px;
}

.list-staff dt small {
  color: var(--color_type1);
  font-size: 1.2rem;
  display: block;
}

.list-staff dt b {
  font-size: 1rem;
}

.list-staff .tit {
  font-size: 1.7rem;
  margin: 0 0 15px;
}

.list-staff dd + dd .tit {
  margin: 30px 0 15px;
}

@media screen and (max-width: 520px) {
  .staff-hero {
    padding: 30px 0 50px;

    --titAp: 0 var(--over-width-half) 20px;
    --titAfz: 1.3rem;
  }

  .list-staff {
    margin: 20px auto 0;
  }

  .list-staff li {
    justify-content: flex-start;
    align-items: flex-start;
    flex-flow: column;
    gap: 0;
    margin: 0 0 30px;
  }

  .list-staff li:nth-child(even) {
    flex-flow: column;
    align-items: flex-end;
  }

  .list-staff picture {
    width: 95%;
    flex: none;
  }

  .list-staff picture img {
    width: 100%;
  }

  .list-staff li dl {
    padding: 0 5%;
  }

  .list-staff li picture + dl {
    padding: 0 5%;
  }

  .list-staff li:nth-child(even) picture + dl {
    padding: 0 5%;
  }

  .list-staff li dl dt {
    margin: 20px 0 0;
  }

  .list-staff .tit {
    font-size: 1.5rem;
    margin: 20px 0 15px;
  }
}

/**================================================== 
 資料ダウンロード
================================================== **/
.list-downloads {
  display: flex;
  flex-flow: wrap;
  gap: 15px;

  --btnAfz: 1.1rem;
  --btnAm: 15px auto;
  --btnAp: 15px 1em;
}

.list-downloads > * {
  width: calc((100% - 15px * 3) / 4);
  text-align: center;
  border: 1px solid var(--color_type3);
  padding: 5px;
}

.list-downloads h3 {
  font-weight: bold;
  margin: 0.5em 5px 0;
  letter-spacing: -1px;
}

.list-downloads p {
  font-size: 0.9rem;
}

@media screen and (max-width: 520px) {
  .list-downloads {
    --btnAw: fit-content;
    --btnAp: 10px 1em;
    --btnAfz: 1rem;
  }

  .list-downloads > * {
    width: calc((100% - 15px * 1) / 2);
  }
}

/**================================================== 
選ばれる強み 
================================================== **/
.techno-value {
  --shadow: 0, 12, 75;
  padding: 60px 0 100px;
  overflow: hidden;
  background: linear-gradient(to top, var(--color_type1) 0%, var(--black) 100%);
  color: var(--white);
  text-shadow:
    1px 1px 5px rgba(var(--shadow), 0.5),
    -1px -1px 5px rgba(var(--shadow), 0.5),
    1px -1px 5px rgba(var(--shadow), 0.5),
    -1px 1px 5px rgba(var(--shadow), 0.5);

  --titAc: var(--white);
  --titAc_i: var(--white);
}

.techno-value .ttl-ttl-p {
  padding: 0 40vw 0 var(--over-width-half);
  position: relative;

  --titAm: 0 0 80px;

  --titCc: var(--white);

  --diamondw: 420px;
  --sqrt: calc(var(--diamondw) * sqrt(2));
  --diamondm: calc((var(--sqrt) - var(--diamondw)) / 2);
}

.techno-value .ttl-ttl-p > * {
  position: relative;
  z-index: 2;
}

.techno-value .ttl-ttl-p picture {
  position: absolute;
  top: 0;
  right: -30px;
  z-index: 0;
}

.list-boxC {
  width: 100%;

  --titAff: row;
  --titAgap: 30px;
  --titAai: center;
  --titAm: 0 0 20px;
  --titAfz: 2.5rem;
}

.list-boxC picture {
  position: absolute;
  bottom: -200px;
  left: -30px;
  z-index: 0;
}

.list-boxC > * {
  position: relative;
  padding: 40px 0 0;
}

.list-boxC > *:nth-child(even) picture {
  bottom: -280px;
  left: auto;
  right: -30px;
}

.list-boxC dl {
  width: 50vw;
  margin: 0 auto;
  transform: translateX(5vw);
  position: relative;
  z-index: 2;
}

.list-boxC > *:nth-child(2) dl {
  transform: translateX(-3vw);
}

.list-boxC > *:nth-child(3) dl {
  transform: translateX(-12vw);
}

.list-boxC dd {
  font-weight: bold;
  font-size: 1.2rem;
}

@media screen and (max-width: 520px) {
  .techno-value {
    padding: 40px 0;
  }

  .techno-value .ttl-ttl-p {
    padding: 0 5% 20vw var(--over-width-half);
    position: relative;

    --diamondw: 200px;
  }

  .techno-value .ttl-ttl-p picture {
    top: auto;
    bottom: calc(-1 * var(--diamondw) + 18vw);
    right: -30px;
    z-index: 0;
  }

  .list-boxC picture {
    position: absolute;
    bottom: -230px;
    right: -200px;
    z-index: 0;
  }

  .list-boxC > *:nth-child(even) picture {
    bottom: -230px;
    right: auto;
    left: -30px;
  }

  .list-boxC dl {
    width: 80%;
    margin: 0 0 80px;
    transform: translateX(5%);
  }

  .list-boxC > *:nth-child(2) dl {
    transform: translateX(10%);
    margin: 0 0 30px;
  }

  .list-boxC > *:nth-child(3) dl {
    transform: translateX(20%);
    margin: 0;
  }
}

/**------------------------------ 
得意
 ------------------------------**/
.techno-special {
  padding: 80px var(--over-width-half) 1px;
}

.techno-special .ttl-p {
  align-items: flex-start;
}

.special-box {
  position: relative;
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  width: var(--base-width);
  height: 810px;
  padding: 15px 0 0;
  margin: 60px auto;

  --size: 340px;
}

.special-box picture {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.special-box picture img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.special-box ul {
  position: relative;
  display: flex;
  gap: 40px;
  z-index: 2;
}

.special-box li {
  width: var(--size);
}

.special-box figure {
  display: block;
  width: var(--size);
}

.special-box figure img {
  width: 100%;
}

.special-box h3 {
  font-weight: bold;
  font-size: 1.25rem;
  margin: 0.5em 0;
}

.special-box .top h3 {
  color: var(--color_type2);
}

.special-box .bottom {
  align-items: flex-end;
  justify-content: flex-end;
}

.special-box .bottom h3 {
  color: var(--color_type1);
}

.techno-special .ttl-ttl-p {
  margin: 60px 0 0;
  padding: 30px;
  background-color: color-mix(in srgb, var(--color_type2) 10%, var(--white) 0%);
  --titBm: 0 0 20px;
}

@media screen and (max-width: 520px) {
  .techno-special {
    padding: 40px var(--over-width-half) 1px;
  }

  .special-box {
    position: relative;
    width: var(--base-width);

    height: auto;
    padding: 15px 0 0;
    margin: 30px auto;

    --size: 100%;
  }

  .special-box picture {
    position: relative;
    top: -60px;
    left: auto;
  }

  .special-box ul {
    flex-flow: column;
    gap: 15px;
    z-index: 2;
  }

  .techno-special .ttl-ttl-p {
    margin: 40px 0 0;
    padding: 15px;
    --titBm: 0 0 15px;
    --titBfz: 1.3rem;
  }
}

/**------------------------------ 
日本鏡板工業が極めてきた「冷間加工技術」について
 ------------------------------**/

.techno-tech {
  padding: 1px 5% 130px;
}

.techno-tech picture {
  display: block;
  top: var(--header-height);
  text-align: center;
  padding: 100px 0 0;
}

.techno-tech picture img {
  width: 100%;
}

.techno-tech .ttl-ttl-p {
  position: relative;
  width: var(--base-width);
  margin: 0 auto 0;
  background-color: color-mix(in srgb, var(--white) 90%, var(--black) 0%);
  padding: 30px 50px;
}

@media screen and (max-width: 520px) {
  .techno-tech {
    padding: 40px 0;
  }

  .techno-tech .ttl-ttl-p {
    padding: 20px;

    --titAm: 0 0 30px;
  }
}

/**------------------------------ 
鏡板とは
 ------------------------------**/
.techno-about {
  padding: 0 0 1px;
}

.techno-about .ttl-p {
  padding: 0 0 0 var(--over-width-half);
  background: var(--color_type1);
  color: var(--white);
  align-items: stretch;

  --titAc: var(--white);
  --titAc_i: var(--white);
  --titAm: 0 0 40px;
}

.techno-about .ttl-p picture {
  flex: none;
  width: 40%;
}

.techno-about .ttl-p picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.techno-about .ttl-p > div {
  padding: 60px 0 80px;
}

@media screen and (max-width: 520px) {
  .techno-about .ttl-p {
    padding: 40px 0 0;

    --titAc: var(--white);
    --titAc_i: var(--white);
    --titAm: 0 0 30px;
  }

  .techno-about .ttl-p picture {
    flex: none;
    width: 100%;
    height: 60vw;
  }

  .techno-about .ttl-p > div {
    padding: 0 5%;
  }
}

.talk-box {
  width: var(--base-width);
  margin: 50px auto;
  --size: 160px;
}

.talk-box > h2 {
  display: flex;
  align-items: center;
  background:
    url(../images/mirai_gimon.webp) no-repeat left top / auto var(--size),
    url(../images/kyohan_kun3.webp) no-repeat right top / auto var(--size);
  min-height: var(--size);
  padding: 0 calc(var(--size) - 30px);
}

.talk-box > h2 span {
  width: fit-content;
  display: block;
  background: var(--color_type2);
  color: var(--white);
  padding: 20px 50px;
  border-radius: 50px;
  position: relative;
  font-size: 1.5rem;
}

.talk-box > h2 span:before {
  display: block;
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-top: 15px solid transparent;
  border-bottom: 0 solid transparent;
  border-right: 30px solid var(--color_type2);
  border-left: 0;
  position: absolute;
  top: 70%;
  left: -15px;
  transform: rotate(-10deg);
}

.talk-box > div {
  margin: 15px 0 0;
  background: var(--color_type3);
  padding: 15px 40px 40px;
  border-radius: 20px;
  position: relative;

  display: flex;
  flex-flow: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 15px 50px;
}

.talk-box > div:before {
  display: block;
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-left: 25px solid transparent;
  border-top: 0 solid transparent;
  border-bottom: 30px solid var(--color_type3);
  border-right: 0;
  position: absolute;
  top: -25px;
  right: var(--size);
  transform: rotate(10deg);
}

.talk-box > div .white {
  width: 100%;
  background: var(--white);
  display: flex;
  gap: 20px;
  border-radius: 15px;
  padding: 20px 50px;
}

.talk01 .ttl {
  flex: 1;
  padding: 0 0 0 30px;
}

.talk01 h3 {
  font-size: 1.3rem;
  font-weight: bold;
}

.talk01 picture {
  flex: none;
  width: 490px;
  padding: 0 30px 0 0;
}

.talk01 .white {
  align-items: flex-end;
}

.talk01 .white figure {
  flex: none;
  width: 93px;
}

.talk01 .white dl {
  margin: 0 0 20px;
}

.talk01 .white dt {
  color: var(--color_type6);
  font-size: 1.1rem;
  font-weight: bold;
  margin: 0 0 5px;
}

.talk01 .white ul li {
  text-indent: -1em;
  padding-left: 1em;
  line-height: 1.2;
  margin: 0 0 5px;
}

.talk01 .white picture {
  flex: none;
  width: 245px;
}

.talk01 .white .yellow {
  min-width: 250px;
  background: var(--color_type5);
  font-size: 0.8rem;
  padding: 15px;
  box-shadow: 5px 5px 0 rgb(var(--black), 0.1);
}

.talk01 .white .yellow h4 {
  text-align: center;
  line-height: 1.3;
  font-size: 1rem;
  margin: 0 0 10px;
}

.talk02 > p {
  flex: 1;
}

.talk02 .waku {
  border: 1px solid var(--black);
  border-color: color-mix(in srgb, var(--black) 10%, var(--white) 0%);
  background: var(--white);
}

.talk02 .white {
  align-items: center;
}

.talk02 .white figure {
  width: 390px;
  flex: none;
}

.talk02 .white dl {
  font-size: 0.8rem;
}

.talk02 .white dt {
  color: var(--color_type6);
  font-size: 1.1rem;
  font-weight: bold;
  margin: 0 0 5px;
}

@media screen and (max-width: 520px) {
  .talk-box {
    width: 90%;
    margin: 30px auto;
    --size: 80px;
  }

  .talk-box > h2 {
    padding: 0 var(--size);
  }

  .talk-box > h2 span {
    padding: 10px 15px;
    border-radius: 20px;
    font-size: 1.1rem;
    line-height: 1.3;
    margin-left: -20px;
  }

  .talk-box > div {
    margin: 15px 0 0;
    padding: 15px;

    gap: 10px;
  }

  .talk-box > div .white {
    flex-flow: wrap;
    gap: 0;
    padding: 15px;
  }

  .talk01 .ttl {
    flex: 1;
    padding: 0;
  }

  .talk01 picture {
    flex: none;
    width: 30%;
    padding: 0;
  }

  .talk01 .white {
    align-items: flex-end;
  }

  .talk01 .white figure {
    flex: none;
    width: 80px;
    position: absolute;
    left: 0;
    bottom: 85px;
  }

  .talk01 .white dl {
    flex: 1;
    margin: 0;
  }

  .talk01 .white picture {
    flex: none;
    width: 30%;
  }

  .talk01 .white .yellow {
    min-width: auto;
    width: 100%;
    font-size: 0.8rem;
    padding: 10px;
    margin: 15px 0 0;
  }

  .talk01 .white .yellow h4 {
    text-align: center;
    line-height: 1.3;
    font-size: 1rem;
    margin: 0 0 10px;
  }

  .talk01 .white .yellow ul {
    display: flex;
    flex-flow: wrap;
    gap: 5px;
  }

  .talk02 > p {
    flex: 1;
  }

  .talk02 picture {
    width: 20%;
    flex: none;
  }

  .talk02 picture + picture {
    width: 100%;
  }

  .talk-box > div.talk02 .white {
    flex-flow: column-reverse;
  }

  .talk-box > div.talk02 figure {
    width: 100%;
  }
}

/**------------------------------ 
工程
 ------------------------------**/
.techno-flow {
  padding: 60px var(--over-width-half) 1px;
}

.wrap-img {
  margin: 80px auto 0;
}

@media screen and (max-width: 520px) {
  .techno-flow {
    padding: 1px var(--over-width-half) 1px;
  }

  .wrap-img {
    width: 100%;
    overflow-x: scroll;
    margin: 30px auto 0;
  }

  .wrap-img:after {
    content: "→横にスクロール";
    margin: 5px 0;
    padding: 5px 10px;
    font-size: 0.8rem;
    background: var(--color_type3);
    display: inline-block;
  }

  .wrap-img img {
    width: 768px;
    max-width: none;
  }
}

/**------------------------------ 
多方面の業界の企業様から選ばれています
 ------------------------------**/

.techno-select {
  padding: 130px var(--over-width-half) 100px;
  --titCbg: var(--color_type6);
  --titCc: var(--white);
  --titCp: 15px;
  --titCta: center;

  --btnAw: 320px;
}

.select-box {
  position: relative;
}

.select-box h3 {
  --size: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: var(--size);
  height: var(--size);
  background: var(--color_type6);
  border-radius: 50%;
  border: 8px solid var(--white);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.select-box h3 img {
  width: 75%;
  height: auto;
}

.select-box-inner {
  display: grid;
  grid-template-rows: auto auto;
  grid-template-columns: auto auto;
  gap: 23px 70px;
}

.select-box-inner dl {
  padding: 20px;
  display: flex;
  flex-flow: column;
  font-size: 0.95rem;
}

.select-box-inner dl dt {
  font-weight: bold;
  font-size: 1.2rem;
}

.select-box-inner dl {
  background: var(--color_type1);
  color: var(--white);
}

.select-box-inner dl dd + dd {
  display: block;
  width: 90%;
  margin-top: 15px;
}

.select-box-inner dl:nth-child(3n-2) {
  background: var(--color_type3);
  color: var(--black);
}

.select-box-inner dl:is(:nth-child(4n-1), :nth-child(4n)) dt {
  order: 2;
}

.select-box-inner dl:is(:nth-child(4n-1), :nth-child(4n)) dd {
  order: 3;
}

.select-box-inner dl:is(:nth-child(4n-1), :nth-child(4n)) dd + dd {
  order: 1;
  margin-bottom: 15px;
  margin-top: 0;
}

.select-box-inner dl:nth-child(3) {
  gap: 0;
}

.select-box-inner dl:nth-child(3) dt {
  margin-top: -2em;
}

.select-box-inner dl:nth-child(even) dd + dd {
  margin-left: auto;
}

@media screen and (max-width: 520px) {
  .techno-select {
    padding: 40px var(--over-width-half);
    --titCp: 20px 10px 10px;
    --titCta: center;
    --titCm: 0;

    --btnAw: 100%;
  }

  .select-box {
    position: relative;
  }

  .select-box h3 {
    --size: 100%;
    padding: 20px 15px;
    width: var(--size);
    height: auto;
    border-radius: 0;
    border: none;
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    flex-flow: column;
    margin: 0 0 40px;
  }

  .select-box h3:after {
    position: absolute;
    top: 100%;
    left: 0;
    content: "";
    display: block;
    border-style: solid;
    border-right: 45vw solid transparent;
    border-left: 45vw solid transparent;
    border-top: 40px solid var(--color_type6);
    border-bottom: 0;
  }

  .select-box-inner {
    display: grid;
    grid-template-rows: auto auto auto auto;
    grid-template-columns: auto;
    gap: 15px;
  }

  .select-box-inner dl {
    display: block;
  }

  .select-box-inner dl dd + dd {
    width: 100%;
    margin: 10px 0 0;
  }

  .select-box-inner dl:is(:nth-child(4n-1), :nth-child(4n)) dd + dd {
    margin-bottom: 0;
    margin-top: 10px;
  }

  .select-box-inner dl:nth-child(3) dt {
    margin-top: 0;
  }
}

/**================================================== 
広報 
================================================== **/
.outgo-mv {
  text-align: center;
  padding: 0 0 60px;
}

.outgo-mv picture {
  display: block;
  margin: 0 auto;
}

.outgo-mv img {
  max-width: 100%;
}

@media screen and (max-width: 520px) {
  .outgo-mv {
    padding: 0 0 40px;
  }
}

.outgo-movie {
  padding: 80px var(--over-width-half);
  background: var(--black);
  color: var(--white);

  --titAc: var(--white);
  --titAc_i: var(--white);
}

.outgo-movie .list-pr {
  margin: 60px 0;
}

.list-pr {
  display: flex;
  flex-flow: wrap;
  gap: 50px;
}

.list-pr > * {
  width: calc((100% - 50px * 1) / 2);
  aspect-ratio: 16/9;
}

.list-pr > * iframe {
  width: 100%;
  height: 100%;
  border: 5px solid var(--white);
}

@media screen and (max-width: 520px) {
  .outgo-movie {
    padding: 40px var(--over-width-half);
  }

  .outgo-movie .list-pr {
    margin: 30px 0;
  }

  .list-pr {
    flex-flow: column;
    gap: 20px;
  }

  .list-pr > * {
    width: 100%;
  }
}

.outgo-mirai {
  padding: 60px var(--over-width-half);
}

.mirai-prof {
  display: grid;
  grid-template-rows: 1fr auto auto;
  grid-template-columns: auto 210px 1fr;
  grid-template-areas:
    "mirai1 mirai2 mirai3"
    "mirai1 mirai2 mirai4"
    "mirai1 mirai2 mirai5";
  gap: 15px 30px;
  --grad1: #b4ffff;
  --grad2: #82d2ff;
  --bg1: #dff9ff;
  --bg2: #ccf6ff;
  --dt: #5ac8ff;

  --top: 40px;
  --bottom: 30px;

  margin: 0 0 50px;
}

.mirai-prof img {
  max-width: 100%;
}

.mirai-prof .mirai1 {
  grid-area: mirai1;
  display: flex;
  position: relative;
}

.mirai-prof .mirai1 i {
  width: 170px;
  position: absolute;
  top: var(--top);
  right: -200px;
}

.mirai-prof .mirai1 dl {
  width: 150px;
}

.mirai-prof .mirai1 dt {
  font-size: 1.8rem;
  font-weight: bold;
  position: relative;
  padding: 0 0 5px;
  margin: var(--top) 0 15px;
}

.mirai-prof .mirai1 dt:after {
  position: absolute;
  bottom: 0;
  left: 0;
  display: block;
  content: "";
  height: 2px;
  width: 150%;
  background: linear-gradient(to left, var(--grad1) 0%, var(--grad2) 100%);
  z-index: 2;
}

.mirai-prof .mirai1 dt small {
  display: block;
  color: var(--color_type2);
  font-size: 1rem;
  margin: 0 0 5px;
}

.mirai-prof .mirai1 picture {
  position: relative;
  z-index: 5;
}

.mirai-prof .mirai2 {
  grid-area: mirai2;
  display: flex;
  flex-flow: column;
  justify-content: flex-end;
  padding: 0 0 var(--bottom);
}

.mirai-prof .mirai2 dl {
  background: var(--bg1);
  margin: auto 0 0;
}

.mirai-prof :is(.mirai2, .mirai3, .mirai4, .mirai5) dl {
  border-radius: 10px;
  padding: 15px;
  position: relative;
}

.mirai-prof :is(.mirai2, .mirai3, .mirai4, .mirai5) dt {
  background: var(--dt);
  color: var(--white);
  padding: 5px 15px;
  border-radius: 50px;
  margin-bottom: 5px;
  white-space: nowrap;
}

.mirai-prof :is(.mirai2, .mirai3, .mirai4, .mirai5) dd {
  color: var(--color_type6);
}

.mirai-prof .mirai2 picture {
  position: absolute;
  top: -20px;
  right: -10px;
}

.mirai-prof .mirai2 dt {
  width: 70%;
}

.mirai-prof .mirai2 .note {
  text-indent: -3em;
  padding-left: 3em;
}

.mirai-prof .mirai3 {
  grid-area: mirai3;
  margin: var(--top) 0 0;
}

.mirai-prof .mirai3 dl {
  background: var(--bg2);
  display: flex;
  align-items: flex-start;
  gap: 30px;
}

.mirai-prof .mirai4 {
  grid-area: mirai4;
}

.mirai-prof .mirai4 dl {
  background: var(--bg1);
  display: flex;
  align-items: flex-start;
  gap: 30px;
}

.mirai-prof .mirai5 {
  grid-area: mirai5;
}

.mirai-prof .mirai5 dl {
  background: var(--bg2);
  display: flex;
  align-items: flex-start;
  align-items: center;
  gap: 30px;
  margin: 0 0 var(--bottom);
}

@media screen and (max-width: 520px) {
  .outgo-mirai {
    padding: 30px var(--over-width-half);
  }

  .mirai-prof {
    overflow: hidden;
    display: grid;
    grid-template-rows: auto auto auto auto auto;
    grid-template-columns: auto;
    grid-template-areas:
      "mirai1"
      "mirai2"
      "mirai3"
      "mirai4"
      "mirai5";
    gap: 15px 30px;
    --grad1: #b4ffff;
    --grad2: #82d2ff;
    --bg1: #dff9ff;
    --bg2: #ccf6ff;
    --dt: #5ac8ff;

    --top: 0;
    margin: 30px 0 50px;
  }

  .mirai-prof img {
    max-width: 100%;
  }

  .mirai-prof .mirai1 {
    grid-area: mirai1;
    flex-flow: row-reverse;
    justify-content: space-between;
  }

  .mirai-prof .mirai1 i {
    width: 150px;
    position: absolute;
    top: var(--top);
    right: auto;
    left: 150px;
  }

  .mirai-prof .mirai1 dl {
    flex: 1;
    width: auto;
    margin-top: 100px;
  }

  .mirai-prof .mirai1 dt:after {
    left: auto;
    right: 0;
  }

  .mirai-prof .mirai1 picture {
    width: 150px;
  }

  .mirai-prof :is(.mirai2, .mirai3, .mirai4, .mirai5) dl {
    border-radius: 10px;
    padding: 15px;
    position: relative;
  }

  .mirai-prof :is(.mirai2, .mirai3, .mirai4, .mirai5) dt {
    background: var(--dt);
    color: var(--white);
    padding: 5px 15px;
    border-radius: 50px;
    margin-bottom: 5px;
    white-space: nowrap;
    width: 120px;
    text-align: center;
  }

  .mirai-prof :is(.mirai2, .mirai3, .mirai4, .mirai5) dd {
    color: var(--color_type6);
  }

  .mirai-prof .mirai2 {
    display: block;
    padding: 0;
  }

  .mirai-prof .mirai2 dl {
    background: var(--bg1);
    margin: auto 0 0;
    display: grid;
    grid-template-rows: auto auto auto;
    grid-template-columns: 1fr 135px;
    grid-template-areas:
      "dt pic"
      "dd pic"
      "note pic";
    gap: 0;
  }

  .mirai-prof .mirai2 dl dt {
    grid-area: dt;
  }

  .mirai-prof .mirai2 dl dt + dd {
    grid-area: dd;
  }

  .mirai-prof .mirai2 dl dd:last-child {
    grid-area: pic;
  }

  .mirai-prof .mirai2 .note {
    grid-area: note;
  }

  .mirai-prof .mirai2 picture {
    position: static;
  }

  .mirai-prof .mirai3 {
    margin: 0;
  }

  .mirai-prof .mirai3 dl {
    display: block;
  }

  .mirai-prof .mirai4 dl {
    display: block;
  }

  .mirai-prof .mirai5 dl {
    margin: 0;
    gap: 10px;
  }
}

/**================================================== 
 海外事業部
================================================== **/
.rk-intro {
  padding: 60px 5% 100px;
}

.rk-intro .ttl-ttl-p {
  width: var(--base-width);
  margin: 0 auto 60px;
}

.list-boxD {
  display: flex;
  gap: 1px;
}

.list-boxD li {
  flex: 1;
}

.list-boxD li picture {
  display: block;
  aspect-ratio: var(--asp-post);
  width: 100%;
  height: auto;
}

.list-boxD li img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.list-boxD li h3 {
  width: 90%;
  margin: 0 auto;
  padding: 20px 30px;
  font-size: 1.2rem;
  font-weight: bold;
  position: relative;
  color: var(--color_type1);
}

.list-boxD li h3:before {
  content: "";
  display: block;
  width: 1px;
  height: 130%;
  position: absolute;
  bottom: 0;
  left: 0;
  background: var(--color_type1);
}

@media screen and (max-width: 520px) {
  .rk-intro {
    padding: 30px 5% 40px;
  }

  .rk-intro .ttl-ttl-p {
    margin: 0 auto 30px;
  }

  .list-boxD {
    flex-flow: column;
    gap: 20px;
  }

  .list-boxD li h3 {
    padding: 15px 0 15px 20px;
  }
}

.rk-world {
  display: grid;
  grid-template-rows: auto auto;
  grid-template-columns: 55% 1fr;
  grid-template-areas:
    "h h"
    "p pic";
  gap: 0 50px;
  padding: 100px 10% 100px var(--over-width-half);
  background-color: color-mix(in srgb, var(--color_type2) 10%, var(--white) 0%);

  --titAw: 100%;
}

.rk-world h2 {
  grid-area: h;
}

.rk-world .ttl-ttl-p {
  grid-area: p;

  --btnAw: 300px;
  --btnAbg: var(--color_type1);
  --btnAc: var(--white);
  --btnAp: 20px 1em;
}

.rk-world .ttl-ttl-p figure {
  margin: 40px 0 0;
}

.rk-world picture {
  grid-area: pic;
}

@media screen and (max-width: 520px) {
  .rk-world {
    display: grid;
    grid-template-rows: auto auto auto;
    grid-template-columns: auto;
    grid-template-areas:
      "h"
      "pic"
      "p";
    gap: 20px;
    padding: 40px var(--over-width-half);

    --titAw: 100%;
  }

  .rk-world .ttl-ttl-p {
    --btnAw: 100%;
  }
}

.rk-inq {
  padding: 100px var(--over-width-half);

  --titBjc: center;
  --titBfz: 2rem;
  --titBc: var(--color_type1);
}

.tel-table {
  width: 100%;
  margin: 50px auto 0;
}

.tel-table h3 {
  font-size: 1.25rem;
  font-weight: bold;
  padding: 20px;
  text-align: center;
  color: var(--white);
  background: var(--color_type6);
  border-radius: 50px;
}

.tel-table .tel-table-inner {
  width: 95%;
  margin: 0 auto;
}

.tel-table dl {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5%;
  width: 100%;
  min-height: 5em;
}

.tel-table :is(dl:nth-child(2n)) {
  background-color: color-mix(in srgb, var(--color_type6) 10%, var(--white) 0%);
}

.tel-table dl dt {
  width: 40%;
  font-weight: bold;
  text-align: right;
}

.tel-table dl dd {
  flex: 1;
  text-align: left;
}

.tel-table dl a {
  color: var(--color_type6);
  font-weight: bold;
  font-size: 2rem;
  display: flex;
  align-items: center;
  gap: 10px;
}

.tel-table dl a svg {
  width: 1em;
  height: 1em;
  fill: var(--color_type6);
}

@media screen and (max-width: 520px) {
  .rk-inq {
    padding: 40px var(--over-width-half);

    --titBjc: flex-start;
    --titBfz: 1.75rem;
  }

  .tel-table {
    width: 100%;
    margin: 40px auto 0;
  }

  .tel-table h3 {
    border-radius: 0;
  }

  .tel-table .tel-table-inner {
    width: 95%;
    margin: 0 auto;
  }

  .tel-table dl {
    display: block;
    width: 100%;
    min-height: auto;
    padding: 15px 0;
  }

  .tel-table dl dt {
    width: 100%;
    text-align: center;
  }

  .tel-table dl dd {
    text-align: center;
    line-height: 1.2;
  }

  .tel-table dl a {
    justify-content: center;
  }
}

/**================================================== 
 会社概要
================================================== **/
.comp-rinen {
  padding: 60px 0 1px;
  background: var(--black);
  position: relative;
}

.comp-rinen .ttl-ttl-p {
  width: var(--base-width);
  margin: 0 auto 60px;

  --titAc: var(--white);
  --titAc_i: var(--white);

  --titBc: var(--white);
}

.comp-rinen ul {
  margin: 50px 0;
}

.comp-rinen li {
  counter-increment: number;
  font-size: 1.6rem;
  display: flex;
  align-items: center;
  gap: 0;
  margin: 0 0 5px;
  font-weight: bold;
  color: var(--white);
}

.comp-rinen li:before {
  content: counter(number, decimal-leading-zero) ".";
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight: bold;
  font-family: var(--webf);
  font-size: 2em;
  /*background: var(--white);*/
  color: var(--white);
  line-height: 1.5;
  width: 1.8em;
}

.comp-rinen picture {
  display: block;
  width: 100%;
  height: 500px;
  opacity: 0.7;
}

.comp-rinen picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media screen and (max-width: 520px) {
  .comp-rinen {
    padding: 40px 0 1px;
  }

  .comp-rinen .ttl-ttl-p {
    width: 90%;
    margin: 0 auto 30px;

    --titBfz: 1.3rem;
  }

  .comp-rinen ul {
    margin: 40px 0;
  }

  .comp-rinen li {
    flex-flow: column;
    gap: 0;
    margin: 0 0 20px;
  }

  .comp-rinen picture {
    width: 100%;
    height: auto;
  }

  .comp-rinen picture img {
    height: auto;
  }
}

.comp-empl {
  padding: 60px var(--over-width-half) 100px;
  background-color: color-mix(in srgb, var(--black) 5%, var(--white) 0%);
  text-align: center;

  --titAai: center;

  --titCc: var(--white);
  --titCbg: var(--black);
  --titCfz: 2rem;
  --titCw: fit-content;
  --titCp: 5px 20px;
  --titCm: 0 auto 20px;
}

.comp-empl ul {
  display: inline-block;
}

.comp-empl ul li {
  font-size: 1.6rem;
  counter-increment: number;
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: bold;
  text-align: left;
  border-bottom: 1px solid var(--black);
  border-bottom-color: color-mix(in srgb, var(--black) 10%, var(--white) 0%);
  box-shadow: 0 1px 0 0 var(--white);
  padding: 0 50px;
}

.comp-empl ul li:before {
  content: counter(number, decimal-leading-zero) ".";
  font-weight: bold;
  font-family: var(--webf);
  font-size: 2em;
  line-height: 1.3;
  font-style: italic;
}

@media screen and (max-width: 520px) {
  .comp-empl {
    padding: 40px var(--over-width-half);

    --titAai: center;
    --titCw: 100%;
  }

  .comp-empl ul {
    display: block;
  }

  .comp-empl ul li {
    line-height: 1.5;
    display: flex;
    align-items: center;
    padding: 15px;
  }

  .comp-empl ul li:before {
    font-size: 2em;
  }
}

.comp-quality {
  padding: 60px var(--over-width-half);
}

.comp-quality ul {
  margin: 60px auto;
  font-size: 1.4rem;
  font-weight: bold;
}

.comp-quality ul li {
  counter-increment: li;
  display: flex;
  gap: 10px;
  margin: 0 0 15px;
}

.comp-quality ul li:before {
  flex: none;
  content: counter(li);
  width: 2em;
  height: 2em;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color_type1);
  color: var(--white);
}

.comp-quality-inner {
  display: flex;
  justify-content: space-between;
  gap: 30px;
}

.comp-quality-inner .table {
  flex: 1;
}

.comp-quality-inner figure {
  width: 320px;
  flex: none;
}

@media screen and (max-width: 520px) {
  .comp-quality {
    padding: 40px var(--over-width-half);
  }

  .comp-quality ul {
    margin: 30px auto;
  }

  .comp-quality ul li {
    margin: 0 0 25px;
    line-height: 1.5;
  }

  .comp-quality-inner {
    flex-flow: column;
    gap: 20px;
  }

  .comp-quality-inner figure {
    width: 100%;
  }
}

.comp-greeting {
  padding: 80px 5% 80px var(--over-width-half);
  display: flex;
  align-items: flex-end;
  gap: 30px;
}

.comp-greeting p + p {
  margin: 30px 0 0;
}

.comp-greeting figure {
  width: 400px;
  flex: none;
}

@media screen and (max-width: 520px) {
  .comp-greeting {
    padding: 1px var(--over-width-half) 40px;
    flex-flow: column-reverse;
    gap: 0;
  }

  .comp-greeting p + p {
    margin: 30px 0 0;
  }

  .comp-greeting figure {
    width: 150px;
    flex: none;
    margin: 0 -15px -130px auto;
  }
}

.comp-membar {
  width: 100%;
  overflow: hidden;
  margin: 0 0 40px;
  position: relative;

  --titAjc: center;
  --titAai: center;
  --titAm: 0 0 20px;

  --titBjc: center;
  --titBai: center;
  --titBta: center;
  --titBm: 0 0 40px;
}

.comp-membar hr {
  border-bottom: 1px solid var(--color_type3);
  width: var(--base-width);
  margin: 80px auto 0;
}

/*
.comp-membar .ttl-p{
	width: var(--base-width);
	margin: 0 auto 60px;
	
	--titBbg: var(--color_type1);
	--titBc: var(--white);
	--titBp: 15px 25px;
	--titBw:100%;
	--titBm:0;
}
*/
.list-membar img {
  display: block;
  aspect-ratio: 400/566;
  width: 90%;
  height: auto;
  object-fit: contain;
}

.list-membar li {
  padding: 0 5px 30px;
  font-size: 0.8rem;
}

.list-membar h3 strong {
  font-size: 1.4rem;
  font-weight: normal;
}

.list-membar .swiper-btn {
  margin-right: 5%;
}

@media screen and (max-width: 520px) {
  .comp-membar {
    margin: 0;
  }

  .comp-membar .mb40 p {
    width: 90%;
    margin: 0 auto;
  }

  /*
	.comp-membar .ttl-p{
		--titAm:0 5%;
		--titBfz:1.3rem;
	}*/

  .comp-membar hr {
    margin: 40px auto 0;
  }
}

.comp-trading {
  padding: 60px var(--over-width-half) 80px;
  background-color: color-mix(in srgb, var(--color_type3) 50%, var(--white) 0%);
}

.list-trading {
  display: flex;
  gap: 2px;
  height: 300px;
  overflow: hidden;
  position: relative;
}

.list-trading ul {
  flex: 1;
  display: flex;
  flex-flow: wrap;
  gap: 2px;
}

.list-trading ul li {
  width: calc((100% - 2px * 2) / 3);
  background: var(--white);
  padding: 10px;
}

@media screen and (max-width: 520px) {
  .comp-trading {
    padding: 40px var(--over-width-half) 40px;
  }

  .list-trading {
    flex-flow: column;
  }

  .list-trading ul li {
    width: 100%;
  }
}

#trading-check {
  display: none;
}

#trading-check:checked + .list-trading {
  height: auto;
  overflow: auto;
}

#trading-check:checked + .list-trading + .trading {
  display: none;
}

.comp-history {
  padding: 60px var(--over-width-half) 100px;
}

@media screen and (max-width: 520px) {
  .comp-history {
    padding: 40px var(--over-width-half);
  }
}

.comp-map {
  padding: 60px var(--over-width-half);
}

.list-map {
  margin: 0 0 50px;
}

.list-map li {
  margin: 60px auto;
  display: flex;
  flex-flow: wrap;
  justify-content: space-between;
  gap: 30px;

  --titCw: 100%;
  --titCm: 0;

  --titBcl: var(--bodybg);
  --titBm: 0 0 15px;
  --titBta: left;
  --titBbg: var(--black);
  --titBc: var(--white);
  --titBp: 8px 15px;
  --titBw: fit-content;
}

.list-map .table {
  flex: 1;
}

.list-map .map {
  aspect-ratio: 16/9;
  width: 45%;
  flex: none;
}

.list-map .map iframe {
  width: 100%;
  height: 100%;
}

#factory-loop {
  width: 100%;
  margin: -100px 0 0;
  position: relative;
  align-items: flex-end;
  justify-content: space-between;
  overflow: hidden;
  display: flex;
}

.slider-main {
  width: calc(55% - 30px);
  overflow: hidden;
}

.slider-main img {
  aspect-ratio: var(--asp-post);
  width: 100%;
  height: auto;
  object-fit: cover;
}

.slider-main figcaption {
  margin: 5px 15px 0;
  font-weight: bold;
  font-size: 0.8rem;
}

.slider-thumbnail {
  width: 45%;
  overflow: hidden;
  padding: 15px 0 2em;
}

.slider-thumbnail img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.slider-thumbnail .swiper-wrapper {
  flex-wrap: wrap;
  gap: 5px;
}

.slider-thumbnail .swiper-wrapper .swiper-slide {
  width: calc((100% - 5px * 4) / 7.5) !important;
  height: 4.2vw !important;
  min-height: 57px;
  cursor: pointer;
  background: var(--white);
}

.slider-thumbnail .swiper-wrapper .swiper-slide.swiper-slide-thumb-active {
  opacity: 1;
}

@media screen and (max-width: 520px) {
  .comp-map {
    padding: 40px var(--over-width-half) 1px;
  }

  .list-map {
    --titBm: 0 0 10px;
    margin: 0;
  }

  .list-map li {
    margin: 30px auto 50px;
    flex-wrap: wrap;
    gap: 15px;

    --titBfz: 1.4rem;
    --titBm: 0;
  }

  .list-map .map {
    width: 100%;
  }

  .list-map figcaption {
    margin: 5px 0 10px;
  }

  #factory-loop {
    flex-flow: column;
    margin: 0;
  }

  .slider-main {
    width: 100%;
  }

  .slider-thumbnail {
    width: 100%;
  }

  .slider-thumbnail .swiper-wrapper .swiper-slide {
    gap: 2px;
    width: calc((100% - 5px * 6) / 7) !important;
    min-height: calc(100vw / 7);
  }
}

/**================================================== 
ページ内リンク
================================================== **/
.page-links {
  padding: 0 var(--over-width-half);
  background-color: color-mix(in srgb, var(--black) 5%, var(--white) 0%);
  margin: 0;
  display: flex;
  gap: 40px;
}

.page-links a {
  padding: 25px 10px;
  position: relative;
  font-size: 1rem;
  display: flex;
  align-items: center;
  gap: 10px;
}

.page-links a:after {
  content: "";
  display: block;
  width: 5px;
  height: 5px;
  border-right: 1px solid var(--black);
  border-bottom: 1px solid var(--black);
  border-bottom-color: color-mix(in srgb, var(--black) 30%, var(--white) 0%);
  border-right-color: color-mix(in srgb, var(--black) 30%, var(--white) 0%);
  transform: rotate(45deg);
}

.page-links a:before {
  content: "";
  display: block;
  height: 4px;
  width: 100%;
  background: none;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
}

.page-links a:hover:before {
  background: var(--black);
}

@media screen and (max-width: 520px) {
  .page-links {
    gap: 0 15px;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0 5% 10px;
  }

  .page-links a {
    padding: 15px 5px;
    white-space: nowrap;
  }

  .page-links a:before {
    height: 2px;
    background: var(--black);
  }
}

/**================================================== 
 SDGS
================================================== **/
.sdgs-csr {
  padding: 60px var(--over-width-half) 40px;
  background: url(../images/bg4.webp) no-repeat top right;

  --titAm: 0;
  --titCm: 45px 0 15px;
  --titCc: var(--color_type1);
  --titCfz: 1.5rem;

  --btnAw: 320px;
  --btnAm: 15px auto;
}

.sdgs-csr p {
  width: 50%;
}

.list-csr {
  display: flex;
  flex-flow: wrap;
  gap: 15px;
  padding: 30px;
}

.list-csr > * {
  width: calc((100% - 15px) / 2);
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  gap: 15px;
}

.list-csr > *:before {
  flex: none;
  content: "";
  display: block;
  width: 15px;
  height: 5px;
  background: var(--color_type6);
  border-radius: 50px;
}

@media screen and (max-width: 520px) {
  .sdgs-csr {
    padding: 40px var(--over-width-half) 1px;
    background-size: 80% auto;

    --btnAw: 100%;
    --btnAm: 30px auto;
  }

  .sdgs-csr p {
    width: 100%;
  }

  .list-csr {
    flex-flow: column;
    gap: 15px;
    padding: 10px;
  }

  .list-csr > * {
    width: 100%;
    line-height: 1.5;
  }
}

.sdgs-icons {
  padding: 1px var(--over-width-half) 1px;
}

.sdgs-icons picture {
  display: block;
  text-align: center;
}

.sdgs-attempt {
  background-color: color-mix(in srgb, var(--color_type6) 5%, var(--white) 0%);
  margin: 80px 0 0;
  padding: 60px 5%;

  --titCta: center;
  --titCm: 0 auto 50px;

  --btnAw: 320px;
  --btnAm: 15px auto;
}

.attempt-box {
  --bgc: 0, 12, 75;
  display: flex;
  margin: 0 0 60px;
  position: relative;
  background: var(--white);
  box-shadow: 0 0 10px 1px rgba(var(--bgc), 0.05);
}

.attempt-box em {
  display: block;
  width: fit-content;
  background: var(--color_type6);
  color: var(--white);
  font-weight: bold;
  font-size: 1.2rem;
  font-style: normal;
  padding: 5px 20px;
  position: absolute;
  top: 30px;
  left: -10px;
}

.attempt-box em:before {
  position: absolute;
  content: "";
  top: 100%;
  left: 0;
  border: none;
  border-bottom: solid 10px transparent;
  border-right: solid 10px var(--color_type1);
}

.attempt-box picture {
  width: 40%;
}

.attempt-box picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.attempt-box-inner {
  flex: 1;
  background-color: color-mix(in srgb, var(--white) 90%, var(--black) 0%);
  padding: 30px;
}

.attempt-box-inner .tit {
  font-size: 1.3rem;
  margin: 0 0 15px;
}

.attempt-box-inner .icon {
  display: flex;
  flex-flow: wrap;
  gap: 5px;
  margin: 0 0 20px;
}

.attempt-box-inner .icon img {
  width: calc((100% - 5px * 7) / 8);
}

.attempt-box-inner ul {
  margin: 15px 0;
  font-size: 1.1rem;
}

.attempt-box-inner ul li {
  background-color: color-mix(in srgb, var(--color_type2) 10%, var(--white) 0%);
  color: var(--color_type6);
  padding: 10px 15px;
  font-weight: bold;
  margin: 0 0 1px;
}

@media screen and (max-width: 520px) {
  .sdgs-attempt {
    margin: 40px 0 0;
    padding: 30px 5%;

    --titCm: 0 0 15px;
    --btnAw: 100%;
  }

  .attempt-box {
    display: flex;
    flex-flow: column;
    margin: 0 0 30px;
  }

  .attempt-box em {
    top: 15px;
  }

  .attempt-box picture {
    width: 100%;
  }

  .attempt-box-inner {
    padding: 15px;
  }

  .attempt-box-inner .icon {
    display: flex;
    flex-flow: wrap;
    gap: 5px;
    margin: 0 0 20px;
  }

  .attempt-box-inner .icon img {
    width: calc((100% - 10px) / 3);
  }
}

.attempt-box_ver2 {
  width: 980px;
  margin: 0 auto;
  padding: 0 0 150px;
  background: url(../images/sdgs_img06.webp) no-repeat center bottom;
}
.attempt-box_ver2 h3 {
  padding: 40px 0 15px;
  background: url(../images/sdgs_img05.webp) no-repeat center top;
  color: var(--color_type1);
  font-size: 1.6rem;
  font-weight: bold;
}

.attempt-box_ver2-inner {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 0 0 40px;
}

.attempt-box_ver2-inner ul {
  margin: 15px 0;
  font-size: 1.1rem;
}
.attempt-box_ver2-inner ul li {
  background-color: color-mix(in srgb, var(--color_type2) 10%, var(--white) 0%);
  color: var(--color_type6);
  padding: 10px 15px;
  font-weight: bold;
  margin: 0 0 1px;
}
.attempt-box_ver2-inner .icon img {
  width: 80px;
  height: auto;
}

@media screen and (max-width: 520px) {
  .attempt-box_ver2 {
    width: 100%;
    padding-bottom: 50px;
    background-size: 100% auto;
  }
  .attempt-box_ver2 h3 {
    background-size: 100% auto;
    font-size: 1.4rem;
    padding: 20px 0 0;
  }
  .attempt-box_ver2-inner {
    flex-flow: column;
    gap: 0;
  }
  .attempt-box_ver2-inner ul {
    width: 100%;
  }
  .attempt-box_ver2-inner .icon {
    display: flex;
    flex-flow: wrap;
    gap: 5px;
  }
}

.sdgs-news {
  padding: 0 var(--over-width-half) 100px;
  --titCta: center;
}

@media screen and (max-width: 520px) {
  .sdgs-news {
    padding: 0 var(--over-width-half) 40px;
  }
}

/*----------------------------------------
  サステナブル通信
----------------------------------------*/
.sust-list {
  padding: 100px var(--over-width-half);
}

.list-sustainables {
  columns: 2;
  gap: 30px;
}
.list-sustainables li {
  margin: 0 0 15px;
  padding: 15px;
  border-bottom: 1px solid var(--color_type3);
}

.list-sustainable {
}
.list-sustainable li {
  margin: 0 0 15px;
  padding: 15px;
  border-bottom: 1px solid var(--color_type3);
}

@media screen and (max-width: 520px) {
  .sust-list {
    padding: 50px var(--over-width-half);
  }

  .list-sustainables {
    columns: 1;
    gap: 15px;
  }
}

.sdgs-sus {
  display: flex;
  align-items: stretch;
  gap: 50px;
  margin-bottom: 80px;
  padding: 0 var(--over-width-half) 0 0;
  background-color: color-mix(in srgb, var(--color_type6) 5%, var(--white) 0%);
  --titCm: 30px 0 15px;
  --titCfz: 1.5rem;

  --btnAm: 30px 0 0 auto;
}

.sdgs-sus picture {
  flex: none;
  width: 50vw;
}

.sdgs-sus picture img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media screen and (max-width: 520px) {
  .sdgs-sus {
    flex-flow: column;
    gap: 20px;
    margin-bottom: 40px;
    padding: 30px 0;
    --titCm: 0 0 15px;
    --titCfz: 1.3rem;
  }
  .sdgs-sus picture {
    flex: none;
    width: 100%;
  }
}

/* -------------------------------
   BCP
------------------------------- */

html[data-bcpmode] {
  overflow: hidden;
}

#bcp {
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.95);
  width: 100%;
  height: 100%;
  z-index: 100;
  padding: 40px;
  overflow: auto;
}

#bcp > .in {
  background: #fff;
  padding: 40px;
  max-width: 920px;
  margin: 0 auto;
}

#bcp > .in > *:nth-child(n + 2) {
  margin-top: 20px;
}

#bcpTit {
  font-weight: bold;
  font-size: 120%;
}

#bcp > .in dt {
  font-weight: bold;
}

#bcp > .in dt:nth-child(n + 2) {
  margin-top: 20px;
}

#bcp > .in dd {
  padding: 10px 0 0 20px;
}

#bcp > .in dd > *:nth-child(n + 2) {
  margin-top: 10px;
}

#bcp > .in dd.dispFlex {
  display: flex;
}

#bcp > .in dd.dispFlex > *:nth-child(n + 2) {
  margin: 0 0 0 10px;
}

#bcp > .in dd table {
  width: 100%;
  table-layout: fixed;
}

#bcp > .in dd th {
  border: 1px solid #000;
  padding: 10px;
  text-align: center;
}

#bcp > .in dd td {
  border: 1px solid #000;
  padding: 10px;
}

#bcp > .in dd td > *:nth-child(n + 2) {
  margin-top: 10px;
}

@media print {
  html[data-bcpmode] #wrap {
    display: none;
  }

  html[data-bcpmode] #bcp {
    position: relative;
    top: auto;
    left: auto;
    padding: 0;
    zoom: 80%;
    overflow: visible;
  }

  html[data-bcpmode] #bcp > .in {
    max-width: 100%;
  }
}

.js-scrollable .scroll-hint-icon {
  height: 50px;
  padding: 15px 5px 5px;
  background: rgba(0, 0, 0, 0.5);
  left: calc(80% - 60px);
}
.js-scrollable .scroll-hint-icon:after {
  top: 5px;
}
.js-scrollable .scroll-hint-icon:before {
  width: 20px;
  height: 20px;
}

/**================================================== 
2024/8/add
==================================================*/
.topcamp {
  width: 100%;
  border: 1px solid var(--white);
  color: var(--white);
  text-align: center;
  padding: 20px 0;
}
.topcamp :is(i, strong, small) {
  display: block;
  font-weight: bold;
  line-height: 1.5;
}
.topcamp i {
  color: var(--color_type7);
  font-size: 1.5rem;
}
.topcamp strong {
  font-size: 2.75rem;
}
.topcamp small {
  font-style: italic;
  color: var(--color_type7);
  font-size: 1.1rem;
}

@media screen and (max-width: 520px) {
  .topcamp {
    padding: 15px 0;
  }
  .topcamp i {
    color: var(--color_type7);
    font-size: 1rem;
  }
  .topcamp strong {
    font-size: 1.7rem;
    line-height: 1.3;
    margin: 5px 0;
  }
  .topcamp small {
    font-size: 0.9rem;
  }
}

.catcamp {
  width: 100%;
  border: 1px solid var(--color_type1);
  padding: 20px 30px;
  margin: 0 0 60px;
  display: flex;
  align-items: center;
  gap: 45px;
  font-weight: bold;
}

.catcamp i {
  width: 180px;
  font-size: 2rem;
  color: var(--color_type2);
}

.catcamp p {
  font-size: 1.1rem;
}

@media screen and (max-width: 520px) {
  .catcamp {
    padding: 15px;
    margin: 0 0 30px;
    flex-flow: column;
    gap: 5px;
  }
  .catcamp i {
    font-size: 1.7rem;
    width: 100%;
  }
}

/*==================================================
 all staff アニメーション
==================================================*/
/* スクロール領域全体をマスクするコンテナ */
.all_staff_scroll {
  width: 2500px;
  height: auto;
  aspect-ratio: 3500 / 578; /* アップロードされた画像の縦横比を使用 */
  overflow: hidden; /* この領域外に移動した部分は非表示にする */
  position: relative;
}

/* アニメーションの対象となる内側のコンテナ (画像を2枚保持) */
.all_staff {
  display: flex;
  width: 200%; /* 画像2枚分なので100% x 2 = 200% の幅が必要 */
  height: 100%;
  /* CSSアニメーションを適用 */
  animation: scroll 30s linear infinite; /* 30秒かけて、直線的に、無限に繰り返す */
}

/* 画像要素のスタイル */
.all_staff img {
  width: 50%; /* コンテナ幅の半分 (画像1枚分) */
  height: 100%;
  object-fit: cover;
}

/*
  キーフレームアニメーションの定義
----------------------------------------*/
@keyframes scroll {
  0% {
    /* 初期位置：コンテナの左端 */
    transform: translateX(0);
  }
  100% {
    /* 画像1枚分（コンテナ幅の50%）だけ左に移動 */
    /* 100%移動すると、複製した画像が元の画像の位置にぴったりと重なり、途切れなく見える */
    transform: translateX(-50%);
  }
}

@media screen and (max-width: 520px) {
  /* スクロール領域全体をマスクするコンテナ */
  .all_staff_scroll {
    width: 160%;
    aspect-ratio: 1000 / 600; /* 例: 高さの比率を大きくして画像を大きく見せる */
    transform: translateZ(0); /* 途切れ対策 */
  }

  .all_staff {
    width: 800%;
    animation: scroll 25s linear infinite;
    transform: translateZ(0); /* 途切れ対策 */
    will-change: transform; /* 途切れ対策 */
  }
}

.section-mirai {
  background-color: color-mix(in srgb, var(--black) 5%, var(--white) 0%);
  --btnAw: 320px;
}

.list-postC {
  --num: 4;
  --g: 15px;
  --w: calc((100% - var(--g) * (var(--num) - 1)) / var(--num));
  display: flex;
  flex-flow: wrap;
  gap: var(--g);
  position: relative;
  z-index: 5;
}

.list-postC > * {
  width: var(--w);

  display: flex;
  flex-flow: column;
  gap: 20px;
}

.list-postC :is(figure, picture) {
  display: block;
  aspect-ratio: 520/346;
  overflow: hidden;
}

.list-postC img {
  max-width: auto;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media screen and (max-width: 520px) {
  .list-postC {
    --num: 2;
    gap: 10px;
  }
}