@charset "utf-8";
/* CSS Document */
/*===共通部分==============
====================================================================*/
:root {

/* ==========================
   BRAND COLOR
========================== */

/* メインブランド */
--color-primary: #004FB7;
--color-primary-hover: #005EDB;
--color-primary-dark: #003D8E;

/* CTA・Footer */
--color-footer: #004FB7;
--color-footer-light: #0A5FD3;


/* ==========================
   SERVICE GRADATION
========================== */

/* 7サービス */
--service-01: #004FB7;
--service-02: #1A61BE;
--service-03: #3573C6;
--service-04: #4E84CD;
--service-05: #6996D5;
--service-06: #84A8DC;
--service-07: #9FBAE4;


/* ==========================
   BACKGROUND
========================== */
/* bg-light */
--bg-light: #F8F9FF;

/* お問い合わせ */
--bg-contact: #F2F6FF;

/* セクション薄背景 */
--bg-soft: #FAFBFF;

/* カード */
--bg-card: #FFFFFF;

/* Hover */
--bg-hover: #F5F8FF;


/* ==========================
   TEXT
========================== */

--text-main: #111111;
--text-body: #333333;
--text-light: #666666;
--text-white: #FFFFFF;

/* 英字見出し */
--text-en: #86A9E6;

/* 背景英字 */
--text-bg: #EEF2FF;


/* ==========================
   BORDER / LINE
========================== */

--border-base: #DDE4F3;
--border-soft: #E9EEF8;

/* 円装飾 */
--border-circle: rgba(0,79,183,.12);

/* ガイドライン */
--line-guide: rgba(0,79,183,.08);


/* ==========================
   SHADOW
========================== */

--shadow-card:
0 10px 30px rgba(0,0,0,.05);

--shadow-hover:
0 16px 40px rgba(0,79,183,.12);


/* ==========================
   BUTTON
========================== */

--btn-bg: #004FB7;
--btn-hover: #005EDB;

--btn-outline:
1px solid rgba(0,79,183,.18);


/* ==========================
   LAYOUT
========================== */

--container: 1400px;
--container-narrow: 1200px;

--section-space: 140px;
--section-space-sp: 80px;

--radius-card: 16px;
--radius-pill: 999px;

}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
	font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Meiryo', sans-serif;
	color: #333;
	line-height: 1.7;
	background: #fff;
	font-weight: 400;	
	font-size: clamp(16px,2vw,18px);
	-webkit-font-smoothing: antialiased;/*アンチエイリアスを滑らかに*/
	-moz-osx-font-smoothing: grayscale;
}

p{
	letter-spacing: 0.1em;
}
h1,h2,h3,h4,h5,h6{
	font-weight: 600;
	line-height: 1.7;
}
a{
	text-decoration: none;
	color: #333;
	transition: .4s;
}
ul,ol{
	list-style: none;
	padding: 0;
}
main{
	width: 100%;
	height: 100%;
	overflow: hidden;
}

section {
	padding: clamp(100px,10vw,160px) 0;
	position: relative;
	z-index: 1;
}
table{
	width: 100%;
	table-layout: fixed;
	border-collapse: collapse;/*隙間なし*/
}

/*改行　-------*/
@media (min-width: 451px){
	br.only450{
		display: none;
	}
}

@media (max-width: 450px){
	br.not450{
		display: none;
	}
}

span.ib{
	display: inline-block!important;
}

/*PC・SP表示-----------------------*/
.sp{
	display: none;
}
.pc{
	display: block;
}

@media (max-width: 767px) {
	.sp{
		display: block;
	}
	.pc{
		display: none;
	}
}

/*幅・高さ調整-------*/
.inner{
	width: 96%;
	max-width: 1200px;
	margin: 0 auto;
	position: relative;
	z-index: 2;
}
.inner.wide{
	max-width: 1400px;
}
.inner.max{
	max-width: none;
}
.inner.w960{
	max-width: 960px;
}
/*高さ*/

.mg100{
	margin-bottom: 100px !important;
}
.mg80{
	margin-bottom: 80px !important;
}
.mg60{
	margin-bottom: 60px !important;
}
.mg50{
	margin-bottom: 50px !important;
}
.mg40{
	margin-bottom: 40px !important;
}
.mg30{
	margin-bottom: 30px !important;
}
.mg20{
	margin-bottom: 20px !important;
}
.mg10{
	margin-bottom: 10px !important;
}
.mg0{
	margin-bottom: 0 !important;
}

