@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Red+Hat+Display:ital,wght@0,300..900;1,300..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");
/****** Elad Shechter's RESET *******/
/*** box sizing border-box for all elements ***/
*,
*::before,
*::after {
  box-sizing: border-box;
}

a {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

button {
  background-color: transparent;
  color: inherit;
  border-width: 0;
  padding: 0;
  cursor: pointer;
}

figure {
  margin: 0;
}

input::-moz-focus-inner {
  border: 0;
  padding: 0;
  margin: 0;
}

ul, ol, dl, dd {
  margin: 0;
  padding: 0;
  list-style: none;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
}

p {
  margin: 0;
}

cite {
  font-style: normal;
}

fieldset {
  border-width: 0;
  padding: 0;
  margin: 0;
}

/* ------------------------------------
// base
------------------------------------ */
html {
  font-size: 62.5%;
}
@media screen and (max-width: 767px) {
  html {
    font-size: 2.5316455696vw;
  }
}

body {
  background: #FFF;
  color: #444444;
  font-family: "Noto Sans JP", "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.6;
  margin: 0;
  position: relative;
}

a:link {
  text-decoration: none;
}
a:visited {
  text-decoration: none;
}
a:hover {
  text-decoration: none;
}
a:active {
  text-decoration: none;
}

a {
  transition: 0.3s;
}
a:hover {
  opacity: 0.7;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

@media (min-width: 1023px) {
  a[href^="tel:"] {
    cursor: default;
    pointer-events: none;
  }
}
input:focus::-webkit-input-placeholder {
  color: transparent;
}

input:focus::-moz-placeholder {
  color: transparent;
}

input:focus::-ms-input-placeholder {
  color: transparent;
}

input:focus::placeholder {
  color: transparent;
}

@media screen and (max-width: 768px) {
  body {
    min-width: 0;
  }
}
/* // screen
----------------------------------- */
.sp {
  display: none;
}

.md {
  display: none;
}

.pc {
  display: block;
}

.pconly {
  display: block;
}

@media screen and (max-width: 1024px) {
  .sp {
    display: none;
  }
  .md {
    display: block;
  }
  .pc {
    display: block;
  }
  .pconly {
    display: none;
  }
}
@media screen and (max-width: 768px) {
  .sp {
    display: block;
  }
  .md {
    display: block;
  }
  .pc {
    display: none;
  }
  .pconly {
    display: none;
  }
}
.fadein {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.7s, transform 0.7s;
}

.fadein.visible {
  opacity: 1;
  transform: translateY(0);
}

/* header
------------------------------------ */
#header {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 4rem 0;
  width: 100%;
  transition: 5s;
  z-index: 120;
  top: 0;
  left: 0;
}
#header:before {
  content: "";
  width: calc(100% - 8rem);
  height: 2px;
  position: absolute;
  left: 4rem;
  bottom: 0;
  background: #FFF;
}
#header.fixed {
  background: rgba(255, 255, 255, 0.65);
  position: sticky;
  top: 0;
}
#header .logo {
  max-width: 340px;
  width: 25%;
}
#header .gnav {
  display: flex;
  align-items: center;
  gap: 1rem;
}
#header .gnav > li:not(.inq) {
  font-size: 1.5rem;
  text-align: center;
  position: relative;
}
#header .gnav > li:not(.inq) > a {
  padding: 2.5rem clamp(0.5rem, 0.8vw, 2rem) 2.5rem;
  display: block;
  font-size: clamp(1.2rem, 1.1vw, 1.5rem);
}
#header .gnav > li:not(.inq) > a span {
  display: block;
  font-size: 1.2rem;
  font-size: clamp(0.5rem, 0.9vw, 1.2rem);
  font-family: "Red Hat Display", "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
  font-weight: 500;
  letter-spacing: 0.05em;
  padding-left: -0.05em;
  color: #389BAE;
}
#header .gnav > li:not(.inq) > a:hover, #header .gnav > li:not(.inq) > a.current {
  color: #389BAE;
  opacity: 1;
}
#header .gnav > li:not(.inq) > a:hover:before, #header .gnav > li:not(.inq) > a.current:before {
  content: "";
  width: 100%;
  height: 2px;
  background: #389BAE;
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
}
#header .gnav > li:not(.inq) > div {
  position: fixed;
  left: 4rem;
  top: 0rem;
  width: calc(100% - 8rem);
  background: #192D51;
  border-radius: 5px;
  padding: 3rem 5vw 3rem 5vw;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s, transform 0.1s linear 0.3s;
  z-index: 2;
  text-align: left;
}
#header .gnav > li:not(.inq) > div > .menuContainer {
  display: flex;
  margin: 0 auto;
  max-width: 1280px;
}
#header .gnav > li:not(.inq) > div hgroup {
  width: calc(10rem + 4vw);
  padding: 0 4vw 0 0;
}
#header .gnav > li:not(.inq) > div hgroup .en {
  font-size: 1.4rem;
  font-weight: 400;
  color: #CFEDF2;
  display: block;
}
#header .gnav > li:not(.inq) > div hgroup h2 {
  font-size: 2.2rem;
  font-weight: 300;
  color: #fff;
}
#header .gnav > li:not(.inq) > div.companymenu ul {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  border-left: 1px dashed #CFEDF2;
  padding-left: 4vw;
  gap: 3rem 4vw;
}
#header .gnav > li:not(.inq) > div.companymenu ul li a {
  color: #FFF;
  padding-left: 4.2rem;
  position: relative;
  display: block;
}
#header .gnav > li:not(.inq) > div.companymenu ul li a:after {
  content: "";
  width: 2.2rem;
  aspect-ratio: 67/10;
  background: url(/lib/img/cmn/icon_arrow_01.png) no-repeat 0/contain;
  display: block;
  position: absolute;
  left: 0;
  bottom: 1rem;
}
#header .gnav > li:not(.inq) > div.companymenu ul li span {
  color: #CFEDF2;
  display: block;
  font-size: 1.2rem;
  font-family: "Red Hat Display", "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
  letter-spacing: 0.05em;
  padding-left: -0.05em;
}
#header .gnav > li:not(.inq) > div.businessmenu ul {
  width: calc(100% - 4vw - 10rem);
  display: flex;
  justify-content: space-between;
  border-left: 1px dashed #CFEDF2;
  padding-left: 4vw;
  gap: 1vw;
}
#header .gnav > li:not(.inq) > div.businessmenu ul li {
  width: calc(25% - 1vw);
  aspect-ratio: 23/14;
}
#header .gnav > li:not(.inq) > div.businessmenu ul li a {
  color: #FFF;
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  padding: 2rem 1vw 2rem 1vw;
  transition: 0.5s;
  z-index: 0;
}
#header .gnav > li:not(.inq) > div.businessmenu ul li a.menu01 {
  background: url(/lib/img/cmn/menu_business_01.webp) no-repeat center center/cover;
}
#header .gnav > li:not(.inq) > div.businessmenu ul li a.menu02 {
  background: url(/lib/img/cmn/menu_business_02.webp) no-repeat center center/cover;
}
#header .gnav > li:not(.inq) > div.businessmenu ul li a.menu03 {
  background: url(/lib/img/cmn/menu_business_03.webp) no-repeat center center/cover;
}
#header .gnav > li:not(.inq) > div.businessmenu ul li a.menu04 {
  background: url(/lib/img/cmn/menu_business_04.webp) no-repeat center center/cover;
}
#header .gnav > li:not(.inq) > div.businessmenu ul li a:before {
  content: "";
  width: 100%;
  height: 100%;
  display: block;
  background: #314D68;
  opacity: 0.6;
  border: 2px solid #FFF;
  border-radius: 5px;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  transition: 0.5s;
}
#header .gnav > li:not(.inq) > div.businessmenu ul li a:hover {
  opacity: 1;
}
#header .gnav > li:not(.inq) > div.businessmenu ul li a:hover:before {
  opacity: 0.8;
}
#header .gnav > li:not(.inq) > div.businessmenu ul li a span {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
  z-index: 2;
  font-size: clamp(1.4rem, 1.3vw, 1.8rem);
}
#header .gnav > li:not(.inq) > div.businessmenu ul li a span::before {
  content: "";
  width: clamp(1.4rem, 1.3vw, 1.8rem);
  aspect-ratio: 1;
  background: #FFF url(/lib/img/cmn/icon_arrow_02.png) no-repeat 0/contain;
  display: block;
  border-radius: 2px;
}
#header .gnav > li:not(.inq) > div.productsmenu .linkbox {
  width: calc(100% - 4vw - 10rem);
  border-left: 1px dashed #CFEDF2;
  padding-left: 4vw;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
