@charset "UTF-8";

/* タブレット向けレイアウト */
@media all and (max-width: 768px) {

	.header-title {
		font-size: 25px;
		color: #ffffff;
		padding: 25px 0 0 25px;
		letter-spacing: 2px;
	}

	.container-header {
		margin: 0 auto;
		max-width: 700px
	}

	.container-pan {
		margin: 0 auto;
		max-width: 740px
	}

	.hamburger {
		float: right;
		font-size: 40px;
		color: #ffffff;
		padding: 15px 20px 0 0;
		display: none;
	}

	.container-main {
		margin: 0 auto;
		max-width: 700px
	}

	.garally-comic {
		background-image: url(../garally/img/comic.jpg);
		background-size: cover;
		color: #ffffff;
		text-align: center;
		position: relative;
		padding: 350px 0 360px 0;
	}

	.garally-illust {
		background-image: url(../garally/img/illust.jpg);
		color: #ffffff;
		background-size: cover;
		text-align: center;
		position: relative;
		padding: 350px 0 360px 0;
	}

	.garally-design {
		background-image: url(../garally/img/design.jpg);
		color: #ffffff;
		background-size: cover;
		text-align: center;
		position: relative;
		padding: 350px 0 360px 0;
	}

	.garally-award {
		background-image: url(../garally/img/award.jpg);
		color: #ffffff;
		background-size: cover;
		text-align: center;
		position: relative;
		padding: 350px 0 360px 0;
	}

	.contact-pc {
		display: none;
	}

	.contact-tab {
		display: block;
	}

	.contact-sp {
		display: none;
	}

}

/* モバイル向けレイアウト */
@media all and (max-width: 450px) {

	.container-header {
		margin: 0 auto;
		max-width: 300px
	}

	.header-logo {
		width: 15%;
		height: 15%;
		margin: 0 0 0 20px;
	}

	.header-title {
		font-size: 20px;
		color: #ffffff;
		padding: 30px 0 0 10px;
		letter-spacing: 2px;
	}

	.container-header {
		margin: 0 auto;
		max-width: 380px
	}

	.hamburger {
		float: right;
		font-size: 40px;
		color: #ffffff;
		padding: 15px 20px 0 0;
		display: block;
	}

	.contents {
		display: none;
	}

	.pan {
		background-color: rgba(0, 100, 0, 0.9);
		height: 30px;
		width: 100%;
		display: inline-block;
		text-align: left;
		top: 95px;
		z-index: 10;
	}

	.container-pan {
		margin: 0 auto;
		max-width: 360px
	}

	.menu-back {
		display: none;
	}

	#carouselControls {
		width: 100%;
	}

	main {
		background-color: #efefef;
		padding: 50px 0 50px 0;
	}

	.container-main-contact {
		margin: 0 auto;
		max-width: 900px
	}

	.pop-copy {
		text-align: center;
		font-size: 25px;
		padding: 0 0 30px 0;
	}

	.container-main {
		margin: 0 auto;
		max-width: 340px
	}

	.garally-comic {
		background-image: url(../garally/img/comic.jpg);
		background-size: cover;
		color: #ffffff;
		text-align: center;
		position: relative;
		padding: 200px 0 210px 0;
	}

	.garally-illust {
		background-image: url(../garally/img/illust.jpg);
		color: #ffffff;
		background-size: cover;
		text-align: center;
		position: relative;
		padding: 200px 0 210px 0;
	}

	.garally-design {
		background-image: url(../garally/img/design.jpg);
		color: #ffffff;
		background-size: cover;
		text-align: center;
		position: relative;
		padding: 200px 0 210px 0;
	}

	.garally-award {
		background-image: url(../garally/img/award.jpg);
		color: #ffffff;
		background-size: cover;
		text-align: center;
		position: relative;
		padding: 200px 0 210px 0;
	}

	.contact-pc {
		display: none;
	}

	.contact-tab {
		display: none;
	}

	.contact-sp {
		display: block;
	}

	.footer-ad-pc {
		display: none;
	}

	.footer-ad-sp {
		display: block;
	}

	.footer-contents {
		color: #ffffff;
		font-size: 11px;
		padding: 20px 0 0 0;
	}

	.button-top {
		width: 50px;
		height: 50px;
		background-color: rgba(255, 0, 120, 0.7);
		z-index: 100;
		position: fixed;
		right: 20px;
		bottom: 20px;
		cursor: pointer;
		display: none;
		border-radius: 50px;
	}

	.button-top i {
		padding: 10px 0 0 15px;
		font-size: 30px;
		color: #ffffff;
	}

}