@charset "UTF-8";
/** ============================================================
* Reset
* ========================================================== */
/* http://meyerweb.com/eric/tools/css/reset/
  v2.0 | 20110126
  License: none (public domain)
*/

/* ▼▼▼ ここから修正・追加 ▼▼▼ */

/* ページ全体の横スクロールを防止 */
html {
  overflow-x: hidden;
}

body {
  /* bodyにもoverflow-xを追加して、より確実に横スクロールを防ぐ */
  overflow-x: hidden;
  
  /* 長い単語がはみ出すのを防ぐため、単語の途中でも改行を許可する */
  overflow-wrap: break-word;

  position: relative;
  color: var(--main-clr-bk);
  font-family: 'Noto Sans JP', Helvetica, Neue Haas Grotesk, Arial;
  font-size: max(var(--main-pc-18px), 12px);
}

/* ▲▲▲ ここまで修正・追加 ▲▲▲ */

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section,
main {
  display: block;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
  table-layout: fixed;
}
em {
  font-weight: bold;
}
input,textarea,button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

a:not(:focus-visible),
input:not(:focus-visible),
textarea:not(:focus-visible),
button:not(:focus-visible) {
  outline: none;
}

a:hover {
  color: #004b8b;
  text-decoration: none;
}


/** ============================================================
* 独自設定
* ========================================================== */
/* ======== PC or SP ======== */
.pcOnly-Show {
  display: block;
}
.pcOnly-Show-inline {
  display: inline;
}
.spOnly-Show {
  display: none;
}
/*SPだけ改行*/
.sp-lbs {
  display: none;
}
@media screen and (max-width: 736px) {
  .pcOnly-Show {
    display: none;
  }
  .spOnly-Show {
    display: block;
  }
  .spOnly-Show-inline {
    display: inline;
  }
  /*SPだけ改行*/
  .sp-lbs {
    display: block;
  }
}
/* ======== blockskip ======== */
#blockskip {
  overflow: hidden;
}
#blockskip a {
  text-align: center;
  display: block;
  overflow: hidden;
  color: #fff !important;
  background: #666;
  height: 0;
}
#blockskip a:focus {
  height: auto;
}
/* アクセシビリティ修正：スキップリンクのフォーカス表示 */
#blockskip a:focus {
  padding: 1em;
  outline: 3px solid var(--main-clr-bl);
  outline-offset: -3px;
}

/* ======== root ======== */
:root {
  --main-clr-wt: #ffffff;
  --main-clr-bk: #171D1C;
  --main-clr-gr: #D2D7DC;
  --main-clr-lgr: #F3F6FA;
  --main-clr-rd: #B33951;
  --main-clr-bl: #005AE0;
  --main-clr-lbl: #257AFF;

  /* PC設定 */
  --main-pc-26px: 1.35vw;
  --main-pc-24px: 1.25vw;
  --main-pc-20px: 1.1vw;
  --main-pc-18px: .938vw;
  --main-pc-16px: .833vw;
  --main-pc-14px: .729vw;
  --main-pc-12px: .625vw;

  /* SP設定 */
  --main-sp-24px: 6.15vw;
  --main-sp-22px: 5.64vw;
  --main-sp-20px: 5.13vw;
  --main-sp-18px: 4.62vw;
  --main-sp-15px: 3.85vw;
  --main-sp-14px: 3.59vw;
  --main-sp-13px: 3.33vw;
  --main-sp-12px: 3.08vw;
  --main-sp-11px: 2.8vw;

}

/*---------------------------------------
  共通設定
 ---------------------------------------*/
body {
  position: relative;
  color: var(--main-clr-bk);
  font-family: 'Noto Sans JP', Helvetica, Neue Haas Grotesk, Arial;
  font-size: max(var(--main-pc-18px), 12px);
}

*,
* ::before,
* ::after {
  box-sizing: border-box;
}
::placeholder {
  color: rgba(23, 29, 28, .68);
}
a {
  color: var(--main-clr-bk);
  text-decoration: none;
  transition: all .25s;
}
img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

