@charset "UTF-8";
/*---------------------------------------------

Style CSS

for www.kasugai.co.jp
coded by d-spica at 2023-09-05

---------------------------------------------*/
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;400;500;700;900&display=swap");
/*---------------------------------------------

Set CSS

for www.kasugai.co.jp
coded by d-spica at 2023-09-05
imported to "style.scss"

---------------------------------------------*/
/* Reset */
body, header, hgroup, main, section, article, aside, nav, footer, main, figure, figcaption, picture, div,
h1, h2, h3, h4, h5, h6, p, dl, dt, dd, ul, ol, li, hr,
blockquote, pre, table, caption, th, td, address,
form, fieldset, legend, object {
  margin: 0;
  padding: 0;
}

h1, h2, h3, h4, h5, h6, pre, table, code, kbd, samp, acronym, time, input, textarea, select {
  font-size: 100%;
}

a, ins, u {
  text-decoration: none;
}

h1, h2, h3, h4, h5, h6, strong, b {
  font-weight: inherit;
}

address, em, i, b, cite, dfn, var {
  font-style: normal;
}

fieldset {
  border: none;
}

input, textarea {
  font-family: inherit;
  font-weight: normal;
}

input, button {
  margin: 0;
  vertical-align: middle;
}

img {
  border: none;
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

picture, video {
  vertical-align: bottom;
}

mark {
  background: none;
}

a, input, button, textarea {
  outline: none;
}

[type=text], [type=email], [type=tel], [type=submit], [type=button], select, textarea, button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
  outline: none;
  background: none;
  padding: 0;
  font-size: 100%;
}

/* Setting */
ul {
  list-style-position: outside;
  list-style-type: none;
}

ol {
  list-style-position: outside;
}

table {
  border-collapse: collapse;
}

/* Set Var */
:root {
  --sans-font: "Noto Sans JP", sans-serif;
  --backgound-color: #FFF;
  --font-color: #000;
  --key-color: #E4007F;
  --lightkey-color: #FDEDF6;
  --candy-color: #E46AB2;
  --bean-color: #5BB647;
  --gummy-color: #FFB239;
  --ramune-color: #5FABE0;
  --link-color: #29abe2;
  --speed: 0.4s;
  --speed-slow: 4s;
  --h-margin: max(6vw, calc(50vw - 23.2rem));
}

/*---------------------------------------------

Base CSS

for www.kasugai.co.jp
coded by d-spica at 2023-09-05
imported to "style.scss"

---------------------------------------------*/
html {
  background: #FFF;
  line-height: 1.4;
  font-family: var(--sans-font);
  font-size: min(20px, clamp(16px, 0.4848484848vw + 14.1818181818px, 20px));
  font-weight: 400;
  color: var(--font-color);
  scroll-behavior: smooth;
}

body {
  -webkit-text-size-adjust: 100%;
  opacity: 1;
  transition: opacity var(--speed);
}
body.loading {
  opacity: 0;
}

#page {
  position: relative;
  overflow: hidden;
}

hr {
  visibility: hidden;
  height: 0;
  clear: both;
}

a {
  color: inherit;
  transition: opacity var(--speed);
}

strong {
  font-weight: 700;
}

picture {
  display: block;
}

.obp-S,
.obp-M,
.obp-L {
  display: none;
}

header.header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9;
  width: 100%;
  background-color: #FFF;
}
header.header .hgroup {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.2rem 6.4rem 1.2rem 1.6rem;
}
header.header .hgroup .logo img {
  vertical-align: middle;
}
header.header .hgroup .logo img[src*="lg-en.svg"] {
  width: 4.8rem;
}
header.header .hgroup .copy {
  display: none;
}
header.header .hgroup ul.search {
  margin-left: auto;
  padding: 0;
  width: min(36vw, 10rem);
}
header.header .hgroup ul.search .widget_search .wp-block-search__inside-wrapper {
  position: relative;
  margin-bottom: 0;
  font-size: 0.8rem;
}
header.header .hgroup ul.search .widget_search .wp-block-search__input {
  border: solid 1px #000;
  border-radius: 9999rem;
  padding: 0.2rem 0.5rem 0.2rem 1.5rem;
  font-size: 100%;
}
header.header .hgroup ul.search .widget_search .wp-block-search__input::-moz-placeholder {
  color: #AAA;
}
header.header .hgroup ul.search .widget_search .wp-block-search__input::placeholder {
  color: #AAA;
}
header.header .hgroup ul.search .widget_search button.wp-element-button {
  position: absolute;
  top: calc(50% - 0.4rem);
  left: 0.5rem;
  border: none;
  margin-left: 0;
  background-color: transparent;
  background-image: none;
  background: url("../img/mk-search.svg") no-repeat 50% 50%/contain;
  padding: 0.1rem;
  width: 0.8rem;
  height: 0.8rem;
  text-indent: -9999rem;
}
header.header .nav dt {
  position: absolute;
  top: 0;
  right: 0;
  padding: 1.2rem 1.6rem;
  width: 1.4rem;
  height: 1.4rem;
  cursor: pointer;
}
header.header .nav dt::before {
  content: "";
  display: block;
  position: absolute;
  top: calc(50% - 3rem);
  left: calc(50% - 3rem);
  z-index: -1;
  border-radius: 9999rem;
  background-color: var(--key-color);
  width: 6rem;
  height: 6rem;
}
header.header .nav dt span {
  position: absolute;
  top: calc(50% - 0.5px);
  right: calc(50% - 0.7rem);
  background-color: #FFF;
  width: 1.4rem;
  height: 1px;
  transition: var(--speed);
}
header.header .nav dt span:nth-of-type(1) {
  translate: 0 -0.5rem;
}
header.header .nav dt span:nth-of-type(3) {
  translate: 0 0.5rem;
}
header.header .nav dt.is-opened span:nth-of-type(1) {
  translate: 0;
  rotate: -135deg;
}
header.header .nav dt.is-opened span:nth-of-type(2) {
  scale: 0;
}
header.header .nav dt.is-opened span:nth-of-type(3) {
  translate: 0;
  rotate: 135deg;
}
header.header .nav dt.is-opened img {
  scale: 0;
}
header.header .nav dd {
  position: fixed;
  top: 3.8rem;
  right: 0;
  overflow: auto;
  box-sizing: border-box;
  border: solid 1.6rem var(--key-color);
  background-color: #FFF;
  padding: 1.2rem;
  width: 100%;
  height: calc(100vh - 3.8rem);
  height: calc(100dvh - 3.8rem);
  letter-spacing: 0.1em;
  font-size: 0.7rem;
}
header.header .nav dd .main1 {
  position: relative;
  padding-top: min(51.666vw + 1.2rem, 18rem);
  font-weight: 500;
}
header.header .nav dd .main1 > li > em, header.header .nav dd .main1 > li > a {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 0.4rem;
  background-color: #E3E3E3;
  width: 32%;
  height: min(25vw, 8rem);
  text-align: center;
  line-height: 1.5;
  cursor: pointer;
}
header.header .nav dd .main1 > li > em::before, header.header .nav dd .main1 > li > a::before {
  content: "";
  display: block;
  margin-bottom: 0.5em;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
}
header.header .nav dd .main1 > li > em:hover, header.header .nav dd .main1 > li > a:hover {
  opacity: 0.7;
}
header.header .nav dd .main1 > li > em.is-opened, header.header .nav dd .main1 > li > a.is-opened {
  background-color: var(--lightkey-color);
}
header.header .nav dd .main1 > li ul {
  display: flex;
  border-top: solid 1px;
  padding: 1.2rem 0;
}
header.header .nav dd .main1 > li li a {
  display: block;
  border-radius: 0.4rem;
  background-color: var(--lightkey-color);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: min(25vw, 8rem);
  text-align: center;
  line-height: 1.5;
}
header.header .nav dd .main1 > li li a:hover {
  opacity: 0.7;
}
header.header .nav dd .main1 .product a {
  top: 0;
  left: 0;
}
header.header .nav dd .main1 .product a::before {
  background-image: url("../img/mk-products.svg");
  width: 0.95rem;
  height: 1.3rem;
}
header.header .nav dd .main1 .information em {
  top: 0;
  left: 34%;
}
header.header .nav dd .main1 .information em::before {
  background-image: url("../img/mk-information.svg");
  width: 0.95rem;
  height: 1.3rem;
}
header.header .nav dd .main1 .information ul {
  flex-wrap: wrap;
  justify-content: center;
  gap: 2vw 2%;
}
header.header .nav dd .main1 .information li {
  width: 32%;
}
header.header .nav dd .main1 .introduction em {
  top: 0;
  left: 68%;
}
header.header .nav dd .main1 .introduction em::before {
  background-image: url("../img/mk-introduction.svg");
  width: 1.65rem;
  height: 1.3rem;
}
header.header .nav dd .main1 .introduction ul {
  gap: 0 2%;
}
header.header .nav dd .main1 .introduction li {
  flex: 1;
}
header.header .nav dd .main1 .campaign a {
  top: min(26.666vw, 8.6666rem);
  left: 0;
}
header.header .nav dd .main1 .campaign a::before {
  background-image: url("../img/mk-campaign.svg");
  width: 1.5rem;
  height: 1.3rem;
}
header.header .nav dd .main1 .okashifreak a {
  top: min(26.666vw, 8.6666rem);
  left: 34%;
  box-sizing: border-box;
  padding: 1%;
}
header.header .nav dd .main1 .okashifreak a img {
  width: 8rem;
  mix-blend-mode: darken;
}
header.header .nav dd .main1 .shopping a {
  top: min(26.666vw, 8.6666rem);
  left: 68%;
}
header.header .nav dd .main1 .shopping a::before {
  background-image: url("../img/mk-shopping.svg");
  width: 1.5rem;
  height: 1.3rem;
}
header.header .nav dd .main2 {
  border-bottom: solid 1px;
  font-weight: 500;
}
header.header .nav dd .main2 > li {
  border-top: solid 1px;
  width: 100%;
}
header.header .nav dd .main2 > li a {
  display: block;
  position: relative;
  padding: 1em;
  font-size: 0.75rem;
  cursor: pointer;
}
header.header .nav dd .main2 > li a:hover {
  opacity: 0.7;
}
header.header .nav dd .sub {
  margin-top: 1.6rem;
  text-align: center;
  font-size: 0.65rem;
}
header.header .nav dd .sub a {
  display: block;
  padding: 0.5em 1em;
}
header.header .nav dd .sns {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1rem;
  margin: 2.4rem auto 0;
  width: 5rem;
}
header.header .nav dd .sns span {
  display: block;
  width: 95%;
  line-height: 0.75rem;
}
header.header .nav dd .sns a {
  display: block;
  width: calc(50% - 0.5rem);
}

main {
  padding-top: 3.9rem;
}

aside.guide {
  display: flex;
  justify-content: flex-start;
  position: absolute;
  bottom: 5.5rem;
  left: calc(50% - 10.5rem);
  z-index: 6;
  width: -moz-fit-content;
  width: fit-content;
  translate: 0 5rem;
  opacity: 0;
  height: 9rem;
  transition: translate var(--speed), opacity var(--speed);
}
aside.guide picture {
  align-self: end;
  margin-right: -1rem;
  width: 5.8rem;
}
aside.guide picture img {
  translate: 0 30%;
}
aside.guide p {
  position: relative;
  background-repeat: no-repeat;
  background-position: 0 50%;
  background-size: contain;
  text-align: center;
  line-height: 1.6;
  font-size: 0.7rem;
  color: var(--key-color);
}
aside.guide p a, aside.guide p span {
  display: block;
  box-sizing: border-box;
}
aside.guide p button {
  position: absolute;
  padding: 0.5em;
  width: 3em;
  cursor: pointer;
}
aside.guide .bubble-S {
  background-image: url("../img/bl-KS.svg");
  height: 5.3rem;
}
aside.guide .bubble-S a, aside.guide .bubble-S span {
  padding: 2em 1em 0 1.1em;
  width: 5.9rem;
  height: 5.3rem;
}
aside.guide .bubble-S button {
  top: -0.5em;
  right: -0.5em;
}
aside.guide .bubble-M {
  background-image: url("../img/bl-KM.svg");
  height: 5.3rem;
}
aside.guide .bubble-M a, aside.guide .bubble-M span {
  padding: 2em 1em 0 1.1em;
  width: 8.75rem;
  height: 5.3rem;
}
aside.guide .bubble-M button {
  top: -0.5em;
  right: calc(0.5rem - 0.5em);
}
aside.guide .bubble-L {
  background-image: url("../img/bl-KL.svg");
  height: 5.95rem;
}
aside.guide .bubble-L a, aside.guide .bubble-L span {
  padding: 1.8em 1.6em 0 1.3em;
  width: 9.7rem;
  height: 5.95rem;
}
aside.guide .bubble-L button {
  top: -0.5em;
  right: calc(0.5rem - 0.5em);
}
aside.guide.is-arrival {
  opacity: 1;
  translate: 0;
}

aside.sns {
  background-color: #FFF;
  padding: 2rem var(--h-margin);
  text-align: center;
}
aside.sns h3 {
  position: relative;
  margin: 0 auto 1.5em;
  background-color: var(--key-color);
  padding: 0.3em 1em;
  width: -moz-fit-content;
  width: fit-content;
  letter-spacing: 0.05em;
  font-size: 0.65rem;
  font-weight: 500;
  color: #FFF;
}
aside.sns h3::after {
  content: "";
  display: block;
  position: absolute;
  bottom: -0.6em;
  left: calc(50% - 0.4em);
  border-top: solid 0.7em var(--key-color);
  border-left: solid 0.4em transparent;
  border-right: solid 0.4em transparent;
  width: 0;
  height: 0;
}
aside.sns p {
  margin-top: 1em;
  line-height: 1.9;
  letter-spacing: 0.1em;
  font-size: 0.7rem;
}
aside.sns .icons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1rem;
  margin: 0 auto;
  width: 5rem;
}
aside.sns .icons span {
  display: block;
  width: 95%;
  line-height: 0.75rem;
}
aside.sns .icons a {
  display: block;
  width: calc(50% - 0.5rem);
}

.page-factory_post aside.sns, .page-members_post aside.sns, .page-corporate aside.sns, .page-vision aside.sns, .page-profile aside.sns, .page-history aside.sns, .page-offices aside.sns, .page-recruit aside.sns, .page-campaign aside.sns, .page-information_post aside.sns, .page-action aside.sns, .page-quality aside.sns, .page-environment aside.sns, .page-society aside.sns, .page-sdgs aside.sns, .page-snack_kasugai aside.sns, .page-farm_post aside.sns, .page-thanks_post aside.sns {
  position: relative;
}
.page-factory_post aside.sns::before, .page-members_post aside.sns::before, .page-corporate aside.sns::before, .page-vision aside.sns::before, .page-profile aside.sns::before, .page-history aside.sns::before, .page-offices aside.sns::before, .page-recruit aside.sns::before, .page-campaign aside.sns::before, .page-information_post aside.sns::before, .page-action aside.sns::before, .page-quality aside.sns::before, .page-environment aside.sns::before, .page-society aside.sns::before, .page-sdgs aside.sns::before, .page-snack_kasugai aside.sns::before, .page-farm_post aside.sns::before, .page-thanks_post aside.sns::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: var(--h-margin);
  background-color: #AAA;
  width: calc(100% - 2 * var(--h-margin));
  height: 1px;
}

footer.footer {
  display: flex;
  flex-wrap: wrap;
  position: relative;
  background-color: var(--key-color);
  padding: 1.2rem 8vw 0;
  font-size: 0.6rem;
  color: #FFF;
}
footer.footer a:hover {
  opacity: 0.7;
}
footer.footer dl {
  width: 50%;
}
footer.footer dt {
  margin-bottom: 4.55rem;
}
footer.footer dt img {
  width: 4.7rem;
  filter: grayscale(1) brightness(5);
}
footer.footer dd {
  letter-spacing: 0.1em;
}
footer.footer .sub {
  display: flex;
  flex-direction: column;
  gap: 1em;
  width: 50%;
  text-align: right;
  letter-spacing: 0.05em;
}
footer.footer .product {
  display: flex;
  position: relative;
  z-index: 7;
  margin: 10rem -6vw 0;
  box-sizing: border-box;
  border-radius: 0.4rem 0.4rem 0 0;
  background-color: #FFF;
  padding: 0.6rem 0.6rem 0;
  width: 96vw;
  text-align: center;
}
footer.footer .product li {
  flex: 1;
  background-color: #CCC;
}
footer.footer .product li a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: min(23vw, 6rem);
  font-size: 0.8rem;
}
footer.footer .product li a::before {
  content: "";
  display: block;
  margin-bottom: 0.5em;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
}
footer.footer .product li [href*=candy] {
  background-color: var(--candy-color);
}
footer.footer .product li [href*=candy]::before {
  background-image: url("../img/mk-candy.svg");
  width: 2rem;
  height: 2rem;
}
footer.footer .product li [href*=bean] {
  background-color: var(--bean-color);
}
footer.footer .product li [href*=bean]::before {
  background-image: url("../img/mk-bean.svg");
  width: 1.6rem;
  height: 2rem;
}
footer.footer .product li [href*=gummy] {
  background-color: var(--gummy-color);
}
footer.footer .product li [href*=gummy]::before {
  background-image: url("../img/mk-gummy.svg");
  width: 1.4rem;
  height: 2rem;
}
footer.footer .product li [href*=ramune] {
  background-color: var(--ramune-color);
}
footer.footer .product li [href*=ramune]::before {
  background-image: url("../img/mk-ramune.svg");
  width: 2rem;
  height: 2rem;
}
footer.footer .nav-up {
  position: fixed;
  bottom: 0.5rem;
  right: 0.75rem;
  z-index: 9;
  width: 3.2rem;
  opacity: 0;
  transition: opacity var(--speed);
}
footer.footer.is-arrival .nav-up {
  position: absolute;
  bottom: auto;
  top: -2.4rem;
}

.is-scroll footer.footer .nav-up {
  opacity: 1;
}

.jetpack-instant-search__search-results-content .jetpack-instant-search__search-results-secondary {
  display: none;
}

.jetpack-instant-search__search-form-controls .jetpack-instant-search__search-results-filter-button {
  display: none;
}

