@charset "utf-8";
/* CSS Document */
/* ibm-plex-sans-jp-regular - japanese */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'IBM Plex Sans JP';
  font-style: normal;
  font-weight: 400;
  src: url('../../fonts/ibm-plex-sans-jp-v6-japanese-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* ibm-plex-sans-jp-500 - japanese */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'IBM Plex Sans JP';
  font-style: normal;
  font-weight: 500;
  src: url('../../fonts/ibm-plex-sans-jp-v6-japanese-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* ibm-plex-sans-jp-600 - japanese */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'IBM Plex Sans JP';
  font-style: normal;
  font-weight: 600;
  src: url('../../fonts/ibm-plex-sans-jp-v6-japanese-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* ibm-plex-sans-jp-700 - japanese */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'IBM Plex Sans JP';
  font-style: normal;
  font-weight: 700;
  src: url('../../fonts/ibm-plex-sans-jp-v6-japanese-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* figtree-regular - latin */
@font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Figtree';
	font-style: normal;
	font-weight: 400;
	src: url('../../fonts/figtree-v5-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* figtree-500 - latin */
  @font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Figtree';
	font-style: normal;
	font-weight: 500;
	src: url('../../fonts/figtree-v5-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* figtree-600 - latin */
  @font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Figtree';
	font-style: normal;
	font-weight: 600;
	src: url('../../fonts/figtree-v5-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* figtree-700 - latin */
  @font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Figtree';
	font-style: normal;
	font-weight: 700;
	src: url('../../fonts/figtree-v5-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }

/******* 全ページ共通 ********/
html {
  font-size: 62.5%;
  /*overflow-y: scroll;*/
  scroll-behavior: smooth;
  /* 日本語の禁則を厳密に処理するようにする（ブラウザ依存） */
  line-break: strict;     /* 値: auto | loose | normal | strict */
  overflow-wrap: normal;
}
body {
  font-family: 'IBM Plex Sans JP', "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "verdana", sans-serif;
  width: 100%;
  line-height: 1.6;
  font-size: 16px;
  font-size: 1.6rem; /*1rem = 10px*/
  color: #191919;
  background-color: #fefefe;
  letter-spacing: 0.04rem;
  -webkit-font-feature-settings: 'palt';
  font-feature-settings: 'palt';
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
/* IEはメイリオ指定*/
_:lang(x)::-ms-backdrop, body {
  font-family: "メイリオ", Meiryo, sans-serif;
}
p, a, h1, h2, h3, h4 {
  position: relative;
}
img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}
/* SVGリンク化 */
object {
  pointer-events: none;
}
input, button, textarea, select {
  -webkit-appearance: none;
  appearance: none;
}
a {
  -webkit-transition: 0.3s ease-out;
  transition: all .3s;
}
ol {
  list-style: decimal;
  margin-left: 1.8rem;
}
section p {
  padding-bottom: 0.8rem;
}
a:hover {
  cursor: pointer;
}
/* 英字フォント */
.en,time, .slide_text, #splash_text {
  font-family: 'Figtree', sans-serif;
  line-height: 1.4;
}
/* パソコンで見たときは"pc"のclassがついたタグが表示される */
.pc,.video_pc {
  display: block !important;
}
.sp,.video_sp {
  display: none !important;
}
/* スマートフォンで見たときは"sp"のclassがついたタグが表示される */
@media only screen and (max-width: 899px) {
  .pc {
    display: none !important;
  }
  .sp {
    display: block !important;
  }
}
@media only screen and (max-width: 720px) {
  .video_pc {
    display: none !important;
  }
  .video_sp {
    display: block !important;
  }
}
/*bodyにpageOnクラスがついたら出現*/
body.pageOn #container{
animation-name:PageAnimeOn;
animation-duration:1s;
animation-delay: 0.2s;
animation-fill-mode:forwards;
opacity: 0;
}

@keyframes PageAnimeOn{
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}

/* body 全体をフェード */
body {
  opacity: 0;
  transition: opacity 0.2s ease;
}

body.fade-in {
  opacity: 1;
}

body.fade-out {
  opacity: 0;
}

/* 中身はY方向にスライド */
.content {
  transform: translateY(8px);
  transition: transform 0.2s ease;
}

body.fade-in .content {
  transform: translateY(0);
}

/***** ボタン *****/
.btn,.btn_white,.btn_arrow  {
  border-radius: 40px;
  border: #AAAAAA 1px solid;
  font-weight: 500;
  padding: 1.6rem 6.8rem 1.3rem 2.8rem;
  position: relative;
  display: inline-block;
  text-decoration: none;
  overflow: hidden;
  margin-top: 4rem;
  letter-spacing: 0.1rem;
}
.btn_white {
  background: transparent;
  border: #fefefe 1px solid;
}
.arrow {
  position: absolute;
  top: 51%;
  right: 2.4rem;
  transform: translateY(-50%);
  transition: transform 0.3s;
}
.arrow::before{
  content: '';
  position: absolute;
  width: 3.6rem;
  height: 3.6rem;
  top: -.6rem;
  right: -1.2rem;
  border-radius: 100%;
  background-color: transparent;
  border: 1px solid #079DD5;
  transition: 0.4s;
}
.arrow::after {
  content: url(../img/arrow.svg);
  position: relative;
  transition: 0.4s;
}
.btn:hover{
  color: #079DD5;
  border: #079DD5 1px solid;
}
.btn_white:hover{
  color: #1766DE;
  border: #1766DE 1px solid;
  background: linear-gradient(to right, #fefefe, #fefefe);
}
.btn:hover .arrow::before{
  background-color: #079DD5;
}
.btn:hover .arrow::after{
  content: url(../img/arrow_white.svg);
}

/***** 全ページ共通 *****/
main{
  padding-bottom: 96vh;
}
.wrap,.wrap8{
  margin: 0 auto;
  position: relative;
}
.wrap,.wrap8 {
  width: 90%;
  max-width: 1538px;
}
.wrap1200{
  max-width: 1200px;
}
@media screen and (min-width:1538px) {
  .wrap8{
    width: 80%;
  }
}
@media screen and (max-width:1080px) {
  .wrap80{
    width: 90%;
  }
}
.img_outer {
  width: 100%;
}
a.text_link,.privacy-policy p a {
  color: #003F97;
  border-bottom:1px solid #003F97;
  transition: all .3s;
}
a.text_link:hover,.privacy-policy p a:hover{
  border-bottom:none;
}

/******* text_img_list *******/
.text_img_list_item{
  position: relative;
  margin-top: 12rem;
}
.img_outer img{
  width: 100%;
  object-fit: cover;
}

@media screen and (min-width:900px) {
  .text_img_list_item{
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 4vw;
  }
  .text_img_list_item .text_area{
    max-width: 660px;
  }
  .text_img_list_item .img_outer{
    max-width: 800px;
  }
  .list_item_right{
    order: 2;
  }
  .list_item_left{
    order: 1;
  }
}
@media screen and (max-width:899px) {
  .text_img_list_item .text_area{
    margin-top: 6rem;
  }
}

/******* img-overlay *******/
.img-overlay {
  position: relative;
  display: inline-block;
  overflow: hidden;
  cursor: pointer;
}
.img-overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.0);
  transition: background .3s ease;
}
.img-overlay:hover::after {
  background: rgba(0,0,0,.35); /* 濃さはお好みで */
}
.img-overlay .title_wrap {
  text-shadow: 0 1px 2px rgba(0,0,0,.3);
  z-index: 1; /* オーバーレイより上に表示 */
}

/******* flex_box *******/
@media screen and (min-width:900px) {
  .flex_box{
    display: flex;
    justify-content: space-between;
  }
  .flex_box .flex_item{
    width: 48%;
  }
}

/*** ul ***/
ul.text_list {
  margin: .8rem 0;
}
ul.text_list li {
  margin-left: 2rem;
}
ul.text_list li::before {
  content: '';
  display: inline-block;
  position: relative;
  left: -0.8rem;
  top: -0.4rem;
  width: .6rem;
  height: .2rem;
  margin-left: -0.6rem;
  background: #aaa;

}

/***** h1h2h3 *****/
.page-template-default main h2{
  margin-bottom: 2.8rem;
}
.page_hero h1 .jp {
  font-size: clamp(1.6rem, 2.2vw, 1.8rem);
}
.home h2,.page_hero h1{
  font-weight: 600;
}
.home h2{
  color: #032646;
}
.home h2 .en,.page_hero h1 .en{
  font-size: clamp(1.6rem, 2.4vw, 2.4rem);
  font-weight: 600;
  padding-left: 1.8rem;
}
.home h2 .jp,.page_hero h1 .jp{
  font-size: clamp(3.6rem, 4.4vw, 4.8rem);
}
.page_hero h1{
  color: #fefefe;
}
.home h2 .en::before,.page_hero h1 .en::before{
  content: '';
  display: inline-block;
  position: relative;
  left: -0.6vw;
  top: -0.3vw;
  width: 1rem;
  height: 1rem;
  margin-left: -0.6rem;
  background: #079DD5;
  border-radius: 100%;
}
.home h2{
  margin-bottom: 4rem;
}
@media screen and (max-width:699px) {
  .home h2 .en,.page_hero h1 .en{
    padding-left: 1.4rem;
  }
  .home h2 .en::before,.page_hero h1 .en::before{
    left: -0.9vw;
    top: -0.4vw;
    width: .6rem;
    height: .6rem;
    margin-left: -0.8rem;
  }
}
h2{
  font-size: clamp(2.4rem, 4.2vw, 3.2rem);
}
h2.white,h2.white .jp{
  color: #fefefe;
}
h2 .jp,.service_list_item .jp {
  font-size: clamp(2.8rem, 4.2vw, 3.6rem);
  font-weight: 600;
  line-height: 1.2;
}
h2 .en,.service_list_item .en {
  font-size: clamp(1.4rem, 1.6vw, 1.6rem);
  font-weight: 600;
}
.page_section h2{
  margin-bottom: 8rem;
}
h3 {
  font-size: clamp(2.4rem, 2.6vw, 2.8rem);
  font-weight: 500;
}
h4{
  font-size: clamp(1.8rem, 2.6vw, 2rem);
  font-weight: 500;
  margin-bottom: .8rem;
}

/***** vertical *****/
.vertical{
  writing-mode: vertical-rl;
  -webkit-writing-mode: vertical-rl; /* iOS Safari対応 */
  text-orientation: upright;
  letter-spacing: .3rem;
  position: relative;
}
.vertical_right,.vertical_left{
  background: #fefefe;
  color: #003F97;
  font-weight: 500;
  font-size: clamp(2.4rem, 3.4vw, 3.6rem);
  height: fit-content;
  margin-right: 1.2rem;
  padding: 2rem .8rem;
  writing-mode: vertical-rl;
  -webkit-writing-mode: vertical-rl;
  text-orientation: upright;
}

/***** video *****/
.video{
  width: 100%;
  height: auto;
}
.video.hero_video{
  filter: brightness(80%); /* 50%の明るさに設定 */
}
.video-bg {
  position: fixed;
  inset: 0;
  z-index: -1;              /* コンテンツの背面へ */
  overflow: hidden;
  background: #000;         /* 読み込み前の背景色 */
}
.video-bg video {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;        /* はみ出しOKでトリミング */
  object-position: center;  /* 中央を見せる */
}
/***** hero_video *****/
.content {
  position: relative;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .9) 20%, rgba(255, 255, 255, 0));
}
.video-box {
  overflow: hidden;
  width: 100%;
  object-fit: cover;
}

.overlay::before {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5); /* 黒色の50%透過 */
  z-index: 1; /* 動画の上に配置 */
}
.hero_video {
  position: fixed;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 101%;
  width: auto;
  height: auto;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  
}
.video-wrap {
  position: relative;
  display: inline-block;
  width: 100%;
}
.play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
  background: rgb(68, 68, 68, 1);
  border-radius: 50%;
  cursor: pointer;
}
.play-button::before {
  content: "";
  position: absolute;
  left: 32px;
  top: 22px;
  border-style: solid;
  border-width: 18px 0 18px 28px;
  border-color: transparent transparent transparent white;
}

/***** bg *****/
.bg_white{
  background-color: #fbfbfb;
}
.bg_white01{
  background-image: linear-gradient(180deg, rgba(251, 251, 251, .84), rgba(251, 251, 251, .9) 80%, rgba(251, 251, 251, 0));
}
.bg_white_pageBottom{
  background-image: linear-gradient(to bottom, rgba(251, 251, 251, 1),  rgba(251, 251, 251, 0) 70%);
  position: relative;
  top: -.1rem;
}
#strength .bg_blue01::before{
  content: '';
  position: absolute;
  width: 80vw;
  height: 77vw;
  background-image: url(../img/bg01.webp);
  background-position: bottom;
  background-size: contain;
  background-repeat: no-repeat;
  right: -4vw;
  opacity: .3;
  overflow: hidden;
  z-index: -1;
}
@media screen and (max-width:899px){
  #strength .bg_blue01::before{
    width: 100vw;
    height: 90vw;
    opacity: .3;
  }
}
.service_content h3::before {
  content: '';
  position: absolute;
  width: 60vw;
  height: 30vw;
  background-image: url(../img/bg01.webp);
  background-repeat: no-repeat;
  background-position: top;
  background-size: contain;
  top: -12vw;
  left: -14vw;
  opacity: .6;
  overflow: hidden;
  z-index: -1;
}
.profile_detail::before {
  content: '';
  position: absolute;
  width: 24vw;
  height: 20vw;
  background-image: url(../img/bg01.webp);
  background-repeat: no-repeat;
  background-position: top;
  background-size: contain;
  top: -8rem;
  left: -5vw;
  opacity: .5;
  overflow: hidden;
}
.bg_blue02::before{
  content:'';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  background-image: url(../img/bg02.webp);
  background-repeat: no-repeat;
  background-size: cover;
  opacity: .5;
}


