.catch{
  color: #f01586;
  background: #fff;
  font-size: 6vw;
  font-weight: bold;
  text-align: center;
}
.award{
  position: relative;
  max-width: 1024px;
  margin: 0.5em auto;
  color: #f01586;
  background-size: auto calc(100% - 2em);
  font-size: 4.75vw;
  font-weight: bold;
  line-height: 1.2;
  text-align: center;
  word-break: keep-all;
}
.award > strong{
    color: inherit;
    font-size: 1.3em;
    font-family: 'Roboto', sans-serif;
    font-weight: bold;
}
.award:before{
  content:"";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2em;
  background: url(../images/top/frame.svg) no-repeat 0 50%;
  background-size: contain;
}
.award:after{
  content:"";
  position: absolute;
   right: 0;
  top: 0;
  bottom: 0;
  width: 3em;
  transform: scale(-1, 1);
  background: url(../images/top/frame.svg) no-repeat 0 50%;
  background-size: contain;
}
@media screen and (min-width: 768px) {
  .catch{
    background: #fff;
    margin: 0.5em 0;
    padding: 0.8em;
    font-size: 3.3vw;
  }
  .award{
    background: #fff;
    padding: 0.5em 2.5em;
    font-size: 3.5vw;
  }
  .award:before{
    top: 0;
    left: 1.3em;
    bottom: 0;
  }
  .award:after{
    top: 0;
    right: 1.3em;
    bottom: 0;
  }
}
@media screen and (min-width: 1026px) {
  .catch{
    font-size:220%;
  }
  .award{
    font-size:230%;
  }
}
.btnarea--top{
    display:-webkit-flex;
    display:flex;
    -webkit-flex-wrap:wrap;
    flex-wrap:wrap;
    margin-left:-7px;
    margin-right:-7px;
    margin-top:0;
}
.btnarea--top .btn{
    margin:7px;
}
.btnarea--top .btn--strong{
    -webkit-flex:2 2 100%;
    flex:2 2 100%;
}
.btnarea--top .btn--sub{
    -webkit-flex:1 1 45%;
    flex:1 1 45%;
    font-size:120%;
    padding:0.5em;
}
.top__plus-bnr > img{
    width: 100%;
}
@media screen and (min-width: 768px) {
    .btnarea--top{
        display:block;
        margin:35px auto;
        text-align:center;
    }
    .btnarea--top .btn{
        display:inline-block;
    }
    .btnarea--top .btn--sub{
        display:none;
    }
    .top__plus-bnr{
        display: block;
        margin: 0.5rem 0 1.5rem;
    }
}
.home_topic {
  display: table;
  height: 3em;
  margin: 0.5rem auto 1.5rem;
  padding-left: 3em;
  font-weight: bold;
  background: url(../images/common/icon_news.svg) no-repeat 0 50%;
  background-size: 2.5em auto;
  word-break: keep-all;
}
@media screen and (min-width: 768px) {
    .home_topic{
        margin: 1rem auto -1rem;
        padding-left: 4.5em;
        background-size: auto 100%;
        font-size: 1.25em;
    }
}
/*ポイント*/
.point--more{
    display:none;
}
.top__point,
.half__point{
    display:flex;
    max-width:905px;
    margin:1rem auto 20px;
}
.top__point__img,
.half__point__img{
    display:block;
    flex:1 1 40%;
    margin:0;
}
.top__point__img figcaption{
    display:none;
}
.top__point__txt,
.half__point__txt{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    flex:1 1 40%;
    margin:-5px 0 -5px 10px;
    padding:0;
    list-style:none;
}
.top__point__txt__li,
.half__point__txt__li{
    display:flex;
	align-items:center;
    justify-content: center;
    flex:1 1 auto;
    position:relative;
    border-radius:0.25em;
    padding:5px;
    margin:5px 0 5px 7px;
    font-weight:bold;
    text-align:center;
    line-height:1.2;
    white-space:nowrap;
}
.top__point__txt__point,
.half__point__txt__point{
    display:none;
}
.top__point__txt__li::before,
.half__point__txt__li::before{
    display:none;
}
.top__point__txt__li::after,
.half__point__txt__li::after{
    content:"";
    display:block;
   position:absolute;
   top:50%;
   left:-7px;
   margin-top:-7px;
   border-top:solid transparent 7px;
   border-bottom:solid transparent 7px;
}
.top__point__txt__li img,
.half__point__txt__li img{
    display:none;
}
.top__point__txt__1,
.half__point__txt__1{
    background:#ff007f;
    color:#fff;
}
:lang(ja) .top__point__txt__1,
:lang(ja) .half__point__txt__1{
    background:#ff007f url(../images/common/txt_point01_s.svg) no-repeat 50% 50%;
    background-size:80% auto;
}
.top__point__txt__1::after,
.half__point__txt__1::after{
   border-right:solid #ff007f 14px;
}
.top__point__txt__2,
.half__point__txt__2{
    background:#ff9600;
    color:#fff;
}
:lang(ja) .top__point__txt__2,
:lang(ja) .half__point__txt__2{
    background:#ff9600 url(../images/common/txt_point02_s.svg) no-repeat 50% 50%;
    background-size:75% auto;
}
.top__point__txt__2::after,
.half__point__txt__2::after{
   border-right:solid #ff9600 14px;
}
.top__point__txt__3,
.half__point__txt__3{
    background:#49b348;
    color:#fff;
}
:lang(ja) .top__point__txt__3,
:lang(ja) .half__point__txt__3{
    background:#49b348 url(../images/common/txt_point03_s.svg) no-repeat 50% 50%;
    background-size:80% auto;
}
.top__point__txt__3::after,
.half__point__txt__3::after{
   border-right:solid #49b348 14px;
}
.no-flexbox .top__point{
    display:table;
    width:100%;
}
.no-flexbox .top__point__img{
    display:table-cell;
    width:40%;
    vertical-align:top;
}
.no-flexbox .top__point__img img{
    width:100%;
    height:auto;
}
.no-flexbox .top__point__txt{
    display:table-cell;
    vertical-align:middle;
}
.no-flexbox .top__point__txt__li{
    display:block;
    height:100px;
}
@media screen and (min-width: 340px) {
    .top__point__txt__li{
        font-size:1.2rem;
    }
}
@media screen and (min-width: 500px) {
    .point--more{
        display:inline-block;
    }
    .no-flexbox .top__point__txt__li{
        height:120px;
    }
}
@media screen and (min-width: 768px) {
    .top__point__img{
        position:relative;
    }
    .top__point__img figcaption{
        display:block;
        position:absolute;
        bottom:-2.5em;
        left:0;
        right:0;
        font-size:0.8rem;
    }
    .top__point{
        margin:50px auto;
    }
    .top__point__txt{
        margin-left:28px;
    }
    .top__point__txt__li{
        display:flex;
        flex-direction:column;
        flex:1 1 auto;
        border-radius:19px;
        margin:7px 0;
        padding:0 0.5rem;
        font-size:1.5rem;
    }
    :lang(ja) .top__point__txt__li{
        background-image:none;
    }
    .top__point__txt__point{
        display:block;
    }
    .top__point__txt__main{
        display:flex;
        align-items:center;
        justify-content: center;
        flex:1 1 auto;
    }
    .top__point__txt__point{
        display:block;
        margin:0 -15px;
        padding:1em 20px;
        width:calc(100% + 15px);
        border-radius:15px 15px 0 0;
        background:#fff;
        flex:0 0 0;
        text-shadow:none;
    }
    :lang(ja) .top__point__txt__point{
        padding:0.5em 4em;
    }
    li.top__point__txt__1{
        border:solid 4px #ffaed2;
        background:#eb6da5;
    }
    .top__point__txt__main > picture{
        width: 100%;
    }
    .top__point__txt__li:before{
        content:"";
        display:block;
        width:0;
        height:0;
        margin:0;
        padding:0;
       position:absolute;
       top:50%;
       left:-24px;
       margin-top:-15px;
       border-top:solid transparent 24px;
       border-bottom:solid transparent 24px;
       border-right:solid #ffaed2 24px;
       border-radius:0;
       background:none;
    }
    .top__point__txt__li:after{
       left:-18px;
       margin-top:-9px;
       border-top:solid transparent 18px;
       border-bottom:solid transparent 18px;
       border-right:solid #ff007f 18px;
    }
    .top__point__txt__point{
        color:#eb6da5;
    }
    .top__point__txt__li img{
        display:block;
        max-width:none;
    }
    .top__point__txt__1 > .top__point__txt__main{
        width: 65%;
    }
    .top__point__txt__2{
       border:solid #ffbe52 4px;
    }
    .top__point__txt__2:before{
       border-right:solid #ffbe52 24px;
    }
    .top__point__txt__2:after{
       border-right:solid #ff9600 18px;
    }
    .top__point__txt__2 .top__point__txt__point{
        color:#f39800;
    }
    .top__point__txt__2 > .top__point__txt__main{
        width: 80%;
    }
    .top__point__txt__3{
       border:solid #8bc754 4px;
    }
    .top__point__txt__3:before{
       border-right:solid #8bc754 24px;
    }
    .top__point__txt__3:after{
       border-right:solid #49b348 18px;
    }
    .top__point__txt__3 .top__point__txt__point{
        color:#49b348;
    }
    .top__point__txt__3 > .top__point__txt__main{
        width: 90%;
        flex-direction: column;
        align-items: center;
    }
    .top__point__txt__3 > .top__point__txt__main::after{
        content: "";
        display: block;
        width: 60%;
        aspect-ratio: 631 / 243;
        margin-top: 1rem;
        background: url(../images/common/ph_machine_matome.png) no-repeat 50% 50%;
        background-size: contain;
    }
}
@media screen and (min-width: 950px) {
    .top__point__txt__li{
        font-size:1.75rem;
    }
}

