/**
 * プロトタイプ
----------------------------------------------------------------*/
body{
	font-family:"リュウミン R-KL", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	color:rgb(60,60,60,1);
	letter-spacing:.2em;
	line-height:1.8;
}

/* 見出し */
.h1{
	font-size:300%;
	text-align:center;
	padding:80px 40px 40px;
	letter-spacing:.3em;
}
.h1 > small{
	display:block;
	font-size:40%;
}
.h2{
	font-size:240%;
	text-align:center;
	padding:80px 40px 40px;
	letter-spacing:.2em;
}
.h2 > small{
	display:block;
	font-size:16px;
	color:rgb(0,147,170,1);
}
.h2 > span{
	font-size:200%;
	color:rgb(0,147,170,1);
}
.h3{
	font-family:"リュウミン M-KL", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	font-size:150%;
	padding:40px 0 10px;
	letter-spacing:0;
	text-align:center;
}
.h3 > small{
	color:rgb(0,147,170,1);
	display:block;
	font-family:"リュウミン R-KL", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	font-size:14px;
}
.h3::after{
	content:'';
	display:block;
	width:200px;
	height:2px;
	background:rgb(0,147,170,1);
	margin:10px auto;
}
.h4{
	font-size:16px;
	font-family:"リュウミン M-KL", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	color:rgb(0,147,170,1);
	padding-bottom:10px;
}
.h0{
	font-size:400%;
	font-family:"リュウミン M-KL", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	padding:80px 0 20px;
}
.h0 > span{
	font-size:120%;
	color:rgb(0,147,170,1);
}
.h0 > small{
	font-size:40%;
	display:block;
}
@media screen and (max-width: 768px){
	.h1{
		font-size:200%;
		padding:80px 20px 20px;
	}
	.h1 > small{ font-size:60%; }
	.h2{
		font-size:160%;
		padding:80px 20px 20px;
	}
	.h3{ font-size:140%; }
	.h0{
		font-size:250%;
		font-family:"リュウミン M-KL", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
		padding:40px 0 0;
	}
}
@media screen and (max-width: 480px){
	.h0{ font-size:230%; }
}

/* ページ名 */
.pagename{
	padding:20px 40px;
	border-bottom:1px solid rgb(60,60,60,1);
}

/* テーブルリスト */
.tablelist th{
	font-weight:cold;
	font-size:120%;
}
.tablelist th,
.tablelist td{
	vertical-align:middle;
	padding:10px;
}
@media screen and (max-width: 768px){
	.tablelist,
	.tablelist thead,
	.tablelist tfoot,
	.tablelist tbody,
	.tablelist tr,
	.tablelist th,
	.tablelist td{ display:block; }
	.tablelist th,
	.tablelist td{ padding:0; }
	.tablelist tr{ padding:10px 0; }
	.tablelist .buttons{ margin:10px 0; }
}

/* ボタン */
.buttons.-nowrap{ padding:0; }
.button{
	border-radius:4px;
	font-size:120%;
}
.buttons.-nowrap > .button{ margin:0; }
.button.green{ background:rgb(125,186,43,1); }
.button.green.hover{ background:rgb(125,186,43,1); }
.button.line{
	border:1px solid rgb(0,147,170,1);
	background:white;
	color:rgb(0,147,170,1);
}
.button.line.hover{
	background:rgb(0,147,170,1);
	color:white;
}
.button.-min{
	letter-spacing:0;
	font-size:100%;
	padding:5px 10px;
}
@media screen and (max-width: 768px){
	.button{
		margin-right:20px;
		margin-left:20px;
	}
	.button.-min{
		margin-right:5px;
		margin-left:5px;
	}
	.buttons.-nowrap > .button{ margin:0; }
}

/* テキスト内ライン */
.textline{
	display:inline;
	padding:0 20px;
	border-bottom:1px solid rgb(60,60,60,1);
	font-size:50%;
	vertical-align:top;
}

