@charset "UTF-8";
/* CSS Document */

@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&family=Zen+Kaku+Gothic+New:wght@300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&family=Zen+Old+Mincho:wght@400;500;600;700;900&display=swap');

* {
	margin: 0;
	padding: 0;
}

body {
	font-size: 1.0vw;
	line-height: 1.8;
	overflow-x: hidden;
	background: #fff;
	color: #222;
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-weight: 400;
	font-style: normal;
}

a {
	color: #222;
	text-decoration: none;
}
a:hover {
	color: #222;
}
html {
	scroll-behavior: smooth;
}
img.pcimg {
	display: block;
}
img.spimg {
	display: none;
}
.pcnon {
	display: none;
}
.spnon {
	display: inline-block;
}
.jost500 {
  font-family: "Jost", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}
.zen-old-mincho-regular {
  font-family: "Zen Old Mincho", serif;
  font-weight: 400;
  font-style: normal;
}

.zen-old-mincho-medium {
  font-family: "Zen Old Mincho", serif;
  font-weight: 500;
  font-style: normal;
}

.zen-old-mincho-semibold {
  font-family: "Zen Old Mincho", serif;
  font-weight: 600;
  font-style: normal;
}

.zen-old-mincho-bold {
  font-family: "Zen Old Mincho", serif;
  font-weight: 700;
  font-style: normal;
}

.zen-old-mincho-black {
  font-family: "Zen Old Mincho", serif;
  font-weight: 900;
  font-style: normal;
}

/*
----------------------------------------------
COMMON /  Smart Phone
----------------------------------------------
*/
@media screen and (max-width: 1024px) {
	.pcnon {
		display: inline-block;
	}
	.spnon {
		display: none;
	}
}
/*
----------------------------------------------
HEADER
----------------------------------------------
*/
#header-wrapper {
	width: 100vw;
	height: 90px;
	text-align: center;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1000;
}
#header_menu {
	width: 76%;
	height: 90px;
	margin: 2vw 14% 0 10%;
}
#header_menu ul {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
#header_menu ul li {
	display: flex;
	align-items: center;
	justify-content: center;
	list-style: none;
	width: calc((78vw - 18vw - 4vw) / 5);
	height: 1em;
}
#header_menu ul li a {
	color: #43a7de;
	font-weight: 700;
	font-size: 0.95vw;
}

#header_menu ul li.nav01 {
	width: 18vw;
	height: 2.4vw;
}
#header_menu ul li.nav02,
#header_menu ul li.nav03,
#header_menu ul li.nav04 {
	border-right: 1px solid #43a7de;
}
#header_menu ul li.nav06 a {
	background: #fff;
	padding: 0.1em 2vw;
	border-radius: 20px;
	box-shadow: 0px 10px 10px -2px rgba(0, 103, 165, 0.2);
}
#header_menu h1.site-title {
	width: 18vw;
	height: 2.4vw;
	background: url(../img/header-logo.png) no-repeat;
	background-size: 100%;
	text-indent: -9999vw;
	margin: 0 auto;
}
#header_menu h1.site-title a {
	width: 18vw;
	height: 2.4vw;
	display: block;
}
#mobile-header {
	display: none;
}
#navi-wrapper {
	display: none;
}
.heder-bg {
	background-image: linear-gradient(0deg, rgba(236, 133, 133, 0), rgba(255, 255, 255, 0.7) 60%);
	width: 100vw;
	height: 10vw;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 999;
}

/*
----------------------------------------------
HEADER Tablet Portrait /  Smart Phone
----------------------------------------------
*/
@media screen and (max-width: 1024px) {
	#header_menu {
		width: 96%;
		height: 40px;
		margin: 5vw 2% 0 2%;
	}
	#header_menu ul {
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
	}
	#header_menu ul li {
		width: calc((100% - 6vw) / 5);
		height: 3vw;
	}
	#header_menu ul li a {
		font-size: 3vw;
	}

	#header_menu ul li.nav01 {
		width: 100%;
		height: 9.2vw;
		margin-bottom: 3vw;
	}
	#header_menu h1.site-title {
		width: 70vw;
		height: 9.2vw;
		margin: 0 auto;
	}
	#header_menu h1.site-title a {
		width: 70vw;
		height: 9.2vw;
		display: block;
	}
	#header_menu ul li.nav06 a {
		padding: 0.1em 3vw;
	}
	.heder-bg {
		background-image: linear-gradient(0deg, rgba(236, 133, 133, 0), rgba(255, 255, 255, 1.0) 40%);
		width: 100vw;
		height: 20vh;
	}
}

