/* 工場見学ページ専用CSS（クラス名はすべて fact_ 始まり） ※functions.php で固定ページ限定で読み込み */


/* ==========================================================================
   工場見学ページ (fact_)  ここから
   --------------------------------------------------------------------------
   ・工場見学ページ専用。クラス名はすべて「fact_」始まり（既存定義とは干渉しません）
   ・既存の :root 変数（--max-light / --acc-color / --s-font など）を流用
   ・ブレークポイントは既存に合わせて 〜520 / 521〜 / 821〜 / 1181〜
   ========================================================================== */
:root{
  --fact-blue:#3272f1;
  --fact-blue-text:#0c4ccb;
  --fact-orange:#f15832;
  --fact-bg:#e9f3ff;
  --fact-line:#707070;
  --fact-text:#101010;
  --fact-tri-w:20vw;
  --fact-tri-h:6vw;
  --fact-fs:max(var(--s-font),13px);
  --fact-fs-m:max(var(--m-font),14px);
  --fact-fs-sm:max(calc(var(--s-font) * .85),12.5px);
}
@media(min-width:821px){
  :root{
    --fact-tri-w:13vw;
    --fact-tri-h:3.1vw;
  }
}

/* ---- 共通 ---- */
.fact_hero, .fact_intro1, .fact_intro2, .fact_movie, .fact_process_lead, .fact_process{
  color:var(--fact-text);
  font-size:var(--fact-fs);
  line-height:1.8;
}
.fact_hero img, .fact_intro1 img, .fact_intro2 img, .fact_movie img, .fact_process img{
  max-width:100%;
  height:auto;
}
.fact_steps_list, .fact_chapter_list, .fact_spec_list, .fact_more_list{
  list-style:none;
  margin:0;
  padding:0;
}
.fact_sr{
  position:absolute;
  width:1px;
  height:1px;
  margin:-1px;
  padding:0;
  overflow:hidden;
  clip:rect(0,0,0,0);
  border:0;
}
.fact_br{
  display:none;
}
.fact_mark_k{
  margin-left:.1em;
}
.fact_mark_b{
  color:var(--fact-blue-text);
}

/* ---- トップ ---- */
.fact_hero{
  position:relative;
  margin-top:16vw;
  aspect-ratio:4 / 3;
  background:#9aa4b8 url(../img/fact_top.jpg) no-repeat center/cover;
  overflow:hidden;
}
.fact_hero:before{
  content:"";
  position:absolute;
  inset:0;
  background:#acb6c9;
  mix-blend-mode:multiply;
}
.fact_hero_h{
  position:absolute;
  left:50%;
  bottom:6%;
  width:90%;
  margin:0;
  transform:translateX(-50%);
  z-index:2;
}
.fact_hero_h img{
  display:block;
  width:100%;
}

/* ---- 導入1 ---- */
.fact_intro1{
  padding:6vw 5vw;
}
.fact_intro1_in{
  padding:4vw;
  background:#c9a77a url(../img/fact_top_bg.png) no-repeat center/cover;
}
.fact_intro1_box{
  padding:5vw 4vw;
  background:#fff;
  border-radius:10px;
  text-align:center;
  font-weight:500;
}
.fact_intro1_box p + p{
  margin-top:1.6em;
}

/* ---- 導入2 ---- */
.fact_intro2{
  position:relative;
  padding:6vw 5vw;
  background:var(--fact-bg);
}
.fact_intro2:after{
  content:"";
  position:absolute;
  left:50%;
  top:100%;
  width:var(--fact-tri-w);
  height:var(--fact-tri-h);
  margin-top:-1px;
  transform:translateX(-50%);
  background:var(--fact-bg);
  clip-path:polygon(0 0,100% 0,50% 100%);
}
.fact_intro2_box{
  padding:8vw 5vw;
  background:#fff;
  border-radius:10px;
}
.fact_intro2_title{
  width:fit-content;
  max-width:100%;
  margin:0 auto 4vw;
  padding-bottom:2vw;
  border-bottom:3px solid var(--fact-text);
  font-size:var(--fact-fs-m);
  font-weight:700;
  line-height:1.6;
  text-align:center;
}
.fact_intro2_img{
  max-width:786px;
  margin:0 auto 4vw;
  text-align:center;
}
.fact_intro2_img img{
  width:100%;
}
.fact_intro2_lead{
  max-width:1000px;
  margin:0 auto 8vw;
  font-weight:500;
}
.fact_machine{
  display:flex;
  flex-direction:column;
  margin-top:7vw;
}
.fact_machine_head{
  display:flex;
  flex-direction:column;
  padding-bottom:.4em;
  margin-bottom:.8em;
  border-bottom:1px solid var(--fact-text);
  line-height:1.5;
}
.fact_machine_name{
  font-size:var(--fact-fs-m);
  font-weight:900;
}
.fact_machine_cat{
  font-size:var(--fact-fs);
  font-weight:700;
}
.fact_machine_txt p{
  font-weight:500;
}
.fact_machine_img{
  margin-top:4vw;
}
.fact_machine_img img{
  display:block;
  width:100%;
}
.fact_intro2_cap{
  margin-top:5vw;
  font-size:var(--fact-fs-m);
  font-weight:500;
  line-height:1.5;
  text-align:center;
}

