@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');

@font-face {
	font-family: "Local Noto Sans JP";
	src: local("Noto Sans JP");
}

/*
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
Twitter: @rich_clark
*/

/*要素のフォントサイズやマージン・パディングをリセットしています*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}

/*行の高さをフォントサイズと同じにしています*/
body {
	line-height: 1;
}

/*新規追加要素のデフォルトはすべてインライン要素になっているので、section要素などをブロック要素へ変更しています*/
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}

/*nav要素内ulのマーカー（行頭記号）を表示しないようにしています*/
/*nav ul {
  list-style:none;
  }*/
ol, ul {
	list-style: none;
}

/*引用符の表示が出ないようにしています*/
blockquote, q {
	quotes: none;
}

/*blockquote要素、q要素の前後にコンテンツを追加しないように指定しています*/
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/*a要素のフォントサイズなどをリセットしフォントの縦方向の揃え位置を親要素のベースラインに揃えるようにしています*/
a {
	margin: 0;
	padding: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}

/* ins要素のデフォルトをセットし、色を変える場合はここで変更できるようにしています */
ins {
	background-color: #ff9;
	color: #000;
	text-decoration: none;
}

/* mark要素のデフォルトをセットし、色やフォントスタイルを変える場合はここで変更できるようにしています
また、mark要素とは、文書内の検索結果で該当するフレーズをハイライトして、目立たせる際に使用するようです。*/
mark {
	background-color: #ff9;
	color: #000;
	font-style: italic;
	font-weight: bold;
}

/*テキストに打ち消し線が付くようにしています*/
del {
	text-decoration: line-through;
}

/*IEではデフォルトで点線を下線表示する設定ではないので、下線がつくようにしています
また、マウスオーバー時にヘルプカーソルの表示が出るようにしています*/
abbr[title], dfn[title] {
	border-bottom: 1px dotted;
	cursor: help;
}

/*隣接するセルのボーダーを重ねて表示し、間隔を0に指定しています*/
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/*水平罫線のデフォルトである立体的な罫線を見えなくしています*/
hr {
	display: block;
	height: 1px;
	border: 0;
	border-top: 1px solid #cccccc;
	margin: 1em 0;
	padding: 0;
}

/*縦方向の揃え位置を中央揃えに指定しています*/
input, select {
	vertical-align: middle;
}

/*画像を縦に並べた時に余白が出ないように*/
img {
	vertical-align: top;
	font-size: 0;
	line-height: 0;
}

/*box-sizingを全ブラウザに対応*/
*, *:before, *:after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}


.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	font-size: 0;
	clear: both;
	visibility: hidden;
}


.none {
	display: none;
}


/* darkmode設定*/
body {
	min-height: 100vh;
	color: #221815;
	background-color: #fff;
	transition: .5s;
}

body.dark-theme {
	color: #fff;
	background-color: #000;
}



/* 表示フォントの設定 */
body {
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Local Noto Sans JP", "Noto Sans JP", "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", Osaka, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 14px;
}

.en,
body.en {
	font-family: "Helvetica Neue", Helvetica, Verdana, Arial, sans-serif;
	font-weight: 400;
}

@media all and (-ms-high-contrast:none) {
	body {
		font-family: "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
		/* ヒラギノと游ゴシックがずれるので、IE11は除外する */
	}
}

.mincho {
	font-family: "游明朝", "Yu Mincho", "游明朝体", "YuMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "HiraMinProN-W3", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
}



a:hover {
	opacity: 0.9;
}

/*
@media(max-width:1024px){
	a:hover{
		opacity:1;
	}
}
*/


input::placeholder {
	color: #bbb;
}

/* IE */
input:-ms-input-placeholder {
	color: #bbb;
}

/* Edge */
input::-ms-input-placeholder {
	color: #bbb;
}


.pc {
	display: block;
}

.pc2 {
	display: block;
}

.sp {
	display: none;
	/* 1024以下で */
}

.sp2 {
	display: none;
	/* 768以下で */
}

@media(max-width:1024px) {
	.pc {
		display: none;
	}

	.sp {
		display: block;
	}
}


@media(max-width:768px) {
	.pc2 {
		display: none;
	}

	.sp2 {
		display: block;
	}
}


a {
	text-decoration: none;
	color: #000;
}

strong {
	font-weight: bold;
}


/* ************************************************** */
.main {
	position: relative;
	transition: 1s all;
}


/* ************************************************** */


header {
	position: -webkit-sticky;
	position: sticky;
	z-index: 2;
	top: 0;
	height: 104px;
	width: 100%;
	display: block;
	background-color: #ffffff;
	font-size: 0;
}

header nav {
	max-width: 1200px;
	padding: 0 40px;
	display: block;
	margin: 0 auto;
}

header nav .nplus {
	padding: 23px 23px 23px 0;
	display: inline-block;
	vertical-align: middle;
}

header nav .nplus img {
	width: 76px;
	height: 58px;
}

header nav .nplus img.sp {
	display: none;
}

header nav .inner {
	display: inline-block;
	vertical-align: middle;
	width: calc(100% - 76px - 23px);
}


header nav ul.navi {
	display: inline-block;
	vertical-align: middle;
}

header nav ul.navi li {
	display: inline-block;
	vertical-align: middle;
	padding: 0 40px 0 0;
	position: relative;
	font-size: 16px;
	height: 18px;
}

header nav ul.navi li:hover {
	background-image: url("../images/header/nav_hoverline.png");
	background-size: 28px 2px;
	background-repeat: no-repeat;
	background-position: right 16px bottom;
}

header nav ul.navi li img {
	height: 18px;
}

header nav ul.navi li.projects img,
header nav ul.navi li.company img {
	height: 22px;
}




header nav ul.navi li.contact {
	margin-right: 38px;
}




header nav ul.navi li .subnavi {
	display: none;
	position: absolute;
	top: 21px;
	left: 0;
	z-index: 100;
	background-color: rgba(255, 255, 255, .95);
	padding: 8px 0;
}

header nav ul.navi li.services .subnavi {
	width: 230px;
}


header nav ul.navi li.services:hover .subnavi,
header nav ul.navi li.projects:hover .subnavi {
	display: block;
	margin-top: -3px;
}


header nav ul.navi li .subnavi li {
	display: block;
	padding: 5px 20px;
	height: 26px;
}

header nav ul.navi li .subnavi li:last-child {
	padding: 5px 20px 0 20px;
}

header nav ul.navi li .subnavi li:hover {
	background-image: none;
}

header nav ul.navi li .subnavi li span {
	display: inline-block;
	padding-right: 32px;
}

.dark-theme header nav ul.navi li .subnavi li span a {
	color: #000 !important;
}

header nav ul.navi li.services:hover .subnavi li span {

	font-size: 16px;
}


header nav ul.navi li .subnavi li span:hover {

	background-image: url("../images/header/nav_hoverline.png");
	background-size: 28px 2px;
	background-repeat: no-repeat;
	background-position: right bottom;
}

header nav ul.navi li .subnavi li.all img {
	height: 15px;
}

header nav ul.navi li .subnavi li.branding img {
	height: 22px;
}

header nav ul.navi li .subnavi li.web img {
	height: 21px;

}

header nav ul.navi li .subnavi li.product img {
	height: 16px;
}

header nav ul.navi li .subnavi li.award img {
	height: 16px;
}

header nav ul.lang {
	display: inline-block;
	vertical-align: middle;
}

header nav ul.lang li {
	display: inline-block;
	vertical-align: middle;
	padding: 0 28px 0 0;
}

