:root {
    --font-size-base: clamp(0.75rem, 2vw, 0.9rem);
    --font-size-small: clamp(0.6rem, 1.8vw, 0.75rem);
    --font-size-large: clamp(1rem, 2.5vw, 1.3rem);
}
/* font-size: clamp(1.1rem, calc(0.9rem + 0.625vw), 1.6rem); */
@media screen and (min-width: 960px) {
    html {
        font-size: calc(100vw / 60);
    }
}
@media screen and (min-width: 1200px) {
    html {
        font-size: calc(100vw / 75);
    }
}

h2 {
    font-size: 3rem;
}
@media screen and (min-width: 960px) {
    h2 {
        font-size: clamp(40px, calc(0.6rem + 2vw), 54px);
    }
}
@media screen and (min-width: 1200px) {
    h2 {
        font-size: clamp(40px, calc(0.6rem + 2vw), 54px);
    }
}

h3 {
    font-size: 2rem;
}
@media screen and (min-width: 960px) {
    h3 {
        font-size: clamp(24px, calc(0.625rem + 1.5vw), 28px);
    }
}
@media screen and (min-width: 1200px) {
    h3 {
        font-size: clamp(24px, calc(0.625rem + 1.5vw), 28px);
    }
}

.site-title {
    font-size: 1.5rem;
}
@media screen and (min-width: 960px) {
    .site-title {
        font-size: clamp(24px, calc(0.625rem + 1vw), 32px);
    }
}

.text {
    font-size: 1rem;
}
@media screen and (min-width: 960px) {
    .text {
        font-size: clamp(16px, calc(0.625rem + 1vw), 18px);
    }
    .info {
        font-size: clamp(16px, calc(0.625rem + 1vw), 20px);
    }
}

.svg-toyota {
    width: 6.75rem;
    height: 1.25rem;
}
@media screen and (min-width: 960px) {
    .svg-toyota {
        font-size: clamp(24px, calc(0.625rem + 1vw), 32px);
        width: clamp(108px, calc(0.625rem + 1vw), 144px);
        height: clamp(20px, calc(0.625rem + 1vw), 26.67px);
    }
}

.nav-menu {
  gap: 1.2rem;
}
.nav-menu a {
    font-size: 1rem;
}
@media screen and (min-width: 960px) {
    .nav-menu {
        gap: clamp(20px, calc(0.625rem + 1vw), 24px);
    }
    .nav-menu a {
        font-size: clamp(16px, calc(0.4rem + 1vw), 18px);
    }
}

.attention p {
    font-size: 1rem;
}
@media screen and (min-width: 960px) {
    .attention p {
        font-size: clamp(16px, calc(0.625rem + 1vw), 18px);
    }
}
@media screen and (min-width: 1200px) {
    .attention p {
        font-size: clamp(16px, calc(0.625rem + 1vw), 18px);
    }
}
.hero h2 {
    font-size: 2.1rem;
}
.hero .text {
    font-size: 1rem;
}
@media screen and (min-width: 960px) {
    .hero h2 {
        font-size: clamp(40px, calc(0.6rem + 2vw), 54px);
    }
    .hero .text {
        font-size: clamp(14px, calc(0.3rem + 1vw), 18px);
    }
}
@media screen and (min-width: 1200px) {
    .hero h2 {
        font-size: clamp(35px, calc(0.6rem + 2vw), 54px);
    }
}

.c-detailHeadingLevel2-sub {
    font-size: 1rem;
}
@media screen and (min-width: 960px) {
    .c-detailHeadingLevel2-sub {
        font-size: clamp(16px, calc(0.625rem + 1vw), 18px);
    }
}

.p-detail {
    font-size: 1.375rem;
}
@media screen and (min-width: 960px) {
    .p-detail {
        font-size: clamp(16px, calc(0.525rem + 1vw), 20px);
    }
}
@media screen and (min-width: 1200px) {
    .p-detail {
        font-size: clamp(16px, calc(0.625rem + 1vw), 20px);
    }
}

.step .text {
    font-size: 1.375rem;
}
@media screen and (min-width: 960px) {
    .step .text {
        font-size: clamp(16px, calc(0.625rem + 1vw), 20px);
    }
}

