:root {
  --primaryBlk: #3B3938;
  --colorBaseGry: #DBDBDB;
  --colorPointGry: #706E6E;
  --colorPointGrn:#78A298;
  --colorBaseLGry:#F6F6F6;
  --colorTxtGry:#949292;
  --colorBlu: #4D96BE;
  --colorWht: #ffffff;
  --colorBlk: #4c4948;
  --font30: 3rem;
  --font28: 2.8rem;
  --font26: 2.6rem;
  --font24: 2.4rem;
  --font22: 2.2rem;
  --font20: 2rem;
  --font18: 1.8rem;
  --font16: 1.6rem;
  --font15: 1.5rem;
  --font14: 1.4rem;
  --font13: 1.3rem;
  --font12: 1.2rem;
  --font11: 1.1rem;
  --font10: 1rem;
  --font9: 0.9rem;
}
.f26{
  font-size: var(--font26);
}
.f22{
  font-size: var(--font22);
}
.f20{
  font-size: var(--font20);
}
.f18{
  font-size: var(--font18);
}
.f16{
  font-size: var(--font16);
}
.f15{
  font-size: var(--font15);
}
.f14{
  font-size: var(--font14);
}
.f13{
  font-size: var(--font13);
}
.f12{
  font-size: var(--font12);
}
.f10{
  font-size: var(--font10);
}
.f500{
  font-weight: 500;
}
.f600{
  font-weight: 600;
}
.lxOrg{
  color: #ef7a00;
}
.material-symbols-outlined{
  margin-top: 0.1em;
}
html,
body {
  font-size: 62.5%;
  min-height: 100%;
}

.flex {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  -moz-flex-flow: row wrap;
  -ms-flex-flow: row wrap;
  -o-flex-flow: row wrap;
  flex-flow: row wrap;
}

.nowrap {
  -webkit-flex-flow: row nowrap;
  -moz-flex-flow: row nowrap;
  -ms-flex-flow: row nowrap;
  -o-flex-flow: row nowrap;
  flex-flow: row nowrap;
}

.reverse {
  -webkit-flex-flow: row-reverse wrap;
  -moz-flex-flow: row-reverse wrap;
  -ms-flex-flow: row-reverse wrap;
  -o-flex-flow: row-reverse wrap;
  flex-flow: row-reverse wrap;
}

.column {
  -webkit-flex-flow: column;
  -moz-flex-flow: column;
  -ms-flex-flow: column;
  -o-flex-flow: column;
  flex-flow: column;
}

.flex-align-start {
  -webkit-align-items: flex-start;
  -moz-align-items: flex-start;
  -ms-align-items: flex-start;
  -o-align-items: flex-start;
  align-items: flex-start;
}

.flex-align-end {
  -webkit-align-items: flex-end;
  -moz-align-items: flex-end;
  -ms-align-items: flex-end;
  -o-align-items: flex-end;
  align-items: flex-end;
}

.flex-align-center {
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -o-align-items: center;
  align-items: center;
}

.flex-align-baseline {
  -webkit-align-items: baseline;
  -moz-align-items: baseline;
  -ms-align-items: baseline;
  -o-align-items: baseline;
  align-items: baseline;
}

.flex-align-stretch {
  -webkit-align-items: stretch;
  -moz-align-items: stretch;
  -ms-align-items: stretch;
  -o-align-items: stretch;
  align-items: stretch;
}

.flex-between {
  -webkit-justify-content: space-between;
  -moz-justify-content: space-between;
  -ms-justify-content: space-between;
  -o-justify-content: space-between;
  justify-content: space-between;
}

.flex-evenly {
  -webkit-justify-content: space-evenly;
  -moz-justify-content: space-evenly;
  -ms-justify-content: space-evenly;
  -o-justify-content: space-evenly;
  justify-content: space-evenly;
}

.flex-justify-center {
  -webkit-justify-content: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  -o-justify-content: center;
  justify-content: center;
}

.flex-justify-start {
  -webkit-justify-content: flex-start;
  -moz-justify-content: flex-start;
  -ms-justify-content: flex-start;
  -o-justify-content: flex-start;
  justify-content: flex-start;
}

.flex-justify-end {
  -webkit-justify-content: flex-end;
  -moz-justify-content: flex-end;
  -ms-justify-content: flex-end;
  -o-justify-content: flex-end;
  justify-content: flex-end;
}
/**/
body {
  font-family: "Noto Sans JP", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings: "slnt" 0;
  color: var(--primaryBlk);
  -webkit-font-smoothing: antialiased;
  letter-spacing: 0.075em;
}

body.open{
  overflow: hidden;
}

img {
  width: 100%;
  height: auto;
  transition: opacity 0.75s 0.25s;
  will-change: auto;
}

.lazyload{
  opacity: 0;
}
.lazyloaded{
  opacity: 1;
}
.inview{
  opacity: 0;
  transform: translateY(2.4rem);
  transition: all 1s;
  will-change: auto;
}
.inview.active{
  opacity: 1;
  transform: translateY(0);
}
main {
  width: 100%;
}

.wrapper {
  width: 100%;
  overflow: hidden;
}

header{
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 10;
  transition: all 1s;
}

#index header{
  opacity: 0;
}

#ci {
  background: var(--colorPointGry);
  height: 4.5rem;
  padding: 0 1rem;
  position: relative;
  top: 0;
  transition: all 0.5s;
}
#ci.scroll,#index #ci.scroll{
  top: -4.5rem;
}

