/**********************************************************************/
/* base.css */
/**********************************************************************/


/**********************************************************************/
/* BASE */
/**********************************************************************/


/* SmartPhone setup -------------------------------------- */
html{-webkit-text-size-adjust: none;}
img { max-width :100%; } 


/* BaseLayout -------------------------------------- */
body {
color: #000;
background-color:#fff;
word-break: break-all;
}

#container {
margin: 0px auto;
padding: 0px 0px 0px 0px;
}

header,
#globalnav,
#crumb,
#main,
#totop,
footer,
#footer-nav,
#footer-copyright{
margin: 0px auto;
padding: 0px 0px 0px 0px;
clear:both;
}

.clearfix:after {
content: "";
display: block;
clear: both;
}


/**********************************************************************/
/* CONTENTS */
/**********************************************************************/

/* Header ------------------------------------------------ */

header {
}

#header-inner {
width: 1000px;
margin: 0px auto;
padding: 0px 0px 0px 0px;
}

/* Main  -------------------------------------------- */

#main {
}

#main-inner {
width: 1000px;
margin: 0px auto;
padding: 0px 0px 0px 0px;
}

/* Main -- 1 column  --------------------------------- */

#one-col-01 {
width: 1000px;
background-color: #fff;
}


/* Main -- 2 column  --------------------------------- */

#two-col-01 {
float: left;
width: 500px;
}

#two-col-02 {
float: right;
width: 500px;
}

/* Main -- 3 column  --------------------------------- */

#three-col-01 {
float: left;
width: 600px;
background-color: #fff;
}

#three-col-02 {
float: left;
width: 220px;
margin-left: 20px;
background-color:#e8e8e8;
}

#three-col-03 {
float: right;
width: 140px;
background-color:#ccc;
}

/* gnav  ------------------------------------- */
#gnav-sp{
display: inline;
}

#menu{
display: none;
position: fixed;
top: 0px;
width: 100%;
z-index: 1000;
}

#gnav-sp ul {
margin:0px 0px 0px 0px;
padding:20px 0px 0px 0px;
background-color: #f7f7f7;
}

#gnav-sp ul li {
display: block;
margin:0px 0px 0px 0px;
padding:12px 20px 12px 20px;
border-bottom: 1px solid #9F9F9F;
width: 100%;
}

#gnav-sp ul li:last-child {
border-bottom: none;
}

#gnav-sp ul li a {
display: inline-block;
width: 100%;
}

/* Main -- COMMON STYLE  ----------------------------- */
article {
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
clear:both;
}

p {
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}

h1 {
margin:0px 0px 0px 0px;
padding:20px 0px 0px 0px;
}

h1 a img:hover {
opacity: 1;
}

h2 {
display: block;
margin:10px 0px 0px 0px;
padding:10px;
background-color: #d9e5ff;
}

h2.h2-i-ios {
display: block;
margin:10px 0px 0px 0px;
padding:10px;
background-color: #ffecc2;
}

h2 img {
width:426px;
}

h3.h3-midashi {
font-size: 150%;
}

p.p-catch {
color: #000;
font-size: 130%;
font-weight: bold;
margin:0px 0px 10px 0px;
padding:0px 0px 0px 0px;
}

a img:hover {
opacity: 0.8;
}

.box-all {
margin:0px 0px 50px 0px;
padding:0px 0px 0px 0px;
clear:both;
}

.al-center {
text-align: center; 
}

.lineup {
margin:0px 0px 0px 0px;
padding:0px 0px 30px 0px;
clear: both;
color: #d30000;
font-size: 110%;
}

.lineup-l {
float: left;
width: 300px;
margin:0px 0px 30px 0px;
padding:0px 46px 0px 0px;
}

.lineup-r {
float: right;
width: 700px;
margin:0px 0px 30px 0px;
padding:0px 0px 0px 0px;
}

.lineup-r02 {
float: right;
width: 420px;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 30px;
}

.lineup-r02 img {
opacity: 1;
}