.item-title {
    font-size: 1.375rem;
}
@media screen and (min-width: 960px) {
    .item-title {
        font-size: clamp(15px, calc(0.3rem + 1vw), 20px);
    }
}
@media screen and (min-width: 1200px) {
    .voice .figure {
        flex: 1.5;
    }
    .item-title {
        font-size: clamp(16px, calc(0.42rem + 1vw), 19.8px)
    }
}

.y-axis .axis-label {
    font-size: 1.375rem;
}
.y-axis .tick {
    font-size: 1.375rem;
}
.bar::before {
    font-size: 1.375rem;
}
.segment {
    font-size: 1.375rem;
}
.segment--joint-sm {
    font-size: 10px;
}
@media screen and (min-width: 960px) {
    .y-axis .axis-label {
        font-size: clamp(16px, calc(0.625rem + 1vw), 20px);
    }
    .y-axis .tick {
        font-size: clamp(16px, calc(0.625rem + 1vw), 20px);
    }
    .bar::before {
        font-size: clamp(16px, calc(0.625rem + 1vw), 20px);
    }
    .segment {
        font-size: clamp(12px, calc(0.625rem + 1vw), 16px);
    }
    .segment--joint-sm {
        font-size: clamp(10px, calc(0.625rem + 1vw), 15px);
    }
}

blockquote cite.title {
  font-size: 1.5rem;
}
@media screen and (min-width: 960px){
    blockquote cite.title {
        font-size: clamp(24px, calc(0.625rem + 1vw), 32px);
    }
    blockquote p {
        font-size: clamp(16px, calc(0.3rem + 1vw), 18px);
    }
}
@media screen and (min-width: 1200px){
    blockquote cite.title {
        font-size: clamp(24px, calc(0.625rem + 1vw), 32px);
    }
    blockquote p {
        font-size: clamp(16px, calc(0.2rem + 1vw), 18px);
    }
}

