@charset "UTF-8";
@-ms-viewport{width:device-width}
body{
    margin:0;
    font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
}

/*ヘッダー*/
.header{
    background-color: white;
    padding: 20px 20px 5px 20px;
}
.header h1{
    margin: 0px 0px;
    font-size: 18px;
    line-height: 1;
}

.header h1 a{
    color: #0066ff;
    text-decoration-line: none;
}
.header .logo{
    margin: 0 5px 0 0;
    vertical-align: middle;
}

.header .companyName{
    display: inline-block;
    vertical-align: bottom;
}

/*背景色*/
.background{
    background-color: #E6F0FF;
    padding: 10px;
}

/*文字揃え*/
.box{
    margin: 10px;
}

/*会場名*/
.title{
    line-height: 2;
}
.title > h1{
    font-size: 25px;
    font-weight: normal;
    text-align: center;
    margin: 0 0 5px 0;
    background: linear-gradient(360deg, white,#E6F0FF 60%);
}
.title > p{
    color: red;
    font-weight: bold;
}
.information{
    background-color: white;
    border: 1px solid black;
    border-radius: 20px;
    padding: 10px 10px 10px 10px;
    margin: 10px 10px 20px 10px;
}
.information > h1{
    font-size: 20px;
    font-weight: normal;
    margin: 0 0 0 0;
}
.information > p{
    font-size: 20px;
    font-weight: bold;
    color: red;
    text-align: center;
    line-height: 1;
}
/*その他の会場の方*/
.toTopButton{
    display: block;
    padding: 10px 30px 10px 30px;
    background-color: #0066ff;
    color: white;
    font-size: 19px;
    text-decoration: none;
    text-align: center;
    margin: 10px 0 10px 0;
}

/*電車でお越しの方*/
.station > h1 {
    font-size: 25px;
    font-weight: normal;
    background: linear-gradient(360deg, white,#E6F0FF 60%);
}
.station > h3{
    font-size: 17px;
    font-weight: normal;
    margin-top: 0;
}
table{
    background-color: white;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 20px;
}
td{
    padding: 8px;
}
.map{
    max-width: 100%;
}

/*お車バイクでお越しの方*/
.car > h1 {
    font-size: 25px;
    font-weight: normal;
    background: linear-gradient(360deg, white,#E6F0FF 60%);
}
.car > p{
    background-color: white;
    padding: 20px 20px 20px 20px;
    border-radius: 20px;
    line-height: 2;
}

/*自転車でお越しの方*/
.bike > h1{
    font-size: 25px;
    font-weight: normal;
    background: linear-gradient(360deg, white,#E6F0FF 60%);
}
.bike > h3{
    font-size: 17px;
    font-weight: normal;
}
.bike > p{
    background-color: white;
    padding: 20px 20px 20px 20px;
    border-radius: 20px;
    line-height: 2;
}

/*Googleマップ*/
.googleMap > h1{
    font-size: 25px;
    font-weight: normal;
    background: linear-gradient(360deg, white,#E6F0FF 60%);
}
.googleMap > h3{
    font-size: 16px;
    font-weight: normal;
}
iframe{
    width: 100%;
    height: 200px;
}

/*フッター*/
.footer{
    padding: 20px;
    text-align: center;
}

.footer > p{
    margin: 0 0 3px 0;
    font-size: 12px;
    line-height: 1.4px;
}

/*小さいスマホでは文字を小さくする*/
@media(min-width:301px) and (max-width:364px){
    /*キャリア総研テストセンター*/
    .header h1{
        margin: 0;
        font-size: 16px;
        line-height: 1;
    }
    /*会場名*/
    .title > h1{
        font-size: 22px;
        margin: 0 0 5px 0;
    }
    /*電車でお越しの方*/
    .station > h1 {
        font-size: 19px;
        font-weight: bold;
    }
    .station > h3 {
        font-size: 16px;
        font-weight: normal;
    }
    /*お車でお越しの方*/
    .car > h1{
        font-size: 19px;
        font-weight: bold;
    }
    /*自転車でお越しの方*/
    .bike > h1{
        font-size: 19px;
        font-weight: bold;
    }
    .bike > h3{
        font-size: 16px;
        font-weight: normal;
    }
    /*Googleマップ*/
    .googleMap > h1{
        font-size: 20px;
        font-weight: bold;
    }
    .googleMap > h3{
        font-size: 16px;
        font-weight: normal;
    }
}

/*もっと小さいスマホでは文字をもっと小さくする*/
@media (max-width:300px) {
    /*キャリア総研テストセンター*/
    .header h1{
        margin: 0;
        font-size: 15px;
        line-height: 1;
    }
    /*会場へのアクセス*/
    .title > h1{
        font-size: 20px;
        font-weight: bold;
        margin: 0 0 5px 0;
    }
    /*注意*/
    .information > p{
        font-size: 15px;
        font-weight: bold;
        color: red;
        text-align: center;
        line-height: 1;
    }
    /*電車でお越しの方*/
    .station > h1 {
        font-size: 18px;
        font-weight: bold;
    }
    .station > h3 {
        font-size: 15px;
        font-weight: normal;
    }
    /*車・バイクでお越しの方*/
    .car > h1 {
        font-size: 18px;
        font-weight: bold;
    }
    /*自転車でお越しの方*/
    .bike > h1{
        font-size: 18px;
        font-weight: bold;
    }
    .bike > h3{
        font-size: 15px;
        font-weight: normal;
    }
    /*Googleマップ*/
    .googleMap > h1{
        font-size: 18px;
        font-weight: bold;
    }
    .googleMap > h3{
        font-size: 15px;
        font-weight: normal;
    }
    /*コピーライト*/
    .footer > p{
        margin: 0 0 3px 0;
        font-size: 10px;
        line-height: 1.4px;
    }
}



/*タブレットやデスクトップ表示時にスペースに余裕を持たせる、グーグルマップを高く表示する*/
@media(min-width:768px){
    .title > h1{
        font-size: 29px;
        font-weight: normal;
        text-align: center;
        margin: 0 0 5px 0;
        background: linear-gradient(360deg, white,#E6F0FF 60%);
    }
    /*注意*/
    .title > p{
        color: red;
        font-weight: bold;
        font-size: 18px;
        padding: 20px 0 20px 0;
    }
    /*ボタン*/
    .toTopButton{
        display: block;
        padding: 20px 30px 20px 30px;
        background-color: #0066ff;
        color: white;
        font-size: 19px;
        text-decoration: none;
        text-align: center;
        margin: 25px 0 25px 0;
    }
    /*駅から会場へのルート説明*/
    .station > h3{
        font-size: 18px;
        font-weight: normal;
        margin-top: 0;
    }
    table{
        font-size: 20px;
    }
    td{
        padding: 15px;
    }
    /*車・バイクでお越しの方への説明文*/
    .car > p{
        font-size: 20px;
        line-height: 2;
    }
    /*自転車でお越しの方への説明文*/
    .bike > p{
        font-size: 20px;
        line-height: 2;
    }
    /*グーグルマップ*/
    iframe{
        width: 100%;
        height:400px
    }
}
/*デスクトップ表示時に横幅を制限する*/
@media(min-width:1025px){
    body{
        background-color: 	#E6F0FF;
    }
    .contentFrame{
        width: 900px;
        margin-left: auto;
        margin-right: auto;
    }
    .toTopButton{
        display: block;
        padding: 20px 30px 20px 30px;
        background-color: #0066ff;
        color: white;
        font-size: 19px;
        text-decoration: none;
        text-align: center;
        margin: 25px 0 25px 0;
    }
}