@charset "utf-8"; 
a, abbr, acronym, address, applet, article, aside, audio,b, big, blockquote, body, caption, canvas, center, cite, code, dd, del, details, dfn, dialog, div, dl, dt, em, embed, fieldset, figcaption, figure, form, footer, header, hgroup, h1, h2, h3, h4, h5, h6, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, main, small, span, strike, strong, sub, summary, sup, tt, table, tbody, textarea, tfoot, thead, time, tr, th, td, u, ul, var, video{font-size:100%; vertical-align:baseline; white-space:normal; margin:0; padding:0; border:0; outline:0; background:transparent;}article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, main{display:block;} ol, ul{list-style:none;} blockquote, q{quotes:none;}table{border-collapse:collapse; border-spacing:0;} *{-webkit-box-sizing:border-box; -moz-box-sizing:border-box; -o-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box; -webkit-text-size-adjust:100%;} img{vertical-align:top; width: 100%;height: auto;} h1, h2, h3, h4, h5, h6{font-weight:normal;}


/*---------------------------
Link
---------------------------*/
a{outline:none; text-decoration: none; color: #333;}
a:hover{ opacity: 0.8;}
a img:hover{ opacity: 0.8;}
a:hover{-webkit-transition:all .3s ease; transition:all .3s ease;}


/*---------------------------
Body
---------------------------*/
body{font-family:source-han-sans-japanese, sans-serif, "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic"; font-style: normal; font-weight: 400; color: #333; word-wrap:break-word; font-kerning:normal;font-size:15px;letter-spacing: 0.1em;}



/*---------------------------
共通
---------------------------*/
.cf:before,
.cf:after {content: " ";display: table;}
.cf:after {clear: both;}
.cf{*zoom: 1;}

.pc{display:block;}
.sp{display:none;}



@media only screen and (max-width:750px){
.pc{display:none;}
.sp{display:block;}
}


.hero{width: 100%}
.hero .inner{width:100%; height: 100vh; display: flex; justify-content: center; align-items: center;}
.hero h1{max-width: 350px; width: 45%;}

@media only screen and (max-width:750px){
.hero .inner{ height: auto; padding: 100px 0 50px;}
}


.member{width: 100%;}
.member .inner{width:100%; height: 100vh; display: flex; justify-content: center; align-items: center;}
.member ul{display: flex; justify-content: center; align-items: center; max-width: 700px; margin: 0 auto;}
.member li{padding:0 40px; width: 50%;}
.member h3{font-size: 18px;font-family: futura-pt, sans-serif; font-weight: 600; text-align: center; margin-top: 15px;}

@media only screen and (max-width:750px){
.member .inner{height: auto; padding: 50px 0;}
.member ul{width: 80%; margin: 0 auto;}
.member li{padding:0 2%;}
.member h3{font-size: 15px;text-align: center; margin-top: 10px;}
}

.ImgBox-Img{
  transition-duration: 0.3s;
}
.ImgBox-Img:hover{
  transform: scale(1.05);
  transition-duration: 0.3s;
  opacity: 0.8;
}

.company{width: 100%;}
.company .inner{margin: 0 auto; height: 100vh; display:flex; flex-direction:column; justify-content:center;}
.company h2{font-size: 40px; color:#db4c39;  text-align: center;font-family: futura-pt, sans-serif; font-weight: 600; letter-spacing: 0.1em;}
.company dl{font-size: 0; letter-spacing: 0; margin: 50px auto 0; max-width: 350px; width: 75%;}
.company dt{display: inline-block; width: 30%; margin-right: 7%; vertical-align: top; font-size: 15px; margin-bottom: 20px; letter-spacing: 0.1em;}
.company dd{display: inline-block; width: 63%; vertical-align: top; font-size: 15px; margin-bottom: 20px; letter-spacing: 0.1em;}
.company dt:last-child, .company dd:last-child{margin-bottom: 0;}
.company dl a{text-decoration: underline;}


@media only screen and (max-width:750px){
.company .inner{height: auto; padding: 50px 0 100px;}
.company h2{font-size: 30px;}
.company dl{margin: 30px auto 0;}
.company dt{font-size: 13px; margin-bottom: 20px; letter-spacing: 0.1em;}
.company dd{font-size: 13px;}
}


footer{font-size:9px; text-align: center; padding-bottom: 20px; color: #808080;}

@media only screen and (max-width:750px){
footer{padding-bottom: 10px;}
}

.img-wrap {
  overflow: hidden;
  position: relative;
}

.img-wrap:before {
  animation: img-wrap 2s cubic-bezier(.4, 0, .2, 1) forwards;
  background: #fff;
  bottom: 0;
  content: '';
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
}

@keyframes img-wrap {
  100% {
    transform: translateX(100%);
  }
}


.img-animation {
  animation: img-opacity 2s cubic-bezier(.4, 0, .2, 1);
  overflow: hidden;
  position: relative;
}

.img-animation:before {
  animation: img-animation 2s cubic-bezier(.4, 0, .2, 1) forwards;
  background: #fff;
  bottom: 0;
  content: '';
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
}


@keyframes img-opacity {
  0% {
    opacity: 0;
  }
}

@keyframes img-animation {
  100% {
    transform: translateX(100%);
  }
}





.contact {width:300px; margin: 50px auto 0;}
.contact a {
  color: #db4c39;
  font-size: 20px;
  font-weight: 400;
  padding: 15px 20px;
  border: 3px solid #db4c39;
  position: relative;
  z-index: 1;
   line-height: 1;
  display: inline-block;
  transition: .3s;
  text-align: center;
  width: 100%;
  letter-spacing: 0.1em;
  font-family: futura-pt, sans-serif; font-weight: 300;
}
.contact a span{font-size: 14px;display: block; margin-bottom: 10px;}
.contact a::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: #db4c39;
  box-sizing: border-box;
  z-index: -1;
  transform: scale(1.2);
  opacity: 0;
  transition: transform ease .3s, opacity .3s;
}
.contact a:hover {
  color: #fff;
  background: transparent;
  opacity: 1;
}
.contact a:hover::before {
  transform: scale(1);
  opacity: 1;
}

@media only screen and (max-width:750px){
.contact {width:75%; margin: 30px auto 0;}
.contact a {
  color: #db4c39;
  font-size: 15px;
  }
}




.scroll-box{position: fixed; right: 0px; bottom: 8%;}

.scroll-box a {
  display: inline-block;
  position: absolute;
  right: 40px;
  bottom: 0;
  z-index: 2;
  padding: 10px 10px 110px;
  overflow: hidden;
  color: #34ab88;
  font-size: 12px;
  font-family:futura-pt, sans-serif;
  line-height: 1;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-decoration: none;
  writing-mode: vertical-lr;
}
.scroll-box a:hover{opacity: 1;}
.scroll-box a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 1px;
  height: 100px;
  background: #34ab88;
}

.scroll-box a::after {
  animation: sdl 2s cubic-bezier(1, 0, 0, 1) infinite;
}

@media only screen and (max-width:750px){
.scroll-box{ bottom: -4%; right: -10px}
.scroll-box a{right: 15px;font-size: 10px;}
.scroll-box a::after {
  height: 50px;
    bottom:50px;
}
}

@keyframes sdl {
  0% {
    transform: scale(1, 0);
    transform-origin: 0 0;
  }
  30% {
    transform: scale(1, 1);
    transform-origin: 0 0;
  }
  70% {
    transform: scale(1, 1);
    transform-origin: 0 100%;
  }
  100% {
    transform: scale(1, 0);
    transform-origin: 0 100%;
  }
}



/*
    Colorbox Core Style:
    The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}

#cboxWrapper {max-width:none;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic;}
.cboxIframe{width:100%; height:100%; display:block; border:0; padding:0; margin:0;}
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;}

/* 
    User Style:
    Change the following styles to modify the appearance of Colorbox.  They are
    ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:#000; opacity: 0.9; filter: alpha(opacity = 90);}
#colorbox{outline:0;}
    #cboxContent{margin:30px; overflow:visible; background:#000;}
        .cboxIframe{background:#fff;}
        #cboxError{padding:50px; border:1px solid #ccc;}
        #cboxLoadedContent{background:#fff; padding:1px;}
        #cboxLoadingOverlay{background:#fff;}
        #cboxTitle{position:absolute; top:-22px; left:0; color:#000;}
        #cboxCurrent{position:absolute; top:-22px; right:205px; text-indent:-9999px;}

        /* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
        #cboxClose {border:0; padding:0; margin:0; overflow:visible; text-indent:-9999px; width:25px; height:25px; position:absolute; top:-30px; right: -30px;background:url("../images/close.svg") no-repeat; background-size: cover;}

        
.inline-box{padding:30px 30px 30px 30px;}
.inline-box .photo-box{width: 90%; margin: 0 auto;display: flex; justify-content: center; align-items: center;}
.inline-box .photo-box li{width: 50%; padding:0 10px;}
.inline-box h3{font-size: 20px; font-weight: 700; text-align:center; margin-top: 15px;}
.inline-box .txt{font-size: 13px; line-height: 1.8; margin-top: 15px; text-align: center;}
.inline-box .sns-box{ margin-top: 15px;text-align: center;}
.inline-box .sns-box li{display: inline-block;font-size: 24px;margin-right: 10px;}
.inline-box .sns-box li:last-child{margin-right: 0;}
.inline-box .txt2{font-size: 13px; line-height: 1.8; margin-top: 15px;}



@media only screen and (max-width:750px){
.inline-box{padding:20px 10px;}
.inline-box .photo-box{width: 100%;}
.inline-box .photo-box li{width: 50%; padding:0 5px;}
.inline-box h3{font-size: 15px; margin-top: 15px;}
.inline-box .txt{font-size: 12px; margin-top: 10px; }
.inline-box .txt2{font-size: 12px;  margin-top: 10px;padding:0 10px;}
.inline-box .sns-box{ margin-top: 10px;}

}