@charset "utf-8";

:root {
  --main-brown-color: #4d3a2e; /* メインブラウン var(--main-brown-color);*/
  --main-orange-color: #E36414; /* メインオレンジ var(--main-orange-color);*/
}




html, body, div, span, applet, object,
iframe, h1, h2, h3, h4, h5, h6, p, blockquote,
pre, a, abbr, acronym, address, big, cite,
code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b,
u, i, center, dl, dt, dd, ol, ul, li, fieldset,
form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td, article, aside,
canvas, details, embed, figure, figcaption,
footer, header, hgroup, menu, nav, output, ruby,
section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;}

body {
	line-height: 1;
}

ol, ul {
	list-style: none;
}


table {
	border-collapse: collapse;
	border-spacing: 0;
}

body {
	-webkit-text-size-adjust: 100%;
}

mark {
	background-color: transparent;
	color: inherit;
}

input::-moz-focus-inner {
	border: 0;
	padding: 0;
}

input, select, textarea {
	-moz-appearance: none;
	-webkit-appearance: none;
	-ms-appearance: none;
	appearance: none;
}

input {
appearance: revert;
}

/* Basic */

	@-ms-viewport {
		width: device-width;
	}

	html {
		box-sizing: border-box;
	}

	*, *:before, *:after {
		box-sizing: inherit;
	}

	* {
  box-sizing: border-box;
}

.clear{
	clear:both;
}



	body {
	background: #efebe1;
	background: url("https://yuni-design.com/images/bg1.gif") repeat fixed;
	}

		body.is-preload *, body.is-preload *:before, body.is-preload *:after {
			-moz-animation: none !important;
			-webkit-animation: none !important;
			-ms-animation: none !important;
			animation: none !important;
			-moz-transition: none !important;
			-webkit-transition: none !important;
			-ms-transition: none !important;
			transition: none !important;
		}



	body, input, select, textarea {
		color: #4d3a2e;
		font-family: 'Lato', 'Noto Sans JP', 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
		font-size: 15pt;
		font-weight: 400;
		line-height: 1.65em;
		letter-spacing: 0.15em;
		font-feature-settings: "palt";
	}

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

			body, input, select, textarea {
				font-size: 13pt;
			}

		}

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

			body, input, select, textarea {
				font-size: 12pt;
			}

		}

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

			body, input, select, textarea {
				font-size: 11pt;
				letter-spacing: 0.0375em;
			}

		}


/****** テキストリンク設定 ******/
a {
	-moz-transition: color 0.2s ease;
	-webkit-transition: color 0.2s ease;
	-ms-transition: color 0.2s ease;
	transition: color 0.2s ease;
	color: inherit;
	text-decoration: none;
}
a:hover {
	border-bottom-color: transparent;
}

/* Font Awesome SOLID */
a.alink{
	text-decoration: none;
	color: #E36414;
}
a.alink::before{
	content: '\f08e';
	display: inline-block;
	font-weight: 900;
	font-family: "Font Awesome 6 Free";
	padding-right: 0.15em;
}
a.alink:hover{
	text-decoration: none;
	color: #cf5b12;
}
/****** テキストリンク設定 ******/


.strong{
	font-weight:bold;
}



	strong, b {
		font-weight: 600;
	}

	em, i {
		font-style: normal;
	}

	p {
		margin: 0;
		line-height: 2em;
	}



	p.p {
		margin: 0 0 2em 0;
		line-height: 1.5em !important;
	}

	.dfont{
		color: #4d3a2e !important;
	}
	@media screen and (max-width: 400px){
		.dfont{
			color: #4d3a2e;
			font-size:1em;
		}
	}


  p.heading-26 {
      padding-bottom: 0.5rem;
      letter-spacing: 0.2rem;
  }



  p.heading-26:first-letter {
      color: var(--main-orange-color);
      font-size: 2rem;
      font-weight: bold;
  }

  @media screen and (max-width: 400px){
    p.heading-26:first-letter {
        font-size: 1.6rem;
    }
  }


	.v_m5{
		vertical-align: -5px;
	}



#header .htxt {
	color: #fff;
	font-weight: 400;
	letter-spacing: 0.225em;
	line-height: 1em;
	margin: 0 0 1em 0;
}
#header .htxt a {
	color: inherit;
	text-decoration: none;
}

#header .htxt img {
	width:100%;
	max-width:45px;
	display: inline-block;
	vertical-align: middle;
}
@media screen and (max-width: 1280px){
	#header .htxt img {
		width:100%;
		max-width:40px;
		display: inline-block;
    vertical-align: middle;
	}
}
@media screen and (max-width: 400px){
	#header .htxt img {
		width:100%;
		max-width:35px;
		display: inline-block;
    vertical-align: middle;
	}
}


	h1 {
		color: var(--main-brown-color);
		font-size: 0.85em;
		font-weight: 400;
		letter-spacing: 0.225em;
		line-height: 1.8em;
		margin: 0 0 1em 0
	}

	h2, h3, h4, h5, h6 {
		color: #4d3a2e !important;
		font-weight: 800;
		letter-spacing: 0.225em;
		line-height: 1em;
		margin: 0 0 1em 0
	}






		h2 a, h3 a, h4 a, h5 a, h6 a {
			color: inherit;
			text-decoration: none;
		}


	h2 {
		font-size: 1.3em;
		line-height: 1.75em;
	}

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

			h2 {
				font-size: 1em;
				line-height: 1.5em;
			}

		}



		h2.midashi {
			font-size: 1.3em;
			line-height: 1.75em;
			padding: 0 1rem;
			border-left: 4px solid #4d3a2e;

		}

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

				h2.midashi {
					font-size: 1.2em;
					font-weight: bold;
					line-height: 1.5em;
					padding: 0 0 0 0.6em;
					border-left: 4px solid #4d3a2e;
				}

			}





	h3 {
		font-size: 1.15em;
		line-height: 1.75em;
		letter-spacing: 0.225em;
	}

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

			h3 {
				font-size: 1em;
				line-height: 1.5em;
			}

		}


		h3.h3 {
			font-size: 1em;
			line-height: 1.75em;
			letter-spacing: 0.1em;
		}

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

				h3.h3 {
					font-size: 1em;
					line-height: 1.5em;
					letter-spacing: 0.1em;
				}

			}



			h3.midashi {
				font-size: 1.3em;
				line-height: 1.75em;
				padding: 0 1rem;
				border-left: 4px solid #4d3a2e;

			}

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

					h3.midashi {
						font-size: 1.2em;
						font-weight: bold;
						line-height: 1.5em;
						padding: 0 0 0 0.6em;
						border-left: 4px solid #4d3a2e;
					}

				}





	h4 {
		font-size: 1em;
		line-height: 1.5em;
	}

	h5 {
		font-size: 0.8em;
		line-height: 1.5em;
	}

	h6 {
		font-size: 0.7em;
		line-height: 1.5em;
	}

	sub {
		font-size: 0.8em;
		position: relative;
		top: 0.5em;
	}

	sup {
		font-size: 0.8em;
		position: relative;
		top: -0.5em;
	}

	hr {
		border: 0;
		border-bottom: solid 1px rgba(77,58,46,0.35);
		margin: 3em 0;
	}

  hr.contact {
		border: 0;
		border-bottom: solid 1px rgba(77,58,46,0.35);
		margin: 3em 0 5em 0;
	}


  hr.hr2 {
		border: 0;
		border-bottom: solid 1px rgba(77,58,46,0.35);
		margin: 3em 0 1em 0;
	}



	hr.hr1 {
		border-bottom: solid 1px rgba(77,58,46,0.35) !important;
		margin: 1.5em 0;
	}

		hr.major {
			margin: 4.5em 0;
		}




	code {
		background: rgba(144, 144, 144, 0.25);

		font-family: 'Lato', 'Noto Sans JP', 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
		font-size: 0.9em;
		letter-spacing: 0;
		margin: 0 0.25em;
		padding: 0.25em 0.65em;
	}

	pre {
		-webkit-overflow-scrolling: touch;
		font-family: 'Lato', 'Noto Sans JP', 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
		font-size: 0.9em;
		margin: 0 0 2em 0;
	}

		pre code {
			display: block;
			line-height: 1.75em;
			padding: 1em 1.5em;
			overflow-x: auto;
		}

	.align-left {
		text-align: left !important;
	}

	.align-center {
		text-align: center !important;
	}

	.align-right {
		text-align: right !important;
	}