header nav ul.lang li img {
	width: 23px;
	height: 14px;
	cursor: pointer;
}


header nav ul.mode {
	display: inline-block;
	vertical-align: middle;

}

header nav ul.mode li {
	display: inline-block;
	vertical-align: middle;
	padding: 0 27px 0 0;
}

header nav ul.mode li img {
	width: 22px;
	height: 22px;
	cursor: pointer;
}

header nav ul.sns {
	display: inline-block;
	vertical-align: middle;
}

header nav ul.sns li {
	display: inline-block;
	vertical-align: middle;
	padding: 0 10px 0 0;

}

header nav ul.sns li img {
	width: 22px;
	height: 22px;
}

header nav ul.sns li:last-child {
	padding: 0;
}

header .menu {
	display: none;
}

/* ************************************************** */

@media(max-width:1199px) {

	header nav .inner {
		display: none;
	}

	header {
		height: 60px;
	}

	header nav .nplus {
		padding: 1px 0 1px 15px;
	}

	header nav .nplus img.pc {
		display: none;
	}

	header nav .nplus img.sp {
		display: block;
	}


	header .menu {
		display: block;
		transition: all 300ms 0s ease;
		position: absolute;
		top: 8px;
		right: 15px;
	}

	header.open .menu {
		transform: rotate(45deg);
		position: fixed;
	}

	header nav {
		width: 100%;
		padding: 0;
		background-color: #fff;
	}

	header nav .inner {
		width: 100%;
		text-align: center;
		padding: 0 0 40px 0;
	}



	header nav ul.navi {
		display: block;
	}

	header nav ul.navi li.services:hover .subnavi {
		display: none;
	}


	header nav ul.navi li.contact,
	header nav ul.navi li {
		display: block;
		text-align: center;
		padding: 0;
		height: auto;
	}

	header nav ul.navi li:hover {
		background-image: none;

	}

	header nav ul.navi li.contact {
		margin-right: 0;
	}

	header nav ul.navi li.projects:hover .subnavi {
		display: none;
	}

	header nav ul.navi li a {
		display: block;
		padding: 10px 0;

	}

	header nav ul.mode {
		display: inline-block;
		padding: 20px 0;
	}

	header nav ul.navi li .subnavi {
		position: static;
		background-color: #eeeeee;
	}

	header nav ul.navi li .subnavi li {
		height: auto;
	}

	header nav ul.navi li .subnavi li span {
		padding: 0;
		display: block;
	}

	header nav ul.navi li .subnavi li span:hover {
		background-image: none;
	}

}


@media (orientation: landscape) and (max-width:1150px) and (max-height:720px) {

	header nav ul.navi li.contact,
	header nav ul.navi li {
		width: 50%;
		display: inline-block;
	}

	header nav ul.navi li .subnavi {
		width: 100%;
		position: fixed;
		top: 170px;
		text-align: left;
	}

	header nav ul.navi li .subnavi li {
		width: 50%;
		display: inline-block;
	}
}


/* ************************************************** */



footer {
	position: relative;
	border-top: 1px solid #000;
	width: 100%;
	background-color: #ffffff;
}

footer .inner {
	max-width: 1200px;
	padding: 20px 40px 70px 40px;
	margin: 0 auto;
	font-size: 0;
}

footer .pmark {
	display: inline-block;
	vertical-align: top;
	padding: 0 30px 0 0;
}

footer .pmark img {
	width: 56px;
	height: auto;
}

footer .pricavy {
	display: inline-block;
	vertical-align: top;
	width: 160px;
	font-size: 14px;
}

footer .pricavy li a {
	color: #000;
	text-decoration: none;
	padding: 0 18px 0 0;
	background-image: url("../images/common/arrow_gray.png");
	background-repeat: no-repeat;
	background-position: right 0px center;
	background-size: 11px auto;
}

footer .copy {
	/*loat: right;*/
	font-size: 12px;
	text-align: center;
	margin: 10px auto;


}

footer .bnr {
	/*float: right;*/
	/*margin-right: 30px;*/
	display: inline-block;
	vertical-align: top;
	width: calc(100% - 160px);
	text-align: right;
}

footer .bnr img {
	width: auto;
	height: 64px;
	display: inline-block;
	vertical-align: middle;
	margin: 0 4px 10px 4px;
}

footer .bnr img.border {
	border: 1px solid #ccc;
}

@media(max-width:1200px) {
	footer .bnr {
		width: 100%;
		text-align: left;
		margin: 20px auto 0 auto;
	}
}





@media(max-width:640px) {

	footer .inner {
		padding: 20px 15px 70px 15px;
	}

	footer .pricavy {
		width: 100%;
	}

	footer .copy {
		/*float: none;*/
		/*padding-top: 200px;*/
	}

	footer .pmark {
		padding: 0px 20px 0 0;
	}

	footer .bnr {
		/*float: none;
		padding-left: 0;
		position: absolute;
		top: 50px;
		width: calc(100% - 30px);
		left: 15px;
		text-align: center;*/
	}

	footer .bnr a {
		display: inline-block;
		margin: 0 auto;
		padding: 0 0 10px 0;
	}

	footer .bnr img {
		width: auto;
		/*height: 56px;*/
		height: 50px;
		display: block;
		/*margin: 0 auto;*/
		margin: 4px;
	}

}


/* ************************************************** */
.contents {
	max-width: 1120px;
	padding: 80px 0;
	margin: 0 auto;
	position: relative;
}


.contents.inview:after {
	background-color: #000000;
	bottom: 0;
	content: '';
	display: block;
	height: 1px;
	width: 0;
	left: 0;
	position: absolute;
	transition: 1s all;
}

.contents.inview.show:after {
	width: 100%;
}

.full-width {
	width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
}



.sns-share {
	display: inline-block;
}

.sns-share a {
	display: inline-block;
	vertical-align: top;
	margin-right: 10px;
	background-color: #fff;
	border-radius: 2px;
}

.sns-share a:last-child {
	margin-right: 0;
}




.contents#narrative h2 {
	/*width:811.683px;*/
	width: 838px;
	height: 60px;
	margin-bottom: 80px;
}

.contents#narrative h2 img,
.contents#narrative h2 svg {
	width: auto;
	height: 46px;
}

.ie11 .contents#narrative h2 svg {
	width: 273.867px;
}

.contents#projects h2 {
	width: auto;
	height: 56px;
	margin-bottom: 78px;
}

.contents#projects h2 img,
.contents#projects h2 svg {
	width: auto;
	height: 56px;
}

.ie11 .contents#projects h2 svg {
	width: 224.133px;
}

.contents#news h2 {
	width: auto;
	height: 44px;
	margin-bottom: 100px;

}

.contents#news h2 img,
.contents#news h2 svg {
	width: auto;
	height: 44px;
}

.ie11 .contents#news h2 svg {
	width: 147.65px;
}

.contents#company h2 {
	width: auto;
	height: 56px;
	margin-bottom: 102px;
}

.contents#company h2 img,
.contents#company h2 svg {
	width: auto;
	height: 56px;
}

.ie11 .contents#company h2 svg {
	width: 280.033px;
}

.contents#careers h2 {
	width: auto;
	height: 44px;
	margin-bottom: 64px;
}

.contents#careers h2 img,
.contents#careers h2 svg {
	width: auto;
	height: 44px;
}

.ie11 .contents#careers h2 svg {
	width: 221.7px;
}

.contents#contact h2 {
	width: auto;
	height: 44px;
	margin-bottom: 60px;
}

