@charset "utf-8";

@import url("https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@400;500&display=swap");


#declare {
	margin-bottom: 100px;
	margin-left: auto;
	margin-right: auto;
}

	/* クルンのちかい Oath of Clen */
	#declare h2 {
		margin: 0;
	}

	/* 取引適正化・料金透明化に向けた自己適合宣言 */
	#declare h3 {
		background-color: #6c6661;
		border-radius: 100vh;
		color: #fff;
		font-family: "Zen Maru Gothic", sans-serif;
		font-size: 34px;
		font-style: normal;
		font-weight: 500;
		line-height: 1.3;
		margin: .6em auto 0 auto;
		padding: .1em .65em .12em .65em;
		width: fit-content;
	}

		#declare h3 br {
			display: none;
		}

	#declare figure {
		margin: 1em auto 0 auto;
	}

		#declare figure img {
			display: block;
			margin: 0 auto 0 auto;
		}

		/* エネクル */
		#declare figure figcaption {
			margin: 1.5em auto 0 auto;
		}

	/* LPガス業界の商慣行を… */
	#declare > p {
		color: #000;
		font-family: "Zen Maru Gothic", sans-serif;
		font-size: 20px;
		font-style: normal;
		font-weight: 500;
		line-height: 1.8;
	}

		#declare > figure + p {
			margin-top: 1em;
		}

	/* 宣言1～5 */
	#declare ol {
		margin-left: auto;
		margin-right: auto;
		margin-top: 3em;
		padding: 2.5em 0 0 0;
		max-width: 785px;
	}

		/* clearfix */
		#declare ol::after {
			clear: both;
			content: '';
			display: block;
			font-size: 0;
			height: 0;
			visibility: hidden;
		}

		#declare li {
			aspect-ratio: 1 / 1;
			max-width: 455px;
			position: relative;
		}

			#declare li:nth-child(odd) {
				/*
				float: left;
				*/
				margin-left: 0;
				margin-right: auto;
			}

			#declare li:nth-child(even) {
				/*
				float: right;
				*/
				margin-left: auto;
				margin-right: 0;
			}

			/* 宣言1 */
			#declare li:nth-of-type(1){
			}

			/* 宣言2 */
			#declare li:nth-of-type(2) {
				margin-top: -26%;
			}

			/* 宣言3 */
			#declare li:nth-of-type(3) {
				margin-top: -16%;
			}

			/* 宣言4 */
			#declare li:nth-of-type(4) {
				margin-top: -30%;
			}

			/* 宣言5 */
			#declare li:nth-of-type(5) {
				margin-top: -14%;
			}

			/* 背景の円 */
			#declare li::before {
				aspect-ratio: 1 / 1;
				background-color: #ffeb39;
				border: 5.5px #fff solid;
				border-radius: 100vh;
				content: '';
				display: block;
				height: auto;
				left: 50%;
				opacity: .5;

				position: absolute;
				top: 50%;
				transform: translate(-50% ,-50%);
				width: 100%;
				z-index: -1;
			}

				/* 宣言1 */
				#declare li:nth-of-type(1)::before {
					margin-top: -8%;
				}

				/* 宣言2 */
				#declare li:nth-of-type(2)::before {
					margin-top: 0%;
				}

				/* 宣言3 */
				#declare li:nth-of-type(3)::before {
					margin-top: -9%;
				}

				/* 宣言4 */
				#declare li:nth-of-type(4)::before {
					margin-top: 6%;
				}

				/* 宣言5 */
				#declare li:nth-of-type(5)::before {
					margin-top: -7%;
				}

			#declare li p {
				color: #000;
				font-family: "Zen Maru Gothic", sans-serif;
				font-size: 16px;
				font-style: normal;
				font-weight: 500;
				/*
				letter-spacing: -.05em;
				*/
			}

			#declare li h4 + p {
				margin-top: 1.2em;
			}


/*===============================================
●画面の横幅が769px以上
===============================================*/
@media screen and (min-width : 769px ){

	#pc------------------------------------------- {
	}

	header .logo {
		display: none;
	}
	
	header .inner h1 img.logo_glay {
		display: block;
	}

	header .inner #gnav li.gnavli a {
		color: #5A554B;
	}

	header .inner #gnav li.gnavli li a {
		color: #fff;
	}

	main {
		margin-top: 85px;
	}

}



