@charset "UTF-8";
/*
Theme Name: オリジナルテーマ
Theme URI:
Description: オリジナルテーマ01
Version: 1.0
*/
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,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

body {
  line-height: 1.5;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

body {
  font-family: "游明朝", "Yu Mincho", YuMincho, "Hiragino Mincho Pro", serif;
  scroll-behavior: smooth;
  overflow-x: hidden;
  font-weight: 500;
}

a {
  text-decoration: none;
  color: #222222;
}
a:hover {
  opacity: 0.9;
  transition: 0.3s;
}

p,
a,
span,
strong {
  font-size: 16px;
  font-weight: 500;
}
@media screen and (max-width: 767px) {
  p,
  a,
  span,
  strong {
    font-size: 14px;
  }
}

.sp {
  display: none !important;
}

@media screen and (max-width: 767px) {
  .pc {
    display: none !important;
  }
  .sp {
    display: block !important;
  }
}
img {
  max-width: 100%;
}

.w5 {
  width: 5%;
}

.w10 {
  width: 10%;
}

.w15 {
  width: 15%;
}

.w20 {
  width: 20%;
}

.w25 {
  width: 25%;
}

.w30 {
  width: 30%;
}

.w35 {
  width: 35%;
}

.w40 {
  width: 40%;
}

.w45 {
  width: 45%;
}

.w50 {
  width: 50%;
}

.w55 {
  width: 55%;
}

.w60 {
  width: 60%;
}

.w65 {
  width: 65%;
}

.w70 {
  width: 70%;
}

.w75 {
  width: 75%;
}

.w80 {
  width: 80%;
}

.w85 {
  width: 85%;
}

.w90 {
  width: 90%;
}

.w95 {
  width: 95%;
}

.w100 {
  width: 100%;
}

.aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.alignright {
  float: right;
  margin-left: 1.5em;
}

.alignleft {
  float: left;
  margin-right: 1.5em;
}

#wrapper {
  max-width: 1280px;
  margin: 0 auto;
  padding: 20px 20px 20px 0px;
  display: flex;
  justify-content: space-between;
  flex-flow: column-reverse;
}

.btn {
  display: flex;
  max-width: 160px;
  background-color: #4483a6;
  padding: 5px 20px;
  align-items: center;
  justify-content: center;
  color: #fff;
  position: relative;
}
@media screen and (max-width: 1000px) {
  .btn {
    font-size: 14px;
  }
}
.btn::after {
  content: "";
  border: 0;
  border-top: solid 1px #fff;
  border-right: solid 1px #fff;
  display: inline-block;
  width: 7px;
  height: 7px;
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%) rotate(45deg);
}

.breadcrumb {
  margin-bottom: 30px !important;
  background-color: #f4f4f4;
  padding: 4px 20px 5px 20px;
}
@media screen and (max-width: 767px) {
  .breadcrumb {
    display: none;
  }
}
.breadcrumb ul {
  display: flex;
  max-width: 1200px;
  margin: 0 auto;
}
.breadcrumb ul li {
  display: inline;
  font-size: 14px;
}
@media screen and (max-width: 1000px) {
  .breadcrumb ul li {
    font-size: 12px;
  }
}
.breadcrumb ul li a {
  color: inherit;
  text-decoration: none;
  font-size: 14px;
}
@media screen and (max-width: 1000px) {
  .breadcrumb ul li a {
    font-size: 12px;
  }
}
.breadcrumb ul li + li:before {
  content: ">";
  margin: 0 5px 0 8px;
}

header {
  position: fixed;
  padding: 0 50px;
  width: calc(100% - 100px);
  z-index: 1000;
  top: 0;
  display: flex;
  height: 90px;
  align-items: center;
  justify-content: space-between;
}
@media screen and (max-width: 1300px) {
  header {
    padding: 0 30px;
    width: calc(100% - 60px);
  }
}
@media screen and (max-width: 1000px) {
  header {
    padding: 0;
    width: calc(100% - 55px);
    height: 55px;
  }
}
header .hdrContent {
  display: flex;
  gap: 20px;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
@media screen and (max-width: 1000px) {
  header .hdrContent {
    margin-bottom: 0;
    height: 100%;
    padding-left: 10px;
    gap: 5px;
  }
}
header .hdrContent .logoImg {
  display: flex;
  max-width: 300px;
  height: max-content;
}
@media screen and (max-width: 1000px) {
  header .hdrContent .logoImg {
    max-width: 200px;
  }
}
header .hdrContent .hdrNav {
  display: flex;
  gap: 30px;
}
@media screen and (max-width: 1300px) {
  header .hdrContent .hdrNav {
    gap: 15px;
  }
}
header .hdrContent .hdrNav #nav_global {
  display: flex;
  align-items: center;
}
header .hdrContent .hdrBtn {
  display: flex;
  gap: 20px;
}
@media screen and (max-width: 1300px) {
  header .hdrContent .hdrBtn {
    gap: 10px;
  }
}
@media screen and (max-width: 1000px) {
  header .hdrContent .hdrBtn {
    gap: 0;
    height: 100%;
  }
}
header .hdrContent .hdrBtn .telBtn {
  color: #002a55;
  display: flex;
  flex-flow: column;
  gap: 4px;
  position: relative;
  padding: 0 10px 0 30px;
  line-height: 1;
  height: 60px;
  justify-content: center;
  align-items: baseline;
  border: 1px solid #002a55;
}
@media screen and (max-width: 1300px) {
  header .hdrContent .hdrBtn .telBtn {
    width: max-content;
    padding: 0 10px 0 25px;
  }
}
@media screen and (max-width: 1000px) {
  header .hdrContent .hdrBtn .telBtn {
    height: 55px;
    width: 55px;
    padding: 0;
  }
}
header .hdrContent .hdrBtn .telBtn p {
  font-size: 23px;
}
@media screen and (max-width: 1300px) {
  header .hdrContent .hdrBtn .telBtn p {
    font-size: 19px;
  }
}
@media screen and (max-width: 1000px) {
  header .hdrContent .hdrBtn .telBtn p {
    display: none;
  }
}
header .hdrContent .hdrBtn .telBtn img {
  width: 11px;
  position: absolute;
  left: 15px;
  margin: auto;
  top: 15px;
}
@media screen and (max-width: 1300px) {
  header .hdrContent .hdrBtn .telBtn img {
    left: 10px;
  }
}
@media screen and (max-width: 1000px) {
  header .hdrContent .hdrBtn .telBtn img {
    position: unset;
    width: 15px;
  }
}
header .hdrContent .hdrBtn .telBtn span {
  font-size: 8px;
}
@media screen and (max-width: 1000px) {
  header .hdrContent .hdrBtn .telBtn span {
    display: none;
  }
}
header .hdrContent .hdrBtn .contactBtn {
  width: max-content;
  background-image: unset;
  gap: 10px;
  background-color: #032655;
  border: 1px solid #032655;
}
@media screen and (max-width: 1300px) {
  header .hdrContent .hdrBtn .contactBtn {
    padding: 5px 10px;
    gap: 5px;
    font-size: 15px;
  }
}
@media screen and (max-width: 1000px) {
  header .hdrContent .hdrBtn .contactBtn {
    font-size: 11px;
    text-align: center;
    width: 55px;
    padding: 0;
    line-height: 1.3;
  }
}
header .hdrContent .hdrBtn .contactBtn::after {
  content: unset;
}
@media screen and (max-width: 1000px) {
  header .hdrContent .hdrBtn .contactBtn span {
    display: none;
  }
}
@media screen and (max-width: 1000px) {
  header .hdrContent .hdrBtn .contactBtn img {
    width: 30px;
  }
}
header .gNav .nav_child {
  display: none;
}
@media screen and (min-width: 768px) {
  header .gNav .nav_child {
    margin-top: 7px;
    position: absolute;
    max-width: 220px;
  }
  header .gNav .nav_child li a {
    padding: 10px 20px;
    color: white;
    background-color: #464646;
    display: block;
    font-size: 15px;
  }
}
header .gNav ul {
  display: flex;
  justify-content: flex-end;
  gap: 15px;
}
@media screen and (max-width: 1300px) {
  header .gNav ul {
    width: max-content;
  }
}
header .gNav ul li a {
  position: relative;
  font-size: 15px;
  font-weight: 700;
}
header .gNav ul li a::after {
  /*アンダーラインのスタイル*/
  position: absolute;
  content: "";
  display: block;
  height: 3px;
  background-color: #4483a6;
  bottom: -15px;
  left: 0;
  /*幅を0に設定*/
  width: 0;
  /*アニメーションの速度設定*/
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
header .gNav ul li a:hover::after {
  width: 100%;
}
@media screen and (max-width: 1000px) {
  header .gNav ul li a::after {
    content: unset;
  }
}
@media screen and (max-width: 1300px) {
  header .gNav ul li a {
    font-size: 13px;
  }
}
header .gNav ul li a.current {
  position: relative;
}
header .gNav ul li a.current::after {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 0;
  right: 0;
  margin: auto;
  width: 90%;
  height: 2px;
  background-color: #00053a;
}
header .gNav ul li .btn_parent {
  cursor: pointer;
}
@media screen and (max-width: 1000px) {
  header {
    /* グローバルナビゲーション(SP)  */
  }
  header .gNav ul {
    display: unset;
  }
  header .gNav ul li a.current {
    position: unset;
  }
  header .gNav ul li a.current::after {
    content: unset;
  }
  header #nav_global {
    position: relative;
    z-index: 1001;
  }
  header #nav_global dt {
    position: fixed;
    top: 0;
    right: 0;
    width: 55px;
    height: 56px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 10px;
    color: white;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    background-color: #4483a6;
  }
  header #nav_global dt #btn_navcon {
    position: absolute;
    z-index: 1001;
    top: 17px;
    right: 12px;
    width: 30px;
    cursor: pointer;
  }
  header #nav_global dt ul {
    width: auto;
    height: 23px;
    list-style: none;
    margin: 0 auto 6px;
  }
  header #nav_global dt ul li {
    width: auto;
    height: 3px;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
    background-color: white;
    margin: 0 0 6px;
  }
  header #nav_global dt.is_active {
    width: 380px;
    height: 100vh;
    border-radius: 0;
  }
  header #nav_global dt.is_active li:nth-child(2) {
    opacity: 0;
  }
  header #nav_global dt.is_active li {
    -webkit-transform: translatey(8px) rotate(45deg);
    transform: translatey(8px) rotate(45deg);
  }
  header #nav_global dt.is_active li:nth-child(3) {
    -webkit-transform: translatey(-10px) rotate(-45deg);
    transform: translatey(-10px) rotate(-45deg);
  }
  header #nav_global dd {
    position: fixed;
    top: 95px;
    right: -380px;
    width: 380px;
    height: 100vh;
    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease;
    opacity: 0;
    overflow: visible;
    font-family: YakuHanJP, "Noto Sans Bold", sans-serif;
    letter-spacing: 0.1em;
    color: white;
  }
  header #nav_global dd ul {
    position: relative;
    z-index: 1001;
    width: auto;
    list-style: none;
  }
  header #nav_global dd ul li {
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
    border-bottom: 1px solid white;
    font-size: 15px;
  }
  header #nav_global dd ul li a,
  header #nav_global dd ul li span {
    display: block;
    width: auto;
    cursor: pointer;
    padding: 22px;
    color: white;
  }
  header #nav_global dd ul a.is_current,
  header #nav_global dd ul a:hover,
  header #nav_global dd ul span.is_current,
  header #nav_global dd ul span:hover {
    background-color: #4483a6;
    mix-blend-mode: multiply;
  }
  header #nav_global dd ul a:after,
  header #nav_global dd ul span:after {
    float: right;
    font-family: FontAwesome;
    font-weight: bold;
  }
  header #nav_global dd ul span:after {
    content: "\f107";
  }
  header #nav_global dd .btn_parent {
    cursor: pointer;
  }
  header #nav_global dd .btn_parent.is_open_2 {
    color: white;
    background-color: #4483a6;
  }
  header #nav_global dd .btn_parent.is_open_2:after {
    content: "\f106";
  }
  header #nav_global dd ul.nav_child {
    display: none;
    width: auto;
    background-color: #88c848;
  }
  header #nav_global dd ul.nav_child li {
    border-top: 1px solid #ddd;
    border-bottom: none;
  }
  header #nav_global dd ul.nav_child a {
    padding: 15px 42px 15px 50px;
  }
  header #nav_global dd > ul:first-child {
    padding-bottom: 100px;
  }
  header #nav_global dd.is_open {
    right: 0;
    opacity: 1;
    overflow: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  header #nav_global dd.is_open::-webkit-scrollbar {
    display: none;
  }
}
@media screen and (min-width: 768px) {
  header.is-fixed {
    background-color: rgba(255, 255, 255, 0.9) !important;
    height: 60px;
    -webkit-transition: 0.3s ease-in-out;
    -moz-transition: 0.3s ease-in-out;
    -o-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out;
  }
}
@media screen and (min-width: 768px) and (max-width: 1000px) {
  header.is-fixed {
    height: 55px;
  }
}
@media screen and (min-width: 768px) {
  header.is-fixed .hdrContent {
    margin-bottom: 0px;
  }
  header.is-fixed .hdrContent .logoImg {
    max-width: 430px;
    -webkit-transition: 0.3s ease-in-out;
    -moz-transition: 0.3s ease-in-out;
    -o-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out;
  }
}
@media screen and (min-width: 768px) and (max-width: 1000px) {
  header.is-fixed .hdrContent .logoImg {
    position: unset;
  }
}
@media screen and (min-width: 768px) {
  header.is-fixed .hdrContent .hdrBtn .telBtn,
  header.is-fixed .hdrContent .hdrBtn .contactBtn {
    height: 40px;
    font-size: 18px;
    -webkit-transition: 0.3s ease-in-out;
    -moz-transition: 0.3s ease-in-out;
    -o-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out;
  }
}
@media screen and (min-width: 768px) and (max-width: 1000px) {
  header.is-fixed .hdrContent .hdrBtn .telBtn,
  header.is-fixed .hdrContent .hdrBtn .contactBtn {
    height: 55px;
  }
}
@media screen and (min-width: 768px) {
  header.is-fixed .hdrContent .hdrBtn .contactBtn {
    padding: 0px 20px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1000px) {
  header.is-fixed .hdrContent .hdrBtn .contactBtn {
    padding: 0px;
  }
}
@media screen and (min-width: 768px) {
  header.is-fixed .hdrContent .hdrBtn .telBtn {
    gap: 2px;
  }
  header.is-fixed .hdrContent .hdrBtn .telBtn img {
    top: 7px;
  }
  header.is-fixed .gNav ul li a,
  header.is-fixed .gNav ul li span {
    font-size: 13px;
    -webkit-transition: 0.3s ease-in-out;
    -moz-transition: 0.3s ease-in-out;
    -o-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out;
  }
  header.is-fixed .gNav ul li a.current::after,
  header.is-fixed .gNav ul li span.current::after {
    bottom: -2px;
  }
}
@media screen and (max-width: 1000px) {
  header.is-fixed {
    background-color: rgba(255, 255, 255, 0.9);
  }
}

.fix-nav {
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  z-index: 100;
}
@media screen and (max-width: 767px) {
  .fix-nav {
    display: none;
  }
}
.fix-nav ul li {
  background-color: #002a55;
  border: 1px solid white;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fix-nav ul li a {
  color: white;
  font-size: 13px;
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
  height: 100px;
  width: 95px;
}
.fix-nav ul li a img {
  width: 30px;
  margin-bottom: 10px;
}

/* トップへ戻るボタン */
#page_top {
  position: fixed;
  bottom: 10px;
  right: 10px;
  font-weight: bold;
  padding: 5px;
  text-align: center;
  background: #4483a6;
  color: #fff;
  transition: 0.3s;
  width: 50px;
  height: 50px;
  font-size: 11px;
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  letter-spacing: 1px;
  z-index: 2000;
}
#page_top img {
  width: 20px;
}
#page_top:hover {
  background: #009d9d;
}

