@charset "UTF-8";
/* CSS Document */
/* ----------------------------------------
 	reset
 ---------------------------------------- */
html, body, div, span, iframe, h1, h2, h3, h4, h5, h6, p, a, img, dl, dt, dd, ol, ul, li, strong, sub, sup, i, small, address, time, fieldset, form, label, legend, hr, table, caption, tbody, tfoot, thead, tr, th, td, header, footer, nav, section, article, aside, figure, figcaption, canvas, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-style: normal;
	font-size: 100%;
}
article, aside, figure, figcaption, footer, header, nav, section {
	display: block;
}
html {
	scroll-behavior: smooth;
}
html, body {
	width: 100%;
	font-family: "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, Meiryo, sans-serif;
}
ul, ol, li {
	list-style: none;
}
/* ----------------------------------------
 splash-screen
 ---------------------------------------- */
.splash-set {
	height: 100vh;
	width: 100vw;
	position: fixed;
	z-index: 9999;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background-image: linear-gradient(90deg, #DFEAF8, #F4FFE2);
	overflow: hidden;
}
#lottie {
	width: 100%;
	margin:auto;
}
/* ----------------------------------------
	 animation
 ---------------------------------------- */
.common-animate-item {
	transition: all 0.8s ease-out;
	opacity: 0;
	transform: translateY(80px);
}
.common-animate-item.animate-in {
	opacity: 1;
	transform: translateY(0);
}
/* ----------------------------------------
   common
 ---------------------------------------- */
