@charset "UTF-8";
/*!
 * ress.css • v4.0.0
 * MIT License
 * github.com/filipelinhares/ress
 */
@import url("https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@700;900&display=swap");
html {
  box-sizing: border-box;
  -webkit-text-size-adjust: 100%;
  word-break: normal;
  -moz-tab-size: 4;
  tab-size: 4; }

*, :after, :before {
  background-repeat: no-repeat;
  box-sizing: inherit; }

:after, :before {
  text-decoration: inherit;
  vertical-align: inherit; }

* {
  padding: 0;
  margin: 0; }

hr {
  overflow: visible;
  height: 0;
  color: inherit; }

details, main {
  display: block; }

summary {
  display: list-item; }

small {
  font-size: 80%; }

[hidden] {
  display: none; }

abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  text-decoration: underline dotted; }

a {
  background-color: transparent; }

a:active, a:hover {
  outline-width: 0; }

code, kbd, pre, samp {
  font-family: monospace,monospace; }

pre {
  font-size: 1em; }

b, strong {
  font-weight: bolder; }

sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline; }

sub {
  bottom: -.25em; }

sup {
  top: -.5em; }

table {
  border-color: inherit;
  text-indent: 0; }

input {
  border-radius: 0; }

[disabled] {
  cursor: default; }

