/* ==========================================================================
   Global styles
   ========================================================================== */
body,
button,
input,
select,
textarea {
 color: #72727e;
 font-family:'Marcellus SC',游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN",HGS明朝E,メイリオ,Meiryo,serif ,sans-serif;}

h1 {
  font-size: 55px;
  line-height: 55px;
  letter-spacing: -1px;
  color: #ffffff;
  font-weight: 700;
}

h2 {
  font-size: 4rem;
  line-height: 10rem;
  letter-spacing: 1px;
  color: #ffffff;
  font-weight: 700;
}

h3 {
  font-size: 2.2rem;
  line-height: 30px;
  letter-spacing: 0px;
  color: #231f20;
  font-weight: 700;
  vertical-align: middle;
}

.fc{
  font-family: 'ZCOOL XiaoWei', serif;
}
.smallTtl{
  font-size: 1.6rem;
  line-height: 2.3rem;
  color: #231f20;
}

.bold{
 font-weight: bold;
}



p {
  font-size: 1.1rem;
  line-height: 22px;
  color: #231f20;
  margin: 0px;

}


/*------------------Utilities---------------------*/
a {
  color: inherit;
  font-weight: inherit;
  font-size: inherit;
  text-decoration: none;
}

a:hover, a:focus {
  text-decoration: none;
  color: #231f20;
  -webkit-transition: all 0.35s ease-in-out;
  -moz-transition: all 0.35s ease-in-out;
  -o-transition: all 0.35s ease-in-out;
  transition: all 0.35s ease-in-out;
}

ul li{
  font-size: 1.1rem;
  line-height: 22px;
}
.fa-lg {
  font-size: 1.33333em;
  line-height: 0.75em;
  vertical-align: -10%;
}

::selection {
  background: #231f20; /* Safari */
  color: #FFFFFF;
}
::-moz-selection {
  background: #231f20; /* Firefox */
  color: #FFFFFF;
}


/*------------------Buttons---------------------*/
.btn:focus {
  outline: 0px auto -webkit-focus-ring-color;
  outline: none;
}

.btn {
  text-transform: uppercase;
  border-radius: 4px;
  border: none;
}

.btn-lg {
  font-size: 13px;
  line-height: 1.33;
  padding: 12px 41px;
  font-weight: 400;
  letter-spacing: 1px;
  border-radius:0px;
}

.btn-sm {
  font-size: 11px;
  line-height: 1.33;
  padding: 10px 18px;
  font-weight: 400;
}

.btn-wide {
  width: 100%;
  font-size: 13px;
  line-height: 1.33;
  padding: 18px 28px;
  font-weight: 400;
  letter-spacing: 1px;
}

.btn-primary {
  background-color:#36374c;
  color: #ffffff;
  border-radius: 25px;
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active {
  background-color: #8be2e5;
  color: #ffffff;
  -webkit-transition: all 0.35s ease-in-out;
  -moz-transition: all 0.35s ease-in-out;
  -o-transition: all 0.35s ease-in-out;
  transition: all 0.35s ease-in-out;
}

.btn-secondary {
  background-color: #ffffff;
  color: #231f20;
  border-radius: 25px;
}

.btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active, .btn-secondary.active {
  background-color: #ededed;
  color: #231f20;
  -webkit-transition: all 0.35s ease-in-out;
  -moz-transition: all 0.35s ease-in-out;
  -o-transition: all 0.35s ease-in-out;
  transition: all 0.35s ease-in-out;
  border-radius: 25px;
}

.btn-gr {
  background-color: #dfdfdf;
  color: #555;
  border-radius: 25px;
}
.btn-gr:hover, .btn-gr:focus, .btn-gr:active,.btn-gr.active {
  background-color: #ededed;
  color: #231f20;
  -webkit-transition: all 0.35s ease-in-out;
  -moz-transition: all 0.35s ease-in-out;
  -o-transition: all 0.35s ease-in-out;
  transition: all 0.35s ease-in-out;
  border-radius: 25px;
}


/*-----------------Margins------------------*/
.margin-0 {
    margin-bottom: 0 !important;
}
.margin-10 {
    margin-bottom: 10px !important;
}
.margin-15 {
    margin-bottom: 15px !important;
}
.margin-20 {
    margin-bottom: 20px !important;
}
.margin-30 {
    margin-bottom: 30px !important;
}
.margin-40 {
    margin-bottom: 40px !important;
}
.margin-50 {
    margin-bottom: 50px !important;
}
.margin-60 {
    margin-bottom: 60px !important;
}
.margin-70 {
    margin-bottom: 70px !important;
}
.margin-80 {
    margin-bottom: 80px !important;
}
.margin-90 {
    margin-bottom: 90px !important;
}
.margin-100 {
    margin-bottom: 100px !important;
}


/*-----------------Colors------------------*/

.black {
  color: #231f20;
}

.blue {
  color: #70cbce;
}

.white {
  color: #ffffff;
}

.black-bg {
  background: #231f20;
}

.blue-bg {
  background: #70cbce;
}

.white-bg {
  background: #ffffff;
}

.purple-bg {
  background: #6d3f96;
}



.gray-bg{
  background-color: #f5f5f5;
}


.light-gray-bg{
  background-color: #f5f5f5;
}






/* ==========================================================================
   Nav Styles
   ========================================================================== */

.navbar {
    border: 0px solid rgba(0, 0, 0, 0);
    background-color:#9aaaba;
    margin: auto;
    min-height: 55px;
    padding: 8px;
    position: fixed;
    transition: top 0.4s ease 0s;
}


.navbar.open {
    top: 0;
}

.navbar-inverse .navbar-nav > li > a, .navbar-nav a {
    color: #ffffff;
    font-size: 14px;
    letter-spacing: 1px;
}

.navbar-inverse .navbar-nav > li > a:hover {
    color: #ffffff;
    opacity: 0.6;
}

.nav > li > a {
    position: relative;
    display: block;
    padding: 10px 10px;
}


.nav ul{
     display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
    height: 200px;
}

.nav ul li{
    list-style: none;
    font-size: 1.6em;
    width: 20%;
    border-right: 1px solid #2c2c2c;
    text-align: center;
}


.nav ul li:first-child{

  border-left: 1px solid #2c2c2c;

}



.navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form {
  border-color: rgb(255, 255, 255);
}

.navbar-inverse .navbar-toggle {
    border-color: transparent;
}
.navbar-inverse .navbar-toggle:focus, .navbar-inverse .navbar-toggle:hover {
    background-color: transparent;
}
.logo img{
  width: 120px;
}





  .pcnone{display:none;}
  .spnone{display: block;}

.bg-blue{
  background-color: blue;
}


.hd-btn{
  background-color: #fff;
  border-radius: 30px;
  padding: 0px 14px !important;

}


 .navbar-nav .hd-btn a{
    color: #3b3b3b!important;
    font-family: fantasy;
    font-size: 12px;

}



.ins{margin-left: -16px;}
.ins a{ width: 35px;}
.ins a img{width: 100%;}


/* ==========================================================================
   Main styles
   ========================================================================== */
/*header {
  background: url(../img/header-bg.jpg) no-repeat center;
  width: 100%;
  padding: 20px 10px 60px 10px;
  height: 100vh;
  overflow: hidden;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
}
*/
@media (max-width: 780px) {
header {
 overflow-x: hidden;
}
}


.header-info {
position: absolute;
    top: 33%;
    width: 100%;
    left: 0;
    right: 0;
    /* margin-left: 0px; */
    /* margin-bottom: 12%; */
}
.header-info p{
text-shadow: 4px 2px 5px rgba(110, 123, 144, 0.4);}

.header-info h4{
  line-height: 3rem;
}

.signin {
  padding-top: 9px;
}


.mouse-icon {
    border: 2px solid #fff;
    border-radius: 16px;
    display: block;
    height: 50px;
    margin: -100px auto 50px;
    position: relative;
    width: 30px;
    z-index: 10;
}
.mouse-icon .scroll {
    animation-delay: 0s;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-name: scrolling;
    animation-play-state: running;
    animation-timing-function: linear;
}
.mouse-icon .scroll {
    background: #fff none repeat scroll 0 0;
    border-radius: 10px;
    height: 10px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    top: 4px;
    width: 4px;
}
@keyframes scrolling {
0% {
    opacity: 0;
    top: 5px;
}
30% {
    opacity: 1;
    top: 10px;
}
100% {
    opacity: 0;
    top: 25px;
}
}

.pad-xl {
  padding: 18% 0px;
}

.pad-lg {
  padding: 8% 0;
}

.pad-sm {
  padding: 5% 0px;
}

.pad-xs {
  padding:2% 0px;
}



#be-the-first {
  background-color: #bfbfbf;
  min-height: 300px;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

hr.line {
  width: 100%;
  border: 2px solid;
}

.blue {
  border-color: #70cbce;
  color: #70cbce
}

.yellow {
  border-color: #fdc05d;
  color: #fdc05d;
}

footer {
  padding: 16px 0px 8px 0px;
  background: #9aaaba;
}
footer img{
  width: 10%;
  margin: 1% 0;
}





/*--------------design-------------------*/
  .pcnone{display: block;}
  .spnone{display:none;}


h2 {
display: flex;
align-items: center;
}
h2:before,
h2:after {
border-top: 1px solid;
content: "";
flex-grow: 1;
}
h2:before {
margin-right: 2rem;
}
h2:after {
margin-left: 2rem;
}

#first h3{
  width: 30%;
}

#first h4{
  font-size: 1.6rem;}

