@charset "utf-8";

/* CSS Document */
:root {
  --color-main: #E56C21;
  --color-sub: #231815;
  --color-bg-light: #E7C297;
  --color-bg-gray: #CCCCCC;
  --color-white: #ffffff;
  --color-black: #333333;
  /* Fonts */
  --font-main: "Noto Sans JP", sans-serif;
  --font-heading: 'Oswald', sans-serif;
  --font-deco: 'Cinzel', serif;
  /* Sizes */
  --header-height: 60px;
  --container-max: 1024px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  font-family: var(--font-main);
  font-weight: 500;
  font-size: 16px;
}

a {
  text-decoration: none;
  color: var(--color-sub);
  background: transparent;
}
.container {
  max-width: var(--container-max);
  margin: auto;
}
.flex {
  display: flex;
}

/* fv */
#fv {
  height: 100vh;
  background: url(../img/surface.png) no-repeat center / cover;
}
#fv .sp-only {
  display: none;
}
#fv .oBg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #912905;
  opacity: 0.46;
  z-index: 1;
}
#fv .textArea {
  text-align: center;
  color: var(--color-white);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 90%;
}
#fv .ttl__en {
  font-size: 25px;
  font-family: var(--font-heading);
  letter-spacing: 0.06em;
}
#fv .ttl__en span {
  border-bottom: 1px solid var(--color-white);
}
#fv .ttl__ja {
  font-size: 23px;
  font-weight: 900;
  margin-top: 36px;
  letter-spacing: 0.02em;
}
#fv .text {
  font-size: 15px;
  font-weight: 700;
  line-height: 2.1;
  margin-top: 36px;
  letter-spacing: 0.08em;
}

/* #what */
#what {
  background: url(../img/about-bk.png) no-repeat center / cover;
  padding: 80px 0 55px 0;
  position: relative;
}
#what .oBg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #ffb96e;
  opacity: 46%;
  z-index: 1  ;
}
#what .container {
  position: relative;
  z-index: 2;
}
#what .contents {
  width: 82.1289%;
  margin: auto;
  margin-top: 68px;
  justify-content: space-between;
  align-items: center;
}
#what .enBlock {
  padding: 0 20px;
  text-align: center;
  font-family: var(--font-heading);
  position: relative;
  letter-spacing: 0.02em;
}
#what .en {
  font-size: 58px;
  color: #a6a6a7;
}
#what .enWhite {
  color: transparent;
  -webkit-text-stroke: 1px #fff;
  font-size: 39px;
  position: absolute;
  top: 50%;
  right: 7%;
}
#what .img {
  width: 49.22769%;
}
#what .textArea {
  width: 46.07664%;
  position: relative;
}
#what .area {
  width: 74.477419%;
  margin-left: auto;
}
#what .text {
  font-size: 16px;
  line-height: 1.6875;
}
#what .animeTtl {
  position: absolute;
  top: 40%;
  left: 0;
}

/* #power */
#power {
  background: url(../img/about-bk.png) no-repeat center / cover;
  padding: 100px 0 70px 0;
}
#power .sp-only {
  display: none;
}
#power .contents {
  width: 83.1054%;
  justify-content: space-between;
  align-items: center;
  margin: auto;
}
#power .textArea {
  width: 43.643286%;
  position: relative;
}
#power .area {
  width: 77.705977%;
}
#power .text {
  font-size: 16px;
  line-height: 1.6875;
}
#power .img {
  width: 49.354281%;
}
#power .enBlock {
  position: relative;
  font-family: var(--font-heading);
  letter-spacing: 0.02em;
}
#power .en {
  font-size: 58px;
  text-align: center;
  margin-top: 90px;
  color: #a6a6a7;
}
#power .enWhite {
  position: absolute;
  top: 64%;
  right: 4%;
  font-size: 39px;
  color: transparent;
  -webkit-text-stroke: 1px #000;
  line-height: 1.07;
}

