@charset "utf-8";

/* ========================================================
   universal class
   ======================================================= */

.sp{display: none;}

.center{text-align: center;}

.itembox{clear: both;}
.leftbox{float:left;text-align: left;}
.rightbox{float:right;text-align: right;}
.rightbox p{text-align: left;}

.x2{width:20%;}
.x3{width:30%;}
.x4{width:40%;}
.x5{width:50%;}
.x6{width:60%;}
.x7{width:70%;}
.x8{width:80%;}

a:link{color:#1c62b9;}
a:hover,a:active {color: #f6c;}

/* iframe ex.youtube/googlemap */

.frame-wrap{
 margin: 4%;
}

/* ========================================================
   micro clearfix
   ======================================================= */

dl:after,
.ir .localnav:after,
.corp .localnav:after,
.itembox:after,
#main:after{
content:"";
display: table;
clear:both;
}

/* ========================================================
  Common foundation
   ======================================================= */

h2{
padding:30px 60px;
font-size:30px;
font-weight:100;
}

h2 a:link,
h2 a:hover,
h2 a:active,
h2 a:visited{color:#444;}

h3,h4,h5{
clear:both;	
font-weight:100;
}

h3{
	margin: 40px 0;
	padding:24px;
	/*background: #00559d;*/
	color:#00559d;
	font-size:22px;
	text-align: center;
	border-top: 5px solid #f0f6fa;
	border-bottom: 5px solid #f0f6fa;
	font-weight: bold;
}

.spt h3 {
	max-width: 970px;
	margin: 40px auto;
	box-sizing: border-box;
}

h3 span{
padding:7px 60px;
background-repeat: no-repeat;
background-position: 0 center;
}

h3 small {
	font-size: 72%;
	margin-top: 15px;
	display: inline-block;
}

.corp h4,
.spt h4,
.ir h4 {
	position: relative;
	margin: 40px 0;
	padding: 6px 15px;
	/*border: 1px solid #00559d;
	border-radius:10px;*/
		border-left: 5px solid #00559d;
	color: #00559d;
	font-size:18px;
	font-weight: bold;
	background: #f0f6fa;
}

h5{
	padding: 6px 0;
	color: #00559d;
	font-size:16px;
	margin: 20px 2%;
	font-weight: bold;
}

p {margin:2%;}

ol,ul{	margin-left: 3%;}

table{
width:96%;
margin:60px 2%;
border-top: 1px solid #ccc;
}

th{
padding:1%;
width:30%;
background:#f0f0f0;
text-align: center;
font-weight:100;
}

td{padding:2%;}
tr{border-bottom: 1px solid #ccc;}

table p.note{
width:100%;
font-size:11px;
margin: 4px 0;}

address{margin: 2%;}

blockquote{
line-height:140%;
padding-left:20px;
margin-left:20px;
margin-right:20px;
margin-bottom:15px;
border-left:#CCCCCC solid 8px;
color:#666666;
}

#contents{
clear: both;
font-size:15px;}

#main{
clear: both;
margin-bottom: 80px;
}

#bnrarea{
border-top: 1px solid #fff;
background:url(/products/image/item/bg_bnrarea_long.gif) repeat-x left center;
}

#bnrarea .inr {
display: flex;
flex-direction: column;
}

.country {
list-style: none;
padding: 1em;
flex-wrap: nowrap;
margin-top: 0;
margin-right: 1em;
border-top: 1px dashed #ccc;
box-sizing: border-box;
}
.country:before {
content: "Country: ";
}
.country li:first-child {
margin-left: 0.5em;
}
.country li + li:before {
content: "/";
margin: 0 .5em;
}


/* #bnrarea .inr:before {
	content: "";
	background: url(/support/image/bg_bnrarea.png) repeat-y left center;
	background-size: contain;
	width: 18px;
} */

/* ========================================================
  Navigation Link 
   ======================================================= */

.yearlink{overflow: hidden;}
.yearlink+h3{margin-top: 0;}

.back_page{
margin:0 0.2em;
padding-left: 15px;
background: url(/common/image/arrow_back.png) no-repeat left center;
}

.next_page{
margin:0 0.2em;
padding-right: 15px;
background: url(/common/image/arrow.png) no-repeat right center;
}

.date{
margin-top: 3%;
margin-bottom:6%;
text-align: right;}

