@charset "utf-8";

@import url(notosans_subset.css);

/* ============================================================================================

	margin set

============================================================================================ */
p{
margin:0;
line-height:180%;
}

table{
margin:0;
word-break:break-all;
word-wrap:break-word;
}

ul,ol{
margin:0;
padding:0;
list-style:none;
}

dl{
margin:0;
padding:0;
}
dl dd{
margin:0;
padding:0;
}

h1{
margin:0;
}

h2{
margin:0;
}

h3{
margin:0;
}

h4{
margin:0;
}

h5{
margin:0;
}

h6{
margin:0;
}


* For modern browsers */
.cf:before,
.cf:after {
    content:"";
    display:table;
}
 
.cf:after {
    clear:both;
}
 
/* For IE 6/7 (trigger hasLayout) */
.cf {
    zoom:1;
}










/* ============================================================================================

	link style

============================================================================================ */
a{
color:#606d75;
outline:none;

-webkit-transition: 0.3s ease-out;
-moz-transition: 0.3s ease-out;
-o-transition: 0.3s ease-out;
-ms-transition: 0.3s ease-out;
transition: 0.3s ease-out;

}
a:hover,a:active{
	color: #1f7c97;
	text-decoration:none;
}

/* ============================================================================================

	base style

============================================================================================ */
html{
height:100%;
font-size:62.5%;
overflow-x: hidden;
}

body{
background:#fff;
min-width:980px;
-webkit-text-size-adjust:100%;
/*font-family:Helvetica, Arial,'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;*/
font-family: 'Aileron', 'Noto Sans','游ゴシック',YuGothic,"メイリオ","Meiryo",'ヒラギノ角ゴ ProN W3',"Hiragino Kaku Gothic ProN","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック","MS PGothic",Sans-Serif;
font-size: 14px;
font-size: 1.5rem;


font-weight: 300;
color: #4a5556;
overflow-x: hidden;
background-color: #f6f6f6;

-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
	
	
}

.mincho {
	font-family:"Quattrocento","游明朝体","Yu Mincho",YuMincho,"ヒラギノ明朝 Pro","Hiragino Mincho Pro","ＭＳ Ｐ明朝","MS PMincho",serif;
}


h1 {
	font-size: 72px;
	font-size: 7.2rem;
	font-weight: 100;

	line-height: 120%;
}

h2 {
	font-size: 54px;
	font-size: 5.4rem;
	font-weight: 100;
	color: #333;

	margin-bottom: 0.3em;
}

h3 {
	font-size: 42px;
	font-size: 4.2rem;
	font-weight: 100;
}

h4 {
	font-size: 32px;
	font-size: 3.2rem;
	line-height: 130%;

	color: #333;
}




h2.h2-01::after {
    border-bottom: 1px solid #333;
    content: "";
    display: block;
    margin-top: 20px;
    width: 60px;
}
h2.h2-01 {
    clear: both;
    counter-reset: h3-counter;
    font-size: 3.0rem;
    font-weight: 300;
    line-height: 130%;
    margin: 0px 0 26px;
	text-align:left;
	padding-left: 0;
}

@media screen and (max-width: 764px){
h2.h2-01 {
    font-size: 20px;
}
}

h2.h2-02 {
    clear: both;
	height:55px;
	padding-top:10px;
	background-color:#f0f0f0;
    font-size: 24px;
    font-weight: 300;
    line-height: 130%;
	text-align:center;
	padding-left: 0;
	margin:20px 0;
}

h2.h2-02::before {
    clear: both;
}

@media screen and (max-width: 764px){
h2.h2-02 {
    height: auto;
	padding-bottom: 10px;
	font-size:20px;
}
}


h3.h3-01::after {
    border-bottom: 1px solid #333;
    content: "";
    display: block;
    margin-top: 20px;
    width: 60px;
}
h3.h3-01 {
    clear: both;
    counter-reset: h3-counter;
    font-size: 2.2rem;
    font-weight: 300;
    line-height: 130%;
    margin: 0px 0 26px;
	text-align:left;
	padding-left: 0;
}