/* #spraying */
#spraying {
  background: url(../img/thermal-bk.png);
  padding: 74px 0 124px 0;
}
#spraying .container {
  position: relative;
}
#spraying .contents {
  width: 84.71679%;
  margin: auto;
}
#spraying .fastContents {
  position: relative;
  justify-content: space-between;
  align-items: center;
}
#spraying .textArea {
  width: 42.76657%;
  margin-top: 10px;
  position: relative;
  z-index: 2;
}
#spraying .img {
  width: 54.155619%;
}
#spraying .positionText {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 58px;
  font-family: var(--font-heading);
  color: var(--color-white);
  line-height: 1;
  z-index: 1;
}
#spraying .ttl {
  font-size: 45px;
  font-weight: 900;
}
#spraying .text {
  font-size: 16px;
  line-height: 1.6875;
  margin-top: 10px;
}
.thermalList {
  width: 74.482421%;
  margin: auto;
  margin-top: 48px;
}
#spraying .secondContents {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  width: 79.10156%;
  margin: auto;
  margin-top: 43px;
}
#spraying .item {
  background-color: rgba(255, 255, 255, 0.6);
  position: relative;
  padding: 30px 20px 20px;
}
#spraying .itemTtl {
  text-align: center;
  font-size: 20px;
  font-weight: 900;
  color: #736357;
}
#spraying .line {
  width: 100%;
  height: 3px;
  background: linear-gradient(
    to right,
    #E56C21 0%,    /* 左：オレンジ */
    #ffffff 50%,  /* 中央：白 */
    #E56C21 100%  /* 右：オレンジ */
  );
  margin-top: 8px;
}
.itemText {
  font-size: 15px;
  margin-top: 10px;
}
.check {
  position: absolute;
  top: -5%;
  left: -7%;
  width: 20.1%;
}
#spraying .note {
  font-size: 12px;
  margin-top: 10px;
}
#spraying .animeTtl {
  position: absolute;
  bottom: -10%;
  left: 3%;
}
#spraying .bottomText {
  bottom: -11%;
  top: auto;
  left: 21%;
}

/* #and */
#and {
  padding: 74px 0 124px 0;
  background: url(../img/types-bk.png) no-repeat center / cover;
}
#and .container {
  position: relative;
}
#and .contents {
  width: 61.34765%;
  margin: auto;
}
#and .block {
  display: flex;
  justify-content: space-between;
}
#and .block:not(:first-child) {
  margin-top: 40px;
}
#and .img {
  width: 34.076433%;
}
#and .textArea {
  width: 59.610027%;
}
#and .box {
  display: flex;
  align-items: center;
}
#and .num {
  font-size: 67px;
  font-family: var(--font-heading);
  color: var(--color-white);
}
#and .bTtl {
  font-size: 22px;
  font-weight: 900;
  color: #736357;
  margin-top: 20px;
  margin-left: 10px;
}
#and .text {
  font-size: 15px;
  font-weight: 400;
  color: var(--color-sub);
}
#and .animeTtl {
  position: absolute;
  top: 0;
  right: 5%;
}
#and .positionText{
  writing-mode: vertical-lr;   /* 縦方向に流す */
  text-orientation: mixed;     /* 英語は横向きのまま */
  font-family: 'Oswald', sans-serif; /* 見本画像っぽく */
  line-height: 1.2;
  font-size: 58px;
  color: var(--color-white);
  position: absolute;
  white-space: nowrap;
  bottom: -10%;
  left: 5%;
  display: flex;
  letter-spacing: 0.02em;
}

/* 下段（OF THERMAL SPRAYING） */
#and .positionText span{
  display: block;
  font-size: 58px;
  writing-mode: lr;
}

