@charset "utf-8";

/*************************************************
 * Description: 各ページ用CSS
 * Package: site
 * Author: Japan Electronic Industrial Arts Co.Ltd.
 * Update: 2019/02/
 * Notes: 
*************************************************/

/* ==============================================
 * .section_title
=============================================== */
.section_title {
	display: flex;
	flex-flow: column;
	align-items: center;
	font-weight: normal;
}
.section_title:before {
	content: "";
	display: block;
	width: 1px;
	height: 10px;
	background-color: #000;
}
.section_title .main {
	writing-mode: vertical-rl;
	letter-spacing: 0.07em;
	margin-top: 12px;
	margin-bottom: 1em;
	text-shadow: 0 0 0 #000;
}
.section_title .sub {
}

/* .section_toptext
----------------------------------------------- */
.section_toptext {
	line-height: 1.8;
	text-align: center;
	text-shadow: 0 0 0 #000;
}
.section_toptext span {
}

@media ( max-width: 767px ) {
	/* .section_title */
	.section_title {
		margin-bottom: 0;
	}
	body.LC_Page_Index .section_title {/*index page*/
		margin-bottom: 20px;
	}
	.section_title .main {
		font-size: 26px;
		margin-bottom: 0.7em;
	}
	.section_title .sub {
		font-size: 12px;
	}
	/* .section_toptext */
	.section_toptext {
		font-size: 15px;
		margin-bottom: 20px;
		text-align: left;
	}
	.section_toptext span {
	}
}
@media ( min-width: 768px ) and ( max-width: 979px ) {
	/* .section_title */
	.section_title {
		margin-bottom: 0;
	}
	body.LC_Page_Index .section_title {/*index page*/
		margin-bottom: 30px;
	}
	.section_title .main {
		font-size: 30px;
		margin-bottom: 0.7em;
	}
	.section_title .sub {
		font-size: 12px;
	}
	/* .section_toptext */
	.section_toptext {
		font-size: 17px;
		margin-bottom: 30px;
	}
	.section_toptext span {
		display: inline-block;
	}
}
@media ( min-width: 980px ) {
	/* .section_title */
	.section_title {
		margin-bottom: 40px;
	}
	body.LC_Page_Index .section_title {/*index page*/
		margin-bottom: 40px;
	}
	.section_title .main {
		font-size: 35px;
	}
	.section_title .sub {
		font-size: 13px;
	}
	/* .section_toptext */
	.section_toptext {
		font-size: 18px;
		margin-bottom: 40px;
	}
	.section_toptext span {
		display: block;
	}
}


/* ==============================================
 * メインタイトル
=============================================== */
.main_column .title_type_a {
	font-weight: normal;
	line-height: 1.2;
	background-color: #e8e8e8;
}
.main_column .title_type_b {
	font-weight: normal;
	line-height: 1.2;
}
.main_column .title_type_c {
	font-weight: normal;
	line-height: 1.2;
}
/* サブタイトル */
.main_column .title-sub {
	font-weight: normal;
	line-height: 1.2;
}
/* サイドカラムタイトル */
.side_column .title {
	font-weight: normal;
	line-height: 1.2;
	background-color: #e8e8e8;
}
@media ( max-width: 767px ) {
	.main_column .title_type_a {
		font-size: 15px;
		padding: 10px 10px;
	}
	.main_column .title_type_b {
		font-size: 15px;
		background-color: #333;
		color: #fff;
		padding: 10px 10px;
	}
	.main_column .title_type_c {
		font-size: 17px;
		background-color: #333;
		color: #fff;
		padding: 13px 10px;
	}
	.main_column .title-sub {
		font-size: 17px;
		background-color: #ddd;
		padding: 10px 10px;
	}
	/* サイドカラムタイトル（基本.title_type_aと同一） */
	.side_column .title {
		font-size: 15px;
		padding: 10px 10px;
	}
}
@media ( min-width: 768px ) and ( max-width: 979px ) {
	.main_column .title_type_a {
		font-size: 16px;
		padding: 0.6em 30px;
	}
	.main_column .title_type_b {
		font-size: 22px;
		color: #666;
		padding: 0.7em 0;
		margin: 0.5em 30px 0;
		border-top: solid 1px #ccc;
	}
	.main_column .title_type_c {
		font-size: 24px;
		color: #666;
		padding: 0.4em 0;
		margin: 0 30px 0.4em;
		border-bottom: solid 1px #999;
	}
	.main_column .title-sub {
		font-size: 22px;
		color: #666;
		padding: 0.5em 30px;
	}
	/* サイドカラムタイトル（基本.title_type_aと同一） */
	.side_column .title {
		font-size: 16px;
		padding: 0.6em 30px;
	}
}
@media ( min-width: 980px ) {
	.main_column .title_type_a {
		font-size: 17px;
		padding: 0.6em;
	}
	.main_column .title_type_b {
		font-size: 22px;
		color: #666;
		padding: 0.7em 0;
		margin: 0.5em 0 0;
		border-top: solid 1px #ccc;
	}
	.main_column .title_type_c {
		font-size: 27px;
		color: #666;
		padding: 0.4em 0;
		margin: 0 0 0.4em;
		border-bottom: solid 1px #999;
	}
	.main_column .title-sub {
		font-size: 22px;
		color: #666;
		padding: 0.5em 0;
	}
	/* サイドカラムタイトル（サイド用表示） */
	.side_column .title {
		background-color: #444;
		color: #fff;
		font-size: 14px;
		padding: 10px;
	}
}


/* ==============================================
 * ページバックボタン
=============================================== */
.section_pageback {
	text-align: center;
}
.section_pageback a {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	height: 45px;
	min-width: 300px;
	padding: 10px;
	box-sizing: border-box;
	background-color: #fff;
	color: #aaa;
	border: solid 1px #D6D6D6;
	font-size: 18px;
	font-family: "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "游明朝", "Yu Mincho", "游明朝体", "YuMincho", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}
@media ( max-width: 767px ) {
	.section_pageback a {
		min-width: auto;
		width: 100%;
	}
}
@media ( min-width: 980px ) {
	.section_pageback a {
		transition: .3s;
	}
	.section_pageback a:hover {
		text-decoration: none;
		background-color: #D6D6D6;
		color: #000;
	}
}


/* ==============================================
 * リードsection
=============================================== */
.lead_section {
}
.lead_section .lead_title {
	font-size: 15px;
	background-color: #666;
	color: #fff;
	padding: 10px;
}
.lead_section .lead_image img {
	width: 100%;
}
@media ( min-width: 768px ) {
	.lead_section .lead_title {
		font-weight: normal;
		color: inherit;
		padding: 8px 10px;
		margin: 1em 0;
		background-color: transparent;
		text-align: center;
		border-top: solid 1px #ccc;
		border-bottom: solid 1px #ccc;
		font-size: 180%;
	}
}



/*************************************************
 * Page: 共通：文書スタイル定義
 * Package: 
 *
*************************************************/
/*
 * ※個別コンテンツで文書構造を揃えたい場合に親IDにclass.page_docを指定。
 * 主に利用ガイドのみでの使用となるが案件によっては利用ガイドと同様のスタイルを
 * 他ページでも適用する場面があるかと思うのでこの形で用意。
 */
.page_doc {
}

/* 文書スタイル：タイトル
----------------------------------------------- */
.page_doc h2.doc_title {
	font-weight: normal;
	line-height: 1.2;
}
.page_doc h3.doc_title {
	font-weight: normal;
	line-height: 1.2;
}
.page_doc h4 {
	font-size: 15px;
	font-weight: normal;
	line-height: 1.2;
}
.page_doc h4:before {
	font-family: "FontAwesome";
	content: "\f111";
	margin-right: 0.3em;
	color: #666;
}
@media ( max-width: 767px ) {
	.page_doc h2.doc_title {
		font-size: 15px;
		background-color: #666;
		color: #fff;
		padding: 10px 10px;
	}
	.page_doc h3.doc_title {
		font-size: 15px;
		padding: 10px 0;
		border-bottom: dotted 1px #ccc;
	}
	.page_doc h4 {
	}
}
@media ( min-width: 768px ) and ( max-width: 979px ) {
	.page_doc h2.doc_title {
		font-size: 16px;
		background-color: #e0e0e0;
		color: inherit;
		padding: 0.5em 20px;
	}
	.page_doc h3.doc_title {
		font-size: 16px;
		border-bottom: dotted 1px #ccc;
		border-left: solid 5px #ccc;
		padding: 0.5em 0.5em;
		margin: 2em 0 1em;
	}
	.page_doc h4 {
		margin: 2em 0 1em;
	}
}
@media ( min-width: 980px ) {
	.page_doc h2.doc_title {
		font-size: 16px;
		background-color: #e0e0e0;
		color: inherit;
		padding: 0.5em 0.5em;
	}
	.page_doc h3.doc_title {
		font-size: 16px;
		border-bottom: dotted 1px #ccc;
		border-left: solid 5px #ccc;
		padding: 0.5em 0.5em;
		margin: 2em 0 1em;
	}
	.page_doc h4 {
		margin: 2em 0 1em;
	}
}

/* 文書スタイル：段落
----------------------------------------------- */
.page_doc p {
	/* 段落ごとに余白、改行高さも広くとって読みやすく*/
	line-height: 1.8;
	margin: 1em 0;
}

/* 文書スタイル：注意書き・箇条書き要素（ベーシック）
----------------------------------------------- */
.page_doc dl.note {
	margin: 1em 0;
}
.page_doc dl.note dt {
	font-weight: bold;
}
.page_doc dl.note dd {
	line-height: 1.8;
	position: relative;
	padding-left: 1.3em;/* マークとテキストの間隔調整 */
}
.page_doc dl.note dd:before {
	content: "・";
	font-size: inherit;
	position: absolute;
	top: 0;
	left: 0;
}

/*  文書スタイル：注意書き・箇条書き「※」シンボル
----------------------------------------------- */
.page_doc dl.note-rice {}
.page_doc dl.note-rice >dd:before {
	content: "※";
}

/*  文書スタイル：注意書き・箇条書き「●」シンボル
----------------------------------------------- */
.page_doc dl.note-disc {}
.page_doc dl.note-disc >dd:before {
	content: "●";
	color: #aaa;
}

/*  文書スタイル：注意書き・箇条書き「数字」
----------------------------------------------- */
.page_doc dl.note-decimal {}
.page_doc dl.note-decimal >dd {
	counter-increment: note;
}
.page_doc dl.note-decimal >dd:before {
	content: counter(note)".";
}

/*  文書スタイル：注意書き・箇条書き「アイコン付き」
----------------------------------------------- */
.page_doc dl.note-icon {}
.page_doc dl.note-icon >dd:before {
	font-family: "FontAwesome";
	content: "\f138";
	color: #aaa;
}

/* 文書スタイル：img画像
----------------------------------------------- */
.page_doc .fig{
	margin: 1em 0;
}
.page_doc .fig img {
	max-width: 100%;
}

/* 文書スタイル：手順解説ステップ
----------------------------------------------- */
.page_doc .step_wrap {
	background: #f0f0f0;
	padding: 10px;
}
.page_doc .step_wrap .step_item {
}
.page_doc .step_item .step_content {
}
.page_doc .step_item .step_content h3 {
	font-size: 15px;
	font-weight: normal;
	margin-bottom: 1em;
	border-bottom: dotted 1px #ccc;
}
.page_doc .step_item .step_fig {
	background-color: #fff;
	padding: 15px;
	text-align: center;
}
.page_doc .step_item .step_fig img {
	max-width: 100%;
	box-shadow: 1px 3px 5px 0 #ccc, 0 0 0 1px #ccc;
}
.page_doc .step_item + .step_item {
	margin-top: 1em;
}
.page_doc .step_wrap + .step_wrap {
}
/* メディアクエリ */
@media ( min-width: 768px ) {
	.page_doc .step_wrap {
		padding: 15px;
		overflow: hidden;/*.step_contentのoverflow不可視*/
	}
	.page_doc .step_wrap .step_item:after {/*画像にbox-shadowを付けたいのでoverflowでなくclearfix*/
		content: "";
		display: block;
		clear: both;
	}
	.page_doc .step_wrap > h3 {
		margin-top: 0;
	}
	.page_doc .step_item .step_content {
		float: right;
		width: 100%;
		margin-right: -400px;
		padding-right: 400px;
		padding-left: 15px;
		box-sizing: border-box;
	}
	.page_doc .step_item .step_content p:first-child {
		margin-top: 0;
	}
	.page_doc .step_item .step_fig {
		padding: 0;
		background-color: transparent;
		float: left;
		width: 400px;
	}
	.page_doc .step_item + .step_item {
		margin-top: 30px;
	}
	.page_doc .step_wrap + .step_wrap {
		margin-top: 30px;
	}
}



/*************************************************
 *
 * 各ページ個別
 *
*************************************************/
/*************************************************
 * Page: トップページ
 * Package:
 *
*************************************************/
#page_home {
}

