@charset "UTF-8";
/*------------------------------------------ reset */
#howto main {
	margin: 0;
	padding: 0;
	font: 13px/1.6 "Helvetica Neue", Arial, 'BIZ UDGothic', "Hiragino Kaku Gothic ProN", "Hiragino Sans", 'YuGothic','Yu Gothic UI', Meiryo, sans-serif;
	-webkit-text-size-adjust: 100%;
}
#howto main div {
	margin: 0;
	padding: 0;
}
#howto main p {
	margin: 1em 0;
	padding: 0;
}
#howto main ul {
	margin: 1em 0 1em 30px;
	padding: 0;
	list-style: disc none outside;
}
#howto main ol {
	margin: 1em 0 1em 30px;
	padding: 0;
	list-style: decimal none outside;
}
#howto main li {
	margin: 0;
	padding: 0;
}
#howto dl {
	margin: 1em 0;
	padding: 0;
}
#howto main *, main *:before, main *:after {
	box-sizing: content-box;
}
/*------------------------------------------ contents */
.block {
	display: block;
}
.pc {
	display: block;
}
.sp {
	display: none;
}
.bgBox {
	overflow: hidden;
}
#howto li {
	list-style: none;
}
#howto ul {
	margin: 0;
}
#howto a, #howto a:link {
	color: #000;
	text-decoration: none;
}
#howto p {
	margin: 0;
}
#gHeader {
	margin-bottom: 30px;
}
#gFooter {
	position: relative;
	z-index: 2;
}
#howto .mainVisual h1 {
	font-weight: bold;
	font-family: "Yu Mincho", "游明朝体" , "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", "sawarabi", serif;
	letter-spacing: 0.1em;
}
#howto h2 {
	margin-bottom: 17px;
	position: relative;
	font-family: "Yu Mincho", "游明朝体" , "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", "sawarabi", serif;
	font-size: 3.7rem;
	line-height: 1.3;
	letter-spacing: 0em;
	text-align: center;
	z-index: 2;
}
#howto .page03 h2 {
	margin-bottom: 35px;
}
#howto .page04 h2 {
	margin-bottom: 8px;
}
#howto h2 span {
	display: block;
}
#howto h2 .img {
	margin: 0 15px 0 18px;
	display: inline-block;
}
#howto h2 .img img {
	vertical-align: top;
}
#howto h2::after {
	width: 107px;
	height: 107px;
	display: inline-block;
	position: absolute;
	top: -10px;
	left: 50%;
	transform: translateX(-50%);
	border-radius: 50%;
	background-color: #fff;
	content: "";
	z-index: -1;
}
.lineBox {
	border: 1px solid #fff;
	border-image: linear-gradient(to right, #B38D4B, #F0D480, #B38D4B) 30 30;
}
#howto .comparedBox {
	margin-bottom: 72px;
	padding: 50px 50px 30px 45px;
	min-height: 885px;
	position: relative;
	background: url("../../../img/lp/howto_2024/compar_bg.jpg") no-repeat center / cover;
	box-sizing: border-box;
}
#howto .comparedBox .textBox {
	margin-bottom: 86px;
}
#howto .comparedBox .textBox p {
	font-family: 'BIZ UDGothic', sans-serif;
	font-size: 1.4rem;
	line-height: 2;
	text-align: center;
}
#howto .comparedBox .textBox .photo {
	width: 340px !important;
	top: 22px;
	left: 25px;
	position: absolute;
}
#howto .comparedBox .textBox .photo:last-of-type {
	top: 8px;
	left: auto;
	right: 8px;
}
#howto .tableBox {
	display: flex;
	justify-content: space-between;
}
#howto .tableBox table {
	margin: 0;
	width: 505px;
	border: none;
	border-spacing: 5px;
	border-collapse: inherit;
	box-sizing: border-box;
}
#howto .tableBox table th, #howto .tableBox table td {
	font-size: 1.4rem;
	vertical-align: middle;
	border: none;
	background-color: #fff;
}
#howto .tableBox table th {
	padding: 10px;
	width: 31%;
	text-align: center;
	background-image: linear-gradient(to right bottom, #AEB1B4, #EEE)
}
#howto .tableBox table.gold th {
	background-image: linear-gradient(to right bottom, #C2A36B, #FAE49B)
}
#howto .tableBox table td {
	padding: 23px 18px 19px;
}
#howto .tableBox table.gold td {
	padding-right: 50px;
}
#howto .tableBox td ul {
	margin: 0 0 0 1em;
}
#howto .tableBox td li {
	list-style: disc!important;
	text-indent: -1em;
	margin: 0;
	list-style-position: inside!important;
}


	#howto .element {
		position: absolute;
		top: 978px;
		left: 0;
		width: 100%;
		height: 0;
	}
	#howto .element .ribbon1 {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 0;
	}
	#howto .element .ribbon1::before {
		content: "";
		position: absolute;
		top: 0;
		left: -8.5%;
		width: calc(523 / 1200 * 100%);
		height: auto;
		aspect-ratio: 523 / 136;
		background: url(../../../img/lp/howto_2024/ribbon_01_shadow_pc.png) no-repeat top right / contain;
		z-index: 2;
		mix-blend-mode: multiply;
		pointer-events: none;
	}
	#howto .element .ribbon1::after {
		content: "";
		position: absolute;
		top: 0;
		left: -8.5%;
		width: calc(523 / 1200 * 100%);
		height: auto;
		aspect-ratio: 523 / 136;
		background: url(../../../img/lp/howto_2024/ribbon_01_pc.png) no-repeat top right / contain;
		z-index: 2;
		pointer-events: none;
	}
		#howto .element .ribbon2 {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 0;
	}
	#howto .element .ribbon2::before {
		content: "";
		position: absolute;
		top: 488px;
		right: -8.5%;
		width: calc(451 / 1200 * 100%);
		height: auto;
		aspect-ratio: 451 / 126;
		background: url(../../../img/lp/howto_2024/ribbon_02_shadow_pc.png) no-repeat top right / contain;
		z-index: 2;
		mix-blend-mode: multiply;
		pointer-events: none;
	}
	#howto .element .ribbon2::after {
		content: "";
		position: absolute;
		top: 488px;
		right: -8.5%;
		width: calc(451 / 1200 * 100%);
		height: auto;
		aspect-ratio: 451 / 126;
		background: url(../../../img/lp/howto_2024/ribbon_02_pc.png) no-repeat top right / contain;
		z-index: 2;
		pointer-events: none;
	}