/* ---- 工場見学動画（通常Ver／ロングVer 共通） ---- */
.fact_movie{
  padding:calc(var(--fact-tri-h) + 8vw) 5vw 10vw;
}
.fact_movie_lead{
  max-width:1200px;
  margin:0 auto 6vw;
  padding:4vw 4vw;
  border:1px solid var(--fact-line);
  border-radius:10px;
  font-size:var(--fact-fs-m);
  font-weight:500;
  line-height:1.7;
  text-align:center;
}
.fact_movie_body{
  max-width:1200px;
  margin:0 auto;
}
.fact_video{
  position:relative;
  width:100%;
  aspect-ratio:16 / 9;
  background:#dbdbdb;
}
.fact_video iframe,
.fact_video video{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  border:0;
}
.fact_video video{
  display:block;
  background:#000;
  object-fit:contain;
}
.fact_long_link{
  margin:2vw 0 3vw;
  font-size:var(--fact-fs-sm);
  line-height:1.5;
  text-align:right;
}
.fact_long_link a{
  color:var(--fact-text);
  text-decoration:underline;
}
.fact_visit_bar{
  padding:.8em 1em;
  background:var(--fact-blue);
  color:#fff;
  font-size:var(--fact-fs-m);
  font-weight:500;
  line-height:1.5;
  text-align:center;
}
.fact_movie_main .fact_video + .fact_visit_bar{
  margin-top:3vw;
}
.fact_long_link + .fact_visit_bar{
  margin-top:0;
}
.fact_more_list a:hover, .fact_long_link a:hover{
  opacity:.7;
}
.fact_chapter{
  margin-top:7vw;
}
.fact_chapter_title{
  margin-bottom:.6em;
  font-size:var(--fact-fs-m);
  font-weight:500;
  line-height:1.5;
}
.fact_chapter_list li{
  display:flex;
  padding:.35em 0;
  font-size:var(--fact-fs-sm);
  font-weight:500;
  line-height:1.5;
}
.fact_time{
  flex:0 0 3.8em;
}
.fact_new{
  color:var(--fact-blue-text);
}
.fact_chapter_note{
  margin-top:1.6em;
  font-size:var(--fact-fs-sm);
  font-weight:500;
  line-height:1.6;
}

/* ロングVer：見出し */
.fact_long_head{
  max-width:1284px;
  margin:0 auto 6vw;
  text-align:center;
}
.fact_long_title{
  margin-bottom:.8em;
  padding-bottom:.6em;
  border-bottom:1px solid var(--fact-line);
  font-size:var(--fact-fs-m);
  font-weight:700;
  line-height:1.6;
}
.fact_long_lead{
  font-size:var(--fact-fs);
  font-weight:700;
  line-height:1.8;
  text-align:left;
}

