/*
Theme Name: Yuiworks
Text Domain: yuiworks
Version: 1.0
Description: Our default theme for 2020 is designed to take full advantage of the flexibility of the block editor. Organizations and businesses have the ability to create dynamic landing pages with endless layouts using the group and column blocks. The centered content column and fine-tuned typography also makes it perfect for traditional blogs. Complete editor styles give you a good idea of what your content will look like, even before you publish. You can give your site a personal touch by changing the background colors and the accent color in the Customizer. The colors of all elements on your site are automatically calculated based on the colors you pick, ensuring a high, accessible color contrast for your visitors.
Tags: blog, one-column, custom-background, custom-colors, custom-logo, custom-menu, editor-style, featured-images, footer-widgets, full-width-template, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready, block-styles, wide-blocks, accessibility-ready
Author: the WordPress team
Author URI: https://wordpress.org/
Theme URI: https://wordpress.org/themes/twentytwenty/
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html

All files, unless otherwise stated, are released under the GNU General Public
License version 2.0 (http://www.gnu.org/licenses/gpl-2.0.html)

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned
with others.
*/

@import 'https://fonts.googleapis.com/css?family=Comfortaa:300,400,700&subset=cyrillic,cyrillic-ext,latin-ext';

*{
	font-family: 'Noto Serif JP', serif;
	list-style-type: none;
	padding: 0;
	margin: 0;

}

body {
    font-family: 'Avenir', 'Helvetica Neue', 'Helvetica', 'Arial', 'Hiragino Sans', 'ヒラギノ角ゴシック', YuGothic, 'Yu Gothic', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic';
    word-break: break-all;
	box-sizing : border-box;
}
html {
	/*overflow-x: hidden;*/
}

a:hover {
  color: #4169e1;
}

header{
	width: 100%;
}

.header_image{
	height: 60vh;
	background-attachment: fixed;
	background-size: cover;
	background-position: bottom;
	background-repeat: no-repeat;
}

.logo {
	width:100px;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 1;
}
.logo a:link,
.logo a:visited{
	color: #fff;
}
.logo a:hover,
.logo a:active {
  color: #87cefa;
}

.site-title{
	position: relative;
}

.header_txt{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	background-color: rgba(255,255,255,0.50);
	padding:20px;
	font-size: 4em;
}

img.btn_img{
	width:60%;
}

/** Topイメージ **/
.top{
	text-align: center;
	padding: 52px 10px 150px 10px;
	position: relative;
}
.top h1{
	margin-bottom: 50px;
}
.top .txt1{
	margin-bottom: 50px;
	font-size: 2em;
}
.top-txt{
	width: 100%; /*absoluteで位置を設定するときに、幅と高さは必ず必要*/
	text-align: center;

	/*位置の設定 - 上下中央寄せ*/
	position: absolute;
	margin: auto;
	top: 52px;
	left: 0;	
}

/** 背景画像 **/
.top-img{
	background: center no-repeat url(../images/top_logo.png);
	background-size: auto 200px;
	opacity:0.3;
	height:200px;
}

/** キャッチコピー **/
.top-catchcopy1,
.top-catchcopy2,
.top-catchcopy3{
	display: inline-block;
	padding:20px;
	width:240px;
	height:280px;
	vertical-align: top
}
.top-catchcopy1 img,
.top-catchcopy2 img,
.top-catchcopy3 img{
	margin:20px 0;
	width:120px;
}

