:root {
  --rem: calc(1rem / 16);
  --em: calc(1em / 16);

  --color-01: #f00;
  --color-02: #bb0029;
  --color-03: #411e00;
  --color-04: #fde351;
  --color-05: #fff8e5;
  --color-06: #fff;
  --color-07: #aaa;
  --color-08: #000;

  --gradient-01: linear-gradient(#00adec 0%, #6ad1f0 48.77%, #fff4e4 100%);
  --gradient-02: linear-gradient(#beedf4 0%, #fff4e4 100%);
  --gradient-03: linear-gradient(-90deg, #ff4d6f 0%, #d80000 100%);

  --duration: .25s;
  --ease: cubic-bezier(.36, 1.13, .7, .97);

  --nav: 56px;

  --leading-trim: calc((1em - 1lh) / 2);

  scroll-behavior: smooth;
}

@media (max-width: 767.98px) {
  :root {
    --vw: calc(100vw / 375);
    --max: 400;
    --gap: 14;
    --nav: calc(65 / 375 * 100vw);
    font-size: calc(16 / 428 * 100dvi);
  }

  .globalMenuSp {
    block-size: 100%;
  }
}

@media (min-width: 768px) {
  :root {
    --vw: calc(100vw / 1280);
    --max: 1280;
    --gap: 20;
    --nav: calc(84 * var(--rem));
    font-size: clamp(9.6px, calc(9.6px + (16 - 9.6) * ((100dvi - 768px) / (1280 - 768))), 16px);
  }
}

@media (min-width: 1201px) {
  :root {
    --nav: calc(84 * var(--rem));
  }
}

body {
  position: static !important;
}

:target {
  scroll-margin-block-start: var(--nav);
}





/* reset and set
-------------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

:is(.election) {
  padding-block: 0;
  font-size: calc(16 * var(--rem));
  font-family: "Noto Sans JP", sans-serif;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
  -webkit-text-size-adjust: none;
          text-size-adjust: none;
  word-break: normal;
  color: var(--color-08);
  background-color: #fff4e4;
  overflow-wrap: anywhere;
  line-break: strict;
  scroll-behavior: auto;
  -webkit-tap-highlight-color: transparent;
}

.election :where(p) {
  color: inherit;
}

.election :where(img) {
  display: block;
  inline-size: 100%;
  block-size: auto;
}





/* Minimize non-essential motion
-------------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}





/* modules
-------------------------------------------------------------------------------- */
.sr-only {
  position: absolute;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  width: 1px;
  height: 1px;
  word-wrap: normal;
}

.m-container {
  display: flow-root;
  contain: var(--contain, content);
}

.m-container.\--section {
  position: relative;
  padding-block: calc(72 * var(--rem)) calc(112 * var(--rem));
}

.m-container.\--section::before {
  position: absolute;
  inset: 0;
  block-size: calc(220 * var(--rem));
  background-image: var(--gradient-02);
  content: "";
}

.m-inner {
  position: relative;
  margin-inline: auto
}

.m-box {
  display: grid;
  row-gap: calc(30 * var(--rem));
  inline-size: min(100%, (400 * var(--rem)));
  margin-inline: auto;
  padding: calc(24 * var(--rem));
  border-radius: calc(10 * var(--rem));
  background-color: var(--color-06);
}

.m-box.\--opacity {
  position: relative;
  background-color: #fffc;
}

.m-heading {
  display: grid;
  justify-items: center;
  row-gap: calc(12 * var(--rem));
  line-height: 1;
  color: var(--color-02);
}

.m-heading__en {
  font-weight: 600;
  text-transform: uppercase;
}

.m-heading__ja {
  font-weight: 900;
  font-size: calc(30 * var(--rem));
}

.m-heading__lead {
  display: flex;
  justify-content: center;
  align-items: center;
  block-size: calc(37 * var(--rem));
  margin-block-start: calc(10 * var(--rem));
  padding-inline: 1.25em;
  padding-block-end: calc(2 * var(--rem));
  font-weight: 600;
  border-radius: calc(infinity * 1px);
  background-color: var(--color-04);
}

.m-text {
  font-weight: 600;
  line-height: calc(30 / 16);
  text-align: justify;
  text-box: trim-both;
}

@media (width < 48rem) {
  .m-inner {
    inline-size: calc(100% - (var(--gap) * var(--rem)) * 2);
  }
}

@media (width >= 48rem) {
  .m-inner {
    inline-size: min(100%, (812 * var(--rem)));
  }
}





/* hero
-------------------------------------------------------------------------------- */
.hero {
  position: relative;
  display: grid;
  background-image: var(--gradient-01);
}

.hero > * {
  grid-area: 1 / -1;
}

.hero__image,
.hero__card,
.hero__title {
  position: absolute;
}

@media (width < 48rem) {
  .hero {
    block-size: calc(700 / 428 * 100vw);
  }

  .hero__image,
  .hero__card,
  .hero__title {
    inset-inline-start: calc(var(--inline-start) * var(--rem));
    inset-block-start: calc(var(--block-start) * var(--rem));
    inline-size: calc(var(--inline-size) * var(--rem));
    block-size: calc(var(--block-size) * var(--rem));
  }

  .hero__image.\--1 {
    --inline-start: 13;
    --block-start: 26;
    --inline-size: 182;
    --block-size: 121;
  }

  .hero__image.\--2 {
    --inline-start: -56;
    --block-start: 219;
    --inline-size: 141;
    --block-size: 92;
  }

  .hero__image.\--3 {
    --inline-start: -67;
    --block-start: 339;
    --inline-size: 181;
    --block-size: 144;
  }

  .hero__image.\--4 {
    --inline-start: 214;
    --block-start: 19;
    --inline-size: 255;
    --block-size: 128;
  }

  .hero__image.\--5 {
    --inline-start: 354;
    --block-start: 253;
    --inline-size: 148;
    --block-size: 110;
  }

  .hero__image.\--6 {
    --inline-start: 376;
    --block-start: 362;
    --inline-size: 148;
    --block-size: 85;
  }

  .hero__card.\--1 {
    --inline-start: 51;
    --block-start: 138;
    --inline-size: 289;
    --block-size: 351;
  }

  .hero__card.\--2 {
    --inline-start: 92;
    --block-start: 167;
    --inline-size: 283;
    --block-size: 349;
  }

  .hero__title {
    --block-start: 542;
    --inline-size: 366;
    --block-size: 83;
    inset-inline: 0;
    margin-inline: auto;
  }
}

@media (width >= 48rem) {
  .hero {
    block-size: calc(710 * var(--rem));
  }

  .hero__image,
  .hero__card,
  .hero__title {
    inset-inline-start: calc(50% - (((var(--inline-size) / 2) + var(--inline-start)) * var(--rem)));
    inset-block-start: calc(var(--block-start) * var(--rem));
    inline-size: calc(var(--inline-size) * var(--rem));
    block-size: calc(var(--block-size) * var(--rem));
    margin: auto;
  }

  .hero__image.\--1 {
    --inline-start: 419;
    --block-start: 33;
    --inline-size: 254;
    --block-size: 188;
  }

  .hero__image.\--2 {
    --inline-start: 288;
    --block-start: 174;
    --inline-size: 196;
    --block-size: 169;
  }

  .hero__image.\--3 {
    --inline-start: 611;
    --block-start: 297;
    --inline-size: 131;
    --block-size: 85;
  }

  .hero__image.\--4 {
    --inline-start: 401;
    --block-start: 327;
    --inline-size: 252;
    --block-size: 188;
  }

  .hero__image.\--5 {
    --inline-start: 124;
    --block-start: 441;
    --inline-size: 196;
    --block-size: 127;
  }

  .hero__image.\--6 {
    --inline-start: -352;
    --block-start: 26;
    --inline-size: 352;
    --block-size: 203;
  }

  .hero__image.\--7 {
    --inline-start: -600;
    --block-start: 152;
    --inline-size: 132;
    --block-size: 85;
  }

  .hero__image.\--8 {
    --inline-start: -322;
    --block-start: 243;
    --inline-size: 237;
    --block-size: 190;
  }

  .hero__image.\--9 {
    --inline-start: -502;
    --block-start: 385;
    --inline-size: 195;
    --block-size: 166;
  }

  .hero__card.\--1 {
    --inline-start: 24;
    --block-start: 33;
    --inline-size: 400;
    --block-size: 486;
  }

  .hero__card.\--2 {
    --inline-start: -13;
    --block-start: 59;
    --inline-size: 392;
    --block-size: 483;
  }

  .hero__title {
    --inline-start: 0;
    --block-start: 570;
    --inline-size: 334;
    --block-size: 72;
  }
}





/* intro
-------------------------------------------------------------------------------- */
.intro__box {
  padding: calc(30 * var(--rem)) calc(24 * var(--rem)) calc(38 * var(--rem));
}

@media (width < 48rem) {
  .intro {
    margin-block-start: calc(-63 * var(--rem));
  }

  .intro__box {
    margin-block: calc(-253 * var(--rem)) calc(96 * var(--rem));
  }
}

@media (width >= 48rem) {
  .intro {
    margin-block-start: calc(-38 * var(--rem));
  }

  .intro__media {
    inline-size: calc(965 * var(--rem));
    margin-inline: auto;
  }

  .intro__image {
    inline-size: min(100%, 966px);
    margin-inline: auto;
  }

  .intro__box {
    margin-block: calc(-234 * var(--rem)) calc(32 * var(--rem));
  }
}





/* history
-------------------------------------------------------------------------------- */
.history {
  background-image: url(../images/history/bg.webp);
  background-repeat: no-repeat;
  background-position: 50% 100%;
  background-size: calc(965 * var(--rem)) calc(225 * var(--rem));
}

.history__characters {
  position: relative;
  display: grid;
  inline-size: calc(340 * var(--rem));
  block-size: calc(160 * var(--rem));
  margin-inline: auto;
  margin-block: calc(24 * var(--rem)) calc(48 * var(--rem));
}

.history__characters > * {
  grid-area: 1 / -1;
}

.history__image {
  inline-size: calc(340 * var(--rem));
  margin-inline: auto;
}





/* work
-------------------------------------------------------------------------------- */
.work__characters {
  position: relative;
  display: grid;
  inline-size: calc(340 * var(--rem));
  block-size: calc(261 * var(--rem));
  margin-inline: auto;
  margin-block: calc(24 * var(--rem)) calc(48 * var(--rem));
}

.work__characters > * {
  grid-area: 1 / -1;
}

.work__chara {
  position: absolute;
}

.work__chara.\--1-1 {
  inset-inline-start: calc(29 * var(--rem));
  inset-block-start: calc(0 * var(--rem));
  inline-size: calc(83 * var(--rem));
  block-size: calc(123 * var(--rem));
  transform-origin: center bottom;
  animation: 1.4s anim1-1 ease-in infinite;
}

.work__chara.\--1-2 {
  inset-inline-start: calc(121 * var(--rem));
  inset-block-start: calc(27 * var(--rem));
  inline-size: calc(52 * var(--rem));
  block-size: calc(92 * var(--rem));
  transform-origin: center bottom;
  animation: 1.2s anim1-2 ease-in infinite;
}

.work__chara.\--2 {
  inset-inline-start: calc(198 * var(--rem));
  inset-block-start: calc(7 * var(--rem));
  inline-size: calc(131 * var(--rem));
  block-size: calc(126 * var(--rem));
  transform-origin: right bottom;
  animation: 1.2s anim2 ease infinite;
}

.work__chara.\--3 {
  inset-inline-start: calc(0 * var(--rem));
  inset-block-start: calc(118 * var(--rem));
  inline-size: calc(131 * var(--rem));
  block-size: calc(143 * var(--rem));
  animation: 1s anim3 ease infinite;
}

.work__chara.\--4 {
  inset-inline-start: calc(139 * var(--rem));
  inset-block-start: calc(124 * var(--rem));
  inline-size: calc(85 * var(--rem));
  block-size: calc(131 * var(--rem));
  transform-origin: center bottom;
  animation: 2s anim4 ease-out infinite;
}

.work__chara.\--5-1 {
  inset-inline-start: calc(231 * var(--rem));
  inset-block-start: calc(125 * var(--rem));
  inline-size: calc(82 * var(--rem));
  block-size: calc(130 * var(--rem));
  animation: 1.4s anim5-1 ease-in-out infinite;
}

.work__chara.\--5-2 {
  inset-inline-start: calc(305 * var(--rem));
  inset-block-start: calc(190 * var(--rem));
  inline-size: calc(35 * var(--rem));
  block-size: calc(66 * var(--rem));
  animation: 1.4s .125s anim5-1 ease-in-out infinite;
}

.work__content {
  display: grid;
  row-gap: calc(64 * var(--rem));
}

.work__label {
  margin-block-end: calc(16 * var(--rem));
  font-weight: 700;
  font-size: calc(23 * var(--rem));
  text-align: center;
  color: var(--color-02);
}

.work__item-list {
  display: grid;
}

.work__item-chara {
  overflow: clip;
  border-radius: calc(10 * var(--rem));
}

.work__item-caption {
  display: flex;
  justify-content: center;
  align-items: center;
  block-size: calc(30 * var(--rem));
  font-weight: 600;
  font-size: calc(14 * var(--rem));
}

.work__item-caption.\--1 { background-color: #b4d898;}
.work__item-caption.\--2 { background-color: #a1d8e6;}
.work__item-caption.\--3 { background-color: #f8c5ac;}
.work__item-caption.\--4 { background-color: #fff2ad;}

@media (width < 48rem) {
  .work__item-list {
    grid-template-columns: repeat(2, 1fr);
    gap: calc(16 * var(--rem));
  }
}

@media (width >= 48rem) {
  .work__item-list {
    grid-template-columns: repeat(4, 1fr);
    gap: calc(14 * var(--rem));
  }
}





/* sns
-------------------------------------------------------------------------------- */
.sns__heading {
  margin-block-end: calc(56 * var(--rem));
}

.sns__box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  inline-size: min(100%, (400 * var(--rem)));
  padding-inline: calc(20 * var(--rem));
}

.sns__link {
  inline-size: calc(62 * var(--rem));
  block-size: calc(62 * var(--rem));
}





/* cta
-------------------------------------------------------------------------------- */
.cta {
  padding-block: calc(28 * var(--rem)) calc(24 * var(--rem));
  text-align: center;
  background-color: var(--color-06);
}

.cta__inner {
  display: grid;
  row-gap: calc(24 * var(--rem));
}

.cta__title {
  inline-size: min(100%, calc(266 * var(--rem)));
  margin-inline: auto;
}

.cta__period {
  inline-size: min(100%, calc(358 * var(--rem)));
  margin-inline: auto;
}

.cta__button {
  inline-size: min(100%, calc(198 * var(--rem)));
  margin-inline: auto;
  filter: drop-shadow(0 calc(3 * var(--rem)) calc(6 * var(--rem)) rgba(0, 0, 0, 0.16));
}





/* override
-------------------------------------------------------------------------------- */
#header #logoBlc img {
  inline-size: 120px;
}

@media (width < 48rem) {
  #header #logoBlc .originally-h1 {
    position: absolute;
    top: 50%;
    left: 0;
    display: block;
    padding: 0;
    transform: translateY(-50%);
  }

  #header #logoBlc img {
    inline-size: 100%;
  }
}

#fLnkBlc .wrapper2022 .bnr_txt {
  display: grid;
  inline-size: min(100% - calc(40 * var(--rem)), 1000px);
}

#fLnkBlc .wrapper2022 .bnr_txt .box {
  inline-size: 100%;
  block-size: calc(80 * var(--rem));
}

#fLnkBlc .wrapper2022 .flxB.bnr_txt > div.bnr_coupon a,
#fLnkBlc .wrapper2022 .flxB.bnr_txt > div a {
  all: revert;
  box-sizing: border-box;
  display: grid;
  align-items: center;
  inline-size: 100%;
  block-size: 100%;
  padding-inline: calc(18 * var(--rem));
  font-weight: 700;
  font-size: calc(16 * var(--rem));
  text-decoration: none;
  color: #ca0336;
  border: 1px solid #e2e2e2;
  border-radius: calc(8 * var(--rem));
  background-color: #fff;
  background-position: calc(18 * var(--rem)) 50%, right calc(22 * var(--rem)) top 50%;
  background-repeat: no-repeat;
  background-size: calc(48 * var(--rem)) auto, calc(12 * var(--rem)) calc(20 * var(--rem));
}

