@charset "UTF-8";

/* common上書き */
#main-box {
  width: 1200px;
  margin: 0 auto;
  float: initial;
  max-width: 100%;
}
#main-box div.pad {
  padding: 20px 20px 20px;
}
/* common上書き end */
.pc { display: block!important; }
.sp { display: none!important;}

br.pc { display: block; }
br.sp { display: none; }

.mt-20 { margin-top: 20px!important; }
.mt-40 { margin-top: 40px!important; }
.mb-20 { margin-bottom: 20px!important; }
.pb-40 { padding-bottom: 40px!important; }

.h-style img {
  width: 100%;
  height: auto;
}
.h-style2 {
  text-align: center;
  margin-top: 0.5em;
}
.h-style2.twi {
  margin-top: 0;
  margin-bottom: 5px;
}
.h-style3 {
  margin-bottom: 0.5rem;
  font-size: 1.1rem;
  background: none;
  position: relative;
  font-weight: bold;
}
.h-style4 {
  font-size: 1.3rem;
  font-weight: 600;
  padding-bottom: .5rem;
}
.h-style4::before {
  content: "";
  display: inline-block;
  background-image: url(../img/statue/ueki.png);
  width: 49px;
  height: 42px;
  background-repeat: no-repeat;
  vertical-align: bottom;
}
.h-style5 {
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 10px;
}
.pos-new::before {
  position: absolute;
  top: -26px;
  left: 0;
  content: "";
  display: inline-block;
  background-image: url(../img/icon_new.png);
  width: 69px;
  height: 21px;
}
.icon-popup::after {
  content: url(../img/icon_popup.png);
  margin-left: 0.5em;
}

.wrapper {
  width: 1120px;
  max-width: 100%;
  margin: 0 auto;
  color: #4e1c08;
}
.wrap {
  width: 1040px;
  max-width: 100%;
  margin: 0 auto!important;
}
.kv-box {
  display: flex;
  justify-content: center;
  position: relative;
}
.kv-box2 {
  text-align: center;
}
.kv-box2 img {
  width: 100%;
  max-width: 620px;
  height: auto;
}
.sns-nav {
  position: absolute;
  top: 12%;
  right: 0;
}
.sns-nav ul {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 340px;
}

/* アマビエ様SNS仕様 */
.amabie-sns .sns-nav {
  padding-top: 1rem;
  position: static;
}
.amabie-sns .sns-nav ul {
  display: flex;
  justify-content: center;
  flex-direction: row;
  height: 45px;
}
.amabie-sns .sns-nav li a {
  display: block;
  text-align: center;
  margin: 0 1rem;
}


.con-flex {
  display: flex;
  justify-content: space-between;
}
.container {
  background-image: url(../img/bg_con01.jpg);
  background-repeat: no-repeat;
  padding: 1.5em 2em 2em;
  border-radius: 20px;
}
.pos-bg1 {
  width: 670px;
}
.pos-bg2 {
  background-image: url(../img/bg_con02.jpg);
  background-repeat: no-repeat;
}
.pos-bg3 {
  background-image: url(../img/bg_con03.jpg);
  background-repeat: no-repeat;
}
.pos-bg4 {
  background-color: #fff;
  background-image: none;
}
.pos-bg5 {
  background-image: url(../img/statue/bg_paper02.png);
  width: 1040px;
  height: 730px;
  margin: 0 auto;
  position: relative;
}
.pos-bg5::after {
  content: "";
  background-image: url(../img/statue/bg_flower.png);
  display: inline-block;
  width: 1026px;
  height: 27px;
  background-repeat: repeat;
  position: absolute;
  bottom: -7px;
  left: 7px;
}
.contents-wrap {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}
/* .contents-wrap::after {
  content: "";
  display: block;
  width: 286px;
  height: 0;
} */

.con-wrap1 {
  justify-content: space-between;
}

