base.less | ロゼットリボン専門店|胸章リボン・アワードリボン・リボン徽章・記章・式典用リボン・リボンバラ・来賓リボン・表彰リボン・式典リボン・賞リボン

base.less | ロゼットリボン専門店|胸章リボン・アワードリボン・リボン徽章・記章・式典用リボン・リボンバラ・来賓リボン・表彰リボン・式典リボン・賞リボン

新規会員登録で200pt GET
ゲストさん 新規登録
お気軽にご相談ください!
お問い合わせフォーム
052-725-8288

base.less

■デザイン参考
テキストはどんどん長くしても、それに対応して、幅も大きくなる
小さくもなるよ。1カラムのセンターボックスのデザインに利用
モバイルは改行しないとかは各自設定するか 使いやすいようにね。

 

////////////////////////////////
//D-Markingのオリジナルベース
////////////////////////////////

//スタイルを入れ替える前にリセットするcss
.reset{
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
    line-height:1;
    font-weight:bold;
    font-style:normal;
    .border-radius( 0px ) ;
    color: inherit;
    //text-decoration:none;
    //display:block;    
}



////////////////////////////////PC&モバイル分岐////////////////////////////////

.mob_br{display: none}//モバイルのみ改行するbr
.pc_none{display: none}// PCでは表示させない
.pc_none2{display:none}

@media screen and (max-width: 736px){
    .mob_br{display: inline-block}
    .pc_none{display: inherit}
    .pc_none2{display: inline}
    
    .mob_none,.mob_non,.no_br{ display: none}//モバイルでは表示させない
    
    
    
    
}//@media screen and (max-width: 736px)



.pc_br_div{br{}}//////////////////////////この中の改行はモバイルではされない
@media screen and (max-width: 736px){
    
.pc_br_div{br{ display: none;}}	
}
////////////////////////////////////////////////////////////////////////


////////////////////////////////PC&ノートモバイル分岐例////////////////////////////////
//3つのブロックを作成して、それぞれを表示させる
//pc
p.pc_bio{display: block;}
p.note_bio{display: none;}
p.mob_bio{display: none;}


@media screen and (max-width: 736px) {
//モバイル	
p.pc_bio {display: none;}	
p.note_bio{display: none;}
p.mob_bio {display: block;}	
    
}

@media screen and (max-height: 900px) and (min-width: 737px) {
   //ノート 幅はモバイル以上だが、
    // 高さが900px以下の場合 
    
    .top_prof p.pc_bio {display: none;}	
    .top_prof p.note_bio{display: block;}
    .top_prof p.mob_bio {display: none;}	
}


////////////////////////////////D-Marking 独自クラス//////////////////////////////

////////////////////////////////イメージ////////////////////////////////
a img:hover{
    opacity:0.7;
filter: alpha(opacity=70);        //ie lt 8
-ms-filter: "alpha(opacity=70)";  //ie 8
-moz-opacity:0.7;                 //FF lt 1.5, Netscape
-khtml-opacity: 0.7;              //Safari 1.x 
}
a:hover img{
    
    opacity:0.7;
filter: alpha(opacity=70);        // ie lt 8 
-ms-filter: "alpha(opacity=70)";  // ie 8 
-moz-opacity:0.7;                 // FF lt 1.5, Netscape 
-khtml-opacity: 0.7;              // Safari 1.x 
}
//透明化させない
a:hover img.no_dhover,#img_box2 img{
opacity:1;
filter: alpha(opacity=100);        // ie lt 8 
-ms-filter: "alpha(opacity=100)";  // ie 8 
-moz-opacity:1;                 // FF lt 1.5, Netscape 
-khtml-opacity: 1;              // Safari 1.x
    }
//透明化少し
a:hover img.no_hover2 {
opacity:0.9;
filter: alpha(opacity=90);        // ie lt 8 
-ms-filter: "alpha(opacity=90)";  // ie 8 
-moz-opacity:0.9;                 // FF lt 1.5, Netscape 
-khtml-opacity: 0.9;              // Safari 1.x 
    }
    }//@media screen 737px 以上はこれ  


.maru_img{.border-radius(50%)}


////////////////////////////////フォント////////////////////////////////
.mincho{
    font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN","HG明朝E","MS P明朝","MS 明朝",serif;
}