.contents#contact h2 img,
.contents#contact h2 svg {
	width: auto;
	height: 44px;
}

.ie11 .contents#contact h2 svg {
	width: 232.367px;
}

.contents h3 {
	font-size: 42px;
	line-height: 1.45;
	font-weight: lighter;
}

.mr26 {
	margin-bottom: 26px;
}

.mr36 {
	margin-bottom: 36px;
}

.mr46 {
	margin-bottom: 46px;
}

.mr54 {
	margin-bottom: 54px;
}

.mr45 {
	margin-bottom: 45px;
}

.contents p {
	font-size: 22px;
	line-height: 2;
	font-weight: lighter;

}

.en .contents p {
	font-weight: 400;
}

/* ************************************************** */

.contents#logo {
	padding: 0;
}

.contents#logo .inner {
	padding: 106px 0 0 0;
	padding: 0;
	/* 一時的20200403 */
}

.contents#logo h1 {
	text-align: center;
	position: relative;
}

/*
.contents#logo .logos{
	display: block;
	margin:0 auto;
	width:260px;
	height:317.783px;
}
*/
.contents#logo h1 img {
	max-width: 800px;
	height: auto;
}

.contents#logo h1 video {
	max-width: 800px;
	width: 100%;
	height: auto;
}

.contents#logo h1 .msg {
	position: absolute;
	bottom: 80px;
	left: 0;
	font-size: 20px;
	color: #999;
	font-weight: bold;
	text-align: center;
	width: 100%;
}

.dark-theme .contents#logo h1 .msg {
	color: #fff;
}

.next-element {
	opacity: 0;
	visibility: hidden;
	/* 完全に非表示（クリック等も無効化）にしたい場合 */
	transition: opacity 0.8s ease, visibility 0.8s ease;
	/* 0.8秒かけて変化 */
}

/* JavaScriptでこのクラスを付与する */
.next-element.is-visible {
	opacity: 1;
	visibility: visible;
}


.contents#logo h1 svg {
	width: 280px;
	height: 337px;
}

.contents#logo h1 svg image,
.contents#logo h1 svg mask {
	width: 280px;
	height: 337px;
}

.st0 {
	fill: none;
	stroke: #ffffff;
	stroke-width: 10;
	stroke-miterlimit: 10;
	stroke-dasharray: 5000;
	stroke-dashoffset: 5000;
	stroke-linecap: round;
}

.st1 {
	fill: none;
	stroke: #ffffff;
	stroke-width: 8;
	stroke-miterlimit: 10;
	stroke-dasharray: 5000;
	stroke-dashoffset: 5000;
	stroke-linecap: square;
}

.st2 {
	fill: none;
	stroke: #ffffff;
	stroke-width: 36;
	stroke-miterlimit: 10;
	stroke-dasharray: 5000;
	stroke-dashoffset: 5000;
	stroke-linecap: square;
}

.st3 {
	fill: none;
	stroke: #ffffff;
	stroke-width: 90;
	stroke-miterlimit: 10;
	stroke-dasharray: 5000;
	stroke-dashoffset: 5000;
	stroke-linecap: square;
}


.contents#logo .scroll {
	padding: 86px 0 60px 0;
	padding: 0;
	/*一時的20200403*/
	transition: 1s;
}

.contents#logo .scroll .wrap {
	height: 100px;
	margin: 0 auto 16px auto;
}

.contents#logo .scroll svg,
.contents#logo .scroll img {
	display: block;
	margin: 0 auto;
	height: 16px;
	width: 49.35px;
}

.contents#logo .scroll .bar {
	padding: 0;
	animation-name: anime1;
	animation-duration: 2s;
	animation-timing-function: ease;
	animation-iteration-count: infinite;
	width: 1px;
	background-color: #000;
	margin: 0 auto;
}

@keyframes anime1 {
	0% {
		height: 0;
		opacity: 0;
	}

	85% {
		height: 100px;
		opacity: 1;
	}

	99% {
		height: 100px;
		opacity: 1;
	}

	100% {
		height: 0;
		opacity: 0;
	}
}


/* ************************************************** */



.contents#narrative h3 {
	font-size: 42px;
	font-weight: lighter;
	margin-bottom: 40px;

}

.en .contents#narrative h3 {
	font-weight: 400;
}

.contents#narrative p {
	padding-left: 80px;
	/*letter-spacing: -.03em;*/
}

/*
.en .contents#narrative p{
	letter-spacing:0em;
}
*/



/* ************************************************** */


.contents#projects {
	padding: 80px 0 70px 0;
}

.contents#projects .toggle {
	position: absolute;
	top: 80px;
	right: 0;

}

.contents#projects .toggle img,
.contents#projects .toggle svg {
	width: 74px;
	height: 56px;
	padding: 10px;
	border: 1px solid #000;
	border-radius: 4px;
	cursor: pointer;
}


.contents#projects ul {
	position: relative;
	overflow: hidden;
}

.contents#projects ul li {

	width: calc(100% / 3);
	height: auto;

	display: inline-block;
	vertical-align: top;
	position: absolute;
	/*
	float:left;
	display: block;
	*/

	transition: .4s all;


}

.contents#projects .listview ul li {
	position: static;
}

.contents#projects ul li.show {
	position: absolute;

	opacity: 1;
}

.contents#projects ul li.hide {

	opacity: 0;
	transform: scale(0.01);
}

.contents#projects .listview ul li.hide,
.contents#projects .listview ul li.show {
	position: static;
}

.contents#projects .listview ul li.hide {
	display: none;
}

.contents#projects ul li img {
	width: 100%;
	height: auto;
}

.contents#projects ul li .desc {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	transition: .5s all;
	display: block;
	visibility: hidden;
	/*background-color:rgba(0,0,0,0);*/
}

.contents#projects ul li:hover .desc {
	visibility: visible;

	background-color: rgba(0, 0, 0, .7);

}

.contents#projects ul li .desc .desc-inner {
	width: 100%;
	height: 100%;
	padding: 48px;

}

.contents#projects .listview ul li .desc .desc-inner {
	padding: 0;
}

.contents#projects ul li .desc .desc-inner h3 {
	font-size: 20px;
	font-weight: 600;
	color: #ffffff;
	margin-bottom: 10px;
}

.contents#projects ul li .desc .desc-inner p {
	font-size: 20px;
	font-weight: 300;
	color: #ffffff;
	line-height: 1.4;
	display: inline-block;
}

.contents#projects ul li a .desc .desc-inner p:after {
	display: block;
	width: 100px;
	height: 34px;
	background-image: url("/assets/images/common/detail.png");
	background-repeat: no-repeat;
	background-position: top left;
	background-size: 100px auto;
	content: "";
	margin-top: 16px;
}



.contents#projects ul li .desc .desc-inner .award {
	position: absolute;
	bottom: 48px;
	left: 48px;
}

.contents#projects ul li .desc .desc-inner .award img {
	height: 75px;
	width: auto;
}

.contents#projects .full-width.listview {
	position: static;
	width: 100% !important;
	margin: 0 auto !important;
}

.contents#projects .listview ul li {
	width: 100%;
	margin-bottom: 30px;
	border-top: 1px solid #707070;
}

.contents#projects .listview ul li img {
	float: right;
	width: 306px;
}

.contents#projects .listview ul li .desc {
	width: calc(100% - 306px);
	height: auto;
	position: static;
	visibility: visible;
}