/* Row */

	.row {
		display: flex;
		flex-wrap: wrap;
		box-sizing: border-box;
		align-items: stretch;
	}

		.row > * {
			box-sizing: border-box;
		}

		.row.gtr-uniform > * > :last-child {
			margin-bottom: 0;
		}

		.row.aln-left {
			justify-content: flex-start;
		}

		.row.aln-center {
			justify-content: center;
		}

		.row.aln-right {
			justify-content: flex-end;
		}

		.row.aln-top {
			align-items: flex-start;
		}

		.row.aln-middle {
			align-items: center;
		}

		.row.aln-bottom {
			align-items: flex-end;
		}

		.row > .imp {
			order: -1;
		}

		.row > .col-1 {
			width: 8.33333%;
		}

		.row > .off-1 {
			margin-left: 8.33333%;
		}

		.row > .col-2 {
			width: 16.66667%;
		}

		.row > .off-2 {
			margin-left: 16.66667%;
		}

		.row > .col-3 {
			width: 25%;
		}

		.row > .off-3 {
			margin-left: 25%;
		}

		.row > .col-4 {
			width: 33.33333%;
		}

		.row > .off-4 {
			margin-left: 33.33333%;
		}

		.row > .col-5 {
			width: 41.66667%;
		}

		.row > .off-5 {
			margin-left: 41.66667%;
		}

		.row > .col-6 {
			width: 50%;
		}

		.row > .off-6 {
			margin-left: 50%;
		}

		.row > .col-7 {
			width: 58.33333%;
		}

		.row > .off-7 {
			margin-left: 58.33333%;
		}

		.row > .col-8 {
			width: 66.66667%;
		}

		.row > .off-8 {
			margin-left: 66.66667%;
		}

		.row > .col-9 {
			width: 75%;
		}

		.row > .off-9 {
			margin-left: 75%;
		}

		.row > .col-10 {
			width: 83.33333%;
		}

		.row > .off-10 {
			margin-left: 83.33333%;
		}

		.row > .col-11 {
			width: 91.66667%;
		}

		.row > .off-11 {
			margin-left: 91.66667%;
		}

		.row > .col-12 {
			width: 100%;
		}

		.row > .off-12 {
			margin-left: 100%;
		}

		.row.gtr-0 {
			margin-top: 0;
			margin-left: 0em;
		}

			.row.gtr-0 > * {
				padding: 0 0 0 0em;
			}

			.row.gtr-0.gtr-uniform {
				margin-top: 0em;
			}

				.row.gtr-0.gtr-uniform > * {
					padding-top: 0em;
				}

		.row.gtr-25 {
			margin-top: 0;
			margin-left: -0.375em;
		}

			.row.gtr-25 > * {
				padding: 0 0 0 0.375em;
			}

			.row.gtr-25.gtr-uniform {
				margin-top: -0.375em;
			}

				.row.gtr-25.gtr-uniform > * {
					padding-top: 0.375em;
				}

		.row.gtr-50 {
			margin-top: 0;
			margin-left: -0.75em;
		}

			.row.gtr-50 > * {
				padding: 0 0 0 0.75em;
			}

			.row.gtr-50.gtr-uniform {
				margin-top: -0.75em;
			}

				.row.gtr-50.gtr-uniform > * {
					padding-top: 0.75em;
				}

		.row {
			margin-top: 0;
			margin-left: -1.5em;
		}

			.row > * {
				padding: 0 0 0 1.5em;
			}

			.row.gtr-uniform {
				margin-top: -1.5em;
			}

				.row.gtr-uniform > * {
					padding-top: 1.5em;
				}

		.row.gtr-150 {
			margin-top: 0;
			margin-left: -2.25em;
		}

			.row.gtr-150 > * {
				padding: 0 0 0 2.25em;
			}

			.row.gtr-150.gtr-uniform {
				margin-top: -2.25em;
			}

				.row.gtr-150.gtr-uniform > * {
					padding-top: 2.25em;
				}

		.row.gtr-200 {
			margin-top: 0;
			margin-left: -3em;
		}

			.row.gtr-200 > * {
				padding: 0 0 0 3em;
			}

			.row.gtr-200.gtr-uniform {
				margin-top: -3em;
			}

				.row.gtr-200.gtr-uniform > * {
					padding-top: 3em;
				}

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

			.row {
				display: flex;
				flex-wrap: wrap;
				box-sizing: border-box;
				align-items: stretch;
			}

				.row > * {
					box-sizing: border-box;
				}

				.row.gtr-uniform > * > :last-child {
					margin-bottom: 0;
				}

				.row.aln-left {
					justify-content: flex-start;
				}

				.row.aln-center {
					justify-content: center;
				}

				.row.aln-right {
					justify-content: flex-end;
				}

				.row.aln-top {
					align-items: flex-start;
				}

				.row.aln-middle {
					align-items: center;
				}

				.row.aln-bottom {
					align-items: flex-end;
				}

				.row > .imp-xlarge {
					order: -1;
				}

				.row > .col-1-xlarge {
					width: 8.33333%;
				}

				.row > .off-1-xlarge {
					margin-left: 8.33333%;
				}

				.row > .col-2-xlarge {
					width: 16.66667%;
				}

				.row > .off-2-xlarge {
					margin-left: 16.66667%;
				}

				.row > .col-3-xlarge {
					width: 25%;
				}

				.row > .off-3-xlarge {
					margin-left: 25%;
				}

				.row > .col-4-xlarge {
					width: 33.33333%;
				}

				.row > .off-4-xlarge {
					margin-left: 33.33333%;
				}

				.row > .col-5-xlarge {
					width: 41.66667%;
				}

				.row > .off-5-xlarge {
					margin-left: 41.66667%;
				}

				.row > .col-6-xlarge {
					width: 50%;
				}

				.row > .off-6-xlarge {
					margin-left: 50%;
				}

				.row > .col-7-xlarge {
					width: 58.33333%;
				}

				.row > .off-7-xlarge {
					margin-left: 58.33333%;
				}

				.row > .col-8-xlarge {
					width: 66.66667%;
				}

				.row > .off-8-xlarge {
					margin-left: 66.66667%;
				}

				.row > .col-9-xlarge {
					width: 75%;
				}

				.row > .off-9-xlarge {
					margin-left: 75%;
				}

				.row > .col-10-xlarge {
					width: 83.33333%;
				}

				.row > .off-10-xlarge {
					margin-left: 83.33333%;
				}

				.row > .col-11-xlarge {
					width: 91.66667%;
				}

				.row > .off-11-xlarge {
					margin-left: 91.66667%;
				}

				.row > .col-12-xlarge {
					width: 100%;
				}

				.row > .off-12-xlarge {
					margin-left: 100%;
				}

				.row.gtr-0 {
					margin-top: 0;
					margin-left: 0em;
				}

					.row.gtr-0 > * {
						padding: 0 0 0 0em;
					}

					.row.gtr-0.gtr-uniform {
						margin-top: 0em;
					}

						.row.gtr-0.gtr-uniform > * {
							padding-top: 0em;
						}

				.row.gtr-25 {
					margin-top: 0;
					margin-left: -0.375em;
				}

					.row.gtr-25 > * {
						padding: 0 0 0 0.375em;
					}

					.row.gtr-25.gtr-uniform {
						margin-top: -0.375em;
					}

						.row.gtr-25.gtr-uniform > * {
							padding-top: 0.375em;
						}

				.row.gtr-50 {
					margin-top: 0;
					margin-left: -0.75em;
				}

					.row.gtr-50 > * {
						padding: 0 0 0 0.75em;
					}

					.row.gtr-50.gtr-uniform {
						margin-top: -0.75em;
					}

						.row.gtr-50.gtr-uniform > * {
							padding-top: 0.75em;
						}

				.row {
					margin-top: 0;
					margin-left: -1.5em;
				}

					.row > * {
						padding: 0 0 0 1.5em;
					}

					.row.gtr-uniform {
						margin-top: -1.5em;
					}

						.row.gtr-uniform > * {
							padding-top: 1.5em;
						}

				.row.gtr-150 {
					margin-top: 0;
					margin-left: -2.25em;
				}

					.row.gtr-150 > * {
						padding: 0 0 0 2.25em;
					}

					.row.gtr-150.gtr-uniform {
						margin-top: -2.25em;
					}

						.row.gtr-150.gtr-uniform > * {
							padding-top: 2.25em;
						}

				.row.gtr-200 {
					margin-top: 0;
					margin-left: -3em;
				}

					.row.gtr-200 > * {
						padding: 0 0 0 3em;
					}

					.row.gtr-200.gtr-uniform {
						margin-top: -3em;
					}

						.row.gtr-200.gtr-uniform > * {
							padding-top: 3em;
						}

		}

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

			.row {
				display: flex;
				flex-wrap: wrap;
				box-sizing: border-box;
				align-items: stretch;
			}

				.row > * {
					box-sizing: border-box;
				}

				.row.gtr-uniform > * > :last-child {
					margin-bottom: 0;
				}

				.row.aln-left {
					justify-content: flex-start;
				}

				.row.aln-center {
					justify-content: center;
				}

				.row.aln-right {
					justify-content: flex-end;
				}

				.row.aln-top {
					align-items: flex-start;
				}

				.row.aln-middle {
					align-items: center;
				}

				.row.aln-bottom {
					align-items: flex-end;
				}

				.row > .imp-large {
					order: -1;
				}

				.row > .col-1-large {
					width: 8.33333%;
				}

				.row > .off-1-large {
					margin-left: 8.33333%;
				}

				.row > .col-2-large {
					width: 16.66667%;
				}

				.row > .off-2-large {
					margin-left: 16.66667%;
				}

				.row > .col-3-large {
					width: 25%;
				}

				.row > .off-3-large {
					margin-left: 25%;
				}

				.row > .col-4-large {
					width: 33.33333%;
				}

				.row > .off-4-large {
					margin-left: 33.33333%;
				}

				.row > .col-5-large {
					width: 41.66667%;
				}

				.row > .off-5-large {
					margin-left: 41.66667%;
				}

				.row > .col-6-large {
					width: 50%;
				}

				.row > .off-6-large {
					margin-left: 50%;
				}

				.row > .col-7-large {
					width: 58.33333%;
				}

				.row > .off-7-large {
					margin-left: 58.33333%;
				}

				.row > .col-8-large {
					width: 66.66667%;
				}

				.row > .off-8-large {
					margin-left: 66.66667%;
				}

				.row > .col-9-large {
					width: 75%;
				}

				.row > .off-9-large {
					margin-left: 75%;
				}

				.row > .col-10-large {
					width: 83.33333%;
				}

				.row > .off-10-large {
					margin-left: 83.33333%;
				}

				.row > .col-11-large {
					width: 91.66667%;
				}

				.row > .off-11-large {
					margin-left: 91.66667%;
				}

				.row > .col-12-large {
					width: 100%;
				}

				.row > .off-12-large {
					margin-left: 100%;
				}

				.row.gtr-0 {
					margin-top: 0;
					margin-left: 0em;
				}

					.row.gtr-0 > * {
						padding: 0 0 0 0em;
					}

					.row.gtr-0.gtr-uniform {
						margin-top: 0em;
					}

						.row.gtr-0.gtr-uniform > * {
							padding-top: 0em;
						}

				.row.gtr-25 {
					margin-top: 0;
					margin-left: -0.375em;
				}

					.row.gtr-25 > * {
						padding: 0 0 0 0.375em;
					}

					.row.gtr-25.gtr-uniform {
						margin-top: -0.375em;
					}

						.row.gtr-25.gtr-uniform > * {
							padding-top: 0.375em;
						}

				.row.gtr-50 {
					margin-top: 0;
					margin-left: -0.75em;
				}

					.row.gtr-50 > * {
						padding: 0 0 0 0.75em;
					}

					.row.gtr-50.gtr-uniform {
						margin-top: -0.75em;
					}

						.row.gtr-50.gtr-uniform > * {
							padding-top: 0.75em;
						}

				.row {
					margin-top: 0;
					margin-left: -1.5em;
				}

					.row > * {
						padding: 0 0 0 1.5em;
					}

					.row.gtr-uniform {
						margin-top: -1.5em;
					}

						.row.gtr-uniform > * {
							padding-top: 1.5em;
						}

				.row.gtr-150 {
					margin-top: 0;
					margin-left: -2.25em;
				}

					.row.gtr-150 > * {
						padding: 0 0 0 2.25em;
					}

					.row.gtr-150.gtr-uniform {
						margin-top: -2.25em;
					}

						.row.gtr-150.gtr-uniform > * {
							padding-top: 2.25em;
						}

				.row.gtr-200 {
					margin-top: 0;
					margin-left: -3em;
				}

					.row.gtr-200 > * {
						padding: 0 0 0 3em;
					}

					.row.gtr-200.gtr-uniform {
						margin-top: -3em;
					}

						.row.gtr-200.gtr-uniform > * {
							padding-top: 3em;
						}

		}

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

			.row {
				display: flex;
				flex-wrap: wrap;
				box-sizing: border-box;
				align-items: stretch;
			}

				.row > * {
					box-sizing: border-box;
				}

				.row.gtr-uniform > * > :last-child {
					margin-bottom: 0;
				}

				.row.aln-left {
					justify-content: flex-start;
				}

				.row.aln-center {
					justify-content: center;
				}

				.row.aln-right {
					justify-content: flex-end;
				}

				.row.aln-top {
					align-items: flex-start;
				}

				.row.aln-middle {
					align-items: center;
				}

				.row.aln-bottom {
					align-items: flex-end;
				}

				.row > .imp-medium {
					order: -1;
				}

				.row > .col-1-medium {
					width: 8.33333%;
				}

				.row > .off-1-medium {
					margin-left: 8.33333%;
				}

				.row > .col-2-medium {
					width: 16.66667%;
				}

				.row > .off-2-medium {
					margin-left: 16.66667%;
				}

				.row > .col-3-medium {
					width: 25%;
				}

				.row > .off-3-medium {
					margin-left: 25%;
				}

				.row > .col-4-medium {
					width: 33.33333%;
				}

				.row > .off-4-medium {
					margin-left: 33.33333%;
				}

				.row > .col-5-medium {
					width: 41.66667%;
				}

				.row > .off-5-medium {
					margin-left: 41.66667%;
				}

				.row > .col-6-medium {
					width: 50%;
				}

				.row > .off-6-medium {
					margin-left: 50%;
				}

				.row > .col-7-medium {
					width: 58.33333%;
				}

				.row > .off-7-medium {
					margin-left: 58.33333%;
				}

				.row > .col-8-medium {
					width: 66.66667%;
				}

				.row > .off-8-medium {
					margin-left: 66.66667%;
				}

				.row > .col-9-medium {
					width: 75%;
				}

				.row > .off-9-medium {
					margin-left: 75%;
				}

				.row > .col-10-medium {
					width: 83.33333%;
				}

				.row > .off-10-medium {
					margin-left: 83.33333%;
				}

				.row > .col-11-medium {
					width: 91.66667%;
				}

				.row > .off-11-medium {
					margin-left: 91.66667%;
				}

				.row > .col-12-medium {
					width: 100%;
				}

				.row > .off-12-medium {
					margin-left: 100%;
				}

				.row.gtr-0 {
					margin-top: 0;
					margin-left: 0em;
				}

					.row.gtr-0 > * {
						padding: 0 0 0 0em;
					}

					.row.gtr-0.gtr-uniform {
						margin-top: 0em;
					}

						.row.gtr-0.gtr-uniform > * {
							padding-top: 0em;
						}

				.row.gtr-25 {
					margin-top: 0;
					margin-left: -0.375em;
				}

					.row.gtr-25 > * {
						padding: 0 0 0 0.375em;
					}

					.row.gtr-25.gtr-uniform {
						margin-top: -0.375em;
					}

						.row.gtr-25.gtr-uniform > * {
							padding-top: 0.375em;
						}

				.row.gtr-50 {
					margin-top: 0;
					margin-left: -0.75em;
				}

					.row.gtr-50 > * {
						padding: 0 0 0 0.75em;
					}

					.row.gtr-50.gtr-uniform {
						margin-top: -0.75em;
					}

						.row.gtr-50.gtr-uniform > * {
							padding-top: 0.75em;
						}

				.row {
					margin-top: 0;
					margin-left: -1.5em;
				}

					.row > * {
						padding: 0 0 0 1.5em;
					}

					.row.gtr-uniform {
						margin-top: -1.5em;
					}

						.row.gtr-uniform > * {
							padding-top: 1.5em;
						}

				.row.gtr-150 {
					margin-top: 0;
					margin-left: -2.25em;
				}

					.row.gtr-150 > * {
						padding: 0 0 0 2.25em;
					}

					.row.gtr-150.gtr-uniform {
						margin-top: -2.25em;
					}

						.row.gtr-150.gtr-uniform > * {
							padding-top: 2.25em;
						}

				.row.gtr-200 {
					margin-top: 0;
					margin-left: -3em;
				}

					.row.gtr-200 > * {
						padding: 0 0 0 3em;
					}

					.row.gtr-200.gtr-uniform {
						margin-top: -3em;
					}

						.row.gtr-200.gtr-uniform > * {
							padding-top: 3em;
						}

		}

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

			.row {
				display: flex;
				flex-wrap: wrap;
				box-sizing: border-box;
				align-items: stretch;
			}

				.row > * {
					box-sizing: border-box;
				}

				.row.gtr-uniform > * > :last-child {
					margin-bottom: 0;
				}

				.row.aln-left {
					justify-content: flex-start;
				}

				.row.aln-center {
					justify-content: center;
				}

				.row.aln-right {
					justify-content: flex-end;
				}

				.row.aln-top {
					align-items: flex-start;
				}

				.row.aln-middle {
					align-items: center;
				}

				.row.aln-bottom {
					align-items: flex-end;
				}

				.row > .imp-small {
					order: -1;
				}

				.row > .col-1-small {
					width: 8.33333%;
				}

				.row > .off-1-small {
					margin-left: 8.33333%;
				}

				.row > .col-2-small {
					width: 16.66667%;
				}

				.row > .off-2-small {
					margin-left: 16.66667%;
				}

				.row > .col-3-small {
					width: 25%;
				}

				.row > .off-3-small {
					margin-left: 25%;
				}

				.row > .col-4-small {
					width: 33.33333%;
				}

				.row > .off-4-small {
					margin-left: 33.33333%;
				}

				.row > .col-5-small {
					width: 41.66667%;
				}

				.row > .off-5-small {
					margin-left: 41.66667%;
				}

				.row > .col-6-small {
					width: 50%;
				}

				.row > .off-6-small {
					margin-left: 50%;
				}

				.row > .col-7-small {
					width: 58.33333%;
				}

				.row > .off-7-small {
					margin-left: 58.33333%;
				}

				.row > .col-8-small {
					width: 66.66667%;
				}

				.row > .off-8-small {
					margin-left: 66.66667%;
				}

				.row > .col-9-small {
					width: 75%;
				}

				.row > .off-9-small {
					margin-left: 75%;
				}

				.row > .col-10-small {
					width: 83.33333%;
				}

				.row > .off-10-small {
					margin-left: 83.33333%;
				}

				.row > .col-11-small {
					width: 91.66667%;
				}

				.row > .off-11-small {
					margin-left: 91.66667%;
				}

				.row > .col-12-small {
					width: 100%;
				}

				.row > .off-12-small {
					margin-left: 100%;
				}

				.row.gtr-0 {
					margin-top: 0;
					margin-left: 0em;
				}

					.row.gtr-0 > * {
						padding: 0 0 0 0em;
					}

					.row.gtr-0.gtr-uniform {
						margin-top: 0em;
					}

						.row.gtr-0.gtr-uniform > * {
							padding-top: 0em;
						}

				.row.gtr-25 {
					margin-top: 0;
					margin-left: -0.375em;
				}

					.row.gtr-25 > * {
						padding: 0 0 0 0.375em;
					}

					.row.gtr-25.gtr-uniform {
						margin-top: -0.375em;
					}

						.row.gtr-25.gtr-uniform > * {
							padding-top: 0.375em;
						}

				.row.gtr-50 {
					margin-top: 0;
					margin-left: -0.75em;
				}

					.row.gtr-50 > * {
						padding: 0 0 0 0.75em;
					}

					.row.gtr-50.gtr-uniform {
						margin-top: -0.75em;
					}

						.row.gtr-50.gtr-uniform > * {
							padding-top: 0.75em;
						}

				.row {
					margin-top: 0;
					margin-left: -1.5em;
				}

					.row > * {
						padding: 0 0 0 1.5em;
					}

					.row.gtr-uniform {
						margin-top: -1.5em;
					}

						.row.gtr-uniform > * {
							padding-top: 1.5em;
						}

				.row.gtr-150 {
					margin-top: 0;
					margin-left: -2.25em;
				}

					.row.gtr-150 > * {
						padding: 0 0 0 2.25em;
					}

					.row.gtr-150.gtr-uniform {
						margin-top: -2.25em;
					}

						.row.gtr-150.gtr-uniform > * {
							padding-top: 2.25em;
						}

				.row.gtr-200 {
					margin-top: 0;
					margin-left: -3em;
				}

					.row.gtr-200 > * {
						padding: 0 0 0 3em;
					}

					.row.gtr-200.gtr-uniform {
						margin-top: -3em;
					}

						.row.gtr-200.gtr-uniform > * {
							padding-top: 3em;
						}

		}

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

			.row {
				display: flex;
				flex-wrap: wrap;
				box-sizing: border-box;
				align-items: stretch;
			}

				.row > * {
					box-sizing: border-box;
				}

				.row.gtr-uniform > * > :last-child {
					margin-bottom: 0;
				}

				.row.aln-left {
					justify-content: flex-start;
				}

				.row.aln-center {
					justify-content: center;
				}

				.row.aln-right {
					justify-content: flex-end;
				}

				.row.aln-top {
					align-items: flex-start;
				}

				.row.aln-middle {
					align-items: center;
				}

				.row.aln-bottom {
					align-items: flex-end;
				}

				.row > .imp-xsmall {
					order: -1;
				}

				.row > .col-1-xsmall {
					width: 8.33333%;
				}

				.row > .off-1-xsmall {
					margin-left: 8.33333%;
				}

				.row > .col-2-xsmall {
					width: 16.66667%;
				}

				.row > .off-2-xsmall {
					margin-left: 16.66667%;
				}

				.row > .col-3-xsmall {
					width: 25%;
				}

				.row > .off-3-xsmall {
					margin-left: 25%;
				}

				.row > .col-4-xsmall {
					width: 33.33333%;
				}

				.row > .off-4-xsmall {
					margin-left: 33.33333%;
				}

				.row > .col-5-xsmall {
					width: 41.66667%;
				}

				.row > .off-5-xsmall {
					margin-left: 41.66667%;
				}

				.row > .col-6-xsmall {
					width: 50%;
				}

				.row > .off-6-xsmall {
					margin-left: 50%;
				}

				.row > .col-7-xsmall {
					width: 58.33333%;
				}

				.row > .off-7-xsmall {
					margin-left: 58.33333%;
				}

				.row > .col-8-xsmall {
					width: 66.66667%;
				}

				.row > .off-8-xsmall {
					margin-left: 66.66667%;
				}

				.row > .col-9-xsmall {
					width: 75%;
				}

				.row > .off-9-xsmall {
					margin-left: 75%;
				}

				.row > .col-10-xsmall {
					width: 83.33333%;
				}

				.row > .off-10-xsmall {
					margin-left: 83.33333%;
				}

				.row > .col-11-xsmall {
					width: 91.66667%;
				}

				.row > .off-11-xsmall {
					margin-left: 91.66667%;
				}

				.row > .col-12-xsmall {
					width: 100%;
				}

				.row > .off-12-xsmall {
					margin-left: 100%;
				}

				.row.gtr-0 {
					margin-top: 0;
					margin-left: 0em;
				}

					.row.gtr-0 > * {
						padding: 0 0 0 0em;
					}

					.row.gtr-0.gtr-uniform {
						margin-top: 0em;
					}

						.row.gtr-0.gtr-uniform > * {
							padding-top: 0em;
						}

				.row.gtr-25 {
					margin-top: 0;
					margin-left: -0.375em;
				}

					.row.gtr-25 > * {
						padding: 0 0 0 0.375em;
					}

					.row.gtr-25.gtr-uniform {
						margin-top: -0.375em;
					}

						.row.gtr-25.gtr-uniform > * {
							padding-top: 0.375em;
						}

				.row.gtr-50 {
					margin-top: 0;
					margin-left: -0.75em;
				}

					.row.gtr-50 > * {
						padding: 0 0 0 0.75em;
					}

					.row.gtr-50.gtr-uniform {
						margin-top: -0.75em;
					}

						.row.gtr-50.gtr-uniform > * {
							padding-top: 0.75em;
						}

				.row {
					margin-top: 0;
					margin-left: -1.5em;
				}

					.row > * {
						padding: 0 0 0 1.5em;
					}

					.row.gtr-uniform {
						margin-top: -1.5em;
					}

						.row.gtr-uniform > * {
							padding-top: 1.5em;
						}

				.row.gtr-150 {
					margin-top: 0;
					margin-left: -2.25em;
				}

					.row.gtr-150 > * {
						padding: 0 0 0 2.25em;
					}

					.row.gtr-150.gtr-uniform {
						margin-top: -2.25em;
					}

						.row.gtr-150.gtr-uniform > * {
							padding-top: 2.25em;
						}

				.row.gtr-200 {
					margin-top: 0;
					margin-left: -3em;
				}

					.row.gtr-200 > * {
						padding: 0 0 0 3em;
					}

					.row.gtr-200.gtr-uniform {
						margin-top: -3em;
					}

						.row.gtr-200.gtr-uniform > * {
							padding-top: 3em;
						}

		}

/* Section/Article */

	section.special, article.special {
		text-align: center;
	}

	header p {
		color: rgba(255, 255, 255, 0.5);
		position: relative;
		top: -0.25em;
	}

	header h3 + p {
		font-size: 1.1em;
	}

	header h4 + p,
	header h5 + p,
	header h6 + p {
		font-size: 0.9em;
	}

	header.major {
		margin: 0 0 3.5em 0;
	}

		header.major h2, header.major h3, header.major h4, header.major h5, header.major h6 {
			border-bottom: solid 2px #fff;
			display: inline-block;
			padding-bottom: 1em;
			position: relative;
		}

			header.major h2:after, header.major h3:after, header.major h4:after, header.major h5:after, header.major h6:after {
				content: '';
				display: block;
				height: 1px;
			}

		header.major p {
			color: #fff;
			top: 0;
		}

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

			header.major {
				margin: 0 0 2em 0;
			}

		}

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

		header br {
			display: none;
		}

	}



/* Box */

	.box {

		border: solid 2px #fff;
		margin-bottom: 2em;
		padding: 1.5em;
	}

		.box > :last-child,
		.box > :last-child > :last-child,
		.box > :last-child > :last-child > :last-child {
			margin-bottom: 0;
		}

		.box.alt {
			border: 0;
			border-radius: 0;
			padding: 0;
		}

/* Icon */

	.icon {
		text-decoration: none;
		border-bottom: none;
		position: relative;
	}

		.icon:before {
			-moz-osx-font-smoothing: grayscale;
			-webkit-font-smoothing: antialiased;
			display: inline-block;
			font-style: normal;
			font-variant: normal;
			text-rendering: auto;
			line-height: 1;
			text-transform: none !important;
			font-family: 'Font Awesome 5 Free';
			font-weight: 400;
		}

		.icon > .label {
			display: none;
		}

		.icon:before {
			line-height: inherit;
		}

		.icon.solid:before {
			font-weight: 900;
		}

		.icon.brands:before {
			font-family: 'Font Awesome 5 Brands';
		}



		.icon.major {
			-moz-transform: rotate(-45deg);
			-webkit-transform: rotate(-45deg);
			-ms-transform: rotate(-45deg);
			transform: rotate(-45deg);

			border: solid 2px #fff;
			display: inline-block;
			font-size: 1.35em;
			height: calc(3em + 2px);
			line-height: 3em;
			text-align: center;
			width: calc(3em + 2px);
		}

			.icon.major:before {
				-moz-transform: rotate(45deg);
				-webkit-transform: rotate(45deg);
				-ms-transform: rotate(45deg);
				transform: rotate(45deg);
				display: inline-block;
				font-size: 1.5em;
			}

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

				.icon.major {
					font-size: 1em;
				}

			}

		.icon.style1 {
			color: #00ffcc;
		}

		.icon.style2 {
			color: #00f0ff;
		}

		.icon.style3 {
			color: #76ddff;
		}

/* Image */

	.image {

		border: 0;
		display: inline-block;
		position: relative;
	}

		.image img {

			display: block;
		}

		.image.left {
			float: left;
			margin: 0 2em 2em 0;
			top: 0.25em;
		}

		.image.right {
			float: right;
			margin: 0 0 2em 2em;
			top: 0.25em;
		}

		.image.left, .image.right {
			max-width: 40%;
		}

			.image.left img, .image.right img {
				width: 100%;
			}

		.image.fit {
			display: block;
			margin: 0 0 2em 0;
			width: 100%;
		}

			.image.fit img {
				width: 100%;
			}

/* List */

	ol {
		list-style: decimal;
		margin: 0 0 2em 0;
		padding-left: 1.25em;
	}

		ol li {
			padding-left: 0.25em;
		}

	ul {
		list-style: disc;
		margin: 0 0 0.5em 0;
		padding-left: 1em;
	}

		ul li {
			padding-left: 0.5em;
		}

		ul.alt {
			list-style: none;
			padding-left: 0;
		}

			ul.alt li {
				border-top: solid 1px #fff;
				padding: 0.5em 0;
			}

				ul.alt li:first-child {
					border-top: 0;
					padding-top: 0;
				}



				.box_normal ul {
					list-style: none;
					margin: 0;
					padding-left: 0;
				}

					.box_normal ul li {
						padding-bottom: 0.5em;
						padding-left: 0;
					}

					.box_normal ul li:last-child {
						padding-bottom: 0em !important;
						margin-bottom: 0em !important;
					}





	dl {
		margin: 0 0 2em 0;
	}

/* Actions */

	ul.actions {
		display: -moz-flex;
		display: -webkit-flex;
		display: -ms-flex;
		display: flex;
		cursor: default;
		list-style: none;
		margin-left: -1em;
		padding-left: 0;
	}

		ul.actions li {
			padding: 0 0 0 1em;
			vertical-align: middle;
		}

		ul.actions.special {
			-moz-justify-content: center;
			-webkit-justify-content: center;
			-ms-justify-content: center;
			justify-content: center;
			width: 100%;
			margin-left: 0;
		}

			ul.actions.special li:first-child {
				padding-left: 0;
			}

		ul.actions.stacked {
			-moz-flex-direction: column;
			-webkit-flex-direction: column;
			-ms-flex-direction: column;
			flex-direction: column;
			margin-left: 0;
		}

			ul.actions.stacked li {
				padding: 1em 0 0 0;
			}

				ul.actions.stacked li:first-child {
					padding-top: 0;
				}

		ul.actions.fit {
			width: calc(100% + 1em);
		}

			ul.actions.fit li {
				-moz-flex-grow: 1;
				-webkit-flex-grow: 1;
				-ms-flex-grow: 1;
				flex-grow: 1;
				-moz-flex-shrink: 1;
				-webkit-flex-shrink: 1;
				-ms-flex-shrink: 1;
				flex-shrink: 1;
				width: 100%;
			}

				ul.actions.fit li > * {
					width: 100%;
				}

			ul.actions.fit.stacked {
				width: 100%;
			}

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

			ul.actions:not(.fixed) {
				-moz-flex-direction: column;
				-webkit-flex-direction: column;
				-ms-flex-direction: column;
				flex-direction: column;
				margin-left: 0;
				width: 100% !important;
			}

				ul.actions:not(.fixed) li {
					-moz-flex-grow: 1;
					-webkit-flex-grow: 1;
					-ms-flex-grow: 1;
					flex-grow: 1;
					-moz-flex-shrink: 1;
					-webkit-flex-shrink: 1;
					-ms-flex-shrink: 1;
					flex-shrink: 1;
					padding: 1em 0 0 0;
					text-align: center;
					width: 100%;
				}

					ul.actions:not(.fixed) li > * {
						width: 100%;
					}

					ul.actions:not(.fixed) li:first-child {
						padding-top: 0;
					}

					ul.actions:not(.fixed) li input[type="submit"],
					ul.actions:not(.fixed) li input[type="reset"],
					ul.actions:not(.fixed) li input[type="button"],
					ul.actions:not(.fixed) li button,
					ul.actions:not(.fixed) li .button {
						width: 100%;
					}

						ul.actions:not(.fixed) li input[type="submit"].icon:before,
						ul.actions:not(.fixed) li input[type="reset"].icon:before,
						ul.actions:not(.fixed) li input[type="button"].icon:before,
						ul.actions:not(.fixed) li button.icon:before,
						ul.actions:not(.fixed) li .button.icon:before {
							margin-left: -0.5em;
						}

		}

