@charset "utf-8";
/******************************
TOP
*******************************/
main#mnpictrl{
	width: 100%;
	overflow: hidden;
}
.mvsmpl{
	overflow: hidden;
	position: relative;
	z-index: 0;
}
.mvsmpl img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}
h2.topmsg{
	color: hsl(191, 100%, 50%);
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 600;
	line-height: 120%;
	position: absolute;
	z-index: 1;
}
.topsbmsg{
	width: 100%;
	color: hsl(0, 0%, 100%);
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 600;
	line-height: 135%;
	text-align: center;
	background: hsla(193, 100%, 50%, .7);
	display: block;
	position: absolute;
	bottom: 0;
}
@media screen and (max-width: 699px) {
	.mvsmpl img{
		height: 600px;
	}
	h2.topmsg{
		font-size: 3.5em;
		line-height: 135%;
		top: 120px;
		left: 5%;
	}
	.topsbmsg{
		font-size: 1.5em;
		padding: 1.5em 0 40px;
	}
}
@media screen and (min-width: 700px) {
	.mvsmpl img{
		height: 700px;
	}
	h2.topmsg{
		font-size: 3.5em;
		top: 150px;
		left: 6%;
	}
	.topsbmsg{
		font-size: 1.5em;
		padding: 1em 0;
	}
}
@media screen and (min-width: 1200px) {
	.mvsmpl img{
		height: 1350px;
	}
	h2.topmsg{
		font-size: 5.6em;
		top: 180px;
		left: calc((100% - 1200px) / 2);
	}
	.topsbmsg{
		font-size: 1.85em;
		padding: 2em 0 200px;
	}
}

/****共通要素*****/
section[class^="bgwht"]{
	background: hsl(0, 0%, 100%);
}
section.bgwhtSB{
	padding: 0 0 10em;
}
section[class^="bgblue"]{
	background: hsl(201, 100%, 95%);
}
section.bgblueTP{
	padding: 5em 0;
}
section.bgblueSB{
	padding: 0 0 10em;
}

h2.mntit{
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: bold;
	line-height: 150%;
}
h2.mntit strong{
	font-weight: 600;
}
h2.mntit span.f-lblue{
	margin: 0 .3em;
}
@media screen and (max-width: 699px) {
	section.bgwhtSB{
		padding: 0 0 5em;
	}
	section.bgblueSB{
		padding: 0 0 5em;
	}
	h2.mntit{
		font-size: 1.2em;
	}
	h2.mntit strong{
		font-size: 1.4em;
	}
	h2.mntit span.f-lblue{
		font-size: 1.4em;
	}
	h2.mntit img{
		width: 60%;
	}
}
@media screen and (min-width: 700px) {
	h2.mntit{
		font-size: 1.5em;
	}
	h2.mntit strong{
		font-size: 1.2em;
	}
	h2.mntit span.f-lblue{
		font-size: 1.4em;
	}
	h2.mntit span.f-lblue{
		vertical-align: -4px;
	}
}
@media screen and (min-width: 1200px) {
}

[class^="SPimg"]{
	overflow: hidden;
	position: relative;
}
[class^="SPimg"] h3{
	color: hsl(0, 0%, 100%);
	font-family:"M PLUS 1",'Noto Sans JP',"メイリオ","ＭＳ Ｐゴシック", "ヒラギノ角ゴ Pro W3", arial,helvetica,clean,sans-serif;
	font-size: 1.4em;
	font-weight: normal;
	line-height: 135%;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 1;
}
[class^="SPimg"] img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

@media screen and (max-width: 699px) {
	[class^="SPimg"]{
		height: 150px;
	}
	.SPimg01{height: 200px;}
	.SPimg02{height: 200px;}
	[class^="SPimg"] h3{
		text-shadow: 1px 1px 3px hsla(0, 0%, 0%, .7);
		left: 6%;
	}
}
@media screen and (min-width: 700px) {
	[class^="SPimg"]{
		height: 340px;
	}
	.SPimg01{height: 400px;}
	.SPimg02{height: 600px;}
	[class^="SPimg"] h3{
		text-shadow: 2px 2px 5px hsla(0, 0%, 0%, .7);
		left: 6%;
	}
}
@media screen and (min-width: 1200px) {
	[class^="SPimg"]{
		height: 420px;
	}
	.SPimg02{height: 600px;}
	[class^="SPimg"] h3{
		left: calc((100% - 1000px) / 2);
	}
}

