@charset "utf-8";

/* =========================================================
  サイト ： CITIZEN Group 100th anniversary website
  タイプ ： Base Layout
  更新日 ： 2018-05-25
========================================================= */


/* =========================================================
 *  normalize.css v7.0.0 (CSS Miniaturization)
 *  MIT License
 *  github.com/necolas/normalize.css
========================================================= */

html { line-height: 1.15; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }
body { margin: 0; }
article, aside, footer, header, nav, section { display: block; }
h1 { font-size: 2em; margin: 0.67em 0; }
figcaption, figure, main { display: block; }
figure { margin: 1em 40px; }
hr { box-sizing: content-box; height: 0; overflow: visible; }
pre { font-family: monospace, monospace; font-size: 1em; }
a { background-color: transparent; -webkit-text-decoration-skip: objects; }
abbr[title] { border-bottom: none; text-decoration: underline; text-decoration: underline dotted; }
b, strong { font-weight: inherit; }
b, strong { font-weight: bolder; }
code, kbd, samp { font-family: monospace, monospace; font-size: 1em; }
dfn { font-style: italic; }
mark { background-color: #ff0; color: #000; }
small { font-size: 80%; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sub { bottom: -0.25em; }
sup { top: -0.5em; }
audio, video { display: inline-block; }
audio:not([controls]) { display: none; height: 0; }
img { border-style: none; }
svg:not(:root) { overflow: hidden; }
button, input, optgroup, select, textarea { font-family: sans-serif; font-size: 100%; line-height: 1.15; margin: 0; }
button, input { overflow: visible; }
button, select { text-transform: none; }
button, html [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; }
button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; }
button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; }
fieldset { padding: 0.35em 0.75em 0.625em; }
legend { box-sizing: border-box; color: inherit; display: table; max-width: 100%; padding: 0; white-space: normal; }
progress { display: inline-block; vertical-align: baseline; }
textarea { overflow: auto; }
[type="checkbox"], [type="radio"] { box-sizing: border-box; padding: 0; }
[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; }
[type="search"] { -webkit-appearance: textfield; outline-offset: -2px; }
[type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; }
details, menu { display: block; }
summary { display: list-item; }
canvas { display: inline-block; }
template { display: none; }
[hidden] { display: none; }



/* =========================================================
 *  Custom Reset CSS - normalize v7.0.0 ver
 *  Released under the MIT license.
 *  Author  : HPJ Takeuchi
 *  Version : 3.2
 *  Update  : 2017-11-15
========================================================= */

*,
*:before,
*:after,
*::before,
*::after {
	box-sizing: border-box;
}

html { width: 100%; height: 100%; overflow-y: scroll; }
body { width: 100%; height: 100%; }

p, pre { margin-top: 0; margin-bottom: 0; }
blockquote { margin: 0; }
ol, ul { list-style: none; margin-top: 0; margin-bottom: 0; padding-left: 0; }
dl { margin-top: 0; margin-bottom: 0; }
dd { margin-left: 0; }

sup { top: -0.3em; padding-right: 0.2em; }
sub { bottom: -0.1em; padding-right: 0.2em; }

address { font-style: normal; }

a { overflow: hidden; }
a:link { outline-width: 0; }

b { font-weight: inherit; }

img { vertical-align: top; max-width: 100%; height: auto; }
img, button { -webkit-user-select: none; user-select: none; }

h1, h2, h3, h4, h5, h6 { font-weight: inherit; margin-top: 0; margin-bottom: 0; }

table { border-collapse: collapse; }
th, td { padding: 0; vertical-align: top; }
th { font-weight: inherit; text-align: left; }

small { font-size: 100%; }

figure { margin: 0; }

hr { border: none; display: block; margin-top: 0; margin-bottom: 0; }

textarea { padding: 0; resize: vertical; }
input[type="text"] { vertical-align: top; padding: 0; }
input[type="radio"] { vertical-align: top; }
input[type="checkbox"] { vertical-align: top; }
label { display: inline-block; }
optgroup { font-style: normal; }



/* メインスタイル
========================================================= */

/* Base Style
------------------------------------------ */

html {
	font-size: 62.5%; /* 10px */
	line-height: 1;
}

body {
	color: #000000;
	font-family: "Times New Roman", "Verdana", "Arial", sans-serif;
	font-size: 1.6rem;
	font-weight: 400; 
	line-height: 3.2rem;
}

