@charset "utf-8";
:root {
    --textColor: #2e1c1a;
    --bgColor: #f3c185;
    --height: 100vh;
}
#wrapperContainer {
    background: #fbebd957;
}
#wrapper {
	width: 100%;
    margin: 0 auto;
    text-align: center;
    color: var(--text-color);
    font-size: 85%;
    letter-spacing: 0.055rem;
    line-height: 1.6;
    background: #FFF;
    @media (width >= 768px) {
        max-width: 720px;
    }
    & img{
        width: 100%;
        height: auto;
    }
    & a {
	  text-decoration: none;
	  color: var(--text-color);
	  display: block;
    }
    .pc {
	  display: none;
        @media (width >= 768px) {
            display: unset;
        }
    }
    & span.br {
        display: block;
    }
    & span.br_sp {
        display: block;
        @media (width >= 768px){
            display: unset;
        }
    }
    @media (width >= 768px){
      .sp {
          display:none;
        }
    }
  .moreBtn {
      width: fit-content;
      width: 87%;
      margin: 0 auto 0;
      & a {
          background-color: var(--text-color);
          border-radius: 50px;
          color: #ffffff;
          padding: 1em 2.5em 1em 2em;
          position: relative;
          font-size: 90%;
          box-shadow: 0 0 16px rgba(46, 28, 26, 0.06);
          @media (width >= 768px){
			  font-size: 14px;
		  }
        }
        & a::after {
            position: absolute;
            right: 1.5em;
            top: calc(50% - 0.35rem);
            display: block;
            content: '';
            width: 0.6em;
            height: 0.6em;
            border-top: solid 1px #ffffff;
            border-right: solid 1px #ffffff;
            transform: rotate(135deg);
            transition: all 0.2s;
        }
    }
    .fontNotoRegular {
        font-family: noto-sans-cjk-jp, sans-serif;
        font-weight: 400;
        font-style: normal;
    }
    .fontNotoBold {
        font-family: noto-sans-cjk-jp, sans-serif;
        font-weight: 700;
        font-style: normal;
    }
    .fontContraltoRegular {
        font-family: "contralto-big", sans-serif;
        font-weight: 400;
        font-style: italic;
        line-height: 1;
        display: inline-block;
    }
    .fontContraltoBold {
        font-family: "contralto-big", sans-serif;
        font-weight: 600;
        font-style: italic;
        line-height: 1;
        display: inline-block;
    }
    #main-visual {
        margin: 0 0 7.69vw;
        @media (width >= 768px){
			margin-bottom: 90px
		}
        & p {
            margin: 0 0 5.51vw;
            & strong {
                font-weight: bold;
            }
			@media (width >= 768px){
				font-size: 24px;
                margin: 50px 0;
			}
        }
        & p:last-of-type {
            font-size: 80%;
            margin: 0 0 9.74vw;
            @media (width >= 768px){
				font-size: 18px;
                margin-bottom: 75px;
			}
        }
    }
    .h3Box {
        & h3 {
            font-size: 255%;
            color: #ffffff;
            @media (width >= 768px){
				font-size: 62px;
			}
        }
        & p {
            font-size: 80%;
            margin: 1.5vw 0 5.64vw;
            @media (width >= 768px){
				font-size: 18px;
                margin: 12px 0 40px;
			}
        }
    }
    & nav {
        background-color: var(--bgColor);
        padding: 6vw 0 3vw;
        @media (width >= 768px){
			padding: 60px 0 175px;
		}
        & ul {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 3.21vw;
            margin: 0 3.59vw 22.82vw;
            @media (width >= 768px){
				margin: 0 35px;
                gap: 30px;
			}
            & li {
                flex: 0 0 calc((100% - 3.21vw) / 2);
                min-width: 0;
                margin-bottom: 1.25vw;
                @media (width >= 768px){
					margin-bottom: 0;
                    flex: 0 0 calc((100% - 30px) / 2);
				}
                .navImg {
                    border-radius: clamp(6px, 1.282vw, 10px);
                    overflow: hidden;
                    margin-bottom: 17.5vw;
                    box-shadow: 0 0 16px rgba(46, 28, 26, 0.06);
                    @media (width >= 768px){
						margin-bottom: 0;
					}
                }
                .navBox {
                    margin-top: -20vw;
                    @media (width >= 768px){
						margin-top: -23px;
					}
                    .chart {
                        width: 85.43%;
                        margin: 0 auto;
                    }
                    .btn {
                        color: var(--textColor);
                        margin: 0 auto;
                        padding: 0;
                        min-width: unset;
                        font-size: 110%;
                        & p {
                            font-size: 80%;
                            position: relative;
                            padding: 1.5vw 0 2.5vw 0;
                            @media (width >= 768px){
								font-size: 20px;
                                padding: 12px 0 17px;
							}
                        }
                        & p::after {
                            position: absolute;
                            right: calc(50% - 0.35rem);
                            bottom: 0;
                            display: block;
                            content: '';
                            width: 0.75em;
                            height: 0.75em;
                            border-top: solid 1px var(--textColor);
                            border-right: solid 1px var(--textColor);
                            transform: rotate(135deg);
                            transition: all 0.2s;
                            @media (width >= 768px){
								border-top: solid 1.5px var(--textColor);
                            border-right: solid 1.5px var(--textColor);
							}
                        }
                    }
                }
            }
            & li.menu00 {
                flex: 0 0 100%;
                @media (width >= 768px){
					margin-bottom: 0;
				}
                .navImg {
                    position: relative;
                    margin-bottom: 0;
                    .navBox {
                        position: absolute;
                        right: 0;
                        top: 50%;
                        transform: translateY(-50%);
                        width: calc(100% / 2);
                        padding-left: 3.21vw;
                        margin-top: 0;
                        .navBox-txt {
                            padding-bottom: 6%;
                            padding-right: 5%;
                        }
                    }
                }
            }
            & li.fgh {
                position: relative;
                .fghIcon {
                    position: absolute;
                    width: 34.57%;
                    top: -1.5%;
                    left: 0.75%;
                }
            }
        }
    }
    #about {
        background: #FFF;
        & h3 {
            position: absolute;
            width: 1px;
            height: 1px;
            overflow: hidden;
        }
        .bg {
            aspect-ratio: 780 / 777;
            position: relative;
            .reviewBox {
                position: absolute;
                top: -4.74vw;
                left: 50%;
                transform: translateX(-50%);
                @media (width >= 768px){
					top: -40px;
				}
                .review {
                    width: 70.13vw;
                    margin: 0 auto;
                    position: relative;
                    @media (width >= 768px){
                        width: 547px;
                    }
                }
                & p {
                    position: absolute;
                    font-size: 65%;
                    bottom: 1%;
                    right: -7%;
                    @media (width >= 768px){
						font-size: 14px;
						right: 0;
					}
                }
            }
            .movieBox {
                position: absolute;
                width: 90%;
                aspect-ratio: 16 / 9;
                top: 40%;
                left: 50%;
                transform: translateX(-50%);
                @media (width >= 768px){
					overflow: hidden;
					width: 652px;
					height: 367px;
				}
                .hacobune-app-container[data-v-84392b72] {
                    width: 100%;
                    padding: 0;
                    background: unset;
                    color: unset;
                }
                .hacobune-unit-video[data-v-2a6c6f09] {
                    margin: 0;
                }
            }
        }
        .outfitBox {
            padding: 3vw 0 12vw;
            @media (width >= 768px){
                padding: 20px 0 80px;
            }
            .my-swiper {
                .swiper-wrapper {
                    transition-timing-function: linear !important;
                }
            }
        }
    }
    #item {
        /*aspect-ratio: 780 / 8802;*/
        @media (width >= 768px){
            /*clip-path: inset(0 0 450px 0);
            width: 100%;
            margin-bottom: -450px;*/
		}
        .h3Box {
            padding-top: 10vw;
            @media (width >= 768px){
                padding-top: 95px;
            }
        }
        & h3 {
            color: #f0b167;
        }
        & dl.lineup_container {
            padding: 0 4.17vw;
            @media (width >= 768px){
                padding: 0 80px;
            }
            .modelBox {
                 position: relative;
                 .lineup_m_img {
                    position: absolute;
                    left: 50%;
                    top: 5%;
                    transform: translateX(-50%);
                    width: 87%;
                    aspect-ratio: 628 / 692;
                    overflow: hidden;
                 }
				& a {
					height: 100%;
				}
                 & img {
                  width: 100%;
                  height: 100%;
                  object-fit: cover;
                  object-position: 50% 60%;
                  display: block;
                 }
            }
            .color {
                display:flex;
                align-items: baseline;
                justify-content: center;
                margin-top: -1%;
                margin-bottom: -1%;
                & ul {
                    display:flex;
                    align-items: flex-end;
                    justify-content: center;
                    margin: 0 0 4.23vw;
                    @media (width >= 768px){
						margin-bottom: 30px;
					}
                    & li {
                        margin: 0.6rem 0 0 0.75rem;
                        & img {
                            width: 2.5rem;
                            height: 2.5rem;
                            object-fit: none;
                            object-position: 81% 66%;
                            border-radius: 50%;
                            @media (width >= 768px){
								width: 50px;
	                            height: 50px;
							}
                        }
                    }
                }
            }
            & dd.size {
                background-color: var(--bgColor);
                margin: 0 auto;
                font-size: 90%;
                padding: 0 1em;
                width: fit-content;
                aspect-ratio: 282 / 46;
                display: flex;
                justify-content: center;
                align-items: center;
                @media (width >= 768px){
					font-size: 18px;
				}
            }
            & dt {
                margin: 3.25vw 0 0;
                @media (width >= 768px){
					margin-top: 25px;
                    font-size: 18px;
                    margin-bottom: 0.25em;
				}
            }
			.block-goods-item--price--price.price.js-enhanced-ecommerce-goods-price {
                font-size: 100%;
                font-weight: bold;
                @media (width >= 768px){
					font-size: 20px;
				}
            }
        }
        .moreBtn {
            width: fit-content;
            margin-top: 3vw;
            @media (width >= 768px){
				margin-top: 30px;
			}
            & a {
                background-color: var(--textColor);
                padding: 1.25em 4em 1.25em 3em;
                @media (width >= 768px){
					padding: 25px 85px 25px 75px;
                    font-size: 18px;
				}
            }
            & a::after {
                top: calc(50% - 0.25rem);
                transform: rotate(45deg);
                right: 2em;
                @media (width >= 768px){
                    top: calc(50% - 0.45rem);
                }
            }
        }
        .item01Container { 
            background: url("/img_visu/genre/bra_hadamise/2602/bgItem01.jpg") center / cover no-repeat;
            aspect-ratio: 780 / 1645;
            @media (width >= 768px){
                clip-path: inset(0 0 100px 0);
                width: 100%;
                margin-bottom: -105px;
			}
        }
        #item01 {
        }
        #item02 {
            background: url("/img_visu/genre/bra_hadamise/2602/bgItem02.jpg") center / cover no-repeat;
            aspect-ratio: 780 / 1457;
            @media (width >= 768px){
                clip-path: inset(0 0 120px 0);
                width: 100%;
                margin-bottom: -125px;
			}
        }
        #item03 {
            background: url("/img_visu/genre/bra_hadamise/2602/bgItem03.jpg") center / cover no-repeat;
            aspect-ratio: 780 / 1417;
            @media (width >= 768px){
                clip-path: inset(0 0 110px 0);
                width: 100%;
                margin-bottom: -115px;
			}
        }
        #item04 {
            background: url("/img_visu/genre/bra_hadamise/2602/bgItem04.jpg") center / cover no-repeat;
            aspect-ratio: 780 / 1407;
            @media (width >= 768px){
                clip-path: inset(0 0 120px 0);
                width: 100%;
                margin-bottom: -125px;
			}
        }
        #item05 {
            background: url("/img_visu/genre/bra_hadamise/2602/bgItem05.jpg") center / cover no-repeat;
            aspect-ratio: 780 / 1424;
            @media (width >= 768px){
                clip-path: inset(0 0 120px 0);
                width: 100%;
                margin-bottom: -125px;
			}
        }
        #item06 {
            background: url("/img_visu/genre/bra_hadamise/2602/bgItem06.jpg") center / cover no-repeat;
            aspect-ratio: 780 / 1447;
            @media (width >= 768px){
                clip-path: inset(0 0 120px 0);
                width: 100%;
                margin-bottom: -125px;
			}
        }
    }
    #topics {
        background: var(--bgColor);
        padding: 12.82vw 0 15.38vw;
        @media (width >= 768px){
			padding: 70px 0 120px;
		}
        & ul {
            margin: 7.44vw 2.69vw 0;
            display: flex;
            @media (width >= 768px){
				margin: 0 25px;
			}
            & li:first-child {
                margin-right: 2.69vw;
                @media (width >= 768px){
					margin-right: 25px;
				}
            }
        }
    }
}