/* Icons */

	ul.icons {
		cursor: default;
		list-style: none;
		padding-left: 0;
		padding-bottom: 0;
	}

		ul.icons li {
			display: inline-block;
			padding: 0 1em 0 0;
		}

			ul.icons li:last-child {
				padding-right: 0 !important;
			}

		ul.icons.major {
			padding: 1em 0;
		}

			ul.icons.major li {
				padding-right: 3.5em;
			}

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

					ul.icons.major li {
						padding: 0 1em !important;
					}

				}

				/* Table */

					.table-wrapper {
						-webkit-overflow-scrolling: touch;
						overflow-x: auto;
						color:#4d3a2e;
					}

					.table-wrapper > table {
						margin: 0 0 1em 0;
						width: 100%;
						font-weight: bold;
					}

					.table-wrapper > table tbody {
						border: solid 1px #fff;
						border-left: 0;
						border-right: 0;
						background-color: rgba(255, 255, 255, 0.2);
					}

						.table-wrapper > table tbody tr {
							border: solid 1px #fff;
							border-left: 0;
							border-right: 0;
						}





							.table-wrapper > table tbody tr:nth-child(1n + 1) {
								background-color: rgba(255, 255, 255, 0.38);
							}

						.table-wrapper > table.alt tbody td.td1 {
							padding: 0.75em 0.75em;
							width:75%;
						}
						@media screen and (max-width: 414px) {
							.table-wrapper > table.alt tbody td.td1 {
								padding: 0.75em 0.75em;
								width:65%;
							}
						}

						.table-wrapper > table.alt tbody td.td2 {
							padding: 0.75em 0.75em;
							width:25%;
						}
						@media screen and (max-width: 736px) {
							.table-wrapper > table.alt tbody td.td2 {
								padding: 0.75em 0.75em;
								width:35%;
							}
						}




						.table-wrapper > table.alt tbody td.td11 {
							padding: 0.75em 0.75em;
							width:65%;
							vertical-align: middle;
						}

						.table-wrapper > table.alt tbody td.td12 {
							padding: 0.75em 0.75em;
							width:10%;
							vertical-align: middle;
						}
						.table-wrapper > table.alt tbody td.td13 {
							padding: 0.75em 0.75em;
							width:25%;
							vertical-align: middle;
						}

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

													.table-wrapper > table.alt tbody td.td11 {
														padding: 0.75em 0.75em;
														width:55%;
														vertical-align: middle;
													}

													.table-wrapper > table.alt tbody td.td12 {
														padding: 0.75em 0.75em;
														width:20%;
														vertical-align: middle;
													}
													.table-wrapper > table.alt tbody td.td13 {
														padding: 0.75em 0.75em;
														width:25%;
														vertical-align: middle;
													}
						}









						.table-wrapper > table th {
							color: #4d3a2e !important;
							font-size: 0.9em;
							font-weight: 600;
							padding: 0 0.75em 0.75em 0.75em;
							text-align: left;
						}

						.table-wrapper > table thead {
							border-bottom: solid 2px #fff;
						}

						.table-wrapper > table tfoot {
							border-top: solid 2px #fff;
						}

						.table-wrapper > table.alt {
							border-collapse: separate;
						}

							.table-wrapper > table.alt tbody tr td {
								border: solid 1px #fff;
								border-left-width: 0;
								border-top-width: 0;
							}

								.table-wrapper > table.alt tbody tr td:first-child {
									border-left-width: 1px;
								}

							.table-wrapper > table.alt tbody tr:first-child td {
								border-top-width: 1px;
							}

							.table-wrapper > table.alt thead {
								border-bottom: 0;
							}

							.table-wrapper > table.alt tfoot {
								border-top: 0;
							}








/* table02 */

#table01{
	width:100%;
	text-align: left;

}

#table01 tr {
  border-bottom: 1px solid rgba(77,58,46,0.35);
	background-color: transparent !important;
}

#table01 tr:first-child{
  border-top: 1px solid rgba(77,58,46,0.35);
}



#table01 th,
#table01 td {
  padding: 2em 0;
  border: none;
	color:#4d3a2e !important;
	line-height: 2em;
}

#table01 th {
  width: 30%;
	font-weight: bold;
}

/* sp */
@media only screen and (max-width: 480px) {
  #table01 th,
  #table01 td {
    width: 100%;
    display: block;
  }

  #table01 th {
    width: 100%;
  }

  #table01 td {
    padding-top: 0;
  }
}








/* Table03 */

	.table-wrapper03 {
		-webkit-overflow-scrolling: touch;
		overflow-x: auto;
		color:#4d3a2e;
	}

	.table-wrapper03 > table {
		margin: 0;
		width: 100%;
	}

	.table-wrapper03 > table tbody {
		border: solid 1px #fff;
		border-left: 0;
		border-right: 0;
		background-color: #efebe1;
	}

		.table-wrapper03 > table tbody tr {
			border: solid 1px #fff;
			border-left: 0;
			border-right: 0;
		}





			.table-wrapper03 > table tbody tr:nth-child(1n + 1) {
				background-color: rgba(255, 255, 255, 0.38);
			}

		.table-wrapper03 > table.alt tbody td.td1 {
			padding: 0.75em 0.75em;
			width:30%;
			font-weight: bold;
		}
		@media screen and (max-width: 414px) {
			.table-wrapper03 > table.alt tbody td.td1 {
				padding: 0.75em 0.75em;
				width:30%;
				font-weight: bold;
			}
		}

		.table-wrapper03 > table.alt tbody td.td2 {
			padding: 0.75em 0.75em;
			width:70%;
		}
		@media screen and (max-width: 736px) {
			.table-wrapper03 > table.alt tbody td.td2 {
				padding: 0.75em 0.75em;
				width:70%;
			}
		}




		.table-wrapper03 > table th {
			color: #fff !important;
			font-size: 1em;
			font-weight: 600;
			padding: 1em;
			text-align: left;
			background: #4d3a2e;
		}

		.table-wrapper03 > table thead {
			border-bottom: solid 2px #fff;
		}

		.table-wrapper03 > table tfoot {
			border-top: solid 2px #fff;
		}

		.table-wrapper03 > table.alt {
			border-collapse: separate;
		}

			.table-wrapper03 > table.alt tbody tr td {
				border: solid 1px #fff;
				border-left-width: 0;
				border-top-width: 0;
			}

				.table-wrapper03 > table.alt tbody tr td:first-child {
					border-left-width: 1px;
				}

			.table-wrapper03 > table.alt tbody tr:first-child td {
				border-top-width: 1px;
			}

			.table-wrapper03 > table.alt thead {
				border-bottom: 0;
			}

			.table-wrapper03 > table.alt tfoot {
				border-top: 0;
			}
















/* Button */

	input[type="submit"],
	input[type="reset"],
	input[type="button"],
	button,
	.button {
		-moz-appearance: none;
		-webkit-appearance: none;
		-ms-appearance: none;
		appearance: none;
		-moz-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
		-webkit-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
		-ms-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
		transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
		background-color: transparent;

		border: 0;
		box-shadow: inset 0 0 0 2px #fff;
		color: #fff;
		cursor: pointer;
		display: inline-block;
		font-size: 0.8em;
		font-weight: 600;
		height: 3.125em;
		letter-spacing: 0.225em;
		line-height: 3.125em;
		max-width: 150em;
		padding: 0 2.75em;
		text-align: center;
		text-decoration: none;

		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

		input[type="submit"]:hover,
		input[type="reset"]:hover,
		input[type="button"]:hover,
		button:hover,
		.button:hover {
			background-color: rgba(144, 144, 144, 0.25);
		}

		input[type="submit"]:active,
		input[type="reset"]:active,
		input[type="button"]:active,
		button:active,
		.button:active {
			background-color: rgba(144, 144, 144, 0.5);
		}

		input[type="submit"].icon:before,
		input[type="reset"].icon:before,
		input[type="button"].icon:before,
		button.icon:before,
		.button.icon:before {
			margin-right: 0.5em;
		}

		input[type="submit"].fit,
		input[type="reset"].fit,
		input[type="button"].fit,
		button.fit,
		.button.fit {
			width: 100%;
		}

		input[type="submit"].small,
		input[type="reset"].small,
		input[type="button"].small,
		button.small,
		.button.small {
			font-size: 0.8em;
		}

		input[type="submit"].large,
		input[type="reset"].large,
		input[type="button"].large,
		button.large,
		.button.large {
			font-size: 1.35em;
		}

		input[type="submit"].primary,
		input[type="reset"].primary,
		input[type="button"].primary,
		button.primary,
		.button.primary {
			background-color: #E36414;
			box-shadow: none !important;
			color: #ffffff !important;
		}

			input[type="submit"].primary:hover,
			input[type="reset"].primary:hover,
			input[type="button"].primary:hover,
			button.primary:hover,
			.button.primary:hover {
				background-color: #cf5b12 !important;
			}

			input[type="submit"].primary:active,
			input[type="reset"].primary:active,
			input[type="button"].primary:active,
			button.primary:active,
			.button.primary:active {
				background-color: #eb341c !important;
			}

		input[type="submit"].disabled, input[type="submit"]:disabled,
		input[type="reset"].disabled,
		input[type="reset"]:disabled,
		input[type="button"].disabled,
		input[type="button"]:disabled,
		button.disabled,
		button:disabled,
		.button.disabled,
		.button:disabled {
			pointer-events: none;
			opacity: 0.25;
		}

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

			input[type="submit"],
			input[type="reset"],
			input[type="button"],
			button,
			.button {
				height: 3.75em;
				line-height: 3.75em;
			}

		}

/* Features */

	.features {
		display: -moz-flex;
		display: -webkit-flex;
		display: -ms-flex;
		display: flex;
		-moz-flex-wrap: wrap;
		-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		-moz-justify-content: center;
		-webkit-justify-content: center;
		-ms-justify-content: center;
		justify-content: center;
		list-style: none;
		padding: 0;
		width: 100%;
	}

		.features li {
			padding: 4em 4em 2em 6em ;
			display: block;
			position: relative;
			text-align: left;
			width: 50%;
		}

			.features li:nth-child(1) {
				background-color: rgba(0, 0, 0, 0.035);
			}

			.features li:nth-child(2) {
				background-color: rgba(0, 0, 0, 0.07);
			}

			.features li:nth-child(3) {
				background-color: rgba(0, 0, 0, 0.105);
			}

			.features li:nth-child(4) {
				background-color: rgba(0, 0, 0, 0.14);
			}

			.features li:nth-child(5) {
				background-color: rgba(0, 0, 0, 0.175);
			}

			.features li:nth-child(6) {
				background-color: rgba(0, 0, 0, 0.21);
			}

			.features li:nth-child(7) {
				background-color: rgba(0, 0, 0, 0.245);
			}

			.features li:nth-child(8) {
				background-color: rgba(0, 0, 0, 0.28);
			}

			.features li:nth-child(9) {
				background-color: rgba(0, 0, 0, 0.315);
			}

			.features li:nth-child(10) {
				background-color: rgba(0, 0, 0, 0.35);
			}

			.features li:before {
				display: block;
				color: #00ffcc;
				position: absolute;
				left: 1.75em;
				top: 2.75em;
				font-size: 1.5em;
			}

			.features li:nth-child(1) {
				border-top-left-radius: 3px;
			}

			.features li:nth-child(2) {
				border-top-right-radius: 3px;
			}

			.features li:nth-last-child(1) {
				border-bottom-right-radius: 3px;
			}

			.features li:nth-last-child(2) {
				border-bottom-left-radius: 3px;
			}

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

				.features li {
					padding: 3em 2em 1em 2em ;
					text-align: center;
				}

					.features li:before {
						left: 0;
						margin: 0 0 1em 0;
						position: relative;
						top: 0;
					}

			}

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

				.features li {
					padding: 3em 0 1em 0 ;
					background-color: transparent !important;
					border-top: solid 2px #fff;
					width: 100%;
				}

					.features li:first-child {
						border-top: 0;
					}

			}

/* Spotlight */

	.spotlight {
		-moz-align-items: center;
		-webkit-align-items: center;
		-ms-align-items: center;
		align-items: center;
		display: -moz-flex;
		display: -webkit-flex;
		display: -ms-flex;
		display: flex;
	}

		.spotlight .image {
			-moz-order: 1;
			-webkit-order: 1;
			-ms-order: 1;
			order: 1;
			border-radius: 0;
			width: 40%;
		}

			.spotlight .image img {
				border-radius: 0;
				width: 100%;
			}

		.spotlight .content {
			padding: 2em 4em 0.1em 4em ;
			-moz-order: 2;
			-webkit-order: 2;
			-ms-order: 2;
			order: 2;
			max-width: 48em;
			width: 60%;
		}

		.spotlight:nth-child(2n) {
			-moz-flex-direction: row-reverse;
			-webkit-flex-direction: row-reverse;
			-ms-flex-direction: row-reverse;
			flex-direction: row-reverse;
		}

		.spotlight:nth-child(1) {
			background-color: rgba(0, 0, 0, 0.075);
		}

		.spotlight:nth-child(2) {
			background-color: rgba(0, 0, 0, 0.15);
		}

		.spotlight:nth-child(3) {
			background-color: rgba(0, 0, 0, 0.225);
		}

		.spotlight:nth-child(4) {
			background-color: rgba(0, 0, 0, 0.3);
		}

		.spotlight:nth-child(5) {
			background-color: rgba(0, 0, 0, 0.375);
		}

		.spotlight:nth-child(6) {
			background-color: rgba(0, 0, 0, 0.45);
		}

		.spotlight:nth-child(7) {
			background-color: rgba(0, 0, 0, 0.525);
		}

		.spotlight:nth-child(8) {
			background-color: rgba(0, 0, 0, 0.6);
		}

		.spotlight:nth-child(9) {
			background-color: rgba(0, 0, 0, 0.675);
		}

		.spotlight:nth-child(10) {
			background-color: rgba(0, 0, 0, 0.75);
		}

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

			.spotlight .image {
				width: 45%;
			}

			.spotlight .content {
				width: 55%;
			}

		}

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

			.spotlight {
				display: block;
			}

				.spotlight br {
					display: none;
				}

				.spotlight .image {
					width: 100%;
				}

				.spotlight .content {
					padding: 4em 3em 2em 3em ;
					max-width: none;
					text-align: center;
					width: 100%;
				}

		}

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

			.spotlight .content {
				padding: 3em 2em 1em 2em ;
			}

		}

/* Wrapper */

	.wrapper {
		padding: 1.5em 0 1em 0 ;
		position: relative;
	}

		.wrapper > .inner {
			width: 70%;
			margin: 0 auto;
		}

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

				.wrapper > .inner {
					width: 90%;
				}

			}

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

				.wrapper > .inner {
					width: 100%;
				}

			}



