@charset "UTF-8";

/* 共通部分 */
body {
    font-family: "superclarendon", "Noto Sans JP";
    font-size: 1rem;
    color: black;
}

img {
    max-width: 100%;
    vertical-align: bottom;
}

a {
    text-decoration: none;
    color: inherit;
}


ul,
ol {
    list-style-type: none;
}

h1 {
    font-size: clamp(1.875rem, 1.420rem + 1.942vw, 3.75rem);
}

h1.open {
    color: #fff;
}

h2 {
    font-size: clamp(1.5rem, 0.802rem + 2.977vw, 4.375rem);
    text-align: center;
    margin: 70px 0;
}

.view_button {
    font-size: clamp(0.75rem, 0.500rem + 0.521vw, 1.125rem);
    display: flex;
}

.view_button p{
    width: fit-content;
    position: relative;
}

.view_button p::before {
    background-color: #000000;
    width: 1rem;
    transform: rotate(225deg);
    transform-origin: left;
    height: 1px;
    display: block;
    content: "";
    position: absolute;
    top: 100%;
    left: calc(100% + 1rem);
}

.view_button p::after{
    background-color: #000000;
    width: calc(100% + 1rem);
    height: 1px;
    display: block;
    content: "";
    position: absolute;
}

/* ホバー */
a:hover {
    opacity: 0.6;
    transition: 0.3s;
}



/* パン屑リスト */
.breadcrumb {
    margin: 0;
    padding: 2%;
    padding-top: clamp(3.125rem, 2.367rem + 3.236vw, 6.25rem);
    font-size: clamp(0.625rem, 0.170rem + 1.942vw, 1.5rem);
}

.breadcrumb li {
    display: inline;
}

.breadcrumb li:after {
    content: '>';
    padding: 0 0.2em;
    color: #828282;
}

.breadcrumb li:last-child:after {
    content: '';
}

.breadcrumb li a {
    text-decoration: none;
    color: #a8a8a8;
}

/* フォント */
.text_noto,
.view_button,
.breadcrumb,
footer,
.about_text_area,
.about_board_textbox a button,
.about_rider_textbox a button,
.og_btn,
.news_top_text_area,
.news1_1text_area,
.news3_text_area,
.news1_1pf_area,
.board_lead_text,
.products_bottom_text,
.rider_page_text,
.contact_name_area input,
.contact_name_area input,
.contact_text_area textarea,
.privacypolicy_text p {
    font-family: "Noto Sans JP";
}

/* コンテンツ制御 */
.wrapper {
    width: 90%;
    max-width: 1100px;
    margin: 0 auto;
}

/* ヘッダー */
.ham_list {
    width: 100vw;
    height: 100vh;
    font-size: 1.75rem;
    background-color: rgb(255, 255, 255, 0.8);
    position: fixed;
    /* left: 100%; */
    top: 0;
    transform: translateX(200%);
    transition: transform 0.3s ease-in-out;
    z-index: 9998;
}

.ham_list.open {
    left: 0;
    transform: translateX(0%);
}

.ham_card {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.main_nav {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 50%;
    margin-top: 70px;
}

.main_nav li {
    padding-left: 2%;
}

.nav_sns {
    display: flex;
    width: 50%;
    gap: 10%;
    padding-left: 2%;
    padding-bottom: 10px;
}

.nav_sns li img {
    width: 50px;
    object-fit: cover;
}

.ham_button {
    width: 24px;
    height: 24px;
}

.header_bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    width: 100%;
    background-color: rgb(255, 255, 255, 0.7);
    padding: 0 2%;
    z-index: 9999;
}

.header_bar.open {
    background-color: #000000;
}

.ham_button span,
.ham_button span::before,
.ham_button span::after {
    width: 24px;
    height: 2px;
    background-color: #000000;
    display: block;
    content: "";
    position: absolute;
}

.ham_button span::before {
    top: 8px;
}

.ham_button span::after {
    top: -8px;
}

.ham_button.open span,
.ham_button.open span::before,
.ham_button.open span::after {
    background-color: #fff;
}

