:root {
	--color-white: #fff;
    --color-black: #000000;
    --color-yellow: #ffe33f;
    --font-size-14: 14px;
    --font-size-18: 18px;
    --font-size-23: 23px;
    --font-size-40: 40px;
    --font-size-46: 46px;
    --font-size-54: 54px;
    --font-size-26-sp: 3.46vw;
    --font-size-28-sp: 3.73vw;
    --font-size-30-sp: 4vw;
    --font-size-40-sp: 5.33vw;
    --font-size-46-sp: 6.13vw;
    --font-size-55-sp: 7.33vw;
}


@media (min-width: 770px){
	.sp{
		display: none;
	}
}

/********************
header
********************/
.header_block {
	background-image: url('../../img/howto/tekoki/bg.jpg');
	background-position: bottom center;
	background-size: 1280.5px auto;
	background-repeat: no-repeat;
	position: relative;
	background-color: var(--color-black);
	height: 800px;
}
.header_block .header_content {
	display: flex;
	justify-content: center;
	flex-direction: column;
}
.header_block .header_content picture {
	margin: 0 auto;
	width: 475px;
	padding-top: 55px;
}
.header_block .header_content h1 {
	text-align: center;
	font-size: var(--font-size-54);
	color: var(--color-white);
}
.header_block .header_content h1 span {
	font-size: var(--font-size-46);
}
.header_block2 {
	background: linear-gradient(to right,
    rgba(0, 125, 255, 0    )   0%,
    rgba(0, 125, 255, 0.24 )  10%,
    rgba(0, 125, 255, 0.40 )  25%,
    rgba(0, 125, 255, 0.40 )  75%,
    rgba(0, 125, 255, 0.24 )  90%,
    rgba(0, 125, 255, 0    ) 100%
	);
	padding: 25px 0;
}
.header_block2 .header_content {
	width: 670px;
	display: flex;
	justify-content: center;
	gap: 0 20px;
	margin: 0 auto;
}
.header_block2 .header_content picture {
	margin: 0 auto;
	width: 122px;
}
.header_block2 .header_content p {
	font-size: var(--font-size-14);
	color: var(--color-white);
	line-height: 2.25em;
	width: 528px;
}
@media only screen and (max-width:769px){
	.header_block {
		background-image: url('../../img/howto/tekoki/bg_sp.jpg');
		background-size: 100% auto;
		height: 137.77vw;
	}
	.header_block .header_content {
	}
	.header_block .header_content picture {
		margin: 0 auto;
		width: 63.33%;
		padding-top: 5.06vw;
	}
	.header_block .header_content h1 {
		font-size: var(--font-size-55-sp);
	}
	.header_block .header_content h1 span {
		font-size: var(--font-size-46-sp);
	}
	.header_block2 {
		padding: 4.66vw 0;
	}
	.header_block2 .header_content {
		width: 78.4%;
		display: block;
		margin: 0 auto;
	}
	.header_block2 .header_content picture {
		margin: 0 3% 0 0;
		width: 21.3vw;
		float: left;
	}
	.header_block2 .header_content p {
		font-size: var(--font-size-26-sp);
		line-height: 1.75em;
		width: 100%;
	}
}


/********************
Body
********************/
.howto_area {
	width: 670px;
	margin: 80px auto 100px auto;
}
.howto_title {
    font-size: var(--font-size-40);
    line-height: 1.5em;
    color: var(--color-white);
    font-weight: 700;
    text-align: center;
	margin: 0 0 50px 0;
}
h3.title_h3 {
	font-size: var(--font-size-23);
	color: var(--color-yellow);
	font-weight: 700;
	margin: 0 0 30px 1em;
	text-indent: -1em;
	text-wrap: auto;
}
h3.title_h3::before {
	content: "●";
}
.howto_blcok {
	width: 670px;
	margin: 0 auto;
}
.howto_blcok p {
	font-size: var(--font-size-18);
	line-height: 2.2em;
	margin: 0 0 1em 0;
	color: #fff;
}
.howto_blcok p strong {
	font-weight: 400;
	color: var(--color-yellow);
}
@media only screen and (max-width:769px){
	.howto_area {
		width: 83%;
		margin: 10.66vw auto 10.66vw auto;
	}
	.howto_title {
		font-size: var(--font-size-40-sp);
		margin: 0 0 3.2vw 0;
	}
	h3.title_h3 {
		font-size: var(--font-size-30-sp);
		margin: 0 0 4.66vw 1em;
	}
	#howto_contents .howto_blcok {
		width: 100%;
		margin: 0 auto 10%;
	}
	.howto_blcok p {
		font-size: var(--font-size-28-sp);
		margin: 0 0 10% 0;
		line-height: 1.75em;
	}
}

