@charset 'UTF-8';

/*

    Base

*/

/*  base  */
html {
	font-size: 8px;
}
@media screen and (min-width: 768px) {
	html { font-size: 10px;}
}

/*  font  */
body {
	font-family: 'Noto Sans JP', sans-serif;
	color: #444444;
	font-size: 1.4rem;
}
h1 { font-size: 6.0rem;}
h2 { font-size: 4.8rem;}
h3 { font-size: 1.7rem;}
h4 { font-size: 1.5rem;}
a { transition: all 0.1s linear;}
a:link    { color: #2192ff;}
a:visited { color: #2192ff;}
a:hover   { opacity: 0.7;}

/*  basic  */
dl dt {
	line-height: 2;
	font-weight: normal;
}
dl dd {
	line-height: 2;
}

/*  common  */
.global ul,
.global li,
.global p {
	margin: 0;
	list-style: none;
}
.global a {
	color: inherit;
}

/*  other  */
body img,
body iframe {
	max-width: 100%;
}

/*  container  */
div.container {
	margin: 1em;
}
@media screen and (min-width: 768px) {
	div.container {
		max-width: 1160px;
		margin: 0 auto;
		padding: 0 20px;
	}
	div.container.narrow {
		max-width: 960px;
	}
	div.container.thin {
		max-width: 720px;
	}
}






/*

    Header

*/

/*  layout  */
body {
	padding-top: 50px;
}
header.global {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	z-index: 999;
}
@media screen and (min-width: 768px) {
	body {
		padding-top: 65px;
	}
}

/*  home  */
header.global a.home {
	padding: 10px;
}
header.global a.home img {
	display: block;
	width: 140px;
}
@media screen and (min-width: 768px) {
	header.global a.home {
		padding: 15px 20px;
	}
}





/*

    Navigation

*/

/*  layout  */
header.global nav.global {
	padding: 10px;
}
header.global nav.global ul {
	display: flex;
	align-items: center;
	padding-right: 0.5em;
	font-family: 'Asap', sans-serif;
}
header.global nav.global ul li {
	margin-left: 1.5em;
}
@media screen and (min-width: 768px) {
	header.global nav.global {
		padding: 20px;
	}
	header.global nav.global ul {
		padding-right: 25px;
	}
	header.global nav.global ul li {
		margin-left: 3.5em;
	}
}





/*

    Footer

*/

/*  layout  */
footer.global small {
	display: block;
	text-align: right;
}
@media screen and (min-width: 768px) {
	footer.global small {
		padding: 2.5em 0;
	}
}





/*

    Local navigation

*/

/*  layout  */
nav.local {
	display: none !important;
}
@media screen and (min-width: 768px) {
	#toppage nav.local {
		display: block;
		position: fixed;
		right: 30px;
		bottom: 30%;
	}
	nav.local a {
		display: block;
		margin-bottom: 0.5em;
		font-family: 'Asap', sans-serif;
		color: #000000;
		opacity: 0.5;
		z-index: 999;
	}
	nav.local a:before {
		content: '';
		display: inline-block;
		width: 0.4em;
		height: 0.4em;
		margin-right: 0.75em;
		background-color: #000000;
		border-radius: 0.5em;
	}
	nav.local a.current {
		opacity: 1;
	}
	nav.local.reverse a {
		color: #ffffff;
	}
	nav.local.reverse a:before {
		background-color: #ffffff;
	}
}





/*

    Contact

*/

/*  styles  */
aside.contact {
	padding: 2em 0;
	background-image: url('../images/bg_contact.jpg');
	background-size: cover;
	background-position: right center;
	color: #ffffff;
	text-align: center;
}
aside.contact h2 {
	font-family: 'Open Sans', sans-serif;
	font-weight: 700;
	line-height: 1.5;
}
aside.contact p {
	margin: 0 0 3em;
}
aside.contact div.link {
	display: inline-block;
}
@media screen and (min-width: 768px) {
	aside.contact {
		padding: 7em 0;
		text-align: left;
	}
	aside.contact p {
		margin: 0 0 4em;
	}
}





/*

    Contents

*/

/*  heading  */
main h1 {
	padding: 1.5em 0 2em;
	font-family: 'Open Sans', sans-serif;
	font-weight: 400;
}
main h1 span {
	font-size: 1.5rem;
}
main h2 {
	font-family: 'Open Sans', sans-serif;
	font-weight: 700;
}
main p.subheading {
	margin: 1em 0 4em;
	font-weight: 600;
	font-size: 2.0rem;
}

/*  buttons  */
p.buttons {
	display: inline-block;
}
a.button {
	display: flex;
	align-items: center;
	padding: 1em 6em;
	border: 1px #ffffff solid;
	color: #ffffff;
	border-radius: 3em;
	cursor: pointer;
}
a.button.reverse {
	color: #000000;
	border-color: #000000;
}
a.button img:first-child {
	display: block;
	width: 20px;
}
a.button img:first-child {
	margin-right: 0.75em;
}
a.button img:last-child {
	margin-left: 0.75em;
}

/*  labels  */
span.label {
	display: inline-block;
	padding: 0 1em;
	margin: 0.5em 0.5em 0 0;
	background-color: #222222;
	color: #ffffff;
	font-size: 1.1rem;
	font-weight: 500;
	border-radius: 2em;
}

/*  div.em  */
div.em {
	margin: 1em 0;
	padding: 2em 2em 1em;
	border: 1px #eeeeee solid;
}

/*  div.profile img, p  */
div.profile img {
	display: block;
	max-width: 230px;
	margin: 0 auto;
}
div.profile p {
	text-align: justify;
}
@media screen and (min-width: 768px) {
	div.profile img {
		max-width: none;
	}
}

/*  ul.information  */
ul.information {
	border-top: 1px #eeeeee solid;
}
ul.information li {
	margin: 0;
	padding: 2em 0;
	border-bottom: 1px #eeeeee solid;
	list-style: none;
}
ul.information li a {
	display: block;
	color: inherit;
}
ul.information li a span.date {
	display: inline-block;
	width: 8em;
	font-family: 'Open Sans', sans-serif;
	font-weight: 300;
}

/*  section.lead  */
section.lead div.lead {
	height: 100vh;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
}
section.lead h1 {
	padding: 0;
	font-size: 8rem;
}
section.lead h1 img {
	max-width: 240px;
}
section.lead p {
	margin-top: 0.5em;
	padding-top: 0.5em;
	border-top: 1px #eeeeee solid;
	font-size: 2.8rem;
	font-family: 'Open Sans', sans-serif;
	font-weight: 300;
}
@media screen and (min-width: 768px) {
	section.lead div.lead {
		text-align: right;
		justify-content: right;
	}
	section.lead h1 img {
		max-width: 360px;
	}
	section.lead p {
		font-size: 4.6rem;
	}
}

/*  sticky  */
section.sticky {
	position: relative;
	padding: 0 2em;
	padding-top: 70vh;
	padding-bottom: 40vh;
	color: #ffffff;
}
section.sticky div.content {
	position: relative;
	z-index: 1;
}
section.sticky div.content p {
	line-height: 2;
	font-weight: 500;
}
section.sticky div.background {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}
section.sticky div.background div {
	position: sticky;
	top: 0;
	width: 100%;
	height: 100vh;
	background-position: center;
	background-size: cover;
	z-index: -1;
}
section.sticky.concept div.background div {
	background-image: url('../images/bg_concept.jpg');
	background-position: center center;
}
section.sticky.about div.background div {
	background-image: url('../images/bg_about.jpg');
	background-position: left center;
}
@media screen and (min-width: 768px) {
	section.sticky {
		padding-left: 10vw;
	}
	section.sticky div.content {
		width: 45vw;
	}
	section.sticky.about {
		padding-left: 45vw;
	}
}

/*  feature  */
section.feature {
	padding: 4em 0;
}
section.feature div.wrap {
	width: 100%;
}
section.feature h2,
section.feature p.subheading {
	text-align: center;
}
section.feature ul {
	width: 100%;
	border-top: 1px #eeeeee solid;
	border-bottom: 1px #eeeeee solid;
}
section.feature ul li {
	margin: 0;
	padding: 2em;
	list-style: none;
	border-top: 1px #eeeeee solid;
}
section.feature ul li:first-child {
	border-top: none;
}
section.feature ul li span.number {
	display: block;
	margin-bottom: 0.2em;
	font-family: 'Open Sans', sans-serif;
	font-size: 10rem;
	font-weight: 700;
	color: #eeeeee;
}
section.feature ul li strong {
	font-size: 1.8rem;
}
section.feature ul li p {
	min-height: 6em;
	line-height: 2;
}
section.feature ul li p.labels {
	min-height: 0;
}
@media screen and (min-width: 768px) {
	section.feature {
		display: flex;
		align-items: center;
		height: 100vh;
	}
	section.feature ul {
		display: flex;
		justify-content: center;
	}
	section.feature ul li {
		width: 28%;
		border-left: 1px #eeeeee solid;
		border-right: 1px #eeeeee solid;
		box-sizing: border-box;
	}
}

/*  team  */
section.team {
	margin:  0 0 3em;
}
section.team div.team h2,
section.team div.team p.subheading {
	text-align: center;
}
section.team div.team div.outline p {
	line-height: 2;
}
section.team div.team div.outline p.field {
	margin-top: 3em;
	color:#666666;
}
section.team div.team ul {
	border: 1px #eeeeee solid;
}
section.team div.team ul li {
	margin: 0;
	padding: 2em 3em;
	list-style: none;
	border-top: 1px #eeeeee solid;
}
section.team div.team ul li:first-child {
	border-top: none;
}
section.team div.team ul li p {
	padding-top: 75px;
	background-image: url('../images/human.png');
	background-size: 50px auto;
	line-height: 2;
}
@media screen and (min-width: 768px) {
	section.team {
		margin: 0 0 60px;
	}
	section.team div.team {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
	}
	section.team div.team div.outline {
		width: 35%;
	}
	section.team div.team ul {
		width: 57%;
	}
	section.team div.team ul li {
		padding: 3em 4em;
	}
}

/*  case studies  */
section.cases {
	padding-bottom: 160px;
	background-image: url('../images/bg_cases.jpg');
	background-size: auto 160px;
	background-position: left bottom;
	background-repeat: repeat-x;
}
section.cases h2 {
	margin-left: 0.25em;
	line-height: 1;
}
section.cases div.cases-nav {
	display: flex;
	justify-content: right;
	margin-top: -18px;
	margin-right: 0.5em;
}
section.cases div.cases-nav a {
	display: block;
	height: 15px;
	width: 20px;
	margin-left: 1em;
	background-size: cover;
	cursor: pointer;
}
section.cases div.cases-nav a.prev { background-image: url('../images/prev.png');}
section.cases div.cases-nav a.next { background-image: url('../images/next.png');}
section.cases div.cases {
	margin-top: 2em;
}
section.cases div.cases ul {
	display: flex;
	margin: 0;
	border-top: 1px #eeeeee solid;
	overflow-x: scroll;
	-ms-overflow-style: none;
	scrollbar-width: none;
}
section.cases div.cases ul::-webkit-scrollbar {
	display: none;
}
section.cases div.cases ul li {
	min-width: 60%;
	max-width: 60%;
	margin: 0;
	padding: 2em 2.5em;
	border-right: 1px #eeeeee solid;
	list-style: none;
	box-sizing: border-box;
}
section.cases div.cases ul li:first-child {
	margin-left: 2em;
	border-left: 1px #eeeeee solid;
}
section.cases div.cases ul li:last-child {
	margin-right: 2em;
}
section.cases div.cases ul li span.number {
	display: block;
	margin-right: 0.75em;
	font-family: 'Open Sans', sans-serif;
	font-size: 3.2rem;
	font-weight: 700;
}
section.cases div.cases ul li p {
	line-height: 2;
}
@media screen and (min-width: 768px) {
	section.cases {
		padding-bottom: 230px;
		background-size: auto 230px;
	}
	section.cases div.cases {
	}
	section.cases div.cases ul li {
		min-width: 370px;
		max-width: 370px;
	}
	section.cases div.cases ul li:first-child {
		margin-left: 60px;
	}
	section.cases div.cases ul li:last-child {
		margin-right: 60px;
	}
}

/*  process  */
section.process {
	margin: 2em 0;
	padding: 2em;
}
section.process p.subheading {
	margin-top: 0;
}
section.process ol {
	border-top: 1px #eeeeee solid;
}
section.process ol li {
	display: flex;
	align-items: flex-start;
	margin: 0;
	padding: 2em 0;
	border-bottom: 1px #eeeeee solid;
	list-style: none;
}
section.process ol li span.number {
	display: block;
	margin-right: 0.75em;
	font-family: 'Open Sans', sans-serif;
	font-size: 3.2rem;
	font-weight: 700;
}
section.process ol li p {
	margin: 0;
	line-height: 2;
}
section.process ol li p strong {
	display: block;
	margin: 0.25em 0 0.5em;
	font-size: 1.8rem;
}
@media screen and (min-width: 768px) {
	section.process {
		margin: 60px 0;
	}
	section.process div.process {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
	}
	section.process div.process div.heading {
		width: 30%;
	}
	section.process div.process ol {
		width: 65%;
	}
}

/*  section.news  */
section.news {
	margin: 2em 0;
	padding: 2em;
}
section.news:before {
	content: '';
	display: block;
	width: 100vw;
	height: 160px;
	margin: 0 -2em 4em;
	background-image: url('../images/bg_news.jpg');
	background-size: cover;
}
section.news p.subheading {
	margin-top: 0;
}
section.news ul.information li {
	display: none;
}
section.news ul.information li:nth-child(1) { display: block;}
section.news ul.information li:nth-child(2) { display: block;}
section.news ul.information li:nth-child(3) { display: block;}
section.news ul.information li:nth-child(4) { display: block;}
section.news ul.information li:nth-child(5) { display: block;}
section.news p.buttons {
	margin: 3em 0 1em;
}
@media screen and (min-width: 768px) {
	section.news {
		padding: 0 0 3em;
	}
	section.news:before {
		width: 100%;
		height: 230px;
		margin: 0 0 4em;
	}
	section.news div.container {
		padding: 0 3em;
	}
}





/*

    Page

*/

/*  layout  */
div.container.page {
	padding-bottom: 3em;
}
@media screen and (min-width: 768px) {
	div.container.page {
		padding-bottom: 120px;
	}
}

/*  heading  */
h1.page {
	padding: 2em 0;
	background-image: url('../images/bg_about.jpg');
	background-size: cover;
	background-position: center center;
	text-align: center;
	color: #ffffff;
}
body.post h1.page {
	background-image: url('../images/bg_news.jpg');
}
div.container.page h2 {
	margin-top: 1.5em;
}
div.container.page h2#local-0 {
	margin-top: 0.75em;
}
div.container.page p.subheading {
	margin-bottom: 1em;
}
@media screen and (min-width: 768px) {
	div.container.page h2 {
		margin-top: 3em;
	}
	div.container.page h2#local-0 {
		margin-top: 1.5em;
	}
}

