/*---------------------/custom head---------------------*/

/********head-c*******/
.sub_main.sub_c {
  padding: 200px 0 100px;
}
.sub_main.sub_c.sub_main01{
  background: url(../img/custom/c_c_sub_main01.jpg) no-repeat center;
  background-size: cover;
}
.sub_main.sub_c.sub_main01 p {
  margin-left: 10px;
}
/********head-c*******/
/********head-d*******/
.sub_main.sub_d {
  padding: 40px 0 100px;
}
.sub_main.sub_d .container_1150::before {
  content: "";
  height: 36px;
  width: 1px;
  display: block;
  background-color: #F09C67;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 10px;
}
.sub_main.sub_d .container_1150 p.f_140 {
  font-size: 140px;
  opacity: 0.1;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  position: absolute;
  width: 100%;
}
/********head-d*******/

@media (max-width: 1200px) {
  .sub_main.sub_d .container_1150 p.f_140 {
    font-size: 10vw;
    top: 20%;
  } 
}
@media (max-width: 767px) {
  .sub_main.sub_d {
    padding: 4vw 0 10vw;
}
  .sub_main.sub_d .container_1150 h2 {
    font-size: 7vw;
  } 
  .sub_main.sub_d .container_1150 p.f_140 {
    top: 50%;
  } 

  .sub_main.sub_c {
    padding: 20vw 0 10vw;
}
  .sub_main.sub_c.sub_main01 h2 {
    font-size: 7vw;
  }
  
}

/*---------------------custom head/---------------------*/



/*---------------------/custom---------------------*/

/********custom02*******/
.ctm02-text-box{
  padding: 60px 40px;
  margin-top: -200px;
  position: relative;
  z-index: 100;
  max-width: 1280px;
  width: 90%;
  margin-left: auto;
  margin-right: auto;
}

.ctm02-text-box h3 span {
  -webkit-text-stroke: 1px #7f6252; /*****メインカラーに合う枠線の色で*****/
  text-stroke: 1px #7f6252; /*****メインカラーに合う枠線の色で*****/
  color: transparent;
  top: -2px;
  left: -2px;
  width: 100%;
}

@media (max-width: 767px) {

  .ctm02-text-box{
    padding: 6vw 4vw;
    margin-top: -15vw;
  }
  .ctm02-text-box p {
    font-size: 5vw;
  }

  .ctm02-text-box h3 span {
    top: -1px;
    left: -1px;
  }

}
/********custom02*******/

/********anchor_wrap*******/
.anchor_wrap a {
  background-color: #F09C67;
  border: 1px solid #F09C67;
}
.anchor_wrap a i {
  transition: unset;
}
.anchor_wrap a:hover {
  background-color: #fff;
  color: #F09C67;
  transition: 0.3s;
  opacity: 1;
}

@media (max-width: 767px) {
  .anchor_wrap .d-flex {
    flex-direction: column;
  }
  .anchor_wrap a {
    width: 100%;
    max-width: unset;
    margin-bottom: 2vw;
  }
  .anchor_wrap a:last-child {
    margin-bottom: 0;
  }
  .anchor_wrap p {
    margin-top: 15vw;
    text-align: center !important;
  }
}
/********anchor_wrap*******/

/********custom03*******/
.ctm03 .box_wap .txt01 {
  width: 46%;
}
.ctm03 .box_wap img {
  width: 48%;
}

@media (max-width: 767px) {
  .ctm03 .box_wap .txt01,.ctm03 .box_wap img {
    width: 100%;
  }
  .ctm03 .box_wap .txt01 {
    margin-top: 5vw;
  }
}
/********custom03*******/

/********custom04*******/
.ctm04 {
  background: url(../img/custom/ctm04_01.jpg) no-repeat center;
  background-size: cover;
  background-attachment: fixed;
  padding: 120px 0 ;
}
.ctm04 .box_wap .box {
  width: 48%;
  padding: 30px;
  margin-bottom: 40px;
}

@media (max-width: 767px) {
  .ctm04 {
    padding: 12vw 0 ;
  }
  .ctm04 .box_wap {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
  }
  .ctm04 .box_wap .box {
    width: 100%;
  }
  
}

/********custom04*******/

/********custom05*******/
.ctm05 {
  max-width: 1150px;
  width: 94%;
  margin-left: auto;
  margin-right: auto;
}

.ctm05 p.txt_left {
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}
.ctm05 .box_wap img {
  width: 48%;
}
.ctm05 .box_wap .txt_wap {
  width: 48%;
}

@media (max-width: 767px) {
  .ctm05 .box_wap img,.ctm05 .box_wap .txt_wap {
    width: 100%;
  }
  .ctm05 .box_wap img {
    margin-bottom: 5vw;
  }
}

/********custom05*******/

