img {
    max-width: 100%;
}

#content.content-brand-top {
    padding: 0;
}
@media only screen and (min-width: 769px) {
    #content.content-brand-top {
        min-width: 1024px;
    }
}

.btn-more {
    text-align: center;
}
.btn-more a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(250px, 100vw * (250/750));
    height: min(56px, 100vw * (56/750));
    background-color: #00833b;
    color: #fff;
    font-size: min(22px, 100vw * (22/750));
    font-family: "Noto Sans Thai", sans-serif;
    font-weight: bold;
    letter-spacing: 0.075em;
    line-height: 1;
    text-align: center;
    transition: opacity 0.3s;
}
.btn-more a:hover {
    text-decoration: none;
    opacity: 0.7;
}
.btn-more .btn-wh {
    background-color: #fff;
    color: #000;
}
@media only screen and (min-width: 769px) {
    .btn-more a {
        width: min(168px, 100vw * (168/1920));
        height: min(38px, 100vw * (38/1920));
        font-size: min(14px, 100vw * (14/1920));
    }
}

.ttl {
    margin-bottom: min(90px, 100vw * (90/750));
    padding-bottom: 0.7em;
    font-size: min(50px, 100vw * (50/750));
    font-family: "Raleway", sans-serif;
    letter-spacing: 0.05em;
    line-height: calc(60 / 50);
    text-align: center;
    position: relative;
}
.ttl:after {
    content: "";
    display: inline-block;
    width: min(120px, 100vw * (120/750));
    height: 1px;
    background-color: #00833b;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}
@media only screen and (min-width: 769px) {
    .ttl {
        margin-bottom: min(90px, 100vw * (90/1920));
        padding-bottom: 0.5em;
        font-size: min(48px, 100vw * (48/1920));
        line-height: calc(60 / 48);
        text-align: left;
    }
    .ttl:after {
        width: min(120px, 100vw * (120/1920));
        height: 2px;
        left: 0;
        transform: translateX(0);
    }
}

#mv {
    width: 100%;
    background-color: #000;
}
.mv-inner {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 100%;
    height: min(650px, 100vw * (650/750));
    position: relative;
}
.mv-title {
    display: none;
    width: 100%;
    padding-top: min(30px, 100vw * (30/750));
    padding-bottom: min(40px, 100vw * (40/750));
    background-color: rgba(0, 0, 0, 0.5);
    position: absolute;
    bottom: min(50px, 100vw * (50/750));
    left: 0;
    z-index: 1;
}
.mv-title h1 {
    margin-bottom: min(30px, 100vw * (30/750));
    color: #fff;
    font-size: min(40px, 100vw * (40/750));
    font-family: "Raleway", sans-serif;
    font-weight: 400;
    letter-spacing: 0.025em;
    line-height: 1;
    text-align: center;
}
.mv-title p {
    color: #fff;
    font-size: min(19px, 100vw * (19/750));
    font-family: "Raleway", sans-serif;
    font-weight: bold;
    letter-spacing: 0.093em;
    line-height: calc(36 / 19);
    text-align: center;
}
.mv-video {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 0;
}
.mv-video video,
.mv-video iframe {
    width: 100%;
    height: 100%;
    aspect-ratio: 900/800;
    object-fit: cover;
}
@media only screen and (min-width: 769px) {
    #mv {
    }
    .mv-inner {
        height: min(815px, 100vw * (815/1920));
    }
    .mv-title {
        padding-top: min(30px, 100vw * (30/1920));
        padding-bottom: min(40px, 100vw * (40/1920));
        bottom: min(30px, 100vw * (30/1920));
    }
    .mv-title h1 {
        margin-bottom: min(30px, 100vw * (30/1920));
        font-size: min(60px, 100vw * (60/1920));
    }
    .mv-title p {
        font-size: min(21px, 100vw * (21/1920));
        line-height: calc(40 / 21);
    }
    .mv-video video,
    .mv-video iframe {
        aspect-ratio: 1920/815;
    }
}