.contents#projects .listview ul li:hover .desc {
	background-color: rgba(255, 255, 255, 0);
	transition: 0;
}

.contents#projects .listview ul li .desc .desc-inner {
	display: block;
}

.contents#projects .listview ul li .desc .desc-inner h3 {
	color: #000;
	padding-top: 40px;
	font-size: 20px;
	line-height: 1.5;
	font-weight: bold;
}

.contents#projects .listview ul li .desc .desc-inner p {
	color: #000;
	font-size: 20px;
	line-height: 1.5;
	display: block;
}

.contents#projects .listview ul li a .desc .desc-inner p:after {
	background-image: url("/assets/images/common/detail_black.png");
	margin-top: 0;
	padding-bottom: 16px;

}


.contents#projects .listview ul li .desc .desc-inner .award {
	position: static;
	float: left;
	padding-top: 10px;
}




/* ************************************************** */
.contents#news {
	padding: 65px 0;
}

.contents#news .newslist li {
	font-size: 16px;
	font-weight: lighter;
	line-height: 2;
}

.contents#news .newslist li a {
	color: #000;
	text-decoration: none;
}

.contents#news .newslist li dl dt {
	display: inline-block;
	vertical-align: top;
	width: 130px;

}

.contents#news .newslist li dl dd {
	display: inline-block;
	vertical-align: top;
	width: calc(100% - 130px);
}

.contents#news .newslist li a:hover dl dt,
.contents#news .newslist li a:hover dl dd {
	text-decoration: underline;
}


/* ************************************************** */

.contents#company {
	padding: 50px 0;
}

.contents#company p.name,
.contents#company dl {
	font-size: 16px;
	line-height: 2;
	margin: 0 0 8px 0;
}

.contents#company p.name {
	font-weight: bold;
	margin: 0 0 18px 0;
}

.contents#company dl.president {
	margin-bottom: 12px;
}

.contents#company dl.name {
	margin: 0;
}

.contents#company p.name span {
	display: inline-block;
}

.contents#company dt {
	display: inline-block;
	vertical-align: top;
	width: 100px;
	margin: 0 30px 0 0;
	text-align: justify;
	text-justify: inter-character;
	-moz-text-align-last: justify;
	text-align-last: justify;
}

.contents#company dd {
	display: inline-block;
	vertical-align: top;
	line-height: 1.8;
}

.contents#company dd a.gmap {
	line-height: 1;
	padding: 8px 23px 5px 23px;
	border: 1px solid #cccccc;
	display: inline-block;
	text-decoration: none;
	color: #000000;
	background-image: url("../images/common/blank.svg");
	background-position: right 5px top 2px;
	background-size: 14px auto;
	background-repeat: no-repeat;
	margin-bottom: 16px;
}

.contents#company dd a.gmap svg,
.contents#company dd a.gmap img {
	width: 93px;
	height: 14px;

}

.contents#company dd a {
	color: #000000;
	text-decoration: underline;
}

.contents#company dd ul li {
	margin: 0 0 16px 0;
	font-size: 18px;
}

.contents#company dd ul li span {
	display: block;
	font-size: 16px;
}

/* ************************************************** */


.contents#careers dl dt {
	font-size: 22px;
	width: 100%;
	display: inline-block;
	vertical-align: top;
	margin-bottom: 16px;
}

.contents#careers dl dd {
	font-size: 18px;
	line-height: 1;
	width: 100%;
	display: inline-block;
	vertical-align: top;
}

.contents#careers dl dd span {
	width: 100%;
	display: inline-block;
	vertical-align: top;
	line-height: 1.7;
	margin-bottom: 8px;
}

.contents#careers dl dd span br.pc {
	display: inline-block;
}

.contents#careers dl dd a {
	color: #000000;
	width: 118px;
	display: block;

	font-size: 18px;
	background-color: #dddddd;
	padding: 13px 0;
	line-height: 1;
	text-align: center;
	text-decoration: none;
	background-image: url("../images/common/arrow_black.png");
	background-repeat: no-repeat;
	background-position: right 16px center;
	background-size: 7px auto;
}



/* ************************************************** */
.contents#contact {
	padding: 80px 0 160px 0;
}

.contents#contact a {
	text-decoration: underline;
}


/* ************************************************** */

.contents#projectdetail {

	max-width: 1200px;
	padding: 0 0 60px 0;
}




.contents#projectdetail .key .image-wrap {
	position: relative;
	width: 100%;
	height: 700px;
	overflow: hidden;
}

.contents#projectdetail .key .image-wrap .image {
	width: 100%;
	height: auto;
	width: 100%;
	height: auto;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}



.contents#projectdetail .head {
	padding: 100px 40px 0 40px;


}

.contents#projectdetail .head .head-inner {
	border-bottom: 1px solid #000000;
	padding: 0 0 44px 0;
	margin-bottom: 44px;
}

.contents#projectdetail .head .label {
	width: 73.2142857%;
	/*820/1120*/
	display: inline-block;
	vertical-align: top;
}

.contents#projectdetail .head h1 {
	font-size: 60px;
	font-weight: 300;
	line-height: 1.4;
	word-wrap: break-word;
	word-break: break-all;
}

.contents#projectdetail .head h2 {
	font-size: 40px;
	font-weight: 300;
	line-height: 1.4;
	word-wrap: break-word;
	word-break: break-all;
}

.contents#projectdetail .head .year {
	font-size: 25px;
	line-height: 1.4;
}

.contents#projectdetail .head .tags {
	width: 26.7857142%;
	/*300/1120*/
	display: inline-block;
	vertical-align: top;
}

.contents#projectdetail .head .tags ul {
	letter-spacing: -.4em;
}

.contents#projectdetail .head .tags ul li {
	font-size: 18px;
	padding: 7px 5px;
	display: inline-block;
	vertical-align: top;
	margin-right: 5px;
	margin-bottom: 5px;
	background-color: #e5e5e5;
	letter-spacing: 0em;
}

.contents#projectdetail h3 {
	font-size: 33px;
	font-weight: 300;
	line-height: 1.5;
	padding: 0 40px;
	margin-bottom: 50px;
	word-wrap: break-word;
	word-break: break-all;
}

.contents#projectdetail .inner {
	margin: 0 auto;
	padding: 0 40px 0 140px;

}

.contents#projectdetail .inner p {
	font-size: 20px;
	line-height: 2.35;
	margin: 50px auto;

}

.contents#projectdetail .inner p a {
	text-decoration: underline;
}

.contents#projectdetail .inner.links {
	padding: 0 40px;
}

.contents#projectdetail .inner p.link {
	margin: 80px auto 0 auto;
	word-wrap: break-word;
	word-break: break-all;
}

.contents#projectdetail .inner ul.linklist {
	margin: 0 auto 0 auto;
	word-wrap: break-word;
	word-break: break-all;
}

.contents#projectdetail .inner ul.linklist li {
	margin-bottom: 60px;
	font-size: 20px;
	line-height: 1.6;
}

.contents#projectdetail .inner ul.linklist li:last-child {
	margin-bottom: 0;
}

.contents#projectdetail .inner ul.linklist li a {
	text-decoration: underline;
}


.contents#projectdetail .fig {
	width: 100%;
	padding: 0 40px;
	margin: 0 auto 150px auto;
	text-align: center;
}

.contents#projectdetail .fig img {
	width: 100%;
	height: auto;
}

.contents#projectdetail .fig img.min {
	width: auto;
}

.contents#projectdetail .sns-share {
	margin: 60px auto 0 auto;
	padding: 0 40px;
}


