section.contents .section-title{
  padding-left: 2rem;
  padding-right: 0.5rem;
}
.sus-graph1{
  flex-flow: column;
  margin-top: 6rem;
}
section.contents .inner .sus-graph1 .block.graphic,
section.contents .inner .sus-graph1 .block.txt{
  width: 100%;
}
section.contents .inner .sus-graph1 .block.txt{
  margin-top: 2rem;
}
section.contents .inner .sus-graph1 .block.txt p{
  text-align: left;
  font-size: var(--font16);
}
section.contents .inner .block{
  width: 100%;
}
#brand-concept #brand.other #concept,
#brand-history #brand.other #history,
#brand-sustainability #brand.other #sustainability,
#brand-safety-security #brand.other #safety{
  display: none;
}
#brand.other .link.banner{
  width: 80vw;
  /*aspect-ratio: 2 / 3;*/
}
p.lede-txt{
  font-size: var(--font14);
  line-height: 1.75;
  padding-left: 2rem;
  padding-right: 2rem;
  text-align: justify;
}
#brand-sustainability #sec02 .sp-scroll{
  width: 100%;
  overflow-y: hidden;
}
#brand-sustainability #sec02 .visual.block{
  width: max-content;
  flex-wrap: nowrap;
  gap: 2rem;
  margin-top: 2rem;
  padding-bottom: 2rem;
}
section.contents section .inner.sub .flex.row .visual.block figure{
  width: 60vw;
}
.visual.block .cap-title {
  text-align: center;
  margin-bottom: 0.5em;
  font-size: var(--font14);
}
#brand-sustainability #sec02 .simplebar-track.simplebar-horizontal{
  bottom: 0;
}
section.contents section#sec03 .inner.sub .flex.row{
  flex-direction: column-reverse;
}
section.contents section#sec03 .inner.sub .flex.row .txt.block{
  margin-top: 1.75rem;
  text-align: left;
}
section.contents section#sec03 .inner.sub .flex.row .txt.block p{
  line-height: 1.75;
}
#sidemenu .anchor{
  display: none;
}
#brand-concept .page-title h1{
  margin-bottom: 2rem;
}
.l175{
  line-height: 1.75;
}
.l15{
  line-height: 1.5;
}
#brand-safety-security .inner.sub{
  order: 4;
  background-color: var(--colorWht);
}
#brand-safety-security .inner.sub.gry{
  background-color: var(--colorBaseLGry);
}
#brand-safety-security .inner.sub.wide{
  padding: 2rem;
}
#brand-safety-security .inner.sub .flex.ext{
  gap: 2rem;
  margin-top: 3rem;
}
#brand-safety-security .inner.sub .block.wht{
  background: var(--colorWht);
  padding: 4rem 2rem 2rem 2rem;
}

#brand-safety-security .inner.sub .shoulder{
  background: none;
  padding-right: 0;
  margin-bottom: 0.75em;
  font-size: 1.2rem;
}
#brand-safety-security .inner.sub h4.title{
  margin-bottom: 1em;
  font-weight: 500;
  font-size: var(--font30);
}
.block.tags{
  margin: 2rem 0;
}
.bold{
  font-weight: 500;
}
#brand-safety-security .inner .block picture.visual img{
  position: static;
  height: auto;
}
#brand-safety-security .sub .point{
  margin-top: 4rem;
  gap: 4rem;
}
#brand-safety-security .sub .point .block{
  gap: 1.5rem;
}
.point .block .cat{
  width: max-content;
  border-left: 1px solid;
  border-right: 1px solid;
  padding: 0 0.75em;
  margin-bottom: 1rem;
}
.point .block .cat span{
  font-size: var(--font12);
}
.point .block .head{
  gap: 1.5rem;
}
.point .block .head h5{
  font-weight: 500;
}
.point .block .head.pc{
  display: none;
}
#brand-safety-security .block .tags:has(.w50){
  gap: 0 3rem;
}
#mov{
  margin-top: -30%;
}
#mov picture.mov{
    position: relative;
    aspect-ratio: 16 / 9;
}
#mov iframe.mov{
width: 100%;
aspect-ratio: 16 / 9;
opacity: 0;
transition: opacity 1s;
}
#mov.active iframe.mov{
  opacity: 1;
}
.mov a.play {
    color: var(--colorWht);
    background: rgb(0 0 0 / 40%);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: background-color 0.5s;
}
.mov a.play:hover{
    background: rgb(0 0 0 / 60%);
}
.mov a.play .arrow-btn{
    border: 1px solid var(--colorWht);
    padding: 1rem;
    border-radius: 6rem;
    height: 6rem;
    width: 6rem;
    margin-bottom: 1em;
    transition: all 0.5s;
}
.mov a.play:hover .arrow-btn{
    height: 7rem;
    width: 7rem;
}
.mov a.play .arrow-btn::before{
    content: '';
    background: var(--colorWht);
    height: calc(tan(60deg)* 1.5rem / 2);
    width: 1rem;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
}