.ham_button.open span::before {
    top: 0px;
    transform: rotate(45deg);
}

.ham_button.open span::after {
    top: 0px;
    transform: rotate(-45deg);
}

.ham_button.open span {
    background-color: transparent;
}

/* フッター */
footer {
    height: clamp(1.25rem, 4.733rem + 6.472vw, 12.5rem);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-top: clamp(1.25rem, 4.733rem + 6.472vw, 3.5rem);
    ;
    padding-bottom: 20px;
}

.footer_logptext {
    font-family: "superclarendon";
    text-align: center;
    font-size: clamp(1.75rem, 1.416rem + 1.424vw, 3.125rem);
}

.footer_sns {
    display: flex;
    justify-content: center;
    gap: 5%;
}

.footer_sns li a {
    display: flex;
    align-items: center;
    gap: 5%;
}

.footer_sns li a p {
    font-size: clamp(0.75rem, 0.477rem + 1.165vw, 1.275rem);
}

.footer_sns li a img {
    width: clamp(1.25rem, 0.795rem + 1.942vw, 2.125rem);
    object-fit: cover;
}

.footer_text {
    font-size: clamp(0.75rem, 0.507rem + 1.036vw, 1.25rem);
}

.footer_text {
    gap: 1%;

}

.footer_text,
.footer_text a {
    display: flex;
    justify-content: center;
}

.footer_copyright {
    text-align: center;
    font-size: clamp(0.625rem, 0.413rem + 0.906vw, 1rem);
}

/* 共通部分ここまで */


/* ページ用 */
/* トップページ */
/* メインビジュアル */
.top_mainvisual {
    background-image: url(../image/top_image.webp);
    background-size: cover;
    background-position: center;
    height: clamp(33.125rem, 22.961rem + 43.366vw, 75rem);
}

.top_mainvisual_text {
    position: absolute;
    top: 20%;
    left: 10%;
    color: #fff;
    font-family: "Urbanist";
    font-size: clamp(1.625rem, 0.199rem + 6.084vw, 7.5rem);
    letter-spacing: 2px;
}

/* about */
hgroup {
    display: flex;
    justify-content: center;
}

hgroup h2 {
    text-align: left;
}

.top_about_text img {
    width: clamp(11.719rem, 6.220rem + 23.463vw, 34.375rem);
    object-fit: cover;
}

.top_about_text {
    display: flex;
    gap: 5%;
}

.text_box {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: clamp(17.5rem, 4.150rem + 56.958vw, 72.5rem);
}

.md_text {
    font-size: clamp(0.75rem, 0.204rem + 2.33vw, 3rem);
}

.reg_text {
    font-size: clamp(0.625rem, 0.231rem + 1.683vw, 2.0rem);
    line-height: clamp(1.5rem, 0.347rem + 4.919vw, 6.25rem);
}

/* news */
.top_news {
    background-image: url(../image/image3.webp);
    background-size: cover;
    background-position: center;
    padding: 20px 0;
    margin-top: 100px;
}

.top_news h2 {
    color: #fff;
}

.news_top_text {
    font-size: clamp(0.875rem, 0.708rem + 0.712vw, 1.563rem);
    font-weight: bold;
}

.news_under_text {
    font-size: clamp(0.75rem, 0.553rem + 0.841vw, 1.563rem);
}

.img_square {
    width: clamp(4.375rem, -1.390rem + 24.595vw, 28.125rem);
    height: clamp(4.375rem, -1.390rem + 24.595vw, 28.125rem);
    aspect-ratio: 1/1;
}

.img_square img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.news_box {
    display: flex;
    background-color: rgb(255, 255, 255, 0.5);
    gap: 2%;
    margin: 3%;
    padding: 3% 3%;
}

.news_text {
    display: flex;
    flex-direction: column;
    gap: 10%;
}

.top_news .view_button,
.top_products .view_button {
    display: flex;
    flex-direction: row-reverse;
    width: 94%;
}

