@charset "UTF-8";

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

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

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

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

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

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

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

/*-----------------------------------------------------------------------------------------
10000 ----------
10001 TYPO
10002 ol
10003 blockquote
10004 dl.banner
10005 ul.gallery
10006 dl.face
10007 dl.tgtg / 使用：company


20000 ----------
20001 blockquote


30000 ----------
30001 .color-blue


----------------------------------------------------------------------------------------- */










/*-----------------------------------------------------------------------------------------
10001 TYPO
----------------------------------------------------------------------------------------- */
article p {
	font-size: 1.8rem;
	line-height: 1.8;
	color: var(--color-font);
	padding: 0;
	margin: 0 0 1.0em 0
}

article p a {
	text-decoration:underline;
	font-weight:600;
}

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

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

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

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

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

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

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










h2.lead {
	font-size: 2.5rem;
	color: var(--color-font);
	line-height: 1.7;
	font-weight: 600;
	padding: 1.5em;
	margin: 1.5em 0;
	background: #f7f7f7;
	border: 3px solid var(--color-font)
}

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

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

@media screen and (max-width: 1133px) {
	h2.lead {
		font-size:calc( 2.5vw * 1.2);
		text-align:left !important;
		padding: 1.0em;
	}
}

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

@media screen and (max-width: 670px) {
	h2.lead {
		font-size:calc( 2.5vw * 1.4);
	}
}

@media screen and (max-width: 500px) {
	h2.lead {
		font-size:calc( 2.5vw * 1.7);
	}
}

@media screen and (max-width: 400px) {
	h2.lead {
		font-size:calc( 2.5vw * 1.9);
	}
}










h3 {
	font-size:6.0rem;
	line-height:1.3;
	font-weight:600;
	text-align:center;
	padding:0;
	margin:2em 0 0.75em 0;
	color:var(--color-font);
	position:relative;
	letter-spacing: 0.1em;
	text-indent:0.1em;
}

h3::after {
	content:'・・・・・';
	display:block;
	letter-spacing: -0.5em;
	text-indent: -0.5em;
	font-size:0.6em;
	margin-top:0.25em;
	color:var(--color-font);
	opacity:0.4;
}

h3 span,
h3 small {
	display:block;
}

h3 small {
	font-size:0.4em;
	font-weight:400;
}

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

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

@media screen and (max-width: 1133px) {
	h3 {
		font-size:calc( 6.0vw * 1.0);
		letter-spacing: 0;
		/* line-height:1.3;
		font-weight:600;
		text-align:center;
		padding:0;
		margin:2em 0 0.75em 0;
		color:var(--color-font);
		position:relative;

		text-indent:0.1em; */
	}

	h3::after {
		/* content:'・・・・・';
		display:block;
		letter-spacing: -0.5em;
		text-indent: -0.5em;
		font-size:0.6em;
		margin-top:0.25em;
		color:var(--color-font);
		opacity:0.4; */
	}

	h3 span,
	h3 small {
		/* display:block; */
	}

	h3 small {
		/* font-size:0.4em;
		font-weight:400; */
	}
}

@media screen and (max-width: 840px) {
	h3 {
	font-size:calc( 6.0vw * 1.1);
}
}

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

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

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










article h4 {
	font-size: 3.0rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-indent: -0.1em;
	position: relative;
	padding: 0.5em 0;
	margin: 2em 0 0.5em 0;
	letter-spacing: 0.1em;
	color:var(--color-font);
	align-items : center;
	display : flex;
	flex-wrap : wrap;
}

article h4::before {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	display: block;
	background: #ccc;
	width: 100%;
	height: 4px;
}

article h4::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	display: block;
	background: var(--color-font);
	width: 25%;
	height: 4px;
}