.border-box{
	box-sizing: border-box;
}






		.wrapper.alt {
			padding: 0;
		}

		.wrapper.style1 {
			background: url("https://yuni-design.com/images/bg1.gif") repeat fixed;
		}



			.wrapper.style1 strong, .wrapper.style1 b {

			}

			.wrapper.style1 h2, .wrapper.style1 h3, .wrapper.style1 h4, .wrapper.style1 h5, .wrapper.style1 h6 {

			}



			.wrapper.style1 hr {
				border-color: rgba(77,58,46,0.35);
			}



			.wrapper.style1 code {
				background: rgba(255, 255, 255, 0.075);
			}

			.wrapper.style1 header p {
				color: #a6e0db;
			}

			.wrapper.style1 header.major h2, .wrapper.style1 header.major h3, .wrapper.style1 header.major h4, .wrapper.style1 header.major h5, .wrapper.style1 header.major h6 {
				border-color: rgba(0, 0, 0, 0.125);
			}

			.wrapper.style1 header.major p {
				color: #c8ece9;
			}

			.wrapper.style1 label {
				color: #4d3a2e;
			}

			.wrapper.style1 input[type="text"],
			.wrapper.style1 input[type="password"],
			.wrapper.style1 input[type="email"],
			.wrapper.style1 select,
			.wrapper.style1 textarea {
				background-color: rgba(255, 255, 255, 0.075);
			}

			.wrapper.style1 select {
				background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' preserveAspectRatio='none' viewBox='0 0 40 40'%3E%3Cpath d='M9.4,12.3l10.4,10.4l10.4-10.4c0.2-0.2,0.5-0.4,0.9-0.4c0.3,0,0.6,0.1,0.9,0.4l3.3,3.3c0.2,0.2,0.4,0.5,0.4,0.9 c0,0.4-0.1,0.6-0.4,0.9L20.7,31.9c-0.2,0.2-0.5,0.4-0.9,0.4c-0.3,0-0.6-0.1-0.9-0.4L4.3,17.3c-0.2-0.2-0.4-0.5-0.4-0.9 c0-0.4,0.1-0.6,0.4-0.9l3.3-3.3c0.2-0.2,0.5-0.4,0.9-0.4S9.1,12.1,9.4,12.3z' fill='rgba(0, 0, 0, 0.125)' /%3E%3C/svg%3E");
			}

				.wrapper.style1 select option {
					color: #ffffff;
					background: #21b2a6;
				}

			.wrapper.style1 input[type="checkbox"] + label,
			.wrapper.style1 input[type="radio"] + label {
				color: #c8ece9;
			}

				.wrapper.style1 input[type="checkbox"] + label:before,
				.wrapper.style1 input[type="radio"] + label:before {
					background: rgba(255, 255, 255, 0.075);
				}

			.wrapper.style1 input[type="checkbox"]:checked + label:before,
			.wrapper.style1 input[type="radio"]:checked + label:before {
				background: #ffffff;
				color: #21b2a6;
			}

			.wrapper.style1 ::-webkit-input-placeholder {
				color: #a6e0db !important;
			}

			.wrapper.style1 :-moz-placeholder {
				color: #a6e0db !important;
			}

			.wrapper.style1 ::-moz-placeholder {
				color: #a6e0db !important;
			}

			.wrapper.style1 :-ms-input-placeholder {
				color: #a6e0db !important;
			}

			.wrapper.style1 .formerize-placeholder {
				color: #a6e0db !important;
			}

			.wrapper.style1 .icon.major {
				border-color: rgba(0, 0, 0, 0.125);
			}

			.wrapper.style1 ul.alt li {
				border-color: rgba(0, 0, 0, 0.125);
			}

			.wrapper.style1 table tbody tr {
				border-color: rgba(0, 0, 0, 0.125);
			}

				.wrapper.style1 table tbody tr:nth-child(2n + 1) {
					background-color: rgba(255, 255, 255, 0.075);
				}

			.wrapper.style1 table th {
				color: #ffffff;
			}

			.wrapper.style1 table thead {
				border-color: rgba(0, 0, 0, 0.125);
			}

			.wrapper.style1 table tfoot {
				border-color: rgba(0, 0, 0, 0.125);
			}

			.wrapper.style1 table.alt tbody tr td {
				border-color: rgba(0, 0, 0, 0.125);
			}

			.wrapper.style1 input[type="submit"],
			.wrapper.style1 input[type="reset"],
			.wrapper.style1 input[type="button"],
			.wrapper.style1 button,
			.wrapper.style1 .button {
				box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.125);
				color: #ffffff;
			}

				.wrapper.style1 input[type="submit"]:hover,
				.wrapper.style1 input[type="reset"]:hover,
				.wrapper.style1 input[type="button"]:hover,
				.wrapper.style1 button:hover,
				.wrapper.style1 .button:hover {
					background-color: rgba(255, 255, 255, 0.075);
				}

				.wrapper.style1 input[type="submit"]:active,
				.wrapper.style1 input[type="reset"]:active,
				.wrapper.style1 input[type="button"]:active,
				.wrapper.style1 button:active,
				.wrapper.style1 .button:active {
					background-color: rgba(255, 255, 255, 0.2);
				}

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

				.wrapper.style1 .features li {
					border-top-color: rgba(0, 0, 0, 0.125);
				}

			}
















		.wrapper.style2 {
			background-color: #2e3842;
		}

		.wrapper.style3 {
			background-color: #505393;
			color: #d3d4e4;
		}

			.wrapper.style3 strong, .wrapper.style3 b {
				color: #ffffff;
			}

			.wrapper.style3 h2, .wrapper.style3 h3, .wrapper.style3 h4, .wrapper.style3 h5, .wrapper.style3 h6 {
				color: #ffffff;
			}

			.wrapper.style3 hr {
				border-color: rgba(77,58,46,0.35);
			}



			.wrapper.style3 code {
				background: rgba(255, 255, 255, 0.075);
			}

			.wrapper.style3 header p {
				color: #b9bad4;
			}

			.wrapper.style3 header.major h2, .wrapper.style3 header.major h3, .wrapper.style3 header.major h4, .wrapper.style3 header.major h5, .wrapper.style3 header.major h6 {
				border-color: rgba(0, 0, 0, 0.125);
			}

			.wrapper.style3 header.major p {
				color: #d3d4e4;
			}

			.wrapper.style3 label {
				color: #ffffff;
			}

			.wrapper.style3 input[type="text"],
			.wrapper.style3 input[type="password"],
			.wrapper.style3 input[type="email"],
			.wrapper.style3 select,
			.wrapper.style3 textarea {
				background-color: rgba(255, 255, 255, 0.075);
			}

			.wrapper.style3 select {
				background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' preserveAspectRatio='none' viewBox='0 0 40 40'%3E%3Cpath d='M9.4,12.3l10.4,10.4l10.4-10.4c0.2-0.2,0.5-0.4,0.9-0.4c0.3,0,0.6,0.1,0.9,0.4l3.3,3.3c0.2,0.2,0.4,0.5,0.4,0.9 c0,0.4-0.1,0.6-0.4,0.9L20.7,31.9c-0.2,0.2-0.5,0.4-0.9,0.4c-0.3,0-0.6-0.1-0.9-0.4L4.3,17.3c-0.2-0.2-0.4-0.5-0.4-0.9 c0-0.4,0.1-0.6,0.4-0.9l3.3-3.3c0.2-0.2,0.5-0.4,0.9-0.4S9.1,12.1,9.4,12.3z' fill='rgba(0, 0, 0, 0.125)' /%3E%3C/svg%3E");
			}

				.wrapper.style3 select option {
					color: #ffffff;
					background: #505393;
				}

			.wrapper.style3 input[type="checkbox"] + label,
			.wrapper.style3 input[type="radio"] + label {
				color: #d3d4e4;
			}

				.wrapper.style3 input[type="checkbox"] + label:before,
				.wrapper.style3 input[type="radio"] + label:before {
					background: rgba(255, 255, 255, 0.075);
				}

			.wrapper.style3 input[type="checkbox"]:checked + label:before,
			.wrapper.style3 input[type="radio"]:checked + label:before {
				background: #ffffff;
				color: #505393;
			}

			.wrapper.style3 ::-webkit-input-placeholder {
				color: #b9bad4 !important;
			}

			.wrapper.style3 :-moz-placeholder {
				color: #b9bad4 !important;
			}

			.wrapper.style3 ::-moz-placeholder {
				color: #b9bad4 !important;
			}

			.wrapper.style3 :-ms-input-placeholder {
				color: #b9bad4 !important;
			}

			.wrapper.style3 .formerize-placeholder {
				color: #b9bad4 !important;
			}

			.wrapper.style3 .icon.major {
				border-color: rgba(0, 0, 0, 0.125);
			}

			.wrapper.style3 ul.alt li {
				border-color: rgba(0, 0, 0, 0.125);
			}

			.wrapper.style3 table tbody tr {
				border-color: rgba(0, 0, 0, 0.125);
			}

				.wrapper.style3 table tbody tr:nth-child(2n + 1) {
					background-color: rgba(255, 255, 255, 0.075);
				}

			.wrapper.style3 table th {
				color: #ffffff;
			}

			.wrapper.style3 table thead {
				border-color: rgba(0, 0, 0, 0.125);
			}

			.wrapper.style3 table tfoot {
				border-color: rgba(0, 0, 0, 0.125);
			}

			.wrapper.style3 table.alt tbody tr td {
				border-color: rgba(0, 0, 0, 0.125);
			}

			.wrapper.style3 input[type="submit"],
			.wrapper.style3 input[type="reset"],
			.wrapper.style3 input[type="button"],
			.wrapper.style3 button,
			.wrapper.style3 .button {
				box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.125);
				color: #ffffff;
			}

				.wrapper.style3 input[type="submit"]:hover,
				.wrapper.style3 input[type="reset"]:hover,
				.wrapper.style3 input[type="button"]:hover,
				.wrapper.style3 button:hover,
				.wrapper.style3 .button:hover {
					background-color: rgba(255, 255, 255, 0.075);
				}

				.wrapper.style3 input[type="submit"]:active,
				.wrapper.style3 input[type="reset"]:active,
				.wrapper.style3 input[type="button"]:active,
				.wrapper.style3 button:active,
				.wrapper.style3 .button:active {
					background-color: rgba(255, 255, 255, 0.2);
				}

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

				.wrapper.style3 .features li {
					border-top-color: rgba(0, 0, 0, 0.125);
				}

			}

		.wrapper.style4 {
			background-color: transparent;
		}

		.wrapper.style5 {
			background-color: #ffffff;
			color: #4E4852;
		}

			.wrapper.style5 strong, .wrapper.style5 b {
				color: #2E3842;
			}

			.wrapper.style5 h2, .wrapper.style5 h3, .wrapper.style5 h4, .wrapper.style5 h5, .wrapper.style5 h6 {
				color: #2E3842;
			}

			.wrapper.style5 hr {
				border-color: rgba(77,58,46,0.35);
			}



			.wrapper.style5 code {
				background: rgba(0, 0, 0, 0.0375);
			}

			.wrapper.style5 header p {
				color: #8E8892;
			}

			.wrapper.style5 header.major h2, .wrapper.style5 header.major h3, .wrapper.style5 header.major h4, .wrapper.style5 header.major h5, .wrapper.style5 header.major h6 {
				border-color: #dfdfdf;
			}

			.wrapper.style5 header.major p {
				color: #4E4852;
			}

			.wrapper.style5 label {
				color: #2E3842;
			}

			.wrapper.style5 input[type="text"],
			.wrapper.style5 input[type="password"],
			.wrapper.style5 input[type="email"],
			.wrapper.style5 select,
			.wrapper.style5 textarea {
				background-color: rgba(0, 0, 0, 0.0375);
			}

			.wrapper.style5 select {
				background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' preserveAspectRatio='none' viewBox='0 0 40 40'%3E%3Cpath d='M9.4,12.3l10.4,10.4l10.4-10.4c0.2-0.2,0.5-0.4,0.9-0.4c0.3,0,0.6,0.1,0.9,0.4l3.3,3.3c0.2,0.2,0.4,0.5,0.4,0.9 c0,0.4-0.1,0.6-0.4,0.9L20.7,31.9c-0.2,0.2-0.5,0.4-0.9,0.4c-0.3,0-0.6-0.1-0.9-0.4L4.3,17.3c-0.2-0.2-0.4-0.5-0.4-0.9 c0-0.4,0.1-0.6,0.4-0.9l3.3-3.3c0.2-0.2,0.5-0.4,0.9-0.4S9.1,12.1,9.4,12.3z' fill='%23dfdfdf' /%3E%3C/svg%3E");
			}

				.wrapper.style5 select option {
					color: #2E3842;
					background: #ffffff;
				}

			.wrapper.style5 input[type="checkbox"] + label,
			.wrapper.style5 input[type="radio"] + label {
				color: #4E4852;
			}

				.wrapper.style5 input[type="checkbox"] + label:before,
				.wrapper.style5 input[type="radio"] + label:before {
					background: rgba(0, 0, 0, 0.0375);
				}

			.wrapper.style5 input[type="checkbox"]:checked + label:before,
			.wrapper.style5 input[type="radio"]:checked + label:before {
				background: #2E3842;
				color: #ffffff;
			}

			.wrapper.style5 ::-webkit-input-placeholder {
				color: #8E8892 !important;
			}

			.wrapper.style5 :-moz-placeholder {
				color: #8E8892 !important;
			}

			.wrapper.style5 ::-moz-placeholder {
				color: #8E8892 !important;
			}

			.wrapper.style5 :-ms-input-placeholder {
				color: #8E8892 !important;
			}

			.wrapper.style5 .formerize-placeholder {
				color: #8E8892 !important;
			}

			.wrapper.style5 .icon.major {
				border-color: #dfdfdf;
			}

			.wrapper.style5 ul.alt li {
				border-color: #dfdfdf;
			}

			.wrapper.style5 table tbody tr {
				border-color: #dfdfdf;
			}

				.wrapper.style5 table tbody tr:nth-child(2n + 1) {
					background-color: rgba(0, 0, 0, 0.0375);
				}

			.wrapper.style5 table th {
				color: #2E3842;
			}

			.wrapper.style5 table thead {
				border-color: #dfdfdf;
			}

			.wrapper.style5 table tfoot {
				border-color: #dfdfdf;
			}

			.wrapper.style5 table.alt tbody tr td {
				border-color: #dfdfdf;
			}

			.wrapper.style5 input[type="submit"],
			.wrapper.style5 input[type="reset"],
			.wrapper.style5 input[type="button"],
			.wrapper.style5 button,
			.wrapper.style5 .button {
				box-shadow: inset 0 0 0 2px #dfdfdf;
				color: #2E3842;
			}

				.wrapper.style5 input[type="submit"]:hover,
				.wrapper.style5 input[type="reset"]:hover,
				.wrapper.style5 input[type="button"]:hover,
				.wrapper.style5 button:hover,
				.wrapper.style5 .button:hover {
					background-color: rgba(0, 0, 0, 0.0375);
				}

				.wrapper.style5 input[type="submit"]:active,
				.wrapper.style5 input[type="reset"]:active,
				.wrapper.style5 input[type="button"]:active,
				.wrapper.style5 button:active,
				.wrapper.style5 .button:active {
					background-color: rgba(0, 0, 0, 0.1);
				}

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

				.wrapper.style5 .features li {
					border-top-color: #dfdfdf;
				}

			}

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

			.wrapper {
				padding: 4em 3em 2em 3em ;
			}

		}

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

			.wrapper {
				padding: 3em 2em 1em 2em ;
			}

		}

/* Page Wrapper + Menu */

	#page-wrapper {
		-moz-transition: opacity 0.5s ease;
		-webkit-transition: opacity 0.5s ease;
		-ms-transition: opacity 0.5s ease;
		transition: opacity 0.5s ease;
		opacity: 1;
		padding-top: 3em;
	}

		#page-wrapper:before {
			background: #efebe1;
			opacity: 0.5;
			content: '';
			display: block;
			display: none;
			height: 100%;
			left: 0;
			position: fixed;
			top: 0;
			width: 100%;
			z-index: 10001;
		}






	#menu {
		-moz-transform: translateX(20em);
		-webkit-transform: translateX(20em);
		-ms-transform: translateX(20em);
		transform: translateX(20em);
		-moz-transition: -moz-transform 0.5s ease;
		-webkit-transition: -webkit-transform 0.5s ease;
		-ms-transition: -ms-transform 0.5s ease;
		transition: transform 0.5s ease;
		-webkit-overflow-scrolling: touch;
		background: #4d3a2e;
		color: #ffffff;
		height: 100%;
		max-width: 80%;
		overflow-y: auto;
		padding: 3em 2em;
		position: fixed;
		right: 0;
		top: 0;
		width: 20em;
		z-index: 10002;
	}

/*
	#menu:before {
	background-color: #E36414;
	width: 3px;
	height: 100%;
	display: block;
	position: absolute;
	top: 0;
	left: 0.6em;
	content: "";
	}
*/





		#menu ul {
			list-style: none;
			padding: 0;
		}

			#menu ul > li {
				border-top: solid 1px rgba(255, 255, 255, 0.1);
				margin: 0.5em 0 0 0;
				padding: 0.5em 0 0 0;
			}

				#menu ul > li:first-child {
					border-top: 0 !important;
					margin-top: 0 !important;
					padding-top: 0 !important;
				}

				#menu ul > li > a {
					border: 0;
					color: inherit;
					display: block;
					font-size: 0.8em;
					letter-spacing: 0.225em;
					outline: 0;
					text-decoration: none;

				}

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

						#menu ul > li > a {
							line-height: 2.7em;
						}

					}

		#menu .close {
			background-image: url("images/close.svg");
			background-position: 4.85em 1em;
			background-repeat: no-repeat;
			border: 0;
			cursor: pointer;
			display: block;
			height: 3em;
			position: absolute;
			right: 0;
			top: 0;
			vertical-align: middle;
			width: 7em;
		}

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

			#menu {
				padding: 3em 1.5em;
			}

		}



	body.is-menu-visible #page-wrapper {
		opacity: 0.35;
	}



		body.is-menu-visible #page-wrapper:before {

			display: block;
		}


	body.is-menu-visible #menu {
		-moz-transform: translateX(0);
		-webkit-transform: translateX(0);
		-ms-transform: translateX(0);
		transform: translateX(0);
	}

/* Header */

	#header {
		-moz-transition: background-color 0.2s ease;
		-webkit-transition: background-color 0.2s ease;
		-ms-transition: background-color 0.2s ease;
		transition: background-color 0.2s ease;
		background: #4d3a2e;
		height: 3em;
		left: 0;
		line-height: 2.8em;
		position: fixed;
		top: 0;
		width: 100%;
		z-index: 10000;
	}






		#header .htxt {
			-moz-transition: opacity 0.2s ease;
			-webkit-transition: opacity 0.2s ease;
			-ms-transition: opacity 0.2s ease;
			transition: opacity 0.2s ease;
			height: inherit;
			left: 1.25em;
			line-height: inherit;
			position: absolute;
			top: 0;
		}

			#header .htxt a {
				border: 0;
				display: block;
				height: inherit;
				line-height: inherit;
			}

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

					#header .htxt a {
						font-size: 0.8em;
					}

				}

		#header nav {
			height: inherit;
			line-height: inherit;
			position: absolute;
			right: 0;
			top: 0;
		}

			#header nav > ul {
				list-style: none;
				margin: 0;
				padding: 0;
				white-space: nowrap;
			}

				#header nav > ul > li {
					display: inline-block;
					padding: 0;
				}

					#header nav > ul > li > a {
						border: 0;
						color: #fff;
						display: block;
						font-size: 0.8em;
						letter-spacing: 0.225em;
						padding: 0 1.5em 0 0.5em;

					}

					#header nav > ul > li.nav_icon > a {
						border: 0;
						color: #fff;
						display: inline-block;
						font-size: 1.15em;
						vertical-align: middle;

						padding: 0 0.6em;
						-moz-transition: opacity 0.2s ease;
						-webkit-transition: opacity 0.2s ease;
						-ms-transition: opacity 0.2s ease;
						transition: opacity 0.2s ease;
					}

					#header nav > ul > li.nav_icon > a:hover {
						opacity: 0.6;
						-moz-transition: opacity 0.2s ease;
						-webkit-transition: opacity 0.2s ease;
						-ms-transition: opacity 0.2s ease;
						transition: opacity 0.2s ease;
					}


@media screen and (max-width: 430px){
	#header nav > ul > li.nav_icon > a {

		padding: 0 0.6em;

	}
}






						#header nav > ul > li > a.menuToggle {
							outline: 0;
							position: relative;

						}



							#header nav > ul > li > a.menuToggle:after {
								background-image: url("images/bars.svg");
								background-position: right center;
								background-repeat: no-repeat;
								content: '';
								display: inline-block;
								height: 3.75em;
								vertical-align: middle;
								width: 1.7em;
							}





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

								#header nav > ul > li > a.menuToggle {
									padding: 0 1.5em;
								}

									#header nav > ul > li > a.menuToggle span {
										display: none;
									}

							}

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

							#header nav > ul > li > a {
								padding: 0 0 0 1.5em;
							}

						}

					#header nav > ul > li:first-child {
						margin-left: 0;
					}

		#header.alt {
			background: transparent;

		}

			#header.alt .htxt {
				pointer-events: none;
				opacity: 0;
			}

			#header.alt nav > ul > li > a.menuToggle {
				outline: 0;
				position: relative;
				color:#4d3a2e;

			}

			#header.alt nav > ul > li > a.menuToggle:after {
				background-image: url("images/bars.svg");
				background-position: right center;
				background-repeat: no-repeat;
				content: '';
				display: inline-block;
				height: 3.75em;
				vertical-align: middle;
				width: 1.7em;
				filter: brightness(0) saturate(100%) invert(21%) sepia(18%) saturate(855%) hue-rotate(340deg) brightness(98%) contrast(89%);
			}

			#header.alt nav > ul > li.nav_icon > a {
				border: 0;
				color: #4d3a2e;
				display: inline-block;
        font-size: 1.15em;
				vertical-align: middle;

				padding: 0 0.6em;
			}

			#header.alt nav > ul > li.nav_icon > a:hover {
				opacity: 0.6;
			}

			@media screen and (max-width: 430px){
				#header.alt nav > ul > li.nav_icon > a {

					padding: 0 0.6em;

				}
			}














/* Banner */

	#banner {
		display: -moz-flex;
		display: -webkit-flex;
		display: -ms-flex;
		display: flex;
		-moz-flex-direction: column;
		-webkit-flex-direction: column;
		-ms-flex-direction: column;
		flex-direction: column;
		-moz-justify-content: center;
		-webkit-justify-content: center;
		-ms-justify-content: center;
		justify-content: center;
		cursor: default;
		height: 100vh;
		min-height: 40em;
		overflow: hidden;
		position: relative;
		text-align: center;
		background: url("https://yuni-design.com/images/bg1.gif") repeat fixed;
	}




	#banner .inner img {
		max-width: 350px;
	}
@media screen and (max-width: 430px){
	#banner .inner img {
		max-width: 270px;
	}
}





	#banner .logo {
		-moz-transform: scale(1);
		-webkit-transform: scale(1);
		-ms-transform: scale(1);
		transform: scale(1);
		-moz-transition: -moz-transform 1s ease, opacity 1s ease;
		-webkit-transition: -webkit-transform 1s ease, opacity 1s ease;
		-ms-transition: -ms-transform 1s ease, opacity 1s ease;
		transition: transform 1s ease, opacity 1s ease;
		display: inline-block;
		opacity: 1;
		padding: 1em;
		position: relative;
		z-index: 1;
	}



	#banner .logo img{
				width:100% !important;
				max-width:180px;
			}

			@media screen and (max-width: 1024px){
				#banner .logo img{
					width:100% !important;
					max-width:150px !important;
				}
			}

				@media screen and (max-width: 736px){
					#banner .logo img{
						width:100% !important;
						max-width:130px !important;
					}
				}
				@media screen and (max-width: 400px){
					#banner .logo img{
						width:100% !important;
						max-width:110px !important;
					}
				}



			#banner .logo:before {
				top: 0;
				left: 0;
			}

			#banner .logo:after {
				bottom: 0;
				right: 0;
			}



		#banner p {
			font-size: 0.9em;
			letter-spacing: 0.225em;
			line-height: 1.6em;
		}