/***** hamburger-menu *****/
@media screen and (min-width:1000px) {
  .menu_wrap,.menu{
    display: none;
  }
}
@media screen and (max-width:999px){
  .hamburger-menu {
    width: 60px;
    height: 60px;
    position: fixed;
    top: 0;
    right: 0;
    border: none;
    background: transparent;
    color: #918E79;
    font-size: 1.4rem;
    appearance: none;
    cursor: pointer;
    border-radius: 50%;
    z-index: 100;
  }
  .hamburger-menu__bar {
    display: inline-block;
    width: 36px;
    height: 2px;
    background: #918E79;
    position: absolute;
    left: 30px;
    transform: translateX(-50%);
    transition: .5s;
  }
  .hamburger-menu__bar:first-child {
    top: 20px;
  }
  .hamburger-menu__bar:last-child {
    top: 30px;
  }
  .hamburger-menu--open .hamburger-menu__bar {
    top: 50%;
  }
  .hamburger-menu--open .hamburger-menu__bar:first-child {
    transform: translateX(-50%) translateY(-50%) rotate(20deg);
  }
  .hamburger-menu--open .hamburger-menu__bar:last-child {
    transform: translateX(-50%) translateY(-50%) rotate(-20deg);
  }
  .hamburger-menu .en{
    text-align: center;
    position: relative;
    margin-top: 1.6rem;
    font-weight: 500;
  }
  body.is-menuOpen{
    overflow: hidden;
  }
  .menu {
    height: 100%;
    width: 100vw;
    background-color: #fbfbfb;
    color: #003F97;
    z-index: 30;
    position: fixed;
    top: 0;
    right: 0;
    padding-top: 6rem;
    padding-bottom: 8rem;
    display: none;
    overflow-x: hidden;
    overflow-y: scroll;
  }
  .menu .inner{
    width: 68vw;
    margin: 6rem auto 0;
    overflow: auto;
  }
  .menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
    border-top: 1px solid #003F97;
  }
  .menu ul li{
    border-bottom: 1px solid #003F97;  
  }
  .menu ul li a {
    text-decoration: none;
    display: block;
    padding: 2rem 0;
    transition: .5s;
  }
  .menu ul li a:hover{
    opacity: .6;
  }
}