/* products */
.borad_item {
    text-align: center;
    padding-bottom: 10%;
}

.top_products_img img {
    object-fit: cover;
    aspect-ratio: 2/3;
    height: clamp(15.625rem, 7.054rem + 36.57vw, 35rem);
}

.borad_item .en_text {
    font-size: clamp(0.875rem, 0.405rem + 2.006vw, 2rem);
}

.borad_item .text_noto {
    font-size: clamp(0.625rem, 0.291rem + 1.424vw, 1.5rem);
}

.products_board_list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2%;
    margin-bottom: 40px;
}

/* rider */
.rider_img a img {
    object-fit: cover;
    width: clamp(10.625rem, 4.785rem + 24.919vw, 34.688rem);
    height: clamp(6.25rem, 2.837rem + 14.563vw, 20.313rem);
}

.rider_img a .text_noto {
    font-size: clamp(0.5rem, 0.227rem + 1.165vw, 1.25rem);
}

.rider_img {
    padding-bottom: 10%;
}

.rider_img a {
    text-align: center;
}

.rider_card_list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2%;
}

/* アバウトページ */
/* メインビジュアル */
.about_mainvisual {
    background-image: url(../image/about_top.webp);
    background-size: cover;
    background-position: center;
    height: clamp(33.125rem, 22.961rem + 43.366vw, 75rem);
}

.about_mainvisual_text {
    position: absolute;
    top: 20%;
    left: 10%;
    color: #fff;
    font-family: "Urbanist";
    font-size: clamp(1.625rem, 0.199rem + 6.084vw, 7.5rem);
    letter-spacing: 2px;
}

/* テキストエリア */
.about_text_area {
    font-size: clamp(0.625rem, 0.231rem + 1.683vw, 1.5rem);
    margin-top: 50px;
    line-height: 2;
}

.about_page_img img {
    margin-top: 50px;
}


.about_page_img img {
    width: 50%;
}

/* ボードエリア */
.about_board_container img {
    height: clamp(6.25rem, 3.519rem + 11.65vw, 17.5rem);
}

.about_board_container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10%;
}

.about_board_leftarea {
    display: flex;
    flex-direction: column;
    justify-content: space-between
}

.about_gf_img img {
    height: clamp(17.5rem, 9.763rem + 33.01vw, 49.375rem);
}

.about_board_area {
    display: flex;
    justify-content: center;
    gap: 10%;
    margin: 50px auto;
}

.about_board_textbox {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

/* ライダーエリア */
.about_rider_leftarea img {
    height: clamp(17.5rem, 9.232rem + 35.275vw, 51.563rem);
    object-fit: cover;
}

.rider_piture img {
    aspect-ratio: 1/1;
    object-fit: cover;
    filter: saturate(0%);
}

.rider_piture {
    aspect-ratio: 1/1;
    height: clamp(4.375rem, 2.130rem + 9.579vw, 13.625rem);
}

.about_rider_container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 50%;
}

.about_rider_rightarea {
    display: flex;
    flex-direction: column;
    width: 50%;
    justify-content: space-between;
}

.about_rider_textbox p,
.about_board_textbox p {
    font-size: clamp(0.875rem, 0.405rem + 2.006vw, 2rem);
}

.about_board_textbox a button,
.about_rider_textbox a button {
    font-size: clamp(0.75rem, 0.431rem + 1.359vw, 2.063rem);
}

.og_btn {
    background-color: #F6A64A;
    color: #fff;
    border-radius: 20px;
    width: clamp(4.375rem, 2.403rem + 8.414vw, 12.5rem);
    height: clamp(1.25rem, 0.719rem + 2.265vw, 3.438rem);
    position: relative;
    text-align: center;
}

.og_btn::after {
    content: '';
    border-style: solid;
    border-width: clamp(0.188rem, 0.081rem + 0.453vw, 0.625rem) 0 clamp(0.188rem, 0.081rem + 0.453vw, 0.625rem) clamp(0.313rem, 0.161rem + 0.647vw, 0.938rem);
    border-color: transparent transparent transparent #fff;
    display: inline-block;
    width: 0;
    height: 0;
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
}


