/* 基本 */
@charset "utf-8";
/* /css/usrfiles/default/671_top_base.css */

img { border-style: none; }
/* FORM styles */
form { display: inline; margin: 0px; padding: 0px }
input { font-size: 1.6rem }
select { font-size: 1.6rem }
textarea { font-size: 1.6rem }

a:link{ text-decoration: none; color: #1a73e8 }
a:hover{ text-decoration: none; color: #E16D61 }
a:visited{ text-decoration: none; color: #1a73e8 }

html{
  font-size: 10px;
  line-height: 1.8;
}
body {
  font-family: "メイリオ", "Hiragino Maru Gothic W4 JIS2004", "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Meiryo, "Helvetica Neue", Helvetica, Arial, sans-serif;
  margin: 0;
  background-color: #ffffff;
  text-align: left;
  padding-top: 64px;
  font-size: 1.6rem;
}
h1,h2,h3 {
  font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}
.w1099 {
  width: auto;
  max-width: 1099px;
  margin: 0 auto;
} 

/* HEADER */
#HEADER {
  position: fixed;
  z-index: 1000;
  top: 0;
  margin: 0px;
  padding: 0px;
  text-align: left;
  vertical-align: top;
  box-shadow:0px 7px 5px -3px #cccccc;
  background-color: #fff;
}
#SITELOGO {
  width: auto;
  float: left;
}
#SITELOGO a {
  padding: 8px 20px 4px;
  display: block;
}
@media screen and (max-width: 767px) {
#SITELOGO a {  
  padding: 4px 0 0 8px;
  display: block;
}
#SITELOGO a img{ 
  max-width: 200px;
  height: auto;
}
}
#MENU {
  text-align: right;
}
#MENU #NAVI .menu-icon{
  float: right;
}
/* Nav items */
.menu {
  list-style: none;
  position: absolute;
  width: 100%;
  height: auto;
  top: 0;
  margin-top: 52px;
  padding: 0 0 10px 0;
  clear: both;
  background: var(--background-navbar);
  transition: 0.3192s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.1008s;
  transform: scale(1, 0);
  transform-origin: top;
}
@media screen and (max-width: 768px) {
.menu {
position: fixed;
width: 100%;
height: 100%;
}
.menu ul {
height: 100%;
overflow: auto;
-webkit-overflow-scrolling: touch;
}}
/* Hamburger menu button */
.menu-btn:checked ~ .menu {
  transform: scale(1, 1);
  transform-origin: top;
  transition: 0.3192s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.1008s;
}

/* Hamburger menbu text */
.menu a {
  text-decoration: none;
  font-weight: 500;
  letter-spacing: 2px;
  font-size: 16px;
  text-transform: capitalize;
  color: #ddd;
  opacity: 0;
  transition: 0.5s;
}

.menu li {
  border-top: 1px solid rgb(75, 75, 75);
  padding: 15px 0;
  margin: 0 54px;
  opacity: 0;
  transition: 0.5s;
}

.menu-btn:checked ~ .menu a,
.menu-btn:checked ~ .menu li {
  opacity: 1;
  transition: 0.3192s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.2s;
}

.menu-btn {
  display: none;
}

.menu-icon {
  display: inline-block;
  position: relative;
  cursor: pointer;
  padding: 30px 19px;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  background-color: #E60012;
}
@media screen and (max-width: 767px) {
  .menu-icon {
    padding: 23px 11px;
  }
}

.navicon {
  background: #fff;
  display: block;
  height: 3px;
  width: 26px;
  position: relative;
  transition: 0.3192s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.1008s;
}

.navicon:before,
.navicon:after {
  content: "";
  display: block;
  height: 100%;
  width: 100%;
  position: absolute;
  background: #fff;
  transition: 0.3192s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.1008s;
}

.navicon:before {
  top: 9px;
}

.navicon:after {
  bottom: 9px;
}

/* Hamburger Menu Animation Start */
.menu-btn:checked ~ .menu-icon .navicon:before {
  transform: rotate(-45deg);
}

.menu-btn:checked ~ .menu-icon .navicon:after {
  transform: rotate(45deg);
}

.menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before {
  top: 0;
}
.menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
  bottom: 0;
}

.menu-btn:checked ~ .menu-icon .navicon {
  background: rgba(0, 0, 0, 0);
  transition: 0.2192s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.1008s;
}
/* Hamburger Menu Animation End */

/* Navbar Container */
.navtext-container {
  width: 100%;
  height: 52px;
  position: absolute;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Navbar Text */
.navtext {
  position: absolute;
  text-transform: uppercase;
  color: #ddd;
  letter-spacing: 4px;
  font-size: 20px;
}
#KVIMG {
  float: left;
  margin: 0px;
  padding: 0px;
  border-style: none;
  line-height: 150%;
  text-align: left;
  vertical-align: top;
 }
