/*  Common */
.sp-br{display:none;}

/* Loading */

/*** Loading画面設定　***/
#splash {
	position: fixed;    /*全面に固定*/
	width: 100%;
	height: 100%;
	z-index:10000;
	text-align:center;
	color:#fff;
}
#splash_text {
	position: absolute;
	top: 50%;
	left: 50%;
    z-index: 999;
	transform: translate(-50%, -50%);
	color: #fff;
	width: 100%;
}

/*割れる画面*/
.loader_cover {
    width: 100%;
    height: 50%;
    background-color: #333;
    transition: all .2s 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);
}
#lo_container{
    width:100%;
    height: 100vh;
    background: #ccc;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

/***スクロールダウン 位置***/
.scrolldown1{
  position:absolute;
  left:50%;
  bottom:80px;
  height:80px;
}

/*Scrollテキスト*/
.scrolldown1 span{
  position: absolute;
  left:-15px;
  top:0;
  color: #eee;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
}

/* 線 */
.scrolldown1::after{
    content: "";
    position: absolute;
    top: 0;
    width: 1px;
    height:80px;
    background: #eee;
    animation: pathmove 1.4s ease-in-out infinite;
    opacity: 0;
}

/* 線の動き*/
@keyframes pathmove{
  0%{
    height:10px;
    top:0;
    opacity: 0;
  }
  30%{
    height:50px;
    opacity: 1;
  }
  100%{
    height:0;
    top:80px;
    opacity: 0;
  }
}
#sclo_bar{
  width:100%;
  height: auto;
  position: relative;
} 

#sclo_bar:before{
  content: '';
  position:fixed;
  top:0;
  left:0;
  z-index:-1;
  width:100%;
  height: 100vh;
}

#sclo_bar_in{
  position: relative;
  z-index:1;
  background:#eee;
  padding:600px 0;
  text-align: center;
}

/* 遅れて表示 */
.late.fade-in {
    -webkit-animation-fill-mode: both;
    -ms-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-duration: 1.3s;/*表示まで*/
    -ms-animation-duration: 1.3s;
    animation-duration: 1.3s;
    -webkit-animation-name: fid;
    animation-name: fid;
    visibility: visible !important;
  }
  @-webkit-keyframes fid {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-60px);
        -ms-transform: translateY(-60px);
        transform: translateY(-60px);
      }
      30% {
          opacity: 0.3;
        }
  
     50% {
          opacity: 0.6;
        }
    
      80% {
          opacity: 0.8;
        }
  
      100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
      }
    }
  @keyframes fid {
    0% {
      opacity: 0;
      -webkit-transform: translateY(-60px);
      -ms-transform: translateY(-60px);
      transform: translateY(-60px);
    }
    30% {
        opacity: 0.3;
      }

   50% {
        opacity: 0.6;
      }
  
    80% {
        opacity: 0.8;
      }

    100% {
      opacity: 1;
      -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
      transform: translateY(0);
    }
  }

  html{
    min-width: 1000px;
}

body{
    display: flex;
    font-family: 'Noto Serif JP', sans-serif;
    flex-flow: column;
    min-height: 100vh;
    margin: 0;
    scroll-behavior:smooth;
}

header{
    width:100%;
    box-sizing: border-box;
    scroll-behavior:smooth;
    height:auto;
    position: fixed;
    z-index: 9999;
    padding:0;
}

/*包括*/
header .header_wrap{
    width: 60%;
    margin: 0 auto;
    height: auto;
    position: relative;
}

/*headerロゴ*/
header .header_wrap h1{
    width: 30%;
    height: auto;
    padding: 4% 0 4% 0;
    text-align: left;
    display: inline-flex;
}

header .header_wrap h1 img{
    width:60%;
    height: auto;
}
header .header_wrap #mainnav{
    display: block;
    height: auto;
    width: 100%;
}
header #mainnav ul{
    display: block;
    width: 100%;
    color: #808080;
    padding: 2% 0;
}

