@charset "UTF-8";

body {
	min-width:100%;
}
#head {
	position:fixed;
	z-index:99;
	top:0;
	left:0;
	width:100%;
	text-align:center;
	background:#202020;
}
#header {
	width:100%;
	box-sizing:border-box;
	padding:10px 30px;
}
#header .logo {
	width:300px;
    margin-right:auto;
}
#header > a {
	background:#ffcc00;
	font-size:1.6rem;
	color:#000000;
	line-height:1;
	padding:.5em 1em;
	border-radius:4px;
	transition:.3s;
	margin-left:auto;
}
#header > a:hover {
	background:#ffaa00;
}
#header > ul li:not(:last-child) {
	margin-right:30px;
}
#header > ul a {
	font-size:1.6rem;
	line-height:1;
	color:#ffffff;
	display:block;
	position:relative;
}
#header > ul a::after {
	content:'';
	display:block;
	width:0%;
	border-bottom:1px solid #ffffff;
	position:absolute;
	bottom:-5px;
	left:50%;
	transform:translateX(-50%);
	transition:.3s;
}
#header > ul a:hover::after,
#header > ul li.active a::after {
	width:100%;
}

/****/
.top-container {
	overflow:hidden;
	height: 100vh;
}
.fv .swiper-slide {
	background-repeat:no-repeat;
	background-position:center center;
	background-size:cover;
}
.fv .slide1 {
    background-image:url(../img/reason/fv1.jpg);
}
.fv .slide2 {
    background-image:url(../img/reason/fv2.jpg);
}
.fv .slide3 {
    background-image:url(../img/reason/fv3.jpg);
}
.fv > .text {
	position:absolute;
	top:30%;
	left:10vw;
	z-index:1;
}
.fv .text h1 {
	font-size:5rem;
	line-height:1;
	margin-bottom:1em;
	color:#ffffff;
	text-shadow:0 0 4px rgba(0,0,0,.5),0 0 5px rgba(0,0,0,.5),0 0 6px rgba(0,0,0,.5),0 0 7px rgba(0,0,0,.5);
}
#main .text p {
	font-size:1.8rem;
	color:#ffffff;
	font-weight:600;
	text-shadow:0 0 4px rgba(0,0,0,.5),0 0 5px rgba(0,0,0,.5),0 0 6px rgba(0,0,0,.5),0 0 7px rgba(0,0,0,.5);
}

/****/
.section.main {
	background:url(../img/reason/bg.jpg) no-repeat center top;
	background-size:cover;
}
.main .contents {
	height:100vh;
	min-height: 700px;
}
.main.mainbox {
	width:100%;
	text-align:center;
	box-sizing:border-box
	padding:0 50px;
}
.main .mainbox > div {
	position:absolute;
	width:100%;
	box-sizing:border-box;
	padding:0 50px 50px;
	text-align:center;
	left:0%;
	top:42%;
    transform:translateY(-50%);
}
.main .mainbox h2 {
	color:#ffffff;
	font-size:4.0rem;
	margin-bottom:1em;
}
#main .main .mainbox p {
	color:#ffffff;
	line-height:3;
}
.main .slide-container {
   width: 100vw;
	overflow:hidden;
	position: absolute;
	left: 0;
	bottom: 35px;
}
.main .swiper-slide {
	width:25%;
}


/****/
.contbox .contents {
	max-width:1100px;
	margin:0 auto;
	box-sizing:border-box;
	padding: 80px 50px 40px;
}
.contbox .contents h2 {
	font-size:3.0rem;
	text-align:center;
	margin-bottom:2em;
}
.contbox .contents h2 span {
	font-size:5.0rem;
}
.contbox .contents h2 span::after {
	content:'/';
	display:inline-block;
	font-size:1.5em;
	margin:0 .2em;
	transform:translateY(.15em);
}
.contbox .contents .fbox {
	width:100%;
}
.contbox .contents .fbox img,
.contbox .contents .fbox .detail {
	width:calc(50% - 25px);
}
#main .contbox .contents .fbox .detail p {
	line-height:1.8;
}
#main .contbox .contents .fbox .detail p.body {
	font-weight:600;
	font-size:1.1em;
	margin-bottom:.5em;
}
#main .contbox .contents .fbox .detail .link {
	box-sizing:border-box;
    padding:10px 10px 0;
    text-align:right;
}
#main .contbox .contents .fbox .detail .link a {
	display:inline-block;
	font-size:1.5rem;
	line-height:2.4;
	padding:0 1em;
	text-align:center;
	background:#204b8d;
	color:#ffffff;
	transition:.3s;
	box-sizing:border-box;
	border:3px solid #204b8d;
	margin:0 auto;
}
#main .contbox .contents .fbox .detail .link a:hover {
	background:#FFFFFF;
	color: #204b8d;
}