.pmg5 p{
	margin-bottom: 5px;
}
.pmg p{
	margin-bottom: 10px;
}
.pmg15 p{
	margin-bottom: 15px;
}
.pmg20 p{
	margin-bottom: 20px;
}
.pmg5 p:last-child,
.pmg p:last-child,
.pmg15 p:last-child,
.pmg20 p:last-child{
	margin-bottom: 0;
}

.center{
	text-align: center;
}
.t_left{
	text-align: left;
}
/* 画像　-------------------------- */
img{
	width: 100%;
	height: auto;
}
.obj-in{
	width: 100%;
	height: 100%;
	object-fit: contain
}
.obj-cov{
	width: 100%;
	height: 100%;
	object-fit: cover;	
}
.img_4-3{
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.img_16-9{
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

/*flexbox------------------------*/
.flexbox{
	display: flex;
	flex-wrap: wrap;
}
.f_jsb{
	justify-content: space-between;
}
.f_cent{
	justify-content: center;
}
.fac{
	align-items: center;
}

.comn2{
	width: 48%;
}
.comn3{
	width: calc( 100% / 3 - 20px);
}
.comn4{
	width: 35%;
}
.comn5{
	width: 62%;
}

.f_center{
	align-items: center;
}
@media (max-width: 767px){
	.flexbox{
		flex-direction: column;
	}
	.flexbox.rever{
		flex-direction: column-reverse;
	}
	.comn2, .comn3, .comn4, .comn5 {
		width: 100%;
		margin-bottom: 30px
	}
}
/* ============================================================
   アンカーリンクのオフセット（固定ヘッダー分）
============================================================ */
 
[id]{
  scroll-margin-top: 100px;
}
 
@media screen and (max-width: 767px){
  /* SPはヘッダーなし */
  [id]{
    scroll-margin-top: 20px;
  }
}
/* =========================================
   H1
========================================= */
.visually-hidden{
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
}


/*==背景=============================================*/
.bg-light{
	background: var(--bg-light);
}

.bg-text{
  position:absolute;
  left:0;
  bottom:-15px;
  font-size:min(12vw,240px);
  line-height:1;
  font-family:serif;
  font-weight:700;
  color:#e6eaff;
  letter-spacing:.02em;
  pointer-events:none;
	z-index: 0;
}
.bg-text.right{
  left:auto;
	right: 0;
	
}

/*==見出し=============================================*/
.sec-head{
  margin-bottom:70px;
}

.sec-head-en{
  font-size:14px;
  font-weight:700;
  letter-spacing:.18em;
  color:#0d58b8;
  margin-bottom:18px;
}
.sec-head-en span{
	position: relative;
	padding: 0 3.5rem;
	display: inline-block;
}
.sec-head-en span::before,
.sec-head-en span::after{
	position: absolute;
	content: "";
	width: 3rem;
	height: 1px;
	background: #0d58b8;
	top: 50%;
}
.sec-head-en span::before{
	left: 0;
}
.sec-head-en span::after{
	right: 0;
}
.sec-head-ja{
  font-size:clamp(28px,3.4vw,48px);
  line-height:1.35;
  font-weight:900;
  letter-spacing:.04em;
  color: #2a2f44;
  margin-bottom: 15px;
}
.sec-head-lead{
  font-size:20px;
  line-height:2;
  margin-bottom:36px;
  color:#999;
}
/*==btn=============================================*/
.btn-wrap{
  margin-top:50px;
}

.c-btn{
  position:relative;

  display:inline-flex;
  align-items:center;
  gap:30px;

  height:48px;

  padding:8px 22px;

  overflow:hidden;

  text-decoration:none;
}

/* 背景 */

.c-btn::before{
  content:"";

  position:absolute;
  top:50%;
  right:0;

  width:42px;
  height:42px;

  border-radius:100px;

  background:#5f8fdc;

  transform:
    translateY(-50%);

  transition:
    width .45s cubic-bezier(.22,1,.36,1);

  z-index:0;
}

/* hover */

.c-btn:hover::before{
  width:100%;
}

/* text */

.c-btn-text{
  position:relative;
  z-index:2;
  font-weight:700;

  color:#222;

  padding-left:4px;

  transition:color .35s;
}

.c-btn:hover .c-btn-text{
  color:#fff;
}

/* circle */

.c-btn-circle{
  position:relative;
  z-index:2;
font-size: 110%;
  color:#fff;
  display:flex;
	width:38px;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
	margin-right: -22px;
}

/* icon */

.c-btn-circle i{
  font-size:12px;
}
/* =========================================
HEADER
========================================= */

/* TOP 初期位置 */

.home #header{
  position:relative;
  width:100%;
  z-index:999;
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(12px);
  border-top:1px solid rgba(0,0,0,.06);
  transition:
    transform .5s cubic-bezier(.22,1,.36,1),
    background .3s;
	box-shadow: 0 0 8px rgba(0,0,0,.06);
}

/* スクロール後固定 */

.home #header.is-fixed{
  position:fixed;
  top:0;
  left: 0;	
  width:100%;
  border-top:none;
  border-bottom:1px solid rgba(0,0,0,.06);
}