/*基本的なコンテンツ幅*/
.contents-inner {
  width: 78.125vw;
  margin: 0 auto;
}
@media screen and (min-width: 1920px) {
  body {
    font-size: 18px;
  }
  .contents-inner {
    width: 1500px;
  }
}
@media screen and (max-width: 736px) {
  body {
    font-size: max(var(--main-sp-14px), 12px);
  }
  .contents-inner {
    width: 90vw;
  }
}


/* ページ移動先 */
.contents--top{
    display: block;
    padding-top: 140px;
    margin-top: -140px;
}
.contents--special{
    display: block;
    padding-top: 133px;
    margin-top: -133px;
}

/* コンテンツ余白 */
.contents--pd {
  padding: 1vw 0;
}
.contents--pdt {
  padding: 7.3vw 0 0;
}
@media screen and (max-width: 736px) {
  .contents--top{
    display: block;
    padding-top: 70px;
    margin-top: -70px;
  }
  .contents--special{
    display: block;
    padding-top: 67px;
    margin-top: -67px;
  }
  .contents--pd {
    padding: 20.5vw 0;
  }
  .contents--pdt {
    padding: 20.5vw 0 0;
  }
}

/*---------------------------------------
  テキスト系
 ---------------------------------------*/
/* フォントファミリー */
.font-family--inter {
  font-family: 'Inter', serif;
}

/* スクリーンリーダー用テキスト */
.txt-sr{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  -webkit-clip-path: inset(0px 0px 99.9% 99.9%);
  clip-path: inset(0px 0px 99.9% 99.9%);
  border: 0;
}


/*ボタン*/
.btn-squareArrow {
  position: relative;
  margin: 0 auto;
  display: flex;
  cursor: pointer;
  min-height: 2.65vw;
  padding: 0 1.1vw 0 3.4vw;
  align-items: center;
  font-size: max(var(--main-pc-18px), 12px);
  color: var(--main-clr-bl);
  font-weight: 900;
}
.btn-squareArrow img:not(.icon-blank) {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 2.65vw;
  height: 2.65vw;
  display: block;
  -webkit-transition: .4s ease-in-out;
  transition: .4s ease-in-out;
}
.link-block .btn-squareArrow {
  min-height: 3.125vw;
  padding: 0 0 0 4.17vw;
  font-size: max(var(--main-pc-20px), 12px);
  letter-spacing: 0.4px;
}
.link-block .btn-squareArrow img:not(.icon-blank) {
  width: 3.125vw;
  height: 3.125vw;
}

@media screen and (min-width: 737px) {
  .btn-squareArrow:hover,
  .btn-squareArrow:focus {
    color: var(--main-clr-bk);
  }
  .btn-squareArrow:hover img:nth-of-type(2),
  .btn-squareArrow:focus img:nth-of-type(2) {
    opacity: 0;
  }
}
@media screen and (min-width: 1920px) {
  .btn-squareArrow {
    min-height: 50px;
    padding: 0 26.88px 0 63.36px;
    font-size: 18px;
  }
  .btn-squareArrow img:not(.icon-blank) {
    width: 50px;
    height: 50px;
  }
  .link-block .btn-squareArrow {
    height: 60px;
    padding: 0 0 0 80px;
    font-size: 20px;
  }
  .link-block .btn-squareArrow {
    height: 60px;
  }
  .link-block .btn-squareArrow img:not(.icon-blank) {
    width: 60px;
    height: 60px;
  }
}
@media screen and (max-width: 736px) {
  .btn-squareArrow {
    height: auto;
    min-height: 10.25vw;
    padding: 0 0 0 13.85vw;
    font-size: max(var(--main-sp-14px), 14px);
  }
  .link-block .btn-squareArrow {
    padding: 0 0 0 13.85vw;
    font-size: max(var(--main-sp-14px), 14px);
  }
  .btn-squareArrow img:not(.icon-blank) {
    width: 10.25vw;
    height: 10.25vw;
  }
  .link-block .btn-squareArrow {
    height: 10.25vw;
  }
  .link-block .btn-squareArrow img:not(.icon-blank) {
    width: 10.25vw;
    height: 10.25vw;
  }
}

/* アイコン画像用 */
.icon-blank,
.icon-cart,
.icon-arrow {
  margin-left: 6px;
  vertical-align: middle;
}