#ci img {
  width: auto;
  height: 1.6rem;
}

#headerNav .inner {
  padding: 2.5rem;
  position: relative;
}

#headerNav .menu {
  position: absolute;
  top: 0;
  left: 0;
  background: #ffffff;
  width: 100%;
  height: 100dvh;
  padding: 7rem 2.5rem;
  display: none;
  opacity: 0;
}

#headerNav .menu.open {
  display: flex;
  gap: 1.5rem;
  z-index: 0;
  animation: 0.5s ease 0.25s 1 normal forwards running mainmenuOpen;
  justify-content: center;
}

@keyframes mainmenuOpen {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

#headerNav {
  width: 100%;
  transition: all 1s;
  position: fixed;
  top: 4.5rem;
  left: 0;
}


#headerNav.default svg .exsior_logo_fill {
  fill: var(--colorWht);
}

#headerNav.default svg .exsior_logo_stroke {
  stroke: var(--colorWht);
}

#headerNav.default .headerCV .text-wrap {
  color: var(--colorWht);
}

#headerNav.default #navBtn .line {
  background: var(--colorWht);
}

#headerNav.default.open svg .exsior_logo_fill,
#headerNav.default.scroll.on svg .exsior_logo_fill {
  fill: var(--colorBlk);
}

#headerNav.default.open svg .exsior_logo_stroke,
#headerNav.default.scroll.on svg .exsior_logo_stroke {
  stroke: var(--primaryBlk);
}

#headerNav.default.open .headerCV .text-wrap,
#headerNav.default.scroll.on .headerCV .text-wrap {
  color: var(--primaryBlk);
}

#headerNav.default.open #navBtn .line,
#headerNav.default.scroll.on #navBtn .line {
  background: var(--primaryBlk);
}

#headerNav.scroll {
  position: fixed;
  left: 0;
  top: -10rem;
  z-index: 10;
}

#headerNav.scroll.on {
  top: 0;
  background: var(--colorWht);
}

#headerNav li.list {
  font-size: 1.5rem;
}

#headerNav li.list a,
.footer .menu li.list a {
  display: flex;
  overflow: hidden;
}
.footer .menu li.list a:hover{
  color: var(--colorBlu);
}
#headerNav.default li.list a{
  color: var(--colorWht);
}
#headerNav.default.scroll.on li.list a,
#headerNav.default.open li.list a,
.under #headerNav.default li.list a{
  color: var(--primaryBlk);
}

#headerNav li.list a.is-active,
.footer .menu li.list a.is-active {
  color: var(--colorBlu);
  cursor: pointer;
}

#headerNav .menu li.list a:hover span,
#headerNav .menu .child li.list a:hover,
main a:hover{
  color: var(--colorBlu);
}
.blocks .link.banner:hover .buttons .label{
  opacity: 0.6;
}


.menu li.list.parent a::after {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 2rem;
  content: '\e313';
  line-height: 1;
  font-variation-settings:
    'FILL' 0,
    'wght' 200,
    'GRAD' 0,
    'opsz' 24;
}

.menu li.list.parent .child a::after {
  display: none;
}

.text-wrap {
  position: relative;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.after {
  position: absolute;
  top: 0;
  left: 0;
  bottom: -1px;
  display: flex;
  align-items: center;
}

.before {
  display: flex;
  align-items: center;
}

.before span,
.after span {
  line-height: 1.1;
  min-width: 0.25em;
  transition: color .3s ease-out;
}

.after span {
  transform: translateY(115%);
}

.menu li.list.parent .child {
  gap: 1.25rem;
  padding-top: 1.5rem;
  padding-left: 1em;
}

#headerLogo {
  z-index: 1;
  transition: opacity 0.5s;
  gap: 1em;
}
#headerLogo .shoulder{
  font-size: 8px;
  color: var(--colorWht);
}
#headerNav.scroll #headerLogo .shoulder,
.under #headerLogo .shoulder{
  color: var(--colorBlk);
}
#headerLogo:hover{
  opacity: 0.6;
}

.headerCV {
  margin-left: auto;
  gap: 0 1.5rem;
  z-index: 1;
}

.headerCV svg path,
.headerCV svg rect,
.headerCV svg circle {
  stroke: var(--primaryBlk);
}
#index #headerNav.scroll.on .headerCV svg.blank path,
.under #headerNav .headerCV svg.blank path{
  fill: var(--primaryBlk);
}
#headerNav .headerCV li.list {
  font-size: 1rem;
  gap: 0.5em;
  position: relative;
}
#headerNav .headerCV li.list svg.blank{
  width: 1.25rem;
  position: absolute;
  right: 0em;
}
#headerNav.default .headerCV li.list svg.blank,
#headerNav.default .headerCV li.list svg.blank path{
  fill: var(--colorWht);
}
#headerNav.open .headerCV li.list svg.blank,
#headerNav.open .headerCV li.list svg.blank path,
.under #headerNav.default .headerCV li.list svg.blank,
.under #headerNav.default .headerCV li.list svg.blank path{
  fill: var(--primaryBlk);
}
#headerNav.scroll.on .headerCV li.list svg.blank,
.under #headerNav.default .headerCV li.list svg.blank{
  fill: var(--primaryBlk);
}