header #mainnav li{
    display: block;
    box-sizing: border-box;
    vertical-align: middle;
    text-align: center;
    width: 100%;
    padding: 0;
    font-size: 14px;
}


/* 三　*/
.hamburger {
    display : block;
    position:absolute;
    z-index: 9999;
    right : 0;
    top   : 20px;
    width : 42px;
    height: 42px;
    cursor: pointer;
    text-align: center;
  }
  
.hamburger span {
display : block;
position: absolute;
width   : 30px;
height  : 2px ;
left    : 6px;
background : #555;
-webkit-transition: 0.3s ease-in-out;
-moz-transition   : 0.3s ease-in-out;
transition        : 0.3s ease-in-out;
}


.hamburger span:nth-child(1) {
top: 10px;
}
.hamburger span:nth-child(2) {
top: 20px;
}
.hamburger span:nth-child(3) {
top: 30px;
}

/* 開いてる時 */
.hamburger.active span:nth-child(1) {
top : 16px;
left: 6px;
background :#fff;
-webkit-transform: rotate(-45deg);
-moz-transform   : rotate(-45deg);
transform        : rotate(-45deg);
}

.hamburger.active span:nth-child(2),
.hamburger.active span:nth-child(3) {
top: 16px;
background :#fff;
-webkit-transform: rotate(45deg);
-moz-transform   : rotate(45deg);
transform        : rotate(45deg);
}
/* 閉じている時 */

.globalMenuSp {
position: fixed;
z-index : 999;
top  : 0;
left : 0;
color: #fff;
background: rgba(0,0,0,0.7);
text-align: center;
width: 100%;
opacity: 0;
visibility: hidden;
transition: opacity .6s ease, visibility .6s ease;
}

.globalMenuSp ul {
margin: 0 auto;
padding: 0;
width: 100%;
}

.globalMenuSp ul li {
list-style-type: none;
padding: 0;
width: 100%;
transition: .4s all;
}

.globalMenuSp ul li span{
    font-size: 12px;
    vertical-align: middle;
}

.globalMenuSp ul li img{
    width: 14%;
}
 .globalMenuSp ul li:last-child {
    padding-bottom: 0;
  }
 .globalMenuSp ul li:hover{
    background :#ddd;
  }
  
  .globalMenuSp ul li a {
    display: block;
    color: #fff;
    text-decoration :none;
    padding:2%;
    letter-spacing: 0.2em;
  }
  
  /* jQueryで付与・削除する */
.globalMenuSp.active {
    opacity: 100;
    visibility: visible;
  }

  /* footer */
footer{
    background-color: #000;
    box-sizing: border-box;
    color: #fff;
    height: auto;
    margin-top: 150px;
    width: 100%;
    padding: 0;
}
/* footerコンテンツ包括*/
footer #footer_wrap{
    display: block;
    height: auto;
    width: 60%;
    margin: 0 auto;
    position: relative;
    padding: 3% 0 0;
}
/* footerロゴ*/
footer #footer_wrap h1{
    width: 30%;
    height: auto;
    padding: 16px 0;
    text-align: left;
    display: inline-flex;
}
footer #footer_wrap h1 a{
    display: block;
}

footer #footer_wrap h1 img{
    width: 60%;
}
/* footerメニュー*/
footer #footer_wrap #mainnav{
    width: 700px;
    text-align: left;
}
footer #footer_wrap #mainnav .footer_menu{
    display: block;
    width: 90%;
    border-top: 1px solid #b2b2b2;
}
footer #footer_wrap #mainnav .footer_menu li{
    box-sizing: border-box;
    color: #b2b2b2;
    display: table-cell;
    font-size: 16px;
    letter-spacing: 4px;
    text-align: left;
    vertical-align: bottom;
    padding: 16px  26px 16px 0;
}

footer .copy{
    color:#d0af7a;
    font-family: serif;
    font-size: 12px;
    padding: 40px 0;
    text-align: left;
}

