@charset "utf-8";

/*------------------------------------------------------------------------------------------------------------*/
/* Common Style */

/* Google font Icon */
@import url(https://fonts.googleapis.com/icon?family=Material+Icons);

/* Font family */
@font-face {
   font-family: "Noto Sans JP";
   font-style: normal;
   font-weight: 400;
   src: url("./font/NotoSansCJKjp-Regular.woff2") format("woff2"),
   url("./fonts/NotoSansJP-Medium.woff") format('woff'),
   url("./fonts/NotoSansJP-Medium.eot") format('embedded-opentype');
   font-display: swap; 
 } 
 @font-face {
   font-family: "Noto Sans JP";
   font-style: normal;
   font-weight: 700;
   src: url("./font/NotoSansMonoCJKjp-Bold.woff2") format("woff"),
   url("./font/NotoSansMonoCJKjp-Bold.woff2") format('woff'),
   url("./font/NotoSansMonoCJKjp-Bold.eot") format('embedded-opentype');
 }

* {
	box-sizing: border-box;
	font-size: 16px;
	line-height: 1.4;
	font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;

	@media (max-width: 480px){
		font-size: 14px;
	}
}
html, body{
	margin: 0;
	padding: 0;
}
img{
	width: 100%;
	max-width: 100%;
	height: auto;
}

/*------------------------------------------------------------------------------------------------------------*/
/* Component */

/*----------------------------------------------*/
/* H1-H4 */
h2{font-size: 36px; line-height: 1;}
h3{font-size: 32px; line-height: 1;}
h4{font-size: 28px; line-height: 1;}
  @media (max-width: 768px){
   h2{font-size: ; line-height: 1;}
   h3{font-size: ; line-height: 1;}
   h4{font-size: ; line-height: 1;} 
  }
  @media (max-width: 480px){
   h2{font-size: ; line-height: 1;}
   h3{font-size: ; line-height: 1;}
   h4{font-size: ; line-height: 1;} 
  }

/*----------------------------------------------*/ 
/* List */
ul{list-style: none;}
li{}

/*----------------------------------------------*/
/* Table */
table{
   border-collapse: collapse ;
   border-left: solid 1px #666666;
   border-right: solid 1px #666666;
   & th,
   & td {
      padding: 10px;
      line-height: 1.4;
      font-size: 12px;
   }
   & thead th{
      background: #ffffff;
      color: #0068B7;
      font-weight: bold;
      text-align: left;
      border-top: solid 1px #666666;
      border-bottom: solid 2px #666666;  
   }
   & tbody tr:nth-of-type(odd) td{
      background: #ffffff;
   }
   & tbody tr:nth-of-type(even) td{
      background: #F5F5F5;
   }
   & tbody td{
      border-bottom: solid 1px #666666;
      cursor: pointer;
   }

  /*  レスポンシブ （テーブル縦積み表示）*/
  @media (max-width: 768px){
  }
  @media (max-width: 480px){
   table, tbody, tr , td {
      display: block;
      width: 100%;
    }
   th{
      display: none;
   }
   td:first-child{
      background: #000000 !important;
      color: #fff;
      font-weight: bold;
      text-align: center;
   }
   td:before{
      content: attr(data-label);
      float: left;
      font-weight: bold;
      margin-right: 10px;     
   }
  }
}
.list_tbl{
   width: 100%;
   & thead{
      & th, & td{
         padding: 8px;
         font-size: 14px;
      }
   }

   & tbody{      
      td{
         padding: 8px;
         line-height: 1.4;
         font-size: 14px;
      }
      & tr:hover {
         & td{
            background: #000000;
            color: #ffffff;
         }      
      }
   }
   .fixed_column{ /*列固定表示用クラス * テーブル横スクロール表示*/
      position: sticky;
      left: 0;
   }
   .fixed_column::before{
      content: "";
      position: absolute;
      top: -1px;
      left: -1px;
      width: 100%;
      height: 100%;
      border-right: 1px solid #666666;
   }
   .fixed_row{ /*行固定表示用クラス * テーブル縦スクロール表示*/
      position: sticky;
      top: 0;
   }
   .fixed_row::before{
      content: "";
      position: absolute;
      top: -1px;
      left: -1px;
      width: 100%;
      height: 100%;
      border-right: 1px solid #666666;
   }
}

.tbl_reset{
   background: unset !important;
   border: unset !important;
}


/*----------------------------------------------*/
/* Form */
form{
   padding: 10px; 

   > div{
      /* margin: 5px 0;
      padding: 5px 0;
      border-bottom: dashed 1px #cccccc; */

      /* Error Message */
      & .error_msg{
         margin: 4px 0 ;
         font-size: .9rem;
         color: #ff0000;
      }
   }
}
label{
   font-size: .9rem;
   color: #666666;
   display: flex;
   align-items: center;
   gap: 4px;
   margin-bottom: 4px;

   &::after{
   content: "\a";
   white-space: pre;
   }
}
.required{
   background: #ff0000;
   color: #ffffff;
   font-size: .8rem;
   padding: .1rem .3rem;
   border-radius: 4px;
}

/*input*/
input[type="text"], input[type="date"], select, textarea{
   background: #f6f6f6;
   border-radius: 4px;
   border: solid 1px #666666;
   font-size: 14px;
   padding: 10px;
}
input[type="text"]:focus,input[type="date"]:focus,textarea:focus{
   background: #fffedd;
}
::placeholder {
   color: #cccccc;
}
input[type="text"]{
}
input[type="radio"]{
}
input[type="checkbox"]{
}
input[type="date"]{
}
input[type="file"]{
}
input[type="button"]{
}
input[type="submit"]{
}
input[type="reset"]{
}
/*selectbox*/
select{
   -moz-appearance: menulist-button;
   -webkit-appearance: menulist-button;
   appearance: menulist-button;
}
/*textarea*/
:root {
  --textarea-height: 5em;
  --textarea-line-height: 1.5;
} 
textarea {
  height: calc(
    var(--textarea-line-height) *
    var(--textarea-height)
  );
  line-height: var(--textarea-line-height);
}
/*----------------------------------------------*/
/* Button */
.btn{
  /*ベースとなるスタイル*/
  margin: 10px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s linear;
  white-space: nowrap;

 > *{
   display: flex;
   align-items: center;
   justify-content: center;
   width:100%;
   height: 100%;
	text-decoration: none;
	color: #000000;
   line-height: 1;
   }
}
/*Color*/
.btn{
   color: #000000;
   background: #cccccc;
   border: solid 1px #666666;

   &:hover{
      color: #ffffff;
      background: #000000;
      border: solid 1px #000000;
   
      > *{
         color: inherit;
         background-color: inherit;
         border: none;
      }
   }
}
.btn_red{
  color: #ffffff ;
  background: #ff0000 ;
  border: solid 1px #ff0000 ;

 &:hover{
  color: #ffffff !important;
  background: #d50900 !important;
  border: solid 1px #d50900;
  > *{
      color: inherit;
      background-color: inherit;
      border: solid 1px inherit;
   }
 }
 > *{
   color: inherit;   
   background-color: inherit;
   border: none;
 }

 &.btn_outline{
      color: #ff0000;
      background: #ffffff;

  &:hover{
      color: #ffffff !important;
      background: #ff0000 !important;
      border: solid 1px #ff0000;
  }
 }
}

/*Size*/
.btn_midium{
  width: 200px;
  height: 50px;
  font-size: 16px;
  line-height: 50px;
}
.btn_large{
  width: 400px;
  height: 70px;
  font-size: 24px;
  line-height: 70px;
}

/*----------------------------------------------*/
/* Icon (Google material icon)*/
*[class^="icon_"]{
   width:0;
   height: 0;
   display: inline-block;

   &::after{
      font-family: "Material Icons";
   }
}
.icon_delete{ &::after{content: "\e872";} }
.icon_edit{ &::after{content: "\e3c9";} }
.icon_setting{ &::after{content: "\e8b8";} }
.icon_search{ &::after{content: "\e8b6";} }
.icon_download{ &::after{content: "\f090";} }
.icon_arrowUp{ &::after{content: "\e316";} }
.icon_arrowDown{ &::after{content: "\e313";} }
.icon_link{ &::after{content: "\e157";} }
.icon_plus{ &::after{content: "\e145";} }
.icon_minus{ &::after{content: "\e15b";} }
.icon_plusCircle{ &::after{content: "\e147";} }
.icon_minusCircle{ &::after{content: "\e644";} }
.icon_cancel{ &::after{content: "\e5c9"; } }
.icon_openNew{ &::after{content: "\e89e";} }

/*----------------------------------------------*/
/* Modal window */
/*ライブラリにカスタマイズが発生した場合は記述*/

/*----------------------------------------------*/
/* Pagenation */
.pagenation {
   font-size: 0.75rem;

   & .total{
      margin: 0 0.5rem;
   }
   & .perpage{
      margin: 0 10px;
   }
   & .pager{
      list-style: none;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      gap: 4px;

      & li{
         width: 2rem;
         height: 2rem;
         background: #ffffff;
         > a{
            display: flex;
            align-items: center;
            justify-content: center;
            text-align:center;
            line-height: 2rem;
            color: #000000;
            text-decoration: underline;
         }
      }
      & li.active{
         background: #000000;
         font-weight: 500;
         > a{
            color: #ffffff;
            text-decoration: none;
         }        
      }
      & li.prev, & li.next{
         width: 2rem; 
         display: flex;
         justify-content: center;
         align-items: center;
         background: #000000;
         color: #ffffff;
         transition: all 0.3s linear;
         cursor: pointer;

         &::after{
            content: "";
            width: 0.5rem;
            height: 0.5rem;
            transform: rotateZ(45deg);
         }

         > a{
            color: inherit;
         }
      }
      & li.prev{
         margin-right: 1rem;

         &::after{
            border-bottom: 2px solid #ffffff;
            border-left: 2px solid #ffffff;
            margin-left: 2px;
         }
      }   
      & li.next{
         margin-left: 1rem;

         &::after{
            border-top: 2px solid #ffffff;
            border-right: 2px solid #ffffff;
            margin-right: 2px;
         }
      }                    
   }
}

/*----------------------------------------------*/
/* Tab */
.tab-panel{
	width: 100%;

	@media (min-width:1280px){
			margin: 10px auto 20px;

      @media (max-width:1279px) and (min-width:481px){
            margin: 10px auto 10px;

         @media (max-width:480px){
               margin: 0 auto;
               padding: 0;
         }
      }
   }
}
.tab-group{
    display: flex;
    justify-content: center;
    align-items: flex-end;
	 gap: 10px;
	 margin-left: 0 !important;
    margin: 0;
    padding: 0;
    border-bottom: solid 3px #000000;
}
.tab,
.tab-search{
	flex-grow: 1;
	padding: 10px 0;
	list-style:none;
	text-align: center;
	cursor: pointer;
}
	@media screen and (max-width: 1024px) {
		.tab{
			font-size: 14px;
			padding: 10px 1em;
		}
		.tab-search{
			font-size: 14px;
			padding: 10px 2em;
		}
	}
.tab.is-active,
.tab-search.is-active{
	background: #cccccc;
	padding: 15px 0;
	font-weight: 700;
	transition: all 0.2s ease-out;
}
	@media screen and (max-width: 480px) {
		.tab.is-active{
			padding: 15px 1rem;
		}
		.tab-search.is-active{
			padding: 15px 2rem;
		}
	}

.tab-search a{
	color:#ce1360;
	text-decoration: none;
}

.panel-group{
	padding: 10px 0;
}
.panel{
    display:none;
	font-size: 1.1rem;
	padding: 0;
}
.panel.is-show{
	display:block;
}
	@media screen and (max-width: 480px) {
		.panel-group, .panel {
			padding: 10px 0;
		}
	}

/*----------------------------------------------*/
/* Navigation Menu */
nav{
   @media (min-width: 769px){      
      width: 100%;      

      /* アコーディオンタイプ */
      &.menu_accordion{
         > ul.first_menu {

            > li{
               position: relative;

               > .second_menu{
                  display: none;
                  transition: all .3s linear;
               }

               &.active{         
                  & .second_menu{
                     display: block; 
                     position: absolute;
                     top: inherit;
                     left: 0;
                     z-index: 100;
                     background: #eeeeee;
                     width: 250px;
               
                     > li{
                        padding: 0.5rem;
                        font-size: .8rem;
               
                        &:hover{
                           background: #000000;
                           color: #ffffff;

                           > a{
                              color: inherit;
                              text-decoration: none;
                           }
                        }
                     }
                  }
               }
            }
         }
      } /* アコーディオンタイプ End*/
      /* メガドロップダウンタイプ */
      &.menu_megadropdown{
         position: relative;

         > ul.first_menu {
            padding: 0;
            overflow: hidden;

            > li{
               position: relative;

               &:hover{
                  background: #eeeeee;
               }
               > .second_menu{
                  display: none;
                  transition: all .3s linear;
               }

               &.active{ 

                  & .second_menu{
                     width: 100%;
                     padding: 50px;
                     box-sizing: border-box;
                     position: fixed;
                     top: inherit;
                     left: 0;
                     display: flex;
                     justify-content: start;
                     align-items: center;
                     flex-wrap: wrap;
                     gap: 50px;
                     background: #eeeeee;

         
                     > li{
         
                        &:hover{

                           > a{
                              color: inherit;
                              text-decoration: none;
                           }
                        }
                     }
                  }
               }
            }
         }         
      } 
            
      > ul.first_menu {    /* FLEX横並び */
         list-style: none;
         display: flex;
         justify-content: flex-start;
         align-items: center;
         gap: 1.0rem;
      }
   }
   @media (max-width: 768px){
      display: none;

      &.active{
         width: 100%;
         height: 100%;
         padding: 20px;
         display: block;
         background: rgba(0, 0 ,0, .9);
         position: fixed;
         top: 0;
         left: 0;
         z-index: 99;      
         
         & ul.first_menu{
            margin-top: 50px;
            > li{               
               >a {
                  font-size: 24px;
               }               
               > ul.second_menu{
                  padding-left: 1.5rem;

                  & a{
                     font-size: 20px;
                  }
           
               }
            }
         }
      }
      li{
         padding: 1rem 0;             

       a{
            color: #ffffff;
            text-decoration: none;
         }
      }
   }
}




/* Toggle Botton */
.header {
	position: relative;
}
@media screen and (min-width: 769px) {
	.toggle-btn {
		display: none;
	}
}
@media screen and (max-width: 768px) {
.toggle-btn {
	position: fixed;
	left: calc(100vw - 60px);
	top:0;
	z-index: 100;
	width: 60px;
	height: 60px;
	background: #000000;
	display: flex;
	justify-content: space-between;
	flex-flow: column;
	padding: 14px 5px;
	box-sizing: border-box;	
}
.toggle-btn.active {
	padding: 14px 16px;
}
.toggle-btn > div{
	width: 40px;
	height: 2px;
	background: #ffffff;
	margin: 0 auto;
	transition: all .3s ease;
}
.toggle-btn.active > div.line-t {
	transform:rotate(45deg);
	transform-origin: 0 0;
}
.toggle-btn.active > div.line-c {
	display: none
}
.toggle-btn.active > div.line-b {
	transform:rotate(-45deg);
	transform-origin: 0 0;
}
}
/*----------------------------------------------*/
/* Breadcrumb List */
.breadcrumb{
  & ul{
    list-style: none;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    
    & li{
      font-size: 14px;

      &::after{
          content: "\03e" ; /* ＞ */
         &::last-child{
            content: none;
         }
      }
      
      &.breadcrumb_home{
         > a::after{
         /* home Icon */
         font-family: "Material Icons";
         content: "\e88a";
         }
      }
      > a{
         font-size: inherit;      
      }
    }
  }
}


/*----------------------------------------------*/
/* News List //お知らせ一覧 */
.newslist{
   list-style: none;
   padding-left: 0;
   
   & li{
      margin-bottom: 10px;
      padding-bottom: 10px;
      border-bottom: dashed 1px #666666;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      gap: 10px;      

      & time {
         font-size: .8rem;
         color: #666666;
      }
      @media (max-width: 480px) {
         flex-flow: column;
         align-items: flex-start;
      }
   }
}


/*----------------------------------------------*/
/* Accordion //アコーディオン開閉 */
.accordion{
   .accordion_switch{
      display :block;
      cursor: pointer;

      > span{ /* 開閉アイコン */
         transition: all 0.3s linear;
      }
   }
}


/*----------------------------------------------*/
/*PageTop back */
#pagetop{
    position: fixed;
    bottom: 10px;
    right: 50px;
    z-index: 1000;
    text-align: center;
    cursor: pointer;
}

