@charset "UTF-8";
/*--------------------------
base layout (main_visual・breadcrumb・inner は common.css に集約したので、このページ固有の分だけ)
---------------------------*/
#service .service_top .main_visual_inner { background-image: url(/asset/image/service/service_top_visual.webp); background-position: bottom center; }
#service #section02 { background: #f7f7f7; }

/* main_visual_inner：タイトルが切れないよう固定heightをmin-heightに、画像は常にボックスを覆うcoverに（サービス配下のみ） */
#service #main_visual .main_visual_inner { position: relative; height: auto; min-height: 320px; background-size: cover; }
/* 白文字タイトルの視認性向上のため、画像の上に黒50%のオーバーレイを重ねる */
#service #main_visual .main_visual_inner::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); }
#service #main_visual .main_visual_inner .title_box { position: relative; z-index: 1; }
@media only screen and (max-width: 1170px) {
  #service #main_visual .main_visual_inner { min-height: 280px; }
}
@media only screen and (max-width: 560px) {
  #service #main_visual .main_visual_inner { min-height: 150px; }
}
/* main_visual_inner：スマホ時はSP用書き出し画像に差し替え */
@media only screen and (max-width: 768px) {
  #service .procurement .main_visual_inner, #service .plant .main_visual_inner, #service .oem .main_visual_inner { background-image: url(/asset/image/service/service_category01_visual_sp.webp); }
  #service .agency .main_visual_inner, #service .nmpa .main_visual_inner, #service .lib .main_visual_inner { background-image: url(/asset/image/service/service_category02_visual_sp.webp); }
  #service .ichiwa .main_visual_inner, #service .delivery .main_visual_inner { background-image: url(/asset/image/service/service_category03_visual_sp.webp); }
  #service .bangkok .main_visual_inner { background-image: url(/asset/image/service/service_category04_visual_sp.webp); }
}

/*--------------------------
service renewal (new content)
---------------------------*/
#service .accent { color: #e60012; }
#service .accent-blue { color: #0e3476; }
#service .is-hidden { display: none; }
#service #section01 .lead { font-size: 18px; font-weight: 600; line-height: 2; text-align: center; color: #333130; margin: 0 0 80px; }
#service #section01 .lead p + p { margin-top: 24px; }
@media only screen and (max-width: 1170px) {
  #service #section01 .lead { font-size: 16px; line-height: 1.8; text-align: left; margin: 0 0 45px; }
  #service #section01 .lead p + p { margin-top: 16px; }
}
@media only screen and (max-width: 560px) {
  #service #section01 .lead { font-size: 14px; }
}

#service .ttl { position: relative; display: block; font-size: 28px; font-weight: 700; line-height: 1.4; color: #333130; padding: 0 0 15px; margin: 0 0 25px; }
#service .ttl::before { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: #bfbfbf; }
#service .ttl::after { content: ""; position: absolute; left: 0; bottom: 0; width: 40px; height: 1px; background: #2d2d2d; }
@media only screen and (max-width: 1170px) {
  #service .ttl { font-size: 22px; padding: 0 0 16px; margin: 0 0 30px; }
}
@media only screen and (max-width: 560px) {
  #service .ttl { font-size: 18px; padding: 0 0 12px; }
  #service .ttl::after { width: 30px; }
}

/*--------------------------
accordion（procurement・plant・agency などリニューアル済み下層ページ共通）
---------------------------*/
#service .accordion_list { margin: 0; }
#service .accordion_item { margin: 0 0 16px; }
#service .accordion_item:last-child { margin: 0; }
#service .accordion_head { position: relative; display: flex; align-items: center; width: 100%; gap: 30px; padding: 24px 60px 24px 30px; background: #fff; border: 1px solid #bfbfbf; font: inherit; text-align: left; cursor: pointer; transition: border-color 0.3s ease; }
#service .accordion_head:hover { border-color: #0e3476; }
#service .accordion_head .num { flex-shrink: 0; width: 30px; font-family: "Roboto", sans-serif; font-size: 30px; font-weight: 700; color: #333130; }
#service .accordion_head h3, #service .accordion_head h4 { flex: 1; font-size: 20px; font-weight: 600; line-height: 1.5; color: #333130; padding-left: 40px; border-left: 1px solid #bfbfbf; }
#service .accordion_head.no-num h3, #service .accordion_head.no-num h4 { padding-left: 0; border-left: none; }
#service .accordion_head .icon { position: absolute; top: 50%; right: 24px; width: 16px; height: 16px; transform: translateY(-50%); }
#service .accordion_head .icon::before, #service .accordion_head .icon::after { content: ""; position: absolute; top: 50%; left: 50%; background: #9a9a9a; transition: transform 0.3s ease; }
#service .accordion_head .icon::before { width: 20px; height: 3px; transform: translate(-50%, -50%); }
#service .accordion_head .icon::after { width: 3px; height: 20px; transform: translate(-50%, -50%); }
#service .accordion_item.is-open .accordion_head .icon::after { transform: translate(-50%, -50%) rotate(90deg); }
#service .accordion_body { display: none; margin: 0; padding: 25px 40px; }
#service .accordion_body h4 { font-size: 18px; font-weight: 700; color: #333130; margin: 0 0 10px; }
#service .accordion_body .txt { font-size: 15px; line-height: 1.9; color: #333130; }
@media only screen and (max-width: 1170px) {
  #service .accordion_list { margin: 0; }
  #service .accordion_head { gap: 16px; padding: 18px 50px 18px 20px; }
  #service .accordion_head .num { width: 32px; font-size: 18px; }
  #service .accordion_head h3 { font-size: 17px; }
  #service .accordion_body { padding: 25px 25px; }
}
@media only screen and (max-width: 560px) {
  #service .accordion_list { margin: 0; }
  #service .accordion_head { gap: 10px; padding: 15px 40px 15px 15px; }
  #service .accordion_head .num { width: 26px; font-size: 16px; }
  #service .accordion_head h3 { font-size: 15px; }
  #service .accordion_body { margin: 12px 0 0; padding: 20px; }
  #service .accordion_body .txt { font-size: 13px; }
}

