@import url(http://fonts.googleapis.com/earlyaccess/sawarabimincho.css);

@-ms-viewport {
	width: device-width
}

article,
aside,
dialog,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section {
	display: block
}


hr {
	border: solid 1px #cd9eff;
}


header {}

body {
	margin: 0;
	width: 100%;
	font-family: "Noto Serif JP", serif;
	color: #333;
	letter-spacing: 1px;
	background-color: #FFFFFF;
	-webkit-filter: drop-shadow(0px 0px 6px rgba(0, 0, 0, .1));
	filter: drop-shadow(0px 0px 6px rgba(0, 0, 0, .1));
}

#bd_1 {
	padding: 1rem 0;
	margin-top: 0;
	padding-top: 0;
}


.intro_chara {
	color: #ff675c;
}

.goods img {
	width: 95%;
	border-radius: 10px;
}

.goods ul li {
	background-color: #f7f7f7;
	display: block;
	margin: 1rem auto;
}

.orbital_img .title {}

footer {
	padding: 1em 0px 1em 0px;
	font-weight: bold;
	color: #cd9eff;
	background-color: #333;
}

/* 画面外にいる状態 */
.fadein {
	opacity: 0.1;
	transform: translate(0, 30px);
	transition: all 1000ms;
}


/* 画面内に入った状態 */
.fadein.scrollin {
	opacity: 1;
	transform: translate(0, 0);
}


.fadein_now {
	opacity: 0.1;
	transform: translate(0, 30px);
	transition: all 1000ms;
}


/* 画面内に入った状態 */
.fadein_now.scrollin {
	opacity: 1;
	transform: translate(0, 0);
}

.novelty img {
	margin-bottom: 1rem;

	filter: drop-shadow(0px 0px 6px rgba(0, 0, 0, .2));
}

.price {
	margin-top: 0 !important;
}

.lm h3 {
	margin-bottom: 0;
}



.newinfo {
	padding: 10px;
	display: block;
	color: #ff9a00;
	border: 1px solid;
	width: 50%;
}

.gaiyou {

	border: 1px solid #333;
	border-radius: 10px;
	padding: 10px;

}

.psc {
	width: 90%;
	margin-bottom: 30px;
	border-radius: 10px;
	overflow: hidden;
	border: 2px solid #464646;
}

.group_txt {
	font-size: 20px;
}

.nezu {
	font-family: Noto serif TC;
}

.a5 li {
	width: 45%;
}

.a5 img {
	border: 1px solid #4c4c4c;
}

.goods_img li {
	display: block;
	margin-bottom: 15px;
}

.goods li {
	border: 1px solid;
	border-radius: 10px;
	width: 80%;
	margin-bottom: 20px;
}

.can img {
	width: 150px;
}

.can_a li {
	width: 25%;
}

.can_b li {
	width: 20%;
}

.acril_a li {
	width: 25%;
}

.acril ul {
	justify-content: space-between !important;
}


.acril_b li {
	width: 20%;
}

.acril img {
	width: 100%;
	vertical-align: bottom;
}


.goods_img {
	width: 90%;
	margin: 30px;
	margin-bottom: 10px;
	padding-top: 10px;
	border: 2px solid #464646;
}

.psc ul {
	display: flex;
	list-style-type: none;
	flex-wrap: wrap;
	justify-content: space-evenly;
	padding: 30px 0;
	padding-top: 10px;
}

.agroup img {
	width: 190px;

}

.bgroup img {
	width: 160px;
}

.weblink {
	margin: 0 auto;
	display: block;
	width: inherit;
}

a {
	color: #333;
}

.date {
	font-size: 14px;
	text-align: center;
	margin: 5px auto;
}

footer span {
	font-size: 5px;
}

footer a:link {
	color: #FFF;
	text-decoration: none;
}

footer a:hover {
	text-decoration: underline;
}

footer a:visited {
	color: #FFF;
}

h1 {
	margin: 0;
}

h3 {}

.midashi {
	background-color: #ff675c;
	color: white;
	padding: 10px;
}


.goods h3 {
	margin-bottom: 0;
}

h4 {
	margin-top: 10px;
}



.topimg {
	background-image: url(../img/top1bg.png);
	background-repeat: repeat-x;
	background-size: cover;
}

.topimg img {}

.top {
	color: #555;
}

.logodate {
	max-width: 797px;
	margin-top: 8px;
}

.border {
	max-width: 830px;
	margin: 20px 0;
}

.top h2 {
	margin: 3px 0;
}