#navBtn {
  width: 2.5rem;
  height: 1.6rem;
  margin-left: 1.5rem;
  cursor: pointer;
  position: relative;
}

#navBtn .line {
  width: 100%;
  height: 0.15rem;
  background: var(--primaryBlk);
  transition: all 0.5s;
  will-change: transform;
}

#navBtn.open .line.top,
#navBtn.open .line.middle,
#navBtn.open .line.bottom {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
}

#navBtn.open .line.bottom {
  transform: rotate(-45deg);
}

#navBtn.open .line.top {
  transform: rotate(45deg);
}

#navBtn.open .line.middle {
  width: 0;
}

.mrgL12 {
  margin-top: 7.5rem;
  margin-bottom: 7.5rem;
}

.bg {
  background: var(--colorBaseGry);
}

.asp141{
  aspect-ratio: 1.414 / 1;
}

.asp169{
  aspect-ratio: 16 / 9;
}

.asp141 img,.asp169 img{
  height: 100%;
  object-fit: cover;
}

footer {
  padding: 0;
  width: 100%;
  background: var(--colorWht);
}

footer .inner {
  width: 100%;
}

footer .cv,footer .ev{
  position: relative;
  background: var(--colorWht);
  z-index: 1;
}
footer .cv{
  z-index: 2;
  background-image: url('/assets/img/footer/cv_bg_sp.jpg');
  background-repeat: no-repeat;
  background-position: left center;
  background-size: cover;
  padding: 6rem 3rem;
}
/*
footer .cv::before{
  content: '';
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: rgb(255 255 255 / 45%);
  backdrop-filter: saturate(100%) blur(10px);
  -webkit-backdrop-filter: saturate(100%) blur(10px);
}*/

footer .cv .inner {
  gap: 2rem;
  padding-bottom: 0.5rem;
  z-index: 1;
  position: relative;
}
footer .cv .inner .link.banner{
  background: var(--colorWht);
  padding: 1rem;
}
footer .cv picture {
  position: relative;
  overflow: hidden;
  /*height: 100%;
  aspect-ratio: 1.414 / 1;*/
}

footer .cv picture img{
  height: auto;
  width: 50%;
  object-fit: cover;
  aspect-ratio: 1 / 1;
}

footer .cv picture .buttons {
  gap: 1rem;
  font-size: var(--font12);
  color: var(--primaryBlk);
  width: 50%;
  transition: color 0.5s;
}
footer .cv picture svg path,
footer .cv picture svg rect,
footer .cv picture svg circle{
  transition: all 0.5s;
}
footer .cv .inner .link.banner:hover .buttons{
  color: var(--colorBlu);
}
footer .cv .inner .link.banner:hover svg path,
footer .cv .inner .link.banner:hover svg rect,
footer .cv .inner .link.banner:hover svg circle{
  stroke: var(--colorBlu);
}

footer .cv picture .buttons .label{
  /*font-size: var(--font15);*/
  font-size: min(3.25vw , 1.5rem);
}

.footer.bg {
  background: var(--colorPointGry);
  color: var(--colorWht);
  height: 75vh;
}
footer .ev{
  position: sticky;
  bottom: 0;
  z-index: 1;
}
/*
.footer.js-sticky {
  position: sticky;
  bottom: 0.5rem;
  z-index: 0;
}
  */

.footer.bg .inner {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
  height: 100%;
}
.footer.bg .inner .flex-wrap{
  height: 100%;
}

.footer .footer-logo svg {
  height: 3rem;
  width: 11rem;
}

.footer .footer-logo h6 {
  font-size: var(--font11);
  text-indent: 0.5em;
  margin-top: 0.25em;
}

.footer .footer-logo {
  margin-top: auto;
  margin-bottom: 3rem;
}

.footer .menu {
  font-size: var(--font12);
  gap: 1rem;
}

.footer .copyrights {
  margin-top: auto;
}
.footer .copyrights .menu{
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}
.footer .copyrights .menu span{
  font-size: var(--font16);
}
.footer .copyrights .menu span.material-symbols-outlined{
  margin-top: 0;
}

.footer .copyrights img {
  width: 3.85rem;
}

.footer .sns.instagram{
    margin-top: 3rem;
    gap: 0.5rem;
}
.footer .sns.instagram svg{
    width: 2rem;
    height: 2rem;
}
.footer .sns p{
  font-size: var(--font12);
}
.footer .sns.instagram:hover{
  color: var(--colorBlu);
}
.footer .sns.instagram:hover svg path{
  fill:var(--colorBlu);
}

section.contents .inner.hauto{
  height: auto;
}

.section-title {
  padding: 0 2.5rem;
  margin-bottom: 2rem;
}

footer .cv .section-title{
  z-index: 1;
  position: relative;
  text-align: center;
  margin-bottom: 9em;
}

.instaBanner__Float{
    z-index: 0;
    font-size: var(--font12);
    color: var(--colorWht);
    margin-left: auto;
    margin-right: auto;
    position: relative;
    left: 2.35rem;
    transition: color 0.2s;
}
#instaBanner__Float{
    position: fixed;
    top: 0;
    left: 0;
    color: var(--colorBlk);
    background: #F0F0F0;
    padding: 1em;
        width: 100%;
}
.blank .material-symbols-outlined{
  font-size: var(--font12);
}
#instaBanner__Float:hover{
  color: var(--colorBlu);
}