/*===============================================
●画面の横幅が768pxまで
===============================================*/
@media screen and (max-width:768px){

	/*===============================================
	●sp-tablet
	===============================================*/
	#sptablet------------------------------------------- {
	}

	main {
		margin-top: 14%;
	}

	#declare {
		margin-bottom: 5%;
		margin-left: 3%;
		margin-right: 3%;
	}

	/* 取引適正化・料金透明化に向けた自己適合宣言 */
	#declare h3 {
		font-size: 21px;
		padding: .3em .85em .32em .85em;
	}

		#declare h3 br {
			display: inline;
		}

		/* エネクル */
		#declare figure figcaption img {
			max-width: 50%;
		}

	/* LPガス業界の商慣行を… */
	#declare > p {
		font-size: 16px;
		text-align: justify;
	}

		#declare > p br {
			display: none;
		}

	/* 宣言1～5 */
	#declare ol {
		margin-top: 2.5em;
		padding: 1.5em 0 0 0;
	}

		#declare li:nth-child(odd) {
			margin-left: auto;
			margin-right: auto;
		}

		#declare li:nth-child(even) {
			margin-left: auto;
			margin-right: auto;
		}

		/* 宣言1 */
		#declare li:nth-of-type(1){
		}

			#declare li:nth-of-type(1)::before {
				/*
				margin-top: 6%;
				*/
			}

		/* 宣言2 */
		#declare li:nth-of-type(2) {
			margin-top: -9%;
		}

			#declare li:nth-of-type(2)::before {
				/*
				margin-top: 6%;
				*/
			}

		/* 宣言3 */
		#declare li:nth-of-type(3) {
			margin-top: 4%;
		}

			#declare li:nth-of-type(3)::before {
				/*
				margin-top: 3%;
				*/
			}

		/* 宣言4 */
		#declare li:nth-of-type(4) {
			margin-top: -14%;
		}

			#declare li:nth-of-type(4)::before {
				/*
				margin-top: 7%;
				*/
			}

		/* 宣言5 */
		#declare li:nth-of-type(5) {
			margin-top: 6%;
		}

			#declare li:nth-of-type(5)::before {
				/*
				margin-top: 2%;
				*/
			}

}



/*===============================================
●画面の横幅が430pxまで
===============================================*/
@media screen and (max-width:430px){

	/*===============================================
	●sp400
	===============================================*/
	#sp430------------------------------------------- {
	}

	#declare li {
		max-width: 375px;
	}

	#declare li h4 img {
		max-height: 150px;
	}

		/* 背景の円 */
		#declare li::before {
			border: 3px #fff solid;
		}

		/* 宣言1 */
		#declare li:nth-of-type(1){
		}

			#declare li:nth-of-type(1)::before {
				/*
				margin-top: 6%;
				*/
			}

		/* 宣言2 */
		#declare li:nth-of-type(2) {
			margin-top: -12%;
		}

			#declare li:nth-of-type(2)::before {
				/*
				margin-top: 6%;
				*/
			}

		/* 宣言3 */
		#declare li:nth-of-type(3) {
			margin-top: 5%;
		}

			#declare li:nth-of-type(3)::before {
				/*
				margin-top: 3%;
				*/
			}

		/* 宣言4 */
		#declare li:nth-of-type(4) {
			margin-top: -19%;
		}

			#declare li:nth-of-type(4)::before {
				/*
				margin-top: 7%;
				*/
			}

		/* 宣言5 */
		#declare li:nth-of-type(5) {
			margin-top: 8%;
		}

			#declare li:nth-of-type(5)::before {
				/*
				margin-top: 2%;
				*/
			}

	#declare li p {
		/*
		font-size: 13px;
		*/
		font-size: 3.3vw;
		letter-spacing: -.05em;
		line-height: 1.8;
	}

}



/*===============================================
●画面の横幅が320pxまで
===============================================*/
@media screen and (max-width:320px){
	/*===============================================
	●sp320
	===============================================*/
	#sp320------------------------------------------- {
	}
}



/*===============================================
●画面の横幅が481pxから768pxまで
===============================================*/
	@media screen and (min-width:481px) and (max-width:768px) {
	/*===============================================
	●tablet
	===============================================*/
	#tab------------------------------------------- {
	}
}