@charset "UTF-8";


.ancker {
	display: block;
}

/*========================================

  header

========================================*/
header {
	position: fixed;
	width: 100%;
	height: 100%;
}

@media screen and (max-width: 1300px) {
	header {
		display: none;
	}
}

@media screen and (max-height: 650px) {
	header {
		display: none;
	}
}

header .wrap {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

header .wrap .box {
	position: relative;
	width: calc(70% - 20%);
	min-width: 330px;
	height: 100vh;
	background-repeat: repeat;
	overflow: hidden;
}

header .wrap .box01  {
	position: relative;
	width: 42%;
	min-width: 330px;
	height: 100vh;
	overflow: hidden;
	display: flex;
    align-items: center;
}

header .wrap .box02  {
	position: fixed; right : 1px;
	width: 12%;
	min-width: 120px;
	height: 100vh;
	background-repeat: repeat;
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
}

header .wrap .space {
	width: 639px;
}

header .wrap .box.b01 {
	background-color: #6dcdeb;
	background-image: url(../img/bg_01.png);
}

header .wrap .box.b01 .b01-1,
header .wrap .box.b01 .b01-2 {
	display: block;
	position: absolute;
}

header .wrap .box.b01 .b01-2 {
	z-index: 1;
}

header .wrap .box.b01 img {
	width: 100%;
	min-width: 600px;
	margin
}

header .wrap .box01.b01 {
	background-color: #27b4db;
}

header .wrap .box01.b01 .b01-1,
header .wrap .box01.b01 .b01-2 {
	display: block;
	position: absolute;
}

header .wrap .box01.b01 .b01-2 {
	z-index: 1;
}

header .wrap .box01.b01 img {
	width: 90%;
	min-width: 400px;
	margin: auto;
}

@media screen and (min-width: 1980px) {
header .wrap .box01.b01 img {
	width: 80%;
	min-width: 400px;
	margin: auto;
}

header .wrap .box01{
	width: 55%;
}
}
@media screen and (min-width: 1980px) {

	header .wrap .box.b01 .b01-1,
	header .wrap .box.b01 .b01-2 {
		top: -50px;
	}
}

@media screen and (max-height: 900px) {

	header .wrap .box.b01 .b01-1,
	header .wrap .box.b01 .b01-2 {
		top: -50px;
	}
}

@media screen and (max-height: 700px) {

	header .wrap .box.b01 .b01-1,
	header .wrap .box.b01 .b01-2 {
		top: -100px;
	}
}



.timerbox {
	position: relative;
	background-color: #fac03d;
	background-image: url(../img/bg_02.png);
}

header .timerbox .s02 {
	position: absolute;
	top: 0;
	left: 0;
}

header .timerbox .s02 img.img {
	width: 100%;
	min-width: 600px;
}




@media screen and (max-width: 1750px) {
	header .timerbox .s02 {
		transform: translateX(-50px);
	}
}

@media screen and (max-width: 1600px) {
	header .timerbox .s02 {
		transform: translateX(-120px);
	}
}

@media screen and (max-width: 1500px) {
	header .timerbox .s02 {
		transform: translateX(-170px);
	}
}

header .timerbox #timer {
	position: absolute;
	text-align: left;
	top: calc(13.5vw * 1.1);
	left: calc(12.8vw * 1.1);
	font-family: 'Roboto Mono', monospace;
	z-index: 1;
	font-size: 2vw;
}

@media screen and (max-width: 1800px) {
	header .timerbox #timer {
		top: 270px;
		left: 250px;
		font-size: 35px;
	}
}

@media screen and (min-width: 2000px) {
	header .timerbox #timer {
		top: calc(13.6vw * 1.13);
		left: calc(13vw * 1.13);
	}
}

@media screen and (min-width: 2200px) {
	header .timerbox #timer {
		top: calc(13.6vw * 1.14);
		left: calc(13vw * 1.14);
	}
}

