@charset "euc-jp";

@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho+B1:wght@400;700&family=Noto+Sans+JP:wght@100..900&display=swap');

:root {
  --primary: #020d20;
  --primary-alpha-weak: rgba(2, 13, 32, .14);
  --primary-alpha-medium: rgba(2, 13, 32, .4);
  --primary-alpha-strong: rgba(2, 13, 32, .77);
  --primary-alpha-heavy: rgba(2, 13, 32, .93);
  --secondary: #ddd5bc;
  --white: #fff;
  --white-alpha-weak: rgba(255, 255, 255, .14);
  --white-alpha-medium: rgba(255, 255, 255, .4);
  --white-alpha-strong: rgba(255, 255, 255, .75);
  --red: #eb4735;
  --brown: #7a550b;

  --font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --mincho-font: "Shippori Mincho B1", serif;

  --spacing-1: .25rem;
  --spacing-2: .6rem;
  --spacing-3: 1rem;
  --spacing-4: 2rem;
  --spacing-5: 4rem;

  --content-max-width: 1320px;
  --side-margin: 20px;
  --content-width: min(100vw - var(--side-margin) * 2, var(--content-max-width));
  --content-padding-block: 70px;
  --radius-sm: 3px;
  --radius-md: 7px;
  --header-height: clamp(60px, 10vw, 85px);

  --dark-icon-url: url(https://file002.shop-pro.jp/PA01352/967/site-image/icon-dark.png);
  --light-icon-url: url(https://file002.shop-pro.jp/PA01352/967/site-image/icon-light.png);

  --gold-circle-url: url(https://file002.shop-pro.jp/PA01352/967/site-image/round-gold.png);
  --silver-circle-url: url(https://file002.shop-pro.jp/PA01352/967/site-image/round-silver-light.png);

  --arrow-bottom-svg: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16.3292 9.32987C16.5961 9.06301 17.0281 9.06303 17.295 9.32987C17.5616 9.59673 17.5618 10.0289 17.295 10.2957L12.4825 15.1082C12.2324 15.3583 11.8369 15.3738 11.5685 15.1551L11.5646 15.1521L11.5206 15.1121L11.5157 15.1082V15.1072L6.70422 10.2957C6.43737 10.0288 6.43737 9.59673 6.70422 9.32987C6.97108 9.06301 7.40319 9.06301 7.67004 9.32987L11.9991 13.658L16.3292 9.32987Z' fill='%23020D20' stroke='%23020D20' stroke-width='0.2'/%3E%3C/svg%3E");
  --arrow-right-svg: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.77145 2.22885C3.57618 2.0336 3.57618 1.7171 3.77145 1.5218C3.96671 1.3266 4.28323 1.32655 4.47848 1.5218L8.6035 5.6468C8.7865 5.82985 8.7978 6.1194 8.63765 6.31575L8.6035 6.35385L4.47848 10.4789C4.28322 10.6741 3.96671 10.6741 3.77145 10.4789C3.57618 10.2836 3.57618 9.96709 3.77145 9.77183L7.54295 6.00035L3.77145 2.22885Z' fill='%23020D20'/%3E%3C/svg%3E");

  scroll-behavior: smooth;
  scroll-padding-top: 100px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: #F0EFEF;
  background-image: url(https://file002.shop-pro.jp/PA01352/967/site-image/bg-sparkle-washi-translucent.png);
  background-size: 700px;
  color: #020D20;
}

body,
input,
select,
option,
button  {
  font: normal 400 16px / 1.6 var(--font-family);
  font-optical-sizing: auto;
  letter-spacing: 8%;
}

a,
a:visited {
  color: #020D20;
  text-underline-offset: .2em;
}

a:hover,
a:active {
  color: #081F49;
}

.underlined-arrow-link {
  display: inline-flex;
  align-items: center;
  border-bottom: 1px solid;
}

.underlined-arrow-link::after {
  content: '';
  display: inline-block;
  width: 1em;
  height: 1em;
  background: var(--arrow-right-svg) no-repeat 50% 50% / .8em auto;
  transition: translate .3s ;
}

.underlined-arrow-link:is(:hover, :visited) {
  text-decoration: none;
}

.underlined-arrow-link:hover::after {
  translate: .3em 0;
}

p {
  margin: 0 0 .8em;
}

.hr-light {
  margin-block: clamp(2rem, 6vw, 3.75rem);
  border-top: 1px solid #ffffff24;
  border-inline: none;
  border-bottom: none;
}

.d-none {
  display: none;
}

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

/* text */

.text-center {
  text-align: center;
}

.text-bold {
  font-weight: 700;
}

.text-small {
  font-size: .8em;
}

.text-danger {
  color: var(--red);
}

.blank-text {
  margin: 4rem auto;
  text-align: center;
}

/* margin */

.mx-auto {
  margin-inline: auto !important;
}

.m-0 { margin: 0; }

.m-1-0-0 { margin: var(--spacing-1) 0 0; }
.m-2-0-0 { margin: var(--spacing-2) 0 0; }
.m-3-0-0 { margin: var(--spacing-3) 0 0; }
.m-4-0-0 { margin: var(--spacing-4) 0 0; }
.m-5-0-0 { margin: var(--spacing-5) 0 0; }

.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: var(--spacing-1); }
.mt-2 { margin-top: var(--spacing-2); }
.mt-3 { margin-top: var(--spacing-3); }
.mt-4 { margin-top: var(--spacing-4); }
.mt-5 { margin-top: var(--spacing-5); }

.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: var(--spacing-1); }
.mb-2 { margin-bottom: var(--spacing-2); }
.mb-3 { margin-bottom: var(--spacing-3); }
.mb-4 { margin-bottom: var(--spacing-4); }
.mb-5 { margin-bottom: var(--spacing-5); }

/* heading */

.heading-2-lg,
.page-about h2 {
  position: relative;
  padding-bottom: .6em;
  color: currentColor;
  text-align: center;
  font-family: var(--mincho-font);
  font-size: clamp(1.3rem, 1rem + 3vw, 2rem);
}

.heading-2-lg::after,
.page-about h2::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  width: 2.1em;
  height: 0;
  margin: auto auto 0;
  border-bottom: 1px solid currentColor;
}

.heading-2-md {
  font-family: var(--mincho-font);
  font-size: 1.3rem;
}

.page-static h2 {
  position: relative;
  margin: 2.3em 0 1.5em;
  padding-left: 1.4em;
  border-bottom: 1px solid;
  font-family: var(--mincho-font);
  font-size: clamp(1.25rem, 5vw, 1.8rem);
}

.page-static h2::before {
  content: '';
  position: absolute;
  top: .2lh;
  left: 0;
  display: block;
  width: 1em;
  height: 1em;
  background: linear-gradient(#d2bc46, #9c9a93);
  border-radius: var(--radius-sm);
}

.page-static h3 {
  position: relative;
  margin: 1.7em 0 1em;
  padding-left: 1em;
  font-weight: 700;
  font-size: clamp(1.15rem, 4.5vw, 1.3rem);
}

.page-static h3::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: .5em;
  height: 100%;
  background: linear-gradient(#d2bc46, #9c9a93);
  border-radius: var(--radius-sm);
}

.page-about h3 {
  position: relative;
  padding-left: 1lh;
  color: var(--brown);
  font-family: var(--mincho-font);
  font-size: clamp(1.15rem, 4.5vw, 1.3rem);
}

.page-about h3::before {
  content: '';
  position: absolute;
  inset: .1lh auto auto 0;
  display: inline-block;
  width: .8lh;
  height: .8lh;
  background: var(--gold-circle-url) no-repeat 50% / contain;
}

.page-about h4 {
  position: relative;
  padding-left: 1lh;
  font-size: clamp(1.05rem, 4vw, 1.15rem);
}

.page-about h4::before {
  content: '';
  position: absolute;
  inset: calc((1lh - 1em) / 2) auto auto 0;
  display: inline-block;
  width: 1em;
  height: 1em;
  background: var(--silver-circle-url) no-repeat 50% / contain;
}

/* icon */

.icon-tkhk-dark {
  display: inline-block;
  background-image: var(--dark-icon-url);
}

.icon-tkhk-light {
  display: inline-block;
  background-image: var(--light-icon-url);
}

.icon-md {
  width: 16px;
  height: 16px;
  background-size: 240px 80px;
}

.icon-lg {
  width: 20px;
  height: 20px;
  background-size: 300px 100px;
}

.icon-xl {
  width: 24px;
  height: 24px;
  background-size: 360px 120px;
}

.icon-md.icon-user,
.icon-lg.icon-user,
.icon-xl.icon-user {
  background-position: 0px 0px;
}
.icon-md.icon-search {background-position: -16px 0px;}
.icon-lg.icon-search {background-position: -20px 0px;}
.icon-xl.icon-search {background-position: -24px 0px;}
.icon-md.icon-heart-fill {background-position: -32px 0px;}
.icon-lg.icon-heart-fill {background-position: -40px 0px;}
.icon-xl.icon-heart-fill {background-position: -48px 0px;}
.icon-md.icon-heart-line {background-position: -48px 0px;}
.icon-lg.icon-heart-line {background-position: -60px 0px;}
.icon-xl.icon-heart-line {background-position: -72px 0px;}
.icon-md.icon-cart {background-position: -64px 0px;}
.icon-lg.icon-cart {background-position: -80px 0px;}
.icon-xl.icon-cart {background-position: -96px 0px;}

.icon-md.icon-instagram {background-position: -80px 0px;}
.icon-lg.icon-instagram {background-position: -100px 0px;}
.icon-xl.icon-instagram {background-position: -120px 0px;}
.icon-md.icon-youtube {background-position: -96px 0px;}
.icon-lg.icon-youtube {background-position: -120px 0px;}
.icon-xl.icon-youtube {background-position: -144px 0px;}

.icon-md.icon-arrow-up {background-position: -112px 0px;}
.icon-lg.icon-arrow-up {background-position: -140px 0px;}
.icon-xl.icon-arrow-up {background-position: -168px 0px;}
.icon-md.icon-arrow-down {background-position: -128px 0px;}
.icon-lg.icon-arrow-down {background-position: -160px 0px;}
.icon-xl.icon-arrow-down {background-position: -192px 0px;}
.icon-md.icon-arrow-right {background-position: -144px 0px;}
.icon-lg.icon-arrow-right {background-position: -180px 0px;}
.icon-xl.icon-arrow-right {background-position: -216px 0px;}
.icon-md.icon-arrow-left {background-position: -160px 0px;}
.icon-lg.icon-arrow-left {background-position: -200px 0px;}
.icon-xl.icon-arrow-left {background-position: -240px 0px;}

.icon-md.icon-minus {background-position: -176px 0px;}
.icon-lg.icon-minus {background-position: -220px 0px;}
.icon-xl.icon-minus {background-position: -264px 0px;}
.icon-md.icon-plus {background-position: -192px 0px;}
.icon-lg.icon-plus {background-position: -240px 0px;}
.icon-xl.icon-plus {background-position: -288px 0px;}

.icon-md.icon-sort {background-position: -208px 0px;}
.icon-lg.icon-sort {background-position: -260px 0px;}
.icon-xl.icon-sort {background-position: -312px 0px;}

/* button */

.buttons-vertical {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .6rem;
}

.more-button {
  display: inline-block;
  padding: .7em 1em;
  border: 1px solid;
  line-height: 1.2;
  transition: .3s;
}

.more-button .icon-md {
  vertical-align: -5%;
  margin-inline-start: .3em;
}

.is-dark-section .more-button {
  color: var(--white);
}

@media (hover: hover) {
  .more-button:hover {
    box-shadow: inset 0 0 .7em var(--primary-alpha-medium);
    text-decoration: none;
  }

  .is-dark-section .more-button:hover {
    box-shadow: inset 0 0 .7em var(--white-alpha-medium);
  }
}

/* toc */

.toc-wrapper {
  width: min(100%, 400px);
  margin: 1.5rem auto;
  padding: 1.3rem 0;
  border-block: 1px solid;
}

.toc-title {
  font-weight: 700;
  font-size: 1rem;
}

.toc-list {
  margin: 1rem 0 0;
}

.toc-item {
  position: relative;
  padding-left: 1.4rem;
}

.toc-item:not(:first-child) {
  margin-top: .8rem;
}

.toc-item::before {
  content: '';
  position: absolute;
  top: calc((1lh - 1em) / 2);
  left: 0;
  display: inline-block;
  width: 1rem;
  height: 1rem;
  background: var(--arrow-bottom-svg) no-repeat 50% / contain;
  rotate: -90deg;
}

/* layout */

.page-wrapper {
  width: 100%;
}

.content-width {
  width: var(--content-width);
  margin-inline: auto;
}

figure.image-wrapper img + figcaption {
  margin-block-start: .4em;
  font-size: .9em;
}

.sticky-top {
  position: sticky;
  top: calc(var(--header-height, 60px) + 60px);
}

.flex-columns {
  --columns: 12;
  --gap-x: 1.5rem;
  --gap-y: 0;
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--gap-x);
  row-gap: var(--gap-y);
  margin: 0;
}

.column {
  --span: 1;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc((100% - (var(--columns) - 1) * var(--gap-x)) / var(--columns) * var(--span) + (var(--span) - 1) * var(--gap-x));
  max-width: calc((100% - (var(--columns) - 1) * var(--gap-x)) / var(--columns) * var(--span) + (var(--span) - 1) * var(--gap-x));
}

.column-auto {
  flex: 0 0 auto;
  width: auto;
}

.column-1 {
  --span: 1;
}

.column-2 {
  --span: 2;
}

.column-3 {
  --span: 3;
}

.column-4 {
  --span: 4;
}

.column-5 {
  --span: 5;
}

.column-6 {
  --span: 6;
}

.column-7 {
  --span: 7;
}

.column-8 {
  --span: 8;
}

.column-9 {
  --span: 9;
}

.column-10 {
  --span: 10;
}

.column-11 {
  --span: 11;
}

.column-12 {
  --span: 12;
}

.g-0,
.gx-0 {
  --gap-x: 0;
}

.g-0,
.gy-0 {
  --gap-y: 0;
}

.g-1,
.gx-1 {
  --gap-x: var(--spacing-1);
}

.g-1,
.gy-1 {
  --gap-y: var(--spacing-1);
}

.g-2,
.gx-2 {
  --gap-x: var(--spacing-2);
}

.g-2,
.gy-2 {
  --gap-y: var(--spacing-2);
}

.g-3,
.gx-3 {
  --gap-x: var(--spacing-3);
}

.g-3,
.gy-3 {
  --gap-y: var(--spacing-3);
}

.g-4,
.gx-4 {
  --gap-x: var(--spacing-4);
}

.g-4,
.gy-4 {
  --gap-y: var(--spacing-4);
}

.g-5,
.gx-5 {
  --gap-x: var(--spacing-5);
}

.g-5,
.gy-5 {
  --gap-y: var(--spacing-5);
}

@media (min-width: 576px) {
  .column-sm {
    flex: 1 0 0;
  }
  .column-sm-auto {
    flex: 0 0 auto;
    width: auto;
  }
  .column-sm-1 {
    --span: 1;
  }
  .column-sm-2 {
    --span: 2;
  }
  .column-sm-3 {
    --span: 3;
  }
  .column-sm-4 {
    --span: 4;
  }
  .column-sm-5 {
    --span: 5;
  }
  .column-sm-6 {
    --span: 6;
  }
  .column-sm-7 {
    --span: 7;
  }
  .column-sm-8 {
    --span: 8;
  }
  .column-sm-9 {
    --span: 9;
  }
  .column-sm-10 {
    --span: 10;
  }
  .column-sm-11 {
    --span: 11;
  }
  .column-sm-12 {
    --span: 12;
  }
}

@media (min-width: 768px) {
  .column-md {
    flex: 1 0 0;
  }
  .column-md-auto {
    flex: 0 0 auto;
    width: auto;
  }
  .column-md-1 {
    --span: 1;
  }
  .column-md-2 {
    --span: 2;
  }
  .column-md-3 {
    --span: 3;
  }
  .column-md-4 {
    --span: 4;
  }
  .column-md-5 {
    --span: 5;
  }
  .column-md-6 {
    --span: 6;
  }
  .column-md-7 {
    --span: 7;
  }
  .column-md-8 {
    --span: 8;
  }
  .column-md-9 {
    --span: 9;
  }
  .column-md-10 {
    --span: 10;
  }
  .column-md-11 {
    --span: 11;
  }
  .column-md-12 {
    --span: 12;
  }
}

@media (min-width: 992px) {
  .column-lg {
    flex: 1 0 0;
  }
  .column-lg-auto {
    flex: 0 0 auto;
    width: auto;
  }
  .column-lg-1 {
    --span: 1;
  }
  .column-lg-2 {
    --span: 2;
  }
  .column-lg-3 {
    --span: 3;
  }
  .column-lg-4 {
    --span: 4;
  }
  .column-lg-5 {
    --span: 5;
  }
  .column-lg-6 {
    --span: 6;
  }
  .column-lg-7 {
    --span: 7;
  }
  .column-lg-8 {
    --span: 8;
  }
  .column-lg-9 {
    --span: 9;
  }
  .column-lg-10 {
    --span: 10;
  }
  .column-lg-11 {
    --span: 11;
  }
  .column-lg-12 {
    --span: 12;
  }
}

/* breadcrumbs */

.breadcrumbs {
  --breadcrumb-margin: .3em;
  display: flex;
  flex-flow: row wrap;
  gap: var(--breadcrumb-margin);
  margin: 0;
  padding-block: .5em;
  font-size: .75rem;
}

.breadcrumbs-wrapper .breadcrumbs:not(:first-child) {
  padding-block-start: 0;
}

.breadcrumb-item .icon-arrow-right {
  margin-inline-end: var(--breadcrumb-margin);
  vertical-align: text-bottom;
}

/* contents header */

.split-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.page-header {
  width: var(--content-width);
  margin: 1.5rem auto 3rem;
}

.page-header .page-heading {
  margin: 0;
  padding-block-start: 1em;
  font-family: var(--mincho-font);
  font-size: clamp(1.5rem, 6vw, 2.3rem);
}

.page-header.has-bg {
  width: 100%;
  padding: 5rem 0;
  background-color: var(--primary);
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}

.page-header.has-bg .page-heading {
  width: var(--content-width);
  margin: 0 auto;
  padding: 0;
  color: var(--white);
}

.page-content-heading {
  padding-block: 1em;
  font-family: var(--mincho-font);
  font-size: clamp(1.5rem, 6vw, 2.3rem);
}

.page-content-header.has-bg .page-content-heading {
  padding-block: 2.6em;
  color: var(--white);
}

/* contents */

.contents-footer {
  width: var(--content-width);
  margin: 0 auto;
}

.contents-footer-section {
  padding-block: var(--content-padding-block);
}

.page-content-inner {
  margin-block-start: var(--header-height);
}

/* free page contents */

.page-about .page-content-body h2 {
  margin: 3em auto 1.5em;
}

.page-about .page-content-body h3 {
  margin: 2em 0 1em;
}

.vertical-centered-image {
  display: block;
  width: min(300px, 100%);
  height: auto;
  margin: 0 auto;
  aspect-ratio: 30 / 38;
  object-fit: cover;
  border-radius: var(--radius-sm);
}

.centered-image {
  display: block;
  margin: 0 auto;
  border-radius: var(--radius-sm);
}

.history-table th:first-child {
  white-space: nowrap;
  padding-right: 1.2em;
  vertical-align: baseline;
}

.about-kazarishoku-row {
  display: flex;
  gap: 1.25rem;
  align-items: center;
}

.kazarishoku-image-wrapper {
  flex: 0 0 40%;
}

.kazarishoku-explain-wrapper {
  flex: 0 1 60%;
}

.image-stack {
  position: relative;
  height: clamp(10rem, 70vw, 12lh);
}

.image-stack-item {
  position: absolute;
  width: 77%;
  height: 73%;
  object-fit: cover;
  border-radius: var(--radius-sm);
}

.image-stack-item:nth-child(odd) {
  inset: 0 auto auto 0;
  z-index: -10;
}

.image-stack-item:nth-child(even) {
  inset: auto 0 0 auto;
}

.manual-number-list {
  margin-block-start: 3rem;
  counter-reset: num 0;
  list-style: none;
}

.number-list-item {
  margin-bottom: 2rem;
  counter-increment: num;
}

.manual-number-list .list-item-name {
  margin-bottom: .5rem;
  color: var(--brown);
  font-family: var(--mincho-font);
  font-size: 1.2em;
}

.manual-number-list .list-number::before {
  content: counter(num) '. ';
}

#tools .vertical-centered-image {
  aspect-ratio: unset;
}

.tools-list {
  column-count: 2;
  column-width: 300px;
  column-gap: 3rem;
}

.tools-item {
  display: grid;
  grid-template-columns: 35% auto;
  grid-template-rows: auto 1fr;
  grid-template-areas:
    'image name'
    'image explain';
  gap: .5rem 1rem;
  margin-block-end: 1rem;
}

.tools-name {
  grid-area: name;
  color: var(--brown);
  font-family: var(--mincho-font);
}

.tools-explain {
  grid-area: explain;
  margin: 0;
}

.tools-image {
  grid-area: image;
  margin: 0;
}

.tool-image {
  border-radius: var(--radius-sm);
}

/* shop and company page */

.access-google-map {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
}

.info-dl {
  margin: 1rem 0;
  border-top: 1px solid var(--primary-alpha-weak);
}

.info-dl-item {
  display: grid;
  grid-template-columns: min(10rem, 30%) auto;
  padding: .7rem;
  border-bottom: 1px solid var(--primary-alpha-weak);
}

.info-dl-content p:last-child {
  margin-bottom: 0;
}

.history-item {
  display: grid;
  grid-template-columns: 1.2em auto;
  grid-template-rows: 1fr auto;
  grid-template-areas:
    'marker year'
    'marker content';
  column-gap: .5rem;
  margin-bottom: .3rem;
}

.history-item::before {
  content: '';
  grid-area: marker;
}

.history-item:not(:last-child)::before {
  background:
    var(--silver-circle-url) no-repeat 0% calc((1lh - 1.2em) / 2) / 1.2em auto,
    linear-gradient(var(--primary-alpha-weak), var(--primary-alpha-weak)) no-repeat .6em calc(1lh + .3rem) / 1px 100%;
}

.history-item:last-child::before {
  background: var(--silver-circle-url) no-repeat 0% calc((1lh - 1.2em) / 2) / 1.2em auto;
}

.history-year {
  grid-area: year;
}

.history-content {
  grid-area: content;
  margin-left: 0;
}

.history-content p {
  margin-block: 1rem;
}

/* products page */

.page-products-contents {
  margin-block-end: 3rem;
}

/* products header - number & sort */

.products-list-header {
  margin-block-end: 1.5rem;
}

.products-list-num-wrapper {
  margin: 0;
}

.sort-selector {
  appearance: none;
  width: fit-content;
  height: auto;
  padding: .3em 2.3em .3em 1.5em;
  background:
      url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.0306 15.9694C11.1003 16.039 11.1557 16.1217 11.1934 16.2128C11.2312 16.3038 11.2506 16.4014 11.2506 16.5C11.2506 16.5986 11.2312 16.6962 11.1934 16.7872C11.1557 16.8783 11.1003 16.961 11.0306 17.0306L8.03062 20.0306C7.96096 20.1004 7.87824 20.1557 7.78719 20.1934C7.69615 20.2312 7.59855 20.2506 7.49999 20.2506C7.40143 20.2506 7.30383 20.2312 7.21278 20.1934C7.12174 20.1557 7.03902 20.1004 6.96936 20.0306L3.96936 17.0306C3.89968 16.9609 3.84441 16.8782 3.80669 16.7872C3.76898 16.6961 3.74957 16.5985 3.74957 16.5C3.74957 16.4015 3.76898 16.3039 3.80669 16.2128C3.84441 16.1218 3.89968 16.0391 3.96936 15.9694C4.1101 15.8286 4.30097 15.7496 4.49999 15.7496C4.59854 15.7496 4.69612 15.769 4.78716 15.8067C4.87821 15.8444 4.96093 15.8997 5.03061 15.9694L6.74999 17.6897V4.5C6.74999 4.30109 6.82901 4.11032 6.96966 3.96967C7.11031 3.82902 7.30108 3.75 7.49999 3.75C7.6989 3.75 7.88967 3.82902 8.03032 3.96967C8.17097 4.11032 8.24999 4.30109 8.24999 4.5V17.6897L9.96936 15.9694C10.039 15.8996 10.1217 15.8443 10.2128 15.8066C10.3038 15.7688 10.4014 15.7494 10.5 15.7494C10.5986 15.7494 10.6961 15.7688 10.7872 15.8066C10.8782 15.8443 10.961 15.8996 11.0306 15.9694ZM20.0306 6.96937L17.0306 3.96937C16.961 3.89964 16.8782 3.84432 16.7872 3.80658C16.6961 3.76884 16.5986 3.74941 16.5 3.74941C16.4014 3.74941 16.3038 3.76884 16.2128 3.80658C16.1217 3.84432 16.039 3.89964 15.9694 3.96937L12.9694 6.96937C12.8286 7.1101 12.7496 7.30098 12.7496 7.5C12.7496 7.69902 12.8286 7.88989 12.9694 8.03062C13.1101 8.17135 13.301 8.25042 13.5 8.25042C13.699 8.25042 13.8899 8.17135 14.0306 8.03062L15.75 6.31031V19.5C15.75 19.6989 15.829 19.8897 15.9697 20.0303C16.1103 20.171 16.3011 20.25 16.5 20.25C16.6989 20.25 16.8897 20.171 17.0303 20.0303C17.171 19.8897 17.25 19.6989 17.25 19.5V6.31031L18.9694 8.03062C19.1101 8.17135 19.301 8.25042 19.5 8.25042C19.699 8.25042 19.8899 8.17135 20.0306 8.03062C20.1713 7.88989 20.2504 7.69902 20.2504 7.5C20.2504 7.30098 20.1713 7.1101 20.0306 6.96937Z' fill='%23020D20'/%3E%3C/svg%3E") no-repeat .2em 50% / 1.2em auto,
      var(--arrow-bottom-svg) no-repeat calc(100% - .2em) 50% / 1.2em auto,
      transparent;
  border: 1px solid var(--primary);
  border-radius: var(--radius-sm);
}

/* products list */

.products-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  list-style: none;
  margin: 0;
  gap: clamp(1.2rem, 5vw, 2.5rem);
}

