@charset "UTF-8";



* {
/*
border: 1px dotted #0af;
*/
}

body {
	margin: 0px;
	padding: 0px;
	background: linear-gradient(180deg, #ffffff 0%, #ffffff 10%, #eeeeee 20%, #dddddd 50%, #eeeeee 100%);
	background-attachment: fixed;
}

#wrapper {
	width: 98%;
}

.container {
	margin: 0px 0px 0px 200px;
	padding: 25px 5px 50px 5px;
	border-right: 1px dotted #888;
	border-left: 1px dotted #888;
}

h1 {
	margin: 0px 0px 50px 0px;
	padding: 40px 10px 40px 25px;
	font-weight: normal;
	color: #000;
	font-size: 1.6rem;
	border: dotted 1px #ccc;
}

.index h1 {
	margin: 0px 0px 0px 0px;
	padding: 25px 0px 15px 30px;
	font-size: 1.8rem;
	color: #fff;
	border: none;
}

.outline h1 {
	color: #fff;
	text-shadow: 1px 1px 5px #000;
	background: #eff5f5 url(images/top_image.jpg) no-repeat left top;
}

.performance h1 {
	text-shadow: 0px 0px 2px #fff;
	background: #fff url(images/stairway.png) no-repeat left center;
}

.diary h1,
.oldDiary h1,
.inquiry h1 {
	background: #f8f8f8 url(images/banner_image.jpg) no-repeat left bottom;
}

.diary a.linkBtn,
.oldDiary a.linkBtn {
	display: block;
	margin: 0px 0px 0px 0px;
	color: #555;
	font-size: 1.2rem;
	text-align: center;
	text-decoration: none;
}

h2 {
	margin: 50px 0px 10px 0px;
	padding: 7px 0px 7px 10px;
	font-size: 1.4rem;
	color: #eee;
	background: #7d7d7d url(images/dt_bg.jpg) repeat-x;
	border-left: 3px solid #cc0;
}

.outline h2 {
	margin: 30px 0px 30px 0px;
}

h3 {
	margin: 20px 0px 10px 10px;
	font-size: 1.35rem;
	color: #000;
	font-weight: bold;
}

.oldDiary h3 {
	margin: 50px 0px 10px 0px;
	padding: 0px 0px 3px 10px;
	font-size: 1.35rem;
	font-weight: bold;
	color: #777;
	border-bottom: 1px dotted #aaa;
}

h4 {
	margin: 40px 0px 10px 10px;
	font-size: 1.35rem;
	color: #000;
	font-weight: bold;
}

p {
	width: 90%;
	max-width: 910px;
	margin: 0px 0px 0px 10px;
	padding: 0px 0px 0px 0px;
	font-size: 1.3rem;
	line-height: 2.0;
	color: #333;
}

.outline p.client span {
	white-space: nowrap;
}



.outline dl {
	margin: 0px 0px 30px 0px;
	padding: 0px 0px 0px 0px;
	font-size: 1.3rem;
	line-height: 1,8;
	color: #333;
}

.outline dt {
	font-weight: bold;
	float: left;
	color: #333;
	padding: 0px 0px 0px 10px;
	margin: 0px 0px 10px 0px;
}

.outline dd {
	margin-left: 8em;
	width: 84%;
	max-width: 800px;
}





