@import url("https://use.fontawesome.com/releases/v6.4.2/css/all.css");
@import url(https://fonts.googleapis.com/earlyaccess/notosansjp.css);
@import url("https://fonts.googleapis.com/css2?family=Raleway:wght@500;800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Hachi+Maru+Pop&family=M+PLUS+1+Code:wght@100..700&display=swap");
body {
  margin: 0;
  padding: 0;
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  color: #111;
  text-align: left;
}

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

.global_head {
  margin: 0;
}

figure {
  margin: 0;
  padding: 0;
}

.wrap {
  position: relative;
}
.wrap::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url(../img/bg.png) no-repeat center/cover;
  filter: hue-rotate(180deg) saturate(150%);
  background-attachment: fixed;
}

.content {
  position: relative;
  z-index: 10;
  margin: 0 auto;
}
@media only screen and (max-width: 767px) {
  .content {
    padding: 0;
  }
}
@media only screen and (min-width: 768px) {
  .content {
    background: rgba(255, 255, 255, 0.5);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2), 0 0 50px rgba(0, 0, 0, 0.1);
    max-width: 1150px;
    width: calc(100% - 30px);
    padding: 0 25px;
  }
}

.hero img {
  width: 100%;
}

h1 {
  font-family: "Hachi Maru Pop", cursive;
  font-weight: bolder;
  font-style: normal;
  text-align: center;
  color: #fe5900;
  text-shadow: rgb(254, 225, 1) 6px 0px 0px, rgb(254, 225, 1) 5.91686px 0.995377px 0px, rgb(254, 225, 1) 5.66974px 1.96317px 0px, rgb(254, 225, 1) 5.2655px 2.87655px 0px, rgb(254, 225, 1) 4.71532px 3.71022px 0px, rgb(254, 225, 1) 4.03447px 4.44106px 0px, rgb(254, 225, 1) 3.24181px 5.04883px 0px, rgb(254, 225, 1) 2.35931px 5.51667px 0px, rgb(254, 225, 1) 1.41143px 5.83163px 0px, rgb(254, 225, 1) 0.424423px 5.98497px 0px, rgb(254, 225, 1) -0.574341px 5.97245px 0px, rgb(254, 225, 1) -1.55719px 5.79441px 0px, rgb(254, 225, 1) -2.49688px 5.45578px 0px, rgb(254, 225, 1) -3.36738px 4.96596px 0px, rgb(254, 225, 1) -4.14455px 4.33852px 0px, rgb(254, 225, 1) -4.80686px 3.59083px 0px, rgb(254, 225, 1) -5.33596px 2.74364px 0px, rgb(254, 225, 1) -5.71718px 1.8204px 0px, rgb(254, 225, 1) -5.93995px 0.84672px 0px, rgb(254, 225, 1) -5.99811px -0.150428px 0px, rgb(254, 225, 1) -5.89004px -1.14341px 0px, rgb(254, 225, 1) -5.61874px -2.1047px 0px, rgb(254, 225, 1) -5.19172px -3.00766px 0px, rgb(254, 225, 1) -4.62082px -3.82727px 0px, rgb(254, 225, 1) -3.92186px -4.54081px 0px, rgb(254, 225, 1) -3.11421px -5.12852px 0px, rgb(254, 225, 1) -2.22026px -5.57409px 0px, rgb(254, 225, 1) -1.26477px -5.86518px 0px, rgb(254, 225, 1) -0.274238px -5.99373px 0px, rgb(254, 225, 1) 0.723898px -5.95617px 0px, rgb(254, 225, 1) 1.70197px -5.75355px 0px, rgb(254, 225, 1) 2.63288px -5.39147px 0px, rgb(254, 225, 1) 3.49082px -4.87998px 0px, rgb(254, 225, 1) 4.25202px -4.23324px 0px, rgb(254, 225, 1) 4.89538px -3.46919px 0px, rgb(254, 225, 1) 5.40307px -2.60899px 0px, rgb(254, 225, 1) 5.76102px -1.67649px 0px, rgb(254, 225, 1) 5.95932px -0.697531px 0px;
  line-height: 1.3;
  letter-spacing: 0.05rem;
}
@media only screen and (max-width: 767px) {
  h1 {
    margin: 0 0 35px;
    padding: 13px 0;
    font-size: 1.7rem;
  }
}
@media only screen and (min-width: 768px) {
  h1 {
    margin: 0 auto;
    padding: 0 0 10px;
    font-size: 3rem;
  }
}
h1 span {
  font-family: "Raleway";
}