/* ==============================================
 * #business
=============================================== */
#page_home #business {
}
#page_home #business .business {
	display: flex;
	justify-content: space-between;
}
#page_home #business .business .item {
	flex: 0 0 auto;
	/*overflow: hidden;*/
}
/* .iframe_container
----------------------------------------------- */
#page_home #business .business .iframe_container {
	width: 100%;
	height: 0;
	padding-top: 60%;
	position: relative;
}
#page_home #business .business .iframe_container iframe {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: none;
	margin: 0;
}

/* .title
----------------------------------------------- */
#page_home #business .business .title {
	text-align: center;
	line-height: 1.2;
	margin-top: 1em;
}
#page_home #business .business .title .en {
	font-family: Georgia;
	font-size: 16px;
	color: #888;
}
#page_home #business .business .title .ja {
	font-size: 18px;
	margin-top: .5em; 
}

@media ( max-width: 767px ) {
	#page_home #business .business {
		flex-flow: column;
	}
	#page_home #business .business .item {
		width: 100%;
		max-width: 280px;
		margin: 0 auto;
	}
	#page_home #business .business .iframe_container {
		overflow: hidden;
	}
	#page_home #business .business .iframe_container iframe {
	}
	/* iframe 位置微調整 */
	#page_home #business .business .item:nth-child(1) .iframe_container iframe { transform: translate(-3.8%,0); }
	#page_home #business .business .item:nth-child(2) .iframe_container iframe { transform: translate(-1.0%,0); }
	#page_home #business .business .item:nth-child(3) .iframe_container iframe { transform: translate(-1.0%,0); height:auto; }
	/* .title */
	#page_home #business .business .title {
		margin-top: 20px;
	}
	#page_home #business .business .title .en {
		font-size: 13px;
	}
	#page_home #business .business .title .ja {
		font-size: 16px;
		margin-top: .7em; 
	}
	/* .hover_content */
	#page_home #business .business .item .hover_content {
		display: none;
	}
}
/* タブレット・PC共通 */
@media ( min-width: 768px ) {
	#page_home #business .business .item {
		width: calc(100% / 3);
	}
	/* iframe 位置微調整 */
	#page_home #business .business .item:nth-child(1) .iframe_container iframe { transform: translate(-3%,0); }
	#page_home #business .business .item:nth-child(2) .iframe_container iframe { transform: translate( 0%,4%); }
	#page_home #business .business .item:nth-child(3) .iframe_container iframe { transform: translate(-1.0%,0); }
}
@media ( min-width: 768px ) and ( max-width: 979px ) {
	#page_home #business .business .item {
		padding-bottom: 30px;
	}
	/* .title */
	#page_home #business .business .title {
		margin-top: 30px;
	}
	#page_home #business .business .title .en {
		font-size: 14px;
	}
	#page_home #business .business .title .ja {
		font-size: 16px;
		margin-top: .7em; 
	}
	/* .hover_content */
	#page_home #business .business .item .hover_content {
		display: none;
	}
}
@media ( min-width: 980px ) {
	#page_home #business .business .item {
		padding-bottom: 30px;
	}
	#page_home #business .business .item:before,
	#page_home #business .business .item:last-child:after {
		content: "";
		display: block;
		width: 0;
		height: 100px;
		border-left: solid 1px #ccc;
		position: absolute;
		top: 50%;
		left: 0;
		transform: translateY(-50%);
		z-index: 2;
	}
	#page_home #business .business .item:last-child:after {
		right: 0;
		left: auto;
	}
	/* .hover_content
	----------------------------------------------- */
	#page_home #business .business .item {
		position: relative;
	}
	#page_home #business .business .item .hover_content {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		padding: 25px;
		background-color: rgba(0,0,0,.85);
		color: #fff;
		display: flex;
		flex-flow: column;
		justify-content: center;
		align-items: center;
		z-index: 9;
		opacity: 0;
		visibility: hidden;
		transform: scale(0.87);
		transition: .3s;
	}
	#page_home #business .business .item:hover .hover_content {
		opacity: 1;
		visibility: visible;
		transform: scale(1);
	}
	#page_home #business .business .item .hover_content h4 {
		font-size: 1.785vw;/*22px;*/
	}
	#page_home #business .business .item .hover_content .subtitle {
		font-size: 16px;
		margin: 1em 0;
	}
	#page_home #business .business .item .hover_content p {
		font-size: 16px;
		text-align: justify;
	}
	#page_home #business .business .item .hover_content p span {
		display: inline;
	}
}
@media ( min-width: 1680px ) {
	#page_home #business .business .item .hover_content {
		padding: 40px;
	}
	#page_home #business .business .item .hover_content h4 {
		font-size: 30px;
	}
	#page_home #business .business .item .hover_content p {
		text-align: center;
	}
	#page_home #business .business .item .hover_content p span {
		display: block;
	}
}

/* #business テキストエフェクト
----------------------------------------------- */
#page_home #business .eff_text span {
	display: inline-block;
}
#page_home #business .eff_text span.is-active {
	/*
	animation: eff_text_anime .5s linear both;
	*/
	animation: eff_text_anime .3s forwards;
}
@keyframes eff_text_anime {
	/*
	0% {
		opacity: 0;
		transform: scale(1) translate3d(300%,0,0);
	}
	50% {
		opacity: 1;
		transform: scale(3,0);
	}
	75% {
		opacity: 1;
		transform: scale(2);
	}
	100% {
		opacity: 1;
		transform: scale(1) translate3d(0,0,0);
	}
	*/
	0% {
		opacity: 0;
		transform: translate3d(0,35%,0);
	}
	100% {
		opacity: 1;
		transform: translateY(0,0,0);
	}
}
@media ( min-width: 980px ) {
	#page_home #business .eff_text span {
		opacity: 0;
	}
}

/* ==============================================
 * #concept
=============================================== */
#page_home #concept {
}
#page_home #concept .wrap {
}
#page_home #concept .item {
}
#page_home #concept .item_logo .logo svg {
	width: 100%;
	height: auto;
	stroke-width: 2px;
	stroke: #aaa;
	fill: transparent;
	/*
	stroke: transparent;
	stroke-dasharray: 8000px;
	stroke-dashoffset: 0px;
	*/
}
#page_home #concept .item_logo .logo.ecp_fadein_active svg {/* completeではなくactive（表示開始）の段階でanimationスタート */
	/*
	animation: svg_anime 3s 0s forwards;
	*/
	animation: svg_anime 1.5s 0s forwards;
}
@keyframes svg_anime {
	/*
	0% {
		stroke: #aaa;
		stroke-dashoffset: 8000px;
	}
	50% {
		stroke: #aaa;
		fill: transparent;
		stroke-dashoffset: 0px;
	}
	100% {
		stroke: transparent;
		fill: #000;
	}
	*/
	0% {
		stroke: #aaa;
	}
	20% {
		stroke: #aaa;
		fill: transparent;
	}
	100% {
		stroke: transparent;
		fill: #000;
	}
}

@media ( max-width: 767px ) {
	#page_home #concept .wrap {
		display: flex;
		flex-flow: column;
	}
	#page_home #concept .item {
		flex: 0 0 100%;
	}
	#page_home #concept .item + .item {
		/*margin-top: 20px;*/
	}
	#page_home #concept .item_text {
		order: 0;
	}
	#page_home #concept .item_logo {
		order: 1;
		margin-top: 20px;
	}
	#page_home #concept .item_text .title {
		font-size: 26px;
		text-align: center;
		margin-bottom: 20px;
	}
	#page_home #concept .item_text p {
		font-size: 16px;
		line-height: 1.7;
		text-align: justify;
	}
	#page_home #concept .item_text .stamp {
		/*text-align: right;*/
		display: none;
	}
	#page_home #concept .item_logo .logo {
		padding: 10px;
		text-align: center;
	}
	#page_home #concept .item_logo .logo svg {
		max-width: 240px;
	}
}
@media ( min-width: 768px ) and ( max-width: 1279px ) {
	/* .wrap frame
	----------------------------------------------- */
	#page_home #concept .wrap {
		max-width: 800px;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		flex-flow: row-reverse wrap;
	}
	#page_home #concept .item {
		flex: 1 1 auto;
		font-size: 18px;
	}
	#page_home #concept .item:first-child {
		width: 60%;
		height: 22em;
		display: flex;
		justify-content: center;
		flex-direction: row-reverse;
	}
	#page_home #concept .item_logo {
		width: 40%;
	}
	#page_home #concept .item:last-child {
		width: 100%;
		flex-flow: column;
		margin-top: 30px;
	}
	/* .wrap parts
	----------------------------------------------- */
	#page_home #concept .item_text .title {
		writing-mode: vertical-rl;
		font-size: 34px;
		margin-left: 0.5em;
		white-space: nowrap;
	}
	#page_home #concept .item_text p {
		line-height: 2;
	}
	#page_home #concept .item:first-child p {
		writing-mode: vertical-rl;
	}
	#page_home #concept .item:last-child p {
	}
	#page_home #concept .item_text .stamp {
		text-align: right;
	}
	#page_home #concept .item_logo .logo {
		display: flex;
		align-items: center;/*flex-end;*/
		justify-content: center;
		height: 100%;
		padding-right: 20px;
	}
}
@media ( min-width: 1280px ) {
	/* .wrap frame
	----------------------------------------------- */
	#page_home #concept .wrap {
		display: flex;
		justify-content: space-between;
		flex-direction: row-reverse;
		height: 750px;
	}
	#page_home #concept .item {
	}
	#page_home #concept .item_text {
		flex: 1 1 auto;
		width: 30vw;
		display: flex;
		flex-direction: row-reverse;
		justify-content: center;
	}
	#page_home #concept .item_logo {
		flex: 0 0 auto;
		width: 40vw;
		padding: 0px;
	}
	/* .wrap parts
	----------------------------------------------- */
	#page_home #concept .item_text .title {
		writing-mode: vertical-rl;
		font-size: 50px;
		margin-left: 0.5em;
		white-space: nowrap;
	}
	#page_home #concept .item_text p {
		writing-mode: vertical-rl;
		font-size: 18px;
		line-height: 2.5;
	}
	#page_home #concept .item_text .stamp {
		display: flex;
		align-items: flex-end;
	}
	#page_home #concept .item_logo .logo {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
	}
}
@media ( min-width: 1680px ) {
	#page_home #concept .wrap {
		height: 700px;
	}
	#page_home #concept .item_text {
		width: 25vw;
	}
	#page_home #concept .item_logo {
		width: 50vw;
		max-width: 678px;
		padding: 40px;
	}
	#page_home #concept .item_text .title {
		font-size: 70px;
		margin-left: 0.5em;
	}
}