.section-title .title {
  font-size: var(--font20);
  line-height: 1;
  margin-bottom: 0.5em;
}

.section-title .title.single{
  font-size: var(--font22);
  font-weight: 500;
}

.section-title .lede {
  font-size: var(--font14);
  line-height: 1.75;
}

.block-wrap, .blocks.visual {
  gap: 0.5rem;
}

.blocks.nowrap {
  flex-wrap: nowrap;
  width: max-content;
}

.blocks .link,
.blocks .link picture {
  position: relative;
  height: 100%;
  overflow: hidden;
}

.blocks .link.banner picture::before,
footer .cv picture::before,
#fv .inner picture.kv::before,
#fv .inner video.kv::before {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0.75));
  z-index: 1;
  transition: all 1s cubic-bezier(0.075, 0.82, 0.165, 1);
}
#fv .inner picture.kv::before,
#fv .inner video.kv::before{
  background-image: linear-gradient(0deg, rgba(255, 255, 255, 0) 80%, rgb(0 0 0 / 0.7));
}
#fv .inner video.kv{
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: relative;
}
#fv .inner .pseudo{
    width: 100%;
    height: 100%;
    position: relative;
    transition: all 1s cubic-bezier(0.075, 0.82, 0.165, 1);
}
#fv .inner .pseudo::before{
    content: '';
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    transition: all 1s cubic-bezier(0.075, 0.82, 0.165, 1);
    background-image: linear-gradient(0deg, rgba(255, 255, 255, 0) 80%, rgb(0 0 0 / 0.7));
    opacity: 0;
}
#fv .inner .pseudo.up::before{
  opacity: 1;
}
.blocks .link.banner picture.nogrd::before{
  display: none;
}

footer .cv picture::before{
  display: none;
  /*background-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 20%, rgba(0, 0, 0, 0.75));*/
}

.blocks .link .buttons {
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
  overflow: hidden;
  padding: 0 1.5rem 1.25rem 1.5rem;
  color: var(--colorWht);
}

.blocks .link .buttons .label {
  font-size: var(--font14);
}

.blocks .link .buttons .arrow {
  font-size: 1.3rem;
  line-height: 1;
  border: 1px solid var(--colorWht);
  border-radius: 5rem;
  padding: 0.325em;
  margin-left: auto;
}

.blocks.nowrap .link.banner {
  width: 80vw;
}

.simplebar-track.simplebar-horizontal {
  left: 0.75rem;
  height: 2px;
  width: calc(100% - 1.5rem);
  bottom: -1.25rem;
  background: var(--colorBaseGry);
}

.simplebar-track.simplebar-horizontal .simplebar-scrollbar {
  min-width: 10px;
}

.simplebar-scrollbar:before {
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--colorBlu);
}

.link.btn {
  padding: 1.5em 3.75em;
  font-size: var(--font12);
  border: 1px solid;
  width: max-content;
  margin: auto;
  border-radius: 5rem;
  line-height: 1;
  margin-top: 3rem;
  position: relative;
  z-index: 1;
  transition: color 0.5s;
}
.link.btn.b{
  font-size: var(--font13);
}
.link.btn span {
  font-size: 1.3rem;
  margin-left: 0.25em;
}
.link.btn.b span{
  font-size: 2rem;
  font-weight: 600;
}
.link.btn.b span.blank{
  font-weight: 400;
}
.link.btn.bg{
  background: var(--colorWht);
}
.link.btn:hover,.link.btn.bg:hover{
  color: var(--colorBlu);
}
.link.btn.blu{
  background: var(--colorBlu);
  color: var(--colorWht);
}
.link.btn.blu:hover{
  color: var(--colorBlu);
  background: var(--colorWht);
}
.btn-wrap .link.btn{
  min-width: 16rem;
}

/*fv*/
#fv {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 0;
}

#fv .inner,
#fv .inner img {
  height: 100%;
}
#fv .inner{
  height: 100dvh;
}

#fv .inner picture {
  display: block;
  height: 100%;
  width: 100%;
  transition: opacity 1s;
}

#fv .inner img {
  object-fit: cover;
}

#fv .inner picture.concept {
  position: absolute;
  z-index: -2;
  left: 0;
  top: 0;
  opacity: 1;
}

#fv .inner picture.concept.active,
#fv .inner picture.concept.inactive {
  opacity: 0;
}

#fv .inner picture.kv,
#fv .inner video.kv{
  opacity: 0;
  transition: opacity 1s;
}

#fv.set.off .inner picture.kv,
#fv .inner .pseudo,
#fv.set.off .inner video.kv{
  opacity: 0!important;
}
#fv.off.setback .inner picture.kv.active,
#fv .inner .pseudo.active,
#fv.off.setback .inner video.kv.active{
  opacity: 1!important;
}

@keyframes fv {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}


#fv .inner #fv-title {
  position: absolute;
  width: auto;
  height: 3.5rem;
  left: 0;
  right: 0;
  margin: auto;
  opacity: 0;
  transition: opacity 1s;
}

#fv .inner #fv-title.active {
  opacity: 1;
}

#fv .inner #fv-title svg {
  width: auto;
  height: 100%;
  position: absolute;
  opacity: 0;
  /*animation: 3s 0.5s ease normal forwards running fv-titleLogo;*/
}