/*--------------------------
service lineup
---------------------------*/
#service .lineup_list { display: flex; flex-direction: column; gap: 50px; }
#service .lineup_item { display: flex; align-items: center; gap: 60px; }
#service .lineup_item:not(:last-child) { padding-bottom: 50px; border-bottom: 1px solid #d9d9d9; }
#service .lineup_item.is-reverse { flex-direction: row-reverse; }
#service .lineup_item .txt_box { width: 50%; }
#service .lineup_item .img_box { width: 50%; }
#service .lineup_item .img_box img { display: block; width: 100%; height: auto; }
#service .lineup_item h3 { font-size: 22px; font-weight: 700; line-height: 1.5; color: #333130; margin: 0 0 20px; }
#service .lineup_item .txt { font-size: 15px; line-height: 1.9; color: #333130; }
#service .btn_list { margin: 30px 0 0; }
#service .btn_list li { margin: 0 0 12px; }
#service .btn_list li:last-child { margin: 0; }
@media only screen and (min-width: 769px) {
  #service .lineup_item .btn_list .link_btn { max-width: 350px; }
}
@media only screen and (max-width: 1170px) {
  #service .lineup_list { gap: 30px; }
  #service .lineup_item { gap: 30px; }
  #service .lineup_item:not(:last-child) { padding-bottom: 30px; }
  #service .lineup_item h3 { font-size: 18px; margin: 0 0 15px; }
  #service .lineup_item .txt { font-size: 14px; }
}
@media only screen and (max-width: 768px) {
  #service .lineup_item, #service .lineup_item.is-reverse { flex-direction: column; align-items: stretch; }
  #service .lineup_item .txt_box, #service .lineup_item .img_box { width: 100%; }
  #service .lineup_item .img_box { order: -1; margin: 0 0 20px; }
}

/*--------------------------
link button
---------------------------*/
#service .link_btn { position: relative; display: block; font-size: 15px; font-weight: 500; color: #fff; text-align: center; padding: 16px 50px 16px 20px; background: #0e3476; border-radius: 0; transition: all 0.3s ease; }
#service .link_btn::after { position: absolute; font-family: "fontello"; font-style: normal; font-weight: normal; display: inline-block; text-decoration: inherit; text-align: center; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: "\e801"; top: 50%; right: 20px; transform: translateY(-50%); transition: all 0.3s ease; }
#service .link_btn:hover { opacity: 0.8; }
#service .link_btn:hover::after { right: 15px; }
#service .link_btn.is-red { background: #e60012; }
@media only screen and (max-width: 560px) {
  #service .link_btn { font-size: 13px; padding: 14px 40px 14px 15px; }
}