@media screen and (min-width: 2300px) {
	header .timerbox #timer {
		top: calc(13.8vw * 1.17);
		left: calc(13.2vw * 1.17);
	}
}

@media screen and (min-width: 2500px) {
	header .timerbox #timer {
		top: calc(14vw * 1.19);
		left: calc(13.4vw * 1.19);
	}
}

@media screen and (min-width: 2700px) {
	header .timerbox #timer {
		top: calc(14.3vw * 1.22);
		left: calc(13.7vw * 1.22);
	}
}

@media screen and (min-width: 3000px) {
	header .timerbox #timer {
		top: calc(14.3vw * 1.23);
		left: calc(14vw * 1.23);
	}
}

.timerbox #timer small {
	font-size: 1vw;
}

.timerbox #timer .unit {
	display: flex;
	position: absolute;
	top: 10px;
}

.timerbox #timer .unit span {
	display: inline-block;
}

.yycountdown-box span {
	position: relative;
}

.yycountdown-box span.yyc-day::after,
.yycountdown-box span.yyc-hou::after,
.yycountdown-box span.yyc-min::after,
.yycountdown-box span.yyc-sec::after {
	text-align: center;
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	bottom: -10px;
	margin: 0 auto;
	font-size: 10px;
}


.yycountdown-box span.yyc-day::after {
	content: "days";
}

.yycountdown-box span.yyc-hou::after {
	content: "hours";
}

.yycountdown-box span.yyc-min::after {
	content: "minutes";
}

.yycountdown-box span.yyc-sec::after {
	content: "seconds";
}



.timerbox #timer .unit span.u01 {
	margin-left: .8vw;
}

.timerbox #timer .unit span.u02 {
	margin-left: 1.4vw;
}

.timerbox #timer .unit span.u03 {
	margin-left: 1.3vw;
}

.timerbox #timer .unit span.u04 {
	margin-left: 1.2vw;
}

.main_innr .timerbox {
	display: none;
}

@media screen and (max-width: 767px) {
	.main_innr .timerbox {
		display: block;
	}

	.main_innr .timerbox .s02 {
		display: block;
		width: 100vw;
		height: 90vw;
		overflow: hidden;
	}

	.main_innr .timerbox .s02 img {
		width: 110vw;
		max-width: 110vw;
		margin-left: -10vw;
	}


	.main_innr .timerbox #timer {
		position: absolute;
		text-align: left;
		top: 50vw;
		left: 35vw;
		font-family: 'Roboto Mono', monospace;
		z-index: 1;
		font-size: 6.5vw;
	}

	.main_innr .yycountdown-box span.yyc-day::after,
	.main_innr .yycountdown-box span.yyc-hou::after,
	.main_innr .yycountdown-box span.yyc-min::after,
	.main_innr .yycountdown-box span.yyc-sec::after {
		bottom: -2vw;
		font-size: 2vw;
	}


}


.movie {
	display: none;
}

@media screen and (max-width: 768px) {
	.movie {
		display: block;
		background-color: #ccc;
		width: 100%;
		height: 60vw
	}

}

@media screen and (max-width: 1800px) {

	.timerbox #timer {
		top: 270px;
		left: 250px;
		font-size: 35px
	}

	.timerbox #timer small {
		font-size: 20px;
	}

	.timerbox #timer .unit span.u01 {
		margin-left: 10px;
	}

	.timerbox #timer .unit span.u02 {
		margin-left: 25px;
	}

	.timerbox #timer .unit span.u03 {
		margin-left: 25px;
	}

	.timerbox #timer .unit span.u04 {
		margin-left: 22px;
	}
}

@media screen and (min-width: 2000px) {
	.timerbox .s02 {
		transform: translateY(-50px);
	}

	.timerbox #timer {
		top: calc(14vw * 1.15);
		left: calc(12.5vw * 1.2);
	}
}



header .wrap .box.b03 {
	background-color: #0dac67;
	background-image: url(../img/bg_03.png);
}


