0 .li_p {
text-indent: -1em;
margin-left: 1em;
}
・本文でリストのような振る舞い
スクロール禁止 class no_scroll no_sc
//////////////////////////フレックスボックス基本//////////////////////////
//*このフレックスはノーマルフレックス*/
.frex_nomal,.flex_nomal{
-js-display: flex;
display:-webkit-box;
display:-moz-box;
display:-ms-box;
display:-webkit-flexbox;
display:-moz-flexbox;
display:-ms-flexbox;
display:-webkit-flex;
display:-moz-flex;
display:-ms-flex;
display:flex;
}
//*このフレックスは一般的な実用フレックス*/ 折り返す
.frex,.flex{
-js-display: flex;
display:-webkit-box;
display:-moz-box;
display:-ms-box;
display:-webkit-flexbox;
display:-moz-flexbox;
display:-ms-flexbox;
display:-webkit-flex;
display:-moz-flex;
display:-ms-flex;
display:flex;
-webkit-box-lines:multiple;
-moz-box-lines:multiple;
-webkit-flex-wrap:wrap;
-moz-flex-wrap:wrap;
-ms-flex-wrap:wrap;
flex-wrap:wrap;
}
.frex_box,.flex_box{ width:100%;
.frex;
justify-content: flex-start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
-webkit-box-pack: start;
}
//*高さ中心揃え*/
.flex_high,.flex_height{ .flex_nomal;
//*justify-content: center;*/
align-items: center;
-webkit-align-items: center;
-ms-flex-align: center;
-webkit-box-align: center;
}
//*高さ中心揃え 折り返す*/
.flex_high2,.flex_high_br{ .frex;
//*justify-content: center;*/
align-items: center;
-webkit-align-items: center;
-ms-flex-align: center;
-webkit-box-align: center;}
//*高さ中心揃え 折り返す コンテンツ高さいっぱい*/
.flex_high3,.flex_high_br2{ .frex;
//*justify-content: center;*/
align-items: stretch;
-webkit-align-items: stretch;
-ms-flex-align: stretch;
-webkit-box-align: stretch;}
//*高さ下揃え*/
.flex_low{ .frex_nomal;
//*justify-content: center;*/
align-items: flex-end;
-webkit-align-items: flex-end;
-ms-flex-align: flex-end;
-webkit-box-align: flex-end}
//*高さ下揃え 折り返す*/
.flex_low2,.flex_low_br{ .frex;
//*justify-content: center;*/
align-items: flex-end;
-webkit-align-items: flex-end;
-ms-flex-align: flex-end;
-webkit-box-align: flex-end}
//中央揃え
.flex_center {
-webkit-justify-content: center; /* Safari etc. */
-ms-justify-content : center; /* IE10 */
justify-content : center;
}
//右寄せにしたい場合追加
.right_flex {
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
}
//左寄せ デフォルトに戻したい場合
.left_flex{ -webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
}
/////////ぬるっち原型 ここでないとだめ？？@importの下に入れたい////
//ゆっくり変化
.transition {transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;}
.transition2 {transition: all 1.3s ease;
-webkit-transition: all 1.3s ease;
-moz-transition: all 1.3s ease;
-o-transition: all 1.3s ease;}
.transition3 {transition: all 0.03s ease;
-webkit-transition: all 0.03s ease;
-moz-transition: all 0.03s ease;
-o-transition: all 0.03s ease;}
//角丸 .border-radius(50%) など*/
.border-radius( @radius: 3px ) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}
///////////////* 透明 *//////////////
.opacity(@opacity) {
@mfopacity: @opacity*100;
@fopacity: "alpha(opacity=@{mfopacity})";
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=@{mfopacity})";
filter: ~"@{fopacity}";
-webkit-opacity: @opacity;
-moz-opacity: @opacity;
opacity: @opacity;
}
///////////////* 影 *//////////////
.box-shadow (@x: 0px, @y: 3px, @blur: 5px, @alpha: 0.5) {
-webkit-box-shadow: @x @y @blur rgba(0, 0, 0, @alpha);
-moz-box-shadow: @x @y @blur rgba(0, 0, 0, @alpha);
box-shadow: @x @y @blur rgba(0, 0, 0, @alpha);
}
.text-shadow (@string: 0 1px 3px rgba(0, 0, 0, 0.25)) {
text-shadow: @string;
}
.text-shadow2 (@string: 0 1px 3px rgba(0, 0, 0, 0.5)) {
text-shadow: @string;
}
.text-shadow3 (@string: 0 3px 3px rgba(0, 0, 0, 1)) {
text-shadow: @string;
}
.text-shadow4 (@string: 0 2px 3px rgba(0, 0, 0, 0.5)) {
text-shadow: @string;
}
.text-shadow_w (@string: 0 1px 3px rgba(255,252,252,0.50)) {
text-shadow: @string;
}
.text-shadow_w2 (@string: 0 1px 3px rgba(255,252,252,0.80)) {
text-shadow: @string;
}
.text-shadow_w3 (@string: 0 3px 3px rgba(255,252,252,1)) {
text-shadow: @string;
}
//ホバー画像アップ 初期設定
//丸画像は101%をいれない
.hover_big_img_maru{
transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
/*これを書かないと画像がちらつく*/
-webkit-backface-visibility:hidden;
backface-visibility:hidden;
}
.hover_big_img{
.hover_big_img_maru;
max-width: 101%!important;
}
//かこみ要素をホバーで大きく
.big_img_box:hover .hover_big_img,
.big_img_box_maru:hover .hover_big_img_maru
{
-webkit-transform: scale(1.03);
-moz-transform: scale(1.03);
-o-transform: scale(1.03);
-ms-transform: scale(1.03);
transform: scale(1.03);
}
//画像はみ出たら切る
.big_img_box{overflow: hidden;}
//文字下線 黄色
.pickup_span,
.puckup_sapn{background: linear-gradient(transparent 60%, rgba(255,241,144,1.00) 50%);}
.pickup_span50,
.puckup_sapn50{ background:linear-gradient(transparent 60%, rgba(255,241,144,0.50) 50%)}
//文字下線 クレー
.pickup_span_gray,
.puckup_sapn_gray{background: linear-gradient(transparent 60%, #e4e4e4 50%);}
//サイトメインカラー仕様
.pickup_span_d,
.puckup_sapn_d{background: linear-gradient(transparent 60%, @site_color_pastel3 50%);}
.puckup_sapn_d { background:linear-gradient(transparent 60%, rgba(99, 242, 199, 0.5) 50%)}
////ピックアップスパンをクライアント毎に設定、.puckup_sapn_dを上書き //
.this_span1{background:linear-gradient(transparent 厚み, rgba(99, 242, 199, 元の透明度) グラデどれだけ効かすか); }
.this_span1{background:linear-gradient(transparent 50%, rgba(0, 231, 243,0.50) 50%); } .this_span2{background:linear-gradient(transparent 60%, rgba(99, 242, 199, 0.5) 50%); }
.this_span3{background:linear-gradient(transparent 60%, rgba(99, 242, 199, 0.5) 50%); }
////テキストシャドウをクライアント毎に設定 クラスに追加 //
.text-shadow (右px 下px ぼかしpx rgba(0, 0, 0, 透明度)
.this_shadow1{ .text-shadow (1px 1px 3px rgba(0, 0, 0, 0.8))}
.this_shadow2{ .text-shadow (1px 1px 3px rgba(0, 0, 0, 0.8))}
.this_shadow3{ .text-shadow (1px 1px 3px rgba(0, 0, 0, 0.8))}
