/*
/*---スマホ改行--*/
@media screen and (max-width: 559px) {
    .pc-br{display:none;}
    .sp-br{display:block;}
    }
    /*---タブレット改行*/
    @media screen and (min-width:560px) and (max-width:1199x) {
    .sp-br{display:none;}
        }
    /*---PC改行--*/
    @media screen and (min-width:1200x){
    .pc-br{display:block;}
    .sp-br{display:none;}
    }
.pb_30{padding-bottom:30px !important;}

body{max-width: 100%;}

* {
    margin: 0px;
    padding: 0px;
    font-family: 'Noto Serif JP', sans-serif;
}


@media screen and (max-width: 763px) {
/*共通css*/
html{
    min-width: 100%;
}

body{
    min-height: auto;
}
/* 改行制御  <br class="br-sp"> */
.br-sp{
    display: none;
}
.pd_130{
    padding: 0 !important;/*PConly*/
}
.pd_t50{
    padding-top: 0 !important;/*PConly*/
}

header{
    box-sizing: border-box;
    width:100%;
    height:60px;
    position: fixed;
    z-index: 9999;
    padding: 0;
}

/*ロゴとメニュー包括*/
header .header_wrap{
    display: table;
    width: 100%;
    position: relative;
    height: 100%;
}

/*headerロゴ*/
header .header_wrap h1{
    width: 80%;
    display:table-cell;
    height: auto;
    text-align: left;
    vertical-align:middle;
    padding: 0;
    position:absolute;
    top:28%;
    left:7%;
}

header .header_wrap h1 img{
    max-width:30%;
    vertical-align: middle;
}
header .header_wrap #mainnav{
    display: block;
    height: auto;
    width: 100%;
}
header #mainnav ul{
    display: block;
    width: 100%;
    color: #808080;
    padding: 0;
}

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

.scrolldown1 span{
    top:-20px;
}
.scrolldown1 {
    left: 50%;
    bottom:120px;
    height: 74px;
}
#sclo_bar,
    #sclo_bar:before{
  height:3vh;    
    }

/* footer*/
footer{
    background-color: #000;
    color: #fff;
    height: auto;/*footerの高さを確保*/
    margin-top: 30%;
    padding: 0%;
}
/* footerコンテンツを包括*/
footer #footer_wrap{
    width: 80%;
    height: auto;
}
/* footerロゴ*/
footer #footer_wrap h1{
    margin: 0;
    text-align: left;
    width: 100%;
    border-bottom: 0.5px solid #ccc;
    padding: 20px 0;
}
footer #footer_wrap h1 img{
    width: 30%;
}
/* footerメニュー */
footer #footer_wrap #mainnav{
   width: 100%;
   border-bottom: 0.5px solid #ccc;
   margin: 12% 0 0;
   padding: 0 0 12%;
}
footer #footer_wrap #mainnav .footer_menu{
    margin: 0 auto;
    width: 100%;
    overflow: hidden;
    border:none;
}

footer #footer_wrap #mainnav .footer_menu li{
    box-sizing: border-box;
    display: inline-block;
    color: #b2b2b2;
    font-size: 16px;
    float: left;
    letter-spacing: 4px;
    text-align: left;
    vertical-align: bottom;
    padding: 0;
    width:  50%;
}

#footer_wrap #mainnav .footer_menu li a{
    display: block;
    padding:4% 0;
    font-size: 0.87em;/*14px*/
}


footer .copy{
    color:#d0af7a;
    padding: 5% 0;
    text-align: left;
}


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


/* 三　*/
.hamburger {
    display : block;
    position: absolute;
    z-index : 9999;
    right : 5%;
    top   : 8px;
    width : 40px;
    height: 40px;
    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 img{
    width: 25% !important;
}

 .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:6%;
  }
  
  /* jQueryで付与・削除する */
.globalMenuSp.active {
    opacity: 100;
    visibility: visible;
  }

.p-pagetop{display: none;}


/** TOP以外 **/
#About_page,
#container .or{
    margin-top: 60px !important;
}


/*main contents*/
#container{
    height: auto;
    width: auto;
    flex: 1;/*mainコンテンツの高さを固定*/
    width: 100%;
    height: 100%;
}

#container #container_inner{
    width: 90%;
    margin: 0 auto;
    padding: 40px 0 0;
}

/*　main_img */
#container .main_img .main_img_pc{
    display: none;
}

#container .main_img{
    height:100vh;
    text-align: center;
}

