@charset "UTF-8";
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, main {
  display: block;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

.mx {
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
  max-width: 800px;
}
@media screen and (max-width: 863px) {
  .mx {
    max-width: 40rem;
  }
}

html {
  font-family: "ヒラギノ角ゴシック", "Hiragino Kaku Gothic", sans-serif;
  font-size: 16px;
  line-height: 1.6em;
  scroll-behavior: smooth;
  font-feature-settings: "palt";
  overflow-x: hidden;
}
@media screen and (max-width: 863px) {
  html {
    font-size: 14px;
    scroll-behavior: auto;
  }
}

p {
  line-height: 1.8em;
}

a {
  text-decoration: none;
  transition: all 0.2s ease-in-out;
  color: black;
}

img {
  width: 100%;
  display: block;
}

#top {
  position: relative;
  background-image: url("./assets/contents/bg_ichimatsu_yellow.png");
  background-repeat: repeat;
  overflow: hidden;
}
#top::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(to bottom, rgb(181, 142, 89), rgb(252, 238, 139) 75%);
  z-index: -1;
}
#top .logo {
  width: 100px;
  position: absolute;
  top: 3rem;
  left: 3rem;
}
@media screen and (max-width: 863px) {
  #top .logo {
    top: 1.5rem;
    left: 1.5rem;
    width: 48px;
  }
}
#top .upper, #top .bottom {
  max-width: 1800px;
  margin: auto;
}
#top .upper {
  position: relative;
  margin-top: -5vw;
}
#top .upper > a {
  position: absolute;
  width: 20%;
  height: auto;
  display: block;
  right: 5%;
  bottom: 5%;
}
#top .upper > a:hover {
  opacity: 0.7;
}
#top .upper > a img {
  display: block;
}
@media screen and (max-width: 863px) {
  #top .upper > a {
    width: 20%;
    right: 2.5%;
  }
}
#top .upper > a img:last-of-type {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 70%;
  animation: heartbeat 2.25s ease-in-out infinite;
}
@keyframes heartbeat {
  0% {
    transform: scale(1);
  }
  25% {
    transform: scale(1.05);
  }
  70% {
    transform: scale(1);
  }
}
#top .bottom {
  background-color: #F5F4F2;
  position: relative;
}
#top .bottom .cars {
  z-index: 10;
  position: relative;
  display: block;
  max-width: 1024px;
  margin: auto;
}
#top .bottom .links {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  margin: auto;
  position: relative;
  z-index: 10;
}
#top .bottom .links a {
  text-align: center;
  display: block;
  background-color: #8A6B46;
  width: 18rem;
  box-sizing: border-box;
  position: relative;
  font-size: 20px;
  color: white;
  padding: 1.5rem;
  font-weight: 600;
}
#top .bottom .links a:hover {
  opacity: 0.7;
}
#top .bottom .links a img {
  position: absolute;
  right: 1rem;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 1rem;
}
@media screen and (max-width: 1023px) {
  #top .bottom .links {
    flex-direction: column;
    align-items: center;
  }
  #top .bottom .links a {
    width: 100%;
    max-width: calc(100% - 4rem);
    font-size: 12px;
    padding: 1em;
  }
}
#top .bottom .ornament {
  position: absolute;
  left: 0;
  bottom: 10rem;
  width: 30%;
  z-index: 0;
}
#top .bottom .bottom_ornament {
  margin-top: 8rem;
  width: 100%;
  max-width: 100%;
  display: block;
}

