@charset "UTF-8";
html, body {
  margin: 0;
  padding: 0;
}

/* ヘッダーがfixed化(全ページ共通)したため、ページ内アンカー着地時に見出しが隠れないよう
   ヘッダー高さ分のスクロールオフセットを確保する（ネイティブアンカー・scroll-behavior対応分。
   smooth-scroll.min.js経由のクリックは header.php側の SmoothScroll({header:'.header'}) で別途対応） */
html {
  /* JS(common.js)がヘッダーの実測高で毎回上書きする。ここはJS無効時のフォールバック値。
     .header の height と合わせること（現在60px。旧90pxのままで着地が30px下にズレていた） */
  scroll-padding-top: 60px;
}

/*=============================================
	共通ユーティリティ
=============================================*/
/* 視覚的には隠すがスクリーンリーダーには読み上げさせる（タイプライター演出等の元テキスト保持用） */
.u-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

body {
  font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "游ゴシック体", "Yu Gothic", YuGothic, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  color: #000;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5em;
  box-sizing: border-box;
  font-feature-settings: "palt";
}

.min {
  font-family: "游明朝体", "YuMincho", "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN W3", HiraMinProN-W3, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
  /*font-family: "ヒラギノ明朝 Pro W6","Hiragino Mincho Pro","HG明朝E","HGS明朝E","ＭＳ Ｐ明朝",serif;*/
}

.jost {
  font-family: "Kumbh Sans", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", sans-serif;
}

p {
  font-size: 16px;
}

.din {
  font-family: "DIN2014", sans-serif;
}

a {
  color: #000;
}

@media all and (-ms-high-contrast: none) {
  body {
    /*font-family: "メイリオ",Meiryo,"游ゴシック",YuGothic,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック","MS PGothic",sans-serif;*/
  }
}
.blue {
  color: blue;
}