/* 「より詳しく知りたい方へ」PDFリンク */
.fact_more{
  display:flex;
  flex-direction:column;
  align-items:center;
  max-width:1000px;
  margin:9vw auto 0;
  padding:5vw 3vw 4vw;
  border:1px solid var(--fact-line);
  border-radius:10px;
}
.fact_more_title{
  margin-bottom:4vw;
  font-size:var(--fact-fs-m);
  font-weight:500;
  line-height:1.5;
}
.fact_more_list{
  display:flex;
  flex-direction:column;
  gap:5vw;
  width:100%;
  max-width:360px;
}
.fact_more_list li{
  min-width:0;
}
.fact_more_list a{
  display:flex;
  align-items:center;
  gap:5vw;
  color:var(--fact-text);
  text-decoration:none;
  transition:opacity .3s;
}
.fact_more_name{
  flex:1 1 0;
  order:2;
  font-size:var(--fact-fs);
  font-weight:500;
  line-height:1.5;
}
.fact_more_thumb{
  position:relative;
  display:block;
  flex:0 0 40%;
  order:1;
}
.fact_more_thumb img{
  display:block;
  width:100%;
  aspect-ratio:130 / 96;
  object-fit:cover;
  border:1px solid #d2d2d2;
}
.fact_more_thumb .fact_pdf_icon{
  position:absolute;
  right:-14px;
  bottom:-10px;
  width:40px;
  height:auto;
  aspect-ratio:auto;
  object-fit:contain;
  border:0;
}

/* ---- 製造工程 ---- */
.fact_process_lead{
  padding:8vw 5vw 10vw;
  font-size:var(--fact-fs-m);
  font-weight:500;
  line-height:1.6;
  text-align:center;
}
.fact_process{
  position:relative;
  padding:12vw 4vw 10vw;
  background:var(--fact-bg);
}
.fact_process:before{
  content:"";
  position:absolute;
  left:50%;
  top:-1px;
  width:var(--fact-tri-w);
  height:var(--fact-tri-h);
  transform:translateX(-50%);
  background:#fff;
  clip-path:polygon(0 0,100% 0,50% 100%);
}
.fact_process_box{
  padding:8vw 4vw 10vw;
  background:#fff;
  border-radius:10px;
}
.fact_equip + .fact_equip{
  margin-top:16vw;
}
.fact_equip_title{
  width:100%;
  margin-bottom:6vw;
  font-size:var(--l-font);
  font-weight:700;
  line-height:1.3;
  text-align:center;
}
.fact_equip_title:after{
  content:"";
  display:block;
  width:61%;
  margin:.25em auto 0;
  border-bottom:2px solid var(--fact-orange);
}
.fact_equip_main{
  display:flex;
  flex-direction:column;
}
.fact_equip_img img{
  display:block;
  width:100%;
  aspect-ratio:700 / 460;
  object-fit:cover;
  border:3px solid #111;
}
.fact_equip_info{
  margin-top:5vw;
}
.fact_equip_catch{
  margin-bottom:.4em;
  font-size:var(--fact-fs-m);
  font-weight:700;
  line-height:1.5;
}
.fact_equip_txt{
  font-weight:500;
}
.fact_spec{
  position:relative;
  margin:7vw 0 0 2%;
  padding:9vw 4vw 4vw;
  border:2px solid var(--fact-orange);
  border-radius:10px;
}
.fact_spec_label{
  position:absolute;
  top:0;
  left:-2.6vw;
  transform:translateY(-50%);
  min-width:9em;
  padding:.2em 1em;
  background:var(--fact-orange);
  color:#fff;
  font-size:var(--fact-fs-m);
  font-weight:500;
  line-height:1.6;
  text-align:center;
}
.fact_spec_list li{
  margin-bottom:.7em;
  padding:.1em 0 .1em .7em;
  border-left:3px solid var(--fact-orange);
  font-weight:400;
  line-height:1.5;
}
.fact_spec_list li:last-child{
  margin-bottom:0;
}

/* 工程ステップ */
.fact_steps{
  margin-top:10vw;
}
.fact_steps_title{
  padding:.4em 1em;
  background:var(--fact-blue);
  color:#fff;
  font-size:max(var(--lm-font),17px);
  font-weight:700;
  line-height:1.5;
  text-align:center;
}
.fact_step{
  position:relative;
  padding-bottom:calc(var(--fact-tri-h) + 6vw);
}
.fact_step:last-child{
  padding-bottom:0;
}
.fact_step_img{
  margin-top:6vw;
}
.fact_step_img img{
  display:block;
  width:100%;
  aspect-ratio:600 / 380;
  object-fit:cover;
  border:4px solid var(--fact-blue);
}
.fact_step_txt{
  margin-top:3vw;
  font-weight:500;
}
.fact_step:not(:last-child):after{
  content:"";
  position:absolute;
  left:50%;
  bottom:0;
  width:var(--fact-tri-w);
  height:var(--fact-tri-h);
  transform:translateX(-50%);
  background:var(--fact-bg);
  clip-path:polygon(0 0,100% 0,50% 100%);
}