.sidebar a {
  color: #222222;
}

.mainVisual {
  position: relative;
  margin-top: 90px;
  /* 元画像 1880 × 650 と同じ比率で枠を作ります。
     枠と画像の比率が一致するため、object-fit: cover のままでも
     左右が切り取られません。
     以前は max-height: 650px で高さを固定していたので、
     画面が狭いほど画像が横にはみ出して切れていました。
     ※画像を差し替えた場合は、この数値も新しい寸法に合わせてください。 */
  aspect-ratio: 1880 / 720;
  height: auto;
  max-height: none;
}
@media screen and (max-width: 1000px) {
  .mainVisual {
    /* 高さの固定をやめ、この幅でも比率追従にしています */
    margin-top: 55px;
  }
}
.mainVisual .mainVisual-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: bottom;
}
/* ===== メインビジュアル スライダー ===== */
/* Swiperの各階層に高さを通す（imgのheight:100%を効かせるため） */
.mainVisual .mainSwiper,
.mainVisual .mainSwiper .swiper-wrapper,
.mainVisual .mainSwiper .swiper-slide {
  height: 100%;
}

/* ページネーション（●） */
.mainVisual .swiper-pagination {
  bottom: 20px;
  z-index: 2;
}
@media screen and (max-width: 767px) {
  .mainVisual .swiper-pagination {
    bottom: 12px;
  }
}
.mainVisual .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  margin: 0 7px !important;
  background-color: #ffffff;
  opacity: 0.7;
  border: 1px solid rgba(0, 0, 0, 0.15);
  transition:
    background-color 0.3s,
    opacity 0.3s;
}
@media screen and (max-width: 767px) {
  .mainVisual .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    margin: 0 5px !important;
  }
}
.mainVisual .swiper-pagination-bullet-active {
  background-color: #4483a6;
  opacity: 1;
}

/* PC / SP 出し分け */
.mainVisual [data-mv="sp"] {
  display: none;
}

@media screen and (max-width: 767px) {
  .mainVisual {
    /* PC用に指定した aspect-ratio を解除しないと、
       SP画像にも 1880:650 の比率が適用されてしまいます */
    aspect-ratio: 767 / 900;
    height: auto;
    max-height: none;
  }
  .mainVisual [data-mv="pc"] {
    display: none;
  }
  .mainVisual [data-mv="sp"] {
    display: block;
  }
  /* 縦画像を切り抜かず全体表示する  */
  /* .mainVisual [data-mv="sp"],
  .mainVisual [data-mv="all"],
  .mainVisual [data-mv="sp"] .swiper-wrapper,
  .mainVisual [data-mv="all"] .swiper-wrapper,
  .mainVisual [data-mv="sp"] .swiper-slide,
  .mainVisual [data-mv="all"] .swiper-slide {
    height: auto;
  }
  .mainVisual [data-mv="sp"] .mainVisual-img,
  .mainVisual [data-mv="all"] .mainVisual-img {
    height: auto;
    object-fit: contain;
  } */
}