/***** ヘッダー *****/
.header.headerColorScroll{
  background-color: #fbfbfb;
  transition: .5s;
}
.header.headerColorScroll .header_inner {
  color: #333;
  transition: color 0.3s ease-out;
}
.headerColorScroll .hamburger-menu__bar{
  background-color: #333;
}
#header {
  width: 100%;
  height: 60px;
  box-sizing: border-box;
  position: fixed;
  display: flex;
  color: #fefefe;
  top: 0;
  right: 0;
  z-index: 99;
}
#header .header_wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 90%;
}
header .logo_name{
  width: 20vw;
  min-width: 180px;
  margin-left: 2vw;
  padding-top: .4rem;
}
header .logo_name a{
  display: block;
}
header .logo_name svg{
  vertical-align: baseline;
}
@media screen and (max-width:999px) {
  #header .header_inner,.header_btn{
    display: none;
  }
  #header .header_wrap {
    width: calc( 100% - 64px );
  }
  .page-title-bar {
    position: sticky; /* ヘッダーに追従 */
    top: 10px; /* 固定ヘッダーの高さに合わせて調整 */
    z-index: 99;
  }
  .page-title-bar__title {
    position: relative;
    top: -.3rem;
    font-size: 14px;
    margin: 0;
    color: #003F97;
  }
  .privacy-policy .page-title-bar__title{
    font-size: 10px;
  }
  .page-title-bar__title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 98%;
    height: 1px;
    background:#003F97;
    transition: all .3s;
    transform: scale(1, 1);/*X方向0、Y方向1*/
    transform-origin: left top;/*左上基点*/
  }
}
@media screen and (min-width:1000px) {
  .page-title-bar {
    display: none;
  }
  #header .header_inner{
    position: fixed;
    right: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-right: 14rem;
  }
  .navigation {
    position: relative;
  }
  .nav_top .navigation {
    opacity: 1;
  }
  .g_nav {
    position: relative;
  }
  .g_nav ul {
    display: flex;
    justify-content: space-around;
  }
  .g_nav ul li a,.f_nav ul li a{
    display: block;
    position: relative;
    margin: 0 3px;
    padding: 0 6px;
    text-align: center;
    transition: all .4s;
  } 
  .g_nav li a,.f_nav li a{
  position: relative;
  }
  .g_nav li a::after,.f_nav li a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 4%;
    width: 90%;
    height: 1px;
    background:#aaa;
    transition: all .3s;
    transform: scale(0, 1);/*X方向0、Y方向1*/
    transform-origin: left top;/*左上基点*/
  }
  /*現在地とhoverの設定*/
  .g_nav li.current-menu-item a::after,
  .g_nav li a:hover::after,.f_nav li.current-menu-item a::after,
  .f_nav li a:hover::after {
    transform: scale(1, 1);/*X方向にスケール拡大*/
  }
  .g_nav li.current a::after,
  .g_nav li a:hover::after,.f_nav li.current a::after,
  .f_nav li a:hover::after {
    transform: scale(1, 1);/*X方向にスケール拡大*/
  }
  .header_btn a,#header .header_inner{
    font-size: 1.4rem;
    letter-spacing: 0.06rem;
  }
  .header_btn{
    position: fixed;
      z-index: 900;
      top: 1.8rem;
      right: 1rem;
      color: #fefefe;
  }
  .header_btn a{
    text-align: center;
    font-weight: 500;
    background: #003F97;
    border-radius: 40px;
    border: 1px solid transparent;
    padding: 1rem 1.6rem;
    transition: all .3s;
  }
  .header_btn a:hover{
    background: transparent;
    border: 1px solid #1766DE;
    color: #1766DE;
  }
  .g_nav li.current-menu-item,.about .page-about,.service .page-service,.staff .page-staff,.office .page-office,.recruit .page-recruit,.page-title-bar {
    color: #003F97;
  }
  .g_nav li.current-menu-item a::after,.about .g_nav li a.page-about::after,.service .g_nav li a.page-service::after,.staff .g_nav li a.page-staff::after,.office .g_nav li a.page-office::after,.recruit .g_nav li a.page-recruit::after,.page-title-bar__title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 4%;
    width: 90%;
    height: 1px;
    background:#003F97;
    transition: all .3s;
    transform: scale(1, 1);/*X方向0、Y方向1*/
    transform-origin: left top;/*左上基点*/
  }
}