/*制作実績*/
.performance .works {
	display: flex;
	flex-wrap: wrap;
	justify-content: left;
	gap: 1em;
	margin: 0px 0px 0px 0px;
	padding: 20px 0px 0px 20px;
	background: #7d7d7d url(images/dt_bg.jpg) repeat-x;
	background: linear-gradient(180deg, #7d7d7d 0%, #3d3d3d 10%, #4d4d4d 60%, #606060 100%);
}

.performance .works.mark {
	background: linear-gradient(180deg, #ffffff 0%, #f5f5f5 10%, #f0f0f0 60%, #fcfcfc 100%);
	background: #ffffff;
}

.performance .works dl {
	margin: 0px 50px 50px 0px;
	padding: 0px 0px 0px 0px;
}

/*ウェブの間隔*/
.performance .works.web dl {
	margin: 0px 50px 40px 0px;
	padding: 0px 0px 0px 14px;
	border-left: 1px solid #777;
}

/*パンフの間隔*/
.performance .works.leaf dl {
	margin: 0px 30px 50px 0px;
}

/*会社案内の間隔*/
.performance .works.company dl {
	margin: 0px 40px 50px 0px;
}

/*POPの間隔*/
.performance .works.pop dl {
	margin: 0px 20px 30px 0px;
}

/*ロゴ*/
.performance .works.mark dl {
	margin: 0px 20px 30px 0px;
}

/* 2つ並び */
.performance .works dt.double {
	white-space: nowrap;
}

/* 表紙の右アキ */
.performance .works dt.double img.cover {
	margin: 0px 5px 0px 0px;
}

/*連続もの*/
.performance .works.leaf dl.group,
.performance .works.company dl.group {
	margin: 0px 5px 50px 0px;
}

/*奇数だけ下げる
.performance .works dl:nth-child(2n) {
	margin: 20px 25px 30px 0px;
}
*/

/*作品タイトル*/
.performance .works dd {
	max-width: 280px;
	margin: 12px 0px 0px 0px;
	padding: 0px 0px 0px 10px;
	color: #ccc;
	font-size: 1.25rem;
	line-height: 1.4;
	border-left: 4px solid #aaa;
	white-space: normal;
}

/*ロゴ作品タイトル*/
.performance .works.mark dd {
	color: #777;
	border-left: 4px solid #aaa;
}

/*説明文*/
.performance .works dd.descript {
	margin: 12px 0px 0px 0px;
	padding: 0px 0px 0px 12px;
	color: #ccc;
	font-size: 1.15rem;
	line-height: 1.6;
	border: none;
	white-space: normal;
}

/*説明文ながい*/
.performance .works dd.descript.long {
	max-width: 780px;
}

/*リンク表示部*/
.performance .works.web dd a,
.performance .works.pop dd a {
	padding: 0px 0px 0px 4px;
	color: #ddc;
	line-height: 2.0;
	text-decoration: none;
}

/*写真の枠*/
.performance .works dt img {
	border: 1px solid #777;
}

/*ロゴの枠*/
.performance .works.mark dt {
	display: grid;
	place-items: center;
	height: 170px;
	padding: 0px 20px 0px 20px;
	border: 1px solid #ddd;
}

/*ロゴ横長*/
.performance .works.mark dt.landscape {
	height: 120px;
}

/*ロゴ縦長*/
.performance .works.mark dt.portrait {
	height: 170px;
}

/*枠なし*/
.performance .works dt img.noframe {
	border: none;
}

/*ウェブ写真*/
.performance .web dt img {
	height: 100%;
	max-height: 260px;
}

/*写真 h240*/
.performance .works dt img.h240 {
	height: 100%;
	max-height: 240px;
}

/*写真 h220*/
.performance .works dt img.h220 {
	height: 100%;
	max-height: 220px;
}

/*写真 h200*/
.performance .works dt img.h200 {
	height: 100%;
	max-height: 200px;
}

/*写真 H180*/
.performance .works dt img.h180 {
	height: 100%;
	max-height: 180px;
}

/*写真 H150*/
.performance .works dt img.h150 {
	height: 100%;
	max-height: 150px;
}

/*写真 H80*/
.performance .works dt img.h80 {
	height: 100%;
	max-height: 80px;
}

/*写真 H60*/
.performance .works dt img.h60 {
	height: 100%;
	max-height: 60px;
}





.diary pre {
	margin: 10px 0px 10px 10px;
	font-size: 1.3rem;
	line-height: 1.4;
	color: #222;
}



.diary .totop {
	font-size: 1.2rem;
	text-align: right;
	margin: 50px 10px 10px 0px;
}

.diary .bg {
	background-color: #888;
	padding: 2px 10px;
}

.diary .totop a {
	color: #eee;
	text-decoration: none;
}

.diary .totop a:hover {
	color: #fff;
}




.mailform {
	margin: 10px 0px 0px 0px;
	padding: 10px 1px 20px 20px;
	font-size: 1.3rem;
	color: #333;
	background: #faf3f5;
	border: 1px solid #fdd;
}

form {
	max-width: 700px;
}

.mailform dl {
	display: table;
	width: 100%;
	margin: 0px 0px 15px 0px;
	padding: 0px 0px 0px 0px;
/*
	border: 1px dashed #00f;
*/
}

.mailform dl dt {
	display: table-cell;
	width: 8em;
	vertical-align: middle;
	padding: 0px 0px 0px 0px;
}

.mailform dl dd {
	display: table-cell;
	vertical-align: middle;
	padding: 0px 0px 0px 0px;
}

.mailform input,
.mailform textarea {
	width: 98%;
	padding: 1% 1% 1% 1%;
	font-size: 1.4rem;
	border: 1px solid #d5d5d5;
}

.mailform textarea {
	height: 10em;
}

.mailform dl dt span {
	font-size: 1.2rem;
	color: #f00;
}

.mailform p.notice {
	margin: 50px 0px 30px 0px;
	padding: 0px 0px 0px 0px;
	font-size: 1.2rem;
	line-height: 1.6;
	color: #f56;
}

.mailform input.mainBtn {
	width: 8em;
	padding: 3px;
	font-size: 1.4rem;
}





.menu {
	position: fixed;
	top: 25px;
	left: 1px;
	width: 141px;
	color: #fff;
	background: #7d7d7d url(images/menu_bg.jpg) repeat-x;
	line-height: 2;
}

.menu .companyName {
	margin: 0px 0px 0px 0px;
	padding: 25px 0px 15px 30px;
	font-size: 1.8rem;
	line-height: 1.0;
	font-weight: normal;
}


.menu ul {
	margin: 0px 0px 20px 0px;
	padding: 0px 0px 0px 30px;
}

.menu ul li {
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	list-style: none;
	font-size: 1.3rem;
}

.menu ul li.child {
	margin: 0px 0px 0px 10px;
	font-size: 1.2rem;
}

.menu ul li a {
	color: #ccc;
	text-decoration: none;
}

.menu ul li a:hover {
	color: #fff;
}

.menu ul li .stay {
	color: #ffc;
}

.menu ul li .active {
	padding: 0px 0px 0px 4px;
	color: #ffa;
	text-shadow: 1px 1px 2px #000;
	border-left: 3px solid #c93;
}





/*Page topへ*/ 

#page-top {
	position: fixed;
	bottom: 50px;
	right: 50px;
	z-index: 200;
	text-align: center;
}

#page-top a {
	display: block;
	padding: 8px 8px 8px 8px;
	color: #555;
	background: rgb(255, 255, 255, 0.5);
	font-size: 1.2rem;
	line-height: 1.4;
	text-decoration: none;
	border: 1px solid #aaa;
	border-radius: 10px;
}