.swiper {
  --swiper-pagination-bottom: 72px; /* 下からの距離を変更 */
}
@media screen and (max-width: 1000px) {
  .swiper {
    --swiper-pagination-bottom: 8px; /* 下からの距離を変更 */
  }
}
.mainVisual .catchCopy {
  position: absolute;
  top: 0px;
  bottom: 0;
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin: 0 50px;
  text-align: center;
  left: 0;
  right: 0;
}
@media screen and (max-width: 767px) {
  .mainVisual .catchCopy {
    margin: 0 20px;
  }
}
.mainVisual .catchCopy ul {
  display: flex;
  gap: 15px;
}
@media screen and (max-width: 767px) {
  .mainVisual .catchCopy ul {
    gap: 5px;
  }
}
@media screen and (max-width: 500px) {
  .mainVisual .catchCopy ul {
    flex-flow: column;
    gap: 10px;
  }
}
.mainVisual .catchCopy ul li {
  display: inline-flex;
  -webkit-align-items: center;
  align-items: center;
  height: 50px;
  margin: 0 15px;
  padding: 0 1.5em;
  font-size: 2vw;
  background-color: #002956;
  color: white;
  line-height: 1.2;
  position: relative;
}
@media screen and (max-width: 767px) {
  .mainVisual .catchCopy ul li {
    height: 40px;
    font-size: 2.6vw;
  }
}
@media screen and (max-width: 500px) {
  .mainVisual .catchCopy ul li {
    font-size: 4.4vw;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
.mainVisual .catchCopy ul li::before {
  content: "";
  position: absolute;
  top: 0;
  left: -10px;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent #002956 transparent transparent;
  border-width: 50px 10px 0 0;
  z-index: 50;
}
@media screen and (max-width: 767px) {
  .mainVisual .catchCopy ul li::before {
    border-width: 40px 10px 0 0;
  }
}
.mainVisual .catchCopy ul li::after {
  content: "";
  position: absolute;
  top: 0;
  right: -10px;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent transparent transparent #002956;
  border-width: 0 0 50px 10px;
  z-index: 50;
}
@media screen and (max-width: 767px) {
  .mainVisual .catchCopy ul li::after {
    border-width: 0 0 40px 10px;
  }
}
.mainVisual .catchCopy .mainCopy {
  display: block;
  margin-top: 30px;
  font-size: 12vw;
  color: white;
  text-align: center;
  line-height: 1;
  font-family: "Fira Sans", sans-serif;
  font-style: italic;
  font-weight: 700;
}
@media screen and (max-width: 767px) {
  .mainVisual .catchCopy .mainCopy {
    margin-top: 10px;
    font-size: 14vw;
  }
}
@media screen and (max-width: 500px) {
  .mainVisual .catchCopy .mainCopy {
    font-size: 17vw;
  }
}
.mainVisual .catchCopy .sabCopy {
  font-size: 3.5vw;
  color: white;
}
@media screen and (max-width: 767px) {
  .mainVisual .catchCopy .sabCopy {
    font-size: 4.5vw;
  }
}

.lead-bnr {
  display: flex;
  margin-top: -60px;
  justify-content: center;
  gap: 0.5%;
}
@media screen and (max-width: 1000px) {
  .lead-bnr {
    flex-flow: wrap;
    margin-top: 0px;
    gap: 0;
  }
}
.lead-bnr a {
  position: relative;
  width: 24%;
  position: relative;
  background-color: #006cdb;
  min-height: 160px;
  clip-path: polygon(
    24px 0,
    /* 上辺:欠けが終わる点 */ 100% 0,
    /* 右上 */ 100% 100%,
    /* 右下 */ 0 100%,
    /* 左下 */ 0 24px /* 左辺:欠けが終わる点 */
  );
  transition: transform 0.2s ease;
  z-index: 50;
}
.lead-bnr a::before {
  content: "";
  position: absolute;
  bottom: 0; /* 下線の位置（テキストとの距離） */
  left: 0;
  width: 100%;
  height: 5px; /* 下線の太さ */
  background-color: #0856b5; /* 指定のカラー */
  transform: scaleX(0); /* 初期状態では幅を0にする */
  transform-origin: left top; /* 左側を起点にしてアニメーションさせる */
  transition: transform 0.3s ease;
  z-index: 10; /* アニメーションの速度と動き方 */
}

/* ホバー時の設定 */
.lead-bnr a:hover::before {
  transform: scaleX(1); /* ホバー時に幅を100%にする */
}
@media screen and (max-width: 1000px) {
  .lead-bnr a {
    width: 50%;
    min-height: 100px;
    clip-path: none;
  }
}
.lead-bnr a::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #032655;
  opacity: 0.9;
}
.lead-bnr a:nth-child(2):after {
  background-color: #112847;
}
.lead-bnr a:nth-child(3):after {
  background-color: #1e2a3a;
}
.lead-bnr a:nth-child(3):after {
  background-color: #1e2a3a;
}
.lead-bnr a:nth-child(4):after {
  background-color: #2c2c2c;
}
.lead-bnr a:hover {
  transform: translateY(-3px);
  filter: drop-shadow(0 8px 14px rgba(15, 23, 42, 0.15));
}
.lead-bnr a:hover::after {
  opacity: 0.4;
}
.lead-bnr a img {
  position: absolute;
  object-fit: cover;
  height: 100%;
  width: 100%;
}
.lead-bnr a p {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 30px;
  color: white;
  height: 100%;
  z-index: 20;
  font-size: 20px;
  flex-direction: column;
}
.lead-bnr a p span {
  opacity: 0.6;
}
@media screen and (max-width: 1000px) {
  .lead-bnr a p {
    padding: 0 20px;
  }
}
@media screen and (max-width: 500px) {
  .lead-bnr a p {
    font-size: 16px;
  }
}
.lead-bnr a .lead-bnr-text {
  font-size: 16px;
  flex-flow: column;
  align-items: baseline;
  gap: 10px;
}
@media screen and (max-width: 500px) {
  .lead-bnr a .lead-bnr-text {
    font-size: 13px;
  }
}
.lead-bnr a .lead-bnr-text span {
  font-size: 22px;
}
@media screen and (max-width: 500px) {
  .lead-bnr a .lead-bnr-text span {
    font-size: 16px;
  }
}

main .container {
  max-width: 1140px;
  margin: 0 auto;
  padding: 70px 30px 0;
}
main .container .section-header {
  position: relative;
  font-size: 40px;
  font-weight: 700;
  padding: 0px 0 35px;
  margin-bottom: 50px;
  letter-spacing: 1px;
}
@media screen and (max-width: 1000px) {
  main .container .section-header {
    font-size: 35px;
    padding: 0px 0 25px;
  }
}
main .container .section-header:before {
  position: absolute;
  content: attr(data-en);
  left: 3px;
  font-size: 20px;
  color: #4483a6;
  bottom: 0;
  left: 0;
  right: 0;
}
@media screen and (max-width: 1000px) {
  main .container .section-header:before {
    font-size: 15px;
  }
}
main .container .section-header span {
  font-size: 40px;
}
@media screen and (max-width: 1000px) {
  main .container .section-header span {
    font-size: 35px;
  }
}
main .news {
  display: flex;
  gap: 20px;
  align-items: flex-end;
}
@media screen and (max-width: 767px) {
  main .news {
    flex-flow: column;
    align-items: center;
  }
}
main .news .section-header {
  margin-bottom: 0px;
  padding: 0;
  color: #0071bc;
  font-family: "Fira Sans", sans-serif;
  font-size: 30px;
  font-weight: 500;
  font-style: italic;
}
main .news .news-box {
  width: 100%;
}
main .news .news-title {
  min-width: 180px;
  display: flex;
  align-items: center;
  gap: 20px;
  justify-content: space-between;
}
@media screen and (max-width: 767px) {
  main .news .news-title {
    min-width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-flow: wrap;
  }
}
@media screen and (max-width: 500px) {
  main .news .news-title {
    flex-flow: column;
    gap: 0;
    margin-bottom: 30px;
  }
}
@media screen and (max-width: 767px) {
  main .news .news-title .section-header {
    margin-bottom: 10px;
  }
}
main .news .news-title .btn {
  background-color: white;
  color: #0071bc;
  border: 2px solid #0071bc;
  padding: 2px 30px 2px 20px;
}
main .news .news-title .btn::after {
  border-top: solid 1px #0071bc;
  border-right: solid 1px #0071bc;
}
main .news .news-content {
  width: 100%;
}
main .news .news-content ul {
  border: 2px solid #0071bc;
  padding: 30px;
  border-radius: 5px;
}
@media screen and (max-width: 767px) {
  main .news .news-content ul {
    padding: 10px 20px 20px;
  }
}
main .news .news-content ul li {
  display: flex;
  align-items: center;
  gap: 15px;
  border-bottom: 1px dotted #999999;
  padding: 10px 5px;
}
@media screen and (max-width: 1000px) {
  main .news .news-content ul li {
    flex-flow: column;
    align-items: baseline;
    gap: 10px;
  }
}
main .news .news-content ul li .news-date {
  font-size: 15px;
  color: #4483a6;
}
@media screen and (max-width: 767px) {
  main .news .news-content ul li .news-date {
    font-size: 13px;
  }
}
main .news .news-content ul li .news-cate {
  font-size: 14px;
  min-width: 80px;
  color: #4483a6;
  border: 1px solid #4483a6;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 60px;
}
@media screen and (max-width: 1000px) {
  main .news .news-content ul li .news-cate {
    font-size: 12px;
  }
}
main .news .news-content ul li .news-title {
  margin: 0;
}
main .news .recruit-bnr {
  max-width: 330px;
}
main .news .recruit-bnr a {
  display: flex;
}
main .service {
  max-width: 100%;
  margin: 0 auto;
  padding: 0;
  margin-top: 70px;
  padding-bottom: 70px;
  padding-top: 40px;
}
main .service .section-header {
  text-align: center;
  color: #0071bc;
  max-width: 230px;
  margin: 0 auto;
  background-color: white;
}
main .service .section-header::before {
  right: 0;
  color: #0071bc;
}
main .service .section-header::after {
  content: "";
  position: absolute;
  left: -40px;
  right: 0;
  width: calc(100% + 80px);
  height: 2px;
  background-color: #0071bc;
  bottom: 0;
  top: 0;
  margin: auto;
  z-index: -1;
}
main .service .service-content {
  max-width: 100%;
  width: 100%;
  margin: 50px auto 0;
  padding: 0;
}
main .service .service-content ul {
  display: flex;
  flex-flow: wrap;
  gap: 0;
}
@media screen and (max-width: 1000px) {
  main .service .service-content ul {
    flex-flow: column;
  }
}
main .service .service-content ul li {
  position: relative;
  width: 50%;
}
main .service .service-content ul li:nth-child(1) div a .service-img::before,
main .service .service-content ul li:nth-child(4) div a .service-img::before,
main .service .service-content ul li:nth-child(5) div a .service-img::before {
  background-color: rgba(0, 41, 86, 0.8);
}
main .service .service-content ul li:nth-child(1) div a .service-item,
main .service .service-content ul li:nth-child(4) div a .service-item,
main .service .service-content ul li:nth-child(5) div a .service-item {
  color: white;
}
main
  .service
  .service-content
  ul
  li:nth-child(1)
  div
  a
  .service-item
  .service-title::after,
main
  .service
  .service-content
  ul
  li:nth-child(4)
  div
  a
  .service-item
  .service-title::after,
main
  .service
  .service-content
  ul
  li:nth-child(5)
  div
  a
  .service-item
  .service-title::after {
  background-color: white;
}
main .service .service-content ul li:nth-child(2) div a .service-img::before,
main .service .service-content ul li:nth-child(3) div a .service-img::before,
main .service .service-content ul li:nth-child(6) div a .service-img::before {
  background-color: rgba(255, 255, 255, 0.7);
}
main .service .service-content ul li:nth-child(2) div a .service-item,
main .service .service-content ul li:nth-child(3) div a .service-item,
main .service .service-content ul li:nth-child(6) div a .service-item {
  color: #0071bc;
}
main
  .service
  .service-content
  ul
  li:nth-child(2)
  div
  a
  .service-item
  .service-title::after,
main
  .service
  .service-content
  ul
  li:nth-child(3)
  div
  a
  .service-item
  .service-title::after,
main
  .service
  .service-content
  ul
  li:nth-child(6)
  div
  a
  .service-item
  .service-title::after {
  background-color: #0071bc;
}
@media screen and (max-width: 1000px) {
  main .service .service-content ul li {
    width: 100%;
  }
  main .service .service-content ul li:nth-child(1) div a .service-img::before,
  main .service .service-content ul li:nth-child(3) div a .service-img::before,
  main .service .service-content ul li:nth-child(5) div a .service-img::before {
    background-color: rgba(0, 41, 86, 0.8);
  }
  main .service .service-content ul li:nth-child(1) div a .service-item,
  main .service .service-content ul li:nth-child(3) div a .service-item,
  main .service .service-content ul li:nth-child(5) div a .service-item {
    color: white;
  }
  main
    .service
    .service-content
    ul
    li:nth-child(1)
    div
    a
    .service-item
    .service-title::after,
  main
    .service
    .service-content
    ul
    li:nth-child(3)
    div
    a
    .service-item
    .service-title::after,
  main
    .service
    .service-content
    ul
    li:nth-child(5)
    div
    a
    .service-item
    .service-title::after {
    background-color: white;
  }
  main .service .service-content ul li:nth-child(2) div a .service-img::before,
  main .service .service-content ul li:nth-child(4) div a .service-img::before,
  main .service .service-content ul li:nth-child(6) div a .service-img::before {
    background-color: rgba(255, 255, 255, 0.7);
  }
  main .service .service-content ul li:nth-child(2) div a .service-item,
  main .service .service-content ul li:nth-child(4) div a .service-item,
  main .service .service-content ul li:nth-child(6) div a .service-item {
    color: #0071bc;
  }
  main
    .service
    .service-content
    ul
    li:nth-child(2)
    div
    a
    .service-item
    .service-title::after,
  main
    .service
    .service-content
    ul
    li:nth-child(4)
    div
    a
    .service-item
    .service-title::after,
  main
    .service
    .service-content
    ul
    li:nth-child(6)
    div
    a
    .service-item
    .service-title::after {
    background-color: #0071bc;
  }
}
main .service .service-content ul li div a .service-img {
  width: 100%;
  height: 480px;
  position: relative;
}
@media screen and (max-width: 1000px) {
  main .service .service-content ul li div a .service-img {
    height: 360px;
  }
}
@media screen and (max-width: 500px) {
  main .service .service-content ul li div a .service-img {
    height: 320px;
  }
}
main .service .service-content ul li div a .service-img::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
main .service .service-content ul li div a .service-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
main .service .service-content .service-item {
  padding: 25px 20px;
  z-index: 10;
  color: white;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-flow: column;
}
main .service .service-content .service-item .service-title {
  font-size: clamp(1.563rem, 1.335rem + 1.14vw, 2.188rem);
  padding-bottom: 40px;
  position: relative;
  font-family: "Noto Sans JP", sans-serif;
}
main .service .service-content .service-item .service-title::after {
  content: "";
  position: absolute;
  bottom: 10px;
  left: 0;
  right: 0;
  margin: auto;
  width: 1px;
  height: 20px;
}
main .service .service-content .service-item .service-text {
  font-size: clamp(1rem, 0.909rem + 0.45vw, 1.25rem);
  max-width: 460px;
  font-family: "Noto Sans JP", sans-serif;
}
@media screen and (max-width: 1000px) {
  main .service .service-content .service-item .service-text {
    max-width: 100%;
  }
}
main .service .service-content .btn {
  background-color: transparent;
  color: #4483a6;
  border: 1px solid #4483a6;
  margin: 50px auto 0;
  height: 40px;
}
main .service .service-content .btn::after {
  border-top: solid 1px #4483a6;
  border-right: solid 1px #4483a6;
}
main .solutions {
  position: relative;
  max-width: 100%;
  margin: 50px auto 0;
  padding: 0;
  padding-bottom: 70px;
}
main .solutions::after {
  content: "";
  width: 100%;
  height: 85%;
  position: absolute;
  bottom: 0;
  left: 0;
  background-image: url(./images/top/top-solution.jpg);
  z-index: -1;
}
main .solutions .solutions-content {
  max-width: 1200px;
  margin: 0 auto;
  width: calc(100% - 60px);
  padding: 0 30px;
}
main .solutions .section-header {
  text-align: left;
  color: #4483a6;
  padding: 30px 0 0;
}
main .solutions .section-header::after {
  content: "";
  position: absolute;
  left: 130px;
  /* right: 0; */
  margin: 0 auto;
  height: 2px;
  width: 25px;
  background-color: #4483a6;
  top: 13px;
}
@media screen and (max-width: 1000px) {
  main .solutions .section-header::after {
    left: 100px;
    top: 10px;
  }
}
main .solutions .section-header::before {
  top: 0px;
}
main .solutions .solutions-item {
  /* 前へ次への矢印カスタマイズ */
  /* 前への矢印カスタマイズ */
  /* 次への矢印カスタマイズ */
  /* 画像サイズ調整 */
}
main .solutions .solutions-item ul {
  display: flex;
  flex-flow: wrap;
  gap: 30px;
}
@media screen and (max-width: 767px) {
  main .solutions .solutions-item ul {
    flex-flow: column;
  }
}
main .solutions .solutions-item ul li {
  background-color: white;
  width: calc(50% - 15px);
}
@media screen and (max-width: 767px) {
  main .solutions .solutions-item ul li {
    width: 100%;
  }
}
main .solutions .solutions-item ul li .solutions-img {
  width: 100%;
  height: 300px;
}
@media screen and (max-width: 767px) {
  main .solutions .solutions-item ul li .solutions-img {
    height: 250px;
  }
}
main .solutions .solutions-item ul li .solutions-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
main .solutions .solutions-item ul li .solutions-wrap {
  padding: 25px 20px;
  min-height: 120px;
}
@media screen and (max-width: 767px) {
  main .solutions .solutions-item ul li .solutions-wrap {
    min-height: unset;
  }
}
main .solutions .solutions-item ul li .solutions-wrap .solutions-title {
  font-size: 17px;
  margin-bottom: 5px;
  height: 50px;
}
@media screen and (max-width: 767px) {
  main .solutions .solutions-item ul li .solutions-wrap .solutions-title {
    height: auto;
  }
}
main .solutions .solutions-item ul li .solutions-wrap .solutions-text {
  font-size: 14px;
}
main .solutions .solutions-item .swiper-button-prev,
main .solutions .solutions-item .swiper-button-next {
  height: 50px;
  width: 50px;
  margin-top: -90px;
}
main .solutions .solutions-item .swiper-button-prev::after,
main .solutions .solutions-item .swiper-button-next::after {
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  height: 50px;
  margin: auto;
  width: 50px;
}
main .solutions .solutions-item .swiper-button-prev::after {
  background-image: url(./images/top/slide-prev.svg);
}
main .solutions .solutions-item .swiper-button-next::after {
  background-image: url(./images/top/slide-next.svg);
}
main .solutions .solutions-item .swiper-slide img {
  height: auto;
  width: 100%;
}
main .solutions .btn {
  background-color: transparent;
  color: #4483a6;
  border: 1px solid #4483a6;
  margin: 50px auto 0;
  height: 40px;
}
main .solutions .btn::after {
  border-top: solid 1px #4483a6;
  border-right: solid 1px #4483a6;
}
main .office {
  max-width: 100%;
  margin: 0 auto;
  padding: 0;
}
main .office .office-content {
  display: flex;
  align-items: center;
  background-color: #3d5da1;
  justify-content: flex-end;
}
@media screen and (max-width: 1000px) {
  main .office .office-content {
    flex-flow: column;
  }
}
main .office .office-content img {
  max-width: 52vw;
  width: 100%;
  object-fit: cover;
  height: 530px;
}
@media screen and (max-width: 1000px) {
  main .office .office-content img {
    height: 52vw;
    max-width: 100%;
  }
}
main .office .office-content .office-item {
  padding: 40px;
  display: flex;
  flex-flow: column;
  justify-content: center;
  height: max-content;
  gap: 40px;
  max-width: 500px;
}
@media screen and (max-width: 1000px) {
  main .office .office-content .office-item {
    max-width: 100%;
  }
}
main .office .office-content .office-item .office-header .section-header {
  margin: 0;
  color: white;
  padding: 0px 0 30px;
}
main
  .office
  .office-content
  .office-item
  .office-header
  .section-header::before {
  top: unset;
  bottom: 0;
  color: white;
}
main
  .office
  .office-content
  .office-item
  .office-header
  .section-header::after {
  content: "";
  position: absolute;
  width: 70px;
  height: 1px;
  background-color: white;
  left: 0;
  bottom: -10px;
}
main .office .office-content .office-item p {
  color: white;
}
main .office .office-content .office-item .btn {
  background-color: transparent;
  color: white;
  border: 1px solid white;
  height: 40px;
}
main .office .office-content .office-item .btn::after {
  border-top: solid 1px white;
  border-right: solid 1px white;
}
main .column {
  max-width: 100%;
  margin: 0 auto;
  padding: 0;
  position: relative;
  margin-top: 70px;
}
main .column::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50%;
  background-color: #eef7fa;
  z-index: -1;
}
@media screen and (max-width: 767px) {
  main .column::after {
    height: 70%;
  }
}
main .column .column-content {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0px 20px 50px;
}
main .column .column-content .column-header .section-header {
  margin: 0;
  color: #0071bc;
  padding: 0px 0 30px;
}
main .column .column-content .column-header .section-header::before {
  top: unset;
  bottom: 0;
  color: #0071bc;
}
main .column .column-content .column-item {
  margin-top: 50px;
}
main .column .column-content .column-item ul {
  display: flex;
  gap: 50px;
}
@media screen and (max-width: 1000px) {
  main .column .column-content .column-item ul {
    gap: 20px;
  }
}
@media screen and (max-width: 767px) {
  main .column .column-content .column-item ul {
    flex-flow: column;
  }
}
main .column .column-content .column-item ul li {
  border: 1px solid #0071bc;
  padding: 20px 20px 40px 20px;
  background-color: white;
}
@media screen and (max-width: 1000px) {
  main .column .column-content .column-item ul li {
    padding: 20px;
  }
}
main .column .column-content .column-item ul li div {
  display: flex;
  gap: 20px;
  align-items: center;
}
main .column .column-content .column-item ul li .column-title {
  position: relative;
  padding-bottom: 10px;
  font-weight: 700;
}
main .column .column-content .column-item ul li .column-title::after {
  position: absolute;
  content: "";
  left: 0;
  bottom: 0;
  background-color: #0071bc;
  width: 60px;
  height: 1px;
}
main .column .column-content .column-item ul li .column-text {
  margin-top: 20px;
  font-size: 15px;
}