/*--------------------------
service_link_nav（各下層ページ共通フッター「サービス紹介一覧」／asset/inc/service_link_nav.php）
---------------------------*/
article .section_title01 { position: relative; display: table; font-size: 36px; font-weight: 500; line-height: 1.6; text-align: center; padding: 0 0 15px; margin: 0 auto 80px; font-weight: 600; }
@media only screen and (max-width: 1170px) {
  article .section_title01 { font-size: 28px; padding: 0 0 25px; margin: 0 auto 30px; }
}
@media only screen and (max-width: 560px) {
  article .section_title01 { font-size: 20px; padding: 0 0 20px; }
}
article .section_title01::after { position: absolute; content: ""; width: 100%; height: 2px; left: 0; bottom: 0; background: #e60012; }
#link_area .inner { width: 1170px; padding: 120px 0; margin: 0 auto; }
@media only screen and (max-width: 1170px) {
  #link_area .inner { width: 90%; padding: 80px 0; }
}
@media only screen and (max-width: 560px) {
  #link_area .inner { padding: 60px 0; }
}
#link_area .inner .service_link_nav { display: flex; justify-content: flex-start; flex-wrap: wrap; column-gap: 18.75px; }
#link_area .inner .service_link_nav::after { content: ""; display: block; width: calc(25% - 15px); }
#link_area .inner .service_link_nav li { width: calc(25% - 15px); margin: 0 0 20px; box-shadow: 0 3px 5px rgba(0, 0, 0, 0.16); }
@media only screen and (max-width: 780px) {
  #link_area .inner .service_link_nav li { width: calc(50% - 10px); }
}
@media only screen and (max-width: 380px) {
  #link_area .inner .service_link_nav li { width: calc(50% - 5px); margin: 0 0 10px; }
}
#link_area .inner .service_link_nav li a { display: block; height: 100%; padding: 0; transition: all 0.7s ease; }
#link_area .inner .service_link_nav li a .thumb_box { position: relative; overflow: hidden; transition: all 0.7s ease; }
#link_area .inner .service_link_nav li a .thumb_box::before { position: absolute; content: ""; width: 100%; height: 100%; top: 0; left: 0; background: rgba(0, 0, 0, 0.3); transition: all 0.7s ease; opacity: 0; z-index: 1; }
#link_area .inner .service_link_nav li a .thumb_box img { transition: all 0.7s ease; }
#link_area .inner .service_link_nav li a .txt_box { padding: 15px; }
@media only screen and (max-width: 560px) {
  #link_area .inner .service_link_nav li a .txt_box { padding: 10px 5px; }
}
#link_area .inner .service_link_nav li a .txt_box h3 { font-size: 16px; color: #0e3476; transition: all 0.7s ease; }
@media only screen and (max-width: 560px) {
  #link_area .inner .service_link_nav li a .txt_box h3 { font-size: 14px; }
}
#link_area .inner .service_link_nav li a:hover { background: #0e3476; }
#link_area .inner .service_link_nav li a:hover .thumb_box::before { opacity: 1; }
#link_area .inner .service_link_nav li a:hover .thumb_box img { transform: scale(1.15); }
#link_area .inner .service_link_nav li a:hover .txt_box { color: #fff; }
#link_area .inner .service_link_nav li a:hover .txt_box h3 { color: #fff; }

.service01 #link_area .service_link_nav li .service01 { pointer-events: none; background: #0e3476; }
.service01 #link_area .service_link_nav li .service01 .thumb_box::before { opacity: 1; }
.service01 #link_area .service_link_nav li .service01 .txt_box h3 { color: #fff; }

.service02 #link_area .service_link_nav li .service02 { pointer-events: none; background: #0e3476; }
.service02 #link_area .service_link_nav li .service02 .thumb_box::before { opacity: 1; }
.service02 #link_area .service_link_nav li .service02 .txt_box { color: #fff; }
.service02 #link_area .service_link_nav li .service02 .txt_box h3 { color: #fff; }

.service03 #link_area .service_link_nav li .service03 { pointer-events: none; background: #0e3476; }
.service03 #link_area .service_link_nav li .service03 .thumb_box::before { opacity: 1; }
.service03 #link_area .service_link_nav li .service03 .txt_box h3 { color: #fff; }

.service04 #link_area .service_link_nav li .service04 { pointer-events: none; background: #0e3476; }
.service04 #link_area .service_link_nav li .service04 .thumb_box::before { opacity: 1; }
.service04 #link_area .service_link_nav li .service04 .txt_box h3 { color: #fff; }

.service05 #link_area .service_link_nav li .service05 { pointer-events: none; background: #0e3476; }
.service05 #link_area .service_link_nav li .service05 .thumb_box::before { opacity: 1; }
.service05 #link_area .service_link_nav li .service05 .txt_box h3 { color: #fff; }

.service06 #link_area .service_link_nav li .service06 { pointer-events: none; background: #0e3476; }
.service06 #link_area .service_link_nav li .service06 .thumb_box::before { opacity: 1; }
.service06 #link_area .service_link_nav li .service06 .txt_box h3 { color: #fff; }

.service07 #link_area .service_link_nav li .service07 { pointer-events: none; background: #0e3476; }
.service07 #link_area .service_link_nav li .service07 .thumb_box::before { opacity: 1; }
.service07 #link_area .service_link_nav li .service07 .txt_box h3 { color: #fff; }

.service08 #link_area .service_link_nav li .service08 { pointer-events: none; background: #0e3476; }
.service08 #link_area .service_link_nav li .service08 .thumb_box::before { opacity: 1; }
.service08 #link_area .service_link_nav li .service08 .txt_box h3 { color: #fff; }

.service09 #link_area .service_link_nav li .service09 { pointer-events: none; background: #0e3476; }
.service09 #link_area .service_link_nav li .service09 .thumb_box::before { opacity: 1; }
.service09 #link_area .service_link_nav li .service09 .txt_box h3 { color: #fff; }

.service10 #link_area .service_link_nav li .service10 { pointer-events: none; background: #0e3476; }
.service10 #link_area .service_link_nav li .service10 .thumb_box::before { opacity: 1; }
.service10 #link_area .service_link_nav li .service10 .txt_box h3 { color: #fff; }

.service11 #link_area .service_link_nav li .service11 { pointer-events: none; background: #0e3476; }
.service11 #link_area .service_link_nav li .service11 .thumb_box::before { opacity: 1; }
.service11 #link_area .service_link_nav li .service11 .txt_box h3 { color: #fff; }

/*==========================================================================
procurement page（/service/procurement/）
==========================================================================*/
/*--------------------------
base layout（このページ固有の背景画像）
---------------------------*/
#service .procurement .main_visual_inner { background-image: url(/asset/image/service/service_category01_visual.webp); }
/*--------------------------
intro（リード文／procurement・oem などリニューアル済み下層ページ共通。見出しは article .section_title01 を共通利用）
---------------------------*/
#service .lead_txt { margin: 20px 0 40px; }
#service .lead_txt p { font-size: 15px; line-height: 1.9; color: #333130; margin: 0 0 20px; }
#service .lead_txt p:last-child { margin: 0; }
@media only screen and (max-width: 560px) {
  #service .lead_txt { margin: 15px 0 40px; }
  #service .lead_txt p { font-size: 13px; }
}

/*--------------------------
flow（STEP01-05）
---------------------------*/
#service .procurement .flow_list { display: flex; flex-direction: column; gap: 40px; margin: 0 0 60px; }
#service .procurement .flow_item { position: relative; padding: 45px 50px; background: #eef1fa; border-radius: 4px; }
#service .procurement .flow_item:nth-child(even) { background: none; }
#service .procurement .flow_visual { display: flex; align-items: flex-start; gap: 40px; }
#service .procurement .flow_circle { flex-shrink: 0; width: 180px; text-align: center; }
#service .procurement .flow_circle .flow_num { display: block; font-family: "Roboto", sans-serif; font-size: 15px; font-weight: 500; letter-spacing: 2px; color: #0e3476; margin: 0 0 8px; }
#service .procurement .flow_circle h4 { font-size: 30px; font-weight: 700; color: #0e3476; margin: 0 0 20px; }
#service .procurement .flow_circle .circle_img { display: block; width: 100%; height: auto; }
#service .procurement .flow_content { flex: 1; min-width: 0; }
#service .procurement .comment_img { display: block; margin: 0 0 25px; }
#service .procurement .comment_img img { display: block; width: 100%; height: auto; }
#service .procurement .flow_txt { font-size: 15px; line-height: 1.9; color: #333130; margin: 0 0 25px; }
#service .procurement .flow_item .link_btn { max-width: 320px; }
@media only screen and (max-width: 1170px) {
  #service .procurement .flow_item { padding: 30px; }
  #service .procurement .flow_circle h4 { font-size: 24px; }
  #service .procurement .flow_visual { gap: 20px; }
  #service .procurement .flow_circle { width: 140px; }
}
@media only screen and (max-width: 768px) {
  #service .procurement .flow_list { gap: 80px; }
  #service .procurement .flow_visual { flex-direction: column; }
  #service .procurement .flow_circle { width: 100%; margin: 0 auto; }
  #service .procurement .flow_step_head { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0 0 15px; }
  #service .procurement .flow_circle .flow_num { margin: 0; }
  #service .procurement .flow_circle h4 { margin: 0; }
  #service .procurement .flow_item:nth-child(even) { background: #eef1fa; }
  #service .procurement .flow_item:not(:last-child)::after { content: ""; position: absolute; left: 50%; top: 100%; margin-top: 12px; transform: translateX(-50%); width: 56px; height: 56px; background: url(/asset/image/service/procurement/step_arrow.webp) no-repeat center / contain; }
  #service .procurement .flow_item .link_btn { max-width: 100%; width: 100%; }
}
@media only screen and (max-width: 560px) {
  #service .procurement .flow_item { padding: 25px 20px; }
  #service .procurement .flow_circle h4 { font-size: 20px; }
  #service .procurement .flow_txt { font-size: 13px; }
}

/*--------------------------
closing・お問い合わせボタン（procurement・oem などリニューアル済み下層ページ共通）
---------------------------*/
#service .closing_txt { text-align: center; margin: 0 0 50px; }
#service .closing_txt p { font-size: 15px; line-height: 1.9; color: #333130; }
@media only screen and (max-width: 560px) {
  #service .closing_txt p { font-size: 13px; }
}
#service .contact_btn_wrap { text-align: center; }
#service .contact_btn { position: relative; display: inline-block; min-width: 280px; font-size: 16px; font-weight: 500; color: #fff; text-align: center; padding: 20px 60px; background: #e60012; border-radius: 50px; transition: all 0.3s ease; }
#service .contact_btn .icon_mail { position: absolute; top: 50%; left: 30px; transform: translateY(-50%); }
#service .contact_btn .icon_mail::before { font-family: "fontello"; font-style: normal; font-weight: normal; display: inline-block; text-decoration: inherit; text-align: center; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: "\e802"; font-size: 20px; }
#service .contact_btn::after { position: absolute; font-family: "fontello"; font-style: normal; font-weight: normal; display: inline-block; text-decoration: inherit; text-align: center; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: "\e801"; top: 50%; right: 25px; transform: translateY(-50%); transition: all 0.3s ease; }
#service .contact_btn:hover { opacity: 0.8; }
#service .contact_btn:hover::after { right: 20px; }

/*--------------------------
plant page（/service/plant/、accordion_body 内をテキスト＋画像グリッドの2カラムにする）
---------------------------*/
.plant .main_visual_inner { background-image: url(/asset/image/service/service_category01_visual.webp); }
#service .plant .details_body_inner { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: 40px; }
#service .plant .details_body_inner .txt_box p { font-size: 15px; line-height: 1.9; color: #333130; margin: 0 0 15px; }
#service .plant .details_body_inner .txt_box p:last-child { margin: 0; }
#service .plant .details_body_inner .txt_box h4 { margin-top: 20px; }
#service .plant .details_img_list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
#service .plant .details_img_list li { aspect-ratio: 4 / 3; overflow: hidden; border-radius: 4px; }
#service .plant .details_img_list li:only-child { grid-column: 1 / -1; }
#service .plant .details_img_list li.is-tall { order: -1; grid-column: 2; grid-row: 1 / span 2; aspect-ratio: auto; }
#service .plant .details_img_list li img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media only screen and (max-width: 1170px) {
  #service .plant .details_body_inner { gap: 25px; }
}
@media only screen and (max-width: 768px) {
  #service .plant .details_body_inner { grid-template-columns: 1fr; }
}