h3.h3-02::after {
    border-bottom: 1px solid #333;
    content: "";
    display: block;
    margin: 20px auto 0 auto;
    width: 60px;
}
h3.h3-02 {
    clear: both;
    counter-reset: h3-counter;
    font-size: 3rem;
    font-weight: 300;
    line-height: 130%;
    margin: 40px 0 26px;
	text-align:center;
	padding-left: 0;
}
@media screen and (max-width: 764px){
h3.h3-02 {
    font-size: 20px;
}
}



@media screen and (max-width: 764px){
body{
min-width:320px;
}
}
#wrapper{
min-height:100%;
position:relative;
}
@media screen and (max-width: 764px){
#wrapper{
overflow:hidden;
}
}

/* ============================================================================================

	header set

============================================================================================ */
#gheader{
background:#fff;
}

#gheaderInner{
width:980px;
margin:0 auto;
}
#gheaderInner:after{
content:"";
clear:both;
display:block;
}
@media screen and (max-width: 764px){
#gheaderInner{
width:auto;
position:relative;
}
}
#gheaderInner .logo{
float:left;
text-align:center;
width:160px;
padding-top:20px;
padding-bottom:14px;
margin-left:-100%;
padding-left:100%;
box-sizing: content-box;
}

#gheaderInner .logo img {
	width:100%;
	height:100%;
}

@media screen and (max-width: 764px){
#gheaderInner .logo{
margin:0;
padding: 10px 0 10px 10px;
width:120px;
}
#gheaderInner .logo img{