/******************************
3つのお仕事
*******************************/
#intro{
	text-align: center;
	padding: 0;
	position: relative;
}
ul.introlst{
	padding: 0;
	margin: 0;
	list-style: none;
	display: flex;
}
ul.introlst li{
	color: hsl(207, 100%, 50%);
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 1.2em;
	font-weight: bold;
	line-height: 135%;
	padding: 0;
	margin: 0;
}
ul.introlst li img{
	width: 100%;
	object-fit: cover;
	aspect-ratio: 4 / 3;
}
ul.introlst li > div{
	position: relative;
}
ul.introlst li > div:first-child > span{
	color: hsl(0, 0%, 100%);
	font-family: 'Noto Sans JP', sans-serif;
	text-align: center;
	background-color: hsl(207, 100%, 50%);
	border-radius: 50%;
	display: inline-block;
	aspect-ratio: 1 / 1;
	position: absolute;
}
@media screen and (max-width: 699px) {
	#intro{
		height: 350px;
	}
	ul.introlst{
		width: 88%;
		flex-direction: column;
		position: absolute;
		top: -30px;
		left: 50%;
		transform: translateX(-50%);
	}
	ul.introlst li{
		text-align: left;
		margin: 1rem auto;
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	ul.introlst li img{
		height: 100px;
	}
	ul.introlst li > div:first-child{
		width: 40%;
		padding-left: 1rem;
	}
	ul.introlst li > div:last-child{
		padding-left: 1rem;
		width: 60%;
	}
	ul.introlst li > div:first-child > span{
		font-size: 1.2em;
		line-height: 50px;
		width: 50px;
		left: -1rem;
		top: 50%;
		transform: translateY(-50%);
	}
}
@media screen and (min-width: 700px) {
	ul.introlst{
		margin: auto;
		flex-direction: row;
		justify-content: space-between;
	}
	ul.introlst li{
		width: calc(100% / 3);
	}
	ul.introlst li > div:last-child{
		padding-top: 1.5em;
	}
	ul.introlst li > div:last-child{
		padding: 1.5em 1rem 0;
	}
	ul.introlst li > div:first-child > span{
		font-size: 1.1em;
		line-height: 80px;
		width: 80px;
		left: 50%;
		bottom: -2rem;
		transform: translateX(-50%);
	}
}
@media screen and (min-width: 1280px) {
	#intro{
		height: 300px;
	}
	ul.introlst{
		width: 1280px;
		position: absolute;
		top: -130px;
		left: 50%;
		transform: translateX(-50%);
	}
	ul.introlst li{
		width: calc(100% / 3 - 2em);
	}
	ul.introlst li > div:last-child{
		padding-top: 1.5em;
	}
}

/******************************
水のイメージ
*******************************/
#wtrbg{
	position: relative;
}
#wtrbg img.wtrpic{
	width: 100%;
	object-fit: cover;
	object-position: center;
}
.chiyoda01{
	font-family:"M PLUS 1",'Noto Sans JP',"メイリオ","ＭＳ Ｐゴシック", "ヒラギノ角ゴ Pro W3", arial,helvetica,clean,sans-serif;
	line-height: 135%;
	text-align: center;
	position: absolute;
	top: 1em;
	left: 50%;
	transform: translate(-50%, 0);
}
.chiyoda01 p{
	margin: 2rem 0;
}
@media screen and (max-width: 699px) {
	#wtrbg{
		padding-top: 5rem;
	}
	#wtrbg img.wtrpic{
		height: 150px;
	}
	.chiyoda01{
		width: 100%;
		display: block;
	}
	.chiyoda01 p{
		margin: 1rem 0;
	}
	.chiyoda01 img{
		width: 60%;
	}
}
@media screen and (min-width: 700px) {
	#wtrbg{
		margin-top: 7rem;
		padding-top: 3rem;
	}
	#wtrbg img.wtrpic{
		height: 300px;
	}
}
@media screen and (min-width: 1280px) {
	#wtrbg{
		margin-top: 2em;
		padding-top: 0;
	}
	#wtrbg img.wtrpic{
		height: 460px;
	}
}