.page-content,
.archive-content,
.single-content {
  margin-top: 95px;
  padding-bottom: 50px;
}
@media screen and (max-width: 1000px) {
  .page-content,
  .archive-content,
  .single-content {
    margin-top: 55px;
    padding-bottom: 0px;
  }
}
.page-content .page-head,
.archive-content .page-head,
.single-content .page-head {
  position: relative;
  width: 100%;
  height: 300px;
}
@media screen and (max-width: 767px) {
  .page-content .page-head,
  .archive-content .page-head,
  .single-content .page-head {
    height: 200px;
  }
}
.page-content .page-head img,
.archive-content .page-head img,
.single-content .page-head img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}
.page-content .page-head h1,
.archive-content .page-head h1,
.single-content .page-head h1 {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  font-weight: 700;
  color: white;
  letter-spacing: 2px;
  font-family: "游明朝", "Yu Mincho", YuMincho, "Hiragino Mincho Pro", serif;
  z-index: 5;
  padding: 0 30px;
  flex-flow: column;
  background: linear-gradient(
    to right,
    rgba(0, 72, 213, 0.85),
    rgba(59, 201, 242, 0.85)
  );
}
@media screen and (max-width: 767px) {
  .page-content .page-head h1,
  .archive-content .page-head h1,
  .single-content .page-head h1 {
    font-size: 25px;
  }
}
.page-content .page-head h1 .en,
.archive-content .page-head h1 .en,
.single-content .page-head h1 .en {
  font-size: 90px;
  line-height: 1.2;
  font-family: "Fira Sans", sans-serif;
  font-style: italic;
  font-weight: bold;
}
@media screen and (max-width: 767px) {
  .page-content .page-head h1 .en,
  .archive-content .page-head h1 .en,
  .single-content .page-head h1 .en {
    font-size: 60px;
  }
}
.page-content main,
.archive-content main,
.single-content main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 30px 20px;
  background-color: white;
}
@media screen and (max-width: 1000px) {
  .page-content main,
  .archive-content main,
  .single-content main {
    padding: 50px 20px 60px;
  }
}
.page-content main .page-title,
.archive-content main .page-title,
.single-content main .page-title {
  background-color: unset;
  color: #4483a6;
  text-align: center;
  font-size: 35px;
  margin-bottom: 50px;
}
@media screen and (max-width: 767px) {
  .page-content main .page-title,
  .archive-content main .page-title,
  .single-content main .page-title {
    font-size: 25px;
    margin-bottom: 40px;
    text-align: left;
  }
}
.page-content main h2,
.archive-content main h2,
.single-content main h2 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 10px;
  background-color: #4483a6;
  color: #fff;
  padding: 10px;
  border-radius: 5px;
  margin-bottom: 25px;
  line-height: 1.3;
}
@media screen and (max-width: 767px) {
  .page-content main h2,
  .archive-content main h2,
  .single-content main h2 {
    font-size: 19px;
  }
}
.page-content main h3,
.archive-content main h3,
.single-content main h3 {
  padding-left: 30px;
  position: relative;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 20px;
}
@media screen and (max-width: 767px) {
  .page-content main h3,
  .archive-content main h3,
  .single-content main h3 {
    font-size: 19px;
  }
}
.page-content main h3::before,
.archive-content main h3::before,
.single-content main h3::before {
  position: absolute;
  content: "";
  top: calc(50% - 1px);
  width: 20px;
  left: 0;
  height: 10px;
  border-top: solid 5px #4483a6;
}
.page-content main h4,
.archive-content main h4,
.single-content main h4 {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 15px;
  color: #4483a6;
}
@media screen and (max-width: 767px) {
  .page-content main h4,
  .archive-content main h4,
  .single-content main h4 {
    font-size: 16px;
  }
}
.page-content main h5,
.archive-content main h5,
.single-content main h5 {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 10px;
}
@media screen and (max-width: 767px) {
  .page-content main h5,
  .archive-content main h5,
  .single-content main h5 {
    font-size: 15px;
  }
}
.page-content main h6,
.archive-content main h6,
.single-content main h6 {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 10px;
  color: #777777;
}
@media screen and (max-width: 767px) {
  .page-content main h6,
  .archive-content main h6,
  .single-content main h6 {
    font-size: 12px;
  }
}
.page-content main p,
.archive-content main p,
.single-content main p {
  margin-bottom: 15px;
  word-break: break-word;
}
.page-content main ul,
.page-content main ol,
.archive-content main ul,
.archive-content main ol,
.single-content main ul,
.single-content main ol {
  margin-bottom: 15px;
}
.page-content main table,
.archive-content main table,
.single-content main table {
  width: 100%;
  margin-bottom: 70px;
  background-color: white;
}
.page-content main table tr:last-child,
.archive-content main table tr:last-child,
.single-content main table tr:last-child {
  border-bottom: solid 1px #ccc;
}
.page-content main table tr:nth-child(odd) td,
.archive-content main table tr:nth-child(odd) td,
.single-content main table tr:nth-child(odd) td {
  background-color: #f7f7f7;
}
.page-content main table th,
.page-content main table td,
.archive-content main table th,
.archive-content main table td,
.single-content main table th,
.single-content main table td {
  vertical-align: middle;
}
.page-content main table th,
.archive-content main table th,
.single-content main table th {
  background: #e8e8e8;
  text-align: center;
  font-weight: bold;
  color: #3e3a39;
  padding: 15px;
  border: solid 1px #dadada;
  box-sizing: border-box;
}
@media screen and (max-width: 767px) {
  .page-content main table th,
  .archive-content main table th,
  .single-content main table th {
    padding: 8px;
  }
}
.page-content main table td,
.archive-content main table td,
.single-content main table td {
  padding: 15px;
  border: solid 1px #dadada;
  box-sizing: border-box;
}
@media screen and (max-width: 767px) {
  .page-content main table td,
  .archive-content main table td,
  .single-content main table td {
    padding: 8px;
    font-size: 13px;
  }
}
.page-content main .table2,
.archive-content main .table2,
.single-content main .table2 {
  margin-bottom: 50px;
  background-color: white;
}
@media screen and (max-width: 767px) {
  .page-content main .table2,
  .archive-content main .table2,
  .single-content main .table2 {
    width: 100%;
  }
}
.page-content main .table2 tr:last-child,
.archive-content main .table2 tr:last-child,
.single-content main .table2 tr:last-child {
  border-bottom: solid 1px #ccc;
}
.page-content main .table2 tr:nth-child(odd) td,
.archive-content main .table2 tr:nth-child(odd) td,
.single-content main .table2 tr:nth-child(odd) td {
  background-color: #f7f7f7;
}
@media screen and (max-width: 767px) {
  .page-content main .table2 th,
  .page-content main .table2 td,
  .archive-content main .table2 th,
  .archive-content main .table2 td,
  .single-content main .table2 th,
  .single-content main .table2 td {
    display: block;
    width: 100% !important;
    border-bottom: none !important;
    word-break: break-word;
  }
}
.page-content main .table2 th,
.archive-content main .table2 th,
.single-content main .table2 th {
  background: #e8e8e8;
  width: 25%;
  text-align: center;
  font-weight: bold;
  color: #3e3a39;
  padding: 15px;
  border: solid 1px #dadada;
  box-sizing: border-box;
}
.page-content main .table2 td,
.archive-content main .table2 td,
.single-content main .table2 td {
  padding: 15px;
  border: solid 1px #dadada;
  box-sizing: border-box;
}
.page-content main .row,
.archive-content main .row,
.single-content main .row {
  display: flex;
  gap: 50px;
}
.page-content main .page-number,
.archive-content main .page-number,
.single-content main .page-number {
  display: flex;
  justify-content: center;
  margin-top: 50px;
  gap: 10px;
}
@media screen and (max-width: 767px) {
  .page-content main .page-number,
  .archive-content main .page-number,
  .single-content main .page-number {
    margin-top: 50px;
    gap: 5px;
  }
}
.page-content main .page-number .page-numbers,
.archive-content main .page-number .page-numbers,
.single-content main .page-number .page-numbers {
  width: 40px;
  height: 40px;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #4483a6;
  color: #4483a6;
  font-size: 14px;
  margin-bottom: 0;
  display: flex;
  gap: 10px;
}
@media screen and (max-width: 767px) {
  .page-content main .page-number .page-numbers,
  .archive-content main .page-number .page-numbers,
  .single-content main .page-number .page-numbers {
    width: 35px;
    height: 35px;
    font-size: 12px;
  }
}
.page-content main .page-number .page-numbers.current,
.archive-content main .page-number .page-numbers.current,
.single-content main .page-number .page-numbers.current {
  background-color: #4483a6;
  color: white;
}

