html {
    box-sizing: border-box;
    -webkit-text-size-adjust: 100%;
    word-break: normal;
    -moz-tab-size: 4;
    -o-tab-size: 4;
    tab-size: 4;
    font-family: "Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif
}

*,::before,::after {
    background-repeat: no-repeat;
    box-sizing: inherit
}

::before,::after {
    text-decoration: inherit;
    vertical-align: inherit
}

* {
    padding: 0;
    margin: 0
}

hr {
    overflow: visible;
    height: 0;
    color: inherit
}

details,main {
    display: block
}

summary {
    display: list-item
}

[hidden] {
    display: none
}

abbr[title] {
    border-bottom: none;
    text-decoration: underline;
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted
}

a {
    background-color: rgba(0,0,0,0)
}

a:active,a:hover {
    outline-width: 0
}

code,kbd,pre,samp {
    font-family: monospace,monospace
}

pre {
    font-size: 1em
}

b,strong {
    font-weight: bolder
}

sub,sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline
}

sub {
    bottom: -0.25em
}

sup {
    top: -0.5em
}

table {
    border-color: inherit;
    text-indent: 0
}

iframe {
    border-style: none
}

input {
    border-radius: 0
}

[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button {
    height: auto
}

[type=search] {
    -webkit-appearance: textfield;
    outline-offset: -2px
}

[type=search]::-webkit-search-decoration {
    -webkit-appearance: none
}

textarea {
    overflow: auto;
    resize: vertical
}

button,input,optgroup,select,textarea {
    font: inherit
}

optgroup {
    font-weight: bold
}

button {
    overflow: visible
}

button,select {
    text-transform: none
}

button,[type=button],[type=reset],[type=submit],[role=button] {
    cursor: pointer
}

button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner {
    border-style: none;
    padding: 0
}

button:-moz-focusring,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner {
    outline: 1px dotted ButtonText
}

button,html [type=button],[type=reset],[type=submit] {
    -webkit-appearance: button
}

button,input,select,textarea {
    background-color: rgba(0,0,0,0);
    border-style: none
}

a:focus,button:focus,input:focus,select:focus,textarea:focus {
    outline-width: 0
}

select {
    -moz-appearance: none;
    -webkit-appearance: none
}

select::-ms-expand {
    display: none
}

select::-ms-value {
    color: currentColor
}

legend {
    border: 0;
    color: inherit;
    display: table;
    max-width: 100%;
    white-space: normal;
    max-width: 100%
}

::-webkit-file-upload-button {
    -webkit-appearance: button;
    color: inherit;
    font: inherit
}

[disabled] {
    cursor: default
}

img {
    border-style: none
}

progress {
    vertical-align: baseline
}

[aria-busy=true] {
    cursor: progress
}

[aria-controls] {
    cursor: pointer
}

[aria-disabled=true] {
    cursor: default
}

ol,ul,li {
    list-style-type: none
}

a {
    text-decoration: none
}

a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,ul,var,video {
    padding: 0;
    border: 0;
    font-size: 100%;
    vertical-align: baseline;
    box-sizing: border-box;
    color: inherit
}

img {
    width: 100%
}

svg {
    overflow: hidden
}

h1,h2,h3,h4,h5,h6 {
    font-weight: normal
}

button {
    color: inherit
}

*:focus {
    outline: none;
    -webkit-tap-highlight-color: rgba(0,0,0,0)
}

* {
    -webkit-tap-highlight-color: rgba(0,0,0,0)
}
@font-face {
  font-family: 'Shippori Mincho';
  src: url('../fonts/ShipporiMincho-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

body{font-family:'Shippori Mincho',sans-serif;font-weight:400;color:#313439;line-height:1.5;letter-spacing:0.2em;font-style:normal}
/* .pc-content--left{
  background: url(../images/side1.jpg)no-repeat center;
  background-size: cover;
}
.pc-content--right{
  background: url(../images/side2.jpg)no-repeat center;
  background-size: cover;
} */

/* @media screen and (min-width:767px) {
  .wrapper {
      background-image: url("../images/pc_bg.jpg");
      background-repeat: no-repeat;
      background-size: cover;
      background-attachment: fixed;
      background-position: center;
  }
} */
.wrapper.has-animation {
    transition: all 1.2s ease;
    opacity: 1
}

@media screen and (max-width: 768px) {
    body {
        font-size:13px;
        font-size: 3.5vw
    }

    /* .wrapper {
        background-image: url("../images/sp_bg.jpg");
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        padding-top: 0;
    } */
}

@media screen and (min-width: 769px) {
    body {
        font-size:13px;
        font-size: .9vw
    }
}

svg {
    width: 100%;
    height: auto
}

.opening {
    z-index: 10;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.opening__logo {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translateY(-50%);
    translate: -50% 0;
    width: 80%;
    z-index: 1;
}

@media screen and (min-width: 769px) {
    .opening__logo {
        width:30%;
        max-width: 500px;
        z-index: 1;
    }
}

.opening.has-animation {
    transition: all 1.0s ease;
    opacity: 1
}

.opening.has-animation .catch__1,.opening.has-animation .catch__2,.opening.has-animation .catch::before,.opening.has-animation .catch::after {
    opacity: 0;
    transition: all 1.2s ease
}

.opening.has-animation .catch__1,.opening.has-animation .catch::before {
    translate: 0 10px
}

.opening.has-animation .catch__2,.opening.has-animation .catch::after {
    translate: 0 -10px
}

.opening.has-animation .catch__1,.opening.has-animation .catch__2 {
    transition-delay: .2s
}

.opening.has-animation .catch::before,.opening.has-animation .catch::after {
    transition-delay: .3s
}

.opening.has-animation.active .catch__1,.opening.has-animation.active .catch__2,.opening.has-animation.active .catch::before,.opening.has-animation.active .catch::after {
    opacity: 1;
    translate: 0
}

.opening.has-animation.close {
    opacity: 0;
}

@media screen and (max-width: 769px) {
    .scroll-content {
        width:100%;
        margin: -2% auto 0;
        padding: 0;
        z-index: 100;
    }
}

@media screen and (min-width: 769px) {
    .scroll-content {
        width:34%;
        max-width: 600px;
        margin: -0.5% auto 0;
        padding: 0;
        transition: color .6s ease;
        position: relative;
        z-index: 100;
    }

    /* .scroll-content::before, .scroll-content::after {
        z-index: 100;
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        transition: opacity .6s ease
    } */
}

@media screen and (max-width: 768px) {
    .pc-content {
        display:none
    }
}

@media screen and (min-width: 769px) {
    .pc-content {
        width:33%;
        height: 100%;
        position: fixed;
        top: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: color .6s ease
    }

    .pc-content::before, .pc-content::after {
        z-index: -1;
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        transition: opacity .6s ease
    }

    .pc-content.has-animation {
        opacity: 0;
        translate: 0 7px;
        transition: all 1.2s ease
    }

    .pc-content.has-animation .pc-content__border {
        top: 50%;
        height: 0%;
        transition: all .8s ease
    }

    .pc-content.has-animation.is-loaded {
        opacity: 1;
        translate: 0 0px
    }

    .pc-content.has-animation.is-loaded.pc-content__border {
        top: 0%;
        height: 100%
    }
}

.pc-content svg path {
    transition: fill .6s ease
}

.pc-content .left__logo #slash {
    transition: stroke .6s ease
}

.pc-content__border {
    position: absolute;
    top: 0;
    width: 1px;
    height: 100%;
    background-color: #fff;
    transition: background-color .6s ease
}

.pc-content--left {
    left: 0
}

.pc-content--left .pc-content__border {
    right: 3px
}

.pc-content--right {
    right: 0
}

.pc-content--right .pc-content__border {
    left: 3px
}

.pc-content .menu__item {
    color: #fff
}

.pc-content.active::before {
    opacity: 0
}

.pc-content.active::after {
    opacity: 1
}

.pc-content.active svg path {
    fill: #ffff
}

.pc-content.active .left__logo #slash {
    stroke: #ffff
}

.pc-content.active .left__starring {
    color: #ffff
}

.pc-content.active .pc-content__border {
    background-color: #ffff
}

.pc-content.active .menu__item,.pc-content.active .right__copyright {
    color: #ffff
}

.pc-content.active .right__goto-brandtop {
    border-color: #ffff
}

.pc-content.active .right__sns__link__white {
    opacity: 0
}

.pc-content.active .right__sns__link__blue {
    opacity: 1
}

.pc-content.active .goto-allitems__text {
    color: #ffff
}

.pc-content.active .goto-allitems__link::before {
    border-color: #fff
}

.pc-content.active .goto-allitems__link__text {
    color: #fff
}

.pc-content.active .goto-allitems__link__text svg path {
    fill: #fff
}

.pc-content.active .goto-allitems__link__bg::before {
    opacity: 0
}

.pc-content.active .goto-allitems__link__bg::after {
    opacity: 1
}

.left {
    width: 48%;
    text-align: center
}

.left__logo {
    width: 65%;
    font-size: 0;
    line-height: 1;
    margin: 0 auto 7%
}

.left__ttl {
    font-size: 0;
    line-height: 1;
    margin-bottom: 5%
}

.left__starring {
    font-family: "gotham",sans-serif;
    font-weight: 400;
    line-height: 1.2;
    font-weight: 400;
    letter-spacing: 0;
    margin-bottom: 10%;
    transition: color .6s ease
}

@media screen and (max-width: 768px) {
    .left__starring {
        font-size:15px;
        font-size: 4vw
    }
}

@media screen and (min-width: 769px) {
    .left__starring {
        font-size:15px;
        font-size: 1vw
    }
}

.right {
    width: 55%;
    max-width: 230px;
    margin: auto;
    ;}

.right__ttl {
    max-width: 108px;
    transition: color .6s ease;
    margin: auto;
}
.menu1{max-width: 163px;margin-bottom: 2em;margin-top: 1em;}
.menu2{max-width: 165px;}
.menu3{max-width: 178px;margin-bottom: 2em;margin-top: 4em;}
.menu4{max-width: 197px;}

@media screen and (max-width: 768px) {
    .right__ttl {

    }
}

@media screen and (min-width: 769px) {
    .right__ttl {

    }
}

.right__goto-brandtop {
    width: 100%;
    padding: 5.5% 0 3.5%;
    margin-bottom: 10.5%;
    display: block;
    text-align: center;
    font-size: 0;
    line-height: 1;
}

.right__goto-brandtop__logo {
    max-width: 150px;
    margin: 0 auto 2%
}

.right__goto-brandtop__text {
    width: 30%;
    margin: auto
}

.right__goto-brandtop:hover {
    opacity: .7
}

.right__sns {
    position: absolute;
    bottom: 3%;
    right: 5%;
    width: 20%;
    display: flex;
    align-items: center;
}

.right__sns__link {
    line-height: 1;
    font-size: 0;
    width: 46%;
    margin: 0 2% position:relative;
    opacity: 1;
    transition: opacity .3s ease
}

.right__sns__link>img {
    width: 100%
}

.right__sns__link:not(:last-child) {
    margin-right: 7%
}

.right__sns__link__white {
    opacity: 1;
}

.right__sns__link__blue {
    z-index: 9;
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    transition: opacity .6s ease
}

.right__sns__link:hover {
    opacity: .7
}

.right__allmenu {
    transition: color .6s ease;
    padding: 1.5% 0;
    font-size: 0;
    line-height: 1;
    text-align: center;
}

.footer__sns {
    width: 20%;
    position: relative;
    margin: -27% auto 5%;
    align-items: center;
}

.footer__sns__link {
    line-height: 1;
    font-size: 0;
    width: 46%;
    margin: 0 2% position:relative;
    opacity: 1;
    transition: opacity .3s ease
}

.footer__sns__link>img {
    width: 100%
}

.footer__sns__link:not(:last-child) {
    margin-right: 7%
}

.footer__sns__link:hover {
    opacity: .7
}

.mv {
    position: relative;
    overflow: hidden;
    margin-top: -1.2%;
}

.mv.has-animation {
    opacity: 1;
    translate: 0 7px;
    transition: all 1.2s ease
}

.mv.has-animation .catch__1, .mv.has-animation .catch__2, .mv.has-animation .catch::before, .mv.has-animation .catch::after {
    opacity: 0;
    transition: all 1.2s ease
}

.mv.has-animation .catch__1, .mv.has-animation .catch::before {
    translate: 0 10px
}

.mv.has-animation .catch__2, .mv.has-animation .catch::after {
    translate: 0 -10px
}

.mv.has-animation .catch__1, .mv.has-animation .catch__2 {
    transition-delay: .2s
}

.mv.has-animation .catch::before, .mv.has-animation .catch::after {
    transition-delay: .3s
}

.mv.has-animation .catch__1, .mv.has-animation .catch__2 {
    transition-delay: 1s
}

.mv.has-animation .catch::before, .mv.has-animation .catch::after {
    transition-delay: 1.1s
}

.mv.has-animation .mv__photo-wrapper {
    opacity: 0;
    translate: 0 7px;
    transition: all 1.2s ease;
}

.mv.has-animation .mv__text-wrapper {
    z-index:10;position:absolute;top:0;left:0;width:100%;height:100vh;display: flex;justify-content: center;align-items: end;
}

.mv.has-animation .mv__starring {
    opacity: 0;
    translate: 0 7px;
    transition: all 1.2s ease;
    transition-delay: .12s
}

.mv.has-animation.is-loaded .catch__1, .mv.has-animation.is-loaded .catch__2, .mv.has-animation.is-loaded .catch::before, .mv.has-animation.is-loaded .catch::after {
    opacity: 1;
    translate: 0
}

.mv.has-animation.is-loaded .mv__photo-wrapper {
    opacity: 1;
    translate: 0 0px
}

.mv.has-animation.is-loaded .mv__starring {
    opacity: 1;
    translate: 0 0px
}
.mv__text-box{position:absolute;top:1.3%;left:3.5%;width:25%}

.scroll-box{margin-top: 20px;}

@media screen and (min-width: 769px) {
    .mv__text-box {
        top:1.3%;
        left: 3.5%;
        width: 20%
    }
}

.mv__text-box--blend {
    z-index: 10
}

/* .mv__ttl{width:85%;margin-bottom:61vw;} */

/* .mv__ttl>img{position:absolute;top:0;left:0;width:100%;} */
.mv__float{
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  width: 80%;
}
.mv__ttl {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1s ease, transform 1s ease;
}

.mv__ttl.show {
  opacity: 1;
  transform: translateY(0);
}


.mv__ttl__4 {
    mix-blend-mode: exclusion
}

.mv__starring {
    color: #ffff;
    font-family: "gotham",sans-serif;
    font-weight: 400;
    line-height: 1.2;
    font-weight: 400;
    letter-spacing: 0
}

@media screen and (max-width: 768px) {
    .mv__starring {
        font-size:12px;
        font-size: 3.2vw
    }
}

@media screen and (min-width: 769px) {
    .mv__starring {
        font-size:12px;
        font-size: .8vw
    }
}

.mv__photo {
    z-index: 1;
    position: relative;
    font-size: 0;
    line-height: 1
}

.mv__photo-cover {
    z-index: 11;
    position: absolute;
    bottom: 0%;
    left: 50%;
    width: 46.45%;
    translate: -66.6% -26.5%
}

.intro{padding:15% 4%;}
.intro__lead{text-align:center;letter-spacing:0.2em;line-height:2.5;color: #fff;}
@media screen and (max-width: 768px){
.intro__lead{font-size:16px;font-size:3.3vw}}
@media screen and (min-width: 769px){
.intro__lead{font-size:clamp(12px, calc(16 / 1600 * 100vw), 20px);}}


.catch {
    z-index: 9;
    position: absolute;
    writing-mode: vertical-rl;
    text-orientation: upright;
    white-space: nowrap;
    color: #ffff;
    font-family: "dnp-shuei-mincho-pr6",sans-serif;
    font-weight: 400;
    letter-spacing: -0.05em;
    line-height: 1.4
}

@media screen and (max-width: 768px) {
    .catch {
        font-size:14px;
        font-size: 3.6vw
    }
}

@media screen and (min-width: 769px) {
    .catch {
        font-size:14px;
        font-size: 1.3vw
    }
}

.catch::before,.catch::after {
    content: "";
    position: absolute;
    width: .6em;
    height: .6em
}

.catch::before {
    top: -1em;
    right: -0.3em;
}

.catch::after {
    bottom: -0.3em;
    left: -0.1em;
}

.catch__1,.catch__2 {
    display: inline-block
}

.catch__2 {
    margin-top: 6.2em
}

.catch--mv {
    top: 3%;
    right: 5%;
    letter-spacing: 0.2em;
}

.catch--mv .catch__1 {
    font-size: 110%;
}

.catch--01 {
    top: 1em;
    right: 0.9em;
    color: #333;
    letter-spacing: 0.2em;
}

.catch--02 {
    color: #333;
    top: 1em;
    right: 1.4em
}

.catch--03 {
    top: 1em;
    left: 3.8em
}

.catch--opening {
    color: #fff;
    letter-spacing: .05em;
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -56.5%
}

@media screen and (max-width: 768px) {
    .catch--opening {
        font-size:16px;
        font-size: 4.3vw
    }
}

@media screen and (min-width: 769px) {
    .catch--opening {
        font-size:16px;
        font-size: 1.1vw
    }
}

@media screen and (min-width: 769px)and (max-width: 768px) {
    .catch--opening {
        font-size:22px;
        font-size: 5.9vw
    }
}

@media screen and (min-width: 769px)and (min-width: 769px) {
    .catch--opening {
        font-size:22px;
        font-size: 1.5vw
    }
}

.catch--opening::before {
    top: -1em;
    right: -0.3em;
}

.catch--opening::after {
    bottom: .2em;
    left: -0.2em;
}

.catch--opening .catch__2 {
    margin-top: 3em
}

.lineup-product--narrow {
    width: 100%
}

.lineup-product--002 {
    color: #ffff;
    position: relative;
    margin-top: 10%;
    padding-left: 3%
}

.lineup-product--003 {
    color: #ffff;
    position: relative;
    margin-top: 19%
}

.lineup-product__img {
    font-size: 0;
    line-height: 1
}

.lineup-product__img--001 {
    padding-right: 5%;
    margin-bottom: 4%
}

.lineup-product__img--002 {
    width: 79%;
    margin-bottom: 5%;
    position: relative
}

.lineup-product__img--002>img {
    transition: opacity .8s ease
}

.lineup-product__img--002__1 {
    opacity: 1
}

.lineup-product__img--002__2 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0
}

.lineup-product__img--002.active .lineup-product__img--002__2 {
    opacity: 1
}

.lineup-product__img--003--1 {
    padding-left: 40%;
    padding-right: 5%
}

.lineup-product__img--003--2 {
    margin-top: -6%;
    padding-left: 5%;
    padding-right: 22%;
    margin-bottom: 5%
}

.lineup-product--001.has-animation .lineup-product__img {
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    transition: -webkit-mask-position 1.2s ease-in-out;
    transition: mask-position 1.2s ease-in-out;
    transition: mask-position 1.2s ease-in-out, -webkit-mask-position 1.2s ease-in-out;
    -webkit-mask-size: 300%,100%;
    mask-size: 300%,100%;
    -webkit-mask-position: 0 100%;
    mask-position: 0 100%;
    transition: -webkit-mask-position 1s ease-out;
    transition: mask-position 1s ease-out;
    transition: mask-position 1s ease-out, -webkit-mask-position 1s ease-out
}

.lineup-product--001.has-animation .lineup-product__list__item {
    opacity: 0;
    translate: 0 7px;
    transition: all 1.2s ease
}

.lineup-product--001.has-animation .lineup-product__list__item:nth-of-type(1) {
    transition-delay: .3s
}

.lineup-product--001.has-animation .lineup-product__list__item:nth-of-type(2) {
    transition-delay: .5s
}

.lineup-product--001.has-animation.active .lineup-product__img {
    -webkit-mask-position: 0 0;
    mask-position: 0 0
}

.lineup-product--001.has-animation.active .lineup-product__list__item {
    opacity: 1;
    translate: 0 0px
}

.lineup-product--002.has-animation .catch__1,.lineup-product--002.has-animation .catch__2,.lineup-product--002.has-animation .catch::before,.lineup-product--002.has-animation .catch::after {
    opacity: 0;
    transition: all 1.2s ease
}

.lineup-product--002.has-animation .catch__1,.lineup-product--002.has-animation .catch::before {
    translate: 0 10px
}

.lineup-product--002.has-animation .catch__2,.lineup-product--002.has-animation .catch::after {
    translate: 0 -10px
}

.lineup-product--002.has-animation .catch__1,.lineup-product--002.has-animation .catch__2 {
    transition-delay: .2s
}

.lineup-product--002.has-animation .catch::before,.lineup-product--002.has-animation .catch::after {
    transition-delay: .3s
}

.lineup-product--002.has-animation .lineup-product__img {
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    transition: -webkit-mask-position 1.2s ease-in-out;
    transition: mask-position 1.2s ease-in-out;
    transition: mask-position 1.2s ease-in-out, -webkit-mask-position 1.2s ease-in-out;
    -webkit-mask-size: 750%,100%;
    mask-size: 750%,100%;
    -webkit-mask-position: 0 100%;
    mask-position: 0 100%;
    transition: -webkit-mask-position 1.2s ease-out;
    transition: mask-position 1.2s ease-out;
    transition: mask-position 1.2s ease-out, -webkit-mask-position 1.2s ease-out
}

.lineup-product--002.has-animation .lineup-product__list__item {
    opacity: 0;
    translate: 0 7px;
    transition: all 1.2s ease
}

.lineup-product--002.has-animation .lineup-product__list__item:nth-of-type(1) {
    transition-delay: .3s
}

.lineup-product--002.has-animation .lineup-product__list__item:nth-of-type(2) {
    transition-delay: .5s
}

.lineup-product--002.has-animation.active .catch__1,.lineup-product--002.has-animation.active .catch__2,.lineup-product--002.has-animation.active .catch::before,.lineup-product--002.has-animation.active .catch::after {
    opacity: 1;
    translate: 0
}

.lineup-product--002.has-animation.active .lineup-product__img {
    -webkit-mask-position: 0 0;
    mask-position: 0 0
}

.lineup-product--002.has-animation.active .lineup-product__list__item {
    opacity: 1;
    translate: 0 0px
}

.lineup-product--003.has-animation .catch__1,.lineup-product--003.has-animation .catch__2,.lineup-product--003.has-animation .catch::before,.lineup-product--003.has-animation .catch::after {
    opacity: 0;
    transition: all 1.2s ease
}

.lineup-product--003.has-animation .catch__1,.lineup-product--003.has-animation .catch::before {
    translate: 0 10px
}

.lineup-product--003.has-animation .catch__2,.lineup-product--003.has-animation .catch::after {
    translate: 0 -10px
}

.lineup-product--003.has-animation .catch__1,.lineup-product--003.has-animation .catch__2 {
    transition-delay: .2s
}

.lineup-product--003.has-animation .catch::before,.lineup-product--003.has-animation .catch::after {
    transition-delay: .3s
}

.lineup-product--003.has-animation .lineup-product__img--003--1 {
    -webkit-;-webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    transition: -webkit-mask-position 1.2s ease-in-out;
    transition: mask-position 1.2s ease-in-out;
    transition: mask-position 1.2s ease-in-out, -webkit-mask-position 1.2s ease-in-out;
    -webkit-mask-size: 400%,100%;
    mask-size: 400%,100%;
    -webkit-mask-position: 0 100%;
    mask-position: 0 100%;
    transition: -webkit-mask-position 1s ease-out;
    transition: mask-position 1s ease-out;
    transition: mask-position 1s ease-out, -webkit-mask-position 1s ease-out
}

.lineup-product--003.has-animation.active .catch__1,.lineup-product--003.has-animation.active .catch__2,.lineup-product--003.has-animation.active .catch::before,.lineup-product--003.has-animation.active .catch::after {
    opacity: 1;
    translate: 0
}

.lineup-product--003.has-animation.active .lineup-product__img--003--1 {
    -webkit-mask-position: 0 0;
    mask-position: 0 0
}

.lineup-product .lineup-product__img--003--2.has-animation {
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    transition: -webkit-mask-position 1.2s ease-in-out;
    transition: mask-position 1.2s ease-in-out;
    transition: mask-position 1.2s ease-in-out, -webkit-mask-position 1.2s ease-in-out;
    -webkit-mask-size: 500%,100%;
    mask-size: 500%,100%;
    -webkit-mask-position: 0 100%;
    mask-position: 0 100%;
    transition: -webkit-mask-position 1.1s ease-out;
    transition: mask-position 1.1s ease-out;
    transition: mask-position 1.1s ease-out, -webkit-mask-position 1.1s ease-out
}

.lineup-product .lineup-product__img--003--2.has-animation+.lineup-product__list-box .lineup-product__list__item {
    opacity: 0;
    translate: 0 7px;
    transition: all 1.2s ease
}

.lineup-product .lineup-product__img--003--2.has-animation+.lineup-product__list-box .lineup-product__list__item:nth-of-type(1) {
    transition-delay: .3s
}

.lineup-product .lineup-product__img--003--2.has-animation+.lineup-product__list-box .lineup-product__list__item:nth-of-type(2) {
    transition-delay: .5s
}

.lineup-product .lineup-product__img--003--2.has-animation.active {
    -webkit-mask-position: 0 0;
    mask-position: 0 0
}

.lineup-product .lineup-product__img--003--2.has-animation.active+.lineup-product__list-box .lineup-product__list__item {
    opacity: 1;
    translate: 0 0px
}

.lineup-product__list {
    display: table;
    border-collapse: separate;
    border-spacing: 10px
}

.lineup-product__list-box {
    display: flex;
    justify-content: center
}

.lineup-product__list__item {
    display: table-row
}

.lineup-product__list__item:not(:last-child) {
    margin-bottom: 4%
}

.lineup-product__list__item>* {
    display: table-cell
}

.lineup-product__list__item>p {
    margin-right: 1em;
    font-family: "gotham",sans-serif;
    font-weight: 400;
    font-weight: 500;
    letter-spacing: -0.02em
}

@media screen and (max-width: 768px) {
    .lineup-product__list__item>p {
        font-size:12px;
        font-size: 3.2vw
    }
}

@media screen and (min-width: 769px) {
    .lineup-product__list__item>p {
        font-size:12px;
        font-size: .8vw
    }
}

.lineup-product__link {
    background-color: #fff;
    color: #ffff;
    font-family: "benton-modern-display-conden",serif;
    font-weight: 400;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1;
    border-radius: 50%;
    text-align: center;
    min-width: 61px;
    padding: 2.5% 0;
    position: relative
}

@media screen and (max-width: 768px) {
    .lineup-product__link {
        font-size:12px;
        font-size: 3.2vw
    }
}

@media screen and (min-width: 769px) {
    .lineup-product__link {
        font-size:12px;
        font-size: .8vw
    }
}

@media screen and (min-width: 769px) {
    .lineup-product__link {
        padding:5% 0
    }
}

.lineup-product__link::before {
    content: "";
    position: absolute;
    top: 2px;
    bottom: 2px;
    left: 2px;
    right: 2px;
    border: 1px solid #000;
    ;border-radius: 50%
}

.lineup-product__link--blue {
    background-color: #ffff;
    color: #fff
}

.lineup-product__link--blue::before {
    border-color: #fff
}

.section-lineup {
}

.section-lineup.has-animation .section-header {
    -webkit-clip-path: inset(0 50% 0 50%);
    clip-path: inset(0 50% 0 50%);
    transition: -webkit-clip-path 3s ease-out;
    transition: clip-path 3s ease-out;
    transition: clip-path 3s ease-out, -webkit-clip-path 3s ease-out
}

.section-lineup.has-animation.active .section-header {
    -webkit-clip-path: inset(0 0% 0 0%);
    clip-path: inset(0 0% 0 0%)
}

.section-interview {
    padding-top: 13%
}

.section-interview__intro {
    text-align: center;
    margin-bottom: 6%
}

.section-interview__intro__line {
    font-family: "dnp-shuei-mincho-pr6",sans-serif;
    font-weight: 600;
    color: #ffff;
    line-height: 2.1;
    letter-spacing: -0.05em;
    background: linear-gradient(rgb(255, 255, 255) 0%, rgb(255, 255, 255) 100%);
    padding: .2em 0
}

@media screen and (max-width: 768px) {
    .section-interview__intro__line {
        font-size:15px;
        font-size: 4vw
    }
}

@media screen and (min-width: 769px) {
    .section-interview__intro__line {
        font-size:15px;
        font-size: 1vw
    }
}

.section-interview.has-animation .section-header {
    -webkit-clip-path: inset(0 50% 0 50%);
    clip-path: inset(0 50% 0 50%);
    transition: -webkit-clip-path 3s ease-out;
    transition: clip-path 3s ease-out;
    transition: clip-path 3s ease-out, -webkit-clip-path 3s ease-out
}

.section-interview.has-animation .section-interview__intro {
    -webkit-clip-path: inset(0 50% 0 50%);
    clip-path: inset(0 50% 0 50%);
    transition: -webkit-clip-path 1.2s ease-out;
    transition: clip-path 1.2s ease-out;
    transition: clip-path 1.2s ease-out, -webkit-clip-path 1.2s ease-out;
    transition-delay: .4s
}

.section-interview.has-animation.active .section-header {
    -webkit-clip-path: inset(0 0% 0 0%);
    clip-path: inset(0 0% 0 0%)
}

.section-interview.has-animation.active .section-interview__intro {
    -webkit-clip-path: inset(0 0% 0 0%);
    clip-path: inset(0 0% 0 0%)
}

.section-header {
    color: #ffff;
    text-align: center;
    line-height: 1;
    margin-bottom: 6.5%
}

.section-header__ja {
    font-weight: 600;
    letter-spacing: -0.08em;
    margin-bottom: 1%
}

@media screen and (max-width: 768px) {
    .section-header__ja {
        font-size:10px;
        font-size: 2.7vw
    }
}

@media screen and (min-width: 769px) {
    .section-header__ja {
        font-size:10px;
        font-size: .7vw
    }
}

.section-header__en {
    font-family: "benton-modern-display-conden",serif;
    font-weight: 400;
    letter-spacing: -0.06em;
    font-style: italic;
    margin-bottom: 1%
}

@media screen and (max-width: 768px) {
    .section-header__en {
        font-size:43px;
        font-size: 11.5vw
    }
}

@media screen and (min-width: 769px) {
    .section-header__en {
        font-size:43px;
        font-size: 3vw
    }
}

.section-header__en__text {
    position: relative
}

.section-header__en__text::after {
    content: "";
    position: absolute;
    bottom: .21em;
    left: -6%;
    width: 114%;
    height: 1px;
    background-color: #ffff
}

.section-header__arrow {
    width: 7%;
    margin: auto
}

.section-header--white .section-header__ja {
    color: #fff
}

.section-header--white .section-header__en {
    color: #fff
}

.section-header--white .section-header__en__text::after {
    background-color: #fff
}

.lineup--02 {
    margin-top: -45vw;
    position: relative;
    padding-top: 60vw
}

@media screen and (min-width: 769px) {
    .lineup--02 {
        padding-top:50vw
    }
}

.lineup--02::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 90%;
}

@media screen and (min-width: 769px) {
    .lineup--02::after {
        top:30vw;
        height: 116vw
    }
}

.lineup--03 {
    padding-top: 14vw
}

@media screen and (min-width: 769px) {
    .lineup--03 {
        padding-top:6vw
    }
}

.lineup__inner {
    z-index: 1;
    position: relative
}

.lineup-header {
    text-align: left;
    margin: 15% auto 8%
}

.item1 .lineup-header__ttl {
  width: 70%;
}
.item2 .lineup-header__ttl {
  width: 70%;
}
.item1 .lineup-header__ttl+p,
.item2 .lineup-header__ttl+p {
  width: 100%;
  letter-spacing: .1em;
  font-size: clamp(12px, calc(15 / 375 * 100vw), 18px);
}

.lineup-header.has-animation {
    opacity: 0;
    opacity: 0;
    translate: 0 7px;
    transition: all 1.2s ease
}

.lineup-header.has-animation.active {
    opacity: 1;
    translate: 0 0px
}

.lineup-header__inner {
    display: inline-block
}

.lineup-header__num {
    margin-bottom: 3.5%
}

.lineup-header__num__inner {
    position: relative;
    font-family: "gotham",sans-serif;
    font-weight: 400;
    font-weight: 500;
    letter-spacing: 0;
    color: #8ca0aa;
    font-size: 22px;
}

.lineup-header__num__inner::before, .lineup-header__num__inner::after {
    position: absolute;
    top: -1px
}

.lineup-header__num__to {
    font-weight: 400
}

@media screen and (max-width: 768px) {
    .lineup-header {
        text-align:left;
        margin: 15% auto 8%;
    }

    .lineup-header__num__to {
        font-size: 11px;
        font-size: 2.9vw
    }
}

@media screen and (min-width: 769px) {
    .lineup-header__num__to {
        font-size:11px;
        font-size: .8vw
    }
}

.lineup-header__ttl {
    line-height: 1;
}

@media screen and (max-width: 768px) {
    .lineup-header__ttl {
        font-size:20px;
        font-size: 7.3vw;
    }
}

@media screen and (min-width: 769px) {
    .lineup-header__ttl {
        font-size:20px;
        font-size: 2vw;
    }
}

.lineup-primary__img {
    font-size: 0;
    line-height: 1;
    margin-bottom: 5.5%
}

.lineup-primary__info {
    width: 86%;
    margin: 15% auto 5%
}

.lineup-primary__info.has-animation .lineup-primary__info__head__colors__item {
    opacity: 0;
    translate: 0 7px;
    transition: all 1.2s ease
}

.lineup-primary__info.has-animation .lineup-primary__info__head__colors__item:nth-child(1) {
    transition-delay: 0s
}

.lineup-primary__info.has-animation .lineup-primary__info__head__colors__item:nth-child(2) {
    transition-delay: 0.1s
}

.lineup-primary__info.has-animation .lineup-primary__info__head__colors__item:nth-child(3) {
    transition-delay: 0.2s
}

.lineup-primary__info.has-animation .lineup-primary__info__head__colors__item:nth-child(4) {
    transition-delay: 0.3s
}

.lineup-primary__info.has-animation.active .lineup-primary__info__head__colors__item {
    opacity: 1;
    translate: 0 0px
}

.lineup-primary__info__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 3%;
    margin-bottom: 5%
}

.lineup-primary__info__head__ttl {
    font-family: "dnp-shuei-mincho-pr6",sans-serif;
    font-weight: 400;
    letter-spacing: 0.05em;
}

@media screen and (max-width: 768px) {
    .lineup-primary__info {
        width:86%;
        margin: 15% auto 5%
    }

    .lineup-primary__info__head__ttl {
        font-size: 15px;
        font-size: 5vw;
        padding: 0 2%;
    }

    .lineup-primary__info__lead {
        font-size: 15px;
        font-size: 3.3vw;
        padding: 0 2%;
    }
}

@media screen and (min-width: 769px) {
    .lineup-primary__info__head__ttl {
        font-size:15px;
        font-size: 2vw;
        padding: 0 2%;
    }

    .lineup-primary__info__lead_sub {
        font-size: 15px;
        font-size: 1.2vw;
        padding: 0 2%;
    }

    .lineup-primary__info__lead {
        font-size: 15px;
        font-size: 1.1vw;
        padding: 0 2%;
    }
}

.lineup-primary__info__head__colors {
    font-size: 0;
    line-height: 1;
    display: flex;
    justify-content: space-between
}

.lineup-primary__info__head__colors__item {
    height: auto;
    aspect-ratio: 1/1;
    border-radius: 50%
}

.lineup-primary__info__head__colors__item:not(:last-child) {
    margin-right: 5px
}

.lineup-primary__info__head__colors__item--001black {
    fill: #000
}

.lineup-primary__info__head__colors__item--001gray {
    fill: #7d7d7d
}

.lineup-primary__info__head__colors__item--001green {
    fill: #486a00
}

.lineup-primary__info__head__colors__item--002brown {
    fill: #7d0022;
    border: 1px solid #fff
}

.lineup-primary__info__head__colors__item--002black {
    fill: #000;
    border: 1px solid #fff
}

.lineup-primary__info__head__colors__item--003gray {
    fill: #7d7d7d
}

.lineup-primary__info__head__colors__item--003black {
    fill: #000
}

.lineup-primary__info__lead_sub {
    font-family: "dnp-shuei-mincho-pr6",sans-serif;
    font-weight: 300;
    letter-spacing: 0.1em;
    line-height: 2.0;
    padding: 0 2%;
}

.lineup-primary__info__lead_sub span {
    font-weight: bold;
}

.lineup-primary__info__lead {
    font-family: "dnp-shuei-mincho-pr6",sans-serif;
    font-weight: 300;
    letter-spacing: 0.1em;
    line-height: 1.6;
    padding: 2% 2% 4%;
}

.lineup-primary--white {
    color: #333
}

.lineup-primary--white .lineup-primary__info__head {
    border-bottom: 1px solid #fff
}

.lineup-primary--blue {
    color: #333
}

.lineup-primary--blue .lineup-primary__info__head {
    border-bottom: 1px solid #333
}

.lineup-primary.has-animation .lineup-primary__img {
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    transition: -webkit-mask-position 1.2s ease-in-out;
    transition: mask-position 1.2s ease-in-out;
    transition: mask-position 1.2s ease-in-out, -webkit-mask-position 1.2s ease-in-out;
    -webkit-mask-size: 600%,100%;
    mask-size: 600%,100%;
    -webkit-mask-position: 0 100%;
    mask-position: 0 100%;
    transition: -webkit-mask-position 1.2s ease-out;
    transition: mask-position 1.2s ease-out;
    transition: mask-position 1.2s ease-out, -webkit-mask-position 1.2s ease-out
}

.lineup-primary.has-animation.active .lineup-primary__img {
    -webkit-mask-position: 0 0;
    mask-position: 0 0
}

.lineup-sub {
    position: relative;
    font-size: 120%;
}

.lineup-sub--01 {
    overflow: hidden;
    margin-top: 11%;
    margin-bottom: 10%;
    line-height: 1
}

.lineup-sub--01 .lineup-sub__item01 {
    width: 93%;
    margin-left: 7%;
}

.lineup-sub.has-animation .catch__1, .lineup-sub.has-animation .catch__2 {
    margin-right: 3%;
}

, .lineup-sub.has-animation .catch::before, .lineup-sub.has-animation .catch::after {
    opacity: 0;
    transition: all 1.2s ease
}

.lineup-sub.has-animation .catch__1, .lineup-sub.has-animation .catch::before {
    translate: 0 10px
}

.lineup-sub.has-animation .catch__2, .lineup-sub.has-animation .catch::after {
    translate: 0 -10px
}

.lineup-sub.has-animation .catch__1, .lineup-sub.has-animation .catch__2 {
    transition-delay: .2s
}

.lineup-sub.has-animation .catch::before, .lineup-sub.has-animation .catch::after {
    transition-delay: .3s
}

.lineup-sub.has-animation.active .lineup-sub__item01>img {
    -webkit-mask-position: 0 0;
    mask-position: 0 0
}

.lineup-sub.has-animation.active .catch__1, .lineup-sub.has-animation.active .catch__2, {
    transition-delay: 1s
}

.lineup-sub.has-animation.active .catch::before, .lineup-sub.has-animation.active .catch::after {
    opacity: 1;
    translate: 0
}

@media screen and (max-width: 768px) {
    .QandA__item dt {
        font-size:14px;
        font-size: 3.7vw
    }
}

@media screen and (min-width: 769px) {
    .QandA__item dt {
        font-size:14px;
        font-size: 1vw
    }
}

.QandA__item dt>img {
    width: .7em;
    vertical-align: middle;
    margin-right: .3em;
    margin-top: -0.3em
}

.QandA__item dd>p {
    line-height: 1.55
}

.QandA__item dd>p:not(:last-child) {
    margin-bottom: 5%
}

.footer {
}

.footer__inner {
    padding: 10.5% 16% 0;
    margin-bottom: 6.5%
}

.footer__goto-brandtop {
    width: 100%;
    padding: 5% 0 4%;
    margin-bottom: 10.5%;
    display: block;
    text-align: center;
    border: 1px solid #ffff;
    font-size: 0;
    line-height: 1;
    opacity: 1;
    transition: opacity .3s ease
}

.footer__goto-brandtop__logo {
    width: 56%;
    margin: 0 auto 2%
}

.footer__goto-brandtop__text {
    width: 18%;
    margin: auto
}

.footer__goto-brandtop:hover {
    opacity: .7
}

.footer__sns {
    width: 100%;
    display: flex;
    justify-content: center
}

.footer__sns__link {
    line-height: 1;
    font-size: 0;
    opacity: 1;
    transition: opacity .3s ease
}

.footer__sns__link>img {
    width: 100%
}

.footer__sns__link:not(:last-child) {
    margin-right: 14%
}

.footer__sns__link:hover {
    opacity: .7
}

.footer__copyright {
    text-align: center;
    padding: 2.8% 0 2%;
    line-height: 1;
    font-size: 0;
    text-align: center
}

.footer__copyright img {
    width: 76%
}

.goto-allitems__link {
    display: block;
    width: 76%;
    padding: 8.5% 0;
    margin: 0 auto;
    text-align: center;
    border-radius: 50%;
    overflow: hidden;
    position: relative
}

.goto-allitems__link__text {
    z-index: 1;
    font-family: "benton-modern-display-conden",serif;
    font-weight: 400;
    font-weight: 600;
    letter-spacing: 0em;
    color: #fff;
    transition: color .6s ease;
    position: relative;
    padding-right: 6%
}

@media screen and (max-width: 768px) {
    .goto-allitems__link__text {
        font-size:15px;
        font-size: 4vw
    }
}

@media screen and (min-width: 769px) {
    .goto-allitems__link__text {
        font-size:15px;
        font-size: 1vw
    }
}

.goto-allitems__link__text svg {
    width: 18%;
    position: absolute;
    top: 27%;
    left: 92%
}

.goto-allitems__link__text svg path {
    fill: #fff;
    transition: fill .6s ease
}

.goto-allitems__link::before {
    z-index: 1;
    content: "";
    position: absolute;
    top: 2px;
    bottom: 2px;
    left: 2px;
    right: 2px;
    border: 1px solid #fff;
    border-radius: 50%;
    transition: border-color .5s ease
}

.goto-allitems__link__bg {
    z-index: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.goto-allitems__link__bg::before,.goto-allitems__link__bg::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: opacity .5s ease
}

.goto-allitems__link__bg::before {
    opacity: 0
}

.goto-allitems__link__bg::after {
    opacity: 1
}

@media screen and (min-width: 769px) {
    .goto-allitems__link {
        transition:opacity .3s ease;
        opacity: 1
    }

    .goto-allitems__link:hover {
        opacity: .7
    }
}

.goto-allitems--white .goto-allitems__text {
    color: #fff
}

.goto-allitems--white .goto-allitems__link::before {
    border-color: #ffff
}

.goto-allitems--white .goto-allitems__link__text {
    color: #ffff
}

.goto-allitems--white .goto-allitems__link__text svg path {
    fill: #ffff
}

.goto-allitems--white .goto-allitems__link__bg::before {
    opacity: 1
}

.goto-allitems--white .goto-allitems__link__bg::after {
    opacity: 0
}

.goto-allitems--pc-side .goto-allitems__link {
    width: 85%
}

.credit {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 16.5%;
    margin-bottom: 10.5%
}

.menu__item {
    transition: color .6s ease;
    color: #ffff;
    line-height: 1;
    width: 100%;
    text-align: center;
}

.menu__item a:hover {
    opacity: 0.7;
}

.menu__item>dt,.menu__item>dd {
    white-space: nowrap;
    letter-spacing: 0.1em;
    line-height: 1
}

.menu__item>dt {
    opacity: .5;
    font-family: "gotham",sans-serif;
    font-weight: 400;
    font-weight: 500;
    margin-bottom: 1%
}

@media screen and (max-width: 768px) {
    .menu__item>dt {
        font-size:10px;
        font-size: 2.7vw
    }
}

@media screen and (min-width: 769px) {
    .menu__item>dt {
        font-size:10px;
        font-size: .7vw
    }
}

.menu__item>dd {
    font-family: "benton-modern-display-conden",serif;
    font-weight: 400
}

@media screen and (max-width: 768px) {
    .menu__item>dd {
        font-size:16px;
        font-size: 3.7vw
    }
}

@media screen and (min-width: 769px) {
    .menu__item>dd {
        font-size:16px;
        font-size: 1vw
    }
}

.credit--footer {
    width: 100%;
    margin: 12% 0 0%;
    text-align: center;
    box-sizing: border-box;
    font-family: "benton-modern-display-conden",serif;
    font-weight: 400;
    font-size: 120%;
    line-height: 1.8em;
}

@media screen and (min-width: 769px) {
    .credit--footer {
        width: 100%;
        text-align: center;
        box-sizing: border-box;
        font-family: "benton-modern-display-conden",serif;
        font-weight: 400;
        font-size: 120%;
    }
}

.menu--pc-side {
    margin-top: 5.5%;
    margin-bottom: 8%
}

.menu--pc-side .menu__item:nth-child(2n) {
    padding-left: 3%
}

.punct {
    display: inline-block;
    padding-top: .2em
}


.flow-slider {
  overflow: hidden;
  width: 120%;
  margin-left: -20%;
  box-sizing: border-box;
}


.flow-track {
  display: flex;
  width: calc(564px * 3); 
  animation: flow 35s infinite linear 0.5s both;
}

.flow-track img {
  width: 50%;
  max-width: 564px;
  flex-shrink: 0;
}

/* アニメーション設定 */
@keyframes flow {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}
.parallax-section {
  position: relative;
  overflow: hidden;
}

.parallax-bg {
  position: absolute;
  top: 45%; left: 0;
  width: 100%; height: 70vh;
  background-image: url('../images/bg_2.jpg');
  background-size: cover;
  background-position: center bottom;
  z-index: 0;
}
.parallax2 .parallax-bg {
  background-image: url('../images/bg_4.jpg');
  background-size: cover;
}
.movie_box{
    margin: 50px 30px;
	border-bottom: 1px solid;
}
.movie_box h4{
    border-bottom: 1px solid;
    font-size: 1.1em;
    letter-spacing: .1em;
    padding-left: 1em;
	padding-bottom: .5em;
}

#movie {
  cursor: pointer;
  max-width: 100%;
  display: block;
  margin: 2em auto 0;
}
.movie_wrap{
	padding: 1em;
}
.movie_wrap p{
	padding: 1em 0;
	font-size: .9em;
    letter-spacing: .1em;
	line-height: 1.6;
}
.movie_box h4 img{
    width: 55%;
}
@media screen and (min-width: 768px){
.movie_wrap p{
	font-size: 1.1em;
}
}
.fixed_bg{
	height: 334px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.fixed_bg p img{
	width: 60%;
  display: block;
  margin: auto;
}
.collabo{
	background: #998e7e;
	padding: 50px 30px;
}
.collabo_img{
	max-width: 185.5px;
}
.collabo_a{
	max-width: 143.5px;
}
.collabo>*{
	display: block;
	margin: auto;
}
.collabo>*+*{
	margin-top: 2em;
}

#para_background {
    position: fixed;
    z-index: 1;
    top: 0;
    width: 100%;
    height: 100%;
    height: 100vh;
    overflow: hidden;
    background: url(../images/sp_bg.jpg) no-repeat center center;
    background-size: cover;
}
@media screen and (min-width:767px) {
#para_background {
    background: url(../images/pc_bg.jpg) no-repeat center center;
    background-size: cover;
}
}
#para_background .bg_01 {
    position: absolute;
    width: 34%;
    max-width: 600px;
    height: 100vh;
    background: url(../images/fixed_bg.jpg) no-repeat center center;
    background-size: cover;
    opacity: 0;
    left: 50%;
    transform: translateX(-50%);
}
@media screen and (max-width:768px) {
  #para_background .bg_01 {
    width: 100%;
}
}