@media (max-width: 767px) { 
    * {
        margin: 0;
        padding: 0;
    }
    .container {
        max-width: 100%;
        margin: 0 auto;
        padding: 0 20px;
    }
    body {
        font-family: 'Noto Sans JP', sans-serif;
    }
    .sp-none {
        display: none;
    }
    /* 共通：ヘッダー */
    header {
        height: 50px;
        width: 100%;
        padding: 15px 0;
        background-color: #474e49;
        color: white;
        top: 0;
        left: 0;
        position: fixed;
        z-index: 99;
    }
    header .headline {
        line-height: 50px;
        position: relative;
        float: left;
        z-index: 85;
    }
    header .headline a { 
        text-decoration: none;
    }
    header .headline a h2 {
        font-size: 1rem;
        font-weight: 500;
        letter-spacing: 0.1rem;
        color: #FFFFFF;
    }
    h2 img.header-logo {
        height: 40px;
        margin-right: 10px;
        padding: 0 10px 10px 0;
        vertical-align: middle;
    }
    .nav-list {
        line-height: 60px;
        float: right;
        margin-left: 20px;
        list-style: none;
    }
    .nav-list-item {
        list-style: none;
        display: inline-block;
        margin-left: 20px;
        font-size: 1rem;
        font-weight: 500;
    }
    /* 共通：ハンバーガー */
    header .navi {
        display: none;
    }
    .hamburger-menu {
        display: block;
    }
    .menu-btn {
        position: fixed;
        top: 22px;
        right: 35px;
        display: flex;
        height: 35px;
        width: 35px;
        justify-content: center;
        align-items: center;
        z-index: 90;
    }
    .menu-btn span:before,
    .menu-btn span:after {
        content: '';
        display: block;
        height: 2px;
        width: 30px;
        border-radius: 1px;
        background-color: #FFFFFF;
        position: absolute;
    }
    .menu-btn span:before {
        bottom: 8px;
    }
    .menu-btn span:after {
        top: 8px;
    }
    #menu-btn-check:checked ~ .menu-btn span {
        background-color: rgba(255, 255, 255, 0);/*メニューオープン時は真ん中の線を透明にする*/
    }
    #menu-btn-check:checked ~ .menu-btn span::before {
        bottom: 16.5px;
        transform: rotate(45deg);
    }
    #menu-btn-check:checked ~ .menu-btn span::after {
        top: 16.5px;
        transform: rotate(-45deg);
    }
    #menu-btn-check {
        display: none;
    }
    /* メニューの中 */
    .menu-content {
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 80;
        background-color:rgba(255,255,255,0.8);
    }
    .menu-content ul {
        padding: 100px 20px;
    }
    .menu-content ul li {
        list-style: none;
        margin-bottom: 10px;
    }
    .menu-content ul li hr {
        border: 0.5px solid #6E6E73;;
        width: 100%;
    }
    .menu-content ul li a {
        width: 100%;
        box-sizing: border-box;
        color: #FFFFFF;
        text-decoration: none;
        padding: 8px 0;
        text-align: center;
        display: flex;
        align-items: flex-end;
    }
    .menu-content ul li a h2 {
        font-size: 1.25em;
        font-weight: 700;
        letter-spacing: 0.2rem;
    }
    .menu-content ul li a p {
        font-size: 0.8em;
        font-weight: 300;
        padding-bottom: 3px;
        margin-left: 5px;
        letter-spacing: 0.2rem;
    }
    .menu-content {
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 100%;/*leftの値を変更してメニューを画面外へ*/
        z-index: 80;
        background-color: #474e49;
        transition: all 0.5s;/*アニメーション設定*/
    }
    #menu-btn-check:checked ~ .menu-content {
        left: 0;/*メニューを画面内へ*/
    }
    /* 共通：mainタグ位置 */
    main {
        margin-top: 140px;
    }
    /* 共通：フッター */
    footer {
        width: 100%;
        height: auto;
        padding: 80px auto 20px;
        background-color: #242B26;
        color: #FFFFFF;
        text-align: center;
    }
    .footerline {
        margin: 0 auto 40px;
    }
    .footerline a {
        text-decoration: none;
    }
    .footerline a img {
        width: 105px;
        margin: 0 auto 10px;
    }
    .footerline a h2 {
        margin: auto 50px;
        letter-spacing: 0.18rem;
        font-weight: 700;
        font-size: 1em;
        color: #FFFFFF;
    }
    ul.footer-menu {
        margin: auto 0 40px auto;
    }
    ul.footer-menu li {
        display: inline-block;
        letter-spacing: 0.02rem;
        font-size: 1.0rem;
    }
    ul.footer-menu li.sp-none {
        display: none;
    }
    ul.footer-menu li.pc-none {
        display: block;
    }
    p.copywiter {
        font-size: 0.8rem;
        font-weight: lighter;
    }
    /* 共有：各ページ */
    .title {
        margin-bottom: 60px;
    }
    .title h3 {
        color: #6E6E73;
        font-weight: 700;
        font-size: 0.8em;
        letter-spacing: 0.4em;
        margin: 0;
        padding: 0;
    }
    .title h1 {
        color: #1f1f1d;
        font-weight: 700;
        font-size: 1.5em;
        letter-spacing: 0.4em;
        margin: 0;
        padding: 0;
    }
}