.eventinfo p.introduction {
	padding: 10px;
	font-size: 16px;
	line-height: 2;
	text-align: center;
	color: #ff675c;
}

.intro {
	font-size: 18px;
	color: #cd9eff;
	text-align: left;
	padding: 0 13% !important;
}

.menubx p {
	max-width: 800px;
}




.slim {
	font-weight: normal;
}

.color-r {
	color: red;
}


.color-rr {
	color: #cd9eff;
}

.letter-space {
	letter-spacing: -1px;
}

.gamaguchi li {
	width: 45%;
}


.web_to {
	margin-bottom: 50px;
	text-align: center;
}


.container {
	max-width: 960px;
	margin: 0 auto;
	background-color: white;
	padding-bottom: 5px;
	padding: 1rem;
	text-align: center;
	padding-top:0;
}

.container div{
	margin:  auto;
}

.top,
.intro,
.menubx,
.goods {
	padding: 0 8px;
}


.left {
	text-align: left;
}

.drink-des {
	color: #cd9eff;
	font-style: italic;
}


.txt-head {
	max-width: 655px;
}

.category,
.category2 {
	min-height: 48px;
	margin: 20px 0;
}

.category {
	background-color: #ab69f0;
}

.category2 {
	background-color: #ab69f0;
}

.category h2,
.category2 h2 {
	color: white;
	font-weight: bold;
	margin: 30px 0px;
	font-size: 32px;
}



.menubx {
	margin: 0 0;
}

.menubx h1 {
	color: #cd9eff;
	font-size: 19px;
}

.orbital_img {
	max-width: 960px;
}

.orbital_img img {
	width: 100%;
}

.menubx img {
	max-width: 500px;
}

.menubx p {
	font-size: 16px;
	letter-spacing: 1px;
	padding: 0 5%;
	margin: 10px;
}


a:hover {
	opacity: 0.7;
}


.gdbx img {
	margin: 10px 0;
}

.gdbx p {
	padding: 0 5%;
}


.gd-name {
	color: #cd9eff;
	border-top: solid 2px #cd9eff;
	border-bottom: solid 2px #cd9eff;
	max-width: 600px;
	margin-bottom: 1em;
	padding-top: 5px;
}

.shadow img {
	-webkit-filter: drop-shadow(0px 0px 6px rgba(0, 0, 0, .2));
	filter: drop-shadow(0px 0px 6px rgba(0, 0, 0, .2));
}

.goods ul {
	list-style-type: none;
}



.goods_img ul {
	display: flex;
	list-style-type: none;
	flex-wrap: wrap;
	justify-content: space-evenly;
	padding: 10px 20px 0px 20px;
	margin-block-start: 0;
}

.goods_img li p {
	margin-top: 0;
	text-align: center;
}

.maste ul {}

.canbadge {
	max-width: 842px;
}

.a4 {
	max-width: 800px;
}

.sticker {
	max-width: 662px;
}


.acril_a img {
	width: 90%;
}




.limit {
	max-width: 93px;
	display: inline-block;
}

.icstk {
	max-width: 243px;
	display: block;
}

.cost {
	font-size: 20px;
	text-align: center;
	margin-top: 0;
}

.sale-date {
	color: red;
}


.webshop-btn {
	font-family: 'Sawarabi Mincho', serif;
	font-size: 32px;
	color: white !important;
	padding: 10px 20px;
	width: 90%;
	display: block;
	margin: 1em 0px;
	background: -moz-linear-gradient(top,
			#cd9eff 0%,
			#cd9eff);
	background: -webkit-gradient(linear, left top, left bottom,
			from(#cd9eff),
			to(#cd9eff));
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 12px;
	border: 1px solid #BE3B27;
	-moz-box-shadow:
		0px 1px 3px rgba(000, 000, 000, 0.5),
		inset 0px 0px 3px rgba(255, 255, 255, 1);
	-webkit-box-shadow:
		0px 1px 3px rgba(000, 000, 000, 0.5),
		inset 0px 0px 3px rgba(255, 255, 255, 1);
	box-shadow:
		0px 3px 5px rgba(000, 000, 000, 0.5),
		inset 0px 0px 3px rgba(255, 255, 255, 1);
}

a.webshop-btn,
a.point-btn {
	text-decoration: none;
}

a.webshop-btn:hover,
a.point-btn:hover {
	text-decoration: underline;
}

a.webshop-btn:visited,
a.point-btn:visited {
	color: currentColor;
}

.limitbx {}

.o_container {
	padding: 1rem 0;
}

#bd_2 img {
	max-width: 85% !important;
	-webkit-filter: drop-shadow(0px 0px 6px rgba(0, 0, 0, .2));
	filter: drop-shadow(0px 0px 6px rgba(0, 0, 0, .2));
	border-radius: 10px;

}

.movie-wrap {
	position: relative;
	padding-bottom: 56.25%;
	/*アスペクト比 16:9の場合の縦幅*/
	height: 0;
	overflow: hidden;
	width: 100%;
}

.movie-wrap iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: block;
	margin: 0 auto;
}

.eventinfo {
	width: 75%;
	border-radius: 10px;
	margin-bottom: 40px;
	padding-top: 20px;
}

.eventinfo p {
	margin: 5px;
	text-align: left;
	font-size: 16px;
	color: #333;
}

p.kikan {
	text-align: center;
	font-size: 20px;
	color: #333;
}

#page_top {
	width: 50px;
	height: 50px;
	position: fixed;
	right: 20px;
	bottom: 20px;
	background: #666;
	opacity: 0.6;
	border-radius: 50%;
}

#page_top a {
	position: relative;
	display: block;
	width: 50px;
	height: 50px;
	text-decoration: none;
}