#service {
  max-width: 100%;
  padding: 0;
  position: relative;
  padding-bottom: 50px;
  background-color: #f7f7f7;
}
#service main {
  background-color: #f7f7f7;
}
#service .section-header {
  text-align: center;
  color: #4483a6;
  background-color: transparent;
  font-size: 40px;
  position: relative;
  padding: 0;
}
#service .section-header::before {
  position: absolute;
  content: attr(data-en);
  left: 0;
  font-size: 20px;
  color: #346545;
  right: 0;
  bottom: -35px;
  color: #4483a6;
}
@media screen and (max-width: 767px) {
  #service .section-header::before {
    font-size: 15px;
    bottom: -30px;
  }
}
#service .section-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 1px;
  height: 30px;
  background-color: #4483a6;
  top: 100px;
}
@media screen and (max-width: 767px) {
  #service .section-header::after {
    top: 85px;
  }
}
@media screen and (max-width: 767px) {
  #service .section-header {
    font-size: 30px;
  }
}
#service .service-content {
  padding: 0;
  margin-top: 130px;
}
@media screen and (max-width: 767px) {
  #service .service-content {
    margin-top: 110px;
  }
}
#service .service-content ul {
  display: flex;
  flex-flow: wrap;
  gap: 50px;
}
@media screen and (max-width: 1000px) {
  #service .service-content ul {
    gap: 30px;
  }
}
#service .service-content ul li {
  width: calc(33.3333333333% - 35px);
}
@media screen and (max-width: 1000px) {
  #service .service-content ul li {
    width: calc(33.3333333333% - 20px);
  }
}
@media screen and (max-width: 767px) {
  #service .service-content ul li {
    width: calc(50% - 15px);
  }
}
@media screen and (max-width: 500px) {
  #service .service-content ul li {
    width: 100%;
  }
}
#service .service-content ul li div a .service-img {
  width: 100%;
  height: 250px;
}
@media screen and (max-width: 1000px) {
  #service .service-content ul li div a .service-img {
    height: 150px;
  }
}
#service .service-content ul li div a .service-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#service .service-content .service-item {
  background-color: white;
  padding: 25px 20px;
}
@media screen and (max-width: 1000px) {
  #service .service-content .service-item {
    padding: 20px 15px;
  }
}
#service .service-content .service-item .service-title {
  font-size: 17px;
  margin-bottom: 5px;
}
#service .service-content .service-item .service-text {
  font-size: 14px;
}

#solutions {
  max-width: 100%;
  padding: 0;
  position: relative;
  padding-bottom: 50px;
  background-color: #f7f7f7;
}
#solutions main {
  background-color: #f7f7f7;
}
#solutions .section-header {
  text-align: center;
  color: #4483a6;
  background-color: transparent;
  font-size: 40px;
  position: relative;
  padding: 0;
}
#solutions .section-header::before {
  position: absolute;
  content: attr(data-en);
  left: 0;
  font-size: 20px;
  color: #346545;
  right: 0;
  bottom: -35px;
  color: #4483a6;
}
@media screen and (max-width: 767px) {
  #solutions .section-header::before {
    font-size: 15px;
    bottom: -30px;
  }
}
#solutions .section-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 1px;
  height: 30px;
  background-color: #4483a6;
  top: 100px;
}
@media screen and (max-width: 767px) {
  #solutions .section-header::after {
    top: 85px;
  }
}
@media screen and (max-width: 767px) {
  #solutions .section-header {
    font-size: 30px;
  }
}
#solutions .solutions-content {
  padding: 0;
  margin-top: 130px;
}
@media screen and (max-width: 767px) {
  #solutions .solutions-content {
    margin-top: 110px;
  }
}
#solutions .solutions-content ul {
  display: flex;
  flex-flow: wrap;
  gap: 50px;
}
#solutions .solutions-content ul li {
  width: 100%;
}
#solutions .solutions-content ul li div a .solutions-img {
  width: 100%;
  height: 250px;
}
@media screen and (max-width: 1000px) {
  #solutions .solutions-content ul li div a .solutions-img {
    height: 150px;
  }
}
#solutions .solutions-content ul li div a .solutions-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#solutions .solutions-content .solutions-number {
  font-size: 30px;
  color: #4483a6;
  font-weight: bold;
}
@media screen and (max-width: 767px) {
  #solutions .solutions-content .solutions-number {
    font-size: 23px;
  }
}
#solutions .solutions-content .solutions-item {
  position: relative;
  background-color: white;
  padding: 30px;
}
#solutions .solutions-content .solutions-item h3 {
  font-size: 19px;
}
#solutions .solutions-content .solutions-item p {
  margin: 0;
}
#solutions .solutions-content .solutions-item .solutions-q {
  margin-bottom: 40px;
}

#faq {
  max-width: 100%;
  padding: 0;
  position: relative;
  padding-bottom: 50px;
  background-color: #f7f7f7;
}
#faq main {
  background-color: #f7f7f7;
}
#faq .section-header {
  text-align: center;
  color: #4483a6;
  background-color: transparent;
  font-size: 40px;
  position: relative;
  padding: 0;
}
#faq .section-header::before {
  position: absolute;
  content: attr(data-en);
  left: 0;
  font-size: 20px;
  color: #346545;
  right: 0;
  bottom: -35px;
  color: #4483a6;
}
@media screen and (max-width: 767px) {
  #faq .section-header::before {
    font-size: 15px;
    bottom: -30px;
  }
}
#faq .section-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 1px;
  height: 30px;
  background-color: #4483a6;
  top: 100px;
}
@media screen and (max-width: 767px) {
  #faq .section-header::after {
    top: 85px;
  }
}
@media screen and (max-width: 767px) {
  #faq .section-header {
    font-size: 30px;
  }
}
#faq .faq-content {
  padding: 0;
  margin-top: 130px;
}
@media screen and (max-width: 767px) {
  #faq .faq-content {
    margin-top: 110px;
  }
}
#faq .faq-content ul {
  display: flex;
  flex-flow: wrap;
  gap: 50px;
}
#faq .faq-content ul li {
  width: 100%;
}
#faq .faq-content ul li h3 {
  padding: 0;
  padding-bottom: 15px;
  color: #4483a6;
  border-bottom: 1px solid #4483a6;
}
#faq .faq-content ul li h3::before {
  content: unset;
}
#faq .faq-content ul li a .faq-img {
  width: 100%;
  height: 250px;
}
@media screen and (max-width: 1000px) {
  #faq .faq-content ul li a .faq-img {
    height: 150px;
  }
}
#faq .faq-content ul li a .faq-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#faq .faq-content .faq-item {
  position: relative;
  background-color: white;
  padding: 30px;
}
#faq .faq-content .faq-item h3 {
  font-size: 19px;
}
#faq .faq-content .faq-item p {
  margin: 0;
}

#pricelist {
  max-width: 100%;
  padding: 0;
  position: relative;
  padding-bottom: 50px;
  background-color: #f7f7f7;
}
#pricelist main {
  background-color: #f7f7f7;
}
#pricelist .section-header {
  text-align: center;
  color: #4483a6;
  background-color: transparent;
  font-size: 40px;
  position: relative;
  padding: 0;
}
#pricelist .section-header::before {
  position: absolute;
  content: attr(data-en);
  left: 0;
  font-size: 20px;
  color: #346545;
  right: 0;
  bottom: -35px;
  color: #4483a6;
}
@media screen and (max-width: 767px) {
  #pricelist .section-header::before {
    font-size: 15px;
    bottom: -30px;
  }
}
#pricelist .section-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 1px;
  height: 30px;
  background-color: #4483a6;
  top: 100px;
}
@media screen and (max-width: 767px) {
  #pricelist .section-header::after {
    top: 85px;
  }
}
@media screen and (max-width: 767px) {
  #pricelist .section-header {
    font-size: 30px;
  }
}
#pricelist .pricelist-content {
  padding: 0;
  margin-top: 130px;
}
@media screen and (max-width: 767px) {
  #pricelist .pricelist-content {
    margin-top: 110px;
  }
}

#column .column-content li {
  margin-bottom: 30px;
  padding: 0px 10px 30px 10px;
  border-bottom: 1px solid #d5d5d5;
}
#column .column-content li .column-date {
  font-size: 15px;
  color: #4483a6;
}
@media screen and (max-width: 767px) {
  #column .column-content li .column-date {
    font-size: 13px;
  }
}
#column .column-content li a {
  display: flex;
  flex-flow: column;
  gap: 5px;
}
#column .column-content li a .column-title {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 5px;
}
#column .column-content li a .column-text {
  margin-bottom: 0;
}

#office {
  max-width: 100%;
  padding: 0;
  position: relative;
  padding-bottom: 50px;
  background-color: rgba(194, 215, 219, 0.2);
}
#office main {
  background-color: transparent;
}
#office .section-header {
  text-align: center;
  color: #4483a6;
  background-color: transparent;
  font-size: 40px;
  position: relative;
  padding: 30px 0 40px 0;
}
#office .section-header::before {
  position: absolute;
  content: attr(data-en);
  left: 0;
  font-size: 20px;
  color: #346545;
  right: 0;
  top: 0;
  color: #4483a6;
}
#office .section-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 1px;
  height: 30px;
  background-color: #4483a6;
  bottom: 0px;
}
@media screen and (max-width: 767px) {
  #office .section-header {
    font-size: 30px;
  }
}
#office .office-content {
  padding: 0;
  margin-top: 50px;
}
#office .office-content .office-about {
  display: flex;
  align-items: flex-end;
  margin-bottom: 70px;
}
@media screen and (max-width: 767px) {
  #office .office-content .office-about {
    flex-flow: column;
  }
}
#office .office-content .office-about .office-img {
  min-width: 700px;
  height: 450px;
}
@media screen and (max-width: 1000px) {
  #office .office-content .office-about .office-img {
    min-width: 500px;
  }
}
@media screen and (max-width: 767px) {
  #office .office-content .office-about .office-img {
    min-width: 100%;
    height: 310px;
  }
}
#office .office-content .office-about .office-img img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}
#office .office-content .office-about p {
  background-color: #4483a6;
  color: white;
  margin: 0;
  margin-left: -100px;
  margin-bottom: 30px;
  padding: 30px;
}
@media screen and (max-width: 767px) {
  #office .office-content .office-about p {
    margin: 0px;
    padding: 20px;
  }
}
#office .office-content iframe {
  width: 100%;
  height: 300px;
}
#office .breadcrumb {
  background-color: white;
}

#news .news-content li {
  margin-bottom: 30px;
  padding: 0px 10px 30px 10px;
  border-bottom: 1px solid #d5d5d5;
}
#news .news-content li .news-date {
  font-size: 15px;
  color: #4483a6;
}
@media screen and (max-width: 767px) {
  #news .news-content li .news-date {
    font-size: 13px;
  }
}
#news .news-content li a {
  display: flex;
  flex-flow: column;
  gap: 5px;
}
#news .news-content li a .news-title {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 5px;
}
#news .news-content li a .news-text {
  margin-bottom: 0;
}