/***** フッター *****/
footer {
  position: relative;
  background: #FBFBFB;
}
/*** contact_wrap ***/
.contact_wrap {
  padding: 8rem 5% 10rem;
  width: 100%;
  height: auto;
  position: relative;
  z-index: 2;
}
.home .contact_head h2,.contact_head h2{
  margin-bottom: clamp(2.8rem, 3.2vw, 3.6rem);
}
.contact_head h2{
  color: #003F97;
}
.contact_head h2 .en{
  padding-left: .2rem;
}
.contact_head h2 .en::before{
  content: none;
}
.contact_head img{
  width: 60%;
}
.contact_head .img_left{
  margin: 4.8rem 0 2.8rem 0;
  text-align: center;
} 
.contact_head .img_right{
  text-align: right;
} 
.contact_area{
  margin: 1.2rem auto 0;
  background: #EBF5F9;
  display: grid;
  place-items: center;
}
.contact_area .btn{
  width: 100%;
  border: #003F97 1px solid;
  color: #003F97;
  background: #fbfbfb;
  padding: 2.3rem 6.8rem 2rem 2.8rem;
  margin-bottom: 4rem;
  margin-top: 0;
}
.contact_area .btn:hover{
  border: #079DD5 1px solid;
  color: #079DD5;
}
.contact_tel_outer{
  padding: 0 1.2rem;
}
.contact_tel_text{
  font-size: clamp(1.4rem, 1.8vw, 1.6rem);
}  
.contact_tel_number{
  font-size: 3.6rem;
}
.contact_tel_number .tel_left{
  font-size: 2.8rem;
}
.contact_tel_text{
  font-size: 1.4rem;
}
.contact_tel_caption{
  text-align: right;
}
@media screen and (max-width:899px) {
  .contact_wrap{
    padding: 8rem 0 0;
  } 
  .contact_head{
    margin-bottom: 2.4rem;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
  }
  .contact_head .flex_box{
    top: 4rem;
    position: relative;
  }
  .contact_head .img_left{
    margin: 2.8rem 0 2.8rem 0;
  } 
  .contact_tel_wrap{
    padding: 8rem 5%;
  }
  .contact_mail{
    width: 100%;
  }

}
@media screen and (min-width:900px) {
  .contact_wrap{
    display: grid;
    grid-template-columns:1fr 1fr;
    column-gap: 2vw;
    margin-left: 5%;
    width: 95%;
  }
  .contact_head_text{
    max-width: 370px;
    margin-bottom: 4rem;
  }
  .contact_area{
    max-width: 440px;
  }
  .contact_head img{
    width: 16vw;
  }
  .contact_tel_wrap{
    padding: 1.2rem 3vw;
  }
}

