@charset "UTF-8";

:root {
	--color-primary: #D82E34;
	--color-secondary: #70CECB;
	--color-dark: #111E38;
	--color-text: #111;
	--color-text-link: #ff0000;
	--color-primary-bg: #f6f6f6;
	--color-secondary-bg: rgba(246, 246, 246, 0.75);
	--color-green-bg: rgba(112, 206, 203, 0.1);
	--color-border: #ddd;
	--color-border02: #eee;

	--fontSize: 16px;
	--font-2xs: calc(var(--fontSize) * 0.6875);/* 11px */
	--font-xs: calc(var(--fontSize) * 0.75);/* 12px */
	--font-s: calc(var(--fontSize) * 0.875);/* 14px */
	--font-ms: calc(var(--fontSize) * 0.875);/* 14px */
	--font-m: calc(var(--fontSize) * 0.875);/* 14px */
	--font-l: calc(var(--fontSize) * 1);/* 16px */
	--font-xl: calc(var(--fontSize) * 1.125);/* 18px */
	--font-xxl: calc(var(--fontSize) * 1.125);/* 18px */
	--font-2xl: calc(var(--fontSize) * 1.125);/* 18px */
	--font-3xl: calc(var(--fontSize) * 1.375);/* 22px */
	--font-4xl: calc(var(--fontSize) * 1.375);/* 22px */
	--font-5xl: calc(var(--fontSize) * 1.375);/* 22px */
	--font-6xl: calc(var(--fontSize) * 2);/* 32px */
	--font-7xl: calc(var(--fontSize) * 2);/* 32px */
	/*--primary-font: -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Helvetica Neue", HelveticaNeue, YuGothic, "Yu Gothic Medium", "Yu Gothic", Verdana, Meiryo, sans-serif;*/
	--primary-font: "Noto Sans JP", sans-serif;
	--accent-font: "Abel", sans-serif
}

@media (min-width: 1000px) {
	:root {
		--font-2xs: calc(var(--fontSize) * 0.6875);/* 11px */
		--font-xs: calc(var(--fontSize) * 0.75);/* 12px */
		--font-s: calc(var(--fontSize) * 0.875);/* 14px */
		--font-ms: calc(var(--fontSize) * 0.9735);/* 15px */
		--font-m: calc(var(--fontSize) * 1);
		--font-l: calc(var(--fontSize) * 1.125);/* 18px */
		--font-xl: calc(var(--fontSize) * 1.25);/* 20px */
		--font-xxl: calc(var(--fontSize) * 1.375);/* 22px */
		--font-2xl: calc(var(--fontSize) * 1.5);/* 24px */
		--font-3xl: calc(var(--fontSize) * 1.75);/* 28px */
		--font-4xl: calc(var(--fontSize) * 2);/* 32px */
		--font-5xl: calc(var(--fontSize) * 2.125);/* 34px */
		--font-6xl: calc(var(--fontSize) * 2.5);/* 40px */
		--font-7xl: calc(var(--fontSize) * 3);/* 48px */
	}
}
ol, ul, li {
	list-style: none;
	margin: 0;
	padding: 0;
}

a {
	margin: 0;
	padding: 0;
	border: 0;
	font-weight: normal;
	font-style: normal;
	text-decoration: none;
	vertical-align: baseline;
}
body {
	position: relative;
	font-size: var(--font-m);
	font-family: var(--primary-font);
	color: var(--color-text);
	line-height: 1.75;
	letter-spacing: 0.05em;
	-webkit-text-size-adjust: 100%;
	word-wrap: break-word;
	overflow-wrap: break-word;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	margin: 0;
	>* {
		position: relative;
		z-index: 1;
	}
    a:hover {
        text-decoration: none;
    }
	@media (min-width: 1200px) {
	}
	@media (max-width: 330px) {
		font-size: var(--font-xs);
	}
	&.new-design,
	&.home {
		a,
		a:visited,
		a:hover,
		a:focus,
		a:active {
			color: inherit;
		}
		p {
			padding: 0;
		}
		.pb01 {
			padding-bottom: 1em;
		}
		.pb02 {
			padding-bottom: 2em;
		}
		.pt01 {
			padding-top: 1em;
		}
		.pt02 {
			padding-top: 2em;
		}
		.note {
			padding-top: 1em;
			color: #666;
		}
	}
}
header,
footer,
.bottom-contact {
	a,
	a:visited,
	a:hover,
	a:focus,
	a:active {
		color: inherit;
	}
	p {
		padding: 0;
	}
}
*,
*::before,
*::after {
	box-sizing: border-box;
}
p {
	line-height: 1.75;
}
a {
	color: inherit;
}
strong {
	font-weight: 600;
}
.ib {
	display: inline-block;
}
.mode_pc,
.mode_pc-ib {
	display: none;
}
.mode_sp {
	display: block;
}
.mode_sp-ib {
	display: inline-block;
}
.mover {
	transition: opacity 0.2s ease-out;
	backface-visibility: hidden;
	zoom: 1;
}
.mover:hover {
	opacity: 0.7;
}
.mover02 {
	transition: opacity 0.2s ease-out;
	backface-visibility: hidden;
	zoom: 1;
}
.mover02:hover {
	opacity: 0.9;
}
.inner,
.inner-min {
	position: relative;
	padding: 0 4vw;
	z-index: 1;
}
.inner {
	.inner-min {
		padding: 0;
	}
}
img {
	width: initial;
	max-width: 100%;
}
.em {
	font-weight: 600;
}
.text-link {
	color: var(--color-text-link);
}
.imageWrap {
	text-align: center;
}
.anchor {
	padding-top: 80px;
	margin-top: -80px;
	@media (min-width: 1200px) {
		padding-top: 150px;
		margin-top: -150px;
	}
}
.maker {
	font-weight: 600;
	background: linear-gradient(transparent 50%, rgb(112, 206, 203, .4) 20%);
}
@media (min-width: 1200px) {
	p {
		line-height: 1.75;
	}
	.inner {
		width: 90%;
		max-width: 1240px;
		margin: auto;
		padding: 0;
	}
	.inner-min {
		width: 90%;
		max-width: 1020px;
		margin: auto;
		padding: 0;
	}
	.mode_pc {
		display: block;
	}
	.mode_pc-ib {
		display: inline-block;
	}
	.mode_sp,
	.mode_sp-ib {
		display: none;
	}
}
.new-design {
	#content-wrap {
		overflow: hidden;
	}
}

