@charset "UTF-8";

/* ==============================
  Header（ヘッダーまわり）
  - 位置・高さはブレークポイントで切替
  - PC: 120px / SP: 80px
============================== */
.wrapper{
    border-bottom: 1px #eee solid;
    margin: 0 0 0px 0;
}


.header {
  position: relative; /* 子要素の絶対配置の基準にする */
  background: #fff;
    margin: 60px auto 0;
  font-family: "Shippori Mincho", serif;
    color: #555;
}

@media (min-width: 768px) {
  .header {
      width: 940px;
    height: 60px;
  }
}

@media (max-width: 767px) {
  .header {
    height: 80px; /* SP高さ */
  }
}

/* ロゴ：縦中央配置。左右位置・サイズはレスポンシブで調整 */
.nav-titel {
  position: absolute;
  top: 60%;
  line-height: 1;
  transform: translateY(-50%);
    
}

@media (min-width: 768px) {
  .nav-titel {
    font-size: 40px;
    letter-spacing: 2px;
  }
}

@media (max-width: 767px) {
  .nav-titel {
    left: 20px;
    font-size: 25px;
    letter-spacing: 1px;
  }
}

.nav-titel a {
  display: inline-block;
  text-decoration: none;
  vertical-align: top;
    font-size: 23px;
    color: #555;
  font-weight:500;
}

/* ハンバーガー：SPのみ表示。アイコンはspanで描画しopen時に変形 */
.header-hamburger {
  position: absolute;
  right: 8.5px;
  top: 50%;
  width: 45px;
  height: 45px;
  transform: translateY(-50%);
}

@media (min-width: 768px) {
  .header-hamburger {
    display: none;
  }
}

.header-hamburger button {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  appearance: none;
  cursor: pointer;
}

/* 3本ライン */
.header-hamburger button > span {
  display: block;
  position: absolute;
  left: 11.5px;
  top: 22px;
  width: 22px;
  height: 1px;
  background: #4466ce;
}

/* 上・中・下のバーに変形トランジションを付与 */
.header-hamburger button > span:nth-child(1) {
  transform: translateY(-6px);
  transition: transform 350ms cubic-bezier(.215, .61, .355, 1);
}

.header-hamburger button > span:nth-child(2) {
  transition: opacity 350ms cubic-bezier(.215, .61, .355, 1);
}

.header-hamburger button > span:nth-child(3) {
  transform: translateY(6px);
  transition: transform 350ms cubic-bezier(.215, .61, .355, 1);
}

/* 開いた状態（×アイコン化） */
.header-hamburger button.is-open > span:nth-child(1) {
  transform: rotate(45deg) translateY(0px);
}

.header-hamburger button.is-open > span:nth-child(2) {
  opacity: 0;
}

.header-hamburger button.is-open > span:nth-child(3) {
  transform: rotate(-45deg) translateY(0px);
}

/* グローバルナビ：PCのみ表示。縦中央に配置 */
.header-nav {
  position: absolute;
  right: 0px;
  top: 50%;
  transform: translateY(-50%);
      display: flex;
}

@media (max-width: 767px) {
  .header-nav {
    display: none;
  }
}

.header-nav ul {
  list-style: none;
}

/* ナビ項目：下線アニメ（:before）でアクティブを演出 */
.header-nav ul li button,.nav_btn a {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0;
  box-sizing: border-box;
  padding: 25px;
  border: none;
  background: none;
  color: inherit;
  font: inherit;
  font-weight: 700;
  line-height: 1.4;
  text-decoration: none;
  cursor: pointer;
          appearance: none;
  transition: color 300ms;
  font-family: "Shippori Mincho", serif;
}

.header-nav ul li button::before,.nav_btn a::before {
  content: '';
  display: block;
  position: absolute;
  left: 25px;
  bottom: 17px;
  width: calc(100% - 50px);
  height: 1px;
  background: #b5e2f8;
  transform: scaleX(0);
  transition: transform 350ms cubic-bezier(.215, .61, .355, 1);
}

.header-nav ul li button:hover::before,
.header-nav ul li button:active::before,
.header-nav ul li button.is-active::before,
.nav_btn a:hover::before,
.nav_btn a:active::before{
  transform: scaleX(1);
}


