@charset "utf-8";

/* shippei.jp : 2019anniversary.css */

* { box-sizing: border-box; }

html {
	font-size: 62.5%;
}

body {
	width: 100%;
	min-width: 320px;
	text-align: center;
	font-size: 16px;
	font-size: 1.6em; /* Chrome対策でremにしない */
	-webkit-text-size-adjust: 100%;
}

a, b, span {
	display: inline-block;
	vertical-align: top;
}

a:hover { color: #e93421; }


/*======================================================================*
 *  [ mainImg ] 
 *======================================================================*/

.mainImg {
	background-color: #ffe89e;
	background-image: url(../img/main_deco.png), url(../img/main_bg.png);
	background-position: center center, center center;
	background-repeat: no-repeat, no-repeat;
	background-size: auto 100%, auto 100%;
}
.mainImg > div {
	position: relative;
	max-width: 950px;
	margin: 0 auto;
	padding: 45px 0 30px 0;
	background: url(../img/main_shippei.png) right 5% bottom no-repeat;
	background-size: 37.89% auto;
}
.mainImg > div > * { padding: 0 23.15% 0 10.52%; }
.mainImg .date {
	position: absolute;
	top: 10px;
}
.mainImg .place { margin-top: -1.6%; }
.mainImg img { display: block; }

@media screen and (max-width: 768px) {
	.mainImg > div {
		padding: 4.5% 0 3% 0;
		background-position: right 20px bottom;
		background-size: 40% auto;
	}
	.mainImg > div > * { padding: 0 25% 0 20px; }
	.mainImg .date {
		position: absolute;
		top: 0.9%;
	}
	
} /* */

@media screen and (max-width: 568px) {
} /* */



/*======================================================================*
 *  [ mainContent ] 
 *======================================================================*/

.mainContent {
	position: relative;
	margin-top: -10px;
	padding: 10px 20px 0;
	background: url(../img/main_shadow.png) center top repeat-x;
	z-index: 10;
}


/*======================================================================*
 *  [ movieBox ] 
 *======================================================================*/

.movieBox {
	max-width: 660px;
	width: 100%;
	margin: 50px auto;
}
.movieBox h2 {
	color: #E93421;
	font-size: 2.4rem;
	margin-bottom: 15px;
}
.movieBox h2::before { content: "＼ "; }
.movieBox h2::after { content: " ／"; }
.movieBox p {
	margin-bottom: 5px;
}
.movieBox p + p {
	margin-bottom: 20px;
}
.movieBox > div {
	position: relative;
	padding-top: 56.25%;
}
.movieBox iframe {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

@media screen and (max-width: 568px) {
	.movieBox h2::before, 
	.movieBox h2::after { display: none; }
	.movieBox h2 b {
		display: block;
	}
	.movieBox h2 b::before { content: "＼ "; }
	.movieBox h2 b::after { content: " ／"; }
} /* */

/*======================================================================*
 *  [ eventBox ] 
 *======================================================================*/

.eventBox {
	max-width: 950px;
	margin: 50px auto 70px;
}
.eventBox section { margin: 20px 0; }
.eventBox section + section {
	position: relative;
	padding-top: 20px;
}
.eventBox section + section::before {
	position: absolute;
	top: 0;
	left: 50%;
	width: 150px;
	margin-left: -75px;
	border-top: 3px dotted #c8c8c8;
	content: "";
}
.eventBox h2 { margin-bottom: 5px; }
.eventBox p { line-height: 1.4; }
.eventBox .end {
	margin-top: 5px;
	color: #E60012;
	font-weight: bold;
}

@media screen and (max-width: 768px) {
	.eventBox { margin: 30px auto 50px; }
	.eventBox p b {
		display: block;
		margin-top: 5px;
	}
} /* */

@media screen and (max-width: 568px) {
} /* */


/*======================================================================*
 *  [ birthdayBox ] 
 *======================================================================*/

.birthdayBox {
	max-width: 950px;
	margin: 0 auto;
}
.birthdayBox header {
	margin-bottom: 40px;
	padding: 60px 0 20px;
	background-color: #e60012;
	background-image: url(../img/birthday_chara.png), url(../img/birthday_deco.png), url(../img/birthday_bg.png);
	background-position: right 20px bottom 10px, left center, center top;
	background-repeat: no-repeat, no-repeat, no-repeat;
	background-size: 35.78% auto, 68.42% auto, 100% auto;
}
.birthdayBox header > * { padding: 0 40% 0 5.78%; }
.birthdayBox header h2 { margin-bottom: 20px; }
.birthdayBox header > div {
	display: inline-block;
	color: #fff;
	font-weight: bold;
	text-align: left;
}
.birthdayBox header section { padding-left: 4em; }
.birthdayBox header section + section { margin-top: 10px; }
.birthdayBox header section h3, 
.birthdayBox header section p {
	display: inline-block;
	vertical-align: top;
}
.birthdayBox header section h3 {
	width: 4em;
	margin-left: -4em;
}
.birthdayBox header section b {
	margin-top: -.4em;
	font-size: 2.6rem;
}

@media screen and (max-width: 950px) {
	.birthdayBox header {
		margin-right: -20px;
		margin-left: -20px;
	}
} /* */

@media screen and (max-width: 768px) {
	.birthdayBox header {
		margin-bottom: 30px;
		padding: 50px 20px 20px 20px;
		background-position: center bottom, left bottom, center top;
		background-size: 0, 100% auto, 768px auto;
	}
	.birthdayBox header > * {
		padding: 0;
	}
} /* */


/* [ charaBox ] */
.charaBox { margin-bottom: 40px; }
.charaBox h3 { margin-bottom: 20px; }
.charaBox ul {
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	list-style: none;
}
.charaBox li {
	width: 160px;
	margin: 10px;
	background: url(../img/chara_bg.png) center bottom no-repeat;
	background-size: 100% auto;
}
.charaBox li a {
	display: block;
	text-decoration: none;
}
.charaBox li a:hover, 
.charaBox li a:active { color: #000; }
.charaBox li p {
	height: 2em;
	margin-top: 5px;
	font-size: 1.3rem;
}
.charaBox li span {
	display: block;
	font-size: 1rem;
}
.charaBox > p {
	margin-top: 30px;
	color: #666;
	font-size: 1.4rem;
}

@media screen and (max-width: 950px) {
	.charaBox ul { margin: 0 -10px; }
} /* */

@media screen and (max-width: 768px) {
	.charaBox h3 { margin-bottom: 10px; }
} /* */

@media screen and (max-width: 568px) {
	.charaBox li { width: 130px; }
} /* */

/* [ guestBox ] */
.guestBox {
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	margin: 40px 0;
	padding: 30px 10px;
	border-top: 1px dotted #c8c8c8;
	border-bottom: 1px dotted #c8c8c8;
	text-align: left;
}
.guestBox figure { width: 160px; }
.guestBox figure img {
	display: block;
	border-radius: 50%;
}
.guestBox > div {
	-webkit-flex: 1;
	flex: 1;
	margin-left: 30px;
}
.guestBox h3 {
	margin-bottom: 25px;
	color: #e83421;
	font-size: 1.3rem;
}
.guestBox h3 b { font-size: 1.6rem; }
.guestBox p { font-size: 1.3rem; }

@media screen and (max-width: 568px) {
	.guestBox {
		display: block;
		padding: 20px 0;
	}
	.guestBox figure {
		width: 100%;
		margin-bottom: 15px;
	}
	.guestBox figure img { margin: 0 auto; }
	.guestBox > div { margin-left: 0; }
	.guestBox h3 {
		margin-bottom: 15px;
		text-align: center;
	}
} /* */

/* [ scheduleBox ] */
.scheduleBox {
	max-width: 660px;
	margin: 0 auto;
	padding: 40px 20px;
	background: #fff6e7;
}
.scheduleBox h3 {
	margin-bottom: 20px;
	color: #e93421;
	font-size: 1.8rem;
}
.scheduleBox h3::before {
	display: block;
	margin: 0 auto 10px;
	content: url(../img/icon_time.svg);
}
.scheduleBox ul {
	display: inline-block;
	list-style: none;
	margin-bottom: 10px;
	font-size: 1.4rem;
	text-align: left;
}
.scheduleBox li { padding-left: 5em; }
.scheduleBox li + li { margin-top: 10px; }
.scheduleBox li b {
	width: 5em;
	margin-left: -5em;
	color: #e93421;
}
.scheduleBox p { margin-top: 20px; }
.scheduleBox p b {
	padding: 10px 15px;
	background: #ffedd1;
}
.scheduleBox .note {
	padding-left: 1em;
	font-size: 1.3rem;
	text-indent: -1em;
}

@media screen and (max-width: 568px) {
	.scheduleBox {
		margin: 0 -20px;
		padding: 30px 20px;
	}
} /* */

/* [ plusBox ] */
.plusBox {
	position: relative;
	max-width: 660px;
	margin: 0 auto;
	padding: 40px 20px;
	background: #fff6e7;
}
.plusBox::before {
	position: absolute;
	top: 0;
	right: 40px;
	left: 40px;
	border-top: 1px solid #c8c8c8;
	content: "";
}
.plusBox h3 {
	margin-bottom: 20px;
	color: #00a0e6;
	font-size: 1.8rem;
	font-weight: bold;
}
.plusBox ul {
	list-style: none;
	font-weight: bold;
}
.plusBox li + li { margin-top: 10px; }

@media screen and (max-width: 768px) {
	.plusBox::before {
		right: 20px;
		left: 20px;
	}
} /* */

@media screen and (max-width: 568px) {
	.plusBox {
		margin: 0 -20px;
		padding: 30px 20px;
	}
	.plusBox h3 {
		margin-right: -20px;
		margin-left: -20px;
	}
} /* */


/*======================================================================*
 *  [ charaPop ] 
 *======================================================================*/

.charaPop {
	max-width: 680px;
	margin: 0 auto;
	padding: 38px 0 30px;
}
.charaPop header {
	position: relative;
	padding: 25px 8px 15px;
	background: #e60012;
	color: #ffe236;
	text-align: center;
}
.charaPop header::before {
	position: absolute;
	top: -8px;
	right: 0;
	left: 0;
	height: 8px;
	background: url(../img/pop_bg.png) center bottom repeat-x;
	background-size: auto 8px;
	content: "";
}
.charaPop header h1 {
	margin-bottom: 10px;
	font-size: 2.4rem;
	line-height: 1.2;
}
.charaPop > div {
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	-webkit-align-items: center;
	align-items: center;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	padding: 20px 38px;
	background: #fff;
	border: 2px solid #e60012;
}
.charaPop figure { width: calc(60% - 30px); }
.charaPop section {
	width: 40%;
	margin: 15px 0;
}
.charaPop section h2 {
	margin-bottom: 20px;
	color: #e60012;
	font-famiry: Arial, sans-serif;
}
.charaPop section p {
	color: #3f3f3f;
	line-height: 1.8;
}
.charaPop section a {
	position: relative;
	display: inline-block;
	margin-top: 20px;
	padding: 10px 35px 10px 40px;
	border-radius: 5px;
	background-color: #eee;
	background-image: url(../img/icon_hp.png), url(../img/icon_blank.png);
	background-position: left 12px center, right 15px center;
	background-repeat: no-repeat, no-repeat;
	background-size: 22px 20px, 13px 13px;
	color: #e60012;
	font-size: 1.5rem;
	line-height: 1.2;
	text-decoration: none;
}
.charaPop section a:hover, 
.charaPop section a:active { background-color: #dedede; }
.charaPop > div div {
	width: 100%;
	text-align: center;
}
.charaPop .closeBtn {
	display: inline-block;
	padding-left: 30px;
	background: url(../img/icon_close.png) left center no-repeat;
	background-size: 24px 24px;
	color: #b4b3b3;
	font-weight: bold;
	line-height: 24px;
	cursor: pointer;
	text-decoration: none;
}

@media screen and (max-width: 568px) {
	.charaPop header { padding: 15px 8px 10px; }
	.charaPop header h1 { margin-bottom: 5px; }
	.charaPop > div {
		display: block;
		padding: 20px 18px;
	}
	.charaPop figure {
		width: 100%;
		text-align: center;
	}
	.charaPop figure img {
		width: 100%;
		max-width: 160px;
	}
	.charaPop section {
		width: 100%;
		margin-bottom: 20px;
	}
	.charaPop section h2 { margin-bottom: 10px; }
	.charaPop section a { margin-top: 10px; }
} /* */


/*======================================================================*
 *  [ keitruBox ] 
 *======================================================================*/

.keitruBox {
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	-webkit-flex-direction: row-reverse;
	flex-direction: row-reverse;
	max-width: 660px;
	margin: 70px auto;
	padding: 20px 17px;
	border: 3px dotted #717273;
	border-radius: 10px;
	font-size: 1.4rem;
	text-align: left;
}
.keitruBox > div {
	width: calc(65% - 30px);
	margin-left: 30px;
}
.keitruBox h2 {
	margin-bottom: 10px;
	color: #509029;
	font-size: 1.4rem;
	font-weight: normal;
}
.keitruBox h2 b {
	margin-top: 5px;
	font-size: 2.4rem;
}
.keitruBox section { padding-left: 4em; }
.keitruBox section + section { margin-top: 5px; }
.keitruBox section h3, 
.keitruBox section p {
	display: inline-block;
	vertical-align: top;
}
.keitruBox section h3 {
	width: 4em;
	margin-left: -4em;
}
.keitruBox div > p {
	margin-top: 20px;
	line-height: 1.6;
}
.keitruBox figure {
	width: 35%;
	text-align: right;
}

@media screen and (max-width: 568px) {
	.keitruBox {
		display: block;
		margin: 50px 0;
		padding-bottom: 10px;
	}
	.keitruBox > div {
		width: 100%;
		margin: 0 0 10px;
	}
	.keitruBox h2 {
		margin-bottom: 15px;
		text-align: center;
	}
	.keitruBox figure {
		width: 100%;
		text-align: center;
	}
} /* */


/*======================================================================*
 *  [ addressBox ] 
 *======================================================================*/

.addressBox {
	margin: 70px 0;
	font-size: 1.3rem;
	font-style: normal;
}
.addressBox ul {
	list-style: none;
	max-width: 950px;
	margin: 0 auto;
	padding: 0 10px;
}
.addressBox li {
	display: inline-block;
	margin: 0 10px;
}

@media screen and (max-width: 768px) {
	.addressBox { margin: 50px 0; }
	.addressBox li, 
	.addressBox li b { display: block; }
	.addressBox li + li { margin-top: 10px; }
} /* */


/*======================================================================*
 *  [ returnTOP ] 
 *======================================================================*/

.returnTOP {
	margin: 40px 0;
	font-size: 1.3rem;
}


/*======================================================================*
 *  [ socialBox ] 
 *======================================================================*/

.socialBox {
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-align-items: center;
	align-items: center;
	max-width: 950px;
	margin: 30px auto;
}
.socialBox a { margin: 0 10px; }


/*======================================================================*
 *  [ pageTop ] 
 *======================================================================*/

.pageTop {
	display: inline-block;
	color: #cecece;
	margin: 0 auto;
	text-decoration: none;
	font-size: 1.3rem;
	cursor: pointer;
}
.pageTop::before {
	display: block;
	width: 25px;
	height: 25px;
	margin: 0 auto;
	border-top: 5px solid #cecece;
	border-right: 5px solid #cecece;
	content: "";
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}


/*======================================================================*
 *  [ copyTxt ] 
 *======================================================================*/

.copyTxt {
	max-width: 950px;
	margin: 0 auto;
	padding: 25px;
}
.copyTxt small {
	color: #9d9d9d;
	font-size: 1.2rem;
}