.catchcopy-txt{
	text-align:left;
	line-height:1.5em;
}
/*
.work {
	margin-bottom:100px;
}
.work_l{
	width:49%;
	display: inline-block;
	vertical-align: top;
	margin-left:20px;
	text-align:center;
	font-size: 130%;
	padding-top:30px;
}
.work_r{
	width:49%;
	display: inline-block;
}
*/
.work_label{
	text-align: center;
	margin-bottom: 100px;
}
/*
.work_img{
	height:170px;
}

.reform,
.interior_work,
.design,
.sell {
	overflow: hidden;
	position: relative;
	width:400px;
}

.caption {
	font-size:	130%;
	text-align: center;
	padding-top: 80px;
	color: #fff;
}
.reform .caption {
	font-size:	130%;
	text-align: center;
	padding-top: 60px;
	color: #fff;
}
.mask {
	width: 400px;
	height:	 100%;
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	background-color:	rgba(0,0,0,0.4);
	-webkit-transition:	all 0.2s ease;
	transition: all 0.2s ease;
}
.reform:hover .mask,
.interior_work:hover .mask,
.design:hover .mask,
.sell:hover .mask
{
	opacity: 1;
}
*/

/** 新築建設・リフォーム・リノベーション **/
.reform{
	width: 80%;
	text-align: right;
	margin: 0 0 100px auto;
	position:relative;
}
.reform .work_img{
	width: 100%;
}
.reform_label{
	position:absolute;
	width:40%;
	bottom: 16%;
	right:30%;
}
.reform_btn{
	position:absolute;
	bottom:10%;
	right:6%;
}

/** 内装工事 **/
/*
.interior_work{
	width: 80%;
	position:relative;
	text-align: left;
	margin: 0 0 100px 0;
}
.interior_work .work_img{
	width: 100%;
}
.interior_work_label{
	position:absolute;
	width:40%;
	bottom: 16%;
	left:30%;
}
.interior_work_btn{
	position:absolute;
	bottom:10%;
	left:6%;
}
*/
/** 内装デザイン **/
.design{
	width: 80%;
	/*text-align: right;*/
	text-align: left;
	position:relative;
	margin: 0 0 100px 0;
}
.design .work_img{
	width: 100%;
}
.design_label{
	position:absolute;
	width:40%;
	bottom: 16%;
	/*right:30%;*/
	left:30%;

}
.design_btn{
	position:absolute;
	bottom:10%;
	/*right:6%;*/
	left:6%;

}

/** 新築建設 **/
/*
.architecture{
	position:relative;
}
.architecture .work_img{
}
.architecture_label{
	position:absolute;
	width:40%;
	bottom: 17%;
	left:30%;
}
.architecture_btn{
	position:absolute;
	bottom:10%;
	left:6%;
}
*/

/** 資材販売 **/
.sell{
	width: 80%;
	position:relative;
	/*text-align: left;*/
	text-align: right;
	margin: 0 0 100px auto;
}
.sell .work_img{
	width: 100%;
}
.sell_label{
	position:absolute;
	width:40%;
	bottom: 14%;
	/*left:30%;*/
	right:30%;

}
.sell_btn{
	position:absolute;
	bottom:10%;
	/*left:6%;*/
	right:6%;

}



/** お知らせ **/
.news {
	display: block;
	/*width:90%;*/
	width: 990px;
	margin: 0 auto;
	margin-bottom: 100px;
}
.news_label{
	text-align: center;
	display: inline-block;
	padding: 0px 100px;
/*
	height: 240px;
	line-height: 240px;
*/
	height: 400px;
	line-height: 400px;
	vertical-align: top;
	width:200px;
}
.news_list{
	display: inline-block;
	/*width:600px;*/
}
.news_list li{
	height: 60px;
	line-height: 60px;
	margin-bottom: 20px;
}
.news_list .news_category{
	display:inline-block;
	width: 150px;
	text-align: center;
	/*border-left: 10px solid #F4EE54;*/
	border-left: 10px solid #ccc;
	vertical-align: middle;
}
.news_list .news_date{
	display:inline-block;
	width: 150px;
	text-align: center;
	vertical-align: middle;
}
.news_list .news_title{
	display:inline-block;
	width: 250px;
	vertical-align: middle;
}
.news_list a:link,
.news_list a:visited{
	color: #000;
}
.news_list a:hover,
.news_list a:active {
  color: #6495ed;
}
.news .news_readmore{
	margin-top: 30px;
}

