@charset "utf-8";

* {
  margin: 0px;
  padding: 0px;
  text-decoration: none;
  list-style-type: none;
}

div {
  line-height: 1em;
  vertical-align: middle;
}

img {
  max-width: 100%;
}

a img:hover {
  opacity: 0.7;
}

html {
  font-size: 16px;
}

body {
  font-family: "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
  /*background:url(../images/bgimg.jpg) center top;*/
  overflow-x: hidden;
  z-index: 0;
  position: relative;
  line-height: 0;
}

.meiryo {
  font-family: "メイリオ";
}

.yugothic {
  font-family: "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体";
}

.kakugo {
  "ヒラギノ角ゴ Pro W3";
}

/*
.maintitle img{
  opacity: 0;
  animation-name: bounce;
  animation-duration: 2s;
  animation-delay: 1s;
  animation-fill-mode: forwards;
  display: inline-block;
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
}*/
.maintitle img {
  opacity: 0;
  animation-name: blur;
  animation-duration: 2s;
  animation-delay: 2s;
  animation-fill-mode: forwards;
  display: inline-block;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.header_text {
  position: absolute;
  top: 5%;
  left: 3%;
  width: 63%;
  z-index: 1001;
  pointer-events: none;
}

.header_chara {
  position: absolute;
  bottom: 0;
  right: 1%;
  width: 65%;
  z-index: 1000;
  pointer-events: none;
}

.header_chara_multiply {
  position: absolute;
  bottom: 0;
  right: 0%;
  width: 65%;
  z-index: 999;
  pointer-events: none;
  mix-blend-mode: multiply;
}

/*
.anim-balloon {
　　animation: anim-rotate 2s ease-out 2s infinite;
　　transform-origin: 0 40%;
}

.bounce {
  -webkit-animation-name: bounce;
  animation-name: bounce;
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
}
@keyframes bounce{
  0% {
    transform: scale(1,1);
    opacity: 0;
     filter: blur(0px);
   }
   30% {
     transform: scale(1,1);
     opacity: 0;
     filter: blur(0px);
   }
   40% {
     transform: scale(1.5,1.5);
     opacity: 1;
      filter: blur(10px);
    }
    50% {
      transform: scale(1,1);
      opacity: 1;
      filter: blur(0px);
    }
   100% {
     transform: scale(1,1);
     opacity: 1;
     filter: blur(0px);
   }
}
*/
@keyframes blur {
  0% {
    transform: translate(0, 0);
    opacity: 0;
    filter: blur(30px);
  }

  100% {
    transform: translate(0, 0);
    opacity: 1;
    filter: blur(0px);
  }
}

/*------------nav--------------*/
#head {
  position: sticky;
  top: 0%;
  z-index: 1000;
  line-height: 0;
}

#foot {
  line-height: 0;
}

#online #headerpc {
  background: #a5ade2;
}

#headerpc {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: space-between;
  justify-content: flex-start;
  background: #ff8cb2;
  font-family: dnp-shuei-mgothic-std, sans-serif;
  font-weight: 400;
  font-style: normal;
  position: sticky;
  top: 0%;
  z-index: 1000;
}

#header_sp {
  font-family: dnp-shuei-mgothic-std, sans-serif;
  font-weight: 400;
  font-style: normal;
  display: none;
}

#online #header_sp {
  background-color: rgba(165, 173, 226, .5);
}

#header_sp {
  display: none;
  background-color: rgba(255, 140, 178, .5);
  z-index: 110;
  position: fixed;
  right: 0%;
  top: 3%;
  width: 170px;
  padding: 10% 0;
}

#header_sp .nav {
  width: 100%
}

#header_sp .nav ul {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: flex-start;
  justify-content: flex-end;
  width: 100%;
  height: auto;
  text-align: center;
}

#header_sp .nav ul li {
  line-height: 2em;
  vertical-align: middle;
  width: 100%;
}

#header_sp .nav ul li a {
  color: #fff;
  font-size: 0.8em;
  text-align: center;
  display: block;
}

#header_sp .logo {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 70px 0 0 0;
}

#header_sp .logo img {
  width: auto;
}

.logo {
  display: block;
  width: 100px;
}

.logo a img {
  min-width: 50px;
  width: 100%;
  margin: 1% 5%;
}

.nav {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin: 0 auto;
}

.nav .nav_right {
  width: 70%;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.nav .nav_right ul li.back:hover {
  background: #f2dadd;
  border-radius: 10px;
}

.nav .nav_right ul {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: space-around;
  justify-content: space-around;
  list-style-type: none;
}

.nav .nav_right ul li {
  vertical-align: middle;
  display: flex;
  align-items: center;
  transition-duration: 0.5s;
}

.nav .nav_right ul li a {
  display: block;
  text-decoration: none;
  color: #fff;
  transition-duration: 0.5s;
  padding: 20px 10px;
  border-radius: 10px;
  text-align: center;
}

.sns {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin: 0 2%;
  width: 10%;
  min-width: 60px;
}

.sns a {
  width: 45%;
  margin: 0 1%;
}

.header {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 100;
}

.slash {
  pointer-events: none;
}

.nav_right ul li a:hover {
  background-color: #ff619e;
}

#online .nav_right ul li a:hover {
  background-color: #8090dd;
}

