@charset "utf-8";

/* base&reset settings ----------------------------------------------------*/
@media screen and (min-width: 769px){
img{
max-width: 100%;
height: auto;
width /***/:auto;　
}

html,
body{
width:100%;
height:100%;
}

html{
margin:0px;
padding: 0px;
font-size: 62.5%;
font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN", Verdana, "メイリオ", Meiryo, sans-serif;
color: #333333;
line-height:18px;
background:#fffff;
}

body,p,div,ul,li,h1,h2,h3,h4,dl,dt,dd{
padding:0;
margin:0;
}

li{
list-style:none;
}

a{
color:#2EA6DF;
}

a:hover{
color:#369;
}


header{
width:100%;
background:#FFF;
}
header img{
padding:29px 0 29px 30px;
width:300px;
height:auto;
}

footer{
background:#FFF;
}

.credit{
font-size:small;
text-align:right;
padding:60px 60px 60px 0;
background:#FFF;
}

.arrow{
position:fixed;
bottom:5%;
left:3%;
width:40px;
height:40px;
z-index:9999;
}

.presM{
font-family: presicav,sans-serif;
font-weight: 400;
font-style: normal;
}

.presB{
font-family: presicav,sans-serif;
font-weight: 700;
font-style: normal;
}

.presH{
font-family: presicav,sans-serif;
font-weight: 900;
font-style: normal;
}

/*content top
----------------------------------------------------*/

#first{
position: relative;
height:800px;
}

video#bgvid {
  position: absolute;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  background-size: cover;
  background-color: #FFF;
}

#first h1{
width:100%;
color:#FFF;
font-size:4vw;
letter-spacing: 1rem;
text-align: center;
position:absolute;
top:50%;
left:0;
right:0;
margin:0 auto;
}

.cu-logo{
width:180px;
position: absolute;
left:120px;
top:60px;
}

#second{
position: relative;
margin:100px 0 0 0;
}

#second h1{
font-size:2.4rem;
text-align: center;
margin:0 0 100px 0;
font-weight:bold;
}

.flex1 {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: space-between;
justify-content: space-between;
width:1080px;
margin:0 auto 100px;
}

.copy{
width:780px;
}

.copy h2{
color:#FF4854;
font-size:4rem;
line-height:4rem;
letter-spacing: 0.4rem;
}

.copy p{
color:#FF4854;
font-size:2.6rem;
line-height:2.6rem;
font-weight:bold;
margin: 20px 0 0 0;
}

.copy div{
font-size:2rem;
line-height: 4rem;
margin: 40px 0 0 0;
}

.illust{
width:300px;
}

.flex2 {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: space-between;
justify-content: space-between;
width:70%;
margin:0 auto;
min-width:1080px;
}

.flow{
width:22%;
}

.flow h3{
font-size:4rem;
padding:20px 15px;
}

.flow h4{
font-size:2rem;
padding:20px 15px 0;
text-align: center;
letter-spacing: 0.4rem;
}

.flow p{
font-size:1.6rem;
line-height: 2.4rem;
padding:10px 15px 20px;
font-weight: normal;
}

.btn {
  position: relative;
}
.btn span {
  display: block;
}

.btn span::before {
  position: absolute;
  right: 18px;
  top: 30px;
  display: block;
  content: "";
  width: 30%;
  height: 1px;
  background: #fff;
}

.btn span::after {
  position: absolute;
  right: 22px;
  top: 21px;
  display: block;
  content: "";
  width: 20px;
  height: 20px;
  border-top: 2px solid #fff;
  transform: rotate(45deg);
}

#fl01{
background: rgb(255,72,84);
background: linear-gradient(0deg, rgba(255,72,84,1) 0%, rgba(255,94,110,1) 100%);
color:#FFF;
}

#fl02{
background: rgb(28,144,218);
background: linear-gradient(0deg, rgba(28,144,218,1) 0%, rgba(105,188,244,1) 100%);
color:#FFF;
}

#fl03{
background: rgb(28,218,97);
background: linear-gradient(0deg, rgba(28,218,97,1) 0%, rgba(105,244,151,1) 100%);
color:#FFF;
}

#fl04{
background: rgb(218,218,28);
background: linear-gradient(0deg, rgba(218,218,28,1) 0%, rgba(243,244,105,1) 100%);
color:#FFF;
}

/*content case
----------------------------------------------------*/
#third{
}

#third h1{
font-size:2.4rem;
font-weight:bold;
position: absolute;
right:60px;
top:100px;
}

#third .inner{
width:1080px;
margin:260px auto 0;
}

#third h2{
font-size:2rem;
padding:10px 0;
}

#third a{
color:#333;
text-decoration:none;
}

#third a:hover{
color:#FF4854;
}

#third i{
display:inline-block;
margin-left:8px;
color:#FF4854;
top:-6px;
}

.main-img{
margin-top:20px;
}

#third p{
font-size:2rem;
margin-top:40px;
line-height: 3rem;
}

#fourth{
margin:200px 0 0 0;
position:relative;
}

#fourth h2{
color:#FFF;
background-color:#FF4854;
padding:50px 0;
}

#fourth span{
display: block;
width:1080px;
margin:0 auto;
font-size:4rem;
letter-spacing: 0.2rem;
}

.detail-img{
position: absolute;
top:-100px;
margin:0 auto;
left:0;
right:0;
width:340px;
padding-left:710px;
z-index:777;
}