.date .release-date{color:#ccc;}

.return,
.backtopage{
margin: 60px 0;
text-align: right;}

.return a{
padding-left: 12px;
background:url(/common/image/arrow_pagetop.png) no-repeat left 7px;}


/* datelist */

.datelist{
clear:both;}

.datelist h5{
margin:0;
padding-left: 14px;
border-bottom: 2px solid #00559d;
background: #F5F5F5;
color:#444;
}

.datelist dt{
float:left;
width:14%;
padding:2%;
}

.datelist dd{
/* width:78%; */
padding:2% 2% 2% 11em;
margin: 0;
border-bottom:1px dotted #ccc;
background-color:#fff;
}

dd a.notice:before{
content: "重要なお知らせ";
background: #F95D74;
color: #fff;
display: inline-block;
margin: -3px 1em 3px 0;
font-size: 14px;
padding: 3px;
}

/* ========================================================
  corp
  ======================================================= */

.corp p.note{margin-top:60px;}

/* Release sns */

#sns {
padding: 8px 0 20px;
margin-top: -12px;
margin-bottom: 10px;
border-bottom: 1px dotted #CCC;
text-align: center;
}

#sns ol,
#sns ol li{list-style: none;display: inline;}
#sns ol img{vertical-align: top;}

span.caption{
display: block;
margin-top:6px;
font-weight: bold;}


/* ========================================================
  IR
  ======================================================= */

.ir #bnrarea .inr{
background:url(/ir/img/bg_ir.png) no-repeat left top;
background-size:cover;}

/* ========================================================
  IR/Corp
  ======================================================= */
		
.ir .localnav,
.corp .localnav{
margin:0 -2% 0 0;
}

.ir .localnav nav,
.corp .localnav nav {
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	flex-wrap: wrap;
}

.ir .localnav dl,
.corp .localnav dl{
/*float:left;*/
width: 23%;
margin: 30px 2% 40px 0%;
}

.ir .localnav dt,
.corp .localnav dt{
padding:10px 0 10px 10px;
background:#F0F0F0;
border-bottom: 2px solid #00559d;
}

.ir .localnav dd,
.corp .localnav dd{
margin-left:0;
border-bottom:1px dotted #ccc;
font-size:13px;
}

.ir .localnav dd a,
.corp .localnav dd a {
display: block;
padding:10px 0 10px 10px;
}


/* ========================================================
  2column Foundation
  ======================================================= */

.mainarea{
float:right;
clear:none;
width:74%;
margin-bottom: 4%;
font-size: 15px;
}

.mainarea p.center{
	margin: 40px 2%;
}

.mainarea .datelist dt{width:18%;}

/*leftmenu*/

.leftmenu{
float:left;
width:22%;
margin:0 4% 4% 0;
padding-top:40px;
}