#fLnkBlc .wrapper2022 .flxB > div a span,
#fLnkBlc .wrapper2022 .bnr_txt .box.bnr_service a span,
#fLnkBlc .wrapper2022 .flxB.bnr_txt > div.bnr_coupon a span {
  all: revert;
  inline-size: fit-content;
  padding-inline-start: calc(64 * var(--rem));
  line-height: 1.2;
  text-align: center;
}

#fLnkBlc .wrapper2022 .bnr_txt .box.bnr_qa a      { background-image: url(/shimamura/lib6/images/common/icon_qa.svg), url(/shimamura/lib6/images/common/icon_arrwR.svg); }
#fLnkBlc .wrapper2022 .bnr_txt .box.bnr_service a { background-image: url(/shimamura/lib6/images/common/icon_service.svg), url(/shimamura/lib6/images/common/icon_arrwR.svg); }
#fLnkBlc .wrapper2022 .bnr_txt .box.bnr_coupon a  { background-image: url(/shimamura/lib6/images/common/icon_coupon.svg), url(/shimamura/lib6/images/common/icon_arrwR.svg) !important; }

@media (width < 48rem) {
  #fLnkBlc .wrapper2022 .bnr_txt {
    row-gap: 1em;
  }

  #fLnkBlc .wrapper2022 .flxB.bnr_txt > div.bnr_coupon a,
  #fLnkBlc .wrapper2022 .flxB.bnr_txt > div a {
    inline-size: calc(349 / 375 * 100vw);
    font-size: calc(20 / 375 * 100vw);
  }

  #fLnkBlc .wrapper2022 .flxB > div.bnr_coupon a span img {
    inline-size: calc(152 / 375 * 100vw);
    block-size: auto;
    translate: 0 calc(2 / 375 * 100vw);
  }
}

