:root {
  --navy: #1B2B51;
  --navyLight: #365398;
  --blue: #CCD5E9;
  --blueLight: #EBF2F6;
  --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(180deg, #F5F7F9 0%, #E8EEF6 100%);
  --red: #F64E5A;
  --radius: 15px
}

*,
*::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(/assets/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(/assets/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(/assets/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(/assets/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(/assets/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(/assets/fonts/Sourcehan/SourceHanCodeJP.woff2) format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap
}

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

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

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

html {
  font-family: "Roboto", "NotoSansJP-Regular", "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: 100px 0 100px 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
}

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

.pageTitle .inner {
  padding: 50px 0;
  position: relative
}

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

.pageTitle__title .heading .en {
  color: var(--white);
  font-size: 11rem;
  font-weight: 100;
  position: absolute;
  top: calc(50% - 0.6em);
  left: 50px;
  z-index: -1;
  line-height: 1
}

.pageTitle__title .heading .en.text--small {
  font-size: 8rem
}

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

.pageTitle__lead {
  font-size: 2rem;
  color: var(--navy)
}

.pageTitle__list {
  color: var(--black);
  list-style: none;
  padding: 0
}

.pageTitle__list li span {
  background: var(--white);
  padding: 2px 8px 4px 8px;
  margin: 2px 0;
  display: inline-block
}

.pageTitle__title--narrow {
  padding: 0;
  margin: 0 0 50px 0;
  display: flex;
  align-items: center;
  height: 240px;
  position: relative
}

.pageTitle--narrow .inner {
  padding: 50px 0
}

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

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

.back--imgGradelight .breadcrumbs {
  background: none;
  position: relative;
  z-index: 1
}

.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
}

.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
}

.pgB80 {
  padding-bottom: 80px !important
}

.pgB90 {
  padding-bottom: 90px !important
}

.pgB100 {
  padding-bottom: 100px !important
}

.pgB110 {
  padding-bottom: 110px !important
}

.pgB120 {
  padding-bottom: 120px !important
}

.pgB130 {
  padding-bottom: 130px !important
}

.pgB140 {
  padding-bottom: 140px !important
}

.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
}

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.fujimic.com/"],
a.ico_outlink {
  position: relative
}

a[href^="http"]::after,
a[href^="//"]::after,
a[href^="https://www.fujimic.com/"]::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: 14px 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.fujimic.com/"]::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^="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
}

.title--small {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.2
}

.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--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--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
}

span.icon--linkOut {
  display: inline-block;
  width: 15px;
  height: 15px;
  margin: 0 5px;
  background: url(../../assets/image/icon-out-black.png) no-repeat;
  background-size: contain;
  transform: translateY(2px)
}

.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
}

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

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

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

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

.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.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 20px;
  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;
  display: block
}

.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)
}

.visible {
  clip-path: inset(0 100% 0 0);
  transition: 0.5s 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;
  left: 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: 20px;
  display: block;
  width: 274px;
  align-self: center
}

.header__title img {
  height: auto
}

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

.header__link:focus {
  outline: #0ff dashed 3px
}

.is-open .header {
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 100vh;
  background: var(--white)
}

.gNav__list {
  list-style: none;
  padding-left: 0;
  margin: 7px 20px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 36px;
  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;
  text-shadow: linear-gradient(90deg, #1b2b51 0%, #3e5da5 100%) 2px 0 10px
}

.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(--navy);
  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: 42%;
  list-style: none;
  padding: 0 10px
}

.gNav__title {
  color: var(--white);
  margin-bottom: 10px
}

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

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

.gNav__item .gNav--hidden ul a {
  display: block;
  color: var(--white);
  text-decoration: none
}

.gNav__item .gNav--hidden ul a .arrow {
  background: var(--white)
}

.gNav__item .gNav--hidden .arrowList a .arrow::before {
  border-top: 1px solid var(--navy);
  border-right: 1px solid var(--navy)
}

.gNav__item .gNav--hidden .arrowList a .arrow::after {
  background: var(--navy)
}

.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
}

.search .gNav__link::before {
  content: none
}

.gNav__item.search .gNav__link {
  display: block;
  margin: 0 5px 0 0;
  position: relative
}