/* ニュースページ */
/* メインビジュアル */

.news_mainvisual {
    background-image: url(../image/image3.webp);
    background-size: cover;
    background-position: center;
    height: clamp(33.125rem, 22.961rem + 43.366vw, 75rem);
}

.news_mainvisual_text {
    position: absolute;
    top: 20%;
    left: 10%;
    color: #fff;
    font-family: "Urbanist";
    font-size: clamp(1.75rem, -0.101rem + 7.896vw, 7.5rem);
    letter-spacing: 2px;
}

.news_top_news {
    background-color: #DBDADA;
    background-size: cover;
    background-position: center;
    padding: 20px 0;
}

/* ニュース記事 */
.news_top_text_area {
    padding: 5% 0;
    font-size: clamp(1.25rem, 0.825rem + 1.812vw, 2rem);
}

.news_top_text_area p {
    text-align: center;
}

.news1_1page_img,
.news3_page_img {
    max-width: 50%;
    object-fit: cover;
    margin: 0 auto;
}

.news1_1text_area,
.news3_text_area {
    font-size: clamp(0.75rem, 0.386rem + 1.553vw, 1.25rem);
    margin-top: 50px;
    line-height: 2;
    text-align: center;
    max-width: 50%;

}

.news1_1pf_area {
    font-size: clamp(0.75rem, 0.386rem + 1.553vw, 1.25rem);
    margin-top: 50px;
    line-height: 2;
    max-width: 50%;
}


/* ニュース記事2 */

.news2_page_img img {
    transform: rotate(90deg);
    max-width: 55%;
    object-fit: cover;
    margin: 0 auto;
}

.news2_grid_img {
    display: grid;
}

.news2_sj_img {
    grid-area: 1/1;
    max-width: 50%;
    margin: 0 auto;
}

.news2_steep_pic {
    grid-area: 1/1;
    align-self: end;
    position: relative;
    left: 28%;
}

.news2_steep_pic {
    display: flex;
}

.news2_move_ltpic img,
.news2_move_rtpic img {
    height: clamp(9.375rem, -0.485rem + 42.071vw, 50rem);
}

/* プロダクトページ */

/* プロダクトページ */
/* 各ボード共通部分 */

.products_board_img {
    display: flex;
    justify-content: center;
    align-items: center;
    height: clamp(31.25rem, 8.495rem + 97.087vw, 70rem);
}

.products_board_img img {
    height: clamp(18.75rem, 9.648rem + 38.835vw, 56.25rem);
}

.board_title {
    text-align: center;
    font-size: clamp(1rem, 0.954rem + 2.33vw, 3.75rem);
}

.board_lead_text {
    font-size: clamp(0.75rem, 0.386rem + 1.553vw, 1.5rem);
    line-height: 2;
    padding-top: clamp(1.25rem, 0.643rem + 2.589vw, 3.75rem);
}

.products_board_text_group {
    width: 50%;
    margin: clamp(1.875rem, 0.813rem + 4.531vw, 6.25rem) auto;
}

.products_material_icon {
    display: flex;
    justify-content: center;
    gap: 5%;
}

.products_material_icon img {
    width: clamp(3.5rem, 1.922rem + 6.731vw, 10rem);
}

.products_svg_rador {
    height: clamp(15.625rem, 9.557rem + 25.89vw, 40.625rem);
}

.products_svg_icon {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    height: clamp(31.25rem, 8.495rem + 97.087vw, 70rem);

}

.products_bottom_text {
    text-align: center;
    font-size: clamp(1rem, 0.697rem + 1.294vw, 2rem);
    line-height: 2.5;
}

.products_bcgd_rador {
    background-image: url(../svg/rador.svg);
    height: clamp(18.75rem, 13.441rem + 22.654vw, 40.625rem);
    background-position: center;
}

/* クラス付与でアニメーション追加 */
/* .mt_animationを参照 */
.products_rador_graph_animation {
    animation: graphAnim04 2s forwards;
}