#first img{
width: 100%;
}





.bgye{
  background-color: #eec559;
  width: 50px;
  height: 80px;
  position: absolute;
  top: 7%;
  left: 51%;
  z-index: -1;
}




.bgdr{
background-color: #607473;
    width: 38%;
    height: 80px;
    position: absolute;
    top: 0;
    left: 44%;
    z-index: -2;
}

.bgba{
    background-color: #ded4cb;
    width: 50%;
    height: 80px;
    position: absolute;
    top: 12%;
   right: 0;
    z-index: -3;
}







.pad-xxl{
padding: 30% 0px;}


#menu_top{
 background: url(../img/menu_top.jpg) no-repeat center center;
  width: 100%;
  height: auto;
  overflow: hidden;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
}

#menu_top h3,#menu_top p{
font-family: 'Great Vibes', cursive;
color: #4a5d7a;
font-size: 4rem;
line-height: 5rem;
font-weight: normal;
}
#menu_top p{
font-size: 3rem;
text-align: right;
margin-right: 5%;
}


#menu img{width: 100%;}

.thumb{
   position: relative;
}


.thumb h3{
z-index: 1;
    background-color: #9aaaba;
    /* margin-top: -20px; */
    position: absolute;
    color: #fff;
    top: 30%;
    width: 100%;
    padding: 1%;
}


