/*
Theme Name: Design03
Version: 1.5
*/
@charset "utf-8";
/* ------------------------------------------------ */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700;900&display=swap');

/* ------------------------------------------------ */
.pc {}.sp {display: none;}.none {display: none;}
@media screen and (max-width: 479px) {
.pc {display: none;}.sp {display: block;}
}
@media screen and (max-width: 767px) {
.pc2 {display: none;}.sp2 {display: block;}
}
.drawer .none {display: block!important;}
/* ------------------------------------------------ */
:root {
	--white: #fff;
	--black: #000;
	--black: #38302d;
	--gray1: #333;
	--gray2: #666;
	--gray3: #999;
	--gray4: #ccc;
	--gray5: #e6e6e6;
	--gray6: #f2f2f2;
	--color1: #07a5b2;
	--color2: #ef6356;
	--color3: #338e4f;
	--color4: #f2a591;

	--mail: #029eaf;
	--tel: #ed5642;
	--mail2: #02829b;
	--tel2: #cc2b11;

	--red: #c00;
	--font1: 'Noto Sans JP', sans-serif;
}
/* ------------------------------------------------ */
@-ms-viewport {width: device-width;}
@viewport {width: device-width;}
*{
margin:0;
padding:0;
}
html,body {
	height: 100%;
	font-size: 62.5%;
	margin: 0px auto;
}
body {
	color: var(--black);
	font-size: 16px;
	font-size: 1.6rem;
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 500;
	background-color: var(--white);
}
@media screen and (max-width: 479px) {
	body {
		font-size: 14px;
		font-size: 1.4rem;
		-webkit-text-size-adjust: 100%;
	}
}
#container {
	position: relative;
	text-align: left;
	margin: 0px auto;
	padding: 0px;
}
a {
	text-decoration: none;
	-webkit-transition: all 0.2s linear;
	-moz-transition: all 0.2s linear;
	-o-transition: all 0.2s linear;
	transition: all 0.2s linear;
}
a:link {color: var(--black);}
a:visited {color: var(--black);}
a:active {color: var(--color1);}
a:hover {color: var(--color1);}
a img {
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	transition: all 0.5s ease;
}
a:active img,
a:hover img {
	opacity: 0.8;
}
a svg rect,
a svg path,
a svg circle,
a svg polygon{
	-webkit-transition: all 0.2s linear;
	-moz-transition: all 0.2s linear;
	-o-transition: all 0.2s linear;
	transition: all 0.2s linear;
}
h1,h2,h3,h4,h5,h6 {font-size:1em;}
strong, b {
	font-weight: 700;
}
em,i,address {font-style: normal;}
a[href^='tel'] img {display:inline-block;}
@media screen and (max-width: 479px) {
	a[href^='tel'] {pointer-events: auto;}
	a[href^='tel'] img {display:block;}
}
button,input,select,textarea {
	outline: none;
	font-family: var(--font1);
	font-weight: 500;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
input:-webkit-autofill {
	-webkit-box-shadow: 0 0 0px 1000px white inset;
}
input[type='number']::-webkit-outer-spin-button,
input[type='number']::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
input[type=number] {
	appearance:textfield;
}
input[type='submit'],
input[type='button'],
button {
	-webkit-transition: all 0.2s linear;
	-moz-transition: all 0.2s linear;
	-o-transition: all 0.2s linear;
	transition: all 0.2s linear;
}
img {display:block;max-width:100%;border:none;-ms-interpolation-mode: bicubic;backface-visibility: hidden;image-rendering: -webkit-optimize-contrast;}
@media screen and (max-width: 479px) {
	img {max-width:100%;height:auto;}
}
ul {list-style-type:none;}
.attention,.error {color: #c00;font-weight: 700;}
.red {color: #f00;}
/* ------------------------------------------------ */
.nava {
	background-color: var(--gray6);
	padding: 20px 0px;
}
.nava ul {
}
.nava ul li {
	text-align: center;
	padding: 2px 10px;
}
.nava ul li a {
	display: block;
	color: var(--white);
	font-size: 16px;
	vertical-align: middle;
	border: 2px solid var(--white);
	-moz-border-radius: 50px;
	-webkit-border-radius: 50px;
	border-radius: 50px;
	padding: 15px 5px;
}
.nava ul li:nth-child(1) a {
	background-color: var(--tel);
}
.nava ul li:nth-child(2) a {
	background-color: var(--mail);
}
.nava ul li a strong {
	display: block;
	font-weight: 700;
	line-height: 1.2em;
}
.nav {
	padding: 0px 0px 50px 0px;
}

.nav-title {
	text-align: center;
	padding: 10px 10px;
}
.nav-title a {
	display: inline-block;
	color: var(--white);
}
.nav-title strong {
	display: block;
	color: var(--white);
	font-size: 28px;
	font-weight: 700;
	line-height: 1.2em;
	margin-bottom: 10px;
}
.nav-title strong b {
	color: var(--white);
	font-size: 1.2em;
	font-weight: 900;
}
.nav-title img {
	display: inline-block;
	width: 150px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
}

.nav ul {
	display: block;
}
.nav ul li {
	position: relative;
}
.nav ul li ul {
}
.nav ul li ul li {
}
.nav ul li a {
	display: block;
	position: relative;
	color: var(--white);
	text-decoration: none;
	background-color: var(--color1);
	border-top: 1px solid #000;
	padding: 20px 10px;
}
.nav ul li a:hover {
	background-color: var(--color2);
}
.nav ul li:first-child a {
	border-top: 2px solid #000;
}
.nav ul li:last-child a {
	border-bottom: 2px solid #000;
}
.nav ul li ul li a {
	border-top: 1px dashed #000;
	padding: 10px 10px;
}
.nav ul li ul li:first-child a {
	border-top: 1px dashed #000;
}
.nav ul li ul li:last-child a {
	border-bottom: none;
}
.nav ul li a strong {
	display: block;
	font-size: 15px;
	font-weight: 500;
}
/* ------------------------------------------------ */
.gotop{
	position: fixed;
	bottom: -50px;
	right: 0;
	z-index: 9999;
	visibility: hidden;
	opacity: 0;
	-webkit-transition: all 0.2s linear;
	-moz-transition: all 0.2s linear;
	-o-transition: all 0.2s linear;
	transition: all 0.2s linear;
}
.gotop.block {
	bottom: 0;
	visibility: visible;
	opacity: 1;
}
.gotop a,
.gotop a::before,
.gotop a::after {
	-webkit-transition: all 0.2s linear;
	-moz-transition: all 0.2s linear;
	-o-transition: all 0.2s linear;
	transition: all 0.2s linear;
}
.gotop a {
	display: block;
	position: relative;
	width: 40px;
	height: 40px;
	background-color: var(--color1);
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	margin-left: auto;
	margin-right: 10px;
	margin-bottom: 10px;
}
.gotop a::before,
.gotop a::after {
	display: inline-block;
	content: "";
	position: absolute;
	left: 50%;
}
.gotop a::before {
	bottom: 10px;
	z-index: 1;
	width: 10px;
	height: 10px;
	border-top: 1px solid;
	border-left: 1px solid;
	border-color: var(--white);
	transform: rotate(45deg);
	margin-left: -5px;
}
.gotop a::after {
	bottom: -10px;
	z-index: 0;
	width: 1px;
	height: 31px;
	background-color: var(--white);
}
.gotop a:hover {
	background-color: var(--color2);
}
.gotop a:hover::before {
	bottom: 20px;
	border-color: #fff;
}
.gotop a:hover::after {
	bottom: 0px;
	background-color: #fff;
}
.gotop a span {
	display: block;
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;
}
/* ------------------------------------------------ */
.panlink {
	font-size: 0.8em;
	padding: 10px 10px;
}
.panlink span {
	display: inline-block;
	font-weight: 700;
}
.panlink a span {
	display: inline-block;
	font-weight: 400;
}
@media screen and (max-width: 479px) {
	.panlink {
		width: auto;
	}
}
/* ------------------------------------------------ */
#wrap {
}
#main {
	line-height: 1.8em;
}
.main {
	padding: 30px 0px;
}
@media screen and (max-width: 479px) {
	.main {
		padding: 20px 0px;
	}
}
/* link------------------------------------------------ */
.link {
	text-align: center;
	padding: 30px 0px;
}
.link-bloc {
	text-align: center;
}
.link-bloc .link {
	display: inline-block;
	vertical-align: top;
	padding: 5px 10px;
}
.link a {
	display: inline-block;
	position: relative;
	max-width: 300px;
	height: auto;
	cursor: pointer;
	outline: none;
	font-size: 15px;
	font-weight: 500;
	line-height: 1em;
	vertical-align: middle;
	text-decoration: none;
	background: transparent;
	padding: 0;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	transition: .2s linear .1s;
	transition: .2s ease-in-out .1s;
	overflow: hidden;
	-moz-border-radius: 100px;
	-webkit-border-radius: 100px;
	border-radius: 100px;
}
.linkb a {
	font-size: 20px;
	font-size: clamp(18px, 2vw, 20px);
}
.link a:hover {
	-moz-box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.3);
	-webkit-box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.3);
	box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.3);
}
.link a span {
	display: block;
	position: relative;
	z-index: 1;
	padding: 15px 40px;
	-webkit-transition: all 0.2s linear;
	-moz-transition: all 0.2s linear;
	-o-transition: all 0.2s linear;
	transition: all 0.2s linear;
}
.link a::after {
	content: "";
	position: absolute;
	z-index: 0;
	left: 0;
	top: 0;
	width: 100%;
	height: 0px;
	-webkit-transition: all 0.2s linear;
	-moz-transition: all 0.2s linear;
	-o-transition: all 0.2s linear;
	transition: all 0.2s linear;
}
.link a:hover::after {
	width: 100%;
	height: 100%;
	background-color: var(--white);
}
/* ----------- */
.link a,
.link1 a {
	color: var(--white);
	background-color: var(--color1);
	border: 2px solid var(--color1);
}
.link a:hover,
.link1 a:hover {
	color: var(--color1);
}
.link a::after,
.link1 a::after {
	background-color: var(--color1);
}
.link a:hover span,
.link1 a:hover span {
	color: var(--color1);
}
.link a:hover::after,
.link1 a:hover::after {
	background-color: var(--white);
}
/* ----------- */
.link2 a {
	color: var(--white);
	background-color: var(--color2);
	border: 2px solid var(--color2);
}
.link2 a:hover {
	color: var(--color2);
}
.link2 a::after {
	background-color: var(--color2);
}
.link2 a:hover span {
	color: var(--color2);
}
.link2 a:hover::after {
	background-color: var(--white);
}
/* ----------- */
.link3 a {
	color: var(--white);
	background-color: var(--color8);
	border: 2px solid var(--color8);
}
.link3 a:hover {
	color: var(--color8);
}
.link3 a::after {
	background-color: var(--color8);
}
.link3 a:hover span {
	color: var(--color8);
}
.link3 a:hover::after {
	background-color: var(--white);
}
/* ----------- */
.link4 a {
	color: var(--white);
	background-color: var(--red);
	border: 2px solid var(--red);
}
.link4 a:hover {
	color: var(--red);
}
.link4 a::after {
	background-color: var(--red);
}
.link4 a:hover span {
	color: var(--red);
}
.link4 a:hover::after {
	background-color: var(--white);
}
/* table------------------------------------------------ */
table {
	width: 100%;
}
.table {
	width: 100%;
	border-collapse: collapse;
	/*border-collapse: sepalate;*/
	border-spacing: 0px;
	empty-cells:show;
	margin: 0px auto 10px auto;
}
.table th {
	width: 25%;
	color: #fff;
	font-weight: normal;
	background-color: #666;
	text-align: center;
	padding: 5px;
}
.table td {
	border: 1px solid #999;
	padding: 5px;
}
/* ------------------------------------------------ */
.photo {}.photo ul {display: table;width: 100%;table-layout: fixed;border-spacing: 0px;margin: 0px auto;}.photo li {display: table-cell;vertical-align: top;}.photo li img {margin: 0px auto;}@media screen and (max-width: 479px) {.photo ul {display: block;width: auto;}.photo li {display: block;}}
.photo.photoB ul {display: table;width: 100%;table-layout: fixed;border-spacing: 0px;margin: 0px auto;}.photo.photoB li {display: table-cell;vertical-align: top;}
/* ------------------------------------------------ */
.movie {z-index: 9998!important;width: 560px;margin: 0 auto;padding: 20px 0 0 0;}.movie iframe{z-index: 9998!important;}@media screen and (max-width: 479px){.movie {position: relative;width: auto;padding-bottom: 56.25%;padding-top: 30px;height: 0;overflow: hidden;}.movie iframe {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}}