#content-wrap {
	text-align: left;
	.bgContent {
		background-color: var(--color-primary-bg);
	}
	.content-title {
		font-weight: 600;
		color: var(--color-secondary);
		font-size: var(--font-5xl);
		line-height: 1.5;
		padding-bottom: 1em;
		.en {
			display: block;
			font-family: var(--accent-font);
			font-size: var(--font-xs);
			font-weight: 400;
			color: var(--color-secondary);
			letter-spacing: .05em;
			padding-bottom: 1em;
		}
		.sub-title {
			display: block;
			font-weight: 500;
			color: var(--color-text);
			letter-spacing: .05em;
			line-height: 1.6;
			font-size: var(--font-xl);
			padding-bottom: .5em;
		}
		>* {
			font-weight: 600;
		}
	}
	.inner-title {
		align-items: center;
		font-size: var(--font-xl);
		font-weight: 600;
		line-height: 1.75;
		padding-bottom: 1em;
	}
	.inner-title02 {
		align-items: center;
		font-size: var(--font-2xl);
		color: var(--color-secondary);
		font-weight: 600;
		line-height: 1.5;
		padding-bottom: 1em;
	}
	.t-left {
		text-align: left;
	}
	.text-box {
		p + p {
			padding-top: .5em;
		}
	}
	dl {
		margin: 0;
	}
	@media (min-width: 768px) {
		.content-title {
			padding-bottom: 1.5em;
			.en {
				padding-bottom: 2em;
			}
			.sub-title {
				padding-bottom: 1em;
			}
		}
		.inner-title02,
		.inner-title {
			line-height: 1.75;
		}
	}
}
.content-box {
	text-align: left;
	padding: 40px 0;
	.main-text {
		line-height: 1.75;
		&+.main-text {
			padding-top: .5em;
		}
	}
	@media (min-width: 768px) {
		padding: 100px 0;
	}
}

