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

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

   Wrap,Contents-wrap,Contents

--------------------------------------------------------------------------------------------- */
.wrap{
	width: 100%;
	overflow: hidden;
}

.contents-wrap{
	width: 100%;
	padding: 75px 0 100px 0;
}

.contents-wrap-irregular{/*変則*/
    padding: 75px 0 0 0;
}

.contents1600{
	width: 1600px;
	margin: 0 auto;
}

.contents1400{
	width: 1400px;
	margin: 0 auto;
}

.contents1200{
	width: 1200px;
	margin: 0 auto;
}

.contents960{
	width: 960px;
	margin: 0 auto;
}

.contents900{
	width: 900px;
	margin: 0 auto;
}

.contents700{
	width: 700px;
	margin: 0 auto;
}

.contents600{
	width: 600px;
	margin: 0 auto;
}

.contents500{
	width: 500px;
	margin: 0 auto;
}

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

.contents1600{
	width: 92%;
}
}

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

.contents1400{
	width: 92%;
}
}

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

.contents1200{
	width: 92%;
}
}

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

.contents960{
	width: 92%;
}
}

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

.contents900{
	width: 92%;
}
}

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

.contents-wrap{
	padding: 50px 0 75px 0;
}
    
.contents-wrap-irregular{/*変則*/
    padding: 50px 0 0 0;
}
    
.contents700{
	width: 92%;
}
}

@media screen and (max-width:600px) {
    
.contents600{
	width: 92%;
}
}

@media screen and (max-width:500px) {
    
.contents500{
	width: 92%;
}
}




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

   Light Background-color ※ベタ色

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

/*背景
-----------------------------------------------------------*/
.light-green{
	background: #40aca5;
}
.light-blue{
	background: #6592c0;
}
.light-purple{
	background: #ad7eae;
}
.light-pink{
	background: #d98296;
}
.dark-red{
	background: #ca4b4a;
}


/*テキスト
-----------------------------------------------------------*/
.light-green-text{
	color: #40aca5;
}
.light-blue-text{
	color: #6592c0;
}
.light-purple-text{
	color: #ad7eae;
}
.light-pink-text{
	color: #d98296;
}



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

   Pale Background-color ※淡色背景

--------------------------------------------------------------------------------------------- */
.pale-gray{
	background: #fbfaf5; /*生成り色*/
}
.pale-green{
    background: #f0fff0;
}
.pale-blue{
    background: #f0ffff;
}
.pale-purple{
    background: #f8f8ff;
}




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

   H2,H3

--------------------------------------------------------------------------------------------- */
.re-h2{
	text-align: center;
	font-size: clamp(30px, 2vw, 36px);
	line-height: 1.5;
	margin-bottom: 35px;
    font-weight: normal;
}
.re-h2 span{
	font-size: clamp(24px, 2vw, 36px);
	font-family: 'Manrope', sans-serif;
	font-weight: normal !important;
	/*line-height: 1.5;*/
	color: #f66;
}


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

   Br

--------------------------------------------------------------------------------------------- */
.br-1920{
	display: block;
}
.br-1400{
	display: none;
}
.br-1200{
	display: none;
}
.br-1000{
	display: none;
}
.br-700{
	display: none;
}
.br-500{
	display: none;
}
.br-400{
	display: none;
}
.br-350{
	display: none;
}

@media screen and (max-width:1400px) {
.br-1400{
	display: block;
}
}
@media screen and (max-width:1200px) {
.br-1200{
	display: block;
}
}
@media screen and (max-width:1000px) {
.br-1000{
	display: block;
}
}
@media screen and (max-width:700px) {
.br-700{
	display: block;
}
}
@media screen and (max-width:500px) {
.br-500{
	display: block;
}
}
@media screen and (max-width:400px) {
.br-400{
	display: block;
}
}
@media screen and (max-width:350px) {
.br-350{
	display: block;
}
}



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

   Pankuzu

--------------------------------------------------------------------------------------------- */
.pankuzuWrap{
    width: 100%;
    padding: 10px 25px;
    background: #f4f2ed;
	font-size: 12px;
}

.fa-angle-right{
    padding: 0 0.75em;
}

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

.pankuzuWrap{
    padding: 10px 15px;
}
    
}



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

   EachTextAnime テキスト

--------------------------------------------------------------------------------------------- */
/*========= 1文字ずつ出現させるためのCSS ===============*/
.eachTextAnime span{
	opacity: 0;
	line-height: 1 !important;
	font-family: 'Noto Serif JP', serif;
    /*color: #6592c0;*/
}
.eachTextAnime.appeartext span{
	animation:text_anime_on 1s ease-out forwards;
}
@keyframes text_anime_on {
	0% {
		opacity:0;
	}
	100% {
		opacity:1;
	}
}




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

   Fadeアニメーション設定

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

 .top_fade{
  opacity: 0;
   transform: translate3d(0, -75px, 0);
  transition: all 2s ease;/*fadeスピード*/
  &.full {
   transition: all 0.8 ease;
  }
}

 .left_fade{
  opacity: 0;
   transform: translate3d(-75px, 0, 0);
  transition: all 2s ease;/*fadeスピード*/
  &.full {
   transition: all 0.8 ease;
  }
}

 .right_fade{
  opacity: 0;
   transform: translate3d(75px, 0, 0);
  transition: all 2s ease;/*fadeスピード*/
  &.full {
	  
   transition: all 0.8 ease;
  }
}

 .bottom_fade{
  opacity: 0;
   transform: translate3d(0, 75px, 0);
  transition: all 2s ease;/*fadeスピード*/
  &.full {
   transition: all 0.8 ease;
  }
}

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





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

   Fadeアニメーション設定（その場でアクション篇）

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

/* その場で */
.fadeIn{
animation-name:fadeInAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeInAnime{
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* 下から */

.fadeUp{
animation-name:fadeUpAnime;
animation-duration:2s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
  transform: translateY(100px);
  }

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

/* 上から */

.fadeDown{
animation-name:fadeDownAnime;
animation-duration:2s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeDownAnime{
  from {
    opacity: 0;
  transform: translateY(-100px);
  }

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

/* 左から */

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

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

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

/*	<div class="box fadeIn">ふわっ（その場で）</div>
	<div class="box fadeUp">ふわっ（下から）</div>
	<div class="box fadeDown">ふわっ（上から）</div>
	<div class="box fadeLeft">ふわっ（左から）</div>
	<div class="box fadeRight">ふわっ（右から）</div>*/



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

   Page-Top

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

#Page-Top a{
    display: flex;
    justify-content: center;
	background: #ffe4e1;
    transition: opacity .6s ease;
    align-items: center;
    text-decoration: none;
    border-radius: 50px;
	padding: 25px;
}
#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: #333;
}




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

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

--------------------------------------------------------------------------------------------- */
.scroll-wrap{
  position: relative;
  width: 100%;
  height: 125px;
  background: #fff;
}

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

.scroll-wrap{
  height: 75px;
}
  
}

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

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

/*Scrollテキストの描写*/
.scrolldown2 span{
    /*描画位置*/
  position: absolute;
  left:10px;
  bottom:10px;
    /*テキストの形状*/
  color: #333;
  font-size: 10px;
  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:-4px;
    /*丸の形状*/
  width:9px;
  height:9px;
  border-radius: 50%;
  background: #f99;
    /*丸の動き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: #333;
}