.center{
  text-align: center;
}
.under #headerNav.default svg .exsior_logo_fill{
  fill:var(--primaryBlk);
}
.under #headerNav.default .headerCV .text-wrap{
  color: var(--primaryBlk);
}
.under #headerNav.default svg .exsior_logo_stroke,
.under .headerCV svg path, .under .headerCV svg rect, .under .headerCV svg circle{
  stroke: var(--primaryBlk);
}
.under #headerNav.default #navBtn .line{
  background: var(--primaryBlk);
}
.under #headerNav{
  background: var(--colorWht);
}
.under .wrapper{
  padding-top: 13.3rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
section.contents{
  aspect-ratio: 1.414 / 1;
  margin-bottom: 0.5rem;
}
section.contents.head{
  aspect-ratio: 16 / 6.5;
  margin-bottom: 0.5rem;
}
section.contents:last-of-type{
  margin-bottom: 0;
}
section.contents.top{
margin-top: 4.5rem;
}
section.contents .inner{
  height: 100%;
  position: relative;
}
section.contents .inner picture.banner{
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  z-index: -1;
}
section.contents .inner picture img{
  height: 100%;
  object-fit: cover;
}
section.contents .link.banner{
  width: 100%;
}
section.contents .blocks .link .buttons{
  position: static;
  padding: 0;
  width: max-content;
  gap: 1rem;
}
section.contents .inner .block{
  width: 0;
}
section.contents .inner .block.title{
  width: 100%;
  padding: 1.5rem;
}
section.contents.head .inner .block.title{
  padding: 2rem;
}
.page-title h1{
  font-size: var(--font20);
  font-weight: 500;
  margin-bottom: 0.25em;
}
.page-title h2{
  font-size: var(--font12);
}
section.contents .section-title .title {
  font-weight: 500;
  margin-bottom: 0;
  background: var(--colorWht);
  z-index: 1;
  font-size: var(--font16);
  padding-right: 0.5em;
}
section.contents .section-title::before {
  content: '';
  display: block;
  height: 1px;
  width: calc(100% - 2rem);
  background: var(--primaryBlk);
  position: absolute;
}
section.contents section .inner.sub {
  padding: 3rem;
}
.page-title{
  padding-left: 2rem;
}
#list:not(.post) section.contents.head .page-title{
  padding-left: 0;
}
.sepa.flex{
  flex-flow: column;
  padding-left: 0;
  padding-right: 0;
}
.recent.wrapper{
  padding: 0;
}
section.contents section{
  margin-bottom: 6rem;
}
.post section.contents.head,
.post section.contents{
 aspect-ratio:auto;
}

.under section.other .inner{
  border-top: 1px solid;
  padding-top: 3rem;
  padding-bottom: 2rem;
  flex-flow: column;
}
.under section.other .section-title{
  padding-left:2rem;
  width: 100%;
}
.under section.other .sp-scroll{
width: 100%;
overflow-y: hidden;
}
section.contents picture.center.graphic{
  margin-top: 6rem;
}
section.contents picture.graphic .title{
  text-align: center;
  font-weight: 500;
}
section.contents picture.graphic .title:first-of-type{
  margin-bottom: 3rem;
}
section.contents picture.graphic .title:last-of-type{
  margin-top: 3rem;
}
section.contents picture.graphic .title:first-of-type,
section.contents picture.graphic .title:last-of-type{
  line-height: 1.5;
}

.under.products .other .link.banner{
  width: 80vw;
}
.under.products .other .link.banner picture{
  aspect-ratio: 1 / 1;
}
.under.products .other .link.banner picture img{
  height: 100%;
  object-fit: cover;
}
section.contents.top picture{
  overflow: hidden;
  position: relative;
}
section.contents .intro picture{
  max-width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  margin-bottom: 6rem;
  position: inherit;
  display: block;
}
section.contents.top picture img{
  height: 130%;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}