#contact .required,
#conf .required {
  background-color: #c70000;
  color: white;
  font-size: 10px;
  margin-left: 8px;
  padding: 2px 8px 3px 8px;
  border-radius: 50px;
  position: relative;
  top: -3px;
  display: inline-block;
}
@media screen and (max-width: 767px) {
  #contact .required,
  #conf .required {
    display: block;
    width: fit-content;
    position: unset;
    margin: 5px auto 0;
    padding: 2px 7px;
  }
}
#contact .privacy-scrollBox,
#conf .privacy-scrollBox {
  height: 200px;
  overflow-y: scroll;
  padding: 10px;
  width: calc(100% - 20px);
  border: 1px solid #d5d5d5;
}
#contact .mb0,
#conf .mb0 {
  margin-bottom: 0;
}
#contact table,
#conf table {
  width: 100%;
}
#contact table th,
#conf table th {
  font-size: 13px;
}
@media screen and (max-width: 767px) {
  #contact table th,
  #conf table th {
    width: 70px;
    padding: 10px 5px;
  }
}
#contact input,
#contact textarea,
#conf input,
#conf textarea {
  padding: 6px 10px;
  outline: unset;
  border: 1px solid #dfdfdf;
  border-radius: 5px;
}
#contact textarea,
#conf textarea {
  width: calc(100% - 20px);
}
#contact input,
#conf input {
  margin: 0px 2px 10px 2px;
}
#contact input:last-child,
#conf input:last-child {
  margin-bottom: 0;
}
#contact .privacy-check input,
#conf .privacy-check input {
  margin: 0px 5px 0px 0px;
}
#contact .submit-btn,
#conf .submit-btn {
  display: flex;
  justify-content: center;
  margin-top: 50px;
  gap: 20px;
}
#contact .submit-btn input,
#conf .submit-btn input {
  margin: 0;
  width: 200px;
  background-color: #4483a6;
  border: 0;
  color: white;
  cursor: pointer;
  font-weight: 700;
  border-radius: 100px;
  padding: 7px 20px;
  font-size: 16px;
  letter-spacing: 5px;
  display: flex;
  justify-content: center;
}

.mw_wp_form_confirm .required {
  display: none;
}
.mw_wp_form_confirm .submit-btn {
  margin: 0 auto;
  display: flex;
  margin-top: 40px;
  gap: 20px;
  text-align: center;
  align-items: center;
  justify-content: center;
}
.mw_wp_form_confirm .submit-btn input {
  margin: 0;
  width: 200px;
  background-color: #346545;
  border: 0;
  color: white;
  cursor: pointer;
  font-weight: 700;
  border-radius: 100px;
  padding: 7px 20px;
  font-size: 16px;
  letter-spacing: 5px;
  display: flex;
  justify-content: center;
}

.mw_wp_form_complete .btm-txt {
  text-align: center;
  line-height: 2.5;
}

.pagenavi {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 50px;
}
.pagenavi span a {
  background-color: #363636;
  color: white;
  padding: 10px 20px;
}
@media screen and (max-width: 1000px) {
  .pagenavi span a {
    padding: 10px;
  }
}

.banner {
  width: 100%;
  background-color: #f0f5f7;
}
.banner .banner-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 60px 20px;
}
.banner .banner-content ul {
  display: flex;
  gap: 30px;
  flex-flow: wrap;
}
@media screen and (max-width: 500px) {
  .banner .banner-content ul {
    flex-flow: column;
  }
}
.banner .banner-content ul li {
  width: calc(50% - 20px);
  background-color: white;
}
@media screen and (max-width: 500px) {
  .banner .banner-content ul li {
    width: 100%;
  }
}
.banner .banner-content ul li a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 30px;
  height: 100%;
  padding-right: 50px;
}
@media screen and (max-width: 1000px) {
  .banner .banner-content ul li a {
    gap: 20px;
  }
}
@media screen and (max-width: 767px) {
  .banner .banner-content ul li a {
    flex-flow: column;
    padding: 0;
    align-items: baseline;
    gap: 0;
  }
}
.banner .banner-content ul li a img {
  object-fit: cover;
  width: 230px;
  height: 100%;
}
@media screen and (max-width: 1000px) {
  .banner .banner-content ul li a img {
    width: 170px;
  }
}
@media screen and (max-width: 767px) {
  .banner .banner-content ul li a img {
    width: 100%;
    height: 150px;
  }
}
.banner .banner-content ul li a p {
  display: flex;
  flex-flow: column;
  gap: 10px;
}
@media screen and (max-width: 767px) {
  .banner .banner-content ul li a p {
    padding: 15px 15px 30px 15px;
  }
}
.banner .banner-content ul li a .footer-banner-title {
  color: #4483a6;
  font-weight: 700;
  font-size: 17px;
}
.banner .banner-content ul li a .arrow {
  display: inline-block;
  vertical-align: middle;
  color: #4483a6;
  line-height: 1;
  position: absolute;
  width: 30px;
  height: 1px;
  background: currentColor;
  position: absolute;
  right: 10px;
}
.banner .banner-content ul li a .arrow::before {
  content: "";
  width: 10px;
  height: 10px;
  border: 1px solid currentColor;
  border-left: 0;
  border-bottom: 0;
  transform: rotate(45deg);
  transform-origin: top right;
  position: absolute;
  top: 50%;
  right: -0.05em;
  box-sizing: border-box;
}
@media screen and (max-width: 767px) {
  .banner .banner-content ul li a .arrow {
    bottom: 20px;
    right: 10px;
  }
}

.contact {
  position: relative;
  text-align: center;
  padding-top: 100px;
  color: white;
  padding-top: 80px;
  background-image: url(./images/common/ftr-contact.jpg);
  background-size: cover;
}
.contact::before {
  position: absolute;
  content: "";
  width: 1px;
  height: 60px;
  background-color: white;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
}
.contact::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to right,
    rgba(9, 52, 138, 0.85),
    rgba(103, 192, 240, 0.85)
  );
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}
.contact .contact-content {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0px 20px 50px;
}
.contact .contact-header h2 {
  padding: 0;
  margin-bottom: 20px;
  font-size: 50px;
  font-weight: 700;
  color: white;
  position: relative;
  padding-bottom: 25px;
}
@media screen and (max-width: 767px) {
  .contact .contact-header h2 {
    font-size: 35px;
  }
}
.contact .contact-header h2::before {
  position: absolute;
  content: attr(data-en);
  left: 3px;
  font-size: 17px;
  color: white;
  bottom: 0;
  left: 0;
  right: 0;
}
@media screen and (max-width: 767px) {
  .contact .contact-header h2::before {
    font-size: 16px;
  }
}
.contact .contact-item {
  margin-top: 50px;
  background-color: white;
  padding: 50px;
}
@media screen and (max-width: 1000px) {
  .contact .contact-item {
    flex-flow: column;
    gap: 30px;
    padding: 30px;
  }
}
.contact .contact-item p {
  line-height: 2;
  color: #303030;
}
@media screen and (max-width: 767px) {
  .contact .contact-item p br {
    display: none;
  }
}
.contact .contact-item .contact-btn {
  display: flex;
  align-items: center;
  gap: 50px;
  justify-content: center;
  margin-top: 30px;
}
@media screen and (max-width: 1000px) {
  .contact .contact-item .contact-btn {
    flex-flow: column;
    gap: 0px;
    margin-top: 10px;
  }
}
.contact .contact-item .contactBtn,
.contact .contact-item .telBtn {
  height: 80px;
  width: calc(50% - 40px);
  max-width: unset;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media screen and (max-width: 1000px) {
  .contact .contact-item .contactBtn,
  .contact .contact-item .telBtn {
    width: calc(100% - 40px);
  }
}
@media screen and (max-width: 500px) {
  .contact .contact-item .contactBtn,
  .contact .contact-item .telBtn {
    padding: 10px;
    width: calc(100% - 20px);
  }
}
.contact .contact-item .telBtn div {
  text-align: left;
}
.contact .contact-item .telBtn p {
  font-size: 40px;
  line-height: 1;
}
@media screen and (max-width: 767px) {
  .contact .contact-item .telBtn p {
    font-size: 33px;
  }
}
@media screen and (max-width: 500px) {
  .contact .contact-item .telBtn p {
    font-size: 25px;
  }
}
.contact .contact-item .telBtn span {
  font-size: 13px;
}
@media screen and (max-width: 500px) {
  .contact .contact-item .telBtn span {
    font-size: 12px;
  }
}
.contact .contact-item .telBtn img {
  width: 20px;
  margin-right: 20px;
  margin-top: -20px;
}
@media screen and (max-width: 767px) {
  .contact .contact-item .telBtn img {
    width: 15px;
    margin-right: 12px;
  }
}
.contact .contact-item .contactBtn {
  background-color: white;
  color: white;
  background: linear-gradient(45deg, #3d60a2 0%, #6dc1ef 100%);
}
.contact .contact-item .contactBtn span {
  font-size: 30px;
}
@media screen and (max-width: 767px) {
  .contact .contact-item .contactBtn span {
    font-size: 25px;
  }
}
@media screen and (max-width: 500px) {
  .contact .contact-item .contactBtn span {
    font-size: 20px;
  }
}
.contact .contact-item .contactBtn img {
  width: 30px;
  margin-right: 20px;
}
@media screen and (max-width: 767px) {
  .contact .contact-item .contactBtn img {
    margin-right: 10px;
  }
}

footer .ftrContent {
  max-width: 1200px;
  margin: 0 auto;
  padding: 50px 20px 50px;
  text-align: center;
  display: flex;
  flex-flow: column;
  gap: 50px;
  align-items: center;
  justify-content: space-between;
}
@media screen and (max-width: 767px) {
  footer .ftrContent {
    flex-flow: column;
    gap: 30px;
  }
}
footer .ftrContent > div {
  text-align: left;
}

/* justify-content は中身を中央に寄せるだけなので、
   ボックス自体を中央に置くには margin-inline: auto が必要 */
footer .ftrContent .logoImg {
  margin: 0 auto 20px;
  max-width: 500px;
  display: flex;
  justify-content: center;
}
@media screen and (max-width: 767px) {
  footer .ftrContent .logoImg {
    max-width: 210px;
  }
}
footer .ftrContent p span {
  display: block;
  margin-bottom: 10px;
}
footer .ftrContent nav {
  display: flex;
  gap: 5px 20px;
  align-items: center;
  justify-content: center;
  gap: 60px;
}
@media screen and (max-width: 1000px) {
  footer .ftrContent nav {
    justify-content: flex-start;
  }
}
@media screen and (max-width: 500px) {
  footer .ftrContent nav {
    flex-flow: column;
    align-items: baseline;
    width: 100%;
    gap: 20px;
  }
}
footer .ftrContent nav ul {
  display: flex;
  align-items: baseline;
  gap: 30px;
  flex-flow: wrap;
}
footer .ftrContent nav ul li {
  position: relative;
  padding-left: 20px;
}
footer .ftrContent nav ul li::after {
  content: "";
  border: 0;
  border-top: solid 1px #4483a6;
  border-right: solid 1px #4483a6;
  display: inline-block;
  width: 7px;
  height: 7px;
  position: absolute;
  top: 50%;
  left: 0px;
  transform: translateY(-50%) rotate(45deg);
}
footer .ftrContent nav ul li a {
  font-size: 15px;
}
footer .copyright {
  padding: 10px 0;
  background: #4483a6;
  color: #fff;
}
footer .copyright p {
  text-align: center;
}

/* 事務所情報と認定ロゴ */
.footer__info {
  display: flex;
  gap: 40px;
  align-items: center;
  justify-content: center;
}

.footer__erumin {
  text-align: center;
}

.footer__erumin p {
  margin-bottom: 10px;
  font-size: 14px;
}

/* 親要素の20%だと幅に応じて極端に縮むため、実寸で指定 */
.footer__erumin img {
  width: 160px;
  max-width: 100%;
  height: auto;
  margin-inline: auto;
}

.footer__link-logo {
  display: flex;
  gap: 32px;
}

/* SPは上下に積む */
@media screen and (max-width: 767px) {
  .footer__info {
    flex-flow: column;
    gap: 30px;
  }
  .footer__info > div {
    text-align: center;
  }
  .footer__erumin img {
    width: 140px;
  }
}

@media screen and (max-width: 510px) {
  .footer__link-logo {
    flex-direction: column;
  }
}



/* ==========================================================================
   #question (よくある質問) ページ専用スタイル
   対象テンプレート: archive-question.php / taxonomy-question-cat.php

   ※ .page-head / .breadcrumb / .page-number は既存の
     .archive-content 用スタイルがそのまま当たるため、ここには含めていません。
   ========================================================================== */

/* ---------- カテゴリータブ(ページ上部の絞り込み) ---------- */
#question .question__categories {
  margin-bottom: 40px;
}

#question .question__categories-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

#question .question__categories-item {
  flex: 0 0 auto;
}

#question .question__categories-link {
  display: block;
  padding: 14px 20px;
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  color: #2e9bd6;
  background-color: #fff;
  border: 1px solid #dadada;
  border-radius: 5px;
  transition: 0.3s;
}