#fv .inner #fv-title h1 {
  font-size: var(--font24);
  color: var(--colorBlk);
  opacity: 0;
  /*animation: 3s 3s ease normal forwards running fv-titleCopy;*/
}
#fv .inner #fv-title a.link.btn.play{
  color: var(--colorWht);
  opacity: 0;
  pointer-events: none;
}
#fv .inner #fv-title a.link.btn.play.active{
  pointer-events: all;
}
#fv .inner #fv-title a.link.btn.play:hover{
  color: var(--colorTxtGry);
}

@keyframes fv-titleLogo {
  0% {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes fv-titleCopy {
  0% {
    opacity: 0;
    color: #4c4948;
  }
  50% {
    opacity: 1;
    color: #4c4948;
  }
  100% {
    opacity: 1;
    color: var(--colorWht);
  }
}

/*concept*/
#index section#concept {
  height: 125vh;
  margin-top: 125vh;
}

#index section#concept .inner {
  padding: 3rem;
}

#index section#concept h2 {
  line-height: 2.5;
  text-align: center;
  z-index: 1;
}

#index section#concept h2 p {
  font-size: var(--font16);
  margin-bottom: 1.5em;
}

/*brand*/
#brand .link.banner {
  aspect-ratio: 1 / 1;
}

#brand .link.banner img,
#products .link.banner img {
  height: 100%;
  object-fit: cover;
}

/*products*/
#products .link.banner:nth-child(2),
#products .link.banner:nth-child(3),
#products .link.banner:nth-child(4),
#products .link.banner:nth-child(5) {
  aspect-ratio: 1 / 1;
  width: calc(50% - 0.25rem);
}

#products .bottom .link.banner {
  aspect-ratio: 16 / 8;
}

/*feature*/
#feature .inner {
  padding-top: 6rem;
  padding-bottom: 6rem;
}

#feature .inner .blocks {
  padding-left: 2.5rem;
}

.cap {
  margin-top: 1rem;
  padding-right: 1.5rem;
}
.block.tags{
  gap: 1rem;
}

.tag {
  font-size: var(--font10);
  background: var(--colorPointGry);
  color: var(--colorWht);
  display: inline-block;
  padding: 0.75em 1.5em;
  line-height: 1;
  border-radius: 0.3rem;
}

.tag.grn{
  background: var(--colorPointGrn);
}

.tag.blu{
  background: var(--colorBlu);
}

.tag.circle{
  font-size: var(--font12);
  aspect-ratio: 1 / 1;
  border-radius: 100%;
  display: flex;
  padding: 1.25em;
  background: #999999;
  width: max-content;
}

.block.tags .w50 .caption{
  margin-top: 0.5em;
  line-height: 1.25;
}
.post-title {
  font-size: var(--font13);
  margin-top: 1rem;
  line-height: 1.5;
}

#feature .simplebar-track.simplebar-horizontal {
  background: #b5b5b5;
  bottom: -2.25rem;
  left: 2.5rem;
  width: calc(100% - 4.5rem);
}
#feature .post-title{
  max-height: calc(2em* 1.5);
  overflow: hidden;
  text-align: justify;
}
#feature .link.btn{
  margin-top: 5rem;
}
br.sp{
  display: block;
}
#cookie{
  position: fixed;
  bottom: 1rem;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 10;
  width: calc(100% - 2rem);
  background: var(--colorWht);
  font-size: var(--font12);
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.25));
}
#cookie p{
  line-height: 1.5;
  text-align: justify;
  padding: 1rem 3rem 1rem 2rem;
}
#cookie p span{
  font-size: var(--font12);
}
#cookie a{
  text-decoration: underline;
}
#cookie a:hover{
  color: var(--colorBlu);
}
.float .btn{
  background: var(--primaryBlk);
  width: 2rem;
  height: 2rem;
  cursor: pointer;
  position: absolute;
  right: 0;
  top: 0;
}
.float .btn::before,.float .btn::after{
content: '';
width: 1.25rem;
height: 1px;
background: var(--colorWht);
display: block;
position: absolute;
}
.float .btn::before{
transform: rotate(45deg);
}
.float .btn::after{
  transform: rotate(-45deg);
}
#campaign .btn{
  z-index: 1;
}
#campaign{
  background: var(--colorWht);
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.25));
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  padding: 2rem 4.2rem;
  z-index: 10;
}
#campaign.goto a{
  gap: 1rem;
}
#campaign.goto a img{
  transition: opacity 0.2s;
  width: auto;
}
#campaign.goto a:hover .link{
  transition: opacity 0.2s;
}
#campaign.goto a:hover img,
#campaign.goto a:hover .link{
  opacity: 0.6;
}
#campaign.goto .priceblock{
  gap: 1rem;
}
#campaign.goto .gototitle{
  height: 1.8rem;
}
#campaign.goto .giftcard{
  height: 1.4rem;
}
#campaign.goto .price{
  height: 4rem;
}
#campaign.goto .present{
  height: 1.6rem;
}
#campaign.goto .material-symbols-outlined{
  font-size: var(--font14);
  margin-left: 0.25em;
}
#instagram_banner .inner{
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}
#instagram_banner a.banner{
  position: relative;
  z-index: 1;
}
#instagram_banner a.banner picture{
  position: relative;
      overflow: hidden;
}
#instagram_banner a.banner picture img{
  transition: all 1s;
  position: relative;
  z-index: -1;
}
#instagram_banner a.banner picture::before{
    content: '';
    background: rgba(0, 0, 0, 0.4);
    position: absolute;
    z-index: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
      transition: all 1s;
}
#instagram_banner a.banner .titles{
  position: absolute;
  width: 100%;
  color: var(--colorWht);
  gap: 1rem;
  z-index: 1;
  transition: opacity 0.5s;
}
#instagram_banner a.banner svg{
  max-width: 4.5rem;
}
#instagram_banner a.banner .titles .txt{
      gap: 0.25rem;
}
#instagram_banner a.banner:hover picture img{
  transform: scale(1.1);
}
#instagram_banner a.banner:hover picture::before{
    background: rgba(0, 0, 0, 0.7);
}
#instagram_banner a.banner:hover .titles{
  opacity: 0.8;
}

