@charset "utf-8";

/* -------------------------------------------------------------------------------------

	web font

 ------------------------------------------------------------------------------------- */

/* --@import 'http://fonts.googleapis.com/css?family=Open+Sans|Quicksand';
@import 'http://fonts.googleapis.com/earlyaccess/notosansjapanese.css';--- */

@font-face {
  font-family: 'CygnetRound';
  src: url('font/CygnetRound.ttf') format('truetype');
}

/* -------------------------------------------------------------------------------------

	body

 ------------------------------------------------------------------------------------- */
 
body{	
	margin:0;
	line-height:150%;
	font-size:95%;
	color:#333;

	/* --font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", 游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN",HGS明朝E,  Arial, "メイリオ", Meiryo, sans-serif;-- */
	font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
	
	
	-webkit-text-size-adjust: 100%;
}

a:link { color: #697f3e;text-decoration:underline;}
a:visited { color: #697f3e;text-decoration:underline;}
a:hover {color: #697f3e;text-decoration:none;}
a:active {color: #697f3e;text-decoration:none;}

article,aside,canvas,details,figcaption,figure,
footer,header,hgroup,menu,nav,section,summary{
	display:block;
}

nav{
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", 游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN",HGS明朝E,  Arial, "メイリオ", Meiryo, sans-serif;
}

h1,h2,h3,h4,h5,h6{
	font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", 游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN",HGS明朝E,  Arial, "メイリオ", Meiryo, sans-serif;
}

/* page */

p{
	margin:0px;
	padding:0px;
}

img{
	border:0px;
	vertical-align:bottom;
}

ul,li,dl,dt,dd{
	padding:0;
	margin:0;
	list-style-type: none;
}


/* --------------------------------------------------
clearfix
-------------------------------------------------- */
.clearfix { overflow:hidden; }
.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}
* html .clearfix { zoom:1; }
*:first-child+html .clearfix { zoom:1; }

/* margin ==================================================================*/

.mrb4{	margin-bottom:4px;}
.mrb10{	margin-bottom:10px;}
.mrb15{	margin-bottom:15px;}
.mrb20{	margin-bottom:20px;}
.mrb30{	margin-bottom:30px;}
.mrb40{	margin-bottom:40px;}
.mrb60{	margin-bottom:60px;}


h1,h2,h3,h4,h5,h6{
	margin:0;
	padding:0;
}


/* link color ==================================================================*/


/* -------------------------------------------------------------------------------------

	ページトップへ戻る

-------------------------------------------------------------------------------------- */

#page-top {
	position: fixed;
	bottom: 30px;
	right: 30px;
	font-size: 77%;
	background: rgba(0,0,0,0.9);
	z-index: 10000;
}


#page-top a {
	padding: 10px 20px;
	display: block;
	text-decoration: none;
	color: #fff;
}

#page-top a:hover {
	text-decoration: none;
	opacity:0.7;
}


/* =================================
	common parts
======================================== */

.black-btn{
	position: relative;
	margin: 0 auto;
}

.black-btn a{
	display: block;
	background:#333;
	color: #fff;
	padding: 15px 0;
	text-align: center;
	position: relative;
	text-decoration: none;
	width: 90%;
	margin: 0 auto;
	-webkit-transition: box-shadow .18s ease;
	transition: box-shadow .18s ease;
	z-index: 19;
}

.black-btn a:hover{
	display: block;
	box-shadow: inset 0 0 0 5px #666;
	background: #999;
	color: #fff;
	padding: 15px 0;
	text-align: center;
	width: 90%;
	margin: 0 auto;
	-webkit-transition: box-shadow .18s ease;
	transition: box-shadow .18s ease;
}

.black-btn p{
	position: absolute;
	top: 50%;
	right: 0%;
	-webkit-transform: translate(0%, -50%); /* Safari用 */
	transform: translate(0%, -50%);	
	transition: .3s;
	z-index: 20;
}