@media screen and (max-width:966px) {
  #header {
    /*    display: none;*/
  }

  #headerpc .nav_right {
    display: none;
  }

  .sns {
    margin: 0 2%;
    width: 15%;
  }

  #header_sp .sns a {
    width: 20%;
  }

  #header_sp .nav {}

  .menu-trigger,
  .menu-trigger span {
    display: inline-block;
    transition: all .2s;
    box-sizing: border-box;
    z-index: 130;
  }

  .menu-trigger {
    position: relative;
    /*top: 25%;
    right: 4%;*/
    width: 65px;
    height: 44px;
    padding: 20px;
    background-color: rgba(255, 255, 255, 0.7);
  }

  .menu-trigger span {
    position: absolute;
    left: 10px;
    width: 70%;
    height: 4px;
    background-color: #808080;
    border-radius: 4px;
  }

  .menu-trigger span:nth-of-type(1) {
    top: 10px;
  }

  .menu-trigger span:nth-of-type(2) {
    top: 20px;
  }

  .menu-trigger span:nth-of-type(3) {
    bottom: 10px;
  }
}

@media screen and (max-width:600px) {
  .nav_box ul li {
    width: 90%;
    margin: 10px 0px;
  }

  .logo {
    width: 20%;
  }

  .close {
    display: none;
  }
}

@media screen and (max-width:532px) {
  #header_sp {
    /*  top: 6%;*/
  }
}

.opacity:hover {
  opacity: 0.7;
}

.dot,
.navcont {
  /*position: relative;
  display: block;

  margin: 15px auto;
*/
}

.dot::after {
  /*  position: absolute;
  bottom: -4px;
  left: 0;
  content: '';
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, rgba(255, 126, 198, 1) 20.8125%, rgba(255, 126, 198, 1) 20.5625%, rgba(182, 65, 179, 1) 52.4375%, rgba(1, 254, 208, 1) 80.5625%);
  transform: scale(0, 1);
  transform-origin: left top;
  transition: transform .3s;
  z-index: 9999;*/
}

.dot:hover::after {
  /*  transform: scale(1, 1);*/
}

/*-----nav-------------------------------------*/
/*-----wrapper-------------------------------------*/
#wrapper {
  z-index: 0;
  height: auto;
  background-color: #fff;
  width: 100%;
  margin: 0 auto;
  position: relative;
}

.header {
  margin: 0 0 0 0;
  position: relative;
  width: 100%;
  height: auto;
}

.header_bg img {
  width: 100%;
  position: relative;
}

.shop_flex {
  position: absolute;
  bottom: 3%;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.shop_flex a {
  width: 40%;
}

.shop_flex a img {
  width: 100%;
}

.mainlogo,
.logoback {
  position: absolute;
}

.mainlogo img,
.logoback img {
  width: 100%;
  height: auto;
  position: absolute;
}

.mainlogo {
  width: 54.5%;
  z-index: 10;
  top: 47.5%;
  left: 42%;
  /*transform: translate(-50%, 0);*/
  animation-delay: 0.5s;
}

.logoback {
  width: 100%;
  z-index: 9;
  top: 16%;
  left: 3%;
}

@keyframes fuwafuwa {
  0% {
    transform: translate(0, 0);
  }

  50% {
    transform: translate(0, -10%);
  }

  100% {
    transform: translate(0, 0);
  }
}

.fuwafuwa {
  animation: fuwafuwa 3s ease infinite normal none running;
}

.float1 {
  position: absolute;
  top: 48%;
  left: 8%;
  width: 12%;
  animation-delay: 0s;
}

.float2 {
  position: absolute;
  top: 43%;
  left: 79%;
  width: 15%;
  animation-delay: 0.5s;
}

.float3 {
  position: absolute;
  top: 73%;
  left: 88%;
  width: 9%;
  animation-delay: 0.2s;
}

.float4 {
  position: absolute;
  top: 74%;
  left: 12%;
  width: 6%;
  animation-delay: 0.3s;
}

.float5 {
  position: absolute;
  top: 79%;
  left: 77%;
  width: 6%;
  animation-delay: 0.1s;
}

.float6 {
  position: absolute;
  top: 83%;
  left: 50%;
  transform: translateX(-50%);
  width: 37%;
  animation-delay: 0.5s;
}

/*-----wrapper-------------------------------------*/
/*-----conts-------------------------------------*/
.conts {
  position: relative;
  width: 100%;
  padding: 100px 0;
  box-sizing: border-box;
  margin: -100px 0;
  background: #fffafa;
}

.btn {
  position: absolute;
}

.btn:hover {
  opacity: 0.7;
}

.btn img {
  width: 100%;
}

.interview_box a img {
  width: 100%;
}

img.main {
  width: 100%;
}

#event {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

#event .title {
  margin: 0 0 3% 0;
}

.pop_image {
  width: 45%;
  position: relative;
}

.pop_image a {
  position: relative;
  display: block;
}

.zoom {
  position: absolute;
  right: -3%;
  bottom: 2%;
  width: 20%;
}

#event .text-box {
  position: relative;
  margin: 0%;
  padding: 0 2%;
  text-align: left;
  width: 50%;
  color: #666666;
  font-family: dnp-shuei-mgothic-std, sans-serif;
  font-weight: 400;
  font-style: normal;
  box-sizing: border-box;
  line-height: 1em;
}

