@charset "UTF-8";

:root{
  --color-new:      #429cab;
  --color-new-light:#a0cdd5;
  --color-mid:      #915747;
  --color-mid-light:#bf938d;
}

body.modal_open{
  height: 100%;
  overflow: hidden;
}

main #recruit .recruit_wrap#new{
  background-color: var(--color-bluegray);
}
main #recruit .recruit_wrap#mid{
}

main #recruit .recruit_wrap .recruit_entry a.btn{
  background-color: var(--color-base);
}


.headline{
  overflow: hidden;
}

/* KVヒーロー化（このページ専用）：
   - パンくずをKV上に重ねて表示
   - KVを inner からはみ出して横幅いっぱい(100vw)に
   - KV上端をヘッダー(高さ80px)直後から開始 */
main{
  position: relative;
}
.breadcrumbs{
  position: absolute;
  top: var(--px-110);
  left: 0;
  width: 100%;
  padding: 0;
  z-index: 10;
}
.headline{
  padding-top: var(--px-80);
}
#kv{
  width: 100vw;
  margin-left: calc(50% - 50vw);
}
/* 画像(円SVG以外)の上に黒25%のオーバーレイを重ねる */
#kv .kv_img::after{
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.15);
  pointer-events: none;
}



@media screen and (min-width : 768px){

  main .headline_ttl[data-layout="column"],
  main .headline_ttl[data-layout="column"] > div:not([data-view="sp"]){
    display: flex;
    flex-direction: column;
    gap: var(--px-28);
  }


  main .btn[data-type="dl"]::after{
    content: "";
    aspect-ratio: 20 / 17;
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    right: var(--px-15);
    margin: auto;
    width: var(--px-20);
    height: var(--px-17);
    background-image: url("/common/img/icon_download.svg");
    background-repeat: no-repeat;
    background-size: 100% auto;
    transition: background-image 0.3s;
  }
  main .btn[data-type="dl"]:hover::after{
    background-image: url("/common/img/icon_download_white.svg");
  }



  /*---------
  kv
  ---------*/
  #kv{
    position: relative;
    width: 100%;
  }

  /* 演出舞台：高さは aspect-ratio で確定（デザインカンプ 1512×940） */
  #kv .kv_stage{
    position: relative;
    width: 100vw;
    height: 100vh;
    /* aspect-ratio: 1512 / 940; */
    overflow: hidden;
    background-color: var(--color-bluegray);
    margin: 0 0 var(--px-130) 0;
  }
  #kv .kv_bg,
  #kv .kv_imgs,
  #kv .kv_circle,
  #kv .kv_cnt{
    position: absolute;
    inset: 0;
  }

  /* 背景：左右半分で色替え */
  #kv .kv_bg{
    display: flex;
    z-index: 1;
  }
  #kv .kv_bg_half{
    flex: 1 1 50%;
    background-color: transparent;
  }

  /* 画像スロット：位置はユーティリティクラス(pos-*)で付与（円より上） */
  #kv .kv_imgs{
    z-index: 3;
    pointer-events: none;
  }
  #kv .kv_img{
    position: absolute;
    opacity: 0;
    overflow: hidden;
  }
  #kv .kv_img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  #kv .kv_img.pos-left{
    left: 0;
    top: 0;
    width: 50%;
    height: 100%;
  }
  #kv .kv_img.pos-right{
    left: 50%;
    top: 0;
    width: 50%;
    height: 100%;
  }
  #kv .kv_img.pos-left-bottom{
    left: 0;
    top: 50%;
    width: 50%;
    height: 50%;
  }
  #kv .kv_img.pos-left-top{
    left: 0;
    top: 0;
    width: 50%;
    height: 50%;
  }
  /* 工程11用ペア（PCは左半分の上下クォーター） */
  #kv .kv_img.pos-split-a{
    left: 0;
    top: 0;
    width: 50%;
    height: 50%;
  }
  #kv .kv_img.pos-split-b{
    left: 0;
    top: 50%;
    width: 50%;
    height: 50%;
  }
  /* 工程9用（PCは左半分の下クォーター） */
  #kv .kv_img.pos-s9{
    left: 0;
    top: 50%;
    width: 50%;
    height: 50%;
  }

  /* 見切れる円：端からはみ出し＋ stage の overflow:hidden でクリップ（画像・テキストより下） */
  #kv .kv_circle{
    z-index: 2;
    pointer-events: none;
  }
  #kv .kv_circle img{
    position: absolute;
    top: 50%;
    left: 50%;
    /* scale:1 がカンプ1054pxに相当（縦横比可変）。JS の scale で 344/687/1054 を表現 */
    width: min(69.71vw, 112.13vh);
    height: auto;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    transform-origin: 50% 50%;
    will-change: transform;
  }

  /* 中央固定テキスト：.kv_cnt はステージ中央、中の文字は左揃え・左端揃え。
     文字数の都合で左に寄って見えるため、.kv_copy 1文字分ほど右へ寄せる */
  #kv .kv_cnt{
    z-index: 5;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateX(min(2.5vw, 4.0vh)); /* ≒ kv_copy 1文字分（カンプ約38px） */
    pointer-events: none;
  }
  #kv .kv_cnt_inner{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }
  #kv .kv_ttl{
    display: flex;
    flex-direction: column;
    gap: var(--px-10);
  }
  /* フォントサイズはデザインカンプ(1512×940)基準で vw/vh 両軸に換算し、
     min() で小さい方を採用 → 縦横比が変わってもどちらの軸でもはみ出さず可変 */
  #kv .kv_ttl span[data-type="en"]{
    font-family: "Vollkorn", serif;
    font-size: min(4.63vw, 7.45vh); /* カンプ70px */
    font-weight: 500;
    letter-spacing: 0.12em;
    line-height: 1.1;
  }
  #kv .kv_ttl span[data-type="jp"]{
    font-size: min(1.39vw, 2.23vh); /* カンプ21px */
    font-weight: 500;
    letter-spacing: 0.18em;
    line-height: 1.6;
  }
  #kv .kv_copy{
    font-size: min(2.12vw, 3.40vh); /* カンプ32px */
    font-weight: 500;
    letter-spacing: 0.18em;
    line-height: 1.9;
    margin: min(6.61vw, 10.64vh) 0 0 0; /* カンプ100px相当 */
  }






  /*---------
  lead
  ---------*/
  main .lead{
    margin: var(--px-120) 0;
    justify-content: center;
    gap: var(--px-130);
  }


  /*---------
  btn_list
  ---------*/
  main .btn_list.js_fix_anchor ul li .btn{
    width: var(--px-220);
  }
  main .btn_list.js_fix_anchor ul li[data-type="new"] .btn::before{
    background-color: var(--color-new);
  }
  main .btn_list.js_fix_anchor ul li[data-type="mid"] .btn::before{
    background-color: var(--color-mid);
  }







  /*---------
  about
  ---------*/
  main #about{
    padding: var(--px-100) 0 var(--px-180) 0;
  }

  main #about .about_ttl{
    display: flex;
    flex-direction: column;
    margin: 0 0 var(--px-60) 0;
  }
  main #about .about_ttl span{
    font-size: var(--px-38);
    font-weight: 400;
    letter-spacing: 0.18em;
    line-height: 1.18;
  }
  main #about .about_ttl span:nth-of-type(2){
    display: block;
  }

  main #about .inner[data-type="text"]{
    display: flex;
    justify-content: flex-end;
    margin: var(--px-50) auto 0 auto;
  }
  main #about .inner[data-type="text"] .about_head_desc{
    display: flex;
    flex-direction: column;
  }
  main #about .inner[data-type="text"] .about_head_desc .about_lead{
    font-size: var(--px-28);
    font-weight: 400;
    letter-spacing: 0.18em;
    line-height: 1.8;
    margin: 0 0 var(--px-50) auto;
    width: 50%;
  }
  main #about .inner[data-type="text"] .about_head_desc .about_txt{
    display: flex;
    flex-direction: column;
    gap: var(--px-30);
    font-size: var(--px-15);
    font-weight: 400;
    letter-spacing: 0.18em;
    line-height: 2.33;
    margin: 0 0 0 auto;
    width: 50%;
  }

  main #about .inner[data-type="img"]{
    margin: var(--px-250-) auto 0 auto;
  }

  main #about .inner[data-type="img"] .about_list{
    display: flex;
    gap: var(--px-80);
  }

  main #about .inner[data-type="img"] .about_list .about_item{
    width: 40%;
  }
  main #about .inner[data-type="img"] .about_list .about_item[data-type="miyagikyo"]{
    margin: var(--px-320) 0 0 0;
  }

  main #about .about_img{
    aspect-ratio: 474 / 460;
    /* width: var(--px-470); */
    width: 100%;
    max-width: 470px;
    height: auto;
    position: relative;
  }

  main #about .about_img img{
    width: 100%;
    height: auto;
  }

  main #about .inner[data-type="img"] .about_list .about_item .about_name{
    font-size: var(--px-19);
    font-weight: 400;
    font-feature-settings: "palt";
    letter-spacing: 0.18em;
    line-height: 2;
    margin: var(--px-24) 0 0 0;
  }








  /*---------
  business
  ---------*/
  main #business{
    padding: var(--px-200) 0 var(--px-45) 0;
  }

  main #business .business_ttl{
    margin: 0 0 var(--px-50) 0;
  }
  main #business .business_ttl span{
    font-size: var(--px-40);
    font-weight: 400;
    letter-spacing: 0.18em;
    line-height: 0.9;
  }

  main #business .business_lead{
    font-size: var(--px-18);
    font-weight: 400;
    letter-spacing: 0.18em;
    line-height: 3;
  }

  main #business .business_list {
    display: flex;
    flex-wrap: wrap;
    column-gap: var(--px-45);
    row-gap: var(--px-84);
    margin: var(--px-60) 0 0 0;
  }
  main #business .business_list .business_item {
    width: calc((100% - var(--px-45)) / 2);
  }
  main #business .business_list .business_item .business_img {
    aspect-ratio: 574 / 350;
    width: 100%;
    height: auto;
  }
  main #business .business_list .business_item .business_img img {
    width: 100%;
    height: auto;
  }
  main #business .business_list .business_item .business_body {
    margin: var(--px-30) 0 0 0;
  }
  main #business .business_list .business_item .business_body .business_name {
    font-size: var(--px-21);
    font-weight: 400;
    letter-spacing: 0.18em;
    line-height: 1.71;
    margin: 0 0 var(--px-12) 0;
  }
  main #business .business_list .business_item .business_body .business_desc {
    font-size: var(--px-15);
    font-weight: 400;
    letter-spacing: 0.18em;
    line-height: 1.8;
  }
  main #business .business_list .business_item .business_body .business_btn {
    margin: var(--px-20) 0 0 0;
  }
  main #business .business_list .business_item .business_body .business_tags {
    display: flex;
    gap: var(--px-6);
    margin: var(--px-30) 0 0 0;
  }
  main #business .business_list .business_item .business_body .business_tags .business_tag {
    color: #ffffff;
    font-size: var(--px-13);
    font-weight: 400;
    letter-spacing: 0.18em;
    line-height: 1.5;
    padding: var(--px-4) var(--px-8);
  }
  main #business .business_list .business_item .business_body .business_tags .business_tag[data-color="blue"] {
    background-color:  var(--color-yoichi);
  }
  main #business .business_list .business_item .business_body .business_tags .business_tag[data-color="green"] {
    background-color: var(--color-miyagikyo);
  }

  main #business .business_reel {
    margin: var(--px-180) 0 0 0;
		height: var(--px-130);
    width: 100vw;
    z-index: 1;
	}
	main #business .business_reel img {
		width: auto;
		height: 100%;
	}




  /*---------
  company
  ---------*/
  main #company{
    padding: var(--px-180) 0 var(--px-50) 0;
  }

  main #company .company_ttl{
    margin: 0 0 var(--px-50) 0;
  }
  main #company .company_ttl span{
    font-size: var(--px-40);
    font-weight: 400;
    letter-spacing: 0.18em;
    line-height: 0.9;
  }

  main #company dl{
    border-bottom: 1px solid #cbcbcb;
    display: flex;
    padding: var(--px-32) 0;
  }
  main #company dl:first-child{
    border-top: 1px solid #cbcbcb;
  }
  main #company dl dt{
    font-size: var(--px-15);
    letter-spacing: 0.18em;
    line-height: 2.33;
    width: var(--px-300);
  }
  main #company dl dd{
    font-size: var(--px-15);
    letter-spacing: 0.18em;
    line-height: 2.33;
    width: calc(100% - var(--px-300));
  }
  main #company dl[data-name="factory"] dd{
    display: flex;
    flex-direction: column;
    gap: var(--px-30);
  }
  main #company dl[data-name="employees"] dd{
    display: flex;
    gap: var(--px-50);
  }
  main #company dl[data-name="employees"] dd ul{
    display: flex;
    flex-direction: column;
    gap: var(--px-6);
  }


  /*---------
  recruit
  ---------*/
  main #recruit{
    padding: var(--px-100) 0;
  }

  main #recruit .recruit_head{
    display: flex;
    justify-content: space-between;
    margin: 0 0 var(--px-100) 0;
  }
  main #recruit .recruit_head_desc .recruit_ttl{
    margin: 0 0 var(--px-50) 0;
  }
  main #recruit .recruit_head_desc .recruit_ttl span{
    font-size: var(--px-40);
    font-weight: 400;
    letter-spacing: 0.18em;
    line-height: 0.9;
  }
  main #recruit .recruit_head_desc .recruit_lead{
    font-size: var(--px-15);
    font-weight: 400;
    letter-spacing: 0.18em;
    line-height: 2;
  }

  main #recruit .recruit_head_img{
    aspect-ratio: 395 / 406;
    width: var(--px-400);
    height: auto;
    position: relative;
  }
  main #recruit .recruit_head_img img[data-type="main"]{
    width: 100%;
    height: auto;
  }
  main #recruit .recruit_head_img img[data-type="sub"]{
    aspect-ratio: 244 / 179;
    width: var(--px-240);
    height: auto;
    position: absolute;
    bottom: var(--px-60-);
    left: var(--px-180-);
  }


  main #recruit .btn_list{
    margin: var(--px-72) 0 var(--px-86) 0;
    padding: var(--px-20) 0;
  }
  main #recruit .btn_list ul li{
    width: calc((100% - var(--px-15)) / 2);
  }
  main #recruit .btn_list ul li .btn{
    width: 100%;
  }
  main #recruit .btn_list ul li .btn::after{
    content: "";
    aspect-ratio: 9 / 12;
    display: block;
    position: absolute;
    bottom: var(--px-9);
    right: var(--px-9);
    width: var(--px-9);
    height: var(--px-12);
    background-image: url("/common/img/icon_anchor.svg");
    background-repeat: no-repeat;
    background-size: 100% auto;
    transition: background-image 0.3s;
  }
  main #recruit .btn_list ul li .btn:hover::after{
    background-image: url("/common/img/icon_anchor_white.svg");
  }
  
  main #recruit .recruit_wrap{
    padding: var(--px-70) 0 var(--px-90) 0;
    position: relative;
  }