.menu_bg{
  background-color: #fbfbfb;
  /*box-shadow: 0px 0px 18px 0px rgba(0,0,0,0.1);*/
  padding: 0;
  margin: 3%;
}


.menu_bg p{
    height: 89px;
    padding: 5% 3%;
   font-family: 'Josefin Sans', sans-serif;}




.basemake{
    padding: 0;
}

.basemake img{
width: 100%;
}


.whats_inner p{
 font-family: 'Josefin Sans', sans-serif;
}



.whats_inner h4{
    margin: 7% 0 4% 5%;
    font-family: 'Josefin Sans', sans-serif;
    font-size: 2.4rem;
    font-weight: bold;
}


.whats_inner .col{
 display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    padding: 0 4%;
    border-bottom: 1px solid #fff;
}

.whats_inner .col:last-child{
     border-bottom:none;
}
.whats_inner .col .ttl{
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    padding: 20px;
    width: 20%;
}

.whats_inner .col p{
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    padding: 20px;
    width: 80%;
}

.menu_inner{
 align-items: center;
}

.row-height {
    display: flex;
    flex-wrap: wrap;
}




#staff img,#access img{
  width: 100%;
  padding: 3%;
}



#access p{
    font-family: 'Josefin Sans', sans-serif;
    border-left: solid 5px #bfbfbf;
    padding: 10px 0 10px 20px;
    margin: 0 0 20px 0;
    line-height: normal;
    background-color: #fcfbfa;
    font-weight: 400;
}