.lineup-c {
float: left;
width: 280px;
border-right: 2px solid #c6c4c4;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}

.lineup-last {
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
clear: both;
color: #d30000;
font-size: 110%;
}

.lineup-last .lineup-l {
float: left;
width: 300px;
margin:0px 0px 0px 0px;
padding:0px 46px 0px 0px;
}

.lineup-l h3 {
display: block;
width: 254px;
height: 134px;
color: #fff;
font-size: 150%;
text-align: center;
letter-spacing: 20px;
font-weight: normal;
border-radius: 10px;
margin: 4px 0px 0px 0px;
padding: 50px 0px 0px 20px;
}

.lineup-l h3#lineup-l-en {
background: url(../../img/common/i-en-l-sp.png), url(../../img/common/i-en-r.png), #83407e; /* Old browsers */
background: url(../../img/common/i-en-l-sp.png), url(../../img/common/i-en-r.png), -moz-linear-gradient(left,  #83407e 0%, #bd65ae 100%); /* FF3.6-15 */
background: url(../../img/common/i-en-l-sp.png), url(../../img/common/i-en-r.png), -webkit-linear-gradient(left,  #83407e 0%,#bd65ae 100%); /* Chrome10-25,Safari5.1-6 */
background: url(../../img/common/i-en-l-sp.png), url(../../img/common/i-en-r.png), linear-gradient(to right,  #83407e 0%,#bd65ae 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#83407e', endColorstr='#bd65ae',GradientType=1 ); /* IE6-9 */
}

.lineup-l h3#lineup-l-su {
background: url(../../img/common/i-su-l-sp.png), url(../../img/common/i-su-r.png), #0072db; /* Old browsers */
background: url(../../img/common/i-su-l-sp.png), url(../../img/common/i-su-r.png), -moz-linear-gradient(left,  #0072db 0%, #00a9ef 100%); /* FF3.6-15 */
background: url(../../img/common/i-su-l-sp.png), url(../../img/common/i-su-r.png), -webkit-linear-gradient(left,  #0072db 0%,#00a9ef 100%); /* Chrome10-25,Safari5.1-6 */
background: url(../../img/common/i-su-l-sp.png), url(../../img/common/i-su-r.png), linear-gradient(to right,  #0072db 0%,#00a9ef 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0072db', endColorstr='#00a9ef',GradientType=1 ); /* IE6-9 */
}

.lineup-l h3#lineup-l-koku {
background: url(../../img/common/i-koku-l-sp.png), url(../../img/common/i-koku-r.png), #d64044; /* Old browsers */
background: url(../../img/common/i-koku-l-sp.png), url(../../img/common/i-koku-r.png), -moz-linear-gradient(left,  #d64044 0%, #ff5e44 100%); /* FF3.6-15 */
background: url(../../img/common/i-koku-l-sp.png), url(../../img/common/i-koku-r.png), -webkit-linear-gradient(left,  #d64044 0%,#ff5e44 100%); /* Chrome10-25,Safari5.1-6 */
background: url(../../img/common/i-koku-l-sp.png), url(../../img/common/i-koku-r.png), linear-gradient(to right,  #d64044 0%,#ff5e44 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d64044', endColorstr='#ff5e44',GradientType=1 ); /* IE6-9 */
}

.lineup-l h3#lineup-l-ri {
background: url(../../img/common/i-ri-l-sp.png), url(../../img/common/i-ri-r.png), #3e7c42; /* Old browsers */
background: url(../../img/common/i-ri-l-sp.png), url(../../img/common/i-ri-r.png), -moz-linear-gradient(left,  #3e7c42 0%, #55ba59 100%); /* FF3.6-15 */
background: url(../../img/common/i-ri-l-sp.png), url(../../img/common/i-ri-r.png), -webkit-linear-gradient(left,  #3e7c42 0%,#55ba59 100%); /* Chrome10-25,Safari5.1-6 */
background: url(../../img/common/i-ri-l-sp.png), url(../../img/common/i-ri-r.png), linear-gradient(to right,  #3e7c42 0%,#55ba59 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3e7c42', endColorstr='#55ba59',GradientType=1 ); /* IE6-9 */
}

.lineup-l h3#lineup-l-sha {
background: url(../../img/common/i-sha-l-sp.png), url(../../img/common/i-sha-r.png), #ed901d; /* Old browsers */
background: url(../../img/common/i-sha-l-sp.png), url(../../img/common/i-sha-r.png), -moz-linear-gradient(left,  #ed901d 1%, #f6bb38 100%); /* FF3.6-15 */
background: url(../../img/common/i-sha-l-sp.png), url(../../img/common/i-sha-r.png), -webkit-linear-gradient(left,  #ed901d 1%,#f6bb38 100%); /* Chrome10-25,Safari5.1-6 */
background: url(../../img/common/i-sha-l-sp.png), url(../../img/common/i-sha-r.png), linear-gradient(to right,  #ed901d 1%,#f6bb38 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ed901d', endColorstr='#f6bb38',GradientType=1 ); /* IE6-9 */
}

.lineup-l h3#lineup-l-en,
.lineup-l h3#lineup-l-su,
.lineup-l h3#lineup-l-koku,
.lineup-l h3#lineup-l-ri,
.lineup-l h3#lineup-l-sha {
background-repeat: no-repeat, no-repeat, repeat;
background-position: 6%, 94%, 100%;
background-size: 66px, 24px, 100%;
}

.lineup-last .lineup-r {
float: right;
width: 700px;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}

.lineup li,
.lineup-last li {
display: inline;
margin:0px 0px 0px 0px;
padding: 0px 20px 0px 0px;
}

.lineup-r img,
.lineup-r02 img,
.lineup-c img {
width:66px;
}

.linkbn {
text-align: center;
}

/* footer ---------------------------------------- */
footer {
}

#footer-copyright {
background-image: url(../../img/common/bg-footer.png);
background-repeat: repeat-x;
}

#footer-copyright-inner {
width: 1000px;
margin: 0px auto;
padding: 20px 0px 10px 0px;
text-align: center;
color: #999;
font-size: 90%;
}


/**********************************************************************/
/* STYLE */
/**********************************************************************/

/* Link ------------------------------------------------ */
a {
text-decoration:underline;
}

a:link {
color: #000;
}

a:visited {
color:#000;
}

a:hover {
color:#F00;
}

a:active {
color:#F00;
}

#globalnav-inner ul li a {
display: block;
text-decoration: none;
padding: 0px 0px 0px 20px;
}

#globalnav-inner ul li a:link {
color:#fff;
}

#globalnav-inner ul li a:visited {
color:#fff;
}

#globalnav-inner ul li a:hover {
color:#fff;
}

#globalnav-inner ul li a:active {
color:#fff;
}


/**********************************************************************/
/* max-width : 1000px ***** FOR TL or PC */
/**********************************************************************/
@media screen and (max-width : 1000px){
#header-inner,
#gnav-inner,
#crumb-inner,
#main-inner,
#totop-inner,
#footer-nav-inner,
#footer-copyright-inner
{
width: 96%;
}

h1 {
width: 70%;
}

.lineup-l {
float: left;
width: 100%;
padding:0px 0px 0px 0px;
}

.lineup-r {
float: left;
width: 100%;
padding:0px 0px 0px 0px;
}

.lineup-r02 {
float: left;
width: 100%;
padding:0px 0px 0px 0px;
}

.lineup-c {
float: left;
width: 100%;
border-right: none;
margin:0px 0px 0px 0px;
padding:0px 0px 30px 0px;
}

.lineup-last {
padding:0px 0px 0px 0px;
}

.lineup-last .lineup-l {
float: left;
width: 100%;
padding:0px 0px 30px 0px;
}

.lineup-last .lineup-r {
float: left;
width: 100%;
padding:0px 0px 0px 0px;
}

.lineup-l h3 {
display: block;
width: 100%;
height: 66px;
text-align: left;
letter-spacing: inherit;
border-radius: 10px;
margin: 4px 0px 0px 0px;
padding: 14px 0px 0px 80px;
}

.lineup-l h3#lineup-l-en,
.lineup-l h3#lineup-l-su,
.lineup-l h3#lineup-l-koku,
.lineup-l h3#lineup-l-ri,
.lineup-l h3#lineup-l-sha {
background-repeat: no-repeat, no-repeat, repeat;
background-position: 1%, 98%, 100%;
background-size: 66px, 0, 100%;
}
}

/**********************************************************************/
/* max-width : 767px ***** FOR SP */
/**********************************************************************/
@media screen and (max-width : 767px){
#header-inner,
#crumb-inner,
#main-inner,
#totop-inner,
#footer-nav-inner,
#footer-copyright-inner
{
width: 90%;
}

#header-left-logo {
width: 100%;
float: left;
}

#header-right-nav {
display: none;
}

h1 {
padding: 6px 0px 0px 0px;
}

.two-col-01,
.two-col-02,
.three-col-01,
.three-col-02,
.three-col-03,
.two-col-01-inner,
.two-col-02-inner,
.three-col-01-inner,
.three-col-02-inner,
.three-col-03-inner,
.footer-nav-01,
.footer-nav-02,
.footer-nav-03,
.footer-nav-04,
.footer-nav-01-inner,
.footer-nav-02-inner,
.footer-nav-03-inner,
.footer-nav-04-inner {
float: left;
width: 100%;
margin-left: 0%;
padding-bottom:30px;
}

.four-col-01,
.four-col-03{
float: left;
width: 48%;
margin-left: 0%;
padding-bottom:30px;
}

.four-col-02,
.four-col-04 {
float: right;
width: 48%;
margin-left: 0%;
padding-bottom:30px;
}

.four-col-01-inner,
.four-col-02-inner,
.four-col-03-inner,
.four-col-04-inner {
float: left;
width: 100%;
margin-left: 0%;
padding-bottom:30px;
}

#footer-nav-inner ul li {
padding:0px 0px 0px 0px;
}

#footer-nav-inner ul li a {
line-height: 4;
display: block;
width: 100%;
border-bottom: 1px solid #9F9F9F;
}

.box-all {
padding-bottom:0px;
}

#totop {
display: none;
}
}

/**********************************************************************/
/* max-width : 480px */
/**********************************************************************/
@media screen and (max-width : 480px){
#header-left-logo {
width: 60%;
}

.four-col-01,
.four-col-02,
.four-col-03,
.four-col-04,
.four-col-01-inner,
.four-col-02-inner,
.four-col-03-inner,
.four-col-04-inner{
float: left;
width: 100%;
margin-left: 0%;
padding-bottom:30px;
}

.lineup-r img,
.lineup-r02 img,
.lineup-c img {
width:24%;
}
}