.ev-navi{
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
}
.breadcrumb{
  padding: 2.5rem;
  width: 100%;
  color: var(--colorWht);
  font-size: var(--font12);
}
.breadcrumb li:nth-child(2)::before,
.breadcrumb li:nth-child(3)::before{
  content:'-';
  margin: 0 0.5rem;
}
.breadcrumb a[href*="/"]:hover{
  color: var(--colorBlu);
}

#numberone .inner {
  padding: 3rem 0;
  position: relative;
  z-index: 1;
}

#numberone .banner {
  gap: 0.5rem;
}

#numberone .cont {
  width: calc(50% - 0.25rem);
  background: #F0F0F0;
  padding: 6rem;
}

#numberone .cont img.logo.no1 {
    max-width: 25rem;
    width: auto;
    margin: 0 auto 5rem auto;
}

#numberone .cont p.f20{
  margin-bottom: 2em;
}

#numberone .cont .logo.box {
  gap: 2rem;
  margin: 2rem auto;
  width: 100%;
}

#numberone .cont .logo.box.nm{
  margin-top: 0.5rem;
}

#numberone .cont img.logo {
  width: 6rem;
}

#numberone .cont img.award{
    height: 8rem;
    width: auto;
}

#numberone .cont .wrap{
    border-top: 1px solid;
    width: 100%;
    border-bottom: 1px solid;
    margin-bottom: 4rem;
}

#numberone .cont ul{
font-size: 1.4rem;
margin-top: -0.7em;
margin-bottom: 1em;
}
#numberone .cont ul li{
  margin-bottom: 0.5em;
}
#numberone .cont ul li:first-child{
  background: #F0F0F0;
      text-align: center;
    margin-bottom: 1em;
}
#numberone .cont ul li:last-child{
  margin-bottom: 0;
}

#numberone .cont .box{
  margin-bottom: 1rem;
  min-width: 480px;
  width: auto;
}

#numberone .cont .box:last-child{
  margin-bottom: 0;
}

#numberone .cont p.product{
  min-width: 10em;
  font-weight: 500;
}

#numberone .cont p.caution.center{
  text-align: center;
}

#numberone .cont p.caution.auto{
  margin-right: auto;
}