.access_inner{
padding: 5% 0% 0 7%;
}





#wedding{
 background: url(../img/wedding_bg.jpg) no-repeat center center;
  width: 100%;
  height: auto;
  overflow: hidden;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
}




.wedding_inner{
  margin-top: 4%;
  padding-top: 10%;
  background: url(../img/wedding.png) no-repeat;
  width: 100%;
  height: auto;
  overflow: hidden;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
}



.wedding_bgwhite {
    padding: 3%;
    background-color: #ffffff61;
    border-radius: 10px;
    margin: 3% auto;
    width: 70%;
}


#media{
 background: url(../img/media_bg.jpg) no-repeat center center;
  width: 100%;
  height: auto;
  overflow: hidden;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
}


.media_inner{
  margin: 4% 0;
  background: url(../img/media.jpg) no-repeat center center;
  width: 100%;
  height: auto;
  overflow: hidden;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
}

.media_inner .container{
    padding: 4% 0;}



.basemakeupimg{
background: url(../img/make01.jpg) no-repeat center center;
  height: auto;
  overflow: hidden;
 background-size: cover;
   -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;

}

.pointimg{
background: url(../img/make02.jpg) no-repeat center center;
  height: auto;
  overflow: hidden;
 background-size: cover;
   -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;

}

.hairimg{
background: url(../img/make03.jpg) no-repeat center center;
  height: auto;
  overflow: hidden;
 background-size: cover;
   -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;

}


.beautyimg{
background: url(../img/make04.jpg) no-repeat center center;
  height: auto;
  overflow: hidden;
 background-size: cover;
   -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;

}


 .credit{margin-right: 5%;}

.swiper-container{
  overflow: initial;
}



.swiper-wrapper .swiper-slide {
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 80vh;  //全画面表示
}


.topslide {
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 100vh!important;  //全画面表示
}

.swiper-button-prev {
    background-image: url(../img/arrow_left.svg) !important;
}

.swiper-button-next {
    background-image: url(../img/arrow_right.svg) !important;
}

.swiper-pagination-bullet-active {
    opacity: 1;
    background: #fff!important;}







.btmbg{
  display: none;
}






.mgl40{
      margin-left: 40%;
}




@media (max-width: 992px) {
.basemakeupimg{
background: url(../img/make01.jpg) no-repeat center center;
  height: 500px;
  overflow: hidden;
 background-size: cover;

}


.pointimg{
background: url(../img/make02.jpg) no-repeat center center;
  height:  500px;
  overflow: hidden;
 background-size: cover;

}

.hairimg{
background: url(../img/make03.jpg) no-repeat center center;
  height:  500px;
 background-size: cover;

}



.beautyimg{
background: url(../img/make04.jpg) no-repeat center center;
  height: 700px;
  overflow: hidden;
 background-size: cover;

}


.first{order: 1;}
.second{order: 2;}

.media_inner .container{
      margin-left: 140px;
}

}

#wedding .wedtxt{
      font-family:  游明朝, "Yu Mincho", YuMincho, "Hiragino Mincho ProN", HGS明朝E, メイリオ, Meiryo, serif, sans-serif!important;
}


/*

@media (min-width: 780px) {
header .sp{display: none;}
.navbar-nav {
    margin: 7.5px 4px;
    }
}

*/

/* ==========================================================================
   Mobile styles
   ========================================================================== */
/* Landscape phones and down */



/*

@media (max-width: 995px) and (min-width: 700px){
.nav .nav-madia{display: none;}
}


*/


@media (max-width: 995px) and (min-width: 768px){
.navbar.open {
    top: -290px;
}

.navbar-header{
text-align: center;
    width: 100%;
    margin: 0 auto;
}

}

