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

#wrap{
	padding-top: 52px;
	position: relative;
}

#wrap #bg_cover{
	transition: all ease-in .3s;
	width: 0;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 102;
	font-size: 0;
}

#wrap.open #bg_cover{
	content: "";
	width: 100%;
	background: rgba(0,0,0,0.8);
}


/* header
   ========================================================================== */
header{
	position: fixed;
	top: 0;
	width: 100%;
	background: #fff;
	z-index: 100;
}

header .inner{
	padding: 10.5px 10px;
}

header .site_name{
	margin: 0 0 0;
	width: 110px;
	line-height: 0;
}

header .site_name a{
	display: block;
}

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

	header .inner{
		padding: 10px 10px;
	}

	header .site_name{
		width: 120px;
	}
	
}


/* btn_wrap
   ========================================================================== */
.btn_wrap{
	position: absolute;
	top: 12px;
	right: 50px;
	width: 140px;
    text-align: right;
}

.btn_wrap .login{
	margin: 0 0 0;
}

.btn_wrap .login a{
	padding: 5px;
	display: block;
	background: #eee;
	color: #212121;
	text-align: center;
	font-size: 1em;
	line-height: 1;
	letter-spacing: 0.05em;
	font-weight: 400;
}

.btn_wrap .language{
	margin: 1px 0 0;
}

.btn_wrap .language_btn,
.btn_wrap .language_list li a{
	padding: 5px 5px 5px 35px;
	display: block;
	background: #eee;
	color: #212121;
	text-align: left;
	font-size: 1em;
	line-height: 1;
	letter-spacing: 0.05em;
	font-weight: 400;
	position: relative;
}

.btn_wrap .language_btn,
.btn_wrap .language_list li{
	margin: 1px 0 0;
}

.btn_wrap .language_btn.on{
	background: #4DBFD2;
	color: #fff;
}

.btn_wrap .language_btn::before,
.btn_wrap .language_list li a::before{
	content: "\f103";
	font-family: FontAwesome;
	position: absolute;
	margin: auto;
	left: 15px;
	top: 0;
	bottom: 0;
	display: flex;
	align-items: center;
}

.btn_wrap .language_btn.on::before{
	content: "\f102";
}

.btn_wrap .language_list li a::before{
	content: "\f105";
	left: 18px;
}


/* スライドメニュー
   ========================================================================== */
#ham_btn{
    position: fixed;
    right: 0;
    top: 0;
    transition: all ease-in 0.3s;
    font-size: 26px;
    color: #444;
    display: block;
    z-index: 109;
    text-align: center;
    cursor: pointer;
    transform: rotate(360deg);
    width: 50px;
    height: 50px;
    box-sizing: border-box;
    background: none;
    padding: 14px 12px;
}

#ham_btn .inner{
    padding: 10px 0 0;
    width: 30px;
    height: 23px;
    display: block;
    position: relative;
    transition: all ease-out 0.8s;
    box-sizing: border-box;
}


#ham_btn .inner .bar,
#ham_btn .inner .bar:before,
#ham_btn .inner .bar:after{
    transition: all ease-out 0.3s;
    transition-delay: 0.3s;
    text-indent: -9999px;
    height: 2px;
    width: 25px;
    background: #444;
    display: block;
}

#ham_btn .inner .bar:before{
    content: "";
    position: absolute;
    top: 3px;
    left: 0;
}

#ham_btn .inner .bar:after{
    content: "";
    position: absolute;
    bottom: 4px;
    left: 0;
}


#ham_btn.open{
    transform: rotate(0deg);
}

#ham_btn.open .bar{
    background: transparent;
}

#ham_btn.open .bar:before{
    transform: rotate(45deg);
    top: 11px;
    background: #fff;
}

#ham_btn.open .bar:after{
    transform: rotate(-45deg);
    bottom: 10px;
    background: #fff;
}

body.open{
    position: fixed;
    width: 100%;
}

#slide_menu{
    display: block;
    position: fixed;
    top: 0;
    right: -280px;
    width: 280px;
    height: 100%;
    background: rgba(0,0,0,0.80);
    padding: 60px 21px 0 0;
    box-sizing: border-box;
    z-index: 105;
    transition: all ease-in 0.3s;
    overflow: auto;
}

#slide_menu.open{
    right: 0;
}
	
#slide_menu ul{
    overflow: hidden;
}    

#slide_menu li{
    margin: 0 0 2px;
    transform: translate(500px,0);
    transition: all ease-in 0.3s;
    opacity: 0;
    text-align: right;
}

#slide_menu.open li:nth-child(1){
    transition-delay: 0.3s;
}

#slide_menu.open li:nth-child(2){
    transition-delay: 0.32s;
}

#slide_menu.open li:nth-child(3){
    transition-delay: 0.34s;
}

#slide_menu.open li:nth-child(4){
    transition-delay: 0.36s;
}

#slide_menu.open li:nth-child(5){
    transition-delay: 0.38s;
}

#slide_menu.open li:nth-child(6){
    transition-delay: 0.40s;
}

#slide_menu.open li:nth-child(7){
    transition-delay: 0.42s;
}

#slide_menu.open li:nth-child(8){
    transition-delay: 0.44s;
}

#slide_menu.open li:nth-child(9){
    transition-delay: 0.46s;
}

#slide_menu.open li:nth-child(10){
    transition-delay: 0.485s;
}

#slide_menu.open li:nth-child(11){
    transition-delay: 0.50s;
}

#slide_menu.open li:nth-child(12){
    transition-delay: 0.52s;
}

#slide_menu.open li{
    transform: translate(0,0);
    opacity: 1;
}

#slide_menu li a{
    display: block;
    width: 100%;
    font-size: 16px;
    padding: 8px 10px;
    line-height: 150%;
    box-sizing: border-box;
    transition: all ease-out 0.3s;
    border-bottom: 1px solid #fff;
    color: #fff;
}