#header .gnav > li:not(.inq) > div.productsmenu .linkbox h3 {
  color: rgba(255, 255, 255, 0.5);
  text-align: center;
  border-bottom: 1px solid #6A849E;
  padding-bottom: 1rem;
  position: relative;
  margin-bottom: 2rem;
  font-size: 1.8rem;
}
#header .gnav > li:not(.inq) > div.productsmenu .linkbox h3:after {
  content: "";
  width: 10rem;
  height: 3px;
  background: #CB3C3F;
  left: calc(50% - 5rem);
  bottom: -1px;
  display: block;
  position: absolute;
}
#header .gnav > li:not(.inq) > div.productsmenu .linkbox .gehealthcare {
  width: 100%;
  margin-bottom: 2rem;
}
#header .gnav > li:not(.inq) > div.productsmenu .linkbox .gehealthcare ul {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1vw;
}
#header .gnav > li:not(.inq) > div.productsmenu .linkbox .gehealthcare ul li {
  width: calc(33% - 0.6666666667vw);
  aspect-ratio: 286/100;
}
#header .gnav > li:not(.inq) > div.productsmenu .linkbox .gehealthcare ul li a {
  color: #FFF;
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  padding: 2rem 1vw 2rem 1vw;
  transition: 0.5s;
  z-index: 0;
}
#header .gnav > li:not(.inq) > div.productsmenu .linkbox .gehealthcare ul li a.menu01 {
  background: url(/lib/img/cmn/menu_product_ge_01.webp) no-repeat center center/cover;
}
#header .gnav > li:not(.inq) > div.productsmenu .linkbox .gehealthcare ul li a.menu02 {
  background: url(/lib/img/cmn/menu_product_ge_02.webp) no-repeat center center/cover;
}
#header .gnav > li:not(.inq) > div.productsmenu .linkbox .gehealthcare ul li a.menu03 {
  background: url(/lib/img/cmn/menu_product_ge_03.webp) no-repeat center center/cover;
}
#header .gnav > li:not(.inq) > div.productsmenu .linkbox .gehealthcare ul li a.menu04 {
  background: url(/lib/img/cmn/menu_product_ge_04.webp) no-repeat center center/cover;
}
#header .gnav > li:not(.inq) > div.productsmenu .linkbox .gehealthcare ul li a.menu05 {
  background: url(/lib/img/cmn/menu_product_ge_05.webp) no-repeat center center/cover;
}
#header .gnav > li:not(.inq) > div.productsmenu .linkbox .gehealthcare ul li a:before {
  content: "";
  width: 100%;
  height: 100%;
  display: block;
  background: #314D68;
  opacity: 0.6;
  border: 2px solid #FFF;
  border-radius: 5px;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  transition: 0.5s;
}
#header .gnav > li:not(.inq) > div.productsmenu .linkbox .gehealthcare ul li a:hover {
  opacity: 1;
}
#header .gnav > li:not(.inq) > div.productsmenu .linkbox .gehealthcare ul li a:hover:before {
  opacity: 0.8;
}
#header .gnav > li:not(.inq) > div.productsmenu .linkbox .gehealthcare ul li a span, #header .gnav > li:not(.inq) > div.productsmenu .linkbox .gehealthcare ul li a dl {
  position: relative;
  z-index: 2;
  font-size: clamp(1.2rem, 1.1vw, 1.6rem);
  padding-left: calc(clamp(1.4rem, 1.3vw, 1.8rem) + 1vw);
}
#header .gnav > li:not(.inq) > div.productsmenu .linkbox .gehealthcare ul li a span::before, #header .gnav > li:not(.inq) > div.productsmenu .linkbox .gehealthcare ul li a dl::before {
  content: "";
  width: clamp(1.4rem, 1.3vw, 1.8rem);
  aspect-ratio: 1;
  background: #FFF url(/lib/img/cmn/icon_arrow_02.png) no-repeat 0/contain;
  display: block;
  border-radius: 2px;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}