/*
  main #recruit .recruit_wrap#mid::before{
    content: "";
    background-color: #000000;
    position: absolute;
    top: 0;
    left: 0;
    margin: 0 calc(50% - 50vw);
    width: 100vw;
    height: 1px;
  }
*/
  main #recruit .recruit_wrap .recruit_ttl{
    font-size: var(--px-34);
    font-weight: 400;
    letter-spacing: 0.18em;
    line-height: 1;
    margin: 0 0 1em 0;
  }
  main #recruit .recruit_wrap#mid .recruit_ttl{
    margin: 0 0 1.5em 0;
  }
  main #recruit .recruit_wrap .recruit_lead{
    font-size: var(--px-21);
    font-weight: 400;
    font-feature-settings: "palt";
    letter-spacing: 0.18em;
    line-height: 1.71;
    margin: 0 0 var(--px-30) 0;
  }
  main #recruit .recruit_wrap .recruit_lead strong{
    display: block;
    color: #ea4c4c;
    font-size: var(--px-15);
    font-weight: 500;
    letter-spacing: 0.18em;
    line-height: 1.8;
    margin: 1em 0 0 0;
  }



  main #recruit .recruit_wrap .recruit_list{
    display: flex;
    flex-direction: column;
    gap: var(--px-1);
  }
  main #recruit .recruit_wrap .recruit_list[data-type="hokkaido"]{
    margin: 0 0 var(--px-80) 0;
  }

  main #recruit .recruit_wrap .recruit_list .recruit_item .recruit_name{
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: var(--px-15);
    letter-spacing: 0.18em;
    height: var(--px-84);
    cursor: pointer;
    transition: opacity 0.3s;
    position: relative;
  }
  main #recruit .recruit_wrap#new .recruit_list .recruit_item .recruit_name{
    background-color: #000000;
  }
  main #recruit .recruit_wrap#mid .recruit_list[data-type="hokkaido"] .recruit_item .recruit_name{
    background-color: var(--color-yoichi);
  }
  main #recruit .recruit_wrap#mid .recruit_list[data-type="sendai"] .recruit_item .recruit_name{
    background-color: var(--color-miyagikyo);
  }
  main #recruit .recruit_wrap .recruit_list .recruit_item .recruit_name:hover{
    opacity: 0.8;
  }
  main #recruit .recruit_wrap .recruit_list .recruit_item .recruit_name::before{
    content: "";
    position: absolute;
    top: 50%;
    right: var(--px-32);
    background-color: #ffffff;
    width: var(--px-26);
    height: var(--px-1);
    transform: translateY(-50%);
  }
  main #recruit .recruit_wrap .recruit_list .recruit_item .recruit_name::after{
    content: "";
    position: absolute;
    top: 50%;
    right: var(--px-44);
    background-color: #ffffff;
    width: var(--px-1);
    height: var(--px-26);
    transform: translateY(-50%);
    transition: opacity 0.3s;
  }
  main #recruit .recruit_wrap .recruit_list .recruit_item .recruit_name.is-open::after{
    opacity: 0;
  }


  main #recruit .recruit_wrap .recruit_list .recruit_item .recruit_detail{
    display: none;
    background-color: var(--color-base);
    border: 1px solid #000000;
    box-sizing: border-box;
    padding: var(--px-54) var(--px-98) var(--px-70) var(--px-98);
  }
  main #recruit .recruit_wrap .recruit_list .recruit_item .recruit_detail > p{
    font-size: var(--px-15);
    letter-spacing: 0.18em;
    line-height: 2.33;
    padding: 0 0 var(--px-50) 0;
    border-bottom: 1px solid #cbcbcb;
    text-align: center;
  }
  main #recruit .recruit_wrap .recruit_list .recruit_item .recruit_detail dl{
    border-bottom: 1px solid #cbcbcb;
    display: flex;
    padding: var(--px-32) 0;
  }
  main #recruit .recruit_wrap .recruit_list .recruit_item .recruit_detail dl dt{
    font-size: var(--px-15);
    letter-spacing: 0.18em;
    line-height: 2.33;
    width: var(--px-190);
  }
  main #recruit .recruit_wrap .recruit_list .recruit_item .recruit_detail dl dd{
    font-size: var(--px-15);
    letter-spacing: 0.18em;
    line-height: 2.33;
    width: calc(100% - var(--px-190));
  }
  main #recruit .recruit_wrap .recruit_list .recruit_item .recruit_detail dl dd span{
    font-size: var(--px-15);
    letter-spacing: 0.18em;
    line-height: 1.6;
  }

  main #recruit .recruit_wrap .recruit_list .recruit_item .recruit_detail dl dd ul{
    display: flex;
    align-items: center;
    /* gap: var(--px-44); */
  }
  main #recruit .recruit_wrap .recruit_list .recruit_item .recruit_detail dl dd ul li{
    background-color: #ffffff;
    border-radius: var(--px-100);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--px-14);
    font-feature-settings: 'palt';
    letter-spacing: 0.18em;
    line-height: 1.36;
    width: var(--px-140);
    height: var(--px-48);
    position: relative;
    text-align: center;
  }
  main #recruit .recruit_wrap .recruit_list .recruit_item .recruit_detail dl dd ul li:nth-of-type(n+2){
    margin: 0 0 0 var(--px-40);
    width: var(--px-200);
  }
  main #recruit .recruit_wrap .recruit_list .recruit_item .recruit_detail dl dd ul li:not(:nth-of-type(n+2)):last-child{
    margin: 0 0 0 var(--px-10);
    width: var(--px-300);
  }
  main #recruit .recruit_wrap .recruit_list .recruit_item .recruit_detail dl dd ul li:nth-of-type(n+2)::before{
    content: "";
    position: absolute;
    top: 50%;
    left: var(--px-35-);
    width: 0;
    height: 0;
    border-top: var(--px-6) solid transparent;
    border-bottom: var(--px-6) solid transparent;
    border-left: var(--px-10) solid #000;
    transform: translateY(-50%);
  }
  main #recruit .recruit_wrap .recruit_list .recruit_item .recruit_detail dl dd .recruit_flow_note{
    margin-top: 1em;
  }
  main #recruit .recruit_wrap .recruit_list .recruit_item .recruit_detail dl dd a.btn{
    width: 90%;
    max-width: var(--px-600);
    height: var(--px-64);
    justify-content: center;
    margin: var(--px-20) 0 0 0;
  }
  main #recruit .recruit_wrap .recruit_list .recruit_item .recruit_detail dl dd a:not(.txtlink):not(.btn){
    display: inline-block;
    margin: var(--px-20) 0 0 0;
  }
  main #recruit .recruit_wrap .recruit_list .recruit_item .recruit_detail dl dd a.txtlink{
    text-decoration: underline;
  }


  main #recruit .recruit_wrap .recruit_entry{
    display: flex;
    flex-direction: column;
    gap: var(--px-32);
    width: 90%;
    max-width: var(--px-600);
  }
  main #recruit .recruit_wrap#new .recruit_entry{
    margin: var(--px-70) auto 0 auto;
  }
  main #recruit .recruit_wrap#mid .recruit_entry{
    margin: var(--px-70) auto 0 auto;
  }
  main #recruit .recruit_wrap#mid .recruit_entry + .recruit_entry{
    margin: var(--px-20) auto 0 auto;
  }
  main #recruit .recruit_wrap .recruit_entry a.btn{
    width: 100%;
    height: var(--px-64);
    justify-content: center;
  }

  main #recruit .recruit_wrap .recruit_entry p{
    font-size: var(--px-13);
    letter-spacing: 0.18em;
    line-height: 1.6;
    margin: -1em 0 0 0;
  }
  main #recruit .recruit_wrap .recruit_entry p span{
    display: block;
    font-size: var(--px-15);
    letter-spacing: 0.18em;
    line-height: 1.6;
    margin: 0.5em 0 0 0;
  }



}@media screen and (max-width : 767px){



  main .btn[data-type="dl"]::after{
    content: "";
    aspect-ratio: 20 / 17;
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    right: var(--px-15);
    margin: auto;
    width: var(--px-20);
    height: var(--px-17);
    background-image: url("/common/img/icon_download.svg");
    background-repeat: no-repeat;
    background-size: 100% auto;
    transition: background-image 0.3s;
  }
  main .btn[data-type="dl"]:hover::after{
    background-image: url("/common/img/icon_download_white.svg");
  }

  .headline_ttl {
    margin: 0 0 var(--px-24) 0;
  }
  .headline_ttl span{
    font-size: var(--px-34);
  }


  /*---------
  kv
  ---------*/
  #kv{
    position: relative;
    width: 100%;
  }

  /* 演出舞台：SPは縦長。左右半分→上下半分に転換 */
  #kv .kv_stage{
    position: relative;
    width: 100vw;
    height: calc(100vh - var(--px-80)); /* ヘッダー分を引く */
    /* aspect-ratio: 3 / 4; */
    overflow: hidden;
    background-color: var(--color-bluegray);
  }
  #kv .kv_bg,
  #kv .kv_imgs,
  #kv .kv_circle,
  #kv .kv_cnt{
    position: absolute;
    inset: 0;
  }

  /* 背景：上下半分（PCの左=上 / 右=下） */
  #kv .kv_bg{
    display: flex;
    flex-direction: column;
    z-index: 1;
  }
  #kv .kv_bg_half{
    flex: 1 1 50%;
    background-color: transparent;
  }

  /* 画像スロット：PCの左半分→上半分、右半分→下半分（円より上） */
  #kv .kv_imgs{
    z-index: 3;
    pointer-events: none;
  }
  #kv .kv_img{
    position: absolute;
    opacity: 0;
    overflow: hidden;
  }
  #kv .kv_img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  #kv .kv_img.pos-left{
    left: 0;
    top: 0;
    width: 100%;
    height: 50%;
  }
  #kv .kv_img.pos-right{
    left: 0;
    top: 50%;
    width: 100%;
    height: 50%;
  }
  #kv .kv_img.pos-left-bottom{
    left: 0;
    top: 50%;
    width: 100%;
    height: 50%;
  }
  #kv .kv_img.pos-left-top{
    left: 0;
    top: 0;
    width: 100%;
    height: 50%;
  }
  /* 工程11用ペア（SPは上半分に左右2枚並べる） */
  #kv .kv_img.pos-split-a{
    left: 0;
    top: 0;
    width: 50%;
    height: 50%;
  }
  #kv .kv_img.pos-split-b{
    left: 50%;
    top: 0;
    width: 50%;
    height: 50%;
  }
  /* 工程9用（SPは上半分の左） */
  #kv .kv_img.pos-s9{
    left: 0;
    top: 0;
    width: 50%;
    height: 50%;
  }
  /* 工程11(SP) 右上の画像：人物が左端で見切れるため、左側を見せて人物を右へ寄せる
     （X%を下げるほど人物が右へ。50%=中央） */
  #kv .kv_img[data-img="S02"] img{
    object-position: 20% center;
  }

  /* 見切れる円（画像・テキストより下） */
  #kv .kv_circle{
    z-index: 2;
    pointer-events: none;
  }
  #kv .kv_circle img{
    position: absolute;
    top: 50%;
    left: 50%;
    /* scale:1 がSPカンプ484pxに相当（幅390基準、vwのみ＝高さに縛られず可変）。JS の scale で 160/312/484 を表現 */
    width: 124.10vw;
    height: auto;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    transform-origin: 50% 50%;
    will-change: transform;
  }

  /* 中央固定テキスト：.kv_cnt はステージ中央、中の文字は左揃え・左端揃え */
  #kv .kv_cnt{
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
  }
  #kv .kv_cnt_inner{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    position: relative; /* .kv_copy(absolute) の基準 */
  }
  #kv .kv_ttl{
    color: #ffffff;
    display: flex;
    flex-direction: column;
    gap: var(--px-8);
  }
  #kv .kv_ttl span[data-type="en"]{
    font-family: "Vollkorn", serif;
    font-size: var(--px-44);
    font-weight: 500;
    letter-spacing: 0.10em;
    line-height: 1.1;
    /* easing は JS の power2.inOut に合わせ、タイトルの y ツイーンと同期させて直線的に動かす */
    transition: margin-top 0.7s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  }
  /* en の上マージン(4文字分)はループ開始(工程3の後)から適用。工程1-3では効かせない */
  #kv.is-kvloop .kv_ttl span[data-type="en"]{
    margin-top: -1.5em;
  }
  #kv .kv_ttl span[data-type="jp"]{
    font-size: var(--px-14);
    font-weight: 600;
    letter-spacing: 0.18em;
    line-height: 1.6;
  }
  /* コピーは absolute でフローから外す（タイトルのレイアウトと切り離し、reflowによるガタつき防止）。
     タイトル直下に配置し、上マージンを間隔として使う */
  #kv .kv_copy{
    position: absolute;
    top: 100%;
    left: 0;
    color: #ffffff;
    font-size: var(--px-18);
    font-weight: 600;
    letter-spacing: 0.18em;
    line-height: 1.9;
    margin: 5em 0 0 0; /* タイトルとの間隔（下半分画像の顔との被り回避） */
  }
  /* 工程2(SP)のときだけコピーをセンター揃え */
  #kv.is-copycenter .kv_copy{
    text-align: center;
  }
  /* 下半分に画像が来ない場面で、コピーの文字に場面色の太い輪郭を付ける（白い円との重なり対策）。
     ベタではなく文字に沿う輪郭なので、改行に関係なく領域が広がらない。色は JS が --kv-copy-bg で指定。
     paint-order:stroke fill で輪郭(stroke)を塗りの背面に描き、白文字を保ったまま太い輪郭を出す */
  #kv .kv_copy.is-copypanel{
    -webkit-text-stroke: 0.8em var(--kv-copy-bg, transparent);
    paint-order: stroke fill;
  }







  /*---------
  btn_list
  ---------*/
  main .btn_list.js_fix_anchor ul li:nth-child(1){
    width: calc(100% - var(--px-82) - var(--px-180));
  }
  main .btn_list.js_fix_anchor ul li:nth-child(2){
    width: var(--px-84);
  }
  main .btn_list.js_fix_anchor ul li:nth-child(3),
  main .btn_list.js_fix_anchor ul li:nth-child(4){
    width: var(--px-90);
  }

  main .btn_list.js_fix_anchor ul li .btn{
    height: var(--px-64);
  }
  main .btn_list.js_fix_anchor ul li .btn span{
    font-size: var(--px-12);
  }






  /*---------
  about
  ---------*/
  main #about{
    padding: var(--px-60) 0;
  }

  main #about .about_ttl{
    display: flex;
    flex-direction: column;
    margin: 0 0 var(--px-60) 0;
  }
  main #about .about_ttl span{
    font-size: var(--px-30);
    font-weight: 400;
    letter-spacing: 0.18em;
    line-height: 1.18;
  }
  main #about .about_ttl span:nth-of-type(n+2){
    display: block;
    margin: var(--px-8) 0 0 0;
  }

  main #about .inner[data-type="text"]{
    display: flex;
    justify-content: flex-end;
    margin: var(--px-50) auto 0 auto;
  }
  main #about .inner[data-type="text"] .about_head_desc{
    display: flex;
    flex-direction: column;
  }
  main #about .inner[data-type="text"] .about_head_desc .about_lead{
    font-size: var(--px-20);
    font-weight: 500;
    letter-spacing: 0.18em;
    line-height: 1.8;
    margin: 0 auto var(--px-24) auto;
    width: 90%;
  }
  main #about .inner[data-type="text"] .about_head_desc .about_txt{
    display: flex;
    flex-direction: column;
    gap: var(--px-30);
    font-size: var(--px-15);
    font-weight: 400;
    letter-spacing: 0.18em;
    line-height: 2.33;
    margin: 0 auto;
    width: 90%;
  }

  main #about .inner[data-type="img"]{
    margin: var(--px-50) auto 0 auto;
  }

  main #about .inner[data-type="img"] .about_list{
    display: flex;
    flex-direction: column;
    gap: var(--px-50);
  }

  main #about .inner[data-type="img"] .about_list .about_item[data-type="yoichi"]{
    margin: 0 0 0 -6vw;
  }
  main #about .inner[data-type="img"] .about_list .about_item[data-type="miyagikyo"]{
    text-align: right;
    margin: 0 -6vw 0 0;
  }

  main #about .about_img{
    aspect-ratio: 474 / 460;
    width: var(--px-300);
    max-width: 300px;
    height: auto;
    position: relative;
  }
  main #about .about_item[data-type="miyagikyo"] .about_img{
    margin: 0 0 0 auto;
  }

  main #about .about_img img{
    width: 100%;
    height: auto;
  }

  main #about .inner[data-type="img"] .about_list .about_item .about_name{
    font-size: var(--px-15);
    font-weight: 400;
    font-feature-settings: "palt";
    letter-spacing: 0.18em;
    line-height: 2;
    margin: var(--px-24) 0 0 0;
    text-align: left;
    width: var(--px-300);
  }
  main #about .inner[data-type="img"] .about_list .about_item[data-type="yoichi"] .about_name{
    margin: var(--px-24) 0 0 1em;
  }
  main #about .inner[data-type="img"] .about_list .about_item[data-type="miyagikyo"] .about_name{
    margin: var(--px-24) 0 0 auto;
  }


  /*---------
  business
  ---------*/
  main #business{
    padding: var(--px-80) 0 var(--px-45) 0;
  }

  main #business .business_ttl{
    margin: 0 0 var(--px-24) 0;
  }
  main #business .business_ttl span{
    font-size: var(--px-34);
    font-weight: 400;
    letter-spacing: 0.18em;
    line-height: 0.9;
  }

  main #business .business_lead{
    font-size: var(--px-15);
    font-weight: 400;
    letter-spacing: 0.18em;
    line-height: 2;
  }

  main #business .business_list {
    display: flex;
    flex-direction: column;
    gap: var(--px-60);
    margin: var(--px-50) auto 0 auto;
    width: 77vw;
  }
  main #business .business_list .business_item {
    width: 100%;
  }
  main #business .business_list .business_item .business_img {
    /* aspect-ratio: 574 / 350; */
    width: 100%;
    height: auto;
  }
  main #business .business_list .business_item .business_img img {
    width: 100%;
    height: auto;
  }
  main #business .business_list .business_item .business_body {
    margin: var(--px-15) 0 0 0;
  }
  main #business .business_list .business_item .business_body .business_name {
    font-size: var(--px-22);
    font-weight: 400;
    letter-spacing: 0.18em;
    line-height: 1.71;
    margin: 0 0 var(--px-12) 0;
  }
  main #business .business_list .business_item .business_body .business_desc {
    font-size: var(--px-15);
    font-weight: 400;
    letter-spacing: 0.18em;
    line-height: 1.8;
  }
  main #business .business_list .business_item .business_body .business_btn {
    margin: var(--px-20) 0 0 0;
  }
  main #business .business_list .business_item .business_body .business_tags {
    display: flex;
    gap: var(--px-6);
    margin: var(--px-30) 0 0 0;
  }
  main #business .business_list .business_item .business_body .business_tags .business_tag {
    color: #ffffff;
    font-size: var(--px-13);
    font-weight: 400;
    letter-spacing: 0.18em;
    line-height: 1.5;
    padding: var(--px-4) var(--px-8);
  }
  main #business .business_list .business_item .business_body .business_tags .business_tag[data-color="blue"] {
    background-color:  var(--color-yoichi);
  }
  main #business .business_list .business_item .business_body .business_tags .business_tag[data-color="green"] {
    background-color: var(--color-miyagikyo);
  }

  main #business .business_reel {
    margin: var(--px-90) 0 0 0;
		height: var(--px-86);
    width: 100vw;
    z-index: 1;
	}
	main #business .business_reel img {
		width: auto;
		height: 100%;
	}




  /*---------
  company
  ---------*/
  main #company{
    padding: var(--px-45) 0 var(--px-50) 0;
  }

  main #company .company_ttl{
    margin: 0 0 var(--px-40) 0;
  }
  main #company .company_ttl span{
    font-size: var(--px-32);
    font-weight: 400;
    letter-spacing: 0.18em;
    line-height: 0.9;
  }

  main #company dl{
    border-bottom: 1px solid var(--color-bluegray);
    display: flex;
    flex-direction: column;
    gap: var(--px-10);
    padding: var(--px-30) 0;
    width: 85%;
    margin: 0 auto;
  }
  main #company dl dt{
    font-size: var(--px-15);
    font-weight: 500;
    letter-spacing: 0.18em;
    line-height: 1.77;
  }
  main #company dl dd{
    font-size: var(--px-15);
    letter-spacing: 0.18em;
    line-height: 1.77;
  }
  main #company dl[data-name="factory"] dd{
    display: flex;
    flex-direction: column;
    gap: var(--px-30);
  }
  main #company dl[data-name="employees"] dd{
    display: flex;
    gap: var(--px-50);
  }
  main #company dl[data-name="employees"] dd ul{
    display: flex;
    flex-direction: column;
    gap: var(--px-6);
  }


  /*---------
  recruit
  ---------*/
  main #recruit{
    padding: var(--px-40) 0 0 0;
  }

  main #recruit .recruit_head{
    display: flex;
    flex-direction: column;
    margin: 0 0 var(--px-130) 0;
  }
  main #recruit .recruit_head_desc .recruit_ttl{
    margin: 0 0 var(--px-24) 0;
  }
  main #recruit .recruit_head_desc .recruit_ttl span{
    font-size: var(--px-32);
    font-weight: 400;
    letter-spacing: 0.18em;
    line-height: 0.9;
  }
  main #recruit .recruit_head_desc .recruit_lead{
    font-size: var(--px-15);
    font-weight: 400;
    letter-spacing: 0.18em;
    line-height: 2;
    margin: 0 0 0 1em;
  }

  main #recruit .recruit_head_img{
    aspect-ratio: 395 / 406;
    width: var(--px-240);
    height: auto;
    position: relative;
    margin: var(--px-50) 0 0 auto;
  }
  main #recruit .recruit_head_img img[data-type="main"]{
    width: 100%;
    height: auto;
  }
  main #recruit .recruit_head_img img[data-type="sub"]{
    aspect-ratio: 244 / 179;
    width: var(--px-150);
    height: auto;
    position: absolute;
    bottom: var(--px-36-);
    left: var(--px-74-);
  }

  main #recruit .btn_list{
    padding: var(--px-20) 0 var(--px-40) 0;
  }
  main #recruit .btn_list ul{
    display: flex;
    gap: var(--px-15);
  }
  main #recruit .btn_list ul li{
    width: calc((100% - var(--px-15)) / 2);
  }
  main #recruit .btn_list ul li .btn{
    width: 100%;
  }
  main #recruit .btn_list ul li[data-type="new"] .btn::before{
    background-color: var(--color-new);
  }
  main #recruit .btn_list ul li[data-type="mid"] .btn::before{
    background-color: var(--color-mid);
  }
  main #recruit .btn_list ul li .btn::after{
    content: "";
    aspect-ratio: 9 / 12;
    display: block;
    position: absolute;
    bottom: var(--px-9);
    right: var(--px-9);
    width: var(--px-9);
    height: var(--px-12);
    background-image: url("/common/img/icon_anchor.svg");
    background-repeat: no-repeat;
    background-size: 100% auto;
    transition: background-image 0.3s;
  }
  main #recruit .btn_list ul li .btn:hover::after{
    background-image: url("/common/img/icon_anchor_white.svg");
  }
  
  main #recruit .recruit_wrap{
    padding: var(--px-56) 0;
    position: relative;
  }
  main #recruit .recruit_wrap#mid{
    padding: var(--px-52) 0 var(--px-175);
  }