#question .question__categories-link:hover {
  background-color: #f7f7f7;
  border-color: #2e9bd6;
}

#question .question__categories-link--active,
#question .question__categories-link--active:hover {
  background-color: #2e9bd6;
  border-color: #2e9bd6;
  color: #fff;
}

@media screen and (max-width: 767px) {
  #question .question__categories-list {
    gap: 8px;
  }
  #question .question__categories-link {
    padding: 10px 14px;
    font-size: 13px;
  }
}

/* ---------- 質問一覧(常時表示) ---------- */
#question .question__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

#question .question__item {
  margin-bottom: 60px;
}

#question .question__item:last-child {
  margin-bottom: 0;
}

/* カテゴリータグ(個々の質問に付くラベル) */
#question .question__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

#question .question__tag {
  display: inline-block;
  padding: 6px 16px;
  background-color: #2e9bd6;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}

/* Q・A共通の行レイアウト */
#question .question__row {
  display: flex;
  align-items: center;
  gap: 20px;
}

#question .question__row--a {
  align-items: stretch;
  margin-top: 16px;
}

/* Qアイコン(円形 + 点線の輪) */
#question .question__icon {
  position: relative;
  flex-shrink: 0;
  width: 90px;
  height: 90px;
}

#question .question__icon-dots {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background-image: radial-gradient(circle, #2e9bd6 1.4px, transparent 1.4px);
  background-size: 7px 7px;
  opacity: 0.45;
}

#question .question__icon-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background-color: #2e9bd6;
  color: #fff;
  font-size: 28px;
  font-weight: 700;
}

/* Qの質問本文(枠線ボックス) */
#question .question__body--q {
  flex: 1;
  padding: 18px 24px;
  border: 2px solid #2e9bd6;
  font-size: 18px;
  font-weight: 700;
  color: #222222;
}

/* Aラベル(オレンジの帯) */
#question .question__label {
  flex-shrink: 0;
  width: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f0a830;
  color: #fff;
  font-size: 30px;
  font-weight: 700;
}

/* Aの回答本文 */
#question .question__body--a {
  flex: 1;
  padding: 20px 24px;
  background-color: #f7f8f8;
  font-size: 15px;
  line-height: 1.8;
  color: #444444;
}

#question .question__body--a a {
  color: #5b4fc4;
  text-decoration: underline;
}

#question .question__empty {
  padding: 40px 15px;
  text-align: center;
  color: #767676;
  background-color: #f7f7f7;
}

@media screen and (max-width: 767px) {
  #question .question__icon {
    width: 56px;
    height: 56px;
  }
  #question .question__icon-circle {
    width: 42px;
    height: 42px;
    font-size: 20px;
  }
  #question .question__row {
    gap: 12px;
  }
  #question .question__body--q {
    padding: 14px 16px;
    font-size: 15px;
  }
  #question .question__label {
    width: 44px;
    font-size: 22px;
  }
  #question .question__body--a {
    padding: 16px;
    font-size: 14px;
  }
}

/* ==========================================================================
   #lanchester (書籍販売) ページ専用スタイル
   対象テンプレート: archive-lanchester.php / single-lanchester.php
   ========================================================================== */

/* ---------- 一覧ページ ---------- */
#lanchester .lanchester__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

#lanchester .lanchester-content {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 20px;
}

/* 各アイテムの青帯タイトル */
#lanchester .lanchester__item-heading {
  background-color: #4483a6;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  padding: 8px 14px;
  margin-bottom: 16px;
}

/* 画像 + 本文の横並びコンテナ */
#lanchester .lanchester__item-inner {
  display: flex;
  gap: 30px;
  align-items: flex-start;
}

/* 商品画像 */
#lanchester .lanchester__image {
  flex-shrink: 0;
  width: 240px;
}
#lanchester .lanchester__image img {
  width: 100%;
  height: auto;
  display: block;
}

/* 本文エリア */
#lanchester .lanchester__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* 本文内タイトル */
#lanchester .lanchester__name {
  font-size: 18px;
  font-weight: 700;
  color: #222;
}

/* 定価 */
#lanchester .lanchester__price-regular {
  color: #222;
}

/* 特価 */
#lanchester .lanchester__price-sale span {
  color: #e74c3c;
  font-weight: 700;
}

/* 教材種類 */
#lanchester .lanchester__material {
  color: #444;
}

/* 詳細ボタン(オレンジ) */
#lanchester .lanchester__detail-btn {
  display: block;
  max-width: 320px; /* ← 追加 */
  background-color: #f0a830;
  color: #fff;
  text-align: center;
  padding: 14px 20px;
  font-size: 16px;
  font-weight: 700;
  margin-top: 10px;
}
#lanchester .lanchester__detail-btn:hover {
  opacity: 0.8;
  color: #fff;
}

/* 登録なし */
#lanchester .lanchester__empty {
  padding: 40px 15px;
  text-align: center;
  color: #767676;
  background-color: #f7f7f7;
}

/* ---------- 個別ページ ---------- */
#lanchester .lanchester__single-title {
  background-color: #4483a6;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  padding: 10px 16px;
  margin-bottom: 24px;
}

#lanchester .lanchester__single-inner {
  display: flex;
  gap: 40px;
  align-items: flex-start;
  margin-bottom: 30px;
  justify-content: space-around;
}

#lanchester .lanchester__single-image {
  flex-shrink: 0;
  width: 300px;
}
#lanchester .lanchester__single-image img {
  width: 100%;
  height: auto;
  display: block;
  margin-bottom: 30px;
}

#lanchester .lanchester__single-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

#lanchester .lanchester__single-content {
  line-height: 1.8;
  color: #444;
}

#lanchester .lanchester__inquiry-btn {
  display: block;
  max-width: 320px;
  background-color: #f0a830;
  color: #fff;
  text-align: center;
  padding: 14px 20px;
  font-size: 16px;
  font-weight: 700;
  transition: opacity 0.3s;
}
#lanchester .lanchester__inquiry-btn:hover {
  opacity: 0.8;
  color: #fff;
}

#lanchester .lanchester__single-back {
  margin-top: 30px;
}

/* ---------- スマホ対応 ---------- */
@media screen and (max-width: 767px) {
  #lanchester .lanchester__item-inner,
  #lanchester .lanchester__single-inner {
    flex-direction: column;
  }
  #lanchester .lanchester__image,
  #lanchester .lanchester__single-image {
    width: 100%;
  }
  #lanchester .lanchester__item-heading,
  #lanchester .lanchester__single-title {
    font-size: 16px;
  }
  #lanchester .lanchester__detail-btn,
  #lanchester .lanchester__inquiry-btn {
    font-size: 14px;
  }
}
/* ========================================
   ランチェスター注文フォーム
   既存の#contact / #confスタイルを流用
   ======================================== */

#lanchester-order .required {
  background-color: #c70000;
  color: white;
  font-size: 10px;
  margin-left: 8px;
  padding: 2px 8px 3px 8px;
  border-radius: 50px;
  position: relative;
  top: -3px;
  display: inline-block;
}
@media screen and (max-width: 767px) {
  #lanchester-order .required {
    display: block;
    width: fit-content;
    position: unset;
    margin: 5px auto 0;
    padding: 2px 7px;
  }
}
#lanchester-order .privacy-scrollBox {
  height: 200px;
  overflow-y: scroll;
  padding: 10px;
  width: calc(100% - 20px);
  border: 1px solid #d5d5d5;
}
#lanchester-order .mb0 {
  margin-bottom: 0;
}
#lanchester-order table {
  width: 100%;
}
#lanchester-order table th {
  font-size: 13px;
}
@media screen and (max-width: 767px) {
  #lanchester-order table th {
    width: 70px;
    padding: 10px 5px;
  }
}
#lanchester-order input,
#lanchester-order textarea {
  padding: 6px 10px;
  outline: unset;
  border: 1px solid #dfdfdf;
  border-radius: 5px;
}
#lanchester-order textarea {
  width: calc(100% - 20px);
}
#lanchester-order input {
  margin: 0px 2px 10px 2px;
}
#lanchester-order input:last-child {
  margin-bottom: 0;
}
#lanchester-order .privacy-check input {
  margin: 0px 5px 0px 0px;
}
#lanchester-order .submit-btn {
  display: flex;
  justify-content: center;
  margin-top: 50px;
}
#lanchester-order .submit-btn input {
  margin: 0;
  width: 200px;
  background-color: #4483a6;
  border: 0;
  color: white;
  cursor: pointer;
  font-weight: 700;
  border-radius: 100px;
  padding: 7px 20px;
  font-size: 16px;
  letter-spacing: 5px;
  display: flex;
  justify-content: center;
}

.voc-content {
  padding-bottom: 50px;
}

.voc-item ul {
  display: grid;
  /* 以前は repeat(3, 320px) の固定値でした。
     3列分は 320×3 ＋ 隙間30×2 ＝ 1020px 必要なため、
     コンテナがそれより狭いとはみ出し、overflow-x: hidden で
     切り取られて「設定より大きい」状態に見えていました。
     auto-fit にして、収まる数だけ自動で折り返します（3列→2列→1列）。
     min() を挟んでいるのは、極端に狭い端末でも 240px が
     はみ出さないようにするためです。 */
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 320px));
  /* Grid全体を親要素の中央に配置する */
  justify-content: center;
  gap: 30px; /* 画像と画像の間の余白 */
  padding: 0;
  margin: 0;
  list-style: none;
}

/* アンケート用紙は縦長・横長が混在するため、枠の比率を固定して
   その中に画像全体を収めています。
   height: auto のままだと縦長の1枚だけ背が高くなり、行の高さが
   揃わなくなるのが原因でした。
   cover だと縦長の用紙が上下で切れて手書きの回答が読めなくなるため、
   contain で全体を表示し、余白は白地にしています。
   比率を変えたい場合は aspect-ratio の数値だけ調整してください。 */
.voc-img a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 4 / 3;
  padding: 10px;
  box-sizing: border-box;
  overflow: hidden;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* 画像自体の調整 */
.voc-img img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  transition: transform 0.3s ease;
}

.voc-img a:hover img {
  transform: scale(1.03);
}

@media (max-width: 768px) {
  .voc-item ul {
    /* SPは1列固定。minmax の下限を 0 にして、
       中身の実寸で列が広がるのを防いでいます */
    grid-template-columns: minmax(0, 350px);
  }
  .voc-img a {
    padding: 8px;
  }
}

/* ================================================================
   ================================================================
   業務案内ページ（建設業許可の取得 / 公共事業の入札）追加分
   ----------------------------------------------------------------
   ・style.css の末尾にそのまま追記してください。
     既存の記述は一切変更していません。
   ・テーマカラー #4483A6、ブレークポイント 767 / 1000 / 1300 に
     合わせています。
   ・見出し（h2の青帯・h3の左線）はテーマ標準がそのまま効くため、
     ここでは定義していません。本文に <h2> <h3> と書くだけでOKです。
   ・本文（the_content）にカスタムHTMLブロックで置く前提です。
   ================================================================
   ================================================================ */

/* ================================================================
   ステップフロー
   ----------------------------------------------------------------
   番号は counter で自動採番します。項目を増減しても
   HTML側の番号を書き換える必要はありません。
   ================================================================ */

/* 器
   既存の main ol { margin-bottom:15px } を上書きするため、
   テーマと同じ3セレクタで指定しています */
.page-content main .step-list,
.archive-content main .step-list,
.single-content main .step-list {
  counter-reset: step;
  list-style: none;
  margin: 0 0 50px;
  padding: 0;
}