@media all and (min-width: 480px) {
  .obp-S {
    display: inline-block;
  }
  .ubp-S {
    display: none;
  }
  aside.guide {
    bottom: 6rem;
  }
  footer.footer .product {
    margin-left: auto;
    margin-right: auto;
    max-width: 25.2rem;
  }
}
@media all and (min-width: 720px) {
  .obp-M {
    display: inline-block;
  }
  .ubp-M {
    display: none;
  }
  header.header .nav dt {
    z-index: 1;
    transition: right var(--speed);
  }
  header.header .nav dd {
    top: 0;
    left: max(4vw, 50% - 32rem);
    z-index: -1;
    border: none;
    border-radius: 0 0 1.5rem 1.5rem;
    padding-top: 6rem;
    padding-bottom: 6rem;
    width: min(92vw, 64rem);
    height: auto;
  }
  header.header .nav dd .main1 {
    flex: 1;
    margin-bottom: 0.5rem;
    padding-top: clamp(5rem, 12.5vw, 8.5rem);
    transition: margin-bottom var(--speed);
  }
  header.header .nav dd .main1 > li > em, header.header .nav dd .main1 > li > a {
    width: 14%;
    height: clamp(5rem, 12.5vw, 8.5rem);
    font-size: 0.7rem;
  }
  header.header .nav dd .main1 .product ul, header.header .nav dd .main1 .information ul, header.header .nav dd .main1 .introduction ul {
    justify-content: center;
    align-items: center;
    gap: 0.8rem;
    position: absolute;
    left: 0;
    padding: 1.5rem 0 3rem;
    box-sizing: border-box;
    border-top: none;
    background-color: rgba(255, 255, 255, 0.9);
    width: 100%;
    height: 12rem;
  }
  header.header .nav dd .main1 .product li, header.header .nav dd .main1 .information li, header.header .nav dd .main1 .introduction li {
    flex: none;
    width: calc(25% - 0.6rem);
  }
  header.header .nav dd .main1 .product li a, header.header .nav dd .main1 .information li a, header.header .nav dd .main1 .introduction li a {
    display: block;
    border-radius: 9999rem;
    padding: 1.5em 0.5em;
    height: auto;
    font-size: 0.75rem;
  }
  header.header .nav dd .main1 .product a {
    left: 13%;
  }
  header.header .nav dd .main1 .information em {
    left: 28%;
  }
  header.header .nav dd .main1 .information li {
    width: min(14rem, 22%);
  }
  header.header .nav dd .main1 .information li a[href*="#contents"] {
    padding-top: 0.75em;
    padding-bottom: 0.75em;
  }
  header.header .nav dd .main1 .introduction em {
    left: 43%;
  }
  header.header .nav dd .main1 .introduction li {
    width: min(16rem, 30%);
  }
  header.header .nav dd .main1 .campaign a {
    top: 0;
    left: 58%;
  }
  header.header .nav dd .main1 .okashifreak a {
    top: 0;
    left: 73%;
  }
  header.header .nav dd .main1 .okashifreak a::before {
    display: none;
  }
  header.header .nav dd .main1 .okashifreak img {
    width: 9em;
  }
  header.header .nav dd .main1 .shopping a {
    top: 0;
    left: 80.5%;
  }
  header.header .nav dd .main1 .ubp-L {
    display: inline-block;
  }
  header.header .nav dd .main1 .obp-L {
    display: none;
  }
  header.header .nav dd .main1:has(.is-opened) {
    margin-bottom: 12rem;
  }
  header.header .nav dd .main2 {
    flex: 1;
    position: relative;
    border-bottom: none;
    padding-top: clamp(5rem, 12.5vw, 8.5rem);
  }
  header.header .nav dd .main2 > li {
    border-top: none;
  }
  header.header .nav dd .main2 > li a {
    position: absolute;
    top: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 0.4rem;
    background-color: #F17EBE;
    padding: 0;
    width: 14%;
    height: clamp(5rem, 12.5vw, 8.5rem);
    font-size: inherit;
    text-align: center;
    line-height: 1.5;
    color: #FFF;
    font-size: 0.7rem;
    cursor: pointer;
  }
  header.header .nav dd .main2 > li a::before {
    display: none;
  }
  header.header .nav dd .main2 .action a {
    left: 28%;
  }
  header.header .nav dd .main2 .corporate a {
    left: 43%;
  }
  header.header .nav dd .main2 .customer a {
    left: 58%;
  }
  header.header .nav dd .main2 .contact a {
    left: 73%;
  }
  header.header .nav dd .main2 .overseas a {
    left: 13%;
  }
  header.header .nav dd .sub {
    position: absolute;
    bottom: 1rem;
    left: 0;
    width: 100%;
    font-size: 0.55rem;
  }
  header.header .nav dd .sub li {
    display: inline-block;
  }
  header.header .nav dd .sub li:nth-of-type(1) {
    display: none;
  }
  header.header .nav dd .sns {
    position: absolute;
    bottom: 1rem;
    right: calc(max(6vw, 50% - 30rem) - 1rem);
    width: 4.5rem;
  }
  header.header:has(dt.is-opened) .nav dt {
    background-image: none;
  }
}
@media all and (min-width: 960px) {
  .obp-L {
    display: inline-block;
  }
  .ubp-L {
    display: none;
  }
  header.header .hgroup .logo [src*="lg-en.svg"] {
    width: 5.6rem;
    filter: grayscale(0) brightness(1);
  }
  header.header .hgroup .logo [src*="lg-ja.svg"] {
    margin-left: 1rem;
    width: 8.4rem;
    vertical-align: -0.1rem;
  }
  main {
    padding-top: 4.1rem;
  }
  aside.guide {
    bottom: 9.6rem;
    left: calc(50% - 24rem);
  }
  aside.guide picture img {
    translate: 0 0;
  }
  footer.footer {
    position: relative;
    z-index: 7;
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
  footer.footer .sub {
    margin-bottom: 0;
  }
  footer.footer .product {
    display: none;
  }
}
.customize-support header.header {
  top: 32px;
}

@media all and (min-width: 1280px) {
  header.header .hgroup .copy {
    display: block;
    margin-left: 1rem;
    letter-spacing: 0.15em;
    font-size: 0.65rem;
    color: #484848;
  }
  footer.footer .nav-up {
    right: 8vw;
  }
}
@media screen and (max-width: 782px) {
  .customize-support header.header {
    top: 46px;
  }
  .customize-support header.header .nav dd {
    top: calc(3.8rem + 46px);
    height: calc(100vh - 3.8rem - 46px);
    height: calc(100dvh - 3.8rem - 46px);
  }
}
/*---------------------------------------------

Parts CSS

for www.kasugai.co.jp
coded by d-spica at 2023-09-05
imported to "style.scss"

---------------------------------------------*/
header[class^=title] {
  padding: 0.5rem var(--h-margin);
}
header[class^=title] .topicpath {
  position: relative;
  border-top: solid 1px;
  padding: 1em 0 1em 2.8em;
  line-height: 2;
  letter-spacing: 0.05em;
  font-size: 0.6rem;
  font-weight: 500;
  color: #AAA;
}
header[class^=title] .topicpath a, header[class^=title] .topicpath span, header[class^=title] .topicpath em {
  display: inline-block;
}
header[class^=title] .topicpath a:nth-child(1), header[class^=title] .topicpath span:nth-child(1), header[class^=title] .topicpath em:nth-child(1) {
  position: absolute;
  top: 0.8em;
  left: 0;
  width: 2.8em;
}
header[class^=title] .topicpath a:nth-child(n+2), header[class^=title] .topicpath span:nth-child(n+2), header[class^=title] .topicpath em:nth-child(n+2) {
  margin-left: 0.8em;
}
header[class^=title] .topicpath a:nth-child(n+2)::before, header[class^=title] .topicpath span:nth-child(n+2)::before, header[class^=title] .topicpath em:nth-child(n+2)::before {
  content: "";
  display: inline-block;
  margin-right: 0.8em;
  border-top: solid 1px #AAA;
  border-right: solid 1px #AAA;
  width: 0.4em;
  height: 0.4em;
  vertical-align: 0.1em;
  rotate: 45deg;
}
header[class^=title] .topicpath em {
  color: var(--font-color);
}

header.title-I .topicpath {
  border-bottom: solid 1px;
  color: #FFF;
}
header.title-I .topicpath img {
  filter: brightness(5);
}
header.title-I .topicpath a:nth-child(n+2), header.title-I .topicpath span:nth-child(n+2), header.title-I .topicpath em:nth-child(n+2) {
  color: inherit;
}
header.title-I .topicpath a:nth-child(n+2)::before, header.title-I .topicpath span:nth-child(n+2)::before, header.title-I .topicpath em:nth-child(n+2)::before {
  border-color: #FFF;
}
header.title-I .title {
  margin: 1rem auto 0;
  padding-left: 2.6rem;
  width: 17.4rem;
}

header.title-L {
  display: grid;
  grid-template-columns: 1fr 45%;
  grid-template-rows: auto auto 1fr auto;
  position: relative;
  padding-bottom: 1.8rem;
}
header.title-L::before {
  content: "";
  display: block;
  position: absolute;
  top: -3.9rem;
  left: calc(50% - 50vw);
  z-index: -1;
  background-color: #F5F5F6;
  width: 100vw;
  height: calc(100% + 3.9rem);
}
header.title-L .topicpath {
  grid-column: 1/3;
  grid-row: 1/2;
}
header.title-L .category {
  grid-column: 1/3;
  grid-row: 2/3;
  margin-bottom: min(6vw, 2rem);
  border-top: double 0.3rem;
  border-bottom: double 0.3rem;
  padding: 0.7em 0;
  text-align: center;
  letter-spacing: 0.1em;
  font-size: 1.3rem;
  font-weight: 500;
}
header.title-L .title {
  grid-column: 1/2;
  grid-row: 3/4;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  font-size: clamp(13px, 0.8484848485vw + 9.8181818182px, 20px);
}
header.title-L .title b {
  display: block;
  margin-top: calc(-0.35em - min(6vw, 2rem));
  font-size: 6em;
  color: #FFF;
}
header.title-L .title em {
  display: block;
  border-bottom: solid 1px #000;
  padding: 0 1rem 0.4em 0;
  letter-spacing: 0.05em;
  font-size: 1.3em;
  font-weight: 500;
  color: var(--key-color);
}
header.title-L .title em i {
  display: block;
  font-size: 0.7em;
  color: var(--font-color);
}
header.title-L .description {
  grid-column: 1/2;
  grid-row: 4/5;
  display: block;
  padding: 0.5em 1rem clamp(5px, 5.9393939394vw - 17.2727272727px, 54px) 0;
  letter-spacing: 0.05em;
  line-height: 1.7;
  font-size: 0.75rem;
}
header.title-L picture {
  grid-column: 2/3;
  grid-row: 3/5;
  position: relative;
  overflow: hidden;
}
header.title-L picture img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

header.title-M .topicpath {
  border-bottom: solid 1px;
}
header.title-M .title {
  padding: clamp(60px, 7.2727272727vw + 32.7272727273px, 120px) 0;
  letter-spacing: 0.1em;
  white-space: nowrap;
  font-size: clamp(30px, 1.9393939394vw + 22.7272727273px, 46px);
  font-weight: 100;
}
header.title-M .nav-section {
  display: flex;
  justify-content: center;
  margin-top: -2rem;
  margin-bottom: 1rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--key-color);
}
header.title-M .nav-section li {
  border-right: solid 1px;
}
header.title-M .nav-section li:nth-of-type(1) {
  border-left: solid 1px;
}
header.title-M .nav-section li a {
  display: block;
  padding: 0.4em 1.25em;
}

.page-terms_review header.title-M .title {
  letter-spacing: 0;
  white-space: normal;
}

header.title-S {
  position: relative;
}
header.title-S::before {
  content: "";
  display: block;
  position: absolute;
  top: -3.9rem;
  left: calc(50% - 50vw);
  z-index: -1;
  background-color: #F5F5F6;
  width: 100vw;
  height: calc(100% + 3.9rem);
}
header.title-S .title {
  margin-bottom: 0.6em;
  border-top: double 0.3rem;
  border-bottom: double 0.3rem;
  padding: 0.7em 0;
  text-align: center;
  letter-spacing: 0.1em;
  font-size: 1.3rem;
  font-weight: 500;
}

header.title-N .topicpath {
  border-bottom: solid 1px;
}
header.title-N .meta {
  margin: clamp(60px, 7.2727272727vw + 32.7272727273px, 120px) auto 1rem;
  max-width: 32.5rem;
  letter-spacing: 0.1em;
  font-size: 0.65rem;
}
header.title-N .meta time {
  display: inline-block;
  margin-right: 1em;
}
header.title-N .meta b {
  display: inline-block;
  margin-right: 0.3em;
  border: solid 0.1rem;
  border-radius: 0.2rem;
  padding: 0 1em;
  text-align: center;
  min-width: 4.5em;
  font-weight: 700;
}
header.title-N .meta b.cat01 {
  color: #3A94D3;
}
header.title-N .meta b.cat02 {
  color: #B07BDE;
}
header.title-N .meta b.cat03 {
  color: #5BB647;
}
header.title-N .meta b.cat04 {
  color: #FF8539;
}
header.title-N .meta b.cat05 {
  color: #E4007F;
}
header.title-N h1 {
  margin: 0 auto;
  max-width: 32.5rem;
  line-height: 1.6;
  font-size: clamp(16px, 1.4545454545vw + 10.5454545455px, 28px);
  font-weight: 500;
  color: var(--key-color);
}

header.title-O .topicpath {
  border-bottom: solid 1px;
}
header.title-O .meta {
  margin: clamp(60px, 7.2727272727vw + 32.7272727273px, 120px) auto 1rem;
  max-width: 32.5rem;
  letter-spacing: 0.1em;
  font-size: 0.65rem;
}
header.title-O .meta time {
  display: inline-block;
  margin-right: 1em;
  letter-spacing: 0.1em;
  color: #999;
}
header.title-O .meta b {
  display: inline-block;
  border-radius: 0.2rem;
  background-color: #999;
  padding: 0.3em 1em;
  text-align: center;
  letter-spacing: 0.05em;
  font-weight: 700;
  color: #FFF;
}
header.title-O .meta .all {
  background-color: #65985A;
}
header.title-O .meta .recipe {
  background-color: #CB7F4F;
}
header.title-O .meta .life {
  background-color: #A02268;
}
header.title-O .meta .people {
  background-color: #286793;
}
header.title-O .meta .hanashi {
  background-color: #624A98;
}
header.title-O .meta .recruit {
  background-color: #CE3F3F;
}
header.title-O .tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.8em;
  margin: 0 auto 1rem;
  max-width: 32.5rem;
  font-size: 0.6rem;
}
header.title-O .tags a, header.title-O .tags b {
  display: inline-block;
  border: solid 1px;
  border-radius: 9999rem;
  background-color: #FFF;
  padding: 0.3em 1em;
  text-align: center;
  color: var(--key-color);
}
header.title-O .tags a:hover, header.title-O .tags b:hover {
  opacity: 0.7;
}
header.title-O h1 {
  margin: 0 auto;
  max-width: 32.5rem;
  line-height: 1.6;
  font-size: clamp(16px, 1.4545454545vw + 10.5454545455px, 28px);
  font-weight: 500;
}

header.title-F {
  position: relative;
  background-color: #D5C5B5;
  color: #FFF;
}
header.title-F h1 {
  position: absolute;
  top: 0.8rem;
  left: var(--h-margin);
  z-index: 1;
  width: 10rem;
}
header.title-F hgroup p {
  position: absolute;
  bottom: -9rem;
  right: var(--h-margin);
  z-index: 1;
  height: -moz-fit-content;
  height: fit-content;
  writing-mode: vertical-rl;
}
header.title-F hgroup p em {
  display: block;
  height: min(90vw, 24rem);
}
header.title-F hgroup p em img {
  height: 100%;
  width: auto;
}
header.title-F hgroup p span {
  display: block;
  margin-bottom: -3em;
  margin-right: 0.3em;
  text-align: right;
  letter-spacing: 0.2em;
  font-size: min(5vw, 1.2rem);
  font-weight: 500;
}
header.title-F picture {
  width: 100%;
  height: min(108vw, 26.4rem);
}
header.title-F picture img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: 50% 100%;
     object-position: 50% 100%;
}

.button-KO {
  display: inline-block;
  position: relative;
  border: solid 2px;
  border-radius: 9999rem;
  background-color: #FFF;
  padding: 1em;
  min-width: 10rem;
  text-align: center;
  letter-spacing: 0.1em;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--key-color);
  cursor: pointer;
}
.button-KO::after {
  content: "";
  display: block;
  position: absolute;
  top: calc(50% - 0.3em);
  right: 1em;
  border-top: solid 0.1rem;
  border-right: solid 0.1rem;
  width: 0.4em;
  height: 0.4em;
  rotate: 45deg;
}
.button-KO:hover {
  opacity: 0.7;
}

.button-KF {
  display: inline-block;
  position: relative;
  border: solid 2px var(--key-color);
  border-radius: 9999rem;
  background-color: var(--key-color);
  padding: 1em;
  min-width: 10rem;
  text-align: center;
  letter-spacing: 0.1em;
  font-size: 0.8rem;
  font-weight: 700;
  color: #FFF;
  cursor: pointer;
}
.button-KF::after {
  content: "";
  display: block;
  position: absolute;
  top: calc(50% - 0.3em);
  right: 1em;
  border-top: solid 0.1rem;
  border-right: solid 0.1rem;
  width: 0.4em;
  height: 0.4em;
  rotate: 45deg;
}
.button-KF:hover {
  opacity: 0.7;
}

.button-BF {
  display: inline-block;
  position: relative;
  border: solid 2px #40210F;
  border-radius: 9999rem;
  background-color: #40210F;
  padding: 1em;
  min-width: 10rem;
  text-align: center;
  letter-spacing: 0.1em;
  font-size: 0.8rem;
  font-weight: 700;
  color: #FFF;
  cursor: pointer;
}
.button-BF::after {
  content: "";
  display: block;
  position: absolute;
  top: calc(50% - 0.3em);
  right: 1em;
  border-top: solid 0.1rem;
  border-right: solid 0.1rem;
  width: 0.4em;
  height: 0.4em;
  rotate: 45deg;
}
.button-BF:hover {
  opacity: 0.7;
}

.button-WO {
  display: inline-block;
  position: relative;
  border: solid 2px;
  border-radius: 0.6rem;
  padding: 0.8em;
  min-width: 18em;
  text-align: center;
  letter-spacing: 0.1em;
  font-weight: 700;
  color: #FFF;
  cursor: pointer;
}
.button-WO::after {
  content: "";
  display: block;
  position: absolute;
  top: calc(50% - 0.3em);
  right: 1em;
  border-top: solid 0.1rem;
  border-right: solid 0.1rem;
  width: 0.4em;
  height: 0.4em;
  rotate: 45deg;
}
.button-WO:hover {
  opacity: 0.7;
}
.button-WO.open::after {
  top: calc(50% - 0.4em);
  rotate: 135deg;
}
.button-WO.close::after {
  top: calc(50% - 0.2em);
  rotate: -45deg;
}

.wp-pagenavi {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 2rem;
  font-size: 0.8rem;
}
.wp-pagenavi a, .wp-pagenavi span {
  display: inline-block;
  padding: 0 0.4em;
}
.wp-pagenavi a.current, .wp-pagenavi span.current {
  color: var(--key-color);
}
.wp-pagenavi a.previouspostslink, .wp-pagenavi a.nextpostslink, .wp-pagenavi span.previouspostslink, .wp-pagenavi span.nextpostslink {
  position: relative;
  color: transparent;
}
.wp-pagenavi a.previouspostslink::before, .wp-pagenavi a.nextpostslink::before, .wp-pagenavi span.previouspostslink::before, .wp-pagenavi span.nextpostslink::before {
  content: "";
  display: block;
  position: absolute;
  top: calc(50% - 0.2em);
  border-top: solid 1px var(--font-color);
  width: 0.4em;
  height: 0.4em;
  rotate: -45deg;
}
.wp-pagenavi a.previouspostslink::before, .wp-pagenavi span.previouspostslink::before {
  left: calc(50% - 0.2em);
  border-left: solid 1px var(--font-color);
  rotate: -45deg;
}
.wp-pagenavi a.nextpostslink::before, .wp-pagenavi span.nextpostslink::before {
  right: calc(50% - 0.2em);
  border-right: solid 1px var(--font-color);
  rotate: 45deg;
}

.review form dl,
.form form dl,
#js-modal dl {
  margin-bottom: 2em;
}
.review form dt,
.form form dt,
#js-modal dt {
  margin-bottom: 0.8em;
  border-left: solid 0.4em var(--key-color);
  padding-left: 0.6em;
  letter-spacing: 0.05em;
  font-weight: 700;
}
.review form [type=text], .review form [type=number], .review form [type=email], .review form [type=tel], .review form textarea, .review form select,
.form form [type=text],
.form form [type=number],
.form form [type=email],
.form form [type=tel],
.form form textarea,
.form form select,
#js-modal [type=text],
#js-modal [type=number],
#js-modal [type=email],
#js-modal [type=tel],
#js-modal textarea,
#js-modal select {
  box-sizing: border-box;
  border: solid 1px #AAA;
  border-radius: 0.4rem;
  background-color: #FFF;
  padding: 0.8em;
  width: 100%;
  line-height: 1.4;
  font-size: 100%;
}
.review form select,
.form form select,
#js-modal select {
  background: url("../img/bg-select.svg") no-repeat top 50% right 0.5em/auto 1em;
  padding-right: 2em;
}
.review form [type=radio], .review form [type=checkbox],
.form form [type=radio],
.form form [type=checkbox],
#js-modal [type=radio],
#js-modal [type=checkbox] {
  margin: 0.5em 1em 0.5em 0.5em;
  scale: 2;
}
.review form [type=submit],
.review form #js-modal-submit,
.form form [type=submit],
.form form #js-modal-submit,
#js-modal [type=submit],
#js-modal #js-modal-submit {
  border-radius: 0.4rem;
  background-color: var(--key-color);
  padding: 1.2em;
  width: 16em;
  text-align: center;
  letter-spacing: 0.1em;
  font-weight: 700;
  color: #FFF;
}
.review form #js-modal-close,
.form form #js-modal-close,
#js-modal #js-modal-close {
  border-radius: 0.4rem;
  background-color: #D3D3D3;
  padding: 1.2em;
  width: 16em;
  text-align: center;
  letter-spacing: 0.1em;
  font-weight: 700;
}
.review form .modal__btn,
.form form .modal__btn,
#js-modal .modal__btn {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  margin-bottom: 2em;
}
.review form ::-moz-placeholder, .form form ::-moz-placeholder, #js-modal ::-moz-placeholder {
  color: #BBB;
}
.review form ::placeholder,
.form form ::placeholder,
#js-modal ::placeholder {
  color: #BBB;
}
.review form label,
.form form label,
#js-modal label {
  display: inline-block;
  position: relative;
  margin: 0 0.3em 0.5em 0;
}
.review form label [type=radio],
.form form label [type=radio],
#js-modal label [type=radio] {
  position: absolute;
  top: 40%;
  left: 40%;
  z-index: -1;
  opacity: 0;
}
.review form label [type=radio]:checked + img,
.form form label [type=radio]:checked + img,
#js-modal label [type=radio]:checked + img {
  border-color: var(--key-color);
}
.review form label img,
.form form label img,
#js-modal label img {
  border: solid 0.15rem #FFF;
  width: 3.6rem;
  border-radius: 9999rem;
}
.review form .g-recaptcha,
.form form .g-recaptcha,
#js-modal .g-recaptcha {
  margin: 0 auto 2em;
  width: -moz-fit-content;
  width: fit-content;
}
.review form p,
.form form p,
#js-modal p {
  margin-bottom: 2em;
  text-align: center;
}
.review form p a,
.form form p a,
#js-modal p a {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.review form > :last-child,
.form form > :last-child,
#js-modal > :last-child {
  margin-bottom: 0;
}

#js-modal {
  /*
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  background-color: rgba(0,0,0,0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  */
}
#js-modal .modal__content {
  overflow: auto;
  box-sizing: border-box;
  background-color: #FFF;
  padding: clamp(25px, 4.2424242424vw + 9.0909090909px, 60px) clamp(20px, 9.696969697vw - 16.3636363636px, 100px);
  max-width: min(92vw, 43rem);
  max-height: calc(100% - 2 * clamp(25px, 4.2424242424vw + 9.0909090909px, 60px));
  font-size: 0.8rem;
}

section:not(.pick_up):has(span[id]:first-child) {
  position: relative;
}
section:not(.pick_up):has(span[id]:first-child) span[id]:first-child {
  display: block;
  position: absolute;
  top: -3.9rem;
  left: 0;
  height: 0;
}

section.items span[id]:first-child {
  top: -13rem !important;
}

section.faq dt:has(i[id]) {
  position: relative;
}
section.faq dt:has(i[id]) i[id] {
  display: block;
  position: absolute;
  top: -4.9rem;
  left: 0;
  height: 0;
}

section p.none {
  padding: 5rem 0;
  text-align: center;
  font-size: 0.75rem;
}

