/*!
 * Start Bootstrap - Agency v3.3.7+1 (http://startbootstrap.com/template-overviews/agency)
 * Copyright 2013-2016 Start Bootstrap
 * Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap/blob/gh-pages/LICENSE)
 */.btn-primary.active,.btn-primary:active,.btn-xl.active,.btn-xl:active,.open .dropdown-toggle.btn-primary,.open .dropdown-toggle.btn-xl{background-image:none}


@font-face {
  font-family: "futura"; /* フォント名 */
  /* フォーマットごとにパスを指定 */
  src: url("vender/font-awesome/fonts/futura/futura.ttf") format("truetype");
}


*, *:before, *:after {
    box-sizing: inherit;
}
body{/*overflow-x:hidden;*/
font-family:'Josefin Sans',Montserrat,'Noto Sans JP',P-KoburinaGoStdN-W3,游ゴシック,Yu Gothic,游ゴシック体,YuGothic,Hiragino Kaku Gothic ProN,Hiragino Sans,sans-serif;
/*"Roboto Slab","Helvetica Neue",Helvetica,Arial,sans-serif;*/
webkit-tap-highlight-color:#DE8DB9}


.btn-primary,.btn-xl,h1,h2,h3,h4,h5,h6{font-family:'Josefin Sans',Montserrat,'Noto Sans JP',P-KoburinaGoStdN-W3,游ゴシック,Yu Gothic,游ゴシック体,YuGothic,Hiragino Kaku Gothic ProN,Hiragino Sans,sans-serif;
/*Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;*/
text-transform:uppercase;
font-weight:700}


.text-muted{color:#fff;
    text-align: left;
    font-weight: 500;
    font-size: 1.35rem;
    line-height: 185%;
    letter-spacing: 0.5px;
    padding: 0% 0%;
}

.f-s-14 {
font-size:14px;
}

.text-primary,a{color:#FFF;}


p{font-size:14px;
line-height:1.75}


p.large{font-size:16px}


a,a.active,a:active,a:focus,a:hover{outline:0}


a.active,a:active,a:focus,a:hover{color:#FFF}


.img-centered{margin:0 auto}


.bg-light-gray{background-color:#eee}


.bg-darkest-gray{background-color:#222}


.btn-primary{color:#fff;
background-color:#DE8DB9;
border-color:#DE8DB9}


.btn-primary.active,.btn-primary:active,.btn-primary:focus,.btn-primary:hover,.open .dropdown-toggle.btn-primary{color:#fff;
background-color:#333;
border-color:#333}


.btn-primary.disabled,.btn-primary.disabled.active,.btn-primary.disabled:active,.btn-primary.disabled:focus,.btn-primary.disabled:hover,.btn-primary[disabled],.btn-primary[disabled].active,.btn-primary[disabled]:active,.btn-primary[disabled]:focus,.btn-primary[disabled]:hover,fieldset[disabled] .btn-primary,fieldset[disabled] .btn-primary.active,fieldset[disabled] .btn-primary:active,fieldset[disabled] .btn-primary:focus,fieldset[disabled] .btn-primary:hover{background-color:#333;
border-color:#DE8DB9}


.btn-primary .badge{color:#DE8DB9;
background-color:#fff}


.btn-xl{color:#fff;
background-color:#595757;
border-color:#595757;
border-radius:3px;f
font-size:18px;
padding:20px 40px}


.btn-xl.active,.btn-xl:active,.btn-xl:focus,.btn-xl:hover,.open .dropdown-toggle.btn-xl{color:#fff;
background-color:#595757;
border-color:#595757}


.btn-xl.disabled,.btn-xl.disabled.active,.btn-xl.disabled:active,.btn-xl.disabled:focus,.btn-xl.disabled:hover,.btn-xl[disabled],.btn-xl[disabled].active,.btn-xl[disabled]:active,.btn-xl[disabled]:focus,.btn-xl[disabled]:hover,fieldset[disabled] .btn-xl,fieldset[disabled] .btn-xl.active,fieldset[disabled] .btn-xl:active,fieldset[disabled] .btn-xl:focus,fieldset[disabled] .btn-xl:hover{background-color:#333;
border-color:#333}


.btn-xl .badge{color:#DE8DB9;
background-color:#fff}


.navbar-custom{background-color:rgb(0 0 0 / 50%);
border-color:transparent}


.navbar-custom .navbar-brand{color:#DE8DB9;
font-family:'Josefin Sans',Montserrat,'Noto Sans JP',P-KoburinaGoStdN-W3,游ゴシック,Yu Gothic,游ゴシック体,YuGothic,Hiragino Kaku Gothic ProN,Hiragino Sans,sans-serif;}


.navbar-custom .navbar-brand.active,.navbar-custom .navbar-brand:active,.navbar-custom .navbar-brand:focus,.navbar-custom .navbar-brand:hover{color:#333}


.navbar-custom .nav li a,.navbar-custom .navbar-toggle{font-family:'Josefin Sans',Montserrat,'Noto Sans JP',P-KoburinaGoStdN-W3,游ゴシック,Yu Gothic,游ゴシック体,YuGothic,Hiragino Kaku Gothic ProN,Hiragino Sans,sans-serif;
color:#fff;
text-transform:uppercase}


.navbar-custom .navbar-collapse{border-color:rgba(255,255,255,.02);}


.navbar-custom .navbar-toggle{/*background-color:#DE8DB9;
border-color:#DE8DB9;*/
font-size:12px}


.navbar-custom .navbar-toggle:focus,.navbar-custom .navbar-toggle:hover{background-color:rgb(0 0 0 / 0%);}


.navbar-custom .nav li a{font-weight:600;
letter-spacing:1px}


.navbar-custom .nav li a:focus,.navbar-custom .nav li a:hover{color:#DE8DB9;
outline:0}


.navbar-custom .navbar-nav>.active>a{border-radius:0;
color:#fff;
background-color:#DE8DB9}


.navbar-custom .navbar-nav>.active>a:focus,.navbar-custom .navbar-nav>.active>a:hover{color:#fff;
background-color:#333}


@media (min-width:768px){.navbar-custom{background-color:transparent;
padding:25px 0;
-webkit-transition:padding .3s;
-moz-transition:padding .3s;
transition:padding .3s;
border:none}


.navbar-custom .navbar-brand{font-size:2em;
-webkit-transition:all .3s;
-moz-transition:all .3s;
transition:all .3s}


.navbar-custom .navbar-nav>.active>a{border-radius:3px}


.navbar-custom.affix{background-color: rgb(0 0 0 / 50%);
padding:5px 0;
height: 7rem;}


.navbar-custom.affix .navbar-brand{font-size:1.5em
}
}


header{/*background-image:url(../img/logos/top-logo.png);*/
background-color: #de8db9;
background-repeat:no-repeat;
background-attachment:scroll;
background-position:center center;
-webkit-background-size:cover;
-moz-background-size:cover;
background-size:cover;
-o-background-size:cover;
text-align:center;
color:#fff}


header .intro-text{padding-top:100px;
padding-bottom:50px}

@media (max-width:400px){
header .intro-text{padding-top:160px;
padding-bottom:35px}
}

header .intro-text .intro-lead-in{font-family:'Josefin Sans',Montserrat,'Noto Sans JP',P-KoburinaGoStdN-W3,游ゴシック,Yu Gothic,游ゴシック体,YuGothic,Hiragino Kaku Gothic ProN,Hiragino Sans,sans-serif;
font-style:italic;
font-size:22px;
line-height:22px;
margin-bottom:25px}


header .intro-text .intro-heading{font-family:'Josefin Sans',Montserrat,'Noto Sans JP',P-KoburinaGoStdN-W3,游ゴシック,Yu Gothic,游ゴシック体,YuGothic,Hiragino Kaku Gothic ProN,Hiragino Sans,sans-serif;
text-transform:uppercase;
font-weight:700;
font-size:50px;
line-height:50px;
margin-bottom:25px}


@media (min-width:768px){header .intro-text{padding-top:80px;
padding-bottom:50px}


header .intro-text .intro-lead-in{font-family:'Josefin Sans',Montserrat,'Noto Sans JP',P-KoburinaGoStdN-W3,游ゴシック,Yu Gothic,游ゴシック体,YuGothic,Hiragino Kaku Gothic ProN,Hiragino Sans,sans-serif;
font-style:italic;
font-size:40px;
line-height:40px;
margin-bottom:25px}


header .intro-text .intro-heading{font-family:'Josefin Sans',Montserrat,'Noto Sans JP',P-KoburinaGoStdN-W3,游ゴシック,Yu Gothic,游ゴシック体,YuGothic,Hiragino Kaku Gothic ProN,Hiragino Sans,sans-serif;
text-transform:uppercase;
font-weight:700;
font-size:75px;
line-height:75px;
margin-bottom:30px}


}


.container2 {
padding-right:7rem;
margin-top: -6rem;
}
.container3 {
padding-left:7rem;
}
.container-s{
padding:0rem 3rem;
}

#portfolio .portfolio-item .portfolio-caption p,section h3.section-subheading{font-family:'Josefin Sans',Montserrat,'Noto Sans JP',P-KoburinaGoStdN-W3,游ゴシック,Yu Gothic,游ゴシック体,YuGothic,Hiragino Kaku Gothic ProN,Hiragino Sans,sans-serif;
}


section{padding:100px 0}
@media screen and (max-width:640px) {
section{padding:0px 0
}
}

.news-section-heading {
font-size:80px;
margin-top:0;
text-align: left;
 transform-origin: top right;
 top: 0px;
  left: 0px;
  color:#fff;
}

.m-t-1 {
margin-top:1rem;
}

section h2.section-heading{font-size:40px;
margin-top:0;
text-align: left;
transform:rotate(90deg)  translateX(100%) translateY(40px);
 transform-origin: top right;
 top: 0px;
  left: 0px;
}

section h2.section-heading2{font-size:40px;
margin-top:0;
text-align: left;
transform:rotate(90deg)  translateX(15%)translateY(-100px);
transform-origin: top left;
top: 0px;
left: 0px;
font-size: 8rem;
}

@media (min-width:768px){
section h2.section-heading
{font-size:8rem;
}
.container2 {
padding: 0rem 20rem 0rem 8rem;
margin-top: -9rem;
}
.container3 {
padding-left:13rem;
}
.container-s{
padding:0rem 15rem;
}
}



section h3.section-subheading{
font-size:3rem;
text-transform:none;
font-weight:200;
margin-bottom:-15px;
text-align: left;
color:#de8db9;
}

h3 {
transition-duration: .6s;
opacity: 1;
    transition-timing-function: cubic-bezier(.37,.01,0,.98);
    transition-duration: .6s,.8s;
    transition-property: transform,opacity;
    transform: translateZ(0)!important;
}


.h3-90{
text-align: left;
margin-top:0;
transform:rotate(90deg)  translateX(107%) translateY(100px);
transform-origin: top right;
top: 0px;
  }

.h3-90-2{
text-align: left;
margin-top:0;
transform:rotate(90deg)  translateX(19%) translateY(-40px);
transform-origin: top left;
top: 0px;
  }

@media screen and (max-width:640px) {
.news-section-heading {
font-size:38px;
margin-top:-15px;
}
.h3-90{
text-align: left;
margin-top:0;
transform:rotate(90deg)  translateX(100%) translateY(30px);
}
section h3.section-subheading{
font-size:1.8rem;
margin-bottom:5px;
}
section h2.section-heading {
    font-size: 38px;
    transform: rotate(90deg) translateX(85%);
    }
section h2.section-heading2 {
    font-size: 38px;
    transform: rotate(90deg) translateX(20%) translateY(-115%);
    }
    .h3-90-2{
    transform:rotate(90deg)  translateX(30%) translateY(-20px);
    }
}


@media (min-width:640px) and (max-width:1000px){
 .h3-90-2{
    transform:rotate(90deg)  translateX(30%) translateY(-35px);
    }
section h2.section-heading2 {
    transform: rotate(90deg) translateX(20%) translateY(-108%);
    }
}


@media (min-width:768px){
section{padding:5px 0px 3rem;
}
}


.service-heading{margin:15px 0;
text-transform:none}


#portfolio .portfolio-item{margin:0 0 15px;
right:0}


#portfolio .portfolio-item .portfolio-link{display:block;
position:relative;
max-width:400px;
margin:0 auto}


#portfolio .portfolio-item .portfolio-link .portfolio-hover{background:rgba(222,141,185,.9);
position:absolute;
width:100%;
height:100%;
opacity:0;
transition:all ease .5s;
-webkit-transition:all ease .5s;
-moz-transition:all ease .5s}


#portfolio .portfolio-item .portfolio-link .portfolio-hover:hover{opacity:1}


#portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content{position:absolute;
width:100%;
height:20px;
font-size:20px;
text-align:center;
top:50%;
margin-top:-12px;
color:#fff}


#portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content i{margin-top:-12px}


#portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content h3,#portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content h4{margin:0}


#portfolio .portfolio-item .portfolio-caption{max-width:400px;
margin:0 auto;
background-color:#fff;
text-align:center;
padding:25px}


#portfolio .portfolio-item .portfolio-caption h4{text-transform:none;
margin:0}


#portfolio .portfolio-item .portfolio-caption p{font-size:16px;
margin:0}


footer span.copyright,footer ul.quicklinks{font-family:'Josefin Sans',Montserrat,'Noto Sans JP',P-KoburinaGoStdN-W3,游ゴシック,Yu Gothic,游ゴシック体,YuGothic,Hiragino Kaku Gothic ProN,Hiragino Sans,sans-serif;}


#portfolio *{z-index:2}


@media (min-width:767px){#portfolio .portfolio-item{margin:0 0 30px}


}


.timeline{list-style:none;
padding:0;
position:relative}


.timeline:before{top:0;
bottom:0;
position:absolute;
content:"";
width:2px;
background-color:#f1f1f1;
left:40px;
margin-left:-1.5px}


.timeline>li{margin-bottom:50px;
position:relative;
min-height:50px}


.timeline>li:after,.timeline>li:before{content:" ";
display:table}


.timeline>li:after{clear:both}


.timeline>li .timeline-panel{width:100%;
float:right;
padding:0 20px 0 100px;
position:relative;
text-align:left}


.timeline>li .timeline-panel:before{border-left-width:0;
border-right-width:15px;
left:-15px;
right:auto}


.timeline>li .timeline-panel:after{border-left-width:0;
border-right-width:14px;
left:-14px;
right:auto}


.timeline>li .timeline-image{left:0;
margin-left:0;
width:80px;
height:80px;
position:absolute;
z-index:100;
background-color:#DE8DB9;
color:#fff;
border-radius:100%;
border:7px solid #f1f1f1;
text-align:center}


.timeline>li .timeline-image h4{font-size:10px;
margin-top:12px;
line-height:14px}


.timeline>li.timeline-inverted>.timeline-panel{float:right;
text-align:left;
padding:0 20px 0 100px}


.timeline>li.timeline-inverted>.timeline-panel:before{border-left-width:0;
border-right-width:15px;
left:-15px;
right:auto}


.timeline>li.timeline-inverted>.timeline-panel:after{border-left-width:0;
border-right-width:14px;
left:-14px;
right:auto}


.timeline>li:last-child{margin-bottom:0}


.timeline .timeline-heading h4{margin-top:0;
color:inherit}


.timeline .timeline-heading h4.subheading{text-transform:none}


.timeline .timeline-body>p,.timeline .timeline-body>ul{margin-bottom:0}


@media (min-width:768px){.timeline:before{left:50%}


.timeline>li{margin-bottom:100px;
min-height:100px}


.timeline>li .timeline-panel{width:41%;
float:left;
padding:0 20px 20px 30px;
text-align:right}


.timeline>li .timeline-image{width:100px;
height:100px;
left:50%;
margin-left:-50px}


.timeline>li .timeline-image h4{font-size:13px;
margin-top:16px;
line-height:18px}


.timeline>li.timeline-inverted>.timeline-panel{float:right;
text-align:left;
padding:0 30px 20px 20px}


}


@media (min-width:992px){.timeline>li .timeline-panel,.timeline>li.timeline-inverted>.timeline-panel{padding:0 20px 20px}


.timeline>li{min-height:150px}


.timeline>li .timeline-image{width:150px;
height:150px;
margin-left:-75px}


.timeline>li .timeline-image h4{font-size:18px;
margin-top:30px;
line-height:26px}


}


@media (min-width:1200px){.timeline>li{min-height:170px}


.timeline>li .timeline-panel{padding:0 20px 20px 100px}


.timeline>li .timeline-image{width:170px;
height:170px;
margin-left:-85px}


.timeline>li .timeline-image h4{margin-top:40px}


.timeline>li.timeline-inverted>.timeline-panel{padding:0 100px 20px 20px}


}


.team-member{text-align:center;
margin-bottom:50px}


.team-member img{margin:0 auto;
border:7px solid #fff}


.team-member h4{margin-top:25px;
margin-bottom:0;
text-transform:none}


.team-member p{margin-top:0}


aside.clients img{margin:50px auto}


section#contact{background-color:#222;
background-image:url(../img/map-image.png);
background-position:center;
background-repeat:no-repeat}


section#contact .section-heading{color:#fff}


section#contact .form-group{margin-bottom:25px}


section#contact .form-group input,section#contact .form-group textarea{padding:20px}


section#contact .form-group input.form-control{height:auto}


section#contact .form-group textarea.form-control{height:236px}


section#contact .form-control:focus{border-color:#DE8DB9;
box-shadow:none}


section#contact ::-webkit-input-placeholder{font-family:"futura",Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
text-transform:uppercase;
font-weight:700;
color:#eee}


section#contact :-moz-placeholder{font-family:"futura",Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
text-transform:uppercase;
font-weight:700;
color:#eee}


section#contact ::-moz-placeholder{font-family:"futura",Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
text-transform:uppercase;
font-weight:700;
color:#eee}


section#contact :-ms-input-placeholder{font-family:"futura",Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
text-transform:uppercase;
font-weight:700;
color:#eee}


section#contact .text-danger{color:#e74c3c}


footer{
padding:9rem 0;
text-align:center;
background-color:#5A5757;}


footer span.copyright{
line-height:40px;
text-transform:uppercase;
text-transform:none;
color:#fff;}


footer ul.quicklinks{
margin-bottom:0;
line-height:40px;
text-transform:uppercase;
text-transform:none}


ul.social-buttons{margin-bottom:0}


ul.social-buttons li a{display:block;
background-color:#222;
height:40px;
width:40px;
border-radius:100%;
font-size:20px;
line-height:40px;
color:#fff;
outline:0;
-webkit-transition:all .3s;
-moz-transition:all .3s;
transition:all .3s}


ul.social-buttons li a:active,ul.social-buttons li a:focus,ul.social-buttons li a:hover{background-color:#DE8DB9}


.btn.active,.btn:active,.btn:active:focus,.btn:focus{outline:0}


.portfolio-modal .modal-dialog{margin:0;
height:100%;
width:auto}


.portfolio-modal .modal-content{border-radius:0;
background-clip:border-box;
-webkit-box-shadow:none;
box-shadow:none;
border:none;
min-height:100%;
padding:100px 0;
text-align:center}


.portfolio-modal .modal-content h2{margin-bottom:15px;
font-size:3em}


.portfolio-modal .modal-content p{margin-bottom:30px}


.portfolio-modal .modal-content p.item-intro{margin:20px 0 30px;
font-family:"futura","Droid Serif","Helvetica Neue",Helvetica,Arial,sans-serif;
font-style:italic;
font-size:16px}


.portfolio-modal .modal-content ul.list-inline{margin-bottom:30px;
margin-top:0}


.portfolio-modal .modal-content img{margin-bottom:30px}


.portfolio-modal .close-modal{position:absolute;
width:75px;
height:75px;
background-color:transparent;
top:25px;
right:25px;
cursor:pointer}


.portfolio-modal .close-modal:hover{opacity:.3}


.portfolio-modal .close-modal .lr{height:75px;
width:1px;
margin-left:35px;
background-color:#222;
transform:rotate(45deg);
-ms-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
z-index:1051}


.portfolio-modal .close-modal .lr .rl{height:75px;
width:1px;
background-color:#222;
transform:rotate(90deg);
-ms-transform:rotate(90deg);
-webkit-transform:rotate(90deg);
z-index:1052}


.portfolio-modal .modal-backdrop{opacity:0;
display:none}


::-moz-selection{text-shadow:none;
background:#DE8DB9}


::selection{text-shadow:none;
background:#DE8DB9}


img::selection{background:0 0}


img::-moz-selection{background:0 0}


.header-img {
height: 60px;
}
@media (min-width:767px){
.header-img {
height: 80px;
display: flex;
justify-content: center;
align-items: center;
margin-top: -8px;
}
}

.top-logo {
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
padding:0rem;
height:500px;
}

@media (max-width:600px){
.top-logo {
height: 260px;
display: flex;
justify-content: center;
align-items: center;
margin-top: -8px;
}
}

.scrolldown4{
    /*描画位置※位置は適宜調整してください*/
  position:absolute;
  bottom:80%;
  right:50%;
    /*矢印の動き1秒かけて永遠にループ*/
  animation: arrowmove 2s ease-in-out infinite;
}

/*下からの距離が変化して全体が下→上→下に動く*/
@keyframes arrowmove{
      0%{bottom:15%;}
      50%{bottom:18%;}
     100%{bottom:15%;}
 }

/*Scrollテキストの描写*/
.scrolldown4 span{
    /*描画位置*/
  position: absolute;
  left:-20px;
  bottom:10px;
    /*テキストの形状*/
    font-family:Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
  color: #eee;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  font-weight:600;
  /*縦書き設定*/
  -ms-writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
}

/* 矢印の描写 */
.scrolldown4:before {
    content: "";
    /*描画位置*/
    position: absolute;
    bottom: 0;
    right: -9px;
    /*矢印の形状*/
    width: 3px;
    height: 30px;
    background: #eee;
    transform: skewX(-31deg);
}

.scrolldown4:after{
  content:"";
    /*描画位置*/
  position: absolute;
  bottom:0;
  right:0;
    /*矢印の形状*/
  width:3px;
  height: 70px;
  background:#eee;
}

@media (max-width:400px){
@keyframes arrowmove{
      0%{bottom:22%;}
      50%{bottom:25%;}
     100%{bottom:22%;}
 }
.scrolldown4:before {
 width: 2px;
    height: 20px;
    right: -6px;
    }
 .scrolldown4:after{
 width:2px;
  height: 50px;
  }
  .scrolldown4{
    animation: arrowmove 2.5s ease-in-out infinite;
    }
  }
  
.p-b-5{
padding-bottom:10rem;
}
.p-b-1{
padding-bottom:1rem;
}


@media (max-width:600px){
.p-b-5 {
    padding-bottom: 3rem;
}
}


  
  table{
  margin: 36px auto 0;
}

table th{
position: relative;
text-align: left;
font-size:2rem;
padding: 1rem 3rem;
font-weight: 400;
width:27rem;
}

table th:after{
  display: block;
  content: "";
  width: 30px;
  height: 1px;
  background-color: #fff;
  position: absolute;
  top:calc(50% - 1px);
  right:20px;
}



table td{
text-align: left;
padding: 1.5rem 8rem;
font-size: 2rem;
font-weight: 400;
}
  
.m-auto {
margin: 36px auto 0;
}

@media screen and (max-width:640px) {
table th:after{
  width: 15px;
  right:-15px;
}
table th{
  padding: 1rem 1rem;
  font-size: 1.5rem;
  width: 10rem;
}
table td {
width: 17rem;
padding: 1.5rem 1rem 1.5rem 3rem;
font-size: 1.6rem;
}
}

/* ハンバーガーアイコンの設置スペース */
.drawer_open {
background-color:rgb(0 0 0 / 0%);
  display: flex;
  height: 35px;
  width: 35px;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 100;/* 重なり順を一番上にする */
  cursor: pointer;
}

/* ハンバーガーメニューのアイコン */
.drawer_open span,
.drawer_open span:before,
.drawer_open span:after {
  content: '';
  display: block;
  height: 2px;
  width: 25px;
  border-radius: 3px;
  background: #fff;
  transition: 0.5s;
  position: absolute;
}

/* 三本線の一番上の棒の位置調整 */
.drawer_open span:before {
  bottom: 8px;
}

/* 三本線の一番下の棒の位置調整 */
.drawer_open span:after {
  top: 8px;
}

/* アイコンがクリックされたら真ん中の線を透明にする */
#drawer_input:checked ~ .drawer_open span {
  background: rgba(255, 255, 255, 0);
}

/* アイコンがクリックされたらアイコンが×印になように上下の線を回転 */
#drawer_input:checked ~ .drawer_open span::before {
  bottom: 0;
  transform: rotate(45deg);
}

#drawer_input:checked ~ .drawer_open span::after {
  top: 0;
  transform: rotate(-45deg);
}
  .drawer_hidden {
  display: none;
}



/* スクロールCSS */
.fade-in {
  opacity: 0;
  transition-duration: 500ms;
  transition-property: opacity, transform;
}

.fade-in-up {
  transform: translate(0, 50px);
}

.fade-in-down {
  transform: translate(0, -50px);
}

.fade-in-left {
  transform: translate(-50px, 0);
}

.fade-in-right {
  transform: translate(50px, 0);
}

.scroll-in2 {
  opacity: 1;
  transform: translate(0, 0);
}

/* スクロール促すCSS */
.wrapper{
}
.wrapper .col{
  width:50%;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.wrapper .col:last-child{
  background-color:#595757;
}
.scroll-down-box{
  display:block;
  position:relative;
  text-decoration:none;
}
.scroll-down-box svg{
  fill:#fff;
}
.scroll-down-box.alt svg{
  fill:#fff;
}
.scroll-down-box .scroll-text{
  width:80px;
  height:auto;
  -webkit-animation: rotation 10s infinite linear;
  animation: rotation 10s infinite linear;
}
.scroll-down-box.alt .scroll-text{
  -webkit-animation: none;
  animation: none;
}
.scroll-down-box.alt:hover .scroll-text{
  -webkit-animation: rotation 10s infinite linear;
  animation: rotation 10s infinite linear;
}
.scroll-down-box .scroll-icon{
  width:18px;
  height:auto;
  position:absolute;
  top:50%;
  left:50%;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  -webkit-transition:all 0.2s ease-in;
  transition:all 0.2s ease-in;
}
.scroll-down-box.alt .scroll-icon{
  width:35px;
}
.scroll-down-box:hover .scroll-icon{
  -webkit-animation: move 1s infinite linear;
  animation: move 1s infinite linear;
}
.scroll-down-box.alt:hover .scroll-icon{
  -webkit-animation: none;
  animation: none;
}

@keyframes rotation {
    from {-webkit-transform: rotate(0deg); transform: rotate(0deg);}
    to {-webkit-transform: rotate(359deg); transform: rotate(359deg);}
}
@-webkit-keyframes rotation {
    from {-webkit-transform: rotate(0deg); transform: rotate(0deg);}
    to {-webkit-transform: rotate(359deg); transform: rotate(359deg);}
}

@keyframes move {
    0% {-ms-transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%);}
    25% {-ms-transform: translate(-50%,-35%); -webkit-transform: translate(-50%,-35%); transform: translate(-50%,-35%);}
    50% {-ms-transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%);}
    75% {-ms-transform: translate(-50%,-65%); -webkit-transform: translate(-50%,-65%); transform: translate(-50%,-65%);}
    100% {-ms-transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%);}
}
@-webkit-keyframes move {
    0% {-ms-transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%);}
    25% {-ms-transform: translate(-50%,-40%); -webkit-transform: translate(-50%,-40%); transform: translate(-50%,-40%);}
    50% {-ms-transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%);}
    75% {-ms-transform: translate(-50%,-60%); -webkit-transform: translate(-50%,-60%); transform: translate(-50%,-60%);}
    100% {-ms-transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%);}
}






/* お知らせCSS */

.site-index .news {
    position: relative;
	display: inline-block;
    z-index: 2;
}

.newsbox {
	display: flex;
	vertical-align: middle;
    position: relative;
    justify-content: space-between;
	}

.leftside {
	width: 300px;
	background: #595757;
	color: #e5e5e5;
	display: -moz-flex;
	display: -o-flex;
	display: -ms-flex;
	-o-flex-flow: row wrap;
	flex-flow: row wrap;
	-o-justify-content: space-between;
	-ms-justify-content: space-between;
	-moz-justify-content: space-between;
	justify-content: space-between;
	align-items: center;
	height: 8rem;
	display: inline-block;
	vertical-align: middle;
	position: relative;
}

	
.leftside-inner {
display: inline-block;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
    margin: 0 auto;
}

.rightside {
display: inline-block;
	color: #e5e5e5;
	display: -moz-flex;
	display: -o-flex;
	display: -ms-flex;
	-o-flex-flow: row wrap;
	flex-flow: row wrap;
vertical-align: middle;
background: #eee;
    width: calc(70% - 230px - 90px);
}


.rightside-inner {
	display: inline-block;
	position: absolute;
	top: 50%;
	left: 35%;
	margin-right: -50%;
	transform: translate(-50%, -50%);
	justify-content: flex-start;
	position: relative;
}

.news-l {
	font-size: 20px;
	font-weight:600;
	display: inline-block;
	padding-right: 1rem;
 }

.news-l2 {
	font-size: 11px;
	display: inline-block;
	font-weight: 600;
 }


.time {
	font-size: 15px;
	width: 108px;
	border-right: rgba(0,0,0,.16) 1px solid;
	display: inline-block;
	padding-left: 1rem;
}

.news-article {
font-size: 14px;
	font-weight:500;
	margin: 0;
	display: block;
	padding: 0px 20px 0px;
	display: inline-block;
	}


@media screen and (max-width: 640px){
.leftside {
	width: 200px;
	height:7rem;
	}
	.news-l {
	padding-right: 0rem;
	}
	.time {
	border:none;
	display:block;
	}
	.news-article {
	padding: 0px;
	padding-left:1rem;
	}
	.rightside {
	width: calc(100% - 125px - -20px);
	}
	.rightside-inner {
	left:50%;
	}
}





.news .newsbox {
    display: -moz-flex;
    display: -o-flex;
    display: -ms-flex;
    display: flex;
    -o-flex-flow: row wrap;
    flex-flow: row wrap;
    -o-justify-content: space-between;
    -ms-justify-content: space-between;
    -moz-justify-content: space-between;
    justify-content: space-between;
}



@media screen and (min-width: 640px){
.site-index .news .leftside {
    width: 250px;
}
}
.site-index .news .leftside {
    width: 420px;
    background: #040406;
    color: #e5e5e5;
    display: -moz-flex;
    display: -o-flex;
    display: -ms-flex;
    display: flex;
    -o-flex-flow: row wrap;
    flex-flow: row wrap;
    -o-justify-content: space-between;
    -ms-justify-content: space-between;
    -moz-justify-content: space-between;
    justify-content: space-between;
    align-items: center;
    
}





@media screen and (max-width: 640px){
.site-index .news .leftside, .site-index .news .rightside {
    padding: 8px 15px;
}
}
.site-index .news .leftside, .site-index .news .rightside {
    padding: 24px 50px;
}

.site-index .news .leftside h3:before {
    content: attr(data-eng);
    font-size: 22px;
    display: inline-block;
    margin: 0 20px 0 0;
}
@media screen and (max-width: 640px)
*, :after, :before {
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}
@media screen and (max-width: 1119px){
*, :after, :before {
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}
}

@media screen and (max-width: 1119px){
.site-index .news .leftside a {
    display: none;
}

.site-index .news .leftside a {
    color: #e5e5e5;
    display: inline-block;
    font-size: 14px;
}
}


@media screen and (max-width: 640px){
.site-index .news .rightside {
    width: calc(100% - 100px);
}
}

@media screen and (max-width: 1119px){
.site-index .news .rightside {
    width: calc(100% - 250px - 80px);
}
}

.site-index .news .rightside {
    width: calc(100% - 420px - 80px);
    background: #f4f4f5;
}

@media screen and (max-width: 640px){
.site-index .news .leftside, .site-index .news .rightside {
    padding: 8px 15px;
}
}

.site-index .news .leftside, .site-index .news .rightside {
    padding: 24px 50px;
}
.swiper-container {
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    list-style: none;
    padding: 0;
    z-index: 1;
}

.news-all-i {
float:right;
}


#twitter-news {
background-color:#5A5757;
color:#fff;
padding: 1rem;
padding-bottom: 10rem;
}


.news-h2 {
margin:10px;
text-align:left;
font-weight: bold;
}

.c-s {
background-color:#5A5757;;
width:28rem;
height:50rem;
border-top: solid #de8db9;
    margin: 1rem;
    padding: 1rem 0rem;

}

.c-s2 {
    background-color: #5A5757;
    width: 28rem;
    height: 50rem;
    border-top: solid #de8db9;
    margin: 1rem;
    padding: 1rem 0rem;
}

.c-s-p{
text-align:center;
top: 50%;
position: absolute;
width: 100%;
left: 50%;
transform: translate(-50%,-50%);
color:#FFF;
}

/* TwitterをPCでは横並びにする */
.t-flex {
	display: flex; /* これで横並びになる */
}
.twitter-tweet {
	padding: 5px; /* 1つのツイートの周りに5pxの余白をつける */
	margin: 10px auto; /* ツイートを中央寄せにする */
}

/* 画面サイズ960px以下ではTwitterを縦並びに変える */
@media (max-width: 960px) {
.t-flex {
	display: block; /* 横並びを解除 */
}
.twitter-tweet {
	padding: 1rem 0rem; /* 縦並びでは余白なし */
}
.c-s2 {
height:25rem;
}
.c-s-p{
top:60%;
}
}

@media screen and (max-width: 640px){
.d-block {
display:block;
padding:3rem;
}
}

#services {
background-color:#5A5757;
color:#fff;
padding: 1rem;
}
#about {
background-color: #5A5757;
color: #fff;
    margin-top: -8rem;
}
.list-a {
    box-shadow: 0 0 24px rgb(0 0 0 / 9%);
    }
    
    
.t-right {
text-align:right;
}    

.footer-link {
font-size:12px;}

@media screen and (max-width:640px) {
	.pc {
		display: none;
	}
}
@media screen and (min-width:641px) {
	.sp {
		display: none;
	}
}

.c-fff{
color:#fff;
}
.c-222{
color:#222;
}

.wrap {
  margin: 100px auto 0;
}

.block-bg {
  transition: all .7s ease;
}

.block {
  height: 1000px;
  text-align: center;
}

@media screen and (max-width:640px){
  .wrap {
    width: 100%;
  }
}

.service-title{
font-size: 2rem;
    font-weight: 700;
    margin-top: 4rem;
    margin-bottom: -12rem;
}
@media screen and (min-width:640px){
.service-title {
    font-size: 4rem;
    font-weight: 700;
    margin-top: 8rem;
    margin-bottom: -16rem;
}
}


#member {
background-color:#5A5757;
color:#fff;
padding: 13rem 1rem 0rem;xs
}


/*========= スタッフタブ ===============*/



.tab_menu {
	display: block;
    color: White;
    white-space: nowrap;
    text-align: center;
    margin: 4rem -1px 5px -20px;
    padding: 10px 0.5em;
    order: -1;
    position: relative;
    z-index: 1;
    cursor: pointer;
    float: left;
}
.tab_menu li{
	flex: 1;
	display: flex;
	justify-content: left;
	align-items: center;
	padding:10px 15px 2px 0px;
	margin: 0 1px 0 0;
	list-style: none;
	cursor: pointer;
	color: #fff;
	font-size: 105%;
}
.tab_menu li:after {
    position: absolute;
    bottom: -4px;
    left: 0;
    content: '';
    width: 100%;
    height: 1px;
    background: #DE8DB9;
    transform: scale(0, 1);
    transform-origin: left top;
    transition: transform .3s;
}


.tab_menu li:last-child {
	margin-right: 0;
}




.tab_menu li.selected {
	background: none;
    border-bottom: solid #de8db9;
    transition: cubic-bezier(0.4, 0, 0.2, 1) .2s;
    
    font-weight: bold;
}
.tab_menu li:hover {
	background: none;
}



.tab_menu li img {
	display: inline-block;
	padding: 0 5px 2px 0;
}
.select_menu_container {
	text-align: center;
}

.select_menu {
padding: 13px 35px;
    margin-top:2rem ;
    cursor: pointer;
    font-size: 1.5rem;
    border-radius: 50rem;
    outline: none;
background: #fff;
    color: #595757;
    font-weight: bold;
    text-align: center;
    -moz-appearance: none;
    -webkit-appearance: button;
}

.tab_panel {
	overflow: hidden;
	height: 0;
	opacity: 0;
}
.tab_panel.is-show {
	overflow: visible;
	height: auto;
	opacity: 1;
	transition: opacity .4s ease-in-out;
    justify-content: center;
    width: 100%;
    left: 0;
    text-align: left;
}

.tab_panel_container {
color:#5A5757;
    height: 100%;
    padding: 5rem 1rem;
    display: block;
	transition: transform .3s 80ms, opacity .3s 80ms;
	width: 100%;
}


option:checked {
  background:#de8db9;
  
}



@media screen and (min-width: 641px) {
	.select_menu_container {
		display: none;
	}
}
@media screen and (max-width: 640px) {
	.tab_menu {
		display: none;
	}
}



.tab-wrap {
	display: block;
	flex-wrap: wrap;
	overflow: hidden;
	padding: 0 0 20px;
}

.content-wrap{
	display: block;
	flex-wrap: wrap;
	overflow: hidden;
	padding: 0 0 20px;
}

.staff-list {
display: inline-flex;
    position: relative;
    margin: 0 1.5% 1.5% 0;
    width: 22%;
}


.staff-box {
    position: relative;
    /*border: 1px solid #de8db9;*/
    padding: 2rem;
    width: 20rem;
    width: 100%;
    color: #595757;
    background: #FFF;
    height: 19rem;
}

.staff-name {
font-size:1.7rem;
font-weight: bold;
margin-top: 1rem;
}
.staff-post {
font-size:12px;
font-weight: bold;
    color: #de8db9;
}



@media screen and (max-width: 640px) {
	.tab_panel_container {
	padding: 3rem;
	}
	.staff-name {
	    font-size: 1.5rem;
	    font-weight: bold;
	    margin-top: -1rem;
	}
	.staff-list {
	width: 45%;
	margin: 2%;
	}
	.staff-post {
	font-size: 10px;
	}
	.staff-box {
	padding: 3rem 2rem;
	height: 15rem;
	}
}






.tab:checked+option {
  color: #4169e1; 
}



.tab-switch:checked ~ .tab_panel_container {
	transform: translateX(30%);
}



.tab-switch:checked + .tab-label + .tab-content {
	height: auto;
	opacity: 1;
	order: 1;
	pointer-events:auto;
	transform: translateX(0);
}

.tab-wrap::after {
	content: '';
	height: 20px;
	order: -1;
	width: 100%;
}







/* ============================== */




/*========= LoadingのためのCSS ===============*/

/* Loading背景画面設定　*/
#splash {
    /*fixedで全面に固定*/
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 9999;
  text-align:center;
  color:rgb(0 0 0 / 0%);
}