#header .gnav > li:not(.inq) > div.productsmenu .linkbox .gehealthcare ul li a dl {
  width: 100%;
}
#header .gnav > li:not(.inq) > div.productsmenu .linkbox .gehealthcare ul li a dl dd {
  margin-top: 0.25rem;
  padding-top: 0.25rem;
  border-top: 1px solid #FFF;
  font-size: clamp(1.2rem, 1.1vw, 1.6rem);
}
#header .gnav > li:not(.inq) > div.productsmenu .linkbox .general {
  width: 100%;
  margin-bottom: 2rem;
}
#header .gnav > li:not(.inq) > div.productsmenu .linkbox .general ul {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 1vw;
}
#header .gnav > li:not(.inq) > div.productsmenu .linkbox .general ul li a {
  display: block;
  background: rgba(29, 136, 185, 0.6);
  border: 1px solid #FFF;
  padding: 1rem 1rem;
  aspect-ratio: 46/17;
  border-radius: 5px;
  color: #FFF;
  font-size: clamp(1.2rem, 1.1vw, 1.6rem);
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5vw;
}
#header .gnav > li:not(.inq) > div.productsmenu .linkbox .general ul li a::before {
  content: "";
  width: clamp(1.2rem, 1.3vw, 1.8rem);
  aspect-ratio: 1;
  background: #FFF url(/lib/img/cmn/icon_arrow_02.png) no-repeat 0/contain;
  display: block;
  border-radius: 2px;
  z-index: 2;
}
#header .gnav > li:not(.inq) > div.productsmenu .linkbox .general ul li a.menu01 {
  background: url(/lib/img/cmn/menu_product_general_01.webp) no-repeat center center/cover;
}
#header .gnav > li:not(.inq) > div.productsmenu .linkbox .general ul li a.menu02 {
  background: url(/lib/img/cmn/menu_product_general_02.webp) no-repeat center center/cover;
}
#header .gnav > li:not(.inq) > div.productsmenu .linkbox .general ul li a.menu03 {
  background: url(/lib/img/cmn/menu_product_general_03.webp) no-repeat center center/cover;
}
#header .gnav > li:not(.inq) > div.productsmenu .linkbox .general ul li a.menu04 {
  background: url(/lib/img/cmn/menu_product_general_04.webp) no-repeat center center/cover;
}
#header .gnav > li:not(.inq) > div.productsmenu .linkbox .general ul li a:after {
  content: "";
  width: 100%;
  height: 100%;
  display: block;
  background: #314D68;
  opacity: 0.6;
  border-radius: 5px;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  transition: 0.5s;
}
#header .gnav > li:not(.inq) > div.productsmenu .linkbox .general ul li a:hover {
  opacity: 1;
}
#header .gnav > li:not(.inq) > div.productsmenu .linkbox .general ul li a:hover:after {
  opacity: 0.8;
}
#header .gnav > li:not(.inq) > div.productsmenu .linkbox .general ul li a span {
  z-index: 2;
  font-weight: 500;
}
#header .gnav > li:not(.inq) > div.productsmenu .linkbox .sub {
  width: 48%;
}
#header .gnav > li:not(.inq) > div.productsmenu .linkbox .sub ul {
  width: 100%;
}
#header .gnav > li:not(.inq) > div.productsmenu .linkbox .sub ul li a {
  display: block;
  background: rgba(29, 136, 185, 0.6);
  border: 1px solid #FFF;
  padding: 1rem 1rem;
  border-radius: 5px;
  color: #FFF;
  font-size: clamp(1.4rem, 1.3vw, 1.8rem);
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5vw;
}
#header .gnav > li:not(.inq) > div.productsmenu .linkbox .sub ul li a::before {
  content: "";
  width: clamp(1.2rem, 1.3vw, 1.8rem);
  aspect-ratio: 1;
  background: #FFF url(/lib/img/cmn/icon_arrow_02.png) no-repeat 0/contain;
  display: block;
  border-radius: 2px;
}
#header .gnav > li:not(.inq):hover > div {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s, visibility 0.3s, transform 0s;
}
#header .gnav > li:not(.inq):hover > div.blur {
  opacity: 0;
  visibility: hidden;
}
#header .gnav li.inq {
  padding: 0 0 0 clamp(0.8rem, 0.8vw, 2rem);
}
#header .gnav li.inq a {
  line-height: 1;
  display: block;
  background: #FFF;
  padding: 1rem clamp(0.5rem, 0.8vw, 2rem);
  font-size: clamp(1.2rem, 1.1vw, 1.5rem);
  border-radius: 4px;
}
#header .btn_menu {
  display: none;
}
@media screen and (max-width: 1024px) {
  #header {
    width: 100%;
  }
  #header:before {
    content: "";
    width: calc(100% - 4rem);
    height: 3px;
    position: absolute;
    left: 2rem;
    bottom: 0;
    background: #FFF;
  }
  #header .gnav > li:not(.inq) > div {
    padding: 3rem 5vw 3rem 5vw;
  }
  #header .gnav > li:not(.inq) > div.companymenu ul {
    grid-template-columns: 1fr auto;
  }
  #header .gnav > li:not(.inq) > div.businessmenu {
    padding: 3rem 5vw 3rem 5vw;
  }
  #header .gnav > li:not(.inq) > div.businessmenu ul {
    flex-wrap: wrap;
    gap: 1rem;
  }
  #header .gnav > li:not(.inq) > div.businessmenu ul li {
    width: calc(50% - 0.5rem);
    aspect-ratio: 23/7;
  }
  #header .gnav > li:not(.inq) > div.productsmenu .linkbox .general ul {
    grid-template-columns: 1fr 1fr;
  }
  #header .gnav > li:not(.inq) > div.productsmenu .linkbox .general ul li a {
    width: auto;
    aspect-ratio: 46/7;
  }
}
@media screen and (max-width: 768px) {
  #header {
    padding: 1rem 2rem 1.5rem;
    align-items: center;
    width: 100%;
    margin: 0;
    background: none;
  }
  #header.fixed {
    background: rgba(238, 238, 238, 0.65);
  }
  #header.fixed:before {
    display: none;
  }
  #header .logo {
    max-width: 340px;
    width: 60%;
  }
  #header .gnav {
    display: none;
  }
  #header .btn_menu {
    display: block;
  }
  .js-menuOpen #header {
    padding: 1rem 2rem 1.5rem;
  }
  .js-menuOpen #header > * {
    position: relative;
    z-index: 1;
  }
  .js-menuOpen #header:after {
    content: "";
    width: calc(100% - 2rem + 1px);
    height: 100%;
    position: absolute;
    left: 1rem;
    bottom: 0;
    background: #E9EBEF;
    z-index: 0;
  }
  .js-menuOpen #header:before {
    display: none;
  }
}