/* #technical */
#technical {
  padding: 45px 0 35px 0;
  position: relative;
}
#technical .container {
  position: relative;
  margin-top: 60px;
}
#technical .contents {
  width: 88.623046%;
  margin: auto;
}
#technical .textArea {
  width: 50.39085%;
}
#technical .area {
  width: 81.5456%;
  margin-left: auto;
  font-weight: 700;
}
#technical .textArea p {
  font-size: 15px;
  line-height: 1.95;
  color: #666666;
}
#technical .downloadArea {
  width: 47.254876%;
  display: flex;
  justify-content: space-between;
}
#technical .downloadArea .img {
  width: 46.940583%;
}
#technical .animeTtl {
  position: absolute;
  bottom: 0;
  left: 5%;
}
#technical .positionText.sp-only {
  display: none;
}
#technical .positionText {
  font-size: 58px;
  color: #e8e5c8;
  font-family: var(--font-heading);
  overflow: hidden;
  pointer-events: none;
}
/* 流れる中身 */
#technical .loopText{
  display: inline-flex;
  white-space: nowrap;
  animation: loopText 20s linear infinite;
}

/* 文字スタイル */
#technical .loopText span{
  font-size: 58px;
  font-family: var(--font-heading);
  color: #e8e5c8;
  letter-spacing: 0.08em;
  padding-right: 2em; /* 次の文字との間隔 */
}

/* 左に流す */
@keyframes loopText{
  from{
    transform: translateX(0);
  }
  to{
    transform: translateX(-50%);
  }
}

/* レスポンシブ */
@media screen and (max-width: 1023px) {
  #fv .sp-only {
    display: block;
  }
  #fv .pc-only {
    display: none;
  }
  #what {
    padding: 40px 0 85px 0;
    position: relative;
  }
  #what .enBlock {
    position: static;
  }
  #what .enWhite {
    top: 76vw;
    right: auto;
    left: 5%;
    text-align: left;
    line-height: 1.07;
  }
  #what .contents {
    display: block;
    width: 100%;
    margin-top: 0;
  }
  #what .img {
    width: 88.5066666%;
  }
  #what .textArea {
    margin: auto;
    margin-top: 115px;
    width: 90%;
  }
  #what .area {
    width: 88.5066666%;;
  }
  #what .animeTtl {
    top: auto;
    bottom: -58%;
  }
  #what .sp {
    display: none;
  }

  #power .contents {
    display: block;
    width: 100%;
  }
  #power .textArea {
    width: 85.6%;
    margin: auto;
  }
  #power .img {
    width: 89.7066666%;
    margin: auto;
    margin-top: 45px;
  }
  #power .en {
    display: none;
  }
  #power .enWhite {
    right: auto;
    left: 4%;
  }

  #spraying .contents {
    display: block;
    width: 100%;
  }
  #spraying .textArea {
    width: 85.8666666%;
    margin: auto;
  }
  #spraying .img {
    width: 95.2%;
    margin-left: auto;
    margin-top: 26px;
  }
  #spraying .positionText {
    top: -2%;
    left: 7%;
  }
  #spraying .secondContents {
    display: grid;
    width: 92%;
    gap: 10px;
    margin-top: 200px;
  }
  #spraying .bottomText {
    bottom: auto;
    top: calc(68vw + 400px);
    font-size: 40px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
  }

  /* #and */
  #and .contents {
    width: 75.2%;
  }
  #and .block {
    display: block;
  }
  #and .animeTtl,
  #and .positionText{
    pointer-events: none;
  }
  #and .positionText{
   left: 1%;
  }
  #and .block {
    position: relative;
  }
  #and .block:not(:first-child) {
    margin-top: 0;
  }
  #and .img {
    width: 75.886%;
  }
  #and .textArea {
    width: 90%;
    margin-left: auto;
  }
  #and .num {
    font-size: 67px;
  }

  /* #technical */
  #technical .contents {
    display: block;
  }
  #technical .textArea {
    width: 85.8666666%;
    margin-top: 30px;
  }
  #technical .area {
    width: 100%;
    margin-left: 0;
  }
  #technical .downloadArea {
    width: 92%;
    margin: auto;
  }
  #technical .positionText.sp-only {
    display: block;
  }
  #technical .positionText.pc-only {
    display: none;
  }
}


