/*********************************************/

@charset "UTF-8";

/*********************************************/

/* ======================================

  テキストシャドウ

========================================= */
.text-shadow {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
}
.text-shadow01 {
  text-shadow: 0.5px 0.5px 1px rgba(0, 0, 0, 0.2);
}
.text-shadow02 {
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}
.text-shadow03 {
  text-shadow: 1px 1px 1.2px rgba(0, 0, 0, 0.28);
}
.text-shadow04{
  text-shadow:
    0 1px 0 rgba(0,0,0,0.4),
    0 2px 8px rgba(0,0,0,0.45),
    0 0 2px rgba(0,0,0,0.65);
}

/* ======================================

  行間

========================================= */
.lh80 { line-height: .8; }
.lh90 { line-height: .9; }
.lh100 { line-height: 1; }
.lh110 { line-height: 1.1; }
.lh120 { line-height: 1.2; }
.lh130 { line-height: 1.3; }
.lh140 { line-height: 1.4; }
.lh150 { line-height: 1.5; }
.lh160 { line-height: 1.6; }
.lh170 { line-height: 1.7; }
.lh180 { line-height: 1.8; }
.lh200 { line-height: 2.0; }
.lh290 { line-height: 2.9; }
.lh320 { line-height: 3.2; }

/* テーブルのセル（th, td）にも直接行間を効かせるための追記 */
.lh150 th, .lh150 td { line-height: 1.5 !important; }
.lh160 th, .lh160 td { line-height: 1.6 !important; }
.lh170 th, .lh170 td { line-height: 1.7 !important; }
.lh180 th, .lh180 td { line-height: 1.8 !important; }
.lh200 th, .lh200 td { line-height: 2.0 !important; }

/*******************************

 テキスト関連

********************************/