@media print, screen and (min-width: 768px) {
  /* CSS Document */
  /*html {font-size: 62.5%;}*/
  * {
    margin: 0;
    padding: 0;
  }
  *, *:before, *:after {
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
  }
  h1, h2, h3, h4, h5 {
    margin: 0;
    padding: 0;
  }
  div {
    margin: 0;
    padding: 0;
  }
  p {
    margin: 0;
    padding: 0;
    line-height: 1.5em;
  }
  a {
    color: #000;
    text-decoration: none;
  }
  a:visited {
    color: #000;
  }
  a:hover {
    color: #000; /*text-decoration:underline;*/
  }
  a:focus {
    color: #000;
    outline: thin dotted;
  }
  a:hover, a:active {
    color: #000;
    outline: 0;
  }
  table, th, td {
    margin: 0;
    padding: 0;
    font-size: inherit;
    font-size: 1em;
    border-collapse: collapse;
  }
  table {
    width: 100%;
  }
  ul, ol, li, dl, dt, dd {
    margin: 0;
    padding: 0;
    list-style: none;
    list-style-position: outside;
    line-height: 1.5em;
  }
  img {
    margin: 0;
    padding: 0;
    border: none;
    line-height: 0;
    vertical-align: bottom;
  }
  img {
    display: block;
    width: 100%;
    height: auto;
  }
  /* _:lang(x)::-internal-media-controls-overlay-cast-button, img {
  	image-rendering: -webkit-optimize-contrast;
  } */
  article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary {
    display: block;
  }
  /*------------------------
  		option.css
  ------------------------*/
  /*=========display=========*/
  .DisPlayNone {
    display: none;
  }
  .DisPlayBlock {
    display: block;
  }
  .DisPlayInline {
    display: inline;
  }
  /*=========float=========*/
  .FRight {
    float: right;
  }
  .FLeft {
    float: left;
  }
  /*=========clear=========*/
  .ClearBoth {
    clear: both;
  }
  .ClearRight {
    clear: right;
  }
  .ClearLeft {
    clear: left;
  }
  .ClearBox {
    clear: both;
    height: 0;
    overflow: hidden;
  }
  .ClearFix {
    zoom: 1;
  }
  .ClearFix:after {
    display: block;
    clear: both;
    height: 0;
    visibility: hidden;
    line-height: 0;
    content: ".";
  }
  .clearfix:after {
    content: "";
    display: block;
    clear: both;
    height: 0;
  }
  /* no ie mac \*/
  * html .ClearFix {
    height: 1%;
  }
  .ClearFix {
    display: block;
  }
  /*=========visibility=========*/
  .VisVis {
    visibility: visible;
  }
  .VisHid {
    visibility: hidden;
  }
  .VisCol {
    visibility: collapse;
  }
  /*=========マージン設定=========*/
  .MA0 {
    margin: 0;
  }
  .MRLAuto {
    margin-left: auto;
    margin-right: auto;
  }
  .MT0 {
    margin-top: 0;
  }
  .MT5 {
    margin-top: 5px;
  }
  .MT10 {
    margin-top: 10px;
  }
  .MT15 {
    margin-top: 15px;
  }
  .MT20 {
    margin-top: 20px;
  }
  .MT25 {
    margin-top: 25px;
  }
  .MT30 {
    margin-top: 30px;
  }
  .MT40 {
    margin-top: 40px;
  }
  .MT45 {
    margin-top: 45px;
  }
  .MT50 {
    margin-top: 50px;
  }
  .MT60 {
    margin-top: 60px;
  }
  .MT70 {
    margin-top: 70px;
  }
  .MT80 {
    margin-top: 80px;
  }
  .MT90 {
    margin-top: 90px;
  }
  .MT95 {
    margin-top: 95px;
  }
  .MT100 {
    margin-top: 100px;
  }
  .MR0 {
    margin-right: 0;
  }
  .MR5 {
    margin-right: 5px;
  }
  .MR10 {
    margin-right: 10px;
  }
  .MR15 {
    margin-right: 15px;
  }
  .MR20 {
    margin-right: 20px;
  }
  .MR25 {
    margin-right: 25px;
  }
  .MR30 {
    margin-right: 30px;
  }
  .MR35 {
    margin-right: 35px;
  }
  .MR40 {
    margin-right: 40px;
  }
  .MR45 {
    margin-right: 45px;
  }
  .MR50 {
    margin-right: 50px;
  }
  .MR60 {
    margin-right: 60px;
  }
  .MB0 {
    margin-bottom: 0;
  }
  .MB5 {
    margin-bottom: 5px;
  }
  .MB6 {
    margin-bottom: 6px;
  }
  .MB8 {
    margin-bottom: 8px;
  }
  .MB10 {
    margin-bottom: 10px;
  }
  .MB15 {
    margin-bottom: 15px;
  }
  .MB20 {
    margin-bottom: 20px;
  }
  .MB25 {
    margin-bottom: 25px;
  }
  .MB30 {
    margin-bottom: 30px;
  }
  .MB35 {
    margin-bottom: 35px;
  }
  .MB40 {
    margin-bottom: 40px;
  }
  .MB45 {
    margin-bottom: 45px;
  }
  .MB50 {
    margin-bottom: 50px;
  }
  .MB55 {
    margin-bottom: 55px;
  }
  .MB60 {
    margin-bottom: 60px;
  }
  .MB65 {
    margin-bottom: 65px;
  }
  .MB70 {
    margin-bottom: 70px;
  }
  .MB75 {
    margin-bottom: 75px;
  }
  .MB80 {
    margin-bottom: 80px;
  }
  .MB85 {
    margin-bottom: 85px;
  }
  .MB90 {
    margin-bottom: 90px;
  }
  .MB100 {
    margin-bottom: 100px;
  }
  .ML0 {
    margin-left: 0;
  }
  .ML5 {
    margin-left: 5px;
  }
  .ML10 {
    margin-left: 10px;
  }
  .ML15 {
    margin-left: 15px;
  }
  .ML20 {
    margin-left: 20px;
  }
  .ML25 {
    margin-left: 25px;
  }
  .ML30 {
    margin-left: 30px;
  }
  .ML35 {
    margin-left: 35px;
  }
  .ML40 {
    margin-left: 40px;
  }
  .ML45 {
    margin-left: 45px;
  }
  .ML50 {
    margin-left: 50px;
  }
  .ML60 {
    margin-left: 60px;
  }
  .ML70 {
    margin-left: 70px;
  }
  .ML100 {
    margin-left: 100px;
  }
  /*=========パディング設定=========*/
  .PA0 {
    padding: 0;
  }
  .PA10 {
    padding: 10px;
  }
  .PA20 {
    padding: 20px;
  }
  .PA30 {
    padding: 30px;
  }
  .PT0 {
    padding-top: 0;
  }
  .PT5 {
    padding-top: 5px;
  }
  .PT10 {
    padding-top: 10px;
  }
  .PT15 {
    padding-top: 15px;
  }
  .PT20 {
    padding-top: 20px;
  }
  .PT25 {
    padding-top: 25px;
  }
  .PT30 {
    padding-top: 30px;
  }
  .PT35 {
    padding-top: 35px;
  }
  .PT40 {
    padding-top: 40px;
  }
  .PT45 {
    padding-top: 45px;
  }
  .PT50 {
    padding-top: 50px;
  }
  .PT55 {
    padding-top: 55px;
  }
  .PT60 {
    padding-top: 60px;
  }
  .PT65 {
    padding-top: 65px;
  }
  .PT70 {
    padding-top: 70px;
  }
  .PT75 {
    padding-top: 75px;
  }
  .PT80 {
    padding-top: 80px;
  }
  .PT90 {
    padding-top: 90px;
  }
  .PT100 {
    padding-top: 100px;
  }
  .PT120 {
    padding-top: 120px;
  }
  .PR0 {
    padding-right: 0;
  }
  .PR5 {
    padding-right: 5px;
  }
  .PR10 {
    padding-right: 10px;
  }
  .PR15 {
    padding-right: 15px;
  }
  .PR20 {
    padding-right: 20px;
  }
  .PR30 {
    padding-right: 30px;
  }
  .PR35 {
    padding-right: 35px;
  }
  .PR40 {
    padding-right: 40px;
  }
  .PR50 {
    padding-right: 50px;
  }
  .PR60 {
    padding-right: 60px;
  }
  .PR70 {
    padding-right: 70px;
  }
  .PB0 {
    padding-bottom: 0;
  }
  .PB5 {
    padding-bottom: 5px;
  }
  .PB10 {
    padding-bottom: 10px;
  }
  .PB15 {
    padding-bottom: 15px;
  }
  .PB20 {
    padding-bottom: 20px;
  }
  .PB25 {
    padding-bottom: 25px;
  }
  .PB30 {
    padding-bottom: 30px;
  }
  .PB35 {
    padding-bottom: 35px;
  }
  .PB40 {
    padding-bottom: 40px;
  }
  .PB45 {
    padding-bottom: 45px;
  }
  .PB50 {
    padding-bottom: 50px;
  }
  .PB55 {
    padding-bottom: 55px;
  }
  .PB60 {
    padding-bottom: 60px;
  }
  .PB65 {
    padding-bottom: 65px;
  }
  .PB70 {
    padding-bottom: 70px;
  }
  .PB80 {
    padding-bottom: 80px;
  }
  .PB90 {
    padding-bottom: 90px;
  }
  .PB95 {
    padding-bottom: 95px;
  }
  .PB100 {
    padding-bottom: 100px;
  }
  .PB110 {
    padding-bottom: 110px;
  }
  .PB120 {
    padding-bottom: 120px;
  }
  .PL0 {
    padding-left: 0;
  }
  .PL5 {
    padding-left: 5px;
  }
  .PL10 {
    padding-left: 10px;
  }
  .PL15 {
    padding-left: 15px;
  }
  .PL20 {
    padding-left: 20px;
  }
  .PL30 {
    padding-left: 30px;
  }
  .PL40 {
    padding-left: 40px;
  }
  .PL50 {
    padding-left: 50px;
  }
  .PL100 {
    padding-left: 100px;
  }
  .PL5P {
    padding-left: 5%;
  }
  /*=========Border=========*/
  .BorderNone {
    border: none;
  }
  /*=========Font=========*/
  .FontBold {
    font-weight: bold;
  }
  .FC_blue {
    color: #0088fb;
  }
  .FC_white {
    color: #fff;
  }
  .FC_Red {
    color: #FF3333;
  }
  a.FC_blue2 {
    color: #007FFF;
  }
  a.FC_blue2:visited {
    color: #551a8b;
  }
  a.FC_blue2:active {
    color: #551a8b;
  }
  .FontS {
    font-size: 80%;
    line-height: 1.2em;
  }
  .FontSS {
    font-size: 70%;
    line-height: 1.5em;
  }
  .FontB {
    font-size: 120%;
  }
  .F11 {
    font-size: 11px;
    line-height: 12px;
  }
  /*=========text-align=========*/
  .TACenter {
    text-align: center;
  }
  .TARight {
    text-align: right;
  }
  .TALeft {
    text-align: left;
  }
  /*=========Indent=========*/
  .caption {
    text-align: left;
    display: block;
    clear: both;
    font-size: 85%;
    line-height: 130%;
    padding-top: 5px;
  }
  .caption_right {
    font-size: 85%;
    text-align: right;
    display: block;
    line-height: 130%;
    clear: both;
    padding-top: 5px;
  }
  .caption02 {
    font-size: 9px;
    line-height: 12px;
  }
  .caption03 {
    font-size: 10px;
    line-height: 15px;
    color: #fff;
  }
  .caption04 {
    font-size: 10px;
    line-height: 15px;
    color: #fff;
    width: 928px;
    text-align: right;
    margin-bottom: 20px;
  }
  /*.visible_pc{
  	display: block;	
  }
  .visible_sp{
  	display: none;	
  }
  .visible_w420 {
  	display: none;
  }*/
}
@media only screen and (max-width: 768px) {
  * {
    margin: 0;
    padding: 0;
  }
  *, *:before, *:after {
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
  }
  html {
    font-size: 62.5%;
  }
  body {
    font-size: 1.4rem; /*14px*/
    line-height: 1.7em;
    color: #000;
  }
  h1, h2, h3, h4, h5 {
    margin: 0;
    padding: 0;
  }
  div {
    margin: 0;
    padding: 0;
  }
  p {
    margin: 0;
    padding: 0;
    line-height: 1.7em;
  }
  a {
    text-decoration: none;
  }
  table, th, td {
    margin: 0;
    padding: 0;
    font-size: inherit;
    font-size: 1em;
    border-collapse: collapse;
    line-height: 1.7em;
  }
  table {
    width: 100%;
  }
  ul, ol, li, dl, dt, dd {
    margin: 0;
    padding: 0;
    list-style: none;
    list-style-position: outside;
    line-height: 1.7em;
  }
  img {
    margin: 0;
    padding: 0;
    border: none;
    line-height: 0;
    vertical-align: bottom;
    max-width: 100%;
  }
  article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary {
    display: block;
  }
  /*------------------------
  		option.css
  ------------------------*/
  /*=========display=========*/
  .DisPlayNone {
    display: none;
  }
  .DisPlayBlock {
    display: block;
  }
  .DisPlayInline {
    display: inline;
  }
  /*=========float=========*/
  /*=========clear=========*/
  .ClearBoth {
    clear: both;
  }
  .ClearRight {
    clear: right;
  }
  .ClearLeft {
    clear: left;
  }
  .ClearBox {
    clear: both;
    height: 0;
    overflow: hidden;
  }
  .ClearFix {
    zoom: 1;
  }
  .ClearFix:after {
    display: block;
    clear: both;
    height: 0;
    visibility: hidden;
    line-height: 0;
    content: ".";
  }
  .clearfix:after {
    content: "";
    display: block;
    clear: both;
    height: 0;
  }
  /* no ie mac \*/
  * html .ClearFix {
    height: 1%;
  }
  .ClearFix {
    display: block;
  }
  /*=========visibility=========*/
  .VisVis {
    visibility: visible;
  }
  .VisHid {
    visibility: hidden;
  }
  .VisCol {
    visibility: collapse;
  }
  /*=========Border=========*/
  .BorderNone {
    border: none;
  }
  /*=========Font=========*/
  .FontBold {
    font-weight: bold;
  }
  .FC_blue {
    color: #0088fb;
  }
  .FC_white {
    color: #fff;
  }
  .FC_Red {
    color: #FF3333;
  }
  a.FC_blue2 {
    color: #007FFF;
  }
  a.FC_blue2:visited {
    color: #551a8b;
  }
  a.FC_blue2:active {
    color: #551a8b;
  }
  .FontS {
    font-size: 80%;
    line-height: 1.2em;
  }
  .FontSS {
    font-size: 70%;
    line-height: 1.5em;
  }
  .FontB {
    font-size: 120%;
  }
  .F11 {
    font-size: 11px;
    line-height: 12px;
  }
  /*=========float=========*/
  .fr {
    float: right;
  }
  .fl {
    float: left;
  }
  /*=========text-align=========*/
  .tac {
    text-align: center;
  }
  .tar {
    text-align: right;
  }
  .tal {
    text-align: left;
  }
  /*=========Indent=========*/
  .caption {
    text-align: left;
    display: block;
    clear: both;
    font-size: 85%;
    line-height: 130%;
    padding-top: 5px;
  }
  .caption_right {
    font-size: 85%;
    text-align: right;
    display: block;
    line-height: 130%;
    clear: both;
    padding-top: 5px;
  }
  .caption02 {
    font-size: 9px;
    line-height: 12px;
  }
  .caption03 {
    font-size: 10px;
    line-height: 15px;
    color: #fff;
  }
  .caption04 {
    font-size: 10px;
    line-height: 15px;
    color: #fff;
    width: 928px;
    text-align: right;
    margin-bottom: 20px;
  }
  /*.visible_sp{
  	display: block;	
  }
  .visible_pc{
  	display: none;	
  }
  .visible_w420 {
  	display: none;
  }*/
  .mb1 {
    margin-bottom: 1%;
  }
  .mb2 {
    margin-bottom: 2%;
  }
  .mb3 {
    margin-bottom: 3%;
  }
  .mb4 {
    margin-bottom: 4%;
  }
  .mb5 {
    margin-bottom: 5%;
  }
  .mb6 {
    margin-bottom: 6%;
  }
  .mb7 {
    margin-bottom: 7%;
  }
  .mb8 {
    margin-bottom: 8%;
  }
  .mb9 {
    margin-bottom: 9%;
  }
  .mb10 {
    margin-bottom: 10%;
  }
  .mb11 {
    margin-bottom: 11%;
  }
  .mb12 {
    margin-bottom: 12%;
  }
  .mb15 {
    margin-bottom: 15%;
  }
  .mt1 {
    margin-top: 1%;
  }
  .mt2 {
    margin-top: 2%;
  }
  .mt3 {
    margin-top: 3%;
  }
  .mt4 {
    margin-top: 4%;
  }
  .mt5 {
    margin-top: 5%;
  }
  .mt6 {
    margin-top: 6%;
  }
  .mt7 {
    margin-top: 7%;
  }
  .mt8 {
    margin-top: 8%;
  }
  .mt9 {
    margin-top: 9%;
  }
  .mt10 {
    margin-top: 10%;
  }
  .mt12 {
    margin-top: 12%;
  }
  .mt15 {
    margin-top: 15%;
  }
  .ml1 {
    margin-left: 1%;
  }
  .ml2 {
    margin-left: 2%;
  }
  .ml3 {
    margin-left: 3%;
  }
  .ml4 {
    margin-left: 4%;
  }
  .ml5 {
    margin-left: 5%;
  }
  .ml6 {
    margin-left: 6%;
  }
  .ml7 {
    margin-left: 7%;
  }
  .ml8 {
    margin-left: 8%;
  }
  .ml9 {
    margin-left: 9%;
  }
  .ml10 {
    margin-left: 10%;
  }
  .mr1 {
    margin-right: 1%;
  }
  .mr2 {
    margin-right: 2%;
  }
  .mr3 {
    margin-right: 3%;
  }
  .mr4 {
    margin-right: 4%;
  }
  .mr5 {
    margin-right: 5%;
  }
  .mr6 {
    margin-right: 6%;
  }
  .mr7 {
    margin-right: 7%;
  }
  .mr8 {
    margin-right: 8%;
  }
  .mr9 {
    margin-right: 9%;
  }
  .mr10 {
    margin-right: 10%;
  }
  .pb1 {
    padding-bottom: 1%;
  }
  .pb2 {
    padding-bottom: 2%;
  }
  .pb3 {
    padding-bottom: 3%;
  }
  .pb4 {
    padding-bottom: 4%;
  }
  .pb5 {
    padding-bottom: 5%;
  }
  .pb6 {
    padding-bottom: 6%;
  }
  .pb7 {
    padding-bottom: 7%;
  }
  .pb8 {
    padding-bottom: 8%;
  }
  .pb9 {
    padding-bottom: 9%;
  }
  .pb10 {
    padding-bottom: 10%;
  }
  .pb11 {
    padding-bottom: 11%;
  }
  .pb12 {
    padding-bottom: 12%;
  }
  .pb15 {
    padding-bottom: 15%;
  }
  .pt1 {
    padding-top: 1%;
  }
  .pt2 {
    padding-top: 2%;
  }
  .pt3 {
    padding-top: 3%;
  }
  .pt4 {
    padding-top: 4%;
  }
  .pt5 {
    padding-top: 5%;
  }
  .pt6 {
    padding-top: 6%;
  }
  .pt7 {
    padding-top: 7%;
  }
  .pt8 {
    padding-top: 8%;
  }
  .pt9 {
    padding-top: 9%;
  }
  .pt10 {
    padding-top: 10%;
  }
  .pt12 {
    padding-top: 12%;
  }
  .img80 {
    width: 80%;
  }
  .TACenter {
    text-align: center;
  }
}
@media only screen and (max-width: 420px) {
  .visible_w420 {
    display: block;
  }
  .invisible_w420 {
    display: none;
  }
}
/*--- リンクロールオーバー ---*/
a.txt-link,
a.txt-link:hover,
a.img-link img,
a.img-link:hover img,
a.block-link > p,
a.block-link > div,
a.block-link > ul > li,
a.block-link > dl > dt,
a.block-link > dl > dd,
a.block-link > span,
a.block-link:hover > p,
a.block-link:hover > div,
a.block-link:hover > ul > li,
a.block-link:hover > dl > dt,
a.block-link:hover > dl > dd,
a.block-link:hover > span {
  transition-property: opacity;
  transition-duration: 0.4s;
}

