@charset "utf-8";
/******************************
TOP
*******************************/
main#mnpictrl{
	width: 100%;
	overflow: hidden;
}
.mvsmpl{
	overflow: hidden;
	position: relative;
	z-index: 0;
}
.topmsg{
	color: hsl(0, 0%, 100%);
	font-family: 'Noto Serif JP', serif;
	font-weight: 400;
	line-height: 135%;
	text-align: left;
	letter-spacing: .05em;
	position: absolute;
	transform: translateY(-50%);
	z-index: 1;
}
.topmsg h2{
	color: hsl(191, 100%, 50%);
	font-family: "Oswald", sans-serif;
	font-size: 2.2em;
	font-weight: 500;
	line-height: 120%;
	letter-spacing: 0;
	margin-bottom: 0;
}
@media screen and (max-width: 699px) {
	.topmsg{
		font-size: 1.6em;
		top: 50%;
		left: 6%;
	}
}
@media screen and (min-width: 700px) {
	.topmsg{
		font-size: 3em;
		top: 50%;
		left: 1em;
	}
}
@media screen and (min-width: 1280px) {
	.topmsg{
		font-size: 3.3em;
		left: calc((100% - 1280px) / 2);
	}
}
/****swiper****/
.swiper-container{
  width: 100%;
  margin: 0 auto;
  overflow: visible;
  position: relative;
}
.swiper-slide {
   height: 100%;
}
.swiper-slide img{
  width: 100%;
	height: 100%;
  object-fit: cover;
}
@media screen and (max-width: 699px) {
  .swiper-container, .swiper-slide img{
    height: 50vh;
  }
}
@media screen and (min-width: 700px) {
  .swiper-container{
		height: 50vh;
  }
}
@media screen and (min-width: 1024px) {
  .swiper-container{
		min-height: 800px;
		height: 100vh;
  }
}

/****共通要素*****/
.SBtit01{
	margin: 0 auto .5em;
}
.SBtit01 > strong{
	font-family: 'Bebas Neue', sans-serif;
	font-weight: normal;
	color: hsl(201, 100%, 50%);
	line-height: 135%;
	display: block;
}
.SBtit01 > span{
	font-family:"M PLUS 1",'Noto Sans JP',"メイリオ","ＭＳ Ｐゴシック", "ヒラギノ角ゴ Pro W3", arial,helvetica,clean,sans-serif;
	font-weight: 600;
	font-size: .25em;
	line-height: 135%;
	display: block;
}
@media screen and (max-width: 699px) {
	.SBtit01{
		font-size: 4em;
	}
}
@media screen and (min-width: 700px) {
	.SBtit01{
		font-size: 5em;
	}
}
@media screen and (min-width: 1280px) {
}

[class^="SPimg"]{
	overflow: hidden;
}
[class^="SPimg"] img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}
@media screen and (max-width: 699px) {
	[class^="SPimg"]{
		height: 190px;
	}
	.SPimg01{
		height: 280px;
	}
}
@media screen and (min-width: 700px) {
	[class^="SPimg"]{
		height: 370px;
	}
	.SPimg01{
		height: 790px;
	}
}
@media screen and (min-width: 1280px) {
	[class^="SPimg"]{
		height: 470px;
	}
	.SPimg01{
		height: 790px;
	}
}

/******************************
セイホーデンキ紹介
*******************************/
#intro{
	color: hsl(0, 0%, 100%);
	text-align: center;
	padding: 10em 0;
	background: hsl(240, 100%, 26%);
	position: relative;
}
.logomark{
	position: absolute;
	z-index: 1;
}
.logomark img{height: 100%;}