/*--------------------------
oem page（/service/oem/）
---------------------------*/
.oem .main_visual_inner { background-image: url(/asset/image/service/service_category01_visual.webp); }
#service .point_list { display: flex; flex-direction: column; gap: 40px; margin: 0 0 60px; }
#service .point_item { display: flex; align-items: center; gap: 40px; padding: 40px 50px; background: #eef1fa; border-radius: 4px; }
#service .point_head { flex-shrink: 0; width: 130px; text-align: center; }
#service .point_head .point_num { display: block; font-family: "Roboto", sans-serif; font-size: 15px; font-weight: 500; letter-spacing: 2px; color: #0e3476; margin: 0 0 8px; }
#service .point_head h4 { font-size: 30px; font-weight: 700; color: #0e3476; }
#service .point_circle { flex-shrink: 0; width: 220px; }
#service .point_circle .circle_img { display: block; width: 220px; height: 220px; border-radius: 50%; object-fit: cover; }
#service .point_content { flex: 1; min-width: 0; }
#service .point_txt { font-size: 15px; line-height: 1.9; color: #333130; margin: 0 0 15px; }
#service .point_txt:last-of-type { margin: 0 0 25px; }
#service .point_item .link_btn { max-width: 320px; }
@media only screen and (max-width: 1170px) {
  #service .point_item { gap: 25px; padding: 30px; }
  #service .point_head { width: 100px; }
  #service .point_head h4 { font-size: 24px; }
  #service .point_circle { width: 165px; }
  #service .point_circle .circle_img { width: 165px; height: 165px; }
}
@media only screen and (max-width: 768px) {
  #service .point_item { flex-wrap: wrap; }
  #service .point_head { width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0 0 15px; }
  #service .point_head .point_num { margin: 0; }
  #service .point_head h4 { margin: 0; }
  #service .point_circle { width: 100%; margin: 0 auto; }
  #service .point_circle .circle_img { width: 100%; height: auto; border-radius: 0; object-fit: contain; }
  #service .point_content { flex-basis: 100%; }
}
@media only screen and (max-width: 560px) {
  #service .point_item { padding: 25px 20px; gap: 15px; }
  #service .point_head h4 { font-size: 20px; }
  #service .point_txt { font-size: 13px; }
}

