@charset "UTF-8";

@media screen and (max-width: 640px) {
  #MYPAGE-WRAPPER {
    padding-top: 0 !important;
  }
  .matsue .inner {
    padding: 0 20px;
  }

  #PAGE {
    display: none;
  }

  .theater_pageTop a {
    color: #fff;
  }
}

#sumikkogurashi {
  position: relative;
  overflow: hidden;
  background-color: #dff6ff;
}
#sumikkogurashi .sp {
  display: none;
}
#sumikkogurashi img {
  max-width: 100%;
  display: block;
}
#sumikkogurashi section {
  position: relative;
}
.sumikkogurashi-inner {
  max-width: 965px;
  margin: 0 auto;
  padding: 0 25px;
  position: relative;
  z-index: 2;
}
.sumikkogurashi-section_title {
  margin-bottom: 24px;
}
.sumikkogurashi-section_title h2 {
  width: 350px;
  max-width: 100%;
  margin: 0 auto 16px;
}
.sumikkogurashi__cloud {
  width: 1600px;
  position: absolute;
  left: calc(50% - 800px);
  overflow: hidden;
  pointer-events: none;
}
.sumikkogurashi__character {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  pointer-events: none;
}
.sumikkogurashi__character img {
  width: 130px;
  position: absolute;
}
.sumikkogurashi-deco {
  width: 400px;
  margin: 0 auto;
}
@media screen and (max-width: 640px) {
  #sumikkogurashi .pc {
    display: none;
  }
  #sumikkogurashi .sp {
    display: block;
  }
  .sumikkogurashi-inner {
    max-width: 375px;
  }
  .sumikkogurashi-section_title {
    margin-bottom: 16px;
  }
  .sumikkogurashi-section_title h2 {
    width: 235px;
    margin-bottom: 8px;
  }
  .sumikkogurashi__cloud {
    width: 550px;
    left: calc(50% - 275px);
  }
  .sumikkogurashi__character img {
    width: 90px;
  }
  .sumikkogurashi-deco {
    width: 200px;
  }
}

.sumikkogurashi-mv {
  position: relative;
  z-index: 2;
}
.sumikkogurashi-mv__title {
  margin: 0 auto;
  position: absolute;
  top: 2%;
  left: 0;
  right: 0;
}
.sumikkogurashi-mv__title img {
  width: 52%;
  max-width: 100%;
  margin: 0 auto;
}
.sumikkogurashi-mv__text {
  width: 32%;
  margin: 0 auto;
  position: absolute;
  bottom: 2%;
  left: 0;
  right: 0;
}
.sumikkogurashi-mv__bg {
  position: relative;
  z-index: -1;
  pointer-events: none;
}
.sumikkogurashi-mv__bg img {
  width: 100%;
}
@media screen and (max-width: 640px) {
  .sumikkogurashi-mv {
    padding-bottom: 16vw;
  }
  .sumikkogurashi-mv__title img {
    width: 85%;
  }
  .sumikkogurashi-mv__text {
    width: 62%;
    bottom: 6%;
  }
}

.sumikkogurashi-message {
  padding: 40px 0 120px;
}
.sumikkogurashi-message__title {
  width: 456px;
  margin: 30px auto 34px;
}
.sumikkogurashi-message__text {
  width: 450px;
  max-width: 100%;
  margin: 30px auto 80px;
}
.sumikkogurashi-message-movie {
  width: 662px;
  max-width: 100%;
  margin: 40px auto 0;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  border: 6px solid #fff;
  border-radius: 20px;
  box-shadow: 0 0 15px 2px rgb(2 58 127 / 30%);
}
.sumikkogurashi-message-movie__youtube {
  aspect-ratio: 16 / 9;
}
.sumikkogurashi-message-movie__youtube iframe {
  width: 100%;
  height: 100%;
  display: block;
}
.sumikkogurashi-message .sumikkogurashi__cloud {
  top: 518px;
}
.sumikkogurashi-message .sumikkogurashi__character img:nth-child(1) {
  top: 451px;
  right: 60px;
}
.sumikkogurashi-message .sumikkogurashi__character img:nth-child(2) {
  bottom: -175px;
  left: 125px;
}
@media screen and (max-width: 640px) {
  .sumikkogurashi-message {
    padding: 0 0 100px;
  }
  .sumikkogurashi-message__title {
    width: 228px;
    margin: 0 auto 24px;
  }
  .sumikkogurashi-message__text {
    width: 280px;
    margin: 16px auto 40px;
  }
  .sumikkogurashi-message-movie {
    width: 300px;
    margin-top: 20px;
    border: 3px solid #fff;
    border-radius: 10px;
    box-shadow: 0 0 10px 2px rgb(2 58 127 / 30%);
  }
  .sumikkogurashi-message .sumikkogurashi__cloud {
    top: 248px;
  }
  .sumikkogurashi-message .sumikkogurashi__character img:nth-child(1) {
    top: 467px;
    right: 70px;
  }
  .sumikkogurashi-message .sumikkogurashi__character img:nth-child(2) {
    bottom: -145px;
    left: 39px;
  }
}