.section.contact {
	background:url(../img/reason/contact_bg.png) no-repeat center center;
	background-size:cover;
}
.section.contact .contents h2 {
	color:#FFFFFF;
	margin-bottom:.5em;
}
#main .section.contact .contents p {
	color:#FFFFFF;
	text-align:center;
	margin-bottom:4em;
}
.section.contact .contents .fbox {
	width:100%;
}
.section.contact .contents .fbox > a {
    width:calc(100%/3);
    text-align:center;
	background:#c7c2bc;
	transition:.3s;
}
.section.contact .contents .fbox > a:hover {
	opacity:.8;
}
.section.contact .contents .fbox > a:nth-child(even) {
	background:#d4cfcb;
}
.section.contact .contents .fbox > a .img {
	padding-top:35%;
	background-repeat:no-repeat;
	background-positoin:center center;
	background-size:cover;
	box-sizing:border-box;
}
.section.contact .contents .fbox > a:nth-child(1) .img {
    background-image:url(../img/reason/img05.jpg);
}
.section.contact .contents .fbox > a:nth-child(2) .img {
    background-image:url(../img/reason/img06.jpg);
}
.section.contact .contents .fbox > a:nth-child(3) .img {
    background-image:url(../img/reason/img07.jpg);
}
.section.contact .contents .fbox > a h3 {
	font-size:2.0rem;
	padding:1.5em 0;
}

#fp-nav {
	background:rgba(255,255,255,.8);
	border-radius:6px;
}
#foot {
	width:100%;
	text-align:center;
	font-size:1.3rem;
	line-height:1.3;
	box-sizing:border-box;
	padding:10px;
	color:#ffffff;
	background:#202020;
	position:fixed;
	left:0;
	bottom:0;
	z-index:99;
}

/****/
.anim1 {
	opacity:0;
	transform:translatey(-50px);
	transition-delay:.6s;
	transition-duration:.5s;
}
.anim2 {
	opacity:0;
	transform:translatey(50px);
	transition-delay:.6s;
	transition-duration:.5s;
}
.section.on .anim1,
.section.on .anim2 {
	opacity:1;
	transform:translatey(0);
}

.responsive-menu-button {
    display:none!important;
}



@media screen and (max-width:1024px){

#header > ul {
  -webkit-box-ordinal-group: 1;
             -ms-flex-order: 2;
                      order: 2;
  width:100%;
  -webkit-box-pack: center;
     -ms-flex-pack: center;
   justify-content: center;
   padding:15px 0 10px
}

}

@media screen and (max-width:768px){

#header {
	padding:10px 20px;
}
#header .logo {
	width:200px;
}

/****/
.fv .text h1 {
	font-size:4rem;
}
#main .text p {
	font-size:1.6rem;
}

/****/
.main .mainbox h2 {
	font-size:3.0rem;
}
#main .main .mainbox p {
	color:#ffffff;
	line-height:3;
}
.main .slide-container {
	overflow:hidden;
}
.main .swiper-slide {
	width:33%;
}


/****/
.contbox .contents h2 {
	font-size:2.4rem;
}
.contbox .contents h2 span {
	font-size:4.0rem;
}
.contbox .contents .fbox img,
.contbox .contents .fbox .detail {
	width:calc(50% - 15px);
}
#main .contbox .contents .fbox .detail p {
	line-height:1.6;
}
#main .contbox .contents .fbox .detail .link a {
	font-size:1.2rem;
}
.section.contact .contents .fbox > a h3 {
	font-size:1.8rem;
}
#foot {
	font-size:1.2rem;
}

	
}

@media screen and (max-width:640px){

#header {
	padding:10px 15px;
}
#header .logo {
	width:210px;
    margin-right:auto;
}
#header > a {
	font-size:1.4rem;
	padding:.4em .8em;
}
#header > ul li:not(:last-child) {
	margin-right:4vw;
}
#header > ul a {
	font-size:1.2rem;
}

/****/
.fv > .text {
	position:absolute;
	top:30%;
	left:10vw;
	z-index:1;
}
.fv .text h1 {
	font-size:3rem;
}
#main .text p {
	font-size:1.4rem;
}

/****/
.main .contents {
    min-height: auto;
}
.main .mainbox > div {
	padding:0 40px 30px;
	top:48%;
}
.main .mainbox h2 {
	font-size:2.0rem;
}
#main .main .mainbox p {
	font-size:1.2rem;
}
.main .slide-container {
	overflow:hidden;
}
.main .swiper-slide {
	width:150px;
}


/****/
.contbox .contents {
	padding:100px 30px 80px;
}
.contbox .contents h2 {
	font-size:1.6rem;
	margin-bottom:1.5em;
}
.contbox .contents h2 span {
	font-size:3.0rem;
}
.contbox .contents h2 span::after {
	content:'/';
	font-size:1.2em;
	transform:translateY(.1em);
}
.contbox .contents .fbox img {
    margin-bottom:15px;
}
.contbox .contents .fbox img,
.contbox .contents .fbox .detail {
	width:100%;
}
#main .contbox .contents .fbox .detail p {
	line-height:1.5;
	font-size:1.2rem;
}
#main .contbox .contents .fbox .detail p.body {
	margin-bottom:.3em;
	font-size:1.4rem;
	line-height:1.4;
}
#main .contbox .contents .fbox .detail .link {
    padding:5px 0 0;
}
#main .contbox .contents .fbox .detail .link a {
	display:block;
	width:100%;
	font-size:1.2rem;
}
#main .section.contact .contents p {
	margin-bottom:2em;
	font-size:1.2rem;
}
.section.contact .contents .fbox {
	width:100%;
}
.section.contact .contents .fbox > a .img {
	padding-top:50%;
}
.section.contact .contents .fbox > a h3 {
	font-size:1.4rem;
	padding:1em 0;
}

#fp-nav.fp-right {
	right:5px;
}
#foot {
	font-size:1.1rem;
}


}

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

.spOnly {
    display:none;	
}

}