@charset "UTF-8";

/*=====画像リサイズ(表示領域一杯版)=====*/

/*
リサイズjsで共通で使うクラスです
リサイズしたいものにこのクラスを必ずつけます
親要素になります
*/
.photo{overflow:hidden;position:relative;}

/*中のimgは基本横幅一杯高さautoで、親要素に対して上下左右中央で表示させます*/
.photo img{width:100%;height:auto;position:absolute;top:50%;left:50%;transform: translate(-50%,-50%);}

/*どの幅・高さで使うかを個別で指定できます(マージン削除して大丈夫です)*/

.top .p1{width:260px;height:200px;}
.performance .p1{width:260px;height:200px;}
.performance.info .p2{width:150px;height:150px;}

@media(max-width:834px){
    .top .p1{width:100%;}
    .performance .p1{width:100%;height:200px;}
    .performance.info .p1{width:100%;height:200px;}
    .performance.info .p2{width:72px;height:72px;}
}


/*=====画像リサイズ(表示領域フィット版)=====*/

/*
リサイズ領域の中で画像を全体表示させます
背景色を入れたりして使っています
上下中央に寄せるためflexを使用します
flexが使えないサイトのときはお声掛けください
*/
.fit{display:flex;justify-content: center;align-items: center;}

/*どの幅・高さで使うかを個別で指定できます(マージン削除して大丈夫です)*/

/*.f1{width: 200px;height: 520px;margin:0 auto;margin-top:50px;}*/
.performance.info .f1{width:700px;height:400px;}


@media(max-width:834px){
    .performance.info .f1{width:100%;height:192px;}
}