.products-list-sm {
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.2rem, 5vw, 2.5rem);
}

.products-list-lg {
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.2rem, 5vw, 3.5rem);
}

.section-header + .products-list {
  margin-top: 50px;
}

.product-item {
  position: relative;
  width: 100%;
}

.product-item-link {
  display: block;
}

.product-thumbnail {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background-color: var(--white);
  border-radius: var(--radius-sm);
  transition: opacity .5s;
}

.products-list .product-name {
  margin-block: 1rem 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

.product-price {
  margin-block: .7em 0;
  font-size: .875rem;
}

.product-item .favorite-button {
  position: absolute;
  inset: .6rem .6rem auto auto;
  z-index: 30;
  width: 1rem;
  height: 1rem;
  border: none;
  background: none;
  color: var(--white);
}

.product-item .favorite-button.is-added {
  color: var(--red);
}

.product-item .favorite-button .favorite-icon {
  width: 100%;
  height: 100%;
}

@media (hover: hover) {
  .product-item-link:hover .product-thumbnail {
    opacity: .7;
  }
}

/* pager */

.products-list-footer {
  margin-block: 3rem;
}

.pager-list {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  gap: .6em .3em;
}

.pager-link,
.pager-arrow-link {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 2.5em;
  height: 2.5em;
  border-radius: var(--radius-sm);
}

.pager-link {
  background: transparent;
  border: 1px solid transparent;
}

.pager-link.is-current {
  background: var(--primary-alpha-medium);
}

.pager-arrow-link {
  background: var(--primary);
}

.pager-link.is-disabled,
.pager-arrow-link.is-disabled {
  opacity: .3;
}

@media (hover: hover) {
  .pager-link:hover {
    border-color: var(--primary);
  }

  .pager-arrow-link:hover {
    box-shadow: inset 0px 0px 1em var(--white-alpha-medium);
  }
}

/* list */

.small-figure-list {
  display: flex;
  flex-flow: row wrap;
  gap: 1.5rem;
}

.small-figure-item {
  flex: 0 0 130px;
}

.small-figure-image {
  display: inline-block;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius-sm);
}