/* ==============================================
 * #recentworks
=============================================== */
#page_home #recentworks {
}
#page_home #recentworks .works {
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-start;
}
#page_home #recentworks .works .item {
	box-sizing: border-box;
	border: solid 1px #eee;
}
#page_home #recentworks .works .item .inner {
	height: 100%;
	display: flex;
	flex-flow: column;
	align-items: center;/*左右中央揃*/
	box-sizing: border-box;
}
#page_home #recentworks .works .item h3 {
}
#page_home #recentworks .works .item h3 img {
	max-width: 100%;
	height: auto;
}
#page_home #recentworks .works .item .description {
	color: #666;
	line-height: 1.6;
	text-align: justify;
}
#page_home #recentworks .works .item .pic {
	margin: auto 0 0;
}
#page_home #recentworks .works .item .pic a {
	display: block;
}
#page_home #recentworks .works .item .pic img {
	max-width: 100%;
	height: auto;
}
/* hover */
#page_home #recentworks .works .item a {
	transition: .3s;
}
#page_home #recentworks .works .item a:hover {
	/*opacity: 0.8;*/
	filter: brightness(1.07);
}
/* バッジ */
#page_home #recentworks .works .item {
	position: relative;
}
#page_home #recentworks .works .item:after {
	content: "";
	display: inline-flex;
	align-items: center;
	padding: 0 10px;
	height: 30px;
	background-color: #eee;
	color: #666;
	font-size: 13px;
	line-height: 1;
	position: absolute;
	top: 10px;
	left: 10px;
}
#page_home #recentworks .works .item.works_ec:after {
	content: "ECサイト構築事業";
}
@media ( max-width: 767px ) {
	#page_home #recentworks .works {
		margin-top: -20px;
	}
	#page_home #recentworks .works .item {
		width: 100%;
		margin-top: 20px;
	}
	#page_home #recentworks .works .item .inner {
		padding-top: 30px;
	}
	#page_home #recentworks .works .item h3 img {
		max-height: 80px;
		width: auto;
	}
	#page_home #recentworks .works .item .description {
		font-size: 15px;
		line-height: 1.5;
		margin: 15px;
	}
	#page_home #recentworks .works .item:after {
		font-size: 11px;
		height: 25px;
		top: 0;
		left: 0;
	}
}
@media ( min-width: 768px ) and ( max-width: 979px ) {
	#page_home #recentworks .works {
		margin-top: -20px;
	}
	#page_home #recentworks .works .item {
		width: calc((100% - 20px) / 2);
		margin-left: 20px;
		margin-top: 20px;
	}
	#page_home #recentworks .works .item:nth-child(2n+1) {
		margin-left: 0;
	}
	#page_home #recentworks .works .item .inner {
		padding-top: 50px;
	}
	#page_home #recentworks .works .item h3 img {
		max-height: 100px;
		width: auto;
	}
	#page_home #recentworks .works .item .description {
		font-size: 16px;
		margin: 20px;
	}
	#page_home #recentworks .works .item:after {
		font-size: 12px;
	}
}
@media ( min-width: 980px ) {
	#page_home #recentworks .works {
		margin-top: -40px;
	}
	#page_home #recentworks .works .item {
		width: calc((100% - 40px) / 2);
		margin-left: 40px;
		margin-top: 40px;
	}
	#page_home #recentworks .works .item:nth-child(2n+1) {
		margin-left: 0;
	}
	#page_home #recentworks .works .item .inner {
		padding-top: 80px;
	}
	#page_home #recentworks .works .item .description {
		font-size: 17px;
		margin: 40px;
	}
}


/* ==============================================
 * #news
=============================================== */
/*
#news {
}
#news .news {
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-start;
}
#news .news .item {
	display: flex;
}
#news .news .item .image {
	flex: 0 0 auto;
}
#news .news .item .image img {
	max-width: 100%;
	height: auto;
}
#news .news .item .content {
	flex: 1 1 auto;
}
#news .news .item .content date {
	display: block;
	font-family: Georgia;
	margin-bottom: 0.5em;
	line-height: 1;
}
#news .news .item .content .text {
	font-size: 13px;
	line-height: 1.8;
}
@media ( max-width: 767px ) {
	#news .news {
		margin-top: -20px;
	}
	#news .news .item {
		width: 100%;
		margin-top: 20px;
	}
	#news .news .item .image {
		width: 70px;
	}
	#news .news .item .content {
		padding: 0 0 0 10px;
	}
	#news .news .item .content date {
		font-size: 20px;
		margin-bottom: 8px;
	}
}
@media ( min-width: 768px ) and ( max-width: 979px ) {
	#news .news {
		margin-top: -30px;
	}
	#news .news .item {
		width: calc(100% / 2);
		margin-top: 30px;
	}
	#news .news .item .image {
		width: 80px;
	}
	#news .news .item .content {
		padding: 0 20px;
	}
	#news .news .item .content date {
		font-size: 22px;
		margin-bottom: 8px;
	}
}
@media ( min-width: 980px ) {
	#news .news {
		margin-top: -40px;
	}
	#news .news .item {
		width: calc(100% / 2);
		margin-top: 40px;
	}
	#news .news .item .image {
		width: 90px;
	}
	#news .news .item .content {
		padding: 0 20px;
	}
	#news .news .item .content date {
		font-size: 25px;
	}
}
@media ( min-width: 1280px ) {
	#news .news {
		margin-top: -60px;
	}
	#news .news .item {
		width: calc(100% / 3);
		margin-top: 60px;
	}
	#news .news .item .image {
		width: 100px;
	}
	#news .news .item .content {
		padding: 0 20px;
	}
	#news .news .item .content date {
		font-size: 30px;
	}
}
*/


























/*************************************************
 * Page: 当サイトについて
 * Package: abouts
 *
*************************************************/
#page_abouts_index {
}
#page_abouts_index .map_area {
	border: solid 1px #ccc;
	border-top: none;
}
#page_abouts_index .map_area #map {
	width: 100%;
	height: 250px;
}
@media ( min-width: 768px ) {
	#page_abouts_index .map_area {
		margin-top: 10px;
		border: solid 1px #ccc;
	}
	#page_abouts_index .map_area #map {
		height: 400px;
	}
}



/*************************************************
 * Page: カート表示
 * Package: cart
 *
*************************************************/
#page_cart_index {
}
#page_cart_login {
}
/* メンバーエリア */
.page_cart .member_area {
}
@media ( min-width: 768px ) {
	.page_cart .member_area {
		margin-top: 50px;
	}
}



/*************************************************
 * Page: お問い合わせ
 * Package: contact
 *
*************************************************/
/*ページ共通*/
.page_contact {
}

/* ==============================================
 * お問い合わせ(index)
 * Template: contact/index.tpl
=============================================== */
#page_contact_index {
}

/* ==============================================
 * お問い合わせ(入力内容のご確認)
 * Template: contact/confirm.tpl
=============================================== */
#page_contact_confirm {
}

/* ==============================================
 * お問い合わせ(送信完了)
 * Template: contact/complete.tpl
=============================================== */
#page_contact_complete {
}

/* ==============================================
 * 商品お問い合わせ(index)
 * Template: contact/pcontact.tpl
=============================================== */
#page_contact_pcontact {
}

/* 商品ビューエリア
----------------------------------------------- */
#page_contact_pcontact .product_view_area {
	width: 100%;
	overflow: hidden;
	margin-top: 10px;
}
/* 商品画像エリア */
#page_contact_pcontact .product_photo_area {
	width: 30%;
	float: left;
	margin-bottom: 10px;
}
#page_contact_pcontact .product_photo_area a {
	display: block;
	width: 100%;
	border: solid 1px #ccc;
}
#page_contact_pcontact .product_photo_area a img {
	width: 100%;
}
/* 商品データエリア */
#page_contact_pcontact .product_data_area {
	float: left;
	width: 70%;
	box-sizing: border-box;
	padding-left: 15px;
	margin-bottom: 10px;
}
#page_contact_pcontact .product_view_area h3 {
	font-weight: normal;
	padding-bottom: 7px;
	border-bottom: dotted 1px #ccc;
	margin-bottom: 7px;
}
#page_contact_pcontact .product_view_area p {
	margin: 0.5em 0;
}

/* ==============================================
 * 商品お問い合わせ(入力内容のご確認)
 * Template: contact/pconfirm.tpl
=============================================== */
#page_contact_pconfirm {
}

/* 商品画像エリア */
#page_contact_pconfirm .product_view_area {
}
#page_contact_pconfirm .product_view_area img {
	display: inline-block;
	vertical-align: top;
	margin-right: 10px;
	width: 70px;
}
#page_contact_pconfirm .product_view_area h3 {
	display: inline;
	font-size: inherit;
	font-weight: normal;
}

/* ==============================================
 * 商品お問い合わせ(送信完了)
 * Template: contact/pcomplete.tpl
=============================================== */
#page_contact_pcomplete {
}



/*************************************************
 * Page: 会員登録
 * Package: entry
 *
*************************************************/
.page_entry {
}

/* ==============================================
 * 会員登録(index)
 * Template: entry/index.tpl
=============================================== */
#page_entry_index {
}
#page_entry_index .process_btn_area {
	background-color: #e4e4e4;
	padding: 15px;
}

/* ==============================================
 * 会員登録完了
 * Template: regist/complete.tpl
=============================================== */
#page_entry_complete {
}



/*************************************************
 * Page: よくある質問
 * Package: faq
 *
*************************************************/
.page_faq {
}
.page_faq .title-sub a {
	color: inherit;
}

@media ( min-width: 768px ) {
	/* サブタイトル */
	.page_faq .title-sub {
		border-bottom: solid 1px #ccc;
		padding-bottom: 5px;
	}
}

/* キーワード検索窓
----------------------------------------------- */
.page_faq .faq_search_area {
}
.page_faq .faq_search_area .input_area {
	background-color: #f4f4f5;
	padding: 15px;
}
.page_faq .faq_search_area .input_box {
	width: 100%;
	position: relative;
	height: 35px;/*入力欄とボタン高さ*/
}
.page_faq .faq_search_area input[type=text] {
	width: 100%;
	height: 100%;
	padding-left: 7px;
	padding-right: 21%;
}
.page_faq .faq_search_area button {
	position: absolute;
	right: 0;
	top: 0;
	width: 20%;
	min-width: 80px;
	height: 100%;
	background-color: #333;
	cursor: pointer;
	text-align: center;
	color: #fff;
	letter-spacing: 0.2em;
	transition: background-color .3s;
	border-radius: 0 4px 4px 0;/* ボタンの右側に角丸 */
}
.page_faq .faq_search_area button:hover {
	background-color: #666;
}
.page_faq .faq_search_area button i {
	margin-right: 5px;
}