/* ガイド */
.guides{
	text-align:center;
	padding:40px;
}
.guide{
	font-size:110%;
	padding:10px;
	display:inline-block;
}
@media screen and (max-width: 768px){
	.guides{ padding:20px; }
	.guide{
		font-size:inherit;
		padding:10px;
		letter-spacing:.1em;
	}
}

/* アイコン */
.icon{
	background:scroll no-repeat center center / contain;
	width:1em;
	height:1em;
	display:inline-block;
	padding:0 4px;
	margin:0;
	vertical-align:middle;
}
.icon.folder{ background-image:url("../image/interface/icon/blue/folder.png"); }
.icon.calendar{ background-image:url("../image/interface/icon/blue/calendar.png"); }
.icon.home{ background-image:url("../image/interface/icon/black/home.png"); }

/* 子ページナビゲーション */
.cnav{
	margin:120px auto;
	border:1px solid rgb(60,60,60,1);
	max-width:600px;
	position:relative;
}
.cnav::before,
.cnav::after,
.cnav > ul::before,
.cnav > ul::after{
	width:100px;
	height:100px;
	content:'';
	display:block;
	position:absolute;
	z-index:-1;
}
.cnav::before{
	border-left:1px solid rgb(60,60,60,1);
	border-top:1px solid rgb(60,60,60,1);
	top:-20px;
	left:-20px;
}
.cnav::after{
	border-right:1px solid rgb(60,60,60,1);
	border-bottom:1px solid rgb(60,60,60,1);
	right:-20px;
	bottom:-20px;
}
.cnav > ul::before{
	border-right:1px solid rgb(60,60,60,1);
	border-top:1px solid rgb(60,60,60,1);
	top:-20px;
	right:-20px;
}
.cnav > ul::after{
	border-left:1px solid rgb(60,60,60,1);
	border-bottom:1px solid rgb(60,60,60,1);
	left:-20px;
	bottom:-20px;
}
.cnav > ul > li > a{
	display:block;
	font-size:160%;
	text-align:center;
	color:rgb(60,60,60,1);
	padding:20px 40px;
	border-bottom:1px solid rgb(60,60,60,1);
}
.cnav > ul > li:last-child > a{ border:none; }
.cnav > ul > li > a.hover{ background:rgb(0,147,170,1); }
@media screen and (max-width: 768px){
	.cnav{
		margin:120px 40px;
		max-width:none;
	}
}

/* YouTube */
.yt{
	height:0;
	padding-bottom:56.25%;
	position:relative;
}
.yt > iframe{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}

/* ブラウザ・スマートフォンモックアップ */
.mockup{
	display:flex;
	align-items:flex-start;
}
.mockup > *{
	overflow:hidden;
	box-sizing:border-box;
}
.mockup > .browser{
	border:2px solid rgb(211,209,208);
	border-radius:4px;
	width:66.6666%;
	margin-left:10px;
}
.mockup > .smartphone{
	border:4px solid rgb(211,209,208);
	border-radius:30px;
	width:33.3333%;
	margin-top:40px;
	margin-left:-20px;
	box-shadow:-2px -2px 4px rgba(0,0,0,.3);
}
@media screen and (max-width: 768px){
	.mockup > .browser{ border-width:4px; }
	.mockup > .smartphone{
		border-width:.8vw;
		border-radius:5vw;
	}
}

/**
 * ヘッダー
----------------------------------------------------------------*/
body > header{
	background:rgb(0,147,170,1);
	position:relative;
	z-index:1000;
}

/* ヘッドカード */
#logo > a{
	display:inline-block;
	transition:opacity .2s;
}
#logo > a.hover{ opacity:.6; }
#logo > a > img{
	max-height:70px;
	display:inline-block;
}
@media screen and (max-width: 768px){
	#headcard{ box-shadow:0 0 20px rgba(0,0,0,.1); }
	#logo{ text-align:center; }
	#logo > a > img{ margin:0 auto; }
}

