@charset "UTF-8";

html,html * {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

body {
	background: #313131;
	color: #ffffff;
	font-size: 13px;
}

img {
	width: 100%;
	height: auto;
	display: table;
}

ul,ol {
	margin: 0;
	padding: 0;
	list-style: none;
}


/*------ ヘッダー ------ */
img.site_ttl {
	width: 128px;
	height: 64px;
	margin-right: 10px;
	margin-left: 10px;
	filter: drop-shadow(0px 0px 30px rgba(0,0,0,0.7));
}

.globalMenu a {
	display: block;
	padding: 15px;
	color: #ffffff;
	background: #191919;
	font-size: 13px;
	text-decoration: none;
	border-bottom: 1px solid #434343;
}

.globalMenu a:hover {
	background-color: rgba(0,0,0,0.5);
}


/* トグルボタン */
#nav_toggle {
	display: block;
	position: relative;
	right: 10px;
	width: 42px;
	height: 51px;
	cursor: pointer;
	background-color: #666666;
	text-align: center
}

#nav_toggle span {
	display: block;
	position: absolute;
	left: 6px;
	width: 30px;
	border-bottom: 3px solid #eeeeee;
	transition: 0.35s ease-in-out;
}

#nav_toggle span:nth-child(1) {
	top: 9px;
}

#nav_toggle span:nth-child(2) {
	top: 18px;
}

#nav_toggle span:nth-child(3) {
	top: 27px;
}

#nav_toggle span:nth-child(4) {
	border: none;
	color: #eeeeee;
	font-size: 9px;
	font-weight: bold;
	top: 34px;
}

.open #nav_toggle span:nth-child(1) {
	top: 18px;
	left: 6px;
	transform: rotate(-45deg);
}

.open #nav_toggle span:nth-child(2),
.open #nav_toggle span:nth-child(3) {
	top: 18px;
	transform: rotate(45deg);
}

/* ------ フッター ------ */
footer {
	background: #383838;
	box-shadow: 0px 0px 6px 0 rgba(0,0,0,0.50);
	padding: 35px 0 40px;
}

footer p {
	margin-left: 20px;
	margin-right: 20px;
	margin-bottom: 35px;
}

.footerMenu a {
	display: block;
	padding: 15px;
	color: #ffffff;
	font-size: 13px;
	text-decoration: none;
	border-bottom: 1px solid #555555;
}

.footerMenu a.first {
	border-top: 1px solid #555555;
}

.footerMenu a:hover {
	background-color: rgba(0,0,0,0.3);
}

/* ------ コンテンツ ------ */
/* 共通 */
section.hero {
	margin-bottom: 17px;
	box-shadow: 0px 0px 6px 0 rgba(0,0,0,0.50);
}

.blue-box {
	background: #2f4b78;
}

.gray-box {
	background: #5e5e5e;
}

.purple-box {
	background: #5b3a6d;
}

.green-box {
	background: #377044;
}

.blue-box,.gray-box,.purple-box,.green-box {
	padding-top: 90px;
	padding-bottom: 90px;
	padding-left: 13px;
	padding-right: 13px;
	margin-bottom: 17px;
	box-shadow: 0px 0px 6px 0 rgba(0,0,0,0.50);
}

h2 {
	margin-bottom: 18px;
	font-size: 20px;
}

.box-image1,.box-bp,.box-image2,.box-bat,.box-glove,.box-bat-content {
	margin-bottom: 17px;
	box-shadow: 0px 0px 6px 0 rgba(0,0,0,0.50);
}

/* トップページ */
img.top_ttl1 {
	width: 319px;
	height: 14px;
}

img.top_ttl2 {
	width: 328px;
	height: 14px;
}

img.top_ttl3 {
	width: 332px;
	height: 14px;
}

.box-bp {
	background-image: url(../img/top_box_img3.jpg);
	background-position: top left;
	background-repeat: no-repeat;
	background-size: cover;
}

/* Bats */
section.bats-page h3 {
	font-size: 13px;
	margin-bottom: 1em;
}

/* Contact */
section.contact-page {
	margin-bottom: 17px;
	box-shadow: 0px 0px 6px 0 rgba(0,0,0,0.50);
	background: #434343;
}

div.contact_area {
	margin-left: 13px;
	margin-right: 13px;
	padding-top: 90px;
	padding-bottom: 90px;
}

div.contact_area h2 {
	font-size: 20px;
	margin-bottom: 2px;
}

div.contact_area p.catch {
	margin-bottom: 40px;
}

.contact_area table {
	width: 100%;
	font-size: 13px;
	margin-bottom: 1em;
}