@media ( min-width: 768px ) {
	.page_faq .faq_search_area .input_area {
		padding: 24px;
	}
}

/* FAQ リスト
----------------------------------------------- */
.faq_list {
}
@media ( max-width: 767px ) {
	.faq_list {
		padding-left: 10px;
		padding-right: 10px;
	}
}
.faq_list ul {
}
.faq_list li {
	padding: 1.25em 0;
	margin: 0;
}
.faq_list li + li {
	border-top: dotted 1px #ccc;
}
.faq_list li a {
	color: inherit;
}

/* FAQ 詳細
----------------------------------------------- */
.faq_detail {
}
@media ( max-width: 767px ) {
	.faq_detail {
		padding-left: 10px;
		padding-right: 10px;
	}
}
.faq_detail dl {
}
.faq_detail dt,
.faq_detail dd {
	padding: 1.25em 0;
	margin: 0;
}
.faq_detail dd {
	border-top: dotted 1px #ccc;
}

/* FAQ アイコン
----------------------------------------------- */
.faq_list li,
.faq_detail dt,
.faq_detail dd {
	position: relative;
	padding-left: 2.5em;/*アイコンとテキストとのバランス*/
}
.faq_question:before,
.faq_answer:before {
	content: "";
	font-family: Palatino, Book Antiqua, Georgia, serif;
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	font-size: 120%;
	line-height: 1;
	width:1.5em;
	height:1.5em;
	box-sizing: border-box;
	padding-top: 0.25em;
	text-align: center;
	margin-top: 1em;/*テキストとの縦中央バランス*/
	background-color: #666;
	color: #fff;
	border-radius: 3px;
}
.faq_question:before {
	content: "Q";
}
.faq_answer:before {
	content: "A";
}

/* ==============================================
 * よくある質問（index）
 * Template: faq/index.tpl
=============================================== */
#page_faq_index {
}

/* FAQ カテゴリ一覧
----------------------------------------------- */
#page_faq_index .faq_category li {
	display: inline-block;
	border-right: dotted 1px #999;/*改行されるケースを想定して右側に*/
	font-size: 14px;
	line-height: 1;
	margin-right: 10px;
	margin-bottom: 10px;
	padding-right: 10px;
}
#page_faq_index .faq_category li:last-child {
	border-right: none;
}
@media ( max-width: 767px ) {
	#page_faq_index .faq_category {
		background-color: #eee;
		padding: 10px;
	}
	#page_faq_index .faq_category li {
		background-color: #fff;
		border: none;
		padding: 0;
	}
	#page_faq_index .faq_category li a {
		display: block;
		padding: 10px;
	}
}
@media ( min-width: 768px ) {
	#page_faq_index .faq_category {
		padding-top: 10px;
	}
}

/* ==============================================
 * よくある質問（詳細）
 * Template: faq/detail.tpl
=============================================== */
#page_faq_detail {
}
#page_faq_detail .faq_question h1 {
	font-weight: normal;
	font-size: inherit;
}



/*************************************************
 * Page: パスワードの再発行
 * Package: forgot
 *
*************************************************/
/* ==============================================
 * パスワードの再発行(index)
 * Template: forgot/index.tpl
=============================================== */
#page_forgot_index {
}

/* ==============================================
 * パスワードの再発行(秘密の質問の確認)
 * Template: forgot/secret.tpl
=============================================== */
#page_forgot_secret {
}

/* ==============================================
 * パスワードの再発行(完了)
 * Template: forgot/complete.tpl
=============================================== */
#page_forgot_complete {
}
/* 再発行パスワード表示 */
#page_forgot_complete .new_password {
	border: solid 1px #666;
	padding: 1em;
	margin-top: 15px;
	background-color: #fff;
}
#page_forgot_complete .new_password p {
	font-size: 18px;
	font-weight: bold;
	color: #c00;
	letter-spacing: 0.15em;
	text-align: center;
}



/*************************************************
 * Page: 利用ガイド
 * Package: guide
 *
*************************************************/
.page_guide {
}

/* ガイドナビ
----------------------------------------------- */
/* ※モバイル表示時は.toggleにてトグル制御（parts.css） */
@media ( min-width: 768px ) {
	.page_guide .btn_toggle {
		display: none;
	}
	.page_guide .toggle_nav {
		display: block;
		margin: 10px 0;
	}
	.page_guide .toggle_nav ul {
	}
	.page_guide .toggle_nav li {
		display: inline-block;
		background-color: transparent;
		border-bottom: none;
	}
	.page_guide .toggle_nav li a {
		color: inherit;
		display: block;
		padding: 3px 6px;
	}
	.page_guide .toggle_nav a:before {
		font-family: "FontAwesome";
		content: "\f0da";
		display: inline-block;
		vertical-align: middle;
		margin-right: 5px;
		font-size: 100%;
		color: #aaa;
	}
}

/* ==============================================
 * 利用ガイド(INDEX)
 * Template: guide/index.tpl
=============================================== */
#page_guide_index {
}
#page_guide_index .menu_item_wrap {
}
#page_guide_index .menu_item_wrap .menu_item {
}
#page_guide_index .menu_item h3 {
	background-color: #555;
	color: #fff;
	font-size: 15px;
	padding: 5px 10px;
	font-weight: normal;
}
#page_guide_index .menu_item ul {
}
#page_guide_index .menu_item li {
	font-size: 14px;
}
#page_guide_index .menu_item a {
	display: block;
	color: inherit;
	padding: 15px;
	background-color: #f8f8f8;
	border-top: solid 1px #ccc;
}
#page_guide_index .menu_item a:before {
	font-family: "FontAwesome";
	content: "\f0da";
	display: inline-block;
	vertical-align: middle;
	margin-right: 7px;
	font-size: 100%;
	color: #aaa;
}

/* メディアクエリ */
@media ( min-width: 768px ) {
	#page_guide_index .menu_item_wrap {
		overflow: hidden;
	}
	#page_guide_index .menu_item_wrap .menu_item {
		width: 50%;
		float: left;
		box-sizing: border-box;
		margin-top: 30px;
	}
	#page_guide_index .menu_item_wrap .menu_item:nth-child(odd) {
		padding-right: 15px;
		clear: both;
	}
	#page_guide_index .menu_item_wrap .menu_item:nth-child(even) {
		padding-left: 15px;
	}
	#page_guide_index .menu_item ul {
		margin-top: 15px;
	}
	#page_guide_index .menu_item li {
	}
	#page_guide_index .menu_item a {
		padding: 7px;
		background-color: transparent;
		border-top: none;
	}
	#page_guide_index .menu_item h3 {
		background-color: #333;
		font-weight: bold;
	}
}

/* ==============================================
 * 利用ガイドご注文の流れ
 * Template: guide/flow.tpl
=============================================== */
#page_guide_flow {
}

/* ==============================================
 * 利用ガイドお支払いについて
 * Template: guide/payment.tpl
=============================================== */
#page_guide_payment {
}

/* ==============================================
 * 利用ガイド返品・交換について
 * Template: guide/return.tpl
=============================================== */
#page_guide_return {
}

/* ==============================================
 * 利用ガイド送料・発送について
 * Template: guide/delivery.tpl
=============================================== */
#page_guide_delivery {
}

/* ==============================================
 * 利用ガイド会員登録について
 * Template: guide/entry.tpl
=============================================== */
#page_guide_entry {
}

/* ==============================================
 * 利用ガイドマイページの使い方
 * Template: guide/mypage.tpl
=============================================== */
#page_guide_mypage {
}
/* マイページトップの説明
----------------------------------------------- */
#page_guide_mypage .mypagetop {
}
#page_guide_mypage .mypagetop h3 {
	border-bottom: none;
	margin-bottom: 0;
}
#page_guide_mypage .mypagetop h3:before {
	display: inline-block;
	vertical-align: middle;
	font-size: 120%;
	margin-right: 5px;
}
#page_guide_mypage .mypagetop h3.num1:before {
	content: "\2460";
}
#page_guide_mypage .mypagetop h3.num2:before {
	content: "\2461";
}
#page_guide_mypage .mypagetop h3.num3:before {
	content: "\2462";
}
#page_guide_mypage .mypagetop h3.num4:before {
	content: "\2463";
}
#page_guide_mypage .mypagetop h3.num5:before {
	content: "\2464";
}
#page_guide_mypage .mypagetop h3 + p {
	margin-top: 0;
	margin-left: 2em;
}

/* ==============================================
 * 利用ガイド利用規約
 * Template: guide/kiyaku.tpl
=============================================== */
#page_guide_kiyaku {
}

/* ==============================================
 * 利用ガイドサイトマップ
 * Template: guide/site_map.tpl
=============================================== */
#page_guide_sitemap {
}
/* サイトマップ
------------------------------------------------*/
#page_guide_sitemap .sitemap_area {
}
#page_guide_sitemap .sitemap_area .sitemap_title {
	font-size: 14px;
	margin-top: 15px;
}
#page_guide_sitemap .sitemap_area a {
	color: inherit;
}
/* HOME & 親ul */
#page_guide_sitemap .sitemap_area ul.sm_home,
#page_guide_sitemap .sitemap_area ul.sm_parent {
	margin-top: 15px;
}
#page_guide_sitemap .sitemap_area ul.sm_parent {
	border-top: dotted 1px #ccc;
	overflow: hidden;/*page_itemのfloat用*/
}
/* ページ要素をぶらさげるul要素 */
#page_guide_sitemap .sitemap_area ul.hangpages {
	margin-top: .8em;
	overflow: hidden;/*page_itemのfloat用*/
}
/* ページ要素（il） */
#page_guide_sitemap .sitemap_area li.page_item {
	line-height: 2;
	/*floatさせる場合は以下を記述
	float: left;
	margin-right: .9em;
	*/
}
#page_guide_sitemap .sitemap_area li.page_item:before {
	font-family: "FontAwesome";
	content: "\f0da";
	display: inline-block;
	vertical-align: middle;
	margin-right: 5px;
	font-size: 100%;
	color: #aaa;
}
/* 子ulを持つli要素 */
#page_guide_sitemap .sitemap_area li.has_child {
	margin-left: 1em;
}

/* ==============================================
 * 利用ガイドプライバシーポリシー
 * Template: guide/privacy.tpl
=============================================== */
#page_guide_privacy {
}

/* ==============================================
 * 利用ガイド特定商取引に関する法律に基づく表記
 * Template: guide/order.tpl
=============================================== */
#page_guide_order {
}

/* ==============================================
 * 利用ガイドセキュリティについて
 * Template: guide/security.tpl
=============================================== */
#page_guide_security {
}

/* ==============================================
 * 利用ガイド推奨環境について
 * Template: guide/requirements.tpl
=============================================== */
#page_guide_requirements {
}



/*************************************************
 * Page: マイページ
 * Package: mypage
 * Notes:
 *
*************************************************/
/* ==============================================
 * 共通
=============================================== */
.page_mypage {
}

/* 会員アナウンス表示
----------------------------------------------- */
.page_mypage .user_announce {
	background-color: #f8f8f8;
	padding: 10px;
}
@media ( min-width: 768px ) {
	.page_mypage .user_announce {
		background-color: transparent;
		padding: 0;
		margin: 15px 0;
	}
}