.icon-sns {
  transition: all 0.3s ease 0s!important;
}
.icon-sns:hover {
  transform: scale(1.1, 1.1)!important;
}
.wrapper a {
  transition: all 0.3s ease 0s;
}
.wrapper a:hover {
  opacity: 0.7;
}
.contents-wrap a {
  padding: 1rem;
  color: #4e1c08;
  border: 1px solid #c7d2b6;
  box-shadow: 0px 5px 0px rgb(199, 210, 182);
  -webkit-box-shadow: 0px 5px 0px rgb(199, 210, 182);
  -moz-box-shadow: 0px 5px 0px rgb(199, 210, 182);
  text-decoration: none;
}
.contents-wrap a:hover {
  box-shadow: none;
  transform: translateY(5px);
}
.contents-box {
  background-image: url(../img/bg_paper.jpg);
  background-repeat: no-repeat;
  max-width: 286px;
  border-radius: 10px;
}
.contents-box.con-box1 {
  flex-basis: 31%;
  margin-bottom: 30px;
}
.contents-box.con-box1::after {
  content: "";
  display: block;
  max-width: 286px;
  flex-basis: 31%;
  height: 0;
}
.contents-box-empty {
  flex-basis: 31%;
  max-width: 286px;
}
.box2 {
  background-color: #fff;
  background-image: none;
}
.contents-box .box-img {
  display: block;
  margin-bottom: 2rem;
  width: 100%;
  height: auto;
  border-radius: 10px;
  border: 1px solid #c7d2b6;
}
.pos-txt {
  width: 85%;
  position: relative;
}
.pos-txt::after {
  position: absolute;
  content: "";
  display: inline-block;
}
.pos-img1::after {
  background-image: url(../img/posbear_b.png);
  top: -12px;
  right: -73px;
  width: 68px;
  height: 88px;
}
.pos-img2::after {
  background-image: url(../img/posbear_w.png);
  top: -12px;
  right: -73px;
  width: 68px;
  height: 88px
}
.pos-img3::after {
  background-image: url(../img/posbear_p.png);
  top: 0;
  right: -75px;
  width: 67px;
  height: 83px
}
.pos-img4::after {
  background-image: url(../img/poskoala.png);
  top: 0;
  right: -76px;
  width: 75px;
  height: 82px
}
.pos-img5::after {
  background-image: url(../img/posowl.png);
  top: 0;
  right: -82px;
  width: 82px;
  height: 78px
}
.pos-img6::after {
  background-image: url(../img/poskoguma.png);
  top: 5px;
  right: -72px;
  width: 69px;
  height: 85px
}
.pos-img7::after {
  background-image: url(../img/posbear_m.png);
  top: 5px;
  right: -72px;
  width: 69px;
  height: 85px
}
.pos-txt p {
  margin: auto!important;
}
.pos-btn {
  text-align: center;
  padding: 1.5rem 0;
}
.pos-btn a {
  display: inline-block;
}
.pos-btn a:hover {
  transform: translateY(5px);
}
img.shadow{
  filter: drop-shadow(1px 7px 0px rgb(207, 97, 97));
  -webkit-filter: drop-shadow(1px 7px 0px rgb(207, 97, 97));
  -moz-filter: drop-shadow(1px 7px 0px rgb(207, 97, 97));
  transition: all 0.3s ease 0s;
}
.shadow:hover {
  filter: none;
}
.page-top {
  text-align: right;
}
.twitter-wrap {
  width: 300px;
  margin: 0 auto;
}
.posi {
  position: relative;
  top: -6rem;
  left: 0;
  height: 730px;
  z-index: -1;
}

img.img-dozo {
  width: 100%;
  max-width: 217px;
  height: auto;
  position: absolute;
  top: 3rem;
  left: 2rem;
  z-index: 1;
}
img.img-text {
  width: 100%;
  max-width: 713px;
  height: auto;
  position: absolute;
  top: 7rem;
  right: 4rem;
}
.access {
  width: 800px;
  padding: 2rem 0 2rem 5.5rem;
  background-color: #fff;
  position: absolute;
  bottom: 100px;
  right: 4rem;
}
.access-txt {
  font-size: 1.2rem;
  line-height: 1.5;
  color: #030303;
}
.access-txt span {
  display: block;
  font-size: 1rem;
}
span.yohaku {
  display: inline-block;
}
.amabie-subtitle {
  position: relative;
  margin-left: 1.2rem;
}
.amabie-subtitle::before {
  position: absolute;
  display: inline-block;
  width: 20px;
  top: 0;
  left: -1.5rem;
  height: 100%;
  content: "";
  background-image: url(/kitte/collection/special/10/img/title_left_dec.png);
  background-repeat: no-repeat;
}
.amabie-subtitle::after {
  position: absolute;
  display: inline-block;
  width: 20px;
  top: 0;
  right: -1.5rem;
  height: 100%;
  content: "";
  background-image: url(/kitte/collection/special/10/img/title_right_dec.png);
  background-repeat: no-repeat;
}

@media screen and (max-width: 1024px) {
  .con-flex {
    display: block;
  }
  .pos-bg1 {
    margin-bottom: 1.5rem;
    width: 100%;
    background-size: cover;
  }
  .pos-bg2 {
    background-size: cover;
  }
  .con-wrap1 {
    justify-content: space-around;
  }
}
@media screen and (max-width: 896px) {
  .kv-box {
    display: block;
  }
  .sns-nav {
    position: static;
  }
  .sns-nav ul {
    flex-direction: row;
    justify-content: space-around;
    height: 50px;
    padding-top: 1.5rem;
  }
  .pos-img3::after {
    top: 70px;
    right: -52px;
  }
  .pos-img4::after {
    top: 62px;
    right: -62px;
  }
  .pos-img5::after {
  top: 60px;
  }
  .pos-img6::after {
    top: 50px;
    right: -64px;
  }
  .pos-img7::after {
    top: 50px;
    right: -62px;
  }
  .twitter-wrap {
    overflow: hidden;
  }
  .twitter-wrap iframe{
    width: calc(100vw - 20px)!important;
  }
}