/* TOPへ戻るボタン */
.p-pagetop { 
    z-index: 99; 
    position: fixed; 
    right: 0; 
    bottom: 0;
     -webkit-transform: translate3d(0, 100%, 0); 
     transform: translate3d(0, 100%, 0); 
     opacity: 0; 
     -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; 
     transition: opacity 0.35s, -webkit-transform 0.35s; 
     transition: opacity 0.35s, transform 0.35s; 
     transition: opacity 0.35s, transform 0.35s, -webkit-transform 0.35s; 
    }

.p-pagetop.is-active { 
    -webkit-transform: translate3d(0, 0, 0); 
    transform: translate3d(0, 0, 0); 
    opacity: 1;
 }

.p-pagetop a { 
    display: block; 
    position: relative; 
    width: 60px; 
    height: 60px; 
    color: #333; 
}

.p-pagetop a::after { 
    position: absolute; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    width: 18px; 
    height: 26px; 
    margin: auto; 
    font-size: 20px; 
    content: "↑"; 
}

/*TOP画像　読み込み変更*/
.pc_img { display: block !important; }
.sp_img { display: none !important; }
.br_pc{display: none;}


/* class */
.pd_80{
    padding:0 0 80px;
}
.pd_t50{
    padding-top: 50px;
}
/*main contents*/
#container{
    height: auto;
    width: 100%;
    flex: 1;/*mainコンテンツの高さを固定*/
    box-sizing: border-box;
}
/** TOP以外 **/
#About_page,
#container .or
{
    margin-top: 100px !important;
}
/*　main_img */
#container .main_img{
    height:550px;
    margin: 0 auto;
    text-align: center;
}
#container .main_img .main_img_pc{
    position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
/* filter */
#container .main_img .main_img_pc::after{
    content: '';
    background-color: rgba(0,0,0,0.3);
    position:absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;    
    }

#container .main_img .main_img_pc video{
    width: 100%;
    height: 100%;
    margin-bottom: 88px;
    object-fit:cover;
    position: relative;
}
#container .main_img .main_img_pc .txt_text{
    width: 100%;
    height: inherit;
    display: flex;
    position: absolute;
    top:0;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

#container .main_img .main_img_pc .txt_text .fv_txt{
    color: #fff;
    letter-spacing: 0.16em;
    z-index: 98;
    font-size: 32px;
    padding-top: 50px;
}
#container .main_img .main_img_pc .txt_text .fv_txt span{
    font-size: 15px;
    display: block;
    color: #fff;
    letter-spacing: 0.16em;
    z-index: 98;
}

#container .main_img .main_img_sp{
    display: none;
}

/*  title  */
#container #container_inner h2{
    color: #000;
    font-size: 1.4em;
    font-weight: normal;   
    padding: 50px 0 5px;
    letter-spacing: 0.1em;
    border-bottom: 1px solid #b2b2b2;
    overflow: hidden;
}

#container .About:last-child{
   border-bottom:none;
}
    
#container .description_txt{
    position: relative;
    font-size: 18px;
    margin: 160px 0;
}
#container .description_txt p{
    width: 60%;
    line-height: 2.3em;
    padding: 10% 0 10% 10%;
    box-sizing: border-box;
}
   
/*******  main_contents *******/
#container #container_inner{
    width: 60%;
    margin: 0 auto;
    padding:20px 0 0;
}

.About_txt{
    padding: 20px 0;
    line-height:1.5;
    text-align: justify;
    font-size: 14px;
}
#container_inner .About_page_txt figure img{
    width: 100%;
}
#container .btn_before{
    padding:40px 0 0;
}

#container .about_btn{
    width: 130px;
    border: #333 solid 1.5px; 
    color: #333;
    margin:0 auto;
    padding: 10px;
    font-family:'Noto Serif JP', sans-serif;
    font-size: 14px;
    letter-spacing: 0.2em;
    display: block;
    box-sizing: border-box;
    text-align: center;
    }

#container .about_btn:hover{
        background-color:rgba(0,0,0,1);
        color: #fff;
    }


/*****
    index.html
           ******/
