@charset "UTF-8";
@import url(base.css);
@import url(animate.css);
@media screen and (min-width:960px){
.sp{display:none;}
.nav_sp,
.navToggle,
#video-area video.sp,
.content_04 .img,
.content_04 .ttl,
.content_05 h2,
.content_08 .img01,
#contact_sp{
visibility:hidden;
display:none;
height:0;
}
body {
height:100%;
width:100%;
margin:0 auto ;
font-size:16px;
color:#333;
line-height:2;
font-family:font;
}
header {
margin: 0 auto;
height:70px;
background: #fff;
font-family: 'Kiwi Maru', serif;
}
header ul {
float:right;
}
header ul li {
float:left;
width:250px;
text-align: center;
}
header ul li:first-child{
background: #999;
color :#fff;
font-size: 12px;
margin:20px 20px 0 0;
}
header ul li.tel {
color :#999;
line-height: 1;
margin-top:15px;
border-left: 1px solid #eee;
}
header ul li.tel a {
font-size:26px;
color:#333;
}
header ul li.btn a {
height:70px;
line-height:70px;
position: relative;
margin-left: auto;
margin-right: auto;
display: flex;
text-align: center;
background: #f18700;
}
header ul li.btn a span{
width: 100%;
height: 100%;
color: #fff;
z-index: 10;
}
header ul li.btn a span:before,
.contact li:last-child a span:before{
content: "";
position: absolute;
top: 0;
bottom: 0;
width: 0;
display: block;
background: #009e96;
z-index: -1;
transition: .2s;
}
header ul li.btn a span:hover,
.contact li:last-child a span:hover{ color: #fff;}
header ul li.btn a span:hover:before,
.contact li:last-child a span:hover:before{ width: 100%;}

/* contact ------------*/
.contact {
color: #fff;
background:url(../images/contact.png) no-repeat center top;
background-size:auto 100%;
overflow:hidden;
height:auto;
margin-top: -50px;
font-size: 21px;
text-align: center;
position: relative;
}
.contact p{
margin: 100px 0 0 150px;
line-height: 2;
}
.contact ol{
list-style-type:none;
width:860px;
margin:30px auto;
padding-left:160px;
overflow:hidden;
height:auto;
font-family: 'Kiwi Maru', serif;
}
.contact ol li{
float: left;
margin:10px 0 0 30px;
width: 370px;
height: 90px;
border: 1px solid #fff;
}
.contact ol li:first-child{
position: relative;
border: solid 1px #fff;
text-align: center;
}
.contact ol li:first-child .box_title{
position: absolute;
display: inline-block;
top: -13px;
left: 100px;
text-align: center;
background: #f6ad54;
color: #fff;
}
.contact ol li:first-child p {
margin: 0; 
padding: 0;
}
.contact ol li:first-child a{
color: #fff;
font-size: 47px;
line-height:0.3;
}
.contact li:last-child a{
position: relative;
margin-left: auto;
margin-right: auto;
width:370px;
height: 90px;
line-height: 90px;
display: flex;
text-align: center;
background: #fff;
font-size: 20px;
}
.contact li:last-child a span{
width: 100%;
height: 100%;
color: #f18700;
z-index: 10;
}
#contact_r {
position: fixed;
bottom:0;
right:0;
z-index: 100;
}
#contact_r img {
width:200px!important;
}
#contact_r a {
width:200px;
height:240px;
background: url("../images/contact_r.png") no-repeat;
background-size:200px;
display: block;
text-indent: -9999px;
}
#contact_r a:hover {
transform: rotateZ( -5deg ) ;
}

/* h1~h5
-----------------------------------------*/
h1.logo{
float:left;
width:220px;
height: 220px;
text-indent:-9999px;
background:#fff url(../images/logo.png) no-repeat center;
background-size:70% auto;
position: absolute;
top:0;
z-index: 1;
}
h2{
font-size:36px;
font-weight: bold;
}

