@charset "UTF-8";

/*--------------------
	全体
--------------------*/
html{
	overflow-y: scroll;
	height: 100%;
	font-size: 62.5%;/*-- 16pxを10pxに変更 --*/
}
body{
	font-family: /*--"游明朝 Medium",  "BIZ UDゴシック", --*/"ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "游ゴシック Medium",YuGothic, "游ゴシック体", "Yu Gothic", "メイリオ", Meiryo, Calibri, Arial, sans-serif;
	font-weight: 500;
	background-color: #FFFEF8;
	color: #244040;
	font-size: 1.6rem;/*-- 16px --*/
	letter-spacing: 0.05em;
	font-feature-settings: "palt" 1 ;
	height: 100%;
	margin: 0 auto;
	padding: 0;
	-webkit-text-size-adjust: 100%;
}
p{
	line-height: 1.95em;
	padding: 0;
	margin: 1.0em 0;
}
img{
	border: 0;
	margin: 0;
	max-width: 100%;
	height: auto;
	vertical-align:top;
}
a:link{
	color: #0014E0;
}
a:visited{
	color: #7900C0;
}
table{
	border-collapse: collapse;
	width: 100%;
	margin: 24px 0 36px 0;
	padding: 0;
}
caption{
	font-size: 1.7rem;
	font-weight: bold;
	padding: 6px 0;
}
th,td{
	border-bottom: #C7C3BD 1px solid;
	text-align: left;
	padding: 6px 16px;
}
th{
	font-weight: normal;
	background: #F5F1E6;
}
th.t_top{
	border-top: #0094c8 4px solid;
}
td.t_top,th.t_top2,th.t_top3{
	border-top: #9C9694 4px solid;
}
ul,ol,dl{
	margin: 0;
}
li,dd,dt{
	padding: 0.2em 0;
	line-height: 1.95em;
}
.no_listmark{
	list-style-type: none;
	padding-left: 0;
}
ul a,ol a{
	text-decoration: none;
}
ul a:hover,ol a:hover{
	text-decoration: underline;
}
.right-justified{
	text-align: right;
}
.floatclear{
	clear: both;
}
/*-- 基本的な横幅設定 --*/
@media screen and (min-width: 980px) {
	body,header,footer{
		width: 980px;
	}
	#content{
		width: 680px;
	}
	#sidebar{
		width: 260px;
		margin-right: 40px;
	}
}
@media screen and (max-width: 979px) {
	body,header,footer{
		width: 680px;
	}
	#sidebar{
		width: 680px; 
	}
}
@media screen and (max-width: 679px) {
	body, header, footer{
		width: auto;
	}
	#content{
		width: auto;
	}
	#sidebar{
		width: auto;
	}
}
/*--------------------
	HEADER
--------------------*/
header{
	padding-top: 48px;
	margin-bottom: 48px;
}
#officelogo{
	float: left;
	padding: 0 0 28px 16px;
}
#officelogo img,#top_menu img{
	height: 50px;
}
#top_menu{
	float: right;
	padding: 0 16px 28px 0;
}
#top_menu li{
	padding: 0;
}
ol.pankuzulist{
	clear: both;
	font-size: 1.4rem;
	list-style-type: none;
	padding: 6px 16px;
	border-top: solid 1px #779090;
}
ol.pankuzulist li{
	display: inline;
	padding-left: 8px;
}
ol.pankuzulist li:first-of-type{
	background: url(icon/home_pankuzu.gif) no-repeat left;
	padding-left: 24px;
	padding-top: 8px;
}
ol.pankuzulist li a{
	background: url(icon/arrow_next.gif) no-repeat right;
	padding-right: 18px;
}
@media screen and (min-width: 980px) {
}
@media screen and (max-width: 979px) {
}
@media screen and (max-width: 679px) {
	#officelogo{
		width: 100%;
		padding: 0;
		text-align: center;
	}
	#top_menu{
		width: 100%;
		padding: 32px 0;
		text-align: center;
	}
	ol.pankuzulist{
		border-top: none;
	}
}
/*--------------------
	CONTENT
--------------------*/
#content{
	float:right;
	padding-bottom: 72px;
}
h1{
	font-size: 3.2rem;
	font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif;
	font-weight: bold;
	padding: 0;
	margin: 0 0 48px 0;
}
h2{
	font-size: 2.4rem;
	font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif;
	font-weight: bold;
	padding: 0 0 0.1em 0.6em;
	margin: 80px 0 36px 0;
	border-bottom: 1px solid #223a70;
}
h3{
	font-weight: bold;
	font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif;
	font-size: 2.0rem;
	padding: 0 0 0 1.0em;
	border-left: 6px solid #0094c8;/*-- 9DC700 --*/
	margin: 80px 0 36px 16px;
}
h4{
	font-weight:bold;
	font-size: 1.8rem;
	padding: 0 0 0.1em 1em;
	margin: 48px 0 24px 0;
	border-bottom: solid 1px #223a70;
}
h5{
	font-weight: bold;
	font-size: 1.8rem;
	padding: 0.22em 2.0em;
	margin: 48px 0 24px 0;
	border-bottom: dotted 1px #223a70;
}
blockquote{
	border:dashed 1px #9DC700;
	padding: 12px 16px 12px 0;
}
ul.toc li,ol.toc li{
	line-height: 1.6em;
}
/*--　テキストの装飾　--*/
.boldface{
	font-weight: bold;
}
.big-letters{
	font-size: 1.8rem;
}
.color-boldface{
	color: #164382;
	font-weight: bold;
}
.caution{
	color: #ea5506;
}
.updating{
	color: #ea5506;
	padding-left: 64px;
}
.spacer{
	margin-bottom: 4em;
}
.large-letters-mincho{
	font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif;
	font-size: 2.2rem;
	font-weight: bold;
	padding-left: 0.2em;
}
.large-letters-number li::marker{
	font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif;
	font-size: 2.2rem;
	font-weight: bold;
}
/*--　テキスト頭のアイコン　--*/
a.outbound_link{
	background: url(icon/ext-link-icon.png) no-repeat left;
	padding-left: 24px;
	margin-left: 8px;
}
a.pagetop{
	background: url(icon/arrow_top.gif) no-repeat left;
	padding-left: 16px;
	margin-left:4px;
}
a.prev_page{
	background: url(icon/arrow_before.gif) no-repeat left;
	padding-left: 16px;
	margin-left:4px;
}
.prev-page{
	background: url(icon/arrow-prev.gif) no-repeat left;
	padding-top: 0px;
	padding-left: 24px;
	margin-left:8px;
}
.next-page{
	background: url(icon/arrow-next.gif) no-repeat left;
	padding-top: 0px;
	padding-left: 24px;
	margin-left:8px;
}
.release{
	background: url(icon/release.png) no-repeat left;
	padding-top: 2px;
	padding-left: 32px;
	margin-right: 60px;
}
.modified{
	background: url(icon/update.png) no-repeat left;
	padding-top: 2px;
	padding-left: 32px;
}
/*--　画像のサイズや表示位置など　--*/
.image{
	text-align: center;
}
.image img{
	margin: 16px 0 24px 0;
}
.illustration{
	float: right;
}
.illustration img{
	margin: 0 0 4px 12px;
}
.max-width{
	width: 100%;
}
.half-width{
	width: 50%;
}
.yokonarabi dl{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}
.yokonarabi dt{
	width: 20%;
	margin: 0;
}
.yokonarabi dd{
	width: 80%;
	margin: 0;
}
span.retu1{
	float: left;
}
span.retu2{
	display: block;
	margin-left: 180px;
}
.piece{
	clear: both;
	min-height: 160px;
	padding: 0;
	margin: 0 0 48px 0;
}
.piece .eye-catch img{
	float: left;
	margin-right: 20px;
	width: 259px;
}
.piece p{
	line-height: 1.6em;
	margin: 0 0 0.6em 0;
}
.tile-s{
	width: 216px;
	height: 216px;
	float: left;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 16px;
}
.tile{
	width: 216px;
	height: 216px;
	float: left;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 16px;
	margin-left: 16px;
}
.eye-catch2{
	height: 216px;
	margin: 0;
	padding: 0;
}
.headline{
	margin-bottom:0;
}
.headline a{
	font-size: 1.9rem;/*-- 19px --*/
	color: #38a1db;
	text-decoration: none;
	font-weight: bold;
}
.headline a:hover{
	color: #387BD9;
}
.mark-the-dates{
	margin-bottom:36px;
}
.item{
	clear: both;
	padding-bottom: 36px;
}
.icon img{
	float: left;
	height: 48px;
	padding-right: 32px;
}
@media screen and (min-width: 680px) {
}
@media screen and (max-width: 679px) {
	.tile-s{
		width: 28vw;
		height: 28vw;
	}
	.tile{
		width: 28vw;
		height: 28vw;
		margin-left: 10px;
	}
	.eye-catch2 img{
		max-height: 28vw;
	}
	.eye-catch2{
		height: 28vw;
	}
	p.clear{
		clear: both;
	}
}
.comment{
	clear: both;
	border: solid 1px #165e83;
	border-radius: 12px;
	padding: 32px 16px 0 16px;
	margin-top: 36px;
	margin-bottom: 36px;
	position: relative;
}
.comment-title {
	position: absolute;
	display: inline-block;
	top: -1px;
	left: -1px;
	font-size: 1.8rem;
	padding: 0.25em 1.5em;
	line-height: 28px;
	vertical-align: middle;
	border-radius: 12px 0 12px 0;
	background: #165e83;
	color: #FFFEF6;
	font-weight: bold;
}
.aside{
	margin-top: 48px;
	margin-bottom: 48px;
}
.aside-title{
	font-size: 1.8rem;
	font-weight: bold;
}
.next-icon{
	text-align: center;
	margin: 36px;
}
.end-of-chapter-nav{
	padding-top: 12px;
	text-align: right;
}
.end-of-chapter-nav a{
	text-decoration: none;
}
.lfloat{
	float: left;
	margin-right: 16px;
}
.rfloat{
	clear: both;
	float: right;
	margin-left: 16px;
}
/*-- contact内のtableのデザイン変更用（ココから） --*/
table#form{
	margin-top: 48px;
	width: 100%;
}
#form th{
	background: #FFFEF8;
	font-weight: bold;
	text-align: right;
}
#form th,#form td{
	padding: 16px 6px;
	border-bottom: #C7C3BD 1px solid;
}
input.form-text,textarea{
	width: 100%;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
  }