/* 作例 */
#container #container_inner .Works {
    width: 100%;
    margin: 0 auto;
}
#container #container_inner .Works p{
    font-size: 10px;
    padding: 10px 0;
}

#container #container_inner .Works .example{
    flex-flow: row wrap;
    justify-content: space-around;
    align-items: stretch;
    text-align: left;
    width:100%;
    position:relative;
    margin: 0 auto;
    overflow: hidden;
    box-sizing: border-box;
    padding:0 20px 20px;
}

#container #container_inner .Works .example dl{
    box-sizing: border-box;
    width: 33.333%;
    padding: 2% 0;
    float: left;
    text-align: center;
}

#container #container_inner .Works .example dt{
    padding:0;
    font-size: 12px;
    letter-spacing: 0.1em;
    text-align: center;
}

#container #container_inner .Works .example dd{
    padding: 2%;
    font-size: 12px;
    letter-spacing:-0.001em;
    text-align: left;
    text-indent: 0.8em;
}


#container #container_inner .Works .example dt:hover img{
    opacity: 0.7;
    /*transform: scale(1.1, 1.1);
    transition: 0.5s;*/
    filter: brightness(80%);
}
#container #container_inner .Works .example dt img{
    width: 90%;
    text-align: center;
}

#container #container_inner .Works .b_btn{
    display: block;
    width: 130px;
    margin: 0 auto;
    border: #333 solid 1px;
    box-sizing: border-box;
    background-color: #fff;
    color: #333;
    padding: 10px;
    font-family: 'Noto Serif JP', sans-serif;
    font-size: 14px;
    letter-spacing: 0.2em;
}
#container #container_inner .Works .b_btn a{
    display:block;
}
#container #container_inner .Works .b_btn:hover{
    background-color: #000;
    color: #fff;
}

/* Operation */
#container_inner .Operation{
    width: 100%;
    margin: 0 auto;
    padding: 130px 0 0;
}
#container_inner .Operation .example{
    flex-flow: row wrap;
    display: flex;
    text-align: center;
    width: 100%;
    position: relative;
    margin: 0 auto;
    overflow: hidden;
    box-sizing: border-box;
    padding: 0 20px 20px
}

#container_inner .Operation .Operation_list{
    width: 33.33%;
    text-align: center;
    padding: 2% 0;
    float: left;
}

#container_inner .Operation_list figure:hover{
    opacity: 0.7;
    filter: brightness(80%);
}

#container_inner .Operation .Operation_list figure img{
    width:90%;
}
#container_inner .Operation .Operation_list dt{
    padding: 3% 0 0;
    font-size: 12px;
    font-weight:800;
    letter-spacing: 0.1em;
    text-align: left;
    text-indent: 0.99em;
}
#container_inner .Operation .Operation_list dd{
    padding: 2% 0;
    font-size: 11px;
    letter-spacing: 0.1em;
    text-align: left;
    line-height: 1.8;
    width: 90%;
    margin-left: 10px;
    
}


/* Services */
#container #container_inner .Services{
    width: 100%;
    margin:0 auto;
    padding: 130px 0 0;
    clear: both;
}
#container .Service_menu li{
    letter-spacing: 0.2em;/*該当ページのみ*/
}

#container #container_inner .Services ul{
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
    align-items: stretch;
    text-align: left;
    width: 80%;
    padding: 20px 0 0;
    margin: 0 auto;
}
#container #container_inner .Services ul li{
    width: 50%;
    color: #000;
    font-size: 1.4em;
    padding: 2% 0;
    letter-spacing: 0.08em;
    display: table;
    text-indent: 0.5em;
}
#container #container_inner .Services ul li:hover{
    color: #b2b2b2;
}

#container #container_inner .Services ul li span{
    display: block;
    font-size: 11px;
    text-indent: 1em;
}
#container #container_inner .Services ul li a{
    vertical-align: text-top;
}


#container #container_inner .Services .des_icon,
#container #container_inner .Services .pm_icon,
#container #container_inner .Services .cre_icon,
#container #container_inner .Services .sup_icon{
    width:45px;
    height:45px;
    background-size: cover;
    display: table-cell;
    -webkit-box-align: center;
    align-items: center;
    box-sizing: border-box;
    background-position: 50% 50%;
}