.projectcontact {
	background-color: none;
	padding: 0 40px;

}

.contents#projectdetail .projectcontact .inner {
	padding: 100px 0 60px 0;
	/*margin: 100px auto 0 auto;*/
	margin: 10px auto 0 auto;
	border-top: 1px solid #000;
}

.contents#projectdetail .projectcontact p {
	font-size: 22px;
	line-height: 2;
	font-weight: lighter;
}

.contents#projectdetail .projectcontact p a {
	text-decoration: underline;
}

.projectcontact .inner svg,
.projectcontact .inner img {
	width: 138px;
	height: 26.1333px;
	display: inline-block;
	vertical-align: middle;
}



/* ************************************************** */
.contents#privacy {
	padding: 90px 0 60px 0;
}

.contents#privacy article {
	padding: 0 40px;
	max-width: 1120px;
	margin: 0 auto;
}

.contents#privacy article h1 {
	font-size: 35px;
	margin-bottom: 50px;
	font-weight: normal;
}

.contents#privacy article p {
	font-size: 20px;
	line-height: 1.5;
	margin-bottom: 40px;
}

.contents#privacy article h2 {
	font-size: 26px;
	margin-bottom: 40px;
	font-weight: normal;
}

.contents#privacy article dl dt {
	font-size: 23px;
	margin-bottom: 40px;
}

.contents#privacy article dl dd p {
	font-size: 20px;
	line-height: 1.5;
	margin-bottom: 40px;
}

.contents#privacy article p a {
	text-decoration: underline;
}

.contents#privacy .mark {
	background-color: #fff;
	padding: 4px;
	display: inline-block;
}

/* ************************************************** */

.contents#access {
	padding: 96px 0;
}

.contents#access .access {
	max-width: 1120px;
	margin: 0 auto;
}

.contents#access .access .access-inner {
	margin: 0 auto 100px auto;
}

.contents#access .access .access-inner:last-child {
	margin: 0 auto;
}

.contents#access .access .access-inner h1 {
	font-size: 23px;
	font-weight: normal;
	width: 230px;
	display: inline-block;
	vertical-align: top;
}

.contents#access .access .access-inner h1:before {
	content: "・";
	font-size: 23px;
	vertical-align: middle;
}

.contents#access .access .access-inner .text {
	width: calc(100% - 230px);
	display: inline-block;
	vertical-align: top;
	margin-bottom: 50px;
}

.contents#access .access .access-inner .text p {
	font-size: 21px;

}

.contents#access .access .access-inner .text p.time {
	margin-bottom: 30px;
	line-height: 1;
}

.contents#access .access .access-inner .maps {
	width: 100%;
	height: 480px
}

.contents#access .access .access-inner .maps iframe {
	width: 100%;
	height: 480px
}


/* ************************************************** */

.contents#contactform {
	padding: 80px 0 70px 0;
}

.contents#contactform h1 {
	width: 310px;
	display: inline-block;
	vertical-align: top;
}

.contents#contactform h1 img,
.contents#contactform h1 svg {
	width: 232.367px;
	height: 44px;
}

.contents#contactform p {
	width: calc(100% - 310px);
	display: inline-block;
	vertical-align: top;
	font-size: 17px;
	line-height: 1.5;
	margin-bottom: 50px;
}

.contents#contactform p a {
	text-decoration: underline;
}

.contents#contactform p span {
	color: #ff0000;
}


.contents#contactform #form #mailform {
	margin-bottom: 50px;
	width: 100%;
	display: inline-block;
	vertical-align: top;
}


.contents#contactform #form #mailform dl dt {
	font-size: 16px;
	line-height: 32px;
	margin-bottom: 20px;
	width: 320px;
	display: inline-block;
	vertical-align: top;
}

.contents#contactform #form #mailform dl.seimei dt {
	width: 220px;
	/*-100px*/
}

.contents#contactform #form #mailform dl dt span {
	color: #ff0000;
	font-size: 80%;
	padding-left: 10px;
}

.contents#contactform #form #mailform dl dd {
	padding-right: 30px;
	margin-bottom: 30px;
	width: calc(100% - 320px);
	display: inline-block;
	vertical-align: top;

	font-size: 17px;
	line-height: 1.4;
}

.contents#contactform #form #mailform dl.seimei dd {
	width: calc(100% - 220px);
}

.contents#contactform #form #mailform dl.seimei dd span {
	width: 100px;
	display: inline-block;
	text-align: right;
	padding-right: 24px;
}

.en .contents#contactform #form #mailform dl.seimei dd span {
	padding-right: 6px;
	font-size: 14px;
}


.contents#contactform #form #mailform input {
	width: 100%;
	border: 1px solid #aaaaaa;
	border-radius: 4px;
	font-size: 16px;
	padding: 5px;
}

.contents#contactform #form #mailform dl.seimei input {
	width: calc(50% - 100px);
	display: inline-block;
}

.contents#contactform #form #mailform textarea {
	width: 100%;
	height: 200px;
	border: 1px solid #aaaaaa;
	border-radius: 4px;
	font-size: 20px;
	padding: 5px;


}

.contents#contactform p.endmsg {
	text-align: center;
	width: 100%;
}

.contents#contactform #form #mailform button {
	display: block;
	margin: 0 auto;
	font-size: 23px;
	padding: 18.5px 0;
	border: 1px solid #aaaaaa;
	background-color: #c9c9c9;
	border-radius: 4px;
	color: #ffffff;
	width: 170px;
	cursor: pointer;
}

.contents#contactform #form #mailform button:hover {
	border: 1px solid #000000;
}

.contents#contactform #form #mailform #successText {
	font-size: 16px;
	text-align: center;
	padding: 40px 0;
	color: #ff0000;
	display: none;
}

.contents#contactform .address {
	font-size: 30px;
	line-height: 1.66;
	margin: 0 auto;
	text-align: center;
}

.contents#contactform .address a {
	text-decoration: none;
}


/* ************************************************** */


.contents#newsdetail h1 {
	width: 230px;
	display: inline-block;
	vertical-align: top;
}

.contents#newsdetail h1 img,
.contents#newsdetail h1 svg {
	width: 147.65px;
	height: 44px;
}

.contents#newsdetail dl.newsbody {
	width: calc(100% - 230px);
	display: inline-block;
	vertical-align: top;
}

.contents#newsdetail dl.newsbody dt {
	font-size: 25px;
	margin-bottom: 60px;
	margin-top: 15px;
}

.contents#newsdetail dl.newsbody dd h2 {
	font-size: 30px;
	font-weight: 600;
	line-height: 1.66;
	/*margin-bottom:50px;*/
	margin-bottom: 30px;
}

.contents#newsdetail dl.newsbody dd h3 {
	font-size: 24px;
	font-weight: bold;
	line-height: 1.66;
	/*margin-bottom:50px;*/
	margin-bottom: 20px;
}

.contents#newsdetail dl.newsbody dd h4 {
	font-size: 20px;
	font-weight: bold;
	line-height: 1.66;
	/*margin-bottom:50px;*/
	margin-bottom: 20px;
}



.contents#newsdetail dl.newsbody dd .sns-share {
	margin-bottom: 80px;
}


.contents#newsdetail dl.newsbody dd ul,
.contents#newsdetail dl.newsbody dd p {
	font-size: 20px;
	line-height: 2;
	margin-bottom: 50px;
}

.contents#newsdetail dl.newsbody dd p a {
	text-decoration: underline;
}

.contents#newsdetail dl.newsbody dd .fig {
	margin: 0 auto 50px auto;
}

