/* 文字関係 */
.midashi{font-size: 4em;}
@media screen and (max-width:912px){
.midashi { font-size: 3em;}}
@media screen and (max-width:768px){
.midashi { font-size: 3em; text-align:center;}}

/*行間調整*/
.mt1 { line-height: 1; font-size:1.5em; font-weight: bold;}
@media screen and (max-width:768px){.mt1 {text-align:center;}}
.mt2 { line-height: 0.8; font-size:0.8em; font-weight: bold;}
.mt3 { line-height: 0.8;}
.mtc { line-height: 1; font-size:1em; font-weight: bold;}
@media screen and (max-width:768px){.mtc { text-align:center;}}

/*ボタン*/
.button-12 a { font-size: 16px; letter-spacing: 0.1em; color: #fff; background: #333; font-weight: 700; border: solid 3px #333; border-radius: 999px; display: flex; box-sizing: border-box; width: 200px; height: 200px; text-align: center;  align-items: center;  padding: 36px; margin: 24px; margin-inline: auto; text-decoration: none; cursor: pointer; transition: all 0.3s;}

.button-12 a:hover { color: #333; background: initial; transition: all 0.3s;}


/* 背景関係 */
.kage{min-height:500px; padding: 5%; box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .3); border-radius: 10px; background-color: #ffffff;}
@media screen and (max-width:912px){.kage {min-height:400px; }}

/* ぶち抜き系 */
.buchinuki {
  margin-left: calc(((100vw - 100%) / 2) * -1);
  margin-right: calc(((100vw - 100%) / 2) * -1);
  position: relative;
  width:100vw;
}

.bgg1 {
  color:#ffffff !important;
  position: relative;
  background: linear-gradient(90deg, rgb(251, 185, 20), rgb(233, 63, 47));}
  border-top-right-radius: 30px;
  border-bottom-right-radius: 30px;　
  margin: 0;
}


.haba {max-width:1300px; margin: 0 auto;padding:5%;}
@media screen and (min-width:770px) and (max-width:1400px){.haba{margin: 0 auto;padding:6%;}}
@media screen and (max-width:768px){.haba{margin: 0 auto; padding:3%;}}


/* 高さ中央寄せ */
.inner{
display:flex;
justify-content:center;
align-items:center;}

/* SP解除 */
@media screen and (max-width:768px){
.inner { display:initial;}}

/* スマフォ・PC表示非表示 */
.sp1{ display: none; }
.pc1{ display: block; }

@media screen and (max-width: 559px) {
  .sp1{ display: block; }
  .pc1{ display: none; }
}

/*==================================================
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:1s;
animation-fill-mode:forwards;
opacity:0;
}

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

/* 左から */

.fadeLeft{
animation-name:fadeLeftAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeLeftAnime{
  from { opacity: 0; transform: translateX(-100px); }
  to { opacity: 1; transform: translateX(0); }
}

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

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

/*背景色が伸びて出現（共通）*/
.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);
  }
}

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

/* アニメーションスタートの遅延時間を決めるCSS*/
.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;}

/*==================================================
FADEここまで
===================================*/