.gNav__item.search .gNav__link img {
  width: 25px
}

.gNav__item.search .gNav__link::before {
  content: "";
  width: 50px;
  height: 50px;
  display: block;
  background: var(--blueLight);
  z-index: -1;
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  visibility: hidden;
  opacity: 0
}

.gNav__item.search .gNav__link:hover::before {
  visibility: visible;
  opacity: 1
}

.gNav__item.search .gNav__title {
  font-size: 2rem;
  color: var(--white);
  text-align: right;
  margin: 5px 0 0 0
}

.gNav__item.search input[type="text"] {
  background: var(--blueLight);
  border: none;
  padding: 10px;
  border-radius: 30px 0 0 30px;
  margin: 0 -4px 0 0
}

.gNav__item.search input#sbtn {
  background: url(../image/icon-search.png) center center / 25px 26px no-repeat var(--blueLight);
  border-radius: 0 30px 30px 0;
  color: var(--white);
  padding: 10px 35px 10px 30px;
  cursor: pointer;
  border: none
}

.gNav__item.contact .btn {
  margin: 0 20px 0 0;
  width: 200px
}

.btn__close {
  background: none;
  padding: 10px 0;
  text-align: center;
  font-size: 2rem;
  font-weight: 700;
  border: none;
  width: 50px;
  cursor: pointer;
  display: block;
  height: 50px;
  position: absolute;
  right: 10px;
  top: 10px;
  text-indent: -9999px
}

.btn__close::after {
  content: "";
  width: 50px;
  height: 2px;
  background: var(--white);
  transform: rotate(45deg);
  display: block;
  position: absolute;
  top: 20px;
  right: 0
}

.btn__close::before {
  content: "";
  width: 50px;
  height: 2px;
  background: var(--white);
  transform: rotate(-45deg);
  display: block;
  position: absolute;
  top: 20px;
  right: 0
}

.footer {
  background-color: var(--blueLight);
  color: var(--navy);
  padding: 10px 0
}

.footer .inner {
  padding: 50px 0
}

.footer__logo {
  width: 280px
}

.footer__logo img {
  height: auto
}

.footer__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 30px 0
}

.footer__nav ul {
  padding: 0;
  list-style: none
}

.footer__nav ul li a {
  display: block;
  color: var(--black);
  text-decoration: none;
  padding: 5px 0
}

.footer__nav--link {
  width: 20%
}

.footer__nav--img {
  width: 45%;
  display: flex;
  justify-content: space-around
}

.footer__nav--img img {
  margin: 10px;
  height: auto
}

.footer__nav--img li {
  align-self: center
}

.footer__nav--img li:nth-of-type(3) {
  width: 20%
}

.footer__nav--img li a::after {
  content: none
}

.copyright {
  padding: 20px;
  text-align: center;
  font-size: 1.4rem;
  background: var(--white)
}

.generalSect__title .heading .en {
  font-size: 1.4rem;
  font-family: "Roboto", sans-serif;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 1px
}

.generalSect__title .heading .jp {
  font-size: 4rem;
  font-weight: 700;
  padding: 0 0 20px 0;
  color: var(--navy);
  font-family: "Roboto", "Sourcehan"
}

.generalSect__middleTitle {
  font-size: 3rem;
  font-weight: 700;
  border-top: 1px solid var(--blue);
  padding: 16px 0;
  color: var(--navy);
  font-family: "Roboto", "Sourcehan"
}

.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: 60px
}

.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)
}

.cardArea.row1 .card {
  width: 100%;
  position: relative
}

.cardArea.row1 .card>* {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  flex-direction: row
}

.cardArea.row1 .card__image {
  width: 20%
}

.cardArea.row1 .card__textArea {
  width: 78%;
  flex-grow: 0;
  padding-bottom: 2em
}

.cardArea.row1 .card .btnText {
  position: absolute;
  bottom: 0;
  left: 22%
}

.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 15px 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: 2.3rem;
  line-height: calc(2.3rem * 1.3);
  margin-bottom: 10px;
  color: var(--navy);
  font-weight: 700;
  font-family: "Roboto", "Sourcehan";
  position: relative
}

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

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

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

