@charset "UTF-8";


.flex2-container {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  max-width: 1200px;
  width: 80%;
  margin: 0 auto;
  gap: 3%; /* 列間のみ6%空ける */
}

.flex2-col {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.flex2-col:first-child,
.flex2-col:last-child {
  /* 両端の隙間無し：gapのみ効くように調整。不要ならこの指定は省略可 */
}

.flex2-col img {
  width: 100%;
  height: auto;
  display: block;
  /* 必要に応じてmax-width指定可能 */
}

.flex2-text {
  padding: 0px 0 0px 0;
  font-size: clamp(14px, 1.6vw, 1.6rem);
  font-weight: 400;
  line-height: 180%;
  text-align: center;
  margin-top: 12px; /* 画像下に余白をつける場合 */
}
/*スマホ*/
@media screen and (max-width:768px){
.topobitop{width:100%;text-align:left;padding:20px 5% 50px 5%;margin:0px auto 0px auto;background-image: url("../img/top/bg.webp"); 
  background-repeat: no-repeat; }
.topobi1-right{width:90vw;text-align:right;padding:0px 9% 0px 0%;margin: 4% auto 0px auto;}
.topobi1-right img{width:100%;}
.topicsbg{width:100%;text-align:center;margin:0px auto 0px auto;padding:0.2% 0 0% 0;background:linear-gradient(90deg, #9fa0a0,#c9caca);}
	
.topobi1bg{width:100%;text-align:center;background-color:#f3f4f4;margin:100px auto 0px auto;padding:20px 0 20px 0;background:linear-gradient(90deg, #9fa0a0,#c9caca);}
.topobi1{width:100%;text-align:left;padding:0px 0 0px 0;margin: 10px auto 10px auto;border:1px solid #fff}
	
.topobi2bg{width:100%;text-align:center;background-color:#fff;margin:0px auto 0px auto;padding:3% 0% 3% 0;}
.topobi2{width:100%;text-align:center;background-color:#fff;margin:30px auto 0px auto;padding:0px 0% 0px 0;}
	
	
.topobi3{color:#fff;width:100%;text-align:center;margin: 0px auto 0px auto;padding:3% 0 3% 0;background:#898989}
.topobi33{width:100%;text-align:center;margin: 0px auto 0px auto;padding:0px 0 0px 0;background:#f3f4f4}
.topobi3 h3{color:#fff;font-weight:700;font-size: clamp(14px, 1.0vw, 1.0rem);}
.topobi33 h3{color:#fff;font-weight:700;font-size: clamp(12px, 1.4vw, 1.45rem);}
.slidebg2{width:100%;text-align:center;padding:30px 0 80px 0;margin: 0px auto 30px auto;background:linear-gradient(90deg, #d5d6d6,#efefef);}

.topobi4bg{width:100%;text-align:center;background-color:#f6f6f6;margin:20px auto 0px auto;padding:7% 0 7% 0;}
.topobi4{width:100%;text-align:left;padding:0px 0 0px 0;margin: 10px auto 10px auto;border:1px solid #000}
.onlyone{width:90%;text-align:center;margin:0px auto 0px auto;padding:0px 0% 0px 0;}
.img65{width:65%;;margin:0px 0 1.5% 0;padding:0px 0% 0% 0;text-align:left!important}
.onlyone2{width:90%;margin:0px auto 0px auto;padding:0px 0% 2% 0;text-align:left!important}
.onlyone2 img{width:50%;;margin:0px auto 0px auto;padding:0px 0% 0% 0;text-align:left!important}
.font1{padding:1.5% 0 1.5% 0;font-size: clamp(14px, 1.4vw, 2.3rem);font-weight:400;line-height:160%;text-align:left;font-weight: 700; letter-spacing: 3px;}
.font2{width:90%;padding:1% 0 0px 0;font-size: clamp(12px, 1.2vw, 1.2rem);font-weight:400;line-height:180%;text-align:left;}
.title2{padding:0px 0 0px 0;font-size: clamp(16px, 2.0vw, 2.9rem);font-weight:700;line-height:200%;text-align:center;color:#6d6c6c }
.title3{padding:0px 0 1% 0;font-size: clamp(13px, 1.0vw, 1.0rem);font-weight:700;line-height:150%;text-align:center;color: #000;}
.font3{padding:0px 0 0px 0;font-size: clamp(16px, 0.6vw, 0.6rem);font-weight:400;line-height:200%;text-align:center;}
.font4{padding:0px 0 0px 0;font-size: clamp(14px, 1.4vw, 2.3rem);font-weight:400;line-height:160%;text-align:center;}
.font5{width:90%;padding:3% 0 0px 0;font-size: clamp(12px, 1.2vw, 1.2rem);font-weight:400;line-height:160%;text-align:left;margin:0px auto 0px auto;}
.font55{padding:1.5% 0 0px 0;font-size: clamp(12px, 1.2vw, 1.2rem);font-weight:400;line-height:160%;text-align:left;}

.font6{width:96%;text-align:left;padding:1%;margin: 20px auto 20px auto;line-height: 150%;font-size: clamp(12px, 0.8vw, 0.8rem);border:solid 1px #000}
.font7{padding:0px 0 0px 0;font-size: clamp(18px, 1.6vw, 2.3rem);font-weight:400;line-height:200%;text-align:left;color:#6d6c6c }
.font8{padding:0px 0 0px 0;font-size: clamp(15px, 1.2vw, 2.0rem);font-weight:400;line-height:180%;text-align:left;}
	
.text {max-width:1200px;width:90%;text-align:center;;margin: 0px auto 0px auto; padding: 10px 0px 20px 0px;line-height: 150%;font-size:1.1rem;font-family: 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;}

	
.topobi5bg{width:100%;text-align:center;margin:0px auto 0px auto;padding:7% 0 7% 0;background:linear-gradient(90deg, #d5d6d6,#efefef);}
.topobi6bg{width:100%;text-align:center;margin:0px auto 0px auto;padding:7% 0 7% 0;background:#fff}
.topobi7bg{width:100%;text-align:center;margin:0px auto 0px auto;padding:7% 0 7% 0;background:#f6f6f6}

	
	
.topcap{width:90%;text-align:left;padding:0px 0 0px 0;margin: 50px auto 70px auto;line-height: 150%;font-size: clamp(10px, 0.6vw, 0.7rem);font-family: 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;}

.topcap2{width:100%;text-align:left;padding:0px 0 0px 0;margin: 20px auto 20px auto;line-height: 150%;font-size: clamp(10px, 0.6vw, 0.7rem);font-family: 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;}

.topcap3{width:90%;text-align:left;padding:2% 0 0px 0;margin: 20px auto 20px auto;line-height: 150%;font-size: clamp(10px, 0.6vw, 0.7rem);}


img{max-width:100%}

 .videbotan{width:100%;text-align: right;margin: 10px auto 20px auto;}       
    .play_btn{
    display: inline-block;      /* インラインブロック要素にする */
    background-color:  #C6C6C6;    /* 背景色指定 */
    padding:  1px 5px 6px 5px;             /* 余白指定 */
    height: 20px;cursor: pointer;}     
    
    .pause_btn{
    display: inline-block;      /* インラインブロック要素にする */
    background-color:  #C6C6C6;    /* 背景色指定 */
    padding:  1px 5px 6px 5px;             /* 余白指定 */
    height: 20px;cursor: pointer;} 

    

.fadeIn_up {
  opacity: 0;
  transform: translate(0, 50%);
  transition: 2s;
}
.fadeIn_up.is-show {
  transform: translate(0, 0);
  opacity: 1;
}



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


a {cursor: pointer;color: #000;text-decoration: none;transition: 0.3s ease-in-out;}

}

/*PC*/
@media print, screen and (min-width:769px){
.videbotan{width:100%;text-align: right}
    .play_btn{
    display: inline-block;      /* インラインブロック要素にする */
    background-color:  #C6C6C6;    /* 背景色指定 */
    padding:  5px;             /* 余白指定 */
    height: 20px;cursor: pointer;}     
    
    .pause_btn{
    display: inline-block;      /* インラインブロック要素にする */
    background-color:  #C6C6C6;    /* 背景色指定 */
    padding:  5px;             /* 余白指定 */
    height: 20px;cursor: pointer;} 
    
    
a {cursor: pointer;color: #000;text-decoration: none;transition: 0.3s ease-in-out;}
	
.topobitop{width:100%;text-align:left;padding:50px 5% 80px 5%;margin:0px auto 0px auto;background-image: url("../img/top/bg.webp"); 
  background-repeat: no-repeat; }
.topobi1-right{float:right; width:50vw;text-align:right;padding:0px 9% 0px 0%;margin: -4% auto 0px auto;}
.topobi1-right img{width:100%;}
.topicsbg{width:100%;text-align:center;margin:0px auto 0px auto;padding:0.2% 0 0% 0;background:linear-gradient(90deg, #9fa0a0,#c9caca);}
	
.topobi1bg{width:100%;text-align:center;background-color:#f3f4f4;margin:100px auto 0px auto;padding:20px 0 20px 0;background:linear-gradient(90deg, #9fa0a0,#c9caca);}
.topobi1{width:100%;text-align:left;padding:0px 0 0px 0;margin: 10px auto 10px auto;border:1px solid #000}
	
.topobi2bg{width:100%;text-align:center;background-color:#fff;margin:0px auto 0px auto;padding:0% 0% 0% 0;}
.topobi2{width:80%;text-align:center;background-color:#fff;margin:30px auto 0px auto;padding:0px 0% 0px 0;}
	
	
.topobi3{color:#fff;width:100%;text-align:center;margin: 0px auto 0px auto;padding:3% 0 3% 0;background:#898989}
.topobi33{width:100%;text-align:center;margin: 0px auto 0px auto;padding:0px 0 0px 0;background:#f3f4f4}
.topobi3 h3{color:#fff;font-weight:700;font-size: clamp(10px, 1.0vw, 1.0rem);}
.topobi33 h3{color:#fff;font-weight:700;font-size: clamp(12px, 1.4vw, 1.45rem);}
.slidebg2{width:100%;text-align:center;padding:30px 0 80px 0;margin: 0px auto 30px auto;background:linear-gradient(90deg, #d5d6d6,#efefef);}

.topobi4bg{width:100%;text-align:center;background-color:#f6f6f6;margin:100px auto 0px auto;padding:3% 0 3% 0;}
.topobi4{width:100%;text-align:left;padding:0px 0 0px 0;margin: 10px auto 10px auto;border:1px solid #000}
.onlyone{width:80%;text-align:center;margin:0px auto 0px auto;padding:0px 0% 0px 0;}
.img65{width:65%;;margin:0px 0 1.5% 0;padding:0px 0% 0% 0;text-align:left!important}
.onlyone2{width:80%;;margin:0px auto 0px auto;padding:0px 0% 2% 0;text-align:left!important}
.onlyone2 img{width:50%;;margin:0px auto 0px auto;padding:0px 0% 0% 0;text-align:left!important}
.font1{padding:1.5% 0 1.5% 0;font-size: clamp(10px, 1.4vw, 2.3rem);font-weight:400;line-height:160%;text-align:left;font-weight: 700; letter-spacing: 3px;}
.font2{padding:1% 0 0px 0;font-size: clamp(10px, 1.2vw, 1.2rem);font-weight:400;line-height:210%;text-align:left;}
.title2{padding:0px 0 0px 0;font-size: clamp(16px, 2.0vw, 2.9rem);font-weight:700;line-height:200%;text-align:center;color:#6d6c6c }
.title3{padding:0px 0 1% 0;font-size: clamp(13px, 1.0vw, 1.0rem);font-weight:700;line-height:150%;text-align:center;color: #000;}
.font3{padding:0px 0 0px 0;font-size: clamp(10px, 0.6vw, 0.6rem);font-weight:400;line-height:200%;text-align:center;}
.font4{padding:0px 0 0px 0;font-size: clamp(10px, 1.4vw, 2.3rem);font-weight:400;line-height:200%;text-align:center;}
.font5{padding:1% 0 0px 0;font-size: clamp(10px, 1.2vw, 1.2rem);font-weight:400;line-height:210%;text-align:center;}
.font55{padding:1.5% 0 0px 0;font-size: clamp(10px, 1.2vw, 1.2rem);font-weight:400;line-height:180%;text-align:left;}

.font6{width:96%;text-align:left;padding:1%;margin: 20px auto 20px auto;line-height: 150%;font-size: clamp(12px, 0.8vw, 0.8rem);border:solid 1px #000}
.font7{padding:0px 0 0px 0;font-size: clamp(13px, 1.6vw, 2.3rem);font-weight:400;line-height:200%;text-align:left;color:#6d6c6c }
.font8{padding:0px 0 0px 0;font-size: clamp(10px, 1.2vw, 2.0rem);font-weight:400;line-height:180%;text-align:left;}
	
.text {max-width:1200px;width:90%;text-align:center;;margin: 0px auto 0px auto; padding: 10px 0px 20px 0px;line-height: 150%;font-size:1.1rem;font-family: 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;}

	
.topobi5bg{width:100%;text-align:center;margin:0px auto 0px auto;padding:3% 0 3% 0;background:linear-gradient(90deg, #d5d6d6,#efefef);}
.topobi6bg{width:100%;text-align:center;margin:0px auto 0px auto;padding:3% 0 3% 0;background:#fff}
.topobi7bg{width:100%;text-align:center;margin:0px auto 0px auto;padding:3% 0 3% 0;background:#f6f6f6}

	
	
.topcap{width:100%;text-align:center;padding:0px 0 0px 0;margin: 50px auto 70px auto;line-height: 150%;font-size: clamp(10px, 0.6vw, 0.7rem);font-family: 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;}

.topcap2{width:100%;text-align:left;padding:0px 0 0px 0;margin: 20px auto 20px auto;line-height: 150%;font-size: clamp(10px, 0.6vw, 0.7rem);font-family: 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;}

.topcap3{width:100%;text-align:left;padding:2% 0 0px 0;margin: 20px auto 20px auto;line-height: 150%;font-size: clamp(10px, 0.6vw, 0.7rem);}

img{max-width:100%}

.img70{max-width:1800px;width:70%;padding:0px 30% 0px 0;margin: 0px auto 0px auto;text-align:left;}
.img72{max-width:700px;width:58%;padding:0px 0 20px 0;margin: 0px auto 0px auto;}
.img80{max-width:1000px;width:70%;padding:0px 0 0px 0;margin: 0px auto 0px auto;}
.img81{max-width:1020px;width:70%;padding:0px 0 0px 0;margin: 0px auto 0px auto;}

	}


.img-wrap {
  opacity: 1;
}

.img-animation {
  animation: img-opacity 2s cubic-bezier(.4, 0, .2, 1);
  overflow: hidden;
  position: relative;
}

.img-animation:before {
  animation: img-animation 2s cubic-bezier(.4, 0, .2, 1) forwards;
  background: #fff;
  bottom: 0;
  content: '';
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
}


.fadeIn_up {
  opacity: 0;
  transform: translate(0, 50%);
  transition: 2s;
}
.fadeIn_up.is-show {
  transform: translate(0, 0);
  opacity: 1;
}

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




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

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

.fadeUpTrigger1{
    opacity: 0;
}
.delay-time1{
animation-delay: 0.0s;
}
.delay-time2{
animation-delay: 0.3s;
}
.delay-time3{
animation-delay: 0.6s;
}
.delay-time4{
animation-delay: .9s;
}
.delay-time5{
animation-delay: 1.2s;
}
.delay-time6{
animation-delay: 1.5s;
}





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


@keyframes img-opacity {
100% {opacity: 1;}}

@keyframes img-animation {100% {
transform: translateX(100%);}}
    
@-webkit-keyframes imageBlur {
from {
opacity: 0;
-webkit-filter: blur(20px);
-moz-filter: blur(20px);
-ms-filter: blur(20px);
-o-filter: blur(20px);
filter: blur(20px);
}

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

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


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

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

.fadeUpTrigger1{
    opacity: 0;
}
.delay-time1{
animation-delay: 0.0s;
}
.delay-time2{
animation-delay: 0.3s;
}
.delay-time3{
animation-delay: 0.6s;
}
.delay-time4{
animation-delay: .9s;
}
.delay-time5{
animation-delay: 1.2s;
}
.delay-time6{
animation-delay: 1.5s;
}