.tableinner dl {
	background-color: #fff;
	border-top: 1px dashed #000;
	margin: 0px auto;
}
.tableinner dl:first-child {
	border-top: 2px solid #000;
}
.tableinner dl:last-child {
	border-bottom: 2px solid #000;
}
.tableinner dl dt {
	width: 20%;
	font-weight: 700;
	text-align: center;
	vertical-align: middle;
	padding: 20px 10px;
}
.tableinner dl dd {
	padding: 20px 20px;
}
@media screen and (max-width: 479px) {
	.tableinner dl {
		border-top: 1px solid #000;
	}
	.tableinner dl dt {
		width: auto;
		border-right: none;
		border-bottom: 1px dashed #999;
		padding: 10px 10px;
	}
	.tableinner dl dd {
		padding: 10px 10px;
	}
}
.tableinner dl dd p {
	margin-bottom: 10px;
}
.tableinner dl dd p:last-child {
	margin-bottom: 0px;
}
/* ------------------------------------------------ */
.map iframe {width:100%;height:500px;}@media screen and (max-width: 479px) {.map iframe {height:200px;}}

/* ------------------------------------------------ */
#drawertriger {
	-webkit-transition: -webkit-transform 0.3s;
	-moz-transition: -moz-transform 0.3s;
	transition: transform 0.3s;
	position: fixed;
	right: 10px;
	top: 10px;
	z-index: 9999;
}
.drawertrig {
	display: block;
	text-align: center;
	cursor: pointer;
}
.drawertrig span, .drawertrig span::before, .drawertrig span::after {
	position: absolute;
	display: inline-block;
	height: 2px;
	width: 34px;
}
.drawertrig span {
	position: absolute;
	left: 50%;
	top: 50%;
	-webkit-transform: translate(-50%,-40%);
	-moz-transform: translate(-50%,-40%);
	-ms-transform: translate(-50%,-40%);
	-o-transform: translate(-50%,-40%);
	transform: translate(-50%,-40%);
	-webkit-transition: background 0.3s 0.3s;
	-moz-transition: background 0.3s 0.3s;
	transition: background 0.3s 0.3s;
}
.drawertrig span::before, .drawertrig span::after {
	content: '';
	right: 0px;
	-webkit-transform: translateZ(0);
	-moz-transform: translateZ(0);
	-ms-transform: translateZ(0);
	-o-transform: translateZ(0);
	transform: translateZ(0);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transform-origin: 0% 50%;
	-moz-transform-origin: 0% 50%;
	-ms-transform-origin: 0% 50%;
	-o-transform-origin: 0% 50%;
	transform-origin: 0% 50%;
	-webkit-transition: -webkit-transform 0.3s 0.3s;
	-moz-transition: -moz-transform 0.3s 0.3s;
	transition: transform 0.3s 0.3s;
}
.drawertrig span::before {
	top: -10px;
}
.drawertrig span::after {
	top: 10px;
}
.drawer-open .drawertrig span {
}
.drawer-open .drawertrig span::before, .drawer-open .drawertrig span::after {
}
.drawer-open .drawertrig span::before {
	-webkit-transform: translateX(4px) translateY(-3px) rotate(45deg);
	-moz-transform: translateX(4px) translateY(-3px) rotate(45deg);
	-ms-transform: translateX(4px) translateY(-3px) rotate(45deg);
	-o-transform: translateX(4px) translateY(-3px) rotate(45deg);
	transform: translateX(4px) translateY(-3px) rotate(45deg);
}
.drawer-open .drawertrig span::after {
	-webkit-transform: translateX(4px) translateY(2px) rotate(-45deg);
	-moz-transform: translateX(4px) translateY(2px) rotate(-45deg);
	-ms-transform: translateX(4px) translateY(2px) rotate(-45deg);
	-o-transform: translateX(4px) translateY(2px) rotate(-45deg);
	transform: translateX(4px) translateY(2px) rotate(-45deg);
}
.drawer-open #drawertriger {
	-webkit-transform: translateX(-260px);
	-moz-transform: translateX(-260px);
	-ms-transform: translateX(-260px);
	-o-transform: translateX(-260px);
	transform: translateX(-260px);
}
.drawertrig {
	width: 60px;
	height: 60px;
	background-color: var(--white);
	-moz-border-radius: 100px;
	-webkit-border-radius: 100px;
	border-radius: 100px;
	-moz-box-shadow: 1px 1px 3px 1px rgba(0,0,0,0.1);
	-webkit-box-shadow: 1px 1px 3px 1px rgba(0,0,0,0.1);
	box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.1);
	overflow: hidden;
}
#container.fixed #drawertriger .drawertrig {
	width: 50px;
	height: 50px;
}
#container .drawertrig span {
	top: 50%;
}
#container.fixed.drawer-open #drawertrig .drawertrig span {
}
.drawer-open .drawertrig {
	background-color: var(--color1);
	box-shadow: none;
}
.drawer-open .drawertrig span {background: rgba(0,0,0,0);}
.drawertrig span, .drawertrig span::before, .drawertrig span::after {
	background: var(--color1);
}
.drawer-open .drawertrig span::before, .drawer-open .drawertrig span::after {
	background: var(--white);
}
#drawertrig a {
	text-decoration: none;
}
.drawer-open #drawertrig a em {
	padding-top: 30px;
}
#container.fixed.drawer-open #drawertrig a em {
	padding-top: 30px;
}
.drawer {
	background-color: var(--color1);
	box-shadow: -2px 0px 5px 1px rgba(0,0,0,0.1);
	position: fixed;
	z-index: 9998;
	right: -120%;
	top: 0;
	height: 100%;
	width: 260px;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}
