@charset "UTF-8";

/*default*/
/*reset*/

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td{
margin: 0; padding: 0;
}


html{
    overflow-y: scroll;
}

h1, h2, h3, h4, h5, h6{
    font-size: 100%;
    font-weight: normal;
}

ol, ul{
    list-style:none;
}

fieldset, img{
     border:0;
}

table{
    border-collapse: collapse;
     border-spacing:0;
}

caption, th{
    text-align: left;
}

address, caption, cite, code, dfn, em, th, var{
    font-style: normal;
    font-weight: normal;
}

img{
  max-width: 100%;
}
/*text*/
 
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Noto+Sans+JP:wght@100;200;300;400;500;600;700;800;900&display=swap');

body {
  font-family: 'Noto Sans JP', sans-serif;
	*font-size:small;
*font:x-small;
color: #333;
}




input, textarea {
font-family: 'Noto Sans JP', sans-serif;}


.mnc{
font-family: "source-han-serif-japanese", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;

}



table {
    font-size:inherit;
    font:100%;
}
.text10 { font-size:77%; }
.text11 { font-size:85%; }
.text12 { font-size:93%; }
.text13 { font-size:100%; }
.text14 { font-size:108%; }
.text15 { font-size:116%; }
.text16 { font-size:123.1%; }
.text17 { font-size:131%; }
.text18 { font-size:138.5%; }
.text19 { font-size:146.5%; }
.text20 { font-size:153.9%; }
.text21 { font-size:161.6%; }
.text22 { font-size:167%; }
.text23 { font-size:174%; }
.text24 { font-size:182%; }
.text25 { font-size:189%; }
.text26 { font-size:197%; }

.text24 { font-size:24px;}
.text30 { font-size:30px;}
.text32 { font-size:32px;}


 /*テキストリンク下線設定*/
 
a {
	text-decoration: none;
	transition:0.5s;
	}
	
a:hover {
	transition:0.5s;
	}

/*パンくずリスト設置*/

#tp{
     margin:10px 0;
	 font-size:12px;
	 }
 
#tp li {
     display:inline;
     line-height:110%;
     list-style-type:none;
	 }

#tp li a{
	padding-right:5px;
	background:url(../../wp-content/themes/shoei-g/images/common/tp.webp) no-repeat right;
	}

/*image半透明*/

a:hover img.hoverimg{
	opacity:0.8;
	filter:alpha(opacity=80);
	-ms-filter: "alpha( opacity=80 )";
	}

input:hover{
	opacity:0.8;
	filter:alpha(opacity=80);
	-ms-filter: "alpha( opacity=80 )";
	}
	

body {
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
}

.button {
  display: inline-block;
  text-align: center;
  text-decoration: none;
  outline: none;
}
.button::before,
.button::after {
  position: absolute;
  z-index: -1;
  display: block;
  content: '';
}
.button,
.button::before,
.button::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .3s;
  transition: all .3s;
}






/*==================================================
ふわっ
===================================*/

/* その場で */
.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:0.5s;
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:0.5s;
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:0.5s;
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:0.5s;
animation-fill-mode:forwards;
opacity:0;
}

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

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

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
 
.fadeInTrigger,
.fadeUpTrigger,
.fadeDownTrigger,
.fadeLeftTrigger,
.fadeRightTrigger{
    opacity: 0;
}

/*==================================================
パタッ
===================================*/