/********custom06*******/
.ctm06 .ctm06-row .ctm06-row-left {
  width: 45%;
}
.ctm06 .ctm06-row .ctm06-row-left img {
  max-width: 100%;
}
.ctm06 .ctm06-row .ctm06-row-left img:last-child {
  width: 90%;
}
.ctm06 .ctm06-row .ctm06-row-right {
  width: 50%;
}

@media (max-width: 767px) {
  .ctm06 {
    margin-left: auto;
    margin-right: auto;
    margin-top: 20vw;
  }
  .ctm06 .ctm06-row .ctm06-row-left,.ctm06 .ctm06-row .ctm06-row-right {
    width: 100%;
  }
  .ctm06 .ctm06-row .ctm06-row-right {
    margin-top: 7vw;
  }
}

/********custom06*******/

/********custom07*******/
.ctm07 {
  padding: 100px 0;
  background: rgb(240,156,103);
  background: linear-gradient(90deg, rgba(240,156,103,1) 0%, rgba(255,222,90,1) 100%);
}
.ctm07 .ctm07-inner .ctm07-row {
  margin-left: auto;
}
.ctm07 .ctm07-inner .ctm07-row .ctm07-row-item {
  width: 46%;
} 
.ctm07 .ctm07-inner .ctm07-row .ctm07-row-right img {
  max-width: 100%;
} 

@media (max-width: 1200px) {
  .ctm07 .ctm07-inner .ctm07-row {
    width: 100%;
    margin-right: auto;
  }
}
@media (max-width: 767px) {
  .ctm07 .ctm07-inner .ctm07-row {
    flex-direction: column;
  }
  .ctm07 .ctm07-inner .ctm07-row .ctm07-row-item {
    width: 100%;
  } 
  .ctm07 .ctm07-inner .ctm07-row .ctm07-row-right {
    margin-top: 5vw;
  }
}

/********custom07*******/

/********custom08*******/
.ctm08 .ctm08-inner .ttl_wap p.f_132{
  font-size: 132px;
  opacity: 0.1;
}
.ctm08 .ctm08-inner .ttl_wap h3 {
  margin-top: -55px;
}
.ctm08 .ctm08-inner .ctm08-row .ctm08-row-left {
  width: 47%;
}
.ctm08 .ctm08-inner .ctm08-row .ctm08-row-left img{
  width: 100%;
}
.ctm08 .ctm08-inner .ctm08-row .ctm08-row-right {
  width: 50%;
}
@media (max-width: 1200px) {
  .ctm08 .ctm08-inner .ttl_wap p.f_132{
    font-size: 10vw;
  }
}
@media (max-width: 767px) {
  .ctm08 .ctm08-inner .ctm08-row {
    flex-direction: column;
  }
  .ctm08 .ctm08-inner .ctm08-row .ctm08-row-left,.ctm08 .ctm08-inner .ctm08-row .ctm08-row-right {
    width: 100%;
  }
  .ctm08 .ctm08-inner .ctm08-row .ctm08-row-right {
    margin-top: 5vw;
  }
}
/********custom08*******/

/********custom09*******/
.ctm09 .ctm09-inner .ctm09-item img {
  max-width: 100%;
}
/********custom09*******/

/********contact01*******/
.contact01 {
  background: url(../img/custom/c_c05.jpg) no-repeat center;
  background-size: cover;
  background-attachment: fixed;
  padding: 120px 0;
}
.contact01 .box_wap .box01 {
  width: 48%;
}
.contact01 .box_wap .box01 .tel_wap i {
  margin-right: 30px;
}
.contact01 .box_wap .box02 {
  width: 48%;
}
.contact01 .box_wap .box02 .btn_{
  width: 70%;
  display: flex;
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
}
.contact01 .box_wap .box02 .btn_i {
  margin-right: 30px;
}
.contact01 .box_wap .box02 .btn_main:hover {
  background-color: #FFFFFF;
}

@media (max-width: 767px) {
  .contact01 {
    padding: 12vw 0;
  }
  .contact01 .box_wap {
    flex-direction: column;
  }
  .contact01 .box_wap .box01,.contact01 .box_wap .box02 {
    width: 100%;
  }
  .contact01 .box_wap .box02 {
    margin-top: 5vw;
  }
}
/********contact01*******/

/********contact02*******/
.contact02 a {
  display: block;
  padding: 70px 0;
  position: relative;
  overflow: hidden;
}
.contact02 a img{
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center;
  object-position: center;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  transition: .3s;
}
.contact02 a:hover img {
  transform: scale(1.1);
}
/********contact02*******/