article h4 span {
	display:block;
	heigth:100%;
	width:calc( 100% - 6em );
}
article h4 small {
	display:block;
	background:var(--color-font);
	color:white;
	height:100%;
	font-size:0.5em;
	padding:0.3em 0.5em;
	margin:0 1em -0.3em 0;
	font-weight:400;
	border-radius:0.2em;
	width:6em;
	text-align:center;
	text-indent:0.5em;
}

article h4.second  span {
	width:auto;
}
article h4.second  small {
	width:auto;
	margin-left:1em;
	margin-right:0
}

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

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

@media screen and (max-width: 1133px) {
	article h4 {
		font-size: calc( 3.0rem * 1.0);
		letter-spacing: 0;
		/* font-weight: 600;
		letter-spacing: 0.05em;
		text-indent: -0.1em;
		position: relative;
		padding: 0.5em 0;
		margin: 2em 0 0.5em 0;
		color:var(--color-font);
		align-items : center;
		display : flex;
		flex-wrap : wrap; */
	}

	article h4::before {
		/* content: '';
		position: absolute;
		bottom: 0;
		left: 0;
		display: block;
		background: #ccc;
		width: 100%;
		height: 4px; */
	}

	article h4::after {
		/* content: '';
		position: absolute;
		bottom: 0;
		left: 0;
		display: block;
		background: var(--color-font);
		width: 25%;
		height: 4px; */
	}

	article h4 span {
		/* display:block;
		heigth:100%;
		width:calc( 100% - 6em ); */
	}
	article h4 small {
		/* display:block;
		background:var(--color-font);
		color:white;
		height:100%;
		font-size:0.5em;
		padding:0.3em 0.5em;
		margin:0 1em -0.3em 0;
		font-weight:400;
		border-radius:0.2em;
		width:6em;
		text-align:center;
		text-indent:0.5em; */
	}

	article h4.second  span {
		/* width:auto; */
	}
	article h4.second  small {
		/* width:auto;
		margin-left:1em;
		margin-right:0 */
	}
}

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

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

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

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










article h5 {
	font-size: 2.1rem;
	font-weight: 600;
	color: var(--color-font);
	padding: 0;
	margin: 2.0em 0 0.5em 0
}

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

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

@media screen and (max-width: 1133px) {
	article h5 {
		font-size: calc( 2.1rem * 1.0);
	}
}

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

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

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

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










article h6 {
	font-size: 2.1rem;
	font-weight: 600;
	color: var(--color-font);
	padding: 0;
	margin: 2.0em 0 0.5em 0
}

article h6::before {
	content: '■'
}

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

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

@media screen and (max-width: 1133px) {
	article h6 {
		font-size: calc( 2.1rem * 1.0 );
	}
}

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

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

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

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










/*-----------------------------------------------------------------------------------------
10002 ol
----------------------------------------------------------------------------------------- */
article ol {
	padding: 0;
	margin: 1.5rem 0;
	border: 0pt solid red;
}

article ol li {
	padding: 0;
	margin: 0 0 0.5em 1.6em;
	font-size: 1.8rem;
	line-height: 1.7;
	color: var(--color-font);
	list-style: none;
}

article ol li:last-child {
	margin-bottom: 0;
}

article ol.list-style-num li {
	list-style: decimal !important;
}

article ol.list-style-ari li {
	list-style: disc;
}

article ol.arrow li,
article ol.check li,
article ol.check-kuro li,
article ol.shikaku li,
article ol.maru li {
	list-style-type: none;
	margin-left: 0;
	text-indent: -1.4em;
	margin-left: 1em;
}

article ol.arrow li::before,
article ol.check li::before,
article ol.check-kuro li::before,
article ol.shikaku li::before,
article ol.maru li::before {
	content: '\f0da';
	font-family: "Font Awesome 6 Free";
	font-weight: 600;
	padding-right: 0.4em;
}

article ol.check li::before {
	content: '\f00c';
}

article ol.check-kuro li::before {
	content: '\f058';
}

article ol.shikaku li::before {
	content: '\f0c8';
}