/*--------------------------
sq_title（■付き小見出し／procurement・oem などリニューアル済み下層ページ共通）
---------------------------*/
#service .sq_title { position: relative; font-size: 18px; font-weight: 500; padding: 0 0 0 20px; margin: 0 0 15px; }
#service .sq_title::before { position: absolute; content: "■"; color: #0e3476; left: 0; }
@media only screen and (max-width: 1170px) {
  #service .sq_title { font-size: 16px; padding: 0 0 0 15px; margin: 0 0 12px; }
}

/*--------------------------
agency page（/service/agency/）
---------------------------*/
.agency .main_visual_inner { background-image: url(/asset/image/service/service_category02_visual.webp); }
#service .reason_list { display: flex; gap: 0px; margin: 40px 0 60px; }
#service .reason_item { flex: 1; padding: 40px 30px; background: #fff; border: 1px solid #bfbfbf; text-align: center; }
#service .reason_icon { margin: 0 0 20px; }
#service .reason_icon img { display: block; width: 120px; max-width: 100%; height: auto; margin: 0 auto; }
#service .reason_item h3 { font-size: 18px; font-weight: 700; color: #333130; margin: 0 0 15px; }
#service .reason_item p { font-size: 14px; line-height: 1.8; color: #333130; text-align: left; }
@media only screen and (max-width: 1170px) {
  #service .reason_list { gap: 15px; margin: 30px 0 50px; }
  #service .reason_item { padding: 25px 15px; }
  #service .reason_item h3 { font-size: 17px; }
  #service .reason_item p { font-size: 13px; }
}
@media only screen and (max-width: 768px) {
  #service .reason_list { flex-direction: column; }
}

#service .sq_list { margin: 0 0 80px; }
#service .sq_item { margin: 0 0 25px; }
#service .sq_item:last-child { margin: 0; }
#service .sq_item p { font-size: 15px; line-height: 1.9; color: #333130; padding-left: 20px; }
@media only screen and (max-width: 1170px) {
  #service .sq_item p { padding-left: 20px; font-size: 14px; }
}

#service .license_list { display: flex; gap: 50px; margin: 30px 0 60px; }
#service .license_item { flex: 1; }
#service .license_item h4 { font-size: 18px; font-weight: 700; text-align: center; color: #333130; margin: 0 0 20px; }
#service .license_item .accordion_head h4 { margin-bottom: 0; }
#service .license_img_box { padding: 30px; border: 1px solid #d9d9d9; border-radius: 4px; }
#service .license_img { margin: 0 0 25px; }
#service .license_img:last-child { margin: 0; }
#service .license_img img { display: block; width: 100%; height: auto; }
@media only screen and (max-width: 1170px) {
  #service .license_img_box { padding: 20px; }
  #service .license_img { margin: 0 0 20px; }
}
@media only screen and (max-width: 768px) {
  #service .license_list { flex-direction: column; gap: 40px; }
}

#service .btn_center { text-align: center; margin: 0 0 50px; }
#service .btn_center .link_btn { display: inline-block; width: auto; }

