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



/*Fonts
----------------------------------------------------------------------------------------------------------------------*/


/*Noto Sans JP 和ゴシック
-----------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap');

/*font-family: 'Noto Sans JP', sans-serif;*/





/*Noto Sans JP 和明朝
-----------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@600&display=swap');

/*font-family: 'Noto Serif JP', serif;*/




/*Noto Serif Japanese 和明朝
-----------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Brygada+1918:ital@1&display=swap');

/*font-family: 'Brygada 1918', serif;*/




/*Monoton EG TopMainTitle
-----------------------------------------------------------*/
/*@import url('https://fonts.googleapis.com/css2?family=Alata&family=Kosugi+Maru&family=Monoton&display=swap&subset=latin-ext,vietnamese');*/

/*font-family: 'Monoton', cursive;*/



/*Jost EG H2Title
-----------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Philosopher:wght@700&display=swap');

/*font-family: 'Philosopher', sans-serif;*/




/*Jost EG H2Title
-----------------------------------------------------------*/
/*@import url('https://fonts.googleapis.com/css2?family=Jost&display=swap');*/

/*font-family: 'Jost', sans-serif;*/





/*Teko EG 未使用
-----------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Teko:wght@300&display=swap');

/*font-family: 'Teko', sans-serif;*/





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

   Wrap,Contents-wrap,Contents

--------------------------------------------------------------------------------------------- */
.wrap{
	width:100%;
	overflow:hidden;
	position: relative;
	z-index: 10;/*------z-index------*/
	background: #fff;
}

.contents-wrap{
	padding: 75px 0;
	width: 94%;
	margin: 0 auto;
	position: relative;
}


.index-wrap{
	width: 100%;
	overflow: hidden;
	position: relative;
	z-index: 10;/*------z-index------*/
	background: #fff;
}

.index-contents-wrap{
	padding: 0 0 100px 0;
	width: 94%;
	margin: 0 auto;
}


.contents1200{
	width: 1200px;
	margin: 0 auto;
	position: relative;
}
.contents1000{
	width: 1000px;
	margin: 0 auto;
}

@media screen and (max-width:1200px) {
	
.contents1200{
	width: 100%;
}

}

@media screen and (max-width:1000px) {
	
.contents1000{
	width: 100%;
}

}



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

   H1,H2,H3

--------------------------------------------------------------------------------------------- */
h1{
	margin-bottom: 75px;
	position: relative;
}

h1{
	/*font-size: clamp(48px, 2vw, 60px);*/
   font-size: clamp(40px, 3vw, 60px);
	line-height: 1.5;
	font-family: 'Brygada 1918', serif;
    font-weight: normal;
}
h1 .eg-h1{/*英文字*/
	font-family: 'Philosopher', sans-serif;
	font-size: clamp(24px, 2vw, 30px);
	line-height: 1.5;
	color: #9c0;
	border-bottom:1px solid #555;
}

h2 {
	font-size: clamp(24px, 2vw, 30px);
	font-weight: normal;
	line-height: 1.5;
	margin-bottom: 50px;
}
h2 .eg-h2{/*英文字*/
	font-family: 'Philosopher', sans-serif;
	font-size: clamp(24px, 2vw, 30px);
	color: #F90;
	line-height: 1.5;
	border-bottom:1px solid #555;
}

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

h1 .eg-h1{
	border-bottom: 0;
}

h2 .eg-h2{
	border-bottom: 0;
}

}


/* 流体シェイプ指定
------------------------------------------------------------*/
.fluid {
  animation: fluidrotate 10s ease 0s infinite;/*アニメーションの設定 15s*/
  z-index: -1;/*-----------z-index:1------------*/
  background: #ffff99 ;
}

.top-fluid{
  width: 25vh;
  height: 20vh;
  position: absolute;
  top: -0.5%;
  left: 2.5%;
}
.following-fluid{
  width: 25vh;
  height: 20vh;
  position: absolute;
  top: 0.5%; /*1.5%*/
  left: 12.5%;
}

