@charset "utf-8";
/* CSS Document */

/* LP本文はテーマ共通CSSと共存させるため .lp-content 配下にスコープする。
   テーマreset（border-box / margin:0 等）の影響でフロート崩れしないよう
   .lp-content 内は content-box に戻す。 */
.lp-content {font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";	margin:0px auto; padding:0;}
.lp-content, .lp-content *, .lp-content *::before, .lp-content *::after {box-sizing: content-box;}
.lp-content img {max-width: 100%;}
.lp-content a:hover img {opacity: 0.6 ;}
.lp-content a {color:#333333;  text-decoration:underline;}
.lp-content a:hover {color:#999999;  text-decoration:underline;}
.lp-content .red {color:red;}

.lp-content .container {margin:0px auto;   padding:0px;}
.content {margin:0px 10px;  padding:0;}
.content p  {font-size:0.8em; color:#000000; line-height:1.7em; letter-spacing: 0.05em; text-align:justify;}

/* h2  h3　 見出しのスタイル　　*/
.bg_bl {background:url("../../img/products/lp/common/h2_bg_bl.jpg") repeat-y; border-bottom:thin dotted #CCC;}
.bg_or {background:url("../../img/products/lp/common/h2_bg_or.jpg") repeat-y; border-bottom:thin dotted #CCC;}


/*==========================================
	header のスタイル
===========================================*/
/* logo　*/
.logo h1 {margin:0; font-size:30px;}
.logo img a {border:none;}
.logo img a:hover {opacity : 0.5}
/*ヘッダー画像 */
.topimg	{max-width: 100%;	height: auto;	vertical-align: bottom}
/* キャッチコピー */
.catch	{margin: 0;	padding:0; line-height:1.4em}
/* ヘッダー画像にキャッチコピーを重ねる */
.top	{position: relative}
.catch	{position: absolute; bottom:20%; left: 3%;}

/*==========================================
	ページトップへボタンのスタイル
===========================================*/
#page_top {width: 65px;  height: 65px;  position: fixed;  right: 0;  bottom: 0;  background: #02548c;  opacity: 0.6;  border-radius: 50%;}
#page_top a {position: relative;  display: block;  width: 65px;  height: 65px;  text-decoration: none;}
#page_top a::before {font-family: 'Font Awesome 5 Free';  font-weight: 900;  content: '\f102';  font-size: 25px;  color: #fff;  position: absolute;  width: 25px;  height: 25px;  top: 0px;  bottom: 0;  right: 0;  left: 0;  margin: auto;  text-align: center;}
#page_top a::after {content: 'PAGE TOP';  font-size: 11px;  color: #fff;  position: absolute;  top: 45px;  bottom: 0;  right: 0;  left: 0;  margin: auto;  text-align: center;}

/*==========================================
	フッターのスタイル
===========================================*/
/* footerをバーの形にする */
.footer p {font-size: 0.8em;   color: #FFFFFF; line-height: 1.5em; }
.footer	{background-color: #012a5b;}
.footer_inner {margin: 0 auto; padding: 20px 25px 20px 25px; max-width: 1140px}
.footer_inner_left {float: left; width: 100%; margin: 0 auto; text-align:center}
.footer_inner_left p {font-size:0.8em; padding: 0; line-height: 1.4em; color: #ffffff;}
.footer_inner_right {float: right; font-size: 0.7em; color: #ffffff; line-height: 2em; padding: 40px 0 0 0; width: 100%}
.footer_inner_right ul {display: table;  table-layout: fixed;  text-align: center;  width: 100%;}
.footer_inner_right ul li {display: inline-block; }
.footer_inner_right li a {color: #ffffff;  text-decoration: none;}
.footer_inner_right li a:hover {color:#999999}
.copyright {background-color: #E3E9D5}
.copyright p {padding: 10px; color: #012a5b}

/*========== 359px以下 ========== */
@media print, screen and (max-width: 359px) {
.logo img {width:225px; height:auto}
}

/*========== 599px以下 ========== */
@media print, screen and (max-width: 599px) {
.menu li a {padding:10px 7px;  font-size:11px;}
}


/*========== 767px以下 ========== */
@media print, screen and (max-width: 767px) {
/* トグルボタン　*/
#menubtn {padding:7px 12px; border:solid 1px #aaaaaa;  border-radius:5px; background-color:#ffffff; position:absolute; top:13px; right:13px; cursor:pointer; }
#menubtn:hover {background-color:#dddddd;}
#menubtn:focus  {outline:none}
#menubtn i {color:#888888; font-size:18px;}
#menubtn span  {display:inline-block; text-indent:-9999px}
/* ナビ　縦並び　  fa-user-secret　fa-cart-plus　fa-sitemap*/
.menu {display:none;}
.menu ul {margin:0; padding:0; list-style:none}
.menu li a {display:block; padding:15px 11px; color:#ffffff; font-size:13px; text-decoration:none;}
.menu li a:hover {background-color:#D5D5D5; color:#333333}
.menu li a i{width: 2em;    text-align: center;}
.menu li.color01 a{	background: #1abc9c;}
.menu li.color02 a{	background: #16a085;}
.menu li.color03 a{	background: #3498db;}
.menu li.color04 a{	background: #2980b9;}
}

/*========== 768px以上 ========== */
@media print, screen and (min-width: 768px) {
/* footer */
.footer_inner:after {content: "";	 display:block;   clear:both}
.footer_inner_left {float: left; width: 25%; text-align: left}
.footer_inner_right {float: right;  width: 69%}
.footer {text-align: center;}
    
/* トグルボタン　*/
#menubtn  {display:none}
/* ナビ　横並び　*/
#menu {display:block !important}
.menu ul { margin:5px 0 0 0;  position:static; float:right }
.menu li a {display:block; padding:3px 10px; color:#000000; font-size:12px; text-decoration:none;}
.menu li a:hover {background-color:#eeeeee;}
.menu ul:after {content:""; display:block; clear:both}
.menu li {float:left; width:auto;}
.menu li a i{width: 2em;    text-align: center; color:#2554a5}
    
/* logo とnav　横並び*/
.header:after {content:""; display:block; clear:both}
.header-logo {float:left; width:auto}
.header-nav {float:right; width:auto; padding-top:10px }
/* home-gnavi　横並び　2段3列　*/
.home-gnavi li img {float:left; max-width:33.2%; height: auto;   border:solid 1px #999999; margin-top: -1px; margin-left:-1px}
/* gnavi　横並び　*/
.gnavi {text-align: center;	  border-bottom: 3px double #333333;  margin: 10px auto 15px auto;}
.gnavi ul li {text-align: center; float: left;  width: 16.2%;  border: none; border-right: 1px dotted #333333;}
.gnavi ul li:nth-child(odd) {width: 17%; border-bottom: none; border-right:1px dotted #333333}
.gnaiv ul li.home {border-left: none;	  margin-left: 1px;}
.gnavi ul li.contact {border-right: none;}
.gnavi ul li a{display: block;}
	
    
    
    

/* logo とnav　横並び*/
.header:after {content:""; display:block; clear:both}
.header-logo {float:left; width:auto}
.header-nav {float:right; width:auto; padding-top:10px }
	
/* 　　他　　*/	
.content  {margin:0 10px;}
.content p  {padding:0px;}
}

/*========== 1190px以上 ========== */
@media print, screen and  (min-width: 1190px) {
/* 全体の横幅を固定 */
.header-inner, .photo, .content, .banner_small, .footer-inner {width: 1140px;	margin-left: auto;	margin-right: auto;}
/* headerの下に罫線を挿入　*/
.header {margin-bottom: 20px; border-bottom:solid 1px #dddddd;}
}


/*==========================================
その他共通
===========================================*/
/* ボックスの上下 */
.header	{padding-top:10px;	padding-bottom:5px}
.content	{padding-bottom:30px}

/* 下余白 */
.clm_a {margin-bottom:3px;} 
.clm_b {margin-bottom:5px;}
.clm_c {margin-bottom:10px;}
.clm_d {margin-bottom:15px;}
.clm_e {margin-bottom:20px;}
.clm_f {margin-bottom:25px;}
.clm_g {margin-bottom:30px;}
.clm_h {margin-bottom:40px;}
.clm_i {margin-bottom:50px;}
.clm_j {margin-bottom:60px;}
.clm_k {margin-bottom:70px;}

/*==========================================
	LP固定ページ用 ロゴのみヘッダー（メニューなし）
===========================================*/
.lp-header {text-align:center; padding:14px 10px; border-bottom:solid 1px #dddddd; margin-bottom:20px; line-height:0;}
.lp-header a {display:inline-block;}
.lp-header img {width:250px; max-width:80%; height:auto;}
.lp-header a:hover img {opacity:0.6;}