@charset "utf-8";

/*-----------------------------------
リセット
-----------------------------------*/
*{ margin: 0;padding: 0;}
a { text-decoration : none;}
ul, ol { list-style : none;}
img { vertical-align : middle;border-style:none;}

/*-----------------------------------
基本設定
-----------------------------------*/
html {
  font-family: sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}
body {
    color:#333;
	background-color:#FFF;
	text-align:center;
	font-size:14px;
	
	opacity: 0;
	animation: OpenIn 2.5s ease;
	animation-fill-mode: forwards;
}
@keyframes OpenIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

#wrap a { 
	opacity: 1;
	transition: 0.4s;
}
#wrap a:hover { 
	opacity: 0.7;
	transition: 0.4s;
}
@media screen and (max-width: 700px) {
#wrap a:hover { 
	opacity: 1;
	transition: 0.4s;
}
}

.nolink:hover {
	opacity: 1!important;
	cursor: default
}

@media screen and (min-width: 701px) {
.sp {display: none}
}
@media screen and (max-width: 700px) {
.pc {display: none}
}

#flg1,#flg2,#flg3,#flg4 {
	padding-top: 40px;
    margin-top: -40px;
}

.slide_in.act_on {
	animation: ActSlideU 1.5s ease;
	animation-fill-mode: forwards;
}
@keyframes ActSlideU {
    0% {opacity: 0; transform: translate(0px,80px);}
    100% {opacity: 1; transform: translate(0px,0px);}
}

/*-----------------------------------
Contents
-----------------------------------*/
.back_map {
	content:"";
	display:block;
	background-image:url("../images/back.jpg");
	background-repeat:no-repeat;
	background-position:50% 100%;
	background-size: cover;
	
	width: 100vw;
	height: 100vh;
	position: fixed;
	top: 0;
	left: 0;
	z-index: -1;
}
#wrap {
	text-align:center;
	max-width: 1600px;
	width: 100%;
	margin: 6.1% auto 0 auto;
	position: relative;
}
@media screen and (max-width: 700px) {
#wrap {
	margin-top: 13.5%;}
}

#wrap img {
	width:100%;
}

.usr_head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	max-width: 1600px;
	width: 100%;
	margin: 0 auto;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;

	background-color: #FFF;
	box-sizing: border-box;
	box-shadow: 0 3px 3px rgb(0 0 0 / 10%);
	z-index: 9;
}
.usr_head img {
    width: auto!important;
	max-width: 100%;
	max-height: 140px;
}


.points {
	display: flex;
	flex-wrap: wrap;
}
.points p {
	width: 50%;
}
@media screen and (max-width: 700px) {
.points {
	display: block;
}
.points p {
	width: 100%;
}
}

.steps {
	text-align:center;
	max-width: 1600px;
	width: 100%;
	position: relative;
	background-image:url("../images/step_back.jpg");
	background-repeat:no-repeat;
	background-position:50% 100%;
	background-size: cover;
	padding-bottom: 8%;
}
.fl {
	position: absolute;
	top: -1%;
}
@media screen and (max-width: 700px) {
.fl {
	top: -0.5%;
}
}


.foot_area {
	padding: 2% 0 6% 0;
	background-color: #eee;
	position: relative;
}
@media screen and (max-width: 700px) {
.foot_area {
	padding-bottom: 20%;
}
}
.foot_area .fbt {
	max-width: 420px;
	margin: 6% auto;
	width: 80%;
}

.foot_bt {
	width: 95%;
	position: fixed;
	bottom: 1.5%;
	left: 0;
	right: 0;
	margin: 0 auto;
	
	display: flex;
	z-index: 3;
}
@media screen and (min-width: 701px) {
.foot_bt {display: none}
}


/*-----------------------------------
Footer
-----------------------------------*/
#copyright {
	font-family: 'Montserrat', 'Helvetica Neue', sans-serif;
	text-align:center;
	font-size:10px;
	letter-spacing:0.08em;
	font-weight: 500;
	width:100%;
	color:#666;
	padding: 5% 0;
	background-color: #FFF;
}
@media screen and (max-width: 700px) {
#copyright {
	padding: 8% 0 18% 0;
}
}