#howto .marriage_ring {
	padding: 238.5px 80px;
	position: relative;
	background: url("../../../img/lp/howto_2024/marriage_ring_bg_pc.jpg") no-repeat left top /cover;
}
#howto .marriage_ring .wrap {
	position: absolute;
	top: 0;
	left: 761px;
	margin-top: 95px;
	width: 319px;
}
#howto .marriage_ring .wrap h3 {
	width: 100%;
	margin-top: 0;
}
#howto .marriage_ring .wrap .textBox {
	text-align: center;
}
#howto .marriage_ring .wrap .textBox h4 {
	margin: 25px auto 10px;
	font-weight: bold;
	font-size: 16px;
}
#howto .marriage_ring .wrap .textBox p {
	font-size: 14px;
}
#howto .marriage_ring .wrap a:hover {
	opacity: 0.7;
}
#howto .marriage_ring .wrap .textBox img {
	margin-top: 38px;
}





.tabBox {
	margin-bottom: 44px;
	padding-top: 17px;
	background: url("../../../img/lp/howto_2024/tab_bg.jpg") no-repeat center top /1400px;
}
#howto .tabBox ul {
	margin: 0 auto;
}
#howto .tabBox li {
	margin: 0;
	display: inline-block;
	color: #3E3E3E;
	font-family: "Yu Mincho", "游明朝体" , "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", "sawarabi", serif;
	font-size: 1.8rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	line-height: 1.75;
	cursor: pointer;
}
#howto .tabBox li span {
	padding: 0 39px 13px;
	letter-spacing: 0;
	position: relative;
}
#howto .tabBox li.on, #howto .tabBox li:hover {
	background-color: #fff;
	box-shadow: 0 -4px 5px rgba(0, 0, 0, 0.1);
}
#howto .tabBox li.on span::before, #howto .tabBox li:hover span::before {
	width: 100%;
	height: 2px;
	display: inline-block;
	position: absolute;
	left: 0;
	bottom: 0;
	background: -webkit-linear-gradient(to right, #B38D4B, #F0D480, #B38D4B);
	background: -moz-linear-gradient(to right, #B38D4B, #F0D480, #B38D4B);
	background: -ms-linear-gradient(to right, #B38D4B, #F0D480, #B38D4B);
	background: linear-gradient(to right, #B38D4B, #F0D480, #B38D4B);
	content: "";
}
#howto .page {
	margin-bottom: 62px;
	position: relative;
}
#howto .page:not(:first-of-type)::after {
	position: absolute;
	content: url(../../../img/lp/howto_2024/line03.png);
}
#howto .page > li {
	padding: 0 52px 33px;
	background: url("../../../img/lp/howto_2024/com_bg_pc.jpg") no-repeat center / cover;
}
#howto .page02 .innBox li {
	margin: 0;
}
#howto .page02 li:first-of-type {
	background: url("../../../img/lp/howto_2024/handshape_bg_pc.jpg") no-repeat center / cover;
}
#howto .page > li:first-of-type {
	padding: 0;
}
#howto .page > li:nth-of-type(4),
#howto .page > li:nth-of-type(5),
#howto .page > li#page03_2 {
	padding-bottom: 44px;
}
#howto .page > li:not(:last-of-type) {
	margin-bottom: 38px;
}
#howto .page .topBox {
	padding: 56px 52px 50px;
	position: relative;
	background: url("../../../img/lp/howto_2024/handshape_illust_01_pc.png") no-repeat 120px 44px, url("../../../img/lp/howto_2024/handshape_illust_02_pc.png") no-repeat 770px bottom;
}
#howto .topBox p {
	margin-bottom: 38px;
	font-size: 1.4rem;
	line-height: 1.75;
	text-align: center;
}
#howto .page03 h2 span {
	letter-spacing: -0.04em;
	line-height: 1;
	transform: translateY(4px);
}
#howto .topBox ul {
	position: relative;
	z-index: 2;
	text-align: center;
}
#howto .topBox li {
	margin: 0 5px;
	display: inline-block;
	background-color: #fff;
}
#howto .topBox li a {
	padding: 9px 48px 8px 30px;
	display: block;
	font-family: "Yu Mincho", "游明朝体" , "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", "sawarabi", serif;
	font-size: 1.8rem;
	font-weight: bold;
	letter-spacing: 0;
	background: #fff url("../../../img/lp/howto_2024/icon01.png") no-repeat right 10px center / 16px;
}
#howto .topBox li:last-of-type a {
	padding: 9px 40px 8px 20px;
}
#howto .topBox li a:hover {
	opacity: 0.7;
}
#howto .topBox::before {
	display: inline-block;
	position: absolute;
	bottom: -110px;
	left: -240px;
	content: url("../../../img/lp/howto_2024/line01.png");
	z-index: 1;
}
#howto .imgBox {
	display: flex;
}
#howto .imgBox .phoBox {
	padding-top: 25px;
	width: 404px;
}
#howto .imgBox .phoBox img {
	display: block;
}
#howto .imgBox .txtBox {
	margin: 100px 0 90px;
	width: 692px;
	font-size: 1.4rem;
	line-height: 1.71;
}
#howto .page > li:nth-of-type(4) .txtBox, #howto .page > li:nth-of-type(5) .txtBox {
	margin-bottom: 80px;
}
#howto .page04 .imgBox .txtBox {
	margin-bottom: 70px !important;
}
#howto .imgBox h3 {
	margin: 0 0 4px;
	font-family: "Yu Mincho", "游明朝体" , "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", "sawarabi", serif;
	font-size: 2.4rem;
	font-weight: bold;
	line-height: 2.16;
}
#howto .innBox {
	display: flex;
	justify-content: space-between;
}
#howto .innBox div {
	width: 533px;
}
#howto .innBox div .ttl {
	padding: 6px 20px;
	font-family: "Yu Mincho", "游明朝体" , "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", "sawarabi", serif;
	font-feature-settings: "palt";
	font-size: 1.8rem;
	font-weight: bold;
	letter-spacing: 0.1em;
	background: -webkit-linear-gradient(to right, #FAE49B, #C2A36D);
	background: -moz-linear-gradient(to right, #FAE49B, #C2A36D);
	background: -ms-linear-gradient(to right, #FAE49B, #C2A36D);
	background: linear-gradient(to right, #FAE49B, #C2A36D);
}
#howto .innBox div p {
	margin-bottom: 24px;
	font-size: 1.4rem;
	line-height: 1.5;
	letter-spacing: 0.02em;
}
#howto .innBox div ul {
	margin-top: auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
#howto .innBox div ul:after {
	width: 172px;
	content: "";
}
#howto .innBox div li {
	width: 171px;
}
#howto .innBox div li a {
	display: block;
	position: relative;
	box-sizing: border-box;
	z-index: 2;
}
#howto .innBox div li a::before {
	height: calc(100% + 2px);
	display: block;
	position: absolute;
	top: -1px;
	left: -1px;
	right: -1px;
	bottom: -1px; 
	background: -webkit-linear-gradient(to bottom, #F8E199, #D3B77C);
	background: -moz-linear-gradient(to bottom, #F8E199, #D3B77C);
	background: -ms-linear-gradient(to bottom, #F8E199, #D3B77C);
	background: linear-gradient(to bottom, #F8E199, #D3B77C);
	content: "";
	opacity: 0;
	z-index: -1;
}
#howto .innBox div li a:hover::before {
	opacity: 1;
}
#howto .innBox div li img {
	display: block;
}
#howto .page01 {
	margin-bottom: 82px;
}
#howto .page01 > li {
	background: none;
}
#howto .page01 h2 {
	margin-bottom: 25px;
	padding-top: 18px;
}
#howto .page01 h2 span {
	font-size: 3rem;
}
#howto .page01 h2 strong {
	display: inline-block;
	font-size: 4.6rem;
	font-weight: normal;
	transform: translateY(5px);
}
#howto .page01 .goldRings h2::after {
	display: none;
}
#howto .page03 .topBox li:last-of-type a {
	letter-spacing: 0.06em;
}
#howto .page03 .imgBox h3 {
	letter-spacing: 0.05em;
}
#howto .page04 {
	margin-bottom: 72px;
	;
}
#howto .page04 .imgBox {
	margin-bottom: -45px;
}
#howto .page04 #page04_1 .imgBox .txtBox {
	margin-top: 90px;
}
#howto .page04 #page04_3 .innBox li {
	width: 262px;
}
#howto .page04 #page04_3 {
	padding-bottom: 35px;
}
#howto .page04::after {
	bottom: -210px !important;
}
#howto .setring {
	padding-bottom: 20px;
}
#howto .setring .ttl {
	padding: 6px 20px;
	font-family: "Yu Mincho", "游明朝体" , "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", "sawarabi", serif;
	font-feature-settings: "palt";
	font-size: 1.8rem;
	font-weight: bold;
	letter-spacing: 0.1em;
	background: -webkit-linear-gradient(to right, #FAE49B, #C2A36D);
	background: -moz-linear-gradient(to right, #FAE49B, #C2A36D);
	background: -ms-linear-gradient(to right, #FAE49B, #C2A36D);
	background: linear-gradient(to right, #FAE49B, #C2A36D);
	z-index: 100;
	position: relative;

}
#howto .setring ul li {
	display: inline-block;
	width: 260px;
	margin: 27px 17px 0 0;
}
#howto .setring ul li:last-child {
	margin-right: 0;
}
#howto .setring ul li p {
	margin: 0 0 1em;
}

