:root {
  --navy: #1E287E;
  --navyLight: #365398;
  --skyBlue: #108FFF;
  --blue: #CEDEFF;
  --blueLight: #F5F7FF;
  --blueLightdark: #EBF2F6;
  --purpleLight: #EEF1FF;
  --grayLight: #F6F6F6;
  --gray: #C2C2C2;
  --grayDark: #89898E;
  --black: #000;
  --white: #fff;
  --navyGrade: linear-gradient(90deg, #1b2b51 0%, #3e5da5 100%);
  --blueGrade: linear-gradient(90deg, #C8E5EE 0%, #E0E9F8 100%);
  --lightGrade: linear-gradient(90deg, #F1FCFF 0%, #EEF1FF 100%);
  --lightGradeRtl: linear-gradient(90deg, #EEF1FF 0%, #F1FCFF 100%);
  --red: #F64E5A;
  --green: #00ad5a;
  --radius: 30px;
  --d-01: #5471AC;
  --d-02: #3EBDF3;
  --d-03: #4AC1C1;
  --d-04: #8C9C9F;
  --d-05: #6EC87A;
  --d-06: #B5BC51;
  --d-07: #AA9972;
  --d-08: #0e91f6;
  --d-09: #f08300;
  --d-10:#ea5863;
  --d-11:#ba78e0;
}

*,
*::before,
*::after {
  box-sizing: border-box
}

body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0
}

ul[role='list'],
ol[role='list'] {
  list-style: none
}

html:focus-within {
  scroll-behavior: smooth
}

body {
  min-height: 100vh;
  text-rendering: optimizeSpeed
}

a:not([class]) {
  text-decoration-skip-ink: auto
}

img,
picture {
  max-width: 100%;
  display: block
}

address {
  font-style: normal
}

input,
button,
textarea,
select {
  font: inherit
}

ul {
  list-style: disc;
  padding-left: 20px
}

ul li {
  padding: 0
}

ol {
  padding-left: 20px
}

@media (prefers-reduced-motion:reduce) {
  html:focus-within {
    scroll-behavior: auto
  }
}

@font-face {
  font-family: "NotoSans-Regular";
  src: url(../fonts/Noto_Sans/NotoSans-Regular.woff2) format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap
}

@font-face {
  font-family: "NotoSans-Bold";
  src: url(../fonts/Noto_Sans/NotoSans-Bold.woff2) format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap
}

@font-face {
  font-family: "NotoSansJP-Regular";
  src: url(../fonts/Noto_Sans_JP/NotoSansJP-Regular.woff2) format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap
}

@font-face {
  font-family: "NotoSansJP-Bold";
  src: url(../fonts/Noto_Sans_JP/NotoSansJP-Bold.woff2) format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap
}

@font-face {
  font-family: "NotoSansJP-Bold";
  src: url(../fonts/Noto_Sans_JP/NotoSansJP-Bold.woff2) format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap
}

@font-face {
  font-family: "Sourcehan";
  src: url(../fonts/Sourcehan/SourceHanCodeJP.woff2) format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap
}

@font-face {
  font-family: "Roboto";
  src: url(../fonts/Roboto/Roboto-Medium.woff2) format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap
}

@font-face {
  font-family: "Roboto";
  src: url(../fonts/Roboto/Roboto-Bold.woff2) format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap
}

@font-face {
  font-family: "Roboto";
  src: url(../fonts/Roboto/Roboto-ExtraLight.woff2) format("woff2");
  font-weight: 100;
  font-style: normal;
  font-display: swap
}

html {
  font-family: "Roboto", "Noto Sans JP", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  font-size: 10px;
  font-feature-settings: "palt"
}

body {
  font-size: 1.8rem;
  line-height: 1.7
}

body.is-open {
  overflow: hidden
}

.inner {
  max-width: 1200px;
  width: 85%;
  padding: 50px 0 50px 0;
  margin: auto
}

.inner--narrow {
  max-width: 1100px;
  width: 85%;
  padding: 80px 0 80px 0;
  margin: auto
}

.mainContents {
  padding: 85px 0 0 0;
  overflow: hidden;
  position: relative
}

.pageTitle {
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  height: 350px;
  position: relative
}

.pageTitle .inner {
  padding: 50px 0
}

.pageTitle__title .heading .en {
  color: var(--navy);
  font-size: 3rem;
  font-weight: 700;
  line-height: 1
}

.pageTitle__title .heading .jp {
  font-size: 5rem;
  line-height: 1.2;
  color: var(--navy);
  font-family: "Roboto", "Sourcehan"
}

.pageTitle__title .heading .jp--small {
  font-size: 2rem;
  color: var(--navy);
  font-family: "Roboto", "Sourcehan"
}

.pageTitle__title .heading .jp .text--large {
  font-size: 7rem;
  font-family: "Roboto", "Sourcehan"
}

.pageTitle__title .heading .jp .text--middle {
  font-size: 5.5rem;
  font-family: "Roboto", "Sourcehan"
}

.pageTitle__title .heading .jp .text--small {
  font-size: 4rem;
  font-family: "Roboto", "Sourcehan"
}

.breadcrumbs {
  background: var(--grayLight)
}

.back--imgGradelight .breadcrumbs {
  background: none
}

.breadcrumbs ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  margin: auto;
  padding: 8px 0;
  margin-left: 25px
}

.breadcrumbs ul li {
  display: inline-block;
  position: relative;
  padding: 0 15px 0 0;
  font-size: 1.2rem
}

.breadcrumbs ul li a {
  color: var(--black);
  text-decoration: none
}

.breadcrumbs ul li::after {
  content: "";
  width: 4px;
  height: 4px;
  border-top: 1px solid var(--black);
  border-right: 1px solid var(--black);
  display: block;
  transform: rotate(45deg);
  position: absolute;
  top: 7px;
  right: 6px
}

.breadcrumbs ul li:last-child::after {
  content: none
}

.block {
  display: block !important
}

.none {
  display: none !important
}

.emphasis {
  background: var(--navyGrade);
  padding: 3px 20px;
  color: var(--white);
  display: inline-block;
  font-weight: 700;
  box-shadow: 10px 10px var(--blueLight)
}

.emphasis.text--large {
  font-size: 3rem
}

.text--small {
  font-size: 1.4rem
}

.text--large {
  font-size: 2rem
}

.text--center {
  text-align: center
}

.text--left {
  text-align: left
}

.text--right {
  text-align: right
}

.text--red {
  color: var(--red)
}

.text--black {
  color: var(--black)
}

.text--navy {
  color: var(--navy)
}

.text--navyLight {
  color: var(--navyLight)
}

.text--white {
  color: var(--white)
}

.text--gray {
  color: var(--gray)
}

.text--grayDark {
  color: var(--grayDark)
}

.text--blue {
  color: var(--blue)
}

.alert {
  padding-left: 0
}

.alert>li,
.alert>p {
  padding-left: 1.3em;
  font-size: 1.4rem;
  list-style: none;
  position: relative
}

.alert>li::before,
.alert>p::before {
  content: "※";
  margin-right: 3px;
  position: absolute;
  top: 0;
  left: 0
}

.text--arrow>li,
.text--arrow>p {
  padding-left: 1.3em;
  font-size: 1.4rem;
  list-style: none;
  position: relative
}

.text--arrow>li::before,
.text--arrow>p::before {
  content: "竍�";
  margin-right: 3px;
  position: absolute;
  top: 0;
  left: 0
}

.text--line-through {
  text-decoration: line-through
}

.mgauto {
  margin: auto !important
}

.mg0 {
  margin: 0 !important
}

.mg10 {
  margin: 10px !important
}

.mg20 {
  margin: 20px !important
}

.mg30 {
  margin: 30px !important
}

.mg40 {
  margin: 40px !important
}

.mg50 {
  margin: 50px !important
}

.mg60 {
  margin: 60px !important
}

.mg70 {
  margin: 70px !important
}

.mg80 {
  margin: 80px !important
}

.mgL0 {
  margin-left: 0 !important
}

.mgL10 {
  margin-left: 10px !important
}

.mgL20 {
  margin-left: 20px !important
}

.mgL30 {
  margin-left: 30px !important
}

.mgL40 {
  margin-left: 40px !important
}

.mgL50 {
  margin-left: 50px !important
}

.mgL60 {
  margin-left: 60px !important
}

.mgL70 {
  margin-left: 70px !important
}

.mgL80 {
  margin-left: 80px !important
}

.mgR0 {
  margin-right: 0 !important
}

.mgR10 {
  margin-right: 10px !important
}

.mgR20 {
  margin-right: 20px !important
}

.mgR30 {
  margin-right: 30px !important
}

.mgR40 {
  margin-right: 40px !important
}

.mgR50 {
  margin-right: 50px !important
}

.mgR60 {
  margin-right: 60px !important
}

.mgR70 {
  margin-right: 70px !important
}

.mgR80 {
  margin-right: 80px !important
}

.mgT0 {
  margin-top: 0 !important
}

.mgT10 {
  margin-top: 10px !important
}

.mgT20 {
  margin-top: 20px !important
}

.mgT30 {
  margin-top: 30px !important
}

.mgT40 {
  margin-top: 40px !important
}

.mgT50 {
  margin-top: 50px !important
}

.mgT60 {
  margin-top: 60px !important
}

.mgT70 {
  margin-top: 70px !important
}

.mgT80 {
  margin-top: 80px !important
}

.mgB0 {
  margin-bottom: 0 !important
}

.mgB10 {
  margin-bottom: 10px !important
}

.mgB20 {
  margin-bottom: 20px !important
}

.mgB30 {
  margin-bottom: 30px !important
}

.mgB40 {
  margin-bottom: 40px !important
}

.mgB50 {
  margin-bottom: 50px !important
}

.mgB60 {
  margin-bottom: 60px !important
}

.mgB70 {
  margin-bottom: 70px !important
}

.mgB80 {
  margin-bottom: 80px !important
}

.pg10 {
  padding: 10px !important
}

.pg20 {
  padding: 20px !important
}

.pg30 {
  padding: 30px !important
}

.pg40 {
  padding: 40px !important
}

.pg50 {
  padding: 50px !important
}

.pg60 {
  padding: 60px !important
}

.pg70 {
  padding: 70px !important
}

.pg80 {
  padding: 80px !important
}

.pgL10 {
  padding-left: 10px !important
}

.pgL20 {
  padding-left: 20px !important
}

.pgL30 {
  padding-left: 30px !important
}

.pgL40 {
  padding-left: 40px !important
}

.pgL50 {
  padding-left: 50px !important
}

.pgL60 {
  padding-left: 60px !important
}

.pgL70 {
  padding-left: 70px !important
}

.pgL80 {
  padding-left: 80px !important
}

.pgR10 {
  padding-right: 10px !important
}

.pgR20 {
  padding-right: 20px !important
}

.pgR30 {
  padding-right: 30px !important
}

.pgR40 {
  padding-right: 40px !important
}

.pgR50 {
  padding-right: 50px !important
}

.pgR60 {
  padding-right: 60px !important
}

.pgR70 {
  padding-right: 70px !important
}

.pgR80 {
  padding-right: 80px !important
}

.pgT10 {
  padding-top: 10px !important
}

.pgT20 {
  padding-top: 20px !important
}

.pgT30 {
  padding-top: 30px !important
}

.pgT40 {
  padding-top: 40px !important
}

.pgT50 {
  padding-top: 50px !important
}

.pgT60 {
  padding-top: 60px !important
}

.pgT70 {
  padding-top: 70px !important
}

.pgT80 {
  padding-top: 80px !important
}

.pgB10 {
  padding-bottom: 10px !important
}

.pgB20 {
  padding-bottom: 20px !important
}

.pgB30 {
  padding-bottom: 30px !important
}

.pgB40 {
  padding-bottom: 40px !important
}

.pgB50 {
  padding-bottom: 50px !important
}

.pgB60 {
  padding-bottom: 60px !important
}

.pgB70 {
  padding-bottom: 70px !important
}

.border {
  border: 1px solid var(--navy)
}

.border--right {
  border-right: 1px solid var(--navy)
}

.border--left {
  border-left: 1px solid var(--navy)
}

.border--top {
  border-top: 1px solid var(--navy)
}

.border--bottom {
  border-bottom: 1px solid var(--navy)
}

.back--navy {
  background: var(--navy);
  color: var(--white)
}

.back--navyLight {
  background: var(--navyLight);
  color: var(--white)
}

.back--blue {
  background: var(--blue)
}

.back--blueLight {
  background: var(--blueLight)
}

.back--grayLight {
  background: var(--grayLight)
}

.back--navyGrade {
  background: var(--navyGrade);
  color: var(--white)
}

.back--blueGrade {
  background: var(--blueGrade)
}

.back--lightGrade {
  background: var(--lightGrade)
}

.back--white {
  background: var(--white)
}

.border-radius {
  border-radius: var(--radius)
}

.back--imgGradelight {
  background: url(../../assets/image/back-gradelight.jpg) 0 0 no-repeat;
  background-size: contain
}

.title--imgGradelight {
  position: relative;
  overflow-x: hidden
}

.title--imgGradelight::after {
  content: "";
  background: url(../image/pagetitle-grade.png) 0 0 no-repeat;
  background-size: contain;
  position: absolute;
  top: 0;
  left: 0;
  width: 60%;
  max-width: 740px;
  height: 740px;
  z-index: -1
}

.title--imgGradelight::before {
  content: "";
  background: url(../image/pagetitle-line.png) 400px -300px no-repeat;
  background-size: 100%;
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 750px;
  z-index: -1
}

.bottom--imgGradelight {
  position: absolute;
  overflow-x: hidden;
  bottom: 0;
  right: 0;
  max-width: 740px;
  width: 50%;
  height: 740px;
  background: url(../image/bottom-grade.png) right bottom no-repeat;
  background-size: contain;
  z-index: -1
}

a {
  transition: 0.3s all;
  position: relative;
  color: var(--navy);
  text-decoration: underline
}

a:hover {
  transition: 0.3s all;
  color: var(--navyLight);
  text-decoration: none
}

a[href$=".pdf"]::after,
a[href*=".pdf#page="]::after {
  content: "PDF繧貞挨繧ｦ繧､繝ｳ繝峨え縺ｧ髢九″縺ｾ縺�" !important;
  display: inline-block;
  width: 0;
  height: 0;
  overflow: hidden;
  background: url(../../assets/image/icon-pdf.png)no-repeat;
  background-size: 30px auto;
  padding: 23px 11px 0 20px;
  margin-left: 5px;
  vertical-align: middle
}

a[href^="https"],
a[href^="//"],
a[href^="https://www.fnl.co.jp/"],
a.ico_outlink {
  position: relative
}

a[href^="http"]::after,
a[href^="//"]::after,
a[href^="https://www.fnl.co.jp/"]::after,
a.ico_outlink::after {
  content: "別ウインドウで開きます";
  display: inline-block;
  width: 0;
  height: 0;
  overflow: hidden;
  background: url(../../assets/image/icon-out-black.png) no-repeat;
  background-size: 10px auto;
  padding: 16px 0 0 20px;
  margin-left: 8px;
  vertical-align: middle
}

a[href^="http"]::hover::after,
a[href^="//"]::hover::after,
a[href^="https://www.fnl.co.jp/"]::hover::after,
a.ico_outlink::hover::after {
  background: #1B2B51 url(../../assets/image/icon-out-white.png) no-repeat calc(100% - 6px) calc(50% - 0px);
  background-size: 15px;
  color: linear-gradient(90deg, #1b2b51 0%, #3e5da5 100%)
}

a.no-icon[href^="http"]::after,
a.no-icon[href^="//"]::after,
a.no-icon[href^="https://www.fnl.co.jp/"]::after,
a.no-icon[href^="https://get2.adobe.com/"]::after,
a.no-icon[href^="https://www.youtube.com/"]::after,
a.no-icon[href^="https://youtu.be/"]::after,
a.no-icon[href^="https://twitter.com/"]::after {
  display: none !important
}

.title--large {
  font-size: 4rem;
  font-family: "Roboto", "Sourcehan"
}

.title--small {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.2;
  font-family: "Roboto", "Sourcehan"
}

.arrow {
  position: absolute;
  right: 15px;
  width: 24px;
  height: 24px;
  background: var(--white);
  display: block;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 50%;
  border: 2px solid var(--white)
}

.arrow::before {
  content: "";
  position: absolute;
  right: 5px;
  top: 6px;
  width: 9px;
  height: 9px;
  transform: rotate(45deg);
  border-top: 1px solid var(--navy);
  border-right: 1px solid var(--navy);
  display: block
}

.arrow::after {
  content: "";
  position: absolute;
  right: 5px;
  top: 10px;
  width: 12px;
  height: 1px;
  display: block;
  background: var(--navy)
}

.arrow--line {
  width: 30px;
  height: 30px;
  position: relative;
  display: inline-block
}

.arrow--line::before {
  content: "";
  width: 10px;
  height: 10px;
  border-top: 1px solid var(--black);
  border-right: 1px solid var(--black);
  transform: rotate(45deg) translate(-50%, -50%);
  display: block;
  position: absolute;
  top: 50%;
  left: 50%
}

.arrow.back {
  right: auto;
  left: 15px
}

.arrow.back::before {
  right: 6px;
  transform: rotate(-135deg)
}

.arrow--left,
.arrow--right,
.arrow--upper,
.arrow--under {
  position: relative;
  width: 24px;
  height: 24px;
  display: inline-block
}

.arrow--left::before {
  content: "";
  position: absolute;
  right: 5px;
  top: 5px;
  width: 11px;
  height: 11px;
  transform: rotate(45deg);
  border-top: 1px solid var(--navy);
  border-right: 1px solid var(--navy);
  display: block
}

.arrow--left::after {
  content: "";
  position: absolute;
  right: 5px;
  top: 10px;
  width: 12px;
  height: 1px;
  display: block;
  background: var(--navy)
}

.arrow--right::before {
  content: "";
  position: absolute;
  right: 5px;
  top: 5px;
  width: 11px;
  height: 11px;
  transform: rotate(-135deg);
  border-top: 1px solid var(--navy);
  border-right: 1px solid var(--navy);
  display: block
}

.arrow--right::after {
  content: "";
  position: absolute;
  right: 5px;
  top: 10px;
  width: 12px;
  height: 1px;
  display: block;
  background: var(--navy)
}

.arrow--upper::before {
  content: "";
  position: absolute;
  right: 5px;
  top: 5px;
  width: 11px;
  height: 11px;
  transform: rotate(-45deg);
  border-top: 1px solid var(--navy);
  border-right: 1px solid var(--navy);
  display: block
}

.arrow--upper::after {
  content: "";
  position: absolute;
  right: 10px;
  top: 5px;
  width: 1px;
  height: 15px;
  display: block;
  background: var(--navy)
}

.arrow--under::before {
  content: "";
  position: absolute;
  right: 5px;
  top: 8px;
  width: 11px;
  height: 11px;
  transform: rotate(135deg);
  border-top: 1px solid var(--navy);
  border-right: 1px solid var(--navy);
  display: block
}

.arrow--under::after {
  content: "";
  position: absolute;
  right: 10px;
  top: 5px;
  width: 1px;
  height: 15px;
  display: block;
  background: var(--navy)
}

.icon--new {
  color: var(--white);
  font-size: 1.4rem;
  padding: 1px 4px 0px 5px;
  border-radius: 4px;
  margin: 0 10px 0 10px;
  display: inline-block;
  background: var(--red);
}

.icon--pdf {
  background: var(--red);
  padding: 2px 5px 0 5px;
  text-align: center;
  color: var(--white);
  font-size: 1.1rem;
  text-decoration: none !important;
  border-radius: 3px;
  margin: 0 5px 0 5px;
  display: inline-block;
  transform: translateY(-2px)
}

.icon--excel {
  background: var(--green);
  padding: 2px 5px 0 5px;
  text-align: center;
  color: var(--white);
  font-size: 1.1rem;
  text-decoration: none !important;
  border-radius: 3px;
  margin: 0 5px 0 5px;
  display: inline-block;
  transform: translateY(-2px)
}

.icon--indispensable {
  border: 2px solid var(--red);
  padding: 2px 5px 0 5px;
  text-align: center;
  color: var(--red);
  font-size: 1.1rem;
  text-decoration: none !important;
  border-radius: 3px;
  margin: 0 5px 0 5px;
  display: inline-block;
  transform: translateY(-2px);
  font-weight: 700
}

.btn {
  max-width: 272px;
  width: 80%;
  text-align: center;
  padding: 12px 15px;
  display: block;
  position: relative;
  text-decoration: none;
  border-radius: 30px;
  z-index: 0;
  border: 2px solid var(--white);
  overflow: hidden;
  font-weight: 700
}

.btn.navy {
  color: var(--white);
  margin: auto
}

.btn.navy .icon--white {
  background: url(../../assets/image/icon-out-white.png) no-repeat 0 0;
  width: 19px;
  height: 19px;
  background-size: contain;
  display: inline-block;
  margin: 0 0 -3px 4px
}

.btn.navy::before {
  content: "";
  background: var(--white);
  color: var(--navy);
  transition: 0.3s all;
  transform: scale(0, 1);
  display: block;
  z-index: -1;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-origin: left bottom
}

.btn.navy::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  background: var(--navy);
  border-radius: 30px;
  z-index: -2;
  transition: 0.3s all
}

.btn.navy:hover {
  color: var(--navy);
  border-color: var(--navy)
}

.btn.navy:hover::before {
  transform: scale(1, 1);
  transform-origin: left bottom
}

.btn.navy:hover::after {
  opacity: 0
}

.btn.navy:hover .arrow {
  background: var(--navy)
}

.btn.navy:hover .arrow::before {
  border-color: var(--white)
}

.btn.navy:hover .arrow::after {
  background: var(--white)
}

.btn.navy:hover .icon--white {
  background: url(../../assets/image/icon-out-black.png) no-repeat 0 0;
  background-size: contain
}

.backArea .btn {
  margin: 50px auto
}

.btn.blueLight {
  color: var(--navy);
  border: 2px solid var(--navy);
  max-width: 200px;
  width: 80%;
  padding: 8px 15px
}

.btn.blueLight .icon--white {
  background: url(../../assets/image/icon-out-black.png) no-repeat 0 0;
  width: 19px;
  height: 19px;
  background-size: contain;
  display: inline-block;
  margin: 0 0 -3px 4px
}

.btn.blueLight::before {
  content: "";
  background: var(--blueLight);
  color: var(--navy);
  transition: 0.3s all;
  transform: scale(0, 1);
  display: block;
  z-index: -1;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-origin: left bottom
}

.btn.blueLight::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  background: var(--white);
  border-radius: 30px;
  z-index: -2;
  transition: 0.3s all
}

.btn.blueLight:hover {
  border-color: var(--navy)
}

.btn.blueLight:hover::before {
  transform: scale(1, 1);
  transform-origin: left bottom
}

.btn.blueLight:hover::after {
  opacity: 0
}

.btn.blueLight .arrow {
  background: var(--navy);
  border-color: var(--navy)
}

.btn.blueLight .arrow::before {
  border-top: 1px solid var(--white);
  border-right: 1px solid var(--white)
}

.btn.blueLight .arrow::after {
  background: var(--white)
}

.btn.white {
  color: var(--navy)
}

.btn.white::before {
  content: "";
  background: var(--white);
  transition: 0.3s all;
  transform: scale(0, 1);
  display: block;
  z-index: -1;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-origin: left bottom
}

.btn.white::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  background: var(--white);
  border-radius: 30px;
  z-index: -2;
  transition: 0.3s all
}