/*******************************

 スマホ専用フォントサイズ（spXX）

********************************/
@media (max-width: 767px) {
    .sp08 { font-size: 50% !important; }  /* かなり小さい */
    .sp09 { font-size: 60% !important; }  
    .sp10 { font-size: 70% !important; }
    .sp11 { font-size: 75% !important; }
    .sp12 { font-size: 80% !important; }
    .sp14 { font-size: 85% !important; }
    .sp16 { font-size: 90% !important; }
    .sp18 { font-size: 95% !important; }
    .sp20 { font-size: 100% !important; } /* デフォルト */
    .sp22 { font-size: 110% !important; }
    .sp24 { font-size: 120% !important; }
    .sp26 { font-size: 130% !important; }
    .sp28 { font-size: 140% !important; }
    .sp30 { font-size: 150% !important; }
    .sp32 { font-size: 160% !important; }
    .sp34 { font-size: 170% !important; }
    .sp36 { font-size: 180% !important; }
    .sp38 { font-size: 190% !important; }
    .sp40 { font-size: 200% !important; } /* かなり大きい */
  }
  
  /*******************************

  PC専用フォントサイズ（pcXX）

  ********************************/
  @media (min-width: 1024px) {
    .pc08 { font-size: 0.5em !important; }  /* かなり小さい */
    .pc10 { font-size: 0.75em !important; }
    .pc12 { font-size: 0.85em !important; }
    .pc14 { font-size: 1.0em !important; }  /* デフォルト */
    .pc16 { font-size: 1.2em !important; }
    .pc18 { font-size: 1.4em !important; }
    .pc20 { font-size: 1.6em !important; }
    .pc22 { font-size: 1.8em !important; }
    .pc24 { font-size: 2.0em !important; }
    .pc26 { font-size: 2.2em !important; }
    .pc28 { font-size: 2.4em !important; }
    .pc30 { font-size: 2.6em !important; }
    .pc32 { font-size: 2.8em !important; }
    .pc34 { font-size: 3.0em !important; }
    .pc36 { font-size: 3.2em !important; }
    .pc38 { font-size: 3.4em !important; }
    .pc40 { font-size: 3.6em !important; } /* かなり大きい */
  }
  
  /* font-weight */
  
  .fwel{font-weight: 200;}
  .fwl{font-weight: 300;}
  .fwr{font-weight: 400;}
  .fwm{font-weight: 500;}
  .fwsb{font-weight: 600;}
  .fwb{font-weight: 700;}
  .fweb{font-weight: 800;}
  .fwbk{font-weight: 900;}
  
  /* letter_spacing */
  
  .ls0{letter-spacing: 0;}
  .ls50{letter-spacing: 0.05em;}
  .ls60{letter-spacing: 0.06em;}
  .ls70{letter-spacing: 0.07em;}
  .ls100{letter-spacing: 0.1em;}
  .ls120{letter-spacing: 0.12em;}
  .ls150{letter-spacing: 0.15em;}
  .ls200{letter-spacing: 0.2em;}
  
  /* line_height */
  
  .lh100{line-height: 1;}
  .lh120{line-height: 1.2;}
  .lh130{line-height: 1.3;}
  .lh140{line-height: 1.4;}
  .lh150{line-height: 1.5;}
  .lh160{line-height: 1.6;}
  .lh170{line-height: 1.7;}
  .lh200{line-height: 2.0;}
  
  /* text-align */
  
  .tac{text-align: center;}
  .tal{text-align: left;}
  .tar{ text-align: right;}
  
  .pl5{padding-left: 5px;}
  .pl15{padding-left: 15px;}
  .pl20{padding-left: 20px;}
  .pl25{padding-left: 25px;}
  .pl30{padding-left: 30px;}
  .pl35{padding-left: 35px;}
  .pl40{padding-left: 40px;}
  .pl45{padding-left: 45px;}
  .pl50{padding-left: 50px;}
  .pl60{padding-left: 60px;}
  .pl70{padding-left: 70px;}
  .pl75{padding-left: 70px;}
  .pl80{padding-left: 80px;}
  .pl100{padding-left: 100px;}
  .pl120{padding-left: 120px;}
  .pl150{padding-left: 150px;}
  .pl200{padding-left: 200px;}
  .pr5{padding-right: 5px;}
  .pr10{padding-right: 10px;}
  .pr15{padding-right: 15px;}
  .pr20{padding-right: 20px;}
  .pr25{padding-right: 25px;}
  .pr30{padding-right: 30px;}
  .pr35{padding-right: 35px;}
  .pr40{padding-right: 40px;}
  .pr45{padding-right: 45px;}
  .pr50{padding-right: 50px;}
  .pr60{padding-right: 60px;}
  .pr70{padding-right: 70px;}
  .pr75{padding-right: 70px;}
  .pr80{padding-right: 80px;}
  .pr100{padding-right: 100px;}
  .pr120{padding-right: 120px;}
  .pr150{padding-right: 150px;}
  .pr200{padding-right: 200px;}
  .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;}
  .pt60{padding-top: 60px;}
  .pt70{padding-top: 70px;}
  .pt75{padding-top: 70px;}
  .pt80{padding-top: 80px;}
  .pt90{padding-top: 90px;}
  .pt100{padding-top: 100px;}
  .pt120{padding-top: 120px;}
  .pt150{padding-top: 150px;}
  .pt200{padding-top: 200px;}
  .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;}
  .pb60{padding-bottom: 60px;}
  .pb70{padding-bottom: 70px;}
  .pb75{padding-bottom: 70px;}
  .pb80{padding-bottom: 80px;}
  .pb90{padding-bottom: 90px;}
  .pb100{padding-bottom: 100px;}
  .pb120{padding-bottom: 120px;}
  .pb150{padding-bottom: 150px;}
  .pb200{padding-bottom: 200px;}
  
  /* margin */
  
  .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;}
  .ml75{margin-left: 70px;}
  .ml80{margin-left: 80px;}
  .ml100{margin-left: 100px;}
  .ml120{margin-left: 120px;}
  .ml150{margin-left: 150px;}
  .ml200{margin-left: 200px;}
  .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;}
  .mr70{margin-right: 70px;}
  .mr75{margin-right: 70px;}
  .mr80{margin-right: 80px;}
  .mr100{margin-right: 100px;}
  .mr120{margin-right: 120px;}
  .mr150{margin-right: 150px;}
  .mr200{margin-right: 200px;}
  .mt5{margin-top: 5px;}
  .mt10{margin-top: 10px;}
  .mt15{margin-top: 15px;}
  .mt20{margin-top: 20px;}
  .mt25{margin-top: 25px;}
  .mt30{margin-top: 30px;}
  .mt35{margin-top: 35px;}
  .mt40{margin-top: 40px;}
  .mt45{margin-top: 45px;}
  .mt50{margin-top: 50px;}
  .mt60{margin-top: 60px;}
  .mt70{margin-top: 70px;}
  .mt75{margin-top: 70px;}
  .mt80{margin-top: 80px;}
  .mt90{margin-top: 90px;}
  .mt100{margin-top: 100px;}
  .mt120{margin-top: 120px;}
  .mt150{margin-top: 150px;}
  .mt200{margin-top: 200px;}
  .mb5{margin-bottom: 5px;}
  .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;}
  .mb60{margin-bottom: 60px;}
  .mb70{margin-bottom: 70px;}
  .mb75{margin-bottom: 70px;}
  .mb80{margin-bottom: 80px;}
  .mb90{margin-bottom: 90px;}
  .mb100{margin-bottom: 100px;}
  .mb120{margin-bottom: 120px;}
  .mb150{margin-bottom: 150px;}
  .mb200{margin-bottom: 200px;}
  
  @media (max-width: 800px) {
  
  /* padding */
  
  .pl5{padding-left: calc(5px * 0.8);}
  .pl10{padding-left: calc(10px * 0.8);}
  .pl15{padding-left: calc(15px * 0.8);}
  .pl20{padding-left: calc(20px * 0.8);}
  .pl25{padding-left: calc(25px * 0.8);}
  .pl30{padding-left: calc(30px * 0.8);}
  .pl35{padding-left: calc(35px * 0.8);}
  .pl40{padding-left: calc(40px * 0.8);}
  .pl45{padding-left: calc(45px * 0.8);}
  .pl50{padding-left: calc(50px * 0.8);}
  .pl60{padding-left: calc(60px * 0.8);}
  .pl70{padding-left: calc(70px * 0.8);}
  .pl75{padding-left: calc(70px * 0.8);}
  .pl80{padding-left: calc(80px * 0.8);}
  .pl100{padding-left: calc(100px * 0.8);}
  .pl120{padding-left: calc(120px * 0.8);}
  .pl150{padding-left: calc(150px * 0.8);}
  .pl200{padding-left: calc(200px * 0.8);}
  .pr5{padding-right: calc(5px * 0.8);}
  .pr10{padding-right: calc(10px * 0.8);}
  .pr15{padding-right: calc(15px * 0.8);}
  .pr20{padding-right: calc(20px * 0.8);}
  .pr25{padding-right: calc(25px * 0.8);}
  .pr30{padding-right: calc(30px * 0.8);}
  .pr35{padding-right: calc(35px * 0.8);}
  .pr40{padding-right: calc(40px * 0.8);}
  .pr45{padding-right: calc(45px * 0.8);}
  .pr50{padding-right: calc(50px * 0.8);}
  .pr60{padding-right: calc(60px * 0.8);}
  .pr70{padding-right: calc(70px * 0.8);}
  .pr75{padding-right: calc(70px * 0.8);}
  .pr80{padding-right: calc(80px * 0.8);}
  .pr100{padding-right: calc(100px * 0.8);}
  .pr120{padding-right: calc(120px * 0.8);}
  .pr150{padding-right: calc(150px * 0.8);}
  .pr200{padding-right: calc(200px * 0.8);}
  .pt5{padding-top: calc(5px * 0.8);}
  .pt10{padding-top: calc(10px * 0.8);}
  .pt15{padding-top: calc(15px * 0.8);}
  .pt20{padding-top: calc(20px * 0.8);}
  .pt25{padding-top: calc(25px * 0.8);}
  .pt30{padding-top: calc(30px * 0.8);}
  .pt35{padding-top: calc(35px * 0.8);}
  .pt40{padding-top: calc(40px * 0.8);}
  .pt45{padding-top: calc(45px * 0.8);}
  .pt50{padding-top: calc(50px * 0.8);}
  .pt60{padding-top: calc(60px * 0.8);}
  .pt70{padding-top: calc(70px * 0.8);}
  .pt75{padding-top: calc(70px * 0.8);}
  .pt80{padding-top: calc(80px * 0.8);}
  .pt90{padding-top: calc(90px * 0.8);}
  .pt100{padding-top: calc(100px * 0.8);}
  .pt120{padding-top: calc(120px * 0.8);}
  .pt150{padding-top: calc(150px * 0.8);}
  .pt200{padding-top: calc(200px * 0.8);}
  .pb5{padding-bottom: calc(5px * 0.8);}
  .pb10{padding-bottom: calc(10px * 0.8);}
  .pb15{padding-bottom: calc(15px * 0.8);}
  .pb20{padding-bottom: calc(20px * 0.8);}
  .pb25{padding-bottom: calc(25px * 0.8);}
  .pb30{padding-bottom: calc(30px * 0.8);}
  .pb35{padding-bottom: calc(35px * 0.8);}
  .pb40{padding-bottom: calc(40px * 0.8);}
  .pb45{padding-bottom: calc(45px * 0.8);}
  .pb50{padding-bottom: calc(50px * 0.8);}
  .pb60{padding-bottom: calc(60px * 0.8);}
  .pb70{padding-bottom: calc(70px * 0.8);}
  .pb75{padding-bottom: calc(70px * 0.8);}
  .pb80{padding-bottom: calc(80px * 0.8);}
  .pb90{padding-bottom: calc(90px * 0.8);}
  .pb100{padding-bottom: calc(100px * 0.8);}
  .pb120{padding-bottom: calc(120px * 0.8);}
  .pb150{padding-bottom: calc(150px * 0.8);}
  .pb200{padding-bottom: calc(200px * 0.8);}
  
  /* margin */
  
  .ml5{margin-left: calc(5px * 0.8);}
  .ml10{margin-left: calc(10px * 0.8);}
  .ml15{margin-left: calc(15px * 0.8);}
  .ml20{margin-left: calc(20px * 0.8);}
  .ml25{margin-left: calc(25px * 0.8);}
  .ml30{margin-left: calc(30px * 0.8);}
  .ml35{margin-left: calc(35px * 0.8);}
  .ml40{margin-left: calc(40px * 0.8);}
  .ml45{margin-left: calc(45px * 0.8);}
  .ml50{margin-left: calc(50px * 0.8);}
  .ml60{margin-left: calc(60px * 0.8);}
  .ml70{margin-left: calc(70px * 0.8);}
  .ml75{margin-left: calc(70px * 0.8);}
  .ml80{margin-left: calc(80px * 0.8);}
  .ml100{margin-left: calc(100px * 0.8);}
  .ml120{margin-left: calc(120px * 0.8);}
  .ml150{margin-left: calc(150px * 0.8);}
  .ml200{margin-left: calc(200px * 0.8);}
  .mr5{margin-right: calc(5px * 0.8);}
  .mr10{margin-right: calc(10px * 0.8);}
  .mr15{margin-right: calc(15px * 0.8);}
  .mr20{margin-right: calc(20px * 0.8);}
  .mr25{margin-right: calc(25px * 0.8);}
  .mr30{margin-right: calc(30px * 0.8);}
  .mr35{margin-right: calc(35px * 0.8);}
  .mr40{margin-right: calc(40px * 0.8);}
  .mr45{margin-right: calc(45px * 0.8);}
  .mr50{margin-right: calc(50px * 0.8);}
  .mr60{margin-right: calc(60px * 0.8);}
  .mr70{margin-right: calc(70px * 0.8);}
  .mr75{margin-right: calc(70px * 0.8);}
  .mr80{margin-right: calc(80px * 0.8);}
  .mr100{margin-right: calc(100px * 0.8);}
  .mr120{margin-right: calc(120px * 0.8);}
  .mr150{margin-right: calc(150px * 0.8);}
  .mr200{margin-right: calc(200px * 0.8);}
  .mt5{margin-top: calc(5px * 0.8);}
  .mt10{margin-top: calc(10px * 0.8);}
  .mt15{margin-top: calc(15px * 0.8);}
  .mt20{margin-top: calc(20px * 0.8);}
  .mt25{margin-top: calc(25px * 0.8);}
  .mt30{margin-top: calc(30px * 0.8);}
  .mt35{margin-top: calc(35px * 0.8);}
  .mt40{margin-top: calc(40px * 0.8);}
  .mt45{margin-top: calc(45px * 0.8);}
  .mt50{margin-top: calc(50px * 0.8);}
  .mt60{margin-top: calc(60px * 0.8);}
  .mt70{margin-top: calc(70px * 0.8);}
  .mt75{margin-top: calc(70px * 0.8);}
  .mt80{margin-top: calc(80px * 0.8);}
  .mt90{margin-top: calc(90px * 0.8);}
  .mt100{margin-top: calc(100px * 0.8);}
  .mt120{margin-top: calc(120px * 0.8);}
  .mt150{margin-top: calc(150px * 0.8);}
  .mt200{margin-top: calc(200px * 0.8);}
  .mb5{margin-bottom: calc(5px * 0.8);}
  .mb10{margin-bottom: calc(10px * 0.8);}
  .mb15{margin-bottom: calc(15px * 0.8);}
  .mb20{margin-bottom: calc(20px * 0.8);}
  .mb25{margin-bottom: calc(25px * 0.8);}
  .mb30{margin-bottom: calc(30px * 0.8);}
  .mb35{margin-bottom: calc(35px * 0.8);}
  .mb40{margin-bottom: calc(40px * 0.8);}
  .mb45{margin-bottom: calc(45px * 0.8);}
  .mb50{margin-bottom: calc(50px * 0.8);}
  .mb60{margin-bottom: calc(60px * 0.8);}
  .mb70{margin-bottom: calc(70px * 0.8);}
  .mb75{margin-bottom: calc(70px * 0.8);}
  .mb80{margin-bottom: calc(80px * 0.8);}
  .mb90{margin-bottom: calc(90px * 0.8);}
  .mb100{margin-bottom: calc(100px * 0.8);}
  .mb120{margin-bottom: calc(120px * 0.8);}
  .mb150{margin-bottom: calc(150px * 0.8);}
  .mb200{margin-bottom: calc(200px * 0.8);}
  
  }
  
  @media (max-width: 560px) {
  
  /* padding */
  
  .pl5{padding-left: calc(5px * 0.6);}
  .pl10{padding-left: calc(10px * 0.6);}
  .pl15{padding-left: calc(15px * 0.6);}
  .pl20{padding-left: calc(20px * 0.6);}
  .pl25{padding-left: calc(25px * 0.6);}
  .pl30{padding-left: calc(30px * 0.6);}
  .pl35{padding-left: calc(35px * 0.6);}
  .pl40{padding-left: calc(40px * 0.6);}
  .pl45{padding-left: calc(45px * 0.6);}
  .pl50{padding-left: calc(50px * 0.6);}
  .pl60{padding-left: calc(60px * 0.6);}
  .pl70{padding-left: calc(70px * 0.6);}
  .pl75{padding-left: calc(70px * 0.6);}
  .pl80{padding-left: calc(80px * 0.6);}
  .pl100{padding-left: calc(100px * 0.6);}
  .pl120{padding-left: calc(120px * 0.6);}
  .pl150{padding-left: calc(150px * 0.6);}
  .pl200{padding-left: calc(200px * 0.6);}
  .pr5{padding-right: calc(5px * 0.6);}
  .pr10{padding-right: calc(10px * 0.6);}
  .pr15{padding-right: calc(15px * 0.6);}
  .pr20{padding-right: calc(20px * 0.6);}
  .pr25{padding-right: calc(25px * 0.6);}
  .pr30{padding-right: calc(30px * 0.6);}
  .pr35{padding-right: calc(35px * 0.6);}
  .pr40{padding-right: calc(40px * 0.6);}
  .pr45{padding-right: calc(45px * 0.6);}
  .pr50{padding-right: calc(50px * 0.6);}
  .pr60{padding-right: calc(60px * 0.6);}
  .pr70{padding-right: calc(70px * 0.6);}
  .pr75{padding-right: calc(70px * 0.6);}
  .pr80{padding-right: calc(80px * 0.6);}
  .pr100{padding-right: calc(100px * 0.6);}
  .pr120{padding-right: calc(120px * 0.6);}
  .pr150{padding-right: calc(150px * 0.6);}
  .pr200{padding-right: calc(200px * 0.6);}
  .pt5{padding-top: calc(5px * 0.6);}
  .pt10{padding-top: calc(10px * 0.6);}
  .pt15{padding-top: calc(15px * 0.6);}
  .pt20{padding-top: calc(20px * 0.6);}
  .pt25{padding-top: calc(25px * 0.6);}
  .pt30{padding-top: calc(30px * 0.6);}
  .pt35{padding-top: calc(35px * 0.6);}
  .pt40{padding-top: calc(40px * 0.6);}
  .pt45{padding-top: calc(45px * 0.6);}
  .pt50{padding-top: calc(50px * 0.6);}
  .pt60{padding-top: calc(60px * 0.6);}
  .pt70{padding-top: calc(70px * 0.6);}
  .pt75{padding-top: calc(70px * 0.6);}
  .pt80{padding-top: calc(80px * 0.6);}
  .pt90{padding-top: calc(90px * 0.6);}
  .pt100{padding-top: calc(100px * 0.6);}
  .pt120{padding-top: calc(120px * 0.6);}
  .pt150{padding-top: calc(150px * 0.6);}
  .pt200{padding-top: calc(200px * 0.6);}
  .pb5{padding-bottom: calc(5px * 0.6);}
  .pb10{padding-bottom: calc(10px * 0.6);}
  .pb15{padding-bottom: calc(15px * 0.6);}
  .pb20{padding-bottom: calc(20px * 0.6);}
  .pb25{padding-bottom: calc(25px * 0.6);}
  .pb30{padding-bottom: calc(30px * 0.6);}
  .pb35{padding-bottom: calc(35px * 0.6);}
  .pb40{padding-bottom: calc(40px * 0.6);}
  .pb45{padding-bottom: calc(45px * 0.6);}
  .pb50{padding-bottom: calc(50px * 0.6);}
  .pb60{padding-bottom: calc(60px * 0.6);}
  .pb70{padding-bottom: calc(70px * 0.6);}
  .pb75{padding-bottom: calc(70px * 0.6);}
  .pb80{padding-bottom: calc(80px * 0.6);}
  .pb90{padding-bottom: calc(90px * 0.6);}
  .pb100{padding-bottom: calc(100px * 0.6);}
  .pb120{padding-bottom: calc(120px * 0.6);}
  .pb150{padding-bottom: calc(150px * 0.6);}
  .pb200{padding-bottom: calc(200px * 0.6);}
  
  /* margin */
  
  .ml5{margin-left: calc(5px * 0.6);}
  .ml10{margin-left: calc(10px * 0.6);}
  .ml15{margin-left: calc(15px * 0.6);}
  .ml20{margin-left: calc(20px * 0.6);}
  .ml25{margin-left: calc(25px * 0.6);}
  .ml30{margin-left: calc(30px * 0.6);}
  .ml35{margin-left: calc(35px * 0.6);}
  .ml40{margin-left: calc(40px * 0.6);}
  .ml45{margin-left: calc(45px * 0.6);}
  .ml50{margin-left: calc(50px * 0.6);}
  .ml60{margin-left: calc(60px * 0.6);}
  .ml70{margin-left: calc(70px * 0.6);}
  .ml75{margin-left: calc(70px * 0.6);}
  .ml80{margin-left: calc(80px * 0.6);}
  .ml100{margin-left: calc(100px * 0.6);}
  .ml120{margin-left: calc(120px * 0.6);}
  .ml150{margin-left: calc(150px * 0.6);}
  .ml200{margin-left: calc(200px * 0.6);}
  .mr5{margin-right: calc(5px * 0.6);}
  .mr10{margin-right: calc(10px * 0.6);}
  .mr15{margin-right: calc(15px * 0.6);}
  .mr20{margin-right: calc(20px * 0.6);}
  .mr25{margin-right: calc(25px * 0.6);}
  .mr30{margin-right: calc(30px * 0.6);}
  .mr35{margin-right: calc(35px * 0.6);}
  .mr40{margin-right: calc(40px * 0.6);}
  .mr45{margin-right: calc(45px * 0.6);}
  .mr50{margin-right: calc(50px * 0.6);}
  .mr60{margin-right: calc(60px * 0.6);}
  .mr70{margin-right: calc(70px * 0.6);}
  .mr75{margin-right: calc(70px * 0.6);}
  .mr80{margin-right: calc(80px * 0.6);}
  .mr100{margin-right: calc(100px * 0.6);}
  .mr120{margin-right: calc(120px * 0.6);}
  .mr150{margin-right: calc(150px * 0.6);}
  .mr200{margin-right: calc(200px * 0.6);}
  .mt5{margin-top: calc(5px * 0.6);}
  .mt10{margin-top: calc(10px * 0.6);}
  .mt15{margin-top: calc(15px * 0.6);}
  .mt20{margin-top: calc(20px * 0.6);}
  .mt25{margin-top: calc(25px * 0.6);}
  .mt30{margin-top: calc(30px * 0.6);}
  .mt35{margin-top: calc(35px * 0.6);}
  .mt40{margin-top: calc(40px * 0.6);}
  .mt45{margin-top: calc(45px * 0.6);}
  .mt50{margin-top: calc(50px * 0.6);}
  .mt60{margin-top: calc(60px * 0.6);}
  .mt70{margin-top: calc(70px * 0.6);}
  .mt75{margin-top: calc(70px * 0.6);}
  .mt80{margin-top: calc(80px * 0.6);}
  .mt90{margin-top: calc(90px * 0.6);}
  .mt100{margin-top: calc(100px * 0.6);}
  .mt120{margin-top: calc(120px * 0.6);}
  .mt150{margin-top: calc(150px * 0.6);}
  .mt200{margin-top: calc(200px * 0.6);}
  .mb5{margin-bottom: calc(5px * 0.6);}
  .mb10{margin-bottom: calc(10px * 0.6);}
  .mb15{margin-bottom: calc(15px * 0.6);}
  .mb20{margin-bottom: calc(20px * 0.6);}
  .mb25{margin-bottom: calc(25px * 0.6);}
  .mb30{margin-bottom: calc(30px * 0.6);}
  .mb35{margin-bottom: calc(35px * 0.6);}
  .mb40{margin-bottom: calc(40px * 0.6);}
  .mb45{margin-bottom: calc(45px * 0.6);}
  .mb50{margin-bottom: calc(50px * 0.6);}
  .mb60{margin-bottom: calc(60px * 0.6);}
  .mb70{margin-bottom: calc(70px * 0.6);}
  .mb75{margin-bottom: calc(70px * 0.6);}
  .mb80{margin-bottom: calc(80px * 0.6);}
  .mb90{margin-bottom: calc(90px * 0.6);}
  .mb100{margin-bottom: calc(100px * 0.6);}
  .mb120{margin-bottom: calc(120px * 0.6);}
  .mb150{margin-bottom: calc(150px * 0.6);}
  .mb200{margin-bottom: calc(200px * 0.6);}
  
  }
  
  /* border-radius */
  
  .brad5{border-radius: 5px;}
  .brad10{border-radius: 10px;}
  .brad15{border-radius: 15px;}
  .brad20{border-radius: 20px;}
  .brad25{border-radius: 25px;}
  .brad30{border-radius: 30px;}
  .brad50{border-radius: 50px;}
  .bradh{border-radius: 50%;}