/********custom-footer*******/
footer.ctm-footer * {
  box-sizing: border-box;
}
footer.ctm-footer .footer-inner .footer-row .footer-row-left {
  width: 70%;
}
footer.ctm-footer .footer-inner .footer-row .footer-row-left.col-11 {
  width: 90%;
}
footer.ctm-footer .footer-inner .footer-row .footer-row-left .footer-row02 {
  padding-bottom: 30px;
  border-bottom: 1px solid #999;
}
footer.ctm-footer .footer-inner .footer-row .footer-row-left .footer-row02 .footer-row02-left {
  max-width: 250px;
  width: 40%;
}
footer.ctm-footer .footer-inner .footer-row .footer-row-left .footer-row02 .footer-row02-left a img {
  max-width: 100%;
}
footer.ctm-footer .footer-inner .footer-row .footer-row-left .footer-row03 .btn_main {
  width: auto;
}
footer.ctm-footer .footer-inner .footer-row .footer-row-left .footer-row04 {
  width: 70%;
}
footer.ctm-footer .footer-inner .footer-row .footer-row-left .footer-row04 a {
  display: inline-block;
  min-width: 31%;
  width: auto;
  margin-right: 1%;
  margin-bottom: 20px;
}
footer.ctm-footer .footer-inner .footer-row .footer-row-right {
  width: 28%;
}
footer.ctm-footer .footer-inner .footer-row .footer-row-right iframe {
    height: 300px;
    width: 100%;
}

@media (max-width: 767px) {
  footer.ctm-footer .footer-inner .footer-row {
    margin-left: auto;
    margin-right: auto;
  }
  footer.ctm-footer .footer-inner .footer-row .footer-row-left ,footer.ctm-footer .footer-inner .footer-row .footer-row-right{
    width: 100%;
    padding: 0;
  }
  footer.ctm-footer .footer-inner .footer-row .footer-row-right {
    margin-top: 5vw;
  }
  footer.ctm-footer .footer-inner .footer-row .footer-row-left .footer-row02 {
    flex-direction: column;
    border-bottom: 1px solid #999;
  }
  footer.ctm-footer .footer-inner .footer-row .footer-row-left .footer-row02 .footer-row02-item {
    width: 100% !important;
  }
  footer.ctm-footer .footer-inner .footer-row .footer-row-left .footer-row02 .footer-row02-left {
    width: 100%;
    max-width: 60vw;
    margin-left: auto;
    margin-right: auto;
  }
  footer.ctm-footer .footer-inner .footer-row .footer-row-left .footer-row02 .footer-row02-right {
    margin-top: 5vw;
  }
  footer.ctm-footer .footer-inner .footer-row .footer-row-left .footer-row03 {
    flex-direction: column;
  }
  footer.ctm-footer .footer-inner .footer-row .footer-row-left .footer-row03 .btn_main {
    margin-left: auto;
    margin-right: auto;
  } 
  footer.ctm-footer .footer-inner .footer-row .footer-row-left .footer-row04 {
    width: 100%;
    justify-content: space-between;
    margin-left: auto;
    margin-right: auto;
  }
  footer.ctm-footer .footer-inner .footer-row .footer-row-left .footer-row04 a {
    min-width: 48%;
  }

}
/********custom-footer*******/
.ctm-copy {
}
/*---------------------custom/---------------------*/

@media (max-width: 767px) {
  section.mt120 {
    margin-top: 15vw;
  }
  .btn_main.wide {
    width: 100%;
  }
  .ctm-copy {
    width: 90%;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
    margin-top: 20vw !important;
    padding-bottom: 13vw;
  }
}


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

テシオテクノロジ様｜サブページ用の追加パーツ（PC）

SP の記述は css/custom_mediaquery.css に分けてある。

TOP ページのトンマナに合わせている。よりどころは以下の 4 つ。
  ・罫線は 1px #EAEAEA（TOP の .sec_head と同じ）
  ・見出しは「丸アイコン title02.svg ＋ 和文 SemiBold・字送り 3px」
  ・欧文は Albert Sans ExtraBold、色は紺 #161386、字送りは広め
  ・面は白か #FAFAFA。ボタンは c_btn（main02.css 側）をそのまま使う

ヘッダー・フッター・ハンバーガー・ページトップ本体は TOP と共通なので
main02.css / mediaquery02.css 側にあり、ここでは差分の打ち消しだけ行う。

ブランドカラー： 紺 #161386 ／ 青 #387AF6 ／ 罫線 #EAEAEA ／ 面 #FAFAFA

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

/*---------------------フォーマット側の打ち消し---------------------*/
/* 選択時の色。style.css がフォーマット既定のオレンジ #F09C67 を当てているので
   サイトのブランドカラー（紺）に置き換える */
::selection {
  background: #161386;
  color: #ffffff;
}

::-moz-selection {
  background: #161386;
  color: #ffffff;
}

/* style.css の #pagetop は id セレクタ（詳細度 1,0,0）なので、
   main02.css / mediaquery02.css の .wrap_btn（0,1,0）では上書きできない。
   位置も z-index もここで TOP と同じ値に敷き直す。

   - z-index:2000 のままだとハンバーガーメニュー（1001〜1004）より前に出て、
     メニューを開いてもボタンが見えてしまうので 20 に戻す
   - right:2% / bottom:10% だと TOP（right:20px / bottom:10%）とずれるので合わせる */