a.txt-link {
  opacity: 1;
}

a.txt-link:hover {
  opacity: 0.5;
}

a.img-link img {
  opacity: 1;
}

a.img-link:hover img {
  opacity: 0.5;
}

a.block-link > p,
a.block-link > div,
a.block-link > ul > li,
a.block-link > dl > dt,
a.block-link > dl > dd,
a.block-link > span {
  opacity: 1;
}

a.block-link:hover > p,
a.block-link:hover > div,
a.block-link:hover > ul > li,
a.block-link:hover > dl > dt,
a.block-link:hover > dl > dd,
a.block-link:hover > span {
  opacity: 0.5;
}

/*--- 共通コンポーネント: テキストロールホバー（マウスオーバーで文字が縦にくるんと入れ替わる）
       構造:
       <a class="txt-link u-roll-hover">
         <span class="roll"><span class="roll__inner">
           <span class="roll__label">TEXT</span>
           <span class="roll__label" aria-hidden="true">TEXT</span>
         </span></span>
       </a>
       - ヘッダーPCナビ / フッターナビ(.footer__link, .footer__sublist) / TOPのテキストリンク
         （採用について、NEWSのREAD MORE）から共通利用する
       - アイコン画像（円形矢印等）は roll の対象外。span要素のみ複製する
       - hover機能を持つ環境のみ有効化（@media (hover:hover)）。タッチ環境では発火しない
       - prefers-reduced-motion: reduce ではロールを無効化し、既存の opacity ホバーへ戻す ---*/
