@charset "utf-8";

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

common

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* ----------------------------------------------------
element base setting (common)
---------------------------------------------------- */
body { color: #333333; line-height: 1.8; background: #fff;}	
a { color: var(--c-blue);  text-decoration: none;}
a:hover { text-decoration: none;}
.clickable a, .clickable a:hover { color: #333;}

/* ----------------------------------------------------
parts (common)
---------------------------------------------------- */
:root {
--ff-symbol: 'Material Symbols Outlined';
--ff-en: "Montserrat", sans-serif;
--c-blue:#358DDF;
--c-blue-light: #31A9FF;
--c-blue-dark: #0C2A56;
--c-gray:#666;
--bg-gray: #f3f3f3;
}

/* icon */
.ic--symbol {position: relative; }
.ic--symbol::before {font-family: var(--ff-symbol); position: absolute; }
.ic--fill::before {font-variation-settings: 'FILL' 1;}
.ic--left::before { left: 0; top: 50%; transform: translateY(-50%);}
.ic--top::before  { left: 50%; top: 0; transform: translateX(-50%);}

/* flex */
.flex {display: flex; display: -webkit-flex; flex-wrap: wrap;}
.jc--sb {justify-content: space-between;}
.jc--c  {justify-content: center;}
.jc--fe {justify-content: flex-end;}

/* img */
img {width: 100%; height: auto;}
.img-obj {overflow: hidden;}
.img-obj img {width: 100%; height: 100%; object-fit: cover;}

#wrapper {display: flex; flex-direction: column; min-height: 100vh; overflow: hidden;}


/* =========================
   Scroll Fade Animation
========================= */

.js-scroll-fade {opacity: 0;transition: opacity 0.8s ease, transform 0.8s ease; will-change: opacity, transform;}
.js-scroll-fade.is-active {opacity: 1; transform: translate(0, 0) scale(1);}

/* 下から */
.fadeUp {transform: translateY(30px);}
/* 左から */
.fadeLeft { transform: translateX(-30px);}
/* 右から */
.fadeRight {transform: translateX(30px);}
/* 少し拡大しながら */
.zoomIn { transform: scale(0.95);}

/* =========================
   Optional: delay
========================= */
.delay-1 { transition-delay: 0.1s;}
.delay-2 { transition-delay: 0.2s;}
.delay-3 { transition-delay: 0.3s;}
.delay-4 { transition-delay: 0.4s;}

/* =========================
   Optional: reduce motion
========================= */
@media (prefers-reduced-motion: reduce) {
  .js-scroll-fade {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ----------------------------------------------------
header (common)
---------------------------------------------------- */
 #header {display: flex; justify-content: space-between; align-items: center; padding: 0 var(--w-60); width: 100%; height: var(--w-100); position: fixed; left: 0; top: 0; transition: 0.3s all ease-in-out; z-index: 99;}
 #header #hd-logo {width: var(--w-240);}
 #header #hd-logo img {transition: 0.3s all ease-in-out;}
 .lg-bk {display: none;}
 #navGlobal {display: flex; gap: var(--w-20); font-family: var(--ff-en); font-size: var(--fs-20);}
 #navGlobal a {color: #fff; transition: 0.3s all ease-in-out;}
 #navGlobal a:hover,#navGlobal a.current {color: var(--c-blue-light) !important;}
 #btnGlobal{display: none;}

 #header.scroll {background: rgba(255,255,255,0.9); z-index: 100; }
 #header.scroll .lg-bk {display: block;}
 #header.scroll .lg-wh {display: none;}

@media (min-width: 769px) {
  #header.scroll #navGlobal a {color: #555; }
}

@media (max-width: 768px) {
 #header {position: fixed; left: 0; top: 0;  width: 100%; height: min(15vw, var(--w-120));}
 #header #hd-logo {width: min(36vw,200px);}
 #btnGlobal {position: absolute; right: var(--w-10); top: var(--w-10); width: min(13.5vw, var(--w-80)); aspect-ratio: 1/1; border-radius: 50%;  z-index: 120; display: flex; display: -webkit-flex; justify-content:center; align-items: center; background: var(--c-blue);}
 #btnGlobal .btnWrapGlobal { width: min(6vw,var(--w-30)); height: min(4vw, var(--w-20)); position: relative;}
 #btnGlobal .btnLine { height: 2px; background: #fff; position: absolute; right:0; width: 100%;}
 #btnGlobal .btnLine.btnLineT {  top: 0;}
 #btnGlobal .btnLine.btnLineM { top: 50%; transform: translateY(-50%);}
 #btnGlobal .btnLine.btnLineB { bottom: 0; }
 #btnGlobal.active .btnLine {background: #fff;}
 #btnGlobal.active .btnLine.btnLineT { display: none;}
 #btnGlobal.active .btnLine.btnLineM { transform: translateY(0) rotate(45deg) ;}
 #btnGlobal.active .btnLine.btnLineB { transform: rotate(-45deg); bottom:inherit; top: 50%;}
 #btnGlobal .btnLine.btnLineM, #btnGlobal .btnLine.btnLineB {-moz-transition: all, ease-in-out, 0.3s;  -o-transition: all, ease-in-out, 0.3s;  -webkit-transition: all, ease-in-out, 0.3s; transition: all, ease-in-out, 0.3s;}
 #btnGlobal .btnText { color: #013e7f; font-size: 1.5rem; margin: 0; position: absolute; right: 0; top: 0; line-height: 1;}
 #grandMenu {background: rgba(0,0,0,0.8); width: 100%; height: 100%; position: fixed; z-index: 100;  left: 0; top: 0; display: none; overflow: auto; padding: 20vw 8%;}
 #grandMenu a {color: #fff;}
 #grandMenu #navGlobal {display:block;}
 #grandMenu #navGlobal li { font-size: var(--fs-20); border-bottom: 1px dotted #fff; line-height: 1;}
 #grandMenu #navGlobal li a {display:  block; padding: 4vw 0; position: relative;}
 #grandMenu #navGlobal li a::after {content:""; position: absolute; right: 2vw; top: 50%; width: 2vw; height: 2vw; border-top:1px solid #fff; border-right: 1px solid #fff; transform:  rotate(45deg) translateX(-50%);}
}

/* ----------------------------------------------------
footer (common)
---------------------------------------------------- */
#footer { margin-top: auto;color: #fff; }
.ftContact { background: #495F75 url("../img/common/bg_ftContact.jpg") center center / cover no-repeat; padding: var(--w-90) 5%; text-align: center; font-size: var(--fs-15);}
.ftContact .homTitle {margin-bottom: var(--w-20);}
.ftContact .homTitle span {color: #fff;}
.ftContact .btn {color: #fff; margin: var(--w-40) auto 0;}
.ftContact .btn::before {border-color: #fff;}
.ftContact .btn span::before, #footer .btn span::after {background: #fff;}
.ftNav {background: var(--c-blue-dark); }
.ftNav__inr{display: grid; grid-template-columns: auto max-content; grid-template-rows: 1fr 1fr; gap:var(--w-10) 0px ; width: 92%; margin: 0 auto; padding: var(--w-30) 0;}
.ftNav__title {grid-area: 1 / 1 / 2 / 2;}
.ftNav__list {grid-area: 1 / 2 / 3 / 3; display: grid; place-items: center;}
.copyright{grid-area: 2 / 1 / 3 / 2; font-size: var(--fs-12);}

.ftNav__title img {width: var(--w-140);}
.ftNav__list ul {display: flex; font-size: var(--fs-14); font-family: var(--ff-en);}
.ftNav__list ul li {padding: 0 var(--w-15); border-left: 1px solid #fff; line-height: 1;}
.ftNav__list ul li:first-child {border-left: none; padding-left: 0;}
.ftNav__list ul li:last-child {padding-right: 0;}
.ftNav__list ul li a {color: #fff;}

@media (max-width:768px) {
.ftContact {padding: var(--w-70) 5%;}
.ftNav__inr {display: block; text-align: center;}
.ftNav__title img {width: min(25vw,240px);}
.ftNav__list {margin: var(--w-20) 0 var(--w-15);}
.ftNav__list ul {font-size: var(--fs-12);}

 @media (max-width:430px) {
.ftNav__list ul li:last-child {display: none;}
.ftNav__list ul li:nth-child(4) {padding-right: 0;}
 }

}

#pagetop {position: fixed; bottom: 0; right: 0; z-index: 100; }
#pagetop a {display:block; width: 50px; aspect-ratio: 1/1; background-color: var(--c-blue); position: relative;}
#pagetop a::before {content: ""; width: 15px; aspect-ratio: 1/1; border-top: 2px solid #fff; border-right: 2px solid #fff; position: absolute; left: 50%; top: 50%; translate: -50% -35%; rotate: -45deg;}


/* ----------------------------------------------------
home
---------------------------------------------------- */
.homTitle {text-align: center; font-size:var(--fs-22);}
.homTitle span{ display: block; font-family: var(--ff-en); font-size: var(--fs-14); color: var(--c-gray);}

.btn {font-size: var(--fs-15); font-family: var(--ff-en); position: relative; text-align: center; display: inline-block; color: var(--c-gray); font-weight: 600;}
.btn::before {content: ""; width: var(--w-50); aspect-ratio: 1/1; border: 1px solid #aaa; border-radius: 50%; position: absolute; right: -4.5em; top: 50%; translate: 50% -50%; transition: 0.3s all ease-in-out;}
.btn span {position: relative; min-height: var(--w-50); display: flex; align-items: center; padding: 0 var(--w-10);}
.btn span::before,.btn span::after {content: ""; transition: 0.3s all ease-in-out;  height: 1px; background: #aaa; position: absolute; top: 50%;}
.btn span::before { width: 4.5em; right: 0; translate: 100% 0;  }
.btn span::after {width: 10px; right: -4.5em; transform-origin: right bottom; rotate: 45deg; }

.btn:hover {color: var(--c-blue);}
.btn:hover span::before {translate: calc(100% + 0.5em) 0;}
.btn:hover span::after {right: -5em;}
.btn:hover::before {scale: 1.1;}

@media (max-width:768px) {
 .btn::before {width: var(--w-80);}
}

/* visual */
#mainVisual {aspect-ratio: 2/1; background: #ccc;}
.homSlider__slide {width: 100%; height: 100%; position: relative;}
.homSlider__slide img {width: 100%; height: 100%; object-fit: cover;}
.homSlider__slide h2 {position: absolute; font-size: var(--fs-34); color: #fff; font-weight: 600; line-height: 1.5; margin: 0;}

@media (min-width:769px) {
.homSlide--01 h2 {right: var(--w-40); top: 50%; translate: 0 -50%;}
}

@media (max-width:768px) {
 #mainVisual  {aspect-ratio: inherit; width: 100%; height: 90vh; overflow: hidden;}
 .homSlider__slide {width: 100%; height: 90vh;}
 .homSlide--01 h2 {left: 0; top:60%; width: 100%; text-align: right;}
 
  @media (max-width:560px) {
  #mainVisual {aspect-ratio: 2/3; height: auto;}
  .homSlider__slide {height:auto;}
  }
  
}

/* contents */
.homContent {width: 92%; min-height: 540px; margin: var(--w-80) auto var(--w-100); position: relative;}
.homContent::before {content: "";  height: 100%; position: absolute; top: 0; }
.homInr {max-width: 1200px; margin: 0 auto;}
.homCont__txt {max-width: 530px; width: 44%; padding: var(--w-80) 0; text-align: center;}
.homCont__txt .homTitle {margin-bottom: var(--w-50);}
.homCont__txt .homCont__read {line-height: 2;}
.homCont__txt .homBtn {margin: var(--w-60) auto 0;}
.homCont__txt .homCont__logo {width: var(--w-100); margin: var(--w-30) auto 0;}

.homCompany__img {position: absolute; right: 0; top: 0; width: 50%; height: 100%;}
.homService__img--01 {position: absolute; left: 0; top: 0; width: 42%; height: 100%; background: #eee;}
.homService__img--02 { aspect-ratio: 415/390; width: 25%; background: #aaa; position: absolute; left: 50%; bottom: 0; translate: -95% 25%;}

#homService .homInr {display: flex; justify-content: flex-end;}

@media (max-width: 900px) {
 .homContent {width: 100%;}
 .homInr {width: 90%;}
 
 @media (max-width: 819px) {
 .homCont__txt {max-width: inherit; width: 100%; padding: 0;  }
 .homCompany__img {position: relative; width: 90%; height: auto; margin: var(--w-80) auto 0;}

  #homService {margin-bottom: var(--w-60);}
 .homService__img--01 {position: relative; width: 80%; margin : var(--w-80) 0 0 5%; aspect-ratio: 4/3;}
 .homService__img--02 {left: inherit; right: 0; translate: 0 25%; width: 40%;}
 
 }
 
}


/* ----------------------------------------------------
module
---------------------------------------------------- */
main {margin-bottom: var(--w-140); }
.inrContent {width: 92%; max-width: 1200px; margin-inline: auto;}

.pageTitle {text-align: center; font-size: var(--fs-32); line-height: 1.5; margin: var(--w-50) auto var(--w-70);}
.pageTitle span {display: block; font-family: var(--ff-en); font-size: var(--fs-14); color: var(--c-gray); text-transform: uppercase;}

.hA {font-size: var(--fs-24); font-weight: 600; padding-left: var(--w-70); position: relative; margin-bottom: var(--w-40);}
.hA::before {content: ""; width: var(--w-50); height: 3px; background: var(--c-blue); position: absolute; left: 0; top: 1em;}
.hB {color: var(--c-blue); font-weight: 600; font-size: var(--fs-20); margin-bottom: var(--w-10);}

.strong {font-size: var(--fs-18); font-weight: 600;}
.fs-16 {font-size: var(--fs-16) !important;}
.read--C {text-align: center;}

.section {margin: var(--w-80) auto;}
.bg--gray {background: var(--bg-gray); padding: var(--w-50) var(--w-70) var(--w-60);}
.bg--gray .hA {translate: calc(var(--w-70) * -1) 0; margin-bottom: var(--w-30);}
.bg--gray *:not(.hA):last-child {margin-bottom: 0;}

.listDot li {padding-left:1em; line-height: 2; position: relative;}
.listDot li::before {content: ""; width: 5px; aspect-ratio: 1/1; background: var(--c-blue); border-radius: 50%; position: absolute; left: 0; top: 0.85em;}

.float__wrap {overflow: hidden;}
.float-R {float: right; margin:0 0 1em var(--w-60);}

.tblA {width: 100%;}
.tblA tr {border-bottom: 1px solid #ccc;}
.tblA tr th {font-weight: normal; width: 20%; vertical-align: text-top; padding: var(--w-15) 0;}
.tblA tr td { padding: var(--w-15) 1em; }

@media (max-width:768px) {
 .tblA tr th, .tblA tr td {display: block; width: 100%;}
 .tblA tr th {font-weight: bold; text-align: left; padding: var(--w-20) 0 0; }
 .tblA tr td {padding: var(--w-10) 0 var(--w-20); }
 .read--C {text-align: left;}
}



/* ----------------------------------------------------
underlayer
---------------------------------------------------- */

/* common */
#pageVisual {height:clamp(200px, 137.500px + 16.667vw, 360px); background: url("../img/page/common/bg-visual.jpg") center center / cover no-repeat; display: flex; align-items: center; justify-content: center;}
#pageVisual h2 {font-size: var(--fs-48);font-family: var(--ff-en);  text-transform: uppercase; font-weight: 600; color: #fff; z-index: 10}

.topicPath {font-family: var(--ff-en); text-transform: uppercase; width: 92%;margin: var(--w-10) auto; font-size: var(--fs-14); display: flex; flex-wrap: wrap;}
.topicPath li:not(:first-child) {margin-left: 5px; padding-left: var(--w-15); position: relative;}
.topicPath li:not(:first-child)::before {content: ""; width: 6px; aspect-ratio: 1/1; border-top: 1px solid #333; border-right: 1px solid #333; position: absolute; left: 0; top: 50%; translate: 0 -50%; rotate: 45deg;}


/* service */
.srvOutline {}
.srvOutline__cont {width: 55%;}
.srvLogo {width: 40%; max-width: 360px; background: #fff; box-shadow: 5px 5px 10px 0 rgba(0,0,0,0.1); }
.srvLogo a {display: flex; height: 100%;  justify-content: center; align-items: center;}
.srvLogo a img {width: 58%; max-width: 210px;}

.srvFeature {margin: var(--w-80) auto; align-items: center;}
.srvFeat--R {flex-direction: row-reverse;}
.srvFeat__cont {width: 55%;}
.srvFeat__img {width: 40%; max-width: 470px;}
.srvFeat__title {position: relative; padding-left:var(--w-70); margin: var(--w-30) auto var(--w-40); line-height: 1.6;}
.srvFeat__title span {position: absolute; font-size: var(--fs-20); aspect-ratio: 1/1; width: var(--w-50); background: #D1E3F4; border-radius: 50%; left: 0; top: 50%; translate: 0 -50%; display: flex; justify-content: center; align-items: center;}
.srvFeat__cont p {line-height: 2;}

.srvBenefit {position: relative;}
.srvBenefit__cont {width: 50%;}
.srvBnf__title {margin: var(--w-40) auto var(--w-10);}
.srvBnf__title span {padding-left:2.5em;}
.ic--building::before {content: "\ea40"; font-size: 2em;}
.ic--member::before {content: "\f8df"; font-size: 2em;}
.srvBenefit__img {position: absolute; left: 50%; top: 50%; translate: 10% -50%; aspect-ratio: 63/45; width: 52.5%; background: #999;}

.srvMeet {border: 2px solid var(--c-blue); border-radius: var(--w-15); position: relative; padding: var(--w-40) var(--w-60); margin: var(--w-110) auto 0;}
.srvMeet__cont {width: 60%;}
.srvMeet__title {display: flex; gap: var(--w-30); align-items: flex-end; margin-bottom: var(--w-30);}
.srvMeet__title h2 {width: var(--w-190);}
.srvMeet__title ul {margin: 0; display: flex; gap:var(--w-15);}
.srvMeet__title ul li img {width: auto; height: 24px;}
.srvMeet p {font-weight: 600; }
.srvMeet__read {line-height: 1.6; color: #595757;}
.ic--ext {padding-right: 2em; position: relative;}
.ic--ext::before {content: ""; background: url("../img/common/ic-ext-01.svg") center center / cover no-repeat; position: absolute; right: 0; top: 0.2em; aspect-ratio: 1/1; width: 19px;}
.srvMeet__img {position: absolute; right: var(--w-50); bottom: var(--w-30); width: min(35%,360px); box-shadow: 3px 3px 5px 0 rgba(0,0,0,0.2);}


@media (max-width: 990px) {
.srvBenefit__cont {width: 100%;}
.srvBenefit__img {position: relative; left:inherit; top: inherit; translate: 0 0; aspect-ratio: 4/3; width: 100%; margin: var(--w-60) auto 0;}
 
 @media (max-width: 840px) {
  .srvMeet__cont {width: 100%; text-align: center;}
  .srvMeet__title {justify-content: center;}
  .srvMeet__title h2 {width: var(--w-300);}
  .srvMeet__img {position: relative; width: 100%; max-width:480px; margin: var(--w-40) auto 0; bottom: inherit; right: inherit;}
 
 
  @media (max-width:768px) {
   .srvOutline, .srvFeature {display: block;}
   .srvOutline__cont, .srvFeat__cont {width: 100%;}
   .srvLogo {width: 100%; max-width: inherit; margin-top: var(--w-60); }
   .srvLogo a {padding: var(--w-60);}

   .srvFeat__img {width: 100%;margin: var(--w-60) auto 0; overflow: hidden; aspect-ratio: 3/2;}
   .srvFeat__img img {width: 100%; height: 100%; object-fit: cover;}
  }
 }
}


/* company */
.message .float-R {width: 40%; max-width: 470px;}
.message p {line-height: 2; margin-bottom: 1.5em;}
.msg__name {text-align: right; margin-top: var(--w-30);}
.msg__name p {text-align: left; display: inline-block; line-height: 1.5;}
.msg__name span {font-size: var(--fs-24); margin-left: var(--w-15);}


/* contact */
.item-form {margin: var(--w-30) 0;}
.item-form p {margin: 0 0 var(--w-15); font-weight: 600;}
.required {background: #B10000; color: #fff; font-size: var(--fs-12); margin-left: var(--w-15); padding: 5px var(--w-15); border-radius: 5px; line-height: 1.2; display: inline-block;}
.item-form input[type="text"],.item-form input[type="email"]  {border: 1px solid #999; padding: var(--w-15); outline: none;}
.inputA {width: 100%;}
.item-form select {width: 50%; border: 1px solid #999; padding: var(--w-15); outline: none;}
.item-form textarea {width: 100%; height:var(--w-300); border: 1px solid #999; padding: var(--w-15); outline: none; }
.check-privacy input[type="checkbox"] {margin-right:var(--w-10) !important;}

.btnFlex {display: flex; justify-content: center; column-gap: var(--w-20); margin: var(--w-50) auto 0; }
.btnPrimary {color: #fff; background: var(--c-blue); border-radius: 30vw; width:100%; min-width: 360px; border: none; padding: var(--w-15); font-size: var(--fs-20); transition: 0.3s all ease-in-out;}
.btnPrimary:hover {background: var(--c-blue-light);}
.btnBack {color: #fff; background: #aaa; border-radius: 30vw; width:100%; min-width: 200px; border: none; padding: var(--w-15); font-size: var(--fs-20); transition: 0.3s all ease-in-out;}
.btnBack:hover{ background: #ccc;}

@media (max-width: 630px) {
 .item-form select {width: 100%;}
 .btnFlex {flex-direction: column-reverse;}
 .btnFlex li {margin: var(--w-10) 0;}
 .btnFlex button {width: 100%; min-width: inherit; padding: var(--w-20) var(--w-15); }
}



/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
pcSetting
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@media (min-width:768px) {
/* ----------------------------------------------------
common(pc)
---------------------------------------------------- */

a:hover,
.clickable:hover {
 opacity: 0.7;
 transition: all 0.2s ease-in-out;
}

}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
tabletSetting
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@media (max-width: 1200px) and (min-width: 768px) {
}


/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
spSetting
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@media (max-width: 767px) {
	#mainContainer{ width: 100%; position: relative;padding-top: 16vw;}


}