@charset "utf-8";
/* CSS Document */
/* ---------------------------------
基本設定開始
------------------------------------ */


html {
  font-size: 62.5%;/*基準値10px 例1.6remが16pxになる*/
}

body {
	background: #fff;
	font-family: "游明朝", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
	font-size: 1.4rem;/*SP初期設定14px*/
	line-height: 1.6;
	color: #313131;
}

/*デバイス文字の大きさ　タブレット以上*/

@media screen and (min-width:768px) {
	body {
		font-size: 1.4rem; /*14px*/
    }



  }

  /*パソコン以上*/
@media screen and (min-width:990px) {
	body {
		font-size: 1.6rem; /*16x*/
	  }

  }


/* フロート */

.float_l {
  float: left;
}

.clearfix:after{
  content:".";
  display:block;
  height:0;
  clear:both;
  visibility:hidden;
}
.clearfix{
  zoom:1;
}

.clear {
	clear: both;
	font-size: 0px;
	height: 0px;
	line-height: 0px;
}


/* リンク */

a {

  text-decoration:none;

}

a:link {
	color: #333;
}

a:visited {
	color: #333;
}

a:hover {
	color: #666;
}


/* 画像 */
img{
	vertical-align: bottom;
	max-width: 100%;
    height: auto;
	}
	
/*余白右*/	
.pr10{
		padding-right:10px;
		}
.pr20{
		padding-right:20px;
		}
.pr30{
		padding-right:30px;
		}		
.pr40{
		padding-right:40px;
		}

/*余白左*/	
.pl10{
		padding-left:10px;
		}					
		
.pl20{
		padding-left:20px;
		}					
		
.pl30{
		padding-left:30px;
		}					
.pl40{
		padding-left:40px;
		}		
		
/*余白下*/	
.pb10{
		padding-bottom:10px;
		}

.pb20{
		padding-bottom:20px;
		}
.pb30{
		padding-bottom:30px;
		}
.pb40{
		padding-bottom:40px;
		}
/*余白上*/	
.pt10{
		padding-top:10px;
		}

.pt20{
		padding-top:20px;
		}
.pt30{
		padding-top:30px;
		}
.pt40{
		padding-top:40px;
		}
		
				
/*マージン上*/			
.mt10{
			margin-top:10px;
		}
.mt20{
			margin-top:20px;
		}
.mt30{
			margin-top:30px;
		}
.mt40{
			margin-top:40px;
		}
.mt80{
			margin-top:80px;
		}

    

/*マージン下*/			
.mb10{
			margin-bottom:10px;
		}
.mb20{
			margin-bottom:20px;
		}
.mb30{
			margin-bottom:30px;
		}
.mb40{
			margin-bottom:40px;
		}
.mb80{
			margin-bottom:80px;
		}
/*セクション間の基本パディング上下sp*/				
.pb_section {
  padding: 0 0 3%;

}


/*文字の大きさ*/
.text_big{
  font-size:1.8rem;	
		}


/*太文字*/
.text_bold{
	font-weight: 700;
}

/*文字中央揃え*/
.center {

	text-align:center;
}
.red{
	color: #F03D00;
	}


  /*装飾系*/
  /*”文字”*/
  .emphasis_design13 span {
  position: relative;
  padding: 0 0.7em;
  margin: 0 0.3em;
}
.emphasis_design13 span::before,
.emphasis_design13 span::after {
  color: #ff8c20;
  position: absolute;
  top: -.2em
}
.emphasis_design13 span::before {
  content: '“';
  left: 0;
}
.emphasis_design13 span::after {
  content: '”';
  right: 0;
}
/*///////////////////////*/