#pagetop.wrap_btn {
  right: 20px;
  bottom: 10%;
  z-index: 20;
}
/*---------------------フォーマットのリセットを打ち消す---------------------*/
/* フォーマットの style.css は、ほぼ全要素（p / a / span / li / div / th / td …）に
   font-size:16px・font-weight:300・line-height:1.4em・letter-spacing:0.05em を
   「要素セレクタで直接」当てている。継承には詳細度がないので、
   親に .f_24 や .fw_semibold を付けていても子の要素セレクタに負けてしまい、

     ・サブページのヘッダーナビだけ 600 → 400 になる
     ・注意書きの li だけ 500 → 300 になる
     ・お問い合わせセクションの行間だけ 1.5 → 1.4 になる

   といった「TOP と微妙に違う」が各所で出ていた。

   TOP から流用しているコンポーネントの中だけ、このリセットを継承に戻す。
   :where() でスコープを囲み、要素側だけ :is() にしているのがポイント。
   :where() は詳細度 0、:is() は中身の一番強いもの（＝要素 1 個 ＝ 0,0,1）を採るので、
   この規則は 0,0,1 ＝ style.css のリセットと同点になり、後に読まれるこちらが勝つ。
   そして .f_24 や .fw_bold のようなクラス（0,1,0）は常にこちらより強いので、
   ユーティリティを 1 つずつ書き出して勝たせる必要がなくなる。

   対象スコープ：
     .site-header / .hamburger / .site-footer … 全ページ共通パーツ
     main .sec_head / main .contact            … TOP から持ってきたセクション */
:where(.site-header, .hamburger, .site-footer, main .sec_head, main .contact)
  :is(p, a, span, div, li, ul, ol, dl, dt, dd,
      h1, h2, h3, h4, h5, h6, table, tbody, tr, th, td,
      section, nav, header, footer, figure, address, small, strong, b, i, em) {
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  line-height: inherit;
}

/* 上の規則は「親から継ぐ」だけなので、継ぐ元になる入れ物自体も直しておく。
   TOP は bootstrap の body{line-height:1.5} がそのまま降りてくるので 1.5。 */
.site-header,
.hamburger,
.site-footer,
main .sec_head,
main .contact {
  line-height: 1.5;
  letter-spacing: normal;
  /* style.css は body にも font-weight:300 を当てている。継承の大元がそれだと
     .fw_* を持たない要素（フッターのコピーライトなど）が TOP より細くなるので、
     ブラウザ既定の 400 に戻しておく */
  font-weight: 400;
}

/* Material Symbols は字送りとウェイトが素のままでないと字形が変わる */
.site-header .material-symbols-outlined,
.hamburger .material-symbols-outlined,
.site-footer .material-symbols-outlined,
main .contact .material-symbols-outlined,
.site-header .material-icons,
.hamburger .material-icons,
.site-footer .material-icons,
main .contact .material-icons {
  font-weight: normal;
  letter-spacing: normal;
  line-height: 1;
}

/*---------------------ページタイトル帯---------------------*/
/* TOP の .sec_head と同じく、上下 1px の罫線で挟んだ白い帯。

   見出しの順番について：
   画面上は「欧文 → ページ名（h2）→ そのページの説明文（h1）」と並べたいが、
   HTML の構造としては h1 が h2 より先に来ていなければならない。
   そこで .page_ttl_inner を column-reverse にして、
   ソース順（h1 → h2 → 欧文）を見た目だけひっくり返している */
.page_ttl {
  padding: 3.125vw 0;
  border-top: 1px solid #eaeaea;
  border-bottom: 1px solid #eaeaea;
  background-color: #ffffff;
  text-align: center;
}

.page_ttl_inner {
  display: flex;
  flex-direction: column-reverse;
}

.page_ttl_en {
  color: #161386;
  font-family: "Albert Sans", sans-serif;
  font-weight: 800;
  font-size: clamp(16px, 2.5vw, 48px);
  line-height: 1.2;
  letter-spacing: 4px;
}

.page_ttl_ja {
  margin-top: 0.729vw;
  color: #333333;
  font-size: clamp(16px, 1.25vw, 24px);
  font-weight: 600;
  letter-spacing: 3px;
  line-height: 1.6;
}

.page_ttl_sub {
  margin-top: 0.625vw;
  color: #333333;
  font-size: clamp(14px, 0.833vw, 16px);
  font-weight: 500;
  letter-spacing: 2px;
  line-height: 1.6;
}

/*---------------------パンくず---------------------*/
/* ol は main02.css の dl,ol,ul{margin:0!important;padding:0!important} で
   余白が殺されるため、外側の div で幅と余白を取る */
.breadcrumb_area {
  border-bottom: 1px solid #eaeaea;
}

.breadcrumb_inner {
  max-width: 1600px;
  width: 90%;
  margin: 0 auto;
  padding: 0.938vw 0;
}

