@charset 'utf-8';
@import url('https://fonts.googleapis.com/css2?family=family=Noto+Sans+JP:wght@100..900&display=swap&subset=japanese');

:root{/*
  --primary-color:#;
  --bg-color:#;
  --text-color:#;
  --accent-color:#;*/
}

/* reset
--------------------------------------- */
html,body,
header,main,section,article,footer,aside,canvas,details,figcaption,figure,hgroup,menu,nav,
div,span,applet,embed,object,iframe,h1,h2,h3,h4,h5,h6,p,a,blockquote,q,pre,abbr,address,big,small,
cite,code,del,dfn,em,img,strong,sub,sup,tt,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,
legend,caption,table,tbody,tfoot,thead,tr,th,td,output,ruby,
audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
header,main,section,article,footer,aside,details,figcaption,figure,hgroup,menu,nav{display:block;}
body{line-height:1;}
ol,ul{list-style:none;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
table{border-collapse:collapse;border-spacing:0;}

/* basic
--------------------------------------- */
body{
  position:relative;
  width:100%;/*
  font-family:"メイリオ", Meiryo, "Helvetica Neue", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;*/
  font-family:"Noto Sans JP", sans-serif;
  font-optical-sizing:auto;
  font-weight:300;
  font-style:normal;
  font-size:15px;
font-size:21px;
  line-height:1.8;
  letter-spacing:-0.00em;
  color:#000;
  -webkit-text-size-adjust:100%;
  -moz-text-size-adjust:100%;
  -ms-text-size-adjust:100%;
  -o-text-size-adjust:100%;
  text-size-adjust:100%;
  /*text-align:justify;
  text-justify:inter-ideograph;*/
  text-align:left;
  text-justify:none;
  background-color:#fff;
}
*,*:before,*:after{-webkit-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0;}
a{outline:none;text-decoration:none;color:#000;}
a[href^="tel:"]{color:#000;pointer-events:none;text-align:left;}
img{max-width:100%;height:auto;vertical-align:bottom;image-rendering:-webkit-optimize-contrast;}
#header,#footer,#splash,#kv,
.section{
  width:100%;
  min-width:initial;
  margin:auto;
}
.wrap{background:rgba(255,0,0,0.0);
  width:1480px;
  margin:auto;
}
.inner{background:rgba(0,255,0,0.0);
  position:relative;
  width:1200px;
  margin:auto;
}
@media screen and (max-width:1497px){
  .wrap{width:100%;}
}
@media screen and (max-width:1217px){
  .inner{width:98%;}
}
@media screen and (max-width:750px){
  body{font-size:24px;}
  a[href^="tel:"]{pointer-events:auto;}
  img{image-rendering:auto;}
  #header,#footer,#splash,#kv,
  .section{
    width:750px;
    min-width:initial;
    overflow:hidden;
  }
  .wrap{
    width:750px;
  }
  .inner{
    width:670px;
  }
}

/* header
--------------------------------------- */
#header{
  position:fixed;
  height:100px;
  background:#fff;
  border-bottom:1px solid #e6e6e6;
  z-index:999;
}
#header .wrap{
  width:100%;
}
#header .inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  width:100%;
  height:100%;
}
#header .brand-logo{
  width:270px;
  margin-left:20px;
}
/*  */
#header .hd-menu{
  display:flex;
  justify-content:space-between;
  align-items:center;
  width:320px;
}
#header .hd-menu ul.lang{
  display:flex;
  justify-content:space-between;
  align-items:center;
  width:85px;
  font-size:18px;
}
#header .hd-menu ul.lang li.jp span:after,
#header .hd-menu ul.lang li.jp a:after{
  content:'';
  display:inline-block;
  width:10px;
  height:12px;
  margin-left:6px;
  background-color:#004ea2;
  clip-path:polygon(0 50%, 100% 0, 100% 100%);
}
#header .hd-menu ul.lang li.en span:before,
#header .hd-menu ul.lang li.en a:before{
  content:'';
  display:inline-block;
  width:10px;
  height:12px;
  margin-right:6px;
  background-color:#004ea2;
  clip-path:polygon(0 0, 100% 50%, 0 100%);
}
#header .hd-menu ul.lang li a{
  color:#004ea2;
  text-decoration:underline;
}
#header .hd-menu ul.lang li a:hover{text-decoration:none;}
#header .hd-menu ul.lang li.jp span:after,
#header .hd-menu ul.lang li.en span:before{background-color:#000;}
/*  */
#header .hd-menu ul.navi{
  display:flex;
  justify-content:space-between;
  width:200px;
}
#header .hd-menu ul.navi li.entry a{
  display:block;
  width:100px;
  background-color:#ec6450
}
#header .hd-menu ul.navi li.menu{
  width:100px;
  height:100px;
  background-color:#004ea2;
}
#header .hd-menu ul.navi li{transition:opacity 300ms;}
#header .hd-menu ul.navi li:hover{opacity:0.7;}
#header .hd-menu ul.navi li.menu .hamburger{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  width:100px;
  height:100px;
  padding:30px 25px;
  background:transparent;
  border:none;
  cursor:pointer;
}

#header .hd-menu ul.navi li.menu .bar{
  width:100%;
  height:6px;
  background-color:#fff;
  border-radius:3px;
  transition:all 300ms;
}
#header .hd-menu ul.navi li.menu .hamburger.is-active .bar:nth-child(1){transform:translateY(17px) rotate(45deg);}
#header .hd-menu ul.navi li.menu .hamburger.is-active .bar:nth-child(2){opacity:0;}
#header .hd-menu ul.navi li.menu .hamburger.is-active .bar:nth-child(3){transform:translateY(-17px) rotate(-45deg);}
@media screen and (max-width:1217px){
  #header .inner{width:100%;}
}
@media screen and (max-width:750px){
  #header .brand-logo{
    margin-left:40px;
  }
  #header .hd-menu{
    width:350px;
  }
  #header .hd-menu ul.lang{
    width:100px;
    font-size:21px;
  }
  #header .hd-menu ul.lang li.jp span:after,
  #header .hd-menu ul.lang li.jp a:after{
    width:14px;
    height:16px;
  }
  #header .hd-menu ul.lang li.en span:before,
  #header .hd-menu ul.lang li.en a:before{
    width:14px;
    height:16px;
  }
  #header .hd-menu ul.lang li a:hover{text-decoration:underline;}
  #header .hd-menu ul.navi li{transition:none;}
  #header .hd-menu ul.navi li:hover{opacity:1;}
}