/******************************
事例紹介
*******************************/
#case{
	font-family: 'Noto Sans JP', sans-serif;
	text-align: center;
	padding: 5rem 0 10rem;
}
@media screen and (max-width: 699px) {
	#case{
		padding: 5rem 0;
	}
}
@media screen and (min-width: 700px) {
}
@media screen and (min-width: 1280px) {
}

ul.excase{
	padding: 0;
	margin: 0 auto;
	list-style: none;
}
ul.excase li{
	padding: 0;
	margin: 4em 0;
}
ul.excase li > div{
	display: flex;
}
ul.excase li > div > div:first-child img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}
ul.excase li > div > div:last-child{
	color: hsl(0, 0%, 100%);
	text-align: left;
	background: hsl(218, 78%, 26%);
}
ul.excase li dl dt{
	color: hsl(193, 100%, 50%);
	font-size: 1.2em;
	line-height: 135%;
	margin-bottom: 1.5em;
}
ul.excase li dl dt strong{
	font-family: "Oswald", sans-serif;
	font-weight: normal;
	font-size: 1.2em;
	line-height: 135%;
}
ul.excase li dl dt strong span{
	font-size: 2.6em;
	letter-spacing: .1rem;
	vertical-align: -20px;
	padding: 0 3rem 0 1rem;
}
ul.excase li dl dd strong{
	font-size: 1.1em;
	line-height: 150%;
}
ul.excase li dl dd p{
	font-size: .8em;
	line-height: 175%;
}
@media screen and (max-width: 699px) {
	ul.excase{
		margin: 3em auto;
	}
	ul.excase li{
		margin: 0;
	}
	ul.excase li > div{
		flex-direction: column;
	}
	ul.excase li > div > div:first-child img{
		height: 200px;
	}
	ul.excase li > div > div:last-child{
		padding: 4em 6% 2em;
	}
	ul.excase li dl{
		font-size: 1.2em;
	}
	ul.excase li dl dt strong span{
		vertical-align: -10px;
		padding: 0 1rem 0 .5rem;
	}
}
@media screen and (min-width: 700px) {
	ul.excase li > div{
		flex-direction: row;
	}
	ul.excase li:nth-child(even) > div{
		flex-direction: row-reverse;
	}
	ul.excase li > div > div:first-child{
		width: 45%;
	}
	ul.excase li > div > div:last-child{
		width: 55%;
		padding: 3em 3em 2em;
	}
	ul.excase li dl dt strong span{
		vertical-align: -20px;
		padding: 0 3rem 0 1rem;
	}
}
@media screen and (min-width: 1280px) {
	ul.excase{
		width: 1280px;
	}
}