@media (width >= 48rem) {
  #fLnkBlc .wrapper2022 .bnr_txt {
    grid-template-columns: repeat(3, 1fr);
  }

  #fLnkBlc .wrapper2022 .bnr_txt .box.bnr_qa a,
  #fLnkBlc .wrapper2022 .bnr_txt .box.bnr_service a {
    font-size: calc(20 * var(--rem));
  }

  #fLnkBlc .wrapper2022 .bnr_txt .box.bnr_coupon a span {
    padding-inline-start: calc(60 * var(--rem)) !important;
  }
}

.fade {
  transition-timing-function: linear(0, 0.0167, 0.0334, 0.0499, 0.0663, 0.0826, 0.0987, 0.1148, 0.1307, 0.1465, 0.1622, 0.1778, 0.1933, 0.2086, 0.2238, 0.2389, 0.2539, 0.2688, 0.2835, 0.2981, 0.3126, 0.327, 0.3413, 0.3554, 0.3694, 0.3833, 0.397, 0.4106, 0.4241, 0.4375, 0.4508, 0.4639, 0.4769, 0.4897, 0.5025, 0.5151, 0.5275, 0.5399, 0.5521, 0.5641, 0.5761, 0.5879, 0.5995, 0.6111, 0.6225, 0.6337, 0.6448, 0.6558, 0.6667, 0.6774, 0.6879, 0.6983, 0.7086, 0.7187, 0.7287, 0.7385, 0.7482, 0.7578, 0.7672, 0.7764, 0.7855, 0.7944, 0.8032, 0.8118, 0.8203, 0.8286, 0.8367, 0.8447, 0.8525, 0.8602, 0.8677, 0.875, 0.8822, 0.8892, 0.896, 0.9026, 0.9091, 0.9153, 0.9214, 0.9273, 0.9331, 0.9386, 0.9439, 0.949, 0.954, 0.9587, 0.9632, 0.9675, 0.9716, 0.9755, 0.9791, 0.9825, 0.9856, 0.9885, 0.9911, 0.9935, 0.9955, 0.9972, 0.9986, 0.9996, 1);
}