.necessary{
	padding: 3px 8px;
	border: #e83929 1px solid;
	color: #e83929;
	border-radius: 5px;
	font-weight: bold;
	font-size: 1.3rem;
}
.arbitrary{
	padding: 3px 8px;
	border: #00A0A0 1px solid;
	color: #00A0A0;
	border-radius: 5px;
	font-weight: bold;
	font-size: 1.3rem;
}
#form th{
	width: 22%;
}
.necessity{
	width: 10%;
}
.inputarea{
	width: 63%;
}
.form-text{
	padding: 8px;
    border-radius: 5px;
    border: 1px solid #aaa;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}
.form-textarea{
	padding: 8px;
    border-radius: 5px;
    border: 1px solid #aaa;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}
.contact-submit{
	width: 250px;
	background-color: #0094c8;
	color: #FFFEF8;
	font-weight: bold;
	display: block;
	margin: 0 auto;
	font-size: 1.8rem;
	padding: 12px;
	border-radius: 12px;
	border: none;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	cursor: pointer; 
}
/*-- topic内のtableのデザイン変更用（ココから） --*/
.zenwaku{
	table-layout: fixed;
}
.zenwaku th,.zenwaku td{
	border-top: #C7C3BD 1px solid;
	border-right: #C7C3BD 1px solid;
	border-bottom: #C7C3BD 1px solid;
}
.zenwaku th.t_top,.zenwaku th.t_top3{
	border-top: #0094c8 4px solid;
}
.zenwaku td.t_top,.zenwaku th.t_top2{
	border-top: #9C9694 4px solid;
}
.zenwaku .t_top{
	width: 23%;
}
.zenwaku .t_top3{
	width: 14%;
}
.zenwaku .t_top2,.zenwaku td{
	text-align: center;
}
.region{
	font-size: 1.3rem;
}
.standard{
	border-top: #9C9694 2px solid;
}
.applicable{
	background-color: #DCFFDC;
}
.cool_region{
	background-color: #DCEBFF;
}
.hot_region{
	background-color: #FFEBDC;
}
.decoration4{
	font-weight: bold;
}
/*-- topic内のtableのデザイン変更用（ココまで） --*/
@media screen and (max-width: 979px) {
	#content{
		border-bottom: solid 1px #779090;
	}
}
@media screen and (max-width: 679px) {
	#content{
		padding: 0 12px 48px 12px;
	}
	.lfloat,.rfloat,.profile{
		float: none;
		margin: 0;
	}
	.necessary{
		padding: 3px 4px;
		border: 0;
	}
	.arbitrary{
		padding: 3px 4px;
		border: 0;
	}
}
/*--------------------
	SIDEBAR
--------------------*/
#sidebar{
	float: left;
	padding-bottom: 72px;
}
.mainmenu{
	margin: 0;
}
.mainmenu ul{
	margin: 0;
	padding: 0;
	font-size: 1.7rem;
	list-style-type: none;
}
.mainmenu ul li{
	padding: 4px 0;
}
.mainmenu li a,.mainmenu .current{
	display: block;
	margin-left: 0;
	padding: 2px 10px;
}
.mainmenu li a{
	font-weight: bold;
	text-decoration: none;
}
.mainmenu a,.mainmenu a:visited{
	color: #244040;
}
.mainmenu a:hover{
	color: #2ca9e1;
}
.mainmenu .current{
	font-weight: bold;
	color: #508C8C;
}
#conduct-sns{
	padding-top: 24px;
}
#conduct-blog ul,#conduct-sns ul{
	padding: 0;
}
#conduct-blog li{
	display: block;
	display: inline;
}
.link_banner img{
	height: 44px;
	padding: 10px;
}
@media screen and (min-width: 980px) {
	.mainmenu ul{
		padding: 0 0 36px 0;
	}
	.mainmenu a{
		border-left: solid 6px transparent;
	}
	.mainmenu a:hover{
		border-left: solid 6px #0094c8;
	}
	.mainmenu .current{
		border-left: solid 6px #508C8C;
	}
}
@media screen and (max-width: 979px) {
	#sidebar{
		padding-bottom: 24px;
	}
	.mainmenu li{
		width: 320px;
		display: inline-block;
		padding: 0 0;
		margin: 4px 0;
	}
	.mainmenu,#conduct-blog{
		display: none;
	}
}
@media screen and (max-width: 679px) {
	#sidebar ul{
		padding: 0 0;
	}
	.mainmenu{
		padding: 16px 0;
	}
	.mainmenu li{
		width: 100%;
		margin-top: 16px;
	}
	.field{
		margin: 0 12px;
	}
	.eye-catch{
		width: 40%;
	}
	.eye-catch img{
		height: 40%;
	}
}
/*--------------------
	FOOTER
--------------------*/
footer{
	clear: both;
	margin-top: 100px;
	padding-top: 24px;
	border-top: solid 1px #779090;
}
address{
	float: left;
	font-weight: bold;
	font-style: normal;
}
address span{
	font-size: 1.4rem;/*-- 14px --*/
	font-weight: normal;
}
.footer-navi{
	float: right;
	padding-right: 60px;
	margin-bottom: 24px;
	border-left: solid 1px #779090;
}
.footer-navi ul{
	float: left;
	list-style-type: none;
	margin: 0;
	padding: 0 0 12px 60px;
	font-weight: normal;
	font-size: 1.4rem;/*-- 14px --*/
}
.footer-navi li a{
	text-decoration: none;
	color: #244040;
}
.footer-navi li a:hover{
	text-decoration: underline;
	color: #2ca9e1;
}
.copyright{
	clear: both;
	float: right;
	padding-bottom: 12px;
}
small{
	font-weight: bold;
}
@media screen and (min-width: 980px) {
}
@media screen and (max-width: 979px) {
	footer{
		border-top: 0px;
	}
	address,.copyright,.footer-navi{
		padding: 0 16px;
	}
	.footer-navi ul{
		margin: 0;
		padding: 0 0 12px 16px;
	}
	.footer-navi a{
		font-size: 1.6rem;
		font-weight: bold;
	}
}
@media screen and (max-width: 679px) {
	.footer-navi{
		float: left;
		border-left: 0px;
	}
	address{
		float: right;
	}
	.footer-navi ul{
		float: none;
		padding: 0 0 0 16px;
	}
}
/*--------------------
	HOMEPAGE
--------------------*/
h1.home{
	font-size: 1.6rem;
	margin: 0;
}
h2.home{
	border: none;
}
#slideshow{
	position: relative;
	width: 680px;
	height: 454px;
	margin: auto;
	padding-bottom: 24px;
}
#slideshow img{
	animation-name: album;
	-webkit-animation-name: album;
	animation-duration: 24s;
	-webkit-animation-duration: 24s;
	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
	opacity: 0;
}
#slideshow #photo1 {
	display: block;
	margin: 0 auto;
}
#slideshow #photo2 {
	animation-delay: 6s;
	-webkit-animation-delay: 6s;
	position: absolute;
	top: 0;
	left: 0;
}
#slideshow #photo3 {
	animation-delay: 12s;
	-webkit-animation-delay: 12s;
	position: absolute;
	top: 0;
	left: 0;
}
#slideshow #photo4 {
	animation-delay: 18s;
	-webkit-animation-delay: 18s;
	position: absolute;
	top: 0;
	left: 0;
}
@keyframes album {
	0% {
		opacity: 0;
	}
	7% {
		opacity: 1;
	}
	25% {
		opacity: 1;
	}
	32% {
		opacity: 0;
	}
	100% {
		opacity: 0;
	}
}
.signature{
	text-align: right;
}
#conduct-sns img{
	width: 29px;
	height: 29px;
	padding: 10px;
}
#conduct-sns li{
	display: block;
	display: inline;
}
@media screen and (max-width: 679px) {
	#slideshow{
		margin-top: -48px;
		padding-bottom: 8px;
		width: auto;
		height: auto;
	}
}
/*--------------------
	お問い合わせ
--------------------*/
.means{
	font-size: 1.6rem;/*-- 16pxのまま --*/
	font-weight: bold;
	color: #165e83;
}
.detail{
	font-size: 1.8rem;/*-- 20px --*/
	font-weight: bold;
}
/*--------------------
	設計事例
--------------------*/
/*-- 作品集の画像処理用 --*/
ul.picture{
	list-style-type: none;
	overflow: hidden;
	padding: 0;
}
ul.picture li{
	padding: 0;
	float: left;
}
.picture img{
	width: 120px;
	height: 120px;
	margin-right: 16px;
	margin-bottom: 16px;
}
img.gray {
	-webkit-filter: grayscale(100%);
	-moz-filter: grayscale(100%);
	-ms-filter: grayscale(100%);
	-o-filter: grayscale(100%);
	filter: grayscale(100%);
	opacity: 0.7;
}
.featured_img{
	width: 680px;
	margin-bottom: 24px;
	text-align:center;
}
.featured_img img{
	vertical-align:top;
}
.picture li:last-of-type{
  margin-right: 0;
}
.picture li{
	border: solid 0 #000;
	}
/*-- 作品集の画像処理用（ココまで） --*/
@media screen and (min-width: 680px) {
}
@media screen and (max-width: 679px) {
	.featured_img{
	width: 100%;
	height: auto;
	}
}