header .wrap .box.b03 .s03,
header .wrap .box.b03 .s04,
header .wrap .box.b03 .s05,
header .wrap .box.b03 .s06 {
	position: absolute;
}

header .wrap .box.b03 .s03,
header .wrap .box.b03 .s04,
header .wrap .box.b03 .s05,
header .wrap .box.b03 .s06 {
	animation: move-y 3s infinite alternate ease-in-out;
}

header .wrap .box.b03 .s03 {
	animation-delay: .5s;
}

header .wrap .box.b03 .s04 {
	animation-delay: 1s;
}

header .wrap .box.b03 .s05 {
	animation-delay: 1.5s;
}

header .wrap .box.b03 .s06 {
	animation-delay: 2s;
}



@keyframes move-y {
	from {
		transform: translateY(0);
	}

	to {
		transform: translateY(10px);
	}
}


header .wrap .box.b03 .s03 {
	top: 10px;
	right: 20vw;
}

header .wrap .box.b03 .s03 img {
	width: 11vw;
}

header .wrap .box.b03 .s04 {
	top: 10px;
	right: -2vw;
}

header .wrap .box.b03 .s04 img {
	width: 19vw;
}

header .wrap .box.b03 .s05 {
	top: 220px;
	right: 21vw;
}

header .wrap .box.b03 .s05 img {
	width: 13vw;
}

header .wrap .box.b03 .s06 {
	top: 280px;
	right: 3vw;
}

header .wrap .box.b03 .s06 img {
	width: 18vw;
}


@media screen and (max-width: 1740px) {
	header .wrap .box.b03 .s03 {
		right: 18vw;
	}

	header .wrap .box.b03 .s03 img {
		width: 10vw;
	}

	header .wrap .box.b03 .s04 {
		right: -2vw;
	}

	header .wrap .box.b03 .s04 img {
		width: 18vw;
	}

	header .wrap .box.b03 .s05 {
		right: 18vw;
	}

	header .wrap .box.b03 .s05 img {
		width: 12vw;
	}

	header .wrap .box.b03 .s06 {
		right: 2vw;
	}

	header .wrap .box.b03 .s06 img {
		width: 17vw;
	}
}

@media screen and (max-width: 1450px) {
	header .wrap .box.b03 .s03 {
		top: 2vw;
		right: 17vw;
	}

	header .wrap .box.b03 .s03 img {
		width: 9vw;
	}

	header .wrap .box.b03 .s04 {
		top: 2vw;
		right: -2vw;
	}

	header .wrap .box.b03 .s04 img {
		width: 17vw;
	}

	header .wrap .box.b03 .s05 {
		right: 16vw;
		top: 12vw;
	}

	header .wrap .box.b03 .s05 img {
		width: 11vw;
	}

	header .wrap .box.b03 .s06 {
		right: 2vw;
		top: 18vw;
	}

	header .wrap .box.b03 .s06 img {
		width: 16vw;
	}
}

@media screen and (max-height: 920px) {
	header .wrap .box.b03 .s03 {
		top: 1vw;
	}

	header .wrap .box.b03 .s03 img {
		width: 9vw;
	}

	header .wrap .box.b03 .s04 {
		top: -2vw;

	}

	header .wrap .box.b03 .s04 img {
		width: 17vw;
	}

	header .wrap .box.b03 .s05 {
		top: 10vw;
	}

	header .wrap .box.b03 .s05 img {
		width: 11vw;
	}

	header .wrap .box.b03 .s06 {
		top: 10vw;
	}

	header .wrap .box.b03 .s06 img {
		width: 16vw;
	}


}

@media screen and (max-height: 720px) {

	header .wrap .box.b03 .s04 {
		top: -3vw;

	}

	header .wrap .box.b03 .s06 {
		top: 8vw;
	}



}


header .wrap .box02.b04 {
	background-color: #27b4db;
	margin: auto;
}
header .wrap .box02.b04 .s07 {
	margin: auto;
	text-align:center
}
header .wrap .box02.b04 .s07 {
	margin: auto;
	text-align:center
}

