@charset "utf-8";

:root {
	--bk:#333333;
	--rd:#df7176;
	--or:#f7c08e;
	--wh:#ffffff;
	--pk:#ffedee;
	--gr:#ababab;
}

/* PC */
@import "https://fonts.googleapis.com/css2?family=Zen+Old+Mincho:wght@400;500;700&display=swap";
:where(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) {
  font: inherit;
  vertical-align: baseline;
  border: 0;
  margin: 0;
  padding: 0
}
:where(article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section) {
  display: block
}
:where(body) {
  color: #000;
  background: #fff;
  min-height: 100vh;
  line-height: 1
}
:where(ol, ul) {
  list-style: none
}
:where(blockquote, q) {
  quotes: none
}
:where() {
  content: "";
  content: none
}
:where(table) {
  border-collapse: collapse;
  border-spacing: 0
}
:where(img, picture, video, canvas, svg) {
  max-width: 100%;
  display: block
}
:where(input, button, textarea, select) {
  font: inherit
}
:where(button, input[type=button], input[type=submit], input[type=reset]) {
  -webkit-appearance: button
}
:where(a) {
  color: inherit;
  text-decoration: none
}
:where(*) {
  box-sizing: border-box
}
:where(img) {
  height: auto
}
:where(button) {
  cursor: pointer;
  color: inherit;
  font: inherit;
  background: 0 0;
  border: none;
  padding: 0
}
.pc-only {
  display: none
}
@media screen and (width>=1024px) {
  .pc-only {
    display: block
  }
}
.sp-only {
  display: block
}
@media screen and (width>=1024px) {
  .sp-only {
    display: none
  }
}
.js-fade-up {
  opacity: 0
}
body {
  color: #333;
  background: #fff;
  padding-top: 55px;
  font-family: Zen Old Mincho, serif;
  line-height: 1.2
}
@media screen and (width>=1024px) {
  body {
    padding-top: 5.20833vw
  }
}

.header-fixed {
  z-index: 100;
  background: linear-gradient(90deg, #dd6b74 0%, #f8c48f 100%);
  justify-content: center;
  align-items: center;
  height: 55px;
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  right: 0
}
@media screen and (width>=1024px) {
  .header-fixed {
    height: 5.20833vw
  }
}
.header-fixed__text {
  color: #fff;
  letter-spacing: .12em;
  text-shadow: 0 1px 3px #00000026;
  font-family: Zen Old Mincho, serif;
  font-size: 35px;
  font-style: italic;
  font-weight: 500
}
@media screen and (width>=1024px) {
  .header-fixed__text {
    font-size: 3.33333vw
  }
}

.footer {
  color: #fff;
  background: #df7176;
  flex-direction: column;
  align-items: center;
  padding: clamp(1.063rem, 4.53vw, 2.125rem) 0;
  display: flex
}
@media screen and (width>=1024px) {
  .footer {
    padding: 27px 0
  }
}
.footer__copy {
  font-size: clamp(.625rem, 2.67vw, 1.25rem)
}
@media screen and (width>=1024px) {
  .footer__copy {
    font-size: 14px
  }
}

/* フォーム */

/* PC */
@media screen and (min-width:750px) {
	:root {
		--z:1px;
	}
	#contact{ font-size:calc(var(--z) * 17); line-height:1.4; }
}

/* SP */
@media screen and (max-width:749px) {
	:root {
		--z:100vw / 750;
	}
	#contact{ font-size:calc(var(--z) * 28); line-height:1.4; }
}


#contact{ font-weight:500; background:var(--pk); color:var(--bk); }
#contact .ttl h2{ line-height:1.0; font-weight:700; color:var(--or); text-align:center; }
#contact .ttl h2 strong{ color:var(--rd); font-weight:inherit; }

#contact .req{
	display:inline-flex; justify-content:center; align-items:center; vertical-align:baseline;
	line-height:1.0;
}
#contact .req{ color:var(--wh); background:var(--rd); }