article ol.maru li::before {
	content: '\f192';
}

article ol.arrow {
	padding-left: 0.6em
}

article ol.arrow,
article ol.check,
article ol.check-kuro,
article ol.shikaku,
article ol.maru {
	padding-left: 1.0em
}

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

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

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

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

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

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

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










/*-----------------------------------------------------------------------------------------
10003 blockquote
----------------------------------------------------------------------------------------- */
article blockquote {
	font-size: 1.8rem;
	line-height: 1.8;
	padding: 3.0em;
	margin: 1.5em 0;
	background: #f7f7f7;
	border: 1px solid #eee
}

article blockquote *:first-child {
	margin-top: 0;
}

article blockquote *:last-child {
	margin-bottom: 0;
}

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

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

@media screen and (max-width: 1133px) {
	article blockquote {
		padding: 3.0en 2.0em;
	}
}

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

@media screen and (max-width: 670px) {
	article blockquote {
		padding: 2.0em 1.5em;
	}
}

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

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










/*-----------------------------------------------------------------------------------------
10004 dl.banner / 使用：station
----------------------------------------------------------------------------------------- */
dl.banner {
justify-content : center;
align-items : center;
display : flex;
flex-wrap : wrap;
padding:0;
margin:0 auto;
max-width:420px;
}

dl.banner dt,
dl.banner dd {
	padding:1.5rem;
	margin:0;
	width:65%;
	justify-content : center;
	align-items : center;
	display : flex;
	flex-wrap : wrap;
}

dl.banner dd {
	width:35%;
}

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

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

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

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

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

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

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










/*-----------------------------------------------------------------------------------------
10005 ul.gallery
----------------------------------------------------------------------------------------- */
ul.gallery {
	background:transparent;
	display : flex;
	flex-wrap : wrap;
	padding:0;
	margin:0 auto;
	border:0pt solid purple;
}

ul.gallery li {
	width:50%;
	border:none;
	padding:0.5rem;
	margin:0;
	line-height:1.6;
}

ul.gallery li span {
	display:block;
	font-size:1.6rem;
	margin:0.5em 0;
	color:var(--color-font);
}

ul.gallery li span::before {
	content:'・'
}

ul.gallery li small {
	font-size:0.9em;
}

ul.gallery li a {
	display:block;
	border:none;
	padding:0;
	margin:0;
}

ul.gallery li img {
	border:1px solid #ddd;
	padding:3px;
	background:white;
}

ul.gallery.single li {
	width:100%;
}

ul.gallery.double li {
	width:50%;
}

ul.gallery.triple li {
	width:33.33333%;
}

ul.gallery.fourth li {
	width:25%;
}

ul.gallery.fifth li {
	width:20%;
}

ul.gallery.sixth li {
	width:calc( 100% / 6 );
}

ul.gallery.seventh li {
	width:calc( 100% / 7 );
}

ul.gallery.eighth li {
	width:calc( 100% / 8 );
}

ul.gallery.narrow {
	width:75%;
}

ul.gallery.narrow li {
	padding:1.5rem;
}

ul.gallery.logo figure {
	border:1px solid #ddd;
	widht:100%;
	height:100%;
	justify-content : center;
	align-items : center;
	display : flex;
	flex-wrap : wrap;
	padding:0.5rem 1.5rem;
	margin:0;
	background:white;
}

ul.gallery.logo img {
	border:none;
	background:transparent;
}

ul.gallery.center {
justify-content : center;
}

ul.gallery.beaf li {
	position:relative;
	z-index:1;
	padding:1.0rem;
}

ul.gallery.beaf span {
	background:var(--color-font);
	color:white;
	position:absolute;
	z-index:2;
	top:1.5em;
	left:0.5em;
	display:block;
	padding:0.25em 1.5em;
	margin:0;
	font-size:1.4rem;
	box-shadow: 0.25em 0.25em 0.5em rgba(0, 0, 0, 0.4);
	font-family: 'Jost' , sans-serif;
	letter-spacing: 0.1em;
	font-weight:600;
}