.drawer-open .drawer {
	right: 0;
}
#container .drawerbloc {
	display: none;
}
/* ------------------------------------------------ */
.overlay {
	position: fixed;
	z-index: 999;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	cursor: pointer;
	background-color: rgba(0,0,0, 0.5);
	background-color: rgba(255,255,255,0.5);
	visibility: hidden;
	opacity: 0;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transition: opacity 0.3s 0s, visibility 0s 0.3s, -webkit-transform 0.3s 0s;
	-moz-transition: opacity 0.3s 0s, visibility 0s 0.3s, -moz-transform 0.3s 0s;
	transition: opacity 0.3s 0s, visibility 0s 0.3s, transform 0.3s 0s;
}
.overlay.close {
	opacity: 1;
	visibility: visible;
	-webkit-transition: opacity 0.3s 0s, visibility 0s 0s, -webkit-transform 0.3s 0s;
	-moz-transition: opacity 0.3s 0s, visibility 0s 0s, -moz-transform 0.3s 0s;
	transition: opacity 0.3s 0s, visibility 0s 0s, transform 0.3s 0s;
}
/* ------------------------------------------------ */
.modal {
	visibility: hidden;
	opacity: 0;
	position:fixed;
	z-index:9998;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);
	transition: all 0.2s linear;
	background:#fff;
	padding:0px;
	box-shadow: 1px 1px 3px 1px rgba(0,0,0,0.1);
}
.modal.open {
	visibility: visible;
	opacity: 1;
	top:50%;
}
.modal .modalinner {
}

