﻿.bg_white {background-color: #D3D3D3;}
.bg_color1 {background-color: #272727;}
.txt_color1 {color: #ce9300;}
.txt_color2 {color: #272727;}
.txt_color3 {color: #272727;}
.border_color1 {border-color: #DAA520;}
.border_color2 {border-color: #999999;}
.border_color4 {border-color: #999999;}
.hvr_bg_color3:hover {background-color: #DAA520;}
.hvr_bg_color4:hover {
    background-color: #272727;
    color: #fff;
}
.txt_red { color: #e24343;}
/* ----------　all　---------- */
.linkStyle{
color: #ce9300;
    font-weight: bold;
}
.linkStyle:hover{
	color:#ce9300;
	opacity: 0.7;
	transition: all 0.5s;
}
body{
    background-color: #D3D3D3;
}
header #logo h1{
    width: 90%!important;
}
#fix_menu {
    background-color: #272727;
}
.button_container span {
    background: #D3D3D3;
}
.l-gh__scrollnav-pagetop-arr .head {
    border-bottom: 4.5px solid #D3D3D3;
}
.l-gh__scrollnav-pagetop-text {
    color: #D3D3D3!important;
}
.l-gh__scrollnav-scroll-text {
    color: #D3D3D3!important;
}
.l-gh__scrollnav-scroll-arr .head {
    border-top: 4.5px solid #D3D3D3;
}
.overlay {
    background: rgba(39 ,39 ,39 ,0.7);
}
.overlay .menu-box .menu_list li a {
    color: #D3D3D3;
}
.overlay .tel_bt a {
    color: #DAA520!important;
}
.button_container.active .top {
    background: #D3D3D3;
}
.button_container.active .bottom {
    background: #D3D3D3;
}
.font_2dw {
    font-size: -webkit-calc(1rem - 0px);
    font-size: calc(1rem - 0px);
}
#top_contact_box .bottom .inner .btn_box:first-child {
    margin-bottom: 0px;
}
#top_contact_box .bottom .inner .btn_box:last-child {
    display: none;
}
.more a {
    color: #fff;
    background-color: #272727;
border-color: #272727;
}
.more a:hover {
    background-color: transparent;
    color: #272727;
    border: 1px solid #272727;
}
#footer::before {
    background: rgba(0,0,0,0.6);
}
#top_contact_box .bottom .box {
    background-color: rgba(0,0,0,0.6);
}
/* ----------　TOP　---------- */
#main_img:before {
    content: '';
    display: inline-block;
    width: 30%;
    height: 300px;
    background-image: url(Dup/img/logo3.png);
    background-size: contain;
    vertical-align: middle;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    -webkit- transform: translateY(-50%) translateX(-50%);
    z-index: 9;
    background-repeat: no-repeat;
    background-position: center;
}
#top_contents1{
position: relative;
    background-image: url(Dup/img/back.jpg);
background-repeat: no-repeat;
    background-size: cover;
}
#top_contents1:before {
    content: 'Various Work';
    display: inline-block;
    width: auto;
    height: 100px;
    font-weight: bold;
    font-size: 80px;
    position: absolute;
    -moz-transform: rotate(90deg);
    -webkit-transform: rotate( 90deg );
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    top: 42%; 
    left: -255px;
    opacity: 0.2;
font-family: 'Black Ops One', cursive;
color: #fff;
    z-index: 1;
}
#top_contents1:after {
    content: '';
    display: inline-block;
    width: 100%;
    height: 100%;
    background-color: #333;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0.5;
    z-index: 0;
}
#top_contents1 .catch_txt{
    position: relative;
    z-index: 1;
}
#top_contents1 .catch_txt h2,#top_contents1 .catch_txt p{
    color: #fff;
}
#top_contents2 .con_box .text_box{
overflow-y: scroll;
        -ms-overflow-style: none;    /* IE, Edge 対応 */
        scrollbar-width: none; 
}
#top_contents2 .con_box .text_box::-webkit-scrollbar {
        display:none;
    }
