@charset "utf-8";

/*---------------------------------------------------------------
各ページの独自CSS
---------------------------------------------------------------*/
/**
 * 目次
 *
 * 01. 各ページ共通
 * 02. 個別ページ共通
 * ・・・・個別ページ／タイトル
 *
 *（PC-1024px SP-896px以下） 
 *（★の箇所は未使用）
 */

/*******************************************************************************
 01. 各ページ共通
*******************************************************************************/
/* ●コンテンツ囲みフィールド（大囲み用）
=================================================*/
.FIELD-FULL {/***未使用***/
	clear: both; 
	width: 100%;
	margin: 0px auto 0px auto;
}

.FIELD-80PER{
	clear:both;
	position: relative;
	width: 80%;
	-webkit-transition: 0.5s ;
	-moz-transition: 0.5s ;
	-o-transition: 0.5s ;
	padding: 0px 0px 0px 0px;
	margin: 0px auto 0px auto;
}

.FIELD-FULL,
.FIELD-86PER,
.FIELD-80PER,
.FIELD-70PER,
.FIELD-60PER{
	transition: 0.5s ;
	-moz-transition: 0.5s; /* Firefox 4 */
	-webkit-transition: 0.5s; /* Safari and Chrome */
	-o-transition: 0.5s; /* Opera */
}


/*=======================================
/* ◎コンテンツ囲みフィールド（大囲み用）=レスポンシブ対応
=======================================*/
/***---- ▼SP-1800px以上----***/
@media screen and (min-width:1800px){



}
/***---- ▲SP-1800px以上----***/

/***---- ▼SP-2200px以上----***/
@media screen and (min-width:2200px){

.FIELD-86PER,
.FIELD-80PER,
.FIELD-70PER{
	width: 70%;
}

}
/***---- ▲SP-2200px以上----***/

/***---- ▼SP-1500px以下----***/
@media screen and (max-width:1500px){



}
/***---- ▲SP-1500px以下----***/

/***---- ▼SP-896px以下----***/
@media screen and (max-width:896px){




}
/***---- ▲SP-896px以下----***/

/***---- ▼SP-640px以下----***/
@media screen and (max-width:640px){

.FIELD-80PER{
	width: 90%;
}

}
/***---- ▲SP-640px以下----***/


/*******************************************************************************
 02. 個別ページ共通
*******************************************************************************/
/* ●個別ページ／タイトル
=================================================*/
#PAGE_title_stage{
	position: relative;
	z-index:10;
	width: 80%;
	text-align:center;
	transition: 0.5s ;
	margin: 200px auto 0px auto;
}

.P_t_JP,
.P_t_EN{
	transition: 0.5s ;
}

.P_t_JP{
	position: relative;
	width: 100%;
	line-height: 1.2;
	font-feature-settings: "palt";
	font-size: 36px;
	border-bottom: 1px solid #49515b;
	padding: 0px 0px 10px 0%;
	margin: 0px auto 0px auto;
}

.P_t_EN{
	position: relative;
	width: 100%;
	line-height: 1.2;
	font-feature-settings: "palt";
	font-size: 16px;
	padding: 10px 0px 0px 0%;
	margin: 0px auto 0px auto;
}

.P_t_JP_con{
	letter-spacing: 16px;
}
.P_t_EN_con{
	letter-spacing: 20px;
}


/*=======================================
/* ◎個別ページ／タイトル=レスポンシブ対応
=======================================*/
/***---- ▼SP-1800px以上----***/
@media screen and (min-width:1800px){



}
/***---- ▲SP-1800px以上----***/

/***---- ▼SP-2200px以上----***/
@media screen and (min-width:2200px){

#PAGE_title_stage{
	width: 70%;
}

}
/***---- ▲SP-2200px以上----***/

/***---- ▼SP-896px以下----***/
@media screen and (max-width:896px){

#PAGE_title_stage{
	margin: 150px auto 0px auto;
}