.topics {
  background-color: rgba(113, 200, 214, 0.631372549);
  backdrop-filter: blur(20px);
}
@media only screen and (max-width: 767px) {
  .topics {
    padding: 35px 0 85px;
  }
}
@media only screen and (min-width: 768px) {
  .topics {
    padding: 75px 0 110px;
  }
}
.topics__inner {
  margin: 0 auto;
}
@media only screen and (max-width: 767px) {
  .topics__inner {
    padding: 0 20px;
  }
}
.topics__ttl {
  text-align: center;
  color: #fee000;
}
@media only screen and (max-width: 767px) {
  .topics__ttl {
    margin: 0 0 30px;
  }
}
@media only screen and (min-width: 768px) {
  .topics__ttl {
    margin: 0 0 50px;
  }
}
.topics__ttl-icon {
  display: block;
}
@media only screen and (max-width: 767px) {
  .topics__ttl-icon {
    margin: 0 0 12px;
  }
}
@media only screen and (min-width: 768px) {
  .topics__ttl-icon {
    margin: 0 0 18px;
  }
}
.topics__ttl-icon::before {
  font-family: "Font Awesome 6 Free";
  font-weight: 400;
  content: "\f4ad";
}
@media only screen and (max-width: 767px) {
  .topics__ttl-icon::before {
    font-size: 2rem;
  }
}
@media only screen and (min-width: 768px) {
  .topics__ttl-icon::before {
    font-size: 2.8rem;
  }
}
.topics__ttl .icon-sns::before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  content: "\f0ac";
}
@media only screen and (max-width: 767px) {
  .topics__ttl .icon-sns::before {
    font-size: 2rem;
  }
}
@media only screen and (min-width: 768px) {
  .topics__ttl .icon-sns::before {
    font-size: 2.8rem;
  }
}
.topics__ttl-text {
  font-family: "Raleway";
  text-align: center;
  font-weight: 700;
  letter-spacing: 0.1rem;
}
@media only screen and (max-width: 767px) {
  .topics__ttl-text {
    font-size: 1.9rem;
    margin: 0 0 5px;
  }
}
@media only screen and (min-width: 768px) {
  .topics__ttl-text {
    font-size: 2.5rem;
    margin: 0 0 13px;
  }
}
.topics__ttl span {
  font-family: "Noto Sans JP";
  font-weight: 500;
}
@media only screen and (max-width: 767px) {
  .topics__ttl span {
    font-size: 0.85rem;
  }
}
@media only screen and (min-width: 768px) {
  .topics__ttl span {
    font-size: 0.95rem;
  }
}
@media only screen and (max-width: 767px) {
  .topics__area {
    margin: 0 0 30px;
  }
}
@media only screen and (min-width: 768px) {
  .topics__area {
    margin: 30px auto 20px;
    width: calc(100% - 50px);
  }
}
.topics__area .topics-list {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  display: -ms-flexbox;
  display: -moz-box;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}