#online #event .text-box h2,
#online #event .text-box h3,
#online #event .text-box a.entry {
  background: #8090dd;
}

#event .text-box h2 {
  background: #FF6496;
  color: #fff;
  margin: 0;
  text-align: center;
  padding: 10px 0;
  font-size: 1em;
  letter-spacing: 0.3em;
}

#event .text-box h2 img {
  width: 100%;
}

#event .text-box h3 {
  color: #fff;
  margin: 3% 0;
  padding: 14px 5%;
  font-size: 2vw;
  letter-spacing: 0.3em;
  background: #FF6496;
  background-size: 3%;
  width: 46%;
  text-align: center;
  display: inline-block;
}

#event .text-box p {
  font-size: 80%;
  line-height: 1.6em;
  font-size: 1.6vw;
}

#event .text-box iframe {
  width: 100%;
  margin: 2% auto;
}

#event .text-box a.entry {
  text-decoration: none;
  background: #FF6496;
  color: #fff;
  font-size: 2vw;
  line-height: 1.4em;
  padding: 10px;
  margin: 2% auto;
  display: block;
  text-align: center;
}

#event .text-box .opentime p:nth-child(2) {
  font-size: 1.3vw;
  margin-bottom: 1em;
}

#event .text-box .opentime p:nth-child(7) {
  font-size: 1.3vw;
  margin-top: 1em;
}

.entry_notice {
  margin-bottom: 3%;
}

#event .entry_notice p {
  font-size: 1.2vw;
}

#event .entry_notice a {
  color: #ff6496;
}

#event .entry_notice a::after {
  color: #a183d1;
}

.border_dot {
  width: 100%;
  margin: 4% auto;
  height: 1px;
  border-bottom: 10px dotted #ff598b;
}

#sign .text-box {
  position: relative;
  margin: 0% auto;
  padding: 5% 2%;
  text-align: left;
  width: 100%;
  background: #FFFFF8;
  color: #666666;
  border: 2px solid #FF6496;
  font-family: dnp-shuei-mgothic-std, sans-serif;
  font-weight: 400;
  font-style: normal;
  box-sizing: border-box;
}

#sign .text-box h2 {
  background: #FF6496;
  color: #fff;
  margin: 0;
  padding: 10px 0;
  font-size: 2em;
  letter-spacing: 0.3em;
}

#sign .text-box h2 img {
  width: 100%;
}

#sign .text-box h3 {
  color: #fff;
  margin: 3% auto 1%;
  padding: 14px 5%;
  font-size: 2vw;
  letter-spacing: 0.3em;
  background: #FF6496 url(../images/header_icon.png) no-repeat 1% center;
  background-size: 3%;
  border-radius: 8px;
}

#sign .text-box h3::before {
  /*content: url(../images/header_icon.png);
*/
}

#sign .text-box h2 span {
  display: inline-block;
}

#sign .text-box p {
  font-size: 1.6vw;
  line-height: 1.6em;
}

#sign .text-box span.small {
  font-size: 0.8em;
  line-height: 1.6em;
}

#sign .text-box span.pink {
  color: #ff0073;
}

#sign .text-box p.big {
  font-size: 1.8em;
}

#sign .text-box p.caution {
  font-size: 1.4em;
  line-height: 1.6em;
  text-align: left;
}

#event .text-box p.Benefit_text {
  margin: 0.5rem auto 1.8rem;
  word-break: break-all;
}

p.Benefit_text span {
  color: #e30086;
  font-weight: bold;
}

.schedulewrap {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  flex-wrap: wrap;
  font-size: 1.6vw;
}

.schedulewrap div {
  display: inline-block;
  padding: 5px;
}

.schedulewrap div.scheduletitle {
  width: 16%;
  background: #ffd3e1;
  color: #ff3e78;
  text-align: center;
  margin: 0 20px 20px 0;
  font-weight: bold;
}

.schedulewrap div.scheduledata {
  width: 69%;
}

html.modalset {
  overflow: hidden;
}

.attention {
  margin: 2% auto;
  background: #e20013;
  color: #fff;
  width: 80%;
  display: block;
  font-size: 3vw;
  line-height: 1em;
  padding: 2%;
  text-align: center;
  letter-spacing: 0.1em;
  border-radius: 10px;
  cursor: pointer;
}

.attention.attention_end {
  background-color: #8a8a8a;
  cursor: auto;
}

.samplemodal {
  display: none;
  width: 100%;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9999;
}

.samplemodal-wrap {
  width: 100%;
  height: 100%;
  text-align: center;
  padding: 20px 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: none;
  overflow: -moz-scrollbars-none;
}

.samplemodal-wrap::-webkit-scrollbar {
  display: none;
}

.samplemodal-wrap:after {
  content: '';
  display: inline-block;
  vertical-align: middle;
  width: 1px;
  height: 100%;
}

.samplemodal-bg {
  position: absolute;
  left: 0;
  top: 0;
  background: rgba(51, 51, 51, 0.8);
  width: 100%;
  height: 100%;
}

.samplemodal-box {
  width: 90%;
  max-width: 900px;
  display: inline-block;
  vertical-align: middle;
  position: relative;
}

.samplemodal-box .inner {
  background: #fff;
  padding: 80px 20px;
  text-align: left;
  word-break: normal;
}