#container .main_img .main_img_sp{
    width: 100%;
    height: 100vh;
    display: block;
    position:relative;
    padding: 0;
}

/* filter */
#container .main_img .main_img_sp::after{
    content: '';
    background-color: rgba(0,0,0,0.3);
    position:absolute;
    top: 0%;
    left: 0;
    width: 100%;
    height: 100vh;
    }

#container .main_img .main_img_sp video{
    width: 100%;
    height: 100vh;
    object-fit:cover;
    position: relative;
}
#container .main_img .main_img_sp .fv_txt_sp{
    width: 100%;
    height: 98vh;
    display: flex;
    position: absolute;
    top:0px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 26px;
    display: flex;
   color: #fff;
    letter-spacing: 0.06em;
    z-index: 98;
}
#container .main_img .main_img_sp .fv_txt_sp span{
    font-size: 12px;
    display: block;
    color: #fff;
    letter-spacing: 0.16em;
    z-index: 98;
}
#container .btn_before{
    padding: 40px 0 0;
}
#container .about_btn{
    display: block;
    width: 130px;
    margin: 0 auto;
    border: #333 solid 1px; 
    box-sizing: border-box;
    color: #333;
    padding: 10px;
    font-family:'Noto Serif JP', sans-serif;
    font-size: 14px;
    letter-spacing: 0.2em;
    }

/* タイトル */
#container #container_inner h2{
    color: #000;
    font-size: 1.2em;
    font-weight: normal;   
    padding: 40px 0 5px;
    letter-spacing: 0.1em;
}


 /* Works 作例 */
#container #container_inner .Works {
    width: 100%;
    margin: 0 auto;
    padding: 0 0 25%;
    letter-spacing: 0.02em;
}
#container #container_inner .Works h2{
    color: #000;
    font-size: 1.2em;
    letter-spacing: 0.1em;
    font-weight: normal;   
    padding:65px 0 2%;
}
#container #container_inner .Works h2>span{
    font-size: 10px;
    display: block;
}

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

#container #container_inner .Works .example .model_list{
    box-sizing: border-box;
    width: 45%;
    padding: 2% 0;
}
#container #container_inner .Works .example dt,
#container #container_inner .Works .example dd{
    padding: 2% 0;
    font-size: 0.73em;/*12px*/
    letter-spacing: 0.2em;
    text-align: left;
    text-indent: 0;
}
#container #container_inner .Works .example dt img{
    width: 100%;
    height: 100%;
}


/* Operation */
#container #container_inner .Operation{
    width: 100%;
    margin: 0 auto;
    padding:0 0 25%;
}

#container_inner .Operation .example{
    padding: 0;
    justify-content: space-around;
    align-items: stretch;
}
#container_inner .Operation .Operation_list{
    text-align: center;
    width:45%;
    padding: 20px 0;
    box-sizing: border-box;
}

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

/* Services */
#container #container_inner .Services{
    width: 100%;
    margin:0 auto;
    padding: 0;
}
#container #container_inner .Services h2{
    color: #000;
    font-size: 1.2em;
    font-weight: normal;   
    padding: 65px 0 2%;
}

#container #container_inner .Services ul{
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
    align-items: stretch;
    text-align: left;
    width: 85%;
    padding: 10px 0 0;
    margin: 0 auto;
}
#container #container_inner .Services ul li{
    width: 100%;
    color: #000;
    font-size: 1.4em;
    padding: 6% 0 0;
    box-sizing: border-box;
    letter-spacing: 0.08em;
}
#container #container_inner .Services ul li span{
    display: block;
    font-size: 0.5em;
    padding: 0;
}


#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%;
    object-fit: cover;
}

/*共通*/
#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: 60px;
}


/************************
 Pact ご契約について
 ***********************/

 #container .link01{
    padding: 2%;
    box-sizing: border-box;
    width: 100%;
    margin: 0 auto;
    align-items: center;
}
#container .link01 li{
    box-sizing: border-box;
    padding: 2% 0;
    width:100%;
    text-align: left;
    display: block;
    font-size: 14px;
}

#container .link01 li a{
    display: block;
}

#container #container_inner #Pact_page {
    width: 100%;
    margin: 0 auto;
}
#container #container_inner #Pact_page h3{
    font-size: 14px;
    padding: 20px 0;
}


#container #container_inner #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%;
    object-fit: cover;
}
 #Pact_page .close .red{
     color: #ff0000;
 }