/**
 * ヘッダーナビゲーション
----------------------------------------------------------------*/
/* プライマリナビゲーション・グローバルナビゲーション */
@media screen and (min-width: 769px){
	#pnav > ul,
	#gnav > ul{
		padding:6px 20px;
		box-sizing:border-box;
	}
	#pnav > ul > li,
	#pnav > ul > li > a,
	#gnav > ul > li,
	#gnav > ul > li > a{
		display:inline-block;
		margin:0;
		letter-spacing:0;
		vertical-align:middle;
	}
	#pnav > ul > li > a,
	#gnav > ul > li > a{
		color:white;
		padding:0 4px;
		font-size:110%;
		transition:color .2s;
	}
	#pnav > ul > li > a.hover{ color:rgb(60,60,60,1); }
	#gnav > ul > li > a.hover{ color:rgb(0,147,170,1); }
	#pnav{
		padding:0 20px 0 420px;
		margin-top:-70px;
		height:70px;
		box-sizing:border-box;
	}
	#pnav > ul{
		display:flex;
		justify-content:flex-end;
		align-items:flex-end;
		flex-wrap:wrap;
		width:100%;
		height:100%;
	}
	#gnav{
		background:rgb(60,60,60,1);
		text-align:center;
	}
}
@media screen and (max-width: 768px){
	#pnav > ul,
	#gnav > ul{
		display:flex;
		flex-wrap:wrap;
		margin:0 4px 20px;
	}
	#pnav > ul > li,
	#gnav > ul > li{ width:50%; }
	#pnav > ul > li > a,
	#gnav > ul > li > a{
		display:block;
		font-size:140%;
		border:1px solid white;
		border-radius:4px;
		margin:4px;
		color:white;
		padding:8px 4px;
		text-align:center;
		letter-spacing:.1em;
		transition:color .2s, background .2s;
	}
	#pnav > ul > li > a.hover,
	#gnav > ul > li > a.hover{
		color:rgb(0,147,170,1);
		background:white;
	}
}
@media screen and (max-width: 480px){
	#pnav > ul > li > a,
	#gnav > ul > li > a{
		font-size:100%;
	}
}

/* ソリューションナビゲーション */
#snav{ background:rgb(0,0,0,1); }
#snav > ul{
	display:flex;
	justify-content:center;
	flex-wrap:wrap;
}
#snav > ul > li > a{
	display:block;
	padding:10px;
}
#snav > ul > li > a{
	max-width:80px;
	transition:background .2s;
}
#snav > ul > li > a.hover{ background:rgba(255,255,255,.3); }
#snav > ul > li > a > img{ margin:0 auto; }
@media screen and (max-width: 1024px){
	#snav > ul{
		max-width:500px;
		margin:0 auto;
	}
	#snav > ul > li{ width:20%; }
}
@media screen and (max-width: 768px){
	#snav{
		background:none;
		margin:0 4px 20px;
	}
	#snav > ul{ max-width:none; }
	#snav > ul > li{ width:auto; }
	#snav > ul > li > a{
		margin:4px;
		border-radius:4px;
		border:1px solid rgba(255,255,255,0);
		transition:border-color .2s;
	}
	#snav > ul > li > a.hover{
		background:none;
		border:1px solid white;
	}
}

/* メニュー */
#menu{
	position:fixed;
	width:45px;
	height:45px;
	background:rgb(60,60,60,1);
	border-radius:50%;
	cursor:pointer;
	transition:background .2s;
	z-index:1000;
	transition:top .2s;
	display:none;
}
#menu.hover{ background:rgb(0,0,0,1); }
#menu > img:last-child{ display:none; }
body.clicked #menu > img:first-child{ display:none; }
body.clicked #menu img:last-child{ display:block; }
@media screen and (max-width: 768px){
	#menu{
		top:80px;
		right:20px;
		display:block;
	}
	.scrolldown #menu{ top:20px; }
}