.breadcrumb_list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  list-style: none;
  font-size: clamp(12px, 0.729vw, 14px);
  font-weight: 500;
  letter-spacing: 1px;
  color: #333333;
}

/* ここも .notice_box_list li と同じ理由。li のリセット（300）に負けるので明示する */
.breadcrumb_list li {
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
}

.breadcrumb_list li + li::before {
  content: "＞";
  margin: 0 0.521vw;
  color: #cccccc;
}

.breadcrumb_list a {
  color: #161386;
  text-decoration: none;
  transition: opacity 0.4s ease;
}

.breadcrumb_list a:hover {
  opacity: 0.6;
}

/*---------------------セクション見出し---------------------*/
/* TOP の .sec_head_ja と同じあしらい。丸アイコン＋和文 SemiBold・字送り 3px。
   ワイヤーの青地・白抜き「見出し」ラベルはすべてこの形に置き換えている */
.sec_ttl {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.729vw;
  color: #333333;
  font-size: clamp(16px, 1.458vw, 28px);
  font-weight: 700;
  letter-spacing: 3px;
  line-height: 1.6;
}

.sec_ttl img {
  flex: 0 0 auto;
  width: clamp(16px, 1.25vw, 24px);
  height: clamp(16px, 1.25vw, 24px);
}

/* 見出しの直下に置くキャッチコピー */
.sec_catch {
  color: #161386;
  font-size: clamp(16px, 1.667vw, 32px);
  font-weight: 700;
  letter-spacing: 2px;
  line-height: 1.6;
}

/* style.css のリセットが span / a に直接 font-size を当てるため継承に戻す */
.sec_ttl span,
.sec_catch span,
.sub_catch span,
.biz_ttl span,
.msg_sign span,
.table_info span,
.news_item_ttl span,
.policy_item_txt span,
.policy_inner_list span,
.policy_order_list span,
.page_ttl span,
.notice_box span,
.policy_item_ttl span,
.breadcrumb_list span,
.sub_lead span {
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  color: inherit;
}

/* .blue などの色指定クラスは上の継承より後に置いて勝たせる */
.sub_catch .blue,
.biz_ttl .blue,
.table_info .blue {
  color: #387af6;
}

/*---------------------電話番号ボックス---------------------*/
/* TOP のお問い合わせカードに合わせ、面は #FAFAFA・罫線 #EAEAEA・数字は紺 */
.tel_box {
  padding: 2.083vw 1.042vw;
  border: 1px solid #eaeaea;
  background-color: #fafafa;
}

.tel_box_num a {
  display: inline-flex;
  align-items: center;
  gap: 0.625vw;
  color: #161386;
  font-size: clamp(16px, 2.292vw, 44px);
  font-weight: 700;
  letter-spacing: 2px;
  line-height: 1.3;
  text-decoration: none;
  transition: opacity 0.4s ease;
}

.tel_box_num a:hover {
  opacity: 0.6;
}

.tel_box_num .material-symbols-outlined {
  color: #161386;
  font-size: clamp(16px, 2.083vw, 40px);
}

.tel_box_note {
  color: #333333;
  font-size: clamp(14px, 0.833vw, 16px);
  font-weight: 500;
  letter-spacing: 2px;
}

/*---------------------注意書きボックス---------------------*/
.notice_box {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  padding: 1.563vw 2.083vw 1.823vw;
  border: 1px solid #eaeaea;
  background-color: #ffffff;
  text-align: left;
}

.notice_box_ttl {
  color: #333333;
  font-size: clamp(16px, 0.938vw, 18px);
  font-weight: 700;
  letter-spacing: 2px;
  text-align: center;
}

.notice_box_list {
  padding-left: 0 !important;
  list-style: none;
  font-size: clamp(14px, 0.833vw, 16px);
  font-weight: 500;
  line-height: 1.9;
  letter-spacing: 1px;
}

/* style.css のリセットが li に font-weight:300 を直接当てており、
   ul 側の 500 は「継承」なので詳細度で負けて 300 で出ていた。
   他の本文（.sub_lead / .policy_item_txt / .biz_txt など）は 500 なので、
   ここも明示して合わせる */
.notice_box_list li {
  padding-left: 1em;
  text-indent: -1em;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
}

.notice_box_list li::before {
  content: "・";
  color: #387af6;
}

/*---------------------本文まわり---------------------*/
.sub_lead {
  font-size: clamp(14px, 0.833vw, 16px);
  font-weight: 500;
  line-height: 1.9;
  letter-spacing: 2px;
}

/*---------------------フォーム枠---------------------*/
/* 中身はフォームメーラーの iframe に差し替える */
.form_area {
  padding: 3.125vw 0;
  background-color: #fafafa;
}

.form_area_inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 2.083vw;
  border: 1px solid #eaeaea;
  background-color: #ffffff;
}

.form_area iframe {
  display: block;
  width: 100%;
  border: 0;
}

