@charset "UTF-8";
/*---------------------------------------
editor-styleの役割
-----------------------------------------
【どんなテーマ、サイトデザインでも普遍的に使用できるクラスを収める】

cssのクラス命名ルール
●プロパティと値の間は、「-」を入れる
「プロパティ」:「値」⇒「プロパティ」-「値」
line-height:0.5em⇒lh-0_5


○例外命名(1例)

.bold{font-weight:bold;}
.normal{font-weight:normal;}

.red{color:#f00;}
.black{color:#000;}
.blue{color:#00f;}
.white{color:#fff;}

.center{text-align:center;}
.left{text-align:left;}
.right{text-align:right;}

.top{vertical-align:top;}
.middle{vertical-align:middle;}
.bottom{vertical-align:bottom;}

.table{display:table;}
.table-cell{display:table-cell;}
.inline-block{display:inline-block;}
.block{display:block;}


●プロパティの命名は、「-」を挟んで、各文字の頭文字
line-height⇒lh
font-size⇒fs
width⇒w


小数点は、「_」で表す
0.5⇒0_5

単位は主に「em」だが、wに関しては「%」


-------------------------------------------------------------- */
/* 全体適応スタイル
-------------------------------------------------------------- */
/*-- clearfix-- */
.cf:before,
.cf:after {
  content: " ";
  display: table; }

.cf:after {
  clear: both; }

.cf {
  *zoom: 1; }

.clear {
  clear: both;
  float: none; }