/* マイページナビ
----------------------------------------------- */
/* ※モバイル表示時は.toggleにてトグル制御（parts.css） */
@media ( min-width: 768px ) {
	.page_mypage .btn_toggle {
		display: none;
	}
	.page_mypage .toggle_nav {
		display: block;
	}
	.page_mypage .toggle_nav:after {/*ボタンにbox-shadowを使いたいのでoverflowでなくclearfixを使用*/
		content: "";
		display: block;
		clear: both;
	}
	.page_mypage .toggle_nav li {
		float: left;
		width: 20%;
		box-sizing: border-box;
		border-style: solid;
		border-color: #ccc;
		border-width: 1px 1px 1px 0;
		background-color: transparent;
		text-align: center;
	}
	.page_mypage .toggle_nav li:first-child {
		border-left-width: 1px;
	}
	.page_mypage .toggle_nav li a {
		padding: 8px 4px;
	}
	/* is-active */
	.page_mypage .toggle_nav li.is-active a {
		background-color: #000;
		color: #fff;
		box-shadow: 0 0 0 1px #000;
	}
}

/* ==============================================
 * [include]マイページヘッダー
 * Template: mypage/include_header.tpl
=============================================== */
.page_mypage .mypage_header {
}

/* ==============================================
 * ログインページ
 * Template: mypage/login.tpl
=============================================== */
#page_mypage_login {
}
/* メンバーエリア */
#page_mypage_login .member_area {
	margin-top: 10px;
}
@media ( min-width: 768px ) {
	#page_mypage_login .member_area {
		margin-top: 50px;
	}
}

/* ==============================================
 * 購入履歴一覧
 * Template: mypage/index.tpl
=============================================== */
#page_mypage_index {
}
#page_mypage_index tbody td {
	min-width: 2em;
}
#page_mypage_index .message-info {
	margin-bottom: 0;
}

/* ==============================================
 * 購入履歴詳細
 * Template: mypage/history.tpl
=============================================== */
#page_mypage_history {
}
#page_mypage_history table {
	margin-top: 10px;
	margin-bottom: 10px;
}

/* 購入概要欄 */
#page_mypage_history .purchase_info {
}
/* 再注文ボタン */
#page_mypage_history .reorder_area {
	margin-top: 10px;
}
#page_mypage_history .reorder_area .btn {
	width: 100%;
	padding: 8px 12px;
	border-radius: 4px;
}

@media ( min-width: 768px ) {
	#page_mypage_history .purchase_info {
		padding: 10px;
		border: 1px solid #ccc;
		position: relative;
	}
	#page_mypage_history .reorder_area {
		position: absolute;
		right: 10px;
		bottom: 10px;
	}
	#page_mypage_history .reorder_area .btn {
		width: auto;
	}
	
	/**/
	@media ( min-width: 980px ) {
		#page_mypage_history table {
			margin: 20px 0;
		}
		/*複数配送時のお届け商品とお届先住所tableの隙間を調整*/
		#page_mypage_history .table_shipping_item + .table_shipping_addr {
			position: relative;
			top: -10px;
		}
	}
}

/* ==============================================
 * メール配信履歴詳細
 * Template: mypage/mail_view.tpl
=============================================== */
#page_mypage_mail_view {
}
#page_mypage_mail_view p {
	padding: 10px;
	word-wrap: break-word;
}

/* ==============================================
 * お気に入り一覧
 * Template: mypage/favorite.tpl
=============================================== */
#page_mypage_favorite {
}
#page_mypage_favorite tbody td {
	min-width: 2em;
}
#page_mypage_favorite .message-info {
	margin-bottom: 0;
}

/* お気に入り商品
----------------------------------------------- */
#page_mypage_favorite .favorite_product {
	width: 100%;
	overflow: hidden;
}
#page_mypage_favorite .favorite_product .product_photo_area {
	width: 70px;
	float: left;
}
#page_mypage_favorite .favorite_product .product_photo_area a {
	display: block;
}
#page_mypage_favorite .favorite_product .product_photo_area img {
	width: 100%;
	height: auto;
}
#page_mypage_favorite .favorite_product .product_data_area {
	width: auto;
	float: none;
	margin-left: 80px;
}

/* ==============================================
 * 会員登録内容変更（編集フォーム）
 * Template: mypage/change.tpl
=============================================== */
#page_mypage_change {
}

/* ==============================================
 * 会員登録内容変更（入力内容のご確認）
 * Template: mypage/change_confirm.tpl
=============================================== */
#page_mypage_change_confirm {
}

/* ==============================================
 * 会員登録内容変更（登録完了）
 * Template: mypage/change_complete.tpl
=============================================== */
#page_mypage_change_complete {
}

/* ==============================================
 * お届け先追加・変更（一覧）
 * Template: mypage/delivery.tpl
=============================================== */
#page_mypage_delivery {
}
#page_mypage_delivery tbody td {
	min-width: 2em;
}
#page_mypage_delivery .message-info {
	margin: 0;
}

/* ==============================================
 * お届け先追加・変更（入力編集フォーム）
 * Template: mypage/delivery_addr.tpl
=============================================== */
#page_mypage_delivery_addr {
}

/* ==============================================
 * 退会手続き
 * Template: mypage/refusal.tpl
=============================================== */
#page_mypage_refusal {
}

/* 退会ボタンエリア（refusal, refusal_confirmで共有） */
.page_mypage .refusal_process_btn_area {
	padding: 10px;
	padding-top: 0;
}
.page_mypage .refusal_process_btn_area .refusal_message {
}
.page_mypage .refusal_process_btn_area .process_btn_area {
	margin-top: 10px;
	margin-bottom: 0;
	padding: 0;
}
@media ( min-width: 768px ) {
	.page_mypage .refusal_process_btn_area {
		border: solid 1px #ddd;
		margin: 20px 0;
		padding: 20px;
		text-align: center;
	}
	.page_mypage .refusal_process_btn_area .refusal_message {
	}
	.page_mypage .refusal_process_btn_area .process_btn_area {
		margin-top: 20px;
		margin-bottom: 0;
	}
}

/* ==============================================
 * 退会手続き（退会確認）
 * Template: mypage/refusal_confirm.tpl
=============================================== */
#page_mypage_refusal_confirm {
}

/* ==============================================
 * 退会手続き（退会完了）
 * Template: mypage/refusal_complete.tpl
=============================================== */
#page_mypage_refusal_complete {
}



/*************************************************
 * Page: 新着情報
 * Package: news
 * Notes:
 *
*************************************************/
/* ==============================================
 * 新着情報一覧
 * Template: news/index.tpl
=============================================== */
#page_news_index {
}


/* ==============================================
 * 新着情報詳細
 * Template: news/detail.tpl
=============================================== */
/*
	font-family: 'Noto Sans JP';
	font-family: 'Noto Serif JP';
*/
#page_news_detail {
}
#page_news_detail .section {
	max-width: 1080px;
}
#page_news_detail .section_body {
	padding-top: 0;
}

#page_news_detail .section_title {
	margin-bottom: 0;
}
#page_news_detail .section_title time {
	display: block;
	margin: 0.75em;
	font-family: Georgia;
	font-size: 22px;
}
#page_news_detail h1 {
	font-family: 'Noto Serif JP';
	font-size: 24px;
	font-weight: 500;
	line-height: 1.7;
	margin: .5em 0;
}
@media ( max-width: 767px ) {
	#page_news_detail h1 {
		font-size: 18px;
		padding: 0 20px;
	}
}
@media ( min-width: 768px ) and ( max-width: 979px ) {
	#page_news_detail h1 {
		font-size: 20px;
		padding: 0 30px;
	}
}

/* .news_body
----------------------------------------------- */
#page_news_detail .news_body {
	font-family: 'Noto Serif JP';
	font-weight: 400;
}
#page_news_detail .news_body h2 {
	font-size: 22px;
	font-weight: 500;
	line-height: 1.7;
}
#page_news_detail .news_body p {
	font-size: 16px;
	line-height: 1.8;
	margin-top: 1em;
	text-align: justify;
}
#page_news_detail .news_body img {
	width: 100%;
	height: auto;
}
@media ( max-width: 767px ) {
	#page_news_detail .news_body h2 {
		font-size: 16px;
	}
	#page_news_detail .news_body p {
		font-size: 15px;
	}
}
@media ( min-width: 768px ) and ( max-width: 979px ) {
	#page_news_detail .news_body h2 {
		font-size: 20px;
	}
	#page_news_detail .news_body p {
		font-size: 16px;
	}
}

/* .main_comment
----------------------------------------------- */
#page_news_detail .main_comment {
	font-size: 18px;
	line-height: 1.7;
	margin: 2em 0;
	text-align: justify;
}
@media ( max-width: 767px ) {
	#page_news_detail .main_comment {
		font-size: 16px;
		margin: 20px 0;
	}
}
@media ( min-width: 768px ) and ( max-width: 979px ) {
	#page_news_detail .main_comment {
		font-size: 17px;
		margin: 30px 0;
	}
}

/* .news_template（共通）
----------------------------------------------- */
#page_news_detail .news_template {
}
@media ( max-width: 767px ) {
	#page_news_detail .news_template {
		margin: 20px 0;
	}
}
@media ( min-width: 768px ) and ( max-width: 979px ) {
	#page_news_detail .news_template {
		margin: 30px 0;
	}
}
@media ( min-width: 980px ) {
	#page_news_detail .news_template {
		margin: 60px 0;
	}
}

/* .news_template（テンプレートA）
----------------------------------------------- */
#page_news_detail .template_a {
}
#page_news_detail .template_a .image {
}
#page_news_detail .template_a .content {
}

/* .news_template（テンプレートB）
----------------------------------------------- */
#page_news_detail .template_b {
}
@media ( max-width: 767px ) {
	#page_news_detail .template_b .image {
	}
	#page_news_detail .template_b .content {
		margin-top: 15px;
	}
}
@media ( min-width: 768px ) and ( max-width: 979px ) {
	#page_news_detail .template_b .image {
		float: left;
		width: 50%;
		margin: 0 20px 10px 0;
	}
	
	/* リバース*/
	#page_news_detail .template_b.reverse .image {
		float: right;
		width: 50%;
		margin: 0 0 10px 20px;
	}
}
@media ( min-width: 980px ) {
	#page_news_detail .template_b {
		display: flex;
	}
	#page_news_detail .template_b .image {
		flex: 0 0 auto;
		width: 50%;
		max-width: 530px;
	}
	#page_news_detail .template_b .content {
		padding-left: 30px;
	}
	
	/* リバース*/
	#page_news_detail .template_b.reverse .image {
		order: 2;
	}
	#page_news_detail .template_b.reverse .content {
		order: 1;
		padding-left: 0;
		padding-right: 30px;
	}
}

/* .news_template（テンプレートC）
----------------------------------------------- */
#page_news_detail .template_c {
}
@media ( max-width: 767px ) {
	#page_news_detail .template_c .item {
		margin: 20px 0;
	}
}
@media ( min-width: 768px ) and ( max-width: 979px ) {
	#page_news_detail .template_c {
		display: flex;
		justify-content: space-between;
	}
	#page_news_detail .template_c .item {
		width: calc((100% - 30px) / 2);
	}
}
@media ( min-width: 980px ) {
	#page_news_detail .template_c {
		display: flex;
		justify-content: space-between;
	}
	#page_news_detail .template_c .item {
		width: calc((100% - 40px) / 2);
	}
}