/* ------------------------------------------------ */
#modal-tel {
}
.modal-tel {
	position: relative;
	text-align: center;
	background-color: var(--gray5);
	padding: 5px;
}
.modal-tel-inner {
	background-color: var(--white);
	border: 2px solid var(--color1);
}
@media screen and (max-width:767px) {
	#modal-tel {
		width: 90%;
		max-width: 400px;
	}
	.modal-tel-inner {
		padding: 10px;
	}
}
@media screen and (min-width:768px) {
	#modal-tel {
		width: 90%;
		max-width: 500px;
	}
	.modal-tel {
		padding: 10px;
	}
	.modal-tel-inner {
		padding: 20px;
	}
}
.modal-tel-box {
}
.modal-tel-box h2 {
	color: var(--color2);
	font-size: 30px;
	line-height: 1.2em;
	margin-bottom: 10px;
}
.modal-tel-box h2 span {
	display: inline-block;
	color: var(--color1);
	font-size: 14px;
	vertical-align: middle;
	background-color: var(--white);
	border: 2px solid var(--color1);
	-moz-border-radius: 50px;
	-webkit-border-radius: 50px;
	border-radius: 50px;
	margin: 2px;
	padding: 2px 5px;
}
.modal-tel-box p {
	display: block;
	font-size: 16px;
	font-weight: 700;
}
.modal-tel-link1 {
	padding: 10px 0px;
}
.modal-tel-link1 a {
	display: block;
	position: relative;
	color: var(--white);
	cursor: pointer;
	outline: none;
	border: 0;
	line-height: 1em;
	text-decoration: none;
	background-color: var(--tel);
	-moz-border-radius: 100px;
	-webkit-border-radius: 100px;
	border-radius: 100px;
	-moz-box-shadow: 2px 2px 3px 1px rgba(0,0,0,0.2);
	-webkit-box-shadow: 2px 2px 3px 1px rgba(0,0,0,0.2);
	box-shadow: 2px 2px 3px 1px rgba(0,0,0,0.2);
	padding: 5px;
}
.modal-tel-link1 a:hover,
.modal-tel-link1 a:active {
	background-color: var(--tel2);
}
.modal-tel-link1 a span {
	display: block;
	font-weight: 700;
	line-height: 1em;
	background: linear-gradient(to bottom,  rgba(255,255,255,.1) 0%,rgba(255,255,255,0) 100%);
	border: 2px solid var(--white);
	-moz-border-radius: 100px;
	-webkit-border-radius: 100px;
	border-radius: 100px;
	padding: 10px 30px;
}
.modal-tel-link1 a span strong {
	display: inline-block;
	display: block;
	font-size: 28px;
	line-height: 1em;
	margin-bottom: 10px;
}
.modal-tel-link1 a span b {
	display: block;
	display: inline-block;
	position: relative;
	font-size: 18px;
	line-height: 1em;
	margin-bottom: 5px;
}
.modal-tel-link1 a span b::before {
	content: "";
	position: absolute;
	z-index: 1;
	left: -35px;
	top: 50%;
	transform: translateY(-50%);
	width: 30px;
	height: 30px;
	background-image: url('data:image/svg+xml;charset=UTF-8,<svg width="100%" height="100%" viewBox="0 0 30 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path fill="%23ffffff" d="M18.326,16.193C18.326,18.438 20.094,19.528 21.519,19.528C22.943,19.528 24.711,18.438 24.711,16.193C24.711,14.448 22.985,13.055 21.519,12.222C20.052,13.055 18.326,14.448 18.326,16.193"/><path fill="%23ffffff" d="M5.346,16.23C5.346,18.477 7.115,19.566 8.54,19.566C9.965,19.566 11.733,18.477 11.733,16.23C11.733,14.486 10.005,13.094 8.54,12.261C7.073,13.094 5.346,14.486 5.346,16.23"/><path fill="%23ffffff" d="M27.984,10.54C26.423,10.54 24.527,10.831 23.041,11.477C24.646,12.55 26.198,14.176 26.198,16.229C26.198,18.942 23.923,21.015 21.417,21.015C18.912,21.015 16.714,18.942 16.714,16.229C16.714,14.176 18.189,12.55 19.794,11.477C18.308,10.831 16.557,10.54 14.997,10.54C13.436,10.54 11.684,10.831 10.199,11.477C11.804,12.55 13.279,14.176 13.279,16.229C13.279,18.942 11.081,21.015 8.576,21.015C6.07,21.015 3.76,18.942 3.76,16.229C3.76,14.176 5.348,12.55 6.952,11.477C5.467,10.831 3.573,10.54 2.014,10.54L2.014,9.055C4.653,9.055 6.987,9.713 8.576,10.538C10.163,9.713 12.357,9.055 14.997,9.055C17.635,9.055 19.829,9.713 21.417,10.538C23.006,9.713 25.344,9.055 27.984,9.055L27.984,10.54ZM2.013,23.37L27.987,23.37L27.987,6.418L2.013,6.418L2.013,23.37Z"/></svg>');
	background-repeat: no-repeat;
	background-position: center top;
	background-size: 100%;
}
.modal-tel-link1 a span em {
	display: block;
	font-size: 14px;
	font-weight: 500;
	line-height: 1em;
}
.modal-tel-link2 {
	padding: 20px 10px 10px 10px;
}
.modal-tel-link2 a {
	display: inline-block;
	color: var(--white);
	font-size: 14px;
	font-weight: 700;
	line-height: 1em;
	background-color: var(--mail);
	-moz-border-radius: 100px;
	-webkit-border-radius: 100px;
	border-radius: 100px;
	padding: 20px 20px;
}
.modal-tel-link2 a:hover,
.modal-tel-link2 a:active {
	background-color: var(--mail2);
}
.modal-close {
	text-align: center;
	padding-top: 20px;
}
.modal-close span {
	display: inline-block;
	color: var(--white);
	font-weight: 700;
	background-color: var(--gray2);
	-moz-border-radius: 50px;
	-webkit-border-radius: 50px;
	border-radius: 50px;
	padding: 10px 30px;
	cursor: pointer;
	-webkit-transition: all 0.2s linear;
	-moz-transition: all 0.2s linear;
	-o-transition: all 0.2s linear;
	transition: all 0.2s linear;
}
.modal-close span:hover,
.modal-close span:active {
	background-color: var(--gray3);
}
/* ------------------------------------------------ */

