@charset "UTF-8";
/* CSS Document */

*, *: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;
}
/*
Noto Sans Japanese
Thin		ExtraLight	100 
Light		Light		200 
DemiLight	Normal		300 
Regular		Regular		400 
Medium		Medium		500 
Bold		Bold		700 
Black		Heavy		900 
*/

html { font-size: 62.5% !important;
	scroll-padding-top: 80px;
	/* スクロールを滑らかにする（お好みで） */
	scroll-behavior: smooth;
}

html, body {
	height: 100%;
	width: 100%;
}

body {
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 300;
	font-size: 1.5rem; /*ベースを10pxにしています*/
	background-color: #FFF;
	color: #000;
	line-height:1.8;
	letter-spacing:0.08rem;
	
	animation: fadeIn 2s ease 0s 1 normal;
    -webkit-animation: fadeIn 2s ease 0s 1 normal;
}
@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}


/*   all parts   */
a{
    transition: 1s;
}
a:hover{
    opacity:0.75;
}

.pc{display:block;}
.sp{display:none;}

img{width:100%;}

span{
	font-weight:500;
}

.contents{
	width:100%;
	margin:0;
	padding:0;
	background:#FFF;
}

/*   Header   */
header{
	height: 80px;
	width:100%;
	position: fixed;
	left:0;
	top:0;
	
	background-color: #000;
	z-index:999;
	
}
header h1{
	display:block;
	margin-top: 26px;
	margin-left: 28px;
	width: 228px;
	height: 34px;position: relative;
	z-index:1!important;
}
#header h1 a{
	display:block;
}

.menu{
	margin-top:120px;
	border-top:solid 1px #C9C9C9;
}
.menu li{
	width:100%;
	padding:10px 20px;
	display:inline-block;
	
	font-size:14px;
	font-weight:300;
	
	border-bottom:dotted 1px #C9C9C9;
}
.menu li a{color:#FFF;}
@media screen and (max-width:767px) {
*, *: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;
}
	html { font-size: 62.5% !important; }
	body {
	font-size: 1.6rem; /*ベースを10pxにしています*/
}
	.pc { display:none;}
	.sp { display:block;}
	/*   Header   */
	header{	}
	header h1{
		width:200px;
		margin-left:15px;
	}
}
/*   footer   */
#page_top{
  	position:fixed; /*固定*/
  	bottom:10px; /*場所を右下に移動*/
  	right:30px; /*場所を右下に移動*/
  	display:block; /*aタグをblock要素に変更*/
  	width: 64px;
  	height: 64px;
    z-index:10;
}

#page_top .pt a{
  	width: 64px;
  	height: 64px;
	display:block;
	background:url(/image/pagetop.svg) no-repeat center bottom;
	background-size:cover;
    
    text-indent: -9999px;
    margin-bottom:5px;
    transition: 3s;
}
#page_top .pt a:hover{
  	opacity:0.7;
}
footer {
	width: 100%;
	
	/*margin:3.571vw auto;*/
}
/*#footer{border:solid 1px #000;height:auto;padding:3.571vw 0;margin:0 auto 110px auto;}*/
#footer{
	width: 50%;
	display:flex;
	align-items:center;
	justify-content: center;
	height:auto;
	padding:0;
	margin:0 auto;
}
#footer{
	display:-webkit-box;
	display: -webkit-flex;
	display:-ms-flexbox;
	display: flex;
	-webkit-flex-wrap:wrap;
	-ms-flex-wrap:wrap;
	flex-wrap:wrap;
	
	justify-content: space-between;
	align-items:center;
}


#footer #mark_box{
	width:100%;
	margin-bottom:15px;
	
	display:block;
	text-align:center;
}
#footer #mark_box img{
	width:193px;
	margin:0 auto;
}
#footer #cp_box{
	width:100%;
	margin:0 auto;
	text-align:center;
	padding-bottom:50px;
}
#footer #cp_box .cr{
	display:block;
	text-align:center;
	font-size:1.2rem;}
@media screen and (max-width:767px) {
	#page_top{
		position:fixed; /*固定*/
		bottom:10px; /*場所を右下に移動*/
		right:30px; /*場所を右下に移動*/
		display:block; /*aタグをblock要素に変更*/
		width: 50px;
		height: 50px;
		z-index:10;
	}

	#page_top .pt a{
		width: 50px;
		height: 50px;
		display:block;
		background:url(/image/pagetop.svg) no-repeat center bottom;
		background-size:cover;

		text-indent: -9999px;
		margin-bottom:5px;
		transition: 3s;
	}
	#page_top .pt a:hover{
		opacity:0.7;
	}
	#footer{
		width:100%;
		display:block;
	}


	#footer #mark_box{
		width:100%;
		margin-bottom:15px;

		display:block;
		text-align:center;
	}
	#footer #mark_box img{
		width:150px;
		margin:0 auto;
	}
	#footer #cp_box{
		width:100%;
		margin:0 auto;
		text-align:center;
		padding-bottom:10px;
	}
	#footer #cp_box .cr{
		display:block;
		text-align:center;
		font-size:12px;}
}

.mgb{
	position:relative;
	display:block;
	padding-bottom:500px;
}