@charset "utf-8";
/* ===================================
GRAPHIC WALL
Service Style Sheet
First Update  2017-08-15
Last Update   2020-10-22
Creat by Basic Plus Design Inc.
=================================== */

/* ===========================================================
 service/index.html
=========================================================== */

/* -----------------------------------------------------------
   main area base
----------------------------------------------------------- */

#service.main h1 {
	background-image: url(../images/service/symbol_wall.png);
	margin-bottom: 3em;
	white-space: nowrap;
	text-indent: 100%;
	overflow: hidden;
}

#service.main .content {
	padding: 3em 2em
}

#service .catalog {
	margin-top: 5em;
}

/* -----------------------------------------------------------
	 main area base MediaQuery
----------------------------------------------------------- */

@media screen and (min-width: 769px) {
	#service.main .content {
		padding: 5em 0;
	}
}

/* ===========================================================
 service/wall.html
=========================================================== */

#wall.main .content {
	padding: 3em 2em
}

#wall.main h2.content-name {
	white-space: nowrap;
	text-indent: 100%;
	overflow: hidden;
	line-height: 0;
	height: 0;
}

#wall #title-part {
	background-image: url(../images/service/wall_title_bg.jpg);
}

#wall #title-part h1 {
	border: 1px solid #393b39;
}

#wall #title-part p {
	background-image: url(../images/service/wall_title.png);
	max-width: 280px;
}

#wall .wall-outline p:nth-of-type(2) {
	margin-top: 2em;
	margin-bottom: 3em
}

#wall .wall-point div {
	margin-bottom: 3em;
}

#wall .wall-point h3 {
	display: block;
	margin-left: 90px;
	padding: 0 0.1em 0 0.5em;
	height: 60px;
	box-sizing: border-box;
	position: relative;
	background-color: #efb81b;
	color: #FFF;
	font-weight: bold;
}

#wall .wall-point h3:before {
	content: "";
	background-position: top left;
	background-repeat: no-repeat;
	display: block;
	height: 70px;
	width: 90px;
	position: absolute;
	bottom: 0;
	left: -90px;
}

#wall .wall-point h3 span {
	display: inline-block;
	line-height: 1.4;
	position: relative;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}

#wall .wall-point div:nth-of-type(1) h3:before {
	background-image: url(../images/service/ico_ruler.png);
}

#wall .wall-point div:nth-of-type(2) h3:before {
	background-image: url(../images/service/ico_paper.png);
}

#wall .wall-point div:nth-of-type(3) h3:before {
	background-image: url(../images/service/ico_earth.png);
}

#wall .wall-point p {
	margin-top: 1em;
	padding-left: 60px;
}

#wall .wall-sean {
	background-color: #f0efef;
	padding: 15px;
	position: relative;
}

#wall .wall-sean:before {
	content: url(../images/service/ico_example.png);
	display: block;
	position: absolute;
	left: -9px;
	width: 92px;
	height: 37px;
}

#wall .wall-sean h3 {
	white-space: nowrap;
	text-indent: 100%;
	overflow: hidden;
	display: inline-block;
	width: 80px;
	height: 55px;
	float: left
}

#wall .wall-sean p {
	margin-bottom: 0.5em;
}

#wall .wall-sean div {
	clear: both;
}

#wall .wall-sean img {
	margin-bottom: 0.5em;
	width: 100%;
}

#wall .full {
	margin-top: 2em;
	margin-bottom: 2em;
	clear: both;
}

#wall .easy h3,
#wall .full h3 {
	display: block;
	background-position: top left;
	background-repeat: no-repeat;
	min-height: 60px;
	vertical-align: middle;
	white-space: nowrap;
	text-indent: 100%;
	overflow: hidden;
	margin-right: 1em;
	margin-bottom: 1em;
}

#wall .easy h3 {
	width: 175px;
	background-image: url(../images/service/title_easy.png);
}

#wall .full h3 {
	width: 145px;
	background-image: url(../images/service/title_full.png)
}

#wall .easy span {
	color: #f0aa1c;
	font-weight: bold;
}

#wall .full span {
	color: #db533b;
	font-weight: bold;
}