@media all and (min-width: 480px) {
  header.title-L picture {
    aspect-ratio: 1/1;
  }
}
@media all and (min-width: 610px) {
  section.items span[id]:first-child {
    top: -10.5rem !important;
  }
}
@media all and (min-width: 720px) {
  header.title-L {
    grid-template-columns: 1fr 48%;
  }
  header.title-L picture {
    aspect-ratio: 10/7;
  }
  header.title-F hgroup p {
    bottom: auto;
    top: 2.5rem;
  }
  header.title-M .nav-section {
    justify-content: flex-start;
  }
}
@media all and (min-width: 960px) {
  header[class^=title] {
    padding-top: 1rem;
  }
  header[class^=title] .topicpath {
    padding-bottom: 2em;
    border-top: none;
  }
  header.title-I .topicpath {
    display: none;
  }
  header.title-I .title {
    margin-top: 2rem;
    margin-left: 0;
    padding-left: 0;
  }
  section:not(.pick_up):has(span[id]:first-child) span[id]:first-child {
    top: -5.85rem;
  }
  section.faq dt:has(i[id]) i[id] {
    top: -6.85rem;
  }
}
@media all and (min-width: 1280px) {
  header.title-I {
    position: relative;
    z-index: 2;
    padding: 0;
  }
  header.title-I .title {
    position: absolute;
    top: 1rem;
    left: calc(50% - 29.3rem);
    padding-left: 0;
    width: 20.7rem;
  }
}
/*---------------------------------------------

Top Sections CSS

for www.kasugai.co.jp
coded by d-spica at 2023-09-10
imported to "style.scss"

---------------------------------------------*/
section.eyecatch {
  position: relative;
}
section.eyecatch figure {
  position: relative;
  padding-bottom: 2.5rem;
  height: min(100vw, 24.5rem);
}
section.eyecatch figure li {
  position: absolute;
  top: 0;
  left: max(0rem, 50% - 12.25rem);
  z-index: -1;
  overflow: hidden;
  border-radius: 1rem;
  width: min(100%, 24.5rem);
  aspect-ratio: 1/1;
  opacity: 0;
  transition: translate var(--speed), opacity var(--speed);
}
section.eyecatch figure li a {
  display: block;
  height: 100%;
}
section.eyecatch figure li img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
section.eyecatch figure li.current {
  z-index: 0;
  opacity: 1;
}
section.eyecatch figure li.before1 {
  z-index: 0;
  translate: -101% 0;
  opacity: 1;
}
section.eyecatch figure li.before2 {
  z-index: 0;
  translate: -202% 0;
  opacity: 1;
}
section.eyecatch figure li.before3 {
  z-index: 0;
  translate: -303% 0;
  opacity: 1;
}
section.eyecatch figure li.before4 {
  z-index: 0;
  translate: -404% 0;
}
section.eyecatch figure li.after1 {
  z-index: 0;
  translate: 101% 0;
  opacity: 1;
}
section.eyecatch figure li.after2 {
  z-index: 0;
  translate: 202% 0;
  opacity: 1;
}
section.eyecatch figure li.after3 {
  z-index: 0;
  translate: 303% 0;
  opacity: 1;
}
section.eyecatch figure li.after4 {
  z-index: 0;
  translate: 404% 0;
}
section.eyecatch figure .dots {
  position: absolute;
  bottom: 0.5em;
  left: 0;
  width: 100%;
  text-align: center;
  font-size: 1rem;
}
section.eyecatch figure .dots span {
  display: inline-block;
  position: relative;
  padding: 0.5em;
  line-height: 0.5em;
  cursor: pointer;
}
section.eyecatch figure .dots span::before {
  content: "";
  display: inline-block;
  border-radius: 9999rem;
  background-color: #E3E3E3;
  width: 0.5em;
  height: 0.5em;
}
section.eyecatch figure .dots span.current::before {
  background-color: var(--key-color);
}
section.eyecatch div.alert {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  padding: 1rem max(6vw, 50% - 23rem);
  width: 100%;
}
section.eyecatch div.alert dl {
  position: relative;
  box-sizing: border-box;
  box-shadow: 0 0 1.5rem rgba(0, 0, 0, 0.3);
  border-radius: 1.5rem;
  background-color: #EDEDED;
  padding: min(4vw, 1.5rem) min(6vw, 3rem);
}
section.eyecatch div.alert dt {
  margin-bottom: 0.5em;
  border-bottom: dotted 0.1em;
  padding-bottom: 0.5em;
  text-align: center;
  letter-spacing: 0.15em;
  font-size: clamp(20px, 1.2121212121vw + 15.4545454545px, 30px);
  font-weight: 500;
  color: var(--key-color);
}
section.eyecatch div.alert dd {
  line-height: 2;
  font-size: 0.75rem;
}
section.eyecatch div.alert .close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background: url("../img/bt-close-KF.svg") no-repeat 50% 50%/contain;
  width: 2rem;
  height: 2rem;
  cursor: pointer;
}

section.pick_up h2, section.new_item h2, section.product_list h2, section.brand h2 {
  margin-bottom: 1.5rem;
  text-align: center;
}
section.pick_up h2 span, section.new_item h2 span, section.product_list h2 span, section.brand h2 span {
  display: block;
  margin-bottom: 0.5em;
  letter-spacing: 0.1em;
  font-size: 0.6rem;
  font-weight: 700;
  color: var(--key-color);
}
section.pick_up h2 span::before, section.new_item h2 span::before, section.product_list h2 span::before, section.brand h2 span::before {
  content: "";
  display: inline-block;
  margin-right: 0.8em;
  border-left: solid 0.15em;
  width: 0;
  height: 1.4em;
  vertical-align: -0.3em;
  rotate: -30deg;
}
section.pick_up h2 span::after, section.new_item h2 span::after, section.product_list h2 span::after, section.brand h2 span::after {
  content: "";
  display: inline-block;
  margin-left: 0.6em;
  border-right: solid 0.15em;
  width: 0;
  height: 1.4em;
  vertical-align: -0.3em;
  rotate: 30deg;
}
section.pick_up h2 em, section.new_item h2 em, section.product_list h2 em, section.brand h2 em {
  display: block;
  letter-spacing: 0.05em;
  font-size: 1.2rem;
  font-weight: 500;
}

section.brand {
  padding: 4rem var(--h-margin) 4rem;
  background: var(--lightkey-color) url("../img/bg-dot.png") repeat 50% 0/8rem auto;
}
section.brand ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin: 0 auto;
  max-width: 31rem;
}
section.brand li {
  width: calc(50% - 0.5rem);
}
section.brand li img {
  filter: drop-shadow(0 0 0.2rem rgba(0, 0, 0, 0.15));
}

section.pick_up {
  margin-top: 4.5rem;
  margin-bottom: 1.5rem;
  padding: 0.01rem 0 1.5rem;
  background: url("../img/bg-pick_up.png") repeat-x calc(50% + 3rem) 2rem/auto 29.5rem;
}
section.pick_up h2 {
  margin-bottom: 0.5em;
}
section.pick_up figure {
  position: relative;
  margin: 0.8rem 0;
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.03) 5%, rgba(0, 0, 0, 0.03));
  height: 12.3rem;
}
section.pick_up figure:has(span[id]:first-child) {
  position: relative;
}
section.pick_up figure:has(span[id]:first-child) span[id]:first-child {
  display: block;
  position: absolute;
  top: -4.9rem;
  left: 0;
  height: 0;
}
section.pick_up figure h3 {
  position: absolute;
  top: -0.2em;
  left: 50%;
  z-index: 1;
  margin: 0 auto 1.5em;
  background-color: var(--key-color);
  padding: 0.8em 1.2em;
  width: -moz-fit-content;
  width: fit-content;
  min-width: 6em;
  text-align: center;
  letter-spacing: 0.05em;
  font-size: 0.65rem;
  font-weight: 500;
  color: #FFF;
  transform-origin: 50% 100%;
  scale: 0;
  transition: scale var(--speed);
}
section.pick_up figure h3.animated {
  scale: 1;
}
section.pick_up figure h3::after {
  content: "";
  display: block;
  position: absolute;
  bottom: -0.6em;
  left: calc(50% - 0.4em);
  border-top: solid 0.7em var(--key-color);
  border-left: solid 0.4em transparent;
  border-right: solid 0.4em transparent;
  width: 0;
  height: 0;
}
section.pick_up figure .is-moving li {
  transition: translate var(--speed-slow) linear, opacity var(--speed-slow) linear;
}
section.pick_up figure li {
  position: absolute;
  top: 0.9rem;
  left: calc(50% - 5.25rem);
  z-index: -1;
  width: 10.5rem;
  aspect-ratio: 1/1;
  opacity: 0;
  transition: translate var(--speed), opacity var(--speed);
}
section.pick_up figure li a {
  display: block;
  box-sizing: border-box;
  height: 100%;
}
section.pick_up figure li img {
  position: absolute;
  top: 4.5%;
  left: 4.5%;
  width: 91%;
  height: 91%;
  -o-object-fit: contain;
     object-fit: contain;
}
section.pick_up figure li.current {
  z-index: 0;
  opacity: 1;
}
section.pick_up figure:nth-of-type(-n+3) li a {
  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.15);
  border-radius: 0.4rem;
  background-color: #FFF;
  padding: 0.9rem;
}
section.pick_up figure:nth-of-type(1) h3 {
  left: calc(50% - 10rem);
  rotate: -10deg;
}
section.pick_up figure:nth-of-type(2) h3 {
  left: calc(50% + 2.5rem);
  rotate: 10deg;
}
section.pick_up figure:nth-of-type(3) h3 {
  left: calc(50% - 11rem);
  rotate: -10deg;
}
section.pick_up figure:nth-of-type(4) h3 {
  left: calc(50% + 2.5rem);
  rotate: 10deg;
}
section.pick_up figure .next, section.pick_up figure .prev {
  position: absolute;
  top: calc(50% - 1.5rem);
  z-index: 1;
  width: 3rem;
  height: 3rem;
  cursor: pointer;
}
section.pick_up figure:nth-of-type(2n+1) li.before1 {
  z-index: 0;
  translate: -104% 0;
  opacity: 1;
}
section.pick_up figure:nth-of-type(2n+1) li.before2 {
  z-index: 0;
  translate: -208% 0;
  opacity: 1;
}
section.pick_up figure:nth-of-type(2n+1) li.before3 {
  z-index: 0;
  translate: -312% 0;
  opacity: 1;
}
section.pick_up figure:nth-of-type(2n+1) li.before4 {
  z-index: 0;
  translate: -416% 0;
  opacity: 1;
}
section.pick_up figure:nth-of-type(2n+1) li.before5 {
  z-index: 0;
  translate: -520% 0;
}
section.pick_up figure:nth-of-type(2n+1) li.after1 {
  z-index: 0;
  translate: 104% 0;
  opacity: 1;
}
section.pick_up figure:nth-of-type(2n+1) li.after2 {
  z-index: 0;
  translate: 208% 0;
  opacity: 1;
}
section.pick_up figure:nth-of-type(2n+1) li.after3 {
  z-index: 0;
  translate: 312% 0;
  opacity: 1;
}
section.pick_up figure:nth-of-type(2n+1) li.after4 {
  z-index: 0;
  translate: 416% 0;
  opacity: 1;
}
section.pick_up figure:nth-of-type(2n+1) li.after5 {
  z-index: 0;
  translate: 520% 0;
}
section.pick_up figure:nth-of-type(2n+1) .prev {
  left: max(1rem, 50% - 53rem);
  z-index: 1;
}
section.pick_up figure:nth-of-type(2n+1) .prev img {
  scale: -1 1;
}
section.pick_up figure:nth-of-type(2n+1) .next {
  right: max(1rem, 50% - 53rem);
}
section.pick_up figure:nth-of-type(2n) li.before1 {
  z-index: 0;
  translate: 104% 0;
  opacity: 1;
}
section.pick_up figure:nth-of-type(2n) li.before2 {
  z-index: 0;
  translate: 208% 0;
  opacity: 1;
}
section.pick_up figure:nth-of-type(2n) li.before3 {
  z-index: 0;
  translate: 312% 0;
  opacity: 1;
}
section.pick_up figure:nth-of-type(2n) li.before4 {
  z-index: 0;
  translate: 416% 0;
  opacity: 1;
}
section.pick_up figure:nth-of-type(2n) li.before5 {
  z-index: 0;
  translate: 520% 0;
}
section.pick_up figure:nth-of-type(2n) li.after1 {
  z-index: 0;
  translate: -104% 0;
  opacity: 1;
}
section.pick_up figure:nth-of-type(2n) li.after2 {
  z-index: 0;
  translate: -208% 0;
  opacity: 1;
}
section.pick_up figure:nth-of-type(2n) li.after3 {
  z-index: 0;
  translate: -312% 0;
  opacity: 1;
}
section.pick_up figure:nth-of-type(2n) li.after4 {
  z-index: 0;
  translate: -416% 0;
  opacity: 1;
}
section.pick_up figure:nth-of-type(2n) li.after5 {
  z-index: 0;
  translate: -520% 0;
}
section.pick_up figure:nth-of-type(2n) .prev {
  right: max(1rem, 50% - 53rem);
  z-index: 1;
}
section.pick_up figure:nth-of-type(2n) .next {
  left: max(1rem, 50% - 53rem);
}
section.pick_up figure:nth-of-type(2n) .next img {
  scale: -1 1;
}
section.pick_up p {
  margin: 2rem auto;
  padding: 0 2vw;
  max-width: 30rem;
}

section.instagram, section.twitter {
  padding: 4rem var(--h-margin);
}
section.instagram h2, section.twitter h2 {
  margin: 0 auto 1.5rem;
  width: 5.4rem;
}
section.instagram ul, section.twitter ul {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
section.instagram li, section.twitter li {
  width: calc(50% - 5px);
}

section.twitter {
  position: relative;
  background-color: #F5F5F6;
}
section.twitter::after {
  content: "";
  display: block;
  position: absolute;
  bottom: calc(-1.5rem - 7vw);
  left: 0;
  z-index: -1;
  background-color: #F5F5F6;
  width: 100vw;
  height: calc(2rem + 7vw);
}
section.twitter figure {
  overflow: auto;
  margin: 0 auto;
  border-radius: 1rem;
  background-color: #FFF;
  padding: 1rem;
  max-height: 28rem;
}
section.twitter figure .ctf-tweet-items {
  font-size: 0.7rem;
}
section.twitter .nav {
  margin: 1rem 0;
  text-align: center;
  /*
  a {
  	display: inline-block;
  	margin: 5px auto 0;
  	border-radius: 4px;
  	background-color: #0068a0;
  	padding: 7px 14px;
  	width: 176px;
  	text-align: center;
  	vertical-align: top;
  	line-height: 1.5;
  	font-size: 13px;
  	color: #fff;
  	img {
  		margin-right: 7px;
  		width: 1em;
  		vertical-align: -1.5px;
  		filter: invert(1);
  	}
  }
  */
}

section.new_item {
  background: url("../img/bg-new_item.png") no-repeat 50% 50%/auto 100%;
  padding-top: 3.5rem;
  padding-bottom: 3rem;
}
section.new_item figure {
  position: relative;
  height: 15rem;
}
section.new_item figure li {
  position: absolute;
  top: 2.5rem;
  left: calc(50% - 5rem);
  z-index: -1;
  width: 10rem;
  aspect-ratio: 1/1;
  opacity: 0;
  transform-origin: 50% 75rem;
  transition: rotate var(--speed), opacity var(--speed);
}
section.new_item figure li a {
  display: block;
  height: 100%;
}
section.new_item figure li img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
section.new_item figure li.current {
  z-index: 0;
  opacity: 1;
}
section.new_item figure li.before1 {
  z-index: 0;
  rotate: -9deg;
  opacity: 1;
}
section.new_item figure li.before2 {
  z-index: 0;
  rotate: -18deg;
  opacity: 1;
}
section.new_item figure li.before3 {
  z-index: 0;
  rotate: -27deg;
  opacity: 0;
}
section.new_item figure li.after1 {
  z-index: 0;
  rotate: 9deg;
  opacity: 1;
}
section.new_item figure li.after2 {
  z-index: 0;
  rotate: 18deg;
  opacity: 1;
}
section.new_item figure li.after3 {
  z-index: 0;
  rotate: 27deg;
  opacity: 0;
}
section.new_item figure .prev {
  position: absolute;
  top: calc(50% - 1.35rem);
  left: calc(50% - 7rem);
  z-index: 1;
  border-radius: 9999rem;
  background-color: var(--key-color);
  width: 2.7rem;
  height: 2.7rem;
  color: #FFF;
  cursor: pointer;
}
section.new_item figure .prev::before {
  content: "";
  display: block;
  position: absolute;
  top: calc(50% - 0.35rem);
  left: calc(50% - 0.2rem);
  border-top: solid 0.1rem;
  border-left: solid 0.1rem;
  width: 0.5rem;
  height: 0.5rem;
  rotate: -45deg;
}
section.new_item figure .next {
  position: absolute;
  top: calc(50% - 1.35rem);
  right: calc(50% - 7rem);
  z-index: 1;
  border-radius: 9999rem;
  background-color: var(--key-color);
  width: 2.7rem;
  height: 2.7rem;
  color: #FFF;
  cursor: pointer;
}
section.new_item figure .next::before {
  content: "";
  display: block;
  position: absolute;
  top: calc(50% - 0.35rem);
  right: calc(50% - 0.2rem);
  border-top: solid 0.1rem;
  border-right: solid 0.1rem;
  width: 0.5rem;
  height: 0.5rem;
  rotate: 45deg;
}
section.new_item p {
  margin-top: 1.5rem;
  text-align: center;
}

section.product_list {
  padding: 4rem 0;
}
section.product_list ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  position: sticky;
  top: 3.9rem;
  z-index: 1;
  margin-bottom: 1.5rem;
  background-color: var(--lightkey-color);
  padding: 1.5rem max(6vw, 50vw - 28rem);
}
section.product_list li a {
  display: block;
  border: solid 2px;
  border-radius: 9999rem;
  background-color: var(--key-color);
  padding: 0.6em 1em;
  width: 5.5em;
  text-align: center;
  letter-spacing: 0.1em;
  font-size: 0.8rem;
  font-weight: 500;
  color: #FFF;
}
section.product_list li a[href*=new] {
  background: url("../img/bg-tag_new.png") repeat-x 50% 50%/auto 120%;
}
section.product_list li a[href*=candy] {
  background-color: var(--candy-color);
}
section.product_list li a[href*=gummy] {
  background-color: var(--gummy-color);
}
section.product_list li a[href*=ramune] {
  background-color: var(--ramune-color);
}
section.product_list li a[href*=bean] {
  background-color: var(--bean-color);
}
section.product_list p {
  text-align: center;
}

section.information {
  position: relative;
  margin-top: 1.5rem;
  background: url("../img/bg-wave.png") no-repeat 50% 0/100% auto;
  padding: 5.5rem var(--h-margin) 4rem;
}
section.information::before {
  content: "";
  display: block;
  position: absolute;
  z-index: -1;
  top: 7vw;
  left: calc(50% - 50vw);
  background-color: #FDEDF6;
  width: 100vw;
  height: calc(100% - 7vw);
}
section.information h2, section.information h1 {
  margin-bottom: 1.5rem;
}
section.information h2 span, section.information h1 span {
  display: block;
  margin-bottom: 0.5em;
  letter-spacing: 0.1em;
  font-size: 0.6rem;
  font-weight: 700;
  color: var(--key-color);
}
section.information h2 em, section.information h1 em {
  display: block;
  letter-spacing: 0.05em;
  font-size: 1.2rem;
  font-weight: 500;
}
section.information ul {
  background-color: #FFF;
  padding: 0 min(6vw, 2rem);
  font-size: 0.8rem;
}
section.information ul li:nth-of-type(n+2) {
  border-top: solid 1px #AAA;
}
section.information ul li a {
  display: block;
  line-height: 1.8;
  padding: 1.5em 0 2em;
  letter-spacing: 0.02em;
}
section.information ul li span {
  display: block;
  margin-bottom: 1.5em;
  letter-spacing: 0.1em;
  font-size: 0.6rem;
}
section.information ul li time {
  display: inline-block;
  margin-right: 1em;
  color: var(--key-color);
}
section.information ul li b {
  margin-right: 0.3em;
}
section.information b {
  display: inline-block;
  border: solid 0.08rem;
  border-radius: 0.2rem;
  background-color: #FFF;
  padding: 0 0.8em;
  min-width: 4.5em;
  text-align: center;
  line-height: 1.8;
  letter-spacing: 0.1em;
  font-weight: 700;
}
section.information b.cat01 {
  color: #3A94D3;
}
section.information b.cat02 {
  color: #B07BDE;
}
section.information b.cat03 {
  color: #5BB647;
}
section.information b.cat04 {
  color: #FF8539;
}
section.information b.cat05 {
  color: #E4007F;
}
section.information p {
  margin-top: 2.5rem;
  text-align: center;
}
section.information p.categories {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
  margin: 0 0 1.5rem;
  font-size: 0.6rem;
}

.page-top section.information ul {
  overflow: auto;
  background-color: #FFF;
  padding: 0 min(6vw, 2rem);
  max-height: 30rem;
  font-size: 0.8rem;
}

@media all and (min-width: 480px) {
  section.instagram li {
    width: calc(25% - 7.5px);
  }
}
@media all and (min-width: 640px) {
  section.twitter figure {
    max-height: 40rem;
  }
}
@media all and (min-width: 720px) {
  section.pick_up figure:nth-of-type(1) h3 {
    left: calc(50% - 18rem);
  }
  section.pick_up figure:nth-of-type(2) h3 {
    left: calc(50% + 12rem);
  }
  section.pick_up figure:nth-of-type(3) h3 {
    left: calc(50% - 19rem);
  }
  section.pick_up figure:nth-of-type(4) h3 {
    left: calc(50% + 12rem);
  }
}
@media all and (min-width: 960px) {
  section.pick_up figure:has(span[id]:first-child) span[id]:first-child {
    top: -6.85rem;
  }
  section.brand ul {
    max-width: 47rem;
  }
  section.brand li {
    width: calc(33.333% - 0.66666rem);
  }
  section.product_list li a {
    font-size: 0.9rem;
  }
}
/*---------------------------------------------

Item Sections CSS

for www.kasugai.co.jp
coded by d-spica at 2023-09-12
imported to "style.scss"

---------------------------------------------*/
.page-item {
  --category-color: #DB4B9E;
  --category-color-2: #F8DBEC;
  --category-color-7: #E580BB;
}

.page-item_candy {
  --category-color: #DB4B9E;
  --category-color-2: #F8DBEC;
  --category-color-7: #E580BB;
}

.page-item_bean {
  --category-color: #337136;
  --category-color-2: #D6E2D6;
  --category-color-7: #5BB647;
}

.page-item_gummy {
  --category-color: #FF8539;
  --category-color-2: #FFF0D7;
  --category-color-7: #FFB239;
}

.page-item_ramune {
  --category-color: #3A94D3;
  --category-color-2: #DFEEF9;
  --category-color-7: #5FABE0;
}

header.title-item {
  background-color: #F5F5F7;
  padding-top: 2.5rem;
}
header.title-item h1 {
  text-align: center;
}
header.title-item h1 em {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
}