@keyframes fluidrotate {  
	  
0%, 100% {
    border-radius: 63% 37% 54% 46%/55% 48% 52% 45%;
}
14% {
    border-radius: 40% 60% 54% 46%/49% 60% 40% 51%;
}
28% {
    border-radius: 54% 46% 38% 62%/49% 70% 30% 51%;
}
42% {
    border-radius: 61% 39% 55% 45%/61% 38% 62% 39%;
}
56% {
    border-radius: 61% 39% 67% 33%/70% 50% 50% 30%;
}
70% {
    border-radius: 50% 50% 34% 66%/56% 68% 32% 44%;
}
84% {
    border-radius: 46% 54% 50% 50%/35% 61% 39% 65%;
}
	  
}


/* EachTextAnime テキスト
------------------------------------------------------------*/
/*========= 1文字ずつ出現させるためのCSS ===============*/
.eachTextAnime span{
	opacity: 0;
}
.eachTextAnime.appeartext span{
	animation:text_anime_on 1s ease-out forwards;
}
@keyframes text_anime_on {
	0% {
		opacity:0;
	}
	100% {
		opacity:1;
	}
}





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

   Text Size

--------------------------------------------------------------------------------------------- */
.text-36{
	font-size: clamp(30px, 2vw, 36px);
}

.text-30{
	font-size: clamp(24px, 2vw, 30px);
}

.text-24{
	font-size: clamp(20px, 2vw, 24px);
}

.text-20{
	font-size: clamp(18px, 2vw, 20px);
}

.text-18{
	font-size: clamp(16px, 2vw, 18px);
}

.text-16{
	font-size: clamp(14px, 2vw, 16px);
}

.text-15{
	font-size: clamp(13px, 2vw, 15px);
}

.text-14{
	font-size: clamp(12px, 2vw, 14px);
}

.text-12{
	font-size: clamp(10px, 2vw, 12px);
}


/*.xxxxl-text{
	font-size: clamp(30px, 2vw, 36px);
}

.xxxl-text{
	font-size: clamp(24px, 2vw, 30px);
}

.xxl-text{
	font-size: clamp(20px, 2vw, 24px);
}

.xl-text{
	font-size: clamp(18px, 2vw, 20px);
}

.l-text{
	font-size: clamp(16px, 2vw, 18px);
}

.m-text{
	font-size: clamp(14px, 2vw, 16px);
}

.s-text{
	font-size: clamp(12px, 2vw, 14px);
}

.ss-text{
	font-size: clamp(10px, 2vw, 12px);
}*/





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

   Br

--------------------------------------------------------------------------------------------- */
.br-700{
	display: none;
}
.br-500{
	display: none;
}

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

.br-700{
	display: block;
}

}

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

.br-500{
	display: block;
}

}


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

   Bl

--------------------------------------------------------------------------------------------- */
span.bl{
	font-weight: bold;
	color: #963;
}

strong.bl{
	font-weight: bold;
	color: #963;
}



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

   Pankuzu-List

--------------------------------------------------------------------------------------------- */
.pankuzu-wrap{
	width: 100%;
	margin-top: 70px;
	padding: 15px 0;
	background: #eee;
}

.pankuzu-list{
	width: 1200px;
	margin: 0 auto;
	font-size: clamp(12px, 3vw, 14px);
	line-height: 1;
}

.pankuzu-list a{
    color: #333;
}

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

.pankuzu-list{
	width: 90%;
}

}



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

   Page-Top

--------------------------------------------------------------------------------------------- */
#Page-Top {
    position: fixed;
    right: -80px;
    bottom: 50px;
	z-index: 40;
}

#Page-Top a{
    display: flex;
    justify-content: center;
    background: #f90;
    transition: opacity .6s ease;
    align-items: center;
    text-decoration: none;
    border-radius: 100%;
	padding: 20px;
}
#Page-Top a:hover {
    opacity: 0.75;
}