.samplemodal-box .inner p {
  overflow-wrap: break-word;
}

.samplemodal-box .inner> :first-child {
  margin-top: 0;
}

.samplemodal-close {
  position: absolute;
  top: -10px;
  left: -10px;
  width: 10%;
}

.goods {
  margin: 0 0 0 0;
  width: 100%;
  position: relative;
  width: 100%;
  height: auto;
  background-image: url(../images/goods.png);
  background-repeat: no-repeat;
  background-size: contain;
}

.goods_flex {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: 18%;
  position: absolute;
}

.goods_flex a {
  width: 100%;
  margin: 0 0 7% 0;
}

.goods_flex img {
  width: 100%;
}
.goods_list{
  margin: 2% auto;
  width: 80%;
}
#online .goods_list{
}
.goods_list a,
.goods_list a img{
width: 100%;
}

.goods_list a:hover{
  opacity: 0.7;
}
.mada {
  pointer-events: none;
  opacity: 0.5;
}
/*------display------*/
.display_image{
  width: 90%;
  margin: 0 auto 5%;
  position: relative;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.display_image a{
  width: 47%;
  margin: 1%;
}
#display p{
  font-size: 2.8vw;
  margin: 3% auto;
  text-align: center;
  color: #ff6496;
  font-weight: bold;
  font-family: dnp-shuei-mgothic-std, sans-serif;
}
.display_image a img{
  width: 100%;
}
/* safari */
/* Safari 7.1+ (9.0 is the latest version of Safari at this time) */
_::-webkit-full-page-media,
_:future,
:root .lb_anker {
  color: #fff;
  background-color: #F1307F;
  border-radius: 15px;
  text-decoration: none;
  position: relative;
  top: -23px;
  padding: 0 10px;
}

.twitter {
  position: absolute;
  bottom: 1%;
  right: 4%;
  width: 25%;
}

.map_btn {
  position: absolute;
  top: 31%;
  left: 8%;
  width: 17%;
}

.access_link iframe {
  position: absolute;
  top: 35.6%;
  left: 7.0%;
  width: 35.1%;
  height: 45%;
  box-shadow: 1px 0px 7px #000;
}

.free_entry_btn {
  top: 20%;
  left: 50%;
  transform: translateX(-50%);
  width: 54%;
}
/*==================================================
スライダーのためのcss
===================================*/

#interview{
  background: #fceef4;
}
#online #interview{
  background: #fceef4;
}
.gallery_container{
  max-width: 1000px;
  width: 95%;
  margin: 3% auto;
}
.goods_gallery_container{
  width: 50%;
  margin: 0% auto;
}
/*画像の横幅を100%にしてレスポンシブ化*/
img{
  width: 100%;
  height: auto;
  vertical-align: bottom;/*画像の下にできる余白を削除*/
}

/*メイン画像下に余白をつける*/

.gallery{
  margin:5% auto;
  width: 50%;
}
.goods_gallery_container .gallery{
  width: 100%;
  margin: 0% auto;
}
/*矢印の設定*/

/*戻る、次へ矢印の位置*/
.slick-prev,
.slick-next {
  font-size: 0;
  line-height: 0;
  position: absolute;
  top: 50%;
  display: block;
  width: 15%;
  height: 15%;
  padding: 0;
  -webkit-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  transform: translate(0, -50%);
  cursor: pointer;
  color: transparent;
  border: none;
  outline: none;
  background: transparent;
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 100;
}

.slick-prev {/*戻る矢印の位置と形状*/
    left: -20.5%;
    /*transform: rotate(-135deg);*/
    background-image: url(../images/interview_prev.png);
}

.slick-next {/*次へ矢印の位置と形状*/
    right: -20.5%;
  /*  transform: rotate(45deg);*/
      background-image: url(../images/interview_next.png);
}

.goods_gallery_container .slick-prev,
.goods_gallery_container .slick-next{
  opacity: 0.5;}

.goods_gallery_container .slick-prev{
  left: 0%;
}
.goods_gallery_container .slick-next{
  right: 0%;
}


.slick-prev:hover,
.slick-next:hover{
  opacity:0.7;
 }
/*選択するサムネイル画像の設定*/
ul.choice-btn{
/*  display: flex;
  justify-content: center;
  flex-wrap: wrap;
*/
}
.choice-btn li{
  cursor: pointer;
      outline: none;
      background: #ff82aa;
      width: 7.5%!important;
      /* height: 7%; */
      color: #fff;
      text-align: center;
      padding: 3% 0;
      box-sizing: border-box;
      margin: 1.5% 2.4%;
      border-radius: 10px;
      font-family: dnp-shuei-mgothic-std, sans-serif;
      font-weight: 400;
}
.goods_gallery_container .choice-btn li{
      background: unset;
      margin: 0;
}

.choice-btn li{
  opacity: 0.4;/*選択されていないものは透過40%*/
}

.choice-btn li.slick-current{
  opacity: 1;/*選択されているものは透過しない*/
}
.goods_gallery_container .slick-track{

}
.goods_gallery_container .choice-btn li{
  width: 45%!important;
}
@media screen and (max-width:900px) {
  .goods_gallery_container{
    width: 80%;
    margin: 3% auto;
  }
  .gallery{
    width: 80%;
  }
  .choice-btn li {
    width: 13.5%!important;
    padding: 5% 0;
    margin: 1.5% 1.4%;
}
.slick-prev {/*戻る矢印の位置と形状*/
    left: -16.5%;

}

.slick-next {/*次へ矢印の位置と形状*/
    right: -16.5%;
}
}
/*-----------------news---------------------*/
.subheader,
.subheader img {
  width: 100%;
}

