@charset "UTF-8";
/* CSS Document */


@font-face{
	font-family: 'comiket';
	src:url(https://fonts.googleapis.com/css?family=Josefin+Sans);
}

@font-face {
  font-family: 'num';
  src: local('Arial Black');
  unicode-range: U+0030-0039;
}


:root{
	--bg:#F4F9FF;
    --header-bg: #322150;
	--tbbg:#ffffff;
	--attbg:#feffef;
	--border:#cecece;
	--th-base:#eaeff4;
	--th-early:#5283be;
	--th-norm:#99c9bb;
	--th-exp:#ff9956;
	--td-early:#eef3f7;
	--td-normal:#e5eeea;
	--td-exp:#faeee4;
	--text-hd:#ffffff;
	--text-hd-p:#ffdc4f;
	--text-bold:#000000;
	--text-early:#1E2998;
	--text-norm:#424242;
	--text-limit:#1A237E;
	--text-attention:#cccccc;
	--text-warning:#DF3133;
	--text-h2:clamp(16.00px, 1.43vw + 10.86px, 22.00px);
	--text-th-cover:clamp(13px, 8.200px + 1vw, 16px);
	--text-td-cover:clamp(11.00px, 1.00vw + 6.20px, 14.00px);
    --fs-body: clamp(14.00px, 3.33vw + -2.00px, 24.00px);
	--fs-caption: clamp(11px, 2vw + -2.00px, 14px);
	--fs-limit: clamp(18.00px, 1.43vw + 12.86px, 24.00px);
	--fs-h3: clamp(16.00px, 3.33vw + 0.00px, 26.00px);
	--fs-att: clamp(11.00px, 0.71vw + 8.43px, 14.00px);
}


html{
	width: 100%;
	font-size: 12pt;
	scroll-behavior: smooth;
}

*{
	box-sizing: border-box;
}

ul{
	list-style: none;
}

img{
	vertical-align: bottom;
}

big{
	font-size: 1.1em;
}

small{
	font-size: 0.7em;
	font-weight: normal;
	line-height: 1em;
}

small.fg-date{
	vertical-align: top;
}

.warning{
	color:var(--text-warning);
}

body{
	width:100%;
	margin:0 auto;
	font-family:  "M PLUS Rounded 1c", serif;
	font-weight: 300;
	background-color: var(--bg);
}

h2{
	font-size: var(--text-h2);
}
h2.packheader a{
	position: relative;
}

h2.packheader a::after{
	position: absolute;
	content:"";
	display: block;
	right:-30px;
	top:50%;
	transform: translateY(-50%);
	height:100%;
	max-height: 16px;
	aspect-ratio:58/50;
	background-image: url("../../img/comiket/108/icon_link.png");
	background-size: cover;
	background-repeat: no-repeat;
	opacity: 0.6;
}


h3{
	text-align: center;
	font-size: var(--fs-h3);
}

#headerWrap,#outline,#comikefooter,#comiketbnr,#pFooterWrap,#btn_group,#notice{
	width: 100%;
	max-width: 780px;
	margin:0 auto;
	overflow: hidden;
}

.packWrap{
	width:98%;
	margin:20px auto 40px;
	padding:20px 1%;
	border-radius:15px;
	box-shadow: 0px 0px 8px #787789;
	background:var(--tbbg);
}

#notice{
	margin: 20px auto;
	background:var(--tbbg);
}

#notice,#btn_group{
	display: flex;
	justify-content: center;
	align-items: center;
	background:var(--tbbg);
	margin:0px auto 20px;
}

#notice section,#btn_group section{
	width:50%;
}

#notice section img,#btn_group section img{
	width:100%;
}

table.comiket td p[pc]{
	position: relative;
	margin-top:35px;
	margin-bottom:10px;

}


table.comiket td p[pc]:before{
	display: block;
	position: absolute;
	top:-24px;
	left:50%;
	transform: translateX(-50%);
	content:" ";
	width:50%;
	max-width: 60px;
	aspect-ratio:70/24;
	margin:0 auto;
	background-size: 100% 100%!important;
	background-repeat: no-repeat!important;
}