/* menu
------------------------------------ */
.btn_menu {
  width: 11vw;
  aspect-ratio: 1;
  position: relative;
  background: #FFF;
  border-radius: 5px;
  cursor: pointer;
}
.btn_menu .btn_cover {
  position: absolute;
  width: 50%;
  height: 40%;
  top: 30%;
  left: 25%;
}
.btn_menu .btn_cover > span {
  display: block;
  height: 2px;
  position: absolute;
  right: 0;
  background: #B1CBC8;
  transition: 0.3s;
  width: 100%;
}
.btn_menu .btn_cover > span:nth-child(1) {
  top: 0;
}
.btn_menu .btn_cover > span:nth-child(2) {
  top: 50%;
  margin-top: -1px;
}
.btn_menu .btn_cover > span:nth-child(3) {
  bottom: 0;
}
.js-menuOpen .btn_menu {
  background: #389BAE;
}
.js-menuOpen .btn_menu > div {
  left: 50%;
  transform: translateX(-50%);
}
.js-menuOpen .btn_menu > div > span {
  background: #FFF;
}
.js-menuOpen .btn_menu > div > span:nth-child(1) {
  top: 40%;
  transform: rotate(-135deg);
}
.js-menuOpen .btn_menu > div > span:nth-child(2) {
  transform: rotate(150deg);
  opacity: 0;
}
.js-menuOpen .btn_menu > div > span:nth-child(3) {
  bottom: auto;
  top: 40%;
  transform: rotate(135deg);
}
@media screen and (max-width: 768px) {
  .btn_menu {
    background: rgba(255, 255, 255, 0.9);
  }
  .btn_menu > div {
    top: 50%;
  }
}