ul.gallery.beaf span::before {
	display:none;
}

ul.gallery.beaf li.after span {
	background:#999;
}

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

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

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

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

@media screen and (max-width: 670px) {
	ul.gallery.narrow {
		width:100%;
	}

	ul.gallery.narrow li {
		padding:0.5rem;
	}
}

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

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










/*-----------------------------------------------------------------------------------------
10006 dl.face / 使用：reform
----------------------------------------------------------------------------------------- */
dl.face {
	display: flex;
	flex-wrap: wrap;
	font-size: 2.7rem;
	color: var(--color-font);
	line-height: 1.3;
	font-weight: 600;
	padding: 3.0rem;
	margin: 0;
	background: #f9f9f9;
	height: 100%;
}

dl.face dt,
dl.face dd {
	font-size: 2.5em;
	width: 1em;
	padding: 0;
	margin: 0;
	color: inherit;
	line-height: inherit;
	font-weight: inherit;
}

dl.face dd {
	font-size: 1em;
	width: Calc(100% - 2.5em);
	padding: 0.25em 1em;
}

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

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

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

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

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

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

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










/*-----------------------------------------------------------------------------------------
10007 dl.tgtg / 使用：company
----------------------------------------------------------------------------------------- */
dl.tgtg {
	border:0pt solid red;
	padding:0;
	margin:0;
	justify-content : center;
	align-items : flex-start;
	display : flex;
	flex-wrap : wrap;
}

dl.tgtg dt,
dl.tgtg dd {
	border:0pt solid green;
	padding:0;
	margin:0;
	width:60%;
	position:relative;
}

dl.tgtg dt {
	z-index:-1;
}

dl.tgtg dd {
	width:60%;
	margin-left:-20%;
	z-index:0;
	background:rgba(255, 255, 255, 0.9);
	padding:6.0rem 4.5rem;
	margin-top:3.0rem;
	box-shadow: 1.5rem 1.5rem 1.5rem rgba(100, 100, 100, 0.1)
}

dl.tgtg .nakami {
padding:0;
margin:0;
}

dl.tgtg h2 {
	color:var(--color-font);
	font-size:6.0rem;
	ppadding:0;
	margin:0;
	line-height:1.3;
}

dl.tgtg h2  small,
dl.tgtg h2  span {
	display:block;
	padding:0;
	margin:0.25em 0
}

dl.tgtg h2 small {
	font-size:2.1rem;
	letter-spacing: 0.1em;
	font-weight:600;
}

dl.tgtg h2 span {
font-family: "YuMincho", "Yu Mincho", "游明朝", "Hiragino Mincho ProN", "Hiragino Mincho Pro", serif;
font-weight:600;
}

dl.tgtg p {
	font-size:1.8rem;
	line-height:2;
	letter-spacing: 0.1em;
}

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

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

