@charset 'utf-8';

.pc_only {
    display: block;
}

.sp_only {
    display: none;
}

@media screen and (max-width: 1000px) {
    .pc_only {
        display: none;
    }

    .sp_only {
        display: block;
    }

    .img_sp_100p {
        width: 100%;
    }

    .img_sp_50p {
        width: 50%;
    }

    body {
        overflow-x: hidden;
        font-size: 230%;
        padding: 190px 1% 0 1%;
    }

    #header_fix {
        width: 100%;
        height: auto;
    }

    header {
        width: 100%;
        margin: 10px 0 0 0;
        flex-wrap: wrap;
    }

        header h1 {
            width: calc(85% - 20px);
            margin-right: 20px;
        }

    #header_text {
        display: none;
    }

    #header_menu {
        width: 15%;
    }

        #header_menu img {
            width: 100%;
        }

    .common_inquiry {
    }

    .common_inquiry_items {
        width: 100%;
        display: flex;
        justify-content: space-between;
        padding: 20px 0;
    }

        .common_inquiry_items div {
            width: 50%;
        }

        .common_inquiry_items img {
            width: 100%;
        }

    .common_inquiry_image {
        display: none;
    }

    .common_contents_maxwidth {
    }

    #footer_link {
        width: 100%;
        background-position: center bottom 10px;
        flex-flow: column;
        padding: 0 0 200px 0;
    }

        #footer_link ul {
            margin-right: 0;
            margin-top: 20px;
            margin-bottom: 20px;
            margin-left: 10px;
        }

        #footer_link li {
            line-height: 2em;
        }

    #footer_bottom {
        padding: 50px 0px;
    }

        #footer_bottom div {
            width: 100%;
            text-align: center;
        }

	/* メニューコンテナ全体のスタイル */
	.menu-container {
	    /*position: fixed;*/
	    top: 0;
	    left: 0;
	    width: 100px;
	    height: 100%;
	    overflow: hidden;
	}

	/* メニューボタンのスタイル */
	.menu-button {
	    display: block;
	    /*position: fixed;*/
	    top: 0px;
	    right: 20px; /* shibata */
	    width: 80px;
	    height: 70px;
	    cursor: pointer;
	    z-index: 2;
	    text-align: center;
	    color: #fff;
	    background-color: #000;
	    padding-top: 10px;
	    margin-top: 10px;
	}

	.menu-text {
	    font-size: 80%;
	}

	/* メニューバーのスタイル */
	.bar {
	    display: block;
	    width: 50px;
	    height: 3px;
	    margin: 10px 5px 10px 5px;
	    background-color: #fff;
	    transition: 0.4s;
	    padding-left: 20px;
	}

	/* メニューボタンがチェックされた場合の1つ目のバーのアニメーション */
	#menu-toggle:checked ~ .menu-button .bar:nth-child(1) {
	    transform: rotate(45deg) translate(-2px, 3px);
	}

	/* メニューボタンがチェックされた場合の2つ目のバーのアニメーション */
	#menu-toggle:checked ~ .menu-button .bar:nth-child(2) {
	    opacity: 0;
	}

	/* メニューボタンがチェックされた場合の3つ目のバーのアニメーション */
	#menu-toggle:checked ~ .menu-button .bar:nth-child(3) {
	    transform: rotate(-45deg) translate(8px, -13px);
	}

	#menu-toggle:checked ~ .menu-button .menu-text {
	    display: none;
	}

	/* メニュートグルのスタイル */
	#menu-toggle {
	    display: none;
	}

	/* メニューのスタイル */
	.menu {
	    position: fixed;
	    top: 0;
	    right: -100%; /* 変更: メニューを左からスライドインさせるために left に設定 shibata */
	    width: 80%;
	    height: 100%;
	    background-color: #f3f3f3;
	    transition: 0.4s;
	    z-index: 1;
	    overflow-y: auto;
	}

	/* メニュートグルがチェックされた場合のメニューの表示アニメーション */
	#menu-toggle:checked ~ .menu {
	    right: 0; /* メニューを表示させるために left を 0 に変更 shibata */
	}

	/* メニュー内のリストのスタイル */
	.menu ul {
	    list-style: none;
	    padding: 20px;
	}

	    /* メニュー内リストのリンクのスタイル */
	    .menu ul li a {
	        text-decoration: underline;
	        color: #333;
	        font-size: 100%;
	        display: block;
	        padding: 5px 0;
	        transition: 0.2s;
	    }

	        /* メニュー内リストのリンクのホバー時のスタイル */
	        .menu ul li a:hover {
	            color: #bf7497;
	        }

	#menu_close {
	    margin: 10px 10px 0 0;
	    text-align: right;
	    display: block;
	}

	    #menu_close:hover {
	        cursor: pointer;
	    }

}