.sandwichs {
	position:absolute;
	z-index: 1;
	right: 0px;
	top: 0px;
	width: 30px;
	height: 30px;
	background-color: var(--gray3);
}
.sandwichs::before,
.sandwichs::after {
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	display: block;
	position: absolute;
	top: 48%;
	width: 100%;
	height: 6%;
	content: "";
	background-color: #fff;
	transition: all 0.8s ease-in-out;
}
.sandwichs::before {
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}
.sandwichs::after {
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}
.sandwichs:hover::before,
.sandwichs:hover::after {
	height: 14%;
}
.sandwichs:hover::before {
	-webkit-transform: rotate(315deg);
	transform: rotate(315deg);
}
.sandwichs:hover::after {
	-webkit-transform: rotate(-315deg);
	transform: rotate(-315deg);
}
.sandwichs:hover {
	cursor: pointer;
}
/* ------------------------------------------------ */
.recaptcha_policy {
	text-align: center;
	font-size: 13px;
	padding: 20px 0px;
}
.recaptcha_policy a {
	text-decoration: underline;
}
.grecaptcha-badge { visibility: hidden; }
/* ------------------------------------------------ */
#header {
}
.header {
}
/* ------------------------------------------------ */
#footer {
	text-align: center;
	color: var(--white);
	background-color: var(--color1);
	padding: 20px 10px 0px 10px;
}
.footer {
}
.footer-inner {
}
.footer-logo {
}
.footer-logo a {
	display: inline-block;
	color: var(--white);
}
.footer-logo a strong {
	display: block;
	font-size: 48px;
	font-size: clamp(18px, 2vw, 20px);
	font-weight: 700;
	line-height: 1em;
	margin-bottom: 10px;
}
.footer-logo a img {
	display: inline-block;
	width: 150px;
}
.copyright {
	font-weight: 400;
	text-align: center;
	padding: 5px;
}
.copyright small {
	font-size: 10px;
}
/* ------------------------------------------------ */
html, body {
	margin: 0;
	padding: 0;
	height: 100%;
}
body {
	background-color: var(--gray6);
}
#container {
	background-color: var(--white);
}
.home #container {
	height: 100vh;
	overflow-y: scroll;
	scroll-snap-type: y mandatory;
	scroll-behavior: smooth;
}
@media screen and (max-width:767px) {
	#container {
		width: 100vw;
	}
}
@media screen and (min-width:768px) {
	#container {
		width: 768px;
		margin: 0px auto;
	}
}
/*
@media screen and (max-height:799px) {
body {
	background-color: #fc0;
}
}
@media screen and (max-height:650px) {
body {
	background-color: #fcc;
}
}
*/
.section {
	position: relative;
	z-index: 0;
	width: 100vw;
	width: 100%;
	height: 100vh;
	height: calc(var(--vh, 1vh) * 100);
	scroll-snap-align: start;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
border-bottom: 2px solid var(--gray4);
}