/* スマホメニュー */
#splogo{
	display:none;
	transition:opacity .2s;
}
#splogo.hover{ opacity:.6; }
@media screen and (max-width: 768px){
	#spnav{
		position:fixed;
		top:-100%;
		right:0;
		left:0;
		height:100%;
		background:rgb(0,147,170,1);
		z-index:999;
		overflow-y:scroll;
		-webkit-overflow-scrolling:touch;
		transition:top .2s;
	}
	#spnav > div{
		min-height:100%;
		border:10px solid rgba(255,255,255,.7);
		box-sizing:border-box;
	}
	#splogo{
		display:block;
		margin:20px auto;
		max-width:160px;
	}
	body.clicked{ overflow-y:hidden; }
	body.clicked #spnav{ top:0; }
}

/**
 * フッター
----------------------------------------------------------------*/
/* フッターナビ */
#fnav{
	padding:60px 40px;
	font-size:90%;
	line-height:2;
	background:#f5f5f5;
}
#fnav a{ color:rgb(60,60,60,1); }
#fnav a.hover{ color:rgb(0,147,170,1); }
#fnav > div{ margin:0 auto; }
#fnav > div > section > h3{ margin-bottom:10px; }
#fnav > div > section > h3{
	font-family:"リュウミン M-KL", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	font-size:110%;
}
@media screen and (max-width: 1024px){
	#fnav > div > section{ width:33.3333%; }
}
@media screen and (max-width: 768px){
	#fnav{ padding:40px 0; }
	#fnav > div > section{ width:50%; }
}

/* フッターカード */
#fcard{
	background:rgb(0,147,170,1);
	color:white;
}
#fcard > .base{
	display:flex;
	padding:40px 0;
}
@media screen and (max-width: 1024px){
	#fcard > .base{ justify-content:center; }
	#fcard > .base > .flex{ flex-direction:column; }
}
@media screen and (max-width: 768px){
	#fcard > .base{ flex-direction:column; }
	#fcard > .base > .flex{ justify-content:center; }
}

/* フッターロゴ */
#flogo > img{ max-width:254px; }

/* 会社サイン */
#comsign{
	letter-spacing:0;
	width:500px;
	padding:20px;
	box-sizing:border-box;
}
#comsign > span{
	font-size:160%;
	display:block;
	padding-bottom:20px;
	letter-spacing:-.05em;
}
#comsign > span > small{
	font-size:78%;
	display:block;
	letter-spacing:0;
}
#comsign > a{ color:white; }
#comsign > a.hover{ color:rgb(60,60,60,1); }
@media screen and (max-width: 768px){
	#comsign{
		width:auto;
		text-align:center;
	}
}

/* ソーシャルナビ */
#socialnav > ul{
	display:flex;
	padding:20px;
	box-sizing:border-box;
}
#socialnav > ul > li > a{
	display:block;
	width:30px;
	height:30px;
	margin-right:10px;
	margin-bottom:10px;
	transition:opacity .2s;
}
#socialnav > ul > li > a.hover{ opacity:.6; }
@media screen and (max-width: 768px){
	#socialnav > ul{ justify-content:center; }
}

/* 著作権表記 */
#cr{
	background:rgb(0,0,0,1);
	text-align:center;
	color:white;
	padding:10px 40px;
	letter-spacing:0;
}

/**
 * コンテンツ
----------------------------------------------------------------*/
body > main > article{ min-height:600px; }

/* メインビジュアル */
#mvis{
	height:768px;
	background:scroll no-repeat center center / cover;
	display:flex;
	flex-direction:column;
	justify-content:center;
}
@media screen and (max-width: 768px){
	#mvis{ height:512px; }
}

/* パン屑リスト */
#pan > ol{
	padding:40px 20px 0;
	display:flex;
	justify-content:center;
	flex-wrap:wrap;
}
#pan > ol > li:not(:first-child)::before{
	content:'>';
	color:rgb(179,179,179,1);
	transform:scale(1,5);
	padding:0 4px;
}
#pan > ol > li > a{
	color:rgb(60,60,60,1);
	transition:opacity .2s;
}
#pan > ol > li > a.hover{ color:rgb(0,147,170,1); }
#pan > ol > li:first-child > a.hover{ opacity:.5; }