/* fx
-------------------------------------------------------------------------------- */
@media (any-hover: hover) {
  [data-hover] {
    transition-duration: var(--duration);
    will-change: auto;
  }

  [data-hover="opacity"] {
    transition-property: opacity;
  }

  [data-hover="opacity"]:is(:hover, :focus-visible) {
    opacity: .5;
  }
}

@keyframes anim1-1 {
  0% { translate: 0 0; scale: 1 1; }
  50% { translate: 0 5px; scale: 1 .95; }
  75% { translate: 0 0; scale: 1 1; }
}

@keyframes anim1-2 {
  25% { rotate: 1deg; }
  40% { rotate: -1deg; }
  50% { rotate: 1deg; }
  90% { rotate: 0deg; }
}

@keyframes anim2 {
  50% { rotate: 1deg; }
}

@keyframes anim3 {
  50% { scale: 1.02; }
}

@keyframes anim4 {
  8% { translate: 0 0; }
  16% { scale: 1 1.02; translate: 0 -2px; }
  24% { scale: 1; translate: 0 0; }
  32% { scale: 1 1.02; translate: 0 -2px; }
  40% { scale: 1; translate: 0 0; }
}

@keyframes anim5-1 {
  0% { translate: 0 0; }
  70% { translate: 3px 0; }
}