.roll {
  display: inline-block;
  overflow: hidden;
  /* ラベル1枚分の高さに固定し、2枚目のラベルはデフォルトで枠外（下）に隠す。
     1.2em は英字ディセンダ（Do Branding の g 等）の下端切れを防ぐための行高 */
  height: 1.2em;
  line-height: 1.2;
  vertical-align: bottom;
  /* 「READ MORE」「OUR BUSINESS」等の空白入りラベルが親幅で折り返すと、
     overflow:hidden(1.2em)により2行目が隠れて「READ」「OUR」だけに見える事故になるため1行固定。
     ※例外: TOP SPの「ALL VIEW」縦積みは style_top.scss 側で white-space:normal を個別指定済み */
  white-space: nowrap;
}

.roll__inner {
  display: block;
  transition: transform 0.4s cubic-bezier(0.5, 0, 0.2, 1);
  transform-style: preserve-3d;
}

.roll__label {
  display: block;
  height: 1.2em;
  line-height: 1.2;
}

/*--- 別窓リンクアイコン（images/common/out-link.svg / 90×90・fill #2c2c2c = $ink）---*/
/* ヘッダーPCナビ・ハンバーガー・フッターの外部リンク（RECRUIT / Do Direct）に付く。
   文脈ごとに文字サイズが違う（PCナビ17px / フッター16px / メニュー25px）ため、
   px固定ではなく em 指定にして各文脈の font-size に追従させる。
   ※ロール演出の外側に置いているのでホバー時も動かない（テキストだけが回る） */
.out-link-icon {
  flex-shrink: 0;
  /* チェックバック: アイコンをもう少し大きく、文字との間は詰める（旧 0.7em / 余白0.5em）。
     0.9em は英字の大文字とほぼ同じ高さになり、テキストと並べたときに対等に見えるサイズ */
  width: 0.9em;
  height: 0.9em;
  margin-left: 0.25em;
}

/* u-roll-hover を付与したリンクは、ロール演出に統一するため既存のopacityホバーを打ち消す。
   .footer__link a:hover 等（class+element+pseudo）と同等以上の詳細度を確保するため
   あえて class を2つ重ねて指定し、CSS読み込み順に依存せず確実に上書きする */
a.txt-link.u-roll-hover:hover {
  opacity: 1;
}