/*リード文*/
.top__lead__txt__main{
    color:#f01586;
    margin: 0.5rem 0;
    font-weight:bold;
    font-size:1.2rem;
    line-height: 1.2;
    word-break: keep-all;
}
.top__lead__txt__main > em{
    font-family: 'Roboto', sans-serif;
    font-weight:bold;
    font-size:1.75em;
}
.top__lead__txt__sub{
    margin: 0.5rem 0;
}
.top__lead__fig{
    display:flex;
    align-items:center;
    justify-content:center;
    margin:1em -5px;
}
.top__lead__fig__li{
  margin: 0 0.25em;
  width: 100%;
}
.top__lead__fig__li--711{
	flex:1 1 40%;
    max-width:75%;
    overflow: hidden;
 }
 .top__lead__fig__li--711 > img{
   margin-bottom: -20%;
 }
.top__lead__fig__sample{
    display:none;
}
.top__lead__fig__li--lawson{
    flex:0.8 0.8 30%;
}
.top__lead__fig__li--lawson2021{
    flex:0.8 0.8 30%;
    overflow: hidden;
}
.top__lead__fig__li--lawson2021 > img{
  margin-bottom: -30%;
}
@media screen and (min-width: 768px) {
    .top__lead{
        display:-webkit-flex;
        display:flex;
        -webkit-flex-direction:row-reverse;
        flex-direction:row-reverse;
        background:#fff;
        border-radius:11px;
        z-index:1;
    }
    .top__lead__txt__main{
        text-align:left;
        font-size:2.8vw;
        margin:15px 15px 0.1em 0;
        line-height:1.1;
    }
    .top__lead__txt__sub{
        display:block;
        margin:0.5em 15px 15px 0;
        font-size:1.75vw;
    }
    :lang(en) .top__lead__txt__sub{
        display:none;
    }
    .top__lead__fig{
      flex-basis: calc(100% - 22rem);
      margin: 0 1.5em;
    }
    .top__lead__fig__sample{
        display:block;
        flex:0 0 20%;
        border:solid 1px #bbb;
    }
    .no-flexbox .top__lead{
        width:100%;
    }
    .no-flexbox .top__lead:after{
        content:"";
        display:table;
        clear:both;
    }
    .no-flexbox .top__lead__fig{
        float:left;
        width:52%;
        margin:10px 0 10px 10px;
    }
    .no-flexbox .top__lead__txt{
        float:right;
        width:45%;
    }
    .no-flexbox .top__lead__fig img{
        max-height:13vw;
    }
    .no-cssvwunit .top__lead{
        position:static;
    }
}
@media screen and (min-width: 850px) {
    .top__lead__txt__sub{
        font-size:0.94rem;
    }
}
@media screen and (min-width: 1054px) {
    .top__lead__txt__main{
        font-size:2rem;
    }
    .top__lead__txt__sub{
        font-size:1rem;
    }
    .no-flexbox .top__lead{
        height:232px;
    }
    .no-flexbox .top__lead__fig img{
        max-height:150px;
    }
}