.gradation {
	background-image: linear-gradient(90deg, #DFEAF8, #F4FFE2);
}
.gradation-brown {
	background-image: linear-gradient(90deg, #F5F5F5, #DBD5C5);
}
.bg-glay {
	background:#F5F5F5;
}
img.icon-contact {
	width:16px;
	padding:3px 0 0 6px;
}
.contantsframe-middle {
	width:1040px;
	margin:auto;
}
.pc-flex {
	display:flex;
}
.border-radius-large {
	border-radius:32px;
}
@media only screen and (max-width: 768px) {
	.contantsframe-middle {
		width:100vw;
		margin:auto;
	}
	.pc-flex {
		display:block;
	}
	.border-radius-large {
		border-radius:16px;
	}
}
@media screen and (max-width: 768px) {
img {
    max-width: 100%;
}
}
.pc {
    display: block !important;
}
.sp {
    display: none !important;
}
@media only screen and (max-width: 768px) {
.pc {
    display: none !important;
}
.sp {
    display: block !important;
}
}
@media screen and (min-width: 768px) {
.br-pc {
	display: block;
}
.br-sp {
	display: none;
}
}
@media screen and (max-width: 768px) {
.br-pc {
	display: none;
}
.br-sp {
	display: block;
}
}
hr.hr-small {
	border:none;
	margin-top:16px;
	padding:0;
}
hr.hr-middle {
	border:none;
	margin-top:80px;
	padding:0;
}
hr.hr-large {
	border:none;
	margin-top:160px;
	padding:0;
}
@media only screen and (max-width: 768px) {
	hr.hr-small {
		border:none;
		margin-top:20px;
		padding:0;
	}
	hr.hr-middle {
		border:none;
		margin-top:64px;
		padding:0;
	}
	hr.hr-large {
		border:none;
		margin-top:80px;
		padding:0;
	}
}
/**
 * --------------------------------------------------
 * header
 * --------------------------------------------------
 */
header {
	width:100%;
	margin:0 auto;
	padding:24px 0 0 0;
	position:fixed;
	top:0;
	z-index:9990;
}
header h1 img {
	width:160px;
	margin:0 0 0 80px;
}
nav {
	display: flex;
	position: relative;
}
.Toggle{
	display: none;
}
.menu{
	margin:8px 0 0 auto;
	width:auto;
	background:none;
	padding:0;
	position: relative;
}
.menu ul {
	display: flex;
	flex-wrap: wrap;
}
.menu ul li a {
	padding: 0.75em 0.5em;
	margin:0 3em 0 0;
	text-decoration:none;
	color:#000;
	font-size:14px;
	line-height:1.25em;
	font-family: "Noto Sans JP", sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
	-webkit-transition: .2s ease-in-out;
	-moz-transition: .2s ease-in-out;
	transition: .2s ease-in-out;
}
.menu ul li a:hover {
	opacity:1;
	border-bottom:solid 1px #DBD4C5;
}
@media only screen and (max-width: 768px) {
header {
	width:100vw;
	padding:0;
}
header h1 img {
	width:32vw;
	margin:6px 0 0 8px;
}
.menu {
	z-index: 1000;
	width:50vw;
	position: absolute;
	top:40px;
	margin:0;
	padding:2em;
	background:#DFEAF8;
	transition: 0.5s ease;
	-webkit-transform: translateX(100vw);
	transform: translateX(100vw);
}
.menu ul li a {
	display:block;
	padding:1em 0.8em;
	margin:0;
}
.menu ul {
	display: block;
}
.menu.open {
	-webkit-transform: translateX(50vw);
	transform: translateX(50vw);
}
.Toggle {
	display: block;
	position:absolute;
	width: 40px;
	height: 40px;
	cursor: pointer;
	z-index: 10;
	right:0;
	top:0;
	background:#000;
}
.Toggle span {
	display: block;
	position: absolute;
	width: 16px;
	border-bottom: solid 2px #fff;
	-webkit-transition: .35s ease-in-out;
	-moz-transition: .35s ease-in-out;
	transition: .35s ease-in-out;
}
.Toggle span:nth-child(1) {
	top:10px;
	left:0;
	right:0;
	margin:auto;
}
.Toggle span:nth-child(2) {
	top: 18px;
	left:0;
	right:0;
	margin:auto;
}
.Toggle span:nth-child(3) {
	top: 26px;
	left:0;
	right:0;
	margin:auto;
}
.Toggle.active span:nth-child(1) {
	top: 18px;
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	transform: rotate(-45deg);
}
.Toggle.active span:nth-child(2),
.Toggle.active span:nth-child(3) {
	top: 18px;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	transform: rotate(45deg);
}
}
/**
 * --------------------------------------------------
 * MainVisual
 * --------------------------------------------------
 */
#main-visual {
	width: 100%;
	height: 648px;
	position:relative;
}
.mainvisual-copy {
	width: 320px;
	position:absolute;
	left:calc(50% + 200px);
	top:180px;
	z-index:10;
}
.mainvisual-copy img {
	width:100%;
	margin:0 auto 18px auto;
}
.mainvisual-copy h2 {
	color:#555148;
	font-family: "Noto Sans JP", sans-serif;
	font-optical-sizing: auto;
	font-weight: 500;
	font-style: normal;
	font-size:18px;
	line-height:1.5em;
	margin:32px auto 24px auto;
}
.mainvisual-copy p {
	color:#555148;
}
@media only screen and (max-width: 768px) {
	#main-visual {
		height:190vw;
	}
	.mainvisual-copy {
		width: 88vw;
		position:absolute;
		left:6vw;
		top:94vw;
	}
	.mainvisual-copy img {
		margin:0 auto 3vw;
	}
	.mainvisual-copy h2 {
		font-size:5.1vw;
		margin:8vw auto 6vw auto;
	}
}
/**
 * --------------------------------------------------
 * MainVisual swiper
 * --------------------------------------------------
 */