.content-philosophy {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-bottom: min(190px, 100vw * (190/750));
    padding-top: min(120px, 100vw * (120/750));
}
.content-philosophy .ttl {
    margin-bottom: min(22px, 100vw * (22/750));
    padding-bottom: 0.5em;
}
.content-philosophy p {
    max-width: 90%;
    margin: 0 auto;
    font-size: min(22px, 100vw * (22/750));
    font-family: "Noto Sans Thai", sans-serif;
    letter-spacing: 0.05em;
    line-height: calc(42 / 20);
    text-align: center;
}
.philosophy-video {
    margin-top: min(100px, 100vw * (100/750));
}
.philosophy-video video {
    width: 100%;
    height: 100%;
    aspect-ratio: 1280/720;
    object-fit: contein;
}
.philosophy-btn {
    margin-top: min(60px, 100vw * (60/750));
}
@media only screen and (min-width: 769px) {
    .content-philosophy {
        flex-direction: row;
        justify-content: flex-end;
        margin-bottom: min(160px, 100vw * (160/1920));
        padding-top: min(140px, 100vw * (140/1920));
    }
    .philosophy-text {
        width: max-content;
        padding-right: min(80px, 100vw * (80/1920));
    }
    .content-philosophy .ttl {
        margin-bottom: min(20px, 100vw * (20/1920));
    }
    .content-philosophy p {
        max-width: min(580px, 100vw * (580/1920));
        font-size: min(18px, 100vw * (18/1920));
        line-height: calc(42 / 18);
        text-align: left;
    }
    .content-philosophy .philosophy-video {
        width: 50%;
        margin-top: 0;
    }
    .philosophy-btn {
        margin-top: min(60px, 100vw * (60/1920));
    }
}

.content-style {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-bottom: min(190px, 100vw * (190/750));
}
.content-style .ttl {
    margin-bottom: min(22px, 100vw * (22/750));
    padding-bottom: 0.5em;
}
.content-style p {
    max-width: 90%;
    margin: 0 auto;
    font-size: min(22px, 100vw * (22/750));
    font-family: "Raleway", sans-serif;
    letter-spacing: 0.05em;
    line-height: calc(42 / 20);
    text-align: center;
}
.style-image {
    margin-top: min(100px, 100vw * (100/750));
}
.style-btn {
    margin-top: min(60px, 100vw * (60/750));
}
@media only screen and (min-width: 769px) {
    .content-style {
        flex-direction: row-reverse;
        justify-content: flex-end;
        margin-bottom: min(160px, 100vw * (160/1920));
    }
    .style-text {
        width: max-content;
        padding-left: min(100px, 100vw * (100/1920));
    }
    .content-style .ttl {
        margin-bottom: min(20px, 100vw * (20/1920));
    }
    .content-style p {
        max-width: min(584px, 100vw * (584/1920));
        font-size: min(18px, 100vw * (18/1920));
        line-height: calc(42 / 18);
        text-align: left;
    }
    .content-style .style-image {
        width: 50%;
        margin-top: 0;
    }
    .style-btn {
        margin-top: min(60px, 100vw * (60/1920));
    }
}

.content-history {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-bottom: min(190px, 100vw * (190/750));
}
.content-history .ttl {
    margin-bottom: min(22px, 100vw * (22/750));
    padding-bottom: 0.5em;
}
.content-history p {
    max-width: 90%;
    margin: 0 auto;
    font-size: min(22px, 100vw * (22/750));
    font-family: "Noto Sans Thai", sans-serif;
    letter-spacing: 0.05em;
    line-height: calc(42 / 20);
    text-align: center;
}
.history-image {
    margin-top: min(100px, 100vw * (100/750));
}
.history-btn {
    margin-top: min(60px, 100vw * (60/750));
}
@media only screen and (min-width: 769px) {
    .content-history {
        flex-direction: row-reverse;
        justify-content: flex-end;
        margin-bottom: min(170px, 100vw * (170/1920));
    }
    .history-text {
        width: max-content;
        padding-left: min(100px, 100vw * (100/1920));
    }
    .content-history .ttl {
        margin-bottom: min(20px, 100vw * (20/1920));
    }
    .content-history p {
        max-width: min(580px, 100vw * (580/1920));
        font-size: min(18px, 100vw * (18/1920));
        line-height: calc(42 / 18);
        text-align: left;
    }
    .content-history .history-image {
        width: 50%;
        margin-top: 0;
    }
    .history-btn {
        margin-top: min(60px, 100vw * (60/1920));
    }
}

.content-craftmanship {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-bottom: min(220px, 100vw * (220/750));
}
.content-craftmanship .ttl {
    margin-bottom: min(22px, 100vw * (22/750));
    padding-bottom: 1em;
}
.content-craftmanship p {
    max-width: 90%;
    margin: 0 auto;
    font-size: min(22px, 100vw * (22/750));
    font-family: "Noto Sans Thai", sans-serif;
    letter-spacing: 0.05em;
    line-height: calc(42 / 20);
    text-align: center;
}
.craftmanship-video {
    width: 100%;
    margin-top: min(100px, 100vw * (100/750));
}
.craftmanship-video video,
.craftmanship-video iframe {
    width: 100%;
    height: 100%;
    aspect-ratio: 1920/800;
    object-fit: contain;
}
.craftmanship-btn {
    margin-top: min(90px, 100vw * (90/750));
}
@media only screen and (min-width: 769px) {
    .content-craftmanship {
        flex-direction: row;
        justify-content: flex-end;
        margin-bottom: min(170px, 100vw * (170/1920));
    }
    .craftmanship-text {
        width: max-content;
        padding-right: min(80px, 100vw * (80/1920));
    }
    .content-craftmanship .ttl {
        margin-bottom: min(20px, 100vw * (20/1920));
    }
    .content-craftmanship p {
        max-width: min(580px, 100vw * (580/1920));
        font-size: min(18px, 100vw * (18/1920));
        line-height: calc(42 / 18);
        text-align: left;
    }
    .craftmanship-video {
        width: 50%;
        margin-top: 0;
    }
    .craftmanship-btn {
        margin-top: min(60px, 100vw * (60/1920));
    }
}

