@charset "UTF-8";
/*
  Josh's Custom CSS Reset
  https://www.joshwcomeau.com/css/custom-css-reset/
*/
*, *::before, *::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html, body {
  height: 100%;
}

body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

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

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
  font-weight: normal;
}

#root, #__next {
  isolation: isolate;
}

ol, ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

.letterfx {
  display: inline-block;
  margin: 0;
  padding: 0;
  transition: all 1s;
  -ms-transition: all 1s;
  -webkit-transition: all 1s;
}

.letterfx-spin-before {
  transform: rotate(3600deg);
  -ms-transform: rotate(3600deg);
  -webkit-transform: rotate(3600deg);
}

.letterfx-spin-after {
  transform: none;
}

.letterfx-fade-before {
  opacity: 0;
}

.letterfx-grow-before {
  transform: scale(0, 0);
  -ms-transform: scale(0, 0);
  -webkit-transform: scale(0, 0);
}

.letterfx-grow-after {
  transform: none;
}

.letterfx-smear-before {
  color: transparent;
  text-shadow: -1px -1px 25px transparent;
}

.letterfx-smear-after {
  color: inherit;
  text-shadow: 0 0 #333;
}

.letterfx-fall-before {
  visibility: hidden;
  transform: scale(3, 3);
  -ms-transform: scale(3, 3);
  -webkit-transform: scale(3, 3);
}

.letterfx-fall-after {
  transform: scale(1, 1);
  -ms-transform: scale(1, 1);
  -webkit-transform: scale(1, 1);
  text-shadow: 0;
}

.letterfx-swirl-before {
  visibility: hidden;
  transform: scale(3, 3) rotate(3600deg);
  -ms-transform: scale(3, 3) rotate(3600deg);
  -webkit-transform: scale(3, 3) rotate(3600deg);
}

.letterfx-swirl-after {
  transform: none;
  text-shadow: 0;
}

.letterfx-wave-container .letterfx {
  position: relative;
}

.letterfx-wave-before {
  bottom: 0;
}

.letterfx-wave-after {
  bottom: 15px;
}

.letterfx-fly-left-container .letterfx, .letterfx-fly-right-container .letterfx, .letterfx-fly-top-container .letterfx, .letterfx-fly-bottom-container .letterfx {
  position: relative;
}

.letterfx-fly-left-before {
  left: -50em;
}

.letterfx-fly-left-after {
  left: 0;
}

.letterfx-fly-right-before {
  right: -50em;
}

.letterfx-fly-right-after {
  right: 0;
}

.letterfx-fly-top-before {
  top: -20em;
}

.letterfx-fly-top-after {
  top: 0;
}

.letterfx-fly-bottom-before {
  bottom: -20em;
}

.letterfx-fly-bottom-after {
  bottom: 0;
}

a {
  color: #000;
  text-decoration: none;
}
a[target=_blank]:after {
  font-family: "Hobonichi-Icons";
  content: "\e914";
  font-weight: normal;
  font-size: 0.8em;
  position: relative;
  top: -0.2em;
}
@media (min-width: 835px) {
  a:hover {
    opacity: 0.6;
  }
}
.delighter {
  opacity: 0;
  transition: all 0.7s ease-out;
}