@keyframes graphAnim04 {
    0% {
        clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%);
    }

    100% {
        clip-path: polygon(0, 0, 0, 0, 0);
    }
}

/* BLACKOUT */
.products_board_bgimg_blackout {
    background-image: url(../image/bdimage1.webp);
    background-position: center;
    background-size: cover;
    background-color: rgba(255, 255, 255, 0.8);
    background-blend-mode: hard-light;
    height: clamp(31.25rem, 8.495rem + 97.087vw, 70rem);
}

.products_material_bgimg_blackout {
    background-image: url(../image/mtimage1.webp);
    background-position: center;
    background-size: cover;
    background-color: rgba(0, 0, 0, 0.5);
    background-blend-mode: hard-light;
    height: clamp(31.25rem, 8.495rem + 97.087vw, 70rem);
}


.products_rador_blackout {
    margin: 0 auto;
    height: clamp(18.75rem, 13.441rem + 22.654vw, 40.625rem);
    width: clamp(18.75rem, 12.682rem + 25.89vw, 43.75rem);
    background-color: rgba(133, 181, 240, 0.5);
    clip-path: polygon(51% 7%, 86% 28%, 81% 67%, 52% 85%, 33% 60%, 18% 28%);
}

/* DEEP SPACE */
.products_board_bgimg_deepspace {
    background-image: url(../image/bdimage8.webp);
    background-position: center;
    background-size: cover;
    height: clamp(31.25rem, 8.495rem + 97.087vw, 70rem);
}

.products_material_bgimg_deepspace {
    background-image: url(../image/mtimage2.webp);
    background-position: center;
    background-size: cover;
    background-color: rgba(0, 0, 0, 0.5);
    background-blend-mode: hard-light;
    height: clamp(31.25rem, 8.495rem + 97.087vw, 70rem);
}


.products_rador_deepspace {
    margin: 0 auto;
    height: clamp(18.75rem, 13.441rem + 22.654vw, 40.625rem);
    width: clamp(18.75rem, 12.682rem + 25.89vw, 43.75rem);
    background-color: rgba(133, 181, 240, 0.5);
    clip-path: polygon(51% 18%, 77% 33%, 77% 64%, 52% 80%, 27% 64%, 27% 33%);
}

/* STEEP JAWS */
.products_board_bgimg_steepjaws {
    background-image: url(../image/bdimage4.webp);
    background-position: center;
    background-size: cover;
    background-color: rgba(0, 0, 0, 0.5);
    background-blend-mode: hard-light;
    height: clamp(31.25rem, 8.495rem + 97.087vw, 70rem);
}

.products_material_bgimg_steepjaws {
    background-image: url(../image/mtimage3.webp);
    background-position: center;
    background-size: cover;
    background-color: rgba(0, 0, 0, 0.3);
    background-blend-mode: multiply;
    height: clamp(31.25rem, 8.495rem + 97.087vw, 70rem);
}


.products_rador_steepjaws {
    margin: 0 auto;
    height: clamp(18.75rem, 13.441rem + 22.654vw, 40.625rem);
    width: clamp(18.75rem, 12.682rem + 25.89vw, 43.75rem);
    background-color: rgba(133, 181, 240, 0.5);
    clip-path: polygon(52% 7%, 86% 28%, 72% 61%, 52% 90%, 41% 57%, 32% 36%);
}

/* THE NINJA */
.products_board_bgimg_theninja {
    background-image: url(../image/bdimage5.webp);
    background-position: center;
    background-size: cover;
    background-color: rgba(0, 0, 0, 0.3);
    background-blend-mode: hard-light;
    height: clamp(31.25rem, 8.495rem + 97.087vw, 70rem);
}

.products_material_bgimg_theninja {
    background-image: url(../image/mtimage4.webp);
    background-position: center;
    background-size: cover;
    background-color: rgba(0, 0, 0, 0.3);
    background-blend-mode: multiply;
    height: clamp(31.25rem, 8.495rem + 97.087vw, 70rem);
}