.c-detailLinkButton {
    min-width: 22.5rem;
    padding: 24px;
}
@media screen and (min-width: 960px) {
    .c-detailLinkButton.-isSmall {
        min-width:12.5rem
    }
    .c-detailLinkButton.-isSmall {
        padding:8px
    }
}
.graph {
    padding: 10rem 2rem 3rem 2rem;
}
.graph-container {}
.bar {
    width: clamp(60px, 15vw, 90px);
}
.leftList {
    width: auto;
}
@media screen and (min-width: 960px) {
    .graph {
    }
    .y-axis {
        height: 384px;
        width: clamp(50px, 8vw, 90px);
    }
    .graph-container {
        height: 372px;
        gap: clamp(30px, 8vw, 120px);
        background-size: 100% 45px;
    }
    .bar {
        width: clamp(60px, 15vw, 160px);
    }
    .bar--exp {
        /* height: 14.5rem; */
    }
    .segment--main {
        height: calc(80px * 2);
    }
    .segment--joint {
        height: calc(44px * 2);
    }
    .segment--stud {
        height: calc(56px * 2);
    }
    .bar--junior {
        /* height: 14.5rem; */
    }
    .segment--main-sm {
        height: calc(26px * 2);
    }
    .segment--joint-sm {
        height: calc(14px * 2);
    }
    .segment--stud-sm {
        height: calc(26px * 2);
    }
}
@media screen and (max-width: 959px) and (max-width: 959px) {

    .container {
        width: 100%;
    }
    .header-container {
        flex-direction: row;
        justify-content: space-between;
        padding: 1rem 0;
    }
    .header-container nav {
        display: flex;
        align-items: center;
        margin-right: 5%;
    }
    .nav-toggle {
        height: 1.5625rem;
        right: 1rem;
        top: 1rem;
        width: 1.5625rem;
        z-index: 11;
    }
    .Ptsunagu_form_header {
        display: none;
    }
    .header-logos {
        flex-direction: column;
        margin-left: 5%;
    }
    .t-header-toyota-pc {
        order: 0;
        line-height: 1em;
    }
    .site-title {
        order: 1;
        line-height: 1em;
    }
    .svg-toyota {
        margin: .5em 0;
        width: 4rem;
        height: 0.75rem;
    }

    .nav-menu.show {
        left: 0;
        transform: translateX(0);
        opacity: 1;
        visibility: visible;
        box-shadow: inset 0px 1px 5px rgba(0,0,0,.5);
    }
    .nav-menu.show a {
        font-size: clamp(20px, calc(1.2rem + 1vw), 28px);
        font-weight: 700;
    }
    .nav-menu {
        display: flex;
        position: fixed;
        top: 5em;
        left: 100%;
        width: 100%;
        height: calc(100% - 5em);
        background: #fff;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        z-index: 1;
        transform: translateX(100%);
        opacity: 0;
        visibility: hidden;
        transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;
    }

    .hero .container {
        flex-direction: column;
    }
    .hero .container .inner {
        order: 1;
        padding: 2rem 4vw;
        width: 100%;
        text-align: center;
    }
    .hero .container .hero-figures {
        order: 0;
        padding: 1rem 0;
    }
    #hero-title {
        display: flex;
        width: 9em;
        margin: 0 auto 2rem;
        font-size: 2.4rem;
        font-size: clamp(38px, calc(1.2rem + 3vw), 62px);
        text-align: center;
    }
    #hero-title br {
        display: none;
    }
    .hero p {
        margin: 0;
        text-align: left;
    }
    .hero .text {
        width: 90vw;
        font-size: clamp(20px, calc(1.2rem + 1vw), 28px);
    }
    .hero .btn {
        width: 100%;
        margin: 2rem auto 2rem;
    }
    .attention {
        padding: 0 1rem 1rem;
    }
    .reveal-section h2 {
        font-size: 6.6vw;
    }
    .p-detail {
        width: 90%;
        margin: 0 auto;
        font-size: 1.2rem;
        text-align: left;
    }
    .p-detail br:nth-child(2) {
        display: none;
    }
    .steps li.step {
        flex-direction: column;
        padding: 0;
        margin-top: 2rem;
        background-color: transparent;
    }
    .step h3 {
        margin: 1rem 0 2rem;
        font-size: 2rem;
        text-align: center;
    }
    .steps li.step:nth-child(2) h3 {
        width: 9em;
        margin: 0 auto;
    }
    .step .text {
        font-size: 1.2rem;
    }
    .c-detailLinkButton {
        min-width: 100%;
    }
    .kv-issue img {
        width: auto;
        height: 53vw;
    }
    .item-title {
        font-size: 1.2rem;
    }
    #effect-title {
        font-size: 1.4rem;
    }
    .effect .text {
        width: 90%;
        font-size: .8rem;
    }
    .effect .graph {
        max-width: 100%;
        margin: .25rem;
        padding: 10rem .5rem 5rem;
    }
    .y-axis {
        width: 3rem;
        height: 330px;
    }
    .y-axis .axis-label {
        font-size: .8rem;
    }
    .y-axis .tick {
        font-size: .8rem;
    }
    .bar {
        width: 8rem;
    }
    .bar--exp {
        height: 330px;
    }
    .bar::before {
        font-size: 3.5vw;
        font-size: clamp(16px, calc(0.625rem + 1vw), 20px);
    }
    .segment {
        font-size: 1rem;
    }
    .segment--main {
        height: 135px;
    }
    .segment--joint {
        height: 80px;
    }
    .segment--stud {
        height: 100px;
    }
    .bar--junior {
        height: auto;
    }
    .segment--main-sm {
        height: 45px;
    }
    .segment--joint-sm {
        height: 30px;
    }
    .segment--stud-sm {
        height: 45px;
    }
    .graph-container {
        height: 330px;
        background-size: 100% 39.5px;
    }
    .graph-container img {
        width: 10rem;
        right: calc(50% - 4em);
    }

    .problem figure {
        width: 90vw;
        height: 90vw;
    }

    .effect strong {
        display: inline-block;
        margin: 2rem  0;
        font-size: 1.2rem;
    }
    #effect .btn {
        min-width: 90%;
    }
    .voices-list {
        flex-direction: column;
        align-items: center;
    }
    .voice {
        flex-direction: column;
        width: 95%;
    }
    .voice + .voice {
        margin: 1rem 0 0;
    }
    .voice .figure {
        padding: 1rem 2rem;
    }
    blockquote cite.title {
        text-align: center;
    }
    .c-containerSection.-size-main {
        margin-left: 1.25rem;
        margin-right: 1.25rem;
    }

    #contact .container {
        width: 90%;
    }
    .t-footer .t-footer-anchorArea-left {
        display: none;
    }
    .t-footer .t-footer-anchorArea-inner {
        padding: 32px 0;

    }
    .t-footer .t-footer-anchorArea-right .right-img {
        width: 4.875rem;
    }
    .t-footer .t-footer-anchorArea-right .right-text {
        font-size: .75rem;
    }
    .t-footer .t-footer-main .t-footer-inner {
        padding: 64px 0 48px;
    }
    .t-footer .t-footer-main-contact {
        display: block;
        text-align: center;
    }
    .t-footer .t-footer-main-toyota {
        height: 1.875rem;
        width: 10rem;
    }
    .t-footer .t-footer-main-navigation {
        justify-content: center;
        margin-top: 2rem;
        padding-bottom: 32px;
        padding-left: 0.875rem;
        padding-right: 0.875rem;
    }
    .t-footer .t-footer-main-navigation .linkList>*+* {
        margin-top: 1.25rem;
    }
    .t-footer .t-footer-main-navigation>*+* {
        margin-left: 2rem;
    }
    .t-footer .t-footer-main-blankLink {
        padding-top: 32px;
        border-top: 1px solid #fff;
    }
    .t-footer .t-footer-main-blankLink-inner {
        margin-top: 1.25rem;
    }
    .t-footer .t-footer-main-blankLink-inner .icon img {
        height: 1.875rem;
    }
    .t-footer .t-footer-main-blankLink-inner>*+* {
        margin-left: 1.25rem;
    }
    .t-footer .t-footer-sub .t-footer-inner {
        padding: 24px 0 24px;
    }
    .t-footer .t-footer-subLinkList {
        justify-content: center;
    }
    .t-footer .t-footer-subLinkList .link {
        font-size: .75rem;
    }
    .t-footer .t-footer-subLinkList>*+* {
        padding-left: 8px;
        margin-left: .5rem;
    }
    .t-footer .t-footer-sub .copyright {
        padding-top: 24px;
        font-size: .6875rem;
        text-align: center;
    }
    .t-footer-main-blankLink-inner {
        justify-content: center;
    }
}
@media screen and (min-width: 960px) {
    .t-footer .t-footer-anchorArea-left .leftList {
        margin-left: 3vw;
        width: 21em;
    }
}
@media screen and (min-width: 1200px) {
    .t-footer .t-footer-anchorArea-left .leftList {
        width: auto;
    }
    .problem {
        max-width: 30%;
    }
}
@media screen and (min-width: 767px) and (max-width: 959px) {
    .hero .text {
        margin: 0 auto;
        width: 68vw;
    }
    .hero .btn {
        margin-top: 3rem;
        max-width: 500px;
        font-size: 2vw;
    }
    .hero p {
        text-align: center;
    }
    .p-detail {
        margin: 0 auto;
        max-width: 700px;
    }
    .step {
        font-size: 1.5rem;
    }
    .step .inner {
        padding-bottom: 3rem;
    }
    .steps li.step h3 {
        margin: 1rem 0 2rem!important;
        width: 100%!important;
        text-align: center;
        font-size: 1.75rem;
    }
    .step .text {
        margin: 0 auto;
        font-size: 1.5rem;
    }
    .step:nth-child(1) .text {
        width: 24em;
    }
    .step:nth-child(2) .text {
        width: 23em;
    }
    .step:nth-child(3) .text {
        width: 25em;
    }
    .step figure {
        padding: 2rem;
    }
    .problem {
        align-items: center;
        padding: .5rem;
    }
    .problem-list {
        margin: 0 1vw;
        gap: 1rem;
    }
    .problem figure {
        width: 26vw;
        height: 26vw;
    }
    .problem .item-title {
        font-size: 1.8vw;
    }
    #problem-title {
        display: flex;
        flex-direction: column;
        margin-top: 1rem;
        line-height: 1.5em;
    }
    #effect-title {
        display: flex;
        flex-direction: column;
        font-size: 4vw;
    }
    .effect .graph {
        width: 90vw;
        margin: 0 auto!important;
    }
    .effect strong {
        display: flex;
        flex-direction: column;
        font-size: 4vw;
    }
    #effect .btn {
        width: 60%;
    }
    .voices-list {
        flex-direction: row;
        align-items: stretch !important;
        gap: 1rem;
        margin: 0 2vw;
    }
    .voice {
        width: 40vw;
    }
    .voice figure {
        width: 35vw;
    }
    .voice + .voice {
        margin: 0;
    }
    blockquote {
        margin-left: 0;
    }
    .t-footer-anchorArea-inner {
        justify-content: center!important;
    }
}