.content-watch {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: min(280px, 100vw * (280/750));
    background-color: #000;
    background-image: url("../img/watch.jpg");
    background-repeat: no-repeat;
    background-position: top center;
    background-size: contain;
}
.watch-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: min(964px, 100vw * (964/750));
    padding-top: min(60px, 100vw * (60/750));
    padding-bottom: min(40px, 100vw * (40/750));
}
.content-watch .ttl {
    margin-bottom: min(30px, 100vw * (30/750));
    padding-bottom: 1em;
    color: #fff;
    font-size: min(32px, 100vw * (32/750));
}
.content-watch p {
    color: #fff;
    font-size: min(22px, 100vw * (22/750));
    font-family: "Raleway", sans-serif;
    letter-spacing: 0.05em;
    line-height: calc(42 / 20);
    text-align: center;
}
.seiko {
    width: min(380px, 100vw * (380/750));
}
.content-watch h3 {
    margin-top: min(45px, 100vw * (45/750));
    margin-bottom: min(22px, 100vw * (22/750));
    color: #fff;
    font-size: min(22px, 100vw * (22/750));
    font-family: "Raleway", sans-serif;
    font-weight: bold;
    letter-spacing: 0.075em;
    line-height: 1;
    text-align: center;
}
.content-watch .btn-more {
    margin-top: auto;
}
@media only screen and (min-width: 769px) {
    .content-watch {
        margin-bottom: min(160px, 100vw * (160/1920));
        background-image: url("../img/watch_pc.jpg");
        background-size: cover;
    }
    .watch-inner {
        align-items: flex-start;
        width: 100%;
        height: min(560px, 100vw * (560/1920));
        max-width: min(1200px, 100vw * (1200/1920));
        padding-top: 0;
        padding-bottom: 0;
    }
    .content-watch .ttl {
        margin-bottom: min(35px, 100vw * (35/1920));
        padding-bottom: 1em;
        font-size: min(25px, 100vw * (25/750));
        letter-spacing: 0.025em;
    }
    .content-watch p {
        width: min(480px, 100vw * (480/1920));
        color: #fff;
        font-size: min(18px, 100vw * (18/1920));
        line-height: calc(42 / 18);
        letter-spacing: 0;
        text-align: left;
    }
    .seiko {
        width: min(380px, 100vw * (380/1920));
    }
    .content-watch h3 {
        margin-top: min(30px, 100vw * (30/1920));
        margin-bottom: min(10px, 100vw * (10/1920));
        font-size: min(19px, 100vw * (19/1920));
        text-align: left;
    }
    .content-watch .btn-more {
        margin-top: min(50px, 100vw * (50/1920));
    }
}