/* ==============================
  Mega Menu（メガメニュー）
  - .mega.is-open でオーバーレイ／本体を表示
  - PC: ヘッダー直下に重ねる
  - SP: パディングを広めに
============================== */

/* 背景オーバーレイ（ぼかし＋半透明）。
   非表示時は visibility/opacity/pointer-events で無効化 */
.mega-overlay {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 100;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0);
    backdrop-filter: blur(5px);
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: visibility 0ms 400ms, opacity 400ms linear;
    color: #555;
}

/* メガメニュー本体コンテナ。高さアニメはJSで付与 */
.mega-container {
  position: absolute;
  left: 0;
  z-index: 100;
  width: 100%;
  box-sizing: border-box;
  background: #fff;
  overflow: hidden;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: visibility 0ms 400ms, opacity 400ms linear;
}


/* PCはヘッダー高に合わせる */
@media (min-width: 768px) {
  .mega-container {
    top: 120px;
  }
}

@media (max-width: 767px) {
  .mega-container {
    top: 140px;
    padding: 0 20px 40px;
      
  font-family: "Shippori Mincho", serif;
  }

}

/* セクション（各パネル）
   PCでは重ねて配置し、表示中だけ is-open で見せる */
@media (min-width: 768px) {
  .mega-section {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0ms 400ms, opacity 400ms linear;
  }
}

/* SPではアコーディオンの見切れ線 */
@media (max-width: 767px) {
  .mega-section {
    border-bottom: 1px solid #e1e1e1;
  }
}

/* 見出し（SPのみ表示、アコーディオンのトリガー） */
.mega-header {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
}

ul.mega-list{
    display: flex;
    align-items: center;
    justify-content: center;
}

ul.mega-list li{
    width: 30%;
    margin: 10px 10px;
    text-align: center;
    font-size: 0.75em;
}
ul.mega-list li a{
    text-decoration: none;
}

ul.mega-list li img{
    width: 30px;
    margin: 0 0 5px 0;
}
.mega-t{
    color: #53b8e1;
    font-size: 0.85em;
    margin: 0 0 10px 0;
    font-weight: bold;
    line-height: 1.2em;
    height: 2em;
}
.mega-text{
    height: 2em;
}
.mega-text span{
  font-family: "Shippori Mincho", serif;
    color: #555;
}


@media (min-width: 768px) {
  .mega-header {
    display: none;
  }
}

.mega-header button,.mega-header a{
  display: flex;
  align-items: center;
  position: relative;
  width: 100%;
  height: 65px;
  margin: 0;
  padding: 0 20px;
  border: none;
  background: none;
  font: inherit;
  text-align: left;
          appearance: none;
  cursor: pointer;
    text-decoration: none;
    color: #555;
}



/* 見出し右の＋（span疑似要素で線を描画） */
.mega-header button > span {
  display: block;
  position: absolute;
  right: 20px;
  top: 50%;
  width: 15px;
  height: 15px;
  margin-top: -7.5px;
  text-decoration: none;
    color: #555;
}

.mega-header button > span::before,
.mega-header button > span::after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 7px;
  width: 15px;
  height: 1px;
  background: #333;
}

.mega-header button > span::after {
  transform: rotate(90deg);
  transition: transform 350ms cubic-bezier(.215, .61, .355, 1);
}

/* 本文領域（PCは常に表示、SPは閉じておく） */
.mega-body {
  position: relative;
}

@media (min-width: 768px) {
  .mega-body {
    display: block !important;
  }
}

@media (max-width: 767px) {
  .mega-body {
    display: none;
    overflow: hidden;
  }
.mega-t{
    font-size: 0.85em;
    margin: 0 0 0px 0;
    line-height: 1.2em;
    height: 1em;
}
}

/* 内側余白：PCは左右パディング広め、SPは下マージンのみ */
@media (min-width: 768px) {
  .mega-inner {
    padding: 30px 50px 30px;
  }
}

@media (max-width: 767px) {
  .mega-inner {
    padding-bottom: 25px;
  }
}

/* SP: 先頭セクションの上線（見切れ調整） */
@media (max-width: 767px) {
  .mega-section:first-child {
    border-top: 1px solid #e1e1e1;
  }
}

