/***** アクセスガイド　専用 ↓ *****/
main {
    display: grid;
    grid-template:
        "title-left company title-right" 900px
        / 1fr 860px 1fr ;
}

/***** タイトル部分 ↓ *****/

main .company_pfofile {
    grid-area: company;
    background-color: #EBF0F0;
}
.company_pfofile .bigtitle {
    position: relative;
}
.company_pfofile .bigtitle .englishtitle {
    font-size: 50px;
    color: black;
    padding-top: 10px;
    padding-left: 30px;
    padding-bottom: 10px;
}

.company_pfofile .bigtitle .titlespace h1 {
    font-size: 26px;
    color: black;
    display: block;
    width: 400px;
    text-align: center;
    padding-top: 5px;
    padding-bottom: 5px;
    background-color: #FCEE21;
    margin-bottom: 50px;
    margin-left: 20px;
}

.company_pfofile .bigtitle .pagenav {
    position: absolute;
    top: 10px;
    right: 30px;
}

.company_pfofile .bigtitle .pagenav ul {
    font-size: 16px;
}
.company_pfofile .bigtitle .pagenav li {
    line-height: 200%;
}
.company_pfofile .bigtitle .pagenav li a, .company_pfofile .bigtitle .pagenav li a:link {
    color: black;
}

.company_pfofile .bigtitle .pagenav li a:hover {
    color: #E60013;
}


/* タイトル横の色*/
main .top_slide_left {
    grid-area: title-left;
}
main .top_slide_left .blackbox {
    width: 100%;
    height: 360px;
    background-color: black;
    margin-top: 100px;
}
main .top_slide_right {
    grid-area: title-right;
}
main .top_slide_right .redbox {
    width: 100%;
    height: 360px;
    background-color: red;
}


/***** メイン部分 ↓ *****/
.accessguide_main {
    grid-column: 1/3;
    grid-row: 2/3;
    /***** メイン部分 ↓ *****/
    display: grid;
    grid-template-columns: 100px 660px 100px;
    grid-template-rows: auto auto auto auto auto auto;
}
.accessguide_main .basic-information {
    grid-column: 2/3;
    grid-row: 1/2;
    padding-bottom: 30px;
}
.accessguide_main .basic-information h2 {
    font-size: 28px;
    padding-bottom: 15px;
}
.accessguide_main .basic-information .adress {
    font-size: 24px;
    line-height: 32px;
    margin-bottom: 30px;
}

.accessguide_main .basic-information ul {
    margin-bottom: 5px;
    list-style: none;
    padding-top: 30px;
}
.accessguide_main .basic-information li {
    font-size: 22px;
    line-height: 175%;
}

.accessguide_main .basic-information ul.scope {
    margin-bottom: 5px;
    list-style: none;
    padding-bottom: 80px;
}
.accessguide_main .basic-information ul.scope li {
    font-size: 18px;
    line-height: 175%;
}


/***** スマホ対応CSS（max-width: 768px） ↓ *****/
@media screen and (max-width: 768px) {

    /***** main（全体レイアウト）の変更 *****/
    main {
        /* 1カラムにする */
        display: block;
        /* heightの指定を削除またはautoにする */
    }

    /* タイトル横の装飾部分を非表示にする（コンテンツエリアを広く使うため） */
    main .top_slide_left,
    main .top_slide_right {
        display: none;
    }

    /***** company_pfofile（メインコンテンツ）の変更 *****/
    main .company_pfofile {
        /* grid-area の指定を削除または block に合わせる */
        display: block;
        padding: 0 10px; /* 左右に少しパディングを持たせる */
    }

    /* タイトル部分 */
    .company_pfofile .bigtitle .englishtitle {
        font-size: 32px; /* フォントサイズを小さく */
        padding-top: 15px;
        padding-left: 10px; /* パディングを小さく */
        padding-bottom: 5px;
    }

    .company_pfofile .bigtitle .titlespace h1 {
        font-size: 20px; /* フォントサイズを小さく */
        width: 90%; /* 幅を画面のほぼいっぱいに */
        margin-bottom: 20px;
        margin-left: 10px; /* マージンを小さく */
    }

    /* pagenavはHTMLに存在しますが、PC向けCSSで定義されているため、スマホでは非表示または調整を検討します。
       ただし、今回のHTMLには pagenav が含まれていないため、ここでは調整を省略します。
       もし必要であれば、以下のように非表示にするか、適切な位置に配置します。
       .company_pfofile .bigtitle .pagenav {
           display: none; 
       }
    */

    /***** accessguide_main（詳細情報）の変更 *****/
    .accessguide_main {
        /* グリッドレイアウトを解除または1カラムにする */
        display: block;
        /* grid-column, grid-row の指定は不要 */
    }
    
    /* basic-information の変更 */
    .accessguide_main .basic-information {
        /* grid-column, grid-row の指定は不要 */
        padding: 0 10px 30px 10px; /* 左右のパディングを調整 */
    }
    
    .accessguide_main .basic-information h2 {
        font-size: 24px; /* フォントサイズを小さく */
        padding-bottom: 20px;
    }
    
    .accessguide_main .basic-information .adress {
        font-size: 16px; /* フォントサイズを小さく */
        line-height: 1.8;
        margin-bottom: 20px;
    }
    
    .accessguide_main .basic-information ul {
        padding-top: 20px; /* パディングを調整 */
    }
    
    .accessguide_main .basic-information li {
        font-size: 16px; /* フォントサイズを小さく */
        line-height: 1.7;
    }
    
    .accessguide_main .basic-information ul.scope {
        padding-bottom: 40px; /* パディングを調整 */
    }
    
    .accessguide_main .basic-information ul.scope li {
        font-size: 14px; /* フォントサイズを小さく */
    }
}