.news_container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  width: 80%;
  margin: 0 auto;
  flex-wrap: wrap;
}

.news_topic {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: 44%;
  margin: 3%;
}

.topic_banner {
  width: 100%;
}

.news_sub {
  width: 20%;
  margin: 3% 0 3% 5%;
}

.news_topic p {
  font-size: 1vw;
  line-height: 1.5em;
  margin: 2% 0 0 5%;
  font-weight: bold;
  color: #808080;
  min-height: 1vw;
}

.news_topic p.day {
  align-self: flex-end;
}

.news_topic a:hover {
  opacity: 0.7;
}

.andmore {
  width: 10%;
  margin: 2% auto;
}

.andmore img {
  width: 100%;
}

@media screen and (max-width:700px) {
  main {
    padding: 0;
    width: 100%;
    margin: 0 auto;
  }

  .news_container {
    width: 90%;
    margin: 2% auto;
  }

  .news_topic {
    width: 48%;
    margin: 1%;
  }

  .news_topic p {
    font-size: 3vw;
    line-height: 1.5em;
    margin: 2% 0 0 5%;
    font-weight: bold;
    color: #808080;
    min-height: 1vw;
  }
}

/*追加分-------------------------------*/
.news_container {
  justify-content: space-between;
  margin: 30px auto;
}

.news_topic {
  line-height: 1.2rem;
  width: calc(50% - 20px);
  display: unset;
  flex-direction: unset;
  justify-content: unset;
  margin: 0;
}

.news_topic span {
  display: inline-block;
  color: #fff;
  background-color: #ff98a2;
  padding: 5px 12px;
  border-radius: 30px;
  margin: 10px 10px 10px 0;
  min-width: 30%;
  text-align: center;
}

.news_container.online .news_topic span {
  background-color: #5f87c4;
}

.news_topic h1 {
  font-size: 2rem;
  line-height: 2.5rem;
  position: relative;
  padding-bottom: 7px;
}

.news_topic h1:after {
  border-bottom: dotted 4px #ff98a2;
  content: "";
  width: 100%;
  height: 20px;
  position: absolute;
  left: 0;
  bottom: 0;
}

.news_container.online .news_topic h1:after {
  border-bottom: dotted 4px #5f87c4;
}

.news_topic p {
  margin: 10px 0 30px !important;
}

.itemwrap {
  width: 100%;
  margin-bottom: 6px;
  position: relative;
}

.itemwrap>div {
  display: inline-block;
  color: #fa5684;
  font-weight: bold;
}

.news_container.online .itemwrap>div {
  color: #5f87c4;
}

.itemtitle {
  width: 30%;
  box-sizing: border-box;
  padding: 10px 0;
  background: #ffecee;
  text-align: center;
  vertical-align: top;
}

.news_container.online .itemtitle {
  background: #e7eaf6;
}

.news_topic img {
  border: solid 1px #c8c8c8;
}

.productLink {
  word-break: keep-all;
  width: 70%;
  text-align: center;
  background: #5ab973;
  height: 41px;
  box-sizing: border-box;
  font-size: 1.5vh;
  margin: 3% 0 0 auto;
  transition: .3s;
  line-height: 1rem;
}

.productLink a {
  color: white;
  text-decoration: none;
  display: block;
  width: 100%;
  height: 100%;
  padding: 15px 10px;
  box-sizing: border-box;
  font-size: 1.5em;
  font-weight: bold;
}

.reservation_campaign {
  width: 60%;
  margin: 1% 0;
  display: block;
}

.reservation_campaign img {
  width: 100%;
}

.productLink:hover,
.goods_back a:hover {
  opacity: .7;
}

.goods_back a {
  overflow: hidden;
  background: #ff98a2;
  color: white;
  text-decoration: none;
  width: 30%;
  height: 40px;
  padding: 2%;
  display: block;
  text-align: center;
  font-size: 2.5vw;
  line-height: 0.5vw;
  margin: 20px auto;
  box-sizing: border-box;
  transition: .3s;
}

.goods_back.online a {
  background: #5f87c4;
}

.itemdeta {
  width: calc(68% - 20px);
  margin-left: 2%;
  font-size: 1.1rem;
  line-height: 1.5;
}

div.itemdeta:empty {
  /*中身が空の要素を.itemtitleごと見えなくする*/
  position: absolute;
  width: 100%;
  top: 0;
  left: -2%;
  height: 100%;
  background: #fff;
}

.swiper-container {
  max-width: 800px;
}

.swiper-wrapper {
  margin: auto;
}

div.swiper-wrapper div.swiper-slide a {
  margin: auto;
  width: 85%;
  max-width: 632px;
}

.swiper-button-next,
.swiper-container-rtl .swiper-button-prev {
  right: 1%;
}

.swiper-button-prev,
.swiper-container-rtl .swiper-button-next {
  left: 1%;
}

/**/
ul.top_container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 80%;
  margin: 0 auto;
  flex-wrap: wrap;
  padding: 2rem 0;
}