.contents#newsdetail dl.newsbody dd .fig img {
	max-width: 100%;
	height: auto;
	margin: 0 auto 10px auto;
}

.contents#newsdetail dl.newsbody dd .fig .caption {
	font-size: 14px;
}

.contents#newsdetail dl.newsbody dd .grid {
	display: grid;
	margin: 0 auto;
}

.contents#newsdetail dl.newsbody dd .grid3 {
	grid-template-columns: 1fr 1fr 1fr;
	gap: 30px;
}



/* ************************************************** */
.dark-theme a {
	color: #fff;
}

.dark-theme .svg {
	color: #fff;
	fill: currentColor;
}

.dark-theme .contents#logo .scroll .bar {
	background-color: #fff;
}

.dark-theme .contents.inview::after {
	background-color: #fff;
}

.dark-theme .contents#news .newslist li a {
	color: #fff;
}

.dark-theme .contents#company dd a.gmap {
	color: #fff;
}

.dark-theme .contents#company dd a.gmap svg {
	color: #fff;
}

.dark-theme .contents#projects .listview ul li .desc .desc-inner h3 {
	color: #fff;

}

.dark-theme .contents#projects .listview ul li .desc .desc-inner p {
	color: #fff;
}

.dark-theme .contents#projects .toggle {
	border-color: #fff
}

.dark-theme .contents#projects .toggle svg {
	border: 1px solid #fff;
}

.dark-theme footer .copy {
	color: #000;
}

.dark-theme .contents#projectdetail .head .head-inner {
	border-color: #fff
}

.dark-theme .contents#projectdetail .head .tags ul li {
	color: #000;
}




.dark-theme .contents#projectdetail .projectcontact .inner {
	border-top: 1px solid #fff;
}

.dark-theme .contents#projectdetail .projectcontact .inner a {
	border-bottom: 1px solid #fff;
}

.dark-theme .projectcontact svg {
	color: #fff;
}

.dark-theme .contents#projects .listview ul li a .desc .desc-inner p:after {
	background-image: url("/assets/images/common/detail.png");
}


/* ************************************************** */


@media(max-width:1920px) {

	.contents#projects ul li .desc .desc-inner {
		padding: 2.5vw;
		/*48/1920*/
	}

	.contents#projects ul li .desc .desc-inner h3 {
		font-size: 1.0416666vw;
		/*20/1920*/
	}

	.contents#projects ul li .desc .desc-inner p {
		font-size: 1.0416666vw;
		/*20/1920*/
	}

	.contents#projects ul li .desc .desc-inner .award {
		bottom: 2.5vw;
		/*48/1920*/
		left: 2.5vw;
		/*48/1920*/
	}

	.contents#projects ul li .desc .desc-inner .award img {
		height: 3.90625vw;
		/*75/1920*/

	}

	.contents#projects ul li a .desc .desc-inner p:after {
		width: 5.2083333vw;
		/*100/1920*/
		height: 1.875vw;
		/*36/1920*/
		background-size: 5.2083333vw auto;
		/*100/1920*/
		margin-top: 0.8333333vw;
		/*16/1920*/
	}


	.contents#projectdetail .key .image-wrap {
		width: 100%;
		height: 700px;

	}

	.contents#projectdetail .key .image-wrap .image {
		width: auto;
		height: 700px;
	}
}

/* ************************************************** */



@media(max-width:1199px) {
	.contents#projectdetail .key .image-wrap {
		width: 100%;
		height: 58.3333333vw;
		/*700px/1200*/
	}

	.contents#projectdetail .key .image-wrap .image {
		width: 160vw;
		/*1920/1200*/
		height: auto;
		/*700px/1920*/
	}


	.contents#projects ul li .desc .desc-inner {
		padding: 2.5vw;
		/*48/1920*/
	}






}

/* ************************************************** */



@media(max-width:1150px) {
	.contents {
		max-width: 1150px;
		padding-left: 15px !important;
		padding-right: 15px !important;
	}

	.contents.inview:after {
		left: 15px;
	}

	.contents.inview.show:after {
		width: calc(100% - 30px);
	}

	.contents#projects {
		padding-left: 0 !important;
		;
		padding-right: 0 !important;
		;
	}

	.contents#projects h2 {
		padding-left: 15px;
	}

	.contents#projects .toggle {
		right: 15px;
	}

	.contents#projects .listview ul li {
		padding-left: 15px;
		padding-right: 15px;
	}

	.contents#projectdetail {
		padding-left: 0 !important;
		;
		padding-right: 0 !important;
		;
	}


	.projectcontact {
		padding: 0 15px;
	}



}

/* ************************************************** */


@media(max-width:1120px) {
	.full-width {
		position: static;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
}

/* ************************************************** */

@media(max-width:1024px) {


	.contents#projectdetail .head .label {
		width: 100%;
	}

	.contents#projectdetail .head .tags {
		width: 100%;
		margin-top: 5px;
	}


	.contents#projects ul li .desc .desc-inner h3 {
		font-size: 1.3333333vw;
		/*16/1200*/
	}

	.contents#projects ul li .desc .desc-inner p {
		font-size: 1.3333333vw;
		/*16/1200*/

	}

	.contents#projects ul li a .desc .desc-inner p:after {
		display: block;
		width: 8.3333333vw;
		/*100/1200*/
		height: 2.8333333vw;
		/*34/1200*/
		background-size: 8.3333333vw auto;
		/*100/1200*/
		margin-top: 1.3333333vw;
		/*16/1200*/
	}
}



/* ************************************************** */

@media(max-width:850px) {

	.contents#logo h1 img {
		width: 100%;
	}


	.mr36 {
		margin-bottom: 72px;
	}

	.contents#narrative h2 {
		width: auto;
		max-width: 810px;
		height: 44px;
	}

	.contents#narrative h2 svg,
	.contents#narrative h2 img {
		max-width: 810px;
		width: auto;
		height: 44px;
	}

	.contents#narrative h2 svg.nlogo1,
	.contents#narrative h2 img.nlogo1 {
		width: auto;
		height: 44px;
	}

	.contents#narrative h2 svg.nlogo2,
	.contents#narrative h2 img.nlogo2 {
		width: auto;
		height: 44px;
	}

	.contents#narrative h2 svg.nlogo3,
	.contents#narrative h2 img.nlogo3 {
		width: auto;
		height: 44px;
		padding: 10px 0;
	}



	.contents#careers dl dt {
		width: 100%;
		margin-bottom: 20px;
	}

	.contents#careers dl dd {
		width: 100%;
	}

}

/* ************************************************** */
@media(max-width:830px) {
	.contents#logo h1 .msg {
		font-size: 2.4096vw;
		/*20*/
		bottom: 10.8433vw;
		/*90*/

	}
}

