@charset "utf-8";
/*breakpoint
@media screen and ( max-width:1420px) and ( min-width:1081px) {}
@media screen and ( max-width:1080px) and ( min-width:768px) {}
@media screen and ( max-width:767px) {}*/

/*header*/
header .wrap h1 {
	float: left;
}
.logo {
	width: 100%;
	height: auto;
	margin:10px 0 0 3%;
}
@media screen and ( max-width:1080px) {.logo {width:50%;}}

.tel {
	margin: 15px 1% 0 0;
	float: right;
}
@media screen and ( max-width:1080px) {.tel {display: none;}}

/*mainimage*/
.firstview {
	width:100%;
	height:auto;
    max-width: 100%;
	max-height:580px;
	background:url(../img/mainimage_no_logo.jpg) no-repeat center;
    background-size:cover;
}
.logo_main {
	width:50%;
	margin: 0 auto;
    max-width: 709px;
	max-height:100%;
	padding: 130px 0;
	text-align: center;
}

/*sub_navigation*/
.nav_bt {
	width: 1054px;
	margin: 0 auto;
}
@media screen and ( max-width:1080px) {.nav_bt{display: none;}}
.nav_bt_sp {
	width:600px;
	max-width: 100%;
	margin: 0 auto;
	position: relative;
	top:-50px;
}
@media screen and ( min-width:1081px) {.nav_bt_sp{display: none;}}
@media screen and ( max-width:1080px) and ( min-width:768px) {.nav_bt_sp{max-width: 80%;}}
.nav_bt li,
.nav_bt_sp li{
	width: 180px;
	height: 180px;
	margin: 0 15px 0;
	float: left;
	text-align: center;
	display: block;
	background: #50c8f0;
	position: relative;
	overflow: hidden;
}
@media screen and ( max-width:1080px) {.nav_bt li,.nav_bt_sp li{background: none;}}
.nav_bt li:before,
.nav_bt_sp li:before {
	content:"";
	position: absolute;
	top: -120px;
	left: -215px;
	height:600px;
	width:40px;
	background : #fff;
	opacity: 0.2;
	transform: rotate(45deg);
	transition: 0.3s;
}
.nav_bt li:hover:before,
.nav_bt_sp li:hover:before {
	left:98%;
}
@media screen and ( max-width:1080px) {.nav_bt_sp li{width:30%; height:30%; margin: 3% 1.5% 0 1.5%}}
.bt_top {
	width:98%;
	margin: 0 auto;
}
.bt_under{
	width:98%;
	margin: 0 auto;	
}
.nav_bt li p {
	margin: 0 auto;
	text-align: center;
	position: relative;
	font-size: 105%;
	color: #fff;
	top:-42px;
}
.nav_bt li p.exc{
	font-size: 82.5%;
}
.nav_bt li p.exc a {
	color: #fff;	
}
.nav_bt_ex {
	width: 1080px;
	margin: 20px auto 0;
}
@media screen and ( max-width:1080px) and ( min-width:768px) {.nav_bt_ex {width: 50%; margin: 0 auto;}}
@media screen and ( max-width:767px) {.nav_bt_ex {width: 75%; margin: 0 auto;}}
.nav_bt_ex li {
	width: 496px;
	height: 140px;
	margin: 10px 8px 0 25px;
	float: left;
	display: block;
	text-align: center;
	border: solid 10px #ffff00;
	box-sizing: border-box;
}
@media screen and ( max-width:1080px) and ( min-width:768px) {.nav_bt_ex li {width:100%; margin: 0 auto 15px; position: relative;top:-20px;}}
@media screen and ( max-width:767px) {.nav_bt_ex li {width:100%; margin: 0 auto 15px; position: relative;top:-20px;padding-top: 2%; font-size:80%;}}
.nav_bt_ex li.sp_off  {
}
@media screen and ( max-width:1080px) {.nav_bt_ex li.sp_off {display: none;}}
.nav_bt_sp ul li.sp_on {
	background: #fff;
	margin-top: 3.5%;
}
.nav_bt_ex li a{
	width:100%;
	height: 100%;
	display: block;
}
.nav_bt_ex p {
	color: #000;
	font-weight: bold;
	display: block;
}
.nav_bt_ex_ttl {
	width:80%;
	margin: 18px auto 12px;
	padding-bottom: 5px;
	border-bottom: solid 6px #ffff00;
}
.nav_bt:after,
.nav_bt_sp:after,
.nav_bt_ex:after {
  content: "";
  display: block;
  clear: both;
}