/* 最後のコンテンツを左寄せにする指定 */
ul.top_container:after {
  content: "";
  display: block;
  width: 32%;
  /* .boxに指定したwidthと同じ幅を指定する */
  height: 0;
}

li.boods_topic {
  padding: 5px;
  box-sizing: border-box;
  width: calc(100% / 3.15);
  margin-bottom: 30px;
  display: flex;
  align-items: flex-start;
}

li.boods_topic img {
  display: block;
  width: 100%;
  border: solid 1px #c8c8c8;
  box-sizing: border-box;
}

li.boods_topic a {
  text-decoration: none;
  color: #2c2c2c;
  line-height: 1.5rem;
  font-size: 1.2rem;
}

.boods_topic img,
.boods_topic p {
  transition: .3s;
  min-height: 1em;
}

p.subtitle {
  display: inline-block;
  width: 100%;
}

.boods_topic:hover img,
.boods_topic:hover p {
  opacity: .7;
  color: #ff98a2;
}

#online .boods_topic:hover img,
#online .boods_topic:hover p {
  color: #5f87c4;
}

li.boods_topic span {
  display: inline-block;
  color: #fff;
  background-color: #2684bc;
  padding: 5px 12px;
  border-radius: 30px;
  margin: 10px 10px 10px 0;
  width: auto;
  text-align: center;
  min-width: 45%;
}

.boods_topic p.day {
  text-align: right;
  margin-top: 5px;
  color: gray;
  display: none;
  /* 日付を消しています */
}

.boods_topic p.price {
  text-align: right;
  margin-top: 5px;
  color: gray;
}

.boods_topic p.price::after {
  content: "円(税込)";
}

li.boods_topic span.fair {
  background-color: #2684bc;
}

#goods li.boods_topic span,
li.boods_topic span.goods {
  background-color: #ff98a2;
}

#goods li.boods_topic.boods_topic_online span,
li.boods_topic.boods_topic_online span.goods {
  background-color: #5f87c4;
}

#books .news_topic span,
#books .boods_topic span,
li.boods_topic span.books {
  background-color: #2f7c77;
}

#books .news_topic h1:after {
  border-bottom: dotted 4px #a7d8b9;
}

#books .news_topic .itemwrap>div {
  color: #298c49;
}

#books .itemtitle,
#books .goods_back a {
  background: #a7d8b9;
}

#music .news_topic span,
#music .boods_topic span,
li.boods_topic span.music {
  background-color: #f5c659;
}

#music .news_topic h1:after {
  border-bottom: dotted 4px #f5c659;
}

#music .news_topic .itemwrap>div {
  color: #e9502b;
}

#music .itemtitle,
#music .goods_back a {
  background: #f5c659;
}

#disc .news_topic span,
#disc .boods_topic span,
li.boods_topic span.disc {
  background-color: #2cb8c1;
}

#disc .news_topic h1:after {
  border-bottom: dotted 4px #2cb8c1;
}

#disc .news_topic .itemwrap>div {
  color: #1b5c83;
}

#disc .itemtitle,
#disc .goods_back a {
  background: #2cb8c1;
}

#event .news_topic span,
#event .boods_topic span,
li.boods_topic span.event,
#event .fair_topic span,
#event .fairtitle,
#event .fair_back a {
  background-color: #ff3c70;
}

#event .news_topic h1:after {
  border-bottom: dotted 4px #ff3c70;
}

#event .news_topic .itemwrap>div {
  color: #fff;
}

#event .itemtitle,
#event .goods_back a {
  background: #ff3c70;
}

@media screen and (max-width: 800px) {
  li.boods_topic {
    width: calc(50% - 5px);
    margin-bottom: 15px;
    padding: 0;
  }

  li.boods_topic span,
  .boods_topic p {
    font-size: 1.5vw;
    margin-bottom: -.7rem;
  }

  li.boods_topic span {
    font-size: 1.5vw;
    padding: 0px 10%;
    box-sizing: border-box;
    overflow: hidden;
    margin: .5rem 0 -.5rem;
    line-height: 1.2rem;
  }

  .boods_topic p.day {
    margin: 0;
  }

  .boods_topic p.price {
    margin: 0;
  }
}

/**/
@media screen and (max-width: 800px) {
  .news_topic {
    width: 100% !important;
    margin: 3% 0 0 !important;
  }

  .news_topic p {
    font-size: 2vw;
  }

  .goods_back a {
    width: 80%;
  }

  .news_topic span {
    display: inline-block;
    color: #fff;
    background-color: #ff98a2;
    border-radius: 30px;
    margin: 10px 10px 10px 0;
    min-width: 30%;
    text-align: center;
    padding: 2% 0%;
    font-size: 2vw;
    line-height: 1rem;
  }

  .news_topic h1 {
    font-size: 5vw;
    line-height: 6.5vw;
  }

  .goods_back a {
    width: 40%;
    padding: 15px 0;
    height: 30px;
  }

  .goods_back {
    margin-top: 30px;
  }

  .itemdeta {
    font-size: 2.1vw;
  }

  .fairdeta {
    font-size: 2.1vw;
  }
}

/*フェア記事用追加分-------------------------------*/
/*#fair a{
  transition: .3s;
}*/
#fair a:hover {
  opacity: 0.7;
}

.fair_container {
  justify-content: space-evenly;
  margin: 30px auto;
}