/* カラースタイル
-------------------------------------------------------------- */  
.red{color:#f00;}
.black{color:#000;}
.blue{color:#00f;}
.white{color:#fff;}
.gray1{color:#333;}
.gray2{color:#999;}
.gray3{color:#ccc;}
.gray3{color:#ddd;}
.gray5{color:#efefef;}

.bg-red{background:#f00;}
.bg-black{background:#000;}
.bg-blue{background:#00f;}
.bg-white{background:#fff;}
.bg-gray1{background:#333;}
.bg-gray2{background:#999;}
.bg-gray3{background:#ccc;}
.bg-gray3{background:#ddd;}
.bg-gray5{background:#efefef;}

/* タイポグラフィスタイル
-------------------------------------------------------------- */
/*-- fontウェイト-- */
.bold {
  font-weight: bold !important; }

.normal {
  font-weight: normal !important; }

/*-- 表示スタイル-- */
.center {
  text-align: center !important; }

.left {
  text-align: left !important; }

.right {
  text-align: right !important; }

.top {
  vertical-align: top !important; }

.middle {
  vertical-align: middle !important; }

.bottom {
  vertical-align: bottom !important; }

.text-center{text-align:center;}
.text-left{text-align:left;}
.text-right{text-align:right;}

/* レイアウトスタイル
-------------------------------------------------------------- */
/*--幅スタイル(%)
------------------------------------- */
.w-full{ /* 画面幅いっぱいにしたい要素にあてるクラス */
  margin: 0 calc(50% - 49.5vw);
}
/*-- 文字の間隔（横）-- */
.w-10 {
  width: 10% !important; }

.w-20 {
  width: 20% !important; }

.w-25 {
  width: 25% !important; }
  
.w-30 {
  width: 30% !important; }

.w-33 {
  width: 33% !important; }
  
.w-40 {
  width: 40% !important; }

.w-50 {
  width: 50% !important; }

.w-60 {
  width: 60% !important; }

.w-70 {
  width: 70% !important; }

.w-75 {
    width: 75% !important; }
	
.w-80 {
  width: 80% !important; }

.w-90 {
  width: 90% !important; }

.w-100 {
  width: 100% !important; }

/*----- 幅スタイル(em)----- */
.w-1em {
  width: 1em !important; }

.w-2em {
  width: 2em !important; }

.w-3em {
  width: 3em !important; }

.w-4em {
  width: 4em !important; }

.w-5em {
  width: 5em !important; }

.w-6em {
  width: 6em !important; }

.w-7em {
  width: 7em !important; }

.w-8em {
  width: 8em !important; }

.w-9em {
  width: 9em !important; }

.w-10em {
  width: 10em !important; }

/*--高さスタイル
------------------------------------- */
.h-a {
  height: auto !important; }

/*----- 高さスタイル(em)----- */
.h-3em {
  height: 3em !important; }

.h-4em {
  height: 4em !important; }

.h-5em {
  height: 5em !important; }

.h-6em {
  height: 6em !important; }

.h-7em {
  height: 7em !important; }

.h-8em {
  height: 8em !important; }

.h-9em {
  height: 9em !important; }

.h-10em {
  height: 10em !important; }

.h-11em {
  height: 11em !important; }

.h-12em {
  height: 12em !important; }

.h-13em {
  height: 13em !important; }

.h-14em {
  height: 14em !important; }

.h-15em {
  height: 15em !important; }

.h-16em {
  height: 16em !important; }

.h-17em {
  height: 17em !important; }

.h-18em {
  height: 18em !important; }

.h-19em {
  height: 19em !important; }

.h-20em {
  height: 20em !important; }

.h-100 {
  height: 100% !important; }

.h-30vh {
  height: 30vh !important; }

.h-50vh {
  height: 50vh !important; }

.h-70vh {
  height: 70vh !important; }

.h-100vh {
  height: 100vh !important; }
/*--z-index
------------------------------------- */
.z-1{
  z-index: 1!important;
}
.z-2{
  z-index: 2!important;
}
.z-3{
  z-index: 3!important;
}
.z-4{
  z-index: 4!important;
}
.z-5{
  z-index: 5!important;
}
.z-10{
  z-index: 10!important;
}
.z-99{
  z-index: 99!important;
}
.z-999{
  z-index: 999!important;
}

/*--余白スタイル
------------------------------------- */
/*----- marginスタイル----- */
.m-a {
  margin-left: auto !important;
  margin-right: auto !important; }
.m-0{margin:0!important;}
.mt-0{margin-top:0!important;}
.mb-0{margin-bottom:0!important;}
.ml-0{margin-left:0!important;}
.mr-0{margin-right:0!important;}
.p-0{padding:0!important;}
.pt-0{padding-top:0!important;}
.pb-0{padding-bottom:0!important;}
.pl-0{padding-left:0!important;}
.pr-0{padding-right:0!important;}

/*----- floatスタイル----- */
.f-l {float: left; }
.f-r {float: right; }

/*-- displayスタイル-- */
.table {
  display: table;
  table-layout: fixed;/*--IEのレイアウト崩れ対策--*/
}
.table-responsive .table{
  table-layout:auto;
}
.table-cell {display: table-cell; }
.inline-block {display: inline-block; }
.block {display: block; }

.display-desktop,
.display-desktop.display-tablet,
.display-desktop.display-tablet.display-mobile,
.display-desktop.display-mobile
{display: block; }

.display-tablet {display: none; }
.display-mobile {display: none; }

/*-- flexboxスタイル-- */
.flex{
	display:flex;
}
.flex-wrap{
	flex-wrap:wrap;/*折り返しあり*/
}
.flex-left{
  justify-content :flex-start;
}
.flex-center{
  justify-content :center;
}
.flex-right{
  justify-content :flex-end;
}
.flex-top{
  align-items :flex-start;
}
.flex-middle{
  align-items :center;
}
.flex-bottom{
  align-items :flex-end;
}
.flex-column{
  flex-direction:column;
}

/*-- positionスタイル-- */
.static{
  position: static!important;
}
.relative{
  position: relative!important;
}
.absolute{
  position: absolute!important;
}
/*----- indentスタイル----- */
.ti-1 {
  text-indent: 1em; }

.ti-2 {
  text-indent: 2em; }

.ti-3 {
  text-indent: 3em; }

.ti-4 {
  text-indent: 4em; }

.ti-5 {
  text-indent: 5em; }

.ti-6 {
  text-indent: 6em; }

.ti-7 {
  text-indent: 7em; }

.ti-8 {
  text-indent: 8em; }

.ti-9 {
  text-indent: 9em; }

.ti-10 {
  text-indent: 10em; }

.ti--1 {
  text-indent: -1em; }

.ti--2 {
  text-indent: -2em; }

.ti--3 {
  text-indent: -3em; }

.ti--4 {
  text-indent: -4em; }

.ti--5 {
  text-indent: -5em; }

.ti--6 {
  text-indent: -6em; }

.ti--7 {
  text-indent: -7em; }

.ti--8 {
  text-indent: -8em; }

.ti--9 {
  text-indent: -9em; }

.ti--10 {
  text-indent: -10em; }
  

.indent-1_0 :not(ul),
.indent-1_0 li{
  text-indent: -1em;
  margin-left: 1em;  
}
.indent-1_5 :not(ul),
.indent-1_5 li{
  text-indent: -1.5em;
  margin-left: 1.5em;  
}
.indent-2_0 :not(ul),
.indent-2_0 li{
  text-indent: -2em;
  margin-left: 2em;  
}
.indent-2_5 :not(ul),
.indent-2_5 li{
  text-indent: -2.5em;
  margin-left: 2.5em;  
}
.indent-3_0 :not(ul),
.indent-3_0 li{
  text-indent: -3em;
  margin-left: 3em;  
}
.indent-4_0 :not(ul),
.indent-4_0 li{
  text-indent: -4em;
  margin-left: 4em;  
}
.indent-5_0 :not(ul),
.indent-5_0 li{
  text-indent: -5em;
  margin-left: 5em;  
}
/* inputスタイル
-------------------------------------------------------------- */
input[type="text"],input[type="email"],input[type="tel"],textarea{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/* imgスタイル
-------------------------------------------------------------- */
img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;/*下に出来る余分な余白を消す*/
  padding: 0;
  margin: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* iframeスタイル
-------------------------------------------------------------- */
iframe {
  vertical-align: bottom;/*下に出来る余分な余白を消す*/
}
/* ul,olスタイル
-------------------------------------------------------------- */
ul, ol {
  list-style: none;
  padding: 0;
  margin: 0; }


/* tableスタイル
-------------------------------------------------------------- */
.th-left th, .td-left td {
  text-align: left; }

.th-center th, .td-center td {
  text-align: center; }

.th-right th, .td-right td {
  text-align: right; }

.th-top th, .td-top td {
  vertical-align: top; }

.th-middle th, .td-middle td {
  vertical-align: middle; }

.th-bottom th, .td-bottom td {
  vertical-align: bottom; }

  
/* backgroundスタイル
-------------------------------------------------------------- */
.bg-top{
  background-position:top!important;
}
.bg-center{
  background-position:center!important;
}
.bg-bottom{
  background-position:bottom!important;
}
.no-repeat{
  background-repeat:no-repeat!important;
}
.bg-cover,
.cover{
  background-size:cover!important;
}
.bg-contain,
.contain{
  background-size:contain!important;
}
.bg-fixed{
  background-attachment: fixed!important;
}

/* 992px以下から
------------------------------------------------------------*/
@media only screen and (max-width: 992px) {
  .display-desktop{display: none;}
  .display-tablet,
  .display-tablet.display-mobile
  {display: block; }
  
  .p-0-tablet{padding:0!important;}
  .pt-0-tablet{padding-top:0!important;}
  .pb-0-tablet{padding-bottom:0!important;}
  .pl-0-tablet{padding-left:0!important;}
  .pr-0-tablet{padding-right:0!important;}

  .center-tablet {
    text-align: center !important; }
  
  .left-tablet {
    text-align: left !important; }
  
  .right-tablet {
    text-align: right !important; }
  
  .top-tablet {
    vertical-align: top !important; }
  
  .middle-tablet {
    vertical-align: middle !important; }
  
  .bottom-tablet {
    vertical-align: bottom !important; }


  /*-- positionスタイル-- */
  .static-tablet{
    position: static!important;
  }
  .relative-tablet{
    position: relative!important;
  }
  .absolute-tablet{
    position: absolute!important;
  }        
  /*--幅スタイル(%)
  ------------------------------------- */
  /*-- 文字の間隔（横）-- */
  .w-10-tablet {
    width: 10% !important; }

  .w-20-tablet {
    width: 20% !important; }

  .w-25-tablet {
    width: 25% !important; }
    
  .w-30-tablet {
    width: 30% !important; }

  .w-33-tablet {
    width: 33% !important; }
    
  .w-40-tablet {
    width: 40% !important; }

  .w-50-tablet {
    width: 50% !important; }

  .w-60-tablet {
    width: 60% !important; }

  .w-70-tablet {
    width: 70% !important; }

  .w-75-tablet {
      width: 75% !important; }
    
  .w-80-tablet {
    width: 80% !important; }

  .w-90-tablet {
    width: 90% !important; }

  .w-100-tablet {
    width: 100% !important; }

  /*----- 幅スタイル(em)----- */
  .w-1em-tablet {
    width: 1em !important; }

  .w-2em-tablet {
    width: 2em !important; }

  .w-3em-tablet {
    width: 3em !important; }

  .w-4em-tablet {
    width: 4em !important; }

  .w-5em-tablet {
    width: 5em !important; }

  .w-6em-tablet {
    width: 6em !important; }

  .w-7em-tablet {
    width: 7em !important; }

  .w-8em-tablet {
    width: 8em !important; }

  .w-9em-tablet {
    width: 9em !important; }

  .w-10em-tablet {
    width: 10em !important; }

  /*----- 高さスタイル----- */
  .h-a-tablet {
    height: auto !important; }

  .h-100-tablet {
    height: 100% !important; }
  
  .h-30vh-tablet {
    height: 30vh !important; }
  
  .h-50vh-tablet {
    height: 50vh !important; }
  
  .h-70vh-tablet {
    height: 70vh !important; }
  
  .h-100vh-tablet {
    height: 100vh !important; } 
      
  /* backgroundスタイル
  -------------------------------------------------------------- */
  .bg-top-tablet{
    background-position:top!important;
  }
  .bg-center-tablet{
    background-position:center!important;
  }
  .bg-bottom-tablet{
    background-position:bottom!important;
  }
  .no-repeat-tablet{
    background-repeat:no-repeat!important;
  }
  .bg-cover-tablet,
  .cover-tablet{
    background-size:cover!important;
  }
  .bg-contain-tablet,
  .contain-tablet{
    background-size:contain!important;
  }
  .bg-fixed-tablet{
    background-attachment: fixed!important;
  }    
/*----------*/ 
}
/*----------*/
/* 幅644px以下から 
------------------------------------------------------------*/
@media only screen and (max-width: 644px) {
  .display-desktop.display-tablet {display: none; }
  .display-tablet {display: none; }
  .display-mobile {display: block; }
  
  .p-0-mobile{padding:0!important;}
  .pt-0-mobile{padding-top:0!important;}
  .pb-0-mobile{padding-bottom:0!important;}
  .pl-0-mobile{padding-left:0!important;}
  .pr-0-mobile{padding-right:0!important;}

  .center-mobile {
    text-align: center !important; }
  
  .left-mobile {
    text-align: left !important; }
  
  .right-mobile {
    text-align: right !important; }
  
  .top-mobile {
    vertical-align: top !important; }
  
  .middle-mobile {
    vertical-align: middle !important; }
  
  .bottom-mobile {
    vertical-align: bottom !important; }

  /*-- positionスタイル-- */
  .static-mobile{
    position: static!important;
  }
  .relative-mobile{
    position: relative!important;
  }
  .absolute-mobile{
    position: absolute!important;
  }    
  /*--幅スタイル(%)
  ------------------------------------- */
  /*-- 文字の間隔（横）-- */
  .w-10-mobile {
    width: 10% !important; }

  .w-20-mobile {
    width: 20% !important; }

  .w-25-mobile {
    width: 25% !important; }
    
  .w-30-mobile {
    width: 30% !important; }

  .w-33-mobile {
    width: 33% !important; }
    
  .w-40-mobile {
    width: 40% !important; }

  .w-50-mobile {
    width: 50% !important; }

  .w-60-mobile {
    width: 60% !important; }

  .w-70-mobile {
    width: 70% !important; }

  .w-75-mobile {
      width: 75% !important; }
    
  .w-80-mobile {
    width: 80% !important; }

  .w-90-mobile {
    width: 90% !important; }

  .w-100-mobile {
    width: 100% !important; }

  /*----- 幅スタイル(em)----- */
  .w-1em-mobile {
    width: 1em !important; }

  .w-2em-mobile {
    width: 2em !important; }

  .w-3em-mobile {
    width: 3em !important; }

  .w-4em-mobile {
    width: 4em !important; }

  .w-5em-mobile {
    width: 5em !important; }

  .w-6em-mobile {
    width: 6em !important; }

  .w-7em-mobile {
    width: 7em !important; }

  .w-8em-mobile {
    width: 8em !important; }

  .w-9em-mobile {
    width: 9em !important; }

  .w-10em-mobile {
    width: 10em !important; }  


  /*----- 高さスタイル----- */
  .h-a-mobile {
    height: auto !important; }

  .h-100-mobile {
    height: 100% !important; }
  
  .h-30vh-mobile {
    height: 30vh !important; }
  
  .h-50vh-mobile {
    height: 50vh !important; }
  
  .h-70vh-mobile {
    height: 70vh !important; }
  
  .h-100vh-mobile {
    height: 100vh !important; }

  .table-scroll{
    width:100%;
    overflow-x: scroll;
  }
  .table-scroll table{
    width:600px!important;
  }    
        
  /* backgroundスタイル
  -------------------------------------------------------------- */
  .bg-top-mobile{
    background-position:top!important;
  }
  .bg-center-mobile{
    background-position:center!important;
  }
  .bg-bottom-mobile{
    background-position:bottom!important;
  }
  .no-repeat-mobile{
    background-repeat:no-repeat!important;
  }
  .bg-cover-mobile,
  .cover-mobile{
    background-size:cover!important;
  }
  .bg-contain-mobile,
  .contain-mobile{
    background-size:contain!important;
  }
  .bg-fixed-mobile{
    background-attachment: fixed!important;
  }   
/*----------*/
  }
/*----------*/