/* 想定端末 : iPad */

@media only screen and (min-device-width: 769px) and (max-device-width: 1080px) {
    .warp {
        width: 100%;
        max-width: auto;
        padding: 0;
        padding: calc(constant(safe-area-inset-right) * 0);
        margin: 0;
        margin: calc(constant(safe-area-inset-right) * 0);
        overflow: hidden;
    }
    .s_logo {
        top: 42.5% !important;
    }
    .menu {
        top: 52.5%;
    }
    .generalTitle,
    .generalIntroduction {
        width: 90%;
    }
}


/* 想定端末 : WXGA 画像解像度（最大対応幅） */


/* 最小　768 × 1024 px の比率画像解像度にて定義  */

@media only screen and (max-width: 768px) {
    /* ---------------------------------------------------------------------------------------------------- */
    /* 基本設定 */
    * {
        border: 0 none;
        border-width: 0px;
    }
    body {
        top: 1px;
        background-color: #333;
        -webkit-text-size-adjust: 100%;
        padding: 0;
        padding: calc(constant(safe-area-inset-right) * 0);
        margin: 0;
        margin: calc(constant(safe-area-inset-right) * 0);
        border: 0 none;
        border-width: 0px;
    }
    div {
        border: 0 none;
        border-width: 0;
    }
    /* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
    .profile {
        display: none;
    }
    /* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
    .pc {
        display: none !important;
    }
    .sp {
        display: block !important;
    }
    /* ---------------------------------------------------------------------------------------------------- */
    /* 各セクションの背景画像 SP専用の画像に切り替え */
    .bg {
        background-position: center top;
        background-size: 100% auto;
    }
    .bg::before {
        height: 216.53vw;
    }
    .bg._01::before {
        background-image: url("../img/01_star.gif"), url("../img/01_sp.jpg");
        background-position: 25% 25%, top center;
        background-size: 50%, cover;
    }
    .bg._02::before {
        background-image: url("../img/02_sp.jpg");
    }
    .bg._03::before {
        /* 下部の円弧の設定 */
        left: -10vw;
        top: -24vw;
        width: 120vw;
        height: 200vw;
        border-bottom-left-radius: 2000px 500px;
        border-bottom-right-radius: 2000px 500px;
        background-image: url("../img/03_character_sp.png"), url("../img/03_butterfly_sp.gif"), url("../img/03_sp.jpg");
        /* background-size: 90%, 160px, 100%; */
        background-size: 100vw, 33vw, 100vw;
        /* background-position: center top 504px, calc(50% - 30px) calc(100% - 168px), center bottom; */
        background-position: left 10vw bottom 0vw, left 38vw bottom 40vw, left 10vw bottom 0vw;
    }
    /* .bg._03 下部のホワイトスペース+溢れたコンテンツをマスク */
    .bg.white::before {
        background-color: #2d3351;
        z-index: -74;
        overflow: hidden;
    }
    .bg._04::before {
        background-image: url("../img/04_sp.jpg");
        background-position: top -540px;
    }
    .bg._04-02::before {
        opacity: 0;
        transition: all 1s ease 0.5s;
        background-image: url("../img/04_item_sp.png");
        z-index: -45;
        background-size: cover;
        transform: scale(1);
    }
    .bg._05::before {
        background-image: url("../img/05_sp.jpg");
    }
    /* ---------------------------------------------------------------------------------------------------- */
    /* コンテンツのエリア設定 */
    .warp {
        min-width: auto;
        border: 0;
        /* position: relative; */
    }
    /* 各セクションのエリア設定 */
    .one {
        min-height: 216.53vw;
        /* margin-bottom: 200px; */
        margin-bottom: 8.21vw;
    }
    .leftMargin {
        margin-left: 0;
    }
    /* 各セクションのコンテンツ設定 */
    .onebox {
        position: relative;
        width: 97.65vw;
        margin: 0 auto;
        padding: 0 32px;
        height: auto;
        /* padding-top: 80px; */
        padding-top: 0;
        /* margin-top: -80px; */
    }
    .onebox img {
        width: 100%;
    }
    /* [右下固定]ページTOP */
    .pageTop {
        zoom: 0.8;
    }
    /* ---------------------------------------------------------------------------------------------------- */
    /* ローディング設定 */
    #loader {
        zoom: 0.6;
    }
    /* ローディングアイコン */
    #loader p {
        padding-top: 12px;
        font-size: 16px;
        letter-spacing: 2px;
    }
    /* ロゴアニメーション */
    #logo {
        position: absolute;
        top: 34%;
        width: 90vw;
    }
    /* 明転処理 */
    #darkening {
        height: 216.53vw;
        background-size: 100%;
    }
    /* ---------------------------------------------------------------------------------------------------- */
    /* Section.01 */
    #hero {
        position: relative;
        margin-bottom: 1.64vw;
    }
    .logo {
        position: absolute;
        top: 34%;
        width: 90vw;
    }
    .menu {
        position: absolute;
        top: 52.5%;
        left: 0;
        right: 0;
    }
    .menu ul li {
        transform: none;
        zoom: 0.7;
        width: 144px;
    }
    .menu ul li:hover {
        transform: none;
    }
    .target {
        width: 90%;
    }
    .banner {
        display: block;
        width: 203px !important;
        position: absolute;
        left: 0;
        bottom: 32%;
    }
    .banner:hover {
        opacity: 0.8;
    }
    /* スクロールアイコン */
    .scroll {
        zoom: 0.8;
    }
    /* ---------------------------------------------------------------------------------------------------- */
    /* Section.02 */
    #slogan {
        min-height: calc(216.53vw - (216.53vw / 3));
    }
    .sloganTitle {
        text-align: left;
    }
    .sloganTitle img {
        /* margin-bottom: 24px; */
        margin-bottom: 0.98vw;
    }
    .sloganIntroduction {
        display: block;
    }
    /* ---------------------------------------------------------------------------------------------------- */
    /* Section.03 */
    #message {
        /* margin-bottom: 320px; */
        margin-bottom: 13.13vw;
    }
    .item_01 {
        width: 200px;
        position: fixed;
        top: 150px;
        right: 150px;
    }
    .item_02 {
        width: 200px;
        position: fixed;
        top: 250px;
        right: 100px;
    }
    .item_03 {
        width: 200px;
        position: fixed;
        top: 300px;
        right: 50px;
    }
    /* ---------------------------------------------------------------------------------------------------- */
    /* Section.06 */
    /* layout */
    .layout_2column {
        display: flex;
        flex-direction: column;
    }
    .layout_2column-item {
        position: relative;
        width: 100%;
    }
    .layout_2column-item:nth-child(2n) {
        margin-top: 4vw;
    }
    /* contents */
    #oneCompany {
        /* margin-bottom: 32px; */
        margin-bottom: 1.31vw;
    }
    /* GoogleMapを加工し配置 */
    #map {
        width: 100%;
        padding-top: 125px;
        margin: 20px 0 80px 0;
    }
    #map iframe {
        top: -125px;
        height: calc(100% + 135px + 125px);
    }
    /* ---------------------------------------------------------------------------------------------------- */
    /* フォーム */
    form p {
        font-size: 14px;
    }
    input[type=submit] {
        display: block;
    }
    .contact {
        margin: 60px 0 0 0;
    }
    .contact button {
        width: 100%;
        font-size: 18px;
        padding: 12px 0 13px 0;
    }
    .form {
        width: 350px;
    }
    .profile {
        font-size: 16px;
        padding: 11px 24px 13px 26px;
        position: relative;
        top: 198px;
        left: 68px;
    }
    .c-modal {
        height: 216.53vw;
    }
    .c-modal_bg {
        height: 216.53vw;
        width: 100%;
    }
    .c-modal_content {
        background: #fff;
        left: 50%;
        position: absolute;
        top: 8px;
        transform: translate(-50%, 4px);
    }
    .c-modal_content._lg {
        width: calc(100% - 16px);
    }
    .c-modal_content_inner {
        position: relative;
        padding: 40px 24px 48px 24px;
    }
    .c-modal_close {
        position: absolute;
        top: 13px;
        right: 10px;
        color: #000;
        padding-left: 4px;
        font-size: 14px;
    }
    .c-modal_close::before {
        content: url("../img/icon_close.svg");
        padding-right: 6px;
    }
    .footerBg {
        z-index: 1;
    }
    /* ---------------------------------------------------------------------------------------------------- */
    /* フッター */
    footer {
        display: block;
        max-width: 100vw;
        margin-top: -18vw;
        /* padding: 80px 0 40px 0; */
        padding: 20vw 0 5vw;
        border: 0;
        /* background-size: cover;
        background-position: center; */
        background-color: #333;
    }
    footer::after {
        position: fixed;
        content: "";
        left: 0px;
        bottom: -199px;
        width: 100vw;
        height: 200px;
        background-color: #333;
        z-index: 0;
    }
    .footerBg {
        max-width: 100vw;
        margin-top: 32vw;
    }
    .footerCopy {
        font-size: 18px;
    }
    footer small {
        font-size: 14px;
    }
    /* ---------------------------------------------------------------------------------------------------- */
    /* CSSハック:safariのみ対応 */
    _::-webkit-full-page-media,
    _:future,
     :root .logo {
        left: 51% !important;
    }
    _::-webkit-full-page-media,
    _:future,
     :root #logo {
        left: 51% !important;
    }
}


