@charset "UTF-8";
/** PC/スマホ css */
/** version 20.12.23 */

/*
今後は↓みたいに作ったほうがいいかも
@media screen and (max-width: 449px) { スマホ }
@media screen and (max-width: 1366px) and (min-width: 450px) { スマホ以上ノート以下 }
「iPhone 5s 320px」「iPhone 375px」「iPhonePlus 414px」
 320:スマホ
 375:スマホ
 4xx:スマホ
 768:タブレット
1024:タブレット
1366:ノート
1920:デスクトップ

基本marginは「0」でpaddingで調整したほうがレスポンシブ対応しやすそう
田のように隙間なしで作って
1つずつのパーツは回のように必ず内枠をつける
外枠と内枠の差をパーツずつの隙間に使う
*/
/*
 縦
 5se   568px
 6/7/8 667px
 x     812px
*/

/*
orientation: portrait 縦長
orientation: landscape 横長
*/
/* 縦長≒スマホ限定スタイル */
@media screen and (orientation: portrait) {
 .pc-only { display: none; }
 .modal-body section.content { height: 97vh; overflow: auto; }

 /* スマホ横向き推奨 */
 .sp-widthwrn { display: block; }
 .sp-widthwrn:after { content: "横向きでの利用をおすすめします。"; margin-left: 7px; }
 .sp-widthwrn i.fa-redo { transform: rotate(10deg); -moz-transform: rotate(10deg); -webkit-transform: rotate(10deg); position: relative; left: 2px; top: -4px; font-size: 80%; }
 .sp-widthwrn i.fa-mobile-alt { transform: rotate(60deg); -moz-transform: rotate(60deg); -webkit-transform: rotate(60deg); }
}

/* 横長≒PC限定スタイル */
@media screen and (orientation: landscape) {
 .sp-widthwrn { display: none; }
/*  .content { min-width: 1366px; } */
 body.modal-body .content { min-width: unset; }
}

html.pc .sp-only, html.sp .cp-only { display: none; }