height:auto;
}
#gheaderInner .logo a{
display:block;
margin:-10px;
padding:10px;
}
}
#gheaderInner #gnav{
display:table;
padding-left:36px;
overflow:hidden;
float:right;
}
@media screen and (max-width: 764px){
#gheaderInner #gnav{
display:block;
height:0;
padding-left:0;
position:absolute;
top:51px;
left:0;
z-index:9999;
width:100%;
}
}
@media screen and (max-width: 764px){
#gheaderInner #gnav > ul{
border-bottom:10px solid #015db2;
}
}
#gheaderInner #gnav > ul > li{
display:table-cell;
vertical-align:middle;
}
#gheaderInner #gnav > ul > li > a{
display:block;
width:112px;
height:80px;
background:url(../images/common/header_gnav_pc_01.png) 0 0 no-repeat;
overflow:hidden;
text-indent:-9999px;
}
#gheaderInner #gnav > ul > li + li > a{
background-position:-112px 0;
}
#gheaderInner #gnav > ul > li + li + li > a{
background-position:-224px 0;
}
#gheaderInner #gnav > ul > li + li + li + li > a{
background-position:-336px 0;
}
#gheaderInner #gnav > ul > li + li + li + li + li > a{
background-position:-448px 0;
}
#gheaderInner #gnav > ul > li + li + li + li + li + li > a{
background-position:-560px 0;
}
#gheaderInner #gnav > ul > li + li + li + li + li + li + li > a{
background-position:-672px 0;
}
#gheaderInner #gnav > ul > li:hover a,#gheaderInner #gnav > ul > li.active > a{
background-position:0 -80px;
}
#gheaderInner #gnav > ul > li + li:hover > a,#gheaderInner #gnav > ul > li + li.active > a{
background-position:-112px -80px;
}
#gheaderInner #gnav > ul > li + li + li:hover > a,#gheaderInner #gnav > ul > li + li + li.active > a{
background-position:-224px -80px;
}
#gheaderInner #gnav > ul > li + li + li + li:hover > a,#gheaderInner #gnav > ul > li + li + li + li.active > a{
background-position:-336px -80px;
}
#gheaderInner #gnav > ul > li + li + li + li + li:hover > a,#gheaderInner #gnav > ul > li + li + li + li + li.active > a{
background-position:-448px -80px;
}
#gheaderInner #gnav > ul > li + li + li + li + li + li:hover > a,#gheaderInner #gnav > ul > li + li + li + li + li + li.active > a{
background-position:-560px -80px;
}
#gheaderInner #gnav > ul > li + li + li + li + li + li + li:hover > a,#gheaderInner #gnav > ul > li + li + li + li + li + li + li.active > a{
background-position:-672px -80px;
}
@media screen and (max-width: 764px){
#gheaderInner #gnav > ul > li{
display:block;
background:#fff;
}
#gheaderInner #gnav > ul > li:nth-of-type(odd){
background:#f0f3f4;
}
#gheaderInner #gnav > ul > li a{
display:block;
width:100%;
height:50px;
background:url(../images/common/header_gnav_sp_01.gif) 25px 0 no-repeat;
background-size:210px auto;
overflow:hidden;
text-indent:-9999px;
}
#gheaderInner #gnav > ul > li:hover a,#gheaderInner #gnav > ul > li.active a{
background-position:25px 0;
}
#gheaderInner #gnav > ul > li + li a,#gheaderInner #gnav > ul > li + li:hover a,#gheaderInner #gnav > ul > li + li.active a{
background-position:25px -50px;
}
#gheaderInner #gnav > ul > li + li + li a,#gheaderInner #gnav > ul > li + li + li:hover a,#gheaderInner #gnav > ul > li + li + li.active a{
background-position:25px -100px;
}
#gheaderInner #gnav > ul > li + li + li + li a,#gheaderInner #gnav > ul > li + li + li + li:hover a,#gheaderInner #gnav > ul > li + li + li + li.active a{
background-position:25px -150px;
}
#gheaderInner #gnav > ul > li + li + li + li + li a,#gheaderInner #gnav > ul > li + li + li + li + li:hover a,#gheaderInner #gnav > ul > li + li + li + li + li.active a{
background-position:25px -200px;
}
#gheaderInner #gnav > ul > li + li + li + li + li + li a,#gheaderInner #gnav > ul > li + li + li + li + li + li:hover a,#gheaderInner #gnav > ul > li + li + li + li + li + li.active a{
background-position:25px -250px;
}
#gheaderInner #gnav > ul > li + li + li + li + li + li + li a,#gheaderInner #gnav > ul > li + li + li + li + li + li + li:hover a,#gheaderInner #gnav > ul > li + li + li + li + li + li + li.active a{
background-position:25px -300px;
}
}
#gheaderInner #gnav > ul > li:hover .megaMenu{
display:block;
}
@media screen and (max-width: 764px){
#gheaderInner #gnav > ul > li:hover .megaMenu{
display:none;
}
}
#gheaderInner #gnav .megaMenu{
position:absolute;
top:80px;
left:0;
width:100%;
background:#f2f5f6;
display:none;
border-bottom:15px solid #fff;
z-index:99999;
}
#gheaderInner #gnav .megaMenu.product{
background:url(../../shared/images/gnav_bg_megaMenu_01.gif) 0 100% repeat-x #f2f5f6;
}
#gheaderInner #gnav .megaMenu.product > ul{
width:980px;
padding:0;
}
#gheaderInner #gnav .megaMenu.product > ul li{
padding:0 20px 15px;
word-break:keep-all;
word-wrap:normal;
}
#gheaderInner #gnav .megaMenu.product > ul li.prodImg{
padding:0;
width:auto;
line-height:0;
}
#gheaderInner #gnav .megaMenu.product > ul li.prodImg a{
display:inline-block;
position:relative;
bottom:0;
}
#gheaderInner #gnav .megaMenu.product > ul li.prodImg + .prodImg + li,#gheaderInner #gnav .megaMenu.product > ul li.prodImg + .prodImg + li + li{
margin-top:50px;
}
#gheaderInner #gnav .megaMenu.cmgraphic ul{
padding-left:230px;
width:690px;
}
#gheaderInner #gnav .megaMenu > ul{
width:920px;
margin:0 auto;
padding:30px 30px 15px;
}
#gheaderInner #gnav .megaMenu > ul:after{
content:"";
clear:both;
display:block;
}
#gheaderInner #gnav .megaMenu > ul li{
padding:0 20px 12px;
float:left;
width:190px;
}
#gheaderInner #gnav .megaMenu > ul li a{
color:#015db2;
font-weight:bold;
text-decoration:none;
}
#gheaderInner #gnav .megaMenu > ul li span{
display:block;
padding-left:12px;
margin-top:10px;
font-size:1.16em;
background:url(../../shared/images/mod_ico_arwR_01_ie.png) 0 0.5em no-repeat;
}
#gheaderInner .spNav{
position:absolute;
height:51px;
width:54px;
top:0;
right:0;
border-left:1px solid #1153ae;
/*
	&.active{
	background:#1153ae;
		a{
		border-color:#1153ae;

		&:after{
		border-color:#fff;
		top:7px;
		@include transform(rotate(-45deg));
		}
		&:before{
		border-color:#fff;
		bottom:9px;
		@include transform(rotate(-135deg));
		}
		}
	}
*/
}
#gheaderInner .spNav a{
text-indent:-9999px;
display:block;
position:relative;
width:26px;
height:20px;
margin:13px 14px;
border-top:3px solid #1153ae;
/*		@include transition(all,0.3s);*/
}
#gheaderInner .spNav a:after,#gheaderInner .spNav a:before{
content:"";
display:block;
width:100%;
height:0;
border-top:3px solid #1153ae;
position:absolute;
left:0;
/*		@include transition(all,0.3s);*/
}
#gheaderInner .spNav a:after{
top:6px;
}
#gheaderInner .spNav a:before{
bottom:0;
}
#gheaderInner .spNav.active{
background:url(../images/common/header_gnav_ico_sp_01.gif) 14px 50% no-repeat #015db2;
background-size:22px auto;
}
#gheaderInner .spNav.active a{
border:none;
}
#gheaderInner .spNav.active a:after,#gheaderInner .spNav.active a:before{
border:none;
}


