:root {
    --device-height: 100%;
    --my-color: blue;
}

.max-w-half {
    max-width: 50%;
}

html {
    scroll-behavior: smooth;
}

span.aks {
    display: inline-block;
}

nav .menu > a {
    letter-spacing: 0.36px;
}

section {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: min-content;
    overflow: hidden;
}

footer {
    min-height: 163px;
    height: 163px;
}

.wave-block {
    width: 100%;
    overflow: hidden;
}

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

.section-body {
    padding-right: 16px;
    font: normal normal normal 13px/28px 'AxisBasicProN-R';
    letter-spacing: 0.28px;
}

.hero-section-body {
    font: normal normal normal 13px/28px "AxisBasicProN-M";
    letter-spacing: 0.28px;
}


.product-body {
    font: normal normal normal 13px/28px "AxisBasicProN-R";
    letter-spacing: 0.42px;
}

.hero {
    background: url("../asset/img/PC_firstview.webp") no-repeat center/cover;
    position: relative;
    width: 100%;
    height: var(--device-height);
}


.hero-text-box {
    padding: 0 40px;
}

.about {
    background-image: url("../asset/img/PC_about_fix.webp");
    background-color: #fcfcfc;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    min-height: 800px;
    height: 100vh;
}

.about-text-container {
    z-index: 10;
    width: 50%;
    position: absolute;
    top: calc(25%);
    transform: translateY(-25%);
    right: 0;
    padding-right: 110px;
}

.hero-title {
    font: normal normal bold 56px/65px "StudioFeixenSansBold";
    letter-spacing: 1.12px;
    margin-bottom: 29px;
}

.hero-subtitle {
    font-family: "StudioFeixenSansMedium", SansSerif, serif;
    line-height: 32px;
    letter-spacing: 0;
    font-size: 22px;
}

.menu-item {
    font: normal normal bold 18px "StudioFeixenSansBold";
    letter-spacing: 0.36px;
}

.section-title {
    font: normal normal bold 36px/85px "StudioFeixenSansBold";
    letter-spacing: 2.88px;
}

.text-body {
    font-size: 14px;
    line-height: 28px;
    letter-spacing: 0.28px;
}

.story {
    background-color: #531a09;
    height: min-content;
}

.story-img {
    width: 100%;
    border-radius: 40px;
    margin: auto 0;
    aspect-ratio: 1/1;
}


.story-block {
    margin-bottom: 40px;
    padding: 0 94px;
}

.story-2 {
    background: linear-gradient(180deg, #531A09 50%, #72350E 50%);
    height: min-content;
}

.story-3 {
    background-color: #72350E;
    height: min-content;
}

.wave-3-block {
    background-color: #531A09;
    max-height: 157px;
    min-height: 157px;
    top: 50%;
    transform: translateY(calc(-50% - 78px));
}

.wave-3-block img {
    width: 100%;
}

.story-title {
    margin-bottom: 58px;
}

.story-subtitle {
    font: normal normal normal 24px 'AxisBasicProN-B';
    letter-spacing: 1.44px;
    margin-bottom: 28px;

}

.product {
    height: min-content;
}

.product-title {
    font: normal normal bold 42px/53px "StudioFeixenSansMedium";
    letter-spacing: 1.01px;
}

.product-info-line {
    width: 100%;
    position: static;
    margin-bottom: 31.7px;
}

.product-subtitle {
    font-size: 35px;
    letter-spacing: 0;
}

.product-jp-title {
    font: normal normal normal 19px/34px "AxisBasicProN-B";
    letter-spacing: 0.38px;
    margin-bottom: 40px;
}

.cta-text {
    font: normal normal bold 23px/43px "StudioFeixenSansBold";
    letter-spacing: 0.46px;
}

.footer-text-container > div {
    margin-left: 33px;
}

.primary-btn {
    text-align: center;
    border-radius: 37px;
    background-color: #72350e;
    color: #ffffff;
    cursor: pointer;
    padding: 12px 0;
    width: 100%;
    font: normal normal bold 30px "StudioFeixenSansBold";
    letter-spacing: 0.6px;
}

.sns-icon {
}

.carousel-container {
    width: 100%;

}

.slider-container {
    position: relative;
}

.slider {
    height: auto;
    border-radius: 10px;
    overflow: hidden;
    width: 100%;

    aspect-ratio: 1/1;
}

.slides {
    width: 500%;
    height: 100%;
    display: flex;
}

.slides input {
    display: none;
}

.slide {
    width: 20%;
    height: 100%;
    transition: 2s;
}

.slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 40px;
}