header .wrap .box.b04 .s07 img.yohaku1{
	margin-top: 30px
}


header .wrap .box.b04 .s07 {
	position: absolute;
	top: 0;
	left: 0;
}

header .wrap .box.b04 .s07 img {
	width: 100%;
	min-width: 600px;
}

 /*header .wrap .box02.b04 .s07 img {
	width: 20%;
	min-width: 100px;
}*/

header .wrap .box.b04 .logo {
	position: absolute;
	right: 20px;
	bottom: 20px;
}


@media screen and (max-width: 1500px) {
	header .wrap .box.b04 .s07 {
		left: -50px;
	}

	header .wrap .box.b04 .logo {
		display: none;
	}
}


header .wrap .box.b04 .s07 .linklist {
	position: absolute;
	top: calc(10.5vw * 1.1);
	left: calc(6vw* 1.1);
	z-index: 50;
	font-size: calc(0.7vw * 1.2);
}


@media screen and (max-width: 1800px) {
	header .wrap .box.b04 .s07 .linklist {
		top: 205px;
		left: 115px;
		font-size: 15px;
	}
}


@media screen and (min-width: 2000px) {
	header .wrap .box.b04 .s07 .linklist {
		top: calc(10.5vw * 1.2);
		left: calc(6vw* 1.2);
	}
}


@media screen and (max-height: 1080px) {
	header .wrap .box.b04 .s07 {
		top: -50px;
	}
}

@media screen and (max-height: 900px) {
	header .wrap .box.b04 .s07 {
		top: -85px;
	}
}

@media screen and (max-height: 800px) {
	header .wrap .box.b04 .s07 {
		top: -100px;
	}
}


header .wrap .box a:hover {
	opacity: .7;
	transition: .3s;
}



/*========================================

  main

========================================*/
main {
	position: relative;
	display: block;
	width: 680px;
	margin: 0 13% 0 auto;
	padding: 0 20px;
	text-align: center;
	background-color: #fff;
	z-index: 100;
}

.contens{
	width: 640px;
	margin: 0 20px 90px;
	box-shadow: 0px 0px 10px 3px rgba(0, 0, 0, .4);
	}

.plan {
    position: fixed;
    bottom: 0;
    z-index: 9997;
	display: block;
	background-color: #fff000;
	width: 640px;
	border-color: #e64a9e;
	border-top-style:solid;
	border-bottom-style:solid;
	padding-top: 20px;
    padding-bottom: 20px;
	}

@media screen and (max-width: 767px) {
	main {
		width: 100%;
		padding: 0;

	}
	.contens{
		width: 100%;
		margin:0 0 90px 0;
		box-shadow: none;
		}

	.plan{
        width: 100%;
				padding: 10px 0;
}

}


.video-wrap {
	display: block;
}

#videoauto {
	width: 100%;
	height: auto;
	vertical-align: bottom;
}

.video-wrap,
video {
	filter: drop-shadow(0px 0px rgba(0, 0, 0, 0));
	outline: none;
	border: none;
}

@media screen and (max-width: 767px) {}


.headline {
	text-align: center;
}

.headline h2 {
	position: relative;
	display: inline-block;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	font-family: 'Noto Serif', serif;
	font-size: 38px;
	font-weight: 300;
	letter-spacing: 8px;
	text-align: left;
	z-index: 10;
	margin-left: 10px;
}


@media screen and (max-width: 767px) {
	.headline h2 {
		font-size: 9vw;
		letter-spacing: 5px;
	}

	.headline h2 img {
		width: 9vw;
	}
}

.headline h2 span {
	text-combine-upright: all;
}

span.tate-cho span {
	display: block;
	transform: matrix(0, 1, 1, 0, 0, 0);
}

main .main_innr {}

main h1 {
	padding-top: 50px;
}