/* リードコピー */
#leadcopy{ max-width:768px; }
#leadcopy > h2{
	font-size:200%;
	padding:80px 0 20px;
	text-align:justify;
	text-align:center;
}
#leadcopy > p{ font-size:120%; }
@media screen and (max-width: 768px){
	#leadcopy > h2{
		font-size:160%;
		letter-spacing:.1em;
		text-align:left;
	}
}

/**
 * 背景
----------------------------------------------------------------*/
#article_index #mvis{ background-image:url("../image/article/index/mvis.png"); }
@media screen and (max-width: 768px){
	#article_index #mvis{ background-image:url("../image/article/index/mvis_sp.png"); }
}

/**
 * TOPページ
----------------------------------------------------------------*/
#pvis_index > .base > .buttons:first-of-type > .button{ min-width:197px; }
#pvis_index > .base > .buttons:last-of-type > .button{ max-width:480px; }
@media screen and (max-width: 768px){
	#pvis_index > .base > .buttons:first-of-type > .button{ min-width:0; }
	#pvis_index > .base > .buttons:last-of-type > .button{ max-width:auto; }
}

/* リードコピー */
#spot_index_leadcopy{ background:url("../image/article/index/bg_leadcopy.png") scroll no-repeat right -200px top; }
#spot_index_leadcopy .leadcopy{
	font-size:190%;
	font-family:"リュウミン M-KL", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	padding:40px 0;
}
#spot_index_leadcopy .summary{ font-size:120%; }
#spot_index_concept{
	padding:80px 0 40px;
	letter-spacing:0;
}
#spot_index_concept > section > p{ text-align:center; }
#spot_index_concept > section > h3 > img{
	width:100%;
	max-width:420px;
}

@media screen and (max-width: 768px){
	#spot_index_leadcopy{
		background-position:right -160px top 100px;
		background-size:120%;
	}
	#spot_index_leadcopy .leadcopy{ font-size:140%; }
}
@media screen and (max-width: 480px){
	#spot_index_leadcopy{ background-position:right -90px top 100px; }
}

/* 制作実績 */
.works{
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
}
.works > section > a{
	display:block;
	width:360px;
	/*height:500px;*/
	padding:40px;
	box-sizing:border-box;
	transition:background .2s;
	color:rgb(60,60,60,1);
}
.works > section > a.hover{ background:#f5f5f5; }
.works > section > a > figure{
	margin-bottom:30px;
	position:relative;
}
.works > section.play > a > figure::before,
.works > section.notplay > a > figure::before{
	content:'';
	display:block;
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background:scroll no-repeat center center / 40px;
	transition:background-size .3s;
}
.works > section.play > a > figure::before{ background-image:url("../image/interface/icon/blue/play.png"); }
.works > section.notplay > a > figure::before{ background-image:url("../image/interface/icon/blue/notplay.png"); }
.works > section.play > a.hover > figure::before,
.works > section.notplay > a.hover > figure::before{ background-size:50px; }
.works > section > a > h3{
	text-align:center;
	font-size:95%;
	position:relative;
	/*height:110px;*/
}
.works > section.new > a > h3::before{
	display:block;
	content:'NEW';
	font-size:60%;
	color:rgb(125,186,43,1);
	font-family:"Helvetica Neue", HelveticaNeue, "Segoe UI", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN W3", HiraKakuProN-W3, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	padding-bottom:10px;
	position:absolute;
	left:0;
	right:0;
	top:-20px;
}
.visuals > figure{
	padding:0 20px 20px;
	text-align:center;
}
.visuals > figure > a{
	transition:opacity .2s, box-shadow .2s;
	display:inline-block;
}
.visuals > figure > a.hover{
	opacity:.8;
	box-shadow:0 0 20px 6px rgba(0,0,0,.1);
}
.visuals > figure > figcaption{
	font-size:140%;
	padding:0 20px 20px;
	display:none;
}
#article_work{ padding:20px; }
#article_work > .flex > :first-child{
	padding:0 20px 80px;
	box-sizing:border-box;
}
@media screen and (max-width: 768px){
	.works{ justify-content:start; }
	.works > section{ width:50%; }
	.works > section > a{
		width:auto;
		height:100%;
		padding:30px 15px;
		border-bottom:1px solid rgb(179,179,179,1);
		font-size:80%;
		letter-spacing:0;
	}
	.works > section:nth-child(odd) > a{ border-right:1px solid rgb(179,179,179,1); }
	.works > section:nth-child(1) > a,
	.works > section:nth-child(2) > a{ border-top:1px solid rgb(179,179,179,1); }
	.works > section > a > figure{ width:auto; }
	.works > section.new > a > h3::before{ font-size:90%; }
}