.manual-btn {
    cursor: pointer;
    transition: 1s;
}

.manual-btn img {
    object-fit: contain;
}

.manual-btn:not(:last-child) {
    margin-right: 40px;
}

.manual-btn:hover {
    background: #40D3DC;
}

#radio0:checked ~ .first {
    margin-left: 0;
}

#radio1:checked ~ .first {
    margin-left: -20%;
}

#radio2:checked ~ .first {
    margin-left: -40%;
}

#radio3:checked ~ .first {
    margin-left: -60%;
}

#radio4:checked ~ .first {
    margin-left: -80%;
}

/*css for automatic navigation*/

.navigation-auto {
    position: absolute;
    display: flex;
    width: 800px;
    justify-content: center;
    margin-top: 460px;
}

.navigation-auto div {
    border: 2px solid #40D3DC;
    padding: 5px;
    border-radius: 10px;
    transition: 1s;
}

.navigation-auto div:not(:last-child) {
    margin-right: 40px;
}

.carousel-button {
    position: absolute;
    width: 38px;
    top: 50%;
    z-index: 2;
    transform: translateY(-50%);
}

.carousel-button:hover {
    cursor: pointer;
}

.carousel-button.prev {
    left: 15px;
}

.carousel-button.next {
    right: 15px;
}


.youtube-banner {
    border-radius: 60px;
}

.banner-text {
    /*font: normal normal bold 39px/43px "StudioFeixenSansBold";*/
    letter-spacing: 0.78px;
}

.secondary-btn {
    background-color: #ffffff;
    border-radius: 37px;
    color: #802a2a;
}


.burger {
    outline: none;
    height: 28px;
    width: 28px;
    background: transparent;
    transition: all 250ms ease-out;
    cursor: pointer;
    padding: 10px 20px;
}

.burger:before, .burger:after {
    content: '';
    width: 28px;
    height: 2px;
    position: absolute;
    background: #ffffff;
    transition: all 250ms ease-out;
    will-change: transform;
}

.burger:before {
    transform: translate(-12px, -5.5px);
}

.burger:after {
    transform: translate(-12px, 5.5px);
}

.active.burger:before {
    background: #4E1B0C;
    transform: translate(-12px, 0) rotate(45deg);
}

.active.burger:after {
    background: #4E1B0C;
    transform: translate(-12px, 0) rotate(-45deg);
}


#mobile-menu {
    display: none;
    opacity: 0;
    transition: all 200ms ease-in;
    height: var(--device-height);
    padding: 37px 24px;
}

#mobile-menu.active {
    opacity: 1;
    display: block;
    visibility: visible;
}

.mobile-menu-logo {
    margin-bottom: 54px;
}

.mobile-menu-item {
    font: normal normal bold 24px "StudioFeixenSansMedium";
    letter-spacing: 1.92px;
    margin-bottom: 28px;
}

body.fixed-position {
    position: fixed
}

.copy-right {
    font: normal normal normal 13px/21px "StudioFeixenSansRegular";
    letter-spacing: 0.26px;
    padding: 38px 0;
}

.animate-hidden {
    opacity: 0;
    transform: translateY(+3%);
    transition: opacity 700ms ease-in-out, transform 700ms ease-in-out;
}

.translate-y-20 {
    transform: translateY(+20%);
}

.translate-y-10 {
    transform: translateY(+10%);
}

.translate-y-5 {
    transform: translateY(+5%);
}

.translate-y-3 {
    transform: translateY(+3%);
}

.animate-show {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
}

.menu-item {
    transition: opacity 1s ease-in-out, transform 1s ease-in-out, background-color 200ms ease;
}