/* ======================================

スマホヘッダー ハンバーガーメニュー大きく

========================================= */
  .c-iconBtn__icon {
    font-size: 25.05px;
}

/* ======================================

スマホヘッダー お問い合わせボタン

========================================= */

@media (max-width: 782px){

  /* ボタン本体：艶のある高級オレンジ */
  .l-header__customBtn{
    background:
      linear-gradient(180deg,
        #ff7a00 0%,
        #ff7a00 45%,
        #e66100 100%
      );
    border: 1px solid rgba(255,255,255,.25);
    color: #fff;
    width: auto;
    min-width: 88px;            /* ←108 → 少しだけ縮小 */
    padding-inline: 1,7px;       /* ←12 → 少しだけ詰める */
    border-radius: 12px;
    letter-spacing: .02em;

    /* 艶ハイライト */
    position: relative;
    overflow: hidden;
    box-shadow:
      0 8px 20px rgba(0,0,0,.18),
      inset 0 1px 0 rgba(255,255,255,.25);
    margin-left: 12px;           /* ←これが本命：ロゴと距離を作る */
  }

  /* 上部に光の反射を入れて“きらっ”感 */
  .l-header__customBtn::before{
    content:"";
    position:absolute;
    inset:0;
    background:
      linear-gradient(180deg,
        rgba(255,255,255,.45) 0%,
        rgba(255,255,255,.15) 25%,
        rgba(255,255,255,0) 55%
      );
    pointer-events:none;
    border-radius: 12px;
    z-index: 1;
  }

  /* ラベル（お問い合わせ）の整形：詰まり・上下余白を最適化 */
  .c-iconBtn__label{
    display: block;
    font-size: 12px;
    font-weight: 700;
    transform: none;
    width: 100%;
    padding-top: 2.05px;
    line-height: 1.1;
    opacity: .98;
  }

  /* タップ時の反応（hover/active）はそのまま */
  .l-header__customBtn:hover{
    filter: brightness(1.04);
  }
  /* 押したときだけ少し沈む */
  .l-header__customBtn:active{
    transform: translateY(1px);
    box-shadow:
      0 5px 14px rgba(0,0,0,.18),
      inset 0 1px 0 rgba(255,255,255,.2);
  }

}