.gallery{
margin:150px auto 0;
position:relative;
}

.slick-slide{
margin:0 30px;
}

.gallery img{
border:1px solid #ddd;
}

.gallery h1{
margin:10px 0 0 0;
font-size:2rem;
}

.gallery p{
margin:10px 0 0 0;
font-size:1.6rem;
line-height: 2.4rem;
}

.slick-next::before {
position: absolute;
right: 0;
top: 9px;
display: block;
content: "";
width: 100px;
height: 1px;
background: #000;
}

.slick-next::after {
position: absolute;
right: 2px;
top: 0;
display: block;
content: "";
width: 20px;
height: 20px;
border-top: 2px solid #000;
transform: rotate(45deg);
}

.slick-prev::before {
position: absolute;
left: 0;
top: 9px;
display: block;
content: "";
width: 100px;
height: 1px;
background: #000;
}

.slick-prev::after {
position: absolute;
left: 2px;
top: 0px;
display: block;
content: "";
width: 20px;
height: 20px;
border-top: 2px solid #000;
transform: rotate(-45deg);
}

#fourth h4{
display: block;
font-size:1.8rem;
line-height: 2.4rem;
color:#FFF;
font-weight:normal;
}

.balloon {
position: relative;
width: 800px;
margin: 100px auto 40px;
padding: 20px;
background:#FF4854;
text-align: center;
border-radius: 150px;
}

.balloon::before {
content: '';
position: absolute;
top: -20px;
left: 50%;
margin-left: -10px;
border: 10px solid transparent;
border-top-color: #FF4854;
transform: rotate(-180deg);
}

/*contact
----------------------------------------------------*/

#fifth h1{
font-size:2.4rem;
font-weight:bold;
position: absolute;
right:60px;
top:100px;
}

#fifth .inner{
width:1080px;
margin:260px auto 0;
}

#fifth .inner p{
font-size:2rem;
line-height: 2.6rem;
text-align: center;
}

.contact-detail{
width:1024px;
margin:60px auto 0;
}

.contact-detail dl{
font-size:1.6rem;
line-height: 2rem;
text-align: left;/*
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-around;
justify-content: space-around;*/
width:100%;
padding:20px 0 20px;
}

.contact-detail dt{
width:100%;
}

.contact-detail dd{
width:100%;
padding:10px 0 0 0;
}

.contact-detail .form-control{
padding:10px;
width:100%;
border:1px solid #ccc;
background:#FFF;
}

.contact-detail span{
color:#ff4e45;
font-size:1.4rem;
}

.arrow-box-2{
width:200px;
margin:90px auto 0;
}

/*company
----------------------------------------------------*/
#sixth h1{
font-size:2.4rem;
font-weight:bold;
position: absolute;
right:60px;
top:100px;
}

#sixth .inner{
width:1080px;
margin:260px auto 0;
text-align: center;
}

.cu-logoL{
width:300px;
}

#sixth  h2{
font-size:2rem;
line-height: 3rem;
margin:60px;
}

#sixth p{
font-size:1.6rem;
line-height: 2.4rem;
margin:60px 0 0 0;
}

.map{
margin:100px 0 0;
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
}

.group{
width:1080px;
margin:100px auto 0;
text-align: center;
}

/* menu
----------------------------------------------------*/
.pure-drawer div{
width:200px;
margin:100px auto 0;
}

.pure-drawer p{
margin: 0;
font-size:1.8rem;
}

.pure-drawer ul{
font-size:2rem;
letter-spacing: 0.1rem;
margin-top:25px;
}

.pure-drawer li{
margin-bottom:25px;
}

.pure-drawer li.icon{
padding-left:40px;
}

.pure-drawer a{
text-decoration: none;
color:#333;
}

/* button
----------------------------------------------------*/
#submit {
  display: flex;
  justify-content: left;
  align-items: center;
  width: 100%;
  height: 50px;
  position: relative;
  background: #ff4e45;
  padding: 0 0 0 25px;
  color: #fff;
  font-size: 16px;
  letter-spacing: 0.1em;
  line-height: 1.3;
  text-align: left;
  text-decoration: none;
  transition-duration: 0.3s;
  margin:0 0 0 -25px;
  border:none;
}
#submit:before {
  content: '';
  width: 8px;
  height: 8px;
  border: 0;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(45deg);
  position: absolute;
  top: 50%;
  right: 25px;
  margin-top: -6px;
}
#submit:hover {
  background: #ccc;
  color: #FFF;
}
#submit:hover:before {
  border-top: 2px solid #FFF;
  border-right: 2px solid #FFF;
}

/* spview
----------------------------------------------------*/

.spview{
display:none!important;
}


/* clear
----------------------------------------------------*/
/* ---IE7.IE8 clearfix--- */
.clearfix:after { content: ".";display: block;clear: both;height: 0;visibility: hidden; }
.clearfix { display: inline-block; }
/* Hides from IE-mac \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* End hide from IE-mac */

/*画像透過*/
.alpha a:hover img {
  opacity: 0.6;
  filter: alpha(opacity=60);
  -ms-filter: "alpha(opacity=60)";
}

.alpha img {
-webkit-transition: 0.3s ease-in-out;
   -moz-transition: 0.3s ease-in-out;
     -o-transition: 0.3s ease-in-out;
        transition: 0.3s ease-in-out;
}

.clear{
clear:both;
}