@charset "UTF-8";
@import url(reset.css);
@import url(icon.css);
@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700');

/* common
----------------------------- */
body, * { font-family: "游ゴシック体", "游ゴシック", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", sans-serif; margin: 0; padding: 0; }
html { height:100%; margin:0 auto; padding:0; width:100%;}
body { background-color: #fff; color: #000; font-feature-settings: "palt"; -webkit-text-size-adjust: 100%; font-size: 16px; height: 100%; line-height: 1.4; margin: 0 auto; padding: 0; text-align: left; width: 100%; }
h1, h2, h3, h4 { font-weight: bold; }
img { vertical-align: bottom; }
p { letter-spacing: .05em; line-height: 1.7; }
a,a:link, a:visited { color: #000; text-decoration: none; }
a:active, a:hover { color: #b22222; }
#main .page-body a:visited { color: #00008B;}
sup { font-size: 70%; vertical-align: super;}

.al { text-align: left }
.ac { text-align: center }
.ar { text-align: right }
.cap { font-size: 79% !important }
.square, .cross { padding-left: 1.5em; position: relative}
.square::before { content: '■'; color: #4890fb; position: absolute; left: 0; top: 0; line-height: 1}
.cross::before { content: ''; width: 1em; height: 3px; background: #ff0000; position: absolute; left: 0; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%);}
.cross::after { content: ''; width: 3px; height: 100%; background: #ff0000; position: absolute; left: 5px; top: 0;}
.red { color: #ff0004; font-weight: bold}
.green { color: #196A00; font-weight: bold}
.caption { color: #003366;}
.right { text-align: right;}
ol { padding-left: 2em; margin-bottom: 10px; overflow: hidden; line-height: 1.7}
ol li { list-style-type: decimal; margin-bottom: 10px;}

#header { position: relative; }
#header .block-logo { background-color: #fff; }
#header .block-ttl { background: url(../img/bg-header.png) no-repeat; position: relative; }
#header .block-ttl a { color: #09225a; display: block; font-family: 'Roboto Condensed', sans-serif; font-weight: 700; letter-spacing: .02em; line-height: 1.2; width: 100%; }
#header .block-ttl a em { display: block; }
#key-visual { position: relative; }
#key-visual ul { letter-spacing: -.4em; }
#key-visual li { display: inline-block; letter-spacing: normal; vertical-align: bottom; }
#key-visual li a { color: #fff; display: table-cell; font-size: .6875rem; }
#main .page-ttl { overflow: hidden; padding-bottom: 1.5em; }
#main .page-ttl .txt { float: left; }
#main .page-ttl .link { float: right; text-align: right; }
#main .page-ttl .link a { display: block; }
#main .page-body { font-size: .8125em }
#main .page-body a { color: #b22222; text-decoration: underline; }
#main .block { padding-bottom: 20px; }
#main .list-banner li + li { padding-top: 18px; }
#main .list-banner li img { width: 100%; }
#main .left-line { border-bottom: none; color: #000; padding: 0 0 0 .8em; position: relative; margin-bottom: 10px !important; font-size: 120%; font-weight: bold;}
#main .left-line::before { position: absolute; content: ''; width: 4px; height: 10px; top: 50%; left: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%);}
#main h2, #cat-info #main h1, #main h2, #cat-archive #main h1 { border-bottom: 1px dashed; font-size: 1rem; margin-bottom: 1em; padding: .25rem 0; }
#main h2 span, #cat-info #main h1 span, #main h2 span, #cat-archive #main h1 span { border-left: 6px solid; display: block; line-height: 1.4; padding-left: .5em; }
#main h3, #cat-archive #main h2 { color: #fff; font-weight: bold; margin-bottom: 1em;}
#main h3 span, #cat-archive #main h2 span { width: 50%; display: inline-block; padding: .20rem; position: relative;}
#main h3 span::after, #cat-archive #main h2 span::after { position: absolute; content: ''; background: linear-gradient(to bottom left, rgba(230,118,197,0) 50%, #e676c5 50.5%) no-repeat top left/100% 100%; width: 60px; height: 100%; right: -60px; top: 0;}
#main .list-news p { padding: .5em 0 1.5em; margin-bottom: 0 !important;}
#main .list-news dt, #main .contact dt, #main .news dt { background-color: #eee; padding: .3em .5em; position: relative; }
#main .list-news dt span { border-left: 4px solid; padding-left: .5em; }
#main .list-news dd, #main .news dd { padding: .5em 1em .8em; }
#main .list-arrow dt a { display: block; position: relative; text-decoration: none; color: #000 !important; font-weight: bold; margin-bottom: 5px;}
#main .list-arrow dt a:hover { background: none; color: #000}
#main .list-arrow dt a::before { content: '\e802'; font-family: 'icon'; border: 1px solid #000; margin-right: 0.5em}
#main .list-arrow { padding-left: 1em; margin-bottom: 40px}
#main .list-arrow dd { margin-bottom: 10px }
#main .list-arrow dd p:last-of-type { margin-bottom: 0 !important }
#main .link-archive { border-bottom: 1px dashed #000; font-size: .75rem; padding: .5em 0; text-align: right; }
#main ul.anchor { letter-spacing: -.4em; margin-bottom: 10px;}
#main ul.anchor li { display: inline-block; letter-spacing: 0; padding: 0 5px; position: relative}
#main ul.anchor li::after { position: absolute; content: ''; width: 1px; height: 0.8em; background: #000; right: 0; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%)}
#main .history ul.anchor { margin-bottom: 20px;}
#main .history ul.anchor li { text-align: left; padding: 1px; width: 50%;}
#main .history ul.anchor div { background: #eee; padding: 5px;}
#main .history ul.anchor li::after { width: 0; height: 0;}
#main dl.gray-box, #main ul.gray-box { margin-bottom: 20px;}
#main dl.gray-box dt { margin-bottom: 5px; background: #ddd; padding: 4px}
#main dl.gray-box dd { background: #eee; padding: 4px; margin-bottom: 20px;}
#main dl.gray-box dd:last-of-type { margin-bottom: 0;}
#main ul.gray-box li { margin-bottom: 10px; background: #eee; padding: 4px}
#main span.email { position: relative; padding: .5em 1em .5em 2em; background: #f2f2f2; line-height: 1;}
#main span.email img { vertical-align: middle}
#main span.email::after { position: absolute; content: '\e806'; font-family: 'icon'; left: .5em; top: .6em; color: #0e2c71 }
#main .list-gray li { position: relative; padding: 0 0 0 .8em}
#main .list-gray li::after { position: absolute; content: ''; width: 4px; height: 10px; left: 0; top: .4em; background: #b0b0b0;}
#main a.ic-arrow  { color: #000 !important; line-height: 14px; text-decoration: none; }
#main a.ic-arrow::after { background-color: #9e9e9e; border-radius: 3px; color: #fff; content: '\e802'; display: inline-block; font-family: 'icon'; font-size: .625rem; line-height: 14px; margin-left: .5em; text-align: center; width: 14px; }
#main .btn-page-top a { color: #000; line-height: 14px; text-decoration: none; }
#main .btn-page-top a::before { background-color: #3366cc; border-radius: 3px; color: #fff; content: '\e803'; display: inline-block; font-family: 'icon'; font-size: .625rem; line-height: 14px; margin-right: .5em; text-align: center; width: 14px; }
#main .intro dl.photo { margin-bottom: 1em}
#main .intro dl.photo li:last-child { padding-left: 1em}
#main .scroll { margin-bottom: 20px;}
#main .scroll table { width: 100%;}
#main .scroll table , #main .scroll td, #main .scroll th { border: 1px solid #fff; border-collapse: collapse;}
#main .scroll td, #main .scroll th { padding: 3px; width: 30px;}
#main .scroll th { background: #336699; color: #fff}
#main .scroll td { background: #d6dceb}
#main .award .scroll td { background: #eee}
#main .scroll.gray th { background: #ddd; color: #000}
#main .scroll.gray td { background: #eee}
#main .product ul.anchor { margin-bottom: 20px;}
#main .product ul.anchor li { margin-bottom: 5px; text-align: left; display: block;}
#main .product ul.anchor li ul { width: 100%; margin: 0; letter-spacing: -.4em; padding-left: 0.5em}
#main .product ul.anchor li ul li { display: inline-block; padding: 0 10px; letter-spacing: 0; margin-bottom: 0;}
#main .product ul.anchor li::after { width: 0; height: 0;}
#main .product p.ttl { margin-bottom: 10px;}
#main .contact h3 { border-bottom: none; color: #000; padding: 0 0 0 .8em; position: relative; font-size: 1rem; margin-bottom: .5em}
#main .contact p { margin-bottom: 30px !important;}
#main .contact h3::before { position: absolute; content: ''; width: 4px; height: 10px; top: 50%; left: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%); background: #b0b0b0;}
#main .contact dt { margin-bottom: 2px; }
#main .contact dt span { position: relative; padding-left: 1em}
#main .contact dt span::before { position: absolute; content: '\f105'; font-family: 'icon'; left: 0; top: 0; line-height: 1}
#main .contact dd { margin-bottom: 20px; background: #D6DCEB; padding: .5em 1em;}
#main .unsubscribe dl { margin-bottom: 20px;}
#main .news h3 span { width: 70%;}
#main .specifications ul { margin-bottom: 20px; margin-left: 1em}
#main .specifications ul li { margin-bottom: 5px;}
#main .specifications ul li a { font-weight: bold}
#main .specifications h3 { border-bottom: none; color: #000; padding: 0 0 0 .8em; position: relative; margin-bottom: .5em;}
#main .specifications h3::before { position: absolute; content: ''; width: 4px; height: 10px; top: 50%; left: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%);}
#main .specifications p.ttl { font-weight: bold; font-size: 1rem;}
#main .technology.index h3 { border-bottom: none; color: #000; padding: 0 0 0 .8em; position: relative; margin-bottom: .5em;}
#main .technology.index h3::before { position: absolute; content: ''; width: 4px; height: 10px; top: 50%; left: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%); background: #b0b0b0;}
#main .technology table th { background: #ddd; color: #000; text-align: left;}
#main .technology table td { background: #eee;}
#main .technology ul.anchor { margin-bottom: 20px;}
#main .technology p.ttl { font-weight: bold; margin-bottom: 10px;}
#main .nessie table th, #main .nessie table td { display: block !important; width: 100% !important}
#main .nessie ul { padding-left: 1.5em; margin-bottom: 20px;}
#main .nessie ul li { list-style-type: disc; margin-bottom: 5px;}
#main .source h4 { border-bottom: none; color: #000; padding: 0 0 0 .8em; position: relative; margin-bottom: 10px; font-size: 120%;}
#main .source h4::before { position: absolute; content: ''; width: 4px; height: 10px; top: 50%; left: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%);}
#main .source p.ttl { margin-bottom: 10px; font-size: 120%; font-weight: bold}


#footer { background-color: #e5e3e3; font-size: .6875rem; overflow: hidden; }
#footer ul { border-right: 1px solid #333; letter-spacing: -.4em; }
#footer ul li { border-left: 1px solid #333; padding: 0 .6em; display: inline-block; letter-spacing: normal; }
#idx #key-visual li a { background-color: rgba(0,0,0,.5); font-weight: bold; padding: .5em 3em; }
#idx #key-visual li a:hover { background-color: #000; }
#idx #main .list-news h2 { border-color: #000; }
#idx #main .list-news h2 span { border-color: #999; }
#idx #main .list-news dt span { border-color: #b0b0b0; }
#idx #main .page-ttl .txt { border-left: 5px solid #b4c0da; padding-left: .5em; }
.page #key-visual li { display: inline-block; }
.page #key-visual li a { color: #fff; text-align: center; vertical-align: middle; }
#cat-info #main h1, #cat-info #main h1 span { border-color: #224491; }
#cat-camellia #main h2, #cat-camellia #main h2 span { border-color: #d829a5; }
#cat-camellia .list-news dt span { border-color: #fa34dc; }
#cat-info #key-visual li a { background: #9db6e6; background: linear-gradient(to bottom, rgba(158,183,232,1) 0%,rgba(126,161,222,1) 100%); }
#cat-info #key-visual li a.current, #cat-info #key-visual li a:hover { background: #4265b3; background: linear-gradient(to bottom, rgba(76,115,191,1) 0%,rgba(54,84,166,1) 50%,rgba(42,63,151,1) 100%); }
#cat-info .contact p span { margin-bottom: 5px; display: inline-block;}

#cat-camellia #key-visual li a { background: #f28299; background: linear-gradient(to bottom, rgb(250,153,184) 0%,rgb(241,129,151) 50%,rgb(209,140,158) 100%); }
#cat-camellia #key-visual li a.current, #cat-camellia #key-visual li a:hover { background: #f95391; background: linear-gradient(to bottom, rgb(249,83,145) 0%,rgb(237,63,96) 50%,rgb(193,36,39) 100%); }
#cat-camellia h3 { border-bottom: 1px solid #e676c5}
#cat-camellia h3 span, #cat-camellia .source h4::before, #cat-camellia .specifications h3::before, #cat-camellia .left-line::before { background: #e676c5;}
#cat-camellia .nessie table tr:first-of-type th { margin-bottom: 20px;}

#cat-psec #key-visual li a { background: #72CD5F; background: linear-gradient(to bottom, rgba(147,221,125,1) 0%,rgba(130,214,110,1) 50%,rgba(114,205,95,1) 100%); }
#cat-psec #key-visual li a.current, #cat-psec #key-visual li a:hover { background: #3E9B2F; background: linear-gradient(to bottom, rgba(125,208,105,1) 0%,rgba(74,173,57,1) 50%,rgba(62,155,47,1) 100%); }
#cat-psec #main h2, #cat-psec #main h2 span { border-color: #42a732; }
#cat-psec .list-news dt span { border-color: #42a732; }
#cat-psec h3 { border-bottom: 1px solid #42a732}
#cat-psec h3 span, #cat-psec .source h4::before, #cat-psec .specifications h3::before, #cat-psec .left-line::before { background: #42a732;}
#cat-psec h3 span::after { background: linear-gradient(to bottom left, rgba(230,118,197,0) 50%, #42a732 50.5%) no-repeat top left/100% 100%;}

#cat-ecaos #key-visual li a { background: #32d0da; background: linear-gradient(to bottom, rgba(78,216,233,1) 0%,rgba(50,208,218,1) 50%,rgba(38,202,219,1) 100%); }
#cat-ecaos #key-visual li a.current, #cat-ecaos #key-visual li a:hover { background: #00b1bd; background: linear-gradient(to bottom, rgba(58,205,227,1) 0%,rgba(0,171,184,1) 50%,rgba(0,146,169,1) 100%); }
#cat-ecaos #main h2, #cat-ecaos #main h2 span { border-color: #04c7cb; }
#cat-ecaos .list-news dt span { border-color: #7294ff; }
#cat-ecaos h3 { border-bottom: 1px solid #7294ff}
#cat-ecaos h3 span, #cat-ecaos .source h4::before, #cat-ecaos .specifications h3::before, #cat-ecaos .left-line::before { background: #04c7cb;}
#cat-ecaos h3 span::after { background: linear-gradient(to bottom left, rgba(230,118,197,0) 50%, #7294ff 50.5%) no-repeat top left/100% 100%;}

#cat-btm #key-visual li a { background: #f6bc00; background: linear-gradient(to bottom, rgba(253,206,7,1) 0%,rgba(245,185,0,1) 50%,rgba(246,184,0,1) 100%); }
#cat-btm #key-visual li a.current, #cat-btm #key-visual li a:hover { background: #DB8300; background: linear-gradient(to bottom, rgba(245,182,0,1) 0%,rgba(219,131,0,1) 50%,rgba(210,103,0,1) 100%); }
#cat-btm #main h2, #cat-btm #main h2 span { border-color: #e69a00; }
#cat-btm .list-news dt span { border-color: #e69a00; }
#cat-btm h3 { border-bottom: 1px solid #e69a00}
#cat-btm h3 span, #cat-btm .source h4::before, #cat-btm .specifications h3::before, #cat-btm .left-line::before { background: #e69a00;}
#cat-btm h3 span::after { background: linear-gradient(to bottom left, rgba(230,118,197,0) 50%, #e69a00 50.5%) no-repeat top left/100% 100%;}

#cat-archive #main h1, #cat-archive #main h1 span { border-color: #b0b0b0; }
#cat-archive h2 { border-bottom: 1px solid #6a6a6a; padding: 0}
#cat-archive h2 span { background: #6a6a6a; border: none; font-size: .8125em;}
#cat-archive #main h2 span::after { background: linear-gradient(to bottom left, rgba(230,118,197,0) 50%, #6a6a6a 50.5%) no-repeat top left/100% 100%;}
#cat-archive p.ttl { font-weight: bold; margin-bottom: 10px !important}
#cat-archive h3::before { background: #b0b0b0;}

#nav a, #nav .block-menu div  { display: block; }
#nav p { line-height: 1.5; }
#nav .block-submenu .ttl, #nav .contact a { background-color: #adbad7; border-bottom: 1px solid #646975; padding: .5em; }
#nav .home a { background-color: #224491; color: #fff; padding: .5em; }
#nav .head-menu { border-left: 6px solid #dae0ee; font-weight: bold; padding-left: .5em; }
#nav .block-submenu > ul { border-right: 1px dashed #343434; }
#nav .block-submenu li + li, #nav .block-submenu p + ul { border-top: 1px dashed #343434; }
#nav .block-submenu li a { font-weight: bold; padding: .4em .4em .4em 1em; }
#nav .block-submenu li p a:hover, #nav .block-submenu li.open p a { background-color: #ebe4d2; color: #000; cursor: pointer; }
#nav .block-submenu li ul { background-color: #f3eee1; padding: .2em 0 .2em 1.5em; }
#nav .block-submenu li ul li { border: none; }
#nav .block-submenu li ul li a { display: inline-block; font-weight: normal; padding: .2em; }
#nav .block-submenu li ul li a:hover { background-color: #ded2b2; }
#nav .block-submenu li ul li ul { padding: 0; position: relative; }
#nav .block-submenu li ul li ul::before {  border-left: 1px solid; bottom: 0; content: ""; display: block; left: .5em; position: absolute; top: 0; width: 0; }
#nav .block-submenu li ul li ul li { line-height: 1.2em; padding-left: 1.4em; position: relative; }
#nav .block-submenu li ul li ul li:before { border-top: 1px solid; content: ""; display: block; left: .5em; height: 0; margin-top: -1px; position: absolute; top: .8em; width: .8em; }
#nav .block-submenu li ul li ul li:last-child:before { background-color: #f3eee1; bottom: 0; height: auto; top: .8em; }
#main .specifications table { text-align: center}
#main .specifications .scroll table th, #main .specifications .scroll table td { vertical-align: middle}

@media screen and (min-width:768px){
body { background: url(../img/bg.gif) repeat-x; }
#wrap { padding-top: 5px; width: 800px; }
#header { overflow: hidden; text-align: right; }
#header .block-logo { float: left; height: 100px; padding: 16px 24px; text-align: left; width: 220px; }
#header .block-logo a { display: block; }
#header .block-logo img { width: 112px; }
#header .block-ttl { float: right; font-size: 1.125em; height: 100px; width: 580px; }
#header .block-ttl a { bottom: 16px; position: absolute; right: 0; }
#header .block-ttl a:hover { color: #2759cf; }
#key-visual ul { bottom: 0; position: absolute; right: 0; }
#footer { padding: .6em 1em; }
#footer ul { float: left; }
#footer small { float: right; }
#content-wrap { overflow: hidden; }
#main { float: right; padding: 25px 0 0 16px; text-align: left; width: 580px; }
#main .block p { margin-bottom: 20px; }
#main .page-ttl, #main .page-body { width: 500px; }
#main .page-ttl .link a + a { margin-top: 1em; }
#main .page-body { padding: 0 0 30px 15px; }
#main .page-body a:hover { background-color: #0066ff; color: #fff; }
#main .list-arrow dd { padding-left: 2em}
#main .intro dl.photo { overflow: hidden; width: 100%;}
#main .intro dl.photo dt { float: right; width: 320px;}
#main .intro dl.photo dd { float: left; padding-right: 20px;}
#main ul.anchor { text-align: right}
#main a.ic-arrow:hover, #main .btn-page-top a:hover { background-color: transparent; color: #000; }
#main a.ic-arrow:hover::after { background-color: #000; }
#main .btn-page-top { text-align: right; }
#main .unsubscribe dl { width: 100%; letter-spacing: -.4em}
#main .unsubscribe dl dt, #main .unsubscribe dl dd { display: inline-block; letter-spacing: 0;}
#main .unsubscribe dl dt { margin-right: 10px;}
#main .technology table th { width: 40%;}
#main .technology ul.anchor { text-align: left;}
#nav { font-size: .75rem; }
#nav { background-color: #fff; float: left; text-align: left; width: 220px; }
#nav .home a:hover { background-color: #0e2c71; }
#nav .contact a:hover { background-color: #8495ba; color: #000; }
#idx #key-visual { height: 176px; }
#idx #key-visual ul { right: 15px; }
#idx #key-visual img { height: 176px; width: 100%; }
#idx #main { padding-left: 30px; }
.page #key-visual { background: url(../img/bg-kv-page.png) no-repeat; height: 65px; }
.page #main .page-ttl { padding-left: 15px; }
.page #key-visual ul { border-left: 3px solid rgba(255,255,255,.5); border-top: 3px solid rgba(255,255,255,.5); border-radius: 17px 0 0 0; bottom: 0; height: 35px; text-align: left; width: auto; }
.page #key-visual li { }
.page #key-visual li + li { border-left: 1px solid #fff; }
.page #key-visual li:first-child { }
.page #key-visual li:first-child a { border-radius: 14px 0 0 0; }
.page #key-visual li a { color: #fff; display: table-cell; height: 32px; width: 88px; }
#cat-info.page #key-visual li a { width: 120px; }
#cat-camellia .standard th:nth-child(1) { width: 20%;}
#cat-camellia .standard th:nth-child(2), #cat-camellia .standard th:nth-child(3) { width: 40%;}
#cat-camellia .standard table:last-of-type th:nth-child(1) { width: 15%;}
#cat-camellia .standard table:last-of-type th:nth-child(2) { width: 20%;}
#cat-camellia .standard table:last-of-type th:nth-child(3) { width: 40%;}
#cat-camellia .standard table:last-of-type th:nth-child(4) { width: 25%;}
}

@media screen and (max-width:767px){
#key-visual br{ display: none !important}
img { max-width: 100%; }
body.fixed { height: 100%; overflow: hidden; }
#wrap { width: 100%; }
#header { width: 100%; }
#header div { display: table-cell; vertical-align: middle; }
#header .block-logo { padding-left: 8px; width: 21%; }
#header .block-logo img { min-width: 60px; }
#header .block-ttl { background: url(../img/bg-header.png) no-repeat 0 0 / auto 50px; height: 50px; padding: 0 56px 10px 0; text-align: right; vertical-align: bottom; width: 79%; }
#header .block-ttl a { font-size: 3vw; }
#header.fixed { position: fixed; top: 0; z-index: 2; }
#key-visual { text-align: right; }
#main .block p { margin-bottom: 20px; }
#main .page-ttl, #main .page-body { padding: 1em 6% 0; }
#main .page-body { padding-bottom: 1em; }
#main .page-ttl .link a + a { margin-top: .5em; }
#main .btn-page-top { text-align: center; }
#main .unsubscribe dl dt { margin-bottom: 10px;}
#main .unsubscribe dl dt input, #main .unsubscribe dl dd { width: 100%;}
#main .unsubscribe dl dd { text-align: center}
#main { word-wrap: break-word; overflow-wrap: break-word; }
#footer { padding: 1em 6%; text-align: center; }
#footer ul { display: inline-block; }
#footer small { display: block; padding-top: .5em; }
#nav-toggle { display: block; height: 36px; position: absolute; right: 10px; top: 10px; width: 34px; z-index: 101; }
#nav-toggle div { position: relative }
#nav-toggle span { background-color: #000; display: block; height: 4px; left: 0; position: absolute; -webkit-transition: .35s ease-in-out; -moz-transition: .35s ease-in-out; transition: .35s ease-in-out; width: 100%; }
#nav-toggle span:nth-child(1) { top: 0 }
#nav-toggle span:nth-child(2) { top: 11px }
#nav-toggle span:nth-child(3) { top: 22px }
#nav { background-color: rgba(255,255,255,0.96); height: 100%; overflow: auto; padding-bottom: 50px; position: fixed; transform: translateX(100%); transition: .3s ease-in-out; top: 50px; width: 100%; z-index: 1; }
#nav .block-submenu li ul li { font-size: .75rem; }
.open #nav-toggle { position: fixed; }
.open #nav-toggle span:nth-child(1) { -webkit-transform: rotate(315deg); transform: rotate(315deg); top: 11px; }
.open #nav-toggle span:nth-child(2) { left: 50%; width: 0; }
.open #nav-toggle span:nth-child(3) { -webkit-transform: rotate(-315deg); transform: rotate(-315deg); top: 11px; }
.open #nav { -webkit-transform: translateX(0); transform: translateX(0); }
#idx #key-visual ul { bottom: 0; position: absolute; right: 5px; }
.page #key-visual { background: #234491 url(../img/bg-kv-page-sp.png) no-repeat 0 0 / 180% auto; min-height: 44px; }
.page #key-visual ul { padding: 40px 2% 4px; width: 100%; }
.page #key-visual li { width: 50%; }
.page #key-visual li:nth-child(even) { /*border-left: 1px solid #fff;*/ padding-left: 1px; }
.page #key-visual li:nth-child(n + 3) { padding-top: 1px; }
.page #key-visual li a { display: block; line-height: 30px; padding-left: 1em; text-align: left; width: 100%; }
#cat-camellia.eng #key-visual li:nth-child(5) a { line-height: 15px;}
#main .intro dl.photo { width: 100%;}
#main .intro dl.photo dt { margin-bottom: 7px;}
#main .intro dl.photo dt img { margin: 0 auto; display: block}
#main .intro dl.photo dd ul { overflow: hidden}
#main .intro dl.photo dd ul li { float: left; padding: 3px; width: 33%;}
#cat-camellia.eng .intro dl.photo dd ul li { width: 50%;}
#main .standard .scroll, #main .archive .scroll, #main .award .scroll { overflow: auto; white-space: nowrap; }
#main .standard .scroll::-webkit-scrollbar, #main .archive .scroll::-webkit-scrollbar,  #main .award .scroll::-webkit-scrollbar { height: 5px;}
#main .standard .scroll::-webkit-scrollbar-track, #main .archive .scroll::-webkit-scrollbar-track, #main .award .scroll::-webkit-scrollbar-track { background: #f1f1f1;}
#main .standard .scroll::-webkit-scrollbar-thumb, #main .archive .scroll::-webkit-scrollbar-thumb, #main .award .scroll::-webkit-scrollbar-thumb { background: #bcbcbc;}
#main .standard .scroll table, #main .archive .scroll table, #main .award .scroll table { width: 150%}
#main .standard .scroll table td, #main .archive .scroll table td, #main .award .scroll table td { white-space: normal;}
#main .technology table th, #main .technology table td { display: block; width: 100%}
}