.delighter.started {
  opacity: 1;
}
.hidden {
  visibility: hidden;
}
html {
  font-size: 62.5%;
}
body {
  font-size: 1.5rem;
  line-height: 2;
  letter-spacing: 0.075em;
  color: #000;
  display: none;
}
.contents-wrapper {
  overflow-x: hidden;
}
.fv {
  content: "";
  display: block;
  background: url(/store/O2/2024ss/pre/images/lookbook/bg0.webp);
  background-size: cover;
  background-position: center top;
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  transform: translateZ(0);
  z-index: -1;
}
.fv-1  {
  background: url(/store/O2/2024ss/pre/images/lookbook/bg.webp);
  background-size: cover;
  opacity: 0;
  transition: opacity 1s ease-out;
  background-position: center top;
}
.fv-1.active  {
  opacity: 1;
}
#kv {
  width: 100vw;
  height: 100lvh;
  position: relative;
}
#kv .title {
  position: absolute;
  top: 29vh;
  left: 9vw;
  width: 75%;
}
@media (max-width: 1060px) {
  #kv .title {
    width: 80%;
  }
}
@media (max-width: 834px) {
  #kv .title {
    top: 11vh;
    left: 3vw;
    height: 100vh;
    width: 10vh;
  }
}
@media (max-width: 439px) {
  #kv .title {
    top: 12.2vw;
  }
}
@media (max-width: 834px) {
  #kv .title div {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 110px;
    width: fit-content;
    grid-row-gap: 25px;
  }
}
#kv .title div .logo {
  opacity: 0;
  transition: opacity 0.5s;
}
@media (max-width: 834px) {
  #kv .title div .logo {
    width: 69px;
    margin: 0;
    grid-row: 2/3;
  }
}
#kv .title div h1 {
  font-size: 3rem;
  letter-spacing: 0.25em;
  color: #f4f926;
  font-family: din-2014, sans-serif;
  font-weight: 600;
  text-align: right;
  line-height: 1.5;
  width: max-content;
  position: absolute;
  right: 0;
  top: 25px;
}
@media (max-width: 834px) {
  #kv .title div h1 {
    font-size: 2.4rem;
    line-height: 1.7;
    margin-bottom: -0.4em;
    writing-mode: vertical-rl;
    height: max-content;
    padding: 0;
    grid-row: 1/2;
    position: relative;
    justify-self: center;
    top: 0;
  }
}
#kv .title div h1 img {
  width: 280px;
}
@media (max-width: 834px) {
  #kv .title div h1 img {
    width: auto;
  }
}
#kv .title div h1 .fade1 {
  opacity: 0;  
}
#kv .title div h1 .fade1.active {
  opacity: 1;
}
#kv .title div h1 .fade1.active {
  animation-name:fadeIn;
  animation-duration:1s;
  animation-fill-mode:forwards;
  opacity:0;
}
@keyframes fadeIn{
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
#kv .title div .border {
  width: 2px;
  height: 103px;
  opacity: 1;
  position: relative;
}
@media (max-width: 834px) {
  #kv .title div .border {
    height: 71px;
    width: 1.5px;
  }
}
#kv .title div .border::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  background: #fff;
  transition: all 0.5s 2s;
}
#kv .title.active div .logo {
  opacity: 1;
}
#kv .title.active div .logo img {
  width: 132px;
}
#kv .title.active div h1 {
  opacity: 1;
}
#kv .title.active div .border::after {
  height: 100%;
}
.wrapper, .date, #yodogawa {
  position: relative;
  z-index: 1;
}
section {
  height: 100vh;
  width: 100vw;
}
#date1 .title {
  position: absolute;
  top: 24.875vh;
  left: 8.8vw;
  opacity: 0;
  transition: all 0.7s ease-out;
}
#date1 .title.active {
  opacity: 1;
}
@media (max-width: 834px) {
  #date1 .title {
    top: 50%;
    left: 50%;
    transform: translate(-45%, -50%);
  }
}
#yodogawa {
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Koburina Gothic W6 JIS2004", din-2014, sans-serif;
  margin-bottom: 100px;
}
#yodogawa div.text {
  max-width: 500px;
  padding: 37px 45px;
  color: #000;
  position: relative;
  opacity: 1;
  background:rgba(255, 255, 255, 0.95);
}
#yodogawa div.text span {
  display: block;
}
@media (max-width: 834px) {
  #yodogawa div.text span {
    line-height: 2;
  }
}
@media (max-width: 449px) {
  #yodogawa div.text span {
    font-size: 3.3vw;
  }
}
@media (max-width: 430px) {
  #yodogawa div.text span {
    font-size: 3.2vw;
  }
}
.wrapper section {
  position: relative;
}
@media (min-width: 374px) {
  .wrapper section {
    height: 100vh;
  }
}
.wrapper section .title {
  color: #f4f926;
  line-height: 1;
  position: absolute;
}
@media (max-width: 834px) {
  .wrapper section .title .logo img {
    width: initial;
    margin-left: 0;
  }
}
.wrapper section .title h3 {
  padding-top: 16px;
  font-size: 1.8rem;
  letter-spacing: 0.055em;
  font-family: din-2014, sans-serif;
  font-weight: 700;
}
.wrapper section .title h4 {
  padding-top: 18px;
  font-size: 1.5rem;
  line-height: 1.5;
  letter-spacing: 0.075em;
  font-family: din-2014, sans-serif;
  font-weight: 700;
}
@media (max-width: 834px) {
  .wrapper section .title h4 {
    line-height: 1.28;
    font-size: 1.3rem;
  }
}
.wrapper section .title h4 span.cross {
  font-weight: 400;
  display: inline-block;
  margin: 0 4px;
  position: relative;
  top: 2.5px;
}
.wrapper section .title a {
  position: absolute;
  display: inline-block;
  padding-top: 15px;
}
@media (max-width: 834px) {
  .wrapper section .title a {
    width: 92px;
    position: relative;
    display: block;
  }
}
.wrapper #rosy {
  background: url(/store/O2/2024ss/pre/images/lookbook/bg1.jpg);
  background-size: cover;
  background-position: center center;
  width: 100%;
}
@media (max-width: 834px) {
  .wrapper #rosy {
    background: url(/store/O2/2024ss/pre/images/lookbook/bg1_sp.jpg) no-repeat;
    background-size: cover;
    background-position: center bottom;
  }
}
.wrapper #rosy .title {
  bottom: 11vh;
  right: 3vw;
}
@media (max-width: 834px) {
  .wrapper #rosy .title {
    bottom: 5.3vw;
    left: 7.21vw;
  }
}
@media (max-width: 430px) {
  .wrapper #rosy .title {
    bottom: 11.3vw;
  }
}
.wrapper #rosy .title .logo img {
  margin-right: 0;
  margin-left: auto;
}
@media (max-width: 834px) {
  .wrapper #rosy .title .logo img {
    margin-right: auto;
    margin-left: 0;
  }
}
.wrapper #rosy .title h4 {
  text-align: right;
}
.wrapper #rosy .title a {
  right: 0;
}
@media (max-width: 834px) {
  .wrapper #rosy .title h4 {
    padding-top: 15px;
    text-align: left;
  }
}
.wrapper #outer {
  background: url(/store/O2/2024ss/pre/images/lookbook/bg2.jpg);
  background-size: cover;
  background-position: center top;
}
@media (max-width: 834px) {
  .wrapper #outer {
    background: url(/store/O2/2024ss/pre/images/lookbook/bg2_sp.jpg) no-repeat;
    background-size: cover;
    background-position: center top;
  }
}
.wrapper #outer .title {
  top: 12vh;
  right: 8vw;
}
.wrapper #outer .title .logo img {
  margin-left: auto;
  margin-right: 0;
}
@media (max-width: 834px) {
  .wrapper #outer .title .logo img {
    margin-left: 0;
    margin-right: auto;
  }
}
@media (max-width: 834px) {
  .wrapper #outer .title {
    top: 64.4vh;
    left: 8vw;
    text-align: right;
  }
}
@media (max-width: 430px) {
  .wrapper #outer .title {
    top: 53.4vh;
  }
}
@media (max-width: 375px) {
  .wrapper #outer .title {
    top: 49.4vh;
  }
}
.wrapper #outer .title h4 {
  text-align: right;
}
@media (max-width: 834px) {
  .wrapper #outer .title h4 {
    text-align: left;
  }
}
.wrapper #outer .title a {
  margin-left: 0;
  margin-right: auto;
  display: block;
  right: 0;
}
.wrapper #rain {
  background: url(/store/O2/2024ss/pre/images/lookbook/bg3.jpg);
  background-size: cover;
  background-position: center center;
  width: 100%;
}
@media (max-width: 834px) {
  .wrapper #rain {
    background: url(/store/O2/2024ss/pre/images/lookbook/bg3_sp.jpg) no-repeat;
    background-size: cover;
    background-position: center center;
  }
}
.wrapper #rain .title {
  bottom: 14vh;
  left: 6.5vw;
}
@media (max-width: 1024px) {
  .wrapper #rain .title {
    bottom: 7vh;
    right: 5vw;
  }
}
@media (max-width: 834px) {
  .wrapper #rain .title {
    bottom: 2vh;
  }
}
@media (max-width: 430px) {
  .wrapper #rain .title {
    bottom: 5vh;
  }
}
@media (max-width: 834px) {
  .wrapper #rain .title .logo img {
    margin-left: auto;
    margin-right: 0;
  }
}
@media (max-width: 834px) {
  .wrapper #rain .title a {
    margin-left: auto;
    margin-right: 0;
  }
}
@media (max-width: 834px) {
  .wrapper #rain .title h4 {
    text-align: right;
  }
}
.wrapper #date2 {
  background: url(/store/O2/2024ss/pre/images/lookbook/bg4.jpg);
  background-size: cover;
  background-position: center center;
  width: 100%;
}
@media (max-width: 834px) {
  .wrapper #date2 {
    background: url(/store/O2/2024ss/pre/images/lookbook/bg4_sp.jpg) no-repeat;
    background-size: cover;
    background-position: center center;
  }
}
/* @media (max-width: 430px) {
  .wrapper #date2 {
    height: 75.5vh;
  }
}
@media (max-width: 375px) {
  .wrapper #date2 {
    height: 91.5vh;
  }
} */
.wrapper #date2 .title {
  top: 27.875vh;
  left: 32.8vw;
  opacity: 0;
  transition: all 0.7s ease-out;
}
.wrapper #date2 .title.active {
  opacity: 1;
}
@media (max-width: 1180px) {
  .wrapper #date2 .title {
    top: 31.875vh;
    left: 30.8vw;
  }
}
@media (max-width: 1024px) {
  .wrapper #date2 .title {
    left: 24.8vw;
  }
}
@media (max-width: 834px) {
  .wrapper #date2 .title {
    top: 5.5vh;
    right: initial;
    left: 9vw;
    bottom: initial;
  }
}
.wrapper #date2 .title img {
  width: initial;
}
.wrapper #nizyukano {
  background: url(/store/O2/2024ss/pre/images/lookbook/bg5.jpg);
  background-size: cover;
  background-position: center top;
  position: relative;
}
@media (max-width: 1024px) {
  .wrapper #nizyukano {
    background-size: cover;
    background-position: center bottom;
  }
}
@media (max-width: 834px) {
  .wrapper #nizyukano {
    background: url(/store/O2/2024ss/pre/images/lookbook/bg5_sp.jpg) no-repeat;
    background-size: cover;
    background-position: center top;
  }
}
/* @media (max-width: 430px) {
  .wrapper #nizyukano {
    height: 75.5vh;
  }
}
@media (max-width: 375px) {
  .wrapper #nizyukano {
    height: 92.5vh;
  }
} */
.wrapper #nizyukano .title {
  bottom: 3.5vh;
  right: 4.8vw;
  text-align: right;
}
@media (max-width: 834px) {
  .wrapper #nizyukano .title {
    top: 3vh;
    left: 8.5vw;
  }
}
@media (max-width: 430px) {
  .wrapper #nizyukano .title {
    top: 6vh;
  }
}
@media (max-width: 375px) {
  .wrapper #nizyukano .title {
    top: 3vh;
  }
}
@media screen and (min-width:698px) and ( max-width:834px) {
  .wrapper #nizyukano .title {
    top: 9vh;
  }
}
@media (max-width: 375px) {
  .wrapper #nizyukano .title {
    top: 4.5vh;
  }
}
@media (max-width: 375px) {
  .wrapper #nizyukano .title {
    top: 4.5vh;
  }
}
@media (max-width: 834px) {
  .wrapper #nizyukano .title .logo {
    top: 2.2vh;
    right: 4vw;
    position: absolute;
  }
}
@media (max-width: 768px) {
  .wrapper #nizyukano .title .logo {
    top: 4.2vh;
  }
}
@media (max-width: 698px) {
  .wrapper #nizyukano .title .logo {
    top: 9.2vh;
  }
}
@media (max-width: 430px) {
  .wrapper #nizyukano .title .logo {
    top: 0.5vh;
    right: 5vw;
  }
}
.wrapper #nizyukano .title .logo img {
  margin-right: 0;
  margin-left: auto;
}
@media (max-width: 834px) {
  .wrapper #nizyukano .title h4 {
    position: absolute;
    top: 69.5vh;
    right: 4vw;
    padding-top: 0;
  }
}
@media (max-width: 768px) {
  .wrapper #nizyukano .title h4 {
    top: 68.5vh;
  }
}
@media (max-width: 698px) {
  .wrapper #nizyukano .title h4 {
    right: 3vw;
    top: 73.5vh;
  }
}
@media (max-width: 449px) {
  .wrapper #nizyukano .title h4 {
    font-size: 3.1vw;
  }
}
@media (max-width: 430px) {
  .wrapper #nizyukano .title h4 {
    top: 72.5vh;
    right: 5vw;
  }
}
@media (max-width: 375px) {
  .wrapper #nizyukano .title h4 {
    top: 72vh;
  }
}
.wrapper #nizyukano .title a {
  position: relative;
  right: 0;
}
@media (max-width: 834px) {
  .wrapper #nizyukano .title a {
    margin-left: auto;
    margin-right: 0;
    position: relative;
    top: 81vh;
    right: 4vw;
  }
}
@media (max-width: 768px) {
  .wrapper #nizyukano .title a {
    top: 80vh;
  }
}
@media (max-width: 698px) {
  .wrapper #nizyukano .title a {
    top: 85vh;
  }
}
@media (max-width: 430px) {
  .wrapper #nizyukano .title a {
    top: 83.5vh;
    right: 5vw;
  }
}
@media (max-width: 375px) {
  .wrapper #nizyukano .title a {
    top: 85vh;
  }
}
.wrapper #mioasse {
  background: url(/store/O2/2024ss/pre/images/lookbook/bg6.jpg);
  background-size: cover;
  background-position: center top;
  width: 100%;
}
@media (max-width: 834px) {
  .wrapper #mioasse {
    background: url(/store/O2/2024ss/pre/images/lookbook/bg6_sp.jpg) no-repeat;
    background-size: cover;
    background-position: center top;
  }
}
.wrapper #mioasse .title {
  bottom: 36vh;
  left: 8.5vw;
}
@media (max-width: 834px) {
  .wrapper #mioasse .title {
    bottom: 5.5vh;
    right: 9.21vw;
    text-align: right;
  }
}
@media (max-width: 834px) {
  .wrapper #mioasse .title {
    bottom: 7.5vh;
  }
}
@media (max-width: 834px) {
  .wrapper #mioasse .title .logo img {
    margin-right: 0;
    margin-left: auto;
  }
}
@media (max-width: 834px) {
  .wrapper #mioasse .title h4 {
    text-align: right;
  }
}
@media (max-width: 834px) {
  .wrapper #mioasse .title a {
    margin-right: 0;
    margin-left: auto;
  }
}
.wrapper #tsuki {
  background: url(/store/O2/2024ss/pre/images/lookbook/bg7.jpg);
  background-size: cover;
  background-position: center bottom;
  width: 100%;
}
@media (min-width: 1600px) {
  .wrapper #tsuki {
    background: url(/store/O2/2024ss/pre/images/lookbook/bg7.jpg) no-repeat;
    background-size: cover;
    background-position: center center;
  }
}
@media (max-width: 598px) {
  .wrapper #tsuki {
    background: url(/store/O2/2024ss/pre/images/lookbook/bg7_sp.jpg) no-repeat;
    background-size: cover;
    background-position: center center;
  }
}
.wrapper #tsuki .title {
  bottom: 7vh;
  right: 5vw;
  text-align: right;
  opacity: 0;
  transition: all 0.7s ease-out;
}
.wrapper #tsuki .title.active {
  opacity: 1;
}
@media (max-width: 834px) {
  .wrapper #tsuki .title {
    top: 3vh;
    left: 5.7vw;
  }
}
.wrapper #tsuki .title .logo img {
  margin-right: 0;
  margin-left: auto;
}
@media (max-width: 834px) {
  .wrapper #tsuki .title .logo img {
    margin-right: auto;
    margin-left: 0;
  }
}
@media (max-width: 834px) {
  .wrapper #tsuki .title h4 {
    text-align: left;
  }
}
.wrapper #tsuki .title a {
  position: relative;
}
.wrapper #date3 {
  background: url(/store/O2/2024ss/pre/images/lookbook/bg8.jpg);
  background-size: cover;
  background-position: center center;
}
@media (max-width: 1024px) {
  .wrapper #date3 {
    background: url(/store/O2/2024ss/pre/images/lookbook/bg8_tab.jpg) no-repeat;
    background-size: cover;
    background-position: center center;
  }
}
@media (max-width: 834px) {
  .wrapper #date3 {
    background: url(/store/O2/2024ss/pre/images/lookbook/bg8_sp.jpg) no-repeat;
    background-size: cover;
    background-position: center center;
  }
}
/* @media (max-width: 430px) {
  .wrapper #date3 {
    height: 75.5vh;
  }
}
@media (max-width: 375px) {
  .wrapper #date3 {
    height: 92.5vh;
  }
} */
.wrapper #date3 .title {
  top: 7.8vh;
  left: 44.8vw;
}
@media (max-width: 1024px) {
  .wrapper #date3 .title {
    bottom: initial;
    left: 43.8vw;
    top: 3.8vh;
  }
}
@media (max-width: 834px) {
  .wrapper #date3 .title {
    bottom: initial;
    left: 41.5vw;
    top: 8vh;
  }
}
@media (max-width: 820px) {
  .wrapper #date3 .title {
    left: 40vw;
    top: 13vh;
  }
}
@media (max-width: 768px) {
  .wrapper #date3 .title {
    left: 41.5vw;
    top: 12vh;
  }
}
@media (max-width: 430px) {
  .wrapper #date3 .title {
    left: 34.5vw;
    top: 9vh;
  }
}
@media (max-width: 414px) {
  .wrapper #date3 .title {
    left: 33.5vw;
    top: 10vh;
  }
}
@media (max-width: 375px) {
  .wrapper #date3 .title {
    left: 33.5vw;
    top: 11vh;
  }
}
.wrapper #date3 .title img {
  width: initial;
}
@media (max-width: 449px) {
  .wrapper #date3 .title p {
    width: 85%;
  }
}
@media (max-width: 375px) {
  .wrapper #date3 .title p {
    width: 80%;
  }
}
.wrapper #frais {
  background: url(/store/O2/2024ss/pre/images/lookbook/bg9.jpg);
  background-size: cover;
  background-position: center top;
  width: 100%;
}
@media (max-width: 1400px) {
.wrapper #frais {
  background: url(/store/O2/2024ss/pre/images/lookbook/bg9.jpg);
  background-size: cover;
  background-position: center center;
  width: 100%;
}
}
@media (max-width: 834px) {
  .wrapper #frais {
    background: url(/store/O2/2024ss/pre/images/lookbook/bg9_sp.jpg) no-repeat;
    background-size: cover;
    background-position: center center;
    position: relative;
  }
  .wrapper #frais.active::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 19vh;
    background: linear-gradient(to top, rgb(255, 255, 255, .1), rgb(165, 179, 179, .8));
    animation: bgcolor 2s ease;
    opacity: 0.8;
  }
  @keyframes bgcolor { 
    0% {
      opacity: 0;
    }
    100%{
      opacity: 1;
    }
  }
}
.wrapper #frais .title {
  bottom: 6vh;
  left: 5vw;
  display: grid;
  grid-template-columns: 1fr 120px;
  grid-template-rows: 148px 1fr;
  grid-column-gap: 15px;
}
@media (max-width: 834px) {
  .wrapper #frais .title {
    top: 5vh;
    width: 80%;
    left: 10vw;
    bottom: initial;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 85px 85px;
    grid-column-gap: 0;
  }
}
@media (max-width: 430px) {
  .wrapper #frais .title {
    top: 6vh;
  }
}
.wrapper #frais .title .logo {
  grid-column: 1/3;
  width: 195px;
}
@media (max-width: 834px) {
  .wrapper #frais .title .logo {
    position: relative;
    left: -2vw;
    top: 0;
    grid-column: 1/2;
    grid-row: 1/3;
    width: 163px;
  }
}
.wrapper #frais .title .logo img {
  margin-right: auto;
  margin-left: 0;
}
.wrapper #frais .title h4 {
  text-align: left;
}
@media (max-width: 834px) {
  .wrapper #frais .title h4 {
    padding-top: 0;
    text-align: right;
    position: relative;
    grid-column: 2/3;
    grid-row: 1/2;
    margin-top: -10px;
  }
}
@media (max-width: 449px) {
  .wrapper #frais .title h4 {
    font-size: 2.8vw;
  }
}
@media (max-width: 390px) {
  .wrapper #frais .title h4 {
    font-size: 2.65vw;
  }
}
@media (max-width: 375px) {
  .wrapper #frais .title h4 {
    font-size: 2.5vw;
    margin-top: 0;
  }
}
.wrapper #frais .title a {
  position: relative;
  grid-column: 2/3;
  grid-row: 2/3;
  align-self: center;
}
@media (max-width: 834px) {
  .wrapper #frais .title a {
    position: relative; 
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    justify-self: end;
    align-self: start;
  }
}
@media (max-width: 449px) {
  .wrapper #frais .title a {
    padding-top: 10px;
  }
}
.wrapper #bottom {
  background: url(/store/O2/2024ss/pre/images/lookbook/bg10.jpg);
  background-size: cover;
  background-position: center center;
  width: 100%;
}
@media (max-width: 1024px) {
  .wrapper #bottom {
    background-size: cover;
    background-position: center bottom;
  }
}
@media (max-width: 834px) {
  .wrapper #bottom {
    background: url(/store/O2/2024ss/pre/images/lookbook/bg10.jpg) no-repeat;
    background-size: cover;
    background-position: center bottom;
  }
}
@media (max-width: 768px) {
  .wrapper #bottom {
    background: url(/store/O2/2024ss/pre/images/lookbook/bg10_sp.jpg) no-repeat;
    background-size: cover;
    background-position: center center;
  }
}
.wrapper #bottom .title {
  bottom: 17vh;
  right: 13.5vw;
  text-align: right;
}
@media (max-width: 834px) {
  .wrapper #bottom .title {
    bottom: 12vh;
    right: 10.7vw;
  }
}
.wrapper #bottom .title .logo img {
  margin-left: auto;
  margin-right: 0;
}
.wrapper #bottom .title a {
  position: relative;
}
@media (max-width: 834px) {
  .wrapper #bottom .title a {
    margin-right: 0;
    margin-left: auto;
  }
}
.wrapper #firo {
  background: url(/store/O2/2024ss/pre/images/lookbook/bg11.jpg);
  background-size: cover;
  background-position: center center;
  width: 100%;
}
@media (max-width: 834px) {
  .wrapper #firo {
    background: url(/store/O2/2024ss/pre/images/lookbook/bg11_sp.jpg) no-repeat;
    background-size: cover;
    background-position: center center;
  }
}
@media (max-width: 430px) {
  .wrapper #firo {
    background-position-x: -7em;
  }
}
@media (max-width: 375px) {
  .wrapper #firo {
    background-position-x: -2em;
  }
}
@media (min-width: 375px) {
  .wrapper #firo {
    background-position-x: unset;
  }
}
.wrapper #firo .title {
  bottom: 13.5vh;
  left: 4.5vw;
}
@media (max-width: 834px) {
  .wrapper #firo .title {
    bottom: 4.5vh;
    left: 5.65vw;
    top: initial;
  }
}
@media (max-width: 449px) {
  .wrapper #firo .title h4 {
    font-size: 2.84vw;
  }
}
.wrapper #firo .title a {
  position: relative;
}
.list {
  background-color: rgba(255, 255, 255, 0.9);
  text-align: center;
  width: 100%;
  max-width: 800px;
  margin: 0 auto 60px;
  overflow: hidden;
  font-family: "Koburina Gothic W1 JIS2004", sans-serif;
  font-size: 1.48rem;
}
@media (max-width: 834px) {
  .list {
    margin-bottom: 35px;
    font-size: 1.3rem;
  }
}
.list h2 {
  padding: 65px 0 60px;
  display: inline-block;
}
@media (max-width: 834px) {
  .list h2 {
    padding: 60px 0 35px;
  }
}
.list .list_item:nth-of-type(n + 2) {
  padding-top: 50px;
}
@media (max-width: 834px) {
  .list .list_item:nth-of-type(n + 2) {
    padding-top: 55px;
  }
}
.list .list_item h3 {
  display: inline-block;
  margin-bottom: -9px;
}
.list .list_item a.btn {
  background-color: #fff;
  font-size: 1.2rem;
  border: 1px solid #000;
  border-radius: 16px;
  color: #000;
  padding: 3px 0;
  display: block;
  width: 120px;
  margin: 25px auto 0;
}
@media (max-width: 834px) {
  .list .list_item a.btn {
    margin: 16.5px auto 0;
  }
}
.list .text {
  display: flex;
  justify-content: center;
  text-align: left;
  padding-top: 45px;
}
@media (max-width: 834px) {
  .list .text {
    padding-top: 20px;
    width: 86.53vw;
    margin: 0 auto;
    font-size: 12.48px;
  }
}
@media (max-width: 449px) {
  .list .text {
    font-size: 2.7vw;
  }
}
.list .contact {
  display: flex;
  justify-content: center;
  text-align: left;
  padding: 65px 0;
}
@media (max-width: 834px) {
  .list .contact {
    padding: 55px 0 60px;
  }
}
.list .contact h3 {
  font-size: 1.8rem;
  text-align: left;
  font-family: "Koburina Gothic W6 JIS2004", din-2014, sans-serif;
}
.list .contact p {
  margin: 15px auto 0;
}
@media (max-width: 834px) {
  .list .contact p {
    margin-top: 20px;
    font-size: 12.48px;
  }
}
.list.list_staff {
  padding-bottom: 65px;
  font-family: "Koburina Gothic W3 JIS2004", sans-serif;
}
.list.list_staff .text {
  padding-top: 0;
}
@media (max-width: 834px) {
  .list.list_staff .text {
    font-size: 12.48px;
  }
}
@media (max-width: 834px) {
  .list.list_staff h2 {
    padding-bottom: 35px;
  }
}
.list.list_info {
  padding-bottom: 65px;
  margin-bottom: 0;
  font-family: "Koburina Gothic W3 JIS2004", sans-serif;
}
@media (max-width: 834px) {
  .list.list_info h2 {
    padding-bottom: 35px;
  }
}
.list.list_info .text {
  padding-top: 0;
}
@media (max-width: 834px) {
  .list.list_info .text {
    font-size: 12.48px;
  }
}
.list.list_info span {
  font-family: "Koburina Gothic W6 JIS2004", din-2014, sans-serif;
  font-size: 1.9rem;
  display: block;
}
@media (max-width: 834px) {
  .list.list_info span {
    font-size: 1.6rem;
  }
}