/* Loading画像中央配置　*/
#splash_text {
  position: absolute;
  top: 50%;
  left: 50%;
    z-index: 9999;
  transform: translate(-50%, -50%);
  color: rgb(0 0 0 / 100%);
  width: 100%;
}

/*IE11対策用バーの線の高さ※対応しなければ削除してください*/
#splash_text svg{
    height: 2px;
}

/*割れる画面のアニメーション*/
.loader_cover {
    width: 100%;
    height: 50%;
    background-color: #5A5757;
    transition: all .3s cubic-bezier(.04, .435, .315, .9);
    transform: scaleY(1);
}
/*上の画面*/
.loader_cover-up {
    transform-origin: center top;
}

/*下の画面*/
.loader_cover-down {
    position: absolute;
    bottom: 0;
    transform-origin: center bottom;
}
/*クラス名がついたらY軸方向に0*/
.coveranime {
    transform: scaleY(0);
}


@media (min-width: 1200px){
.container {
    width: 1100px;
}
}




/*==================================================
背景色が伸びて出現===================================*/
p.effect {
    margin: 0;
    font-size: 2.4rem;
    line-height: 1;
    font-weight: 600;
    letter-spacing: 0.04rem;
    color:#222;
}
p.effect span {
    display: inline-block;
    position: relative;
}
p.effect span,
p.effect span::after {
  animation-delay: var(--animation-delay, 2s); /* アニメーションの開始タイミング */
  animation-iteration-count: var(--iterations, 1); /* 再生される回数 */
  animation-duration: var(--duration, 800ms); /* 完了するまでの所要時間 */
  animation-fill-mode: both; /* 実行の前後 */
  animation-timing-function: cubic-bezier(0, 0, 0.2, 1); /* タイミングの指定 */
}