.leftmenu a{color: #29377b;text-decoration: none;}
.leftmenu a:hover{text-decoration: none;}

.leftmenu dl {
margin: 0 0 20px;
padding-top: 2px;
}

.leftmenu dt {
position:relative;
padding:10px 0 10px 4px;
background:#F0F0F0;
color:#555;
/* font-weight:bold;
border-bottom: 3px solid #2DB3D6; */
}

.leftmenu dd {
margin-left:0;
border-top:1px dotted #ccc;
font-size:13px;
}

.leftmenu dd a      {display: block;padding:6px;}
.leftmenu dd a:hover,
.leftmenu dd a.over{background: #00559d;color: #FFFFFF;}

.leftmenu dl.accordion dt:after {
position: absolute;
right:2%;
top: 50%;
margin-top: -10px;
padding: 0 4px;
border: 1px solid #ccc;
content: "+";
}

.leftmenu dl.accordion dt:hover,
.leftmenu dl.accordion dt.on{
cursor:pointer;
}

.leftmenu dl.accordion dt:hover{
background:#F8F8F8;
color:#00559d;
}

.leftmenu dl.accordion dt.on:after{
padding: 0 7px;
content:"-";
}

/* イベント・キャンペーン情報 */

.exhibition{
 margin-left: 2%;
}

.exhibition ul{
list-style: none;
margin: 0;
padding: 0;
}

.exhibition li{
position: relative;
}

.exhibition li:hover a:after{
background: #333;
color:#fff;
}

.exhibition li:before{
position:absolute;
top: 10%;
left: 36%;
padding:1% 2%;
color:#fff;
background:#39B54A;
}

li.campaign:before{
content:'キャンペーン';
}

li.event:before{
content:'イベント';
}

.exhibition a,
.exhibition .close{
display: block;
width: 92%;
padding: 4%;
margin-bottom: 5%;
background: #EAEAEA;
color: #555;
}

.exhibition a:hover{
background:#F0F0F0;
}

.exhibition a:after {
position: absolute;
right: 4%;
top: 68%;
width: 158px;
padding: 2%;
border: 1px solid #ccc;
background: #fff;
color: #555;
text-align: center;
content: "くわしく見る";
}

#main .exhibition img{
width:30%;
}

.exhibition p{
position: absolute;
top: 34%;
left:38%;
margin:0;
padding-right: 5%;
}

.exhibition p+p{
top: 51%;
line-height: 1.3;
}

/* 個別ページ */

.mainVisual{
margin-bottom:60px;
text-align: center;
}

.eventimage{
margin:6% 0;	
}

.eventimage a{
display: block;
position:relative;
width:600px;
margin:0 auto;
}

.eventimage img{
width:100%;
}

.eventimage a:hover:before{
position: absolute;
top: 0;
height: 100%;
width: 100%;
background: rgba(0,0,0,0.6);
content: "";
}

.eventimage a:hover:after{
position: absolute;
top: 44%;
left: 36%;
color: #fff;
font-size: 23px;
font-weight: bold;
text-align: center;
content: "クリックで拡大";
}

.eventimage p{
position: absolute;
width:100%;
bottom: 0;
padding: 3px 0;
margin: 0 auto;
background: rgba(0,0,0,0.6);
color: #fff;
text-align: center;
}

/*クリック拡大なしの場合*/
.eventimage a.prevent:hover:before,
.eventimage a.prevent:hover:after{
content:normal;
}

/*拡大画像ページのリンク*/

.photolink{
	padding:0 0 4%;
}

/* ========================================================
  support
  ======================================================= */
		
.spt .localnav ul{
	margin:4% 0 2%;
}

.spt .localnav li{
width: 18.79%;
margin-right: 1%;
border-radius: 8px;
border: 1px solid #00559d;
}

.spt .all{background-image: url(/support/image/nav_icon_all.png);}
.spt .os{background-image:url(/support/image/nav_icon_os.png)}
.spt .repair{background-image:url(/support/image/nav_icon_repair.png);}
.spt .call{background-image:url(/support/image/nav_icon_call.png);}
.spt .mail{background-image:url(/support/image/nav_icon_mail.png);}

.spt .localnav a{
display: block;
padding:4px 0;
color:#00559d;
text-decoration: none;
font-size: 18px;
text-align:center;
}

.spt .localnav li.on,
.spt .localnav li:hover{
background-color:#00559d;
}

.spt .localnav li.on a,
.spt .localnav li:hover a{
	color:#fff;
}

/*spttop*/

.spttop .localnav ul{
margin:4% 2%;
}

.spttop .localnav li{
width:48%;
margin:1%;
background-color: #00559d;
background-repeat:no-repeat;
background-position:40px center;
border:none;
}

.spttop li.all{width:98%;}

.spttop .localnav li:hover{
background-color:#666;
}

.spttop .localnav a{
padding: 28px 28px 28px 100px;
text-align: left;
color:#fff;
font-size: 24px;
}

/* support/support.html */

.sptall h4{margin-bottom: 0;}/*カクつき防止*/

.sptall h4:after{
position: absolute;
right:3%;
top: 50%;
margin-top: -18px;
padding: 0 4px;
border: 1px solid #00559d;
content: "+";
}

.sptall h4:hover,
.sptall h4.on{
cursor:pointer;
/*border-color:#f0f0f0;*/
background:#F0F0F0;
}

.sptall h4.on:after{
padding: 0 7px;
content:"-";
}

.productlist{
	margin:0 1%;
}

.productlist dl{
font-size:17px;
border-bottom:1px dotted #ccc;
}

.productlist dt{
clear:both;
float:left;
line-height: 1.2;
width:40%;
padding:1% 2%;
border-top:1px dotted #ccc;
}

.productlist dt span{
font-size: 13px;
color:#777;
}

.productlist dd{
float:right;
width:52%;
padding:1% 2%;
margin: 0;
border-top:1px dotted #ccc;
background-color:#fff;
}

.productlist ul{
list-style: none;
margin: 0;
padding: 0;
}

.productlist li{
float:left;
width:31.33%;
margin-right: 2%;
}

.productlist li a{
display: block;
padding:6px;
background:#00559d;
color:#fff;
text-align: center;
text-decoration: none;
}

.productlist li a:hover{background: #728cc1;}
.productlist li a.disable{	background:#ccc;}

.supportend{
margin: 40px 0 80px;
color: #00559d;
font-size:20px;
}

.supportend a{
position:relative;
display: block;
padding: 8px 20px;
border-radius:10px;
border: 1px solid #00559d;
}

.supportend a:after{
position:absolute;
background: url(/support/image/icon_otherwin.png) no-repeat left top;
content: "";
top: 28%;
right: 3%;
width: 25px;
height: 24px;
border: none;
}

.supportend a:hover{
background:#F0F0F0;
border-color:#f0f0f0;
text-decoration: none;
}


@media only screen and (max-width: 768px) {
	
#main{width:96%;
margin:0 2% 80px;}

#place-navi{display: none;}
	
/* iframe ex.youtube/googlemap */

.frame{
position: relative;
width: 100%;
padding-top: 56.25%;
height: 0; 
overflow: hidden;}

.frame iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

/*corp*/

.leftmenu{
margin:60px 0;
padding-top:0;
border:1px solid #ccc;
border-radius:10px;
}

.leftmenu,
.mainarea{
width:100%;
float:none;
}

.leftmenu dl{
padding:0 0 1px;
margin-bottom: 0;
border-top:0;
border-bottom:1px dotted #ccc;
}

.leftmenu dl:nth-of-type(1) dt{border-radius:10px 10px 0 0;}
.leftmenu dl:last-of-type{
padding-bottom:0;
margin-bottom: 0;
border-bottom:none;
}

.leftmenu dl:last-of-type dt{border-radius:0 0 10px 10px;}
.leftmenu dl:last-of-type dt.on{border-radius:0;}
	
.leftmenu dl:last-of-type dd:last-of-type a{
border-radius:0 0 10px 10px;
}

.ir .localnav,
.corp .localnav{
background-position: right top;
margin-right:0;
}

.ir .localnav dl,
.corp .localnav dl {
width: 46%;
margin:20px 2%;
min-height:270px;
}

.datelist dt,
.ir .datelist dt,
.corp .datelist dt{width:23%;}

#main img{
width:100%;
}

#main img[width]{
	width:auto;
}

/* support */

.spt .localnav li{
width:98%;
margin:0 0 1% 1%;
background-position: 20px center;
}

.spttop .localnav a{
padding-left: 80px;
font-size: 20px;
}

.productlist li{display: table;}

.productlist li a{
display: table-cell;
height: 4em;
vertical-align: middle;
}

.productlist dt{width:96%;}
.productlist dd{width:70%;}

.eventimage a:hover{
	cursor:default;
}

.eventimage a:hover:after,
.eventimage a:hover:before,
.exhibition a:after{
content:normal;
width: 0;/*IE*/	
}

}

