body, div, dl, dt, dd, ul, ol, li,
h1, h2, h3, h4, h5, h6, pre, code,
form, fieldset, legend, input, textarea,
p, blockquote, th, td {
  margin: 0;
  padding: 0;
      box-sizing: border-box;
    font-family: "游ゴシック", "Yu Gothic", "游ゴシック体", YuGothic, "メイリオ", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
    font-size: 16px;
}

li{ list-style: none; }

input, textarea{ box-sizing: border-box; }

a,
a:hover,
a:focus,
a:visited{ text-decoration: none; transition: .3s all; color: #ffffff; }

i.spacer{ padding-right: 7px; }

.disnone{ display: none !important; }


.txt-l{ text-align: left !important; }


.flex{ display: flex; align-items: center; }
.flex-spacebetween{ display: flex; justify-content: space-between; align-items: center; }
.flex-end{ display: flex !important; justify-content: flex-end !important; align-items: center !important; }


.c{ text-align: center; }

.block-01{ position: relative;}

#concept.anchor{
	position: absolute;
	margin-top: -250px;
	padding-top: 250px;
}

header{
    position: fixed;
    width: 100%;
    z-index: 100;
	z-index: 1000;
    
}
header nav{
    text-align: right;
    background: url('../images/header-bg.png') no-repeat 100% 0;
    height: 41px;
}

header nav ul{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-right: 20px;
}

header nav ul li a{
    display: block;
    padding: 8px;
	font-size: 14px;
    color: #ffffff;
}

header nav ul li a span{
    background: url('../images/arrow.png') no-repeat 0 50%;
    padding-left: 20px;
}



.inner{
    max-width: 1100px;
    margin: 0 auto;
}



h2{
    color: #e72119;
    font-size: 18px;
    margin-bottom: 20px;
}

h2 span{
    color: #3786c7;
    display: block;
    font-size: 12px;
    line-height: 1.2;
}

.inner p{
    font-size: 16px;
}


.block-01{
    margin-top: 80px;
    margin-bottom: 80px;
}

.block-02{
    margin-bottom: 80px;
}

.block-02 .ph{
    float: right;
    padding-left: 20px;
}

.block-03 .ph-r{
    float: right;
    padding-left: 20px;
}

.block-03 .ph-l{
    float: left;
    padding-right: 20px;
}
.block-03 .txt-r{
    overflow: auto;
}

.txt01{
    color: #3786c7;
    font-size: 16px;
    font-weight: 700;
}
.block-03 .txt{
    margin-top: 15px;
}
.block-03{
    margin-bottom: 80px;
}


.mt-15{ margin-top: 15px; }
.mb-30{ margin-bottom: 30px; }



.block-04{
    clear: both;
    margin-bottom: 200px;
}

.block-04 .inner .flex{
    align-items: end;
}
.block-04 .inner .ph p{
    position: relative;
    z-index: 100;
}

.block-04 .inblock{
    margin-top: 15px;
    
}

.block-04 .inblock *{
    font-size: 16px;
}
.block-04 dl.inblock dt{
    padding-right: 25px;
}
.block-04 dl.inblock dd span,
.block-04 span.block{
    display: block;
        color: #e72119;
    font-weight: 700;
    margin-bottom: 5px;
}



section.main{
    background: url('../images/main-bg.png') no-repeat 50% 60% / cover;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

section.main h1{
    padding-top: 70px;
}c


section.main .catch{
    position: absolute;
    bottom: 30px;
    left: 0;
}

.inner-bottom{
    width: 100%;
    position: absolute;
    bottom: 20px;
}


.inner-bottom .inner{
    position: relative;
}

section.main .drone{
    position: absolute;
    bottom: -120px;
    right: 0;
}







.slider {
  display: flex;
    position: absolute;
    width: 100% !important;
    overflow: hidden;
    top: calc(50%);
}
.slider__inner {
  display: flex;
}

.slider__inner:first-child {
  animation: loop 90s linear infinite;
}
 
.slider__inner:nth-child(2) {
  animation: loop2 90s -60s linear infinite;
}
 
.slider__inner:last-child {
  animation: loop3 90s -30s linear infinite;
}

.slider__item{
    margin-left: 40px;
    overflow: hidden;
}


.slider__item img{
  transition:1s all;
}

.slider__item img:hover{
    transform:scale(1.2,1.2);
  transition:1s all;
}
 
@keyframes loop {
  0% {
    transform: translateX(200%);
  }
  to {
    transform: translateX(-100%);
  }
}
 
@keyframes loop2 {
  0% {
    transform: translateX(100%);
  }
  to {
    transform: translateX(-200%);
  }
}
 
@keyframes loop3 {
  0% {
    transform: translateX(0%);
  }
  to {
    transform: translateX(-300%);
  }
}




/*::::


    profile


:::::*/

.profile{
    background: url(../images/footer-bg.jpg) no-repeat 50% 100% / cover;
    padding-bottom: 30vw;
    position: relative;
    margin-top: -150px;
}

.profile .inner{
    padding-top: 80px;
}

.profile .inner h2{
    text-align: center;
}

.profile .inner .flex{
    display: flex;
    justify-content: space-evenly;
    align-items: baseline;
}

.profile .inner .inbox{
    width: 500px;
}
.profile .inner .inbox img{
    width: 500px;
}

.flex-align-top{ align-items: flex-start !important; }


.profile .inner .inbox .midashi{
    font-size: 16px;
}

.profile .inner .inbox *{
    font-weight: 700;
    font-size: 13px;
}

.profile .inner .inbox dl{
    display: table;
    width: 100%;
    border-top: #3786c7 1px solid;
    padding: 7px 0;
}

.profile .inner .inbox dl:last-child{
    border-bottom: #3786c7 1px solid;
}

.profile .inner .inbox dl dt{
    display: table-cell;
    width: 130px;
}

.profile .inner .inbox dl dt.tit::before{
    content: "●";
}

.profile .inner .inbox dl dd{
    display: table-cell;
}




/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

    Works

::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

#works{
    background-color: #000000;
}

.works-box .inner{
    margin-top: 100px;
    display: flex;
    flex-wrap: wrap;
    max-width: 881px;
}

.works-box dl{
    width: 267px;
    margin-right: 40px;
    margin-bottom: 40px;
}

.works-box dl:nth-child(3n){
    margin-right: 0;
}

.works-box dl dd{
    display: flex;
    justify-content: space-between;
    align-items: center;
    
}

.works-box dl dd p *{
    color: #ffffff;
    font-size: 16px;
}

.works-box dl dd p span{display: block;}

#works footer small.copy{
    font-size: 12px;
    display: block;
    color: #ffffff;
    text-align: center;
    padding: 10px 0;
    
}
.works-box dl dt{ overflow: hidden; }
.works-box dl dt a{
    display: block;
}

.works-box dl dt a img{
  transition:1s all;
}

.works-box dl dt a img:hover{
    transform:scale(1.2,1.2);
  transition:1s all;
}

p.pagetop { position: fixed; bottom: 10px; right: 10px; width: 50px; height: 50px; }
p.pagetop img{ width: 100%; }


.banner{
	margin-top: 36px;
}

/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

    footer

::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

footer small.copy{
    font-size: 12px;
    display: block;
    text-align: center;
    padding: 10px 0;
    
}




.drone{
  animation: SlideIn 1.6s forwards;
}

/* CSSアニメーションの設定 */
@keyframes SlideIn {
  0% {
    opacity: 0;/*初期状態では透明に*/
    transform: translateX(64px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}