@charset "UTF-8";

/*--------------------------------------------
フォント
---------------------------------------------*/

/*--------------------------------------------
カラー
---------------------------------------------*/

/*--------------------------------------------
サイト幅・ブレイクポイント
---------------------------------------------*/

/*--------------------------------------------
イージング
---------------------------------------------*/

/*--------------------------------------------
フォント
---------------------------------------------*/

/*--------------------------------------------
カラー
---------------------------------------------*/

/*--------------------------------------------
サイト幅・ブレイクポイント
---------------------------------------------*/

/*--------------------------------------------
イージング
---------------------------------------------*/

/*--------------------------------------------
フォントサイズ・余白などのレスポンシブ対応
---------------------------------------------*/

/*--------------------------------------------
メディアクエリ
---------------------------------------------*/

/*--------------------------------------------
ホバー
---------------------------------------------*/

@import url(https://fonts.googleapis.com/earlyaccess/notosansjapanese.css);

@import url(https://fonts.googleapis.com/css?family=Raleway:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i);

body {
  font: 14px/1 "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
  font-family: Roboto, "Noto Sans JP", sans-serif;
}

.page-index #content-inner01 {
  width: 100%;
  padding: 0;
  background-color: transparent;
}

/*--------------------------------------------
標準設定（common）
---------------------------------------------*/

.clearfix:after {
  clear: both;
  content: " ";
  display: block;
}

.none {
  display: none !important;
}

/* animation */

.btn {
  display: flex;
  justify-content: center;
}

.btn a {
  display: block;
}

.note-list li {
  position: relative;
  padding-left: 1em;
}

.note-list.no-list-style li {
  padding-left: 0;
}

.note-list.example li {
  padding-left: 2em;
}

.note-list.example li:before {
  content: "例：";
  position: absolute;
  top: 0;
  left: 0;
}

.note-list.rice li:before {
  content: "※";
  position: absolute;
  top: 0;
  left: 0;
}

.note-list.circle li:before {
  content: "●";
  position: absolute;
  top: 0;
  left: 0;
}

.note-list.tac li:before {
  content: "";
}

.tac {
  text-align: center !important;
}

.l-wrapper {
  padding-top: 0;
}

.l-content {
  padding-bottom: 0;
}

.l-content * {
  box-sizing: border-box;
}

.main-contents {
  color: #76634e;
}

.main-contents dt,
.main-contents dd,
.main-contents li,
.main-contents caption,
.main-contents th,
.main-contents td,
.main-contents h1,
.main-contents h2,
.main-contents h3,
.main-contents h4,
.main-contents h5,
.main-contents h6,
.main-contents p,
.main-contents address {
  font-size: 1em;
}

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

.inner .title-02 {
  text-align: center;
}

.inner-contents {
  position: relative;
}

.series-box .img {
  text-align: center;
}

.text-img {
  text-align: center;
}

.series-box .img .main-img {
  position: relative;
}

/*--------------------------------------------
メインビジュアル（common）
---------------------------------------------*/

.section-mv {
  width: 100%;
  background-color: #fffef1;
}

.section-mv .mv-logo {
  text-align: center;
}

/*--------------------------------------------
アンカーナビ（common）
---------------------------------------------*/

.cp_mnav {
  background-color: #fff6c6;
}

.cp_mnav .inner {
  width: 100%;
}

.cp_mnav .cp-mnav-list {
  width: 100%;
}

.cp_mnav .cp-mnav-list li a {
  position: relative;
  display: block;
}

.cp_mnav .character-list {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  transform: translateX(-50%);
}

.cp_mnav .character-list .list {
  opacity: 0;
}

/*--------------------------------------------
オリジナル消しゴム（common）
---------------------------------------------*/

.section-eraser {
  background-color: #dff3f4;
}

.section-eraser .series-box .img {
  text-align: center;
}

.section-eraser .text {
  text-align: center;
}

/*--------------------------------------------
対象メニュー（common）
---------------------------------------------*/

.section-menu {
  background-color: #fcdfcf;
}

.tab-wrap .tab-list {
  display: flex;
  justify-content: center;
  width: 100%;
}

.tab-wrap .tab-list li {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.tab-wrap .tab-list li .on {
  display: none;
}

.tab-wrap .tab-con-wrap {
  position: relative;
}

.tab-wrap .tab-con {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 20px 15px 15px 15px;
  opacity: 0;
  visibility: hidden;
}

.tab-wrap .tab-con.show {
  position: relative;
  opacity: 1;
  visibility: visible;
}

.tab-wrap .list-wrap .list {
  position: relative;
}

.tab-wrap .list-wrap .list .name,
.tab-wrap .list-wrap .list .price {
  font-weight: bold;
  text-align: left;
}

/*--------------------------------------------
映画すみっコぐらし（common）
---------------------------------------------*/

.section-movie {
  background-color: #fffcf0;
}

.section-movie .title-02 {
  position: relative;
}

.section-movie .inner {
  position: relative;
  text-align: center;
}

.section-movie .inner .btn {
  text-align: center;
}

/*--------------------------------------------
すみっコぐらしとは（common）
---------------------------------------------*/

.section-about {
  padding: 80px 0 120px;
  background-color: #ebf8d1;
}

.section-about .inner {
  position: relative;
}

.section-about .inner .btn {
  position: absolute;
  left: 50%;
  bottom: 10%;
  transform: translate(-50%);
}

/*--------------------------------------------
お問合せ情報（common）
---------------------------------------------*/

.section-contact {
  text-align: center;
  color: #76634e;
  background-color: #fff;
}

.section-contact .tel {
  font-weight: bold;
}

.section-contact .tel span {
  font-weight: normal;
}

.section-contact .tel a {
  color: #76634e;
  text-decoration: none;
}

/*--------------------------------------------
ページトップ（pc）
---------------------------------------------*/

.col_pagetop a {
  display: block;
}

/*--------------------------------------------
アニメーション（common）
---------------------------------------------*/

.fade_up {
  display: inline-block;
  opacity: 0;
}

.fade_up.alternate {
  opacity: 1;
  -webkit-animation: fade_up 1s forwards;
  animation: fade_up 1s forwards;
}

.cloud {
  -webkit-animation: cloud 2s ease infinite;
  animation: cloud 2s ease infinite;
}

.cloud.alternate {
  -webkit-animation: cloud 2s ease infinite alternate;
  animation: cloud 2s ease infinite alternate;
}

/*--------------------------------------------
アニメーション（common）
---------------------------------------------*/

.anim-rotate {
  transform-origin: center bottom;
  -webkit-animation: rotate 2.5s linear infinite;
  animation: rotate 2.5s linear infinite;
}

.anim-rotate-gear {
  -webkit-animation: rotate2sec 4s linear infinite;
  animation: rotate2sec 4s linear infinite;
}

.anim-rotate-gear-reverse {
  animation: rotate2sec 4s linear reverse infinite;
}

.anim-rotate-circle {
  -webkit-animation: rotateCircle 2.5s infinite;
  animation: rotateCircle 2.5s infinite;
  transform: rotate(20deg);
}

@-webkit-keyframes rotate {
  0%, 100% {
    transform: rotate(10deg);
  }

  50% {
    transform: rotate(-10deg);
  }
}

@keyframes rotate {
  0%, 100% {
    transform: rotate(10deg);
  }

  50% {
    transform: rotate(-10deg);
  }
}

@-webkit-keyframes rotate2sec {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes rotate2sec {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@-webkit-keyframes rotate2secReverse {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes rotate2secReverse {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@-webkit-keyframes rotateCircle {
  50% {
    transform: rotate(-20deg);
  }

  100% {
    transform: rotate(20deg);
  }
}

@keyframes rotateCircle {
  50% {
    transform: rotate(-20deg);
  }

  100% {
    transform: rotate(20deg);
  }
}

@-webkit-keyframes fade {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes fade {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@-webkit-keyframes fade_up {
  0% {
    opacity: 0;
    transform: translateY(15px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fade_up {
  0% {
    opacity: 0;
    transform: translateY(15px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@-webkit-keyframes move {
  0% {
    transform: translateX(0px);
  }

  30% {
    transform: translateX(5px);
  }

  100% {
    transform: translateX(0px);
  }
}

@keyframes move {
  0% {
    transform: translateX(0px);
  }

  30% {
    transform: translateX(5px);
  }

  100% {
    transform: translateX(0px);
  }
}

@-webkit-keyframes cloud {
  0% {
    transform: translateY(0px);
  }

  30% {
    transform: translateY(-6px);
  }

  100% {
    transform: translateY(0px);
  }
}

@keyframes cloud {
  0% {
    transform: translateY(0px);
  }

  30% {
    transform: translateY(-6px);
  }

  100% {
    transform: translateY(0px);
  }
}

img {
  zoom: 1;
}

/*--------------------------------------------
標準設定（sp）
---------------------------------------------*/

.main-contents .pc {
  display: none;
}

.series-box .term {
  padding-left: 2.5333333333vw;
}

.note-list {
  font-size: 2.9333333333vw;
  line-height: 1.54545455;
  letter-spacing: -0.04em;
}

.sp-pb0 {
  padding-bottom: 0 !important;
}

.l-wrapper {
  padding-top: 0 !important;
}

a:hover {
  opacity: 1 !important;
}

/*--------------------------------------------
メインビジュアル（sp）
---------------------------------------------*/

.section-mv {
  padding-bottom: 5.6vw;
}

.section-mv .pc {
  display: none;
}

.section-mv h1 img {
  width: 100%;
}

.section-mv .mv-logo {
  margin-top: 5.0666666667vw;
}

.section-mv .mv-logo img {
  width: 92vw;
}

/*--------------------------------------------
アンカーナビ（sp）
---------------------------------------------*/

.cp_mnav {
  padding: 10.6666666667vw 3.7333333333vw 10.6666666667vw;
}

.cp_mnav .inner {
  width: 100%;
}

.cp_mnav .cp-mnav-list {
  width: 100%;
}

.cp_mnav .cp-mnav-list li {
  width: 100%;
}

.cp_mnav .cp-mnav-list li + li {
  margin-top: 4.1333333333vw;
}

.cp_mnav .cp-mnav-list li img {
  width: 100%;
}

.cp_mnav .character-list {
  bottom: 7.4666666667vw;
}

.cp_mnav .character-list .list img {
  width: 11.8666666667vw;
}

.cp_mnav .character-list .list + .list {
  margin-left: 1.3333333333vw;
}

/*--------------------------------------------
オリジナル消しゴム（sp）
---------------------------------------------*/

.section-eraser {
  padding: 10.6666666667vw 4vw 9.3333333333vw;
}

.section-eraser .inner {
  width: 100%;
  background-image: url("../img/eraser-frame-sp.png");
  background-repeat: no-repeat;
  background-position: top left;
  background-size: 100%;
}

.section-eraser .inner.is-frame {
  padding: 12vw 0 14.1333333333vw;
}

.section-eraser .inner-contents {
  padding: 0 5.6vw 0;
}

.section-eraser .title-02 img {
  width: 70.5333333333vw;
}

.section-eraser .series-box.series-01 {
  margin-top: 5.3333333333vw;
}

.section-eraser .series-box.series-01 .img img {
  width: 78.8vw;
  left: 1.6vw;
}

.section-eraser .text-img {
  margin-top: 5.0666666667vw;
}

.section-eraser .text-img img {
  width: 68.9333333333vw;
}

.section-eraser .note-list {
  margin-top: 3.4666666667vw;
}

/*--------------------------------------------
対象メニュー（sp）
---------------------------------------------*/

.section-menu {
  padding: 10.6666666667vw 4vw 9.3333333333vw;
}

.section-menu .title-02 img {
  width: 100%;
}

.tab-wrap {
  margin-top: 7.8666666667vw;
}

.tab-wrap .tab-list {
  width: 100%;
  justify-content: space-between;
}

.tab-wrap .tab-list li {
  width: calc(33% - 0.9vw);
}

.tab-wrap .tab-list li img {
  width: 100%;
}

.tab-wrap .tab-list li .pc.on {
  display: none;
}

.tab-wrap .tab-list li.active .off {
  display: none;
}

.tab-wrap .tab-list li.active .on {
  display: block;
}

.tab-wrap .tab-list li.active .pc.on {
  display: none;
}

.tab-wrap .tab-con-wrap {
  margin-top: 1.8666666667vw;
}

.tab-wrap .tab-con {
  padding: 10.6666666667vw 5.3333333333vw 14.6666666667vw;
}

.tab-wrap .tab-con.frame-sp-col3 {
  background-image: url("../img/menu-frame-col3-sp.png");
  background-repeat: no-repeat;
  background-position: top left;
  background-size: 100%;
}

.tab-wrap .tab-con.frame-sp-col3-short {
  background-image: url("../img/menu-frame-col3-short-sp.png");
  background-repeat: no-repeat;
  background-position: top left;
  background-size: 100%;
}

.tab-wrap .tab-con.frame-sp-col1 {
  background-image: url("../img/menu-frame-col1-sp.png");
  background-repeat: no-repeat;
  background-position: top left;
  background-size: 100%;
}

.tab-wrap .list-wrap {
  padding-right: 2.5333333333vw;
  padding-left: 2.5333333333vw;
}

.tab-wrap .list-wrap .list {
  width: 100%;
}

.tab-wrap .list-wrap .list .img img {
  width: 100%;
}

.tab-wrap .list-wrap .list .name {
  font-size: 5.3333333333vw;
  margin-top: 4.8vw;
}

.tab-wrap .list-wrap .list .price {
  font-size: 4vw;
  margin-top: 0.8vw;
  line-height: 1.33333333;
}

.tab-wrap .list-wrap .list .price .num {
  font-size: 5.3333333333vw;
}

.tab-wrap .list-wrap.col1 .price {
  margin-top: 4.2666666667vw;
  line-height: 1.48;
}

.tab-wrap .list-wrap.col1 .price .num {
  font-size: 5.3333333333vw;
}

.tab-wrap .list-wrap.col1 .price .num-s {
  font-size: 4.5333333333vw;
}

.tab-wrap .list-wrap.col2 .list {
  padding-top: 8vw;
  padding-bottom: 7.8933333333vw;
}

.tab-wrap .list-wrap.col2 .list + .list {
  border-top: 2px solid #f5b097;
}

.tab-wrap .list-wrap.col2 .list:first-child {
  padding-top: 4px;
}

.tab-wrap .list-wrap.col2 .list:last-child {
  padding-bottom: 0;
}

.tab-wrap .btn {
  margin-top: 8.5333333333vw;
}

.tab-wrap .btn a img {
  width: 81.0666666667vw;
}

.tab-wrap .note-list {
  margin-top: 4.2666666667vw;
}

.tab-wrap .tab-con3 .list-wrap.col2 .list.list-01 {
  padding-bottom: 8.1333333333vw;
}

.tab-wrap .tab-con3 .list-wrap.col2 .list.list-02 {
  padding-bottom: 9.0666666667vw;
}

.tab-wrap .tab-con3 .btn {
  margin-top: 1.0666666667vw;
}

.tab-wrap .tab-con4 .btn {
  margin-top: 6.6666666667vw;
}

/*--------------------------------------------
映画すみっコぐらし（sp）
---------------------------------------------*/

.section-movie {
  position: relative;
  padding: 8.2666666667vw 2.6666666667vw 10.6666666667vw;
}

.section-movie .inner {
  width: 100%;
}

.section-movie .inner .title-02 {
  width: 100%;
  margin: 0 auto;
}

.section-movie .inner .title-02 img {
  width: 100%;
}

.section-movie .inner .img {
  text-align: left;
  width: 83.0666666667vw;
  margin: 3.7333333333vw auto 0;
}

.section-movie .inner .img img {
  width: 100%;
}

.section-movie .inner .btn {
  margin-top: 5.3333333333vw;
}

.section-movie .inner .btn img {
  width: 81.0666666667vw;
}

/*--------------------------------------------
すみっコぐらしとは（sp）
---------------------------------------------*/

.section-about {
  padding: 10.5333333333vw 3.7333333333vw;
}

.section-about .inner {
  position: relative;
  width: 100%;
}

.section-about .inner h2 img {
  width: 100%;
}

.section-about .inner .btn {
  position: absolute;
  width: 81.0666666667vw;
  bottom: 5.2%;
}

.section-about .inner .btn a img {
  width: 81.0666666667vw;
}

/*--------------------------------------------
お問合せ情報（sp）
---------------------------------------------*/

.section-contact {
  padding: 10.6666666667vw 4vw 8vw 4.1333333333vw;
}

.section-contact .title-02 img {
  width: 100%;
}

.section-contact .lead {
  margin-top: 6.4vw;
}

.section-contact .lead img {
  width: 76.4vw;
}

.section-contact .tel {
  font-size: 3.7333333333vw;
  line-height: 1.56;
  margin-top: 14px;
}

.section-contact .tel span {
  font-size: 3.4666666667vw;
}

.section-contact .copyright {
  font-size: 2.6666666667vw;
  margin-top: 6.9333333333vw;
  letter-spacing: 0.05em;
}

/*--------------------------------------------
メニュー（sp）
---------------------------------------------*/

.cp_nav_sp {
  position: fixed;
  display: flex;
  width: 82.4vw;
  right: -63.2vw;
  top: 61.2vw;
  font-size: 0;
  z-index: 8;
  transition: right 0.5s;
}

.cp_nav_sp.active {
  right: 0;
}

.cp_nav_sp .cp_nav_btn {
  position: relative;
  width: 21.0666666667vw;
}

.cp_nav_sp .cp_nav_btn .gear {
  width: 100%;
  filter: drop-shadow(0.9333333333vw 0.5333333333vw #c9b6aa);
}

.cp_nav_sp .cp_nav_btn .text {
  position: absolute;
  top: 8.4vw;
  left: 4vw;
  width: 13.0666666667vw;
}

.cp_nav_sp .cp_nav_in {
  position: relative;
  width: 63.0666666667vw;
  margin-left: -1.8666666667vw;
}

.cp_nav_sp .cp_nav_in .js-anchor {
  position: absolute;
  display: block;
}

.cp_nav_sp .cp_nav_in .js-anchor.anchor-01 {
  top: 0;
  left: 0;
  width: 31.6vw;
  height: 15.0666666667vw;
}

.cp_nav_sp .cp_nav_in .js-anchor.anchor-02 {
  top: 0;
  right: 0;
  width: 31.4666666667vw;
  height: 15.0666666667vw;
}

.cp_nav_sp .cp_nav_in .js-anchor.anchor-03 {
  bottom: 14.2666666667vw;
  left: 0;
  width: 31.6vw;
  height: 14.4vw;
}

.cp_nav_sp .cp_nav_in .js-anchor.anchor-04 {
  bottom: 14.2666666667vw;
  right: 0;
  width: 31.4666666667vw;
  height: 14.4vw;
}

.cp_nav_sp .cp_nav_in .js-anchor.anchor-05 {
  bottom: 0;
  left: 0;
  width: 100%;
  height: 14.2666666667vw;
}

.cp_nav_sp .cp_nav_bg {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  z-index: -1;
}

.cp_nav {
  display: none;
}

.cp_nav .cp_nav_bg {
  display: none;
}

/*--------------------------------------------
ページトップ（sp）
---------------------------------------------*/

.col_pagetop {
  position: fixed !important;
  right: 1em !important;
  bottom: 1em !important;
  width: 20vw;
  z-index: 5 !important;
}

@media screen and (max-width: 320px) {
  .note-list {
    letter-spacing: -0.16em;
  }
}
/*# sourceMappingURL=map/style.css.map */