.products_rador_theninja {
    margin: 0 auto;
    height: clamp(18.75rem, 13.441rem + 22.654vw, 40.625rem);
    width: clamp(18.75rem, 12.682rem + 25.89vw, 43.75rem);
    background-color: rgba(133, 181, 240, 0.5);
    clip-path: polygon(52% 24%, 86% 28%, 85% 70%, 52% 85%, 18% 69%, 27% 33%);
}

/* Take Over Vivid */
.products_board_bgimg_takeovervivid {
    background-image: url(../image/bdimage6.webp);
    background-position: center;
    background-size: cover;
    background-color: rgba(0, 0, 0, 0.3);
    background-blend-mode: multiply;
    height: clamp(31.25rem, 8.495rem + 97.087vw, 70rem);
}

.products_material_bgimg_takeovervivid {
    background-image: url(../image/mtimage5.webp);
    background-position: center;
    background-size: cover;
    background-color: rgba(0, 0, 0, 0.5);
    background-blend-mode: multiply;
    height: clamp(31.25rem, 8.495rem + 97.087vw, 70rem);
}


.products_rador_takeovervivid {
    margin: 0 auto;
    height: clamp(18.75rem, 13.441rem + 22.654vw, 40.625rem);
    width: clamp(18.75rem, 12.682rem + 25.89vw, 43.75rem);
    background-color: rgba(133, 181, 240, 0.5);
    clip-path: polygon(51% 18%, 77% 33%, 87% 69%, 52% 80%, 27% 64%, 27% 33%);
}

/* MIX JUICY */
.products_board_bgimg_mixjuicy {
    background-image: url(../image/bdimage7.webp);
    background-position: center;
    background-size: cover;
    background-color: rgba(0, 0, 0, 0.6);
    background-blend-mode: multiply;
    height: clamp(31.25rem, 8.495rem + 97.087vw, 70rem);
}

.products_material_bgimg_mixjuicy {
    background-image: url(../image/mtimage6.webp);
    background-position: center;
    background-size: cover;
    background-color: rgba(0, 0, 0, 0.5);
    background-blend-mode: multiply;
    height: clamp(31.25rem, 8.495rem + 97.087vw, 70rem);
}


.products_rador_mixjuicy {
    margin: 0 auto;
    height: clamp(18.75rem, 13.441rem + 22.654vw, 40.625rem);
    width: clamp(18.75rem, 12.682rem + 25.89vw, 43.75rem);
    background-color: rgba(133, 181, 240, 0.5);
    clip-path: polygon(52% 29%, 72% 37%, 82% 67%, 52% 73%, 19% 69%, 27% 33%)
}

/* ライダー */
.rider_page_text {
    font-size: clamp(0.625rem, 0.231rem + 1.683vw, 1.25rem);
    line-height: clamp(1.25rem, 0.825rem + 1.812vw, 3rem);
    margin-top: 10%;
}

.rider_lead_area {
    max-width: 80%;
    margin: 0 auto;
}

.rider_sns_icon {
    display: flex;
    gap: 3%;
    margin: 10% 0;
}

.rider_sns_icon a img {
    width: clamp(0.938rem, 0.634rem + 1.294vw, 2.188rem);
}

.rider_pade_undpic {
    max-width: 50%;
    object-fit: cover;
}