.black-btn:hover p{
	position: absolute;
	top: 50%;
	right: -5%;
	-webkit-transform: translate(0%, -50%); /* Safari用 */
	transform: translate(0%, -50%);	
}


.white-btn{
	position: relative;
	margin: 0 auto;
}

.white-btn a{
	display: block;
	background:#fff;
	color: #000;border: 1px #000 solid;
	padding: 15px 0;
	position: relative;
	text-align: center;
	text-decoration: none;
	width: 90%;
	margin: 0 auto;
	-webkit-transition: box-shadow .18s ease;
	transition: box-shadow .18s ease;
	z-index: 19;
}

.white-btn a:hover{
	display: block;
	box-shadow: inset 0 0 0 5px #666;
	background: #999;
	color: #fff;
	padding: 15px 0;
	text-align: center;
	width: 90%;
	margin: 0 auto;
	-webkit-transition: box-shadow .18s ease;
	transition: box-shadow .18s ease;
}

.white-btn p{
	position: absolute;
	top: 50%;
	right: 0%;
	-webkit-transform: translate(0%, -50%); /* Safari用 */
	transform: translate(0%, -50%);	
	transition: .3s;
	z-index: 20;
}

.white-btn:hover p{
	position: absolute;
	top: 50%;
	right: -5%;
	-webkit-transform: translate(0%, -50%); /* Safari用 */
	transform: translate(0%, -50%);	
}


.transparent-btn{
	position: relative;
	margin: 0 auto;
}

.transparent-btn a{
	display: block;
	background:none;
	color: #000;border: 1px #000 solid;
	padding: 15px 0;
	text-align: center;
	text-decoration: none;
	position: relative;
	width: 90%;
	margin: 0 auto;
	-webkit-transition: box-shadow .18s ease;
	transition: box-shadow .18s ease;
	z-index: 19;
}

.transparent-btn a:hover{
	display: block;
	box-shadow: inset 0 0 0 5px #666;
	background: #999;
	color: #fff;
	padding: 15px 0;
	text-align: center;
	width: 90%;
	margin: 0 auto;
	-webkit-transition: box-shadow .18s ease;
	transition: box-shadow .18s ease;
}

.transparent-btn p{
	position: absolute;
	top: 50%;
	right: 0%;
	-webkit-transform: translate(0%, -50%); /* Safari用 */
	transform: translate(0%, -50%);	
	transition: .3s;
	z-index: 20;
}

.transparent-btn:hover p{
	position: absolute;
	top: 50%;
	right: -5%;
	-webkit-transform: translate(0%, -50%); /* Safari用 */
	transform: translate(0%, -50%);	
}


.red-btn{
	position: relative;
	margin: 0 auto;
}

.red-btn a{
	display: block;
	background:#fff;
	color: #dc0000;
	position: relative;
	border: 1px #dc0000 solid;
	padding: 15px 0;
	text-align: center;
	text-decoration: none;
	width: 90%;
	margin: 0 auto;
	-webkit-transition: box-shadow .18s ease;
	transition: box-shadow .18s ease;
	z-index: 19;
}

.red-btn a:hover{
	display: block;
	box-shadow: inset 0 0 0 5px #FF9393;
	background: #fff;
	color: #dc0000;
	padding: 15px 0;
	text-align: center;
	width: 90%;
	margin: 0 auto;
	-webkit-transition: box-shadow .18s ease;
	transition: box-shadow .18s ease;
}

.red-btn p{
	position: absolute;
	top: 50%;
	right: 0%;
	-webkit-transform: translate(0%, -50%); /* Safari用 */
	transform: translate(0%, -50%);	
	transition: .3s;
	z-index: 20;
}

.red-btn:hover p{
	position: absolute;
	top: 50%;
	right: -5%;
	-webkit-transform: translate(0%, -50%); /* Safari用 */
	transform: translate(0%, -50%);	
}