/*メインクラスに対する指定*/
.trainconpany-link-page{
    text-align: center;

    word-break: keep-all;
}

.wrapper{
    max-width: 1120px;
    margin: auto;
    padding: 0 1.5rem;
}

/*見出し*/
h1 .heading{
    background: #0bd;
    color: #fff;
    display: inline-block;
    padding: 6rem 3rem;
    border-radius: 50%;

    word-break: keep-all;
}

.choose-area{
    border-style: solid;
    border-color: black;

    background-color:white;

    justify-content: center;
    align-items: center;

    padding: 10px;
}

/*地方の選択*/
     .container-choose-area
        {
            background-color:  ivory;
            border-style:solid;

            display: grid;
            grid-template-columns:repeat(2,1fr);

            align-items: center;
            justify-content: center;

            font-size: smaller;

            margin: 10px;
        }

.item-area-hjr,.item-area-hhokkaido,.item-area-htohoku,.item-area-hkanto,.item-area-hcyubu,
.item-area-hkinki,.item-area-hcyugoku,.item-area-hshikoku,.item-area-hkyusyu,
.item-area-hjrgroup{

    border-width: thick;
    border-style:solid;
    border-color: gray;

    align-content: center;
    justify-content: center;

    margin: 10px;
    padding: 10px;
}

/*リンクカラー*/
.item-area-hjr a,.item-area-hhokkaido a,.item-area-htohoku a,.item-area-hkanto a,.item-area-hcyubu a,
.item-area-hkinki a,.item-area-hcyugoku a,.item-area-hshikoku a,.item-area-hkyusyu a{
    color: white;
}


/*会社選択*/
.choose-traincompany{
    background-color:  ivory;
    border-style:solid;
}


.item-area-chokkaido,.item-area-ctohoku,.item-area-ckanto,.item-area-ccyubu,
.item-area-ckinki,.item-area-ccyugoku,.item-area-cshikoku,.item-area-ckyusyu{
    border-width: thick;
    border-style:solid;
    border-color: gray;
    
    align-content: center;
    justify-content: center;
    
    margin: 5px;
    padding: 5px;

    font-size:smaller;
}


.item-area-chokkaido a,.item-area-ctohoku a,.item-area-ckanto a,.item-area-ccyubu a,
.item-area-ckinki a,.item-area-ccyugoku a,.item-area-cshikoku a,.item-area-ckyusyu a{
    color: white;
}



/*背景色*/
.item-area-hjr,#jrgroup{
    background: black;
    color: #fff;
}

.item-area-hhokkaido,#hokkaido,.item-area-chokkaido,.prefecturetitle-hokkaido{
    background: yellowgreen;
    color: #fff;
}

.item-area-htohoku,#tohoku,.item-area-ctohoku,.prefecturetitle-tohoku{
    background: blue;
    color: #fff;
}

.item-area-hkanto,#kanto,.item-area-ckanto,.prefecturetitle-kanto{
    background: green;
    color: #fff;
}

.item-area-hcyubu,#cyubu,.item-area-ccyubu,.prefecturetitle-cyubu{
    background: orange;
    color: #fff;
}

.item-area-hkinki,#kinki,.item-area-ckinki,.prefecturetitle-kinki{
    background: brown;
    color: #fff;
}

.item-area-hcyugoku,#cyugoku,.item-area-ccyugoku,.prefecturetitle-cyugoku{
    background: navy;
    color: #fff;
}

.item-area-hshikoku,#shikoku,.item-area-cshikoku,.prefecturetitle-shikoku{
    background: skyblue;
    color: #fff;
}

.item-area-hkyusyu,#kyusyu,.item-area-ckyusyu,.prefecturetitle-kyusyu{
    background-color: #E40112;
    color: #fff;
}



/*コンテンツエリア*/

h3{
    text-align: center;
}

.grid{

    display: block;

    }

    @media(min-width:600px){
        
     .grid
        {

                display: grid;
                gap:1.5rem 1.5rem;
            grid-template-columns:
         
            repeat(2,1fr);

            justify-content: center;
        }
    }

/*JR　会社選択*/
        .container-choose-jr
        {
            background-color:  ivory;
            border-style:solid;

            display: grid;
            grid-template-columns:
            repeat(2,1fr);

            align-items: center;
            justify-content: center;

            margin: 10px;
        }

/*デスクトップ版*/