#wall .easy p,
#wall .full p {
	margin-top: 2em;
}

/* wall-sample*/
#wall .wall-sample {
	margin-top: 60px;
}

#wall .wall-sample h2 {
	padding: 1em 0;
	font-weight: 900;
	font-size: 12rem;
	font-size: 1.2em;
	font-family: "Noto Sans Japanese";
}

#wall .wall-sample h2 span {
	color: #fff;
	font-weight: 700;
}

#wall .sample_photo {
	display: flex;
	flex-flow: column wrap;
}

#wall .sample_photo div {
	width: 100%;
	max-width: 260px;
	margin: 20px auto;
}

#wall .sample_photo2 {
	position: relative;
	margin-bottom: 70px;
}

#wall .sample_photo2::before {
	content: "";
	display: block;
	width: 100%;
	height: 1px;
	border-top: 1px solid #000;
	position: absolute;
	top: 15px;
	left: 0;
}

#wall .sample_photo2::after {
	content: "";
	display: block;
	width: 100%;
	height: 1px;
	border-top: 1px solid #000;
	position: absolute;
	bottom: 0;
	left: 0;
}

#wall .sample_photo2 h2 {
	display: block;
	width: 16em;
	height: 34px;
	background: #3a3b39;
	line-height: .3;
	text-align: center;
	margin: 40px auto 20px;
	position: relative;
}

#wall .sample_photo2 h2::before {
	content: "";
	width: 24px;
	height: 24px;
	background: #3a3b39;
	transform: rotate(-45deg);
	position: absolute;
	top: 5px;
	left: -12px;
	z-index: 1;
}

#wall .sample_photo2 h2::after {
	content: "";
	width: 24px;
	height: 24px;
	background: #3a3b39;
	transform: rotate(-45deg);
	position: absolute;
	top: 5px;
	right: -12px;
	z-index: 1;
}

#wall .easy_price {
	background: #fceed2;
	padding: 20px;
	margin: 60px 0 70px;
}

#wall .easy_price div {
	background: #fff;
	color: #fff;
	font-size: 11rem;
	font-size: 1.1em;
	font-weight: 500;
	padding: 20px;
	margin: 15px 0 30px;
}

#wall .easy_price div h3 {
	color: #f0aa1d;
	font-size: 11rem;
	font-size: 1.1em;
	font-weight: 500;
}

#wall .easy_price div p {
	width: 100%;
	max-width: 200px;
	margin: auto;
}

#wall .easy_price div p span {
	display: inline-block;
	width: 100%;
	font-size: 11rem;
	font-size: 1.1em;
	padding: 100px 0 20px;
	text-align: center;
	position: relative;
}

#wall .easy_price div p span:nth-of-type(1) {
	background: #f0aa1d url(../images/service/ico_wallpaper.png) no-repeat center top 25px/58px auto;
	margin: 40px 0 30px;
}

#wall .easy_price div p span:nth-of-type(2) {
	background: url(../images/service/ico_plus.png) no-repeat center top 20px/38px auto;
	padding: 20px 0;
	text-indent: 200%;
	white-space: nowrap;
	overflow: hidden;
}

#wall .easy_price div p span:nth-of-type(3) {
	background: #f0aa1d url(../images/service/ico_builder.png) no-repeat center top 25px/58px auto;
	margin: 30px 0 20px;
}

#wall .easy_price div p span:nth-of-type(1)::after,
#wall .easy_price div p span:nth-of-type(3)::after {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	border-right: 2px solid #f0aa1d;
	border-bottom: 2px solid #f0aa1d;
	position: absolute;
	bottom: -7px;
	right: -7px;
}

/* easy-catalog */

#wall .easy-catalog {
	margin-top: 2em;
	background-color: #393b39;
	padding: 1em 0 1em 1em;
	color: #FFF;
}

#wall .easy-catalog h4 {
	background: url(../images/service/easy-catalog-ttl.png) no-repeat center left;
	padding-left: 170px;
	display: inline-block;
	width: 30%x;
	height: 40px;
	line-height: 60px;
	vertical-align: bottom;
	font-weight: bold;
	font-size: 10rem;
	font-size: 1.0em;
	margin-bottom: 1em;
}