.P_t_JP_con{
	font-size: 30px;
}
.P_t_EN_con{
	font-size: 15px;
}

}
/***---- ▲SP-896px以下----***/


/***---- ▼SP-640px以下----***/
@media screen and (max-width:640px){

#PAGE_title_stage{
	width: 90%;
}

.P_t_JP_con{
	font-size: 5.5vw;
	letter-spacing: 8px;
}

.P_t_EN_con{
	font-size: 13px;
	letter-spacing: 10px;
}

}
/***---- ▲SP-640px以下----***/

/***---- ▼SP-480px以下----***/
@media screen and (max-width:480px){

#PAGE_title_stage{
	margin: 140px auto 0px auto;
}

}
/***---- ▲SP-480px以下----***/


/*================================================
●個別ページ／タイトルアニメーション
================================================*/
/*------------------------------------
◎エフェクト設定
------------------------------------*/
.P_t_s_anima {
    animation-name: Pt_anima;
    animation-duration: 3s; /* アニメーション時間*/
}

/*------------------------------------
◎キーフレーム設定
------------------------------------*/
/***もっと元気を応援***********/
@keyframes Pt_anima {
  0% {
    opacity: 0;
    transform: translate3d(0, 20px, 0);
  }
  30% {
    opacity: 0;
    transform: translate3d(0, 20px, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@-moz-keyframes Pt_anima {
  0% {
    opacity: 0;
    transform: translate3d(0, 20px, 0);
  }
  30% {
    opacity: 0;
    transform: translate3d(0, 20px, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@-webkit-keyframes Pt_anima {
  0% {
    opacity: 0;
    transform: translate3d(0, 20px, 0);
  }
  30% {
    opacity: 0;
    transform: translate3d(0, 20px, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}




/* ●WEBフォント 
=================================================*/
/*----------------------------------------------------
 NGT Font
----------------------------------------------------*/
@font-face {
        font-family: ngt;
        src: url('../font/ngtmp.ttf');
}
.ngt {
        font-family: ngt;
        font-weight: lighter;
}

/*----------------------------------------------------
 Noto ゴシック系
----------------------------------------------------*/
@font-face {
        font-family: Noto_sa_BL;
        src: url('../font/NotoSansJP-Black.otf');
}
.Noto_sa_BL {
        font-family: Noto_sa_BL;
}

@font-face {
        font-family: Noto_sa_B;
        src: url('../font/NotoSansJP-Bold.otf');
}
.Noto_sa_B {
        font-family: Noto_sa_B;
}

@font-face {
        font-family: Noto_sa_M;
        src: url('../font/NotoSansJP-Medium.otf');
}
.Noto_sa_M {
        font-family: Noto_sa_M;
}

@font-face {
        font-family: Noto_sa_T;
        src: url('../font/NotoSansJP-Thin.otf');
}
.Noto_sa_T {
        font-family: Noto_sa_T;
}

@font-face {
        font-family: Noto_sa_L;
        src: url('../font/NotoSansJP-Light.otf');
}
.Noto_sa_L {
        font-family: Noto_sa_L;
}

/*----------------------------------------------------
 Noto 明朝系
----------------------------------------------------*/
@font-face {
        font-family: Noto_se_B;
        src: url('../font/NotoSerifCJKjp-SemiBold.otf');
}
.Noto_se_B {
        font-family: Noto_se_B;
}

@font-face {
        font-family: Noto_se_R;
        src: url('../font/NotoSerifCJKjp-Regular.otf');
}
.Noto_se_R {
        font-family: Noto_se_R;
}

@font-face {
        font-family: Noto_se_M;
        src: url('../font/NotoSerifCJKjp-Medium.otf');
}
.Noto_se_M {
        font-family: Noto_se_M;
}

@font-face {
        font-family: Noto_se_L;
        src: url('../font/NotoSerifCJKjp-Light.otf');
}
.Noto_se_L {
        font-family: Noto_se_L;
}

@font-face {
        font-family: Noto_se_E;
        src: url('../font/NotoSerifCJKjp-ExtraLight.otf');
}
.Noto_se_E {
        font-family: Noto_se_E;
}



/*----------------------------------------------------
 Google font
----------------------------------------------------*/
@font-face {
  font-family: 'Noto Serif Japanese';
  font-style: normal;
  font-weight: 100;
  src: url(../font/NotoSerifCJKjp-ExtraLight.otf) format('opentype');
}
.Noto_Serif_EL {
	font-family: 'Noto Serif Japanese';
	font-weight: 100;
}

@font-face {
  font-family: 'Noto Serif Japanese';
  font-style: normal;
  font-weight: 200;
  src: url(../font/NotoSerifCJKjp-Light.otf) format('opentype');
}
@font-face {
  font-family: 'Noto Serif Japanese';
  font-style: normal;
  font-weight: 400;
  src: url(../font/NotoSerifCJKjp-Regular.otf) format('opentype');
 }
@font-face {
  font-family: 'Noto Serif Japanese';
  font-style: normal;
  font-weight: 500;
  src: url(../fonts/NotoSerifCJKjp/NotoSerifCJKjp-Medium.otf) format('opentype');
 }
@font-face {
  font-family: 'Noto Serif Japanese';
  font-style: normal;
  font-weight: 600;
  src: url(../fonts/NotoSerifCJKjp/NotoSerifCJKjp-SemiBold.otf) format('opentype');
 }
.Noto_Serif{
	font-family: 'Noto Serif Japanese';
}


@font-face {
	font-family: 'M PLUS Rounded 1c';
	src: url(../font/MPLUSRounded1c-Thin.ttf) format('opentype');
	src: url(../font/MPLUSRounded1c-Light.ttf) format('opentype');
	src: url(../font/MPLUSRounded1c-Regular.ttf) format('opentype');
	src: url(../font/MPLUSRounded1c-Medium.ttf) format('opentype');
	src: url(../font/MPLUSRounded1c-Bold.ttf) format('opentype');
	src: url(../font/MPLUSRounded1c-ExtraBold.ttf) format('opentype');
	src: url(../font/MPLUSRounded1c-Black.ttf) format('opentype');
}
.MPLUSRounded_T100 {
	font-family: 'M PLUS Rounded 1c';
	font-weight: 100;
}
.MPLUSRounded_L300 {
	font-family: 'M PLUS Rounded 1c';
	font-weight: 300;
}
.MPLUSRounded_R400 {
	font-family: 'M PLUS Rounded 1c';
	font-weight: 400;
}
.MPLUSRounded_M500 {
	font-family: 'M PLUS Rounded 1c';
	font-weight: 500;
}
.MPLUSRounded_B700 {
	font-family: 'M PLUS Rounded 1c';
	font-weight: 700;
}
.MPLUSRounded_EB800 {
	font-family: 'M PLUS Rounded 1c';
	font-weight: 800;
}
.MPLUSRounded_BL900 {
	font-family: 'M PLUS Rounded 1c';
	font-weight: 900;
}


/*Google Fonts　※ヘッダーに<link href="https://fonts.googleapis.com/earlyaccess/sawarabimincho.css" rel="stylesheet" />*/
.wf-sawarabimincho { font-family: "Sawarabi Mincho"; }



/*------------------------------------
◎アニメーション解説
animation: fadeIn① 2s② ease③ 0s④ 1⑤ normal⑥;
① animation-name　キーフレームアニメーション名を指定。
② animation-duration　1回のアニメーションにかかる時間を指定。
③ animation-timing-function　アニメーションの変化率を指定。
　　　　　　　　　　　　　　　　他に ease、linear、ease-out、ease-in-out や
　　　　　　　　　　　　　　　　オリジナルの変化率を指定できる。
④ animation-delay　アニメーションの開始をいくら遅らせるかを指定。
⑤ animation-iteration-count　アニメーションを何回繰り返すかを指定。
⑥ animation-direction　繰り返し時、往復処理をするかを指定。
------------------------------------*/