@charset "utf-8";
@import url("https://use.fontawesome.com/releases/v5.6.1/css/all.css");
@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho&display=swap');
/*------------------------------------------------------------
	汎用スタイル
------------------------------------------------------------*/
/* clearfix */
.clearfix:after {content: "";display: block;clear: both;}
/* flex */
.flex,.flexA,.flexB,.flexC {display: flex;flex-wrap: wrap;}
.flexA {justify-content: space-around;}
.flexB {justify-content: space-between;}
.flexC {justify-content: center;}
/*------------------------------------------------------------
フォント
------------------------------------------------------------*/
h2{
	font-family: 'Shippori Mincho', serif;
}
.wmV{
	-ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
}

.en {
	font-weight: 700;
	font-family: 'Lato', sans-serif;
}
.min {
	font-family: "游明朝","Yu Mincho","游明朝体","YuMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", serif;
}
.yuG{
	font-family: '游ゴシック Medium', '游ゴシック体', 'Yu Gothic', YuGothic,"Noto Sans JP", 'ヒラギノ角ゴ ProN W3', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'メイリオ', meiryo, "ＭＳ Ｐゴシック", Verdana, sans-serif;
}
.mt30{
	margin-top: 30px;
}
/*------------------------------------------------------------
トランジション
------------------------------------------------------------*/
.tra-all{
	-webkit-transition: all .5s ease;
	transition: all .5s ease;
}
.logoArea{
	display: block;
}

/*------------------------------------------------------------
画像がキラッ
------------------------------------------------------------*/
.shine span.mask{
  position: relative;/*キラッの基点となる位置を定義*/
    display: block;
    line-height: 0;/*行の高さを0にする*/
    overflow: hidden;/*拡大してはみ出る要素を隠す*/
}
.shine span.mask::before {
  position: absolute;
  content:"";
  width: 50%;/*キラッの横幅*/
  height: 100%;/*キラッの縦幅*/
  top: 0;/*.shine span.maskのトップ0を基点*/
  left: -75%;/*画面の見えていない左から右へ移動するスタート地点*/
  background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
  transform: skewX(-25deg);/*背景白透過を斜めに*/
}

.shine span.mask:hover::before {/*hoverした時の変化*/
  animation: shine 0.7s;/*アニメーションの名前と速度を定義*/
}
@keyframes shine {
  100% {
    left: 125%;/*画面の見えていない左から右へ移動する終了地点*/
  }
}
/*------------------------------------------------------------
ボタンがふわふわ
------------------------------------------------------------*/
.updown {
    animation-name:updown1;   /* アニメーション名の指定 */
    animation-delay:0s;   /* アニメーションの開始時間指定 */
    animation-duration: 3s;   /* アニメーション動作時間の指定 */
    animation-timing-function: ease-in-out;  /* アニメーションの動き指定（徐々に早く）*/
    animation-iteration-count: infinite; 
}
 
@keyframes updown1 {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
  100% {
    transform: translateY(0);
  }
}
/*------------------------------------------------------------
画像のフェードイン
------------------------------------------------------------*/
.blur {
  opacity: 0;
  -moz-transition: -moz-transform 0.5s linear;
  -webkit-transition: -webkit-transform 0.5s linear;
  -o-transition: -o-transform 0.5s linear;
  -ms-transition: -ms-transform 0.5s linear;
  transition: transform 0.5s linear;
  -webkit-animation-duration: 1.5s;
  animation-duration: 1.5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
	transform: scale(.99);
}
.img-blur {
  -webkit-animation-name: imageBlur;
  animation-name: imageBlur;
  opacity: 1;
  transition: .8s;
	transform: scale(1);
}

@-webkit-keyframes imageBlur {
  from {
    opacity: 0;
    -webkit-filter: blur(15px);
    -moz-filter: blur(15px);
    -ms-filter: blur(15px);
    -o-filter: blur(15px);
    filter: blur(15px);
  }

  to {
    opacity: 1;
    -webkit-filter: blur(0px);
    -moz-filter: blur(0px);
    -ms-filter: blur(0px);
    -o-filter: blur(0px);
    filter: blur(0px);
  }
}

/*------------------------------------------------------------
テキストのフェードイン
------------------------------------------------------------*/
/*したから*/
.fadein {
    opacity : 0;
    transform : translate(0, 50px);
    transition : all 600ms;
    }
.fadein.scrollin {
    opacity : 1;
    transform : translate(0, 0);
	transition: 1s;
    }
@keyframes fadeIn {
  0% {
opacity : 0;
	  transform : translate(0, 50px);
  }
  50% {
   transform : translate(0, 25px);
	  opacity : .5;
  }
  100% {
    transform : translate(0, 0);
	  opacity : 1;
  }
}

.fadein02 {
    opacity : 0;
    }

.fadein02.scrollin02 {
	-webkit-animation-name: fadeIn;
    animation-name: fadeIn;
	animation-delay:0s;   /* アニメーションの開始時間指定 */
    animation-duration: 1s;   /* アニメーション動作時間の指定 */
    animation-timing-function: ease;  /* アニメーションの動き指定（徐々に早く）*/
    animation-iteration-count: 1;
	opacity : 1;
    }

/*テーブル*/
.design01 {
 width: 100%;
 text-align: center;
 border-collapse: collapse;
 border-spacing: 0;
}
.design01 th {
 padding: 10px;
 background: #e9faf9;
 border: solid 1px #778ca3;
}
.design01 td {
 padding: 10px;
 border: solid 1px #778ca3;
}