@media only screen and (max-width: 767px) {
  .topics__area .topics-list {
    justify-content: space-between;
    gap: 13px 0;
  }
}
@media only screen and (min-width: 768px) {
  .topics__area .topics-list {
    -webkit-justify-content: center;
    justify-content: center;
    gap: 20px;
  }
}
.topics__area .topics-list .topic {
  background-color: rgba(255, 255, 255, 0.4);
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
  color: #fee000;
  box-sizing: border-box;
  border-radius: 10px;
  position: relative;
}
@media only screen and (max-width: 767px) {
  .topics__area .topics-list .topic {
    width: 48.5%;
    padding: 15px 10px;
  }
}
@media only screen and (min-width: 768px) {
  .topics__area .topics-list .topic {
    width: calc((100% - 64px) / 4);
    padding: 15px 13px;
  }
}
.topics__area .topics-list .topic:first-child {
  margin-top: 0;
}
.topics__area .topics-list .topic:hover {
  box-shadow: 0 6px 13px rgba(0, 0, 0, 0.1);
  transition: 0.3s;
}
.topics__area .topics-list .topic figure {
  width: 100%;
  position: relative;
  overflow: hidden;
  background: #f1f1f1;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media only screen and (max-width: 767px) {
  .topics__area .topics-list .topic figure {
    height: 125px;
  }
}
@media only screen and (min-width: 768px) {
  .topics__area .topics-list .topic figure {
    height: 190px;
  }
}
.topics__area .topics-list .topic figure a {
  display: block;
}
.topics__area .topics-list .topic figure a img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}
.topics__area .topics-list .topic figure .noimg {
  color: #97a5b7;
  font-size: 1.3rem;
  font-weight: 600;
}
@media only screen and (max-width: 767px) {
  .topics__area .topics-list .topic figure .noimg {
    font-size: 1.1rem;
  }
}
@media only screen and (min-width: 768px) {
  .topics__area .topics-list .topic figure .noimg {
    font-size: 1.3rem;
  }
}
.topics__area .topics-list .topic__caption {
  box-sizing: border-box;
  width: 100%;
  margin: 15px 0 0;
}
.topics__area .topics-list .topic__text {
  font-weight: bold;
  width: 100%;
  padding: 0;
  margin: 10px 0 0;
  text-overflow: ellipsis;
  overflow: hidden;
  font-feature-settings: "palt";
  display: -webkit-box;
  -webkit-box-orient: vertical;
}
@media only screen and (max-width: 767px) {
  .topics__area .topics-list .topic__text {
    -webkit-line-clamp: 2;
    font-size: 14px;
    height: 45px;
    line-height: 22px;
  }
}
@media only screen and (min-width: 768px) {
  .topics__area .topics-list .topic__text {
    -webkit-line-clamp: 3;
    font-size: 16px;
    height: 75px;
    line-height: 26px;
  }
}
.topics__area .topics-list .topic__text:hover {
  text-decoration: none !important;
}
.topics__area .topics-list .topic__text a {
  color: #fee000;
  text-decoration: none;
}
@media only screen and (max-width: 767px) {
  .topics__area .topics-list .topic__text a {
    text-overflow: ellipsis;
    white-space: normal;
  }
}
.topics__area .topics-list .topic__text a:hover {
  text-decoration: none !important;
}
.topics__area .topics-list .topic__text a::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.topics__area .topics-list .topic__date {
  text-align: right;
  letter-spacing: 0.07em;
  line-height: 1;
}
@media only screen and (max-width: 767px) {
  .topics__area .topics-list .topic__date {
    margin: 15px 0 0;
    font-size: 14px;
  }
}
@media only screen and (min-width: 768px) {
  .topics__area .topics-list .topic__date {
    margin: 20px 0 0;
    font-size: 0.85rem;
  }
}
.topics__soon {
  text-align: center;
  font-family: "Noto Sans JP";
}
@media only screen and (max-width: 767px) {
  .topics__soon {
    margin: 30px 0 60px;
  }
}
@media only screen and (min-width: 768px) {
  .topics__soon {
    margin: 50px 0 80px;
    font-size: 1.1rem;
  }
}
@media only screen and (max-width: 767px) {
  .topics .sns {
    margin: 40px 0 0;
  }
}
@media only screen and (min-width: 768px) {
  .topics .sns {
    width: calc(100% - 50px);
    margin: 80px auto 0;
  }
}
@media only screen and (max-width: 767px) {
  .topics .sns__content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 13px 0;
  }
}
@media only screen and (min-width: 768px) {
  .topics .sns__content {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0 20px;
  }
}
.topics .sns__item {
  text-align: center;
  position: relative;
  background: #e9f1f9;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  box-sizing: border-box;
  cursor: pointer;
}
@media only screen and (max-width: 767px) {
  .topics .sns__item {
    width: 48.5%;
    padding: 15px 10px;
  }
  .topics .sns__item:last-child {
    margin: 0 auto;
  }
}
@media only screen and (min-width: 768px) {
  .topics .sns__item {
    padding: 20px 13px 16px;
  }
  .topics .sns__item:hover {
    box-shadow: 0 6px 13px rgba(0, 0, 0, 0.1);
    transition: 0.3s;
  }
}
.topics .sns__img {
  border-radius: 50%;
  overflow: hidden;
  width: 80%;
}
@media only screen and (max-width: 767px) {
  .topics .sns__img {
    margin: 0 auto 10px;
  }
}
@media only screen and (min-width: 768px) {
  .topics .sns__img {
    margin: 0 auto 13px;
  }
}
.topics .sns__text {
  line-height: 1.2;
}
@media only screen and (max-width: 767px) {
  .topics .sns__text {
    font-size: 0.95rem;
  }
}
.topics .sns__text a {
  font-weight: 600;
  color: #8ba3f0;
}
.topics .sns__text a:hover {
  text-decoration: none;
}
.topics .sns__text a::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.shop {
  background: #e9f1f9;
  color: #8ba3f0;
}
.shop__inner {
  margin: 0 auto;
  position: relative;
}
@media only screen and (max-width: 767px) {
  .shop__inner {
    padding: 0 20px;
  }
}
@media only screen and (min-width: 768px) {
  .shop__inner {
    width: calc(100% - 50px);
  }
}
.shop__ttl {
  font-family: "Raleway";
  position: absolute;
  top: -35px;
  background: #e9f1f9;
  border-radius: 10px 10px 0 0/10px 10px 0 0;
  height: 35px;
  text-align: center;
  font-weight: 600;
  letter-spacing: 1.5px;
}
@media only screen and (max-width: 767px) {
  .shop__ttl {
    left: 20px;
    width: 200px;
    font-size: 14px;
    line-height: 50px;
  }
}
@media only screen and (min-width: 768px) {
  .shop__ttl {
    left: 0;
    width: 210px;
    font-size: 16px;
    line-height: 45px;
  }
}
.shop__container {
  display: grid;
}
@media only screen and (max-width: 767px) {
  .shop__container {
    flex-direction: column;
    padding: 0 0 30px;
  }
}
@media only screen and (min-width: 768px) {
  .shop__container {
    padding: 40px 0 60px;
    grid-template-columns: 0.5fr 1fr;
    gap: 0 30px;
  }
}
@media only screen and (max-width: 767px) {
  .shop__item {
    width: 100%;
    margin: 0 0 35px;
  }
  .shop__item:last-child {
    margin: 0;
  }
}
.shop__item-ttl {
  font-family: "Noto Sans JP";
  font-weight: 700;
  margin: 0 0 15px;
  letter-spacing: 0.07em;
}
@media only screen and (max-width: 767px) {
  .shop__item-ttl {
    font-size: 1.05rem;
  }
}
@media only screen and (min-width: 768px) {
  .shop__item-ttl {
    font-size: 1.4rem;
  }
}
.shop__item-ttl::before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: relative;
}
@media only screen and (max-width: 767px) {
  .shop__item-ttl::before {
    font-size: 1.1rem;
    top: 1px;
    margin-right: 8px;
  }
}
@media only screen and (min-width: 768px) {
  .shop__item-ttl::before {
    font-size: 1.3rem;
    top: 1px;
    margin-right: 10px;
  }
}
.shop__item-ttl.icon-access::before {
  content: "\f3c5";
}
@media only screen and (max-width: 767px) {
  .shop__detail {
    padding: 30px 0 0;
  }
}
@media only screen and (min-width: 768px) {
  .shop__detail {
    padding: 0;
  }
}
.shop__detail-name {
  font-family: "Noto Sans JP";
  font-weight: 700;
  border-bottom: #8ba3f0 solid 1px;
  margin: 0 0 15px;
  padding: 0 0 8px;
}
@media only screen and (max-width: 767px) {
  .shop__detail-name {
    font-size: 1.15rem;
  }
}
@media only screen and (min-width: 768px) {
  .shop__detail-name {
    font-size: 1.3rem;
  }
}
.shop__detail-item {
  margin: 0 0 15px;
}
.shop__detail-item:last-child {
  margin: 0;
}
.shop__detail-item p {
  margin: 0;
  padding: 0;
}
@media only screen and (max-width: 767px) {
  .shop__detail-item p {
    font-size: 0.9rem;
    line-height: 1.7rem;
  }
}
@media only screen and (min-width: 768px) {
  .shop__detail-item p {
    font-size: 0.9rem;
    line-height: 1.7rem;
  }
}
.shop__detail-link {
  position: relative;
  border: #8ba3f0 solid 2px;
  text-align: center;
  border-radius: 5px;
  box-sizing: border-box;
}
@media only screen and (max-width: 767px) {
  .shop__detail-link {
    margin: 15px 0 0;
    height: 50px;
  }
}
@media only screen and (min-width: 768px) {
  .shop__detail-link {
    margin: 20px 0 0;
    height: 50px;
  }
}
.shop__detail-link:hover {
  background: #8ba3f0;
  transition: 0.5s;
}
.shop__detail-link:hover a {
  color: #fff;
}
.shop__detail-link:hover .shop__detail-icon-hover {
  opacity: 1;
}
.shop__detail-link a {
  color: #8ba3f0;
  text-decoration: none;
  font-weight: 600;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media only screen and (max-width: 767px) {
  .shop__detail-link a {
    font-size: 0.9rem;
  }
}
@media only screen and (min-width: 768px) {
  .shop__detail-link a {
    font-size: 0.95rem;
  }
}
.shop__detail-link a::before {
  font-family: "Font Awesome 6 Free";
  content: "\f015";
  font-weight: 900;
  margin-right: 7px;
}
@media only screen and (max-width: 767px) {
  .shop__detail-link a::before {
    font-size: 0.9rem;
    position: relative;
    top: 1px;
  }
}
@media only screen and (min-width: 768px) {
  .shop__detail-link a::before {
    font-size: 1rem;
  }
}
.shop__detail-icon {
  position: relative;
  top: -4px;
}
.shop__detail-icon img {
  margin-right: 7px;
}
.shop__detail-icon-hover {
  position: absolute;
  left: 0;
  top: 4px;
  opacity: 0;
  transition: 0.5s;
}

@media only screen and (min-width: 768px) {
  .sponly {
    display: none;
  }
}/*# sourceMappingURL=style.css.map */