.border{ border:solid #ccc 1px;}



.tel_font{font-family: 'Roboto Condensed', sans-serif;}
.day_font{font-family: 'Fjalla One', sans-serif;}

.sub_font{ 
//font-family: 'Crimson Text', serif;
//font-family: 'Teko', sans-serif;
//font-family: 'Coda', cursive;
//font-family: 'Titillium Web', sans-serif; 
//font-family: 'Caveat Brush', cursive;
    font-family: 'Kaushan Script', cursive;
}



////////////////////////////////フロート////////////////////////////////
//site0より
///*フロート解除用*/
.clearfix:after,#d_contents_in:after, .tax_top_menu:after{
    content: '';
    display: block;
    clear: both;
}
.clearfix,#d_contents_in {
    zoom: 1; /* for IE6/7 */
}


.img_right{
    float: right;
    margin-left: 15px;
    margin-bottom: 15px;
}

.img_left{
    float: left;
    margin-right: 15px;
    margin-bottom: 15px;
}


.img_waku{
    padding: 5px;
    border: 1px solid #CCC;

}


@media screen and (max-width: 736px) {
    
    .img_right,.img_left{float: none; margin-left: auto; margin-right:auto;
        text-align: center;
    }
    
    //.img_waku{width: 100%!important; margin-left: 0px; margin-right: 0px; img{width: 100%; height: auto;}}
}




/////////////////////////////////*角とり*/////////////////////////////////

.img_kado_ue{
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;

-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;

border-top-left-radius: 5px;
border-top-right-radius: 5px;}

.kado10{.border-radius(10px)}


/////////////////////////////////*装飾*/////////////////////////////////
/*--------------------------------
簡易CSS
---------------------------------*/
.dbold{
    font-weight: bold;
}



.dred{
    color: #F00;
}

.dblue{
    color: #00F;
}
.dsky{
    color: #06F;
}

.dgreen{
    color: #3C0;
}

///ここまで


//太線
.dbold,.d_bold{font-weight: bold;}

//戻し 強制力があります。 スタイルに組み込まず、クラスで後付てください。 class="adb d_normal"
.d_normal,.dnormal, .f_normal, .fnormal{font-weight: normal!important;}

//線囲いBOX
.border_box{padding: 12px; border: solid 1px #ccc;}
.border_boxa{padding: 12px; border: solid 1px #333;}

.border_box1{padding: 24px; border: solid 1px #ccc;}

.border_box2{padding: 24px; border: solid 2px #ccc;}

/////////////////////////////////*リンク*/////////////////////////////////
//リンクテクストカラー

.link_color{color:@link_color!important}
.link_color:hover{color:@link_color; text-decoration: underline;}

.link_color_under{color:@link_color; text-decoration: underline;}
.link_color_under:hover{color:@link_color; text-decoration: none;}




/////////////////////////////////*リスト*/////////////////////////////////

//削除したリストスタイルを元に戻すクラス

.list li{list-style-type: disc;
    margin-left: 1em; margin-bottom: 12px; font-size: 110%;}

.list0 li{list-style-type: disc;
    margin-left: 1em; margin-bottom: 12px; }


//リストの入った画像とリストボックス ??未検証??
//bodyでポイントアップ上書き
body .list_box{
    padding: 24px; 
    
    //フロート時 リストのマージンと相殺されるため倍

    .img_box{margin-left: 44px;}
    .img_box_left{margin-right: 44px;}


@media screen and (max-width: 736px){
//モバイルは0
        .img_box{margin-left: 0px;}
        .img_box_left{margin-right: 0px;}

    
}//@media screen and (max-width: 736px)
    
    
}


////////////////////////////////D-Marking オリジナルリセット?//////////////////////////////
.test_icon{font-size:100% }


//文字下線 黄色
.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%)}


//コンタクトフォーム 送信完了ページの場合
//.thanks_ari{
//.wpcf7-mail-sent-ok{display: none!important}
//	}



//センターイメージ

.center{text-align: center; img{max-width: 100%;}}

.pc_center{ text-align: center; }

//インラインblock要素
.box_center{margin-left: auto; margin-right: auto; display: block;
}


@media screen and (max-width: 736px){
    
.pc_center{ text-align: left; }
}//@media screen and (max-width: 736px)

 

■デザイン参考
テキストはどんどん長くしても、それに対応して、幅も大きくなる
小さくもなるよ。1カラムのセンターボックスのデザインに利用
モバイルは改行しないとかは各自設定するか 使いやすいようにね。