#container #container_inner .Services .des_icon{
    content:"";
    background-image: url(../img/des_icon.png);
}

#container #container_inner .Services .pm_icon{
    content:"";
    background-image: url(../img/pm_icon.png);
}
#container #container_inner .Services .cre_icon{
    content:"";
    background-image: url(../img/crea_icon.png);
}
#container #container_inner .Services .sup_icon{
    content:"";
    background-image: url(../img/sp_icon.png);
}



/********************
#a .link01
*********************/

#container .link01{
    padding: 2% 0;
    box-sizing: border-box;
    width: 100%;
    align-items: center;
    overflow: hidden;
}
#container .link01 li{
    box-sizing: border-box;
    padding:0 2%;
    width: auto;
    text-align: left;
   float: left;
   line-height: 1.6em;
}
#container .link01 li a{
    display: block;
}
#container .link01 li a:hover{
    color: #b2b2b2;
}
/* .link01 float共通 */
#Service_page,
#Pact_page{
    clear: both;
}
#Service_page .Service_page_inner .ser_img{
    width: 100%;
    height: auto;
    text-align: center;
    padding: 20px 0 0;
}
#Service_page .Service_page_inner .ser_img img{
    width: 100%;
    height: 50%;
}

/*共通*/
#Service_page .Service_page_inner #Design,
#Service_page .Service_page_inner #Web,
#Service_page .Service_page_inner #PM,
#Service_page .Service_page_inner #Cr,
#Service_page .Service_page_inner #Support,
#container #container_inner #pact_more,
#container #container_inner #per_info,
#container #container_inner #sche,
#container #container_inner #agree,
#container #container_inner #date{
    padding-top: 130px;
}

/************************
 Pact ご契約について
 ***********************/
 #Pact_page p{
    line-height: 1.6em;
    letter-spacing: 0.06em;
    font-size: 14px;
}


#container #container_inner #Pact_txt{
    padding: 40px 0 10px !important;
}
#Pact_page .Pact_page_inner .cp_actab li{ 
    text-indent: -1em;
    padding-left: 1em;

}  



#Pact_page .Pact_page_inner .cp_actab>p{   
    line-height: 1.6;
    padding: 0;
    font-size: 14px;
    text-indent: -1em;
    padding-left: 1em;
}

#container #container_inner #Pact_page{
    width: 100%;
    margin: 0 auto;
}
#Pact_page .ser_img{
    width: 100%;
    height: auto;
    text-align: center;
    padding: 20px 0 0;
}
#container #container_inner #Pact_page .ser_img img{
    width: 100%;
    height: 50%;
}

 #Pact_page .close .red,
 .red{
     color: #ff0000;
 }

#Pact_page .Pact_page_inner ul li{
    line-height: 1.6em;
    letter-spacing: 0.06em;
    position: relative;
    font-size: 14px;
}
#Pact_page .b_btn:hover{
    color: #fff;
    background-color: #000;
 }
 

#container #container_inner #Pact_page .Pact_page_inner{
    margin-top: 40px;
}
#container #container_inner #Pact_page h2:not(:first-child){
    margin-top:60px;/*該当ページのみ*/
}
#container #container_inner #Pact_page .day{
    padding: 40px 0 0;
    border-top: 1px solid #b2b2b2;
    margin-top: 60px;
}
#container #container_inner #Pact_page .day_line{
border-bottom: 1px solid #b2b2b2;
padding: 0 0 40px;
}

/*ご契約フォームへ*/
#Pact_page .form_txt{
    padding: 40px 0 20px;
    text-align: center;
}

#Pact_page .b_btn {
    display: block;
    width: 140px;
    margin: 0 auto;
    border: #333 solid 1px;
    box-sizing: border-box;
    background-color: #fff;
    color: #333;
    padding: 10px;
    font-family: 'Noto Serif JP', sans-serif;
    font-size: 14px;
    letter-spacing: 0.2em;
}