/*----------------------------------------------*/
/* Hover Image */
.hoverimg {
	overflow: hidden;
}
.hoverimg img {
   width: 100%;
	display: block;
	transition: 0.5s;
}
.hoverimg-scale img:hover {
	transform: scale(1.1, 1.1);  /* 画像拡大 */
}
.hoverimg-gray img:hover {
	filter: grayscale(1);   /* グレースケールフィルター */
}
.hoverimg-text{  /* テキスト表示 */
   position: relative;

   .text{
      transition: 0.5s;
      opacity: 0;
      position: absolute;
      top: 0;
      bottom: 0;
      right: 0;
      left: 0;
      z-index: 10;
      width: 100%;
      height: 100%;
      color: #ffffff;
      background: rgba(0,0,0,.7);

      > p{
         margin: 10px;
         text-align: center;
      }
   }
   &:hover{
      .text{
         opacity: 1;
      }
   }
}

/*----------------------------------------------*/
/* Footer */
footer{
   & small{
      font-size: .8rem;
   }
}


/*------------------------------------------------------------------------------------------------------------*/
/* Scroll Effect */

/*----------------------------------------------*/
/* scroll_up */

.scroll_up {
   transition: 0.8s ease-in-out;
   transform: translateY(30px);
   opacity: 0;
 }
 .scroll_up.on {
   transform: translateY(0);
   opacity: 1.0;
 }
 
 /* scroll_left */
 .scroll_left {
     -webkit-transition: 0.8s ease-in-out;
     -moz-transition: 0.8s ease-in-out;
     -o-transition: 0.8s ease-in-out;
     transition: 0.8s ease-in-out;
     transform: translateX(-30px);
     opacity: 0;
     filter: alpha(opacity=0);
     -moz-opacity: 0;
 }
 .scroll_left.on {
     opacity: 1.0;
     filter: alpha(opacity=100);
     -moz-opacity: 1.0;
     transform: translateX(0);
 }
 
 /* scroll_right */
 .scroll_right {
     -webkit-transition: 0.8s ease-in-out;
     -moz-transition: 0.8s ease-in-out;
     -o-transition: 0.8s ease-in-out;
     transition: 0.8s ease-in-out;
     transform: translateX(30px);
     opacity: 0;
     filter: alpha(opacity=0);
     -moz-opacity: 0;
 }
 .scroll_right.on {
     opacity: 1.0;
     filter: alpha(opacity=100);
     -moz-opacity: 1.0;
     transform: translateX(0);
 }
 