/* .news_template（テンプレートD）
----------------------------------------------- */
#page_news_detail .template_d {
}
@media ( max-width: 767px ) {
	#page_news_detail .template_d .image {
		float: left;
		width: 50%;
		margin: 0 10px 10px 0;
	}
}
@media ( min-width: 768px ) and ( max-width: 979px ) {
	#page_news_detail .template_d {
		display: flex;
		justify-content: space-between;
	}
	#page_news_detail .template_d .item {
		width: calc((100% - 40px) / 3);
	}
}
@media ( min-width: 980px ) {
	#page_news_detail .template_d {
		display: flex;
		justify-content: space-between;
	}
	#page_news_detail .template_d .item {
		width: calc((100% - 60px) / 3);
	}
}



/*************************************************
 * Page: 特定商取引に関する法律に基づく表記
 * Package: order
 *
*************************************************/
#page_order_index {
}



/*************************************************
 * Page: 実績一覧・詳細
 * Package: portfolio
 *
*************************************************/
/* ==============================================
 * 実績一覧
 * Template: portfolio/list.tpl
=============================================== */
#page_portfolio_list {
}

/* 制作カテゴリ
----------------------------------------------- */
#page_portfolio_list #section_category {
}
#page_portfolio_list #section_category .section_body {
	padding-top: 0;
	padding-bottom: 0;
}
#page_portfolio_list #section_category ul {
	display: flex;
	justify-content: space-between;
}
#page_portfolio_list #section_category li {
	flex: 0 0 auto;
	width: calc(100% / 5);
	box-sizing: border-box;
	border-left: solid 1px #6E6E6E;
}
#page_portfolio_list #section_category li:last-child {
	border-right: solid 1px #6E6E6E;
}
#page_portfolio_list #section_category li a {
	display: flex;
	justify-content: center;
	align-items: center;
	line-height: 1.2;
	padding: 0 10px;
	text-align: center;
	color: inherit;
}
#page_portfolio_list #section_category li.is-active a {
	background-color: #000;
	color: #fff;
	pointer-events: none;
}
@media ( max-width: 767px ) {
	#page_portfolio_list #section_category .section_body {
		padding-top: 30px;
		padding-bottom: 0px;
	}
	#page_portfolio_list #section_category ul {
		display: block;
	}
	#page_portfolio_list #section_category li {
		width: 100%;
		border: none;
	}
	#page_portfolio_list #section_category li:first-child {
		border-left: none;
	}
	#page_portfolio_list #section_category li + li {
		margin-top: 5px;
	}
	#page_portfolio_list #section_category li a {
		height: 40px;
		border-radius: 5px;
		font-size: 16px;
		border: solid 1px #ddd;
	}
}
@media ( min-width: 768px ) and ( max-width: 979px ) {
	#page_portfolio_list #section_category .section_body {
		padding-top: 40px;
		padding-bottom: 20px;
	}
	#page_portfolio_list #section_category li a {
		height: 50px;
		font-size: 16px;
	}
}
@media ( min-width: 980px ) {
	#page_portfolio_list #section_category .section_body {
		padding-top: 40px;
		padding-bottom: 40px;
	}
	#page_portfolio_list #section_category li a {
		height: 50px;
		font-size: 17px;
		transition: .3s;
	}
	#page_portfolio_list #section_category li a:hover {
		text-decoration: none;
		background-color: #f0f0f0;
	}
}
@media ( min-width: 1280px ) {
	#page_portfolio_list #section_category li a {
		height: 50px;
		font-size: 20px;
	}
}

/* 実績一覧
----------------------------------------------- */
#page_portfolio_list #section_portfolio {
}
#page_portfolio_list #section_portfolio .item_wrap {
	display: flex;
	justify-content: flex-start;
	flex-flow: row wrap;
}
#page_portfolio_list #section_portfolio .item {
	flex: 0 0 auto;
}
#page_portfolio_list #section_portfolio .item a {
	display: block;
}
#page_portfolio_list #section_portfolio .item .item_image {
}
#page_portfolio_list #section_portfolio .item .item_image img {
	max-width: 100%;
	height: auto;
}
#page_portfolio_list #section_portfolio .item .item_overlay {
	display: none;
}
#page_portfolio_list #section_portfolio .item .item_title {
	color: #444;
	text-align: center;
}
@media ( max-width: 767px ) {
	#page_portfolio_list #section_portfolio {
	}
	#page_portfolio_list #section_portfolio .item_wrap {
	}
	#page_portfolio_list #section_portfolio .item {
		width: 100%;
	}
	/* .item_title */
	#page_portfolio_list #section_portfolio .item .item_title {
		font-size: 15px;
		padding: 10px;
	}
}
@media ( min-width: 768px ) and ( max-width: 979px ) {
	#page_portfolio_list #section_portfolio {
		margin-top: 0;
	}
	#page_portfolio_list #section_portfolio .item_wrap {
		margin-top: -20px !important;
	}
	#page_portfolio_list #section_portfolio .item {
		width: calc((100% - 30px) / 2);
		margin-left: 30px;
		margin-top: 20px;
	}
	#page_portfolio_list #section_portfolio .item:nth-child(2n+1) {
		margin-left: 0;
	}
	/* .item_title */
	#page_portfolio_list #section_portfolio .item .item_title {
		font-size: 18px;
		padding: 15px;
	}
}
@media ( min-width: 980px ) {
	#page_portfolio_list #section_portfolio {
	}
	#page_portfolio_list #section_portfolio .item_wrap {
		margin-top: -20px !important;
	}
	#page_portfolio_list #section_portfolio .item {
		width: calc((100% - 50px) / 2);
		margin-left: 50px;
		margin-top: 20px;
	}
	#page_portfolio_list #section_portfolio .item:nth-child(2n+1) {
		margin-left: 0;
	}
	
	/* オーバーレイコンテンツ */
	#page_portfolio_list #section_portfolio .item a {
		position: relative;
	}
	#page_portfolio_list #section_portfolio .item a .item_overlay {
		display: flex;
		flex-flow: column;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 100%;
		color: #fff;
		position: absolute;
		top: 0;
		left: 0;
		padding: 10%;
		box-sizing: border-box;
	}
	#page_portfolio_list #section_portfolio .item_overlay .title {
		font-size: 26px;
		text-align: center;
	}
	#page_portfolio_list #section_portfolio .item_overlay .title_sub {
		display: inline-block;
		font-size: 14px;
		margin-top: 0.5em;
		/* 装飾線用 */
		position: relative;
		padding: 0 10px;
	}
	/* サブタイトル左右装飾線 */
	#page_portfolio_list #section_portfolio .item_overlay .title_sub:before,
	#page_portfolio_list #section_portfolio .item_overlay .title_sub:after {
		content: "";
		position: absolute;
		top: 50%;
		display: block;
		width: 32px;
		height: 1px;
		background-color: #fff;
	}
	#page_portfolio_list #section_portfolio .item_overlay .title_sub:before {
		right: 100%;
	}
	#page_portfolio_list #section_portfolio .item_overlay .title_sub:after {
		left: 100%;
	}
	#page_portfolio_list #section_portfolio .item_overlay .comment {
		font-size: 15px;
		line-height: 1.8;
		margin-top: 2em;
	}
	
	/* .item_title */
	#page_portfolio_list #section_portfolio .item .item_title {
		line-height: 1.2;
		font-size: 22px;
		padding: 20px;
	}
	
	/*
	 * マウスhoverで背景を拡大して暗く
	 * a要素自体を拡大させると、オーバーレイコンテンツもつられて拡大し文字がカクカクするのでa要素自体は拡大させずに
	 * 画像エリアだけを拡大させる事にし、そのために、オーバーレイコンテンツに黒背景は用意せず、画像エリアをfilter:brightness()にて黒背景が敷かれたように表現する
	 * つまり、オーバーレイコンテンツは背景は無く文字だけとし、a要素領域もオーバーレイ領域も拡大は一切させない。
	 */
	/* .item_image */
	#page_portfolio_list #section_portfolio .item a .item_image {
		transition: transform .5s, filter 0.8s;
	}
	#page_portfolio_list #section_portfolio .item a:hover .item_image {
		transform: scale(1.06);
		filter: brightness(25%);
	}
	/* .item_overlay */
	#page_portfolio_list #section_portfolio .item a .item_overlay {
		visibility: hidden;
		opacity: 0;
		transform: translate3d(0,1em,0);
		/*filter: blur(10px);*/
		transition: .4s;
	}
	#page_portfolio_list #section_portfolio .item a:hover .item_overlay {
		visibility: visible;
		opacity: 1;
		transform: translate3d(0,0,0);
		/*filter: blur(0);*/
	}
	/* a + .item_title */
	#page_portfolio_list #section_portfolio .item a + .item_title {
		transition: .3s;
	}
	#page_portfolio_list #section_portfolio .item a:hover + .item_title {
		opacity: 0;
		visibility: hidden;
	}
}
/* 収まりが良くなるよう微調整 */
@media ( min-width: 980px ) and ( max-width: 1279px ) {
	#page_portfolio_list #section_portfolio .item {
		width: calc((100% - 40px) / 2);
		margin-left: 30px;
	}
	#page_portfolio_list #section_portfolio .item a .item_overlay {
		padding: 20px;
	}
	#page_portfolio_list #section_portfolio .item_overlay .comment {
		margin-top: 1em;
	}
}


/* ==============================================
 * 実績詳細
 * Template: portfolio/detail.tpl
=============================================== */
#page_portfolio_detail {
}

/* 実績タイトル
----------------------------------------------- */
#page_portfolio_detail .case_title {
	line-height: 1.2;
	text-align: center;
}
#page_portfolio_detail .case_title .main_title {
	font-size: 30px;
	text-shadow: 0 0 #000;
	margin-bottom: 20px;
}
#page_portfolio_detail .case_title .sub_title {
	font-size: 20px;
}
@media ( max-width: 767px ) {
	#page_portfolio_detail .case_title {
		padding: 0 20px;
	}
	#page_portfolio_detail .case_title .main_title {
		font-size: 20px;
		margin-bottom: 10px;
	}
	#page_portfolio_detail .case_title .sub_title {
		font-size: 16px;
	}
}
@media ( min-width: 768px ) and ( max-width: 979px ) {
	#page_portfolio_detail .case_title {
		padding: 0 30px;
	}
}
@media ( min-width: 980px ) {
	#page_portfolio_detail .case_title {
		padding: 0 40px;
	}
}