.img_area {
	padding: 7px 7px 7px 7px;
	background: linear-gradient(to right,
    #ffe33f 0%,
    #96ffb9 50%,
    #0082ff 100%);
	margin: 5% 0;
}

.img_area2 {
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
	gap: 34px 34px;
}
.img_area2 picture {
	width: 142px;
}
@media only screen and (max-width:769px){

	.img_area2 {
		gap: 2vw 2vw;
	}
	.img_area2 picture {
		width: 18vw;
	}
}


body#howto_oil main.main_block > section > .item_block_top {
	width: 27.26%;
	margin: 10% auto 0 auto;
}
body#howto_oil main.main_block > section > .item_block_bottom {
	width: 27.26%;
	margin: 0 auto 10% auto;
}
body#howto_oil main.main_block > section > .item_block {
	width: 51.83%;
	margin: 0 auto 0 auto;
	background-image: linear-gradient(150deg, #0AF 1.02%, #01AAFD 34.33%, #08ACF9 47.06%, #14B0F1 55.88%, #25B6E6 62.74%, #3BBDD7 68.61%, #56C6C5 73.51%, #77D1AF 78.41%, #9CDE96 83.31%, #C7EC79 87.22%, #F5FB5B 90.16%, #FF5 91.14%, #FF8200 98.98%);
	background-size: 100% auto;
	background-repeat: no-repeat;
	background-position: center top;
	padding: 0.5%;
}
body#howto_oil main.main_block > section > .item_block > .item_block_waku {
	width: 100%;
	background-color: #000;
}
body#howto_oil main.main_block > section > .item_block > .item_block_waku > .item_block_area {
	background-image: linear-gradient(145deg, rgba(10, 170, 255, 0.5) 0%, rgba(3, 171, 252, 0.5) 11%, rgba(14, 174, 245, 0.5) 21%, rgba(33, 181, 232, 0.5) 31%, rgba(59, 189, 215, 0.5) 41%, rgba(93, 201, 192, 0.5) 50%, rgba(134, 214, 165, 0.5) 59%, rgba(183, 231, 132, 0.5) 68%, rgba(255, 130, 0, 0.5) 100%),url('../img/products/item_box_bg1.webp'),url('../img/products/item_box_bg2.webp');
	background-position: left top, right top,left bottom;
	background-size: 100% auto;
	background-repeat: repeat,no-repeat,no-repeat;
	display: flex;
	justify-content: space-between;
	width: 100%;
	position: relative;
}