.mainvisual-image {
	width:1360px;
	height: 600px;
	margin:auto;
	position:relative;
}
.mainvisual-image h3 {
	display:inline-block;
	color:#555148;
	font-size:16px;
	line-height:1em;
	font-family: "Cormorant Garamond", serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
	background:#F4FEE2;
	padding:0.5em 1.6em;
	position:absolute;
	bottom:110px;
	left:160px;
}
.mainvisual-image p {
	display:inline-block;
	color:#F4FEE2;
	font-size:14px;
	line-height:1em;
	font-family: "Noto Sans JP", sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
	background:#000;
	padding:0.6em 0.75em;
	position:absolute;
	bottom:56px;
	left:160px;
}
button {
	border: 0;
	padding: 0;
	background-color: transparent;
}
.carousel {
	width:auto;
	height: 100%;
}
.item {
	position:absolute;
	top:100px;
	left:0;
	height: 100%;
}
.item img {
	width:auto;
	height:100%;
	border-radius:0 80px 80px 0;
}
.swiper-pagination {
	width:auto!important;
	left:calc(50% + 200px)!important;
	bottom:0!important;
}
.swiper-pagination-bullet {
	border-radius:0;
	width:32px;
	height:2px;
	background:#DBD4C5;
	margin: 0 1px!important;
	opacity: 1;
}
.swiper-pagination-bullet-active {
	opacity: 1;
	background:#FF4F2F;
	height:4px;
}
.main-logomark-white {
	position:absolute;
	width:320px;
	right:0;
	bottom:0;
	z-index:1;
}
@media only screen and (max-width: 768px) {
	.mainvisual-image {
		width:100%;
		height: 90vw;
	}
	.mainvisual-image h3 {
		font-size:12px;
		bottom:18vw;
		left:6vw;
	}
	.mainvisual-image p {
		font-size:12px;
		bottom:6vw;
		left:6vw;
	}
	.carousel {
		width:100vw;
		height: auto;
	}
	.item {
		top:40px;
		left:0;
		width:100vw;
		height: auto;
	}
	.item img {
		width:100vw;
		height:auto;
		border-radius:0 0 16vw 0;
	}
	.swiper-pagination {
		left:6vw!important;
		bottom:0!important;
	}
	.swiper-pagination-bullet {
		width:24px;
		height:2px;
	}
	.main-logomark-white {
		width:50vw;
		right:0;
		bottom:-100vw;
	}
}

/**
 * --------------------------------------------------
 * Basic Style
 * --------------------------------------------------
 */
h2 {
	display:block;
	color:#000;
	font-size:40px;
	line-height:1.1em;
	font-family: "Cormorant Garamond", serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: italic;
}
h2 span {
	display:block;
	color:#555148;
	font-size:12px;
	font-family: "Noto Sans JP", sans-serif;
	font-optical-sizing: auto;
	font-weight: 300;
	font-style: normal;
}
h3 {
	color:#000;
	font-family: "Noto Sans JP", sans-serif;
	font-optical-sizing: auto;
	font-weight: 500;
	font-style: normal;
}
p {
	font-size:14px;
	line-height:1.86em;
	color:#000;
}
p, ul, li, dl {
	font-family: "Noto Sans JP", sans-serif;
	font-optical-sizing: auto;
	font-weight: 300;
	font-style: normal;
}
@media only screen and (max-width: 768px) {
	h2 {
		font-size:32px;
	}
	h2 span {
		font-size:10px;
	}
	p {
		font-size:12px;
	}
}
/**
 * --------------------------------------------------
 * message
 * --------------------------------------------------
 */
#message h2 {
	width:200px;
	text-align:left;
}
#message .message-content {
	width:800px;
	margin:auto;
	overflow:hidden;
	padding:40px 0;
}
.movie-frame {
	width:720px;
	height:405px;
	margin:0 auto;
}
.message-frame {
	width:720px;
	margin:auto;
	display:flex;
	align-items: flex-end;
}
.message-text {
	width:100%;
	margin:0 0 0 0;
}
.message-photo {
	width:160px;
	margin:auto;
}
.message-photo img {
	width:100%;
}
.message-text h3 {
	font-size:24px;
	text-align:right;
	font-weight:400;
}
.message-text h3 img {
	width:160px;
}
.message-text h3 span {
	font-size:12px;
	display:block;
	font-weight:300;
	margin:0.5em 0 1.2em 0;
}
@media only screen and (max-width: 768px) {
	#message h2 {
		width:100vw;
		text-align:center;
	}
	#message .message-content {
		width:88vw;
		margin:8vw auto 0 auto;
		padding:6vw 0;
	}
	.movie-frame {
		width:76vw;
		height:41vw;
	}
	.message-frame {
		width:76vw;
		display:block;
	}
	.message-text {
		width:76vw;
		margin:0 0 6vw 0;
	}
	.message-photo {
		width:32vw;
	}
	.message-text h3 {
		font-size:18px;
	}
	.message-text h3 img {
		width:120px;
	}
	.message-text h3 span {
		font-size:10px;
		margin:0.5em 0 1.0em 0;
	}
}
/**
 * --------------------------------------------------
 * socialinvestment
 * --------------------------------------------------
 */
