@charset "utf-8";

html {
  font-size: calc(100vw * 22 / 1920);
}

body,
h1,
h2,
h3,
p,
ul,
a,
section,
figure,
footer {
  margin: 0;
  padding: 0;
  list-style: none;
}

img {
  vertical-align: bottom;
  max-width: 100%;
  height: auto;
}

body {
  font-family: toppan-bunkyu-mincho-pr6n, serif;
  letter-spacing: 0.35em;
  text-align: center;
  color: #222;
  animation: fadeIn 2s ease 0s 1 normal;
  -webkit-animation: fadeIn 2s ease 0s 1 normal;
}

@keyframes fadeIn {
  0% {
    opacity: 0
  }

  100% {
    opacity: 1
  }
}

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0
  }

  100% {
    opacity: 1
  }
}

.flex {
  display: flex;
  justify-content: space-between;
}

.english01 {
  font-family: orpheuspro, serif;
  font-weight: 400;
}

a {
  text-decoration: none;
}


/* ==========FV========== */
.fv {
  width: 100vw;
  height: 100vh;
  background-image: url(images/fv01.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top center;
}

.sp_title,
.tb_title,
.tb_title02 {
  display: none;
}

.title {
  width: 69%;
  background-color: rgba(168, 155, 149, 0.85);
  color: #fff;
  position: absolute;
  bottom: 10%;
  left: 0;
  padding: 0.5% 3%;
  box-sizing: border-box;
}

h1 {
  font-family: "a-otf-ryumin-pr6n", serif;
  font-weight: 400;
  font-size: 2.6rem;
  width: 100%;
  letter-spacing: 0.2rem;
}

h1 span {
  box-sizing: border-box;
  font-size: 3.6rem;
  letter-spacing: 0.3rem;
}

.logo {
  width: 24%;
  position: absolute;
  top: 37%;
  right: 3%;
  transform: translateY(-50%);
}

.caption {
  font-size: 1.2rem;
  font-weight: 700;
  justify-content: space-between;
  position: relative;
  margin-top: -3%;
  margin-bottom: 1%;
}

.line01 {
  width: 50%;
  border-bottom: 1px solid #fff;
  position: absolute;
  top: 50%;
  left: 28%;
}

/* ==========リード========== */

.sv {
  margin: 10% 0;
  padding: 8% 0;
  text-align: center;
  background-color: rgba(216, 216, 216, 0.5);
}

.sv p {
  margin-bottom: 3%;
}

.sv p:last-child {
  margin-bottom: 0;
}

/* ==========コンテンツフェードイン========== */

.scroll_up {
  transition: 1s ease-in-out;
  transform: translateY(0);
  opacity: 0;
}

.scroll_up.on {
  transform: translateY(0);
  opacity: 1.0;
}

/* ==========コンテンツ共通========== */
.contents {
  width: 70%;
  margin: auto;
  border-bottom: 0.5px solid #222;
  margin-top: 8%;
  padding-bottom: 8%;
  box-sizing: border-box;
}

.contents:last-child {
  border: none;
}

.mainvisual {
  width: 60%;
  height: auto;
  margin: auto;
  margin-bottom: 5%;
}

.name,
.bagname01 {
  font-size: 3.0rem;
}

.job {
  font-size: 2.5rem;
  position: relative;
  margin-bottom: 8.5%;
}

.job::after {
  content: '/';
  font-size: 5.0rem;
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translateX(-50%);
}

.bagname01 {
  width: 50%;
  margin: auto;
  border: 2px solid #222;
}

.bagname02 {
  font-size: 3.0rem;
  margin-top: 3%;
  margin-bottom: 0;
}

.price {
  font-size: 2.0rem;
  letter-spacing: 0.1em;
  margin-bottom: 5%;
}

.description {
  width: 100%;
  margin: auto;
}

.description p {
  margin-bottom: 2%;
}

.description p:last-child {
  margin-bottom: 0;
}

.view {
  display: inline-block;
  width: 70%;
  margin-top: 5%;
}

.picture {
  width: 100%;
  margin: auto;
  margin-bottom: 20%;
  margin-top: 20%;
}

.line02 {
  width: 0.5px;
  height: 100px;
  margin: auto;
  background-color: #222;
  text-align: center;
  margin-top: 8%;
  margin-bottom: 5%;
  background-clip: padding-box;
}

.insta {
  letter-spacing: 0.2em;
  color: #222;
}

.insta::before {
  content: '';
  display: inline-block;
  width: 20px;
  height: 20px;
  background-image: url(images/Instagram_Glyph_Black.png);
  background-repeat: no-repeat;
  background-size: contain;
  vertical-align: middle;
  margin-right: 10px;
}

/* ==========nanamiさん========== */
.nanamisan {
  position: relative;
  height: 200vh;
}

.nanamisan02 {
  width: 30vw;
  position: absolute;
  left: 10%;
  top: 0;
}

.nanamisan03 {
  width: 25vw;
  position: absolute;
  right: 10%;
  top: 50%;
}

.nanamisan04 {
  width: 35vw;
  position: absolute;
  bottom: 0;
  left: 0;
}

.nanamisan05 {
  width: 20vw;
  position: absolute;
  right: 21%;
  top: 15%;
  z-index: 100;
}

.nanamisan_insta {
  position: absolute;
  bottom: 0;
  right: 0;
}



/* ==========taekoさん========== */
.taekosan {
  position: relative;
  height: 190vh;
}

.taekosan02 {
  width: 30vw;
  position: absolute;
  top: 0%;
  left: 20%;
  z-index: 50;
}

.taekosan03 {
  width: 35vw;
  position: absolute;
  top: 10%;
  right: -10%;
}

.taekosan04 {
  width: 25vw;
  position: absolute;
  top: 50%;
  left: 0;
  z-index: 100;
}

.taekosan05 {
  width: 30vw;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 80;
}

.taekosan_insta {
  position: absolute;
  bottom: 0;
  right: 0;

}

/* ==========oyamadasan========== */
.oyamadasan {
  position: relative;
  height: 160vh;
}

.oyamadasan02 {
  width: 30vw;
  position: absolute;
  top: 5%;
  left: 0;
}

.oyamadasan03 {
  width: 40vw;
  position: absolute;
  top: 20%;
  right: 0;
}

.oyamadasan04 {
  width: 22vw;
  position: absolute;
  bottom: 0;
  left: 5%;
}

.oyamadasan_insta {
  position: absolute;
  bottom: 0;
  right: 0;
}

/* ==========makiさん========== */
.makisan {
  position: relative;
  height: 180vh;
}

.makisan_sp {
  display: none;
}

.makisan02 {
  width: 30vw;
  position: absolute;
  top: 8%;
  right: 10%;
}

.makisan03 {
  width: 25vw;
  position: absolute;
  top: 2%;
  left: 10%;
  z-index: 50;
}

.makisan04 {
  width: 25vw;
  position: absolute;
  top: 60%;
  right: 5%;
  z-index: 80;
}

.makisan05 {
  width: 33vw;
  position: absolute;
  bottom: 0;
  left: 0%;
  z-index: 100;
}

.makisan_insta {
  position: absolute;
  bottom: 0;
  right: 0;
}

/* ==========tanabeさん========== */
.moumou {
  width: 67%;
}

.tanabesan {
  position: relative;
  height: 185vh;
}

.tanabesan02 {
  width: 25vw;
  position: absolute;
  top: 5%;
  left: 8%;
  z-index: 100;
}

.tanabesan03 {
  width: 30vw;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 100;
}

.tanabesan04 {
  width: 27vw;
  position: absolute;
  top: 50%;
  right: 20%;
  z-index: 80;
}

.tanabesan05 {
  width: 35vw;
  position: absolute;
  bottom: 0;
  left: 0;
}

.tanabesan_insta {
  position: absolute;
  right: 0;
  bottom: 0;
}

/* ==========lineup========== */
article,
footer {
  background-color: rgba(233, 215, 215, 0.4);
  padding-top: 8%;
}

.article_h {
  position: relative;
}

.naname {
  font-family: filmotype-lacrosse, sans-serif;
  color: #D6519C;
  font-size: 2.5rem;
  transform: rotate(-20deg);
  -moz-transform: rotate(-20deg);
  -webkit-transform: rotate(-20deg);
  position: absolute;
  top: -55%;
  left: 23%;
}

.l_description {
  width: 60%;
  margin: auto;
  padding: 5% 0;
  box-sizing: border-box;
}

.l_description p {
  margin-bottom: 3%;
}

.box {
  width: 80%;
  margin: auto;
  position: relative;
}

.box ul {
  justify-content: space-between;
}

.box img {
  display: block;
  width: 92%;
  border: 2px solid #222;
  margin-left: 5%;
  margin-top: 5%;
}

.box img:first-child {
  margin-left: 0;
}

.lineup01 {
  width: 80%;
  height: 55vh;
  margin: auto;
}

.lineup02 {
  width: 53%;
  height: 70vh;
  margin: auto;
  padding-top: 8%;
  box-sizing: border-box;
}

.l_caption {
  font-size: 1rem;
  letter-spacing: 0.05rem;
  line-height: 2rem;
  text-align: left;
  padding-top: 100%;
}

.l_caption a,
.l_caption02 a {
  color: #222;
}

.l_caption span,
.l_caption02 span {
  display: block;
  float: right;
  margin-right: 9%;
  font-weight: 700;
  border-bottom: 1px solid #222;
  line-height: 1.5rem;
}

.slider_fade,
.paused {
  width: 100%;
}

.slider_fade>li {
  position: absolute;
  top: 0;
  list-style: none;
  visibility: hidden;
  animation: anime_slider_fade 12s 0s infinite;
}

.paused>li {
  position: absolute;
  top: 0;
  list-style: none;
}

.slider_fade>li:nth-of-type(2) {
  animation-delay: 4s;
}

.slider_fade>li:nth-of-type(3) {
  animation-delay: 8s;
}

@keyframes anime_slider_fade {
  0% {
    visibility: visible;
    opacity: 0;
  }

  15% {
    opacity: 1;
  }

  33.3% {
    opacity: 1;
  }

  48.3% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

.info {
  font-size: 2.0rem;
  font-weight: 400;
  letter-spacing: 0.3rem;
  margin-bottom: 3%;
}

.s_list {
  display: block;
  font-size: 2.0rem;
  color: #fff;
  background-color: #222;
  width: 22%;
  margin: auto;
  padding: 0.5%;
  box-sizing: border-box;
  border-radius: 50px;
}


/* ==========footer========== */

.border02 {
  width: 90%;
  margin: auto;
  border-top: 0.5px solid #222;
  padding-top: 8%;
  box-sizing: border-box;
}

.f_logo {
  width: 30%;
  margin: auto;
}

nav .flex {
  justify-content: center;
  letter-spacing: 0.2rem;
}

nav ul li {
  margin: 5% 0;
  padding: 0 3%;
  border-right: 0.5px solid #222;
}

nav ul li:last-child {
  border: none;
}


nav ul li a {
  display: block;
  width: 100%;
  text-align: center;
  color: #222;
  line-height: 1em;
}

p small {
  font-size: 0.8rem;
  letter-spacing: 0.1rem;
}



/* =====================TB横===================== */

@media screen and (max-width:1024px) {

  /* ========fv======== */

  .fv {
    background: none;
    width: 100vw;
    height: auto;
  }

  .tb_title02 {
    display: block;
  }

  .title,
  .sp_title,
  .tb_title {
    display: none;
  }

  .sv p,
  .description,
  .l_description {
    font-size: 1.4rem;
  }

  /* ========NANAMIさん======== */
  .nanamisan {
    height: 140vh;
  }

  /* ========TAAEKOさん======== */
  .taekosan {
    height: 140vh;
  }
  /* ========Oyamadaさん======== */
  .oyamadasan {
    height: 125vh;
  }

  .oyamadasan04 {
    width: 28vw;
  }

  /* ========MAKIさん======== */
  .makisan {
    height: 120vh;
  }

  /* ========TANABEさん======== */
  .tanabesan {
    height: 130vh;
  }

  .picture {
    margin-bottom: 10%;
    margin-top: 10%;
  }

  /* ========コンテンツ共通======== */
  .insta {
    font-size: 1.5rem;
  }

  .taekosan_insta,
  .oyamadasan_insta {
    letter-spacing: 0.15rem;
  }

  .line02 {
    height: 100px;
    margin-top: 0;
    margin-bottom: 5%;
  }

  .lineup02 {
    height: auto;
    padding: 0 0 8%;
  }
}



/* =====================TB縦===================== */

@media screen and (max-width:820px) {
  html {
    font-size: calc(100vw * 20 / 1024);
  }

  body {
    letter-spacing: unset;
  }

  img {
    max-width: 100%;
    height: auto;
  }

  .flex {
    display: block;
  }

  .inner {
    width: auto;
  }

  /* ========fv======== */
  .fv {
    background: none;
    width: 100vw;
    height: auto;
  }

  .tb_title {
    display: block;
  }

  .sp_title,
  .tb_title02 {
    display: none;
  }

  .title {
    display: none;
  }

  .sv {
    margin-top: 20%;
    margin-bottom: 25%;
  }

  /* ========コンテンツ共通======== */
  .contents {
    width: 100%;
  }

  .mainvisual {
    width: 60%;
    height: auto;
    margin: auto;
    margin-bottom: 5%;
  }

  .name,
  .bagname01 {
    font-size: 2.5rem;
    letter-spacing: 0.3rem;
  }

  .job {
    font-size: 2.0rem;
    letter-spacing: 0.3rem;

  }

  .job::after {
    font-size: 6.0rem;
  }

  .bagname02 {
    font-size: 2.5rem;
    margin-top: 3%;
    margin-bottom: 0;
    letter-spacing: 0.3rem;
  }

  .price {
    font-size: 2.0rem;
    letter-spacing: 0.1em;
    margin-bottom: 5%;
  }

  .picture {
    width: 95%;
    margin-bottom: 10%;
  }

  section .duo {
    width: 70%;
  }

  section .moumou {
    width: 85%;
  }

  .job {
    margin-bottom: 14%;
  }

  .insta {
    font-size: 1.2rem;
  }

  .insta::before {
    width: 15px;
    height: 15px;
    margin-right: 5px;
  }

  .line02 {
    height: 100px;
  }

  /* ========nanamiさん======== */
  .nanamisan {
    height: 110vh;
  }

  .nanamisan02 {
    width: 40vw;
    top: 5%;
    right: auto;
    left: 15%;
  }

  .nanamisan03 {
    width: 35vw;
    right: 0;
    top: 45%;
    z-index: 100;
  }

  .nanamisan04 {
    width: 50vw;
    left: 0;
    transform: none;
    z-index: 80;
  }

  .nanamisan05 {
    width: 30vw;
    top: 0;
    left: 55%;
    z-index: 150;

  }

  /* ========taekoさん======== */
  .taekosan {
    height: 110vh;
  }

  .taekosan02 {
    width: 40vw;
    top: 0;
    left: 50%;
  }

  .taekosan03 {
    width: 45vw;
    top: 8%;
    left: 3%;
    z-index: 100;
  }

  .taekosan04 {
    width: 35vw;
    top: 45%;
    left: 60%;
  }

  .taekosan05 {
    width: 55vw;
    bottom: 0;
    left: 0;
    transform: none;
    z-index: 150;
  }

  .taekosan_insta {
    letter-spacing: 0.1rem;
  }

  /* ========oyamadasan======== */
  .oyamadasan {
    height: 110vh;
  }

  .oyamadasan02 {
    width: 60vw;
    left: 0;
  }

  .oyamadasan03 {
    width: 45vw;
    top: 40%;
    right: 0;
    z-index: 80;
  }

  .oyamadasan04 {
    width: 45vw;
    left: 10%;
  }

  .oyamadasan_insta {
    letter-spacing: 0.1rem;
  }

  /* ========makiさん========*/
  .makisan{
    height:110vh;
  }

  .makisan02{
    width: 52vw;
    top: auto;
    left: 0;
    bottom: 0;
    transform: none;
    z-index: 80;
  }
  .makisan03{
    width: 42vw;
    top: 8%;
    left: 3%;
    z-index: 50;
  }
  
  .makisan04{
    width: 37vw;
    right: 5%;
    top: 42%;
    z-index: 100;
  }
  
  .makisan05{
    width: 50vw;
    top: 0;
    right: 0;
    left: auto;

  }
  

  /* ========tanabeさん======== */

  .tanabesan {
    position: relative;
    height: 100vh;
  }

  .tanabesan02 {
    width: 35vw;
    top: 10%;
  }

  .tanabesan03 {
    width: 45vw;
  }

  .tanabesan04 {
    width: 44vw;
    top: 45%;
    right: 15%;
  }

  .tanabesan05 {
    width: 50vw;
  }

  /* ========lineup======== */
  article,
  footer {
    padding-top: 15%;
  }

  .naname {
    font-size: 2.0rem;
    top: -50%;
    left: 15%;
  }

  .l_description {
    width: 100%;
  }

  .info {
    font-size: 2.5rem;
  }

  .s_list {
    width: 40%;
    margin-top: 8%;
    padding: 2%;
  }

  .box {
    margin-bottom: 10%;
  }

  .box img {
    width: 100%;
    margin-left: 0;
    margin-top: 5%;
  }

  .lineup01 {
    width: 80%;
    height: auto;
  }

  .lineup02 {
    width: 80%;
    height: auto;
    padding-top: 0;
  }

  .l_caption {
    line-height: 1rem;
    padding-top: 110%;
  }

  .l_caption span,
  .l_caption02 span {
    margin-right: 0;
    line-height: 1rem;
  }

  .info {
    font-size: 1.6rem;
  }

  /* ========footer======== */
  footer {
    padding-bottom: 10px;
    box-sizing: border-box;
  }

  .f_logo {
    width: 50%;
  }

  nav .flex {
    display: flex;
    justify-content: center;
    margin: 10% 0;
    letter-spacing: 0;
  }

  nav ul li {
    margin: 2% 0;
    padding: 0 3%;
    font-size: 1.2rem;
  }

  p small {
    letter-spacing: normal;
  }
}


/* ==================SP=================== */

@media screen and (max-width:599px) {
  html {
    font-size: calc(100vw * 14 / 599);
  }

  body {
    font-size: 1.3rem;
  }

  .fv {
    width: 100vw;
    height: 100vh;
  }

  .sp_title {
    display: block;
  }

  .title,
  .tb_title,
  .tb_title02 {
    display: none;
  }

  .mainvisual {
    width: 100vw;
  }

  .job::after {
    font-size: 5.0rem;
  }

  .line02 {
    height: 70px;
  }

  /* --------nanamiさん-------- */
  .nanamisan {
    height: 600px;
  }

  .nanamisan02 {
    width: 40%;
    top: 10%;
    right: auto;
    left: 15%;
  }

  .nanamisan03 {
    width: 40%;
    right: 0%;
    top: 45%;
    z-index: 100;
  }

  .nanamisan04 {
    width: 58%;
    left:0;
    transform: none;
    z-index: 80;
  }

  .nanamisan05 {
    width: 30%;
    top: 0%;
    left: 50%;
    z-index: 150;

  }

  /* --------taekoさん-------- */
  .taekosan {
    height: 93vh;
  }

  .taekosan02 {
    width: 45vw;
  }

  .taekosan03 {
    width: 50vw;
    left: 0;
  }

  .taekosan04 {
    width: 40vw;
    top: 45%;
    left: 55%;
  }

  .taekosan05 {
    width: 60vw;
  }

  /* --------oyamadasan-------- */
  .oyamadasan {
    height: 85vh;
  }

  /* --------makiさん-------- */
  .makisan{
    height: 92vh;
  }

  .makisan02{
    width: 55vw;
  }

  .makisan03{
    width: 45vw;
  }

  .makisan04{
    width: 40vw;
  }
  
  .makisan05{
    width: 53vw;
    z-index: 50;
  }

  /* --------tanabeさん-------- */

  .tanabesan {
    height: 75vh;
  }

  /* --------lineup-------- */

  .naname {
    left: 5%;
  }

}