#page-top a:hover{
	background: rgb(255, 255, 255, 0.9);
}





p.footer {
	width: 98%;
	max-width: 98%;
	margin: 50px 0px 0px 5px;
	padding: 20px 0px 0px 0px;
	font-family: Verdana;
	color: #888;
	font-size: 1.2rem;
	line-height: 1.5;
	border-top: 1px dotted #aaa;
}

.index p.footer {
	border: none;
}

p.footer span {
	font-size: 1.1rem;
	color: #aaa;
	line-height: 1.2;
}










/*______________________________
801px以上の画面　スマートフォン用コンテンツの非表示*/

.sm {
	display: none;
}





/*______________________________
800px以下の画面*/
@media only screen and (max-width: 800px){



	*, 
	*:before,
	*:after {
		-webkit-box-sizing: border-box;
		box-sizing: border-box
	}

	.sm {
	display: block;
	}

	.pc {
		display: none;
	}

	#wrapper {
		width: 100%;
		margin: 0px;
		padding: 0px;
	}

	.container {
		width: 100%;
		margin: 0px;
		padding: 2% 1% 3% 1%;
		border: none;
	}

/*ぺーじ頭のもじ*/
	.smMenu {
		padding: 5px 5px 0px 0px;
		text-align: right;
		font-size: 1.6rem;
	}

	.smMenu a {
		display: block;
		color: #555;
		text-decoration: none;
	}

	.companylogo img {
		margin: -10px 0px 0px 0px;
		padding: 0px 8px 2px 0px;
		vertical-align: middle;
}

	.companylogo {
		margin: -10px 0px 5px 0px;
		padding: 0px 0px 0px 0px;
		font-size: 1.6rem;
	}

	h1 {
		margin: 0px 0px 20px 0px;
		padding: 40px 10px 40px 25px;
	}

	p {
		width: 96%;
		max-width: 96%;
		margin: 0px 0px 0px 0px;
		padding: 0% 2% 0% 2%;
		font-size: 1.3rem;
		line-height: 2.0;
		color: #333;
	}

	.outline dt {
		float: none;
		color: #333;
		padding: 0px 0px 0px 10px;
		margin: 0px 0px 5px 0px;
	}

	.outline dd {
		margin-left: 1em;
		width: 96%;
		max-width: 96%;
	}





	.menu {
		position: relative;
		width: 99%;
		margin: 0%;
		padding: 0%;
		color: #fff;
		background: #7d7d7d url(images/menu_bg.jpg) repeat-x;
		line-height: 2;
	}

	.menu .companyName {
		display: none;
	}

	.menu ul {
		padding: 10px 0px 10px 0px;
		margin: 0px 0px 0px 0px;
	}

	.menu ul li {
		margin: 0px 0px 0px 0px;
		padding: 7px 0px 7px 20px;
		list-style: none;
		font-size: 1.3rem;
		border-top: 1px solid #555;
	}

	.menu ul li:first-child {
		border-top: none;
	}

	.menu ul li.child {
		border-top: none;
	}

	.index .menu ul li {
		border: none;
	}

	.menu ul li a {
		display: block;
	}

	.menu ul li .active {
		padding: 0px 0px 0px 0px;
		color: #ccc;
		text-shadow: none;
		border-left: none;
	}



	p.footer {
		margin: 50px 0px 0px 10px;
	}





	.performance .works {
		display: block;
		padding: 10px 10px 10px 10px;
		text-align: center;
	}