/*  container  */
div.container.page {
	margin: 2em;
}
@media screen and (min-width: 768px) {
	div.container.page {
		margin: 0 auto;
	}
}

/*  lead  */
div.container.page div.lead {
	text-align: center;
}

/*  paragraph  */
div.container.page p {
	line-height: 2;
}
div.container.page div.wp-block-media-text__content {
	margin-top: 3em;
}
@media screen and (min-width: 768px) {
	div.container.page div.wp-block-media-text__content {
		margin-top: 0;
	}
	div.container.page div.wp-block-media-text__content p:first-child {
		margin-top: 0;
	}
}





/*

	Mail form

*/

/*  mailform  */
main form {
	padding: 3em 0;
}
main form div.form-item {
	margin: 0.75em 0;
}
main form div.form-item input[type=text],
main form div.form-item input[type=email],
main form div.form-item textarea {
	width: 100%;
	padding: 0.5em 1em;
	border: 1px #cccccc solid;
	border-radius: 5px;
	box-sizing: border-box;
	font-size: 1.7rem;
}
main form div.form-item input[type=submit] {
	margin-top: 1.5em;
	padding: 0.75em 3em;
	background-color: transparent;
	border: 1px #000000 solid;
	color: #000000;
	font-size: 1.5rem;
	border-radius: 10em;
	cursor: pointer;
}
main form.confirm div.form-item {
	padding: 1em 0;
	border-top: 1px #cccccc solid;
}
main form.confirm div.back a {
	color: inherit;
	text-decoration: underline;
}
main p.detecterror {
	padding: 0.5em 1em;
	background-color: #bd1e1e;
	color: #ffffff;
	box-sizing: border-box;
}
main form span.error input[type=text],
main form span.error input[type=email],
main form span.error textarea {
	border-color: #bd1e1e;
}
main form span.errormessage {
	display: block;
	padding-top: 0.25em;
	color: #bd1e1e;
}