/* 下層 */

.lower #header{
  position:fixed;
  top:0;
  left:0;

  width:100%;

  z-index:999;

  background:rgba(255,255,255,.96);

  backdrop-filter:blur(12px);

  border-bottom:1px solid rgba(0,0,0,.06);
}


/* inner */

.head-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:40px;
  margin:auto;
  min-height:74px;
}

/* =========================================
LEFT
========================================= */

.left-wrap{
  display:flex;
  align-items:center;
  min-width:0;
 margin: 0 3vw;
}

/* logo */

.hlogo{
  width:320px;
  flex-shrink:0;
  border-right:1px solid rgba(0,0,0,.08);
  padding-inline:24px;
}

.hlogo a{
  display:block;
}

.hlogo img{
  width:100%;
  height:auto;
  display:block;
}

/* =========================================
GNAVI
========================================= */

.gnavi{
  display:flex;
  align-items:center;
  height:74px;
}

.gnavi li{
  height:100%;
}

.gnavi li a{
  position:relative;
  overflow:hidden;

  display:flex;
  align-items:center;
  justify-content:center;

  height:100%;

  padding-inline:34px;

  color:#222;
  text-decoration:none;

  font-size:12px;
  font-weight:700;
  letter-spacing:.08em;

  transition:background .3s;
}

/* hover bg */

.gnavi li a::before{
  content:"";
  position:absolute;
  inset:0;
  background:#0d58b8;

  transform:translateY(100%);
  transition:transform .4s cubic-bezier(.22,1,.36,1);
  z-index:0;
}

.gnavi li:hover a::before,
.gnavi li.current a::before{
  transform:translateY(0);
}

/* text */

.gnavi li a span{
  position:absolute;
  left:50%;

  transition:
    transform .45s cubic-bezier(.22,1,.36,1),
    opacity .45s;

  transform:translateX(-50%);

  white-space:nowrap;

  z-index:2;
}

/* EN */

.gnavi li a span:nth-child(1){
  top:22px;
  color:#111;
}

/* JA */

.gnavi li a span:nth-child(2){
  top:22px;
  opacity:0;
  transform:
    translateX(-50%)
    translateY(120%);
  color:#fff;
}

/* hover */

.gnavi li:hover a span:nth-child(1),
.gnavi li.current a span:nth-child(1){
  opacity:0;

  transform:
    translateX(-50%)
    translateY(-120%);
}

.gnavi li:hover a span:nth-child(2),
.gnavi li.current a span:nth-child(2){
  opacity:1;

  transform:
    translateX(-50%)
    translateY(0);
}

/* =========================================
RIGHT
========================================= */

.right-wrap{
  display:flex;
  align-items:center;
  margin-left:auto;
}

/* tel */

.htel{
  padding-inline:34px;
  border-left:1px solid rgba(0,0,0,.08);
}

.tel-num{
  margin-bottom:4px;
}

.tel-num a{
  color:#222;
  text-decoration:none;

  font-size:24px;
  font-weight:700;
  letter-spacing:.04em;

  display:flex;
  align-items:center;
  gap:10px;

  transition:.3s;
}

.tel-num a:hover{
  color:#0d58b8;
}

.tel-num i{
  font-size:16px;
}

.note{
  font-size:11px;
  color:#666;
  letter-spacing:.08em;
    text-align: center;
    font-weight: 600;	
}

/* CTA */

.hcta{
  height:74px;
}

.hcta a{
  position:relative;

  width:100%;
  height:100%;

  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;

  background:#0d58b8;
  color:#fff;
  text-decoration:none;
  font-weight:700;
  letter-spacing:.08em;
  padding: 0 2rem;
  overflow:hidden;

  transition:.3s;
}

/* shine */