#Pact_page .cp_actab-content .b_btn a{
    display:block;
}

#Pact_page .b_btn:hover{
   color: #fff;
   background-color: #000;
}
/***
　アコーディオンメニュー
 #Pcat_page  +   #Service_page　***/
.cp_actab {
	position: relative;
	overflow: hidden;/*非表示*/
	width: 100%;
	margin: 0 auto;
	color: #fff;
    
}
.cp_actab input {
	position: absolute;
	z-index: -1;
	opacity: 0;
}
.cp_actab label {
    font-weight: 400;
    line-height: 3;
    position: relative;
    display: block;
    padding: 0 0 0 1em;
    cursor: pointer;
    margin: 0 0 1px 0;
    background: #000;
    font-family: "M PLUS Rounded 1c", sans-serif;
}

.cp_actab .cp_actab-content {
	overflow: hidden;
	max-height: 0;
	-webkit-transition: max-height 0.35s;
	transition: max-height 0.35s;
	color: #333;
}
.cp_actab .cp_actab-content ul,
.cp_actab .cp_actab-content{
	margin: 1em;
}
/* :checked */
.cp_actab input:checked ~ .cp_actab-content {
	max-height: 80em;
}
/* + */
.cp_actab label::after {
	line-height: 3;
	position: absolute;
	top: 0;
	right: 0;
	display: block;
	width: 3em;
	height: 3em;
	-webkit-transition: all 0.35s;
	transition: all 0.35s;
	text-align: center;
}
.cp_actab input[type=checkbox] + label::after {
	content: '+';
}
.cp_actab input[type=checkbox]:checked + label::after {
	transform: rotate(315deg);
}

/*btn*/
.cp_actab-content .b_btn{
    display: block;
    width: 130px;
    margin: 0 auto;
    border: #333 solid 1px;
    box-sizing: border-box;
    background-color: #fff;
    color: #333;
    padding: 10px;
    font-family: 'Noto Serif JP', sans-serif;
    font-size: 14px;
    letter-spacing: 0.2em;
}
.cp_actab-content .b_btn a{
    display:block;
}

.b_btn:hover{
   color: #fff;
    background-color:rgba(0,0,0,1);
}


/***********************
 #Service_page サービス
***********************/
.Service_page_inner h2>span{
    font-size: 12px;
    vertical-align: middle;
    padding: 0 0 0 1em;
}
/*Service_page アコーディオンメニュー内btn*/
#Service_page .desi_btn_area{
    margin: 0 auto;
    width: 80%;
    padding:0;
    box-sizing: border-box;
    overflow: hidden;
    text-align: center;
}
#Service_page .cp_actab-content .b_btn{
    display: block;
    width: 130px;
    border: #333 solid 1px;
    box-sizing: border-box;
    background-color: #fff;
    color: #333;
    display: inline-block;
    padding: 10px;
    font-family: 'Noto Serif JP', sans-serif;
    font-size: 14px;
    letter-spacing: 0.2em;
}
#Service_page .cp_actab-content .b_btn a{
    display: block;
}
#Service_page .cp_actab-content .b_btn:hover{
    background-color:rgba(0,0,0,1);
    color: #fff;
}

.pst_txt{
    font-size: 14px;
    color: #000;
    padding: 20px 0;
}
/*料金表*/
.Service_page_inner table{
    width: 100%;
    padding:20px 10px;
    box-sizing: border-box;
}
.Service_page_inner table .td_l{
    width: 40%;
    background-color: #696969;
    padding: 18px;
    color: #fff;
    box-sizing: border-box;
    letter-spacing: 0.02em;
    font-family: "メイリオ" ;
    border: 1px solid #b2b2b2;
    border-collapse: collapse;
    font-size: 13px;
}
.Service_page_inner table .td_r{
    width:60%;
    padding: 18px;
    box-sizing: border-box;
    letter-spacing: 0.02em;
    font-family: "メイリオ" ;
    border: 1px solid #b2b2b2;
    border-collapse: collapse;
    border-left: none;
    line-height: 1.3;
    font-size: 13px;
}
.Service_page_inner table .td_col{
    padding: 20px 0;
    letter-spacing: 0.02em;
    font-family: "メイリオ";
}
.Service_page_inner table .td_col p{
    font-size: 12px;
}