/*
----------------------------------------------
TOPIMG
----------------------------------------------
*/
.topimg {
	width: 100vw;
	height: 70.8vw;
	background: url("../img/topimg.jpg") no-repeat;
	background-size: 100%;
	position: relative;
}
.topimg .catch {
	background: url("../img/catch.png") no-repeat;
	background-size: 100%;
	width: 50vw;
	height: 12.3vw;
	text-indent: -9999vw;
	position: absolute;
	top: 20vh;
	left: 10%;
}
.topimg .copy {
	font-size: 1.1vw;
	line-height: 1.8;
	font-weight: 500;
	color: #717171;
	position: absolute;
	top: 50vh;
	left: 10%;
}
.entry-wrapper {
	position: fixed;
	top: 15vh;
	right: 0;
	z-index: 1000;
}
.entry-box {
	width: 380px;
	height: 118px;
	background: #fff;
	border-left: 25px solid #de805e;
	border-bottom-left-radius: 10px;
	border-top-left-radius: 10px;
	box-shadow: 0px 20px 20px -6px rgba(0, 103, 165, 0.2);
}
.entry-box p.entry-p {
	color: #de805e;
	text-align: center;
	font-weight: 500;
	font-size: 24px;
	padding-top: 1.2em;
}
.entry-box p.entry-p span {
	background: linear-gradient(transparent 60%, #fff262 60%);
}
.entry-box p.entry-c {
	color: #717171;
	text-align: right;
	font-weight: 500;
	font-size: 13px;
	margin-right: 60px;
}
.entry-box p.entry-c .fa-circle-play {
	color: #43a7de;
}
.fade-in1 {
	animation-name: PageAnime-fade;
	animation-duration: 1.0s;
	animation-delay: 0.5s;
	animation-timing-function: ease-in-out;
	animation-fill-mode: forwards;
	pointer-events: none;
	opacity: 0;
}
@keyframes PageAnime-fade {
	0% {
    	opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
.fade-in2 {
	animation-name: PageAnime-fade2;
	animation-duration: 1.0s;
	animation-delay: 2.0s;
	animation-timing-function: ease-in-out;
	animation-fill-mode: forwards;
	pointer-events: none;
	opacity: 0;
}
@keyframes PageAnime-fade2 {
	0% {
    	opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

/*
----------------------------------------------
TOPIMG Tablet Portrait /  Smart Phone
----------------------------------------------
*/
@media screen and (max-width: 1024px) {
	.topimg {
		width: 100vw;
		height: 100vh;
		background: url("../img/topimg.jpg") no-repeat;
		background-size: cover;
		background-position: 60% bottom;/*下端、左から20px*/
		position: relative;
	}
	.topimg .catch {
		width: 90vw;
		height: 22vw;
		top: 33vh;
		left: 5%;
	}
	.topimg .copy {
		font-size: 3.3vw;
		top: 50vh;
		left: 5%;
	}
	.topimg .copy span {
		background: rgba(255,255,255,0.7);
	}
	.entry-wrapper {
		position: fixed;
		top: 15vh;
		right: 0;
	}
	.entry-box {
		width: 40vw;
		height: 27vw;
		border-left: 20px solid #de805e;
	}
	.entry-box p.entry-p {
		font-size: 4.5vw;
		padding-top: 1.0em;
		line-height: 1.2;
	}
	.entry-box p.entry-c {
		font-size: 13px;
		margin-right: 7vw;
		line-height: 3;
	}
}

/*
----------------------------------------------
MESSAGE
----------------------------------------------
*/
.message {
	width: 80%;
	margin: 5vw auto 7.5vw;
}
.message h2 {
	font-size: 4vw;
	position: relative;
}
.message h2::after {
	content: "";
	background: #0080ca;
	height: 1px;
	width: 61.5%;
	position: absolute;
	top: 4vw;
	margin-left: 3vw;
}
.message-box {
	width: 86%;
	margin: 5vw auto 5vw;
	border-radius: 20px;
	box-shadow: 5px 5px 20px 0 rgba(0, 128, 202, 0.3);
	padding: 4vw 4.5vw;
	background: url("../img/message-box-illust.png") no-repeat;
	background-size: 3.36vw;
	background-position: 91% 87%;
}
.message-box h3 {
	font-size: 1.6vw;
	font-weight: 500;
	line-height: 2;
	color: #0080ca;
	margin-bottom: 3em;
}
.message-box p {
	font-size: 1vw;
	line-height: 2;
	margin-bottom: 3em;
}
/*
----------------------------------------------
MESSAGE Tablet Portrait /  Smart Phone
----------------------------------------------
*/
@media screen and (max-width: 1024px) {
	.message {
		width: 90%;
		margin: 10vw auto 10vw;
	}
	.message h2 {
		font-size: 6vw;
		position: relative;
	}
	.message h2::after {
		width: 39%;
		top: 6vw;
	}
	.message-box {
		width: 100%;
		background-size: 8vw;
		background-position: 91% 95%;
		padding: 5vw 5vw 10vw;
	}
	.message-box h3 {
		font-size: 3.6vw;
		margin-bottom: 2.5em;
	}
	.message-box p {
		font-size: 3vw;
		margin-bottom: 2em;
	}
}

/*
----------------------------------------------
ABOUT
----------------------------------------------
*/
.about {
	width: 100%;
	height: auto;
	margin: 5vw auto 0;
	background: url("../img/aboout-bg.png") no-repeat #f3f3f3;
	background-size: 100%;
	background-position: center top;
	padding: 8vw 0 0;
}
.about h2 {
	font-size: 4vw;
	width: 80%;
	margin: 0 auto;
}
.about p.about-lead {
	font-size: 1.5vw;
	color: #008aca;
	text-align: center;
	letter-spacing: 0.2vw;
	margin: 2.5em 0 4.5em;
}
.about p.about-lead span {
	font-size: 1.25em;
	font-family: "Zen Kaku Gothic New", sans-serif;
	border: 1px solid #008aca;
	background: #fff;
	padding: 0 1em;
	transform: scaleX(0.85);
	display: inline-block;
	letter-spacing: 0.5vw;
}
.about-img-box-1 {
	display: flex;
	justify-content: flex-end;
	align-items: flex-start;
	width: 80%;
	margin-left: 20%;
	margin-bottom: 8em;
}
.about-img-box-1 article.img-box {
	width: 48%;
	margin-right: 4%;
}
.about-img-box-1 article.img-box img {
	border-radius: 20px;
	box-shadow: 5px 5px 20px 0 rgba(0, 128, 202, 0.3);
}
.about-img-box-1 article.txt-box {
	width: 48%;
	margin-top: 3em;
}
.about-img-box-1 article.txt-box h4 {
	text-align: center;
	border-top: 1px solid #008aca;
	border-bottom: 1px solid #008aca;
	font-size: 2vw;
	color: #008aca;
	line-height: 2.4;
}
.about-img-box-1 article.txt-box h4 span {
	transform: scaleX(0.85);
	display: inline-block;
	letter-spacing: 1vw;
	margin-left: -3em;
}
.about-img-box-1 article.txt-box p {
	font-size: 1.1vw;
	margin-top: 2.5em;
}
.about-img-box-1:nth-of-type(3) article.txt-box h4 span {
	margin-left: -5em;
}
.about-img-box-1:nth-of-type(3) {
	margin-bottom: 12em;
}

.about-img-box-2 {
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	width: 80%;
	margin-right: 20%;
	margin-bottom: 8em;
}
.about-img-box-2 article.img-box {
	width: 48%;
}
.about-img-box-2 article.img-box img {
	border-radius: 20px;
	box-shadow: 5px 5px 20px 0 rgba(0, 128, 202, 0.3);
}
.about-img-box-2 article.txt-box {
	width: 48%;
	margin-right: 4%;
	margin-top: 3em;
}
.about-img-box-2 article.txt-box h4 {
	text-align: center;
	border-top: 1px solid #008aca;
	border-bottom: 1px solid #008aca;
	font-size: 2vw;
	color: #008aca;
	line-height: 2.4;
}
.about-img-box-2 article.txt-box h4 span {
	transform: scaleX(0.85);
	display: inline-block;
	letter-spacing: 1vw;
	margin-right: -3em;
}
.about-img-box-2 article.txt-box p {
	font-size: 1.1vw;
	margin-top: 2.5em;
	margin-left: 20%;
}

/*
----------------------------------------------
ABOUT Tablet Portrait /  Smart Phone
----------------------------------------------
*/
@media screen and (max-width: 1024px) {
	.about {
		width: 100%;
		margin: 5vw auto 0;
		background: url("../img/aboout-bg.png") no-repeat #f3f3f3;
		background-size: 200%;
		background-position: 10% top;
		padding: 8vw 0 0;
	}
	.about h2 {
		font-size: 6vw;
	}
	.about p.about-lead {
		font-size: 3.4vw;
	}
	.about-img-box-1 {
		width: 90%;
		flex-wrap: wrap;
		margin: 0 5% 15em;
	}
	.about-img-box-1 article.img-box {
		width: 100%;
		margin-right: 0;
	}
	.about-img-box-1 article.txt-box {
		width: 100%;
		margin-top: 2em;
		text-align: center;
	}
	.about-img-box-1 article.txt-box h4 {
		font-size: 4vw;
	}
	.about-img-box-1 article.txt-box h4 span {
		margin-left: 0;
	}
	.about-img-box-1 article.txt-box p {
		font-size: 3vw;
		margin-top: 1.0em;
		margin-right: 0;
	}
	.about-img-box-1:nth-of-type(3) article.txt-box h4 span {
		margin-left: 0;
	}
	.about-img-box-1:nth-of-type(3) {
		margin-bottom: 12em;
	}

	.about-img-box-2 {
		width: 90%;
		display: flex;
		flex-direction: column-reverse;
		flex-wrap: wrap;
		margin: 0 5% 15em;
	}
	.about-img-box-2 article.img-box {
		width: 100%;
	}
	.about-img-box-2 article.txt-box {
		width: 100%;
		margin-top: 2em;
		text-align: center;
		margin-right: 0;
	}
	.about-img-box-2 article.txt-box h4 {
		font-size: 4vw;
	}
	.about-img-box-2 article.txt-box h4 span {
		margin-right: 0;
	}
	.about-img-box-2 article.txt-box p {
		font-size: 3vw;
		margin-top: 1.0em;
		margin-left: 0;
	}
}

/*
----------------------------------------------
Q&A
----------------------------------------------
*/
.q-a {
	width: 100%;
	height: auto;
}
.qa-header {
	width: 100%;
	height: 17vw;
	background: url("../img/header-qa.png") no-repeat #f3f3f3;
	background-size: 100%;
	position: relative;
}
img.qa-map-cloud {
	width: 15vw;
    position: absolute;
    top: 12vw;
    right: 0;
    z-index: 2;
}
.qa-map {
	background: url("../img/qa-map.jpg") no-repeat;
	background-size: 100%;
	width: 100vw;
	height: 160.4vw;
	position: relative;
}
.qa-map article img {
	width: 100%;
}
.qa-map article:nth-of-type(1) {
	width: 38vw;
    position: absolute;
    top: 5vw;
    left: 12vw;
}
.qa-map article:nth-of-type(2) {
	width: 38vw;
    position: absolute;
    top: 16vw;
    right: 6vw;
}
.qa-map article:nth-of-type(3) {
	width: 28vw;
    position: absolute;
    top: 33vw;
    left: 28vw;
}
.qa-map article:nth-of-type(4) {
	width: 28vw;
    position: absolute;
    top: 55vw;
    left: 8vw;
}
.qa-map article:nth-of-type(5) {
	width: 40vw;
    position: absolute;
    top: 55vw;
    right: 4vw;
}
.qa-map article:nth-of-type(6) {
	width: 28vw;
    position: absolute;
    top: 78vw;
    left: 37vw;
}
.qa-map article:nth-of-type(7) {
	width: 32vw;
    position: absolute;
    top: 101vw;
    right: 3vw;
}
.qa-map article:nth-of-type(8) {
	width: 37vw;
    position: absolute;
    top: 106vw;
    left: 7vw;
}
.qa-map article:nth-of-type(9) {
	width: 27vw;
	position: absolute;
	top: 111vw;
	right: 22vw;
}
.swiper {
	display: none !important;
}

/*
----------------------------------------------
Q&A Tablet Portrait /  Smart Phone
----------------------------------------------
*/
@media screen and (max-width: 1024px) {
	.q-a {
		width: 100%;
	}
	.qa-header {
		width: 100%;
		height: 28.5vw;
		background: url("../img/header-qa-sp.png") no-repeat #f3f3f3;
		background-size: 170%;
		background-position: top center;
	}
	img.qa-map-cloud {
		width: 25vw;
		position: absolute;
		top: 20vw;
		right: 0;
		z-index: 2;
	}
	.qa-map {
		background: url("../img/qa-map-sp.jpg") no-repeat;
		background-size: 100%;
		width: 100vw;
		height: 160.4vw;
		position: relative;
	}
	.qa-map article {
		display: none;
	}
	.swiper {
		display: block !important;
		padding-top: 20vw !important;
	}
	.swiper-slide img {
		width: 96%;
		margin: 0 2% 0;
		padding-bottom: 10vw;
	}
	.swiper-pagination-bullet {
		width: 20px !important;
		height: 20px !important;
		border: 1px solid #333;
		opacity: 1 !important;
		background: #fff !important;
	}
	.swiper-pagination-bullet-active {
		background: #0080ca !important;
		opacity: 1 !important;
		border: 1px solid #fff !important;
	}
}

/*
----------------------------------------------
SEE BY
----------------------------------------------
*/
.seeby {
	width: 100%;
	height: auto;
}
.seeby-inner {
	width: 90%;
	margin: 10vw auto 10vw;
	position: relative;
}
.seeby h2.seeby-title {
	width: 20vw;
	height: 8.9vw;
	background: url("../img/seeby.png") no-repeat;
	background-size: 100%;
	text-indent: -9999vw;
	margin-bottom: 3vw;
}
.seeby .seeby-header {
	color: #0080ca;
	text-align: center;
	margin-bottom: 7vw;
}
.seeby .seeby-header h3 {
	font-size: 3.6vw;
	font-weight: 500;
}
.seeby .seeby-header h3 span {
	border-bottom: 2px solid #0080ca;
}
.seeby .seeby-header p {
	font-weight: 500;
	font-size: 2.1vw;
}
.seeby .seeby-box {
	display: flex;
	flex-wrap: nowrap;
	flex-direction: row;
	justify-content: space-between;
	align-content: flex-end;
	width: 90%;
	margin: 0 auto 2vw;
	height: auto;
}
.seeby .seeby-box item {
	width: 30%;
	height: auto;
	margin: auto auto 0;
}
.seeby .seeby-box.sb1 item {
	width: 35%;
}
.seeby .seeby-box.sb1 item:nth-of-type(1) {
	width: 21%;
	height: auto;
}
.seeby .seeby-box.sb2 {
	align-content: flex-start;
}
.seeby .seeby-box.sb2 item {
	margin: 0 auto auto;
}
.seeby .seeby-box item img {
	box-shadow: 5px 5px 20px 0 rgba(0, 128, 202, 0.3);
	border-radius: 20px;
	width: 100%;
}
.seeby .seeby-box.sb3 {
	margin-top: -3vw;
	margin-bottom: 7.5vw;
}
.seeby p.lead {
	text-align: center;
	color: #0080ca;
	font-weight: 500;
	font-size: 1.6vw;
}
img.seeby-number-person {
	position: absolute;
	top: 38.8vw;
	right: 5%;
	width: 7.5vw;
}

/*
----------------------------------------------
SEE BY Tablet Portrait /  Smart Phone
----------------------------------------------
*/
@media screen and (max-width: 1024px) {
	.seeby {
		width: 100%;
	}
	.seeby-inner {
		width: 90%;
		margin: 10vw auto 10vw;
	}
	.seeby h2.seeby-title {
		width: 30vw;
		height: 13.3vw;
		margin-bottom: 10vw;
	}
	.seeby .seeby-header h3 {
		font-size: 6.4vw;
	}
	.seeby .seeby-header p {
		font-size: 4.0vw;
	}
	.seeby .seeby-box {
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
		justify-content: space-between;
		align-content: flex-end;
		width: 80%;
		margin: 0 auto 0;
		height: auto;
	}
	.seeby .seeby-box item {
		width: 100%;
		margin-bottom: 5vw;
	}
	.seeby .seeby-box.sb1 item {
		width: 100%;
		margin-bottom: 5vw;
	}
	.seeby .seeby-box.sb1 item:nth-of-type(1) {
		width: 100%;
	}
	.seeby .seeby-box.sb2 {
		align-content: flex-start;
	}
	.seeby .seeby-box.sb2 item {
		margin-bottom: 5vw;
	}
	.seeby .seeby-box item img {
		box-shadow: 5px 5px 20px 0 rgba(0, 128, 202, 0.3);
		border-radius: 20px;
		width: 100%;
	}
	.seeby .seeby-box.sb3 {
		margin-top: 0;
		margin-bottom: 7.5vw;
	}
	.seeby p.lead {
		font-size: 3.6vw;
	}
	img.seeby-number-person {
		position: absolute;
		top: 220vw;
		right: 5%;
		width: 18vw;
	}
}

/*
----------------------------------------------
WORKS
----------------------------------------------
*/
.works {
	width: 100%;
	height: auto;
	margin: 5vw auto 0;
	background: url("../img/works-bg.png") no-repeat, url("../img/works-bg-dot.png") no-repeat, url("../img/works-bg-b.png") no-repeat;
	background-size: 100%, 80%, 50%;
	background-position: center top, center bottom, right bottom;
	padding: 8vw 0 12vw;
}
.works ul.works-ul {
	width: 80%;
	margin: 5vw auto 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.works ul.works-ul li {
	width: 50%;
	margin-bottom: 3vw;
}
.works ul.works-ul li:nth-of-type(2) {
	margin-top: 10vw;
}
.works ul.works-ul li:nth-of-type(3) {
	margin-top: -10vw;
}
.works ul.works-ul li:nth-of-type(4) {
	margin-top: 0;
}
.works ul.works-ul li:nth-of-type(5) {
	margin-top: -10vw;
}
.works ul.youtube {
	width: 80%;
	margin: 5vw auto 5vw;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.works ul.youtube li {
	width: 49.7%;
	margin-right: 0.6%;
}
.works ul.youtube li p {
	text-align: center;
	margin-bottom: 1.8em;
	font-weight: 500;
	font-size: 1.2em;
	color: #56b675;
	line-height: 1.2;
}
.works ul.youtube li:nth-of-type(even){
	margin-right: 0;
}
.modal-video {
    background-color: rgba(255, 255, 255, 0.9) !important;
}
.modal-video-close-btn:before, .modal-video-close-btn:after {
    background: #000 !important;
}
a.shousai-btn {
	text-align: center;
	width: 50vw;
	height: 19.7vw;
	display: block;
	margin: 0 auto;
}
a.shousai-btn img {
	width: 100%;
}
.works ul.works-ul li button {
	cursor: pointer;
}

/*
----------------------------------------------
WORKS Tablet Portrait /  Smart Phone
----------------------------------------------
*/
@media screen and (max-width: 1024px) {
	.works {
		width: 100%;
		margin: 5vw auto 0;
		background: url("../img/works-bg.png") no-repeat, url("../img/works-bg-dot.png") no-repeat, url("../img/works-bg-b.png") no-repeat;
		background-size: 200%, 80%, 80%;
		background-position: 10% top, center bottom, right bottom;
		padding: 8vw 0 8vw;
	}
	.works ul.works-ul {
		width: 80%;
		margin: 10vw auto 0;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.works ul.works-ul li {
		width: 100%;
		margin-bottom: 3vw;
	}
	.works ul.works-ul li:nth-of-type(2) {
		margin-top: 0;
	}
	.works ul.works-ul li:nth-of-type(3) {
		margin-top: 0;
	}
	.works ul.works-ul li:nth-of-type(4) {
		margin-top: 0;
	}
	.works ul.works-ul li:nth-of-type(5) {
		margin-top: 0;
	}
	.works ul.youtube {
		width: 80%;
		margin: 5vw auto 5vw;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.works ul.youtube li {
		width: 100%;
		margin-right: 0;
	}
	.works ul.youtube li p {
		font-size: 3.2em;
	}
	a.shousai-btn {
		text-align: center;
		width: 70vw;
		height: 27.6vw;
		display: block;
		margin: 0 auto;
	}
	a.shousai-btn img {
		width: 100%;
	}
}

/*
----------------------------------------------
VOICE
----------------------------------------------
*/
.voice {
	width: 80%;
	height: auto;
	margin: 5vw auto 0;
	padding: 8vw 0 0;
}
.voice h2.voice-title {
	width: 22vw;
	height: 3.1vw;
	background: url("../img/voice-title.png") no-repeat;
	background-size: 100%;
	text-indent: -9999vw;
	margin-bottom: 8vw;
}
.voice h2.voice-title2 {
	width: 42vw;
	height: 8.4vw;
	background: url("../img/voice-title2.png") no-repeat;
	background-size: 100%;
	text-indent: -9999vw;
	margin-bottom: 3vw;
	margin: 0 auto;
}
.voice p.voice-lead {
	font-size: 1.5vw;
	color: #db5f0d;
	text-align: center;
	letter-spacing: 0.2vw;
	margin: 2.5em 0 4.5em;
}
.voice-box-wrapper {
	width: 90%;
	margin: 0 auto 5vw;
}
.voice-box {
	width: 52vw;
	margin-bottom: 5vw;
}
.voice-box header {
	border-bottom: 2px solid #9b80a8;
	position: relative;
	font-weight: 500;
	display: inline-block;
	line-height: 1.2;
	transform: rotate(-3deg);
	padding-right: 0.5em;
}
.voice-box header .voice {
	font-size: 2.2vw;
	font-weight: 700;
	color: #9b80a8;
}
.voice-box header .number {
	color: #db5f0d;
	font-family: "Roboto Condensed", sans-serif;
	font-optical-sizing: auto;
	font-weight: 300;
	font-style: normal;
	font-size: 5vw;
	position: absolute;
	top: -0.27em;
	left: 1.08em;
}
.voice-box header .words {
	font-size: 1.8vw;
	padding-left: 1.9em;
	color: #9b80a8;
}
.voice-box p {
	font-size: 1.1vw;
	margin-top: 2.2em;
}
.voice-box:nth-of-type(2n) {
	float: right;
}
/*
----------------------------------------------
VOICE Tablet Portrait /  Smart Phone
----------------------------------------------
*/
@media screen and (max-width: 1024px) {
	.voice {
		
	}
	.voice h2.voice-title {
		width: 40vw;
		height: 5.7vw;
	}
	.voice h2.voice-title2 {
		width: 70vw;
		height: 14vw;
	}
	.voice p.voice-lead {
		font-size: 3.4vw;
	}
	.voice-box-wrapper {
		width: 100%;
		margin: 0 auto 5vw;
	}
	.voice-box {
		width: 100%;
		margin-bottom: 15vw;
	}
	.voice-box header {
		padding-right: 1em;
	}
	.voice-box header .voice {
		font-size: 5vw;
		font-weight: 700;
		color: #9b80a8;
	}
	.voice-box header .number {
		font-size: 12vw;
	}
	.voice-box header .words {
		font-size: 4.2vw;
	}
	.voice-box p {
		font-size: 3.0vw;
		margin-top: 1.5em;
	}
	.voice-box:nth-of-type(2n) {
		float: none;
	}
}

/*
----------------------------------------------
PERSON
----------------------------------------------
*/
.person {
	width: 100%;
	height: 100vw;
	margin: 5vw auto 0;
	padding: 8vw 20% 0;
	background: url("../img/exmark.png") no-repeat, url("../img/exmark.png") no-repeat, url("../img/exmark.png") no-repeat, url("../img/person-person.png") no-repeat #ddf0fa;
	background-size: 12%, 12%, 12%, 5.5%;
	background-position: 14% 35vw, 87% 24vw, 85% 69vw, 34% 74vw;
	position: relative;
}
.person header {
	width: 23vw;
	height: 20vw;
	background: url("../img/konnahito.png") no-repeat;
	background-size: 100%;
	text-indent: -999%;
}
.person-box:nth-of-type(1) {
	width: 30vw;
	height: auto;
	background: #fff;
	border: 2px solid #9b80a8;
	box-shadow: 10px 10px 0 #9b80a8;
	position: absolute;
	top: 17vw;
	right: 20%;
}
.person-box:nth-of-type(2) {
	width: 30vw;
	height: auto;
	background: #fff;
	border: 2px solid #db5f0d;
	box-shadow: 10px 10px 0 #db5f0d;
	position: absolute;
	top: 40vw;
	left: 20%;
}
.person-box:nth-of-type(3) {
	width: 30vw;
	height: auto;
	background: #fff;
	border: 2px solid #56b675;
	box-shadow: 10px 10px 0 #56b675;
	position: absolute;
	top: 62vw;
	right: 22%;
}
.person-box .number {
	color: #db5f0d;
	font-size: 2.4vw;
	margin: 0.2em 0 0 0.7em;
	font-weight: 500;
}
.person-box .person-box-header {
	color: #0080ca;
	font-size: 1.9vw;
	width: 87.5%;
	margin: 0 0 0 12.5%;
	display: flex;
	align-items: flex-end;
	position: relative;
	line-height: 1.4;
}
.person-box .person-box-header .personletter {
	background: none;
	font-size: 1.5em;
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-weight: 500;
	color: #9b80a8;
	line-height: 1.3;
	padding: 0 0 0 0;
}
.person-box .person-box-header .kantan {
	font-size: 3.3vw;
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-weight: 700;
	transform: rotate(20deg);
	line-height: 1.1;
}
.person-box .person-box-p {
	width: 75%;
	margin: 1em auto 3em;
	font-size: 1.1vw;
	border-top: 2px solid #9b80a8; 
	padding-top: 1em;
}
.person-box:nth-of-type(1) .person-box-header .personletter {
	
}
.person-box:nth-of-type(2) .person-box-header .personletter {
	position: absolute;
	right: 2.8em;
}
.person-box:nth-of-type(3) .person-box-header .personletter {
	position: absolute;
	right: 4.1em;
}
.person-box:nth-of-type(1) .person-box-header .kantan {
	color: #0080ca;
}
.person-box:nth-of-type(2) .person-box-header .kantan {
	color: #db5f0d;
	position: absolute;
	right: 1.5em;
}
.person-box:nth-of-type(3) .person-box-header .kantan {
	color: #56b675;
	position: absolute;
	right: 2.6em;
}
/*
----------------------------------------------
PERSON Tablet Portrait /  Smart Phone
----------------------------------------------
*/
@media screen and (max-width: 1024px) {
	.person {
		height: auto;
		padding: 8vw 10% 10vw;
		position: relative;
		background: url("../img/exmark.png") no-repeat, url("../img/exmark.png") no-repeat, url("../img/exmark.png") no-repeat, url("../img/person-person.png") no-repeat #ddf0fa;
		background-size: 24%, 24%, 24%, 15%;
		background-position: 14% 55vw, 87% 155vw, 26% 225vw, 12% 210vw;
	}
	.person header {
		width: 50vw;
		height: 43.5vw;
		margin-bottom: 5vw;
	}
	.person-box:nth-of-type(1) {
		width: 60vw;
		margin-left: 30%;
		margin-bottom: 5vw;
		position: static;
	}
	.person-box:nth-of-type(2) {
		width: 60vw;
		margin-right: 30%;
		margin-bottom: 5vw;
		position: static;
	}
	.person-box:nth-of-type(3) {
		width: 60vw;
		margin-left: 30%;
		margin-bottom: 5vw;
		position: static;
	}
	.person-box .number {
		font-size: 5vw;
	}
	.person-box .person-box-header {
		font-size: 4.2vw;
		width: 95%;
		margin: 0 0 0 5%;
	}
	.person-box .person-box-header .personletter {
	}
	.person-box .person-box-header .kantan {
		font-size: 5vw;
	}
	.person-box .person-box-p {
		width: 90%;
		margin: 1em auto 2em;
		font-size: 3vw;
	}
	.person-box:nth-of-type(1) .person-box-header .personletter {

	}
	.person-box:nth-of-type(2) .person-box-header .personletter {
		position: absolute;
		right: 2.5em;
	}
	.person-box:nth-of-type(3) .person-box-header .personletter {
		position: absolute;
		right: 3.8em;
	}
	.person-box:nth-of-type(1) .person-box-header .kantan {
		color: #0080ca;
	}
	.person-box:nth-of-type(2) .person-box-header .kantan {
		right: 2.2em;
	}
	.person-box:nth-of-type(3) .person-box-header .kantan {
		right: 3.8em;
	}
}

/*
----------------------------------------------
RECRUIT
----------------------------------------------
*/
.recruit {
	width: 100%;
	height: auto;
	margin: 0 auto 0;
	background: url("../img/recruit-bg.png") no-repeat, url("../img/recruit-bg-b.png") no-repeat;
	background-size: 100%, 36%;
	background-position: center top, right bottom;
	padding: 8vw 0 15vw;
}
.recruit .shamei {
	font-weight: 400;
	font-style: normal;
	font-size: 2.2vw;
	color: #0067a5;
	text-align: center;
}
.recruit ul.recruit-ul {
	width: 68%;
	margin: 3vw auto 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.recruit ul.recruit-ul li {
	width: 47.5%;
	margin-bottom: 3vw;
	background: #fff;
	box-shadow: 5px 5px 20px 0 rgba(75, 95, 130, 0.4);
	border-radius: 20px;
	padding: 0 3vw 0.75vw;
}
.recruit ul.recruit-ul li:nth-of-type(1) {
	border: 2px solid #0080ca;
}
.recruit ul.recruit-ul li:nth-of-type(2) {
	border: 2px solid #9b80a8;
}
.recruit ul.recruit-ul li .recruit-title {
	font-size: 1.6vw;
	font-weight: 500;
	text-align: center;
	padding: 1em 0 0.75em;
}
.recruit ul.recruit-ul li:nth-of-type(1) .recruit-title {
	color: #0080ca;
}
.recruit ul.recruit-ul li:nth-of-type(2) .recruit-title {
	color: #9b80a8;
}
.recruit ul.recruit-ul li:nth-of-type(1) .recruit-title span {
	color: #afd168;
	padding-left: 1em;
}
.recruit ul.recruit-ul li:nth-of-type(2) .recruit-title span {
	color: #de805e;
	padding-left: 1em;
}
.recruit ul.recruit-ul li:nth-of-type(1) .modal-header {
	font-size: 2.4vw;
	font-weight: 700;
	color: #0080ca;
	border-bottom: 2px solid #0080ca;
	padding-bottom: 0.25em;
	text-align: center;
	letter-spacing: 0.2vw;
}
.recruit ul.recruit-ul li:nth-of-type(1) .modal__inner {
	margin-top: 75px;
	margin-bottom: 125px;
	position: relative;
	margin-left: auto;
	margin-right: auto;
	background: #fff;
	box-shadow: 3px 4px 4px rgba(0, 0, 0, 0.25);
	border: 2px solid #0080ca;
	border-radius: 0;
	display: block;
	padding: 21px 8px 21px;
	height: auto;
}
.recruit ul.recruit-ul li:nth-child(1) .js-modal7 {
	overflow: scroll;
}
.recruit ul.recruit-ul li:nth-child(1) .modal7 {
	width: 60%;
}
.recruit ul.recruit-ul li:nth-child(1) .modal7 .modal__content {
    padding: 0 3.5vw 0;
}
.recruit ul.recruit-ul li:nth-child(1) .close-button {
	position: relative;
	width: 39px;
	height: 39px;
	background: none;
	border-radius: 50%;
	padding: 0;
	border: transparent;
	cursor: pointer;
}
.recruit ul.recruit-ul li:nth-child(1) .close-button span {
	width: 25px;
	height: 2px;
	background: #0080ca;
	display: inline-block;
	position: absolute;
	left: calc(50% - 12px);
	top: 50%;
	border-radius: 20px;
}
.recruit ul.recruit-ul li .close-button span:nth-child(1) {
	transform: rotate(45deg) translate(-1px, -1px);
}
.recruit ul.recruit-ul li .close-button span:nth-child(2) {
	transform: rotate(-45deg) translate(1px, -1px);
}

.modal-content-wrapper article p.rectitle span {
	background: #0080ca;
	color: #fff;
	padding: 0.25em 0.5em 0.25em;
	font-size: 1.1em;
	font-weight: 600;
}
.modal-content-wrapper article p.jisseki {
	font-size: 0.9vw;
	text-align: right;
}
.modal-content-wrapper article table {
	width: 100%;
}
.modal-content-wrapper article table.kyuyo tr th,
.modal-content-wrapper article table.kyuyo tr td {
	text-align: center;
	width: 25%;
	border: 1px solid #bebebe;
	font-size: 1.0vw;
	padding: 0.5em 0;
}
.modal-content-wrapper article table.kyuyo tr td {
	font-size: 1.1vw;
}
.modal-content-wrapper article table.kyuyo tr:nth-child(1) th {
	background: #dcdcdc;
}
.modal-content-wrapper article table.kyuyo .sub {
	font-size: 0.75em;
}
.modal-content-wrapper article p.reccaps {
	font-size: 1.0vw;
	width: 95%;
	margin: 1em auto 1em;
}
.modal-content-wrapper article table.taigu tr th,
.modal-content-wrapper article table.taigu tr td {
	border: 1px solid #bebebe;
	font-size: 1.0vw;
	padding: 0.5em 0.75em;
}
.modal-content-wrapper article table.taigu tr th {
	width: 27%;
	vertical-align: top;
	background: #dcdcdc;
}
.modal-content-wrapper article table.taigu tr td {
	width: 73%;
	vertical-align: top;
}
p.linkbtn {
	text-align: center;
	padding-bottom: 3em;
}
p.linkbtn a img {
	width: 15vw;
	height: auto;
}
.recruit ul.recruit-ul li:nth-of-type(2) .modal-header {
	font-size: 2.4vw;
	font-weight: 700;
	color: #9b80a8;
	border-bottom: 2px solid #9b80a8;
	padding-bottom: 0.25em;
	text-align: center;
	letter-spacing: 0.2vw;
}
.recruit ul.recruit-ul li:nth-of-type(2) .modal__inner {
	margin-top: 75px;
	margin-bottom: 125px;
	position: relative;
	margin-left: auto;
	margin-right: auto;
	background: #fff;
	box-shadow: 3px 4px 4px rgba(0, 0, 0, 0.25);
	border: 2px solid #9b80a8;
	border-radius: 0;
	display: block;
	padding: 21px 8px 21px;
	height: auto;
}
.recruit ul.recruit-ul li:nth-child(2) .js-modal8 {
	overflow: scroll;
}
.recruit ul.recruit-ul li:nth-child(2) .modal8 {
	width: 60%;
}
.recruit ul.recruit-ul li:nth-child(2) .modal8 .modal__content {
    padding: 0 3.5vw 0;
}
.recruit ul.recruit-ul li:nth-child(2) .close-button {
	position: relative;
	width: 39px;
	height: 39px;
	background: none;
	border-radius: 50%;
	padding: 0;
	border: transparent;
	cursor: pointer;
}
.recruit ul.recruit-ul li:nth-child(2) .close-button span {
	width: 25px;
	height: 2px;
	background: #9b80a8;
	display: inline-block;
	position: absolute;
	left: calc(50% - 12px);
	top: 50%;
	border-radius: 20px;
}
.recruit ul.recruit-ul li .close-button span:nth-child(1) {
	transform: rotate(45deg) translate(-1px, -1px);
}
.recruit ul.recruit-ul li .close-button span:nth-child(2) {
	transform: rotate(-45deg) translate(1px, -1px);
}
.modal-content-wrapper article p.rectitle2 span {
	background: #9b80a8;
	color: #fff;
	padding: 0.25em 0.5em 0.25em;
	font-size: 1.1em;
	font-weight: 600;
}
.recruit ul.recruit-ul li:nth-child(2) .modal-content-wrapper article h5 {
	font-size: 1.1em;
	font-weight: 600;
	color: #9b80a8;
	margin: 1em 0 0;
	text-align: left;
}
.recruit ul.recruit-ul li:nth-child(2) .modal-content-wrapper article p span.spacer3L {
	width: 4em;
	display: inline-block;
}
.recruit ul.recruit-ul li:nth-child(2) p {
	margin-top: 2em;
}
.recruit ul.recruit-ul li:nth-child(2) p.linkbtn a {
	background: #9b80a8;
	color: #fff;
	padding: 0.75em 1.5em;
	border-radius: 2em;
	font-weight: 600;
	font-size: 1.2vw;
}
p.privacy {
	font-size: 1.2vw;
	color: #0080ca;
}
.recruit ul.recruit-ul .js-modal9 {
	overflow: scroll;
}
.recruit ul.recruit-ul .modal9 {
	width: 60%;
}
.recruit ul.recruit-ul .modal9 .modal-header {
	font-size: 2.4vw;
	font-weight: 700;
	color: #0080ca;
	border-bottom: 2px solid #0080ca;
	padding-bottom: 0.25em;
	text-align: center;
	letter-spacing: 0.2vw;
}
.recruit ul.recruit-ul .modal9 .modal__inner {
	margin-top: 75px;
	margin-bottom: 125px;
	position: relative;
	margin-left: auto;
	margin-right: auto;
	background: #fff;
	box-shadow: 3px 4px 4px rgba(0, 0, 0, 0.25);
	border: 2px solid #0080ca;
	border-radius: 0;
	display: block;
	padding: 21px 8px 21px;
	height: auto;
}
.recruit ul.recruit-ul .modal9 .modal__content {
    padding: 0 3.5vw 0;
}
.recruit ul.recruit-ul .modal9 .close-button {
	position: relative;
	width: 39px;
	height: 39px;
	background: none;
	border-radius: 50%;
	padding: 0;
	border: transparent;
	cursor: pointer;
}
.recruit ul.recruit-ul .modal9 .close-button span {
	width: 25px;
	height: 2px;
	background: #0080ca;
	display: inline-block;
	position: absolute;
	left: calc(50% - 12px);
	top: 50%;
	border-radius: 20px;
}
.recruit ul.recruit-ul .modal9 p.privacy-txt {
	margin: 1em 0 3em;
}
.recruit button {
	cursor: pointer;
}

/*
----------------------------------------------
WORKS Tablet Portrait /  Smart Phone
----------------------------------------------
*/
@media screen and (max-width: 1024px) {
	.recruit {
		width: 100%;
		margin: 0 auto 0;
		background-size: 200%, 60%;
		background-position: 20% top, right bottom;
		padding: 12vw 0 20vw;
	}
	.recruit .shamei {
		font-size: 5.5vw;
	}
	.recruit ul.recruit-ul {
		width: 80%;
		margin: 8vw auto 0;
		display: flex;
		flex-wrap: wrap;
	}
	.recruit ul.recruit-ul li {
		width: 100%;
		margin-bottom: 10vw;
	}
	.recruit ul.recruit-ul li {
		padding: 0 6vw 1vw;
	}
	.recruit ul.recruit-ul li .recruit-title {
		font-size: 5vw;
		padding: 0.5em 0 0.5em;
	}
	p.privacy {
		font-size: 3.6vw;
	}
	
	.recruit ul.recruit-ul li:nth-of-type(1) .modal-header,
	.recruit ul.recruit-ul li:nth-of-type(2) .modal-header,
	.recruit ul.recruit-ul .modal9 .modal-header {
		font-size: 4vw;
	}
	.modal-content-wrapper article p.rectitle span {
		font-size: 1.0em;
	}
	.recruit ul.recruit-ul li:nth-child(2) p.linkbtn a {
		font-size: 3.6vw;
	}
	.recruit ul.recruit-ul li .modal-content-wrapper article:first-of-type {
        margin-bottom: 0;
		padding-bottom: 0;
    }
	.recruit ul.recruit-ul li.modal-content-wrapper article:last-of-type {
        margin-bottom: 0;
		padding-bottom: 0;
    }
	.modal-content-wrapper article table.kyuyo tr th,
	.modal-content-wrapper article table.kyuyo tr td {
		font-size: 3.0vw;
		vertical-align: middle;
		line-height: 1.2;
	}
	.modal-content-wrapper article p.jisseki,
	.modal-content-wrapper article p.reccaps {
		font-size: 3.0vw;
	}
	.modal-content-wrapper article table.taigu tr th,
	.modal-content-wrapper article table.taigu tr td {
		font-size: 3.0vw;
	}
	p.linkbtn a img {
		width: 40vw;
		height: auto;
	}
}

/*
----------------------------------------------
NEWS
----------------------------------------------
*/
.news {
	width: 100%;
	height: auto;
	margin: -2.7vw auto 0;
	background: url("../img/news-bg.png") no-repeat;
	background-size: 100%, 80%, 50%;
	background-position: center top, center bottom, right bottom;
	padding: 12vw 0 8vw;
}
.news h2 {
	font-size: 4vw;
	width: 80%;
	margin: 0 auto;
}
ul.news-box {
	width: 60%;
	margin: 3em auto;
}
ul.news-box li {
	display: flex;
	border-top: 1px solid #0080ca;
	padding: 1em 0.5em;
	font-size: 1.1vw;
	align-items: center;
}
ul.news-box li p.news-new {
	color: #fff;
	font-size: 0.8em;
	white-space: nowrap;
}
ul.news-box li p.news-new span {
	background: #0080ca;
	padding: 0 1em 0.25em;
	line-height: 1;
}
ul.news-box li p.news-date {
	color: #0080ca;
	padding: 0 5em 0 2em;
	white-space: nowrap;
}
ul.news-box li p.news-title {
	color: #0080ca;
}
ul.news-box li p.news-title a {
	color: #0080ca;
}
ul.news-box li:last-of-type {
	border-bottom: 1px solid #0080ca;
}
p.news-more {
	width: 85%;
	text-align: right;
}
p.news-more a {
	font-size: 1.4vw;
	color: #0080ca;
	text-align: right;
}


/*
----------------------------------------------
NEWS Tablet Portrait /  Smart Phone
----------------------------------------------
*/
@media screen and (max-width: 1024px) {
	.news {
		width: 100%;
		margin: -5.5vw auto 0;
		background: url("../img/news-bg.png") no-repeat;
		background-size: 200%;
		background-position: 10% top;
		padding: 12vw 0 15vw;
	}
	.news h2 {
		font-size: 6vw;
	}
	ul.news-box {
		width: 90%;
		margin: 3em auto;
	}
	ul.news-box li {
		font-size: 3.3vw;
	}
	ul.news-box li p.news-new {
		padding: 0 0;
		white-space: nowrap;
	}
	ul.news-box li p.news-date {
		padding: 0 1em 0 1em;
		white-space: nowrap;
	}
	p.news-more {
		width: 90%;
	}
	p.news-more a {
		font-size: 4.4vw;
	}
}

/*
----------------------------------------------
FOOTER
----------------------------------------------
*/
footer {
	width: 100%;
	height: 200px;
	background: url("../img/footer-bg.jpg") no-repeat;
	background-size: cover;
	background-position: top center;
}
footer .footer-inner {
	width: 80%;
	margin: 0 auto 0;
	display: flex;
	padding-top: 4em;
}
footer .footer-inner .footer-logo {
	width: 40%;
}
footer .footer-inner .footer-logo img {
	width: 100%;
	margin: -15px 0 12px;
}
footer .footer-inner .footer-logo p {
	text-align: right;
	color: #0088ca;
	margin-top: -0.5em;
}
footer .footer-inner .footer-logo ul {
	display: flex;
	justify-content: space-between;
}
footer .footer-inner .footer-logo ul li {
	color: #0088ca;
	margin-top: -0.5em;
	margin-right: 10%;
}
footer .footer-inner .footer-logo ul li:first-of-type {
	background: #0088ca;
	width: 45%;
	margin-right: 5%;
	text-align: center;
}
footer .footer-inner .footer-logo ul li:first-of-type a {
	color: #fff;
	font-weight: 500;
}
footer .footer-inner .footer-logo ul li:last-of-type {
	margin-right: 0;
	width: 50%;
	text-align: right;
}
footer .footer-inner .footer-contact {
	width: 50%;
	padding: 0 0 0 5vw;
}
footer .footer-inner .footer-contact p.phone {
	font-size: 2.2vw;
	font-weight: 500;
	color: #0088ca;
}
footer .footer-inner .footer-contact p.phone span {
	font-size: 0.7em;
	padding-right: 0.5em;
}
footer .footer-inner .footer-contact ul {
	display: flex;
	justify-content: space-between;
}
footer .footer-inner .footer-contact ul li {
	width: 45%;
	margin-right: 10%;
	text-align: center;
}
footer .footer-inner .footer-contact ul li:first-of-type {
	background: #0088ca;
}
footer .footer-inner .footer-contact ul li:first-of-type a {
	color: #fff;
	font-weight: 500;
}
footer .footer-inner .footer-contact ul li:last-of-type {
	margin-right: 0;
	background: #fff;
}
footer .footer-inner .footer-contact ul li:last-of-type a {
	color: #0088ca;
	font-weight: 500;
}

/*
----------------------------------------------
FOOTER Tablet Portrait /  Smart Phone
----------------------------------------------
*/
@media screen and (max-width: 1024px) {
	footer {
		width: 100%;
		height: 350px;
		background: url("../img/footer-bg.jpg") no-repeat;
		background-size: cover;
		background-position: top center;
	}
	footer .footer-inner {
		width: 90%;
		margin: 0 auto 0;
		display: flex;
		flex-wrap: wrap;
		padding-top: 5vw;
	}
	footer .footer-inner .footer-logo {
		width: 100%;
		margin: 5em auto 0;
	}
	footer .footer-inner .footer-logo img {
		width: 100%;
	}
	footer .footer-inner .footer-logo ul {
		display: flex;
		flex-wrap: wrap;
		flex-direction: column-reverse;
	}
	footer .footer-inner .footer-logo ul li {
		color: #0088ca;
		margin-top: -0.5em;
		margin-right: 10%;
	}
	footer .footer-inner .footer-logo ul li:first-of-type {
		width: 100%;
		margin-right: 0;
		text-align: center;
		padding: 1.5em 0;
		margin-bottom: 2em;
	}
	footer .footer-inner .footer-logo ul li:first-of-type a {
		font-size: 3vw;
	}
	footer .footer-inner .footer-logo ul li:last-of-type {
		margin-right: 0;
		width: 100%;
		text-align: center;
		font-size: 4vw;
		padding-bottom: 15px;
		margin-top: -20px;
	}
	footer .footer-inner .footer-logo p {
		font-size: 3vw;
		margin-top: -0.5em;
	}
	footer .footer-inner .footer-contact {
		width: 100%;
		padding: 0;
	}
	footer .footer-inner .footer-contact p.phone {
		font-size: 5.7vw;
	}
	footer .footer-inner .footer-contact ul {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	footer .footer-inner .footer-contact ul li {
		width: 100%;
		margin-right: 0;
		font-size: 3vw;
		margin-bottom: 1em;
		padding: 0.5em 0;
	}
	footer .footer-inner .footer-contact ul li:first-of-type {
		background: #0088ca;
	}
	footer .footer-inner .footer-contact ul li:first-of-type a {
		color: #fff;
		font-weight: 500;
	}
	footer .footer-inner .footer-contact ul li:last-of-type {
		margin-right: 0;
		background: #fff;
	}
	footer .footer-inner .footer-contact ul li:last-of-type a {
		color: #0088ca;
		font-weight: 500;
	}
}

/*
----------------------------------------------
MODAL
----------------------------------------------
*/
.layer {
	background-image: linear-gradient(180deg, rgba(224, 238, 248, 1) 50%, rgba(224, 238, 248, 0.7));
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: -1;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s linear, visibility 0.3s linear, z-index 0s linear;
	overflow: scroll;
}
.layer.is-open {
	z-index: 1001;
	opacity: 1;
	visibility: visible;
}
.layer.is-open .modal,
.layer.is-open .modal2,
.layer.is-open .modal3,
.layer.is-open .modal4,
.layer.is-open .modal5,
.layer.is-open .modal6,
.layer.is-open .modal7,
.layer.is-open .modal8,
.layer.is-open .modal9,
.layer.is-open .modal10,
.layer.is-open .modal11,
.layer.is-open .modal12,
.layer.is-open .modal13,
.layer.is-open .modal14,
.layer.is-open .modal15,
.layer.is-open .modal16,
.layer.is-open .modal17,
.layer.is-open .modal18,
.layer.is-open .modal19,
.layer.is-open .modal20 {
	opacity: 1;
	visibility: visible;
}
.modal__button-wrap {
	position: absolute;
	right: 25px;
	top: 25px;
	display: inline-flex;
}
.close-button {
	position: relative;
	background: none;
	padding: 0;
	border: transparent;
	cursor: pointer;
	color: #56b675;
}
.close-button span {
	width: 25px;
	height: 2px;
	background: #56b675;
	display: inline-block;
	position: absolute;
	left: calc(50% - 12px);
	top: 50%;
	border-radius: 20px;
}
.close-button span:nth-child(1) {
	transform: rotate(45deg) translate(-1px, -1px);
}
.close-button span:nth-child(2) {
	transform: rotate(-45deg) translate(1px, -1px);
}
.modal, .modal2, .modal3, .modal4, .modal5, .modal6, .modal7, .modal8, .modal9, .modal10, .modal11, .modal12, .modal13, .modal14, .modal15, .modal16, .modal17, .modal18, .modal19, .modal20 {
	position: relative;
	margin-right: auto;
	margin-left: auto;
	width: 40%;
	min-width: 380px;
	opacity: 0;
	visibility: hidden;
	transition:  visibility .7s linear, opacity .7s linear;
}
.modal__inner {
	margin-top: 75px;
	margin-bottom: 125px;
	position: relative;
	margin-left: auto;
	margin-right: auto;
	background: #fff;
	box-shadow: 3px 4px 4px rgba(0, 0, 0, 0.25);
	border: 2px solid #56b675;
	border-radius: 13px;
	display: block;
	padding: 21px 8px 21px;
	height: auto;
}
.modal__content {
	padding: 0 2vw 0;
}
.modal__button-area {
	max-width: 843px;
	margin-right: auto;
	margin-left: auto;
	margin-top: 17px;
	padding-top: 15px;
}

.modal-header {
	font-size: 2.4vw;
	font-weight: 700;
	color: #56b675;
	border-bottom: 2px solid #56b675;
	padding-bottom: 0.75em;
	text-align: center;
	letter-spacing: 0.2vw;
}
.modal-content-wrapper {
	display: flex;
	flex-wrap: wrap;
	margin-top: 2.5vw;
}
.modal-content-wrapper article {
	font-size: 1.2vw;
}
.modal-content-wrapper article h5 {
	text-align: center;
	font-size: 1.6vw;
	font-weight: 500;
	color: #db5f0d;
	margin: 0.5em 0;
}
.modal-content-wrapper article:first-of-type {
	width: 100%;
}
.modal-content-wrapper article:last-of-type {
	width: 100%;
}

/*
----------------------------------------------
MODAL Tablet Portrait /  Smart Phone
----------------------------------------------
*/
@media screen and (max-width: 1024px) {
	.modal, .modal2, .modal3, .modal4, .modal5, .modal6, .modal7, .modal8, .modal9, .modal10, .modal11, .modal12, .modal13, .modal14, .modal15, .modal16, .modal17, .modal18, .modal19, .modal20 {
		width: 90vw;
		min-width: 90vw;
	}
	.modal__inner {
		margin-top: 120px;
		margin-bottom: 0;
		padding: 0;
	}
	.modal-header {
		font-size: 5vw;
	}
	.modal-header {
		padding: 0.5em 0;
	}
	.modal-header span {
		font-size: 8vw;
		top: 0.25em;
	}
	.modal__button-wrap {
		right: 5px;
		top: 15px;
	}
	.close-button {
		font-size: 3.3vw;
	}
	.modal-content-wrapper {
		display: flex;
		margin-top: 4vw;
		flex-wrap: wrap;
	}
	.modal-content-wrapper article {
		font-size: 3.3vw;
	}
	.modal-content-wrapper article:first-of-type {
		width: 100%;
		margin-right: 0;
		margin-bottom: 1em
	}
	.modal-content-wrapper article:last-of-type {
		width: 100%;
		padding-bottom: 2em;
	}
	.modal-content-wrapper article h5 {
		font-size: 4.0vw;
	}
}

/*
----------------------------------------------
FADE-IN
----------------------------------------------
*/
/* フェードインさせる要素 */
.fadein {
    opacity: 0; /* 最初は非表示にしておく */
    transition: all 2s; /* 動きを滑らかに */
}
/* フェードイン用のクラス */
.inview {
    opacity: 1;
}

/*
----------------------------------------------
FADEIN PAGING
----------------------------------------------
*/
.animation-bg {
	background: rgba(0, 204, 255, 1.0);
	content: "";
	position: fixed;
	z-index: 1001;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	animation-name: PageAnime-fade3;
	animation-duration: 1.0s;
	animation-delay: 0.5s;
	animation-timing-function: ease-in-out;
	animation-fill-mode: forwards;
	pointer-events: none;
}

@keyframes PageAnime-fade3 {
	0% {
    	opacity: 1;
	}
	100% {
		opacity: 0;
		display: none;
	}
}

/*
----------------------------------------------
ENRTRT
----------------------------------------------

#nav_toggle {
    display: none;
    width: 25px;
    height: 118px;
    background: #004488;
    z-index: 3001;
    transition: background 0.3s ease-in-out;
	transform: none;
}
#nav_toggle div {
	position: relative;
}
#nav_toggle {
	display: none;
}
#entry-box {
	width: 380px;
	height: 118px;
	background-size: 100%;
	transition: all 0.5s ease-out;
	position: fixed;
	top: 15vh;
	left: calc(100vw - 25px);
	z-index: 1000;
	box-sizing: border-box;
	padding: 0px;
	display: flex;
	overflow-y: auto;
}
#entry-box.open {
	overflow: visible;
	height: auto;
	transition: all 0.5s ease-out;
	transform: translate(355px);
}
#entry-box {
	animation: slidein;
	animation-duration: 1.0s;
	animation-delay: 3s;
	animation-timing-function: ease-in-out;
	animation-fill-mode: forwards;
}
@keyframes slidein {
	0% {
    	left: calc(100vw - 25px);
	}
	100% {
		left: calc(100vw - 380px);
	}
}

/*
----------------------------------------------
ENTRY Tablet Portrait /  Smart Phone
----------------------------------------------

@media screen and (max-width: 1024px) {
	#entry-box {
		width: 40vw;
		height: 27vw;
		left: calc(100vw - 20px);
		z-index: 1000;
		box-sizing: border-box;
		padding: 0px;
		display: flex;
		overflow-y: auto;
	}
	#entry-box.open {
		overflow: visible;
		height: auto;
		transition: all 0.5s ease-out;
		transform: translate(calc(40vw - 20px));
	}
	@keyframes slidein {
		0% {
			left: calc(100vw - 20px);
		}
		100% {
			left: calc(100vw - 40vw);
		}
	}
}
*/