section.item {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  background-color: #F5F5F7;
  padding: 2.5rem var(--h-margin);
}
section.item figure {
  position: relative;
  height: 19.8rem;
}
section.item figure li {
  position: absolute;
  top: 0;
  left: calc(50% - 6.6rem);
  z-index: -1;
  width: 13.2rem;
  aspect-ratio: 2/3;
  opacity: 0;
  transition: translate var(--speed), opacity var(--speed);
}
section.item figure li a {
  display: block;
  height: 100%;
}
section.item figure li img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
section.item figure li.current {
  z-index: 0;
  opacity: 1;
}
section.item figure li.before1 {
  z-index: 0;
  translate: -125% 0;
  opacity: 1;
}
section.item figure li.before2 {
  z-index: 0;
  translate: -250% 0;
  opacity: 1;
}
section.item figure li.before3 {
  z-index: 0;
  translate: -375% 0;
  opacity: 0;
}
section.item figure li.after1 {
  z-index: 0;
  translate: 125% 0;
  opacity: 1;
}
section.item figure li.after2 {
  z-index: 0;
  translate: 250% 0;
  opacity: 1;
}
section.item figure li.after3 {
  z-index: 0;
  translate: 375% 0;
  opacity: 0;
}
section.item figure .next {
  position: absolute;
  top: calc(50% - 1.35rem);
  left: calc(50% - 9.5rem);
  z-index: 1;
  width: 2.7rem;
  height: 2.7rem;
  color: #777;
  cursor: pointer;
}
section.item figure .next::before {
  content: "";
  display: block;
  position: absolute;
  top: calc(50% - 0.4rem);
  left: calc(50% - 0.2rem);
  border-top: solid 0.1rem;
  border-left: solid 0.1rem;
  width: 0.6rem;
  height: 0.6rem;
  rotate: -45deg;
}
section.item figure .prev {
  position: absolute;
  top: calc(50% - 1.35rem);
  right: calc(50% - 9.5rem);
  z-index: 1;
  width: 2.7rem;
  height: 2.7rem;
  color: #777;
  cursor: pointer;
}
section.item figure .prev::before {
  content: "";
  display: block;
  position: absolute;
  top: calc(50% - 0.4rem);
  right: calc(50% - 0.2rem);
  border-top: solid 0.1rem;
  border-right: solid 0.1rem;
  width: 0.6rem;
  height: 0.6rem;
  rotate: 45deg;
}
section.item > div {
  margin: 0 auto;
  max-width: 30rem;
  font-size: 0.8rem;
}
section.item > div h2 {
  margin-bottom: 1em;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--category-color);
}
section.item > div p {
  margin-bottom: 2em;
  text-align: justify;
  line-height: 2;
}
section.item > div table {
  border-top: solid 1px #999;
  width: 100%;
}
section.item > div th {
  border-bottom: solid 1px #999;
  padding: 0.8em 0;
  width: 9em;
  text-align: left;
  font-weight: 500;
}
section.item > div td {
  border-bottom: solid 1px #999;
  padding: 0.8em 0;
}
section.item .buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  font-size: 0.85rem;
}
section.item ul {
  margin: 0 auto -1.6em;
  max-width: 30rem;
  font-size: 0.65rem;
}
section.item li {
  margin-bottom: 1.6em;
  line-height: 1.6;
}
section.item li:has(b) {
  position: relative;
  padding-left: 1em;
}
section.item li:has(b) b {
  position: absolute;
  top: 0;
  left: 0;
}
section.item li a {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
section.item a.link {
  display: inline-block;
  line-height: 2;
  text-decoration: none;
  font-size: 110%;
  font-weight: 700;
}
section.item a.link::before {
  content: "";
  display: inline-block;
  margin-right: 0.4em;
  border-top: solid 0.15rem;
  border-right: solid 0.15rem;
  width: 0.4em;
  height: 0.4em;
  color: var(--key-color);
  rotate: 45deg;
}
section.item a.link:hover {
  opacity: 0.7;
}
section.item .counter {
  text-align: center;
  font-size: 0.8rem;
}
section.item .counter a {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.button-PO {
  display: inline-block;
  position: relative;
  border: solid 2px;
  border-radius: 0.6rem;
  background-color: #FFF;
  padding: 0.8em;
  min-width: 18em;
  text-align: center;
  letter-spacing: 0.1em;
  font-weight: 700;
  color: var(--category-color);
  cursor: pointer;
}
.button-PO::after {
  content: "";
  display: block;
  position: absolute;
  top: calc(50% - 0.3em);
  right: 1em;
  border-top: solid 0.1rem;
  border-right: solid 0.1rem;
  width: 0.4em;
  height: 0.4em;
  rotate: 45deg;
}
.button-PO:hover {
  opacity: 0.7;
}
.button-PO.open::after {
  top: calc(50% - 0.4em);
  rotate: 135deg;
}
.button-PO.close::after {
  top: calc(50% - 0.2em);
  rotate: -45deg;
}

.button-PF {
  display: inline-block;
  position: relative;
  border: solid 2px var(--category-color);
  border-radius: 0.6rem;
  background-color: var(--category-color);
  padding: 0.8em;
  min-width: 18em;
  text-align: center;
  letter-spacing: 0.1em;
  font-weight: 700;
  color: #FFF;
  cursor: pointer;
}
.button-PF::after {
  content: "";
  display: block;
  position: absolute;
  top: calc(50% - 0.3em);
  right: 1em;
  border-top: solid 0.1rem;
  border-right: solid 0.1rem;
  width: 0.4em;
  height: 0.4em;
  rotate: 45deg;
}
.button-PF:hover {
  opacity: 0.7;
}

aside.share {
  padding: 2.5rem var(--h-margin);
  background-color: #F7F7F7;
}
aside.share .buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem 2rem;
  margin: 0 auto 2rem;
  text-align: center;
  font-size: 0.85rem;
}
aside.share .buttons a {
  max-width: calc(19.6em + 4px);
}
aside.share dl {
  text-align: center;
}
aside.share dt {
  margin-bottom: 1.5em;
  letter-spacing: 0.05em;
  font-size: 0.9rem;
  font-weight: 500;
}
aside.share dt::before {
  content: "";
  display: inline-block;
  margin-right: 0.8em;
  border-left: solid 0.08rem;
  width: 0;
  height: 1.4em;
  vertical-align: -0.3em;
  rotate: -30deg;
}
aside.share dt::after {
  content: "";
  display: inline-block;
  margin-left: 0.6em;
  border-right: solid 0.08rem;
  width: 0;
  height: 1.4em;
  vertical-align: -0.3em;
  rotate: 30deg;
}
aside.share dd {
  display: flex;
  justify-content: center;
  gap: 2rem;
}
aside.share dd a {
  width: 2.8rem;
}

aside.sister_items {
  padding: 2.5rem var(--h-margin);
  background-color: #FFF;
}
aside.sister_items h2 {
  margin-bottom: 0.8em;
  text-align: center;
  letter-spacing: 0.05em;
  font-size: 0.9rem;
  font-weight: 500;
}
aside.sister_items ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem 4rem;
  border-top: dotted 0.2rem #CCC;
  border-bottom: dotted 0.2rem #CCC;
  padding: 2rem 0;
}
aside.sister_items li {
  width: 18rem;
}
aside.sister_items li a {
  display: flex;
  align-items: center;
  gap: 1rem;
}
aside.sister_items li picture {
  position: relative;
  width: 9rem;
  aspect-ratio: 1/1;
}
aside.sister_items li picture img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
aside.sister_items li table {
  border-top: solid 1px #999;
  width: 100%;
  font-size: 0.65rem;
}
aside.sister_items li th {
  border-bottom: solid 1px #999;
  padding: 0.8em 0;
  width: 6em;
  text-align: left;
  font-weight: 500;
}
aside.sister_items li td {
  border-bottom: solid 1px #999;
  padding: 0.8em 0;
}

aside.other_items {
  padding: 2.5rem var(--h-margin);
  background-color: var(--category-color-2);
}
aside.other_items h2 {
  margin-bottom: 1.5em;
  text-align: center;
  letter-spacing: 0.05em;
  font-size: 0.9rem;
  font-weight: 500;
}
aside.other_items h2::before {
  content: "";
  display: inline-block;
  margin-right: 0.8em;
  border-left: solid 0.1rem;
  width: 0;
  height: 1.4em;
  vertical-align: -0.3em;
  rotate: -30deg;
}
aside.other_items h2::after {
  content: "";
  display: inline-block;
  margin-left: 0.6em;
  border-right: solid 0.1rem;
  width: 0;
  height: 1.4em;
  vertical-align: -0.3em;
  rotate: 30deg;
}
aside.other_items figure {
  position: relative;
  height: 9.45rem;
}
aside.other_items figure li {
  position: absolute;
  top: 0;
  left: calc(50% - 3.15rem);
  z-index: -1;
  width: 6.3rem;
  aspect-ratio: 2/3;
  opacity: 0;
  transition: translate var(--speed), opacity var(--speed);
}
aside.other_items figure li a {
  display: block;
  height: 100%;
}
aside.other_items figure li img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
aside.other_items figure li.current {
  z-index: 0;
  opacity: 1;
  translate: -66.666%;
}
aside.other_items figure li.before1 {
  z-index: 0;
  translate: -200% 0;
  opacity: 1;
}
aside.other_items figure li.before2 {
  z-index: 0;
  translate: -333.33% 0;
  opacity: 0;
}
aside.other_items figure li.after1 {
  z-index: 0;
  translate: 66.666% 0;
  opacity: 1;
}
aside.other_items figure li.after2 {
  z-index: 0;
  translate: 200% 0;
  opacity: 1;
}
aside.other_items figure li.after3 {
  z-index: 0;
  translate: 333.33% 0;
  opacity: 0;
}
aside.other_items figure .next {
  position: absolute;
  top: calc(50% - 1.35rem);
  left: max(-0.5rem, 50% - 20rem);
  z-index: 1;
  border-radius: 9999rem;
  background-color: var(--category-color);
  width: 2.7rem;
  height: 2.7rem;
  color: #FFF;
  cursor: pointer;
}
aside.other_items figure .next::before {
  content: "";
  content: "";
  display: block;
  position: absolute;
  top: calc(50% - 0.35rem);
  left: calc(50% - 0.2rem);
  border-top: solid 0.1rem;
  border-left: solid 0.1rem;
  width: 0.5rem;
  height: 0.5rem;
  rotate: -45deg;
}
aside.other_items figure .prev {
  position: absolute;
  top: calc(50% - 1.35rem);
  right: max(-0.5rem, 50% - 20rem);
  z-index: 1;
  border-radius: 9999rem;
  background-color: var(--category-color);
  width: 2.7rem;
  height: 2.7rem;
  color: #FFF;
  cursor: pointer;
}
aside.other_items figure .prev::before {
  content: "";
  display: block;
  position: absolute;
  top: calc(50% - 0.35rem);
  right: calc(50% - 0.2rem);
  border-top: solid 0.1rem;
  border-right: solid 0.1rem;
  width: 0.5rem;
  height: 0.5rem;
  rotate: 45deg;
}

section.episode {
  padding: 2.5rem max(6vw, 50vw - 27.7rem);
  background-color: var(--category-color-7);
}
section.episode h2 {
  margin-bottom: 1.5rem;
  text-align: center;
  letter-spacing: 0.05em;
  font-size: 1.2rem;
  font-weight: 500;
  color: #FFF;
}
section.episode h2 em {
  font-size: 1.5rem;
}
section.episode h2 img {
  display: block;
  margin: 0.4em auto 0;
  width: 21rem;
}
section.episode #reviewsList ol {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 0 auto;
  max-width: 20rem;
  list-style: none;
}
section.episode #reviewsList li dl {
  position: relative;
  background-color: #FFF;
  padding: 1rem;
  font-size: 0.75rem;
}
section.episode #reviewsList li dl::before {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  right: 0;
  border-bottom: solid 1.3rem transparent;
  border-left: solid 1.3rem #EEE;
  width: 0;
  height: 0;
}
section.episode #reviewsList li dl::after {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  right: 0;
  border-top: solid 1.3rem transparent;
  border-right: solid 1.3rem var(--category-color-7);
  width: 0;
  height: 0;
}
section.episode #reviewsList li dt {
  display: flex;
  justify-content: space-between;
  gap: 1em;
  border-bottom: solid 1px #CCC;
  padding-bottom: 1rem;
}
section.episode #reviewsList li dt em {
  font-weight: 700;
}
section.episode #reviewsList li dt time {
  color: #777;
}
section.episode #reviewsList li dd {
  margin-top: 1rem;
}
section.episode #reviewsList li dd p {
  margin-bottom: 1em;
  line-height: 2;
  text-align: justify;
}
section.episode #reviewsList li dd p.title {
  font-weight: 700;
  color: var(--category-color);
}
section.episode #reviewsList > p {
  margin-top: 2rem;
  text-align: center;
  font-size: 0.7rem;
}
section.episode #reviewsList > p .close {
  display: none;
}
section.episode #reviewsList > p.is-opened .close {
  display: inline-block;
}
section.episode #reviewsList > p.is-opened .open {
  display: none;
}

section.voice {
  padding: 2.5rem var(--h-margin);
  background-color: #FFF;
}
section.voice h2 {
  text-align: center;
}
section.voice h2 img {
  width: 11rem;
}
section.voice #voiceList ol {
  list-style: none;
}
section.voice #voiceList li > dl {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
section.voice #voiceList li > dl > dt {
  position: relative;
  z-index: 1;
  overflow: hidden;
  border-radius: 9999rem;
  width: 3.6rem;
  height: 3.6rem;
}
section.voice #voiceList li > dl > dt img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
section.voice #voiceList li > dl > dd:nth-of-type(1) {
  flex: 1;
  position: relative;
  border-radius: 0.6rem;
  padding: 1.2em 1.2em 0;
  font-size: 0.75rem;
}
section.voice #voiceList li > dl > dd:nth-of-type(1)::before {
  content: "";
  display: block;
  position: absolute;
  top: 1.3rem;
  left: -0.38rem;
  width: 0.5rem;
  height: 0.5rem;
  rotate: -45deg;
}
section.voice #voiceList li > dl > dd:nth-of-type(1) em {
  display: block;
  margin-bottom: 0.5em;
  font-weight: 700;
}
section.voice #voiceList li > dl > dd:nth-of-type(1) p {
  margin-bottom: 1em;
  text-align: justify;
  line-height: 2;
}
section.voice #voiceList li > dl > dd:nth-of-type(1) p.title {
  font-weight: 700;
  color: var(--category-color);
}
section.voice #voiceList li > dl > dd:has(.reply) {
  position: relative;
  padding-bottom: 3.2em;
}
section.voice #voiceList li > dl > dd:has(.reply) .reply {
  position: absolute;
  bottom: 1.2em;
  right: 1.2em;
  color: var(--key-color);
}
section.voice #voiceList li > dl > dd.form {
  margin-left: 4.6rem;
  border: solid 2px #DDD;
  border-radius: 0.6rem;
  background-color: #FFF;
  padding: 1.2em;
  width: calc(100% - 4.6rem);
  font-size: 0.75rem;
}
section.voice #voiceList > ol > li {
  border-bottom: solid 0.1rem #DDD;
  padding: 2rem 0;
}
section.voice #voiceList > ol > li > dl > dd {
  border: solid 2px #EFEFEF;
  background-color: #EFEFEF;
}
section.voice #voiceList > ol > li > dl > dd::before {
  border-top: solid 2px #EFEFEF;
  border-left: solid 2px #EFEFEF;
  background-color: #EFEFEF;
}
section.voice #voiceList li li {
  margin-top: 1rem;
}
section.voice #voiceList li li dd {
  border: solid 2px #DDD;
  background-color: #FFF;
}
section.voice #voiceList li li dd::before {
  border-top: solid 2px #DDD;
  border-left: solid 2px #DDD;
  background-color: #FFF;
}
section.voice #voiceList > p {
  margin-top: 2rem;
  text-align: center;
  font-size: 0.7rem;
}
section.voice #voiceList > p .close {
  display: none;
}
section.voice #voiceList > p.is-opened .close {
  display: inline-block;
}
section.voice #voiceList > p.is-opened .open {
  display: none;
}

section.links {
  background-color: var(--category-color-7);
  padding: 2.5rem var(--h-margin);
  text-align: center;
}
section.links p {
  margin-top: 2rem;
  font-size: 0.8rem;
}

section.instagram_tag {
  margin: 2.5rem 0 6rem;
  padding: 0 var(--h-margin);
}
section.instagram_tag h2 {
  margin: 0 auto 1.5rem;
  width: 4.7rem;
}
section.instagram_tag .tag {
  display: flex;
  align-items: center;
  gap: 1em;
  margin-bottom: 1.5rem;
  border-top: solid 1px;
  border-bottom: solid 1px;
  padding: 1em 0;
  font-size: 0.7rem;
}
section.instagram_tag .tag picture {
  position: relative;
  z-index: 1;
  overflow: hidden;
  border-radius: 9999rem;
  width: 2.2rem;
  height: 2.2rem;
}
section.instagram_tag .tag picture img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
section.instagram_tag ul {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}
section.instagram_tag li {
  width: calc(50% - 0.75rem);
}

aside.pick_up {
  position: relative;
  z-index: 1;
  margin-top: 1.5rem;
  background: url("../img/bg-wave.png") no-repeat 50% 0/100% auto;
  padding: 5.5rem var(--h-margin) 4rem;
}
aside.pick_up::before {
  content: "";
  display: block;
  position: absolute;
  z-index: -1;
  top: 7vw;
  left: calc(50% - 50vw);
  background-color: #FDEDF6;
  width: 100vw;
  height: calc(100% - 7vw);
}
aside.pick_up h2 {
  margin-bottom: 1.5rem;
}
aside.pick_up h2 span {
  display: block;
  margin-bottom: 0.5em;
  letter-spacing: 0.1em;
  font-size: 0.6rem;
  font-weight: 700;
  color: var(--key-color);
}
aside.pick_up h2 em {
  display: block;
  letter-spacing: 0.05em;
  font-size: 1.2rem;
  font-weight: 500;
}
aside.pick_up ul {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}
aside.pick_up li {
  width: calc(50% - 0.75rem);
}

section.review {
  margin: 0 max(6vw, 50vw - 21.5rem);
  border-bottom: solid 1px #AAA;
  background-color: #FFF;
  padding: 0.5rem 0 3rem;
}
section.review h1 {
  display: flex;
  align-items: center;
  gap: 1em;
  padding: 1rem 0;
  border-top: solid 1px #AAA;
  border-bottom: solid 1px #AAA;
  font-size: 0.7rem;
}
section.review h1 picture {
  width: 3.5rem;
  position: relative;
  aspect-ratio: 2/3;
}
section.review h1 picture img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
section.review h1 em {
  display: block;
  text-align: center;
}
section.review form {
  padding: 1rem 0;
  font-size: 0.8rem;
}

section.thanks_post {
  margin: 7rem max(6vw, 50vw - 21.5rem);
  text-align: center;
  font-size: 0.75rem;
}
section.thanks_post h1 {
  margin-bottom: 2em;
  font-size: 1.2rem;
  font-weight: 700;
}
section.thanks_post p {
  margin-bottom: 2em;
  line-height: 2.4;
}

@media all and (min-width: 480px) {
  section.instagram_tag li {
    width: calc(25% - 1.125rem);
  }
  aside.pick_up li {
    width: calc(25% - 1.125rem);
  }
}
@media all and (min-width: 640px) {
  section.episode #reviewsList ol {
    flex-direction: row;
    flex-wrap: wrap;
    max-width: 41rem;
  }
  section.episode #reviewsList li {
    width: calc(50% - 0.5rem);
  }
  section.episode #reviewsList li dl {
    box-sizing: border-box;
    height: 100%;
  }
  section.voice #voiceList > ol > li > dl {
    margin-right: 20%;
  }
  section.voice #voiceList li li {
    margin-top: 1.5rem;
  }
  section.voice #voiceList li li dl {
    margin-left: 20%;
  }
}
@media all and (min-width: 960px) {
  section.item {
    position: relative;
    display: grid;
    grid-template-columns: 19.8rem 1fr;
    grid-template-rows: auto auto auto auto;
    gap: 2rem 3rem;
  }
  section.item figure {
    grid-column: 1/2;
    grid-row: 1/3;
    overflow: hidden;
    background-color: #FFF;
  }
  section.item figure li {
    top: 2.5rem;
    left: calc(50% - 7.4rem);
    width: 14.8rem;
    aspect-ratio: 1/1;
  }
  section.item > div {
    grid-column: 2/3;
    grid-row: 1/2;
    width: 100%;
    font-size: 0.7rem;
  }
  section.item > div h2 {
    font-size: 0.9rem;
  }
  section.item .buttons {
    grid-column: 1/2;
    grid-row: 3/4;
    align-self: start;
    font-size: 0.7rem;
  }
  section.item ul {
    grid-column: 2/3;
    grid-row: 2/4;
    font-size: 0.6rem;
  }
  section.item .counter {
    grid-column: 1/3;
    grid-row: 4/5;
  }
  section.episode #reviewsList ol {
    max-width: none;
  }
  section.episode #reviewsList li {
    width: calc(33.333% - 0.66666rem);
  }
  .page-episode_post main {
    background-color: var(--lightkey-color);
  }
  section.review {
    margin-bottom: 5rem;
    border-bottom: none;
    padding-left: min(12%, 5.4rem);
    padding-right: min(12%, 5.4rem);
  }
  section.review h1 {
    flex-direction: column;
    border-top: none;
  }
  section.review form {
    padding-top: 2rem;
  }
}
/*---------------------------------------------

Product Sections CSS

for www.kasugai.co.jp
coded by d-spica at 2023-09-12
imported to "style.scss"

---------------------------------------------*/
section.items {
  background-color: var(--lightkey-color);
  padding: 3.5rem var(--h-margin);
}
section.items h1 {
  margin-bottom: 1rem;
  text-align: center;
}
section.items h1 span {
  display: block;
  margin-bottom: 0.5em;
  letter-spacing: 0.1em;
  font-size: 0.6rem;
  font-weight: 700;
  color: var(--key-color);
}
section.items h1 span::before {
  content: "";
  display: inline-block;
  margin-right: 0.8em;
  border-left: solid 0.15em;
  width: 0;
  height: 1.4em;
  vertical-align: -0.3em;
  rotate: -30deg;
}
section.items h1 span::after {
  content: "";
  display: inline-block;
  margin-left: 0.6em;
  border-right: solid 0.15em;
  width: 0;
  height: 1.4em;
  vertical-align: -0.3em;
  rotate: 30deg;
}
section.items h1 em {
  display: block;
  letter-spacing: 0.05em;
  font-size: 1.2rem;
  font-weight: 500;
}
section.items .nav-section {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  position: sticky;
  top: 3.9rem;
  z-index: 1;
  margin-bottom: 1.5rem;
  padding: 1rem 0;
  background-color: var(--lightkey-color);
}
section.items .nav-section a {
  display: inline-block;
  border: solid 2px;
  border-radius: 9999rem;
  background-color: var(--key-color);
  padding: 0.6em 1em;
  width: 5.5em;
  text-align: center;
  letter-spacing: 0.1em;
  font-size: 0.75rem;
  font-weight: 500;
  color: #FFF;
}
section.items .nav-section a[href*=new] {
  background: url("../img/bg-tag_new.png") repeat-x 50% 50%/auto 120%;
}
section.items .nav-section a[href*=candy] {
  background-color: var(--candy-color);
}
section.items .nav-section a[href*=gummy] {
  background-color: var(--gummy-color);
}
section.items .nav-section a[href*=ramune] {
  background-color: var(--ramune-color);
}
section.items .nav-section a[href*=bean] {
  background-color: var(--bean-color);
}
section.items section {
  position: relative;
  margin: 3rem 0;
  border-radius: 1rem;
  background-color: #FFF;
  padding: 1.5rem min(4vw, 1.5rem) 0.5rem;
}
section.items section h2 {
  position: absolute;
  top: -1rem;
  left: calc(50% - 6rem);
  background: url("../img/rb-pink.svg") no-repeat 50% 50%/100% 100%;
  padding: 0.6em 1em;
  width: 10rem;
  text-align: center;
  letter-spacing: 0.1em;
  font-size: 0.9rem;
  font-weight: 500;
  color: #FFF;
}
section.items section #new + h2 {
  background-image: url("../img/rb-new.svg");
}
section.items section #candy + h2 {
  background-image: url("../img/rb-candy.svg");
}
section.items section #gummy + h2 {
  background-image: url("../img/rb-gummy.svg");
}
section.items section #ramune + h2 {
  background-image: url("../img/rb-ramune.svg");
}
section.items section #bean + h2 {
  background-image: url("../img/rb-bean.svg");
}
section.items section ul {
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
  margin-bottom: -2px;
}
section.items section li {
  width: 50%;
}
section.items section li a {
  display: block;
  padding: 1.5rem 0;
}
section.items section li picture {
  position: relative;
  aspect-ratio: 1/1;
}
section.items section li picture img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
section.items section li em {
  display: block;
  margin-top: 0.6em;
  height: 3.2em;
  padding: 0 0.8em;
  text-align: center;
  line-height: 1.6;
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--key-color);
}
section.items section p {
  margin: 2rem 0;
  text-align: center;
  font-size: 0.75rem;
}