/* ---------------------------------------------------------------------------------------------------- */


/* 想定端末 : iPhone 7 Safari　 */


/* 最小　750 × 1334 px の比率画像解像度にて定義  */

@media only screen and (max-width: 750px) {
    #logo {
        top: 33%;
    }
    .logo {
        top: 33%;
    }
    /* 下部の円弧の設定 */
    .bg._03::before {
        top: -24vw;
    }
}


/* ---------------------------------------------------------------------------------------------------- */


/* 想定端末 : iPhone　11 Pro Max・XS Max　 */


/* 最小　621 × 1344 px の比率画像解像度にて定義  */

@media only screen and (max-width: 621px) {
    #logo {
        top: 34%;
    }
    .logo {
        top: 34%;
    }
    /* #logo { top: 44%; }
    .logo { top: 44%; } */
    /* 下部の円弧の設定 */
    .bg._03::before {
        top: 0vw;
    }
}


/* ---------------------------------------------------------------------------------------------------- */


/* 想定端末 : 汎用（基準） */


/* 最小　428 × 926 px の比率画像解像度にて定義  */

@media only screen and (max-width: 428px) {
    #logo {
        top: 43%;
    }
    .logo {
        top: 43%;
    }
}


/* ---------------------------------------------------------------------------------------------------- */