.btn.white:hover {
  color: var(--navy);
  border-color: var(--navy)
}

.btn.white:hover::before {
  transform: scale(1, 1);
  transform-origin: left bottom
}

.btn.white:hover::after {
  opacity: 0
}

.btn.small {
  color: var(--white);
  background: var(--navy);
  transition: 0.3s all;
  font-size: 1.4rem;
  padding: 1px 5px;
  border-radius: 5px;
  display: inline-block;
  width: auto;
  margin: 0 0 -5px 3px
}

.btn.small:hover {
  background: var(--navyLight)
}

.btn.square {
  padding: 30px 10px;
  text-align: center;
  color: var(--navy);
  border-radius: var(--radius);
  width: 100%;
  border: none;
  max-width: 400px
}

.btn.square::before {
  content: "";
  background: var(--blue);
  color: var(--navy);
  transition: 0.3s all;
  transform: scale(0, 1);
  display: block;
  z-index: -1;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-origin: left bottom
}

.btn.square::after {
  content: "";
  background: var(--blueLight);
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: var(--radius);
  z-index: -2;
  transition: 0.3s all
}

.btn.square:hover::before,
.btn.square.current::before {
  transform: scale(1, 1);
  transform-origin: left bottom
}

.btn.square:hover::after {
  opacity: 0
}