#wall .easy-catalog h5 {
	font-weight: bold;
	padding: 0.5em 0 0.3em 0;
	font-size: 12rem;
	font-size: 1.2em;
}

#wall .easy-catalog p {
	line-height: 1.5;
	padding-right: 1em;
}

#wall .easy-catalog .request {
	color: #393b39;
	margin-top: 1em;
}

#wall .easy-catalog .request span:first-child {
	font-size: 7rem;
	font-size: 0.7em;
	display: inline-block;
	float: left;
	line-height: 1.3;
	padding: 5px;
	padding-left: 8em;
	margin-bottom: 1em;
	background-color: #FFF;
	position: relative;
}

#wall .easy-catalog .request span:first-child:before {
	content: url(../images/service/easy-catalog.png);
	position: absolute;
	top: -0.3em;
	left: -0.5em;
	display: block;
}

#wall .easy-catalog .ico_letter {
	display: inline-block;
	margin: 0;
	border-left: 1px solid #393b39;
}

#wall .easy-catalog .ico_letter a {
	color: #393b39;
	background-color: #FFF;
	padding: 7px 3em 8px 0.5em;
	font-weight: bolder;
	background-color: #fff;
	background-position: right 0.5em center;
	background-repeat: no-repeat;
	display: block;
	opacity: 1;
}

#wall .easy-catalog .ico_letter a {
	background-image: url(../images/service/ico_letter.png);
}

#wall .easy-catalog .ico_letter a:hover {
	opacity: 0.7;
	transition: 0.3s;
}


#wall .easy-catalog .link_set {
	/*text-align:center; clear:both; padding-top:2%;*/
}

#wall .easy-catalog .link_set div {
	background-color: #ffdf00;
	width: 30%;
	margin-left: 3%;
	/*float:left;
				display: block;
				line-height:0;
				position:relative;
				overflow: hidden;
					*/
}

#wall .easy-catalog .link_set div:first-child {
	margin-left: 0%;
}

#wall .easy-catalog .link_set div:hover:before {
	color: #393b39;
	/*position:absolute;
					top:0;
					bottom:0;
					left:0;
					right:0;
					margin:auto;
					width:100%;
					height:0;
					font-weight:bolder;*/
}

#wall .easy-catalog .link_set.second div:nth-of-type(1):hover:before {
	content: "写真";
}

#wall .easy-catalog .link_set.second div:nth-of-type(2):hover:before {
	content: "パターン";
}

#wall .easy-catalog .link_set.second div:nth-of-type(3):hover:before {
	content: "イラスト";
}

#wall .easy-catalog .link_set div img {
	/*width:100%;
				height:auto;*/
}

#wall .easy-catalog .link_set div img:hover {
	/*-moz-transform: scale(1.1,1.1);
				  -webkit-transform: scale(1.1,1.1);
				  -o-transform: scale(1.1,1.1);
				  -ms-transform: scale(1.1,1.1);*/
}

#wall .easy-option {
	margin-top: 2em;
	margin-bottom: 6em;
	padding: 1.5em 1.5em 0.8em 1.5em;
	background-color: #fceed1;
}

#wall .easy-option h4 {
	display: block;
	background: url(../images/service/easy-option.png) no-repeat top left;
	min-height: 32px;
	white-space: nowrap;
	text-indent: 100%;
	overflow: hidden;
	margin-bottom: 1em;
}

#wall .easy-option p {
	margin-bottom: 1em
}

#wall .easy-option li {
	float: left;
	width: 32%;
	margin-left: 2%;
}

#wall .easy-option li:first-child {
	margin-left: 0;
}

#wall .full-option {
	padding: 1em;
	background-color: #f5e3db;
}

#wall .full-option h4 {
	margin-top: 0.2em;
	margin-bottom: 0.5em
}

#wall .full-option p.notice {
	font-size: 7rem;
	font-size: 0.7em;
	border-top: 1px solid #393b39;
	padding-top: 1em;
	margin-top: 1em;
}