/*** フッターナビ ***/
.footer_link {
  background: #032646;
  padding: 6rem 0;
  margin: 0 auto;
  position: relative;
  z-index: 2;
  color: #fefefe;
}
.footer_link_top{
  border-bottom: 1px solid #fbfbfb;
  margin-bottom: 4.8rem;
  padding-bottom: 4.8rem;
}
.footer_link .footer_logo {
  margin-bottom: 2rem;
}
.footer_link .footer_logo object {
  width: 24rem;
}
.footer_link .logo_name{
  min-width: 240px;
  margin-bottom: 2.4rem;
}
.footer_link .logo_name{
  display: block;
  width: fit-content;
  height: fit-content;
}
address {
  line-height: 2.8rem;
  margin-bottom: .4rem;
}
footer .f_nav_top{
  margin-bottom: 2rem;
}
footer .f_nav_page {
  display: grid;
  grid-template-columns:  repeat(2, 160px);
  column-gap: 2rem;
}
.f_nav ul li {
  margin-bottom: 1.2rem;
  line-height: 1.4;
}
.f_nav ul li a {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  transition: all .3s;
}
.footer_link_bottom nav{
  margin-bottom: 4rem;
}
.policy{
  font-size: 1.4rem;
  color: #ccc;
}
.copyright {
  padding: 2rem 0;
  font-size: 1.2rem;
  color: #032646;
  position: relative;
}
@media screen and (min-width:900px) {
  .footer_link_wrap{
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
  }
  .footer_link{
    width: calc(100% - 90px);
    position: relative;
  }
  .copyright{
    width: 90px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 1;
  }
  .copyright .wrap{
    width: 30%;
  }
  .copyright p{
    writing-mode: vertical-rl;
    display: inline-flex;
    font-size: 11px;
    letter-spacing: 0.01em;
    align-items: center;
  }
 .footer_link .info{
  display: flex;
  justify-content: flex-start
 }
 .add_wrap{
  margin-left: 6vw;
 }
 footer .f_nav_page {
  display: flex;
  }
  .policy{
    margin-left: 1rem;
  }
}