#tokuten {
  position: relative;
  padding-top: 4rem;
  padding-bottom: calc(20vw + 4rem);
  background-image: url("./assets/contents/bg_ichimatsu_white.png");
  background-repeat: repeat;
  display: flex;
  flex-direction: column;
  gap: 4rem;
}
#tokuten::before {
  content: "";
  display: block;
  background: linear-gradient(to right, rgb(145, 0, 0) 0%, rgb(255, 24, 48) 50%, rgb(145, 0, 0) 100%);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
}
#tokuten span {
  white-space: nowrap;
}
#tokuten .ttl {
  margin-bottom: 4rem;
}
#tokuten .ttl img {
  display: block;
}
#tokuten .w_chance {
  margin-bottom: 2rem;
}
#tokuten .card {
  width: calc(100% - 3rem);
  box-sizing: border-box;
  background-color: #F5F4F2;
  border-radius: 20px;
}
#tokuten .card:first-of-type {
  padding-bottom: 2rem;
}
#tokuten .card.box {
  width: calc(100% - 3rem);
}
#tokuten .card.box img {
  display: block;
  width: 100%;
  max-width: 100%;
}
#tokuten .pad {
  padding-left: 5%;
  padding-right: 5%;
}
#tokuten .note {
  padding: 1rem;
  font-size: 0.9rem;
  text-align: center;
  font-weight: 400;
}
#tokuten .note.bold {
  font-weight: 700;
}
#tokuten .card .note {
  margin-top: 4rem;
}
@media screen and (max-width: 863px) {
  #tokuten .card .note {
    font-size: 12px;
    padding: 1em;
  }
  #tokuten .card .note span {
    white-space: collapse !important;
  }
}
#tokuten .card.box .note {
  margin-top: 0;
  padding-bottom: 3rem;
}
#tokuten .card.box .note span {
  white-space: wrap;
}
#tokuten .ornament {
  position: absolute;
  left: 0;
  bottom: 1rem;
  display: block;
  z-index: -1;
  width: 55%;
}

#campaign {
  position: relative;
  margin-top: -20vw;
}
#campaign .round_top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}
#campaign .ttl_container {
  position: relative;
  height: 20vw;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}