.btn.square .arrow {
  background: var(--navy);
  border: 2px solid var(--navy)
}

.btn.square .arrow::before {
  border-color: var(--white)
}

.btn.square .arrow::after {
  background: var(--white)
}

.back--blueGrade .btn.square::before {
  background: var(--blueLight)
}

.back--blueGrade .btn.square::after {
  background: var(--white)
}

.btnText {
  font-size: 1.4rem;
  transition: 1s all linear;
  text-decoration: none;
  color: var(--navy);
  font-weight: 700;
  display: inline-block
}

.btnText .arrow {
  position: static;
  display: inline-block;
  background: var(--navy);
  transform: translate(6px, 7px);
  transition: 0.3s all
}

.btnText .arrow::before {
  border-color: var(--white)
}

.btnText .arrow::after {
  background: var(--white)
}

.btnText:hover .arrow {
  background: var(--navy);
  transform: translate(12px, 7px)
}

.btn .ico_outlink {
  position: absolute;
  right: 30px;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  background: url(../image/icon-out-white.png) 0 0 no-repeat;
  background-size: contain
}

.btn:hover .ico_outlink {
  background: url(../../assets/image/icon-out-black.png) 0 0 no-repeat;
  background-size: contain
}

.visible {
  clip-path: inset(0 100% 0 0);
  transition: 1s all;
  opacity: 0
}