@media screen and (max-width: 699px) {
	#intro{
		padding: 240px 0 10em;
	}
	.logomark{
		height: 130px;
		top: -85px;
		left: 6%;
	}
}
@media screen and (min-width: 700px) {
	#intro{
		padding: 400px 0 10em;
	}
	.logomark{
		height: 220px;
		top: -120px;
		left: 1em;
	}
}
@media screen and (min-width: 1280px) {
	#intro{
		padding: 250px 0 10em;
	}
	.logomark{
		height: 320px;
		top: -120px;
		left: calc((100% - 1280px) / 2);
	}
}

[class^="SDint"]{
	width: 100%;
	position: relative;
}
[class^="SDint"] > div{
	margin: auto;
	background: hsl(201, 100%, 50%);
}
[class^="SDint"] > div dl dt{
	color: hsl(240, 100%, 26%);
	font-family: 'Bebas Neue', sans-serif;
	line-height: 100%;
	margin-bottom: .15em;
}
[class^="SDint"] > div dl dt span{
	color: hsl(206, 47%, 94%);
	font-size: .23em;
	font-weight: 600;
	line-height: 150%;
	display: block;
}
[class^="SDint"] > div > div > img{
	height: 100%;
	object-fit: cover;
	transform: skewX(7deg) scale(1.2);
}
.SDint01{
	text-align: right;
	padding-right: 5em;
	background: linear-gradient(to right, hsla(201, 100%, 50%, 0) 0%, hsla(201, 100%, 50%, 0) 50%, hsl(201, 100%, 50%) 50%, hsl(201, 100%, 50%) 100%);
}
.SDint01 > div{
	margin: auto;
	display: inline-block;
	transform: skewX(-7deg);
	position: relative;
	z-index: 1;
}
.SDint01 > div > div{
	border-radius: 2em;
	overflow: hidden;
	position: absolute;
}
.SDint01 > div > dl{
	text-align: left;
	transform: skewX(7deg);
}
.SDint01 > div > dl .lkbtn_white{
	position: absolute;
}
@media screen and (max-width: 699px) {
	[class^="SDint"] > div dl dt{
		font-size: 3.5em;
	}
	[class^="SDint"] > div dl dd{
		font-size: .8em;
		line-height: 135%;
	}
	.SDint01{
		padding-right: 3em;
		margin-bottom: 300px;
	}
	.SDint01 > div{
		width: 85%;
		padding: 5.5em 0 3em 4em;
		border-radius: 2em 0 0 2em;
	}
	.SDint01 > div > div{
		height: 200px;
		top: -150px;
		right: -70px;
	}
	.SDint01 > div > dl .lkbtn_white{
		bottom: -8em;
	}
}
@media screen and (min-width: 700px) {
	[class^="SDint"] > div dl dt{
		font-size: 5em;
	}
	.SDint01{
		margin-bottom: 500px;
	}
	.SDint01 > div{
		width: 80%;
		padding: 5.5em 0 2em 4em;
		border-radius: 2em 0 0 2em;
	}
	.SDint01 > div > div{
		height: 350px;
		top: -270px;
		right: -15%;
	}
	.SDint01 > div > dl .lkbtn_white{
		bottom: -6.5em;
	}
}
@media screen and (min-width: 1280px) {
	.SDint01{
		margin-bottom: 350px;
	}
	.SDint01 > div{
		width: 55%;
	}
	.SDint01 > div > div{
		height: 450px;
		top: -370px;
		left: 100px;
		right: auto;
	}
}