@media (821px <= width) {
  section.contents .section-title{
    padding-left: 0;
  }
  .page-title {
      padding-left: 6rem;
  }
  #brand.other .link.banner {
    width: calc(100% / 3 -(1rem / 3));
  }
  p.lede-txt{
  padding-left: 0;
}
#brand-sustainability #sec02 .sp-scroll{
  width: calc(75% - 3rem);
}
#brand-sustainability #sec02 .visual.block{
  width: calc(75% - 3rem);
}

#brand-sustainability #sec02 .visual.block{
  /*width: 100%;*/
  margin-top: 0;
  padding-bottom: 0;
}
#brand-sustainability #sec02 .bottom .visual.block{
  width: calc(75% - 3rem);
}
.visual.block .cap-title{
  font-size: var(--font16);
}

section.contents section#sec03 .inner.sub .flex.row{
  flex-direction: row;
}
section.contents section#sec03 .inner.sub .flex.row .txt.block{
  width: calc(35% - 3rem);
  margin-top: 0;
}
section.contents section#sec03 .inner.sub .flex.row .visual.block{
  width: calc(65% - 3rem);
}
#sidemenu .anchor{
  display: block;
}
#brand-concept .page-title h1{
  margin-bottom: 0.25rem;
}
.inner.sub.bottom .block.graphic{
  width: 70%;
}
.lede.flex{
  gap: 4rem;
  margin-bottom: 6rem;
}
.lede .lede-txt{
  width: calc(60% - 2rem);
}
.lede .safe.graph{
  width:  calc(35% - 2rem);
}
#brand-safety-security .inner.sub.wide{
  padding-left: 0;
  padding-right: 0;
}
#brand-safety-security .sub .point{
  align-items: flex-end;

  gap: 8rem 4rem;
}
#brand-safety-security .sub .point .block{
  width: calc(100% / 3 - (8rem / 3));
}
#brand-safety-security .point.col2 .block{
  width: calc(100% / 2 - 2rem);
  flex-flow: row;
  align-items: center;
}
.point .block .txt{
  font-size: var(--font14);
  line-height: 1.5;
  min-height: calc(3em* 1.5);
  align-items: center;
}
.point.col2 .block .flex.gap{
  flex-flow: row;
}
#brand-safety-security .point.col2 .block picture{
  width: 50%;
  height: 100%;
  aspect-ratio: 1 /1 ;
}
#brand-safety-security .point.col2 .block picture img{
  height: 100%;
}
#brand-safety-security .point.col2 .block .flex.pc{
  width: 50%;
  margin-bottom: 2rem;
}
#brand-safety-security .point.col2 .block .head{
  display: none;
}
#brand-safety-security .point.col2 .block .head.pc{
  display: flex;
  width: 100%;
}
#brand-safety-security .inner.sub .flex.ext{
  flex-flow: row;
  margin-top: 4rem;
}
#brand-safety-security .inner.sub .block.wht{
  aspect-ratio: 1 / 1;
  padding: 4rem;
  justify-content: center;
}
}

@media (820px >= width) {
  section.intro .inner{
    display: flex;
    flex-flow: column;
  }
  .ord0{
    order: 0;
  }
  .ord1{
    order: 1;
  }
  .ord2{
    order: 2;
  }
  .ord3{
    order: 3;
  }
  #sec01{
    margin-top: 1.5rem;
  }
  section.contents .intro picture.ord0{
    height: calc(100vh - 16.6rem);
  }
  section.contents .inner .sus-graph1 .block.txt{
    flex-flow: column;
    padding: 0 2.5rem;
  }
  section.contents .inner .sus-graph1 .block.txt p{
    line-height: 1.75;
  }
  section.contents section .inner.sub .shoulder{
    font-size: var(--font11);
    top: -0.75em;
  }
  #brand-sustainability #sec02 .visual.block{
    width: 100%;
    flex-wrap: wrap;
    gap: 6rem;
    margin-top: 2rem;
    padding-bottom: 2rem;
  }
  section.contents section .inner.sub .flex.row .visual.block figure{
    width: 100%;
  }
  #brand-safety-security section.contents.top picture img{
    object-position: 60%;
  }
  .lede .safe.graph{
    width: 80%;
    margin: 2rem auto 4rem auto;
  }
  section.contents .section-title::before{
    width: calc(100% - 4rem);
  }
  #brand-safety-security .inner.sub{
    padding-top: 6rem;
  }
  #brand-safety-security .inner.sub.wide{
    margin-top: 0;
    padding-top: 0;
  }
  #brand-safety-security.brand section.contents section .title.sub{
    font-size: var(--font16);
    line-height: 1.5;
  }
}
@media screen and (min-height: 668px) and (max-height: 1180px){
  section.contents section.message{
    height: 120vh;
  }
  section.contents section.fv picture img{
    object-position: 42% center;
  }
}