.form_area_placeholder {
  padding: 6.25vw 0;
  border: 1px dashed #cccccc;
  color: #999999;
  font-size: clamp(14px, 0.833vw, 16px);
  font-weight: 500;
  line-height: 2;
}

/*---------------------プライバシーポリシー---------------------*/
.policy_lead {
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  font-size: clamp(14px, 0.833vw, 16px);
  font-weight: 500;
  line-height: 2;
  letter-spacing: 1px;
  text-align: left;
}

/* ul も !important リセットの対象なので上書きが必要 */
.policy_list {
  padding-left: 0 !important;
  max-width: 1000px;
  margin: 3.125vw auto 0 !important;
  list-style: none;
  text-align: left;
}

.policy_item + .policy_item {
  margin-top: 2.604vw;
}

/* 見出しは TOP の会社概要リストと同じく紺＋下罫線でそろえる */
.policy_item_ttl {
  padding-bottom: 0.625vw;
  border-bottom: 1px solid #eaeaea;
  color: #161386;
  font-size: clamp(16px, 1.042vw, 20px);
  font-weight: 700;
  letter-spacing: 3px;
  line-height: 1.6;
}

/* 本文と箇条書きは必ず同じ文字サイズにそろえる。
   li は style.css 側でも font-size が当たるので個別に指定している */
.policy_item_txt,
.policy_inner_list,
.policy_inner_list li,
.policy_order_list,
.policy_order_list li {
  font-size: clamp(14px, 0.833vw, 16px);
  font-weight: 500;
  line-height: 2;
  letter-spacing: 1px;
}

.policy_item_txt {
  margin-top: 0.938vw;
}

.policy_item_txt + .policy_item_txt {
  margin-top: 0.625vw;
}

.policy_inner_list {
  margin-top: 0.625vw !important;
  padding-left: 0 !important;
  list-style: none;
}

.policy_inner_list li {
  padding-left: 1em;
  text-indent: -1em;
}

/* 2026-09-29 修正依頼 15：「・」の付与をやめる（（1）（2）の前に「・」が出ていた）。
   以前の `.policy_inner_list li::before { content: "・" }` は削除済み。
   古い CSS がキャッシュで残っても出ないよう、明示的に打ち消しておく（このクラスは privacy でしか使っていない） */
.policy_inner_list li::before {
  content: none;
}

/* 番号付きの箇条書き */
.policy_order_list {
  max-width: 1000px;
  margin: 0.625vw auto 0 !important;
  padding-left: 0 !important;
  list-style: none;
  counter-reset: policy;
  text-align: left;
}

.policy_order_list li {
  padding-left: 2em;
  text-indent: -2em;
}

.policy_order_list li + li {
  margin-top: 0.521vw;
}

.policy_order_list li::before {
  counter-increment: policy;
  content: counter(policy) ". ";
  color: #387af6;
  font-weight: 700;
}

.policy_sign {
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  font-size: clamp(14px, 0.833vw, 16px);
  font-weight: 500;
  line-height: 2;
  letter-spacing: 1px;
  text-align: right;
}

/*---------------------お問い合わせ窓口ボックス---------------------*/
.policy_contact_box {
  max-width: 1000px;
  margin: 0.938vw auto 0;
  text-align: left;
  padding: 1.25vw 1.563vw;
  border: 1px solid #eaeaea;
  background-color: #fafafa;
  font-size: clamp(14px, 0.833vw, 16px);
  font-weight: 500;
  line-height: 2;
  letter-spacing: 1px;
}

/*---------------------新着情報---------------------*/
/* 静的ページ。記事は .news_item を並べるだけ */
.news_area {
  max-width: 1000px;
  text-align: left;
}

.news_item + .news_item {
  margin-top: 4.167vw;
}

.news_item_day {
  color: #387af6;
  font-size: clamp(16px, 0.938vw, 18px);
  font-weight: 700;
  letter-spacing: 2px;
}

.news_item_ttl {
  margin-top: 0.521vw;
  color: #333333;
  font-size: clamp(16px, 1.25vw, 24px);
  font-weight: 700;
  letter-spacing: 2px;
  line-height: 1.6;
}

.news_item_line {
  margin-top: 0.938vw;
  border: 0;
  border-top: 1px solid #eaeaea;
  opacity: 1;
}

.news_item_body {
  margin-top: 1.563vw;
}

.news_item_body p {
  font-size: clamp(14px, 0.833vw, 16px);
  font-weight: 500;
  line-height: 2;
  letter-spacing: 1px;
}

.news_item_body p + p {
  margin-top: 1.042vw;
}

/*---------------------本文中の大きな画像---------------------*/
/* width 属性の実寸（1280px 等）のまま出て横あふれするので、必ず親幅に収める */
.sub_img {
  display: block;
  width: 100%;
  height: auto;
}

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

事業紹介・会社概要ページの部品（PC）