footer {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}
footer > div {
  margin-top: 30px;
  background-color: rgba(255, 255, 255, 0.9);
  padding: 60px 0;
}
footer > div h2 {
  font-size: 1.6rem;
  line-height: 2;
  letter-spacing: 0.1em;
  color: #000;
  font-family: "Koburina Gothic W6 JIS2004", sans-serif;
  padding-bottom: 50px;
}
@media (max-width: 834px) {
  footer > div h2 {
    padding-bottom: 25px;
  }
}
footer > div ul {
  display: flex;
  justify-content: center;
  gap: 60px;
  font-family: "Koburina Gothic W3 JIS2004", din-2014, sans-serif;
}
footer > div ul li.tw {
  width: 55px;
}
footer > div ul li.fb {
  width: 58px;
}
footer > div ul.hobo a {
  background-color: #fff;
  border: 1px solid #000;
  border-radius: 18px;
  padding: 4px 0;
  font-size: 1.3rem;
  letter-spacing: 0.1em;
  width: 160px;
  text-align: center;
  display: inline-block;
}
@media (max-width: 834px) {
  footer > div ul.hobo a {
    width: 180px;
    font-size: 1.4rem;
  }
}
@media (max-width: 834px) {
  footer > div ul.hobo {
    display: block;
  }
}
@media (max-width: 834px) {
  footer > div ul.hobo li:nth-of-type(n + 2) {
    margin-top: 25px;
  }
}
footer .copyright {
  padding-top: 65px;
  display: inline-block;
}
@media (max-width: 834px) {
  footer .copyright {
    padding-top: 50px;
  }
}