#socialinvestment {
	padding:80px 0;
}
#socialinvestment h2 {
	width:100%;
	text-align:center;
}
.socialinvestment-content {
	width:1040px;
	margin:48px auto 0 auto;
}
#socialinvestment img {
	width:576px;
	margin:auto;
}
.socialinvestment-p {
	width:360px;
	margin:40px 104px 0 0;
}
.socialinvestment-p p {
	margin-bottom:2em;
}
@media only screen and (max-width: 768px) {
	#socialinvestment {
		padding:16vw 0;
	}
	.socialinvestment-content {
		width:88vw;
		margin:8vw auto 0 auto;
	}
	#socialinvestment img {
		width:88vw;
	}
	.socialinvestment-p {
		width:88vw;
		margin:0 auto 0 auto;
	}
}
/**
 * --------------------------------------------------
 * portfolio
 * --------------------------------------------------
 */
#portfolio h2 {
	width:100%;
	text-align:center;
}
#portfolio .portfolio-content {
	width:1040px;
	margin:48px auto 0 auto;
}
#portfolio ul {
	display:flex;
	flex-wrap: wrap;
}
#portfolio ul li {
	width:320px;
	margin:0 40px 40px 0;
	padding:32px 0;
	border-radius:16px;
	box-shadow: 0px 2px 16px 0px rgba(0, 0, 0, 0.16);
	transition: .3s;
}
#portfolio ul li:nth-child(3n) {
	margin:0 0 40px 0;
}
#portfolio ul li img {
	width:100%;
}
#portfolio ul li a {
	text-decoration:none;
}
#portfolio ul li:hover {
	transform: scale(1.1);
}
#portfolio ul li h3 {
	font-size:16px;
	line-height:1.5em;
	padding:2em 1.5em 0.5em 1.5em;
}
#portfolio ul li p {
	color:#555148;
	font-size:12px;
	line-height:1.8em;
	padding:0 2em 1em 2em;
}
#portfolio .portfolio-tag {
	margin:12px 24px 0 24px;
}
#portfolio ul li span {
	color:#555148;
	font-size:12px;
	line-height:1em;
	border-radius:50vw;
	background:#DFEAF8;
	padding:0.15em 1em;
	margin-right:4px;
}
#portfolio ul li span.tag001 {
	background:#DFEAF8;
}
#portfolio ul li span.tag002 {
	background:#DFF8E2;
}
#portfolio ul li span.tag003 {
	background:#F8EADF;
}
#portfolio ul li span.tag004 {
	background:#F8DFE4;
}
#portfolio ul li span.tag005 {
	background:#ebf2d1;
}
#portfolio ul li span.tag006 {
	background:#E3F8DF;
}
#portfolio ul li span.tag007 {
	background:#EAE5DF;
}
#portfolio ul li span.tag008 {
	background:#F0EDC7;
}
#portfolio ul li span.tag009 {
	background:#E7DFF8;
}
#portfolio ul li span.tag010 {
	background:#F0EDC7;
}
#portfolio ul li span.tag011 {
	background:#F8D5E0;
}
#portfolio ul li span.tag012 {
	background:#EAF2D4;
}
#portfolio ul li span.tag013 {
	background:#E1E3E6;
}
#portfolio ul li span.tag014 {
	background:#D7F3F7;
}
#portfolio ul li span.tag015 {
	background:#DFF2F8;
}
@media only screen and (max-width: 768px) {
	#portfolio .portfolio-content {
		width:100vw;
		margin:8vw auto 0 auto;
	}
	#portfolio ul {
		display:flex;
		flex-wrap: wrap;
	}
	#portfolio ul li {
		width:88vw;
		margin:0 6vw 6vw 6vw;
		padding:8vw 0;
		border-radius:12px;
		box-shadow: 0px 2px 16px 0px rgba(0, 0, 0, 0.16);
		transition: .3s;
	}
	#portfolio ul li:nth-child(3n) {
		margin:0 6vw 6vw 6vw;
	}
}
/**
 * --------------------------------------------------
 * company
 * --------------------------------------------------
 */
