@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%);}

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

.p1212{width: 126px;height: 126px;}
.p2222{width: 220px;height: 220px;}
.p2416{width: 240px;height: 160px;}

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

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

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

.f5340{width: 534px;height: 400px;}
/*.about_f1{width: 330px;height: 330px;}*/


@media(max-width:834px){


    .top .p2416{width: 100%; height: 60vw;}
    .arrowshoot .p2416{width: 100%; height: 30vw;}
    .lineup.list .p2416{width: 100%; height: 60vw;}
    .order .p2416{width: 100%; height: 30vw;}
    .news.info .p1212{width: 22vw;height: 22vw;}
    .lineup.info .p1212{width: 22vw;height: 22vw;}
    
    .news.list .p2222{width: 100%;height: calc(100vw - 30px);}
    .news.info .f5340{width: calc(100vw - 30px );height: 70vw;}
    .lineup.info .f5340{width: calc(100vw - 30px );height: 70vw;}

}

/*work_info.php*/
/*.f1{width: 535px;height: 400px;}*/
/*.f2{width: 200px;height: 520px;margin:0 auto;margin-top:50px;}*/