elecommon.css

@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Lato:400,700);
@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);

/* CSS Document */

/* -----------------------------------------------
* reset
* ----------------------------------------------- */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, tr, th, td {
margin: 0;padding: 0;
border: 0;outline: 0;
font-size: 100%;
vertical-align: baseline;
}

ol, ul {list-style: none;}

img{vertical-align:bottom;}

.pc_only{display:block;}
.sp_only{display:none;}

/* -----------------------------------------------
* font_size
* ----------------------------------------------- */

body {
font-family: Lato, "Noto Sans JP", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;
line-height: 1.4;
color:#222;
font-size:15px;
}

/* tables*/

table {
border-collapse: collapse;
border-spacing: 0;
}

.color01{color:#E5494C;}
.color02{color:#E5A441;}
.color03{color:#64E549;}
.color04{color:#48E5E1;}
.color05{color:#49B1E5;}

.bg_color01{background-color:#E5494C;}
.bg_color02{background-color:#E5A441;}
.bg_color03{background-color:#64E549;}
.bg_color04{background-color:#48E5E1;}
.bg_color05{background-color:#49B1E5;}

/* -----------------------------------------------
* font_size
* ----------------------------------------------- */

.font14 {font-size:14px;}
.font15 {font-size:15px;}
.font16 {font-size:16px;}
.font17 {font-size:17px;}
.font18 {font-size:18px;}
.font19 {font-size:19px;}
.font20 {font-size:20px;}
.font25 {font-size:25px;}
.font30 {font-size:30px;}
.font35 {font-size:35px;}
.font50 {font-size:50px;}

.bold{font-weight:bold;}

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

/* ===================
margin
===================== */

.mt00 {margin-top:0;}
.mt05 {margin-top:5px;}
.mt10 {margin-top:10px;}
.mt15 {margin-top:15px;}
.mt20 {margin-top:20px;}
.mt25 {margin-top:25px;}
.mt30 {margin-top:30px;}
.mt35 {margin-top:35px;}
.mt40 {margin-top:40px;}
.mt45 {margin-top:45px;}
.mt50 {margin-top:50px;}
.mt55 {margin-top:55px;}

.mb00 {margin-bottom:0px;}
.mb03 {margin-bottom:3px;}
.mb05 {margin-bottom:5px;}
.mb10 {margin-bottom:10px;}
.mb15 {margin-bottom:15px;}
.mb20 {margin-bottom:20px;}
.mb25 {margin-bottom:25px;}
.mb30 {margin-bottom:30px;}
.mb35 {margin-bottom:35px;}
.mb40 {margin-bottom:40px;}
.mb45 {margin-bottom:45px;}
.mb50 {margin-bottom:50px;}
.mb55 {margin-bottom:55px;}

.mr00 {margin-right:0;}
.mr05 {margin-right:5px;}
.mr10 {margin-right:10px;}
.mr15 {margin-right:15px;}
.mr20 {margin-right:20px;}
.mr25 {margin-right:25px;}
.mr30 {margin-right:30px;}
.mr35 {margin-right:35px;}
.mr40 {margin-right:40px;}
.mr45 {margin-right:45px;}
.mr50 {margin-right:50px;}
.mr55 {margin-right:55px;}

.ml00 {margin-left:0;}
.ml03 {margin-left:3px;}
.ml05 {margin-left:5px;}
.ml10 {margin-left:10px;}
.ml15 {margin-left:15px;}
.ml20 {margin-left:20px;}
.ml25 {margin-left:25px;}
.ml30 {margin-left:30px;}
.ml35 {margin-left:35px;}
.ml40 {margin-left:40px;}
.ml45 {margin-left:45px;}
.ml50 {margin-left:50px;}
.ml55 {margin-left:55px;}

/* ==================
padding
=================== */

/* 00 */

.p00  {padding:0;}
.pr00 {padding-right:0;}
.pb00 {padding-bottom:0;}
.pl00 {padding-left:0;}

/* all */

.p03 {padding:3px;}
.p05 {padding:5px;}
.p10 {padding:10px;}
.p15 {padding:15px;}
.p20 {padding:20px;}
.p25 {padding:25px;}
.p30 {padding:30px;}
.p35 {padding:35px;}
.p40 {padding:40px;}
.p45 {padding:45px;}
.p50 {padding:50px;}
.p55 {padding:55px;}

/* top */

.pt03 {padding-top:3px;}
.pt05 {padding-top:5px;}
.pt10 {padding-top:10px;}
.pt15 {padding-top:15px;}
.pt20 {padding-top:20px;}
.pt25 {padding-top:25px;}
.pt30 {padding-top:30px;}
.pt35 {padding-top:35px;}
.pt40 {padding-top:40px;}
.pt45 {padding-top:45px;}
.pt50 {padding-top:50px;}
.pt55 {padding-top:55px;}

/* right */

.pr03 {padding-right:3px;}
.pr05 {padding-right:5px;}
.pr10 {padding-right:10px;}
.pr15 {padding-right:15px;}
.pr20 {padding-right:20px;}
.pr25 {padding-right:25px;}
.pr30 {padding-right:30px;}
.pr35 {padding-right:35px;}
.pr40 {padding-right:40px;}
.pr45 {padding-right:45px;}
.pr50 {padding-right:50px;}
.pr55 {padding-right:55px;}

/* bottom */

.pb03 {padding-bottom:3px;}
.pb05 {padding-bottom:5px;}
.pb10 {padding-bottom:10px;}
.pb15 {padding-bottom:15px;}
.pb20 {padding-bottom:20px;}
.pb25 {padding-bottom:25px;}
.pb30 {padding-bottom:30px;}
.pb35 {padding-bottom:35px;}
.pb40 {padding-bottom:40px;}
.pb45 {padding-bottom:45px;}
.pb50 {padding-bottom:50px;}
.pb55 {padding-bottom:55px;}

/* left */

.pl03 {padding-left:3px;}
.pl05 {padding-left:5px;}
.pl10 {padding-left:10px;}
.pl15 {padding-left:15px;}
.pl20 {padding-left:20px;}
.pl25 {padding-left:25px;}
.pl30 {padding-left:30px;}
.pl35 {padding-left:35px;}
.pl40 {padding-left:40px;}
.pl45 {padding-left:45px;}
.pl50 {padding-left:50px;}
.pl55 {padding-left:55px;}

/* ==================
align
================== */

.text_left    {text-align:left;}
.text_right  {text-align:right;}
.text_center{text-align:center;}

.text_white{color:#FFF;}

/* ==================
float
================== */

.float_left {float:left;}
.float_right{float:right;}

.flexbox {
display:-webkit-box;/*--- Androidブラウザ用 ---*/
display:-ms-flexbox;/*--- IE10 ---*/
display: -webkit-flex;/*--- safari(PC)用 ---*/
display:flex;
-webkit-box-align:stretch;/*--- Androidブラウザ用 ---*/
-ms-flex-align:stretch;/*--- IE10 ---*/
-webkit-align-items:stretch;/*--- safari(PC)用 ---*/
align-items:stretch;
justify-content: space-between;
}

.clear {clear:both;}

/* ==================
media query
================== */

@media all and (max-width: 680px) {

img{max-width:100%;}

.pc_only{display:none;}
.sp_only{display:block;}

.contactform { margin: 0 -10px; }
.contactform th,
.contactform td{
    width: 100%;
    display: block;
    border-top: none;
    }
.contactform tr:first-child th { border-top: 1px solid #ddd; }

input, select, textarea{
width:100% !important;
}

.float_left {float:none !important;}
.float_right{float:none !important;}

.flexbox {
display:block !important;
}

.flexbox li{
width:100% !important;
}

}