/* navigation
--------------------------------------- */
/* top / bottom 共通 */
.navi{
  background-color:#eaf0f7;
}
.navi .inner{
  padding:30px 0 10px;
}
.navi .wrap-navi{
  display:flex;
  justify-content:flex-start;
  align-items:flex-start;
}
.navi .wrap-navi .nav-l{
  margin-right:100px;
}
.navi .wrap-navi .nav-c{
  margin-right:130px;
}
.navi .wrap-navi .nav-r{
  margin-right:0px;
}
.navi .wrap-navi dl{
  margin-bottom:20px;
}
.navi .wrap-navi dl a{color:#000;}
.navi .wrap-navi dl a:hover{
  text-decoration:underline;
}
.navi .wrap-navi dl dt{
  font-size:18px;
  font-weight:600;
  line-height:1.2;
  padding-left:43px;
  text-indent:-43px;
}
.navi .wrap-navi dl dt br{display:none;}
.navi .wrap-navi dl dt img{
  width:35px;
  margin-right:8px;
  vertical-align:-9px;
}
.navi .wrap-navi dl dd{
  margin-left:43px;
  font-size:15px;
  padding-left:0.78em;
  text-indent:-0.78em;
}
.navi .wrap-navi dl dd > ul{
  margin-left:1.0em;
}
.navi .wrap-navi dl dd:before,
.navi .wrap-navi dl dd > ul li:before{
  content:'- ';
}
.navi .wrap-navi dl dd.sub:before{
  content:'';
  display:none;
}
@media screen and (max-width:1217px){
  .navi .wrap-navi dl dt br{display:block;}
  .navi .wrap-navi .nav-l{
    margin-left:10px;
  }
  .navi .wrap-navi .nav-l,
  .navi .wrap-navi .nav-c{
    margin-right:20px;
  }
}
@media screen and (max-width:750px){
  .navi .inner{
    padding:60px 0;
  }
  .navi .wrap-navi{
    flex-direction:column;
    justify-content:flex-start;
  }
  .navi .wrap-navi .nav-l,
  .navi .wrap-navi .nav-c,
  .navi .wrap-navi .nav-r{
    margin:0;
  }
  .navi .wrap-navi dl{
    margin-bottom:40px;
  }
  .navi .wrap-navi dl a:hover{
    text-decoration:none;
  }
  .navi .wrap-navi dl dt{
    font-size:28px;
  }
  .navi .wrap-navi dl dt br{display:none;}
  .navi .wrap-navi dl dd{
    font-size:24px;
  }
}

/* top navigation */
.top-navi{
  display:none;
  position:fixed;
  top:100px;
  left:0;
  right:0;
  width:100%;
  height:calc(100vh - 100px);
  margin:auto;
  background:rgba(255,255,255,0.8);
  backdrop-filter:saturate(180%) blur(20px);
  z-index:999;
}
.top-navi .bg-navi{
  background-color:#eaf0f7;
}
@media screen and (max-width:750px){
  .top-navi{
    display:none;
    overflow:visible;
    overflow:scroll;
    background:none;
    backdrop-filter:none;
  }
}

/* bottom navigation */
.btm-navi{}
@media screen and (max-width:750px){}

/* bottom / footer
--------------------------------------- */
/*  */
.btm-sns{
  background-color:#0081cc;
}
.btm-sns .inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  height:100px;
}
.btm-sns .return a{
  margin-left:4px;
  font-size:18px;
  color:#fff;
  text-decoration:underline;
}
.btm-sns .return a:hover{text-decoration:none;}
.btm-sns .return a:before{
  content:'';
  display:inline-block;
  width:10px;
  height:12px;
  margin-right:10px;
  background-color:#fff;
  clip-path:polygon(0 50%, 100% 0, 100% 100%);
}
.btm-sns ul{
  display:flex;
  justify-content:flex-end;
  gap:40px;
}
.btm-sns ul li a{
  display:block;
  width:72px;
  height:72px;
  padding:10px;
  border-radius:5px;
  transition:background 300ms;
}
.btm-sns ul li.yt a{
  width:155px;
}
.btm-sns ul li a:hover{
  background-color:#339ad6;
}
@media screen and (max-width:750px){
  .btm-sns .return a{
    margin-left:0;
    font-size:21px;
  }
  .btm-sns .return a:hover{text-decoration:underline;}
  .btm-sns .return a:before{
    width:14px;
    height:16px;
  }
  .btm-sns ul{
    gap:50px;
  }
  .btm-sns ul li a{
    width:42px;
    height:42px;
    padding:0;
    border-radius:0;
    transition:none;
  }
  .btm-sns ul li.yt a{
    width:135px;
  }
  .btm-sns ul li a:hover{
    background-color:#0081cc;
  }
}

/*  */
#footer .wrap-navi{
  margin-top:20px;
}
#footer .wrap-navi ul{
  display:flex;
  justify-content:flex-end;
  gap:30px;
}
#footer .wrap-navi ul li{
  font-size:15px;
}
#footer .wrap-navi ul li a{text-decoration:underline;}
#footer .wrap-navi ul li a:hover{text-decoration:none;}
#footer .copyright{
  margin:20px 0;
  font-size:15px;
  text-align:center;
}
@media screen and (max-width:750px){
#footer .wrap-navi{
  margin-top:30px;
}
  #footer .wrap-navi ul{
    gap:50px;
  }
  #footer .wrap-navi ul li{
    font-size:21px;
  }
  #footer .wrap-navi ul li a:hover{text-decoration:underline;}
  #footer .copyright{
    font-size:13px;
  }
}

/* ページトップ移動ボタン
--------------------------------------- */
.pagetop-wrap{
  position:relative;
  width:1400px;
  margin:auto;
}
#pagetop{
  display:none;
  position:fixed;
  bottom:10px;
  width:101px;
  height:101px;
  margin-left:1320px;
  font-size:15px;
  line-height:28px;
  text-align:center;
  cursor:pointer;
  z-index:2;
}
@media screen and (max-width:1497px){
  .pagetop-wrap{width:100%;}
  #pagetop{margin-left:calc(100% - 101px);}
}
@media screen and (max-width:1200px){
  .pagetop-wrap{width:1200px;}
  #pagetop{
    right:10px;
    margin-left:0;
  }
}
@media screen and (max-width:750px){
  .pagetop-wrap{width:750px;}
  #pagetop{
    bottom:20px;
    right:6px;
    margin-left:0;
    font-size:28px;
    line-height:48px;
    border-radius:11px 11px 0 0;
  }
}

#main{padding-top:100px;}
/* キービ
--------------------------------------- */
.top .kv .key-visual{
  position:relative;
  overflow:hidden;
  height:56.25vw;
}
.top .kv .key-visual .slider{
  display:flex;
  justify-content:center;
  align-items:center;
  width:100%;
  height:56.25vw;
  margin-inline:auto;
  overflow:hidden;
}
/* initial前表示の抑制 */
.top .kv .key-visual .slider{opacity:0;transition:opacity300ms ease-in;}
.top .kv .key-visual .slider.slick-initialized {opacity:1;}
.top .kv .key-visual .slick-img img{
  width:100%;
  height:auto;
  aspect-ratio:3 / 2;
  object-fit:cover;
}
@keyframes zoomUp {
  0%{transform:scale(1);}
  100%{transform:scale(1.15);}
}
.top .kv .key-visual .add-animation{
  animation:zoomUp 10s linear 0s normal both;
}
.top .kv .layer{
  position:absolute;
  top:0;
  right:0;
  left:0;
  width:100%;/*
  max-width:1200px;*/
  height:56.25vw;
  margin:auto;
}
.top .kv .layer .feature{
  position:absolute;
  bottom:40px;
  right:20px;
  line-height:1.3;
  text-align:right;
}
.top .kv .layer .feature .tx1{
  margin-bottom:20px;
  font-size:54px;
  font-weight:600;
  color:#fff;
}
.top .kv .layer .feature .tx2{
  font-size:15px;
  color:#fff;
}
.top .kv .layer .feature .tx2 a{
  color:#fff;
  text-decoration:underline;
}
.top .kv .layer .feature .tx2 a:hover{
  text-decoration:none;
}
@media screen and (max-width:1217px){
  .top .kv .layer .feature{right:20px;}
}
.top .kv .layer .particles-wrap{display:none;}
@media screen and (max-width:750px){
  .top .kv .key-visual{
    height:initial;
  }
  .top .kv .layer{
    position:static;
    width:100vw;
    height:initial;
    margin:auto;
    background:#fff;
  }
  .top .kv .layer .feature{
    position:absolute;
    right:40px;
    bottom:80px;
    width:100%;
  }
  .top .kv .layer .feature .tx1{
    font-size:60px;
    color:#000;
  }
  .top .kv .layer .feature .tx2{
    font-size:24px;
    color:#000;
  }
  .top .kv .layer .feature .tx2 a{
    color:#004ea2;
  }
  .top .kv .layer .feature .tx2 a:hover{
    text-decoration:underline;
  }

  .top .kv .layer .particles-wrap{
    position:relative;
    display:block;
    width:100%;
    height:56.25vw;
    margin:-10px auto 0;
    aspect-ratio:16 / 9;
    opacity:0.5;
  }
  .top #particles-js,
  .top #particles-js2{
    width:15%;
    position:absolute;
    top:0px;
    left:0;
    right:0;
    bottom:0;
    display:block;
    z-index:-1;
    opacity:1;
  }
  .top #particles-js{right:85%;}
  .top #particles-js2{left:85%;}
}
/* youtube
--------------------------------------- */
.youtube.slider-show3{
  background-color:#eaf0f7;
}