@media(min-width:600px){
    .container-choose-area,.container-choose-jr
     {
    background-color:  ivory;
    border-style:solid;

    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 10px;

    align-items: center;
    justify-content: center;

    margin: 10px;
}}
        
/*会社形態選択*/
        .container-choose-category{
            background-color:  ivory;
            border-style:solid;

            display: grid;
            grid-template-columns: repeat(2,1fr);

            align-items: center;
            justify-content: center;

            margin: 10px;
        }


    @media(min-width:600px){
    .container-choose-category
     {
    background-color:  ivory;
    border-style:solid;

    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 10px;

    align-items: center;
    justify-content: center;

    margin: 10px;
}}



/*会社形態フレーム*/

.item-area-ote,.item-area-s-ote{
    border-width: medium;
    border-style: double;
    border-color: black;


    justify-content: center;
    align-items: center;

    margin: 10px;
    padding: 10px;

    word-break: keep-all;
}

.item-area-shitetsu,.item-area-3sec
,.item-area-subway,.item-area-streetcar,.item-area-monorail,.item-area-agt,
.item-area-ropeway,.item-area-cablecar{
    border-width: medium;
    border-style: solid;
    border-color: black;


    justify-content: center;
    align-items: center;

    margin: 10px;
    padding: 10px;

    word-break: keep-all;
}

@media(min-width:600px){

.item-area-ote,.item-area-s-ote{
    border-width: medium;
    border-style: double;
    border-color: black;


    display: grid;

    grid-template-columns: repeat(2,1fr);


    justify-content: center;
    align-items: center;

    margin: 10px;
    padding: 10px;

    word-break: keep-all;
}


.item-area-shitetsu,.item-area-3sec,
.item-area-streetcar,.item-area-subway,.item-area-monorail,.item-area-agt,
.item-area-ropeway,.item-area-cablecar{
    border-width: medium;
    border-style: solid;
    border-color: black;


    display: grid;

    grid-template-columns: repeat(2,1fr);

    justify-content: center;
    align-items: flex-start;


    margin: 10px;
    padding: 10px;

    word-break: keep-all;
}
}



/*地方選択*/
.region-frame{

    border-style:solid;
    border-color: black;

    justify-content: center;
    align-items: center;

    margin: 10px;
    padding: 10px;
}


/*アイテムへの指示*/
.item-area-jr,
.item-hokkaido-3sec,.item-hokkaido-subway,.item-hokkaido-streetcar,
.item-tohoku-shitetsu,.item-tohoku-3sec,.item-tohoku-subway,.item-tohoku-cablecar,
.item-kanto-ote,.item-kanto-shitetsu,.item-kanto-3sec,.item-kanto-subway,.item-kanto-streetcar,
.item-kanto-monorail,.item-kanto-cablecar,.item-kanto-agt,
.item-cyubu-ote,.item-cyubu-shitetsu,.item-cyubu-3sec,.item-cyubu-subway,.item-cyubu-streetcar,
.item-cyubu-ropeway,.item-cyubu-cablecar,
.item-kinki-ote,.item-kinki-s-ote,.item-kinki-shitetsu,.item-kinki-3sec,.item-kinki-subway,
.item-kinki-streetcar,.item-kinki-monorail,.item-kinki-ropeway,.item-kinki-cablecar,.item-kinki-agt,
.item-cyugoku-shitetsu,.item-cyugoku-3sec,.item-cyugoku-streetcar,.item-cyugoku-agt,
.item-shikoku-shitetsu,.item-shikoku-3sec,.item-shikoku-streetcar,.item-shikoku-cablecar,
.item-kyusyu-ote,.item-kyusyu-shitetsu,.item-kyusyu-3sec,.item-kyusyu-subway,.item-kyusyu-monorail,
.item-kyusyu-streetcar,.item-kyusyu-cablecar{

    margin: 10px;
    padding: 10px;

    align-items: center;
    justify-content: center;
}