.hcta a::before{
  content:"";
  position:absolute;
  top:0;
  left:-120%;

  width:80%;
  height:100%;

  background:
    linear-gradient(
      120deg,
      transparent,
      rgba(255,255,255,.35),
      transparent
    );

  transform:skewX(-20deg);
}

.hcta a:hover::before{
  animation: shine 1s;
}

.hcta a:hover{
  background:#00439a;
}

@keyframes shine{
  to{
    left:140%;
  }
}

/* =========================================
SP
========================================= */
@media screen and (max-width:1200px){
	.hlogo{
		width:280px;
		padding-inline:18px;
	}	

	.hcta a .hcta-text{
		display:none;
	}	
	.left-wrap {
		margin: 0;
	}
}
/* タブレット中間：お問い合わせをアイコンのみに */
@media screen and (max-width:980px){
	.hlogo{
		width:230px;
	}	
	.head-inner {
		min-height: 60px;
	}
	.gnavi {
		height: 60px;
	}	
	.htel {
		padding-inline: 8px;	
	}
	.tel-num a {
		font-size: 18px;
		gap: 5px;	
	}
	.tel-num i {
		font-size: 13px;
	}	
	.note {
		font-size: 9px;
	}
  .hcta{
    height:60px;
    width:60px;
  }

  .hcta a{
    padding:0;
    gap:0;
    border-radius:0;
    height:100%;
  }

}

/* SP（767px以下）：ヘッダー丸ごと非表示 */
@media screen and (max-width:767px){

  #header{
    display:none !important;
  }

}

/* =========================================
CTA
========================================= */

.cta-sec{
  position:relative;
  overflow:hidden;
  background:#004fb7;
  color:#fff;
}

/* footerとの線 */

.cta-sec::after{
  content:"";

  position:absolute;

  left:50%;
  bottom:0;

  transform:translateX(-50%);

  width:min(1400px,90%);
  height:1px;

  background:rgba(255,255,255,.18);
}
.cta-sec::before{
  content:"";
  position:absolute;
  left:-150px;
  top: -20px;

  width:min(500px,30vw);
  height:min(500px,30vw);

  background:url("../img/cta_circle01.svg")no-repeat left / contain;
}


.cta-inner{
  width:min(1100px,92%);
  margin:auto;

  text-align:center;

  position:relative;
  z-index:2;
}

.cta-head-en{
  font-size:12px;
  letter-spacing:.18em;

  opacity:.7;

  margin-bottom:20px;
}

.cta-head-en span{
	position: relative;
	padding: 0 3.5rem;
	display: inline-block;
}
.cta-head-en span::before,
.cta-head-en span::after{
	position: absolute;
	content: "";
	width: 3rem;
	height: 1px;
	background: #fff;
	top: 50%;
}
.cta-head-en span::before{
	left: 0;
}
.cta-head-en span::after{
	right: 0;
}

.cta-title{
  font-size:clamp(24px,3vw,38px);
  line-height:1.6;
  font-weight:700;

  margin-bottom:50px;
}

/* wrap */

.cta-wrap{
  display:flex;
  justify-content:center;
  gap:24px;
}

/* box */

.cta-box{
  min-height:120px;

  border-radius:16px;

  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:14px;

  text-decoration:none;

  transition:
    transform .35s,
    background .35s;
}

/* tel */

.cta-box.tel{
  border:1px solid rgba(255,255,255,.4);

  color:#fff;
  width:58%;
  background:transparent;
}

/* mail */

.cta-box.mail{
  background:#fff;
  color:#0d58b8;
  width:42%;	
}

.cta-box:hover{
  transform:none;

  box-shadow:
    0 0 0 1px rgba(255,255,255,.25),
    0 0 40px rgba(255,255,255,.08);
}
/* text */

.cta-label{
  font-size:13px;
  letter-spacing:.08em;
}

.cta-main{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;

  font-size:34px;
  font-weight:700;
  line-height:1;
}

.cta-main i{
  font-size:22px;
}
.cta-bg-text{
  position:absolute;

  left:50%;
  bottom:-40px;

  transform:translateX(-50%);

  font-size:min(18vw,240px);

  font-weight:800;

  color:rgba(255,255,255,.04);

  letter-spacing:.06em;

  white-space:nowrap;

  pointer-events:none;
}
/* =========================================
FOOTER
========================================= */

#footer{
  position:relative;
  background:#004fb7;
  color:#fff;
  padding: 60px 0 30px;
	z-index: 2;
}

#footer::before{
  content:"";
  position:absolute;
  right:-150px;
  bottom: -20px;

  width:min(500px,30vw);
  height:min(500px,30vw);

  background:url("../img/cta_circle02.svg")no-repeat right / contain;
}


