@charset "utf-8";
/* ======================================================
* base.css
* ------------------------------------------------------
* css for base setting
*
* BASE ************************************************
* LAYOUT ************************************************
* OTHERS ************************************************
====================================================== */
/* ======================================================
BASE
====================================================== */
/* Global Reset (html5doctor.com)
* - Author: Richard Clark - http://richclarkdesign.com
------------------------------------------------------ */
/*----- for HTML5 -----*/
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}
body{line-height:1}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
nav ul{list-style:none}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:none}
a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}
ins{background-color:#ff9;color:#000;text-decoration:none}
mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold}
del{text-decoration:line-through}
abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}
table{border-collapse:collapse;border-spacing:0}
hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}
input,select{vertical-align:middle}
/* Costom Reset
------------------------------------------------------ */
/*----- for HTML5 -----*/
main { display: block; margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; }
h1, h2, h3, h4, h5, h6 ,small,th { font-weight: normal; }
ul, ol, li { list-style: none; }
th { text-align: left; }
strong { font-weight: bold; }
em,dfn { font-style: normal; }
address { font-style: normal; }
hr, legend { display: none; }
time { display: block; }
sub, sup{ position: relative; font-size: 10px; font-size: 76%; line-height: 1; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }
img { max-width: 100%; width: auto; height: auto; vertical-align: top; -ms-interpolation-mode: bicubic;}
button {outline: none;}
/* Base Setting
------------------------------------------------------ */
/*----- for HTML5 -----*/
/* page */
html {
font-size: 62.5%;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
html.is-fontSmall {
font-size: 50%;
}
html.is-fontLarge {
font-size: 70%;
}
body {
color: #333333;
font-size: 14px;
font-size: 1.4em;
font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
line-height: 1.7; }
@media screen and (max-width: 767px) {
html,
html.is-fontSmall,
html.is-fontLarge {
font-size: 62.5%;
}
body {
font-size: 13px;
font-size: 1.3em; }
}
#pageWrap {
position: relative;
background: #0d357a; }
* {
/* box-sizing */
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box; }
/* input */
input, select, textarea, button {
font-size: 14px;
font-size: 1.4rem;
font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; }
@media screen and (max-width: 767px) {
input, select, textarea, button {
font-size: 13px;
font-size: 1.3rem;
}
}
/* link */
a:link { color: #1177bb; text-decoration: underline; }
a:visited { color: #5232bb; text-decoration: underline; }
a:hover { color: #d81b28; text-decoration: underline; }
a:active { color: #d81b28; text-decoration: underline; }
.imgHover {
display: inline-block;
background: #ffffff;
vertical-align: top; }
.imgHover:hover > img {
opacity: 0.6;
filter: alpha(opacity=60);
-ms-filter: "alpha(opacity=60)";
zoom: 1; }
@media screen and (max-width: 767px) {
.imgHover:hover > img {
opacity: 1;
filter: alpha(opacity=100);
-ms-filter: "alpha(opacity=100)";
}
}
/* elements */
p {
margin-bottom: 1.3em; }
@media screen and (max-width: 767px) {
p {
margin-bottom: 0.8em; }
}
.has-separater {
margin-bottom: 30px;
border-bottom: 1px dotted #aaaaaa;
padding-bottom: 30px;
}
@media screen and (max-width: 767px) {
.has-separater {
margin-bottom: 20px;
padding-bottom: 20px;
}
}
/* Utility Style
------------------------------------------------------ */
/*----- width -----*/
.w001per{width:1% !important;}.w002per{width:2% !important;}.w003per{width:3% !important;}.w004per{width:4% !important;}.w005per{width:5% !important;}.w006per{width:6% !important;}.w007per{width:7% !important;}.w008per{width:8% !important;}.w009per{width:9% !important;}.w010per{width:10% !important;}.w011per{width:11% !important;}.w012per{width:12% !important;}.w013per{width:13% !important;}.w014per{width:14% !important;}.w015per{width:15% !important;}.w016per{width:16% !important;}.w017per{width:17% !important;}.w018per{width:18% !important;}.w019per{width:19% !important;}.w020per{width:20% !important;}.w021per{width:21% !important;}.w022per{width:22% !important;}.w023per{width:23% !important;}.w024per{width:24% !important;}.w025per{width:25% !important;}.w026per{width:26% !important;}.w027per{width:27% !important;}.w028per{width:28% !important;}.w029per{width:29% !important;}.w030per{width:30% !important;}.w031per{width:31% !important;}.w032per{width:32% !important;}.w033per{width:33% !important;}.w034per{width:34% !important;}.w035per{width:35% !important;}.w036per{width:36% !important;}.w037per{width:37% !important;}.w038per{width:38% !important;}.w039per{width:39% !important;}.w040per{width:40% !important;}.w041per{width:41% !important;}.w042per{width:42% !important;}.w043per{width:43% !important;}.w044per{width:44% !important;}.w045per{width:45% !important;}.w046per{width:46% !important;}.w047per{width:47% !important;}.w048per{width:48% !important;}.w049per{width:49% !important;}.w050per{width:50% !important;}.w051per{width:51% !important;}.w052per{width:52% !important;}.w053per{width:53% !important;}.w054per{width:54% !important;}.w055per{width:55% !important;}.w056per{width:56% !important;}.w057per{width:57% !important;}.w058per{width:58% !important;}.w059per{width:59% !important;}.w060per{width:60% !important;}.w061per{width:61% !important;}.w062per{width:62% !important;}.w063per{width:63% !important;}.w064per{width:64% !important;}.w065per{width:65% !important;}.w066per{width:66% !important;}.w067per{width:67% !important;}.w068per{width:68% !important;}.w069per{width:69% !important;}.w070per{width:70% !important;}.w071per{width:71% !important;}.w072per{width:72% !important;}.w073per{width:73% !important;}.w074per{width:74% !important;}.w075per{width:75% !important;}.w076per{width:76% !important;}.w077per{width:77% !important;}.w078per{width:78% !important;}.w079per{width:79% !important;}.w080per{width:80% !important;}.w081per{width:81% !important;}.w082per{width:82% !important;}.w083per{width:83% !important;}.w084per{width:84% !important;}.w085per{width:85% !important;}.w086per{width:86% !important;}.w087per{width:87% !important;}.w088per{width:88% !important;}.w089per{width:89% !important;}.w090per{width:90% !important;}.w091per{width:91% !important;}.w092per{width:92% !important;}.w093per{width:93% !important;}.w094per{width:94% !important;}.w095per{width:95% !important;}.w096per{width:96% !important;}.w097per{width:97% !important;}.w098per{width:98% !important;}.w099per{width:99% !important;}.w100per{width:100% !important;}
/*----- margin -----*/
/* margin-top */
.mt0 { margin-top: 0 !important; }.mt5 { margin-top: 5px !important; }.mt10 { margin-top: 10px !important; }.mt15 { margin-top: 15px !important; }.mt20 { margin-top: 20px !important; }.mt25 { margin-top: 25px !important; }.mt30 { margin-top: 30px !important; }.mt35 { margin-top: 35px !important; }.mt40 { margin-top: 40px !important; }.mt45 { margin-top: 45px !important; }.mt50 { margin-top: 50px !important; }.mt55 { margin-top: 55px !important; }.mt60 { margin-top: 60px !important; }.mt65 { margin-top: 65px !important; }.mt70 { margin-top: 70px !important; }.mt75 { margin-top: 75px !important; }.mt80 { margin-top: 80px !important; }.mt85 { margin-top: 85px !important; }.mt90 { margin-top: 90px !important; }.mt95 { margin-top: 95px !important; }.mt100 { margin-top: 100px !important; }
/* margin-right */
.mr0 { margin-right: 0 !important; }.mr5 { margin-right: 5px !important; }.mr10 { margin-right: 10px !important; }.mr15 { margin-right: 15px !important; }.mr20 { margin-right: 20px !important; }.mr25 { margin-right: 25px !important; }.mr30 { margin-right: 30px !important; }.mr35 { margin-right: 35px !important; }.mr40 { margin-right: 40px !important; }.mr45 { margin-right: 45px !important; }.mr50 { margin-right: 50px !important; }.mr55 { margin-right: 55px !important; }.mr60 { margin-right: 60px !important; }.mr65 { margin-right: 65px !important; }.mr70 { margin-right: 70px !important; }.mr75 { margin-right: 75px !important; }.mr80 { margin-right: 80px !important; }.mr85 { margin-right: 85px !important; }.mr90 { margin-right: 90px !important; }.mr95 { margin-right: 95px !important; }.mr100 { margin-right: 100px !important; }
/* margin-bottom */
.mb0 { margin-bottom: 0 !important; }.mb5 { margin-bottom: 5px !important; }.mb10 { margin-bottom: 10px !important; }.mb15 { margin-bottom: 15px !important; }.mb20 { margin-bottom: 20px !important; }.mb25 { margin-bottom: 25px !important; }.mb30 { margin-bottom: 30px !important; }.mb35 { margin-bottom: 35px !important; }.mb40 { margin-bottom: 40px !important; }.mb45 { margin-bottom: 45px !important; }.mb50 { margin-bottom: 50px !important; }.mb55 { margin-bottom: 55px !important; }.mb60 { margin-bottom: 60px !important; }.mb65 { margin-bottom: 65px !important; }.mb70 { margin-bottom: 70px !important; }.mb75 { margin-bottom: 75px !important; }.mb80 { margin-bottom: 80px !important; }.mb85 { margin-bottom: 85px !important; }.mb90 { margin-bottom: 90px !important; }.mb95 { margin-bottom: 95px !important; }.mb100 { margin-bottom: 100px !important; }
/* margin-left */
.ml0 { margin-left: 0 !important; }.ml5 { margin-left: 5px !important; }.ml10 { margin-left: 10px !important; }.ml15 { margin-left: 15px !important; }.ml20 { margin-left: 20px !important; }.ml25 { margin-left: 25px !important; }.ml30 { margin-left: 30px !important; }.ml35 { margin-left: 35px !important; }.ml40 { margin-left: 40px !important; }.ml45 { margin-left: 45px !important; }.ml50 { margin-left: 50px !important; }.ml55 { margin-left: 55px !important; }.ml60 { margin-left: 60px !important; }.ml65 { margin-left: 65px !important; }.ml70 { margin-left: 70px !important; }.ml75 { margin-left: 75px !important; }.ml80 { margin-left: 80px !important; }.ml85 { margin-left: 85px !important; }.ml90 { margin-left: 90px !important; }.ml95 { margin-left: 95px !important; }.ml100 { margin-left: 100px !important; }
/*----- padding -----*/
/* padding-top */
.pt0 { padding-top: 0 !important; }.pt5 { padding-top: 5px !important; }.pt10 { padding-top: 10px !important; }.pt15 { padding-top: 15px !important; }.pt20 { padding-top: 20px !important; }.pt25 { padding-top: 25px !important; }.pt30 { padding-top: 30px !important; }.pt35 { padding-top: 35px !important; }.pt40 { padding-top: 40px !important; }.pt45 { padding-top: 45px !important; }.pt50 { padding-top: 50px !important; }.pt55 { padding-top: 55px !important; }.pt60 { padding-top: 60px !important; }.pt65 { padding-top: 65px !important; }.pt70 { padding-top: 70px !important; }.pt75 { padding-top: 75px !important; }.pt80 { padding-top: 80px !important; }.pt85 { padding-top: 85px !important; }.pt90 { padding-top: 90px !important; }.pt95 { padding-top: 95px !important; }.pt100 { padding-top: 100px !important; }
/* padding-right */
.pr0 { padding-right: 0 !important; }.pr5 { padding-right: 5px !important; }.pr10 { padding-right: 10px !important; }.pr15 { padding-right: 15px !important; }.pr20 { padding-right: 20px !important; }.pr25 { padding-right: 25px !important; }.pr30 { padding-right: 30px !important; }.pr35 { padding-right: 35px !important; }.pr40 { padding-right: 40px !important; }.pr45 { padding-right: 45px !important; }.pr50 { padding-right: 50px !important; }.pr55 { padding-right: 55px !important; }.pr60 { padding-right: 60px !important; }.pr65 { padding-right: 65px !important; }.pr70 { padding-right: 70px !important; }.pr75 { padding-right: 75px !important; }.pr80 { padding-right: 80px !important; }.pr85 { padding-right: 85px !important; }.pr90 { padding-right: 90px !important; }.pr95 { padding-right: 95px !important; }.pr100 { padding-right: 100px !important; }
/* padding-bottom */
.pb0 { padding-bottom: 0 !important; }.pb5 { padding-bottom: 5px !important; }.pb10 { padding-bottom: 10px !important; }.pb15 { padding-bottom: 15px !important; }.pb20 { padding-bottom: 20px !important; }.pb25 { padding-bottom: 25px !important; }.pb30 { padding-bottom: 30px !important; }.pb35 { padding-bottom: 35px !important; }.pb40 { padding-bottom: 40px !important; }.pb45 { padding-bottom: 45px !important; }.pb50 { padding-bottom: 50px !important; }.pb55 { padding-bottom: 55px !important; }.pb60 { padding-bottom: 60px !important; }.pb65 { padding-bottom: 65px !important; }.pb70 { padding-bottom: 70px !important; }.pb75 { padding-bottom: 75px !important; }.pb80 { padding-bottom: 80px !important; }.pb85 { padding-bottom: 85px !important; }.pb90 { padding-bottom: 90px !important; }.pb95 { padding-bottom: 95px !important; }.pb100 { padding-bottom: 100px !important; }
/* padding-left */
.pl0 { padding-left: 0 !important; }.pl5 { padding-left: 5px !important; }.pl10 { padding-left: 10px !important; }.pl15 { padding-left: 15px !important; }.pl20 { padding-left: 20px !important; }.pl25 { padding-left: 25px !important; }.pl30 { padding-left: 30px !important; }.pl35 { padding-left: 35px !important; }.pl40 { padding-left: 40px !important; }.pl45 { padding-left: 45px !important; }.pl50 { padding-left: 50px !important; }.pl55 { padding-left: 55px !important; }.pl60 { padding-left: 60px !important; }.pl65 { padding-left: 65px !important; }.pl70 { padding-left: 70px !important; }.pl75 { padding-left: 75px !important; }.pl80 { padding-left: 80px !important; }.pl85 { padding-left: 85px !important; }.pl90 { padding-left: 90px !important; }.pl95 { padding-left: 95px !important; }.pl100 { padding-left: 100px !important; }
/*----- align -----*/
/* text-align */
.alL { text-align: left !important; }
.alC { text-align: center !important; }
.alR { text-align: right !important; }
/* vertical-align */
.alT { vertical-align: top !important; }
.alM { vertical-align: middle !important; }
.alB { vertical-align: bottom !important; }
/*----- display -----*/
/* display */
.dpBlock { display: block !important; }
.dpInlBlock { display: inline-block !important; }
.dpInline { display: inline !important; }
/*----- overflow -----*/
.ovfHidden { overflow: hidden !important; }
.ovfVisible { overflow: visible !important; }
/*----- font -----*/
.bold { font-weight: bold !important; }
.italic { font-style: italic !important; }
.fwNormal { font-weight: normal !important; }
.fsNormal { font-style: normal !important; }
.underlined { text-decoration: underline; }
/*----- break -----*/
.breakWord { word-wrap: break-word !important; }
.breakNone { white-space: nowrap !important; }
/*----- hidden -----*/
.hidden {display: none !important;}
.pc-hidden {display: none !important;}
.sp-image,
.sp-br {display: none !important;}
@media screen and (max-width: 767px) {
.pc-hidden {display: block !important;}
.sp-hidden {display: none !important;}
.pc-image,
.pc-br {display: none !important;}
.sp-image,
.sp-br {display: inline !important;}
}
/* Reader
------------------------------------------------------ */
/* voiceGuide */
.voiceGuide {
position: absolute;
left: 0;
top: 0;
display: block;
width: 1px;
height: 1px;
margin: 0;
padding: 0;
overflow: hidden; }
/* ======================================================
LAYOUT
====================================================== */
/* header
------------------------------------------------------ */
.upperTemplate {
background: #ffffff;
}
#header {
background: #ffffff;
border: 1px solid #ececec;
}
#header.is-fixed {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 100;
}
@media screen and (max-width: 767px) {
#header {
border-top: 5px solid #0079c7;
/* box-shadow */
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#header.is-fixed {
position: relative;
top: auto;
left: auto;
}
}
/* ----- headerBody ----- */
.headerBody {
width: 1000px;
margin: 0 auto;
padding: 15px 0;
}
@media screen and (max-width: 767px) {
.headerBody {
width: auto;
}
}
/* headerLegal */
.headerLegal {
float: left;
}
@media screen and (max-width: 767px) {
.headerLegal {
float: none;
display: block;
width: auto;
text-align: center;
}
.headerLegal .logo {
display: inline-block;
width: 188px;
vertical-align: bottom;
line-height: 0;
}
}
/* fontSelect */
.headerBody .fontSelect {
display: table;
font-size: 12px;
font-size: 1.2rem;
text-align: left;
line-height: 1.2;
}
.headerBody .fontSelectTip {
display: table-cell;
vertical-align: middle;
padding-right: 10px;
}
.headerBody .fontModule {
overflow: hidden;
float: left;
display: table;
border: 1px solid #dddddd;
text-align: center;
/* border-radius */
-webkit-border-radius: 1em;
-moz-border-radius: 1em;
border-radius: 1em;
letter-spacing: normal;
}
.headerBody .fontModule > li {
width: 22px;
display: table-cell;
padding: 0.3em;
cursor: pointer;
}
.headerBody .fontModule > li:first-child {
width: 25px;
padding-left: 0.6em;
/* border-radius */
-webkit-border-radius: 1em 0 0 1em;
-moz-border-radius: 1em 0 0 1em;
border-radius: 1em 0 0 1em;
}
.headerBody .fontModule > li:last-child {
width: 25px;
padding-right: 0.6em;
/* border-radius */
-webkit-border-radius: 0 1em 1em 0;
-moz-border-radius: 0 1em 1em 0;
border-radius: 0 1em 1em 0;
}
.headerBody .fontModule > li:hover,
.headerBody .fontModule > li.is-selected {
color: #ffffff;
background: #0079c7;
font-weight: bold;
}
@media screen and (max-width: 767px) {
.headerBody .fontSelect {
display: none;
}
}
/* headerUtility */
.headerUtility {
float: right;
margin-top: 5px;
}
.headerLinks {
letter-spacing: -0.4em;
white-space: nowrap;
text-align: right;
}
.headerLinks > li {
display: inline-block;
letter-spacing: normal;
line-height: 1.2;
vertical-align: middle;
}
.headerLinks > li + li {
margin-left: 10px;
padding-left: 9px;
border-left: 1px solid #dddddd;
}
.headerLinks > li > a {
color: #777777;
font-size: 11px;
font-size: 1.1rem;
text-decoration: none;
}
.headerLinks > li > a:hover {
text-decoration: underline;
}
@media screen and (max-width: 767px) {
.headerUtility {
display: none;
}
}
/* siteUtility
------------------------------------------------------ */
.siteUtility {
width: 1000px;
margin: 0 auto;
}
@media screen and (max-width: 767px) {
.siteUtility {
width: auto;
}
}
/* ----- breadcrumbs ----- */
#breadcrumbs {
float: left;
width: 850px;
padding: 15px 0 30px;
}
#breadcrumbs li {
float: left;
font-size: 13px;
font-size: 1.3rem;
}
#breadcrumbs li + li {
position: relative;
margin-left: 14px;
padding-left: 16px;
}
#breadcrumbs li + li:before {
content: "≫";
position: absolute;
top: 0;
left: 0;
color: #999999;
}
@media screen and (max-width: 767px) {
.siteUtility {
width: auto;
}
#breadcrumbs {
float: none;
width: auto;
padding: 10px 3% 20px;
line-height: 1.2;
overflow-x: auto;
}
#breadcrumbs ol {
letter-spacing: -0.5em;
white-space: nowrap;
}
#breadcrumbs ol > li {
float: none;
display: inline-block;
margin-right: 10px;
font-size: 10px;
font-size: 1rem;
letter-spacing: normal;
white-space: nowrap;
}
#breadcrumbs ol > li + li {
margin-left: 0;
padding-left: 12px;
}
#breadcrumbs::-webkit-scrollbar {
display: none; }
#breadcrumbs::-webkit-scrollbar:horizontal {
display: none; }
#breadcrumbs::-webkit-scrollbar-thumb {
display: none; }
#breadcrumbs::-webkit-scrollbar-thumb:horizontal {
display: none; }
}
/* ----- printModule ----- */
.printModule {
float: right;
margin-top: 15px;
margin-bottom: 24px;
}
.printModule > a {
position: relative;
display: inline-block;
border: 1px solid #777777;
padding: 3px 12px 1px 32px;
background-color: #ffffff;
font-size: 13px;
font-size: 1.3rem;
color: #666666;
text-decoration: none;
/* border-radius */
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.printModule > a:hover {
background-color: #666666;
color: #ffffff;
}
.printModule > a:before {
content: "";
position: absolute;
top: 50%;
left: 8px;
display: block;
width: 16px;
height: 14px;
margin-top: -7px;
background: url(/english/common/img/com_ic01.png) no-repeat 0 0;
}
.printModule > a:hover:before {
background-position: -16px 0;
}
@media screen and (max-width: 767px) {
.printModule {
display: none;
}
}
/* contents
------------------------------------------------------ */
#contents {
background: #ffffff;
padding-bottom: 75px;
/* box-shadow */
-moz-box-shadow: 0px 16px 16px -16px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0px 16px 16px -16px rgba(0, 0, 0, 0.3);
box-shadow: 0px 16px 16px -16px rgba(0, 0, 0, 0.3);
}
.contentsBody {
width: 1000px;
margin: 0 auto;
}
@media screen and (max-width: 767px) {
#contents {
padding-bottom: 40px;
}
.contentsBody {
width: auto;
padding: 0 3% 0;
}
}
/* ----- main ----- */
#main {
float: left;
width: 740px;
}
#main > *:last-child {
margin-bottom: 0 !important;
}
.no-pageGrid #main {
float: none;
width: auto;
}
@media screen and (max-width: 767px) {
#main {
float: none;
width: auto;
}
}
/* ----- side ----- */
#side {
float: right;
width: 232px;
}
#side > *:last-child {
margin-bottom: 0 !important;
}
.sideBanner {
margin: 0 5px 20px;
}
@media screen and (max-width: 767px) {
#side {
float: none;
width: auto;
margin-top: 25px;
}
.sideBanner {
margin: 0 0px 15px;
}
}
/* sideNavi */
.sideNavi {
margin: 0 5px 20px;
border: 1px solid #dddddd;
border-bottom: 2px solid #dddddd;
/* border-radius */
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
border-radius: 1px;
/* box-shadow */
-moz-box-shadow: 0px 2px 7px 0px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0px 2px 7px 0px rgba(0, 0, 0, 0.3);
box-shadow: 0px 2px 7px 0px rgba(0, 0, 0, 0.3);
}
.sideNaviCategory {
display: block;
padding: 18px 16px 15px;
background: #0079c7;
color: #ffffff;
font-size: 15px;
font-size: 1.5rem;
font-weight: bold;
line-height: 1.2;
}
a.sideNaviCategory {
color: #ffffff;
text-decoration: none;
}
a.sideNaviCategory:hover {
text-decoration: underline;
}
.sideNaviMenu li > a {
position: relative;
display: block;
padding: 14px 40px 12px 14px ;
border-bottom: 1px solid #dddddd;
color: #333333;
text-decoration: none;
}
.sideNaviMenu li > a:after {
content: "";
position: absolute;
top: 50%;
right: 10px;
display: block;
width: 10px;
height: 16px;
margin-top: -8px;
background: url(/english/common/img/com_link_ic04.png) no-repeat 0 0;
}
.sideNaviMenu li > a:hover,
.sideNaviMenu li > a.is-current {
background: #d2e7f0;
}
.sideNaviMenu li:last-child > a {
border-bottom: none;
}
.sideNaviMenu li:last-child > .sideNaviMenu.stage2 {
border-top: 1px solid #dddddd;
}
.sideNaviMenu.stage1 > li {
background: #f7f7f7;
line-height: 1.4;
}
.sideNaviMenu.stage2 {
display: none;
padding: 0 6px;
}
.sideNaviMenu.stage2.is-open {
display: block;
}
.sideNaviMenu.stage2 > li {
background: #ffffff;
font-size: 13px;
font-size: 1.3rem;
}
.sideNaviMenu.stage2 > li > a {
padding: 14px 20px 12px;
}
.sideNaviMenu.stage2 > li > a:after {
right: 4px;
}
@media screen and (max-width: 767px) {
.sideNavi {
border: none;
margin: 0 0 20px;
/* box-shadow */
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
.sideNaviMenu.stage1 {
border: 1px solid #dddddd;
}
.sideNaviMenu li > a:hover,
.sideNaviMenu.stage1 > li {
background: none;
}
.sideNaviMenu.stage1 > li > a {
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #f0f0f0 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #ffffff 0%,#f0f0f0 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #ffffff 0%,#f0f0f0 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f0f0f0',GradientType=0 ); /* IE6-9 */
}
.sideNaviMenu.stage1 > li > a:after {
width: 25px;
height: 25px;
margin-top: -13px;
background-image: url(/english/common/img/com_ic09.png);
background-position: 0 -25px;
background-size: 50px auto;
}
.sideNaviMenu.stage1 > li.has-child > a:after {
background-position: 0 0;
}
.sideNaviMenu.stage1 > li.has-child > a.is-open:after {
background-position: -25px 0;
}
.sideNaviMenu.stage2 {
padding: 0;
}
.sideNaviMenu.stage2 > li > a:after {
right: 20px;
width: 6px;
height: 10px;
margin-top: -5px;
background-image: url(/english/common/img/com_link_ic05.png);
background-position: 0 0;
background-size: 6px auto;
}
.sideNaviMenu.stage2 > li:last-child > a {
border-bottom: 1px solid #dddddd;
}
.sideNaviMenu.stage1 > li > a.is-current,
.sideNaviMenu.stage2 > li > a.is-current {
background: #d2e7f0;
}
}
/* sideCta */
.sideCta {
margin: 0 5px 20px;
}
.sp-sideCtaButton {
display: none !important;
}
.sideCta .buttonWrap {
margin-bottom: 25px;
}
.sideCta .button {
display: block;
}
.sideCta .buttonSide {
color: #000000;
font-size: 12px;
font-size: 1.2rem;
}
.sideCta .buttonSide > span {
padding: 0 15px;
}
.sideCta .buttonSide > span:before {
display: none;
}
.sideCta .buttonSide[target="_blank"] > span,
.sideCta .buttonSide[href$=".pdf"] > span {
padding: 0 25px 0 15px;
}
.sideCta .buttonSide[target="_blank"] > span:after,
.sideCta .buttonSide[href$=".pdf"] > span:after {
position: absolute;
top: 50%;
right: 7px;
margin: 0;
}
.sideCta .buttonSide[target="_blank"] > span:after {
margin-top: -6px;
}
.sideCta .buttonSide[href$=".pdf"] > span:after {
margin-top: -8px;
}
.sideCta .buttonSide > span > em {
font-size: 16px;
font-size: 1.6rem;
font-weight: bold;
}
.sideCta > *:last-child {
margin-bottom: 0 !important;
}
@media screen and (max-width: 767px) {
.sideCta {
margin: 0;
}
.sideCta .buttonSide > span > em {
font-size: 14px;
font-size: 1.4rem;
}
.sideCta .buttonWrap {
margin-bottom: 10px;
}
}
/* footer
------------------------------------------------------ */
#footer {
position: relative;
padding-top: 20px;
background: #ffffff;
}
@media screen and (max-width: 767px) {
#footer {
margin-top: 0;
/* box-shadow */
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
}
/* ----- footerUtility ----- */
.footerUtility {
background: #abdeff;
padding-top: 1px;
}
.footerUtilityBody {
position: relative;
padding: 20px 0;
z-index: 5;
}
@media screen and (max-width: 767px) {
.footerUtility {
padding-top: 0;
}
.footerUtilityBody {
position: relative;
min-height: inherit;
margin-top: 0;
padding: 10px 3%;
}
}
/* footerLegal */
.footerLegal {
width: 600px;
margin: 0 auto;
text-align: center;
}
.footerLegal small {
display: block;
font-size: 12px;
font-size: 1.2rem;
}
@media screen and (max-width: 767px) {
.footerLegal {
width: auto;
text-align: center;
}
.footerLegal small {
font-size: 10px;
font-size: 1rem;
}
.footerLegal small + small {
margin-top: 5px;
}
}
/* ----- pagetop ----- */
#pagetop {
position: absolute;
top: 0;
right: 50%;
margin-right: -500px;
}
#pagetop > a {
display: block;
width: 135px;
height: 40px;
background: url(/english/common/img/com_pagetop_bt01.png) no-repeat 0 0;
text-indent: -9999px;
outline: none;
}
#pagetop > a:hover {
background-position: 0 -40px;
}
@media screen and (max-width: 767px) {
#pagetop {
position: fixed;
top: auto;
right: 10px;
bottom: 30px;
margin-right: 0;
z-index: 50;
}
#pagetop > a,
#pagetop > a:hover {
width: 50px;
height: 50px;
background: url(/english/common/img/com_pagetop_bt01_sp.png) no-repeat 0 0;
background-size: 50px auto;
}
#pagetop.stop {
position: absolute;
top: 0;
bottom: auto;
}
}
/* ======================================================
OTHER
====================================================== */
/* Clearfix
------------------------------------------------------ */
.headerBody:after,
.headerBody .fontSelectTip:after,
.siteUtility:after,
#breadcrumbs > ol:after,
.contentsBody:after,
.footerGuide:after {
content:" ";
display:block;
clear:both;
}
/* Print
------------------------------------------------------ */
@media print {
#header.is-fixed {
position: relative;
top: auto;
left: auto;
}
#header.is-fixed + * {
padding-top: 0 !important;
}
}