.card a:hover .card__btn.btnText .arrow::before {
  border-color: var(--white)
}

.card a:hover .card__btn.btnText .arrow::after {
  background: var(--white)
}

.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: 23px 0 10px 0
}

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

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

.card__no--light .large {
  color: var(--blue);
  font-size: 8rem;
  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%
}

.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: 100px;
  height: 100px;
  display: block;
  border-radius: 50%;
  position: absolute;
  top: -70px;
  left: 50%;
  transform: translateX(-50%)
}

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

.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
}

.iframeArea {
  overflow: hidden;
  width: 100%;
  max-width: 690px;
  margin: 30px auto;
  position: relative
}

.iframeArea::before {
  content: "";
  padding-top: 55%;
  display: block
}

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

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

.localnavArea .card {
  margin: 0
}

.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 {
  color: var(--navy);
  text-decoration: none;
  padding-top: 10px;
  padding-bottom: 10px;
  display: inline-block;
  position: relative;
  padding-left: 40px
}

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

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

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

.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 {
  border-top: 1px solid var(--gray);
  padding: 23px 0 18px 0
}

.dllist dt:last-of-type,
.dllist dd:last-of-type {
  border-bottom: 1px solid var(--gray)
}

.dllist dt.yesline,
.dllist dd.yesline {
  border-bottom: 1px solid var(--gray)
}

.dllist dt.noline,
.dllist dd.noline {
  border-top: none
}

.dllist.card {
  flex-direction: row
}

.dllist dt {
  width: 12rem;
  font-size: 1.4rem;
  color: var(--grayDark)
}

.dllist dd {
  width: calc(100% - 12rem)
}

.dllist dd a {
  text-decoration: none
}

.dllist dt.back--blueLight {
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
  font-weight: 700;
  color: var(--navy);
  width: 20rem
}

.dllist dt.back--blueLight+dd {
  width: calc(100% - 20rem);
  padding-left: 20px
}

.dllist dt.back--grayLight {
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.4rem;
  font-weight: 700;
  width: 30rem;
  color: var(--black)
}

.dllist dt.back--grayLight+dd {
  width: calc(100% - 30rem);
  padding-left: 20px
}

.dllist .date {
  font-weight: 600
}

.indentList {
  padding-left: 0
}

.indentList li {
  position: relative;
  list-style: none;
  margin-left: 1em;
  text-indent: -1em
}

.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
}

.news a::after {
  display: none
}

.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 {
  display: block;
  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 .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)
}

.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 {
  background: var(--white)
}

.relatedArea .inner {
  padding: 50px 0
}

.relatedArea__title {
  text-align: center;
  font-size: 3rem;
  font-weight: 700;
  margin: 0 0 50px 0;
  color: var(--navy)
}

.relatedArea .btn.square {
  padding: 30px 35px 30px 10px;
  border-bottom: 2px solid var(--navy);
  background: var(--white);
  border-radius: 0
}

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

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

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

.contactArea .inner {
  padding: 50px 20px;
  margin: 0 auto 0 auto
}

.contactArea__title {
  text-align: center;
  color: var(--navy);
  font-family: "Roboto", "Sourcehan"
}

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

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

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

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

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

.contactArea__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
}

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

  .onlySp {
    display: none
  }

  .onlyTb {
    display: none
  }
}