/* ======================================

  最新情報・お知らせのカスタマイズ　

========================================= */
/** トップページのお知らせ一覧 **/
/* 日付とカテゴリー並べ替え */
.top-newslist .p-postList__cat {
    order: 1;
    }
    .top-newslist .p-postList__times.c-postTimes.u-thin {
    order: 2;
    }
    /* 日付とカテゴリーのアイコン非表示 */
    .top-newslist time.c-postTimes__posted.icon-posted::before,.top-newslist span.p-postList__cat.icon-folder::before{
    display: none;
    }
    /* 日付とカテゴリーの文字サイズ */
    .top-newslist .p-postList__cat,.top-newslist time.c-postTimes__posted {
    font-size: 15px;
    }
    /* カテゴリーの装飾 */
/* =========================
 お知らせタグ：濃く・くっきり（シンプル）
========================= */
.top-newslist .p-postList__cat{
  background:#eb5403 !important;  /* ←濃いオレンジ */
  color:#fff !important;
  border-radius:6px;
  padding:4.6px 10px;
  font-weight:500;
}

.top-newslist .p-postList__cat{
  text-shadow:0 1px 0 rgba(0,0,0,.15);
}

/* 保険：li全体ホバーでも反応させる */
.top-newslist .p-postList__item:hover .p-postList__cat{
  background:#EE7A18 !important;
  filter: brightness(1.05) saturate(1.06);
  box-shadow:
    0 8px 16px rgba(0,0,0,.16),
    inset 0 1px 0 rgba(255,255,255,.34),
    inset 0 -1px 0 rgba(0,0,0,.18) !important;
}

  .p-postList .p-postList__title {
    background: none;
    border: none;
    color: inherit;
    display: block;
    font-weight: 700;
    line-height: 1.5;
    margin: 0;
    padding: 0;
    text-align: center;
  }
  
  .-type-simple .p-postList__title {
    font-size: 1em;
  }

  .-type-simple .p-postList__link {
    border-bottom: 1px solid #ccc;
    display: block;
    padding: 1em .25em;
    transition: background-color .25s;
}

/* ======================================

  スマホでも固定背景を有効に〈カバーの固定背景〉

========================================= */
.wp-block-cover.has-parallax {
    -webkit-clip-path: inset(0);
            clip-path: inset(0);
  }
  
  .wp-block-cover__image-background.has-parallax {
   position: fixed;
   top: 0;
   left: 0;
   z-index: -1;
  }

/* ======================================

目次・ページトップの表示をOFF

========================================= */
#main_content .p-toc {
    width: 92%;
    display: none;
}

/* ======================================

ヘッダー電話ボタンのスタイル

========================================= */
.is-style-btn_line a {
    background: none;
    border: 2.55px solid;
    color: #0071bc;
    position: relative;
    transition: background-color .25s;
}

/* btn_line の反転を止める */
.is-style-btn_line a:hover{
    background: none !important;
    color: #0071bc !important;
    border-color: #0071bc !important;
}

.is-style-btn_line,
.is-style-btn_line a{
  border-radius: 6px !important;
}

.is-style-btn_line a{
  box-shadow:0 1.5px 6px rgba(0,0,0,.14);
}

/* ヘッダー電話ボタン：高さだけ詰める */
.is-style-btn_line a{
  padding-top: 9px !important;
  padding-bottom: 9px !important;
}

/* 電話ボタンの2行の行間を詰める */
.ins-header-tel .swell-block-button__link span{
  line-height: 1.19;
  letter-spacing: 0.06em;
}

/* 改行の上下余白削る */
.ins-header-tel .swell-block-button__link br{
  display:block;
  margin: 2px 0;
}

/* 小さい営業時間文字さらに詰める */
.ins-header-tel .u-fz-xs{
  line-height:1.05;
}

/* ======================================

ヘッダー問い合わせボタンのスタイル

========================================= */
/* 通常 */
.contact-top .swell-block-button.blue_ > a.swell-block-button__link{
    background:#EE7A18 !important;
    transition:
      transform .35s cubic-bezier(.22,.61,.36,1),
      background-color .25s ease,
      box-shadow .25s ease;
      border-radius: 4px !important;
  }
  
  .contact-top .swell-block-button.blue_ a span{
    line-height:1.3;
  }
  
  /* hover */
  .contact-top .swell-block-button.blue_ > a.swell-block-button__link:hover{
    background:#E36C0A !important;   /* 少し明るく */
    transform: translateX(4px);
    box-shadow:0 6px 16px rgba(0,0,0,.12);
  }
  
/* ======================================

グローバルナビスタイル

========================================= */
.c-gnav>.menu-item>a .ttl {
  display: block;
  font-size: 24px;
  font-weight: 600;
}

