@charset "UTF-8";
/*--------------------------------------
	font system
---------------------------------------*/
body { font-family: 'Hiragino Sans','ヒラギノ角ゴシック','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3',Meiryo,'メイリオ',sans-serif; -webkit-text-size-adjust: 100%; }

.ffg { font-family: 'Hiragino Sans','ヒラギノ角ゴシック','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3',Meiryo,'メイリオ',sans-serif; }

.ffm, #text-area { font-family: 'Hiragino Mincho ProN','ヒラギノ明朝 ProN W3','HG明朝E',Meiryo,'メイリオ',serif; }

#footer #copyright { font-size: 0.625rem; line-height: 100%; font-weight: 300; }

#text-area { font-size: 0.9375rem; line-height: 172.8%; font-weight: 300; }

#headerset #logo { font-size: 1.25rem; line-height: 161.8%; font-weight: 300; }

#result-area #result-bar #bar-input1, #result-area #result-bar #bar-input2 { font-size: 2.625rem; line-height: 100%; font-weight: 300; }

#result-area #result-rect #rect-input1, #result-area #result-rect #rect-input2, #result-area #result-bar #bar-input3 { font-size: 2.875rem; line-height: 100%; font-weight: 300; }

/*--------------------------------------
	common
---------------------------------------*/
* { margin: 0; padding: 0; }