.footer-inner{
  width:min(1400px,92%);
  margin:auto;
  display:flex;
  justify-content:space-around;
  align-items:flex-end;
  gap:80px;
}

/* =========================================
LEFT
========================================= */

.footer-left{
  display:flex;
  flex-direction:column;
  gap:10px;
  align-items: center;	
}

.footer-logo{
  width:320px;
}

.footer-logo img{
  width:100%;
  display:block;
}

.footer-license{
  font-size:12px;
  line-height:1.8;

  color:rgba(255,255,255,.72);

  letter-spacing:.08em;
}

/* =========================================
RIGHT
========================================= */

.footer-company{
  font-size:18px;
  font-weight:700;

  margin-bottom:20px;

  letter-spacing:.08em;
}

.footer-address,
.footer-tel,
.footer-time{
  font-size:13px;
  line-height:2;

  color:rgba(255,255,255,.82);
}

/* =========================================
COPY
========================================= */

.copy{
  margin-top:50px;

  text-align:center;

  font-size:11px;
  letter-spacing:.08em;

  color:rgba(255,255,255,.55);
}

/* =========================================
SP
========================================= */

@media screen and (max-width:980px){

  #footer{
    padding:
      50px
      0
      24px;
  }

  .footer-inner{
    flex-direction:column;
    align-items:flex-start;
    gap:36px;
  }

  .footer-logo{
    width:220px;
  }

}
/* =========================================
SP FOOTER FIXED NAV
========================================= */

.sp-footer-nav,.sp-drawer{
  display:none;
}

@media screen and (max-width:767px){

  .sp-footer-nav{
    display:flex;
    position:fixed;
    bottom:0;
    left:0;
    width:100%;
    z-index:9999;

    transform:translateY(100%);
    transition:transform .4s cubic-bezier(.22,1,.36,1);
  }

  .sp-footer-nav.is-show{
    transform:translateY(0);
  }

  .sp-nav-item{
    flex:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:5px;

    height:64px;

    text-decoration:none;
    font-size:10px;
    font-weight:700;
    letter-spacing:.06em;

    transition:opacity .2s;
  }

  .sp-nav-item:active{
    opacity:.7;
  }

  .sp-nav-item i{
    font-size:20px;
  }

  .sp-nav-item.sp-tel{
    background:#0d58b8;
    color:#fff;
  }

  .sp-nav-item.sp-mail{
    background:#1a6ad4;
    color:#fff;
  }

  .sp-nav-item.sp-menu{
    background:#fff;
    color:#0d58b8;
    border-top:2px solid #0d58b8;
    cursor:pointer;
    border:none;
    border-top:2px solid #0d58b8;
    padding:0;
    font-family:inherit;
    font-size:10px;
    font-weight:700;
    letter-spacing:.06em;
  }

  /* SP ドロワーメニュー */
  .sp-drawer{
    position:fixed;
    inset:0;
    z-index:9998;

    display:flex;
    flex-direction:column;

    background:rgba(255,255,255,.97);
    backdrop-filter:blur(10px);

    transform:translateY(100%);
    transition:transform .45s cubic-bezier(.22,1,.36,1);
  }

  .sp-drawer.is-open{
    transform:translateY(0);
  }

  .sp-drawer-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:20px 24px;
    border-bottom:1px solid rgba(0,0,0,.08);
  }

  .sp-drawer-logo{
    width:160px;
  }

  .sp-drawer-close{
    background:none;
    border:none;
    cursor:pointer;
    font-size:24px;
    color:#333;
    line-height:1;
    padding:6px;
  }

  .sp-drawer-nav{
    flex:1;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:30px 30px 80px;
    gap:0;
  }

  .sp-drawer-nav li{
    border-bottom:1px solid rgba(0,0,0,.06);
  }

  .sp-drawer-nav li a{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:22px 8px;
    font-size:18px;
    font-weight:700;
    color:#111;
    letter-spacing:.04em;
    text-decoration:none;
  }

  .sp-drawer-nav li a::after{
    content:"";
    display:block;
    width:8px;
    height:8px;
    border-top:2px solid #0d58b8;
    border-right:2px solid #0d58b8;
    transform:rotate(45deg);
    flex-shrink:0;
  }

  .sp-drawer-nav li.current a{
    color:#0d58b8;
  }

  /* フッター追従ナビ分のpadding */
  #footer{
    padding-bottom:88px;
  }

}