/*
デスクトップ：981px以上のスクリーンサイズ
タブレット：980px〜768pxスクリーンサイズ
モバイル：767px以下のスクリーンサイズ
*/

/*□□□□□□□□□□□□□□□□□□□□□□□□□□□□
ヘッドのメニューなど、上下中央にしたい場合は
行設定のデザイン→「列の高さを均等割付」を「はい」にするのと
メニューがある列の設定→詳細→カスタムCSSのモジュール要素→メイン要素に以下を追加
margin:auto;
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/


/*□□□□□□□□□□□□□□□□□□□□□□□□□□□□
ここからモバイルで幅が狭い問題の修正

モバイルで幅が小さくなりすぎるため追加、全幅の見出しなど使う可能性があるために100%。そうでなければ
.et_pb_row{padding-left:10px!important;padding-right:10px!important;}
のみを追加する
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
@media screen and (max-width:980px){
.et_pb_row{width:100%!important;}
.container{width:100%;}
}
/*□□□□□□□□□□□□□□□□□□□□□□□□□□□□
タブレット以下で両脇に余白が欲しい【セクション】などで【class】を追加
mxn_org_marLR　←専門セクションのサイドバーのモジュールに追加する（カンマは要らない )
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
@media screen and (max-width:980px){
.mxn_org_padLR{padding-left:10px !important;padding-right:10px !important;}
.mxn_org_marLR{margin-left:10px !important;margin-right:10px !important;}
}
/*□□□□□□□□□□□□□□□□□□□□□□□□□□□□
常時左右に１０pxのpadding
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
.mxn_org_padLRall{padding-left:10px !important;padding-right:10px !important;}

/*□□□□□□□□□□□□□□□□□□□□□□□□□□□□
タブレット以下でサイドバーが下に行った際に余白が無くなるために追加
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
@media screen and (max-width:980px){
#sidebar{padding-left:10px !important; padding-right:10px !important;}
}

/*□□□□□□□□□□□□□□□□□□□□□□□□□□□□
スマホ上で列を自由に並びかえる方法
行のカスタムクラスIDに　.mxn_custom_row　をいれる
列に　mxn_mobile_order1～4　を並べたい順番にいれる
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
@media all and (max-width: 980px) {
.mxn_custom_row {display: -webkit-box;display: -moz-box;display: -ms-flexbox;display: -webkit-flex;display: flex;-webkit-flex-wrap: wrap; /* Safari 6.1+ */flex-wrap: wrap;}
/*** カスタムCSSクラスで、デスクトップ以外の列のオーダーを決定 ***/
.mxn_mobile_order1 {-webkit-order: 1;order: 1;}
.mxn_mobile_order2 {-webkit-order: 2;order: 2;}
.mxn_mobile_order3 {-webkit-order: 3;order: 3;}
.mxn_mobile_order4 {-webkit-order: 4;order: 4;}


/*□□□□□□□□□□□□□□□□□□□□□□□□□□□□
タブレットで３カラム、スマホで２カラム保持、行のCSSIDとクラスに　mxn_org_3_2cols　を追加
タブレットでもスマホでも、２カラム保持の場合は、行のCSSIDとクラスに　mxn_org_2cols　を追加
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

@media only screen and (max-width: 980px) {
.mxn_org_3_2cols .et_pb_column {width: 29% !important;}  
}

@media only screen and (max-width: 768px) {
.mxn_org_3_2cols .et_pb_column {width: 50% !important;}  
}

@media only screen and (max-width: 980px) {
.mxn_org_2cols .et_pb_column {width: 50% !important;margin-bottom:0 !important;}  
}