a:link    { color: #1c669e; text-decoration: underline; }
a:visited { color: #800080; text-decoration: underline; }
a:hover   { color: #1c669e; text-decoration: none; }



/* 基本設計
========================================================= */

#wrapper { width: 100%; height: 100%; min-width: 320px; }
#mainWrap { width: 100%; }
#mainWrap #contentsWrap { width: 100%; }

#pagetop { position: fixed; bottom: 108px; right: 0; z-index: 200; opacity: 0; }
#pagetop a { position: relative; width: 44px; height: 44px; cursor: pointer; background-color: #000000; display: block; text-indent: 100%; white-space: nowrap; }
#pagetop a::after { position: absolute; top: 19px; left: 16px; content: ""; width: 13px; height: 13px; border-top: 2px solid #ffffff; border-right: 2px solid #ffffff; transform: rotate(-45deg); transition: top 0.3s ease; }


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

#headerWrap { width: 100%; background-color: #ffffff; position: relative; z-index: 300; padding-right: 30px; padding-left: 30px; }
#headerWrap #headerBox { max-width: 1140px; height: 90px; margin: 0 auto; position: relative; }
#headerWrap #headerBox #heLogo { width: 214px; height: 65px; position: absolute; top: 13px; left: 0; }
#headerWrap #headerBox #heLogo a { width: 214px; height: 65px; background: url(../images/header_logo.gif) no-repeat left top; background-size: 214px 65px; display: block; text-indent: 100%; white-space: nowrap; }
#headerWrap #headerBox #heNavWrap { display: block; width: 50.263%; position: absolute; top: 26px; right: 11.315%; }
#headerWrap #headerBox #heNavWrap #heNav { width: 100%; font-family: "Verdana"; }
#headerWrap #headerBox #heNavWrap #heNav > ul { display: table; width: 100%; }
#headerWrap #headerBox #heNavWrap #heNav > ul > li { display: table-cell; text-align: center; }
#headerWrap #headerBox #heNavWrap #heNav > ul > li > a { color: #000000; text-decoration: none; }
#headerWrap #headerBox #heNavWrap #heNav > ul > li > a > div { font-size: 1.6rem; line-height: 2.2rem; padding-top: 10px; padding-bottom: 12px; }
#headerWrap #headerBox #heNavWrap #heNav > ul > li > a > div > span { position: relative; }
#headerWrap #headerBox #heNavWrap #heNav > ul > li > a > div > span::after { position: absolute; top: 22px; left: 50%; content: ""; width: 0%; height: 1px; background-color: #000000; opacity: 0; transition-property: width, opacity, left; transition-duration: 0.3s; transition-timing-function: ease-out; }
#headerWrap #headerBox #heNavWrap #heNav > ul > li#heNavBt1 { width: 18.499%; }
#headerWrap #headerBox #heNavWrap #heNav > ul > li#heNavBt2 { width: 20.069%; }
#headerWrap #headerBox #heNavWrap #heNav > ul > li#heNavBt3 { width: 25.131%; }
#headerWrap #headerBox #heNavWrap #heNav > ul > li#heNavBt4 { width: 36.301%; }
#headerWrap #headerBox #heLanguage { position: absolute; top: 33px; right: 0; }
#headerWrap #headerBox #heLanguage ul { font-family: "Arial"; font-size: 1.2rem; line-height: 1.6rem; font-weight: 700; letter-spacing: 1px; overflow: hidden; }
#headerWrap #headerBox #heLanguage ul li { float: left; text-align: center; }
#headerWrap #headerBox #heLanguage ul li:first-child { margin-right: 5px; }
#headerWrap #headerBox #heLanguage ul li span { text-decoration: none; width: 42px; display: block; border-radius: 13.5px; padding-top: 6px; padding-bottom: 5px; }
#headerWrap #headerBox #heLanguage ul li a { text-decoration: none; width: 42px; display: block; border-radius: 13.5px; padding-top: 6px; padding-bottom: 5px; }
#headerWrap #headerBox #heLanguage ul .heLanguageOn span { color: #ffffff; background-color: #000000; }
#headerWrap #headerBox #heLanguage ul .heLanguageOf a { color: #000000; background-color: #ffffff; transition-property: color, background-color; transition-duration: 0.3s; transition-timing-function: ease; }


/* Footer
------------------------------------------ */

#footerWrap { width: 100%; background-color: #ffffff; position: relative; z-index: 100; }
#footerWrap #footerAreaSNS { width: 100%; padding-right: 30px; padding-left: 30px; border-top: 1px solid #ffffff; font-family: "Arial"; }
#footerWrap #footerAreaSNS #footerBoxSNS { max-width: 1140px; height: 76px; margin: 0 auto; position: relative; }
#footerWrap #footerAreaSNS #footerBoxSNS #snsIconCmn { position: absolute; top: 20px; left: 50%; margin-left: -100px; overflow: hidden; }
#footerWrap #footerAreaSNS #footerBoxSNS #snsIconCmn div { float: left; }
#footerWrap #footerAreaSNS #footerBoxSNS #snsIconCmn div:not(:last-child) { margin-right: 12px; }
#footerWrap #footerAreaSNS #footerBoxSNS #snsIconCmn div a { width: 36px; height: 36px; display: block; }
#footerWrap #footerAreaSNS #footerBoxSNS #snsIconCmn div a img { opacity: 0; transition: opacity 0.3s ease; }
#footerWrap #footerAreaSNS #footerBoxSNS #snsIconCmn div:nth-child(1) { font-size: 1.3rem; font-weight: 700; line-height: 2rem; letter-spacing: 3px; padding-top: 9px; padding-right: 5px; }
#footerWrap #footerAreaSNS #footerBoxSNS #snsIconCmn div:nth-child(2) a { background: url(../images/cmn_sns_icon1_n.png) no-repeat left top; background-size: 36px 36px; }
#footerWrap #footerAreaSNS #footerBoxSNS #snsIconCmn div:nth-child(3) a { background: url(../images/cmn_sns_icon2_n.png) no-repeat left top; background-size: 36px 36px; }
#footerWrap #footerArea1 { width: 100%; background-color: #ffffff; border-top: 1px solid #cccccc; padding-right: 30px; padding-left: 30px; }
#footerWrap #footerArea1 #footerBox1 { max-width: 1140px; height: 67px; margin: 0 auto; position: relative; }
#footerWrap #footerArea1 #footerBox1 #feLogo { width: 124px; height: 23px; position: absolute; top: 22px; left: 30px; }
#footerWrap #footerArea1 #footerBox1 #feLogo a { width: 124px; height: 23px; background: url(../images/footer_logo.gif) no-repeat left top; background-size: 124px 23px; display: block; text-indent: 100%; white-space: nowrap; }
#footerWrap #footerArea1 #footerBox1 ul { display: table; width: 47.19298245614035%; position: absolute; top: 17px; right: 30px; }
#footerWrap #footerArea1 #footerBox1 ul li { display: table-cell; font-family: "Verdana"; font-size: 1.4rem; line-height: 2rem; text-align: center; }
#footerWrap #footerArea1 #footerBox1 ul li:nth-child(1) { width: 18.773%; }
#footerWrap #footerArea1 #footerBox1 ul li:nth-child(2) { width: 20.631%; }
#footerWrap #footerArea1 #footerBox1 ul li:nth-child(3) { width: 24.907%; }
#footerWrap #footerArea1 #footerBox1 ul li:nth-child(4) { width: 35.687%; }
#footerWrap #footerArea1 #footerBox1 ul li a { display: block; color:#000000; text-decoration: none; padding-top: 6px; padding-bottom: 8px; }
#footerWrap #footerArea1 #footerBox1 ul li a span { position: relative; }
#footerWrap #footerArea1 #footerBox1 ul li a span::after { position: absolute; bottom: -2px; left: 50%; content: ""; width: 0%; height: 1px; background-color: #000000; opacity: 0; transition-property: width, opacity, left; transition-duration: 0.3s; transition-timing-function: ease-out; }
#footerWrap #footerArea2 { width: 100%; background-color: #000000; padding-right: 30px; padding-left: 30px; }
#footerWrap #footerArea2 #footerBox2 { max-width: 1140px; margin: 0 auto; position: relative; padding-top: 35px; padding-bottom: 55px; }
#footerWrap #footerArea2 #footerBox2 p { text-align: center; color: #ffffff; font-family: "Verdana"; font-size: 1.3rem; line-height: 1.8rem; }

#footerWrap #footerArea1 #footerBox1 ul li .footerLinkNone { overflow: hidden; color:#cccccc; padding-top: 8px; padding-bottom: 5px; }



/* ホバー回避（iPad Portrait、スマホ）、他
========================================================= */

@media screen and (min-width: 769px) {
	#pagetop a:hover::after { top: 14px; }
	#headerWrap #headerBox #heNavWrap #heNav > ul > li > a:hover > div > span::after { width: 100%; opacity: 1; left: 0; }
	#headerWrap #headerBox #heLanguage ul .heLanguageOf a:hover { color: #ffffff; background-color: #000000; }
	#footerWrap #footerAreaSNS #footerBoxSNS #snsIconCmn div a:hover img { opacity: 1; }
	#footerWrap #footerArea1 #footerBox1 ul li a:hover span::after { left: 0%; width: 100%; opacity: 1; }
}

@media screen and (min-width: 768px) {
	#headerWrap #headerBox #heNavWrap { display: block !important; max-height: 58px; }
	#headerWrap #headerBox #heNavWrap #heNav > ul > li > a { color: #000000 !important; }
	#headerWrap #headerBox #heNavWrap #heNav > ul > li > .navLinkNone { color: #cccccc !important; }
}



/* タブレット
========================================================= */

@media screen and (max-width: 1024px) {
	/* Header */
	#headerWrap #headerBox #heNavWrap { width: 55%; right: 12.5%; }
	#headerWrap #headerBox #heNavWrap #heNav > ul > li > a > div { font-size: 1.3rem; }
	#headerWrap #headerBox #heLanguage ul li span { width: 38px; }
	#headerWrap #headerBox #heLanguage ul li a { width: 38px; }
	
	/* Footer */
	#footerWrap #footerArea1 #footerBox1 ul { width: 65%; }
}



/* スマートフォン
========================================================= */

@media screen and (max-width: 767px) {
	#pagetop { bottom: 344px; }
	
	/* Header */
	#headerWrap { padding-right: 0; padding-left: 0; }
	#headerWrap #headerBox { height: 57px; }
	#headerWrap #headerBox #heLogo { width: 144px; height: 43px; top: 7px; left: 10px; }
	#headerWrap #headerBox #heLogo a { width: 144px; height: 43px; background-size: 144px 43px; }
	#headerWrap #headerBox #heNavBtn { width: 44px; height: 44px; position: absolute; top: 7px; right: 0; background-color: #ffffff; }
	#headerWrap #headerBox #heNavBtn div { width: 44px; height: 44px; position: relative; cursor: pointer; }
	#headerWrap #headerBox .heNavBtnIcon1 div span:nth-child(1) { position: absolute; top: 11px; left: 10px; width: 24px; height: 3px; background-color: #000000; transition: all 0.25s ease 0.25s; }
	#headerWrap #headerBox .heNavBtnIcon1 div span:nth-child(2) { position: absolute; top: 20px; left: 10px; width: 20px; height: 3px; background-color: #000000; transition: all 0.25s ease 0.0s; }
	#headerWrap #headerBox .heNavBtnIcon1 div span:nth-child(3) { position: absolute; top: 29px; left: 10px; width: 24px; height: 3px; background-color: #000000; transition: all 0.25s ease 0.25s; }
	#headerWrap #headerBox .heNavBtnIcon2 div span:nth-child(1) { width: 0; }
	#headerWrap #headerBox .heNavBtnIcon2 div span:nth-child(2) { width: 0; }
	#headerWrap #headerBox .heNavBtnIcon2 div span:nth-child(3) { width: 0; }
	#headerWrap #headerBox .heNavBtnIcon1 div span:nth-child(4) { position: absolute; top: 21px; left: 10px; width: 24px; height: 3px; background-color: #000000; opacity: 0; transform-origin: 50% 50%; transform: rotate(45deg) scale(0); transition: all 0.3s ease-out 0.3s; }
	#headerWrap #headerBox .heNavBtnIcon1 div span:nth-child(5) { position: absolute; top: 21px; left: 10px; width: 24px; height: 3px; background-color: #000000; opacity: 0; transform-origin: 50% 50%; transform: rotate(-45deg) scale(0); transition: all 0.3s ease-out 0.3s; }
	#headerWrap #headerBox .heNavBtnIcon2 div span:nth-child(4) { opacity: 1; transform: rotate(45deg) scale(1); }
	#headerWrap #headerBox .heNavBtnIcon2 div span:nth-child(5) { opacity: 1; transform: rotate(-45deg) scale(1); }
	#headerWrap #headerBox #heNavWrap { display: none; width: 100%; top: 57px; right: 0; background-color: #000000; }
	#headerWrap #headerBox #heNavWrap #heNav > ul { display: block; }
	#headerWrap #headerBox #heNavWrap #heNav > ul > li { display: block; text-align: left; }
	#headerWrap #headerBox #heNavWrap #heNav > ul > li > a { color: #ffffff; position: relative; display: block; }
	#headerWrap #headerBox #heNavWrap #heNav > ul > li > a > div { font-size: 1.5rem; line-height: 2rem; padding-top: 16px; padding-bottom: 17px; padding-left: 18px; border-bottom: 1px solid #bfbfbf; }
	#headerWrap #headerBox #heNavWrap #heNav > ul > li > a > div > span::after { display: none; }
	#headerWrap #headerBox #heNavWrap #heNav > ul > li > a::before { position: absolute; top: 50%; right: 22px; margin-top: -6px; content: ""; width: 10px; height: 10px; border-top: 2px solid #ffffff; border-right: 2px solid #ffffff; transform: rotate(45deg); }
	#headerWrap #headerBox #heNavWrap #heNav > ul > li#heNavBt1 { width: 100%; }
	#headerWrap #headerBox #heNavWrap #heNav > ul > li#heNavBt2 { width: 100%; }
	#headerWrap #headerBox #heNavWrap #heNav > ul > li#heNavBt3 { width: 100%; }
	#headerWrap #headerBox #heNavWrap #heNav > ul > li#heNavBt4 { width: 100%; }
	#headerWrap #headerBox #heLanguage { top: 16px; right: 49px; }
	#headerWrap #headerBox #heLanguage ul li span { border-radius: 13px; padding-top: 5px; padding-bottom: 4px; }
	#headerWrap #headerBox #heLanguage ul li a { border-radius: 13px; padding-top: 5px; padding-bottom: 4px; }
	
	#headerWrap #headerBox #heNavWrap #heNav > ul > li > .navLinkNone { color: #ffffff; position: relative; display: block; }
	#headerWrap #headerBox #heNavWrap #heNav > ul > li > .navLinkNone > div { font-size: 1.5rem; line-height: 2rem; padding-top: 16px; padding-bottom: 14px; padding-left: 18px; border-bottom: 1px solid #bfbfbf; }
	#headerWrap #headerBox #heNavWrap #heNav > ul > li > .navLinkNone > div > span::after { display: none; }
	
	/* Footer */
	#footerWrap #footerAreaSNS { padding-right: 20px; padding-left: 20px; }
	#footerWrap #footerAreaSNS #footerBoxSNS { height: 86px; }
	#footerWrap #footerAreaSNS #footerBoxSNS #snsIconCmn { top: 25px; }
	#footerWrap #footerArea1 { border-top: 1px solid #000000; padding-right: 0; padding-left: 0; }
	#footerWrap #footerArea1 #footerBox1 { height: auto; position: static; }
	#footerWrap #footerArea1 #footerBox1 #feLogo { position: static; margin: 25px auto 25px auto; }
	#footerWrap #footerArea1 #footerBox1 ul { display: block; position: static; width: 100%; }
	#footerWrap #footerArea1 #footerBox1 ul li { display: block; text-align: left; }
	#footerWrap #footerArea1 #footerBox1 ul li:nth-child(1) { width: 100%; border-top: 1px solid #000000; }
	#footerWrap #footerArea1 #footerBox1 ul li:nth-child(2) { width: 100%; border-top: 1px solid #000000; }
	#footerWrap #footerArea1 #footerBox1 ul li:nth-child(3) { width: 100%; border-top: 1px solid #000000; }
	#footerWrap #footerArea1 #footerBox1 ul li:nth-child(4) { width: 100%; border-top: 1px solid #000000; }
	#footerWrap #footerArea1 #footerBox1 ul li a { padding-top: 11px; padding-bottom: 13px; padding-left: 20px; position: relative; }
	#footerWrap #footerArea1 #footerBox1 ul li a::after { position: absolute; top: 50%; right: 22px; margin-top: -5px; content: ""; width: 10px; height: 10px; border-top: 2px solid #000000; border-right: 2px solid #000000; transform: rotate(45deg); }
	#footerWrap #footerArea1 #footerBox1 ul li a span::after { display: none; }
	#footerWrap #footerArea2 { padding-right: 20px; padding-left: 20px; }
	#footerWrap #footerArea2 #footerBox2 { padding-top: 26px; padding-bottom: 46px; }
	#footerWrap #footerArea2 #footerBox2 p { font-size: 1.2rem; }
	
	#footerWrap #footerArea1 #footerBox1 ul li .footerLinkNone { padding-top: 13px; padding-bottom: 10px; padding-left: 20px; }
}