/* -----------------------------------------------------------
	 service/wall.html MediaQuery
----------------------------------------------------------- */
@media screen and (min-width: 640px) {
	#wall .wall-sean img {
		margin-bottom: 1em;
	}

	#wall .wall-sample .sample_photo {
		flex-flow: row wrap;
	}

	#wall .wall-sample .sample_photo div {
		width: calc(100% / 3);
		max-width: calc(100% / 3);
		text-align: center;
	}

	#wall .wall-sample .sample_photo div img {
		width: 95%;
	}

	#wall .wall-sample .sample_photo div:nth-child(1) {
		text-align: left;
	}

	#wall .wall-sample .sample_photo div:nth-child(3) {
		text-align: right;
	}

	#wall .wall-sample .sample_photo2 .sample_photo {
		margin-top: -15px;
	}

	#wall .easy_price div {
		padding: 20px 30px;
	}

	#wall .easy_price div p {
		max-width: 100%;
	}

	#wall .easy_price div p span:nth-of-type(1) {
		width: 45%;
		background-position: left 12% center;
		background-size: 48px auto;
		padding: 20px 20px 20px 15%;
		text-align: left;
	}

	#wall .easy_price div p span:nth-of-type(2) {
		width: 10%;
		background-position: left 66% bottom;
		background-size: 30px auto;
		margin-bottom: -10px;
		text-align: center;
	}

	#wall .easy_price div p span:nth-of-type(3) {
		width: 45%;
		background-position: left 20% center;
		background-size: 48px auto;
		padding: 20px 0 20px 50px;
	}
}


@media screen and (min-width: 769px) {

	#wall.main .content {
		padding: 5em 0;
	}

	#wall .wall-point div {
		padding: 0 2em;
	}

	#wall .wall-point div:first-child {
		border-left: 1px solid #393b39;
		border-right: 1px solid #393b39;
	}

	#wall .wall-point div:last-child {
		border-left: 1px solid #393b39;
		border-right: 1px solid #393b39;
	}

	#wall .wall-point h3 {
		font-size: 10rem;
		font-size: 1.0em;
		padding-right: 5px
	}

	#wall .wall-point p {
		padding-left: 0px;
		font-size: 9rem;
		font-size: 0.9em;
	}

	#wall .wall-sean img {
		float: left;
		max-width: 450px;
		width: 49%;
	}

	#wall .wall-sean img:first-child {
		margin-right: 2%;
	}

	#wall .easy,
	#wall .full {
		background-position: top left;
		background-repeat: no-repeat;
		padding-left: 350px;
		min-height: 460px;
	}

	#wall .easy {
		background-image: url(../images/service/bg_easy.png);
	}

	#wall .full {
		background-image: url(../images/service/bg_full.png)
	}

	#wall .easy h3,
	#wall .full h3 {
		display: inline-block;
		margin-bottom: 0;
	}

	#wall .easy-catalog {
		padding: 1em 0 1em 0em;
	}

	#wall .easy-catalog h4 {
		margin-left: 2em;
	}

	#wall .easy-catalog p {
		margin-left: 2em;
	}

	#wall .easy-catalog .request span:first-child {
		padding: 6px 0 7px 8em;
		margin-bottom: 0;
	}

	#wall .full-option {
		background: url(../images/service/full-option_bg.png) no-repeat left 1em top 1em;
		background-color: #f5e3db;
	}

	#wall .full-option h4 {
		padding-left: 150px;
	}

	#wall .full-option p.text {
		padding-left: 150px;
		min-height: 100px;
	}

	#wall .full-option p.notice {
		margin-top: 0em;
	}
}

@media screen and (min-width: 960px) {
	#wall .easy_price div {
		padding: 30px 50px 40px;
	}

	#wall .easy_price div h3 {
		margin-bottom: 0;
	}

	#wall .easy_price div p span:nth-of-type(1),
	#wall .easy_price div p span:nth-of-type(3) {
		width: 326px;
		margin: 0;
	}

	#wall .easy_price div p span:nth-of-type(2) {
		width: calc(100% - 652px);
		background-position: center bottom;
	}
}

@media screen and (min-width: 1000px) {
	#wall.main {
		padding-top: 116px;
	}
}