/* 商品リスト */
.products{
	background:#fafafa;
	padding:20px;
	letter-spacing:.1em;
	box-shadow:0 0 20px rgba(0,0,0,.1);
}
.products > section{ border-bottom:1px solid rgb(179,179,179,1); }
.products > section:nth-child(odd){ border-right:1px solid rgb(179,179,179,1); }
.products > section:nth-last-child(1),
.products > section:nth-last-child(2):not(:nth-child(2n)){ border-bottom:none; }
.products > section > h3{
	font-size:140%;
	font-family:"リュウミン M-KL", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	margin-bottom:6px;
}
.products > section > p{ margin-bottom:10px; }
.products > section > .price{
	font-size:120%;
	font-family:"リュウミン M-KL", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	color:rgb(0,147,170,1);
	margin-bottom:20px;
	line-height:1.4;
}
@media screen and (max-width: 768px){
	.products{ margin:0 20px !important; }
	.products > section:nth-child(odd){ border-right:none; }
	.products > section:nth-last-child(2):not(:nth-child(2n)){ border-bottom:inherit; }
}

/**
 * 2020.12.4追加
----------------------------------------------------------------*/
/* ページビジュアル */
.pvis{
	height:768px;
	background:url("../image/interface/pvis/prototype.png") scroll no-repeat center center / cover;
}
.pvis#pvis_index{ background-image:url("../image/interface/pvis/index.png"); }
.pvis#pvis_about{ background-image:url("../image/interface/pvis/about.png"); }
.pvis#pvis_business_system{ background-image:url("../image/interface/pvis/business_system.png"); }
.pvis#pvis_business_sp{ background-image:url("../image/interface/pvis/business_sp.png"); }
.pvis#pvis_business_humanresource{ background-image:url("../image/interface/pvis/business_humanresource.png"); }
.pvis#pvis_business_media{ background-image:url("../image/interface/pvis/business_media.png"); }
.pvis#pvis_business_consulting{ background-image:url("../image/interface/pvis/business_consulting.png"); }
.pvis.prototype{ height:240px; }
.pvis > h2{
	font-size:40px;
	text-align:center;
	font-family:"リュウミン M-KL", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	display:flex;
	height:100%;
	align-items:center;
	justify-content:center;
	flex-direction:column;
}
.pvis > h2 > small{
	color:rgb(0,147,170,1);
	padding-bottom:20px;
	display:block;
}
.pvis > .base{
	display:flex;
	flex-direction:column;
	justify-content:flex-end;
	height:100%;
	padding:100px 60px;
	box-sizing:border-box;
	line-height:1.2;
}
.pvis > .base > header{
	font-size:45px;
	font-weight:bold;
	font-family:"リュウミン M-KL", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}