/* 表示中のセクション。PCで前面に出し、フェードを有効化 */
.mega-section.is-open {
  position: relative;
  left: auto;
  top: auto;
  width: auto;
  visibility: visible;
  opacity: 1;
  transition: visibility 0ms, opacity 400ms linear;
}

/* アコーディオン展開時は＋を−に変形 */
.mega-section.is-expanded .mega-header button > span::after {
  transform: rotate(0deg);
}

/* メガメニュー表示状態：オーバーレイ／本体の表示をまとめてON */
.mega.is-open .mega-overlay,
.mega.is-open .mega-container {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition: visibility 0ms, opacity 400ms linear;
}

/* ==============================
  その他の装飾は本題外のため省略
============================== */


@media only screen and (max-width: 767px) {
  #white .brand_header {
    height: auto;
    background-image: none;
    background-repeat: no-repeat; }
    #white .brand_header .inner {
      width: 100%; }
    #white .brand_header h2 {
      width: 100%;
      padding: 15px 0 10px;
      border-bottom: 1px solid #eee; }
      #white .brand_header h2 img {
        width: 36%; }
    #white .brand_header .gnavi_sp {
	position: relative;
	width: 100%;
	margin-top: 1px;
}
      #white .brand_header .gnavi_sp ul {
        font-size: 1px;
        line-height: 1px;
        zoom: 1;
        width: 100%; }
        #white .brand_header .gnavi_sp ul:before, #white .brand_header .gnavi_sp ul:after {
          content: " ";
          display: table; }
        #white .brand_header .gnavi_sp ul:after {
          clear: both; }
      #white .brand_header .gnavi_sp li {
        width: 33.3%;
        float: left;
        display: inline;
        text-align: center; }
      #white .brand_header .gnavi_sp img {
        width: 100%; }
      #white .brand_header .gnavi_sp .main {
        position: relative;
        width: 100%;
        height: 33px; }
      #white .brand_header .gnavi_sp .menu_img {
        position: absolute;
        top: 0;
        left: 0; }
      #white .brand_header .gnavi_sp .smenu_ac {
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url("../images/common/ic_menu_acarrow_sp.png");
        background-repeat: no-repeat;
        background-position: bottom center; }
      #white .brand_header .gnavi_sp .sub {
        display: none;
        position: absolute;
        top: 36px;
        left: 0;
        background-color: #e2e2e2;
        zoom: 1;
        width: 100%; }
        #white .brand_header .gnavi_sp .sub:before, #white .brand_header .gnavi_sp .sub:after {
          content: " ";
          display: table; }
        #white .brand_header .gnavi_sp .sub:after {
          clear: both; }
        #white .brand_header .gnavi_sp .sub .sli {
	text-align: left;
	border-bottom: 1px solid #f2f2f2;
	box-sizing: border-box;
}
ul .menu2.js_pulldownMenu .sub {
	display: block;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
ul .menu2.js_pulldownMenu .sub .sli {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.sub .sli a {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.sli a span {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
        #white .brand_header .gnavi_sp .sub img {
          display: block;
          position: absolute;
          top: 50%;
          width:auto;
          height: 63px;
          margin-top: -34px;
          left: 20px; }
        #white .brand_header .gnavi_sp .sub a {
          vertical-align: baseline;
          font-size: 1.2rem;
          line-height: 1.4;
          color: #666;
          display: block;
          padding: 15px 50px 15px 60px;
          position: relative;
          text-decoration: none; }
          #white .brand_header .gnavi_sp .sub a span {
            display: inline-block;
            margin-top: 5px; }
        #white .brand_header .gnavi_sp .sub a:after {
          content: '';
          display: block;
          position: absolute;
          top: 50%;
          background-image: url("../images/common/bullet_s.png");
          background-repeat: no-repeat;
          background-size: 10px auto;
          width: 10px;
          height: 15px;
          margin-top: -5px;
          right: 18px; }
      #white .brand_header .gnavi_sp .menu2 .sub a {
          display: flex;
          flex-direction: column;
          justify-content: center;
        min-height: 80px; }
      #white .brand_header .gnavi_sp .menu2 .sub .sli {
	min-height: 80px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
      #white .brand_header .gnavi_sp .menu3 .sub .sli {
	min-height: auto;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
      #white .brand_header .gnavi_sp .menu3 .sub a {
	padding: 15px 50px 15px 20px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
} }