/* ===========================================================
 service/carpet.html
=========================================================== */
#carpet.main .content {
	padding: 3em 2em
}

#carpet.main h2.content-name {
	white-space: nowrap;
	text-indent: 100%;
	overflow: hidden;
	line-height: 0;
	height: 0;
}

#carpet #title-part {
	background-image: url(../images/service/carpet_title_bg.jpg);
}

#carpet #title-part h1 {
	background: url(../images/service/print_title_moyou.png) no-repeat center;
	line-height: 1.3;
}

#carpet #title-part p {
	background-image: url(../images/service/carpet_title.png);
	max-width: 250px;
}

#carpet.main h3 {
	margin-bottom: 0.5em;
}

#carpet.main h4 {
	margin-bottom: 0.5em;
}

#carpet .outline {
	margin-bottom: 2em;
}

#carpet .nemoto {
	margin-bottom: 2em;
}

#carpet .nemoto span {
	display: block;
	margin-bottom: 0.5em;
}

#carpet .carpet-works {
	border: 1px solid #393b39;
	padding: 1em;
	margin-bottom: 2em;
}

#carpet .carpet-works .works2 {
	margin-top: 2em;
}

#carpet .carpet-works h3 {
	border-bottom: 1px solid #393b39;
	padding-bottom: 0.5em;
}

#carpet .carpet-works p span {
	display: block;
	margin: 0.5em 0;
}

#carpet .variety {
	margin-bottom: 2em;
}

#carpet .variety li {
	background-color: #d8efef;
	margin-bottom: 1em;
	line-height: 0;
}

#carpet .variety h3 {
	color: #64c1bf;
	background-repeat: no-repeat;
	background-position: top 1em left;
	background-size: 180px 36px;
	height: 55px;
	white-space: nowrap;
	text-indent: 100%;
	overflow: hidden;
	margin: 1em;
}

#carpet .variety h3.tile {
	background-image: url(../images/service/variety_ttl_tile.png);
}

#carpet .variety h3.front {
	background-image: url(../images/service/variety_ttl_front.png);
}

#carpet .variety h3.desk {
	background-image: url(../images/service/variety_ttl_desk.png);
}

#carpet .variety h3.car {
	background-image: url(../images/service/variety_ttl_car.png);
}

#carpet .variety p {
	margin: 0 1em 1em 1em;
	line-height: 1.5;
}

#carpet .lineup {
	margin-bottom: 2em
}

#carpet .lineup th {
	background-color: #393b39;
	color: #FFF;
	border: 0;
}

#carpet .lineup td {
	padding: 1em 0;
	vertical-align: top;
}

#carpet .lineup h5 {
	font-size: 10rem;
	font-size: 1.0em;
	font-weight: bold;
	position: relative;
	display: inline-block;
	padding: 0.5em;
	margin-bottom: 0.5em;
	background-image: url(../images/service/ico_bracket_tl.png), url(../images/service/ico_bracket_tr.png), url(../images/service/ico_bracket_bl.png), url(../images/service/ico_bracket_br.png);
	background-position: top left, top right, bottom left, bottom right;
	background-repeat: no-repeat;
	background-size: 10px 10px;
}

#carpet .lineup dt {
	font-weight: bold;
	float: left;
	clear: left;
	width: 5.3em;
	padding: 0;
	margin: 0;
}

#carpet .lineup dd {
	margin-left: 5.5em;
	padding: 0;
	position: relative;
}

#carpet .lineup dd:before {
	content: "：";
	position: absolute;
	left: -1.2em;
	font-weight: bold;
}