.c-gnav>.menu-item {
  height: 100%;
  position: relative;
  margin-right: 10px;
}

/* =========================

メインビジュアル表示ボタン・共通ホバー

========================= */
.ark-block-button.is-btn-fill > a{
    transition:
      transform .28s cubic-bezier(.22,.61,.36,1),
      box-shadow .28s,
      filter .28s,
      background-color .28s;
  }
  
  /* --- マウス乗せた時 --- */
  .ark-block-button.is-btn-fill > a:hover{
    transform: translateX(6px);
    box-shadow: 0 10px 26px rgba(0,0,0,.22);
    filter: brightness(1.08);
  }
  
  /* --- 押した瞬間 --- */
  .ark-block-button.is-btn-fill > a:active{
    transform: translateX(3px);
    box-shadow: 0 4px 10px rgba(0,0,0,.15);
  }

  /* 1段目だけ強調 */
.ark-block-button[data-hover="dark"] > a:hover{
    transform: translateX(8px);
    box-shadow: 0 16px 32px rgba(0,0,0,.22);
    filter: brightness(1.12);
  }

  .ark-block-button__icon{
    transition: transform .28s;
  }
  
  .ark-block-button > a:hover .ark-block-button__icon{
    transform: translateX(5px);
  }

/* =========================

メインビジュアル表示ボタン・通常時を少し浮かす

========================= */
.ark-block-button.is-btn-fill > a{
    transform: translateY(-1px);
    box-shadow: 0 2.75px 8px rgba(20,40,70,.14);
    transition:
      transform .28s cubic-bezier(.22,.61,.36,1),
      box-shadow .28s,
      filter .28s;
  }
  
  /* --- ホバー時（前に出る） --- */
  .ark-block-button.is-btn-fill > a:hover{
    transform: translateY(-3px) translateX(6px);
    box-shadow: 0 12px 28px rgba(0,0,0,.18);
    filter: brightness(1.06);
  }
  
  /* --- 押した時（少し沈む） --- */
  .ark-block-button.is-btn-fill > a:active{
    transform: translateY(0px) translateX(3px);
    box-shadow: 0 3px 8px rgba(0,0,0,.15);
  }

/* =========================

メインビジュアル右側ボタン 

========================= */

/* 下3つ */
.ark-block-button.is-btn-fill > a{
  background-color: rgba(70,92,122,0.78) !important;
  backdrop-filter: blur(1.5px);
  -webkit-backdrop-filter: blur(1.5px);
}
.ark-block-button.is-btn-fill > a:hover{
  background-color: rgba(70,92,122,0.92) !important;
}

/* =========================

1段目だけ強調

========================= */
.ark-block-button[data-hover="dark"] > a{
  background-color: rgba(46,86,150,0.92) !important;
}
.ark-block-button[data-hover="dark"] > a:hover{
  background-color: rgba(36,74,138,1) !important;
}

/* ===============================

  スマホ・メインビジュアル表示ボタン

=============================== */

@media (max-width: 782px){

  /* ボタン同士の隙間（gap）を詰める */
  .sp-heroBtns-tight .ark-block-buttons{
    gap: .36rem !important;  /* 0.25rem → 0.16rem */
  }

  /* ボタン自体の上下パディングを詰める */
  .sp-heroBtns-tight .ark-block-button__link{
    padding-block: 10px !important; /* ここを 9px〜12pxで微調整 */
    min-height: 0 !important;
  }

  /* 文字の行間が広く見える場合の保険 */
  .sp-heroBtns-tight .ark-block-button__text{
    line-height: 1.15;
  }

  /* ボタンの角丸が大きく見える時に、気持ちだけ締める（任意） */
  .sp-heroBtns-tight .ark-block-button{
    --arkb-btn-radius: 2px;
  }
}

/* ===============================

  固定フロートボタン（このグループだけ）

=============================== */
/* グループ全体を左下固定 */
.fixed-float-btn{
    position: fixed !important;
    left: 2px !important;
    bottom: 22px !important;
    z-index: 999999 !important;
  
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  
    max-width: 260px !important;
  }
  
  /* 各ボタンの余白をコンパクト化 */
  .fixed-float-btn .ark-block-button__link{
    padding: 12px 18px !important;   /* ←小さめ */
    font-size: 15px !important;
    line-height: 1.3 !important;
  }
  
  /* ボタンの幅を本文邪魔しないサイズに */
  .fixed-float-btn .ark-block-button{
    width: auto !important;
    max-width: 240px !important;
  }
  
  /* 影だけ少し浮かせる */
  .fixed-float-btn .ark-block-button__link{
    box-shadow: 0 10px 24px rgba(0,0,0,.16) !important;
  }
  
  /* ホバー時ほんの少し浮く */
  .fixed-float-btn .ark-block-button__link:hover{
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(0,0,0,.22);
  }
  
  /* スマホは少し内側に寄せる */
  @media (max-width: 768px){
    .fixed-float-btn{
      left: 12px !important;
      bottom: 12px !important;
      max-width: 200px !important;
    }
    
    .fixed-float-btn .ark-block-button__link{
      padding: 10px 14px !important;
      font-size: 14px !important;
    }
  }

  .fixed-float-btn{
    opacity: .92;
  }
  .fixed-float-btn:hover{
    opacity: 1;
  }
 
  /* 最初は隠す */
.fixed-float-btn{
    opacity: 0;
    transform: translateY(20px);
    pointer-events: none;
    transition: all .55s ease;
  }
  
  /* 表示状態 */
  .fixed-float-btn.is-show{
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  /* ===============================

  固定フロートボタンの色指定（メインビジュアルと統一）

=============================== */

/* 下3つ（通常ボタン）の色とすりガラス効果 */
.fixed-float-btn .ark-block-button.is-btn-fill > a {
  background-color: rgba(58,74,93,0.72) !important;
  backdrop-filter: blur(1.5px);
  -webkit-backdrop-filter: blur(1.5px);
}
.fixed-float-btn .ark-block-button.is-btn-fill > a:hover {
  background-color: rgba(58,74,93,92) !important;
}

/* 1段目（強調・dark）の色 */
.fixed-float-btn .ark-block-button[data-hover="dark"] > a {
  background-color: rgba(46,86,150,0.92) !important;
}
.fixed-float-btn .ark-block-button[data-hover="dark"] > a:hover {
  background-color: rgba(46,86,150,0.92) !important;
}

/* =========================

  固定フロートボタン・スマホ非表示

========================= */
@media (max-width: 1024px){
  .fixed-float-btn{
    display:none !important;
  }
}

 /* =========================

  Mouse Stalker

========================= */
#stkr{
  position: fixed;
  top: 0;
  left: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  pointer-events: none;
  background: rgba(238,122,24,0.35);
  z-index: 999999999;
  isolation: isolate;
  transform: translate3d(0,0,0);
  transition: transform 0.06s ease-out;
}

/* 通常 */
#stkr{
  background: rgba(238,122,24,0.35);
}

/* リンク上で色変更 */
#stkr.is-hover{
  background: rgba(30,70,140,0.38); /* 濃いネイビー系 */
}

/* スマホ・タブレットではマウスストーカーを消す */
@media (max-width: 768px) {
  #stkr {
    display: none !important;
  }
}

/* =========================

  フッター・PC

========================= */
/* 文字色 */
.l-footer__nav a{
  color:#5c6470;
}

.l-footer__nav a:hover{
  color:#2e3f8f;
}

/* コピーライト */
.l-footer .copyright{
  color:#8a9099;
  font-size:13px;
}

/* フッター背景 */
.l-footer{
  background:#f8faff;
  border-top:1px solid #dcdce1;
}

/* ウィジェットエリア削除 */
.l-footer__widgetArea{
  display:none;
}

/* =========================

  フッター・スマホ

========================= */
@media (max-width: 599px){

  /* フッターメニュー全体 */
  .l-footer__nav{
    padding: 14px 12px;
  }

  /* ulを2列グリッドにする */
  .l-footer__nav ul{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 10px;                 /* 縦 横 */
    margin: 0;
    padding: 0;
    list-style: none;
  }

  /* liの余計な装飾があれば無効化（念のため） */
  .l-footer__nav li{
    margin: 0;
    padding: 0;
  }

  /* aを「ボタンっぽく」してタップしやすく */
  .l-footer__nav a{
    display: block;
    text-align: center;
    font-size: 14px;
    line-height: 1.25;
    padding: 10px 8px;
    border: 1px solid #e3e6ef;
    border-radius: 10px;
    background: #ffffff;
    color:#2f3a46;                 /* SPは少し濃くして視認性UP */
    text-decoration: none;
    word-break: keep-all;          /* 変な所で折れにくく */
  }

  .l-footer__nav a:hover{
    color:#2e3f8f;
  }
}

