#anchor1,
#anchor2,
#anchor3, {
  margin-top : -80px;
  padding-top : 80px;
}




.wrap-video{
  position:relative;
  z-index: 10;
 }
.wrap-video video{
  width: 100%;
  height: 100%;
  display: block;
 }
.wrap-video .text{
  position: absolute;
  top: 48%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%); /*上下左右中央寄せ*/  
  width: 100%;
  text-align:center;
  color:#fff;
 }
.wrap-video .text h3{
  font-weight:bold;
  font-size:28px;
 }
@media screen and (max-width: 768px) {   
.wrap-video .text p{
  font-size:14px;
 }
.wrap-video .text h3{
  font-size:18px;
 }
}

/* ----- スクロールアイコン ----- */
.header-scr{
  position: absolute;
  z-index: 3; /*必ず必要*/
  top: 400%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%); /*上下左右中央寄せ*/
  text-align:center;
  color:#fff;
}
.scroll-announce { 
    text-align: center;
    color:#fff;
}
.scroll-announce:after {
    font-weight: bold;
    display: block;
    text-align: center;
    content: "\f107";
    font-family: FontAwesome;
        position: absolute;
	left: 50%;
	left: calc( 50% - 24px );
	top: 30px;
	animation: scroll-announce 3s ease infinite;
}
@media screen and (max-width: 768px) { 
.header-scr{ 
      display: none;
 }
}

/*******************************
*	SP NAVI
*******************************/   
nav.globalMenuSp {  
    position: fixed;  
    z-index: 1000;
    top: 0;
    left: 0; 
    right: 0;
    bottom: 0;
    background: #164B9C;
    color: #000;
    text-align: left;
    transform: translateY(-100%);
    transition: all 0.6s;
    width: 100%; 
    overflow-y: auto; 
 }
nav.globalMenuSp .body {
  /* ウィンドウ自体 アニメーションなどで装飾 */
    position: relative;
    left: 0;
    top: 0;  
    width: 90%;
    margin: 68px auto 0px;
    padding: 10px;
    overflow-y: auto; 
 }
nav.globalMenuSp ul {
    margin: 0 auto;
    padding: 0;
    width: 100%; 
    transform: translateY(-20px);
    animation: 200ms modalwindow_body_out; 
 }
nav.globalMenuSp ul li {
    font-size: 1.0em;
    list-style-type: none;
    padding: 0;
    width: 100%;
    border-bottom: 1px dotted #D3D3D3;
 }
/* 最後はラインを描かない */
nav.globalMenuSp ul li:last-child {
    padding-bottom: 0;
    border-bottom: none;
 }
nav.globalMenuSp ul li a {
    display: block;
    color:#fff;
    padding: 1em 0;
 }

/* このクラスを、jQueryで付与・削除する */
nav.globalMenuSp.active {
    transform: translateY(0%);
 }
.navToggle {
    display: block;
    position: fixed;    /* bodyに対しての絶対位置指定 */
    right: 10px;
    top: 4px;
    width: 42px;
    height: 50px;
    cursor: pointer;
    z-index:3000;
    text-align: center;
 }
.navToggle span {
    display: block;
    position: absolute;    /* .navToggleに対して */
    width: 30px;
    border-bottom: solid 3px #666;
    -webkit-transition: .35s ease-in-out;
    -moz-transition: .35s ease-in-out;
    transition: .35s ease-in-out;
    left: 6px;
 }
.navToggle span:nth-child(1) {
    top: 9px;
 }
.navToggle span:nth-child(2) {
    top: 18px;
 }
.navToggle span:nth-child(3) {
    top: 27px;
 }
.navToggle span:nth-child(4) {
    border: none;
    color: #666;
    font-size: 9px;
    font-weight: bold;
    top: 32px;
 }	
/* 最初のspanをマイナス45度に */
.navToggle.active span:nth-child(1) {
    top: 18px;
    left: 6px;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    transform: rotate(-45deg);
 }
/* 2番目と3番目のspanを45度に */
.navToggle.active span:nth-child(2),
.navToggle.active span:nth-child(3) {
    top: 18px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
}

/*******************************
*	OTHER
*******************************/  
.cmpMgnLR {
  width: 960px;
 } 
.cmpMgnL {
  margin-right:30px;
 }
.cmpMgnL2 { 
  margin:0 0 0 50px;
 }
.cmpMgnR {
  margin-left:30px;
 }
.cmpBoxClearText .contact{
  color:#666666;
  font-weight: 700;
 } 
.indenttext {
  padding-left: 1em;
  text-indent: -1em;
}

 
@media screen and (min-width: 1200px) {
.cmpMgnLR {
  width:auto;
  margin: 0px 10%;  
 } 
}
@media screen and (max-width: 767px) {
.cmpMgnLR {
  width:auto;
  margin: 0px 10px;  
 }
.cmpMgnLR h2 {font-size:16px;}
.cmpMgnLR h4 {font-size:14px;}
.cmpMgnL,
.cmpMgnL2,
.cmpMgnR  {margin: 10px 0 0; width:100%;}
.cmpjpAreaBG-GRAY{
  padding:20px 0;
 }
.cmpglAreaB01R h4,{ 
  padding: 30px 0;
 }
.line_adjust .line{
  line-height: 1.4;
  margin-bottom:15px;
 }
}
/* Reveal */
.hvr-reveal {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
  position: relative;
  overflow: hidden;
}
.hvr-reveal:before {
  content: "";
  position: absolute;
  z-index:0;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  border-color: #2098D1;
  border-style: solid;
  border-width: 0;
  -webkit-transition-property: border-width;
  transition-property: border-width;
  -webkit-transition-duration: 0.1s;
  transition-duration: 0.1s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.hvr-reveal:hover:before, .hvr-reveal:focus:before, .hvr-reveal:active:before {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  border-width: 4px;
}
.hb50 {margin-bottom:50px;}
.cmpMgnLR img{width: 100%;} 
.cmpMgnLR h1{
  padding-bottom:80px;
  text-align:center;
}
.overlay_imgbg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-size: cover;
  opacity: 0.3;
} 
#anchor1 {
  margin-top : -80px;
  padding-top : 80px;
}
#anchor2 {
  margin-top : -80px;
  padding-top : 80px;
}
#anchor3 {
  margin-top : -80px;
  padding-top : 80px;
}
#anchor4 {
  margin-top : -80px;
  padding-top : 80px;
}
#anchor5 {
  margin-top : -80px;
  padding-top : 80px;
}
.arrow_white {
  position: absolute;
  top: 40%;
  right: 20px;
  -webkit-transform: translateY(-50%) translateX(-50%);
  transform: translateY(-50%) translateX(-50%);
  display: block;
  width: 15px;
  height: 15px;
  border-top: solid 3px #fff;
  border-right: solid 3px #fff;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.arrow_gray:after {
  position: absolute;
  content: '';
  width: 6px;
  height: 6px;
  border-top: solid 2px #697b91;
  border-right: solid 2px #697b91;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  top: 50%;
  right: 15px;
  margin-top: -3px;
}
.arrow_blue {  
  position: absolute;
  bottom: 10px; 
  right:0;
  font-size: 16px;
 }
.arrow_blue:after {
  content:  "\f105";
  font-family: FontAwesome;
  padding: 0 10px 0 6px;
  font-weight: normal;
  color: #0058ff;
  text-decoration: none;   
  font-size: 20px;
}

.parent{
  width: 90%;
  height: 80px;
  margin:0 auto;
  position: relative;
  text-align:center;
}
.inner{
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translateY(-50%) translateX(-50%);
  transform: translateY(-50%) translateX(-50%);
  border: 1px solid #ccc;
  margin: auto;
}

.down-arrow{
  margin: 0 auto;
  width: 0;
  height: 0;                                 
  border-style: solid;
  border-width: 50px 50px 0 50px;
  border-color: #F9F9F9 transparent transparent transparent;
 }
.down-arrow2{
  margin: 0 auto;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 50px 50px 0 50px;
  border-color: #CCE1FF transparent transparent transparent;
}
p.radius {
  border: 2px solid gray;
  border-radius: 8px;
  margin: 0 8px 8px 0;
  width: 90%;
  padding:5px;
  display: inline-block;
  font-size: 16px;
}
p.radius2 {  
  background-color:#F5F5F5; 
  border-radius: 6px;
  margin: 0 8px 8px 0;
  width: 90%;
  padding:5px;
  display: inline-block;
  font-size: 16px;
}
.cmpphotwidth img{width: 100%;}
.snsicon {
  display: block;
  text-align: right;
  width: 100%;
 }
.scroll-announce {
  text-align: center;
  color:#fff;
  position: relative; 
  margin-top:20%;
 }
.scroll-announce:after {
  font-size: 38px;
  font-weight: bold;
  display: block;
  text-align: center;
  content: "\f107";
  font-family: FontAwesome;
  position: absolute;
  top: 20px;
  left: 50%;
  left: calc( 50% - 24px );
  width: 44px;
  animation: scroll-announce 3s ease infinite;
 }
.cmpglIso14,
.cmpglIso99 {
  margin-left: 12px;
  padding:2px 4px;
  font-size: 12px;
  line-height: 1.2;
  vertical-align:0.2em;
  white-space: nowrap;
 }