@media screen and (max-width:1050px) {
  .gNav__item .gNav__link {
    font-size: 1.7rem
  }
}

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

  .onlyTb {
    display: block
  }

  .onlySp {
    display: none
  }

  body {
    font-size: 1.4rem
  }

  .js-menuBtn.is-open+.gNav {
    transform: translateX(0%)
  }

  .is-open .header .header__title {
    display: none
  }

  .header {
    height: auto
  }

  .header .header__title {
    padding: 15px;
    width: 187px
  }

  .mainContents {
    overflow: hidden;
    padding: 60px 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(--navy);
    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 ease;
    transform: translateX(100%);
    padding-bottom: 50px
  }

  .gNav__link {
    margin: 0
  }

  .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,
  .gNav__item.search {
    border: none
  }

  .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;
    text-decoration: none
  }

  .gNav__item .gNav--hidden ul a::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 2px;
    background: var(--navy);
    margin: 0 5px 4px 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 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.search {
    display: block
  }

  .search .gNav--hidden {
    display: block
  }

  .gNav__item.search .gNav__flex {
    display: flex
  }

  .gNav__item.search input[type="text"] {
    width: calc(100% - 60px);
    margin: 0;
    height: 50px;
    border-radius: 30px 0 0 30px;
    position: absolute;
    top: 30px;
    left: 0
  }

  .gNav__item.search input#sbtn {
    margin: 0;
    height: 50px;
    padding: 0;
    width: 60px;
    position: absolute;
    top: 30px;
    right: 0
  }

  .search__wrap {
    text-align: center;
    margin-top: 30px
  }

  .gNav__item.search .gNav__title {
    display: none
  }

  .gNav__item.search .gNav__link {
    display: none
  }

  .gNav__item.search.js-hidden::after {
    content: none
  }

  #search__wrap {
    margin: 30px auto;
    text-align: center;
    height: 50px;
    padding: 0
  }

  .gNav__item.contact .btn {
    margin: auto;
    width: 100%;
    max-width: 400px
  }

  .pageTitle {
    padding: 0;
    margin: 0 0 50px 0;
    height: auto
  }

  .pageTitle .inner {
    padding: 50px 0
  }

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

  .pageTitle__title .heading .en,
  .pageTitle__title .heading .en.text--small {
    font-size: 6rem;
    top: calc(50% - 0.7em)
  }

  .pageTitle__lead {
    font-size: 1.5rem
  }

  .pageTitle__list {
    font-size: 1.4rem
  }

  .pageTitle__title--narrow {
    height: auto
  }

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

  .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
  }

  .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__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: 5rem
  }

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

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

  .card.back--blueLight .card__no--light {
    top: -29px
  }

  .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: 15rem
  }

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

  .dllist dt.back--grayLight {
    width: 10em
  }

  .dllist dt.back--grayLight+dd {
    width: calc(100% - 10em);
    padding-left: 10px
  }

  .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
  }
}

@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
  }

  .arrow {
    right: 7px
  }

  .btn {
    margin: auto
  }

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

  .gNav__link::after {
    content: none
  }

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

  .spSmall {
    font-size: 1.1rem
  }

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

  .btn {
    max-width: 250px
  }

  .back--imgGradelight {
    background-size: 100% 55vh;
    background-position: 0 0
  }

  .pageTitle {
    padding: 0;
    margin: 0;
    min-height: 120px
  }

  .pageTitle .inner {
    padding: 30px 0 40px 0
  }

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

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

  .pageTitle__title--narrow {
    margin: 0 0 15px 0;
    min-height: 120px
  }

  .footer__logo {
    width: 180px
  }

  .footer__nav {
    margin: 30px 0 0 0
  }

  .footer__nav--link {
    width: 100%
  }

  .footer__nav--link {
    margin: 0
  }

  .footer__nav--img {
    width: 100%
  }

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

  .generalSect__middleTitle {
    font-size: 1.8rem;
    padding: 5px 0 16px 0
  }

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

  .generalSect__smallTitle {
    font-size: 1.6rem
  }

  .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: 6rem
  }

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

  .cardArea.row1 .card {
    width: 100%;
    position: relative
  }

  .cardArea.row1 .card>* {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    flex-direction: column
  }

  .cardArea.row1 .card__image {
    width: 100%
  }

  .cardArea.row1 .card__textArea {
    width: 100%;
    flex-grow: 1;
    padding-bottom: 0
  }

  .card__text {
    font-size: 1.3rem
  }

  .cardArea.row1 .card .btnText {
    position: static
  }

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

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

  .localnavArea .cardArea.col2.sp-col2 .card .btn {
    margin: 0;
    width: 100%;
    padding: 12px 20px 12px 10px
  }

  .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
  }

  .contactArea .btn.navy {
    margin: 30px auto;
    max-width: 100%;
    width: 100%
  }

  .contactArea__address--mail {
    width: 100%;
    justify-content: center
  }

  .contactArea__address--tel {
    width: 100%;
    justify-content: center;
    padding-left: 0;
    text-align: center;
    margin-top: 20px;
    border-left: none
  }

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