/* ========================================================================
ResetCss
======================================================================== */
/* 要素 フォントサイズ・マージン・パディングをリセット */
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin:0;
  padding:0;
  border:0;
  outline:0;
  font-size:100%;
  font-weight: normal;
  vertical-align:baseline;
  background:transparent;
}

/* 行の高=フォントサイズ */
body {
  line-height:1;
}

/* 新規追加要素をブロック要素化 */
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
  display:block;
}

/* ulのマーカー非表示 */
ol, ul {
  list-style: none;
}

/* 引用符の非表示 */
blockquote, q {
  quotes:none;
}

/* blockquote要素、q要素の前後にコンテンツ非表示 */
blockquote:before, blockquote:after,
q:before, q:after {
  content:'';
  content:none;
}

/* フォントサイズ　リセット フォントの縦方向 ベースライン揃え 点線削除 */
a {
  margin:0;
  padding:0;
  font-size:100%;
  vertical-align:baseline;
  background:transparent;
  outline: none;
  text-decoration: none;
}

/* ins要素 デフォルトセット 色を変える場合はここで変更 */
ins {
  background-color:#ff9;
  color:#000;
  text-decoration:none;
}

/* mark要素 デフォルトセット 色やフォントスタイルを変える場合はここで変更 */
mark {
  background-color:#ff9;
  color:#000;
  font-style:italic;
  font-weight:bold;
}

/* テキスト 打ち消し線 */
del {
  text-decoration: line-through;
}

/* IE　デフォルトで点線を下線表示設定　下線設定 マウスオーバー時 ヘルプカーソル表示可 */
abbr[title], dfn[title] {
  border-bottom:1px dotted;
  cursor:help;
}

/*　隣接するセルのボーダーを重ねて表示　*/
table {
  border-collapse:collapse;
  border-spacing:0;
}

/* 水平罫線デフォルトリセット */
hr {
  display:block;
  height:1px;
  border:0;
  border-top:1px solid #cccccc;
  margin:1em 0;
  padding:0;
}

/* 縦方向の揃え 中央揃え */
input, select {
  vertical-align:middle;
}

/* 画像を縦に並べた時に余白0 */
img {
  vertical-align: top;
  font-size: 0;
  line-height: 0;
}

/*box-sizingを全ブラウザに対応*/
*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

/*画像レスポンシブ*/
img {
  max-width: 100%;
  height: auto;
}

/*改行のweb際のBR高さバグ修正*/
br {
  line-height: inherit;
}


/*  レスポンシブ用
-------------------------------------------------------------*/
/*  pcのみ  */
.sp {display: none !important;}
.pc {display: block !important;}

/*  spのみ  */
@media screen and (max-width: 1199px) {
  .pc {display: none !important;}
  .sp {display: block !important;}
}

/*  共通
-------------------------------------------------------------*/
html {
  width: 100%;
  height: 100%;
  font-size: 62.5%;
}

@media screen and (max-width: 1400px) {
  html {
    font-size: 0.7142857vw;
  }
}

@media (max-width: 768px) {
  html { font-size: 2.6666667vw;}
}

body{
  font-family: "Zen Kaku Gothic New", sans-serif;
  background: none;
  height: 100%;
  position: relative;
  margin: 0px;
  font-size: 1.4rem;
  color: #000000;
}

a {transition: all .2s; -webkit-transition: all .2s; -moz-transition: all .2s; -ms-transition: all .2s; color: #383838;}
a:hover {opacity: 0.8; transition:.2s all;}
a img {transition:.2s all;}
a img:hover {opacity: 0.8; transition:.2s all;}
button {transition:.2s all;}
button:hover {opacity: 0.8; transition:.2s all;}
form {margin: 0;}

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

.inner {width: 100%; max-width: 120rem; margin: 0 auto; position: relative;}
.inner-mini {width: 100%; max-width: 100rem; margin: 0 auto; position: relative;}
.en {font-family: "Poppins", sans-serif;}


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

}