/* main
-----------------------------------------*/
.main{
width:100%;
height:650px;
font-family: 'Kiwi Maru', serif;
position: relative;
background-color: rgba(0,0,0,0.3);
}
#video-area{
position: fixed;
z-index: -1;
top: 0;
right:0;
left:0;
bottom:0;
overflow: hidden;
}
#video {
position: absolute;
z-index: -1;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 177.77777778vh;
height: 56.25vw;
min-height: 100%;
min-width: 100%;
}
.scroll_down{
position:absolute;
bottom:1%;
right:50%;
animation: arrowmove 1s ease-in-out infinite;
}
@keyframes arrowmove{
0%{bottom:1%;}
50%{bottom:3%;}
 100%{bottom:1%;}
 }
.scroll_down span{
position: absolute;
left:-20px;
bottom:10px;
color: #eee;
font-size: 0.7rem;
letter-spacing: 0.05em;
-ms-writing-mode: tb-rl;
-webkit-writing-mode: vertical-rl;
writing-mode: vertical-rl;
}
.scroll_down:before {
content: "";
position: absolute;
bottom: 0;
right: -6px;
width: 1px;
height: 20px;
background: #eee;
transform: skewX(-31deg);
}
.scroll_down:after{
content:"";
position: absolute;
bottom:0;
right:0;
width:1px;
height: 50px;
background:#eee;
}

/* nav
-----------------------------------------*/
nav.nav_pc{
width: 100%;
background:#009e96;
}
nav.nav_pc ul li a{
background:#009e96;
width: 16.6%;
float: left;
padding:15px 0;
text-align: center;
color: #fff;
text-decoration: none;
border-right: 1px solid #009e96;
box-sizing: border-box;
}
nav.nav_pc ul li a:hover{
background:#f18700;
}
.fixed {
position: fixed;
top: 0;
width: 100%;
z-index: 10000;
}

nav.nav_pc ul li:first-child a{
width: 17%;
text-indent:-9999px;
background:#fff url(../images/logo_03.png) no-repeat center;
background-size:70% auto;
}

/* content
-----------------------------------------*/
.content_01{
height:400px;
padding-top:80px;
text-align:center;
color: #333;
background:#f1f1f1;
clear: both;
font-size: 25px;
}
.content_01 p strong{
color: #009e96;
font-size: 36px;
}
.content_01 h1{
font-size:65px;
line-height:1.5em;;
width: 960px;
margin: 0 auto;
letter-spacing:-0.2em;
}
.content_01 h1 em{
color: #f18700;
}
.content_01 h1 strong{
color: #009e96;
}
.content_01 h1 p.logo{
background:url(../images/logo_02.png) no-repeat center;
background-size:600px auto;
text-indent:-9999px;
height: 138px;
width:580px;
float: left;
}
.content_01 .text{
margin-top:33px;
letter-spacing:0em;
float: left;
font-size:50px;
font-family: "Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
font-weight: bold;
}

/* content_02 ------------*/
.content_02{
line-height: 1.8em;
background: #fff;
border: 1px solid #fff;
}
.content_02 h2 {
position: absolute;
left: 0;
writing-mode: vertical-rl;
background:#ebeb6e;
height: 500px;
padding:260px 30px 150px 30px;
letter-spacing: 0.5em;
}
.content_02 h2 p {text-orientation: mixed;}
.content_02 ul{
background:url(../images/content_02bak.png) no-repeat center top;
background-size:940px 790px ;
height: 790px;
width: 960px;
margin: 60px auto;
}
.content_02 ul li {
 text-indent:-9999px;
position:relative;
}
.content_02 ul li:nth-child(1){
background:url(../images/content_02icon_01.png) no-repeat center top;
background-size:160px 175px ;
width: 160px;
height: 175px;
top:190px;
left:140px;
}
.content_02 ul li:nth-child(2){
background:url(../images/content_02icon_02.png) no-repeat center top;
background-size:180px 160px ;
width: 180px;
height: 160px;
top:10px;
left:490px;
}
.content_02 ul li:nth-child(3){
background:url(../images/content_02icon_03.png) no-repeat center top;
background-size:125px 125px ;
width: 125px;
height: 125px;
top:-80px;
left:840px;
}
.content_02 ul li:nth-child(4){
background:url(../images/content_02icon_04.png) no-repeat center top;
background-size:375px 155px ;
width: 375px;
height: 155px;
top:90px;
left:-30px;
}
.content_02 ul li:nth-child(5){
background:url(../images/content_02icon_05.png) no-repeat center top;
background-size:110px 185px ;
width: 110px;
height: 185px;
top:-180px;
left:330px;
}
.content_02 ul li:nth-child(6){
background:url(../images/content_02icon_06.png) no-repeat center top;
background-size:205px 110px ;
width: 205px;
height: 110px;
top:-210px;
left:700px;
}

 /* content_03 ------------*/