/* ==== 521px〜（タブレット） ==== */
@media(min-width:521px){
  .fact_equip_img, .fact_step_img, .fact_step_txt{
    max-width:600px;
    margin-left:auto;
    margin-right:auto;
  }
  .fact_step_img{
    width:100%;
  }
  .fact_equip_info{
    max-width:600px;
    margin-left:auto;
    margin-right:auto;
  }
  .fact_br{
    display:inline;
  }
  .fact_hero{
    aspect-ratio:3 / 2;
  }
  .fact_hero_h{
    width:76%;
    bottom:7%;
  }
  .fact_intro1{
    padding:5vw 5vw;
  }
  .fact_intro1_box{
    padding:4vw 4vw;
  }
  .fact_intro2_box{
    padding:6vw 5vw;
  }
  .fact_more{
    flex-direction:row;
    justify-content:center;
    gap:4vw;
    padding:4vw 4vw 4vw;
  }
  .fact_more_title{
    margin-bottom:0;
    flex:0 0 auto;
  }
  .fact_more_list{
    flex-direction:row;
    width:auto;
    max-width:none;
    gap:3vw;
  }
  .fact_more_list li{
    flex:0 0 clamp(112px,18vw,130px);
  }
  .fact_more_list a{
    display:block;
  }
  .fact_more_name{
    display:block;
    margin-bottom:.5em;
    font-size:var(--fact-fs-sm);
    line-height:1.4;
  }
  .fact_more_thumb{
    flex:none;
  }
  .fact_chapter_list li{
    padding:.25em 0;
  }
  .fact_chapter_cols{
    display:flex;
    gap:4vw;
  }
  .fact_chapter_cols .fact_chapter_list{
    flex:1 1 0;
  }
  .fact_spec{
    padding:7vw 4vw 3vw;
  }
  .fact_spec_label{
    left:-1.6vw;
  }
}