.news_list .category1{
	border-left: 10px solid #ccc;
}
.news_list .category2{
	border-left: 10px solid #7fff7f;
}
.news_list .category3{
	border-left: 10px solid #F4EE54;
}

/** 求人 **/
.recruit{
	display: block;
	text-align: center;
	width: 100%;
	height: 500px;
	margin: 0 auto;
	margin-bottom:100px;
}
.recruit h2 {
	padding-top:30px;
	margin-bottom: 100px;
}
.recruit_box{
	width:100%;
}
.recruit .recruit_img{
	display: inline-block;
	width:40%;
}
.recruit .recruit_img img{
	width: 80%;
}
.recruit .recruit_txt{
	display: inline-block;
	width:55%;
	vertical-align: top;
	text-align: left;
}
.recruit .recruit_txt p {
	line-height: 2em;
}
.recruit_link{
	text-align: center;
	padding-top: 100px;
}
.recruit_link .btn_img{
	width: 30%;
}
/** 施工事例(TOP) **/
.result {
	text-align:center;
	margin-bottom: 60px;
}
.result h2 {
	margin-bottom: 100px;
}
.result ul{
	margin-bottom: 40px;
}
.result li {
	display: inline-block;
	margin: 20px;
	border: 1px #000 solid;
}
.result .result_img{
	width: 200px;
}
.result .result_date{
	display: block;
	text-align:left;
	margin-left:10px;
}
.result .result_title{
	display: block;
	padding-bottom: 10px;
}
.result a:link,
.result a:visited{
	color: #000;
}
.result a:hover,
.result a:active {
  color: #6495ed;
}



/** フッター **/
footer{
	width: 100%;
	/*background-color: #707070;*/
	background-color: #b2ffb2;
	/*color: #fff;*/
	position: relative;
}
footer a:link,
footer a:visited{
	/*color: #fff;*/
	color: #000;
}
footer a:hover,
footer a:active {
  color: #87cefa;
}
#pagetop {
	position: fixed;
	width: 50px;
	height: 50px;
	/*background: #0BA35C;*/
	background: #b2ffb2;
	right: 10px;
	bottom: 10px;
	z-index: 99;
	cursor: pointer;
}
#pagetop svg {
	/*fill: #fff;*/
	fill: #7fbfff;
	position: absolute;
	left: 50%;
	top: 16px;
	width: 30px;
	-webkit-transform: translate(-50%, 0);
	transform: translate(-50%, 0);
}
svg:not(:root) {
	overflow: hidden;
}
#pagetop:hover {
	background: #00842c;
}

.footer-inner{
	width: 100%;
	padding:30px;
	box-sizing : border-box;
}
.company{
/*
	max-width: 20%;
	width: 20%;
*/
	max-width: 275px;
	width: 275px;
	display: inline-block;
}
.footer-nav{
	width: 100%;
	display: inline-block;

}

.nav {
	max-width: 10%;
	width: 10%;
	display: inline-block;
	vertical-align: top;
	margin-top: 50px;
	font-size: 10pt;
	padding-left:20px;
	margin-left:12px;
	border-left: 1px solid #fff;
	height: 160px;
}
.nav .clid{
	padding-left:20px;
}

.nav li {
	margin-bottom:10px;
}



.copyright{
	width: 100%;
	text-align: center;
	padding-bottom: 30px;
}
.nav_etc{
	display: block;
	margin-top: 40px;
	font-size: 10pt;
}
.nav_etc p:last-child{
	margin-left: 20px;
}

.nav_etc p{
	display: inline-block;
}







/**
 *  「Read more」のボタン
 */