/* さらに小さい端末は1列に（任意だけど読みやすい） */
@media (max-width: 360px){
  .l-footer__nav ul{
    grid-template-columns: 1fr;
  }
}

/* ===============================

  メインビジュアル・フィルター

=============================== */
.p-mainVisual .c-filterLayer::before{
  content:"";
  position:absolute;
  inset:0;

  background: linear-gradient(
    to bottom,
    rgba(230,240,255,0.62) 0%,   /* ← +0.07 */
    rgba(242,246,251,0.38) 35%,  /* ← +0.06 */
    rgba(242,246,251,0.16) 65%,  /* ← +0.04 */
    rgba(242,246,251,0.00) 100%
  );
}

/* ===============================

  お知らせバー

=============================== */
/* インフォバー全体のトーン */
.c-infoBar{
  font-size: 15px;
  letter-spacing: .02em;
}

/* タグラベル */
.c-infoBar .infoTag{
  display:inline-block;
  padding: 3px 10px;
  margin-right: 8px;
  border-radius: 999px;
  background: rgba(0,113,188,.10);
  color:#0f4c81;
  font-weight: 700;
  font-size: 12.5px;
  line-height: 1;
  vertical-align: middle;
}

/* 区切り「・」を薄く */
.c-infoBar .infoSep{
  margin: 0 10px;
  color: rgba(0,0,0,.25);
}

.c-infoBar__text {
  font-weight: 600;
  padding: 8px 0;
  z-index: 1;
  letter-spacing: 1.08px;
  font-size: 1.07em;

  text-shadow: 0 0.5px 1.5px rgba(0,0,0,0.1);
}

/* ===============================

  お知らせバーMAP

=============================== */
/* MAPボタンにアイコンを直置き（擬似要素なし） */
.c-infoBar .c-infoBar__btn{
  /* 既存の見た目は残しつつ */
  background-image: url("https://ohyamanet.info/wp-content/uploads/2026/02/map.png") !important;
  background-repeat: no-repeat !important;
  background-size: 16px 16px !important;
  background-position: 14px 50% !important;

  /* アイコン分だけ左に余白を作る */
  padding-left: 36px !important;

  /* 高さズレ防止 */
  display: inline-block !important;
}

/* ===============================

  お知らせバー：スマホは「営業時間」だけ表示（所在地・MAP非表示）

=============================== */
@media (max-width: 782px){

  /* MAPボタンを消す */
  .c-infoBar .c-infoBar__btn{
    display: none !important;
  }

  /* 「・」以降（所在地〜住所）を消す */
  .c-infoBar .infoSep{
    display: none !important;
  }
  .c-infoBar .infoSep ~ *{
    display: none !important;
  }

  /* ついでにスマホで詰める（任意） */
  .c-infoBar{
    font-size: 14px;
  }
  .c-infoBar__text{
    padding: 6px 0;
    letter-spacing: .02em;
    font-size: 1em;
    text-shadow: none;
  }
  .c-infoBar .infoTag{
    padding: 2.5px 8px;
    margin-right: 6px;
    font-size: 12px;
    margin-bottom: 2.5px;
  }
}

/* ===============================

  グローバルメニュー・サブメニュー

=============================== */
/* ========================= 「会社概要」サブメニューをLIG風メガメニュー化（CSSのみ） 対象：.sub-menu ========================= */
/* サブメニューの箱を“青いパネル”に */
.l-header .sub-menu,
.l-fixHeader .sub-menu{
  padding: 18px !important;
  min-width: min(740px, 92vw) !important;
  border-radius: 18px !important;
  background: linear-gradient(180deg, rgba(7,60,138,.96), rgba(7,60,138,.90)) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  box-shadow: 0 24px 70px rgba(0,0,0,.24) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* 矢印（吹き出し） */
.l-header .sub-menu::before,
.l-fixHeader .sub-menu::before{
  content:"";
  position:absolute;
  top:-9px;
  left:50%;
  transform:translateX(-50%) rotate(45deg);
  width:16px;
  height:16px;
  background: rgba(7,60,138,.95);
  border-left: 1px solid rgba(255,255,255,.12);
  border-top: 1px solid rgba(255,255,255,.12);
}

/* ulをグリッド化（タイル並び） */
.l-header .sub-menu,
.l-fixHeader .sub-menu{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

/* li余白ゼロ */
.l-header .sub-menu > li,
.l-fixHeader .sub-menu > li{
  margin: 0 !important;
}

/* a を“タイル”に */
.l-header .sub-menu > li > a,
.l-fixHeader .sub-menu > li > a{
  display: grid !important;
  justify-items: center;
  align-content: start;
  gap: 10px;
  padding: 16px 12px !important;
  border-radius: 16px !important;
  text-decoration: none !important;
  border: 1px solid rgba(255,255,255,.55) !important;
  transition: .16s ease;
  color: rgba(255,255,255,.92) !important;
  font-weight: 800 !important;
  letter-spacing: .02em;
  line-height: 1.2 !important;
}

/* =================================================================

   通常ヘッダー・追従ヘッダー・全状態の完全統合オーバーライド

   ================================================================= */

/* bodyタグを起点にすることで、SWELL無効化する */
body .c-gnav .sub-menu > li > a,
body .c-gnav .sub-menu > li > a[aria-current="page"],
body .c-gnav .sub-menu > li.current-menu-item > a,
body .c-gnav .sub-menu > li.current_page_item > a {
  background: linear-gradient(
    180deg,
    rgba(255,255,255,.18),
    rgba(255,255,255,.10)
  ) !important;
  border: 1px solid rgba(255,255,255,.55) !important;
  box-shadow: none !important;
  outline: none !important;
  color: rgba(255,255,255,.92) !important;
}

body .c-gnav .menu-item-has-children:hover .sub-menu > li > a,
body .c-gnav .menu-item-has-children:hover .sub-menu > li > a[aria-current="page"],
body .c-gnav .menu-item-has-children:hover .sub-menu > li.current-menu-item > a {
  background: linear-gradient(
    180deg,
    rgba(255,255,255,.18),
    rgba(255,255,255,.10)
  ) !important;
  border: 1px solid rgba(255,255,255,.55) !important;
  box-shadow: none !important;
}

/* SWELLが入れる「>」系があれば消す */
.l-header .sub-menu > li > a::before,
.l-fixHeader .sub-menu > li > a::before{
  content:"" !important;
  display:none !important;
}

/* “丸アイコン” */
.l-header .sub-menu > li > a .ttl,
.l-fixHeader .sub-menu > li > a .ttl{
  position: relative;
  padding-top: 64px;
  text-align:center;
}

/* 丸 */
.l-header .sub-menu > li > a .ttl::before,
.l-fixHeader .sub-menu > li > a .ttl::before{
  content:"";
  width: 56px;
  height: 56px;
  border-radius: 999px;
  position:absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255,255,255,.94);
  box-shadow: 0 14px 26px rgba(0,0,0,.20);
  background-color: rgba(255,255,255,.94) !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 30px 30px !important;
}

/* “●” を消す */
.l-header .sub-menu > li > a .ttl::after,
.l-fixHeader .sub-menu > li > a .ttl::after{
  content:"" !important;
}


/* currentが勝手に目立つ問題を抑える */
.l-header .menu-item-has-children:hover .sub-menu .current-menu-item > a,
.l-header .menu-item-has-children:hover .sub-menu .current_page_item > a,
.l-fixHeader .menu-item-has-children:hover .sub-menu .current-menu-item > a,
.l-fixHeader .menu-item-has-children:hover .sub-menu .current_page_item > a{
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(255,255,255,.14) !important;
  box-shadow: none !important;
}

/* =========================

  サブメニュー：アイコン画像差し替え

========================= */
/* 107：事故・トラブルに合われたら */
.l-header .sub-menu .menu-item-107 > a .ttl::before,
.l-fixHeader .sub-menu .menu-item-107 > a .ttl::before{
  background-image: url("https://horikihoken.com/wp-content/uploads/2026/02/icon-troublesupport.png");
}

/* 412：カスタマーセンター（TEL） */
.l-header .sub-menu .menu-item-412 > a .ttl::before,
.l-fixHeader .sub-menu .menu-item-412 > a .ttl::before{
  background-image: url("https://horikihoken.com/wp-content/uploads/2026/02/icon-customer-tel.png");
}

/* 109：インターネットサービス */
.l-header .sub-menu .menu-item-109 > a .ttl::before,
.l-fixHeader .sub-menu .menu-item-109 > a .ttl::before{
  background-image: url("https://horikihoken.com/wp-content/uploads/2026/02/icon-internet-service.png");
}

/* 108：ロードサービス専用デスク */
.l-header .sub-menu .menu-item-108 > a .ttl::before,
.l-fixHeader .sub-menu .menu-item-108 > a .ttl::before{
  background-image: url("https://horikihoken.com/wp-content/uploads/2026/02/icon-roadservice.png");
}

/* 110：カスタマーセンター（WEB） */
.l-header .sub-menu .menu-item-110 > a .ttl::before,
.l-fixHeader .sub-menu .menu-item-110 > a .ttl::before{
  background-image: url("https://horikihoken.com/wp-content/uploads/2026/02/icon-customer-web.png");
}

/* 1094：業務運営に関する方針 */
.l-header .sub-menu .menu-item-1094 > a .ttl::before,
.l-fixHeader .sub-menu .menu-item-1094 > a .ttl::before{
  background-image: url("https://horikihoken.com/wp-content/uploads/2026/02/icon-policy.png");
}

/* 111：会社概要 */
.l-header .sub-menu .menu-item-111 > a .ttl::before,
.l-fixHeader .sub-menu .menu-item-111 > a .ttl::before{
  background-image: url("https://horikihoken.com/wp-content/uploads/2026/02/icon.png");
}

/* 60：代表メッセージ */
.l-header .sub-menu .menu-item-60 > a .ttl::before,
.l-fixHeader .sub-menu .menu-item-60 > a .ttl::before{
  background-image: url("https://horikihoken.com/wp-content/uploads/2026/02/icon-message.png");
}

/* 112：ご相談の流れ */
.l-header .sub-menu .menu-item-112 > a .ttl::before,
.l-fixHeader .sub-menu .menu-item-112 > a .ttl::before{
  background-image: url("https://horikihoken.com/wp-content/uploads/2026/02/icon-insurance-product.png");
}

/* 三角 */
.c-gnav .menu-item-has-children > a .ttl{
  position: relative;
  padding-left: 18px;
}
.c-gnav .menu-item-has-children > a .ttl::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%) rotate(0deg);
  transform-origin:50% 50%;
  width:0;
  height:0;
  border-top:5px solid transparent;
  border-bottom:5px solid transparent;
  border-left:7px solid currentColor;
  transition: transform .18s ease;
}
.c-gnav .menu-item-has-children:hover > a .ttl::before{
  transform:translateY(-50%) rotate(90deg);
}