.effect.visible {
  clip-path: inset(0 0 0 0);
  opacity: 1
}

.visibleOpacity {
  position: relative;
  opacity: 0
}

.effectOpacity {
  animation-name: effectOpacity;
  opacity: 1;
  transition: .8s
}

@keyframes effectOpacity {
  0% {
    opacity: 0
  }

  100% {
    opacity: 1
  }
}

.header {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  height: 85px;
  transition: 0.3s all
}

.js-white {
  background: var(--white)
}

.header__title {
  padding: 10px 0 10px 20px;
  display: block;
  width: 310px;
  align-self: center
}

.header__link {
  text-decoration: none
}

.header__link img {
  width: 223px;
  display: inline-block;
  margin: 0 2px 6px 0
}

.header__link--text {
  text-decoration: none;
  color: var(--black);
  font-size: 1.45rem;
  margin: 0 0 0 0;
  display: inline-block;
  transform: translateY(-8px)
}

.header__skip {
  display: block;
  left: -9999px;
  position: absolute;
  top: -9999px
}

.is-open .header {
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 100vh;
    background: rgba(0, 0, 0, 0.6);
}

.gNav__list {
  list-style: none;
  padding-left: 0;
  margin: 11px 10px 11px 0;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 20px;
  max-width: 1200px;
  font-size: 1.8rem
}

.menuBtn {
  display: none
}

.gNav__item {
  position: relative
}

.gNav__link {
  text-decoration: none;
  color: #1B2B51;
  transition: 0.3s all;
  padding: 20px 0;
  margin: 0;
  display: block;
  position: relative;
  font-size: 1.45rem
}

.gNav__link::before {
  content: "";
  display: block;
  width: 100%;
  height: 3px;
  background: var(--navy);
  position: absolute;
  bottom: 12px;
  left: 0;
  transition: 0.3s all;
  transform: scale(0, 1);
  border: 0;
  transform-origin: left bottom
}

.gNav__link:hover::before {
  transform: scale(1, 1)
}

.gNav__link .arrow {
  display: none
}

.gNav__item .gNav__link {
  color: var(--black);
  cursor: pointer;
  background: none;
  border: none
}

.gNav__item .gNav__link .arrow {
  display: none
}

.gNav__item:hover .gNav__guide--hidden {
  visibility: visible;
  opacity: 1
}

.gNav__item .gNav--hidden {
  visibility: hidden;
  opacity: 0;
  background: var(--lightGrade);
  position: fixed;
  top: 80px;
  right: 0;
  width: 100vw;
  transition: 0.3s all
}

.gNav__flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 50px
}

.gNav__flex>div,
.gNav__flex>ul {
  width: 44%;
  list-style: none;
  max-width: 550px;
  margin-right: 40px
}

.gNav__image img {
  border-radius: 15px;
  margin: auto
}

.gNav__title {
  color: var(--navy)
}

.gNav__item.company .gNav--hidden ul {
  columns: 2
}

.gNav__item .gNav--hidden ul a {
  display: block;
  padding: 8px 0 8px 30px;
  text-decoration: none
}

.gNav__item.corporate {
  margin-right: 10px
}

.gNav__item.corporate .gNav__link::after {
  content: "";
  width: 6px;
  height: 6px;
  display: block;
  border-top: 1px solid var(--navy);
  border-right: 1px solid var(--navy);
  transform: rotate(135deg);
  position: absolute;
  top: 27px;
  right: -10px
}

.gNav__item .gNav__guide--hidden::after {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 10px 10px 10px;
  border-color: transparent transparent var(--black) transparent;
  position: absolute;
  top: -8px;
  left: 51%;
  transform: translateX(-50%)
}

.js-hidden .gNav__link.open+.gNav--hidden {
  visibility: visible;
  opacity: 1
}

.gNav__item .gNav--hidden ul a .arrow {
  top: 21px
}

.gNav--hidden .btn__close {
  position: absolute;
  width: 50px;
  height: 50px;
  top: 0;
  right: 0;
  background: none;
  border: none;
  cursor: pointer
}

.gNav--hidden .btn__close::after {
  content: "";
  width: 50px;
  height: 2px;
  background: var(--navy);
  transform: rotate(45deg);
  position: absolute;
  top: 28px;
  right: 10px
}

.gNav--hidden .btn__close::before {
  content: "";
  width: 50px;
  height: 2px;
  background: var(--navy);
  transform: rotate(-45deg);
  position: absolute;
  top: 28px;
  right: 10px
}

.gNav__link.btn.navy {
  width: 180px;
  padding: 10px 15px 10px 0;
  color: var(--white);
  border: 2px solid var(--white)
}

.gNav__link.btn.navy:hover {
  color: var(--navy);
  border: 2px solid var(--navy)
}

.gNav__link.btn.navy .arrow {
  display: block
}

.gNav__link.btn.navy .arrow::after {
  display: none
}

.gNav__link.btn.navy .arrow::before {
  top: 4px;
  transform: rotate(135deg);
  border-top: 2px solid var(--navy);
  border-right: 2px solid var(--navy)
}

.gNav__link.btn.navy:hover .arrow {
  border: 2px solid var(--navy)
}

.gNav__link.btn.navy:hover .arrow::before {
  border-top: 2px solid var(--white);
  border-right: 2px solid var(--white)
}

.gNav__item.entry .entryArea__btn li a {
  padding: 25px 10px 25px 50px
}

.gNav__item.entry .entryArea__btn li a .arrow {
  top: 50%;
  transform: translateY(-50%)
}

.gNav__item.entry .entryArea .inner {
  padding: 50px 0 50px 0
}

.footer {
  background: url(../image/footer-back.jpg) center center no-repeat;
  background-size: cover
}

.footer .inner {
  padding: 50px 0
}

.footer__logo img {
  width: 250px;
  display: inline-block;
  margin: 0 0 1px 0;
}

.footer__logo--text {
  color: var(--white);
  font-weight: 700;
  margin: 0 0 0 10px;
  font-size: 2rem;
  display: inline-block;
  transform: translateY(-4px)
}

.footer__nav {
  margin: 30px 0;
  list-style: none
}

.footer__nav a {
  color: var(--white);
  text-decoration: none;
  padding: 10px 0;
  display: inline-block
}

.footer__nav a.ico_outlink::after {
  background: url(../../assets/image/icon-out-white.png) no-repeat;
  background-size: 10px auto
}

.footer__nav button.dialog__btn.dialog__btn--footer {
  background: none;
  border: none;
  padding: 10px 0;
  color: var(--white);
  cursor: pointer;
  animation: unset;
}

.footer .dialog__container {
  padding: 4%
}

.footer .dialog__container .generalSect__middleTitle {
  padding: 0 0 30px 0
}

.footer .dialog__container .cardArea .card a {
  transition: 0.3s all
}

.footer .dialog__container .cardArea .card a:hover {
  filter: brightness(1.1)
}

.footer .dialog__container .cardArea .card a::after {
  content: none
}

.copyright {
  font-size: 1.3rem;
  color: var(--black)
}

.copyright .inner {
  padding: 15px 0
}

.generalSect__title {
  margin: 0 0 30px 0
}

.generalSect__title .heading .jp {
  font-size: 5rem;
  line-height: 1.2;
  color: var(--navy);
  font-weight: 700;
  padding: 0;
  font-family: "Roboto", "Sourcehan"
}

.generalSect__title .heading .en {
  font-family: "Roboto", sans-serif;
  letter-spacing: 1px;
  font-weight: 700;
  font-size: 3rem;
  line-height: 1.2;
  color: var(--navy);
  display: inline-block
}

.generalSect__title .heading .jp .text--large {
  font-size: 7rem;
  font-family: "Roboto", "Sourcehan"
}

.generalSect__title .heading .jp .text--middle {
  font-size: 5.5rem;
  font-family: "Roboto", "Sourcehan"
}

.generalSect__title .heading .jp .text--small {
  font-size: 4rem;
  font-family: "Roboto", "Sourcehan"
}