.panel button {
	color:#454545;
	background:transparent;
	border-width:2px;
	border-style: solid;
	border-color: #454545;
	position:relative;
	margin:1em;
	display:inline-block;
	padding:0.5em 1em;
	transition:all 0.3s ease-in-out;
	text-align:center;
	font-family:comfortaa;
	font-weight:bold;
	height: 45px;
	width: 120px;
	font-size: 11pt;
}
.panel button:before, 
.panel button:after {
	content:'';
	display:block;
	position:absolute;
	border-color:#454545;
	box-sizing:border-box;
	border-style:solid;
	width:1em;
	height:1em;
	transition:all 0.3s ease-in-out
}
.panel button:before {
	top:-6px;
	left:-6px;
	border-width:2px 0 0 2px;
	z-index:5;
}
.panel button:after {
	bottom:-6px;
	right:-6px;
	border-width:0 2px 2px 0;
}
.panel button:hover:before, 
.panel button:hover:after {
	width:calc(100% + 12px);
	height:calc(100% + 12px);
	border-color: #000;
}
.panel button:hover {
	color:#353535;
	background-color:#000;
	border-color:#000;
	color: #fff;

}
.panel {
	max-width:960px;
	text-align:center;
	position:relative;
	margin:auto;
}


/****************************************************
 **
 **  スマートフォン用
 **
 ***************************************************/