.annotation{
    font-size: 12px;
    font-family: "メイリオ" ;
}
.Service_page_inner .cp_actab-content .b_btn{
    margin-left: 10px;/*該当ページのみ使用*/
}
.Service_page_inner .cp_actab-content .b_btn:hover{
    background-color: #000;
}



/*****************
  About_page　ONEMOREについて
*****************/
#container_inner #About_page .About_page_txt{
    padding:20px 0 40px
}
#container_inner #About_page figure img{
    width: 100%;
}

#container_inner #About_page .About_txt{
    padding: 20px 0;
    line-height:1.5;
    text-align: justify;
    font-size: 14px;
}

#container_inner #About_page .b_btn{
    display: block;
    width: 130px;
    margin: 0 auto;
    border: #333 solid 1px;
    box-sizing: border-box;
    background-color: #fff;
    color: #333;
    padding: 10px;
    font-family: 'Noto Serif JP', sans-serif;
    font-size: 14px;
    letter-spacing: 0.2em;
}
#container_inner #About_page .b_btn a{
    display: block;
}
#container_inner #About_page .b_btn:hover{
    background-color: #000;
    color: #fff;
}

#container_inner #About_page .onemore_car{
    margin: 60px 0 0;
}

#container_inner #About_page .onemore_car h2 span{
    font-size: 10px;
    padding-left:2em;
    vertical-align: middle;
}
#container_inner #About_page .onemore_car .onemore_car_in{
    padding: 20px 0;
}
#container_inner #About_page .onemore_car p,
#container_inner #About_page .onemore_time p{
    font-size: 14px;
    line-height: 2;
}
#container_inner #About_page .onemore_car span{
    font-size: 10px;
}

#container_inner #About_page .onemore_time .onemore_time_in{
    padding: 20px 0;
}

/*****************
  #Works_page 作品
******************/
#container #container_inner #Works_page{
    margin-top: 80px;
}
#container #container_inner #Works_page_h2{
    font-size: 1.4em;
}
#Works_page .Works_page_inner h2:nth-of-type(1){
    border-top: none;
}

#container #container_inner h5{
    font-size: 10px;
    text-align: left;
    text-indent: 1.5em;
    clear: both;
}
#Works_page .Works_page_inner>h2{
    font-size: 1.4em;
    border-bottom:none !important;
    border-top:1px solid #b2b2b2;
    padding:100px 0 15px !important;    
}

#Works_page .Works_page_inner>h2:not(:first-child){
    margin-top:60px;/*該当ページのみ*/
}


#cts .rub{
    font-size: 14px;
    vertical-align: middle;
    display: inline-block;
    padding-bottom: 10px;
}
#Works_page .Works_txt{
    font-size: 14px;
    line-height: 1.8;
}
#Works_page .tag_bg_b{
    width: 100%;
    padding:60px 0 0;
}
#Works_page .tag_bg_b li img{
    width:100%;
}

#Works_page .Works_txt{
    clear: both;
}
#Works_page  p a{
    display: block;
    text-decoration: underline;
    text-decoration-color: #555;
    font-size: 12px;
}

#container #container_inner #more {
    color: #000;
    font-size: 1.4em;
    font-weight: normal;
    padding: 50px 0 5px;
    letter-spacing: 0.1em;
    border-bottom:none;
}
#container #container_inner .more_image_samp{
    width: 100%;
}
#container #container_inner .more_image_samp img{
    width: 100%;
}
#container #container_inner .more_inner{
    padding: 20px 0 80px;
    border-bottom:1px solid #b2b2b2 
}
#container #container_inner .more_inner li{
    line-height: 1.5;
    text-align: justify;
    font-size: 14px;
    padding: 4px 0;
}