#slide_menu li a span{
    display: block;
    color: inherit;
	font-family: inherit;
}


/* navi */
.pc_nav{
	display: none;
}


/* main_view
   ========================================================================== */
.main_view{
	position: relative;
}

.main_view video{
	position: fixed;
	width: auto;
	height: 100%;
	top: 0;
	left: 0;
	z-index: -2;
	/* animation-name: bg_color;
	animation-duration: 5s;
	animation-fill-mode: both; */
}

.main_view .inner{
	padding: 35vh 3vw 0;
	box-sizing: border-box;
	height: 80vh;
}

.main_view .inner::before {
	content: '';
	display: block;
	position: fixed;
	width: 100vw;
	height: 100vh;
	top: 0;
	left: 0;
	z-index: -1;
	background-image: url('../images/common/bg_dot_30.png');
}

.main_view h2{
	font-size: 6vw;
	line-height: 120%;
	color: #fff;
	font-weight: 500;
	letter-spacing: 0.15em;
	font-family: 'Raleway', sans-serif;
}

.main_view p{
	margin: 2vh 0 0;
	font-size: 4.5vw;
	line-height: 140%;
	letter-spacing: 0.18em;
	color: #fff;
	font-weight: 300;
	font-family: 'Raleway', sans-serif;
}


/* main_slider
   ========================================================================== */
.main_slider{
	padding: 5px 0 0;
	background: #fff;
	position: relative;
	z-index: 11;
}

.slide01{
	background: url("../images/main_slider/bg01.jpg") no-repeat center center;
	background-size: cover;
}

.slide02{
	background: url("../images/main_slider/bg02.jpg") no-repeat center center;
	background-size: cover;
}

.slide03{
	background: url("../images/main_slider/bg03.jpg") no-repeat center center;
	background-size: cover;
}

.swiper-slide{
	padding: 3em 1em;
	box-sizing: border-box;
}

.swiper-slide .inner{
	padding: 3em 1em;
	background: rgba(255,255,255,.9);
	min-height: 104vw;
}

.swiper-slide h3{
	font-size: 5.2vw;
	line-height: 150%;
	letter-spacing: 0.10em;
	text-align: center;
}

.swiper-slide p{
	margin: 1em 0 0;
	font-size: 4.5vw;
	line-height: 150%;
	letter-spacing: 0.02em;
}

.swiper-button-prev,
.swiper-button-next{
	width: 20px;
	height: 36px;
}

.swiper-button-next{
	background: url("../images/main_slider/arrow_r.png") no-repeat center center;
	background-size: 100%;
	right: 2px;
}

.swiper-button-prev{
	background: url("../images/main_slider/arrow_l.png") no-repeat center center;
	background-size: 100%;
	left: 2px;
}


/* about
   ========================================================================== */
#about{
	margin: -52px 0 0;
	position: relative;
	background: #fff;
	z-index: 10;
}

#about .inner{
	padding: 82px 0 40px;
}

#about ul{
	margin: 15px 0 0;
	font-size: 0;
	text-align: center;
}

#about ul li{
	padding: 15px 5px 0;
	display: inline-block;
	vertical-align: top;
	box-sizing: border-box;
	width: 50%;
	font-size: 16px;
	text-align: left;
}

#about ul li .border_box{
	padding: 10px;
	position: relative;
}

#about ul li .border_box::before,
#about ul li .border_box::after,
#about ul li .border_inner::before,
#about ul li .border_inner::after{
	content: "";
	background: #4CBFD2;
	position: absolute;
	transition: .5s;
}

#about ul li .border_box::before,
#about ul li .border_inner::before{
	width: 0;
	height: 1px;
}

#about ul li.on .border_box::before,
#about ul li.on .border_inner::before{
	width: 100%;
}

#about ul li .border_box::before{
	top: 0;
	left: 0;
}

#about ul li .border_inner::before{
	bottom: 0;
	right: 0;
	transition-delay: .6s;
}

#about ul li .border_box::after,
#about ul li .border_inner::after{
	height: 0;
	width: 1px;
}

#about ul li.on .border_box::after,
#about ul li.on .border_inner::after{
	height: 100%;
}

#about ul li .border_box::after{
	top: 0;
	right: 0;
	transition-delay: .3s;
}

#about ul li .border_inner::after{
	bottom: 0;
	left: 0;
	transition-delay: .9s;
}

#about ul li h3{
	font-size: 2.5em;
	line-height: 120%;
	color: #4CBFD2;
	font-weight: 300;
	text-align: center;
}

#about ul li h3 span{
	font-size: 0.5em;
	line-height: 120%;
	color: inherit;
}

#about ul li p{
	margin: 10px 0 0;
	padding: 10px 0 0;
	font-size: 1.1em;
	letter-spacing: 0.05em;
	line-height: 140%;
	color: #4CBFD2;
	font-weight: 300;
	border-top: 1px solid #4CBFD2;
}

#about ul li h3,
#about ul li h3 span,
#about ul li p{
	opacity: 0;
	transform: translate(-20px,0);
}

#about ul li.on h3,
#about ul li.on h3 span,
#about ul li.on p{
	transition: 1.2s;
	opacity: 1;
	transform: translate(0,0);
}


/* why
   ========================================================================== */
#why{
	margin: -52px 0 0;
	position: relative;
	z-index: 9;
}

#why .inner{
	padding: 82px 0 40px;
}

#why ul{
	margin: 0 0 0;
}

#why ul li{
	padding: 25px 10px 0;
	overflow: hidden;
}

#why ul li .icon{
	margin: 0 15px 10px 0;
	background: url("../images/why/icon_box.png") no-repeat center center;
	background-size: contain;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 40vw;
	height: 40vw;
	float: left;
	transition: .6s;
	transform: rotate(-360deg) scale(0);
	opacity: 0;
}