/* -----------------------------------------------------------
	 service/carpet.html MediaQuery
----------------------------------------------------------- */
@media screen and (min-width: 769px) {

	#carpet.main .content {
		padding: 5em 0;
	}

	#carpet .outline {
		margin-bottom: 3em;
	}

	#carpet .outline p {
		margin-right: 2em;
	}

	#carpet .nemoto {
		margin-bottom: 3em;
	}

	#carpet .nemoto img {
		width: 30%;
		float: left;
	}

	#carpet .nemoto p {
		width: 66%;
		margin-left: 2%;
		padding-left: 2%;
		float: right;
	}

	#carpet .carpet-works {
		padding: 2em;
		text-align: center;
		position: relative;
	}

	#carpet .carpet-works h3 {
		width: 100%;
		text-align: left;
		padding-bottom: 0.7em;
	}

	#carpet .carpet-works h3 span {
		padding-right: 0.5em;
	}

	#carpet .carpet-works h4 {
		width: 100%;
		text-align: left;
	}

	#carpet .carpet-works .works1 {
		max-width: 25%;
		position: absolute;
		top: 8.5em;
		left: 2em;
	}

	#carpet .carpet-works .works2 {
		max-width: 25%;
		position: absolute;
		top: 6.5em;
		right: 2em;
	}

	#carpet .carpet-works .balloon-left {
		max-width: 38.5%;
		padding-left: 1.5%;
		text-align: left;
		margin: 0 auto 1.5em auto;
	}

	.balloon-left {
		position: relative;
		background: #FFF;
		border-left: solid 2px #393b39;
	}

	.balloon-left:before {
		content: "";
		position: absolute;
		top: 50%;
		left: -24px;
		margin-top: -12px;
		border: 12px solid transparent;
		border-right: 12px solid #FFF;
		z-index: 2;
	}

	.balloon-left:after {
		content: "";
		position: absolute;
		top: 50%;
		left: -29px;
		margin-top: -14px;
		border: 14px solid transparent;
		border-right: 14px solid #393b39;
		z-index: 1;
	}

	#carpet .carpet-works .balloon-right {
		max-width: 38.5%;
		padding-right: 1.5%;
		text-align: left;
		margin: 0 auto;
	}

	.balloon-right {
		position: relative;
		background: #FFF;
		border-right: solid 2px #393b39;
	}

	.balloon-right:before {
		content: "";
		position: absolute;
		top: 50%;
		right: -24px;
		margin-top: -12px;
		border: 12px solid transparent;
		border-left: 12px solid #FFF;
		z-index: 2;
	}

	.balloon-right:after {
		content: "";
		position: absolute;
		top: 50%;
		right: -29px;
		margin-top: -14px;
		border: 14px solid transparent;
		border-left: 14px solid #393b39;
		z-index: 1;
	}

	#carpet .variety {
		margin-right: -2%;
	}

	#carpet .variety li {
		float: left;
		width: 48%;
		margin-right: 2%;
	}

	#carpet .variety div {
		float: left;
		width: 50%
	}

	#carpet .variety h3 {
		background-position: top left;
		height: 36px;
	}

	#carpet .variety p {
		margin-top: 1em;
	}

	#carpet .variety img {
		width: 50%;
	}

	#carpet .lineup {
		border-left: 1px solid #393b39;
	}

	#carpet .lineup th {
		padding: 0.5em;
		text-align: center;
	}

	#carpet .lineup .tbl-tr td {
		background-color: #d7d7d7;
		padding: 0.5em;
		text-align: center;
	}

	#carpet .lineup td {
		border-bottom: 1px solid #393b39;
		border-right: 1px solid #393b39;
		text-align: center;
		padding: 1em;
	}

	#carpet .lineup dl {
		text-align: left;
		font-size: 9rem;
		font-size: 0.9em;
	}

	#carpet .flow h3 {
		position: relative;
		min-height: 115px;
		padding-left: 125px;
	}

	#carpet .flow h3:before {
		content: url(../images/service/wall-flow1.png);
		position: absolute;
		top: -25%;
		left: 0;
	}

}

@media screen and (min-width: 1000px) {
	#carpet.main {
		padding-top: 116px;
	}
}

@media screen and (max-width: 768px) {
	#carpet .lineup .tbl-tr {
		display: none;
	}
}

/* ===========================================================
 service/studio.html
=========================================================== */
#studio.main .content {
	padding: 3em 2em
}

#studio.main h2.content-name {
	white-space: nowrap;
	text-indent: 100%;
	overflow: hidden;
	line-height: 0;
	height: 0;
	margin-bottom: 0;
}

#studio #title-part {
	background-image: url(../images/service/studio_title_bg.jpg);
}