/* header */

.site-header {
  --padding-block: min(1rem, 12 / 390 * 100 * 1vw);
  position: fixed;
  inset: 0 0 auto 0;
  width: 100%;
  max-height: var(--header-height);
  padding: var(--padding-block) min(1.4rem, 14 / 390 * 100 * 1vw);
  z-index: 300;
  transition: background-color .7s;
}

html[class~="translated-ltr"] .site-header,
html[class~="translated-rtl"] .site-header {
  top: 40px;
}

.site-header.is-dark {
  background: var(--primary-alpha-heavy);
}

.header-inner {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
  column-gap: 1rem;
}

.site-title-link {
  position: relative;
  display: inline-block;
  width: auto;
  height: calc(var(--header-height) - var(--padding-block) * 2);
}

.site-title-link .logo-image-white {
  width: auto;
  height: 100%;
  object-fit: contain;
}

.header-nav-wrapper {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-end;
  align-items: center;
  column-gap: 1rem;
}

.sp-header-button {
  width: 24px;
  height: 24px;
  margin: 0;
  text-align: center;
}

.sp-header-button:has(.icon-lg) {
  padding: 2px;
}

.site-header :is(.search-button, .nav-trigger-button) {
  appearance: none;
  background: none;
  border: none;
  box-shadow: none;
}