@media screen and (max-width:767px) {
	.section {
/*
		display: flex;
		align-items: center;
		justify-content: center;
*/
	}
	.section.start {
		display: block;
	}
}
@media screen and (min-width:768px) {
	.section.flex {
/*
		display: flex;
		align-items: center;
		justify-content: center;
*/
	}
}
/* ------------------------------------------------ */
.section {
	height: 100vh;
	height: calc(var(--vh, 1vh) * 100);
/*
	display: table;
	width: 100%;
	table-layout: fixed;
	border-spacing: 0px;
}
.section div {
	display: table-cell;
	vertical-align: middle;

*/
}
.section div {
	height: calc(100vh - 60px);
}
.section#thanks div {
	height: 100vh;
}
.section div img {
	height: 100%;
	margin: 0px auto;
}
@media screen and (max-width: 420px) {
.section div img {
    max-width: 100%;

	height: auto;
	margin: 0px auto;
}
}
/* ------------------------------------------------ */
#btmcon {
	position: fixed;
	z-index: 998;
	left: 0px;
	bottom: 0px;
	width: 100%;
	height: 60px;
	background-color: rgba(0,0,0,0.5);
	background-color: rgba(255,255,255,0.5);
}
@media screen and (min-width:767px) {
	#btmcon {
		height: 60px;
	}
}
@media screen and (min-width:768px) {
	#btmcon {
		left: 50%;
		transform: translateX(-50%);
		width: 768px;
		height: 80px;
	}
}
@media screen and (min-width:768px) and (max-height:799px) {
	#btmcon {
		height: 60px;
	}
}
.btmcon {
	height: 100%;
	text-align: center;
}
.btmcon ul {
	display: table;
	width: 100%;
	height: 100%;
	table-layout: fixed;
	border-spacing: 0px;
}
.btmcon ul li {
	display: table-cell;
	vertical-align: middle;
	box-sizing: border-box;
	padding: 2px 2px;
}
.btmcon-tel {
}
.btmcon-mail {
}

