@charset "utf-8";

/* ================================
   A modern CSS reset | MIT License
   https://github.com/Andy-set-studio/modern-css-reset
   ブラウザによる表示の差異を無くしつつも、ある程度スタイルを整えてくれるリセットCSS
   reset初心者には使いやすいと思われる
================================ */
*,*::before,*::after {box-sizing: border-box;}
body,h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd,ul,ol{margin: 0;}
ul[role="list"],ol[role="list"] {list-style: none;}
html:focus-within { scroll-behavior: smooth;}
body { min-height: 100vh; text-rendering: optimizeSpeed; line-height: 1.5;}
a:not([class]) { text-decoration-skip-ink: auto;}
img,picture {max-width: 100%; height: auto; display: block; vertical-align: bottom;}
input,button,textarea,select {font: inherit;}
@media (prefers-reduced-motion: reduce) {
  html:focus-within { scroll-behavior: auto;}
  *,*::before,*::after {animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important;}
}
/*==================================
  additional reset DJ
================================= */
ul,ol,ul li,ol li{ margin: 0; padding: 0;}
table{ border-collapse: collapse; border: none; border-spacing: 0;}
th,td{ vertical-align:top; font-weight:normal; text-align:left;}

/*==================================
  common.css
================================= */


:root {
  --color-main: #00506E;
  --color-mainlight: #0085B7;
  --color-accent: #0C3F68;
  --color-red: rgba(255,0,39,1.00);
  --color-backgray: #E4ECEF;
  --color-fontgray: rgba(201,217,223,0.33);
  --box-width: 90%;
  --box-max-width-l: 1920px;
  --box-max-width-m: 1400px;
  --box-max-width-s: 1200px;
  --sp-m: 100px;
  --sp-ms: 50px;
  --sp-s: 16px;
}
@media screen and (max-width: 767px) {
  :root {
    --sp-m: 40px;
    --sp-ms: 22px;
    --sp-s: 10px;
  }
}

