@charset "utf-8";

/*Mobile First
/*=================*/
/* basic 
/* header
/* footer 
/* top page
/* lower page
/* 
/* tablet
/* PC
/*=================*/

@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css");
@media screen and (min-width: 768px) {} /*tablet*/
@media screen and (min-width: 1024px) {} /*PC*/

/*=================*/
/* basic
/*=================*/

:root {
  --planslightcolor: #F4FBFF;
  --plansbasiccolor: #E6FAFF;
  --plansprocolor: #E7F2FD; }

.bg-danger{
  background-color: #C51722;
}

.border-danger{
  border-color: #C51722 !important;
}

body{
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

body::-webkit-scrollbar{
  display:none;
}

iframe{
  width: 100%;
  aspect-ratio: 16/9;
}

main{
  flex-grow: 1;
}
.text_maincolor{
  color: #4522C3;
}
.border_maincolor{
  border-left:3px solid #4522C3;
}
.wrapper{
	width: calc( 100% - 3rem );
  margin: 0 auto;
} 

.wrap{
	display: flex;
} 

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

.wrap > *{
	width: 100%;
}

@media (min-width: 768px) {
  .wrapper{
    max-width: 720px;
  }
}

@media (min-width: 1024px) {
  .wrapper{
    max-width: 1000px;
  }
}

@media (min-width: 1200px) {
  .wrapper{
    max-width: 1140px;
  }
}

h1{
  font-size: 2.4rem;
}

h2{
  font-size: 2.0rem;
}

h3{
  font-size: 1.6rem;
}

h4{
  font-size: 1.2rem;
}

h5, h6, p{
  line-height: 1.7;
  margin: 0;
}

.bold{
  font-weight: 700;
}

a{
  color: black;
  text-decoration: none;
}

/*img{
  display: block;
  width: 100%;
  height: auto;
}*/

img{
  max-width: 100%;
  height: auto;
  vertical-align: middle;
  font-style: italic;
  background-repeat: no-repeat;
  background-size: cover;
  shape-margin: 0.75rem;
}

ul , ol , li{
  list-style: none;
  padding: 0;
  margin: 0;
}

.tehaniipoddo_css{
  position: absolute;
  left: -9999px;
}

.base{
  position: relative;
}

a.text_link{
	color: #4522c3;
	padding-bottom: 1px;
	background: linear-gradient(#4522c3,#4522c3) 0 100%/100% 1px no-repeat;
	background-position: 100% 100%;
	transition: background .4s cubic-bezier(.4,.1,.3,1);
	text-decoration: none;
}
a.text_link:hover{
	background-size: 0 1px;
}


/*===20230630追加===*/

.video_style{
	position: absolute;
	top: 50%;
	left: 50%;
	object-fit: cover;
	transform: translate(-50%, -50%);
	width: 100%;
	height: 100%;
  filter: brightness(1.1);
}

.kv-box{
	aspect-ratio: 4 / 3;
}

.kv-box::before {
	width: 100%;
	height: 100%;
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0.2;
	background-image: url(/static/img/movie_pt.png);
	background-size: 3px auto;
	z-index: 1;
}

.mr-auto{
  margin-right: auto !important;
}

.ml-auto{
  margin-left: auto !important;
}


@media (min-width: 1024px) {
  .del{
    display: none !important;
  }
}

@media (max-width: 1024px) {
  .add{
    display: none !important;
  }
}

/*=================*/
/* header
/*=================*/
.header{
  min-height: 4rem;
  position: fixed;
  top: 0;
  z-index: 999;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 17%);
}

.header .navbar-brand{
  max-width: 128px;
}

.header .navbar{
  padding: 0.6rem;
  min-height: 4rem;
  align-items: start;
}

.header .navbar .nav-link{
  padding: 1rem 0;
}

.nav-link:focus, .nav-link:hover{
	color:#4522c3;
}

.navbar-nav .nav-link.active, .navbar-nav .nav-link.show{
	color:#4522c3;
}

.header .btn-head{
  color: #000;
  font-size: 0.825rem;
  border: #000 solid 1px;
  border-radius: 50px;
  background-color: #FFF;
  max-width: none;
  white-space: nowrap;
  margin-top: 0%;
}

.header li a{
  font-size: 0.825rem;
  font-weight: 700;
}

.dropdown-item{
  padding: 0.8rem 1rem;
  padding-right: 3rem;
}


@media (min-width: 1000px) {
  .header .navbar .nav-link{
    padding: 0 .4rem;
  }
}

@media (min-width: 1200px) {
  .header .navbar .nav-link{
    padding: 0 .7rem;
  }
}

@media (max-width: 1000px) {
  .header .navbar-nav li{
    display: block;
    width: 100%;
  }
}

/*=================*/
/* footer
/*=================*/
.footer > img{
  max-width: 128px;
}

.footer > p{
  font-size: 10px;
}

.footer a{
  font-size: .75rem;
}

.footer .sns li{
  max-width: 50px;
  margin: 0 4px;
}

/*=================*/
/* top page
/*=================*/

h1{
  line-height: 1.4;
  display: inline-block;
  margin: 0;
}

h2{
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.7;
}

h3{
  margin: 0;
  line-height: 1;
  font-weight: 700;
}

.btn{
  display: block;
  color: #FFF;
  font-weight: 700;
  background-color: #4522c3;
  border-radius: 50px;
  padding: 0.4rem 1.6rem;
  margin-top: 1rem;
  max-width: fit-content;
}

.btn:hover{
  color: #FFF;
  background-color: #17045A;
}

.btn_back{
  display: block;
  color: #FFF;
  font-weight: 700;
  background-color: #666;
  border-radius: 50px;
  padding: 0.4rem 1.6rem;
  margin-top: 1rem;
  max-width: fit-content;
}

.btn_back:hover{
  background-color: #444;
}

.btn:disabled{
	color: var(--bs-btn-disabled-color);
    pointer-events: none;
    background-color: #9d9d9d;
    border-color: #9d9d9d;
    opacity: var(--bs-btn-disabled-opacity);
}

.video-image{
  margin-top: 4rem;
}

.video-image .kv-title-text{
  position: absolute;
  bottom: 10%;
  right: 10%;
  max-width: 80%;
  z-index: 13;
}

.bg-gradation{
  background: rgb(255,255,255);
  background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 70%, rgba(234,238,242,1) 100%);
}
.bg-bgrd {
  background: linear-gradient(45deg, #181FCE, #00AEF0, #7A47CF);
  background-size: 600% 600%;
  animation: GradientBackground 12s ease infinite; 
}

.bg-products-top{
	background: #08050A url(../img/product_bg0326.png) no-repeat center center;
}
span.blake_text{
	display: inline-block;
}

.bg-gray{
  background-color: #EAEEF2;
}

.bg-purple2{
  background-color: #DCD3FD;
}


.bg_planlight {
  background: var(--planslightcolor) !important; }

.bg_planbasic {
  background: var(--plansbasiccolor) !important; }

.bg_planpro {
  background: var(--plansprocolor) !important; }

.bg-darkgray{
  background-color: #565E67;
}

.bg-lightpurple{
  background-color: #F7F5FF;
}

.bg-muted{
  background-color: #2D3135;
}

.fadeIn {
  /* 最初は非表示 */
  opacity: 0.2;
  transform: translateY(30px);
  transition: opacity 1s, transform 1s;
}
/* フェードイン時に入るクラス */
.is-fadein {
  opacity: 1;
  transform: translateX(0);
}

.font_size24 {
  font-size: 1.5rem; }
.text_color_plans {
    color: #6D8396; }
.font_size10 {font-size: .625rem; }
.font_size12 {font-size: .75rem; }
.font_size14 {font-size: .875rem; }
.font_size16 {font-size: 1rem; }
.font_size18 {font-size: 1.125rem; }
.font_size24 {font-size: 1.5rem; }

.grid-2,
.grid-3,
.grid-4{
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  align-items: center;
  margin-bottom: 1rem;
}

.summary,
.description,
.family,
.family-movie,
.case,
.news,
.partner,
.cta,
.future_area {
  padding: 4rem 0;
}

.summary .btn{
  margin: 0 auto;
}

.summary .grid-2 > img{
  padding-right: 0rem;
}

.summary .grid-2 > div img{
  margin: 2rem 0;
}

.description div > div img:first-child{
  width: 70%;
  max-width: 320px;
  margin-bottom: 1.4rem;
}

.box__family{
  height: 100%;
  border: #CBCBCB solid 1px;
  border-radius: 1rem;
  background-color: #FFF;
  display: flex;
  flex-direction: column;
}

.box__family img{
  padding: 1rem 3.6rem 0.4rem 3.6rem;
}

.box__family hr{
  color: #CBCBCB;
  margin: 0;
}

.box__family > div{
  padding: 1.6rem;
}

.box__family > div > span{
  display: block;
  font-weight: 700;
  margin-bottom: 0.6rem;
}

.box__family > div > .btn,
.box__case .btn{
  margin: 1rem auto 0;
}

.box__case{
  height: 100%;
  background-color: #FFF;
  box-shadow: 0 0 14px rgba(0, 0, 0, 17%);
}

.box__case > img{
  min-height: 230px;
  object-fit: cover;
}

.box__case > div{
  padding: 1.6rem;
}

.box__case > div > span{
  font-size: 0.875rem;
  display: block;
  width: fit-content;
  font-weight: 700;
  padding: 5px 1rem;
  border: #000 solid 2px;
  position: absolute;
  left: 1.6rem;
  top: 0;
  transform: translateY(-50%);
  background-color: #FFF;
}

.box__case > div > img{
  margin-bottom: 1rem;
}

.box__case > div > hr{
  border: #CBCBCB dotted 1px;
}

.box__case > div > h3,
.box__case > div > hr + p > span{
  font-size: 1rem;
  margin-bottom: 1rem;
  font-weight: 700;
}

.news.detail .wrapper{
  max-width: 860px !important;
}

.news:not(.detail) ul{
  margin: 3rem 0;
}

.news:not(.detail) ul li{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 1.4rem 0;
  margin-bottom: .875rem;
  background: #fff;
  border-radius: 1rem;
  padding: 1rem;
  transition: all .6s cubic-bezier(0.785, 0.135, 0.15, 0.86) 0s;
}
.news:not(.detail) ul li:hover{
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

.news:not(.detail) ul li:last-child{
  margin-bottom: 0;
}

.news ul li span{
  width: 100px;
  margin-right: 1.4rem;
}

.news ul li span:nth-child(2){
  width: 124px;
}

.news ul li a{
  display: block;
  width: 100%;
  font-weight: 700;
  margin-top: 0.5rem;
  height: auto;
}

@media screen and (min-width: 768px) {
  .news ul li{
    align-items: flex-start;
  }

  .news ul li a{
    flex: 1;
    width: inherit;
    margin-top: 0;
  }
}

.partner h2{
  margin-bottom: 1rem;
}

.partner a img{
  padding: 1rem;
  background-color: #FFF;
  border-radius: 8px;
}

.partner a img{
  transition: 0.2s ease;
}

.partner a:hover img{
  box-shadow: 0 0 14px rgba(0, 0, 0, 17%);
}

.cta .btn{
  width: 100%;
  max-width: 640px;
  background-color: #565E67;
  border: #FFF solid 1px;
}

.cta .btn:hover{
  color: #000;
  background-color: #FFF;
}

.cta2 .btn{
  width: 100%;
  max-width: 640px;
  background-color: #4622c4;
  border: #FFF solid 1px;
}

.cta2 .btn:hover{
  color: #fff;
  background-color: #7f03b3;
}

.cta h2{
  margin-bottom: 1rem;
}

/*=================*/
/* lower page
/*=================*/

.title{
  margin-top: 4rem;
  padding: 2rem 0 2rem;
}

.title h2{
  font-size: 1.8rem;
}

.title img{
  max-width: 260px;
}

.title span{
  font-size: 1rem;
  font-weight: 700;
}

.title p{
  display: block;
  margin-top: 1.4rem;
}

.family-summary,
.movie,
.tech,
.release-plan,
.partner,
.reason,
.merit,
.program,
.partner-list,
.intro,
.future-cont{
  padding: 4rem 0;
}

.future-cont .wrapper > picture > img{
  width: 100vw;
  box-sizing: border-box;
  margin-left: calc( 50% - 50vw );
}


.family-summary .wrapper > img{
  width: 100vw;
  box-sizing: border-box;
  margin-left: calc( 50% - 50vw );
}

.family-summary h3{
  font-size: 1.4rem;
  margin: 4rem 0 1.6rem;
  line-height: 1.5;
}

.family-summary .grid-2 img{
  width: 80%;
  height: 90%;
  object-fit: contain;
  margin: auto auto 0;
}

.family-summary .grid-2 > div > ul{
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 1.4rem;
}

.family-summary .grid-2 > div > ul li img{
  display: inline-block;
  max-width: 34px;
  height: auto;
  margin-bottom: 0.4rem;
}

.family-summary .grid-2 > div > ul li h4{
  display: inline-block;
  font-size: 1rem;
  font-weight: 700;
  padding-left: 2.4rem;
  position: relative;
}

.family-summary .grid-2 > div > ul li:nth-child(1) h4::before,
.family-summary .grid-2 > div > ul li:nth-child(2) h4::before,
.family-summary .grid-2 > div > ul li:nth-child(3) h4::before,
.family-summary .grid-2 > div > ul li:nth-child(4) h4::before,
.family-summary .grid-2 > div > ul li:nth-child(5) h4::before,
.family-summary .grid-2 > div > ul li:nth-child(6) h4::before{
  display: block;
  content: "";
  position: absolute;
  left: 0;
  top: -7px;
  width: 32px;
  height: 32px;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

.family-summary .grid-2 > div > ul li:nth-child(1) h4::before{
  background-image: url(/static/img/icon__recognition-1.png);
}

.family-summary .grid-2 > div > ul li:nth-child(2) h4::before{
  background-image: url(/static/img/icon__recognition-2.png);
}

.family-summary .grid-2 > div > ul li:nth-child(3) h4::before{
  background-image: url(/static/img/icon__recognition-3.png);
}

.family-summary .grid-2 > div > ul li:nth-child(4) h4::before{
  background-image: url(/static/img/icon__recognition-4.png);
}

.family-summary .grid-2 > div > ul li:nth-child(5) h4::before{
  background-image: url(/static/img/icon__recognition-5.png);
}

.family-summary .grid-2 > div > ul li:nth-child(6) h4::before{
  background-image: url(/static/img/icon__recognition-6.png);
}

.movie iframe{
  display: block;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
}

.tech .wrapper > span{
  font-size: 1.6rem;
  font-weight: 700;
}

.tech .wrapper > h2 img{
  width: 100%;
  max-width: 700px;
  margin: 1.6rem 0;
}

.tech .wrapper > ul{
  margin-top: 4rem;
}

.tech .wrapper > ul h3{
  color: #FFF;
  font-size: 1.4rem;
  background-color: #2D3135;
  padding: 1rem;
  margin-top: 2rem;
}

.tech .wrapper > ul span{
  display: block;
  font-weight: 700;
  margin: 1rem 0 0.6rem;
}

.tech .wrapper > div span,
.release-plan .wrapper > div:last-child span,
.release-plan .wrapper > div:last-child span:nth-child(2){
  display: block;
  font-size: 1.4rem;
  font-weight: 700;
  margin: 3rem 0 1rem;
}


.tech-frame img{
  height: auto;
  object-fit: contain;
}

.release-plan .wrapper > div:last-child span:nth-child(2){
  font-size: 1rem;
  margin: 0 0 1rem 0;
}

.release-plan .wrapper > span{
  display: inline-block;
  color: #FFF;
  font-weight: 700;
  background-color: #2D3135;
  padding: 0.6rem 1rem;
  margin-bottom: 1rem;
}

.release-plan .grid{
  display: grid;
  gap: 1.6rem;
  margin: 2rem 0;
  align-items: center;
}

.release-plan .grid span{
  font-size: 1.2rem;
  font-weight: 700;
}

.release-plan .grid > div img{
  width: auto;
  max-width: 100%;
  max-height: 90px;
  margin: 1rem 0;
}

.partner-summary .wrapper > img{
  width: 100vw;
  box-sizing: border-box;
  margin-left: calc( 50% - 50vw );
}

.partner-summary .grid{
  display: grid;
  gap: 1rem;
  padding: 4rem 0;
}

.partner-summary .grid img{
  padding: 2rem;
}

.partner-summary .grid h2{
  margin-bottom: 2rem;
}

.partner-summary .btn{
  width: fit-content;
  max-width: none;
}

.box__partner{
  border: #E2E8EC solid 1px;
  border-radius: 8px;
  background-color: #FFF;
}

.reason h2,
.merit h2,
.program h2,
.partner-list h2{
  margin-bottom: 2rem;
}

.reason ul,
.merit ul{
  display: grid;
  gap: 1.4rem;
}

.reason ul li h3{
  color: #4522C3;
  font-size: 1.2rem;
  margin-bottom: 0.6rem;
  padding-bottom: 0.6rem;
  border-bottom: #E2E8EC solid 1px;
}

.merit ul img{
  margin-bottom: 1.2rem;
}

.merit ul h3{
  font-size: 1rem;
  line-height: 1.4;
  text-align: center;
}

.program .wrapper > div h3{
  color: #4522C3;
  font-size: 1.2rem;
  margin: 4rem 0 1.6rem;
  text-align: center;
}

.program .wrapper > div span{
  font-weight: 700;
  display: block;
  text-align: center;
  margin-bottom: 2rem;
}

.program .wrapper > .grid-2 div div{
  border: #E2E8EC solid 1px;
  border-radius: 8px;
  background-color: #FFF;
}

.program .wrapper > div hr{
  border: #E2E8EC solid 1px;
}

.program .wrapper > div img{
  max-width: 600px;
  margin: 0 auto;
  padding: 2rem;
}

.program .wrapper > div > div p{
  padding: 0 2rem;
}

.program .wrapper li{
  background-color: #F4F4F4;
  padding: 1.4rem;
  border-radius: 8px;
  height: 100%;
}

.program .wrapper li h4{
  font-weight: 700;
  padding-left: 1rem;
  border-left: #4522c3 solid 2px;
}

.program .wrapper li p{
  margin-bottom: 0;
}

#tabcontrol{
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 1rem;
  border-bottom: #4522C3 solid 1px;
}

#tabcontrol a{
  font-size: 0.825rem;
  padding: 0.8rem;
  font-weight: 700;
  text-align: center;
  border-radius: 0.75em 0.75em 0 0;
  background-color: #DFE5E9;
  position: relative;
}

#tabcontrol a.open{
  color: #FFF;
  background-color: #4522C3;
}

#tabbody ul{
  position: relative;
  z-index: 0;
}

#tabbody ul li{
  display: grid;
  gap: 1rem;
  align-items: center;
  padding: 2.4rem 0;
  border-bottom: #E2E8EC solid 1px;
}