@media (hover: hover) {
  /* .u-roll-hover 自身のhover（a.txt-link / a.btn-more等）と、
     リンク内部に .u-roll-hover を持つ場合（branding-teaserのspan.btn-more等）の両方で発火 */
  .u-roll-hover:hover .roll__inner,
a:hover .u-roll-hover .roll__inner {
    transform: translateY(-50%) rotateX(10deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .roll__inner {
    transition: none;
  }
  /* ロール無効化（transformも打ち消し）、通常のopacityホバーへフォールバック */
  .u-roll-hover:hover .roll__inner,
a:hover .u-roll-hover .roll__inner {
    transform: none;
  }
  a.txt-link.u-roll-hover:hover {
    opacity: 0.5;
  }
}
/*--- 表示切替ユーティリティ: SPのみ表示（<br class="u-only-sp"> によるSP専用改行などに使用） ---*/
.u-only-sp {
  display: none;
}

@media screen and (max-width: 768px) {
  .u-only-sp {
    display: inline;
  }
}
/*--- youtubeレスポンシブ ---*/
.youtube2 {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}

.youtube2 iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}
.visible-xs,
.visible-sm,
.visible-md,
.visible-lg {
  display: none !important;
}

.visible-xs-block,
.visible-xs-inline,
.visible-xs-inline-block,
.visible-sm-block,
.visible-sm-inline,
.visible-sm-inline-block,
.visible-md-block,
.visible-md-inline,
.visible-md-inline-block,
.visible-lg-block,
.visible-lg-inline,
.visible-lg-inline-block {
  display: none !important;
}

@media (max-width: 420px) {
  .hidden-xs {
    display: none !important;
  }
}
@media (min-width: 420px) and (max-width: 770px) {
  .hidden-sm {
    display: none !important;
  }
}
@media (min-width: 770px) {
  .hidden-md {
    display: none !important;
  }
}
/*=============================================
	2026リニューアル 共通ヘッダー（Figma node 431:1080）
=============================================*/
.header {
  /* チェックバック: スクロール追従（fixed化）。absolute→fixedはいずれもフロー外要素のため
     .top{padding-top:90px} や各ページの main{padding-top:...} の値はそのまま流用できる */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 40;
  height: 60px;
  background-color: rgba(255, 242, 38, 0.6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 23px 0 31px;
  transition: transform 0.3s ease; /* is-hidden スライド用 */
}

/* フッターが画面下1/3ほど表示されたら隠す（js/common.js がIOで .is-hidden 付与） */
.header.is-hidden {
  transform: translateY(-100%);
}

/* チェックバック: 初期はデフォルトサイズ、少しスクロールしたら少し小さくする。
   .header への is-compact 付与は js/common.js が担当（しきい値: 付与90px / 解除60px）。
   ヘッダー自体の高さ(90px)は各ページの padding-top / main の padding-top の基準に
   なっているため変えない（ロゴだけを縮める） */
.header__logo {
  width: 220px;
  transition: width 0.3s ease;
}

.header.is-compact .header__logo {
  width: 210px;
}

@media (prefers-reduced-motion: reduce) {
  .header__logo {
    transition: none; /* サイズは切り替わるがアニメーションはさせない */
  }
}
.header__logo a {
  display: block;
}

.header__logo img {
  display: block;
  width: 100%;
  height: auto;
}

.header__nav {
  display: flex;
  align-items: center;
}

.header__list {
  display: flex;
  align-items: center;
}

.header__item {
  font-family: "Kumbh Sans", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 500;
  font-size: 17px;
  letter-spacing: 0.05em;
  line-height: 1.5em;
}

.header__item + .header__item {
  margin-left: 30px;
}

.header__item a {
  /* アイコン付きリンク（RECRUIT）で画像とテキストの天地を揃えるため inline-flex 化。
     フッターの .footer__link a と同じ作り。アイコンの無い項目にも無害 */
  display: inline-flex;
  align-items: center;
  color: #2c2c2c;
}

.header__cta {
  margin-left: 20px;
}

.header__cta a {
  display: block;
  min-width: 123px;
  padding: 0 20px;
  line-height: 36px;
  border-radius: 999px;
  background-color: #2c2c2c;
  color: #fff;
  font-family: "Kumbh Sans", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 500;
  font-size: 18px;
  letter-spacing: 0.05em;
  text-align: center;
  transition-property: opacity;
  transition-duration: 0.4s;
}

.header__cta a:hover {
  opacity: 0.7;
}

.header__toggle {
  display: none;
}

.header__menu {
  display: none; /* 開閉は common.js が .header__toggle クリックで #header-menu に is-open を付与して制御 */
}

/* 白背景ページ（記事詳細・COMPANY・CONTACT系・ACCESS。header.php が body.is-white-page を付与）:
   ページ地が白のため、ヘッダーを白 / フッターを黄に反転する（Figma 記事ページ_PC 253:1838） */
.is-white-page .header {
  background-color: rgba(255, 255, 255, 0.6);
}

.is-white-page .footer {
  background-color: #FFF226;
}

@media screen and (max-width: 768px) {
  .header {
    height: 16vw;
    padding: 0 4.3vw;
  }
  .header__logo {
    width: 45.5vw; /* Figma実測 200px（node 561:3091 / SP正式デザイン） */
  }
  /* PC側の is-compact(210px) と詳細度が同じ(0,3,0)ため、後勝ちでSP値を上書きする */
  .header.is-compact .header__logo {
    width: 38vw;
  }
}
/* チェックバック対応: PCナビ（.header__nav）は幅1024px以上のみ表示し、
   1023px以下はSPと同じハンバーガー表示に切り替える。
   ハンバーガー/メニューの基本スタイルは従来どおり440pxフレーム基準のvw値のまま（≤768pxで従来と同一）。
   769〜1023pxのタブレット帯はvwだと巨大化するため、後続の min-width:769px ブロックでpx固定値に上書きする */
@media screen and (max-width: 1023px) {
  .header__nav {
    display: none;
  }
  /* ハンバーガー（SPのみ表示）
     閉状態: 星形バーストの黒罫線アウトライン（塗り透過）＋中に3本線（$ink）
     （チェックバック: デフォルトでも星形をイキ、背景は透過で黒罫線）
     開状態: 右上に黄色パネルが展開し、パネル内の実button要素が星形×閉じるボタンとして機能する
     （Figma node 561:3417／440幅フレーム基準でvw換算。詳細は各セレクタのコメント参照） */
  .header__toggle {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* チェックバック: 3本線を約70%に縮小。行間も線幅と同率で詰めないと
       線だけ短くなって3本の塊が縦に間延びして見えるため、あわせて縮める
       （旧: 0.91vw = Figma実測 line pitch 2.5px - 線幅2px ≒ 4px） */
    gap: 0.64vw; /* 4px × 0.7 ≒ 2.8px */
    position: fixed;
    right: 4.1vw; /* Figma実測 18.2px */
    top: 1.8vw; /* Figma実測 16.8px */
    width: 12.7vw; /* Figma実測 56px */
    height: 12.7vw;
    border: none;
    background-color: transparent;
    background-image: url("../images/common/hamburger-star-outline.svg"); /* 星形の黒罫線アウトライン（塗り透過） */
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    cursor: pointer;
    z-index: 60;
    padding: 0;
    opacity: 1;
    transition: opacity 0.3s cubic-bezier(0.18, 0.06, 0.23, 1); /* 参考: matsuo-komuten.co.jp #hamburger-button.is-hide */
  }
  .header__toggle-line {
    display: block;
    /* チェックバック: 約70%に縮小（旧 5.45vw = Figma実測比率換算 24px）。
       線の太さ(2px)は据え置き。0.7倍だと1.4pxで端末により掠れるため */
    width: 3.82vw; /* 24px × 0.7 ≒ 16.8px */
    height: 1.5px;
    background-color: #2c2c2c;
    transition: transform 0.3s cubic-bezier(0.76, 0, 0.24, 1), opacity 0.3s cubic-bezier(0.76, 0, 0.24, 1); /* 参考: matsuo-komuten.co.jp [data-hamburger-button-bar] */
  }
  .header__toggle-line:nth-child(1) {
    transform-origin: top left;
  }
  .header__toggle-line:nth-child(3) {
    transform-origin: bottom left;
  }
  /* is-open は common.js が付与する開閉状態クラス（aria-expanded と同期）。
     パネル内 .header__menu-close が同位置に重なって現れるため、閉じるまでトグル自体は
     フェードアウトしつつ、アイコンも参考サイトと同じ回転量で畳む演出を残す */
  .header__toggle.is-open {
    opacity: 0;
    pointer-events: none;
  }
  .header__toggle.is-open .header__toggle-line:nth-child(1) {
    transform: rotate(19.5deg);
  }
  .header__toggle.is-open .header__toggle-line:nth-child(2) {
    transform: scale(0.2);
    opacity: 0;
  }
  .header__toggle.is-open .header__toggle-line:nth-child(3) {
    transform: rotate(-19.5deg);
  }
  /* 黄色パネル（右上起点で展開。幅69.68vw×高さ105vw、左下のみ角丸4.77vw = Figma実測21px）
     Figma node 561:3773 rotation込みで角丸は左下のみ確認済み（rectangleCornerRadii 実測） */
  /* ===== ハンバーガーメニューの中身（リデザイン: Figma node 806:1557 / 390pxフレーム） =====
     旧: 右上から展開する 69.68vw のパネル＋項目ごとに円形矢印アイコン（440pxフレーム基準）
     新: 画面全幅の黄色パネル。ロゴ / CONTACTボタン / 区切り線付きナビ / コピーライト。
     ※この節のvwだけは「390pxフレーム基準」(px × 100/390)。他のSPスタイルは440基準なので混同しないこと。
     ナビの寸法はFigmaの区切り線が絶対pxで入っていたため厳密に取れた:
       サブリンクなしの項目 = 60px / サブリンクありの項目 = 115px（いずれも下端に1pxの区切り線）
       区切り線 left27 / width329 → パネルの左右paddingを 27px / 34px にして再現 */
  /* チェックバック: メニューを開いてもロゴが動いて見えないよう、ヘッダーのロゴと同じ座標・サイズにする。
     参照値は SP の .header{height:16vw; padding:0 4.3vw} と .header__logo{width:45.5vw}。
     ロゴ実寸は255×40なので高さは 45.5×40/255 = 7.137vw、ヘッダー内で上下中央なら top=(16-7.137)/2=4.43vw。
     ※この2つ（ロゴ・閉じる）だけ440pxフレーム基準（ヘッダーに合わせるため）。メニュー本体は390px基準。
     position:fixed にしてあるので、パネルをスクロールしても位置が動かない */
  /* ヘッダー側(.header__logo a)と同じく <a> をブロック化する。
     これが無いと <a> がインラインのままで行ボックスの余白が乗り、
     同じ top/left/width を与えてもヘッダーのロゴとぴったり重ならない */
  /* チェックバック: メニュー内のロゴがヘッダーのロゴより大きく見える件。
     ヘッダーのロゴは少しスクロールすると .is-compact で 45.5vw→38vw に縮むが、
     メニュー内のロゴは 45.5vw のままだったため、スクロール後に開くと差が出ていた。
     .header__menu は .header の子（header.php）なので同じ状態クラスで拾って追従させる。
     これで「開いた瞬間にロゴのサイズが変わる」ことがなくなる */
  /* 星形×閉じるボタン（hamburger-star.svg）。
     チェックバック: ヘッダーのハンバーガー(.header__toggle)と同座標・同サイズに合わせる */
  /* CONTACTボタン（Figma: 227×49 / 上マージン36px / border1.855px / radius6.491px）。
     文字ボックスはボタン内で中央、矢印だけ右端に絶対配置（Figma実測の並び） */
  /* ナビ本体 */
  /* stagger: 上から順に出す（0.05s刻み。⚠️推定値でデザイン指定ではない）。
     チェックバック: 項目を1つ足した際に nth-child の指定数(10)を超え、
     最後の1つだけ --menu-item-delay が未定義になって
     フォールバックの 0s が効き「最初から出ている」ように見えていた。
     同じ事故を防ぐため、項目数より十分多い数までループで生成しておく
     （現在11項目。20を超えて増やす場合はここの上限も上げること） */
  /* サブリンク（- 事業領域 など） */
}
@media screen and (max-width: 1023px) and (prefers-reduced-motion: reduce) {
  .header__toggle,
.header__toggle-line {
    transition: none;
  }
}
@media screen and (max-width: 1023px) {
  .header__menu {
    display: block; /* 基準ルールの display:none を上書き */
    position: fixed;
    inset: 0;
    z-index: 50;
    pointer-events: none; /* 閉状態ではオーバーレイ/パネルとも操作不可 */
  }
}
@media screen and (max-width: 1023px) {
  .header__menu.is-open {
    pointer-events: auto;
  }
}
@media screen and (max-width: 1023px) {
  .header__menu-overlay {
    position: absolute;
    inset: 0;
    /* リデザインでパネルが画面全幅の不透明な黄色になったため、暗幕は不要。
       要素自体は common.js が「オーバーレイクリックで閉じる」で参照しているので残す */
    background-color: transparent;
    opacity: 0;
    transition: opacity 0.3s cubic-bezier(0.18, 0.06, 0.23, 1); /* 参考: matsuo-komuten.co.jp .menu-desktop base opacity transition */
  }
}
@media screen and (max-width: 1023px) {
  .header__menu.is-open .header__menu-overlay {
    opacity: 1;
  }
}
@media screen and (max-width: 1023px) {
  .header__menu-panel {
    position: absolute;
    inset: 0; /* 画面全幅・全高（旧: 右上 69.68vw × 105vw のパネル） */
    width: auto;
    height: auto;
    max-height: none;
    /* 中身(実測1032px)がビューポートより高い端末では、パネル内でスクロールして最後まで読める。
       BFCを作るので子のmargin相殺も防げる。
       - overscroll-behavior: contain … 端まで来てもページ側へスクロールが連鎖しない
       - data-lenis-prevent（header.php）… PC/タブレットでホイールをLenisに奪われないようにする
         （Lenisはタッチをスムージングしないのでスマホはネイティブのまま） */
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    background-color: #FFF226;
    border-radius: 0;
    /* 左27px / 右34px（＝区切り線 left27・width329）。
       上は、ロゴをヘッダー位置へ逃がした(position:fixed)ぶんCONTACTボタンの開始位置(119px@390)を
       paddingで確保する */
    padding: 30.513vw 8.718vw 0 6.923vw;
    box-sizing: border-box;
    opacity: 0;
    transform: none;
    transition: opacity 0.3s cubic-bezier(0.18, 0.06, 0.23, 1);
  }
}
@media screen and (max-width: 1023px) {
  .header__menu.is-open .header__menu-panel {
    opacity: 1;
  }
}
@media screen and (max-width: 1023px) {
  .header__menu-logo {
    position: fixed;
    /* チェックバック: top を計算値で固定していたため、.is-compact でロゴが縮むと
       その差の半分（約0.59vw）だけ上にズレていた。
       ヘッダー(.header{height:16vw; display:flex; align-items:center})と同じ
       「ヘッダー高の箱の中で上下中央」に揃えることで、ロゴ幅が変わっても常に一致する */
    top: 0;
    left: 4.3vw;
    width: 45.5vw;
    height: 16vw;
    display: flex;
    align-items: center;
    margin-top: 0;
  }
}
@media screen and (max-width: 1023px) {
  .header__menu-logo a {
    width: 100%; /* flexアイテムなので明示しないと内容幅になる */
  }
}
@media screen and (max-width: 1023px) {
  .header.is-compact .header__menu-logo {
    width: 38vw;
  }
}
@media screen and (max-width: 1023px) {
  .header__menu-logo a {
    display: block;
  }
}
@media screen and (max-width: 1023px) {
  .header__menu-logo img {
    display: block;
    width: 100%;
    height: auto;
  }
}
@media screen and (max-width: 1023px) {
  .header__menu-close {
    position: fixed;
    top: 1.8vw; /* .header__toggle と同値 */
    right: 4.1vw;
    width: 12.7vw;
    height: 12.7vw;
    border: none;
    background-color: transparent;
    background-image: url("../images/common/hamburger-star.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    cursor: pointer;
    padding: 0;
    opacity: 0;
    transition: opacity 0.3s cubic-bezier(0.18, 0.06, 0.23, 1);
    transition-delay: 0s;
  }
}
@media screen and (max-width: 1023px) {
  .header__menu.is-open .header__menu-close {
    opacity: 1;
    transition-delay: 0.1s; /* パネル展開後にやや遅れて出現 */
  }
}
@media screen and (max-width: 1023px) {
  .header__menu-cta {
    margin-top: 0; /* 開始位置はパネルの padding-top が持つ（ロゴがfixedで流れから外れたため） */
  }
}
@media screen and (max-width: 1023px) {
  .header__menu-cta a {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 58.205vw; /* 227px */
    height: 12.564vw; /* 49px */
    border: 2px solid #2c2c2c;
    border-radius: 6px;
    font-family: "Kumbh Sans", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", sans-serif;
    font-weight: 600;
    font-size: 4.28vw; /* 16.691px */
    letter-spacing: 0.05em; /* Figma 0.8345px / 16.691px */
    color: #2c2c2c;
    /* テキストを中央から少し左へ（フッターのCONTACTと統一）。矢印幅5.944vw + 右余白2.564vw */
    padding-right: 3vw;
  }
}
@media screen and (max-width: 1023px) {
  .header__menu-cta-arrow {
    position: absolute;
    right: 2.564vw; /* 10px */
    width: 5.944vw; /* 23.182px */
    height: 5.944vw;
  }
}
@media screen and (max-width: 1023px) {
  .header__menu-list {
    margin-top: 9.615vw; /* 37.5px（CONTACTボタン下端→1項目め） */
  }
}
@media screen and (max-width: 1023px) {
  .header__menu-item {
    /* チェックバック: 各項目の天地を均等に（旧: padding-top 8px 固定で中身が上寄り・下が余る）。
       ブロック高が60px/115pxの2種類あるため、固定paddingではなくflexの中央寄せにして
       どちらの高さでも自動で上下等分になるようにする。
       align-items: flex-start はリンクの当たり判定を従来どおり文字幅に保つため */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    min-height: 15.385vw; /* 60px（区切り線込み） */
    border-bottom: 1px solid #2c2c2c;
    opacity: 0;
    transform: translateX(4vw);
    transition: opacity 0.5s cubic-bezier(0.16, 0.64, 0.32, 1), transform 0.5s cubic-bezier(0.16, 0.64, 0.32, 1);
    transition-delay: var(--menu-item-delay, 0s);
  }
}
@media screen and (max-width: 1023px) {
  .header__menu-item--has-sub {
    min-height: 29.487vw; /* 115px */
  }
}
@media screen and (max-width: 1023px) {
  .header__menu.is-open .header__menu-item {
    opacity: 1;
    transform: translateX(0);
  }
}
@media screen and (max-width: 1023px) {
  .header__menu-item:nth-child(1) {
    --menu-item-delay: 0.1s;
  }
}
@media screen and (max-width: 1023px) {
  .header__menu-item:nth-child(2) {
    --menu-item-delay: 0.15s;
  }
}
@media screen and (max-width: 1023px) {
  .header__menu-item:nth-child(3) {
    --menu-item-delay: 0.2s;
  }
}
@media screen and (max-width: 1023px) {
  .header__menu-item:nth-child(4) {
    --menu-item-delay: 0.25s;
  }
}
@media screen and (max-width: 1023px) {
  .header__menu-item:nth-child(5) {
    --menu-item-delay: 0.3s;
  }
}
@media screen and (max-width: 1023px) {
  .header__menu-item:nth-child(6) {
    --menu-item-delay: 0.35s;
  }
}
@media screen and (max-width: 1023px) {
  .header__menu-item:nth-child(7) {
    --menu-item-delay: 0.4s;
  }
}
@media screen and (max-width: 1023px) {
  .header__menu-item:nth-child(8) {
    --menu-item-delay: 0.45s;
  }
}
@media screen and (max-width: 1023px) {
  .header__menu-item:nth-child(9) {
    --menu-item-delay: 0.5s;
  }
}
@media screen and (max-width: 1023px) {
  .header__menu-item:nth-child(10) {
    --menu-item-delay: 0.55s;
  }
}
@media screen and (max-width: 1023px) {
  .header__menu-item:nth-child(11) {
    --menu-item-delay: 0.6s;
  }
}
@media screen and (max-width: 1023px) {
  .header__menu-item:nth-child(12) {
    --menu-item-delay: 0.65s;
  }
}
@media screen and (max-width: 1023px) {
  .header__menu-item:nth-child(13) {
    --menu-item-delay: 0.7s;
  }
}
@media screen and (max-width: 1023px) {
  .header__menu-item:nth-child(14) {
    --menu-item-delay: 0.75s;
  }
}
@media screen and (max-width: 1023px) {
  .header__menu-item:nth-child(15) {
    --menu-item-delay: 0.8s;
  }
}
@media screen and (max-width: 1023px) {
  .header__menu-item:nth-child(16) {
    --menu-item-delay: 0.85s;
  }
}
@media screen and (max-width: 1023px) {
  .header__menu-item:nth-child(17) {
    --menu-item-delay: 0.9s;
  }
}
@media screen and (max-width: 1023px) {
  .header__menu-item:nth-child(18) {
    --menu-item-delay: 0.95s;
  }
}
@media screen and (max-width: 1023px) {
  .header__menu-item:nth-child(19) {
    --menu-item-delay: 1s;
  }
}
@media screen and (max-width: 1023px) {
  .header__menu-item:nth-child(20) {
    --menu-item-delay: 1.05s;
  }
}
@media screen and (max-width: 1023px) {
  .header__menu-link {
    /* アイコン付き項目（RECRUIT / Do Direct）の天地を揃えるため inline-flex 化 */
    display: inline-flex;
    align-items: center;
    font-family: "Kumbh Sans", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", sans-serif;
    font-weight: 600;
    font-size: 6.41vw; /* 25px */
    line-height: 1.2;
    letter-spacing: 0.05em; /* Figma 1.25px / 25px */
    color: #2c2c2c;
    white-space: nowrap;
  }
}
@media screen and (max-width: 1023px) {
  .header__menu-sublist li {
    font-family: "Kumbh Sans", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", sans-serif;
    font-weight: 500;
    font-size: 4.615vw; /* 18px */
    line-height: 1.278; /* Figma 23px / 18px */
    white-space: nowrap;
    margin-bottom: 1.5vw;
    margin-top: 1.5vw;
  }
  .header__menu-sublist li.jp {
    font-weight: 600;
    font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "游ゴシック体", "Yu Gothic", YuGothic, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  }
}
@media screen and (max-width: 1023px) {
  .header__menu-sublist a {
    color: #2c2c2c;
  }
}
@media screen and (max-width: 1023px) {
  .header__menu-copyright {
    margin-top: 3.846vw; /* 15px（最後の区切り線→コピーライト） */
    padding-bottom: 10.256vw; /* 40px（パネル下端の余白） */
    font-family: "Kumbh Sans", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", sans-serif;
    font-weight: 500;
    font-size: 2.564vw; /* 10px */
    letter-spacing: 0.05em; /* Figma 0.5px / 10px */
    text-align: right;
    color: #2c2c2c;
  }
}
@media screen and (max-width: 1023px) and (prefers-reduced-motion: reduce) {
  .header__menu-overlay,
.header__menu-panel,
.header__menu-close,
.header__menu-item {
    transition: none;
  }
}
/* タブレット帯（769〜1023px）: ハンバーガー/メニューをpx固定値に上書き。
   値は440pxフレーム実測px（vw × 4.4）ベース。トグル位置のみPCヘッダー（高さ90px・右padding23px）に合わせて
   上下中央・右端揃えに調整 */
@media screen and (min-width: 769px) and (max-width: 1023px) {
  .header__toggle {
    gap: 3px; /* SPと同じく約70%（旧4px）。線と行間を同率で詰める */
    right: 23px; /* ヘッダーの右padding(23px)に揃える */
    /* チェックバック: 少し上へ。旧値17pxはヘッダー高90px時代の中央値で、
       高さ60pxになった現在は下へ13pxはみ出していた。
       (ヘッダー高60px - トグル56px) ÷ 2 = 2px で天地中央に収まる */
    top: 2px;
    width: 56px;
    height: 56px;
  }
  .header__toggle-line {
    width: 17px; /* チェックバック: 約70%に縮小（旧24px） */
    height: 2px; /* チェックバック: タブレットは線を太く（SP共通値は1.5px） */
  }
  /* メニュー中身はSPと同じリデザイン（Figma 390pxフレーム）を、vwではなく実寸pxで適用する。
     タブレット幅でvwのままだと文字が巨大化するため。
     コンテンツ列はデザインのフレーム幅(390px)で頭打ちにし、左寄せで原寸そのままに保つ */
  .header__menu-panel {
    /* チェックバック: 領域が狭くロゴと閉じるアイコンが重なっていた。
       原因は width:auto + left:auto + right:0 で shrink-to-fit（内容なりの幅≒311px）に
       なっていたこと。右基準の閉じるアイコンが左へ寄り、ロゴ(27〜278px)に食い込んでいた。
       デザインフレーム幅で固定して、ロゴ(〜278px)と閉じる(313〜369px)の間に35pxを確保する */
    width: 390px;
    max-width: 100%;
    height: auto;
    border-radius: 0;
    /* 左27px / 右34px。上は、ロゴを出さないこの帯では
       閉じるアイコン(top17〜73px)とCONTACTボタンが被らないための逃げ。
       119pxはアイコン下端から46px空く計算。詰めたい場合はこの値 */
    padding: 119px 34px 0 27px;
    /* チェックバック: タブレット帯は左からではなく右から出す。
       inset:0 のうち left を外して右端に寄せる（ヘッダーのハンバーガーが右にあるため自然） */
    left: auto;
    right: 0;
  }
  /* この帯はパネルが画面全幅ではないため、ロゴ・閉じるはヘッダー座標ではなく
     パネル内の設計位置に戻す（SPのfixed指定を打ち消す） */
  /* チェックバック: タブレット帯ではメニュー内のロゴは出さない。
     この帯はパネルが画面全幅ではなく右端390pxなので、ヘッダーのロゴが左に見えたまま残り、
     メニュー内にもロゴがあると二重に見えてしまうため */
  .header__menu-logo {
    display: none;
  }
  /* チェックバック: 閉じるアイコンはヘッダーのハンバーガー(.header__toggle)に
     ぴったり重なる位置・サイズにする。パネルを右端(right:0)へ寄せてあるので、
     fixed + right でヘッダー基準の座標をそのまま使える */
  .header__menu-close {
    position: fixed;
    top: 2px; /* .header__toggle と同値（重ねるため必ず揃える） */
    left: auto;
    right: 23px; /* .header__toggle と同値（ヘッダーの右padding） */
    width: 56px;
    height: 56px;
  }
  .header__menu-cta {
    margin-top: 0; /* 開始位置はパネルの padding-top が持つ（SPと同じ） */
  }
  .header__menu-cta {
    margin-top: 36px;
  }
  .header__menu-cta a {
    width: 227px;
    height: 49px;
    font-size: 17px; /* Figma実測 16.691px */
    padding-right: 15px;
  }
  .header__menu-cta-arrow {
    right: 10px;
    width: 23px;
    height: 23px;
  }
  .header__menu-list {
    margin-top: 37px;
  }
  .header__menu-item {
    min-height: 60px; /* 天地中央寄せはSP側の flex 指定がそのまま効く */
    transform: translateX(18px); /* 閉状態のスライド量（is-open時は0が優先される） */
  }
  /* チェックバック: サブメニュー持ち（OUR BUSINESS / INTERNATIONAL AD / COMPANY）の
     上余白が他項目より詰まっていた件。
     原因は下の .header__menu-sublist li の上下marginがSP由来の 1.5vw のままで、
     タブレット幅では 12〜15px に膨らみ、中身の高さ(30+2×(23+24)=124px)が
     ブロック高115pxを超えて中央寄せの余白が消えていたため。
     marginをpx固定に戻したうえで、上余白は他項目と同じ15pxを明示して上から積む。
     （15 + リンク30 + サブ2行70 = ちょうど115px） */
  .header__menu-item--has-sub {
    min-height: 115px;
    justify-content: flex-start;
    padding-top: 15px; /* 他項目の上余白 = (60 - 25×1.2) ÷ 2 と同値 */
  }
  .header__menu-link {
    font-size: 25px;
  }
  .header__menu-sublist li {
    font-size: 18px;
    margin-top: 6px; /* SP設計値 1.5vw@390px ≒ 5.85px を px 固定化 */
    margin-bottom: 6px;
  }
  .header__menu-copyright {
    margin-top: 15px;
    padding-bottom: 40px;
    font-size: 10px;
  }
}
/*=============================================
	2026リニューアル 共通フッター（Figma node 384:1662）
=============================================*/
.footer {
  background-color: #fff;
  margin-top: 100px;
  padding: 69px 0 36px;
  position: relative;
}

.footer__inner {
  max-width: 1100px;
  width: 96%;
  margin-left: auto;
  margin-right: auto;
}

.footer__top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}

.footer__logo {
  width: 334px;
}

.footer__logo img {
  display: block;
  width: 100%;
  height: auto;
}

/* チェックバック: テキストは中央から少し左寄り／矢印は右端に寄せる（ヘッダーメニューのCONTACTと統一）。
   矢印を絶対配置で右端に固定し、その占有ぶん(矢印幅+右余白)を padding-right で確保する。
   flex の justify-content:center は padding を除いたコンテンツ領域の中央に効くため、
   結果としてテキストが padding-right の半分だけ左へ寄る */
.footer__contact a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-right: 15px; /* 矢印25px + 右余白14px */
  width: 245px;
  height: 55px;
  border: 2px solid #2c2c2c;
  border-radius: 7px;
  color: #2c2c2c;
  font-family: "Kumbh Sans", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 600;
  font-size: 18px;
  letter-spacing: 0.05em;
  transition-property: opacity;
  transition-duration: 0.4s;
}

.footer__contact a:hover {
  opacity: 0.6;
}

.footer__contact-arrow {
  position: absolute;
  right: 14px;
  width: 25px;
  height: 25px;
}

.footer__nav {
  margin-top: 48px;
}

.footer__columns {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.footer__link {
  font-family: "Kumbh Sans", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.05em;
  line-height: 1.2em;
}

.footer__link + .footer__link,
.footer__sublist + .footer__link {
  margin-top: 23px;
}

.footer__link a {
  display: inline-flex;
  align-items: center;
  color: #2c2c2c;
  transition-property: opacity;
  transition-duration: 0.4s;
}

.footer__link a:hover {
  opacity: 0.6;
}

.footer__link img {
  width: 19px;
  height: 19px;
  margin-left: 8px;
}

/* 別窓アイコンは上の19px固定（circle-arrow用スロット）ではなく共通のem指定を使う。
   .footer__link img (0,1,1) に勝つよう、クラス2つ (0,2,0) で指定する */
.footer__link .out-link-icon {
  width: 0.9em;
  height: 0.9em;
  margin-left: 0.25em;
}

.footer__sublist {
  margin-top: 11px;
}

.footer__sublist li {
  font-size: 12px;
  line-height: 20px;
  letter-spacing: 0.02em;
}

.footer__sublist a {
  color: #2c2c2c;
  transition-property: opacity;
  transition-duration: 0.4s;
}

.footer__sublist a:hover {
  opacity: 0.6;
}

.footer__copyright {
  margin-top: 20px;
  text-align: right;
  font-family: "Kumbh Sans", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.05em;
  color: #2c2c2c;
}

/* ページ上部へ戻る（common.js が .scroll-top に is-visible を同期） */
.scroll-top {
  position: fixed;
  right: 30px;
  bottom: 30px;
  width: 46px;
  z-index: 30;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.scroll-top.is-visible {
  opacity: 1;
  visibility: visible;
}

@media screen and (max-width: 768px) {
  /* SP正式デザイン準拠（Figma TOP SPフレーム 561:2111 のfooter相当ノード群 y=8372〜9109 実測）。
     ロゴ・CONTACTボタン・ナビとも中央寄せではなく左寄せの縦1カラム構成 */
  .footer {
    margin-top: 15vw;
    padding: 8.9vw 0 1.6vw; /* Figma実測: 上39px / コピーライト下端→フッター下端 7px */
    /* SPは画面高いっぱい（100vh）に。中身が100vhより低ければ均等分散、
       高ければmin-heightなので自然に伸びてはみ出さない */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
  }
  .footer__inner {
    width: 83.2%; /* Figma実測: 左右余白 各37px */
    /* ロゴ+CONTACT / ナビ / コピーライト を上下に均等分散 */
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .footer__top {
    display: block;
  }
  .footer__logo {
    width: 60.9vw; /* Figma実測 268px（node 565:5046） */
    margin-left: 0; /* Figma: 中央寄せではなく左寄せ */
    margin-right: 0;
  }
  .footer__contact {
    margin-top: 6.8vw; /* Figma実測 ロゴ下端→30px */
  }
  .footer__contact a {
    width: 55.7vw; /* Figma実測 245px（node 565:4991） */
    height: 12.5vw; /* Figma実測 55px */
    margin-left: 0; /* Figma: 中央寄せではなく左寄せ */
    margin-right: 0;
    font-size: 4.09vw; /* Figma実測 18px */
    padding-right: 3vw;
  }
  .footer__contact-arrow {
    right: 3.2vw; /* Figma実測 14px */
    width: 5.7vw; /* Figma実測 25px */
    height: 5.7vw;
  }
  .footer__nav {
    margin-top: 6.8vw; /* Figma実測 CONTACTボタン下端→30px */
  }
  /* ナビは縦1列。Figmaの並び順（PHILOSOPHY→OUR BUSINESS→サブ→RECRUIT→NEWS&WORKS→BOSS→
     ACCESS→INTERNATIONAL AD→サブ→COMPANY→サブ→Do Branding→Do Direct）がPCカラムのDOM順と
     異なるため、display:contents + order でCSSのみ並び替える（DOM・PC表示は不変） */
  .footer__columns {
    display: flex;
    flex-direction: column;
    gap: 4.55vw; /* Figma実測: 項目ピッチ40px（行高20px + 間隔20px） */
  }
  .footer__column {
    display: contents;
  }
  .footer__column + .footer__column {
    margin-top: 0; /* display:contents では効かないが明示的に打ち消し */
  }
  .footer__link {
    font-size: 5.4vw; /* Figma実測 16px（node 565:4910） */
  }
  .footer__link + .footer__link,
.footer__sublist + .footer__link {
    margin-top: 0; /* 間隔は .footer__columns の gap に集約 */
  }
  .footer__link img {
    width: 4.55vw; /* Figma実測 20px */
    height: 4.55vw;
    margin-left: 0.91vw; /* Figma実測 テキスト→アイコン 4px */
  }
  /* サブリンクは横並び1行（Figma実測: 「- 事業領域　　- 業務フロー」等が1行組、node 565:4919） */
  .footer__sublist {
    display: flex;
    gap: 4.3vw; /* Figma実測 サブリンク間 約19px */
    margin-top: -3.64vw; /* columnsのgap(20px)を打ち消して親リンクとの間隔4pxに（Figma実測） */
  }
  .footer__sublist li {
    font-size: 3.8vw;
    line-height: 1.67;
  }
  /* Figmaの並び順への order 割当（footer.php のDOM＝PCカラム順は変更しない） */
  .footer__column:nth-child(1) > .footer__link:nth-of-type(1) {
    order: 1;
  } /* PHILOSOPHY */
  .footer__column:nth-child(1) > .footer__link:nth-of-type(2) {
    order: 2;
  } /* OUR BUSINESS */
  .footer__column:nth-child(1) > .footer__sublist {
    order: 3;
  } /* - 事業領域 / - 業務フロー */
  .footer__column:nth-child(3) > .footer__link:nth-of-type(1) {
    order: 4;
  } /* RECRUIT */
  .footer__column:nth-child(2) > .footer__link:nth-of-type(1) {
    order: 5;
  } /* NEWS&WORKS */
  .footer__column:nth-child(2) > .footer__link:nth-of-type(2) {
    order: 6;
  } /* BOSS */
  .footer__column:nth-child(4) > .footer__link:nth-of-type(1) {
    order: 7;
  } /* ACCESS */
  .footer__column:nth-child(4) > .footer__link:nth-of-type(2) {
    order: 8;
  } /* INTERNATIONAL AD */
  .footer__column:nth-child(4) > .footer__sublist {
    order: 9;
  } /* - Advertise in N.Y. / L.A. */
  .footer__column:nth-child(3) > .footer__link:nth-of-type(2) {
    order: 10;
  } /* COMPANY */
  .footer__column:nth-child(3) > .footer__sublist {
    order: 11;
  } /* - 社長メッセージ / - 会社概要 */
  .footer__column:nth-child(5) > .footer__link:nth-of-type(1) {
    order: 12;
  } /* Do Branding */
  .footer__column:nth-child(5) > .footer__link:nth-of-type(2) {
    order: 13;
  } /* Do Direct */
  .footer__copyright {
    margin-top: 2.8vw; /* Figma実測 Do Direct下端→21px */
    font-size: 2.3vw; /* Figma実測 10px */
    text-align: right; /* Figma実測: 右寄せ（node 565:4947 右端 x=423） */
  }
  .scroll-top {
    right: 3vw;
    bottom: 8vw;
    width: 10.8vw;
  }
}
/*# sourceMappingURL=common.css.map */