/* 実績info
----------------------------------------------- */
#page_portfolio_detail .case_info {
	max-width: 1280px;
}
#page_portfolio_detail .case_info .wrap {
	display: flex;
	justify-content: space-between;
	flex-flow: row wrap;
	border-top: solid 1px #eee;
}
#page_portfolio_detail .case_info dl {
	display: flex;
	align-items: center;
	width: 100%;
	border-bottom: solid 1px #eee;
}
#page_portfolio_detail .case_info dt {
	flex: 0 0 auto;
}
#page_portfolio_detail .case_info dd {
	flex: 1 1 auto;
}
#page_portfolio_detail .case_info a {
	color: inherit;
}
/* ul inline */
#page_portfolio_detail .case_info dd ul {
	margin-left: -15px;
	margin-top: -15px;
}
#page_portfolio_detail .case_info dd ul li {
	display: inline-block;
	margin-left: 15px;
	margin-top: 15px;
}
#page_portfolio_detail .case_info dd ul li a {
	display: block;
	border: solid 1px #ddd;
	border-radius: 4px;
	padding: 3px 1em;
	box-sizing: border-box;
	transition: .3s;
}
#page_portfolio_detail .case_info dd ul li a:hover {
	text-decoration: none;
	background-color: #eee;
}
/* ul inline type_b */
#page_portfolio_detail .case_info dd ul.type_b li a {
	background-color: #ddd;
	border: none;
}
#page_portfolio_detail .case_info dd ul.type_b li a:hover {
	/*background-color: #bbb;*/
	/* 属性タグは管理画面から色を設定できるのでhoverはopacityで表現 */
	opacity: 0.7;
}
@media ( max-width: 767px ) {
	#page_portfolio_detail .case_info {
		padding: 0 20px;
		margin-top: 20px;
		font-size: 15px;
	}
	#page_portfolio_detail .case_info dl {
		padding: 10px 0;
	}
	#page_portfolio_detail .case_info dt {
		width: 40%;
	}
	#page_portfolio_detail .case_info dd {
	}
	/* .sp_row */
	#page_portfolio_detail .case_info dl.sp_row {
		display: block;
		padding: 10px 0;
	}
	#page_portfolio_detail .case_info dl.sp_row dt {
		display: block;
		width: 100%;
	}
	#page_portfolio_detail .case_info dl.sp_row dd {
		display: block;
		margin-top: 10px;
	}
	/* ul inline */
	#page_portfolio_detail .case_info dd ul {
		margin-left: -5px;
		margin-top: -5px;
	}
	#page_portfolio_detail .case_info dd ul li {
		margin-left: 5px;
		margin-top: 5px;
	}
}
@media ( min-width: 768px ) and ( max-width: 979px ) {
	#page_portfolio_detail .case_info {
		padding: 0 30px;
		margin-top: 30px;
		font-size: 15px;
	}
	#page_portfolio_detail .case_info dl {
		padding: 12px 0;
	}
	#page_portfolio_detail .case_info dt {
		width: 15em;
	}
	/* ul inline */
	#page_portfolio_detail .case_info dd ul {
		margin-left: -10px;
		margin-top: -10px;
	}
	#page_portfolio_detail .case_info dd ul li {
		margin-left: 10px;
		margin-top: 10px;
	}
}
@media ( min-width: 980px ) {
	#page_portfolio_detail .case_info {
		margin-top: 40px;
		font-size: 16px;
	}
	#page_portfolio_detail .case_info dl {
		padding: 15px 0;
	}
	#page_portfolio_detail .case_info dt {
		width: 15em;
	}
	#page_portfolio_detail .case_info dl.half {
		width: 48.5%;
	}
}

/* 制作のポイント
----------------------------------------------- */
#page_portfolio_detail .case_point {
	max-width: 1280px;
}
#page_portfolio_detail .case_point h2 {
	background-color: #000;
	color: #fff;
	font-size: 16px;
	text-align: center;
	line-height: 1.2;
	padding: 0.9em;
}
#page_portfolio_detail .case_point .content {
	background-color: #F2F2F2;
	font-size: 14px;
	line-height: 1.9;
	padding: 1.5em 2em;
}
@media ( max-width: 767px ) {
	#page_portfolio_detail .case_point {
		padding: 0;
		margin-top: 20px;
	}
	#page_portfolio_detail .case_point h2 {
		font-size: 16px;
		line-height: 1.2;
		padding: 8px;
	}
	#page_portfolio_detail .case_point .content {
		line-height: 1.5;
		padding: 15px 20px;
	}
}
@media ( min-width: 768px ) and ( max-width: 979px ) {
	#page_portfolio_detail .case_point {
		padding: 0 30px;
		margin-top: 30px;
	}
}
@media ( min-width: 980px ) {
	#page_portfolio_detail .case_point {
		margin-top: 40px;
	}
}

/* 事例画像
----------------------------------------------- */
#page_portfolio_detail .case_image {
	max-width: 1500px;
}
#page_portfolio_detail .case_image .title {
	text-align: center;
	position: relative;
}
#page_portfolio_detail .case_image .title span {
	display: inline-block;
	background-color: #fff;
	padding: 0 1em;
	position: relative;
}
#page_portfolio_detail .case_image .title:before {
	content: "";
	display: block;
	width: 100%;
	height: 1px;
	background-color: #ddd;
	position: absolute;
	top: 50%;
	left: 0;
}
#page_portfolio_detail .case_image .wrap {
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-start;
}
#page_portfolio_detail .case_image .wrap li {
	flex: 0 0 auto;
}
#page_portfolio_detail .case_image .wrap li .image_title {
	font-size: 14px;
	line-height: 1.2;
	margin-bottom: 0.7em;
}
#page_portfolio_detail .case_image .wrap li img {
	max-width: 100%;
	height: auto;
	border: solid 1px #ddd;
	/*box-sizing: border-box;*/
}

/* 事例画像 LP用 */
#page_portfolio_detail .case_image .lp .wrap {
	justify-content: center;
}
#page_portfolio_detail .case_image .lp .wrap li {
	flex: 0 1 auto;
}

@media ( max-width: 767px ) {
	#page_portfolio_detail .case_image {
		padding: 0 20px;
		margin-top: 20px;
	}
	#page_portfolio_detail .case_image .title {
		font-size: 17px;
		margin-bottom: 10px;
	}
	/* 事例画像 PC用 */
	#page_portfolio_detail .case_image .lp + .pc {
		margin-top: 20px;
	}
	#page_portfolio_detail .case_image .pc {
		/*display: none;*/
	}
	#page_portfolio_detail .case_image .pc .wrap {
	}
	#page_portfolio_detail .case_image .pc .wrap li {
		width: 100%;
	}
	#page_portfolio_detail .case_image .pc .wrap li + li {
		margin-top: 10px;
	}
	/* 事例画像 SP用 */
	#page_portfolio_detail .case_image .pc + .sp {
		margin-top: 20px;
	}
	#page_portfolio_detail .case_image .sp .wrap {
		margin-top: -10px;
	}
	#page_portfolio_detail .case_image .sp .wrap li {
		width: calc((100% - 10px) / 2);
		margin-left: 10px;
		margin-top: 10px;
	}
	#page_portfolio_detail .case_image .sp .wrap li:nth-child(2n+1) {
		margin-left: 0;
	}
}
@media ( min-width: 768px ) and ( max-width: 979px ) {
	#page_portfolio_detail .case_image {
		padding: 0 30px;
		margin-top: 40px;
	}
	#page_portfolio_detail .case_image .title {
		font-size: 20px;
		margin-bottom: 20px;
	}
	/* 事例画像 PC用 */
	#page_portfolio_detail .case_image .lp + .pc {
		margin-top: 50px;
	}
	#page_portfolio_detail .case_image .pc .wrap {
		margin-top: -20px;
	}
	#page_portfolio_detail .case_image .pc .wrap li {
		width: calc((100% - 20px) / 2);
		margin-left: 20px;
		margin-top: 20px;
	}
	#page_portfolio_detail .case_image .pc .wrap li:nth-child(2n+1) {
		margin-left: 0;
	}
	/* 事例画像 SP用 */
	#page_portfolio_detail .case_image .pc + .sp {
		margin-top: 50px;
	}
	#page_portfolio_detail .case_image .sp .wrap {
		margin-top: -20px;
	}
	#page_portfolio_detail .case_image .sp .wrap li {
		width: calc((100% - 40px) / 3);
		margin-left: 20px;
		margin-top: 20px;
	}
	#page_portfolio_detail .case_image .sp .wrap li:nth-child(3n+1) {
		margin-left: 0;
	}
}
@media ( min-width: 980px ) {
	#page_portfolio_detail .case_image {
		margin-top: 50px;
		overflow: hidden;
		padding-top: 40px;
		padding-bottom: 90px;
	}
	#page_portfolio_detail .case_image .title {
		font-size: 23px;
		margin-bottom: 40px;
	}
	/* 事例画像 PC用 */
	#page_portfolio_detail .case_image .lp + .pc {
		margin-top: 100px;
	}
	#page_portfolio_detail .case_image .pc .wrap {
		margin-top: -50px;
	}
	#page_portfolio_detail .case_image .pc .wrap li {
		width: calc((100% - 60px) / 2);
		margin-left: 60px;
		margin-top: 50px;
	}
	#page_portfolio_detail .case_image .pc .wrap li:nth-child(2n+1) {
		margin-left: 0;
	}
	/* 事例画像 SP用 */
	#page_portfolio_detail .case_image .pc + .sp {
		margin-top: 100px;
	}
	#page_portfolio_detail .case_image .sp .wrap {
		margin-top: -50px;
	}
	#page_portfolio_detail .case_image .sp .wrap li {
		width: calc((100% - 120px) / 3);
		margin-left: 60px;
		margin-top: 50px;
	}
	#page_portfolio_detail .case_image .sp .wrap li:nth-child(3n+1) {
		margin-left: 0;
	}
}

/* クオリティ要素
----------------------------------------------- */
#page_portfolio_detail .case_quality {
}

/* .quality_head */
#page_portfolio_detail .case_quality .quality_head {
	background-color: #F7F7F7;
}
#page_portfolio_detail .case_quality .quality_head h2.title {
	text-align: center;
	position: relative;
	max-width: 1500px;
	margin: 0 auto;
}
#page_portfolio_detail .case_quality .quality_head h2.title span {
	display: inline-block;
	background-color: #F7F7F7;
	padding: 0 1em;
	position: relative;
}
#page_portfolio_detail .case_quality .quality_head h2.title:before {
	content: "";
	display: block;
	width: 100%;
	height: 1px;
	background-color: #ddd;
	position: absolute;
	top: 50%;
	left: 0;
}