@media screen and (max-width: 559px) {
  #power  {
    padding: 100px 0 123px 0;
  }
  #power .sp-only {
    display: block;
  }
  #what .text {
    font-size: 14px;
  }
  #what .area {
    width: 79.525222%;
  }
  #what .animeTtl {
    bottom: -42%;
  }
  #power .text {
    font-size: 14px;
  }

  #spraying {
    background: url(../img/thermal-bk.png);
    padding: 132px 0 30px 0;
  }
  #spraying .ttl {
    font-size: 37px;
  }
  #spraying .positionText {
    top: -21%;
  }
  #spraying .text {
    font-size: 14px;
  }
  .thermalList {
    width: 95%;
  }
  #spraying .bottomText {
    font-size: 19px;
    top: calc(185vw + 400px);
  }
  #spraying .secondContents {
    width: 66.053333%;
    display: block;
    margin-top: 150px;
  }
  #spraying .item:not(:first-child) {
    margin-top: 30px;
  }
  .itemText {
    font-size: 14px;
  }
  #spraying .item {
    padding: 30px 20px 10px;
    height: 231px;
  }

  #and {
    padding: 74px 0 55px 0;
  }
  #and .positionText {
    font-size: 37px;
  }
  #and .positionText span{
    font-size: 37px;
  }
  #and .num {
    position: absolute;
    top: 30%;
    right: -1%;
  }
  #and .bTtl {
    margin-left: 0;
    font-size: 18px;
  }

  #technical .container {
    margin-top: 0;
  }
  #technical .contents {
    width: 100%;
  }
  #technical .textArea {
    width: 90%;
    margin: auto;
    margin-top: 30px;
  }
  #technical .textArea p {
    font-size: 14px;
  }

}
/* 559pxここまで */

/* js用 */
/* 見えない読み上げ用 */
/* 読み上げ用（必要なら） */
.sr-only{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);
  white-space:nowrap;border:0;
}
/* h2 全体 */
.animeTtl{
  display:flex;
  align-items:flex-end;
  font-size: 45px;
  color: #58595b;
  font-weight: 900;
  pointer-events: none;
}
/* 縦書き部分 */
.animeTtl .ttlVert{
  writing-mode: vertical-rl;
  text-orientation: upright;
  line-height: 1;
}
/* 横書き部分 */
.animeTtl .ttlHori{
  line-height: 1;
}
/* 1文字 */
.animeTtl .char{
  display:inline-block;
  opacity:0;
  transform: translateY(10px);
  filter: blur(2px);
}
/* 発火後 */
.animeTtl.is-inview .char{
  animation: charIn .55s ease forwards;
}

/* =========================
   #power 専用 上書きFIX
========================= */

#power .animeTtl{
  display: inline-block;
  position: absolute;
  top: -60%;
  right: 0;
}

/* 横書き */
#power .animeTtl .ttlHori{
  display: inline-block;
  line-height: 1;
}

/* 縦書き（writing-mode を完全に無効化） */
#power .animeTtl .ttlVert{
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: -0.2em;

  /* ★ ここが超重要 */
  writing-mode: initial;      /* vertical-rl を殺す */
  text-orientation: initial;

  display: flex;
  flex-direction: column;     /* 縦に積む */
  align-items: center;
}

/* 縦の1文字 */
#power .animeTtl .ttlVert .char{
  display: block;
  line-height: 1;
}

/* =========================
   #spraying 用レイアウト
========================= */

#spraying .animeTtl, #technical .animeTtl {
  display: flex;
  flex-direction: column-reverse;   /* 上→下に積む */
  align-items: flex-start;
}