/* 共通 ---------------*/
.com_copy {
	width: 90%;
	margin: 0 auto;
	font-size: 16px;
	line-height: 1.8em;
	text-align: justify;
	text-justify: inter-ideograph;
	margin-top: 1.5em;
}

@media screen and (max-width: 767px) {
	.com_copy {
		font-size: 3vw;
		line-height: 1.8em;
	}
}

.com_btn {
	width: 380px;
	margin: 0 auto;
	margin-top: 40px;
}

.com_btn a {
	position: relative;
	display: block;
	color: #fff;
	font-size: 24px;
	letter-spacing: 1px;
	border-radius: 15px;
	background-color: #0dac67;
	padding: .5em 0;
	text-decoration: none;
}

.com_btn a:after {
	position: absolute;
	top: 15px;
	right: 10px;
	content: "▲";
	position: absolute;
	color: #fff;
	transform: rotate(90deg);
	font-size: 80%;
}

.com_btn a:hover {
	text-decoration: none;
}

.com_btn.link a:hover {
	opacity: .7;
	transition: .3s;
}

.com_btn.nolink {
	pointer-events: none;
}


@media screen and (max-width: 767px) {
	.com_btn {
		width: 90%;
		margin-top: 10vw;
	}

	.com_btn a {
		font-size: 5vw;
		border-radius: 3vw;
	}

	.com_btn a:after {
		position: absolute;
		top: 15px;
		right: 10px;
		content: "▲";
		position: absolute;
		color: #fff;
		transform: rotate(90deg);
		font-size: 80%;
	}
}




/* #sec001 ---------------*/
#sec001 {
	position: relative;
}

#sec001 .s01 {
	position: absolute;
	top: -90px;
	right: 120px;
}

#sec001 .s02 {
	position: absolute;
	top: 10px;
	left: 110px;
}

#sec001 .s03 {
	position: absolute;
	top: 110px;
	left: 20px;
}

#sec001 .s04 {
	position: absolute;
	bottom: -90px;
	right: 120px;
}

#sec001 .s05 {
	position: absolute;
	top: 50px;
	left: 0;
	right: 0;
	margin: 0 auto;
}

#sec001 .box {
	display: flex;
	width: 90%;
	margin: 0 auto;
	margin-top: 120px;
}

#sec001 .box .txt {
	width: 390px;
	margin-top: 120px;
	margin-right: 30px;
}

#sec001 .box .txt strong {
	display: block;
	font-size: 26px;
	font-weight: bold;
	text-align: right;
}

#sec001 .box .txt p {
	font-size: 16px;
	line-height: 1.8em;
	text-align: justify;
	text-justify: inter-ideograph;
	margin-top: 1em;
}

#sec001 .box .photo {
	position: relative;
}


@media screen and (max-width: 767px) {

	#sec001 .s01 {
		top: -20vw;
		right: 10vw;
	}

	#sec001 .s02 {
		top: -5vw;
		left: 20vw;
	}

	#sec001 .s03 {
		top: 20vw;
		left: 5vw;
	}

	#sec001 .s04 {
		bottom: -20vw;
		right: 10vw;
	}

	#sec001 .s05 {
		top: 10vw;
		left: 0;
		right: 0;
		margin: 0 auto;
	}

	#sec001 .s05 img {
		width: 90%;
	}

	#sec001 .box {
		margin-top: 30vw;
	}

	#sec001 .box .txt {
		width: 70vw;
		margin-top: 25vw;
		margin-right: 5vw;
	}

	#sec001 .box .txt strong {
		font-size: 4vw;
		text-align: right;
	}

	#sec001 .box .txt p {
		font-size: 3.25vw;
	}
}




/* #sec002 ---------------*/
#sec002 {
	margin-top: 80px;
}

#sec002 .box {
	position: relative;
}

#sec002 .box .s01 {
	display: block;
	margin-top: 30px;
}

#sec002 .box .s02 {
	position: absolute;
	top: 80px;
	left: 150px;
}