body { color: #444; background: #fcfcfc; }

a, a:visited { color: #444; text-decoration: none; }

ul { list-style: none; }

img { border-style: none; vertical-align: top; }

.cf { clear: both; width: 0; height: 0; overflow: hidden; }

.cf-after:after { content: ""; display: block; width: 0; height: 0; clear: both; overflow: hidden; }

#wholepage { visibility: hidden; }

/*--------------------------------------
	header
---------------------------------------*/
.sw1:before { content: ""; }

.sw2:before { content: "─ "; }

.sw3:before { content: " ─"; }

.sw4:before { content: " "; padding: 0 10px 0 0; }

.sw5:before { content: ""; }

.sw6:before { content: " "; }

#headerset { width: 1100px; margin: 0 auto; padding-top: 20px; padding-bottom: 100px; }
#headerset #logo { margin-left: 50px; float: left; }
#headerset #menuset { width: 760px; margin: 13px 40px 0 0; float: right; }
#headerset #menuset li { display: inline; margin-left: 20px; float: left; }
#headerset #m-menubtn, #headerset #menuset-mobile { display: none; }

/*--------------------------------------
	footer
---------------------------------------*/
#footer { position: relative; width: 1100px; margin: 0 auto; padding: 100px 0 14px; color: #b7b7b7; text-align: center; }
#footer #topagetop { position: absolute; top: 70px; left: 997px; opacity: 0.25; filter: alpha(opacity=25); }
#footer #topagetop:hover { opacity: 1.0; filter: alpha(opacity=100); }

/*--------------------------------------
	This Page
---------------------------------------*/
#metallic-body { width: 1000px; margin: 0 auto; }

.area-title { float: left; }

#type-ctrl { float: right; }
#type-ctrl a { display: block; margin-left: 8px; border: 1px solid #e4e4e4; float: left; }
#type-ctrl a.nowtype, #type-ctrl a:hover { border: 1px solid #7f7e7f; }

#type-set-rect { padding: 25px 0 60px; }
#type-set-rect a { display: block; margin-right: 20px; float: left; }
#type-set-rect a#rect1414, #type-set-rect a#rect1618 { margin-right: 21px; }
#type-set-rect a#rect3303 { margin-right: 0; }
#type-set-rect #rect1000 { width: 48px; height: 68px; background: url(../images/idx_btn_rect_1000_off.png) no-repeat; background-size: auto 68px; }
#type-set-rect #rect1000:hover, #type-set-rect #rect1000.nowratio { background-image: url(../images/idx_btn_rect_1000_on.png); }
#type-set-rect #rect1333 { width: 64px; height: 68px; background: url(../images/idx_btn_rect_1333_off.png) no-repeat; background-size: auto 68px; }
#type-set-rect #rect1333:hover, #type-set-rect #rect1333.nowratio { background-image: url(../images/idx_btn_rect_1333_on.png); }
#type-set-rect #rect1414 { width: 68px; height: 68px; background: url(../images/idx_btn_rect_1414_off.png) no-repeat; background-size: auto 68px; }
#type-set-rect #rect1414:hover, #type-set-rect #rect1414.nowratio { background-image: url(../images/idx_btn_rect_1414_on.png); }
#type-set-rect #rect1618 { width: 78px; height: 68px; background: url(../images/idx_btn_rect_1618_off.png) no-repeat; background-size: auto 68px; }
#type-set-rect #rect1618:hover, #type-set-rect #rect1618.nowratio { background-image: url(../images/idx_btn_rect_1618_on.png); }
#type-set-rect #rect1732 { width: 83px; height: 68px; background: url(../images/idx_btn_rect_1732_off.png) no-repeat; background-size: auto 68px; }
#type-set-rect #rect1732:hover, #type-set-rect #rect1732.nowratio { background-image: url(../images/idx_btn_rect_1732_on.png); }
#type-set-rect #rect2000 { width: 96px; height: 68px; background: url(../images/idx_btn_rect_2000_off.png) no-repeat; background-size: auto 68px; }
#type-set-rect #rect2000:hover, #type-set-rect #rect2000.nowratio { background-image: url(../images/idx_btn_rect_2000_on.png); }
#type-set-rect #rect2414 { width: 116px; height: 68px; background: url(../images/idx_btn_rect_2414_off.png) no-repeat; background-size: auto 68px; }
#type-set-rect #rect2414:hover, #type-set-rect #rect2414.nowratio { background-image: url(../images/idx_btn_rect_2414_on.png); }
#type-set-rect #rect2618 { width: 126px; height: 68px; background: url(../images/idx_btn_rect_2618_off.png) no-repeat; background-size: auto 68px; }
#type-set-rect #rect2618:hover, #type-set-rect #rect2618.nowratio { background-image: url(../images/idx_btn_rect_2618_on.png); }
#type-set-rect #rect3303 { width: 159px; height: 68px; background: url(../images/idx_btn_rect_3303_off.png) no-repeat; background-size: auto 68px; }
#type-set-rect #rect3303:hover, #type-set-rect #rect3303.nowratio { background-image: url(../images/idx_btn_rect_3303_on.png); }

#type-set-bar { display: none; padding: 25px 0 60px; }
#type-set-bar a { display: block; margin-right: 21px; float: left; }
#type-set-bar a#bar2414, #type-set-bar a#bar2618 { margin-right: 20px; }
#type-set-bar a#bar3303 { margin-right: 0; }
#type-set-bar #bar1414 { width: 82px; height: 68px; background: url(../images/idx_btn_bar_1414_off.png) no-repeat; background-size: auto 68px; }
#type-set-bar #bar1414:hover, #type-set-bar #bar1414.nowratio { background-image: url(../images/idx_btn_bar_1414_on.png); }
#type-set-bar #bar1618 { width: 94px; height: 68px; background: url(../images/idx_btn_bar_1618_off.png) no-repeat; background-size: auto 68px; }
#type-set-bar #bar1618:hover, #type-set-bar #bar1618.nowratio { background-image: url(../images/idx_btn_bar_1618_on.png); }
#type-set-bar #bar1732 { width: 100px; height: 68px; background: url(../images/idx_btn_bar_1732_off.png) no-repeat; background-size: auto 68px; }
#type-set-bar #bar1732:hover, #type-set-bar #bar1732.nowratio { background-image: url(../images/idx_btn_bar_1732_on.png); }
#type-set-bar #bar2000 { width: 116px; height: 68px; background: url(../images/idx_btn_bar_2000_off.png) no-repeat; background-size: auto 68px; }
#type-set-bar #bar2000:hover, #type-set-bar #bar2000.nowratio { background-image: url(../images/idx_btn_bar_2000_on.png); }
#type-set-bar #bar2414 { width: 140px; height: 68px; background: url(../images/idx_btn_bar_2414_off.png) no-repeat; background-size: auto 68px; }
#type-set-bar #bar2414:hover, #type-set-bar #bar2414.nowratio { background-image: url(../images/idx_btn_bar_2414_on.png); }
#type-set-bar #bar2618 { width: 152px; height: 68px; background: url(../images/idx_btn_bar_2618_off.png) no-repeat; background-size: auto 68px; }
#type-set-bar #bar2618:hover, #type-set-bar #bar2618.nowratio { background-image: url(../images/idx_btn_bar_2618_on.png); }
#type-set-bar #bar3303 { width: 192px; height: 68px; background: url(../images/idx_btn_bar_3303_off.png) no-repeat; background-size: auto 68px; }
#type-set-bar #bar3303:hover, #type-set-bar #bar3303.nowratio { background-image: url(../images/idx_btn_bar_3303_on.png); }

#result-ctrl { display: block; float: right; }
#result-ctrl #fp-title { padding-right: 2px; float: left; }
#result-ctrl a { display: block; margin-left: 8px; border: 1px solid #e4e4e4; float: left; }
#result-ctrl a.nowfptype, #result-ctrl a:hover { border: 1px solid #7f7e7f; }

#result-area { position: relative; width: 1000px; height: 303px; margin-top: 25px; background: url(../images/idx_bg_result.png) left top; background-size: 40px 40px; overflow: hidden; }
#result-area input { line-height: 0; color: #444; border: none; }
#result-area #result-rect { position: absolute; top: 0; left: 348px; width: 303px- 8px; height: 303px- 8px; border: 4px solid #b1b1b1; background: #fff; overflow: hidden; }
#result-area #result-rect #rect-input1 { position: absolute; top: 112px; left: 13px; width: 267px; height: 66px; font-weight: 400; background: #fff; }
#result-area #result-rect #rect-input2 { position: absolute; top: 227px; left: 0; width: 267px; height: 66px; font-weight: 400; background: #fff; text-align: center; }
#result-area #result-bar { display: none; position: absolute; top: 0; left: 285px; width: 428px; height: 303px; }
#result-area #result-bar #result-bar-numbox1 { width: 50px; height: 46px; margin: 15px 0; text-align: center; border-left: 2px solid #b1b1b1; border-right: 1px solid #b1b1b1; background: url(../images/idx_deco_bar.png) repeat-x left center; background-size: 50px 14px; overflow: hidden; float: left; }
#result-area #result-bar #result-bar-numbox2 { width: 122px; height: 46px; margin: 15px 0; text-align: center; border-left: 1px solid #b1b1b1; border-right: 2px solid #b1b1b1; background: url(../images/idx_deco_bar.png) repeat-x left center; background-size: 50px 14px; overflow: hidden; float: right; }
#result-area #result-bar #result-bar-numbox3 { width: 424px; height: 46px; margin: 15px 0; text-align: center; border-left: 2px solid #b1b1b1; border-right: 2px solid #b1b1b1; background: url(../images/idx_deco_bar.png) repeat-x left center; background-size: 50px 14px; overflow: hidden; float: none; }
#result-area #result-bar #bar-input1, #result-area #result-bar #bar-input2 { width: 94px; height: 46px; font-weight: 400; text-align: center; background: url(../images/idx_deco_barcover.png) repeat-x left center; background-size: 50px 14px; border: none; }
#result-area #result-bar #result-bar-l { width: 299px; height: 143px; border: 4px solid #b1b1b1; border-right: none; background: #fff; float: left; }
#result-area #result-bar #result-bar-r { width: 121px; height: 143px; border: 4px solid #b1b1b1; border-left: none; background: #dfdfdf; float: right; }
#result-area #result-bar #bar-input3 { width: 100px; height: 46px; font-weight: 400; text-align: center; background: url(../images/idx_deco_barcover.png) repeat-x left center; background-size: 50px 14px; border: none; }

#result-caption { padding: 20px 0 0; text-align: center; }

#text-area { padding: 38px 0 0; }
#text-area #ta-left, #text-area #ta-right { width: 475px; padding: 27px 0 0; float: left; }
#text-area #ta-right { float: right; }
#text-area p { padding-bottom: 15px; }