@media (max-width: 768px) {
	.logo {
		width:60px;
	}
	.header_image {
		height: 60vh;
		background-attachment: scroll;
		background-size: cover;
		background-position: bottom;
		background-repeat: no-repeat;
	}

	.header_txt {
		font-size: 1em;
	}
	h1 {
		font-size: 1.1em;
		margin: 0.67em 0;
        margin-bottom: 0.67em;
	}
	.top {
		margin-bottom: 50px;
		padding: 52px 10px 0px 10px;
	}
	.top .txt1{
		font-size: 1em;
	}
	.top-img{
		background-size: auto 150px;
		height: 150px;
	}
	.work_label {
		text-align: center;
		margin-bottom: 50px;
	}
	/** 新築建設・リフォーム・リノベーション **/
	.reform {
		width: 100%;
	}
	.reform_label {
		font-size: 0.8em;
		bottom: 10%;
		right: 3%;
		width: 60%;
		text-align: left;
	}
	.reform_btn {
		width: 150px;
		bottom: -70px;
		left: 50%;
		transform: translateX(-50%);
		-webkit-transform: translateX(-50%);
		-ms-transform: translateX(-50%);
	}
	/** 内装工事 **/
	.interior_work {
		width: 100%;
	}
	.interior_work_label {
		font-size: 0.8em;
		bottom: 10%;
		left: 3%;
		width: 60%;
		text-align: left;

	}
	.interior_work_btn {
		width: 150px;
		bottom: -70px;
		left: 50%;
		transform: translateX(-50%);
		-webkit-transform: translateX(-50%);
		-ms-transform: translateX(-50%);
	}
	/** 内装デザイン **/
	.design {
		width: 100%;
	}
	.design_label {
		font-size: 0.8em;
		text-align:left;
		bottom: 10%;
		/*right: 3%;*/
		left: 3%;
		width: 60%;
	}
	.design_btn {
		width: 150px;
		bottom: -70px;
		left: 50%;
		transform: translateX(-50%);
		-webkit-transform: translateX(-50%);
		-ms-transform: translateX(-50%);
	}
	/** 資材販売 **/
	.sell {
		width: 100%;
		margin-bottom: 100px;
	}
	.sell_label {
		font-size: 0.8em;
		bottom: 20px;
		/*left: 3%;*/
		right: 3%;
		width: 65%;
		text-align: left;
	}
	.sell_btn {
		width: 150px;
		bottom: -70px;
		left: 50%;
		transform: translateX(-50%);
		-webkit-transform: translateX(-50%);
		-ms-transform: translateX(-50%);
	}
	/** 新着情報 **/
	.news {
		display: block;
		width: 90%;
		margin: 0 auto;
		margin-bottom: 50px;
		border: 1px solid #000;
	}
	.news_label {
		text-align: center;
		display: inline-block;
		padding: 0;
		height: auto;
		line-height: normal;
		vertical-align: top;
		width: 100%;
	}
	.news_list li {
		height: auto;
		line-height: normal;
		margin-bottom: 20px;
		font-size: 0.8em;
	}
	.news_list .news_category{
		display:inline-block;
		width: auto;
		text-align: center;
		border-left: 10px solid #F4EE54;
		vertical-align: middle;
		margin-left:10px;
	}
	.news_list .news_date{
		display:inline-block;
		width:auto;
		text-align: center;
		vertical-align: middle;
		margin-left:10px;
	}
	.news_list .news_title{
		display:inline-block;
		width: auto;
		vertical-align: middle;
		margin-left:10px;
	}
	.news_list .category1{
		border-left: 10px solid #ccc;
	}
	.news_list .category2{
		border-left: 10px solid #7fff7f;
	}
	.news_list .category3{
		border-left: 10px solid #F4EE54;
	}

	
	/** 採用情報 **/
	.recruit{
		height: auto;
		margin-bottom: 50px;
	}
	.recruit h2 {
		margin-bottom: 50px;
	}
	.recruit .recruit_img {
		display: block;
		width: 100%;
		height: auto;
	}
	.recruit .recruit_txt {
		display: block;
		width: 100%;
		font-size:10pt;
	}
	.recruit_link {
		padding-top: 10px;
	}
	/** 施工実績 **/
	.result h2 {
		margin-bottom: 20px;
	}
	.result ul {
		width: 100%;
	}
	.result li {
		display: block;
		width: 200px;
		margin: 0 auto 20px auto;
	}
	/** フッター **/
	#footer-nav{
		display:-webkit-box;
		display: -webkit-flex;
		display:-ms-flexbox;
		display: flex;
		-webkit-flex-wrap:wrap;
		-ms-flex-wrap:wrap;
		flex-wrap:wrap;
		flex-direction: column;
	}

	#nav01{
		-webkit-box-ordinal-group:1;
		-ms-flex-order:1;
		-webkit-order:1;
		order:1;
	}
	#nav02{
		-webkit-box-ordinal-group:2;
		-ms-flex-order:2;
		-webkit-order:2;
		order:2;
	}
	#nav03{
		-webkit-box-ordinal-group:3;
		-ms-flex-order:3;
		-webkit-order:3;
		order:3;
	}
	#nav04{
		-webkit-box-ordinal-group:4;
		-ms-flex-order:4;
		-webkit-order:4;
		order:4;
	}
	#nav05{
		-webkit-box-ordinal-group:5;
		-ms-flex-order:5;
		-webkit-order:5;
		order:5;
	}
	#nav06{
		-webkit-box-ordinal-group:6;
		-ms-flex-order:6;
		-webkit-order:6;
		order:6;
	}
	.nav_etc{
		-webkit-box-ordinal-group:6;
		-ms-flex-order:6;
		-webkit-order:6;
		order:6;
		margin-top: 0;
	}
	.nav_etc p{
		display: block;
		margin-bottom: 10px;
	}
	.nav_etc p:last-child {
		margin-left: 0;
	}
	.nav_etc01{
		-webkit-box-ordinal-group:7;
		-ms-flex-order:7;
		-webkit-order:7;
		order:7;
		display: inline;
	}
	.nav_etc02{
		-webkit-box-ordinal-group:8;
		-ms-flex-order:8;
		-webkit-order:8;
		order:8;
	}
	.company{
		-webkit-box-ordinal-group:9;
		-ms-flex-order:9;
		-webkit-order:9;
		order:9;
		max-width: 100%;
		width: auto;
		margin-top: 30px
	}
	.nav {
		max-width: 80%;
		width: auto;
		display: inline;
		vertical-align: top;
		margin-top: 50px;
		font-size: 10pt;
		padding: 0;
		margin: 0;
		border-left: none;
		height: auto;
	}
}