.btmcon ul li a {
	display: block;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	color: var(--white);
	line-height: 1em;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	box-sizing: border-box;
	padding: 2px 2px;

	-moz-box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.1);
	-webkit-box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.1);
	box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.1);

}
.btmcon-mail a {
	background-color: var(--mail);

}
.btmcon-tel a {
	background-color: var(--tel);

}
.btmcon-tel a:active,
.btmcon-tel a:hover {
	background-color: var(--tel2);
}
.btmcon-mail a:active,
.btmcon-mail a:hover {
	background-color: var(--mail2);
}

.btmcon ul li a span {
	display: block;
	width: 100%;
	height: 100%;
	line-height: 1em;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	border: 1px solid  rgba(255,255,255,.5);
	box-sizing: border-box;
	padding: 2px 2px;
	background: linear-gradient(to bottom,  rgba(255,255,255,.2) 0%,rgba(255,255,255,0) 100%);

}
.btmcon ul li a span strong {
	display: block;
	font-size: 12px;
	font-weight: 700;
	line-height: 1em;
	background-color: var(--white);
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	padding: 2px 0px;
}
.btmcon ul li a span b {
	display: block;
	position: relative;
	font-size: 16px;
	line-height: 1em;
	padding: 3px 0px;
}
.btmcon ul li a span em {
	display: block;
	font-size: 10px;
	line-height: 1em;
}
@media screen and (min-width:768px) {
	.btmcon ul li a span strong {
		font-size: 14px;
		padding: 2px 0px;
	}
	.btmcon ul li a span b {
		font-size: 20px;
		padding: 5px 0px;
	}
	.btmcon ul li a span em {
		font-size: 14px;
	}
}
@media screen and (min-width:768px) and (max-height:799px) {
	.btmcon ul li a span strong {
		font-size: 12px;
		padding: 2px 0px;
	}
	.btmcon ul li a span b {
		font-size: 16px;
		padding: 3px 0px;
	}
	.btmcon ul li a span em {
		font-size: 10px;
	}
}
.btmcon-tel a span strong {
	color: var(--tel);
}
.btmcon-mail a span strong {
	color: var(--mail);
}


