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

body { width: 100%; background: #FFF;}

.btm_bg { background: url(../img/common/btm_bg.png) top repeat-x; position: fixed; bottom:0; height: 25%; width: 100%; z-index: -1;}

body.aqua { background: #265fac;}

body.zero { background: #a2acb0;}

.g_font {font-family: 'Arsenal', sans-serif;}

.header_zero { width: 100%; min-width: 300px; margin: 0; padding: 10px 20px; z-index: 1000; background: #a2acb0; box-sizing: border-box;}

.header_aqua { width: 100%; min-width: 300px; margin: 0; padding: 10px 20px; z-index: 1000; background: #265fac; box-sizing: border-box;}

h1.logo { width: auto; height: auto; float: left;}

div.nav { float: right; margin-top: 50px;}

div.nav ul.nav { width: auto;}

div.nav ul.nav li { color: #2ed1e6; font-size: 1.25rem; font-weight: 500; margin-right: 15px; float: left;}

div.nav ul.nav li a { color: #FFF; }

li a:hover { color: #2ed1e6; }

.product_list {
  max-width: 940px;
  width: 100%;
  height: auto;
  margin: 30px auto 40px auto;
  text-align: center;
  box-sizing: boder-box;
}

.product_list ul li { margin-top: 20px;}

.box {
	background: #FFF;
	padding: 10px;
    border: #f5f3f3 1px solid;
    border-radius: 10px;        /* CSS3草案 */  
     -webkit-border-radius: 10px;    /* Safari,Google Chrome用 */  
     -moz-border-radius: 10px;   /* Firefox用 */ 
	/* box-shadow */
    box-shadow:1px 1px 0px 0px #d4d4d4;
     -moz-box-shadow:1px 1px 0px 0px #d4d4d4;
     -webkit-box-shadow:1px 1px 0px 0px #d4d4d4;
 }
 
.btn_short { width: auto; margin-bottom: 10px; padding-left: 80%; text-align: center;}
 
.btn {
	background: #265fac;
	padding: 5px 8px;
	margin: 5px;
	 text-align: center;
    border: #2ed1e6 1px solid;
    border-radius: 20px;        /* CSS3草案 */  
     -webkit-border-radius: 20px;    /* Safari,Google Chrome用 */  
     -moz-border-radius: 20px;   /* Firefox用 */ 
	/* box-shadow */
    box-shadow:1px 1px 0px 0px #d4d4d4;
     -moz-box-shadow:1px 1px 0px 0px #d4d4d4;
     -webkit-box-shadow:1px 1px 0px 0px #d4d4d4;
	 box-sizing: border-box;
 }
 
a:hover .btn {
	background: #2ed1e6;
	padding: 5px 8px;
	margin: 5px;
	 text-align: center;
	transition-property: all;
    transition: 0.2s linear;
    border: #265fac 1px solid;
    border-radius: 20px;        /* CSS3草案 */  
     -webkit-border-radius: 20px;    /* Safari,Google Chrome用 */  
     -moz-border-radius: 20px;   /* Firefox用 */ 
	/* box-shadow */
    box-shadow:1px 1px 0px 0px #d4d4d4;
     -moz-box-shadow:1px 1px 0px 0px #d4d4d4;
     -webkit-box-shadow:1px 1px 0px 0px #d4d4d4;
	 box-sizing: border-box;
 }
 
.btn span { font-size: 1rem; color: #FFF; }

span.ttl_short {
	font-size: 1.1rem;
	color: #FFF;
	background: #265fac;
	padding: 10px;
	margin: 5px;
	 text-align: left;
    border: #2ed1e6 1px solid;
    border-radius: 20px;        /* CSS3草案 */  
     -webkit-border-radius: 20px;    /* Safari,Google Chrome用 */  
     -moz-border-radius: 20px;   /* Firefox用 */ 
	/* box-shadow */
    box-shadow:1px 1px 0px 0px #d4d4d4;
     -moz-box-shadow:1px 1px 0px 0px #d4d4d4;
     -webkit-box-shadow:1px 1px 0px 0px #d4d4d4;
	 box-sizing: border-box;
 }
 

  @media screen and (max-width: 800px) {
   /* 表示領域が800px以下の場合に適用するスタイル */
   
   .header { width: 100%; min-width: 300px; margin: 0; padding: 10px 20px; z-index: 1000; background: #000; box-sizing: border-box;}

h1.logo {width:100%;height: auto;float: none;}

h1.logo img {width: 100%;}

div.nav {float: none;margin: 20px auto 0 auto;}

div.nav ul.nav { width: auto;}

div.nav ul.nav li {color: #2ed1e6;font-size: 1.4rem;font-weight: 500;margin-right: 15px;float: left;}

div.nav ul.nav li a { color: #FFF; }

li a:hover { color: #2ed1e6; }


   
   .btm_bg { background: url(../img/common/btm_bg.png) top repeat-x; position: fixed; bottom:0; height: 40%; width: 100%; z-index: -1; display: none;}
   
.product_list {
  max-width: 90%;
  width: 90%;
  height: auto;
  margin: 30px auto 40px auto;
  text-align: center;
  box-sizing: boder-box;
}

.product_list img { width: 100%}

.product_list ul li { margin-top: 20px;}


   
}


/*----[slide]-----------------------------------*/

.product_name {
  width: 100%;
  height: auto;
  margin: 0 auto 40px auto;
  padding: 20px;
  color: #fff;
  background: #FFF;
  text-align: center;
  box-sizing: boder-box;
}

h3.pr { font-size: 1.2rem; font-weight: 700; color:#039; text-align: center; width: 100%; padding: 20px; box-sizing: border-box;}

.contents { max-width: 960px; width: 100%; height: auto; margin: 0 auto;}

article.sub_contents { max-width: 960px; height: auto; line-height: 1.8rem; font-size: 0.875rem;  margin: 0 auto;}

article.sub_contents section {width:100%; padding: 10px 20px;  min-height: 300px; margin: 20px 0; box-sizing: border-box; z-index: 1;}


h4.ttl { font-weight: 700; font-size: 1.3rem; margin: 10px auto 20px auto; padding: 0 0 5px 0; border-bottom: #265fac solid 2px; box-sizing: border-box; position: relative;}
 
h4.ttl:before { content: " "; border-left: #265fac solid 5px; margin-right: 10px;}

table.speck { width: 100%; padding: 10px; box-sizing: border-box;}

table.speck td.line { border-bottom: #2ed1e6 solid 3px;}
table.speck td.line2 { border-bottom: #265fac dashed 1px;}

section table td { padding: 10px 0px 5px 10px;}

ul.list,ol.list { margin: 10px 0 20px 0;}

ul.list li { list-style: none; padding-bottom: 5px;}

ol.list li { list-style: none; padding: 5px px 5px 15px; box-sizing: border-box;}

.c-left { width: auto; float: left;}

.c-left img { text-align: center;}

.c-right { width: auto; padding-left: 20px; box-sizing: border-box; float: left;}

.c-center { width: 100%; margin: 20px 0; box-sizing: border-box;}

.speck .c-left { width: 40%;}

.speck .c-right { width: 60%;}

 p.text { font-size: 1rem; text-align: left;line-height: 160%;}
 
dl.qa,term { width: 100%; margin: 15px 0;}
dl.qa dt { padding: 5px 5px 5px 0px; border-bottom: #265fac dotted 1px; box-sizing: border-box;}
dl.qa dt:before { content: " Q "; color:#F30; font-size:1.1rem; font-weight: 700; margin-left: 10px;}
dl.qa dd { padding: 5px;}

dl.performance dt { padding: 5px 5px 5px 0px; border-bottom: #265fac dotted 1px; box-sizing: border-box;}
dl.performance dt:before { content: " ● "; color:#F30; font-size:1.1rem; font-weight: 700; margin-left: 10px;}
dl.performance dd { padding: 5px;}

dl.term dt { padding: 5px 5px 5px 0px; border-bottom: #265fac dotted 1px; box-sizing: border-box;}
dl.term dt:before { content: " ! "; color:#F30; font-size:1.1rem; font-weight: 700; margin-left: 10px;}
dl.term dd { padding: 5px;}




  
  @media screen and (max-width: 800px) {
   /* 表示領域が800px以下の場合に適用するスタイル */
   
article.sub_contents { max-width: 90%; height: auto; line-height: 1.8rem; font-size: 0.875rem;  margin: 0 auto;}

.product_name {
  width: auto;
  height: auto;
  margin: 0 auto 40px auto;
  padding: 20px;
  color: #fff;
  background: #FFF;
  text-align: center;
  box-sizing: boder-box;
}

.product_name img { width: 100%;}

h3.pr { font-size: 1.2rem; font-weight: 700; color:#039; text-align: left; width: 100%; padding: 10px; box-sizing: border-box;}
   
article.sub_contents section {width:100%; padding: 10px;  min-height: 300px; margin: 20px 0; box-sizing: border-box; z-index: 1;}
   
.c-left { width: 100%; float: none;}

.c-left img {width: 100%; text-align: center;}

.c-right { width: 100%; padding-left: 20px; box-sizing: border-box; float: none;}

.speck .c-left { width: 100%;}

.speck .c-right { width: 100%;}

}

  
  
  @media screen and (max-width: 800px) {
   /* 表示領域が800px以下の場合に適用するスタイル */




}


/*----[contents]-----------------------------------*/



.fb { width: 330px; margin-left: 40px; float: left;}


  @media screen and (max-width: 800px) {
   /* 表示領域が800px以下の場合に適用するスタイル */
   
.contents { height: auto; margin: 0 20px;}

.top_news { width: 90%; height: auto; margin-bottom: 30px; float: left;}

article.news dl dd { padding: 0 0 0 100px; margin: 10px 0; border-bottom: #999 dotted 1px; line-height: 1.8rem; font-size: 0.875rem;}

.fb { width: 100%; margin-left: 20px; float: left;}

.fb_iframe_widget,
.fb_iframe_widget span,
.fb_iframe_widget iframe[style]{
  width: 100% !important;
}
   
   }
   
@media screen and (max-width: 500px) {
   /* 表示領域が500px以下の場合に適用するスタイル */
   
   .contents { height: auto;
    width: auto;
    margin: 10px;}
	
.top_news { width: auto; height: auto; margin-bottom: 30px; float: left;}

article.news dl {width: auto;
    padding: 10px;
    margin-left: 10px;
    line-height: 1.8rem;
    font-size: 0.875rem;}

article.news dl dt {
	width: 100%;
    margin: 10px 0;
    float: none;}

article.news dl dd { 
    padding: 0;
    margin: 10px 0;
    border-bottom: #999 dotted 1px;}
	
	.fb { width: 300px; margin: 0px; float: left;}
	
	.fb_iframe_widget,
.fb_iframe_widget span,
.fb_iframe_widget iframe[style]{
  width: 100% !important;
}


}


/*----[footer]-----------------------------------*/

#footer { background: #e6eae7; width: 100%; height: auto; margin: 30px 0 0 0; padding: 35px 0 0 0; border-top: #cbcecc 1px solid;}

.ft_inner { max-width: 960px; margin: 0 auto;}

.ft_inner .ft_corporate { background: url(../img/common/footer_logo.jpg) left center no-repeat; height: 80px; padding: 20px 20px 10px 110px; margin-left: 100px; font-size: 0.875rem; float: left;}

h4.ft_name { font-weight: 600; margin-bottom: 5px;}

.fb_banner { margin: 20px 50px 10px 70px; text-align: center; float: right;}

ul.ft_nav { height: 26px; width: 375px; margin: 0 auto;}

ul.ft_nav li { color: #fd719c; font-size: 0.875rem; margin-right: 15px; float: left;}

ul.ft_nav li:after { content: " | "; color: #353535; font-size: 1rem; margin-left: 15px;}
ul.ft_nav li.end:after { content: " ";}

.adress { color: #FFF; text-align: center; background-color: #000; width: 100%; min-height: 25px; margin-top: 30px; padding: 5px 0; font-size: 0.875em;}


  @media screen and (max-width: 800px) {
   /* 表示領域が800px以下の場合に適用するスタイル */
   
#footer { background: #e6eae7; width: 100%; height: auto; margin: 30px 0 0 0; padding: 35px 0 0 0; border-top: #cbcecc 1px solid;}

.ft_inner { max-width: 960px; margin: 0 10px;}

.ft_inner .ft_corporate { background: url(../img/common/footer_logo.jpg) left center no-repeat; height: auto; padding: 20px 20px 10px 110px; margin-left: 100px; font-size: 0.875rem; float: left;}

h4.ft_name { font-weight: 600; margin-bottom: 5px;}

.fb_banner { margin: 20px 50px 10px 70px; text-align: center; float: right;}

ul.ft_nav { height: 26px; width: 375px; margin: 0 auto;}

ul.ft_nav li { color: #fd719c; font-size: 0.875rem; margin-right: 15px; float: left;}

ul.ft_nav li:after { content: " | "; color: #353535; font-size: 1rem; margin-left: 15px;}
ul.ft_nav li.end:after { content: " ";}

.adress { color: #FFF; text-align: center; background-color: #000; width: 100%; min-height: 25px; margin-top: 30px; padding: 5px 0; font-size: 0.875em;}
   
}

@media screen and (max-width: 500px) {
   /* 表示領域が500px以下の場合に適用するスタイル */
   
   #footer { background: #e6eae7; width: 100%; height: auto; margin: 30px 0 0 0; padding: 35px 0 0 0; border-top: #cbcecc 1px solid;}

.ft_inner { max-width: 960px; margin: 0 auto;}

.ft_inner .ft_corporate { background: url(../img/common/footer_logo.jpg) left center no-repeat;
    height: auto;
    padding: 20px 20px 10px 110px;
    margin-left: 0;
    font-size: 0.875rem;
    float: left;}

h4.ft_name { font-weight: 600; margin-bottom: 5px;}

.fb_banner { margin: 20px auto;
    text-align: center;
    float: right;}

ul.ft_nav { height: 26px;
    width: 100%;
    margin: 0 auto;}

ul.ft_nav li { color: #fd719c;
    font-size: 0.875rem;
    margin-right: 5px;
    float: left;}

ul.ft_nav li:after { content: " | "; color: #353535; font-size: 1rem; margin-left: 0px;}
ul.ft_nav li.end:after { content: " ";}

.adress { color: #FFF; text-align: center; background-color: #000; width: 100%; min-height: 25px; margin-top: 30px; padding: 5px 0; font-size: 0.875em;}
}


/*----[subpage共通]-----------------------------------*/