/*------------------------------------------------------------------------------------------------------------*/
/* Layout */

/*----------------------------------------------*/
/*flex*/
.flex{ display: flex; }
.flex-wrap{ flex-wrap: wrap; }
.flex-nowrap{ flex-wrap: nowrap; }
.align-center{ align-items: center; }
.align-start{ align-items: start; }
.align-end{ align-items: end; }
.justify-start {justify-content: flex-start; }
.justify-end{ justify-content: flex-end; }
.justify-center{ justify-content: center; }
.justify-between{ justify-content: space-between; }
.justify-around{ justify-content: space-around; }
.justify-evenly{ justify-content: space-evenly; }
.flex-row-reverse{flex-flow:row-reverse}
.flex-column{ flex-flow: column; }
.flex-column-reverse{flex-flow:column-reverse}

/*----------------------------------------------*/
/*gap*/
.gap-4{ gap: 4px; }
.gap-10{ gap: 10px; }
.gap-20{ gap: 10px 20px; }
.gap-30{ gap: 10px 30px; }
.gap-40{ gap: 10px 40px; }

/*----------------------------------------------*/
/*border*/
.border-left{ border-left-style: solid; }
.border-right{ border-right-style: solid; }
.border-top{ border-top-style: solid; }
.border-bottom{ border-bottom-style: solid; }
/*color*/
.border-white{ border-color: #ffffff; }
.border-gray{ border-color: #cccccc; }
.border-lightgray{ border-color: #dddddd; }
.border-darkgray{ border-color: #666666; }
.border-black{ border-color: #000000; }
/*width*/
.border-1{ border-width: 1px; }
.border-2{ border-width: 2px; }
.border-3{ border-width: 3px; }
.border-4{ border-width: 4px; }
.border-5{ border-width: 5px; }
/*style*/
.border-solid{ border-style: solid; }
.border-dashed{ border-style: dashed; }
.border-dotted{ border-style: dotted; }

/*----------------------------------------------*/
/*border-radius*/
.border-radius4{border-radius: 4px}
.border-radius6{border-radius: 6px}
.border-radius8{border-radius: 8px}
.border-radius10{border-radius: 10px}

/*----------------------------------------------*/
/*width*/
/*固定サイズ*/
.width-100{ width: 100px; min-width: 100px; }
.width-110{ width: 110px; min-width: 110px; }
.width-120{ width: 120px; min-width: 120px; }
.width-130{ width: 130px; min-width: 130px; }
.width-140{ width: 140px; min-width: 140px; }
.width-150{ width: 150px; min-width: 150px; }
.width-160{ width: 160px; min-width: 160px; }
.width-170{ width: 170px; min-width: 170px; }
.width-180{ width: 180px; min-width: 180px; }
.width-190{ width: 190px; min-width: 190px; }
.width-200{ width: 200px; min-width: 200px; }
.width-max{ width: 100%;}
.width-clear{ width: unset !important; }

/*可変width*/
.w100{ max-width: 100px; }
.w200{ max-width: 200px; }
.w300{ max-width: 300px; }
.w400{ max-width: 400px; }
.w500{ max-width: 500px; }
.w600{ max-width: 600px; }
.w700{ max-width: 700px; }
.w800{ max-width: 800px; }
.w960{ max-width: 960px; }
.w1280{ max-width: 1280px; }
.w1500{ max-width: 1500px; }

/*----------------------------------------------*/
/*height*/
.height-max{ height: 100%; }

/*----------------------------------------------*/
/*overflow*/
.overflow-x{ overflow-x: auto; }
.overflow-y{ overflow-y: auto; }
.overflow-hidden{ overflow: hidden; }

/*----------------------------------------------*/
/*margin*/
.marginAuto{ margin-left: auto !important; margin-right: auto !important;}
.marginTop-10{ margin-top: 10px !important; }
.marginTop-20{ margin-top: 20px !important; }
.marginTop-30{ margin-top: 30px !important; }
.marginTop-40{ margin-top: 40px !important; }
.marginTop-50{ margin-top: 50px !important; }
.marginTop-60{ margin-top: 60px !important; }
.marginTop-70{ margin-top: 70px !important; }
.marginTop-80{ margin-top: 80px !important; }
.marginTop-90{ margin-top: 90px !important; }
.marginTop-100{ margin-top: 100px !important; }
.marginBottom-10{ margin-bottom: 10px !important; }
.marginBottom-20{ margin-bottom: 20px !important; }
.marginBottom-30{ margin-bottom: 30px !important; }
.marginBottom-40{ margin-bottom: 40px !important; }
.marginBottom-50{ margin-bottom: 50px !important; }
.marginBottom-60{ margin-bottom: 60px !important; }
.marginBottom-70{ margin-bottom: 70px !important; }
.marginBottom-80{ margin-bottom: 80px !important; }
.marginBottom-90{ margin-bottom: 90px !important; }
.marginBottom-100{ margin-bottom: 100px !important; }
.marginLeft-10{ margin-left: 10px !important; }
.marginLeft-20{ margin-left: 20px !important; }
.marginLeft-30{ margin-left: 30px !important; }
.marginLeft-40{ margin-left: 40px !important; }
.marginLeft-50{ margin-left: 50px !important; }
.marginLeft-60{ margin-left: 60px !important; }
.marginLeft-70{ margin-left: 70px !important; }
.marginLeft-80{ margin-left: 80px !important; }
.marginLeft-90{ margin-left: 90px !important; }
.marginLeft-100{ margin-left: 100px !important; }
.marginRight-10{ margin-right: 10px !important; }
.marginRight-20{ margin-right: 20px !important; }
.marginRight-30{ margin-right: 30px !important; }
.marginRight-40{ margin-right: 40px !important; }
.marginRight-50{ margin-right: 50px !important; }
.marginRight-60{ margin-right: 60px !important; }
.marginRight-70{ margin-right: 70px !important; }
.marginRight-80{ margin-right: 80px !important; }
.marginRight-90{ margin-right: 90px !important; }
.marginRight-100{ margin-right: 100px !important; }

/*----------------------------------------------*/
/*padding*/
.padding-10{ padding: 10px !important; }
.padding-20{ padding: 20px !important; }
.padding-30{ padding: 30px !important; }
.padding-40{ padding: 40px !important; }
.padding-50{ padding: 50px !important; }
.padding-60{ padding: 60px !important; }
.padding-70{ padding: 70px !important; }
.padding-80{ padding: 80px !important; }
.padding-90{ padding: 90px !important; }
.padding-100{ padding: 100px !important; }
.paddingLeft-10{ padding-left: 10px !important; }
.paddingLeft-20{ padding-left: 20px !important; }
.paddingLeft-30{ padding-left: 30px !important; }
.paddingLeft-40{ padding-left: 40px !important; }
.paddingLeft-50{ padding-left: 50px !important; }
.paddingLeft-60{ padding-left: 60px !important; }
.paddingLeft-70{ padding-left: 70px !important; }
.paddingLeft-80{ padding-left: 80px !important; }
.paddingLeft-90{ padding-left: 90px !important; }
.paddingLeft-100{ padding-left: 100px !important; }
.paddingRight-10{ padding-right: 10px !important; }
.paddingRight-20{ padding-right: 20px !important; }
.paddingRight-30{ padding-right: 30px !important; }
.paddingRight-40{ padding-right: 40px !important; }
.paddingRight-50{ padding-right: 50px !important; }
.paddingRight-60{ padding-right: 60px !important; }
.paddingRight-70{ padding-right: 70px !important; }
.paddingRight-80{ padding-right: 80px !important; }
.paddingRight-90{ padding-right: 90px !important; }
.paddingRight-100{ padding-right: 100px !important; }
.paddingTop-10{ padding-top: 10px !important; }
.paddingTop-20{ padding-top: 20px !important; }
.paddingTop-30{ padding-top: 30px !important; }
.paddingTop-40{ padding-top: 40px !important; }
.paddingTop-50{ padding-top: 50px !important; }
.paddingTop-60{ padding-top: 60px !important; }
.paddingTop-70{ padding-top: 70px !important; }
.paddingTop-80{ padding-top: 80px !important; }
.paddingTop-90{ padding-top: 90px !important; }
.paddingTop-100{ padding-top: 100px !important; }
.paddingBottom-10{ padding-bottom: 10px !important; }
.paddingBottom-20{ padding-bottom: 20px !important; }
.paddingBottom-30{ padding-bottom: 30px !important; }
.paddingBottom-40{ padding-bottom: 40px !important; }
.paddingBottom-50{ padding-bottom: 50px !important; }
.paddingBottom-60{ padding-bottom: 60px !important; }
.paddingBottom-70{ padding-bottom: 70px !important; }
.paddingBottom-80{ padding-bottom: 80px !important; }
.paddingBottom-90{ padding-bottom: 90px !important; }
.paddingBottom-100{ padding-bottom: 100px !important; }

/*----------------------------------------------*/
/*text align*/
.text-left{ text-align: left !important; }
.text-center{ text-align: center !important; }
.text-right{ text-align: right !important; }

/*----------------------------------------------*/
/*text color*/
.text-blue { color: #085DA2 !important; }
.text-red { color: #ff0000 !important; }
.text-white { color: #ffffff !important; }
.text-gray { color: #666666 !important; }

/*----------------------------------------------*/
/*text underline*/
.text-underline{ text-decoration: underline !important; }

/*----------------------------------------------*/
/*font size*/
.font-10{ font-size: 10px !important; }
.font-11{ font-size: 11px !important; }
.font-12{ font-size: 12px !important; }
.font-13{ font-size: 13px !important; }
.font-14{ font-size: 14px !important; }
.font-15{ font-size: 15px !important; }
.font-16{ font-size: 16px !important; }
.font-17{ font-size: 17px !important; }
.font-18{ font-size: 18px !important; }
.font-19{ font-size: 19px !important; }
.font-20{ font-size: 20px !important; }
.font-22{ font-size: 22px !important; }
.font-24{ font-size: 24px !important; }
.font-26{ font-size: 26px !important; }
.font-28{ font-size: 28px !important; }
.font-30{ font-size: 30px !important; }
.font-32{ font-size: 32px !important; }
.font-36{ font-size: 36px !important; }
.font-40{ font-size: 36px !important; }

/*----------------------------------------------*/
/*font-weight*/
.font-normal{font-weight: normal;}
.font-bold{font-weight: bold;}
.font-300{font-weight: 300 !important;}
.font-400{font-weight: 400 !important;}
.font-500{font-weight: 500 !important;}
.font-600{font-weight: 600 !important;}
.font-700{font-weight: 700 !important;}
.font-800{font-weight: 800 !important;}
.font-900{font-weight: 900 !important;}

/*----------------------------------------------*/
/*backgrond*/
.bg-white{ background: #ffffff; }
.bg-ligntgray { background: #F5F5F5; }
.bg-lightblue { background:#e6f0f8; }
.bg-black { background:#252525; }
/* backgrond parallax */
.bg-parallax{
	width: 100%;
	height: 100vh;
	background-size: cover;
	background-position: center center;
	background-attachment: fixed;
   /* background-image は style.cssで設定*/
}

/*----------------------------------------------*/
/*display*/
.display-block{ display: block; }
.display-none { display: none; }

/*----------------------------------------------*/
/*btn * letter-space*/
.btn.space{
   letter-spacing: 1em;
   text-indent: 1em;
}

/*----------------------------------------------*/
/* list-style */
.list-disc{list-style-type: disc;}   /* ・ */
.list-square{list-style-type: square;}   /* ■ */
.list-circle{list-style-type: circle;}   /* ○ */
.list-decimal{list-style-type: decimal;}   /* 数字 */
.list-zero-decimal{list-style-type: decimal-leading-zero;}   /* 数字（01、02…） */
.list-cjk-decimal{list-style-type: cjk-decimal;}   /* 漢数字 */
.list-inside{list-style-position: inside;}   /* 内側にリストマークを表示 */