/*
  main #recruit .recruit_wrap#mid::before{
    content: "";
    background-color: #000000;
    position: absolute;
    top: 0;
    left: 0;
    margin: 0 calc(50% - 50vw);
    width: 100vw;
    height: 1px;
  }
*/
  main #recruit .recruit_wrap .recruit_ttl{
    font-size: var(--px-28);
    font-weight: 400;
    letter-spacing: 0.18em;
    line-height: 1;
    margin: 0 0 1em 0;
  }
  main #recruit .recruit_wrap#mid .recruit_ttl{
    margin: 0 0 1.25em 0;
  }
  main #recruit .recruit_wrap .recruit_lead{
    font-size: var(--px-18);
    font-weight: 400;
    font-feature-settings: "palt";
    letter-spacing: 0.2em;
    line-height: 1.71;
    margin: 0 0 var(--px-30) 0;
  }
  main #recruit .recruit_wrap .recruit_lead strong{
    display: block;
    color: #ea4c4c;
    font-size: var(--px-15);
    font-weight: 500;
    letter-spacing: 0.18em;
    line-height: 1.8;
    margin: 1em 0 0 0;
  }

  main #recruit .recruit_wrap .recruit_list{
    display: flex;
    flex-direction: column;
    gap: var(--px-1);
  }
  main #recruit .recruit_wrap .recruit_list[data-type="hokkaido"]{
    margin: 0 0 var(--px-80) 0;
  }

  main #recruit .recruit_wrap .recruit_list .recruit_item .recruit_name{
    display: flex;
    align-items: center;
    color: #ffffff;
    font-size: var(--px-13);
    letter-spacing: 0.18em;
    height: var(--px-66);
    cursor: recruiter;
    transition: opacity 0.3s;
    padding: 0 0 0 1em;
    position: relative;
  }
  main #recruit .recruit_wrap#new .recruit_list .recruit_item .recruit_name{
    background-color: #000000;
  }
  main #recruit .recruit_wrap#mid .recruit_list[data-type="hokkaido"] .recruit_item .recruit_name{
    background-color: var(--color-yoichi);
  }
  main #recruit .recruit_wrap#mid .recruit_list[data-type="sendai"] .recruit_item .recruit_name{
    background-color: var(--color-miyagikyo);
  }
  main #recruit .recruit_wrap .recruit_list .recruit_item .recruit_name:hover{
    opacity: 0.8;
  }
  main #recruit .recruit_wrap .recruit_list .recruit_item .recruit_name::before{
    content: "";
    position: absolute;
    top: 50%;
    right: var(--px-15);
    background-color: #ffffff;
    width: var(--px-20);
    height: var(--px-1);
    transform: translateY(-50%);
  }
  main #recruit .recruit_wrap .recruit_list .recruit_item .recruit_name::after{
    content: "";
    position: absolute;
    top: 50%;
    right: var(--px-24);
    background-color: #ffffff;
    width: var(--px-1);
    height: var(--px-20);
    transform: translateY(-50%);
    transition: opacity 0.3s;
  }
  main #recruit .recruit_wrap .recruit_list .recruit_item .recruit_name.is-open::after{
    opacity: 0;
  }


  main #recruit .recruit_wrap .recruit_list .recruit_item .recruit_detail{
    display: none;
    background-color: var(--color-base);
    border: 1px solid #000000;
    box-sizing: border-box;
    padding: var(--px-40) var(--px-25) var(--px-50) var(--px-25);
  }
  main #recruit .recruit_wrap .recruit_list .recruit_item .recruit_detail > p{
    font-size: var(--px-15);
    font-feature-settings: 'palt';
    letter-spacing: 0.18em;
    line-height: 2.33;
    padding: 0 0 var(--px-40) 0;
    border-bottom: 1px solid #cbcbcb;
  }
  main #recruit .recruit_wrap .recruit_list .recruit_item .recruit_detail dl{
    border-bottom: 1px solid #cbcbcb;
    display: flex;
    flex-direction: column;
    gap: var(--px-20);
    padding: var(--px-30) 0;
  }
  main #recruit .recruit_wrap .recruit_list .recruit_item .recruit_detail dl dt{
    font-size: var(--px-15);
    letter-spacing: 0.18em;
    line-height: 1.77;
  }
  main #recruit .recruit_wrap .recruit_list .recruit_item .recruit_detail dl dd{
    font-size: var(--px-15);
    letter-spacing: 0.18em;
    line-height: 1.77;
  }
  main #recruit .recruit_wrap .recruit_list .recruit_item .recruit_detail dl dd span{
    font-size: var(--px-15);
    letter-spacing: 0.18em;
    line-height: 1.6;
  }

  main #recruit .recruit_wrap .recruit_list .recruit_item .recruit_detail dl dd ul{
    display: flex;
    flex-wrap: wrap;
    row-gap: var(--px-10);
    align-items: center;
  }
  main #recruit .recruit_wrap .recruit_list .recruit_item .recruit_detail dl dd ul li{
    background-color: #ffffff;
    border-radius: var(--px-100);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: var(--px-10);
    font-feature-settings: 'palt';
    letter-spacing: 0.18em;
    line-height: 1.36;
    width: var(--px-100);
    height: var(--px-40);
    position: relative;
  }
  main #recruit .recruit_wrap .recruit_list .recruit_item .recruit_detail dl dd ul li{
    margin: 0 var(--px-25) 0 0;
  }
  main #recruit .recruit_wrap .recruit_list .recruit_item .recruit_detail dl dd ul li:last-child{
    /* margin: 0 0 0 var(--px-15); */
    width: var(--px-120);
  }
  main #recruit .recruit_wrap .recruit_list .recruit_item .recruit_detail dl dd ul li:not(:last-child)::after{
    content: "";
    position: absolute;
    top: 50%;
    right: var(--px-18-);
    width: 0;
    height: 0;
    border-top: var(--px-6) solid transparent;
    border-bottom: var(--px-6) solid transparent;
    border-left: var(--px-10) solid #000;
    transform: translateY(-50%);
  }
  main #recruit .recruit_wrap .recruit_list .recruit_item .recruit_detail dl dd .recruit_flow_note{
    margin-top: 1em;
  }
