@charset "utf-8";
/* CSS Document */
body {
  background-color: #BCB3A6;
  font-family: 'Shippori Mincho B1', serif;
  font-size: 18px;
  background-image: linear-gradient(0deg, transparent calc(100% - 1px), rgba(90, 90, 90, 0.1) calc(100% - 1px)), linear-gradient(90deg, transparent calc(100% - 1px), rgba(90, 90, 90, 0.1) calc(100% - 1px));
  background-size: 80px 80px;
  background-repeat: repeat;
  background-position: top center;
}
img {
  width: 100%;
}
.cf::after {
  content: "";
  display: block;
  clear: both;
}
header, footer{
	background-color: #BCB3A6;	
}
footer .footer__copyright{
	color: #444444;
}
@media (max-width: 768px) {
  body {
    font-size: 15px;
  }
}
/* -------------------- header -------------------- */
/* 背景色変更 不要な場合は削除 */
header {
  background-color: #fffcf8;
}
/* -------------------- content -------------------- */
/*メインビジュアル&タイトル*/
h1 {
  text-align: center;
  font-size: 65px;
  color: aliceblue;
  margin-top: 2%;
  line-height: 1.75;
  letter-spacing: normal;
}
h1 span {
  display: block;
  font-size: 15px;
}
#top {
  padding-top: 4.5%;
}
#top p {
  width: 70%;
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
  margin-top: 2%;
  color: aliceblue;
  font-weight: bold;
}
@media (max-width: 768px) {
  h1 {
    font-size: 40px;
    line-height: 1.5;
  }
  h1 span {
    display: block;
    font-size: 14px;
  }
  #top {
    padding-top: 10%;
  }
}
/*ブランドボックス*/
.brand-box {
  margin: 18% 0%;
}
.look img {
  margin-bottom: 4%;
}
.brand-box_inner {
  margin: 0 auto;
  width: 80%;
  max-width: 900px;
}
.brand-main {
  width: 90%;
  max-width: 880px;
  margin: 0 auto;
  margin-bottom: 5%;
}
.main-look {
  position: relative;
  width: 90%;
  max-width: 800px;
  margin: 0 auto;
}
.brand-tag {
  position: absolute;
  background-color: #fff;
  width: 130px;
  padding: 2.5% 1.5% 2% 2%;
  margin: 2%;
  line-height: 1.2;
}
.number {
  font-size: 2.8em;
  font-weight: bold;
  padding-bottom: 5%;
}
.number sup {
  font-size: 0.5em;
}
.brand-name {
  font-size: 15px;
  font-weight: bold;
}
.brand-name span {
  display: block;
  font-size: 0.8em;
  margin-top: 5%;
}
@media (max-width: 768px) {
  .main-look {
    width: 100%;
  }
  .brand-tag {
    width: 20%;
    top: -4%;
  }
  .number {
    font-size: 2.2em;
    padding-bottom: 3%;
  }
  .number sup {
    font-size: 0.5em;
  }
  .brand-name {
    font-size: 13px;
    font-weight: bold;
  }
  .brand-name span {
    display: block;
    margin-top: 6%;
  }
}
/*コーデリンク*/
.coordinate-item {
  font-size: 12px;
  font-weight: bold;
  font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
  margin-top: 2%;
  letter-spacing: normal;
  color: #000;
  line-height: 2.25;
  margin-bottom: 5%;
}
.coordinate-item span {
  font-weight: normal;
  padding-right: 1%;
}
.coordinate-item a.buy-button {
  font-size: 10px;
  margin: 0% 1.5% 0% 0.5%;
  width: 52px;
  height: 20px;
  height: 100%;
  background-color: #C7C7C7;
  border-radius: 12px;
  display: inline-block;
  text-align: center;
}
.coordinate-item a.buy-button:hover {
  background-color: steelblue;
  opacity: 1;
}
a.other-link {
  margin-right: 0.5%;
  font-weight: normal;
}
a.other-link:after {
  content: "|";
  margin-left: 1%;
}
a.other-link:last-child:after {
  content: none;
}
a.other-link:hover {
  color: steelblue;
  opacity: 1;
  font-weight: bold;
}
@media (max-width: 768px) {
  .coordinate-item {
    margin: 0 auto;
    font-size: 11px;
    margin-top: 5%;
    line-height: 2;
    margin-bottom: 8%;
    width: 90%;
  }
  .coordinate-item a.buy-button {
    font-size: 10px;
    margin: 0% 1.5% 0% 0.2%;
    width: auto;
    height: 20px;
    height: 100%;
    border-radius: 12px;
    padding: 0% 3%;
  }
}
/*サブルック*/
.sub-look {
  position: relative;
  width: 90%;
  margin: 0 auto;
}
.brand-box1 .sub-look {
  padding: 60% 0 0;
}
.sub-look .look {
  position: absolute;
}
.look1_2 {
  width: 27.9%;
  left: 14.55%;
  top: 1.76%;
}
.look1_3 {
  width: 36.76%;
  left: 57.78%;
  top: 0%;
}
.brand-box2 .sub-look {
  padding: 115% 0 0;
}
.look2_2 {
  width: 36.9%;
  left: 14.55%;
  top: 0%;
}
.look2_3 {
  width: 30%;
  left: 57.78%;
  top: 26%;
}
.look2_4 {
  width: 30%;
  left: 62%;
  top: 43%;
}
.brand-box3 .sub-look {
  padding: 60% 0 0;
}
.look3_2 {
  width: 46%;
  right: 27%;
  top: 0;
}
.sub-look4 {
  padding: 70% 0 0;
}
.look4_3 {
  width: 30%;
  left: 8%;
  top: 0;
}
.look4_4 {
  width: 23%;
  left: 48%;
  top: 6%;
  z-index: 2;
}
.look4_5 {
  width: 23%;
  left: 68%;
  top: 14%;
  z-index: 1;
}
.brand-main4 .brand-tag {
  top: 45%;
  left: 0%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
}
@media (max-width: 768px) {
  .sub-look {
    position: relative;
    width: 100%;
    margin: 0 auto;
  }
  .sub-look .look {
    position: absolute;
  }
  .brand-box1 .sub-look {
    padding: 180% 0 0;
  }
  .look1_2 {
    width: 50%;
    left: 3%;
    top: 1.76%;
  }
  .look1_3 {
    width: 75%;
    left: inherit;
    right: 1%;
    top: 35%;
  }
  .look1_3 p {
    padding: 0% 1%;
    margin: 0 auto;
  }
  .brand-box2 .sub-look {
    padding: 330% 0 0;
  }
  .look2_2 {
    width: 70%;
    left: 2%;
    top: 0%;
  }
  .look2_3 {
    width: 80%;
    left: inherit;
    right: 10%;
    bottom: 38%;
    top: inherit;
  }
  .look2_4 {
    width: 62%;
    left: inherit;
    right: 0%;
    bottom: 5%;
    top: inherit;
  }
	.brand-box2 .coordinate-item {
    font-size: 11px;
    margin-top: 5%;
    line-height: 2;
    margin-bottom: 8%;
    width: 100%;
    margin: 0 auto;
		padding: 0% 1% 4%;
  }
.brand-box3 .sub-look {
  padding: 90% 0 0;
}
.look3_2 {
  width: 70%;
	top: 5%;
	right: 15%;
}
.brand-box4 .sub-look {
  padding: 300% 0 0;
}
.look4_3 {
  width: 70%;
  left: 15%;
  top: 0;
}
.look4_4 {
  width: 45%;
  left: 15%;
  top: inherit;
  z-index: 2;
	bottom: 40%;
}
.look4_5 {
  width: 60%;
  left: 25%;
  top: inherit;
	bottom: 5%;
  z-index: 1;
}
.brand-main4 .brand-tag {
  top: 45%;
  left: 0%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
}
}
/* -------------------- アイテム -------------------- */
.item_block ul {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  text-align: center;
  width: 75%;
  max-width: 1400px;
  margin: 0 auto;
  gap: 2%;
}
@media (max-width: 768px) {
  .item_block ul {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    text-align: center;
    width: 100%;
    margin: 0 auto;
    padding: 2%;
    gap: 2%;
  }
}
/* -------------------- ブランド説明と一覧 -------------------- */
.brand-explanation {
  width: 75%;
  margin: 0 auto;
  background-color: aliceblue;
  font-size: 14px;
  padding: 2%;
  margin-top: 5%
}
.brand-logo {
  width: 10%;
  position: relative;
}
.brand-logo img {
  position: absolute;
  transform: translate(-35%, -35%);
  width: 140px;
  border: 1px solid;
}
.explanation {
  width: 100%;
  padding: 1% 2% 1% 140px;
}
a.brand-itiran {
  width: 75%;
  margin: 0 auto;
  text-align: center;
  max-width: 1400px;
  border: 2px solid aliceblue;
  display: block;
  color: aliceblue;
  margin-top: 2%;
  padding: 1.5% 0%;
  font-size: 1.2em;
  transition: 0.5s;
}
a.brand-itiran:hover {
  background-color: aliceblue;
  color: #000;
}
@media (max-width: 768px) {
  .brand-explanation {
    width: 90%;
    margin: 0 auto;
    background-color: aliceblue;
    font-size: 14px;
    padding: 5% 3%;
    margin-top: 5%
  }
  .brand-logo {
    width: 20%;
    position: inherit;
    margin: 0 auto;
  }
  .brand-logo img {
    position: inherit;
    transform: inherit;
    width: 100%;
    border: 1px solid;
  }
  .explanation {
    width: 100%;
    padding: 2% 2% 2%;
  }
  a.brand-itiran {
    width: 90%;
    margin-top: 3%;
    padding: 1.5% 2%;
    font-size: 1em;
    transition: 0.5s;
  }
}
/* -------------------- pagetop -------------------- */
/* ページの上部へ　右下固定版 */
#pagetop--fixed {
  position: fixed;
  bottom: 10vh;
  right: 1vw;
  background: #222;
  opacity: 0.7;
  border-radius: .2rem;
}
#pagetop--fixed a {
  position: relative;
  display: block;
  width: 50px;
  height: 50px;
  text-decoration: none;
}
#pagetop--fixed a::before {
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f062';
  font-size: 25px;
  color: #fff;
  position: absolute;
  width: 50px;
  height: 50px;
  margin: auto;
  text-align: center;
}
/* -------------------- 表示非表示 -------------------- */
@media (min-width: 769px) {
  .sp {
    display: none;
  }
}
@media (max-width: 768px) {
  .pc {
    display: none;
  }
}
/* -------------------- アニメーション -------------------- */
/* 下から */
.fadeUp {
  animation-name: fadeUpAnime;
  animation-duration: 0.8s;
  animation-fill-mode: forwards;
  opacity: 0;
}
@keyframes fadeUpAnime {
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(10%, 0, 0);
    transform: translate3d(10%, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(10%, 0, 0);
    transform: translate3d(10%, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@-webkit-keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-10%, 0, 0);
    transform: translate3d(-10%, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-10%, 0, 0);
    transform: translate3d(-10%, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}