.contact_area  table th {
	font-weight: normal;
	text-align: left;
}

.contact_area th,
.contact_area td {
	padding: 3px 0px 3px 0px;

}

.contact_area span.red {
	background: #9e83d7;
	color: #fff;
	padding: 6px 16px;
	white-space: nowrap;

}

.contact_area table input,
.contact_area table textarea {
	outline: 0;
	border: 1px solid #777;
	margin: 0;
	padding: 6px;
	width: 95%;
}

.contact_area textarea { height: 145px; }

.contact_area .btn input {
	border: none;
	background: #9e83d7;
	color: #fff;
	margin: 0;
	padding: 6px 40px;
	font-size: 13px;
	cursor: pointer;
}

div.contact_send_area_c,
div.contact_send_area {
	margin-top: 20px;
}

div.contact_send_area_c div.text,
div.contact_send_area div.text {
	margin-bottom: 10px;
}

div.contact_send_area_c div.btn,
div.contact_send_area div.btn {
	text-align: center;
}

.contact_area .emphasis {
	color: #cc3333;
}

p.text_error,
p.text_thx {
	margin-top: 40px;
	margin-bottom: 40px;
}

/* 大きい画面用の設定 */
@media(min-width:768px) {
	/* ヘッダー */
	header {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 100;
	width: 100%;
	}
	header .container {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	max-width: 1100px;
	margin-left: auto;
	margin-right: auto;
	}
	.globalMenu ul {
	display: flex;
	}
	.globalMenu a {
	padding: 28px 16px;
	border-right: 1px solid #434343;
	border-bottom: none;
	}
	.globalMenu a.last {
	border-right: none;
	}

	/*トグルボタン*/
	#nav_toggle { display: none; }

	/* フッター */
	footer p {
	margin-left: 50px;
	margin-right: 50px;
	margin-bottom: 10px;
	}
	.footerMenu ul {
	display: flex;
	margin-left: 50px;
	margin-right: 50px;
	}
	.footerMenu a {
	padding: 0 28px 0 0;
	border-bottom: none;
	}
	.footerMenu a.first {
	border-top: none;
	}
	.footerMenu a:hover {
	background-color: rgba(0,0,0,0);
	}

	/* 共通 */
	.blue-box,.gray-box,.purple-box,.green-box {
	display: flex;
	align-items: center;
	padding-top: 0;
	padding-bottom: 0;
	}
	.blue-box,.gray-box,.purple-box,.green-box {
	flex: 1;
	}
	.row-box {
	display: flex;
	}

	/* トップページ */
	.top-row1,.top-row3 {
	display: flex;
	}
	.box-image1 {
	flex: 2;
	margin-left: 17px;
	}	
	.box-bp {
	flex: 1;
	order: 2;
	margin-left: 17px;
	}
	.top-row2 {
	height: auto;
	flex: 2;
	order: 1;
	display: flex;
	flex-direction: column-reverse;
	}
	.box-image2 {
	flex: 1;
	margin-left: 17px;
	}
	.box-blue-reverse {
	order: 2;
	margin-left: 17px;
	}
	.box-glove {
	flex: 2;
	order: 1;
	}
	/* Bats */
	.box-bat-content {
	flex: 2;
	margin-left: 17px;
	display: flex;
	align-items: center;
	background: #4c4c4c;
	}
	/* Contact */
	div.contact_area {
	margin-left: 80px;
	margin-right: 80px;
	padding-top: 90px;
	padding-bottom: 90px;
	}
	div.contact_send_area {
	display: flex;
	align-items: center;
	}
	div.contact_send_area div.text {
	margin-bottom: 0;
	}
}

@media(min-width:1200px) {
	div#wrapper {
	width: 1100px;
	margin: 100px auto 100px;
	position: relative;
	}
	.globalMenu a {
		padding: 28px;
	}
	/* Contact */
	div.contact_area {
	margin-left: 275px;
	margin-right: 87px;
	padding-top: 145px;
	padding-bottom: 115px;
	}
}

/* 小さい画面用の設定 */
@media (max-width: 767px) {
	header .container-small {
	display: flex;
	align-items: center;
	justify-content: space-between;
	}
	img.site_ttl {
	margin-top: 10px;
	margin-bottom: 10px;
	}
	.globalMenu {
	display: none;
	}
	.box-bp {
	height: 600px;
	}
}

@media (max-width: 360px) {
	img.top_ttl1,img.top_ttl2,img.top_ttl3 {
	width: 100%;
	height: auto;
	}
}