/* 736px以下用（SP用）の記述------------------------------------------- */
@media screen and (max-width: 736px) {

.wrap {
	margin: 0 15px;
}
.pc {
	display: none;
}
.sp {
	display: block;
}
#gHeader {
	margin-bottom: 0;
}
#howto h2 {
	margin-bottom: 17px;
	font-size: 1.85rem;
	line-height: 1;
	background:none;
}
#howto .page03 h2 {
	margin-bottom: 35px;
}
#howto .page04 h2 {
	margin-bottom: 8px;
}
#howto h2 .img {
	margin: 0 5px 0 10px;
	width: 35px;
}
#howto h2::after {
	width: 54px;
	height: 54px;
	top: 0;
}

#howto .mainVisual {
	background-image: url("../../../img/lp/howto_2024/panel_bg.jpg");
	background-position: center top;
	background-repeat: no-repeat;
	background-size: 100%;
	position: relative;
	padding-bottom: 136.53%;
}
#howto .mainVisual {
	background-image: url("../../../img/lp/howto_2024/panel_bg.jpg");
	background-position: center top;
	background-repeat: no-repeat;
	background-size: 100%;
	position: relative;
	padding-bottom: 136.53%;
}
#howto .mainVisual h1 {
	text-align: center;
	position: absolute;
	margin: 50.9% 0 0;
	top: 0;
	left: 0;
	width: 100%;
	font-size: 3.3vw;
}
#howto .mainVisual p {
	text-align: center;
	position: absolute;
	margin: 59% 0 0;
	top: 0;
	left: 0;
	width: 100%;
	font-size: 3vw;
	line-height: 1.5;
}
#howto .tabBox {
	margin-bottom: 15px;
	padding-top: 4%;
	background: url("../../../img/lp/howto_2024/tab_bg_sp.jpg") no-repeat left top / cover;
}
#howto .tabBox ul {
	margin: 0 15px;
	width: auto;
	display: flex;
	justify-content: space-between;
}
#howto .tabBox li {
	margin: 0;
	padding: 3% 0 4%;
	width: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.2rem;
	line-height: 1.21;
	cursor: inherit;
}
#howto .tabBox li span {
	padding: 0;
	text-align: center;
	letter-spacing: -0.05em;
	width: 95%;
}
#howto .tabBox li.on {
	position: relative;
}
#howto .tabBox li.on::after {
	border-bottom: 3px solid;
	border-image: linear-gradient(to right, #b48e4c, #fae089, #b48e4c) 1;
	bottom: 2%;
	left: 3%;
	content: '';
	width: 94%;
	position: absolute;
}
#howto .tabBox li.on:hover {
	background-color: #fff;
	box-shadow: 0 -4px 5px rgba(0, 0, 0, 0.1);
}
#howto .tabBox li:hover {
	background-color: inherit;
	box-shadow: none;
}
#howto .tabBox li.on span::before, #howto .tabBox li:hover span::before {
	display: none
}
#howto .comparedBox {
	margin-bottom: 0;
	padding: 15px 8px 13px;
	min-height: inherit;
	position: static;
	background: url("../../../img/lp/howto_2024/compar_bg_sp.jpg") no-repeat center / cover;
}
#howto .comparedBox .textBox {
	margin-bottom: 13px;
}
#howto .comparedBox .textBox .photoBox {
	margin: -30px 0 8px;
	display: flex;
	justify-content: space-between;
}
#howto .comparedBox .textBox .photo {
	width: 49% !important;
	position: static;
}
#howto .comparedBox .textBox p {
	font-size: 1.2rem;
	line-height: 1.58;
}
#howto .tableBox {
	display: flex;
	justify-content: space-between;
}
#howto .tableBox table {
	margin: 0;
	width: 48%;
	border-spacing: 5px;
}
#howto .tableBox table th, #howto .tableBox table td {
	float: left;
	width: 100% !important;
	font-size: 1.2rem;
	vertical-align: top;
	box-sizing: border-box;
}
#howto .tableBox table th {
	padding: 3px 3px 3px 10px;
	text-align: left;
	background-image: linear-gradient(to right, #AEB1B4, #EEE)
}
#howto .tableBox table.gold th {
	background-image: linear-gradient(to right, #C2A36B, #FAE49B)
}
#howto .tableBox table td {
	padding: 7px;
}
#howto .tableBox table.gold td {
	padding-right: 7px;
}
#howto .tableBox table.gold tr:nth-of-type(2) td {
	padding: 7px;
}


	#howto .element {
		position: relative;
		top: -8px;
		left: 0;
		width: 100%;
		height: 0;
	}
	#howto .element .ribbon1 {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 0;
	}
	#howto .element .ribbon1::before {
		content: "";
		position: absolute;
		top: 0;
		left: -4%;
		width: calc(572 / 720 * 100%);
		height: auto;
		aspect-ratio: 572 / 184;
		background: url(../../../img/lp/howto_2024/ribbon_01_shadow.png) no-repeat top right / contain;
		z-index: 2;
		mix-blend-mode: multiply;
		pointer-events: none;
	}
	#howto .element .ribbon1::after {
		content: "";
		position: absolute;
		top: 0;
		left: -4%;
		width: calc(572 / 720 * 100%);
		height: auto;
		aspect-ratio: 572 / 184;
		background: url(../../../img/lp/howto_2024/ribbon_01.png) no-repeat top right / contain;
		z-index: 2;
		pointer-events: none;
	}
	#howto .element .ribbon2 {
		position: absolute;
		top: calc(892 / 720 * 100vw);
		left: 0;
		width: 100%;
		height: 0;
	}
	#howto .element .ribbon2::before {
		content: "";
		position: absolute;
		top: 0;
		right: -8.5%;
		width: calc(480 / 720 * 100%);
		height: auto;
		aspect-ratio: 480 / 130;
		background: url(../../../img/lp/howto_2024/ribbon_02_shadow.png) no-repeat top right / contain;
		z-index: 2;
		mix-blend-mode: multiply;
		pointer-events: none;
	}
	#howto .element .ribbon2::after {
		content: "";
		position: absolute;
		top: 0;
		right: -8.5%;
		width: calc(480 / 720 * 100%);
		height: auto;
		aspect-ratio: 480 / 130;
		background: url(../../../img/lp/howto_2024/ribbon_02.png) no-repeat top right / contain;
		z-index: 2;
		pointer-events: none;
	}