.cmpglIso14 { border: 2px solid #88C99C; }
.cmpglIso99 { border: 2px solid #7DCDF4; }

.bgblue,
.bggray,
.bgwhite {padding :80px 0;}  
.bgclear {padding-top :50px;}    
.bgblue h2,
.bggray h2, 
.bgwhite h2 {font-weight: 700;}      

@media screen and (max-width: 768px) {  
.cmpMgnLR h1{
  padding-bottom:30px;
}
.parent{
  width: 70%;
  height: 40px;
}
.snsicon img{ width: 10%;}
.snsicon { 
  text-align: center;
  padding-bottom:30px;
 } 
.scroll-announce:after {
  font-size: 30px;
  bottom: -40px;
 }
.cmpglIso14,
.cmpglIso99 {
  margin:4px 0 0 5px;
  padding: 0px 4px;
  font-size: 10px;
  white-space: nowrap;
 }
.cmpglIso14 { border: 1px solid #88C99C; }
.cmpglIso99 { border: 1px solid #7DCDF4; }
.underline {
  border-bottom: solid 3px #87CEFA;
 }
.bgblue,
.bggray,
.bgwhite {padding : 30px 0;}
.bgclear {padding : 10px 0 15px 0;}    
}

/* ---------------------------------------------------背景付ボタン */
.flexboxR {
  position: relative;
  padding: 20px;
  overflow: hidden;
  list-style: none;
  background: #fbfbfb;
 }
.flexboxR .flex_box{
  width:30%;
  text-align:center;
  margin: 20px;
 }
.textframe{
    padding: 0.5em 1em;
    color: #2c2c2f;
    background: #fff/*背景色*/
}
.textframe  p {
    margin: 0; 
    padding: 0;
}
.flexboxR a{
  position: absolute;
  width: 100%;
  height: 100%;
  top:0;
  left: 0;
  text-decoration: none;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
 }
.flexboxR a:hover{
  opacity:0.6;
  filter: alpha(opacity=60);
  -ms-filter: "alpha( opacity=60 )";
  background: #fff;
 }
@media print, screen and (max-width: 768px){
.flexboxR .flex_box{
  width:90%;
 }
}


/* ---------------------------------------------------お問い合わせ */
.header_inquiry{
    width:130px;
    font-weight:500;
    text-decoration:none;
    display:block;
    text-align:center;
    margin-left:16px;
    padding:0px 1px 1px;
    color:#fff;
    background-color:#004EA2;
    border-radius:3px;
}

.ok{
    width: 100%;   /* お問い合わせボタン */
    margin:0 auto;
    padding: 20px;
    font-size: 16px;
    text-align:center;
    display: block;
    color: #151515;
    border: 2px solid #777777;
    background: transparent;
}
.ok:hover,
.ok:focus{
    width: 100%;
    margin:0 auto;
    display: block;
    color: #fff;
    border-color: transparent;
    background: #000;
}

@media screen and (max-width: 480px) {
.arrange_inquiry{ 
    line-height: 1.2;
 }
}

/*******************************
*	TEXT
*******************************/
/* --------------------------------------------------- MAIN AREA */ 
.tittle_h1,
.tittle_h1w{  
  font-size: 28px;
  line-height: 1.2;
  padding-bottom:10px;  
}
.tittle_h1w{color:#fff;}
.cmpCenter{margin-bottom:50px;}
.only_font {
  padding: 0px;
  font-size: 15px;
 }
.large_font {
  padding: 0px;
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 10px; 
 }
.medium_font {
  padding: 0px;
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 5px; 
 }
.middle_font {
  padding: 0px;
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 6px; 
 }
.small_font {
  padding: 0px;
  font-size: 12px;
 }

@media screen and (max-width: 767px) { 

.tittle_h1{  
  font-size:22px;
  line-height: 1.2;
}px;
  line_height:0.8;
}
.cmpCenter{margin-bottom;20px;}
.only_font {
  padding: 0px 10px;
 }
.datasheet_font {
  padding: 0px;
  font-size: 12px;
 } 
.large_font {
  padding: 0px;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 5px; 
 }
.medium_font {
  padding: 0px;
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 0px; 
 }
.middle_font {
  padding: 0px;
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 4px; 
 }
.small_font {
  padding: 0px 10px;
 }
.textRe{
  font-size: 14px;
 }
.arrange{ 
  font-size: 14px;
  line-height: 1.8;
 }
.arrange_s{ 
  font-size: 12px;
  line-height: 1.2;
 }
.cmpglBoxTextGray5 {
  margin:50px 10px;
 }
.cmpLineheight{
  font-size: 14px;
  line-height: 1.5em;
 }
}

/*******************************
*    	SCROLLBAR
*******************************/
div::-webkit-scrollbar{
  width: 10px;
 }
div::-webkit-scrollbar-track{
  background: #fff;
  border: none;
  border-radius: 5px;
  box-shadow: inset 0 0 2px #a0a0a0; 
 }
div::-webkit-scrollbar-thumb{
  background: #ddd;
  border-radius: 10px;
  box-shadow: none;
 }

/*******************************
*    	ACCORDION R
*******************************/
.accordion_naviR {
  margin-left: 20px;
 }
.accordion_naviR h3{
  padding:15px 0 10px 0;
 }
.displayNoneR {
  display: none;
 } 
.accordion_naviR h2:hover{
  color:#fff;
  cursor: pointer;
  background-color:#1e90ff;
    filter:alpha(opacity=80);
    -moz-opacity: 0.8;
    opacity: 0.8;
 }
.switchR {
  cursor:pointer;
  font-weight: bold;
  padding:15px 40px 15px 15px;
  font-size: 24px;
  background: #eee;
  border-bottom: 1px solid #ccc;
  position: relative;
 }
.switchR:after {
  position: absolute;
  top: 60%;
  right: 20px;
  margin-top: -15px;
  content: " \f078";
  font-family: FontAwesome;
  font-size: 18px;
  font-weight: bold;
  color: #FF6685;
 }
.switchR.open:after {
  content: " \f077";
  font-family: FontAwesome;
  right: 19px;
 }
@media screen and (max-width: 767px) {
.accordion_naviR {
  margin-left: 0px;
 }
.switchR {
  font-size:14px;
 }
} 

/*******************************
*    	NETWORK
*******************************/  
.accordion_naviR .clo p{
  border: solid 1px #ccc;
 }
.cmpglDcateHead,
.cmpglDcateGroup,
.cmpglDcateAgent,
.cmpglDcateLicense {
  margin-bottom: 5px;
  padding-top: 10px;
  font-size: 14px;
 }
.cmpglDcateHead:before,
.cmpglDcateGroup:before,
.cmpglDcateAgent:before,
.cmpglDcateLicense:before {
  margin-right: 5px;
  content: " \f0c8";
  font-family: FontAwesome;
 }
.cmpglDcateHead { color: #0000FF; }
.cmpglDcateGroup { color: #E60012; }
.cmpglDcateAgent { color: #009944; }
.cmpglDcateLicense { color: #BC641D; }

p .Fac{color:#ff0000;}
p .Sal{color:#0058ff;}
p .Lic{color:#138659;}
p .Age{color:#c9b11d;}
p .Sto{color:#c421df;}

.tel{padding-right: 8px;}
.fax{padding-right: 18px;}
.paragraph{padding-left: 90.5px;}
      
.network {
  width: 100%;
 }
.network h3{
  font-weight: 700;
  padding-bottom: 0px;
 }
.network th{ 
  padding: 20px 20px 30px 20px;
  text-align: left;
  width: 80%;
 }
.network th p{
  line-height:1.2em;
  margin:10px 0;
  font-weight: normal;
 } 
 .network th small{
  line-height:1.0em;
  margin:0px 10px;
 }
.network td{  
  padding: 20px 0px 0px 0px;
  width: 20%;
 }
.net_btn a{
  display: inline-block;
  margin:5px 0;
  padding: 0.3em 0.5em;
  width: 100px;
  text-decoration: none;
  color: #505050;
  border: solid 2px #505050;
  border-radius: 3px;
  transition: .4s;
 }
.net_btn a:hover {
  background: #505050;
  color: white;
 }
.add {
  text-align: justify;
  line-height: 1.5;
  margin:10px 0;
 }
@media screen and (max-width: 767px) {
.network {
  width: 100%;
  border: 0px solid #999;
  margin: 0 10px;
  }
.network th {
  display: block; 
  margin-bottom:30px;
  padding:10px 0 0 0;
  width: 100%;
  font-weight:blod;
  border:none;
  text-align: left;
  font-size: 14px;
  }
.network td{
  display: block; 
  margin-bottom:30px;
  padding: 0px;
  width:100%;
  border: none;
  border-bottom; 1px solid #999;
  }
.net_btn a{
  display:block;
  margin:5px 0;
  padding: 0.1em 0.5em;
  width: 100%;
  text-decoration: none;
  color: #505050;
  border: solid 2px #505050;
  border-radius: 3px;
  transition: .4s;
 }
.tel{font-weight: 500;}
.fax{font-weight: 500;}
.network h5{font-weight: 700;}
.network th small{
  display: block;
  padding-left: 90.5px;
  padding-bottom: 10px;
  font-weight: 500;
 }
 .boxlink img{
  margin: 0px;
 }
.btn_flt{
  display: flex; 
  padding-bottom:30px;
 }
}

/* --------------------------------------FIX-BG*/  
.fixed-bg0 {
  position: relative;
  min-height: 900px;
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  z-index: 1;
 }
.fixed-bg0 h2 {padding-top:20px;}   
.fixed-bg {
  position: relative;
  min-height: 100vh;
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  z-index: 1;
 }
.fixed-bg1 {
  position: relative;
  min-height: 70vh;
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  z-index: 1;
 }
.fixed-bg2 {
  position: relative;
  min-height: 50vh;
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  z-index: 1;
 }
.fixed-bg2 h1,
.fixed-bg2 p {color:#fff;}
.fixed-bg3 {
  position: relative;
  min-height: 20vh;
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  z-index: 1;
 }  
.fixed-bg-content {
  position: absolute;
  left: 50%;
  top: 50%;
  bottom: auto;
  right: auto;
  width: 960px;
  margin: 0 auto;
  text-align: center;
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
 } 
.fixed-bg-box {
  position: absolute;
  left: 50%;
  top: 50%;
  bottom: auto;
  right: auto;
  width: 100%;
  margin: 0 auto;
  text-align: center;
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
 }
.fixed-bg-content h1{
  font-size: 2.6rem;
  color: #fff;
  margin-bottom: 24px;
 }
.fixed-bg-content h2{
  font-size: 2.0rem;
  margin-bottom: 24px;
 }
.fixed-bg  li{
  color: #fff;
 }
 .fixed-bg p a{
  color: #fff;
 } 
.scroll-bg .scroll-bg-content {
  width: 90%;
  max-width: 768px;
  margin: 0 auto;
 }
.scroll-bg .scroll-bg-content p {
  font-size: 1.0rem;
  font-weight: normal;
  line-height: 1.8;
 }
.scroll-bg2 {
  padding: 0em 0;
 }
.scroll-bg2 .scroll-bg-content2 {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
 }
 .scroll-bg2 .scroll-bg-content2 .item{
  margin: 0 auto;
 }
.scroll-bg2 .scroll-bg-content2 .center{
  padding-bottom: 30px; 
  text-align: center;
 }
.scroll-bg2 .scroll-bg-content2 h3{
  font-weight: bold;
  text-align: left;  
  font-size:28px; 
  padding-bottom:20px;
  color:#fff;
 }
.scroll-bg2 .scroll-bg-content2 h2{ 
  margin-bottom:5px;
  padding-top: 30px; 
  border-bottom: solid 2px rgba(0,0,0,0.1); 
  width: 550px;  
  color:#fff;
 }
.scroll-bg .scroll-bg-content p {
  font-size: 1.0rem;
 }
.bg01 {
  background-image: url(/library/common/img/bg/network-map.jpg);
 }
.bg02 {
  background-image: url(/library/global/img/bg/bg02.jpg);
 }
.bg03 {
  background-image: url(/library/global/img/bg/bg03.jpg);
 }
.bg04 {
  background-image: url(/library/global/img/bg/bg04.jpg);
 } 
.bg_cmpmap {
  background-image: url(/library/common/img/bg/bg_cmpmap.jpg);
 }
.bg_pdcacysle {
  background-image: url(/library/common/img/bg/bg_pdcacysle.jpg);
  color:#fff;
 }
.bg_WNmap002 {
  background-image: url(/library/common/img/photo/network/bg_WNmap002.jpg);
  color:#fff;
 }
.bg-color01 {
  background-color: #e7f0ff;
 }
.bg-color02 {
  background-color: #fbfcff;
 }
.bg-color03 {
  background-color: #202829;
  color: #ccc;
 }
.bg-color04 {
  background-color: #F9F9F9;
 }
.item1,
.item1R,
.item2,
.item2R,
.item3,
.item4,
.item5 {
  display: flex;
  flex-flow:wrap;
  width: 100%; 
  line-height: 1.2;
 }
.item1-border {
  display: flex; 
 }
.item1-border >li {
  position: relative;   
  flex: left;
  width: 100%;
  text-align: center; 
  margin: 20px auto;  
  padding: 10px;
  border: 2px solid #e6e6e6;
  background-color:#fff;  
 }
.item1-borderR {
  display: flex;
 }               
.item1-borderR li {
  position: relative;   
  width: 100%;
  text-align: center; 
  margin: 20px 80px;
  border: 2px solid #e6e6e6;  
  background-color:#fff;  
 }
.itemR {
  display: flex;
  padding: 0.4em;
  font-size: 0.9rem;
  width: 100%;
 } 
.fixed-bg-content .item1 >li {width: 60%;}
.item1 >li {
  position: relative;
  flex: left;
  margin: 10px auto;
  width: 100%;
  text-align: center;
  padding: 20px 10px;
  background-color:#fff;
 }
.item1R >li {
  position: relative;
  flex: left;
  width: 100%;
  text-align: center; 
  margin: 0.15em;  
  padding: 10px;
  background-color:#fff;  
 }
.item2 >li {
  position: relative;
  flex: left;
  margin: 0.45em;
  width: 46%;
  text-align: center;
  padding: 10px;
  background-color:#fff;
 }
.item2R >li {
  position: relative;
  flex: left;
  margin: 0.45em;
  width: 46%;
  text-align: center;
  padding:10px;
 }
.item3 >li {
  position: relative;
  color:black;
  flex: left;
  margin: 0.28em;
  width: 30%;
  text-align: center;
  padding: 10px;
  background-color:#fff;
 }
.item4 >li {
  position: relative;
  color:#3D3D3D;
  flex: left;
  margin: 0.19em;
  width: 23%;
  text-align: center;
  padding:15px 5px;
  background-color:#F7F7F7;
 }
.item5 >li {
  position: relative;
  color:black;
  flex: left;
  margin: 0.36em;
  width: 16%;
  text-align: center;
  padding: 10px;
  background-color:#fff;
 }
.itemR >li {
  position: relative;
  color:black;
  margin: 0.5em;
 }
.clo li a{
  position: absolute;
  padding: 10px;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
 }
.clo li:hover{
  color:#fff;
  cursor: pointer;
  background-color:#1e90ff;
    filter:alpha(opacity=80);
    -moz-opacity: 0.8;
    opacity: 0.8;
 }
.hrborder {
  border-top: solid 2px #ddd; 
  padding:20px 0;
 }
@media screen and (max-width: 768px) { 
.fixed-bg0 {min-height: 1000px;}
.fixed-bg0 img {width: 65%;}  
.fixed-bg-content {
  width: 100%;
 }
.scroll-bg2 {
  padding: 2em 0;
 }
.item1 >li,
.item2 >li,
.item2R >li,
.item3 >li {
  display:block;
  width: 100%;          /* フレックスボックスを解除 */
  padding:10px 20px;
  font-weight:700;
 }
.item1R >li,
.item4 >li,
.item5 >li { 
  padding: 4% 1%;
  background-color:#F7F7F7;
  font-size: 16px;
  flex: left;
  flex-flow: row;
  justify-content: space-between;
  width: 44%;
  text-align: center;  
  line-height: 1.2;
 }                                                    
.itemR {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  line-height: 0.8em;
  font-size: 16px;
  width: 90%;
 }
.fixed-bg0{
  padding-top:20px;
 }
.fixed-bg0 img{
  width: 70%;
 } 
.fixed-bg2 {
  min-height: 70vh;
 }
 .fixed-bg3 {
  min-height: 50vh;
 }  
}
@media screen and (max-width: 480px) {   
.fixed-bg-content h1{font-size: 20px;} 
.item4 >li,
.item5 >li {  
  flex: left;
  flex-flow: row;
  justify-content: space-between;
  width: 43%;
  text-align: center;
  line-height: 1.2; 
  display: flex;
  justify-content: center;
  align-items: center;
  height:40px; 
 }  
} 

/*******************************
*	TABLE 
*******************************/

/* --------------------------------------------------- TAB */
.bgbottomline{
  background: linear-gradient(transparent 97%, #1d60c9 0%);  
 }
/*タブの中身を初期非表示に*/
.ChangeElem_Panel {
  display: none; 
 }
/*タブを横並べに*/
.ChangeElem_Btn_Content {
  display: flex;
  justify-content: space-around;  
 }
/*通常時のタブ装飾*/
.ChangeElem_Btn {
  border-top: #ccc 2px solid; 
  border-left: #ccc 2px solid;
  border-right: #ccc 2px solid;
  border-bottom: #1d60c9 2px solid;
  box-sizing: border-box;
  color: #333;
  cursor: pointer;
  display: inline-block;
  flex: 1;
  font-size: 1.2rem;
  margin: 0 20px;
  padding:20px 2px;
  position: relative;
  transition: all .3s ease-in-out;
  vertical-align: middle;
 }
/*カレントとホバー時のタブ装飾*/
.ChangeElem_Btn:hover,
.ChangeElem_Btn.is-active {
  border-bottom: none;/*下線*/
  background-color: #fff;
  color: #666;
  outline:none; 
  border-top: #1d60c9 2px solid; 
  border-left: #1d60c9 2px solid;
  border-right: #1d60c9 2px solid;
 } 
@media screen and (max-width: 768px) { 
.ChangeElem_Btn {
  padding:10px 2px;
  font-weight:600;
  font-size: 0.96rem; 
  border-bottom: #1d60c9 1px solid;
 }
}
/* --------------------------------------------------- NEWS */    
.news_table {
  width: 100%;
  background-color: #fff;
 }
.news_table th{
  padding: 12px 10px 10px 20px;
  border-style: solid; /* 枠の種類 */
  border-top:hidden;
  border-color: #C0C0C0; /* 枠の色 */
  border-width: 1px 0px; /* 枠の幅 */
  text-align: left;
  font-weight:400;
  width:230px;
 }
.news_table td{
  padding: 12px 0px 10px 5px;
  border-style: solid; /* 枠の種類 */  
  border-top:hidden;
  border-color: #C0C0C0; /* 枠の色 */
  border-width: 1px 0px; /* 枠の幅 */
  text-align: left
  font-weight:500;
  line-height:1.4;
 }
.news_table span{
  margin-left:20px;
  width:110px;
  font-weight:400;
  text-decoration:none;
  display:block;
  text-align:center;
  color:#fff;
  border-radius:3px;
  display: inline-block;
 }
.news_table a {
  display:block;
  width:100%;
  height:100%;
 } 
.news_table  a:hover {
  color: #f49d9d;
 }
.news_table .info1{
  background-color:#AA5554;
 }
.news_table .info2{
  background-color:#4169e1;
 }
.news_table .info3{
  background-color:#009B77;
 }
.news_table .info4{
  background-color:#327A00;
 }
.news_table .info5{
  background-color:#663366;;
 }
.news_table .info6{
  background-color:#B56E0A;k
 }
.news_table .info7{
  background-color:#696969;
 }
@media screen and (max-width: 768px) {
.news_table th {
  display: block;
  padding: 1px 5px 1px 10px;
  background-color: #fafafa;
  width: 100%;
  font-size: 10px;
  border:none;
  text-align: left;
 }
.news_table td{
  display: block;
  padding: 16px 10px;
  line-height:1.2;
  text-align: left;
  border:hidden;
  width: 96%;
 }
.news_table span{
  margin: 2px 2px 2px 10px;
  padding-bottom:2px;
  border-radius:2px;
 }
.news_table .info1,
.news_table .info2,
.news_table .info3,
.news_table .info4,
.news_table .info5,
.news_table .info6,
.news_table .info7 {
  width:70px;
  padding-top: 1px;
 }
}
/*******************************
*	TABLE 2
*******************************/
/* --------------------------------------------------- TABLE SCROLL */

@media screen and (max-width: 768px) {
/*tableをスクロールさせる*/
/*tableのセル内にある文字の折り返しを禁止*/
.table-scroll table {
  overflow: auto;
  white-space: nowrap;
  display:block;
  width:auto;
 }
.table-scroll table tbody {
  width: 100%;
  display:table;
 }
/*tableにスクロールバーを追加*/
.table-scroll table::-webkit-scrollbar {
  height: 5px;
 }
/*tableにスクロールバーを追加*/
.table-scroll table::-webkit-scrollbar-track {
  background: #F1F1F1;
 }
/*tableにスクロールバーを追加*/
.table-scroll table::-webkit-scrollbar-thumb {
  background: #BCBCBC;
 }
}
/* --------------------------------------------------- COLUMN */
.boxlink a {
  display: block;
  width: 100%;
  height: 100%;
 }
.boxlink img{
  margin: 10px 0px;
 }
.one{
  float: left;
  width: 30%;
  margin: 0 10% 0 10%;
  padding: 10px 0px 10px;
  background-color: #fff;
  text-align: center;
 }
.two{
  float: left;
  width: 30%;
  margin: 0 10% 0 10%;
  padding: 10px 0px 10px;
  background-color: #fff;
  text-align: center;
 }
@media screen and (max-width: 768px) {
.boxlink img{
  margin: 0px;
 }
.one{
  float: left;
  width: 48%;
  margin: 0 2% 0 0;
  padding: 0px;
  background-color: #fff;
  text-align: center;
 }
.two{
  float: left;
  width: 48%;
  margin: 0 0 0 2%;
  padding: 0px;
  background-color: #fff;
  text-align: center;
 }
}

/* --------------------------------------------------- COLUMN2 */
.boxlink2 {
  display: block;
  width: 100%;
  height: 100%;
  background-color: #f2f2f2;
 }
.boxlink2 img{
  margin: 10px 0px;
 }
.boxlink2 .btn{
  width: 210px;
  text-align: center;
 }
.one2{
  float: left;
  width: 28%;
  padding: 10px 0px 10px;
  text-align: center;
 }
.two2{
  float: left;
  width: 68%;
  margin: 6% 0 0 2%;
  padding: 10px 0px 10px;
  text-align: left;
 }
@media screen and (max-width: 768px) {
.boxlink2 img{
  margin: 10px 0 0;
 }
.boxlink2 .btn{
  width: 100%;
 }
.boxlink2 .ebook{
    display:none;
 }
.one2{
  float: left;
  width: 32%;
  margin: 0 2% 0 0;
  padding: 0px;
  text-align: center;
 }
.two2{
  float: left;
  width: 64%;
  margin: 20px 0 0 2%;
  padding: 0px;
  text-align: left;
 }
}
/* --------------------------------------------------- STANDARD*/
.table_standard{
  border-collapse: collapse;
  width: 100%;
 }
.table_standard th,
.table_standard td {
  padding: 10px;
  font-size: 16px;
  border: 1px solid #999;
 }
.table_standard th {
  background-color: #eee;
  text-align: center;
  width: 5%;
 }
/* --------------------------------------------------- BASE (width15) */
.simpletable {
  border-collapse: collapse;
  width: 100%;
 }
.simpletable th,
.simpletable td {
  padding: 10px;
  border: 1px solid #999;
 }
.simpletable th {
  background-color: #eee;
  text-align: left;
  width: 15%;
 }
.simpletable th.t_top {
  border-top: #be1309 4px solid;
 }
.simpletable td.t_top {
  border-top: #b3b3b3 4px solid;
 }
.simpletable .cellR {
  text-align: left;
  font-weight: bold;
  width: 15%;
 }
@media screen and (max-width: 768px) {
.simpletable {
  border-top: 1px solid #999;
 }
.simpletable td {
  display: block;
  text-align: left;
 }
.simpletable th {
  display: block;
  border-top: none;
  border-bottom: none;
  width: 100%;
 }
}
/* --------------------------------------------------- STANDARD-R (th width15) */
.simpletableR {
  border-collapse: collapse;
  width: 100%;
 }
.simpletableR th,
.simpletableR td {
  padding: 10px;
  border: 1px solid #999;
 }
.simpletableR th {
  background-color: #eee;
  text-align: center;
  width: 15%;
 }
.cellR {
  text-align: left;
  font-weight: bold;
  width: 15%;
 }
@media screen and (max-width: 768px) {
.simpletableR {
  border-collapse: collapse;
  width: 100%;
 }
.simpletableR th,
.simpletableR td {
  padding: 5px;
  border: 1px solid #999;
 }
.simpletableR th {
  background-color: #eee;
  text-align: left;
  width: 5%;
 }
.cellR {
  text-align: left;
  font-size: 15px;
  font-weight: normal;
  width: 8%;
 }
}
/* --------------------------------------------------- DIRECTOR */
.simpletable25 {
  width: 100%;
 }
.simpletable25 th,
.simpletable25 td {
  padding: 10px 25px;
  border-style: solid; /* 枠の種類 */
  border-color: #C0C0C0; /* 枠の色 */
  border-width: 1px 0px; /* 枠の幅 */
 }
.simpletable25 th {
  font-weight: 500;
  text-align: left;
  width: 20%;
 }
.simpletable25 .cell {
  text-align: left;
  font-weight: bold;
  width: 34%;
 }
.simpletable25 .cellR {
  text-align: left;
  font-weight: 500;
  width: 46%;
 }
@media screen and (max-width: 768px) {
.simpletable25 {
  border-top: 0px solid #999;
 }
.simpletable25 td {
  display:block;
  width: 98%;
  border:none;
 }
.simpletable25 th {
  display:block;
  background-color: #eee;
  width: 100%;
  border:none;
 }
.simpletable25 .cell {
  width: 98%;
  text-align: left;
  font-weight: bold;
  font-size: 1.2em;
  border:none;
 }
.simpletable25 .cellR {
  width: 90%;
  text-align: left;
  color: #777;
  font-weight: 500;
  font-size: 1.0em;
  margin-bottom:20px;
  border:none;
 }
}
/* --------------------------------------------------- ISO */
.simpletable32 {
  border-collapse: collapse;
  width: 100%;
 }
.simpletable32 th,
.simpletable32 td {
  padding: 10px;
  border: 1px solid #999;
 }
.simpletable32 th {
  background-color: #eee;
  text-align: left;
  width: 32%;
 }
@media screen and (max-width: 767px) {
.simpletable32 {
  border-top: 0px solid #999;
  width: 98%;
 }
.simpletable32 td {
  display:block;
  width: 96%;
  border:none;
 }
.simpletable32 th {
  display:block;
  width: 98%;
 }
}
/* --------------------------------------------------- RESULTS */
.ir_results  {
  width: 100%;
  background-color: #fff;
 }
.ir_results th{
  padding: 12px 0px 10px 10px;
  border-style: solid; /* 枠の種類 */
  border-color: #C0C0C0; /* 枠の色 */
  border-width: 1px 0px; /* 枠の幅 */
  text-align: left;
  font-weight:400;
  width: 20%;
 }
.ir_results td{
  padding: 12px 0px 10px 5px;
  border-style: solid; /* 枠の種類 */
  border-color: #C0C0C0; /* 枠の色 */
  border-width: 1px 0px; /* 枠の幅 */
  font-weight:500;
  text-align: left;
 }
.ir_results .large{
  padding: 12px 0px 10px 20px;
  border-style: solid; /* 枠の種類 */
  border-color: #C0C0C0; /* 枠の色 */
  border-width: 1px 0px; /* 枠の幅 */
  font-weight:500;
  font-size:18px;
  text-align: left;
 }
.ir_results.ircell{
  width: 30%;
 }
.ir_results img[src$="icon_ir.png"] {
  width: 35px;
  height: 40px;
 }
@media screen and (max-width: 768px) {
.ir_results {
  border-top: 1px solid #999;
 }
.ir_results th {
  display: block;
  padding: 4px 5px 2px 10px;
  background-color: #fafafa;
  width: 100%;
  font-size: 14px;
  border:none;
 }
.ir_results td {
  display: block;
  padding: 3px 5px 4px 10px;
  text-align: left;
  border-top: none;
  border-bottom; 1px solid #999;
  font-size: 14px;
 }
.ir_results .ircell{
  display: none;
 }
.ir_results img{
    display: none;
 }
}
/* --------------------------------------------------- IR Calendar */
.ir_calendar {
  width: 100%;
 }
.ir_calendar th{
  padding: 12px 20px 10px;
  border-style: solid; /* 枠の種類 */
  border-color: #C0C0C0; /* 枠の色 */
  border-width: 1px 0px; /* 枠の幅 */
  text-align: left;
  font-weight:700;
  width: 15%;
 }
.ir_calendar td{
  padding: 12px 10px 10px 5px;
  border-style: solid; /* 枠の種類 */
  border-color: #C0C0C0; /* 枠の色 */
  border-width: 1px 0px; /* 枠の幅 */
  font-weight:500;
  text-align: left;
 }
@media screen and (max-width: 768px) {
.ir_calendar {
  width: 100%;
  border: 0px solid #999;
 }
.ir_calendar th {
  display: block;
  margin-top:15px;
  padding: 5px 5px 5px 10px;
  background-color: #eee;
  width: 100%;
  font-size: 17px;
  font-weight:blod;
  border:none;
  text-align: left;
 }
.ir_calendar td{
  display: block;
  padding: 3px 7px 4px 10px;
  width: 96%;
  text-align: left;
  border: none;
  border-bottom; 1px solid #999;
 }
}
/* --------------------------------------------------- TOCOLOGY */
.tecnology {
  width: 100%;
}
.tecnology th{
  padding: 12px 20px 10px;
  border-style: solid; /* 枠の種類 */
  border-color: #C0C0C0; /* 枠の色 */
  border-width: 1px 0px; /* 枠の幅 */
  text-align: left;
  font-weight:700;
  width: 25%;}
.tecnology td{
  padding: 12px 10px 10px 5px;
  border-style: solid; /* 枠の種類 */
  border-color: #C0C0C0; /* 枠の色 */
  border-width: 1px 0px; /* 枠の幅 */
  font-weight:500;
  text-align: left;
 }
.tecnology .tecnologycell{
  width: 10%;
 }
@media screen and (max-width: 768px) {
.tecnology {
  width: 100%;
  border: 0px solid #999;
 }
.tecnology th {
  display: block;
  margin-top:15px;
  padding: 5px 5px 5px 10px;
  background-color: #eee;
  width: 100%;
  font-size: 17px;
  font-weight:blod;
  border:none;
  text-align: left;
 }
.tecnology td{
  display: block;
  padding: 3px 7px 4px 10px;
  width: 96%;
  text-align: left;
  border: none;
  border-bottom; 1px solid #999;
 }
.tecnology .tecnologycell{
  display: none;
 }
}
/* --------------------------------------------------- TOCOLOGY2 */
.tecnology2 {
  width: 100%;
 }
.tecnology2 th{
  padding: 12px 20px 10px;
  border-style: solid; /* 枠の種類 */
  border-color: #C0C0C0; /* 枠の色 */
  border-width: 1px 0px; /* 枠の幅 */
  text-align: left;
  font-weight:700;
  width: 32%;
 }
.tecnology2 td{
  padding: 12px 10px 10px 5px;
  border-style: solid; /* 枠の種類 */
  border-color: #C0C0C0; /* 枠の色 */
  border-width: 1px 0px; /* 枠の幅 */
  font-weight:500;
  text-align: left;
 }
@media screen and (max-width: 768px) {
.tecnology2 {
  border-bottom: 1px solid #999;
 }
.tecnology2 th {
  display: block;
  margin-top:15px;
  padding: 5px 5px 5px 10px;
  background-color: #eee;
  width: 100%;
  font-size: 17px;
  font-weight:blod;
  border:none;
  text-align: left;
 }
.tecnology2 td{
  display: block;
  padding: 3px 7px 4px 10px;
  width: 96%;
  border:none;
  text-align: left;
 }
.tecnology2 .bor{
  border-top: 1px solid #999;
 }
}
/* --------------------------------------------------- NETWORK */
.networkadd {
  border-collapse: collapse;
  width: 100%;
 }
.networkadd span{
  padding-right: 24px
 }
.networkadd th,
.networkadd td {
  padding: 10px 20px;
  border: 1px solid #999;
 }
.networkadd th {
  background-color: #eee;
  text-align: center;
  width: 20%;
 }
.networkadd .cell {
  text-align: center;
  font-weight: bold;
  width: 14%;
 }
.networkadd .cell .fa {
  text-align: center;
  font-weight: bold;
  font-size: 1.4em;
 }
.networkadd .cellR {
  text-align: left;
  font-weight: bold;
  width: 10%;
 }
@media screen and (max-width: 768px) {
.networkadd {
  border-top: 0px solid #999;
  width: 97%;
  font-size: 15px;
 }
.css-br:after {
  content: "\A" ;
  white-space: pre;
}
.networkadd td {
  display:block;
  padding: 5px;
  width: 100%;
  border:none;
 }
.networkadd th {
  display:block;
  padding: 5px 10px;
  width: 96%;
  text-align: left;
 }
.networkadd .cell {
  text-align: left;
  font-weight: bold;
  width: 100%;
 }
.networkadd .cellR {
  text-align: right;
  font-weight: bold;
  font-size: 1.2em;
  margin-bottom:30px;
 }
}
/* --------------------------------------------------- GROUP*/
.group_other  {
  width: 100%;
  background-color: #fff;
 }
.group_other th{
  padding: 12px 0px 10px 10px;
  border-style: solid; /* 枠の種類 */
  border-color: #C0C0C0; /* 枠の色 */
  border-width: 1px 0px; /* 枠の幅 */
  text-align: left;
  font-size: 1.2em;
  font-weight:700;
  width: 88%;
 }
.group_other2 {
  padding: 10px 0px;
  text-align: center;
  font-size: 1.0em;
  width: 100%;
 }
.group_other td{
  padding: 12px 0px 10px 5px;
  border-style: solid; /* 枠の種類 */
  border-color: #C0C0C0; /* 枠の色 */
  border-width: 1px 0px; /* 枠の幅 */
  font-weight:500;
  text-align: left;
 }
@media screen and (max-width: 768px) {
.group_other {
  border-top: 1px solid #999;
 }
.group_other th {
  display: block;
  padding: 4px 0px 2px 5px;
  background-color: #fafafa;
  width: 100%;
  font-size: 1.0em;
  border:none;
 }
.group_other  td{
  display: block;
  padding: 3px 0px 4px 5px;
  text-align: left;
  font-size: 0.8em;
  border-top: none;
  border-bottom; 1px solid #999;
 }
}
/* --------------------------------------------------- DATASHEET */
.datasheet_box {
  text-align:left;
  margin: 0px auto 100px;
  width:600px;
 } 
.datasheet {
  width: 100%;
  background-color: #fff;
 }
.datasheet th{
  padding: 12px 20px 10px;
  border-style: solid; /* 枠の種類 */
  border-color: #C0C0C0; /* 枠の色 */
  border-width: 1px 0px; /* 枠の幅 */
  font-size: 16px;
  text-align: left;
  font-weight:700;
  width: 26%;
 }
.datasheet td{
  padding: 10px;
  border-style: solid; /* 枠の種類 */
  border-color: #C0C0C0; /* 枠の色 */
  border-width: 1px 0px; /* 枠の幅 */
  font-size: 14px;
  font-weight:500;
  text-align: left;
 }
.datasheet .datasheetcell{
  width: 5%;
 }
.datasheet .datasheetcellR {
  width: 34%;
  padding-bottom:20px;
  text-align: center;
 }
.datasheet img{
  width: 35px;
  height: 40px;
 }
@media screen and (max-width: 768px) {
.datasheet_box {
  text-align:left;
  margin: 0px auto 100px;
  width:100%;
 } 
.datasheet {
  width: 98%;
  border: 0px solid #999;
 }
.datasheet th {
  display: block;
  margin-top:14px;
  padding: 4px;
  background-color: #eee;
  width: 100%;
  font-size: 16px;
  font-weight:blod;
  border:none;
  text-align: left;
 }
.datasheet td{
  display: block;
  padding: 1px 0px 2px 5px;
  font-size: 12px;
  text-align: left;
  border: none;
  border-bottom; 1px solid #999;
 }
.datasheet .datasheetcell{
  display: block;
  padding: 3px 0px 4px 5px;
  width: 100%;
  text-align: left;
  border: none;
  border-bottom; 1px solid #999;
 }
.datasheet .datasheetcellR {
  display: block;
  margin: 14px auto;
  padding: 3px 0px 4px 5px;
  width: 100%;
  text-align: center;
  border: none;
  border-bottom; 1px solid #999;
 }
.datasheet img{
  width: 10%;
  height: 10%;
 }
}
/* --------------------------------------------------- SEAJET */
.datasheetR {
  width: 100%;
  background-color: #fff;
  word-break: break-all;
 }
.datasheetR th{
  padding: 12px 20px 10px;
  border-style: solid; /* 枠の種類 */
  border-color: #C0C0C0; /* 枠の色 */
  border-width: 1px 0px; /* 枠の幅 */
  font-size: 18px;
  text-align: left;
  font-weight:700;
  width: 25%;
 }
.datasheetR td{
  padding: 12px 0px 10px 5px;
  border-style: solid; /* 枠の種類 */
  border-color: #C0C0C0; /* 枠の色 */
  border-width: 1px 0px; /* 枠の幅 */
  font-weight:500;
  text-align: left;
 }
.datasheetR .datasheetcellR {
  width: 20%;
  padding-bottom:20px;
  text-align: center;
 }
.datasheetR img{
  width: 35px;
  height: 40px;
 }
@media screen and (max-width: 768px) {
.datasheetR {
  width: 98%;
  border: 0px solid #999;
  word-break: break-all;
 }
.datasheetR th {
  display: block;
  margin-top:15px;
  padding: 5px;
  background-color: #eee;
  width: 100%;
  font-size: 14px;
  font-weight:blod;
  border:none;
  text-align: left;
 }
.datasheetR td{
  display: block;
  padding: 3px 0px 4px 5px;
  text-align: left;
  border: none;
  border-bottom; 1px solid #999;
 }
.datasheetR .datasheetcellR {
  display: block;
  padding: 3px 0px 4px 5px;
  width: 100%;
  text-align: left;
  border: none;
  border-bottom; 1px solid #999;
 }
.datasheetR img{
  width: 10%;
  height: 10%;
 }
}
/* --------------------------------------------------- form */
.simpletableform {
  border-collapse: collapse;
  width: 100%;
 }
.simpletableform th,
.simpletableform td {
  padding: 5px;
  border: 1px solid #999;
 }
.simpletableform th {
  background-color: #eee;
  text-align: left;
  width: 15%;
 }
@media screen and (max-width: 768px) {
.simpletableform {
  border:none;
 }
.simpletableform td {
  display: block;
  text-align: left;
 }
.simpletableform th {
  display: block;
  border: none;
  width: 100%;
 }
}
/* --------------------------------------------------- Corporate Data */
.simpletable20 {
  border-collapse: collapse;
  width: 100%;
 }
.simpletable20 br{
  display: none;
 }
.simpletable20 span{
  padding-right: 24px
 }
.simpletable20 th,
.simpletable20 td {
  padding: 10px 20px;
  border: 1px solid #999;
 }
.simpletable20 th {
  background-color: #eee;
  text-align: center;
  width: 20%;
 }
.simpletable20 th.t_top {
  border-top: #be1309 4px solid;
 }
.simpletable20 td.t_top {
  border-top: #b3b3b3 4px solid;
 }
@media screen and (max-width: 768px) {
.simpletable20 {
  border-top: 0px solid #999;
  width: 98%;
  }
.simpletable20 br{
  display: block;
 }
.simpletable20 td {
  display:block;
  padding: 5px 15px;
  width: 98%;
  border:none;
 }
.simpletable20 th {
  display:block;
  padding: 5px 15px;
  width: 98%;
  text-align: left;
  border:none;
 }
}
/* --------------------------------------------------- STANDARD (width45) */
.simpletable45 {
  border-collapse: collapse;
  width: 100%;
 }
.simpletable45 th,
.simpletable45 td {
  padding: 10px;
  border: 1px solid #999;
 }
.simpletable45 th {
  background-color: #eee;
  text-align: center;
  width: 35%;
 }
@media screen and (max-width: 768px) {
.simpletable45 {
  width: 98%;
  border: 0px solid #999;
 }
.simpletable45 td {
  display: block;
  border: none;
  width: 100%;
  text-align: left;
 }
.simpletable45 th {
  display:block;
  border: none;
  width: 100%;
  text-align: left;
 }
}
/* --------------------------------------------------- STANDARD 2 (width12) */
.simpletable12 {
  border-collapse: collapse;
  width: 100%;
 }
.simpletable12 th,
.simpletable12 td {
  padding: 10px;
  border-style: solid; /* 枠の種類 */
  border-color: #C0C0C0; /* 枠の色 */
  border-width: 1px 0px; /* 枠の幅 */
 }
.simpletable12 th {
  text-align: left;
  width: 12%;
 }
.simpletable12 td {
  text-align: left;
 }
@media screen and (max-width: 768px) {
.simpletable12 {
  width: 98%;
  border: 0px solid #999;
 }
.simpletable12 td {
  display: block;
  border: none;
  width: 100%;
  text-align: left;
 }
.simpletable12 th {
  display:block;
  background-color: #eee;
  border: none;
  width: 100%;
  text-align: left;
 }
}
/* --------------------------------------------------- New Table */
.responsive {
  border-collapse: collapse;
  width: 100%;
 }
.responsive th,
.responsive td {
  border: 1px solid #dddddd;
  background-color: #fff;
  padding: 10px;
  text-align: center;
 }
.responsive .txt_tittle {
  font-weight:600;
 }
.responsive th p {
  font-weight:400;
  font-size: 14px;
 }
.responsive td.txt-center {
  text-align: center;
  padding: 0px 10px;
  width: 200px;
  font-weight:600;
 }
.responsive td.txt-left {
  text-align: left;
  padding: 0px 10px;
  width: 200px;
  font-weight:600;
}
@media (max-width: 768px) {
.responsive {
  border-collapse: separate;
  border-spacing: 0  20px;
 }
.responsive thead {
  display: none;
 }
.responsive tr {
  background-color: #f6f6f6;
  padding: 5px;
 }
.responsive td {
  border: none;
  display: block;
  width: 100%;
  box-sizing: border-box;
  border-bottom: 1px solid #dddddd;
  text-align: left;
  padding: 5px;
 }
.responsive td.col-6 {
  float: left;
  width: 50%;
 }
.responsive td.txt-center {
  text-align: left;
  padding: 10px 5px;
  width: 100%;
  font-size: 18px;
 }
.responsive td.txt-left {
  text-align: left;
  padding: 10px 5px;
  width: 100%;
  font-size: 18px;
 }
.responsive td:before {
  content: attr(data-title) " ";
 }
.responsive .clear {
   clear: both;
  }
}

/*******************************
*    	TITLE
*******************************/  

.bg_logo{
  text-align:center;
  padding:50px 0 80px;
 } 
 
.title_center{
  text-align:center;
  margin: 10px 10px 20px;
 }
.title_center h1{
  text-align:center;
  padding-bottom: 20px;
 }
.title_center h2{
  text-align:center;
  padding-bottom: 15px;
 }
.title_center h3{
  text-align:center;
  padding-bottom: 10px;
 }
/*******************************
*    	COLUMN
*******************************/ 

/* --------------------------------------TEXTBOTTON*/
.textbtn2 {
  display: flex;
  flex-flow: wrap;  
  width: 100%;
  justify-content: space-between;
 }
.textbtn2  li {
  position: relative;
  background: #fff;
  border: solid 2px #F7F7F7;
  margin-bottom: 20px;
  padding:10px;
  text-align: center; 
 }
.textbtn2 li {width: 100%;}

@media screen and (max-width: 768px) {  
.textbtn2 {
  width: 96%;
 } 
.textbtn2 li  {
  width: 40%; 
  font-weight:600;
 }
}  
/* --------------------------------------TITTLEBOX*/
.tittlebox3 {
  display: flex;
  flex-flow: wrap;
  width: 100%;
  justify-content: space-between;
 }

.tittlebox3 img {
  width: 100%;
 }
.tittlebox3 li {
  position: relative;
  background: #fff;
  border: 1px solid #ddd;
  margin-bottom: 20px; 
  width: 32%;
 }
.tittlebox3 li a {
  position: absolute;   
  padding:20px;
  top: 0;
  left: 0;
  width: 94%;
  height: 94%;
 }
.tittlebox3 li a:hover{
  width: 94%;
  height: 94%;
  background:rgba(255,255,255,0.2);
 }
.tittlebox3 li h3 {
  padding: 29px 10px;
  font-weight: 700;  
  text-align:center;
 }

@media screen and (max-width: 768px) {
.tittlebox3 li {
  border: 1px solid #ddd;
  margin: 0.2em;
  width: 100%;
 }
.tittlebox3 li a {
  width: 96%;
  height: 96%;
 }
.tittlebox3 li a:hover{
  width: 96%;
  height: 92%; 
 }
}
/* --------------------------------------ITEMBOX*/
.itembox2,
.itembox3,
.itembox4 {
  display: flex;
  flex-flow: wrap;
  width: 100%;
  justify-content: space-between;
 }
.itembox2 li,
.itembox3 li,
.itembox4 li {
  position: relative;
  background: #fff;
  border: 1px solid #ddd;
  margin-bottom: 40px;  
  z-index: 1;   
 }
.itembox3 li .box{  
  display: flex;
  justify-content: center;
  align-items: center;
  height:100px; 
 }
.itembox3 li .box h3{ 
  display: block;
  width: 90%;
  text-align:center; 
  margin-bottom:10px;
 }
.itembox2 li {width: 46%;}
.itembox3 li {width: 30%;}
.itembox4 li {width: 23%;}  

.itembox2 li a,
.itembox3 li a,
.itembox4 li a{
  position: absolute;   
  padding:20px;
  top: 0;
  left: 0;
  width: 94%;
  height: 94%;
  z-index: 1;   
 }
.itembox2 li a:hover,
.itembox3 li a:hover,
.itembox4 li a:hover{  
  width: 94%;
  height: 94%;
  background:rgba(255,255,255,0.2); 
 }
.itembox2 img,
.itembox3 img,
.itembox4 img{width: 100%;}

.itembox2 li:nth-child(2n+1):last-child {
    margin-left: auto;
    margin-right: 54%;   
 }
.itembox3 li:nth-child(3n+2):last-child {
    margin-left: auto;
    margin-right: 35%;   
 }

.itembox4 li:nth-child(4n+2):last-child {
    margin-left: auto;
    margin-right: 51.2%;
 }
.itembox4 li:nth-child(4n+3):last-child {
    margin-left: 6%;
    margin-right: 11%;
 }
.itembox2 li h3,
.itembox3 li h3,
.itembox4 li h3{
  padding: 20px 10px 10px;
  font-weight: 700;
 }
.itembox3 span,
.itembox4 span{
  padding: 20px 10px 10px;
  font-weight: 500;
  font-size:14px;
 } 
.itembox2 li p,
.itembox3 li p,
.itembox4 li p{
  padding: 0 10px;
  line-height: 1.5;
  word-wrap: break-word;
 }

@media screen and (max-width: 768px) { 
.itembox2 li,
.itembox3 li,
.itembox4 li  {
  width: 46%;
  border: 1px solid #ddd;
  margin: 0.6em 0.3em;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); 
 }

.itembox3 li:nth-child(2n+1):last-child {
    margin-left: auto;
    margin-right: 52%;   
 }
 
.itembox3 li .box{  
  height:70px; 
 }
.itembox3 li h3,
.itembox4 li h3 {
  font-size: 14px;
  text-align:center; 
 } 
.itembox3 li p,
.itembox4 li p {display: none;} 
.itembox3 li .hb50 ,
.itembox4 li .hb50 {margin-bottom:10px;}

.itembox3 li .boxsp{  
  display: flex;
  justify-content: center;
  align-items: center;
  height:70px; 
 }
.itembox3 li .boxsp h3{ 
  display: block;
  width: 90%;
  text-align:center; 
 }
} 
 
/* --------------------------------------FLEXBOX-cntents*/
.flexboxlink2 {
  display: flex;
  flex-wrap: wrap;
  padding: 0.90em;
  margin: 0 0 2em;
 }
.flexboxlink2 > div {
  position: relative;
  border: 2px solid #F4F4F4;
  background: #fff;
  flex: left;
  margin: 1.1%;
  width: 30.7%;
 }
.flexboxlink2 > div a{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-indent:-999px;
}
.flexboxlink2 img{
  padding:0px;
  width: 100%;
 }
.flexboxlink2 > div h3{
  padding: 20px 10px 10px;
  font-weight: 700;
 }
.flexboxlin2k span{
  padding: 20px 10px 10px;
  font-weight: 500;
  font-size:14px;
 }
.flexboxlink2 > div p{
  padding: 0 10px;
  line-height: 1.5;
  word-wrap: break-word;
 }
.flexboxlink2 :hover{
  opacity: 0.8;
  filter: alpha(opacity80);
  box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.2);
 }
@media screen and (max-width: 768px) {
.flexboxlink2 h3{font-size:20px;}
.flexboxlink2 > div {
  flex: 1 0 100%;
  padding: 0;
  margin: 10px 0;
 }
}
/* --------------------------------------FLEXBOX-Main*/
.flexboxlink {
  display: flex;
  flex-wrap: wrap;
  padding: 0.90em;
  margin: 0 0 2em;
 }
.flexboxlink > div {
  position: relative;
  border: 2px solid #ddd;
  background: #fff;
  flex: left;
  margin: 0.26em;
  width: 32%;
 }
.flexboxlink > div a{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-indent:-999px;
}
.flexboxlink img{
  padding:0px;
  width: 100%;
 }
.flexboxlink > div h3{
  padding: 20px 10px 10px;
  font-weight: 700;
 }
.flexboxlink span{
  padding: 20px 10px 10px;
  font-weight: 500;
  font-size:14px;
 }
.flexboxlink > div p{
  padding: 0 10px;
  line-height: 1.5;
  word-wrap: break-word;
 }
.flexboxlink :hover{
  opacity: 0.8;
  filter: alpha(opacity80);
  box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.2); 
 }
@media screen and (max-width: 768px) {
.flexboxlink > div {
  border: 1px solid #ddd;
  margin: 0.2em;
  width: 48%;
 }
}
@media screen and (max-width: 480px) {
.flexboxlink > div {
  width: 47%;
 }
}


/* --------------------------------------FLEXBOX-link*/
.flex_rightbox {
  display: flex;  
  position: relative;
  padding: 10px;
  border: 2px solid #ccc;
  overflow: hidden;
  margin-bottom: 50px;
  list-style: none;
  background: #fbfbfb;
 }
.flex_rightbox .flex_item{
  width: 30%;
  display:left;
 }
.flex_rightbox .flex_item_right{
  width: 70%;
  margin:2%;
 }
.flex_rightbox .flex_item img{
  width: 100%;
 }
.flex_rightbox img{
  float: left;
 }
 .flex_rightbox .day{
  float: right;
  position: absolute;
  font-size:12px;
  right: 6%;
  bottom: 8%;
 }
.flex_rightbox .btn {
  float: right;
  display: inline-block;
  margin:10px 10px 0 0;
  padding: 0.6em 0.8em;
  text-decoration: none;
  color: #1C1C1C;
  border: 2px solid #6E6E6E;
  border-radius: 3px;
  transition: .4s;
 }
.flex_rightbox p :hover{
  background: #2E2E2E;
  color: #fff;
 }
.flex_rightbox h5{
  line-height:1.6;
  font-size: 14px;
 }
.flex_rightbox a{
  position: absolute;
  width: 100%;
  height: 100%;
  top:0;
  left: 0;
  text-decoration: none;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
 }
.flex_rightbox a:hover{
  opacity:0.6;
  filter: alpha(opacity=60);
  -ms-filter: "alpha( opacity=60 )";
  background: #fff;
 }
@media screen and (max-width: 900px) {
.flex_rightbox {
  margin-bottom: 10px;
 }
.flex_rightbox  p{
  padding: 4px;
  font-size: 10px;
 }
.flex_rightbox h1{
  text-align:left;
 }
.flex_rightbox h5{
  line-height:1.4;
  font-size: 12px;
 }
 .flex_rightbox .brochure_img2{
  margin:0;
 }
}
/* --------------------------------------FLEXBOX-inlink*/
.flexboxinlink {
  display: flex;  
  flex-direction:row;
  border: 2px solid #ccc;
  padding: 20px;
  overflow: hidden;
  margin-bottom: 50px;
  list-style: none;
 }
.flexboxinlink .item {
  width: 30%;
  margin:2%;
 }
.flexboxinlink .itemleft{
  display:left;   
  width: 70%;
  margin:2%;
 }
.flexboxinlink .itemright{
  display:right;   
  width: 70%;
  margin:2%;
 }
.flexboxinlink img{
  float: left;
  width: 100%;
 }
.flexboxinlink .text{
  text-align:left;
 }
.flexboxinlink p a.inlink{
  display: inline-block;
  margin:10px 10px 0 0;
  padding: 0.6em 0.8em;
  text-decoration: none;
  color: #1C1C1C;
  border: 2px solid #6E6E6E;
  border-radius: 3px;
  transition: .4s;
 }
.flexboxinlink p a.inlink:hover{
  background: #2E2E2E;
  color: #fff;
 }
@media screen and (max-width: 900px) {
.flexboxinlink .flexitem img{
  width: 100%;
  padding-left: 0px;
 }
.flexboxinlink h1{
  text-align:left;
 }
.flexboxinlink h5{
  line-height:1.4;
  font-size: 12px;
 }
.flexboxinlink p a.inlink{
  font-size: 12px;
  margin:6px 6px 0 0;
  padding: 0.15;
 }
}
/* --------------------------------------PHOTO*/ 
.col-item{text-align:center;}
.col-item img{width:94%;}
.col{
  display: flex;
  flex-flow: wrap;
  width: 100%;
  justify-content: space-between;
 }
.row-2 .col-item{width: 50%;}
.row-2r .col-item{width: 50%; margin-left:25%;}  
.row-3 .col-item{width: 33.3%;}
.row-3r .col-item{width: 33.3%;}
.row-3r .col-item img{width: 94%;}
.row-3r li:nth-child(3n+2):last-child {
  margin-left: auto;
  margin-right: 33.3%;
 }
  
.row-4 .col-item{width: 25%;} 
.row-4r .col-item{width: 25%;}
.row-4r .col-item img{width: 94%;}  
.col-item{padding: 15px 0;}
.col-item span{
   font-size: 14px;
 }
@media screen and (max-width: 768px) {
.col-item span{
   font-size: 12px;
 }
.row-4r .col-item{width: 50%; line-height:1.0;}
}


/*******************************
*    	MODAL WINDOW
*******************************/

@keyframes modalwindow_body_out {
  0% {
    transform: translateY(0px);
  }
  100% {
    transform: translateY(-20px);
  }
}

.modalwindow {
  /* オーバーレイ＆スクロール領域になるレイヤー */
  display: none;
  position: fixed;
  top: 120px;
  left: 0;
  z-index: 10001;
  width: 100%;
  /* スマホでスワイプして指を離すまでの間下部の背景が無くなるため余分に指定 */
  height: calc(100% + 100px);
  background: rgba(0, 0, 0, 0.1);
  border-bottom: 100px solid transparent;
  cursor: pointer;
  opacity: 1;
 }
.modalwindow.no_overlay_close {
  cursor: default;
 }
.modalwindow.lock .close_modal {
  background: #ccc;
 }
.modalwindow .body {
  /* ウィンドウ自体 アニメーションなどで装飾 */
  position: relative;
  width: 100%;
  overflow: auto;
  margin: 0 auto;
  background: #134086;
  cursor: default;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
  transform: translateY(-20px);
  animation: 200ms modalwindow_body_out;
 }
.modalwindow .body .widthsize{
  position: relative;
  width: 900px;
  margin: 0 auto;
  color: #fff;
  background: #134086;
 }
.modalwindow .body .modal_content {
  padding: 10px 20px 30px;
 }
.modalwindow .body ul li .init-right {
  color: #ffffff;
 }
.modalwindow .body > footer {
  padding: 10px;
  background: #fcfcfc;
  border-top: 1px solid #e5e5e5;
 }
.modalwindow.is_visible .body {
  transform: translateY(0px);
  animation: 400ms modalwindow_body_in;
 }
.modalwindow .body > footer {
  padding: 10px;
  background: #fcfcfc;
  border-radius: 0 0 4px 4px;
  border-top: 1px solid #e5e5e5;
 }
@media screen and (max-width: 960px) {
.modalwindow .body {
  position: fixed;
  width: calc(100% - 20px);
  margin: 10px;
  left: 0px;
  overflow: auto;
 }
}

.modalwindow2 {
  /* オーバーレイ＆スクロール領域になるレイヤー */
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10000;
  width: 100%;
  /* スマホでスワイプして指を離すまでの間下部の背景が無くなるため余分に指定 */
  height: calc(100% + 100px);
  background: rgba(0, 0, 0, 0.5);
  border-bottom: 100px solid transparent;
  cursor: pointer;
  opacity: 1;
 }
.modalwindow2.no_overlay_close {
  cursor: default;
 }
.modalwindow2.lock .close_modal {
  background: #ccc;
 }
.modalwindow2 img{width:100%;}
.modalwindow2 .body {
  /* ウィンドウ自体 アニメーションなどで装飾 */
  position: relative;
  left: 0;
  top: 0;
  width: 900px;
  margin: 60px auto 0;
  padding: 20px 20px 60px;
  background: #fff;
  border-radius: 4px;
  cursor: default;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
  transform: translateY(-20px);
  animation: 200ms modalwindow_body_out; 
  max-height: 80vh;
  overflow-y: auto;      

 }
.modalwindow2 .is_visible .body {
  transform: translateY(0px);
  animation: 400ms modalwindow_body_in;
 }
.modalwindow2 .body h2{padding:20px 0 10px; font-weight: 700;} 
.modalwindow2 .body p{padding-top:20px;}
.modalwindow2 .modal_content {
  min-height: 90vh;
  padding-top: 10px;
  overflow: auto;
 }
 .modalwindow_header_close {
  /* 右上に表示する×ボタン 面倒なので動的に追加してます */
  z-index: 10003;
  display: inline-block;
  position: absolute;
  top: 20px;
  left:50%;
  margin-left: 435px;
  background:  rgba(255,255,255,1.0);
  border: none;
  cursor: pointer;
  width: 40pt;
  height: 40pt;
  font-size: 35px;
  border-radius: 50%;
  line-height: 44pt;
  text-align: center;
  box-shadow: 2px 2px 10px 0px rgba(0, 0, 0, 0.2);
 }
.modalwindow_header_close:before {
  content: "\D7";
  font-size: 40px;
  line-height: 44px;
  border: 0;
  background: none;
  outline: none;
  -webkit-box-shadow: none;
          box-shadow: none;
 }
@media screen and (max-width: 768px) {
.modalwindow2 .body {
  width: calc(92% - 30px);
  margin: 35px 10px;
  padding:0 auto;
  top: 0;                                           
  left: 0;
  max-height: 75vh;
  overflow-y: auto; 
 }
 .modalwindow_header_close {
  position: fixed;;
  top: 5px;
  left: 86%;
  margin-top::10px;
  margin-left: -5px;
 }
}
@media screen and (max-width: 340px) {
 .modalwindow_header_close {
  position: fixed;;
  top: 10px;
  left: 50%;
  margin-top::10px;
  margin-left: 32%;
 }
}

/*******************************
*    	MARK UP
*******************************/
.wrap_block ul li a:before {
  font-family: FontAwesome;
  content:  "\f101";
  padding: 0 6px 4px 0;
  font-weight: normal;
  color: #cc0000;;
  text-decoration: none;
 }
.mapmarker:before {
  font-family: FontAwesome;
  content:  "\f041";
  padding: 0 6px 4px 0;
  font-weight: normal;
  color: #808080; 
    text-decoration: none;
 }
.mailicon:before{
  font-family: FontAwesome;
  content:  "\f003";
  padding: 0 6px 4px 0;
  font-weight: normal;
  color: #808080;
  text-decoration: none;
 }
.mailiconR:before{
  font-family: FontAwesome;
  content:  "\f003";
  padding: 0 6px 4px 0;
  font-weight: normal;
  color: #fff;
  text-decoration: none;
 }
.infoicon :before{
  font-family: FontAwesome;
  content:  "\f101";
  padding: 0 6px 4px 0;
  font-weight: normal;
  color: #808080;
  text-decoration: none;
 }

/*******************************
*    	MENU
*******************************/

/* GLOBAL MENU*/ 
.flexbox {  
  margin-top:10px;
 }
.flexbox ul {
  display: flex;
  flex-wrap: wrap;
 }
.flexbox ul li {
  position: relative;
  cursor:pointer;
  text-align: center;
  font-weight: 500; 
  padding:10px 5px;
  width: 182px;
  font-size: 16px;
 }
.flexbox ul li:hover{
  color:#FFF;
  background-color:#1e90ff;
    filter:alpha(opacity=80);
    -moz-opacity: 0.8;
    opacity: 0.8;
 }
/*MENU*/
.wrap_block{
  overflow: hidden;
  width: 100%;
  margin: 30px auto 10px;
  font-size: 16px;
 }
.main_block{
  float: left;
  width: 30%;
  margin-top: 10px;
 }
.main_block li a{
  font-size: 20px;
  font-weight: 800;
  color:#fff;
 }
.side-menu_block{
  float: left;
  width: 35%;
  overflow: auto;
 }
.side-menu_block li a{
  display: block;
  height: 36px;
  line-height: 36px;
  padding:0px 10px;
  color:#fff;
 }
.side-menu_block li a:hover{
  background-color:#1e90ff;
    filter:alpha(opacity=80);
    -moz-opacity: 0.8;
    opacity: 0.8;
 }
.side-menu_block2{
  float: left;
  width: 70%;
  overflow: auto;
 }
.side-menu_block2 li a{
  display: block;
  height: 36px;
  line-height: 36px;
  padding:0px 10px;
  color:#fff;
 }
.side-menu_block2 li a:hover{
  background-color:#1e90ff;
  filter:alpha(opacity=80);
    -moz-opacity: 0.8;
    opacity: 0.8;
 }
/* スマホ 767px以下 */
@media only screen and (max-width: 768px) {
.wrap_block{
  width: 100%;
 }
.main_block{
  float: none;
  width: 100%;
  text-align:left;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 30px;
 }
.side-menu_block{
/* floatを解除 */
  float: none;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  text-align:left;
 }
a.cp_btn {
  width: 100%;
  padding: 0.1em;
  margin: 5px auto;
 }
}
/*******************************
*    	BUUTUN
*******************************/
.item_btn {
  display: inline-block;
  margin:10px 0;
  padding: 0.3em 1em;
  width: 100%;
  text-decoration: none;
  color: #505050;
  border: solid 2px #505050;
  border-radius: 3px;
  transition: .4s;
 }
.item_btn:hover {
  background: #505050;
  color: white;
 }
/* --------------------------------------ボタンサイズ */
.item_btn.small{
  padding: 6px 17px;
  font-size: 12px;
  letter-spacing: 1px;
 }
.item_btn.medium{
    padding: 8px 37px;
    font-size: 14px;
 }
.item_btn.large{
    padding: 12px 45px;
    font-size: 16px;
 }
@media screen and (max-width: 480px) {
.item.medium{
    padding: 6px 17px;
    font-size: 12px;
 }
}

/*******************************
*      	BROCHURE
*******************************/
.brochure {
  display: flex;  
  position: relative;
  height:172px;
  padding: 20px;
  border: 2px solid #ccc;
  overflow: hidden;
  margin-bottom: 50px;
  list-style: none;
  background: #fbfbfb;
 }
.brochure .itemleft{
  display:left;   
  width: 70%;
  margin:2%;
 }
.brochure .itemleft h3{
  font-weight: 700;
 }
.brochure .day{
  float: right;
  position: absolute;
  font-size:12px;
  right: 6%;
  bottom: 8%;
 }
.brochure p :hover{
  background: #2E2E2E;
  color: #fff;
 }
.brochure h5{
  line-height:1.6;
  font-size: 14px;
 }
.brochure a{
  position: absolute;
  width: 100%;
  height: 100%;
  top:0;
  left: 0;
  text-decoration: none;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
 }
.brochure a:hover{
  opacity: 0.6;
  filter: alpha(opacity80);
  box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.5);
  background: #fff;
 }
@media screen and (max-width: 900px) {
.brochure {
  height:100px;
  margin-bottom: 10px;
 }
.brochure img{
  width:60%;
  margin-left:5%;
 }
.brochure p{
  padding: 4px;
  font-size: 10px;
 }
.brochure h1{
  text-align:left;
 }
.brochure h5{
  line-height:1.4;
  font-size: 12px;
 }
}
/* --------------------------------------FLEXBOX */

.left-textbox {
  display: flex;              /* フレックスボックスにする */
  flex-direction:row-reverse;   
 }
.right-textbox {
  display: flex;              /* フレックスボックスにする */
  flex-direction:row;   
 }
.left-textbox .item,
.right-textbox .item {
  width: 50%;
 }
.left-textbox .item img,
.right-textbox .item img {
  width: 100%;
 }
.left-textbox .item li,
.right-textbox .item li{
  padding:0 10px;
 }
.left-textbox .item .item_text,
.right-textbox .item .item_text {
  margin: 10%;
 }
.left-textbox .textright{
  text-align: right;
 }
.left-textbox .textright h5{
  padding:10px 0 0 0;
  font-weight:700;
 }
.right-textbox .item p{
  text-align: justify;
 }
.item_textR {
  margin:20px 0;
 }
@media screen and (max-width: 768px) {
.left-textbox,
.right-textbox  {
  display:block;
  width: 100%;          /* フレックスボックスを解除 */
 }
.right-textbox .item,
.left-textbox .item{ 
  display:block;
  width: 100%;
 }     
.left-textbox .item .item_text,
.right-textbox .item .item_text {
  margin: 0;
 }
.right-textbox .item li,
.left-textbox .item li{
  padding:0px;
 }
.right-textbox .item,
.left-textbox .item li p{
  margin:-10px 0 20px 0;
  line-height: 1.5;
 } 
}