/* ************************************************** */
@media(max-width:768px) {
	.contents#projects ul li {
		width: calc(100% / 2);
	}


	.contents#projects ul li .desc .desc-inner {
		padding: 3.90625vw;
		/*30/768*/
	}

	.contents#projects ul li .desc .desc-inner h3 {
		font-size: 2.34375vw;
		/*18/768*/
	}

	.contents#projects ul li .desc .desc-inner p {
		font-size: 2.34375vw;
		/*18/768*/

	}

	.contents#projects ul li .desc .desc-inner .award {
		left: 3.90625vw;
		/*30/768*/
		bottom: 3.90625vw;
		/*30/768*/
	}

	.contents#projects .listview ul li .desc .desc-inner .award img {
		max-height: 75px;
		height: auto;
	}

	.contents#narrative h2 {

		height: 32px;
	}

	.contents#narrative h2 svg,
	.contents#narrative h2 img {

		height: 32px;
	}

	.contents#narrative h2 svg.nlogo1,
	.contents#narrative h2 img.nlogo1 {

		height: 32px;
		margin-right: 6px;
	}

	.contents#narrative h2 svg.nlogo2,
	.contents#narrative h2 img.nlogo2 {

		height: 32px;
		margin-right: 6px;
	}

	.contents#narrative h2 svg.nlogo3,
	.contents#narrative h2 img.nlogo3 {

		height: 32px;
		padding: 8px 0;
	}


	.contents#contactform #form #mailform dl dt {
		width: 100%;

	}

	.contents#contactform #form #mailform dl.seimei dt {
		width: 100%;
	}

	.contents#contactform #form #mailform dl dd {
		width: 100%;
		padding-right: 0;
	}

	.contents#contactform #form #mailform dl.seimei dd {
		width: 100%;
	}



	.contents#contactform #form #mailform textarea,
	.contents#contactform #form #mailform input {
		font-size: 16px;
	}

	.contents#contactform #form #mailform button {
		font-size: 16px;
	}

	.contents#contactform .address {
		font-size: 16px;
	}

}


/* ************************************************** */
@media(max-width:640px) {

	header .menu {
		top: 20px;
		width: 22px;
		height: auto;
	}




	.contents#narrative h2,
	.contents#projects h2,
	.contents#news h2,
	.contents#company h2,
	.contents#careers h2 {
		width: auto;
		height: 24px;
		margin-bottom: 50px;
	}



	.contents#narrative h2 svg,
	.contents#narrative h2 img,
	.contents#news h2 img,
	.contents#news h2 svg,
	.contents#careers h2 img,
	.contents#careers h2 svg,
	.contents#contact h2 img,
	.contents#contact h2 svg {
		width: auto;
		height: 24px;
	}

	.contents#projects h2 img,
	.contents#projects h2 svg,
	.contents#company h2 img,
	.contents#company h2 svg {
		width: auto;
		height: 30px;
	}


	.contents h3 {
		font-size: 20px;
	}

	.contents p {
		font-size: 16px;
	}


	.contents#logo h1 .msg {
		font-size: 2.5vw;
		/*16*/
		bottom: 10vw;
		/*64*/


	}



	.contents#narrative h3 {
		font-size: 24px;
		margin-bottom: 20px;

	}

	.contents#narrative h3 br {
		display: none;
	}

	.contents#narrative p {
		padding-left: 30px;
	}

	.contents#narrative p br {
		display: none;
	}





	.contents#news .newslist li dl dd {
		width: 100%;
		margin-bottom: 20px;
	}

	.contents#careers dl dd span {
		width: 100%;
		padding-right: 0;
	}





	.contents#projects .toggle img,
	.contents#projects .toggle svg {
		width: 50px;
		height: 36px;
		padding: 8px;

	}



	.contents#projects ul li .desc .desc-inner h3 {
		font-size: 2.1875vw;
		/*14/640*/
	}

	.contents#projects ul li .desc .desc-inner p {
		font-size: 2.1875vw;
		/*14/640*/

	}

	.contents#projects .listview ul li {
		padding-top: 20px;
	}

	.contents#projects .listview ul li img {
		max-width: 100%;
		width: auto;
		float: none;
		margin: 0 auto;
		display: block;
	}

	.contents#projects .listview ul li .desc {
		width: 100%;
		float: none;
	}

	.contents#projects .listview ul li a .desc .desc-inner p::after {
		width: 15.625vw;
		/*100/640*/
		height: 5.3125vw;
		/*34/640*/
		background-size: 15.625vw auto;
		/*100/640*/
		width: 15.625vw;
		/*100/640*/
		height: 5.3125vw;
		/*34/640*/
	}



	.contents#company dt {
		width: 86px;
	}

	.contents#company dd {
		width: calc(100% - 86px - 30px);
	}

	.contents#careers dl dd {
		font-size: 16px;
	}



	/* *** */
	.contents#projectdetail .key {
		margin-bottom: 50px;
	}



	.contents#projectdetail .head {
		padding: 0 15px;
	}

	.contents#projectdetail .head h1 {
		font-size: 30px;
	}

	.contents#projectdetail .head h2 {
		font-size: 20px;
	}

	.contents#projectdetail .head .year {
		font-size: 14px;
	}

	.contents#projectdetail .head .tags ul {
		letter-spacing: -.4em;
	}

	.contents#projectdetail .head .tags ul li {
		font-size: 12px;
		padding: 4px;
		margin-right: 3px;
		margin-bottom: 3px;
	}

	.contents#projectdetail h3 {
		font-size: 22px;
		padding: 0 15px;
		margin-bottom: 25px;
	}

	.contents#projectdetail .inner {
		padding: 0 15px;
	}


	.contents#projectdetail .fig {
		margin: 0 auto 70px auto;
		padding: 0 15px;
	}


	.contents#projectdetail .inner p {
		font-size: 16px;
		margin: 0 auto 25px auto;
		padding: 0;
	}

	.contents#projectdetail .inner ul {
		font-size: 16px;
		margin: 0 auto 50px auto;
	}

	.contents#projectdetail .inner.links {
		padding: 0 15px;
	}

	.contents#projectdetail .inner ul.linklist {
		width: 100%;
		padding-left: 0;

	}

	.contents#projectdetail .inner ul.linklist li {
		font-size: 16px;
		width: 100%;
		margin-bottom: 30px;

	}

	.contents#projectdetail .projectcontact .inner {
		padding: 50px 0;
		/*margin: 50px auto 0 auto;*/
		margin: 10px auto 0 auto;
	}

	.contents#projectdetail .sns-share {
		padding: 0 15px;
	}


	/* *** */
	.contents#privacy article h1 {
		font-size: 24px;
	}

	.contents#privacy article h2 {
		font-size: 20px;
	}

	.contents#privacy article dl dt {
		font-size: 18px;
	}

	.contents#privacy article p {
		font-size: 16px;
	}

	.contents#privacy article dl dd p {
		font-size: 16px;
	}


	/* *** */
	.contents#newsdetail h1 {
		width: auto;
		height: 22px;
	}

	.contents#newsdetail h1 img,
	.contents#newsdetail h1 svg {
		width: auto;
		height: 22px;
	}

	.contents#newsdetail dl.newsbody {
		width: 100%;
		padding-top: 50px;
	}

	.contents#newsdetail dl.newsbody dt {
		font-size: 18px;
	}

	.contents#newsdetail dl.newsbody dd h2 {
		font-size: 20px;
	}

	.contents#newsdetail dl.newsbody dd ul,
	.contents#newsdetail dl.newsbody dd p {
		font-size: 16px;
	}

	.contents#newsdetail dl.newsbody dd img {
		max-width: 100%;
		width: auto;
	}


	/* *** */
	.contents#contactform {
		padding-left: 15px;
		padding-right: 15px;
	}

	.contents#contactform h1 {
		width: auto;
		height: 22px;
	}

	.contents#contactform h1 img,
	.contents#contactform h1 svg {
		width: auto;
		height: 22px;
	}

	.contents#contactform p {
		width: 100%;
		padding-top: 50px;
	}


	/* *** */
	.contents#privacy {
		padding-left: 15px;
		padding-right: 15px;
	}

	.contents#privacy article {
		padding: 0;
	}


	/* *** */
	.contents#access {
		padding-left: 15px;
		padding-right: 15px;
	}

	.contents#access .access .access-inner h1 {
		width: auto;
		height: 22px;
		font-size: 22px;
	}

	.contents#access .access .access-inner h1::before {
		font-size: 22px;
	}

	.contents#access .access .access-inner .text {
		width: 100%;
	}

	.contents#access .access .access-inner .text p {
		font-size: 16px;
	}

	.contents#access .access .access-inner .text p.time {
		margin-top: 30px;
	}


}