/* ==== 821px〜（PC） ==== */
@media(min-width:821px){
  .fact_equip_img, .fact_step_img, .fact_step_txt, .fact_equip_info{
    max-width:none;
    margin-left:0;
    margin-right:0;
  }
  .fact_hero{
    margin-top:6.7vw;
    aspect-ratio:1920 / 860;
  }
  .fact_hero_h{
    left:8.2%;
    bottom:4.2%;
    width:62.5%;
    transform:none;
  }

  /* 導入1 */
  .fact_intro1{
    padding:2.5vw 10.4vw;
  }
  .fact_intro1_in{
    padding:2.1vw 3.6vw;
  }
  .fact_intro1_box{
    padding:2.2vw 2vw;
  }
  .fact_intro1_box p + p{
    margin-top:1.4em;
  }

  /* 導入2 */
  .fact_intro2{
    padding:3.9vw 8.3vw 2.6vw;
    margin-top:2.6vw;
  }
  .fact_intro2_box{
    padding:3vw 4.2vw 3.6vw;
  }
  .fact_intro2_title{
    margin-bottom:1.8vw;
    padding-bottom:.6vw;
  }
  .fact_intro2_img{
    margin-bottom:1.6vw;
  }
  .fact_intro2_lead{
    margin-bottom:3.4vw;
    text-align:center;
  }
  .fact_machine{
    flex-direction:row;
    align-items:flex-start;
    justify-content:space-between;
    margin-top:2.6vw;
  }
  .fact_machine_txt{
    flex:0 0 52%;
    max-width:52%;
  }
  .fact_machine_head{
    flex-direction:row;
    align-items:baseline;
    flex-wrap:wrap;
    gap:0 1.6vw;
  }
  .fact_machine_img{
    flex:0 0 44%;
    max-width:44%;
    margin-top:0;
  }
  .fact_intro2_cap{
    margin-top:2.4vw;
  }

  /* 動画 */
  .fact_movie{
    padding:calc(var(--fact-tri-h) + 4.4vw) 6vw 6vw;
  }
  .fact_movie_lead{
    margin-bottom:2.6vw;
    padding:1.6vw 2vw;
  }
  .fact_movie_body{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    max-width:1100px;
  }
  .fact_movie_main{
    flex:0 0 55%;
    max-width:55%;
  }
  .fact_chapter{
    flex:0 0 40%;
    max-width:40%;
    margin-top:0;
  }
  .fact_long_link{
    margin:.8vw 0 .8vw;
  }
  .fact_movie_main .fact_video + .fact_visit_bar{
    margin-top:1.4vw;
  }
  .fact_chapter_list li{
    padding:.2em 0;
  }
  .fact_more_name{
    font-size:.9rem;
    white-space:nowrap;
  }
  .fact_more{
    width:fit-content;
    max-width:100%;
    margin-top:3.6vw;
    padding:1.8vw 3vw 2vw;
    gap:3vw;
  }
  .fact_more_list{
    gap:2.4vw;
  }
  .fact_more_list li{
    flex:0 0 150px;
  }

  /* ロングVer */
  .fact_movie_long .fact_movie_body{
    max-width:1280px;
  }
  .fact_movie_long .fact_movie_main{
    flex:0 0 50%;
    max-width:50%;
  }
  .fact_movie_long .fact_chapter{
    flex:0 0 46%;
    max-width:46%;
  }
  .fact_movie_long .fact_chapter_cols{
    gap:0;
  }
  .fact_movie_long .fact_chapter_cols .fact_chapter_list + .fact_chapter_list{
    margin-left:1.6vw;
    padding-left:1.6vw;
    border-left:1px solid #d2d2d2;
  }
  .fact_long_head{
    margin-bottom:2.6vw;
  }
  .fact_long_lead{
    text-align:center;
  }

  /* 製造工程 */
  .fact_process_lead{
    padding:3vw 5vw 3.4vw;
  }
  .fact_process{
    padding:3.8vw 8.3vw 5.6vw;
  }
  .fact_process_box{
    padding:5.2vw 2.1vw 4vw;
  }
  .fact_equip + .fact_equip{
    margin-top:6.4vw;
  }
  .fact_equip_title{
    margin-bottom:1.8vw;
  }
  .fact_equip_main{
    flex-direction:row;
    align-items:flex-start;
  }
  .fact_equip_img{
    flex:0 0 46%;
    max-width:46%;
  }
  .fact_equip_info{
    flex:1 1 0;
    min-width:0;
    margin-top:.4vw;
    padding-left:2.4vw;
  }
  .fact_spec{
    width:89%;
    margin:1.6vw 0 0 1.1vw;
    padding:2.6vw 1.6vw 1.2vw 2.2vw;
  }
  .fact_spec_label{
    left:-1.1vw;
    min-width:0;
    width:10.4vw;
  }
  .fact_spec_list li{
    margin-bottom:.45em;
  }

  .fact_steps{
    position:relative;
    margin-top:1.4vw;
  }
  .fact_steps_title{
    position:relative;
    height:3.3vw;
    padding:0 0 0 39.5%;
    line-height:3.3vw;
  }
  .fact_steps_list{
    position:relative;
    margin-top:-3.3vw;
  }
  .fact_step{
    display:flex;
    align-items:center;
    min-height:calc(19.8vw + 1.7vw);
    padding-bottom:0;
  }
  .fact_step_img{
    flex:0 0 39.5%;
    max-width:39.5%;
    align-self:stretch;
    margin-top:0;
    padding-bottom:1.7vw;
    background:var(--fact-blue);
  }
  .fact_step:last-child .fact_step_img{
    padding-bottom:0;
  }
  .fact_step_img img{
    border-width:4px;
  }
  .fact_step_txt{
    flex:1 1 0;
    margin:0;
    padding:0 3% 1.7vw 3.6%;
  }
  .fact_step:last-child .fact_step_txt{
    padding-bottom:0;
  }
  .fact_step:not(:last-child):after{
    left:69.8%;
  }
}

/* ==== 1181px〜（大きめPC） ==== */
@media(min-width:1181px){
  .fact_movie_lead{
    max-width:62.5vw;
  }
  .fact_process{
    padding-left:8.3vw;
    padding-right:8.3vw;
  }
}
/* ==========================================================================
   工場見学ページ (fact_)  ここまで
   ========================================================================== */