#page.page-items {
  overflow: visible;
}

@media all and (min-width: 560px) {
  section.items section li {
    width: 33.333%;
  }
}
@media all and (min-width: 800px) {
  section.items section li {
    width: 25%;
  }
}
/*---------------------------------------------

Introduction Sections CSS

for www.kasugai.co.jp
coded by d-spica at 2023-09-26
imported to "style.scss"

---------------------------------------------*/
.page-factory header.header, .page-members header.header {
  background-color: transparent;
}
.page-factory header.header .logo img, .page-members header.header .logo img {
  filter: brightness(6);
}
.page-factory header.header .nav dt span, .page-members header.header .nav dt span {
  background-color: #FFF;
}
.page-factory main, .page-members main {
  background: url("../img/bg-introduction-R.png") repeat-x 50% 0/19.2rem auto;
}

.page-factory_post header.header, .page-members_post header.header {
  background-color: transparent;
}

.page-factory_post header.title-L {
  grid-template-columns: 45% 1fr;
}
.page-factory_post header.title-L picture {
  margin-right: -6vw;
  border-radius: 1.5rem 0 0 1.5rem;
}

.page-members_post header.title-L picture {
  margin-right: -6vw;
  border-radius: 1.5rem 0 0 1.5rem;
}

.is-scroll .page-factory header.header, .is-scroll .page-members header.header {
  background-color: #FFF;
}
.is-scroll .page-factory header.header .logo img, .is-scroll .page-members header.header .logo img {
  filter: brightness(1);
}
.is-scroll .page-factory_post header.header, .is-scroll .page-members_post header.header {
  background-color: #FFF;
}

section.introduction {
  position: relative;
  padding: 0 var(--h-margin) 5rem;
}
section.introduction p {
  margin-bottom: 2rem;
  line-height: 2.4;
  letter-spacing: 0.05em;
  text-align: justify;
  font-size: 0.75rem;
}
section.introduction ul {
  display: flex;
  flex-wrap: wrap;
  gap: min(4vw, 1.8rem);
}
section.introduction li {
  position: relative;
  box-sizing: border-box;
  border-radius: 9999rem 9999rem 0 0;
  background-color: #FFF;
  padding: 1em 1em 5em;
  width: calc(50% - min(2vw, 0.9rem));
  font-size: clamp(10px, 0.6060606061vw + 7.7272727273px, 15px);
}
section.introduction li picture {
  position: relative;
  z-index: 1;
  overflow: hidden;
  border-radius: 9999rem 9999rem 0 0;
  aspect-ratio: 1/1;
}
section.introduction li picture img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: scale var(--speed);
}
section.introduction li em {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-bottom: solid 0.09rem;
  padding: 0.6em 0;
  height: 2.8em;
  text-align: center;
  font-size: clamp(12px, 0.6060606061vw + 9.7272727273px, 17px);
  font-weight: 500;
  color: var(--key-color);
}
section.introduction li em i {
  display: block;
  font-size: 0.85em;
  color: var(--font-color);
}
section.introduction li span {
  display: block;
  padding: 0.6em 0;
  line-height: 1.6;
}
section.introduction li u {
  display: block;
  position: absolute;
  bottom: 1.5em;
  left: calc(50% - 5.8em);
  padding: 0.8em;
  min-width: 10em;
  font-size: inherit;
  transition: opacity var(--speed);
}
section.introduction li a:hover picture img {
  scale: 1.1;
}
section.introduction li a:hover u {
  opacity: 0.7;
}

section.introduction {
  z-index: 1;
  margin-top: -3.8rem;
  padding: 4.9rem var(--h-margin) 5rem;
}
section.introduction::before {
  content: "";
  display: block;
  position: absolute;
  top: 0.55rem;
  left: calc(50% - 60vw);
  z-index: -1;
  border-bottom: solid 34.8vw #F5F5F7;
  border-left: solid 60vw transparent;
  border-right: solid 60vw transparent;
}
section.introduction::after {
  content: "";
  display: block;
  position: absolute;
  top: min(0.55rem + 29vw - 0.05rem, 11.6rem);
  left: calc(50% - 50vw);
  z-index: -1;
  background-color: #F5F5F7;
  width: 100vw;
  height: max(100% - 29vw - 0.55rem, 100% - 11.6rem);
}
section.introduction header {
  font-size: clamp(11px, 0.8484848485vw + 7.8181818182px, 18px);
}
section.introduction header .title {
  margin: 0 auto;
}
section.introduction header p {
  margin: 1em auto 1.5em;
  border-top: solid 0.09rem;
  border-bottom: solid 0.09rem;
  padding: 0.7em 0;
  max-width: 34em;
  text-align: center;
  font-weight: 500;
}

.page-factory section.introduction header .title {
  padding-right: 3.17em;
  width: 15.1em;
}

.page-members section.introduction header .title {
  padding-right: 3.17em;
  width: 15.1em;
}

section.introduction-post {
  background-color: #F5F5F6;
  padding: 0 var(--h-margin) 2rem;
  font-size: 0.75rem;
}
section.introduction-post h2 {
  clear: both;
  margin: 3rem 0 1.5em;
  border-top: double 0.3rem;
  border-bottom: double 0.3rem;
  padding: 0.6em 0;
  text-align: center;
  letter-spacing: 0.2em;
  font-size: 133.33%;
  font-weight: 500;
}
section.introduction-post h3 {
  clear: both;
  margin: 3em 0 1em;
  letter-spacing: 200;
  font-size: 120%;
  font-weight: 500;
  color: var(--key-color);
}
section.introduction-post h4 {
  clear: both;
  margin: 3em 0 1em;
  letter-spacing: 200;
  font-size: 120%;
  font-weight: 500;
}
section.introduction-post h5 {
  margin: 2em 0 0.5em;
  font-size: 110%;
  font-weight: 500;
}
section.introduction-post h6 {
  margin-bottom: 0.3em;
  font-weight: 500;
}
section.introduction-post p {
  line-height: 2.4;
  margin-bottom: 2em;
}
section.introduction-post ul, section.introduction-post ol, section.introduction-post blockquote {
  line-height: 2;
  margin-bottom: 2em;
}
section.introduction-post ul {
  padding-left: 1.5em;
  list-style: disc;
}
section.introduction-post ol {
  padding-left: 1.5em;
}
section.introduction-post li {
  margin-bottom: 0.4em;
}
section.introduction-post blockquote {
  border-left: solid 0.4em #FFF;
  padding-left: 1em;
}
section.introduction-post img {
  vertical-align: middle;
}
section.introduction-post hr {
  visibility: visible;
  border: none;
  background-color: #AAA;
  height: 1px;
}
section.introduction-post .alignleft, section.introduction-post .alignright, section.introduction-post .aligncenter {
  display: block;
  margin: 0 auto 1.5em;
}
section.introduction-post .wp-caption .wp-caption-text {
  display: block;
  margin-top: 0.8em;
  line-height: 1.6;
  font-size: 0.6rem;
}
section.introduction-post a {
  text-decoration: underline;
  text-underline-offset: 0.2em;
  color: var(--key-color);
}
section.introduction-post a:hover {
  text-decoration: none;
}
section.introduction-post :first-child {
  margin-top: 0;
}

aside.siblings-posts {
  padding: clamp(50px, 6.0606060606vw + 27.2727272727px, 100px) var(--h-margin);
}
aside.siblings-posts ul {
  border-top: solid 1px;
  margin: 0 auto;
  width: -moz-fit-content;
  width: fit-content;
  min-width: 24em;
  font-size: clamp(12px, 0.7272727273vw + 9.2727272727px, 18px);
  font-weight: 500;
}
aside.siblings-posts li {
  border-bottom: solid 1px;
}
aside.siblings-posts li a {
  display: block;
  position: relative;
  padding: 1em 0.5em 1em 2em;
}
aside.siblings-posts li a::before {
  content: "";
  display: block;
  position: absolute;
  top: calc(50% - 0.2em);
  left: 0.5em;
  margin-right: 0.8em;
  border-top: solid 0.1rem var(--key-color);
  border-right: solid 0.1rem var(--key-color);
  width: 0.35em;
  height: 0.35em;
  rotate: 45deg;
}
aside.siblings-posts li a:hover {
  opacity: 0.7;
}

@media all and (min-width: 480px) {
  .page-factory_post header.title-L picture {
    aspect-ratio: 3/2;
  }
}
@media all and (min-width: 720px) {
  .page-factory_post header.title-L {
    grid-template-columns: 1fr 48%;
  }
  .page-factory_post header.title-L picture {
    margin-right: 0;
  }
  .page-members_post header.title-L picture {
    margin-right: 0;
  }
  section.introduction li {
    width: calc(33.333% - min(2.6666vw, 1.2rem));
  }
}
@media all and (min-width: 960px) {
  .page-factory header.header .logo img {
    filter: brightness(1);
  }
  section.introduction {
    margin-top: -6.6rem;
  }
  section.introduction::after {
    top: min(1.15rem + 29vw - 0.05rem, 15.8rem);
    height: max(100% - 29vw - 1.15rem, 100% - 15.8rem);
  }
  section.introduction-post .alignleft {
    float: left;
    margin: 0 2em 1.5em 0;
    max-width: 60%;
  }
  section.introduction-post .alignright {
    float: right;
    margin: 0 0 1.5em 2em;
    max-width: 60%;
  }
}
@media all and (min-width: 1280px) {
  section.introduction {
    margin-top: -0.4rem;
    padding: 8.5rem var(--h-margin) 5rem;
  }
  section.introduction::before {
    top: 5.5rem;
  }
  section.introduction::after {
    top: min(5.5rem + 29vw - 0.05rem, 27.7rem);
    height: max(100% - 29vw - 5.5rem, 100% - 27.7rem);
  }
  section.introduction header .title {
    margin-top: 7rem;
  }
}
/*---------------------------------------------

Corporate Sections CSS

for www.kasugai.co.jp
coded by d-spica at 2023-10-13
imported to "style.scss"

---------------------------------------------*/
section.pages,
section.vision {
  padding: 0 var(--h-margin) clamp(50px, 6.0606060606vw + 27.2727272727px, 100px);
  font-size: 0.75rem;
}
section.pages header,
section.vision header {
  position: relative;
}
section.pages header picture,
section.vision header picture {
  position: relative;
  z-index: -1;
  margin: 0 calc(-1 * var(--h-margin));
  height: clamp(333px, 36.4848484848vw + 196.1818181818px, 634px);
}
section.pages header picture img,
section.vision header picture img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
section.pages header h2,
section.vision header h2 {
  position: absolute;
  bottom: calc(clamp(50px, 8.4848484848vw + 18.1818181818px, 120px) + 1.5rem);
  left: 0;
  line-height: 1.7;
  letter-spacing: 0.1em;
  font-size: clamp(20px, 2.1818181818vw + 11.8181818182px, 38px);
  font-weight: 700;
  color: #FFF;
  text-shadow: 0 0 0.6rem rgb(0, 0, 0);
}
section.pages section,
section.vision section {
  margin-top: calc(-1 * clamp(50px, 8.4848484848vw + 18.1818181818px, 120px));
  border-radius: clamp(20px, 2.4242424242vw + 10.9090909091px, 40px) clamp(20px, 2.4242424242vw + 10.9090909091px, 40px) 0 0;
  background-color: #FFF;
}
section.pages section > p,
section.vision section > p {
  padding: clamp(25px, 3.0303030303vw + 13.6363636364px, 50px);
  line-height: 2.4;
  letter-spacing: 0.1em;
  font-size: 0.8rem;
}
section.pages section ul,
section.vision section ul {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(12px, 3.3939393939vw - 0.7272727273px, 40px);
}
section.pages section li,
section.vision section li {
  overflow: hidden;
  border-radius: clamp(20px, 2.4242424242vw + 10.9090909091px, 40px) 0 clamp(20px, 2.4242424242vw + 10.9090909091px, 40px) 0;
  background-color: var(--lightkey-color);
  padding-bottom: clamp(20px, 1.2121212121vw + 15.4545454545px, 30px);
  width: calc(50% - clamp(12px, 3.3939393939vw - 0.7272727273px, 40px) / 2);
  text-align: center;
}
section.pages section li em,
section.vision section li em {
  display: block;
  margin: 1em 0;
  letter-spacing: 0.1em;
  font-size: clamp(15px, 0.8484848485vw + 11.8181818182px, 22px);
  font-weight: 500;
}
section.pages section li a,
section.vision section li a {
  min-width: 8em;
  width: calc(65% - 2em);
  font-size: clamp(10px, 0.7272727273vw + 7.2727272727px, 16px);
}
section.pages section dl,
section.vision section dl {
  position: relative;
  z-index: 1;
  margin-top: calc(-1 * var(--h-margin));
  padding: var(--h-margin) var(--h-margin) calc(2 * var(--h-margin));
  font-size: 0.75rem;
}
section.pages section dl::before,
section.vision section dl::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
}
section.pages section dl:nth-of-type(1),
section.vision section dl:nth-of-type(1) {
  margin-top: var(--h-margin);
}
section.pages section dl:nth-of-type(2n+1),
section.vision section dl:nth-of-type(2n+1) {
  margin-right: calc(-1 * var(--h-margin));
}
section.pages section dl:nth-of-type(2n+1)::before,
section.vision section dl:nth-of-type(2n+1)::before {
  border-radius: clamp(20px, 2.4242424242vw + 10.9090909091px, 40px) 0 0 clamp(20px, 2.4242424242vw + 10.9090909091px, 40px);
  background-color: var(--lightkey-color);
}
section.pages section dl:nth-of-type(2n),
section.vision section dl:nth-of-type(2n) {
  margin-left: calc(-1 * var(--h-margin));
}
section.pages section dl:nth-of-type(2n)::before,
section.vision section dl:nth-of-type(2n)::before {
  border-radius: 0 clamp(20px, 2.4242424242vw + 10.9090909091px, 40px) clamp(20px, 2.4242424242vw + 10.9090909091px, 40px) 0;
  background-color: #F8CDE5;
}
section.pages section dl:last-child,
section.vision section dl:last-child {
  padding-bottom: var(--h-margin);
}
section.pages section dt,
section.vision section dt {
  margin-bottom: 0.6em;
  letter-spacing: 0.1em;
  font-size: clamp(18px, 1.2121212121vw + 13.4545454545px, 28px);
  font-weight: 500;
  color: var(--key-color);
}
section.pages section dd,
section.vision section dd {
  line-height: 2.4;
}

aside.pages {
  margin: 0 var(--h-margin);
  padding: clamp(50px, 6.0606060606vw + 27.2727272727px, 100px) 0;
}
aside.pages ul {
  border-top: solid 1px;
  margin: 0 auto;
  max-width: 21.5rem;
  font-size: 0.9rem;
  font-weight: 500;
}
aside.pages li {
  border-bottom: solid 1px;
}
aside.pages li a {
  display: block;
  position: relative;
  padding: 1em 1em 1em 2em;
  letter-spacing: 0.1em;
}
aside.pages li a::before {
  content: "";
  display: block;
  position: absolute;
  top: calc(50% - 0.2em);
  left: 0.8em;
  border-top: solid 0.12rem var(--key-color);
  border-right: solid 0.12rem var(--key-color);
  width: 0.3em;
  height: 0.3em;
  rotate: 45deg;
}
aside.pages li a:hover {
  opacity: 0.7;
}

section.profile {
  border-radius: clamp(20px, 2.4242424242vw + 10.9090909091px, 40px);
  background-color: var(--lightkey-color);
  padding: clamp(40px, 4.8484848485vw + 21.8181818182px, 80px) var(--h-margin);
}
section.profile table {
  width: 100%;
  line-height: 1.6;
  letter-spacing: 0.05em;
  font-size: clamp(11px, 0.4848484848vw + 9.1818181818px, 15px);
}
section.profile th {
  border-top: solid 1px #DDD;
  background-color: #F5F5F6;
  padding: 1em 0.5em;
  text-align: center;
  letter-spacing: 0.05em;
  white-space: nowrap;
  font-weight: 500;
}
section.profile td {
  border-top: solid 1px #DDD;
  background-color: #FFF;
  padding: 1em;
}
section.profile td p:nth-of-type(n+2) {
  margin-top: 0.6em;
}
section.profile td p em {
  display: block;
  font-weight: 500;
}
section.profile tr:first-child th, section.profile tr:first-child td {
  border-top: none;
}

section.history {
  border-radius: clamp(20px, 2.4242424242vw + 10.9090909091px, 40px);
  padding: 2rem var(--h-margin);
}
section.history:nth-of-type(2n+1) {
  background-color: var(--lightkey-color);
}
section.history:nth-of-type(2n) {
  background-color: #F8CDE5;
}
section.history h2 {
  border-bottom: dotted 0.2rem #F17EBE;
  padding-bottom: 0.4em;
  letter-spacing: 0.05em;
  font-size: 1rem;
  font-weight: 500;
  color: var(--key-color);
}
section.history table {
  width: 100%;
  line-height: 1.6;
  letter-spacing: 0.05em;
  font-size: clamp(11px, 0.4848484848vw + 9.1818181818px, 15px);
}
section.history th {
  border-bottom: solid 1px #777;
  padding: 1em 0;
  width: 11em;
  text-align: left;
  font-weight: 500;
}
section.history td {
  border-bottom: solid 1px #777;
  padding: 1em 0;
}
section.history td span {
  font-size: 0.6rem;
}

section.offices {
  border-radius: clamp(20px, 2.4242424242vw + 10.9090909091px, 40px);
  background-color: var(--lightkey-color);
  padding: 2rem var(--h-margin);
}
section.offices:nth-of-type(n+2) {
  margin-top: 1rem;
}
section.offices h2 {
  border-bottom: dotted 0.2rem #F17EBE;
  padding-bottom: 0.4em;
  letter-spacing: 0.05em;
  font-size: 1rem;
  font-weight: 500;
  color: var(--key-color);
}
section.offices table {
  width: 100%;
  line-height: 1.6;
  letter-spacing: 0.05em;
  font-size: clamp(11px, 0.4848484848vw + 9.1818181818px, 15px);
}
section.offices th {
  border-bottom: solid 1px #777;
  padding: 1em 0;
  width: 10em;
  text-align: left;
  font-weight: 500;
}
section.offices td {
  border-bottom: solid 1px #777;
  padding: 1em 0;
}
section.offices td p:nth-of-type(n+2) {
  margin-top: 0.6em;
}
section.offices td .button-KF {
  line-height: 1;
  font-size: inherit;
}

