﻿@charset "utf-8";

/**
 * Setup
 */
*, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;}
body { font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック', 'MS PGothic',sans-serif;}
h1,h2,h3,h4,h5,h6{ font-weight: normal;}
a { color: #0066ff; text-decoration: underline;	transition: 0.7s;}
a:hover { text-decoration: none;}
a:visited {} 
img{ max-width: 100%;}
input[type="text"],input[type="password"],textarea{ border: 1px solid #ccc;}
li{ list-style: none;}
hr{ border: 1px solid #ddd;}
div,p{ word-break: break-all;}
strong{}
em{ font-style: normal;}
table{ border-collapse: collapse;}
th{ vertical-align: top; font-weight: normal; text-align: left;}
td{ vertical-align: top;}



/*
 * BACKGROUND Rules = #ffffff or #000000
 * TEXT Rules = #fefefe or #010101
*/



/**
 * clearfix
 */
.clearfix:after{ visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0;}



/**
 * Font color, Text align
 */
.red{ color: #E60012;}
.blue{ color: #33B3FF;}
.green{ color: #89BD00;}
.orange{ color: #ffcc00;}
.pink{ color: #F85291;}
.glay{ color: #999966;}
.bold{ font-weight: bold;}
.small{ font-size:77%;}
.right{ text-align: right;}
.left{ text-align: left;}
.center{ text-align: center;}



/**
 * List Style
 */
.decimal,.circle,.disc,.upper_roman,.lower_roman,.lower-latin{ margin-left: 20px;}
.decimal>li{ list-style-type: decimal;}
.circle>li{ list-style-type: circle;}
.disc>li{ list-style-type: disc;}
.upper_roman>li{ list-style-type: upper-roman;}
.lower_roman>li{ list-style-type: lower-roman;}
.lower-latin>li{ list-style-type: lower-latin;}



/**
 * Basic Table Style
 */
.table{ border-top: 1px solid #ccc; border-left: 1px solid #ccc;}
.table th,.table td{ padding: 10px; border-bottom: 1px solid #ccc; border-right: 1px solid #ccc;}
.table th{ background: #eeeeee;}



/**
 * Font size
 */
.f10 { font-size:65%; }
.f12 { font-size:82%; }
.f14 { font-size:100%; }
.f16 { font-size:115%; }
.f18 { font-size:125%; }
.f20 { font-size:150%; }
.f22 { font-size:165%; }
.f24 { font-size:175%; }
.f25 { font-size:185%; }
.f26 { font-size:195%; }



/**
 * Margin
 */
.mb5{ margin-bottom: 5px;}
.mb10{ margin-bottom: 10px;}
.mb15{ margin-bottom: 15px;}
.mb20{ margin-bottom: 20px;}
.mb25{ margin-bottom: 25px;}
.mb30{ margin-bottom: 30px;}
.mb35{ margin-bottom: 35px;}
.mb40{ margin-bottom: 40px;}



/**
 * Padding
 */
.pd5{ padding: 5px;}
.pd10{ padding: 10px;}
.pd15{ padding: 15px;}
.pd20{ padding: 20px;}
.pd25{ padding: 25px;}
.pd30{ padding: 30px;}
.pd35{ padding: 35px;}
.pd40{ padding: 40px;}






body{
	background: #f8f8f8;
	border-top: 3px solid #000;
}

header{
	margin-bottom: 120px;
	padding: 120px 0 0;
}

header h1{
	margin-bottom: 30px;
	text-align: center;
	font-weight: normal;
	font-size: 40px;
}

header h2{
	text-align: center;
	font-weight: normal;
	font-size: 20px;
}





main{
	margin-bottom: 120px;
	display: block;
}

main section+section{
	margin-top: 120px;
}

main h3{
	margin: 0 20px 30px;
	display: flex;
	justify-content: center;
	overflow: hidden;
	text-align: center;
}

main h3 p{
	position: relative;
	font-weight: bold;
}

main h3 p:before{
	width: 100px;
	content: "";
	position: absolute;
	left: -120px;
	top: calc(50% - 2px);
	border-bottom: 1px solid #ccc;
}

main h3 p:after{
	width: 100px;
	content: "";
	position: absolute;
	right: -120px;
	top: calc(50% - 2px);
	border-bottom: 1px solid #ccc;
}

main .list{
	text-align: center;
}

main .list li+li{
	margin-top: 30px;
}

main .list .title{
	margin-bottom: 30px;
	font-weight: bold;
}

main .list .text{

}

main .button{
	text-align: center;
}

main .button a{
	padding: 20px 60px;
	display: inline-block;
	position: relative;
	background: #000;
	border: 1px solid #000;
	text-decoration: none;
	color: #fefefe;
}

main .button a:hover{
	background: #fff;
	color: #000;
}

main .button a:before{
	width: 8px;
	height: 8px;
	margin-left: 12px;
	margin-top: -2px;
	content: "";
	border: solid 1px #fff;
	border-top: none;
	border-left: none;
	position: absolute;
	top: calc(50% - 2px);
	right: 45px;
	transform: rotate(-45deg);
}

main .button a:hover:before{
	border: solid 1px #000;
	border-top: none;
	border-left: none;
}





footer{
	padding: 100px 0 30px;
	background: #222;
	color: #fefefe;
}

footer h4{
	margin-bottom: 30px;
	text-align: center;
}

footer .links{
	margin-bottom: 120px;
	padding: 0 30px;
}

footer .links ul{
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}

footer .links li{
	width: 200px;
	margin: 10px 10px 0;
}

footer .links a{
	padding: 10px 0;
	display: block;
	background: #eee;
	border: 1px solid #eee;
	border-radius: 30px;
	text-decoration: none;
	text-align: center;
	font-size: 12px;
	color: #333;
}

footer .links a:hover{
	background: #000;
	color: #fefefe;
}

footer .copyright{
	text-align: center;
	font-size: 11px;
}






/**************************************************
 * Development PC
 */

@media only screen and (min-width: 750px) {

}






/**************************************************
 * Development SP
 */

@media only screen and (max-width: 749px) {
	header h1{
		font-size: 34px;
	}
	header h2{
		font-size: 15px;
	}
	footer .links li,
	footer .links a{
		width: 100%;
	}
}