p.effect.scroll-in span {
  --animation-delay: var(--delay, 0);
  --animation-duration: var(--duration, 800ms);
  --animation-iterations: var(--iterations, 1);
  position: relative;
  animation-name: clip-text;
  white-space: nowrap;
}
p.effect.scroll-in span::after {
  content: "";
  position: absolute;
  /*z-index: 10;*/
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #FFF;
  transform: scaleX(0);
  transform-origin: 0 50%;
  pointer-events: none;
  animation-name: text-revealer;
}

@keyframes clip-text {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}
@keyframes text-revealer {
  0%, 50% {
    transform-origin: 0 50%;
  }
  60%, 100% {
    transform-origin: 100% 50%;
  }
  60% {
    transform: scaleX(1);
  }
  100% {
    transform: scaleX(0);
  }
}




/*マーカーアニメーション*/
.marker-animation.active{
    background-position: -100% ;
}
 
.marker-animation {
    background-image: -webkit-linear-gradient(left, transparent 50%, rgb(255,255,255) 0%);
    background-image: -moz-linear-gradient(left, transparent 50%, rgb(255,255,255) 0%);
    background-image: -ms-linear-gradient(left, transparent 50%, rgb(255,255,255) 0%);
    background-image: -o-linear-gradient(left, transparent 50%, rgb(255,255,255) 0%);
    background-image: linear-gradient(left, transparent 50%, rgb(255,255,255) 0%);
    background-repeat: repeat-x;
    background-size: 200% ;
    background-position: 3rem;
    transition: all 1s ease;
    font-weight: bold;
}


