@charset "utf-8";
/* CSS Document */
* {
	box-sizing: border-box;
	padding: 0;
	margin: 0;
}
html{
	overflow: auto;
}
body{
	font-family: 'Noto Sans JP', sans-serif;
}


.mw {
	width: 1440px;
	padding: 0 20px;
	max-width: 100%;
	margin: auto;
}
main {
	max-width: 100%;
    overflow: hidden;
}
.diagonal {
	max-width: 100%;
	overflow: visible;
	padding: 5%;
}

.bg{
	background-image: url(../img/lequa_bg.png);
	background-size: 100%;
	background-repeat: no-repeat;
}
header{
	padding: 15px 0 10px;
	background-color: #ffffff;
}

header .mw,.header_button{
	display: flex;
	justify-content: space-between;
	list-style:none;
}

header li{
	margin-left: 30px;
}

@media screen and (max-width: 1040px) {
	header .mw {
		display:block;
	}
	span.logo {
	    display: block;
	    text-align: center;
		padding: 0 0 3% 0;
	}
	.header_button {
		justify-content: space-evenly;
	}
	header li img {
		max-width:100%;
	}
	header li{
	margin-left: 0;
	}
}

@media screen and (max-width: 663px) {
	.header_button {
		justify-content: space-around;
	}
	header li {
	    width: 48%;
		margin: 0;
	}
}

.visual{
	padding-bottom: 2%;
}
.visual_title {
	padding-right: 3%;
}
.main_visual {
	display: flex;
	margin-top: 6%;
	justify-content: space-between;
	position: relative;
}
.main_visual h1{
	margin-bottom: 15%;
}
.main_visual img{
	max-width:100%;
}
.trailer {
    position: absolute;
    bottom: 47px;
    left: 0;
}
.trailer iframe{
	width: 506px;
	height:285px;
}
@media screen and (max-width: 1450px) {
	.trailer {
        bottom: 3.5vw;
	}
	.trailer iframe{
		width: 34vw;
		height:19.1vw;
	}
}
@media screen and (max-width: 750px) {
	.trailer {
		position: relative;
		bottom: auto;
        padding: 5% 0 10% 0;
	}
	.trailer iframe{
		width: 100%;
		height: 50.4vw;
	}
}

