@charset "UTF-8";
/* =====================
	グローバル系
 ======================= */
/** -------------------- ヘッダー -------------------- **/
.l-header {
  position: sticky;
  top: 0;
  width: 100%;
  z-index: 1000;
}

/* 固定エリア */
.p-header_main {
  background: var(--c_blue);
  padding: 10px 5px;
  display: flex;
  align-items: center;
  column-gap: 12px;
}
@media (max-width: 369px) {
  .p-header_main {
    column-gap: 8px;
  }
}

/* メニューボタン */
.p-header_trigger {
  width: 50px;
  height: 40px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.p-header_triggerBtn {
  width: 24px;
  height: 24px;
  position: relative;
}
.p-header_triggerBtnBar {
  width: 100%;
  height: 2px;
  border-radius: 100px;
  background-color: var(--c_wht);
  transition: var(--anim);
  position: absolute;
  left: 0;
}
.p-header_triggerBtnBar:first-child {
  top: 4px;
}
.p-header_triggerBtnBar:nth-child(2) {
  top: 0;
  bottom: 0;
  margin: auto;
}
.p-header_triggerBtnBar:last-child {
  bottom: 4px;
}
.p-header_trigger::after {
  content: "メニュー";
  font-size: 0.8rem;
  font-weight: 700;
  line-height: normal;
  color: var(--c_wht);
}
.p-header_trigger.is-open .p-header_triggerBtnBar:first-child {
  transform: translateY(7px) rotate(-45deg);
}
.p-header_trigger.is-open .p-header_triggerBtnBar:nth-child(2) {
  opacity: 0;
}
.p-header_trigger.is-open .p-header_triggerBtnBar:last-child {
  transform: translateY(-7px) rotate(45deg);
}
.p-header_trigger.is-open::after {
  content: "閉じる";
}

/* ロゴ */
.p-header_logo {
  flex: 0 1 140px;
}

/* ガイド系リンク */
.p-header_guide {
  margin-left: auto;
  display: flex;
  justify-content: flex-end;
}
.p-header_guideItem {
  width: 50px;
  height: 40px;
  text-align: center;
}
.p-header_guideLink {
  width: 100%;
  height: 100%;
  color: var(--c_wht);
  font-size: 0.8rem;
  font-weight: 700;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
@media (max-width: 369px) {
  .p-header_guideLink {
    font-size: 0.7rem;
  }
}
.p-header_guideLink img {
  width: 24px;
  filter: var(--filter_wht);
  object-fit: contain;
}
.p-header_guideLink span {
  color: var(--c_wht);
}

/* ハンバーガーメニュー */
.p-header_menu {
  position: fixed;
  top: 60px;
  left: 0;
  width: 100%;
  height: calc(100% - 60px);
  z-index: 1000;
  background: var(--c_wht);
  overflow-y: auto;
  overflow-x: hidden;
  opacity: 0;
  visibility: hidden;
  transition: var(--anim);
}
.p-header_menu.is-open {
  opacity: 1;
  visibility: visible;
}
.p-header_menuSearch {
  background: #EBEDF3;
  padding: 20px;
}
.p-header_menuSearchForm {
  position: relative;
}
.p-header_menuSearchInput {
  width: 100%;
  height: 40px;
  background: var(--c_wht);
  border: 0;
  border-radius: 100px;
  padding: 6px 44px 6px 15px;
}
.p-header_menuSearchInput::-webkit-input-placeholder {
  font-size: 1.3rem;
}
.p-header_menuSearchBtn {
  appearance: none;
  width: 44px;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  background: none;
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.p-header_menuSearchBtn img {
  width: 24px;
  filter: var(--filter_text);
}
.p-header_menuHeading {
  font-size: 1.6rem;
  font-weight: 700;
  padding: 14px 10px 11px;
  border-bottom: 1px solid var(--c_border);
  margin-bottom: 30px;
}
.p-header_menuNavi {
  padding: 0 10px;
}
.p-header_menuCategory {
  margin: 30px 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(80px, auto));
  gap: 10px;
  align-items: flex-start;
  font-size: 1.2rem;
  line-height: 1.2;
  text-align: center;
}
.p-header_menuCategory img {
  border-radius: 15px;
  margin-bottom: 10px;
}
.p-header_menuFeature {
  margin-top: 30px;
}
.p-header_menuFeatureParent {
  font-size: 1.6rem;
  font-weight: 700;
  padding: 14px 10px 11px;
  border-bottom: 1px solid var(--c_border);
  position: relative;
}
.p-header_menuFeatureParent::before, .p-header_menuFeatureParent::after {
  content: "";
  width: 10px;
  height: 2px;
  background: var(--c_blue);
  position: absolute;
  right: 14px;
  top: 0;
  bottom: 0;
  margin: auto;
}
.p-header_menuFeatureParent::after {
  transform: rotate(90deg);
  transition: var(--anim);
}
.p-header_menuFeatureParent.is-open::after {
  transform: rotate(0deg);
}
.p-header_menuFeatureChildren {
  margin: 10px 0;
  display: none;
}
.p-header_menuFeatureChildren > li + li {
  margin-top: 10px;
}
.p-header_menuFeatureChildren a {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  column-gap: 10px;
  border: 1px solid var(--c_border);
  border-radius: 12px;
  overflow: hidden;
  padding-left: 30px;
  font-size: 1.5rem;
  font-weight: 700;
}
.p-header_menuFeatureChildren a img {
  width: 78px;
  flex-shrink: 0;
  margin-left: auto;
}
.p-header_menuNaviList a {
  display: block;
  font-size: 1.6rem;
  font-weight: 700;
  padding: 14px 10px 11px;
  border-bottom: 1px solid var(--c_border);
}
.p-header_menuBnr {
  margin: 40px 0;
  padding: 0 20px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.p-header_menuBnr .link {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background: var(--c_bg);
  color: var(--c_blue);
  text-align: center;
  border-radius: 30px;
  overflow: hidden;
  line-height: normal;
  font-weight: 700;
}
.p-header_menuBnr .link .text, .p-header_menuBnr .link .more {
  display: none;
}
.p-header_menuBnr .link .title {
  display: block;
  padding: 11px 10px;
  position: relative;
  order: 2;
}
.p-header_menuBnr .link .title::after {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 0 5px 6px;
  border-color: transparent transparent transparent currentColor;
  position: absolute;
  right: 6px;
  top: 0;
  bottom: 0;
  margin: auto;
}
.p-header_menuGuide {
  margin: 40px 0;
  padding: 0 20px;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: normal;
}
.p-header_menuGuide > li + li {
  margin-top: 20px;
}
.p-header_menuClose {
  padding: 20px;
}
.p-header_menuCloseBtn {
  appearance: none;
  width: 160px;
  height: 40px;
  border: 2px solid var(--c_blue);
  border-radius: 100px;
  background: var(--c_wht);
  text-align: center;
  font-family: var(--font_ja);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--c_blue);
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: 5px;
  margin: 0 auto;
}
.p-header_menuCloseBtn i {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  position: relative;
}
.p-header_menuCloseBtn i::before, .p-header_menuCloseBtn i::after {
  content: "";
  width: 12px;
  height: 2px;
  background: currentColor;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  transform: rotate(45deg);
}
.p-header_menuCloseBtn i::after {
  transform: rotate(-45deg);
}

/** -------------------- ページトップ -------------------- **/
.p-pagetop {
  position: fixed;
  right: 10px;
  bottom: 20px;
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  transition: var(--anim);
}
.p-pagetop.is-show {
  opacity: 1;
  visibility: visible;
}
.p-pagetop a {
  display: block;
  width: 48px;
}

/** -------------------- フッター -------------------- **/
.l-footer {
  margin-top: 20px;
  position: relative;
}

.p-footer_head {
  background: #F6F7FA;
  padding: 40px 20px;
}
.p-footer_headList {
  display: grid;
  grid-template-columns: repeat(2, 155px);
  justify-content: center;
  gap: 20px;
  text-align: center;
}
@media (min-width: 720px) {
  .p-footer_headList {
    grid-template-columns: repeat(4, 155px);
  }
}
.p-footer_headListItem img {
  display: block;
  width: 52px;
  margin: 0 auto 5px;
}
.p-footer_headListItem strong {
  color: var(--c_blue);
}

.p-footer_guide {
  background: #EEF1F5;
  padding: 40px 20px;
}
.p-footer_guideColumn {
  margin-bottom: 40px;
}
.p-footer_guideColumn:last-child {
  margin-bottom: 0;
}
.p-footer_guideItem {
  margin-bottom: 40px;
}
.p-footer_guideItem:last-child {
  margin-bottom: 0;
}
.p-footer_guideHeading {
  font-size: 1.6rem;
  font-weight: 700;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--c_border);
}
.p-footer_guideText {
  margin-top: 20px;
}
.p-footer_guideBtn {
  display: block;
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  color: var(--c_blue);
  background: var(--c_wht);
  border: 2px solid var(--c_blue);
  border-radius: 100px;
  padding: 17px 32px 15px;
  position: relative;
}
.p-footer_guideBtn:after {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 0 5px 6px;
  border-color: transparent transparent transparent currentColor;
  position: absolute;
  right: 20px;
  top: 0;
  bottom: 0;
  margin: auto;
}
.p-footer_guideBtn:visited, .p-footer_guideBtn:active {
  color: var(--c_blue);
}
.p-footer_guideCredit {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 5px;
}
.p-footer_guideCreditItem {
  flex: 0 0 61px;
}
.p-footer_guideTel {
  color: var(--c_blue);
  font-weight: 700;
  margin-top: 20px;
}
.p-footer_guideTelNum {
  font-size: 2.4rem;
  color: var(--c_blue);
  display: inline-block;
  margin-top: 5px;
}

.p-footer_foot {
  padding: 40px 20px;
}

.p-footer_nav {
  margin-bottom: 40px;
}
.p-footer_navItem {
  margin-top: 20px;
  font-size: 1.5rem;
}
.p-footer_navItem:first-child {
  margin-top: 0;
}

.p-footer_logo {
  width: 228px;
  max-width: 100%;
  margin: 40px auto 20px;
}

.p-footer_sns {
  margin: 20px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  column-gap: 12px;
}
.p-footer_snsItem {
  flex: 0 0 32px;
}

.p-footer_copyright {
  margin-top: 20px;
  text-align: center;
  font-size: 1.2rem;
}

/** -------------------- サイドナビ -------------------- **/
.l-sidenav {
  max-width: 500px;
}

/* カテゴリから探す */
.p-sidenav_categoryHeading {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.1em;
  text-align: center;
  background: var(--c_blue);
  color: var(--c_wht);
  padding: 12px 0 10px;
  border-radius: 30px 30px 0 0;
}

.p-sidenav_categoryListLink,
.p-sidenav_categoryListParent {
  display: block;
  position: relative;
  padding: 14px 30px 12px 10px;
  border-bottom: 1px solid var(--c_border);
  font-size: 1.5rem;
  font-weight: 700;
}

.p-sidenav_categoryListLink::after {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 0 5px 6px;
  border-color: transparent transparent transparent var(--c_blue);
  position: absolute;
  right: 10px;
  top: 0;
  bottom: 0;
  margin: auto;
}

.p-sidenav_categoryListParent::before,
.p-sidenav_categoryListParent::after {
  content: "";
  width: 10px;
  height: 2px;
  background-color: var(--c_blue);
  position: absolute;
  right: 10px;
  top: 0;
  bottom: 0;
  margin: auto;
}

.p-sidenav_categoryListParent::before {
  transition: var(--anim);
  transform: rotate(90deg);
}

.p-sidenav_categoryListParent.is-open::before {
  transform: none;
}

.p-sidenav_categoryListChildren {
  padding: 10px 0;
  display: none;
}
.p-sidenav_categoryListChildren ul {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px 11px;
}
.p-sidenav_categoryListChildren ul a {
  display: flex;
  align-items: center;
  font-size: 1.5rem;
}
.p-sidenav_categoryListChildren ul a img {
  width: 50px;
  flex-shrink: 0;
  border-radius: 15px;
}
.p-sidenav_categoryListChildren ul a > span {
  padding: 0 10px;
}

/* スマホのみ
  ------------------------ */
/* PC
  ------------------------ */
@media (min-width: 1200px) {
  /** -------------------- ヘッダー -------------------- **/
  .l-header {
    position: relative;
    top: auto;
  }
  /* サイトタイトル */
  .p-header_ttl {
    background: var(--c_blue);
    color: var(--c_wht);
    padding: 9px 24px;
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.05em;
  }
  /* 固定エリア */
  .p-header_main {
    background: var(--c_wht);
    padding: 20px 24px;
  }
  /* ロゴ */
  .p-header_logo {
    flex: 0 0 468px;
  }
  /* ガイド系リンク */
  .p-header_guideItem {
    width: 70px;
    height: 47px;
  }
  .p-header_guideLink {
    font-size: 1rem;
    color: var(--c_blue);
  }
  .p-header_guideLink img {
    filter: none;
  }
  .p-header_guideLink span {
    color: var(--c_blue);
  }
  /* PRポイント */
  .p-header_pr {
    background: #F6F7FA;
    padding: 10px 24px;
  }
  .p-header_prList {
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: 40px;
  }
  .p-header_prListItem {
    display: flex;
    align-items: center;
    column-gap: 9px;
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1;
  }
  .p-header_prListItem img {
    width: 32px;
  }
  .p-header_prListItem > span {
    padding-top: 4px;
  }
  /* 検索 */
  .p-header_search {
    background: var(--c_blue);
    display: flex;
    align-items: center;
    column-gap: 16px;
    padding: 10px 32px;
  }
  .p-header_searchForm {
    position: relative;
    flex-grow: 1;
    max-width: 1135px;
  }
  .p-header_searchFormInput {
    border-radius: 100px;
    border: 0;
    font-size: 1.5rem;
    line-height: 1;
    padding: 10px 65px 8px 30px;
  }
  .p-header_searchFormBtn {
    appearance: none;
    background: none;
    border: 0;
    border-radius: 0;
    width: 65px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 0;
    top: 0;
  }
  .p-header_searchFormBtn img {
    width: 24px;
  }
  .p-header_searchDetail {
    flex: 0 0 96px;
  }
  .p-header_searchDetailBtn {
    display: block;
    text-align: center;
    background: var(--c_wht);
    padding: 14px 0 11px;
    font-weight: 700;
    line-height: 1;
    border-radius: 100px;
  }
  .p-header_searchOther {
    display: flex;
    column-gap: 16px;
  }
  .p-header_searchOtherLink {
    display: flex;
    align-items: center;
    column-gap: 5px;
    color: var(--c_wht);
    font-weight: 700;
  }
  .p-header_searchOtherLink img {
    width: 27px;
  }
  .p-header_searchOtherLink:visited, .p-header_searchOtherLink:active, .p-header_searchOtherLink:hover {
    color: var(--c_wht);
  }
  /* ハンバーガーメニュー */
  .p-header_menu {
    display: none !important;
  }
  /** -------------------- ページトップ -------------------- **/
  .p-pagetop {
    right: 20px;
  }
  /** -------------------- フッター -------------------- **/
  .l-footer {
    margin-top: 120px;
  }
  .l-footer_inner {
    max-width: 1290px;
    margin: 0 auto;
    padding: 0 20px;
  }
  .p-footer_head {
    padding: 60px 20px 70px;
  }
  .p-footer_headList {
    max-width: 1000px;
    margin: 0 auto;
    grid-template-columns: repeat(4, 1fr);
    column-gap: 5.3%;
  }
  .p-footer_headListItem img {
    width: 64px;
  }
  .p-footer_guide {
    padding: 60px 0;
  }
  .p-footer_guideContainer {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
  }
  .p-footer_guideColumn {
    flex: 0 0 320px;
  }
  .p-footer_guideHeading {
    font-size: 1.8rem;
    padding-bottom: 8px;
  }
  .p-footer_guideCreditItem {
    flex: 0 0 58px;
  }
  .p-footer_foot {
    padding: 30px 0;
  }
  .p-footer_nav {
    margin-bottom: 30px;
    display: flex;
    flex-wrap: wrap;
    gap: 20px 30px;
  }
  .p-footer_navItem {
    margin: 0;
  }
  .p-footer_logo {
    margin: 30px 0 20px auto;
  }
  .p-footer_sns {
    justify-content: flex-end;
  }
  .p-footer_copyright {
    text-align: right;
  }
  /** -------------------- サイドナビ -------------------- **/
  .l-sidenav {
    max-width: none;
  }
  /* カテゴリから探す */
  .p-sidenav_categoryListItem {
    position: relative;
  }
  .p-sidenav_categoryListLink,
  .p-sidenav_categoryListParent {
    border: 0;
    background: #F7F8FB;
    font-weight: 400;
    cursor: pointer;
  }
  .p-sidenav_categoryListParent::before {
    display: none;
  }
  .p-sidenav_categoryListParent::after {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 0 5px 6px;
    border-color: transparent transparent transparent var(--c_blue);
    background: none;
  }
  .p-sidenav_categoryListItem:hover .p-sidenav_categoryListParent {
    background: #E5E9F0;
  }
  .p-sidenav_categoryListItem:hover .p-sidenav_categoryListChildren {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  .p-sidenav_categoryListChildren {
    display: block !important;
    padding: 30px 30px 40px;
    background: var(--c_wht);
    border: 1px solid var(--c_border);
    border-radius: 30px;
    position: absolute;
    left: calc(100% - 26px);
    top: -15px;
    width: 620px;
    transition: var(--anim);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 5;
  }
  .p-sidenav_categoryListChildren p {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 20px;
  }
  .p-sidenav_categoryListChildren ul {
    gap: 20px 0;
  }
  .p-sidenav_categoryListChildren ul a img {
    width: 60px;
  }
  .p-sidenav_categoryListChildren ul a > span {
    padding: 0 20px 0 10px;
  }
  /* サイドナビ　バナー */
  .p-sidenav_bnr .item {
    margin-top: 20px;
  }
  .p-sidenav_bnr .link {
    display: block;
    text-align: center;
    font-weight: 700;
  }
  .p-sidenav_bnr .link .title {
    font-size: 1.6rem;
    line-height: normal;
    color: var(--c_blue);
    border-radius: 30px 30px 0 0;
    background: var(--c_bg);
    padding: 18px 8px 16px;
  }
  .p-sidenav_bnr .link .text {
    background: var(--c_bg);
    font-size: 1.3rem;
    font-weight: 700;
    padding: 13px 6px;
  }
  .p-sidenav_bnr .link .more {
    border-radius: 0 0 30px 30px;
    background: var(--c_blue);
    color: var(--c_wht);
    padding: 10px 8px 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 8px;
  }
  .p-sidenav_bnr .link .more::after {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 0 5px 6px;
    border-color: transparent transparent transparent currentColor;
  }
}