.menu > li.menu__single {
    position: relative;
}

ul.menu__second-level {
    visibility: hidden;
    opacity: 0;
    z-index: 1;
}



li.menu__single ul.menu__second-level {
    position: absolute;
    top: 80px;
    width: 150px;
    background: #F7F7F7;
    -webkit-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
	font-size:12px;
}

li.menu__single:hover ul.menu__second-level {
    top: 80px;
    visibility: visible;
    opacity: 1;
}

li.menu__single ul.menu__second-level li {
	padding:10px;
	border-bottom:1px solid #898989;
}

li.menu__single ul.menu__second-level li a:hover {
	color:#083864;
}

li.menu__single ul.menu__second-level li:after {
	display: block;
	content: "";
	position: absolute;
	right: 15px;
	width: 8px;
	height: 8px;
	margin-top: -12px;
	border-top: solid 1px #636363;
	border-right: solid 1px #636363;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

li.menu__single ul.menu__second-level li:hover::after {
	animation: arrow_submenu .2s;
}
@keyframes arrow_submenu {
	50% {
		right: 13px;
	}
	100% {
		right: 10px;
	}
}

@media screen and (max-width: 764px){
li.menu__single:hover ul.menu__second-level {
    visibility: hidden;
}
}



/* ============================================================================================

	topicpath set

============================================================================================ */
.topicpath{
padding:13px 0;
-webkit-background:rgba(5, 33, 92, 0.8);
-moz-background:rgba(5, 33, 92, 0.8);
-o-background:rgba(5, 33, 92, 0.8);
background:rgba(5, 33, 92, 0.8);
filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#cc05215c,EndColorStr=#cc05215c);
}
@media screen and (max-width: 764px){
.topicpath{
padding:9px 0;
}
}
.topicpath ul{
width:908px;
padding:0 36px;
margin:0 auto;
}
.topicpath ul:after{
content:"";
clear:both;
display:block;
}
@media screen and (max-width: 764px){
.topicpath ul{
width:auto;
margin:0 15px;
padding:0;
}
}
.topicpath li{
float:left;
margin-left:30px;
color:#fff;
font-size:0.833em;
position:relative;
}
.topicpath li:after{
content:'＞';
position:absolute;
left:-20px;
top:0;
text-decoration:none;
color:#fff;
}
.topicpath li:first-child{
margin-left:0;
}
.topicpath li:first-child:after{
display:none;
}
.topicpath a{
color:#fff;
display:block;
}


/* ============================================================================================

	loader
	http://tobiasahlin.com/spinkit/
	
============================================================================================ */

#loader-bg {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  background: #fff;
  z-index: 1000;
}

#loader {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 200px;
  margin-top: -100px;
  margin-left: -100px;
  text-align: center;
  z-index: 2;
}

.sk-folding-cube {
  margin: 20px auto;
  width: 40px;
  height: 40px;
  position: relative;
  -webkit-transform: rotateZ(45deg);
          transform: rotateZ(45deg);
}