.fair_container {
  display: flex;
  flex-direction: row;
  width: 80%;
  flex-wrap: wrap;
}

.fair_topic {
  line-height: 1.2rem;
  width: calc(50% - 5%);
  display: unset;
  flex-direction: unset;
  justify-content: unset;
  margin: 0;
}

.fair_topic span {
  display: inline-block;
  color: #fff;
  background-color: #2684bc;
  padding: 5px 12px;
  border-radius: 30px;
  margin: 10px 10px 10px 0;
  width: 45%;
  text-align: center;
}

.fair_topic h1 {
  font-size: 2rem;
  line-height: 2.5rem;
  position: relative;
  padding-bottom: 7px;
}

.fair_topic h1:after {
  border-bottom: dotted 4px #2684bc;
  content: "";
  width: 100%;
  height: 20px;
  position: absolute;
  left: 0;
  bottom: 0;
}

.fair_topic p {
  margin: 10px 0 30px !important;
}

.fair_back a {
  overflow: hidden;
  background: #2684bc;
  color: white;
  text-decoration: none;
  width: 30%;
  height: 40px;
  padding: 2%;
  display: block;
  text-align: center;
  font-size: 2.5vw;
  margin: 20px auto;
  box-sizing: border-box;
}

.fair_topic img[src*="/fair"] {
  border: solid 1px #c8c8c8;
}

.fairwrap {
  width: 100%;
  margin-bottom: 6px;
}

.fairwrap>div {
  display: inline-block;
  font-weight: bold;
}

.fairtitle {
  width: 30%;
  box-sizing: border-box;
  padding: 10px 0;
  color: #fff;
  background: #2684bc;
  font-weight: bold;
  text-align: center;
}

.fairdeta {
  padding: 1vw 0;
  margin-left: 2%;
  font-size: 1.1rem;
  line-height: 1.5rem;
  color: #696969;
}

.fair01 {
  padding: 7%;
}

.fair01_zoom {
  width: 10%;
  position: absolute;
  margin: -6% 0% 0% 24%;
}

.fair01_zoom img {
  width: 80%;
  max-width: 100%;
}

@media screen and (max-width: 800px) {
  .fair_container {
    width: 90%;
    margin: 2% auto;
  }

  .fair_topic {
    width: 100% !important;
    margin: 3% 0 0 !important;
  }

  .fair_topic h1 {
    font-size: 5vw;
    line-height: 6.5vw;
  }

  .fair_back {
    margin-top: 30px;
  }

  .fair_back a {
    width: 40%;
    padding: 15px 0;
    height: 30px;
  }

  .fairdeta {
    line-height: 6vw;
    font-size: 4vw;
    margin-left: 2%;
  }

  .fair01_zoom {
    width: 25%;
    position: absolute;
    margin: -15% 0% 0% 60%;
  }
}

/*-----conts-------------------------------------*/
/*-----footer-------------------------------------*/
.footer {
  position: relative;
  /*  width: calc(100% - 200px);
  margin: 0 0 0 200px;*/
  line-height: 1;
  background-size: contain;
  text-align: center;
}

.footer_nav {
  background: #FF97BA;
}
#online .footer_nav {
  background:#AEB6E7;
}
.footer>img {
  width: 100%;
}

.footer a:hover {
  opacity: 0.7;
}

.footer_content {
  position: relative;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 100%;
  text-align: center;
}

.pc .footer_link {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: nowrap;
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translateX(-50%);
  width: 85%;
  margin: 5% auto;
}

.pc .footer_link a {
  font-size: 0.5vw;
  text-decoration: none;
  word-break: keep-all;
  font-weight: bold;
  color: #000;
  width: 20%;
  display: block;
  height: auto;
}

.pc .footer_melon {
  position: absolute;
  bottom: 14%;
  left: 50%;
  transform: translateX(-50%);
  width: 20%;
}

.sp .footer_link {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: wrap;
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translateX(-50%);
  width: 85%;
  margin: 5% auto;
}

.sp .footer_link a {
  font-size: 0.5vw;
  text-decoration: none;
  word-break: keep-all;
  font-weight: bold;
  color: #000;
  width: 45%;
  display: block;
  height: auto;
  margin: 2%;
}

#online .sp .footer_melon {
  position: absolute;
  bottom: 12%;
  left: 50%;
  transform: translateX(-50%);
  width: 20%;
}

.sp .footer_melon {
  position: absolute;
  bottom: 16%;
  left: 50%;
  transform: translateX(-50%);
  width: 30%;
}

.wide {
  margin: 0 auto;
  width: 20%;
  text-align: center;
}

_::-webkit-full-page-media,
_:future,
:root .footer_link li a {
  font-size: min(8px, 0.5vw);
}

.footer_nav {
  position: relative;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.footer_nav ul li a:hover {
  background-color: #ff619e;
}

#online .footer_nav ul li a:hover {
  background-color: #8090dd;
}

.slash {
  pointer-events: none;
}

.footer_nav ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: space-around;
  justify-content: space-around;
  list-style-type: none;
  width: 70%;
}

.footer_nav ul li {
  vertical-align: middle;
  display: flex;
  align-items: center;
  transition-duration: 0.5s;
  border-bottom: 1px solid #fff;
  margin: 1% 0.5% 0 0.5%;
}