/* =================================================================
ヘッダー
=================================================================*/
header {width: 100%; height: 9rem; display: flex; justify-content: space-between; background: #fff; z-index: 10000; position: fixed;}
header .inner {max-width: 140rem; margin: auto; display: flex; align-items: center; justify-content: space-between; padding: 0 2.5rem 0 3rem; background: #fff;}
header .inner .logo {display: block; width: 12.2rem; height: 7.1rem;}
header .header-menu {display: flex; justify-content: flex-end; align-items: center;}
header .header-menu .menu {display: flex; align-items: center; gap: 3.5rem; margin-right: 2.2rem;}
header .header-menu .menu a {font-size: 1.8rem; color: #0A408A; font-weight: 500;}

header .header-menu .search-form {margin-right: 2.5rem;}
header .header-menu .search-form .form-wrap {width: 20.1rem; height: 3.7rem; position: relative;}
header .header-menu .search-form .form-wrap .form {height: 3.7rem; width: 100%; background: #EBEBEB; border-radius: 9999px; font-size: 1.4rem; padding: 0 5.4rem 0 1.4rem;}
header .header-menu .search-form .form-wrap .form-button {position: absolute; right: 1.8rem; top: 0; bottom: 0; margin: auto; background: none; border: 0; padding: 0; display: flex; align-items: center;}
header .header-menu .search-form .form-wrap .form-button img {width: 2.1rem; height: 2.2rem;}

header .header-menu .image-link {display: flex; align-items: center;}
header .header-menu .image-link .image-link_contact {margin-right: 2.5rem;}
header .header-menu .image-link .image-link_contact img {width: 3rem; height: 3rem;}
header .header-menu .image-link .image-link_member {margin-right: 2.2rem;}
header .header-menu .image-link .image-link_member img {width: 3.8rem; height: 3.8rem;}
header .header-menu .image-link .image-link_cart {position: relative;}
header .header-menu .image-link .image-link_cart img {width: 3.6rem; height: 3.5rem;}
header .header-menu .image-link .image-link_cart span {display: flex; justify-content: center; align-items: center; background: #CA1A48; width: 1.4rem; height: 1.4rem; border-radius: 100%; color: #fff; font-size: .8rem; position: absolute; right: 0; top: 0;}
header .header-menu .image-link_hum {display: none;}

header .header-menu .menu li {position: relative;}
header .header-menu .menu .list-child {display: none; position: absolute; top: 4rem; left: 0; background: #E6ECF3; padding: 1.8rem 1.6rem; z-index: 1000; white-space: nowrap;}
header .header-menu .menu .list-child a {display: block; font-size: 1.7rem; color: #0A408A; font-weight: 500;}
header .header-menu .menu li.is-open > .list-child {display: flex; flex-direction: column; align-items: flex-start; gap: 2rem;}

#head_submenu {display: none;}

@media screen and (max-width: 768px) {
  header {height: 6rem;}
  header.header {padding: 0; position: fixed;}
  header .inner {padding: 0 2.3rem 0 1.8rem;}
  header .inner .logo {width: 6.6rem; height: 3.9rem;}
  header .header-menu {width: auto; padding: 0 !important; position: static; margin-bottom: 0;}
  header .header-menu .menu {display: none;}
  header .header-menu .search-form {display: none;}
  header .header-menu .image-link .image-link_contact {margin-right: 1.5rem;}
  header .header-menu .image-link .image-link_member {margin-right: 1.5rem;}
  header .header-menu .image-link .image-link_member img {width: 3.5rem;}
  header .header-menu .image-link .image-link_cart {margin-right: 0;}
  header .header-menu .image-link .image-link_cart img {width: 3.3rem;}
  header .header-menu .image-link_hum {display: block; margin-left: 2.1rem;}

  #head_submenu { position: fixed; inset: 0; z-index: 10000; background: rgba(35, 24, 21, 0.3); opacity: 0; visibility: hidden; pointer-events: none; display: block; transition: opacity .35s ease, visibility .35s ease; }
  #head_submenu.open { opacity: 1; visibility: visible; pointer-events: auto; }
  #head_submenu .head { position: absolute; top: 0; right: 0; width: 84%; height: 100%; background: #fff; overflow-y: auto; padding: 1rem 2.5rem 2.9rem; box-sizing: border-box; transform: translateX(100%); transition: transform .35s ease; }
  #head_submenu.open .head { transform: translateX(0); }
  #head_submenu .close { display: flex; justify-content: flex-end; border-bottom: .1rem solid #EBEBEB; padding-bottom: 1.4rem; margin-bottom: 1.9rem;}

  #head_submenu .search-form {margin-bottom: 2.1rem;}
  #head_submenu .search-form .form-wrap {width: 100%; height: 3.7rem; position: relative;}
  #head_submenu .search-form .form-wrap .form {height: 3.7rem; width: 100%; background: #EBEBEB; border-radius: 9999px; font-size: 1.4rem; padding: 0 5.4rem 0 1.4rem;}
  #head_submenu .search-form .form-wrap .form-button {position: absolute; right: 1.8rem; top: 0; bottom: 0; margin: auto; background: none; border: 0; padding: 0; display: flex; align-items: center;}
  #head_submenu .search-form .form-wrap .form-button img {width: 2.1rem; height: 2.2rem;}

  #head_submenu .menu {display: flex; flex-direction: column; gap: 2.2rem; border-bottom: .1rem solid #EBEBEB; padding-bottom: 2.8rem;}
  #head_submenu .menu li {font-size: 1.6rem; font-weight: 500;}
  #head_submenu .menu li a {color: #0A408A; display: flex; justify-content: space-between; align-items: center; height: 2.3rem;}
  #head_submenu .menu li a:after {content: ""; display: block; width: .8rem; height: 1.4rem; background-size: cover; background-image: url(../images/common/icon-menu-arrow.svg);}

  #head_submenu .links {display: flex; flex-direction: column; gap: 2.2rem; margin-top: 2.1rem;}
  #head_submenu .links li a {color: #0A408A; font-size: 1.4rem; font-weight: 500;}

  #head_submenu .sns {display: flex; align-items: center; gap: 2.1rem; padding-left: .8rem; margin-top: 1.9rem;}
  #head_submenu .sns .youtube {width: 3.2rem; height: 3.2rem;}
  #head_submenu .sns .instagram {width: 2.8rem; height: 2.8rem;}
  #head_submenu .sns .x {width: 2.2rem; height: 2.2rem;}
}

/* =================================================================
フッター
=================================================================*/
footer {color: #0A408A; padding: 0 0 1.7rem;}
footer a {color: #0A408A;}
footer .inner {display: flex; justify-content: space-between; padding: 6.9rem 0 0;}
footer .logo {display: block; width: 15.1rem; height: 8.8rem; margin-bottom: 4rem;}
footer .sns {display: flex; align-items: center; gap: 2.1rem; padding-left: .8rem;}
footer .sns .youtube {width: 3.2rem; height: 3.2rem;}
footer .sns .instagram {width: 2.8rem; height: 2.8rem;}
footer .sns .x {width: 2.2rem; height: 2.2rem;}

footer .sns.sp-sns {display: none;}

footer .right-box {display: flex; justify-content: flex-end;}
footer .right-box ul {line-height: 2.1;}
footer .right-box h3 {font-size: 1.6rem; font-weight: bold; margin-bottom: 2.5rem;}
footer .right-box a {font-size: 1.6rem; font-weight: 500;}

footer .right-box .box:nth-child(1) {margin-right: 9.5rem;}
footer .right-box .box:nth-child(2) {margin-right: 10.3rem;}
footer .right-box .box:nth-child(3) {margin-right: 6.4rem;}
footer .right-box .box:nth-child(4) ul {padding-top: 4rem;}

footer .bottom {margin-top: 7rem;}
footer .bottom ul {display: flex; justify-content: center; margin-bottom: 2.9rem;}
footer .bottom ul li {font-size: 1.4rem; padding: 0 2rem;}
footer .bottom ul li:nth-child(2) {display: flex; justify-content: space-between; align-items: center; gap: 2rem; padding: 0;}
footer .bottom ul li:nth-child(2):before,
footer .bottom ul li:nth-child(2):after {content: ""; display: block; width: .1rem; height: 1.6rem; background: #0A408A;}

footer .copy {text-align: center; font-size: 1.1rem;}

@media screen and (max-width: 768px) {
  footer .inner {flex-direction: column; padding-top: 3.5rem;}
  footer .logo {width: 10.9rem; height: 6.4rem; margin: 0 auto 3rem;}
  footer .sns.pc-sns {display: none;}
  footer .sns.sp-sns {display: flex; justify-content: center; margin-bottom: 2.5rem; padding: 0;}
  footer .right-box {flex-wrap: wrap; justify-content: flex-start; padding: 0 2.5rem; gap: 2.5rem 0;}
  footer .right-box .box {width: calc((100%)/2);}
  footer .right-box .box:nth-child(1),
  footer .right-box .box:nth-child(2),
  footer .right-box .box:nth-child(3) {margin-right: 0;}
  footer .right-box h3 {margin-bottom: 1rem;}
  footer .right-box li {padding-left: 1.5rem; position: relative;}
  footer .right-box li:before {content: ""; display: block; width: .6rem; height: .1rem; background-color: #0A408A; position: absolute; left: .4rem; top: 0; bottom: 0; margin: auto;}
  footer .bottom ul {margin-bottom: .7rem;}
  footer .bottom ul li {font-size: 1rem; padding: 0 .7rem;}
  footer .bottom ul li a {display: flex; justify-content: center; align-items: center; height: 1.5rem;}
  footer .bottom ul li:nth-child(2):before,
  footer .bottom ul li:nth-child(2):after {height: 1.5rem;}
  footer .copy {font-size: 1.1rem;}
}

@media screen and (max-width: 768px) {
	.contents {padding-top: 6rem;}
	.breadcrumbs {padding: 1.5rem 0rem 0; font-size: 1.4rem;}
}