※ 見出しの h タグのレベルに依存しないよう、必ずクラスで指定すること。
   構造上の理由で h3 → h4 のように付け替えることがあるため、
   要素セレクタに頼ると見た目が変わってしまう。

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

/*---------------------セクションの区切り線---------------------*/
.sec_rule {
  max-width: 1600px;
  width: 90%;
  margin: 0 auto;
  border: 0;
  border-top: 1px solid #eaeaea;
  opacity: 1;
}

/*---------------------見出し直下のキャッチ---------------------*/
/* TOP のキャッチと同じ組み方。青のアクセントは .blue を併用する */
.sub_catch {
  color: #333333;
  font-size: clamp(16px, 1.771vw, 34px);
  font-weight: 700;
  letter-spacing: 2px;
  line-height: 1.6;
}

.sub_catch .blue {
  color: #387af6;
}

/*---------------------事業紹介の 3 項目---------------------*/
.biz_num {
  color: #387af6;
  font-family: "Albert Sans", sans-serif;
  font-weight: 800;
  font-size: clamp(16px, 2.083vw, 40px);
  line-height: 1;
  letter-spacing: 2px;
}

.biz_ttl {
  margin-top: 0.729vw;
  color: #161386;
  font-size: clamp(16px, 1.354vw, 26px);
  font-weight: 700;
  letter-spacing: 2px;
  line-height: 1.5;
}

.biz_txt {
  margin-top: 1.042vw;
  color: #333333;
  font-size: clamp(14px, 0.833vw, 16px);
  font-weight: 500;
  letter-spacing: 1px;
  line-height: 2;
}

/*---------------------会社概要テーブル---------------------*/
/* フォーマットの .table01 に、サイトのトンマナ（紺の見出し・#EAEAEA の罫）を重ねる */
.table_info {
  max-width: 1000px;
}

.table_info th {
  border-right: 1px solid #eaeaea;
  border-bottom: 1px solid #eaeaea;
  color: #161386;
  font-size: clamp(14px, 0.833vw, 16px);
  font-weight: 600;
  letter-spacing: 2px;
  vertical-align: top;
  text-align: left;
}

.table_info td {
  padding-top: 1.042vw;
  padding-bottom: 1.042vw;
  border-bottom: 1px solid #eaeaea;
  color: #333333;
  font-size: clamp(14px, 0.833vw, 16px);
  font-weight: 500;
  letter-spacing: 1px;
  line-height: 1.9;
  vertical-align: top;
}

/* 電話番号や外部サイトへのリンクは紺で、ホバーで薄くする */
.table_info td a {
  color: #161386;
  font-weight: 600;
  text-decoration: none;
  transition: opacity 0.4s ease;
}

.table_info td a:hover {
  opacity: 0.6;
}

/* 別タブで開くリンクのアイコン */
.table_info td a .material-symbols-outlined {
  font-size: clamp(16px, 0.938vw, 18px);
  vertical-align: -3px;
  margin-left: 4px;
}

/*---------------------代表メッセージの署名---------------------*/
.msg_sign {
  margin-top: 2.083vw;
  color: #333333;
  font-size: clamp(14px, 0.833vw, 16px);
  font-weight: 500;
  letter-spacing: 2px;
  text-align: right;
}

.msg_sign .msg_sign_name {
  display: inline-block;
  margin-left: 0.729vw;
  font-size: clamp(16px, 1.458vw, 28px);
  font-weight: 800;
  letter-spacing: 4px;
  line-height: 1;
}

/*---------------------アクセス---------------------*/
.access_map {
  display: block;
  width: 100%;
  height: clamp(238px, 18.75vw, 360px);
  border: 1px solid #eaeaea;
}

.access_btn {
  margin-top: 1.042vw;
}

/*---------------------役員一覧など「役職＋氏名」の並び---------------------*/
/* PC は 1 行 1 名。役職の幅をそろえて氏名の頭を合わせる。
   style.css のリセットが span に font-size:16px / font-weight:300 を直接
   当てるため、セルの文字と揃うよう継承に戻している */
.stack_sp .stack_sp_item,
.stack_sp .stack_sp_role,
.stack_sp .stack_sp_name {
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  color: inherit;
}

.stack_sp .stack_sp_item {
  display: block;
}

.stack_sp .stack_sp_item + .stack_sp_item {
  margin-top: 4px;
}

.stack_sp .stack_sp_role {
  display: inline-block;
  min-width: 9em;
}