/******************************
取扱商品
*******************************/
#items{
	font-family: 'Noto Sans JP', sans-serif;
	text-align: center;
	padding: 0;
}
ul.itemnav{
	font-family:"M PLUS 1",'Noto Sans JP',"メイリオ","ＭＳ Ｐゴシック", "ヒラギノ角ゴ Pro W3", arial,helvetica,clean,sans-serif;
	padding: 0;
	margin: 3em auto 1em;
	list-style: none;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
}
ul.itemnav li{
	text-align: center;
	position: relative;
}
ul.itemnav li a{
	color: hsl(218, 78%, 26%);
	width: 100%;
	text-decoration: none;
	background: hsl(193, 100%, 70%);
	border-radius: 2.5rem;
	display: block;
	transition: .3s all;
}
ul.itemnav li a:hover{
	color: hsl(0, 0%, 100%);
	background: -webkit-linear-gradient(left, #3983fb, #48bafb);
	background: linear-gradient(to right, #3983fb, #48bafb);
}
ul.itemnav li a span{
	white-space: nowrap;
}
ul.itemnav li a > span{
	line-height: 135%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
@media screen and (max-width: 699px) {
	ul.itemnav{
		width: 88%;
	}
	ul.itemnav li{
		width: calc(100% / 2 - .2em);
		margin: .2em 0;
	}
	ul.itemnav li a{
		height: 90px;
		border-radius: 1rem;
	}
	ul.itemnav li a > span{
		font-size: 1.2em;
	}
}
@media screen and (min-width: 700px) {
	ul.itemnav{
		width: 88%;
	}
	ul.itemnav li{
		width: calc(100% / 2 - .5em);
		margin: .5em 0;
	}
	ul.itemnav li a{
		height: 160px;
	}
	ul.itemnav li a > span{
		font-size: 1.4em;
	}
}
@media screen and (min-width: 1050px) {
	ul.itemnav{
		width: 1050px;
	}
	ul.itemnav li{
		width: calc(100% / 2 - 1em);
		margin: 1em 0;
	}
}

ul.itemlst{
	padding: 0;
	margin: 5em auto;
	list-style: none;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
}
ul.itemlst li{
	text-align: left;
	padding: 0;
	margin: 3em 0;
}
ul.itemlst li > img{
	width: 100%;
	object-fit: cover;
	aspect-ratio: 5 / 4;
}
ul.itemlst li dl{
	padding-top: 1.5rem;
}
ul.itemlst li dl dt{
	font-weight: bold;
}
ul.itemlst li dl dd{
	font-size: .8em;
	line-height: 135%;
}

@media screen and (max-width: 699px) {
	ul.itemlst{
		width: 88%;
		margin: 3em auto;
	}
	ul.itemlst li{
		width: calc(100% / 2 - .8em);
		margin: 1em 0;
	}
}
@media screen and (min-width: 700px) {
	ul.itemlst{
		width: 88%;
		justify-content: left;
	}
	ul.itemlst li{
		width: calc(100% / 3 - 2em);
		margin: 3em 1em;
	}
}
@media screen and (min-width: 1280px) {
	ul.itemlst{
		width: 1280px;
		justify-content: space-between;
	}
	ul.itemlst li{
		width: calc(100% / 4 - 2em);
		margin: 3em auto;
	}
}

.othdtl{
	padding: 4em 0;
	margin: auto;
	border-top: 1px solid hsla(0, 0%, 0%, .7);
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
}
ul.othlst{
	font-size: .85em;
	line-height: 135%;
	text-align: left;
	list-style: none;
}
ul.othlst li{
	position: relative;
}
ul.othlst li::before{
	content: "●";
	color: hsl(193, 100%, 50%);
	position: absolute;
	top: 0;
	left: -25px;
}
ul.othlst li strong{
	line-height: 135%;
}
@media screen and (max-width: 699px) {
	.othdtl{
		width: 88%;
	}
}
@media screen and (min-width: 700px) {
	.othdtl{
		width: 88%;
	}
	.othdtl > div{
		width: 50%;
	}
}
@media screen and (min-width: 1280px) {
	.othdtl{
		width: 1280px;
	}
}

/******************************
会社案内
*******************************/
#company{
	font-family: 'Noto Sans JP', sans-serif;
	width: 100%;
	text-align: center;
	padding: 5em 0 0;
	position: relative;
	overflow: hidden;
}
dl.comdtl{
	font-size: .9em;
	line-height: 135%;
	text-align: left;
	margin: 3em auto;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}
dl.comdtl > dt:nth-of-type(odd){
	background: hsl(201, 100%, 95%);
}
dl.comdtl > dd{
	padding: .3em 0 .3em 0;
}
dl.comdtl > dd:nth-of-type(odd){
	background: hsl(201, 100%, 95%);
}
dl.comdtl > dd a{
	color: #000;
	text-decoration: none;
}

@media screen and (max-width: 699px) {
	dl.comdtl > dt{
		width: 30%;
		padding: .5em 0 .5em 6%;
	}
	dl.comdtl > dd{
		width: 70%;
		padding: .5em 6% .5em .5em;
	}
}
@media screen and (min-width: 700px) {
	dl.comdtl > dt{
		width: 40%;
		padding: .3em 0 .3em 10rem;
	}
	dl.comdtl > dd{
		width: 60%;
	}
}
@media screen and (min-width: 1200px) {
	dl.comdtl{
		width: 750px;
	}
}

#company .ctrlspc{
	padding: 4em 0 10em;
}
.mapwth iframe{
	width: 100%;
	height: 450px;
	vertical-align:bottom;
}
@media screen and (max-width: 699px) {
	.mapwth iframe{
		height: 250px;
	}
}

/******************************
ご購入・お支払い方法
*******************************/
#business{
	font-family: 'Noto Sans JP', sans-serif;
	width: 100%;
	text-align: center;
	padding: 5em 0;
	position: relative;
	background: hsl(201, 100%, 95%);
	overflow: hidden;
}
h2.bsnstit{
	font-size: 1.8em;
	line-height: 135%;
	margin: 1em auto 1.8em;
}
h2.bsnstit span{
	color: hsl(193, 100%, 50%);
	margin-right: .2em;
}
dl.busicntct{
	margin: 3em auto;
}
dl.busicntct{
	font-size: .9em;
	line-height: 135%;
	text-align: left;
	margin: 3em auto;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}