.generalSect__middleTitle {
  font-size: 3rem;
  font-weight: 700;
  padding: 16px 0;
  color: var(--navy);
  font-family: "Roboto", "Sourcehan";
  line-height: 1.3
}

.generalSect__smallTitle {
  font-size: 2rem;
  margin: 0 0 10px 0;
  color: var(--navy);
  font-family: "Roboto", "Sourcehan"
}

.cardArea {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0 0 0 0;
  column-gap: 40px
}

.cardArea .card {
  display: flex;
  flex-direction: column;
  margin-bottom: 40px
}

.cardArea.col2 .card {
  width: calc((100% - 40px * 1) / 2)
}

.cardArea.col3 .card {
  width: calc((100% - 40px * 2) / 3)
}

.cardArea.col4 .card {
  width: calc((100% - 40px * 3) / 4)
}

.cardArea.col5 .card {
  width: calc((100% - 40px * 4) / 5)
}

.cardArea.col2--shortLong .short.card {
  width: 30%
}

.cardArea.col2--shortLong .long.card {
  width: calc(70% - 40px)
}

.card>a {
  text-decoration: none;
  color: var(--black);
  display: flex;
  flex-direction: column;
  height: 100%
}

.card>a .card__textArea {
  flex-grow: 1
}

.card__image {
  position: relative;
  overflow: hidden;
  margin: 0 0 10px 0;
  border-radius: var(--radius)
}

.card__image::before {
  content: "";
  display: block;
  padding-top: 56.25%
}

.card__image img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: 0.3s all
}

.visible .card__image img {
  transform: translate(-50%, -50%) scale(1.4);
  transition: 0.3s all
}

.effect.visible .card__image img {
  transform: translate(-50%, -50%) scale(1)
}

.card a:hover .card__image img {
  width: 115%;
  height: 115%
}

.card__title {
  font-size: 2rem;
  line-height: calc(2rem * 1.3);
  margin-bottom: 10px;
  color: var(--navy);
  font-weight: 700;
  font-family: "Roboto", "Sourcehan"
}

.card__text {
  margin-bottom: 10px;
  color: var(--navy);
  margin: auto;
  position: relative
}

.card__btn {
  cursor: pointer;
  padding-top: 8px
}

.card a:hover .card__btn.btnText .arrow {
  transform: translate(12px, 7px)
}

.cardArea.flow .card {
  position: relative
}

.cardArea.flow .card .arrow {
  right: -28px
}

.card__circle {
  position: relative;
  margin: 80px 0 20px 0
}

.card__circle::before {
  content: "";
  height: 235px;
  width: 235px;
  border: 10px solid var(--blueLight);
  position: absolute;
  top: -35px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50%;
  z-index: 0
}

.card__no--line {
  color: var(--navy);
  font-size: 2rem;
  transform: translateX(-50%);
  position: absolute;
  top: -100px;
  left: calc(50% - 3rem)
}

.card__no--line img {
  height: 100px;
  display: inline-block;
  transform: translateY(20px)
}

.card__icon {
  position: relative;
  padding: 20px 0 10px 0
}

.card__icon img {
  margin: auto;
  max-height: 90px;
  max-width: 60px
}

.card__no--light {
  transform: translateX(-50%);
  position: absolute;
  top: -70px;
  left: calc(50% - 0rem)
}

.card__no--light .large {
  color: var(--blue);
  font-size: 9rem;
  font-weight: 700;
  background: var(--white);
  line-height: 1em;
  display: block
}

.card__speechBubble {
  width: 95%;
  padding: 0 12px;
  text-align: center;
  background: url(../image/back-dot.png);
  border: 2px solid var(--navy);
  border-radius: 30px;
  color: var(--navy);
  font-weight: 700;
  font-size: 1.6rem;
  position: relative;
  margin: 20px auto 20px auto;
  height: 60px
}

.card__speechBubble::before {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-right: 10px solid transparent;
  border-left: 10px solid transparent;
  border-top: 15px solid var(--navy);
  border-bottom: 0;
  position: absolute;
  bottom: -15px;
  left: 50%;
  transform: translateX(-50%)
}

.card__speechBubble::after {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-right: 10px solid transparent;
  border-left: 10px solid transparent;
  border-top: 15px solid var(--white);
  border-bottom: 0;
  position: absolute;
  bottom: -12px;
  left: 50%;
  transform: translateX(-50%)
}

.card__speechBubble .space1 {
  width: 40px;
  height: 12px;
  display: block;
  background: var(--white);
  position: absolute;
  top: -8px;
  left: 25px
}

.card__speechBubble .space2 {
  width: 40px;
  height: 12px;
  display: block;
  background: var(--white);
  position: absolute;
  bottom: -8px;
  right: 25px
}

.card__speechBubble .title--small {
  font-size: 1.8rem;
  font-weight: 700;
  z-index: 1;
  margin-bottom: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  font-family: "Roboto", "Sourcehan"
}

.card__no--left {
  font-size: 7rem;
  position: absolute;
  left: 20px;
  top: -50px;
  color: var(--blue);
  font-weight: 700;
  background: var(--white);
  line-height: 1em
}

.col2 .card__speechBubble {
  width: 90%;
  padding: 20px;
  border-radius: 40px
}

.card__person {
  position: absolute;
  right: 20px;
  top: -25px
}

.card__person img {
  max-width: 75px;
  max-height: 90px
}

.col2 .card__speechBubble+* {
  width: 90%;
  margin: auto
}

.card.back--blueLight {
  background: var(--blueLight);
  border-radius: var(--radius);
  position: relative;
  margin-top: 70px
}

.card.back--blueLight .card__icon {
  background: var(--white);
  width: 135px;
  height: 135px;
  display: block;
  border-radius: 50%;
  position: absolute;
  top: -70px;
  left: 50%;
  transform: translateX(-50%)
}

.card.back--blueLight .card__icon img {
  max-height: 100px;
  max-width: 80px
}

.card.back--blueLight .card__no--light {
  transform: translateX(0%);
  top: -45px;
  left: 10px
}

.card.back--blueLight .card__no--light .large {
  background: no-repeat
}

.card__blueLight {
  background: var(--blueLight);
  border-radius: var(--radius);
  padding: 20px 25px;
  display: flex;
  flex-grow: 1
}

.card.back--white {
  background: var(--white);
  border-radius: var(--radius);
  position: relative;
  padding: 70px 25px 25px 25px;
  margin-top: 70px
}

.card.back--white .card__icon {
  background: var(--blueLight);
  width: 120px;
  height: 120px;
  display: block;
  border-radius: 50%;
  position: absolute;
  top: -70px;
  left: 50%;
  transform: translateX(-50%)
}

.card.back--white .card__icon img {
  max-height: 80px;
  max-width: 50px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%)
}

.card.back--white .card__no--back {
  z-index: 0;
  transform: translate(-50%, -50%);
  top: calc(50% + 30px);
  left: 50%;
  position: absolute
}

.card.back--white .card__no--back .large {
  background: no-repeat;
  color: var(--blueLight);
  font-size: 14rem;
  font-weight: 700
}

.card.back--white .card__title {
  position: relative
}

.card.back--white .card__title+* {
  position: relative
}

.card.back--white .border--right {
  border-right: 1px solid var(--navy);
  position: absolute;
  height: 100%;
  top: 0;
  right: -8px
}

.personArea .cardArea .card {
  position: static !important
}

.personArea .cardArea .card .card__textArea {
  font-size: 1.4rem;
  padding: 0 20px
}

.personArea .icon {
  font-size: 1.4rem;
  padding: 3px 20px 1px 20px;
  text-align: center;
  border: 2px solid;
  border-radius: var(--radius);
  display: inline-block;
  margin: 15px 0
}

.personArea .d-01 .icon {
  border-color: var(--d-01);
  color: var(--d-01)
}

.personArea .d-02 .icon {
  border-color: var(--d-02);
  color: var(--d-02)
}

.personArea .d-03 .icon {
  border-color: var(--d-03);
  color: var(--d-03)
}

.personArea .d-04 .icon {
  border-color: var(--d-04);
  color: var(--d-04)
}

.personArea .d-05 .icon {
  border-color: var(--d-05);
  color: var(--d-05)
}

.personArea .d-06 .icon {
  border-color: var(--d-06);
  color: var(--d-06)
}

.personArea .d-07 .icon {
  border-color: var(--d-07);
  color: var(--d-07)
}
.personArea .d-08 .icon {
  border-color: var(--d-08);
  color: var(--d-08)
}
.personArea .d-09 .icon {
  border-color: var(--d-09);
  color: var(--d-09)
}
.personArea .d-10 .icon {
  border-color: var(--d-10);
  color: var(--d-10)
}
.personArea .d-11 .icon {
  border-color: var(--d-11);
  color: var(--d-11)
}