/* 縦文字：1文字ずつ縦 */
#spraying .animeTtl .ttlVert, #technical .animeTtl .ttlVert {
  display: flex;
  flex-direction: column;
  align-items: center;

  writing-mode: initial;   /* 念のため無効化 */
  text-orientation: initial;
}

/* 縦側の1文字 */
#spraying .animeTtl .ttlVert .char, #technical .animeTtl .ttlVert .char {
  display: block;
  line-height: 1;
}

/* 横文字：縦文字の「下」に横で出す */
#spraying .animeTtl .ttlHori, #technical .animeTtl .ttlHori {
  margin-top: 0.1em;       /* 「る」との間隔調整 */
  display: inline-flex;
  gap: 0;                  /* 文字間を詰めたいなら */
}

/* 横側の1文字 */
#spraying .animeTtl .ttlHori .char, #technical .animeTtl .ttlHori .char {
  display: inline-block;
}

#technical .animeTtl {
  color: #999999;
}
#technical .animeTtl .ttlVert {
  margin-bottom: 0.4em;
}

@media screen and (max-width: 1023px) {
  #spraying .animeTtl {
    font-size: 45px;
    flex-direction: row-reverse;
    align-items: center;
    top: calc(74vw + 400px);
    left: 50%;
    transform: translateX(-50%);
    height: fit-content;
  }
  #spraying .animeTtl .ttlVert {
    writing-mode: vertical-lr;
  }
  #technical .animeTtl {
    position: static;
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-start;
    line-height: 1;
    width: 85.8666666%;
    margin: auto;
  }
  #technical .animeTtl .ttlHori {
    margin: 0;
    line-height: 1.4;
  }
  #technical .animeTtl .ttlVert {
    writing-mode: vertical-lr;
    margin-bottom: 0;
  }
}

@media screen and (max-width: 559px) {
  #fv {
    background: url(../img/surface-r.png) no-repeat center / cover;
  }
  #power .animeTtl {
    top: -50%;
  }
  #spraying .animeTtl {
    font-size: 29px;
    top: calc(192vw + 400px);
  }
  #and .animeTtl {
    font-size: 29px;
    color: var(--color-white);
    top: -44px;
  }
  #and .animeTtl .ttlVert {
    writing-mode: horizontal-tb;
  }
  #technical .animeTtl {
    font-size: 29px;
    width: 90%;
  }
}

/* =========================
   #and 用：縦一列見出し
========================= */

#and .ttl{
  display: inline-block;
}

/* 縦一列（writing-modeは使わない） */
#and .ttl .ttlVert{
  display: flex;
  flex-direction: column;   /* 上→下に積む */
  align-items: center;

  writing-mode: initial;
  text-orientation: initial;
}

/* 1文字ずつ */
#and .ttl .ttlVert .char{
  display: block;
  line-height: 1;
}


@keyframes charIn{
  to{
    opacity:1;
    transform: translateY(0);
    filter: blur(0);
  }
}

/* slider */
.slidePager {
  display: none;
}
@media screen and (max-width: 1023px) {
  .slidePager{
    display:flex;
    align-items:center;
    justify-content:flex-start; /* 左寄せにしたければ */
    gap: 14px;
    margin-top: 18px;         /* テキスト下の余白 */
    width: 60%;
    margin: auto;
    margin-top: 30px;
  }

  .slidePager .pagerBtn{
    display:inline-flex;
    align-items:baseline;
    gap: 8px;
    border: 0;
    background: transparent;
    padding: 0;
    cursor: pointer;
    color: #ffffff;            /* 画像の白文字想定 */
    font-weight: 900;
    font-size: 30px;           /* 01/02のサイズ */
    letter-spacing: .02em;
  }

  .slidePager .pagerArrow{
    font-size: 30px;           /* <<< >>> のサイズ */
  }
}

@media screen and (max-width: 559px) {
  .slidePager .pagerArrow {
    font-weight: 100;
    font-size: 20px;
  }
}