.footer_nav ul li a {
  display: block;
  text-decoration: none;
  color: #fff;
  transition-duration: 0.5s;
  padding: 20px 10px;
  border-radius: 10px;
  text-align: center;
  font-size: 22px;
  line-height: 1em;
  font-weight: bold;
}

@media screen and (max-width:1200px) {
  .footer_link {
    /*  display: flex;
        flex-direction: column;
        justify-content: center;
        flex-wrap: nowrap;
        width: 100%;
        margin: 0 auto;
        text-align: center;*/
  }

  .footer_link li:not(:last-child) {
    border-right: 0px solid #000;
  }
}

.corporate_logo {
  text-align: center;
  padding: 2% 0;
}

.melon {
  width: 12%;
  display: inline-block;
}

.hobyjapan {
  display: inline-block;
  width: 5%;
}

.footer_logo {
  position: relative;
  width: 18%;
  margin: 0% auto;
  padding: 2% 0;
  display: block;
}

/*-----footer-------------------------------------*/
/*ソーシャルボタン*/
.social {
  position: absolute;
  top: 14%;
  right: 1%;
  z-index: 99;
  width: 11%;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}

.social a {
  margin: 0 1%;
  display: block;
  width: 33%;
}

.social a img {
  width: 100%;
}

.social a:hover {
  opacity: 0.7;
}

/*トップボタン*/
.topBtn {
  position: fixed;
  bottom: 5%;
  right: 5%;
  display: block;
  width: 70px;
  height: 70px;
  z-index: 10;
  /*  background-color: rgb(136, 94, 110);
  color: #fff;
  text-decoration: none;
  font-weight: bold;
  font-size: 19px;

  text-align: center;
  line-height: 22px;
  border-radius: 40px;
  padding-top: 30px;
  box-sizing: border-box;*/
}

.topBtn img {
  width: 100%;
}

.topBtn:before {
  /*  content: '\25B2';
  position: absolute;
  top: 10px;
  left: 0;
  width: 100%;
  text-align: center;
  font-size: 20px;*/
}

.topBtn:hover {
  opacity: 0.7;
}

.pc {
  display: block;
}

.sp {
  display: none;
}

.entry_notice.Benefit {
  margin-top: 1.5rem;
}

@media screen and (max-width:1050px) {
  #event .text-box h2 {
    background: #FF6496;
    color: #fff;
    margin: 0;
    text-align: center;
    padding: 10px 0;
    font-size: 3vw;
    letter-spacing: 0.3em;
  }

  #event .text-box p {
    font-size: 80%;
    line-height: 1.6em;
    letter-spacing: 0.3em;
    font-size: 3vw;
  }

  #event .text-box p.Benefit_text {
    letter-spacing: 0.3vw;
  }

  #event .text-box .opentime p:nth-child(2) {
    font-size: 2.5vw;
    margin-bottom: 1.5em;
  }

  #event .text-box .opentime p:nth-child(7) {
    font-size: 2.5vw;
    margin-top: 1.5em;
    letter-spacing: 0.2em;
  }

  .entry_notice {
    margin-bottom: 3%;
  }

  #event .entry_notice p {
    font-size: 2.5vw;
  }

  #sign .text-box p {
    font-size: 3vw;
    line-height: 1.6em;
  }

  #sign .text-box p.caution {
    font-size: 3vw;
    line-height: 1.6em;
  }

  #sign .text-box p.big {
    font-size: 3.2vw;
  }

  .schedulewrap {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    flex-wrap: wrap;
    font-size: 3vw;
  }

  .attention {
    font-size: 3.4vw;
  }
}

@media screen and (max-width:900px) {
  .pc {
    display: none;
  }

  .sp {
    display: block;
  }

  #wrapper {
    width: 100%;
    margin: 0px;
  }

  .chart_icon {
    position: absolute;
    width: 13%;
    top: 88%;
    left: 3%;
  }

  .personality_body #wrapper {
    width: 100%;
    margin: 0;
  }

  .personality {
    padding: 100px 0 0 0;
    width: 90%;
  }

  .social {
    position: absolute;
    top: 3%;
    left: 9%;
    z-index: 99;
    width: 62%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
  }

  #event {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
  }

  #event .title {
    margin: 0 0 3% 0;
  }

  .pop_image {
    width: 90%;
    margin: 2% auto;
  }

  #event .text-box {
    position: relative;
    margin: 2% auto;
    padding: 0 2%;
    text-align: left;
    width: 90%;
    color: #666666;
    font-family: dnp-shuei-mgothic-std, sans-serif;
    font-weight: 400;
    font-style: normal;
    box-sizing: border-box;
    line-height: 1em;
  }

  #event .text-box h3 {
    font-size: 4vw;
  }

  .footer_nav ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: space-around;
    justify-content: space-around;
    list-style-type: none;
    width: 100%;
  }

  .footer_nav ul li {
    width: 80%;
  }

  .footer_nav ul li a {
    margin: 0 auto;
    display: block;
  }
}

@media screen and (max-width:700px) {
  #sign .text-box h3 {
    color: #fff;
    margin: 3% auto;
    padding: 1% 10%;
    font-size: 3vw;
    letter-spacing: 0.3em;
    background: #FF6496 url(../images/header_icon.png) no-repeat 1% center;
    background-size: 6%;
  }
}