@charset "UTF-8";

/* Google fonts */
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+1p:wght@100&family=Montserrat:wght@100;200&display=swap');

.wrapper {
	display: none;
}

html {
 line-height: 1;
}
body {
 /* color: #646464; */
 color: #333;
 font-family: 'Montserrat','M PLUS 1p', sans-serif;
 letter-spacing: 0.3em;
 background-color: #d2e0e0;
 font-weight: 100;
	-webkit-text-size-adjust: 100%;
 font-feature-settings: 'palt';
}
img,
picture {
 width: 100%;
 height: auto;
}


/* =========== SP =========== */
/* @media screen and (max-width:599px) {

} */


/* =========================================== */
/* ================ Tablet以下 ================ */
/* ============================================ */

/* @media screen and (min-width:600px) and ( max-width:1024px) { */
@media screen and ( max-width:1024px) {

	/* ===== common ===== */
	body {
		color: #555555;
	}
 .pc {
  display: none;
 }

	/* ===== mainvisual ===== */
 .mainvisual {
  width: 100%;
  position: relative;
  padding-bottom: 64px;
 }
 .mainvisual .inner {
  margin-left: 12.267%;
 }
	.mainvisual h2 {
		font-size: 25px;
		letter-spacing: 0.25em;
		margin-top: 75px;
		margin-bottom: 35px;
		position: relative;
	}
	.mainvisual h2 span.ball {
		display: inline-block;
		width: 15px;
		height: 15px;
		background:#ffffff;
		border-radius: 100%;
		position: absolute;
		top: -35px;
		left: 6px;
	}
	.mainvisual h2 .inner {
  animation: fadeIn 1.5s linear;
  animation-delay: 3s;
  animation-fill-mode: both;
  margin: 0;
 }
	.mainvisual p.txt {
  font-size: 10px;
  line-height: 2.65;
  margin-bottom: 61px;
  animation: fadeIn 1.5s linear;
  animation-delay: 3s;
  animation-fill-mode: both;
  letter-spacing: 0.25em;
		color: #333333;
 }
	.mainvisual h1 {
  width: 222px;
  margin-bottom: 43px;
  animation: fadeIn 1.5s linear;
  animation-delay: 1s;
  animation-fill-mode: both;
 }
 .mainvisual dl.sns {
  font-size: 10px;
  position: relative;
  display: flex;
  align-items: center;
  animation: fadeIn 1.5s linear;
  animation-delay: 3s;
  animation-fill-mode: both;
  letter-spacing: 0.25em;
  }
 .mainvisual dl.sns dt {
  font-weight: 100;
		color: #333333;
 }
 .mainvisual dl.sns dd {
  position: relative;
  display: inline-block;
  width: 20px;
  height: 20px;
  margin: -2px 0 0 0;
 }
 .mainvisual dl.sns dd a {
  display: block;
 }
	.mainvisual .carning_big {
		margin-left: -6px;
	}
	.mainvisual .carning_small {
		margin-left: -1px;
	}
	.mainvisual .scroll {
	 position: absolute;
	 width: 46px;
	 left: 50%;
	 bottom: 14px;
	 margin-left: -23px;
	 text-align: center;
	 opacity: 0;
	 animation: fadeIn 1.5s linear;
	 animation-delay: 3s;
	 animation-fill-mode: both;
	}

	/*===== top_contact =====*/
 #top_contact {
  position: relative;
 }
 #top_contact .to_contact {
  position: absolute;
		top: 64px;
  left: 12.267%;
  font-size: 11px;
  font-weight: 300;
  z-index: 2;
  letter-spacing: 0.25em;
		color: #333333;
 }
 #top_contact .to_contact li:not(:last-child){
	margin-bottom: 24px;
 }
 #top_contact .to_contact li a {
  position: relative;
  padding-right: 18px;
		color: #333333;
 }
 #top_contact .to_contact li span {
  position: absolute;
		top: 50%;
  right: 0;
  animation: flash 2.5s linear infinite;
  display: inline-block;
  width: 15px;
  height: 15px;
  background:#ffffff;
  border-radius: 100%;
  margin-top: -8px;
 }

	/*===== lastarea =====*/
 #lastarea {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
		overflow: hidden;
 }
 #lastarea p.since {
  position: absolute;
  font-size: 11px;
		font-weight: 200;
		letter-spacing: 0.3em;
		color: #333333;
		width: 100%;
		text-align: center;
 }

	/*===== footer =====*/
 footer {
  position: absolute;
  bottom: 26px;
		color: #333333;
		width: 100%;
		text-align: center;
 }
 footer p {
  font-size: 10px;
		letter-spacing: 0.2em;
 }

	/*===== Contact =====*/
 #contact,
 #thanks {
  margin-bottom: 50px;
 }
	#contact h2 {
		font-size: 24px;
		width: 73.333%;
		margin: 0 auto 57px;
		padding-top: 90px;
		letter-spacing: 0.25em;
	}
	#contact #leadtext {
		font-size: 11px;
		line-height: 2.647;
		width: 73.333%;
		margin: 0 auto 54px;
		letter-spacing: 0.08em;
		color: #333333;
	}
 #thanks #leadtext {
  font-size: 11px;
  line-height: 2.647;
  width: 73.333%;
  margin: 0 auto 67px;
  letter-spacing: 0.05em;
 }
	#thanks p.text {
		font-size: 11px;
		line-height: 2.647;
		width: 73.333%;
		margin: 0 auto 67px;
		padding-top: 74px;
		letter-spacing: 0.04em;
		color: #333333;
	}
	#backtotop {
		width: 150px;
  margin-left: 13.3335%;
 }
 #backtotop a {
  display: block;
  background-color: #ffffff;
  padding: 10px 0;
  text-align: center;
  font-size: 12px;
  border-radius: 18px;
  line-height: 1;
		color: #333333;
 }

	/*===== privacypolicy =====*/
	#privacypolicy {
		margin-bottom: 41px;
	}
	#privacypolicy h2 {
  font-size: 24px;
  width: 73.333%;
  margin: 0 auto 62px;
		padding-top: 74px;
		letter-spacing: 0.145em;
 }
	#privacypolicy p {
		font-size: 10px;
		line-height: 2.06566;
		width: 73.333%;
		margin: 0 auto 41px;
		letter-spacing: 0.14em;
		color: #333333;
	}

}