#tabbody ul li img{
  padding: 2rem;
}

#tabbody ul li p,
#tabbody ul li a{
  padding: 0.6rem 0 0.6rem 4rem;
  position: relative;
}

#tabbody ul li p::before,
#tabbody ul li a::before{
  position: absolute;
  content: attr(data-sub);
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  color: #FFF;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  min-width: 52px;
  background-color: #565E67;
  padding: 4px;
  border-radius: 8px;
}

.top-image__lower{
  margin-top: 4rem;
  background-color: #000;
  height: fit-content;
}

.top-image__lower img{
  width: 100%;
  height: auto;
  max-height: 500px;
  margin: 0 auto;
  object-fit: cover ;
}

.case.detail > div > div{
  background-color: #FFF;
  padding: 6%;
}

.case.detail > div > div hr{
  border: #000 dotted 1px;
}

.case.detail > div > div img{
  object-fit: contain;
}

.case-img{
  width: 100%;
  max-height: 360px;
  object-fit: contain;
  background-color: #EAEEF2;
}

.case.detail table th,
.case.detail table td{
  border: #FFF solid 1px;
  background-color: #EAEEF2;
  text-align: center;
  vertical-align: middle;
  padding: .3rem;
}

.case.detail table th{
  background-color: #DDE0E3;
}