#campaign .ttl_container .ornament {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: 100%;
}
#campaign .ttl_container h2 {
  position: relative;
  z-index: 10;
  max-width: 540px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding: 0 2rem;
  box-sizing: border-box;
}
@media screen and (max-width: 863px) {
  #campaign .ttl_container h2 {
    padding-top: 4rem;
    max-width: 20rem;
  }
}
#campaign .bg {
  padding-top: 8rem;
  padding-bottom: 10rem;
  background-color: #EBD9BA;
  display: flex;
  flex-direction: column;
  position: relative;
  gap: 8rem;
}
@media screen and (max-width: 863px) {
  #campaign .bg {
    gap: 4rem;
    padding-top: 4rem;
    padding-bottom: 8rem;
  }
}
#campaign .bg .bottom_ornament {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}
#campaign .bg > li {
  background-color: white;
  width: 100%;
  border: 2px solid #CE020A;
  position: relative;
  z-index: 10;
}
#campaign .bg > li > a {
  display: block;
}
#campaign .bg > li > a:hover > *:not(.mark) {
  opacity: 0.8;
}
@media screen and (max-width: 863px) {
  #campaign .bg > li {
    width: calc(100% - 3rem);
    box-sizing: border-box;
  }
}
#campaign .bg > li .mark {
  position: absolute;
  top: -3rem;
  left: -3rem;
  width: 132px;
  z-index: 10;
}
@media screen and (max-width: 863px) {
  #campaign .bg > li .mark {
    width: 64px;
    top: -1rem;
    left: -1rem;
  }
}
#campaign .bg > li .pad {
  padding: 2rem 4rem;
}
@media screen and (max-width: 863px) {
  #campaign .bg > li .pad {
    padding: 2rem 1rem;
  }
}
#campaign .bg > li.one {
  padding-top: 3rem;
}
#campaign .bg > li.one p {
  text-align: center;
  max-width: 64em;
  font-size: 18px;
  font-weight: 200;
}
#campaign .bg > li.one p span {
  white-space: nowrap;
}
@media screen and (max-width: 863px) {
  #campaign .bg > li.one p {
    font-size: 12px;
  }
}
#campaign .bg > li.one .chance_ttl {
  margin: 2rem auto 4rem;
}
#campaign .bg > li.one .red {
  background-color: #ce020a;
  padding: 2rem 1rem;
}
#campaign .bg > li.one .red img {
  display: block;
  max-width: 548px;
  margin: auto;
}
#campaign .bg > li.one ol .arrow {
  display: block;
  width: 28px;
  margin: 1rem auto;
}
#campaign .bg > li.one ol li {
  position: relative;
}
#campaign .bg > li.one ol li .button {
  position: absolute;
  width: 80%;
  bottom: 2rem;
  left: 0;
  right: 0;
  margin: auto;
  transition: all 0.2s ease-in-out;
}
#campaign .bg > li.one ol li .button img {
  display: block;
}
#campaign .bg > li.one ol li .button:hover {
  opacity: 0.7;
}
#campaign .bg > li.two .bnr {
  padding: 2rem 1rem 0;
}
#campaign .bg > li.two .pad p {
  text-align: center;
  font-weight: 200;
}
#campaign .bg > li.two .pad p.l {
  font-size: 22px;
  letter-spacing: 0.02em;
}
#campaign .bg > li.two .pad p.s {
  font-size: 18px;
  line-height: 1.8em;
}
@media screen and (max-width: 863px) {
  #campaign .bg > li.two .pad p {
    text-align: left;
  }
  #campaign .bg > li.two .pad p.l {
    font-size: 14px;
  }
  #campaign .bg > li.two .pad p.l br {
    display: none;
  }
  #campaign .bg > li.two .pad p.s {
    font-size: 12px;
  }
  #campaign .bg > li.two .pad p.s br:not(:first-of-type) {
    display: none;
  }
}
#campaign .bg > li.two .pad h3 {
  background-color: #458bc5;
  padding: 1rem 2rem;
  margin: 1rem 0;
}
#campaign .bg > li.two .pad h3 img {
  display: block;
  margin: auto;
  max-width: 486px;
}
#campaign .bg > li.three {
  padding-bottom: 2rem;
}
#campaign .bg > li.three .chance {
  position: absolute;
  top: -4rem;
  right: -2rem;
  width: 50%;
}
@media screen and (max-width: 863px) {
  #campaign .bg > li.three .chance {
    top: -2rem;
  }
}
#campaign .bg > li.three .pad {
  display: flex;
  flex-direction: column;
  gap: 4rem;
}
#campaign .bg > li.three h2 {
  padding-top: 3rem;
}
#campaign .bg > li.three h2 span {
  display: block;
  text-align: center;
}
#campaign .bg > li.three h2 span:first-of-type {
  background-color: #CE020A;
  color: white;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: 0.2em;
  line-height: 2em;
  border-radius: 1.5em;
  margin-bottom: 1em;
}
@media screen and (max-width: 863px) {
  #campaign .bg > li.three h2 span:first-of-type {
    font-size: 20px;
  }
}
#campaign .bg > li.three h2 span:nth-of-type(2) {
  color: #CE020A;
  font-weight: 800;
  font-size: 62px;
  letter-spacing: 0.08em;
  line-height: 1.2em;
  margin-bottom: 1rem;
}
@media screen and (max-width: 863px) {
  #campaign .bg > li.three h2 span:nth-of-type(2) {
    font-size: 28px;
  }
}
#campaign .bg > li.three h2 span:last-of-type {
  font-size: 13px;
  font-weight: 200;
  line-height: 1.5em;
}
#campaign .bg > li.three .more {
  border: 3px solid #CE020A;
  border-left: none;
  border-right: none;
  padding: 3rem 0 2rem;
}
#campaign .bg > li.three .more h3 {
  margin-bottom: 2rem;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}
#campaign .bg > li.three .more p {
  text-align: center;
  font-weight: 200;
  font-size: 13px;
}
@media screen and (max-width: 863px) {
  #campaign .bg > li.three .more p {
    text-align: left;
    font-size: 12px;
  }
}