.personArea .cardArea .card .card__image {
  margin: 0;
  border-radius: var(--radius) var(--radius) 0 0
}

.personArea .cardArea .card a {
  background: var(--blueLight);
  border-radius: var(--radius)
}

.personArea .card__text {
  color: var(--black)
}

.personArea .cardArea .card .card__btn {
  cursor: pointer;
  padding: 0 30px 20px 0;
  text-align: right
}

.localnavArea {
  background: var(--blueLight);
  padding: 50px
}

.localnavArea .card {
  margin: 0
}

.localnavArea .btn {
  margin: auto
}

.localnavArea .btn .arrow--line {
  position: absolute;
  right: 11px;
  top: 1px;
  transform: rotate(90deg)
}

.portfolioArea {
  background: var(--grayLight);
  padding: 50px
}

.portfolio {
  display: grid;
  grid-template-areas: "areaA areaA areaB""areaA areaA areaC";
  grid-gap: 30px
}

.portfolio__card {
  background: var(--white)
}

.portfolio__card.areaA {
  grid-area: areaA
}

.portfolio__card.areaB {
  grid-area: areaB
}

.portfolio__card.areaC {
  grid-area: areaC
}

.portfolio__dllistArea .dllist dt:last-of-type,
.portfolio__dllistArea .dllist dd:last-of-type {
  border-bottom: none
}

.lList {
  margin: 0 0 20px 0
}

.lList li {
  padding: 3px
}

.lList li .lList li {
  padding-left: 1em;
  font-size: .8em
}

ul .lList {
  margin-bottom: 0 !important
}

.arrowList {
  list-style: none;
  padding-left: 0
}

.arrowList a,
.arrowList .pseudoLink {
  color: var(--navy);
  text-decoration: none;
  padding-top: 8px;
  padding-bottom: 5px;
  display: inline-block;
  position: relative;
  padding-left: 30px;
  line-height: 1.3
}

.arrowList a .arrow,
.arrowList .pseudoLink .arrow {
  position: absolute;
  display: inline-block;
  margin: 0 8px 0 0;
  background: var(--navy);
  transition: 0.3s all;
  top: 18px;
  left: 0
}

.arrowList a .arrow::before,
.arrowList .pseudoLink .arrow::before {
  border-top: 1px solid var(--white);
  border-right: 1px solid var(--white)
}

.arrowList a .arrow::after,
.arrowList .pseudoLink .arrow::after {
  background: var(--white)
}

.arrowList a:hover .arrow,
.arrowList a:hover .arrow {
  left: 5px
}

.dllistArea .cardArea {
  margin: 0
}

.dllistArea .cardArea .card {
  margin-bottom: 0
}

.dllist {
  display: flex;
  flex-wrap: wrap
}

.dllist dt,
.dllist dd {
  padding: 15px
}

.dllist dt {
  width: 12rem;
  font-size: 1.4rem;
  border-bottom: 1px solid var(--black)
}

.dllist dd {
  width: calc(100% - 12rem);
  border-bottom: 1px solid var(--gray)
}

.dllist dt {
  position: relative
}

.dllist dt span {
  display: block;
  position: absolute;
  top: 50%;
  transform: translateY(-50%)
}

.labellist {
  list-style: none;
  padding-left: 0
}

.labellist li span {
  background: var(--blueLightdark);
  padding: 4px 8px 3px 8px;
  margin: 5px 0;
  display: inline-block
}

.table {
  border-left: 1px solid var(--gray);
  border-bottom: 1px solid var(--gray);
  border-spacing: 0;
  width: 100%
}

.table th,
.table td {
  padding: 10px;
  border-top: 1px solid var(--gray);
  border-right: 1px solid var(--gray)
}

.table th {
  background: var(--blueLight);
  text-align: center
}

.flowArea>* {
  position: relative
}

.flowArea .arrow {
  top: 0;
  transform: translate(-50%, 0%) rotate(90deg);
  left: 50%;
  width: 40px;
  height: 40px
}

.flowArea .arrow::before {
  right: 7px;
  top: 1px;
  width: 20px;
  height: 20px
}

.flowArea .arrow::after {
  width: 30px
}

.interviewArea .cardArea {
  column-gap: 30px
}

.interviewArea__photo {
  overflow: hidden;
  max-width: 265px;
  width: 100%;
  border-radius: 50%;
  position: relative
}

.interviewArea__photo::before {
  content: "";
  display: block;
  padding-top: 100%
}

.interviewArea__photo img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  object-fit: cover;
  width: 100%;
  height: 100%
}

.interviewArea__speechBubble {
  background: var(--blueLight);
  border-radius: var(--radius);
  padding: 20px;
  position: relative
}

.interviewArea__speechBubble .txt {
  background: url(../image/back-dotwhite.png);
  padding: 20px;
  color: var(--navy);
  font-weight: 700
}

.interviewArea .cardArea.col2--shortLong .long.card {
  align-self: center
}

.interviewArea__speechBubble--leftArrow {
  width: 0;
  height: 0;
  border-style: solid;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-right: 20px solid var(--blueLight);
  border-left: 0;
  position: absolute;
  left: -20px;
  top: calc(50% - 17px)
}

.interviewArea__speechBubble--rightArrow {
  width: 0;
  height: 0;
  border-style: solid;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-left: 20px solid var(--blueLight);
  border-right: 0;
  position: absolute;
  right: -20px;
  top: calc(50% - 17px)
}

.news {
  margin: 40px 0 70px 0;
  border-bottom: 1px solid var(--gray)
}

.newsArea {
  position: relative
}

.newsArea__link dt,
.newsArea__link dd {
  padding: 35px 0
}

.newsArea__link dd {
  padding-right: 50px
}

.newsArea__link dt:last-of-type,
.newsArea__link dd:last-of-type {
  border-bottom: none
}

.newsArea::after {
  content: "";
  background: var(--white);
  width: 100%;
  height: 100%;
  display: block;
  top: -500px;
  left: 0;
  position: absolute;
  z-index: -1
}

.newsArea::before {
  content: "";
  background: var(--white);
  width: 100%;
  height: 100%;
  display: block;
  top: 0;
  left: 0;
  position: absolute;
  z-index: -1
}

.newsArea .back--blueLight {
  background: var(--blueLight);
  width: 70%;
  height: 64%;
  position: absolute;
  right: 0;
  top: 148px;
  border-radius: 15px 0 0 15px
}

.newsArea__link {
  position: relative
}

a.newsArea__link {
  text-decoration: none;
  color: var(--black)
}

a.newsArea__link .arrow {
  background: var(--navy);
  border: 2px solid var(--navy);
  transition: 0.3s all
}

a.newsArea__link:hover {
  color: var(--skyBlue)
}

a.newsArea__link:hover .arrow {
  transform: translate(10px, -50%)
}

a.newsArea__link .arrow::before {
  border-top: 1px solid var(--white);
  border-right: 1px solid var(--white)
}

a.newsArea__link .arrow::after {
  background: var(--white)
}

.entryArea {
  background: var(--lightGradeRtl)
}

.entryArea__flex {
  display: flex;
  flex-wrap: wrap
}

.entryArea__title {
  width: 35%;
  position: relative;
  align-self: center
}

.entryArea__title .generalSect__title .heading .jp {
  font-weight: 500;
  font-family: "Roboto", "Sourcehan"
}

.entryArea__title .generalSect__title .heading .jp .text--middle {
  font-size: 4rem;
  font-family: "Roboto", "Sourcehan"
}

.entryArea__title .imgPc {
  position: absolute;
  right: 20px;
  bottom: 50%;
  transform: translateY(50%)
}

.entryArea__cont {
  width: 65%
}
.entryArea__cont .cardArea.col2 .card {
    width: calc((100% - 40px * 2) / 3);
}
.entryArea__btn li a {
  display: block;
  border-bottom: 2px solid var(--navy);
  padding: 25px 10px 25px 50px;
  font-weight: 700;
  position: relative;
  z-index: 1
}

.entryArea__btn li a:hover {
  background: var(--white)
}

.entryArea__btn li a:hover::before {
  opacity: 1
}

.entryArea__btn li a .arrow {
  right: auto;
  left: 10px;
  background: var(--navy)
}

.entryArea__btn li a .arrow::after {
  background: var(--white)
}

.entryArea__btn li a .arrow::before {
  border-color: var(--white)
}

.entryArea__bnr {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  list-style: none;
  column-gap: 20px;
  background: var(--white);
  border-radius: 30px;
  padding: 20px
}