/* More-Tech_link */
#container #container_inner .more_txt{
    width: 85%;
    font-size: 14px;
    padding:80px 0 20px;
    margin: 0 auto;
    text-align: center;
}
#container #container_inner .more_img{
    width: 80%;
    margin: 0 auto;
    text-align: center;
}
#container #container_inner .more_img a:hover{
    opacity: 0.7;
    filter: brightness(80%);
}
#container #container_inner .more_img img{
    width:60%;
}
/****
.bx-wrapper > .bx-viewport > .bxslider
********/
#Works_page .bx-wrapper{
    width: 100%;
    margin: 0 auto;
    box-shadow: none;
    border: none;
}
#Works_page  .bxslider li {
    width: 80%;
    height: auto;
    margin: 0 auto;
}
#Works_page  .bxslider li figure{
    width:100%;
    height: 100%;
    margin: 0 auto;
}
#Works_page  .bxslider li figure img{
    margin: 0 auto;
}

#Works_page .bx-wrapper .bx-pager, 
#Works_page .bx-wrapper .bx-controls-auto{
    bottom: -35px;
}
#Works_page .Works_txt{
    padding: 10px 0;
}
#Works_page .bx-wrapper .bx-pager.bx-default-pager a{
    width: 5px;
    height: 5px
}
/* DIRECTION CONTROLS (NEXT / PREV) */
#Works_page .bx-wrapper .bx-prev,
#Works_page .bx-wrapper .bx-next{
    display: none;
}

@media only screen and (min-width:1200px)and (max-width: 9999px) {

header #mainnav .sns_icon_list_i img{
    width: 8%;
} 
#container .main_img{
    height:auto;
    position: relative;
}
#container .main_img .main_img_pc video{
    margin-bottom: 0;
}
#container .main_img .main_img_pc::after {
    content: '';
    background-color: rgba(0,0,0,0.3);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 99.3%;
}

#container .main_img .main_img_pc .txt_text{
    width: 100%;
    height: inherit;
    display: flex;
    position: absolute;
    top: 0;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

#container .main_img .main_img_pc .txt_text .fv_txt{
    color: #fff;
    letter-spacing: 0.16em;
    z-index: 98;
    font-size: 32px;
    padding-top: 50px;
}
#container .main_img .main_img_pc .txt_text .fv_txt span{
    font-size: 15px;
    display: block;
    color: #fff;
    letter-spacing: 0.16em;
    z-index: 98;
}
#container .btn_before{
    padding: 40px 0 0;
}
#container .about_btn{
    width: 130px;
    border: #333 solid 1.5px; 
    color: #333;
    margin: 0 auto;
    padding: 10px;
    font-family:'Noto Serif JP', sans-serif;
    font-size: 14px;
    letter-spacing: 0.2em;
    display: block;
    }

    
/***スクロールダウン 位置***/
.scrolldown1{
    position:absolute;
    left:50%;
    bottom:100px;
    height:80px;
  }
  
  /*Scrollテキスト*/
  .scrolldown1 span{
    position: absolute;
    left:-15px;
    top:0;
    color: #eee;
    font-size: 0.7rem;
    letter-spacing: 0.05em;
  }
  
  /* 線 */
  .scrolldown1::after{
      content: "";
      position: absolute;
      top: 0;
      width: 1px;
      height:80px;
      background: #eee;
      animation: pathmove 1.4s ease-in-out infinite;
      opacity: 0;
  }
  
#sclo_bar{
    width:100%;
    height: auto;
    position: relative;
  } 
  
  #sclo_bar:before{
    content: '';
    position:fixed;
    top:0;
    left:0;
    z-index:-1;
    width:100%;
    height: 100vh;
  }
  
  #sclo_bar_in{
    position: relative;
    z-index:1;
    background:#eee;
    padding:600px 0;
    text-align: center;
  }

  #Works_page .bx-wrapper{
    width: 100%;
  }
  #Works_page .bx-wrapper img{
    width: 100%;
  }

}