@media screen and (max-width: 1133px) {
	dl.tgtg {
		/* border:10pt solid red; */
		/* padding:0;
		margin:0;
		justify-content : center;
		align-items : flex-start;
		display : flex;
		flex-wrap : wrap; */
	}

	dl.tgtg dt,
	dl.tgtg dd {
		/* border:0pt solid green;
		padding:0;
		margin:0;
		width:60%;
		position:relative; */
		width:100%;
	}

	dl.tgtg dt {
		/* z-index:-1; */
	}

	dl.tgtg dd {
		/* width:60%; */
		/* margin-left:-20%; */
		margin-left:0;
		/* border:10pt solid green; */
		padding:3.0rem;
		margin:-6.0rem auto 0;;
		width:90%;

		/* z-index:0;
		background:rgba(255, 255, 255, 0.9);
		padding:6.0rem 4.5rem;
		margin-top:3.0rem;
		box-shadow: 1.5rem 1.5rem 1.5rem rgba(100, 100, 100, 0.1) */
	}

	dl.tgtg .nakami {
	/* padding:0;
	margin:0; */
	}

	dl.tgtg h2 {
		/* color:var(--color-font); */
		font-size:calc( 6.0vw * 1.2 );
		/* ppadding:0; */
		/* margin:0; */
		/* line-height:1.3; */
	}

	dl.tgtg h2  small,
	dl.tgtg h2  span {
		/* display:block;
		padding:0;
		margin:0.25em 0 */
	}

	dl.tgtg h2 small {
		font-size:calc( 2.1vw * 1.2 );
		/* letter-spacing: 0.1em; */
		/* font-weight:600; */
	}

	dl.tgtg h2 span {
	/* font-family: "YuMincho", "Yu Mincho", "游明朝", "Hiragino Mincho ProN", "Hiragino Mincho Pro", serif; */
	/* font-weight:600; */
	}

	dl.tgtg p {
		font-size:1.8rem;
		/* line-height:2; */
		/* letter-spacing: 0.1em; */
	}

}

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

@media screen and (max-width: 670px) {
	dl.tgtg h2 {
		font-size:calc( 6.0vw * 1.4 );
	}

	dl.tgtg h2 small {
		font-size:calc( 2.1vw * 1.4 );
	}
}

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

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










/*-----------------------------------------------------------------------------------------
10008 ul.card-2 / 使用：gas
----------------------------------------------------------------------------------------- */
ul.card-2 {
	background:transparent;
	display : flex;
	justify-content : space-between;
	display : flex;
	flex-wrap : wrap;
	padding:0;
	margin:3.0rem auto;
	border:0pt solid orange
}

ul.card-2 li {
	width:calc( 33.33333% - 1.5rem - 1.5rem);
	border:none;
	padding:0;
	margin:5px 0;
	line-height:1.6;
}

ul.card-2 dl{
	border:0pt solid green;
	width:100%;
	height:100%;
}

ul.card-2 dl dt {
	padding:0 0 1.5rem 0;
	margin:0;
	font-size:2.5rem;
	font-weight:600;
	line-height:1.4;
	color:var(--color-font);
	border-bottom:2px solid var(--color-font);
}

ul.card-2 dl dd {
	padding:1.5rem 0 0 0 ;
	margin:0;
	font-size:1.8rem;
	line-height:1.7;
	color:var(--color-font);
}

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

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

@media screen and (max-width: 1133px) {
	ul.card-2 {
		/* background:transparent;
		display : flex;
		justify-content : space-between;
		display : flex;
		flex-wrap : wrap;
		padding:0; */
		/* margin:3.0rem auto; */
		/* border:10pt solid orange */
	}

	ul.card-2 li {
		width:100%;
		/* border:none; */
		/* padding:0; */
		margin:3.0rem 0;
		/* line-height:1.6; */
	}

	ul.card-2 dl{
		/* border:0pt solid green;
		width:100%;
		height:100%; */
	}

	ul.card-2 dl dt {
		/* padding:0 0 1.5rem 0; */
		/* margin:0; */
		font-size:2.5rem;
		/* font-weight:600; */
		/* line-height:1.4; */
		/* color:var(--color-font); */
		/* border-bottom:2px solid var(--color-font); */
		background:var(--color-blue-dark);
		color:white !important;
		padding:0.5em 1em
	}

	ul.card-2 dl dd {
		/* padding:1.5rem 0 0 0 ; */
		/* margin:0; */
		font-size:1.8rem;
		/* line-height:1.7; */
		/* color:var(--color-font); */
	}
}

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

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

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

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
















































/*-----------------------------------------------------------------------------------------
20001 business
----------------------------------------------------------------------------------------- */

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

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

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

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

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

@media screen and (max-width: 500px) {
	.page-business ul.gallery.double li,
	.page-business ul.gallery.triple li {
		width:100%;
	}
}

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