section.recruit {
  border-radius: clamp(20px, 2.4242424242vw + 10.9090909091px, 40px);
  background-color: var(--lightkey-color);
  padding: 2rem var(--h-margin);
  letter-spacing: 0.05em;
  font-size: clamp(11px, 0.4848484848vw + 9.1818181818px, 15px);
}
section.recruit p {
  text-align: center;
  line-height: 2.4;
}
section.recruit p a {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
section.recruit dl {
  margin: 1rem auto;
  border-radius: 1rem;
  background-color: #FFF;
  padding: 1.5rem 1rem;
  max-width: 21rem;
  text-align: center;
  font-size: 0.75rem;
}
section.recruit dt {
  font-size: 0.8rem;
  font-weight: 500;
}
section.recruit dd a {
  display: block;
  margin: 0.5em 0;
  font-size: 1.5rem;
  color: var(--key-color);
}
section.recruit dd span {
  font-size: 0.7rem;
}

@media all and (min-width: 720px) {
  section.pages section dl,
  section.vision section dl {
    margin-top: -2.5rem;
    padding: 2.5rem 2.5rem 5rem;
    width: 36.666em;
  }
  section.pages section dl:nth-of-type(1),
  section.vision section dl:nth-of-type(1) {
    margin-top: 2.5rem;
  }
  section.pages section dl:nth-of-type(2n+1),
  section.vision section dl:nth-of-type(2n+1) {
    margin-left: auto;
    margin-right: auto;
  }
  section.pages section dl:nth-of-type(2n+1)::before,
  section.vision section dl:nth-of-type(2n+1)::before {
    width: calc(100vw - var(--h-margin));
  }
  section.pages section dl:nth-of-type(2n),
  section.vision section dl:nth-of-type(2n) {
    margin-left: auto;
    margin-right: auto;
  }
  section.pages section dl:nth-of-type(2n)::before,
  section.vision section dl:nth-of-type(2n)::before {
    left: calc(50% - 50vw);
    width: calc(100vw - var(--h-margin));
  }
  section.pages section dl:last-child,
  section.vision section dl:last-child {
    padding-bottom: 2.5rem;
  }
  section.profile table {
    letter-spacing: 0.1em;
  }
  section.profile th, section.profile td {
    padding: 1.5em;
  }
  section.history {
    margin: 0 var(--h-margin);
    padding-left: min(6vw, 2.5rem);
    padding-right: min(6vw, 2.5rem);
  }
  section.history table {
    letter-spacing: 0.1em;
  }
  section.history th {
    padding: 1.5em 0;
    width: 13em;
  }
  section.history td {
    padding: 1.5em 0;
  }
  section.offices {
    margin: 0 var(--h-margin);
    padding-left: min(6vw, 2.5rem);
    padding-right: min(6vw, 2.5rem);
  }
  section.offices table {
    letter-spacing: 0.1em;
  }
  section.offices th {
    padding: 1.5em 0;
    width: 11em;
  }
  section.offices td {
    padding: 1.5em 0;
  }
  section.recruit {
    margin: 0 var(--h-margin);
    padding: 3rem min(6vw, 2.5rem);
  }
}
@media all and (min-width: 960px) {
  section.pages section li,
  section.vision section li {
    width: calc(33.333% - clamp(12px, 3.3939393939vw - 0.7272727273px, 40px) * 0.66666);
  }
  section.offices td p {
    display: inline-block;
    vertical-align: middle;
  }
  section.offices td p:nth-of-type(1) {
    width: calc(100% - 16.3em);
  }
  section.offices td p:nth-of-type(n+2) {
    margin-top: 0;
  }
}
/*---------------------------------------------

Action Sections CSS

for www.kasugai.co.jp
coded by d-spica at 2023-10-19
imported to "style.scss"

---------------------------------------------*/
.page-action section.pages header picture {
  height: clamp(333px, 11.7575757576vw + 288.9090909091px, 430px);
}

.page-quality header.title-M .topicpath, .page-environment header.title-M .topicpath, .page-society header.title-M .topicpath, .page-sdgs header.title-M .topicpath {
  border-bottom: none;
}
.page-quality .box, .page-environment .box, .page-society .box, .page-sdgs .box {
  position: relative;
  padding-bottom: clamp(50px, 6.0606060606vw + 27.2727272727px, 100px);
}
.page-quality .box::before, .page-environment .box::before, .page-society .box::before, .page-sdgs .box::before {
  content: "";
  display: block;
  position: absolute;
  top: calc(-2 * clamp(60px, 7.2727272727vw + 32.7272727273px, 120px) - 1.4 * clamp(30px, 1.9393939394vw + 22.7272727273px, 46px) - 0.5rem);
  left: 0;
  z-index: -1;
  border-radius: 0 clamp(20px, 2.4242424242vw + 10.9090909091px, 40px) clamp(20px, 2.4242424242vw + 10.9090909091px, 40px) 0;
  background-color: var(--lightkey-color);
  width: 100%;
  height: calc(100% + 2 * clamp(60px, 7.2727272727vw + 32.7272727273px, 120px) + 1.4 * clamp(30px, 1.9393939394vw + 22.7272727273px, 46px) + 0.5rem);
}

section.action {
  margin: 0 var(--h-margin);
  border-radius: clamp(20px, 2.4242424242vw + 10.9090909091px, 40px);
  background-color: #FFF;
  padding: 2rem var(--h-margin);
  font-size: 0.75rem;
}
section.action:nth-of-type(n+2) {
  margin-top: 1rem;
}
section.action > :last-child {
  margin-bottom: 0;
}
section.action h2 {
  margin-bottom: 1em;
  border-bottom: dotted 0.2rem #F17EBE;
  padding-bottom: 0.4em;
  letter-spacing: 0.05em;
  font-size: 1rem;
  font-weight: 500;
  color: var(--key-color);
}
section.action h2 + section {
  margin-top: 1.2rem;
}
section.action section {
  margin-top: 3rem;
}
section.action section > :last-child {
  margin-bottom: 0;
}
section.action h3 {
  margin-bottom: 0.8em;
  border-left: solid 0.3em var(--key-color);
  padding-left: 0.8em;
  letter-spacing: 0.05em;
  font-size: 0.9rem;
  font-weight: 500;
  color: #484848;
}
section.action p {
  line-height: 2.4;
  letter-spacing: 0.05em;
  margin-bottom: 1.5rem;
}
section.action p.copy {
  line-height: 1.7;
  font-size: clamp(15px, 1.5757575758vw + 9.0909090909px, 28px);
  font-weight: 500;
  color: var(--key-color);
}
section.action p.number {
  margin-left: -1em;
  margin-right: -1em;
  text-align: center;
  line-height: 1.8;
  color: #484848;
}
section.action p.number b {
  font-size: clamp(13px, 1.0909090909vw + 8.9090909091px, 22px);
  font-weight: 700;
}
section.action p.number em {
  margin: 0 0.2em;
  font-size: clamp(20px, 1.4545454545vw + 14.5454545455px, 32px);
  font-weight: 700;
  color: var(--key-color);
}
section.action p.number em span {
  font-size: clamp(13px, 1.0909090909vw + 8.9090909091px, 22px);
}
section.action p.note {
  line-height: 1.9;
  font-size: 0.6rem;
}
section.action p.meta {
  text-align: right;
}
section.action table {
  margin-bottom: 1.5rem;
  border-top: solid 1px #DDD;
  width: 100%;
  line-height: 1.7;
  letter-spacing: 0.05em;
  font-size: clamp(11px, 0.4848484848vw + 9.1818181818px, 15px);
}
section.action table caption {
  padding-bottom: 0.8em;
  text-align: center;
}
section.action th {
  border-bottom: solid 1px #DDD;
  background-color: #F5F5F6;
  padding: 0.8em 1em;
  width: 10em;
  text-align: left;
  font-weight: 500;
}
section.action td {
  border-bottom: solid 1px #DDD;
  padding: 0.8em 1em;
}
section.action td p {
  margin-bottom: 0;
  line-height: inherit;
}
section.action td p:nth-of-type(n+2) {
  margin-top: 0.5em;
}
section.action td p em {
  display: block;
  font-weight: 500;
}
section.action h4 {
  margin-bottom: 1em;
  text-align: center;
  letter-spacing: 0.05em;
  font-size: 1rem;
  font-weight: 500;
  color: var(--key-color);
}
section.action ol {
  margin-bottom: 1.5rem;
  padding-left: 1.5em;
  letter-spacing: 0.05em;
}
section.action ul {
  margin-bottom: 1.5rem;
  letter-spacing: 0.05em;
}
section.action ul.links {
  margin-left: auto;
  margin-right: auto;
  width: -moz-fit-content;
  width: fit-content;
}
section.action ul.links li a {
  display: inline-block;
  position: relative;
  padding-left: 1.2em;
  font-weight: 500;
}
section.action ul.links li a::before {
  content: "";
  position: absolute;
  top: 1em;
  left: 0;
  display: inline-block;
  border-top: solid 0.1rem var(--key-color);
  border-right: solid 0.1rem var(--key-color);
  width: 0.4em;
  height: 0.4em;
  vertical-align: 0.1em;
  rotate: 45deg;
}
section.action ul.links li a:hover {
  opacity: 0.7;
}
section.action li {
  line-height: 2.4;
}

.page-quality picture {
  margin-left: auto;
  margin-right: auto;
  max-width: 21.5rem;
}
.page-quality #s01 .copy {
  text-align: center;
}
.page-quality #s02-01 th {
  width: 6.6em;
  white-space: nowrap;
}

.page-environment #s01 .copy {
  text-align: center;
}
.page-environment #s02-01 picture {
  margin: 0 auto 1.5rem;
  max-width: 21.5rem;
}
.page-environment #s02-01 li {
  margin-bottom: 1.5rem;
}
.page-environment #s02-01 li em {
  display: block;
  background-color: var(--key-color);
  padding: 0.3em 1em;
  text-align: center;
  font-weight: 500;
  color: #FFF;
}
.page-environment #s02-02 dl {
  letter-spacing: 0.05em;
}
.page-environment #s02-02 dl:nth-of-type(n+2) {
  margin-top: 2rem;
}
.page-environment #s02-02 dt {
  margin-bottom: 1em;
  border-bottom: solid 1px;
  padding-bottom: 0.6em;
  text-align: center;
  font-size: 0.85rem;
  font-weight: 500;
  color: #484848;
}
.page-environment #s02-02 dd {
  margin-top: 1rem;
  line-height: 2.4;
}
.page-environment #s02-02 dd picture {
  margin-left: auto;
  margin-right: auto;
  max-width: 21.5rem;
}
.page-environment #s02-02 dd picture:nth-of-type(n+2) {
  margin-top: 1rem;
}
.page-environment #s03-02 picture {
  margin-left: auto;
  margin-right: auto;
  max-width: 21.5rem;
}
.page-environment #s03-02-01 dl {
  padding-top: 2rem;
  margin-bottom: 2rem;
  letter-spacing: 0.05em;
}
.page-environment #s03-02-01 dt {
  position: relative;
  border-top: solid 0.08rem #777;
  border-bottom: solid 0.08rem #777;
  padding: 0.4em 1em;
  text-align: center;
  font-size: 0.85rem;
  font-weight: 500;
  color: #484848;
}
.page-environment #s03-02-01 dt b {
  position: absolute;
  top: -2.7em;
  left: 0;
  z-index: 1;
  background-color: var(--key-color);
  padding: 0.6em 1em;
  width: -moz-fit-content;
  width: fit-content;
  min-width: 5em;
  text-align: center;
  font-size: 0.65rem;
  font-weight: 500;
  color: #FFF;
  rotate: -6deg;
}
.page-environment #s03-02-01 dt b::after {
  content: "";
  display: block;
  position: absolute;
  bottom: -0.6em;
  left: calc(50% - 0.4em);
  border-top: solid 0.7em var(--key-color);
  border-left: solid 0.4em transparent;
  border-right: solid 0.4em transparent;
  width: 0;
  height: 0;
}
.page-environment #s03-02-01 dt em {
  color: var(--key-color);
}
.page-environment #s03-02-01 dd {
  margin-top: 1rem;
  line-height: 2.4;
}
.page-environment #s03-02-01 dd:nth-of-type(2) {
  margin-left: calc(-2 * var(--h-margin));
  margin-right: calc(-2 * var(--h-margin));
}
.page-environment #s03-02-01 dd:nth-of-type(2) p {
  position: relative;
  z-index: 1;
  max-width: 21.5rem;
  width: 62%;
}
.page-environment #s03-02-01 dd:nth-of-type(2) p:nth-of-type(2) {
  z-index: 0;
  margin-top: -4rem;
  margin-left: auto;
}
.page-environment #s03-02-01 dd:nth-of-type(2) p span {
  display: block;
  margin-top: 0.5em;
  box-sizing: border-box;
  padding: 0 1em;
  width: 60%;
  line-height: 1.6;
  font-size: 0.6rem;
}
.page-environment #s03-03 dl:nth-of-type(n+2) {
  margin-top: 1.5rem;
}
.page-environment #s03-03 dt {
  border-top: solid 0.08rem #777;
  border-bottom: solid 0.08rem #777;
  padding: 0.4em 1em;
  text-align: center;
  font-size: 0.85rem;
  font-weight: 500;
  color: #484848;
}
.page-environment #s03-03 dt b {
  color: var(--key-color);
}
.page-environment #s03-03 dd {
  margin-top: 1rem;
  line-height: 2.4;
}
.page-environment #s03-03 dd picture {
  margin: 0 auto 1rem;
  max-width: 26rem;
}
.page-environment #s03-03 dd p:last-child {
  margin-bottom: 0;
}

.page-society #s01 .meta {
  margin-top: -1rem;
}
.page-society #s01 section {
  margin-top: 2rem;
}
.page-society #s01 ul li {
  display: flex;
  gap: 0 1em;
}
.page-society #s01 ul li em {
  width: 6.5em;
}
.page-society #s01 ul li span {
  flex: 1;
}
.page-society #s02 picture {
  margin: 0 auto 1.5rem;
  max-width: 21.5rem;
}
.page-society #s02 picture:nth-of-type(2) {
  max-width: 6.4rem;
}
.page-society #s05 ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
}
.page-society #s05 ul li {
  width: 100%;
  max-width: 21.5rem;
}

.page-sdgs #s01 picture {
  margin: 0 auto;
  max-width: 30rem;
}
.page-sdgs #s02-01 dt {
  position: relative;
  margin-bottom: 0.5em;
  color: var(--key-color);
}
.page-sdgs #s02-01 dt::after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  right: 0;
  background-color: var(--key-color);
  width: calc(100% - 8em);
  height: 1px;
}
.page-sdgs #s02-01 dd {
  color: #484848;
}
.page-sdgs #s02-01 dd p em {
  display: block;
  font-weight: 500;
}
.page-sdgs #s02-01 picture {
  max-width: 12rem;
}

@media all and (min-width: 720px) {
  section.action {
    margin: 0 var(--h-margin);
    padding-left: min(6vw, 2.5rem);
    padding-right: min(6vw, 2.5rem);
  }
  section.action table {
    letter-spacing: 0.1em;
  }
  section.action th {
    padding: 1.2em 1.5em;
    width: 11em;
  }
  section.action td {
    padding: 1.2em 1.5em;
  }
  .page-quality #s01 p {
    text-align: center;
  }
  .page-environment #s02-01 ul {
    display: flex;
    gap: 2rem;
  }
  .page-environment #s02-01 li {
    flex: 1;
  }
  .page-environment #s02-02 dd:nth-of-type(2) {
    display: flex;
    justify-content: center;
    gap: 0 1rem;
  }
  .page-environment #s02-02 dd:nth-of-type(2) picture {
    width: calc(50% - 0.5rem);
  }
  .page-environment #s02-02 dd:nth-of-type(2) picture:nth-of-type(n+2) {
    margin-top: 0;
  }
  .page-environment #s03-02-01 dt b {
    top: -1em;
  }
  .page-environment #s03-02-01 dl:nth-of-type(1) dt b {
    left: calc(50% - 18.5em);
  }
  .page-environment #s03-02-01 dl:nth-of-type(2) dt b {
    left: calc(50% - 22.5em);
  }
  .page-environment #s03-02-01 dd:nth-of-type(2) {
    margin-left: 0;
    margin-right: 0;
    display: flex;
    gap: 0 1rem;
  }
  .page-environment #s03-02-01 dd:nth-of-type(2) p {
    width: calc(50% - 0.5rem);
  }
  .page-environment #s03-02-01 dd:nth-of-type(2) p span {
    width: 100%;
    text-align: right;
  }
  .page-environment #s03-02-01 dd:nth-of-type(2) p:nth-of-type(2) {
    margin: 0;
  }
  .page-sdgs #s02-01 dd {
    display: flex;
    gap: 0 2rem;
  }
  .page-sdgs #s02-01 dd p {
    flex: 1;
    margin-bottom: 0;
  }
  .page-sdgs #s02-01 dd picture {
    margin-top: 0.7em;
  }
}
@media all and (min-width: 960px) {
  .page-quality #s02-02, .page-quality #s03-01 {
    display: grid;
    grid-template-columns: 1fr 21.5rem;
    grid-template-rows: auto 1fr;
    gap: 0 2rem;
  }
  .page-quality #s02-02 h3, .page-quality #s03-01 h3 {
    grid-column: 1/2;
    grid-row: 1/2;
  }
  .page-quality #s02-02 p, .page-quality #s03-01 p {
    grid-column: 1/2;
    grid-row: 2/3;
    align-self: start;
    margin-bottom: 0;
  }
  .page-quality #s02-02 picture, .page-quality #s03-01 picture {
    grid-column: 2/3;
    grid-row: 1/3;
    align-self: center;
  }
  .page-environment #s02-01 header, .page-environment #s03-02 header {
    display: grid;
    grid-template-columns: 1fr 21.5rem;
    grid-template-rows: auto 1fr;
    gap: 0 2rem;
  }
  .page-environment #s02-01 header h3, .page-environment #s03-02 header h3 {
    grid-column: 1/2;
    grid-row: 1/2;
  }
  .page-environment #s02-01 header p, .page-environment #s03-02 header p {
    grid-column: 1/2;
    grid-row: 2/3;
    align-self: start;
    margin-bottom: 0;
  }
  .page-environment #s02-01 header picture, .page-environment #s03-02 header picture {
    grid-column: 2/3;
    grid-row: 1/3;
    align-self: center;
  }
  .page-society #s05 ul li {
    width: calc(33.333% - 0.4rem);
  }
}
@media all and (min-width: 1280px) {
  .page-quality .box::before, .page-environment .box::before, .page-society .box::before, .page-sdgs .box::before {
    width: calc(100% - var(--h-margin) / 2);
  }
}
/*---------------------------------------------

Customer Sections CSS

for www.kasugai.co.jp
coded by d-spica at 2023-10-03
imported to "style.scss"

---------------------------------------------*/
section.faq,
section.contact {
  border-radius: clamp(25px, 4.2424242424vw + 9.0909090909px, 60px);
  background-color: var(--lightkey-color);
  padding: min(6vw, 3rem) var(--h-margin);
}
section.faq header h2,
section.contact header h2 {
  margin-bottom: 1em;
  border-bottom: dotted 0.2rem #F17EBE;
  padding-bottom: 0.4em;
  letter-spacing: 0.05em;
  font-size: 1rem;
  font-weight: 500;
  color: var(--key-color);
}
section.faq header p,
section.contact header p {
  line-height: 2;
  text-align: justify;
  letter-spacing: 0.05em;
  font-size: 0.75rem;
}

section.faq section {
  margin-top: 2rem;
}
section.faq h3 {
  margin-bottom: 1em;
  border-left: solid 0.25em var(--key-color);
  padding-left: 0.75em;
  letter-spacing: 0.05em;
  font-size: 0.9rem;
  font-weight: 500;
}
section.faq dl {
  margin-bottom: 0.5rem;
  line-height: 1.8;
  font-size: clamp(11px, 0.6060606061vw + 8.7272727273px, 16px);
  color: #484848;
}
section.faq dt {
  position: relative;
  background-color: #FFF;
  padding: 1em 3.4em;
}
section.faq dt::before {
  content: "Q";
  display: block;
  position: absolute;
  top: 0.15em;
  left: 0.7em;
  font-size: 175%;
  font-weight: 500;
  color: #CCC;
}
section.faq dt span {
  display: block;
  position: absolute;
  top: 1.25em;
  right: 1.25em;
  width: 1.25em;
  height: 1.25em;
}
section.faq dt span::before, section.faq dt span::after {
  content: "";
  display: block;
  position: absolute;
  top: calc(50% - 0.5px);
  left: 0;
  background-color: #777;
  width: 100%;
  height: 1px;
}
section.faq dt span::before {
  rotate: 180deg;
  transition: rotate var(--speed);
}
section.faq dt span::after {
  rotate: 90deg;
  transition: rotate var(--speed);
}
section.faq dt.is-opened span::before {
  rotate: 0deg;
}
section.faq dt.is-opened span::after {
  rotate: 0deg;
}
section.faq dd {
  position: relative;
  margin-top: 0.15rem;
  background-color: #FFF;
  padding: 1em 3.4em 0.5em;
}
section.faq dd::before {
  content: "A";
  display: block;
  position: absolute;
  top: 0.15em;
  left: 0.7em;
  font-size: 175%;
  font-weight: 500;
  color: var(--key-color);
}
section.faq dd p {
  margin-bottom: 1em;
}
section.faq dd p.links {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}
section.faq dd p.links a {
  display: block;
  position: relative;
  padding-left: 1.2em;
  color: var(--font-color);
}
section.faq dd p.links a::before {
  content: "";
  position: absolute;
  top: 0.7em;
  left: 0;
  display: inline-block;
  border-top: solid 0.1rem var(--key-color);
  border-right: solid 0.1rem var(--key-color);
  width: 0.4em;
  height: 0.4em;
  vertical-align: 0.1em;
  rotate: 45deg;
}

section.contact {
  margin-top: 1.5rem;
}
section.contact header {
  margin-bottom: 1rem;
}
section.contact dl {
  margin: 0 auto 1rem;
  border-radius: 1rem;
  background-color: #FFF;
  padding: 1.5rem;
  max-width: 20rem;
  font-size: 0.75rem;
}
section.contact dl.tel {
  margin-top: 2rem;
}
section.contact dl.tel a {
  display: block;
  margin-bottom: 1rem;
  text-align: center;
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--key-color);
}
section.contact dl.tel span {
  display: block;
  margin-bottom: 1rem;
  border-bottom: solid 1px #484848;
  padding-bottom: 1rem;
  text-align: center;
  font-size: 0.7rem;
}
section.contact dl.tel p {
  line-height: 2;
  text-align: justify;
}
section.contact dt {
  margin-bottom: 1em;
  text-align: center;
  font-size: 0.8rem;
  font-weight: 500;
}
section.contact dd {
  text-align: center;
}
section.contact dd .button-KF {
  width: 14.5rem;
}

/*---------------------------------------------

Okashi Freak Sections CSS

for www.kasugai.co.jp
coded by d-spica at 2023-12-07
imported to "style.scss"

---------------------------------------------*/
section.okashifreak {
  background-color: #FAF8F6;
  padding: 3.5rem var(--h-margin);
}
section.okashifreak h2 {
  margin-bottom: 1rem;
  text-align: center;
}
section.okashifreak h2 img {
  width: clamp(206px, 10.7878787879vw + 165.5454545455px, 295px);
  mix-blend-mode: darken;
}
section.okashifreak .summary {
  margin: -0.5rem 0 1.5rem;
  text-align: center;
  line-height: 1.5;
  font-size: 0.85rem;
  font-weight: 500;
}
section.okashifreak .categories {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.8em;
  margin-bottom: 1rem;
  font-size: 0.65rem;
}
section.okashifreak .categories a:hover {
  opacity: 0.7;
}