/*//////////逆八の字万歳//////*/
.slash {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.slash::before,
.slash::after {
  content: "";
  width: 25px;
  height: 1px;
  background-color: #000;
  margin: 0px 4px 4px;
}

.slash::before {
  transform: rotate(45deg);
}

.slash::after {
  transform: rotate(-45deg);
}
/*/////////////////////////*/


/*//////////逆八の字万歳//////*/
.slash_b {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.slash_b::before,
.slash_b::after {
  content: "";
  width: 25px;
  height: 1px;
  background-color: #000;
  margin: 0px 4px 4px;
}

.slash_b::before {
  transform: rotate(45deg);
}

.slash_b::after {
  transform: rotate(-45deg);
}
/*/////////////////////////*/





/*////////*/
.ttl_frame3 {
  width:70%;
  margin: 0 auto;
  font-weight: bold;
  padding: 0.5em 1em;
    --x-gradient: linear-gradient(90deg, #4c9ac0 0 100%);
    --y-gradient: linear-gradient(#4c9ac0 0 15px, transparent 0 calc(100% - 15px), #4c9ac0 calc(100% - 15px));
  background-image:var(--x-gradient), var(--y-gradient), var(--x-gradient), var(--y-gradient);
  background-repeat: no-repeat;
  background-size: 100% 3px, 3px 100%, 100% 3px, 3px 100%;
  background-position: top, right, bottom, left;
  position: relative;
  text-align: center;
}
/*//////////////////////////*/

/********** Flex **********/

.flex, .sjsDots{display:-webkit-box;display:-webkit-flex;display:flex}
.fhC, .sjsDots{-webkit-box-pack:center;-moz-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center}
.fhL{-webkit-box-pack:start;-moz-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start}
.fhR{-webkit-box-pack:end;-moz-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end}
.fhLR{-webkit-box-pack:justify;-moz-box-pack:justify;-ms-flex-pack:justify;-webkit-justify-content:space-between;justify-content:space-between}
.fvS{-webkit-box-align:start;-webkit-align-items:start;align-items:flex-start}
.fvC{-webkit-box-align:center;-webkit-align-items:center;align-items:center}
.fWrap{box-lines:multiple;-webkit-flex-wrap:wrap;flex-wrap:wrap}
.fCol{-webkit-box-orient:block-axis;-webkit-flex-direction:column;flex-direction:column}



/*ノート風下点線*/
/*.note1{
  background-color: #fff;
  background-image:
  linear-gradient(90deg, rgba(237, 119, 128, 0) 0%, rgba(237, 119, 128, 0) 50%, #fff 0%, #fff 100%), linear-gradient(180deg, rgba(100, 100, 100, 0) 0%, rgba(100, 100, 100, 0) 97.5%, #646464 100%);
  background-size: 8px 100%,100% 3em;
  line-height: 3em;
padding: 0 1em;
  color: #696969;
  margin: 0;

}
*/

/*ノート風下点線*/
.note1{
 background-color: transparent;
 background-image: linear-gradient(90deg, rgba(237, 119, 128, 0) 0%, rgba(237, 119, 128, 0) 100%, #fff 0%, #fff 100%), linear-gradient(180deg, rgba(100, 100, 100, 0) 0%, rgba(100, 100, 100, 0) 97.5%, #646464 100%);
 background-size: 8px 100%,100% 2.5em;
 line-height: 2.5em;
 /*padding: 0 1em;*/
 color: #696969;
 margin: 0;

}
/**/

/*角丸背景*/
span.info-radius {
    border-radius: 10px;
    background: #e1e8ed;
    padding: 2px 5px;
    margin:0 0 0 0 3px;
    display: inline;
	font-size: 70%;
}

/*サイドライン*/
  .sideline {
      display: flex; /* 線と文字を横に並べる */
      align-items: center; /* 縦方向の中央揃え */
  }
   .sideline::before {
    content: "";
    display: block; /* 必須 */
    width: 20%; /* 線の長さを指定 */
    background: black; /* 線の色 */
    height: 1px; /* 線の太さ */
    margin-right: 10px; /* テキストとの間隔 */
   }


    /*.sideline::after {*/
      /*content: ""; /* 必須項目 */
      /*flex-grow: 1; /* 残ったスペースを線で埋める */
      /*background: black; /* 線の色 */
      /*height: 1px; /* 線の太さ 
    }*/


/*文字下部に線を装飾*/
.underline {
  /*font-weight: bold;*/
  /*text-align: center;*/
  position: relative; /*positionをrelativeに指定*/
}

/*下線のスタイリング*/

.underline::after {
  position: absolute; /*positionをabsoluteに指定*/
  content: "";
  background-color: #696969; /*下線の色*/
  width: 12%; /*線の幅*/
  height: 1px; /*線の太さ*/
  bottom: 0px; /*線のタテ位置*/
  left: 50%;  /*線のヨコ位置*/
  transform: translateX(-50%);/*線のヨコ位置*/
}

/*spanタグで囲む*/
.underline_b {
  background:linear-gradient(transparent 60%, #ff6 60%);
}

/*丸ボタン*/
.btn--orange,
a.btn--orange {
  color: #eb6100;
  background-color: #fcf1e6;
  padding: 1% 5%;
  font-weight: 700;
  display: inline-block;
  margin-top: 15px;

 
}
.btn--orange:hover,
a.btn--orange:hover {
  color: #fff;
  background: #f56500;
  transition: .3s;
}

a.btn--radius {
   border-radius: 100vh;
   border: 3px solid #ffbf91;
}
/*//////////////////////////*/






/* 画像をふわっとフェードインアウト
a:hover img {
  opacity: 0.7;
  filter: alpha(opacity=70);
  -moz-opacity: 0.7;
  -webkit-transition: 0.3s ease-in-out;
  -moz-transition: 0.3s ease-in-out;
  -o-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
}

a img {
-webkit-transition: opacity 1s ease-out;
-moz-transition: opacity 1s ease-out;
-ms-transition: opacity 1s ease-out;
transition: opacity 1s ease-out;
}
 */
/*スクロール時、下から上に出現*/
.fadeInUp {
  opacity : 0;
  transform: translateY(50px);
  transition: 0.5s;
}



/*左から出現 「LeftToRight」の動作内容 */
@keyframes LeftToRight {
  0% {
    opacity: 0;/* 透明 */
    transform: translateX(-100px);/* X軸方向に-100px */
  }
  100% {
    opacity: 1;/* 不透明 */
    transform: translateX(0);
  }
}

/* 「LeftToRight」を適用する箇所 */
.img_anime_LeftToRight {
  animation-duration: 2s;/* アニメーション時間 */
  animation-name: LeftToRight;/* アニメーション名 */
  /*animation-iteration-count: infinite;/* アニメーションの繰り返し（無限）*/
}


/*右から出現 「RightToLeft」の動作内容 */
@keyframes RightToLeft {
  0% {
    opacity: 0;/* 透明 */
    transform: translateX(100px);/* X軸方向に100px */
  }
  100% {
    opacity: 1;/* 不透明 */
    transform: translateX(0);
  }
}

/* 「RightToLeft」を適用する箇所 */
.img_anime_RightToLeft {
  animation-duration: 2s;/* アニメーション時間 */
  animation-name: RightToLeft;/* アニメーション名 */
  /*animation-iteration-count: infinite;/* アニメーションの繰り返し（無限）*/
}




/*上から出現 「TopToBottm」の動作内容 */
@keyframes TopToBottom {
  0% {
    opacity: 0;/* 透明 */
    transform: translateY(-100px);/* Y軸方向に-100px */
  }
  100% {
    opacity: 1;/* 不透明 */
    transform: translateY(0);
  }
}

/* 「TopToBottm」を適用する箇所 */
.img_anime_topbottom {
  animation-duration: 2s;/* アニメーション時間 */
  animation-name: TopToBottom;/* アニメーション名 */
  /*animation-iteration-count: infinite;/* アニメーションの繰り返し（無限）*/
}