@media screen and (max-width: 480px){
	#banner p {
		font-size: 0.85em;
		letter-spacing: 0.2em;
		line-height: 1.5em;
	}
}


#banner .catch_copy{
	font-size: 1.2em;
}
@media screen and (max-width: 480px){
	#banner .catch_copy{
		font-size: 1em;
	}
}





			#banner p a {
				color: inherit;
			}

		#banner .more {
			-moz-transition: -moz-transform 0.75s ease, opacity 0.75s ease;
			-webkit-transition: -webkit-transform 0.75s ease, opacity 0.75s ease;
			-ms-transition: -ms-transform 0.75s ease, opacity 0.75s ease;
			transition: transform 0.75s ease, opacity 0.75s ease;
			-moz-transition-delay: 2s;
			-webkit-transition-delay: 2s;
			-ms-transition-delay: 2s;
			transition-delay: 2s;
			-moz-transform: translateY(0);
			-webkit-transform: translateY(0);
			-ms-transform: translateY(0);
			transform: translateY(0);
			border: none;
			letter-spacing: 0.225em;
			margin-left: -0.5em;
			opacity: 1;
			outline: 0;
			position: absolute;
			text-align: center;
			z-index: 1;
		}



		#banner:after {
			pointer-events: none;
			-moz-transition: opacity 1.6s ease-in-out;
			-webkit-transition: opacity 1.6s ease-in-out;
			-ms-transition: opacity 1.6s ease-in-out;
			transition: opacity 1.6s ease-in-out;
			-moz-transition-delay: 0.8s;
			-webkit-transition-delay: 0.8s;
			-ms-transition-delay: 0.8s;
			transition-delay: 0.8s;
			content: '';
			background: url("https://yuni-design.com/images/bg1.gif") repeat fixed;
			display: block;
			width: 100%;
			height: 100%;
			position: absolute;
			left: 0;
			top: 0;
			opacity: 0;
		}

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

			#banner {
				padding: 6em 3em 5em 3em ;
				height: auto;
				min-height: 0;
			}

				#banner .logo {
					font-size: 1.25em;
				}

				#banner h1 > br {
					display: none;
				}

				#banner .more {

				}

		}

	body.is-preload #banner .logo {
		-moz-transform: scale(0.95);
		-webkit-transform: scale(0.95);
		-ms-transform: scale(0.95);
		transform: scale(0.95);
		opacity: 0;
	}

		body.is-preload #banner .logo:before, body.is-preload #banner .logo:after {
			width: 0;
		}

	body.is-preload #banner .more {
		-moz-transform: translateY(8.5em);
		-webkit-transform: translateY(8.5em);
		-ms-transform: translateY(8.5em);
		transform: translateY(8.5em);
		opacity: 0;
	}

	body.is-preload #banner:after {
		opacity: 1;
	}

/* CTA */

	#cta .inner {
		display: -moz-flex;
		display: -webkit-flex;
		display: -ms-flex;
		display: flex;
		max-width: 45em;
	}

		#cta .inner header {
			-moz-order: 1;
			-webkit-order: 1;
			-ms-order: 1;
			order: 1;
			padding-right: 3em;
			width: 70%;
		}

			#cta .inner header p {
				color: inherit;
			}

		#cta .inner .actions {
			-moz-order: 2;
			-webkit-order: 2;
			-ms-order: 2;
			order: 2;
			width: 30%;
		}

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

			#cta .inner {
				display: block;
				text-align: center;
			}

				#cta .inner header {
					padding-right: 0;
					width: 100%;
				}

				#cta .inner .actions {
					margin-left: auto;
					margin-right: auto;
					max-width: 20em;
					width: 100%;
				}

		}

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

			#cta .inner .actions {
				max-width: none;
			}

		}

/* Main */


#main > header {
	padding: 4em 0 4em 0 ;

	text-align: center;
}




	.breadcrumb {
	  display: flex;
	  flex-wrap: wrap;
	  list-style: none;
		font-size:0.8em;
		color: #4d3a2e;
		border-bottom:1px solid #a79c8a;
	}

	.breadcrumb li:not(:last-of-type)::after {
	  content: "›";
	  margin: 0 .6em; /* 記号の左右の余白 */
	  color: #4d3a2e; /* 記号の色 */
	}


		#main > header h2 {
			font-size: 1.75em;
			margin: 0 0 0.5em 0;
			color:#fff;
		}

		#main > header p {
			color: inherit;
			letter-spacing: 0.225em;

			top: 0;
		}

			#main > header p a {
				color: inherit;
			}

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

			#main > header {
				padding: 4em 0 4em 0 ;
			}

		}

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

			#main > header {
				padding: 4em 3em 4em 3em ;
			}

		}

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

			#main > header {
				padding: 4em 3em 4em 3em ;
			}

		}

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

			#main > header {
				padding: 3em 3em 2em 3em ;
			}

				#main > header h2 {
					font-size: 1.25em;
					margin: 0 0 1em 0;
				}

		}

	body.is-mobile #main > header {
		background-attachment: scroll;
	}

	/* Footer */

		#footer {
			padding: 3em 0 3em 0 ;
			background-color: #4d3a2e;
			text-align: center;
		}



		.flex-container {
		    display: flex;
		    flex-direction: column;
		    min-height: 100vh;
		}
		.flex-footer {
		    margin-top: auto;
		}





			#footer .icons {
				font-size: 1.25em;
				margin-top: 1em;

			}

				#footer .icons a {
					color: rgba(255, 255, 255, 0.5);
				}

					#footer .icons a:hover {
						color: #fff;
					}

			#footer .copyright {
				color: rgba(255, 255, 255, 0.5);
				font-size: 0.8em;
				letter-spacing: 0.225em;
				list-style: none;
				padding: 0;

			}


			#footer .copy {
							color: rgba(255, 255, 255, 0.5);
							font-size: 0.8em;
							letter-spacing: 0.225em;
							list-style: none;
							padding: 0 0 0 1em;

							margin: 0;
							text-align: left;
							border-left: 1px solid rgba(255, 255, 255, 0.3);
						}

						#footer .copy1 {
							color: rgba(255, 255, 255, 0.5);
							font-size: 0.8em;
							letter-spacing: 0.225em;
							list-style: none;
							padding: 0 0 0 1em;

							margin: 0;
							text-align: left;
							border-left: 1px solid rgba(255, 255, 255, 0.3);
						}





							.footer_copyarea {
								width: 70%;
								margin: 0 auto;
							}

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

									.footer_copyarea {
										width: 90%;
										margin: 0 auto;
									}

								}

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

									.footer_copyarea {
										width: 100%;
										margin: 0 auto;
									}

								}




			#footer .ng {
				color: rgba(255, 255, 255, 0.5);
				font-size: 0.6em;
				letter-spacing: 0.1em;
				padding: 0;
			}

				#footer .copyright li {
					border-left: solid 1px rgba(255, 255, 255, 0.5);
					display: inline-block;
					line-height: 1em;
					margin-left: 1em;
					padding-left: 1em;
					margin-top: 0.5em;
				}

					#footer .copyright li:first-child {
						border-left: 0;
						margin-left: 0;
						padding-left: 0;
					}

					#footer .copyright li a {
						color: inherit;
					}

						#footer .copyright li a:hover {
							color: #fff;
						}

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

						#footer .copyright li {
							border: 0;
							display: block;
							line-height: 1.65em;
							margin: 0;
							padding: 0.5em 0;
						}

					}






					#footer .txt {
						color: rgba(255, 255, 255, 0.5);
						font-size: 0.8em;
						letter-spacing: 0.225em;
						list-style: none;
						padding: 0;

					}


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

						#footer .txt {
							color: rgba(255, 255, 255, 0.5);
							font-size: 0.8em;
							letter-spacing: 0.1em;
							list-style: none;
							padding: 0;

						}

					}



						#footer .txt li {
							border-left: solid 1px rgba(255, 255, 255, 0.5);
							display: inline-block;
							line-height: 2em;
							margin-left: 1em;
							padding-left: 1em;
						}

							#footer .txt li:first-child {
								border-left: 0;
								margin-left: 0;
								padding-left: 0;
							}

							#footer .txt li a {
								color: inherit;
							}

								#footer .txt li a:hover {
									color: #fff;
								}

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

								#footer .txt li {
									border: 0;
									display: block;
									line-height: 1.65em;
									margin: 0;
									padding: 0.5em 0;
								}

							}






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

				#footer {
					padding: 4em 3em 2em 3em ;
				}

			}

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

				#footer {
					padding: 3em 2em 2em 2em ;
				}

			}


/* Landing */

	body.landing #page-wrapper {
		    background-image: -moz-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0)), url("../../images/banner.webp");
				background-image: -webkit-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0)), url("../../images/banner.webp");
				background-image: -ms-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0)), url("../../images/banner.webp");
				background-image: linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0)), url("../../images/banner.webp");
				background-attachment: fixed;
				background-position: center center;
				background-repeat: no-repeat;
				background-size: cover;
		padding-top: 0;
	}



	body.landing #footer {

	}

	body.is-mobile.landing #page-wrapper {
		background: none;
	}



	body.is-mobile.landing #banner,
	body.is-mobile.landing .wrapper.style4 {
		background-image: -moz-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0)), url("../../images/banner.webp");
		background-image: -webkit-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0)), url("../../images/banner.webp");
		background-image: -ms-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0)), url("../../images/banner.webp");
		background-image: linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0)), url("../../images/banner.webp");
		background-attachment: fixed;
		background-position: center center;
		background-repeat: no-repeat;
		background-size: cover;
	}

	body.is-mobile.landing #footer {
		background-color: #4d3a2e;

	}






	.waku2{
			-moz-appearance: none;
			-webkit-appearance: none;
			-ms-appearance: none;
			appearance: none;
			background-color: #E36414;

			border: 0;
			color: #fff;
			display: inline-block;
			font-size: 0.8em;
			font-weight: 600;
			height: 3.125em;
			letter-spacing: 0.1em;
			line-height: 3.125em;
			max-width: 30em;
			padding: 0 2.5em;
			text-align: center;
			text-decoration: none;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
	}
@media screen and (min-width: 920px){
	.waku2{
			-moz-appearance: none;
			-webkit-appearance: none;
			-ms-appearance: none;
			appearance: none;
			background-color: #E36414;

			border: 0;
			color: #fff;
			display: inline-block;
			font-size: 1em;
			font-weight: 600;
			height: 3.125em;
			letter-spacing: 0.1em;
			line-height: 3.125em;
			max-width: 30em;
			padding: 0 2.5em;
			text-align: center;
			text-decoration: none;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
	}
}








.waku3{
			-moz-appearance: none;
			-webkit-appearance: none;
			-ms-appearance: none;
			appearance: none;
			border: 2px solid #4d3a2e;
			color: #4d3a2e;
			display: block;
			font-size: 0.85em;
			font-weight: 600;
			max-width: 100%;
			padding: 0.7em;
			text-align: center;
			text-decoration: none;
			margin-bottom: 0;
	}





	.waku5{
				-moz-appearance: none;
				-webkit-appearance: none;
				-ms-appearance: none;
				appearance: none;
				border-top: 2px dotted #4d3a2e;
				border-bottom: 2px dotted #4d3a2e;
				color: #4d3a2e;
				display: block;
				font-size: 1em;
				font-weight: 400;
				max-width: 100%;
				padding: 1.3em 0;
				text-align: left;
				text-decoration: none;
				margin-bottom: 0;
		}

		.waku5_thanks{
					-moz-appearance: none;
					-webkit-appearance: none;
					-ms-appearance: none;
					appearance: none;
					background-color: rgba(255, 255, 255, 0.5);
					color: #4d3a2e;
					display: block;
					font-size: 1em;
					font-weight: 400;
					max-width: 100%;
					padding: 1.8em;
					text-align: left;
					text-decoration: none;
					margin-bottom: 0;
			}


		.waku6{
					-moz-appearance: none;
					-webkit-appearance: none;
					-ms-appearance: none;
					appearance: none;
					border: 2px solid #4d3a2e;
					color: #4d3a2e;
					display: block;
					font-size: 1em;
					font-weight: 400;
					max-width: 100%;
					padding: 1.3em;
					text-align: left;
					text-decoration: none;
					margin-bottom: 0;
					line-height: 2em;
			}
			@media screen and (max-width: 430px){
				.waku6 {
					padding: 1em;
				}
			}




			.waku6_guide{
						-moz-appearance: none;
						-webkit-appearance: none;
						-ms-appearance: none;
						appearance: none;
						border: 2px solid #4d3a2e;
						color: #4d3a2e;
						display: block;
						font-size: 1em;
						font-weight: 400;
						max-width: 100%;
						padding: 1.3em;
						text-align: left;
						text-decoration: none;
						margin-bottom: 0;
				}
				@media screen and (max-width: 430px){
					.waku6_guide {
						padding: 1em;
					}
				}





.flex-grow-1{
	flex-grow: 1;
}

.flex-grow-1 p{
	line-height: 2em !important;
}



.waku4{
		-moz-appearance: none;
		-webkit-appearance: none;
		-ms-appearance: none;
		appearance: none;
		background-color: #E36414;

		border: 0;
		color: #fff;
		display: inline-block;
		font-size: 0.8em;
		font-weight: 600;
		height: 3.125em;
		letter-spacing: 0.1em;
		line-height: 3.125em;
		max-width: 30em;
		padding: 0 2.5em;
		text-align: center;
		text-decoration: none;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
}
@media screen and (min-width: 920px){
.waku4{
		-moz-appearance: none;
		-webkit-appearance: none;
		-ms-appearance: none;
		appearance: none;
		background-color: #E36414;

		border: 0;
		color: #fff;
		display: inline-block;
		font-size: 1em;
		font-weight: 600;
		height: 3.125em;
		letter-spacing: 0.1em;
		line-height: 3.125em;
		max-width: 30em;
		padding: 0 2.5em;
		text-align: center;
		text-decoration: none;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
}
}


/* 左右に斜め線(両端を丸く) */
.heading {
  align-items: center; /* 線を上下中央 */
  display: flex; /* 文字と横線を横並び */
  justify-content: center !important; /* 文字を中央寄せ */
}
.heading::before,
.heading::after {
  background-color: #4d3a2e; /* 線の色 */
  border-radius: 5px; /* 線の両端を丸く */
  content: "";
  height: 5px; /* 線の高さ */
  width: 3em; /* 線の長さ */
}
.heading::before {
  margin-right: 6px; /* 文字との余白 */
  transform: rotate(60deg); /* 傾ける */
}
.heading::after {
  margin-left: 6px; /* 文字との余白 */
  transform: rotate(-60deg); /* 傾ける */
}
/* レイアウトのためのcss */
p.slash {
  color: #4d3a2e;
  font-size: 1em;
  font-weight: 700;
  margin-bottom: 1em;
	text-align: center !important; /* 文字を中央寄せ */
}


@media screen and (max-width: 400px){
	.heading::before,
	.heading::after {
	  background-color: #4d3a2e; /* 線の色 */
	  border-radius: 5px; /* 線の両端を丸く */
	  content: "";
	  height: 3px; /* 線の高さ */
	  width: 3em; /* 線の長さ */
	}
	.heading::before {
	  margin-right: 3px; /* 文字との余白 */
	  transform: rotate(60deg); /* 傾ける */
	}
	.heading::after {
	  margin-left: 3px; /* 文字との余白 */
	  transform: rotate(-60deg); /* 傾ける */
	}
	p.slash {
	  color: #4d3a2e;
	  font-size: 0.9em;
	  font-weight: 700;
	  margin-bottom: 1em;
		text-align: center !important; /* 文字を中央寄せ */
	}
}









a.btn_orange {
	display: block;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	width: 100%;
	margin: auto;
	padding: 0.85rem;
	font-weight: bold;
	background: #E36414;
	color: #fff;

	transition: 0.5s;
	font-size: 0.85em;
}
a.btn_orange:hover {
	color: #fff;
	background: #cf5b12;
}
@media screen and (min-width: 431px){
	a.btn_orange {
		display: block;
		text-align: center;
		vertical-align: middle;
		text-decoration: none;
		max-width: 30em;
		margin: auto;
		padding: 1rem;
		font-weight: bold;
		background: #E36414;
		color: #fff;

		transition: 0.5s;
		font-size: 1em;
	}
	a.btn_orange:hover {
		color: #fff;
		background: #cf5b12;
	}
}




a.btn_orange_inline {
	display: block;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	width: 100%;

	margin-bottom: 10px;
	padding: 0.5rem 0.85rem;
	background: #E36414;
	color: #fff;
	transition: 0.5s;
	font-size: 1em;
}
a.btn_orange_inline:hover {
	color: #fff;
	background: #cf5b12;
}
@media screen and (min-width: 431px){
	a.btn_orange_inline {
		display: inline-block;
		text-align: center;
		vertical-align: middle;
		text-decoration: none;
		width: auto;

		margin-bottom: 10px;
		margin-right: 5px;
		padding: 0.5rem 0.85rem;
		background: #E36414;
		color: #fff;
		transition: 0.5s;
		font-size: 1em;
	}
	a.btn_orange_inline:hover {
		color: #fff;
		background: #cf5b12;
	}
}






a.btn_brown {
	display: block;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	width: 100%;
	margin: auto;
	padding: 0.85rem;
	background: #4d3a2e;
	color: #fff;

	transition: 0.5s;
	font-size: 0.85em;
}
a.btn_brown:hover {
	color: #fff;
	background: #5c4a3e;
}
@media screen and (min-width: 431px){
	a.btn_brown {
		display: block;
		text-align: center;
		vertical-align: middle;
		text-decoration: none;
		max-width: 30em;
		margin: auto;
		padding: 1rem;

		background: #4d3a2e;
		color: #fff;

		transition: 0.5s;
		font-size: 1em;
	}
	a.btn_brown:hover {
		color: #fff;
		background: #5c4a3e;
	}
}




a.btn_brown_inline {
	display: block;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	width: 100%;

	margin-bottom: 10px;
	padding: 0.85rem;
	background: #4d3a2e;
	color: #fff;
	transition: 0.5s;
	font-size: 1em;
}
a.btn_brown_inline:hover {
	color: #fff;
	background: #5c4a3e;
}
@media screen and (min-width: 431px){
	a.btn_brown_inline {
		display: inline-block;
		text-align: center;
		vertical-align: middle;
		text-decoration: none;
		width: auto;

		margin-bottom: 10px;
		margin-right: 5px;
		padding: 0.8rem;
		background: #4d3a2e;
		color: #fff;
		transition: 0.5s;
		font-size: 1em;
	}
	a.btn_brown_inline:hover {
		color: #fff;
		background: #5c4a3e;
	}
}








.list1{
		background-color: #E36414;

		color: #fff;
	  display: block;
		font-size: 0.85em;
		font-weight: 600;
		letter-spacing: 0.1em;
		padding: 1em;
		text-align: center;
		margin-bottom:8px;
		width:100%;
}
@media screen and (min-width: 431px){
.list1{
		background-color: #E36414;

		color: #fff;
    display: inline-block;
		font-size: 1em;
		font-weight: 600;
		letter-spacing: 0.1em;
		padding: 1em;
		text-align: center;
		margin-bottom:8px;
		max-width: 30em;

}
}







.list2{
		background-color: #E36414;

		color: #fff;
	  display: block;
		font-size: 0.85em;
		font-weight: 600;
		letter-spacing: 0.1em;
		padding: 0.5em;
		text-align: left;
		margin-bottom:8px;

}
@media screen and (min-width: 431px){
.list2{
		background-color: #E36414;

		color: #fff;
    display: inline-block;
		font-size: 1em;
		font-weight: 600;
		letter-spacing: 0.1em;
		padding: 0.5em;
		text-align: left;
		margin-bottom:8px;

}
}