#Page-Top .fa-chevron-up{
	line-height: 1;
	font-size: clamp(12px, 3vw, 18px);
}
#Page-Top a .fa-chevron-up{
	color: #000;
}




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

   スクロールダウンのためのCSS

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

/*=== 9-1-2 丸が動いてスクロールを促す ====*/

/*スクロールダウン全体の場所*/
.scrolldown2{
    /*描画位置※位置は適宜調整してください*/
	position:absolute;
	bottom: -15px;
	left: 50%;
}

/*Scrollテキストの描写*/
.scrolldown2 span{
    /*描画位置*/
	position: absolute;
	left:10px;
	bottom:10px;
    /*テキストの形状*/
	color: #000;
	font-size: 14px;
	letter-spacing: 0.05em;
	/*縦書き設定*/
	-ms-writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
	font-family: 'Urbanist', sans-serif;
}

/* 丸の描写 */
.scrolldown2:before {
    content: "";
    /*描画位置*/
    position: absolute;
    bottom:0;
    left:-4.25px;
    /*丸の形状*/
	width: 10px;
	height: 10px;
	border-radius: 50%;
	/*background: #7dc058;*/
	background: #9c9;
    /*丸の動き1.6秒かけて透過し、永遠にループ*/
	animation:
		circlemove 1.6s ease-in-out infinite,
		cirlemovehide 1.6s ease-out infinite;
}

/*下からの距離が変化して丸の全体が上から下に動く*/
@keyframes circlemove{
      0%{bottom:45px;}
     100%{bottom:-5px;}
 }

/*上から下にかけて丸が透過→不透明→透過する*/
@keyframes cirlemovehide{
      0%{opacity:0}
     50%{opacity:1;}
    80%{opacity:0.9;}
	100%{opacity:0;}
 }

/* 線の描写 */
.scrolldown2:after{
	content:"";
    /*描画位置*/
	position: absolute;
	bottom:0;
	left:0;
    /*線の形状*/
	width: 1px;
	height: 50px;
	background: #000;
}



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

   Footer

--------------------------------------------------------------------------------------------- */
footer{
    width: 100%;
    padding: 50px 3%;
	background: #faf0e6;
    margin-top: 75px;
}

.foot-contents{
    width: 100%;
}

.foot-logo img{
    width: 250px;
    height: auto;
    margin: 0 auto 15px auto;
}

.foot-copy{
    text-align: center;
}

.foot-logo-text{
    text-align: center;
    font-weight: bold;
}

.copy{
    width: 100%;
    padding: 15px 3%;
    text-align: center;
    color: #fff;
    font-size: clamp(12px, 2vw, 14px);
    line-height: 1;
    font-family: 'Philosopher', sans-serif;
    background-color:#F90;
}

@media only screen and (max-width: 700px) {
    
footer{
    margin-top: 25px;
}

.foot-logo img{
    width: 200px;
}
    
}







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

   Fadeアニメーション設定

--------------------------------------------------------------------------------------------- */
/* .fade{
  opacity: 0;
   transform: translate3d(0, 0, 0);
  transition: all 3s ease;
  &.full {
   transition: all 0.8 ease;
  }
}

 .top_fade{
  opacity: 0;
   transform: translate3d(0, -75px, 0);
  transition: all 2s ease;
  &.full {
   transition: all 0.8 ease;
  }
}

 .left_fade{
  opacity: 0;
   transform: translate3d(-75px, 0, 0);
  transition: all 2s ease;
  &.full {
   transition: all 0.8 ease;
  }
}

 .right_fade{
  opacity: 0;
   transform: translate3d(75px, 0, 0);
  transition: all 2s ease;
  &.full {
	  
   transition: all 0.8 ease;
  }
}

 .bottom_fade{
  opacity: 0;
   transform: translate3d(0, 75px, 0);
  transition: all 2s ease;
  &.full {
   transition: all 0.8 ease;
  }
}

.fade-content .anm_mod.active {
 opacity: 1;
 transform: translate3d(0, 0, 0);
}*/