@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Noto+Sans+JP:wght@100..900&display=swap');
/* =Reset default browser CSS.
-------------------------------------------------------------- */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
  border: 0;
  font-family: inherit;
  font-size: 100%;
  font-style: inherit;
  font-weight: inherit;
  margin: 0;
  outline: 0;
  padding: 0;
  vertical-align: baseline;
}
:focus {
  outline: 0;
}
ol, ul {
  list-style: none;
}
table {
  border-collapse: separate;
  border-spacing: 0;
}
caption, th, td {
  font-weight: normal;
  text-align: left;
}
blockquote:before, blockquote:after, q:before, q:after {
  content: "";
}
blockquote, q {
  quotes: """";
}
b{ font-weight: 500;}

a img {
  border: 0;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block;
}
html {
  font-size: 62.5%;/*初期値16pxの62.5%でルートが10px*/
   scroll-behavior: smooth;
} 
body {
  line-height: 1.5;
  font-family: 'Noto Sans JP', sans-serif;
  color: #000;
  -webkit-text-size-adjust: 100%;
  background: #fff;
  display: flex;
  flex-flow: column;
  min-height: 100vh;
  font-weight: 400;
}
/*全てをクリア*/
.clear {
  clear: both;
}
/* new clearfix */
.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}
* html .clearfix {
  zoom: 1;
} /* IE6 */
*:first-child + html .clearfix {
  zoom: 1;
} /* IE7 */
/* リンク設定
------------------------------------------------------------*/
a, a:visited {
  margin: 0;
  padding: 0;
  text-decoration: none;
  outline: 0;
  vertical-align: baseline;
  background: transparent;
  color: #0268b6;
  transition: all 0.5s ease 0s;
  cursor: pointer;
}
a:hover, a:active {
  -webkit-transition: opacity 1s;
  -moz-transition: opacity 1s;
  -o-transition: opacity 1s;
  outline: none;
  color: #d70c18;
}

/**** Clearfix ****/
/* レイアウト
------------------------------------------------------------*/
.inner {
  margin: 0 auto;
  max-width: 1200px;
  width: 98%;position: relative;
}
.inner2 {
  margin: 0 auto;
  padding:  0; position: relative;
  max-width: 900px;
  width: 95%;
}

.inner3 {
  margin: 0 auto;
  padding: 30px 0; position: relative;
  max-width: 800px;
  width: 90%;
}
.inner4 {
  margin: 0 auto;
   padding: 30px 0; position: relative;
  max-width: 640px;
  width: 90%;
}

#wrapper {
  margin: 0 auto 0px;
  font-size: 16px;
  font-size: 1.6rem;
  padding: 0 0 0px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
 text-align: justify;
}
.lato-regular {
  font-family: "Lato", sans-serif;
  font-weight: 500;
  font-style: normal;
}
.lato-bold {
  font-family: "Lato", sans-serif;
  font-weight: 600;
  font-style: normal;
}


/* 共通変更 フォントサイズ　*/
.font12 { font-size: clamp( 12px, 1.2vw, 12px); }/*  10px 最大　2px*/
.font14 { font-size: clamp( 14px, 1.4vw, 14px); }/*  12px 最大　14px*/
.font16 { font-size: clamp( 14px, 1.6vw, 16px); }/*  14px 最大　16px*/
.font17 { font-size: clamp( 14px, 1.8vw, 17px); }/*  14px 最大　17px*/
.font18 { font-size: clamp( 16px, 1.8vw, 18px); }/*  16px 最大　18px*/
.font20{ font-size: clamp( 16px, 2.0vw, 20px); }/*  16px 最大　20px*/
.font22 { font-size: clamp( 18px, 2.2vw, 22px ); }/*  18px 最大　22px*/
.font24{ font-size: clamp( 18px, 2.4vw, 24px); }/*  18px 最大　24px*/
.font26{ font-size: clamp( 18px, 2.6vw, 26px); }/*  20px 最大　26px*/
.font28 { font-size: clamp(20px, 2.8vw, 28px); }/*  20px 最大　28px*/
.font30{ font-size: clamp(24px, 3.0vw, 30px); }/*  24px 最大　30px*/
.font32{ font-size: clamp( 26px, 3.4vw, 32px); }/*  26px 最大　32x*/
.font36{ font-size: clamp( 28px, 3.6vw, 36px); }/*  28px 最大　36px*/
.font40{ font-size: clamp(30px, 4.0vw, 40px ); }/*  30px 最大　40px*/
.font46 { font-size: clamp( 32px, 4.6vw, 46px );}/*  32px 最大　46px*/
.font48 { font-size: clamp(34px, 4.8vw, 48px );}/*  34x 最大　48px*/
.font54 { font-size: clamp(36px, 5.0vw, 54px );}/*  36x 最大　54px*/
.font58 { font-size: clamp(32px, 5.0vw, 58px );}/* 32x 最大　60px*/
.font60 { font-size: clamp(40px, 5.2vw, 60px );}/* 40x 最大　60px*/

/* ヘッダー
----------------------------------*/
#glovalheader { padding: 30px 0 10px ; z-index: 1000;position: fixed; /*← fixedで固定 */ width:100%; }
#glovalheader h1 { width:45%;  margin: 0 ; max-width: 350px;}
#glovalheader h1 img {  width:100%; height: auto; display: block;}
#glovalheader .inner1{ display: flex;  margin: 0 auto; width:98%; max-width: 1100px;}
 #glovalheader.smaller{ padding: 10px 0 10px ; border-bottom: 1px solid #ddd; background: #fff; }

/* ナビ
----------------------------------*/
#menu { 
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: end;
  margin: 0 0;  width:75%; 
}
#menu-inner {width: 100% !important;}
#menu-btn {
  display: none;
}

#menu-content {
  margin: 0; padding:0.8em 0 0;
  list-style-type: none;  text-align: center;
}

#menu-content > li { margin: 0;
  position: relative; padding:0 15px;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;text-align: center;
}

#menu-content > li > a {
  display: block;
  padding: 0 0 0;
  color: #000;
  text-decoration: none; 
position: relative;
  cursor: pointer;
    
}
#menu-content >  li > a:hover  {
 color: #2f479f;
background-position: bottom left; /* 下線のホバー時位置 */
}


@media screen and (min-width: 1100px) {
    .moblogo{ display: none;}
#menu-inner {width: 100% !important; max-width: 640px;  background: #fff;box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.4); height: 2.5em}
  #menu-content {
  margin: 0; 
  list-style-type: none; display: flex;
 justify-content: space-between;
}

#menu-content > li > a::before {
 content: ' ';
	width:0;
	height: 0;
	position:absolute;
	border:6px solid transparent;
	border-top-color: #999;
	top:-9px;
	left:45%; transform:  translateX(-50%) scale(1);
    transition: all 0.5s ease 0s;
   
}
#menu-content > li > a:hover   { color:#2f479f;transition: all 0.5s ease 0s; }
    
#menu-content > li > a:hover::before {	border-top-color: #2f479f;
  color:#2f479f ;top:-3px;transition: all 0.5s ease 0s;}
    
.home #menu-content > li > a.btnhome,.results #menu-content > li > a.btnresults ,.req #menu-content > li > a.btnreq ,.business #menu-content > li > a.btnbusiness ,.about #menu-content > li > a.btnabout ,.contact #menu-content > li > a.btncontact   { color:#2f479f;transition: all 0.5s ease 0s; }
.home #menu-content > li > a.btnhome::before,.results #menu-content > li > a.btnresults::before ,.req #menu-content > li > a.btnreq::before ,.business #menu-content > li > a.btnbusiness::before ,.about #menu-content > li > a.btnabout::before ,.contact #menu-content > li > a.btncontact::before{	border-top-color: #2f479f;
  color:#2f479f ;top:-3px;transition: all 0.5s ease 0s;}    
     
#menu-content > li.mob  {display: none;}

}
@media screen and (max-width: 1100px) {
#glovalheader {padding: 20px 0 10px ;z-index: 1000;}
#glovalheader h1 { width:50%;  margin: 0 ; min-width: 270px;}
nav {
    position: fixed;
    top: 0;
    left: -300px;
    bottom: 0;
    width: 60%;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    z-index: 3;
    opacity: 0; background: #fff;
  }
    #glovalheader #navArea{ background: #ddd;}
    .moblogo{ display: block; margin: 1em auto; max-width:350px; height: auto; width:80%;}
    

  .open nav {
    left: 0;
    opacity: 1;
  }
 #navArea  nav .inner {
    padding: 1.5em 0; margin: 0  ; 
width: 100% !important;}
 #navArea  nav .inner ul {
    list-style: none; 
    margin: 0;
    padding: 0;
  }
 #navArea  nav .inner ul li {
    position: relative;
    margin: 0;
  }
 #navArea  nav .inner ul li a {
    display: block;
    color: #333;
    font-size: 14px;
    text-decoration: none;
    -webkit-transition-duration: 0.2s;
            transition-duration: 0.2s;
  }
  .toggle_btn {
    display: block;
    position: fixed; background:#0268b6;
    top: 10px;
    right: 20px;
    width: 40px;
    height:40px;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    cursor: pointer;
    z-index: 3;
  }
  .toggle_btn span {
    position: absolute;
    left: 4px;
    width:32px;
    height: 3px;
    background-color: #fff;
    border-radius: 4px;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
  }
  .toggle_btn span:nth-child(1) {
    top:10px;
  }
  .toggle_btn span:nth-child(2) {
    top: 18px;
  }
  .toggle_btn span:nth-child(3) {
    bottom: 10px;
  }
  .open .toggle_btn span {
    background-color: #fff;
  }
  .open .toggle_btn span:nth-child(1) {
    -webkit-transform: translateY(10px) rotate(-315deg);
    transform: translateY(10px) rotate(-45deg);
  }
  .open .toggle_btn span:nth-child(2) {
    opacity: 0;
  }
  .open .toggle_btn span:nth-child(3) {
    -webkit-transform: translateY(-8px) rotate(315deg);
    transform: translateY(-8px) rotate(45deg);
  }
  #mask {
    display: none;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
  }
  .open #mask {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0.5;
    z-index: 2;
    cursor: pointer;
  }
    #navArea{ }
  #menu-content > li {
    width: 100%; 
    margin: 0 0 1px;
  }
  #menu-content > li:hover {
    background: none;
  }
  #menu-content > li > a {
    height: 100%;
    padding: 1em 1em 1em 1.5em;
    font-size: 100%;
    background: #fff; 
    text-align: left;
    border-bottom: 1px dotted #005da3;
  }
     #menu-content > li > a:hover {
    background: #005da3; color: #fff !important;
  } 
#menu-content > li > a::before {
font-family: 'Font Awesome 7 Free';
font-weight: 900;
  content: "\f0da"; font-size: 12px;
  position: absolute; 
  left:5px; top:50%; transform:  translateY(-50%);
} 
    
    
    
    
  #menu-content > li > ul.second-content {
    visibility: visible;
    opacity: 1;
    width: 100%;
    position: relative;
    -webkit-box-shadow: none;
            box-shadow: none;
  }
  #menu-content > li > ul.second-content > li {
    width: 100%;
    text-align-last: left;
  }
  #menu-content > li > ul.second-content > li > a {
    padding-left: 1.5em;
  }
  #menu-content > li > ul.second-content > li > a:hover {
  background: #0268b6;
  color: #fff;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}
#menu-content > li.mob.mob2{  margin: 1em 0 1px;}
 #menu-content > li.mob > a {
    height: 100%;
    padding: 0px 0 0 1em;
    font-size:95% !important;
    background: none; border: none;
  }
    

#footer nav {
   position:static;
    width: 98%;

    opacity: 1; background: none;
  }
    
}
@media screen and (max-width: 600px) {
 nav {
    width: 80%;
  }}

/*# sourceMappingURL=style.css.map */



/* フッター
----------------------------------*/

#footer { margin: 0em auto 0; padding: 1em 0 0; width:100%; 
  overflow: hidden; color: #fff;
  text-align: center;  background:url("../img/common/blueback.jpg") 50% no-repeat; background-size:cover;
}
#footer .inner {  display: flex; justify-content: space-between;align-items: flex-end; flex-wrap: wrap;}
#footer ul{  display: flex;  color: #fff; }
#footer ul a{color: #fff;  transition: all 0.5s ease 0s; }
#footer ul a:hover{color: #999;  transition: all 0.5s ease 0s; }
#footer ul li{ position: relative; padding: 0 1em; }
#footer ul:first-child li + li::before {
  content: "";
  position: absolute;
  left: 0; /* li要素の左端に配置 */
  top: 50%; /* 上下中央に配置 */
  transform: translateY(-50%); /* 上下中央揃えの微調整 */
  height: 60%; /* 縦線の長さ */
  width: 1px; /* 縦線の太さ */
  background-color: #fff; /* 縦線の色 */
}
#footer ul:first-child li:first-child{ padding: 0 1em 0 0}
#footer ul:last-child li{  padding: 0 1em 0 1.5em;}
#footer ul:last-child li::before {
 font-family: 'Font Awesome 7 Free';
font-weight: 900;
  content: "\f0da"; font-size: 12px;
  position: absolute; 
  left:5px; top:50%; transform:  translateY(-50%);
}

#footer .inner:last-child{ margin: 1em auto ; text-align: left;}
#footer .inner dl{display: flex; align-items: flex-end; flex-wrap: wrap;}
#slider-area{ background: #f0f0f0}
.common-slider{  margin: 20px 0 !important}
.common-slider div{  margin: 0 3px;}

.address{ text-align: right; margin: 0 auto 1em; }
#page-top1 {
  display: block;
  position: fixed;
  z-index: 9999;
  right: 40px;
  width: 50px;
  height: 50px;
  text-align: center;
  text-decoration: none;
  transition: .5s;
  font-size: 16px;
  font-size: 1.6rem;
  vertical-align: middle;
  background: #0268b6;
  border-radius: 50%;
}
a#page-top1 {
  color: #fff !important;
}
#page-top1 span {
  display: block;
  margin: 10px auto 0;
  font-size: 20px;
  font-size: 2.0rem;
}

.alignleft {
  float: left;
}
.alignright {
  float: right;
}
.center {
  text-align: center;
}
#slider-area  a{ position: relative; display: block; }
#slider-area  a:before {
font-family: 'Font Awesome 7 Free';
font-weight: 900;
  content: "\f00e"; 
  font-size: 60px; color: rgba(255,255,255,0.7);
  position: absolute;
right:5px; bottom:0;
} 

/*トップ*//* ===== 背景動画エリア ===== */
.fv-video-bg {
  position: relative;
  width: 100%;
  height: min(100vh, 700px);
  overflow: hidden;
  border-bottom: 20px solid #0b6fca;
}

/* ===== 内側の動画配置 ===== */
.fv-video-inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
}

/* ===== MP4動画用（cover で全画面表示） ===== */
.fv-video-inner video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  object-fit: cover;            /* 一番重要：画面いっぱいに表示 */
  transform: translate(-50%, -50%);
}

/* ===== 文字エリア ===== */
.fv-content {
  position: relative;
  z-index: 2;
}

.mainmoji { position: relative; }




/* ====== コンテンツ ====== */
.fv-content {
  text-align: center;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  padding: 0 20px;
  color: #fff;
  height: 90%;
}
.mainmoji{  width:95%; max-width: 1050px; margin: 0 auto}
.fv-content .mainmoji{ position: relative; height:100% ;}
.fv-content .title{ position: absolute; left:0; bottom: 0;  width:95%;  max-width: 520px;}
.fv-content h2{ background: #fff; border-radius: 20px; color: #0066cc; }
.fv-content h1{margin:  0.5em 0 ;
    font-weight: 600;  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  text-shadow: 2px 3px 0px rgba(0, 0, 0, 1);
}
.fv-content p.chui{ display: block;  margin: 0 0 ;   position:relative;  padding-left: 1.5em; background: rgba(11,111,202,0.8); text-align: left; line-height: 1.3; padding: 0.2em 0 0.2em 3.5em;}
.fv-content p.chui::before{content: "※"; margin-left: -1em; }
.fv-content .mainmoji h3{ position: absolute; right:0;  bottom: 0; width:80%; height: auto; max-width: 298px;  }
.fv-content .mainmoji h3 img{  width:100%; height: auto; }


/* ====== スマホ調整 ====== */
@media (max-width: 768px) {
  .fv-content h1 {
    font-size: 2rem;
  }
  .fv-content p {
    font-size: 1.1rem;
  }
}

.topbtn{ margin: 40px auto; display: block;}
.topbtn ul{display: flex; flex-wrap: wrap;  justify-content: space-between;}
.topbtn ul li{ width:calc( 100% / 3 - 30px ); position: relative; padding: 0; }
.topbtn ul li img{  width:100%; height: auto;}
.topbtn ul li span{ position: absolute; left:0; top:50%; transform: translateY( -50% ); background: rgba( 255,255,255,0.8); padding:0.5em 1em; color: #000; min-width: 4em; text-align: center; }
.topbtn ul li span b{ position:relative; display: block;  line-height: 1; }
.topbtn ul li span b::before {position: absolute;
font-family: 'Font Awesome 7 Free'; position: absolute;
font-weight: 900; font-size: 60%; left:-1em; top:50%; transform: translateY( -50% );
  content: "\f105"; 
} 
.topbtn ul li span b .fa-youtube{ color: #d11e1e; display: inline-block; vertical-align: middle; font-size: 90%; margin: 0 0 0 0.5em; }

.news{background: #d2edff; padding: 2em;}
.news h2 {
  display: flex; /* 子要素（タイトルと擬似要素）を横並びに配置 */
  align-items: center; /* 垂直方向の中央揃え */
  /* 必要に応じてマージンなどを調整 */
 margin-bottom: 1em;
}
.news h2::after {
  content: ""; /* 擬似要素にはcontentプロパティが必要 */
  flex-grow: 1; /* 残りのスペース全てを使って幅を拡張 */
  margin-left: 1.5rem; /* タイトルと線の間の余白 */
  border-bottom: 1px solid #000; /* 線のスタイル（太さ、種類、色） */
  /* heightやtop/bottomプロパティを使わずに線を引くことができる */
}
.news ul{margin: 0 auto; padding: 0;}
.news ul li{margin-bottom: 0.8em; padding: 0;}
.news ul li span{ display: inline-block; background: #0b6fca; color: #fff; padding: 0.2em 0; text-align: center;  width:6.5em; vertical-align: top;}
.news ul li p{ display: inline-block;  width:calc( 100% - 7em); margin-left: 0.5em;vertical-align: top;}
.news ul li p a { position: relative; padding-right: 50px; }
.news ul li p a img{ width:40px; height: auto; position: absolute; right:0; top: 50%; transform: translateY( -50%);}

.news a.topnewsbtn{  background: #0b6fca; color: #fff;  display:block; margin: 1em  0 0 auto ;width:8em; text-align: center; padding: 0.5em 0;}
.topbtn2{display: flex; flex-wrap: wrap;  justify-content: space-between; padding: 50px 0; text-align: center;}
.topbtn2 h3 {
  position: relative;
  text-align: center; /* 文字の中央寄せ */
}
.topbtn2 h3::before {
  background-color: #000; /* 線の色 */
  border-radius: 5px; /* 線の両端を丸く */
  bottom: -1px; /* 線の位置 */
  content: "";
  height: 2px; /* 線の高さ */
  left: 50%; /* 線の中央寄せ */
  position: absolute;
  transform: translateX(-50%); /* 線の中央寄せ */
  width: 4em; /* 線の長さ */
}
.topbtn2 .company{ background:url("../img/index/company.jpg") 50% 50% no-repeat; background-size: cover; width:65%; border-radius: 20px; position: relative; min-height: 230px; }
.topbtn2 .company span{ background: rgba( 255,255,255,0.8); padding:0.6em 0 0; display: block; position: absolute; left:50%; top:50%; transform: translate( -50%,-50%); width:90%; max-width:450px;}
.topbtn2 .company span a{ display: inline-block; vertical-align: middle; position:relative; margin: 1em 1em;  padding-left: 0.8em; text-align: left;}
.topbtn2 .company span a::before {
font-family: 'Font Awesome 7 Free'; position: absolute;
font-weight: 900; font-size: 60%; left:0em; top:50%; transform: translateY( -50% );
  content: "\f105"; 
} 

.topbtn2 .req{ background:url("../img/index/req.jpg") 50% 50% no-repeat; background-size: cover;width:33%; border-radius: 20px;padding: 1.5em 0; position: relative;  min-height: 230px; }
.topbtn2 .req a{  display: block; position: absolute; left:50%; top:50%; transform: translate( -50%,-50%);  color: #fff;}
.topbtn2 .req a h3::before {
  background-color: #fff; /* 線の色 */
}


/* 共通文字
----------------------------------*/

ol {
  list-style: none;
  counter-reset: number; 
}
li {
  position: relative;
  padding-left: 1.5em;
}


.breadcrumb {
     margin:0.5em auto 0px; 
  padding: 0.3em 0 0.4em;
}

.breadcrumb ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}

.breadcrumb li:not(:last-child)::after {
  display: inline-block;
font-family: 'Font Awesome 7 Free';
font-weight: 900;
  content: "\f105"; margin-left: 0.5em;

} 

.breadcrumb li{
  margin: 0  0 0; padding: 0 0 0 .5em;
}



[id] {
  scroll-margin-top: 20px; /* ヘッダー + 余白の分だけ調整 */
}

.sub #contents{ margin: 100px 0 0;}
.sub .subheader{ margin: 0em auto 0; padding: 0em 0 0; width:100%;
  text-align: center;  background:url("../img/common/blueback.jpg") 50% no-repeat; background-size:cover;
 }
.sub .subheader h1{ text-align: left; height: 165px; position: relative; }
.sub .subheader span{color: #fff;border-bottom: 1px solid #fff; position: absolute; top:50%; left:0; transform:  translateY(-50%);}

.subnav  { display: flex; width:95%;  max-width: 600px; background: #005da3; margin: 10px auto; justify-content:center; border-radius:5px; }
.subnav a  {  padding: 1em 0; color: #fff; position: relative; margin: 0 2em;}
.subnav a::before { position: absolute;
font-family: 'Font Awesome 7 Free';
font-weight: 900;
  content: "\f0d7"; left:-1em;  transition: all 0.5s ease 0s;
} 

.subnav a:hover:before { margin: 0.5em 0.5em 0 0;  transition: all 0.5s ease 0s;} 


.sub article { padding: 60px 0;}
.sub article h2 {
  display: flex; /* 子要素（タイトルと擬似要素）を横並びに配置 */
  align-items: center; /* 垂直方向の中央揃え */
  /* 必要に応じてマージンなどを調整 */
 margin-bottom: 1em;
}

.sub article h2::after {
  content: ""; /* 擬似要素にはcontentプロパティが必要 */
  flex-grow: 1; /* 残りのスペース全てを使って幅を拡張 */
  margin-left: 1.5rem; /* タイトルと線の間の余白 */
  border-bottom: 1px solid #000; /* 線のスタイル（太さ、種類、色） */
  /* heightやtop/bottomプロパティを使わずに線を引くことができる */
}
.sub article h3{ margin-bottom: 1em; }


.gray{ background: #f0f0f0;}

/* 企業情報
------------------------------------------------------------*/
#greeting { position: relative;}
#greeting p{ margin-bottom: 1.5em; margin-right: 160px;}
#greeting img { position: absolute; right:0;bottom: 60px; width:150px; height: auto;}
#greeting p.shomei{  margin: 3em 150px 0 auto; width: 12em;  }
#philosophy ul li{ position: relative; padding: 0 0 0 1em}
#philosophy ul li:before {
  display: inline-block;
font-family: 'Font Awesome 7 Free';
font-weight: 900;
  content: "\f0c8"; margin-right: 0.5em;
  font-size: 50%;
  position: absolute;
left:0; top:50%;
    transform: translateY(-50%);

} 
#philosophy dl{ margin: 1em 0;  min-height: 4em;
	display: flex;
	flex-wrap: wrap;align-items: center;}
#philosophy dl dt{ width:6em; margin: 10px 0; padding:0 1em ;}
#philosophy dl dd{ width:calc( 100% - 15em );   margin: 10px 0; padding: 0 1em;}

#philosophy dl.blue{   border: 1px dotted #0066cc;}
#philosophy dl.blue dt{ color:#0066cc; }

#philosophy dl.red { border: 1px dotted #cc0033;}
#philosophy dl.red dt { color:#cc0033; }
#philosophy dl.green { border: 1px dotted #339933;}
#philosophy dl.green dt { color:#339933; }


#history dl,#company dl{ margin: 1em 0; 
 border-top: 1px solid #000;
 border-bottom: 1px solid #000;
	display: flex;
	flex-wrap: wrap;}
#history dl dt,#company dl dt{ width:6em;  padding:1em ; border-bottom: 1px dotted #000;}
#history dl dd,#company dl dd{ width:calc( 100% - 10em );    padding: 1em; border-bottom: 1px dotted #000;}

#history dl dt:last-of-type,#company dl dt:last-of-type{ border:none;}
#history dl dd:last-child,#company dl dd:last-child{border:none;}
#history dl dd  ul li:before {
  display: inline-block;
font-family: 'Font Awesome 7 Free';
font-weight: 900;
  content: "\f0c8"; margin-right: 0.5em;
  font-size: 50%;
  position: absolute;
left:0; top:50%;
    transform: translateY(-50%);

} 
#company dl dd span{  display:  inline-block;  vertical-align: top; margin-right: 1em;}
#company dl dd span:first-of-type{ width:16em;}



picture.image{ display: block;  margin: 40px auto;  }
picture.image img{  width:100%;  height: auto;}

/* 事業内容
------------------------------------------------------------*/
.business.sub h2.read{ text-align: center; margin: 1.5em auto 0; font-weight: 600;}
.business.sub article h2 span { background: #d2edff; display: inline-block; padding: 0.2em 0.5em;}
.business.sub article h2::after { display: none;}
.business.sub article h3{ padding: 0 0 0 15px; margin: 0 0 0.5em;}
.business.sub article p{ padding: 0 0 0 15px;}
.business.sub article p span.chui2{ display: block;  margin: 0 0 ;  position:relative;  padding-left: 1.5em; }
.business.sub article p span.chui2::before{content: "※"; margin-left: -1em; contente:"※"; }

article#denkikoji ul,article#sokuryo ul{  margin: 50px auto 0; width:100%;  display: flex; justify-content: space-between; flex-wrap: wrap; }
article#denkikoji ul li,article#sokuryo ul li {width:49%;  margin: 0;  padding: 0;}
article#denkikoji ul li img,article#sokuryo ul li img{width:100%; height: auto;  }
article#denkikoji ul.gray { padding: 1em;width:calc(100% - 2em);  margin: 10px auto 50px; }
div.flow{ padding: 1em;}

div.flow h3{  text-align: center;}
div.flow ol {
  counter-reset: my-counter;
  list-style: none;
  padding: 0;display: flex; flex-wrap: wrap;  align-items: stretch;
  margin: 0;
}
div.flow ol li {width:calc(50% - 2em - 60px); background: #fff; margin:0.5em 1em 0 0;   padding: 15px 1em 1em 60px;
  position: relative;letter-spacing: -1px; min-height: 4em;
}
div.flow ol li:before {
  content: "0" counter(my-counter);
  counter-increment: my-counter;
  display: flex;
 font-family: "Lato", sans-serif;
  color: #005da3;
  line-height: 1; font-size: 26px;
  position: absolute;
  top: 15px;
  left: 10px; width:1.5em;  border-right: 1px solid #005da3;height: calc( 100% - 30px );
}
div.flow ol li span{ display: block;}
div.flow ol li:not(:last-child):after{
  display: inline-block;
font-family: 'Font Awesome 7 Free';
font-weight: 900;color: #005da3;
  content: "\f0da"; 
  font-size: 30px;
  position: absolute;
right:-15px; top:50%;
    transform: translateY(-50%);

} 
div.flow ol li:last-child:before {
  content:  counter(my-counter);} 

#sokuryo .left, #sokuryo .right{ width:49%; display: inline-block; vertical-align: top;} 
#sokuryo .right{ margin-left: 1.5%;}
picture.right img{ width:100%; height:auto;} 
.business.sub article#sokuryo .left h2{ margin: 0 !important;}
.business.sub article#sokuryo .left h2 span { display: block !important;  width:calc( 100% - 1em );}
.business.sub article#sokuryo le h3{ margin-bottom: 0!important}
article#sokuryo ul li {margin: 0 0 5px; }
a.contactbtn { color: #fff;  display: block; margin: 1em auto; padding: 0.5em;  width:95%; max-width: 540px; background: #0066cc; border-radius: 50px; position: relative;}
a.contactbtn .fa-solid{ font-size: 50px; position: absolute;  left:20px; top:50%; transform: translateY(-50%);}
a.contactbtn  p{  margin-left: 90px; line-height: 1.4;}

a.moviebtn{display: block; margin: 5em auto 2em; width:95%; max-width: 680px; background:url("../img/business/movie.jpg") 50% 0 no-repeat; background-size:  cover;  padding: 1em;}
a.moviebtn span{display: block; margin: 0 auto; width:60%; background: rgba( 255,255,255,0.8);position: relative; padding: 1em 2em 1em calc(2em + 60px );}
a.moviebtn .fa-brands{color: #d11e1e; font-size: 50px; position: absolute;  left:20px; top:50%; transform: translateY(-50%);}



/*　実績
------------------------------------------------------------*/
.results article dl{ display: flex; flex-wrap: wrap;  align-items: stretch; } 
.results article dl dt,.results article dl dd{ background: #f0f0f0; padding: 1em; margin: 0.3em 0} 
.results article dl dt{  width:25%} 
.results article dl dd{  width:calc(75% - 4em) !important; } 

.results div.img{ display: flex; flex-wrap: wrap;   justify-content: space-between;} 
.results div.img picture{  width: calc( 100% / 3 - 5px );} 
.results div.img  picture img{  width:100%; height: auto;} 

/* 採用情報
------------------------------------------------------------*/
#recruitment dl{ display: flex; flex-wrap: wrap;  align-items: stretch; } 
#recruitment dt {width:9em;
  position: relative;
  display: inline-block;
  margin: 0.1em 0;
  padding: 10px 0 10px 1.5em;
  max-width: 100%;
  color: #555;
  font-size: 16px;
  background: #d2edff;
}

#recruitment dt:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 100%;
  margin-top: -10px;
  border: 10px solid transparent;
  border-left: 10px solid #d2edff;
}
#recruitment dl dd{  width:calc(100% - 14em);  margin: 0.1em 0;padding: 10px 1em 10px 1.5em; border: 1px solid #d2edff; position: relative; } 
#recruitment dl dd ul{  margin: 0 ; } 
#recruitment dl dd ul,#recruitment dl dd div{ display: inline-block; vertical-align: middle;}
#recruitment dl dd ul li{ position: relative; margin: 0 0 0.3em ;  padding: 0 0 0 0.8em;}
#recruitment dl dd ul li:before {
  display: inline-block;
font-family: 'Font Awesome 7 Free';
font-weight: 900;
  content: "\f0c8"; margin-right: 0.5em;
  font-size: 50%;
  position: absolute;
left:0; top:50%;
    transform: translateY(-50%);

} 
#recruitment dl dd div{  background: #005da3; border-radius: 50%; width:100px; height: 100px; color: #fff; text-align: center;  position: relative; padding: 0;   }
#recruitment dl dd div span{ display: block; width:100%;  position: absolute;  top:50%; left: 50%; transform: translate(-50%, -50%); margin: 0; padding: 0; letter-spacing: -1; }

a.phone { color: #fff; margin: 1em auto; padding: 0.5em 1em;  width:95%; max-width: 480px; background: #0066cc; display: flex; flex-wrap: wrap;  align-items: center; justify-content: center; }
a.phone .fa-solid{ font-size: 40px;}

a.phone  p b{ display: block;}
a.phone .fa-solid, a.phone  p span{ display:inline-block; vertical-align: middle; margin: 0; padding: 0; }


/* 動画
------------------------------------------------------------*/
.movie h2.inner2{ margin: 2em auto 0}
.movie article h3{ margin: 0 auto 4em ;text-align: center;}
.youtube { margin: 1em auto  ;
  width: 100%;
  aspect-ratio: 16 / 9;
}
.youtube iframe {
  width: 100%;
  height: 100%;
}


/*プライバシ*/
article.privacy dt {
  margin: 1em auto 0;
  border-left: 5px solid #0b6fca;
  padding: 0 0 0 8px;
}
article.privacy dd ul {
  margin: 0.5em;
}
article.privacy dd ul li {
  margin: 0.5em 0 0.5em 1em;
}
article.privacy dd ul li:before {
  display: inline-block;
font-family: 'Font Awesome 7 Free';
font-weight: 900;
  content: "\f0c8"; margin-right: 0.5em;
  font-size: 50%;
  position: absolute;
left:0; top:50%;
    transform: translateY(-50%);

} 
article.privacy dd {
  margin: 0.5em 0 2em 15px;
}
article.privacy .shomei {
  margin: 0 0 0 auto;
  max-width: 20em;
  width: 90%;
}
article.privacy .shomei h3 { margin: 0;}
div.chuijiko {
  margin: 2em auto
}
div.chuijiko b {
  display: block;
  margin: 0 0 0 1.2em;
  padding: 0;
  font-weight: normal;
}
div.chuijiko b:before {
  content: "※";
  margin: 0 0.2em 0 -1em
}

/* お問合せ
------------------------------------------------------------*/


article.contact dl{ border-top: 1px solid #ddd; 
  margin: 10px auto 20px; display: flex; flex-wrap: wrap; } 
article.contact dt { background: red !important;
  width:10em ; margin: 0;
  text-align: left;position: relative;
 padding: 1em 0 1em 0.5em; 
    background: none !important;
     border-bottom: 1px solid #ddd;
}

article.contact dd {margin: 0; 
  width: calc(100% - 13em) !important;  padding: 1em 0 1em 0.5em; 
 text-align: left;border-bottom: 1px solid #ddd;background: none !important;
 
}
article.contact dd p{ margin: 0.3em 0;}

article.contact input[type="text"], article.contact input[type="email"], article.contact input[type="tel"], article.contact textarea {
  padding: 0.8em;
  outline: none;
  display: block;
  border: none;
 border: 1px solid #DDD;
  margin: 0 0 0.5em;
  max-width: 500px;
  width:calc(90% - 1.6em); background: #fff !important; font-size: 16px;
}

article.contact input[type="text"]:focus, article.contact texture:focus, article.contact input[type="tel"]:focus , article.contact input[type="email"]:focus{
  border: 1px solid #d42a28 ;background: #ffd7d7!important;
}
article.contact input.p-postal-code[type="text"] {
  max-width: 10em;font-size: 16px;
}

article.contact button {display: inline-block; vertical-align: middle;
  font-size: 20px !important;
  font-size: 2.0rem !important;
  margin: 30px 0.5em 25px;
  vertical-align: middle;
  color: #fff;
  background-color: #297ACC;
  padding: 0;
  height: 50px;
  line-height: 50px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  border: 1px solid #297ACC;
  -webkit-transition: .5s;
  transition: .5s;
  cursor: pointer;
  width: 60%;
  max-width: 250px;
}
article.contact button[type="reset"]{
width: 30%;
  max-width: 200px;
 background-color: #999; border: 1px solid #999;
}
article.contact button[type="reset"]:hover {
  background: #AA0C0C;
  border: 1px solid #AA0C0C;
  color: #fff;
}
article.contact button[type="submit"]:hover {
  background: #AA0C0C;
  border: 1px solid #AA0C0C;
  color: #fff;
}

input[type="checkbox"] {
  position: relative;
  width: 16px;
  height: 16px; background: #fff;
  border: 1px solid #000;
  vertical-align: -5px;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

input[type="checkbox"]:checked:before {
  position: absolute;
  top: 1px;
  left: 4px;
  transform: rotate(50deg);
  width: 4px;
  height: 8px;
  border-right: 2px solid #000;
  border-bottom: 2px solid #000;
  content: '';
}

/* 基本のセレクトボックスのカスタマイズ */
.select {
  background: #fff;
  height: 40px;
  width: 300px;
  border-radius: 5px;
  position: relative;
  z-index: 1;
    margin-bottom: 0.5em; border: 1px solid #ddd;
}

.select::after {
  position: absolute;
  content: '';
  width: 8px;
  height: 8px;
  right: 10px;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  border-bottom: 2px solid #3368B1;
  border-right: 2px solid #3368B1;
  z-index: -1;
}

select {
  /* 初期化 */
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  background: none;
  border: none;
  width: 100%;
  height: 100%;font-size: 16px;
  padding: 0 10px;
}



/* メインメニュー iPadサイズ以下から
------------------------------------------------------------*/

@media only screen and (max-width:900px) {
    .fv-content {  margin: 0 auto; width:80%;
}

.fv-content .title{ left:50%; bottom: 40%; transform: translate(-50%,-40%);   width:95%;  max-width: 520px;}
.fv-content .mainmoji h3{  left:50%; bottom: 5%; transform: translate(-50%,-5%);  width:60%; }
.topbtn ul li{ width:calc( 100% / 3 - 10px );  }
 #sokuryo .right{ margin-left: 1%;}
  
}
@media only screen and (max-width:840px) {
#footer .inner.footer {  display: block;}
    #footer .inner.footer  address { margin:1em auto; display: block; text-align: center;}
#philosophy dl dt{ width:6em; margin: 10px 0; padding:0 1em ;}
#philosophy dl dd{ width:calc( 100% - 12em );   margin: 10px 0; padding: 0 1em;}
.sub article { padding: 20px 0;}
    
#slider-area  a:before {
  font-size:50px; 
  position: absolute;
right:0px; bottom:-5px;
} 
}
@media only screen and (min-width:780px) {
.business.sub h2.read br{ display: none;}
}
@media only screen and (max-width:780px) {  
  .topbtn2{ padding: 30px 0; text-align: center;}
.topbtn2 .req{ background:url("../img/index/req.jpg") 0% 0% no-repeat; background-size: cover;width:33%; 
}
.business.sub h2.read{  margin: 1em auto 0; }
#footer .inner dl{display: block; }
}

@media only screen and (max-width:700px) {
 .topbtn{ margin: 15px auto; display: block;}  
.news ul li{display: block;}
.news ul li span{  width:6.5em;}
.news ul li p{  width: 100%; margin:0.2em auto ;}


.news ul li p a {  padding-right: 40px;}
.news ul li p a img{ width:30px; height: auto; }

    
.topbtn2 .company{ width:65%; border-radius: 10px;  min-height: 100px; }
.topbtn2 .company span a{margin: 1em 0em;  padding-left: 0.8em; }
.topbtn2 .req{ padding: 1.5em 0; border-radius: 10px; min-height: 100px; }
    #footer .inner ul.font14{ display: none;}
    #footer .inner ul.font12{  margin:0.5em 0 0 auto; padding: 0; width:13em;}
    #footer {  padding:  0; }
#footer .inner dl{padding:  0; margin: -1em 0 0 0;}
 #recruitment dl dd div{  right:-20px; top:-20px; width:90px; height:90px; color: #fff; position: absolute;   }

    
}
@media only screen and (max-width: 600px) {
 #footer .inner.footer dl{  margin: 0.5em auto; width:20em;}
#footer .inner.footer span {  display: block;}
#recruitment dt {width:100%;}
#recruitment dt:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -15px;
  border: 15px solid transparent;
  border-top: 15px solid #d2edff;
}
#recruitment dl dd{width:100%; border:none; border-right:1px solid #d2edff; border-left:1px solid #d2edff;border-bottom:1px solid #d2edff;}
    
#recruitment dl dd div{  right: 0px; top:calc(100% - 100px);   }

#history dl dt,#company dl dt{ width:calc( 100% - 1em );  padding:0.5em ; background: #f0f0f0; }
#history dl dd,#company dl dd{ width:calc( 100% - 1em );  padding:0.5em ;  border-bottom: 1px solid #000;}

    
#history dl dt:last-of-type,#company dl dt:last-of-type{border-bottom: 1px dotted #000;}
div.flow ol {
  counter-reset: my-counter;
  list-style: none;
  padding: 0;display: flex; flex-wrap: wrap;  align-items: stretch;
  margin: 0;
}
div.flow ol li {width:calc(100%  - 60px); background: #fff; margin:0.5em 1em 0 0;   padding: 15px 1em 1em 60px;
  position: relative;letter-spacing: -1px; min-height: auto;
}    
    div.flow ol li:not(:last-child):after{
  display: inline-block;
font-family: 'Font Awesome 7 Free';
font-weight: 900;
  content: "\f0d7";
  font-size: 30px;
  position: absolute;
right:50%; top:100%;


} 
    #sokuryo .left, #sokuryo .right{ width:95%; display:block;  margin: 1em auto 0} 
.results article dl dt,.results article dl dd{ background: #f0f0f0; padding:0.5em 1em 0; margin: 0.3em auto 0;width:90% !important} 
.results article dl dd{ margin:0em auto 1em; padding:0 1em 0.5em; } 
.results article dl dd:before{  content:"・" ;} 

 article.contact dl{ border-top: 1px solid #ddd; 
  margin: 10px auto 20px; display: flex; flex-wrap: wrap; } 
article.contact dt { 
  width:100% ; margin:0.5em 0 0;
 padding:0.5em 1em ; 
    background: #f0f0f0 !important;
     border-bottom: 1px solid #ddd;
}

article.contact dd {margin: 0; 
  width: calc(100% - 2em) !important;  padding:0.5em 1em ; border-bottom: 1px solid #ddd;
 
}
  
    article.privacy dd ul {
  margin: 0.5em;
}
article.privacy dd ul li {
  margin: 0.5em 0 0.5em ; padding: 0 0 0 0.8em;
}
    article.privacy dd ul li:before {
left:0; top:7px;
    transform: translateY(0%);

} #recruitment dl dd div{  position: relative;  margin: 0 0 -80px 80% ;  top: -100px; line-height: 1; }
}
@media only screen and (max-width: 520px) {
.topbtn2{display:block; }
.topbtn2 .company{  width:90%; margin: 0 auto 0; padding: 10px 0;  }  
.topbtn2 .req{ width:90%; margin:1em auto 0; padding: 10px 0;  }  
.topbtn2 .company span a{margin: 1em 0.5em;  padding-left: 0.5em; text-align: left;}
.sub article { padding: 20px 0 30px;}picture.image{ display: block;  margin: 10px auto;  }
.sub .subheader h1{ text-align: left; height: 110px; position: relative; }
 .fv-content p.chui{ padding: 0.2em 0 0.2em 2em;}
#greeting p{ margin: 0 auto;}
#greeting img { position: static; max-width:120px; width:25%; height: auto;  display: inline-block;vertical-align: baseline;}
#greeting p.shomei{  margin: 3em 0px 0 calc( 100% - 12em - 26% ); width: 11em;  display: inline-block;vertical-align: baseline;}
    

#philosophy dl{ margin: 1em auto;  min-height: auto;}
#philosophy dl dt{ width:calc( 100% - 2em ); margin: 10px 0; }
#philosophy dl dd{ width:calc( 100% - 2em );   margin: 0px 0 10px; }
#recruitment dl dd div{   margin: 0 0 -80px 80%;  top: -70px; }
    
#slider-area  a:before {
  font-size:25px;
right:0px; bottom:-5px;
} 
}
@media only screen and (max-width:410px) {
.business.sub h2.read{  margin: 0em auto 0; }
a.contactbtn .fa-solid{ font-size: 30px; }
a.contactbtn  p{  margin: 0 1em 0 70px; }
#recruitment dl dd div{   margin: 0 0 -80px calc(100% - 60px) ;  top: -70px; }
    
 .close {
      left: 0; /* 右から25pxの位置 */
  }


 .toggle_btn {
    right: 5px;
  }
.topbtn ul li{ width:calc( 100% / 3 - 3px );  }
}

@media print {
}
/*@print
A4用紙に特化したメディアクエリ*/
@page {
    size: A4;
    margin: 0;
}