#why ul li.on .icon{
	transform: rotate(0) scale(1);
	opacity: 1;
}

#why ul li .icon img{
	width: 30% !important;
}

#why ul li:nth-child(3) .icon img{
	width: 40% !important;
}

#why ul li .text_box{
	padding: 10px 0 0;
}

#why ul li h3{
	font-size: 1.5em;
	line-height: 120%;
	color: #4CBFD2;
	font-weight: 300;
	transition: 1.2s;
	transition-delay: .3s;		
	opacity: 0;
	transform: translate(-20px,0);
}

#why ul li.on h3{
	opacity: 1;
	transform: translate(0,0);
}

#why ul li p{
	margin: 10px 0 0;
	font-size: 1em;
	letter-spacing: 0.05em;
	line-height: 140%;
	color: #333;
	font-weight: 300;
	transition: 1.2s;
	transition-delay: .6s;
	opacity: 0;
	transform: translate(0,20px);
}

#why ul li.on p{
	opacity: 1;
	transform: translate(0,0);
}


/* sites
   ========================================================================== */
#sites{
	margin: -52px 0 0;
	background: #fff;
	position: relative;
	z-index: 8;
}

#sites > .inner{
	padding: 82px 0 0;
}

#sites ul.list{
	margin: 25px 0 0;
	position: relative;
}

#sites ul.list > li{
	padding: 0;
	overflow: hidden;
	border-top: 1px solid #ddd;
}

#sites ul.list > li:last-child{
	border-bottom: 1px solid #ddd;
}

#sites ul li .photo{
	line-height: 0;
	text-align: center;
}

#sites ul li .text_block{
	padding: 20px 10px;
}

#sites ul li .description_box{
	margin: 0 0 0;
}

#sites ul li .description_box h3{
	font-size: 1.4em;
	font-weight: 400;
	color: #333;
	letter-spacing: 0.05em;
}

#sites ul li .description_box .place{
	margin: 6px 0 0;
	font-size: 1.2em;
	font-weight: 400;
	color: #bbb;
	letter-spacing: 0.05em;
}

#sites ul li .description_box .text{
	margin: 8px 0 0;
	font-size: 1em;
	line-height: 140%;
	color: #333;
}

#sites ul li .btn_box{
	padding: 10px 0 0;
	text-align: center;
}

#sites ul li .btn_box .click_area{
	margin: 10px 0 0;
}

#sites ul li .btn_box .click_area .btn,
#sites ul li .btn_box .click_area .btn02 a,
#sites ul li .btn_box .click_area ul li a{
	display: flex;
	height: 45px;
	justify-content: center;
	align-items: center;
	border: 1px solid #4CBFD2;
	color: #4CBFD2;
	font-size: 1em;
	font-weight: 600;
	letter-spacing: 0.05em;
}
	    
#sites ul li .btn_box .click_area .btn.on{
	background: #4CBFD2;
	color: #fff;
}

#sites ul li .btn_box .click_area .show_box{
	display: none;
}

#sites ul li .btn_box .click_area ul{
	display: flex;
}

#sites ul li .btn_box .click_area ul li{
	display: inline-block;
	vertical-align: top;
	box-sizing: border-box;
	width: 50%;
}

#sites ul li .btn_box .click_area ul li a{
	border-top: none;
}

#sites ul li .btn_box .click_area ul li:last-child a{
	border-left: none;
}


/* contact
   ========================================================================== */
#contact{
	margin: -52px 0 0;
	padding: 0 0 35px;
	background: #fff;
	border-bottom: 1px solid #ddd;
	position: relative;
	z-index: 7;
}

#contact > .inner{
	padding: 82px 0 0;
}

#contact h2 + p{
	margin: 15px 10px 0;
	font-size: 1em;
}

#contact .contact_block{
	margin: 25px 0 0;
}

#contact .contact_block .photo{
	text-align: center;
	line-height: 0;
}

#contact .contact_block .right_box{
	margin: -15px 15px 0;
}

#contact .contact_block .tel_box{
	padding: 30px 20px;
	background: rgba(76,191,210,0.1);
	position: relative;
}

#contact .contact_block .tel_box h3{
	font-size: 1.1em;
	font-weight: 400;
	letter-spacing: 0.15em;
	color: #333;
}

#contact .contact_block .tel_box .no{
	margin: 10px 0 0;
}

#contact .contact_block .tel_box .no a{
	font-size: 5.9vw;
	font-weight: 400;
	letter-spacing: 0.15em;
	line-height: 120%;
	color: #4CBFD2;
}

#contact .contact_block .tel_box .no a::before{
	content: "\f095";
	font-family: FontAwesome;
	margin-right: 5px;
}

#contact .contact_block .anime_btn{
	margin: 20px 0 0;
	text-align: center;
	line-height: 0;
}


/* footer
   ========================================================================== */
footer{
	margin: 0 0 0;
	padding: 0 0 10px;
	background: #fff;
}

footer .footer_banner{
	margin: 0 0 0;
	background: #F6F6F6;
	min-height: 120px;
}

footer .footer_banner ul{
	margin: 0 0 0;
	padding: 20px 0;
}

footer .footer_banner ul li{
	margin: 20px 0;
	line-height: 0;
	text-align: center;
}

footer .footer_banner ul li a{
	display: inline-block;
	width: 60%;
}

footer .footer_banner ul li:nth-child(3) a{
	width: 90%;
}

footer .footer_nav{
	margin: 0;
	background: #4CBFD2;
}

footer .footer_nav ul{
	margin: 0;
}

footer .footer_nav ul li{
	margin: 0;
}

footer .footer_nav ul li a{
	background: url(../images/common/footer_arrow.png) no-repeat 10px center;
	padding: 10px 0 10px 40px;
	background-size: 8px;
	display: block;
	border-bottom: 1px solid #ddd;
	color: #fff;
	font-size: 1em;
	font-weight: 400;
}