#osusume {
  padding: 12rem 2rem;
  background-color: #01B4D2;
  color: white;
}
@media screen and (max-width: 863px) {
  #osusume {
    padding: 8rem 2rem;
  }
}
#osusume .top {
  display: flex;
  flex-direction: column;
  gap: 6rem;
  margin-bottom: 6rem;
}
@media screen and (max-width: 863px) {
  #osusume .top {
    gap: 3rem;
    margin-bottom: 3rem;
  }
}
#osusume .top .block {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
#osusume .top h2 {
  font-size: 50px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-align: center;
  display: flex;
  justify-content: center;
  position: relative;
  line-height: 1.4em;
  padding-bottom: 0.5em;
  gap: 1rem;
}
@media screen and (max-width: 1023px) {
  #osusume .top h2 {
    flex-direction: column;
    gap: 0;
  }
}
@media screen and (max-width: 863px) {
  #osusume .top h2 {
    font-size: 24px;
  }
}
#osusume .top h2 span {
  display: block;
}
#osusume .top h2 span:not(.white) {
  color: black;
}
#osusume .top h2:after {
  position: absolute;
  content: "";
  display: block;
  width: 8em;
  height: 3px;
  background-color: black;
  margin: auto;
  bottom: 0;
  left: 0;
  right: 0;
}
@media screen and (max-width: 863px) {
  #osusume .top h2:after {
    height: 2px;
  }
}
#osusume .top h3 {
  text-align: center;
  color: black;
  text-align: center;
  font-size: 48px;
  letter-spacing: 0.08em;
  font-weight: 800;
}
@media screen and (max-width: 863px) {
  #osusume .top h3 {
    font-size: 18px;
  }
}
#osusume .top h4 {
  text-align: center;
  font-size: 25px;
  letter-spacing: 0.08em;
  color: black;
  font-weight: 800;
  line-height: 1.4em;
}
@media screen and (max-width: 863px) {
  #osusume .top h4 {
    font-size: 11px;
  }
}
#osusume .mx {
  display: flex;
  flex-direction: column;
  gap: 6rem;
}
@media screen and (max-width: 863px) {
  #osusume .mx {
    gap: 3rem;
  }
}
#osusume .mx .e_force:hover {
  opacity: 0.7;
}
#osusume .mx .e_force span {
  box-sizing: border-box;
  padding: 1em 0;
  width: 50%;
  background-color: white;
  color: black;
  font-size: 25px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-align: center;
}
#osusume .mx .e_force span:last-of-type {
  background-color: black;
  color: white;
}
#osusume .mx .e_force span:last-of-type img {
  display: block;
  position: absolute;
  top: 0;
  right: 0.5em;
  bottom: 0;
  width: 10px;
  margin: auto;
}
#osusume .mx > ul {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}
@media screen and (max-width: 863px) {
  #osusume .mx > ul {
    gap: 1.5rem;
  }
}
#osusume .mx > ul a {
  display: block;
}
#osusume .mx > ul a:hover {
  opacity: 0.7;
}
#osusume .mx > ul a img {
  display: block;
}

footer {
  position: relative;
  background-image: url("./assets/contents/bg_ichimatsu_white.png");
  background-repeat: repeat;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2rem;
  padding: 12rem 2rem;
}
footer::before {
  content: "";
  display: block;
  background: linear-gradient(to right, rgb(145, 0, 0) 0%, rgb(255, 24, 48) 50%, rgb(145, 0, 0) 100%);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
}
footer h3 {
  font-weight: 600;
  letter-spacing: 0.25em;
  font-size: 52px;
  color: white;
  text-align: center;
}
footer .shops {
  display: block;
  border: 2px solid white;
  font-size: 25px;
  padding: 0.5em 1.5em;
  text-align: center;
  letter-spacing: 0.38em;
  font-weight: 600;
  color: white;
  line-height: 1.5em;
  width: 8em;
  margin: auto;
  border-radius: 2em;
}
footer .shops:hover {
  color: #CE020A;
  background-color: white;
}
@media screen and (max-width: 863px) {
  footer .shops {
    font-size: 20px;
  }
}
@media screen and (max-width: 1023px) {
  footer {
    padding: 8rem 1rem;
  }
  footer h3 {
    font-size: 18px;
  }
  footer a {
    font-size: 16px;
  }
}
footer #scroll_top {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  width: 4rem;
}
@media screen and (max-width: 863px) {
  footer #scroll_top {
    width: 2rem;
  }
}
footer #scroll_top img {
  display: block;
  width: 100%;
  height: auto;
}

/*# sourceMappingURL=style.css.map */