.sk-folding-cube .sk-cube {
  float: left;
  width: 50%;
  height: 50%;
  position: relative;
  -webkit-transform: scale(1.1);
      -ms-transform: scale(1.1);
          transform: scale(1.1); 
}
.sk-folding-cube .sk-cube:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #083864;
  -webkit-animation: sk-foldCubeAngle 2.4s infinite linear both;
          animation: sk-foldCubeAngle 2.4s infinite linear both;
  -webkit-transform-origin: 100% 100%;
      -ms-transform-origin: 100% 100%;
          transform-origin: 100% 100%;
}
.sk-folding-cube .sk-cube2 {
  -webkit-transform: scale(1.1) rotateZ(90deg);
          transform: scale(1.1) rotateZ(90deg);
}
.sk-folding-cube .sk-cube3 {
  -webkit-transform: scale(1.1) rotateZ(180deg);
          transform: scale(1.1) rotateZ(180deg);
}
.sk-folding-cube .sk-cube4 {
  -webkit-transform: scale(1.1) rotateZ(270deg);
          transform: scale(1.1) rotateZ(270deg);
}
.sk-folding-cube .sk-cube2:before {
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
}
.sk-folding-cube .sk-cube3:before {
  -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s; 
}
.sk-folding-cube .sk-cube4:before {
  -webkit-animation-delay: 0.9s;
          animation-delay: 0.9s;
}
@-webkit-keyframes sk-foldCubeAngle {
  0%, 10% {
    -webkit-transform: perspective(140px) rotateX(-180deg);
            transform: perspective(140px) rotateX(-180deg);
    opacity: 0; 
  } 25%, 75% {
    -webkit-transform: perspective(140px) rotateX(0deg);
            transform: perspective(140px) rotateX(0deg);
    opacity: 1; 
  } 90%, 100% {
    -webkit-transform: perspective(140px) rotateY(180deg);
            transform: perspective(140px) rotateY(180deg);
    opacity: 0; 
  } 
}

@keyframes sk-foldCubeAngle {
  0%, 10% {
    -webkit-transform: perspective(140px) rotateX(-180deg);
            transform: perspective(140px) rotateX(-180deg);
    opacity: 0; 
  } 25%, 75% {
    -webkit-transform: perspective(140px) rotateX(0deg);
            transform: perspective(140px) rotateX(0deg);
    opacity: 1; 
  } 90%, 100% {
    -webkit-transform: perspective(140px) rotateY(180deg);
            transform: perspective(140px) rotateY(180deg);
    opacity: 0; 
  }
}

.sk-cube-grid {
  width: 40px;
  height: 40px;
  margin: 100px auto;
}

.sk-cube-grid .sk-cube {
  width: 33%;
  height: 33%;
  background-color: #083864;
  float: left;
  -webkit-animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
          animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out; 
}
.sk-cube-grid .sk-cube1 {
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s; }
.sk-cube-grid .sk-cube2 {
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s; }
.sk-cube-grid .sk-cube3 {
  -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s; }
.sk-cube-grid .sk-cube4 {
  -webkit-animation-delay: 0.1s;
          animation-delay: 0.1s; }
.sk-cube-grid .sk-cube5 {
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s; }
.sk-cube-grid .sk-cube6 {
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s; }
.sk-cube-grid .sk-cube7 {
  -webkit-animation-delay: 0s;
          animation-delay: 0s; }
.sk-cube-grid .sk-cube8 {
  -webkit-animation-delay: 0.1s;
          animation-delay: 0.1s; }
.sk-cube-grid .sk-cube9 {
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s; }

@-webkit-keyframes sk-cubeGridScaleDelay {
  0%, 70%, 100% {
    -webkit-transform: scale3D(1, 1, 1);
            transform: scale3D(1, 1, 1);
  } 35% {
    -webkit-transform: scale3D(0, 0, 1);
            transform: scale3D(0, 0, 1); 
  }
}

@keyframes sk-cubeGridScaleDelay {
  0%, 70%, 100% {
    -webkit-transform: scale3D(1, 1, 1);
            transform: scale3D(1, 1, 1);
  } 35% {
    -webkit-transform: scale3D(0, 0, 1);
            transform: scale3D(0, 0, 1);
  } 
}