html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body, a{
	line-height: 1;
	color: #0F3B06;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/*-----------reset css--------------*/

::selection {
background: #0F3B06;
}
::-moz-selection {
background: #0F3B06;
}


@font-face {
  font-family: hatton;
  src: url("../font/Hatton-Medium.woff") format("woff"),
       url("../font/Hatton-Medium.ttf") format("opentype");
}

body, p, ul, li, a, h1, h2, h3, h4{
	font-family: hatton, YuMincho, "Yu Mincho", "游ゴシック", serif;
	font-size: 16px;
}

p{
	line-height: 1.5;
    letter-spacing: 0.04em;
}

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

.fade{
	animation: fadeIn 1s ease 0s 1 forwards;
    -webkit-animation: fadeIn 1s ease 0s 1 forwards;
    opacity: 0;	
}


body{
	background-color: #EDF2EC;
	height: 100%;
}
	body#about, body#about a{
		background-color: #0F3B06;
		color: #c9d2c7;
	}


a{
	text-decoration: none;
}
a:hover{
	text-decoration: underline;
}

.wrapper{
    min-height: 100vh;
    position: relative;
}



header{
}
	header .btnIndex{
		right: 40px;
	    top: 40px;
	    position: fixed;
	}
	header .btnIndex a{
		height: 20px;
	    width: 20px;
	    border: 4px solid;
	    display: inline-block;
	    border-radius: 50%;
	    background-color: #0F3B06;
	    border:#0F3B06;
	}
	header .btnIndex a:hover{
		-webkit-transform: scale(0.9);
		-ms-transform: scale(1.3);
		transform: scale(1.3);
	}
	#about header .btnIndex a{
	    border: 4px solid;
	    background-color: #EDF2EC;
	    border:#EDF2EC;
	}
	header .title a{
		font-size: 20.5vw;
		position: fixed;
		left: 40px;
		top: 40px;
	}
	header .titleL a{
		font-size: 13vw;
	}
	header .title a:hover{
		text-decoration: none;
	}
	#about header .title a{
		font-size: 30px;
	}
	#join header .title a{
		font-size: 30px;
	}
	@media (min-width: 1500px){
		header .title a{
			font-size: 194px;
		}
	}




main{
	position: relative;
}
	main .img-wrap {
	    width: 65vw;
	    max-width: -webkit-calc(100vw - 80px);
	    left: 50%;
	    top: 50vh;
	    position: fixed;
	}
	@media (min-width: 1200px){
	main .img-wrap {
	    width: 780px;
	    max-width: -webkit-calc(100vw - 80px);

	    }}
	main .img-wrap img {
		--w: 16;
		--h: 9;
		--s: calc(var(--w) * var(--h) * var(--aspect-ratio));
		--x0: calc(var(--s) / 2);
		--x1: calc((var(--x0) + var(--s) / var(--x0)) / 2);
		--x2: calc((var(--x1) + var(--s) / var(--x1)) / 2);
		--x3: calc((var(--x2) + var(--s) / var(--x2)) / 2);
		--x4: calc((var(--x3) + var(--s) / var(--x3)) / 2);
		--x5: calc((var(--x4) + var(--s) / var(--x4)) / 2);
		--x6: calc((var(--x5) + var(--s) / var(--x5)) / 2);
		width: calc(100% * var(--x6) / var(--w));
		position: absolute;
		text-align: center;
		transform: translate(-50%,-50%);
	}


.joinus{
	position: absolute;
    top: 75vh;
    left: 40px;
}
	.joinus a{
		font-size: 20px;
	}




footer{
	position: absolute;
    bottom: 34px;
    left: 40px;
    min-width: -webkit-calc(100vw - 80px);
}
	footer .footer{
		width: auto;
		display: -webkit-flex;
	    display: -ms-flexbox;
	    display: flex;
	    flex-diretion: row;
	    justify-content: space-between;
	}
	footer .footer .address{
		flex-grow:4;
	}
	footer .footer .address .pcbr{
		display: none;
	}
	footer .footer .address .JPtxt{
		font-size: 105%;
		margin-left: -2px;
	}
	footer .footer .contact{
		flex-grow:4;
	}
	footer .footer .lang{
		flex-grow:1;
	}
	footer .footer .copy{
		flex-grow:1;
		text-align: right;
	}
	footer .footer .copy p{
		font-size: 10px;
		line-height: 1.1;
		margin-top: 5px;
	}