.list3{
		background-color: #4d3a2e;

		color: #fff;
	  display: block;
		font-size: 1em !important;
		font-weight: 600;
		letter-spacing: 0.1em;
		padding: 0.8em;
		text-align: left;
		margin-bottom:8px;

}
@media screen and (min-width: 431px){
.list3{
		background-color: #4d3a2e;

		color: #fff;
    display: inline-block;
		font-size: 1em;
		font-weight: 600;
		letter-spacing: 0.1em;
		padding: 1em;
		text-align: left;
		margin-bottom:8px;

}
}



.list3a{

		border:2px solid #4d3a2e;
    width:100%;
		color: #4d3a2e;
	  display: block;
		font-size: 1em !important;
line-height: 1.5;
		letter-spacing: 0.1em;
		padding: 0.3em 0.8em;
		text-align: left;
		margin-bottom:8px;

}
@media screen and (min-width: 431px){
.list3a{
		border:2px solid #4d3a2e;
    width:100%;
		color: #4d3a2e;
    display: inline-block;
		font-size: 0.85em !important;
line-height: 1.5;
		letter-spacing: 0.1em;
		padding: 0.3em 0.8em;
		text-align: left;
		margin-bottom:8px;

}
}



.list3b{
		background-color: #E36414;

		color: #fff;
	  display: block;
		font-size: 1em !important;
		font-weight: 600;
		letter-spacing: 0.1em;
		padding: 0.8em;
		text-align: left;
		margin-bottom:8px;

}
@media screen and (min-width: 431px){
.list3b{
		background-color: #E36414;

		color: #fff;
    display: inline-block;
		font-size: 1em;
		font-weight: 600;
		letter-spacing: 0.1em;
		padding: 1em;
		text-align: left;
		margin-bottom:8px;

}
}






.skeleton{
		opacity: 0.25;
}





.list4{
		background-color: #4d3a2e;

		color: #fff;
	  display: block;
		font-size: 0.9em;
		font-weight: 600;
		letter-spacing: 0.1em;
		padding: 0.8em;
		text-align: center;
		margin-bottom:8px;
		width:100%;

}
@media screen and (min-width: 1024px){
.list4{
		background-color: #4d3a2e;

		color: #fff;
    display: inline-block;
		font-size: 1.2em;
		font-weight: 600;
		letter-spacing: 0.1em;
		padding: 1em;
		text-align: center;
		margin-bottom:8px;
		width:100%;

}
}



.f_check{
	font-size: 1.3em;
	font-weight: bold;
	margin-bottom: 20px;
	border-bottom: 2px solid #4d3a2e;
	padding-bottom: 0.5em;
}
@media screen and (max-width: 430px){
	.f_check{
		font-size: 1.2em;
		font-weight: bold;
		margin-bottom: 10px;
		border-bottom: 2px solid #4d3a2e;
	}
}







/*==================================================
ふわっ
===================================*/