.slider-show3 .wrap{
  padding:55px 0 50px;
}
.slider-show3 .inner{
  width:1080px;
  margin:auto;
}
.slider-show3 .wrap-slider{
  width:100%;
  margin:auto;
}
.slider-show3 .wrap-slider ul.slider2{
  width:100%;
  max-width:1080px;
  margin:auto;
}
.slider-show3 .wrap-slider ul.slider2 li{
  width:320px;
  margin:0 30px;
}
.slider-show3 .wrap-slider ul.slider2 li:first-child{}
.slider-show3 .wrap-slider ul.slider2 li .wrap-img{
  position:relative;
  height:180px;
}
.slider-show3 .wrap-slider ul.slider2 li .wrap-img span{
  position:absolute;
  bottom:0;
  left:0;
  padding:0px 8px;
  font-size:15px;
  color:#fff;
  letter-spacing:0.02em;
  background-color:rgba(0,0,0,0.7);
  z-index:1
}
.slider-show3 .wrap-slider ul.slider2 li a .wrap-img{
  overflow:hidden;
}
.slider-show3 .wrap-slider ul.slider2 li a .wrap-img img{
  transition:transform 300ms ease-in-out;
}
.slider-show3 .wrap-slider ul.slider2 li a:hover .wrap-img img{
  transform:scale(1.08);
}
.slider-show3 .wrap-slider ul.slider2 li p{
  font-size:18px;
  line-height:1.5;
}
.slider-show3 .wrap-slider ul.slider2 li .tx1{
  font-size:15px;
}
.slider-show3 .wrap-slider ul.slider2 li .tx2{
  margin-bottom:10px;
  font-size:18px;
  font-weight:600;
}
.slider-show3 .wrap-slider ul.slider2 li .tx3{
  margin-top:10px;
  font-size:18px;
  font-weight:600;
}
.slider-show3 .wrap-slider ul.slider2 li .tx4{
  margin-top:10px;
  font-size:18px;
}
.slider-show3 .wrap-slider ul.slider2 li .tx5{
  font-size:18px;
}
.slider-show3 .wrap-slider ul.slider2 li .wrap-video{
  position:relative;
  width:100%;
  max-width:320px;
  height:0;
  padding-top:56.25%;
  xbackground:#eee;
}
.slider-show3 .wrap-slider ul.slider2 li .wrap-video iframe{
  position:absolute;
  top:0px;
  left:0px;
  width:100%;
  height:100%;
}
@media screen and (max-width:1277px){
  .slider-show3 .inner{width:100%;}
}
@media screen and (max-width:750px){
  .slider-show3 .wrap-slider ul.slider2{
    width:480px;
    max-width:initial;
  }
  .slider-show3 .wrap-slider ul.slider2 li{
    width:480px;
    margin:0 auto;
  }
  .slider-show3 .wrap-slider ul.slider2 li .wrap-img{
    height:270px;
  }
  .slider-show3 .wrap-slider ul.slider2 li .wrap-img span{
    padding:2px 12px;
    font-size:21px;
  }
  .slider-show3 .wrap-slider ul.slider2 li a .wrap-img img{
    transition:none;
  }
  .slider-show3 .wrap-slider ul.slider2 li a:hover .wrap-img img{
    transform:scale(1);
  }
  .slider-show3 .wrap-slider ul.slider2 li p{
    font-size:24px;
  }
  .slider-show3 .wrap-slider ul.slider2 li .tx1{
    font-size:18px;
  }
  .slider-show3 .wrap-slider ul.slider2 li .tx2{
    font-size:24px;
  }
  .slider-show3 .wrap-slider ul.slider2 li .tx3{
    font-size:28px;
    letter-spacing:-0.02em;
  }
  .slider-show3 .wrap-slider ul.slider2 li .tx4{
    font-size:24px;
  }
  .slider-show3 .wrap-slider ul.slider2 li .tx5{
    font-size:24px;
  }
  .slider-show3 .wrap-slider ul.slider2 li .wrap-video{
    max-width:initial;
  }
}
/* slider arrow */
.slick-prev,
.slick-next{
  width:60px;
  height:60px;
  background:rgba(255,255,255,0.6);
  border-radius:60%;
  z-index:1;
  transition:all 300ms;
}
.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus{background:rgba(255,255,255,0.9);}
.slick-prev {left:-120px;}
.slick-next{right:-120px;}
.slick-prev:before,
.slick-next:before{
  content:'';
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  width:18px;
  height:18px;
  margin:auto;
  border-right:4px solid #fff;
  border-top:4px solid #fff;
  transform:rotate(45deg);
}
.slick-prev:before{transform:rotate(225deg);}
@media screen and (max-width:1350px){
  .slick-prev {left:0px;}
  .slick-next{right:0px;}
}
@media screen and (max-width:750px){
  .slick-prev,
  .slick-next{visibility:visible;}
  .slick-prev {left:-90px;}
  .slick-next{right:-90px;}
}

/* youtube */
.youtube.slider-show3 .wrap-img{
  width:100%;
  aspect-ratio:16 / 9;
}
.youtube.slider-show3 .wrap-img iframe{
  width:100%;
  height:100%;
}

.youtube .slick-prev:before,
.youtube .slick-next:before{
  border-right-color:#004ea2;
  border-top-color:#004ea2;
}

/* 更新情報
--------------------------------------- */
.topics{}
.topics .wrap-topics{
  display:flex;
  justify-content:flex-start;
  width:1080px;
  margin:auto;
  padding:48px 0;
}
.topics .title{
  width:120px;
}
.topics .title h2{
  font-size:21px;
  font-weight:600;
  line-height:1.5;
}
.topics .title .update{
  font-size:12px;
}
.topics .title .more{
  margin-top:20px;
  font-size:15px;
  font-weight:600;
  color:#004ea2;
}
.topics .title .more a{
  color:#004ea2;
  text-decoration:underline;
}
.topics .title .more a:hover{
  text-decoration:none;
}
.topics .detail{
  width:90%;
  max-width:960px;
  border:1px solid #ccc;
}
.topics .detail .h-scroll{
  width:100%;
  max-height:130px;
  padding:18px 20px;
  overflow-y:auto;
}
.topics .detail dl{
  margin-bottom:0.5em;
  font-size:18px;
  line-height:1.3;
}
.topics .detail dl:last-of-type{margin-bottom:0;}
.topics .detail dl:after,
.topics .detail dl:before{content:'';display:block;clear:both;}
.topics .detail dl dt{
  float:left;
  width:140px;
}
.topics .detail dl dd{
  float:left;
  width:calc(100% - 140px);
}
.topics .detail dl dd a{text-decoration:underline;}
@media screen and (max-width:1097px){
  .topics .wrap-topics{width:100%;}
}
@media screen and (max-width:750px){
  .topics .wrap-topics{
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    width:100%;
    padding:45px 0 60px;
  }
  .topics .title{
    position:relative;
    width:100%;
    margin-bottom:30px;
  }
  .topics .title h2{
    font-size:30px;
    text-align:center;
  }
  .topics .title .update{
    font-size:18px;
    text-align:center;
  }
  .topics .title .more{
    position:absolute;
    bottom:0;
    right:0;
    margin-top:0;
    font-size:24px;
  }
  .topics .title .more a:hover{
    text-decoration:underline;
  }
  .topics .detail{
    width:100%;
    border-width:0;
  }
  .topics .detail .h-scroll{
    width:100%;
    max-height:360px;
    padding:0 20px;
  }
  .topics .detail dl{
    margin-bottom:1em;
    font-size:24px;
    line-height:1.5;
  }
  .topics .detail dl:last-of-type{margin-bottom:0;}
  .topics .detail dl dt,
  .topics .detail dl dd{
    float:none;
    width:100%;
  }
}