[data-card="1"] {
  animation: 10s 6s card1 cubic-bezier(0.6, 0, 0.3, 1) infinite;
}

[data-card="2"] {
  animation: 10s 6s card2 cubic-bezier(0.6, 0, 0.3, 1) infinite;
}
@keyframes card1 {
   0% { translate: 0 0; scale: 1; }
   5% { translate: -50% 0; scale: 1.05; }
  7.5% { z-index: 1;}
  10% { translate: 0 0; scale: 1; }
  50% { translate: 0 0; scale: 1; }
  55% { translate: 59% 0; scale: .95; z-index: 1; }
  57.5% { z-index: 0; }
  60% { translate: 0 0; scale: 1; }
}

@keyframes card2 {
   0% { translate: 0 0; scale: 1; }
   5% { translate: 50% 0; scale: .95; }
  10% { translate: 0 0; scale: 1; }
  50% { translate: 0 0; scale: 1; }
  55% { translate: -59% 0; scale: 1.05; z-index: 0; }
  57.5% { z-index: 1; }
  60% { translate: 0 0; scale: 1; }
}





/* utilities
-------------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .sm-block        { display: block; }
  .sm-flex         { display: flex; }
  .sm-grid         { display: grid; }
  .sm-inline-block { display: inline-block; }
  .sm-contents     { display: contents; }
  .sm-hidden       { display: none; }
}

@media (min-width: 768px) {
  .md-block        { display: block; }
  .md-flex         { display: flex; }
  .md-grid         { display: grid; }
  .md-inline-block { display: inline-block; }
  .md-contents     { display: contents; }
  .md-hidden       { display: none; }
}