#menuContainer {
  display: none;
}
@media screen and (max-width: 768px) {
  #menuContainer {
    display: block;
    position: fixed;
    width: 100%;
    max-height: 100vh;
    padding: 0;
    left: 0;
    top: 0;
    visibility: hidden;
    z-index: 110;
    background: #00113f;
  }
  .js-menuOpen #menuContainer {
    visibility: visible;
  }
  .js-menuOpen #menuContainer .menu {
    transform: translateY(0);
  }
  #menuContainer .menu {
    overflow-y: scroll;
    padding: 11.8rem 0 0 0;
    max-height: 100vh;
    position: relative;
    transform: translateY(-100%);
    transition: 0.3s;
  }
  #menuContainer .menu dl {
    background: #E9EBEF;
    border-radius: 0 0 5px 5px;
    padding-bottom: 1rem;
    margin: 0 1rem;
  }
  #menuContainer .menu dl dt {
    border-top: 1px solid #D9D9D9;
  }
  #menuContainer .menu dl dt a, #menuContainer .menu dl dt span {
    display: block;
    padding: 1rem 1rem 1rem 4rem;
    position: relative;
  }
  #menuContainer .menu dl dt a:after {
    content: "";
    display: block;
    position: absolute;
    right: 2rem;
    top: calc(50% - 1rem);
    width: 2rem;
    aspect-ratio: 1;
    background: url(/lib/img/cmn/icon_arrow_02.png) no-repeat center/contain;
  }
  #menuContainer .menu dl dt span:after {
    content: "";
    display: block;
    position: absolute;
    right: 2rem;
    top: calc(50% - 1rem);
    width: 2rem;
    aspect-ratio: 1;
    background: #FFF url(/lib/img/cmn/icon_plus_01.png) no-repeat center/contain;
  }
  #menuContainer .menu dl dt.active span:after {
    content: "";
    display: block;
    position: absolute;
    right: 2rem;
    top: calc(50% - 1rem);
    width: 2rem;
    aspect-ratio: 1;
    background: #FFF url(/lib/img/cmn/icon_minus_01.png) no-repeat center/contain;
  }
  #menuContainer .menu dl dd {
    display: none;
    background: #FFF;
    margin: 0 2rem 2rem;
    padding: 1rem 0;
  }
  #menuContainer .menu dl dd a {
    display: block;
    padding: 1rem 1rem 1rem 5rem;
    position: relative;
  }
  #menuContainer .menu dl dd a span.ge {
    border-radius: 50vh;
    background: #1B9CD3;
    color: #FFF;
    padding: 2px 1rem;
    display: block;
    width: fit-content;
    font-size: 1rem;
  }
  #menuContainer .menu dl dd a:after {
    content: "";
    display: block;
    position: absolute;
    left: 2rem;
    top: calc(50% - 1rem);
    width: 2rem;
    aspect-ratio: 1;
    background: #FFF url(/lib/img/cmn/icon_arrow_03.png) no-repeat center/contain;
  }
  #menuContainer .contact {
    padding: 2rem 2rem 3rem 2rem;
  }
  #menuContainer .contact h2 {
    font-family: "Red Hat Display", "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
    font-size: 2.5rem;
    text-align: center;
    font-weight: 800;
    letter-spacing: 0.05em;
    padding-left: -0.05em;
    color: #FFF;
  }
  #menuContainer .contact .lead {
    color: #FFF;
    text-align: center;
    margin-bottom: 3rem;
  }
  #menuContainer .contact .btn01 {
    color: #444;
    text-align: center;
  }
  #menuContainer .contact .btn01::before {
    background: linear-gradient(99deg, #1D88B9 17.11%, #FFF 17.12%);
  }
  #menuContainer .contact .btn01::after {
    width: 4rem;
  }
  #menuContainer .footer {
    background: #E2F0F3;
    padding: 4rem 4rem 0;
    text-align: center;
    position: relative;
  }
  #menuContainer .footer .logo {
    margin-bottom: 3rem;
    max-width: 340px;
  }
  #menuContainer .footer p .map {
    display: inline-block;
    color: #1B9CD3;
    position: relative;
  }
  #menuContainer .footer p .map:before {
    content: "";
    width: 2rem;
    aspect-ratio: 1;
    background: url(/lib/img/cmn/icon_map.webp) no-repeat center/contain;
    display: inline-block;
    vertical-align: middle;
  }
  #menuContainer .privacy {
    background: #E2F0F3;
    padding: 2rem 2rem;
  }
  #menuContainer .privacy .privacypolicy {
    text-align: center;
    margin-bottom: 1rem;
    font-size: 1.5rem;
  }
  #menuContainer .privacy .copy {
    padding: 2rem 0;
    position: relative;
    border-top: 1px solid #FFF;
    font-size: 1.1rem;
    text-align: center;
    font-family: "Red Hat Display", "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
    color: #1D88B9;
  }
  #menuContainer .privacy .copy:before {
    content: "";
    width: 3rem;
    height: 3px;
    display: block;
    background: #1E89BA;
    position: absolute;
    left: 0;
    top: -2px;
  }
}

/* vi
------------------------------------ */
body {
  background: url(/lib/img/cmn/bg_body.webp) no-repeat top left/contain;
  position: relative;
}

#vi {
  margin-top: 12rem;
  display: block;
}
#vi .category {
  padding-left: clamp(2rem, 50vw - 550px, 50vw - 550px);
}
#vi .category hgroup {
  color: #1D88B9;
}
#vi .category hgroup p {
  font-size: clamp(1.4rem, 1.3vw, 1.8rem);
  margin-bottom: 0;
  font-weight: 500;
}
#vi .category hgroup h1 {
  font-size: clamp(3rem, 3.9vw, 5.4rem);
  font-family: "Red Hat Display", "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
  font-weight: 700;
  line-height: 1;
}
#vi .category .breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 4rem;
}
#vi .category .breadcrumb li {
  font-size: clamp(1.2rem, 1vw, 1.4rem);
  display: flex;
  gap: 0.5rem;
  line-height: 1;
  align-items: center;
}
#vi .category .breadcrumb li:not(:last-child):after {
  content: "";
  width: 1.8rem;
  aspect-ratio: 1;
  background: url(/lib/img/cmn/icon_arrow_04.png) no-repeat center/contain;
}
#vi .photo {
  width: 70%;
  max-width: 1000px;
}
@media screen and (max-width: 768px) {
  #vi {
    margin-top: 1.5rem;
    display: block;
  }
  #vi .category {
    width: 100%;
    padding: 2rem 2rem 0;
  }
  #vi .category .breadcrumb {
    margin-top: 2rem;
  }
  #vi .photo {
    max-width: none;
    width: calc(100% - 2rem);
    margin: 0 0 0 2rem;
  }
}

/* container
------------------------------------ */
#container {
  margin: 12rem auto 10rem;
  padding: 0 2rem;
  position: relative;
  z-index: 1;
}
@media screen and (max-width: 768px) {
  #container {
    margin: 5rem auto 3rem;
  }
}

#contents p {
  margin-bottom: 2rem;
}

