@charset "utf-8";


/* ====================================
	
	----------------------------------
		Color
	----------------------------------
	
		Main     : #C30D24
		Accent   : #
	
	----------------------------------
		font
	----------------------------------
	
		游ゴシック
	
	----------------------------------
		Structure
	----------------------------------
	
		0. General
		1. Header
		2. Main
			2.1	Gaiyo
			2.2 Contact
		3. Footer
	
	----------------------------------
		Change Log
	----------------------------------
	
		- ***
		- ***
		- ***
	
==================================== */




/* ====================================

	0. General

==================================== */


html{
	font-size: 62.5%;
	margin: 0;
	padding: 0;
	overflow-y: scroll;
}

body {
	margin: 0;
	padding: 0;
	color: #000;
	font-size: 14px; 
	font-size: 1.4rem;
	font-family: -apple-system,BlinkMacSystemFont,"Helvetica Neue","Yu Gothic",YuGothic,Verdana,Meiryo,"M+ 1p",sans-serif;
	font-weight: 500;
	letter-spacing: 0.2em;
	line-height: 140%;
	word-break : break-all;
	 -webkit-text-size-adjust: 100%;
	position: relative;
}

/*
body {
	letter-spacing: 2.5px;
	line-height: 180%;
	color: #000;
	font-size: 14px;
	font-family: "游ゴシック",YuGothic,"メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック","MS PGothic",sans-serif;
	position: relative;
}
*/

a:link {
	color: #000;
	text-decoration: none;
}

a:visited {
	color: #000;
	text-decoration: none;
}

a:hover {
	color: #C30D24;
	text-decoration: underline
}

img{
	border: none;
	line-height: 0;
	vertical-align: bottom;
}

.base {
	width: calc(100% - 20px);
	max-width: 1080px;
	margin: 0 auto 0 auto;
	box-sizing: border-box;
}

	/* === ▽ スマートフォン ▽ === */
	@media (max-width: 1079px) {
		.base {
			width: 100%;
			max-width: 100%;
			padding: 0 15px;
		}
	}

h2 {
	text-align: center;
	margin-bottom: 40px;
}

h2 img {
	max-width: 100%
}



/* ====================================

	1. Header

==================================== */

header {
	overflow: hidden;
	padding: 25px 0 0 0;
}

header h1 {
	float: left
}

header nav ul {
	overflow: hidden;
	margin-left: auto;
	float: right;
	font-weight: bold;
	padding: 10px 0 0 0px;
}
	
header nav ul li {
	float: left;
	position: relative;
	padding: 0 0 0 20px;
	line-height: 140%;
	margin-left: 20px
}

header nav ul li:before {
	position: absolute;
	top: 4px;
	left: 0;
	width: 10px;
	height: 10px;
	background-color: #C30D24;
	content: "";
}

header nav ul li:last-child {
	padding: 0;
}

header nav ul li:last-child:before {
	display: none;
}

	/* === ▽ スマートフォン ▽ === */
	@media (max-width: 1079px) {
		header {
			margin: 0 auto 20px auto;
			padding: 25px 0 10px 0;
		}
		header h1 {
			float: none;
			margin-bottom: 10px;
		}
		
		header nav ul li {
			margin: 0 20px 10px 0;
		}
	}



/* ====================================

	2. Main

==================================== */

#top_box {
	height: 608px;
	position: relative;
}

#top_box h1 {
	position: absolute;
	top: 46%;
	left: 50%;
	-webkit-transform: translate(-50%,-50%);
	-moz-transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
	-o-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
}


/*
 	2.1 Gaiyo
==================================== */

#gaiyo {
	position: relative;
	margin: 0 auto 100px auto;
	text-align: center;
	font-weight: bold;
	font-size: 16px;
}

@media screen and (min-width:1024px) {
	#gaiyo h1 {
		position: absolute;
		top: 90px;
		left: 0;
		position: absolute;
		z-index: 1;
	}
}

@media screen and (min-width:0px) and ( max-width:1024px) {
	#gaiyo h1 {
		display: none
	}
	#LoI p,
	#OO p,
	#OC p{
		padding: 0 5px;
	}
}


#gaiyo h2,
#gaiyo p {
	position: relative;
	z-index: 999;
	line-height: 180%;
	background-color: transparent;
}


#LoI {
	padding: 0;
	background-color: #C30D24;
	padding: 80px 0 85px 0;
	color: #fff;
	line-height: 32px;
}

#OO {
	padding: 98px 0 96px 0;
	background-color: #fff;
}
	