/* PC */
@media screen and (min-width:750px) {
	#contact .ttl{ padding:calc(var(--z) * 58) 0 calc(var(--z) * 80); }
	#contact .ttl .logo{ width:calc(var(--z) * 343); margin:0 auto calc(var(--z) * 65); }
	#contact .ttl h2{ font-size:calc(var(--z) * 40);  }
	#contact .req{
		width:calc(var(--z) * 54); height:calc(var(--z) * 20);
		font-size:calc(var(--z) * 13); border-radius:calc(var(--z) * 10);
	}
}

/* SP */
@media screen and (max-width:749px) {
	#contact .ttl{ padding:calc(var(--z) * 55) 0 calc(var(--z) * 85); }
	#contact .ttl .logo{ width:calc(var(--z) * 343); margin:0 auto calc(var(--z) * 65); }
	#contact .ttl h2{ font-size:calc(var(--z) * 40);  }
	#contact .req{
		width:calc(var(--z) * 87); height:calc(var(--z) * 31);
		font-size:calc(var(--z) * 22); border-radius:calc(var(--z) * 15);
	}
}
#contact form dt{ position:relative; }
#contact form dt::before{ display:block; content:""; background:var(--rd); position:absolute; }

/* PC */
@media screen and (min-width:750px) {
	#contact form{ max-width:calc(var(--z) * 790); margin:0 auto; padding:0 calc(var(--z) * 20) calc(var(--z) * 170); }
	#contact form dt{ padding-left:calc(var(--z) * 16); margin-bottom:calc(var(--z) * 12); }
	#contact form dt::before{ width:calc(var(--z) * 12); height:calc(var(--z) * 3); left:0; bottom:calc(50% - var(--z) * 2); }
	#contact form dd{ margin-bottom:calc(var(--z) * 30); }
}

/* SP */
@media screen and (max-width:749px) {
	#contact form{ padding:0 calc(var(--z) * 40) calc(var(--z) * 150); }
	#contact form dt{ padding-left:calc(var(--z) * 33); margin-bottom:calc(var(--z) * 15); }
	#contact form dt::before{ width:calc(var(--z) * 20); height:calc(var(--z) * 5); left:0; bottom:50%; }
	#contact form dd{ margin-bottom:calc(var(--z) * 40); }
}

#contact form input,
#contact form textarea,
#contact form select,
#contact form optgroup,
#contact form option{
	border:none;
	font-family:inherit; color:var(--bk);
	box-shadow:calc(var(--z) * 10) calc(var(--z) * 10) calc(var(--z) * 8) rgba(79,79,79,0.08);
	background-color:var(--wh);
}
#contact form *::placeholder,
#contact form select:has(option[value=""]:checked),
#contact form input[type="date"]:placeholder-shown{ color:var(--gr); }
#contact form select,
#contact form input[type="text"],
#contact form input[type="date"]{ width:100%; min-width:0; text-align:left; box-sizing:border-box; }
#contact form input[type="checkbox"]{
	-webkit-appearance:none; appearance:none;
	width:.1em; height:.1em;
	padding:0; vertical-align:middle;
}
#contact form input[type="checkbox"]:checked{ background:#6F6254 url("./img/checkbox_arr.svg") no-repeat center / cover; }
#contact form label{ display:block; color:#6F6254; }
#contact form select{ -webkit-appearance:none; appearance:none; background-image:url("./img/select_arr.svg"); background-repeat:no-repeat; }
#contact form select::-ms-expand{ display:none; }
#contact form textarea{ width:100%; }
/* PC */
@media screen and (min-width:750px) {
	#contact form select,
	#contact form input[type="text"],
	#contact form input[type="date"],
	#contact form select{ max-width:calc(var(--z) * 400); }
	#contact form textarea{ max-width:100%; height:calc(var(--z) * 200); }
	#contact form input[type="text"],
	#contact form input[type="date"],
	#contact form select,
	#contact form textarea{ padding:calc(var(--z) * 20) calc(var(--z) * 25); border-radius:calc(var(--z) * 10); }
	#contact form select{ background-position:right calc(var(--z) * 28) center; background-size:calc(var(--z) * 9) auto; }
}