table.comiket td p[pc="25d"]:before{background:url("../../img/comiket/icon_25_off.png")}
table.comiket td p[pc="20d"]:before{background:url("../../img/comiket/icon_20_off.png")}
table.comiket td p[pc="15d"]:before{background:url("../../img/comiket/icon_15_off.png")}
table.comiket td p[pc="10d"]:before{background:url("../../img/comiket/icon_10_off.png")}
table.comiket td p[pc="norm"]:before{background:url("../../img/comiket/icon_normal.png")}
table.comiket td p[pc="5u"]:before{background:url("../../img/comiket/106/icon_5_up.png")}
table.comiket td p[pc="10u"]:before{background:url("../../img/comiket/106/icon_10_up.png")}
table.comiket td p[pc="15u"]:before{background:url("../../img/comiket/106/icon_15_up.png")}
table.comiket td p[pc="20u"]:before{background:url("../../img/comiket/106/icon_20_up.png")}


table.comiket{
	width:98%;
	margin:0 auto 20px;
	table-layout: fixed;
	border-collapse: collapse;
	border:1px solid #ccc;
	box-sizing: border-box;
	background-color:var(--tbbg);
	font-size: var(--fs-body);
}

table.comiket th,table.comiket td{
	border:1px solid #ccc;
	box-sizing: border-box;
	padding:1%;
	text-align: center;
}

table.comiket th{
	background-color:var(--th-base);
}

table.comiket th.early{
	background:var(--th-early);
	color:var(--text-hd);
}
table.comiket th.normal{
	background-color: var(--th-norm);
	color:var(--text-hd);
}
table.comiket th.express{
	background-color: var(--th-exp);
}
table.comiket td.early{
	background-color:var(--td-early);
	color:var(--text-early);
}
table.comiket td.limit{
	background-color:var(--td-normal);
	color:var(--text-limit);
	font-weight: bold;
	font-size: var(--fs-limit);
}
table.comiket td.express{
	background-color: var(--td-exp);
}
table.comiket td:empty{
	background-color:#989898;
}
table.comiket td.cover{
	font-size: var(--text-td-cover);
}
table.comiket th.cover{
	font-size: var(--text-th-cover);
}

table.comiket th.head img{
	width:100%;
	max-width: 80px;
}

table.comiket th.express img{
	width: 100%;
}
table.comiket th.th-top{
	width:4%;
	font-size: var(--fs-caption);
	padding:0;
}

table.comiket th.th-top img{
	width: 100%;
}

.event4 {
margin:1em auto;
width:95%;
border-collapse:collapse;
border:solid 1px #999;
	table-layout: fixed;
}

.event4 th,.event4 td{
border:solid 1px #999;
padding:0.5em;
}

.event4 th {
background:#CCCCCC;
text-align:center;
white-space:wrap;
color:#000;
font-weight:bold;
font-size: var(--text-th-cover);
}

.event4 td{
	
}

.event4 td:not([class]){
	background-color: #FFFEF7;
	text-align: left;
}

.inner-flex{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap:10px;
}

.event4 td.bold{
	background:#ffffff;
	font-size: clamp(14.00px, 0.95vw + 10.57px, 18.00px);
	font-weight: bold;
}


.event4 td{
text-align:center;
font-size: var(--fs-att);	
}

table.event4 td.limit {
white-space:nowrap;
background: #ffe5ee;
color:#666;
}

.event4 td.cover3 {
background-color: #FFFFCC;
text-align:left;
}


.notice_common {
	width:100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap:5px;
	margin:0px auto 20px;
}

.notice_common section{
	width:24%;
	background:var(--tbbg);
	border:1px solid var(--border);
	display: flex;
	justify-content: center;
	align-items: center;
	
	img{
		width:100%;
	}
}

p.center {
	text-align: center;
}
p.center.alart img{
	width:100%;
	max-width: 780px;
}
.attWrap {
	width:98%;
	max-width: 780px;
	padding:1em;
	background-color:var(--attbg);
	margin:0px auto 40px;
	border:2px dashed #ccc;
}
.attWrap:last-child{
	margin-bottom:0px;
}
.att p{
	font-size: var(--fs-att);
	border-bottom:1px dashed #848380;
}

.caution{
	color:#E89620;
	vertical-align: top;
}

#pFooterWrap{
	--p:10px;
	--r-inner:25px;
	
	padding:var(--p);
	position:fixed;
	left:50%;
	width: 90%;
	transform: translateX(-50%);
	bottom:20px;
	background: rgba(255,255,255,0.4);
	margin-bottom:0px;
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter:blur(10px);
	z-index:9999;
	box-sizing: border-box;
	border-top:2px solid #ffffff;
	box-shadow: inset 0px 0px 10px #fff;
	border-radius: calc(var(--r-inner) + var(--p));

}

.btnWrap {
	width: auto;
	max-width: 780px;
	margin:0 auto;
	position: -webkit-sticky;
	position: sticky;
	bottom:20px;
	display: flex;
	flex-direction: row;
	justify-content: center;
	gap:1%;
	flex:1;
}