/*画像*/
    /*JRグループ*/
        .jr-Hokkaido-logo,.jreast-logo,.jrcentral-logo,.jrwest-logo,
        .jrshikoku-logo,.jrkyusyu-logo,.jrflight-logo{
            width: 80px;
            height: 40px;
            align-items: center;
            justify-content: center;
        }

    /*北海道・第三セクター*/
        .donanisaribi-logo{
            width: 250px;
            height: 100px;
            justify-content: center;
        }

    /*北海道・地下鉄*/
        .sapporosubway-logo{
            width: 216px;
            height: 47px;
        }
    
    /*北海道・路面電車*/
    .hakodatestreetcar-logo,.sapporostreetcar-logo
       {width:255px;
        height:52px;}

    /*東北・私鉄*/
    .tsugarurailway-logo,.konanrailway-logo{
        width: 295px;
        height: 42px;
    }
    .fukushimakotsu-logo{
        width: 175px;
        height: 87px;
    }

    /*東北・第三セクター*/
    .aoimori-logo{
        width: 279px;
        height: 95px;
    }
    .hachinohe-rinkai-railway-logo,.abukuma-logo{
        width: 288px;
        height: 52px;
    }

    .igr-logo{
        width: 114px;
        height: 37px;
        margin: 10px;
    }

    .sanrikurailway-logo{
        background: orange;
        width: 215px;
        height: 56px;
    }

    .iwatekaihatsurailway-logo,.yamagatarailway-logo{
        width: 215px;
        height: 56px;
    }

    .akitanairiku-logo{
        width: 205px;
        margin: 10px;
    }

    .yurikogen-logo{
         width: 205px;
    }

    .sendaiairport-logo,.sendai-rinkai-railway-logo{
        width: 300px;
        height: 44px;
    }

    .aidurailway-logo{
        width: 200px;
        height: 50px;
    }

    .fukushima-rinkai-railway-logo{
        width: 250px;
        height: 55px;
    }

    /*東北・地下鉄*/
    .sendaisubway-logo{
        width: 250px;
        height: 91px;
    }

    /*東北・ケーブルカー*/
    .seikantonnel-logo{
        width: 250px;
        height: 82px;
    }

    /*関東・大手私鉄*/

    .keikyu-logo,.tokyu-logo,.keio-logo,.odakyu-logo,
    .seibu-logo{
        width:256px;
        height:120px;
    }

    /*関東・私鉄*/
    .zyoshinrailway-logo,.kantorailway-logo,.chichiburailway-logo,
    .hakonetozanrailway-logo,.kominatorailway-logo{
        width: 250px;
        height:120px;
    }

    .zyomorailway-logo{
        width: 250px;
        height:120px;
        background: black;
    }

    .cyoshirailway-logo{
        width:256px;
        height:60px;
    }

    /*関東・第三セクター*/
    .watetsu-logo,.yaganrailway-logo,.mokarailway-logo,
    .hitachinakakaihin-railway-logo,.kashimarinkairailway-logo,
    .rinkailine-logo,.utsunomiyalrt-logo{
        width:250px;
        height: 50px;
    }

    .isumirailway-logo{
        width:250px;
        height: 50px;
        background: yellow;
    }

    .keiyou-rinkai-railway-logo{
         width:250px;
        height: 50px;
        background:#0D659C
    }
    /*関東・路面電車*/
    .utsunomiyalrt-logo{
        width:250px;
        height: 50px;
    }

    /*関東・モノレール*/
    .tokyomonorail-logo,.chibatoshimonorail-logo,
    .maihamarizortline-logo,.syonanmonorail-logo{
        width:250px;
        height: 80px;
    }

    /*関東・ケーブルカー*/
    .tsukubasancable-logo,.hakonetozancable-logo{
        width:250px;
        height: 50px;
    }

    .mitaketozancable-logo{
        background:#009680;
    }

    .oyamacable-logo{
        width:250px;
        height: 100px;
    }

    /*関東・新交通システム*/
    .leoliner-logo,.yamaman-logo,
    .yurikamome-logo,.yokohamaseasideline-logo{
        width: 180px;
        height: 50px;
    }

    /*中部・大手私鉄*/
    .meitetsu-logo,.kintetsu-cyubu-logo{
        width: 175px;
        height: 80px;
    }

    /*中部・私鉄*/
    .uedarailway-logo,.toyamachihotetsudo-logo,.hokurikurailway-logo,
    .izuhakonerailway-logo,.ensyurailway-logo{
        width: 270px;
        height: 50px;
    }

    .gakunanrailway-logo,.sangirailway-logo{
        width: 270px;
        height: 80px;
    }

    /*中部・第三セクター*/
    .echigo-tokimeki-logo,.irishikawarailway-logo{
        width: 270px;
        height: 60px;
        margin: 10px;
    }

    .nototetsu-logo,.echizen-tetsudo-logo{
        width: 200px;
    }

    .aichikanjyorailway-logo,.aonamiline-logo{
        width: 200px;
    }

    .nagoya-rinkai-railway-logo,.kinura-rinkai-railway-logo,
    .tarumi-railway,.nagaragawaraolway-logo,
    .akechirailway-logo,.yororailway-logo,
    .yokkaichi-asunarrow-railway-logo,
    .iga-railway-logo{
        width: 200px;
        height: 60px;
    }

    /*中部・路面電車*/
    .manyosen-logo{
        width: 100px;
        height: 100px;
    }

    .chitetsustreetcar-logo{
        width: 270px;
        height: 100px;
    }

    /*中部・ケーブルカー*/
    .zyukkokutougepanoramacable-logo,
    .tateyamakurobealpenroot-logo{
        width: 250px;
        height: 70px;
    }

    /*関西・大手私鉄*/
    .keihan-logo{
    width:224px;
    height:65px;}

    .hankyu-logo{
    width:150px;
    height:65px;
    }

    .kintetsu-logo{
        width: 200px;
        height:65px;}

    /*関西・私鉄*/
    .kitakyu-logo,.omirailway-logo,
    .wakayamadentetsu-logo,.kisyurailway-logo,
    .shintetsu-logo{
        width: 250px;
        height: 50px;
    }

    .noseden-logo{
        width: 250px;
        height: 80px;
    }

    /*関西・第三セクター*/
    .shigarakirailway-logo,.tantetsu-logo{
        width: 250px;
        height: 50px;
    }
    .hojyorailway-logo{
        width: 250px;
        height: 50px;
        background:#260700;}

    /*関西・ロープウェイ*/
    .hachimanyamaropeway-logo{
        width: 250px;
        height: 50px;
    }

    /*関西・ケーブルカー*/
    .keihan-iwashimizuhachimangu-cable
   {
        width: 150px;
        height: 40px;
    }

    .kintetsu-nishishigicable-logo,.kintetsu-ikomacable-logo{
        width: 200px;
        height: 60px;
    }

     .rokkocable-logo,.mayacable-logo{
        width: 200px;
        height: 60px;
     }

     /*中国・私鉄*/
     .ichibatarailway-logo{
        width: 200px;
        height: 60px;
     }

     /*中国・第三セクター*/
     .ibara-railway-logo,.mizushima-rinkai-railway-logo,
     .wakasarailway-logo,.chizukyu-logo{
        width: 200px;
        height: 60px;
     }

     .nishikigawa-railway-logo{
        width: 250px;
        background:#1E3799;
    }

    /*中国・路面電車*/

    .okaden-logo{
        width: 250px;
        margin: 10px;
    }

    .hiroden-logo{
        width: 250px;
        background: #009944;
    }

    /*中国・新交通システム*/
    .astramline-logo{
        width: 250px;
    }

    /*四国・私鉄*/
    .kotoden-logo{
        width: 250px;
    }

    /*四国・第三セクター*/
    .asakaigan-railway-logo,.tosakuroshio-railway-logo{
        width: 250px;
    }

    /*四国・路面電車*/
    .tosaden-logo{
        width: 250px;
        height: 50px;
    }

    /*九州・私鉄*/
    .shimabararailway-logo{
        width: 250px;
    }

    /*九州・第三セクター*/
    .heichiku-logo{
        width: 200px;
    }
    .matsura-railway-logo{
        width: 250px;
    }


    .kumagawa-railway-logo,minamiaso-railway-logo{
        margin: 10px;
    }
    .hisatsuorangerailway-logo{
        width: 150px;
        height:100px;    
    }

    /*九州・路面電車*/
    .chikuhostreetcar-logo,.nagasakistreetcar-logo,
    .kumamotostreetcar-logo,.kagoshimastreetcar-logo{
        width: 250px;
        height: 50px;
    }

    /*九州・モノレール*/
    .kitakyusyumonorail-logo{
        width: 250px;
    }

    /*九州・ケーブルカー*/
    .beppurakutenchi-logo{
        width: 250px;
    }

/*矢印*/
.trainconpany-arrow{
    display: flex;
    justify-content: center;
}
.trainconpany-arrow-item{
    background: navy;
    margin: 10px;
    font-size: large;
}

.trainconpany-arrow-item a{
    color: white;
}