.SDint02{
	color: hsl(240, 100%, 26%);
	text-align: left;
	padding-left: 5em;
	background: linear-gradient(to right, hsla(201, 100%, 50%, 1) 0%, hsla(201, 100%, 50%, 1) 50%, hsla(201, 100%, 50%, 0) 50%, hsla(201, 100%, 50%, 0) 100%);
	position: absolute;
	z-index: 1;
}
.SDint02 > div{
	width: 80%;
	margin: auto;
	border-radius: 0 2em 2em 0;
	display: inline-block;
	transform: skewX(-7deg);
	position: relative;
	z-index: 1;
}
.SDint02 > div > div{
	border-radius: 2em;
	overflow: hidden;
	position: absolute;
}
.SDint02 > div > dl{
	text-align: left;
	transform: skewX(7deg);
}
@media screen and (max-width: 699px) {
	.SDint02{
		padding-left: 3em;
		bottom: -50px;
	}
	.SDint02 > div{
		width: 80%;
		padding: 3.5em 3em 0 0;
	}
	.SDint02 > div > div{
		height: 200px;
		top: -180px;
		left: -75px;
	}
}
@media screen and (min-width: 700px) {
	.SDint02{
		bottom: -150px;
	}
	.SDint02 > div{
		width: 80%;
		padding: 5.5em 4em 1em 2em;
	}
	.SDint02 > div > div{
		height: 350px;
		top: -270px;
		left: -27%;
	}
}
@media screen and (min-width: 1280px) {
	.SDint02 > div{
		width: 80%;
		padding: 3em 4em 1em 0;
		padding-left: calc(50% + 2em);
	}
	.SDint02 > div > div{
		height: 450px;
		top: -100px;
		left: 2em;
		left: calc((100% - 1280px) / 2 + 2em);
	}
}

.rlsplc{
	position: relative;
}

.SDint03{
	color: hsl(0, 0%, 100%);
	text-align: right;
	background: linear-gradient(to right, hsla(201, 100%, 50%, 0) 0%, hsla(201, 100%, 50%, 0) 50%, hsl(201, 100%, 50%) 50%, hsl(201, 100%, 50%) 100%);
	position: absolute;
	right: 0;
	z-index: 1;
}
.SDint03 > div{
	width: 80%;
	margin: auto;
	border-radius: 2em 0 0 2em;
	display: inline-block;
	transform: skewX(-7deg);
	position: relative;
}
.SDint03 > div > dl{
	text-align: left;
	transform: skewX(7deg);
	display: flex;
}
@media screen and (max-width: 699px) {
	.SDint03{
		padding-right: 1em;
		bottom: -3em;
	}
	.SDint03 > div{
		width: 95%;
		padding: 2em 0 1em 4em;
	}
	.SDint03 > div > dl dt{
		padding-right: .5em;
	}
}
@media screen and (min-width: 700px) {
	.SDint03{
		bottom: 3em;
	}
	.SDint03 > div{
		width: 95%;
		padding: 4em 2em 2em 4em;
	}
	.SDint03 > div > dl dt{
		padding-right: .5em;
	}
}
@media screen and (min-width: 1280px) {
	.SDint03 > div{
		width: 80%;
		padding: 4em 0 2em 5em;
	}
	.SDint03 > div > dl dt{
		padding-right: 1em;
	}
}

.mddllogo{
	text-align: center;
	padding: 11em 0 11em;
	background: hsl(240, 100%, 26%);
}

@media screen and (max-width: 699px) {
	.mddllogo{
		padding: 8em 0 8em;
	}
	.mddllogo img{
		width: 80px;
		margin: auto;
	}
}
@media screen and (min-width: 700px) {
	.mddllogo img{
		width: 130px;
		margin: auto;
	}
}
@media screen and (min-width: 1280px) {
}