/*contents*/
.cont {
	width:1024px;
	margin: 0 auto;
}
.bg_01 {
	position: relative;
	overflow: hidden;
	padding-bottom: 15%;
}
@media screen and ( max-width:1240px) and ( min-width:961px) {.bg_01{padding-bottom: 25%}}
@media screen and ( max-width:960px) and ( min-width:768px) {.bg_01{padding-bottom: 30%}}
@media screen and ( max-width:767px) and ( min-width:680px) {.bg_01{padding-bottom: 30%}}
@media screen and ( max-width:679px) and ( min-width:580px) {.bg_01{padding-bottom: 40%}}
@media screen and ( max-width:579px) and ( min-width:480px) {.bg_01{padding-bottom: 50%}}
@media screen and ( max-width:479px) {.bg_01{padding-bottom: 72.5%}}
.bg_01::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 120%;
	height: 70%;
	margin: 10% -10% 0;
	background: #ffff00;
	-webkit-transform-origin: left center;
	-ms-transform-origin: left center;
	transform-origin: left center;
	-webkit-transform: rotate(-4deg);
	-ms-transform: rotate(-4deg);
	transform: rotate(-4deg);
	z-index: -1;
}
#cont_01 {
	margin: 8% auto 0;
	padding-top: 0px;
	text-align: center;
}
@media screen and ( max-width:1080px) and ( min-width:768px) {#cont_01{width:90%; margin-top: 10%; font-size:80%;}}
@media screen and ( max-width:767px) {#cont_01{width:90%; margin-top: 12%; font-size:65%;}}
#cont_01 h2,
#cont_01 h3 {
	margin: 20px 0 20px;
	padding-bottom: 10px;
	border-bottom: solid 3px;
	display: inline-block;
}
#cont_01 p {
	font-size: 140%;
	line-height: 2.5em;
}
#cont_02 {
	width:1024px;
	margin: 0 auto 0;
	transform-origin: left center;
	-webkit-transform: rotate(-3deg);
	-ms-transform: rotate(-3deg);
	transform: rotate(-3deg);
}
@media screen and ( max-width:1080px) and ( min-width:768px) {#cont_02{width: 90%;margin:-5% auto 0; }}
@media screen and ( max-width:767px) {#cont_02{width: 87%;margin:-80px auto 0;position: relative;right: 4%; }}
.staff {
	width: 32.5%;
	margin: 20px 0 10px;
	float: left;
}
@media screen and ( max-width:1080px) and ( min-width:768px) {.staff {width: 37%; margin: 5% 0 0 0;}}
@media screen and ( max-width:767px) {.staff {width: 90%; margin: 5% 0 0 12px;}}
@media screen and ( max-width:767px) {.staff img {width: 95px; margin: 0 0 -3px 0px;}}
@media screen and ( max-width:767px) {#cont_02 h3 {width: 95%; margin: 0 0 0 15px;}}
.staff span {
	margin-left: 20px;
	font-size:200%;
	font-weight: bold;
}
.staff p {
	margin: 20px 0 30px;
	line-height: 1.9em;
}
.cont_img_staff {
	width:55%;
	position: absolute;
	right: 0;
	overflow: hidden;
}
@media screen and ( max-width:767px) {.cont_img_staff,.cont_img_staff::before{display: none;}}
.cont_img_staff::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 120%;
	height: 360px;
	margin: 60px 0 0;
	background: #ffff00;
	-webkit-transform-origin: left center;
	-ms-transform-origin: left center;
	transform-origin: left center;
	-webkit-transform: rotate(-3deg);
	-ms-transform: rotate(-3deg);
	transform: rotate(-3deg);
	z-index: -1;
}
.ph_bg_staff {
	margin-top: 60px;
	transform-origin: left center;
	-webkit-transform: rotate(-3deg);
	-ms-transform: rotate(-3deg);
	transform: rotate(-3deg);
}
.ph_graph{
	margin-top: 100px;
	transform-origin: left center;
	-webkit-transform: rotate(-3deg);
	-ms-transform: rotate(-3deg);
	transform: rotate(-3deg);
}
#cont_a {
	width: 1024px;
	margin: 500px auto 0;
}
@media screen and ( max-width:1080px) and ( min-width:1024px) {#cont_a{width:90%;margin:400px auto 0; }}
@media screen and ( max-width:1023px) and ( min-width:768px) {#cont_a{width:90%;margin:300px auto 0; }}
@media screen and ( max-width:767px) {#cont_a{width:90%;margin:180px auto 0; }}
.cont_r {
	width: 40%;
	margin-top: 10px;
	float: right;
}
@media screen and ( max-width:1080px) and ( min-width:1024px) {.cont_r{width:34%;margin:0 auto; font-size: 90%; }}
@media screen and ( max-width:1023px) and ( min-width:768px) {.cont_r{width:100%;margin:40px auto 0; }}
@media screen and ( max-width:767px) {.cont_r{width:100%;margin:20px auto 0; }}
.cont_r h2,
.cont_r h3 {
	font-size: 24px;
	margin: 10px 0 0;
	line-height: 1.6em;
}
@media screen and ( max-width:1080px) and ( min-width:1024px) {.cont_r h2,.cont_r h3{font-size: 21px; margin:20px auto 0; }}
@media screen and ( max-width:1023px) and ( min-width:768px) {.cont_r h2,.cont_r h3{width: 98%; max-width: 580px; margin:-60px auto 0; }}
@media screen and ( max-width:767px) {.cont_r h2,.cont_r h3{font-size: 140%;margin:-30px 0 0 5px; }}
.cont_r p {
	width: 85%;
	margin: 20px 0 0;
	line-height: 1.8em;
}
@media screen and ( max-width:1023px) and ( min-width:768px) {.cont_r p{width: 98%; max-width: 580px; margin: 5% auto 0; }}
@media screen and ( max-width:767px) {.cont_r p{width: 98%;margin: 5% auto 0;}}
.cont_l {
	width:60%;
	margin-top: 10px;
	float: left;
}
@media screen and ( max-width:1023px) {.cont_l {width: 100%; }}
.cont_l_img {
	width: 580px;
	margin: 20px 0 0 7px;
}
@media screen and ( max-width:1023px) {.cont_l_img {width: 98%; max-width: 584px; margin: 5% auto 0; }}
.cont_l_point,
.cont_l_point_sp {
	width: 555px;
	margin: 20px 0 0 6px;
}
@media screen and ( max-width:1023px) {.cont_l_point {display:none; }}
.cont_l_point ul,
.cont_l_point_sp ul {
	width:100%;
	margin: 0 auto 0;
	padding: 7% 0 10px 0;
	line-height: 2.4em;
	border: solid 5px #ffff00;
	border-radius: 3px;
}
@media screen and ( max-width:1023px) and ( min-width:768px) {.cont_l_point_sp ul { width:98%; margin: 20px 0 0 0; padding: 20px 0 10px 0; line-height: 2.2em;}}
@media screen and ( max-width:767px) {.cont_l_point_sp ul { width:98%; margin: 20px 0 0 0; padding: 10px 0 10px 0; line-height: 2.2em;}}
.cont_l_point ul h3,
.cont_l_point_sp ul h3 {
	width: 100%;
	margin: -58px 0 0px 6px;
}
@media screen and ( max-width:1023px) and ( min-width:768px) {.cont_l_point_sp ul h3 { margin-top: -40px;}}
@media screen and ( max-width:767px) {.cont_l_point_sp ul h3 { margin: -150px 0 0 -10px;}}
@media screen and ( max-width:767px) {.cont_l_point_sp ul h3 img { width: 90px; margin:-20px 0 0 -14px;}}
.cont_l_point li,
.cont_l_point_sp li {
	font-size: 95%;
	margin: 0 0 0 30px;
	list-style-type: circle;
}
@media screen and ( max-width:767px) {.cont_l_point_sp li { width:85%; margin: 0 0 0 25px; padding: 5px 0; font-size: 75%; line-height: 1.5em;}}
.cont_l_point_sp {
	width: 95%;
	padding-top: -1%;
	margin-top: 40px;
}
@media screen and ( min-width:1024px) {.cont_l_point_sp ul { display:none;}} 
@media screen and ( max-width:1023px) and ( min-width:768px) {.cont_l_point_sp { width:65%; margin: 60px auto 0;}} 
.bt_sect {
	width: 77%;
	height: 24px;
	margin: 40px auto 0;
	display: block;
	position: relative;
	left:-32px;
	padding: 1.4em 1em;
	font-size: 16px;
	font-weight: 700;
	text-align: center;
	background: #00a99d;
	border-bottom: solid 5px #007560;
	border-radius: 5px;
	box-shadow: inset 0 0 0 rgba(255,255,255,0.2), 0 5px 5px rgba(0, 0, 0, 0.20);
	overflow: hidden;
}
@media screen and ( max-width:1080px) and ( min-width:1024px) {.bt_sect {width: 75%;left: -25px;}} 
@media screen and ( max-width:1023px) and ( min-width:768px) {.bt_sect {width: 90%; position:static;}} 
@media screen and ( max-width:767px) {.bt_sect { width: 85%; position:static; margin-top: 40px;}} 
.bt_sect:before {
	content:"";
	position: absolute;
	top: -40px;
	left: -75px;
	height:200px;
	width:30px;
	background : #fff;
	opacity: 0.2;
	transform: rotate(45deg);
	transition: 0.3s;
}
.bt_sect:hover:before {
	left:98%;
}
.bt_sect a {
	color: #fff;
	display: block;
	position: relative;
	z-index: 1;
}
.bt_sect:active {
	-webkit-transform: translateY(4px);
	transform: translateY(4px);
	border-bottom: none;
	box-shadow: inset 0 0 0 rgba(255,255,255,0.2), 0 0px 0px rgba(0, 0, 0, 0.20);
}

/*other_cont custom*/
#cont_b,
#cont_c,
#cont_d,
#cont_e,
#cont_f {
	width: 1024px;
	margin: 150px auto 0;
}
@media screen and ( max-width:1080px) and ( min-width:1024px) {
#cont_b,
#cont_c,
#cont_d,
#cont_e,
#cont_f {
	width:90%;
	margin:180px auto 0;
}
}
@media screen and ( max-width:1023px) {
#cont_b,
#cont_c,
#cont_d,
#cont_e,
#cont_f {
	width:90%;
	margin:180px auto 0;
}
}
@media screen and ( max-width:1023px) and ( min-width:768px) {
#cont_a h2,
#cont_b h2,
#cont_c h2,
#cont_d h2,
#cont_e h2,
#cont_f h2 {
	width: 600px;
	margin: 0 auto;
	font-size: 28px;
}
}
@media screen and ( max-width:767px) {
#cont_a h2,
#cont_b h2,
#cont_c h2,
#cont_d h2,
#cont_e h2,
#cont_f h2 {
	font-size: 22px;
}
}
@media screen and ( max-width:767px) {
#cont_a h3,
#cont_b h3,
#cont_c h3,
#cont_d h3,
#cont_e h3,
#cont_f h3 {
	width: 98%;
	margin: 0 auto;
	font-size: 21px;
}
}