#company h2 {
	width:200px;
	text-align:left;
}
#company .company-content {
	width:800px;
	margin:auto;
	overflow:hidden;
}
#company dl {
	font-size:14px;
	line-height:1.5em;
	display: flex;
	flex-wrap: wrap;
	margin:40px 40px 16px 40px;
}
#company dt {
	width:20%;
	color:#555148;
}
#company dd {
	width:80%;
	color:#000;
	margin-bottom:1em;
}
#company .company-map {
	width:720px;
	height:396px;
	margin:0 auto 40px auto;
}
@media only screen and (max-width: 768px) {
	#company h2 {
		width:100vw;
		text-align:center;
	}
	#company .company-content {
		width:88vw;
		margin:8vw auto 0 auto;
	}
	#company dl {
		font-size:12px;
		margin:6vw 6vw 3vw 6vw;
	}
	#company dt {
		width:24%;
	}
	#company dd {
		width:76%;
		margin-bottom:1.25em;
	}
	#company .company-map {
		width:76vw;
		height:64vw;
		margin:0 auto 6vw auto;
	}
}
/**
 * --------------------------------------------------
 * page top
 * --------------------------------------------------
 */
.pagetop {
	position:fixed;
	bottom:40px;
	right:16px;
	background:#000;
	width:64px;
	height:64px;
	border-radius:16px;
	box-shadow: 0px 2px 8px 2px rgba(0, 0, 0, 0.16);
	transition: .3s;
}
.pagetop img {
	width:16px;
	padding:21px 24px;
}
.pagetop:hover {
	transform: translateY(-6px);
	background:#555;
}
@media only screen and (max-width: 768px) {
	.pagetop {
		bottom:4vw;
		right:2vw;
		width:32px;
		height:32px;
		border-radius:6px;
	}
	.pagetop img {
		width:8px;
		padding:10px 12px;
	}
}
/**
 * --------------------------------------------------
 * footer
 * --------------------------------------------------
 */
footer {
}
footer .footer-contents {
	width:1200px;
	margin:0 auto;
	position:relative;
}
footer .footer-logo {
	width:160px;
	padding:72px 0 40px 520px;
}
footer .footer-logo img {
	width:100%;
}
footer .footer-link {
	padding:0 0 96px 476px;
}
footer .footer-link ul {
	display:flex;
	flex-wrap: wrap;
}
footer .footer-link ul li {
	margin:0 0 0 48px;
}
footer .footer-link ul li a {
	color:#000000;
	font-size:14px;
	line-height:1em;
	padding:0.75em 0.2em;
	text-decoration:none;
	transition: .3s;
}
footer .footer-link ul li a:hover {
	text-decoration:none;
	border-bottom:solid 1px #DBD4C5;
}
footer p {
	font-size:12px;
	line-height:1em;
	color:#888888;
	padding:0 0 72px 520px;
}
footer .big-w {
	position:absolute;
	width:400px;
	top:-64px;
	left:0;
}
@media only screen and (max-width: 768px) {
	footer .footer-contents {
		width:100vw;
	}
	footer .footer-logo {
		width:40vw;
		padding:24vw 0 12vw 6vw;
	}
	footer .footer-link {
		padding:0 0 0 6vw;
	}
	footer .footer-link ul li {
		margin:0 12vw 4vw 0;
	}
	footer .footer-link ul li a {
		font-size:12px;
	}
	footer p {
		font-size:10px;
		padding:16vw 0 16vw 6vw;
	}
	footer .big-w {
		width:48vw;
		top:-8vw;
		left:50%;
	}
}