/******************************
ABOUT US　会社概要
*******************************/
#company{
	width: 100%;
	text-align: center;
	padding: 5em 0 0;
	background: hsl(206, 47%, 94%);
	position: relative;
	overflow: hidden;
}
.l-rowcom{
	color: hsl(240, 100%, 14%);
	text-align: left;
	width: 100%;
	margin: 5em auto;
}
.l-rowcom dl.comdtl{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}
.l-rowcom dl.comdtl > dt.allset{
	width: 100%;
	margin-bottom: .5em;
}
.l-rowcom dl.comdtl > dd.allset{
	width: 100%;
	padding-left: 1.35em;
	margin-bottom: 2em;
}
dl.hisdtl{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}
dl.hisdtl dt{
	width: 50%;
	margin-bottom: .5em;
}
dl.hisdtl dd{
	width: 50%;
	margin-bottom: .5em;
}
@media screen and (max-width: 699px) {
	.l-rowcom{
		padding: 0 10%;
	}
	.l-rowcom dl.comdtl > dt{
		width: 30%;
		margin-bottom: 2em;
	}
	.l-rowcom dl.comdtl > dd{
		width: 70%;
		margin-bottom: 2em;
	}
}
@media screen and (min-width: 700px) {
	.l-rowcom > div{
		padding: 1em 2.5em;
		width: calc(100% / 2);
	}
	.l-rowcom > div:first-child{
		border-right: 1px solid hsl(0, 0%, 20%);
	}
	.l-rowcom dl.comdtl{
		flex-direction: column;
	}
	.l-rowcom dl.comdtl > dd{
		padding-left: 1em;
		margin-bottom: 2em;
	}
}
@media screen and (min-width: 1280px) {
	.l-rowcom{
		width: 1200px;
	}
	.l-rowcom dl.comdtl{
		flex-direction: row;
	}
	.l-rowcom dl.comdtl > dt{
		width: 30%;
		margin-bottom: 2em;
	}
	.l-rowcom dl.comdtl > dd{
		width: 70%;
		padding: 0;
		margin-bottom: 2em;
	}
}

.mapwth iframe{
	width: 100%;
	height: 450px;
	vertical-align:bottom;
}
@media screen and (max-width: 699px) {
	.mapwth iframe{
		height: 250px;
	}
}

/******************************
BUSINESS　事業・サービスのご案内
*******************************/
#business{
	width: 100%;
	text-align: center;
	padding: 5em 0;
	background: hsl(0, 0%, 100%);
	position: relative;
	overflow: hidden;
}
#business ul{
	padding: 0;
	margin: auto;
	list-style: none;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
}
#business ul li{
	text-align: left;
	background: hsl(206, 47%, 94%);
	border-radius: 2.5em;
	transform: skewX(-7deg);
}
#business ul li dl{
	transform: skewX(7deg);
}
#business ul li dt{
	color: hsl(201, 100%, 50%);
	font-weight: 600;
	line-height: 135%;
	margin-bottom: .5em;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}
#business ul li dt > div:first-child{width: 33%;}
#business ul li dt > div:first-child img{width: 100%;}
#business ul li dt > div:last-child{width: 62%;}

@media screen and (max-width: 699px) {
	#business{
		padding: 5em 6%;
	}
	#business ul{
		padding: 0 2%;
	}
	#business ul li{
		width: 100%;
		padding: 2em 3em;
		margin: 1em 0;
	}
	#business ul li dt{
		font-size: 1.3em;
	}
}
@media screen and (min-width: 700px) {
	#business ul{
		padding: 3em 6%;
	}
	#business ul li{
		width: 100%;
		padding: 2em 4em;
		margin: 1em 0;
	}
	#business ul li dt{
		font-size: 1.1em;
	}
}
@media screen and (min-width: 1000px) {
	#business ul li{
		width: calc(100% / 2 - 1em);
		padding: 2em 3em;
		margin: 1em 0;
	}
}
@media screen and (min-width: 1280px) {
	#business ul{
		width: 1280px;
	}
	#business ul li{
		width: calc(100% / 2 - 2em);
		padding: 2em 3em;
		margin: 0 0 3em;
	}
	#business ul li dt{
		font-size: 1.3em;
	}
}