/*
  main #recruit .recruit_wrap .recruit_list .recruit_item .recruit_detail dl dd a.btn{
    width: 90%;
    max-width: var(--px-600);
    height: var(--px-64);
    justify-content: center;
    margin: var(--px-20) 0 0 0;
  }
*/
  main #recruit .recruit_wrap .recruit_list .recruit_item .recruit_detail dl dd a:not(.txtlink){
  /* display: inline-block; */
  justify-content: center;
  width: 100%;
  height: var(--px-80);
  margin: var(--px-20) 0 0 0;
  }
  main #recruit .recruit_wrap .recruit_list .recruit_item .recruit_detail dl dd a:not(.txtlink) span{
    text-align: center;
  }
  main #recruit .recruit_wrap .recruit_list .recruit_item .recruit_detail dl dd a:not(.txtlink):not(.btn){
    display: inline-block;
    margin: var(--px-20) 0 0 0;
  }
  main #recruit .recruit_wrap .recruit_list .recruit_item .recruit_detail dl dd a.txtlink{
    text-decoration: underline;
  }


  main #recruit .recruit_wrap .recruit_entry{
    display: flex;
    flex-direction: column;
    gap: var(--px-26);
    width: var(--px-290);
  }
  main #recruit .recruit_wrap#new .recruit_entry{
    margin: var(--px-56) auto 0 auto;
  }
  main #recruit .recruit_wrap#mid .recruit_entry{
    margin: var(--px-50) auto 0 auto;
  }
  main #recruit .recruit_wrap#mid .recruit_entry + .recruit_entry{
    margin: var(--px-20) auto 0 auto;
  }
  main #recruit .recruit_wrap .recruit_entry a.btn{
    width: 100%;
    height: var(--px-80);
    padding: 0;
    justify-content: center;
  }
  main #recruit .recruit_wrap .recruit_entry a.btn span{
    text-align: center;
    line-height: 1.4;
  }

  main #recruit .recruit_wrap .recruit_entry p{
    font-size: var(--px-11);
    letter-spacing: 0.18em;
    line-height: 1.6;
    margin: -1em 0 0 0;
  }
  main #recruit .recruit_wrap .recruit_entry p span{
    display: block;
    font-size: var(--px-13);
    letter-spacing: 0.18em;
    line-height: 1.6;
    margin: 0.5em 0 0 0;
  }



}