body#howto_oil main.main_block > section > .item_block > div > div > figure {
	display: block;
	width: 30.25%;
	margin: 7% 0 0 0;
}
body#howto_oil main.main_block > section > .item_block > div > div > figure figcaption {
	display: none;
}
body#howto_oil main.main_block > section > .item_block > div > div > figure img {
	width: 100%;
}
body#howto_oil main.main_block > section > .item_block > div > div > div {
	width: 68%;
	margin: 7% 1% 7% 0;
}
body#howto_oil main.main_block > section > .item_block > div > div > div > h1 {
	font-size: 1.71vw;
	color: #fff;
	text-shadow:
	1px 1px 10px #007dff,
	-1px 1px 10px #007dff,
	1px -1px 10px #007dff,
	-1px -1px 10px #007dff;
}
body#howto_oil main.main_block > section > .item_block > div > div > div > div {
	display: flex;
	justify-content: end;
	margin: 3% 10% 0 0;
}
body#howto_oil main.main_block > section > .item_block > div > div > div > div p {
	color: #fff;
	font-size: 1.14vw;
	text-shadow:
	1px 1px 10px #007dff,
	-1px 1px 10px #007dff,
	1px -1px 10px #007dff,
	-1px -1px 10px #007dff;
	margin: 0 0 0 5%;
}
body#howto_oil main.main_block > section > .item_block > div > div > div > h2 {
	color: #fff;
	font-size: 1.14vw;
	margin: 5% 0 0 0;
}
body#howto_oil main.main_block > section > .item_block > div > div > div > ul {
	margin: 2% 0 0 1.5em;
	list-style-type: disc;
}
body#howto_oil main.main_block > section > .item_block > div > div > div > ul > li {
	color: #fff;
	font-size: 0.85vw;
	margin: 0 0 0.75em 0;
}
body#howto_oil main.main_block > section > .item_block > div > div > div > ul.bt_wrap {
	margin: 5% 0 0 0;
	list-style-type: none;
	display: flex;
	justify-content: flex-start;
}
body#howto_oil main.main_block > section > .item_block > div > div > div > ul.bt_wrap > li {
	margin: 0 0 0 0;
	width: 50%;
	height: auto;
}
body#howto_oil main.main_block > section > .item_block > div > div > div > ul.bt_wrap > li > a {
    display: inline-block;
    width: 100%;
	padding: 21% 0 0 0;
    background-size: cover;
    transition: background-image 0.3s ease;
	text-indent: -99999px;
}
body#howto_oil main.main_block > section > .item_block > div > div > div > ul.bt_wrap > li > a.jexonline {
    background-image: url("../../img/products/self/buy_btn1.webp");
}
body#howto_oil main.main_block > section > .item_block > div > div > div > ul.bt_wrap > li > a.jexonline:hover {
    background-image: url("../../img/products/self/buy_btn1_hover.webp");
}
body#howto_oil main.main_block > section > .item_block > div > div > div > ul.bt_wrap > li > a.amazon {
    background-image: url("../../img/products/self/buy_btn2.webp");
}
body#howto_oil main.main_block > section > .item_block > div > div > div > ul.bt_wrap > li > a.amazon:hover {
    background-image: url("../../img/products/self/buy_btn2_hover.webp");
}
@media only screen and (max-width:769px){
	body#howto_oil main.main_block > section > .item_block_top {
		width: 47.26%;
		margin: 10% auto 0 auto;
	}
	body#howto_oil main.main_block > section > .item_block_bottom {
		width: 47.26%;
		margin: 0 auto 10% auto;
	}
	body#howto_oil main.main_block > section > .item_block {
		width: 89.33%;
		padding: 0.75%;
	}
	body#howto_oil main.main_block > section > .item_block > .item_block_waku {
	}
	body#howto_oil main.main_block > section > .item_block > .item_block_waku > .item_block_area {
		flex-wrap: wrap;
		flex-direction: column;
		padding: 0 0 5% 0;
	}
	body#howto_oil main.main_block > section > .item_block > div > div > figure {
		display: block;
		width: 100%;
		margin: 24% 0 0 0;
	}
	body#howto_oil main.main_block > section > .item_block > div > div > figure figcaption {
		display: block;
		font-size: 5.73vw;
		color: #007dff;
		text-align: center;
		text-shadow:
		5px 5px 10px #fff,
		-5px 5px 10px #fff,
		5px -5px 10px #fff,
		-5px -5px 10px #fff;
	}
	body#howto_oil main.main_block > section > .item_block > div > div > figure img {
		width: 51.73%;
		margin: 0 auto 0 auto;
	}
	body#howto_oil main.main_block > section > .item_block > div > div > div {
		width: 100%;
		margin: 0 0 0 0;
	}
	body#howto_oil main.main_block > section > .item_block > div > div > div > h1 {
		font-size: 5.33vw;
		text-align: center;
	}
	body#howto_oil main.main_block > section > .item_block > div > div > div > h1 span::before {
		content: '\A';
		white-space: pre;
	}
	body#howto_oil main.main_block > section > .item_block > div > div > div > div {
		display: flex;
		justify-content: center;
		margin: 3% 0 0 0;
	}
	body#howto_oil main.main_block > section > .item_block > div > div > div > div p {
		font-size: 3.46vw;
		margin: 0 5% 0 5%;
	}
	body#howto_oil main.main_block > section > .item_block > div > div > div > h2 {
		font-size: 4vw;
		margin: 5% 0 0 8%;
	}
	body#howto_oil main.main_block > section > .item_block > div > div > div > ul {
		margin: 2% 8% 0 14%;
		width: 77%;
	}
	body#howto_oil main.main_block > section > .item_block > div > div > div > ul > li {
		font-size: 2.93vw;
		margin: 0 0 0.75em 0;
	}
	body#howto_oil main.main_block > section > .item_block > div > div > div > ul.bt_wrap {
		width: 100%;
	}
	body#howto_oil main.main_block > section > .item_block > div > div > div > ul.bt_wrap > li {
		width: 50%;
		height: auto;
	}
}