@charset "UTF-8";

/* ========================================================
    
    パネル要素 ★組み合わせる
   
   ======================================================== */
/* 画像要素を載せるパネル */
.imagepanel {
  position:relative;
}
.imagepanel > img,
.imagepanel > a > img {
  width:100%;
  height:auto;
}

/* 背景に画像を敷くパネル */
.bgpanel {
  position:relative;
  background-size:cover !important;
}

.bgpanel-inner{
  position:relative;
  margin: 0 auto;
}

/* ========================================================
    
    幅（リキッドレイアウト）★組み合わせる
   
   ======================================================== */
.full {
  width:100%;
}
.half {
  width:50%;
}
.w5pct{ width:5% }
.w10pct{ width:10% }
.w15pct{ width:15% }
.w20pct{ width:20% }
.w25pct{ width:25% }
.w30pct{ width:30% }
.w33pct{ width:33.33333% }
.w40pct{ width:40% }
.w45pct{ width:45% }
.w46pct{ width:46% }
.w47pct{ width:47% }
.w48pct{ width:48% }
.w49pct{ width:49% }
.w50pct{ width:50% }
.w55pct{ width:55% }
.w60pct{ width:60% }
.w65pct{ width:65% }
.w66pct{ width:66.66666% }
.w70pct{ width:70% }
.w75pct{ width:75% }
.w80pct{ width:80% }
.w85pct{ width:85% }
.w90pct{ width:90% }
.w95pct{ width:95% }
.w100pct{ width:100% }


@media screen and (max-width: 768px) {
.sp5pct{ width:5% }
.sp10pct{ width:10% }
.sp15pct{ width:15% }
.sp20pct{ width:20% }
.sp25pct{ width:25% }
.sp30pct{ width:30% }
.sp33pct{ width:33.33333% }
.sp40pct{ width:40% }
.sp45pct{ width:45% }
.sp46pct{ width:46% }
.sp47pct{ width:47% }
.sp48pct{ width:48% }
.sp49pct{ width:49% }
.sp50pct{ width:50% }
.sp55pct{ width:55% }
.sp60pct{ width:60% }
.sp65pct{ width:65% }
.sp66pct{ width:66.66666% }
.sp70pct{ width:70% }
.sp75pct{ width:75% }
.sp80pct{ width:80% }
.sp85pct{ width:85% }
.sp90pct{ width:90% }
.sp95pct{ width:95% }
.sp100pct{ width:100% }

.spmr0 {
  margin-right:0; 
}
  
}

.center {
  margin: 0 auto;
}

.left {
  margin: 0 auto 0 0;
}

.right {
  margin: 0 0 0 auto;
}

/* ========================================================
    
    横並びデザイン ★組み合わせる
   
   ======================================================== */
.inblock-wrap > div,
.inblock-wrap > article,
.inblock-wrap > p,
.inblock-wrap > nav,
.inblock-wrap > li,
.inblock-wrap > h1,
.inblock-wrap > h2,
.inblock-wrap > h3,
.inblock-wrap > h4,
.inblock-wrap > h5,
.inblock-wrap > h6 {
  display: inline-block;
  vertical-align:top;
  font-size:15px;
  position:relative;
}

.inblock-wrap > .middle {
  vertical-align:middle;
}

.inblock-wrap > .baseline {
  vertical-align:baseline;
}

.inblock-wrap > .bottom {
  vertical-align:bottom;
}

/* 横並び時マージン */
.mr1pct { margin-right:1% }
.mr2pct { margin-right:2% }
.mr3pct { margin-right:3% }
.mr4pct { margin-right:4% }
.mr5pct { margin-right:5% }
.mr10pct { margin-right:10% }
.mr15pct { margin-right:15% }
.mr20pct { margin-right:20% }

/* 横並び時マージン（固定幅：非推奨） */
.mr10 { margin-right:10px }
.mr15 { margin-right:15px }
.mr20 { margin-right:20px }
.mr25 { margin-right:25px }
.mr30 { margin-right:30px }

   
/* ========================================================
    
    ブレイクポイント ★組み合わせる
   
   ======================================================== */
@media screen and (max-width: 767px) {
  .tablet-full{ 
    width:100% !important;
    margin-left:0;
    margin-right:0;
  }
}

@media screen and (max-width: 480px) {
  .sp-full{ 
    width:100% !important;
    margin-left:0;
    margin-right:0;
  }
}