@media (821px <= width){
  br.sp{
    display: none;
  }
  #headerNav{
    overflow: hidden;
  }
  #headerNav .inner{
    transition: all 0.5s;
  }
  #headerNav.active .inner{
    padding-bottom: 9rem;
  }
  #headerNav .inner::before{
    content: '';
    width: 0;
    position: absolute;
    left: 2.5rem;
    top: 7rem;
    transition: width 0.5s 0.25s;
  }
  #headerNav.active .inner::before{
    content: '';
    position: absolute;
    width: calc(100% - 5rem);
    height: 1px;
    background: var(--colorWht);
    margin-left: auto;
    margin-right: auto;
  }
  #headerNav.active.scroll .inner::before,
  .under #headerNav .inner::before{
    background: var(--primaryBlk);
  }
  #headerNav .menu{
    position: relative;
    width: auto;
    height: auto;
    margin-left: 6rem;
    padding: 0;
    background: none;
    display: flex;
    flex-flow: row;
    align-items: baseline;
    opacity: 1;
  }
  #headerNav li.list{
    margin-right: 1em;
    color: var(--colorWht);
    font-size: var(--font13);
  }
  .under #headerNav li.list,
  .under #headerNav.on li.list{
    color: var(--primaryBlk);
  }
  #headerNav.on li.list{
    color: var(--colorWht);
  }
  #headerNav.scroll.on li.list{
    color: var(--primaryBlk);
  }
  .menu li.list.parent .child{
    padding-left: 0;
    padding-top: 5rem;
    padding-bottom: 2rem;
    position: absolute;
    left: 0;
    z-index: 1;
    flex-flow: row;
    width: max-content;
  }
  #headerNav.default li.list a.js-splitText {
    height: 18px;
    overflow: hidden;
  }
  #navBtn{
    display: none;
  }
  #headerNav .headerCV li.list{
    flex-flow: row;
    font-size: var(--font12);
  }
  #headerNav .headerCV li.list svg.blank{
    width: 1.4rem;
    position: static;
    margin-left: -0.5rem;
  }
  #headerNav.default .headerCV li.list:hover path,
  #headerNav.default .headerCV li.list:hover circle,
  #headerNav.default .headerCV li.list:hover rect{
    stroke: var(--colorPointGrn);
  }
  #headerNav.default .headerCV li.list:hover svg.blank path,
  #headerNav.default.scroll.on .headerCV li.list:hover svg.blank path,
  #index #headerNav.default.scroll.on .headerCV li.list:hover svg.blank path,
  .under #headerNav.default .headerCV li.list:hover svg.blank path{
    fill: var(--colorPointGrn);
  }
  #headerNav.default .headerCV li.list:hover a .text-wrap,
  #headerNav.default .headerCV a:hover,
  #headerNav.default .headerCV li.list a:hover,
  #headerNav.default .headerCV li.list a:hover .text-wrap{
    color: var(--colorPointGrn);
  }
  footer .cv{
    padding: 9rem 0;
  }
  footer .cv .section-title{
    margin-bottom: 9em;
  }
  footer .cv .inner{
    flex-flow: row;
    width: 80%;
    margin: auto;
    gap: 8rem;
  }
  footer .cv .inner .link.banner{
    width: calc(50% - 0.25rem);
    overflow: hidden;
  }
  .under .wrapper{
    position: relative;
    z-index: 1;
  }
  .blocks .link .buttons .arrow{
    position: relative;
    bottom: -6rem;
    padding: 0.865em;
    transition: bottom 1s cubic-bezier(0.075, 0.82, 0.165, 1);
    will-change: auto;
  }
  .link.banner:hover .buttons .arrow{
    bottom: 0;
  }
  .link.banner img{
    transition: all 3s cubic-bezier(0.075, 0.82, 0.165, 1);
  }
  .link.banner:hover img{
    will-change: transform;
    transform: scale(1.1);
  }
  div.link.banner:hover img{
    transform: scale(1);
  }
  /*.blocks .link.banner:hover picture::before{
    height: 220%;
  }*/

  .mrgL12{
    margin-top: 12rem;
    margin-bottom: 12rem;
  }
  .mrgL9{
    margin-top: 9rem;
    margin-bottom: 9rem;
  }
  .section-title.center{
    text-align: center;
  }
  .section-title .title.single{
    font-size: var(--font24);
    margin-bottom: 1em;
  }
  .section-title .lede{
    max-width: calc(100vw / 3 - 6rem);
  }
  .section-title.center .lede{
    margin-left: auto;
    margin-right: auto;
  }
  #brand .inner{
    display: flex;
    width: 100%;
  }
  #brand .inner .section-title{
    width: 25%;
    align-items: center;
  }
  #brand .inner .section-title .title.single{
    margin-bottom: 0;
  }
  #brand .inner .sp-scroll{
    width: 75%;
  }
  .blocks.nowrap{
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
  }
  #feature .blocks.nowrap{
    justify-content: flex-start;
  }
  #index section#concept h2 p {
    font-size: var(--font16);
    margin-bottom: 1.5em;
  }
  #index section#concept h2 p:last-of-type{
    margin-bottom: 0;
  }
  #brand .blocks.nowrap{
    flex-wrap: nowrap;
  }
  #brand .link.banner{
    /*width: calc(25% - 0.5rem);*/
    width: calc((100% / 3) - 0.5rem);
    flex-shrink: 3;
    height: calc(75vw / 2.25);
    transition: width 1s cubic-bezier(0.075, 0.82, 0.165, 1);
    will-change: auto;
  }
  #brand .link.banner.open{
    width: calc(50% - 0.5rem);
  }
  #products .block-wrap{
    flex-flow: row;
  }
  #products .blocks.top{
    width: calc(75% - 0.25rem);
    height: max-content;
  }
  #products .blocks.bottom{
    width: calc(25% - 0.25rem);
  }
  #products .blocks.top .link.banner:nth-child(1){
    width: calc(100% / 1.5 - (0.25rem));
    aspect-ratio: 2 / 1;
  }
  #products .blocks.top .link.banner:nth-child(2),
  #products .blocks.top .link.banner:nth-child(3),
  #products .blocks.top .link.banner:nth-child(4),
  #products .blocks.top .link.banner:nth-child(5){
    aspect-ratio: 1 / 1;
    width: calc(100% / 3 - (0.3333333rem));
    height: auto;
  }
  #products .blocks.bottom .link.banner{
    width: 100%;
  }
  #feature .inner{
    padding: 9rem 6rem;
  }
  #feature .inner .blocks .link.banner{
    width: calc(100% / 3 - (1rem / 3));
  }
  .link.btn.b{
    font-size: var(--font14);
  }
  .link.btn span {
    font-size: 1.3rem;
    margin-left: 0.25em;
  }
  .link.btn.b span{
    font-size: 2rem;
    font-weight: 600;
  }
  #cookie{
    max-width: 90rem;
    background: none;
    gap: 0.5rem;
  }
  #cookie p{
    padding: 2rem 3rem 2rem 4rem;
    width: calc(100% - 6.5rem);
    background: var(--colorWht);
  }
  #cookie .btn{
    position: static;
    aspect-ratio: 1 / 1;
    width: 6rem;
    height: auto;
    background: var(--colorWht);
  }
  #cookie .btn::before, #cookie .btn::after{
    background: var(--primaryBlk);
  }
  #cookie .btn:hover{
    background: var(--colorBlk);
  }
  #cookie .btn:hover::before, #cookie .btn:hover::after{
    background: var(--colorWht);
  }
  .footer .menu{
    flex-flow: row;
    gap: 0 2.5rem;
  }
  footer .cv{
    background-image: url('/assets/img/footer/cv_bg.jpg');
  }
  #feature .post-title{
    font-size: var(--font15);
  }
  #numberone .cont img.award{
      height: 7rem;
  }

}
/*@media (1480px >= width){
  #cookie{
    margin-left: 1rem;
    max-width: max-content;
    width: calc(97.5vw - 28rem);
  }
}*/