.sumikkogurashi-story_intro {
  padding: 100px 0;
  background-color: #d8e8f7;
}
.sumikkogurashi-story_intro-anchor_button {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px 10px;
  margin: 0 auto 90px;
}
.sumikkogurashi-story_intro-anchor_button.item-5 {
  flex-wrap: wrap;
  max-width: 710px;
}
.sumikkogurashi-story_intro-anchor_button.item-5 li {
  max-width: 230px;
}
.sumikkogurashi-story_intro-anchor_button a {
  display: block;
  transition: opacity ease 0.4s;
}
.sumikkogurashi-story_intro-anchor_button a:hover {
  opacity: 0.7;
}
.sumikkogurashi-story_intro__bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  pointer-events: none;
}
.sumikkogurashi-story_intro__bg img {
  width: 100%;
}
.sumikkogurashi-story_intro .sumikkogurashi__cloud {
  top: 225px;
}
.sumikkogurashi-story_intro .sumikkogurashi__character img:nth-child(1) {
  top: -62px;
  right: 144px;
}
.sumikkogurashi-story_intro .sumikkogurashi__character img:nth-child(2) {
  bottom: 24px;
  left: -30px;
}
@media screen and (max-width: 640px) {
  .sumikkogurashi-story_intro {
    padding: 50px 0 70px;
  }
  .sumikkogurashi-story_intro-anchor_button {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 15px 10px;
    margin-bottom: 40px;
  }
  .sumikkogurashi-story_intro-anchor_button li {
    width: calc((100% - 10px) / 2);
  }
  .sumikkogurashi-story_intro .sumikkogurashi__cloud {
    top: 195px;
  }
  .sumikkogurashi-story_intro .sumikkogurashi__character img:nth-child(1) {
    top: -65px;
    right: 2px;
  }
  .sumikkogurashi-story_intro .sumikkogurashi__character img:nth-child(2) {
    bottom: -53px;
    left: 11px;
  }
}

.sumikkogurashi-story {
  position: relative;
}
.sumikkogurashi-story .sumikkogurashi-deco {
  margin-bottom: 32px;
}
.sumikkogurashi-story-column {
  display: flex;
  align-items: flex-start;
  gap: 16px 26px;
}
.sumikkogurashi-story-column__image {
  flex-grow: 1;
}
.sumikkogurashi-story-column__content {
  width: 550px;
  flex-shrink: 0;
  padding-top: 12px;
}
@media screen and (max-width: 640px) {
  .sumikkogurashi-story .sumikkogurashi-deco {
    margin-bottom: 20px;
  }
  .sumikkogurashi-story-column {
    flex-direction: column;
  }
  .sumikkogurashi-story-column__image {
    width: calc(100% + 10px);
    margin-left: -5px;
  }
  .sumikkogurashi-story-column__content {
    width: calc(100% + 40px);
    margin-left: -20px;
    padding-top: 0;
  }
}

.sumikkogurashi-story_intro-cta {
  margin-top: 95px;
  padding: 0 40px;
}
.sumikkogurashi-story_intro-cta .sumikkogurashi-inner {
  max-width: 870px;
}
.sumikkogurashi-story_intro-cta__bnuttons {
  padding: 0 15%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px 10px;
  position: absolute;
  bottom: 67px;
  left: 0;
  right: 0;
}
.sumikkogurashi-story_intro-cta__button {
  max-width: 300px;
  transition: opacity ease 0.4s;
}
.sumikkogurashi-story_intro-cta__button:hover {
  opacity: 0.7;
}
@media screen and (max-width: 640px) {
  .sumikkogurashi-story_intro-cta {
    margin-top: 80px;
    padding: 0;
  }
  .sumikkogurashi-story_intro-cta__bnuttons {
    flex-direction: column;
    bottom: 30px;
  }
}