/* 更新情報
--------------------------------------- */
.feature .wrap{
  position:relative;
  width:100%;
  aspect-ratio:2560 / 1960;
  background:url(../images/top/feature_bg.jpg) center top no-repeat;
  background-size:cover;
}
.feature .inner{width:100%;}
.feature .layer{
  position:absolute;
  top:0;
  left:0;
  right:0;
  width:100%;
  aspect-ratio:2560 / 1960;
  margin:auto;
background:rgba(255,0,0,0.0);
}
.feature .layer .img{
  position:absolute;
  top:40px;
  left:40px;
  min-width:940px;
  max-width:1960px;
}
.feature .layer .txt{
  position:absolute;
  bottom:-70px;
  right:0;
  width:640px;
  height:770px;
  padding:40px 30px;
  background-color:rgba(0,78,162,0.9);
  z-index:1;
}
.feature .layer .txt p{
  font-size:24px;
  font-weight:600;
  line-height:1.6;
  color:#fff;
  letter-spacing:-0.03em;
  white-space:nowrap;
}
.feature .layer .txt .pull{text-indent:-0.49em;}
.feature .layer .video-wrap{display:none}
@media screen and (max-width:1217px){
  .feature .wrap {
    height:795px;
    aspect-ratio:auto;
    margin-bottom:190px;
    background-size:1200px 795px;
  }
  .feature .layer{
    height:795px;
    aspect-ratio:auto;
  }
  .feature .layer .txt{
    top:170px;
    bottom:auto;
  }
}
@media screen and (max-width:750px){
  .feature .wrap{
    height:1300px;
    margin-bottom:0px;
    overflow:hidden;
    background-size:contain;
  }
  .feature .layer{
    width:750px;
  }
  .feature .layer .img{
    top:15px;
    left:15px;
    min-width:initial;
    max-width:initial;
  }
  .feature .layer .txt{
    top:497px;
    width:750px;
    height:initial;
    margin-top:0px;
    padding:50px;
    background:none;/*
    background-image:linear-gradient(90deg, rgba(6, 23, 69, 0), rgba(6, 23, 69, 0.8) 10% 90%, rgba(6, 23, 69, 0));*/
    background-image:linear-gradient(90deg, rgba(6, 23, 69, 0), rgba(6, 23, 69, 0.2) 20% 80%, rgba(6, 23, 69, 0));
    z-index:1;
  }
  .feature .layer .txt p{
    letter-spacing:0;
  }
  .feature .layer .video-wrap{
    position:absolute;
    top:497px;
    left:0;
    right:0;
    display:block;
    width:100%;
    height:56.25vw;
    margin:auto;
    aspect-ratio:16 / 9;
    z-index:0;
  }
  .feature .layer .video-wrap video{
    width:100%;
    height:100%;
    transform:scaleY(2);
    transform-origin:center top;
  }
}