.sec1_bg {
    background-image: url(../img/sec1_bg.png);
    background-repeat: no-repeat;
    background-position: top center;
    height: 911px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.sec1_bg ul{
	display:flex;
	flex-wrap: wrap;
	justify-content: center;
	list-style: none;
}
.sec1_bg h2 {
	text-align: center;
}
.sec1_bg img {
	max-width: 100%;
}
.reason li{
	margin: 0 1%;
    width: 21%;
}

.danger h2 {
	text-align: center;
	padding-bottom: 5%;
}
.danger h2 img {
	max-width: 100%;
}
.danger_list img{
	max-width: 100%;
	position: absolute;
	top: 0;
	z-index: 9;
	width: 45%;
}
.danger ul{
	list-style: none;
}
.danger_list dl {
	background-color: #f7f8fc;
	position: absolute;
	right: 0%;
	top: 9%;
	width: 59%;
	padding: 4% 4% 4% 8%;
}
.danger_list dt{
	font-size: 38px;
	color: #023ca7;
	font-weight: bold;
	border-bottom: 1px solid #c1c1c1;
	padding-bottom: 5%;
	margin-bottom: 5%;
}
.danger_list dd{
	font-size: 26px;
}
.danger li{
	padding-bottom: 40%;
	position: relative;
}
.danger li:nth-child(2n) dl {
	left: 0;
	top: 8%;
	padding: 4% 8% 4% 4%;
}
.danger li:nth-child(2n) img {
	right: 0;
	top: 0;
}
.diagonal{
	background-image:url(../img/point_h2_bg.png);
	background-size: inherit;
	background-repeat: no-repeat;
	background-position: center 10.5%;
}
.diagonal_h2 {
    display: flex;
    padding-bottom: 17%;
    justify-content: center;
    margin-bottom: -24%;
    align-items: center;
}
.diagonal_title{
	margin-right: 5%;
}
.diagonal_title h2{
	margin-bottom: 2%;
}
.diagonal_title p{
	font-size: 1.9vw;
}
.diagonal_h2 img{
	position: relative;
    z-index: 10;
	max-width: 100%;
}

.blue {
	background-color: #023ca7;
	overflow: hidden;
	transform: rotate(-5deg);
	-moz-transform: rotate(-5deg);
	-webkit-transform: rotate(-5deg);
	width: 120%;
	margin: 0 -10%;
	padding: 0% 0% 10% 0%;
	display: flex;
	justify-content: center;
	align-items: center;
}
.blue .contents {
	transform: rotate(5deg);
	-moz-transform: rotate(5deg);
	-webkit-transform: rotate(5deg);
	padding: 7% 0;
	width: 100%;
	position: relative;
	color: #FFFFFF;
}

.white {
	background-color: rgba(255,255,255,1.00);
	overflow: hidden;
	transform: rotate(5deg);
	-moz-transform: rotate(5deg);
	-webkit-transform: rotate(5deg);
	width: 120%;
	margin: -15% -10%;
	padding: 2% 0 17% 0;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: -10%;
}
.white .contents {
	transform: rotate(-5deg);
	-moz-transform: rotate(-5deg);
	-webkit-transform: rotate(-5deg);
	padding: 6% 0;
	width: 100%;
	position: relative;
}

.point_1::after {
	position: absolute;
}

.point_fx {
	position: relative;
	display: flex;
	align-items: center;
	z-index: 20;
    margin: 0 4%;
}

.point_fx > div, 
.point_fx > figure {
	width: 50%;
}
.point_fx img {
	max-width: 100%;
	display: block;
}
.hiring_body div{
	display: flex;
	justify-content: space-around;
	align-items: center;
	margin-right: 4%;
}
.hiring_body img{
	max-width: 100%;
}

.point5_bg {
	padding-bottom: 5%;
}
.point5_img{
	display: flex;
	justify-content: space-between;
	width: 100%;
}
.point5_img img{
    width: 45%;
    height: 100%;
}
.point5_bg img{
	margin-left: 45%;
	padding-top: 5%;
}

.left_text dl{
    margin: 0 0 0 auto;
    width: 65%;
}
.left_text dl dd {
	padding: 5% 0 0 0;
    font-size: 1.3vw;
	line-height: 160%;
}

.left_text figure{
	padding-left: 5%;
}

.flow h2{
	text-align: -webkit-center;
	margin: 60px;
}
.flow img{
	display:block;
	max-width: 100%;
}
.pc {
	display: block !important;
}
.sp {
	display: none !important;
}
.easy_step{
	margin: 10% 5%;
}
.coping {
	background-image: url(../img/sec3_flow2.png);
	background-repeat: no-repeat;
	background-size: 27%;
    background-position: 5%;
	padding: 4% 4% 4% 33%;
    border: 1px solid #c1c1c1;
}
.coping p{
	font-size: 1.6vw;
}

.font_blue p{
	font-size: 2vw;
	font-weight: bold;
	color: #023ca7;
}

.lequa_lineup{
	padding: 8%
}

.lequa_lineup p{
	font-size: 28px;
}
.lequa_lineup dd{
	font-weight: bold;
}
.title {
	text-align: center;
	margin-bottom: 3%;
}


/**/
.right_text dl{
    margin: 0 auto 0 0;
    width: 65%;
}
.right_text dl dd {
	padding: 5% 0 0 0;
    font-size: 1.3vw;
	line-height: 160%;
}
.right_text figure{
	padding-right: 5%;
}
.contents,.point_4 figure{
	padding: 0 5%;
}
.lineup{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	max-width: 1200px;
	margin: 0 auto;
}
.store {
	text-align: center;
	color: #ffffff
}
.store .button img{
	max-width: 100%;
}
.mass_retailer{
    background-color: #ffffff;
    max-width: 1000px;
    margin: 3% auto;
    padding: 2%;
}
.mass_retailer img{
	margin: 1%
}
.store_bg{
	background-color: #023ca7;
    background-image: url(../img/footer_bg.png);
    background-repeat: no-repeat;
    padding:5%;
}
.store h2{
	font-size: 42px;
}
.footer_bg{
	background-color: #002588;
	color: #ffffff;
	text-align: center;
	padding: 1% 0;
}


@media screen and (max-width: 1400px) {
	.right_text dl, 
	.left_text dl{
		width: 80%;
	}
	.right_text dl dd , 
	.left_text dl dd {
		font-size: 1.6vw;
	}
	.danger h2 img {
	max-width: 100%;
	}
}

@media screen and (max-width: 750px) {
	
	.white, 
	.blue {
		width: 130%;
		margin: 0 -15% -10% -15%;
		padding: 20% 0 25% 0;
	}
	.right_text figure {
		padding-right: 0%;
	}
	.left_text {
		display: flex;
		flex-direction: column-reverse;
	}
	.right_text {
		display: flex;
		flex-direction: column;
		margin: -5% 4%;
	}
	.point_fx > div, 
	.point_fx > figure {
		width: 100%;
	}
	.left_text figure {
		padding: 0;
	}
	.blue .contents,
	.white .contents {
 	   padding: 0 9%;
	}
	.right_text dl, 
	.left_text dl {
		width: 100%;
		padding: 5% 0 0 0;
	}
	.right_text dl dd, 
	.left_text dl dd {
		font-size: 3.6vw;
	}
	.point_1::after,
	.point_2::after,
	.point_3::after,
	.point_4::after{
		background-image:url()!important;
	}
	.blue::before{
		right:-18% !important;
		top: -30% !important;
		width: 115% !important;
		height: 174% !important;
	}
	.white::before {
		left: -20% !important;
		top: -48% !important;
		width: 143% !important;
		height: 250% !important;
	}
	.lequa_lineup{
		padding:8% 0;
		max-width:100%;
	}
	.lineup dl {
		width: 39%;
		margin-top: 5%;
	}
	.title{
		margin-bottom: 0
	}
	.pc {
		display: none !important;
	}
	.sp {
		display: block !important;
		width: 100%;
	}
	.lequa_lineup dd{
		font-size: 2.2vw;
	}
}

.point_1 {
	position: relative;
}
.point_1::after {
    position: absolute;
    left: 3%;
    top: 7%;
    content: '';
    background-image: url(../img/point1.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center left;
    display: block;
    width: 100%;
    height: 100%;
}

.point_3 {
	position: relative;
}
.point_3::after {
    position: absolute;
    left: 3%;
    top: 7%;
    content: '';
    background-image: url(../img/point3.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center left;
    display: block;
    width: 100%;
    height: 84%;
}

.point_2 {
	position: relative;
}
.point_2::after {
    position: absolute;
    right: 3%;
    top: 0%;
    content: '';
    background-image: url(../img/point2.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center right;
    display: block;
    width: 100%;
    height: 100%;
}



.point_4 {
	position: relative;
}
.point_4::after {
    position: absolute;
    right: 3%;
    top: 0%;
    content: '';
    background-image: url(../img/point4.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center right;
    display: block;
    width: 100%;
    height: 100%;
}







.blue::before {
    position: absolute;
    right: 1%;
    top: -25%;
    content: '';
    background-image: url(../img/point1_bg.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center right;
    display: block;
    width: 100%;
    height: 122%;
    -webkit-transform: rotate(5deg);
}


.white::before {
    position: absolute;
    left: 1%;
    top: -17%;
    content: '';
    background-image: url(../img/point2_bg.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center left;
    display: block;
    width: 100%;
    height: 122%;
	overflow: hidden;
	transform: rotate(-5deg);
	-moz-transform: rotate(-5deg);
	-webkit-transform: rotate(-5deg);
}





.hiring {
    margin: 0 -6%;
	position: relative;
	overflow: visible;
	padding-top: 10%;
}
.hiring_head {
    position: relative;
	content: '';
    height: 0px;
	background-color: #c8e8fd;
	overflow: hidden;
	transform: rotate(-5deg);
	-moz-transform: rotate(-5deg);
	-webkit-transform: rotate(-5deg);
	width: 120%;
	margin: -10% -5% 0 -5%;
	padding: 0% 0% 10% 0%;
	display: flex;
	justify-content: center;
	align-items: center;
	left: 0;
	top: -10%;
}

.hiring_head::before{
    position: absolute;
    content: '';
    height: 0px;
    background-color: #023ca7;
    overflow: hidden;
    transform: rotate(10deg);
    -moz-transform: rotate(10deg);
    -webkit-transform: rotate(10deg);
    width: 120%;
    margin: -10% -5% 0 -5%;
    padding: 0% 0% 10% 0%;
    display: flex;
    justify-content: center;
    align-items: center;
    left: 0;
    top: 20%;
}
.hiring_body {
	position: relative;
	background-color: #c8e8fd;
	margin-top: -9%;
	padding: 6% 0 11% 0;
}
@media screen and (max-width: 1455px) {
	.danger_list dd{
	font-size: 1.8vw;
	}
	.danger_list dt{
	font-size: 2.5vw;
	}
}
@media screen and (max-width: 1420px) {
	.lineup dl {
	    width: 23%;
	}
	.lineup dl img {
		max-width:100%;
	}
	.lineup dl dd{
	    font-size: 1.2vw;
	}
	.lequa_lineup {
	    padding: 8% 0%;
	}
}

@media screen and (max-width: 1340px) {
	.sec1_bg {
		height: 55vw;
		background-size: cover;
	}
	.sec1_bg img {
	    width: 80%;
	}
	.reason li img {
		width:100%;
	}

}
@media screen and (max-width: 1182px) {
	.store h2{
		font-size: 3.5vw;
	}
}
@media screen and (max-width: 921px) {
	.store h2{
		font-size: 3.4vw;
	}
}
@media screen and (max-width: 750px) {
	.main_visual {
		display: block;
	}
	.main_visual h1 {
		margin-bottom: 0%;
	}
	.main_visual video {
		max-width: 100%;
	}
	.main_visual img {
		max-width: 100%;
	}
	.danger h2{
		padding: 5% 0;
	}
	.danger_list dl {
		position: inherit;
		right: 0%;
		top: 8%;
		width: 100%;
		padding: 5%;
	}
	.danger_list img{
		position: inherit;
		width: 100%;
		display: block;
	}
	.danger li {
		padding-bottom: 5%;
	}
	.diagonal {
		padding: 4%;
	}
	.diagonal_h2 {
		display:block;
		margin-bottom: -33%;
		text-align: center;
	}
	.diagonal_h2 p{
	font-size: 4.5vw;
	}
	.diagonal_monitor{
		text-align: -webkit-center;
	}
	.diagonal_monitor figure{
		max-width: 80%;
	}
	.diagonal_h2 figure{
		text-align: center;
	}
	.diagonal_title{
		margin-right: 0;
		margin-bottom: 5%;
	}
	.point_4 figure{
		padding: 0;
	}
	.point5_bg{
		background-size: contain;
	}
	.point5_bg img{
		width: 100%;
		margin-left:0;
		padding-top: 90%;
	}
	.hiring_body div{
		display:block;
		max-width:100%;
		text-align: -webkit-center;
	}
	.point5_monitor img{
		max-width: 75%;
		margin-bottom: 3%;
	}
	.point5_img img{
		width:90%;
		display: block;
		margin: 5% 0;
	}
	.coping{
		background-position: 50% 13%;
		padding: 52% 5% 5% 5%;
		background-size: 70%;
	}
	.coping p{
		font-size: 3vw;
	}
	.easy_step{
		margin: 0 0 10% 0;
	}
	.lequa_lineup img{
		max-width: 100%;
	}
	.store h2{
		font-size: 5.7vw;
	}
	.danger_list dt {
		font-size: 4.3vw;
	}
	.danger_list dd{
		font-size: 3vw;
	}
	.flow h2{
		margin: 20% 0 10% 0;
	}
	.store_bg {
		padding: 5% 0;
	}
	.mass_retailer{
		padding: 6% 9%;
		margin: 5% 0 10% 0;
	}
	.mass_retailer img{
		max-width:100%;
	}
	.lineup dl {
	    width: 47%;
	}
	.lineup dl dt img {
		width:100%;
	}
	.lineup dl dd {
		font-size: 2.4vw;
	}
}