.pvis > .base > h2{
	font-size:45px;
	color:rgb(0,147,170,1);
	border-left:10px solid rgb(0,147,170,1);
	padding-left:10px;
	margin:10px 0;
}
.pvis > .base > p{ font-size:24px; }
.pvis > .base > p.min{ font-size:14px; }
.pvis.white > .base > header,
.pvis.white > .base > h2,
.pvis.white > .base > p{ color:white; }
.pvis.white > .base > h2{ border-color:white; }
.pvis#pvis_business_sp > .base > p{ padding-right:200px; }
.pvis#pvis_about > h2{ color:white; }
.pvis#pvis_index > .base > figure > img{ margin:20px 0; }
.pvis#pvis_index > .base > .copy{
	font-size:24px;
	line-height:1.8;
}
.pvis#pvis_index > .base > .buttons{
	padding:20px 0 0;
	text-align:left;
}
.pvis#pvis_index > .base > .buttons:last-child{ padding-top:0; }
.pvis#pvis_index > .base > .buttons > .button.wide{ margin-top:0; }
@media screen and (max-width: 1024px){
	.pvis > .base{ padding:60px 40px; }
	.pvis > h2,
	.pvis > .base > header,
	.pvis > .base > h2{ font-size:38px; }
	.pvis > .base > p:not(.min){ font-size:20px; }
}
@media screen and (max-width: 768px){
	.pvis{
		height:512px;
		letter-spacing:0;
	}
	.pvis > .base{ padding:40px 20px; }
	.pvis > h2,
	.pvis > .base > header,
	.pvis > .base > h2{ font-size:5vw; }
	.pvis#pvis_business_sp > .base > p{ padding-right:20vw; }
	.pvis#pvis_index > .base > .copy{ font-size:min(20px, 4.5vw); }
	.pvis#pvis_index > .base > .buttons{
		margin:0 -20px;
		display:flex;
	}
	.pvis#pvis_index > .base > .buttons > .button{
		display:block;
		width:50%;
		box-sizing:border-box;
		max-width:none;
	}
	.pvis#pvis_index > .base > .buttons > .button:nth-child(2){ margin-left:0; }
	.pvis#pvis_index > .base > .buttons > .button.wide{ width:100%; }
}

/* 概要文 */
.summary{
	font-size:20px;
	text-align:center;
	padding:40px 20px;
}
@media screen and (max-width: 768px){
	.summary{
		font-size:14px;
		text-align:left;
	}
}

/* グリッドセット */
.gridset section h2,
.gridset section h3,
.gridset section h4,
.gridset section h5,
.gridset section h6{
	font-size:18px;
	font-family:"リュウミン M-KL", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	padding-bottom:5px;
	letter-spacing:0;
}
.gridset .number{
	color:rgb(0,147,170,1);
	position:relative;
	padding-left:42px;
}
.gridset .number > span{
	position:absolute;
	top:4px;
	left:0;
	background:url("../image/interface/prototype/bg_number.png") scroll no-repeat center center / contain;
	width:37.266888px;
	height:24px;
	line-height:24px;
	display:block;
	color:white;
	text-align:center;
}
.gridset section h2 > small,
.gridset section h3 > small,
.gridset section h4 > small,
.gridset section h5 > small,
.gridset section h6 > small{
	font-size:14px;
	color:rgb(0,147,170,1);
	font-family:"リュウミン R-KL", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	display:block;
}
.gridset > div > section:not(:last-child),
.gridset > figure > img:not(:last-child){ margin-bottom:20px; }
.gridset section figure{ margin-bottom:10px; }
.gridset p{ color:rgb(60,60,60,1); }

/* アジア地図 */
#spot_business_system_asiamap{ background:url("../image/article/business/system/bg_asiamap.png") scroll no-repeat center top; }
#spot_business_system_asiamap > .base > div{ margin-bottom:760px; }
@media screen and (max-width: 768px){
	#spot_business_system_asiamap{ background:none; }
	#spot_business_system_asiamap > .base > div{
		background:url("../image/article/business/system/bg_asiamap.png") scroll no-repeat center top / 200%;
		margin:0;
		height:150vw;
	}
}

/* 背景 */
.bg_sky{ background:rgb(212,221,225); }
.bg_water{ background:rgb(234,238,241); }
.bg_milk{ background:rgb(250,250,245); }
.bg_blue{ background:rgb(0,147,170,1); }

/* マージン */
.tmargin{ padding-top:40px; }
.bmargin{ padding-bottom:40px; }
.safe{ padding:40px; }
@media screen and (max-width: 480px){
	.safe{ padding:20px; }
}