.nav-trigger-icon {
  position: relative;
  display: inline-block;
  width: 20px;
  height: 2px;
  margin-block: 11px;
  background: #fff;
  transition: background .5s;
}

.nav-trigger-icon::before,
.nav-trigger-icon::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  height: 2px;
  background: #fff;
  transform-origin: 1px center;
}

.nav-trigger-icon::before {
  top: -6px;
}

.nav-trigger-icon::after {
  bottom: -6px;
}

.nav-trigger-button[aria-expanded="true"] .nav-trigger-icon {
  background: rgba(255, 255, 255, 0);
}

.nav-trigger-button[aria-expanded="true"] .nav-trigger-icon::before {
  rotate: 34deg;
  scale: 1.13 1;
}

.nav-trigger-button[aria-expanded="true"] .nav-trigger-icon::after {
  rotate: -34deg;
  scale: 1.13 1;
}

.header-nav {
  position: fixed;
  inset: var(--header-height) 0 0 0;
  padding: 2rem;
  background: var(--primary-alpha-strong);
  backdrop-filter: blur(1rem);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  overflow: hidden auto;
}

.header-nav.is-opened {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.menu-heading-button {
  position: relative;
  width: 100%;
  margin: 0;
  padding: .8em 2em .8em 0;
  background: none;
  border-top: 1px solid var(--white-alpha-weak);
  border-bottom: none;
  border-inline: none;
  box-shadow: none;
  appearance: none;
  color: var(--white);
  font-size: 1.125em;
  text-align: start;
}

.menu-heading-button::after {
  content: '';
  position: absolute;
  inset: 1em 0 auto auto;
  display: block;
  width: 16px;
  height: 16px;
  background: var(--light-icon-url) -128px 0px / 240px 80px no-repeat;
}

.menu-heading-button[aria-expanded="true"]::after {
  animation: change-arrow .5s alternate forwards;
}

@keyframes change-arrow {
  0% {
    opacity: 1;
  }
  49% {
    opacity: 0;
    background-position: -128px 0px;
  }
  50% {
    opacity: 0;
    background-position: -112px 0px;
  }
  100% {
    opacity: 1;
    background-position: -112px 0px;
  }
}

.menu-heading-button ~ .sub-menu {
  height: 0;
  opacity: 0;
  pointer-events: none;
}

.main-menu .sub-menu.is-opened {
  height: fit-content;
  padding-bottom: 1.3rem;
  opacity: 1;
  pointer-events: auto;
}

.main-menu .menu-item:not(:has(.category-image)) .sub-menu {
  column-count: 3;
  column-width: 9rem;
  column-gap: 1.2rem;
}

.main-menu .sub-menu .menu-link:not(:has(.category-image)) {
  position: relative;
  padding-inline-start: 1.2em;
  break-inside: avoid-column;
}

.main-menu .sub-menu .menu-link:not(:has(.category-image))::before {
  content: '';
  position: absolute;
  inset: calc((1lh - 1em) / 2) auto auto 0;
  display: inline-block;
  width: 16px;
  height: 16px;
  background: var(--light-icon-url) -144px 0px / 240px 80px no-repeat;
}

.main-menu .sub-menu .menu-item + .menu-item {
  margin-top: .4em;
}

.header-nav .menu-link {
  display: block;
  color: var(--white);
}

.header-nav .menu-link:has(.category-image) {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  column-gap: .7rem;
}

.header-nav .category-image {
  width: 4rem;
  height: 4rem;
  object-fit: cover;
  border-radius: var(--radius-sm);
}

.header-nav .search-button {
  display: none;
}

.header-nav .secondary-menu {
  padding-top: 1.5rem;
  border-top: 1px solid var(--white-alpha-weak);
  font-size: .9rem;
}

.header-nav .secondary-menu .menu-item {
  margin-bottom: .5em;
}

.header-nav .secondary-menu-icon-wrapper {
  display: none;
}

.header-nav .secondary-menu-name .pc-hidden {
  display: inline;
}

/* floating search form */

.floating-search-form-wrapper {
  position: fixed;
  inset: 0;
  display: grid;
  place-content: center;
  z-index: 500;
  background: var(--primary-alpha-strong);
  backdrop-filter: blur(1rem);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .5s;
}

.floating-search-form-wrapper.is-opened {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.floating-search-form-wrapper .search-form {
  position: relative;
  display: flex;
  flex-flow: column nowrap;
  gap: 1rem;
  align-items: center;
  width: min(100vw - 4rem, 300px + 5rem);
  padding: 2.5rem;
  background: var(--white);
  border-radius: var(--radius-md);
}

.floating-search-form-wrapper .close-button {
  position: absolute;
  inset: .5rem .5rem auto auto;
  display: block;
  width: 1.5rem;
  height: 1.5rem;
  appearance: none;
  border: none;
  background: transparent;
}

.floating-search-form-wrapper .close-button::before,
.floating-search-form-wrapper .close-button::after {
  content: '';
  position: absolute;
  inset: calc(50% - 1px) 0;
  width: 100%;
  height: 2px;
  background: var(--primary);
  transform-origin: center;
}

.floating-search-form-wrapper .close-button::before {
  rotate: -45deg;
}

.floating-search-form-wrapper .close-button::after {
  rotate: 45deg;
}

.floating-search-form-wrapper .form-select {
  appearance: none;
  width: min(100%, 300px);
  height: auto;
  padding: .2rem 1.7rem .2rem .5rem;
  background:
      var(--arrow-bottom-svg) no-repeat calc(100% - .2rem) 50% / 1.2rem auto,
      var(--white);
  border: 1px solid;
  color: var(--primary);
  font-size: 1rem;
  line-height: 1.6;
}

.floating-search-form-wrapper .form-input {
  appearance: none;
  width: min(100%, 300px);
  height: auto;
  padding: .2rem .5rem;
  border: 1px solid;
  box-sizing: border-box;
  color: var(--primary);
  font-size: 1rem;
  line-height: 1.6;
}

.floating-search-form-wrapper .search-submit-button {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .2rem;
  padding: .2rem 1.5rem;
  background: var(--primary);
  border: 1px solid var(--primary);
  border-radius: var(--radius-sm);
  color: var(--white);
  font-size: 1rem;
  line-height: 1.6;
}

/* footer */

.site-footer {
  padding: 3rem clamp(1rem, 7vw, 300px);
  background: var(--primary);
  color: var(--white);
}

.site-footer a,
.site-footer a:visited,
.site-footer a:active,
.site-footer a:focus {
  color: var(--white);
}

.footer-banner-list {
  display: flex;
  flex-flow: row wrap;
  gap: 2rem;
  justify-content: stretch;
}

.footer-banner-item {
  flex: 1 0 max((100% - 2rem) / 2, 20rem);
}

.footer-banner-link {
  display: grid;
  align-content: center;
  width: 100%;
  aspect-ratio: 13 / 4;
  padding: 1.3rem;
  background-color: var(--primary);
  background-size: cover;
  border-radius: var(--radius-sm);
  color: var(--white);
  font-weight: 700;
  text-shadow: 0 0 .6rem var(--primary-alpha-medium);
  transition: text-shadow .5s;
}

.footer-banner-link:visited {
  color: var(--white);
}

.footer-banner-link:hover,
.footer-banner-link:active {
  color: var(--white);
  text-decoration: none;
  text-shadow: 0 0 1rem var(--white-alpha-strong);
}

.footer-banner-link .banner-lead {
  display: block;
  margin-bottom: .4em;
  font-size: .875rem;
}

.footer-banner-link .banner-title {
  display: block;
  font-size: 1.25rem;
}

.footer-nav-wrapper {
  display: grid;
  grid-template-areas:
    'title'
    'nav'
    'sns';
  gap: 2rem;
  margin-block: clamp(2rem, 6vw, 3.75rem);
}

.footer-logo-link {
  grid-area: title;
  width: clamp(100px, 40%, 150px);
  height: fit-content;
}

.footer-logo-image {
  width: 100%;
}

.footer-sns-list {
  grid-area: sns;
}

.footer-menu {
  grid-area: nav;
}

.footer-menu .menu-group-title {
  display: inline-block;
  margin-block-end: .3em;
  font-family: var(--mincho-font);
  font-size: 1.125rem;
}

.footer-menu .sub-menu {
  margin-left: 1em;
}

.footer-menu > .menu-item:not(:first-child) {
  margin-top: .8rem;
}

.footer-menu .menu-link {
  color: #fff;
}

.footer-menu .menu-link:not(.menu-group-title) {
  font-size: .8125rem;
}

.footer-secondary-menu {
  column-count: 3;
  column-width: calc(13rem * .8125);
  column-gap: 1rem;
}

.site-footer .notes,
.copyright {
  font-size: calc(10 / 16 * 1rem);
}

.footer-copyright-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

/* responsive */

@media (min-width: 769px) {
  .pc-hidden {
    display: none;
  }

  .site-header .pc-hidden {
    display: block;
  }

  /* footer */

  .footer-nav-wrapper {
    grid-template-areas:
      'title nav'
      'sns nav';
    column-gap: 10%;
  }

  .footer-sns-list {
    margin-block-start: auto;
  }

  .footer-menu {
    justify-self: end;
    max-width: 780px;
    column-count: 3;
    column-gap: max(2rem, 4vw);
  }

  .footer-menu > .menu-item {
    break-inside: avoid;
  }

  .footer-secondary-menu {
    column-count: 1;
  }

  /* page */

  .page-header.has-bg {
    background-size: auto 100%;
    background-position: 100% 50%;
  }

  /* about page */

  .history-item {
    grid-template-columns: 1.2em 13rem auto;
    grid-template-rows: minmax(2.5rem, max-content);
    grid-template-areas: 'marker year content';
  }

  .history-content p:first-child {
    margin-block-start: 0;
  }

  .access-inner {
    display: grid;
    grid-template-columns: auto auto;
    grid-auto-flow: dense;
  }

  .access-map-group {
    grid-row-end: span 2;
  }

  /* products list */

  .products-list {
    grid-template-columns: repeat(3, 1fr);
  }

  .products-list-sm {
    grid-template-columns: repeat(3, 1fr);
  }

  .products-list-lg {
    grid-template-columns: repeat(2, 1fr);
  }
} /* 769px~ */

@media (min-width: 1024px) {
  /* products list */

  .products-list {
    grid-template-columns: repeat(4, 1fr);
  }

  .products-list-sm {
    grid-template-columns: repeat(6, 1fr);
  }

  .products-list-lg {
    grid-template-columns: repeat(4, 1fr);
  }
} /* 1024px~ */

@media (min-width: 1380px) {
  .site-header .pc-hidden {
    display: none;
  }

  .site-title-link {
    flex-shrink: 0;
  }

  .header-nav-wrapper {
    flex-basis: 75%;
    flex-grow: 1;
  }

  .header-nav {
    flex-basis: 100%;
    position: initial;
    inset: auto;
    padding: 0;
    background: none;
    backdrop-filter: none;
    overflow: visible;
  }

  .header-nav-inner {
    display: flex;
    justify-content: space-evenly;
    column-gap: 3rem;
  }

  .header-nav :is(.main-menu, .secondary-menu) {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    font-size: .8rem;
  }

  .header-nav .main-menu {
    column-gap: 1rem;
    margin-inline: auto;
  }

  .main-menu > .menu-item {
    position: relative;
    flex-basis: fit-content;
  }

  .main-menu .menu-heading-button {
    padding-inline: .5em 1.5em;
    border-top: none;
  }

  .main-menu > .menu-item .sub-menu {
    position: absolute;
    inset: calc(100% - 1px) 50% auto;
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(10, auto);
    gap: 0 3em !important;
    width: max-content;
    height: fit-content;
    padding: 1.1rem 1.8rem 1.5rem;
    background: var(--secondary);
    border-radius: var(--radius-md);
    translate: -50% 0;
    column-count: unset !important;
  }

  .main-menu > .menu-item .sub-menu .menu-item {
    margin-block-start: .4rem;
  }

  .main-menu .menu-heading-button:hover ~ .sub-menu,
  .main-menu > .menu-item .sub-menu:hover {
    opacity: 1;
    pointer-events: auto;
  }

  .header-nav .menu-link {
    color: var(--primary);
  }

  .main-menu .sub-menu .menu-link:not(:has(.category-image))::before {
    background-image: var(--dark-icon-url);
  }

  .header-nav .search-button {
    display: block;
  }

  .header-nav .secondary-menu {
    column-gap: 1.3rem;
    padding-top: 0;
    border-top: none;
  }

  .header-nav .secondary-menu .menu-item-with-icon .menu-link {
    display: flex;
    flex-direction: column;
    text-align: center;
    transition: opacity .5s;
  }

  @media (hover: hover) {
    .header-nav .secondary-menu .menu-item-with-icon .menu-link:hover {
      text-decoration: none;
      opacity: .6;
    }
  }

  .header-nav .secondary-menu .menu-item-with-icon .secondary-menu-name {
    color: var(--white);
    font-size: .65rem;
  }

  .header-nav .secondary-menu .menu-item:has(.icon-user) .secondary-menu-name {
    letter-spacing: 0;
  }

  .header-nav .secondary-menu-name .pc-hidden {
    display: none;
  }

  .header-nav .secondary-menu-icon-wrapper {
    display: block;
  }

  .header-nav .secondary-menu .icon-tkhk-light.icon-lg {
    vertical-align: bottom;
  }

  .header-nav .icon-cart {
    vertical-align: middle;
  }

  .header-cart-count {
    color: var(--white);
    line-height: 0;
  }
}

/* 元のテンプレートのスタイル */

/* font */
.txt_l { text-align: left; }
.txt_c { text-align: center; }
.txt_r { text-align: right; }
.txt_fwn { font-weight: normal; }
.txt_fwb { font-weight: bold; }
.txt_10 { font-size: 10px; }
.txt_12 { font-size: 12px; }
.txt_14 { font-size: 14px; }
.txt_16 { font-size: 16px; }
.txt_18 { font-size: 18px; }
.txt_20 { font-size: 20px; }
.txt_24 { font-size: 24px; }
.txt_28 { font-size: 28px; }
.txt_c_333 {color: #333;}

/* background */
.bgc_gray {
  background-color: #f1f1f1;
}

/* margin */
.mar_auto { margin: 0 auto; }
.mar_0 { margin: 0; }
.mar_t_0 { margin-top: 0; }
.mar_r_0 { margin-right: 0; }
.mar_b_0 { margin-bottom: 0; }
.mar_l_0 { margin-left: 0; }
.mar_5 { margin: 5px; }
.mar_t_5 { margin-top: 5px; }
.mar_r_5 { margin-right: 5px; }
.mar_b_5 { margin-bottom: 5px; }
.mar_l_5 { margin-left: 5px; }
.mar_t_10 { margin-top: 10px; }
.mar_r_10 { margin-right: 10px; }
.mar_b_10 { margin-bottom: 10px; }
.mar_l_10 { margin-left: 10px; }
.mar_t_20 { margin-top: 20px; }
.mar_r_20 { margin-right: 20px; }
.mar_b_20 { margin-bottom: 20px; }
.mar_l_20 { margin-left: 20px; }
.mar_t_30 { margin-top: 30px; }
.mar_r_30 { margin-right: 30px; }
.mar_b_30 { margin-bottom: 30px; }
.mar_l_30 { margin-left: 30px; }
.mar_t_50 { margin-top: 50px; }
.mar_r_50 { margin-right: 50px; }
.mar_b_50 { margin-bottom: 50px; }
.mar_l_50 { margin-left: 50px; }

/* padding */
.pad_v_10 { padding: 10px 0; }
.pad_v_20 { padding: 20px 0; }
.pad_v_30 { padding: 30px 0; }
.pad_0 { padding: 0; }
.pad_t_0 { padding-top: 0; }
.pad_r_0 { padding-right: 0; }
.pad_b_0 { padding-bottom: 0; }
.pad_l_0 { padding-left: 0; }
.pad_5 { padding: 5px; }
.pad_t_5 { padding-top: 5px; }
.pad_r_5 { padding-right: 5px; }
.pad_b_5 { padding-bottom: 5px; }
.pad_l_5 { padding-left: 5px; }
.pad_10 { padding: 10px; }
.pad_t_10 { padding-top: 10px; }
.pad_r_10 { padding-right: 10px; }
.pad_b_10 { padding-bottom: 10px; }
.pad_l_10 { padding-left: 10px; }
.pad_20 { padding: 20px; }
.pad_t_20 { padding-top: 20px; }
.pad_r_20 { padding-right: 20px; }
.pad_b_20 { padding-bottom: 20px; }
.pad_l_20 { padding-left: 20px; }
.pad_30 { padding: 30px}
.pad_t_30 { padding-top: 30px; }
.pad_r_30 { padding-right: 30px; }
.pad_b_30 { padding-bottom: 30px; }
.pad_l_30 { padding-left: 30px; }

/* border */
.bor_t_1 { border-top: 1px solid #eee; }
.bor_r_1 { border-right: 1px solid #eee; }
.bor_b_1 { border-bottom: 1px solid #eee; }
.bor_l_1 { border-left: 1px solid #eee; }

/* vertical align */
.va-10 { vertical-align: -10%; }
.va-20 { vertical-align: -20%; }
.va-30 { vertical-align: -30%; }
.va-35 { vertical-align: -35%; }
.va-40 { vertical-align: -40%; }

@media (max-width: 980px) {
  /* ~980px */
  #base_gmoWrapp,
  #gmo_CMSPbar {
    overflow: hidden;
    min-width: 100% !important;
    width: 100% !important;
  }
}
@media (max-width: 768px) {
  /* ~768px */
  #contents {
    padding-left: 0;
  }
}
@media (max-width: 480px) {
  /* ~480px */
}

/* icons */
.icon-user:is(.icon-b, .icon-w) { background-position: -208px 0px; }
.icon-user:is(.icon-lg-b, .icon-lg-w) { background-position: -312px 0px; }
.icon-adduser:is(.icon-b, .icon-w) { background-position: -240px 0px; }
.icon-adduser:is(.icon-lg-b, .icon-lg-w) { background-position: -360px 0px; }
.icon-login:is(.icon-b, .icon-w) { background-position: -48px -80px; }
.icon-login:is(.icon-lg-b, .icon-lg-w) { background-position: -72px -120px; }
.icon-logout:is(.icon-b, .icon-w) { background-position: -32px -80px; }
.icon-logout:is(.icon-lg-b, .icon-lg-w) { background-position: -48px -120px; }
.icon-home:is(.icon-b, .icon-w) { background-position: -176px -16px; }
.icon-home:is(.icon-lg-b, .icon-lg-w) { background-position: -264px -24px; }
.icon-mail:is(.icon-b, .icon-w) { background-position: -64px 0px; }
.icon-mail:is(.icon-lg-b, .icon-lg-w) { background-position: -96px 0px; }
.icon-pencil:is(.icon-b, .icon-w) { background-position: -96px 0px; }
.icon-pencil:is(.icon-lg-b, .icon-lg-w) { background-position: -144px 0px; }
.icon-help:is(.icon-b, .icon-w) { background-position: -272px -80px; }
.icon-help:is(.icon-lg-b, .icon-lg-w) { background-position: -408px -120px; }
.icon-cart:is(.icon-b, .icon-w) { background-position: -176px -64px; }
.icon-cart:is(.icon-lg-b, .icon-lg-w) { background-position: -264px -96px; }
.icon-search:is(.icon-b, .icon-w) { background-position: -208px -16px; }
.icon-search:is(.icon-lg-b, .icon-lg-w) { background-position: -312px -24px; }
.icon-chevron_up:is(.icon-b, .icon-w) { background-position: -0px -144px; }
.icon-chevron_up:is(.icon-lg-b, .icon-lg-w) { background-position: -0px -216px; }
.icon-chevron_down:is(.icon-b, .icon-w) { background-position: -352px -128px; }
.icon-chevron_down:is(.icon-lg-b, .icon-lg-w) { background-position: -528px -192px; }
.icon-twitter:is(.icon-b, .icon-w) { background-position: -96px -176px; }
.icon-twitter:is(.icon-lg-b, .icon-lg-w) { background-position: -144px -264px; }
.icon-instagram:is(.icon-b, .icon-w) { background-position: -112px -192px; }
.icon-instagram:is(.icon-lg-b, .icon-lg-w) { background-position: -168px -288px; }
.icon-facebook:is(.icon-b, .icon-w) { background-position: -128px -176px; }
.icon-facebook:is(.icon-lg-b, .icon-lg-w) {background-position: -192px -264px; }
.icon-youtube:is(.icon-b, .icon-w) { background-position: -128px -160px; }
.icon-youtube:is(.icon-lg-b, .icon-lg-w) { background-position: -191px -240px; }

.icon-b,
.icon-w {
  width: 16px;
  height: 16px;
  display: inline-block;
  *display: inline;
  *zoom: 1;
}
.icon-lg-b,
.icon-lg-w {
  width: 24px;
  height: 24px;
  display: inline-block;
  *display: inline;
  *zoom: 1;
}

.icon-b { background-image: url(https://img.shop-pro.jp/tmpl_img/73/icon16_b.png); }
.icon-w { background-image: url(https://img.shop-pro.jp/tmpl_img/73/icon16_w.png); }
.icon-lg-b { background-image: url(https://img.shop-pro.jp/tmpl_img/73/icon24_b.png); }
.icon-lg-w { background-image: url(https://img.shop-pro.jp/tmpl_img/73/icon24_w.png); }

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
  .icon-b,
  .icon-w {
    -webkit-background-size: 368px 320px;
    background-size: 368px 320px;
  }

  .icon-lg-b,
  .icon-lg-w {
    -webkit-background-size: 552px 480px;
    background-size: 552px 480px;
  }

  .icon-b { background-image: url(https://img.shop-pro.jp/tmpl_img/73/icon16_2x_b.png); }
  .icon-w { background-image: url(https://img.shop-pro.jp/tmpl_img/73/icon16_2x_w.png); }
  .icon-lg-b { background-image: url(https://img.shop-pro.jp/tmpl_img/73/icon24_2x_b.png); }
  .icon-lg-w { background-image: url(https://img.shop-pro.jp/tmpl_img/73/icon24_2x_w.png); }
}
@media (max-width: 768px) {
  .icon-b { background-image: url(https://img.shop-pro.jp/tmpl_img/73/icon24_b.png); }
  .icon-w { background-image: url(https://img.shop-pro.jp/tmpl_img/73/icon24_w.png); }
}
@media only screen and (max-width: 768px) and (-webkit-min-device-pixel-ratio: 2), only screen and (max-width: 768px) and (min--moz-device-pixel-ratio: 2), only screen and (max-width: 768px) and (-o-min-device-pixel-ratio: 2 / 1), only screen and (max-width: 768px) and (min-device-pixel-ratio: 2), only screen and (max-width: 768px) and (min-resolution: 192dpi), only screen and (max-width: 768px) and (min-resolution: 2dppx) {
  .icon-b { background-image: url(https://img.shop-pro.jp/tmpl_img/73/icon24_2x_b.png); }
  .icon-w { background-image: url(https://img.shop-pro.jp/tmpl_img/73/icon24_2x_w.png); }
}

@media print {
  .site-footer,
  .breadcrumb-item .icon-arrow-right,
  .page-content .contents-footer {
    display: none;
  }

  .site-header {
    position: relative;
    margin-bottom: .5rem;
    padding-block: .5rem;
    border-bottom: 1px solid;
  }

  .site-title-link .logo-image-white {
    filter: invert(1);
  }

  .header-nav-wrapper {
    opacity: 0;
  }

  .page-content-inner {
    margin-block-start: 0;
  }

  .breadcrumb-item:not(:first-child)::before {
    content: '';
    width: .4em;
    height: .4em;
    display: inline-block;
    border-right: 1px solid;
    border-top: 1px solid;
    rotate: 45deg;
    margin: 0 .25em .15em 0;
  }

  .page-header.has-bg {
    padding: 0;
  }

  .page-static h2::before {
    width: 0;
    background: transparent;
    border-inline: .5em solid;
  }

  .page-static h3::before {
    width: 0;
    background: transparent;
    border-inline: .25em solid;
  }

  .page-about h3::before,
  .page-about h4::before,
  .history-item::before {
    background: transparent;
    width: 0;
    height: 0;
    border-style: solid;
    border-radius: 50%;
  }

  .page-about h3::before {
    border-width: .4lh;
  }

  .page-about h4::before {
    border-width: .5em;
  }

  .history-item::before {
    border-width: .6em;
  }

  .sticky-top {
    position: relative;
    top: 0;
  }

  table {
    break-inside: avoid-page;
  }

  .history-item {
    grid-template-columns: 1.2em 13rem auto;
    grid-template-rows: minmax(2.5rem, max-content);
    grid-template-areas: 'marker year content';
  }

  .history-content p:first-child {
    margin-block-start: 0;
  }

  .sort-selector {
    padding-inline: 1em;
  }
}


/* TODO: パスワード入力不要になったら削除する */

.preview-auth {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fff;
}

.preview-auth.is-hidden {
  display: none;
}

.preview-auth__inner {
  width: min(90%, 320px);
}

.preview-auth__error {
  display: none;
  color: #c00;
  margin-top: 10px;
}

.preview-auth__error.is-show {
  display: block;
}

#previewPassword {
  font-size: 16px;
  height: calc(1lh + .6em + 2px);
  padding: .3em;
  line-height: 1.6;
}