.btnWrap a{
	width:auto;
}
.btnWrap a img{
	width:100%;
}
#comiketbnr {
	width:100%;
	max-width: 780px;
	margin:40px auto;
	background:#fff;
	padding:20px 0;
	display: flex;
	flex:1;
	flex-direction: row;
	justify-content: center;
	align-items:center;
}

#comiketbnr *{
	display: block;
}

.calender {
width:220px;
margin:0.8em 0;
padding:0;
}

.calender_sbs {
margin:0 auto;
width:488px;
border-collapse: collapse;
border: solid 1px #BDBDBD;
background-color:#fffdec;
padding-left:0.5em;
}
.calender_tdm {
margin:0;
width:auto;
border-collapse: collapse;
border: solid 1px #BDBDBD;
background-color:#fffdec;
}

.calender_sbs table.calender_now {
width:200px;
margin:0 0 10px 20px;
border-collapse: collapse;
background-color:#fff;
float:left;
}

.calender_sbs table.calender_next {
width:200px;
margin:0 20px 10px 0;
border-collapse: collapse;
background-color:#fff;
}

.calender_tdm table.calender_now {
width:200px;
margin:10px auto;
border-collapse: collapse;
background-color:#fff;
}

.calender_tdm table.calender_next {
width:200px;
margin:10px auto 0;
border-collapse: collapse;
background-color:#fff;
}

.calender_sbs table caption,.calender_tdm table caption {
margin:0.2em 0;
text-align: left;
font-size:1.2em;
color:#000;
}

.calender_sbs table th,.calender_sbs table td,.calender_tdm table th,.calender_tdm table td {
border: solid 1px #999;
padding: 4px 5px;
text-align: center;
}

.calender_sbs table th,.calender_tdm table th  {
background: #E6E6E6;
white-space: nowrap;
color: #666;
}

.calender_sbs table td.month,.calender_tdm table td.month {
color: #ccc;
}

.calender_sbs table td.holiday,.calender_tdm table td.holiday,.calender_sbs table td.tempholiday,.calender_tdm table td.tempholiday  {
color: #ff0000;
background-color:#F8E0F1;
font-weight:bold;
}

.calender_sbs table td.holiday,.calender_sbs table th.holiday,.calender_tdm table td.holiday,.calender_tdm table th.holiday  {
color: #ff0000;
}

.calender_sbs table td.holidaywork,.calender_tdm table td.holidaywork,.calender_sbs table td.holidaywork,.calender_tdm table td.holidaywork  {
font-weight:bold;
}
/*---------------------店休日カレンダー　タブ遷移----------------------------------------*/
.calender_tab .calender_sbs {
margin:0 auto;
width:458px;
height:244px;
border-collapse: collapse;
}
.calender_tab .calender_tdm {
margin:0;
width:auto;
border-collapse: collapse;
border: solid 1px #BDBDBD;
background-color:#fffdec;
}
.calender_tab .calender_kmm {
margin:0;
width:300px;
border-collapse: collapse;
border: solid 1px #BDBDBD;
background-color:#fffdec;
}

.calender_tab .calender_sbs table.calender_now {
width:260px;
margin:0 auto;
border-collapse: collapse;
background-color:#fff;
float:none;
}

.calender_tab .calender_sbs table.calender_next {
width:260px;
margin:0 auto;
border-collapse: collapse;
background-color:#fff;
}

.calender_tab .calender_tdm table.calender_now {
width:260px;
margin:10px auto;
border-collapse: collapse;
background-color:#fff;
}

.calender_tab .calender_tdm table.calender_next {
display: none;    
width:260px;
float:none;
margin:0 auto;
border-collapse: collapse;
background-color:#fff;
}

.calender_tab .calender_sbs table caption,.calender_tdm table caption {
margin:0.2em 0;
text-align: left;
font-size:1.2em;
color:#000;
}

.calender_tab .calender_sbs table th,.calender_sbs table td,.calender_tdm table th,.calender_tdm table td {
border: solid 1px #999;
padding: 4px 5px;
text-align: center;
line-height: 1.3em;
font-size: 9pt;
box-sizing: border-box;
width:37px;
}

.calender_tab .calender_sbs table th,.calender_tdm table th  {
background: #E6E6E6;
white-space: nowrap;
color: #666;
}

.calender_tab .calender_sbs table td.month,.calender_tdm table td.month {
color: #ccc;
}

