@charset "utf-8";
/* CSS Document */

html {
    /* ベースのフォントサイズを10pxとする */
    font-size: 62.5%;
  -webkit-box-sizing: border-box;/*ボックスに立体感*/
  box-sizing: border-box;
}

.right{
	width: 320px;
	height: 240px;
        float:right;
}

.left{
	width: 320px;
	height: 240px;
       float:left;
}


.card-container{
    display:flex;
    max-width: 1800px;
    height: auto;
}

.card-img img{
    width:540px;
    height:auto;
}

.card-text{
    width:100%;
    margin: 20px;
}

.card-text h2{
    position:relative;
    bottom: -80px;
    text-align: center;
    color: #0067C0;
    font-family:  '游明朝体', 'Yu Mincho', YuMincho, 'Hiragino Mincho ProN', sans-serif;
    font-size: 2.6rem;/* calcサポート外をフォールバック */
    font-size: calc(2.4rem + ((1vw - 0.48rem) * 0.5556));/* viewportが480px以上1200px以下可変 */
    min-height: 0vw;/* Safari用バグフィックス */ 
}

.card-text p{
    position:relative;
    bottom: -80px;
    text-align: center;
    color: #FFFFFF;
    font-family:  '游明朝体', 'Yu Mincho', YuMincho, 'Hiragino Mincho ProN', sans-serif;
    font-size: 2.6rem;/* calcサポート外をフォールバック */
    font-size: calc(1.2rem + ((1vw - 0.48rem) * 0.5556));/* viewportが480px以上1200px以下可変 */
    min-height: 0vw;/* Safari用バグフィックス */ 
}



.top-banner2{
	display: flex;
	flex-wrap:wrap;
}

.top-banner2 li {
	width: calc(100%/2);/*←画像を横に4つ並べる場合*/
	padding:20px 5px;/*←画像の左右に5pxの余白を入れる場合*/
	box-sizing:border-box;
        list-style: none;
        margin-bottom: -100px;
}

.top-banner2 li img {
	max-width:100%; /*画像のはみだしを防ぐ*/
	height: auto; /*画像の縦横比を維持 */
}

.top-banner2 li img.space {
	max-width:100%; /*画像のはみだしを防ぐ*/
	height: auto; /*画像の縦横比を維持 */
        position:relative;
        top:-110px;
}


.top-banner{
	display: flex;
	flex-wrap:wrap;
}
.top-banner li {
	width: calc(100%/3);/*←画像を横に4つ並べる場合*/
	padding:0px 5px;/*←画像の左右に5pxの余白を入れる場合*/
	box-sizing:border-box;
        list-style: none;
        /*margin-bottom: -100px;*/
}
.top-banner li img {
	max-width:100%; /*画像のはみだしを防ぐ*/
	height: auto; /*画像の縦横比を維持 */
}

.top-banner li img.space {
	max-width:100%; /*画像のはみだしを防ぐ*/
	height: auto; /*画像の縦横比を維持 */
        position:relative;
        /*top:-110px;*/
}

.top-banner li p {
    padding:0 5px;
    /*white-space: nowrap;*/
    font-size: 1vw;
    text-align: center;
    color:#FFFFFF;
    position:relative;
    top:-70px;
}






@media screen and (max-width:640px) { 
.card-img img{
    width:200px;
    height:auto;
}

.card-text h2{
    bottom: 40px;

}

.card-text p{
    bottom: 40px;

}
.top-banner li{width: calc(100%/2); }
.top-banner li p {
        top: -20px;}
}


}