/* parts
------------------------------------ */
.btn01 {
  display: block;
  padding: 1.5rem 4rem 1.5rem 10rem;
  border-radius: 5px;
  color: #FFF;
  position: relative;
  z-index: 0;
  background: #1D88B9;
  overflow: hidden;
}
.btn01::before {
  transition: 1s;
  content: "";
  width: 100%;
  height: 100%;
  background: linear-gradient(105deg, #1D88B9 25.15%, #192D51 25.16%);
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  z-index: -1;
}
.btn01:hover {
  opacity: 1;
}
.btn01:hover::before {
  left: 100%;
}
.btn01::after {
  content: "";
  width: 4rem;
  aspect-ratio: 67/10;
  background: url(/lib/img/cmn/icon_arrow_01.png) no-repeat center left/contain;
  position: absolute;
  left: 0;
  top: calc(50% - 5px);
  display: block;
  z-index: 0;
}
@media screen and (max-width: 768px) {
  .btn01 {
    padding: 1rem 4rem 1rem 5rem;
    text-align: center;
  }
  .btn01::before {
    background: linear-gradient(115deg, #1D88B9 25.15%, #192D51 25.16%);
  }
  .btn01::after {
    width: 3rem;
  }
}

.btn02 {
  background: #1B9CD3;
  display: flex;
  justify-content: center;
  padding: 1rem 2rem 1rem 2rem;
  border-radius: 5px;
  color: #FFF;
  position: relative;
  z-index: 0;
  overflow: hidden;
  width: fit-content;
  margin: 0 auto;
  gap: 1rem;
}
.btn02:hover {
  background: #1D88B9;
  opacity: 1;
}
.btn02::after {
  content: "";
  width: 2rem;
  aspect-ratio: 1;
  background: url(/lib/img/cmn/icon_openwin.png) no-repeat center/contain;
  display: block;
  z-index: 0;
}

.box01 {
  padding: 4rem;
  background: #EEF6F7;
}
@media screen and (max-width: 768px) {
  .box01 {
    padding: 4rem 2rem;
  }
}

/* header
------------------------------------ */
#contents .pagetitle {
  text-align: center;
  margin-bottom: 5rem;
}
#contents .pagetitle h2 {
  color: #1B9CD3;
  letter-spacing: 0.05em;
  padding-left: -0.05em;
  font-weight: 500;
}
#contents .pagetitle p {
  font-family: "Red Hat Display", "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
  color: #455F63;
  font-size: 3rem;
  font-weight: 800;
  padding: 0 0 2.5rem 0;
  line-height: 1;
  letter-spacing: 0.05em;
  padding-left: -0.05em;
  position: relative;
}
#contents .pagetitle p:before {
  content: "";
  width: 100vw;
  height: 1px;
  background: #F5F5F5;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}
#contents .pagetitle p:after {
  content: "";
  width: 13rem;
  height: 3px;
  background: #1B9CD3;
  position: absolute;
  bottom: -1px;
  left: 50%;
  transform: translateX(-50%);
}
#contents .pagetitle p.topCategory {
  color: #1B9CD3;
  font-family: "Noto Sans JP", "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
  letter-spacing: 0.05em;
  padding-left: -0.05em;
  font-weight: 500;
  font-size: 1.6rem;
}
#contents .pagetitle p.topCategory::before, #contents .pagetitle p.topCategory::after {
  display: none;
}
#contents .pagetitle .topCategory + h2 {
  font-size: 2.8rem;
  position: relative;
  padding-top: 3rem;
  font-weight: 400;
}
#contents .pagetitle .topCategory + h2:after {
  content: "";
  width: 2px;
  height: 1.8rem;
  background: #1B9CD3;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}
#contents .htype02 {
  color: #1B9CD3;
  font-size: 2.6rem;
  text-align: center;
  padding-bottom: 3rem;
  margin-bottom: 3rem;
  position: relative;
}
#contents .htype02:before {
  background: #FFF;
  content: "";
  width: 100vw;
  height: 1px;
  position: absolute;
  bottom: 0;
  left: 50%;
  display: block;
  transform: translateX(-50%);
  z-index: -1;
}
#contents .htype03 {
  color: #1B9CD3;
  font-size: 2.6rem;
  text-align: center;
  margin-bottom: 3rem;
  position: relative;
}
#contents .htype04 {
  font-size: clamp(1.8rem, 1.9vw, 2.6rem);
  font-weight: 700;
  text-align: center;
  color: #455F63;
  padding-bottom: 2rem;
  margin-bottom: 3rem;
  position: relative;
}
#contents .htype04:before {
  background: #F5F5F5;
  content: "";
  width: 100vw;
  height: 2px;
  position: absolute;
  bottom: 0;
  left: 50%;
  display: block;
  transform: translateX(-50%);
  z-index: -1;
}
#contents .htype04:after {
  background: #1B9CD3;
  content: "";
  width: 13rem;
  height: 2px;
  position: absolute;
  bottom: 0;
  left: 50%;
  display: block;
  transform: translateX(-50%);
  z-index: -1;
}
#contents .htype05 {
  text-align: center;
  margin-bottom: 5rem;
}
#contents .htype05 h2 {
  color: #455F63;
  font-family: "Red Hat Display", "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
  font-size: clamp(2.4rem, 2.6vw, 3.6rem);
  font-weight: 800;
  letter-spacing: 0.05em;
  padding-left: -0.05em;
  position: relative;
  padding-bottom: 0.5rem;
}
#contents .htype05 h2:before {
  content: "";
  width: 100vw;
  height: 1px;
  background: #F5F5F5;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}