/* ===============================

  追従ヘッダー

=============================== */
.l-header, .l-header__inner {
  position: relative;
  padding: 5.5px;
  width: 100%;
}

.l-fixHeader__inner {
  align-items: stretch;
  color: var(--color_header_text);
  display: flex;
  padding-bottom: 6px;
  padding-top: 0;
  position: relative;
  z-index: 1;
}

/* ===============================

  ヘッダーボタン文字折り返しなし

=============================== */
.contact-top{
  white-space : nowrap;
}

/* ===============================

  スエルボタン・フォントサイズ

=============================== */
.swell-block-button a {
  text-align: center;
  font-weight: 1000;
}

/* ===============================

  PCメインビジュアル

=============================== */
/* 粒子は全面 */
.ins-hero__canvas{
  position:absolute;
  inset:0;
  width:100% !important;
  height:100% !important;
  z-index:1;
  pointer-events:none;
}

/* 雲も全面 */
.ins-hero__clouds{
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
}

/* テキストは前面 */
.ins-hero > *:not(.ins-hero__canvas):not(.ins-hero__clouds){
  position:relative;
  z-index:5;
}

.ins-hero__canvas{
  transform: translateY(-8px);
}

/* ===============================

  ヘッダーエリアの下線

=============================== */
.l-header {
    background: linear-gradient(
        to bottom,
        rgba(20,80,160,0.045),
        rgba(20,80,160,0.02)
			);
    border-bottom: 0.5px solid rgba(40,90,170,0.12);
}
.is-fixed .l-header {
    background: rgba(40, 90, 170, 0.08);
}

/* ===============================

  タイトル背景高さ調整

=============================== */
@media (min-width: 600px){
  .l-topTitleArea {
  min-height: 400px;
  }
  }

/* ===============================

  カラム専用：背景白抜きボックス

=============================== */
.bg-white-box {
  /* 1. 背景を完全な白に指定 */
  background-color: #fdfdfd !important;

  /* 2. 【超重要】内側の余白（パディング）を設ける */
  padding: 24px 28px !important; 

  /* 3. デザインの微調整（お好みで増減・削除可能） */
  border-radius: 8px !important; /* 角を少し丸くして柔らかい印象に */
  box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important; /* わずかな影で立体感を出し、白枠を際立たせる */
  border: 1px solid rgba(0,0,0,0.05) !important; /* 極薄い枠線で境界をはっきりさせる */
}

/* スマホ表示時の余白調整（画面が狭い場合は余白を少し減らす） */
@media (max-width: 560px) {
  .bg-white-box {
    padding: 16px 20px !important;
  }
}

/* ===============================

  トップページ・お問い合わせセクション見出し

=============================== */
.trust-heading {
  /* 1. 基本設定 */
  position: relative !important;
  padding-bottom: 24px !important;

  /* 2. 文字色を白にする */
  color: #fdfdfd !important;

  /* 3. テキストシャドウ */
  /* 影の位置(横 縦)、ぼかし範囲、影の色(黒の40%透明) */
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4) !important;
}

/* 線の設定 */
.trust-heading::after {
  content: "" !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 32px !important;
  height: 2.5px !important;
  background-color: currentColor !important;
  border-radius: 2px !important;
}

/* ===============================

  メインビジュアル高さ調整

=============================== */
/* 1. ブログパーツ全体（24番）を上から物理的に押し下げる */
.p-mainVisual .p-blogParts[data-partsid="24"] {
  margin-top: 68px !important; /* ここを増減して高さを調整 */
}

/* 2. カラム全体を基準ボックスにし、最低高さを確保する */
.p-mainVisual .p-blogParts[data-partsid="24"] .swell-block-columns {
  position: relative !important;
  min-height: 400px !important;
}

/* ===============================

  ページトップ・目次　ボタン大きさ

=============================== */
.c-fixBtn {
  align-items: center;
  background: #fff;
  border: 1px solid var(--color_main);
  border-radius: var(--swl-radius--8, 0);
  box-shadow: var(--swl-box_shadow);
  color: var(--color_main);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  height: 57px;
  justify-content: center;
  letter-spacing: normal;
  line-height: 1;
  opacity: .75;
  overflow: hidden;
  text-align: center;
  transition: all .25s;
  width: 57px;
}

.c-fixBtn__label {
  -webkit-font-feature-settings: "palt";
  font-feature-settings: "palt";
  display: block;
  font-size: 12px;
  font-weight: 550;
  -webkit-transform: scale(.9);
  transform: scale(.9);
}

/* ===============================

  トップページ・トータルカスタマー情報

=============================== */
.is-style-onborder_ttl2>.cap_box_ttl, .is-style-onborder_ttl>.cap_box_ttl {
  display: inline-flex;
  font-size: .85em;
  left: 1.6em;
  line-height: 2;
  margin-bottom: 0;
  padding: .5em .75em;
  position: relative;
  text-align: center;
  z-index: 1;
}

.cap_box_content {
  background-color: var(--capbox-color--bg);
  border: 1.8px solid #0071bc;
  clear: both;
  margin-top: -2px;
  position: relative;
  z-index: 0;
}

/* ===============================

  キャプションボックス

=============================== */
/* タイトルバーの背景色と文字色 */
.navy-capbox .cap_box_ttl {
  background-color: #2b388f !important;
  color: #ffffff !important;
}

/* ボックスの枠線も同じ濃紺 */
.navy-capbox.cap_box {
  border-color: #2b388f !important;
}

/* ③ タイトル内のアイコン（SVG）を白く */
.navy-capbox .cap_box_ttl svg {
  fill: #ffffff !important;
}

/*  影 */
.navy-capbox .cap_box_ttl {
  box-shadow: 0 2px 8px rgba(43, 56, 143, 0.25) !important;
}

/* ===============================

  キャプションボックス：SP最適化
  ※ u-fz-xl が強いので上書きする

=============================== */
@media (max-width: 599px){

  /* タイトル全体のベース */
  .navy-capbox .cap_box_ttl{
    padding:10px 14px !important;
    line-height:1.35 !important;
  }

  /* これが本丸：u-fz-xl をSPだけ潰す */
  .navy-capbox .cap_box_ttl .u-fz-xl{
    font-size: 16px !important;   /* 14〜16で調整OK */
    line-height: 1.35 !important;
  }

  /* ついでに強い太字/余計な余白を整える（任意） */
  .navy-capbox .cap_box_ttl strong{
    font-weight: 700;
  }

  /* アイコンも少し小さく */
  .navy-capbox .cap_box_ttl svg{
    width: 18px !important;
    height: 18px !important;
  }
}