.entryArea__bnr a {
  position: relative;
  display: block;
  transition: 0.3s all;
  padding: 10px
}

.entryArea__bnr a:hover {
  opacity: .7
}

.costArea .card {
  padding: 30px;
  text-align: center;
  border-radius: var(--radius);
  color: var(--navy);
  font-weight: 700
}

.costArea .card .text--large {
  font-size: 3rem
}

.costArea .btn {
  max-width: 370px;
  margin: auto
}

.relatedArea {
  padding: 10px 0
}

.relatedArea__title {
  text-align: center;
  font-size: 3rem;
  font-weight: 700;
  border-bottom: 2px solid var(--navy);
  margin: 0 0 50px 0;
  font-family: "Roboto", "Sourcehan"
}

.contactArea {
  background: ar(--white)
}

.contactArea__flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: center
}

.contactArea__title,
.contactArea__btn {
  width: 40%;
  align-self: center
}

.contactArea__title.generalSect__title .heading .jp {
  font-size: 3rem;
  font-family: "Roboto", "Sourcehan"
}

.contactDtailArea {
  padding-bottom: 100px
}

.contactDtailArea .inner {
  background: var(--blueLight);
  border-radius: var(--radius);
  padding: 50px 20px;
  margin: 0 auto 0 auto
}

.contactDtailArea__title {
  text-align: center;
  color: var(--navy);
  font-family: "Roboto", "Sourcehan";
  margin-bottom: 30px
}

.contactDtailArea .btn.navy {
  margin: 30px auto;
  max-width: 400px
}

.contactDtailArea__address {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center
}

.contactDtailArea__address--mail {
  display: flex;
  flex-wrap: wrap;
  color: var(--navy);
  justify-content: end
}

.contactDtailArea__address--mail a {
  text-decoration: none
}

.contactDtailArea__address--mail dd {
  margin: -10px 0 0 10px;
  font-size: 2.6rem;
  font-weight: 700;
  justify-content: end;
  padding-right: 30px
}

.contactDtailArea__address--tel {
  width: 35%;
  color: var(--navy);
  border-left: 1px solid var(--navy);
  padding-left: 30px
}

.contactDtailArea__address--tel .text--large {
  font-size: 2.6rem;
  margin: 0 0 0 10px;
  font-weight: 700
}

.other__block {
  margin-bottom: 50px
}

.other__lead {
  margin-bottom: 50px
}

.counter .counter__block {
  counter-increment: title
}

.counter .counter__block .generalSect__middleTitle::before,
.counter .counter__block .generalSect__title .heading .jp::before {
  content: counter(title) ".";
  padding-right: 10px
}

.dialog {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.2s ease-out;
  opacity: 1;
  visibility: visible;
  z-index: 99
}

.dialog.__hidden {
  opacity: 0;
  visibility: hidden
}

.dialog__bglayer {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .75);
  z-index: -1
}

.dialog__container {
  background-color: var(--white);
  max-width: 800px;
  width: 90%;
  max-height: 100vh;
  padding: 2rem;
  border-radius: 30px
}

.dialog__btn--close {
  background: none;
  border: none;
  width: 60px;
  height: 60px;
  position: absolute;
  top: 60px;
  right: 60px;
  cursor: pointer
}

.dialog__btn--close::after {
  content: "";
  width: 2px;
  height: 60px;
  background: var(--white);
  transform: rotate(45deg);
  position: absolute;
  top: 0;
  left: 30px
}

.dialog__btn--close::before {
  content: "";
  width: 2px;
  height: 60px;
  background: var(--white);
  transform: rotate(-45deg);
  position: absolute;
  top: 0;
  left: 30px
}

[data-open-trigger]:focus,
[data-close-trigger]:focus {
  outline: 2px solid var(--skyBlue)
}
@media screen and (max-width:1350px) {
	.js-menuBtn.is-open+.gNav {
		transform: translateX(0%);
		width: 60%;
		background: var(--white);
	}

  .header {
    height: auto
  }

.header .header__title {
	padding: 0 10px 0 10px;
	width: 300px;
	align-self: start;
	position: fixed;
}

  .header__link img {
    width: 225px;
    margin: 0px 5px 0 0;
  }
.header__link--text {
    transform: translateY(-2px);
}
  .mainContents {
    overflow: hidden;
    padding: 80px 0 0 0
  }

  .menuBtn {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 30px;
    background-color: transparent;
    border: none;
    position: fixed;
    top: 15px;
    right: 15px;
    z-index: 10
  }

  .menuBtn:focus {
    outline: var(--blueLight) 3px dashed
  }

  .menuBtn__line {
    width: 40px;
    height: 2px;
    background-color: var(--skyBlue);
    transition: all 0.3s ease
  }

  .menuBtn__line:not(:last-child) {
    margin-bottom: 8px
  }

  .menuBtn.is-open .menuBtn__line:nth-child(1) {
    transform: translateY(10px) rotate(45deg)
  }

  .menuBtn.is-open .menuBtn__line:nth-child(2) {
    opacity: 0
  }

  .menuBtn.is-open .menuBtn__line:nth-child(3) {
    transform: translateY(-10px) rotate(-45deg)
  }

  .gNav {
    position: absolute;
    top: 0;
    right: 0;
    min-height: 100vh;
    width: 100%;
    margin-top: 0;
    overflow: hidden;
    transition: transform 0.3s all;
    transform: translateX(100%);
    padding-bottom: 50px;
  }

  .gNav__link {
    margin: 0
  }

  .gNav__link:hover::before,
  .gNav__link::before {
    display: none
  }

  .gNav__item {
    width: 100%;
    margin: 0 auto;
    text-align: center
  }

  .gNav__item .gNav--hidden {
    visibility: visible;
    opacity: 1;
    margin: 0 auto;
    background: var(--white);
    padding: 0 0 0 0;
    position: static;
    width: 100%;
    display: none
  }

  .gNav__item.contact {
    border: none;
    margin-top: 30px
  }

  .gNav__item.contact .btn {
    width: 50%;
    max-width: 320px
  }

  .gNav__list {
    display: block;
    margin: 70px 30px 30px 30px
  }

  .gNav__item {
    text-align: left;
    border-bottom: 1px solid var(--grayDark)
  }

  .gNav__flex {
    display: block;
    padding: 0
  }

  .gNav__image {
    display: none
  }

  .gNav__item .gNav--hidden ul a {
    display: block;
    color: var(--black);
    padding: 15px 0 15px 15px;
    text-decoration: none;
    font-size: 1.4rem;
    position: relative
  }

  .gNav__item .gNav--hidden ul a::before {
    content: "";
    background: var(--navy);
    height: 2px;
    width: 6px;
    display: block;
    position: absolute;
    top: calc(50% - 2px);
    left: 0
  }

  .gNav__item .gNav--hidden ul a .arrow {
    display: none
  }

  .gNav__item .gNav--hidden figure {
    display: none
  }

  .gNav__flex>div,
  .gNav__flex>ul {
    width: 100%
  }

  .gNav__flex>ul {
    padding-left: 20px
  }

  .gNav__item .gNav--hidden ul li.pgT40 {
    padding-top: 0 !important
  }

  .gNav__item.company {
    position: relative
  }

  .gNav__item.js-hidden .gNav__link::after {
    content: "";
    display: block;
    width: 15px;
    height: 15px;
    border-top: 2px solid var(--black);
    border-right: 2px solid var(--black);
    transform: rotate(135deg);
    position: absolute;
    right: 20px;
    top: 20px
  }

  .gNav__item.js-hidden .gNav__link.open::after {
    transform: rotate(-45deg)
  }

  .gNav__item.company .gNav--hidden ul {
    columns: 1
  }

  .gNav__item .gNav__link {
    padding: 20px;
    width: 100%;
    text-align: left
  }

  .btn__close {
    display: none
  }

  .gNav__item.contact .btn {
    margin: auto
  }

  .gNav__item.entry {
    border-bottom: none;
    margin-top: 30px
  }

  .gNav__item.entry .gNav__link.btn.navy {
    text-align: center;
    max-width: 300px;
    width: 80%
  }

  .gNav__item.entry .gNav__link.btn.navy::after {
    width: 100%;
    transform: rotate(0deg);
    height: 100%;
    top: 0;
    right: 0;
    border: 2px solid var(--navy)
  }

  .gNav__item.entry .entryArea {
    margin-top: 30px;
    border-radius: 30px
  }

  .gNav__item.entry .gNav__link.btn.navy.open .arrow::before {
    top: 7px;
    transform: rotate(-45deg)
  }

	
	
	
	
}/*1350*/
@media screen and (min-width:1024px) {
  .onlyPc {
    display: block
  }

  .onlySp {
    display: none
  }

  .onlyTb {
    display: none
  }
}/* 1024px */