/*
header
---------------------------*/
header {
	position: fixed;
	top: 10px;
	left: 0;
	right: 0;
	text-align: center;
	padding: 0 8px;
	z-index: 20;
	transition: .5s ease;
	background-color: rgba(255,255,255,.95);
	filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.1));
	border-radius: 5px;
	margin: 0 10px;
	z-index: 100;
	a, span {
		line-height: 1;
	}
	#headerInner {
		text-align: left;
		padding: 10px 2% 8px;
	}
	.siteNameBox {
		.logo {
			width: 150px;
		}
	}
	&.open {
		height: 100%;
	}
	/*
	#contentNav
	---------------------------*/
	#contentNav {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		display: none;
		height: 100%;
		.navInner {
			text-align: left;
			padding: 60px 4.8% 20px;
			a, .headerMenuParent{
				display: block;
				font-size: var(--font-ms);
				padding: 20px 0;
			}
			li {
				position: relative;
				&:before {
					width: 8px;
					height: 8px;
					position: absolute;
					content: "";
					top: 50%;
					transform: translateY(-50%) rotate(45deg);
					right: 0;
					border-top: solid 1px var(--color-primary);
					border-right: solid 1px var(--color-primary);
				}
			}
			.headerMenu {
				&:before {
					content: none;
				}
			}
		}
		.headerMenuInner {
			.headerMenuList {
				padding: 0 0 10px 10px;
				border-bottom: 1px solid var(--color-border);
			}
			.headerMenuImage {
				&.pc {
					display: none;
				}
			}
		}
	}
	.headerMenuParent {
		position: relative;
		&:after,
		&:before {
			display: block;
			position: absolute;
			top: 0;
			bottom: 0;
			right: 0;
			left: auto;
			margin: auto;
			content: "";
			width: 16px;
			height: 1px;
			background-color: var(--color-primary);
			transition-duration: 0.4s;
		}
		&:after {
			transform: rotate(90deg);
		}
	}
	.headerMenu {
		&.open {
			.headerMenuParent {
				border-bottom: none;
				&:after {
					transform: none;
				}
			}
			.headerMenuChild {
				display: block;
			}
		}
	}
	.headerMenuChild {
		display: none;
		.menuTitle {
			.arrow {
				position: relative;
				font-weight: 600;
				letter-spacing: .05em;
				font-size: var(--font-l);
				padding-right: 30px;
				&::after {
					position: absolute;
					content: "";
					top: 0;
					bottom: 0;
					right: 0;
					margin: auto;
					background-image: url(../img/common/arrow-circle.svg);
					background-position: center;
					background-repeat: no-repeat;
					background-size: cover;
					width: 22px;
					height: 22px;
					transition: all 0.3s ease-out;
				}
				&:hover {
					&::after {
						right: -6px;
					}
				}
			}
			.en {
				display: block;
				font-family: var(--accent-font);
				font-size: var(--font-s);
				color: var(--color-primary);
				letter-spacing: .05em;
				padding-top: 1em;
			}
		}
		a, span {
			border-bottom: none;
		}
		a {
			padding-left: 1em;
		}
		p {
			&+p {
				padding-top: 0;
			}
		}
	}
	.headerMenuChild-sp-wrap {
		display: flex;
		justify-content: space-between;
		.headerMenuImage {
			width: 30%;
		}
		.title-wrap {
			width: 70%;
		}
	}
	.navBtnWrap {
		text-align: center;
		padding: 20px 0;
		.navBtn {
			width: 80%;
			max-width: 360px;
			margin: 0 auto 10px;
			a {
				position: relative;
				display: block;
				font-size: var(--font-s);
				font-weight: 600;
				letter-spacing: 0;
				padding: 18px 15px;
				text-align: left;
				border-radius: 50px;
				background-color: var(--color-primary);
				color: #fff;
				&:after {
					position: absolute;
					content: "";
					top: 0;
					bottom: 0;
					right: 15px;
					margin: auto;
					background-image: url(../img/common/icon-mail.svg);
					background-position: center;
					background-repeat: no-repeat;
					background-size: cover;
					width: 24px;
					height: 24px;
				}
			}
			&.download {
				a {
					background-color: var(--color-secondary);
					&::after {
						background-image: url(../img/common/icon-download.svg);
					}
				}
			}
		}
	}
	@media (min-width: 1200px) {
		padding: 0;
		border-radius: 10px;
		#headerInner {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 12px 15px;
		}
		&.is-fixed {
			position: fixed;
			background-color: rgba(255,255,255,.8);
			transition: all 1000ms;
			transform: translate(0, -5px);
			#contentNav {
				top: 0;
			}
		}
		.siteNameBox {
			min-width: 200px;
			.logo {
				width: 200px;
			}
		}
		&.open {
			height: auto;
		}
		#contentNav {
			display: flex!important;
			flex-wrap: wrap;
			justify-content: flex-end;
			align-items: center;
			position: relative;
			left: auto;
			height: auto;
			background-color: transparent;
			.navInner {
				display: flex;
				align-items: center;
				justify-content: flex-end;
				padding: 0;
				a {
					position: relative;
					padding: 0;
				}
				li {
					font-size: var(--font-s);
					&+li {
						margin-left: 1.6vw;
					}
					&:before {
						content: none;
					}
				}
				.current {
					a {
						&:after {
							width: 100%;
						}
					}
				}
			}
			.headerMenuInner {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding-top: 10px;
				li {
					font-size: var(--font-s);
					&+li {
						margin-left: 0;
						margin-top: 10px;
					}
					a {
						disqlay: block;
						padding: 15px 0;
						border-bottom: 1px solid var(--color-border);
					}
					span {
						position: relative;
						display: block;
						&::after {
							position: absolute;
							content: "";
							top: 0;
							bottom: 0;
							right: 6px;
							margin: auto;
							background-image: url(../img/common/arrow.svg);
							background-position: center;
							background-repeat: no-repeat;
							background-size: cover;
							width: 12px;
							height: 10px;
							transition: all 0.3s ease-out;
						}
						&:hover {
							&::after {
								right: 0;
							}
						}
					}
				}
				.headerMenuImage {
					width: 35%;
					&.pc {
						display: block;
					}
					&.sp {
						display: none;
					}
				}
				.headerMenuList {
					width: 60%;
					padding: 0;
					border: none;
				}
			}
		}
		.headerMenuParent {
			position: relative;
			&:before {
				width: 0px;
				height: 2px;
				left: 0;
				right: 0;
				top: auto;
				bottom: 0;
			}
			&:after {
				content: none;
			}
			&:hover {
				+.headerMenuChild {
					visibility: visible;
					opacity: 1;
				}
			}
		}
		.headerMenuChild {
			display: block!important;
			width: 650px;
			position: absolute;
			top: 60px;
			left: -10px;
			background-color: rgba(255,255,255, .95);
			padding: 30px;
			margin: 10px auto 0;
			border-radius: 5px;
			transition: all .2s ease-in;
			opacity: 0;
			visibility: hidden;
			border: 1px solid var(--color-border);
			margin: 0 auto;
			z-index: 200;
			&:hover {
				opacity: 1;
				visibility: visible;
			}
			&:before,
			&:after {
				display: inline-block;
				content: "";
				width: 20px;
				height: 10px;
				aspect-ratio: 1/0.8660254038;
				clip-path: polygon(0 100%, 50% 0, 100% 100%);
				background: #fff;
				position: absolute;
				top: -10px;
				left: 30px;
				z-index: 10;
			}
			&:after {
				background: var(--color-border);
				height: 11px;
				top: -12px;
				z-index: 9;
			}
			a, span {
				&:before {
					content: none;
				}
			}
			&:hover {
				max-height: 9999px;
				opacity: 1;
				display: block;
			}
		}
		.headerMenuChild-sp-wrap {
			display: block;
			.headerMenuImage {
				width: auto;
				&.sp {
					display: none;
				}
			}
			.title-wrap {
				width: auto;
			}
		}
		.navBtnWrap {
			display: flex;
			flex-wrap: nowrap;
			padding: 0 0 0 20px;
			.navBtn {
				width: 192px;
				margin-bottom: 0;
				&.download {
					margin-left: 10px;
				}
			}
		}
	}
}
#menu_btn {
	position: fixed;
	top: 12px;
	right: 5px;
	margin: auto;
	cursor: pointer;
	text-align: center;
	padding: 10px;
	cursor: pointer;
	border-top-left-radius: 50px;
	border-bottom-left-radius: 50px;
	div {
		position: relative;
		width: 40px;
		height: 10px;
	}
	span {
		position: absolute;
		right: 0;
		width: 40px;
		height: 1px;
		background-color: var(--color-primary);
		transition: all 0.4s;
		margin: auto;
		&:nth-of-type(1) {
			top: 0;
			.open & {
				-webkit-transform: translateY(5px) rotate(-30deg);
				transform: translateY(5px) rotate(-30deg);
			}
		}
		&:nth-of-type(2) {
			top: auto;
			bottom: 0;
			.open & {
				-webkit-transform: translateY(-5px) rotate(30deg);
				transform: translateY(-5px) rotate(30deg);
			}
		}
	}
	@media (min-width: 1200px) {
		display: none;
	}
}
.bottom-contact {
	background-image: url(../img/common/bottom-contact-bg.jpg);
	background-size: cover;
	padding: 30px 0;
	.contact-inner-box {
		background-color: rgba(255,255,255,.8);
		border: 1px solid var(--color-secondary);
		padding: 20px;
		.btn-wrap {
			padding-top: 0;
		}
		.btn-box {
			padding-top: 20px;
		}
	}
	.text-box {
		h3 {
			font-size: min(1.7vw, var(--font-2xl));
			font-weight: 600;
			line-height: 1.5;
			text-align: left;
			margin-bottom: 0;
			border-bottom: none;
			padding-bottom: .5em;
			margin: 0;
			&:before {
				content: none;
			}
			.en {
				display: block;
				font-family: var(--accent-font);
				font-weight: 300;
				font-size: var(--font-m);
				color: var(--color-primary);
				letter-spacing: .05em;
				padding-bottom: .5em;
				margin: 0;
			}
		}
	}
	.contact-inner-box {
		&.contact-inner-box {
			margin-top: 20px;
		}
	}
	.contact-inner-box-wrap {
		margin-top: 20px;
	}
	@media (min-width: 1000px) {
		padding: 80px 0;
		.contact-inner-box {
			padding: 40px;
			&.contact-inner-box {
				margin-top: 0;
			}
		}
		.inner-box {
			display: flex;
			justify-content: space-between;
			align-items: flex-end;
			.text-box {
				width: 50%;
			}
			.btn-box {
				width: 45%;
			}
			.btn-wrap {
				padding-top: 0;
			}
		}
		.contact-inner-box-wrap {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 30px;
			.contact-inner-box {
				width: calc((100% - 30px) / 2);
			}
		}
	}
}
/*
footer
---------------------------*/
footer {
	position: relative;
	text-align: center;
	padding-bottom: 15px;
	background-color: var(--color-primary-bg);
	.logo {
		width: 200px;
	}
	.copy {
		font-size: var(--font-xs);
		font-family: var(--accent-font);
		color: #404040
		padding-top: 15px;
	}
	a, span {
		line-height: 1;
	}
	.site-map {
		li {
			padding: 10px 0;
			a {
				position: relative;
				padding-left: 30px;
				&:after {
					position: absolute;
					content: "";
					top: 0;
					bottom: 0;
					left: 0;
					width: 24px;
					height: 24px;
					margin: auto;
					transition: all 0.3s 
						ease-out;
					background-image: url(../img/common/arrow-g.svg);
					background-size: cover;
				}
				&:hover {
					&:after {
						left: 5px;
					}
				}
			}
		}
	}
	.footerBottom {
		position: relative;
		display: flex;
		flex-wrap: wrap;
		z-index: 2;
		border-bottom: 1px solid var(--color-border-1);
		>div {
			width: 100%;
		}
		.companyDetail {
			padding-top: 10px;
		}
		padding: 20px 0 15px;
		dt {
			font-weight: 600;
			font-size: var(--font-l);
			padding-bottom: 20px;
		}
		dd {
			text-align: center;
			padding-bottom: 15px;
			span {
				display: inline-block;
				vertical-align: middle;
				&+ span {
					padding-left: 10px;
				}
			}
		}
	}
	.navInner {
		display: flex;
		flex-wrap: wrap;
		text-align: left;
		padding: 10px 0;
		>div {
			width: 50%;
			position: relative;
			margin-bottom: 20px;
			.en {
				display: block;
				font-family: var(--accent-font);
				color: var(--color-secondary);
				font-size: 10px;
				padding-bottom: 5px;
			}
			.enType {
				font-family: var(--accent-font);
			}
			ul {
				li {
					&+li {
						margin-top: 10px;
					}
				}
			}
			.menu {
				li {
					padding: 0;
					position: relative;
					&+li {
						margin-top: 0;
					}
					a {
						position: relative;
						font-size: var(--font-s);
						line-height: 1.4;
						font-weight: 400;
						padding: 5px 0 5px 20px;
						&:after {
							content: "";
							display: block;
							position: absolute;
							top: 0;
							bottom: 0;
							left: 0;
							margin: auto;
							background-image: url(../img/common/arrow-g.svg);
							background-size: cover;
							background-repeat: no-repeat;
							width: 8px;
							height: 7px;
						}
					}
				}
			}
		}
		a {
			cursor: pointer;
			display: block;
			font-weight: 600;
			padding: 10px 0;
		}
	}
	.sns_icon {
		width: 25px;
	}
	.copy {
		color: var(--color-primary);
		padding-top: 20px;
	}
	.pc {
		display: none;
	}
	@media (min-width: 1200px) {
		.sp {
			display: none;
		}
		.pc {
			display: block;
		}
		.copy {
			align-self: flex-end;
			padding-top: 20px;
		}
		.footerBottom {
			display: flex;
			justify-content: space-between;
			padding: 50px 0 20px;
			>div {
				width: auto;
			}
			dd {
				text-align: left;
			}
			.companyDetail {
				display: flex;
				flex-wrap: wrap;
				width: 20%;
				padding-top: 0;
				order: 1;
			}
			.siteMap {
				width: 75%;
				order: 2;
				display: flex;
				justify-content: flex-end;
			}
		}
		.navInner {
			justify-content: flex-end;
			flex-wrap: nowrap;
			width: 100%;
			>div {
				/*width: 32%;*/
				width: auto;
				border: none;
				&+div {
					margin-left: 5vw;
				}
				.en {
					padding-bottom: 10px;
				}
				.menu {
					padding-top: 5px;
					li {
						a {
							font-size: 14px;
							padding: 8px 0 8px 20px;
						}
					}
				}
			}
		}
	}
	@media (max-width: 330px) {
		.navInner {
			>div {
				.menu {
					li {
						a {
							font-size: var(--font-xs);
						}
					}
				}
			}
		}
	}
}
.page_top {
	display: none;
	position: fixed;
	z-index: 11;
	bottom: 0;
	right: 0;
	background-color: var(--color-secondary);
	opacity: 0.9;
	a {
		display: block;
		width: 40px;
		height: 40px;
	}
	&:before {
		content: '';
		width: 15px;
		height: 15px;
		border-top: solid 1px #fff;
		border-right: solid 1px #fff;
		transform: rotate(-45deg);
		position: absolute;
		bottom: 8px;
		right: 12px;
	}
	@media (max-width: 767px) {
		display: none!important;
	}
}
/*
btn
---------------------------*/
.btn-wrap {
	text-align: center;
	padding-top: 30px;
	.btn-base {
		&+.btn-base {
			margin-top: 20px;
		}
	}
	@media (min-width: 1000px) {
		padding-top: 50px;
		&.line-type {
			display: flex;
			align-items: center;
			.btn-base {
				margin: inherit;
				&+.btn-base {
					margin-top: 0;
					margin-left: 20px;
				}
			}
		}
		&.left-type {
			text-align: left;
			.btn-base {
				margin: inherit;
				&+.btn-base {
					margin-top: 20px;
				}
			}
		}
	}
}
.btn-base {
	position: relative;
	display: flex;
	text-align: left;
	width: 85%;
	min-width: 60%;
	border: 1px solid var(--color-primary);
	background-color: var(--color-primary);
	color: #fff;
	border-radius: 50px;
	transition: all 0.3s ease-out;
	filter: drop-shadow(0px 0px 3px rgba(0, 0, 0, 0.1));
	margin: auto;
	padding: 0;
	span {
		font-weight: 600;
	}
	&.minit {
		width: 60%;
		min-width: 60%;
		a {
			min-height: 44px;
		}
	}
	&:hover {
		background-color: #fff;
		color: var(--color-primary);
		&:after {
			background-image: url(../img/common/arrow.svg);
			right: 10px;
		}
	}
	&.type02 {
		background-color: var(--color-secondary);
		border: 1px solid var(--color-secondary);
		&:hover {
			background-color: #fff;
			color: var(--color-secondary);
			&:after {
				background-image: url(../img/common/arrow-g.svg);
				right: 10px;
			}
		}
	}
	&.contact {
		&:after {
			position: absolute;
			content: "";
			top: 0;
			bottom: 0;
			right: 12px;
			margin: auto;
			background-image: url(../img/common/icon-mail.svg);
			background-position: center;
			background-repeat: no-repeat;
			background-size: cover;
			width: 24px;
			height: 24px;
		}
		&:hover {
			&:after {
				background-image: url(../img/common/icon-mail-red.svg);
				right: 12px;
			}
		}
	}
	&.download {
		&:after {
			position: absolute;
			content: "";
			top: 0;
			bottom: 0;
			right: 12px;
			margin: auto;
			background-image: url(../img/common/icon-download.svg);
			background-position: center;
			background-repeat: no-repeat;
			background-size: cover;
			width: 24px;
			height: 24px;
		}
		&:hover {
			&:after {
				background-image: url(../img/common/icon-download-green.svg);
				right: 12px;
			}
		}
	}
	&.mail {
		&:after {
			position: absolute;
			content: "";
			top: 0;
			bottom: 0;
			right: 12px;
			margin: auto;
			background-image: url(../img/common/icon-plane.svg);
			background-position: center;
			background-repeat: no-repeat;
			background-size: cover;
			width: 24px;
			height: 24px;
		}
		&:hover {
			&:after {
				background-image: url(../img/common/icon-plane-red.svg);
				right: 12px;
			}
		}
	}
	a, input {
		display: flex;
 		 align-items: center;
		font-size: var(--font-l);
		font-weight: 600;
		line-height: 1.2;
		padding: 0 15px;
		cursor: pointer;
		width: 100%;
		height: 100%;
		min-height: 54px;
	}
	&:after {
		position: absolute;
		content: "";
		top: 0;
		bottom: 0;
		right: 15px;
		margin: auto;
		background-image: url(../img/common/arrow-w.svg);
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
		width: 14px;
		height: 12px;
		transition: all 0.3s ease-out;
	}
	@media (min-width: 768px) {
		width: 100%;
		max-width: 400px;
	}
	@media (min-width: 1000px) {
		width: 360px;
		min-width: initial;
		&.minit {
			width: 300px;
			min-width: initial;
			a {
				min-height: 60px;
			}
		}
		a, input {
			min-height: 64px;
			padding: 0 20px;
		}
		&:hover {
			&:after {
				right: 15px;
			}
		}
		&:after {
			right: 20px;
		}
	}
}
.flex-content {
	>div {
		width: 100%;
		&+div {
			margin-top: 30px;
		}
	}
	&.center {
		align-items: center;
	}
	&.bottom {
		align-items: flex-end;
	}
	@media (min-width: 768px) {
		display: flex;
		justify-content: space-between;
		>div {
			width: calc((100% - 32px) / 2);
			&+div {
				margin-top: 0;
			}
		}
		.od1 {
			order: 1;
		}
		.od2 {
			order: 2;
		}
	}
}
.flex-content-type02 {
	>div {
		width: 100%;
		&+div {
			margin-top: 20px;
		}
	}
	&.center {
		align-items: center;
	}
	&.bottom {
		align-items: flex-end;
	}
	@media (min-width: 768px) {
		display: flex;
		justify-content: space-between;
		>div {
			width: calc((100% - 32px) / 2);
			&+div {
				margin-top: 0;
			}
		}
		.od1 {
			order: 1;
		}
		.od2 {
			order: 2;
		}
	}
}
/*
inview style
---------------------------*/
.bottom_to_top {
	transform: translate3d(0, 50px, 0);
	opacity: 0;
}
.bottom_to_top_fadeIn {
	transform: translate3d(0, 0, 0);
	transition: 0.5s ease-in-out 0.3s;
	opacity: 1;
}
.fadeIn {
	transition: all 0.8s ease-out;
	opacity: 0;
}
.fadeIn_fadeIn {
	opacity: 1;
}
#content-wrap.lower {
	background-color: var(--color-primary-bg);
	.fadeIn {
		opacity: 1;
	}
}
/*
mainvisual
---------------------------*/
.mainvisual {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	min-height: 120px;
	background-color: #fff;
	background-image: url(../img/common/bg-pattern.svg);
	background-position: left top;
	background-repeat: no-repeat;
	background-size: cover;
	padding: 0 4vw;
	margin: 12px 0 0;
	p {
		display: block;
		width: 100%;
		padding-bottom: 5px;
	}
	h1 {
		font-size: var(--font-l);
		font-weight: 600;
		span {
			vertical-align: middle;
			display: inline-block;
		}
		>* {
			font-weight: 600;
		}
	}
	@media (min-width: 1200px) {
		min-height: 200px;
		background-position: left top;
		background-size: 100%;
		padding: 0 3vw;
		margin: 40px 0 0;
		p {
			padding-bottom: 8px;
		}
		h1 {
			font-size: var(--font-2xl);
			font-weight: 500;
			>* {
				font-weight: 500;
			}
		}
	}
	@media (max-width: 330px) {
		h1 {
			font-size: var(--font-l);
		}
	}
}
.topic {
	text-align: left;
	display: flex;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: center;
	padding: 10px 0;
	overflow-y: scroll;
	p {
		font-size: var(--font-2xs);
		white-space: nowrap;
		&+p {
			position: relative;
			padding-left: 15px;
			margin-left: 15px;
			&:before {
				position: absolute;
				left: 0;
				top: 0;
				bottom: 0;
				content: "";
				display: block;
				width: 1px;
				height: 15px;
				background-color: var(--color-secondary);
				margin: auto;
				transform: rotate(25deg);
			}
		}
	}
	@media (min-width: 1200px) {
		overflow-y: default;
		padding: 20px 0;
		p {
			font-size: var(--font-xs);
		}
	}
}
.tag-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;
	.tag {
		display: inline-block;
		line-height: 1;
		font-size: var(--font-s);
		font-weight: 500;
		background-color: #fff;
		border: 1px solid var(--color-secondary);
		padding: 6px 10px 7px;
		border-radius: 50px;
		margin-right: 6px;
		margin-bottom: 8px;
	}
	@media (min-width: 1200px) {
		.tag {
			padding: 8px 15px;
			margin-right: 10px;
			margin-bottom: 12px;
		}
	}
}
.more-link {
	text-align: right;
	span {
		position: relative;
		font-weight: 500;
		font-size: var(--font-l);
		padding-right: 35px;
		&:after {
		 	position: absolute;
		 	content: "";
		 	top: 0;
		 	bottom: 0;
		 	right: 0;
		 	margin: auto;
		 	background-image: url(../img/common/arrow-circle02.svg);
		 	background-position: center;
		 	background-repeat: no-repeat;
		 	background-size: cover;
		 	width: 30px;
		 	height: 30px;
			transition: all 0.3s ease-out;
		}
		&:hover {
			&:after {
				right: -6px;
			}
		}
	}
	&.bottom {
		span {
			&:after {
				transform: rotate(90deg); 
			}
			&:hover {
				&:after {
					right: 0;
					bottom: -6px;
				}
			}
		}
	}
	@media (min-width: 1000px) {
		span {
			padding-right: 40px;
		}
	}
}
.case-wrap {
	.case-card {
		background-color: #fff;
		border-radius: 2px;
		filter: drop-shadow(0px 0px 3px rgba(0, 0, 0, 0.1));
		a {
			display: block;
			padding: 15px;
		}
		&+.case-card {
			margin-top: 20px;
		}
		.case-image {
			text-align: center;
		}
		.case-detail {
			padding-top: 15px;
			.case-title {
				font-size: var(--font-l);
				font-weight: 600;
				line-height: 1.5;
			}
			.theme {
				font-weight: 500;
				padding-top: 1em;
				.em {
					font-weight: 500;
					color: var(--color-primary);
				}
			}
			>p {
				padding-top: 1em;
			}
		}
		&:hover {
			.more-link {
				span {
					&:after {
						right: -6px;
					}
				}
			}
		}
	}
	@media (min-width: 768px) {
		display: flex;
		.case-card {
			width: calc((100% - 30px) / 3);
			margin-right: 15px;
			&:nth-of-type(3n) {
				margin-right: 0;
			}
			a {
				padding: 10px;
			}
			&+.case-card {
				margin-top: 0px;
			}
			.case-detail {
				padding-top: 20px;
			}
		}
	}
	@media (min-width: 1000px) {
		.case-card {
			width: calc((100% - 60px) / 3);
			margin-right: 30px;
			a {
				padding: 20px;
			}
		}
	}
}
.card-series-content {
	.card-series-wrap {
		border-top: 1px solid var(--color-border);
		margin: 30px 0;
	}
	.card-series {
		border-bottom: 1px solid var(--color-border);
		&.comingsoon {
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
			&:before {
				position: absolute;
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
				margin: auto;
				content: "";
				display: block;
				background-color: rgba(102,102,102,1);
				z-index: 5;
			}
			.comingsoonText {
				position: absolute;
				z-index: 6;
				p {
					color: #fff;
					font-size: 18px;
					font-weight: 600;
				}
			}
			a {
				&:hover {
					.image {
						img {
							transform: none;
						}
					}
				}
			}
		}
		a, .nolink {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 100%;
		}
		.card-series-image {
			width: 28%;
			text-align: center;
			padding: 10px;
		}
		.card-series-detail {
			width: 72%;
			padding: 15px;
		}
		.card-series-title {
			font-size: var(--font-2xl);
			font-weight: 600;
			line-height: 1.4;
			color: var(--color-dark);
			padding-bottom: 10px;
			>* {
				font-weight: 600;
			}
			.en {
				display: block;
				font-family: var(--accent-font);
				font-size: var(--font-xxl);
				letter-spacing: 0;
				color: var(--color-primary);
				padding-bottom: 10px;
				.no {
					display: inline-block;
					font-size: var(--font-4xl);
					padding-right: 10px;
				}
			}
		}
	}
	.use-case {
		position: relative;
		text-align: center;
		padding: 30px 20px 10px;
		margin: 20px 0 10px;
		border: 1px solid var(--color-secondary);
		.case-title-wrap {
			position: absolute;
			top: -10px;
			left: 0;
			right: 0;
			margin: auto;
		}
		h4 {
			font-size: var(--font-2xl);
			color: var(--color-dark);
			font-weight: 600;
			display: inline-block;
			background-color: #fff;
			padding: 0 .5em;
		}
		.case-list {
			display: flex;
			flex-wrap: wrap;
			.case {
				display: flex;
				align-items: center;
				justify-content: flex-start;
				text-align: left;
				font-size: var(--font-l);
				color: var(--color-dark);
				font-weight: 600;
				width: 100%;
				margin-bottom: 10px;
			}
			.icon {
				background-color: var(--color-secondary);
				width: 40px;
				height: 40px;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-shrink: 0;
				margin-right: 10px;
				img {
					width: 28px;
				}
			}
		}
	}
	@media (min-width: 768px) {
		.card-series-wrap {
			display: flex;
			align-items: stretch;
			flex-wrap: wrap;
		}
		.card-series {
			width: 50%;
			&:nth-child(odd) {
				border-right: 1px solid var(--color-border);
			}
			.card-series-image {
				padding: 20px;
			}
			.card-series-detail {
				padding: 40px 20px;
			}
			.card-series-title {
				padding-bottom: 20px;
				.en {
					padding-bottom: 20px;
				}
			}
		}
		.use-case {
			padding: 50px 50px 20px;
			margin: 65px 0 0;
			.case-list {
				display: flex;
				.case {
					font-size: var(--font-xl);
					width: 50%;
				}
			}
		}
	}
	@media (min-width: 1200px) {
		.card-series-wrap {
			margin: 50px 0;
		}
		.card-series {
			width: 50%;
			&:nth-child(odd) {
				border-right: 1px solid var(--color-border);
			}
			.card-series-image {
				padding: 30px;
			}
		}
		.use-case {
			.case-title-wrap {
				position: absolute;
				top: -15px;
			}
			h4 {
				padding: 0 1em;
			}
			.case-list {
				display: flex;
				.case {
					width: 33%;
					margin-bottom: 30px;
				}
				.icon {
					width: 60px;
					height: 60px;
					margin-right: 15px;
					img {
						width: 38px;
					}
				}
			}
		}
	}
}
#brand {
	.logo {
		max-width: 180px;
		padding-top: 15px;
	}
	@media (min-width: 1200px) {
		.logo {
			max-width: inherit;
			padding-top: 25px;
		}
	}
}