#contents .htype05 h2:after {
  content: "";
  width: 13rem;
  height: 3px;
  background: #1B9CD3;
  position: absolute;
  bottom: -1px;
  left: 50%;
  transform: translateX(-50%);
}
#contents .htype05 p {
  font-family: "Red Hat Display", "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
  color: #1B9CD3;
  font-size: clamp(1.4rem, 1.3vw, 1.8rem);
  font-weight: 800;
  padding: 1rem 0 0;
  letter-spacing: 0.05em;
  padding-left: -0.05em;
}
@media screen and (max-width: 768px) {
  #contents .htype05 {
    text-align: left;
    padding: 0 2rem;
  }
  #contents .htype05 h2::after {
    width: 8rem;
    left: 0;
    transform: none;
  }
}

/* list
------------------------------------ */
#contents .dotlist li {
  display: flex;
  gap: 0.5rem;
  line-height: 1.4;
  margin-bottom: 0.5rem;
}
#contents .dotlist li:last-child {
  margin-bottom: 0;
}
#contents .dotlist li:before {
  content: "・";
}
#contents .inlinelist01 li {
  display: inline;
  line-height: 2;
}
#contents .inlinelist01 li:not(:last-child):after {
  content: "／";
}
#contents .oltype01 {
  counter-reset: number;
}
#contents .oltype01 li {
  display: flex;
  gap: 0.5rem;
}
#contents .oltype01 li:before {
  counter-increment: number;
  content: counter(number) ".";
}

/* table
------------------------------------ */
.tableformat01 th, .tableformat01 td {
  text-align: left;
  font-weight: normal;
  padding: 1.5rem 2rem;
  vertical-align: top;
}
.tableformat01 th {
  border-top: 2px solid #1B9CD3;
  color: #1B9CD3;
  font-weight: 500;
}
.tableformat01 td {
  border-top: 2px solid #F5F5F5;
}
@media screen and (max-width: 768px) {
  .tableformat01 th, .tableformat01 td {
    display: block;
    width: 100% !important;
  }
}

.tableformat02 {
  width: 100%;
}
.tableformat02 th, .tableformat02 td {
  text-align: left;
  font-weight: normal;
  padding: 1.5rem 2rem;
  vertical-align: top;
}
.tableformat02 thead th {
  background: #314D68;
  color: #FFF;
}
.tableformat02 tbody th {
  border-bottom: 2px solid #1B9CD3;
  color: #1B9CD3;
  font-weight: 500;
}
.tableformat02 tbody td {
  border-bottom: 2px solid #F5F5F5;
}
@media screen and (max-width: 768px) {
  .tableformat02 th, .tableformat02 td {
    display: block;
    width: 100% !important;
  }
}

/* contactUs/footer
------------------------------------ */
#contactUs {
  background: #EEF6F7;
  padding: 4rem 2rem;
  position: relative;
  z-index: 0;
}
#contactUs section {
  max-width: 1400px;
  border-radius: 8px;
  background: #FFF;
  margin: 0 auto;
  padding: 3rem;
  display: flex;
  gap: 10%;
  justify-content: center;
  align-items: center;
}
#contactUs section h2 {
  color: #455F63;
  font-family: "Red Hat Display", "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
  font-size: 4.4rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  padding-left: -0.05em;
}
#contactUs section .btn01:after {
  width: 4rem;
}
@media screen and (max-width: 768px) {
  #contactUs section {
    display: block;
  }
  #contactUs section h2 {
    font-size: 2.5rem;
    text-align: center;
  }
  #contactUs section .lead {
    text-align: center;
    margin-bottom: 1rem;
  }
}