.content_03{
width: 100%;
overflow:hidden;
height:auto;
background:#545451 url(../images/content_03bak.jpg) no-repeat;
background-size:2000px auto;
font-size: 16px;
color: #fff;
}
.content_03 h2{
font-size: 30px;
text-align: center;
padding-top:70px;
}
.content_03 ul{
width: 960px;
margin:30px auto 0;
line-height:2.5;
}
.content_03 ul li{
width: 470px;
float: left;
margin: 0 auto;
font-family: 'Kiwi Maru', serif;
}
.content_03 ul li:last-child{
margin-left: 20px;
}

/* content_04 ------------*/
.content_04{
background: #fff;
border-bottom: 1px solid #fff;
}
.content_04 h2,
.content_06 h2{
background: #ebeb6e;
text-align: center;
color: #333;
font-size: 30px;
letter-spacing:1em;
}
.content_04 table{
width: 960px;
height:600px;
margin:100px auto;
background:url(../images/content_04bak.png) no-repeat;
background-size:100% auto;
}
.content_04 table h3{
font-size: 21px;
width: 235px;
text-align: center;
margin: 35px 0 0;
}
.content_04 table ul{
font-family: 'Kiwi Maru', serif;
margin:248px 0 0 20px;
line-height:2.55em;
}
.content_04 table td{
vertical-align:top;
}

/* content_05 ------------*/
.content_05{
background: #e5e5e5;
padding: 60px 0 0;
}
.content_05 ul{
width: 960px;
margin: 0 auto;
overflow:hidden;
height:auto;
}
.content_05 ul li{
width:465px;
height: 580px;
float: left;
background: #fff;
margin-bottom: 30px;
}
.content_05 ul li:first-child {
background:url(../images/content_05_ttl.png) no-repeat;
background-size:100% auto;
color:#d6d22f;
}
.content_05 ul li:nth-child(odd){
margin-right:30px;
}
.content_05 ul li img{
width:465px;
height: 230px;
border-bottom: 3px solid #d6d22f;
}
.content_05 ul li em{
background: #d6d22f;
color: #fff;
float: right;
font-size: 14px;
padding: 0 8px;
}
.content_05 ul li h3{
margin: 20px 30px 0;
line-height:2em;
}
.content_05 ul li h3 strong{
font-size: 23px;
}
.content_05 ul li p{
font-size:14px;
margin:10px 30px 0;
color: #666;
font-family: 'Kiwi Maru', serif;
}

