@charset "UTF-8";

/* =Layout
-------------------------------------------------------------- */
#header {
  position: fixed;
  left: 0;
  top: 0;
	width: 100%;
	background-color: #fff;
  z-index: 999; }
#header #headerInner .gNav {
	justify-content: space-around;
}

/* PCではフローティングを非表示 */
.sPhoneHeader--float {
  display: none;
}

.logo {
	/* min-width: 483px; */
}
@media screen and (max-width: 1025px) {
	.logo {
		padding-right: 0;
		/* min-width: 300px; */
	}
}
#header .pc-nav {
    align-items: center;
    justify-content: center;
    margin-right: 0;
    height: 90px;
    line-height: 90px;
	column-gap: 5px;
}
@media screen and (min-width: 770px) and (max-width: 1025px) {
  #header .pc-nav {
    column-gap: clamp(0px,calc((100vw - 770px) / (1025 - 770) * 15),15px);
  }
}
	#header #headerInner ul li {
	  position: relative;
	  padding: 15px 5px;
	  line-height: 100%;
	  color: #525ba4;
	  cursor:pointer;
		/* text-align: center; */
		font-size: 1.4rem;
		font-weight: 500;
	}
		/* #header #headerInner ul li span {
			display: block;
			text-align: center;
			font-size: 1.1rem;
			letter-spacing: 0.05rem;
			font-weight: 400;
		} */
@media screen and (max-width: 1025px) {
	#header #headerInner ul {
	    justify-content: flex-end;		
	}
	#header #headerInner ul li {
		font-size: 1.2rem;
	}	
}
#header #headerInner ul li a:link,
#header #headerInner ul li a:hover,
#header #headerInner ul li a:visited {
	  color: #525ba4;
}
#header #headerInner input[type="text"] {
  height: 25px;
  line-height: 100%;
  width: 120px;
  position: relative; }
#header form#formbox {
  position: relative;
}
	#header #formbox i.fa.fa-search {
	  position: absolute;
	  right: 5px;
	  top: 50%;
	  margin-top: -7px;
	  color: #ccc;
	}
#header .formbox {
    padding-right: 20px;
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-end;
    align-content: center;
}
	#header .formbox .languages {
		margin-left: 10px;
	    width: 40px;
	}

@media screen and (max-width: 1025px) {
	#header .formbox {
		padding-left: 10px;
	}
	#header #headerInner .col-md-auto {
		padding-right: 5px;
	}
}

@media screen and (min-width: 770px) and (max-width: 1025px) {
	#header .formbox {
		padding-left: 0px;
	}
}

#header img.globe {
  width: 20px;
  margin-top: -3px;
  padding: 2px; }
#header dl.submenu_wrap {  
  display: none;
  position: absolute;
  top: 64px;
  width: 220px;
}
#header dl.submenu_wrap dt{
	font-weight: normal;	
}
#header dl.submenu_wrap dt:hover {
  /* text-decoration: underline; */
  cursor: pointer; }
#header dl.submenu_wrap dd a {
  display: block;
  line-height: 40px;
  height: 40px;
/*
  background-color: #fff;
	*/
    background-color: #233d87;
  border-bottom: solid 1px rgb(165, 177, 212);
  
  letter-spacing: 0;
  text-align: center; }
#header #headerInner ul li dl.submenu_wrap dd a:link,
#header #headerInner ul li dl.submenu_wrap dd a:hover,
#header #headerInner ul li dl.submenu_wrap dd a:visited {
	color: #fff;
}
#header dl.submenu_wrap dd a:hover {
/*  background-color: #efefef; */
  background-color: rgba(35, 61, 135,0.7); }

#footer {
  background-color: #233d87;
  color: #fff;
  padding: 1.5em 0; }
#footer a:link, #footer a:hover, #footer a:visited {
  color: #fff; }
#footer .footMenu li {
  padding: 0 10px;
font-size: 1.4rem;
   }
#footer h3 {
  margin-top: 2.0em;
  margin-bottom: 0.5em;
  font-size: 1.6rem; }
#footer p.address {
  font-size: 12px;
  line-height: 180%; }
