/*
Theme Name: 藤装建設株式会社
Description: 
Tags: 

*/

/**
 * 1.0 - Normalize
 *
 * Normalizing styles have been helped along thanks to the fine work of
 * Nicolas Gallagher and Jonathan Neal http://necolas.github.com/normalize.css/
 */

@charset "utf-8";

/* @group Reset */

*{ margin: 0;padding: 0}

a { text-decoration : none; color: #00A6E4; }
a:hover{ text-decoration: underline;}
a:hover img{
	opacity: 0.6;
  	filter: alpha(opacity=60);
  	-ms-filter: "alpha(opacity=60)";
}
ul, ol { list-style : none}
img { vertical-align : middle}

/* @end */

/* @group Fluid-img */
img { max-width : 100%}
/* @end */

/* @group HTML */
html {
font-family: "Noto Sans JP", sans-serif;
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
font-size : 100%; 
line-height : 1.5;
}

body { width: 100%; }
div{width: 100%;}
div img{ width: 100%;}

.font1{
font-family: "Jost", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
letter-spacing: 0.05em}

.font2{
font-family: "Roboto", sans-serif;
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
font-variation-settings:
    "wdth" 100;
}
p.brs{ margin-bottom: 20px; }

/* @end */

/* @group Heading */

h1 {
font-size : 2.25rem; /* 20px */
line-height : 1 /* 20px */ } 

h2 {
font-size : 1em; /* 16px */
line-height : 1.3333 /* 48px */ } 

h3 {
font-size : 0.875em; /* 14px */
line-height : 1; /* 24px */
margin-bottom : 1em } 


main{ display: block; width: 100%; }
.blue{ color: #246AB3}
.btn a{ display: block; background-image:url("../images/arrows.svg"); background-size: 18px; background-position: 85% center; background-repeat: no-repeat; background-color: #265280; padding: 12px 0; text-align: center; color: #fff; font-size: 0.875rem; width: 213px; margin: 30px auto}
.btn a:hover{ text-decoration: none;
opacity: 0.6;
filter: alpha(opacity=60);
-ms-filter: "alpha(opacity=60)";}

/* @end */

/* @group Shear */
.pc{ display:none;}
.sp{ display:inherit; }
.tb{ display: none;}
.tbsp{ display:inherit;}

/*=============
base
==============*/

html, body {
  margin: 0;
  padding: 0;
}
* {
  box-sizing: border-box;
}


/* @group Header */
header{ width: 100%; position: fixed; top:0; z-index: 11; padding: 0; }
header .hgr{ width: 100%; padding: 0; overflow: hidden; margin: 0 auto}
header .hgr nav{ width:40px; float: right; margin-top: 19px; margin-right: 3%; }
header .hgr h1{ width: 218px; float: left; text-align: center; padding: 19px 30px 17px 10px;}
header .hgr h1 span{ display: block; font-size: 1.25rem; letter-spacing: 0.01em; margin-top: 10px}
header .hgr nav .tgm{ padding: 6px 0 0 12px; background: #265280; border-radius: 100px; height: 40px; position: relative; z-index: 3}
header .hgr nav .tgm.active{background: #fff;}
header.change-color,header.under{ background: #fff;}
header.change-color .whlogo{ display: none;}
header.change-color .bklogo{ display: block;}
header .whlogo{ display: block;}
header .bklogo{ display: none;}

/* @group HOME */


/* @group ハンバーガーメニュー */
.menu-trigger,
.menu-trigger span {
  display: inline-block;
  transition: all .4s;
  box-sizing: border-box;
}
.menu-trigger {
  position: relative;
  width: 16px;
  height: 14px;
	z-index: 4
}
.menu-trigger span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #fff;
	border-radius: 100px
}
.tgm.active .menu-trigger span{background-color: #265280;}

.menu-trigger span:nth-of-type(1) {
  top: 0;
}
.menu-trigger span:nth-of-type(2) {
  top: 14px;
}
.menu-trigger span:nth-of-type(3) {
  bottom: 5px;
}

.tgm.active .menu-trigger span:nth-of-type(1) {
  -webkit-transform: translateY(8px) rotate(-45deg);
  transform: translateY(8px) rotate(-45deg);
}
.tgm.active .menu-trigger span:nth-of-type(2) {
  left: 200%;
  opacity: 0;
  -webkit-transform: translateY(10px);
  transform: translateY(10px);
  -webkit-animation: active-menu-bar02 .8s forwards;
  animation: active-menu-bar02 .8s forwards;
}
@-webkit-keyframes active-menu-bar02 {
  100% {
    height: 0;
  }
}
@keyframes active-menu-bar02 {
  100% {
    height: 0;
  }
}
.tgm.active .menu-trigger span:nth-of-type(3) {
  -webkit-transform: translateY(1px) rotate(45deg);
  transform: translateY(1px) rotate(45deg);
}

/* @end */

/* @group ヘッダーメニュー　dropdown-menu */
.smp-dpmenu{ 
	position:fixed; 
	top: 0;
    right: 0;
	bottom: 0;
	width: 50%;
	z-index:2;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	-webkit-transition-duration:1s;
	background-color:rgba(255,255,255,0.7);
	padding:0;
	max-height:0;
	text-align: center; 
	font-size: 0.9375rem;
}
.smp-dpmenu.open{padding:100px 0 0 0; max-height:100%; background: #265280; width: 50%; margin-left: 50%; }
.dropdown-menu{  overflow:hidden; width:100%; height: auto; overflow-y: auto;  }

.dropdown-menu li{ line-height:1em; list-style:none; padding:0 15% 32px; overflow: hidden;  font-weight: 300; text-align: left}
.dropdown-menu li a{display:block; color:#fff;  width:100%; text-decoration: none; text-align: center; border-bottom: 1px solid rgba(103, 134, 166, 1); padding-bottom: 12px}
.dropdown-menu li span{ display: block; font-size: 0.75rem; color: #AAAAAA; margin-top: 5px}
.smp-dpmenu .smp-copy{ font-size: 0.75rem; color: rgba(125, 151, 179, 1); position: absolute; bottom: 42px; text-align: center; width: 100%}

/* @group CONTENTS */
.wrapper{ width: 100%;}
.container{ 
width: 100%; 
padding-top: 50px;
background-image: url("../images/bg1.png");
background-image: image-set(url(../images/bg1.png) 1x, url(../images/bg1@2x.png) 2x);
background-image: -webkit-image-set(url(../images/bg1.png) 1x, url(../images/bg1@2x.png) 2x);
background-size: 100%;
background-repeat: no-repeat;
background-position: top right;
}
.wrapper img{ width: 100%;}
.opening{ width: 93.75%; margin: 0 auto}
.opening h1{ font-size: 1.75rem; font-weight: 400; line-height: 140%; margin-bottom: 30px}
.about{ width: 100%; margin-bottom: 80px}
.bg-w { 
width: 100%; 
background-image: url("../images/bg2.png");
background-image: image-set(url(../images/bg2.png) 1x, url(../images/bg2@2x.png) 2x);
background-image: -webkit-image-set(url(../images/bg2.png) 1x, url(../images/bg2@2x.png) 2x);
background-size: 40%;
background-repeat: no-repeat;
background-position: top left;	}
.about p{ margin: 0 auto 20px; line-height: 210%; width: 93.75%}
.about img{ width: 93.75%; margin: 20px auto}
.about-udn{ padding-bottom: 80px;}
.service{ width: 100%; padding: 80px 3% 80px; text-align: center; background-color:rgba(233,236,242,0.5);}
.service h1{ font-size: 1.75rem; line-height: 100%; font-weight: normal; margin-bottom: 40px}
.service h1 span{ font-size: 1rem; display: block; color: #265280}
.service ul{ width: 64%; margin: 0 auto; overflow: hidden}
.service ul li{ width: 100%; border-radius: 20px; background: #fff; padding: 24px 0; font-size: 1rem; margin-bottom: 12px; font-weight: bold}
.service ul li img{ width: 40px; height: auto; display: block; margin: 0 auto 8px}

.works{ width: 100%; text-align: center; padding: 80px 0; }
.works h1{ font-size: 1.75rem; line-height: 100%; font-weight: normal; margin-bottom: 40px }
.works h1 span{ font-size: 1rem; display: block; color: #265280}
.works .works-list-ov{ width:93.75%; overflow: hidden; overflow-x: scroll; margin: 0 auto; }
.works ul.works-list{ width: 2080px; overflow: hidden; margin: 10px 0}
.works ul.works-list li{ width: 247px; float: left; margin-right: 12px;}
footer{ width: 100%;}
.footer-contents{ 
width: 93.75%;
background-image: url("../images/footer-bg.png");
background-image: image-set(url(../images/footer-bg.png) 1x, url(../images/footer-bg@2x.png) 2x);
background-image: -webkit-image-set(url(../images/footer-bg.png) 1x, url(../images/footer-bg@2x.png) 2x);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
border-radius: 20px;
margin: 0 auto;
padding: 64px 5%;
	}
.footer-contents{ text-align: center}
.footer-contents h1{ font-size: 1.75rem; line-height: 100%; font-weight: normal; margin-bottom: 40px; color: #fff}
.footer-contents h1 span{ font-size: 1rem; display: block; color: rgba(156, 174, 192, 1)}
.footer-contents p{color: #fff; line-height: 180%; margin-bottom: 36px}
.footer-contents .contact-box{ width: 100%; background: #fff; padding: 24px 0; margin-bottom: 24px;}
.footer-contents .contact-box h2{ font-weight: normal; margin-bottom: 20px; font-size: 0.9375rem}
.footer-contents .contact-box h3{ font-size: 2rem; }
.footer-contents .contact-box p{ font-size: 1rem; color: #000; margin-bottom: 0}
.footer-contents .contact-box img{ width: 30px;}
.footer{ width: 93.75%; margin: 60px auto 80px}
.footer .footerdt{ width: 100%; margin-bottom: 60px;}
.footer .footerdt img{ width: 200px;}
.footer .footerdt p{ margin-top: 20px}
.footer .footerdt ul{ width: 100%; overflow: hidden}
.footer .footerdt ul li {list-style: none; display: inline-block}
.footer .footerdt ul li a{ color: #000; font-size: 0.9375rem; float: left; display: block; }
.footer .footerdt ul li::before {
   content: "｜";
   color: #BBBBBB;
	padding: 0 20px
}
.footer .footerdt ul li.last::before{ content: "";}
.footer .footerdt .copy{ font-size: 0.875rem; }

#page_top{
width: 55px;
height: 56px;
position: fixed;
right: 20px;
bottom: 20px;
background: #222222;
z-index: 10;
border-radius: 100px
}
#page_top a{
  position: relative;
  display: block;
	padding: 13px 0 0 19px;
  text-decoration: none;
}
#page_top a:hover{
	opacity: 0.6;
  	filter: alpha(opacity=60);
  	-ms-filter: "alpha(opacity=60)"; }
#page_top a img{ width: 18px;}

/* @group 下層ページ works */
.uheader{ width: 100%; background: #E9ECF2; padding: 40px 0; text-align: center; margin-top: 100px}
.uheader h1{ font-size: 1.75rem; font-weight: 500; line-height: 110%; letter-spacing: 0.1em}
.uheader h1 span{ font-size: 1rem; font-weight: normal; display: block; color: #265280; }
.content{ width: 93.75%; margin: 0 auto}
.breadcrumbs{ width: 100%; text-align: left; padding: 28px 0; margin: 0 auto}
.breadcrumbs ul{ width: 100%; overflow: hidden; }
.breadcrumbs ul li{ float: left; color: #000; margin-right: 9px; font-size: 0.875rem}
.breadcrumbs ul li a{ color: #999999;}
.breadcrumbs ul li::after{
	content: '';
    display: inline-block;
	width: 16px;
	height: 12px;
    background:url("../images/arrows-br.svg") no-repeat right center;
}
.breadcrumbs ul li.last::after{ display: none;}
.workslist-box{ width: 100%; margin: 40px 0; overflow: hidden; overflow-x: scroll; }
.workslist-box h1{ font-size: 1.5625rem; text-align: center; color: #246AB3; font-weight: normal; margin-bottom: 24px;}
.workslist-box .works-exboxlist{ width: 2064px; overflow: hidden; }
.workslist-box .works-exboxlist article{ width: 244px; float: left; margin-right: 16px; margin-bottom: 10px}
.workslist-box .works-exboxlist article:last-child{ margin-right: 0;}
.workslist-box .works-exboxlist article p{ text-align: center; margin: 10px 0; font-size: 0.875rem; color: #265280; font-weight: 500; line-height: 110%}
.workslist-box .works-exboxlist article p span{ color: rgba(38, 82, 128, 0.6); display: block; font-size: 0.75rem}
.workslist-box .works-exboxlist article .ovmask{
  position: relative;
  display: inline-block;
}
.workslist-box .works-exboxlist article .ovmask::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color:rgba(36, 106, 179, 0.8);
}
.workslist-box .works-exboxlist article a{ width: 100%; display:block; }
.workslist-box .works-exboxlist article a:hover{ background:rgba(36, 106, 179, 0.9);}
.works-contents{ width: 100%; padding: 64px 0; border-top:1px solid #BCBCBC; margin-bottom: 120px}
.works-contents h1{ font-size: 2rem; font-weight: 600; margin-bottom: 10px; line-height: 110%}
.works-contents h2{ font-size: 1rem; margin-bottom: 20px; font-weight: normal}
.works-contents p{ font-size: 1rem; margin-bottom: 44px; height: 50px}
.works-contents img{ margin-bottom: 20px; width: 100%;}

/* @group 下層ページ company */
.company-list{ margin-bottom: 80px;}
.company-list table{ width: 100%;}
.company-list table th,.company-list table td{padding: 16px 12px; text-align: left; border-bottom: 1px solid #E6E6E6; font-weight: normal; width: 100%; display: block}
.company-list table th{ border-bottom: 1px dotted #E6E6E6; font-weight: 500}
.company-list h1{ text-align: center; color: #246AB3; font-size: 1.5625rem; margin-bottom: 32px; font-weight: 500}



/*768px*/

@media screen and (min-width : 768px){
	
	.pc{ display:inherit;}
	.sp{ display:none; }
	.tb{ display:none; }
	.tbsp{ display:inherit;}
	.container{ background: none;}
	.bg-w { background-size: 30%;}
	
	/* @group 下層ページ works */
	
	/* @group 下層ページ company */
	.company-list table{ width: 100%; display:table; border-collapse:collapse;}
	.company-list table th,.company-list table td{display: table-cell}
	.company-list table th{width: 30%; border-bottom: 1px solid #E6E6E6;}
	.company-list table td{ width: 70%;}
}

/*1024px*/ 
@media screen and (min-width : 1024px) {
	
.pc{ display:inherit;}
.sp{ display:none; }
.tb{ display:inherit;}
.tbsp{ display:none;}
p.brs{ margin-bottom: 0;}
.about p.brs{ margin-bottom: 0;}
	
/* @group Header */
header{ width: 100%; }
header .hgr{ width:96%; padding: 0 ; overflow: hidden; margin: 21px 2% 15px }
header .hgr h1{ width: 220px; float: left; margin-top: 0; padding: 0;}
header .hgr .head-menu-sub{ width: 50%; text-align: left; float: right}
header .hgr .head-menu-sub .head-sub-left ul{ overflow: inherit; }
header .hgr .head-menu-sub .head-sub-left ul li{ float: right; margin-left: 32px; font-size: 1rem; letter-spacing: 4%; margin-top: 13px }
header .hgr .head-menu-sub .head-sub-left ul li:last-child{ margin-left: 0}
header .hgr .head-menu-sub .head-sub-left ul li a{ color: #000; padding-bottom: 10px; display: block}
header .hgr .head-menu-sub .head-sub-left ul li a:hover{ text-decoration: none; color: #265280; border-bottom: 2px solid #265280; font-weight: 500}
header .hgr .head-menu-sub .head-sub-left ul li.ov a{ text-decoration: none; color: #265280; border-bottom: 2px solid #265280; font-weight: 500}
header .hgr .head-menu-sub .head-sub-left ul li.contact{margin-top: 0}
header .hgr .head-menu-sub .head-sub-left ul li.contact a { background: #265280; color: #fff; padding: 12px 16px; display: block; }
header .hgr .head-menu-sub .head-sub-left ul li.contact a:hover{border-bottom: none; background: rgba(38, 82, 128, 0.8);}

	
/* @group CONTENTS */
.container{ width: 100%; }
.opening{ width: 90%; margin: 0 auto}
.opening h1{display: none}
.container{ 
background-image: url("../images/bg2.png");
background-image: image-set(url(../images/bg2.png) 1x, url(../images/bg2@2x.png) 2x);
background-image: -webkit-image-set(url(../images/bg2.png) 1x, url(../images/bg2@2x.png) 2x);
background-size: 20%;
background-repeat: no-repeat;
background-position: top left;}
.about{ 
background-image: url("../images/about-bg.png");
background-image: image-set(url(../images/about-bg.png) 1x, url(../images/about-bg@2x.png) 2x);
background-image: -webkit-image-set(url(../images/about-bg.png) 1x, url(../images/about-bg@2x.png) 2x);
background-size: 100%;
background-repeat: no-repeat;
background-position: top left;
margin: 0 auto;
padding-bottom: 125px;
width: 1024px;
}
.about p{ width: 500px; margin: 0 auto 20px; line-height: 250%}
.about p.brs{ margin-bottom: 0}
.bg-w { background: none}
.service ul{ width: 820px; margin: 0 auto; overflow: hidden}
.service ul li{ width: 260px; float: left; margin-right: 20px; height: 144px; margin-bottom: 20px}
.service ul li:nth-child(3n){ margin-right: 0;}
	
.works{ width: 100%; text-align: left; padding: 80px 0 80px 10%; }
.works .works-titlebox{ width: 30%; float: left;}
.works .works-titlebox .btn a{ padding: 12px 0; margin: 30px 0}
.works h1{ font-size: 1.75rem; line-height: 100%; font-weight: normal; margin-bottom: 40px; margin-top: 175px }
.works h1 span{ font-size: 1rem; display: block; color: #265280}
.works .works-list-ov{ width:70%; overflow: hidden; overflow-x: scroll; margin: 0 auto; }
.works ul.works-list{ width: 2080px; overflow: hidden; margin: 10px 0}
.works ul.works-list li{ width: 247px; float: left; margin-right: 13px;}
	
.footer-contents .contact{ width: 818px; display: flex; margin: 0 auto}	
.footer-contents .contact-box{ width: 397px; float: left; margin-right: 24px; margin-bottom: 0;}
.footer-contents .contact-box h3{ margin-bottom: 16px;}
.footer{ width: 1024px; margin: 60px auto 80px; overflow: hidden}
.footer .footerdt{ width: 50%; margin-bottom: 0; float: left}
.footer .rightbox{ width: 308px; float: right}
.footer .footerdt ul li.last::before{padding: 0}
.footer .footerdt .copy{ margin-top: 110px }

/* @group 下層ページ works */
.content{ width: 1024px; margin: 0 auto}
.workslist-box{overflow-x:visible; }
.workslist-box .works-exboxlist{ width: 1024px; overflow: hidden; }
.workslist-box .works-exboxlist article{ width: 244px; float: left; margin-right: 16px; margin-bottom: 10px; }
.workslist-box .works-exboxlist article:nth-child(2n){ margin-right: 16px;}
.workslist-box .works-exboxlist article:nth-child(3n){ margin-right: 16px;}
.workslist-box .works-exboxlist article:nth-child(4n){ margin-right: 0;}
.workslist-box .works-exboxlist article p{ height: 50px}
.works-contents .contents-img{ width: 676px; margin: 0 auto}

/* @group 下層ページ company */
.company-list{ margin-bottom: 120px}
.company-list table{ width: 720px; margin: 40px auto 0; font-size: 1rem; line-height: 160%; letter-spacing: 0.1em}
.company-list table th{width: 140px; border-bottom: 1px solid #E6E6E6;}
.company-list table td{ width: 580px;}

}