.a_line {
  position: relative;
  display: inline-block;
  text-decoration: none;
}
.a_line::after {
  position: absolute;
  bottom: -4px;
  left: 0;
  content: '';
  width: 100%;
  height: 1px;
  background: #DE8DB9;
  transform: scale(0, 1);
  transform-origin: left top;
  transition: transform .3s;
}
.a_line:hover::after {
  transform: scale(1, 1);
}

.c-222{
color: #de8db9;
}

.p-w-400{
font-weight:400;
}
.p-w-200{
font-weight:200;
}

.h-100 {
  min-height: 30vh;
}

.map iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.map{
filter:grayscale(100%);-webkit-filter:grayscale(100%);
position: relative;
width: 100%;
height: 0;
padding-top: 56.25%; /* 比率を16:9に固定 */
margin-top: 10rem;
}


@media (max-width: 450px){
.map{
margin-top: 5rem;
}
}



.bg .bg-wrap {
  position: relative;
  display: inline-block;
  margin-top: 5px;
}
.bg.is-animated .bg-wrap::before {
  animation: bg 2.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  background: linear-gradient(to right, #362ae0 0%,#3b79cc 50%,#42d3ed 100%);
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-origin: left center;
}
.bg .bg-wrap .inn {
  color: #fff;
  display: inline-block;
  font-size: 36px;
  font-weight: bold;
  padding: 5px 15px;
  position: relative;
  z-index: 1;
}

@keyframes bg {
  0% {
    opacity: 0;
    transform: scaleX(0) translateX(-5%);
  }
  30% {
    transform: scaleX(1) translateX(0);
  }
  100% {
    transform: scaleX(1) translateX(0);
  }
  30%, 100% {
    opacity: 1;
  }
}
 
@media (max-width: 600px){
.bg .bg-wrap .inn {
line-height:4rem;
}





/* blur */
.blurAnime.visible {
animation: blurAnime 0.7s ease 0s 1 normal;
}

@keyframes blurAnime {
  0% {
    filter: blur(10px);
  }
  100% {
    filter: blur(0);
  }
}