footer .footer_logo{
	margin: 20px 0 0;
	padding: 0 15px;
	line-height: 0;
}

footer .footer_logo a{
	display: inline-block;
}

footer .footer_logo a img{
	width: 70%;
}

footer .add_box{
	margin: 20px 0 0;
	padding: 0 15px;
}

footer .add_box h3{
	font-size: 1.3em;
	line-height: 120%;
	font-weight: 700;
	color: #525252;
}

footer .add_box p{
	margin: 5px 0 0;
	font-size: 1em;
	line-height: 170%;
	font-weight: 400;
	color: #525252;
}

footer address{
	font-size: 0.9em;
	line-height: 120%;
	font-weight: 400;
	color: #4CBFD2;
	padding: 10px 10px;
	text-align: center;
}


/* page-top
   ========================================================================== */
#page-top{
	position: fixed;
	bottom: 10px;
	right: 10px;
	width: 40px;
    z-index: 77;
	line-height: 0;
	opacity: 0;
	visibility: hidden;
	transition: .3s;
}

#page-top.on{
	opacity: 1;
	visibility: visible;
}

#page-top img{
	width: 100%;
}

#page-top span{
	display: none;
}

#page-top a{
	display: block;
	height: auto;
	opacity: 0.8;
	transition: ease-in 0.3s;
}

#page-top a:hover{
	opacity: 1;
}


/* floating
   ========================================================================== */
#floating{
	display: none;
}


/* information
   ========================================================================== */
#information{
    margin: 0 0 0;
}

#information .text_box{
    padding: 70px 10px;
}

#information .text_box .tab{
    display: none;
}

#information .text_box p{
    line-height: 170%;
}

#information .text_box p + p{
    margin: 40px 0 0;
}