/* ==================================== */
/* ================ PC ================ */
/* ==================================== */

@media screen and (min-width:1025px) {

	/* ===== common ===== */
 .sp {
  display: none;
 }
	#top.wrapper {
		min-width: 1230px;
	}

	/* ===== mainvisual ===== */
 .mainvisual {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  height: 100vh;
  min-height: 650px;
  position: relative;
  padding-bottom: 127px;
 }
 .mainvisual .inner {
  -ms-writing-mode: tb-rl;
  -webkit-writing-mode: vertical-rl;
  -webkit-text-orientation: upright;
  text-orientation: upright;
  writing-mode: vertical-rl;
  min-height: 400px;
  overflow: visible;
 }
	.mainvisual h2 {
		font-size: 37px;
		font-weight: 300;
		letter-spacing: 0.34em;
		margin-left: 70px;
		position: relative;
		/* color: #696969; */
		color: #555;
	}
	.mainvisual h2 span.ball {
		display: inline-block;
		width: 20px;
		height: 20px;
		background:#ffffff;
		border-radius: 100%;
		position: absolute;
		top: -48px;
		left: 50%;
		margin-left: -9px;
	}
	.mainvisual h2 .inner {
		animation: fadeIn 1.5s linear;
		animation-delay: 3s;
		animation-fill-mode: both;
		position: relative;
	}
	.mainvisual p.txt {
  font-size: 14px;
  line-height: 2.78;
  margin-left: 205px;
  animation: fadeIn 1.5s linear;
  animation-delay: 3s;
  animation-fill-mode: both;
 }
 .mainvisual h1 {
  width: 170px;
  margin-left: 80px;
  animation: fadeIn 1.5s linear;
  animation-delay: 1s;
  animation-fill-mode: both;
 }
 .mainvisual dl.sns {
  font-size: 14px;
  position: relative;
  display: flex;
  align-items: center;
  animation: fadeIn 1.5s linear;
  animation-delay: 3s;
  animation-fill-mode: both;
  }
 .mainvisual dl.sns dt {
  font-weight: 100;
		margin-bottom: 4px;
 }
	.mainvisual dl.sns dt span.safarionly {
		letter-spacing: 0;
	}
 .mainvisual dl.sns dd {
  position: relative;
  display: inline-block;
  width: 32px;
  height: 32px;
  margin: 0;
 }
 .mainvisual dl.sns dd a {
  display: block;
 }
 .mainvisual .carning_big {
		margin-top: -10px;
	}
	.mainvisual .carning_small {
		margin-top: -3px;
	}
 .mainvisual .scroll {
		width: 68px;
  position: absolute;
  left: 50%;
  bottom: 36px;
  margin-left: -34px;
  text-align: center;
  opacity: 0;
  animation: fadeIn 1.5s linear;
  animation-delay: 3s;
  animation-fill-mode: both;
 }

	/*=== mainvisual Safari対応 ===*/
 _::-webkit-full-page-media, _:future, :root .mainvisual h2 .inner {
		padding-left: 20px;
		padding-right: 20px;
 }
	_::-webkit-full-page-media, _:future, :root .mainvisual h2 .inner .text {
		position: absolute;
 }
 _::-webkit-full-page-media, _:future, :root .safarionly {
  position: relative;
  right: -7px;
		letter-spacing: 0.1em;
 }
 _::-webkit-full-page-media, _:future, :root .safarionly .nonly {
  position: relative;
 }
 _::-webkit-full-page-media, _:future, :root .mainvisual dl.sns dt {
  display: block;
  margin-left: -11px;
 }

	/*===== top_contact =====*/
 #top_contact {
  position: relative;
 }
	#top_contact::before {
		display: block;
		content: "";
		position: absolute;
		width: 100%;
		height: 100%;
		z-index: 2;
	}
 #top_contact .to_contact {
  position: absolute;
		right: 8.889%; /* right: 128px; */
		bottom: 34.17%; /* bottom: 374px; */
  font-size: 15px;
  font-weight: 300;
  z-index: 3;
 }

 #top_contact .to_contact li:not(:last-child){
	margin-bottom: 32px;
 }
 #top_contact .to_contact li a {
  position: relative;
  padding-right: 16px;
		letter-spacing: 0.25em;
 }
 #top_contact .to_contact li span {
  position: absolute;
  right: 0;
  top: 50%;
  animation: flash 2.5s linear infinite;
  display: inline-block;
  width: 20px;
  height: 20px;
  background:#ffffff;
  border-radius: 100%;
  margin-left: 10px;
  margin-top: -10px;
 }

	/*===== lastarea =====*/
 #lastarea {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
		overflow: hidden;
 }
	#lastarea::before {
		display: block;
		content: "";
		position: absolute;
		width: 100%;
		height: 100%;
		z-index: 2;
	}
 #lastarea p.since {
  position: absolute;
  font-size: 17px;
		width: 100%;
		text-align: center;
		z-index: 3;
 }

	/*===== footer =====*/
 footer {
  position: absolute;
  bottom: 10px;
  right: 3px;
		z-index: 3;
 }
 footer p {
  font-size: 14px;
 }

	/*===== Contact =====*/
 #contact,
 #thanks {
  margin-bottom: 145px;
 }
	#contact h2 {
		font-size: 37px;
		padding-top: 143px;
		margin-left: 145px;
		margin-bottom: 68px;
		letter-spacing: 0.25em;
		/* color: #696969; */
		color: #555;
	}
	#contact #leadtext,
 #thanks #leadtext {
		font-size: 19px;
		line-height: 2.675;
		margin-left: 145px;
		margin-bottom: 83px;
		letter-spacing: 0.21em;
	}
	#thanks p.text {
		font-size: 19px;
		line-height: 2.675;
		margin-left: 145px;
		margin-bottom: 100px;
		padding-top: 143px;
	}
	#backtotop {
		width: 200px;
  margin-left: 145px;
 }
 #backtotop a {
  display: block;
  background-color: #ffffff;
  padding: 10px 0;
  text-align: center;
  border-radius: 18px;
 }

	/*===== privacypolicy =====*/
	#privacypolicy {
		margin-bottom: 135px;
	}
	#privacypolicy h2 {
  font-size: 37px;
  margin-left: 145px;
		margin-bottom: 78px;
		padding-top: 143px;
		letter-spacing: 0.2em;
		/* color: #696969; */
		color: #555;
 }
	#privacypolicy p {
		font-size: 16px;
		line-height: 1.875;
		margin-left: 145px;
		margin-right: 85px;
		letter-spacing: 0.2em;
	}

}

	/*===== totop =====*/
.totop {
	position: absolute;
	top: calc( 143px / 2 - 50px / 2 );
	left: 145px;
	transition: opacity .4s ease;
	width: 38px;
}

.totop p{
	font-size: 18px;
	color: #555;
	letter-spacing:0.05em;
	margin-top: 2px;
	line-height: 1;
}

.totop img{
	margin: 0 !important;
}

.totop:hover {
	opacity: .4;
}

.totop svg {
	/* color: #555; */
	color: #646464;
}

@media only screen and (max-width: 1024px) {
	.totop {
		top: calc(74px / 2 - 14px / 2);
		left: calc((100% - 73.333%) / 2);
		width: 26px;
	}

	.totop p{
		font-size: 14px;
	}

	.totop svg {
		width: 13px;
		height: 25px;
	}
}

/* =========================================== */
/* ================ keyframes ================ */
/* =========================================== */

@keyframes flash {
 0% {
  opacity: 1;
 }
 50% {
  opacity: 0;
 }
 100% {
  opacity: 1;
 }
}

@keyframes fadeIn {
 0%{
  opacity: 0;
 }
 100%{
  opacity: 1;
 }
}