#Pact_page #pact_more ul{
    padding-left: 1em;/*行頭揃え*/
    margin: 2em;
}

#Pact_page #pact_more ul li{
    list-style:outside;/*●*/
    padding-bottom: 1.6em;
}

/***
　アコーディオンメニュー
 #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;
    font-size: 13px;
}
.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);
}




.b_btn{
    display:block;
    color: #fff;
    width:130px;
    padding: 10px;
    box-sizing: border-box;
    text-align: center;
    margin: 0 auto;
}
.b_btn a{
    display: block;
}
.b_btn:hover{
    background-color: #000;
}



/***********************
 #Service_page サービス
***********************/
.Service_page_inner h2>span{
    font-size: 12px;
    vertical-align: bottom;
    padding: 0 0 0 1em;
}

.pst_txt{
    font-size: 14px;
    color: #000;
    line-height: 1.5;
    padding: 20px 0;
}

/*料金表*/
.Service_page_inner table{
    width: 100%;
    padding:20px 0;
    box-sizing: border-box;
}
.Service_page_inner table .td_l{
    width: 100%;
    background-color: #696969;
    padding: 18px;
    display: block;
    color: #fff;
    box-sizing: border-box;
    letter-spacing: 0.02em;
    font-family: "メイリオ" ;
     border: 1px solid #b2b2b2;
     line-height: 1.3;
}
.Service_page_inner table .td_r{
    width:100%;
    padding: 18px;
    display: block;
    box-sizing: border-box;
    line-height: 1.3;
    letter-spacing: 0.02em;
    font-family: "メイリオ" ;
    border-left: 1px solid #b2b2b2;
}
.Service_page_inner table .td_col{
    padding: 20px 0;
    letter-spacing: 0.02em;
    font-family: "メイリオ" ;
}
.Service_page_inner .cp_actab-content .b_btn{
    margin-left: 10px;/*該当ページのみ使用*/
}

/*Service_page アコーディオンメニュー内btn*/
#Service_page .desi_btn_area{
    margin: 0 auto;
    width: 80%;
    padding:0;
    display:flex;
    box-sizing: border-box;
    overflow: hidden;
    text-align: center;
}
#Service_page .cp_actab-content .b_btn{
    color: #333;
    width:130px;
    display: inline-block;
    background-color: #fff;
    padding: 10px;
    box-sizing: border-box;
    text-align: center;
    letter-spacing: -0.002em;
    margin:2%;
}

.Service_page_inner>h2{
    margin-top: 80px !important;/*該当ページのみ*/
}


#Works_page .Works_page_inner>h2{
    padding: 40px 0 5px !important;
}

#Works_page .more_inner li{
    text-indent: -1em;
    padding-left: 1em !important;
}
}/*end*/


/*tab*/
@media only screen and (min-width:764px)and (max-width: 999px) {
    html{
        min-width: 100%;
        padding: 0;
        margin: 0;
}
 header .header_wrap{
    width: 60%;
 }
#container{
        width: 100%;
}

#container #container_inner{
    width: 60%;
    margin: 0 auto;
    padding:50px 0 0;
}

/* 三　*/
.hamburger {
    display : block;
    position: absolute;
    z-index : 9999;
    right : 0;
    top   : 8px;
    width : 40px;
    height: 40px;
    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;
  }

  header #mainnav .sns_icon_list_i img{
      width: 14%;
  }

  footer #footer_wrap #mainnav .footer_menu{
      border-bottom:none;
  }
  footer #footer_wrap #mainnav .footer_menu{
      width: 100%;
  }
  footer #footer_wrap h1 img{
      width: 60%;
  }

#container .main_img_pc img{
    max-width: 100%;
}

#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;
}
#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;
    }

#container #container_inner .Works .example dd{
    text-indent: 0;
}

footer #footer_wrap #mainnav{
    width: 100%;
}
#js-pagetop{
    display: none;
}

/* Service　icon*/
#container #container_inner .Services ul{
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
    align-items: stretch;
    text-align: left;
    width: 90%;
    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 a{
    font-size: 20px;
    letter-spacing: -0.01em;
}
#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;
    vertical-align: middle;
    padding-bottom: 10px;
    -webkit-box-align: center;
    align-items: center;
    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);
}


.cp_actab input:checked ~ .cp_actab-content{
    max-height:50em;
}
#Pact_page .Pact_page_inner .cp_actab li{ 
    text-indent: -1em;
    padding-left: 1em;

}  


}/*tab end*/