/*** hero ***/
.hero{
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, 1) 20%, rgba(0, 0, 0, 0));
  position: relative;
  z-index: -10;
}
.hero .img_outer{
  width: 100%;
}
.hero .inner{
  width: calc(100% - 10px);
}
/*** home_about ***/
#home_about{
  background-image: linear-gradient(180deg, rgba(251, 251, 251, 0), rgba(218, 241, 251, 1) 80%, rgba(251, 251, 251, 1));
  padding-bottom: 28rem;
}
#home_about h2{
  margin-bottom: 2rem;
}
#home_about .lead{
  font-size: clamp(2rem, 2.8vw, 2.4rem);
  font-weight: 500;
  margin-bottom: 2.8rem;
}
.home #home_about h2::before{
  left: calc(50% - 3.5rem);
  right: 50%;
}
#home_about .image, #home_about video{
  position: relative;
}
@media screen and (min-width:900px) {
  .home_about_wrap {
    width: 90%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    grid-column-gap: 3.6rem;
    grid-row-gap: 0px;
    }
    .home_about_wrap img{ grid-area: 2 / 1 / 4 / 3; }
    .home_about_wrap .vertical { grid-area: 1 / 2 / 3 / 3; }
    .home_about_wrap .text_area {
      grid-area: 2 / 3 / 4 / 4;
      min-width: 400px;
    }
    #home_about .btn{
      margin-top: 2.4rem;
    }
    #home_about .vertical_right,#home_about .vertical_left{
      position: relative;
      top: 0;
      right: 8vw;
      font-size: clamp(2.4rem, 2.4vw, 3.6rem);
    }
}
@media screen and (max-width:899px) {
  .home_about_wrap {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 1fr 24% 1fr;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    }
    .home_about_wrap img { grid-area: 1 / 1 / 2 / 3; }
    .home_about_wrap .vertical { grid-area: 1 / 2 / 3 / 3; }
    .home_about_wrap .text_area {
      grid-area: 3 / 1 / 4 / 3; 
      width: 90%;
      margin: 0 auto;
    }
   #home_about .vertical_right,#home_about .vertical_left{
     position: relative;
     top: 4em;
     right: 14vw;
     font-size: clamp(2.4rem, 4.8vw, 3.6rem);
   }
}
@media screen and (max-width:499px) {
  .home_about_wrap {
    grid-template-rows: 1fr 34% 1fr;
    }
}

