@charset "utf-8"; /* Cascading Style Sheets: style.css last updated on 2021.03.05 (c) 2021 INUI YOSUKE Design Office (http://www.inuiyosuke.jp/) */ html { height:100%; } body { height:100%; margin:0; padding:0; color:#000; font:normal normal normal 17px/normal sans-serif; letter-spacing:0.05em; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; font-variant-ligatures:no-common-ligatures; } body * { overflow:hidden; vertical-align:middle; box-sizing:border-box; -webkit-overflow-scrolling:touch; } a { outline:0 none #fff; background-repeat:no-repeat; cursor:pointer; } a * { cursor:pointer; } br { letter-spacing:0; } div { width:auto; height:auto; overflow:hidden; margin:0; padding:0; border:0 none #000; } hr { clear:both; display:block; height:1.0em; color:transparent; background:transparent; text-align:left; margin:1px 0 0 0; border-top:thin none #000; } strong { font-style:inherit; font-variant:inherit; font-weight:bold; font-size:inherit; line-height:inherit; font-family:inherit; } small { font-style:inherit; font-variant:inherit; font-weight:inherit; font-size:80%; line-height:125%; font-family:inherit; } img { min-width:1px; min-height:1px; margin:0; padding:0; border:0 none #000; font-size:65%; } form { margin:0; padding:0; } select,label { cursor:pointer; } h1,h2,h3,h4,h5,h6 { margin:0; padding:0; font-size:100%; line-height:100%; font-weight:normal; font:inherit; font-variant-ligatures:none; font-feature-settings:"palt" 1; } p ruby { vertical-align:baseline; } ul,ol { margin:0; padding:0; } li { margin:0; padding:0; display:block; list-style:none outside none; } li img { vertical-align:top;margin:0;padding:0; } li a img { vertical-align:top;margin:0;padding:0; } dl { display:block; margin:0; padding:0; } dt { display:block; clear:both; margin:0; padding:0; } dd { display:inline; margin:0; padding:0; } table { border-collapse:collapse; border-spacing: 0; border:0 solid #ccc; table-layout:fixed; empty-cells:show; margin:0; padding:0; } td,th { margin:0; padding:5px; font-size:80%; line-height:1.35; } /* ----- WM ----- */ * div.WM { display:inline-block !important; float:none !important; color:#777 !important; width:auto !important; max-width:1000px !important; height:auto !important; margin:0.5em auto !important; padding:1.0em !important; background:rgba(255,255,255,0.5) !important; border:thin solid tomato !important; font-style:normal !important; font-weight:normal !important; font-size:10px !important; line-height:125% !important; font-family:sans-serif !important; text-shadow:none !important; letter-spacing:0.1em !important; box-shadow:none !important; vertical-align:middle !important; } * a.WM { clear:none !important; display:inline-block !important; float:none !important; color:#fff !important; width:auto !important; min-width:0 !important; height:auto !important; min-height:0 !important; margin:0 0.5em 1px 0 !important; padding:4px 4px 2px 4px !important; border:none !important; border-radius:unset !important; background:tomato !important; font-style:normal !important; font-weight:normal !important; font-size:10px !important; line-height:125% !important; font-family:sans-serif !important; text-shadow:none !important; letter-spacing:0.1em !important; box-shadow:none !important; filter:none !important; opacity:1 !important; } * a.WM::before { content:none !important; } * a.WM::after { content:none !important; } * a.WM:link { color:#fff !important; text-decoration:none !important; } * a.WM:visited { color:#fff !important; text-decoration:none !important; } * a.WM:hover { color:#000 !important; text-decoration:none !important; } * a.WM:active { color:#000 !important; text-decoration:none !important; } * em.WM { clear:none; display:inline-block !important; color:#d21 !important; width:auto !important; height:auto !important; margin:0 5px 0 0 !important; padding:2px 4px 2px 4px !important; border:none !important; background:transparent !important; font-style:normal !important; font-weight:bold !important; font-size:11px !important; line-height:125% !important; font-family:sans-serif !important; letter-spacing:0.1em !important; text-shadow:none !important; } @media print { body a.WM { display:none !important; } body em.WM { display:none !important; }} /* -------------------------------------------------- ADDITION ITEM -------------------------------------------------- */ body { width:100%; height:100%; background:#eee url(/com/img/bg.png) 50% 50% repeat scroll; color:#000; font-size:16px; line-height:normal; text-align:center; -webkit-text-size-adjust:125%; } a { position:relative; display:inline; transition:background-color 0.4s ease-in-out 0s, background-size 0.2s ease-in-out 0s, background-position 0.1s ease-in-out 0s, color 0.3s ease-in-out 0s, box-shadow 0.5s ease-in-out 0s, text-shadow 0.3s ease-in-out 0s; } a:link { text-decoration:none; color:#a00; } a:visited { text-decoration:none; color:#a00; } a:hover { text-decoration:none; color:#f00; } a:active { text-decoration:none; color:#f00; } a * { transition:background-color 0.4s ease-in-out 0s, background-size 0.4s ease-in-out 0s, color 0.3s ease-in-out 0s, box-shadow 0.5s ease-in-out 0s, text-shadow 0.3s ease-in-out 0s, background-position 0.1s ease-in-out 0s, border-color 0.1s ease-in-out 0s; } a::before { transition:background-color 0.4s ease-in-out 0s, background-size 0.4s ease-in-out 0s, color 0.3s ease-in-out 0s, box-shadow 0.5s ease-in-out 0s, text-shadow 0.3s ease-in-out 0s, background-position 0.3s ease-in-out 0s, border-color 0.3s ease-in-out 0s; } a::after { display:inline-block; position:absolute; left:0; bottom:0.0em; z-index:1; margin:0.15em auto 0; width:1%; height:1px; background-color:transparent; transition:width 0.2s ease-in-out 0s, height 0.2s ease-in-out 0s, background-color 0.3s ease-in-out 0s; } a:hover::after { width:100%; background-color:rgba(0,123,187,1.0); } /* ---------- PAGE ---------- */ div#PAGE { position:static; width:100%; min-width:500px; height:100%; overflow:visible; margin:0 auto; padding:0; text-align:center; } div#BODY { position:static; width:auto; height:auto; min-height:100%; margin:0 auto; } /* ---------- BG ---------- */ div#BG { position:fixed; z-index:19; top:0; left:0; clear:both; display:none; width:100%; height:100%; overflow:hidden; margin:0; padding:0; background:rgba(0,0,0,0.5) 50% 50% no-repeat; } /* ---------- HEADER ---------- */ div#HEADER { position:fixed; z-index:20; bottom:0; left:0; width:100%; height:auto; margin:0 0 0 0; padding:0 0 0 0; background:rgba(255,255,255,0.9) 50% 0% repeat scroll; box-shadow:0px 0px 3px rgba(0,0,0,0.2); text-align:center; } div#HEADER { -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); } div#HEADER div { width:calc(100% - 30px); max-width:960px; margin:0 auto; padding:0 0 0 0; text-align:right; vertical-align:bottom; } div#HEADER div a#LOGO { clear:both; display:inline-block; float:left; width:auto; height:auto; margin:20px auto 0 auto; padding:0; font-size:12px; line-height:12px; text-align:left; } div#HEADER div a#LOGO span { display:inline-block; width:150px; height:16px; margin:0 auto; padding:0; background:transparent url(/com/img/logo.svg) 0% 100% no-repeat scroll; background-size:632px auto; text-indent:-9999em; } div#HEADER div a#LOGO::after { content:"HIROAKI KIMURA&ASSOCIATES"; position:static; display:inline-block; width:240px; height:16px; margin:0; padding:0; background:transparent url(/com/img/logo.svg) 47.5% 100% no-repeat scroll; background-size:632px auto; text-indent:-9999em; vertical-align:middle; } div#HEADER div ol#GNAV { display:inline-block; width:auto; height:auto; overflow:hidden; margin:22px 0 20px -20px; padding:0 0 0 0; font-size:13px; line-height:1.2; letter-spacing:1px; text-align:left; } div#HEADER div ol#GNAV li { display:inline-block; width:auto; height:auto; margin:0 0 10px 20px; padding:0 0 0 0; } div#HEADER div ol#GNAV li a { display:inline-block; width:auto; height:auto; margin:0; padding:0 0 0 5px; } div#HEADER div ol#GNAV li a::before { content:""; display:inline-block; width:1px; height:15px; margin-right:5px; vertical-align:top; border-left:5px solid #ccc; background-size:auto 273px; } div#HEADER div ol#GNAV li a:link { color:#222; } div#HEADER div ol#GNAV li a:visited { color:#222; } div#HEADER div ol#GNAV li a:hover { color:#000; } div#HEADER div ol#GNAV li a:active { color:#000; } div#HEADER div ol#GNAV li a:hover::before { border-color:#000; } div#HEADER span.COPYRIGHT { clear:both; display:inline-block; float:left; width:auto; height:auto; margin:0 0 0 0; padding:0.5em; text-align:left; font-size:11px; line-height:1.1; letter-spacing:1px; color:#777; } /* -- NAVI -- */ a#NAVI { display:block; position:fixed; z-index:101; bottom:5px; right:5px; width:60px; height:60px; margin:0; padding:0; background:transparent url(/com/img/symbol_navi.svg) no-repeat 50% 0%; background-size:100% auto; text-indent:40px; color:rgba(130,90,30,0.0); text-shadow:0 0 20px rgba(130,90,30,0.0); font-size:65%; font-weight:bold; line-height:125%; letter-spacing:0.2em; text-indent:-9999px; } a#NAVI { transition:unset; } a#NAVI:link { color:rgba(130,90,30,0.0); } a#NAVI:visited { color:rgba(130,90,30,0.0); } a#NAVI:hover { text-shadow:0 0 0px rgba(130,90,30,1.0);} a#NAVI:active { color:rgba(130,90,30,1.0); } /* ---------- CAT ---------- */ div#CAT { display:block; width:auto; max-width:calc(100% - 30px); max-width:960px; height:auto; margin:0 auto -150px auto; padding:50px 0 0 0; text-align:left; } div#CAT h1 { clear:both; display:inline-block; width:200px; max-width:960px; height:auto; overflow:visible; margin:0 0 0 0; padding:0 0 0 0; color:#000; font-size:75px; line-height:1.1; font-family:"Times New Roman",Times,Century,Georgia,serif; letter-spacing:0px; font-weight:normal; text-align:left; text-shadow:1px 1px 3px rgba(16,0,0,0.5); vertical-align:middle; -webkit-text-size-adjust:100%; } div#CAT ol { display:inline-block; width:calc(100% - 200px); height:auto; margin:0 0 0 0; padding:0; letter-spacing:0.5px; text-align:right; } div#CAT ol li { display:inline-block; width:auto; height:auto; overflow:hidden; margin:1px 1px -1px -1px; padding:0; border-left:1px solid #ddd; vertical-align:middle; } div#CAT ol li a { display:inline-block; width:auto; min-width:60px; overflow:visible; margin:0 0 0 0; padding:5px 5px 0px 5px; font-size:10px; line-height:1.2; font-weight:bold; text-align:center; } div#CAT ol li a:link { color:#777; } div#CAT ol li a:visited { color:#777; } div#CAT ol li a:hover { color:#000; } div#CAT ol li a:active { color:#000; } div#CAT ol li a::after { content:""; position:static; display:block; width:30px; height:2px; margin:5px auto 0 auto; background:#a00; } div#CAT ol li a:link::after { background:transparent; } div#CAT ol li a:visited::after { background:transparent; } div#CAT ol li a:hover::after { background:#a00; } div#CAT ol li a:active::after { background:#d00; } div#CAT ol li a.CURRENT:link { color:#000; } div#CAT ol li a.CURRENT:visited { color:#000; } /* ---------- FOOTER ---------- */ div#FOOTER { position:relative; display:block; width:100%; height:200px; margin:100px 0 0 0; padding:0; background:#000; border:none; background:#222; } div#FOOTER span.COPYRIGHT { clear:both; display:inline-block; width:auto; height:auto; margin:10px auto; padding:0.5em; text-align:left; font-size:11px; line-height:1.1; letter-spacing:1px; color:#aaa; } div#FOOTER a.LOGO { display:inline-block; width:120px; height:100px; margin:100px; padding:0; background:transparent url(/com/img/logo.svg) 50% 50% no-repeat scroll; background-size:contain; filter:brightness(0) invert(1); text-indent:-9999em; text-align:left; } /* SNS & COPYRIGHT */ div#FOOTER div#LINK { display:block; width:100%; height:auto; margin:50px auto 0 auto; padding:25px; border-top:thin solid #333; text-align:center; } div#FOOTER div#LINK ol.SNS_LINK { display:inline-block; margin:0 auto; } div#FOOTER div#LINK ol.SNS_LINK li { display:inline-block; width:auto; height:auto; margin:0 auto; padding:0 25px 0 0; } div#FOOTER div#LINK ol.SNS_LINK li a { display:inline-block; width:35px; height:35px; background:transparent 50% 50% no-repeat scroll; background-size:contain; text-align:left; text-indent:-9999em; } div#FOOTER div#LINK ol.SNS_LINK li a { filter:brightness(0) invert(0.6); transition:background 0.3s ease-in-out 0s, filter 0.3s ease-in-out 0s; } div#FOOTER div#LINK ol.SNS_LINK li a:hover { filter:brightness(0) invert(1.0); } div#FOOTER div#LINK ol.SNS_LINK li a.INSTAGRAM { background-image:url(/com/img/icon_instagram.svg); } div#FOOTER div#LINK ol.SNS_LINK li a.FACEBOOK { background-image:url(/com/img/icon_facebook.svg); } div#FOOTER div#LINK ol.SNS_LINK li a.TWITTER { background-image:url(/com/img/icon_x.svg); } div#FOOTER div#LINK ol.SNS_LINK li a.YOUTUBE { background-image:url(/com/img/icon_youtube.svg); } div#FOOTER div#LINK ol.SNS_LINK li a.BLOG { background-image:url(/com/img/icon_blog.svg); } div#FOOTER div#LINK span#COPYRIGHT { display:inline-block; width:auto; height:auto; margin:0 0 0 0; padding:0 0; color:#777; font-size:11px; line-height:1.2; letter-spacing:1px; } /* LANG */ ul.LANG { display:inline-block; width:auto; margin:2px auto 5px auto; padding:0 0; text-align:center; } ul.LANG li { display:inline-block; width:auto; margin:0 0 0 10px; padding:0 0; } ul.LANG li a { position:relative; display:inline-block; width:auto; overflow:visible; margin:0 0 0 0; padding:0 0; font-size:10px; line-height:15px; letter-spacing:0.5px; font-weight:normal; text-align:center; } ul.LANG li a:link { color:#777; } ul.LANG li a:visited { color:#777; } ul.LANG li a:hover { color:#000; } ul.LANG li a:active { color:#000; } ul.LANG li a::after { content:""; bottom:-1px } ul.LANG li a:hover::after { width:100%; background-color:#000; } ul.LANG li.CURRENT a { padding:2px 5px; border:thin solid #ccc; border-radius:3px; background:#ccc; color:#fff; } ul.LANG li.CURRENT a:hover { border-color:#ccc; } ul.LANG li.CURRENT a::after { content:unset; } /* -- NEXT -- */ a#NEXT { position:fixed; bottom:15px; left:15px; z-index:200; display:none; width:auto; height:25px; overflow:hidden; margin:0 0 0 0; padding:75px 0 0 0; background:transparent url(/com/img/symbol.svg) 50% 90% no-repeat; text-align:left; text-indent:-9999px; font-size:65%; } a#NEXT:link { color:#000; background-position:50% 0px; } a#NEXT:visited { color:#000; background-position:50% 0px; } a#NEXT:hover { color:#000; background-position:50% -200px; } a#NEXT:active { color:#000; background-position:50% -200px; } /* TOP_BALLOON */ div#BALLOON { position:fixed; bottom:50px; left:150px; display:none; width:230px; height:40px; z-index:255; margin:0 0 0 0; padding:0 0 0 0; background:transparent url(/com/img/balloon_bg.png) 0px 0px scroll no-repeat; text-align:center; } div#BALLOON span { display:block; width:auto; height:auto; margin:10px auto 0 auto; padding:0 10px; color:rgba(0,0,0,1.0); font-size:75%; line-height:135%; letter-spacing:0.05em; } div#BALLOON span strong { display:block; width:auto; height:auto; margin:0 0 0.2em 0; padding:0 0 0 0; color:rgba(0,0,0,0.8); font-size:inherit; } /* ---------- JSS ---------- */ div#JSS { position:relative; display:inline; width:auto; height:auto; margin:0 auto; padding:0; text-align:left; } div#JSS div.OBJ { position:relative; display:inline; width:auto; height:auto; margin:0 auto; padding:0; } div.OBJ div { display:inline-block; width:calc(100% - 30px); max-width:600px; height:auto; margin:0 25px 50px 25px; padding:0 0; text-align:center; vertical-align:top; } div.OBJ div h2 { margin-top:10px; text-align:left; } div.OBJ div p { margin:0px auto 100px auto; } div.OBJ div.IMG { display:inline-block; width:calc(100% - 30px); max-width:300px; height:auto; margin:0 0 100px 0; padding:0 0; text-align:left; vertical-align:top; } div.OBJ div.IMG span.GIMG { width:100%; max-width:100%; margin:10px 0 0 0; } div.OBJ div.IMG small { display:inline-block; width:100%; height:auto; margin:0 0 0 0; padding:5px 0 0 0; text-align:left; vertical-align:top; color:#444; font-size:14px; font-weight:normal; line-height:16px; letter-spacing:0.5px; } /* ---------- FORMAT ---------- */ div h1 { clear:both; display:block; width:calc(100% - 30px); max-width:960px; height:auto; overflow:visible; margin:50px auto 100px auto; padding:0 0 0 0; color:#000; font-size:75px; line-height:1.1; font-family:"Times New Roman",Times,Century,Georgia,serif; letter-spacing:0px; font-weight:normal; text-align:left; text-shadow:1px 1px 3px rgba(16,0,0,0.5); -webkit-text-size-adjust:100%; } div h1 a:link { color:#000; text-shadow:1px 1px 3px rgba(16,0,0,0.5); } div h1 a:visited { color:#000; text-shadow:1px 1px 3px rgba(16,0,0,0.5); } div h1 a:hover { color:#000; text-shadow:5px -1px 5px rgba(16,0,0,0.5); } div h1 a:active { color:#000; text-shadow:5px -1px 5px rgba(16,0,0,0.5); } div h2 { clear:both; display:block; width:calc(100% - 30px); max-width:600px; height:auto; margin:150px auto 100px auto; padding:0 0 0 0; font-size:20px; line-height:1.25; letter-spacing:2px; font-weight:normal; text-align:center; } div h3 { clear:both; display:block; width:calc(100% - 30px); max-width:600px; height:auto; margin:0 auto 15px auto; padding:0 0 0 0; font-size:18px; line-height:1.2; letter-spacing:0.1em; font-weight:bold; text-align:left; } div hr { clear:both; display:block; width:100%; height:1px; margin:3.5em auto 1.5em auto; padding:0 0 0 0; border:none; border-top:thin solid #ddd; background:transparent; color:#fff; line-height:normal; } div p { clear:both; display:block; width:calc(100% - 30px); max-width:960px; height:auto; margin:10px auto 0 auto; padding:0 0 0 0; font-size:100%; line-height:2.0; text-align:left; } div p strong { display:inline; font-weight:600; vertical-align: baseline; } div p b { display:inline; font-weight:600; vertical-align: baseline; } div p a { font-size:inherit; font-family:sans-serif; letter-spacing:0.5px; vertical-align:baseline; } div p a:link { } div p a:visited { } div p a:hover { text-decoration:underline; } div p a:active { } div p img { clear:both; display:inline-block; float:left; margin:0 1.0em 1.0em 0; padding:0; background:#fff; } div p small { display:block; width:auto; margin:1.0em 0 1.0em 0; font-size:80%; line-height:135%; } div p small img { display:inline-block; float:left; margin:0 1.5em 1.0em 0; } div p small strong { display:block; width:auto; margin:0 0 1.0em 0; font-weight:600; } div span.LEAD { display:block; width:calc(100% - 30px); max-width:100%; height:auto; margin:50px auto 50px auto; padding:0 0 0 0; color:#000; font-family:serif; font-size:25px; line-height:1.2; letter-spacing:5px; text-align:center; -webkit-text-size-adjust:100%; } div.OBJ div span.LEAD { width:100%; margin-top:0; } div#PAGE.EN div span.LEAD { letter-spacing:2px; } div span.TIME { display:block; width:calc(100% - 30px); max-width:960px; height:auto; margin:-80px auto 100px auto; padding:0 0 0 0; color:#777; font-size:14px; line-height:1.5; letter-spacing:1px; text-align:left; } /* NOTE */ div p span.NOTE { display:block; clear:both; width:auto; height:auto; margin:15px 0 0 0; padding:15px 0 0 0; color:#444; border-top:thin solid #eee; font-size:75%; line-height:1.65; } div p span.NOTE a { padding:0 0.5em 0 0.1em; font-size:95%; } /* DL DT DD */ dl { clear:both; display:block; width:calc(100% - 30px); max-width:800px; margin:50px auto 0 auto; padding:0 0; color:#000; font-size:16px; line-height:25px; } dl small { color:#777; font-size:inherit; } dl dt { display:inline-block; width:75px; height:auto; margin:0; padding:10px 0 0 0; font-size:15px; font-weight:bold; text-align:left; letter-spacing:0.5px; vertical-align:top; } dl dd { display:inline-block; width:calc(100% - 100px); height:auto; margin:0 0 0 25px; padding:10px 0; font-size:16px; font-weight:normal; letter-spacing:1px; text-align:left; vertical-align:top; } dl dd em { font-style:normal; font-weight:bold; } dl dd a { display:inline; vertical-align:baseline; letter-spacing:0.5px; } dl span.GIMG { margin:0 0 0 0; } dl strong { display:inline-block; width:100%; height:auto; margin:0; padding:0 0 0.5em 0; font-weight:bold; } dl dd dl { margin:0 0 0 0; padding:5px 0 0 0; border:none; line-height:1.25; color:#777; } dl dd dl dt { display:inline-block; width:auto; padding:0; font-size:13px; vertical-align:middle; } dl dd dl dd { display:inline; width:auto; margin:0 0 0 1em; padding:0; font-size:14px; vertical-align:middle; } dl dd dl dd::after { content:"\A"; white-space:pre; } /* -- GoogleMap -- */ div#GoogleMap { background:#fff; width:auto; height:66%; margin:0 0 0 100px; } div#GoogleMap * { overflow:visible; } div#GoogleMap p.map_comment { width:auto; max-width:unset; min-width:23.0em; margin:0 0 0 0; font-size:13px; letter-spacing:0.05em; } /* ------------------------------- IMAGE ------------------------------- */ div.IMAGES { position:relative; top:0; right:0; clear:both; display:inline; width:100%; height:auto; overflow:visible; margin:0 0 0 0; padding:0 0 0 0; background:#000; text-align:center; } div.IMAGES img { position:relative; clear:none; display:block; margin:0px 1px 1px 0px; background:transparent; } div.IMAGES div { position:relative; top:0; clear:none; display:block; width:100%; height:100%; overflow:visible; margin:0 1px 1px 0; } div.IMAGES div span { position:relative; clear:both; display:block; width:100%; height:100%; overflow:hidden; min-height:480px; margin:0 0 0 0; padding:0 0 0 0; background:no-repeat 50% 50%; background-size:contain; } div.IMAGES div span img { top:0px; clear:both; display:block; width:100%; height:auto; margin:0 1px 1px 0; } div.IMAGES div img { clear:none; display:block; float:none; height:auto; margin:0 auto; } div.IMAGES div span.COMP img { width:auto; height:auto; max-height:100%; margin:0 auto; box-shadow:4px 4px 12px rgba(24,8,16,0.05), 0px 0px 3px rgba(24,8,16,0.1); } div.IMAGES div span.FIT img { box-shadow:4px 4px 12px rgba(24,8,16,0.05), 0px 0px 3px rgba(24,8,16,0.1); } /* TXT | LINK TO PROJECT */ div.IMAGES div div.TXT { position:absolute; z-index:2; top:auto; right:0; bottom:0; clear:both; display:block; width:auto; height:auto; margin:0 0 0 0; } div.IMAGES div div.TXT strong { display:block; width:auto; margin:0 30px 5px 0; padding:0 0 10px 0; color:#fff; font-size:15px; font-weight:bold; letter-spacing:0.2em; } div.IMAGES div div.TXT a { display:block; width:auto; height:auto; margin:0 0 0 0; padding:15px; border-radius:5px 0 0 0; color:#fff; line-height:1; text-align:left; } div.IMAGES div div.TXT a:link { background:rgba(0,0,0,0.3); } div.IMAGES div div.TXT a:visited { background:rgba(0,0,0,0.3); } div.IMAGES div div.TXT a:hover { background:rgba(0,0,0,0.8); } div.IMAGES div div.TXT a:active { background:rgba(0,0,0,0.8); } div.IMAGES div div.TXT a span { position:static; display:inline-block; width:auto; height:auto; min-height:0; margin:0 0 3px 0; padding:0 0 0 15px; font-size:13px; line-height:1.2; font-weight:bold; } div.IMAGES div div.TXT a span strong { display:inline-block; width:auto; height:auto; margin:0 0 3px 10px; padding:0 0 0 10px; font-size:13px; line-height:1.2; font-weight:normal; letter-spacing:1px; border-left:1px solid #fff; } div.IMAGES div div.TXT a::after { content:""; position:static; display:inline-block; width:20px; height:20px; margin:0 5px 0 5px; background:transparent url(/com/img/symbol.svg) no-repeat 50% 20%; background-size:auto 420px; filter:brightness(0) invert(1); } div.IMAGES div div.TXT div { clear:both; display:inline-block; width:96%; max-width:640px; height:auto; margin:0 auto; padding:1.5em 0 3.0em 0; } div.IMAGES div div.TXT div h2 { position:absolute; clear:none; display:block; width:30%; height:auto; margin:0 0 0 0; padding:0 0 1.0em 0; letter-spacing:0.1em; font-weight:bold; font-size:100%; line-height:135%; text-align:left; } div.IMAGES div div.TXT div p { clear:none; display:inline-block; width:55%; height:auto; min-height:100px; margin:0 0 0 0; padding:0 0 0 0; border-left:thin groove rgba(0,0,0,0.6); letter-spacing:0.1em; font-size:85%; line-height:200%; text-align:left; } /* CONS */ div.IMAGES div.CONS { position:absolute; top:0; right:5px; z-index:12; display:none; width:auto; min-width:0; height:auto; min-height:0; overflow:visible; margin:0 auto 0 auto; padding:0 0 0 10px; text-align:center; line-height:1; background:transparent; } div.IMAGES div.CONS ol { clear:both; display:inline-block; width:auto; height:auto; margin:0 auto 10px auto; padding:0; line-height:1; } div.IMAGES div.CONS ol li { clear:none; display:inline-block; width:auto; height:auto; margin:0 1px 0 0; padding:0; } div.IMAGES div.CONS a { clear:none; display:inline-block; width:20px; height:20px; overflow:hidden; margin:0; padding:0; background:transparent url(/com/img/symbol_images.svg) no-repeat 50% 40%; background-size:100% auto; border:none; cursor:pointer; color:#fff; text-align:left; text-indent:-9999px; font-weight:300; font-size:65%; } div.IMAGES div.CONS a { transition:none; } /* NEXTIMAGE */ div.IMAGES a.NEXTIMAGE { position:absolute; top:0; right:0; z-index:25; clear:none; display:block; width:75px; height:100%; overflow:hidden; margin:0 0 0 auto; padding:0 0 0 0; background:transparent; background-color:rgba(0,0,0,0.02); cursor:pointer; text-align:left; color:#fff; text-indent:-9999px; font-size:9px; letter-spacing:0.1em; } div.IMAGES a.NEXTIMAGE::before { content:""; display:block; position:absolute; top:50%; width:50px; height:50px; margin:-25px 0 0 15px; background:transparent url(/com/img/symbol_images.svg) no-repeat 50% 0%; background-size:100% auto; } div.IMAGES a.NEXTIMAGE:link { color:#fff; background-color:rgba(0,0,0,0.0); } div.IMAGES a.NEXTIMAGE:visited { color:#fff; background-color:rgba(0,0,0,0.0); } div.IMAGES a.NEXTIMAGE:hover { color:#fff; background-color:rgba(0,0,0,0.3); } div.IMAGES a.NEXTIMAGE:active { color:#fff; background-color:rgba(255,255,255,0.8); } div.IMAGES a.PREVIMAGE { position:absolute; top:0; left:0; z-index:25; clear:none; display:none; width:75px; height:100%; overflow:hidden; margin:0 0 0 auto; padding:0 0 0 0; background:transparent; background-color:rgba(0,0,0,0.0); cursor:pointer; text-align:left; color:#fff; text-indent:-9999px; font-size:9px; letter-spacing:0.1em; } div.IMAGES a.PREVIMAGE::before { content:""; display:block; position:absolute; top:50%; width:50px; height:50px; margin:-25px 0 0 15px; background:transparent url(/com/img/symbol_images.svg) no-repeat 50% 20%; background-size:100% auto; } /* -- overwrite IMAGE in div.SECTION -- */ div.OBJ div.IMAGES { position:relative; display:block; width:auto; max-width:800px; height:auto; overflow:visible; margin:0 auto 50px auto; padding:0 0 0 0; background:#fff; } div.OBJ div.IMAGES span { position:relative; clear:both; display:block; width:100%; height:100%; overflow:hidden; min-height:100%; margin:0 0 0 0; padding:0 0 0 0; background:no-repeat 50% 50%; background-size:contain; } div.OBJ div.IMAGES div { width:100%; max-width:unset; height:100%; margin:0 0 0 0; } div.OBJ div.IMAGES div.CONS { display:block; bottom:-30px; width:100%; height:auto; padding:0; text-align:center; } div.OBJ div.IMAGES div.CONS ol { display:block; } div.OBJ div.IMAGES div.CONS ol li { } div.OBJ div.IMAGES div.CONS ol li a { } div.OBJ div.IMAGES a.NEXTIMAGE { } /* ---------- IMAGES.FULLSCREEN ---------- */ div.IMAGES a.FULLSCREEN { position:absolute; top:0px; left:0px; z-index:11; display:none; width:100%; height:100%; background:transparent; background-size:100% auto; } div.IMAGES a.FULLSCREEN::before { content:""; display:block; position:absolute; top:50%; width:50px; height:50px; margin:-25px auto 0 auto; background:transparent url(/com/img/symbol_images.svg) no-repeat 50% 90%; background-size:100% auto; } div.OBJ div.IMAGES a.FULLSCREEN { display:none; cursor:pointer; } div#FULLSCREEN_BG { position:fixed; top:0px; left:0px; z-index:100; display:none; width:100%; height:100%; background:rgb(253,252,251); cursor:pointer; } div#FULLSCREEN_BG span { z-index:102; display:block; float:left; width:auto; height:auto; padding:25px; margin:0 0 5.0em 0px; text-align:left; color:rgba(170,170,170,1.0); text-shadow:0 0 0.1em rgba(80,64,72,0.2); font-size:115%; font-weight:200; line-height:1.1em; letter-spacing:0.05em; font-family:Helvetica, Arial, sans-serif; background:transparent; } div#FULLSCREEN_BG span.ja { font-size:105%; line-height:125%; } div#FULLSCREEN_BG h1 { clear:none; display:block; width:590px; height:auto; overflow:hidden; margin:-0.1em 0 15px auto; padding:25px; color:#000; text-align:left; font-size:inherit; font-weight:200; line-height:inherit; letter-spacing:0.05em; } /* ------------------------------- GIMG ------------------------------- */ span.GIMG { position:relative; clear:both; display:inline-block; width:100%; max-width:100%; margin:0 0 15px 0; padding:65% 0 0 0; overflow:hidden; border:none; background:transparent; vertical-align:top; } span.GIMG HF {} span.GIMG span { position:absolute; top:0; left:0; width:100%; height:100%; margin:0 0; padding:0; overflow:visible; border:none; background:50% 50% no-repeat scroll; background-size:contain; text-align:center; } span.GIMG span { transition:0.3s all; } span.GIMG span.FIT { width:100%; margin:0; } span.GIMG span img { position:relative; display:block; width:auto; height:100%; margin:0; padding:0; overflow:visible; transition:margin 0.8s ease-in-out 0s; } div.OBJ p span.GIMG { margin:0 15px 0.5em 0; background-color:#fff; border:none; text-align:center; } div.OBJ p span.GIMG span { max-width:unset; } div.OBJ p span.GIMG img { display:block; float:none; margin:0 auto; } span.NOIMG { position:relative; clear:both; display:block; width:100%; max-width:100%; margin:0 0 15px 0; padding:100% 0 0 0; background:url(/com/img/noimg.png) 50% 50% no-repeat; background-size:cover; vertical-align:top; } /* ---------- HEADER IMAGE ---------- */ div.OBJ span.GIMG.WIDE { position:relative; width:100%; max-width:unset; height:25vw; max-height:350px; margin:300px 0 0 0; padding:0% 0 0 0; background:#ddd 50% 100% no-repeat; background-size:cover; text-align:center; } div.OBJ span.GIMG.WIDE::before { content:""; position:static; display:inline-block; width:1px; height:calc(100%); margin:300px -1px 0 0; vertical-align:middle; } /* -- LOOK -- */ span.LOOK { cursor:zoom-in; } div#LOOK { position:fixed; z-index:200; top:0; left:0; display:block; width:100%; height:100%; overflow:hidden; background:rgba(0,8,2,1.8); cursor:zoom-out; } div#LOOK div { position:relative; top:0; left:0; display:inline-block; width:100%; height:auto; text-align:left; vertical-align:middle; } div#LOOK div div.LOOKIMG { position:relative; display:inline-block; width:100vw; height:100vh; text-align:center; } div#LOOK div div.LOOKIMG { transition:0.3s all; } div#LOOK div div.LOOKIMG::before { content:""; display:inline-block; width:1px; height:100%; margin:0 0 0 -1px; vertical-align:middle; } div#LOOK div div.LOOKIMG img { position:relative; width:auto; max-width:calc(100% - 40px); height:auto; max-height:calc(100vh - 40px); margin:0 auto; } /* -- LINK -- */ a.LINK { display:inline-block; width:auto; min-width:20%; margin:2.5em auto; padding:0.8em 3.0em 0.8em 2.0em; border-radius:5px; text-align:center; color:#fff; font-family:sans-serif; font-size:15px; font-weight:bold; letter-spacing:0.5px; } a.LINK:link { color:#fff; background:#444; border:thin solid #444; } a.LINK:visited { color:#fff; background:#444; border:thin solid #444; } a.LINK:hover { color:#fff; background:#000; border:thin solid #000; } a.LINK:active { color:#fff; background:#000; border:thin solid #000; } a.LINK::after { position:absolute; content: ""; top:35%; left:auto; right:1.5em; vertical-align: middle; width:0.5em; height:0.5em; background:transparent; border:0 solid #b12; border-top-width:0.2em; border-right-width:0.2em; transform:rotate(45deg); } /* -webkit-transform: rotate(45deg);*/ a.LINK::after { border-color:#fff; } a.LINK small { display:inline-block; padding:0 0 0 1.0em; vertical-align:middle; } /* -- LINK GoogleMap -- */ a.LINK_GoogleMap { display:inline-block; width:auto; height:auto; padding:3px 10px 3px 10px; border-radius:15px; font-size:11px; line-height:16px; letter-spacing:0; text-align:left; vertical-align:middle; } a.LINK_GoogleMap:link { color:#000; background:#fff; } a.LINK_GoogleMap:visited { color:#000; background:#fff; } a.LINK_GoogleMap:hover { color:#fff; background:#000; text-decoration:none; } a.LINK_GoogleMap:active { color:#fff; background:#000; } a.LINK_GoogleMap::before { content:""; display:inline-block; width:14px; height:14px; margin:0 3px 0 0; padding:0; background:transparent url(/com/img/symbol.svg) no-repeat 50% 75%; background-size:auto 294px; vertical-align:middle; filter:brightness(1) invert(0.4); } a.LINK_GoogleMap:hover::before { filter:brightness(100%) invert(100%); } /* -- PDF -- */ a.PDF { clear:both; display:block; width:calc(100% - 30px); max-width:960px; height:auto; margin:25px auto 50px auto; padding:1.5em 1.0em; font-size:14px; line-height:1.5; font-weight:bold; border:1px solid rgba(0,0,0,0.1); border-radius:5px; text-align:left; } a.PDF:link { color:#000; background:#fff; } a.PDF:visited { color:#000; background:#fff; } a.PDF:hover { color:#fff; background:#a00; } a.PDF:active { color:#fff; background:#a00; } a.PDF em { display:inline-block; width:auto; height:14px; overflow:visible; margin:0 0 0 0; padding:0 10px 0 0px; color:#a00; font-size:9px; line-height:21px; font-weight:bold; font-style:normal; letter-spacing:0; vertical-align:baseline; } a.PDF:hover em { color:#fff; } a.PDF em::before { content:""; display:inline-block; width:16px; height:16px; margin:0 5px -2px 0; background:transparent url(/com/img/pdf.png) 50% 50% no-repeat; background-size:16px auto; } a.PDF small { display:inline; vertical-align:baseline; } /* -- MOVIE (for YouTUbe tag) -- */ div.OBJ div.CODE { position:relative; clear:both; display:block; width:100%; max-width:calc(100% - 30px); height:auto; margin:0 auto 25px auto; padding:0 0 0 0; text-align:center; } div.OBJ div.CODE div { max-width:unset; margin:auto; overflow:visibile; } div.OBJ div.CODE p { clear:both; display:block; margin:5px 0 0 0; padding:0 0 0 0; font: normal normal normal 12px/15px "メイリオ","Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","Meiryo",Verdana,Geneva,Arial,"ＭＳ ゴシック",sans-serif; } div.OBJ div.CODE iframe { max-width:100%; margin:0 auto; } div.OBJ div.CODE object { margin:0 auto; } div.OBJ div.CODE param { margin:0 auto; } div.OBJ div.CODE embed { margin:0 auto; } /* -- PAGENAVI -- */ ol.PAGENAVI { clear:both; display:block; height:auto; margin:50px auto 50px auto; padding:0 0 0 0; font-size:13px; line-height:20px; text-align:center; letter-spacing:0; } ol.PAGENAVI li { display:inline-block; width:auto; height:auto; margin:0 15px; padding:0; background:transparent 50% 50% no-repeat; } ol.PAGENAVI li span { clear:both; display:inline-block; width:30px; height:30px; margin:0; padding:5px 5px; color:#fff; font-weight:bold; border-radius:50%; background:#000;} ol.PAGENAVI li a { clear:both; display:inline-block; width:30px; height:30px; margin:0; padding:5px 5px; color:#fff; font-weight:bold; border-radius:50%; } ol.PAGENAVI li a:link { background:#aaa; } ol.PAGENAVI li a:visited { background:#aaa; } ol.PAGENAVI li a:hover { background:#444; } ol.PAGENAVI li a:active { background:#444; } ol.PAGENAVI li.PREV { margin-left:0; } ol.PAGENAVI li.PREV span { width:30px; height:30px; text-indent:0; background:transparent url(/com/img/symbol.svg) 50% 25% no-repeat; background-size:auto 630px; text-indent:-9999em; opacity:0.1; } ol.PAGENAVI li.PREV a { width:30px; height:30px; text-indent:0; background:transparent url(/com/img/symbol.svg) 50% 25% no-repeat; background-size:auto 630px; text-indent:-9999em; opacity:0.8; } ol.PAGENAVI li.PREV a:hover { opacity:1.0; } ol.PAGENAVI li.NEXT { margin-right:0; } ol.PAGENAVI li.NEXT span { width:30px; height:30px; text-indent:0; background:transparent url(/com/img/symbol.svg) 50% 20% no-repeat; background-size:auto 630px; text-indent:-9999em; opacity:0.1; } ol.PAGENAVI li.NEXT a { width:30px; height:30px; text-indent:0; background:transparent url(/com/img/symbol.svg) 50% 20% no-repeat; background-size:auto 630px; text-indent:-9999em; opacity:0.8; } ol.PAGENAVI li.NEXT a:hover { opacity:1.0; } ol.PAGENAVI li.P span { border:none; background:#000; color:#fff; } ol.PAGENAVI li.P a { } ol.PAGENAVI li.DOT { margin-left:0; margin-right:0; } ol.PAGENAVI li.DOT span { width:auto; background:transparent; color:#aaa; } ol.PAGENAVI li.PAGENO { width:100px; float:right; margin:0px 25px 0px 0px; text-align:right; font-size:80%; letter-spacing:0.5px; } ol.PAGENAVI li.PAGENO strong { font-size:18px; font-weight:200;} /* ------------------------------ PRINT @media print{ ------------------------------ */ @media print{ html { overflow:visible !important; } body { width:auto; height:auto; overflow:visible !important; background:transparent; text-align:justify; background-color:transparent !important; min-width:auto; } body * { border:none !important; color:#000 !important; background-color:transparent !important; visibility:visible !important; text-shadow:none !important; box-shadow:none !important; } body div#PAGE { position:static; width:802px; min-width:0px; } body div#BODY { position:static; top:auto; left:auto; clear:none; display:block; float:none; width:100%; margin:0px; } body div#HEADER { display:none !important; background:transparent; } body div#CAT { display:none !important; } body div#FOOTER { position:static; bottom:auto; left:auto; clear:both; display:inline; float:none; width:100%; } body div#FOOTER ul { display:none !important; } body div#SIDE { display:none !important; } body a#NEXT { display:none !important; } body div#BALLOON { display:none !important; } body div#TOP_BALLOON { display:none !important; } body div#BG { display:none !important; } body div#PAGETOP { display:none !important; } body a#NAVI { display:none !important; } body a.PDF { display:none !important; } body div#JSS { position:static !important; display:inline !important; float:none !important; width:auto; height:auto; } body div#JSS div.OBJ { position:static !important; clear:both; display:inline !important; float:none !important; width:auto; height:auto; background:transparent; filter:none !important; opacity:1 !important; } body div.OBJ big { display:none !important; } body div hr { position:static; display:block; float:none; width:auto; max-width:100%; margin:1.0em 0 1.0em 0; border:none !important; border-top:thin solid #aaa !important; } body div h1 { position:static; display:block; float:none; width:auto; max-width:94%; margin-left:3%; margin-right:3%; margin-top:0px; padding-top:20px; } body div h2 { position:static; display:block; float:none; width:auto; max-width:94%; margin-left:3%; margin-right:3%; } body div h3 { position:static; display:block; float:none; width:auto; max-width:94%; margin-left:3%; margin-right:3%; } body div p { position:static; display:block; float:none; width:auto; max-width:94%; margin-left:3%; margin-right:3%; } body div p img { clear:both; display:block; float:left; margin:0 1.0em 1.5em 0; padding:0; background:transparent; } body div span.DATA { position:static; display:block; float:none; width:auto; max-width:94%; margin-left:3%; margin-right:3%; } body div span.TIME { position:static; display:block; float:none; width:auto; max-width:94%; margin-left:3%; margin-right:3%; } body dl { position:static; display:block; float:none; width:auto; max-width:94%; margin-left:3%; margin-right:3%; } body div#FOOTER span#COPYRIGHT { clear:both; position:static !important; display:block; float:none; width:auto; max-width:94%; margin-left:3%; margin-right:3%; margin-top:2.0em; text-align:left; } /* -- JSS FACTORS -- */ body div.JSS_BOX { display:none !important; } body div.JSS_BAR { display:none !important; } /* UP & DN */ body a.JSS_UP { display:none !important; } body a.JSS_DN { display:none !important; } body div.JSS_PAGETOP { display:none !important; } /* -- IMAGE -- */ body div.IMAGES { clear:both; position:static; display:inline-block; width:auto; height:auto; max-width:94%; margin-left:3%; margin-right:3%; } body div.IMAGES img { position:static !important; clear:none; display:block !important; float:left; margin:0 1px 1px 0; width:auto !important; height:300px !important; filter:none !important; opacity:1 !important; } body div.IMAGES div { position:static !important; clear:none; display:block !important; float:left; margin:0 1px 1px 0; width:480px !important; min-width:480px; height:360px; filter:none !important; opacity:1 !important; } body div.IMAGES div img { float:none; margin:0 auto; } body div.IMAGES div.CONS { display:none !important; } body div.IMAGES a.NEXTIMAGE { display:none !important; } body div#JSS div.OBJ div.IMAGES { clear:both; position:static; display:inline; float:left; width:auto; max-width:94%; height:auto; margin-left:3%; margin-right:3%; } body div#JSS div.OBJ div.IMAGES div { width:auto; height:100%; min-width:480px; height:360px; margin:0 1px 1px 0; } }