/* footer
------------------------------------ */
footer {
  background: #E2F0F3;
  width: 100vw;
  overflow: hidden;
  position: relative;
  z-index: 0;
}
footer #footerContainer {
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: wrap;
  align-items: flex-end;
  max-width: 1200px;
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  footer {
    padding: 2rem 0 0 0;
    display: block;
  }
}
footer #sitemap {
  width: 60%;
  background: #EEF6F7;
  border-radius: 0 0 0 8px;
  padding: 4rem 4rem 6rem clamp(4rem, 10vw, 10%);
  padding-left: clamp(20px, 5.7vw, 80px);
  position: relative;
  display: grid;
  grid-template-columns: max-content auto;
  justify-content: space-between;
}
footer #sitemap::after {
  content: "";
  width: 50vw;
  height: 100%;
  background: #EEF6F7;
  position: absolute;
  top: 0;
  left: 100%;
}
footer #sitemap::before {
  content: "";
  width: 50vw;
  height: 100%;
  background: #EEF6F7;
  position: absolute;
  top: 0;
  right: 100%;
}
footer #sitemap > dl > dt {
  font-size: 1.6rem;
  position: relative;
  border-bottom: 1px solid #BCDAE1;
  padding: 0 0 1rem 0;
}
footer #sitemap > dl > dt:before {
  content: "";
  width: 2rem;
  height: 3px;
  display: block;
  background: #1E89BA;
  position: absolute;
  left: 0;
  bottom: -2px;
}
footer #sitemap > dl > dt + dt {
  margin-top: 4rem;
}
footer #sitemap > dl > dd {
  padding: 1.5rem 0 4rem 2rem;
  font-size: 1.5rem;
}
footer #sitemap > dl > dd li {
  margin-bottom: 0.5rem;
}
footer #sitemap > dl > dd.prdctmenu {
  padding-left: 0;
}
footer #sitemap > dl > dd.prdctmenu > dl {
  display: grid;
  grid-template-columns: max-content auto;
  gap: 2rem;
}
footer #sitemap > dl > dd.prdctmenu > dl dt {
  align-self: start;
  font-size: 1.2rem;
  padding: 0.2rem 0;
  color: #1D88B9;
  font-weight: 500;
}
footer #sitemap > dl > dd.prdctmenu > dl dd {
  font-size: 1.5rem;
}
footer #sitemap > dl > dd.prdctmenu > dl dd span {
  display: inline-block;
  padding-right: 1rem;
  font-size: 1.4rem;
}
@media screen and (max-width: 1024px) {
  footer #sitemap > dl > dd.prdctmenu > dl {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
  footer #sitemap > dl > dd.prdctmenu > dl dt {
    padding: 0;
  }
  footer #sitemap > dl > dd.prdctmenu > dl dd {
    padding-left: 2rem;
    margin-bottom: 1rem;
  }
  footer #sitemap > dl > dd.prdctmenu > dl dd span {
    display: block;
    width: fit-content;
    font-size: 1rem;
    padding: 0 0.5rem;
    background: #1D88B9;
    color: #FFF;
    border-radius: 3px;
  }
}
@media screen and (max-width: 768px) {
  footer #sitemap {
    width: calc(100% - 2rem);
    padding: 2rem 2rem 4rem 2rem;
    margin-left: 2rem;
  }
  footer #sitemap:before, footer #sitemap:after {
    display: none;
  }
  footer #sitemap > dl {
    width: 100%;
  }
  footer #sitemap > dl > dd {
    padding: 1.5rem 0 4rem 1rem;
  }
}
footer #footer {
  z-index: 2;
  background: #E2F0F3;
  width: 40%;
  aspect-ratio: 1/1;
  display: grid;
  place-content: center;
  place-items: center;
  padding: 4rem 2rem 4rem 2rem;
  position: relative;
}
footer #footer::before {
  content: "";
  width: 50vw;
  height: 100%;
  background: #E2F0F3;
  position: absolute;
  top: 0;
  right: 100%;
}
footer #footer .logo {
  margin-bottom: 3rem;
  max-width: 340px;
}
footer #footer p .map {
  display: inline-block;
  color: #1B9CD3;
  position: relative;
}
footer #footer p .map:before {
  content: "";
  width: 2rem;
  aspect-ratio: 1;
  background: url(/lib/img/cmn/icon_map.webp) no-repeat center/contain;
  display: inline-block;
  vertical-align: middle;
}
@media screen and (max-width: 768px) {
  footer #footer {
    width: 100%;
    display: block;
    aspect-ratio: auto;
    padding: 4rem 4rem;
  }
  footer #footer p {
    text-align: center;
  }
}
footer #footerPrivacy {
  width: 100%;
  max-width: 1200px;
  margin: 4rem auto 0;
  padding: 2rem 2rem 5rem;
  border-top: 1px solid #FFF;
  position: relative;
  display: flex;
  justify-content: space-between;
  flex-direction: row-reverse;
}
footer #footerPrivacy:before {
  content: "";
  width: 2rem;
  height: 3px;
  display: block;
  background: #1E89BA;
  position: absolute;
  left: 0;
  top: -2px;
}
footer #footerPrivacy .copy {
  font-family: "Red Hat Display", "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
  font-size: 1.2rem;
  color: #1D88B9;
}
footer #footerPrivacy .privacypolicy {
  font-size: 1.5rem;
}
@media screen and (max-width: 768px) {
  footer #footerPrivacy {
    background: #EEF6F7;
    margin: 0;
    display: block;
    border-top: none;
    padding: 2rem 2rem 2rem;
  }
  footer #footerPrivacy:before {
    display: none;
  }
  footer #footerPrivacy .privacypolicy {
    text-align: center;
    margin-bottom: 1rem;
  }
  footer #footerPrivacy .copy {
    padding: 2rem 0;
    position: relative;
    border-top: 1px solid #FFF;
    font-size: 1.1rem;
    text-align: center;
  }
  footer #footerPrivacy .copy:before {
    content: "";
    width: 3rem;
    height: 3px;
    display: block;
    background: #1E89BA;
    position: absolute;
    left: 0;
    top: -2px;
  }
}

/* footerfixed
------------------------------------ */
#footerfixed {
  position: fixed;
  right: 0;
  bottom: 2rem;
  z-index: 99;
}
#footerfixed .call {
  display: none;
}
#footerfixed .pagetop a {
  background: rgba(255, 255, 255, 0.6);
  border-radius: 5px 0 0 5px;
  padding: 1.5rem;
  text-transform: uppercase;
  font-family: "Red Hat Display", "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
  font-size: 1.2rem;
  color: #455F63;
  position: relative;
  display: grid;
  place-content: center;
  place-items: center;
  border: 1px solid #E2F0F3;
}
#footerfixed .pagetop a:before {
  content: "";
  width: 2.2rem;
  aspect-ratio: 1/1;
  background: url(/lib/img/cmn/icon_pagetop.png) no-repeat center/contain;
  display: block;
}
#footerfixed .pagetop a:hover {
  opacity: 1;
  background: #EEF6F7;
}
#footerfixed.fixed {
  position: absolute;
  right: 0;
  z-index: 999;
}
@media screen and (max-width: 768px) {
  #footerfixed {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100vw;
    z-index: 99;
  }
  #footerfixed ul {
    display: flex;
  }
  #footerfixed .call {
    width: 80%;
    display: block;
  }
  #footerfixed .call a {
    display: grid;
    place-content: center;
    place-items: center;
    background: #589AB7;
    height: 100%;
    color: #FFF;
  }
  #footerfixed .pagetop {
    width: 20%;
    position: relative;
    right: auto;
    bottom: auto;
  }
  #footerfixed .pagetop a {
    background: #FFF;
    border-radius: 0;
    height: 100%;
  }
  #footerfixed.fixed {
    position: fixed;
    right: 0;
    top: auto;
    bottom: 0;
    z-index: 999;
  }
}