/*間隔*/
	.performance .works.web dl,
	.performance .works.leaf dl,
	.performance .works dl {
		width: 96%;
		margin: 0px auto 50px auto;
		padding: 0px 0px 0px 0px;
/*
		border: 1px dashed #5af;
*/
	}

	.performance .works dl dt img {
		margin: 0px 0px 0px 0px;
		padding: 0px 0px 0px 0px;
	}

	/* 2つ並び */
	.performance .works dl dt.double {
		max-width: 100%;
		padding: 0% 0% 0% 0%;
		white-space: normal;
	}

	/* 表紙の右アキ */
	.performance .works dt.double img.cover {
		margin: 0px 5px 0px 0px;
	}

	/*写真を左右幅以内に*/
	.performance .works dl dt img,
	.performance .works dl dt.double img,
	.performance .works.pop dl dt img,
	.performance .works dt img.h240,
	.performance .works dt img.h220,
	.performance .works dt img.h200,
	.performance .works dt img.h180,
	.performance .works dt img.h150 {
		max-width: 100%;
		height: auto;
	}

	/*説明文*/
	.performance .works dd {
		max-width: 100%;
		margin: 8px 0px 0px 5px;
		text-align: left;
	}

	.performance .works dd.descript {
		max-width: 100%;
		margin: 8px 0px 0px 5px;
		white-space: normal;
	}

	.performance .works dd.descript.long {
		max-width: 100%;
	}





	.diary img,
	.old_diary img {
		display: block;
		max-width: 100%;
		height: auto;
	}





	.mailform dl {
		display: block;
		width: 96%;
		max-width: 700px;
		margin: 0px 0px 15px 0px;
		padding: 0px 0px 0px 0px;
	}

	.mailform dl dt {
		display: block;
		width: 8em;
		vertical-align: middle;
		padding: 0px 0px 0px 0px;
	}

	.mailform dl dd {
		display: block;
		vertical-align: middle;
		padding: 0px 0px 0px 0px;
	}



}