section.contents section .inner.sub{
  background: var(--colorBaseLGry);
  width: 100%;
  margin: 3rem 0;
}
.flex-wrapper.gap9{
  gap: 9rem;
}
.flex-wrapper.gap6{
  gap: 6rem;
}
.flex-wrapper.gap4{
  gap: 4rem;
}

section.contents section .title.sub{
  margin-bottom: 2rem;
  font-weight: 500;
}
.brand section.contents section .title.sub{
  text-align: center;
}
section.contents section .inner.sub .flex.row .visual.block picture.full{
  width: 100%;
}
section.contents section .inner.sub .flex.row .visual.block picture.full img{
  position: static;
  height: auto;
}
.border.box{
  position: relative;
  border-top: 1px solid;
  border-bottom: 1px solid;
  padding: 1.5rem 0;
  margin: 2rem 0 0 0;
}
.border.box .shoulder{
  position: absolute;
  top: -1em;
}
section.contents section .inner.sub .shoulder{
  background: var(--colorBaseLGry);
  padding-right: 1em;
}
a.link.txt{
  text-decoration: underline;
  line-height: 1;
  margin: 2em 0 0 0;
  display: inline-block;
}
a.link.txt .arrow{
  font-size: 1.25rem;
  vertical-align: middle;
  margin-left: 0.25em;
}
a.link.txt:hover{
  color: var(--colorBlu);
}
.under #feature .inner{
  padding: 0;
}
.under #feature .inner .link .buttons{
  position: absolute;
  width: 100%;
  padding: 1.5rem;
}
.under #feature .inner .blocks{
  gap: 3rem 0.5rem;
  padding-left: 0;
}
.under #feature .inner .blocks .link.banner picture{
  height: auto;
}
.under #feature .cap{
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  margin-top: 1.5rem;
}
.under .anchor.filter a{
  cursor: pointer;
  text-indent: 0.5rem;
  color: var(--colorPointGry);
  position: relative;
  transition: all 0.5s;
}
.under .anchor.filter a.mixitup-control-active{
  color: var(--colorBlu);
}
.page-title .anchor.filter li a::before{
  content: '';
  display: block;
  width: 1rem;
  height: 1px;
  border-bottom: 1px solid;
  transition: transform 0.5s;
}
.page-title .anchor.filter li a::after{
  content: '';
  display: block;
  width: 0;
  height: 1px;
  border-bottom: 1px solid;
  position: absolute;
  left: 0;
  transition: width 0.5s;
}
.page-title .anchor.filter li a.mixitup-control-active::before{
  transform: rotate(90deg);
}
.page-title .anchor.filter li a.mixitup-control-active::after{
  width: 1rem;
}
section.contents section.message p{
  line-height: 2.5;
  font-size: var(--font16);
  margin-bottom: 1.5em;
}
section.contents section.message p:last-of-type{
  margin-bottom: 0;
}
section.contents p.center{
  max-width: 60rem;
  margin-left: auto;
  margin-right: auto;
}
section.contents section .inner.sub .flex.row .visual.block figure .wrap{
  position: relative;
}
section.contents section .inner.sub .flex.row .visual.block figure .pos{
  position: absolute;
  gap: 30vw;
}
section.contents section .inner.sub .flex.row .visual.block figure .pos .shoulder{
  background: none;
  padding: inherit;
  font-size: 4.75vw;
}
section.contents section .inner.sub .flex.row .visual.block figure .num{
  color: var(--colorWht);
  /*font-size: 4rem;*/
  font-size: 8vw;
  font-weight: 600;
}
section.contents section .inner.sub .flex.row .visual.block figure .num small{
  /*font-size: var(--font20);*/
  font-size: 4.5vw;
}
sub{
  bottom: inherit;
  top: -0.25em;
}
section.contents section .inner.sub .flex.row .txt.block .title{
  line-height: 1.5;
  margin-bottom: 0.5em;
  font-weight: 500;
}
.brand section.contents section .inner.sub .flex.row .txt.block{
  text-align: center;
  margin-bottom: 2rem;
}
section.contents section .inner.sub .flex.row .txt.block .title span{
  margin-left: 0.5em;
  font-weight: 400;
}
section.contents section .inner.sub .flex.row .txt.block .border.box p{
  font-size: var(--font12);
}
br.pc{
  display: none;
}