/* 左に青い四角 */
.item-category {
  position: relative;
  padding-left: 1.458vw;
  font-size: max(var(--main-pc-18px), 12px);
  font-weight: 800;
}
.item-category::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  display: inline-block;
  width: .729vw;
  height: .729vw;
  border-radius: 2px;
  background: var(--main-clr-bl);
}
.item-category.font-family--inter {
  letter-spacing: -.54px;
}
.item-category + .list-col-ttl {
  margin-top: 1.35vw;
}

/* 線 */
hr {
  margin: 0 0 4.166vw;
  border-top: 1px solid var(--main-clr-bk)
}

@media screen and (min-width: 1920px) {
  /* 左に青い四角 */
  .item-category {
    padding-left: 28px;
    font-size: 18px;
  }
  .item-category::before {
    width: 14px;
    height: 14px;
  }
}

@media screen and (max-width: 736px) {
  /* 左に青い四角 */
  .item-category {
    padding-left: 5.13vw;
    font-size: max(var(--main-sp-14px), 12px);
  }
  .item-category::before {
    width: 2.56vw;
    height: 2.56vw;
  }
  .item-category.font-family--inter {
    letter-spacing: -.42px;
  }

  /* 線 */
  hr {
    margin-bottom: 15.4vw;
  }
}


/*---------------------------------------
  パンくず
 ---------------------------------------*/
 .list-breadcrumb {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 1.145vw;
  background: var(--main-clr-lgr);
}
.list-breadcrumb-item:nth-child(n + 2) {
  padding-left: 1rem;
}
.list-breadcrumb-item:nth-child(n + 2)::before {
  content: "/";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  display: inline-block;
  color: var(--main-clr-bl);
  padding: 0 6px;
  font-size: max(var(--main-pc-12px), 12px);
}
.list-breadcrumb-item {
  position: relative;
  display: inline-block;
}
.list-breadcrumb-item .link-breadcrumb-item {
  display: block;
  font-size: max(.677vw, 12px);
  font-weight: 500;
  line-height: 100%;
}
.list-breadcrumb-item .link-breadcrumb-item:not([aria-current="page"]) {
  color: rgba(23, 29, 28, 0.68);
  cursor: pointer;
}
.list-breadcrumb-item .link-breadcrumb-item:hover:not([aria-current="page"]) {
  color: var(--main-clr-bk);
}
/* 1920px以上のサイズ */
@media screen and (min-width: 1920px) {
  .list-breadcrumb {
    padding: 22px;
  }
  .list-breadcrumb-item .link-breadcrumb-item {
    font-size: 13px;
  }
}
/* SP対応 */
@media screen and (max-width: 736px) {
  .list-breadcrumb {
    padding: 5.13vw 3.59vw;
  }
  .list-breadcrumb-item .link-breadcrumb-item {
    font-size: max(2.56vw, 10px);
  }
}

/* 検索フォーム全体をFlexboxコンテナとして設定 */
.form-serch {
  display: flex; /* 中の要素（入力欄とボタン）を横並びにします */
  width: 100%;   /* 親要素の幅いっぱいに広がるようにします */
}

/* 検索の入力欄（テキストフィールド）のスタイル */
.form-serch-kw {
  flex-grow: 1;  /* 利用可能な余白をすべて使って伸びるようにします */
  min-width: 0;  /* 縮小時に内容がはみ出すのを防ぐための設定です */
  /* もし既存のCSSで固定のwidthが指定されていれば、それは削除します */
}

/* 検索ボタンのスタイル */
.form-serch-btn {
  flex-shrink: 0; /* ボタンが縮まないようにします */
}

.visually-hidden {
 position: absolute;
 width: 1px;
 height: 1px;
 margin: -1px;
 padding: 0;
 overflow: hidden;
 clip: rect(0 0 0 0);
 white-space: nowrap;
 border: 0;
}

#contents:focus {
  outline: none;
}

/* マウス操作中にフォーカスされた要素の枠線を非表示にする */
body.using-mouse [tabindex="-1"]:focus,
body.using-mouse a:focus {
  outline: none;
}