@charset "utf-8";
/*
Theme Name: face.
Description: オリジナルテーマ
Version: 1.0
*/

html{
	font-size: 62.5%;
}

body{
	font-size: 1.8rem;
	font-size: clamp(1.5rem, 0.9vw, 1.8rem);
  font-family: 'Noto Serif JP', serif;
	font-weight: 300;
	font-feature-settings: "palt" 1;
	letter-spacing: 0.04em;
	line-height: 1.8;
  color: #fafafa;
	background-color: #060B34;
	background-color: #091950;
}
@media (min-width: 415px){
body{
	letter-spacing: 0.06em;
	line-height: 2.2;
}
}


/* ==========================================================================
   reset
   ========================================================================== */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
form,fieldset,input,textarea,p,blockquote,th,td{
	padding: 0;
	margin: 0;
}
a{
	text-decoration: none;
	color: #52585C;
}
table{
	border-spacing: 0;
}
fieldset,img{
	border: 0;
}
address,caption,cite,code,dfn,em,strong,th,var{
	font-weight: normal;
	font-style: normal;
}
strong{
	font-weight: bold;
}
ol,ul,li{
	list-style: none;
	margin: 0;
	padding: 0;
}
h1,h2,h3,h4,h5,h6{
	font-weight: normal;
}
abbr,acronym{
	border: 0;
}
img{
	width: 100%;
	height: auto;
	display: block;
}


/* ==========================================================================
   mt
   ========================================================================== */
.mt0{
	margin-top: 0!important;
}
.mt5{
	margin-top: 5px!important;
}
.mt10{
	margin-top: 10px!important;
}
.mt15{
	margin-top: 15px!important;
}
.mt20{
	margin-top: 20px!important;
}
.mt25{
	margin-top: 25px!important;
}
.mt30{
	margin-top: 30px!important;
}
.mt35{
	margin-top: 35px!important;
}
.mt40{
	margin-top: 40px!important;
}
.mt45{
	margin-top: 45px!important;
}
.mt50{
	margin-top: 50px!important;
}
.mt55{
	margin-top: 55px!important;
}
.mt60{
	margin-top: 60px!important;
}
.mt65{
	margin-top: 65px!important;
}
.mt70{
	margin-top: 70px!important;
}
.mt75{
	margin-top: 75px!important;
}
.mt80{
	margin-top: 80px!important;
}
.mt85{
	margin-top: 85px!important;
}
.mt90{
	margin-top: 90px!important;
}
.mt95{
	margin-top: 95px!important;
}
.mt100{
	margin-top: 100px!important;
}
.mt105{
	margin-top: 105px!important;
}
.mt110{
	margin-top: 110px!important;
}
.mt115{
	margin-top: 115px!important;
}
.mt120{
	margin-top: 120px!important;
}
.mt125{
	margin-top: 125px!important;
}
.mt130{
	margin-top: 130px!important;
}
.mt140{
	margin-top: 140px!important;
}
.mt150{
	margin-top: 150px!important;
}
.mt160{
	margin-top: 160px!important;
}
.mt170{
	margin-top: 170px!important;
}
.mt180{
	margin-top: 180px!important;
}
.mt190{
	margin-top: 190px!important;
}
.mt200{
	margin-top: 200px!important;
}


/* ==========================================================================
   mt_sp
   ========================================================================== */
@media (max-width: 959px){
.mt0_sp{
	margin-top: 0!important;
}
.mt5_sp{
	margin-top: 5px!important;
}
.mt10_sp{
	margin-top: 10px!important;
}
.mt15_sp{
	margin-top: 15px!important;
}
.mt20_sp{
	margin-top: 20px!important;
}
.mt25_sp{
	margin-top: 25px!important;
}
.mt30_sp{
	margin-top: 30px!important;
}
.mt35_sp{
	margin-top: 35px!important;
}
.mt40_sp{
	margin-top: 40px!important;
}
.mt45_sp{
	margin-top: 45px!important;
}
.mt50_sp{
	margin-top: 50px!important;
}
.mt55_sp{
	margin-top: 55px!important;
}
.mt60_sp{
	margin-top: 60px!important;
}
.mt65_sp{
	margin-top: 65px!important;
}
.mt70_sp{
	margin-top: 70px!important;
}
.mt80_sp{
	margin-top: 80px!important;
}
.mt90_sp{
	margin-top: 90px!important;
}
.mt100_sp{
	margin-top: 100px!important;
}
.mt110_sp{
	margin-top: 110px!important;
}
.mt120_sp{
	margin-top: 120px!important;
}
}


/* ==========================================================================
   pt
   ========================================================================== */
.pt0{
	padding-top: 0!important;
}
.pt5{
	padding-top: 5px!important;
}
.pt10{
	padding-top: 10px!important;
}
.pt15{
	padding-top: 15px!important;
}
.pt20{
	padding-top: 20px!important;
}
.pt30{
	padding-top: 30px!important;
}
.pt40{
	padding-top: 40px!important;
}
.pt50{
	padding-top: 50px!important;
}
.pt60{
	padding-top: 60px!important;
}
.pt70{
	padding-top: 70px!important;
}
.pt80{
	padding-top: 80px!important;
}
.pt90{
	padding-top: 90px!important;
}
.pt100{
	padding-top: 100px!important;
}
.pt110{
	padding-top: 110px!important;
}
.pt120{
	padding-top: 120px!important;
}


/* ==========================================================================
   pt_sp
   ========================================================================== */
@media (max-width: 959px){
.pt0_sp{
	padding-top: 0!important;
}
.pt5_sp{
	padding-top: 5!important;
}
.pt10_sp{
	padding-top: 10px!important;
}
.pt15_sp{
	padding-top: 15px!important;
}
.pt20_sp{
	padding-top: 20px!important;
}
.pt30_sp{
	padding-top: 30px!important;
}
.pt40_sp{
	padding-top: 40px!important;
}
.pt50_sp{
	padding-top: 50px!important;
}
.pt60_sp{
	padding-top: 60px!important;
}
.pt70_sp{
	padding-top: 70px!important;
}
.pt80_sp{
	padding-top: 80px!important;
}
.pt90_sp{
	padding-top: 90px!important;
}
.pt100_sp{
	padding-top: 100px!important;
}
.pt110_sp{
	padding-top: 110px!important;
}
.pt120_sp{
	padding-top: 120px!important;
}
}


/* ==========================================================================
   br
   ========================================================================== */
.for-pc{
	display: none!important;
}
@media (min-width: 415px){
.for-pc{
	display: none!important;
}
}
@media (min-width: 960px){
.for-pc{
	display: block!important;
}
}

.for-tb{
	display: none!important;
}
@media (min-width: 415px){
.for-tb{
	display: block!important;
}
}
@media (min-width: 960px){
.for-tb{
	display: none!important;
}
}

.for-sp{
	display: block!important;
}
@media (min-width: 415px){
.for-sp{
	display: none;!important;
}
}
@media (min-width: 960px){
.for-sp{
	display: none!important;
}
}


/* ==========================================================================
   top_transition
   ========================================================================== */
.top_transition{
  position: fixed;
	top: 0;
  left: 0;
	width: 100%;
	height: 100%;
	background-color:#fff;
  z-index: 20000;
  transition: all 0.5s ease 0.16s;
	opacity: 1;
}

.top_transition.active{
  opacity: 0;
  z-index: -1;
}