.calender_tab .calender_sbs table td.holiday,.calender_tdm table td.holiday,.calender_sbs table td.tempholiday,.calender_tdm table td.tempholiday  {
color: #ff0000!important;
background-color:#F8E0F1;
font-weight:bold;
}

.calender_tab .calender_sbs table td.holiday,.calender_sbs table th.holiday,.calender_tdm table td.holiday,.calender_tdm table th.holiday  {
color: #ff0000;
}

.calender_tab .calender_sbs table td.holidaywork,.calender_tdm table td.holidaywork,.calender_sbs table td.holidaywork,.calender_tdm table td.holidaywork  {
font-weight:bold;
}


.calender_tab{
	/*height:240px;*/
	float:none;
	margin-top:0px;
	margin-right:0px;
	overflow:hidden;
}

.tab{
	float:none;
	overflow:visible;
	font-size:12pt;
	margin:0 auto;
}

.calCaption{
	float:left;
	width:35%;
	overflow: hidden;
}

.calCaption h5{
	font-size:12pt!important;
	display: block;
	font-weight:bold;
	margin:10px;
	line-height:2em;
	padding-left:7px;
	border-left:5px solid #FF9D3D;
}

.calWrap{
	float:right;
	width:62.7%;
	height:224px;
	margin:0 auto;
	background: #FFEBAA; 
	box-sizing:border-box;
	border:1px solid #ccc;
	overflow: hidden;
	margin-right:10px;
	margin-top:10px;
}

.calender_sbs p.indent{
	padding:0;
	line-height:1.6em;
}

.tab li{
	list-style: none;
	background: #fff;
	width:50%;
	float:left; 
	font-size: 12pt;
	line-height: 2em;
	text-align: center;
	color:#aaa;
	margin-bottom:10px;
	cursor: pointer;
}

.tab li.select{
	background: #FFEBAA; 
	list-style: none;
	width:50%;
	box-sizing: border-box;
	color:#000;
	font-weight: bold;
	font-size:12pt;

}


#infomation {
	padding:2%;
	display: flex;
	gap:40px;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width:100%;
	max-width: 780px;
	background: #fff;
}

#infomation #shop{
	width: 90%;
}

#mapimg {
	aspect-ratio:920/1076;
}

#mapimg img,#shop img{
	width:100%;
	max-width: 400px;
}

#mapwrap{
	width: 100%;
}

#mapwrap iframe{
	width: 100%;
	aspect-ratio:780/400;
}

#snslink {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	flex:1;
	gap:60px;
}

#calendarWrap {
	margin:0 auto;
}
.hide{
	display: none;
}

#headerWrap {
	margin-bottom: 40px;
	position: relative;
}

#headerWrap .xpostbtn{
	position: absolute;
	right:3%;
	bottom:10%;
	width:10vw;
	aspect-ratio:1/1;
	max-width: 60px;
	overflow: hidden;
	
	img{
		width:100%;
	}
}


#add {
	width: 100%;
	max-width:780px;
	display:flex;
	justify-content: space-between;
	padding:0;
	margin:40px auto;
	flex:1;
	
}

#add section{
	width:100%;
	padding:0.5em;
}

.headerBox {
	margin:0px auto 20px;
	width:98%;
	max-width: 780px;
	aspect-ratio:6/1;
	background:var(--header-bg);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding:10px 2%;
}

h2.packheader,h2.packheader a{
	color:var(--text-hd);
}

.headerBox p{
	font-size: var(--fs-caption);
	color:var(--text-hd-p);
}

@media (min-width: 780px){
	
	html{
		scroll-padding-top:100px;
	}

#headerWrap,#outline,#comikefooter,#comiketbnr,#pFooterWrap,#btn_group,#notice,#infomation{
	max-width: 980px;
}
	
	.headerBox{
		max-width: 980px;
	}

	#tableWrap{
		margin:0 auto 40px;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: stretch;
		flex:1;
		gap:10px;
	}
	#tableWrap table,#tableWrap .attWrap{
		width:calc(50% - 10px);
		margin-bottom: 0px;
	}
	
	#tableWrap table th:first-child{
		height:3em;
	}
	h2.packheader{
		font-size: 30px;
	}
	table.comiket th.th-top img{
	width: 100%;
	max-width: 20px;
}


}

#preorder {
	width:98%;
	max-width: 960px;
	margin:20px auto 40px!important;
	display: flex;
	flex-direction: column;flex:1;
	justify-content: flex-start;
	align-items: center;
	padding:1em;
	background:#FFFFFF;
	border:2px solid #FFD288;
	border-radius: 20px;
}

#preorder h3{
	color:red;
}