/* その場で */
.fadeIn{
animation-name:fadeInAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeInAnime{
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* 下から */

.fadeUp{
animation-name:fadeUpAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
  transform: translateY(100px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}

/* 上から */

.fadeDown{
animation-name:fadeDownAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeDownAnime{
  from {
    opacity: 0;
  transform: translateY(-100px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}

/* 左から */

.fadeLeft{
animation-name:fadeLeftAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeLeftAnime{
  from {
    opacity: 0;
  transform: translateX(-100px);
  }

  to {
    opacity: 1;
  transform: translateX(0);
  }
}

/* 右から */

.fadeRight{
animation-name:fadeRightAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeRightAnime{
  from {
    opacity: 0;
  transform: translateX(100px);
  }

  to {
    opacity: 1;
  transform: translateX(0);
  }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/

.fadeInTrigger,
.fadeUpTrigger,
.fadeDownTrigger,
.fadeLeftTrigger,
.fadeRightTrigger{
    opacity: 0;
}

/*==================================================
パタッ
===================================*/


/* 下へ */
.flipDown{
animation-name:flipDownAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes flipDownAnime{
  from {
    transform: perspective(2500px) rotateX(100deg);
  opacity: 0;
  }

  to {
    transform: perspective(2500px) rotateX(0);
  opacity: 1;
  }
}


/* 左へ */
.flipLeft{
animation-name:flipLeftAnime;
animation-duration:1s;
animation-fill-mode:forwards;
perspective-origin:left center;
opacity:0;
}

@keyframes flipLeftAnime{
  from {
   transform: perspective(600px) translate3d(0, 0, 0) rotateY(30deg);
  opacity: 0;
  }

  to {
  transform: perspective(600px) translate3d(0, 0, 0) rotateY(0deg);
  opacity: 1;
  }
}


/* 左上へ */
.flipLeftTop{
animation-name:flipLeftTopAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes flipLeftTopAnime{
  from {
   transform: translate(-20px,80px) rotate(-15deg);
  opacity: 0;
  }

  to {
   transform: translate(0,0) rotate(0deg);
  opacity: 1;
  }
}

/* 右へ */
.flipRight{
animation-name:flipRightAnime;
animation-duration:1s;
animation-fill-mode:forwards;
perspective-origin:right center;
opacity:0;
}

@keyframes flipRightAnime{
  from {
   transform: perspective(600px) translate3d(0, 0, 0) rotateY(-30deg);
  opacity: 0;
  }

  to {
  transform: perspective(600px) translate3d(0, 0, 0) rotateY(0deg);
  opacity: 1;
  }
}

/* 右上へ */
.flipRightTop{
animation-name:flipRightTopAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes flipRightTopAnime{
  from {
   transform: translate(-20px,80px) rotate(25deg);
   opacity: 0;
  }

  to {
   transform: translate(0,1) rotate(0deg);
  opacity: 1;
  }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/

.flipDownTrigger,
.flipLeftTrigger,
.flipLeftTopTrigger,
.flipRightTrigger,
.flipRightTopTrigger{
    opacity: 0;
}

/*==================================================
くるっ
===================================*/


/* X 軸（縦へ） */
.rotateX{
  animation-name:rotateXAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
}

@keyframes rotateXAnime{
  from{
    transform: rotateX(0);
    opacity: 0;
    }
  to{
    transform: rotateX(-360deg);
    opacity: 1;
    }
}

/*　Y軸（横へ） */
.rotateY{
  animation-name:rotateYAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
}

@keyframes rotateYAnime{
  from{
    transform: rotateY(0);
    opacity: 0;
    }
  to{
    transform: rotateY(-360deg);
    opacity: 1;
    }
}

/* Z 軸（左へ） */
.rotateLeftZ{
  animation-name:rotateLeftZAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
}

@keyframes rotateLeftZAnime{
  from{
    transform: rotateZ(0);
    opacity: 0;
    }
  to{
    transform: rotateZ(-360deg);
    opacity: 1;
    }
}

/*　Z 軸（右へ） */
.rotateRightZ{
  animation-name:rotateRightZAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
}

@keyframes rotateRightZAnime{
  from{
    transform: rotateZ(0);
    opacity: 0;
    }
  to{
    transform: rotateZ(360deg);
    opacity: 1;
    }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/

.rotateXTrigger,
.rotateYTrigger,
.rotateLeftZTrigger,
.rotateRightZTrigger{
    opacity: 0;
}

/*==================================================
ボンッ、ヒュッ
===================================*/

/* 拡大 */
.zoomIn{
  animation-name:zoomInAnime;
  animation-duration:0.85s;
  animation-fill-mode:forwards;
}

@keyframes zoomInAnime{
  from {
  transform: scale(0.6);
  opacity: 0;
  }

  to {
    transform: scale(1);
  opacity: 1;
  }
}

/* 縮小 */
.zoomOut{
  animation-name:zoomOutAnime;
  animation-duration:0.5s;
  animation-fill-mode:forwards;
}

@keyframes zoomOutAnime{
  from {
  transform: scale(1.2);
  opacity: 0;
  }

  to {
    transform:scale(1);
  opacity: 1;
  }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/

.zoomInTrigger,
.zoomOutTrigger{
    opacity: 0;
}

/*==================================================
じわっ
===================================*/

/* ぼかしから出現 */
.blur{
  animation-name:blurAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
}

@keyframes blurAnime{
  from {
  filter: blur(10px);
  transform: scale(1.02);
  opacity: 0;
  }

  to {
  filter: blur(0);
  transform: scale(1);
  opacity: 1;
  }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/

.blurTrigger{
    opacity: 0;
}

/*==================================================
にゅーん
===================================*/

/* 滑らかに変形して出現 */
.smooth{
  animation-name:smoothAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
  　transform-origin: left;
  opacity:0;
}

@keyframes smoothAnime{
  from {
  transform: translate3d(0, 100%, 0) skewY(12deg);
  opacity:0;
  }

  to {
  transform: translate3d(0, 0, 0) skewY(0);
  opacity:1;
  }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/

.smoothTrigger{
    opacity: 0;
}

/*==================================================
スーッ（枠線が伸びて出現）
===================================*/

/*枠線が伸びて出現*/

.lineTrigger{
  position: relative; /* 枠線が書かれる基点*/
  opacity:0;
}

.lineTrigger.lineanime{
  animation-name:lineAnimeBase;
  animation-duration:1s;
  animation-fill-mode:forwards;
}

@keyframes lineAnimeBase{
  from {
    opacity:0;
  }

  to {
    opacity:1;
}
}

/*上下線*/
.lineTrigger::before,
.lineTrigger::after{
  position: absolute;
  content:"";
  width:0;
  height:1px;
  background:#333;/* 枠線の色*/
}

/*左右線*/
.line2::before,
.line2::after{
  position: absolute;
  content:"";
  width: 1px;
  height:0;
  background:#333;/* 枠線の色*/
}

/*上線*/
.lineTrigger::before {
  top:0;
  left:0;
}

.lineTrigger.lineanime::before {
  animation: lineAnime .5s linear 0s forwards;/*表示されて0秒後に上線が0.5秒かけて表示*/
}

/*右線*/
.line2::before{
  top:0;
  right:0;
}

.lineTrigger.lineanime .line2::before {
  animation: lineAnime2 .5s linear .5s forwards;/*表示されて0.5秒後に右線が0.5秒かけて表示*/
}

/*下線*/
.lineTrigger::after {
  bottom:0;
  right:0;
}

.lineTrigger.lineanime::after {
  animation: lineAnime .5s linear 1s forwards;/*表示されて1秒後に下線が0.5秒かけて表示*/
}

/*左線*/
.line2::after{
  bottom:0;
  left:0;
}

.lineTrigger.lineanime .line2::after {
  animation: lineAnime2 .5s linear 1.5s forwards;/*表示されて1.5秒後に左線が0.5秒かけて表示*/
}

@keyframes lineAnime {
  0% {width:0%;}
    100%{width:100%;}
}

@keyframes lineAnime2 {
  0% {height:0%;}
    100%{height:100%;}
}

/*枠線内側の要素*/

.lineTrigger.lineanime .lineinappear{
  animation: lineInnerAnime .5s linear 1.5s forwards;/*1.5秒後に中央のエリアが0.5秒かけて表示*/
  opacity: 0;/*初期値を透過0にする*/
}

@keyframes lineInnerAnime{
  0% {opacity:0;}
    100% {opacity:1;}
}


/*==================================================
シャッ（背景色が伸びて出現）
===================================*/

/*背景色が伸びて出現（共通）*/
.bgextend{
  animation-name:bgextendAnimeBase;
  animation-duration:1s;
  animation-fill-mode:forwards;
  position: relative;
  overflow: hidden;/*　はみ出た色要素を隠す　*/
  opacity:0;
}

@keyframes bgextendAnimeBase{
  from {
    opacity:0;
  }

  to {
    opacity:1;
}
}

/*中の要素*/
.bgappear{
  animation-name:bgextendAnimeSecond;
  animation-duration:1s;
  animation-delay: 0.6s;
  animation-fill-mode:forwards;
  opacity: 0;
}

@keyframes bgextendAnimeSecond{
  0% {
  opacity: 0;
  }
  100% {
  opacity: 1;
}
}

/*左から*/
.bgLRextend::before{
  animation-name:bgLRextendAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #666;/*伸びる背景色の設定*/
}
@keyframes bgLRextendAnime{
  0% {
    transform-origin:left;
    transform:scaleX(0);
  }
  50% {
    transform-origin:left;
    transform:scaleX(1);
  }
  50.001% {
    transform-origin:right;
  }
  100% {
    transform-origin:right;
    transform:scaleX(0);
  }
}

/*右から*/
.bgRLextend::before{
  animation-name:bgRLextendAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #666;/*伸びる背景色の設定*/
}
@keyframes bgRLextendAnime{
  0% {
    transform-origin:right;
    transform:scaleX(0);
  }
  50% {
    transform-origin:right;
    transform:scaleX(1);
  }
  50.001% {
    transform-origin:left;
  }
  100% {
    transform-origin:left;
    transform:scaleX(0);
  }
}

/*下から*/
.bgDUextend::before{
  animation-name:bgDUextendAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #666;/*伸びる背景色の設定*/
}
@keyframes bgDUextendAnime{
  0% {
    transform-origin:bottom;
    transform:scaleY(0);
  }
  50% {
    transform-origin:bottom;
    transform:scaleY(1);
  }
  50.001% {
    transform-origin:top;
  }
  100% {
    transform-origin:top;
    transform:scaleY(0);
  }
}

/*上から*/
.bgUDextend::before{
  animation-name:bgUDextendAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #666;/*伸びる背景色の設定*/
}
@keyframes bgUDextendAnime{
  0% {
    transform-origin:top;
    transform:scaleY(0);
  }
  50% {
    transform-origin:top;
    transform:scaleY(1);
  }
  50.001% {
    transform-origin:bottom;
  }
  100% {
    transform-origin:bottom;
    transform:scaleY(0);
  }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.bgappearTrigger,
.bgUDextendTrigger,
.bgDUextendTrigger,
.bgRLextendTrigger,
.bgLRextendTrigger{
    opacity: 0;
}


/*========= レイアウトのためのCSS ===============*/

.wrapper{
  overflow: hidden;
}

.flex{
  display:flex;
  flex-wrap: wrap;
}

.box{
  width: 220px;
  padding: 20px;
    margin: 0 20px 20px 20px;
  background: #666;
  color: #fff;
  box-sizing:border-box;
}

.bgextend,
.lineTrigger{
  width: 220px;
  padding: 20px;
    margin: 0 20px 20px 20px;
  box-sizing:border-box;
}



/*==================================================
アニメーション設定
===================================*/

/* アニメーションの回数を決めるCSS*/

.count2{
  animation-iteration-count: 2;/*この数字を必要回数分に変更*/
}

.countinfinite{
  animation-iteration-count: infinite;/*無限ループ*/
}

/* アニメーションスタートの遅延時間を決めるCSS*/

.delay-time05{
  animation-delay: 0.5s;
}

.delay-time1{
  animation-delay: 1s;
}

.delay-time15{
  animation-delay: 1.5s;
}

.delay-time2{
  animation-delay: 2s;
}

.delay-time25{
  animation-delay: 2.5s;
}

/* アニメーション自体が変化する時間を決めるCSS*/

.change-time05{
  animation-duration: 0.5s;
}

.change-time1{
  animation-duration: 1s;
}

.change-time15{
  animation-duration: 1.5s;
}

.change-time2{
  animation-duration: 2s;
}

.change-time25{
  animation-duration: 2.5s;
}









	/*====== スクロールを促す =======*/

/*スクロールダウン全体の場所*/
.scrolldown1{
    /*描画位置※位置は適宜調整してください*/
	position:absolute;
	left:50%;
	bottom:20px;
    /*全体の高さ*/
	height:50px;
}


@media screen and (max-width: 767px){
	.scrolldown1{
		position:absolute;
	 left:50%;
	 bottom:10px;
			/*全体の高さ*/
	 height:20px;
	}
}

/*Scrollテキストの描写*/
.scrolldown1 span{
    /*描画位置*/
	position: absolute;
	left:-16px;
	top: -30px;
    /*テキストの形状*/
	color: #4d3a2e;
	font-size: 1rem;
	letter-spacing: 0.05em;
}

@media screen and (max-width: 767px){
	/*Scrollテキストの描写*/
	.scrolldown1 span{
	    /*描画位置*/
		position: absolute;
		left:-11px;
		top: -30px;
	    /*テキストの形状*/
		color: #4d3a2e;
		font-size: 0.88em;
		letter-spacing: 0.05em;
	}
}


/* 線の描写 */
.scrolldown1::after{
	content: "";
    /*描画位置*/
	position: absolute;
	left:8px;
	top: 0;
    /*線の形状*/
	width: 1px;
	height: 30px;
	background: #4d3a2e;
    /*線の動き1.4秒かけて動く。永遠にループ*/
	animation: pathmove 1.4s ease-in-out infinite;
	opacity:0;
}

@media screen and (max-width: 767px){
	/* 線の描写 */
	.scrolldown1::after{
		content: "";
	    /*描画位置*/
		position: absolute;
		left:8px;
		top: 0;
	    /*線の形状*/
		width: 1px;
		height: 30px;
		background: #4d3a2e;
	    /*線の動き1.4秒かけて動く。永遠にループ*/
		animation: pathmove 1.4s ease-in-out infinite;
		opacity:0;
	}
}








/*高さ・位置・透過が変化して線が上から下に動く*/
@keyframes pathmove{
	0%{
		height:0;
		top:0;
		opacity: 0;
	}
	30%{
		height:30px;
		opacity: 1;
	}
	100%{
		height:0;
		top:50px;
		opacity: 0;
	}
}


/* お知らせ　*/
.news-list{
  list-style: none outside;
  margin: 1.5em 0 0;
  padding: 0;
}
.news-list .item{
  display: flex;
  flex-wrap: wrap;
  flex-wrap: nowrap;
  text-decoration: none;
  color: #4d3a2e;
  border-bottom: 2px solid #4d3a2e;
  padding: 20px 0px;
}
.news-list .item:first-child{
  border-top: 2px solid #4d3a2e;
}
.news-list .item .date{
  margin: 0;
  min-width: 140px;
  font-size: 16px;
	font-weight: bold;
  color: #4d3a2e;
  padding: 0 20px 0 0;
}
.news-list .item .category{
  margin: 0;
  min-width: 140px;
  padding: 0;
}
.news-list .item .category span{
  background: #E36414;
  color: #FFF;
  text-align: center;
  display: inline-block;
  padding: 5px 20px;
  font-size: 12px;
  line-height: 1;
}
.news-list .item .title{
  margin: 0;
  width: 100%;
	text-align: left;
}
.news-list .item a:hover .title{
  color: #E36414;
}

@media screen and (max-width: 767px){
.news-list .item{
  flex-wrap: wrap;
}
.news-list .item .date{
  min-width: 100px;
}
.news-list .item .title{
  margin-top: 10px;
}
}


.d-flex {
	display: flex !important;
}

.align-items-stretch {
  align-items: stretch !important;
}




.icon-box {
  text-align: center;
  padding: 25px;
  transition: all ease-in-out 0.3s;
  background-color: rgba(255, 255, 255, 0.38);

	margin-bottom: 25px;
	width:100%;
display: flex;
flex-direction: column;
}
@media screen and (max-width: 767px){
	.icon-box {
	  text-align: center;
	  padding: 15px;
	  transition: all ease-in-out 0.3s;
	  background-color: rgba(255, 255, 255, 0.38);

		margin-bottom: 25px;
		width:100%;
	display: flex;
	flex-direction: column;
	}
}


.icon-box .icon {
  margin: 0 auto;
  width: 64px;
  height: 64px;
  background: #ffc451;
  border-radius: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  transition: 0.3s;
}

.icon-box img {
  width:100%;
	max-width: 300px;
	margin-bottom: 20px;
}

@media screen and (max-width: 480px){
	.icon-box img {
	  width:100%;
		max-width:200px;
		margin-bottom: 20px;
	}
}




.icon-box .icon i {
  color: #151515;
  font-size: 28px;
  transition: ease-in-out 0.3s;
}

.icon-box h3 {
  font-weight: 700;
	letter-spacing: 0.1em;
  margin-bottom: 15px;
  font-size: 30px;
	color: #4d3a2e !important;
}

@media screen and (max-width: 890px){
	.icon-box h3 {
	  font-weight: 700;
		letter-spacing: 0.1em;
	  margin-bottom: 15px;
	  font-size: 20px;
		color: #4d3a2e !important;
	}
}






.icon-box h4 a {
  transition: ease-in-out 0.3s;
}

.icon-box h4 a:hover {
  color: #ffc451;
}

.icon-box p {
  font-size: 1em;
	line-height: 1.5em;
	text-align: left !important;
  margin-bottom: 0;
	padding-bottom: 1em;
	color: #4d3a2e;
}

.icon-box:hover {

  box-shadow: 0px 0 20px 0 rgba(0, 0, 0, 0.1);
  transform: translateY(-10px);
}


.txt-u-line
{
	color:#E36414;
	border-bottom: 2px solid #E36414;
}

.txt-u-line-block
{
	color:#E36414;
	border-bottom: 1px solid #4d3a2e;
	display: block;
	padding-bottom: 0.5em;
	margin-bottom: 1em;
}

.u-line{
	border-bottom: 2px solid #E36414;
}

.d-block{
	display:block;
}

.center-block{
	display: flex;
	justify-content: center;
	align-items: center;
}


.m_b_0{
	margin-bottom:0px !important;
}

.m_b_10{
	margin-bottom:10px !important;
}
.m_b_20{
	margin-bottom:20px !important;
}
.m_b_30{
	margin-bottom:30px !important;
}
.m_b_40{
	margin-bottom:40px !important;
}
.m_b_50{
	margin-bottom:50px !important;
}
.m_b_60{
	margin-bottom:60px !important;
}
.m_b_70{
	margin-bottom:70px !important;
}
.m_t_10{
	margin-top:10px !important;
}
.m_t_15 {
	margin-top:15px !important;
}
.m_t_20{
	margin-top:30px !important;
}
.m_t_30{
	margin-top:30px !important;
}


.p_t_10{
	padding-top:10px !important;
}

.p_t_20{
	padding-top:20px !important;
}

.p_t_30{
	padding-top:30px !important;
}
.p_t_40{
	padding-top:40px !important;
}
.p_t_50{
	padding-top:50px !important;
}

.p_b_10{
	padding-bottom:10px !important;
}
.p_b_20{
	padding-bottom:20px !important;
}
.p_b_30{
	padding-bottom:30px !important;
}
.p_b_40{
	padding-bottom:40px !important;
}
.p_b_50{
	padding-bottom:50px !important;
}
.p_b_5em{
	padding-bottom:5em !important;
}
.p_b_10em{
	padding-bottom:10em !important;
}
.p_b_20em{
	padding-bottom:20em !important;
}
.p_b_25em{
	padding-bottom:25em !important;
}

.lh_1{
	line-height: 1em !important;
}

.lh_12{
	line-height: 1.2em !important;
}

.lh_13{
	line-height: 1.3em !important;
}

.lh_14{
	line-height: 1.4em !important;
}

.lh_15{
	line-height: 1.5em !important;
}

.lh_16{
	line-height: 1.6em !important;
}

.lh_17{
	line-height: 1.7em !important;
}

.lh_18{
	line-height: 1.8em !important;
}

.lh_19{
	line-height: 1.9em !important;
}

.lh_2{
	line-height: 2em !important;
}

.h30vh{
	height: 30vh !important;
}

.h32vh{
	height: 32vh !important;
}

.h35vh{
	height: 35vh !important;
}

.h50vh{
	height: 50vh !important;
}

.h70vh{
	height: 70vh !important;
}

.justify-content-center {
  justify-content: center !important;
}

.img-fluid {
  max-width: 100%;
  height: auto;
}

.img-mx100{
	width:100%;
	max-width:100px;
}

.img-mx120{
	width:100%;
	max-width:120px;
}

.img-mx150{
	width:100%;
	max-width:150px;
}


.img-mx150-80{
	width:100%;
	max-width:150px;
}
@media screen and (max-width: 430px){
	.img-mx150-80{
		width:100%;
		max-width:80px;
	}
}

.img-mx130-80{
	width:100%;
	max-width:130px;
}
@media screen and (max-width: 430px){
	.img-mx130-80{
		width:100%;
		max-width:80px;
	}
}

.img-mx130-50{
	width:100%;
	max-width:130px;
}
@media screen and (max-width: 430px){
	.img-mx130-50{
		width:100%;
		max-width:50px;
	}
}

.img-mx130-60{
	width:100%;
	max-width:130px;
}
@media screen and (max-width: 430px){
	.img-mx130-60{
		width:100%;
		max-width:60px;
	}
}



.img-mx150-100{
	width:100%;
	max-width:150px;
}
@media screen and (max-width: 430px){
	.img-mx150-100{
		width:100%;
		max-width:100px;
	}
}


.img-mx200{
	width:100%;
	max-width:200px;
}
.img-mx250{
	width:100%;
	max-width:250px;
}
@media screen and (max-width: 430px){
	.img-mx250{
		width:100%;
		max-width:180px;
	}
}

.img-mx300{
	width:100%;
	max-width:300px;
}
.img-mx400{
	width:100%;
	max-width:400px;
}
.img-mx500{
	width:100%;
	max-width:500px;
}

.img-mx600{
	width:100%;
	max-width:600px;
}

.img-mx700{
	width:100%;
	max-width:700px;
}

.img-mx800{
	width:100%;
	max-width:800px;
}

.img-mx1000{
	width:100%;
	max-width:1000px;
}

.img-mx1200{
	width:100%;
	max-width:1200px;
}

.white {
    filter: invert(88%) sepia(61%) saturate(0%) hue-rotate(229deg) brightness(107%) contrast(101%);
}
.brown {
    filter: brightness(0) saturate(100%) invert(21%) sepia(26%) saturate(649%) hue-rotate(340deg) brightness(92%) contrast(87%);
}


.marker_stop {
	background:linear-gradient(transparent 50%, rgba(255, 175, 69, 0.6) 50%);
  display: inline;
}




.marker {
	background:linear-gradient(transparent 50%, rgba(77, 58, 46, 0.15) 50%);
  display: inline;

  /* 背景の繰り返しを停止 */
  background-repeat: no-repeat;

  /* マーカーの横方向を0にして縮める */
  background-size: 0% 100%;

  /* マーカーが引かれる速度を指定 */
  transition:background-size 1s;
}

/* マーカーが引かれる際に付与するクラス */
.marker.on {
  /* 横方向を100%にして、マーカーを引く */
  background-size: 100% 100%;
}

/*==================================================
ギャラリー
===================================*/
.gallery{
columns: 4;/*段組みの数*/
padding:0;/*ギャラリー左右に余白をつける*/
margin:0;
}

.gallery li {
    margin-bottom: 20px;/*各画像下に余白をつける*/
list-style:none;
}

/*ギャラリー内のイメージは横幅100%にする*/
.gallery img{
	width:100%;
	height:auto;
	vertical-align: bottom;/*画像の下にできる余白を削除*/}

/*　横幅900px以下の段組み設定　*/
@media only screen and (max-width: 900px) {
	.gallery{
	columns:3;
	}
}

@media only screen and (max-width: 768px) {
	.gallery{
	columns: 2;
	}
}

/*画像を出現させるアニメーションCSS*/
.flipLeft{
animation-name: flipLeft;
animation-duration:0.8s;
animation-fill-mode:forwards;
perspective-origin: left center;
opacity: 0;
}

@keyframes flipLeft{
  from {
   transform: perspective(600px) translate3d(0, 0, 0) rotateY(30deg);
  opacity: 0;
  }

  to {
  transform: perspective(600px) translate3d(0, 0, 0) rotateY(0deg);
  opacity: 1;
  }
}


/*==================================================
制作例画像
===================================*/
.rei_img{
	margin-bottom:1em;
}



/*==================================================
ふわっとページ遷移
===================================*/
.huwa {
	animation: fadein 0.85s forwards;
}

@keyframes fadein {
	0% {opacity: 0.01}
	100% {opacity: 1}
}


/*==================================================
WP
===================================*/
.wp-box {
  padding: 15px;
  transition: all ease-in-out 0.3s;

	border: 2px solid #4d3a2e;
	margin-bottom: 25px;
	width:100%;
display: flex;
flex-direction: column;
}

@media screen and (max-width: 767px){
	.wp-box {
	  padding: 15px;
	  transition: all ease-in-out 0.3s;

		border: 2px solid #4d3a2e;
		margin-bottom: 25px;
		width:100%;
	display: flex;
	flex-direction: column;
	}
}


.cursor a{
	cursor: pointer;
}



.img_thum{
		width:100%;
		max-width:600px;
		height:200px;
		object-fit: cover;
	}

.img_thum2{
		width:100%;
		max-width:600px;
		height:200px;
		object-fit: cover;
	}
	@media only screen and (max-width: 1024px){
		.img_thum2{
				width:100%;
				max-width:500px;
				height:160px;
				object-fit: cover;
			}
	}
	@media only screen and (max-width: 820px){
		.img_thum2{
				width:100%;
				max-width:600px;
				height:160px;
				object-fit: cover;
			}
	}
@media only screen and (max-width: 768px){
	.img_thum2{
			width:100%;
			max-width:500px;
			height:165px;
			object-fit: cover;
		}
}
@media only screen and (max-width: 460px){
	.img_thum2{
			width:100%;
			max-width:400px;
			height:140px;
			object-fit: cover;
		}
}


.link01 a{
  display: inline-block;
  color:#4d3a2e;
  text-decoration:none;
  transition: color .3s;
}

@media (hover: hover) and (pointer: fine) {
	/* hoverが使える端末 PCのみ */
	.link01 a:hover{
	  color: #E36414;
	}
}

//IE11用に以下のコードも追加
@media (-ms-high-contrast: none), (-ms-high-contrast: active) {
	.link01 a:hover{
	  color: #E36414;
	}
}






.f_chui{
			font-size: 0.85em !important;
			line-height: 1.5em !important;
		}




.fs_085em{
		font-size: 0.85em !important;
	}

.fs_12em{
	font-size: 1.2em !important;
}
.fs_15em{
	font-size: 1.5em !important;
}

.fs_2em{
	font-size: 2em !important;
}
.fs_5em{
	font-size: 5em !important;
}


.fc_brown{
	color:#4d3a2e !important;
}

.fc_white{
	color:#fff !important;
}

.fc_orange{
	color:#E36414 !important;
}

.fw_bold{
	font-weight: bold;
}

.bb_brown{
	border-bottom: 1px solid rgba(77,58,46,0.35);
	margin-bottom: 10px;
}

.box_normal {
	width:100%;
	background-color: rgba(255, 255, 255, 0.38);
	font-size: 1em;
	letter-spacing: 0;
	margin: 0;
	padding: 1.5em;
	color: #4d3a2e;
	line-height: 2em;
}
@media screen and (max-width: 430px){
	.box_normal {
		padding: 1em;
	}
}







.box_alert_red {
	width:100%;
	font-size: 1em;
	line-height: 2em;
	letter-spacing: 0;
	padding: 1em;
	color: #993333;
	background-color: rgb(255, 26, 25, 0.1);
	margin-bottom: 30px;
	border-radius: 0.3em;
}
@media only screen and (max-width: 460px){
	.box_alert_red {
		width:100%;
		font-size: 1em;
		letter-spacing: 0;
		padding: 0.8em;
		color: #993333;
		background-color: rgb(255, 26, 25, 0.1);
		margin-bottom: 20px;
		border-radius: 0.3em;
	}
}

.box_list {
	width:100%;
	background-color: rgba(255, 255, 255, 0.38);

	letter-spacing: 0;
	margin: 1em 0 1em 0;
	padding: 1.5em;
	color: #4d3a2e;
}
@media only screen and (max-width: 460px){
	.box_list {
		width:100%;
		background-color: rgba(255, 255, 255, 0.38);

		letter-spacing: 0;
		margin: 0.8em 0 0.8em 0;
		padding: 0.8em;
		color: #4d3a2e;
	}
}



.box_list p {
	color: #4d3a2e;
	font-size: 1.1em;
	line-height: 2em;
}
@media only screen and (max-width: 460px){
	.box_list p {
		color: #4d3a2e;

		font-size: 0.9em;
		line-height: 2em;
	}
}




.box_line {
	width:100%;
	font-size: 1em;
	line-height: 2em;
	letter-spacing: 0;
	padding: 1.5em 0 1.5em 0;
	color: #4d3a2e;
	border-top: 6px double #4d3a2e;
	border-bottom: 6px double #4d3a2e;
}
@media only screen and (max-width: 460px){
	.box_line {
		width:100%;
		font-size: 1em;
		letter-spacing: 0;
		padding: 1em 0 1em 0;
		color: #4d3a2e;
		border-top: 6px double #4d3a2e;
		border-bottom: 6px double #4d3a2e;
	}
}


.box_line2 {
	width:100%;
	font-size: 1em;
	line-height: 2em;
	letter-spacing: 0;
	padding: 1.5em 0 1.5em 0;
	color: #4d3a2e;
	border-top: 6px double #4d3a2e;
	Kaisei HarunoUmi
}
@media only screen and (max-width: 460px){
	.box_line2 {
		width:100%;
		font-size: 1em;
		letter-spacing: 0;
		padding: 1em 0 1em 0;
		color: #4d3a2e;
		border-top: 6px double #4d3a2e;
	}
}


.kakko{
    position:relative;
    padding:1.5em;
		line-height: 2em;
		margin-bottom: 2em;
}
.kakko:before{
    position:absolute;
    content:'「';
    font-size: 2.5em;
		font-weight: 400;
    color:#4d3a2e !important;
    top:0.3em;
    left:-0.5em;

}
.kakko:after{
    position:absolute;
    content:'」';
    font-size: 2.5em;
		font-weight: 400;
    color:#4d3a2e !important;
    right:-0.5em;
    bottom:0.3em;

}

@media only screen and (max-width: 460px){

	.kakko{
	    position:relative;
	    padding:1.2em;
			line-height: 1.7em;
			margin-bottom: 2em;
	}

	.kakko:before{
	    position:absolute;
	    content:'「';
	    font-size: 2em;
			font-weight: 400;
	    color:#4d3a2e !important;
	    top:0.4em;
	    left:-0.6em;

	}
	.kakko:after{
	    position:absolute;
	    content:'」';
	    font-size: 2em;
			font-weight: 400;
	    color:#4d3a2e !important;
	    right:-0.6em;
	    bottom:0.4em;

	}


}





.box_large {
	background-color: #efebe1;
	border-radius: 0px;
	margin: 0;
	padding: 1.5em 1em 1em;
	color: #4d3a2e;
}

.box_large .p1 {
	font-size: 1.2em;
	font-weight: bold;
	letter-spacing: 0;
	text-align: center;
}

@media screen and (max-width: 430px){
	.box_large .p1 {
		font-size: 1em;
		font-weight: bold;
		letter-spacing: 0;
		text-align: center;
	}
}


.box_large .p2 {
	font-size: 1em;
	letter-spacing: 0;
	text-align: center;
	line-height: 2em;
}
@media screen and (max-width: 430px){
	.box_large .p2 {
		font-size: 0.8em;
		letter-spacing: 0;
		text-align: center;
		line-height: 1.5em;
	}
}

/*＝＝＝reCAPTCHA v3のバッジ非表示CSS*/
 .recaptcha_policy {
  padding: 0;
  margin: 0;
  text-align: left;
  font-size: 11px !important;
  color: #444 !important;
}
.recaptcha_policy a {
  font-size: 11px !important;
  color: #111 !important;
}

.grecaptcha-badge { visibility: hidden; }


.footer_logo img{
	width:100%;
	max-width:80px;
	opacity: 0.5;
}

.point{
	font-weight: bold;
	font-size: 1.25em;
	color: #E36414;
	line-height: 1.5em;
	padding-bottom: 0.8em;
}
@media screen and (max-width: 430px){
	.point{
		font-weight: bold;
		font-size: 1.1em;
		color: #E36414;
		line-height: 1.5em;
		padding-bottom: 0.8em;
	}
}

.point1{
	font-weight: bold;
	font-size: 1.25em;
	color: #E36414;
	line-height: 1.5em;
	padding-bottom: 0.5em;
}

.point2{
	font-weight: bold;
	font-size: 1.25em;
	color: #4d3a2e;
	line-height: 1.5em;
	padding-bottom: 0.5em;
}


.hasi-box {
  background: url('https://yuni-design.com/images/hasi.webp') no-repeat center top;
  background-size: contain;
  width: 100%;
	height:400px;
  padding-top: 33%;
	position:relative;
}

@media screen and (max-width: 1024px){
	.hasi-box {
	  background: url('https://yuni-design.com/images/hasi.webp') no-repeat center top;
	  background-size: contain;
	  width: 100%;
		height:360px;
	  padding-top: 40%;
		position:relative;
	}
}

@media screen and (max-width: 820px){
	.hasi-box {
	  background: url('https://yuni-design.com/images/hasi.webp') no-repeat center top;
	  background-size: contain;
	  width: 100%;
		height:280px;
	  padding-top: 37%;
		position:relative;
	}
}

@media screen and (max-width: 540px){
	.hasi-box {
	  background: url('https://yuni-design.com/images/hasi.webp') no-repeat center top;
	  background-size: contain;
	  width: 100%;
		height:200px;
	  padding-top: 37%;
		position:relative;
	}
}

@media screen and (max-width: 430px){
	.hasi-box {
	  background: url('https://yuni-design.com/images/hasi_sm.webp') no-repeat center top;
	  background-size: contain;
	  width: 100%;
		height:280px;
	  padding-top: 80%;
		position:relative;
	}
}

@media screen and (max-width: 280px){
	.hasi-box {
	  background: none;

	}
}




.hasi-box p {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: left;
  align-items: top;
  top: 0;
  left: 0;
	line-height: 2em;
	letter-spacing: 0.2em;
	text-shadow: 2px 2px 2px #efebe1, -2px -2px 2px #efebe1,
  -2px 2px 2px #efebe1,  2px -2px 2px #efebe1,
  2px 0 4px #efebe1, -2px  0 2px #efebe1,
  0 2px 2px #efebe1,  0 -2px 2px #efebe1;
}




@media screen and (max-width: 820px){
	.hasi-box p {
	  position: absolute;
	  width: 100%;
	  height: 100%;
	  display: flex;
	  justify-content: left;
	  align-items: top;
	  top: 0;
	  left: 0;
		font-size:1em;
		line-height: 1.5em;
		text-shadow: 2px 2px 2px #efebe1, -2px -2px 2px #efebe1,
	  -2px 2px 2px #efebe1,  2px -2px 2px #efebe1,
	  2px 0 4px #efebe1, -2px  0 2px #efebe1,
	  0 2px 2px #efebe1,  0 -2px 2px #efebe1;
	}
}

@media screen and (max-width: 540px){
	.hasi-box p {
	  position: absolute;
	  width: 100%;
	  height: 100%;
	  display: flex;
	  justify-content: left;
	  align-items: top;
	  top: 0;
	  left: 0;
		font-size:1em;
		line-height: 1.5em;
		text-shadow: 2px 2px 2px #efebe1, -2px -2px 2px #efebe1,
	  -2px 2px 2px #efebe1,  2px -2px 2px #efebe1,
	  2px 0 4px #efebe1, -2px  0 2px #efebe1,
	  0 2px 2px #efebe1,  0 -2px 2px #efebe1;
	}
}

@media screen and (max-width: 430px){
	.hasi-box p {
	  position: absolute;
	  width: 100%;
	  height: 100%;
	  display: flex;
	  justify-content: left;
	  align-items: top;
	  top: 0;
	  left: 0;
		font-size:1em;
		line-height: 1.5em;
		text-shadow: 2px 2px 2px #efebe1, -2px -2px 2px #efebe1,
	  -2px 2px 2px #efebe1,  2px -2px 2px #efebe1,
	  2px 0 4px #efebe1, -2px  0 2px #efebe1,
	  0 2px 2px #efebe1,  0 -2px 2px #efebe1;
	}
}


.box_copyright {
    margin: 0;
		width:100%;
		border:2px solid #4d3a2e;
}
.box_copyright .box-title {
    font-size: 1.2em;
    background: #4d3a2e;
    padding: 4px;
    text-align: center;
    color: #FFF;
    font-weight: bold;
    letter-spacing: 0.1em;
}
.box_copyright p {
    padding: 15px 20px;
    margin: 0;
		line-height: 2em;
}


.sikaku_number{
	background-color: #4d3a2e;
	color:#fff;
	margin-right:8px;
	width: 34px !important;
  height: 34px !important;
  height: 34px !important;
  text-align: center !important;
	display: inline-block;
}


@media screen and (max-width: 1680px){
	.sikaku_number{
		background-color: #4d3a2e;
		color:#fff;
		margin-right:8px;
		width: 30px !important;
	  height: 30px !important;
	  height: 30px !important;
	  text-align: center !important;
		display: inline-block;
	}
}



@media screen and (max-width: 1024px){
	.sikaku_number{
		background-color: #4d3a2e;
		color:#fff;
		margin-right:6px;
		width: 28px !important;
	  height: 28px !important;
	  height: 28px !important;
	  text-align: center !important;
		display: inline-block;
	}
}

@media screen and (max-width: 820px){
	.sikaku_number{
		background-color: #4d3a2e;
		color:#fff;
		margin-right:5px;
		width: 26px !important;
	  height: 26px !important;
	  height: 26px !important;
	  text-align: center !important;
		display: inline-block;
	}
}

@media screen and (max-width: 430px){
	.sikaku_number{
		background-color: #4d3a2e;
		color:#fff;
		margin-right:5px;
		width: 24px !important;
	  height: 24px !important;
	  height: 24px !important;
	  text-align: center !important;
		display: inline-block;
	}
}

a[href*="tel:"] {
pointer-events: none;
cursor: default;
text-decoration: none;
}


/*==================================================
ページトップへ
===================================*/
/*リンクの形状*/
#page-top a{
	display: flex;
	justify-content:center;
	align-items:center;
	width: 60px;
	height: 80px;
	color: #fff;
	text-align: center;
	text-transform: uppercase;
	text-decoration: none;
	font-size:0.6rem;
	transition:all 0.3s;
	/*背景画像の指定*/
 background: url("https://yuni-design.com/images/pagetop.webp") no-repeat center;
 background-size: contain;
}
@media screen and (max-width: 430px){
	#page-top a{
		display: flex;
		justify-content:center;
		align-items:center;
		width: 45px;
		height: 70px;
		color: #fff;
		text-align: center;
		text-transform: uppercase;
		text-decoration: none;
		font-size:0.5rem;
		transition:all 0.3s;
		/*背景画像の指定*/
	 background: url("https://yuni-design.com/images/pagetop.webp") no-repeat center;
	 background-size: contain;
	}
}




#page-top span{
    position: absolute;
		font-weight: bold;
    bottom: -15px;
    right: 0px;
  color: #4d3a2e;
	text-shadow: 1px 1px 0px #efebe1, -1px -1px 0px #efebe1,
  -1px 1px 0px #efebe1,  1px -1px 0px #efebe1,
  1px 0 1px #efebe1, -1px  0 0px #efebe1,
  0 1px 0px #efebe1,  0 -1px 0px #efebe1;
	line-height: 1em;
}

/*リンクを右下に固定*/
#page-top {
	position: fixed;
	right: 10px;
	bottom:30px;
	z-index: 10001;
    /*はじめは非表示*/
	opacity: 0;
	transform: translateY(150px);
}

/*　上に上がる動き　*/

#page-top.UpMove{
	animation: UpAnime 0.5s forwards;
}
@keyframes UpAnime{
  from {
    opacity: 0;
	transform: translateY(150px);
  }
  to {
    opacity: 1;
	transform: translateY(0);
  }
}

/*　下に下がる動き　*/

#page-top.DownMove{
	animation: DownAnime 0.5s forwards;
}
@keyframes DownAnime{
  from {
  	opacity: 1;
	transform: translateY(0);
  }
  to {
  	opacity: 1;
	transform: translateY(150px);
  }
}


/*========= ナビ2 ===============*/
#g-nav{
    /*position:fixed;にし、z-indexの数値を大きくして前面へ*/
    position:fixed;
    z-index: 999;
    /*ナビのスタート位置と形状*/
	top:-120%;
    left:0;
	width:100%;
    height: 100vh;/*ナビの高さ*/
	background:#999;
    /*動き*/
	transition: all 0.6s;
}

/*アクティブクラスがついたら位置を0に*/
#g-nav.panelactive{
    top: 0;
}

/*ナビゲーションの縦スクロール*/
#g-nav.panelactive #g-nav-list{
    /*ナビの数が増えた場合縦スクロール*/
    position: fixed;
    z-index: 999;
    width: 100%;
    height: 100vh;/*表示する高さ*/
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

/*ナビゲーション*/
#g-nav ul {
    /*ナビゲーション天地中央揃え*/
    position: absolute;
    z-index: 999;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
}

/*リストのレイアウト設定*/

#g-nav li{
	list-style: none;
    text-align: center;
}

#g-nav li a{
	color: #333;
	text-decoration: none;
	padding:10px;
	display: block;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-weight: bold;
}

/*========= ボタンのためのCSS ===============*/
.openbtn{
	position:fixed;
    z-index: 9999;/*ボタンを最前面に*/
	top:0px;
	right: 3px;
	cursor: pointer;
    width: 50px;
    height:50px;
}

/*×に変化*/
.openbtn span{
    display: inline-block;
    transition: all .4s;
    position: absolute;
    left: 12px;
    height: 2px;
    border-radius: 2px;
	background-color: #666;
  	width: 45%;
  }

.openbtn span:nth-of-type(1) {
	top:17px;
}

.openbtn span:nth-of-type(2) {
	top:24px;
}

.openbtn span:nth-of-type(3) {
	top:31px;
}

.openbtn.active span:nth-of-type(1) {
    top: 18px;
    left: 18px;
    transform: translateY(6px) rotate(-45deg);
    width: 30%;
}

.openbtn.active span:nth-of-type(2) {
	opacity: 0;
}

.openbtn.active span:nth-of-type(3){
    top: 30px;
    left: 18px;
    transform: translateY(-6px) rotate(45deg);
    width: 30%;
}

/*==================================================
フローチャート
===================================*/
:root {
  --flowchart-size: 2em;/* 番号のサイズ 変更可 */
  --flowchart-border: 3px;/* 縦線太さ 変更可 */
}
.flowchart {
  list-style: none !important;
  counter-reset: flownum;/* リストアイテムの名称(任意) */
  margin: 1em 0;/* フローチャートと前後要素との距離(任意) */
  padding: 0 !important;
}
.flowchart li {
  position: relative;
  padding: 0 0 2em calc(var(--flowchart-size) + 6px);/* 6px がタイトルとの距離であり余白 */
}

/* 番号部位デザイン */
.flowchart li::before {
  content: counter(flownum);
  counter-increment: flownum;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: -5px;/* 通常は 0, 横に並ぶタイトルとのバランスを見て調整 */
  left: 0;
  z-index: 2;
  width: var(--flowchart-size);
  height: var(--flowchart-size);
  border-radius: 50%;/* 番号円形, 四角形で良ければこの一行削除 */
  background: #4d3a2e;/* 番号背景 */
  color: white;/* 番号文字色 */
}

/* 縦線部位デザイン */
.flowchart li::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: calc(var(--flowchart-size) / 2 - calc(var(--flowchart-border) / 2));
  z-index: 1;
  width: var(--flowchart-border);
  height: 100%;
  background: #B0A695;/* 線の色 */
}

/* 工程タイトル */
.flowchart-title {
  margin: 0 0 .6em;
  font-weight: bold;
  font-size: 1.04em;
  line-height: 1.4;/* 大きめの文字は 1.2 〜 1.4 程度で調整すると良い */
}

/* 最終工程の縦線が必要な方ここから削除 */
.flowchart li:last-of-type::after {
  content: none;
}
/* 最終工程の縦線が必要な方ここまで削除 */

/* p要素を利用した場合の調整 */
.flowchart li p {
  margin: 1em 0 !important;
}
.flowchart li p:last-of-type {
  margin-bottom: 0 !important;
}

.d_none {
	display: none;
}

/*==================================================
チャット風吹き出し
===================================*/

/* 共通CSS */
:root {
  --chat-width-max: 60%;/* 吹き出しの横幅最大値, 不要ならこの一行削除 */
  --chat-margin: 20px;/* 前後要素との距離 */

  --chat-icon-size: 80px;/* アイコン画像のサイズ */

  --chat-text-padding: 10px 15px;/* テキスト内余白 (上下10px 左右15px) */
  --chat-text-font-size: 0.85em;/* テキスト文字大きさ */
}
@media screen and (max-width: 430px){
	:root {
	  --chat-width-max: 100%;/* 吹き出しの横幅最大値, 不要ならこの一行削除 */
	  --chat-margin: 20px;/* 前後要素との距離 */

	  --chat-icon-size: 60px;/* アイコン画像のサイズ */

	  --chat-text-padding: 10px 15px;/* テキスト内余白 (上下10px 左右15px) */
	  --chat-text-font-size: 0.85em;/* テキスト文字大きさ */
	}
}


.chat {
  display: flex;
  align-items: flex-start;
  width: 100%;
  margin: var(--chat-margin) auto;
}

.chat__r {
  justify-content: flex-end;
}

.chat__r .chat__icon {
  order: 1;
}

.chat__icon {
  flex-shrink: 0;
  width: var(--chat-icon-size);
  height: var(--chat-icon-size);
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

.chat__text {
  position: relative;
  max-width: var(--chat-width-max, initial);
  padding: var(--chat-text-padding);
  font-size: var(--chat-text-font-size);
}


:root {
  --sharp-chat-item-distance: 2px;/* アイコン画像〜吹き出し間の距離, 0以上の数値のみ可(吹き出し角分は自動で空きます) */

  --sharp-chat-icon-radius: 0%;/* アイコン円形, 四角形角丸は px で指定 */
  --sharp-chat-icon-bgcolor: ;
  --sharp-chat-icon-bgimage-left: url('https://yuni-design.com/images/icon_chat_client.webp');/* 左画像 */
  --sharp-chat-icon-bgimage-right: url('https://yuni-design.com/images/icon_chat_yuni.webp');/* 右画像 */

  --sharp-chat-text-margin-top: 20px;/* テキスト位置下げ */
  --sharp-chat-text-bgcolor: rgba(0, 0, 0, 0.05);/* テキスト背景色 */
  --sharp-chat-text-color: #4d3a2e;/* テキスト文字色 */

  --sharp-chat-triangle-size: 16px;/* 吹き出し角大きさ */
}

.sharp__chat {
  gap: 0 calc(var(--sharp-chat-item-distance) + var(--sharp-chat-triangle-size));
}

.sharp__chat .chat__icon {
  border-radius: var(--sharp-chat-icon-radius);
  background-color: var(--sharp-chat-icon-bgcolor);
  background-image: var(--sharp-chat-icon-bgimage-left);
}

.sharp__chat.chat__r .chat__icon {
  background-image: var(--sharp-chat-icon-bgimage-right);
}

.sharp__chat .chat__text {
  margin-top: var(--sharp-chat-text-margin-top);
  background: var(--sharp-chat-text-bgcolor);
  color: var(--sharp-chat-text-color);
}

.sharp__chat .chat__text::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: 100%;
  clip-path: polygon(0 0, 100% 100%, 100% 0);
  width: var(--sharp-chat-triangle-size);
  height: calc(var(--sharp-chat-triangle-size) / 1.5);
  background: var(--sharp-chat-text-bgcolor);
}

.sharp__chat.chat__r .chat__text::after {
  right: auto;
  left: 100%;
  clip-path: polygon(0 0, 0 100%, 100% 0);
}



/*==================================================
フローティングバナー
===================================*/



.floating-banner {
    display: none;
}


@media (max-width: 1698.98px) {

    .floating-banner {
        display: block;
        position: fixed;
        z-index: 9999;
        bottom: 0;
        width: 100%;
        left: 0px;
        background-color: #000 !important;
    }

    .floating-banner a.banner {
        text-decoration: none;
        height: 3em;
        color: #fff;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 1.25em;
    }

    .floating-banner a.banner i {
        margin-right: 0.2em;
    }

}


@media (min-width: 1699px) {

    .floating-banner {
        display: block;
        position: fixed;
        z-index: 9999;
        bottom: 20px;
        left: -300px;
    }

		.floating-banner a {
			-moz-transition: -moz-transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
			-webkit-transition: -webkit-transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
			-ms-transition: -ms-transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
			transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
    }

    .floating-banner a:hover {
			-moz-transform: translateX(300px);
			-webkit-transform: translateX(300px);
			-ms-transform: translateX(300px);
			transform: translateX(300px);
			-moz-transition: -moz-transform 0.7s ease-in-out, opacity 0.7s ease-in-out;
			-webkit-transition: -webkit-transform 0.7s ease-in-out, opacity 0.7s ease-in-out;
			-ms-transition: -ms-transform 0.7s ease-in-out, opacity 0.7s ease-in-out;
			transition: transform 0.7s ease-in-out, opacity 0.7s ease-in-out;
    }

    .floating-banner a.banner {
        display: block;
        width: 400px;
        height: 400px;
        background-image: url(https://yuni-design.com/images/side_bnr.webp);
        background-size: contain;
        text-indent: -9999px;
    }

}




/*==================================================
ポップアップ
===================================*/
/* モーダルCSS */
.modalArea {
  display: none;
  position: fixed;
  z-index: 99999; /*サイトによってここの数値は調整 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.modalBg {
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.8);
}

.modalWrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform:translate(-50%,-50%);
  width: 80%;
  max-width: 1000px;
  padding: 10px 30px;
  background-color: #fff;
}

.closeModal {
  position: absolute;
  top: 0.5rem;
  right: 1rem;
  cursor: pointer;
}



#openModal1 img, #openModal2 img{
width:100%;
max-width: 1000px;
cursor: pointer;
transition-duration: 0.5s;
}

.modalContents h1 {
  font-weight: bold;
  color: #E36414;
  font-size: 1.2em;
}
.modalContents p {
  font-size: 0.9em !important;
}



.accordion {
  background-color: rgba(255, 255, 255, 0.38);
  border-radius: 0;
  padding: 20px;

  &:not(:first-of-type) {
    margin-top: 30px;
  }

  .trigger {
    width: 100%;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    column-gap: 12px;

    font-weight: 700;
    text-decoration: none;

    &::before {
      content: "Q";
      width: 37px;
      display: grid;
      place-content: center;
      aspect-ratio: 1;
      background-color: var(--main-brown-color);
      border-radius: 50%;
      color: #fff;
      font-size: 20px;
      font-weight: 700;
      position: relative;
    }

    &[aria-expanded="true"] {
      .icon1 {
        &::before {
          rotate: 180deg;
        }
      }
    }

    .icon1 {
      width: 16px;
      aspect-ratio: 1;
      position: relative;

      &::before,
      &::after {
        content: "";
        display: block;
        width: 100%;
        height: 2px;
        background-color: var(--main-brown-color);
        position: absolute;
        inset: 0;
        margin: auto;
        border-radius: 16px;
      }

      &::before {
        rotate: 90deg;
        transition: rotate 0.3s ease;
      }
    }
  }

  .panel {
    display: block;
    overflow: clip;
    transition: height 0.4s ease;

    .panel-inner {
      padding-top: 16px;
      padding-bottom: 4px;
      color: #997C70;
    }
  }
}

.panel-inner p{
  border-top: 1px dotted #ccc;
  padding-top: 16px;
}

a {
	-webkit-tap-highlight-color: transparent;
}


/*==================================================
日本語テキスト字詰め
===================================*/
.jan_txt{
  letter-spacing: 0.15em !important;
	font-feature-settings: "palt" !important;
}
.justify {
text-align:justify !important;
word-break:break-all !important;
text-justify:inter-ideograph !important;
text-justify:inter-character !important;
word-wrap:break-word !important;
overflow-wrap:break-word !important;
text-justify: inter-ideograph !important; /* IE用 */
}


/*==================================================
ノート
===================================*/
.note {
  background-image: linear-gradient(180deg, rgba(204, 204, 204, 0) 0%, rgba(204, 204, 204, 0) 98.5%, #646464 100%) !important;
  background-repeat: repeat-y;
  background-size: 100% 2.4em;
}
.note p {
  line-height: 2.4em;
}



/*==================================================
カードデザイン
===================================*/

@import url("https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap");

.container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 1rem;
    font-family: "Lato", sans-serif;
    margin-bottom: 3rem;

    .card {
      padding: 1em;
      background-color:#F5EFE7;
      &:nth-child(1) .box .icon .iconBox {
        background-color: var(--main-orange-color);
      }
      &:nth-child(2) .box .icon .iconBox {
        background-color: var(--main-orange-color);
      }
      &:nth-child(3) .box .icon .iconBox {
        background-color: var(--main-orange-color);
      }
      &:nth-child(4) .box .icon .iconBox {
        background-color: var(--main-orange-color);
      }
      &:nth-child(5) .box .icon .iconBox {
        background-color: var(--main-orange-color);
      }
      &:nth-child(6) .box .icon .iconBox {
        background-color: var(--main-orange-color);
      }



      ul {
        margin: 0;
        padding: 0;
        list-style-type: none;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 0.625rem;

        li {
          text-transform: uppercase;
          background: var(--clr-tag);
          color: #282828;
          font-weight: 700;
          font-size: 0.8rem;
          padding: 0.375rem 0.625rem;
          border-radius: 0.188rem;
        }

        .branding {
          color: darken(#d3b19a, 40%);
        }

        .packaging {
          color: darken(#70b3b1, 40%);
        }

        .marketing {
          color: darken(#d05fa2, 40%);
        }
      }

      .content {
        padding: 0.938rem 0.625rem;
        margin-top:0.5rem;



        p {
          margin: 0.625rem 0 1.25rem;
          font-size: 1rem;
        }
      }
    }

    .card-inner {
      position: relative;
      width: inherit;
      height: 18.75rem;
      background: var(--clr);
      border-radius: 1.25rem;
      border-bottom-right-radius: 0;
      overflow: hidden;

      .box {
        width: 100%;
        height: 100%;
        background: #F5EFE7;
        border-radius: 1.25rem;
        overflow: hidden;

        .imgBox {
          position: absolute;
          inset: 0;

          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }

        .icon {
          position: absolute;
          bottom: -0.375rem;
          right: -0.375rem;
          width: 6rem;
          height: 6rem;
          background-color: #F5EFE7;
          border-top-left-radius: 50%;

          &:hover .iconBox {
            transform: scale(1.1);
          }

          &::before {
            position: absolute;
            content: "";
            bottom: 0.375rem;
            left: -1.25rem;
            background: transparent;
            width: 1.25rem;
            height: 1.25rem;
            border-bottom-right-radius: 1.25rem;
            box-shadow: 0.313rem 0.313rem 0 0.313rem #F5EFE7;
          }

          &::after {
            position: absolute;
            content: "";
            top: -1.25rem;
            right: 0.375rem;
            background: transparent;
            width: 1.25rem;
            height: 1.25rem;
            border-bottom-right-radius: 1.25rem;
            box-shadow: 0.313rem 0.313rem 0 0.313rem #F5EFE7;
          }

          .iconBox {
            position: absolute;
            inset: 0.625rem;
            background: #F5EFE7;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            transition: 0.3s;

            span {
              color: #fff;
              font-size: 1.5rem;
            }
          }
        }
      }
    }
  }


  @media screen and (max-width: 430px){
    .container {

        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

        }
  }


  .card h2{
    font-size:1.3rem;
    font-weight: bold;
  }