.home-video{
    margin-bottom: 1rem;
    padding: 1rem;
    border: none;
    background: #f6f6f6;
}
@media screen and (min-width: 768px) {
    .home-video{
        padding: 2rem;
    }
}
/*流れ*/

@counter-style top-flow-style {
  system: cyclic;
  symbols: '\2776' '\2777' '\2778' '\2779' '\277A' '\277B' '\277C' '\277D' '\277E' '\277F';
  suffix: " ";
}

.top__flow{
    display:flex;
    align-items:flex-start;
    justify-content: space-between;
    flex-wrap:wrap;
    counter-reset: top-flow;
    gap: 4%;
    margin: 0.5rem 0 0;
    padding:0;
    font-size: 4vw;
}

.top__flow li{
    flex:0 1 45%;
    display:flex;
    align-items:flex-start;
    flex-direction:column-reverse;
    counter-increment: top-flow;
}
.top__flow li::before{
    display: none;
}

.top__flow li:last-child{
    background:none;
}

.top__flow--txt {
    margin: 0.5em -0.3em 0 0;
    word-break: keep-all;
}
.top__flow--txt::before {
    display: inline-block;
    content: counter(top-flow, top-flow-style);
    width: auto;
    height: auto;
    margin: 0 0.1em 0 0;
    background: none;
    color: inherit;
    font-weight: normal;
    font-family: inherit;
}
.top__flow--txt > .nobraking{
    text-indent:0;
}
.top__flow--txt > .nobraking:first-child::first-letter{
    margin-right:0.25em;
}
.top__flow--img{
  align-self: stretch;
    margin-bottom:0.5em;
    position: relative;
}
.top__flow--img::before{
  content: "";
  display: block;
  position: absolute;
  right: -17%;
  top: 50%;
  transform: translateY(-50%);
  width: 5cqw;
  height: 1px;
  background: #000;
}
.top__flow--img::after{
  content: "";
  display: block;
  position: absolute;
  right: -16%;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  width: 4cqw;
  height: 4cqw;
  border-top: solid 1px #000;
  border-right: solid 1px #000;
}
li:last-of-type > .top__flow--img::before,
li:last-of-type > .top__flow--img::after{
  display: none;
}
.top__flow--img > img{
    border: solid 3px #d2d2d2;
    border-radius: 2cqw;
    overflow: hidden;
}