.l-rowbisi{
	color: hsl(240, 100%, 14%);
	font-size: 1.2em;
	line-height: 135%;
	text-align: left;
	width: 100%;
	margin: 3em auto;
	border-top: 1px solid hsl(0, 0%, 20%);
	border-bottom: 1px solid hsl(0, 0%, 20%);
}
dl.busicntct{
	margin: 3em auto;
}
dl.busicntct dt{
	color: hsl(240, 100%, 14%);
	font-size: 1.3em;
	line-height: 185%;
	margin-bottom: 1em;
}
dl.busicntct .f-lblue{
	font-size: 1.5em;
	line-height: 135%;
	margin: 1em auto 2em;
}
dl.busicntct .f-lblue a{
	color:hsl(201, 100%, 50%);
	text-decoration: none;
}
@media screen and (max-width: 699px) {
	.l-rowbisi{
		padding: 1.5em;
	}
	.l-rowbisi > div:first-child{
		margin-bottom: 1em;
	}
	dl.busicntct .f-lblue{
		font-size: 1.3em;
		line-height: 135%;
		margin: 1em auto 2em;
	}
}
@media screen and (min-width: 700px) {
	.l-rowbisi{
		width: calc(100% - 12%);
		padding: 2.5em 6%;
	}
	.l-rowbisi > div:first-child{
		width: 50%;
	}
	.l-rowbisi > div:last-child{
		width: 50%;
	}
}
@media screen and (min-width: 1280px) {
	.l-rowbisi{
		width: 1280px;
		padding: 2.5em 8em;
	}
	.l-rowbisi > div:first-child{
		width: 40%;
	}
	.l-rowbisi > div:last-child{
		width: 60%;
	}
}

/******************************
CONTACT　お問い合わせ
*******************************/
#contact{
	color: hsl(0, 0%, 100%);
	text-align: center;
	background: hsl(240, 100%, 26%);
	position: relative;
	overflow: hidden;
}
.txtctrl{
	text-align: left;
}
.txtctrl2{
	font-size: .85em;
	line-height: 135%;
	width: 100%;
	text-align: left;
	border-top: 1px solid hsl(0, 0%, 100%);
	margin: auto;
}
@media screen and (max-width: 699px) {
	#contact{
		padding: 5em 6%;
	}
}
@media screen and (min-width: 700px) {
	#contact{
		padding: 5em 6%;
	}
	.txtctrl{
		display: inline-block;
	}
	.txtctrl2{
		padding: 1em 0;
		margin: 1em auto 5em;
	}
}
@media screen and (min-width: 1280px) {
	#contact{
		padding: 5em 0;
	}
	.txtctrl2{
		width: 1000px;
		padding: 1em 10em;
	}
}

dl[class^="inq"]{
	width: 100%;
	padding:0;
	margin: 3em auto;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}
dl[class^="inq"] dt{
	line-height: 150%;
	text-align:left;
	padding:0;
	position: relative;
}
dl[class^="inq"] dt span{
	font-size: .8em;
	line-height: 135%;
	display: block;
}
dl[class^="inq"] dd{
	line-height: 150%;
	text-align:left;
	padding:0;
	margin:0;
	word-wrap:break-word;
	position: relative;
}
dl[class^="inq"] ul{
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}
dl[class^="inq"] ul li{
	line-height: 100%;
	width: calc(100% / 2);
	padding: 0;
	margin: 0 0 .5em;
}
@media screen and (max-width: 699px) {
	dl[class^="inq"] dt{
		width:100%;
		padding:.1em 0;
		margin:0 0 .5em;
	}
	dl[class^="inq"] dd{
		width: 100%;
		margin:0 0 2rem 0;
	}
	dl.inq2 > dt{
		padding: .5em 0;
		margin: 0;
		border-bottom: 1px solid hsla(0, 0%, 100%, .5);
	}
	dl.inq2 > dd{
		font-size: 1.2em;
		line-height: 135%;
		padding: .5em;
		margin: 0 0 1em;
	}
}
@media screen and (min-width: 700px) {
	dl[class^="inq"]{
		width: 100%;
		justify-content: space-between;
	}
	dl[class^="inq"] > dt{
		width: 220px;
		margin: 0;
		margin-bottom: 1em;
	}
	dl[class^="inq"] > dd{
		width: calc(100% - 250px) ;
		margin: 0;
		margin-bottom: 1em;
	}
	dl.inq2 > dt{
		padding: 1.5em 0;
		margin: 0;
		border-top: 1px solid hsla(0, 0%, 100%, .5);
	}
	dl.inq2 > dd{
		padding: 1.5em 0;
		margin: 0;
	}
}
@media screen and (min-width: 1280px) {
	dl[class^="inq"]{
		width: 860px;
		margin: 0 auto;
	}
}