@media (max-width: 780px)  {




.media_inner .container{
      margin-left:auto;
}


.logo img {
   margin: 0 2%;
}



  .pcnone{display: block;}
  .spnone{display: none;}


  .container {
 padding-right: 0px;
 padding-left: 0px; }

h1 {
    margin-top:30%;
    font-size: 3.6rem;
    line-height: 45px;
    letter-spacing: -1px;
    color: #ffffff;
    font-weight: 700;}


h2 {
    line-height: 3rem;
    font-size: 4rem;
    margin: 7% 13% 13% 7%;
    letter-spacing: 1px;
    color: #ffffff;
    font-weight: 700;
}



.header-info h4 {
    font-size: 1rem;
    line-height: 2rem;
    background-color: #ffffffe3;
    color: #828282;
    padding: 4% 3%;}


.header-info {
   position: relative;
    bottom: 0;
    width: 100%;
    left: 0;
    right: 0;
    margin-left: 0px;
    margin-bottom: 12%;
}



/*

.container{
width: 72%;}
*/
header .pc{display: none;}
header .sp {
  text-align: center;
   margin-top: 2%;
}
header .sp img{
  width: 26%;}

.navbar-toggle {
    margin-top: 2px;}

.navbar-nav {
    text-align: center!important;}
.hd-btn {
    background-color: #fff;
    width: 70%;
    border-radius: 30px;
    padding: 0px 14px !important;
    margin: 13px auto;
}


.btn-lg {
  font-size: 12.5px;
  line-height: 1.33;
  padding: 2% 7%;
  letter-spacing: 0px;
}
#collection p{
    line-height: 1.3rem;
    color: #231f20;
    margin-top: 5%;
}

#collection .col-xs-6{
  padding-right: 10px;
  padding-left: 10px;
}



#first{
 padding: 5% 7%;

}
#staff img, #access img {
    width: 100%;
    padding: 0 11%;
}


.main .btn-lg {
  font-size: 1.2rem;
  line-height: 1.33;
  padding: 6% 16%;
    letter-spacing: 0px;
}


#menu_top h3, #menu_top p {
   font-family: 'Great Vibes', cursive;
    color: #4a5d7a;
    font-size: 2.6rem;
    line-height: 5rem;
    font-weight: normal;
}

 .col-xs-6{
    padding-right: 0px;
    padding-left: 0px;

}


#whats h2{
    font-size: 3.2rem;
  }
.whats_inner .col {
  display: block;
  padding: 0 ;
}

.whats_inner .col .ttl{
  width: 100%;
   padding:0 20px;
}

.whats_inner .col p{
  width: 100%;
  padding: 0px 20px 20px 20px;
}


/*



.media_inner{
  margin: 4% 0;
  background: url(../img/media-sp.jpg) no-repeat center center;
  width: 100%;
  height: 70vh;
  overflow: hidden;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
}




.wedding_inner {
    margin-top: 4%;
    padding-top: 12%;
    background: url(../img/wedding-sp.jpg) no-repeat center;
    width: 100%;
    background-position-y: 140%;
    height: 100vh;
    overflow: hidden;
    background-size: contain;
    -webkit-background-size: cover;
    -moz-background-size: contain;
    -o-background-size: contain;
}
*/

.media_inner{
  background:#fff;
  height: auto;
}



.wedding_inner {
   height:auto;
    background: #fcd9b9;

}




.wedding_inner p{
  padding: 0 20px;
     }



.wedding_bgwhite {
    width: 90%;
}







.bgye{
    background-color: #eec559;
    width: 45px;
    height: 80px;
    position: absolute;
    top: 7%;
    left: 51%;
    z-index: -1;
}




.bgdr{
    background-color: #607473;
    width: 38%;
    height: 66px;
    position: absolute;
    top: 4%;
    left: 44%;
    z-index: -2;
}

.bgba{
    background-color: #ded4cb;
    width: 50%;
    height: 79px;
    position: absolute;
    top: 10%;
    right: -26px;
    z-index: -3;
}

.btmbg{
  display: block;
}


.btmbg img{
  width: 100%
}


.mgl40{
      margin-left: 0%;
}



.ins{
  display: inline-block!important;
  margin-left: -16px;
}
.nav>li {

display: inline-block!important;

}


}