section.okashifreak ul,
aside.relation ul {
  margin: 0 auto;
  border-radius: 0.4rem;
  background-color: #FFF;
  padding: 0 min(6vw, 2rem);
}
section.okashifreak li:nth-child(n+2),
aside.relation li:nth-child(n+2) {
  border-top: solid 1px #AAA;
}
section.okashifreak li a,
aside.relation li a {
  display: block;
  padding: 1.2rem 0;
}
section.okashifreak li a:hover,
aside.relation li a:hover {
  opacity: 0.7;
}
section.okashifreak li a picture,
aside.relation li a picture {
  position: relative;
  overflow: hidden;
  margin-bottom: 0.5rem;
  border-radius: 0.8rem;
  aspect-ratio: 16/9;
}
section.okashifreak li a picture img,
aside.relation li a picture img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
section.okashifreak li a .meta,
aside.relation li a .meta {
  display: block;
}
section.okashifreak li a .meta time,
aside.relation li a .meta time {
  margin-right: 1em;
  letter-spacing: 0.1em;
  font-size: 0.55rem;
  color: #999;
}
section.okashifreak li a em,
aside.relation li a em {
  display: block;
  margin: 0.8rem 0;
  font-size: 0.75rem;
}
section.okashifreak li a .tags,
aside.relation li a .tags {
  margin-bottom: 0;
  justify-content: flex-start;
}
section.okashifreak .tags,
aside.relation .tags {
  margin-bottom: 1rem;
  border-radius: 0.2rem;
  background-color: #FFF;
}
section.okashifreak .tags dt,
aside.relation .tags dt {
  position: relative;
  padding: 0.5em;
  text-align: center;
  font-size: 0.7rem;
  font-weight: 700;
  cursor: pointer;
}
section.okashifreak .tags dt::after,
aside.relation .tags dt::after {
  content: "";
  display: block;
  position: absolute;
  top: calc(50% - 0.2em);
  right: 0.8em;
  border-top: solid 0.12rem;
  border-right: solid 0.12rem;
  width: 0.3em;
  height: 0.3em;
  rotate: 135deg;
  transition: rotate 0.3s;
}
section.okashifreak .tags dt.is-opened::after,
aside.relation .tags dt.is-opened::after {
  rotate: -45deg;
}
section.okashifreak .tags dd,
aside.relation .tags dd {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.8em;
  padding: 0.3rem 0.5rem 0.8rem;
  font-size: 0.6rem;
}
section.okashifreak .tags dd a, section.okashifreak .tags dd b,
aside.relation .tags dd a,
aside.relation .tags dd b {
  display: inline-block;
  border: solid 1px;
  border-radius: 9999rem;
  background-color: #FFF;
  padding: 0.3em 1em;
  text-align: center;
  color: var(--key-color);
}
section.okashifreak .tags dd a:hover, section.okashifreak .tags dd b:hover,
aside.relation .tags dd a:hover,
aside.relation .tags dd b:hover {
  opacity: 0.7;
}
section.okashifreak .nav-more,
aside.relation .nav-more {
  margin-top: 2rem;
  text-align: center;
}
section.okashifreak .all, section.okashifreak .recipe, section.okashifreak .life, section.okashifreak .people, section.okashifreak .hanashi,
aside.relation .all,
aside.relation .recipe,
aside.relation .life,
aside.relation .people,
aside.relation .hanashi {
  display: inline-block;
  border-radius: 0.2rem;
  background-color: #999;
  padding: 0.3em 1em;
  text-align: center;
  letter-spacing: 0.05em;
  font-size: 0.65rem;
  font-weight: 700;
  color: #FFF;
}
section.okashifreak .all,
aside.relation .all {
  background-color: #65985A;
}
section.okashifreak .recipe,
aside.relation .recipe {
  background-color: #CB7F4F;
}
section.okashifreak .life,
aside.relation .life {
  background-color: #A02268;
}
section.okashifreak .people,
aside.relation .people {
  background-color: #286793;
}
section.okashifreak .hanashi,
aside.relation .hanashi {
  background-color: #624A98;
}

section.okashifreak-post {
  margin: 2rem auto 0;
  padding: 0 var(--h-margin) 2rem;
  max-width: 32.5rem;
  font-size: 0.75rem;
}
section.okashifreak-post h2 {
  clear: both;
  margin: 3rem 0 1.5em;
  text-align: center;
  letter-spacing: 0.2em;
  font-size: 133.33%;
  font-weight: 500;
}
section.okashifreak-post h3 {
  clear: both;
  margin: 3em 0 1em;
  letter-spacing: 200;
  font-size: 120%;
  font-weight: 500;
}
section.okashifreak-post h4 {
  clear: both;
  margin: 3em 0 1em;
  letter-spacing: 200;
  font-size: 120%;
  font-weight: 500;
}
section.okashifreak-post h5 {
  margin: 2em 0 0.5em;
  font-size: 110%;
  font-weight: 500;
}
section.okashifreak-post h6 {
  margin-bottom: 0.3em;
  font-weight: 500;
}
section.okashifreak-post section {
  line-height: 2;
  margin-bottom: 2em;
}
section.okashifreak-post p {
  line-height: 2.4;
  margin-bottom: 2em;
}
section.okashifreak-post ul, section.okashifreak-post ol, section.okashifreak-post blockquote {
  line-height: 2;
  margin-bottom: 2em;
}
section.okashifreak-post ul {
  padding-left: 1.5em;
  list-style: disc;
}
section.okashifreak-post ol {
  padding-left: 1.5em;
}
section.okashifreak-post li {
  margin-bottom: 0.4em;
}
section.okashifreak-post blockquote {
  border-left: solid 0.4em #FFF;
  padding-left: 1em;
}
section.okashifreak-post hr {
  visibility: visible;
  border: none;
  background-color: #AAA;
  height: 1px;
}
section.okashifreak-post .alignnone, section.okashifreak-post .alignleft, section.okashifreak-post .alignright, section.okashifreak-post .aligncenter {
  display: block;
  margin: 0 auto 1.5em;
  border-radius: 1rem;
}
section.okashifreak-post .wp-caption .wp-caption-text {
  display: block;
  margin-top: 0.8em;
  line-height: 1.6;
  font-size: 0.6rem;
}
section.okashifreak-post a {
  word-break: break-all;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  color: var(--key-color);
}
section.okashifreak-post a:hover {
  text-decoration: none;
}
section.okashifreak-post :first-child {
  margin-top: 0;
}

section.reference {
  background-color: #D3C0AD;
  padding: 3.5rem max(6vw, 50vw - 16.25rem);
  color: #40210F;
}
section.reference section {
  border-radius: 0.5rem;
  background-color: #FFF;
  padding: min(6vw, 1.5rem) min(6vw, 2rem);
}
section.reference section:nth-of-type(n+2) {
  margin-top: 1.5rem;
}
section.reference section.reference_item h3 {
  margin-bottom: 1em;
  border-bottom: solid 1px;
  padding-bottom: 0.5em;
  text-align: center;
  letter-spacing: 0.1em;
  font-size: 0.8rem;
  font-weight: 500;
}
section.reference section.reference_item picture {
  position: relative;
  margin: 0 auto 1rem;
  width: 7.5rem;
  aspect-ratio: 2/3;
}
section.reference section.reference_item picture img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
section.reference section.reference_item dt {
  margin-bottom: 0.6em;
  text-align: center;
  font-size: 1rem;
  font-weight: 500;
}
section.reference section.reference_item dd {
  line-height: 2;
  text-align: justify;
  font-size: 0.7rem;
}
section.reference section.reference_item .nav-more {
  margin-top: 1.2rem;
  border-top: solid 1px;
  padding-top: 1.2rem;
  text-align: center;
}
section.reference section.reference_item .nav-more .button-BF {
  font-size: 0.7rem;
}
section.reference section.reference_profile h3 {
  margin-bottom: 1em;
  border-bottom: solid 1px;
  padding-bottom: 1em;
  text-align: center;
  letter-spacing: 0.1em;
  font-size: 0.8rem;
  font-weight: 500;
}
section.reference section.reference_profile h3 span {
  display: block;
  position: relative;
  overflow: hidden;
  margin: 0 auto 1em;
  border-radius: 0.75rem;
  width: 10rem;
  aspect-ratio: 5/4;
}
section.reference section.reference_profile h3 span img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
section.reference section.reference_profile h3 em {
  display: block;
}
section.reference section.reference_profile p {
  margin-bottom: 1.5em;
  line-height: 2;
  text-align: justify;
  font-size: 0.7rem;
}
section.reference section.reference_profile p.links a {
  display: block;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  color: var(--key-color);
}
section.reference section.reference_profile p.links a:hover {
  text-decoration: none;
}
section.reference section.reference_profile > :last-child {
  margin-bottom: 0;
}

aside.relation {
  background-color: #F7F2ED;
  padding: 3.5rem max(6vw, 50vw - 16.25rem);
}
aside.relation h2 {
  margin-bottom: 1em;
  text-align: center;
  letter-spacing: 0.2em;
  font-size: 1.1rem;
  font-weight: 500;
  color: #40210F;
}

@media all and (min-width: 560px) {
  section.okashifreak li a,
  aside.relation li a {
    display: grid;
    grid-template-columns: 35% 1fr;
    grid-template-rows: auto auto auto;
    gap: 0 5%;
    align-items: start;
    padding: 1.2rem 0;
  }
  section.okashifreak li a picture,
  aside.relation li a picture {
    grid-column: 1/2;
    grid-row: 1/4;
    margin-bottom: 0;
  }
  section.reference section.reference_item picture {
    float: left;
  }
  section.reference section.reference_item dl {
    margin-left: 9rem;
  }
  section.reference section.reference_item dt {
    text-align: left;
  }
  section.reference section.reference_item .nav-more {
    clear: both;
  }
  section.reference section.reference_profile h3 {
    text-align: left;
  }
  section.reference section.reference_profile h3 span {
    display: inline-block;
    margin-right: 2em;
    margin-bottom: -0.3em;
  }
  section.reference section.reference_profile h3 em {
    display: inline-block;
  }
}
/*---------------------------------------------

Farm Sections CSS

for www.kasugai.co.jp
coded by d-spica at 2024-04-01
imported to "style.scss"

---------------------------------------------*/
section.farm-merit {
  background-color: #D5C5B5;
  padding: 3rem var(--h-margin);
  font-weight: 500;
  color: #330D0D;
}
section.farm-merit h2 {
  margin-bottom: 3rem;
  line-height: 2;
  letter-spacing: 0.1em;
  font-size: min(5vw, 1.2rem);
}
section.farm-merit dl {
  margin: 0 auto;
  border-radius: 1rem;
  background: #FFF;
  padding: 1.5rem;
  max-width: 31rem;
  font-size: 0.9rem;
}
section.farm-merit dt {
  margin-bottom: 0.8em;
  border-bottom: solid 1px;
  padding-bottom: 0.8em;
  text-align: center;
  letter-spacing: 0.1em;
}
section.farm-merit dd {
  line-height: 1.7;
}
section.farm-merit dd li {
  margin-top: 0.3em;
  position: relative;
  padding-left: 1.2em;
}
section.farm-merit dd li i {
  position: absolute;
  top: 0;
  left: 0;
}
section.farm-merit p {
  margin: 2em auto 0;
  max-width: 34rem;
  text-align: center;
  line-height: 2;
  font-size: 0.7rem;
}
section.farm-merit .nav-section {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.8rem 1.2rem;
}
section.farm-merit .nav-section .button-KF {
  border-color: #40210F;
  background-color: #40210F;
  flex: 1;
  min-width: 12rem;
  max-width: 16rem;
}
section.farm-merit .nav-section .button-KF::after {
  rotate: 135deg;
}

section.farm-notice,
section.farm-eventblog {
  background-color: #FAF8F6;
  padding: 3.5rem var(--h-margin);
}
section.farm-notice h2,
section.farm-eventblog h2 {
  margin-bottom: 1rem;
  text-align: center;
  font-weight: 500;
}
section.farm-notice h2 img,
section.farm-eventblog h2 img {
  width: clamp(206px, 10.7878787879vw + 165.5454545455px, 295px);
  mix-blend-mode: darken;
}
section.farm-notice ul,
section.farm-eventblog ul {
  margin: 0 auto;
  border-radius: 0.4rem;
  background-color: #FFF;
  padding: 0 min(6vw, 2rem);
}
section.farm-notice li:nth-child(n+2),
section.farm-eventblog li:nth-child(n+2) {
  border-top: solid 1px #AAA;
}
section.farm-notice li a,
section.farm-eventblog li a {
  display: block;
  padding: 1.2rem 0;
}
section.farm-notice li a:hover,
section.farm-eventblog li a:hover {
  opacity: 0.7;
}
section.farm-notice li a picture,
section.farm-eventblog li a picture {
  position: relative;
  overflow: hidden;
  margin-bottom: 0.5rem;
  border-radius: 0.8rem;
  aspect-ratio: 16/9;
}
section.farm-notice li a picture img,
section.farm-eventblog li a picture img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
section.farm-notice li a .meta,
section.farm-eventblog li a .meta {
  display: block;
}
section.farm-notice li a .meta time,
section.farm-eventblog li a .meta time {
  margin-right: 1em;
  letter-spacing: 0.1em;
  font-size: 0.55rem;
  color: #999;
}
section.farm-notice li a .meta b,
section.farm-eventblog li a .meta b {
  display: inline-block;
  border-radius: 0.2rem;
  background-color: #999;
  padding: 0.3em 1em;
  text-align: center;
  letter-spacing: 0.05em;
  font-size: 0.65rem;
  font-weight: 700;
  color: #FFF;
}
section.farm-notice li a .meta b.recruit,
section.farm-eventblog li a .meta b.recruit {
  background-color: #CE3F3F;
}
section.farm-notice li a em,
section.farm-eventblog li a em {
  display: block;
  margin: 0.8rem 0;
  font-size: 0.75rem;
}
section.farm-notice li a .tags,
section.farm-eventblog li a .tags {
  margin-bottom: 0;
  justify-content: flex-start;
}
section.farm-notice .nav-more,
section.farm-eventblog .nav-more {
  margin-top: 2rem;
  text-align: center;
}
section.farm-notice .nav-more .button-KO,
section.farm-eventblog .nav-more .button-KO {
  border-color: #40210F;
  background-color: transparent;
  color: #40210F;
}

section.farm-notice {
  background-color: #D5C5B5;
}

section.farm-eventblog {
  background-color: #F7F7F7;
}

section.farm-about,
section.farm-theme {
  padding: 3.5rem var(--h-margin);
}
section.farm-about h2,
section.farm-theme h2 {
  margin-bottom: 2rem;
}
section.farm-about h2 i,
section.farm-theme h2 i {
  display: block;
  margin: 0 auto 1rem;
  width: 3.2rem;
}
section.farm-about h2 em,
section.farm-theme h2 em {
  display: block;
  margin-bottom: 1em;
  text-align: center;
  letter-spacing: 0.1em;
  font-size: min(6vw, 1.7rem);
  font-weight: 500;
}
section.farm-about h2 span,
section.farm-theme h2 span {
  display: block;
  margin: 0 auto;
  background-color: #FFF;
  padding: 0.3em 0.6em;
  width: -moz-fit-content;
  width: fit-content;
  letter-spacing: 0.1em;
  font-size: min(3.9vw, 1.1rem);
  font-weight: 500;
}
section.farm-about p,
section.farm-theme p {
  margin: 0 auto 2em;
  max-width: 31rem;
  text-align: justify;
  line-height: 2;
  font-size: 0.8rem;
}
section.farm-about .photos,
section.farm-theme .photos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  max-width: none;
}
section.farm-about .photos img,
section.farm-theme .photos img {
  width: 100%;
  max-width: 24rem;
}
section.farm-about .nav-more,
section.farm-theme .nav-more {
  text-align: center;
}
section.farm-about .nav-more .button-KF,
section.farm-theme .nav-more .button-KF {
  border-color: #40210F;
  background-color: #40210F;
  width: 16rem;
}

section.farm-about {
  background-color: #D5C5B5;
}

section.farm-theme {
  background-color: #E3D9CF;
}

section.farm-partner {
  padding: 3.5rem var(--h-margin);
}
section.farm-partner h2 {
  margin-bottom: 2.5rem;
  text-align: center;
  font-weight: 500;
}
section.farm-partner h2 em {
  display: block;
  margin-bottom: 1.3rem;
  letter-spacing: 0.15em;
  font-size: 1.1rem;
}
section.farm-partner h2 span {
  display: block;
  border-top: solid 2px;
  border-bottom: solid 2px;
  padding: 0.3em 0;
  font-size: 1.5rem;
  color: #683408;
}
section.farm-partner section {
  margin-bottom: 3.5rem;
}
section.farm-partner section h3 {
  margin: 0 auto 1.2em;
  background-color: #E3D9CF;
  padding: 0.3em 0.6em;
  width: -moz-fit-content;
  width: fit-content;
  letter-spacing: 0.1em;
  font-size: 1.1rem;
  font-weight: 500;
  color: #330D0D;
}
section.farm-partner section ul {
  margin-bottom: 2em;
  text-align: center;
  line-height: 2;
  font-size: 0.8rem;
}
section.farm-partner section li::before {
  content: "・";
}
section.farm-partner section p {
  margin: 0 auto 2em;
  max-width: 31rem;
  text-align: justify;
  line-height: 2;
  font-size: 0.8rem;
}
section.farm-partner section .photos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
  max-width: none;
}
section.farm-partner section .photos img {
  width: calc(33.333% - 0.33333rem);
}
section.farm-partner section .photos + p {
  text-align: center;
  font-size: min(3.1vw, 0.8rem);
}
section.farm-partner .nav-relation {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}
section.farm-partner .nav-relation .button-KF {
  border-color: #40210F;
  background-color: #40210F;
  width: 16rem;
}

section.farm-post {
  margin: 2rem auto 0;
  padding: 0 var(--h-margin) 2rem;
  max-width: 32.5rem;
  font-size: 0.75rem;
}
section.farm-post h2 {
  clear: both;
  margin: 3rem 0 1.5em;
  text-align: center;
  letter-spacing: 0.2em;
  font-size: 133.33%;
  font-weight: 500;
}
section.farm-post h3 {
  clear: both;
  margin: 3em 0 1em;
  letter-spacing: 200;
  font-size: 120%;
  font-weight: 500;
}
section.farm-post h4 {
  clear: both;
  margin: 3em 0 1em;
  letter-spacing: 200;
  font-size: 120%;
  font-weight: 500;
}
section.farm-post h5 {
  margin: 2em 0 0.5em;
  font-size: 110%;
  font-weight: 500;
}
section.farm-post h6 {
  margin-bottom: 0.3em;
  font-weight: 500;
}
section.farm-post section {
  line-height: 2;
  margin-bottom: 2em;
}
section.farm-post p {
  line-height: 2.4;
  margin-bottom: 2em;
}
section.farm-post ul, section.farm-post ol, section.farm-post blockquote {
  line-height: 2;
  margin-bottom: 2em;
}
section.farm-post ul {
  padding-left: 1.5em;
  list-style: disc;
}
section.farm-post ol {
  padding-left: 1.5em;
}
section.farm-post li {
  margin-bottom: 0.4em;
}
section.farm-post blockquote {
  border-left: solid 0.4em #FFF;
  padding-left: 1em;
}
section.farm-post hr {
  visibility: visible;
  border: none;
  background-color: #AAA;
  height: 1px;
}
section.farm-post .alignnone, section.farm-post .alignleft, section.farm-post .alignright, section.farm-post .aligncenter {
  display: block;
  margin: 0 auto 1.5em;
  border-radius: 1rem;
}
section.farm-post .wp-caption .wp-caption-text {
  display: block;
  margin-top: 0.8em;
  line-height: 1.6;
  font-size: 0.6rem;
}
section.farm-post a {
  word-break: break-all;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  color: var(--key-color);
}
section.farm-post a:hover {
  text-decoration: none;
}
section.farm-post :first-child {
  margin-top: 0;
}

aside.links {
  background-color: #E3D9CF;
  padding: 3.5rem var(--h-margin);
  color: #330D0D;
}
aside.links h2 {
  margin-bottom: 1.5rem;
  text-align: center;
  letter-spacing: 0.1em;
  font-size: 1.1rem;
  font-weight: 500;
}
aside.links ul {
  border-top: solid 1px;
  margin: 0 auto;
  max-width: 22rem;
  font-size: 0.9rem;
  font-weight: 500;
}
aside.links li {
  border-bottom: solid 1px;
}
aside.links li a {
  display: block;
  position: relative;
  padding: 1em 0.5em 1em 2em;
}
aside.links li a::before {
  content: "";
  display: block;
  position: absolute;
  top: calc(50% - 0.2em);
  left: 0.5em;
  margin-right: 0.8em;
  border-top: solid 0.1rem;
  border-right: solid 0.1rem;
  width: 0.35em;
  height: 0.35em;
  rotate: 45deg;
}
aside.links li a:hover {
  opacity: 0.7;
}
aside.links .sns {
  margin-top: 2.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.8rem;
}
aside.links .sns a {
  display: block;
  width: 1.5rem;
}
aside.links .sns a img {
  filter: brightness(0.3);
}