section.contents section.fv picture{
  display: block;
  height: 100%;
}
section.contents section.fv picture img{
  height: 100%;
  object-fit: cover;
}
section.contents section.fv,
section.contents section.message{
  position: relative;
  height: 100vh;
}
section.contents section.message{
  height: 160vh;
}
.section__pin{
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}
.section__pin::before{
  content: '';
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--primaryBlk);
  z-index: 0;
  mix-blend-mode: multiply;
  opacity: 0;
  transition: opacity 0.5s;
}
.section__pin.active::before{
  opacity: 0.5;
}
.pin_trigger.leave{
  animation: opacityFadeOut 0.5s forwards;
}
.pin_trigger.enter{
  animation: opacityFadeIn 1s forwards;
}
@keyframes opacityFadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes opacityFadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
section.contents .message .inner{
  padding:9rem 3rem;
}
section.contents .message h2{
  margin-bottom: 4rem;
  font-weight: 500;
}
section.contents .message.active{
  color: var(--colorWht);
}
section.contents picture.center.graphic{
  width: 85%;
  display: block;
  margin: 6rem auto;
}
section.contents .col2 .txt.block .sub-title{
  padding-left: 2rem;
  font-weight: 500;
  margin-bottom: 0.5em;
}
section.contents .col2 .txt.block .sub-title.blu {
  color: var(--colorBlu);
}
section.contents .col2 .txt.block .sub-title.gry{
  color:var(--colorTxtGry)
}
#brand-concept .flex-wrapper .flex.col2{
  flex-direction: column-reverse;
}
section.contents .col2 .txt.block{
  margin-top: 2.5rem;
}
.under section.contents.top{
  width: 100%;
  aspect-ratio: auto;
}
.caption,figcaption,.caution,p.caution,section.contents p.caution{
  font-size: var(--font11);
}
figcaption{
  margin-top: 0.5em;
}
.page-title .anchor .close{
  display: none;
}
#list.under.brand footer{
  margin-top: 0.5rem;
}
#feature .inner .blocks .link.banner{
  height: auto;
}
@media (821px <= width) {
  br.pc{
    display: block;
  }
  section.contents section .title.sub{
    margin-bottom: 4rem;
  }
  .brand section.contents section .title.sub{
    text-align: left;
  }
  .brand section.contents section .title.sub.center{
    text-align: center;
  }
  .sepa.flex{
    flex-flow: row;
    padding-left: 0;
    padding-right: 0;
  }
  section.contents{
    aspect-ratio: 16 / 6;
    margin-bottom: 0.5rem;
  }
  section.contents.head{
    aspect-ratio: 16 / 4.25;
    margin-bottom: 0.5rem;
  }
  section.contents .inner .block{
    width: calc(73% - 0.25rem);
  }
  section.contents .inner .flex.w60{
    max-width: 60rem;
    margin-left: auto;
    margin-right: auto;
  }
  section.contents section.message {
    height: 140vh;
}
  section.contents .inner .flex.center .block{
    width: 50%;
  }
  .sus-graph1{
    margin-top: 4rem;
  }
  .sus-graph1 .txt .title{
    margin-bottom: 1em;
  }
  
  section.contents .inner .block.title{
    width: calc(27% + 0.25rem);
    position: relative;
    padding: 0;
  }
  section.contents .blocks .link .buttons{
    width: 100%;
    padding: 1.5rem 3rem;
  }
  section.contents .inner .block.title::before{
    content: '';
    display: block;
    width: 0.5rem;
    height: 100%;
    background: var(--colorWht);
    position: absolute;
    left: 0;
    top: 0;
  }
  section.contents.head .inner .block.title::before{
    left: inherit;
    right: 0;
  }
  .under.post .sepa .left{
    width: calc(100% - 75%);
    position: relative;
    height: max-content;
  }
  .under.post .sepa .right{
    width: calc(100% - 25%);
    height: max-content;
    aspect-ratio: auto;
    position: relative;
  }
  .under.post .sepa .left.head{
    aspect-ratio: auto;
  }
  .page-title{
    padding-left: 6rem;
    padding-top: 4rem;
  }
  #list section.contents.head .page-title,
  #list:not(.post) section.contents.head .page-title{
    padding-left: 4rem;
  }
  .page-title h1{
    font-size: var(--font28);
  }
  .page-title .anchor{
    margin-top: 6rem;
    font-size: var(--font13);
    gap: 1em;
  }
  .page-title .anchor li{
    line-height: 1.75;
    margin-bottom: 1em;
    font-size: var(--font14);
  }
  .page-title .anchor li:last-child{
    margin-bottom: 0;
  }
  .page-title .anchor.filter li{
    line-height: 1;
    margin-bottom: 1.5em;
  }
  .page-title .anchor.filter li span{
    font-weight: 600;
    font-size: var(--font18);
  }
  .page-title .anchor li a{
    transition: color 0.5s;
  }
  .page-title .anchor li a:hover{
    color: var(--colorBlu);
  }
  section.contents section{
    margin-bottom: 12rem;
  }
  .post section.contents section .inner{
    padding-right: 6rem;
    padding-left: 0;
  }
  
  section.contents .section-title{
    padding: 0;
    width: 100%;
    position: relative;
    margin-bottom: 3rem;
  }
  section.contents .section-title .title{
    font-size: var(--font20);
  }
  section.contents .section-title::before{
    width: 100%;
  }
  section.contents p{
    font-size: var(--font15);
    line-height: 2;
  }
  section.contents picture.center{
    display: block;
    max-width: 680px;
    margin: auto;
  }
  section.contents .intro picture{
    max-width: 100%;
    height: 100%;
    aspect-ratio: 1.414 / 1;
    overflow: hidden;
    margin-bottom: 6rem;
  }

  section.contents .col2{
    gap: 6rem;
  }
  #brand-concept .flex-wrapper .flex.col2{
    flex-direction: row;
  }
  section.contents .col2 .txt.block{
    width: calc(30% - 3rem);
    margin-top: 0;
  }
  section.contents .col2 .txt.block p{
    text-align: justify;
  }
  section.contents .col2 .visual.block{
    width: calc(70% - 3rem);
  }
  section.contents .col2 .visual.block picture{
    aspect-ratio: 1.414 / 1;
    display: block;
  }
  section.contents .col2 .txt.block .sub-title{
    font-weight: 500;
    margin-bottom: 0.65em;
    padding-left: 0;
  }
  section.contents .col2 .txt.block .sub-title.blu{
    color: var(--colorBlu);
  }
  section.contents .col2 .txt.block .sub-title.f22{
    font-size: var(--font22);
  }
  section.contents .col2 .txt.block .sub-title.f16{
    font-size: var(--font16);
  }
  .blocks .link.banner picture{
    background: #000000;
  }
  .blocks .link.banner:hover picture img{
    opacity: 0.5;
  }
  .blocks div.link.banner:hover picture img{
    opacity: 1;
  }
  section.contents section .inner.sub{
    padding: 6rem;
  }
  section.contents section .inner.sub .flex.row{
    gap: 6rem;
  }
  section.contents section .inner.sub .flex.row .txt.block{
    width: calc(25% - 3rem);
  }
  .brand section.contents section .inner.sub .flex.row .txt.block{
    text-align: left;
  }

  section.contents section .inner.sub .flex.row .visual.block{
    width: calc(75% - 3rem);
    gap: 0.5rem;
  }
  section.contents section .inner.sub .flex.row .visual.block picture,
  section.contents section .inner.sub .flex.row .visual.block figure{
    width: calc(50% - 0.5rem);
  }
  section.contents section .inner.sub .flex.row .visual.block figure{
    position: relative;
  }
  section.contents section .inner.sub .flex.row .visual.block figure figcaption{
    margin-top: 1em;
  }
  .recent.wrapper{
    padding-top: 0;
    padding-left: 6rem;
    padding-right: 6rem;
  }
  .under section.other .inner{
    padding-top: 9rem;
    padding-bottom: 0;
    flex-flow: row;
  }
  .under section.other .section-title{
    width: 25%;
    padding-left: 0;
  }
  .under section.other .sp-scroll{
    width: 75%;
    overflow-y: hidden;
  }
  .under.products .other .link.banner,
  .under.feature .other .link.banner {
    width: calc(100% / 3 - (1rem / 3));
}
  .under.feature .other .link.banner{
    width: calc(100% / 3 - (1rem / 3));
    /*width: calc(100% / 4 - (1rem / 2.67));*/
    margin-bottom: 1.5rem;
  }