/* .quality_body frame */
#page_portfolio_detail .case_quality .quality_row {
}
#page_portfolio_detail .case_quality .quality_row:nth-child(2n+1) {
	background-color: #F7F7F7;
}
#page_portfolio_detail .case_quality .quality_row .wrap {
	max-width: 1220px;
	margin: 0 auto;
	display: flex;
}
#page_portfolio_detail .case_quality .quality_row .wrap .quality_item {
	flex: 0 0 auto;
}
/* .quality_item */
#page_portfolio_detail .case_quality .quality_item {
}
#page_portfolio_detail .case_quality .quality_item .title {
	font-weight: normal;
}
#page_portfolio_detail .case_quality .quality_item .image {
	border: solid 7px #CBCBCB;
}
#page_portfolio_detail .case_quality .quality_item .image img {
	max-width: 100%;
	height: auto;
}
#page_portfolio_detail .case_quality .quality_item .movie {
	/* .movie_containerを使用 */
}
#page_portfolio_detail .case_quality .quality_item .image + .movie {
	margin-top: 10px;
}
#page_portfolio_detail .case_quality .quality_item .comment {
}
#page_portfolio_detail .case_quality .quality_item .quality_btn {
	display: flex;
	justify-content: center;
	align-items: center;
	line-height: 1.2;
	background-color: #000;
	color: #fff;
}
@media ( max-width: 767px ) {
	#page_portfolio_detail .case_quality {
		padding: 0;
		margin-top: 20px;
	}
	#page_portfolio_detail .case_quality .quality_head {
		padding: 20px 20px 0;
	}
	#page_portfolio_detail .case_quality .quality_head h2.title {
		font-size: 17px;
	}
	/* frame ※枠.quality_rowを無視して1個置きに背景色を変える形に */
	#page_portfolio_detail .case_quality .quality_row:nth-child(2n+1) {
		background-color: transparent;
	}
	#page_portfolio_detail .case_quality .quality_row .wrap {
		padding: 0;
		display: block;
	}
	#page_portfolio_detail .case_quality .quality_row .wrap .quality_item {
		width: 100%;
		padding: 20px 20px;
		box-sizing: border-box;
	}
	#page_portfolio_detail .case_quality .quality_row .wrap .quality_item:nth-child(2n+1) {
		background-color: #F7F7F7;
	}
	/* .quality_item */
	#page_portfolio_detail .case_quality .quality_item .title {
		font-size: 18px;
	}
	#page_portfolio_detail .case_quality .quality_item .image {
		margin-top: 10px;
		border-width: 3px;
	}
	#page_portfolio_detail .case_quality .quality_item .comment {
		margin-top: 10px;
		font-size: 14px;
	}
	#page_portfolio_detail .case_quality .quality_item .quality_btn {
		margin-top: 10px;
		height: 40px;
		font-size: 16px;
	}
}
@media ( min-width: 768px ) and ( max-width: 979px ) {
	#page_portfolio_detail .case_quality {
		padding: 0;
		margin-top: 30px;
	}
	#page_portfolio_detail .case_quality .quality_head {
		padding: 30px 30px;
	}
	#page_portfolio_detail .case_quality .quality_head h2.title {
		font-size: 20px;
	}
	/* frame */
	#page_portfolio_detail .case_quality .quality_row .wrap {
		padding: 30px;
	}
	#page_portfolio_detail .case_quality .quality_row:first-child .wrap {
		/* h2.title追加により余白調整 */
		padding-top: 0;
	}
	#page_portfolio_detail .case_quality .quality_row .wrap .quality_item {
		width: calc((100% - 30px) / 2);
		margin-left: 30px;
	}
	#page_portfolio_detail .case_quality .quality_row .wrap .quality_item:nth-child(2n+1) {
		margin-left: 0;
	}
	/* .quality_item */
	#page_portfolio_detail .case_quality .quality_item .title {
		font-size: 20px;
	}
	#page_portfolio_detail .case_quality .quality_item .image {
		margin-top: 20px;
		border-width: 5px;
	}
	#page_portfolio_detail .case_quality .quality_item .comment {
		margin-top: 20px;
		font-size: 15px;
	}
	#page_portfolio_detail .case_quality .quality_item .quality_btn {
		margin-top: 20px;
		height: 45px;
		font-size: 18px;
	}
}
@media ( min-width: 980px ) {
	#page_portfolio_detail .case_quality {
		margin-top: 40px;
	}
	#page_portfolio_detail .case_quality .quality_head {
		padding: 60px 0;
	}
	#page_portfolio_detail .case_quality .quality_head h2.title {
		font-size: 23px;
	}
	/* frame */
	#page_portfolio_detail .case_quality .quality_row .wrap {
		padding: 80px 40px 60px;
	}
	#page_portfolio_detail .case_quality .quality_row:first-child .wrap {
		/* h2.title追加により余白調整 */
		padding-top: 0;
	}
	#page_portfolio_detail .case_quality .quality_row .wrap .quality_item {
		width: calc((100% - 70px) / 2);
		margin-left: 70px;
	}
	#page_portfolio_detail .case_quality .quality_row .wrap .quality_item:nth-child(2n+1) {
		margin-left: 0;
	}
	/* .quality_item */
	#page_portfolio_detail .case_quality .quality_item .title {
		font-size: 23px;
		line-height: 1.6;
	}
	#page_portfolio_detail .case_quality .quality_item .image {
		margin-top: 25px;
	}
	#page_portfolio_detail .case_quality .quality_item .image + .movie {
		margin-top: 20px;
	}
	#page_portfolio_detail .case_quality .quality_item .comment {
		margin-top: 25px;
		font-size: 15px;
		line-height: 1.7;
	}
	#page_portfolio_detail .case_quality .quality_item .quality_btn {
		margin-top: 25px;
		height: 55px;
		font-size: 20px;
		transition: .3s;
	}
	#page_portfolio_detail .case_quality .quality_item .quality_btn:hover {
		text-decoration: none;
		background-color: #333;
	}
}









/*************************************************
 * Page: ショッピングフロー
 * Package: shopping
 *
*************************************************/
/* ==============================================
 * 共通
=============================================== */
.page_shopping {
}
@media ( min-width: 980px ) {
	.page_shopping .section + .section {
		margin-top: 40px;
	}
}

/* ポイント表示
----------------------------------------------- */
.page_shopping .point_announce {
	padding: 1em;
	background-color: #f0f0f0;
	margin-bottom: 10px;
}

/* フォーム入力無効エリア
----------------------------------------------- */
/* 「配送方法を選択してください」メッセージ */
.non-select-msg {
}
.non-select-msg p {
	padding: 10px;
	background-color: #235282;
	color: #fff;
	font-size: 14px;
}
/* 条件が整う迄はマスクされるエリア */
.select-msg {
	display: none;
	padding-top: 10px !important;/*連続section_bodyは上paddingをリセットするので強制*/
}

/* お届け時間指定欄まわり
----------------------------------------------- */
.page_shopping .shipping_wrap {
}
/* お届け日・時間指定欄 */
.page_shopping .shipping_datetime {
	background-color: #eee;
	padding-top: 10px;
	padding-right: 10px;
	margin-top: 10px;
}
.page_shopping .shipping_datetime dl,
.page_shopping .shipping_datetime dt,
.page_shopping .shipping_datetime dd {
	display: inline-block;
	vertical-align: middle;
}
.page_shopping .shipping_datetime dl {
	margin-left: 10px;
	margin-bottom: 10px;
}
.page_shopping .shipping_datetime dt:after {
	content: "：";
}

/* 複数配送時のお届先wrap */
.page_shopping .shipping_wrap + .shipping_wrap {
	margin-top: 10px;
}

/* 確認ページでのクレジット情報欄 */
.page_shopping .confirm_credit {
	margin-top: 1em;
	padding-top: 1em;
	border-top: dotted 1px #ccc;
}


/* ==============================================
 * 配送・お支払いの指定（会員フロー）
 * Template: shopping/login_deliv.tpl
=============================================== */
#page_shopping_login_deliv {
}

/* ==============================================
 * お客様情報入力（非会員フロー）
 * Template: shopping/nonmember_input.tpl
=============================================== */
#page_shopping_nonmember_input {
}

/* ==============================================
 * 配送・お支払いの指定（非会員フロー）
 * Template: shopping/payment.tpl
=============================================== */
#page_shopping_payment {
}

/* ==============================================
 * お届け先の複数指定
 * Template: shopping/multiple.tpl
=============================================== */
#page_shopping_multiple {
}
/* 複数配送指定
----------------------------------------------- */
#page_shopping_multiple .shipping_select {
	background-color: #eee;
	margin-top: 10px;
	padding: 10px 10px 0 0;
	width: 100%;
	box-sizing: border-box;
}
#page_shopping_multiple .shipping_select dl,
#page_shopping_multiple .shipping_select dt,
#page_shopping_multiple .shipping_select dd {
	display: inline-block;
	vertical-align: middle;
}
#page_shopping_multiple .shipping_select dl {
	margin-left: 10px;
	margin-bottom: 10px;
	font-size: 13px;
}
#page_shopping_multiple .shipping_select dt {
	margin-right: 5px;
}
#page_shopping_multiple .shipping_select dd {
}
/* 数量 */
#page_shopping_multiple .shipping_select .shipping_quantity {
}
#page_shopping_multiple .shipping_select .shipping_quantity input[type="tel"] {
	text-align: center;
	width: 3em;
}
/* お届け先 */
#page_shopping_multiple .shipping_select .shipping_addr {
}
#page_shopping_multiple .shipping_select .shipping_addr select {
	width: 100%;
}


/* ==============================================
 * ご注文内容の確認
 * Template: shopping/confirm.tpl
=============================================== */
#page_shopping_confirm {
}

/* ==============================================
 * ご注文完了
 * Template: shopping/complete.tpl
=============================================== */
#page_shopping_complete {
}



/*************************************************
 * Page: シンプルカートページ
 * Package: ecpcart
 *
*************************************************/
#page_ecpcart_index {
}
@media ( min-width: 768px ) and ( max-width: 979px ) {
	#page_ecpcart_index .for_nonmember h3 {
		padding: 0 35px;
	}
}

/* ==============================================
 * シンプルカート：お届け先指定（ログインメンバー）
=============================================== */
@media ( max-width: 767px ) {
	#page_ecpcart_index .sction_deliv {
		margin-top: 20px;
	}
}
@media ( min-width: 768px ) and ( max-width: 979px ) {
	#page_ecpcart_index .sction_deliv {
		margin-top: 20px;
	}
}
@media ( min-width: 980px ) {
	#page_ecpcart_index .sction_deliv {
		margin-top: 40px;
	}
}

/* ==============================================
 * シンプルカート：メンバーセクション
=============================================== */
#page_ecpcart_index .section_member {
}
/* title */
#page_ecpcart_index .section_member .title_member {
	font-size: 18px;
}
#page_ecpcart_index .section_member .title_member:before {
	display: inline-block;
	width: 26px;
	height: 26px;
	text-align: center;
	line-height: 26px;
	margin-right: .5em;
	font-family: "FontAwesome";
	font-size: 120%;
	background-color: #333;
	color: #fff;
	border-radius: 3px;
}
#page_ecpcart_index .section_member .title_member.for_member:before {
	content: "\f023";
}
#page_ecpcart_index .section_member .title_member.for_nonmember:before {
	content: "\f007";
}
/* notes */
#page_ecpcart_index .section_member .notes {
	margin: .5em 0;
}
/* メンバーログイン */
#page_ecpcart_index .member_login {
}
#page_ecpcart_index .member_login .wrap {
	background-color: #f4f4f4;
}
#page_ecpcart_index .member_login .section_body {
	padding-bottom: 0;
}
#page_ecpcart_index .member_login .btn_process {
	margin-top: 10px;
}
/* レイアウト */
@media ( max-width: 767px ) {
	#page_ecpcart_index .section_member {
		margin-top: 20px;
	}
	#page_ecpcart_index .section_member .section_head {
		padding: 0 10px;
	}
	#page_ecpcart_index .member_login {
	}
	#page_ecpcart_index .member_login .wrap {
		padding: 10px;
	}
	#page_ecpcart_index .member_login .wrap .section_head {
		padding-left: 0;
		padding-right: 0;
	}
	#page_ecpcart_index .member_login .wrap .section_body {
		padding-left: 0;
		padding-right: 0;
	}
}
@media ( min-width: 768px ) and ( max-width: 979px ) {
	#page_ecpcart_index .section_member {
		margin-top: 20px;
	}
	#page_ecpcart_index .section_member .section_head {
		padding: 0 20px;
	}
	#page_ecpcart_index .member_login {
	}
	#page_ecpcart_index .member_login .wrap {
		padding: 20px;
	}
	#page_ecpcart_index .member_login .wrap .section_head {
		padding-left: 0;
		padding-right: 0;
	}
	#page_ecpcart_index .member_login .wrap .section_body {
		padding-left: 0;
		padding-right: 0;
	}
}
@media ( min-width: 980px ) {
	#page_ecpcart_index .section_member {
	}
	#page_ecpcart_index .member_login {
	}
	#page_ecpcart_index .member_login .wrap {
		padding: 30px;
	}
	#page_ecpcart_index .member_login .section_body {
		max-width: 900px;
		margin: 20px auto 0;
	}
	#page_ecpcart_index .member_login .btn_process {
		margin: 20px 0;
	}
}

/* ==============================================
 * シンプルカート：会員登録する
=============================================== */
#page_ecpcart_index .kiyaku_btn_area {
	background-color: #f0f0f0;
	padding: 15px;
	text-align: center;
}