@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&family=Noto+Sans+JP:wght@700&display=swap');
@import url('https://cdn.jsdelivr.net/npm/material-design-iconic-font@2.2.0/dist/css/material-design-iconic-font.min.css');

/*
	commons.css
---------------------------------------------------------------------------------------------------------------------------------------------*/
/* common
--------------------------------------------------------------------------------------------------------*/
em, i { font-style: normal;}
a { text-decoration: none; color: inherit;}
textarea { resize: vertical;}
img { vertical-align: bottom; max-width: 100%; height: auto;}

.pc-block { display: block!important;}
.sp-block { display: none!important;}
.pc-inlineblock { display: inline-block!important;}
.sp-inlineblock { display: none!important;}

iframe[name='google_conversion_frame'] {
	position: absolute;
	top: 0;
}

/* font-size
--------------------------------------------------------------------------------------------------------*/
html { font-size: 62.5%;}
body {
	font-size: 16px;
	font-size: 1.6rem;
	text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
	-webkit-font-smoothing: subpixel-antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* input
--------------------------------------------------------------------------------------------------------*/
input[type=text], input[type=password], input[type=checkbox], input[type=email],input[type=radio], input[type=submit], input[type=button],
select, textarea {
	font-family: '游ゴシック Medium', 'Yu Gothic Medium', '游ゴシック', YuGothic, 'Hiragino Sans', 'Helvetica Neue', 'ヒラギノ角ゴ Pro', Hiragino Kaku Gothic Pro, Arial, 'メイリオ', Meiryo, sans-serif;
	border: none;
	outline: 0;
}

/* body
--------------------------------------------------------------------------------------------------------*/
body {
	font-family: '游ゴシック Medium', 'Yu Gothic Medium', '游ゴシック', YuGothic, 'Hiragino Sans', 'Helvetica Neue', 'ヒラギノ角ゴ Pro', Hiragino Kaku Gothic Pro, Arial, 'メイリオ', Meiryo, sans-serif;
	font-weight: 400;
	line-height: 1.0;
	background-color: #fff;
	color: #000;
}


/* font
--------------------------------------------------------------------------------------------------------*/
.fw-l { font-weight: 300!important;}
.fw-r { font-weight: 400!important;}
.fw-m { font-weight: 500!important;}
.fw-sb { font-weight: 600!important;}
.fw-bd { font-weight: 700!important;}
.fw-ex { font-weight: 800!important;}
.fw-bk { font-weight: 900!important;}

.fs-it { font-style: italic!important;}
.ffs-pa { font-feature-settings: 'palt';}

.ff-nt {
	font-family: 'Noto Sans JP', sans-serif;
}
.ff-ms {
	font-family: 'Montserrat', sans-serif;
}

/* text
--------------------------------------------------------------------------------------------------------*/
.txt-up { text-transform: uppercase;}
.txt-cap { text-transform: capitalize;}
.txt-just {
	text-align: justify;
	text-justify: inter-ideograph;
}
.txt-overflow {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* opacity
--------------------------------------------------------------------------------------------------------*/
a.opacity {
	-webkit-transition: all 0.3s ease;
	transition: all 0.3s ease;
}
@media (min-width: 768px) {
	a.opacity:hover { opacity: 0.65;}
}

/* common parts
--------------------------------------------------------------------------------------------------------*/
/* flex
------------------------------------------------------*/
.flex {
	display: -webkit-flex;
	display: flex;
}
.f-align-ce {
	-webkit-align-items: center;
	align-items: center;
}
.f-align-bl {
	-webkit-align-items: baseline;
	align-items: baseline;
}
.f-align-fs {
	-webkit-align-items: flex-start;
	align-items: flex-start;
}
.f-align-fe {
	-webkit-align-items: flex-end;
	align-items: flex-end;
}
.f-just-sb {
	-webkit-justify-content: space-between;
	justify-content: space-between;
}
.f-just-ce {
	-webkit-justify-content: center;
	justify-content: center;
}
.f-direct-cl {
	-webkit-flex-direction: column;
	flex-direction: column;
}
.f-wrap {
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
}

/* wrapper
------------------------------------------------------*/
.wrapper {
	overflow: hidden;
}

/* inner
------------------------------------------------------*/
.inner {
	width: 100%;
	margin: 0 auto;
}

/* header
--------------------------------------------------------------------------------------------------------*/
header .inner {
	max-width: 1270px;
	position: relative;
}
header .inner::before,
header .inner::after {
	content: '';
	position: absolute;
	left: 50.0%;
	-webkit-transform: translate(-50.0%, 0);
	transform: translate(-50.0%, 0);
}
header .inner::before {
	top: -33.2rem;
	width: 52.0rem;
	height: 52.0rem;
	background-color: #f6f5fd;
	border-radius: 50.0%;
	z-index: 1;
}
header .inner::after {
	bottom: -6.7rem;
	width: 58px;
	height: 67px;
	background: url(../images/commons/header_art.jpg) no-repeat center center;
	background-size: cover;
	z-index: 2;
}
header h1 {
	padding-top: 3.0rem;
	position: relative;
	z-index: 3;
}
header h1 a {
	display: block;
}

header .btn-links {
	position: absolute;
	top: 50.0%;
	right: 0;
	-webkit-transform: translate(0, -50.0%);
	transform: translate(0, -50.0%);
}
header .btn-links a {
	padding-top: 2.0rem;
	padding-bottom: 2.0rem;
	background-color: #7757d0;
	border-radius: 3.0rem;
	position: relative;
}
header .btn-links a span {
	font-size: 1.8rem;
	color: #fff;
	padding-right: 5.2rem;
	padding-left: 2.8rem;
}
header .btn-links a::after {
	content: '';
	position: absolute;
	top: 50.0%;
	right: 2.5rem;
	width: 1.5rem;
	height: 1.5rem;
	background: url(../images/commons/ic-window.png) no-repeat center center;
	background-size: cover;
	-webkit-transform: translate(0, -50.0%);
	transform: translate(0, -50.0%);
}

/* footer
--------------------------------------------------------------------------------------------------------*/
footer {
	background: url(../images/commons/footer_bg.jpg) no-repeat center center;
	background-size: cover;
}
footer .inner {
	padding-top: 18.5rem;
	padding-bottom: 18.5rem;
}
footer .logo {
	-webkit-flex: 0 0 37.0rem;
	flex: 0 0 37.0rem;
}
footer .logo a {
	display: block;
}
/*footer .logo a img {
	height: intrinsic;
}*/
footer .about {
	padding-top: 3.5rem;
	margin-left: 7.5rem;
}
footer .about dl dt {
	font-size: 2.6rem;
	color: #fff;
}
footer .about dl dd {
	margin-top: 1.5rem;
}
footer .about dl dd span {
	font-size: 1.8rem;
	color: #fff;
}
footer .about dl dd span:first-child {
	margin-bottom: 0.5em;
}
footer .about ul {
	margin-top: 1.8rem;
}
footer .about ul.m-b{
	margin-bottom: 3.2rem;
}
footer .about ul li {
	font-size: 3.2rem;
	color: #fff;
	letter-spacing: 0.025em;
}
footer .about ul li.mail {
	font-size: 2.4rem;
}
footer .about ul li:first-child {
	margin-bottom: 0.25em;
}
footer .about > *:not(.btn-links) {
	padding-left: 0.5rem;
}
footer .about .btn-links {
	margin-top: 1.8rem;
}
footer .about .btn-links a {
	padding-top: 2.0rem;
	padding-bottom: 2.0rem;
	background-color: #fff;
	border-radius: 3.0rem;
	position: relative;
}
footer .about .btn-links a::after {
	content: '';
	position: absolute;
	top: 50.0%;
	right: 2.5rem;
	width: 1.5rem;
	height: 1.5rem;
	background: url(../images/commons/ic-window-purple.png) no-repeat center center;
	background-size: cover;
	-webkit-transform: translate(0, -50.0%);
	transform: translate(0, -50.0%);
}

footer .about .btn-links a span {
	font-size: 1.8rem;
	color: #7757d0;
	padding-left: 2.5rem;
	padding-right: 5.0rem;
}
footer #copyright {
	font-size: 1.4rem;
	color: #fff;
	letter-spacing: 0.1em;
	text-align: center;
	margin-top: 11.0rem;
}

/*
	responsive
---------------------------------------------------------------------------------------------------------------------------------------------*/
@media (max-width: 1200px) and (min-width: 768px) {
	header .inner::before {
		top: calc(330 / 1200 * -100vw);
		width: calc(500 / 1200 * 100vw);
		height: calc(500 / 1200 * 100vw);
	}
	header .inner::after {
		bottom: calc(67 / 1200 * -100vw);
		width: calc(58 / 1200 * 100vw);
		height: calc(67 / 1200 * 100vw);
	}
	header h1 {
		padding-top: calc(20 / 1200 * 100vw);
	}
	header h1 a img {
		width: calc(287 / 1200 * 100vw);
	}
	header .btn-links a span {
		font-size: calc(18 / 1200 * 100vw);
		padding-right: calc(52 / 1200 * 100vw);
		padding-left: calc(28 / 1200 * 100vw);
	}
	header .btn-links a::after {
		right: calc(25 / 1200 * 100vw);
		width: calc(15 / 1200 * 100vw);
		height: calc(15 / 1200 * 100vw);
	}
}

@media (max-width: 900px) and (min-width: 768px) {
	footer .inner {
		padding-top: calc(185 / 900 * 100vw);
		padding-right: calc(25 / 900 * 100vw);
		padding-bottom: calc(185 / 900 * 100vw);
		padding-left: calc(25 / 900 * 100vw);
	}
	footer .logo {
		-webkit-flex: 0 0 calc(370 / 900 * 100vw);
		flex: 0 0 calc(370 / 900 * 100vw);
	}
	footer .about {
		padding-top: calc(35 / 900 * 100vw);
		margin-left: calc(50 / 900 * 100vw);
	}
	footer .about dl dt {
		font-size: calc(24 / 900 * 100vw);
		line-height: 1.45;
	}
	footer .about dl dd {
		margin-top: calc(15 / 900 * 100vw);
	}
	footer .about dl dd span {
		font-size: calc(18 / 900 * 100vw);
	}
	footer .about ul {
		margin-top: calc(18 / 900 * 100vw);
	}
	footer .about ul li {
		font-size: calc(32 / 900 * 100vw);
	}
	footer .about > *:not(.btn-links) {
		padding-left: calc(5 / 900 * 100vw);
	}
	footer .about .btn-links {
		margin-top: calc(18 / 900 * 100vw);
	}
	footer .about .btn-links a {
		padding-top: calc(20 / 900 * 100vw);
		padding-bottom: calc(20 / 900 * 100vw);
		border-radius: calc(30 / 900 * 100vw);
	}
	footer .about .btn-links a::after {
		right: calc(25 / 900 * 100vw);
		width: calc(15 / 900 * 100vw);
		height: calc(15 / 900 * 100vw);
	}
	footer .about .btn-links a span {
		font-size: calc(18 / 900 * 100vw);
		padding-left: calc(25 / 900 * 100vw);
		padding-right: calc(50 / 900 * 100vw);
	}
	footer #copyright {
		font-size: calc(14 / 900 * 100vw);
		margin-top: calc(110 / 900 * 100vw);
	}
}
/*
	less than 767px;
---------------------------------------------------------------------------------------------------------------------------------------------*/
@media (max-width: 767px) {
/* common
--------------------------------------------------------------------------------------------------------*/
	.pc-block { display: none!important;}
	.sp-block { display: block!important;}
	.pc-inlineblock { display: none!important;}
	.sp-inlineblock { display: inline-block!important;}

/* header
--------------------------------------------------------------------------------------------------------*/
	header .inner::before {
		top: calc(520 / 750 * -100vw);
		width: calc(750 / 750 * 100vw);
		height: calc(750 / 750 * 100vw);
	}
	header .inner::after {
		bottom: calc(90 / 750 * -100vw);
		width: calc(72 / 750 * 100vw);
		height: calc(83 / 750 * 100vw);
	}
	header h1 {
		padding-top: calc(30 / 750 * 100vw);
	}
	header h1 img {
		width: calc(358 / 750 * 100vw);
	}
	header .btn-links {
		position: fixed;
		top: initial;
		bottom: 0;
		left: 0;
		width: 100.0%;
		-webkit-transform: translate(0, 0);
		transform: translate(0, 0);
		z-index: 11;
	}
	header .btn-links a {
		width: 100.0%;
		padding-top: calc(40 / 750 * 100vw);
		padding-bottom: calc(40 / 750 * 100vw);
		border-radius: 0;
		-webkit-justify-content: center;
		justify-content: center;
	}
	header .btn-links a span {
		font-size: calc(34 / 750 * 100vw);
		padding-right: 0;
		padding-left: 0;
	}
	header .btn-links a::after {
		right: calc(40 / 750 * 100vw);
		width: calc(30 / 750 * 100vw);
		height: calc(30 / 750 * 100vw);
	}

/* footer
--------------------------------------------------------------------------------------------------------*/
	footer .inner {
		padding-top: calc(120 / 750 * 100vw);
		padding-bottom: calc(180 / 750 * 100vw);
	}
	footer .field {
		-webkit-flex-direction: column;
		flex-direction: column;
	}
	footer .logo {
		-webkit-flex: 0 0 100%;
		flex: 0 0 100%;
	}
	footer .logo a {
		text-align: center;
	}
	footer .logo a img {
		width: calc(550 / 750 * 100vw);
	}
	footer .about {
		padding-top: calc(75 / 750 * 100vw);
		padding-right: calc(75 / 750 * 100vw);
		padding-left: calc(75 / 750 * 100vw);
		margin-left: 0;
	}
	footer .about > *:not(.btn-links) {
		padding-left: 0;
	}
	footer .about dl dt {
		font-size: calc(34 / 750 * 100vw);
	}
	footer .about dl dd {
		margin-top: calc(30 / 750 * 100vw);
	}
	footer .about dl dd span {
		font-size: calc(28 / 750 * 100vw);
	}
	footer .about ul {
		margin-top: calc(30 / 750 * 100vw);
	}
	footer .about ul li {
		font-size: calc(64 / 750 * 100vw);
		white-space: nowrap;
	}
	footer .about ul li.mail {
		margin-top: 2vw;
		font-size: calc(28 / 900 * 100vw);
	}
	footer .about .btn-links {
		margin-top: calc(50 / 750 * 100vw);
	}
	footer .about .btn-links a {
		width: 100.0%;
		padding-top: calc(40 / 750 * 100vw);
		padding-bottom: calc(40 / 750 * 100vw);
		border-radius: calc(60 / 750 * 100vw);
		-webkit-justify-content: center;
		justify-content: center;
	}
	footer .about .btn-links a::after {
		right: calc(28 / 750 * 100vw);
		width: calc(30 / 750 * 100vw);
		height: calc(30 / 750 * 100vw);
	}
	footer .about .btn-links a span {
		font-size: calc(30 / 750 * 100vw);
		padding-left: 0;
		padding-right: 0;
	}
	footer #copyright {
		font-size: calc(24 / 750 * 100vw);
		letter-spacing: 0.05em;
		margin-top: calc(60 / 750 * 100vw);
	}

/*
	commons.css End
---------------------------------------------------------------------------------------------------------------------------------------------*/
}