html { overflow-y: scroll; font-size: 62.5%; scroll-behavior: smooth; }
body{ font-family: 'Noto Sans JP', sans-serif; font-size: 1.8rem; font-optical-sizing: auto; font-style: normal; font-weight: 400; line-height: 1.8; letter-spacing: 0.5px; color: #000; background-color: #fff; }
select, input, textarea, button, table{ font-family: 'Noto Sans JP', sans-serif; font-size: 1.8rem; font-optical-sizing: auto; font-style: normal; font-weight: 400; line-height: 1.8; letter-spacing: 0.5px; color: #000; }
@media screen and (max-width: 767px) {
  body{ font-size: 1.4rem; }
  select, input, textarea, button, table{ font-size: 1.4rem; }
}

a{ text-decoration:none;}
a:link{ color: var(--color-main);}
a:visited{ color: var(--color-main);}
a:hover{ color: var(--color-mainlight);}
a:active{ color: var(--color-mainlight);}
a:active, a:focus{ outline:none;}

small{ font-size: 1.1rem; }

.pt_1{ padding-top: 1px;}
.pt_m{ padding-top: var(--sp-m);}
.pt_ms{ padding-top: var(--sp-ms);}
.pt_s{ padding-top: var(--sp-s);}
.pb_m{ padding-bottom: var(--sp-m);}
.pb_ms{ padding-bottom: var(--sp-ms);}
.pb_s{ padding-bottom: var(--sp-s);}
.mt_m{ margin-top: var(--sp-m);}
.mt_ms{ margin-top: var(--sp-ms);}
.mt_s{ margin-top: var(--sp-s);}
.mb_m{ margin-bottom: var(--sp-m);}
.mb_ms{ margin-bottom: var(--sp-ms);}
.mb_s{ margin-bottom: var(--sp-s);}
.mlr_auto{ margin-left: auto; margin-right: auto;}
.text-center{ text-align: center;}
.text-right{ text-align: right;}
.font_serif{ font-family: "Noto Serif JP", serif; font-weight: 800;}
.break{ display: inline-block;}

/* Pagetop */
.pagetop{ display: none; position: fixed;	bottom: 40px;	right: 2px;	z-index:99;}
.pagetop a{ display: block; text-align: center; background-color: rgba(255,255,255,0.47); border: 1px solid gba(0,0,0,0.53); color: #000; text-decoration: none; font-size:20px; line-height:20px; padding: 10px 2px 10px 2px;}
.pagetop a em{ display: block; font-family: Arial, Helvetica, "sans-serif"; font-size: 10px; line-height: 10px; font-style: normal; letter-spacing: 0; padding-top: 5px; white-space: nowrap; }
@media screen and (max-width: 640px) {
  .pagetop a{ display: block; /*width: 80px;*/ font-size:18px; line-height:18px; padding-top: 4px;}
  .pagetop a em{ font-size: 9px; line-height: 9px;}
}

/* MT Pagebute pagelist */
.pagenationnav{ position:relative; margin: 60px auto 0 auto; width: 90%; display: flex; justify-content: center; column-gap: 5px;}
.pagenationnav a{ font-size: 15px; line-height: 1.2; padding: 8px 10px; border: 1px solid #ccc; border-radius: 25px; transition: all 0.6s;}
.pagenationnav a:hover{ border: 1px solid #555;}
@media screen and (max-width: 640px) {
  .pagenationnav{ margin: 30px auto 0 auto; column-gap: 3px;}
  .pagenationnav a{ font-size: 13px; line-height: 1.2; padding: 5px 5px;}
}

/*==================================
  style.css
================================= */

/* 共通部品 */

a.btn1{ display: block; position: relative; font-weight: 500; line-height: 1.8; color: #fff; text-align: center; background-color: #000; border: 2px solid #000; padding: 8px 10px 12px 10px; border-radius: 40px; transition: all 0.6s; }
a.btn1_w1{  max-width: 366px; width: 80%; font-size: 18px;}
a.btn1_1 i{ transform: translateY(5px); margin-right: 0.5em; }
a.btn1_2 i{ position: absolute; top: 50%; right: 12px; transform: translateY(-50%); }
a.btn1:hover{ color: #000; background-color: #fff; }
@media screen and (max-width: 767px) {
  a.btn1{ max-width: 270px; font-size: 14px; line-height: 1.8; padding: 5px 10px 7px 10px; border-radius: 40px; }
}
.wrap1{ width: 100%; padding: var(--sp-m) 1px;}
.wrap2{ width: 100%; padding: 1px;}
.wrap3{ max-width: 1000px; margin-left: auto; margin-right: auto;}
.back_gray{ background-color: var(--color-backgray); position: relative;}
@media screen and (max-width: 640px) {
  .wrap1{ width: 100%; padding-top: 40px; }
}

.title1{ max-width: var(--box-max-width-m); width: var(--box-width); font-family: "Noto Serif JP", serif; font-weight: 800; font-size: 32px; line-height: 1.0; text-align: center;}
.title2{ font-weight: 500; font-size: 24px; line-height: 1.6; text-align: center;}
.title3{ font-family: "Noto Serif JP", serif; font-weight: 800; font-size: 32px; line-height: 1.6; position: relative;}
@media screen and (max-width: 767px) {
  .title1{ font-size: 2.4rem; line-height: 1.4;}
  .title2{ font-size: 2.0rem;}
  .title3{ font-size: 2.4rem;}
}

.text1{ font-size: 2.0rem;}
@media screen and (max-width: 767px) {
  .text1{ font-size: 1.4rem;}
}
.text1 p{ margin-bottom: 0.6em;}
.text1 p:last-child{ margin-bottom: 0;}

.textbox1{ max-width: 1000px; margin-left: auto; margin-right: auto;}

/* header & nav */

.header{ z-index: 98; position: fixed; width: 100%; height: 100px; padding: 0 50px; display: flex; justify-content: space-between; align-items: center; background-color: rgba(255,255,255,0.20); backdrop-filter: blur(2px);}
.logo{ max-width: 220px; width: 70%; font-size: 12px; line-height: 1.0;}
.logo a{ display: block; color:#000; text-align: center;}
.logo a span{ display: block; margin-top: 8px;}
@media screen and (max-width: 1000px) {
  .header{ height: 70px; padding: 0 20px; display: flex; justify-content: space-between; align-items: center; background-color: rgba(255,255,255,0.20); backdrop-filter: blur(5px);}
  .logo{ font-size: 10px;}
  .logo img{ max-width: 170px;}
  .logo a span{ margin-top: 5px;}
}
@media screen and (max-width: 767px) {
  .header{ padding: 5px 20px;}
}

main{ overflow: hidden;}

/* :::::: nav_pc :::::: */

.nav_pc{ position: relative;}
.nav_pc ul{ display: flex; justify-content: flex-end;}
.nav_pc ul li{ display: block;}
.nav_pc ul li a{ display: block; padding: 8px 15px; color: #000; font-size: 14px; line-height: 1.2; font-weight: 500; transition: all .6s; border-top: 1px solid rgba(255,255,255,0.00); border-bottom: 1px solid rgba(255,255,255,0.00); filter: drop-shadow(0 0 3px rgba(255,255,255,0.60));}
.nav_pc ul li a:hover{ color: #000; background-color: rgba(255,255,255,0.20); border-top: 1px solid rgba(255,255,255,1.00); border-bottom: 1px solid rgba(255,255,255,1.00);}
.nav_pc ul li.nav_rec a{ border: 2px solid #fff; border-radius: 40px;}
.nav_pc ul li.nav_rec a:hover{ border: 2px solid #fff;}
.nav_pc ul li.nav_rec{ position: relative;}
.nav_pc ul li.nav_rec::before{ position: absolute; content: "未経験者大歓迎！"; top: -20px; left: 50%; transform: translateX(-50%); font-size: 10px; line-height: 1.0; text-align: center;  padding-bottom: 4px; width: 95%; color: #fff; border-bottom: 1px solid #fff;}
.nav_pc ul li.nav_rec::after{ position: absolute; content: ""; width: 12px; top: -9px; left: 50%; border-bottom: 1px solid #fff; transform: rotate(-45deg) translateX(-50%);}
@media screen and (max-width: 1000px) {
  .nav_pc ul li a{ padding: 10px 8px; font-size: 14px;}
  .nav_pc ul li.nav_rec::before,.nav_pc ul li.nav_rec::after{ display:none;}

}
@media screen and (max-width: 767px) {
  .nav_pc{ display: none;}
}

/* :::::: nav_sp :::::: */

#navTgl{ display: none;}
.open,.close{ cursor: pointer; position: fixed; top: 10px; right: 10px; display: none;}
.open { background-color: rgba(255,255,255,0.00); z-index: 101; width: 50px; height: 50px; border: 1px solid #000; border-radius: 50%; transition: all .6s;}
.open span,.open::before,.open::after { position: absolute; top: 24px; left: 10px; content: ""; width: 30px; height: 2px; background-color: #000; transition: all .6s;}
.open::before { transform: translateY(-6px);}
.open::after { transform: translateY(6px);}
.close { background-color: rgba(0,80,110,0.0); z-index: 99; width: 50px; height: 50px; border-radius: 50%; pointer-events: none; transition: background .6s;}
#navTgl:checked + .open{ border: 1px solid #fff;}
#navTgl:checked + .open span { transform: scaleX(0);}
#navTgl:checked + .open::before { transform: rotate(135deg); background-color: #fff; }
#navTgl:checked + .open::after { transform: rotate(-135deg); background-color: #fff; }
#navTgl:checked ~ .close { pointer-events: auto;}
.open:hover { background-color: rgba(255,255,255,0.30); }
.nav_sp { z-index: 100; position: fixed; overflow: auto; top: 0; right: 0; width: 100%; height: 100%; background: rgba(0,80,110,0.9)/*rgba(0,0,0,.8)*/; display: flex; justify-content: center; align-items: center; transform: translateX(100%); transition: all .6s;}
.nav_sp div{ width: 90%; max-width: 400px;}
.nav_sp h2,.nav_sp a { color: #FFF;}
.nav_sp h2 { text-align: center; background-color: rgba(255,255,255,.2);}
.nav_sp ul { margin: 0; padding: 0;}
.nav_sp li { list-style: none; font-size: 16px; text-align: center; line-height: 1.4; border-bottom: 1px solid rgba(255,255,255,.2);}
.nav_sp a { display: block; padding: 1.5em 2em; text-decoration: inherit; transition: all .6s;}
#navTgl ~ .nav_sp { transform: translateX(100%);}
#navTgl:checked ~ .nav_sp { transform: none;}
@media screen and (max-width: 767px) {
  .open,.close{ top: 10px; right: 10px; display: block;}
}

/* footer */

.footer{ width: 100%; background: url("../images/service2-2.jpg") center center; background-size: cover;}
.footer_cover{ width: 100%; background-color: rgba(0,0,0,0.6); padding: 100px 10% 30px 10%;}
.footer_logo_address{ display: flex; justify-content: center; width: 400px; margin: 0 auto 50px auto; gap: 30px;}
.footer_logo{ width: 150px;}
.footer_address{ font-size: 12px; line-height: 1.8; color: #fff;}
a.btn_access{ display: inline-block; line-height: 1.2; margin-top: 5px; padding: 0px 8px 1px 10px; border: 1px solid #75A0B0;}
a.btn_access i{ font-size: 13px; vertical-align: -20%;}
a.btn_access:hover{ background-color: rgba(255,255,255,0.15);}
.footer_nav ul{ margin-bottom: 80px; display: flex; justify-content: center; list-style: none; font-size: 1.2rem;}
.footer_nav ul li{ margin: 0 10px;}
.footer a{ color: #75A0B0;}
.footer a:hover{ color: #fff;}
small.footer_copy{ display: block; text-align: center; color: #fff; font-family: "Roboto", sans-serif; font-weight: 200; font-style: normal; font-variation-settings: "wdth" 100;}
@media screen and (max-width: 767px) {
  .footer_cover{ padding: 40px 10% 20px 10%;}
  .footer_logo_address{ margin: 0 auto 30px auto; gap: 20px;}
  .footer_nav ul{ margin-bottom: 30px;}
}
@media screen and (max-width: 640px) {
  .footer_cover{ padding: 30px 5% 70px 5%;}
  .footer_logo_address{ display: block; width: 90%; margin: 0 auto 30px auto;}
  .footer_logo{ width: 120px; margin: 0 auto 20px auto;}
  .footer_address{ line-height: 1.8; color: #fff; text-align: center;}
  .footer_nav{ display: none;}
}

/* footer contact */

.footer_contact{ width: 100%; position: fixed; bottom: 0; display: none; z-index: 110; }
.footer_contact div{ width: calc(50% - 1px); color: #fff; text-align: center; }
.footer_contact div a{ display: block; color: #fff; padding: 10px 10px; }
.footer_contact_btn{ background-color: var(--color-main); font-size: 12px; line-height: 1.0; font-weight: 300;}
.footer_contact_btn span{ font-size: 24px; color: rgba(255,255,255,0.50);}
@media screen and (max-width: 640px) {
  .footer_contact{ display: flex; justify-content: space-between; }
}

/* recruit banner */

.rec_banner{ width: var(--box-width); max-width: 1400px; padding: 40px 0; display: grid; grid-template-columns: 400px 1fr 250px; column-gap: 3%;}
.rec_banner_img{ height: 284px; overflow: hidden; border-radius: 20px;}
.rec_banner_img img{ width: 100%; height: 100%; object-fit: cover;}
.rec_banner_text,.rec_banner_btn{ display: grid; place-content: center;}
.rec_banner_btn a{ display: block; width: 250px; position: relative; font-weight: 500; line-height: 1.8; color: #fff; text-align: center; background-color: #000; border: 2px solid #000; padding: 8px 10px 12px 10px; border-radius: 40px; transition: all 0.6s;}
.rec_banner_btn a i{ position: absolute; top: 50%; right: 12px; transform: translateY(-50%); }
.rec_banner_btn a:hover{ color: #000; background-color: #fff; }
@media screen and (max-width: 1200px) {
  .rec_banner{ padding: 40px 0; grid-template-columns: 30% 1fr; grid-template-rows: 3fr 1fr;}
  .rec_banner_img{ height: auto; grid-row: span 2 / span 2; overflow: hidden; border-radius: 20px;}
  .rec_banner_img img{ width: 100%; height: 100%; object-fit: cover;}
  .rec_banner_btn{ grid-column-start: 2;}
  .rec_banner_btn a{ width: 200px; font-size: 1.5rem; text-align: center; background-color: #000; padding: 3px 6px 5px 6px; border-radius: 30px;}
  .rec_banner_btn a i{ right: 10px;}  
}
@media screen and (max-width: 767px) {
  .rec_banner{ grid-template-columns: 40% 1fr;}
  .rec_banner_btn a{ font-size: 1.4rem; padding: 1px 6px 2px 6px;}
  .rec_banner_btn a i{ right: 6px;}
}
@media screen and (max-width: 767px) {
  .rec_banner{ padding: 40px 0; display: block;}
  .rec_banner_img{ height: auto; border-radius: 10px; aspect-ratio: 3/2;}
  .rec_banner_text,.rec_banner_btn{ display: block; width: 90%; margin: 10px auto;}
  .rec_banner_btn a{ width: 200px; font-size: 1.4rem; padding: 1px 6px 2px 6px; border-radius: 20px; margin: 0 auto;}
  .rec_banner_btn a:hover{ color: #000; background-color: #fff; }
}
  
/* main visual */

.main_v{ width: 100%; height: 100vh; background: url("../images/mv1-1.jpg") center center; background-size: cover; /*background-attachment: fixed;*/ position: relative; display: flex; justify-content: center; align-items: center; }
.main_v_copy{ max-width: 640px; width: 90%; color: #fff; filter: drop-shadow(0 2px 3px rgba(0,0,0,0.70));}
.main_v_copy h1{ font-size: 4.0rem; line-height: 6.0rem; text-align: center; font-family: "Noto Serif JP", serif; font-weight: 800; font-style: normal;}
.main_v_copy p{ margin-top: 2em; text-align: justify; font-size: 2.4rem;}
.main_v_btn{ position: absolute; bottom: 50px; right: 30px; width: 500px;}
.main_v_btn a{ display: flex; justify-content: space-between; align-items: center; border: 2px solid var(--color-red); padding: 3px 0 3px 3px; background-color: #fff; color: #000; border-radius: 10px; transition: all 0.6s;}
.main_v_btn_ttl{ width: 180px;font-family: "Noto Serif JP", serif; font-weight: 800; font-size: 22px; line-height: 1.0; text-align: center; padding: 10px; background-color: var(--color-red); color: #fff; border-radius: 6px; transition: all 0.6s;}
.main_v_btn_mdl{ font-size: 14px; line-height: 1.2; letter-spacing: 2px; font-weight: 500;}
.main_v_btn_r{ width: 80px; font-weight: 600; font-size: 15px; line-height: 1.0; text-align: center; padding: 7px 3px; background-color: var(--color-red); color: #fff; border-radius: 6px 0 0 6px; transition: all 0.6s;}
.main_v_btn_r i{ font-size: 13px; vertical-align: bottom; margin-left: 15px;}
.main_v_btn a:hover .main_v_btn_ttl{ background-color: #000;}
.main_v_btn a:hover .main_v_btn_r{ background-color: #000;}
@media screen and (max-width: 1000px) {
  .main_v_copy h1{ font-size: 3.0rem; line-height: 4.8rem;}
  .main_v_copy p{ margin-top: 2.5em; font-size: 1.8rem;}
  .main_v_btn{ bottom: 10px; right: 10px; width: 440px;}
}
@media screen and (max-width: 640px) {
  .main_v_btn{ display: none;}
  .main_v_copy p{ margin-top: 6em;}
}

/* sub visual */

.sub_v{ width: 100%; height: 350px; /*background-attachment: fixed;*/ position: relative;}
.sub_v_cover{ width: 100%; height: 100%; background-color: rgba(0,80,110,0.60); position: relative;}
.sub_v_title h1{ position: absolute; left: 50%; top: 50%; width: 100%; transform: translate(-50%,-10%); display: block; font-weight: 600; font-size: 16px; line-height: 30px; text-align: center; color: #fff;}
.sub_v_title h1 span{ display: block; font-family: "Roboto", sans-serif; font-weight: 600; font-style: normal; font-variation-settings: "wdth" 75; font-size: 70px; line-height: 1.0;}
@media screen and (max-width: 640px) {
  .sub_v{ height: 240px;}
  .sub_v_title h1{ font-size: 14px; transform: translate(-50%,0);}
  .sub_v_title h1 span{ font-size: 42px;}
}


/* =======================
    main
========================== */

.box1{ max-width: var(--box-max-width-m); width: var(--box-width); display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px;}
.box1_1{ margin-bottom: 30px;}
.box1_1 div{ aspect-ratio: 560/310;}
.box1_1 div img{ object-fit: cover; object-position: center;}
.box1_1 h3{ margin: 16px 20px 14px 20px; font-size: 2.0rem; font-weight: 700; text-align: center;}
.box1_1 p{ margin: 0 20px;}
@media screen and (max-width: 767px) {
  .box1{ max-width: 400px; display: block;}
  .box1_1 h3{ margin: 10px 0 8px 0; font-size: 1.6rem;}
  .box1_1 p{ margin: 0 20px;}
}

.box2{ display: flex; justify-content: space-between; align-items: flex-start; width: var(--box-width); margin-left: auto; margin-right: auto; position: relative;}
.box2_1{ width: 55%; max-height: 500px; z-index: 0; border-radius: 30px; overflow: hidden; position: relative;}
.box2_1 img{ object-fit: cover; width: 100%; height: 100%;}
.box2_2{ width: 55%; margin-left: -10%; margin-top: 100px; z-index: 1; background-color: rgba(255,255,255,0.80); padding: 50px 50px; position: relative;}
.box2_2 h3{ font-size: 2.8rem; line-height: 1.4; margin-bottom: var(--sp-s);}
.box2_2_1 p{ margin-bottom: 0.6em;}
.box2_2_1 p:last-child{ margin-bottom: 0;}
.box2_2_1 ol li{ margin-left: 1.5em;}
.box2_2_1 ol li::marker{ font-weight: 700; font-style: oblique; font-size: 120%;}
@media screen and (max-width: 1400px) {
  .box2_1{ width: 55%; z-index: 0;}
  .box2_2{ width: 75%; margin-left: -30%; margin-top: 200px; padding: 40px 40px;}
}
@media screen and (max-width: 1200px) {
  .box2{ display: block; z-index: 0;}
  .box2_1{ width: 70%; z-index: 0;}
  .box2_2{ width: 80%; margin-left: 20%; margin-top: -150px; z-index: 1;}
  .box2_2 h3{ font-size: 2.2rem; margin-bottom: var(--sp-s);}
}
@media screen and (max-width: 767px) {
  .box2_1{ width: 95%; z-index: 0; border-radius: 16px;}
  .box2_2{ width: 95%; margin-left: 5%; margin-top: -50px; padding: 20px 30px; z-index: 1; border-radius: 16px;}
  .box2_2 h3{ font-size: 2.2rem; margin-bottom: var(--sp-s);}
}

.newsboxwrap{ max-width: 1200px; width: var(--box-width); margin: 0 auto; display: flex; justify-content: space-between;}
.newsboxwrap h2{ width: 22%;}
.newsbox{ width: 72%;}
.newsbox li{ list-style: none; border-bottom: 1px solid var(--color-main);}
.newsbox li:first-child{ border-top: 1px solid var(--color-main);}
.newsbox li a{ display: flex; justify-content: space-between; align-items: center; min-height: 70px; padding: 20px 10px;transition: all 0.6s; color: #000;}
.newsbox li a:hover{ background-color: #E4ECEF;}
.newsbox_date{ width: 100px; font-family: "Roboto", sans-serif; font-optical-sizing: auto; font-weight: 300; font-style: normal; font-variation-settings: "wdth" 100; font-size: 14px;}
.newsbox_cat{ width: 100px; font-family: "Roboto", sans-serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; font-variation-settings: "wdth" 100; font-size: 14px;}
.catnews{ color: rgba(0,140,255,1.00);}
.cateletube{ color: rgba(255,39,0,1.00);}
.newsbox_text{ width: calc(100% - 200px);}
@media screen and (max-width: 767px) {
  .newsboxwrap{ display: block;}
  .newsboxwrap h2{ width: 50%; max-width: 200px; margin: 0 auto var(--sp-ms) auto;}
  .newsbox{ width: 100%;}
  .newsbox li a{ min-height: 50px; padding: 10px 5px;}
  .newsbox_date{ width: 60px; font-size: 12px;}
  .newsbox_cat{ width: 60px; font-size: 12px;}
  .newsbox_text{ width: calc(100% - 140px); line-height: 1.6;}
}
@media screen and (max-width: 480px) {
  .newsbox_a_2{ width: 30%;}
}

.news_cat_link{ display: flex; justify-content: center; column-gap: 5px; list-style: none; margin: 30px 5% 0 5%;}
.news_cat_link li{ font-size: 15px; font-weight: 700; line-height: 1.2; text-align: center;}
.news_cat_link li:first-child{ margin-right: 10px; padding: 5px 0; }
.news_cat_link li a{ position: relative; display: block; font-weight: 400; padding: 4px 10px 5px 20px; border: 1px solid #ccc; border-radius: 15px; transition: all 0.6s;}
.news_cat_link li a i{ position: absolute; left: 5px; top: 50%; transform: translateY(-50%); font-size: 85%;}
.news_cat_link li a:hover{ border: 1px solid #555;}
.news_cat_ttl{ text-align: center; font-size: 100px; line-height: 100px; font-family: "Roboto", sans-serif; font-weight: 800; font-style: normal; font-variation-settings: "wdth" 100; color: rgba(201,217,223,1.0); margin: 20px 5%;}
@media screen and (max-width: 767px) {
  .news_cat_ttl{ font-size: 60px; line-height: 60px; margin: 20px 5%;}
}
@media screen and (max-width: 480px) {
  .news_cat_link{ flex-wrap: wrap;}
  .news_cat_link li:first-child{ width: 100%; margin-bottom: 5px; margin-right: 0;}
}
.newsbox2{ display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 3em 2%; max-width: var(--box-max-width-s); width: var(--box-width); margin: 0 auto; list-style: none;}
.newsbox2_img{ aspect-ratio:640 / 320; width: 100%; overflow: hidden;}
.newsbox2_img img{ object-fit: cover; object-position: center; width: 100%; height: 100%; transition: all 0.6s;}
.newsbox2_date{ margin: 10px 20px 0 20px; font-size: 1.2rem; line-height: 1.4;}
.newsbox2_date span{ margin-left: 8px; padding-left: 8px; border-left: 1px solid #fff;}
.newsbox2_ttl{ margin: 5px 20px 0 20px; line-height: 1.6; }
.newsbox2 a{ display: block; background-color: rgba(255,255,255,0.0); transition: all 0.6s; padding: 2px 2px 10px 2px;}
.newsbox2 a:hover{ background-color: rgba(255,255,255,0.8);}
.newsbox2 a:hover .newsbox2_img img{ transform: scale(120%);}
@media screen and (max-width: 480px) {
  .newsbox2{ display: block;}
  .newsbox2 li{ margin-top: 2em;}
  .newsbox2 li:first-child{ margin-top: 0;}
}


.box3{ max-width: var(--box-max-width-s); width: var(--box-width); margin: 0 auto; position: relative;}
.box3_text1{ width: 55%; z-index: 3;}
.box3_text1 p{ margin-top: 0.6em;}
.box3_text1 p:first-child{ margin-top: 0;}
.box3_right1,.box3_right2{ position: absolute; top: 50%; right: -10%; transform: translateY(-50%); z-index: 1; font-size: 150px; line-height: 130px; font-family: "Roboto", sans-serif; font-weight: 800; font-style: normal; font-variation-settings: "wdth" 100; color: rgba(201,217,223,0.33);}
.box3_right1img{ position: relative; width: 50%; aspect-ratio: 1/0.6; z-index: 0; float: right; margin-left: 15px; margin-right: -8%;}
.right1img1{ background: url("../images/company1-2.jpg") center center no-repeat; background-size: cover;}
@media screen and (max-width: 1500px) {
  .box3_right1,.box3_right2{ right: -5%;}
  .box3_text1{ width: 100%; margin: 0 auto;}
}
@media screen and (max-width: 1000px) {
  .box3_right2{ font-size: 100px; line-height: 90px; right: -5%;}
}
@media screen and (max-width: 767px) {
  .box3_right1{ font-size: 120px; line-height: 100px; right: -5%;}
  .box3_right2{ font-size: 100px; line-height: 90px; right: -5%;}
  .box3_right1img{ width: 50%;}
}
@media screen and (max-width: 640px) {
  .box3_text1{ width: 100%;}
  .box3_right1{ top: 50%; right: 50%; transform: translate(50%,-50%); font-size: 100px; line-height: 100px;}
  .box3_right2{ top: 40%; right: 50%; transform: translate(50%,-50%); font-size: 90px; line-height: 80px;}
  .box3_right1img{ width: 100%; float: none; margin-bottom: 30px; margin-left: 0; }
}


.service_img img{ width: 100%; height: 100%; object-fit: cover; object-position: center;}
@media screen and (max-width: 767px) {
  .service_img{ aspect-ratio: 1400 / 500;}
}


.table1 table{ max-width: 1000px; width: var(--box-width); margin: var(--sp-m) auto 0 auto;}
.table1 th,.table1 td{ padding: 30px 20px; border-top: 1px solid #fff; border-bottom: 1px solid #fff;}
.table1 th{ font-weight: 700; white-space: nowrap; width: 25%;}
.table1 td.gmap{ border: 1px solid #fff; padding: 2px;}
.table1 td.gmap iframe{ display: block;}
@media screen and (max-width: 767px) {
  .table1 th,.table1 td{ padding: 20px 0px; border-top: 1px solid #fff;}
}

.table2{ max-width: 1000px; margin: var(--sp-m) auto 0 auto;}
.table2 th,.table2 td{ padding: 30px 20px; border-top: 1px solid #000; border-bottom: 1px solid #000;}
.table2 th{ font-weight: 700; white-space: nowrap; width: 25%; background-color: #E4ECEF; text-align: center;}
@media screen and (max-width: 767px) {
  .table2 th,.table2 td{ padding: 20px 10px;}
}

.table3{ max-width: 640px; margin: var(--sp-m) auto 0 auto;}
.table3 th,.table3 td{ padding: 30px 30px; border-top: 1px solid #000; border-bottom: 1px solid #000;}
.table3 th{ font-weight: 700; white-space: nowrap; width: 25%; position: relative; text-align: center;}
.table3 tr{ position: relative;}
.table3 tr::before{ position: absolute; content: "↓"; top: -0.5em; left: 50%; transform: translateX(-50%); font-size: 150%; line-height: 1.0;}
.table3 tr:first-child::before{ content: "";}
@media screen and (max-width: 767px) {
  .table3 th,.table3 td{ padding: 20px 10px;}
}

.table2 ul,.table2 ol,.table3 ul{ margin-left: 1em;}


.rec_box1{ display: flex; justify-content: space-between; flex-direction: row-reverse; position: relative; z-index: 0;}
.rec_box1_1{ margin-top: -55px; z-index: 2; font-size: 110px; line-height: 110px; font-family: "Roboto", sans-serif; font-weight: 800; font-style: normal; font-variation-settings: "wdth" 100; color: rgba(201,217,223,0.33); position: relative;}
.rec_box1_r{ width: 50%; margin-left: 5%; position: relative; z-index: 2; margin-top: -55px;}
.rec_box1_2{ font-size: 2.4rem; border: 1px solid #fff; padding: 3px 10px; text-align: center; margin-top: 5px;}
.rec_box1-3{ margin-left: auto; max-width: 1000px;position: relative; z-index: 2;}
.rec_box1_img{ z-index: 1; position: relative;}
.nopc{ display: none;}
@media screen and (max-width: 1000px) {
  .rec_box1_1{ margin-top: -40px; font-size: 80px; line-height: 80px;}
  .rec_box1_r{ width: 50%; margin-left: 5%; margin-top: -40px;}
}
@media screen and (max-width: 640px) {
  .rec_box1_r{ margin-left: -20%; margin-right: 0;}
  .nosp{ display: none;}
  .nopc{ display: inline;}
}
@media screen and (max-width: 540px) {
  .rec_box1{ display: block; }
  .rec_box1_r{ height: 200px; width: 100vw; margin-left: -6%; margin-top: -40px;}
}


.box4{ width: 90%; max-width: 1000px; margin-left: auto; margin-right: auto;}


/* =======================
    docbox1
========================== */

.docbox1_h1{ font-size: 3.6rem; font-family: "Noto Serif JP", serif; font-weight: 800; line-height: 1.4; text-align: center; margin: var(--sp-s) auto 0 auto; width: var(--box-width);}
.docbox1_date{ font-size: 1.4rem; margin-top: var(--sp-s); text-align: center;}
.docbox1_img{ aspect-ratio: 640 / 320; background-color: #D4E1E7;}
.docbox1_img img{ object-fit: contain; object-position: center; width: 100%; height: 100%;}
@media screen and (max-width: 767px) {
  .docbox1_h1{ font-size: 2.2rem;}
}

.docbox1 p{ margin-top: 1em;}
.docbox1 p a:not(:has(img)){ border-bottom: 1px dotted #AAA; margin-bottom: -1px;}
.docbox1 h2{ font-size: 140%; font-weight: 700; line-height: 1.4; margin-top: 1em; border-left: 5px solid #000; padding: 0.5em 0 0.5em 28px;}
.docbox1 h3{ font-size: 120%; font-weight: 700; line-height: 1.4; margin-top: 1em; border-top: 2px solid #000; border-bottom: 2px solid #000; padding: 0.3em 0; text-align: center;}
.docbox1 h5{ font-size: 115%; font-weight: 700; line-height: 1.4; margin-top: 1em; border-bottom: 2px dashed #000; padding: 0.3em 0;}
.docbox1 h4{ font-size: 115%; font-weight: 600; margin-top: 1em; border: 1px solid #000; padding: 5px 1em;}
.docbox1 h6{ font-size: 110%; font-weight: 600; margin-top: 1em;}
.docbox1 ul{ margin-top: 1em; list-style: disc; margin-left: 1.5em;}
.docbox1 ol{ margin-top: 1em; margin-left: 1.5em;}
.docbox1 ul li,.docbox1 ol li{ margin-top: 0.3em; position: relative;}
.docbox1 ol li{ padding-left: 5px;}
.docbox1 > table{margin-top: 1em;}
.docbox1 > table th,.docbox1 > table td{ border: 1px solid #000; padding: 0.5em 1em; text-align: left; vertical-align: top;}
.docbox1 > table th{ font-weight: 600; white-space: nowrap;}
.docbox1 > table th > p:first-child,.docbox1 > table td > p:first-child{ margin-top: 0;}
.docbox1img2{ display: flex; justify-content: space-between; flex-wrap: wrap; margin-top: 1em;}
.docbox1img2 img{ display: block; width: calc(100% / 2); padding: 1px;}
.docbox1 > *:first-child{ margin-top: 0;}
@media screen and (max-width: 799px) {
  .docbox1 h2{ font-size: 2.4rem;}
  .docbox1 h3{ font-size: 1.8rem; padding-left: 2em;}
  .docbox1 h4{ font-size: 1.8rem; padding: 3px 0;}
  .docbox1 h5{ font-size: 1.6rem; padding: 3px 1em;}
  .docbox1 h6{ font-size: 1.6rem;}
  .docbox1img2 img{ display: block; width: calc(100% / 2); padding: 1px;}
}
@media screen and (max-width: 640px) {
  .docbox1 > table th,.docbox1 > table td{ display: block; border: none;}
  .docbox1 > table th{ padding: 0.5em 1em 0.5em 1em; font-weight: 600; white-space: inherit; text-align: center; border-bottom: 1px solid #888;}
  .docbox1 > table td{ padding: 1em 0 2em 0;}
}
@media screen and (max-width: 480px) {
  .docbox1img2 img{ display: block; width: 100%; padding: 1px;}
}
.mt-be-columns{ display: flex; justify-content: space-between; flex-wrap: wrap; margin: 0; padding: 0; column-gap: 0!important; }
.mt-be-column{ width: 50%; margin: 0 0 1.5em 0; }
.mt-be-column p,.mt-be-column h2,.mt-be-column h3,.mt-be-column h4,.mt-be-column h5,.mt-be-column h6{ width: 90%; margin-right: auto; padding: 1px; margin-top: 0.5em;}
.mt-be-column p:has(img),.mt-be-column :has(img){ width: 100%; margin-right: 0; padding: 1.5em 1px 1px 1px;}
@media screen and (max-width: 480px) {
  .mt-be-column{ width: 100%;}
}