@media (min-width: 820px) and (max-width: 1080px) {
  #numberone .cont .box{
    min-width: 110%;
  }
  #numberone .cont img.award{
        width: 50%;
        height: auto;
  }
}
@media (820px >= width){
  #headerNav .menu li.list{
    font-size: 1.8rem;
    border-bottom: 1px solid;
    padding-bottom: 1em;
  }
  #headerNav .menu li.list .child .list{
    border: none;
    padding-bottom: 0.5em;
  }
  #headerNav .menu li.list .child .list:first-of-type{
    margin-top: 0.5em;
  }
  .breadcrumb.nowrap{
    width: max-content;
  }
  .breadcrumb.nowrap li a span{
    max-width: 13em;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    display: inline-block;
  }
  section.float{
    width: 100%;
    display: flex;
    flex-flow: column-reverse;
    position: fixed;
    bottom: 1rem;
    left: 0;
    gap: 1rem;
    z-index: 10;
  }
  #cookie{
    width: calc(100% - 2rem);
    max-width: none;
    position: relative;
    bottom: 0;
  }
  #campaign{
    width: calc(100% - 2rem);
    margin: auto;
    position: relative;
    padding: 1.5rem;
    right: inherit;
    bottom: 0;
  }
  #campaign.goto .gototitle{
    height: 3vw;
  }
  #campaign.goto .giftcard{
    height: 5vw;
    margin-bottom: 1vw;
  }
  #campaign.goto .price{
    height: 7vw;
  }
  #campaign.goto .present{
    height: 3vw;
  }
  #campaign.goto .priceblock{
    flex-flow: row;
    width: 100%;
    gap: 1.5rem;
    padding-left: 18.25vw;
  }
  #campaign.goto .twrap.flex{
    gap: 0.5rem;
    margin-top: -0.5rem;
  }
  #campaign.goto .link.flex{
    margin-top: 0.25rem;
    width: auto;
    font-size: 2.4vw;
  }
  #campaign.goto .material-symbols-outlined{
    margin-left: 0;
  }
  #fv .inner .pseudo::after{
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    background-image: radial-gradient(#111 30%, transparent 31%), radial-gradient(#111 30%, transparent 31%);
    background-size: 3px 3px;
    background-position: 0 0, 1.5px 1.5px;
    opacity: 0;
    transition: opacity 0.5s;
  }
  #fv .inner .pseudo.up::after{
    opacity: 0.3;
  }
  #fv .inner video.kv{
    height: calc(100% - 3rem);
    top: 3rem;
    object-position: top;
    transition: all 0.5s;
  }
  #fv .inner video.kv.set{
    top: 0;
    height: 100%;
  }
  
  #numberone .banner{
    flex-flow: column;
  }
  #numberone .cont{
    width: 100%;
    padding: 5rem 2rem 3rem 2rem;
  }
  #numberone .cont img.logo.no1{
    max-width: 20rem;
  }
  #numberone .cont .logo.box.nm{
    margin-top: 0;
  }
  #numberone .cont .logo.box{
        justify-content: center;
  }
  #numberone .cont p.product{
    width: 100%;
    text-align: center;
  }
  #numberone .cont p.caution.auto{
    width: 76.5vw;
   max-width: 306px;
    margin-left: auto;
  }
}
/*
@media (540px >= width){
#fv .inner video.kv{
object-position: 35% center;
}
}
*/
@media (430px >= width){
  #campaign.goto .price{
    height: 8vw;
  }
  #campaign.goto .giftcard{
    height: 6.5vw;
  }
  #campaign.goto .priceblock{
    padding-left: 9.5vw;
    gap: 1rem;
  }
  #campaign.goto .present{
    height: 3.5vw;
  }
  #campaign.goto .twrap.flex{
    gap: 0.25rem;
  }
  #campaign.goto .link.flex{
    gap: 0.3vw;
    margin-left: -0.5vw;
  }
}
@media (375px >= width){
  #campaign.goto .priceblock {
    padding-left: 4.5vw;
  }
  #campaign.goto .price {
    height: 9vw;
  }
  #campaign.goto .priceblock{
    gap: 1rem;
  }
  #campaign.goto .twrap.flex{
    gap: 0.1rem;
  }
}
@media (340px >= width){
  .headerCV{
    gap: 0 1rem;
  }
  #navBtn{
    margin-left: 2rem;
  }
  #headerLogo{
    width: 8rem;
  }
  #headerLogo svg{
    width: 100%;
  }
  #headerNav .headerCV li.list{
    font-size: 0.7rem;
  }
  .breadcrumb{
    padding: 2rem 1rem;
  }
  .breadcrumb.nowrap li a span{
    max-width: 11em;
  }
  #campaign.goto .priceblock{
    gap: 0.5rem;
  }
  #campaign.goto .twrap.flex {
    gap: 0;
}
#campaign.goto .price {
  height: 9vw;
}
#campaign.goto .priceblock {
  padding-left: 4.5vw;
}
#campaign.goto .link.flex {
  gap: 0;
}
#campaign.goto .gototitle {
  height: 3.5vw;
}

}
@media (340px >= width){
#index section#concept h2 p{
  font-size: var(--font13);
}
}