/*** service_list ***/
.service_list {
  position: relative;
}
.service_list_item{
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  display: block;
  color: #fefefe;
  transition: filter .3s ease;
}
.service_list_item a{
  display: block;
  height: 36rem;
}
.service_list .title_wrap{
  position: absolute;
  bottom: 0;
  padding: 2rem;
}
.service_list .taxation-business .title_wrap,.service_list .inheritance-tax .title_wrap{
  right: 0;
}
.taxation-business .title_wrap div,.inheritance-tax .title_wrap div{
  text-align: right;
}
.service_list .title_wrap div{
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5);
}
.service_list .taxation-business{
  background-image: url(../../assets/img/taxation-business.webp);
}
.service_list .registration{
  background-image: url(../../assets/img/registration.webp);
}
.service_list .inheritance-tax{
  background-image: url(../../assets/img/inheritance-tax.webp);
}
.service_list .starting-business{
  background-image: url(../../assets/img/starting-business.webp);
}

@media screen and (min-width:900px) {
  .home #home_service h2{
    margin-bottom: 0;
  }
  .home_service_ttl{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    background: #fbfbfb;
    padding: 3.2rem;
  }
  .service_list{
    display: flex;
    top: 0;
    left: 0;
    flex-wrap: wrap;
    width: 100%;
    height: 100%;
    gap: 2px;
  }
  .service_list .service_list_item{
    flex: 0 0 calc(50% - 1px);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
  }
  .service_list .taxation-business{
    background-position: 90% 90%;
  }
  .service_list .taxation-business .title_wrap,.service_list .registration .title_wrap{
    bottom: 8rem;
  }
  .service_list .inheritance-tax .title_wrap,.service_list .starting-business .title_wrap{
    top: 4.8rem;
    bottom: 0;
  }
  .service_list_item .jp {
    font-size: clamp(2rem, 2.4vw, 3.6rem);
  }
}