/* FOOTER */
footer{
border-top: 2px solid #E60012;
}
#PTOP{
  text-align: right;
  position: fixed;
  bottom: 60px;
  right: 10px;
  z-index: 100;
}
#FOOTMENU,#COPY {
  font-size: 1.4rem;
}
#FOOTMENU {
  background: #F5F1F1;
}
#COPY {
  margin: 0px;
  border-style: none;
  padding: 0px 0px;
  font-size: 80%;
  width: 100%;
  text-align: center;
  vertical-align: top;
}
.menu {
background: rgba(255,255,255,0.85) !important;
border-bottom: 2px solid #7d7b83;
}
@media screen and (max-width: 768px) {
body {
padding-top: 54px;
}}
#FOOTLOGO {
padding: 10px 0 8px;
}
@media screen and (max-width: 768px) {
#FOOTLOGO {
  padding: 16px 0 8px;
  border-top: 1px solid #F5F1F1;
}}
@media screen and (max-width: 768px) {
#FOOTMENU {
padding: 0 10px;
}}
/**** Mobile layout ****/
@media (max-width: 900px) {
/* sp-etc */
.spnone {
	display: none;
}
}
 /* ----------------- SP ------------------- */
@media screen and (max-width: 767px) {
#PAGE_BAK {
  width: 100%;
  overflow: hidden;
}
#PAGE_BOX {
}
#HEADER {
  height: auto;
  width: 100%;
}
#SITETITLE {
	width: 40%;
}
#SITETITLE img {
  float: left;
  height: auto;
  min-width: 200px;
  width: 100%;
}
#KVIMG {
  width: 100%;
  height: auto;
}
#BODY {
  width: 100%;
  height: auto;
	padding-bottom: 30px;
}
#PTOP {
  width:100%;
  text-align: center;
  position:static;
  bottom:0px;
  right:0px;
  z-index: 0;

}
#FOOT2 table { /*CALibサイトマップ部品使用時*/
	width: 100%; 
	border-collapse: collapse; 
}
#FOOT2 table th { 
	background: none; 
	color: white; 
	font-weight: bold; 
}
#FOOT2 table td, th { 
	padding: 6px; 
	text-align: left; 
}
#FOOT2 table td {
	width:auto !important;
}
#FOOT2 table td div div {
	background: none;
}
#FOOT2 a.FOOT2_link {
  display: block;
  letter-spacing: 0;
  line-height: 150%;
  text-align: center;
}
#FOOT2 a.FOOT2_link:link {
  color: #57647b;
  font-style: normal;
  font-weight: normal;
  text-decoration: none;
}
#FOOT2 a.FOOT2_link:visited {
  color: #57647b;
}
#FOOT2 a.FOOT2_link:hover {
  color: #3791d4;
  text-decoration: underline;
}
#FOOT2 table td div div img{ /*CALibサイトマップ部品使用時アイコン打消し*/
  visibility: hidden !important;
	height: -1px !important;
	margin: 0;
	padding: 0;
}
}
/* spのためのcss */

/* テーブル用 */
	@media only screen and (max-width: 767px) {

    #FOOT2 table, #FOOT2 thead, #FOOT2 tbody, #FOOT2 th, #FOOT2 td, #FOOT2 tr { 
      display: block; 
    }
		
    /* Hide table headers (but not display: none;, for accessibility) */
    #FOOT2 thead tr { 
      position: absolute;
      top: -9999px;
      left: -9999px;
    }
		
    #FOOT2 tr {
      display:block;
    }
		
    #FOOT2 td { 
			/* Behave  like a "row" */
      border: none;
			border-bottom: 1px solid #7B8C81; 
			position: relative;
    }
		
    #FOOT2 td:before { 
      /* Now like a table header */
      position: absolute;
      /* Top/left values mimic padding */
      top: 6px;
      left: 6px;
      width: 45%; 
      padding-right: 10px; 
      white-space: nowrap;
    }

	  /*Label the data*/
    td:nth-of-type(1):before { content: ""; }
    td:nth-of-type(2):before { content: ""; }
    td:nth-of-type(3):before { content: ""; }
    td:nth-of-type(4):before { content: ""; }
	}



/* ----------------- PC and iPad ------------------- */
@media screen and (min-width: 768px) {
/* HEADER */
#HEADER {
  width: 100%;
  height: auto;
}
/* KVIMG */
#KVIMG {
  width: 100%;
 }

/* BODY */
#BODY {
  width: 100%;
 }
/* FOOTER */
#FOOTER {
  width: 100%;
}
}/* pcのためのcss */

/* alletc */
.pcnone {
	display: none;
}
.dnone {
	display: none;
}
.fleft {
	float: left;
}
.fright {
	float: right;
}
.fclear {
	float: right;
}
.textc {
	text-align: center;
}
.textl {
	text-align: left;
}
.textr {
	text-align: right;
}
.hidebox {
	display: none !important;
}
.viewbox {
}
.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}
.clearfix {
  min-height: 1px;
}
* html .clearfix {
  height: 1px;
  /*¥*//*/
  height: auto;
  overflow: hidden;
  /**/
}