@media only screen and (max-width: 490px) {
	
.pc{display:none;}
.sp{display: block;}

h3 {
	font-size: 18px;
	text-align: left;
	padding: 0.5em;
	margin-top: 1.5em;
}
	
h3 br{display: none;}

#bnrarea h2{
background-repeat:repeat-y;
background-size:17px;
background-position: 4% center;
font-size: 20px;
padding: 1em;
}
	
.corp h4,
.spt h4,
.ir h4 {
	font-size: 16px;
}
	
h5 {
	font-size: 15px;
}

.ir .localnav dl,
.corp .localnav dl{
width:96%;
min-height: 0;
margin:30px 2% 0;
}

.ir .datelist,
.corp .datelist{
margin-top: 30px;
}

.datelist dt,
.ir .datelist dt,
.corp .datelist dt{
float:none;
width:92%;
padding:2% 4%;
}

.datelist dd{
width:92%;
padding:0 4% 4%;
}

.corp	.leftbox,
.corp	.rightbox{width:100%;float:none;}

.corp	.leftbox img,
.corp	.rightbox img{margin: 0 auto;display: block;}

.photolink .leftbox,
.photolink .rightbox{
width:inherit;
}

.photolink .leftbox{float: left;}
.photolink .rightbox{float:right;}

.yearlink{margin: 2% 0;}

.exhibition a{
padding: 7% 4%;}

.exhibition li:before{
top:0;
left:0;
}

.exhibition p{
top: 10%;
font-size: 14px;
}

.eventimage a{
width:auto;
}

}