/* NICTの人々 - ICTで、未来をどうする？
--------------------------------------- */
.future{background-color:#eaf0f7;}
.future1{background-color:#0081cc;}
.future2{background-color:#004ea2;}
.future3{background-color:#009dbf;}
.future .wrap{margin-top:110px;padding:50px 0 20px;}
.future1 .wrap{padding:40px 0 50px;}
.future2 .wrap{padding:40px 0 50px;}
.future3 .wrap{padding:40px 0 50px;}
.future .title{
  margin-bottom:40px;
  text-align:center;
}
.future .title .icon{
  width:53px;
  margin:0 auto 10px;
}
.future .title h2{
  font-size:30px;
  font-weight:600;
}
.future .sub-title{
  margin-bottom:0px;
  text-align:center;
}
.future .sub-title h3{
  font-size:48px;
  font-weight:600;
}

.future .sub-title .more{
  font-size:15px;
  font-weight:600;
  color:#004ea2;
}
.future .sub-title .more a{
  color:#004ea2;
  text-decoration:underline;
}
.future .sub-title .more a:hover{
  text-decoration:none;
}
.future1 h4,
.future2 h4,
.future3 h4{
  margin-bottom:20px;
  font-size:30px;
  font-weight:600;
}
.future1 h4,
.future2 h4,
.future3 h4{
  color:#fff;
  border-bottom:2px solid #fff;
}
.future1.slider-show3 .wrap-slider ul.slider2 li .tx1,
.future1.slider-show3 .wrap-slider ul.slider2 li .tx2,
.future1.slider-show3 .wrap-slider ul.slider2 li .tx3,
.future2.slider-show3 .wrap-slider ul.slider2 li .tx1,
.future2.slider-show3 .wrap-slider ul.slider2 li .tx2,
.future2.slider-show3 .wrap-slider ul.slider2 li .tx3,
.future3.slider-show3 .wrap-slider ul.slider2 li .tx1,
.future3.slider-show3 .wrap-slider ul.slider2 li .tx2,
.future3.slider-show3 .wrap-slider ul.slider2 li .tx3{color:#fff;}
@media screen and (max-width:750px){
  .future .wrap{margin-top:0;}
  .future1 .wrap{padding:40px 0 10px;}
  .future2 .wrap{padding:40px 0 10px;}
  .future3 .wrap{padding:40px 0 70px;}
  .future .title{
    margin-bottom:50px;
  }
 .future .title .icon{
    margin-bottom:0 auto 20px;
  }
  .future .sub-title{
    margin-bottom:60px;
  }
  .future .sub-title .more{
    font-size:24px;
  }
  .future .sub-title .more a:hover{
    text-decoration:underline;
  }
  .future1 h4,
  .future2 h4,
  .future3 h4{
    width:670px;
    margin:0 auto 20px;
  }
  .future3 h4{margin-bottom:60px;}
}

/* 職種紹介 / 動画で見る / 数字で見る
--------------------------------------- */
.etc{overflow:hidden;}
.etc .wrap{padding:50px 0 60px}
.etc .inner{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:flex-start;
  align-content:flex-start;
}
.etc .block{
  position:relative;
  width:570px;
  height:300px;
  margin-bottom:40px;
  background-position:center center;
  background-repeat:no-repeat;
  background-size:contain;
}
.etc .block1.block{
  background-image:url(../images/top/introduce1_bg.jpg);
}
.etc .block2.block{
  background-image:url(../images/top/introduce2_bg.jpg);
}
.etc .block3.block{
  background-image:url(../images/top/movies_bg.jpg);
}
.etc .block4.block{
  background-image:url(../images/top/numbers_bg.jpg);
}
.etc .block .detail{
  position:absolute;
  top:0;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  width:570px;
  height:300px;
  padding-left:140px;
  color:#fff;
background-color:rgba(255,255,255,0.0);
}
.etc .block .detail .title{
  margin:40px 0 0;
}
.etc .block .detail .title h2{
  font-size:30px;
  font-weight:600;
}
.etc .block .detail .title h3{
  font-size:24px;
  font-weight:600;
}
.etc .block .detail ul.link{
  padding-left:20px;
  font-size:18px;
  line-height:1.6;
}
.etc .block ul.link li:before{
  content:'';
  display:inline-block;
  width:14px;
  height:16px;
  margin-right:6px;
  clip-path:polygon(0 0, 100% 50%, 0 100%);
  background-color:#fff;
}
.etc .block .more{
  position:absolute;
  bottom:30px;
  left:0;
  right:0;
  width:100%;
  font-size:15px;
  font-weight:600;
  color:#fff;
  text-align:center;
}
.etc .block .detail ul.link li a,
.etc .block .more a{
  color:#fff;
  text-decoration:underline;
}
.etc .block .detail ul.link li a:hover,
.etc .block .more a:hover{
  text-decoration:none;
}
@media screen and (max-width:1237px){
  .etc .block{
    width:46vw;
    height:24.25vw;
    max-height:300px;
  }
  .etc .block .detail{padding-left:11.31vw;}
  .etc .block .detail .title{margin-top:3.23vw;}
  .etc .block .detail .title h2{font-size:2.42vw;}
  .etc .block .detail .title h3{font-size:1.94vw;}
  .etc .block .detail ul.link{font-size:1.45vw;}
  .etc .block .more{bottom:2vw;}
}
@media screen and (max-width:750px){
  .etc .wrap{padding:40px 0 60px}
  .etc .inner{
    display:flex;
    flex-direction:column;
    flex-wrap:wrap;
    justify-content:flex-start;
    align-items:center;
  }
  .etc .block .detail .title h3{
     margin:-10px 0 20px;
  }
  .etc .block{
    width:670px;
    height:353px;
    max-height:initial;
  }
  .etc .block .detail{
    width:670px;
    height:353px;
    padding-left:190px;
  }
  .etc .block .detail .title h2{
    font-size:36px;
  }
  .etc .block .detail .title h3{
    font-size:28px;
  }
  .etc .block .detail ul.link{
    font-size:21px;
  }
  .etc .block .more{
    font-size:24px;
  }
  .etc .block .detail ul.link li a:hover,
  .etc .block .more a:hover{
    text-decoration:underline;
  }
}

/* 働く環境
--------------------------------------- */
.environment{}
.environment .wrap{
  position:relative;
  width:100%;
  min-height:520px;
  aspect-ratio:37 / 13;
  padding-top:40px;
  background:url(../images/top/environment_bg.jpg) center top no-repeat;
  background-size:cover;
}
.environment .inner{width:100%;}/*
.environment .wrap:after{
  content:'';
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:520px;
  background-color:rgba(255,255,255,0.88);
}*/
.environment .title{
  margin-bottom:20px;
  text-align:center;
}
.environment .title .icon{
  width:61px;
  margin:0 auto 20px;
}
.environment .title h2{
  font-size:30px;
  font-weight:600;
}

.environment .block{
  width:570px;
  margin:auto;
  padding:30px 50px;
  background-color:rgba(255,255,255,0.6);
  border-radius:10px;
}
.environment .block h3{
  margin-bottom:8px;
  font-size:21px;
  font-weight:600;
}
.environment .block ul.link{
  margin-bottom:20px;
  font-size:18px;
  line-height:1.6;
}
.environment .block ul.link li:before{
  content:'';
  display:inline-block;
  width:14px;
  height:16px;
  margin-right:6px;
  clip-path:polygon(0 0, 100% 50%, 0 100%);
  background-color:#009dbf;
}
.environment .block .more{
  font-size:15px;
  font-weight:600;
  color:#004ea2;
  text-align:center;
}
.environment .block .detail ul.link li a,
.environment .block .more a{
  color:#004ea2;
  text-decoration:underline;
}
.environment .block .detail ul.link li a:hover,
.environment .block .more a:hover{
  text-decoration:none;
}
@media screen and (max-width:750px){
  .environment .wrap{
    height:600px;
    padding-top:60px;
    background-size:1708px 600px;
  }
  .environment .title h2{
    font-size:48px;
  }

  .environment .block{
    width:670px;
  }
  .environment .block h3{
    font-size:30px;
  }
  .environment .block ul.link{
    font-size:21px;
  }
  .environment .block .more{
    font-size:24px;
  }
  .environment .block .detail ul.link li a:hover,
  .environment .block .more a:hover{
    text-decoration:und;
  }
}

/* スライド
--------------------------------------- */
.gallery{overflow:hidden;}
.gallery ul.slider3{
  width:100%;
  max-width:3360px;/* 120px* 14pic *2 */
  margin:auto;
  overflow:hidden;
}
.gallery ul.slider3 li{
  width:119px;
  margin-right:1px;
}
.gallery .slick-list{
  overflow:visible;
}
@media screen and (max-width:750px){
  .gallery ul.slider3 li{
    width:179px;
  }
}
/* スライド
--------------------------------------- */
.examples{background-color:#eaf0f7;}
.examples .wrap{padding:60px 0 70px;}
.examples .inner{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:flex-start;
  align-content:flex-start;
  gap:30px;
}
.examples .block{
  position:relative;
  width:380px;
  height:340px;
  padding:20px;
  background-color:#fff;
}
.examples .block .img{
  margin-bottom:20px;
}
.examples .block ul.link{
  font-size:14px;
  line-height:1.5;
  padding-left:20px;
  text-indent:-20px;
}
.examples .block ul.link span{
  display:block;
  margin-left:20px;
  font-size:18px;
  font-weight:600;
}
.examples .block > a{display:block;height:100%;}
.examples .block > a .img{
  overflow:hidden;
}
.examples .block > a .img img{
  transition:transform 300ms ease-in-out;
}
.examples .block a:hover .img img{
  transform:scale(1.08);
}
@media screen and (max-width:1217px){
  .examples .inner{
    gap:2vw;
  }
  .examples .block{
    width:calc(90vw / 3);
    height:27.9vw;
    padding:1.6vw;
  }
.examples .block .img{
  margin-bottom:1.6vw;
}
  .examples .block ul.link{
    font-size:16px;
  }
}
@media screen and (max-width:997px){
  .examples .block ul.link br{display:none;}
}
@media screen and (max-width:750px){
  .examples .wrap{padding:80px 0 100px;}
  .examples .inner{
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    align-items:center;
    gap:0;
  }
  .examples .block{
    width:640px;
    min-height:580px;
    margin:0 auto 40px;
    padding:30px;
  }
  .examples .block:last-of-type{margin-bottom:0;}
  .examples .block .img{
    margin-bottom:30px;
  }
  .examples .block ul.link{
    font-size:24px;
  }
  .examples .block ul.link span{
    font-size:36px;
  }
  .examples .block > a .img img{
    transition:none;
  }
  .examples .block a:hover .img img{
    transform:scale(1);
  }
  .examples .block ul.link br{display:block;}
}

/*  */
.examples .block1.block{
  color:#fff;
  text-align:center;
  background-color:#0081cc;
  border-radius:8px;
}
.examples .block1.block h2{
  margin-top:-80px;
  font-size:30px;
  font-weight:600;
}
.examples .block1.block .more{
  font-size:15px;
}
.examples .block1.block .more a{
  color:#fff;
  text-decoration:underline;
}
.examples .block1.block .more a:hover{
  text-decoration:none;
}
@media screen and (max-width:750px){
  .examples .block1.block h2{
  margin-top:-150px;
    font-size:48px;
  }
  .examples .block1.block .more{
    font-size:24px;
  }
  .examples .block1.block .more a:hover{
    text-decoration:underline;
  }
}

/* 
--------------------------------------- */
.about-entry{
  margin-bottom:90px;
  background:linear-gradient(to right, #004ea2 0%, #004ea2 50%, #ec6450 50%, #ec6450 100%);
}
.about-entry .wrap{}
.about-entry .inner{
  display:flex;
  justify-content:space-between;
}
.about-entry .block{
  position:relative;
  width:39%;
  min-height:560px;
  color:#fff;
}
.about-entry .block-about{}
.about-entry .block-entry{}
.about-entry .block a{
  color:#fff;
}
.about-entry .block .title{
  margin:60px auto 40px;
  text-align:center;
}
.about-entry .block .title .icon{
  width:61px;
  margin:0 auto 20px;
}
.about-entry .block .title h2{
  font-size:30px;
  font-weight:600;
  line-height:1.2;
}
.about-entry .block .detail{}
.about-entry .block .detail ul{
  font-size:18px;
  padding-left:1.0em;
  text-indent:-1.0em;
}
.about-entry .block .detail ul li a:hover{
  text-decoration:underline;
}
.about-entry .block .more{
  position:absolute;
  bottom:60px;
  left:0;
  right:0;
  margin:auto;
  font-size:15px;
  font-weight:600;
  text-align:center;
}
.about-entry .block .more a{
  text-decoration:underline;
}
.about-entry .block .more a:hover{
  text-decoration:none;
}
@media screen and (max-width:750px){
  .about-entry{
    background:none;
  }
  .about-entry .inner{
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    align-items:center;
    width:100%;
  }
  .about-entry .block{
    width:100%;
    min-height:640px;
  }
  .about-entry .block-about{background-color:#004ea2;}
  .about-entry .block-entry{background-color:#ec6450;}
  .about-entry .block .title{
    margin:60px auto 2px;
  }
  .about-entry .block .title .icon{
    width:78px;
    margin-bottom:40px;
  }
  .about-entry .block .title h2{
    font-size:48px;
  }
  .about-entry .block .detail{
    width:450px;
    margin:auto;
  }
  .about-entry .block .detail ul{
    font-size:21px;
  }
  .about-entry .block .detail ul li a:hover{
    text-decoration:none;
  }
  .about-entry .block .more{
    bottom:40px;
    font-size:24px;
  }
  .about-entry .block .more a:hover{
    text-decoration:underline;
  }
}


/* arrows
--------------------------------------- */
/* >> */
.double-arrow{
  position:relative;
  display:inline-block;
  width:8px; 
  height:8px;
  margin-right:12px;
  vertical-align:1px;
  border-top:2px solid #000;
  border-right:2px solid #000;
  transform:rotate(45deg);
}
.double-arrow::after{
  content:"";
  display:block;
  width:8px;
  height:8px;
  border-top:2px solid #000;
  border-right:2px solid #000;
  position:absolute;
  top:-6px;
  right:-6px;
}
.double-arrow.wt,
.double-arrow.wt:after{border-color:#fff;}
.double-arrow.bl,
.double-arrow.bl:after{border-color:#004ea2;}
@media screen and (max-width:750px){
  .double-arrow{
    top:-2px;
    width:12px; 
    height:12px;
    vertical-align:-1px;
  }
  .double-arrow::after{
    width:12px;
    height:12px;
  }
  .kv .double-arrow.wt,
  .kv .double-arrow.wt:after{border-color:#004ea2;}
}

/* |> */
.tri-arrow{
  display:inline-block;
  width:14px;
  height:16px;
  margin-right:6px;
  clip-path:polygon(0 0, 100% 50%, 0 100%);
  background-color:#000;
}
.tri-arrow.wt{background-color:#fff;}
.tri-arrow.bl{background-color:#0081cc;}
@media screen and (max-width:750px){}

.bar-h{
  margin-left:1.0em;
}
.bar-h:after{
  content:'-';
  margin-right:0.4em;
}

/* 汎用
--------------------------------------- */
/* clearfix */
.cf{display:block;}
.cf:after,.cf:before{content:'';display:block;clear:both;}
@media screen and (max-width:750px){
  .sp-cf{display:block;}
  .sp-cf:after,.sp-cf:before{content:'';display:block;clear:both;}
}
/* display */
.disable{display:none;}
.hidden{visibility:hidden;}
.pc{display:block;}
.sp{display:none;}
.pc-visible{display:inline;}
.sp-visible{display:none;}
@media screen and (max-width:750px){
  .pc{display:none;}
  .sp{display:block;}
  .pc-visible{display:none;}
  .sp-visible{display:inline;}
}
/* font - size(base:18px) */
.sml{font-size:0.889em  !important;} /* 16px */
.sml2{font-size:0.833em !important;} /* 15px */
.sml3{font-size:0.778em !important;} /* 14px */
.sml4{font-size:0.722em !important;} /* 13px */
.sml5{font-size:0.667em !important;} /* 12px */
.big{font-size:1.112em  !important;} /* 20px */
.big2{font-size:1.167em !important;} /* 21px */
.big3{font-size:1.222em !important;} /* 22px */
.big4{font-size:1.333em !important;} /* 24px */
/* text */
.bold,b,.b{font-weight:600 !important;}
.normal,.n{font-weight:400 !important;}
.underline{text-decoration:underline;}
.nowrap{white-space:nowrap;}
sup{font-size:0.75em !important;vertical-align:top;}
sub{font-size:0.75em !important;vertical-align:baseline;}
.sup{font-size:0.75em !important;vertical-align:top;position:relative;top:-0.1em;}
/* indent 0.5-1.5(step:0.5em) */
.ind5{text-hangent:0.5em;} .ind10{text-hangent:1.0em;} .ind15{text-hangent:1.5em;}
/* font - hanging indent 0.5-4.0(step:0.5em) */
.hang5{padding-left:0.5em;text-hangent:-0.5em;}
.hang10{padding-left:1.0em;text-hangent:-1.0em;} .hang15{padding-left:1.5em;text-hangent:-1.5em;}
.hang20{padding-left:2.0em;text-hangent:-2.0em;} .hang25{padding-left:2.5em;text-hangent:-2.5em;}
.hang30{padding-left:3.0em;text-hangent:-3.0em;} .hang40{padding-left:4.0em;text-hangent:-4.0em;}
/* line-height 1.0-2.0 */
.lh10{line-height:1.0 !important;} .lh11{line-height:1.1 !important;} .lh12{line-height:1.2 !important;} .lh13{line-height:1.3 !important;} .lh14{line-height:1.4 !important;}
.lh15{line-height:1.5 !important;} .lh16{line-height:1.6 !important;} .lh17{line-height:1.7 !important;} .lh18{line-height:1.8 !important;} .lh19{line-height:1.9 !important;} .lh20{line-height:2.0 !important;}
/* layout - edge center */
.left{text-align:left !important;}
.right{text-align:right !important;}
.center,.sp-left,.sp-right{text-align:center !important;}
@media screen and (max-width:750px){
  .sp-left{text-align:left !important;}
  .sp-right{text-align:right !important;}
  .sp-center,.left,.right{text-align:center !important;}
}
/* layout - float */
.fl, .pc-fl{float:left;}
.fr, .pc-fr{float:right;}
@media screen and (max-width:750px){
  .pc-fl, .pc-fr{float:none;margin-left:auto;margin-right:auto;}
  .sp-fl{float:left;} .sp-fr{float:right;}
}
/* layout - flex row */
.flex-edge{display:flex;justify-content:space-between;}
.flex-center-top{display:flex;justify-content:center;align-items:flex-start;}
.flex-center-center{display:flex;justify-content:center;align-items:center;}
@media screen and (max-width:750px){
  .flex-edge, .flex-center-top, .flex-center-center{display:block;justify-content:normal;align-items:normal;}
}
/* layout - width 1-100(step:1)*/
.w100{width:100%;}.w1{width:1%;}   .w2{width:2%;}   .w3{width:3%;}   .w4{width:4%;}   .w5{width:5%;}   .w6{width:6%;}   .w7{width:7%;}   .w8{width:8%;}   .w9{width:9%;}
.w10{width:10%;} .w11{width:11%;} .w12{width:12%;} .w13{width:13%;} .w14{width:14%;} .w15{width:15%;} .w16{width:16%;} .w17{width:17%;} .w18{width:18%;} .w19{width:19%;}
.w20{width:20%;} .w21{width:21%;} .w22{width:22%;} .w23{width:23%;} .w24{width:24%;} .w25{width:25%;} .w26{width:26%;} .w27{width:27%;} .w28{width:28%;} .w29{width:29%;}
.w30{width:30%;} .w31{width:31%;} .w32{width:32%;} .w33{width:33%;} .w34{width:34%;} .w35{width:35%;} .w36{width:36%;} .w37{width:37%;} .w38{width:38%;} .w39{width:39%;}
.w40{width:40%;} .w41{width:41%;} .w42{width:42%;} .w43{width:43%;} .w44{width:44%;} .w45{width:45%;} .w46{width:46%;} .w47{width:47%;} .w48{width:48%;} .w49{width:49%;}
.w50{width:50%;} .w51{width:51%;} .w52{width:52%;} .w53{width:53%;} .w54{width:54%;} .w55{width:55%;} .w56{width:56%;} .w57{width:57%;} .w58{width:58%;} .w59{width:59%;}
.w60{width:60%;} .w61{width:61%;} .w62{width:62%;} .w63{width:63%;} .w64{width:64%;} .w65{width:65%;} .w66{width:66%;} .w67{width:67%;} .w68{width:68%;} .w69{width:69%;}
.w70{width:70%;} .w71{width:71%;} .w72{width:72%;} .w73{width:73%;} .w74{width:74%;} .w75{width:75%;} .w76{width:76%;} .w77{width:77%;} .w78{width:78%;} .w79{width:79%;}
.w80{width:80%;} .w81{width:81%;} .w82{width:82%;} .w83{width:83%;} .w84{width:84%;} .w85{width:85%;} .w86{width:86%;} .w87{width:87%;} .w88{width:88%;} .w89{width:89%;}
.w90{width:90%;} .w91{width:91%;} .w92{width:92%;} .w93{width:93%;} .w94{width:94%;} .w95{width:95%;} .w96{width:96%;} .w97{width:97%;} .w98{width:98%;} .w99{width:99%;}
@media screen and (max-width:750px){
  .w100, .w1,  .w2,  .w3,  .w4,  .w5,  .w6,  .w7,  .w8,  .w9, .w10, .w11, .w12, .w13, .w14, .w15, .w16, .w17, .w18, .w19,
  .w20, .w21, .w22, .w23, .w24, .w25, .w26, .w27, .w28, .w29, .w30, .w31, .w32, .w33, .w34, .w35, .w36, .w37, .w38, .w39,
  .w40, .w41, .w42, .w43, .w44, .w45, .w46, .w47, .w48, .w49, .w50, .w51, .w52, .w53, .w54, .w55, .w56, .w57, .w58, .w59,
  .w60, .w61, .w62, .w63, .w64, .w65, .w66, .w67, .w68, .w69, .w70, .w71, .w72, .w73, .w74, .w75, .w76, .w77, .w78, .w79,
  .w80, .w81, .w82, .w83, .w84, .w85, .w86, .w87, .w88, .w89, .w90, .w91, .w92, .w93, .w94, .w95, .w96, .w97, .w98, .w99{width:100%;}
}
@media screen and (max-width:750px){
  .sp-w100{width:100% !important;}.sp-w1{width:1% !important;}   .sp-w2{width:2% !important;}   .sp-w3{width:3% !important;}   .sp-w4{width:4% !important;}   .sp-w5{width:5% !important;}   .sp-w6{width:6% !important;}   .sp-w7{width:7% !important;}   .sp-w8{width:8% !important;}   .sp-w9{width:9% !important;}
  .sp-w10{width:10% !important;} .sp-w11{width:11% !important;} .sp-w12{width:12% !important;} .sp-w13{width:13% !important;} .sp-w14{width:14% !important;} .sp-w15{width:15% !important;} .sp-w16{width:16% !important;} .sp-w17{width:17% !important;} .sp-w18{width:18% !important;} .sp-w19{width:19% !important;}
  .sp-w20{width:20% !important;} .sp-w21{width:21% !important;} .sp-w22{width:22% !important;} .sp-w23{width:23% !important;} .sp-w24{width:24% !important;} .sp-w25{width:25% !important;} .sp-w26{width:26% !important;} .sp-w27{width:27% !important;} .sp-w28{width:28% !important;} .sp-w29{width:29% !important;}
  .sp-w30{width:30% !important;} .sp-w31{width:31% !important;} .sp-w32{width:32% !important;} .sp-w33{width:33% !important;} .sp-w34{width:34% !important;} .sp-w35{width:35% !important;} .sp-w36{width:36% !important;} .sp-w37{width:37% !important;} .sp-w38{width:38% !important;} .sp-w39{width:39% !important;}
  .sp-w40{width:40% !important;} .sp-w41{width:41% !important;} .sp-w42{width:42% !important;} .sp-w43{width:43% !important;} .sp-w44{width:44% !important;} .sp-w45{width:45% !important;} .sp-w46{width:46% !important;} .sp-w47{width:47% !important;} .sp-w48{width:48% !important;} .sp-w49{width:49% !important;}
  .sp-w50{width:50% !important;} .sp-w51{width:51% !important;} .sp-w52{width:52% !important;} .sp-w53{width:53% !important;} .sp-w54{width:54% !important;} .sp-w55{width:55% !important;} .sp-w56{width:56% !important;} .sp-w57{width:57% !important;} .sp-w58{width:58% !important;} .sp-w59{width:59% !important;}
  .sp-w60{width:60% !important;} .sp-w61{width:61% !important;} .sp-w62{width:62% !important;} .sp-w63{width:63% !important;} .sp-w64{width:64% !important;} .sp-w65{width:65% !important;} .sp-w66{width:66% !important;} .sp-w67{width:67% !important;} .sp-w68{width:68% !important;} .sp-w69{width:69% !important;}
  .sp-w70{width:70% !important;} .sp-w71{width:71% !important;} .sp-w72{width:72% !important;} .sp-w73{width:73% !important;} .sp-w74{width:74% !important;} .sp-w75{width:75% !important;} .sp-w76{width:76% !important;} .sp-w77{width:77% !important;} .sp-w78{width:78% !important;} .sp-w79{width:79% !important;}
  .sp-w80{width:80% !important;} .sp-w81{width:81% !important;} .sp-w82{width:82% !important;} .sp-w83{width:83% !important;} .sp-w84{width:84% !important;} .sp-w85{width:85% !important;} .sp-w86{width:86% !important;} .sp-w87{width:87% !important;} .sp-w88{width:88% !important;} .sp-w89{width:89% !important;}
  .sp-w90{width:90% !important;} .sp-w91{width:91% !important;} .sp-w92{width:92% !important;} .sp-w93{width:93% !important;} .sp-w94{width:94% !important;} .sp-w95{width:95% !important;} .sp-w96{width:96% !important;} .sp-w97{width:97% !important;} .sp-w98{width:98% !important;} .sp-w99{width:99% !important;}
}
.wTri{width:33.13%;} .wQuart{width:24.8%;} .wHalf{width:49.8%;} .wWide{width:66.46%;} .wFull{width:99.8%;}
/* layout - margin 0-120(step:10px) */
.mt0{margin-top:0px important;} .mt10{margin-top:10px important;} .mt20{margin-top:20px important;} .mt30{margin-top:30px important;} .mt40{margin-top:40px important;}
.mt50{margin-top:50px important;} .mt60{margin-top:60px important;} .mt70{margin-top:70px important;} .mt80{margin-top:80px important;} .mt90{margin-top:90px important;}
.mt100{margin-top:100px important;} .mt110{margin-top:110px important;} .mt120{margin-top:120px important;}
.mr0{margin-right:0px important;} .mr10{margin-right:10px important;} .mr20{margin-right:20px important;} .mr30{margin-right:30px important;} .mr40{margin-right:40px important;}
.mr50{margin-right:50px important;} .mr60{margin-right:60px important;} .mr70{margin-right:70px important;} .mr80{margin-right:80px important;} .mr90{margin-right:90px important;}
.mr100{margin-right:100px important;} .mr110{margin-right:110px important;} .mr120{margin-right:120px important;}
.mb0{margin-bottom:0px important;}  .mb10{margin-bottom:10px important;} .mb20{margin-bottom:20px important;} .mb30{margin-bottom:30px important;} .mb40{margin-bottom:40px important;}
.mb50{margin-bottom:50px important;} .mb60{margin-bottom:60px important;} .mb70{margin-bottom:70px important;} .mb80{margin-bottom:80px important;} .mb90{margin-bottom:90px important;}
.mb100{margin-bottom:100px important;} .mb110{margin-bottom:110px important;} .mb120{margin-bottom:120px important;}
.ml0{margin-left:0px important;} .ml10{margin-left:10px important;} .ml20{margin-left:20px important;} .ml30{margin-left:30px important;} .ml40{margin-left:40px important;}
.ml50{margin-left:50px important;} .ml60{margin-left:60px important;} .ml70{margin-left:70px important;} .ml80{margin-left:80px important;} .ml90{margin-left:90px important;}
.ml100{margin-left:100px important;} .ml110{margin-left:110px important;} .ml120{margin-left:120px important;}
.m-center{margin-left:auto;margin-right:auto;}
@media screen and (max-width:750px){
  .mt10{margin-top:1vw important;} .mt20{margin-top:2vw important;} .mt30{margin-top:3vw important;} .mt40{margin-top:4vw important;}
  .mt50{margin-top:5vw important;} .mt60{margin-top:6vw important;} .mt70{margin-top:7vw important;} .mt80{margin-top:8vw important;} .mt90{margin-top:9vw important;}
  .mt100{margin-top:10vw important;} .mt110{margin-top:11vw important;} .mt120{margin-top:12vw important;}
  .mr10{margin-right:1vw important;} .mr20{margin-right:2vw important;} .mr30{margin-right:3vw important;} .mr40{margin-right:4vw important;}
  .mr50{margin-right:5vw important;} .mr60{margin-right:6vw important;} .mr70{margin-right:7vw important;} .mr80{margin-right:8vw important;} .mr90{margin-right:9vw important;}
  .mr100{margin-right:10vw important;} .mr110{margin-right:11vw important;} .mr120{margin-right:12vw important;}
  .mb10{margin-bottom:1vw important;} .mb20{margin-bottom:2vw important;} .mb30{margin-bottom:3vw important;} .mb40{margin-bottom:4vw important;}
  .mb50{margin-bottom:5vw important;} .mb60{margin-bottom:6vw important;} .mb70{margin-bottom:7vw important;} .mb80{margin-bottom:8vw important;} .mb90{margin-bottom:9vw important;}
  .mb100{margin-bottom:10vw important;} .mb110{margin-bottom:11vw important;} .mb120{margin-bottom:12vw important;}
  .ml10{margin-left:1vw important;} .ml20{margin-left:2vw important;} .ml30{margin-left:3vw important;} .ml40{margin-left:4vw important;}
  .ml50{margin-left:5vw important;} .ml60{margin-left:6vw important;} .ml70{margin-left:7vw important;} .ml80{margin-left:8vw important;} .ml90{margin-left:9vw important;}
  .ml100{margin-left:10vw important;} .ml110{margin-left:11vw important;} .ml120{margin-left:12vw important;}
}
/* layout - margin 0.5-2.0(step0.5em) */
.mt5em{margin-top:0.5em;} .mr5em{margin-right:0.5em;} .mb5em{margin-bottom:0.5em;} .ml5em{margin-left:0.5em;}
.mt10em{margin-top:1.0em;} .mr10em{margin-right:1.0em;} .mb10em{margin-bottom:1.0em;} .ml10em{margin-left:1.0em;}
.mt15em{margin-top:1.5em;} .mr15em{margin-right:1.5em;} .mb15em{margin-bottom:1.5em;} .ml15em{margin-left:1.5em;}
.mt20em{margin-top:2.0em;} .mr20em{margin-right:2.0em;} .mb20em{margin-bottom:2.0em;} .ml20em{margin-left:2.0em;}
/* color */
.wt{color:#fff;}/*white*/
.bg-wt{background-color:rgba(255,255,255,1.0);}
.bk{color:#000;}/*black*/
.bg-bk{background-color:rgba(0,0,0,1.0);}
.gy{color#efefef;}/*gray*/
.bg-gy{background-color:rgba(239,239,239,1.0);}
.rd{color:#f00000;}/*red*/
.bg-rd{background-color:rgba(240,0,0,1.0);}
.bl{color:#0000f0;}/*blue*/
.bg-bl{background-color:rgba(0,0,240,1.0);}

/* animate
--------------------------------------- */
/* fade in */
.fadeIn,
.fadeIn2up,
.fadeIn2down,
.fadeIn2right,
.fadeIn2left{
  opacity:0;
    -webkit-transition:all 800ms;
       -moz-transition:all 800ms;
        -ms-transition:all 800ms;
         -o-transition:all 800ms;
            transition:all 800ms;
  -webkit-transition-delay:100ms;
     -moz-transition-delay:100ms;
      -ms-transition-delay:100ms;
       -o-transition-delay:100ms;
          transition-delay:100ms;
/*transition-timing-function:ease-in-out;*/
}
.fadeIn2up{
  -webkit-transform:translateY(50px);
      -ms-transform:translateY(50px);
          transform:translateY(50px);
}
.fadeIn2down{
  -webkit-transform:translateY(-50px);
      -ms-transform:translateY(-50px);
          transform:translateY(-50px);
}
.fadeIn2right{
  -webkit-transform:translateX(-80px);
      -ms-transform:translateX(-80px);
          transform:translateX(-80px);
}
.fadeIn2left{
  -webkit-transform:translateX(80px);
      -ms-transform:translateX(80px);
          transform:translateX(80px);
}
.fadeIn.show{opacity:1;}
.fadeIn2up.show,
.fadeIn2down.show{
  opacity:1;
  -webkit-transform:translateY(0);
      -ms-transform:translateY(0);
          transform:translateY(0);
}
.fadeIn2right.show,
.fadeIn2left.show{
  opacity:1;
  -webkit-transform:translateX(0);
      -ms-transform:translateX(0);
          transform:translateX(0);
}


/* duration */
.time0{transition:0ms !important;}
.time1{transition:100ms !important;}
.time2{transition:200ms !important;}
.time3{transition:300ms !important;}
.time4{transition:400ms !important;}
.time5{transition:500ms !important;}
.time6{transition:600ms !important;}
.time7{transition:700ms !important;}
.time8{transition:800ms !important;}/*default*/
.time9{transition:900ms !important;}
.time10{transition:1000ms !important;}
.time12{transition:1200ms !important;}
.time15{transition:1500ms !important;}
.time18{transition:1800ms !important;}
.time20{transition:2000ms !important;}
/* delay */
.wait0{transition-delay:10ms !important;}
.wait1{transition-delay:100ms !important;}/*default*/
.wait2{transition-delay:200ms !important;}
.wait3{transition-delay:300ms !important;}
.wait4{transition-delay:400ms !important;}
.wait5{transition-delay:500ms !important;}
.wait6{transition-delay:600ms !important;}
.wait7{transition-delay:700ms !important;}
.wait8{transition-delay:800ms !important;}
.wait9{transition-delay:900ms !important;}
.wait10{transition-delay:1000ms !important;}
.wait12{transition-delay:1200ms !important;}
.wait15{transition-delay:1500ms !important;}
.wait18{transition-delay:1800ms !important;}
.wait20{transition-delay:2000ms !important;}

/* 常に上下 */
.updown-loop{animation:updown 800ms ease-in-out 300ms infinite alternate;}
@keyframes updown{
  from{transform:translateX(0) translateY(0);}
  to{transform:translateX(0) translateY(10px);}
}