.top__flow--img img{
    width:100%;
}

@media screen and (min-width: 375px) {
    .top__flow{
        flex-wrap: nowrap;
        margin-right: 0;
        font-size:3vw;
    }
    .top__flow li{
        flex:1 1 25%;
    }
    .top__flow--img::before{
      right: -13%;
      width: 2cqw;
    } 
.top__flow--img::after{
  right: -13%;
  width: 1.5cqw;
  height: 1.5cqw;
}
    .half__flow{
      font-size:1.5vw;
    }
}

@media screen and (min-width: 590px) {
  .top__flow{
    font-size: 1em;
  }
 .top__flow--img::before{
    height: 2px;
    } 
.top__flow--img::after{
    border-width: 2px;
}

}
@media screen and (min-width: 1024px) {
  .half__flow{
    font-size:1rem;
  }
    .top__flow--img::before{
      right: -14%;
      width: 1.6em;
    } 
.top__flow--img::after{
  right: -13%;
  width: 1.2em;
  height: 1.2em;
}
}

.home .movie.column{
    border: none;
}

.home .sampleph{
    border: none;
    box-shadow: none;
}

.movie.column{
    padding: 0;
}
.movie.column .column__ttl{
    margin: 0;
}
.column__ttl{
    margin:-1px 0 0;
    font-size:1.1rem;
    text-align:center;
    font-weight:normal;
}
.column__ttl:before{
    display:none;
}
@media (min-width: 768px) {
.column__ttl{
    font-size:1.34rem;
}
}