[type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button {
  height: auto; }

[type=search] {
  -webkit-appearance: textfield;
  outline-offset: -2px; }

[type=search]::-webkit-search-decoration {
  -webkit-appearance: none; }

textarea {
  overflow: auto;
  resize: vertical; }

button, input, optgroup, select, textarea {
  font: inherit; }

optgroup {
  font-weight: 700; }

button {
  overflow: visible; }

button, select {
  text-transform: none; }

[role=button], [type=button], [type=reset], [type=submit], button {
  cursor: pointer;
  color: inherit; }

[type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner, button::-moz-focus-inner {
  border-style: none;
  padding: 0; }

[type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner, button:-moz-focusring {
  outline: 1px dotted ButtonText; }

[type=reset], [type=submit], button, html [type=button] {
  -webkit-appearance: button; }

button, input, select, textarea {
  background-color: transparent;
  border-style: none; }

a:focus, button:focus, input:focus, select:focus, textarea:focus {
  outline-width: 0; }

select {
  -moz-appearance: none;
  -webkit-appearance: none; }

select::-ms-expand {
  display: none; }

select::-ms-value {
  color: currentColor; }

legend {
  border: 0;
  color: inherit;
  display: table;
  white-space: normal;
  max-width: 100%; }

::-webkit-file-upload-button {
  -webkit-appearance: button;
  color: inherit;
  font: inherit; }

img {
  border-style: none; }

progress {
  vertical-align: baseline; }

[aria-busy=true] {
  cursor: progress; }

[aria-controls] {
  cursor: pointer; }

[aria-disabled=true] {
  cursor: default; }

/*$en:"Ultra", serif;*/
/*$kcl:#E0452C;*/
* {
  box-sizing: border-box; }

html {
  font-size: 62.5%; }

body {
  background: #fff;
  line-height: 1.8em;
  font-family: "Zen Maru Gothic", serif;
  font-size: clamp(1.4rem, calc(1rem + 0.625vw), 1.6rem);
  font-weight: 700;
  color: #1A1311;
  -webkit-text-size-adjust: 100%; }

img {
  max-width: 100%;
  height: auto; }

a {
  color: #1A1311;
  text-decoration: none;
  transition: .3s;
  font-weight: 700; }
  a:hover {
    transition: .3s;
    text-decoration: none; }
  a img {
    transition: .3s; }
    a img:hover {
      opacity: .7;
      transition: .3s; }

li {
  list-style: none; }

.flb_sb {
  display: flex;
  justify-content: space-between; }

.flb_ct, header h1 span, .about .chara, .about .shiuma h4 span, .commingsoon {
  display: flex;
  justify-content: center; }

.flb_st, .about .shiuma h4 {
  display: flex;
  justify-content: flex-start; }

.flb_ed {
  display: flex;
  justify-content: flex-end; }

.sp {
  display: block; }
  @media screen and (min-width: 701px) {
    .sp {
      display: none; } }

.sptab {
  display: block; }
  @media screen and (min-width: 961px) {
    .sptab {
      display: none; } }

.tab {
  display: none; }
  @media screen and (min-width: 701px) {
    .tab {
      display: block; } }
  @media screen and (min-width: 961px) {
    .tab {
      display: none; } }

.tabpc {
  display: none; }
  @media screen and (min-width: 701px) {
    .tabpc {
      display: block; } }

.pc {
  display: none; }
  @media screen and (min-width: 961px) {
    .pc {
      display: block; } }

.inner {
  width: calc(100% - 2rem);
  margin: auto;
  position: relative;
  z-index: 5; }
  @media screen and (min-width: 375px) {
    .inner {
      width: min(calc(100% - 6rem), 102.4rem); } }

.fadeIn {
  opacity: 0;
  transition: 1s; }
  .fadeIn.is-show {
    opacity: 1; }

.fadeIn_up {
  opacity: 0;
  transform: translate(0, 50px);
  transition: 1s; }
  .fadeIn_up.is-show {
    transform: translate(0, 0);
    opacity: 1; }

.fadeIn_left {
  opacity: 0;
  transform: translate(-50px, 0);
  transition: 2s; }
  .fadeIn_left.is-show {
    transform: translate(0, 0);
    opacity: 1; }

.fadeIn_right {
  opacity: 0;
  transform: translate(50px, 0);
  transition: 2s; }
  .fadeIn_right.is-show {
    transform: translate(0, 0);
    opacity: 1; }

@keyframes infinity-scroll-left {
  from {
    transform: translateX(0); }
  to {
    transform: translateX(-100%); } }
.wrapper {
  background: #D9F4F8;
  padding: 1.6rem;
  position: relative;
  overflow: hidden;
  width: 100vw;}
  @media screen and (min-width: 701px) {
    .wrapper {
      padding: 2.4rem; } }
  .wrapper::before {
    content: "";
    display: block;
    width: 100%;
    height: 100dvh;
    background: url("../images/mvbg_sp.webp") center center no-repeat;
    background-size: cover;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1; }
    @media screen and (min-width: 701px) {
      .wrapper::before {
        background: url("../images/mvbg.webp") center center no-repeat;
        background-size: cover; } }

.frame {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100dvh;
  pointer-events: none;
  z-index: 999;
  border: #fff 1.6rem solid;
  box-sizing: border-box; }
  @media screen and (min-width: 701px) {
    .frame {
      border: #fff 2.4rem solid; } }
  .frame::before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    outline: #fff 1.6rem solid;
    border-radius: 2rem;
    box-sizing: border-box; }
    @media screen and (min-width: 701px) {
      .frame::before {
        outline: #fff 2.4rem solid; } }

/* ヘッダー */
header {
  width: 100%;
  position: relative;
  z-index: 2;
  background: url("../images/rep.webp") repeat-x;
  background-size: auto 4.5rem; }
  @media screen and (min-width: 701px) {
    header {
      height: calc(100dvh - 4.8rem);
      background-size: auto 6rem; } }
  @media screen and (min-width: 961px) {
    header {
      background-size: auto 9.6rem; } }
  header .scroll {
    display: none;
    width: clamp(7rem, 20vw, 12rem);
    margin: auto; }
    @media screen and (min-width: 961px) {
      header .scroll {
        display: block;
        position: absolute;
        width: 2.4rem;
        right: 2.6rem;
        bottom: 2.6rem; } }
  header .inner {
    width: calc(100% - 1rem);
    padding-top: 2.5rem; }
    @media screen and (min-width: 701px) {
      header .inner {
        padding-top: 3.2rem;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%); } }
    @media screen and (min-width: 961px) {
      header .inner {
        width: min(85%, 132rem); } }
    header .inner .scroll {
      display: block; }
      @media screen and (min-width: 961px) {
        header .inner .scroll {
          display: none; } }
  header h1 {
    padding-bottom: 1rem; }
    @media screen and (min-width: 701px) {
      header h1 {
        padding-bottom: 0; } }
    header h1 span {
      align-items: center;
      font-size: 1.4rem;
      font-weight: 900;
      width: 19.6rem;
      height: 4.2rem;
      border-radius: 4.2rem;
      background: #FF693D;
      color: #fff;
      position: relative;
      margin: 0 auto 0.54rem; }
      @media screen and (min-width: 701px) {
        header h1 span {
          font-size: 1.6rem;
          width: 23.5rem;
          height: 5rem;
          margin-bottom: 0; } }
      @media screen and (min-width: 961px) {
        header h1 span {
          font-size: 2rem;
          width: 27rem;
          height: 5.8rem; } }
      header h1 span::before {
        content: "";
        display: block;
        width: 18.8rem;
        height: 3.6rem;
        border-radius: 4.2rem;
        border: rgba(255, 255, 255, 0.5) 1px solid;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%); }
        @media screen and (min-width: 701px) {
          header h1 span::before {
            width: 22.5rem;
            height: 4rem; } }
        @media screen and (min-width: 961px) {
          header h1 span::before {
            font-size: 2rem;
            width: 26rem;
            height: 4.8rem; } }
    header h1 img {
      display: block;
      width: min(calc(100% - 3.28rem), 31rem);
      margin: auto;
      position: relative; }
      @media screen and (min-width: 701px) {
        header h1 img {
          width: 41rem;
          margin-top: -1.2rem; } }
      @media screen and (min-width: 961px) {
        header h1 img {
          width: 52.2rem;
          margin-top: -1.4rem; } }
  header .chara {
    display: block;
    margin-bottom: 1.5rem; }
    @media screen and (min-width: 701px) {
      header .chara {
        margin-top: -4vw; } }
    @media screen and (min-width: 961px) {
      header .chara {
        margin-bottom: 0; } }
    @media screen and (min-width: 1201px) {
      header .chara {
        margin-top: -10rem; } }

/* コンテンツ */
.about {
  background: linear-gradient(#D9F4F8, #F5FFBC);
  position: relative;
  padding-top: 4rem;
  padding-bottom: 8rem; }
  @media screen and (min-width: 701px) {
    .about {
      padding-top: 11rem;
      padding-bottom: 10rem; } }
  @media screen and (min-width: 961px) {
    .about {
      padding-top: 18rem;
      padding-bottom: 12rem; } }
  .about .inner {
    background: #fff;
    border-radius: 2.4rem;
    padding-bottom: 1rem; }
    @media screen and (min-width: 701px) {
      .about .inner {
        border-radius: 3.2rem;
        padding-bottom: 4.5rem; } }
    @media screen and (min-width: 961px) {
      .about .inner {
        border-radius: 4rem;
        padding-bottom: 8.7rem; } }
  .about h2 {
    width: min(62%, 19.5rem);
    margin: auto;
    transform: translateY(-30%); }
    @media screen and (min-width: 701px) {
      .about h2 {
        width: min(35%, 36rem); } }
  .about h3 {
    width: min(89.5%, 28.1rem);
    margin: 0 auto 2.4rem; }
    @media screen and (min-width: 701px) {
      .about h3 {
        width: min(69%, 70.7rem);
        margin: 0 auto 4rem; } }
  .about .lead {
    text-align: center;
    padding-bottom: 3.2rem; }
    @media screen and (min-width: 701px) {
      .about .lead {
        padding-bottom: 4.8rem; } }
    @media screen and (min-width: 961px) {
      .about .lead {
        padding-bottom: 5.6rem; } }
    .about .lead p {
      font-size: 1.1rem;
      font-weight: 700;
      line-height: 1.8em; }
      @media screen and (min-width: 375px) {
        .about .lead p {
          font-size: 1.4rem; } }
      @media screen and (min-width: 701px) {
        .about .lead p {
          font-size: 1.8rem; } }
      @media screen and (min-width: 961px) {
        .about .lead p {
          font-size: 2.4rem;
          line-height: 2em; } }
  .about .chara {
    flex-wrap: wrap;
    padding-bottom: 0.8rem; }
    @media screen and (min-width: 701px) {
      .about .chara {
        padding-bottom: 0.9rem; } }
    .about .chara li {
      display: block;
      width: min(33%, 10rem);
      padding: 0 1.2rem 2.4rem; }
      @media screen and (min-width: 701px) {
        .about .chara li {
          width: min(16.6%, 16rem);
          padding: 0 1.2rem 3.8rem; } }
      @media screen and (min-width: 961px) {
        .about .chara li {
          padding: 0 2rem 3.8rem; } }
  .about .tabpc .chara:first-of-type {
    padding-bottom: 0; }
  .about .shiuma {
    background: linear-gradient(135deg, #fff, #FFF7F5);
    border: #FF693D 4px solid;
    border-radius: 1.6rem;
    width: min(calc(100% - 2rem), 76rem);
    margin: auto;
    padding: 2rem 1.6rem 0;
    position: relative; }
    @media screen and (min-width: 375px) {
      .about .shiuma {
        padding: 2rem 1.8rem 0; } }
    @media screen and (min-width: 701px) {
      .about .shiuma {
        padding: 3rem 40% 3rem 3rem; } }
    @media screen and (min-width: 961px) {
      .about .shiuma {
        padding: 4rem 31rem 4rem 4rem; } }
    .about .shiuma h4 {
      align-items: center;
      font-size: 1.55rem;
      font-weight: 700;
      margin-bottom: 1.3rem; }
      @media screen and (min-width: 375px) {
        .about .shiuma h4 {
          font-size: 2rem; } }
      @media screen and (min-width: 701px) {
        .about .shiuma h4 {
          font-size: 2.4rem;
          margin-bottom: 1.6rem; } }
      .about .shiuma h4 span {
        align-items: center;
        font-size: 1.2rem;
        color: #fff;
        width: 3.8rem;
        height: 2.3rem;
        border-radius: 1.4rem;
        background: #FF693D;
        margin-right: 0.6rem; }
        @media screen and (min-width: 375px) {
          .about .shiuma h4 span {
            font-size: 1.4rem;
            width: 4.8rem;
            margin-right: 0.8rem; } }
        @media screen and (min-width: 701px) {
          .about .shiuma h4 span {
            font-size: 1.8rem;
            width: 5.8rem;
            height: 2.8rem;
            margin-right: 1.6rem; } }
    .about .shiuma figure {
      display: block;
      width: min(53%, 19.5rem);
      margin: 1.6rem auto 0; }
      @media screen and (min-width: 701px) {
        .about .shiuma figure {
          width: min(32.5%, 24.7rem);
          position: absolute;
          bottom: 0;
          right: 3rem; } }
      @media screen and (min-width: 961px) {
        .about .shiuma figure {
          width: 24.7rem;
          right: 4rem; } }
      .about .shiuma figure img {
        display: block; }

.goods {
  background: linear-gradient(#F5FFBC, #FFBCBC);
  position: relative;
  padding-bottom: 8rem; }
  @media screen and (min-width: 701px) {
    .goods {
      padding-bottom: 10rem; } }
  @media screen and (min-width: 961px) {
    .goods {
      padding-bottom: 12rem; } }
  .goods .inner {
    background: #fff;
    border-radius: 2.4rem;
    padding-top: 1.1rem;
    padding-bottom: 4rem; }
    @media screen and (min-width: 701px) {
      .goods .inner {
        border-radius: 3.2rem;
        padding: 3.5rem 3rem 7rem;
        padding-bottom: 4.5rem; } }
    @media screen and (min-width: 961px) {
      .goods .inner {
        border-radius: 4rem;
        padding: 3.5rem 5rem 10rem; } }
  .goods h2 {
    width: min(calc(100% - 4.2rem), 30rem);
    margin: 0 auto 2.5rem; }
    @media screen and (min-width: 701px) {
      .goods h2 {
        width: 100%;
        margin-bottom: 2.7rem; } }
  .goods .other {
    display: block;
    width: min(calc(100% - 2rem), 40rem);
    margin: auto; }
    @media screen and (min-width: 701px) {
      .goods .other {
        width: min(100%, 50.3rem); } }

.contact {
  background: linear-gradient(#FFBCBC, #D1FFDF);
  padding-bottom: 2.4rem; }
  @media screen and (min-width: 701px) {
    .contact {
      padding-bottom: 6rem; } }
  @media screen and (min-width: 961px) {
    .contact {
      padding-bottom: 8rem; } }
  .contact .inner {
    background: #fff;
    border-radius: 2.4rem;
    padding: 3.2rem 1rem 4rem;
    text-align: center;
    margin-bottom: 4rem; }
    @media screen and (min-width: 701px) {
      .contact .inner {
        border-radius: 3.2rem;
        padding: 5rem 4rem 6rem;
        padding-bottom: 4.5rem;
        margin-bottom: 8rem; } }
    @media screen and (min-width: 961px) {
      .contact .inner {
        border-radius: 4rem;
        padding: 7rem 8rem 8rem;
        margin-bottom: 12rem; } }
  .contact h2 {
    width: min(90%, 21.6rem);
    margin: 0 auto 2.4rem; }
    @media screen and (min-width: 701px) {
      .contact h2 {
        width: min(80%, 69.5rem);
        margin-bottom: 2.2rem; } }
  .contact p {
    font-size: clamp(1.6rem, calc(1.2rem + 0.625vw), 1.8rem); }
    @media screen and (min-width: 701px) {
      .contact p {
        font-size: clamp(1.8rem, calc(1.6rem + 0.625vw), 2rem); } }
    @media screen and (min-width: 961px) {
      .contact p {
        font-size: clamp(2.2rem, calc(2rem + 0.625vw), 2.4rem); } }
    .contact p.check {
      font-size: clamp(1.4rem, calc(1rem + 0.625vw), 1.6rem);
      margin-bottom: 1.2rem; }
      @media screen and (min-width: 701px) {
        .contact p.check {
          margin-bottom: 2.4rem; } }
      .contact p.check label {
        display: inline-block;
        position: relative; }
        .contact p.check label::before, .contact p.check label::after {
          content: "";
          display: block;
          position: absolute; }
        .contact p.check label::before {
          width: 2rem;
          height: 2rem;
          background: #D6D6D6;
          border-radius: 4px;
          top: 0;
          bottom: 0;
          margin: auto;
          left: 0; }
        .contact p.check label::after {
          width: 0.9rem;
          height: 1.4rem;
          border-right: #1A1311 2px solid;
          border-bottom: #1A1311 2px solid;
          top: 3px;
          left: 5.5px;
          transform: rotate(45deg);
          opacity: 0; }
        .contact p.check label input {
          -webkit-appearance: none;
          -moz-appearance: none;
          appearance: none;
          width: 2rem;
          height: 2rem;
          margin-right: 1.4rem;
          vertical-align: -0.15em;
          opacity: 0; }
        .contact p.check label:has(input:checked)::after {
          opacity: 1; }
  .contact .policy {
    border: #EAEAEA 2px solid;
    padding: 2.4rem 2.8rem;
    width: 100%;
    height: 40rem;
    border-radius: 1.6rem;
    margin-top: 3.2rem;
    margin-bottom: 2.6rem;
    overflow-y: scroll; }
    @media screen and (min-width: 701px) {
      .contact .policy {
        padding: 3rem;
        margin-top: 3.9rem;
        margin-bottom: 3.2rem; } }
    @media screen and (min-width: 961px) {
      .contact .policy {
        padding: 4.1rem 4rem;
        margin-top: 4.6rem;
        margin-bottom: 4rem; } }
    .contact .policy h3 {
      font-size: clamp(1.6rem, calc(1.2rem + 0.625vw), 1.8rem);
      padding-bottom: 2.4rem; }
      @media screen and (min-width: 701px) {
        .contact .policy h3 {
          font-size: clamp(1.8rem, calc(1.6rem + 0.625vw), 2rem);
          padding-bottom: 2.7rem; } }
      @media screen and (min-width: 961px) {
        .contact .policy h3 {
          font-size: clamp(2.2rem, calc(2rem + 0.625vw), 2.4rem); } }
    .contact .policy p {
      text-align: left;
      font-size: clamp(1.4rem, calc(1rem + 0.625vw), 1.6rem); }
    .contact .policy dl {
      text-align: left; }
      .contact .policy dl dt {
        font-size: 1.1em;
        padding-bottom: 0.5em;
        padding-top: 2.4rem;
        font-size: clamp(1.4rem, calc(1rem + 0.625vw), 1.6rem); }
        @media screen and (min-width: 701px) {
          .contact .policy dl dt {
            padding-top: 3.2rem; } }
      .contact .policy dl dd ul {
        padding-top: 1em; }
        .contact .policy dl dd ul li {
          list-style: none;
          text-indent: -1em;
          margin-left: 1em; }
          .contact .policy dl dd ul li::before {
            content: "・"; }
  .contact .btn {
    display: block;
    width: min(100%, 26rem);
    aspect-ratio: 520 / 313;
    background: url("../images/btn_contact.webp") center center no-repeat;
    background-size: 100% auto;
    margin: 0 auto 3.6rem;
    pointer-events: none; }
    @media screen and (min-width: 701px) {
      .contact .btn {
        margin-bottom: 3.8rem; } }
    .contact .btn.active {
      background: url("../images/btn_active.webp") center center no-repeat;
      background-size: 100% auto;
      pointer-events: auto; }
  .contact .att p {
    font-size: 1.2rem; }
    @media screen and (min-width: 375px) {
      .contact .att p {
        font-size: clamp(1.3rem, calc(0.9rem + 0.625vw), 1.5rem); } }
    @media screen and (min-width: 701px) {
      .contact .att p {
        font-size: clamp(1.4rem, calc(1rem + 0.625vw), 1.6rem); } }
  .contact .imgs_wrap {
    overflow: hidden;
    display: flex;
    position: relative;
    z-index: 10;
    margin-bottom: 2.4rem; }
    @media screen and (min-width: 701px) {
      .contact .imgs_wrap {
        margin-bottom: 3.6rem; } }
    @media screen and (min-width: 961px) {
      .contact .imgs_wrap {
        margin-bottom: 4rem; } }
    .contact .imgs_wrap ul {
      display: flex;
      list-style: none;
      animation: infinity-scroll-left 80s infinite linear 0.5s both; }
      @media screen and (min-width: 701px) {
        .contact .imgs_wrap ul {
          animation: infinity-scroll-left 120s infinite linear 0.5s both; } }
      .contact .imgs_wrap ul li {
        display: block;
        width: 9.6rem;
        margin: 0 0.8rem; }
        @media screen and (min-width: 701px) {
          .contact .imgs_wrap ul li {
            width: 14rem;
            margin: 0 1.4rem; } }
        @media screen and (min-width: 961px) {
          .contact .imgs_wrap ul li {
            width: 17.6rem;
            margin: 0 1.8rem; } }
        .contact .imgs_wrap ul li img {
          display: block; }
  .contact .copy {
    font-size: 1.2rem;
    text-align: center;
    position: relative;
    z-index: 100}
  .contact .company {
    font-size: 1.4rem;
    text-align: center;
    margin-bottom: 1rem;
    position: relative;
    z-index: 100;}

.commingsoon {
  width: 100vw;
  height: 100dvh;
  align-items: center;
  background: #fff; }
  .commingsoon h1 {
    max-width: 80%; }
    .commingsoon h1 img {
      display: block; }