/* content_05 ------------*/
.content_06{
background: #fff;
border-bottom: 1px solid #fff;
}
.content_06 aside{
width: 800px;
font-size:18px;
margin:40px auto;
padding: 40px 0;
color: #fff;
background:#83ccc9;
text-align: center;
}
.content_06 aside h3{
font-size:56px;
}
.content_06 .img01{
height: 200px;
background:url(../images/content_06_img01.png) no-repeat right bottom;
background-size:520px auto;
width: 990px;
margin: 0 auto;
margin-top: -200px;
}
.content_06 div.block_01{
background:url(../images/content_06_img02.jpg) no-repeat;
background-size:285px auto;
padding: 80px 0 40px;
}
.content_06 div.block_02{
background:url(../images/content_06_img03.jpg) no-repeat right bottom;
background-size:300px auto;
padding: 50px 0 40px;
}
.content_06 div.block_01,
.content_06 div.block_02{
width: 960px;
margin:0 auto;
font-size: 23px;
}
.content_06 div.block_01 h4,
.content_06 div.block_02 h4{
font-size:30px;
border-bottom: 1px solid #666;
width: 650px;
letter-spacing:0.6em;
}
.content_06 div.block_01 ul,
.content_06 div.block_02 ul{
width: 620px;
list-style: square; 
}
.content_06 div.block_01 h4{
margin-left:310px;
}
.content_06 div.block_01 ul{
margin:20px 0 0 340px;
}
.content_06 div.block_02 ul{
margin:20px 0 0 30px;
}
.content_06 div.block_03{
width: 800px;
height:600px;
padding:50px 80px 0;
margin:0 auto 100px;
font-size: 23px;
background: #f5ffff;
border: 10px solid #80ccb0;
}
.content_06 div.block_03 h4{
text-align: center;
font-size: 30px;
border-bottom: 1px solid #666;
padding-bottom:20px;
}
.content_06 div.block_03 ul{
list-style: square; 
margin: 20px 0;
}
.content_06 div.block_03 p{
background: #80ccb0;
color: #fff;
font-size: 18px;
text-align: center;
padding:30px 0;
}
.content_06 .img02{
width: 185px;
position: relative;
top:-300px;
left: 670px;
}
.content_06 .img02 img{
width: 100%;
}