/*left_right_reverce*/
#cont_b .cont_r,
#cont_d .cont_r,
#cont_f .cont_r {
	float: left;
}
#cont_b .cont_l,
#cont_d .cont_l,
#cont_f .cont_l {
	float: right;
	position: relative;
	right: 20px;
}
@media screen and ( max-width:1080px) and ( min-width:1024px) {#cont_b .cont_l,#cont_d .cont_l,#cont_f .cont_l{position: relative;right: 70px;}}
@media screen and ( max-width:1023px) {#cont_b .cont_l,#cont_d .cont_l,#cont_f .cont_l{position: relative;right: 0px;}}
#cont_b .cont_l_point,
#cont_b .cont_l_point_sp,
#cont_c .cont_l_point,
#cont_c .cont_l_point_sp,
#cont_d .cont_l_point,
#cont_d .cont_l_point_sp,
#cont_f .cont_l_point,
#cont_f .cont_l_point_sp {
	height: 285px;
}
#cont_d .cont_l_point,
#cont_c .cont_l_point_sp {
	height: 270px;
}

/*infomation*/
#info {
	width: 100%;
	margin-top: 180px;
}
@media screen and ( max-width:1080px) and ( min-width:768px) {#info {margin-top: 50px;}}
@media screen and ( max-width:767px) {#info {margin-top: 200px;}}
#info h2 {
	width: 1024px;
	margin: 20px auto;
}
@media screen and ( max-width:1100px) and ( min-width:1081px) {#info h2{width:95%;}}
@media screen and ( max-width:1080px) {#info h2{width: 90%;margin:10px auto;font-size: 24px;}}
.bt_info {
	width: 25%;
	height: 28px;
	margin: 80px auto 0;
	font-size: 26px;
	font-weight: 700;
	display: block;
	position: relative;
	padding: 1.2em 1em;
	text-align: center;
	background: #ffff00;
	border-bottom: solid 5px #FFAE00;
	border-radius: 10px;
	box-shadow: inset 0 0 0 rgba(255,255,255,0.5), 0 5px 5px rgba(0, 0, 0, 0.20);
	overflow: hidden;
}
@media screen and ( max-width:1080px) and ( min-width:768px) {.bt_info{width:60%;}}
@media screen and ( max-width:767px) {.bt_info{width: 80%;padding: 1em 1em;}}
@media screen and ( max-width:767px) {.bt_info a{font-size: 20px;}}
.bt_info:before {
	content:"";
	position: absolute;
	top: -40px;
	left: -75px;
	height:200px;
	width:30px;
	background : #fff;
	opacity: 0.7;
	transform: rotate(45deg);
	transition: 0.3s;
}
.bt_info:hover:before {
	left:98%;
}
@media screen and ( max-width:767px) {.bt_info { left:0px; font-size: 90%; margin-top: 40px;}} 

/*footer*/
footer {
	width: 100%;
	height: 450px;
	margin-top: 300px;
	background: #00A9B0;
}
@media screen and ( max-width:1080px) {footer {padding: 20px 0 10px; height:auto;}}
.foot_inner {
	width:1080px;
	margin: 0 auto;
}
@media screen and ( max-width:1080px) {.foot_inner  {width:98%;}}
#foot_logo {
	width: 30%;
	float: left;
	margin: 50px 30px 0 0;
}
@media screen and ( max-width:1080px) {#foot_logo {width: 60%; float: none; margin:20px 0 0 15px; float: none; }}
#foot_logo img{
	width: 80%;
}
footer h2 {
	font-size:21px;
	color: #fff;
}
footer ul {
	margin-top: 20px;
	line-height: 2.0em;
}
footer a {color: #fff;}
footer a:hover {color: #ccc;}
.foot_cont_01,
.foot_cont_02,
.foot_cont_03 {
	width: 210px;
	height: 350px;
	float: left;
	margin: 50px 0 0 30px;
}
@media screen and ( max-width:1080px) {.foot_cont_01,.foot_cont_02,.foot_cont_03 {width:90%;height: 100%;margin: 25px 0 25px 30px; float: none;}}
small {
	width: 95%;
	font-size:14px;
	margin: 0 auto;
	text-align: center;
	display: block;
}
@media screen and ( max-width:1080px) {small {width: 85%; margin-left:30px; padding-bottom: 20px; font-size:11px;}}

/*background_anime*/
.bg_dot {
	width: 100%;
}
.bg_dot01 {
	width: 10%;
	position: absolute;
	top:97%;
	right: 0;
	z-index:-1;
}
.bg_dot02 {
	width: 9%;
	position: absolute;
	top:140%;
	left: 0;
	z-index: -1;
}
@media screen and ( max-width:1080px) {.bg_dot01 {z-index:-1;}}
.bg_dot03 {
	width: 3%;
	position: absolute;
	top:240%;
	right: 0;
	z-index: -1;
}
.bg_dot04 {
	width: 7%;
	position: absolute;
	top:350%;
	left: 0;
	z-index: -1;
}
.bg_dot05 {
	width: 3%;
	position: absolute;
	top:480%;
	right: 0;
	z-index: -1;
}