/* 想定端末 : iPhone XR */


/* 最小　414 × 736 px の比率画像解像度にて定義  */


/* 最小　414 × 780 px には非対応  */


/* 最小　414 × 896 px には非対応  */

@media only screen and (max-width: 414px) {
    #logo {
        top: 36%;
    }
    .logo {
        top: 36%;
    }
    /* 下部の円弧の設定 */
    .bg._03::before {
        top: -14vw;
    }
}


/* ---------------------------------------------------------------------------------------------------- */


/* 想定端末 : iPhone 13/13 Pro、12/12 Pro */


/* 最小　390 × 844 px の比率画像解像度にて定義  */

@media only screen and (max-width: 390px) {
    #logo {
        top: 42%;
    }
    .logo {
        top: 42%;
    }
    /* 下部の円弧の設定 */
    .bg._03::before {
        top: -14vw;
    }
}


/* ---------------------------------------------------------------------------------------------------- */


/* 想定端末 : iPhone 8・SE(2)・X・XS・11 */


/* 最小　375 × 667 px の比率画像解像度にて定義  */

@media only screen and (max-width: 375px) {
    #logo {
        top: 33%;
    }
    .logo {
        top: 33%;
    }
    /* 下部の円弧の設定 */
    .bg._03::before {
        top: -40vw;
    }
    .menu ul li {
        transform: none;
        zoom: 0.6;
        width: 144px;
    }
}


/* ---------------------------------------------------------------------------------------------------- */


/* 想定端末 : iPhone 7・15.3  */


/* 最小　370 × 540 px の比率画像解像度にて定義  */

@media only screen and (max-width: 370px) {
    #loader p {
        font-size: 24px;
        letter-spacing: 2px;
    }
    #logo {
        top: 29%;
    }
    .logo {
        top: 29%;
    }
    /* 下部の円弧の設定 */
    .bg._03::before {
        top: -41vw;
    }
}


/* ---------------------------------------------------------------------------------------------------- */


/* 想定端末 : Android XPERIA iPhone 7  */


/* 最小　360 × 540 px の比率画像解像度にて定義  */


/* 最小　360 × 640 px には非対応(XPERIAのみ、540pxとなる)  */

@media only screen and (max-width: 360px) {
    #loader p {
        font-size: 24px;
        letter-spacing: 2px;
    }
    #logo {
        top: 29%;
    }
    .logo {
        top: 29%;
    }
    /* 下部の円弧の設定 */
    .bg._03::before {
        top: -41vw;
    }
}