.content-ponam-31 {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #000;
    background-image: url("../img/ponam.jpg");
    background-repeat: no-repeat;
    background-position: top center;
    background-size: contain;
}
.ponam-31-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: min(956px, 100vw * (956/750));
    padding-top: min(60px, 100vw * (60/750));
    padding-bottom: min(40px, 100vw * (40/750));
}
.content-ponam-31 .ttl {
    margin-bottom: min(30px, 100vw * (30/750));
    padding-bottom: 1em;
    color: #fff;
    font-size: min(32px, 100vw * (32/750));
}
.content-ponam-31 p {
    color: #fff;
    font-size: min(22px, 100vw * (22/750));
    font-family: "Raleway", sans-serif;
    letter-spacing: 0.05em;
    line-height: calc(42 / 20);
    text-align: center;
}
.toyotamarine {
    width: min(542px, 100vw * (542/750));
}
.ponam_logo {
    width: min(294px, 100vw * (294/750));
    margin-top: min(45px, 100vw * (45/750));
    margin-bottom: min(22px, 100vw * (22/750));
}
.content-ponam-31 .btn-more {
    margin-top: auto;
}
@media only screen and (min-width: 769px) {
    .content-ponam-31 {
        margin-bottom: min(160px, 100vw * (160/1920));
        background-image: url("../img/ponam_pc.jpg");
        background-size: cover;
    }
    .ponam-31-inner {
        align-items: flex-start;
        width: 100%;
        height: min(560px, 100vw * (560/1920));
        max-width: min(1200px, 100vw * (1200/1920));
        padding-top: 0;
        padding-bottom: 0;
    }
    .content-ponam-31 .ttl {
        margin-bottom: min(35px, 100vw * (35/1920));
        padding-bottom: 1em;
        font-size: min(25px, 100vw * (25/750));
        letter-spacing: 0.025em;
    }
    .content-ponam-31 p {
        width: min(480px, 100vw * (480/1920));
        color: #fff;
        font-size: min(18px, 100vw * (18/1920));
        line-height: calc(42 / 18);
        letter-spacing: 0;
        text-align: left;
    }
    .toyotamarine {
        display: inline-block;
        width: min(542px, 100vw * (542/1920));
    }
    .ponam_logo {
        display: inline-block;
        width: min(244px, 100vw * (244/1920));
        margin-top: min(20px, 100vw * (20/1920));
        margin-bottom: min(20px, 100vw * (20/1920));
    }
    .content-ponam-31 .btn-more {
        margin-top: min(50px, 100vw * (50/1920));
    }
}

.content-topics {
    padding-top: min(280px, 100vw * (280/750));
    overflow: hidden;
}
.content-topics-slides {
    width: calc(100% + min(20px, 100vw * (20/750))) !important;
    margin-left: max(-20px, 100vw * (-20/750));
    overflow: visible !important;
}
.topic-link-wrap {
}
.topic-link {
}
.topic-link a {
    display: inline-block;
    padding-left: min(22px, 100vw * (22/750));
    box-sizing: border-box;
    color: #000;
}
.topic-link a:hover {
    text-decoration: none;
}
.topic-link-txt {
    padding: min(48px, 100vw * (48/750)) min(22px, 100vw * (22/750));
}
.topic-link-txt h3 {
    margin-bottom: 0.5em;
    padding-bottom: 0.5em;
    font-size: min(23px, 100vw * (23/750));
    font-family: "Noto Sans JP", sans-serif;
    letter-spacing: 0.075em;
    line-height: calc(36 / 23);
    border-bottom: 1px solid #00833b;
}
.topic-link-txt p {
    font-size: min(18px, 100vw * (18/750));
    font-family: "Raleway", sans-serif;
    line-height: calc(34 / 18);
}
.slick-next,
.slick-prev {
    display: none !important;
}
@media only screen and (min-width: 769px) {
    .content-topics {
        width: 100%;
        max-width: 1560px;
        margin: 0 auto !important;
        padding-top: 0;
    }
    .content-topics .ttl {
        margin-bottom: min(25px, 100vw * (25/1920));
    }
    .content-topics .ttl:after {
        width: min(350px, 100vw * (350/1920));
    }
    .content-topics-slides {
        width: calc(100% + min(10px, 100vw * (10/1920))) !important;
        margin-left: max(-10px, 100vw * (-10/1920));
    }
    .topic-link-wrap {
    }
    .topic-link {
    }
    .topic-link a {
        padding-left: min(10px, 100vw * (10/1920));
    }
    .topic-link-txt {
        padding: min(28px, 100vw * (28/1920)) min(20px, 100vw * (20/1920));
    }
    .topic-link-txt h3 {
        margin-bottom: 0.5em;
        padding-bottom: 0.5em;
        font-size: min(20px, 100vw * (20/1920));
        font-family: "Noto Sans JP", sans-serif;
        line-height: calc(32 / 20);
    }
    .topic-link-txt p {
        font-size: min(14px, 100vw * (14/1920));
        line-height: calc(30 / 14);
        letter-spacing: 0.05em;
    }
    .slick-next,
    .slick-prev {
        display: flex !important;
        width: min(65px, 100vw * (65/1920)) !important;
        height: min(95px, 100vw * (95/1920)) !important;
        top: 25% !important;
        transform: translate(0, 0) !important;
        z-index: 10 !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
        background-size: contain !important;
    }
    .slick-next:before,
    .slick-prev:before {
        content: "" !important;
        width: min(65px, 100vw * (65/1920)) !important;
        height: min(95px, 100vw * (95/1920)) !important;
    }
    .slick-next {
        right: 0 !important;
        background-image: url("../img/btn-next.png") !important;
    }
    .slick-prev {
        left: min(10px, 100vw * (10/1920)) !important;
        background-image: url("../img/btn-prev.png") !important;
    }
}