@charset "utf-8";
/* --------------------------------------------

	fonts

---------------------------------------------- */

:root {

    --fz-s: 1.4rem;
    --fz-m: 1.6rem;
    --fz-l: 1.8rem;
    --fz-xl: 2.6rem;
    --fz-xxl: 3.8rem;
	--fz-3xl: 6.8rem;
	--fz-4xl: 8.0rem;

    --fw-light: 300;
	--fw-medium: 500;
    --fw-bold: 700;

}

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

	:root {
		--fz-s: 1.2rem;
		--fz-m: 1.4rem;
		--fz-l: 1.8rem;
		--fz-xl: 2.0rem;
		--fz-xxl: 2.8rem;
		--fz-3xl: 3.0rem;
		--fz-4xl: 4.5rem;
	}

}


/* --------------------------------------------

	color

---------------------------------------------- */

:root {

	--c-text: #373535;
	--c-white: #fff;

	--c-red: #e94919;
	--c-yellow: #f8b500;
	--c-orange: #f0862c;
	--c-green: #3ebab0;
	--c-blue: #377fc2;

	--c-gray-deep: #a1a1a1;
	--c-gray: #dedede;
	--c-gray-pale: #eeeeee;

	--c-yellow-pale: #fdfce2;


}

/* --------------------------------------------

	基本

---------------------------------------------- */

html,
body {
	width: 100%;
	font-size: 62.5%;
	background: var(--c-white);
}

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

	html,
	body {
		font-size: 106.67%;
	}
	body {
		font-size: 1.5rem;
	}
}

*:focus {
	outline: none;
}

a {
	color: var(--c-text);
	text-decoration: none;
	-webkit-tap-highlight-color:rgba(0,0,0,0);
	cursor:pointer;
}

p {
	text-align: justify;
	text-justify: inter-ideograph;
}

a img {
	transition: 0.3s;
}

a:hover img {
	opacity: 0.6 !important;
}

/* セレクト時の色指定 */
::selection {
	background: var(--c-yellow);
	color: var(--c-text);
}

::-moz-selection {
	background: var(--c-yellow);
	/*Firefox*/
	color: var(--c-text);
}

.showSp {
	display: none !important;
}

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

	.showPc {
		display: none !important;
	}

	.showSp {
		display: block !important;
	}
}



body,
input,
select,
textarea {
	font-family: "Noto Sans JP", sans-serif;
	font-size: var(--fz-m);
	line-height: 1.6;
	letter-spacing: 0.05em;
	font-feature-settings: "palt";
	color: var(--c-text);
}
input {
	line-height: 1.8;
}

h1.title {
	font-weight: var(--fw-bold);
	font-size: var(--fz-3xl);
	letter-spacing: 2rem;
	line-height: 1.3;
}

span.subTitle{
	font-family: "Outfit", sans-serif;
    display: block;
    text-align: center;
    font-size: var(--fz-xl);
	font-weight: var(--fw-medium);
	letter-spacing: .1rem;
	line-height: 1;
    color: var(--c-blue);
}

@media only screen and (max-width:640px) {
    h1.title {
        font-size: var(--fz-4xl);
        letter-spacing: .6rem;
    }
}
/* --------------------------------------------

animation

---------------------------------------------- */



.fadeIn {
	animation-name: fadeInAnime;
	animation-delay: 0s;
	animation-duration: 1s;
	animation-fill-mode: forwards;
}

@keyframes fadeInAnime {
	0% {
		opacity: 0
	}

	100% {
		opacity: 1
	}
}



.anime {
	opacity: 0;
}

/* 下から */
.fadeUp {
  animation-name: fadeUpAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}
@keyframes fadeUpAnime {
  from {
    opacity: 0;
    transform: translateY(100px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 左から */

.fadeLeft{
animation-name:fadeLeftAnime;
animation-duration:1s;
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:1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeRightAnime{
  from {
    opacity: 0;
	transform: translateX(100px);
  }

  to {
    opacity: 1;
	transform: translateX(0);
  }
}

@media only screen and (max-width:640px) {
.fadeLeft,
.fadeRight{
  animation-name: fadeUpAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}
}

/* --------------------------------------------

#main

---------------------------------------------- */
#main {
	opacity: 0;
	animation: fadeInAnime 1.8s ease 0.5s 1 forwards;
	-webkit-animation: fadeInAnime 1.8s ease 0.5s 1 forwards;
}