#top_contents2 .con_box .text_box h2{
    font-size: -webkit-calc(1rem + 8px);
    font-size: calc(1rem + 8px);
    margin-bottom: 20px;
}
#top_contents1 .catch_txt p{
    font-weight: bold;
    line-height: 3;
    color: #fff;
}
#top_contact_box .top .box {
    background-color: rgba(218 ,165 ,32 ,085);
}
#top_contents2 .con_box .text_box {
    background-color: rgba(39, 39, 39,0.87);
    padding-top: 90px;
}
#top_contents2 .con_box .text_box .before {
    background-color: #DAA520;
}
#top_contents2 .con_box .text_box h2,#top_contents2 .con_box .text_box p {
    color: #fff;
}
#top_contents2{
    position: relative;
    overflow: hidden;
}
#top_contents2:before {
    position: absolute;
    content: '';
    top: 20%;
    left: -50%;
    right: 0;
    display: block;
    width: 200%;
    height: 50%;
    background-color: #e4e4e4;
    -moz-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
}
#top_contents2 .con_box:first-child .text_box:before {
    content: 'Free Estimate';
    display: inline-block;
    width: auto;
    height: 100px;
    font-weight: bold;
    font-size: 70px;
    position: absolute;
    opacity: 0.5;
    font-family: 'Black Ops One', cursive;
    z-index: -1;
    right: 0;
    top: 0;
}
#top_contents2 .con_box:nth-of-type(2) .text_box{
padding-top: 5%;
    padding-bottom: 90px;
}
#top_contents2 .con_box:last-of-type .text_box:before {
    content: 'Matsusaka';
    display: inline-block;
    width: auto;
    height: 100px;
    font-weight: bold;
    font-size: 70px;
    position: absolute;
    opacity: 0.5;
    font-family: 'Black Ops One', cursive;
    z-index: -1;
    right: 0;
    bottom: 0;
}
.cms_5-c .box_title1 {
     font-weight: bold;
}
.cms_5-c .box_txt1::before {
    color: rgba(0,0,0,0.7);
}

/* ----------　下層ページ　---------- */
#page_title .title_box {
    border-color: #272727;
}
#page_title .title_box p{
    color: #daa521;
    font-weight: bold;
}
#cms_5-c .box_title1 {
    font-weight: bold;
}
#cms_5-c .box_txt1::before {
    color: rgba(0,0,0,0.7);
}
#page8 .tyuui{
        text-align: center;
    font-size: 18px;
    font-weight: bold;
    margin-top: 10px;
    color: #d33232;
        letter-spacing: 3px;
}
#page10 .btn a:hover {
    background-color: #daa521;
    color: #404040;
}

/* ----------　IE　---------- */
@media all and (-ms-high-contrast: none){
  .sample{

  }
}

/* ----------　タブレット　---------- */
@media screen and (max-width: 768px){
#logo div.logo {
    top: 50%;
    left: 20px;
    transform: translateY(-50%);
    max-width: 130px;
width: 90%!important;
}
#main_img:before {
    height: 150px;
    top: 60%;
    background-position: center;
}
#top_contents2 .con_box .text_box {
    padding-top: 5%;
    padding-bottom: 90px;
}
#top_contents2 .con_box:first-child .text_box:before {
    top: auto;
    bottom: 0;
}
#top_contact_box .top .box {
    width: 100%!important;
}
#top_contact_box .bottom .box {
    width: 100%!important;
}
#top_contact_box .bottom .box .btn_wrap{
    width: 90%!important;
}
.l-gh__scrollnav-pagetop-text {
    color: #272727!important;
    font-weight: bold;
}
.l-gh__scrollnav-pagetop-arr .head {
    border-bottom: 4.5px solid #272727;
}
.pagetop_active.pagetop_active .l-gh__scrollnav-pagetop-arr .head {
    border-bottom: 4.5px solid #272727;
}
.pagetop_active.pagetop_active .l-gh__scrollnav-pagetop-text {
    color: #272727!important;
}

}


/* ----------　スマホ　---------- */
@media screen and (max-width: 667px){
#top_contents1 {
    padding-top: 90px;
}
#top_contents1:before {
    width: 90%;
    height: 50px;
    font-size: 40px;
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate( 0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    top: 20px;
    left: 5%;
    text-align: center;
}
#top_contents1 .catch_txt h2{
    font-size: -webkit-calc(1rem + 2px);
    font-size: calc(1rem + 2px);
    text-align: left;
    line-height: 2;
}
#top_contents1 .catch_txt p {
    line-height: 2;
}
#top_contents2 .con_box .text_box {
    padding-bottom: 70px;
}
#top_contents2 .con_box:first-child .text_box:before {
    height: 60px;
right:10px;
    font-size: 35px;
}
#top_contents2 .con_box:last-of-type .text_box:before{
    height: 60px;
right:10px;
    font-size: 35px;
}
#top_contents2 .con_box .text_box h2 {
    font-size: -webkit-calc(1rem + 4px);
    font-size: calc(1rem + 4px);
}
#top_contact_box .top{
width: 100%;
}
#top_contact_box .top .box {
    padding-top: 30px;
    padding-bottom: 30px;
}
#top_contact_box .bottom{
width: 100%;
}
#top_contact_box .bottom .box .btn_wrap {
    width: 100%!important;
}
#page8 #contact_tel a{
padding: 20px;
    font-size: -webkit-calc(1rem + 5px);
    font-size: calc(1rem + 5px);
}
#copyright{
font-size: -webkit-calc(1rem - 3px);
    font-size: calc(1rem - 3px);
}
}