@media all and (min-width: 560px) {
  section.farm-notice li a,
  section.farm-eventblog li a {
    display: grid;
    grid-template-columns: 35% 1fr;
    grid-template-rows: auto auto auto;
    gap: 0 5%;
    align-items: start;
    padding: 1.2rem 0;
  }
  section.farm-notice li a picture,
  section.farm-eventblog li a picture {
    grid-column: 1/2;
    grid-row: 1/4;
    margin-bottom: 0;
  }
}
@media all and (min-width: 720px) {
  section.farm-merit h2 {
    text-align: center;
  }
  section.farm-about .photos img,
  section.farm-theme .photos img {
    width: calc(33.333% - 0.33333rem);
  }
}
/*---------------------------------------------

Others Sections CSS

for www.kasugai.co.jp
coded by d-spica at 2023-10-09
imported to "style.scss"

---------------------------------------------*/
section.campaign {
  background: url("../img/bg-pick_up-L.png") repeat 50% 3.5rem/60rem auto;
  padding: 3.5rem var(--h-margin);
}
section.campaign h2 {
  margin-bottom: 1.5rem;
  text-align: center;
}
section.campaign h2 span {
  display: block;
  margin-bottom: 0.5em;
  letter-spacing: 0.1em;
  font-size: 0.6rem;
  font-weight: 700;
  color: var(--key-color);
}
section.campaign h2 span::before {
  content: "";
  display: inline-block;
  margin-right: 0.8em;
  border-left: solid 0.15em;
  width: 0;
  height: 1.4em;
  vertical-align: -0.3em;
  rotate: -30deg;
}
section.campaign h2 span::after {
  content: "";
  display: inline-block;
  margin-left: 0.6em;
  border-right: solid 0.15em;
  width: 0;
  height: 1.4em;
  vertical-align: -0.3em;
  rotate: 30deg;
}
section.campaign h2 em {
  display: block;
  letter-spacing: 0.05em;
  font-size: 1.2rem;
  font-weight: 500;
}
section.campaign ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
section.campaign li {
  position: relative;
  width: calc(50% - 0.25rem);
  aspect-ratio: 1/1;
}
section.campaign li a {
  display: block;
  box-sizing: border-box;
  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.15);
  border-radius: 0.4rem;
  background-color: #FFF;
  padding: 0.9rem;
  height: 100%;
}
section.campaign li img {
  position: absolute;
  top: 4.5%;
  left: 4.5%;
  width: 91%;
  height: 91%;
  -o-object-fit: contain;
     object-fit: contain;
}

section.snack_kasugai {
  padding: 0 var(--h-margin);
  font-size: 0.75rem;
}
section.snack_kasugai header picture {
  position: relative;
  z-index: -1;
  margin: 0 calc(-1 * var(--h-margin));
  height: clamp(413px, 26.7878787879vw + 312.5454545455px, 634px);
}
section.snack_kasugai header picture img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
section.snack_kasugai header h2 {
  margin-top: calc(-1 * clamp(50px, 8.4848484848vw + 18.1818181818px, 120px));
  padding: 3.5rem 2rem 2rem;
  border-radius: clamp(20px, 2.4242424242vw + 10.9090909091px, 40px) clamp(20px, 2.4242424242vw + 10.9090909091px, 40px) 0 0;
  background-color: #FFF;
  text-align: center;
}
section.snack_kasugai header h2 img {
  width: clamp(180px, 14.5454545455vw + 125.4545454545px, 300px);
}
section.snack_kasugai header p {
  line-height: 2;
  text-align: justify;
  letter-spacing: 0.05em;
  font-size: 0.75rem;
}
section.snack_kasugai section {
  margin: 2rem auto 5rem;
  max-width: 40.5rem;
}
section.snack_kasugai section h3 {
  margin-bottom: 1em;
  border-bottom: dotted 0.2rem #F17EBE;
  padding-bottom: 0.4em;
  letter-spacing: 0.05em;
  font-size: 1rem;
  font-weight: 500;
  color: var(--key-color);
}
section.snack_kasugai section p {
  margin-bottom: 2.4em;
  line-height: 2.4;
}
section.snack_kasugai section dl {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1rem 2rem;
}
section.snack_kasugai section dt {
  width: 17rem;
}
section.snack_kasugai section dd {
  width: -moz-fit-content;
  width: fit-content;
  line-height: 2;
  font-size: 0.8rem;
}
section.snack_kasugai section dd img {
  margin-right: 0.6em;
  width: 6.4em;
}
section.snack_kasugai section li {
  margin-bottom: 1.2rem;
  text-align: center;
  line-height: 1.2;
}
section.snack_kasugai section li a:nth-child(1), section.snack_kasugai section li span:nth-child(1) {
  display: block;
}
section.snack_kasugai section li a.button-KO, section.snack_kasugai section li span.button-KO {
  margin-top: 0.5rem;
  width: 14em;
}
section.snack_kasugai section .nav-more {
  margin-top: 2.5rem;
  text-align: center;
  line-height: 1.8;
}
section.snack_kasugai section .nav-more .button-KF {
  width: 14em;
}
section.snack_kasugai section.movie {
  margin-left: calc(-1 * var(--h-margin));
  margin-right: calc(-1 * var(--h-margin));
  border-radius: clamp(20px, 2.4242424242vw + 10.9090909091px, 40px);
  background-color: var(--lightkey-color);
  padding: 2rem var(--h-margin);
}
section.snack_kasugai section.movie iframe {
  border: none;
  background-color: #FFF;
  width: 100%;
  aspect-ratio: 16/9;
}
section.snack_kasugai section.snap {
  margin-bottom: 0;
  padding-bottom: 5rem;
}
section.snack_kasugai section.snap figure {
  position: relative;
  padding-top: min(66.666%, 18.333rem);
}
section.snack_kasugai section.snap figure li {
  position: absolute;
  top: 0;
  left: max(0rem, 50% - 13.75rem);
  z-index: -1;
  width: min(100%, 27.5rem);
  aspect-ratio: 3/2;
  opacity: 0;
  transition: translate var(--speed), opacity var(--speed);
}
section.snack_kasugai section.snap figure li img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
section.snack_kasugai section.snap figure li.current {
  z-index: 0;
  opacity: 1;
}
section.snack_kasugai section.snap figure li.before1 {
  z-index: 0;
  translate: -104% 0;
  opacity: 1;
}
section.snack_kasugai section.snap figure li.before2 {
  z-index: 0;
  translate: -208% 0;
  opacity: 1;
}
section.snack_kasugai section.snap figure li.before3 {
  z-index: 0;
  translate: -312% 0;
}
section.snack_kasugai section.snap figure li.after1 {
  z-index: 0;
  translate: 104% 0;
  opacity: 1;
}
section.snack_kasugai section.snap figure li.after2 {
  z-index: 0;
  translate: 208% 0;
  opacity: 1;
}
section.snack_kasugai section.snap figure li.after3 {
  z-index: 0;
  translate: 312% 0;
}
section.snack_kasugai section.snap figure .next {
  position: absolute;
  top: calc(50% - 1.35rem);
  left: max(-1rem, 50% - 15.75rem);
  z-index: 1;
  border-radius: 9999rem;
  background-color: var(--key-color);
  width: 2.7rem;
  height: 2.7rem;
  color: #FFF;
  cursor: pointer;
}
section.snack_kasugai section.snap figure .next::before {
  content: "";
  display: block;
  position: absolute;
  top: calc(50% - 0.35rem);
  left: calc(50% - 0.2rem);
  border-top: solid 0.1rem;
  border-left: solid 0.1rem;
  width: 0.5rem;
  height: 0.5rem;
  rotate: -45deg;
}
section.snack_kasugai section.snap figure .prev {
  position: absolute;
  top: calc(50% - 1.35rem);
  right: max(-1rem, 50% - 15.75rem);
  z-index: 1;
  border-radius: 9999rem;
  background-color: var(--key-color);
  width: 2.7rem;
  height: 2.7rem;
  color: #FFF;
  cursor: pointer;
}
section.snack_kasugai section.snap figure .prev::before {
  content: "";
  display: block;
  position: absolute;
  top: calc(50% - 0.35rem);
  right: calc(50% - 0.2rem);
  border-top: solid 0.1rem;
  border-right: solid 0.1rem;
  width: 0.5rem;
  height: 0.5rem;
  rotate: 45deg;
}

section.information-post {
  margin: 2rem auto 0;
  padding: 0 var(--h-margin) 2rem;
  max-width: 32.5rem;
  font-size: 0.75rem;
}
section.information-post h2 {
  clear: both;
  margin: 3rem 0 1.5em;
  border-top: double 0.3rem;
  border-bottom: double 0.3rem;
  padding: 0.6em 0;
  text-align: center;
  letter-spacing: 0.2em;
  font-size: 133.33%;
  font-weight: 500;
}
section.information-post h3 {
  clear: both;
  margin: 3em 0 1em;
  letter-spacing: 200;
  font-size: 120%;
  font-weight: 500;
  color: var(--key-color);
}
section.information-post h4 {
  clear: both;
  margin: 3em 0 1em;
  letter-spacing: 200;
  font-size: 120%;
  font-weight: 500;
}
section.information-post h5 {
  margin: 2em 0 0.5em;
  font-size: 110%;
  font-weight: 500;
}
section.information-post h6 {
  margin-bottom: 0.3em;
  font-weight: 500;
}
section.information-post p {
  line-height: 2.4;
  margin-bottom: 2em;
}
section.information-post ul, section.information-post ol, section.information-post blockquote {
  line-height: 2;
  margin-bottom: 2em;
}
section.information-post ul {
  padding-left: 1.5em;
  list-style: disc;
}
section.information-post ol {
  padding-left: 1.5em;
}
section.information-post li {
  margin-bottom: 0.4em;
}
section.information-post blockquote {
  border-left: solid 0.4em #FFF;
  padding-left: 1em;
}
section.information-post .alignleft, section.information-post .alignright, section.information-post .aligncenter {
  display: block;
  margin: 0 auto 1.5em;
}
section.information-post .wp-caption .wp-caption-text {
  display: block;
  margin-top: 0.8em;
  line-height: 1.6;
  font-size: 0.6rem;
}
section.information-post a {
  text-decoration: underline;
  text-underline-offset: 0.2em;
  color: var(--key-color);
}
section.information-post a:hover {
  text-decoration: none;
}
section.information-post :first-child {
  margin-top: 0;
}

section.gallery {
  padding: 0 var(--h-margin) 2rem;
}
section.gallery ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin: 0 auto;
  max-width: 21.5rem;
}
section.gallery li {
  width: 100%;
}

section.shopping {
  border-radius: clamp(20px, 2.4242424242vw + 10.9090909091px, 40px);
  background-color: var(--lightkey-color);
  padding: clamp(40px, 4.8484848485vw + 21.8181818182px, 80px) var(--h-margin);
  letter-spacing: 0.05em;
  font-size: 0.75rem;
}
section.shopping h2 {
  margin-bottom: 1em;
  border-bottom: dotted 0.2rem #F17EBE;
  padding-bottom: 0.4em;
  font-size: 1rem;
  font-weight: 500;
  color: var(--key-color);
}
section.shopping p {
  margin-bottom: 2.5rem;
  line-height: 2.4;
}
section.shopping p.nav-more {
  text-align: center;
}
section.shopping p.nav-more .button-KF {
  width: 19rem;
  line-height: 1.6;
}
section.shopping dl {
  margin: 1rem auto;
  border-radius: 1rem;
  background-color: #FFF;
  padding: 1.5rem 1rem;
  max-width: 21rem;
  text-align: center;
}
section.shopping dt {
  font-size: 0.8rem;
  font-weight: 500;
}
section.shopping dd a, section.shopping dd b {
  display: block;
  margin: 0.5em 0;
  font-size: 1.5rem;
  color: var(--key-color);
}
section.shopping dd span {
  font-size: 0.7rem;
}

section.guide {
  border-radius: clamp(20px, 2.4242424242vw + 10.9090909091px, 40px);
  background-color: var(--lightkey-color);
  padding: clamp(40px, 4.8484848485vw + 21.8181818182px, 80px) var(--h-margin);
  letter-spacing: 0.05em;
  font-size: 0.75rem;
}
section.guide:nth-of-type(n+2) {
  margin-top: 1rem;
}
section.guide h2 {
  margin-bottom: 3rem;
  text-align: center;
  font-size: clamp(16px, 1.696969697vw + 9.6363636364px, 30px);
  font-weight: 500;
  color: var(--key-color);
}
section.guide p {
  margin-bottom: 2.5em;
  line-height: 2.4;
}
section.guide .button-KF {
  line-height: 1.6;
  width: 19rem;
  max-width: calc(100% - 2em);
}
section.guide section {
  border-radius: clamp(20px, 2.4242424242vw + 10.9090909091px, 40px);
  background-color: #FFF;
  padding: clamp(20px, 2.4242424242vw + 10.9090909091px, 40px) clamp(20px, 4.3636363636vw + 3.6363636364px, 56px);
}
section.guide section:nth-of-type(n+2) {
  margin-top: 1rem;
}
section.guide section :last-child {
  margin-bottom: 0;
}
section.guide section h3 {
  margin-bottom: 1em;
  border-bottom: dotted 0.2rem #F17EBE;
  padding-bottom: 0.4em;
  font-size: 1rem;
  font-weight: 500;
  color: var(--key-color);
}
section.guide section h3 span {
  font-size: 90%;
}
section.guide section section {
  margin-bottom: 2em;
  padding: 0;
}
section.guide section section :last-child {
  margin-bottom: 0;
}
section.guide section h4 {
  margin-bottom: 0.8em;
  border-left: solid 0.3em var(--key-color);
  padding-left: 0.8em;
  letter-spacing: 0.05em;
  font-size: 0.9rem;
  font-weight: 500;
  color: #484848;
}
section.guide section ol {
  margin-bottom: 2.5em;
  padding-left: 1.5em;
}
section.guide section li {
  line-height: 2.4;
}
section.guide section li ul, section.guide section li ol, section.guide section li p {
  margin-bottom: 0.5em;
}
section.guide section ul {
  margin-bottom: 2.5em;
}
section.guide section ul li {
  position: relative;
  padding-left: 1em;
}
section.guide section ul li::before {
  content: "・";
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
}
section.guide section span.note {
  display: block;
  font-size: 80%;
}
section.guide section table {
  width: 100%;
  line-height: 1.6;
  letter-spacing: 0.05em;
  font-size: clamp(11px, 0.4848484848vw + 9.1818181818px, 15px);
}
section.guide section th {
  border-top: solid 1px #DDD;
  background-color: #F5F5F6;
  padding: 1em 0.5em;
  min-width: 5.6em;
  max-width: 7em;
  text-align: center;
  letter-spacing: 0.05em;
  white-space: nowrap;
  font-weight: 500;
}
section.guide section td {
  border-top: solid 1px #DDD;
  background-color: #FFF;
  padding: 1em;
}
section.guide section td p:nth-of-type(n+2) {
  margin-top: 0.6em;
}
section.guide section td p em {
  display: block;
  font-weight: 500;
}
section.guide section tr:first-child th, section.guide section tr:first-child td {
  border-top: none;
}
section.guide section a {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
section.guide p.foot {
  margin-top: 2em;
}
section.guide p.foot span {
  display: block;
  text-align: right;
}

section.form {
  border-radius: clamp(20px, 2.4242424242vw + 10.9090909091px, 40px);
  background-color: var(--lightkey-color);
  padding: clamp(40px, 4.8484848485vw + 21.8181818182px, 80px) var(--h-margin);
  letter-spacing: 0.05em;
  font-size: 0.75rem;
}
section.form > p {
  margin: 2.5rem 0;
  text-align: center;
}
section.form section {
  border-radius: clamp(20px, 2.4242424242vw + 10.9090909091px, 40px);
  background-color: #FFF;
  padding: clamp(20px, 2.4242424242vw + 10.9090909091px, 40px) clamp(20px, 4.3636363636vw + 3.6363636364px, 56px);
}
section.form section h3 {
  margin-bottom: 1em;
  border-bottom: dotted 0.2rem #F17EBE;
  padding-bottom: 0.4em;
  text-align: center;
  font-size: 1rem;
  font-weight: 500;
  color: var(--key-color);
}
section.form section li {
  position: relative;
  padding-left: 1.5em;
  line-height: 2.4;
}
section.form section li::before {
  content: "⚫︎";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}
section.form form > p {
  margin: 2.5rem 0;
  text-align: center;
}
section.form form b {
  color: var(--key-color);
}
section.form form dd i {
  display: block;
  margin: 1em 0;
}
section.form form span.error {
  display: block;
  margin-top: 0.6em;
  border-radius: 0.3rem;
  background-color: #E4007F;
  padding: 0.2em 1em;
  width: -moz-fit-content;
  width: fit-content;
  color: #FFF;
}
section.form fieldset {
  border-radius: clamp(20px, 2.4242424242vw + 10.9090909091px, 40px);
  background-color: #FFF;
  padding: clamp(20px, 2.4242424242vw + 10.9090909091px, 40px) clamp(20px, 4.3636363636vw + 3.6363636364px, 56px);
}
section.form fieldset > p {
  border-bottom: solid 1px #DDD;
  padding-bottom: 1.5em;
  text-align: left;
}
section.form .mw_wp_form_confirm dd i {
  display: none;
}
section.form .mw_wp_form_complete {
  margin-top: 1rem;
  border-radius: clamp(20px, 2.4242424242vw + 10.9090909091px, 40px);
  background-color: #FFF;
  padding: clamp(20px, 2.4242424242vw + 10.9090909091px, 40px) clamp(20px, 4.3636363636vw + 3.6363636364px, 56px);
}

section.sitemap {
  border-radius: clamp(20px, 2.4242424242vw + 10.9090909091px, 40px);
  background-color: var(--lightkey-color);
  padding: clamp(40px, 4.8484848485vw + 21.8181818182px, 80px) var(--h-margin);
  letter-spacing: 0.05em;
}
section.sitemap > ul {
  border-radius: clamp(20px, 2.4242424242vw + 10.9090909091px, 40px);
  background-color: #FFF;
  padding: clamp(25px, 3.7575757576vw + 10.9090909091px, 56px) clamp(20px, 4.3636363636vw + 3.6363636364px, 56px);
  letter-spacing: 0.1em;
  font-size: 0.8rem;
}
section.sitemap > ul > li {
  margin-bottom: -1px;
  border-top: solid 1px;
  border-bottom: solid 1px;
}
section.sitemap > ul > li a {
  display: block;
  position: relative;
  padding: 1em 0 1em 2em;
}
section.sitemap > ul > li a::before {
  content: "";
  display: block;
  position: absolute;
  top: calc(50% - 0.25em);
  left: 0.6em;
  border-top: solid 0.1rem var(--key-color);
  border-right: solid 0.1rem var(--key-color);
  width: 0.45em;
  height: 0.45em;
  rotate: 45deg;
}
section.sitemap > ul > li a:hover {
  opacity: 0.7;
}
section.sitemap > ul > li em {
  display: block;
  position: relative;
  padding: 1em 0 1em 2em;
}
section.sitemap > ul > li em::before {
  content: "";
  display: block;
  position: absolute;
  top: calc(50% - 0.2em);
  left: 0.8em;
  border-radius: 9999rem;
  background-color: var(--key-color);
  width: 0.4em;
  height: 0.4em;
}
section.sitemap > ul > li ul {
  background-color: transparent;
  padding: 0 0 0.5em;
}
section.sitemap > ul > li li {
  margin-bottom: 0.5em;
}
section.sitemap > ul > li li a {
  border-radius: 0.4rem;
  background-color: var(--lightkey-color);
  padding: 0.75em 1em;
}
section.sitemap > ul > li li a::before {
  display: none;
}
section.sitemap > ul > li li a:hover {
  opacity: 0.7;
}

section.thai {
  margin: 0 var(--h-margin);
  border-radius: clamp(20px, 2.4242424242vw + 10.9090909091px, 40px);
  background-color: #FFF;
  padding: clamp(20px, 2.4242424242vw + 10.9090909091px, 40px);
  font-size: 0.75rem;
}
section.thai:nth-of-type(n+2) {
  margin-top: 1rem;
}
section.thai > :last-child {
  margin-bottom: 0;
}
section.thai h2 {
  margin-bottom: 1em;
  border-bottom: dotted 0.2rem #F17EBE;
  padding-bottom: 0.4em;
  letter-spacing: 0.05em;
  font-size: 1rem;
  font-weight: 500;
  color: var(--key-color);
}
section.thai h2 + section {
  margin-top: 1.2rem;
}
section.thai section {
  margin-top: 3rem;
}
section.thai section > :last-child {
  margin-bottom: 0;
}
section.thai h3 {
  margin-bottom: 1.2em;
  text-align: center;
  font-size: 0.9rem;
  font-weight: 500;
}
section.thai p {
  margin-bottom: 2em;
  line-height: 2;
}
section.thai figure iframe {
  width: 100%;
  aspect-ratio: 16/9;
}
section.thai picture, section.thai .photo {
  margin-bottom: 2em;
  text-align: center;
}
section.thai picture img, section.thai .photo img {
  width: 14rem;
}
section.thai picture span, section.thai .photo span {
  display: block;
}

.page-overseas header.title-M .title {
  letter-spacing: 0;
}
.page-overseas section.guide p {
  text-align: center;
  font-size: 0.9rem;
}

.page-thai_tsubu_gummy main .box {
  background-color: var(--lightkey-color);
  padding: clamp(20px, 2.4242424242vw + 10.9090909091px, 40px) 0;
}
.page-thai_tsubu_gummy main .box .nav-sns {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  margin: 2rem 0;
}
.page-thai_tsubu_gummy main .box .nav-sns a {
  display: block;
  width: 1.5rem;
}

section.lead {
  padding: 0 var(--h-margin);
  font-size: 0.8rem;
}
section.lead p.error {
  padding: 5rem 0 8rem;
  text-align: center;
}

@media all and (min-width: 640px) {
  section.campaign li {
    width: calc(33.333% - 0.33333rem);
  }
  section.gallery ul {
    max-width: 44rem;
  }
  section.gallery li {
    width: calc(50% - 0.5rem);
  }
}
@media all and (min-width: 720px) {
  section.snack_kasugai section.movie {
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    padding-left: min(10%, 4rem);
    padding-right: min(10%, 4rem);
  }
  section.guide > p {
    text-align: center;
  }
  section.thai:has(.photo) p {
    margin-left: 10rem;
  }
  section.thai:has(.photo) .photo {
    float: left;
    margin-left: 0;
    margin-right: 1.5rem;
    width: 8.5rem;
  }
  .page-sitepolicy section.guide > p, .page-terms_review section.guide > p {
    text-align: left;
  }
}
@media all and (min-width: 960px) {
  section.campaign li {
    width: calc(25% - 0.375rem);
  }
  section.gallery ul {
    max-width: none;
  }
  section.gallery li {
    width: calc(33.333% - 0.66666rem);
  }
  section.sitemap > ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0 3rem;
  }
  section.sitemap > ul > li {
    width: 100%;
  }
  section.sitemap > ul > li.haschildren {
    width: calc(50% - 1.5rem);
  }
  section.sitemap > ul > li:nth-of-type(4), section.sitemap > ul > li:nth-of-type(7) {
    margin-right: calc(50% + 1.5rem);
  }
}
/*
@import "print";
*//*# sourceMappingURL=style.css.map */