dl.psnlinf{
	color: hsl(0, 0%, 20%);
	width: 100%;
	text-align: left;
	height: 200px;
	padding: 2rem;
	margin: 2em auto;
	border: 1px solid hsla(0, 0%, 0%, .2);
	background: hsl(0, 0%, 100%);
	overflow-y: scroll;
}
dl.psnlinf dt{
	width: 100%;
	font-size: 1.1em;
	font-weight: 600;
	padding: .5rem 0;
	margin: 0 0 1em;
	border-bottom: 1px solid hsla(0, 0%, 0%, .3);
}
dl.psnlinf dd{
	width: 100%;
	line-height: 150%;
	padding: 0;
	margin: 0;
}
@media screen and (max-width: 699px) {
}
@media screen and (min-width: 700px) {
}
@media screen and (min-width: 1280px) {
	dl.psnlinf{
		width: 860px;
	}
}

/******************************
フッター部分
*******************************/
footer[id^="mnft"]{
	color: hsl(0, 0%, 100%);
	text-align:left;
	line-height: 150%;
	width: 100%;
	padding: 0 1.5em;
	margin: auto;
	box-sizing: border-box;
	background: hsl(240, 100%, 26%);
}
footer[id^="mnft"] a{
	color: hsl(0, 0%, 100%);
	text-decoration: none;
}
.udrlogo{
	text-align: center;
	padding: 8em 0 12em;
}
dl.ftrcominf{
	width: 100%;
	margin: auto;
	display: flex;
}

@media screen and (max-width: 699px) {
	footer[id^="mnft"]{
		padding: 0 6%;
	}
	.udrlogo img{
		width: 80px;
		margin: auto;
	}
	dl.ftrcominf{
		padding: 3em 10% 8em;
		flex-direction: column;
	}
	dl.ftrcominf > dt, dl.ftrcominf > dd{width: 100%;}
	dl.ftrcominf > dt img{width: 100%;}
}
@media screen and (min-width: 700px) {
	footer[id^="mnft"]{
		padding: 0 6%;
	}
	.udrlogo img{
		width: 130px;
		margin: auto;
	}
	dl.ftrcominf{
		padding: 8em 10%;
		flex-direction: row;
		box-sizing: border-box;
	}
	dl.ftrcominf > dt, dl.ftrcominf > dd{width: 50%;}
	dl.ftrcominf > dt img{width: 70%;}
}
@media screen and (min-width: 1280px) {
	footer[id^="mnft"]{
		padding: 0;
	}
	dl.ftrcominf{
		width: 900px;
		padding: 8em 2.5em;
	}
}

#page-top {
	font-size: .8em;
	width: 50px;
	height: 50px;
	line-height: 50px;
	position: fixed;
	right: 0;
	bottom: 0;
	z-index: 110;
}
#page-top a {
	width: 100%;
	color: hsl(0, 0%, 100%);
	text-align: center;
	text-decoration: none;
	background: hsl(240, 100%, 26%);
	border-top: 2px solid hsla(0, 0%, 100%, 1);
	border-left: 2px solid hsla(0, 0%, 100%, 1);
	border-radius: 1em 0 0 0;
	aspect-ratio: 1 / 1;
	display: inline-block;
	box-sizing: border-box;
}
@media screen and (max-width: 699px) {
}
@media screen and (min-width: 700px) {
}
@media screen and (min-width: 1280px) {
}