/* content_07 ------------*/
.content_07{
background: #99d6c0;
font-size: 18px;
padding-bottom: 80px;
overflow:hidden;
height:auto;
z-index:-1;
}
.content_07 h2 {
position: absolute;
right: 0;
writing-mode: vertical-rl;
background:#ebeb6e;
height:1415px;
padding:0 10px 0 10px;
font-size:60px;
text-align: center;
z-index: auto;
}
.content_07 h3{
padding: 85px 0 70px;
font-size: 30px;
text-align: center;
}
.content_07 dt{
background: #e6f5ed;
width: 800px;
height: 80px;
margin: 0 auto;
font-size: 18px;
}
.content_07 dt p {
position: relative;
display: inline-block;
top:-30px;
left:-20px;
padding: 0 5px;
width: 90px;
height: 90px;
line-height: 90px;
color: #4bbac5;
font-size: 20px;
font-weight: bold;
background: #fff;
border-radius: 50%;
box-sizing: border-box;
text-align: center;
}
.content_07 dt p:before {
content: "";
position: absolute;
bottom: -8px;
right: -8px;
margin-top: -15px;
border: 15px solid transparent;
border-left: 15px solid #fff;
z-index: 0;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.content_07 dd{
background: #e6f5ed;
width: 800px;
margin: 0 auto;
font-size:28px;
color: #f9687d;
padding:0 0 30px 0;
margin-bottom: 20px;
text-align: center;
line-height:1.8em;
}
.content_07 dd::before {
/* content: "解決！";*/
 color:#fff;
background: #f9687d;font-size: 24px;
padding:6px 4px 6px 14px;
margin-right: 20px;
}

/* content_08 ------------*/
.content_08{
margin-top: -60px;
width: 100%;
background: url(../images/content_08bak.png) no-repeat center top;
background-size:2000px ;
z-index:3;
overflow:hidden;
height:925px;
position: relative;
z-index: 2;
color: #fff;
text-align: center;text-shadow:
0 2px 0 #000,
0 2px 0 #000,
0 3px 4px #000;
}
.content_08 h2{
font-size:60px;
line-height:1.5em;
letter-spacing: 1.25em;
margin: 200px 0 70px;
}
.content_08 p{
font-size:26px;
line-height:2.5em;
}

/* content_10 ------------*/
.content_10 {
background:#ebeb6f url(../images/content_10bak.png) no-repeat center top;
background-size:2000px ;
height:1000px;
}
.content_10 div{
width: 960px;
margin:0 auto 0;
padding-top: 100px;
}
.content_10 div h2{
font-size: 41px;
line-height: 0.5em;
letter-spacing: 0.05em;
}
.content_10 div h2 small{
font-size:14px;
font-weight: normal;
}
.content_10 div h3{
font-size: 33px;
line-height:1.4em;
margin:40px 0;
}
.content_10 div p{
/*line-height:2em;*/
line-height:2em;
}

/* content_09 ------------*/
.content_09{
background: #80ccb0;
font-size: 24px;
position: relative;
padding: 100px 0;
background:#99d6c0 url(../images/content_09bak.png) no-repeat center top;
background-size:2000px auto;
}
.content_09 h2 {
position: absolute;
left: 0;
writing-mode: vertical-rl;
height:875px;
padding:0 30px 0 30px;
font-size:60px;
text-align: center;
color: #028383;
}
.content_07 h2 p {text-orientation: mixed;}
.content_09 ul {
width:880px;
margin: 0 auto;
/*border: 3px solid #fff;*/
overflow:hidden;
height:auto;
}
.content_09 ul li{
background: #ccc;
width: 270px;
height: 430px;
color: #fff;
margin-left: 20px;
line-height: 1.3em;
float: left;
overflow:hidden;
position:relative;
}
.content_09 ul li img{
width: 270px;
height: 430px;
}
.content_09 ul li .caption {
color:#fff;
padding:210px 10px 0 0;
}
.content_09 ul li .mask {
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
opacity:0;/* マスクを表示しない */
background-color:rgba(0,0,0,0.4);
-webkit-transition:all 0.6s ease;
transition:all 0.6s ease;
}
.content_09 ul li:hover .mask {
opacity:1;/* マスクを表示する */
padding-left:10px;/* 右にずらす */
}
.content_09 ul li h3{
border-left: 4px solid #80ccb0;
padding-left: 10px;
font-size: 14px;
}
.content_09 ul li h4{
border-left: 4px solid #80ccb0;
line-height: 1;
padding-left: 10px;
letter-spacing:0.5em;
margin-bottom: 20px;
}
.content_09 ul li:nth-child(2){
margin-top: 60px;
}
.content_09 ul li:nth-child(3){
margin-top: 120px;
}
.content_09 ul li:nth-child(4){
margin-top:-100px;
}
.content_09 ul li:nth-child(5){
margin-top:-40px;
}
.content_09 ul li:nth-child(6){
margin-top:20px;
}

/* content_11 ------------*/
.content_11{
font-size: 24px;
position: relative;
background:#ccecdc;
font-family: 'Kiwi Maru', serif;
}
.content_11 h2 {
position: absolute;
left: 0;
writing-mode: vertical-rl;
background:#ebeb6e;
height:2100px;
padding:0 10px 80px 10px;
font-size:60px;
text-align: center;
z-index: auto;
}
.content_11 ul {
width:960px;
margin:0 auto;
padding: 100px 0 80px 0;
/*border: 3px solid #fff;*/
overflow:hidden;
height:auto;
}
.content_11 ul li{
width: 960px;
height:380px;
color: #fff;
margin-left: 20px;
margin-bottom: 20px;
line-height:2em;
overflow:hidden;
position:relative;
background: #fff;
}
.content_11 ul li .caption {
color:#fff;
padding:50px;
}
.content_11 ul li .mask {
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
opacity:0;/* マスクを表示しない */
background-color:rgba(0,0,0,0.8);
-webkit-transition:all 0.6s ease;
transition:all 0.6s ease;
}
.content_11 ul li:hover .mask {
opacity:1;/* マスクを表示する */
padding-left:10px;/* 右にずらす */
}

/* mov ------------*/
.mov{
background: #000;
text-align: center;
padding-top: 10px;
}
.mov iframe{
width:960px;
height: 540px;
}