#information .text_box .btn_com{
    margin: 50px 0 0;
}


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

	/* btn_wrap
	   ========================================================================== */
	.btn_wrap{
		position: absolute;
		top: 9px;
		right: 50px;
		width: 285px;
		font-size: 0;
	}
	
	.btn_wrap .login{
		margin: 0 5px 0 0;
		display: inline-block;
		vertical-align: top;
		box-sizing: border-box;
		width: 140px;
	}
	
	.btn_wrap .login a{
		padding: 10px 0;
		font-size: 15px;
		transition: .3s;
	}
	
	.btn_wrap .login a:hover,
	.btn_wrap .language_btn:hover,
	.btn_wrap .language_list li a:hover{
		background: #4DBFD2;
		color: #fff;
	}
	
	.btn_wrap .language{
		margin: 0 0 0;
		display: inline-block;
		vertical-align: top;
		box-sizing: border-box;
		width: 140px;
	}
	
	.btn_wrap .language_btn,
	.btn_wrap .language_list li a{
		margin: 0;
		padding: 10px 5px 10px 35px;
		font-size: 15px;
		transition: .3s;
		cursor: pointer;
	}
	
	.btn_wrap .language_list li{
		margin: 1px 0 0;
	}
	
	.btn_wrap .language_btn::before,
	.btn_wrap .language_list li a::before{
		left: 15px;
	}
	
	.btn_wrap .language_list li a::before{
		left: 18px;
	}


	/* main_view
	   ========================================================================== */
	.main_view .inner{
		padding: 13vw 3vw;
		height: auto;
	}

	.main_view video{
		width: 100%;
		height: auto;
	}


	/* main_slider
	   ========================================================================== */
	.swiper-slide{
		padding: 80px 2em;
		box-sizing: border-box;
	}
	
	.swiper-slide .inner{
		padding: 30px 2em;
		min-height: 47vw;
	}
	
	.swiper-slide h3{
		font-size: 4vw;
	}

	.swiper-slide .sp{
		display: none;
	}

	.swiper-slide .pc{
		display: block;
	}
	
	.swiper-slide p{
		margin: 1em 0 0;
		font-size: 3vw;
	}
	
	.swiper-button-prev,
	.swiper-button-next{
		width: 28px;
		height: 50px;
	}


	/* about
	   ========================================================================== */
	#about ul li{
		width: calc(100%/3);
	}


	/* why
	   ========================================================================== */
	#why ul li{
		padding: 25px 10px 0;
		font-size: 0;
	}
	
	#why ul li .icon{
		margin: 0 0 0;
		width: 30%;
		height: 30vw;
		float: none;
		display: inline-flex;
		vertical-align: top;
		box-sizing: border-box;
	}
	
	#why ul li .text_box{
		padding: 10px 0 0 15px;
		display: inline-block;
		vertical-align: top;
		box-sizing: border-box;
		width: 70%;
		font-size: 16px;
	}
	
	#why ul li h3{
		font-size: 1.4em;
	}


	/* contact
	   ========================================================================== */
	#contact .contact_block .tel_box .no a{
		font-size: 46px;
	}


	/* footer
	   ========================================================================== */
	footer{
		margin: 30px 0 0;
		padding: 0 0 50px;
	}
	
	footer .footer_banner{
		margin: 0 0 0;
	}
	
	footer .footer_banner ul{
		margin: 0 0 0;
		font-size: 0;
	}
	
	footer .footer_banner ul li{
		margin: 0;
		padding: 0 10px;
		display: inline-block;
		vertical-align: middle;
		box-sizing: border-box;
		width: 30%;
	}
	
	footer .footer_banner ul li:nth-child(3){
		width: 40%;
	}
	
	footer .footer_banner ul li a{
		display: block;
		width: 100%;
	}
	
	footer .footer_banner ul li:nth-child(3) a{
		width: 100%;
	}
	
	footer .bottom_block{
		margin: 20px 0 0;
		padding: 0 15px;
		position: relative;
	}
	
	footer .footer_logo{
		margin: 0 0 0;
		padding: 0;
		display: inline-block;
	}
	
	footer .footer_logo a{
		display: inline-block;
	}
	
	footer .footer_logo a img{
		width: 160px;
	}
	
	footer .add_box{
		margin: 0 0 0;
		padding: 0;
		position: absolute;
		top: 0;
		left: 220px;
	}
	
	footer .add_box h3{
		font-size: 1.3em;
	}
	
	footer .add_box p{
		margin: 5px 0 0;
		font-size: 1em;
	}
	
	footer address{
		font-size: 0.9em;
		padding: 10px 15px;
		text-align: left;
	}


    /* information
       ========================================================================== */
    #information .text_box{
        padding: 80px 10px 50px;
    }
    
    #information .text_box p{
        text-align: center;
        line-height: 180%;
    }
    
    #information .text_box .tab{
        display: inherit;
    }
    
    #information .text_box p + p{
        margin: 40px 0 0;
    }
    
    #information .text_box .btn_com{
        margin: 50px 0 0;
    }


}/* 500px */
@media screen and (min-width : 768px){

    #wrap{
    	padding-top: 79px;
    }

	/* header
	   ========================================================================== */
	header .inner{
		padding: 15px 20px;
	}
	
	header .site_name{
		width: 180px;
	}


	/* main_view
	   ========================================================================== */
	.main_view .inner{
		padding: 18vh 3vw 0;
		height: 50vh;
	}

	.main_view video{
		width: auto;
		height: 100%;
	}
	
	.main_view h2{
		font-size: 50px;
	}
	
	.main_view p{
		margin: 25px 0 0;
		font-size: 28px;
	}


	/* main_slider
	   ========================================================================== */
	.swiper-slide{
		padding: 50px 2em;
	}
	
	.swiper-slide .inner{
		padding: 50px 2em;
		min-height: 52vw;
	}


	/* about
	   ========================================================================== */
	#about{
		margin: -82px 0 0;
	}
	
	#about .inner{
		padding: 147px 0 75px;
	}
	
	#about ul{
		margin: 15px 0 0;
	}
	
	#about ul li{
		padding: 20px 10px 0;
	}
	
	#about ul li .border_box{
		padding: 30px;
	}
	
	#about ul li h3{
		font-size: 50px;
	}
	
	#about ul li h3 span{
		font-size: 25px;
	}
	
	#about ul li p{
		margin: 20px 0 0;
		padding: 15px 0 0;
		font-size: 22px;
		letter-spacing: 0.05em;
	}


	/* why
	   ========================================================================== */
	#why{
		margin: -82px 0 0;
	}
	
	#why .inner{
		padding: 147px 0 75px;
	}
	#why ul li{
		padding: 25px 10px 0;
		font-size: 0;
	}
	
	#why ul li .icon{
		margin: 0 0 0;
		width: 30%;
		height: 30vw;
	}
	
	#why ul li .text_box{
		padding: 10px 0 0 15px;
		width: 70%;
	}
	
	#why ul li h3{
		font-size: 1.6em;
	}


	/* sites
	   ========================================================================== */
	#sites{
		margin: -82px 0 0;
	}
	
	#sites > .inner{
		padding: 147px 0 0;
	}
	
	#sites ul.list{
		margin: 55px 0 0;
	}
	
	#sites ul.list > li{
		padding: 0;
		display: flex;
	}
	
	#sites ul li .photo{
		display: inline-block;
		vertical-align: top;
		box-sizing: border-box;
		width: 50%;
	}
	
	#sites ul li .photo img{
		display: none;
	}
	
	#sites ul li:nth-child(1) .photo{
		background: url("../images/sites/gotenyama.jpg") no-repeat center center;
		background-size: cover;
	}
	
	#sites ul li:nth-child(2) .photo{
		background: url("../images/sites/osaka.jpg") no-repeat center center;
		background-size: cover;
	}
	
	#sites ul li:nth-child(3) .photo{
		background: url("../images/sites/shinsaibashi_ex.jpg") no-repeat center center;
		background-size: cover;
	}
	
	#sites ul li:nth-child(4) .photo{
		background: url("../images/sites/shinsaibashi.jpg") no-repeat center center;
		background-size: cover;
	}
	
	#sites ul li .text_block{
		padding: 20px 20px;
		display: inline-block;
		vertical-align: top;
		box-sizing: border-box;
		width: 50%;
		font-size: 16px;
	}
	
	#sites ul li .description_box{
		margin: 0 0 0;
	}
	
	#sites ul li .description_box h3{
		font-size: 1.4em;
	}
	
	#sites ul li .description_box .place{
		margin: 6px 0 0;
		font-size: 1.2em;
	}
	
	#sites ul li .description_box .text{
		margin: 8px 0 0;
		font-size: 1em;
	}
	
	#sites ul li .btn_box{
		padding: 10px 0 0;
		min-height: 180px;
	}
	
	#sites ul li .btn_box .click_area{
		margin: 10px 0 0;
	}
	
	#sites ul li .btn_box .click_area .btn,
	#sites ul li .btn_box .click_area .btn02 a,
	#sites ul li .btn_box .click_area ul li a{
		font-size: 1em;
	}


	/* contact
	   ========================================================================== */
	#contact{
		margin: -82px 0 0;
		padding: 0 0 60px;
	}
	
	#contact > .inner{
		padding: 147px 0 0;
	}

	#contact h2 + p{
		margin: 25px 20px 0;
		font-size: 17px;
	}
	
	#contact .contact_block{
		margin: 70px 0 0;
		position: relative;
		font-size: 0;
	}
	
	#contact .contact_block .photo{
		display: inline-block;
		vertical-align: middle;
		box-sizing: border-box;
		width: 60%;
	}
	
	#contact .contact_block .right_box{
		margin: 0 0 0 -20%;
		display: inline-block;
		vertical-align: middle;
		box-sizing: border-box;
		width: 60%;
	}
	
	#contact .contact_block .tel_box{
		padding: 30px 20px;
		background: rgba(76,191,210,0.1);
		position: relative;
	}
	
	#contact .contact_block .tel_box h3{
		font-size: 21px;
	}
	
	#contact .contact_block .tel_box .no{
		margin: 15px 0 0;
	}
	
	#contact .contact_block .tel_box .no a{
		font-size: 40px;
	}
	
	#contact .contact_block .tel_box .no a::before{
		margin-right: 5px;
	}
	
	#contact .contact_block .anime_btn{
		margin: 20px 0 0;
	}
	
	
}/* 768px */
@media screen and (min-width : 769px){
    
	#wrap{
		padding-top: 100px;
	}

	
	/* header
	   ========================================================================== */
	header .inner{
		padding: 10px 0;
		height: 100px;
		box-sizing: border-box;
		font-size: 0;
		max-width: 100%;
	}
	
	header .site_name{
		display: inline-block;
		vertical-align: bottom;
		box-sizing: border-box;
		width: 150px;
	}


	/* btn_wrap
	   ========================================================================== */
	.btn_wrap{
        top: 0;
		right: 0;
	}

	#wrap #bg_cover,
	#slide_menu.open{
		display: none;
	}
	
	
    /* pc_nav
       ========================================================================== */
    .pc_nav{
		margin: 15px 0 0;
    	display: block;
		/* vertical-align: bottom; */
		box-sizing: border-box;
		width: 100%;
		text-align: center;
	}
    	
    .pc_nav ul{
    	margin: auto;
    	font-size: 0;
		line-height: 1;
    }
    	
    .pc_nav ul li{
    	text-align: center;
		width: auto;
		display: inline-block;
    }
    	
    .pc_nav ul li a{
    	display: block;
    	text-align: center;
    	padding: 0 0.7vw;
    	font-size: 1.8vw;
		font-family: 'Lato', sans-serif;
		letter-spacing: 0.05em;
		font-weight: 400;
		color: #222;
		transition: .3s;
    }
    
    .pc_nav ul li a:hover{
    	color: #4CBFD2;
    }
	
	
    /* スライドメニュー
       ===================================== */
    .sp_nav,
	#ham_btn{
        display: none;
    }
	

	/* main_view
	   ========================================================================== */
	.main_view{
		background-attachment: fixed;
	}

	.main_view video{
		width: 100%;
		min-width: 1090px;
		height: auto;
	}
	
	.main_view .inner{
		padding: 180px 16px 0;
		height: 500px;
	}
	
	.main_view h2{
		font-size: 60px;
	}
	
	.main_view p{
		margin: 10px 0 0;
		font-size: 33px;
		line-height: 150%;
	}


	/* main_slider
	   ========================================================================== */
	.swiper-slide{
		padding: 50px;
	}
	
	.swiper-slide .inner{
		padding: 50px 0;
		max-width: 900px;
		min-height: 400px;
	}
	
	.swiper-slide h3{
		font-size: 35px;
		line-height: 130%;
	}
	
	.swiper-slide p{
		margin: 25px 50px 0;
		font-size: 20px;
		letter-spacing: 0.1em
	}
	
	.arrow_wrap{
		margin: 0 auto 0;
		position: absolute;
		width: 100%;
		max-width: 1055px;
		top: 49%;
		left: 0;
		right: 0;
	}
	
	.arrow_wrap .inner{
		margin: 0 auto 0;
		position: relative;
	}

	.swiper-button-prev,
	.swiper-button-next{
		transition: .3s;
	}

	.swiper-button-prev:hover,
	.swiper-button-next:hover{
		opacity: .5;
	}
	
	.swiper-button-next{
		right: 0;
	}
	
	.swiper-button-prev{
		left: 0;
	}


	/* why
	   ========================================================================== */
	#why ul li h3{
		font-size: 33px;
	}
	
	#why ul li p{
		margin: 25px 0 0;
		font-size: 16px;
	}


	/* sites
	   ========================================================================== */
	#sites ul li .btn_box .click_area .btn,
	#sites ul li .btn_box .click_area .btn02 a,
	#sites ul li .btn_box .click_area ul li a{
		transition: .3s;cursor: pointer;
	}
	    
	#sites ul li .btn_box .click_area .btn:hover,
	#sites ul li .btn_box .click_area .btn02 a:hover,
	#sites ul li .btn_box .click_area ul li a:hover{
		background: #4CBFD2;
		color: #fff;
	}


	/* contact
	   ========================================================================== */
	#contact{
		margin: -100px 0 0;
		padding: 0 0 60px;
	}
	
	#contact > .inner{
		padding: 165px 0 0;
	}

	#contact h2 + p{
		margin: 25px 10px 0;
		font-size: 18px;
	}
    
    
    /* footer
       ========================================================================== */
    footer{
    	margin: 0;
    	padding: 0 0 30px;
    }
	
	footer .footer_banner{
		margin: 0 0 0;
	}
	
	footer .footer_banner ul{
		margin: 0 0 0;
		padding: 0;
		font-size: 0;
		text-align: center;
	}
	
	footer .footer_banner ul li{
		margin: 0;
		padding: 0;
		display: inline-flex;
		vertical-align: middle;
		box-sizing: border-box;
		height: 120px;
		align-items: center;
	}
	
	footer .footer_banner ul li:nth-child(1){
		width: 25%;
	}
	
	footer .footer_banner ul li:nth-child(2){
		margin: 0 5%;
		width: 24.2%;
	}
	
	footer .footer_banner ul li:nth-child(3){
		width: 35%;
	}
	
	footer .footer_banner ul li a{
		display: block;
		width: 100%;
	}
	
	footer .footer_banner ul li:nth-child(3) a{
		width: 100%;
	}

    footer .footer_nav{
    	margin: 0;
    }
    
    footer .footer_nav ul{
    	margin: 0;
		text-align: center;
		display: flex;
		justify-content: space-around;
		align-items: center;
		width: 100%;
		height: 80px;
    }
    
    footer .footer_nav ul li{
		margin: 0;
		padding: 0;
    	display: block;
    }
    
    footer .footer_nav ul li a{
		padding: 0;
    	font-size: 1.6vw;
		line-height: 1;
    	display: inline-block;
    	width: auto;
		border: none;
    	text-align: left;
		background: none;
		transition: .3s;
    }
    
    footer .footer_nav ul li a:hover{
    	color: #333;
    }
	
	footer .bottom_block{
		margin: 35px auto 0;
		padding: 0 10px;
		position: relative;
	}
	
	footer .footer_logo{
		margin: 0 0 0;
	}
	
	footer .footer_logo img{
		width: 180px !important;
	}
	
	footer .add_box{
		margin: 0 0 0;
		padding: 0;
		position: absolute;
		top: 0;
		left: 245px;
	}
	
	footer .add_box h3{
		font-size: 18px;
	}
	
	footer .add_box p{
		margin: 5px 0 0;
		font-size: 15px;
	}
	
	footer address{
		font-size: 15px;
		padding: 20px 0 0;
		text-align: left;

		max-width: 1000px;
		margin: 0 auto;
	}
	
    
    /* page-top
       ========================================================================== */
    #page-top {
		display: none;
    	position: fixed;
    	bottom: 20px;
    	right: 20px;
    	z-index: 100;
		width: auto;
    }
    	
    #page-top img{
    	width: auto;
    }
    	
    #page-top span{
    	display: none;
    }
    	
    #page-top a{
    	display: block;
    	opacity: 0.8;
    	transition: ease-in 0.3s;
    }
    	
    #page-top a:hover{
    	opacity: 1;
    }


	/* floating
	   ========================================================================== */
	#floating{
		margin-top: -100px;
		display: block;
		position: fixed;
		top: 50vh;
		right: 0;
		background: rgba(0,0,0,.75);
		z-index: 50;
		width: 100px;
	}

	#floating ul{
		margin: 0 0 0;
		text-align: center;
	}

	#floating ul li{
		position: relative;
	}

	#floating ul li::before{
		content: "";
		background: #fff;
		width: 40px;
		height: 1px;
		margin: auto;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
	}

	#floating ul li:first-child::before{
		display: none;
	}

	#floating ul li a{
		padding: 24px 0 16px;
		display: block;
		height: 100px;
		box-sizing: border-box;
		transition: .3s;
	}

	#floating ul li a:hover{
		opacity: .4;
	}

	#floating ul li a .icon{
		display: block;
		line-height: 0;
	}

	#floating ul li a .icon img{
		width: 30px !important;
	}

	#floating ul li:nth-child(2) a .icon img{
		width: 24px !important;
	}

	#floating ul li a .text{
		padding: 10px 0 0;
		display: block;
		font-size: 14px;
		line-height: 1;
		color: #fff;
		font-weight: 400;
		letter-spacing: 0.08em;
	}


    /* information
       ========================================================================== */
    #information .text_box{
        padding: 120px 0;
    }
    
    #information .text_box p{
        font-size: 18px;
    }
    
    #information .text_box .tab{
        display: none;
    }
    
    #information .text_box p + p{
        margin: 50px 0 0;
    }
    
    #information .text_box .btn_com{
        margin: 80px 0 0;
    }

	
}/* 769px */
@media screen and (min-width : 930px){
	
	
    /* pc_nav
       ========================================================================== */
    .pc_nav ul li a{
    	padding: 0 6px;
    	font-size: 15px;
    }


}/* 930px */
@media screen and (min-width : 970px){

	/* main_slider
	   ========================================================================== */
	.swiper-slide .inner{
		min-height: 350px;
	}


	/* about
	   ========================================================================== */
	#about{
		margin: -100px 0 0;
	}
	
	#about .inner{
		padding: 165px 0 75px;
	}
	
	#about .inner{
		overflow: hidden;
	}
	
	#about ul{
		margin: 15px 0 0 -10px;
		max-width: 1020px;
	}

	#about ul li .border_box{
		padding: 15px 30px 25px;
	}
	
	#about ul li h3{
		font-size: 90px;
		letter-spacing: 0.05em;
	}
	
	#about ul li h3 span{
		font-size: 50px;
	}
	
	#about ul li p{
		margin: 10px 0 0;
		padding: 20px 0 0;
		font-size: 25px;
		letter-spacing: 0.15em;
	}


	/* why
	   ========================================================================== */
	#why{
		margin: -100px 0 0;
	}
	
	#why .inner{
		padding: 170px 0 75px;
	}
	
	#why ul{
		margin: 40px 0 0;
	}
	
	#why ul li{
		padding: 25px 0 0;
	}
	
	#why ul li .icon{
		margin: 0 0 0;
		background: url("../images/why/icon_box.png") no-repeat center center;
		background-size: 100%;
		width: 25%;
		height: 250px;
	}
	
	#why ul li .icon img{
		width: 26% !important;
	}

	#why ul li:nth-child(3) .icon img{
		width: 35% !important;
	}

	#why ul li .text_box{
		padding: 10px 0 0 45px;
	}
	
	#why ul li h3{
		font-size: 33px;
	}
	
	#why ul li p{
		margin: 25px 0 0;
		font-size: 16px;
		letter-spacing: 0.10em;
	}


	/* sites
	   ========================================================================== */
	#sites{
		margin: -100px 0 0;
	}
	
	#sites > .inner{
		padding: 165px 0 0;
	}
	
	#sites ul.list{
		margin: 55px 0 0;
	}
	
	#sites ul.list > li{
		padding: 0;
	}
	
	#sites ul li .photo{
		width: 40%;
	}
	
	#sites ul li .text_block{
		padding: 20px 20px;
		width: 60%;
	}
	
	#sites ul li .description_box{
		margin: 0 0 0;
	}
	
	#sites ul li .description_box h3{
		font-size: 30px;
		line-height: 120%;
	}
	
	#sites ul li .description_box .place{
		margin: 10px 0 0;
		font-size: 22px;
	}
	
	#sites ul li .description_box .text{
		margin: 12px 0 0;
		font-size: 16px;
	}
	
	#sites ul li .btn_box{
		margin: 0 0 0 auto;
		padding: 10px 0 0;
		text-align: center;
		box-sizing: border-box;
		max-width: 300px;
	}
	
	#sites ul li .btn_box .click_area{
		margin: 10px 0 0;
	}
	
	#sites ul li .btn_box .click_area .btn,
	#sites ul li .btn_box .click_area .btn02 a,
	#sites ul li .btn_box .click_area ul li a{
		font-size: 15px;
	}


	/* contact
	   ========================================================================== */
	#contact .contact_block{
		margin: 70px 0 0;
		position: relative;
		font-size: 0;
		background: linear-gradient(to right,#F2F5F5 30%, transparent 0%);
	}
    
    
    /* footer
       ========================================================================== */
	footer .footer_banner ul{
		margin: 0 auto 0;
		max-width: 1000px;
		text-align: center;
	}
	
	footer .footer_banner ul li{
		padding: 0;
	}
    
    footer .footer_nav ul li{
		margin: 0 8px;
    }
    
    footer .footer_nav ul li a{
    	font-size: 15px;
    }
	
	
}/* 970px */
@media screen and (min-width : 1000px){
	
	/* header
	   ========================================================================== */
	header .inner{
		padding: 23px 0;
		max-width: 100%;
	}
	
	header .site_name{
		width: 18%;
	}
	
	
    /* pc_nav
       ========================================================================== */
    .pc_nav{
		margin: 15px 0 0;
    	display: inline-block;
		width: 82%;
		text-align: right;
	}

	footer .footer_nav ul {
		width: 1000px;
		margin: 0 auto;
	}
	
	
}/* 1000px */
@media screen and (min-width : 1100px){

	/* header
	   ========================================================================== */
	header .inner{
		padding: 20px 0;
		position: relative;
		max-width: 1000px;
	}
	
	header .site_name{
		width: 207px;
		position: absolute;
		top: 20px;
		left: -40px;
	}
	
	
    /* pc_nav
       ========================================================================== */
    .pc_nav{
		margin: 41px 0 0;
		padding-left: 16%;
		width: 100%;
		text-align: right;
	}
    	
    .pc_nav ul{
    	margin: auto;
    	font-size: 0;
		line-height: 1;
    }
    	
    .pc_nav ul li{
    	text-align: center;
		width: auto;
		display: inline-block;
    }
    	
    .pc_nav ul li a{
    	display: block;
    	text-align: center;
    	padding: 0 6px;
    }

	
	/* sites
	   ========================================================================== */
	#sites ul.list > li{
		padding: 0;
		position: relative;
	}
	
	#sites ul li .photo{
		width: 28%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
	}
	
	#sites ul li .text_block{
		margin: auto;
		padding: 0 0 0 250px;
		width: 1000px;
		display: flex;
	}
	
	#sites ul li .description_box{
		margin: 0 0 0;
		padding: 35px 70px 30px 30px;
		width: 500px;
		min-height: 295px;
		box-sizing: border-box;
		background: #fff;
		position: relative;
		z-index: 1;
	}
	
	#sites ul li .description_box h3{
		font-size: 30px;
		line-height: 120%;
	}
	
	#sites ul li .description_box .place{
		margin: 10px 0 0;
		font-size: 22px;
	}
	
	#sites ul li .description_box .text{
		margin: 12px 0 0;
		font-size: 16px;
	}
	
	#sites ul li .btn_box{
		margin: 30px 0 0;
		padding: 0 0 0;
		width: 250px;
		min-height: auto;
	}
	
	#sites ul li .btn_box .click_area{
		margin: 5px 0 0;
	}
	
	#sites ul li .btn_box .click_area .btn,
	#sites ul li .btn_box .click_area .btn02 a,
	#sites ul li .btn_box .click_area ul li a{
		font-size: 15px;
	}


	/* contact
	   ========================================================================== */
	#contact .contact_block .photo{
		width: 50%;
	}
	
	#contact .contact_block .right_box{
		margin: 0 0 0 -15%;
		width: 65%;
	}
	
	#contact .contact_block .tel_box{
		padding: 56px 20px 0 110px;
		height: 200px;
		box-sizing: border-box;
	}
	
	#contact .contact_block .tel_box h3{
		font-size: 25px;
	}
	
	#contact .contact_block .tel_box .no{
		margin: 10px 0 0;
	}
	
	#contact .contact_block .tel_box .no a{
		font-size: 46px;
	}
	
	#contact .contact_block .tel_box .no a::before{
		margin-right: 8px;
	}
	
	#contact .contact_block .anime_btn{
		margin: 40px 0 0 200px;
		text-align: left;
	}

	
}/* 1100px */
@media screen and (min-width : 1120px){

	/* header
	   ========================================================================== */
	header .site_name{
		left: -50px;
	}
	
	
}/* 1120px */
@media screen and (min-width : 1200px){

	/* sites
	   ========================================================================== */
	#sites ul li .photo{
		width: 33%;
	}
	
	
}/* 1200px */
@media screen and (min-width : 1400px){

	/* sites
	   ========================================================================== */
	#sites ul li .photo{
		width: 36%;
	}
	
	
}/* 1400px */