/* minimam */
@media (max-width: 480px) {


.mgl40{
      margin-left: 0%;
}


  .pcnone{display: none;}
  .spnone{display: block;}

.mouse-icon {
  display: none;}

.h4, h4 {
    font-size: 15px;
    line-height: 3rem;
    text-align: left;
}

header .sp img {
    width: 46%;
}

 .header-info h1{
  margin-bottom: 30%;
 }
.logo img {
    width: 25%;
}

.logo img {
   margin: 2px 4%;
}

.main .btn-lg {
  padding: 10% 25%;
}

#menu .container {
    width: 100%;
}
.thumb h3{
    z-index: 1;
    background-color: #9aaaba;
    margin-top: 0;
    position: absolute;
    color: #fff;
    top: 0;
    width: 100%;
    padding: 1%;
    font-size: 1.6rem;
   line-height: 3.2rem;
    letter-spacing: 0px;
    font-weight: 700;
    vertical-align: middle;
}

#menu img {
    width: 100%;
    margin-top: 19%;
}

.menu_bg .smallttl {
  font-size: 1.2rem;
  line-height: 1.8rem;
    }

.menu_bg .smallttlshort
{
  font-size: 1.2rem;
  line-height: 3.2rem;

}
  .menu_bg p {
    text-align: left;
    line-height: 1.8rem;
    padding: 12% 9%;}


.sub{padding: 2% 10%;}


.basemakeupimg {
    background: url(../img/make01.jpg) no-repeat center center;
    height: 40vh;
    overflow: hidden;
    background-size: cover;
}

.pointimg {
    background: url(../img/make02.jpg) no-repeat center center;
    height: 60vh;
    overflow: hidden;
    background-size: cover;
}


.hairimg {
    background: url(../img/make03.jpg) no-repeat center center;
    height: 50vh;
    overflow: hidden;
    background-size: cover;
}

.beautyimg {
    background: url(../img/make04.jpg) no-repeat center center;
    height: 60vh;
    overflow: hidden;
    background-size: cover;
}


.whats_inner .col .ttl {
    padding: 18px 20px 0px 20px;
}



.wedding_inner p{
  padding: 0 ;
     }




#media h3{
  font-size: 1.4rem;
}


}


/* 0617 Add */
.navbar-inverse .navbar-nav > li > a, .navbar-nav a　{
  font-size: 12px;
}

.hd-btn {
  padding-left: 8px !important;
  padding-right: 8px !important;
}

.hd-btn:before {
  position: relative;
  display: block;
  width: 1px;
  height: 1px;
  content:"";
}

.hd-btn + .hd-btn {
  margin-left: 8px;
}

@media (min-width: 768px) and (max-width: 992px){
.hd-btn {
  padding-left: 3px !important;
  padding-right: 3px !important;
}
.navbar-nav .hd-btn a {
  padding-left: 0 !important;
  padding-right: 0 !important;
  font-size: 11px !important;
}
.hd-btn + .hd-btn {
  margin-left: 4px;
}
}

.cut__title {
  text-align: left;
  padding-top: 2%;
}

.cut__inner {
  float: none;
  display: flex;
  padding: 3% 3% 0;
  color: #231f20;
  width: auto;
  margin-bottom: 0;

}

.cut__illust {
  background: url(../img/cut_illust.png) 110% 110% no-repeat;
  background-size: 50% auto;
  padding-bottom: 32%;
}

p.cut__caption{
  height: auto;
  text-align: left;
  padding: 0;
  margin: 0;
}

@media (max-width: 780px) {
  .cut__inner {
    display: block;
    padding: 0%;
    margin: 0;
    background: none;
  }
  #menu {
    padding: 0 0 60%;
    margin: 0;
  }
  .cut__caption {
    margin: 0;
    font-size: 10px;
    text-align: left;
  }
  .cut__caption .col-md-12{
    margin: 0;
    padding: 0;
    height: auto;
    text-align: left;
  }
  .cut__illust {
    background: url(../img/cut_illust.png) 50% 110% no-repeat;
    background-size: 98% auto;
    padding-bottom: 62%;
  }
}

.cut__inner dt {
  font-size: 16px;
}

.video-box {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100vh;
}
.video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

@media (max-width: 780px) {
  .video-box {
    height: auto;
  }
  .video {
    width: 100%;
    position: relative;
    top: 0;
    left: 0;
    -webkit-transform: translate(0, 0);
  -moz-transform: translate(0, 0);
  transform: translate(0, 0);
  min-height: auto;
  }
}