.under #feature .inner{
  padding: 0 6rem 0 0;
}
.under #feature .inner .blocks{
  padding-left: 2.5rem;
}
.under #feature .inner .link .buttons {
  position: absolute;
  padding-right: 1.5rem;
}
.under #feature .cap{
  padding-left: 0;
  padding-right: 2rem;
}
.under #feature .inner .blocks{
  gap: 6rem 0.5rem;
}
section.contents section .inner.sub .flex.row .visual.block figure .pos{
  gap: 6vw;
}
section.contents section .inner.sub .flex.row .visual.block figure .num{
  font-size: min(3vw,7rem);
}
section.contents section .inner.sub .flex.row .visual.block figure .num small{
  font-size: min(2vw, 4rem);
}
section.contents section .inner.sub .flex.row .visual.block figure .pos .shoulder{
  font-size: min(1.5vw, 3.25rem);
  margin-bottom: 0.35vw;
}
.flex-wrapper.gap4 .w50{
  width: calc(50% - 2rem);
}
}
@media (1024px <= width){
  section.contents section .inner.sub .flex.row .visual.block figure .pos{
    gap: 3.5vw; 
  }
}
@media (1440px <= width){
  section.contents section .inner.sub .flex.row .visual.block figure .pos{
    gap: 5.5vw;
  }
}

@media (820px >= width){
  .page-title .anchor{
    position: fixed;
    bottom: 1rem;
    right: 0;
    left: 0;
    margin: auto;
    width: max-content;
    z-index: 2;
    background: #ffffff;
    padding: 1em 5em;
    font-size: var(--font14);
    border-radius: 3rem;
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.25));
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.25s;
    display: none;
  }
  .page-title .anchor.active{
    opacity: 1;
    pointer-events: all;
  }
  .page-title .anchor.cookie{
    bottom: 9rem;
  }
  .page-title .anchor .controll{
    display: none;
  }
  .page-title .anchor.open{
    padding-top: 6rem;
    padding-bottom: 6rem;
    border-radius: 0.5rem;
  }
  .page-title .anchor.open .controll,
  .page-title .anchor.open .controll ul{
    display: flex;
    flex-flow: column;
  }
  .page-title .anchor.open .title{
    display: none;
  }
  .page-title .anchor.open .controll ul{
    gap: 2rem;
  }
  .page-title .anchor.open .close{
    display: block;
    margin-bottom: 2rem;
    text-align: center;
    border: 1px solid;
    padding: 0.75em 1em;
    border-radius: 3rem;
    font-size: var(--font11);
  }
}