#sec002 .box .s03 {
	position: absolute;
	top: 130px;
	left: 240px;
}

#sec002 .box .s04 {
	position: absolute;
	bottom: -15px;
	right: 80px;
}

#sec002 .box2 {
	width: 90%;
	margin: 0 auto;
	margin-top: 40px;
}

#sec002 .box2 .com_copy {
	width: 100%;
}

#sec002 .box2 .name {
	text-align: right;
	margin-top: 30px;
}

#sec002 .box2 .name .innr {
	display: inline-block;
	text-align: left;
}

#sec002 .box2 .name .innr span {
	display: block;
	font-size: 18px;
}



@media screen and (max-width: 767px) {
	#sec002 {
		margin-top: 30vw;
	}

	#sec002 .box .s01 {
		margin-top: 10vw;
	}

	#sec002 .box .s01 img {
		width: 65%;
	}

	#sec002 .box .s02 {
		top: 20vw;
		left: 10vw;
	}

	#sec002 .box .s03 {
		top: 35vw;
		left: 30vw;
	}

	#sec002 .box .s04 {
		bottom: -15vw;
		right: 5vw;
	}

	#sec002 .box2 {
		margin-top: 20vw;
	}

	#sec002 .box2 .name {
		margin-top: 5vw;
	}

	#sec002 .box2 .name .innr span {
		font-size: 3vw;
	}

	#sec002 .box2 .name .innr strong img {
		width: 40vw;
	}
}


/* #sec003 ---------------*/
#sec003 {
	margin-top: 80px;
}

#sec003 .box {
	position: relative;
}

#sec003 .box h2 {
	position: relative;
	z-index: 10;
}

#sec003 .box h3,
#sec003 .box p {
	margin-top: 70px;
}

#sec003 .box .s01 {
	position: absolute;
	top: 240px;
	left: 70px;
}

#sec003 .box .s02 {
	position: absolute;
	top: 70px;
	left: 80px;
}

#sec003 .box .s02 img {
	width: 200px;
}

#sec003 .box .s03 {
	position: absolute;
	bottom: 40px;
	right: 120px;
}


@media screen and (max-width: 767px) {
	#sec003 {
		margin-top: 30vw;
	}

	#sec003 .box h3,
	#sec003 .box p {
		margin-top: 20vw;
	}

	#sec003 .box .s01 {
		top: 55vw;
		left: 2vw;
	}

	#sec003 .box .s01 img {
		width: 75vw;
	}

	#sec003 .box .s02 {
		top: 20vw;
		left: -5vw;
	}

	#sec003 .box .s02 img {
		width: 40vw;
	}

	#sec003 .box .s03 {
		bottom: 30vw;
		right: 15vw;
	}
}


/* #sec004 ---------------*/
#sec004 {
	margin-top: 80px;
}

#sec004 .box {
	position: relative;
}

#sec004 .box .s01 {
	position: absolute;
	top: 250px;
	left: 200px;
}

#sec004 .box .s02 {
	position: absolute;
	top: -30px;
	left: 160px;
}

#sec004 .box .s03 {
	position: absolute;
	bottom: 100px;
	right: 190px;
}

#sec004 .com_btn a {
	background-color: #e75297;
}


@media screen and (max-width: 767px) {
	#sec004 {
		margin-top: 30vw;
	}


	#sec004 .box .s01 {
		top: 62vw;
		left: 20vw;
	}

	#sec004 .box .s02 {
		top: -12vw;
		left: 20vw;
	}

	#sec004 .box .s03 {
		bottom: 15vw;
		right: 15vw;
	}

}


/* #sec005 ---------------*/
#sec005 {
	margin-top: 80px;
}

#sec005 .box {
	position: relative;
}

#sec005 .box h2 {
	position: relative;
	z-index: 10;
}

#sec005 .box .s01 {
	position: absolute;
	bottom: 140px;
	left: 30px;
}