#studio #title-part h1 {
	white-space: nowrap;
	text-indent: 100%;
	overflow: hidden;
	line-height: 0;
	height: 0;
}

#studio #title-part p {
	background-image: url(../images/service/studio_title.png);
	background-position: center top 50%;
	max-width: 220px;
}

#studio.main h3 {
	margin-bottom: 0.5em;
}

#studio.main h4 {
	margin-bottom: 0.5em;
}

#studio .outline {
	margin-bottom: 2em;
}

#studio.main p.orng_lrg {
	margin-bottom: 1em;
}

#studio .use {
	background: url(../images/service/bg_border.png) repeat;
	padding: 1em;
	margin: 2em 0;
	position: relative;
}

#studio .use-inner {
	background-color: #FFF;
	display: block;
	padding: 2em;
}

#studio .use h4 {
	position: relative;
	position: absolute;
	top: 2em;
	left: 0;
	display: inline-block;
	padding: 0.7em;
	background: #64c1bf;
	color: #FFF;
	font-size: 15px;
	font-weight: bolder;
}

#studio .use h4:after {
	content: "";
	position: absolute;
	right: -33px;
	top: 0;
	width: 0;
	height: 0;
	border: 18px solid transparent;
	border-left: 15px solid #64c1bf;
}

#studio .use figure {
	margin-bottom: 2em
}

#studio .use figcaption {
	border: 2px solid #393b39;
	margin-top: 0.7em;
}

#studio .use figcaption span {
	display: inline-block;
	padding: 0.5em;
	vertical-align: middle;
}

#studio .use figcaption span:first-child {
	width: 35%;
	font-weight: bolder;
	text-align: center;
}

#studio .use figcaption span:last-child {
	width: 65%;
	border-left: 2px solid #393b39;
}

#studio .use p {
	margin-bottom: 1em;
}

#studio .ex {
	background-color: #ebebeb;
	padding: 3%;
}

#studio .ex h4 {
	font-size: 12rem;
	font-size: 1.2em;
	font-weight: bolder;
}

#studio .ex figure {
	margin-top: 1em
}

#studio .spec h4 {
	border-top: 1px dashed #393b39;
	padding: 1em 0;
}

#studio .spec h4 span {
	font-size: 14rem;
	font-size: 1.4em;
	font-weight: bolder;
}

#studio .spec h4:before {
	content: "PAPER";
	color: #bdbebd;
	font-size: 12rem;
	font-size: 1.2em;
	font-weight: bolder;
	font-family: 'Catamaran', sans-serif;
	font-family: 'Fjalla One', sans-serif;
	margin-right: 2em;
}

#studio .spec p {
	border-top: 1px dashed #393b39;
	border-bottom: 1px dashed #393b39;
	padding: 1em 0;
	margin-bottom: 2em;
}

#studio .spec p:before {
	content: "SIZE";
	color: #bdbebd;
	font-size: 12rem;
	font-size: 1.2em;
	font-weight: bolder;
	font-family: 'Catamaran', sans-serif;
	font-family: 'Fjalla One', sans-serif;
	margin-right: 2em;
}


/* -----------------------------------------------------------
	 service/studio.html MediaQuery
----------------------------------------------------------- */
@media screen and (min-width: 769px) {

	#studio.main .content {
		padding: 5em 0;
	}

	#studio .outline {
		margin-bottom: 3em;
	}

	#studio .use-inner {
		background: url(../images/service/studio_use_ico.png) bottom 1em right 1em no-repeat;
		background-color: #FFF;
	}

	#studio .use .studio_use1 {
		float: left;
		width: 54%;
	}

	#studio .use .studio_use2 {
		float: right;
		width: 44%;
		margin-left: 2%;
	}

	#studio .use figcaption span {
		line-height: 1.2;
	}

	#studio .use p {
		clear: both;
		margin-right: 200px;
	}

	#studio .ex figure {
		width: 49%;
		float: left
	}

	#studio .ex figure:nth-of-type(1) {
		margin-right: 2%;
	}

	#studio .flow li {
		padding: 2em 0 4em 0;
	}

	#studio .flow h4 {
		position: relative;
	}

	#studio .flow h4:after {
		position: absolute;
		bottom: -2em;
		left: 0;
		right: 0;
		margin: auto;
		display: block;
		color: #CCC;
		font-family: 'Catamaran', sans-serif;
		font-family: 'Fjalla One', sans-serif;
		font-size: 12rem;
		font-size: 1.2em;
		font-weight: bolder;
	}

	#studio .flow li:nth-of-type(1) h4:after {
		content: "CHOICE";
	}

	#studio .flow li:nth-of-type(2) h4:after {
		content: "OPTION";
	}

	#studio .flow li:nth-of-type(3) h4:after {
		content: "PRINTING";
	}

	#studio .flow li:nth-of-type(4) h4:after {
		content: "DELIVERY";
	}
}