/*-----------------------------------------------------------------------------------------
20002 company
----------------------------------------------------------------------------------------- */

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

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

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

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

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

@media screen and (max-width: 500px) {
	.page-company ul.gallery.double li {
		width:100%;
	}
}

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










/*-----------------------------------------------------------------------------------------
20003 contact
----------------------------------------------------------------------------------------- */

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

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

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

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

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

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

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










/*-----------------------------------------------------------------------------------------
20004 delivery
----------------------------------------------------------------------------------------- */

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

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

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

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

@media screen and (max-width: 670px) {
	.page-delivery ul.gallery.triple li {
		width:100%;
	}
}

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

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











/*-----------------------------------------------------------------------------------------
20005 gas
----------------------------------------------------------------------------------------- */

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

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

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

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

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

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

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










/*-----------------------------------------------------------------------------------------
20006 pp
----------------------------------------------------------------------------------------- */

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

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

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

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

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

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

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










/*-----------------------------------------------------------------------------------------
20007 reform
----------------------------------------------------------------------------------------- */

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

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

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

@media screen and (max-width: 840px) {
	.page-reform ul.gallery.double li {
		width:100%;
	}
}

@media screen and (max-width: 670px) {
	.page-reform ul.gallery.sixth li {
		width:33.33333%;
	}
}

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

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










/*-----------------------------------------------------------------------------------------
20008 social
----------------------------------------------------------------------------------------- */

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

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

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

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

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

@media screen and (max-width: 500px) {
	.page-social ul.gallery.triple li {
		width:100%;
	}
}

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










/*-----------------------------------------------------------------------------------------
20009 station
----------------------------------------------------------------------------------------- */

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

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

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

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

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

@media screen and (max-width: 500px) {
	.page-station ul.gallery.single li,
	.page-station ul.gallery.double li {
		width:100%;
	}

	.page-station ul.gallery.triple li {
		width:50%;
	}
	}

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










/*-----------------------------------------------------------------------------------------
20010 water
----------------------------------------------------------------------------------------- */

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

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

@media screen and (max-width: 1133px) {
	.page-water .col-03 {
		width:33.33333%;
	}

	.page-water .col-09 {
		width:66.66666%;
	}

	.page-water ul.gallery.fourth li {
		width:33.33333%;
	}
}

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

@media screen and (max-width: 670px) {
	.page-water ul.gallery.fourth li {
		width:50%;
	}
}

@media screen and (max-width: 500px) {
	.page-water .col-03 {
		width:100%;
	}

	.page-water .col-09 {
		width:100%;
	}
}

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





















/*-----------------------------------------------------------------------------------------
30001 .color-blue
----------------------------------------------------------------------------------------- */
.color-blue h2.lead {
	color: var(--color-key);
	border: 3px solid var(--color-key)
}

.color-blue h3::after {
	color:var(--color-key);
}

.color-blue article h4::before {
	background: #ddd;
}

.color-blue article h4::after {
	background: var(--color-blue);
}

.color-blue article h4 small {
	background:var(--color-blue-dark);
}

.color-blue .card-2 dt {
	color:var(--color-blue-dark);
	border-color:var(--color-blue-dark)
}

.color-blue ol.check-kuro li {
	color:var(--color-blue-dark);
}

.color-blue table.def {
	border-color:var(--color-blue-trance-dark);
}

.color-blue table.def th,
.color-blue table.def td {
	border-color:var(--color-blue-trance-dark);
}

.color-blue table.def th {
	background:var(--color-blue-trance-lite);
}


.color-blue ul.gallery.beaf span {
	background:var(--color-key);

}

.color-blue ul.gallery.beaf li.after span {
	background:var(--color-blue);
}

.color-blue dl.face i {
	color: var(--color-key);
}

.color-blue #form input[type="submit"] {
	background: var(--color-gradi-1);