/*---------------------本文リードの幅を絞る修飾---------------------*/
.sub_lead.-narrow {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

/*---------------------フッター左ブロック---------------------*/
/* main02.css 側には .footer_left の指定が無く、レイアウトは
   .footer_inner の flex に任せている。念のため縮み止めだけ持たせる */
.site-footer .footer_left {
  flex: 0 1 auto;
}

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

ユーティリティをリキッドに統一

フォーマットの style.css は .f_24 や .mt100 を「固定 px」で定義している。
一方 TOP（main02.css）は同じ名前を vw ベースのリキッドで定義しているため、
読み込み順で style.css が勝ち、サブページだけ文字と余白が固定になっていた。
その結果、TOP から流用している下部のお問い合わせセクションなどで
「TOP はリキッド、サブページは固定」という食い違いが出ていた。

ここで main02.css と同じ値を敷き直して、サイト全体をリキッドにそろえる。
style.css 側は `.f_24, .f_24 span` と span まで指定していて詳細度が高いので、
こちらも同じ形（span 付き）で書かないと勝てない。

※ 値は main02.css から機械的に写したもの。
   main02.css の定義を変えたときは、ここも合わせて更新すること。

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

/*---------------------文字サイズ（リキッド）---------------------*/
.f_10,
.f_10 span {
  font-size: min(10px, 0.5208vw);
}

.f_12,
.f_12 span {
  font-size: clamp(10px, 0.62496vw, 12px);
}

.f_14,
.f_14 span {
  font-size: clamp(12px, 0.72912vw, 14px);
}

.f_16,
.f_16 span {
  font-size: clamp(14px, 0.83328vw, 16px);
}

.f_18,
.f_18 span {
  font-size: clamp(16px, 0.93744vw, 18px);
}

.f_20,
.f_20 span {
  font-size: clamp(16px, 1.0416vw, 20px);
}

.f_22,
.f_22 span {
  font-size: clamp(16px, 1.14576vw, 22px);
}

.f_24,
.f_24 span {
  font-size: clamp(16px, 1.24992vw, 24px);
}

.f_26,
.f_26 span {
  font-size: clamp(16px, 1.35408vw, 26px);
}

.f_28,
.f_28 span {
  font-size: clamp(16px, 1.45824vw, 28px);
}

.f_30,
.f_30 span {
  font-size: clamp(16px, 1.5624vw, 30px);
}

.f_32,
.f_32 span {
  font-size: clamp(16px, 1.66656vw, 32px);
}

.f_36,
.f_36 span {
  font-size: clamp(16px, 1.87488vw, 36px);
}

.f_38,
.f_38 span {
  font-size: clamp(16px, 1.97904vw, 38px);
}

.f_40,
.f_40 span {
  font-size: clamp(16px, 2.0832vw, 40px);
}

.f_42,
.f_42 span {
  font-size: clamp(16px, 2.18736vw, 42px);
}

.f_48,
.f_48 span {
  font-size: clamp(16px, 2.49984vw, 48px);
}

.f_52,
.f_52 span {
  font-size: clamp(16px, 2.70816vw, 52px);
}

.f_56,
.f_56 span {
  font-size: clamp(16px, 2.91648vw, 56px);
}

.f_58,
.f_58 span {
  font-size: clamp(16px, 3.02064vw, 58px);
}

.f_60,
.f_60 span {
  font-size: clamp(16px, 3.1248vw, 60px);
}

.f_62,
.f_62 span {
  font-size: clamp(16px, 3.22896vw, 62px);
}

.f_64,
.f_64 span {
  font-size: clamp(16px, 3.33312vw, 64px);
}

.f_72,
.f_72 span {
  font-size: clamp(16px, 3.74976vw, 72px);
}

.f_80,
.f_80 span {
  font-size: clamp(16px, 4.1664vw, 80px);
}

.f_100,
.f_100 span {
  font-size: clamp(16px, 5.208vw, 100px);
}

/*---------------------上下の余白（リキッド）---------------------*/
.mt10 {
  margin-top: 0.52vw;
}

.mt20 {
  margin-top: 1.04vw;
}

.mt30 {
  margin-top: 1.56vw;
}

.mt40 {
  margin-top: 2.08vw;
}

.mt50 {
  margin-top: 2.6vw;
}

.mt60 {
  margin-top: 3.12vw;
}

.mt80 {
  margin-top: 4.16vw;
}

.mt100 {
  margin-top: 5.2vw;
}

.mt120 {
  margin-top: 6.24vw;
}

.mb10 {
  margin-bottom: 0.52vw;
}

.mb20 {
  margin-bottom: 1.04vw;
}

.mb30 {
  margin-bottom: 1.56vw;
}

.mb40 {
  margin-bottom: 2.08vw;
}

.mb50 {
  margin-bottom: 2.6vw;
}

.mb60 {
  margin-bottom: 3.12vw;
}

.mb70 {
  margin-bottom: 3.64vw;
}

.mb80 {
  margin-bottom: 4.16vw;
}

.mb90 {
  margin-bottom: 4.68vw;
}

.mb100 {
  margin-bottom: 5.2vw;
}


/* 2026-09-26：採用サイトの ENTRY から ../contact/#contact_form で飛んできたとき、
   固定ヘッダー（PC 100px）にフォームの頭が隠れないように */
#contact_form {
  scroll-margin-top: 120px;
}