.news.detail > div > div{
  margin-top: 4rem;
  padding-top: 4rem;
}

.news.detail > div > div img{
  width: 100%;
  height: auto;
  object-fit: contain;
}

.news.detail > div > div .btn{
  color: #000;
  font-size: 0.825rem;
  border: #000 solid 1px;
  border-radius: 0px;
  background-color: #FFF;
  max-width: 400px;
  margin: 2.5rem auto 0;
  /* white-space: nowrap; */
}

.case-listback-btn{
  color: #000;
  font-size: 0.825rem;
  border: #000 solid 1px;
  border-radius: 0px;
  background-color: #FFF;
  max-width: 400px;
  margin: 2.5rem auto 0;
  padding: 0.4rem 1.6rem;
  /* white-space: nowrap; */
  display: block;
  font-weight: 700;
  text-align: center;
}

.case-list-txt{
  min-height: 82px;
}

.main_box {
  display: block;
  height: 112vw;
  position: relative;
  z-index: -100000;
  overflow: hidden;
}

.title_kaopassqr {
  position: absolute;
  left: 40%;
  bottom: 50%;
  transform: translate(-20%, 100%);
  z-index: 100000;
}

.title_auth{
  position: absolute;
  bottom: 20%;
  left: 10%;
  transform: translateY(50%);
  z-index: 100000;
  width: 70%; 
}