/* 下へ */
.flipDown{
animation-name:flipDownAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes flipDownAnime{
  from {
    transform: perspective(2500px) rotateX(100deg);
  opacity: 0;
  }

  to {
    transform: perspective(2500px) rotateX(0);
  opacity: 1;
  }
}


/* 左へ */
.flipLeft{
animation-name:flipLeftAnime;
animation-duration:1s;
animation-fill-mode:forwards;
perspective-origin:left center;
opacity:0;
}

@keyframes flipLeftAnime{
  from {
   transform: perspective(600px) translate3d(0, 0, 0) rotateY(30deg);
  opacity: 0;
  }

  to {
  transform: perspective(600px) translate3d(0, 0, 0) rotateY(0deg);
  opacity: 1;
  }
}


/* 左上へ */
.flipLeftTop{
animation-name:flipLeftTopAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes flipLeftTopAnime{
  from {
   transform: translate(-20px,80px) rotate(-15deg);
  opacity: 0;
  }

  to {
   transform: translate(0,0) rotate(0deg);
  opacity: 1;
  }
}

/* 右へ */
.flipRight{
animation-name:flipRightAnime;
animation-duration:1s;
animation-fill-mode:forwards;
perspective-origin:right center;
opacity:0;
}

@keyframes flipRightAnime{
  from {
   transform: perspective(600px) translate3d(0, 0, 0) rotateY(-30deg);
  opacity: 0;
  }

  to {
  transform: perspective(600px) translate3d(0, 0, 0) rotateY(0deg);
  opacity: 1;
  }
}

/* 右上へ */
.flipRightTop{
animation-name:flipRightTopAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes flipRightTopAnime{
  from {
   transform: translate(-20px,80px) rotate(25deg);
   opacity: 0;
  }

  to {
   transform: translate(0,1) rotate(0deg);
  opacity: 1;
  }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
 
.flipDownTrigger,
.flipLeftTrigger,
.flipLeftTopTrigger,
.flipRightTrigger,
.flipRightTopTrigger{
    opacity: 0;
}

/*==================================================
くるっ
===================================*/


/* X 軸（縦へ） */
.rotateX{
  animation-name:rotateXAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
}

@keyframes rotateXAnime{
  from{
    transform: rotateX(0);
    opacity: 0;
    }
  to{
    transform: rotateX(-360deg);
    opacity: 1;
    }
}

/*　Y軸（横へ） */
.rotateY{
  animation-name:rotateYAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
}

@keyframes rotateYAnime{
  from{
    transform: rotateY(0);
    opacity: 0;
    }
  to{
    transform: rotateY(-360deg);
    opacity: 1;
    }
}

/* Z 軸（左へ） */
.rotateLeftZ{
  animation-name:rotateLeftZAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
}

@keyframes rotateLeftZAnime{
  from{
    transform: rotateZ(0);
    opacity: 0;
    }
  to{
    transform: rotateZ(-360deg);
    opacity: 1;
    }
}

/*　Z 軸（右へ） */
.rotateRightZ{
  animation-name:rotateRightZAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
}

@keyframes rotateRightZAnime{
  from{
    transform: rotateZ(0);
    opacity: 0;
    }
  to{
    transform: rotateZ(360deg);
    opacity: 1;
    }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
 
.rotateXTrigger,
.rotateYTrigger,
.rotateLeftZTrigger,
.rotateRightZTrigger{
    opacity: 0;
}

/*==================================================
ボンッ、ヒュッ
===================================*/

/* 拡大 */
.zoomIn{
  animation-name:zoomInAnime;
  animation-duration:0.5s;
  animation-fill-mode:forwards;
}

@keyframes zoomInAnime{
  from {
  transform: scale(0.6);
  opacity: 0;
  }

  to {
    transform: scale(1);
  opacity: 1;
  }
}

/* 縮小 */
.zoomOut{
  animation-name:zoomOutAnime;
  animation-duration:0.5s;
  animation-fill-mode:forwards;
}

@keyframes zoomOutAnime{
  from {
  transform: scale(1.2);
  opacity: 0;
  }

  to {
    transform:scale(1);
  opacity: 1;
  }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
 
.zoomInTrigger,
.zoomOutTrigger{
    opacity: 0;
}

/*==================================================
じわっ
===================================*/

/* ぼかしから出現 */
.blur{
  animation-name:blurAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
}

@keyframes blurAnime{
  from {
  filter: blur(10px);
  transform: scale(1.02);
  opacity: 0;
  }

  to {
  filter: blur(0);
  transform: scale(1);
  opacity: 1;
  }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
 
.blurTrigger{
    opacity: 0;
}

/*==================================================
にゅーん
===================================*/

/* 滑らかに変形して出現 */
.smooth{
  animation-name:smoothAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
  　transform-origin: left;
  opacity:0;
}

@keyframes smoothAnime{
  from {
  transform: translate3d(0, 100%, 0) skewY(12deg);
  opacity:0;
  }

  to {
  transform: translate3d(0, 0, 0) skewY(0);
  opacity:1;
  }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
 
.smoothTrigger{
    opacity: 0;
}

/*==================================================
スーッ（枠線が伸びて出現）
===================================*/

/*枠線が伸びて出現*/

.lineTrigger{
  position: relative; /* 枠線が書かれる基点*/
  opacity:0;
}

.lineTrigger.lineanime{
  animation-name:lineAnimeBase;
  animation-duration:1s;
  animation-fill-mode:forwards;
}

@keyframes lineAnimeBase{
  from {
    opacity:0;
  }

  to {
    opacity:1;  
}
}

/*上下線*/
.lineTrigger::before,
.lineTrigger::after{
  position: absolute;
  content:"";
  width:0;
  height:1px;
  background:#333;/* 枠線の色*/
}

/*左右線*/
.line2::before,
.line2::after{
  position: absolute;
  content:"";
  width: 1px;
  height:0;
  background:#333;/* 枠線の色*/
}

/*上線*/
.lineTrigger::before {
  top:0;
  left:0;
}

.lineTrigger.lineanime::before {
  animation: lineAnime .5s linear 0s forwards;/*表示されて0秒後に上線が0.5秒かけて表示*/
}

/*右線*/
.line2::before{ 
  top:0;
  right:0;
}

.lineTrigger.lineanime .line2::before {
  animation: lineAnime2 .5s linear .5s forwards;/*表示されて0.5秒後に右線が0.5秒かけて表示*/
}

/*下線*/
.lineTrigger::after { 
  bottom:0;
  right:0;
}

.lineTrigger.lineanime::after {
  animation: lineAnime .5s linear 1s forwards;/*表示されて1秒後に下線が0.5秒かけて表示*/
}

/*左線*/
.line2::after{ 
  bottom:0;
  left:0;
}

.lineTrigger.lineanime .line2::after {
  animation: lineAnime2 .5s linear 1.5s forwards;/*表示されて1.5秒後に左線が0.5秒かけて表示*/
}

@keyframes lineAnime {
  0% {width:0%;}
    100%{width:100%;}
}

@keyframes lineAnime2 {
  0% {height:0%;}
    100%{height:100%;}
}

/*枠線内側の要素*/

.lineTrigger.lineanime .lineinappear{
  animation: lineInnerAnime .5s linear 1.5s forwards;/*1.5秒後に中央のエリアが0.5秒かけて表示*/
  opacity: 0;/*初期値を透過0にする*/ 
}

@keyframes lineInnerAnime{
  0% {opacity:0;}
    100% {opacity:1;}
}


/*==================================================
シャッ（背景色が伸びて出現）
===================================*/

/*背景色が伸びて出現（共通）*/
.bgextend{
  animation-name:bgextendAnimeBase;
  animation-duration:1s;
  animation-fill-mode:forwards;
  position: relative;
  overflow: hidden;/*　はみ出た色要素を隠す　*/
  opacity:0;
}

@keyframes bgextendAnimeBase{
  from {
    opacity:0;
  }

  to {
    opacity:1;  
}
}

/*中の要素*/
.bgappear{
  animation-name:bgextendAnimeSecond;
  animation-duration:1s;
  animation-delay: 0.6s;
  animation-fill-mode:forwards;
  opacity: 0;
}

@keyframes bgextendAnimeSecond{
  0% {
  opacity: 0;
  }
  100% {
  opacity: 1;
}
}

/*左から*/
.bgLRextend::before{
  animation-name:bgLRextendAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #666;/*伸びる背景色の設定*/
}
@keyframes bgLRextendAnime{
  0% {
    transform-origin:left;
    transform:scaleX(0);
  }
  50% {
    transform-origin:left;
    transform:scaleX(1);
  }
  50.001% {
    transform-origin:right;
  }
  100% {
    transform-origin:right;
    transform:scaleX(0);
  }
}

/*右から*/
.bgRLextend::before{
  animation-name:bgRLextendAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #666;/*伸びる背景色の設定*/
}
@keyframes bgRLextendAnime{
  0% {
    transform-origin:right;
    transform:scaleX(0);
  }
  50% {
    transform-origin:right;
    transform:scaleX(1);
  }
  50.001% {
    transform-origin:left;
  }
  100% {
    transform-origin:left;
    transform:scaleX(0);
  }
}

/*下から*/
.bgDUextend::before{
  animation-name:bgDUextendAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #666;/*伸びる背景色の設定*/
}
@keyframes bgDUextendAnime{
  0% {
    transform-origin:bottom;
    transform:scaleY(0);
  }
  50% {
    transform-origin:bottom;
    transform:scaleY(1);
  }
  50.001% {
    transform-origin:top;
  }
  100% {
    transform-origin:top;
    transform:scaleY(0);
  }
}

/*上から*/
.bgUDextend::before{
  animation-name:bgUDextendAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #666;/*伸びる背景色の設定*/
}
@keyframes bgUDextendAnime{
  0% {
    transform-origin:top;
    transform:scaleY(0);
  }
  50% {
    transform-origin:top;
    transform:scaleY(1);
  }
  50.001% {
    transform-origin:bottom;
  }
  100% {
    transform-origin:bottom;
    transform:scaleY(0);
  }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.bgappearTrigger,
.bgUDextendTrigger,
.bgDUextendTrigger,
.bgRLextendTrigger,
.bgLRextendTrigger{
    opacity: 0;
}


/*========= レイアウトのためのCSS ===============*/

.wrapper{
  overflow: hidden;
}

.flex{
  display:flex;
  flex-wrap: wrap;
}

.box{
  width: 220px;
  padding: 20px;
    margin: 0 20px 20px 20px;
  background: #666;
  color: #fff;
  box-sizing:border-box;
}

.bgextend,
.lineTrigger{
  width: 220px;
  padding: 20px;
    margin: 0 20px 20px 20px;
  box-sizing:border-box;
}






/* アニメーションスタートの遅延時間を決めるCSS*/


.delay-time02{  
  animation-delay: 0.2s;
}
.delay-time04{  
  animation-delay: 0.4s;
}

.delay-time05{  
  animation-delay: 0.5s;
}

.delay-time1{  
  animation-delay: 1s;
}

.delay-time15{  
  animation-delay: 1.5s;
}

.delay-time2{  
  animation-delay: 2s;
}

.delay-time25{  
  animation-delay: 2.5s;
}




/*text*/
 
@import url('https://fonts.googleapis.com/css2?family=Heebo:wght@100..900&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Noto+Sans+JP:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100;0,200;0,300;0,400;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Staatliches&display=swap');

body {
font-family:'Noto Sans JP', sans-serif;
}

input, textarea {
font-family:'Noto Sans JP', sans-serif;}

.mnc{
font-family: "source-han-serif-japanese", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;

}



.heebo{font-family: "Heebo", sans-serif;}
.montserrat{font-family: "Montserrat", sans-serif;}


.josefin{font-family: 'Josefin Sans', sans-serif;
font-weight: 300;
}

.sta{font-family: 'Staatliches', cursive;
}

.bx-wrapper .bx-viewport {
  background: initial;
}