.step-list .step-list__item {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 14px 18px;
  padding-bottom: 26px;
  list-style: none;
  /* バッジ同士をつなぐ縦線。
       見出し行はグレーの帯が上に重なるため、本文の横だけに見えます */
  background-image: linear-gradient(#dbe6ec, #dbe6ec);
  background-repeat: no-repeat;
  background-size: 2px 100%;
  background-position: 47px 0;
}

.step-list .step-list__item:last-child {
  padding-bottom: 0;
  background-image: none;
}

/* 見出し行の背景（バッジと見出しをまとめて包むグレーの帯） */
.step-list .step-list__item::before {
  content: "";
  grid-row: 1;
  grid-column: 1 / -1;
  background-color: #f2f6f8;
}

/* 番号バッジ */
.step-list .step-list__item::after {
  counter-increment: step;
  content: "STEP " counter(step);
  grid-row: 1;
  grid-column: 1;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  background-color: #4483a6;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  line-height: 1;
}

/* 見出し
   ステップ内の h3 には、テーマ標準の左線（padding-left:30px と
   ::before）が効いてしまうため、ここだけ打ち消しています */
.step-list .step-list__title {
  grid-row: 1;
  grid-column: 2;
  align-self: center;
  margin: 0;
  padding: 8px 14px 8px 0;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.4;
}

.step-list .step-list__title::before {
  content: none;
}

/* 本文
   縦線と重ならないよう、見出しと同じ位置までインデントしています */
.step-list .step-list__text {
  grid-row: 2;
  grid-column: 2;
  margin: 0;
  font-size: 15px;
  line-height: 1.8;
}

@media screen and (max-width: 767px) {
  .page-content main .step-list,
  .archive-content main .step-list,
  .single-content main .step-list {
    margin-bottom: 40px;
  }
  .step-list .step-list__item {
    grid-template-columns: 78px 1fr;
    gap: 10px 12px;
    padding-bottom: 20px;
    background-position: 38px 0;
  }
  .step-list .step-list__item::after {
    min-height: 38px;
    font-size: 12px;
    letter-spacing: 0.5px;
  }
  .step-list .step-list__title {
    padding: 6px 10px 6px 0;
    font-size: 17px;
  }
  .step-list .step-list__text {
    font-size: 14px;
    line-height: 1.75;
  }
}

/* ================================================================
   データ表（29業種一覧など）
   ----------------------------------------------------------------
   既存の main table には手を入れず、.data-table を付けたものだけ
   この体裁になります。
   ・ヘッダー行はテーマカラーで固定
   ・本文行は白とグレーの交互
   ・SPは横スクロール
   ================================================================ */
.data-table-wrap {
  margin-bottom: 50px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.page-content main .data-table,
.archive-content main .data-table,
.single-content main .data-table {
  width: 100%;
  margin-bottom: 0;
  border-collapse: collapse;
}

.data-table th,
.data-table td {
  padding: 10px 14px;
  border: solid 1px #dfe5ea;
  font-size: 14px;
  line-height: 1.6;
  vertical-align: middle;
}

.page-content main .data-table thead th,
.archive-content main .data-table thead th,
.single-content main .data-table thead th {
  background-color: #4483a6;
  color: #fff;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
}

/* 交互の背景色 */
.page-content main .data-table tbody tr:nth-child(odd) td,
.archive-content main .data-table tbody tr:nth-child(odd) td,
.single-content main .data-table tbody tr:nth-child(odd) td {
  background-color: #fff;
}

.page-content main .data-table tbody tr:nth-child(even) td,
.archive-content main .data-table tbody tr:nth-child(even) td,
.single-content main .data-table tbody tr:nth-child(even) td {
  background-color: #f2f6f8;
}

/* 1列目を見出しとして使う場合 */
.page-content main .data-table tbody th,
.archive-content main .data-table tbody th,
.single-content main .data-table tbody th {
  background-color: #eaf0f4;
  font-weight: 700;
  text-align: left;
  white-space: nowrap;
}

/* 表の下の注記 */
.data-table-note {
  margin: -38px 0 50px;
  font-size: 13px;
  line-height: 1.7;
  color: #777;
}

@media screen and (max-width: 767px) {
  .data-table-wrap {
    margin-bottom: 40px;
  }
  .data-table th,
  .data-table td {
    padding: 8px 10px;
    font-size: 13px;
  }
  /* 長い業種名などが1行に伸びて横スクロールが極端に長くなるのを防ぐ */
  .page-content main .data-table tbody th,
  .archive-content main .data-table tbody th,
  .single-content main .data-table tbody th {
    white-space: normal;
  }
  .data-table-note {
    margin: -30px 0 40px;
    font-size: 12px;
  }
}

/* ================================================================
   注記ブロック（※1 許可要件など）
   ----------------------------------------------------------------
   上下を罫線で区切った補足情報のかたまり。
   本文中から <a href="#note1"> などでリンクできます。
   ================================================================ */
.note-block {
  margin: 10px 0 40px;
  padding: 30px 0;
  border-top: solid 1px #ddd;
  border-bottom: solid 1px #ddd;
  /* 固定ヘッダーの下に潜り込まないようにする */
  scroll-margin-top: 110px;
}

.note-block .note-block__lead {
  margin: 0 0 26px;
  font-size: 15px;
  line-height: 1.8;
  font-weight: 700;
}

.note-block .note-block__group {
  margin-bottom: 26px;
}

.note-block .note-block__group:last-child {
  margin-bottom: 0;
}

.note-block .note-block__title {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.6;
  color: #333;
}

.note-block .note-block__title::before {
  content: "■";
  margin-right: 2px;
}

.note-block .note-block__text {
  margin: 0;
  font-size: 15px;
  line-height: 1.8;
}

.note-block .note-block__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.note-block .note-block__list li {
  position: relative;
  padding-left: 1em;
  font-size: 15px;
  line-height: 1.8;
}

.note-block .note-block__list li::before {
  content: "・";
  position: absolute;
  left: 0;
}

@media screen and (max-width: 767px) {
  .note-block {
    margin-bottom: 30px;
    padding: 24px 0;
    scroll-margin-top: 70px;
  }
  .note-block .note-block__lead,
  .note-block .note-block__text,
  .note-block .note-block__list li {
    font-size: 14px;
  }
  .note-block .note-block__title {
    font-size: 15px;
  }
}

/* ================================================================
   Q&Aバナー
   ----------------------------------------------------------------
   元サイトでは画像でしたが、テキストで組み直しています。
   画像を使う場合はこのブロックごと <img> に差し替えてください。
   ================================================================ */
.qa-banner {
  display: block;
  margin: 50px 0 0;
  overflow: hidden;
  text-align: center;
  transition: opacity 0.3s;
}

.qa-banner:hover {
  opacity: 0.85;
}

.qa-banner .qa-banner__lead {
  display: block;
  padding: 18px 20px;
  background-color: #4483a6;
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.5;
}

.qa-banner .qa-banner__lead em {
  font-style: normal;
  color: #ffe27a;
}

.qa-banner .qa-banner__label {
  display: block;
  padding: 28px 20px;
  background-color: #eef3f6;
  color: #333;
  font-size: 46px;
  font-weight: 700;
  letter-spacing: 0.2em;
  line-height: 1;
}

@media screen and (max-width: 767px) {
  .qa-banner {
    margin-top: 36px;
  }
  .qa-banner .qa-banner__lead {
    padding: 14px 15px;
    font-size: 16px;
  }
  .qa-banner .qa-banner__label {
    padding: 20px 15px;
    font-size: 32px;
  }
}

/* ================================================================
   箇条書き（●付き）
   ----------------------------------------------------------------
   テーマ冒頭の ol,ul { list-style:none } を打ち消して点を出します。
   使い方： <ul class="bullet-list"><li>…</li></ul>
   ================================================================ */
.page-content main .bullet-list,
.archive-content main .bullet-list,
.single-content main .bullet-list {
  margin: 0 0 25px;
  padding-left: 1.4em;
  list-style: disc;
}

.bullet-list li {
  margin-bottom: 6px;
  font-size: 16px;
  line-height: 1.8;
}

.bullet-list li:last-child {
  margin-bottom: 0;
}

.bullet-list li::marker {
  color: #4483a6;
}

/* 番号付きにしたい場合は <ol class="bullet-list bullet-list--num"> */
.page-content main .bullet-list--num,
.archive-content main .bullet-list--num,
.single-content main .bullet-list--num {
  list-style: decimal;
}

@media screen and (max-width: 767px) {
  .bullet-list li {
    font-size: 14px;
    line-height: 1.75;
  }
}





/* -------------------------------------------
   1. エラーメッセージの表示制御
      送信ボタンを押すまでは出さない
   ------------------------------------------- */
.wpcf7-not-valid-tip {
    display: none !important;
}
 
.wpcf7 form.invalid .wpcf7-not-valid-tip,
.wpcf7 form.unaccepted .wpcf7-not-valid-tip {
    display: block !important;
}
 
.wpcf7-spinner {
    display: none !important;
}
 
 
/* -------------------------------------------
   2. 入力欄のラッパーを横並びに
   ------------------------------------------- */
.wpcf7 .wpcf7-form-control-wrap {
    display: inline-block;
    vertical-align: top;
    max-width: 100%;
}
 
 
/* -------------------------------------------
   3. 幅クラスをラッパー側へ移す
      入力欄に付けた class:wXX を検出して、
      幅はラッパーが持ち、入力欄は 100% にする。
      こうしないと「ラッパーの幅 → 入力欄の幅」が
      循環参照になって入力欄が潰れる。
   ------------------------------------------- */
.wpcf7 .wpcf7-form-control-wrap:has(> .w100) { width: 100%; }
.wpcf7 .wpcf7-form-control-wrap:has(> .w70)  { width: 70%;  }
.wpcf7 .wpcf7-form-control-wrap:has(> .w50)  { width: 50%;  }
.wpcf7 .wpcf7-form-control-wrap:has(> .w40)  { width: 40%;  }
.wpcf7 .wpcf7-form-control-wrap:has(> .w30)  { width: 30%;  }
.wpcf7 .wpcf7-form-control-wrap:has(> .w20)  { width: 20%;  }
.wpcf7 .wpcf7-form-control-wrap:has(> .w10)  { width: 10%;  }
 
/* 幅クラスの付いた入力欄はラッパーいっぱいに広げる */
.wpcf7 .wpcf7-form-control-wrap > .w100,
.wpcf7 .wpcf7-form-control-wrap > .w70,
.wpcf7 .wpcf7-form-control-wrap > .w50,
.wpcf7 .wpcf7-form-control-wrap > .w40,
.wpcf7 .wpcf7-form-control-wrap > .w30,
.wpcf7 .wpcf7-form-control-wrap > .w20,
.wpcf7 .wpcf7-form-control-wrap > .w10 {
    width: 100%;
    box-sizing: border-box;
}
 
/* 幅100%の項目は行を占有させる */
.wpcf7 .wpcf7-form-control-wrap:has(> .w100) {
    display: block;
}
 
/* テキストエリア・選択系は常に行を占有 */
.wpcf7 .wpcf7-form-control-wrap:has(> textarea),
.wpcf7 .wpcf7-form-control-wrap:has(> .wpcf7-checkbox),
.wpcf7 .wpcf7-form-control-wrap:has(> .wpcf7-radio),
.wpcf7 .wpcf7-form-control-wrap:has(> .wpcf7-acceptance) {
    display: block;
    width: 100%;
}
 
.wpcf7 textarea {
    width: 100%;
    box-sizing: border-box;
}
 
 
/* -------------------------------------------
   4. エラーメッセージの見た目
   ------------------------------------------- */
.wpcf7 .wpcf7-not-valid-tip {
    margin-top: 4px;
    font-size: 13px;
    line-height: 1.4;
    white-space: normal;
}
 
/* 送信前は赤枠を出さない（CF7標準の指定も打ち消す）
   ※ border-color / background はテーマの入力欄の通常状態に合わせて
     必要なら書き換えてください */
.wpcf7 .wpcf7-not-valid {
    background: #fff;
    border-color: #ccc;
    box-shadow: none;
}
 
/* 送信ボタンを押したあとだけ赤枠にする */
.wpcf7 form.invalid .wpcf7-not-valid,
.wpcf7 form.unaccepted .wpcf7-not-valid {
    background: #fff5f5;
    border-color: #e06666;
}
 
 
/* -------------------------------------------
   5. 確認画面（readonly）の見た目
   ------------------------------------------- */
.wpcf7 input[readonly],
.wpcf7 textarea[readonly] {
    background: #f5f5f5;
    border-color: #ddd;
    color: #333;
}
 
 
/* -------------------------------------------
   6. ボタン
   ------------------------------------------- */
.wpcf7 .btnarea {
    text-align: center;
    margin-top: 30px;
}
 
.wpcf7 .btnarea input[type="submit"],
.wpcf7 .btnarea button {
    margin: 0 8px;
}
 
 
/* -------------------------------------------
   7. スマホ
   ------------------------------------------- */
@media screen and (max-width: 768px) {
    .wpcf7 .wpcf7-form-control-wrap:has(> .w70),
    .wpcf7 .wpcf7-form-control-wrap:has(> .w50) {
        display: block;
        width: 100%;
    }
    .wpcf7 .wpcf7-form-control-wrap:has(> .w30) { width: 45%; }
    .wpcf7 .wpcf7-form-control-wrap:has(> .w20) { width: 45%; }
}





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