@charset "UTF-8";

@media only screen and (max-width: 1200px) {

    /* ---- 共通設定 ---- */
    .wrap {
        padding-top: 150px;
    }
    .section_inner {
        max-width: 1000px;
        margin: 50px 15px 0;
    }
    main.page {
        margin-top: 60px;
        padding: 0 20px;
    }

    /* ---- header ---- */
    body .hidden_part {
        display: none;
    }
    nav {
        top: 100px;
    }
    .header_title {
        margin-top: 11vw;
    }
    /* 使用ページ: register.php, press.php, thanks.php, mail/index.php, v-mail/index.php */
    .page nav {
        right: 200px;
    }

    /* ---- footer ---- */
    footer {
        margin-top: 50px;
    }
    #footer_copyright {
        margin-top: 0px;
    }
    .fixed_btn_wrap {
        width: 100%;
    }

    /* ---- トップページ（index.php） ---- */
    .front_page header>div::before {
        height: 100%;
    }
    .front_page header {
        height: 100vh;
    }
    .front_page .news_section > div > div {
        padding: 0 5vw;
        max-height: 250px;
    }
}

@media only screen and (max-width: 1000px) {

    /* ---- トップページ（index.php） ---- */
    .front_page header {
        margin-bottom: 30px;
    }
    .front_page header span {
        bottom: 25%;
    }
    .front_page .products_section .f_wrap {
        gap: 10px;
    }
    .front_page .products_section .f_wrap>div {
        padding: 20px 15px;
    }
    .front_page .products_section .f_wrap > div h3,
    .front_page .visitors_section .content_box li h3 {
        font-size: 18px;
    }
    .front_page .overview_section table {
        padding: 0 10px;
    }
}
@media only screen and (max-width: 880px) {

    /* ---- 共通設定 ---- */
    html {
        scroll-padding-top: 100px;
    }
    .no-wrap {
        white-space: break-spaces;
    }
    .pc_only {
        display: none;
    }
    .mb_only {
        display: block;
    }
    .wrap {
        padding-top: 60px;
    }

    /* head */
    .page_ttl_bg .head_jp{
        font-size: 20px;
    }
    .section_ttl_line {
        margin-top: 30px;
        font-size: 20px;
    }
    .section_ttl_bg {
        margin-top: 10px;
        line-height: 1.5;
        font-size: 20px;
        padding: 10px 0;
    }
    .ttl_frame {
        font-size: 18px;
    }

    /* btn */
    .btn_center {
        margin-top: 30px;
        .btn_blue {
            width: 90%;
        }
        .btn_blue:hover {
            opacity: 1;
        }
    }

    /* ---- header ---- */
    nav {
        display: none;
    }
    .fixed_header .header_menu_head {
        padding: 0;
        height: 66px;
    }
    .fixed_header .header_menu_body {
        display: block;
        position: fixed;
        top: -100vh;
        left: 0;
        width: 100%;
        height: 100vh;
        background-color: #fff;
        z-index: 20;
        transition: top 0.5s;
        overflow-y: auto;
        max-height: calc(100vh - 66px);
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
        z-index: -1;
    }
    .fixed_header .header_menu_body.open {
        top: 66px;
    }
    .fixed_header .header_menu_body nav {
        display: block;
    }
    .fixed_header .header_menu_body nav ul {
        display: block;
        padding: 0;
        box-shadow: none;
        height: auto;
    }
    .fixed_header .header_menu_body nav li {
        display: block;
        color: var(--key-color);
        max-width: initial;
        border-bottom: 1px solid #ddd;
        padding-left: 35px;
        background-image: url(../img/arrow_right.svg);
        background-repeat: no-repeat;
        background-position: 5% center;
        background-size: 7px;
    }
    .fixed_header .header_menu_body nav li.nav_home {
        display: none;
    }
    .fixed_header .header_menu_body nav li a {
        display: block;
        padding: 17px 0;
        color: var(--key-color);
        max-width: none;
        height: auto;
        border-right: none;
        font-weight: normal;
    }
    .fixed_header .header_menu_body nav li a.is_disabled {
        color: #ccc;
        pointer-events: none;
    }
    .menu-trigger {
        display: inline-block;
        width: 30px;
        height: 20px;
        vertical-align: middle;
        cursor: pointer;
        position: fixed;
        top: 22px;
        right: 20px;
        z-index: 600;
    }
    .menu-trigger > div {
        color: white;
        text-align: center;
        margin-top: 0px;
    }
    .menu-trigger > div img {
        width: 100%;
        opacity: 1;
        webkit-transition: all 0.5s;
        transition: all 0.5s;
    }
    .menu-trigger.active > div img {
        opacity: 0;
        webkit-transition: all 0.5s;
        transition: all 0.5s;
    }
    .menu-trigger span {
        display: inline-block;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        position: absolute;
        left: 0;
        width: 100%;
        height: 2px;
        background-color: #fff;
        -webkit-transition: all 0.5s;
        transition: all 0.5s;
    }
    .menu-trigger.active span {
        background-color: #fff;
    }
    .menu-trigger span:nth-of-type(1) {
        top: 0;
    }
    .menu-trigger.active span:nth-of-type(1) {
        -webkit-transform: translateY(10px) rotate(-45deg);
        transform: translateY(10px) rotate(-45deg);
        background-color: #fff;
    }
    .menu-trigger span:nth-of-type(2) {
        top: 45%;
    }
    .menu-trigger.active span:nth-of-type(2) {
        opacity: 0;
    }
    .menu-trigger span:nth-of-type(3) {
        bottom: 0;
    }
    .menu-trigger.active span:nth-of-type(3) {
        -webkit-transform: translateY(-8px) rotate(45deg);
        transform: translateY(-8px) rotate(45deg);
        background-color: #fff;
    }
    .fixed_header {
        /* height: 66px; */
        background-color: var(--key-color);
        display: flex;
        align-items: center;
    }
    .fixed_header .header_right {
        display: none;
    }
    .wrap .header_logo a img {
        width: 74%;
        max-width: 400px;
        height: auto;
    }

    /* ---- footer ---- */
    footer {
        padding-bottom: 70px;
    }
    #footer_tel {
        margin-top: 2vw;
        line-height: 1.2;
    }
    .fixed_btn {
        width: 85%;
        font-size: 15px;
        letter-spacing: 0.05em;
    }
    #footer_organization {
        font-size: 20px;
    }
    #footer_organization span:first-child {
        font-size: 16px;
    }
    #footer_adress {
        font-size: 12px;
    }
    #footer_copyright {
        font-size: 12px;
    }

    /* ---- 各ページ共通 ---- */
    /* 使用ページ: register.php, press.php, thanks.php, mail/index.php, v-mail/index.php */
    /* .page section {
        padding: 0 15px;
    } */
    main.page {
        margin-top: 40px;
        padding: 0 10px;
    }
    /* .page section h2 {
        margin-top: 10px;
        line-height: 1.5;
        font-size: 20px;
        padding: 5px 0 7px;
    } */
    /* 使用ページ: press.php */
    /* main.page {
        
    } */

    /* ---- トップページ（index.php） ---- */
    .front_page header {
        height: 75vh;
        min-height: 660px;
        margin-top: 0;
    }
    .front_page header>div {
        padding-top: 10vw;
    }
    .front_page .wrap .header_logo {
        top: 2vw;
        left: 4%;
    }
    .front_page header div.main_logo {
        max-width: 90%;
        margin-top: 10vw;
    }
    .front_page header div.main_logo img {
        max-width: 100%;
    }
    .front_page header div.main_logo .catch {
        margin: 0 0 30px;
        padding: 13px 20px;
    }
    .front_page header div.main_logo .catch p {
        font-size: 18px;
        padding-inline: 20px;
        line-height: 1.2;
        &:after,&:before {
            width: 12px;
            height: 2px;
        }
    }
    .front_page header .logo_data {
        font-size: 17px;
        margin: 10px 0;
    }
    .front_page header .logo_data div:first-child {
        justify-content: center;
        font-size: 16px;
        flex-wrap: wrap;
    }
    .front_page header .logo_data > div:first-child > div:last-child{
        text-align: left;
        align-items: baseline;
        row-gap: 0px;
        gap: 3px;
        line-height: 1;
        flex-wrap: wrap;
        justify-content: center;
        letter-spacing: -0.005em;
    }
    .front_page header .logo_data div span {
        font-size: 15px;
    }
    .front_page header .logo_data div:first-child span {
        font-size: 32px;
    }
    .front_page header .logo_data > div {
        margin: 10px 0;
    }
    .front_page header .logo_data .info .txt_sml {
        font-size: 14px;
    }
    .front_page header > div::before {
        transform: skewY(352deg);
        width: 120%;
        height: 80%;
        min-height: 460px;
        background-color: rgba(3, 25, 83, 0.6);
        border-top: 8px solid rgba(255, 255, 0, 0.9);
        border-bottom: 8px solid rgba(255, 255, 0, 0.9);
    }
    .front_page header .sponsor {
        font-size: 17px;
        margin: 0 0 20px;
        }
    .front_page header .btn {
        margin-bottom: 10px;
    }
    .front_page .news_section {
        margin-bottom: 20px;
    }
    .front_page .news_section .info li {
        flex-direction: column;
        gap: 0;
        padding: 15px 0;
    }
    .front_page .products_section .f_wrap {
        flex-direction: column;
    }
    .front_page .products_section .f_wrap > div {
        width: 100%;
    }
    /* .front_page .overview_section {
        margin-top: -100px;
        padding-top: 110px;
    } */
    .front_page .overview_section table th,
    .front_page .overview_section table td {
        display: block;
        padding: 0;
    }
    .front_page .overview_section table th {
        font-weight: bold;
        padding-top: 15px;
        border-bottom: 0;
    }
    .front_page .overview_section table td {
        padding-bottom: 15px;
    }
    .front_page .top_bnr img {
        width: 100%;
        max-width: 520px;
    }

    /* ---- プレスページ（press.php） ---- */
    #press #contact_press {
        padding: 10px;
    }
    #press .content_area {
        padding-top: 60px;
    }
    #press .content_block {
        display: block;
    }
    #press .content_block .content_body {
        margin-right: 0;
    }
    #press .content_block .content_img {
        margin-top: 10px;
    }

    /* ---- satoriタグ ---- */
    #satori__creative_container {
        margin-top: 20px;
    }

}