/*--------------------------
table（危険品取扱範囲などの表組み共通）
---------------------------*/
article table { width: 100%; }
article table tr th, article table tr td { font-size: 16px; line-height: 1.4; text-align: left; padding: 15px; border: 1px solid #ebebeb; }
@media only screen and (max-width: 560px) {
  article table tr th, article table tr td { display: block; font-size: 14px; }
}
article table tr th { font-weight: 500; vertical-align: top; background: #eef1fa; }
@media only screen and (max-width: 560px) {
  article table tr th { border-bottom: none; }
}
@media only screen and (max-width: 560px) {
  article table tr td { border-top: none; border-bottom: none; }
}
article table tr:last-child td { border-bottom: 1px solid #ebebeb; }
#service .trading_table { table-layout: fixed; }
@media only screen and (max-width: 560px) {
  #service .trading_table tr th, #service .trading_table tr td { display: table-cell; border: 1px solid #ebebeb; }
}
#service .trading_table tr th { text-align: center; }
#service .trading_table tr:nth-child(odd) td { background: rgba(14, 52, 118, 0.02); }
#service .trading_grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
#service .trading_col h4 { font-size: 18px; font-weight: 700; text-align: center; color: #333130; margin: 0 0 20px; }
#service .trading_table_wrap { overflow-x: auto; }
/* 「危険品取扱範囲」は一つのアコーディオンにまとめ、開くと2社分の表とテキストがまとめて表示される（PC専用。スマホでは license_item 側の trading_accordion_sp に置き換えるため非表示） */
@media only screen and (max-width: 768px) {
  #service .trading_pc_only { display: none; }
}
/* スマホ専用：各社の license_item 内に埋め込む「危険品取扱範囲」アコーディオン（片方を開いてももう片方は閉じない） */
#service .trading_accordion_sp { margin: 20px 0 0; }
/* ボタンの文字とアイコンの縦位置を揃える（絶対配置ではなくflexの通常配置にする） */
#service .trading_accordion_sp .accordion_head .icon { position: relative; top: auto; right: auto; transform: none; flex-shrink: 0; margin-left: auto; }
/* 表組の左右幅をボタンの左右幅と揃えるため、accordion_body の左右paddingを0に */
#service .trading_accordion_sp .accordion_body { padding: 12px 0 20px; }
#service .trading_accordion_sp .trading_note { font-size: 13px; line-height: 1.8; color: #333130; padding: 0 20px; margin: 0 0 15px; }
@media only screen and (min-width: 769px) {
  #service .trading_accordion_sp { display: none; }
}

/*--------------------------
nmpa page（/service/nmpa/）
---------------------------*/
.nmpa .main_visual_inner { background-image: url(/asset/image/service/service_category02_visual.webp); }
#service .catch_ttl { font-size: 28px; font-weight: 700; line-height: 1.6; text-align: center; color: #333130; margin: 0 0 50px; }
@media only screen and (max-width: 1170px) {
  #service .catch_ttl { font-size: 22px; margin: 0 0 35px; }
}
@media only screen and (max-width: 560px) {
  #service .catch_ttl { font-size: 18px; }
}

#service .reason_grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin: 40px 0 60px; }
#service .reason_grid_item { padding: 35px 40px; background: #f7f7f7; border-radius: 4px; }
#service .reason_grid_item h3 { font-size: 18px; font-weight: 700; color: #0e3476; margin: 0 0 15px; }
#service .reason_grid_item p { font-size: 15px; line-height: 1.9; color: #333130; }
@media only screen and (max-width: 1170px) {
  #service .reason_grid { gap: 20px; margin: 30px 0 50px; }
  #service .reason_grid_item { padding: 25px; }
  #service .reason_grid_item h3 { font-size: 16px; }
  #service .reason_grid_item p { font-size: 14px; }
}
@media only screen and (max-width: 768px) {
  #service .reason_grid { grid-template-columns: 1fr; gap: 20px; }
}

#service .nmpa .flow_num_list { margin: 30px 0 60px; }
#service .nmpa .flow_num_item { display: flex; align-items: flex-start; gap: 15px; margin: 0 0 30px; }
#service .nmpa .flow_num_item:last-child { margin: 0; }
#service .nmpa .flow_num { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: #0e3476; color: #fff; font-size: 18px; font-weight: 700; font-family: "Roboto", sans-serif; }
#service .nmpa .flow_num_content h3 { font-size: 17px; font-weight: 700; color: #0e3476; margin: 0 0 10px; }
#service .nmpa .flow_num_content p { font-size: 15px; line-height: 1.8; color: #333130; }
@media only screen and (max-width: 1170px) {
  #service .nmpa .flow_num_item { gap: 12px; margin: 0 0 25px; }
  #service .nmpa .flow_num { width: 36px; height: 36px; font-size: 15px; }
  #service .nmpa .flow_num_content h3 { font-size: 15px; }
  #service .nmpa .flow_num_content p { font-size: 14px; }
}

#service .contact_btn.is-navy { background: #0e3476; }
#service .contact_btn .icon_tel { position: absolute; top: 50%; left: 30px; transform: translateY(-50%); font-size: 16px; }
#service .contact_btn_wrap.is-multi { display: flex; justify-content: center; flex-wrap: wrap; gap: 20px; }

/*--------------------------
ichiwa page（/service/ichiwa/）
---------------------------*/
.ichiwa .main_visual_inner { background-image: url(/asset/image/service/service_category03_visual.webp); }
#service .ichiwa .lineup_item { margin: 0 0 60px; }
#service .ichiwa .lineup_item .txt_box .txt { margin: 0 0 20px; }
#service .ichiwa .lineup_item .txt_box .txt:last-child { margin: 0; }
@media only screen and (min-width: 769px) {
  #service .ichiwa .lineup_item .img_box { width: 42%; }
  #service .ichiwa .lineup_item .txt_box { width: 58%; }
}
@media only screen and (max-width: 1170px) {
  #service .ichiwa .lineup_item { margin: 0 0 40px; }
}
#service .ichiwa_txt p { font-size: 15px; line-height: 1.9; color: #333130; margin: 0 0 20px; }
#service .ichiwa_txt p:last-child { margin: 0 0 30px; }
#service .img_row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 36px; margin: 0 0 20px; }
#service .img_row:last-child { margin: 0; }
#service .img_row.cols-3 { grid-template-columns: repeat(3, 1fr); }
#service .img_block img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 4px; }
#service .img_caption { position: relative; font-size: 14px; font-weight: 500; color: #333130; padding-left: 16px; margin: 10px 0 0; }
#service .img_caption::before { position: absolute; content: "■"; left: 0; top: 2px; color: #0e3476; font-size: 10px; }
@media only screen and (max-width: 1170px) {
  #service .img_row.cols-3 { grid-template-columns: repeat(2, 1fr); }
}
@media only screen and (max-width: 768px) {
  #service .img_row { grid-template-columns: 1fr; gap: 15px; }
}

/* cols-1-1-2: 3カラムを25%・25%・50%の幅比率で並べる（画像は元の縦横比のままトリミングしない） */
#service .img_row.cols-1-1-2 { grid-template-columns: 1fr 1fr 2fr; }
#service .img_row.cols-1-1-2 .img_block img { aspect-ratio: auto; object-fit: contain; }

#service .formula { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 15px; margin: 30px 0; }
#service .formula_operator { font-size: 24px; font-weight: 700; color: #333130; }
#service .formula_item { font-size: 16px; font-weight: 500; color: #333130; line-height: 1.5; padding: 18px 30px; text-align: center; background: #f7f7f7; border: 1px solid #d9d9d9; border-radius: 50px; }
#service .formula_item.is-result { color: #fff; background: #0e3476; border-color: #0e3476; }
@media only screen and (max-width: 768px) {
  #service .formula { flex-direction: column; }
  #service .formula_item { padding: 15px 20px; font-size: 14px; }
}

/*--------------------------
lib page（/service/lib/）
---------------------------*/
.lib .main_visual_inner { background-image: url(/asset/image/service/service_category02_visual.webp); }
#service .diagram_img { margin: 0 0 80px; }
#service .diagram_img img { display: block; width: 100%; height: auto; }
@media only screen and (max-width: 768px) {
  #service .diagram_img { margin: 0 0 40px; }
}
#service .lib .diagram_img img { width: 1100px; max-width: 100%; margin: 0 auto; }
#service .delivery .diagram_img img { width: 1100px; max-width: 100%; margin: 0 auto; }
#service .bangkok .diagram_img img { width: 1100px; max-width: 100%; margin: 0 auto; }

/*--------------------------
delivery page（/service/delivery/）
---------------------------*/
.delivery .main_visual_inner { background-image: url(/asset/image/service/service_category03_visual.webp); }
#service .bnr_ttl { display: flex; align-items: center; justify-content: center; padding: 15px 30px; background: #ebebeb; font-size: 16px; font-weight: 700; line-height: 1.6; text-align: center;}
#service .gallery_grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 20px 0 40px; }
#service .gallery_grid li { overflow: hidden; border-radius: 4px; }
#service .gallery_grid li img { display: block; width: 100%; height: 100%; object-fit: cover; }
#service .gallery_grid li:not(.is-tall) { aspect-ratio: 4 / 3; }
#service .gallery_grid li.is-tall { grid-row: span 2; }
#service .bnr_grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; }
#service .bnr_img_row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 16px 0 0; }
#service .bnr_img_row img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 4px; }
@media only screen and (max-width: 1170px) {
  #service .bnr_ttl { font-size: 16px; padding: 16px 20px; }
}
@media only screen and (max-width: 768px) {
  #service .gallery_grid { grid-template-columns: repeat(2, 1fr); }
  /* is-tall（delivery_img05）はimg06・img07の2枚と組ませて右側に縦長配置 */
  #service .gallery_grid li.is-tall { grid-column: 2; grid-row: 3 / span 2; aspect-ratio: auto; }
  #service .gallery_grid li:nth-child(5) { grid-column: 1; grid-row: 3; }
  #service .gallery_grid li:nth-child(6) { grid-column: 1; grid-row: 4; }
  #service .gallery_grid li:nth-child(7) { grid-column: 2; grid-row: 2; }
  #service .bnr_grid { grid-template-columns: 1fr; gap: 40px; }
}

/*--------------------------
bangkok page（/service/bangkok/）
---------------------------*/
.bangkok .main_visual_inner { background-image: url(/asset/image/service/service_category04_visual.webp); }
.bangkok .section_title01 { margin-bottom: 15px; }
#service .callout_grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 60px; margin: 60px auto 0 auto; width: 800px; max-width: 100%; }
#service .callout_item { text-align: center; }
#service .callout_badge { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 270px; height: 270px; border-radius: 50%; margin: 0 auto 35px; }
#service .callout_item.is-pink .callout_badge { background: #fbe4e8; }
#service .callout_item.is-blue .callout_badge { background: #dbe8f7; }
#service .callout_label { font-size: 24px; font-weight: 700; color: #333130; line-height: 4.8; }
#service .callout_ttl { display: block; font-size: 70px; font-weight: 700; line-height: 0; }
#service .callout_item.is-pink .callout_ttl { color: #e60012; }
#service .callout_item.is-blue .callout_ttl { color: #0e3476; }
#service .callout_item .dot_list { text-align: left; max-width: 400px; margin: 0 auto; }
#service .dot_list li { position: relative; padding-left: 11px; font-size: 15px; line-height: 1.6; color: #333130; margin: 0 0 10px; }
#service .dot_list li:last-child { margin: 0; }
#service .dot_list li::before { content: ""; position: absolute; left: 0; top: 9px; width: 8px; height: 8px; border-radius: 50%; }
#service .is-pink .dot_list li::before { background: #f8a0a7; }
#service .is-blue .dot_list li::before { background: #b8d0fa; }
#service .icon_grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 40px 20px; margin: 50px 0 80px; }
#service .icon_item { text-align: center; }
#service .icon_item img { display: block; width: 100px; height: 100px; margin: 0 auto 15px; object-fit: contain; }
#service .icon_item figcaption { font-size: 14px; font-weight: 500; color: #333130; line-height: 1.5; }
#service .contact_grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: start; margin: 30px 0 0; }
#service .address_txt { font-size: 16px; line-height: 1.8; color: #333130; margin: 0 0 20px; }
#service .station_list { /*display: flex; gap: 8px;*/ font-size: 14px; line-height: 1.8; color: #333130; margin: 0 0 30px; }
#service .station_list dd p { margin: 0; }
#service .contact_note { font-size: 15px; color: #333130; margin: 20px 0 20px; }
#service .contact_sub_wrap { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 0px; margin: 50px auto 0 auto; width: 380px; max-width: 100%; }
#service .tel_block { display: flex; align-items: center; gap: 12px; width: 200px; max-width: 100%; }
#service .tel_block img { width: 28px; height: auto; flex-shrink: 0; }
#service .tel_nums { display: flex; flex-direction: column; font-size: 15px; font-weight: 700; line-height: 1.6; }
#service .tel_nums a { color: #333130; }
#service .qr_block img { height: 94px; width: 140px; }
#service .contact_visual { display: flex; flex-direction: column; gap: 16px; }
#service .contact_visual img { display: block; width: 100%; height: auto; border-radius: 4px; }
@media only screen and (max-width: 1170px) {
  #service .callout_badge { width: 190px; height: 190px; }
  #service .callout_ttl { font-size: 36px; }
  #service .icon_grid { grid-template-columns: repeat(5, 1fr); gap: 30px 15px; }
}
@media only screen and (max-width: 768px) {
  #service .callout_grid { grid-template-columns: 1fr; gap: 40px; }
  #service .callout_label { font-size: 16px; font-weight: 600; color: #333130; line-height: 4.8; }
  #service .icon_grid { grid-template-columns: repeat(2, 1fr); gap: 30px 15px; }
  #service .contact_grid { grid-template-columns: minmax(0, 1fr); gap: 10px; overflow-x: hidden; }
  #service .station_list { flex-direction: column; gap: 2px; margin-bottom: 0; }
  #service .contact_note { line-height: 1.5; }
  /* スマホ限定：画像・地図を本文の間に差し込む表示順（PCのレイアウトには影響しません） */
  #service .contact_info, #service .contact_visual { display: contents; }
  /* 画像・iframeの実寸（min-content）でグリッド列が広がり、はみ出すのを防ぐ */
  #service .contact_visual figure, #service .contact_visual iframe, #service .contact_visual img { min-width: 0; max-width: 100%; box-sizing: border-box; }
  #service .contact_visual figure { order: 1; }
  #service .address_txt { order: 2; }
  #service .contact_visual iframe { order: 3; width: 100%; height: 300px; }
  #service .station_list { order: 4; }
  #service .contact_note { order: 5; }
  #service .contact_btn_wrap { order: 6; }
  #service .contact_sub_wrap { order: 7; }
}

/*--------------------------
related_nav（各下層ページ共通「サービス一覧（全カテゴリ・全ページ）」・試験導入としてまず procurement のみ）
現在地の見せ方：上段＝現在のカテゴリ（related_current）／下段＝他の3カテゴリ（related_others）で段を分離。
ボタンは通常グレー、hoverで本来の色（紺 or 赤）が浮かび上がり、現在ページのボタンだけ常時その色を表示。
---------------------------*/
#service .related_nav { margin: 60px 0 0; padding: 40px 0 0; border-top: 1px solid #d9d9d9; }
#service .related_category_ttl { flex-shrink: 0; width: 240px; font-size: 14px; font-weight: 700; color: #333130; margin: 0; }
#service .related_nav .btn_list { display: flex; flex-wrap: wrap; flex: 1; gap: 10px; margin: 0; }
#service .related_nav .btn_list li { margin: 0; }
#service .related_nav .btn_list .link_btn { display: block; width: 290px; flex-shrink: 0; box-sizing: border-box; font-size: 13px; padding: 12px 50px 12px 20px; }
#service .related_nav .btn_list .link_btn.is-current { color: #fff; background: #bfbfbf; padding: 12px 20px; pointer-events: none; }
#service .related_nav .btn_list .link_btn.is-current::after { content: none; }

#service .related_current { display: flex; align-items: center; gap: 30px; margin: 0 0 30px; }
#service .related_others { display: flex; flex-direction: column; gap: 20px; padding: 30px 0 0; border-top: 1px solid #d9d9d9; }
#service .related_others .related_category { display: flex; align-items: center; gap: 30px; }
@media only screen and (max-width: 768px) {
  #service .related_current, #service .related_others .related_category { flex-direction: column; align-items: stretch; gap: 15px; }
  #service .related_category_ttl { width: auto; }
  #service .related_nav .btn_list { flex-direction: column; }
  #service .related_nav .btn_list .link_btn { width: 100%; }
}
@media only screen and (max-width: 560px) {
  #service .related_nav { margin: 40px 0 0; padding: 30px 0 0; }
  #service .related_current { margin: 0 0 25px; }
  #service .related_others { padding: 25px 0 0; }
}