/* overlay */
/*.overlay::after {
  position: fixed;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100vh;
  content: "";
  background: rgba(0, 0, 0, 0.2);
}*/

/*** infiniteslide ***/
.slide_text {
  position: relative;
}
.home .slide_text {
  top: -3rem;
}
.infiniteslide_en {
  position: relative;
  z-index: 3;
}
.infiniteslide_en img{
  margin: 0 2rem;
  width: 80%;
  max-width: 500px;
  min-width: 480px;
}

/*****表示アニメーション*****/
/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.fadeUpTrigger,.fadeInTrigger,.fadeLeftTrigger,.fadeRightTrigger {
  opacity: 0;
}
.fadeIn_up {
  opacity: 0;
  transform: translate3d(0, 0, 0);
  transition: 1s;
}
.fadeIn_up.is-show {
  transform: translate(0, 0);
  opacity: 1;
}
.fadeIn_left {
  opacity: 0;
  transform: translate(-50%, 0);
  transition: 2s;
}
.fadeIn_left.is-show {
  transform: translate(0, 0);
  opacity: 1;
}
/* アニメーションスタートの遅延時間を決めるCSS*/
.delay-time02 {
  animation-delay: 0.2s;
}
.delay-time03 {
  animation-delay: 0.4s;
}
.delay-time04 {
  animation-delay: 0.6s;
}
.delay-time05 {
  animation-delay: 0.8s;
}
.delay-time06 {
  animation-delay: 1s;
}
/*** 遅延してふわっと ***/
/* その場で */
.fadeIn {
  animation-name: fadeInAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  opacity: 0;
}
@keyframes fadeInAnime {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* 下から */
.fadeUp {
  animation-name: fadeUpAnime;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  opacity: 0;
}
@keyframes fadeUpAnime {
  from {
    opacity: 0;
    transform: translateY(60px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* 上から */
.fadeDown {
  animation-name: fadeDownAnime;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  opacity: 0;
}
@keyframes fadeDownAnime {
  from {
    opacity: 0;
    transform: translateY(-100px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* 左から */
.fadeLeft {
  animation-name: fadeLeftAnime;
  animation-duration: 0.8s;
  animation-fill-mode: forwards;
  opacity: 0;
}
@keyframes fadeLeftAnime {
  from {
    opacity: 0;
    transform: translateX(-100px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
/* 右から */
.fadeRight {
  animation-name: fadeRightAnime;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  opacity: 0;
}
@keyframes fadeRightAnime {
  from {
    opacity: 0;
    transform: translateX(100px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* loading */
.loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 100;
  background-color: #fbfbfb;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeOut 1.5s 2.5s forwards;
}
@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    visibility: hidden;
  }
}
#loading__logo ,.loading__logo{
  position: relative;
}
.loading__logo {
  opacity: 0;
  animation: logo_fade 2s 0.5s forwards;
  width: 280px;
}
@keyframes logo_fade {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  60% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
  }
}
@media screen and (max-width:600px){
  .loading__logo{
    top: -4rem;
  }
}