@charset "utf-8";

/* config
-------------------- */
html {
  scroll-behavior: smooth;
}
html, body {
  -webkit-text-size-adjust: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  height: 100%;
}
body {
	font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
	font-size: 62.5%;
	color: #333;
	background: #fff;
	background-size: 100% auto;
}
h1, h2, h3, h4, h5, h6, p {
  margin: 0;
  padding: 0;
  font-size: 1em;
  font-weight: normal;
}
img {
  width: 100%;
  height: auto;
}
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

article {
  display: block;
}

/* layout
-------------------- */
.wrapper {
	background: #f5ecc5 url("../images/bg.jpg") no-repeat center top;
	background-size: 100% auto;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	overflow: hidden;
	position: relative;
}

@media screen and (max-width: 750px) {
	.wrapper {
		background: #f5ecc5 url("../images/bg_sp.jpg") no-repeat center top;
		background-size: 100% auto;
		max-width: 750px;
	}
}

/* header
-------------------- */
header {
	position: absolute;
	width: 100%;
	top: 0;
	left: 0;
}
.logo {
	width: 18.67%;
	margin: 3.33% 0 0 4%;
	position: relative;
	z-index: 10;
}
@media screen and (min-width: 751px) {
	.logo {
		width: 11.17%;
		margin: 1.33% 0 0 7.5%;
	}
}
@media screen and (min-width: 1200px) {
	.logo {
		width: 134px;
		margin: 16px 0 0 90px;
	}
}

/* main
-------------------- */
.page-ttl {
	width: 92.93%;
	max-width: 697px;
	margin: 4.53% auto;
}
.page-ttl img {
	vertical-align: top;
}