.sumikkogurashi-banner {
  padding: 95px 0 0;
}
.sumikkogurashi-banner__item {
  display: block;
  position: relative;
}
.sumikkogurashi-banner__item:not(:first-child) {
  margin-top: 64px;
}
.sumikkogurashi-banner__cta {
  display: block;
  position: absolute;
  text-align: center;
  font-size: 0;
}
.sumikkogurashi-banner__button {
  margin: 0 auto;
  display: inline-block;
  transition: opacity ease 0.4s;
}
.sumikkogurashi-banner__button:hover {
  opacity: 0.7;
}
.sumikkogurashi-banner__button img {
  height: 80px;
}
.sumikkogurashi-banner__link {
  padding: 8px 24px;
  display: inline-block;
  transition: opacity ease 0.4s;
}
.sumikkogurashi-banner__link img {
  height: 21px;
}
.sumikkogurashi-banner__link:hover {
  opacity: 0.7;
}
.sumikkogurashi-banner__item.--banner__item-etiquette_commercial .sumikkogurashi-banner__cta {
  bottom: 7%;
  right: 6%;
}
.sumikkogurashi-banner__item.--banner__item-theater_debut .sumikkogurashi-banner__cta {
  bottom: 11%;
  left: 0;
  right: 0;
}
.sumikkogurashi-banner__item.--banner__item-present_campaign .sumikkogurashi-banner__cta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  bottom: 27%;
  left: 5%;
}
.sumikkogurashi-banner__item.--banner__item-line_wallpaper .sumikkogurashi-banner__cta {
  display: flex;
  justify-content: space-between;
  bottom: 9%;
  left: 8%;
  right: 8%;
}
.sumikkogurashi-banner__item.--banner__item-interview .sumikkogurashi-banner__cta {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  bottom: 11%;
  left: 6%;
  right: 6%;
}
.sumikkogurashi-banner__item.--banner__item-interview .sumikkogurashi-banner__img {
  max-width: 369px;
  padding: 0 4px 36px 36px;
}
.sumikkogurashi-banner__item.--banner__item-goods_food .sumikkogurashi-banner__cta {
  left: 0;
  right: 0;
}
.sumikkogurashi-banner__item.--banner__item-goods_food .sumikkogurashi-banner__cta.--top-cta {
  bottom: 50.8%;
}
.sumikkogurashi-banner__item.--banner__item-goods_food .sumikkogurashi-banner__cta.--bottom-cta {
  bottom: 46%;
}
.sumikkogurashi-banner__item.--banner__item-original_goods .sumikkogurashi-banner__cta {
  bottom: 17%;
  left: 0;
  right: 0;
}
.sumikkogurashi-banner .sumikkogurashi__cloud {
  top: 60px;
  bottom: 0;
}
.sumikkogurashi-banner .sumikkogurashi__character img:nth-child(1) {
  top: -140px;
  right: 70px;
}
.sumikkogurashi-banner .sumikkogurashi__character img:nth-child(2) {
  bottom: -170px;
  right: 140px;
}
@media screen and (max-width: 640px) {
  .sumikkogurashi-banner {
    padding: 70px 0 0;
  }
  .sumikkogurashi-banner__item:not(:first-child) {
    margin-top: 30px;
  }
  .sumikkogurashi-banner__cta {
    padding: 0 15%;
  }
  .sumikkogurashi-banner__button img {
    height: min(14vw, 58px);
  }
  .sumikkogurashi-banner__link {
    padding: 4px;
  }
  .sumikkogurashi-banner__link img {
    height: 12px;
  }
  .sumikkogurashi-banner__item.--banner__item-etiquette_commercial .sumikkogurashi-banner__cta {
    bottom: 5%;
    left: 0;
    right: 0;
  }
  .sumikkogurashi-banner__item.--banner__item-theater_debut .sumikkogurashi-banner__cta {
    bottom: 13%;
  }
  .sumikkogurashi-banner__item.--banner__item-present_campaign .sumikkogurashi-banner__cta {
    align-items: center;
    gap: 4px;
    bottom: 22%;
    left: 0;
    right: 0;
  }
  .sumikkogurashi-banner__item.--banner__item-line_wallpaper .sumikkogurashi-banner__cta {
    display: block;
    bottom: 31%;
    left: auto;
    right: -3%;
  }
  .sumikkogurashi-banner__item.--banner__item-interview .sumikkogurashi-banner__cta {
    display: block;
    bottom: min(10vw, 42px);
    left: 0;
    right: 0;
  }
  .sumikkogurashi-banner__item.--banner__item-interview .sumikkogurashi-banner__img {
    position: absolute;
    width: 68%;
    bottom: min(55vw, 235px);
    right: 15%;
    padding: 0;
  }
  .sumikkogurashi-banner__item.--banner__item-goods_food .sumikkogurashi-banner__cta.--top-cta {
    bottom: 50.2%;
  }
  .sumikkogurashi-banner__item.--banner__item-goods_food .sumikkogurashi-banner__cta.--bottom-cta {
    bottom: 45%;
  }
  .sumikkogurashi-banner .sumikkogurashi__cloud {
    top: 10px;
  }
  .sumikkogurashi-banner .sumikkogurashi__character img:nth-child(1) {
    top: -96px;
    right: 40px;
  }
  .sumikkogurashi-banner .sumikkogurashi__character img:nth-child(2) {
    bottom: -92px;
    right: 42px;
  }
}

.sumikkogurashi-bottom {
  margin-top: 160px;
  padding: 0 0 40px;
  position: relative;
  z-index: 2;
}
.sumikkogurashi-bottom ul {
  margin-bottom: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30px;
}
.sumikkogurashi-bottom li {
  width: 70px;
}
.sumikkogurashi-bottom li a {
  display: block;
  transition: opacity ease 0.4s;
}
.sumikkogurashi-bottom li a:hover {
  opacity: 0.7;
}
.sumikkogurashi-bottom small {
  display: block;
}
.sumikkogurashi-bottom small img {
  height: 17px;
  margin: 0 auto;
}
@media screen and (max-width: 640px) {
  .sumikkogurashi-bottom {
    margin-top: 140px;
  }
  .sumikkogurashi-bottom small img {
    height: 12px;
  }
}