@media screen and (min-width: 1512px){

  #kv .kv_stage{
    aspect-ratio: 1512 / 940;
  }

}


@media screen and (min-width: 768px) and (max-width: 1400px){
  main #about .inner[data-type="text"] .about_head_desc .about_lead{
    min-width: 520px;
  }
  main #about .inner[data-type="text"] .about_head_desc .about_txt{
    min-width: 520px;
  }
}



@media screen and (min-width: 768px) and (max-width: 1379px){

  main #recruit .recruit_period dl dd{
    font-size: var(--px-24);
  }
  
  main #map .map_img .map_list li{
    width: 20%;
  }

  main #map .map_img .map_list li[data-name="aomori"]{
    right: 0;
  }

  main #map .map_img .map_list li .map_desc p[data-type="name"]{
    font-size: var(--px-18);
  }

}

@media screen and (min-width: 768px) and (max-width: 1024px){

  /*---------
  lead
  ---------*/
  .lead{
    justify-content: flex-start;
    gap: var(--px-100);
  }


  /* iPad Pro 未満のタブレットで .inner の min-width:960px（common.css）が効くと
     KV をラップする .headline .inner が 960px に固定され、#kv の width:100vw /
     margin-left:calc(50% - 50vw) の基準がビューポートとズレて横幅いっぱいにならない。
     common.css は触らず、この KV ラッパーの min-width のみ解除する（他 .inner は不変）。 */
  body[data-type="RN2024"] main .headline .inner{
    min-width: 0;
  }

  /*---------
  kv（タブレット iPad 等の微調整。PC(>1024)・SP(<768)には影響しない範囲）
  ---------*/
  /* L02：少し拡大して下へずらし、目線を L01 に合わせる（translateは隙間が出ないようscaleの余白内に） */
  #kv .kv_img[data-img="L02"] img{
    transform: scale(1.1) translateY(4%);
  }
  /* L05：トリミングを右へ寄せて人物の顔を見せる（Xを上げるほど右側を見せる） */
  #kv .kv_img[data-img="L05"] img{
    object-position: 73% center;
  }
  /* L06：トリミングを右へ寄せて人物の顔を見せる */
  #kv .kv_img[data-img="L06"] img{
    object-position: 66% center;
  }
  /* L07/L08 の人物サイズ感を合わせる：L07 を拡大（はみ出しはスロットの overflow:hidden でクリップ） */
  #kv .kv_img[data-img="L07"] img{
    transform: scale(1.15);
  }


}