.page-ttl + p {
	width: 92.93%;
	max-width: 697px;
	margin: 0 auto 20.7%;
	color: #593000;
	font-size: 3.7333vw;
	font-weight: bold;
	text-align: center;
	line-height: 1.8;
  line-break: strict;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.page-ttl + p span {
	display: inline-block;
}

@media screen and (min-width: 751px) {
	.page-ttl {
		width: 57.17%;
		max-width: 686px;
		margin: 1.25% auto 2.5%;
	}
	.page-ttl + p {
		width: 57.17%;
		max-width: 686px;
		margin: 0 auto 2.83%;
		font-size: 1.5vw;
	}
}
@media screen and (min-width: 1200px) {
	.page-ttl + p {
		font-size: 18px;
	}
}

/* present */
.present {
	background: url("../images/present_bg_sp.png") repeat-y center top;
	background-size: 100% auto;
	width: 100%;
	margin: 0 auto 26.73%;
	position: relative;
	padding-bottom: 5%;
}
.present:before {
	content: "";
	width: 100%;
	height: 5%;
	background: url("../images/present_bg_top_sp.png") repeat-y center top;
	background-size: 100% auto;
	position: absolute;
	top: -2%;
	left: 0;
	z-index: 1;
}
.present:after {
	content: "";
	width: 100%;
	height: 5%;
	background: url("../images/present_bg_bottom_sp.png") repeat-y center bottom;
	background-size: 100% auto;
	position: absolute;
	bottom: -2%;
	left: 0;
	z-index: 1;
}
.present img {
	vertical-align: top;
}
.present h2 {
	margin: 0 auto 5%;
	padding-top: 4.37%;
	width: 90.8%;
	max-width: 681px;
	position: relative;
	z-index: 10;
}

.present h2 + ul {
	list-style-type: none;
	margin: 0 auto 5%;
	width: 91.2%;
}

.present ul + ul {
	list-style-type: none;
	margin: 0 auto 8%;
	width: 91.2%;
	font-size: 3.4667vw;
	position: relative;
	z-index: 2;
}
.present ul + ul > li {
	margin-left: 3em;
	position: relative;
}
.present ul + ul > li:nth-child(1):before {
	content: "※1：";
	position: absolute;
	left: -3em;
	top: 0;
}
.present ul + ul > li:nth-child(2):before {
	content: "※2：";
	position: absolute;
	left: -3em;
	top: 0;
}

@media screen and (max-width: 750px) {
	.present h2 + ul li + li {
		margin-top: 5.6%;
	}
}

@media screen and (min-width: 751px) {
	.present {
		background: url("../images/present_bg.png") repeat-y center top;
		background-size: 100% auto;
		width: 83.83%;
		margin: 0 auto 10.83%;
		padding-bottom: 3%;
	}
	.present:before {
		background: url("../images/present_bg_top.png") repeat-y center top;
		background-size: 100% auto;
	}
	.present:after {
		background: url("../images/present_bg_bottom.png") repeat-y center bottom;
		background-size: 100% auto;
	}
	.present h2 {
		margin: 0 auto 2.58%;
		padding-top: 4.37%;
		width: 81.41%;
		max-width: 819px;
	}

	.present h2 + ul {
		margin: 0 auto 1.5%;
		width: 79.52%;
		display: flex;
		justify-content: space-between;
	}
	.present h2 + ul > li {
		width: 47.77%;
		max-width: 380px;
	}

	.present ul + ul {
		list-style-type: none;
		margin: 0 auto 1.99%;
		width: 79.52%;
		font-size: 1.1667vw;
	}
}

@media screen and (min-width: 1200px) {
	.present ul + ul {
		font-size: 16px;
	}
}

/* note */
.note {
	width: 92%;
	margin: 0 auto;
	background-color: #fff;
	border: 1px dotted #70706f;
	box-sizing: border-box;
	padding: 5.07% 1.33%;
	position: relative;
	z-index: 2;
}
.note h3 {
	font-size: 4.2667vw;
	color: #593000;
	font-weight: bold;
	background: url("../images/icon_note.png") no-repeat left top;
	background-size: 7.54% auto;
	padding-left: 2em;
	margin-bottom: 1.79%;
	margin-left: .5em;
}
.note ul {
	font-size: 2.9333vw;
	margin-left: 3em;
	list-style-type: disc;
	color: #713d00;
}
.note ul li {
	position: relative;
	line-height: 1.6;
}
.note ul li span {
	color: #333;
}

@media screen and (max-width: 750px) {
	.note ul li + li {
		margin-top: .8em;
	}
}


@media screen and (min-width: 751px) {
	.note {
		width: 84.49%;
		max-width: 850px;
		padding: 1.99% 2%;
	}

	.note h3 {
		font-size: 1.5vw;
		background: url("../images/icon_note.png") no-repeat left top;
		background-size: contain;
		padding-left: 2.2em;
		margin-bottom: 1.79%;
	}
	.note ul {
		font-size: 1.3333vw;
		margin-left: 1.5em;
	}
}


@media screen and (min-width: 1200px) {
	.note h3 {
		font-size: 18px;
	}
	.note ul {
		font-size: 16px;
	}
}


/* method */
.method {
	width: 100%;
	margin: 0 auto 7.5%;
}
.method h2 {
	width: 49.33%;
	max-width: 370px;
	margin: 0 auto 3%;
}

/* mb */
.mb {
	padding-bottom: 42.53%;
	position: relative;
}
@media screen and (max-width: 750px) {
	.mb:before {
		content: "";
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 0;
		padding-top: 36%;
		background: url("../images/bg_img01.png") no-repeat center bottom;
		background-size: contain;
		z-index: 2;
	}
	.mb:after {
		content: "";
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 0;
		padding-top: 104.13%;
		background: url("../images/bg02_sp.jpg") no-repeat center top;
		background-size: contain;
		z-index: 1;
		margin-bottom: -33%;
	}
	.method01,
	.method02 {
		position: relative;
		z-index: 3;
	}
}

/* method01 */
.method01 {
	width: 92%;
	margin: 0 auto 0;
	background-color: #fff;
	border-radius: 10px;
	border: 2px solid #ef7009;
	box-sizing: border-box;
}

.method01 h3 img,
.method01 h3 img {
	vertical-align: bottom;
}

.method01 h3 {
	background: url("../images/method_list01_bg.png");
	border-radius: 7px 7px 0 0;
	position: relative;
}

.method01 > ul,
.method02 > ul {
	width: 92.75%;
	margin: 8.26% auto;
	font-size: 3.5vw;
	line-height: 1.6;
}

.method01 li p:nth-child(1) {
	font-size: 5vw;
	color: #ef7009;
	line-height: 1.4;
	font-weight: bold;
	margin-bottom: .8em;
}

.method01 li p:nth-child(1) span {
	font-size: 4vw;
	padding: .3em;
	margin-bottom: .5em;
	box-sizing: border-box;
	background-color: #ef7009;
	color: #fff;
	text-align: center;
	border-radius: 5em;
	display: block;
}
.method01 li:nth-child(1) p:nth-child(3) {
	width: 37.54%;
	margin: 3.48% auto 4.35%;
}
.method01 li:nth-child(1) p:nth-child(4) {
	width: 82.03%;
	margin: 4.53% auto 6%;
}
.method01 li:nth-child(2) p:nth-child(3) {
	width: 80.72%;
	max-width: 557px;
	margin: 6.5% auto 0;
}
@media screen and (max-width: 750px) {
	.method01 li:nth-child(1){
		border-bottom: 2px dotted #ef7009;
		margin-bottom: 8.7%;
	}
}
@media screen and (min-width: 751px) {
	.method {
		width: 83.33%;
		margin: 0 auto 7.5%;
	}
	.method h2 {
		width: 25.1%;
		max-width: 251px;
		margin: 0 auto 3%;
	}
	.method a:hover {
		opacity: .7;
	}

	/* mb */
	.mb {
		background: url("../images/bg_img01.png") no-repeat center bottom;
		background-size: 6.5% auto;
		padding-bottom: 15.6%;
	}

	/* method01 */
	.method01 h3:before {
		content: "";
		background: url("../images/method_list01_ttl_img.png") no-repeat left top;
		background-size: 100% auto;
		width: 12.6%;
		height: 0;
		padding-top: 9%;
		position: absolute;
		bottom: 0;
		left: 0;
		margin-left: 15.7%;
	}

	.method01 > ul {
		width: 90%;
		margin: 4% auto;
		display: flex;
		justify-content:space-between;
		font-size: 1.1667vw;
		line-height: 1.6;
		background: url("../images/line01.png") repeat-y center top;
	}
	.method01 > ul > li {
		width: 44.44%;
		position: relative;
	}
	.method01 li p:nth-child(1) {
		font-size: 2.1667vw;
		color: #ef7009;
		line-height: 1.4;
		font-weight: bold;
		margin-bottom: .8em;
	}

	.method01 li p:nth-child(1) span {
		font-size: 1.5vw;
		padding: .3em;
		margin-bottom: .5em;
		box-sizing: border-box;
		background-color: #ef7009;
		color: #fff;
		text-align: center;
		border-radius: 5em;
		display: block;
	}

.method01 li:nth-child(1) p:nth-child(2) {
	width: 60%;
}
.method01 li:nth-child(1) p:nth-child(3) {
	position: absolute;
	margin: 24% -3% 0 0;
	top: 0;
	right: 0;
	width: 35.75%;
}
.method01 li:nth-child(1) p:nth-child(4) {
	width: 89%;
	max-width: 356px;
	margin: 10.75% auto 0;
}
.method01 li:nth-child(2) p:nth-child(3) {
	width: 76.5%;
	max-width: 306px;
	margin: 6.5% auto 0;
}
}
@media screen and (min-width: 1200px) {
	.method01 > ul {
		font-size: 14px;
	}
	.method01 li p:nth-child(1) {
		font-size: 26px;
	}
	.method01 li p:nth-child(1) span {
		font-size: 18px;
	}
}


/* method02 */
.method02 {
	width: 92%;
	margin: 0 auto 0;
	background-color: #fff;
	border-radius: 10px;
	border: 2px solid #60a900;
	box-sizing: border-box;
}

.method02 h3 {
	background: url("../images/method_list02_bg.png");
	border-radius: 7px 7px 0 0;
	position: relative;
}
.method02 li p:nth-child(1) {
	font-size: 5vw;
	color: #60a900;
	line-height: 1.4;
	font-weight: bold;
	margin-bottom: .8em;
}

.method02 li p:nth-child(1) span {
	font-size: 4vw;
	padding: .3em;
	margin-bottom: .5em;
	box-sizing: border-box;
	background-color: #60a900;
	color: #fff;
	text-align: center;
	border-radius: 5em;
	display: block;
}
.method02 li p:nth-child(1) b {
	display: inline-block;
}

.method02 li > div p:nth-child(2) {
	margin-bottom: .5em;
}
.method02 li > div > ol {
	margin-left: 2em;
	padding: 0;
	list-style-type: none;
	font-size: 3.7333vw;
}
.method02 li > div > ol li {
	position: relative;
	margin-bottom: .5em;
}
.method02 li > div > ol li:nth-child(1):before {
	content: "\02460";
	position: absolute;
	top: 0;
	left: -1.5em;
}
.method02 li > div > ol li:nth-child(2):before {
	content: "\02461";
	position: absolute;
	top: 0;
	left: -1.5em;
}

.method02 li > div p:nth-child(4) {
	width: 82.03%;
	max-width: 566px;
	margin: 8.73% auto 7.64%;
}
.method02 li > div p:nth-child(5) {
	display: none;
}
.method02 li > div + div {
	width: 91.16%;
	max-width: 629px;
	margin: 3.67% auto;
}
.method02 li > div + div > p:nth-child(2) {
	display: block;
}
.method02 li > div + div > p:nth-child(2) small {
	display: block;
	font-size: 2.6667vw;
	margin-left: 1em;
	text-indent: -1em;
}
@media screen and (min-width: 751px) {
.method02 {
	background-color: #fff;
	border-radius: 10px;
	border: 2px solid #60a900;
	box-sizing: border-box;
}

.method02 h3 {
	background: url("../images/method_list02_bg.png");
	border-radius: 7px 7px 0 0;
	position: relative;
}
.method02 h3:before {
	content: "";
	background: url("../images/method_list02_ttl_img.png") no-repeat left top;
	background-size: 100% auto;
	width: 13.4%;
	height: 0;
	padding-top: 9%;
	position: absolute;
	bottom: 0;
	right: 0;
	margin-right: 14.2%;
}

.method02 > ul {
	width: 90%;
	margin: 4% auto;
	line-height: 1.6;
}
.method02 > ul > li {
	position: relative;
	display: flex;
	justify-content:space-between;
	font-size: 1.1667vw;
}
.method02 li > div {
	width: 52%;
}
.method02 li > div + div {
	width: 44.56%;
	max-width: 410px;
	margin-top: 3.67%;
}
.method02 li > div p:nth-child(1) {
	font-size: 2.1667vw;
	color: #60a900;
	line-height: 1.4;
	font-weight: bold;
	margin-bottom: .8em;
}
.method02 li > div p:nth-child(1) span {
	font-size: 1.5vw;
	padding: .3em;
	margin-bottom: .5em;
	box-sizing: border-box;
	background-color: #60a900;
	color: #fff;
	text-align: center;
	border-radius: 5em;
	display: block;
}

.method02 li > div > ol {
	margin-left: 2em;
	padding: 0;
	list-style-type: none;
	font-size: 1.1667vw;
}
.method02 li > div > ol li {
	position: relative;
	margin-bottom: .5em;
}
.method02 li > div > ol li:nth-child(1):before {
	content: "\02460";
	position: absolute;
	top: 0;
	left: -1.5em;
}
.method02 li > div > ol li:nth-child(2):before {
	content: "\02461";
	position: absolute;
	top: 0;
	left: -1.5em;
}

.method02 li > div p:nth-child(4) {
	width: 77.73%;
	max-width: 356px;
	margin: 8.73% auto 7.64%;
}
.method02 li > div p:nth-child(5) {
	display: block;
}

.method02 li > div p:nth-child(5) small {
	font-size: 1vw;
}
.method02 li > div + div > p:nth-child(2) {
	display: none;
}
}
@media screen and (min-width: 1200px) {
	.method02 > ul {
		font-size: 14px;
	}
	.method02 li > div p:nth-child(1) {
		font-size: 26px;
	}
	.method02 li > div p:nth-child(1) span {
		font-size: 18px;
	}
	.method02 li > div > ol {
		font-size: 16px;
	}
	.method02 li > div p:nth-child(5) small {
		font-size: 12px;
	}
}

@media screen and (max-width: 750px) {
	.method {
		position: relative;
		z-index: 6;
	}
	aside {
		display: block;
		margin-top: -40%;
		position: relative;
		z-index: 5;
	}
}

/* footer
-------------------- */
footer {
	background-color: #fff;
	text-align: center;
	padding: 1em;
	box-sizing: border-box;
	font-size: 2.4vw;
}
@media screen and (min-width: 751px) {
	footer {
		font-size: 1.1667vw;
	}
}
@media screen and (min-width: 1200px) {
	footer {
		font-size: 14px;
	}
}