#OC {
	padding: 80px 0 132px 0 ;
	background-color: #C30D24;
	text-align: center;
	color: #fff;
}

#LoI p,
#OO p,
#OC p {
	margin-bottom: 32px;
	padding: 0;
}

#LoI div,
#OC div {
	background-image: url(../images/red.png);
	position: relative;
	z-index: 999;
}
	

#OO div {
	background-image: url(../images/shiro.png);
	position: relative;
	z-index:999;
}

#LoI p:last-child,
#OO p:last-child,
#OC p:last-child {
	margin-bottom: 0 !important;
}


/*
 	2.2 Contact
==================================== */

section#contact {
	margin: 0 auto 120px auto;
}

section#contact h1 {
	width: 100%;
	margin: 0 auto 100px auto;
	font-size: 18px;
	font-size: 1.8rem;
	font-weight: bold;
	text-align: center;
	text-indent: 4px;
	letter-spacing: 4px;
	line-height: 100%;
	color: #444;
}

section#contact h1 span {
	display: block;
	margin-bottom: 40px;
	font-size: 64px;
	font-size: 6.4rem;
	font-weight: bold;
	letter-spacing: 0;
	color: #C30D24;
	position: relative;
}

section#contact h1 span::after {
	position: absolute;
	display: block;
	content: '';
	bottom: -65px;
	width: 120px;
	left: 0;
	right: 0;
	margin: 0 auto;
	border-bottom: 4px solid #C30D24;
}

section#contact p {
	margin: 0 auto 40px auto;
	text-align: center;
	font-weight: bold;
	font-size: 16px;
}

.bt,
.bt:link,
.bt:visited {
	width: 400px;
	margin: 0 auto;
	padding: 20px 0 18px 0;
	display: block;
	font-size: 18px;
	font-size: 1.8rem;
	text-align: center;
	text-decoration: none;
	letter-spacing: 3px;
	line-height: 100%;
	color: #FFF;
	background-color: #C30D24;
	border: 1px solid #C30D24;
	box-sizing: border-box;
	position: relative;
}

.bt:hover {
	color: #C30D24;
	background-color: #FFF;
}

.bt::after {
	display: block;
	content: '';
	position: absolute;
	top: 42%;
	right: 25px;
	width: 8px;
	height: 8px;
	border-right: 2px solid #FFF;
	border-bottom: 2px solid #FFF;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

a.bt:hover::after {
	border-right: 2px solid #C30D24;
	border-bottom: 2px solid #C30D24;
}

	/* === ▽ スマートフォン ▽ === */
	@media (max-width: 1079px) {
		section#contact {
			margin: 0 auto 120px auto;
			padding: 0 20px;
			box-sizing: border-box;
		}
		.bt,
		.bt:link,
		.bt:visited {
			width: 100%;
		}
		section#contact h1 {
			margin: 0 auto 80px auto;
			font-size: 16px;
			font-size: 1.6rem;
		}
		section#contact h1 span {
			font-size: 48px;
			font-size: 4.8rem;
		}
		section#contact h1 span::after {
			bottom: -45px;
		}
	}



/* ====================================

	3. footer

==================================== */

footer {
	text-align: center;
	font-weight: bold;
}

footer h1 {
	font-size: 185%;
	font-weight: bold;
	padding: 10px 0;
	margin-bottom: 8px;
}

footer #copy {
	background-color: #C30D24;
	color: #fff;
	display: block;
	width: 100%;
	padding: 8px 0;
}


/*
 	3.1 Page top
==================================== */

.go_top{
	position: fixed;
	right: 20px;
	margin-bottom: 20px;
}

.go_top a{
	display: block;
	width: 60px;
	height: 60px;
	color: #C30D24;
	text-indent: -9999px;
	background-color: #FFF;
	border: 2px solid #C30D24;
	position: relative;
	border-radius: 30px;
	filter:alpha(opacity=80);
	-moz-opacity: 0.8;
	opacity: 0.8;
	box-sizing: border-box;
}

.go_top a::after {
	display: block;
	content: '';
	position: absolute;
	top: 45%;
	left: 0;
	right: 0;
	width: 12px;
	height: 12px;
	margin: auto;
	border-right: 2px solid #C30D24;
	border-bottom: 2px solid #C30D24;
	-webkit-transform: rotate(-135deg);
	transform: rotate(-135deg);
}

.go_top a:hover{
	filter:alpha(opacity=100);
	-moz-opacity: 1.0;
	opacity: 1.0;
}