#sec005 .box .s02 {
	position: absolute;
	top: 70px;
	left: 25px;
}

#sec005 .box .s03 {
	position: absolute;
	top: -10px;
	left: 250px;
}

#sec005 .box .s04 {
	position: absolute;
	bottom: 120px;
	right: 200px;
}

#sec005 .box .s05 {
	position: absolute;
	bottom: 100px;
	left: 30px;
}

#sec005 .box2 {
	position: relative;
	width: 500px;
	margin: 0 auto;
	border-radius: 15px;
	box-sizing: border-box;
	margin-top: 40px;
	padding: 30px;
}

#sec005 .com_btn a {
	position: relative;
	overflow: hidden;
	text-decoration: none;
	display: block;
	padding: 10px 30px;
	text-align: center;
	outline: none;
	transition: ease .2s;
	background: #fff;
}

#sec005 .com_btn a span {
	position: relative;
	z-index: 3;
}


@media screen and (max-width: 767px) {
	#sec005 {
		margin-top: 30vw;
	}

	#sec005 .box .s01 {
		bottom: auto;
		top: 53vw;
		left: 5vw;
	}

	#sec005 .box .s02 {
		top: 30vw;
		left: 5vw;
	}

	#sec005 .box .s01 img {
		width: 55vw;
	}

	#sec005 .box .s02 img {
		width: 34vw;
	}

	#sec005 .box .s03 {
		top: -10vw;
		left: 65vw;
	}

	#sec005 .box .s04 {
		bottom: 15vw;
		right: 20vw;
	}

	#sec005 .box .s05 {
		bottom: 25vw;
		left: 5vw;
	}

	#sec005 .box2 {
		width: 90%;
		border-radius: 3vw;
		margin-top: 10vw;
		padding: 5vw;
	}

	#sec005 .com_btn a {
		padding: .5em 2em;
	}

}

/*== 背景が流れる（斜め） */
#sec005 .com_btn a::before {
	content: '';
	position: absolute;
	top: 0;
	left: -130%;
	background: #333;
	width: 120%;
	height: 100%;
	transform: skewX(-25deg);
}

/*hoverした時のアニメーション*/
#sec005 .com_btn a:hover::before {
	animation: skewanime .5s forwards;
}

@keyframes skewanime {
	100% {
		left: -10%;
	}
}

#sec005 .bg_01 {
	border: 1px solid #e75297;
}


#sec005 .com_btn a.bg_01::before {
	background: #e75297;
}

#sec005 .com_btn a.bg_01 span {
	color: #e75297;
}

.com_btn a.bg_01:after {
	color: #e75297;
}



#sec005 .bg_02 {
	border: 1px solid #8dc21f;
}

#sec005 .com_btn a.bg_02::before {
	background: #8dc21f;
}

#sec005 .com_btn a.bg_02 span {
	color: #8dc21f;
}

.com_btn a.bg_02:after {
	color: #8dc21f;
}


#sec005 .bg_03 {
	border: 1px solid #f3971c;
}

#sec005 .com_btn a.bg_03::before {
	background: #f3971c;
}

#sec005 .com_btn a.bg_03 span {
	color: #f3971c;
}

.com_btn a.bg_03:after {
	color: #f3971c;
}


#sec005 .bg_04 {
	border: 1px solid #7d4697;
}

#sec005 .com_btn a.bg_04::before {
	background: #7d4697;
}

#sec005 .com_btn a.bg_04 span {
	color: #7d4697;
}

.com_btn a.bg_04:after {
	color: #7d4697;
}


#sec005 .bg_05 {
	border: 1px solid #e40065;
}

#sec005 .com_btn a.bg_05::before {
	background: #e40065;
}

#sec005 .com_btn a.bg_05 span {
	color: #e40065;
}

.com_btn a.bg_05:after {
	color: #e40065;
}

#sec005 .bg_06 {
	border: 1px solid #fdd000;
}