/* SP */
@media screen and (max-width:749px) {
	#contact form input[type="text"],
	#contact form input[type="date"],
	#contact form select,
	#contact form textarea{ width:calc(100vw - (var(--z) * 40) * 2); height:calc(var(--z) * 100); padding:calc(var(--z) * 30) calc(var(--z) * 40); border-radius:calc(var(--z) * 10); }
	#contact form select{ background-position:right calc(var(--z) * 45) center; background-size:calc(var(--z) * 15) auto; }
	#contact form textarea{ height:calc(var(--z) * 325); }
}

#contact form .btns{ display:flex; justify-content:center; align-items:center; }

#contact form .bt{
	display:inline-flex; justify-content:center; align-items:center; position:relative;
	text-decoration:none; font-family:inherit; font-weight:500;
}

#contact form .bt.submit{
	color:var(--rd); background:var(--wh);
}
#contact form .bt.submit::after{
	display:block; content:"";
	border:1px solid var(--rd); border-bottom-color:transparent; border-left-color:transparent; transform:rotate(45deg);
	position:absolute; 
}
#contact form .bt.back{color:var(--gr); background:var(--wh); }
#contact form .bt.back::after{
	display:block; content:"";
	border:1px solid var(--gr); border-top-color:transparent; border-right-color:transparent; transform:rotate(45deg);
	position:absolute;
}
#contact .read{ text-align:center; }

/* PC */
@media screen and (min-width:750px) {
	#contact form .btns{ gap:calc(var(--z) * 20); padding-top:calc(var(--z) * 50); }
	#contact form .bt.submit{
		width:calc(var(--z) * 300); height:calc(var(--z) * 75);
		font-size:calc(var(--z) * 20);
		border:calc(var(--z) * 3) solid var(--rd); border-radius:calc(var(--z) * 37);
	}
	#contact form .bt.submit::after{
		width:calc(var(--z) * 8); height:calc(calc(var(--z) * 8));
		right:calc(var(--z) * 43); top:calc(50% - calc(var(--z) * 4));
	}
	#contact form .bt.back{
		width:calc(var(--z) * 200); height:calc(var(--z) * 60);
		font-size:calc(var(--z) * 18);
		border:calc(var(--z) * 3) solid var(--gr); border-radius:calc(var(--z) * 30);
	}
	#contact form .bt.back::after{
		width:calc(var(--z) * 8); height:calc(calc(var(--z) * 8));
		left:calc(var(--z) * 43); top:calc(50% - calc(var(--z) * 4));
	}
	#contact .read{ font-size:calc(var(--z) * 16); line-height:calc(var(--z) * 38); }
}

/* SP */
@media screen and (max-width:749px) {
	#contact form .btns{ gap:calc(var(--z) * 20); padding-top:calc(var(--z) * 75); }
	#contact form .bt.submit{
		width:calc(var(--z) * 476); height:calc(var(--z) * 115);
		font-size:calc(var(--z) * 32);
		border:calc(var(--z) * 3) solid var(--rd); border-radius:calc(var(--z) * 57);
	}
	#contact form .bt.submit::after{
		width:calc(var(--z) * 8); height:calc(calc(var(--z) * 8));
		right:calc(var(--z) * 65); top:calc(50% - calc(var(--z) * 4));
	}
	#contact form .bt.back{
		width:calc(var(--z) * 300); height:calc(var(--z) * 75);
		font-size:calc(var(--z) * 26);
		border:calc(var(--z) * 3) solid var(--gr); border-radius:calc(var(--z) * 37);
	}
	#contact form .bt.back::after{
		width:calc(var(--z) * 8); height:calc(calc(var(--z) * 8));
		left:calc(var(--z) * 65); top:calc(50% - calc(var(--z) * 4));
	}
	#contact .read{ font-size:calc(var(--z) * 28); line-height:calc(var(--z) * 38); }
}

input[type="date"]::-webkit-date-and-time-value {
 	text-align:left !important;
}

/* end */