@media screen and (max-width:1165px) {
  .header__title {
    padding: 1px 0 10px 10px;
    width: 270px
  }

  .header__link img {
    width: 207px;
    margin: 0 0 2px 0;
  }

  .header__link--text {
    font-size: 1.3rem;
    transform: translateY(-2px);
  }

  .gNav__link {
    font-size: 1.4rem
  }

  .gNav__item.contact .btn {
    font-size: 1.6rem;
    width: 170px
  }

  .gNav__list {
    gap: 10px;
  }

  .gNav__link.btn.navy {
    width: 160px;
  }
}

@media screen and (max-width:1023px) {
  .onlyPc {
    display: block
  }

  .onlyTb {
    display: block
  }

  .onlySp {
    display: none
  }

  body {
    font-size: 1.4rem
  }
	.header {
	width: 100%;
}
.header .header__title {
	padding: 5px 10px 0 10px;
}
.header__link--text {
	transform: translateY(-4px);
}
.is-open .header {
	background: none;
}
.is-open .header .header__title {
	display: none
}
.js-menuBtn.is-open+.gNav {
	width: 100%;
}
	
	
	
	
	
	
	.mainContents {
			padding: 60px 0 0 0;
	}
  .pageTitle {
    padding: 0;
    margin: 0;
    height: auto
  }

  .pageTitle .inner {
    padding: 50px 0
  }

  .pageTitle__title .heading .jp {
    font-size: 3rem;
    margin-bottom: 15px
  }

  .generalSect__title .heading .jp {
    font-size: 3rem
  }

  .generalSect__middleTitle {
    font-size: 2rem
  }

  .generalSect__title .heading .en {
    font-size: 1.2rem
  }

  .generalSect__smallTitle {
    font-size: 1.6rem
  }

  .pageTitle__title .heading .jp .text--large {
    font-size: 6rem
  }

  .pageTitle__title .heading .jp .text--small {
    font-size: 3rem
  }

  .pageTitle__title .heading .jp .text--middle {
    font-size: 4rem
  }

  .cardArea.col4 .card,
  .cardArea.col5 .card {
    width: calc((100% - 40px * 1) / 2)
  }

  .card__no--line {
    font-size: 1.6rem
  }

  .card__title {
    font-size: 1.6rem;
    line-height: 1.3;
    margin-bottom: 5px;
    position: relative
  }

  .card__circle::before {
    height: 180px;
    width: 180px
  }

  .card.blueLight .card__no--light {
    top: -30px;
    left: 0
  }

  .card__no--light .large {
    font-size: 5.5rem
  }

  .card__person img {
    max-width: 55px;
    max-height: 70px
  }

  .card__person {
    right: 10px;
    top: -15px
  }

  .card__blueLight ul {
    padding-left: 25px
  }

  .card__speechBubble {
    width: 100%
  }

  .card__speechBubble .title--small {
    padding: 0 10px 0 10px;
    font-size: 1.6rem
  }

  .card__no--light .large {
    font-size: 6rem
  }

  .card.blueLight {
    padding: 70px 15px 15px 15px
  }

  .card__no--left {
    font-size: 6rem
  }

  .personArea .icon {
    font-size: 1.2rem
  }

  .portfolioArea {
    padding: 30px
  }

  .portfolio {
    display: grid;
    grid-template-areas: "areaA areaA ""areaB areaC";
    grid-gap: 20px
  }

  .dllistArea .cardArea.col2 .dllist.card {
    margin-bottom: 0
  }

  .dllist dt.back--blueLight {
    width: 10rem
  }

  .dllist dt.back--blueLight+dd {
    width: calc(100% - 10rem)
  }

  .contactArea__address--mail,
  .contactArea__address--tel {
    width: 50%
  }

  .contactArea__address--tel .text--large,
  .contactArea__address--mail dd {
    font-size: 1.6rem;
    margin: 0 0 0 10px
  }

  .entryArea__title .imgPc {
    bottom: 0
  }
}

@media screen and (max-width:767px) {
  body {
    font-size: 1.4rem
  }

  .onlyPc {
    display: none
  }

  .onlyTb {
    display: none
  }

  .onlySp {
    display: block
  }

  .inner,
  .inner--narrow {
    padding: 40px 0 40px 0
  }

  .btn {
    margin: auto
  }

  .btn.square {
    padding: 20px 10px
  }

  .gNav__link::after {
    content: none
  }

  [data-gNav="content"].is-visible {
    transform: translateX(0)
  }

  .title--imgGradelight::before {
    height: 600px;
    background-position: 137px -103px
  }

  .btn {
    max-width: 250px
  }

  .back--imgGradelight {
    background-size: contain;
    background-position: 0 0
  }

  .pageTitle {
    padding: 0;
    margin: 0
  }

  .pageTitle .inner {
    padding: 50px 0
  }

  .pageTitle__text .heading .en {
    font-size: 6rem;
    letter-spacing: 7px
  }

  .pageTitle__title .heading .en.text--small {
    font-size: 4rem;
    letter-spacing: 2px;
    top: 0
  }

  .pageTitle__title .heading .jp {
    font-size: 3rem;
    margin-bottom: 0
  }

  .pageTitle__title .heading .jp .text--large {
    font-size: 5rem
  }

  .pageTitle__title .heading .jp .text--small {
    font-size: 2rem
  }

  .pageTitle__title .heading .jp .text--middle {
    font-size: 3rem
  }

  .pageTitle__title .heading .en {
    font-size: 2rem
  }

  .footer__logo {
    width: 100%
  }

  .footer__logo img {
    width: 180px;
    display: inline-block
  }

  .footer__nav {
    margin: 10px 0 0 0
  }

  .cardArea {
    column-gap: 0
  }

  .cardArea.col2 .card,
  .cardArea.col3 .card,
  .cardArea.col4 .card,
  .cardArea.col5 .card {
    width: 100%;
    margin-bottom: 40px
  }

  .sp-col2 {
    justify-content: space-between
  }

  .sp-col2 .card {
    width: calc((100% - 40px * 1) / 2) !important
  }

  .card__no--light .large {
    font-size: 7rem
  }

  .card__no--left {
    font-size: 7rem
  }

  .card.back--white .border--right {
    border-right: none
  }

  .personArea .icon {
    font-size: 1.2rem;
    padding: 3px 10px 1px 10px;
    margin: 10px 0 6px 0
  }

  .personArea .cardArea .card .card__btn {
    padding: 0 20px 15px 0
  }

  .personArea .cardArea .card .card__textArea {
    padding: 0 10px
  }

  .localnavArea {
    padding: 50px 50px 20px 50px
  }

  .interviewArea__speechBubble--leftArrow,
  .interviewArea__speechBubble--rightArrow {
    top: 10%
  }

  .interviewArea__speechBubble {
    padding: 10px
  }

  .interviewArea__speechBubble .txt {
    background: url(../image/back-dotwhite.png);
    padding: 10px;
    color: var(--navy);
    font-weight: 700
  }

  .news {
    padding: 0;
    margin: 40px 0
  }

  .newsArea .back--blueLight {
    width: 59%;
    height: 73%;
    top: 84px
  }

  .newsArea__link dt,
  .newsArea__link dd {
    width: 100%;
    padding: 15px 0
  }

  .newsArea__link dd {
    padding-right: 50px
  }

  .newsArea__link dt {
    padding-bottom: 0
  }

  .newsArea__link dd {
    padding-top: 0
  }

  .newsArea__link dd {
    border-top: none
  }

  .newsArea__link .dllist dt.yesline {
    border-bottom: none
  }

  a.newsArea__link {
    display: block
  }

  a.newsArea__link .arrow {
    right: 15px;
    left: auto
  }

  .entryArea__title {
    width: 100%
  }

  .entryArea__cont {
    width: 100%
  }

  .entryArea__title .imgPc {
    width: 90px
  }

  .contactArea__title,
  .contactArea__btn {
    width: 100%
  }

  .contactArea__title.generalSect__title .heading {
    text-align: center
  }

  .contactArea__title.generalSect__title .heading .jp {
    font-size: 2rem;
    text-align: center
  }

  .relatedArea .cardArea .card {
    margin-bottom: 20px
  }

  .dialog__btn--close {
    top: 10px;
    right: 10px
  }
	.entryArea__cont .cardArea.col2 .card {
		width: 100%;
	}
 .gNav__item .gNav--hidden ul.entryArea__bnr a::before {
		content: none;
	}
  .footer__logo--text {
    font-size: 1.4rem;
    transform: translateY(-3px);
    margin: 0 0 0 3px;
  }
}