@media screen and (min-width: 835px) {
  a:hover {
    opacity: 0.5;
    transition: opacity 0.5s;
  }
  .spOnly {
    display: none;
  }
}
@media screen and (max-width: 834px) {
  img {
    width: 100%;
  }
  br:not(.sp-br), .pcOnly {
    display: none;
  }
  .fv {
    background: url(/store/O2/2024ss/pre/images/lookbook/bg0_sp.jpg);
    background-size: cover;
    background-position: center top;
  }
  .fv-1 {
    background: url(/store/O2/2024ss/pre/images/lookbook/bg_sp.jpg);
    background-size: cover;
    background-position: right top;
  }
  #kv h1 {
    font-size: 1.6rem;
    padding: 10px 18px 11px 29px;
    right: auto;
    left: 0;
    top: 20px;
  }
  #kv .logo {
    width: 205px;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 154px;
  }
  #yodogawa {
    justify-content: initial;
  }
  #yodogawa .inner {
    width: 100%;
  }
  #yodogawa div.pre {
    max-width: 347px;
    width: 85vw;
    right: auto;
    left: 0;
    padding: 18px 0 27px;
    position: relative;
  }
  #yodogawa div.text {
    font-size: 1.5rem;
    padding: 2em 3em;
    margin: 0 auto;
  }
}
@media screen and (max-width: 640px) {
  #yodogawa div.text {
    /* font-size: 3.6vw; */
    width: 95%;
    padding: 2em 3em;
  }
  #yodogawa div.pre {
    padding: 0 0 5vw;
  }
  #kv .logo {
    top: 38vw;
  }
}
@media screen and (max-width: 549px) {
  #yodogawa div.text {
    padding: 2em 2.3em;
  }
}
@media screen and (max-width: 498px) {
  #yodogawa div.text {
    padding: 2em 2.3em;
  }
}
@media screen and (max-width: 440px) {
  #yodogawa div.text {
    padding: 2em 0 2em 2.5em;
  }
  .fv {
    background-position: center center;
  }
  .fv-1 {
    background-position: center center;
  }
}
@media screen and (max-width: 390px) {
  #yodogawa div.text {
    padding: 2em 0 2em 2em;
  }
}
/*# sourceMappingURL=lookbook.css.map */