#howto .marriage_ring {
	position: relative;
	margin-top: 12%;
	margin-bottom: 15%;
	padding: 117vw 0 0 0;
	background: url("../../../img/lp/howto_2024/marriage_ring_bg.jpg") no-repeat left top /cover;
}
#howto .marriage_ring .wrap {
	position: absolute;
	top: 0;
	left: 0;
	margin-top: calc(448 / 720 * 100%);
	margin-left: calc(109 / 720 * 100%);
	width: calc(517 / 720 * 100%);
}

#howto .marriage_ring .wrap h3 {
	width: calc(442 / 517 * 100%);
	margin: 0 auto;
	/* margin-top: 0; */
}
#howto .marriage_ring .wrap .textBox {
	/* text-align: center; */
}
#howto .marriage_ring .wrap .textBox h4 {
	margin: 2% auto;
	/* font-weight: bold; */
	font-size: 1.4rem;
}
#howto .marriage_ring .wrap .textBox p {
	font-size: 1.2rem;
}
#howto .marriage_ring .wrap .textBox img {
	margin-top: 6%;
}




#howto .topBox h2 {
	margin-bottom: 23px;
}
#howto .topBox h2 img {
	width: 31%;
}
#howto .topBox h2 span {
	margin-bottom: 8px;
}
#howto .page {
	margin-bottom: 42px;
}
#howto .page > li {
	padding: 10px 12px 18px;
	background: url("../../../img/lp/howto_2024/com_bg.jpg") no-repeat left top / cover;
}
#howto .page:not(:first-of-type)::after {
	right: -220px;
	bottom: -165px;
	transform: scale(0.5);
}
#howto .page > li:first-of-type {
	padding: 0;
}
#howto .page > li:nth-of-type(4), #howto .page > li:nth-of-type(5), #howto .page > li#page03_2 {
	padding-bottom: 18px;
}
#howto .page > li:not(:last-of-type) {
	margin-bottom: 16px;
}
#howto .page .topBox {
	padding: 15% 15px 10%;
	background: url("../../../img/lp/howto_2024/handshape_illust_01.png") no-repeat 25px 19px / 70px auto, url("../../../img/lp/howto_2024/handshape_illust_02.png") no-repeat right 5.3% top 5.8% / 130px auto;
}
#howto .page02 h2::after {
	margin-top: -5%;
	width: 54px;
	height: 54px;
	top: 0;
}
#howto .topBox p {
	margin-bottom: 30px;
	font-size: 1.2rem;
	line-height: 1.58;
}
#howto .topBox ul {
	margin: 0 -8px;
	text-align: left;
}
#howto .topBox li {
	display: block;
}
#howto .topBox li a {
	margin: 0;
	padding: 9px 30px 9px 13px !important;
	font-size: 1.2rem;
	background-size: 14px;
}
#howto .topBox li:not(:last-of-type) {
	margin-bottom: 7px;
}
#howto .topBox li a:hover {
	opacity: 1;
}
#howto .topBox::before {
	bottom: -150px;
	left: -245px;
	transform: scale(0.5);
}
#howto .imgBox {
	margin-bottom: 20px;
	display: block;
}
#howto .imgBox .phoBox {
	margin: 0 auto;
	padding-top: 0;
	width: 90%;
}
#howto .imgBox .txtBox {
	margin: 0;
	width: auto;
	font-size: 1.2rem;
	line-height: 1.5;
}
#howto .page > li:nth-of-type(4) .txtBox, #howto .page > li:nth-of-type(5) .txtBox {
	margin-bottom: 0;
}
#howto .page04 .imgBox .txtBox {
	margin-bottom: 0 !important;
}
#howto .imgBox h3 {
	margin: 0 0 4px;
	font-size: 1.5rem;
	line-height: 2.16;
}
#howto .innBox {
	display: block;
}
#howto .innBox div {
	width: auto;
}
#howto .innBox div:not(:last-of-type) {
	margin-bottom: 25px;
}
#howto .innBox div .ttl {
	padding: 4px 8px;
	font-size: 1.35rem;
}
#howto .innBox div p {
	margin-bottom: 10px;
	font-size: 1.2rem;
	letter-spacing: 0;
}
#howto .innBox div ul {
	margin-top: auto;
}
#howto .innBox div ul:after {
	width: 32.5%;
}
#howto .innBox div li {
	width: 32.5%;
}
#howto .innBox div li a:hover::before {
	background: none;
}
#howto .pane_topic_path {
	margin-bottom: 42px;
}
#howto .pane_topic_path li, #howto .pane_topic_path a {
	color: #717171;
}
#howto .pane_topic_path a:hover {
	text-decoration: underline;
}
#howto .page01 {
	margin-bottom: 27px;
}
#howto .page01 h2 {
	margin-bottom: 0;
	padding-top: 18px;
}
#howto .page01 h2 span {
	font-size: 1.5rem;
}
#howto .page01 h2 strong {
	font-size: 2.3rem;
	font-weight: 400;
	transform: translateY(5px);
}
#howto .page01 > li {
	background: none;
}
#howto .imgBox .phoBox img {
	margin: 0 auto;
	max-width: 410px;
}
#howto .page02 #page02_1 .phoBox {
	margin-bottom: 0;
}
#howto .page02 #page02_2 .phoBox {
	margin-bottom: -5%;
}
#howto .page02 #page02_4 .phoBox {
	margin-bottom: -5%;
}
#howto .page02 #page02_4 .phoBox img {
	transform: scale(0.92) translate(16px, 6px);
}
#howto .page03 .topBox {
	margin-bottom: 35px;
	padding-top: 30px;
}
#howto .page03 .topBox::before, #howto .page04 .topBox::before {
	bottom: -143px;
}
#howto .page03 .topBox h2 {
	margin-bottom: 35px;
}
#howto .page03 .topBox h2 span {
	letter-spacing: -0.02em;
}
#howto .page03 .topBox h2::after, #howto .page04 .topBox h2::after {
	top: -20px;
}
#howto .page03 .topBox h2 img {
	width: 24%;
}
#howto .page03 .topBox p {
	margin-bottom: 22px;
}
#howto .page03 > li, #howto .page04 > li {
	padding-top: 20px;
}
#howto .page04 .topBox {
	margin-bottom: 35px;
}
#howto .page04 .topBox h2 img {
	width: 18%;
}
#howto .page04 .topBox h2 {
	margin-bottom: 19px;
}
#howto .page04 .topBox p {
	margin-bottom: 20px;
}
#howto .page04 #page04_1 .imgBox .txtBox {
	margin-top: 0;
}
#howto .page04 .imgBox {
	margin-bottom: 20px;
}
#howto .page04 .imgBox .phoBox {
	margin-bottom: -30px;
}
#howto .page04 #page04_3 {
	padding-bottom: 18px;
}
#howto .page04 #page04_3 .innBox li {
	width: 49.3%;
}
#howto .page04::after {
	bottom: -165px !important;
}
#howto .setring .ttl {
	padding: 4px 8px;
	font-size: 1.35rem;
}