.btmcon-tel a span b {
}
.btmcon-mail a span b {
}


/* ------------------------------------------------ */
#header {
	position: relative;
	height: 100%;
	box-sizing: border-box;
	padding-bottom: 60px;
}
#header .bloc,
#header .inner {
	height: 100%;
		padding: 0px;
}
header {
	background-image: url("./img/header_pc.webp");
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	overflow: hidden;
}
.header {
}
.header-inner {
	position: relative;
	z-index: 2;
}
.header-title {
	padding: 10px 10px;
}
@media screen and (max-width:479px) {
	.header-title {
		text-align: center;
		padding: 20px 10px 10px 10px;
	}
}
.header-title h1 {
	color: var(--white);
	color: var(--color1);
	font-size: 50px;
	font-size: clamp(30px,50vw, 50px);
	font-weight: 700;
	line-height: 1.1em;
	text-shadow: #fff 2px 0px 0px, #fff -2px 0px 0px,#fff 0px -2px 0px, #fff 0px 2px 0px,#fff 2px 2px 0px, #fff -2px 2px 0px,#fff 2px -2px 0px, #fff -2px -2px 0px,#fff 1px 2px 0px, #fff -1px 2px 0px,#fff 1px -2px 0px, #fff -1px -2px 0px,#fff 2px 1px 0px, #fff -2px 1px 0px,#fff 2px -1px 0px, #fff -2px -1px 0px,#fff 1px 1px 0px, #fff -1px 1px 0px,#fff 1px -1px 0px, #fff -1px -1px 0px;
	-moz-text-shadow: #fff 2px 0px 0px, #fff -2px 0px 0px,#fff 0px -2px 0px, #fff 0px 2px 0px,#fff 2px 2px 0px, #fff -2px 2px 0px,#fff 2px -2px 0px, #fff -2px -2px 0px,#fff 1px 2px 0px, #fff -1px 2px 0px,#fff 1px -2px 0px, #fff -1px -2px 0px,#fff 2px 1px 0px, #fff -2px 1px 0px,#fff 2px -1px 0px, #fff -2px -1px 0px,#fff 1px 1px 0px, #fff -1px 1px 0px,#fff 1px -1px 0px, #fff -1px -1px 0px;
	-webkit-text-shadow: #fff 2px 0px 0px, #fff -2px 0px 0px,#fff 0px -2px 0px, #fff 0px 2px 0px,#fff 2px 2px 0px, #fff -2px 2px 0px,#fff 2px -2px 0px, #fff -2px -2px 0px,#fff 1px 2px 0px, #fff -1px 2px 0px,#fff 1px -2px 0px, #fff -1px -2px 0px,#fff 2px 1px 0px, #fff -2px 1px 0px,#fff 2px -1px 0px, #fff -2px -1px 0px,#fff 1px 1px 0px, #fff -1px 1px 0px,#fff 1px -1px 0px, #fff -1px -1px 0px;
}
.header-title h1 a {
	display: inline-block;
	color: var(--color1);
}
.header-title h1 b {
	color: var(--color1);
	font-weight: 700;
}
/* ------------------------------------------------ */
#page-contact {
	padding: 10px 10px;
}
/* ------------------------------------------------ */