/* ************************************************** */
@media(max-width:480px) {



	.contents#company dd.description {
		width: 100%;
	}

	.contents#company dd ul {
		float: right;
	}

	.contents#contactform #form #mailform dl.seimei dd span {
		width: 50px;
	}

	.en .contents#contactform #form #mailform dl.seimei dd span {
		width: 100px;
	}

	.contents#contactform #form #mailform dl.seimei input {
		width: calc(100% - 50px);
	}

	.en .contents#contactform #form #mailform dl.seimei input {
		width: calc(100% - 100px);
	}

	.contents#contactform #form #mailform dl.seimei input[name=sei] {
		margin-bottom: 16px;
	}

	.en .contents#contactform #form #mailform dl.seimei input[name=sei] {
		margin-bottom: 0;
	}

	.en .contents#contactform #form #mailform dl.seimei input[name=mei] {
		margin-bottom: 16px;
	}

}


/* ************************************************** */
@media(max-width:374px) {

	.contents#narrative h2 {

		height: 21px;
	}

	.contents#narrative h2 svg,
	.contents#narrative h2 img {

		height: 21px;
	}

	.contents#narrative h2 svg.nlogo1,
	.contents#narrative h2 img.nlogo1 {

		height: 21px;
		margin-right: 2px;
	}

	.contents#narrative h2 svg.nlogo2,
	.contents#narrative h2 img.nlogo2 {

		height: 21px;
		margin-right: 2px;
	}

	.contents#narrative h2 svg.nlogo3,
	.contents#narrative h2 img.nlogo3 {

		height: 21px;
		padding: 6px 0;
	}

}

/* ************************************************** */



.np-svchub {
	--paper: #FFFFFF;
	--sumi: #111111;
	--hai: #767676;
	--line: #E3E3E3;
	--hover: #FAFAF9;
	--min: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
	--got: "Yu Gothic", "YuGothic", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
	background: var(--paper);
	color: var(--sumi);
	font-family: var(--min);
	font-feature-settings: "palt";
	letter-spacing: 0.04em;
	padding: 0 24px 0 24px;
	margin: 0;
}

.dark-theme .np-svchub {
	--paper: #141414;
	--sumi: #EDEDED;
	--hai: #8A8A8A;
	--line: #333333;
	--hover: #1C1C1C;
}


.np-svchub *, .np-svchub *::before, .np-svchub *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

.np-svchub .np-svchub-inner {
	max-width: 1000px;
	margin: 0 auto;
}

/* --- ハブ見出し --- */
.np-svchub .np-svchub-eyebrow {
	font-family: var(--got);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.32em;
	color: var(--hai);
	display: block;
	margin-bottom: 20px;
}

.np-svchub .np-svchub-title {
	font-size: clamp(26px, 4vw, 38px);
	font-weight: 600;
	line-height: 1.7;
	letter-spacing: 0.05em;
	margin-bottom: 24px;
}

.np-svchub .np-svchub-lead {
	font-size: 16px;
	line-height: 2;
	max-width: 100%;
	color: var(--sumi);
	margin-bottom: 64px;
}

/* --- サービス一覧（インデックス） --- */
.np-svchub .np-svc-list {
	border-top: 2px solid var(--sumi);
}

.np-svchub .np-svc-item {
	display: flex;
	align-items: flex-start;
	padding: 44px 8px;
	border-bottom: 1px solid var(--line);
	text-decoration: none;
	color: var(--sumi);
	transition: background-color 0.3s ease;
	position: relative;
}

.np-svchub .np-svc-item:hover,
.np-svchub .np-svc-item:focus-visible {
	/*background: var(--hover);*/
	opacity: 0.6;
}



.np-svchub .np-svc-item:focus-visible {
	outline: 3px solid var(--sumi);
	outline-offset: -3px;
}

.np-svchub .np-svc-name {
	flex: 0 0 248px;
	font-family: var(--got);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.2em;
	color: var(--sumi);
	line-height: 1.7;
	padding-top: 8px;
}

.np-svchub .np-svc-body {
	flex: 1 1 auto;
	padding: 0 120px 0 40px;
	min-width: 0;
}

.np-svchub .np-svc-headline {
	display: block;
	font-size: clamp(20px, 2.4vw, 25px);
	font-weight: 600;
	line-height: 1.75;
	letter-spacing: 0.03em;
	margin-bottom: 16px;
}

.np-svchub .np-svc-desc {
	display: block;
	font-family: var(--got);
	font-size: 14px;
	line-height: 2;
	color: var(--hai);
}

.np-svchub .np-svc-body {
	display: block;
}

.np-svchub .np-svc-go {
	flex: 0 0 auto;
	align-self: center;
	font-family: var(--got);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.1em;
	white-space: nowrap;
	display: inline-flex;
	align-items: center;
	position: absolute;
	top: 50%;
	right: 0;
}

.np-svchub .np-svc-go .np-arrow {
	display: inline-block;
	width: 30px;
	height: 1px;
	background: var(--sumi);
	position: relative;
	margin-left: 12px;
	transition: width 0.3s ease;
}

.np-svchub .np-svc-go .np-arrow::after {
	content: "";
	position: absolute;
	right: 0;
	top: -3px;
	width: 7px;
	height: 7px;
	border-top: 1px solid var(--sumi);
	border-right: 1px solid var(--sumi);
	transform: rotate(45deg);
}

.np-svchub .np-svc-item:hover .np-arrow {
	width: 48px;
}

/* --- 末尾の一言（成長を含意） --- */
.np-svchub .np-svchub-foot {
	font-family: var(--got);
	font-size: 13px;
	line-height: 1.9;
	color: var(--hai);
	margin-top: 40px;
	max-width: 100%;
}

/* --- レスポンシブ --- */
@media (max-width: 760px) {
	.np-svchub {
		/*padding: 64px 20px 72px;*/
		padding: 0;
	}

	.np-svchub .np-svchub-lead {
		margin-bottom: 44px;
	}

	.np-svchub .np-svc-item {
		flex-direction: column;
		padding: 32px 4px;
	}

	.np-svchub .np-svc-name {
		flex: none;
		margin-bottom: 14px;
		padding-top: 0;
	}

	.np-svchub .np-svc-body {
		flex: none;
		padding: 0;
		width: 100%;
	}

	.np-svchub .np-svc-go {
		align-self: flex-start;
		margin-top: 20px;
		position: static;
	}
}

@media (prefers-reduced-motion: reduce) {
	.np-svchub * {
		transition: none !important;
	}
}

/* --- ダークモード（OS追従。クラス方式の場合は body.dark .np-svchub 等に読み替え） --- */
@media (prefers-color-scheme: dark) {
	.np-svchub.np-auto-dark {
		--paper: #141414;
		--sumi: #EDEDED;
		--hai: #8A8A8A;
		--line: #333333;
	}

	.np-svchub.np-auto-dark .np-svc-item:hover {
		background: #1C1C1C;
	}
}


/* ************************************************** */