@charset "UTF-8";
main {
	overflow: hidden;
	text-align: center;
	margin: 50px auto 0;
}
img {
	width: auto;
	max-width: 100%;
	height: auto;
	margin: 0 auto;
	display: inline-block;
}
a img:hover,
a:hover { opacity: 0.8; }
body { background-color: #fff; }
h3.border:before { 
	position: absolute;
	top: calc(50% - 1px);
	left: 0;
	width: 100%;
	height: 1px;
	content: '';
	background: #000;
}
h3.border span { position: relative;background: #fff; }
h4 { font-size: 17px; }

/* レスポンシブデザイン */
@media screen and (min-width: 1024px) {
	body { width: 100%; margin: 0 auto; }
}
@media screen and (min-width:769px) {
	.pcview { display: block; }
	.spview { display: none; }
	h2 { font-size: 25px; margin: 30px 0; letter-spacing: 0.1em; }
	h3 { font-size: 20px; }
	h3.border { position: relative; padding: 0 65px; }
	h3.border span { padding: 0 20px; font-size: 20px; }
	#fixedBnr img { width: 100%; max-width: 140px; }
	footer .two_col {
		display: flex;
		flex-wrap: nowrap;
		justify-content: space-between;
		padding: 0 20px;
	}
	footer .two_col a {
		width: 48%;
	}
}
@media screen and (max-width:768px) {
	.spview { display: block; }
	.pcview { display: none; }
	section { padding: 0 10px; }
	section.maxwidth { padding: 0; }
	h2 { font-size: 20px; margin: 30px 0; letter-spacing: 0.1em; }
	h3 { font-size: 17px; }
	h3.border { display: grid; padding: 0 30px; position: relative; }
	h3.border span { padding: 0; font-size: 17px; }
	.btn_01 img { width: 90%; }
	#fixedBnr img { width: 100%; max-width: 100px; }
	footer .two_col {
		display: block;
		padding: 0 20px;
	}
	footer .two_col a { margin-bottom: 20px; }
}

/* header */
@media screen and (min-width:1024px) {
	header {
		padding: 10px;
	}
	header .headmenu { max-width: 1400px; margin: 0 auto; }
	.pcheader { display: inline; }
}
@media screen and (max-width:1023px) {
	header {
		padding: 10px 0;
	}
	header h1 img {
		margin-left: 10px;
	}
}
header {
	margin: 0 auto;
	position: relative;
	background-color: #000;
	position: fixed;
	top: 0;
	z-index: 5;
	width: 100%;
}
header h1 {
	display: inline-block;
	width: 20%;
}
header h1 img {
	max-width: 200px;	
}
header ul {
	display: inline-block;
	width: 78%;
	text-align: right;
}
header ul li {
	display: inline-block;
	margin: 0 20px;
}
header ul li a {
	color: #fff;
}

/* catchcopy */
@media screen and (min-width:769px) {
	.catchcopy .box {
		max-width: 768px;
		padding: 50px;
		margin: -80px auto 0;
	}
	.catchcopy img.movieicon {
		max-width: 200px;
		margin-top: -300px;
	}
}
@media screen and (max-width:768px) {
	.catchcopy .box {
		width: 80%;
		padding: 20px 10px 50px;
		margin: -50px auto 0;
	}
	.catchcopy img.movieicon {
		width: 150px;
	}
}
.catchcopy .box {
	background-color: #fff;
	text-align: center;
	position: relative;
}
.catchcopy img.title {
	margin: 30px auto;
	max-width: 500px;
}
.catchcopy p.message {
	max-width: 600px;
	margin: 0 auto;
}

/* messageform */
@media screen and (min-width:769px) {
	section.messageform { padding: 50px 0; max-width: 768px; margin: 0 auto; }
	section.messageform .box { padding: 70px; }
	section.messageform .twocol.messagecontent { justify-content: space-between; align-items: initial; }
	section.messageform .twocol.messagecontent div { width: 40%;}
	section.messageform .twocol { display: flex; justify-content: center; align-items: center; }
	section.messageform .twocol div.image { width: 35%; padding: 0 10px; }
	section.messageform .twocol div.content { text-align: left; width: 48%; }
	section.messageform .method { padding: 30px; }
	section.messageform .method .twocol { display: flex; justify-content: center; align-items: center; margin: 30px 0; }
	section.messageform .method .twocol div.image { width: 40%; }
	section.messageform .method .twocol div.content { width: 60%; }
	section.messageform .method .twocol ul li { font-size: 18px; }
	section.messageform .method .twocol img { width: 200px; }
	section.messageform .method img.title { max-width: 200px; margin: -50px auto 50px; }
	section.messageform .method h4.title { margin-top: -30px; font-size: 17px; }
	section.messageform .method ul { list-style-type: disc; text-align: left; margin-left: 20px; }
	.googleform { width: 80%; }
	.contactbox { width: 60%; }
	.contactbox dt, dd { display: inline-block; }
}
@media screen and (max-width:768px) {
	section.messageform { padding: 50px 10px; margin: 0 auto; }
	section.messageform .box { padding: 50px 30px; }
	section.messageform .twocol div.image { margin: 20px 0; }
	section.messageform .method { padding: 30px 10px; }
	section.messageform .method .twocol { margin: 30px 0; }
	section.messageform .method .twocol div.image { margin-bottom: 20px; }
	section.messageform .method .twocol ul li { font-size: 15px; }
	section.messageform .method .twocol img { width: 120px; }
	section.messageform .method img.title { max-width: 200px; margin: -50px auto 50px; }
	section.messageform .method h4.title { margin-top: -30px; font-size: 17px; }
	section.messageform .method ul { list-style-type: disc; text-align: left; margin-left: 20px; }
	.googleform { width: 100%; }
	.contactbox { width: 80%; }
}
section.messageform .box { border: 1px solid #3FBCDC; text-align: center; }
section.messageform .twocol.messagecontent { margin-bottom: 30px; }
section.messageform .twocol.messagecontent div { margin: 30px 0; background-color: #BBE2EF; padding: 20px; border-radius: 10px; text-align: left; }
section.messageform .twocol.messagecontent div p.title { font-size: 14px; color: #000; }
section.messageform .twocol.messagecontent div p { color: #3E3A39; }
section.messageform img.title { max-width: 500px; margin-bottom: 50px; }
section.messageform .method { background-color: #FFF000; border-radius: 10px; margin: 70px auto 30px; }
.googleform { background-color: #40BCDA; margin: 50px auto 20px; }
.googleform a { display:block; padding: 20px 50px; font-size: 25px; color: #fff; line-height: 1em;  }
.googleform a span { font-size: 18px; color: #fff; }
.contactbox { border: 1px solid #40BCDA; border-radius: 10px; padding: 20px 10px; margin: 20px auto; }
.contactbox { text-align: left; }
.contactbox dt, dd { padding: 0 20px; }
.contactbox dt { color: #40BCDA; min-width: 50px; }
section.messageform p.end { margin: 50px auto 0; }
section.messageform a.messagelink { color: #40BCDA; font-size: 20px; }

/* alefire */
@media screen and (min-width:769px) {
	section.alefire { padding: 22% 0 8%; }
	section.alefire .twocol { width: 400px; }
	section.alefire .content p.notice { padding: 30px 50px; }
	section.alefire .twocol dl dd { padding: 0; font-size: 18px; }
}
@media screen and (max-width:768px) {
	section.alefire { padding: 250px 10px 50px; }
	section.alefire .twocol { width: 90%; }
	section.alefire .content p.notice { padding: 30px 5px; }
	section.alefire .twocol dl dd { padding: 0; font-size: 13px; }
}
section.alefire { background-image: url("../images/ale_back.png"); background-size: cover; background-position: center top; }
section.alefire .content { max-width: 768px; margin: 0 auto; }
section.alefire .content .catch { margin: 50px auto; }
section.alefire .content p,
section.alefire .content h3 { color: #fff; }
section.alefire .content p.notice { display: inline-block; margin: 20px auto 100px; border-top: 1px solid #fff; border-bottom: 1px solid #fff; }
section.alefire .twocol { display: flex; justify-content: center; align-items: center; margin: 30px auto; background-color: #fff; border-radius: 10px; text-align: left; }
section.alefire .twocol div { margin: 10px 20px; }
section.alefire .twocol dl dt { color: #E84746; padding: 0;}	
section.alefire .content h4 { color: #E84746; }
section.alefire .content p.return { font-size: 17px; margin-bottom: 10px; }

/* campfire */
@media screen and (min-width:769px) {
	.campfire a { padding: 20px 0 50px; }
	.campfire h2 { line-height: 1.4em; }
	.campfire h2 span { font-size: 16px; color: #fff; }
}
@media screen and (max-width:768px) {
	.campfire a { padding: 20px 10px 50px; }
	.campfire h2 { font-size: 16px; line-height: 1.6em; }
	.campfire h2 span { font-size: 12px; color: #fff; }
}
.campfire a { display: block; width: 100%; }
.campfire { background-color: #F64744; margin-bottom: 70px; }
.campfire h2 { color: #fff; }
.campfire img.logo { width: 200px; }

/* message page */
@media screen and (min-width:1400px) {
	body.messagepage img.title { margin: 20px auto; }
	body.messagepage .gridbox ul { column-count: 4; }
	body.messagepage .gridbox ul {
		margin: 0 auto;
		column-gap: 40px;
	}
	body.messagepage .gridbox { padding: 0 0 50px; }
	body.messagepage .gridbox ul > li { padding: 30px; }
	body.messagepage .gridbox ul > li p:first-child { font-weight: bold; font-size: 20px; display: block; }
	body.messagepage .gridbox ul > li p { font-size: 15px; font-weight: normal; display: inline-block; margin-right: 5px; }
}
@media screen and (min-width:1024px ) and (max-width:1399px) {
	body.messagepage img.title { margin: 20px auto; }
	body.messagepage .gridbox ul { column-count: 4; }
	body.messagepage .gridbox ul {
		margin: 0 auto;
		column-gap: 20px;
	}
	body.messagepage .gridbox { padding: 0 0 50px; }
	body.messagepage .gridbox ul > li { max-width: 200px; padding: 10px; }
	body.messagepage .gridbox ul > li p:first-child { font-weight: bold; font-size: 14px; display: block; }
	body.messagepage .gridbox ul > li p { font-size: 11px; font-weight: normal; display: inline-block; margin-right: 5px; }
}
@media screen and (min-width:769px ) and (max-width:1023px) {
	body.messagepage img.title { margin: 20px 0 20px 20px; }
	body.messagepage .gridbox ul { column-count: 3; }
	body.messagepage .gridbox ul {
		margin: 0 auto;
		column-gap: 20px;
	}
	body.messagepage .gridbox { padding: 0 0 50px; }
	body.messagepage .gridbox ul > li { max-width: 200px; padding: 10px; }
	body.messagepage .gridbox ul > li p:first-child { font-weight: bold; font-size: 14px; display: block; }
	body.messagepage .gridbox ul > li p { font-size: 11px; font-weight: normal; display: inline-block; margin-right: 5px; }
}
@media screen and (max-width:768px) {
	body.messagepage img.title { margin: 20px 0 20px 20px; }
	body.messagepage .gridbox ul { column-count: 2; }
	body.messagepage .gridbox ul {
		margin: 0 auto;
		column-gap: 20px;
	}
	body.messagepage .gridbox { padding: 0 10px 50px; }
	body.messagepage .gridbox ul > li { max-width: 200px; padding: 10px 20px; }
	body.messagepage .gridbox ul > li p:first-child { font-weight: bold; font-size: 14px; display: block; }
	body.messagepage .gridbox ul > li p { font-size: 11px; font-weight: normal; display: inline-block; margin-right: 5px; }
}
body.messagepage img.title { text-align: center; max-height: 200px; }
body.messagepage { background-color: #3DBDDC; }
body.messagepage .gridbox { max-width: 1300px; display: flex; margin: 0 auto 70px; }
body.messagepage .gridbox ul > li {
	text-align:left;
	background-color: #fff;
	margin-bottom: 20px; 
	-webkit-column-break-inside: avoid;
	page-break-inside: avoid;
	break-inside: avoid;
}

/* news page */
main.news { max-width: 768px; }
main.news .head { margin: 50px auto 100px; }
main.news img.title { width: 200px; }
main.news section { margin: 50px auto 100px; border-bottom: 1px solid #B3B3B3; padding-bottom: 100px; }
main.news section p.date { font-size: 13px; }
main.news section h3 { font-size: 20px; }
main.news section p.thum { margin: 30px auto; }


/* img */
@media screen and (min-width:769px) {
	img.chara { width: 150px; }
}
@media screen and (max-width:768px) {
	img.chara { width: 100px; }
}


/* footer */
@media screen and (min-width:769px) {
	p.copyright { font-size: 20px; line-height: 1.5em; }
	p.copyright span { font-size: 14px; margin-right: 15px; color: #595757; }
}
@media screen and (max-width:768px) {
	p.copyright { text-align: left; padding-left: 10px; font-size: 16px; line-height: 1.7em; }
	p.copyright span { font-size: 12px; margin-right: 5px; color: #595757; }
}

footer {
	margin: 0 auto;
	overflow: hidden;
	text-align: center;
	clear: both;
	padding: 20px 0;
	background-color: #fff;
	position: fixed;
	bottom: 0;
	width: 100%;
}
p.copyright { color: #595757; }

#fixedBnr {
	position:fixed;
	bottom: 10px;
	right: 10px;
	text-align: right;
	width: 100px;
	z-index: 10;
}

/* SPメニュー */
@media screen and (min-width:1024px) {
	#toggle, #globalNav { display: none; }
}
@media screen and (max-width:1023px) {
	.pcheader { display: none; }
	#toggle {
		position: fixed;
		z-index: 9999;
		top: 17px;
		right: 15px;
		width: 35px;
		height: 25px;
		cursor: pointer;
	}
	#toggleBar,
	#toggleBar::before,
	#toggleBar::after {
		position: absolute;
		left: 0;
		display: block;
		width: 35px;
		height: 2px;
		border-radius: 2px;
		background: #fff;
		content: "";
		transition: 0.5s ease;
	}
	#toggleBar {
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		margin: auto;
	}

	#toggleBar::before { margin-top: -10px; }
	#toggleBar::after { margin-top: 10px; }
	#toggleBar.active { background: transparent; }
	#toggleBar.active::before {
		margin-top: 0;
		transform: rotate(-45deg);
	}
	#toggleBar.active::after {
		margin-top: 0;
		transform: rotate(45deg);
	}
	.nav-contents {
		position: fixed;
		top: 54px;
		display: none;
		overflow-y: auto;
		width: 100%;
		max-width: 100%;
		height: 100%;
		padding-bottom: 60px;
		background: #000;
		text-align: center;
		flex-basis: 100%;
		flex-grow: 1;
		-webkit-overflow-scrolling: touch;
	}
	.nav-inner { padding: 30px 0 40px; }
	header .nav-inner ul { width: 100%; text-align: center; display: block; }
	header .nav-inner ul li { display: block; margin: 20px auto; }
}

/* 問い合わせボタンアニメーション */
@keyframes anime01 {
	0% { opacity: 0; transform: scale(1.1) translateY(24px); }
	32% { opacity: 0; transform: scale(1.1) translateY(24px); }
}
.biyon-tate{
	-webkit-animation-name:biyon-tate;
	-webkit-animation-property:-webkit-transform;
	-webkit-animation-duration:1000ms;
	-webkit-animation-timing-function:ease-out;
	-webkit-animation-iteration-count:infinite;
	-webkit-transform-origin:center bottom;
	animation-name:biyon-tate;
	animation-duration:1000ms;
	animation-timing-function:ease-out;
	animation-iteration-count:infinite;
  }
@-webkit-keyframes biyon-tate{
	0% {}
	25%{ -webkit-transform:scale(0.9,1.1); }
	100%{ -webkit-transform:scaleX(1.1,0.5); }
}
@keyframes biyon-tate{
	0%{}
	25%{ transform:scale(0.9,1.1); }
	100%{ transform:scaleX(1.1,0.5); }
}