@media screen and (max-width: 769px) {
	#footer h3 {
	  margin-top: 1.0em;
	}
    #footer p.address {
		margin-bottom: 0;
      font-size: 11px; }
}
@media screen and (max-width: 769px) {
  #footer p.address span.sp {
    display: inline-block; } }
#footer .copy {
  font-size: 10px;
  line-height: 180%; }
  @media screen and (max-width: 769px) {
    #footer .copy {
      font-size: 9px;
      word-break: break-all; } }
@media screen and (max-width: 769px) {
  #footer .copy .sp {
    display: inline-block; } }

/* =SP Layout
-------------------------------------------------------------- */
@media screen and (max-width: 769px) {
  .pc {
    display: none !important; }

  .sp {
    display: block; }

  img {
    max-width: 100%; }

  body {
    position: relative !important;
    left: 0 !important;
    /* padding-top: 60px; */
    padding-top: 0;
   }
  
  #header {
    position: relative;
  }

  #header.pc {
    display: none; }

  :root{
    --header-h: 60px;       /* ヘッダー高さ */
    --float-gap: 20px;      /* 上の余白 */
    --side-gap: 15px;       /* 左右の余白 */
    --nav-top: 60px;        /* JSが上書き。未フロート時の既定 */
  }

   /* ヘッダー */
  #header.sPhoneHeader {
    position: relative;
    top: 0; left: 0; right: 0;
    height: var(--header-h);
    z-index: 1000;
    transition: top .25s ease, left .25s ease, right .25s ease,
    background-color .2s ease, border-radius .2s ease, box-shadow .2s ease;
  }

  /* フローティング専用ヘッダー（固定位置・最初は非表示）*/
  .sPhoneHeader--float {
    display: block;
    position: fixed;
    top: var(--float-gap);
    left: var(--side-gap);
    right: var(--side-gap);
    background: rgba(255,255,255,0.9); /* 90%透過 */
    border-radius: 14px;
    box-shadow: 0 6px 24px rgba(0,0,0,.12);
    backdrop-filter: saturate(120%) blur(8px);
    width: calc(100% - var(--side-gap) * 2);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 1002;
  }

  .sPhoneHeader--float.is-visible{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .sPhoneHeader--float.is-visible{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  #header.sPhone {
    position: fixed;
    top: 0;
    display: block;
    width: 100%;
    height: 60px;
    background-color: transparent;
    background-color: #fff; }

  #header.sPhone.on {
    background-color: #fff; }

  #headerInner {
    height: 55px; }

  .logoArea {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 60px;
    line-height: 100%;
    width: calc(100% - 70px);
  }

  .logoArea img { /* SP ロゴ画像 */
    width: 200px;
  }

  .sPhoneHeader--float .logoArea { /* フローティングヘッダー */
    width: calc(100% - 60px);
  }

  .sPhoneHeader--float .header-title{ /* フローティングヘッダーのページタイトル */
    flex:1;
    text-align:left;
    font-weight: 500;
    font-size: 16px;
    line-height: 60px;
    padding-left: 20px;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
 
  .sPhoneHeader .header__icon-mail { /* SP メールアイコン */
    width: 25px;
    height: auto;
  }

  .sPhoneHeader .header__icon-search { /* SP 虫眼鏡アイコン */
    width: 25px;
    height: auto;
    margin-inline-start: 10px;
  }

  #navBtn,
  #navBtnFloat {
    display: inline-block;
    position: absolute;
    right: 10px;
    top: 13px;
    width: 35px;
    height: 35px;
    line-height: 35px;
    /* color: #19558b; */
    text-align: center;
    z-index: 1000; }

  #header.sPhone.on #navBtn,
  #navBtnFloat {
    color: #333; }

  #navBtn span:before,
  #navBtnFloat span:before{
    content: "\f0c9";
    color: #333;
    font-family: "FontAwesome";
    font-size: 36px; }

  #navBtn.closeBtn span:before,
  #navBtnFloat.closeBtn span:before {
    content: "\f00d";
    color: #333;
    font-family: "FontAwesome";
    font-size: 36px; }

  .sPhoneNav .menu {
    min-width: 200px;
  }

  /* メニュー表示中だけ body を固定して背面スクロールを止める */
  html.body-fixed,
  body.body-fixed {
    position: fixed;
    inset: 0;
    width: 100%;
    overflow: hidden;
    touch-action: none;
    overscroll-behavior: none; /* スクロールの伝播を遮断 */
  }

  /* iOSのUI高さ変化にも強い */
  @supports (height: 100dvh) {
    html.body-fixed,
    body.body-fixed { height: 100dvh; }
  }



  /* ドロワー */
  .sPhoneNav {
    /* display: none; */
    background-color: #fff;
    position: fixed;
    left: 0;
    right: 0;
    top: var(--nav-top);
    height: calc(100dvh - var(--nav-top, 60px));
    background: #fff;
    border-radius: 0;
    box-shadow: none;
    z-index: 100;
    width: 100%;
	  /* overflow-y: scroll; */
    padding: 0 30px 40px;
    transform: translateY(-120%); /* 100%より少し多めにして確実に外へ */
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
    /* 中身が長いときのスクロール */
    overflow-y: auto;
    display: block;
    -webkit-overflow-scrolling: touch; /* iOSの慣性スクロール */
    overscroll-behavior: contain;      /* 端でのバウンスが背面に伝わるのを防ぐ */
	}

  /* 中身が短くてスクロール不要のときに JS で付ける */
  .sPhoneNav.no-scroll {
    overflow: hidden;     /* 慣性スクロール領域を消す */
    touch-action: none;   /* 縦パンを完全無効（viewport へ伝播させない） */
  }

  .sPhoneNav.is-open{
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  //* フローティング時だけ角丸＆左右余白にしたい場合（任意） */
  .sPhoneHeader--float.is-visible ~ .sPhoneNav{
    left: var(--side-gap);
    right: var(--side-gap);
    border-radius: 14px;
    box-shadow: 0 18px 40px rgba(0,0,0,.16);
  }

  /* メニューが開いている時はロゴ・封筒・虫眼鏡アイコンを非表示にする */
  #header.sPhoneHeader.is-menu-open .logoArea img,
  #header.sPhoneHeader.is-menu-open .header__icon-mail,
  #header.sPhoneHeader.is-menu-open .header__icon-search,
  #headerFloat.sPhoneHeader.is-menu-open .logoArea img,
  #headerFloat.sPhoneHeader.is-menu-open .header-title,
  #headerFloat.sPhoneHeader.is-menu-open .header__icon-mail {
    opacity: 0;
    pointer-events: none; /* 触れないように */
    transition: opacity .2s ease;
  }

  .sPhoneNav ul {
    display: flex;
    flex-direction: column;
    row-gap: 20px;
	}

  .sPhoneNav ul li {
    font-size: 20px;
    font-weight: 700;
	}
	
   .sPhoneNav ul .header__mail-link {
     display: none;
	}

	nav.sPhoneNav ul li span {
		display: block;
		position: relative;
    	padding: 10px 0 10px 15px;
	}

	nav.sPhoneNav ul li span:after {
		content: "\f107";
		font-family: "FontAwesome";
		color: #18558b;
		position: absolute;
		right: 10px;
	}

  /* 子メニュー */
  .sPhoneNav ul.sub-menu { /* デフォルトは非表示 */
    display: none;
  }

  .sPhoneNav ul.sub-menu li {
    font-size: 20px;
    font-weight: 700;
  }

  /* 孫メニュー */
  .sPhoneNav ul.sub-menu ul.sub-menu {
    padding: 20px 0 20px 32px;
  }

  .sPhoneNav ul.sub-menu ul.sub-menu li {
    font-size: 18px;
    font-weight: 400;
  }

  /* 親メニューのいずれかを選択した時の制御 */
  /* 親メニューを非表示にする */
  .sPhoneNav.is-drilldown #main-nav > li.is-hidden-top {
    display: none;
  }

  /* 選択した親の子と孫を表示 */
  .sPhoneNav.is-drilldown .drill-host ul {
    display: flex;
    flex-direction: column;
    column-gap: 20px
  }

  /* リンクを持たないサブメニューのスタイル */
  .sPhoneNav ul.sub-menu li.menu-gray > a {
    color: #9fa0a0!important;
    pointer-events: none; /* クリック無効 */
    cursor: default;      /* マウスカーソルを通常に */
  }

  /* ボタンとメニューの間に下線を引く */
  .sPhoneNav .nav-back {
    border-bottom: 1px solid rgba(0,0,0,.08);
    margin-bottom: 8px;
  }

  /* メインメニューに戻るボタン */
  .sPhoneNav .nav-back button {
    display: block;
    width: 100%;
    padding: 0 8px 12px;
    background: none;
    border: 0;
    text-align: left;
    font-weight: 500;
    font-size: 20px;
    color: #333;
  }

	nav.sPhoneNav dl.submenu_wrap_sp {
		padding: 0;
		display: none;
	}
	nav.sPhoneNav dl.submenu_wrap_sp a {
		display: block;
		font-size: 1.3rem;
		padding: 5px 0 5px 30px;
		letter-spacing: 0;
	}

  nav.sPhoneNav dl.languages_wrap {
		margin-block-start: 60px;
    position: relative;
    
    &::before {
      content: "";
      position: absolute;
      width: 100%;
      height: 1px;
      background-color: #333;
      top: -40px;
      left: 0;
    }
	}

  nav.sPhoneNav dl.languages_wrap dd {
    display: flex;
    flex-direction: column;
    row-gap: 10px;
  }

	nav.sPhoneNav dl.languages_wrap a {
		display: block;
		/* padding: 0 15px; */
	}

  dl.languages_wrap img {
    width: 30px!important;
  }

  #header .sPhoneNav ul li a:link, #header .sPhoneNav ul li a:visited {
    color: #333; }

  #header dl.submenu_wrap dt {
    position: relative;
    height: 48px;
    line-height: 48px; }

  #header dl.submenu_wrap dd {
    position: static;
    top: unset;
    width: 100%;
  }

  #header .sPhoneNav ul li dl.submenu_wrap dd a {
    border-bottom: none;
    line-height: 100%;
    padding: 5px 1.5rem;
    text-align: left;
  }

  /* LI は初期非表示。*/
  .sPhoneNav > ul > li{
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .22s ease, transform .22s ease;
    will-change: opacity, transform;
  }

  /* is-open かつ is-shown を付与されたものから表示 */
  .sPhoneNav.is-open > ul > li.is-shown{
    opacity: 1;
    transform: none;
  }

  /* 閉じる直前は LI を即時非表示＆トランジション無効化 */
  .sPhoneNav.is-closing > ul > li{
    opacity: 0 !important;
    transform: translateY(10px) !important;
    transition: none !important;
    animation: none !important;
  }

  /* トップのSPヘッダーを一時的にfixed化するためのクラス */
  #header.sPhoneHeader.is-forced-fixed{
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1005;                 /* ドロワーより背面/前面は必要に応じて調整 */
    background: #fff;              /* 透過だと下が見えるので明示 */
    width: 100%;
  }

  /* レイアウトのジャンプ防止用スペーサー（必要時のみ表示） */
  #headerSpacer{ height: var(--header-h, 60px); display: none; }
  #headerSpacer.is-show{ display: block; }

  /* ドリルダウンでトップへ移したULを表示（inlineを上書きできるよう !important） */
  /* .sPhoneNav.is-drilldown ul.is-active-submenu{
    display: flex !important;
    flex-direction: column;
    gap: 20px;
  } */

  /* 生成LIは初期非表示 → JSで .is-shown を付ける */
  /* .sPhoneNav > ul > li{ opacity:0; transform:translateY(10px); transition:.22s; }
  .sPhoneNav.is-open > ul > li.is-shown{ opacity:1; transform:none; } */
}


/* common 2025
----------------------------------------------------------- */
#header #headerInner .col-md-auto {
    flex-grow: 2;
}
#header #headerInner input[type="text"].search_form {
    width: 100%;
}
#header form#formbox {
    position: relative;
    width: calc(100% - 50px);
}
#header .formbox .languages {
	position: relative;
    display: block;
    margin-left: 10px;
    width: 40px;
	cursor: pointer;
}
	dl.languages_wrap img {
		width: 22px;
		margin-right: 5px;
		border: solid 1px #ccc;
	}
	#header .formbox .languages dd {
		display: none;
		position: absolute;
		width: 40px;
		background-color: #fff;
		line-height: 100%;
		left: 0;
	}
	#header .formbox .languages dd a {
		padding: 3px;
		display: block;
	}