@media (max-width: 599px){
  .navy-capbox .cap_box_ttl{
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: normal;
  }
}

/* ===============================

  h2・トータルサポート

=============================== */
   body h2#h2-double-line {
    /* 1. SWELLの標準装飾（背景、左線、影）を消去 */
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    text-align: center !important;
    display: block !important;
    width: 100% !important;
  
    /* 2. 上下に二重線を引く（上下のみ2pxの線を指定） */
    border-top: 2px solid #2b388f !important;
    border-bottom: 2px solid #2b388f !important;
    
    /* 3. 文字のデザイン */
    color: #2b388f !important;
    padding: 0.8em 0 !important;
    margin-bottom: 30px !important;
  }
  
  /* クラス指定の場合もカバー */
  body h2.h2-double-line {
    background: none !important;
    border: none !important;
    border-top: 2px solid #2b388f !important;
    border-bottom: 2px solid #2b388f !important;
    color: #2b388f !important;
    padding: 0.8em 0 !important;
  }

  @media (min-width: 600px) {
    .l-content {
        padding-top: 0;
    }
}

/* ===============================

  代表者・明朝体フォント

=============================== */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@700&display=swap');
.font-mincho, 
.font-mincho * {
  font-family: "Noto Serif JP", serif !important;
  font-weight: 700 !important; /* 太めに設定 */
}

/* ===============================

 タイトル・テキストシャドウ

=============================== */
.c-postTitle {
  align-items: center;
  display: flex;
  flex-direction: row-reverse;
  text-shadow:
      0 1px 0 rgba(0,0,0,0.4),
      0 2px 8px rgba(0,0,0,0.45),
      0 0 1px rgba(0,0,0,0.55);
}

/* ===============================

   投稿ページ：タイトル文字サイズの最適化

   =============================== */
   /* 1. スマホ用の基本設定（全ての画面にまず適用） */
.c-postTitle__ttl {
  font-size: 18px !important; /* スマホでスッキリ見えるサイズ */
  line-height: 1.4 !important; /* 行間【ギョウカン】を広げて圧迫感を解消 */
}

/* 2. 600px以上の大きな画面（PC・タブレット）の時だけ大きくする */
@media (min-width: 600px) {
  .c-postTitle__ttl {
      font-size: 28px !important;
      line-height: 1.3 !important;
  }
}

/* ===============================

   固定ページ・タイトル装飾

   =============================== */
.c-pageTitle {
  font-size: 2.2rem !important; 
  font-weight: 700 !important;
  letter-spacing: 0.15em !important; /* 文字間隔を広げる */
  color: #333 !important;
  text-align: center !important;
  position: relative !important;
  border: none !important;
  background: none !important;
}

/* ===============================

   スマホ専用：固定ページタイトルの最適化

   =============================== */
   @media (max-width: 767px) {
    /* 1. 固定ページのタイトル（H1）を小さく、下の余白を最小に */
    .c-pageTitle {
        font-size: 1.4rem !important;
        margin-bottom: 0.5em !important; /* タイトル自体の下の余白をゼロに */
        padding-bottom: 10px !important;
    }

    /* 2. 真犯人：post_content の巨大な 4em 余白を強制上書き */
    .l-mainContent__inner > .post_content {
        margin-top: 5px !important; /* 4em（約64px）から5pxへ劇的に削減 */
    }

    /* 3. 最初の見出し（H2）の上の余白も微調整 */
    .post_content h2:first-of-type {
        margin-top: 10px !important;
    }
}

/* 改行を許可し、単語の途中で切れないようにする */
.c-pageTitle, .c-postTitle__ttl {
  white-space: normal !important;
  word-break: break-word !important;
}

/* ===============================

   SP固定フッター・色分け等カスタマイズ

   =============================== */
   /*固定フッターSP*/
#fix_bottom_menu .menu_list{
	overflow: hidden;
}
/*ボタンのリンク判定幅調整*/
#fix_bottom_menu .menu-item a{
	padding: 10% 0;
}
/*２つ目のボタンの背景色*/
#fix_bottom_menu .menu-item:nth-child(2) a{
	background: #9a050d;
}
/*3つ目のボタンの背景色*/
#fix_bottom_menu .menu-item:nth-child(3) a{
	background: #E36C0A;
}
/*4つ目のボタンの背景色*/
#fix_bottom_menu .menu-item:nth-child(4) a{
	background: #83744d;
}

#fix_bottom_menu span {
  color: inherit;
  display: block;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  margin-top: 4px;
  width: 100%;
}

#fix_bottom_menu .menu_list {
  align-items: center;
  display: flex;
  height: 70px;
  justify-content: space-between;
  padding: 0;
  position: relative;
  z-index: 1;
}

/* ===============================

   TOP・目次ボタ位置少し上へ

   =============================== */
@media not all and (min-width: 960px) {
  #fix_bottom_menu+.p-fixBtnWrap {
      bottom: 73px;
  }
}

/* ===============================

   スマホ開閉メニュー

   =============================== */
/* MENUタイトルとメニューの両方を非表示 */
.c-widget__title.-spmenu,
.p-spMenu__nav {
	display: none;
}

/* ======================================
  
     開閉メニュー全体的に上へ 

  ========================================= */
  .p-spMenu__closeBtn {
    margin-bottom: 0;
    padding-bottom: 0;
  }
  
  .p-spMenu__inner {
    padding-top: 0;
  }
  
  .p-spMenu__body {
    margin-top: 25px;
  }

/* ======================================
  
     アコーディオンメニュー・角丸 

  ========================================= */
/* 各アコーディオンの箱 */
.swell-block-accordion__item{
  border-radius:14px;          /* ←角丸サイズ調整OK */
  overflow:hidden;             /* ←これ超重要（中身も丸くなる） */
  border:1px solid #e3e6ef;    /* 任意：薄い枠つけると保険サイトっぽく整う */
  margin-bottom:10px;          /* 項目の間隔 */
  background:#fff;             /* 背景白固定（影がきれいに出る） */
}

/* タイトル部分 */
.swell-block-accordion__title{
  border-radius:14px;          /* 開閉前でも丸く見える */
}

/* 開いたとき下側だけ丸く */
.swell-block-accordion__item[open] .swell-block-accordion__title{
  border-bottom-left-radius:0;
  border-bottom-right-radius:0;
}

/* 本文側の角丸を整える */
.swell-block-accordion__body{
  border-bottom-left-radius:14px;
  border-bottom-right-radius:14px;
}

/* ======================================
  
     タイトル下部・余白狭く

  ========================================= */
.l-content {
  margin: 0 auto 6em;
  padding-top: 0;
  position: relative;
  z-index: 1;
}

/* ======================================
  
     メインビジュアル下・権限明記バー

  ========================================= */
  /* 権限明記バー：空気化 */
.agent-topnote{
  font-size: 12px;
  line-height: 1.7;
  text-align: center;
  padding: 10px 16px;

  /* 色をサイト基調に寄せる */
  color: rgba(0,0,0,.65);

  /* 背景は“超薄いブルー”に */
  background: linear-gradient(
    to bottom,
    rgba(20,80,160,0.05),
    rgba(20,80,160,0.02)
  );

  /* 線 */
  border-top: 1px solid rgba(20,80,160,.14);
  border-bottom: 1px solid rgba(20,80,160,.14);

  /* 角丸・影は消す */
  border-radius: 0;
  box-shadow: none;
}

/* ======================================
  
     h2サブメニュー

  ========================================= */
  .h2-sub-en{
    display:block;
    font-size:11px;
    letter-spacing:.22em;
    margin-top:12px;
    color:rgba(255,255,255,.55);
    font-weight:400;
  }
  
  #solicitation-policy,
  #kpi,
  #customer-oriented-policy,
  #privacy-policy,
  #consultation-flow,
  #message,
  #company,
  #access{
    margin-bottom: 36px;
  }

  #contact{
    position:relative;
  }
  
  #contact .contact-sub-en{
    display:block;
    margin-top:10px;
    font-size:13px;
    letter-spacing:.25em;
    color:rgba(255,255,255,.85);
    font-weight:500;
  }

  #h2-double-line .h2-sub-en{
    display:block;
    margin-top:12px;
    font-size:11px;
    letter-spacing:.22em;
    color:#6f7aa5;
    font-weight:400;
    line-height:1;
  }

  /* ======================================
  
    H3（今回の英語サブメニュー）
   - H2を切巻き込まない

  ========================================= */
h3.wp-block-heading .h2-sub-en{
  display:block;
  font-size:12px;
  letter-spacing:.22em;
  margin-top:10px;
  color:rgba(30,45,80,.68);
  font-weight:500;
}