.rider_page_responsive {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* コンタクト */
.contact_top_text {
    text-align: center;
}

.contact_top_text h2 {
    margin-bottom: 0;
}

.contact_top_text p {
    font-size: clamp(0.75rem, 0.386rem + 1.553vw, 2.25rem);
    margin-bottom: clamp(1.25rem, 0.795rem + 1.942vw, 3.125rem);
}

.contact_bcgd_area {
    height: clamp(34.375rem, 27.549rem + 29.126vw, 62.5rem);
    background-image: url(../image/image18.webp);
    background-color: rgba(0, 0, 0, 0.5);
    background-blend-mode: multiply;
    background-size: cover;
    background-position: center;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: clamp(1.25rem, 0.795rem + 1.942vw, 3.125rem) 0;
}


.contact_bcgd_area p {
    font-size: clamp(0.75rem, 0.477rem + 1.165vw, 1.875rem);
}

.contact_name_area,
.contact_name_area,
.contact_text_area {
    display: flex;
    flex-direction: column;
    margin: 0 auto;
}

.contact_first_text {
    text-align: center;
}

.contact_name_area input,
.contact_name_area input,
.contact_text_area textarea {
    font-size: clamp(0.75rem, 0.477rem + 1.165vw, 1.875rem);
    padding-left: 1%;
    background-color: #fff;
    width: clamp(18.75rem, 14.199rem + 19.417vw, 37.5rem);
    height: clamp(1.875rem, 1.420rem + 1.942vw, 3.75rem);
    border-radius: 10px;
}

.contact_text_area textarea {
    height: clamp(6.25rem, 4.733rem + 6.472vw, 12.5rem);
}

.contact_submit_btn {
    display: flex;
    justify-content: center;
}

.contact_submit_btn input {
    font-size: clamp(0.75rem, 0.477rem + 1.165vw, 1.875rem);
    color: #fff;
    border: 1px solid #fff;
    width: clamp(5rem, 3.938rem + 4.531vw, 9.375rem);
    height: clamp(1.875rem, 1.268rem + 2.589vw, 4.375rem);
    border-radius: 15px;
}

/* プライバシーポリシー */


.privacypolicy_text_area {
    background-image: url(../image/image18.webp);
    background-size: cover;
    background-color: rgb(0, 0, 0, 0.5);
    background-blend-mode: multiply;
}

.privacypolicy_text {
    width: 90%;
    max-width: 900px;
    margin: 0 auto;
    padding: clamp(1.25rem, 0.795rem + 1.942vw, 3.125rem) 0;
}

.privacypolicy_text p {
    color: #fff;
    font-size: clamp(0.625rem, 0.534rem + 0.388vw, 1rem);
    line-height: 2.0;
}

@media (min-width:768px) {

    /* ヘッダー　ハンバーガー */
    .ham_list {
        background-color: rgb(255, 255, 255, 0);
        position: fixed;
        left: 30%;
        font-size: clamp(1rem, 0.333rem + 1.389vw, 2rem);
        margin-top: 15px;
        height: fit-content;
        width: 75%;
        transform: translateX(0%);
    }

    /* products */
    .products_board_list,
    .rider_card_list {
        grid-template-columns: 1fr 1fr 1fr;
    }

    .ham_card {
        flex-direction: row;
        align-items: center;
        height: fit-content;
    }

    .main_nav {
        flex-direction: row;
        margin-top: 0;
        width: 60%;
    }

    .main_nav li {
        padding-left: 0;
    }

    .nav_sns {
        padding-bottom: 0;
        width: 23%;
        padding-left: 0;
        padding-right: 10%;
        justify-content: space-between;
    }

    .nav_sns li img {
        width: clamp(1.5rem, 0.833rem + 1.389vw, 2.5rem);
    }

    .ham_button {
        display: none;
    }

    .header_bar {
        z-index: 0;
    }

    /* news */
    .news_responsive_box {
        flex-direction: column;
        align-items: center;
        width: clamp(7.5rem, 4.167rem + 6.944vw, 12.5rem);
    }

    .news_top_news ul {
        display: flex;
        justify-content: center;
        gap: clamp(0.313rem, -0.104rem + 0.868vw, 0.938rem);
    }

    .img_square {
        width: clamp(6.25rem, 2.917rem + 6.944vw, 11.25rem);
        height: clamp(6.25rem, 2.917rem + 6.944vw, 11.25rem);
    }

    .news_responsive_top_text,
    .news_responsive_under_text {
        font-size: clamp(0.563rem, 0.313rem + 0.521vw, 0.938rem);
    }

    /* rider */
    .rider_page_responsive {
        display: flex;
        flex-direction: row;
        gap: 5%;
    }

}