@charset "utf-8";

/* ==========================
  #flexbox
  #width
  #tablet
  #mobile
============================= */

body { line-height : 1.6; color : #333; }
/* h1, h2, h3, h4, h5, h6 { line-height : 1.4; } */

img     { max-width : 100%; }
figure{text-align:center;}
figcaption { color : gray; font-size : 0.8em;}

.tb { display : none !important; }
.sp { display : none !important; }
.center { text-align: center; }
.right { text-align: right; }
.left {text-align: left; }
.block  { display : block; }
.block_center  { margin-right : auto; margin-left : auto; }
.inline_block  {
  display : inline-block;
  white-space: nowrap;
}
.nowrap  { white-space: nowrap;}

.scroll-prevent {
    position: fixed;
    z-index: -1;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
}

.circle { border-radius: 50%;}

/* color */
.red { color : #f00;}
.yellow { color : #ff0;}
.blue { color : #00f;}

/* vertical */
.vertical_middle { vertical-align: middle; }

/* font */
.fbold    { font-weight : bold; }
.fnormal  { font-weight : normal; }

.big      { font-size : 1.2em; }
.morebig  { font-size : 1.5em; }

.fs17 { font-size : 1.7rem; }
.fs20 { font-size : 2.0rem; }
.fs28 { font-size : 2.8rem; }
.fs30 { font-size : 3.0rem; }
.fs38 { font-size : 3.8rem; }

/* flexbox */
.flex             { display : flex; }
.col2,.col3,.col4 { display : flex; }
.col2 > li,.col2 > div { width : 50%; }
.col3 > li,.col3 > div { width : calc(100%/3); }
.column           { flex-direction: column; }
.flex_wrap        { flex-wrap: wrap; }
.between          { justify-content: space-between; }
.justify_center   { justify-content: center; }
.align_center     { align-items: center; }
.align_end        { align-items :flex-end; }

/* table scroll */
.scroll { overflow: auto; }
.scroll::-webkit-scrollbar { height: 5px; }
.scroll::-webkit-scrollbar-track { background: #F1F1F1; }
.scroll::-webkit-scrollbar-thumb { background: #BCBCBC; }

/* width */
.w1-3 { width : calc(100%/3); }
.w20 { width : 20%; }
.w25 { width : 25%; }
.w30 { width : 30%; }
.w40 { width : 40%; }
.w50 { width : 50%; }
.w55 { width : 55%; }
.w60 { width : 60%; }
.w70 { width : 70%; }
.w80 { width : 80%; }
.w90 { width : 90%; }

/* margin */
.mt20 { margin-top : 20px !important; }
.mt25 { margin-top : 25px !important; }
.mt30 { margin-top : 30px !important; }
.mt35 { margin-top : 35px !important; }
.mt40 { margin-top : 40px; }
.mt45 { margin-top : 45px; }
.mt50 { margin-top : 50px; }
.mt55 { margin-top : 55px !important; }
.mt60 { margin-top : 60px !important; }
.mt70 { margin-top : 70px !important; }
.mt80 { margin-top : 80px; }
.mt100 { margin-top : 100px; }

.mr10 { margin-right : 10px; }
.mr20 { margin-right : 20px; }
.mr50 { margin-right : 50px; }

.ml10 { margin-left : 10px; }
.ml30 { margin-left : 30px; }
.ml45 { margin-left : 45px; }
.ml50 { margin-left : 50px; }
.ml55 { margin-left : 55px; }

.mb15 { margin-bottom : 15px !important; }
.mb20 { margin-bottom : 20px !important; }
.mb25 { margin-bottom : 25px !important; }
.mb30 { margin-bottom : 30px !important; }
.mb35 { margin-bottom : 35px !important; }
.mb50 { margin-bottom : 50px !important; }
.mb60 { margin-bottom : 60px !important; }
.mb90 { margin-bottom : 90px !important; }

.mt0 { margin-top : 0 !important;}
.mr0 { margin-right : 0 !important;}
.mb0 { margin-bottom : 0 !important;}
.ml0 { margin-left : 0 !important;}

.mt20p { margin-top : 20% !important; }

/* padding */
.pt40 { padding-top : 40px; }
.pt50 { padding-top : 50px !important; }
.pt60 { padding-top : 60px !important; }
.pt70 { padding-top : 70px; }
.pt80 { padding-top : 80px; }
.pt90 { padding-top : 90px; }

.pr10 { padding-right : 10px; }

.pl10 { padding-left : 10px; }
.pl25 { padding-left : 25px; }
.pl55 { padding-left : 55px; }

.pb35 { padding-bottom : 35px; }
.pb40 { padding-bottom : 40px; }
.pb65 { padding-bottom : 65px; }
.pb70 { padding-bottom : 70px; }

/* dl */
dl {
  display:flex;
  flex-wrap: wrap;
  /* border: 1px solid #ccc; */
  /* border-top: none; */
}
dt {
  /* background: #ddd; */
  width: 30%;
  /* padding: 10px; */
  box-sizing: border-box;
  /* border-top: 1px solid #ccc; */
}
dd {
  /* padding: 10px; */
  margin: 0;
  /* border-left: 1px solid #ccc; */
  /* border-top: 1px solid #ccc; */
  width: 70%;
  /* background: #fff; */
  box-sizing: border-box;
}

@media screen and (max-width: 560px){
  dl      { flex-flow: column nowrap; }
  dt, dd  { width: 100%; }
  dd      { border-left : none; }
}

/* ==========================
  tablet 780px未満
============================= */
@media screen and (max-width: 780px) {
  /* タブレット以下非表示 */
  .pc { display : none; }
  /* タブレット時表示 */
  .tb { display : block !important;}

  .col2,.col3,.col4{
    flex-direction: column;
  }
}
/* ==========================
  mobile 560px未満
============================= */
@media screen and (max-width: 559px){
  /* スマホ時表示 */
  .sp { display : block !important;}

  .w1-3,.w20,.w25,.w30,.w40,.w50,.w55,.w60,.w70,.w80,.w90 {
    width : 100%;
  }
}