#howto .setring ul li {
	display: inline-block;
	width: 49%;
	margin: 0 2% 0 0;
}
#howto .setring ul li:nth-child(2n) {
	margin-right: 0;
}
#howto .setring ul li p {
	margin: 1em 0 ;
	font-size: 3.2vw;
}

/* 736px以下用（SP用）の記述 end--------------------------------------- */
}



@media screen and (max-width: 374px) {
	.mainVisual .mvBox p {
	margin: 0;
	font-size: 12px;
	line-height: 1.58;
}
#howto .tabBox li span {
	font-size: 1rem;
}
#howto .tabBox li:nth-of-type(3) {
	padding: 7px 5px 16px
}
}


/* 737px以上用（PC用）の記述------------------------------------------- */
@media screen and (min-width: 737px) {


.mainVisual {
	padding-top: 42px;
	min-height: 500px;
	position: relative;
	box-sizing: border-box;
	background: url("../../../img/lp/howto_2024/panel_bg_pc.jpg") no-repeat center top/1400px;
}
.mainVisual h1 {
	margin-top: 180px;
	margin-bottom: 18px;
	font-size: 1.8rem;
	line-height: 1.72;
}
.mainVisual .imgL {
	position: absolute;
	top: 0;
	left: 0;
}
.mainVisual .imgR {
	position: absolute;
	top: 0;
	right: 0;
}
.mainVisual .mvBox {
	margin: 0 auto;
	width: 600px;
	text-align: center;
}
.mainVisual .mvBox .lineBox {
	border: none;
}
.mainVisual .mvBox p {
	margin: 0;
	line-height: 1.5;
}
#howto .tabBox ul {
	width: 1200px;
}
#howto .tabBox li {
	padding: 15px 15px;
	width: 563px;
	text-align: center;
}
#howto .tabBox li span {
	display: block;
}
#howto .goldRings p.ttl {
	margin: 0 0 15px;
	font-size: 24px;
	line-height: 1.57;
}
#howto .goldRings .imgBox .txtBox {
	margin: 215px -37px 0 0;
	width: 474px;
}
#howto .goldRings .imgBox .txtBox h2 {
	padding: 0;
	margin: 0 auto 12px;
	max-width: 412px;
}
#howto .goldRings .imgBox .txtBox p {
}
#howto .goldRings .table {
	margin-bottom: 25px;
	width: 1040px;
}
#howto .goldRings .table p {
	margin: -10px -10px 0 0;
	color: #666;
	font-size: 1.2rem;
	text-align: right;
}
#howto .page:not(:first-of-type)::after {
	right: -95px;
	bottom: 455px;
}


/* 737px以上用（PC用）の記述 end--------------------------------------- */
}



@media all and (-ms-high-contrast:none) {
#howto .tabBox li {
	padding: 15px 11px 18px!important;
}
#howto .tabBox li span {
	padding-bottom: 8px;
}
#howto .topBox li a {
	padding: 13px 48px 4px 30px
}
#howto .topBox li:last-of-type a {
	padding: 13px 48px 4px 30px;
}
#howto .innBox div .ttl {
	padding: 9px 20px 3px;
}
}


/* 1399px以下用（PC用）のフォント可変値　記述------------------------------------------- */
@media screen and (min-width:1200px) and ( max-width:1399px) {


/* 1399px以下用（PC用）の記述 end--------------------------------------- */
}

/* 1199px以下用（PC用）のフォント最小値　記述------------------------------------------- */
@media screen and (min-width:738px) and ( max-width:1199px) {



/* 1199px以下用（PC用）の記述 end--------------------------------------- */
}