#about{
}
	#about .aboutTxt{
		position: absolute;
		bottom: 50px;
	    width: 50%;
	    right: 40px;
	}
	#about .aboutTxt .credit{
		margin-top: 29px;
	    font-size: 16px;
	    text-align: right;
	    opacity: 0;
	    animation: 2s fadeIn forwards;
		}
	@media (max-width: 1000px){
	#about .aboutTxt{
		width: 65%;
	}}
	@media (max-width: 750px){
	#about .aboutTxt{
	    right: 15px;		
		width: 80%;
		bottom: 35px;		
	}}
	@media (max-width: 480px){
	#about .aboutTxt{
		width:   -webkit-calc(100vw - 30px);
		margin-top: 300px;
	    bottom: auto;
	    padding-bottom: 55px;
	}}

	#about p{
		line-height: 1.7;
	    letter-spacing: 0.07em;
	}


#join{
}
	#join .joinTxt{
		position: absolute;
		top: 40vh;
		left: 40px;
		width: 60vw;
	}
	@media (min-width: 1160px){
	#join .joinTxt{
		top: 45vh;
		width: 700px;
	}}
	@media (max-width: 750px){
	#join .joinTxt{
		top: 50vh;
		width:   -webkit-calc(100vw - 80px);
	}}		
	@media (max-width: 650px){
	#join .joinTxt{
		left: 15px;
		top: 50vh;
		width:   -webkit-calc(100vw - 30px);
	}}		
	#join .joinTxt h2{
		font-size: 28px;
		margin-bottom: 28px;
	}
	#join .joinTxt .joinContact{
		margin-top: 25px;
	}
	#join .joinTxt .joinContact a{
		margin-left: 8px;
	}
	#join .joinTxt .backtop{
		margin-top: 50px;
	}


/*************SP***************/

@media (max-width: 650px){
	body, p, ul, li, a, h1, h2, h3, h4{
		font-family: hatton, YuMincho, "Yu Mincho", "游ゴシック", serif;
		font-size: 13px;
	}

	header .btnIndex{
		display: none;
	}
		#about header .btnIndex{
			display: inline;
			right: 15px;
			top: 15px;
		}
		header .title a{
			font-size: 36.5vw;
			position: fixed;
			left: 15px;
			top:  20px;
		}
		header .titleL a{
			font-size: 27vw !important;
		}



	main .img-wrap {
	    width: 100vw;
	    max-width: 100vw;
	    left: 50%;
	    top: 50%;
	}

	footer{
		position: fixed;
	    bottom: 10px;
	    left: 15px;
	    max-width: -webkit-calc(100vw - 30px);
	}
		footer .footer{
			flex-flow:row wrap;
			align-content: space-around;

		}
		footer .footer .address{
			flex-grow:5;
			flex-basis:50%;
			margin-bottom: 20px;
		}
		footer .footer .address .pcbr{
			display: block;
		}
		footer .footer .contact{
			flex-grow:5;
			flex-basis:50%;
		}
		footer .footer .lang{
			flex-grow:0;
			flex-basis:50%;
		}
		footer .footer .copy{
			flex-grow:0;
			flex-basis:50%;
			text-align: left;
		}
		footer .footer .copy .spbr{
			display: none;
		}
		footer p{
			font-size: 12px;
			line-height: 1.4;
		}

	.joinus {
		bottom: 168px;
	    left: 15px;
	    top: auto;
	    position: fixed;
	}
		.joinus a{
		    font-size: 22px;	
		}



}




@media (max-width: 480px){
		#join .wrapper{
			min-height: auto;
		}
		#join .joinTxt{
		    position: relative;
		    top: auto;
		    margin-top: 300px;
		}
		#join footer{
			position: relative;
			bottom: auto;
			margin-top: 88px;
			margin-bottom: 15px;
		}
}