.strongbox {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #F4F4F4;
  width: 100%;
  min-height: 165px;
  border-radius: 1.2rem;
  border: 2px solid #29A8C2; }

  .table_cel_size tr th:nth-of-type(1) {
    width: 15%; }
  
  .table_cel_size tr th {
    padding: 0 1rem;
    white-space: nowrap; }
  
  .table_cel_size tr td {
    width: 17%;
    padding: 0 1rem;
    white-space: nowrap; }
  
  .table_cel_size tr td:nth-of-type(2) {
    background-color: var(--planslightcolor); }
  
  .table_cel_size tr td:nth-of-type(3) {
    background-color: var(--plansbasiccolor); }
  
  .table_cel_size tr td:nth-of-type(4) {
    background-color: var(--plansprocolor); }

  .rounded-4{
    border-radius: 1rem !important;}

.br_block_sp{display: block;}
.br_none_sp{display: none;}

.bg-topfuture{
    background: url("/static/img/future__top-image-bg.png") #000;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
 }
 
 .bg-future-sc{
    background: url("/static/img/img_sc_bg_sp.png");
    background-repeat: no-repeat;
    background-position: center top;
    background-size: contain;
    /*height: calc( 100vw * 0.3539 );*/
 }
.smartcity-cont2{
	background: linear-gradient(180deg, #000, #11022b, #000);;
}
.stickys{
	position: sticky;
	top: 64px;
	left: 0;
}
.stickys-img{
  position: relative;
  z-index: -999;
}


.sc-cont-textbox{ padding-top: calc( 100vw * 0.4 );}
.sc-subtitle{background:linear-gradient(45deg, #4522C3, #BC3464); }
.stickys-movie{padding-top: inherit; padding-bottom: inherit; margin-top:-3rem; }
.text-glow {
  text-shadow: 0 0 20px rgb(192 219 255 / 75%), 0 0 20px rgb(65 120 255 / 24%);
  animation-name: glowpt;
  animation-duration: 3s;
  animation-iteration-count: infinite;
}

@keyframes glowpt {
  0% {
    text-shadow: 0 0 1px rgb(192 219 255 / 75%), 0 0 8px rgb(65 120 255 / 24%);
  }
  50% {
    text-shadow: 0 0 20px rgb(192 219 255 / 50%), 0 0 20px rgb(65 120 255 / 10%);
  }
  100% {
    text-shadow: 0 0 1px rgb(192 219 255 / 75%), 0 0 8px rgb(65 120 255 / 24%);
  }
}

/*=================*/
/* tablet
/*=================*/
@media screen and (min-width: 768px) {
  .summary,
  .description,
  .family,
  .family-movie,
  .case,
  .news,
  .partner,
  .cta, .cta2,
  .family-summary,
  .movie,
  .tech,
  .release-plan,
  .partner,
  .reason,
  .merit,
  .program,
  .partner-list,
  .bg-topfuture,
  .intro,
  .future-cont{
    padding: 6rem 0;
  }

  .bg-summary{
    background-image: url(/static/img/bg-summary.png);
    background-repeat: no-repeat;
    background-size: 241%;
    background-position: right top;
    background-size: cover;
  }
  

  .video-image .kv-title-text{
    max-width: 60%;
    width: 40vw;
  }

  .title{
    padding: 4rem 0 3rem;
  }

  .grid-2,
  .partner .list,
  .reason ul{
    grid-template-columns: repeat(2,1fr);
  }

  .grid-3,
  .merit ul{
    grid-template-columns: repeat(3,1fr);
  }

  .grid-4{
    grid-template-columns: repeat(4,1fr);
  }

  .summary .btn{
    margin-left: 0;
  }

  .summary .grid-2 > div{
    grid-column: 2/3;
    grid-row: 1/2;
  }

  .box__family > div > .btn,
  .box__case .btn{
    margin-left: auto;
  }

  .release-plan .grid{
    grid-template-columns: 4fr 6fr;
  }

  .release-plan .grid.reverse{
    grid-template-columns: 6fr 4fr;
  }

  .release-plan .grid.reverse > img{
    grid-column: 2/3;
  }

  .release-plan .grid.reverse > div{
    grid-column: 1/2;
    grid-row: 1/2;
  }

  .partner-summary .grid{
    display: grid;
    gap: 1rem;
    grid-template-columns: 2fr 1fr;
    align-items: center;
  }

  .partner-summary .grid img{
    grid-column: 2/3;
    grid-row: 1/2;
    padding: 0;
  }

  .partner-summary .grid div{
    grid-column: 1/2;
    grid-row: 1/2;
  }

  #tabbody ul li{
    grid-template-columns: 1fr 2fr;
  }

  .main_box {
    height: 66vw;
  }

  .title_auth{
    position: absolute;
    bottom: 40%;
    left: 10%;
    transform: translateY(50%);
    z-index: 100000;
    width: 45%;
  }
  .kv-box{
	  position: relative;
	  aspect-ratio: 16 / 9;
	}
.bg-future-sc{
    background: url("/static/img/img_sc_bg.png");
    background-repeat: no-repeat;
    background-position: center top;
    background-size: contain;
    /*height: calc( 100vw * 0.3539 );*/
 }
 .sc-cont-textbox{ padding-top: calc( 100vw * 0.2 );}
 .stickys-movie{padding-top: 8rem; padding-bottom: 8rem;}
}

/*=================*/
/* PC
/*=================*/
@media screen and (min-width: 1024px) {
  .grid-3,
  .reason ul{
    grid-template-columns: repeat(3,1fr) !important;
  }

  .grid-4{
    grid-template-columns: repeat(4,1fr) !important;
  }
  .main_box {
    height: 47vw;
  }
  .summary .grid-2 > img{
  	padding-right: 3rem;
	}
  .title_kaopassqr {
    position: absolute;
    bottom: 50%;
    left: 40%;
    transform: translateY(50%);
    z-index: 100000; 
  }
  .title_auth{
    position: absolute;
    bottom: 50%;
    left: 17%;
    transform: translateY(50%);
    z-index: 100000;
    width: 35%; 
  }
  .br_block_sp{display: none;}
  .br_none_sp{display: block;}
  .bg-future-sc{
    background: url("/static/img/img_sc_bg.png");
    background-repeat: no-repeat;
    background-position: center top;
    background-size: contain;
    /*height: calc( 100vw * 0.3539 );*/
 }
 .sc-cont-textbox{ padding-top: calc( 100vw * 0.2 );}
 .stickys-movie{padding-top: 12rem; padding-bottom: 12rem;}

}

/*=================*/
/* OpenAimation
/*=================*/

/******************** animation setting ********************/
@-webkit-keyframes loadingAnim {
  0% {
    width: 0; 
  }
  100% {
    width: 100%;
    -webkit-transform: translate(100%);
    transform: translate(100%); 
  } 
}

@keyframes loadingAnim {
  0% {
    width: 0; 
  }
  100% {
    width: 100%;
    -webkit-transform: translate(100%);
    transform: translate(100%); 
  } 
}

@-webkit-keyframes loadingAnim_text {
  0% {
    opacity: 1;
    color: #4522c3; 
  }
  50% {
    color: #2e1782; 
  }
  100% {
    opacity: .5;
    color: #fff; 
  } 
}

@keyframes loadingAnim_text {
  0% {
    opacity: 1;
    color: #4522c3; 
  }
  50% {
    color: #2e1782; 
  }
  100% {
    opacity: .5;
    color: #fff; 
  } 
}

/******************** settings ********************/
/******************** loading effects ********************/
.loadingAnim {
  position: fixed;
  z-index: 1000000;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  text-align: center; 
}

.loadingAnim_line {
  line-height: 1;
  position: fixed;
  z-index: 100;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: inline-block;
  overflow: hidden;
  width: 180px;
  height: 1.25em;
  margin: auto;
  transition: all 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86) 0s;
  transition-delay: .6s;
  text-align: center; 
}

.loadingAnim_line:after {
  position: absolute;
  z-index: 100;
  top: 0;
  bottom: 0;
  left: 0;
  display: block;
  width: 0;
  height: 10%;
  margin: auto  auto auto 0;
  content: ' ';
  -webkit-animation: loadingAnim 2s ease-in-out .1s infinite normal backwards;
  animation: loadingAnim 2s ease-in-out .1s infinite normal backwards;
  background-color: #4522c3; 
}

.loadingAnim_line:before {
  font-size: 1.25em;
  font-weight: 300;
  font-style: normal;
  line-height: 1;
  display: block;
  content: 'LOADING';
  -webkit-animation: loadingAnim_text 1s ease .1s infinite alternate both;
  animation: loadingAnim_text 1s ease .1s infinite alternate both;
  letter-spacing: .4em;
  color: #FFF; 
}

.loaded .loadingAnim_line {
  overflow: hidden;
  height: 0; 
}

.loaded .loadingAnim_line:after {
  -webkit-animation: none;
  animation: none; 
}

.loaded .loadingAnim_line:before {
  -webkit-animation: none;
  animation: none;
  content: 'COMPLETE'; 
}

.loadingAnim:before, .loadingAnim:after {
  line-height: 1;
  position: fixed;
  z-index: 99;
  right: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 50%;
  margin-right: auto;
  margin-left: auto;
  content: ' ';
  transition: all 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86) 0s;
  transition-delay: .7s;
  background-color: #000; 
}

.loadingAnim:before {
  top: 0; 
}

.loadingAnim:after {
  bottom: 0; 
}

.loaded .loadingAnim:before {
  height: 0;
  -webkit-transform: translateY(-1%);
  -ms-transform: translateY(-1%);
  transform: translateY(-1%); 
}

.loaded .loadingAnim:after {
  height: 0;
  -webkit-transform: translateY(1%);
  -ms-transform: translateY(1%);
  transform: translateY(1%); 
}

.img-rounded {
    border-radius: 8px; /* Material Small Shape */
}

/* ベースのトランジション設定 */
.img-hover-shadow {
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

/* ホバー時にElevation 4のシャドウを付与し、Y軸方向に浮き上げ */
.img-hover-shadow:hover {
  box-shadow:
    rgba(0, 0, 0, 0.2) 0px 5px 5px -3px,
    rgba(0, 0, 0, 0.14) 0px 8px 10px 1px,
    rgba(0, 0, 0, 0.12) 0px 3px 14px 2px; /* Material Elevation 4 :contentReference[oaicite:0]{index=0} */
  transform: translateY(-4px);
}

/******************** 2025/12_sufix追記 ********************/
.c-box--cta {
  padding: 3rem 0;
  color: #fff;
  background: #565e67;
  text-align: center;
}
.c-box--cta .c-btn {
  color: #fff;
  border: solid 1px;
  background: #565e67;
}
.c-box__heading {
  margin: 0;
  padding: 0 0 1rem;
}
.c-btn {
  margin: auto;
  padding: 1.5rem 1.6rem;
  width: 100%;
  max-width: 20em;
  display: block;
  font-size: 1.2rem;
  font-weight: 700;
  border-radius: 50px;
  transition: .1s all ease-in-out;
}
@media screen and (min-width: 992px) {
  .c-btn:hover {
    opacity: .8;
  }
  .c-btn:active {
    opacity: .6;
  }
}
@media (min-width: 1200px) {
  .c-btn {
    font-size: 1.4rem;
  }
}