@media screen and (min-width: 1000px) {
	#studio.main {
		padding-top: 116px;
	}
}

/* ===========================================================
 service common style
=========================================================== */

/*  line title  ( service / works / howto )
----------------------------------------------------------- */
.main h2.line-title {
	border-top: 1px solid #393b39;
	border-bottom: 1px solid #393b39;
	padding: 1em 0;
	text-align: center;
	font-weight: 900;
	font-size: 12rem;
	font-size: 1.2em;
	font-family: "Noto Sans Japanese";
}

/*  line double title  ( service )
----------------------------------------------------------- */
.line-double {
	position: relative;
	text-align: center;
}

.line-double span {
	position: relative;
	color: #393b39;
	z-index: 2;
	display: inline-block;
	margin: 0 2.5em;
	padding: 0 1em;
	background-color: #ebebeb;
	text-align: left;
}

.line-double:before {
	content: '';
	position: absolute;
	top: 50%;
	z-index: 1;
	display: block;
	width: 100%;
	height: 1px;
	background-color: #393b39;
}

.line-double:after {
	content: '';
	position: absolute;
	top: 30%;
	z-index: 1;
	display: block;
	width: 100%;
	height: 1px;
	background-color: #393b39;
}

/*  flow style  ( service )
----------------------------------------------------------- */
.flow ol {
	margin-top: 2em;
}

.flow li {
	margin-bottom: 0.5em;
}

.flow span {
	display: inline-block;
	background-color: #393b39;
	color: #FFF;
	width: 2em;
	height: 2em;
	padding-top: 0.2em;
	text-align: center;
	margin-right: 0.5em;
	font-family: 'Catamaran', sans-serif;
	font-family: 'Fjalla One', sans-serif;
}

.flow h4 {
	font-size: 15rem;
	font-size: 1.5em;
	font-weight: bolder;
	line-height: 1.2;
	display: inline-block;
	margin-right: 0.5em;
}

.flow p {
	margin-left: 2.5em;
}

@media screen and (min-width: 769px) {
	.flow span {
		font-size: 25rem;
		font-size: 2.5em;
		font-weight: bolder;
		margin: 0 0 20px 0
	}

	.flow h4 {
		text-align: center;
		width: 100%;
		padding: 0;
		margin: 0 0 30px 0
	}

	.flow ol {
		display: table;
		width: 100%;
	}

	.flow li {
		display: table-cell;
		text-align: center;
		width: 25%;
		padding: 2em 0;
		position: relative;
		overflow: hidden;
	}

	.flow li:after {
		content: url(../images/service/wall-flow-dotsB.png);
		position: absolute;
		right: -3px;
		top: 0;
		bottom: 0;
		margin: auto;
		width: 28px;
		height: 284px;
	}

	.flow li:last-of-type:after {
		content: url(../images/service/wall-flow-dotsA.png);
		position: absolute;
		right: 0;
		top: 0;
		bottom: 0;
		margin: auto;
		width: 2px;
		height: 284px;
	}

	.flow li:first-child:before {
		content: url(../images/service/wall-flow-dotsA.png);
		position: absolute;
		left: 0;
		top: 0;
		bottom: 0;
		margin: auto;
		width: 2px;
		height: 284px;
	}

	.flow p {
		margin-left: 0;
		padding: 0 2em;
		text-align: left;
	}
}