dl.busicntct > dt{
	font-weight: bold;
	line-height: 135%;
}
dl.busicntct > dt:nth-of-type(odd){
	background: hsl(202, 100%, 90%);
}
dl.busicntct > dd{
	line-height: 175%;
}
dl.busicntct > dd:nth-of-type(odd){
	background: hsl(202, 100%, 90%);
}

@media screen and (max-width: 699px) {
	#business{
		padding: 3em 0;
	}
	dl.busicntct{
		font-size: 1.1em;
		flex-direction: column;
		margin: 3em auto 0;
	}
	dl.busicntct > dt{
		font-size: 1.3em;
		padding: 2em 6% .5em;
	}
	dl.busicntct > dd{
		line-height: 150%;
		padding: .5em 6% 2em;
	}
}
@media screen and (min-width: 700px) {
	dl.busicntct{
		flex-direction: column;
	}
	dl.busicntct > dt{
		font-size: 1.3em;
		padding: 2em 6% .5em;
	}
	dl.busicntct > dd{
		padding: .5em 6% 2em;
	}
}
@media screen and (min-width: 1200px) {
	dl.busicntct{
		width: 1000px;
		flex-direction: row;
	}
	dl.busicntct > dt{
		font-size: 1.3em;
		padding: 2rem 0 2rem 4rem;
		width: 40%;
	}
	dl.busicntct > dd{
		width: 60%;
		padding: 2rem 4rem 2rem 0;
	}
}


/******************************
フッター部分
*******************************/
footer[id^="mnft"]{
	text-align: center;
	line-height: 150%;
	width: 100%;
	padding: 0 1.5em;
	margin: auto;
	box-sizing: border-box;
	background: hsl(199, 93%, 95%);
}
footer[id^="mnft"] a{
	color: hsl(0, 0%, 0%);
	text-decoration: none;
}
dl.ftrcominf{
	font-weight: normal;
	text-align: left;
	margin: auto;
	display: inline-block;
	white-space: nowrap;
}

@media screen and (max-width: 699px) {
	footer[id^="mnft"]{
		padding: 0 6%;
	}
	#mnft .ctrlspc{
		padding: 4em 0 10em;
	}
	dl.ftrcominf{
		width: 100%;
		text-align: center;
		padding: 0 0 4em;
		display: block;
	}
	dl.ftrcominf dt img{
		width: 65%;
	}
	dl.ftrcominf dd{
		line-height: 135%;
		padding: 1em 0;
	}
}
@media screen and (min-width: 700px) {
	footer[id^="mnft"]{
		padding: 0 6%;
	}
	dl.ftrcominf{
		width: 350px;
		padding: 4em 0 8em;
	}
	dl.ftrcominf dt{
		text-align: center;
	}
	dl.ftrcominf dt img{
		width: 100%;
	}
	dl.ftrcominf dd{
		font-size: .8em;
		line-height: 135%;
		padding: 1em 2em;
	}
}
@media screen and (min-width: 1200px) {
	footer[id^="mnft"]{
		padding: 0;
	}
}

#page-top {
	font-size: .8em;
	width: 50px;
	height: 50px;
	line-height: 50px;
	position: fixed;
	right: 1em;
	bottom: 1em;
	z-index: 110;
}
#page-top a {
	width: 100%;
	color: hsl(0, 0%, 100%);
	text-align: center;
	text-decoration: none;
	background: hsl(193, 100%, 50%);
	border-radius: 50%;
	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: 1200px) {
}