#page_top a::before {
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	content: '\f106';
	font-size: 25px;
	color: white;
	position: absolute;
	width: 25px;
	height: 25px;
	top: -5px;
	bottom: 0;
	right: 0;
	left: 0;
	margin: auto;
	text-align: center;
}

#point {
	margin: 3em 0;
	color: #cd9eff;
}


.midashi_2 {
	color: #ff675c;
	border: 2px solid #ff675c;
	background-color: white;
}

.web_to a {

	display: block;
	background-color: #4E4C4C;
	width: 350px;
	margin: 0 auto;
	padding: 20px;
	color: white;
	text-decoration: none;
	font-size: 14px;
	border-radius: 10px;
	text-decoration: none;
}

#point h2 {
	margin: 1em 0;
	letter-spacing: 2px;
}

.point-btn {
	border: solid 1px #cd9eff;
	padding: 20px;
	font-family: 'Sawarabi Mincho', serif;
	font-size: 24px;
	display: block;
	max-width: 80%;
	margin: 2em 0px;
	line-height: 1.2em;
}

.overlay {
	display: none;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.6);
	position: fixed;
	z-index: 1
}

.btn_area {
	width: 80%;
	height: 250px;
	position: absolute;
	top: 20vh;
	left: 50%;
	transform: translate(-50%, -50%);
	background: #fff;
	text-align: center;
	z-index: 2
}

.btn_area img {
	width: 100%;
}

.btn_area .ttl {
	font-weight: bold
}

.btn_area p {
	padding: 15px
}

.btn_area button {
	display: block;
	margin: 0 auto;
	background: #333;
	color: #fff;
	padding: 20px 40px;
	border: none;
}

.btn_area button:hover {
	background: #777
}

@media screen and (max-width: 767px) {
	.webshop-btn {
		width: auto;
	}
}

@media screen and (max-width: 320px) {

	.hd-acril,
	.menubx h1,
	.drink-des {
		letter-spacing: -1px;

	}

	.category h2 {
		padding: 0;
	}
}

.posca img{
	-webkit-filter: drop-shadow(0px 0px 0px rgba(0, 0, 0, .0));
	filter: drop-shadow(0px 0px 0px rgba(0, 0, 0, .0));
}
body, html {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
  }
  
  #video-container {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: black;
	z-index: 1;
  }
 
#intro-video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
  }
  
  
  #modal.fade-in {
	display: block;
	opacity: 0;
	transition: opacity 1s ease-in;

	opacity: 1;
    }  


	.postsec img{
		width:100%;
		margin-bottom: 0;
		padding: 0;
	}
  
#modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.8);
	display: none;
	opacity: 0;
	z-index: 2;
	transition: opacity 1s ease-in; /* 追加 */
	}
  
  #modal-content {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 90%;
	max-width: 800px;
  }
  
  #close-btn {
	position: absolute;
	top: -20px;
	right: -20px;
	font-size: 30px;
	color: white;
	cursor: pointer;
  }
  
  #youtube-video {
	width: 100%;
	height: calc(100vw * 9 / 16);
	max-height: 450px;
  }

  footer p{

    text-align: center;
  }

  .midashi span{
	color:#F9F9F4;
	font-weight: bold;
	padding-left: 1rem;
	font-size: 0.75rem;
	display: block;
  }