/* 通常リスト */
.normallist > li::before{
	content:'■';
	color:rgb(0,147,170,1);
}

/* テーブル */
.table{ width:100%; }
.table,
.table th,
.table td{ border:1px solid #ccc; }
.table th,
.table td{ padding:10px; }

/* セールスプロモーション実績 */
#spot_business_sp_works > section > .carousel > .flex{ margin-bottom:0; }
#spot_business_sp_works > section > .carousel > .flex > figure{ padding-bottom:0; }
#spot_business_sp_works .flex > *{
	width:100%;
	min-width:400px;
}
#spot_business_sp_works figure > figcaption{
	font-size:20px;
	line-height:1.1;
	letter-spacing:0;
	min-height:100px;
	text-align:center;
}
#spot_business_sp_works figure > figcaption > small{
	font-size:14px;
	color:rgb(0,147,170,1);
	display:block;
}
#spot_business_sp_works figure > figcaption > span{
	font-size:14px;
	display:block;
}

/* カルーセル */
.carousel{
	overflow-x:scroll;
	-webkit-overflow-scrolling:touch;
}

/* 「見せ方」「書き方」「伝え方」 */
#spot_business_sp_charasteristic_dvp > section > p{
	font-size:16px;
	line-height:1.2;
	text-align:center;
	letter-spacing:0;
	padding-top:20px;
}
@media screen and (max-width: 768px){
	#spot_business_sp_charasteristic_dvp > section > img{ max-width:340px; }
}

/* 電話ボックス */
.telbox{
	text-align:center;
	margin:40px 20px;
}
.telbox > a{
	display:inline-block;
	border:1px solid rgb(0,147,170,1);
	border-radius:10px;
	overflow:hidden;
	background:white;
	transition:box-shadow .2s;
}
.telbox > a.hover{ box-shadow:0 0 20px 2px rgba(0,0,0,.05); }

/* カリキュラム */
#spot_business_humanresource_curriculum > section:not(:last-child){
	border-bottom:1px solid #ccc;
	padding-bottom:20px;
	margin-bottom:20px;
}

/* 社名の由来 */
.origin{
	background:#f5f5f5;
	padding:10px;
	margin-top:10px;
	font-size:80%;
}

/* TOPページ：5つの主な事業 */
#spot_index_business > .base > .summary{
	background:url("../image/article/index/bg_preamble.png") scroll no-repeat center center / contain;
}
#spot_index_business > .carousel > .flex > section{
	width:100%;
	margin-bottom:20px;
}
#spot_index_business > .carousel > .flex > section:first-child{ padding-left:20px; }
#spot_index_business > .carousel > .flex > section:last-child{ padding-right:20px; }
#spot_index_business > .carousel > .flex > section > a{
	min-width:348px;
	height:464px;
	margin:20px;
	display:block;
	background:white;
	overflow:hidden;
	border-radius:30px;
	box-sizing:border-box;
	position:relative;
}
#spot_index_business > .carousel > .flex > section > a::after{
	content:'';
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background:rgb(0,147,170,1) url("../image/interface/prototype/readmore.png") scroll no-repeat center center;
	opacity:0;
	transition:opacity .2s;
}
#spot_index_business > .carousel > .flex > section > a.hover::after{ opacity:.5; }
#spot_index_business > .carousel > .flex > section > a > div{
	padding:30px;
	letter-spacing:0;
	font-size:14px;
}
#spot_index_business > .carousel > .flex > section > a > div > .copy{
	font-size:12px;
	color:rgb(0,147,170,1);
}
#spot_index_business > .carousel > .flex > section > a > div > h2{
	font-size:16px;
	font-family:"リュウミン M-KL", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	color:rgb(60,60,60,1);
	margin-bottom:5px;
}
#spot_index_business > .carousel > .flex > section > a > div > p{
	color:rgb(60,60,60,1);
	height:125px;
	overflow:hidden;
}