#sec005 .com_btn a.bg_06::before {
	background: #fdd000;
}

#sec005 .com_btn a.bg_06 span {
	color: #fdd000;
}

.com_btn a.bg_06:after {
	color: #fdd000;
}


#sec005 .bg_07 {
	border: 1px solid #2ca6e0;
}

#sec005 .com_btn a.bg_07::before {
	background: #2ca6e0;
}

#sec005 .com_btn a.bg_07 span {
	color: #2ca6e0;
}

.com_btn a.bg_07:after {
	color: #2ca6e0;
}


#sec005 .bg_08 {
	border: 1px solid #0dac67;
}

#sec005 .com_btn a.bg_08::before {
	background: #0dac67;
}

#sec005 .com_btn a.bg_08 span {
	color: #0dac67;
}

.com_btn a.bg_08:after {
	color: #0dac67;
}


#sec005 .com_btn a:hover span {
	color: #fff;
}


.com_btn a:hover:after {
	color: #fff;
}


#sec005 .box2 {
	border: none;
}

#sec005 .box2.bg_01 {
	background-color: #e75297;
}

#sec005 .box2.bg_02 {
	background-color: #8dc21f;
}

#sec005 .box2.bg_03 {
	background-color: #f3971c;
}

#sec005 .box2.bg_04 {
	background-color: #7d4697;
}

#sec005 .box2 p {
	color: #fff;
	font-size: 16px;
	line-height: 1.8em;
	text-align: justify;
	text-justify: inter-ideograph;
	margin-top: 1em;
}

#sec005 .box2 .s06 {
	position: absolute;
	bottom: -60px;
	right: -50px;
}

#sec005 .box2 .s07 {
	position: absolute;
	top: 210px;
	left: -110px;
}

#sec005 .box2 .s08 {
	position: absolute;
	bottom: -60px;
	right: -65px;
}

#sec005 .box2 .s09 {
	position: absolute;
	top: 160px;
	left: -80px;
}

#sec005 .box3 {
	position: relative;
	margin-top: 100px;
	z-index: 10;
}

#sec005 .box3 .com_btn {
	margin-top: 25px;
}

#sec005 .box3 .s10 {
	position: absolute;
	top: -70px;
	right: 30px;
}

#sec005 .box3 .s11 {
	position: absolute;
	top: 0;
	right: 30px;
}

#sec005 .box3 .s12 {
	position: absolute;
	top: 230px;
	left: 10px;
}

#sec005 .box4 {
	position: relative;
	margin-top: 100px;
	padding-bottom: 170px;
}

#sec005 .box4 p {
	position: relative;
	z-index: 2;
}

#sec005 .box4 .s13 {
	position: absolute;
	top: -70px;
	right: 100px;
	z-index: 2;
}

#sec005 .box4 .s14 {
	position: absolute;
	bottom: 0;
	left: -30px;
	margin: 0 auto;
}


@media screen and (max-width: 767px) {

	#sec005 .box2 p {
		font-size: 3.2vw;
	}

	#sec005 .box2 .s06 {
		display: none;
	}

	#sec005 .box2 .s07 {
		display: none;
	}

	#sec005 .box2 .s08 {
		display: none;
	}

	#sec005 .box2 .s09 {
		display: none;
	}

	#sec005 .box3 {
		margin-top: 20vw;
	}

	#sec005 .box3 .com_btn {
		margin-top: 5vw;
	}

	#sec005 .box3 .s10 {
		display: none;
	}

	#sec005 .box3 .s11 {
		display: none;
	}

	#sec005 .box3 .s12 {
		display: none;
	}

	#sec005 .box4 {
		margin-top: 40vw;
		padding-bottom: 30vw;
	}

	#sec005 .box4 p {
		transform: translateY(-10vw);
	}

	#sec005 .box4 .s13 {
		top: -30vw;
		right: 20vw;
	}

	#sec005 .box4 .s14 {
		bottom: 0;
		left: -2vw;
	}
}