Skip to content

sora / sanitary-net

Go to a project
Commit a61921d1 by o.kimura
Options

ジェイティップスソース取り込み・メニュー制御・リンク付加

parent 074d9991
Inline Side-by-side
Showing with 13587 additions and 787 deletions
utsukushitoilet/cn_s/css/style.css
...@@ -158,3 +158,169 @@ ...@@ -158,3 +158,169 @@
} }
} }
/* 2020.2.19 update */
.showcase {
position: relative;
height: 640px;
background: url(/utsukushitoilet/images/main_visual0.jpg) no-repeat top center;
background-size: cover;
}
.inner-showcase {
position: relative;
height: 100%;
}
.inner-showcase .menu_box {
position: absolute;
left: 0;
right: 0;
bottom: -2.5em;
margin: auto;
}
.inner-showcase .menu_box .header_nav,
.inner-showcase .menu_box .latest {
box-shadow: 0 0 1.5em 0 rgba(0,0,0,.3);
}
.inner-showcase .menu_box .manage a {
color: #e9573e;
}
.inner-showcase .menu_box .manage a::before {
background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%205%2010%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20fill%3D%22%23e9573e%22%20d%3D%22M5.000%2C5.000%20L-0.000%2C-0.000%20L-0.000%2C10.000%20L5.000%2C5.000%20Z%22%2F%3E%3C%2Fsvg%3E');
}
.inner-showcase .header_nav li:first-child {
padding: .2em 0;
background-color: #e9573e;
border: none;
border-bottom: solid 1px #ccc;
}
.inner-showcase .header_nav li {
border-color: #ccc;
}
.showcase_phrase {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.showcase_phrase img {
display: block;
width: 100%;
}
#situation {
padding-top: 0;
margin-top: 8em;
background: none;
}
@media screen and (max-width:640px){
.showcase {
height: 100vw;
}
.showcase_phrase {
width: 90%;
margin: auto;
}
#situation {
margin-top: 20vw;
}
}
#owner > div {
max-width: 980px;
width: 100%;
margin: 0 auto;
text-align: center;
}
#owner h2 {
margin-bottom: 30px;
font-size: 30px;
font-weight: bold;
display: inline-block;
border-bottom: solid 1px #e8392d;
line-height: 1.2em;
}
.owner_menu {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 3em;
}
.owner_menu li {
display: block;
width: 23.8%;
margin: 0 1em;
position: relative;
line-height: 1.4;
}
.owner_menu li a {
display: block;
padding: 8px;
border: solid 2px #f5b5aa;
text-align: center;
font-weight: bold;
color: #e9573e;
}
.owner_menu li p {
margin-top: 1em;
text-align: left;
}
.inner-showcase .menu_box .latest b {
display: block;
padding: .2em 0;
background-color: #e9573e;
border: none;
border-bottom: solid 1px #ccc;
text-align: center;
font-size: 14px;
color: #fff;
}
.header_flxpc .latest a {
padding: 2.532em 4em 2.532em 6em;
}
.inner-showcase .menu_box .manage a {
padding: 0 0 0 .71em;
background-color: #e9573e;
color: #fff;
}
.inner-showcase .menu_box .manage a::before {
content: none;
}
.inner-showcase .menu_box .manage a::after {
content: "";
display: inline-block;
width: .6em;
height: .6em;
margin-left: .2em;
margin-right: .5em;
background: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%205%2010%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20fill%3D%22%23fff%22%20d%3D%22M5.000%2C5.000%20L-0.000%2C-0.000%20L-0.000%2C10.000%20L5.000%2C5.000%20Z%22%2F%3E%3C%2Fsvg%3E') no-repeat center;
background-size: contain;
}
br.sp{
display: none;
}
@media screen and (max-width:640px){
.inner-showcase .menu_box .latest b {
font-size: 2.5vw;
}
.header_flxpc .latest a {
padding: 1em 0 1em 3.5em;
}
.owner_menu li {
display: block;
width: 100%;
margin: 0 1em;
position: relative;
line-height: 1.4;
}
br.sp{
display: block;
}
}
utsukushitoilet/cn_s/howtouse/css/style.css 0 → 100644
@charset "UTF-8";
h2.line {
border-top: solid 1px #ccc;
border-bottom: solid 1px #ccc;
font-size: 24px;
font-weight: bold;
padding: 36px 0;
position: relative;
margin-top: 60px;
line-height: 1.4;
clear: both;
}
h2.line span {
color: #e9573e;
font-weight: normal;
font-size: 40px;
position: absolute;
left: 0;
right: 0;
top: -32px;
}
h3 {
font-weight: bold;
font-size: 20px;
}
#kind ul {
padding: 50px 0;
}
#kind ul:after {
content: "";
display: block;
clear: both;
}
#kind li {
display: block;
width: 31.3%;
float: left;
text-align: left;
margin-left: 3%;
background-color: #f7f6f2;
}
#kind li:first-child {
margin-left: 0;
}
#kind li h3 {
background-color: #fff;
text-align: center;
padding-bottom: 10px;
}
#kind li img {
width: 100%;
}
#kind li p {
padding: 20px;
margin-bottom: 10px;
}
#kind li div {
border-top: solid 1px #e1e0db;
margin: 0 auto;
width: 92%;
padding-bottom: 10px;
}
#kind li div img {
border: solid 1px #e1e0db;
display: block;
margin-bottom: 10px;
}
#kind li span {
display: block;
text-align: center;
font-weight: bold;
font-size: 14px;
}
#use .left {
text-align: left;
padding: 40px 0;
}
#use h3 {
text-align: left;
padding-bottom: 10px;
}
#use ul {
margin-bottom: 20px;
}
#use li {
display: block;
width: 31.3%;
float: left;
text-align: left;
margin-left: 3%;
margin-bottom: 40px;
}
#use li:first-child {
margin-left: 0;
}
#use li img {
width: 100%;
}
#operation img {
border: solid 1px #ccc;
}
.bisection {
margin-top: 40px;
margin-bottom: 100px;
}
.bisection02 {
margin-top: 40px;
margin-bottom: 40px;
}
.bisection:after {
content: "";
display: block;
clear: both;
}
.bisection p,
.bisection .lft {
float: left;
width: 48%;
text-align: left;
}
.bisection div {
float: right;
width: 50%;
}
.bisection div img {
width: 100%;
max-width: 472px;
border: solid 1px #ccc;
}
/* 0-640px ----*/
@media screen and (max-width:640px){
h2.line {
margin-left: 4%;
margin-right: 4%;
}
#kind li {
float: none;
display: block;
clear: both;
width: 92%;
margin: 1px auto 20px auto;
}
#kind li:first-child {
margin-left: auto;
}
#kind li:after {
content: "";
display: block;
clear: both;
}
#kind li span {
padding: 6px;
font-size: inherit;
}
#kind li strong {
position: absolute;
display: block;
}
#use h3 {
margin: 0 4%;
}
#use li {
float: none;
display: block;
clear: both;
width: 92%;
margin: 1px auto 30px auto;
}
#use li p {
margin: 10px 0;
}
#use li:first-child {
margin-left: auto;
}
#use li h3 {
margin: 0;
}
.bisection {
margin: 0 4%;
}
.bisection p,
.bisection .lft {
float: none;
width: inherit;
padding: 20px 0;
margin-bottom: 0;
}
.bisection div {
float: none;
width: inherit;
margin-bottom: 40px;
}
.bisection div img {
max-width: 578px;
}
}
#use .box{
overflow: hidden;
}
#use .left{
padding: 0;
text-align: left;
}
#use .left02{
text-align: left;
padding: 40px 0;
width: 76%;
float: left;
}
#use .right {
text-align: left;
padding: 40px 0;
margin-top: 40px;
margin-left: auto;
width: 18%;
padding: 10px;
border: 1px solid #e1e0db;
text-align: center;
}
#use .right span{
display: block;
margin-top: 10px;
}
@media screen and (max-width:640px){
#use .left02{
width: 92%;
float: none;
margin: auto;
}
#use .left.01{
width: 100%;
float: none;
}
#use .right{
width: 90%;
margin: auto;
margin-top: 0;
margin-bottom: 40px;
}
}
#kind ul#toilet li {
display: block;
width: 48.4%;
float: left;
text-align: left;
margin-right: 3%;
margin-left: 0;
background-color: #f7f6f2;
}
#kind ul#toilet li:nth-child(2) {
margin-right: 0;
}
#kind ul#toilet li h3 {
background-color: #fff;
text-align: center;
padding-bottom: 10px;
}
#kind ul#toilet li img {
width: 100%;
}
#kind ul#toilet li p {
padding: 20px;
margin-bottom: 10px;
}
#kind ul#toilet li div {
border-top: solid 1px #e1e0db;
margin: 0 auto;
width: 92%;
padding-bottom: 10px;
}
#kind ul#toilet li div img {
border: solid 1px #e1e0db;
display: block;
margin-bottom: 10px;
}
#kind ul#toilet li span {
display: block;
text-align: center;
font-weight: bold;
font-size: 14px;
padding: 10px 0;
}
@media screen and (max-width:640px){
#kind ul#toilet li {
float: none;
display: block;
clear: both;
width: 92%;
margin: 1px auto 20px auto;
}
#kind ul#toilet li:nth-child(2) {
margin-right: auto;
}
#kind ul#toilet li:after {
content: "";
display: block;
clear: both;
}
#kind ul#toilet li span {
padding: 6px;
font-size: inherit;
}
#kind ul#toilet li strong {
position: absolute;
display: block;
}
}
/* 20200109updata */
#use span.point_txt01{
display: block;
padding-left: 1em;
text-indent: -1em;
}
#use .txt_list {
list-style: disc;
margin-bottom: 0;
}
#use .txt_list li {
display: list-item;
width: auto;
margin: 0 0 0 1.2em;
float: none;
}
utsukushitoilet/cn_s/howtouse/index.html 0 → 100644
<!DOCTYPE html>
<html lang="ja" prefix="og: http://ogp.me/ns#">
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta charset="UTF-8">
<meta name="keywords" content="">
<meta name="description" content="">
<title>洗手间用具的使用方法 - NIPPON UTSUKUSHI TOILET</title>
<link rel="stylesheet" href="/utsukushitoilet/shared/css/reset.css" type="text/css" media="all">
<link rel="stylesheet" href="/utsukushitoilet/shared/css/common.css" type="text/css" media="all">
<link rel="stylesheet" href="css/style.css" type="text/css" media="all">
<script type="text/javascript" src="/utsukushitoilet/shared/js/jquery.js"></script>
<script type="text/javascript" src="/utsukushitoilet/shared/js/jquery.plugin.js"></script>
<script type="text/javascript" src="/utsukushitoilet/shared/js/common.js"></script>
<script type="text/javascript" src="../shared/js/common_parts.js"></script>
<script type="text/javascript">
$(document).ready(function(){
if ($(window).width() > 640) {
$("#toilet li").autoHeight();
}
});
</script>
<!-- google analytics -->
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-560401-9']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<!-- //google analytics -->
</head>
<body class="second" id="howtouse">
<script type="text/javascript" >
<!--
includeHead2('div');
//-->
</script>
<noscript>
<p>当サイトはJavaScriptをonにしてご覧ください。</p>
</noscript>
<section id="use" class="first">
<div class="block">
<h1><span>日本洗手间情况</span>洗手间内器具的使用方法</h1>
<p>日本的洗手间里有很多功能。<br>
这里跟各位介绍「马桶的洗净方法」「温水洗净便座的使用方法」「拟音装置」「紧急求助铃」的使用方法。</p>
<h2 class="line"><span>01</span>坐便器的冲水方法</h2>
<div class="box"><div class="left02">
根据马桶设备型态，各有不同的洗净方式。<br>
<ul class="txt_list">
<li>水箱型马桶：旋转储水箱旁的冲水把洗净。</li>
<li>无水箱型马桶：按压冲水把洗净。</li>
<li>其他型态：利用设置在墙壁上的按钮或是非接触型感应器(手遮)来洗净，也有设置在遥控器内的形式。</li>
</ul>
最新型的智能马桶是当使用者结束后站立时自动洗净。
</div>
<p class="right"><img src="/utsukushitoilet/howtouse/images/3609.gif" alt=""><span>这个符号是冲洗马桶的按钮</span></p>
</div>
<h3>冲水手柄等的位置</h3>
<ul>
<li><img src="/utsukushitoilet/howtouse/images/use01_img01.jpg" alt=""><p>旋转冲水把</p></li>
<li><img src="/utsukushitoilet/howtouse/images/use01_img02.jpg" alt=""><p>按压冲水把</p></li>
<li><img src="/utsukushitoilet/howtouse/images/use01_img03.jpg" alt=""><p>按压冲水把</p></li>
</ul><div class="clear"></div>
<ul>
<li><h3>按下按键</h3><img src="/utsukushitoilet/howtouse/images/use01_img04.jpg" alt=""><p>往下按冲水按钮</p></li>
<li><h3>遥控器</h3><img src="/utsukushitoilet/howtouse/images/use01_img06.jpg" alt=""><p>请按压温水洗净便座遥控器里的某个按键</p></li>
<li><h3>冲水感应装置</h3><img src="/utsukushitoilet/howtouse/images/use01_img05.jpg" alt=""><p>手遮感应器</p></li>
</ul><div class="clear"></div>
</div>
<div class="point">
<div>
<h2><img src="/utsukushitoilet/shared/images/point.gif" alt="point!"></h2>
<div class="box"><img src="/utsukushitoilet/howtouse/images/point_img01.png" alt="">
<ul class="txt_list">
<li>为了带给下一位使用者舒适感，请在使用完毕后立即冲水洗净。</li>
<li>日本的厕纸是溶水性的，请擦拭完毕后直接丢入马桶内冲掉。<br>
* 厕所内会随水冲掉的厕纸，只限于厕所卫生纸以及可溶性面纸。<br>
* 生理用品或是其他以外的物品，请丢弃在厕所内设置的垃圾桶。</li>
</ul>
</div><div class="clear"></div>
</div>
</div>
<div class="block">
<h2 class="line"><span>02</span>智能坐便器的使用方法</h2>
<p class="left bisection02">使用智能坐便器的时候，请操作坐便器侧面的按钮。<br />
如果坐便器侧面没有的话，请操作墙壁上的遥感按钮。<br />
按钮所表示的意思，如下所示。</p>
<h3>操作部的位置</h3>
<ul>
<li><img src="/utsukushitoilet/howtouse/images/use02_img01.jpg" alt=""></li>
<li><img src="/utsukushitoilet/howtouse/images/use02_img02.jpg" alt=""></li>
</ul><div class="clear"></div>
<h3>操作部插图的意思</h3>
<ul id="operation">
<li><img src="/utsukushitoilet/howtouse/images/use02_img03.gif" alt=""></li>
<li><img src="/utsukushitoilet/howtouse/images/use02_img04.gif" alt=""></li>
<li><img src="/utsukushitoilet/howtouse/images/use02_img05.gif" alt=""></li>
</ul><div class="clear"></div>
<h2 class="line"><span>03</span>遮音装置</h2>
<div class="bisection">
<div class="lft">
在日本的公共洗手间里，为了掩盖如厕时的排泄声音，设置了发出流水声的『厕所拟音装置』。根据不同型态有下列不同操作。拟音装置的音乐会在一定时间后自动停止。
<ul class="txt_list">
<li>感应型：伸手感应立即发出音乐。</li>
<li>按键型：按下按钮立即发出音乐。</li>
<li>自动型：一进厕所感应有人立即发出音乐。</li>
</ul>
</div>
<div><img src="images/use03_img01.gif" alt=""></div><div class="clear"></div>
</div>
<h2 class="line"><span>04</span>紧急呼叫按钮</h2>
<div class="bisection">
<p>洗净操作按键附近设置了如照片所示的紧急求助铃。如果在洗手间内感觉身体不适的话请按铃，相关人员会即刻赶来。除了紧急情况以外请不要按此铃。</p>
<div><img src="/utsukushitoilet/howtouse/images/use04_img01.jpg" alt=""></div><div class="clear"></div>
</div>
</div>
</section>
<script type="text/javascript" >
<!--
includeFoot();
//-->
</script>
</body>
</html>
\ No newline at end of file
utsukushitoilet/cn_s/index.html
...@@ -47,22 +47,47 @@ $(document).ready(function(){ ...@@ -47,22 +47,47 @@ $(document).ready(function(){
<body id="top"> <body id="top">
<script type="text/javascript" > <script type="text/javascript" >
<!-- <!--
includeHead('h1'); includeHead2('h1');
//--> //-->
</script> </script>
<noscript> <noscript>
<p>当サイトはJavaScriptをonにしてご覧ください。</p> <p>当サイトはJavaScriptをonにしてご覧ください。</p>
</noscript> </noscript>
<div class="showcase">
<div class="inner-showcase">
<div class="showcase_phrase">
<img src="/utsukushitoilet/images/mv_phrase.svg" alt="Welcome to Japan Toilet">
</div>
<div class="menu_box">
<div class="header_flxpc">
<ul class="header_nav">
<li>日本的洗手间情况</li>
<li class="situation"><a href="/utsukushitoilet/cn_s/situation/">有洗手间的地方</a></li>
<li class="sign"><a href="/utsukushitoilet/cn_s/sign/">洗手间指南</a></li>
<li class="type"><a href="/utsukushitoilet/cn_s/type/">洗手间种类和使用方法</a></li>
<li class="howtouse"><a href="/utsukushitoilet/cn_s/howtouse/">洗手间用具的使用方法</a></li>
</ul>
<div class="latest">
<b>洗手间的资讯</b>
<a href="/utsukushitoilet/cn_s/latest/">日本最新的洗手间</a>
</div>
</div>
</div>
</div>
</div>
<section id="situation"> <section id="situation">
<div> <div>
<h2>日本的洗手间情况</h2> <h2>日本的洗手间情况</h2>
<p>在旅行的时候，难免遇到一些尴尬的事情。比如寻找洗手间等。<br /> <p>欢迎光临日本！！<br>
日本的大多数洗手间都十分干净卫生。而且基本可以免费使用，并配备有卫生纸。</p> 在旅行途中上洗手间时会遇到困扰的事吗？<br>
日本的洗手间提供各位免费舒适贴心清洁的卫生空间。<br>
在此网站中，集齐日本洗手间的相关资讯。<br>
希望在日本的旅途中，共同体验日本洗手间的舒适感！</p>
<ul> <ul>
<li><div><img src="../images/situation01.jpg" alt=""><strong>洗手间位置</strong><p>旅游的目的地在很多地方都设有洗手间。洗手间配备有各种设施。</p><span class="button"><a href="situation/">详细情况</a></span></div></li> <li><div><img src="../images/situation01.jpg" alt=""><strong>洗手间位置</strong><p>旅游的目的地在很多地方都设有洗手间。洗手间配备有各种设施。</p><span class="button"><a href="situation/">详细情况</a></span></div></li>
<li><div><img src="../images/situation02.jpg" alt=""><strong>洗手间指南</strong><p>在日本，表示洗手间的语言很多。</p><span class="button"><a href="situation/#guide">详情</a></span></div></li> <li><div><img src="../images/situation02.jpg" alt=""><strong>洗手间指南</strong><p>在日本，表示洗手间的语言很多。</p><span class="button"><a href="sign/">详情</a></span></div></li>
<li><div><img src="../images/situation03.jpg" alt=""><strong>洗手间种类和使用方法</strong><p>日本洗手间主要有和式洗手间，洋式洗手间，多功能洗手间三类。其使用方法也各不相同。</p><span class="button"><a href="type/">详细情况</a></span></div></li> <li><div><img src="../images/situation03.jpg" alt=""><strong>洗手间种类和使用方法</strong><p>日本洗手间主要有和式洗手间，洋式洗手间，多功能洗手间三类。其使用方法也各不相同。</p><span class="button"><a href="type/">详细情况</a></span></div></li>
<li><div><img src="../images/situation04.jpg" alt=""><strong>洗手间用具的使用方法</strong><p>根据坐便器设备的不同，冲水的方法也各异。比如有上完厕所站起来就自动冲洗的坐便器。</p><span class="button"><a href="type/#use">详细情况</a></span></div></li> <li><div><img src="../images/situation04.jpg" alt=""><strong>洗手间用具的使用方法</strong><p>根据坐便器设备的不同，冲水的方法也各异。比如有上完厕所站起来就自动冲洗的坐便器。</p><span class="button"><a href="howtouse/">详细情况</a></span></div></li>
</ul><div class="clear"></div> </ul><div class="clear"></div>
</div> </div>
</section> </section>
......
utsukushitoilet/cn_s/latest/02.html
<!DOCTYPE html> <!DOCTYPE html>
<html lang="ja" prefix="og: http://ogp.me/ns#"> <html lang="ja" prefix="og: http://ogp.me/ns#">
<head> <head>
<meta http-equiv="refresh" content="0;URL=/utsukushitoilet/cn_s/latest/">
<meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="keywords" content=""> <meta name="keywords" content="">
......
utsukushitoilet/cn_s/latest/css/style.css
...@@ -422,3 +422,11 @@ p, .second .block > p { ...@@ -422,3 +422,11 @@ p, .second .block > p {
} }
#_01,
#_02,
#_03,
#_04 {
padding-top: 5px;
margin-top: -5px;
}
utsukushitoilet/cn_s/latest/images/latest01_graph01.gif
utsukushitoilet/cn_s/latest/images/latest01_graph01.gif

12.6 KB | W: | H:

utsukushitoilet/cn_s/latest/images/latest01_graph01.gif

11.7 KB | W: | H:

utsukushitoilet/cn_s/latest/images/latest01_graph01.gif
utsukushitoilet/cn_s/latest/images/latest01_graph01.gif
utsukushitoilet/cn_s/latest/images/latest01_graph01.gif
utsukushitoilet/cn_s/latest/images/latest01_graph01.gif
  • 2-up
  • Swipe
  • Onion skin
utsukushitoilet/cn_s/latest/index.html
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="keywords" content=""> <meta name="keywords" content="">
<meta name="description" content=""> <meta name="description" content="">
<title>01.智能坐便器：日本最新的洗手间 - NIPPON UTSUKUSHI TOILET</title> <title>日本最新的洗手间 - NIPPON UTSUKUSHI TOILET</title>
<link rel="stylesheet" href="/utsukushitoilet/shared/css/reset.css" type="text/css" media="all"> <link rel="stylesheet" href="/utsukushitoilet/shared/css/reset.css" type="text/css" media="all">
<link rel="stylesheet" href="/utsukushitoilet/shared/css/common.css" type="text/css" media="all"> <link rel="stylesheet" href="/utsukushitoilet/shared/css/common.css" type="text/css" media="all">
<link rel="stylesheet" href="css/style.css" type="text/css" media="all"> <link rel="stylesheet" href="css/style.css" type="text/css" media="all">
...@@ -34,7 +34,7 @@ $(document).ready(function(){ ...@@ -34,7 +34,7 @@ $(document).ready(function(){
<body class="second"> <body class="second">
<script type="text/javascript" > <script type="text/javascript" >
<!-- <!--
includeHead('div'); includeHead2('div');
//--> //-->
</script> </script>
<noscript> <noscript>
...@@ -47,9 +47,9 @@ includeHead('div'); ...@@ -47,9 +47,9 @@ includeHead('div');
追求安心・安全・舒适的同时，不断创新中。</p> 追求安心・安全・舒适的同时，不断创新中。</p>
<ul> <ul>
<li><span>01</span><a href="./#_01">智能坐便器</a></li> <li><span>01</span><a href="./#_01">智能坐便器</a></li>
<li><span>02</span><a href="02.html#_02">超级节水智能坐便器</a></li> <li><span>02</span><a href="./#_02">超级节水智能坐便器</a></li>
<li><span>03</span><a href="02.html#_03">节水装置</a></li> <li><span>03</span><a href="./#_03">节水装置</a></li>
<li><span>04</span><a href="02.html#_04">放置婴幼儿设备</a></li> <li><span>04</span><a href="./#_04">放置婴幼儿设备</a></li>
</ul><div class="clear"></div> </ul><div class="clear"></div>
</div> </div>
</section> </section>
...@@ -65,8 +65,8 @@ includeHead('div'); ...@@ -65,8 +65,8 @@ includeHead('div');
</ul><div class="clear"></div> </ul><div class="clear"></div>
<div id="spread"> <div id="spread">
<div> <div>
<h3>日本普及率：77.5％（2015年数据）</h3> <h3>在日本的普及率：80.4%<small>(2019年3月现在)</small></h3>
<p>根据平成25年“内阁府消费动向调查”，家庭普及率约77.5％，基本和电脑（78.0%）的普及率一样。</p> <p>根据日本内阁府的调查结果显示世代普及率年年增加约为80%，比电脑的普及率更高。</p>
</div> </div>
<div><img src="./images/latest01_graph01.gif" alt=""></div> <div><img src="./images/latest01_graph01.gif" alt=""></div>
</div><div class="clear"></div> </div><div class="clear"></div>
...@@ -99,13 +99,62 @@ includeHead('div'); ...@@ -99,13 +99,62 @@ includeHead('div');
</div> </div>
</div> </div>
</section> </section>
<section id="_02">
<div class="block">
<h2 class="line"><span>02</span>超级节水智能坐便器</h2>
<p>根据近几年趋势，采用漩动力技术的超级节水智能坐便器越来越有人气。<br />
注重坐便器本身的简约典雅，追求释放空间的自由感等，各公司争相开发各具特色的超级节水智能坐便器。</p>
<ul>
<li><strong>品牌</strong><div>外观</div><span>商品名</span></li>
<li><strong>asahi卫陶</strong><div><img src="../../latest/images/latest02_img01.jpg" alt=""></div><span>one-piece</span></li>
<li><strong>JANIS工业</strong><div><img src="../../latest/images/latest02_img02.jpg" alt=""></div><span>smartclean</span></li>
<li><strong>TOTO</strong><div><img src="../../latest/images/latest02_img03.jpg" alt=""></div><span>诺锐斯特・间</span></li>
<li><strong>松下</strong><div><img src="../../latest/images/latest02_img04.jpg" alt=""></div><span>A La Uno</span></li>
<li><strong>LIXIL</strong><div><img src="../../latest/images/latest02_img05.jpg" alt=""></div><span>Satis</span></li>
</ul><div class="clear"></div>
</div>
</section>
<section id="_03">
<div class="block">
<h2 class="line"><span>03</span>节水装置</h2>
<h3>节水型坐便器</h3>
<p>日本洋式坐便器一次的洗净用水量（大）在6升以下。<br />
而且冲水时水流沿着池壁呈旋涡状，既达到节水目标，又有效清洗。</p>
<ul>
<li><img src="../../latest/images/latest03_img01.jpg" alt=""></li>
<li><img src="../../latest/images/latest03_img02.jpg" alt=""></li>
</ul><div class="clear"></div>
<ul id="small">
<li><h3>自动冲洗小便器</h3><p>考虑到儿童，设计了儿童容易接近，便池较低的小便器。</p></li>
<li><img src="../../latest/images/latest03_img03.jpg" alt=""></li>
</ul><div class="clear"></div>
<h3>洗手台（自动水龙头，自动洗手液，烘手机）</h3>
<ul id="auto">
<li><img src="../../latest/images/latest03_img04.jpg" alt=""><p>基本都是自动出水装置。</p></li>
<li><img src="../../latest/images/latest03_img05.jpg" alt=""><p>商业设施等地还会有自动洗手液。</p></li>
<li><img src="../../latest/images/latest03_img06.jpg" alt=""><p>配备有用风力吹走水滴的烘手机。</p></li>
</ul><div class="clear"></div>
</div>
</section>
<section id="_04">
<div class="block">
<h2 class="line"><span>04</span>放置婴幼儿设备</h2>
<p>在商业设施呀交通设施等地，婴幼儿安全带・婴幼儿坐席等考虑到婴幼儿的装置，方便给婴幼儿更换衣服时使用的躺板等装置在不断增加中。<br />
带着孩子一起出游的家庭也可以安心放心地使用洗手间。</p>
<ul>
<li><img src="../../latest/images/latest04_img01.jpg" alt=""><p>给婴幼儿更换尿布的地方</p></li>
<li><img src="../../latest/images/latest04_img02.jpg" alt=""><p>带有婴幼儿的人们在上厕所时，可安置婴幼儿的座椅。</p></li>
<li><img src="../../latest/images/latest04_img03.jpg" alt=""><p>更换儿童衣服或纸尿布时使用的薄型板材。</p></li>
</ul><div class="clear"></div>
</div>
</section>
<section class="latest_menu foot_menu"> <section class="latest_menu foot_menu">
<div class="block"> <div class="block">
<ul> <ul>
<li><span>01</span><a href="./#_01">智能坐便器</a></li> <li><span>01</span><a href="./#_01">智能坐便器</a></li>
<li><span>02</span><a href="02.html#_02">超级节水智能坐便器</a></li> <li><span>02</span><a href="./#_02">超级节水智能坐便器</a></li>
<li><span>03</span><a href="02.html#_03">节水装置</a></li> <li><span>03</span><a href="./#_03">节水装置</a></li>
<li><span>04</span><a href="02.html#_04">放置婴幼儿设备</a></li> <li><span>04</span><a href="./#_04">放置婴幼儿设备</a></li>
</ul><div class="clear"></div> </ul><div class="clear"></div>
</div> </div>
</section> </section>
......
utsukushitoilet/cn_s/shared/js/common_parts.js
/* 2020.2.19 update */
function includeHead2(tag) {
document.write(
'<div class="overlay"><img src="/utsukushitoilet/shared/images/main_visual0_002.png" width="100%" height="auto" class="back_img"></div>\n'+
'<header class="pht">\n'+
'<div id="head_area" class="head_area">\n'+
'<'+tag+' class="title_area"><a href="/utsukushitoilet/cn_s/"><img src="/utsukushitoilet/shared/images/logo.svg" alt="JAPAN TOILET INFORMATION"><span class="logo_line"><img src="/utsukushitoilet/shared/images/logo_line.svg" alt="NIPPON UTSUKUSHI TOILET"></span></a></'+tag+'>\n'+
'<div class="lang_menu">\n'+
'<div id="lang">\n'+
'<select>\n'+
'<option value="">LANGUAGE</option>\n'+
'<option value="/utsukushitoilet/cn_t/" id="cn_t">CHINESE(Traditional)</option>\n'+
'<option value="/utsukushitoilet/cn_s/" id="cn_s">CHINESE(Simplified)</option>\n'+
'<option value="/utsukushitoilet/kr/" id="kr">KOREAN</option>\n'+
'<option value="/utsukushitoilet/en/" id="en">ENGLISH</option>\n'+
'<option value="/utsukushitoilet/" id="ja">JAPANESE</option>\n'+
'</select>\n'+
'</div>\n'+
'</div>\n'+
'</div>\n'+
'<nav>\n'+
'<div class="inner-toggle">\n'+
'<a href="" id="toggle_btn" class="toggle_btn">\n'+
'<div class="toggle"><span></span></div>\n'+
'</a>\n'+
'</div>\n'+
'<div id="toggle_menu" class="toggle_menu">\n'+
'<div class="inner-menu">\n'+
'<div class="menu_box">\n'+
'<div class="header_flxpc">\n'+
'<ul class="header_nav">\n'+
'<li>日本的洗手间情况</li>\n'+
'<li class="situation"><a href="/utsukushitoilet/cn_s/situation/">有洗手间的地方</a></li>\n'+
'<li class="sign"><a href="/utsukushitoilet/cn_s/sign/">洗手间指南</a></li>\n'+
'<li class="type"><a href="/utsukushitoilet/cn_s/type/">洗手间种类和使用方法</a></li>\n'+
'<li class="howtouse"><a href="/utsukushitoilet/cn_s/howtouse/">洗手间用具的使用方法</a></li>\n'+
'</ul>\n'+
'<div class="latest"><b>洗手间的资讯</b><a href="/utsukushitoilet/cn_s/latest/">日本最新的洗手间</a></div>\n'+
'</div>\n'+
'</div>\n'+
'<div class="search">\n'+
'<gcse:searchbox-only></gcse:searchbox-only>\n'+
'</div>\n'+
'</div>\n'+
'</div>\n'+
'</nav>\n'+
'</header>\n'
);
}
/* 共通 ページメニュー　ヘッダ */ /* 共通 ページメニュー　ヘッダ */
function includeHead(tag) { function includeHead(tag) {
document.write( document.write(
...@@ -53,25 +103,30 @@ document.write( ...@@ -53,25 +103,30 @@ document.write(
'</div>\n'+ '</div>\n'+
'<footer>\n'+ '<footer>\n'+
'<div id="footer_div1">\n'+ '<div id="footer_div1">\n'+
'<div id="footer_menu1">\n'+ '<div id="footer_menu1" class="list_wt">\n'+
'<strong>日本的洗手间情况</strong>\n'+ '<strong>日本的洗手间情况</strong>\n'+
'<ul>\n'+ '<ul>\n'+
' <li><a href="/utsukushitoilet/cn_s/situation/">洗手间位置</a></li>\n'+ ' <li><a href="/utsukushitoilet/cn_s/situation/">洗手间位置</a></li>\n'+
' <li><a href="/utsukushitoilet/cn_s/situation/#guide">洗手间指南</a></li>\n'+ ' <li><a href="/utsukushitoilet/cn_s/sign/">洗手间指南</a></li>\n'+
' <li><a href="/utsukushitoilet/cn_s/type/">洗手间种类和使用方法</a></li>\n'+ ' <li><a href="/utsukushitoilet/cn_s/type/">洗手间种类和使用方法</a></li>\n'+
' <li><a href="/utsukushitoilet/cn_s/type/#use">洗手间用具的使用方法</a></li>\n'+ ' <li><a href="/utsukushitoilet/cn_s/howtouse/">洗手间用具的使用方法</a></li>\n'+
'</ul>\n'+ '</ul>\n'+
'</div>\n'+ '</div>\n'+
'<div id="footer_menu2">\n'+ '<div id="footer_menu2" class="list_wt">\n'+
'<strong>日本最新的洗手间</strong>\n'+ '<strong>日本最新的洗手间</strong>\n'+
'<ul>\n'+ '<ul>\n'+
' <li><a href="/utsukushitoilet/cn_s/latest/#_01">智能坐便器</a></li>\n'+ ' <li><a href="/utsukushitoilet/cn_s/latest/#_01">智能坐便器</a></li>\n'+
' <li><a href="/utsukushitoilet/cn_s/latest/02.html#_02">超级节水智能坐便器</a></li>\n'+ ' <li><a href="/utsukushitoilet/cn_s/latest/#_02">超级节水智能坐便器</a></li>\n'+
' <li><a href="/utsukushitoilet/cn_s/latest/02.html#_03">节水装置</a></li>\n'+ ' <li><a href="/utsukushitoilet/cn_s/latest/#_03">节水装置</a></li>\n'+
' <li><a href="/utsukushitoilet/cn_s/latest/02.html#_04">放置婴幼儿设备</a></li>\n'+ ' <li><a href="/utsukushitoilet/cn_s/latest/#_04">放置婴幼儿设备</a></li>\n'+
'</ul>\n'+ '</ul>\n'+
'</div>\n'+ '</div>\n'+
'<div class="clear"></div>\n'+ '<div id="footer_banner">\n'+
'<ul>\n'+
' <li class="line"><a href="http://www.sanitary-net.com/" target="_blank"><img src="/utsukushitoilet/shared/images/bnr_toiletnavi.gif" alt="TOILET NAVIGATION"></a></li>\n'+
' <li class="line"><a href="http://www.mlit.go.jp/kankocho/" target="_blank"><img src="/utsukushitoilet/shared/images/bnr_kanko.gif" alt="Japan Tourism Agency"></a></li>\n'+
'</ul>\n'+
'</div><div class="clear"></div>\n'+
'</div>\n'+ '</div>\n'+
'<div id="copyright">\n'+ '<div id="copyright">\n'+
'Copyright &copy; 一般社団法人日本レストルーム工業会\n'+ 'Copyright &copy; 一般社団法人日本レストルーム工業会\n'+
......
utsukushitoilet/cn_s/sign/css/style.css 0 → 100644
@charset "UTF-8";
#facility ul {
padding: 50px 0;
}
#facility ul:after {
content: "";
display: block;
clear: both;
}
#facility li {
display: inline-block;
width: 16.6%;
float: left;
text-align: center;
}
#facility li div {
width: 99%;
}
#facility li strong {
display: block;
}
#facility li img {
width: 100%;
}
#cleaning {
border: solid 1px #ec6b55;
position: relative;
text-align: left;
padding: 20px;
background: url(/utsukushitoilet/situation/images/bg_cleaning.gif) no-repeat 94% center;
background-size: 224px auto;
margin-top: 50px;
margin-bottom: 50px;
}
#cleaning:after {
content: "";
display: block;
position: absolute;
z-index:-1;
top: 3px;
left: 3px;
right: -5px;
bottom: -5px;
border: 1px solid #dcdcdc;
}
#cleaning h2 {
font-size: 20px;
font-weight: bold;
}
#cleaning p {
width: 66%;
}
#guide h2 {
background-color: #7f7f7f;
color: #fff;
width: 110px;
margin-bottom: 0;
margin-top: 20px;
}
#guide .guide_eg {
border: solid 1px #ccc;
padding: 30px 10px 20px 10px;
margin-bottom: 20px;
position: relative;
}
#guide #letter li {
display: inline-block;
width: 17%;
padding-bottom: 20px;
}
#guide #letter li img {
max-width: 116px;
width: 100%;
}
#guide #letter li:before {
content: "-";
color: #ed638a;
font-weight: bold;
margin-right: 6px;
}
#guide ul#sign {
display: block;
height: 115px;
}
#guide #sign li {
display: block;
position: absolute;
background-color: #f4f4f4;
padding: 14px 0;
width: 106px;
border-radius: 5px;
}
#guide #sign li img {
width: 58%;
}
#guide #sign li:first-child {
left: 30px;
}
#guide #sign li:nth-child(2) {
left: 152px;
}
#guide #sign li:nth-child(3) {
width: 185px;
left: 274px;
height: 77px;
}
#guide #sign li:nth-child(3) img {
width: 95%;
margin-top: 12px;
}
#guide #sign li:nth-child(4) {
width: 272px;
left: 476px;
height: 77px;
background-color: #666;
}
#guide #sign li:nth-child(4) img {
width: 67%;
margin-top: 12px;
}
#guide #sign li:nth-child(5) {
left: 152px;
}
#guide #sign li:nth-child(6) {
left: 274px;
}
#guide #sign li:nth-child(7) {
left: 396px;
}
#guide #sign li:nth-child(8) {
left: 518px;
}
#guide #sign li:nth-child(9) {
left: 641px;
width: 186px;
}
#guide #sign li:nth-child(9) img {
width: 90%;
}
#guide #sign li:nth-child(10) {
right: 28px;
clear: both;
}
#guide ul#sign:after {
content: "";
display: block;
clear: both;
}
/* 0-640px ----*/
@media screen and (max-width:640px){
#facility li {
float: none;
display: block;
clear: both;
width: 92%;
margin: 1px auto;
}
#facility li:after {
content: "";
display: block;
clear: both;
}
#facility li strong {
position: absolute;
display: block;
text-shadow: 1px 1px 2px #fff;
}
#facility li img {
display: block;
width: 30%;
float: left;
margin-right: 1px;
}
#facility li img:first-child {
margin-left: 39%;
}
#cleaning {
background-position: center 95%;
width: 86%;
padding-bottom: 200px;
}
#cleaning p {
width: initial;
margin: 0 auto;
}
#guide h2 {
margin-left: 4%;
}
#guide .guide_eg {
margin-left: 4%;
margin-right: 4%;
}
#guide #letter li {
width: 48%;
}
#guide ul#sign {
height: inherit;
}
#guide #sign li {
position: inherit;
display: inline-block;
width: 42%;
margin-bottom: 12px;
pading: 4% 0;
}
#guide #sign li:nth-child(3), #guide #sign li:nth-child(4), #guide #sign li:nth-child(9) {
width: 85.2%;
height: auto;
}
#guide #sign li:nth-child(3) img, #guide #sign li:nth-child(4) img {
margin-top: 0;
}
#guide #sign li:nth-child(10) {
margin-left: 7.4%;
float: left;
}
}
utsukushitoilet/cn_s/sign/index.html 0 → 100644
<!DOCTYPE html>
<html lang="ja" prefix="og: http://ogp.me/ns#">
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta charset="UTF-8">
<meta name="keywords" content="">
<meta name="description" content="">
<title>洗手间指南 - NIPPON UTSUKUSHI TOILET</title>
<link rel="stylesheet" href="/utsukushitoilet/shared/css/reset.css" type="text/css" media="all">
<link rel="stylesheet" href="/utsukushitoilet/shared/css/common.css" type="text/css" media="all">
<link rel="stylesheet" href="css/style.css" type="text/css" media="all">
<script type="text/javascript" src="/utsukushitoilet/shared/js/jquery.js"></script>
<script type="text/javascript" src="/utsukushitoilet/shared/js/jquery.plugin.js"></script>
<script type="text/javascript" src="/utsukushitoilet/shared/js/common.js"></script>
<script type="text/javascript" src="../shared/js/common_parts.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#facility li strong").autoHeight();
});
</script>
<!-- google analytics -->
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-560401-9']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<!-- //google analytics -->
</head>
<body class="second" id="sign">
<script type="text/javascript" >
<!--
includeHead2('div');
//-->
</script>
<noscript>
<p>当サイトはJavaScriptをonにしてご覧ください。</p>
</noscript>
<section id="guide" class="first">
<div class="block">
<h1><span>日本的洗手间情况</span>洗手间指南</h1>
<p>在日本，表示洗手间的语言很多。有直接表示的，也有间接表示的。根据场所・TPO不同，表达方法也不一样。<br />
比如在吃饭的时候，比起直接说“卫生间”，用“化妆室”表达更优雅。为防止尴尬，提前了解各种洗手间的图案吧。<br />
表示洗手间的代表图案</p>
<h2>文字</h2>
<div class="guide_eg">
<ul id="letter">
<li><img src="../../situation/images/letter01.gif" alt="お手洗い"></li>
<li><img src="../../situation/images/letter02.gif" alt="お手洗"></li>
<li><img src="../../situation/images/letter03.gif" alt="御手洗"></li>
<li><img src="../../situation/images/letter04.gif" alt="洗面所"></li>
<li><img src="../../situation/images/letter05.gif" alt="化粧室"></li>
<li><img src="../../situation/images/letter06.gif" alt="Toilet"></li>
<li><img src="../../situation/images/letter07.gif" alt="lavatory"></li>
<li><img src="../../situation/images/letter08.gif" alt="W.C"></li>
<li><img src="../../situation/images/letter09.gif" alt="RestRoom"></li>
<li><img src="../../situation/images/letter10.gif" alt="厠"></li>
</ul>
</div>
<h2>サイン</h2>
<div class="guide_eg">
<ul id="sign">
<li><img src="../../situation/images/sign01.gif" alt=""></li>
<li><img src="../../situation/images/sign02.gif" alt=""></li>
<li><img src="../../situation/images/sign03.gif" alt="TOILET"></li>
<li><img src="../../situation/images/sign04.gif" alt="化粧室"></li>
</ul>
</div>
</div>
</section>
<script type="text/javascript" >
<!--
includeFoot();
//-->
</script>
</body>
</html>
\ No newline at end of file
utsukushitoilet/cn_s/situation/index.html
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="keywords" content=""> <meta name="keywords" content="">
<meta name="description" content=""> <meta name="description" content="">
<title>有洗手间的地方・洗手间指南 - NIPPON UTSUKUSHI TOILET</title> <title>有洗手间的地方 - NIPPON UTSUKUSHI TOILET</title>
<link rel="stylesheet" href="/utsukushitoilet/shared/css/reset.css" type="text/css" media="all"> <link rel="stylesheet" href="/utsukushitoilet/shared/css/reset.css" type="text/css" media="all">
<link rel="stylesheet" href="/utsukushitoilet/shared/css/common.css" type="text/css" media="all"> <link rel="stylesheet" href="/utsukushitoilet/shared/css/common.css" type="text/css" media="all">
<link rel="stylesheet" href="css/style.css" type="text/css" media="all"> <link rel="stylesheet" href="css/style.css" type="text/css" media="all">
...@@ -31,10 +31,10 @@ $(document).ready(function(){ ...@@ -31,10 +31,10 @@ $(document).ready(function(){
</script> </script>
<!-- //google analytics --> <!-- //google analytics -->
</head> </head>
<body class="second"> <body class="second" id="situation">
<script type="text/javascript" > <script type="text/javascript" >
<!-- <!--
includeHead('div'); includeHead2('div');
//--> //-->
</script> </script>
<noscript> <noscript>
...@@ -71,38 +71,6 @@ includeHead('div'); ...@@ -71,38 +71,6 @@ includeHead('div');
如果您发现它了，请查看下一天内打扫检查的次数吧。</p> 如果您发现它了，请查看下一天内打扫检查的次数吧。</p>
</div> </div>
</section> </section>
<section id="guide">
<div class="block">
<h1><span>日本的洗手间情况</span>洗手间指南</h1>
<p>在日本，表示洗手间的语言很多。有直接表示的，也有间接表示的。根据场所・TPO不同，表达方法也不一样。<br />
比如在吃饭的时候，比起直接说“卫生间”，用“化妆室”表达更优雅。为防止尴尬，提前了解各种洗手间的图案吧。<br />
表示洗手间的代表图案</p>
<h2>文字</h2>
<div class="guide_eg">
<ul id="letter">
<li><img src="../../situation/images/letter01.gif" alt="お手洗い"></li>
<li><img src="../../situation/images/letter02.gif" alt="お手洗"></li>
<li><img src="../../situation/images/letter03.gif" alt="御手洗"></li>
<li><img src="../../situation/images/letter04.gif" alt="洗面所"></li>
<li><img src="../../situation/images/letter05.gif" alt="化粧室"></li>
<li><img src="../../situation/images/letter06.gif" alt="Toilet"></li>
<li><img src="../../situation/images/letter07.gif" alt="lavatory"></li>
<li><img src="../../situation/images/letter08.gif" alt="W.C"></li>
<li><img src="../../situation/images/letter09.gif" alt="RestRoom"></li>
<li><img src="../../situation/images/letter10.gif" alt="厠"></li>
</ul>
</div>
<h2>サイン</h2>
<div class="guide_eg">
<ul id="sign">
<li><img src="../../situation/images/sign01.gif" alt=""></li>
<li><img src="../../situation/images/sign02.gif" alt=""></li>
<li><img src="../../situation/images/sign03.gif" alt="TOILET"></li>
<li><img src="../../situation/images/sign04.gif" alt="化粧室"></li>
</ul>
</div>
</div>
</section>
<script type="text/javascript" > <script type="text/javascript" >
<!-- <!--
includeFoot(); includeFoot();
......
utsukushitoilet/cn_s/type/css/style.css
...@@ -24,6 +24,9 @@ h3 { ...@@ -24,6 +24,9 @@ h3 {
font-weight: bold; font-weight: bold;
font-size: 20px; font-size: 20px;
} }
#kind{
margin-bottom: 70px;
}
#kind ul { #kind ul {
padding: 50px 0; padding: 50px 0;
} }
...@@ -195,3 +198,83 @@ h3 { ...@@ -195,3 +198,83 @@ h3 {
} }
#kind ul.toilet {
display: flex;
align-items: stretch;
justify-content: space-between;
padding: 20px 0;
}
#kind ul.toilet li {
display: block;
width: 48.4%;
float: none;
text-align: left;
margin-right: 0;
margin-left: 0;
background-color: #f7f6f2;
}
#kind ul.toilet li:nth-child(2) {
margin-right: 0;
}
#kind ul.toilet:after {
content: none;
}
#kind ul.toilet li h3 {
background-color: #fff;
text-align: center;
padding-bottom: 10px;
}
#kind ul.toilet li img {
width: 100%;
}
#kind ul.toilet li p {
padding: 20px;
margin-bottom: 10px;
}
#kind ul.toilet li div {
border-top: solid 1px #e1e0db;
margin: 0 auto;
width: 92%;
padding-bottom: 10px;
}
#kind ul.toilet li div img {
border: solid 1px #e1e0db;
display: block;
margin-bottom: 10px;
}
#kind ul#toilet li span {
display: block;
text-align: center;
font-weight: bold;
font-size: 14px;
padding: 10px 0;
}
@media screen and (max-width:640px){
#kind ul.toilet {
display: block;
}
#kind ul.toilet li {
float: none;
display: block;
clear: both;
width: 92%;
margin: 1px auto 20px auto;
}
#kind ul.toilet li:nth-child(2) {
margin-right: auto;
}
#kind ul.toilet li:after {
content: "";
display: block;
clear: both;
}
#kind ul.toilet li span {
padding: 6px;
font-size: inherit;
}
#kind ul.toilet li strong {
position: absolute;
display: block;
}
}
utsukushitoilet/cn_s/type/index.html
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="keywords" content=""> <meta name="keywords" content="">
<meta name="description" content=""> <meta name="description" content="">
<title>洗手间种类和使用方法・洗手间用具的使用方法 - NIPPON UTSUKUSHI TOILET</title> <title>洗手间种类和使用方法 - NIPPON UTSUKUSHI TOILET</title>
<link rel="stylesheet" href="/utsukushitoilet/shared/css/reset.css" type="text/css" media="all"> <link rel="stylesheet" href="/utsukushitoilet/shared/css/reset.css" type="text/css" media="all">
<link rel="stylesheet" href="/utsukushitoilet/shared/css/common.css" type="text/css" media="all"> <link rel="stylesheet" href="/utsukushitoilet/shared/css/common.css" type="text/css" media="all">
<link rel="stylesheet" href="css/style.css" type="text/css" media="all"> <link rel="stylesheet" href="css/style.css" type="text/css" media="all">
...@@ -13,13 +13,6 @@ ...@@ -13,13 +13,6 @@
<script type="text/javascript" src="/utsukushitoilet/shared/js/jquery.plugin.js"></script> <script type="text/javascript" src="/utsukushitoilet/shared/js/jquery.plugin.js"></script>
<script type="text/javascript" src="/utsukushitoilet/shared/js/common.js"></script> <script type="text/javascript" src="/utsukushitoilet/shared/js/common.js"></script>
<script type="text/javascript" src="../shared/js/common_parts.js"></script> <script type="text/javascript" src="../shared/js/common_parts.js"></script>
<script type="text/javascript">
$(document).ready(function(){
if ($(window).width() > 640) {
$("#toilet li").autoHeight();
}
});
</script>
<!-- google analytics --> <!-- google analytics -->
<script type="text/javascript"> <script type="text/javascript">
var _gaq = _gaq || []; var _gaq = _gaq || [];
...@@ -33,10 +26,10 @@ $(document).ready(function(){ ...@@ -33,10 +26,10 @@ $(document).ready(function(){
</script> </script>
<!-- //google analytics --> <!-- //google analytics -->
</head> </head>
<body class="second"> <body class="second" id="type">
<script type="text/javascript" > <script type="text/javascript" >
<!-- <!--
includeHead('div'); includeHead2('div');
//--> //-->
</script> </script>
<noscript> <noscript>
...@@ -45,13 +38,21 @@ includeHead('div'); ...@@ -45,13 +38,21 @@ includeHead('div');
<section id="kind" class="first"> <section id="kind" class="first">
<div class="block"> <div class="block">
<h1><span>日本的洗手间情况</span>洗手间种类及使用方法</h1> <h1><span>日本的洗手间情况</span>洗手间种类及使用方法</h1>
<p>日本洗手间主要有和式洗手间，洋式洗手间，多功能洗手间三类。根据情况不同类型也会有所差异。<br /> <p>有和式、洋式和多功能三种型态的洗手间。<br>
在旅游景点多和式洗手间，但根据游客要求，洋式洗手间也在增加中。 </p> 目前积极将和式形态改装为方便使用的洋式型态。</p>
<h2 class="line"><span>01</span>交通设施・商业设施等的洗手间</h2> <h2 class="line"><span>01</span>公共洗手间</h2>
<ul id="toilet"> <ul class="toilet 01">
<li><h3>和式洗手间</h3><img src="../../type/images/type01_washiki01.jpg" alt=""><p>日本自古便使用的跨式便器。公共洗手间内多设置这类和式便器。</p><div><span>使用方法</span><img src="./images/type01_washiki02.gif" alt=""></div></li> <li><h3>和式洗手间</h3><img src="../../type/images/type01_washiki01.jpg" alt=""><p>日本自古便使用的跨式便器。公共洗手间内多设置这类和式便器。</p><div><span>使用方法</span><img src="./images/type01_washiki02.gif" alt=""></div></li>
<li><h3>洋式洗手间</h3><img src="../../type/images/type01_yoshiki01.jpg" alt=""><p>现在最普及的洗手间。</p><div><span>使用方法</span><img src="./images/type01_yoshiki02.gif" alt=""></div></li> <li><h3>洋式洗手间</h3><img src="../../type/images/type01_yoshiki01.jpg" alt=""><p>现在最普及的洗手间。</p><div><span>使用方法</span><img src="./images/type01_yoshiki02.gif" alt=""></div></li>
</ul>
<ul class="toilet 01">
<li><h3>多功能洗手间</h3><img src="../../type/images/type01_takino01.jpg" alt=""><p>残障人士，人工膀胱持有者，带婴幼儿的人等优先使用的设计的较宽敞的洗手间。当然老年人等一般人也可以使用。</p><div><span>表示多功能洗手间的图案</span><img src="../../type/images/type01_takino02.gif" alt=""></div></li> <li><h3>多功能洗手间</h3><img src="../../type/images/type01_takino01.jpg" alt=""><p>残障人士，人工膀胱持有者，带婴幼儿的人等优先使用的设计的较宽敞的洗手间。当然老年人等一般人也可以使用。</p><div><span>表示多功能洗手间的图案</span><img src="../../type/images/type01_takino02.gif" alt=""></div></li>
<li><h3>小便池</h3><img src="images/type01_urinal.jpg" alt=""><p>不需用手碰触洗净按键就会自动洗净，十分舒适卫生。</p><div><span>冲水阀和自动洗净的使用方法</span><img src="../../type/images/type01_urinal02.gif" alt=""></div></li>
</ul>
<ul class="toilet 01">
<li><h3>自动水龙头</h3><img src="images/type01_autofaucet.jpg" alt=""><p>不需用手碰触手龙头，肥皂泡和水就会自动跑出，卫生舒适。</p><div><span>自动水龙头和自动给皂机的使用方法</span><img src="images/type01_autofaucet02.gif" alt=""></div></li>
<li><h3>烘手机</h3><img src="images/type01_handdryer.jpg" alt=""><p>是洗完手后利用风吹干方式的装置。<br>将手靠近出风口自动出风。</p>
<div><span>简易型和长型的使用方法</span><img src="images/type01_handdryer02.gif" alt=""></div></li>
</ul> </ul>
<h2 class="line"><span>02</span>宾馆・客房内的洗手间</h2> <h2 class="line"><span>02</span>宾馆・客房内的洗手间</h2>
<ul> <ul>
...@@ -62,67 +63,11 @@ includeHead('div'); ...@@ -62,67 +63,11 @@ includeHead('div');
<div class="point"> <div class="point">
<div> <div>
<h2><img src="/utsukushitoilet/shared/images/point.gif" alt="point!"></h2> <h2><img src="/utsukushitoilet/shared/images/point.gif" alt="point!"></h2>
<p>使用宾馆浴室时的注意点<br /> <p><img src="/utsukushitoilet/type/images/point_img01.png" alt="">
宾馆浴室一般配有淋浴器，但请在浴缸内使用。<br /> <span>&lt;利用饭店浴室时的注意事项&gt;</span>
同时，使用时请将浴室门关闭。不然会导致火警警报器误判误响。<br /> <span class="point_txt01">* 整体浴室内配有莲蓬头，但只限于浴缸内使用。</span>
淋浴时，请关好浴室门。配有防水帘的情况下，请拉好帘子，以防弄湿马坐便器周边。</p><div class="clear"></div> <span class="point_txt01">* 如果浴室里附有防水浴帘的话，为了避免弄湿马桶周围，请拉起浴帘使用。</span>
</div> <span class="point_txt01">* 如果打开浴室的门来使用的话，容易误引火灾警报器，请务必关上浴室的门来使用。</span></p><div class="clear"></div>
</div>
</section>
<section id="use">
<div class="block">
<h1><span>日本洗手间情况</span>洗手间内器具的使用方法</h1>
<h2 class="line"><span>01</span>坐便器的冲水方法</h2>
<p class="left">根据坐便器设备的不同，冲水的方法也各异。<br />
水箱式坐便器的话，冲水时请转动水箱旁的手柄。<br />
公共洗手间或和式洗手间等没有水箱的便器的话，冲洗时请拉下便器背面的手柄。<br />
其他还有使用设置在墙壁上的按钮，手柄，非接触型感应器(手遮）等冲洗的，还有遥感控制的。<br />
最先进的坐便器则是，你使用完站起来变自动冲洗的智能坐便器。</p>
<h3>冲水手柄等的位置</h3>
<ul>
<li><img src="../../type/images/use01_img01.jpg" alt=""><p>转 或者 拧 冲水手柄</p></li>
<li><img src="../../type/images/use01_img02.jpg" alt=""><p>将手柄往下拉</p></li>
<li><img src="../../type/images/use01_img03.jpg" alt=""><p>将手柄往下拉</p></li>
</ul><div class="clear"></div>
<ul>
<li><h3>冲水按钮</h3><img src="../../type/images/use01_img04.jpg" alt=""><p>往下按冲水按钮</p></li>
<li><h3>冲水感应装置</h3><img src="../../type/images/use01_img05.jpg" alt=""><p>将手罩在感应处前方</p></li>
</ul><div class="clear"></div>
</div>
<div class="point">
<div>
<h2><img src="/utsukushitoilet/shared/images/point.gif" alt="point!"></h2>
<p>在日本，使用过的卫生纸请仍在便器中，随排泄物一起冲走。<br />
※可以一起冲水的，仅限卫生纸・之前说过的可溶性纸巾。<br />
卫生巾或其他杂物，请仍在卫生间内的垃圾箱里。<br />
离开前请确认有没有垃圾遗漏，为了下一位使用者，请一定冲洗干净，保持清洁。</p><div class="clear"></div>
</div>
</div>
<div class="block">
<h2 class="line"><span>02</span>智能坐便器的使用方法</h2>
<p class="left">使用智能坐便器的时候，请操作坐便器侧面的按钮。<br />
如果坐便器侧面没有的话，请操作墙壁上的遥感按钮。<br />
按钮所表示的意思，如下所示。</p>
<h3>操作部的位置</h3>
<ul>
<li><img src="../../type/images/use02_img01.jpg" alt=""></li>
<li><img src="../../type/images/use02_img02.jpg" alt=""></li>
</ul><div class="clear"></div>
<h3>操作部插图的意思</h3>
<ul id="operation">
<li><img src="../../type/images/use02_img03.gif" alt=""></li>
<li><img src="../../type/images/use02_img04.gif" alt=""></li>
<li><img src="../../type/images/use02_img05.gif" alt=""></li>
</ul><div class="clear"></div>
<h2 class="line"><span>03</span>遮音装置</h2>
<div class="bisection">
<p>在日本，为了掩盖上厕所时发出的声音，一般设置有可发出流水声的“遮音装置”。有一进入隔间边自动播音的装置，也有用手遮下感应处，或按下按钮播音的装置。和冲水按钮功能并不一样，不要按错了。</p>
<div><img src="./images/use03_img01.gif" alt=""></div><div class="clear"></div>
</div>
<h2 class="line"><span>04</span>紧急呼叫按钮</h2>
<div class="bisection">
<p>冲洗按钮的旁边，一般有紧急呼叫按钮。身体不舒服的紧急情况时用的按钮，所以带有“呼出”文字的按钮，请注意在紧急情况外不要按。</p>
<div><img src="../../type/images/use04_img01.jpg" alt=""></div><div class="clear"></div>
</div> </div>
</div> </div>
</section> </section>
......
utsukushitoilet/cn_t/css/style.css
...@@ -158,3 +158,169 @@ ...@@ -158,3 +158,169 @@
} }
} }
/* 2020.2.19 update */
.showcase {
position: relative;
height: 640px;
background: url(/utsukushitoilet/images/main_visual0.jpg) no-repeat top center;
background-size: cover;
}
.inner-showcase {
position: relative;
height: 100%;
}
.inner-showcase .menu_box {
position: absolute;
left: 0;
right: 0;
bottom: -2.5em;
margin: auto;
}
.inner-showcase .menu_box .header_nav,
.inner-showcase .menu_box .latest {
box-shadow: 0 0 1.5em 0 rgba(0,0,0,.3);
}
.inner-showcase .menu_box .manage a {
color: #e9573e;
}
.inner-showcase .menu_box .manage a::before {
background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%205%2010%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20fill%3D%22%23e9573e%22%20d%3D%22M5.000%2C5.000%20L-0.000%2C-0.000%20L-0.000%2C10.000%20L5.000%2C5.000%20Z%22%2F%3E%3C%2Fsvg%3E');
}
.inner-showcase .header_nav li:first-child {
padding: .2em 0;
background-color: #e9573e;
border: none;
border-bottom: solid 1px #ccc;
}
.inner-showcase .header_nav li {
border-color: #ccc;
}
.showcase_phrase {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.showcase_phrase img {
display: block;
width: 100%;
}
#situation {
padding-top: 0;
margin-top: 8em;
background: none;
}
@media screen and (max-width:640px){
.showcase {
height: 100vw;
}
.showcase_phrase {
width: 90%;
margin: auto;
}
#situation {
margin-top: 20vw;
}
}
#owner > div {
max-width: 980px;
width: 100%;
margin: 0 auto;
text-align: center;
}
#owner h2 {
margin-bottom: 30px;
font-size: 30px;
font-weight: bold;
display: inline-block;
border-bottom: solid 1px #e8392d;
line-height: 1.2em;
}
.owner_menu {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 3em;
}
.owner_menu li {
display: block;
width: 23.8%;
margin: 0 1em;
position: relative;
line-height: 1.4;
}
.owner_menu li a {
display: block;
padding: 8px;
border: solid 2px #f5b5aa;
text-align: center;
font-weight: bold;
color: #e9573e;
}
.owner_menu li p {
margin-top: 1em;
text-align: left;
}
.inner-showcase .menu_box .latest b {
display: block;
padding: .2em 0;
background-color: #e9573e;
border: none;
border-bottom: solid 1px #ccc;
text-align: center;
font-size: 14px;
color: #fff;
}
.header_flxpc .latest a {
padding: 2.532em 4em 2.532em 6em;
}
.inner-showcase .menu_box .manage a {
padding: 0 0 0 .71em;
background-color: #e9573e;
color: #fff;
}
.inner-showcase .menu_box .manage a::before {
content: none;
}
.inner-showcase .menu_box .manage a::after {
content: "";
display: inline-block;
width: .6em;
height: .6em;
margin-left: .2em;
margin-right: .5em;
background: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%205%2010%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20fill%3D%22%23fff%22%20d%3D%22M5.000%2C5.000%20L-0.000%2C-0.000%20L-0.000%2C10.000%20L5.000%2C5.000%20Z%22%2F%3E%3C%2Fsvg%3E') no-repeat center;
background-size: contain;
}
br.sp{
display: none;
}
@media screen and (max-width:640px){
.inner-showcase .menu_box .latest b {
font-size: 2.5vw;
}
.header_flxpc .latest a {
padding: 1em 0 1em 3.5em;
}
.owner_menu li {
display: block;
width: 100%;
margin: 0 1em;
position: relative;
line-height: 1.4;
}
br.sp{
display: block;
}
}
utsukushitoilet/cn_t/howtouse/css/style.css 0 → 100644
@charset "UTF-8";
h2.line {
border-top: solid 1px #ccc;
border-bottom: solid 1px #ccc;
font-size: 24px;
font-weight: bold;
padding: 36px 0;
position: relative;
margin-top: 60px;
line-height: 1.4;
clear: both;
}
h2.line span {
color: #e9573e;
font-weight: normal;
font-size: 40px;
position: absolute;
left: 0;
right: 0;
top: -32px;
}
h3 {
font-weight: bold;
font-size: 20px;
}
#kind{
margin-bottom: 70px;
}
#kind ul {
padding: 50px 0;
}
#kind ul:after {
content: "";
display: block;
clear: both;
}
#kind li {
display: block;
width: 31.3%;
float: left;
text-align: left;
margin-left: 3%;
background-color: #f7f6f2;
}
#kind li:first-child {
margin-left: 0;
}
#kind li h3 {
background-color: #fff;
text-align: center;
padding-bottom: 10px;
}
#kind li img {
width: 100%;
}
#kind li p {
padding: 20px;
margin-bottom: 10px;
}
#kind li div {
border-top: solid 1px #e1e0db;
margin: 0 auto;
width: 92%;
padding-bottom: 10px;
}
#kind li div img {
border: solid 1px #e1e0db;
display: block;
margin-bottom: 10px;
}
#kind li span {
display: block;
text-align: center;
font-weight: bold;
font-size: 14px;
}
#use .left {
text-align: left;
padding: 40px 0;
}
#use h3 {
text-align: left;
padding-bottom: 10px;
}
#use ul {
margin-bottom: 20px;
}
#use li {
display: block;
width: 31.3%;
float: left;
text-align: left;
margin-left: 3%;
margin-bottom: 40px;
}
#use li:first-child {
margin-left: 0;
}
#use li img {
width: 100%;
}
#operation img {
border: solid 1px #ccc;
}
.bisection {
margin-top: 40px;
margin-bottom: 100px;
}
.bisection02 {
margin-top: 40px;
margin-bottom: 40px;
}
.bisection:after {
content: "";
display: block;
clear: both;
}
.bisection p,
.bisection .lft {
float: left;
width: 48%;
text-align: left;
}
.bisection div {
float: right;
width: 50%;
}
.bisection div img {
width: 100%;
max-width: 472px;
border: solid 1px #ccc;
}
/* 0-640px ----*/
@media screen and (max-width:640px){
h2.line {
margin-left: 4%;
margin-right: 4%;
}
#kind li {
float: none;
display: block;
clear: both;
width: 92%;
margin: 1px auto 20px auto;
}
#kind li:first-child {
margin-left: auto;
}
#kind li:after {
content: "";
display: block;
clear: both;
}
#kind li span {
padding: 6px;
font-size: inherit;
}
#kind li strong {
position: absolute;
display: block;
}
#use h3 {
margin: 0 4%;
}
#use li {
float: none;
display: block;
clear: both;
width: 92%;
margin: 1px auto 30px auto;
}
#use li p {
margin: 10px 0;
}
#use li:first-child {
margin-left: auto;
}
#use li h3 {
margin: 0;
}
.bisection {
margin: 0 4%;
}
.bisection p,
.bisection .lft {
float: none;
width: inherit;
padding: 20px 0;
margin-bottom: 0;
}
.bisection div {
float: none;
width: inherit;
margin-bottom: 40px;
}
.bisection div img {
max-width: 578px;
}
}
#use .box{
overflow: hidden;
}
#use .left{
padding: 0;
text-align: left;
}
#use .left02{
text-align: left;
padding: 40px 0;
width: 76%;
float: left;
}
#use .right {
text-align: left;
padding: 40px 0;
margin-top: 40px;
margin-left: auto;
width: 18%;
padding: 10px;
border: 1px solid #e1e0db;
text-align: center;
}
#use .right span{
display: block;
margin-top: 10px;
}
@media screen and (max-width:640px){
#use .left02{
width: 92%;
float: none;
margin: auto;
}
#use .left.01{
width: 100%;
float: none;
}
#use .right{
width: 90%;
margin: auto;
margin-top: 0;
margin-bottom: 40px;
}
}
#kind ul#toilet li {
display: block;
width: 48.4%;
float: left;
text-align: left;
margin-right: 3%;
margin-left: 0;
background-color: #f7f6f2;
}
#kind ul#toilet li:nth-child(2) {
margin-right: 0;
}
#kind ul#toilet li h3 {
background-color: #fff;
text-align: center;
padding-bottom: 10px;
}
#kind ul#toilet li img {
width: 100%;
}
#kind ul#toilet li p {
padding: 20px;
margin-bottom: 10px;
}
#kind ul#toilet li div {
border-top: solid 1px #e1e0db;
margin: 0 auto;
width: 92%;
padding-bottom: 10px;
}
#kind ul#toilet li div img {
border: solid 1px #e1e0db;
display: block;
margin-bottom: 10px;
}
#kind ul#toilet li span {
display: block;
text-align: center;
font-weight: bold;
font-size: 14px;
padding: 10px 0;
}
@media screen and (max-width:640px){
#kind ul#toilet li {
float: none;
display: block;
clear: both;
width: 92%;
margin: 1px auto 20px auto;
}
#kind ul#toilet li:nth-child(2) {
margin-right: auto;
}
#kind ul#toilet li:after {
content: "";
display: block;
clear: both;
}
#kind ul#toilet li span {
padding: 6px;
font-size: inherit;
}
#kind ul#toilet li strong {
position: absolute;
display: block;
}
}
/* 20200109updata */
#use span.point_txt01{
display: block;
padding-left: 1em;
text-indent: -1em;
}
#use .txt_list {
list-style: disc;
margin-bottom: 0;
}
#use .txt_list li {
display: list-item;
width: auto;
margin: 0 0 0 1.2em;
float: none;
}
utsukushitoilet/cn_t/howtouse/index.html 0 → 100644
<!DOCTYPE html>
<html lang="ja" prefix="og: http://ogp.me/ns#">
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta charset="UTF-8">
<meta name="keywords" content="">
<meta name="description" content="">
<title>洗手間種類和使用方法・洗手間用具的使用方法 - NIPPON UTSUKUSHI TOILET</title>
<link rel="stylesheet" href="/utsukushitoilet/shared/css/reset.css" type="text/css" media="all">
<link rel="stylesheet" href="/utsukushitoilet/shared/css/common.css" type="text/css" media="all">
<link rel="stylesheet" href="css/style.css" type="text/css" media="all">
<script type="text/javascript" src="/utsukushitoilet/shared/js/jquery.js"></script>
<script type="text/javascript" src="/utsukushitoilet/shared/js/jquery.plugin.js"></script>
<script type="text/javascript" src="/utsukushitoilet/shared/js/common.js"></script>
<script type="text/javascript" src="../shared/js/common_parts.js"></script>
<script type="text/javascript">
$(document).ready(function(){
if ($(window).width() > 640) {
$("#toilet li").autoHeight();
}
});
</script>
<!-- google analytics -->
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-560401-9']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<!-- //google analytics -->
</head>
<body class="second" id="howtouse">
<script type="text/javascript" >
<!--
includeHead2('div');
//-->
</script>
<noscript>
<p>当サイトはJavaScriptをonにしてご覧ください。</p>
</noscript>
<section id="use" class="first">
<div class="block">
<h1><span>日本洗手間情況</span>洗手間內器具的使用方法</h1>
<p>日本的洗手間裡有很多功能。<br>
這裡跟各位介紹「馬桶的洗淨方法」「溫水洗淨便座的使用方法」「擬音裝置」「緊急求助鈴」的使用方法。</p>
<h2 class="line"><span>01</span>馬桶的沖水方法</h2>
<div class="box"><div class="left02">
根據馬桶設備型態，各有不同的洗淨方式。
<ul class="txt_list">
<li>水箱型馬桶：旋轉儲水箱旁的沖水把洗淨。</li>
<li>無水箱型馬桶：按壓沖水把洗淨。</li>
<li>其他型態：利用設置在牆壁上的按鈕或是非接觸型感應器(手遮)來洗淨，也有設置在遙控器內的形式。</li>
</ul>
最新型的智能馬桶是當使用者結束後站立時自動洗淨。
</div>
<p class="right"><img src="/utsukushitoilet/howtouse/images/3609.gif" alt=""><span>這個符號是沖洗馬桶的按鈕</span></p>
</div>
<h3>沖水手柄等的位置</h3>
<ul>
<li><img src="/utsukushitoilet/howtouse/images/use01_img01.jpg" alt=""><p>旋轉沖水把</p></li>
<li><img src="/utsukushitoilet/howtouse/images/use01_img02.jpg" alt=""><p>按壓沖水把</p></li>
<li><img src="/utsukushitoilet/howtouse/images/use01_img03.jpg" alt=""><p>按壓沖水把</p></li>
</ul><div class="clear"></div>
<ul>
<li><h3>冲水按钮</h3><img src="/utsukushitoilet/howtouse/images/use01_img04.jpg" alt=""><p>按下按鍵</p></li>
<li><h3>遙控器</h3><img src="/utsukushitoilet/howtouse/images/use01_img06.jpg" alt=""><p>請按壓溫水洗淨便座遙控器裡的某個按鍵</p></li>
<li><h3>沖水感應裝置</h3><img src="/utsukushitoilet/howtouse/images/use01_img05.jpg" alt=""><p>手遮感應器</p></li>
</ul><div class="clear"></div>
</div>
<div class="point">
<div>
<h2><img src="/utsukushitoilet/shared/images/point.gif" alt="point!"></h2>
<div class="box"><img src="/utsukushitoilet/howtouse/images/point_img01.png" alt="">
<ul class="txt_list">
<li>為了帶給下一位使用者舒適感，請在使用完畢後立即沖水洗淨。</li>
<li>日本的廁紙是溶水性的，請擦拭完畢後直接丟入馬桶內沖掉。<br>
* 廁所內會隨水沖掉的廁紙，只限於廁所衛生紙以及可溶性面紙。<br>
* 生理用品或是其他以外的物品，請丟棄在廁所內設置的垃圾桶。</li>
</ul>
</div><div class="clear"></div>
</div>
</div>
<div class="block">
<h2 class="line"><span>02</span>溫水洗淨便座的使用方法</h2>
<p class="left bisection02">使用溫水洗淨便座的時候，請操作坐馬桶側面的按鈕。<br />
如果側面沒有的話，請操作牆壁上的遙感按鈕。<br />
按鈕所表示的意思，如下所示。</p>
<h3>操作部的位置</h3>
<ul>
<li><img src="/utsukushitoilet/howtouse/images/use02_img01.jpg" alt=""></li>
<li><img src="/utsukushitoilet/howtouse/images/use02_img02.jpg" alt=""></li>
</ul><div class="clear"></div>
<h3>操作部插圖的意思</h3>
<ul id="operation">
<li><img src="/utsukushitoilet/howtouse/images/use02_img03.gif" alt=""></li>
<li><img src="/utsukushitoilet/howtouse/images/use02_img04.gif" alt=""></li>
<li><img src="/utsukushitoilet/howtouse/images/use02_img05.gif" alt=""></li>
</ul><div class="clear"></div>
<h2 class="line"><span>03</span>遮音裝置</h2>
<div class="bisection">
<div class="lft">在日本的公共洗手間裡，為了掩蓋如廁時的排泄聲音，設置了發出流水聲的『廁所擬音裝置』。根據不同型態有下列不同操作。擬音裝置的音樂會在一定時間後自動停止。
<ul class="txt_list">
<li>感應型：伸手感應立即發出音樂。</li>
<li>按鍵型：按下按鈕立即發出音樂。</li>
<li>自動型：一進廁所感應有人立即發出音樂。</li>
</ul>
</div>
<div><img src="./images/use03_img01.gif" alt=""></div><div class="clear"></div>
</div>
<h2 class="line"><span>04</span>緊急呼叫按鈕</h2>
<div class="bisection">
<p>洗淨操作按鍵附近設置了如照片所示的緊急求助鈴。如果在洗手間內感覺身體不適的話請按鈴，相關人員會即刻趕來。除了緊急情況以外請不要按此鈴。</p>
<div><img src="/utsukushitoilet/howtouse/images/use04_img01.jpg" alt=""></div><div class="clear"></div>
</div>
</div>
</section>
<script type="text/javascript" >
<!--
includeFoot();
//-->
</script>
</body>
</html>
\ No newline at end of file
utsukushitoilet/cn_t/index.html
...@@ -47,21 +47,47 @@ $(document).ready(function(){ ...@@ -47,21 +47,47 @@ $(document).ready(function(){
<body id="top"> <body id="top">
<script type="text/javascript" > <script type="text/javascript" >
<!-- <!--
includeHead('h1'); includeHead2('h1');
//--> //-->
</script> </script>
<noscript> <noscript>
<p>当サイトはJavaScriptをonにしてご覧ください。</p> <p>当サイトはJavaScriptをonにしてご覧ください。</p>
</noscript> </noscript>
<div class="showcase">
<div class="inner-showcase">
<div class="showcase_phrase">
<img src="/utsukushitoilet/images/mv_phrase.svg" alt="Welcome to Japan Toilet">
</div>
<div class="menu_box">
<div class="header_flxpc">
<ul class="header_nav">
<li>日本的洗手間情況</li>
<li class="situation"><a href="/utsukushitoilet/cn_t/situation/">有洗手間的地方</a></li>
<li class="sign"><a href="/utsukushitoilet/cn_t/sign/">洗手間指南</a></li>
<li class="type"><a href="/utsukushitoilet/cn_t/type/">洗手間種類和使用方法</a></li>
<li class="howtouse"><a href="/utsukushitoilet/cn_t/howtouse/">洗手間用具的使用方法</a></li>
</ul>
<div class="latest">
<b>洗手間的資訊</b>
<a href="/utsukushitoilet/cn_t/latest/">日本最新的洗手間</a>
</div>
</div>
</div>
</div>
</div>
<section id="situation"> <section id="situation">
<div> <div>
<h2>日本的洗手間情況</h2> <h2>日本的洗手間情況</h2>
<p>在旅行的時候，難免遇到一些尷尬的事情。比如尋找洗手間等。日本的大多數洗手間都十分乾淨衛生。而且基本可以免費使用，並配備有衛生紙。</p> <p>歡迎蒞臨日本！！<br>
在旅行途中上洗手間時會遇到困擾的事嗎？<br>
日本的洗手間提供各位免費舒適貼心清潔的衛生空間。<br>
在此網站中，集齊日本洗手間的相關資訊。<br>
希望在日本的旅途中，共同體驗日本洗手間的舒適感！</p>
<ul> <ul>
<li><div><img src="../images/situation01.jpg" alt=""><strong>洗手間位置</strong><p>旅遊目的地在很多地方都設有洗手間。洗手間配備有各種設施。</p><span class="button"><a href="situation/">詳細情況</a></span></div></li> <li><div><img src="../images/situation01.jpg" alt=""><strong>洗手間位置</strong><p>旅遊目的地在很多地方都設有洗手間。洗手間配備有各種設施。</p><span class="button"><a href="situation/">詳細情況</a></span></div></li>
<li><div><img src="../images/situation02.jpg" alt=""><strong>洗手間指南</strong><p>在日本，表示洗手間的語言有很多。</p><span class="button"><a href="situation/#guide">詳情</a></span></div></li> <li><div><img src="../images/situation02.jpg" alt=""><strong>洗手間指南</strong><p>在日本，表示洗手間的語言有很多。</p><span class="button"><a href="sign/">詳情</a></span></div></li>
<li><div><img src="../images/situation03.jpg" alt=""><strong>洗手間種類和使用方法</strong><p>日本洗手間主要有和式洗手間、洋式洗手間、多功能洗手間三類。其使用方法也各不相同。</p><span class="button"><a href="type/">詳細情況</a></span></div></li> <li><div><img src="../images/situation03.jpg" alt=""><strong>洗手間種類和使用方法</strong><p>日本洗手間主要有和式洗手間、洋式洗手間、多功能洗手間三類。其使用方法也各不相同。</p><span class="button"><a href="type/">詳細情況</a></span></div></li>
<li><div><img src="../images/situation04.jpg" alt=""><strong>洗手間用具的使用方法</strong><p>根據抽水馬桶設備的不同，沖水的方法也各有不同。比如有上完廁所站起來就自動沖洗的馬桶。</p><span class="button"><a href="type/#use">詳細情況</a></span></div></li> <li><div><img src="../images/situation04.jpg" alt=""><strong>洗手間用具的使用方法</strong><p>根據抽水馬桶設備的不同，沖水的方法也各有不同。比如有上完廁所站起來就自動沖洗的馬桶。</p><span class="button"><a href="howtouse/">詳細情況</a></span></div></li>
</ul><div class="clear"></div> </ul><div class="clear"></div>
</div> </div>
</section> </section>
......
utsukushitoilet/cn_t/latest/02.html
<!DOCTYPE html> <!DOCTYPE html>
<html lang="ja" prefix="og: http://ogp.me/ns#"> <html lang="ja" prefix="og: http://ogp.me/ns#">
<head> <head>
<meta http-equiv="refresh" content="0;URL=/utsukushitoilet/cn_t/latest/">
<meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="keywords" content=""> <meta name="keywords" content="">
......
utsukushitoilet/cn_t/latest/css/style.css
...@@ -422,3 +422,11 @@ p, .second .block > p { ...@@ -422,3 +422,11 @@ p, .second .block > p {
} }
#_01,
#_02,
#_03,
#_04 {
padding-top: 5px;
margin-top: -5px;
}
utsukushitoilet/cn_t/latest/images/latest01_graph01.gif
utsukushitoilet/cn_t/latest/images/latest01_graph01.gif

12.8 KB | W: | H:

utsukushitoilet/cn_t/latest/images/latest01_graph01.gif

11.8 KB | W: | H:

utsukushitoilet/cn_t/latest/images/latest01_graph01.gif
utsukushitoilet/cn_t/latest/images/latest01_graph01.gif
utsukushitoilet/cn_t/latest/images/latest01_graph01.gif
utsukushitoilet/cn_t/latest/images/latest01_graph01.gif
  • 2-up
  • Swipe
  • Onion skin
utsukushitoilet/cn_t/latest/index.html
...@@ -31,10 +31,10 @@ $(document).ready(function(){ ...@@ -31,10 +31,10 @@ $(document).ready(function(){
</script> </script>
<!-- //google analytics --> <!-- //google analytics -->
</head> </head>
<body class="second"> <body class="second" id="latest">
<script type="text/javascript" > <script type="text/javascript" >
<!-- <!--
includeHead('div'); includeHead2('div');
//--> //-->
</script> </script>
<noscript> <noscript>
...@@ -48,9 +48,9 @@ includeHead('div'); ...@@ -48,9 +48,9 @@ includeHead('div');
</p> </p>
<ul> <ul>
<li><span>01</span><a href="./#_01">溫水洗淨便座</a></li> <li><span>01</span><a href="./#_01">溫水洗淨便座</a></li>
<li><span>02</span><a href="02.html#_02">水壓式坐便器</a></li> <li><span>02</span><a href="./#_02">水壓式坐便器</a></li>
<li><span>03</span><a href="02.html#_03">節水裝置</a></li> <li><span>03</span><a href="./#_03">節水裝置</a></li>
<li><span>04</span><a href="02.html#_04">放置嬰幼兒設備</a></li> <li><span>04</span><a href="./#_04">放置嬰幼兒設備</a></li>
</ul><div class="clear"></div> </ul><div class="clear"></div>
</div> </div>
</section> </section>
...@@ -66,8 +66,8 @@ includeHead('div'); ...@@ -66,8 +66,8 @@ includeHead('div');
</ul><div class="clear"></div> </ul><div class="clear"></div>
<div id="spread"> <div id="spread">
<div> <div>
<h3>日本普及率：77.5％（2015年數據）</h3> <h3>在日本的普及率：80.4%<small>(2019年3月現在)</small></h3>
<p>根據平成25年「內閣府消費動向調查」，家庭普及率約77.5％，基本和電腦（78.0%）的普及率一樣。</p> <p>根據日本内閣府的調査結果顯示世代普及率年年增加約為80%，比電腦的普及率更高。</p>
</div> </div>
<div><img src="./images/latest01_graph01.gif" alt=""></div> <div><img src="./images/latest01_graph01.gif" alt=""></div>
</div><div class="clear"></div> </div><div class="clear"></div>
...@@ -100,13 +100,61 @@ includeHead('div'); ...@@ -100,13 +100,61 @@ includeHead('div');
</div> </div>
</div> </div>
</section> </section>
<section id="_02">
<div class="block">
<h2 class="line"><span>02</span>水壓式坐便器</h2>
<p>根據近幾年趨勢，「水壓式馬桶」越來越有人氣。<br />
著重馬桶本身的設計、可追求自由開放的優雅空間感等，促使各公司爭相開發各具特色的水壓式馬桶。</p>
<ul>
<li><strong>品牌</strong><div>外觀</div><span>商品名</span></li>
<li><strong>asahi衛陶</strong><div><img src="../../latest/images/latest02_img01.jpg" alt=""></div><span>one-piece</span></li>
<li><strong>JANIS工業</strong><div><img src="../../latest/images/latest02_img02.jpg" alt=""></div><span>smartclean</span></li>
<li><strong>TOTO</strong><div><img src="../../latest/images/latest02_img03.jpg" alt=""></div><span>諾銳斯特・間</span></li>
<li><strong>松下</strong><div><img src="../../latest/images/latest02_img04.jpg" alt=""></div><span>A La Uno</span></li>
<li><strong>LIXIL</strong><div><img src="../../latest/images/latest02_img05.jpg" alt=""></div><span>Satis</span></li>
</ul><div class="clear"></div>
</div>
</section>
<section id="_03">
<div class="block">
<h2 class="line"><span>03</span>節水裝置</h2>
<h3>節水型馬桶</h3>
<p>日本洋式馬桶一次的洗淨用水量（大）在6升以下。而且沖水時水流沿著池壁呈漩渦狀，既達到節水目標，又有效清洗。</p>
<ul>
<li><img src="../../latest/images/latest03_img01.jpg" alt=""></li>
<li><img src="../../latest/images/latest03_img02.jpg" alt=""></li>
</ul><div class="clear"></div>
<ul id="small">
<li><h3>自動沖洗小便器</h3><p>考慮到兒童，設計了兒童容易接近，便池較低的小便器。</p></li>
<li><img src="../../latest/images/latest03_img03.jpg" alt=""></li>
</ul><div class="clear"></div>
<h3>洗手台（自動水龍頭，自動洗手液，烘手機）</h3>
<ul id="auto">
<li><img src="../../latest/images/latest03_img04.jpg" alt=""><p>基本都是自動出水裝置。</p></li>
<li><img src="../../latest/images/latest03_img05.jpg" alt=""><p>商業設施等地還會有自動洗手液。</p></li>
<li><img src="../../latest/images/latest03_img06.jpg" alt=""><p>配備有用風力吹走水滴的烘手機。</p></li>
</ul><div class="clear"></div>
</div>
</section>
<section id="_04">
<div class="block">
<h2 class="line"><span>04</span>放置嬰幼兒設備</h2>
<p>在商業設施、交通設施等地，嬰幼兒安全帶、嬰幼兒坐席等考慮到嬰幼兒的裝置，方便給嬰幼兒更換衣服時使用的躺板等裝置在不斷增加中。<br />
帶著孩子一起出遊的家庭也可以安心、放心地使用洗手間。</p>
<ul>
<li><img src="../../latest/images/latest04_img01.jpg" alt=""><p>給嬰幼兒更換尿布的地方</p></li>
<li><img src="../../latest/images/latest04_img02.jpg" alt=""><p>帶有嬰幼兒的人們在上廁所時，可安置嬰幼兒的座椅。</p></li>
<li><img src="../../latest/images/latest04_img03.jpg" alt=""><p>更換兒童衣服或紙尿布時使用的薄型板材。</p></li>
</ul><div class="clear"></div>
</div>
</section>
<section class="latest_menu foot_menu"> <section class="latest_menu foot_menu">
<div class="block"> <div class="block">
<ul> <ul>
<li><span>01</span><a href="./#_01">溫水洗淨便座</a></li> <li><span>01</span><a href="./#_01">溫水洗淨便座</a></li>
<li><span>02</span><a href="02.html#_02">水壓式坐便器</a></li> <li><span>02</span><a href="./#_02">水壓式坐便器</a></li>
<li><span>03</span><a href="02.html#_03">節水裝置</a></li> <li><span>03</span><a href="./#_03">節水裝置</a></li>
<li><span>04</span><a href="02.html#_04">放置嬰幼兒設備</a></li> <li><span>04</span><a href="./#_04">放置嬰幼兒設備</a></li>
</ul><div class="clear"></div> </ul><div class="clear"></div>
</div> </div>
</section> </section>
......
utsukushitoilet/cn_t/shared/js/common_parts.js
/* 2020.2.19 update */
function includeHead2(tag) {
document.write(
'<div class="overlay"><img src="/utsukushitoilet/shared/images/main_visual0_002.png" width="100%" height="auto" class="back_img"></div>\n'+
'<header class="pht">\n'+
'<div id="head_area" class="head_area">\n'+
'<'+tag+' class="title_area"><a href="/utsukushitoilet/cn_t/"><img src="/utsukushitoilet/shared/images/logo.svg" alt="JAPAN TOILET INFORMATION"><span class="logo_line"><img src="/utsukushitoilet/shared/images/logo_line.svg" alt="NIPPON UTSUKUSHI TOILET"></span></a></'+tag+'>\n'+
'<div class="lang_menu">\n'+
'<div id="lang">\n'+
'<select>\n'+
'<option value="">LANGUAGE</option>\n'+
'<option value="/utsukushitoilet/cn_t/" id="cn_t">CHINESE(Traditional)</option>\n'+
'<option value="/utsukushitoilet/cn_s/" id="cn_s">CHINESE(Simplified)</option>\n'+
'<option value="/utsukushitoilet/kr/" id="kr">KOREAN</option>\n'+
'<option value="/utsukushitoilet/en/" id="en">ENGLISH</option>\n'+
'<option value="/utsukushitoilet/" id="ja">JAPANESE</option>\n'+
'</select>\n'+
'</div>\n'+
'</div>\n'+
'</div>\n'+
'<nav>\n'+
'<div class="inner-toggle">\n'+
'<a href="" id="toggle_btn" class="toggle_btn">\n'+
'<div class="toggle"><span></span></div>\n'+
'</a>\n'+
'</div>\n'+
'<div id="toggle_menu" class="toggle_menu">\n'+
'<div class="inner-menu">\n'+
'<div class="menu_box">\n'+
'<div class="header_flxpc">\n'+
'<ul class="header_nav">\n'+
'<li>日本的洗手間情況</li>\n'+
'<li class="situation"><a href="/utsukushitoilet/cn_t/situation/">有洗手間的地方</a></li>\n'+
'<li class="sign"><a href="/utsukushitoilet/cn_t/sign/">洗手間指南</a></li>\n'+
'<li class="type"><a href="/utsukushitoilet/cn_t/type/">洗手間種類和使用方法</a></li>\n'+
'<li class="howtouse"><a href="/utsukushitoilet/cn_t/howtouse/">洗手間用具的使用方法</a></li>\n'+
'</ul>\n'+
'<div class="latest"><b>洗手間的資訊</b><a href="/utsukushitoilet/cn_t/latest/">日本最新的洗手間</a></div>\n'+
'</div>\n'+
'</div>\n'+
'<div class="search">\n'+
'<gcse:searchbox-only></gcse:searchbox-only>\n'+
'</div>\n'+
'</div>\n'+
'</div>\n'+
'</nav>\n'+
'</header>\n'
);
}
/* 共通 ページメニュー　ヘッダ */ /* 共通 ページメニュー　ヘッダ */
function includeHead(tag) { function includeHead(tag) {
document.write( document.write(
...@@ -53,25 +103,30 @@ document.write( ...@@ -53,25 +103,30 @@ document.write(
'</div>\n'+ '</div>\n'+
'<footer>\n'+ '<footer>\n'+
'<div id="footer_div1">\n'+ '<div id="footer_div1">\n'+
'<div id="footer_menu1">\n'+ '<div id="footer_menu1" class="list_wt">\n'+
'<strong>日本的洗手間情況</strong>\n'+ '<strong>日本的洗手間情況</strong>\n'+
'<ul>\n'+ '<ul>\n'+
' <li><a href="/utsukushitoilet/cn_t/situation/">洗手間位置</a></li>\n'+ ' <li><a href="/utsukushitoilet/cn_t/situation/">洗手間位置</a></li>\n'+
' <li><a href="/utsukushitoilet/cn_t/situation//#guide">洗手間指南</a></li>\n'+ ' <li><a href="/utsukushitoilet/cn_t/sign/">洗手間指南</a></li>\n'+
' <li><a href="/utsukushitoilet/cn_t/type/">洗手間種類和使用方法</a></li>\n'+ ' <li><a href="/utsukushitoilet/cn_t/type/">洗手間種類和使用方法</a></li>\n'+
' <li><a href="/utsukushitoilet/cn_t/type/#use">洗手間用具的使用方法</a></li>\n'+ ' <li><a href="/utsukushitoilet/cn_t/howtouse/">洗手間用具的使用方法</a></li>\n'+
'</ul>\n'+ '</ul>\n'+
'</div>\n'+ '</div>\n'+
'<div id="footer_menu2">\n'+ '<div id="footer_menu2" class="list_wt">\n'+
'<strong>日本最新的洗手間</strong>\n'+ '<strong>日本最新的洗手間</strong>\n'+
'<ul>\n'+ '<ul>\n'+
' <li><a href="/utsukushitoilet/cn_t/latest/#_01">溫水洗淨便座</a></li>\n'+ ' <li><a href="/utsukushitoilet/cn_t/latest/#_01">溫水洗淨便座</a></li>\n'+
' <li><a href="/utsukushitoilet/cn_t/latest/02.html#_02">水壓式坐便器</a></li>\n'+ ' <li><a href="/utsukushitoilet/cn_t/latest/#_02">水壓式坐便器</a></li>\n'+
' <li><a href="/utsukushitoilet/cn_t/latest/02.html#_03">節水裝置</a></li>\n'+ ' <li><a href="/utsukushitoilet/cn_t/latest/#_03">節水裝置</a></li>\n'+
' <li><a href="/utsukushitoilet/cn_t/latest/02.html#_04">放置嬰幼兒設備</a></li>\n'+ ' <li><a href="/utsukushitoilet/cn_t/latest/#_04">放置嬰幼兒設備</a></li>\n'+
'</ul>\n'+ '</ul>\n'+
'</div>\n'+ '</div>\n'+
'<div class="clear"></div>\n'+ '<div id="footer_banner">\n'+
'<ul>\n'+
' <li class="line"><a href="http://www.sanitary-net.com/" target="_blank"><img src="/utsukushitoilet/shared/images/bnr_toiletnavi.gif" alt="TOILET NAVIGATION"></a></li>\n'+
' <li class="line"><a href="http://www.mlit.go.jp/kankocho/" target="_blank"><img src="/utsukushitoilet/shared/images/bnr_kanko.gif" alt="Japan Tourism Agency"></a></li>\n'+
'</ul>\n'+
'</div><div class="clear"></div>\n'+
'</div>\n'+ '</div>\n'+
'<div id="copyright">\n'+ '<div id="copyright">\n'+
'Copyright &copy; 一般社団法人日本レストルーム工業会\n'+ 'Copyright &copy; 一般社団法人日本レストルーム工業会\n'+
......
utsukushitoilet/cn_t/sign/css/style.css 0 → 100644
@charset "UTF-8";
#facility ul {
padding: 50px 0;
}
#facility ul:after {
content: "";
display: block;
clear: both;
}
#facility li {
display: inline-block;
width: 16.6%;
float: left;
text-align: center;
}
#facility li div {
width: 99%;
}
#facility li strong {
display: block;
}
#facility li img {
width: 100%;
}
#cleaning {
border: solid 1px #ec6b55;
position: relative;
text-align: left;
padding: 20px;
background: url(/utsukushitoilet/situation/images/bg_cleaning.gif) no-repeat 94% center;
background-size: 224px auto;
margin-top: 50px;
margin-bottom: 50px;
}
#cleaning:after {
content: "";
display: block;
position: absolute;
z-index:-1;
top: 3px;
left: 3px;
right: -5px;
bottom: -5px;
border: 1px solid #dcdcdc;
}
#cleaning h2 {
font-size: 20px;
font-weight: bold;
}
#cleaning p {
width: 66%;
}
#guide h2 {
background-color: #7f7f7f;
color: #fff;
width: 110px;
margin-bottom: 0;
margin-top: 20px;
}
#guide .guide_eg {
border: solid 1px #ccc;
padding: 30px 10px 20px 10px;
margin-bottom: 20px;
position: relative;
}
#guide #letter li {
display: inline-block;
width: 17%;
padding-bottom: 20px;
}
#guide #letter li img {
max-width: 116px;
width: 100%;
}
#guide #letter li:before {
content: "-";
color: #ed638a;
font-weight: bold;
margin-right: 6px;
}
#guide ul#sign {
display: block;
height: 115px;
}
#guide #sign li {
display: block;
position: absolute;
background-color: #f4f4f4;
padding: 14px 0;
width: 106px;
border-radius: 5px;
}
#guide #sign li img {
width: 58%;
}
#guide #sign li:first-child {
left: 30px;
}
#guide #sign li:nth-child(2) {
left: 152px;
}
#guide #sign li:nth-child(3) {
width: 185px;
left: 274px;
height: 77px;
}
#guide #sign li:nth-child(3) img {
width: 95%;
margin-top: 12px;
}
#guide #sign li:nth-child(4) {
width: 272px;
left: 476px;
height: 77px;
background-color: #666;
}
#guide #sign li:nth-child(4) img {
width: 67%;
margin-top: 12px;
}
#guide #sign li:nth-child(5) {
left: 152px;
}
#guide #sign li:nth-child(6) {
left: 274px;
}
#guide #sign li:nth-child(7) {
left: 396px;
}
#guide #sign li:nth-child(8) {
left: 518px;
}
#guide #sign li:nth-child(9) {
left: 641px;
width: 186px;
}
#guide #sign li:nth-child(9) img {
width: 90%;
}
#guide #sign li:nth-child(10) {
right: 28px;
clear: both;
}
#guide ul#sign:after {
content: "";
display: block;
clear: both;
}
/* 0-640px ----*/
@media screen and (max-width:640px){
#facility li {
float: none;
display: block;
clear: both;
width: 92%;
margin: 1px auto;
}
#facility li:after {
content: "";
display: block;
clear: both;
}
#facility li strong {
position: absolute;
display: block;
text-shadow: 1px 1px 2px #fff;
}
#facility li img {
display: block;
width: 30%;
float: left;
margin-right: 1px;
}
#facility li img:first-child {
margin-left: 39%;
}
#cleaning {
background-position: center 95%;
width: 86%;
padding-bottom: 200px;
}
#cleaning p {
width: initial;
margin: 0 auto;
}
#guide h2 {
margin-left: 4%;
}
#guide .guide_eg {
margin-left: 4%;
margin-right: 4%;
}
#guide #letter li {
width: 48%;
}
#guide ul#sign {
height: inherit;
}
#guide #sign li {
position: inherit;
display: inline-block;
width: 42%;
margin-bottom: 12px;
pading: 4% 0;
}
#guide #sign li:nth-child(3), #guide #sign li:nth-child(4), #guide #sign li:nth-child(9) {
width: 85.2%;
height: auto;
}
#guide #sign li:nth-child(3) img, #guide #sign li:nth-child(4) img {
margin-top: 0;
}
#guide #sign li:nth-child(10) {
margin-left: 7.4%;
float: left;
}
}
utsukushitoilet/cn_t/sign/index.html 0 → 100644
<!DOCTYPE html>
<html lang="ja" prefix="og: http://ogp.me/ns#">
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta charset="UTF-8">
<meta name="keywords" content="">
<meta name="description" content="">
<title>洗手間指南 - NIPPON UTSUKUSHI TOILET</title>
<link rel="stylesheet" href="/utsukushitoilet/shared/css/reset.css" type="text/css" media="all">
<link rel="stylesheet" href="/utsukushitoilet/shared/css/common.css" type="text/css" media="all">
<link rel="stylesheet" href="css/style.css" type="text/css" media="all">
<script type="text/javascript" src="/utsukushitoilet/shared/js/jquery.js"></script>
<script type="text/javascript" src="/utsukushitoilet/shared/js/jquery.plugin.js"></script>
<script type="text/javascript" src="/utsukushitoilet/shared/js/common.js"></script>
<script type="text/javascript" src="../shared/js/common_parts.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#facility li strong").autoHeight();
});
</script>
<!-- google analytics -->
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-560401-9']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<!-- //google analytics -->
</head>
<body class="second" id="sign">
<script type="text/javascript" >
<!--
includeHead2('div');
//-->
</script>
<noscript>
<p>当サイトはJavaScriptをonにしてご覧ください。</p>
</noscript>
<section id="guide" class="first">
<div class="block">
<h1><span>日本的洗手間情況</span>洗手間指南</h1>
<p>在日本，表示洗手間的語言很多。有直接表示的，也有間接表示的。根據場所、TPO不同，表達方法也不一樣。<br />
比如在吃飯的時候，比起直接說「廁所」，用「洗手間」表達更優雅。為防止尷尬，請事先瞭解各種洗手間的圖案吧。<br />
表示洗手間的代表圖案</p>
<h2>文字</h2>
<div class="guide_eg">
<ul id="letter">
<li><img src="../../situation/images/letter01.gif" alt="お手洗い"></li>
<li><img src="../../situation/images/letter02.gif" alt="お手洗"></li>
<li><img src="../../situation/images/letter03.gif" alt="御手洗"></li>
<li><img src="../../situation/images/letter04.gif" alt="洗面所"></li>
<li><img src="../../situation/images/letter05.gif" alt="化粧室"></li>
<li><img src="../../situation/images/letter06.gif" alt="Toilet"></li>
<li><img src="../../situation/images/letter07.gif" alt="lavatory"></li>
<li><img src="../../situation/images/letter08.gif" alt="W.C"></li>
<li><img src="../../situation/images/letter09.gif" alt="RestRoom"></li>
<li><img src="../../situation/images/letter10.gif" alt="厠"></li>
</ul>
</div>
<h2>サイン</h2>
<div class="guide_eg">
<ul id="sign">
<li><img src="../../situation/images/sign01.gif" alt=""></li>
<li><img src="../../situation/images/sign02.gif" alt=""></li>
<li><img src="../../situation/images/sign03.gif" alt="TOILET"></li>
<li><img src="../../situation/images/sign04.gif" alt="化粧室"></li>
</ul>
</div>
</div>
</section>
<script type="text/javascript" >
<!--
includeFoot();
//-->
</script>
</body>
</html>
\ No newline at end of file
utsukushitoilet/cn_t/situation/index.html
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="keywords" content=""> <meta name="keywords" content="">
<meta name="description" content=""> <meta name="description" content="">
<title>有洗手間的地方・洗手間指南 - NIPPON UTSUKUSHI TOILET</title> <title>有洗手間的地方 - NIPPON UTSUKUSHI TOILET</title>
<link rel="stylesheet" href="/utsukushitoilet/shared/css/reset.css" type="text/css" media="all"> <link rel="stylesheet" href="/utsukushitoilet/shared/css/reset.css" type="text/css" media="all">
<link rel="stylesheet" href="/utsukushitoilet/shared/css/common.css" type="text/css" media="all"> <link rel="stylesheet" href="/utsukushitoilet/shared/css/common.css" type="text/css" media="all">
<link rel="stylesheet" href="css/style.css" type="text/css" media="all"> <link rel="stylesheet" href="css/style.css" type="text/css" media="all">
...@@ -31,10 +31,10 @@ $(document).ready(function(){ ...@@ -31,10 +31,10 @@ $(document).ready(function(){
</script> </script>
<!-- //google analytics --> <!-- //google analytics -->
</head> </head>
<body class="second"> <body class="second" id="situation">
<script type="text/javascript" > <script type="text/javascript" >
<!-- <!--
includeHead('div'); includeHead2('div');
//--> //-->
</script> </script>
<noscript> <noscript>
...@@ -69,38 +69,6 @@ includeHead('div'); ...@@ -69,38 +69,6 @@ includeHead('div');
如果您發現它了，請查看下一天內打掃檢查的次數吧。</p> 如果您發現它了，請查看下一天內打掃檢查的次數吧。</p>
</div> </div>
</section> </section>
<section id="guide">
<div class="block">
<h1><span>日本的洗手間情況</span>洗手間指南</h1>
<p>在日本，表示洗手間的語言很多。有直接表示的，也有間接表示的。根據場所、TPO不同，表達方法也不一樣。<br />
比如在吃飯的時候，比起直接說「廁所」，用「洗手間」表達更優雅。為防止尷尬，請事先瞭解各種洗手間的圖案吧。<br />
表示洗手間的代表圖案</p>
<h2>文字</h2>
<div class="guide_eg">
<ul id="letter">
<li><img src="../../situation/images/letter01.gif" alt="お手洗い"></li>
<li><img src="../../situation/images/letter02.gif" alt="お手洗"></li>
<li><img src="../../situation/images/letter03.gif" alt="御手洗"></li>
<li><img src="../../situation/images/letter04.gif" alt="洗面所"></li>
<li><img src="../../situation/images/letter05.gif" alt="化粧室"></li>
<li><img src="../../situation/images/letter06.gif" alt="Toilet"></li>
<li><img src="../../situation/images/letter07.gif" alt="lavatory"></li>
<li><img src="../../situation/images/letter08.gif" alt="W.C"></li>
<li><img src="../../situation/images/letter09.gif" alt="RestRoom"></li>
<li><img src="../../situation/images/letter10.gif" alt="厠"></li>
</ul>
</div>
<h2>サイン</h2>
<div class="guide_eg">
<ul id="sign">
<li><img src="../../situation/images/sign01.gif" alt=""></li>
<li><img src="../../situation/images/sign02.gif" alt=""></li>
<li><img src="../../situation/images/sign03.gif" alt="TOILET"></li>
<li><img src="../../situation/images/sign04.gif" alt="化粧室"></li>
</ul>
</div>
</div>
</section>
<script type="text/javascript" > <script type="text/javascript" >
<!-- <!--
includeFoot(); includeFoot();
......
utsukushitoilet/cn_t/type/css/style.css
...@@ -24,6 +24,9 @@ h3 { ...@@ -24,6 +24,9 @@ h3 {
font-weight: bold; font-weight: bold;
font-size: 20px; font-size: 20px;
} }
#kind{
margin-bottom: 70px;
}
#kind ul { #kind ul {
padding: 50px 0; padding: 50px 0;
} }
...@@ -195,3 +198,83 @@ h3 { ...@@ -195,3 +198,83 @@ h3 {
} }
#kind ul.toilet {
display: flex;
align-items: stretch;
justify-content: space-between;
padding: 20px 0;
}
#kind ul.toilet li {
display: block;
width: 48.4%;
float: none;
text-align: left;
margin-right: 0;
margin-left: 0;
background-color: #f7f6f2;
}
#kind ul.toilet li:nth-child(2) {
margin-right: 0;
}
#kind ul.toilet:after {
content: none;
}
#kind ul.toilet li h3 {
background-color: #fff;
text-align: center;
padding-bottom: 10px;
}
#kind ul.toilet li img {
width: 100%;
}
#kind ul.toilet li p {
padding: 20px;
margin-bottom: 10px;
}
#kind ul.toilet li div {
border-top: solid 1px #e1e0db;
margin: 0 auto;
width: 92%;
padding-bottom: 10px;
}
#kind ul.toilet li div img {
border: solid 1px #e1e0db;
display: block;
margin-bottom: 10px;
}
#kind ul#toilet li span {
display: block;
text-align: center;
font-weight: bold;
font-size: 14px;
padding: 10px 0;
}
@media screen and (max-width:640px){
#kind ul.toilet {
display: block;
}
#kind ul.toilet li {
float: none;
display: block;
clear: both;
width: 92%;
margin: 1px auto 20px auto;
}
#kind ul.toilet li:nth-child(2) {
margin-right: auto;
}
#kind ul.toilet li:after {
content: "";
display: block;
clear: both;
}
#kind ul.toilet li span {
padding: 6px;
font-size: inherit;
}
#kind ul.toilet li strong {
position: absolute;
display: block;
}
}
utsukushitoilet/cn_t/type/index.html
...@@ -33,10 +33,10 @@ $(document).ready(function(){ ...@@ -33,10 +33,10 @@ $(document).ready(function(){
</script> </script>
<!-- //google analytics --> <!-- //google analytics -->
</head> </head>
<body class="second"> <body class="second" id="type">
<script type="text/javascript" > <script type="text/javascript" >
<!-- <!--
includeHead('div'); includeHead2('div');
//--> //-->
</script> </script>
<noscript> <noscript>
...@@ -45,13 +45,21 @@ includeHead('div'); ...@@ -45,13 +45,21 @@ includeHead('div');
<section id="kind" class="first"> <section id="kind" class="first">
<div class="block"> <div class="block">
<h1><span>日本的洗手間情況</span>洗手間種類及使用方法</h1> <h1><span>日本的洗手間情況</span>洗手間種類及使用方法</h1>
<p>日本洗手間主要有和式洗手間，洋式洗手間，多功能洗手間三類。根據情況不同類型也會有所差異。<br /> <p>有和式、洋式和多功能三種型態的洗手間。<br>
本在旅遊景點多是和式洗手間，但根據遊客要求，洋式洗手間也持續增加中。 </p> 目前積極將和式形態改裝為方便使用的洋式型態。</p>
<h2 class="line"><span>01</span>交通設施・商業設施等的洗手間</h2> <h2 class="line"><span>01</span>公共洗手間</h2>
<ul id="toilet"> <ul class="toilet 01">
<li><h3>和式洗手間</h3><img src="../../type/images/type01_washiki01.jpg" alt=""><p>日本自古便使用跨式便器。公共洗手間內多設置這類和式便器。</p><div><span>使用方法</span><img src="./images/type01_washiki02.gif" alt=""></div></li> <li><h3>和式洗手間</h3><img src="../../type/images/type01_washiki01.jpg" alt=""><p>日本自古便使用跨式便器。公共洗手間內多設置這類和式便器。</p><div><span>使用方法</span><img src="./images/type01_washiki02.gif" alt=""></div></li>
<li><h3>洋式洗手間</h3><img src="../../type/images/type01_yoshiki01.jpg" alt=""><p>現在最普及的洗手間。</p><div><span>使用方法</span><img src="./images/type01_yoshiki02.gif" alt=""></div></li> <li><h3>洋式洗手間</h3><img src="../../type/images/type01_yoshiki01.jpg" alt=""><p>現在最普及的洗手間。</p><div><span>使用方法</span><img src="./images/type01_yoshiki02.gif" alt=""></div></li>
</ul>
<ul class="toilet 01">
<li><h3>多功能洗手間</h3><img src="../../type/images/type01_takino01.jpg" alt=""><p>為了殘障人士、人工膀胱持有者，帶嬰幼兒的人等可優先使用而設計的較寬敞的洗手間。當然老年人等一般人也可以使用。</p><div><span>表示多功能洗手間的圖案</span><img src="../../type/images/type01_takino02.gif" alt=""></div></li> <li><h3>多功能洗手間</h3><img src="../../type/images/type01_takino01.jpg" alt=""><p>為了殘障人士、人工膀胱持有者，帶嬰幼兒的人等可優先使用而設計的較寬敞的洗手間。當然老年人等一般人也可以使用。</p><div><span>表示多功能洗手間的圖案</span><img src="../../type/images/type01_takino02.gif" alt=""></div></li>
<li><h3>小便池</h3><img src="images/type01_urinal.jpg" alt=""><p>不需用手碰觸洗淨按鍵就會自動洗淨，十分舒適衛生。</p><div><span>沖水閥和自動洗淨的使用方法</span><img src="images/type01_urinal02.gif" alt=""></div></li>
</ul>
<ul class="toilet 01">
<li><h3>自動水龍頭</h3><img src="images/type01_autofaucet.jpg" alt=""><p>不需用手碰觸手龍頭，肥皂泡和水就會自動跑出，衛生舒適。</p><div><span>自動水龍頭和自動給皂機的使用方法</span><img src="images/type01_autofaucet02.gif" alt=""></div></li>
<li><h3>烘手機</h3><img src="images/type01_handdryer.jpg" alt=""><p>是洗完手後利用風吹乾方式的裝置。<br>將手靠近出風口自動出風。</p>
<div><span>簡易型和長型的使用方法</span><img src="images/type01_handdryer02.gif" alt=""></div></li>
</ul> </ul>
<h2 class="line"><span>02</span>賓館・客房內的洗手間</h2> <h2 class="line"><span>02</span>賓館・客房內的洗手間</h2>
<ul> <ul>
...@@ -62,65 +70,11 @@ includeHead('div'); ...@@ -62,65 +70,11 @@ includeHead('div');
<div class="point"> <div class="point">
<div> <div>
<h2><img src="/utsukushitoilet/shared/images/point.gif" alt="point!"></h2> <h2><img src="/utsukushitoilet/shared/images/point.gif" alt="point!"></h2>
<p>使用賓館浴室時的注意點<br /> <p><img src="/utsukushitoilet/type/images/point_img01.png" alt="">
賓館浴室一般配有淋浴器，但請在浴缸內使用。<br /> <span>&lt;利用飯店浴室時的注意事項&gt;</span>
同時，使用時請將浴室門關閉，不然會導致火警警報器誤判誤響。<br /> <span class="point_txt01">* 整體浴室內配有蓮蓬頭，但只限於浴缸內使用。</span>
淋浴時，請關好浴室門。配有防水簾的情況下，請拉好簾子，以防弄濕馬桶周邊。</p><div class="clear"></div> <span class="point_txt01">* 如果浴室裡附有防水浴帘的話，為了避免弄濕馬桶周圍，請拉起浴帘使用。</span>
</div> <span class="point_txt01">* 如果打開浴室的門來使用的話，容易誤引火災警報器，請務必關上浴室的門來使用。</span></p><div class="clear"></div>
</div>
</section>
<section id="use">
<div class="block">
<h1><span>日本洗手間情況</span>洗手間內器具的使用方法</h1>
<h2 class="line"><span>01</span>馬桶的沖水方法</h2>
<p class="left">根據抽水馬桶設備的不同，沖水的方法也各異。<br />
水箱式馬桶的話，沖水時請轉動水箱旁的手柄。公共洗手間或和式洗手間等沒有水箱的便器的話，沖洗時請拉下便器背面的手柄。<br />
其他還有使用設置在牆壁上的按鈕、手柄、非接觸型感應器(手遮）等沖洗方式，還有遙感控制的。最先進的馬桶則是，你使用完站起來變自動沖洗的智能馬桶。</p>
<h3>沖水手柄等的位置</h3>
<ul>
<li><img src="../../type/images/use01_img01.jpg" alt=""><p>轉 或者 擰 沖水手柄</p></li>
<li><img src="../../type/images/use01_img02.jpg" alt=""><p>將手柄往下拉</p></li>
<li><img src="../../type/images/use01_img03.jpg" alt=""><p>將手柄往下拉</p></li>
</ul><div class="clear"></div>
<ul>
<li><h3>冲水按钮</h3><img src="../../type/images/use01_img04.jpg" alt=""><p>往下按沖水按鈕</p></li>
<li><h3>沖水感應裝置</h3><img src="../../type/images/use01_img05.jpg" alt=""><p>將手放在感應處前方</p></li>
</ul><div class="clear"></div>
</div>
<div class="point">
<div>
<h2><img src="/utsukushitoilet/shared/images/point.gif" alt="point!"></h2>
<p>在日本，使用過的衛生紙請仍在馬桶中，隨排泄物一起沖走。<br />
※可以一起沖水的，僅限衛生紙・之前說過的可溶性紙巾。<br />
衛生巾或其他雜物，請仍在衛生間內的垃圾箱裡。<br />
離開前請確認有沒有垃圾遺漏，為了下一位使用者，請一定沖洗乾淨，保持清潔。</p><div class="clear"></div>
</div>
</div>
<div class="block">
<h2 class="line"><span>02</span>溫水洗淨便座的使用方法</h2>
<p class="left">使用溫水洗淨便座的時候，請操作坐馬桶側面的按鈕。<br />
如果側面沒有的話，請操作牆壁上的遙感按鈕。<br />
按鈕所表示的意思，如下所示。</p>
<h3>操作部的位置</h3>
<ul>
<li><img src="../../type/images/use02_img01.jpg" alt=""></li>
<li><img src="../../type/images/use02_img02.jpg" alt=""></li>
</ul><div class="clear"></div>
<h3>操作部插圖的意思</h3>
<ul id="operation">
<li><img src="../../type/images/use02_img03.gif" alt=""></li>
<li><img src="../../type/images/use02_img04.gif" alt=""></li>
<li><img src="../../type/images/use02_img05.gif" alt=""></li>
</ul><div class="clear"></div>
<h2 class="line"><span>03</span>遮音裝置</h2>
<div class="bisection">
<p>在日本，為了掩蓋上廁所時發出的聲音，一般設置有可發出流水聲的「遮音裝置」。有一進入隔間邊自動播音的裝置，也有用手遮下感應處，或按下按鈕播音的裝置。和沖水按鈕功能並不一樣，不要按錯了。</p>
<div><img src="./images/use03_img01.gif" alt=""></div><div class="clear"></div>
</div>
<h2 class="line"><span>04</span>緊急呼叫按鈕</h2>
<div class="bisection">
<p>沖洗按鈕的旁邊，一般有緊急呼叫按鈕。身體不舒服的緊急情況時用的按鈕，所以帶有「呼出」文字的按鈕，請注意在緊急情況外不要按。</p>
<div><img src="../../type/images/use04_img01.jpg" alt=""></div><div class="clear"></div>
</div> </div>
</div> </div>
</section> </section>
......
utsukushitoilet/css/style_191023.css 0 → 100644
@charset "UTF-8";
/* toppage */
#situation {
background: url(../images/main_visual.jpg) no-repeat center top;
padding-top: 490px;
margin-bottom: 50px;
}
#situation > div, #latest > div {
max-width: 980px;
width: 100%;
margin: 0 auto;
text-align: center;
}
#situation h2, #latest h2 {
font-size: 30px;
font-weight: bold;
display: inline-block;
}
#situation h2 {
border-bottom: solid 1px #e8392d;
}
#latest h2 {
border-bottom: solid 1px #fff;
color: #fff;
margin: 50px 0 10px 0;
}
#situation h2 + p, #latest h2 + p {
padding: 20px 0 30px 0;
}
#situation li {
display: block;
float: left;
width: 25%;
/*max-width: 218px;
margin-left: 36px;*/
position: relative;
}
#situation li div {
width: 90%;
margin: 0 auto;
}
#situation li .button {
display: block;
border: solid 2px #e9573e;
padding: 5px;
font-size: 12px;
}
#situation li .button a {
display: block;
color: #e9573e;
}
#situation li img {
width: 100%;
}
#situation li strong {
display: block;
text-align: center;
font-size: 20px;
padding: 16px 0 10px 0;
}
#situation li p {
text-align: left;
}
#latest h2 + p {
color: #fff;
}
#latest {
/*background: url(../images/bg_new.jpg) no-repeat center top;*/
min-height: 328px;
margin-bottom: 50px;
position: relative;
}
#latest div div a {
color: #fff;
display: block;
padding: 12px;
border: solid 2px #fff;
max-width: 330px;
margin: 0 auto;
}
#latest .bx-controls {
display: none;
}
#latest .latest {
position: absolute;
top: 0;
left: 0;
right: 0;
}
/* 0-640px ----*/
@media screen and (max-width:640px){
/* toppage */
#situation {
background-size: auto 213px;
padding-top: 240px;
margin-bottom: 50px;
}
#situation > div, #latest > div {
/*padding: 0 15px;*/
}
#situation h2 + p {
text-align: left;
border-bottom: solid 1px #ccc;
padding-bottom: 20px;
margin: 0 4% 20px 4%;
}
#situation ul {
margin: 0 3%;
}
#situation li {
width: 46%;
max-width: 275px;
margin: 0;
padding: 2%;
}
#situation li:first-child, #situation li:nth-child(2) {
border-bottom: solid 1px #ccc;
margin-bottom: 10px;
padding-bottom: 30px;
}
#situation li:first-child {
margin: 0;
}
#latest {
/*background-size: auto 300px;
background-position: center top;
padding-top: 340px;
margin-bottom: 0;*/
}
#latest h2, #latest h2 + p {
color: #000;
}
#latest h2 + p {
margin: 0 4%;
}
#latest h2 {
border-bottom: solid 1px #e8392d;
margin-top: 0;
}
#latest div div a {
color: #e9573e;
border: solid 2px #e9573e;
width: 80%;
margin: 0 auto;
}
#latest .bx-viewport {
margin-bottom: 20px;
}
#latest .latest {
position: relative;
}
#latest .bxslider li img {
width: 100%;
}
}
\ No newline at end of file
utsukushitoilet/css/style_200109.css 0 → 100644
@charset "UTF-8";
/* toppage */
#situation {
background: url(../images/main_visual.jpg) no-repeat center top;
padding-top: 490px;
margin-bottom: 50px;
}
#situation > div, #latest > div {
max-width: 980px;
width: 100%;
margin: 0 auto;
text-align: center;
}
#situation h2, #latest h2 {
font-size: 30px;
font-weight: bold;
display: inline-block;
}
#situation h2 {
border-bottom: solid 1px #e8392d;
}
#latest h2 {
border-bottom: solid 1px #fff;
color: #fff;
margin: 50px 0 10px 0;
}
#situation h2 + p, #latest h2 + p {
padding: 20px 0 30px 0;
}
#situation li {
display: block;
float: left;
width: 25%;
/*max-width: 218px;
margin-left: 36px;*/
position: relative;
}
#situation li div {
width: 90%;
margin: 0 auto;
}
#situation li .button {
display: block;
border: solid 2px #e9573e;
padding: 5px;
font-size: 12px;
}
#situation li .button a {
display: block;
color: #e9573e;
}
#situation li img {
width: 100%;
}
#situation li strong {
display: block;
text-align: center;
font-size: 20px;
padding: 16px 0 10px 0;
}
#situation li p {
text-align: left;
}
#latest h2 + p {
color: #fff;
}
#latest {
/*background: url(../images/bg_new.jpg) no-repeat center top;*/
min-height: 328px;
margin-bottom: 50px;
position: relative;
}
#latest div div a {
color: #fff;
display: block;
padding: 12px;
border: solid 2px #fff;
max-width: 330px;
margin: 0 auto;
}
#latest .bx-controls {
display: none;
}
#latest .latest {
position: absolute;
top: 0;
left: 0;
right: 0;
}
/* 0-640px ----*/
@media screen and (max-width:640px){
/* toppage */
#situation {
background-size: auto 213px;
padding-top: 240px;
margin-bottom: 50px;
}
#situation > div, #latest > div {
/*padding: 0 15px;*/
}
#situation h2 + p {
text-align: left;
border-bottom: solid 1px #ccc;
padding-bottom: 20px;
margin: 0 4% 20px 4%;
}
#situation ul {
margin: 0 3%;
}
#situation li {
width: 46%;
max-width: 275px;
margin: 0;
padding: 2%;
}
#situation li:first-child, #situation li:nth-child(2) {
border-bottom: solid 1px #ccc;
margin-bottom: 10px;
padding-bottom: 30px;
}
#situation li:first-child {
margin: 0;
}
#latest {
/*background-size: auto 300px;
background-position: center top;
padding-top: 340px;
margin-bottom: 0;*/
}
#latest h2, #latest h2 + p {
color: #000;
}
#latest h2 + p {
margin: 0 4%;
}
#latest h2 {
border-bottom: solid 1px #e8392d;
margin-top: 0;
}
#latest div div a {
color: #e9573e;
border: solid 2px #e9573e;
width: 80%;
margin: 0 auto;
}
#latest .bx-viewport {
margin-bottom: 20px;
}
#latest .latest {
position: relative;
}
#latest .bxslider li img {
width: 100%;
}
}
/* 2019.10.23 */
.showcase {
position: relative;
height: 640px;
background: url(../images/main_visual0.jpg) no-repeat top center;
background-size: cover;
}
.inner-showcase {
position: relative;
height: 100%;
}
.inner-showcase .menu_box {
position: absolute;
left: 0;
right: 0;
bottom: -5.5em;
margin: auto;
}
.inner-showcase .menu_box .header_nav,
.inner-showcase .menu_box .latest {
box-shadow: 0 0 1.5em 0 rgba(0,0,0,.3);
}
.inner-showcase .menu_box .manage a {
color: #e9573e;
}
.inner-showcase .menu_box .manage a::before {
background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%205%2010%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20fill%3D%22%23e9573e%22%20d%3D%22M5.000%2C5.000%20L-0.000%2C-0.000%20L-0.000%2C10.000%20L5.000%2C5.000%20Z%22%2F%3E%3C%2Fsvg%3E');
}
.inner-showcase .header_nav li:first-child {
padding: .2em 0;
background-color: #e9573e;
border: none;
border-bottom: solid 1px #ccc;
}
.inner-showcase .header_nav li {
border-color: #ccc;
}
.showcase_phrase {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.showcase_phrase img {
display: block;
width: 100%;
}
#situation {
padding-top: 0;
margin-top: 8em;
background: none;
}
@media screen and (max-width:640px){
.showcase {
height: 100vw;
}
.showcase_phrase {
width: 90%;
margin: auto;
}
#situation {
margin-top: 20vw;
}
}
utsukushitoilet/css/style_200131.css 0 → 100644
@charset "UTF-8";
/* toppage */
#situation {
background: url(../images/main_visual.jpg) no-repeat center top;
padding-top: 490px;
margin-bottom: 50px;
}
#situation > div, #latest > div {
max-width: 980px;
width: 100%;
margin: 0 auto;
text-align: center;
}
#situation h2, #latest h2 {
font-size: 30px;
font-weight: bold;
display: inline-block;
}
#situation h2 {
border-bottom: solid 1px #e8392d;
}
#latest h2 {
border-bottom: solid 1px #fff;
color: #fff;
margin: 50px 0 10px 0;
}
#situation h2 + p, #latest h2 + p {
padding: 20px 0 30px 0;
}
#situation li {
display: block;
float: left;
width: 25%;
/*max-width: 218px;
margin-left: 36px;*/
position: relative;
}
#situation li div {
width: 90%;
margin: 0 auto;
}
#situation li .button {
display: block;
border: solid 2px #e9573e;
padding: 5px;
font-size: 12px;
}
#situation li .button a {
display: block;
color: #e9573e;
}
#situation li img {
width: 100%;
}
#situation li strong {
display: block;
text-align: center;
font-size: 20px;
padding: 16px 0 10px 0;
}
#situation li p {
text-align: left;
}
#latest h2 + p {
color: #fff;
}
#latest {
/*background: url(../images/bg_new.jpg) no-repeat center top;*/
min-height: 328px;
margin-bottom: 50px;
position: relative;
}
#latest div div a {
color: #fff;
display: block;
padding: 12px;
border: solid 2px #fff;
max-width: 330px;
margin: 0 auto;
}
#latest .bx-controls {
display: none;
}
#latest .latest {
position: absolute;
top: 0;
left: 0;
right: 0;
}
/* 0-640px ----*/
@media screen and (max-width:640px){
/* toppage */
#situation {
background-size: auto 213px;
padding-top: 240px;
margin-bottom: 50px;
}
#situation > div, #latest > div {
/*padding: 0 15px;*/
}
#situation h2 + p {
text-align: left;
border-bottom: solid 1px #ccc;
padding-bottom: 20px;
margin: 0 4% 20px 4%;
}
#situation ul {
margin: 0 3%;
}
#situation li {
width: 46%;
max-width: 275px;
margin: 0;
padding: 2%;
}
#situation li:first-child, #situation li:nth-child(2) {
border-bottom: solid 1px #ccc;
margin-bottom: 10px;
padding-bottom: 30px;
}
#situation li:first-child {
margin: 0;
}
#latest {
/*background-size: auto 300px;
background-position: center top;
padding-top: 340px;
margin-bottom: 0;*/
}
#latest h2, #latest h2 + p {
color: #000;
}
#latest h2 + p {
margin: 0 4%;
}
#latest h2 {
border-bottom: solid 1px #e8392d;
margin-top: 0;
}
#latest div div a {
color: #e9573e;
border: solid 2px #e9573e;
width: 80%;
margin: 0 auto;
}
#latest .bx-viewport {
margin-bottom: 20px;
}
#latest .latest {
position: relative;
}
#latest .bxslider li img {
width: 100%;
}
}
/* 2019.10.23 */
.showcase {
position: relative;
height: 640px;
background: url(../images/main_visual0.jpg) no-repeat top center;
background-size: cover;
}
.inner-showcase {
position: relative;
height: 100%;
}
.inner-showcase .menu_box {
position: absolute;
left: 0;
right: 0;
bottom: -5.5em;
margin: auto;
}
.inner-showcase .menu_box .header_nav,
.inner-showcase .menu_box .latest {
box-shadow: 0 0 1.5em 0 rgba(0,0,0,.3);
}
.inner-showcase .menu_box .manage a {
color: #e9573e;
}
.inner-showcase .menu_box .manage a::before {
background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%205%2010%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20fill%3D%22%23e9573e%22%20d%3D%22M5.000%2C5.000%20L-0.000%2C-0.000%20L-0.000%2C10.000%20L5.000%2C5.000%20Z%22%2F%3E%3C%2Fsvg%3E');
}
.inner-showcase .header_nav li:first-child {
padding: .2em 0;
background-color: #e9573e;
border: none;
border-bottom: solid 1px #ccc;
}
.inner-showcase .header_nav li {
border-color: #ccc;
}
.showcase_phrase {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.showcase_phrase img {
display: block;
width: 100%;
}
#situation {
padding-top: 0;
margin-top: 8em;
background: none;
}
@media screen and (max-width:640px){
.showcase {
height: 100vw;
}
.showcase_phrase {
width: 90%;
margin: auto;
}
#situation {
margin-top: 20vw;
}
}
/* 2020.1.9 */
#owner > div {
max-width: 980px;
width: 100%;
margin: 0 auto;
text-align: center;
}
#owner h2 {
margin-bottom: 30px;
font-size: 30px;
font-weight: bold;
display: inline-block;
border-bottom: solid 1px #e8392d;
line-height: 1.2em;
}
.owner_menu {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 3em;
}
.owner_menu li {
display: block;
width: 23.8%;
margin: 0 1em;
position: relative;
line-height: 1.4;
}
.owner_menu li a {
display: block;
padding: 8px;
border: solid 2px #f5b5aa;
text-align: center;
font-weight: bold;
color: #e9573e;
}
.owner_menu li p {
margin-top: 1em;
text-align: left;
}
.inner-showcase .menu_box .latest b {
display: block;
padding: .2em 0;
background-color: #e9573e;
border: none;
border-bottom: solid 1px #ccc;
text-align: center;
font-size: 14px;
color: #fff;
}
.header_flxpc .latest a {
padding: 2.532em 4em 2.532em 6em;
}
.inner-showcase .menu_box .manage a {
padding: 0 0 0 .71em;
background-color: #e9573e;
color: #fff;
}
.inner-showcase .menu_box .manage a::before {
content: none;
}
.inner-showcase .menu_box .manage a::after {
content: "";
display: inline-block;
width: .6em;
height: .6em;
margin-left: .2em;
margin-right: .5em;
background: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%205%2010%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20fill%3D%22%23fff%22%20d%3D%22M5.000%2C5.000%20L-0.000%2C-0.000%20L-0.000%2C10.000%20L5.000%2C5.000%20Z%22%2F%3E%3C%2Fsvg%3E') no-repeat center;
background-size: contain;
}
@media screen and (max-width:640px){
.inner-showcase .menu_box .latest b {
font-size: 2.5vw;
}
.header_flxpc .latest a {
padding: 1em 0 1em 3.5em;
}
}
utsukushitoilet/en/css/style.css
...@@ -158,3 +158,169 @@ ...@@ -158,3 +158,169 @@
} }
} }
/* 2020.2.19 update */
.showcase {
position: relative;
height: 640px;
background: url(/utsukushitoilet/images/main_visual0.jpg) no-repeat top center;
background-size: cover;
}
.inner-showcase {
position: relative;
height: 100%;
}
.inner-showcase .menu_box {
position: absolute;
left: 0;
right: 0;
bottom: -2.5em;
margin: auto;
}
.inner-showcase .menu_box .header_nav,
.inner-showcase .menu_box .latest {
box-shadow: 0 0 1.5em 0 rgba(0,0,0,.3);
}
.inner-showcase .menu_box .manage a {
color: #e9573e;
}
.inner-showcase .menu_box .manage a::before {
background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%205%2010%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20fill%3D%22%23e9573e%22%20d%3D%22M5.000%2C5.000%20L-0.000%2C-0.000%20L-0.000%2C10.000%20L5.000%2C5.000%20Z%22%2F%3E%3C%2Fsvg%3E');
}
.inner-showcase .header_nav li:first-child {
padding: .2em 0;
background-color: #e9573e;
border: none;
border-bottom: solid 1px #ccc;
}
.inner-showcase .header_nav li {
border-color: #ccc;
}
.showcase_phrase {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.showcase_phrase img {
display: block;
width: 100%;
}
#situation {
padding-top: 0;
margin-top: 8em;
background: none;
}
@media screen and (max-width:640px){
.showcase {
height: 100vw;
}
.showcase_phrase {
width: 90%;
margin: auto;
}
#situation {
margin-top: 20vw;
}
}
#owner > div {
max-width: 980px;
width: 100%;
margin: 0 auto;
text-align: center;
}
#owner h2 {
margin-bottom: 30px;
font-size: 30px;
font-weight: bold;
display: inline-block;
border-bottom: solid 1px #e8392d;
line-height: 1.2em;
}
.owner_menu {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 3em;
}
.owner_menu li {
display: block;
width: 23.8%;
margin: 0 1em;
position: relative;
line-height: 1.4;
}
.owner_menu li a {
display: block;
padding: 8px;
border: solid 2px #f5b5aa;
text-align: center;
font-weight: bold;
color: #e9573e;
}
.owner_menu li p {
margin-top: 1em;
text-align: left;
}
.inner-showcase .menu_box .latest b {
display: block;
padding: .2em 0;
background-color: #e9573e;
border: none;
border-bottom: solid 1px #ccc;
text-align: center;
font-size: 14px;
color: #fff;
}
.header_flxpc .latest a {
padding: 2.532em 4em 2.532em 6em;
}
.inner-showcase .menu_box .manage a {
padding: 0 0 0 .71em;
background-color: #e9573e;
color: #fff;
}
.inner-showcase .menu_box .manage a::before {
content: none;
}
.inner-showcase .menu_box .manage a::after {
content: "";
display: inline-block;
width: .6em;
height: .6em;
margin-left: .2em;
margin-right: .5em;
background: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%205%2010%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20fill%3D%22%23fff%22%20d%3D%22M5.000%2C5.000%20L-0.000%2C-0.000%20L-0.000%2C10.000%20L5.000%2C5.000%20Z%22%2F%3E%3C%2Fsvg%3E') no-repeat center;
background-size: contain;
}
br.sp{
display: none;
}
@media screen and (max-width:640px){
.inner-showcase .menu_box .latest b {
font-size: 2.5vw;
}
.header_flxpc .latest a {
padding: 1em 0 1em 3.5em;
}
.owner_menu li {
display: block;
width: 100%;
margin: 0 1em;
position: relative;
line-height: 1.4;
}
br.sp{
display: block;
}
}
utsukushitoilet/en/howtouse/css/style.css 0 → 100644
@charset "UTF-8";
h2.line {
border-top: solid 1px #ccc;
border-bottom: solid 1px #ccc;
font-size: 24px;
font-weight: bold;
padding: 36px 0;
position: relative;
margin-top: 60px;
line-height: 1.4;
clear: both;
}
h2.line span {
color: #e9573e;
font-weight: normal;
font-size: 40px;
position: absolute;
left: 0;
right: 0;
top: -32px;
}
h3 {
font-weight: bold;
font-size: 20px;
}
#kind ul {
padding: 50px 0;
}
#kind ul:after {
content: "";
display: block;
clear: both;
}
#kind li {
display: block;
width: 31.3%;
float: left;
text-align: left;
margin-left: 3%;
background-color: #f7f6f2;
}
#kind li:first-child {
margin-left: 0;
}
#kind li h3 {
background-color: #fff;
text-align: center;
padding-bottom: 10px;
}
#kind li img {
width: 100%;
}
#kind li p {
padding: 20px;
margin-bottom: 10px;
}
#kind li div {
border-top: solid 1px #e1e0db;
margin: 0 auto;
width: 92%;
padding-bottom: 10px;
}
#kind li div img {
border: solid 1px #e1e0db;
display: block;
margin-bottom: 10px;
}
#kind li span {
display: block;
text-align: center;
font-weight: bold;
font-size: 14px;
}
#use .left {
text-align: left;
padding: 40px 0;
}
#use h3 {
text-align: left;
padding-bottom: 10px;
}
#use ul {
margin-bottom: 20px;
}
#use li {
display: block;
width: 31.3%;
float: left;
text-align: left;
margin-left: 3%;
margin-bottom: 40px;
}
#use li:first-child {
margin-left: 0;
}
#use li img {
width: 100%;
}
#operation img {
border: solid 1px #ccc;
}
.bisection {
margin-top: 40px;
margin-bottom: 100px;
}
.bisection02 {
margin-top: 40px;
margin-bottom: 40px;
}
.bisection:after {
content: "";
display: block;
clear: both;
}
.bisection p,
.bisection .lft {
float: left;
width: 48%;
text-align: left;
}
.bisection div {
float: right;
width: 50%;
}
.bisection div img {
width: 100%;
max-width: 472px;
border: solid 1px #ccc;
}
/* 0-640px ----*/
@media screen and (max-width:640px){
h2.line {
margin-left: 4%;
margin-right: 4%;
}
#kind li {
float: none;
display: block;
clear: both;
width: 92%;
margin: 1px auto 20px auto;
}
#kind li:first-child {
margin-left: auto;
}
#kind li:after {
content: "";
display: block;
clear: both;
}
#kind li span {
padding: 6px;
font-size: inherit;
}
#kind li strong {
position: absolute;
display: block;
}
#use h3 {
margin: 0 4%;
}
#use li {
float: none;
display: block;
clear: both;
width: 92%;
margin: 1px auto 30px auto;
}
#use li p {
margin: 10px 0;
}
#use li:first-child {
margin-left: auto;
}
#use li h3 {
margin: 0;
}
.bisection {
margin: 0 4%;
}
.bisection p,
.bisection .lft {
float: none;
width: inherit;
padding: 20px 0;
margin-bottom: 0;
}
.bisection div {
float: none;
width: inherit;
margin-bottom: 40px;
}
.bisection div img {
max-width: 578px;
}
}
#use .box{
overflow: hidden;
}
#use .left{
padding: 0;
text-align: left;
}
#use .left02{
text-align: left;
padding: 40px 0;
width: 76%;
float: left;
}
#use .right {
text-align: left;
padding: 40px 0;
margin-top: 40px;
margin-left: auto;
width: 18%;
padding: 10px;
border: 1px solid #e1e0db;
text-align: center;
}
#use .right span{
display: block;
margin-top: 10px;
}
@media screen and (max-width:640px){
#use .left02{
width: 92%;
float: none;
margin: auto;
}
#use .left.01{
width: 100%;
float: none;
}
#use .right{
width: 90%;
margin: auto;
margin-top: 0;
margin-bottom: 40px;
}
}
#kind ul#toilet li {
display: block;
width: 48.4%;
float: left;
text-align: left;
margin-right: 3%;
margin-left: 0;
background-color: #f7f6f2;
}
#kind ul#toilet li:nth-child(2) {
margin-right: 0;
}
#kind ul#toilet li h3 {
background-color: #fff;
text-align: center;
padding-bottom: 10px;
}
#kind ul#toilet li img {
width: 100%;
}
#kind ul#toilet li p {
padding: 20px;
margin-bottom: 10px;
}
#kind ul#toilet li div {
border-top: solid 1px #e1e0db;
margin: 0 auto;
width: 92%;
padding-bottom: 10px;
}
#kind ul#toilet li div img {
border: solid 1px #e1e0db;
display: block;
margin-bottom: 10px;
}
#kind ul#toilet li span {
display: block;
text-align: center;
font-weight: bold;
font-size: 14px;
padding: 10px 0;
}
@media screen and (max-width:640px){
#kind ul#toilet li {
float: none;
display: block;
clear: both;
width: 92%;
margin: 1px auto 20px auto;
}
#kind ul#toilet li:nth-child(2) {
margin-right: auto;
}
#kind ul#toilet li:after {
content: "";
display: block;
clear: both;
}
#kind ul#toilet li span {
padding: 6px;
font-size: inherit;
}
#kind ul#toilet li strong {
position: absolute;
display: block;
}
}
/* 20200109updata */
#use span.point_txt01{
display: block;
padding-left: 1em;
text-indent: -1em;
}
#use .txt_list {
list-style: disc;
margin-bottom: 0;
}
#use .txt_list li {
display: list-item;
width: auto;
margin: 0 0 0 1.2em;
float: none;
}
utsukushitoilet/en/howtouse/index.html 0 → 100644
<!DOCTYPE html>
<html lang="ja" prefix="og: http://ogp.me/ns#">
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta charset="UTF-8">
<meta name="keywords" content="">
<meta name="description" content="">
<title>Using the Toilet Utilities:Japan's Toilet Situation - NIPPON UTSUKUSHI TOILET</title>
<link rel="stylesheet" href="/utsukushitoilet/shared/css/reset.css" type="text/css" media="all">
<link rel="stylesheet" href="/utsukushitoilet/shared/css/common.css" type="text/css" media="all">
<link rel="stylesheet" href="css/style.css" type="text/css" media="all">
<script type="text/javascript" src="/utsukushitoilet/shared/js/jquery.js"></script>
<script type="text/javascript" src="/utsukushitoilet/shared/js/jquery.plugin.js"></script>
<script type="text/javascript" src="/utsukushitoilet/shared/js/common.js"></script>
<script type="text/javascript" src="/utsukushitoilet/en/shared/js/common_parts.js"></script>
<script type="text/javascript">
$(document).ready(function(){
if ($(window).width() > 640) {
$("#toilet li").autoHeight();
}
});
</script>
<!-- google analytics -->
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-560401-9']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<!-- //google analytics -->
</head>
<body class="second" id="howtouse">
<script type="text/javascript" >
<!--
includeHead2('div');
//-->
</script>
<noscript>
<p>Please enable Javascript to view this site.</p>
</noscript>
<section id="use" class="first">
<div class="block">
<h1><span>Japan's Toilet Situation</span>Using the Toilet Utilities</h1>
<p>The toilets in Japan have many functions.<br>
We will explain the following here, "Flushing the Toilet", "Using the Spray seat", "Flushing Sound Device", and "Emergency Call Button".</p>
<h2 class="line"><span>01</span>How to Flush the Toilet</h2>
<div class="box"><div class="left02">
Flushing the toilet will differ according to what type of toilet is installed.
<ul class="txt_list">
<li>For the Tank Type: Turning the lever on the side of the tank will flush.</li>
<li>For the Tank-less Toilet: Pressing the lever will flush.</li>
<li>Other Types: Flush button on wall, non-contact type flushing (holding your hand over the sensor), and flush button on a remote control.</li>
</ul>
Some of the newest toilets will automatically flush when you get up off the toilet seat.
</div>
<p class="right"><img src="/utsukushitoilet/howtouse/images/3609.gif" alt=""><span>This mark indicates the flushing switch.</span></p>
</div>
<h3>Location of lever handles, etc.</h3>
<ul>
<li><img src="/utsukushitoilet/howtouse/images/use01_img01.jpg" alt=""><p>Turn lever handle</p></li>
<li><img src="/utsukushitoilet/howtouse/images/use01_img02.jpg" alt=""><p>Press lever to lower it</p></li>
<li><img src="/utsukushitoilet/howtouse/images/use01_img03.jpg" alt=""><p>Press lever to lower it</p></li>
</ul><div class="clear"></div>
<ul>
<li><h3>Button</h3><img src="/utsukushitoilet/howtouse/images/use01_img04.jpg" alt=""><p>Press button</p></li>
<li><h3>Remote control</h3><img src="/utsukushitoilet/howtouse/images/use01_img06.jpg" alt=""><p>Press the button on the remote control of the Spray seat</p></li>
<li><h3>Sensor</h3><img src="/utsukushitoilet/howtouse/images/use01_img05.jpg" alt=""><p>Hover hand over sensor</p></li>
</ul><div class="clear"></div>
</div>
<div class="point">
<div>
<h2><img src="/utsukushitoilet/shared/images/point.gif" alt="point!"></h2>
<div class="box"><img src="/utsukushitoilet/howtouse/images/point_img01.png" alt="">
<ul class="txt_list">
<li>Please make sure to flush the toilet after use in consideration of the next person.</li>
<li>When using toilets in Japan, leave toilet paper in the toilet bowl and flush the toilet after use.<br>
* Papers that can be flushed down the toilet are only toilet paper and other paper that can be flushed.<br>
* Please dispose of sanitary napkins and tampons in the wastebasket installed on the side of the toilet.</li>
</ul>
</div><div class="clear"></div>
</div>
</div>
<div class="block">
<h2 class="line"><span>02</span>How to Use the Spray seat</h2>
<p class="left bisection02">When using the spray seat, the operation buttons located on the side of the toilet is used for operations.<br />
Additionally, if there are no operation buttons on the side, there will be a remote control located on the wall.<br />
The meanings of the buttons are as follows.</p>
<h3>Location of Operation Areas</h3>
<ul>
<li><img src="/utsukushitoilet/howtouse/images/use02_img01.jpg" alt=""></li>
<li><img src="/utsukushitoilet/howtouse/images/use02_img02.jpg" alt=""></li>
</ul><div class="clear"></div>
<h3>Meaning of Operation Area Illustrations</h3>
<ul id="operation">
<li><img src="/utsukushitoilet/howtouse/images/use02_img03.gif" alt=""></li>
<li><img src="/utsukushitoilet/howtouse/images/use02_img04.gif" alt=""></li>
<li><img src="/utsukushitoilet/howtouse/images/use02_img05.gif" alt=""></li>
</ul><div class="clear"></div>
<h2 class="line"><span>03</span>Toilet Sound Effects Device</h2>
<div class="bisection">
<div class="lft">Some public toilets in Japan may be equipped with "Flushing Sound Devices" that provide the sound of running water to mask body function sounds. <br>
The operation of each according to the type is as follows. The cover sound will play for a set period of time then automatically turn off.
<ul class="txt_list">
<li>Sensor Type: Placing your hand over the sensor will turn on the sound.</li>
<li>Button Type: Pressing the button will start the sound.</li>
<li>Automatic Type: When the toilet is entered, it will sense the presence of a person and automatically turn on the sound.</li>
</ul>
</div>
<div><img src="./images/use03_img01.gif" alt=""></div><div class="clear"></div>
</div>
<h2 class="line"><span>04</span>Emergency Call Button</h2>
<div class="bisection">
<p>An Emergency Call Button similar to the photo may be found near the flush button.
If you press this button when you are feeling ill inside the toilet, some will come to your aid. Please take care not to press this button unless it is an emergency.</p>
<div><img src="/utsukushitoilet/howtouse/images/use04_img01.jpg" alt=""></div><div class="clear"></div>
</div>
</div>
</section>
<script type="text/javascript" >
<!--
includeFoot();
//-->
</script>
</body>
</html>
\ No newline at end of file
utsukushitoilet/en/index.html
...@@ -5,9 +5,9 @@ ...@@ -5,9 +5,9 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="keywords" content=""> <meta name="keywords" content="">
<meta name="description" content=""> <meta name="description" content="">
<title>Japan’s Toilet Situation NIPPON UTSUKUSHI TOILET</title> <title>Japan's Toilet Situation NIPPON UTSUKUSHI TOILET</title>
<link rel="stylesheet" href="/utsukushitoilet/shared/css/reset.css" type="text/css" media="all"> <link rel="stylesheet" href="/utsukushitoilet/shared/css/reset.css" type="text/css" media="all">
<link rel="stylesheet" href="/utsukushitoilet/en/shared/css/common.css" type="text/css" media="all"> <link rel="stylesheet" href="/utsukushitoilet/shared/css/common.css" type="text/css" media="all">
<link rel="stylesheet" href="css/style.css" type="text/css" media="all"> <link rel="stylesheet" href="css/style.css" type="text/css" media="all">
<script type="text/javascript" src="/utsukushitoilet/shared/js/jquery.js"></script> <script type="text/javascript" src="/utsukushitoilet/shared/js/jquery.js"></script>
<script type="text/javascript" src="/utsukushitoilet/shared/js/jquery.plugin.js"></script> <script type="text/javascript" src="/utsukushitoilet/shared/js/jquery.plugin.js"></script>
...@@ -47,23 +47,47 @@ $(document).ready(function(){ ...@@ -47,23 +47,47 @@ $(document).ready(function(){
<body id="top"> <body id="top">
<script type="text/javascript" > <script type="text/javascript" >
<!-- <!--
includeHead('h1'); includeHead2('h1');
//--> //-->
</script> </script>
<noscript> <noscript>
<p>当サイトはJavaScriptをonにしてご覧ください。</p> <p>Please enable Javascript to view this site.</p>
</noscript> </noscript>
<div class="showcase">
<div class="inner-showcase">
<div class="showcase_phrase">
<img src="/utsukushitoilet/images/mv_phrase.svg" alt="Welcome to Japan Toilet">
</div>
<div class="menu_box">
<div class="header_flxpc">
<ul class="header_nav">
<li>Japan's Toilet Situation</li>
<li class="situation"><a href="/utsukushitoilet/en/situation/">Toilet Installation Locations</a></li>
<li class="sign"><a href="/utsukushitoilet/en/sign/">Toilet Guide Signs</a></li>
<li class="type"><a href="/utsukushitoilet/en/type/">Types of Toilets and Usage</a></li>
<li class="howtouse"><a href="/utsukushitoilet/en/howtouse/">Using the Toilet Utilities</a></li>
</ul>
<div class="latest">
<b>Restroom Information</b>
<a href="/utsukushitoilet/en/latest/">Japan's Latest Toilets</a>
</div>
</div>
</div>
</div>
</div>
<section id="situation"> <section id="situation">
<div> <div>
<h2>Japan’s Toilet Situation </h2> <h2>Japan's Toilet Situation</h2>
<p>One problem you may encounter while travelling is the toilet.<br /> <p>Welcome to Japan!!<br>
Most of Japan’s toilets are kept clean so that people can use them comfortably.<br /> Have you ever had trouble regarding restrooms during your travels?<br>
In addition, basically toilet paper is installed so that everyone can use them for free.</p> The majorities of restrooms in Japan are kept clean to allow you to use them in comfort and basically are free.<br>
This site summarizes information regarding restrooms in Japan.<br>
Along with your travels in Japan, please experience the comfortable restrooms of Japan!</p>
<ul> <ul>
<li><div><img src="/utsukushitoilet/images/situation01.jpg" alt=""><strong>Toilet Installation Locations</strong><p>Toilets can be found in various locations where you visit. The hospitable toilets are adapted to the various facilities.</p><span class="button"><a href="situation/">See details</a></span></div></li> <li><div><img src="/utsukushitoilet/images/situation01.jpg" alt=""><strong>Toilet Installation Locations</strong><p>Toilets can be found in various locations where you visit. The hospitable toilets are adapted to the various facilities.</p><span class="button"><a href="situation/">See details</a></span></div></li>
<li><div><img src="/utsukushitoilet/images/situation02.jpg" alt=""><strong>Toilet Navigation Signs</strong><p>In Japan, there are many expressions that represent the toilet. </p><span class="button"><a href="situation/#guide">See details</a></span></div></li> <li><div><img src="/utsukushitoilet/images/situation02.jpg" alt=""><strong>Toilet Navigation Signs</strong><p>In Japan, there are many expressions that represent the toilet. </p><span class="button"><a href="sign/">See details</a></span></div></li>
<li><div><img src="/utsukushitoilet/images/situation03.jpg" alt=""><strong>Types of Toilets and Usage</strong><p>Most of toilets in Japan are the following three types, the Japanese-style toilets, Western-style toilets, and multi-function toilets. How they are used will differ according to the type.</p><span class="button"><a href="type/">See details</a></span></div></li> <li><div><img src="/utsukushitoilet/images/situation03.jpg" alt=""><strong>Types of Toilets and Usage</strong><p>Most of toilets in Japan are the following three types, the Japanese-style toilets, Western-style toilets, and multi-function toilets. How they are used will differ according to the type.</p><span class="button"><a href="type/">See details</a></span></div></li>
<li><div><img src="/utsukushitoilet/images/situation04.jpg" alt=""><strong>Using the Toilet Utilities</strong><p>Depending on what kind of toilet is installed, the way to flush will differ. There are also some that will automatically flush after getting up after sitting on the toilet.</p><span class="button"><a href="type/#use">See details</a></span></div></li> <li><div><img src="/utsukushitoilet/images/situation04.jpg" alt=""><strong>Using the Toilet Utilities</strong><p>Depending on what kind of toilet is installed, the way to flush will differ. There are also some that will automatically flush after getting up after sitting on the toilet.</p><span class="button"><a href="howtouse/">See details</a></span></div></li>
</ul><div class="clear"></div> </ul><div class="clear"></div>
</div> </div>
</section> </section>
...@@ -76,7 +100,7 @@ In addition, basically toilet paper is installed so that everyone can use them f ...@@ -76,7 +100,7 @@ In addition, basically toilet paper is installed so that everyone can use them f
<li><img src="/utsukushitoilet/images/slide05.jpg" /></li> <li><img src="/utsukushitoilet/images/slide05.jpg" /></li>
</ul> </ul>
<div class="latest"> <div class="latest">
<h2>Japan’s Latest Toilets</h2> <h2>Japan's Latest Toilets</h2>
<p>The latest toilets in Japan filled with state-of-the-art technologies, starting with the Spray seat.<br /> <p>The latest toilets in Japan filled with state-of-the-art technologies, starting with the Spray seat.<br />
They are continuing to evolve so that they can be used at ease, safely, and comfortably.</p> They are continuing to evolve so that they can be used at ease, safely, and comfortably.</p>
<div> <div>
......
utsukushitoilet/en/latest/02.html
<!DOCTYPE html> <!DOCTYPE html>
<html lang="ja" prefix="og: http://ogp.me/ns#"> <html lang="ja" prefix="og: http://ogp.me/ns#">
<head> <head>
<meta http-equiv="refresh" content="0;URL=/utsukushitoilet/en/latest/">
<meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="keywords" content=""> <meta name="keywords" content="">
......
utsukushitoilet/en/latest/css/style.css
...@@ -422,3 +422,10 @@ p, .second .block > p { ...@@ -422,3 +422,10 @@ p, .second .block > p {
} }
#_01,
#_02,
#_03,
#_04 {
padding-top: 5px;
margin-top: -5px;
}
utsukushitoilet/en/latest/images/latest01_graph01.gif
utsukushitoilet/en/latest/images/latest01_graph01.gif

14.3 KB | W: | H:

utsukushitoilet/en/latest/images/latest01_graph01.gif

12.3 KB | W: | H:

utsukushitoilet/en/latest/images/latest01_graph01.gif
utsukushitoilet/en/latest/images/latest01_graph01.gif
utsukushitoilet/en/latest/images/latest01_graph01.gif
utsukushitoilet/en/latest/images/latest01_graph01.gif
  • 2-up
  • Swipe
  • Onion skin
utsukushitoilet/en/latest/index.html
...@@ -5,9 +5,9 @@ ...@@ -5,9 +5,9 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="keywords" content=""> <meta name="keywords" content="">
<meta name="description" content=""> <meta name="description" content="">
<title>Japan’s Latest Toilet - NIPPON UTSUKUSHI TOILET</title> <title>Japan's Latest Toilet - NIPPON UTSUKUSHI TOILET</title>
<link rel="stylesheet" href="/utsukushitoilet/shared/css/reset.css" type="text/css" media="all"> <link rel="stylesheet" href="/utsukushitoilet/shared/css/reset.css" type="text/css" media="all">
<link rel="stylesheet" href="/utsukushitoilet/en/shared/css/common.css" type="text/css" media="all"> <link rel="stylesheet" href="/utsukushitoilet/shared/css/common.css" type="text/css" media="all">
<link rel="stylesheet" href="css/style.css" type="text/css" media="all"> <link rel="stylesheet" href="css/style.css" type="text/css" media="all">
<script type="text/javascript" src="/utsukushitoilet/shared/js/jquery.js"></script> <script type="text/javascript" src="/utsukushitoilet/shared/js/jquery.js"></script>
<script type="text/javascript" src="/utsukushitoilet/shared/js/jquery.plugin.js"></script> <script type="text/javascript" src="/utsukushitoilet/shared/js/jquery.plugin.js"></script>
...@@ -31,25 +31,25 @@ $(document).ready(function(){ ...@@ -31,25 +31,25 @@ $(document).ready(function(){
</script> </script>
<!-- //google analytics --> <!-- //google analytics -->
</head> </head>
<body class="second"> <body class="second" id="latest">
<script type="text/javascript" > <script type="text/javascript" >
<!-- <!--
includeHead('div'); includeHead2('div');
//--> //-->
</script> </script>
<noscript> <noscript>
<p>当サイトはJavaScriptをonにしてご覧ください。</p> <p>Please enable Javascript to view this site.</p>
</noscript> </noscript>
<section class="first latest_menu"> <section class="first latest_menu">
<div class="block"> <div class="block">
<h1>Japan’s Latest Toilet</h1> <h1>Japan's Latest Toilet</h1>
<p>The latest toilets in Japan filled with state-of-the-art technologies, starting with the spray seats.<br /> <p>The latest toilets in Japan filled with state-of-the-art technologies, starting with the spray seats.<br />
They are continuing to evolve so that they can be used at ease, safely, and comfortably.</p> They are continuing to evolve so that they can be used at ease, safely, and comfortably.</p>
<ul> <ul>
<li><span>01</span><a href="./#_01">Spray seat</a></li> <li><span>01</span><a href="./#_01">Spray seat</a></li>
<li><span>02</span><a href="02.html#_02">Low Silhouette Toilet</a></li> <li><span>02</span><a href="./#_02">Low Silhouette Toilet</a></li>
<li><span>03</span><a href="02.html#_03">Water-saving Device</a></li> <li><span>03</span><a href="./#_03">Water-saving Device</a></li>
<li><span>04</span><a href="02.html#_04">Devices for People with Children</a></li> <li><span>04</span><a href="./#_04">Devices for People with Children</a></li>
</ul><div class="clear"></div> </ul><div class="clear"></div>
</div> </div>
</section> </section>
...@@ -65,8 +65,8 @@ Additionally, it has a timer to conserve electricity and a learning function to ...@@ -65,8 +65,8 @@ Additionally, it has a timer to conserve electricity and a learning function to
</ul><div class="clear"></div> </ul><div class="clear"></div>
<div id="spread"> <div id="spread">
<div> <div>
<h3>Proliferation rate in Japan: 77.5％ (As of 2015)</h3> <h3>Penetration Rate in Japan: 80.4% <small>(As of March 2019)</small></h3>
<p>The proliferation rate in households according to the "Cabinet Office Consumption Survey" of fiscal 2013 was 77.5% and is roughly the same as the proliferation rate of personal computers.</p> <p>The household penetration rate is increasing yearly reaching about 80% according to survey results by the Cabinet Office, which is a higher rate than personal computers.</p>
</div> </div>
<div><img src="./images/latest01_graph01.gif" alt=""></div> <div><img src="./images/latest01_graph01.gif" alt=""></div>
</div><div class="clear"></div> </div><div class="clear"></div>
...@@ -79,14 +79,14 @@ Their opinions after using are as follows.</p> ...@@ -79,14 +79,14 @@ Their opinions after using are as follows.</p>
<li><img src="./images/latest01_comment01_pc.gif" alt="Think it is sanitary"></li> <li><img src="./images/latest01_comment01_pc.gif" alt="Think it is sanitary"></li>
<li><img src="./images/latest01_comment02_pc.gif" alt="Good in that it enables you to wash your posterior"></li> <li><img src="./images/latest01_comment02_pc.gif" alt="Good in that it enables you to wash your posterior"></li>
<li><img src="./images/latest01_comment03_pc.gif" alt="Good in that toilet paper is not used"></li> <li><img src="./images/latest01_comment03_pc.gif" alt="Good in that toilet paper is not used"></li>
<li><img src="./images/latest01_comment04_pc.gif" alt="Would recommend to those who haven’t used them"></li> <li><img src="./images/latest01_comment04_pc.gif" alt="Would recommend to those who haven't used them"></li>
<li><img src="./images/latest01_comment05_pc.gif" alt="Easy to use"></li> <li><img src="./images/latest01_comment05_pc.gif" alt="Easy to use"></li>
</ul> </ul>
<ul id="comment_sp"> <ul id="comment_sp">
<li><img src="./images/latest01_comment01.gif" alt="Think it is sanitary"></li> <li><img src="./images/latest01_comment01.gif" alt="Think it is sanitary"></li>
<li><img src="./images/latest01_comment02.gif" alt="Good in that it enables you to wash your posterior"></li> <li><img src="./images/latest01_comment02.gif" alt="Good in that it enables you to wash your posterior"></li>
<li><img src="./images/latest01_comment03.gif" alt="Good in that toilet paper is not used"></li> <li><img src="./images/latest01_comment03.gif" alt="Good in that toilet paper is not used"></li>
<li><img src="./images/latest01_comment04.gif" alt="Would recommend to those who haven’t used them"></li> <li><img src="./images/latest01_comment04.gif" alt="Would recommend to those who haven't used them"></li>
<li><img src="./images/latest01_comment05.gif" alt="Easy to use"></li> <li><img src="./images/latest01_comment05.gif" alt="Easy to use"></li>
</ul> </ul>
</div> </div>
...@@ -99,13 +99,61 @@ Their opinions after using are as follows.</p> ...@@ -99,13 +99,61 @@ Their opinions after using are as follows.</p>
</div> </div>
</div> </div>
</section> </section>
<section id="_02">
<div class="block">
<h2 class="line"><span>02</span>Low Silhouette Toilet</h2>
<p>In recent years, the “Low Silhouette” design for toilets has been gaining popularity.<br>
Each company has a characteristic lineup such as types that assert the design of the toilet by itself or products that allow freedom to interpret the space where it is situated.</p>
<ul>
<li><strong>Manufacturers</strong><div>Appearance</div><span>Product Names</span></li>
<li><strong>ASAHI EITO Corporation</strong><div><img src="/utsukushitoilet/latest/images/latest02_img01.jpg" alt=""></div><span>Onepiece</span></li>
<li><strong>Janis Ltd.</strong><div><img src="/utsukushitoilet/latest/images/latest02_img02.jpg" alt=""></div><span>Smart Clean</span></li>
<li><strong>TOTO LTD. </strong><div><img src="/utsukushitoilet/latest/images/latest02_img03.jpg" alt=""></div><span>NEOREST</span></li>
<li><strong>Panasonic Corporation</strong><div><img src="/utsukushitoilet/latest/images/latest02_img04.jpg" alt=""></div><span>A-La-Uno</span></li>
<li><strong>LIXIL Corporation</strong><div><img src="/utsukushitoilet/latest/images/latest02_img05.jpg" alt=""></div><span>SATIS</span></li>
</ul><div class="clear"></div>
</div>
</section>
<section id="_03">
<div class="block">
<h2 class="line"><span>03</span>Water-saving Device</h2>
<h3>Water-saving Toilet</h3>
<p>The volume of water used when a Western-style toilet is flushed once (large flush) is 6 liters or less. <br>
In addition, by the flow of the wash water "circling around" the bowl (toilet bowl), it effectively cleans the soil and conserves water.</p>
<ul>
<li><img src="/utsukushitoilet/latest/images/latest03_img01.jpg" alt=""></li>
<li><img src="/utsukushitoilet/latest/images/latest03_img02.jpg" alt=""></li>
</ul><div class="clear"></div>
<ul id="small">
<li><h3>Automatic Flushing Urinals</h3><p>After your use, the toilet will be flushed automatically.<br>Children friendly, easy to approach, low receptacle urinals are common.</p></li>
<li><img src="/utsukushitoilet/latest/images/latest03_img03.jpg" alt=""></li>
</ul><div class="clear"></div>
<h3>Wash Basin Area (Automatic Faucet, Automatic Liquid Soap, Air Towel)</h3>
<ul id="auto">
<li><img src="/utsukushitoilet/latest/images/latest03_img04.jpg" alt=""><p>Faucets with water that automatically turn on are common.</p></li>
<li><img src="/utsukushitoilet/latest/images/latest03_img05.jpg" alt=""><p>In places like commercial facilities, there also are automatic liquid soap dispenser types.</p></li>
<li><img src="/utsukushitoilet/latest/images/latest03_img06.jpg" alt=""><p>There are air towel types that blow away moisture.</p></li>
</ul><div class="clear"></div>
</div>
</section>
<section id="_04">
<div class="block">
<h2 class="line"><span>04</span>Devices for People with Children</h2>
<p>Baby seats, baby chairs, and other items in consideration of babies, fitting boards for changing children and other devices have been increasingly installed in commercial and transportation facilities. People with children can also use toilets with peace of mind.</p>
<ul>
<li><img src="/utsukushitoilet/latest/images/latest04_img01.jpg" alt=""><p>This is a table for changing baby diapers.</p></li>
<li><img src="/utsukushitoilet/latest/images/latest04_img02.jpg" alt=""><p>People with babies can sit the infant in the seat while using the toilet.</p></li>
<li><img src="/utsukushitoilet/latest/images/latest04_img03.jpg" alt=""><p>It is a thin shaped board so that pants-type diapers can be conveniently changed.</p></li>
</ul><div class="clear"></div>
</div>
</section>
<section class="latest_menu foot_menu"> <section class="latest_menu foot_menu">
<div class="block"> <div class="block">
<ul> <ul>
<li><span>01</span><a href="./#_01">Spray seat</a></li> <li><span>01</span><a href="./#_01">Spray seat</a></li>
<li><span>02</span><a href="02.html#_02">Low Silhouette Toilet</a></li> <li><span>02</span><a href="./#_02">Low Silhouette Toilet</a></li>
<li><span>03</span><a href="02.html#_03">Water-saving Device</a></li> <li><span>03</span><a href="./#_03">Water-saving Device</a></li>
<li><span>04</span><a href="02.html#_04">Devices for People with Children</a></li> <li><span>04</span><a href="./#_04">Devices for People with Children</a></li>
</ul><div class="clear"></div> </ul><div class="clear"></div>
</div> </div>
</section> </section>
......
utsukushitoilet/en/shared/css/common.css
...@@ -578,3 +578,584 @@ footer strong { ...@@ -578,3 +578,584 @@ footer strong {
} }
/* 2020.2.19 update */
body#situation h1{
padding-top: 110px;
background: url(/utsukushitoilet/shared/images/icon01.png) no-repeat 50% top;
}
body#sign h1{
padding-top: 110px;
background: url(/utsukushitoilet/shared/images/icon02.png) no-repeat 50% top;
}
body#type h1{
padding-top: 110px;
background: url(/utsukushitoilet/shared/images/icon03.png) no-repeat 50% top;
}
body#howtouse h1{
padding-top: 110px;
background: url(/utsukushitoilet/shared/images/icon04.png) no-repeat 50% top;
}
body#latest h1{
padding-top: 110px;
background: url(/utsukushitoilet/shared/images/icon05.png) no-repeat 50% top;
}
header.pht {
position: absolute;
top: 0;
left: 0;
right: 0;
display: block;
width: 100%;
height: 134.5px;
margin: auto;
background: url(/utsukushitoilet/shared/images/showcase.jpg) no-repeat top center;
background-size: cover;
}
[class|=inner] {
max-width: 980px;
width: 100%;
margin: 0 auto;
}
.title_area {
float: none;
}
.title_area a {
display: block;
width: 248px;
}
.title_area a .logo_line {
display: block;
margin-top: .5em;
padding: .2em 3em;
background-color: #fff;
line-height: 0;
}
.title_area a .logo_line img {
max-width: 100%;
}
#head_area.head_area {
position: absolute;
top: 0;
left: 0;
right: 0;
max-width: 980px;
width: 100%;
margin: 0 auto;
padding: 20px 0;
display: flex;
align-items: center;
justify-content: space-between;
z-index: 110;
}
.lang_menu {
margin-right: 6em;
}
.inner-toggle {
position: relative;
}
/* toggle ********************* */
.toggle_menu {
display: none;
position: absolute;
left: 0;
right: 0;
top: 8em;
padding: 2em 0;
z-index: 100;
/*background-color: #e9573e;*/
}
.toggle_btn {
position: absolute;
top: 2em;
right: 0;
display: block;
width: 70px;
height: 70px;
padding: 22px;
margin: auto;
box-sizing: border-box;
border: solid 1px #fff;
border-radius: 50%;
z-index: 111;
}
.toggle {
position: absolute;
display: block;
width: 25px;
height: auto;
z-index: 10;
padding: 0;
}
.toggle span {
position: relative;
display: block;
width: 100%;
transition: transform .3s ease;
}
.toggle span,
.toggle span:before,
.toggle span:after {
background-color: #fff;
height: 3px;
margin: auto;
}
.toggle span:before,
.toggle span:after {
position: absolute;
content: "";
right: 0;
}
.toggle span:before {
width: 100%;
margin-top: 10px;
transition: opacity .6s ease;
}
.toggle span:after {
width: 100%;
margin-top: 20px;
transition: transform .3s ease;
}
.toggle:hover,
.active .toggle:hover {
text-decoration: none;
}
.toggle_btn.active {
}
.toggle_btn.active .toggle span {
transform: rotate(-45deg);
transform-origin: 1.5em .4em;
transition: all .3s ease;
}
.toggle_btn.active .toggle span:before {
opacity: 0;
transition: opacity 0s ease;
}
.toggle_btn.active .toggle span:after {
width: 100%;
transform: rotate(90deg);
transition: all .3s ease;
margin-top: 0;
}
/* overlay
****************************************************** */
.overlay {
display: none;
width: 100%;
height: 100%;
text-align: center;
position: fixed;
top: 0;
z-index: 99;
background-color: #e9573e;
opacity: 1;
}
.header_flxpc {
display: flex;
align-items: flex-end;
justify-content: space-between;
}
.header_nav {
display: flex;
flex-wrap: wrap;
align-items: stretch;
justify-content: flex-start;
width: 73%;
}
.header_nav li {
width: 50%;
box-sizing: border-box;
border-right: solid 1px #e9573e;
}
.header_nav li:first-child {
width: 100%;
border-top: solid 2px #fff;
border-right: solid 2px #fff;
border-left: solid 2px #fff;
text-align: center;
font-size: 14px;
font-weight: bold;
color: #fff;
}
.header_nav .situation,
.header_nav .sign {
border-bottom: solid 1px #e9573e;
}
.header_nav .sign,
.header_nav .howtouse {
border-right-color: #fff;
}
.header_nav li a {
position: relative;
display: block;
padding: 1em 0 1em 5em;
background-color: #fff;
font-weight: bold;
color: #e9573e;
}
.header_nav a::before {
content: "";
position: absolute;
left: 1em;
top: 0;
bottom: 0;
display: block;
margin: auto;
width: 2em;
height: 2em;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
.header_nav .situation a::before {
width: 2.4em;
height: 2.4em;
background-image: url(/utsukushitoilet/shared/images/icon01.svg);
}
.header_nav .sign a::before {
background-image: url(/utsukushitoilet/shared/images/icon02.svg);
}
.header_nav .type a::before {
background-image: url(/utsukushitoilet/shared/images/icon03.svg);
}
.header_nav .howtouse a::before {
background-image: url(/utsukushitoilet/shared/images/icon04.svg);
}
.header_nav a::after,
.header_flxpc .latest a::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
right: 1.8em;
display: block;
margin: auto;
width: .6em;
height: .6em;
background: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%205%2010%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20fill%3D%22%23e9573e%22%20d%3D%22M5.000%2C5.000%20L-0.000%2C-0.000%20L-0.000%2C10.000%20L5.000%2C5.000%20Z%22%2F%3E%3C%2Fsvg%3E') no-repeat center;
background-size: contain;
}
.header_flxpc .latest a {
position: relative;
display: block;
padding: 2.5em 4em 2.5em 6em;
background-color: #fff;
line-height: 1.3;
font-weight: bold;
color: #e9573e;
}
.header_flxpc .latest a::before {
content: "";
position: absolute;
left: 2.5em;
top: 0;
bottom: 0;
display: block;
margin: auto;
width: 2.4em;
height: 2.4em;
background: url(/utsukushitoilet/shared/images/icon05.svg) no-repeat center;
background-size: contain;
}
.menu_box .manage {
margin-top: .5em;
text-align: right;
}
.menu_box .manage a {
display: inline-block;
vertical-align: middle;
font-weight: bold;
}
.menu_box .manage a::before {
content: "";
display: inline-block;
width: .6em;
height: .6em;
margin-right: .5em;
background: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%205%2010%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20fill%3D%22%23fff%22%20d%3D%22M5.000%2C5.000%20L-0.000%2C-0.000%20L-0.000%2C10.000%20L5.000%2C5.000%20Z%22%2F%3E%3C%2Fsvg%3E') no-repeat center;
background-size: contain;
vertical-align: middle;
}
.header_nav2 {
margin: 2em 0;
padding-top: 2em;
border-top: solid 1px rgba(255,255,255,.3);
}
.header_nav2 li {
display: inline-block;
}
.header_nav2 li:first-child {
margin-right: 3em;
}
.header_nav2 a {
font-size: 112.5%;
font-weight: bold;
}
.toggle_menu .search {
margin: 2em 0;
padding-top: 2em;
border-top: solid 1px rgba(255,255,255,.3);
}
.toggle_menu .search > div {
max-width: 580px;
}
.toggle_menu .search .gsc-search-box-tools .gsc-search-box .gsc-input {
padding-right: 0;
}
.toggle_menu .search .gsc-search-box-tools .gsc-search-box .gsc-input input[type=text] {
background-color: rgba(255,255,255,.3) !important;
}
.toggle_menu .search .gsc-search-button .gsc-search-button-v2 {
padding: 11px 20px 10px;
margin-left: 0;
width: 100%;
border-radius: 0;
border: none;
}
#lang {
width: 180px;
}
#lang select {
background: none;
/*-webkit-appearance: menulist;*/
}
#lang select option {
padding: .5em;
}
.second .first {
padding-top: 196px;
background: none;
}
@media screen and (max-width:640px){
br.pc {
display: none;
}
header.pht {
height: 19.76563vw;
}
[class|=inner] {
width: 92%;
}
.title_area {
width: 45%;
}
.title_area a {
width: 38.75vw;
padding: 2.5vw;
}
.title_area a .logo_line {
margin-top: 1.5vw;
padding: .2em 7vw;
}
#head_area.head_area {
max-width: 100%;
padding: 0;
}
.lang_menu {
margin-right: 18vw;
}
.menu_box {
font-size: 2.5vw;
}
/* toggle ********************* */
.toggle_menu {
top: 19.6875vw;
}
.toggle_btn {
top: 4.8vw;
right: 0;
width: 10.9375vw;
height: 10.9375vw;
padding: 3.4375vw;
}
.toggle {
width: 3.90625vw;
}
.toggle span:before {
margin-top: 1.5625vw;
}
.toggle span:after {
margin-top: 3.125vw;
}
.toggle_btn.active .toggle span {
transform-origin: 3.8vw 1.1vw;
}
.header_nav .type,
.header_nav .howtouse {
border-bottom: solid 1px #e9573e;
}
.header_flxpc .latest a::before {
left: 1em;
}
.header_flxpc/*,
.header_nav*/ {
display: block;
}
.header_nav {
width: 100%;
}
/*
.header_nav li {
width: 100%;
}*/
.header_nav a::before,
.header_flxpc .latest a::before {
left: .6em;
}
.header_nav li:first-child {
font-size: 2.5vw;
}
.header_nav li a,
.header_flxpc .latest a {
padding: 1em 0 1em 3.5em;
line-height: 1.5;
}
.header_nav li a {
padding-right: 1.8em;
padding-left: 3.2em;
}
.header_flxpc .latest a {
}
.header_nav a::after {
right: 1em;
}
#lang {
width: 28vw;
margin-bottom: 0;
line-height: 1;
}
#lang select {
padding: 1vw 2vw;
border: solid 2px #fff;
font-size: 2.5vw;
}
.header_nav2 {
margin: 1em 0;
padding-top: 1em;
}
.header_nav2 li {
display: block;
margin-bottom: .5em;
}
.header_nav2 li:first-child {
margin-right: 0;
}
.header_nav2 a {
font-size: 2.5vw;
}
.search {
display: block;
}
.toggle_menu .search .gsc-search-button .gsc-search-button-v2 {
padding: 15px 20px;
}
.second .first {
padding-top: 27vw;
}
/* 多言語ページ */
#moble_menu + .search {
display: none;
}
header:not([class]) #lang {
width: 100%;
margin-bottom: 4%;
}
header:not([class]) #lang select {
border: none;
background-color: #ec6b55;
padding: 13% 0 13% 10px;
background-image: url(/utsukushitoilet/images/pt_language.gif);
background-repeat: no-repeat;
background-position: 90% center;
background-size: 20px, auto;
font-size: 13px;
}
}
/* 2020.2.19 upsate */
.header_flxpc a {
font-size: 85%;
}
.header_flxpc .latest {
max-width: 240px;
}
.header_flxpc .latest b {
display: block;
border-top: solid 2px #fff;
border-right: solid 2px #fff;
border-left: solid 2px #fff;
text-align: center;
font-size: 14px;
color: #fff;
}
.menu_box .manage a {
padding: 0 0 0 .71em;
background-color: #fff;
color: #e9573e;
}
.menu_box .manage a::before {
content: none;
}
.menu_box .manage a::after {
content: "";
display: inline-block;
width: .6em;
height: .6em;
margin-left: .2em;
margin-right: .5em;
background: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%205%2010%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20fill%3D%22%23e9573e%22%20d%3D%22M5.000%2C5.000%20L-0.000%2C-0.000%20L-0.000%2C10.000%20L5.000%2C5.000%20Z%22%2F%3E%3C%2Fsvg%3E') no-repeat center;
background-size: contain;
}
@media screen and (max-width:640px){
.header_flxpc .latest {
max-width: 100%;
}
.header_flxpc .latest b {
font-size: 2.5vw;
}
}
#breadcrumbs_area{
margin: -55px auto 30px auto;
font-size: 75%;
text-align: left;
}
#breadcrumbs_area a{
text-decoration: underline;
color: #e05538;
}
@media screen and (max-width:640px){
#breadcrumbs_area {
margin-top: -25px;
}
}
#footer_menu2 strong{
line-height: 1.5;
}
#footer_menu2 small {
line-height: 1.5;
font-size: 72%;
display: block;
margin-top: -5px;
margin-bottom: 10px;
}
@media screen and (max-width:640px){
#footer_menu2 small {
display: none;
}
}
utsukushitoilet/en/shared/js/common_parts.js
/* 2020.2.19 update */
function includeHead2(tag) {
document.write(
'<div class="overlay"><img src="/utsukushitoilet/shared/images/main_visual0_002.png" width="100%" height="auto" class="back_img"></div>\n'+
'<header class="pht">\n'+
'<div id="head_area" class="head_area">\n'+
'<'+tag+' class="title_area"><a href="/utsukushitoilet/en/"><img src="/utsukushitoilet/shared/images/logo.svg" alt="JAPAN TOILET INFORMATION"><span class="logo_line"><img src="/utsukushitoilet/shared/images/logo_line.svg" alt="NIPPON UTSUKUSHI TOILET"></span></a></'+tag+'>\n'+
'<div class="lang_menu">\n'+
'<div id="lang">\n'+
'<select>\n'+
'<option value="">LANGUAGE</option>\n'+
'<option value="/utsukushitoilet/cn_t/" id="cn_t">CHINESE(Traditional)</option>\n'+
'<option value="/utsukushitoilet/cn_s/" id="cn_s">CHINESE(Simplified)</option>\n'+
'<option value="/utsukushitoilet/kr/" id="kr">KOREAN</option>\n'+
'<option value="/utsukushitoilet/en/" id="en">ENGLISH</option>\n'+
'<option value="/utsukushitoilet/" id="ja">JAPANESE</option>\n'+
'</select>\n'+
'</div>\n'+
'</div>\n'+
'</div>\n'+
'<nav>\n'+
'<div class="inner-toggle">\n'+
'<a href="" id="toggle_btn" class="toggle_btn">\n'+
'<div class="toggle"><span></span></div>\n'+
'</a>\n'+
'</div>\n'+
'<div id="toggle_menu" class="toggle_menu">\n'+
'<div class="inner-menu">\n'+
'<div class="menu_box">\n'+
'<div class="header_flxpc">\n'+
'<ul class="header_nav">\n'+
'<li>Japan\'s Toilet Situation</li>\n'+
'<li class="situation"><a href="/utsukushitoilet/en/situation/">Toilet Installation Locations</a></li>\n'+
'<li class="sign"><a href="/utsukushitoilet/en/sign/">Toilet Guide Signs</a></li>\n'+
'<li class="type"><a href="/utsukushitoilet/en/type/">Types of Toilets and Usage</a></li>\n'+
'<li class="howtouse"><a href="/utsukushitoilet/en/howtouse/">Using the Toilet Utilities</a></li>\n'+
'</ul>\n'+
'<div class="latest"><b>Restroom Information</b><a href="/utsukushitoilet/en/latest/">Japan\'s Latest Toilets</a></div>\n'+
'</div>\n'+
'</div>\n'+
'<div class="search">\n'+
'<gcse:searchbox-only></gcse:searchbox-only>\n'+
'</div>\n'+
'</div>\n'+
'</div>\n'+
'</nav>\n'+
'</header>\n'
);
}
/* 共通 ページメニュー　ヘッダ */ /* 共通 ページメニュー　ヘッダ */
function includeHead(tag) { function includeHead(tag) {
document.write( document.write(
...@@ -32,7 +82,7 @@ document.write( ...@@ -32,7 +82,7 @@ document.write(
' <li><a href="/utsukushitoilet/en/situation/#guide">Toilet Guide Signs</a></li>\n'+ ' <li><a href="/utsukushitoilet/en/situation/#guide">Toilet Guide Signs</a></li>\n'+
' <li><a href="/utsukushitoilet/en/type/">Types of Toilets and Usage</a></li>\n'+ ' <li><a href="/utsukushitoilet/en/type/">Types of Toilets and Usage</a></li>\n'+
' <li><a href="/utsukushitoilet/en/type/#use">Using the Toilet Utilities</a></li>\n'+ ' <li><a href="/utsukushitoilet/en/type/#use">Using the Toilet Utilities</a></li>\n'+
' <li><a href="/utsukushitoilet/en/latest/">Japan’s Latest Toilets</a></li>\n'+ ' <li><a href="/utsukushitoilet/en/latest/">Japan\'s Latest Toilets</a></li>\n'+
'</ul><div class="clear"></div>\n'+ '</ul><div class="clear"></div>\n'+
'</nav>\n'+ '</nav>\n'+
'</header>\n' '</header>\n'
...@@ -46,28 +96,28 @@ document.write( ...@@ -46,28 +96,28 @@ document.write(
'</div>\n'+ '</div>\n'+
'<footer>\n'+ '<footer>\n'+
'<div id="footer_div1">\n'+ '<div id="footer_div1">\n'+
'<div id="footer_menu1">\n'+ '<div id="footer_menu1" class="list_wt">\n'+
'<strong>Japan’s Toilet Situation</strong>\n'+ '<strong>Japan\'s Toilet Situation</strong>\n'+
'<ul>\n'+ '<ul>\n'+
' <li><a href="/utsukushitoilet/en/situation/">Toilet Installation Locations</a></li>\n'+ ' <li><a href="/utsukushitoilet/en/situation/">Toilet Installation Locations</a></li>\n'+
' <li><a href="/utsukushitoilet/en/situation//#guide">Toilet Guide Signs</a></li>\n'+ ' <li><a href="/utsukushitoilet/en/sign/">Toilet Guide Signs</a></li>\n'+
' <li><a href="/utsukushitoilet/en/type/">Types of Toilets and Usage</a></li>\n'+ ' <li><a href="/utsukushitoilet/en/type/">Types of Toilets and Usage</a></li>\n'+
' <li><a href="/utsukushitoilet/en/type/#use">Using the Toilet Utilities</a></li>\n'+ ' <li><a href="/utsukushitoilet/en/howtouse/">Using the Toilet Utilities</a></li>\n'+
'</ul>\n'+ '</ul>\n'+
'</div>\n'+ '</div>\n'+
'<div id="footer_menu2">\n'+ '<div id="footer_menu2" class="list_wt">\n'+
'<strong>Japan’s Latest Toilets</strong>\n'+ '<strong>Japan\'s Latest Toilets</strong>\n'+
'<ul>\n'+ '<ul>\n'+
' <li><a href="/utsukushitoilet/en/latest/#_01">Spray seats</a></li>\n'+ ' <li><a href="/utsukushitoilet/en/latest/#_01">Spray seats</a></li>\n'+
' <li><a href="/utsukushitoilet/en/latest/02.html#_02">Low Silhouette Toilets</a></li>\n'+ ' <li><a href="/utsukushitoilet/en/latest/#_02">Low Silhouette Toilets</a></li>\n'+
' <li><a href="/utsukushitoilet/en/latest/02.html#_03">Water-saving Toilets</a></li>\n'+ ' <li><a href="/utsukushitoilet/en/latest/#_03">Water-saving Toilets</a></li>\n'+
' <li><a href="/utsukushitoilet/en/latest/02.html#_04">Child Support Equipment</a></li>\n'+ ' <li><a href="/utsukushitoilet/en/latest/#_04">Child Support Equipment</a></li>\n'+
'</ul>\n'+ '</ul>\n'+
'</div>\n'+ '</div>\n'+
'<div id="footer_banner">\n'+ '<div id="footer_banner">\n'+
'<ul>\n'+ '<ul>\n'+
' <li><a href="http://www.sanitary-net.com/" target="_blank"><img src="/utsukushitoilet/shared/images/bnr_toiletnavi.gif" alt="トイレナビ"></a></li>\n'+ ' <li class="line"><a href="http://www.sanitary-net.com/" target="_blank"><img src="/utsukushitoilet/shared/images/bnr_toiletnavi.gif" alt="TOILET NAVIGATION"></a></li>\n'+
' <li><a href="http://www.mlit.go.jp/kankocho/" target="_blank"><img src="/utsukushitoilet/shared/images/bnr_kanko.gif" alt="観光庁"></a></li>\n'+ ' <li class="line"><a href="http://www.mlit.go.jp/kankocho/" target="_blank"><img src="/utsukushitoilet/shared/images/bnr_kanko.gif" alt="Japan Tourism Agency"></a></li>\n'+
'</ul>\n'+ '</ul>\n'+
'</div><div class="clear"></div>\n'+ '</div><div class="clear"></div>\n'+
'</div>\n'+ '</div>\n'+
......
utsukushitoilet/en/sign/css/style.css 0 → 100644
@charset "UTF-8";
#facility ul {
padding: 50px 0;
}
#facility ul:after {
content: "";
display: block;
clear: both;
}
#facility li {
display: inline-block;
width: 16.6%;
float: left;
text-align: center;
}
#facility li div {
width: 99%;
}
#facility li strong {
display: block;
}
#facility li img {
width: 100%;
}
#cleaning {
border: solid 1px #ec6b55;
position: relative;
text-align: left;
padding: 20px;
background: url(/utsukushitoilet/situation/images/bg_cleaning.gif) no-repeat 94% center;
background-size: 224px auto;
margin-top: 50px;
margin-bottom: 50px;
}
#cleaning:after {
content: "";
display: block;
position: absolute;
z-index:-1;
top: 3px;
left: 3px;
right: -5px;
bottom: -5px;
border: 1px solid #dcdcdc;
}
#cleaning h2 {
font-size: 20px;
font-weight: bold;
}
#cleaning p {
width: 66%;
}
#guide h2 {
background-color: #7f7f7f;
color: #fff;
width: 110px;
margin-bottom: 0;
margin-top: 20px;
}
#guide .guide_eg {
border: solid 1px #ccc;
padding: 30px 10px 20px 10px;
margin-bottom: 20px;
position: relative;
}
#guide #letter li {
display: inline-block;
width: 17%;
padding-bottom: 20px;
}
#guide #letter li img {
max-width: 116px;
width: 100%;
}
#guide #letter li:before {
content: "-";
color: #ed638a;
font-weight: bold;
margin-right: 6px;
}
#guide ul#sign {
display: block;
height: 115px;
}
#guide #sign li {
display: block;
position: absolute;
background-color: #f4f4f4;
padding: 14px 0;
width: 106px;
border-radius: 5px;
}
#guide #sign li img {
width: 58%;
}
#guide #sign li:first-child {
left: 30px;
}
#guide #sign li:nth-child(2) {
left: 152px;
}
#guide #sign li:nth-child(3) {
width: 185px;
left: 274px;
height: 77px;
}
#guide #sign li:nth-child(3) img {
width: 95%;
margin-top: 12px;
}
#guide #sign li:nth-child(4) {
width: 272px;
left: 476px;
height: 77px;
background-color: #666;
}
#guide #sign li:nth-child(4) img {
width: 67%;
margin-top: 12px;
}
#guide #sign li:nth-child(5) {
left: 152px;
}
#guide #sign li:nth-child(6) {
left: 274px;
}
#guide #sign li:nth-child(7) {
left: 396px;
}
#guide #sign li:nth-child(8) {
left: 518px;
}
#guide #sign li:nth-child(9) {
left: 641px;
width: 186px;
}
#guide #sign li:nth-child(9) img {
width: 90%;
}
#guide #sign li:nth-child(10) {
right: 28px;
clear: both;
}
#guide ul#sign:after {
content: "";
display: block;
clear: both;
}
/* 0-640px ----*/
@media screen and (max-width:640px){
#facility li {
float: none;
display: block;
clear: both;
width: 92%;
margin: 1px auto;
}
#facility li:after {
content: "";
display: block;
clear: both;
}
#facility li strong {
position: absolute;
display: block;
text-shadow: 1px 1px 2px #fff;
}
#facility li img {
display: block;
width: 30%;
float: left;
margin-right: 1px;
}
#facility li img:first-child {
margin-left: 39%;
}
#cleaning {
background-position: center 95%;
width: 86%;
padding-bottom: 200px;
}
#cleaning p {
width: initial;
margin: 0 auto;
}
#guide h2 {
margin-left: 4%;
}
#guide .guide_eg {
margin-left: 4%;
margin-right: 4%;
}
#guide #letter li {
width: 48%;
}
#guide ul#sign {
height: inherit;
}
#guide #sign li {
position: inherit;
display: inline-block;
width: 42%;
margin-bottom: 12px;
pading: 4% 0;
}
#guide #sign li:nth-child(3), #guide #sign li:nth-child(4), #guide #sign li:nth-child(9) {
width: 85.2%;
height: auto;
}
#guide #sign li:nth-child(3) img, #guide #sign li:nth-child(4) img {
margin-top: 0;
}
#guide #sign li:nth-child(10) {
margin-left: 7.4%;
float: left;
}
}
utsukushitoilet/en/sign/index.html 0 → 100644
<!DOCTYPE html>
<html lang="ja" prefix="og: http://ogp.me/ns#">
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta charset="UTF-8">
<meta name="keywords" content="">
<meta name="description" content="">
<title>Toilet Guide Signs:Japan's Toilet Situation - NIPPON UTSUKUSHI TOILET</title>
<link rel="stylesheet" href="/utsukushitoilet/shared/css/reset.css" type="text/css" media="all">
<link rel="stylesheet" href="/utsukushitoilet/shared/css/common.css" type="text/css" media="all">
<link rel="stylesheet" href="css/style.css" type="text/css" media="all">
<script type="text/javascript" src="/utsukushitoilet/shared/js/jquery.js"></script>
<script type="text/javascript" src="/utsukushitoilet/shared/js/jquery.plugin.js"></script>
<script type="text/javascript" src="/utsukushitoilet/shared/js/common.js"></script>
<script type="text/javascript" src="/utsukushitoilet/en/shared/js/common_parts.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#facility li strong").autoHeight();
});
</script>
<!-- google analytics -->
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-560401-9']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<!-- //google analytics -->
</head>
<body class="second" id="sign">
<script type="text/javascript" >
<!--
includeHead2('div');
//-->
</script>
<noscript>
<p>Please enable Javascript to view this site.</p>
</noscript>
<section id="guide" class="first">
<div class="block">
<h1><span>Japan's Toilet Situation</span>Toilet Guide Signs</h1>
<p>There are different ways to express a toilet in Japan. There are direct ways as well as roundabout ways to express them.<br />
They are differentiated by the location of the facility and TPO. For example, during meals, instead of toilet, "keshoushitsu" (powder room) might be used.<br />
To avoid confusion, you should be aware of the different signs.</p>
<h2>Characters</h2>
<div class="guide_eg">
<ul id="letter">
<li><img src="/utsukushitoilet/situation/images/letter01.gif" alt=""></li>
<li><img src="/utsukushitoilet/situation/images/letter02.gif" alt=""></li>
<li><img src="/utsukushitoilet/situation/images/letter03.gif" alt=""></li>
<li><img src="/utsukushitoilet/situation/images/letter04.gif" alt=""></li>
<li><img src="/utsukushitoilet/situation/images/letter05.gif" alt=""></li>
<li><img src="/utsukushitoilet/situation/images/letter06.gif" alt="Toilet"></li>
<li><img src="/utsukushitoilet/situation/images/letter07.gif" alt="lavatory"></li>
<li><img src="/utsukushitoilet/situation/images/letter08.gif" alt="W.C"></li>
<li><img src="/utsukushitoilet/situation/images/letter09.gif" alt="RestRoom"></li>
<li><img src="/utsukushitoilet/situation/images/letter10.gif" alt=""></li>
</ul>
</div>
<h2>Signs</h2>
<div class="guide_eg">
<ul id="sign">
<li><img src="/utsukushitoilet/situation/images/sign01.gif" alt=""></li>
<li><img src="/utsukushitoilet/situation/images/sign02.gif" alt=""></li>
<li><img src="/utsukushitoilet/situation/images/sign03.gif" alt="TOILET"></li>
<li><img src="/utsukushitoilet/situation/images/sign04.gif" alt=""></li>
</ul>
</div>
</div>
</section>
<script type="text/javascript" >
<!--
includeFoot();
//-->
</script>
</body>
</html>
\ No newline at end of file
utsukushitoilet/en/situation/index.html
...@@ -5,9 +5,9 @@ ...@@ -5,9 +5,9 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="keywords" content=""> <meta name="keywords" content="">
<meta name="description" content=""> <meta name="description" content="">
<title>Facilities that have toilets:Japan’s Toilet Situation - NIPPON UTSUKUSHI TOILET</title> <title>Facilities that have toilets:Japan's Toilet Situation - NIPPON UTSUKUSHI TOILET</title>
<link rel="stylesheet" href="/utsukushitoilet/shared/css/reset.css" type="text/css" media="all"> <link rel="stylesheet" href="/utsukushitoilet/shared/css/reset.css" type="text/css" media="all">
<link rel="stylesheet" href="/utsukushitoilet/en/shared/css/common.css" type="text/css" media="all"> <link rel="stylesheet" href="/utsukushitoilet/shared/css/common.css" type="text/css" media="all">
<link rel="stylesheet" href="css/style.css" type="text/css" media="all"> <link rel="stylesheet" href="css/style.css" type="text/css" media="all">
<script type="text/javascript" src="/utsukushitoilet/shared/js/jquery.js"></script> <script type="text/javascript" src="/utsukushitoilet/shared/js/jquery.js"></script>
<script type="text/javascript" src="/utsukushitoilet/shared/js/jquery.plugin.js"></script> <script type="text/javascript" src="/utsukushitoilet/shared/js/jquery.plugin.js"></script>
...@@ -31,18 +31,18 @@ $(document).ready(function(){ ...@@ -31,18 +31,18 @@ $(document).ready(function(){
</script> </script>
<!-- //google analytics --> <!-- //google analytics -->
</head> </head>
<body class="second"> <body class="second" id="situation">
<script type="text/javascript" > <script type="text/javascript" >
<!-- <!--
includeHead('div'); includeHead2('div');
//--> //-->
</script> </script>
<noscript> <noscript>
<p>当サイトはJavaScriptをonにしてご覧ください。</p> <p>Please enable Javascript to view this site.</p>
</noscript> </noscript>
<section id="facility" class="first"> <section id="facility" class="first">
<div class="block"> <div class="block">
<h1><span>Japan’s Toilet Situation</span>Facilities that have toilets</h1> <h1><span>Japan's Toilet Situation</span>Facilities that have toilets</h1>
<p>Toilets are located in various places at where you visit.<br /> <p>Toilets are located in various places at where you visit.<br />
The hospitable toilets are adapted to the various facilities.<br /> The hospitable toilets are adapted to the various facilities.<br />
For example, in addition to the facilities above, toilets are also installed in Shinkansen (Bullet Trains) and long distant buses and so you can rest assured even when travelling long distances for sight seeing.<br /> For example, in addition to the facilities above, toilets are also installed in Shinkansen (Bullet Trains) and long distant buses and so you can rest assured even when travelling long distances for sight seeing.<br />
...@@ -67,43 +67,11 @@ Toilet paper that can be flushed with water can be purchased at Convenience Stor ...@@ -67,43 +67,11 @@ Toilet paper that can be flushed with water can be purchased at Convenience Stor
<h2>Cleaning is also Hospitality</h2> <h2>Cleaning is also Hospitality</h2>
<p>Toilets at public facilities are cleaned everyday by cleaning workers with a feeling of “Hospitality” so that they can be used comfortably.<br /> <p>Toilets at public facilities are cleaned everyday by cleaning workers with a feeling of “Hospitality” so that they can be used comfortably.<br />
Cleaning workers will go about and continue cleaning even if there are people there using the facilities.<br /> Cleaning workers will go about and continue cleaning even if there are people there using the facilities.<br />
Some people may be surprised but this is the way Japan’s toilets are kept clean through this routine cleaning.<br /> Some people may be surprised but this is the way Japan's toilets are kept clean through this routine cleaning.<br />
There will be a toilet check sheet located somewhere.<br /> There will be a toilet check sheet located somewhere.<br />
If you do see one, please check to see how many times a day cleaning is done per day.</p> If you do see one, please check to see how many times a day cleaning is done per day.</p>
</div> </div>
</section> </section>
<section id="guide">
<div class="block">
<h1><span>Japan’s Toilet Situation</span>Toilet Guide Signs</h1>
<p>There are different ways to express a toilet in Japan. There are direct ways as well as roundabout ways to express them.<br />
They are differentiated by the location of the facility and TPO. For example, during meals, instead of toilet, "keshoushitsu" (powder room) might be used.<br />
To avoid confusion, you should be aware of the different signs.</p>
<h2>Characters</h2>
<div class="guide_eg">
<ul id="letter">
<li><img src="/utsukushitoilet/situation/images/letter01.gif" alt="お手洗い"></li>
<li><img src="/utsukushitoilet/situation/images/letter02.gif" alt="お手洗"></li>
<li><img src="/utsukushitoilet/situation/images/letter03.gif" alt="御手洗"></li>
<li><img src="/utsukushitoilet/situation/images/letter04.gif" alt="洗面所"></li>
<li><img src="/utsukushitoilet/situation/images/letter05.gif" alt="化粧室"></li>
<li><img src="/utsukushitoilet/situation/images/letter06.gif" alt="Toilet"></li>
<li><img src="/utsukushitoilet/situation/images/letter07.gif" alt="lavatory"></li>
<li><img src="/utsukushitoilet/situation/images/letter08.gif" alt="W.C"></li>
<li><img src="/utsukushitoilet/situation/images/letter09.gif" alt="RestRoom"></li>
<li><img src="/utsukushitoilet/situation/images/letter10.gif" alt="厠"></li>
</ul>
</div>
<h2>Signs</h2>
<div class="guide_eg">
<ul id="sign">
<li><img src="/utsukushitoilet/situation/images/sign01.gif" alt=""></li>
<li><img src="/utsukushitoilet/situation/images/sign02.gif" alt=""></li>
<li><img src="/utsukushitoilet/situation/images/sign03.gif" alt="TOILET"></li>
<li><img src="/utsukushitoilet/situation/images/sign04.gif" alt="化粧室"></li>
</ul>
</div>
</div>
</section>
<script type="text/javascript" > <script type="text/javascript" >
<!-- <!--
includeFoot(); includeFoot();
......
utsukushitoilet/en/type/css/style.css
...@@ -24,6 +24,9 @@ h3 { ...@@ -24,6 +24,9 @@ h3 {
font-weight: bold; font-weight: bold;
font-size: 20px; font-size: 20px;
} }
#kind{
margin-bottom: 70px;
}
#kind ul { #kind ul {
padding: 50px 0; padding: 50px 0;
} }
...@@ -195,3 +198,83 @@ h3 { ...@@ -195,3 +198,83 @@ h3 {
} }
#kind ul.toilet {
display: flex;
align-items: stretch;
justify-content: space-between;
padding: 20px 0;
}
#kind ul.toilet li {
display: block;
width: 48.4%;
float: none;
text-align: left;
margin-right: 0;
margin-left: 0;
background-color: #f7f6f2;
}
#kind ul.toilet li:nth-child(2) {
margin-right: 0;
}
#kind ul.toilet:after {
content: none;
}
#kind ul.toilet li h3 {
background-color: #fff;
text-align: center;
padding-bottom: 10px;
}
#kind ul.toilet li img {
width: 100%;
}
#kind ul.toilet li p {
padding: 20px;
margin-bottom: 10px;
}
#kind ul.toilet li div {
border-top: solid 1px #e1e0db;
margin: 0 auto;
width: 92%;
padding-bottom: 10px;
}
#kind ul.toilet li div img {
border: solid 1px #e1e0db;
display: block;
margin-bottom: 10px;
}
#kind ul#toilet li span {
display: block;
text-align: center;
font-weight: bold;
font-size: 14px;
padding: 10px 0;
}
@media screen and (max-width:640px){
#kind ul.toilet {
display: block;
}
#kind ul.toilet li {
float: none;
display: block;
clear: both;
width: 92%;
margin: 1px auto 20px auto;
}
#kind ul.toilet li:nth-child(2) {
margin-right: auto;
}
#kind ul.toilet li:after {
content: "";
display: block;
clear: both;
}
#kind ul.toilet li span {
padding: 6px;
font-size: inherit;
}
#kind ul.toilet li strong {
position: absolute;
display: block;
}
}
utsukushitoilet/en/type/index.html
...@@ -5,21 +5,14 @@ ...@@ -5,21 +5,14 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="keywords" content=""> <meta name="keywords" content="">
<meta name="description" content=""> <meta name="description" content="">
<title>Types of Toilets and Usage:Japan’s Toilet Situation - NIPPON UTSUKUSHI TOILET</title> <title>Types of Toilets and Usage:Japan's Toilet Situation - NIPPON UTSUKUSHI TOILET</title>
<link rel="stylesheet" href="/utsukushitoilet/shared/css/reset.css" type="text/css" media="all"> <link rel="stylesheet" href="/utsukushitoilet/shared/css/reset.css" type="text/css" media="all">
<link rel="stylesheet" href="/utsukushitoilet/en/shared/css/common.css" type="text/css" media="all"> <link rel="stylesheet" href="/utsukushitoilet/shared/css/common.css" type="text/css" media="all">
<link rel="stylesheet" href="css/style.css" type="text/css" media="all"> <link rel="stylesheet" href="css/style.css" type="text/css" media="all">
<script type="text/javascript" src="/utsukushitoilet/shared/js/jquery.js"></script> <script type="text/javascript" src="/utsukushitoilet/shared/js/jquery.js"></script>
<script type="text/javascript" src="/utsukushitoilet/shared/js/jquery.plugin.js"></script> <script type="text/javascript" src="/utsukushitoilet/shared/js/jquery.plugin.js"></script>
<script type="text/javascript" src="/utsukushitoilet/shared/js/common.js"></script> <script type="text/javascript" src="/utsukushitoilet/shared/js/common.js"></script>
<script type="text/javascript" src="/utsukushitoilet/en/shared/js/common_parts.js"></script> <script type="text/javascript" src="/utsukushitoilet/en/shared/js/common_parts.js"></script>
<script type="text/javascript">
$(document).ready(function(){
if ($(window).width() > 640) {
$("#toilet li").autoHeight();
}
});
</script>
<!-- google analytics --> <!-- google analytics -->
<script type="text/javascript"> <script type="text/javascript">
var _gaq = _gaq || []; var _gaq = _gaq || [];
...@@ -33,25 +26,33 @@ $(document).ready(function(){ ...@@ -33,25 +26,33 @@ $(document).ready(function(){
</script> </script>
<!-- //google analytics --> <!-- //google analytics -->
</head> </head>
<body class="second"> <body class="second" id="type">
<script type="text/javascript" > <script type="text/javascript" >
<!-- <!--
includeHead('div'); includeHead2('div');
//--> //-->
</script> </script>
<noscript> <noscript>
<p>当サイトはJavaScriptをonにしてご覧ください。</p> <p>Please enable Javascript to view this site.</p>
</noscript> </noscript>
<section id="kind" class="first"> <section id="kind" class="first">
<div class="block"> <div class="block">
<h1><span>Japan’s Toilet Situation</span>Types of Toilets and Usage</h1> <h1><span>Japan's Toilet Situation</span>Types of Toilets and Usage</h1>
<p>There are basically 3 types of toilets, the Japanese-style toilet, Western-style toilet, and the multi-function toilet and the type installed will vary depending on the location.<br /> <p>There are 3 different types of toilets in shape; the Japanese type, Western Type, and Multifunction type.<br>
The Japanese-type toilet is most common at sight-seeing locations and adjusting to the needs of the people, these are currently being converted to Western-style toilets.</p> Currently, Japanese type toilets are actively being converted to Western type toilets to allow everyone to easily use them.</p>
<h2 class="line"><span>01</span>Toilets at Transportation Facilities, Commercial Facilities, etc.</h2> <h2 class="line"><span>01</span>Public Toilets</h2>
<ul id="toilet"> <ul class="toilet 01">
<li><h3>Japanese-style Toilets</h3><img src="/utsukushitoilet/type/images/type01_washiki01.jpg" alt=""><p>This toilet has been around in Japan form olden days and it is used by squatting over it. They may be installed as public toilets.</p><div><span>How to use them</span><img src="./images/type01_washiki02.gif" alt=""></div></li> <li><h3>Japanese-style Toilets</h3><img src="/utsukushitoilet/type/images/type01_washiki01.jpg" alt=""><p>This toilet has been around in Japan form olden days and it is used by squatting over it. They may be installed as public toilets.</p><div><span>How to use them</span><img src="./images/type01_washiki02.gif" alt=""></div></li>
<li><h3>Western-style Toilet</h3><img src="/utsukushitoilet/type/images/type01_yoshiki01.jpg" alt=""><p>Currently, it is the most common toilet.</p><div><span>How to use them</span><img src="./images/type01_yoshiki02.gif" alt=""></div></li> <li><h3>Western-style Toilet</h3><img src="/utsukushitoilet/type/images/type01_yoshiki01.jpg" alt=""><p>Currently, it is the most common toilet.</p><div><span>How to use them</span><img src="./images/type01_yoshiki02.gif" alt=""></div></li>
</ul>
<ul class="toilet 01">
<li><h3>Multi-function Toilet</h3><img src="/utsukushitoilet/type/images/type01_takino01.jpg" alt=""><p>People in wheelchairs, Ostomate and people that are nursing babies have priority for these toilets and are more roomy for use by various people. The general public, such as elderly people may also use them.</p><div><span>Display for Multi-function Toilets</span><img src="/utsukushitoilet/type/images/type01_takino02.gif" alt=""></div></li> <li><h3>Multi-function Toilet</h3><img src="/utsukushitoilet/type/images/type01_takino01.jpg" alt=""><p>People in wheelchairs, Ostomate and people that are nursing babies have priority for these toilets and are more roomy for use by various people. The general public, such as elderly people may also use them.</p><div><span>Display for Multi-function Toilets</span><img src="/utsukushitoilet/type/images/type01_takino02.gif" alt=""></div></li>
<li><h3>Urinal</h3><img src="images/type01_urinal.jpg" alt=""><p>Washing is done automatically without having to touch the Wash button so it’s sanitary and comfortable.</p><div><span>Using the Flush Valve and the Automatic Wash</span><img src="/utsukushitoilet/type/images/type01_urinal02.gif" alt=""></div></li>
</ul>
<ul class="toilet 01">
<li><h3>Automatic Faucet</h3><img src="images/type01_autofaucet.jpg" alt=""><p>Soap and water is automatically dispensed without touching the faucet so it’s sanitary and comfortable.</p><div><span>Using the automatic water and soap dispenser</span><img src="images/type01_autofaucet02.gif" alt=""></div></li>
<li><h3>Hand Dryer</h3><img src="images/type01_handdryer.jpg" alt=""><p>This is a device that allows you to dry your hands with air after washing your hands.<br>Air will automatically be blown out when you place your hand near the vent.</p>
<div><span>Using the Compact Type and the Extended Type (Long Type)</span><img src="images/type01_handdryer02.gif" alt=""></div></li>
</ul> </ul>
<h2 class="line"><span>02</span>Toilets at Accommodations and Guestrooms</h2> <h2 class="line"><span>02</span>Toilets at Accommodations and Guestrooms</h2>
<ul> <ul>
...@@ -62,69 +63,11 @@ The Japanese-type toilet is most common at sight-seeing locations and adjusting ...@@ -62,69 +63,11 @@ The Japanese-type toilet is most common at sight-seeing locations and adjusting
<div class="point"> <div class="point">
<div> <div>
<h2><img src="/utsukushitoilet/shared/images/point.gif" alt="point!"></h2> <h2><img src="/utsukushitoilet/shared/images/point.gif" alt="point!"></h2>
<p> <p><img src="/utsukushitoilet/type/images/point_img01.png" alt="">
Precautions When Using Hotel Bathrooms<br /> <span>&lt;Precautions When Using Hotel Bathrooms&gt;</span>
Bathrooms in hotels have showers installed but they are to be used only in the bathtub.<br /> <span class="point_txt01">* Unit Baths have shower attachments; however use of the shower is limited to inside the bathtub.</span>
Additionally, if the bathroom is left open during use, it may cause the fire alarm to accidentally turn on<br /> <span class="point_txt01">* If there is a shower curtain, please close the curtain when showering to prevent the area around the toilet from getting wet.</span>
Please make sure to close the bathroom door when taking a shower. If there is a shower curtain, please close the curtain when showering to prevent the area around the toilet from getting wet.</p><div class="clear"></div> <span class="point_txt01">* Using the bathroom with the door open may cause the fire alarm to malfunction so make sure to close the bathroom door when using the bathroom. </span></p><div class="clear"></div>
</div>
</div>
</section>
<section id="use">
<div class="block">
<h1><span>Japan’s Toilet Situation</span>Using the Toilet Utilities</h1>
<h2 class="line"><span>01</span>How to Flush the Toilet</h2>
<p class="left">
The method to flush the toilet may differ depending on the type of toilet installed.<br />
For those with tanks, the lever handle location on the side of the tank is used to flush.<br />
Toilets without tanks, such as those located in public facilities and Japanese-style toilets are flushed with the lever handle<!-- in the back of the toilet bowl-->.<br />
Additionally, there are types that use buttons and levers on the wall, non-contact types (hand sensor) and those with remote control flush buttons.<br />
Some of the latest types of toilets will automatically flush when you stand up.</p>
<h3>Location of lever handles, etc.</h3>
<ul>
<li><img src="/utsukushitoilet/type/images/use01_img01.jpg" alt=""><p>Turn or twist the lever handle</p></li>
<li><img src="/utsukushitoilet/type/images/use01_img02.jpg" alt=""><p>Push the lever handle down</p></li>
<li><img src="/utsukushitoilet/type/images/use01_img03.jpg" alt=""><p>Push the lever handle down</p></li>
</ul><div class="clear"></div>
<ul>
<li><h3>Button</h3><img src="/utsukushitoilet/type/images/use01_img04.jpg" alt=""><p>Push the button</p></li>
<li><h3>Sensor</h3><img src="/utsukushitoilet/type/images/use01_img05.jpg" alt=""><p>Place hand over sensor</p></li>
</ul><div class="clear"></div>
</div>
<div class="point">
<div>
<h2><img src="/utsukushitoilet/shared/images/point.gif" alt="point!"></h2>
<p>Used toilet paper is flushed down the toilet along with the waste material for Japanese toilets.<br />
*Only toilet paper and the above mentioned flushable tissue paper can be flushed.<br />
Please dispose of sanitary materials and other items in the trash container located in the toilet.<br />
As a courtesy to people using the toilet after you, please check your surroundings and be sure to flush.</p><div class="clear"></div>
</div>
</div>
<div class="block">
<h2 class="line"><span>02</span>How to Use the Spray seat</h2>
<p class="left">When using the spray seat, the operation buttons located on the side of the toilet is used for operations.<br />
Additionally, if there are no operation buttons on the side, there will be a remote control located on the wall.<br />
The meanings of the buttons are as follows.</p>
<h3>Location of Operation Areas</h3>
<ul>
<li><img src="/utsukushitoilet/type/images/use02_img01.jpg" alt=""></li>
<li><img src="/utsukushitoilet/type/images/use02_img02.jpg" alt=""></li>
</ul><div class="clear"></div>
<h3>Meaning of Operation Area Illustrations</h3>
<ul id="operation">
<li><img src="/utsukushitoilet/type/images/use02_img03.gif" alt=""></li>
<li><img src="/utsukushitoilet/type/images/use02_img04.gif" alt=""></li>
<li><img src="/utsukushitoilet/type/images/use02_img05.gif" alt=""></li>
</ul><div class="clear"></div>
<h2 class="line"><span>03</span>Toilet Sound Effects Device</h2>
<div class="bisection">
<p>In Japan, in order to camouflage the sound of excretion, there is something called the "Sound Effects Device" that mimics the sound of running water. There are types that automatically sound when a person is detected entering the toilet, those that sound when your hand is placed over a sensor, and those that will sound when a button is pressed. This is different from the flush button and so you should search for the flush button if you mistake the sound button for the flush button.</p>
<div><img src="./images/use03_img01.gif" alt=""></div><div class="clear"></div>
</div>
<h2 class="line"><span>04</span>Emergency Call Button</h2>
<div class="bisection">
<p>There may be an Emergency Call Button located near the flush button. This is an emergency button for people who feel ill in the toilet so please be careful not to press the "Call" button unless it is an emergency.</p>
<div><img src="/utsukushitoilet/type/images/use04_img01.jpg" alt=""></div><div class="clear"></div>
</div> </div>
</div> </div>
</section> </section>
......
utsukushitoilet/howtouse/css/style.css
...@@ -137,7 +137,8 @@ h3 { ...@@ -137,7 +137,8 @@ h3 {
display: block; display: block;
clear: both; clear: both;
} }
.bisection p { .bisection p,
.bisection .lft {
float: left; float: left;
width: 48%; width: 48%;
text-align: left; text-align: left;
...@@ -203,10 +204,12 @@ h3 { ...@@ -203,10 +204,12 @@ h3 {
.bisection { .bisection {
margin: 0 4%; margin: 0 4%;
} }
.bisection p { .bisection p,
.bisection .lft {
float: none; float: none;
width: inherit; width: inherit;
padding: 20px 0 padding: 20px 0;
margin-bottom: 0;
} }
.bisection div { .bisection div {
float: none; float: none;
...@@ -216,6 +219,11 @@ h3 { ...@@ -216,6 +219,11 @@ h3 {
.bisection div img { .bisection div img {
max-width: 578px; max-width: 578px;
} }
#use .left02{
width: 92%;
float: none;
margin: auto;
}
#use .left.01{ #use .left.01{
width: 100%; width: 100%;
float: none; float: none;
...@@ -304,3 +312,15 @@ h3 { ...@@ -304,3 +312,15 @@ h3 {
padding-left: 1em; padding-left: 1em;
text-indent: -1em; text-indent: -1em;
} }
#use .txt_list {
list-style: disc;
margin-bottom: 0;
}
#use .txt_list li {
display: list-item;
width: auto;
margin: 0 0 0 1.2em;
float: none;
}
utsukushitoilet/howtouse/index.html
...@@ -50,15 +50,17 @@ includeHead_Ja('div'); ...@@ -50,15 +50,17 @@ includeHead_Ja('div');
<h1><span>日本のトイレ事情</span>トイレ内の器具の使い方</h1> <h1><span>日本のトイレ事情</span>トイレ内の器具の使い方</h1>
<p>日本のトイレにはたくさんの機能があります。<br>ここでは、「トイレの流し方」「温水洗浄便座の使い方」「擬音装置」「緊急呼び出しボタン」についての使い方をご紹介します。</p> <p>日本のトイレにはたくさんの機能があります。<br>ここでは、「トイレの流し方」「温水洗浄便座の使い方」「擬音装置」「緊急呼び出しボタン」についての使い方をご紹介します。</p>
<h2 class="line"><span>01</span>トイレの流し方</h2> <h2 class="line"><span>01</span>トイレの流し方</h2>
<div class="box"><p class="left02"> <div class="box"><div class="left02">
トイレを流す方法は、設置しているトイレによって方法が異なります。 トイレを流す方法は、設置しているトイレによって方法が異なります。
<span class="point_txt01">●タンク式の場合：タンク横のレバーハンドルを回して洗浄します。</span> <ul class="txt_list">
<span class="point_txt01">●タンクのないトイレの場合：レバーを押して洗浄します。</span> <li>タンク式の場合：タンク横のレバーハンドルを回して洗浄します。</li>
<span class="point_txt01">●その他：壁面のボタンや非接触型（手をかざす）センサーでの洗浄、リモコンの中の洗浄ボタンによるものがあります。</span> <li>タンクのないトイレの場合：レバーを押して洗浄します。</li>
<li>その他：壁面のボタンや非接触型（手をかざす）センサーでの洗浄、リモコンの中の洗浄ボタンによるものがあります。</li>
</ul>
最新のトイレでは、便器から立ち上がると自動で洗浄するものもあります。 最新のトイレでは、便器から立ち上がると自動で洗浄するものもあります。
</p> </div>
<p class="right"><img src="images/3609.gif" alt=""><span>このマークはトイレを流すスイッチです。</span></p> <p class="right"><img src="images/3609.gif" alt=""><span>このマークはトイレを流すスイッチです。</span></p>
</div> </div>
<h3>レバーハンドル等</h3> <h3>レバーハンドル等</h3>
<ul> <ul>
<li><img src="images/use01_img01.jpg" alt=""><p>レバーハンドルを回す</p></li> <li><img src="images/use01_img01.jpg" alt=""><p>レバーハンドルを回す</p></li>
...@@ -74,21 +76,21 @@ includeHead_Ja('div'); ...@@ -74,21 +76,21 @@ includeHead_Ja('div');
<div class="point"> <div class="point">
<div> <div>
<h2><img src="/utsukushitoilet/shared/images/point.gif" alt="point!"></h2> <h2><img src="/utsukushitoilet/shared/images/point.gif" alt="point!"></h2>
<p><img src="/utsukushitoilet/howtouse/images/point_img01.png" alt="point!"> <div class="box"><img src="/utsukushitoilet/howtouse/images/point_img01.png" alt="">
<span class="point_txt01">● トイレの使用後は、後から使用される方のためにも必ず流してください。</span> <ul class="txt_list">
<span class="point_txt01">● 日本のトイレでは、使用後のトイレットペーパーは、そのまま便器の中に落として流してください。<br> <li>トイレの使用後は、後から使用される方のためにも必ず流してください。</li>
<li>日本のトイレでは、使用後のトイレットペーパーは、そのまま便器の中に落として流してください。<br>
※トイレに流せる紙は、トイレットペーパーやトイレに流せるティッシュペーパーのみです。<br> ※トイレに流せる紙は、トイレットペーパーやトイレに流せるティッシュペーパーのみです。<br>
※生理用品やそれ以外のものは、トイレ内に設置されているゴミ箱に捨ててください。</span> ※生理用品やそれ以外のものは、トイレ内に設置されているゴミ箱に捨ててください。</li>
</p><div class="clear"></div> </ul>
</div><div class="clear"></div>
</div> </div>
</div> </div>
<div class="block"> <div class="block">
<h2 class="line"><span>02</span>温水洗浄便座の使い方</h2> <h2 class="line"><span>02</span>温水洗浄便座の使い方</h2>
<div class="bisection02"> <p class="left bisection02">温水洗浄便座を使用する際は、便座本体の側面にある操作ボタンで操作できます。<br>
<p class="left">温水洗浄便座を使用する際は、便座本体の側面にある操作ボタンで操作できます。<br>
また、側面に操作ボタンがない場合は、壁面等にあるリモコンで操作ができます。<br> また、側面に操作ボタンがない場合は、壁面等にあるリモコンで操作ができます。<br>
ボタンの意味は、以下の通りです。</p> ボタンの意味は、以下の通りです。</p>
</div>
<h3>操作部の場所</h3> <h3>操作部の場所</h3>
<ul> <ul>
<li><img src="images/use02_img01.jpg" alt=""></li> <li><img src="images/use02_img01.jpg" alt=""></li>
...@@ -102,11 +104,13 @@ includeHead_Ja('div'); ...@@ -102,11 +104,13 @@ includeHead_Ja('div');
</ul><div class="clear"></div> </ul><div class="clear"></div>
<h2 class="line"><span>03</span>トイレ擬音装置</h2> <h2 class="line"><span>03</span>トイレ擬音装置</h2>
<div class="bisection"> <div class="bisection">
<p> <div class="lft">
日本の公共トイレでは、排せつ音などを周囲に聞こえないようにするために、流水音を出す『擬音装置』というものが設置されている場合があります。それぞれ、タイプに応じて次のように操作します。音は、一定時間鳴ると自動的に止まるようになっています。 日本の公共トイレでは、排せつ音などを周囲に聞こえないようにするために、流水音を出す『擬音装置』というものが設置されている場合があります。それぞれ、タイプに応じて次のように操作します。音は、一定時間鳴ると自動的に止まるようになっています。
<span class="point_txt01">● センサータイプ：手をかざすと音が鳴り出します。</span> <ul class="txt_list">
<span class="point_txt01">● ボタンタイプ：ボタンを押すと音が鳴り出します。</span> <li>センサータイプ：手をかざすと音が鳴り出します。</li>
<span class="point_txt01">●自動タイプ：トイレに入ると人を感知して自動で音が鳴り出します。</p> <li>ボタンタイプ：ボタンを押すと音が鳴り出します。</li>
<li>自動タイプ：トイレに入ると人を感知して自動で音が鳴り出します。</li>
</ul></div>
<div><img src="images/use03_img01.gif" alt=""></div><div class="clear"></div> <div><img src="images/use03_img01.gif" alt=""></div><div class="clear"></div>
</div> </div>
<h2 class="line"><span>04</span>緊急呼び出しボタン</h2> <h2 class="line"><span>04</span>緊急呼び出しボタン</h2>
......
utsukushitoilet/howtouse/index2.html 0 → 100644
<!DOCTYPE html>
<html lang="ja" prefix="og: http://ogp.me/ns#">
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta charset="UTF-8">
<meta name="keywords" content="">
<meta name="description" content="">
<title>トイレ内器具の使い方 - NIPPON UTSUKUSHI TOILET</title>
<link rel="stylesheet" href="/utsukushitoilet/shared/css/reset.css" type="text/css" media="all">
<link rel="stylesheet" href="/utsukushitoilet/shared/css/common.css" type="text/css" media="all">
<link rel="stylesheet" href="css/style.css" type="text/css" media="all">
<script type="text/javascript" src="/utsukushitoilet/shared/js/jquery.js"></script>
<script type="text/javascript" src="/utsukushitoilet/shared/js/jquery.plugin.js"></script>
<script type="text/javascript" src="/utsukushitoilet/shared/js/common.js"></script>
<script type="text/javascript" src="/utsukushitoilet/shared/js/common_parts.js"></script>
<script type="text/javascript">
$(document).ready(function(){
if ($(window).width() > 640) {
$("#toilet li").autoHeight();
}
});
</script>
</head>
<body class="second" id="howtouse">
<!-- google analytics -->
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-560401-9']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<!-- //google analytics -->
<script type="text/javascript" >
<!--
includeHead('div');
//-->
</script>
<noscript>
<p>当サイトはJavaScriptをonにしてご覧ください。</p>
</noscript>
<section id="use" class="first">
<div class="block">
<h1><span>日本のトイレ事情</span>トイレ内の器具の使い方</h1>
<p>一般社団法人 日本レストルーム工業会で、トイレ操作パネルの標準ピクトグラムを策定しました。<br>詳しくはトイレナビ関連記事「<a href="/news/news1142" target="_blank">トイレ操作パネルの標準ピクトグラムを策定しました。</a>」をご覧ください。 </p>
<h2 class="line"><span>01</span>トイレの流し方</h2>
<div class="box"><p class="left02">
設置しているトイレによって、洗浄方法が異なります。<br>
タンク式の場合は、タンク横のレバーハンドルで洗浄できます。<br>
公共施設のトイレや和式トイレなどのタンクのないトイレの場合は、レバーハンドルで洗浄ができます。
また、壁面のボタンやレバー、非接触型（手をかざす）での洗浄、リモコンの洗浄ボタンによるものもあります。<br>
最新のトイレでは、便器から立ち上がると自動で洗浄するものもあります。
</p>
<p class="right"><img src="images/3609.gif" alt=""><span>このマークはトイレを流すスイッチです。</span></p>
</div>
<h3>レバーハンドル等のある場所</h3>
<ul>
<li><img src="images/use01_img01.jpg" alt=""><p>レバーハンドルを回す or ひねる</p></li>
<li><img src="images/use01_img02.jpg" alt=""><p>レバーハンドルを下げる</p></li>
<li><img src="images/use01_img03.jpg" alt=""><p>レバーハンドルを下げる</p></li>
</ul><div class="clear"></div>
<ul>
<li><h3>壁面ボタン</h3><img src="images/use01_img04.jpg" alt=""><p>便器洗浄ボタンが独立しているタイプ</p></li>
<li><h3>リモコン</h3><img src="images/use01_img06.jpg" alt=""><p>操作ボタンと一緒になっているタイプ</p></li>
<li><h3>センサー</h3><img src="images/use01_img05.jpg" alt=""><p>手をかざして洗浄するセンサータイプ</p></li>
</ul><div class="clear"></div>
</div>
<div class="point">
<div>
<h2><img src="/utsukushitoilet/shared/images/point.gif" alt="point!"></h2>
<p>
日本のトイレでは、ご使用になったトイレットペーパーは、
そのまま便器の中に落とし、汚物と一緒に流してください。<br>
※一緒に流せるのは、トイレットペーパー・前述の水に流せる
ティッシュペーパーのみです。<br>
生理用品やそれ以外のものは、トイレ内に設置されているゴミ箱に
捨ててください。<br>
トイレの回りを確認して、後から使用される方のためにも
必ず洗浄してください。
</p><div class="clear"></div>
</div>
</div>
<div class="block">
<h2 class="line"><span>02</span>温水洗浄便座の使い方</h2>
<div class="bisection02">
<p class="left">温水洗浄便座を使用する際は、便座本体の側面にある操作ボタンで操作できます。<br>
また、側面に操作ボタンがない場合は、壁面等にあるリモコンで操作ができます。<br>
ボタンの意味は、以下の通りです。</p>
</div>
<h3>操作部の場所</h3>
<ul>
<li><img src="images/use02_img01.jpg" alt=""></li>
<li><img src="images/use02_img02.jpg" alt=""></li>
</ul><div class="clear"></div>
<h3>操作部イラストの意味</h3>
<ul id="operation">
<li><img src="images/use02_img03.gif" alt=""></li>
<li><img src="images/use02_img04.gif" alt=""></li>
<li><img src="images/use02_img05.gif" alt=""></li>
</ul><div class="clear"></div>
<h2 class="line"><span>03</span>トイレ擬音装置</h2>
<div class="bisection">
<p>日本では、排泄音を消したりするために、流水音を出す『擬音装置』というものがあります。トイレに入ると人を感知して自動で音が鳴り出すものと手をかざしたり、ボタンを押したりすれば音が鳴り出すものがあります。大便器の洗浄ボタンとは異なりますので、間違ったら大便器の洗浄ボタンを探してください。</p>
<div><img src="images/use03_img01.gif" alt=""></div><div class="clear"></div>
</div>
<h2 class="line"><span>04</span>緊急呼び出しボタン</h2>
<div class="bisection">
<p>洗浄操作ボタンの近くに緊急用の呼び出しボタンが付いていることがあります。トイレ内で気分が悪くなったりした方向けの緊急呼び出しボタンですので、『呼出』の文字を見たら、緊急時以外は押さないように気をつけましょう。</p>
<div><img src="images/use04_img01.jpg" alt=""></div><div class="clear"></div>
</div>
</div>
</section>
<script type="text/javascript" >
<!--
includeFoot();
//-->
</script>
</body>
</html>
\ No newline at end of file
utsukushitoilet/howtouse/index_191023.html 0 → 100644
<!DOCTYPE html>
<html lang="ja" prefix="og: http://ogp.me/ns#">
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta charset="UTF-8">
<meta name="keywords" content="">
<meta name="description" content="">
<title>トイレ内器具の使い方 - NIPPON UTSUKUSHI TOILET</title>
<link rel="stylesheet" href="/utsukushitoilet/shared/css/reset.css" type="text/css" media="all">
<link rel="stylesheet" href="/utsukushitoilet/shared/css/common_b.css" type="text/css" media="all">
<link rel="stylesheet" href="css/style.css" type="text/css" media="all">
<script type="text/javascript" src="/utsukushitoilet/shared/js/jquery.js"></script>
<script type="text/javascript" src="/utsukushitoilet/shared/js/jquery.plugin.js"></script>
<script type="text/javascript" src="/utsukushitoilet/shared/js/common.js"></script>
<script type="text/javascript" src="/utsukushitoilet/shared/js/common_parts.js"></script>
<script type="text/javascript">
$(document).ready(function(){
if ($(window).width() > 640) {
$("#toilet li").autoHeight();
}
});
</script>
</head>
<body class="second" id="howtouse">
<!-- google analytics -->
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-560401-9']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<!-- //google analytics -->
<section id="use" class="first">
<div class="block">
<h1><span>日本のトイレ事情</span>トイレ内の器具の使い方</h1>
<p>一般社団法人 日本レストルーム工業会で、トイレ操作パネルの標準ピクトグラムを策定しました。<br>詳しくはトイレナビ関連記事「<a href="/news/news1142" target="_blank">トイレ操作パネルの標準ピクトグラムを策定しました。</a>」をご覧ください。 </p>
<h2 class="line"><span>01</span>トイレの流し方</h2>
<div class="box"><p class="left02">
設置しているトイレによって、洗浄方法が異なります。<br>
タンク式の場合は、タンク横のレバーハンドルで洗浄できます。<br>
公共施設のトイレや和式トイレなどのタンクのないトイレの場合は、レバーハンドルで洗浄ができます。
また、壁面のボタンやレバー、非接触型（手をかざす）での洗浄、リモコンの洗浄ボタンによるものもあります。<br>
最新のトイレでは、便器から立ち上がると自動で洗浄するものもあります。
</p>
<p class="right"><img src="images/3609.gif" alt=""><span>このマークはトイレを流すスイッチです。</span></p>
</div>
<h3>レバーハンドル等のある場所</h3>
<ul>
<li><img src="images/use01_img01.jpg" alt=""><p>レバーハンドルを回す or ひねる</p></li>
<li><img src="images/use01_img02.jpg" alt=""><p>レバーハンドルを下げる</p></li>
<li><img src="images/use01_img03.jpg" alt=""><p>レバーハンドルを下げる</p></li>
</ul><div class="clear"></div>
<ul>
<li><h3>壁面ボタン</h3><img src="images/use01_img04.jpg" alt=""><p>便器洗浄ボタンが独立しているタイプ</p></li>
<li><h3>リモコン</h3><img src="images/use01_img06.jpg" alt=""><p>操作ボタンと一緒になっているタイプ</p></li>
<li><h3>センサー</h3><img src="images/use01_img05.jpg" alt=""><p>手をかざして洗浄するセンサータイプ</p></li>
</ul><div class="clear"></div>
</div>
<div class="point">
<div>
<h2><img src="/utsukushitoilet/shared/images/point.gif" alt="point!"></h2>
<p>
日本のトイレでは、ご使用になったトイレットペーパーは、
そのまま便器の中に落とし、汚物と一緒に流してください。<br>
※一緒に流せるのは、トイレットペーパー・前述の水に流せる
ティッシュペーパーのみです。<br>
生理用品やそれ以外のものは、トイレ内に設置されているゴミ箱に
捨ててください。<br>
トイレの回りを確認して、後から使用される方のためにも
必ず洗浄してください。
</p><div class="clear"></div>
</div>
</div>
<div class="block">
<h2 class="line"><span>02</span>温水洗浄便座の使い方</h2>
<div class="bisection02">
<p class="left">温水洗浄便座を使用する際は、便座本体の側面にある操作ボタンで操作できます。<br>
また、側面に操作ボタンがない場合は、壁面等にあるリモコンで操作ができます。<br>
ボタンの意味は、以下の通りです。</p>
</div>
<h3>操作部の場所</h3>
<ul>
<li><img src="images/use02_img01.jpg" alt=""></li>
<li><img src="images/use02_img02.jpg" alt=""></li>
</ul><div class="clear"></div>
<h3>操作部イラストの意味</h3>
<ul id="operation">
<li><img src="images/use02_img03.gif" alt=""></li>
<li><img src="images/use02_img04.gif" alt=""></li>
<li><img src="images/use02_img05.gif" alt=""></li>
</ul><div class="clear"></div>
<h2 class="line"><span>03</span>トイレ擬音装置</h2>
<div class="bisection">
<p>日本では、排泄音を消したりするために、流水音を出す『擬音装置』というものがあります。トイレに入ると人を感知して自動で音が鳴り出すものと手をかざしたり、ボタンを押したりすれば音が鳴り出すものがあります。大便器の洗浄ボタンとは異なりますので、間違ったら大便器の洗浄ボタンを探してください。</p>
<div><img src="images/use03_img01.gif" alt=""></div><div class="clear"></div>
</div>
<h2 class="line"><span>04</span>緊急呼び出しボタン</h2>
<div class="bisection">
<p>洗浄操作ボタンの近くに緊急用の呼び出しボタンが付いていることがあります。トイレ内で気分が悪くなったりした方向けの緊急呼び出しボタンですので、『呼出』の文字を見たら、緊急時以外は押さないように気をつけましょう。</p>
<div><img src="images/use04_img01.jpg" alt=""></div><div class="clear"></div>
</div>
</div>
</section>
<script type="text/javascript" >
<!--
includeFoot();
//-->
</script>
</body>
</html>
\ No newline at end of file
utsukushitoilet/howtouse/index_200319.html 0 → 100644
<!DOCTYPE html>
<html lang="ja" prefix="og: http://ogp.me/ns#">
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta charset="UTF-8">
<meta name="keywords" content="">
<meta name="description" content="">
<title>トイレ内器具の使い方 : JAPAN TOILET INFORMATION -NIPPON UTSUKUSHI TOILET-</title>
<link rel="stylesheet" href="/utsukushitoilet/shared/css/reset.css" type="text/css" media="all">
<link rel="stylesheet" href="/utsukushitoilet/shared/css/common_jp.css" type="text/css" media="all">
<link rel="stylesheet" href="css/style.css" type="text/css" media="all">
<script type="text/javascript" src="/utsukushitoilet/shared/js/jquery.js"></script>
<script type="text/javascript" src="/utsukushitoilet/shared/js/jquery.plugin.js"></script>
<script type="text/javascript" src="/utsukushitoilet/shared/js/common.js?ver=191024"></script>
<script type="text/javascript" src="/utsukushitoilet/shared/js/common_parts.js?ver=191024"></script>
<script type="text/javascript">
$(document).ready(function(){
if ($(window).width() > 640) {
$("#toilet li").autoHeight();
}
});
</script>
</head>
<body class="second" id="howtouse">
<!-- google analytics -->
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-560401-9']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<!-- //google analytics -->
<script type="text/javascript" >
<!--
includeHead_Ja('div');
//-->
</script>
<noscript>
<p>当サイトはJavaScriptをonにしてご覧ください。</p>
</noscript>
<section id="use" class="first">
<div class="block" id="breadcrumbs_area">
<p class="breadcrumbs"><a href="/utsukushitoilet/">TOP</a> &gt; <em>日本のトイレ事情-トイレ内の器具の使い方</em></p>
</div>
<div class="block">
<h1><span>日本のトイレ事情</span>トイレ内の器具の使い方</h1>
<p>日本のトイレにはたくさんの機能があります。<br>ここでは、「トイレの流し方」「温水洗浄便座の使い方」「擬音装置」「緊急呼び出しボタン」についての使い方をご紹介します。</p>
<h2 class="line"><span>01</span>トイレの流し方</h2>
<div class="box"><p class="left02">
トイレを流す方法は、設置しているトイレによって方法が異なります。
<span class="point_txt01">●タンク式の場合：タンク横のレバーハンドルを回して洗浄します。</span>
<span class="point_txt01">●タンクのないトイレの場合：レバーを押して洗浄します。</span>
<span class="point_txt01">●その他：壁面のボタンや非接触型（手をかざす）センサーでの洗浄、リモコンの中の洗浄ボタンによるものがあります。</span>
最新のトイレでは、便器から立ち上がると自動で洗浄するものもあります。
</p>
<p class="right"><img src="images/3609.gif" alt=""><span>このマークはトイレを流すスイッチです。</span></p>
</div>
<h3>レバーハンドル等</h3>
<ul>
<li><img src="images/use01_img01.jpg" alt=""><p>レバーハンドルを回す</p></li>
<li><img src="images/use01_img02.jpg" alt=""><p>レバーを押し下げる</p></li>
<li><img src="images/use01_img03.jpg" alt=""><p>レバーを押し下げる</p></li>
</ul><div class="clear"></div>
<ul>
<li><h3>壁面ボタン</h3><img src="images/use01_img04.jpg" alt=""><p>ボタンを押す</p></li>
<li><h3>リモコン</h3><img src="images/use01_img06.jpg" alt=""><p>温水洗浄便座のリモコン内にあるボタンを押す</p></li>
<li><h3>センサー</h3><img src="images/use01_img05.jpg" alt=""><p>センサーに手をかざす</p></li>
</ul><div class="clear"></div>
</div>
<div class="point">
<div>
<h2><img src="/utsukushitoilet/shared/images/point.gif" alt="point!"></h2>
<p><img src="/utsukushitoilet/howtouse/images/point_img01.png" alt="point!">
<span class="point_txt01">● トイレの使用後は、後から使用される方のためにも必ず流してください。</span>
<span class="point_txt01">● 日本のトイレでは、使用後のトイレットペーパーは、そのまま便器の中に落として流してください。<br>
※トイレに流せる紙は、トイレットペーパーやトイレに流せるティッシュペーパーのみです。<br>
※生理用品やそれ以外のものは、トイレ内に設置されているゴミ箱に捨ててください。</span>
</p><div class="clear"></div>
</div>
</div>
<div class="block">
<h2 class="line"><span>02</span>温水洗浄便座の使い方</h2>
<div class="bisection02">
<p class="left">温水洗浄便座を使用する際は、便座本体の側面にある操作ボタンで操作できます。<br>
また、側面に操作ボタンがない場合は、壁面等にあるリモコンで操作ができます。<br>
ボタンの意味は、以下の通りです。</p>
</div>
<h3>操作部の場所</h3>
<ul>
<li><img src="images/use02_img01.jpg" alt=""></li>
<li><img src="images/use02_img02.jpg" alt=""></li>
</ul><div class="clear"></div>
<h3>操作部イラストの意味</h3>
<ul id="operation">
<li><img src="images/use02_img03.gif" alt=""></li>
<li><img src="images/use02_img04.gif" alt=""></li>
<li><img src="images/use02_img05.gif" alt=""></li>
</ul><div class="clear"></div>
<h2 class="line"><span>03</span>トイレ擬音装置</h2>
<div class="bisection">
<p>
日本の公共トイレでは、排せつ音などを周囲に聞こえないようにするために、流水音を出す『擬音装置』というものが設置されている場合があります。それぞれ、タイプに応じて次のように操作します。音は、一定時間鳴ると自動的に止まるようになっています。
<span class="point_txt01">● センサータイプ：手をかざすと音が鳴り出します。</span>
<span class="point_txt01">● ボタンタイプ：ボタンを押すと音が鳴り出します。</span>
<span class="point_txt01">●自動タイプ：トイレに入ると人を感知して自動で音が鳴り出します。</p>
<div><img src="images/use03_img01.gif" alt=""></div><div class="clear"></div>
</div>
<h2 class="line"><span>04</span>緊急呼び出しボタン</h2>
<div class="bisection">
<p>洗浄操作ボタンの近くに写真のような緊急用の呼出ボタンが付いていることがあります。トイレ内で気分が悪くなったりした場合にこれを押すと、係員が駆けつけて来ます。緊急時以外は押さないように気をつけましょう。</p>
<div><img src="images/use04_img01.jpg" alt=""></div><div class="clear"></div>
</div>
</div>
</section>
<script type="text/javascript" >
<!--
includeFoot();
//-->
</script>
</body>
</html>
\ No newline at end of file
utsukushitoilet/index.html
...@@ -174,6 +174,9 @@ includeHead_Ja('h1'); ...@@ -174,6 +174,9 @@ includeHead_Ja('h1');
</li> </li>
</ul> </ul>
</div> </div>
<div class="under_menu_box manage">
<a href="/utsukushitoilet/owner/" target="_blank">施設オーナー・管理者様向け</a>
</div>
</div> </div>
</section> </section>
<script type="text/javascript" > <script type="text/javascript" >
......
utsukushitoilet/kr/css/style.css
...@@ -158,3 +158,170 @@ ...@@ -158,3 +158,170 @@
} }
} }
/* 2020.2.19 update */
.showcase {
position: relative;
height: 640px;
background: url(/utsukushitoilet/images/main_visual0.jpg) no-repeat top center;
background-size: cover;
}
.inner-showcase {
position: relative;
height: 100%;
}
.inner-showcase .menu_box {
position: absolute;
left: 0;
right: 0;
bottom: -2.5em;
margin: auto;
}
.inner-showcase .menu_box .header_nav,
.inner-showcase .menu_box .latest {
box-shadow: 0 0 1.5em 0 rgba(0,0,0,.3);
}
.inner-showcase .menu_box .manage a {
color: #e9573e;
}
.inner-showcase .menu_box .manage a::before {
background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%205%2010%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20fill%3D%22%23e9573e%22%20d%3D%22M5.000%2C5.000%20L-0.000%2C-0.000%20L-0.000%2C10.000%20L5.000%2C5.000%20Z%22%2F%3E%3C%2Fsvg%3E');
}
.inner-showcase .header_nav li:first-child {
padding: .2em 0;
background-color: #e9573e;
border: none;
border-bottom: solid 1px #ccc;
}
.inner-showcase .header_nav li {
border-color: #ccc;
}
.showcase_phrase {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.showcase_phrase img {
display: block;
width: 100%;
}
#situation {
padding-top: 0;
margin-top: 8em;
background: none;
}
@media screen and (max-width:640px){
.showcase {
height: 100vw;
}
.showcase_phrase {
width: 90%;
margin: auto;
}
#situation {
margin-top: 20vw;
}
}
#owner > div {
max-width: 980px;
width: 100%;
margin: 0 auto;
text-align: center;
}
#owner h2 {
margin-bottom: 30px;
font-size: 30px;
font-weight: bold;
display: inline-block;
border-bottom: solid 1px #e8392d;
line-height: 1.2em;
}
.owner_menu {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 3em;
}
.owner_menu li {
display: block;
width: 23.8%;
margin: 0 1em;
position: relative;
line-height: 1.4;
}
.owner_menu li a {
display: block;
padding: 8px;
border: solid 2px #f5b5aa;
text-align: center;
font-weight: bold;
color: #e9573e;
}
.owner_menu li p {
margin-top: 1em;
text-align: left;
}
.inner-showcase .menu_box .latest b {
display: block;
padding: .2em 0;
background-color: #e9573e;
border: none;
border-bottom: solid 1px #ccc;
text-align: center;
font-size: 14px;
color: #fff;
}
.header_flxpc .latest a {
padding: 2.532em 4em 2.532em 6em;
}
.inner-showcase .menu_box .manage a {
padding: 0 0 0 .71em;
background-color: #e9573e;
color: #fff;
}
.inner-showcase .menu_box .manage a::before {
content: none;
}
.inner-showcase .menu_box .manage a::after {
content: "";
display: inline-block;
width: .6em;
height: .6em;
margin-left: .2em;
margin-right: .5em;
background: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%205%2010%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20fill%3D%22%23fff%22%20d%3D%22M5.000%2C5.000%20L-0.000%2C-0.000%20L-0.000%2C10.000%20L5.000%2C5.000%20Z%22%2F%3E%3C%2Fsvg%3E') no-repeat center;
background-size: contain;
}
br.sp{
display: none;
}
@media screen and (max-width:640px){
.inner-showcase .menu_box .latest b {
font-size: 2.5vw;
}
.header_flxpc .latest a {
padding: 1em 0 1em 3.5em;
}
.owner_menu li {
display: block;
width: 100%;
margin: 0 1em;
position: relative;
line-height: 1.4;
}
br.sp{
display: block;
}
}
utsukushitoilet/kr/howtouse/css/style.css 0 → 100644
@charset "UTF-8";
h2.line {
border-top: solid 1px #ccc;
border-bottom: solid 1px #ccc;
font-size: 24px;
font-weight: bold;
padding: 36px 0;
position: relative;
margin-top: 60px;
line-height: 1.4;
clear: both;
}
h2.line span {
color: #e9573e;
font-weight: normal;
font-size: 40px;
position: absolute;
left: 0;
right: 0;
top: -32px;
}
h3 {
font-weight: bold;
font-size: 20px;
}
#kind ul {
padding: 50px 0;
}
#kind ul:after {
content: "";
display: block;
clear: both;
}
#kind li {
display: block;
width: 31.3%;
float: left;
text-align: left;
margin-left: 3%;
background-color: #f7f6f2;
}
#kind li:first-child {
margin-left: 0;
}
#kind li h3 {
background-color: #fff;
text-align: center;
padding-bottom: 10px;
}
#kind li img {
width: 100%;
}
#kind li p {
padding: 20px;
margin-bottom: 10px;
}
#kind li div {
border-top: solid 1px #e1e0db;
margin: 0 auto;
width: 92%;
padding-bottom: 10px;
}
#kind li div img {
border: solid 1px #e1e0db;
display: block;
margin-bottom: 10px;
}
#kind li span {
display: block;
text-align: center;
font-weight: bold;
font-size: 14px;
}
#use .left {
text-align: left;
padding: 40px 0;
}
#use h3 {
text-align: left;
padding-bottom: 10px;
}
#use ul {
margin-bottom: 20px;
}
#use li {
display: block;
width: 31.3%;
float: left;
text-align: left;
margin-left: 3%;
margin-bottom: 40px;
}
#use li:first-child {
margin-left: 0;
}
#use li img {
width: 100%;
}
#operation img {
border: solid 1px #ccc;
}
.bisection {
margin-top: 40px;
margin-bottom: 100px;
}
.bisection02 {
margin-top: 40px;
margin-bottom: 40px;
}
.bisection:after {
content: "";
display: block;
clear: both;
}
.bisection p,
.bisection .lft {
float: left;
width: 48%;
text-align: left;
}
.bisection div {
float: right;
width: 50%;
}
.bisection div img {
width: 100%;
max-width: 472px;
border: solid 1px #ccc;
}
/* 0-640px ----*/
@media screen and (max-width:640px){
h2.line {
margin-left: 4%;
margin-right: 4%;
}
#kind li {
float: none;
display: block;
clear: both;
width: 92%;
margin: 1px auto 20px auto;
}
#kind li:first-child {
margin-left: auto;
}
#kind li:after {
content: "";
display: block;
clear: both;
}
#kind li span {
padding: 6px;
font-size: inherit;
}
#kind li strong {
position: absolute;
display: block;
}
#use h3 {
margin: 0 4%;
}
#use li {
float: none;
display: block;
clear: both;
width: 92%;
margin: 1px auto 30px auto;
}
#use li p {
margin: 10px 0;
}
#use li:first-child {
margin-left: auto;
}
#use li h3 {
margin: 0;
}
.bisection {
margin: 0 4%;
}
.bisection p,
.bisection .lft {
float: none;
width: inherit;
padding: 20px 0;
margin-bottom: 0;
}
.bisection div {
float: none;
width: inherit;
margin-bottom: 40px;
}
.bisection div img {
max-width: 578px;
}
}
#use .box{
overflow: hidden;
}
#use .left{
padding: 0;
text-align: left;
}
#use .left02{
text-align: left;
padding: 40px 0;
width: 76%;
float: left;
}
#use .right {
text-align: left;
padding: 40px 0;
margin-top: 40px;
margin-left: auto;
width: 18%;
padding: 10px;
border: 1px solid #e1e0db;
text-align: center;
}
#use .right span{
display: block;
margin-top: 10px;
}
@media screen and (max-width:640px){
#use .left02{
width: 92%;
float: none;
margin: auto;
}
#use .left.01{
width: 100%;
float: none;
}
#use .right{
width: 90%;
margin: auto;
margin-top: 0;
margin-bottom: 40px;
}
}
#kind ul#toilet li {
display: block;
width: 48.4%;
float: left;
text-align: left;
margin-right: 3%;
margin-left: 0;
background-color: #f7f6f2;
}
#kind ul#toilet li:nth-child(2) {
margin-right: 0;
}
#kind ul#toilet li h3 {
background-color: #fff;
text-align: center;
padding-bottom: 10px;
}
#kind ul#toilet li img {
width: 100%;
}
#kind ul#toilet li p {
padding: 20px;
margin-bottom: 10px;
}
#kind ul#toilet li div {
border-top: solid 1px #e1e0db;
margin: 0 auto;
width: 92%;
padding-bottom: 10px;
}
#kind ul#toilet li div img {
border: solid 1px #e1e0db;
display: block;
margin-bottom: 10px;
}
#kind ul#toilet li span {
display: block;
text-align: center;
font-weight: bold;
font-size: 14px;
padding: 10px 0;
}
@media screen and (max-width:640px){
#kind ul#toilet li {
float: none;
display: block;
clear: both;
width: 92%;
margin: 1px auto 20px auto;
}
#kind ul#toilet li:nth-child(2) {
margin-right: auto;
}
#kind ul#toilet li:after {
content: "";
display: block;
clear: both;
}
#kind ul#toilet li span {
padding: 6px;
font-size: inherit;
}
#kind ul#toilet li strong {
position: absolute;
display: block;
}
}
/* 20200109updata */
#use span.point_txt01{
display: block;
padding-left: 1em;
text-indent: -1em;
}
#use .txt_list {
list-style: disc;
margin-bottom: 0;
}
#use .txt_list li {
display: list-item;
width: auto;
margin: 0 0 0 1.2em;
float: none;
}
utsukushitoilet/kr/howtouse/index.html 0 → 100644
<!DOCTYPE html>
<html lang="ja" prefix="og: http://ogp.me/ns#">
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta charset="UTF-8">
<meta name="keywords" content="">
<meta name="description" content="">
<title>화장실 내 기구의 사용법 - NIPPON UTSUKUSHI TOILET</title>
<link rel="stylesheet" href="/utsukushitoilet/shared/css/reset.css" type="text/css" media="all">
<link rel="stylesheet" href="/utsukushitoilet/shared/css/common.css" type="text/css" media="all">
<link rel="stylesheet" href="css/style.css" type="text/css" media="all">
<script type="text/javascript" src="/utsukushitoilet/shared/js/jquery.js"></script>
<script type="text/javascript" src="/utsukushitoilet/shared/js/jquery.plugin.js"></script>
<script type="text/javascript" src="/utsukushitoilet/shared/js/common.js"></script>
<script type="text/javascript" src="../shared/js/common_parts.js"></script>
<script type="text/javascript">
$(document).ready(function(){
if ($(window).width() > 640) {
$("#toilet li").autoHeight();
}
});
</script>
<!-- google analytics -->
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-560401-9']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<!-- //google analytics -->
</head>
<body class="second" id="howtouse">
<script type="text/javascript" >
<!--
includeHead2('div');
//-->
</script>
<noscript>
<p>이 사이트를 보려면 Javascript를 활성화하십시오.</p>
</noscript>
<section id="use" class="first">
<div class="block">
<h1><span>일본의 화장실 사정</span>화장실 내 기구의 사용법</h1>
<p>일본 화장실에는 다양한 기능이 있습니다.<br>
지금부터 ‘화장실 사용 후 물 내리는 법’, ‘온수세정변기 사용법’, ‘인공소음장치’, ‘긴급호출버튼’에 대한 사용법을 소개합니다.</p>
<h2 class="line"><span>01</span>물을 내리는 방법</h2>
<div class="box"><div class="left02">
설치되어 있는 화장실에 따라 다양한 방법으로 물을 내릴 수 있습니다.
<ul class="txt_list">
<li>탱크식: 탱크 옆 레버 핸들을 돌려서 세정합니다.</li>
<li>탱크가 없는 경우: 레버를 눌러서 세정합니다.</li>
<li>기타: 벽면에 설치된 버튼 또는 비접촉식(손을 가져다 대는 등) 센서로 세정하거나 리모컨에 마련된 세정 버튼을 누르는 방법 등이 있습니다.</li>
</ul>
최신 화장실에는 용무를 마친 뒤 변기에서 일어서면 자동으로 세정되는 방식도 있습니다.
</div>
<p class="right"><img src="/utsukushitoilet/howtouse/images/3609.gif" alt=""><span>이 마크는 물을 내리는 스위치입니다.</span></p>
</div>
<h3>레버 핸들 등이 있는 장소</h3>
<ul>
<li><img src="/utsukushitoilet/howtouse/images/use01_img01.jpg" alt=""><p>레버 핸들을 돌린다</p></li>
<li><img src="/utsukushitoilet/howtouse/images/use01_img02.jpg" alt=""><p>레버를 누르면서 내린다</p></li>
<li><img src="/utsukushitoilet/howtouse/images/use01_img03.jpg" alt=""><p>레버를 누르면서 내린다</p></li>
</ul><div class="clear"></div>
<ul>
<li><h3>버튼</h3><img src="/utsukushitoilet/howtouse/images/use01_img04.jpg" alt=""><p>버튼을 누른다</p></li>
<li><h3>리모컨</h3><img src="/utsukushitoilet/howtouse/images/use01_img06.jpg" alt=""><p>온수세정변기의 리모컨에 있는 버튼을 누른다</p></li>
<li><h3>센서</h3><img src="/utsukushitoilet/howtouse/images/use01_img05.jpg" alt=""><p>센서에 손을 가져다 댄다</p></li>
</ul><div class="clear"></div>
</div>
<div class="point">
<div>
<h2><img src="/utsukushitoilet/shared/images/point.gif" alt="point!"></h2>
<div class="box"><img src="/utsukushitoilet/howtouse/images/point_img01.png" alt="">
<ul class="txt_list">
<li>화장실을 사용한 후에는 뒷사람을 위해 반드시 물을 내려 주십시오.</li>
<li>일본 화장실에서는 사용하신 화장실 휴지는 그대로 변기에 버린 다음 물을 내려 주십시오.<br>
* 화장실 변기에 버릴 수 있는 종이는 화장실 휴지와 변기에 버릴 수 있는 티슈에 한합니다.<br>
* 생리용품 및 그 이외의 제품은 화장실 내부에 설치된 쓰레기통에 버려 주십시오.</li>
</ul>
</div><div class="clear"></div>
</div>
</div>
<div class="block">
<h2 class="line"><span>02</span>비데</h2>
<p class="left bisection02">비데를 사용할 때는, 변기 본체의 측면에 있는 조작 버튼으로 조작할 수 있습니다.<br />
또한, 측면에 조작 버튼이 없는 경우에는, 벽면 등에 있는 리모컨으로 조작할 수 있습니다.<br />
버튼의 의미는 아래와 같습니다.</p>
<h3>조작부의 장소</h3>
<ul>
<li><img src="/utsukushitoilet/howtouse/images/use02_img01.jpg" alt=""></li>
<li><img src="/utsukushitoilet/howtouse/images/use02_img02.jpg" alt=""></li>
</ul><div class="clear"></div>
<h3>조작부 그림의 의미</h3>
<ul id="operation">
<li><img src="/utsukushitoilet/howtouse/images/use02_img03.gif" alt=""></li>
<li><img src="/utsukushitoilet/howtouse/images/use02_img04.gif" alt=""></li>
<li><img src="/utsukushitoilet/howtouse/images/use02_img05.gif" alt=""></li>
</ul><div class="clear"></div>
<h2 class="line"><span>03</span>화장실 유사음 장치</h2>
<div class="bisection">
<div class="lft">
일본의 공중 화장실에서는 배설 시 발생하는 소음 등이 주위에 들리지 않도록 물소리가 나는 “인공소음장치”가 마련되어 있는 경우가 있습니다. 각자 타입에 따라 다음과 같이 조작합니다. 소리는 일정한 시간이 경과하면 자동으로 정지합니다.
<ul class="txt_list">
<li>센서 타입: 손을 가져다 대면 소리가 납니다.</li>
<li>버튼 타입: 버튼을 누르면 소리가 납니다.</li>
<li>자동 타입: 화장실에 들어가면 사람을 감지하여 자동으로 소리가 납니다.</li>
</ul>
</div>
<div><img src="./images/use03_img01.gif" alt=""></div><div class="clear"></div>
</div>
<h2 class="line"><span>04</span>긴급 호출 버튼</h2>
<div class="bisection">
<p>세정 조작 버튼 주변에 사진과 같은 긴급용 호출버튼이 부착되어 있는 경우가 있습니다. 화장실 안에서 몸 상태가 나빠졌을 때 이 버튼을 누르면 담당 직원을 부를 수 있습니다. 긴급한 상황 외에는 누르지 않도록 주의합시다.</p>
<div><img src="/utsukushitoilet/howtouse/images/use04_img01.jpg" alt=""></div><div class="clear"></div>
</div>
</div>
</section>
<script type="text/javascript" >
<!--
includeFoot();
//-->
</script>
</body>
</html>
\ No newline at end of file
utsukushitoilet/kr/index.html
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="keywords" content=""> <meta name="keywords" content="">
<meta name="description" content=""> <meta name="description" content="">
<title>おもてなしトイレ　NIPPON UTSUKUSHI TOILET</title> <title>일본의 화장실 사정　NIPPON UTSUKUSHI TOILET</title>
<link rel="stylesheet" href="/utsukushitoilet/shared/css/reset.css" type="text/css" media="all"> <link rel="stylesheet" href="/utsukushitoilet/shared/css/reset.css" type="text/css" media="all">
<link rel="stylesheet" href="/utsukushitoilet/shared/css/common.css" type="text/css" media="all"> <link rel="stylesheet" href="/utsukushitoilet/shared/css/common.css" type="text/css" media="all">
<link rel="stylesheet" href="css/style.css" type="text/css" media="all"> <link rel="stylesheet" href="css/style.css" type="text/css" media="all">
...@@ -47,23 +47,47 @@ $(document).ready(function(){ ...@@ -47,23 +47,47 @@ $(document).ready(function(){
<body id="top"> <body id="top">
<script type="text/javascript" > <script type="text/javascript" >
<!-- <!--
includeHead('h1'); includeHead2('h1');
//--> //-->
</script> </script>
<noscript> <noscript>
<p>当サイトはJavaScriptをonにしてご覧ください。</p> <p>이 사이트를 보려면 Javascript를 활성화하십시오.</p>
</noscript> </noscript>
<div class="showcase">
<div class="inner-showcase">
<div class="showcase_phrase">
<img src="/utsukushitoilet/images/mv_phrase.svg" alt="Welcome to Japan Toilet">
</div>
<div class="menu_box">
<div class="header_flxpc">
<ul class="header_nav">
<li>일본의 화장실 사정</li>
<li class="situation"><a href="/utsukushitoilet/kr/situation/">화장실이 있는 시설</a></li>
<li class="sign"><a href="/utsukushitoilet/kr/sign/">화장실의 안내 표시</a></li>
<li class="type"><a href="/utsukushitoilet/kr/type/">화장실의 종류와 사용법</a></li>
<li class="howtouse"><a href="/utsukushitoilet/kr/howtouse/">화장실 내 기구의 사용법</a></li>
</ul>
<div class="latest">
<b>화장실 정보</b>
<a href="/utsukushitoilet/kr/latest/">일본의 최신 화장실</a>
</div>
</div>
</div>
</div>
</div>
<section id="situation"> <section id="situation">
<div> <div>
<h2>일본의 화장실 사정</h2> <h2>일본의 화장실 사정</h2>
<p>여행을 하는 동안 곤란한 경우가 생기는 것 중 하나가 화장실이라고 생각합니다.<br /> <p>일본에 오신 것을 환영합니다!<br>
일본의 화장실은, 대부분의 경우 여러분이 쾌적하게 이용할 수 있도록 청결하게 유지되고 있습니다.<br /> 여행 중에 화장실 때문에 곤란했던 적은 없으신가요?<br>
또한, 기본적으로 누구나 무료로 사용할 수 있으며, 화장지 역시 내부에 설치되어 있습니다.</p> 일본의 화장실 대부분은 여러분께서 쾌적하게 이용하실 수 있도록 청결하게 유지되고 있으며 기본적으로 누구나 무료로 사용할 수 있습니다.<br>
이 사이트에서는 일본 화장실에 관한 정보가 정리되어 있습니다.<br>
일본 여행을 통해 일본의 쾌적한 화장실도 함께 체험해 보시기 바랍니다!</p>
<ul> <ul>
<li><div><img src="../images/situation01.jpg" alt=""><strong>화장실이 설치 되어있는 장소</strong><p>방문한 곳의 다양한 곳에 화장실이 있습니다. 각각의 시설에 맞추어, 다양한 화장실이 준비되어 있습니다.</p><span class="button"><a href="situation/">자세히 보기</a></span></div></li> <li><div><img src="../images/situation01.jpg" alt=""><strong>화장실이 설치 되어있는 장소</strong><p>방문한 곳의 다양한 곳에 화장실이 있습니다. 각각의 시설에 맞추어, 다양한 화장실이 준비되어 있습니다.</p><span class="button"><a href="situation/">자세히 보기</a></span></div></li>
<li><div><img src="../images/situation02.jpg" alt=""><strong>화장실의 안내 표시</strong><p>일본에서는 화장실을 뜻하는 단어가 다수 존재합니다.</p><span class="button"><a href="situation/#guide">자세히 보기</a></span></div></li> <li><div><img src="../images/situation02.jpg" alt=""><strong>화장실의 안내 표시</strong><p>일본에서는 화장실을 뜻하는 단어가 다수 존재합니다.</p><span class="button"><a href="sign/">자세히 보기</a></span></div></li>
<li><div><img src="../images/situation03.jpg" alt=""><strong>화장실의 종류와 사용법</strong><p>일본의 화장실은, 주로 와식 화장실, 양식 화장실, 다기능 화장실의 3가지로 분류할 수 있으며, 각각 사용법이 다릅니다.</p><span class="button"><a href="type/">자세히 보기</a></span></div></li> <li><div><img src="../images/situation03.jpg" alt=""><strong>화장실의 종류와 사용법</strong><p>일본의 화장실은, 주로 와식 화장실, 양식 화장실, 다기능 화장실의 3가지로 분류할 수 있으며, 각각 사용법이 다릅니다.</p><span class="button"><a href="type/">자세히 보기</a></span></div></li>
<li><div><img src="../images/situation04.jpg" alt=""><strong>화장실 내 기구의 사용법</strong><p>설치되어 있는 화장실에 따라, 물을 내리는 방법이 다릅니다. 용무를 해결하고 일어서면 자동으로 물이 내려가는 경우도 있습니다.</p><span class="button"><a href="type/#use">자세히 보기</a></span></div></li> <li><div><img src="../images/situation04.jpg" alt=""><strong>화장실 내 기구의 사용법</strong><p>설치되어 있는 화장실에 따라, 물을 내리는 방법이 다릅니다. 용무를 해결하고 일어서면 자동으로 물이 내려가는 경우도 있습니다.</p><span class="button"><a href="howtouse/">자세히 보기</a></span></div></li>
</ul><div class="clear"></div> </ul><div class="clear"></div>
</div> </div>
</section> </section>
......
utsukushitoilet/kr/latest/02.html
<!DOCTYPE html> <!DOCTYPE html>
<html lang="ja" prefix="og: http://ogp.me/ns#"> <html lang="ja" prefix="og: http://ogp.me/ns#">
<head> <head>
<meta http-equiv="refresh" content="0;URL=/utsukushitoilet/kr/latest/">
<meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="keywords" content=""> <meta name="keywords" content="">
......
utsukushitoilet/kr/latest/css/style.css
...@@ -422,3 +422,11 @@ p, .second .block > p { ...@@ -422,3 +422,11 @@ p, .second .block > p {
} }
#_01,
#_02,
#_03,
#_04 {
padding-top: 5px;
margin-top: -5px;
}
utsukushitoilet/kr/latest/images/latest01_graph01.gif
utsukushitoilet/kr/latest/images/latest01_graph01.gif

12.1 KB | W: | H:

utsukushitoilet/kr/latest/images/latest01_graph01.gif

11.4 KB | W: | H:

utsukushitoilet/kr/latest/images/latest01_graph01.gif
utsukushitoilet/kr/latest/images/latest01_graph01.gif
utsukushitoilet/kr/latest/images/latest01_graph01.gif
utsukushitoilet/kr/latest/images/latest01_graph01.gif
  • 2-up
  • Swipe
  • Onion skin
utsukushitoilet/kr/latest/index.html
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="keywords" content=""> <meta name="keywords" content="">
<meta name="description" content=""> <meta name="description" content="">
<title>01.비데：일본의 화장실 사정 - NIPPON UTSUKUSHI TOILET</title> <title>일본의 최신 화장실 - NIPPON UTSUKUSHI TOILET</title>
<link rel="stylesheet" href="/utsukushitoilet/shared/css/reset.css" type="text/css" media="all"> <link rel="stylesheet" href="/utsukushitoilet/shared/css/reset.css" type="text/css" media="all">
<link rel="stylesheet" href="/utsukushitoilet/shared/css/common.css" type="text/css" media="all"> <link rel="stylesheet" href="/utsukushitoilet/shared/css/common.css" type="text/css" media="all">
<link rel="stylesheet" href="css/style.css" type="text/css" media="all"> <link rel="stylesheet" href="css/style.css" type="text/css" media="all">
...@@ -31,14 +31,14 @@ $(document).ready(function(){ ...@@ -31,14 +31,14 @@ $(document).ready(function(){
</script> </script>
<!-- //google analytics --> <!-- //google analytics -->
</head> </head>
<body class="second"> <body class="second" id="latest">
<script type="text/javascript" > <script type="text/javascript" >
<!-- <!--
includeHead('div'); includeHead2('div');
//--> //-->
</script> </script>
<noscript> <noscript>
<p>当サイトはJavaScriptをonにしてご覧ください。</p> <p>이 사이트를 보려면 Javascript를 활성화하십시오.</p>
</noscript> </noscript>
<section class="first latest_menu"> <section class="first latest_menu">
<div class="block"> <div class="block">
...@@ -47,9 +47,9 @@ includeHead('div'); ...@@ -47,9 +47,9 @@ includeHead('div');
안심, 안전, 쾌적하게 이용할 수 있도록 진화를 계속 해왔습니다.</p> 안심, 안전, 쾌적하게 이용할 수 있도록 진화를 계속 해왔습니다.</p>
<ul> <ul>
<li><span>01</span><a href="./#_01">비데</a></li> <li><span>01</span><a href="./#_01">비데</a></li>
<li><span>02</span><a href="02.html#_02">로우 실루엣 변기</a></li> <li><span>02</span><a href="./#_02">로우 실루엣 변기</a></li>
<li><span>03</span><a href="02.html#_03">절수 기기</a></li> <li><span>03</span><a href="./#_03">절수 기기</a></li>
<li><span>04</span><a href="02.html#_04">아동 동반 배려 기기</a></li> <li><span>04</span><a href="./#_04">아동 동반 배려 기기</a></li>
</ul><div class="clear"></div> </ul><div class="clear"></div>
</div> </div>
</section> </section>
...@@ -65,8 +65,8 @@ includeHead('div'); ...@@ -65,8 +65,8 @@ includeHead('div');
</ul><div class="clear"></div> </ul><div class="clear"></div>
<div id="spread"> <div id="spread">
<div> <div>
<h3>일본에서의 보급률 : 77.5%(2015년 현재)</h3> <h3>일본 내 보급률: 80.4%<small>(2019년 3월 현재)</small></h3>
<p>2013년도의 "내각부 소비 동향 조사"에서의 세대 보급률은 약 77.5%로, PC(78.0%)와 거의 동등한 보급률을 나타내고 있습니다.</p> <p>내각부의 조사 결과에 따르면 세대 보급률은 매년 증가 추세로 약 80%에 달하며 컴퓨터 보다도 보급률이 높습니다.</p>
</div> </div>
<div><img src="./images/latest01_graph01.gif" alt=""></div> <div><img src="./images/latest01_graph01.gif" alt=""></div>
</div><div class="clear"></div> </div><div class="clear"></div>
...@@ -98,13 +98,62 @@ includeHead('div'); ...@@ -98,13 +98,62 @@ includeHead('div');
</div> </div>
</div> </div>
</section> </section>
<section id="_02">
<div class="block">
<h2 class="line"><span>02</span>로우 실루엣 변기</h2>
<p>최근의 트랜드는, "로우 실루엣" 디자인이 인기입니다.<br />
화장실 하나의 디자인을 주장하는 타입이나 공간을 자유롭게 연출 할 수 있는 조합이 모이는 타입 등, 기업에 따라 각각 특징을 가진 라인업이 있습니다.</p>
<ul>
<li><strong>메이커</strong><div>외관</div><span>상품명</span></li>
<li><strong>아사히 도기</strong><div><img src="../../latest/images/latest02_img01.jpg" alt=""></div><span>원피스</span></li>
<li><strong>쟈니스 공업</strong><div><img src="../../latest/images/latest02_img02.jpg" alt=""></div><span>스마트 클린</span></li>
<li><strong>TOTO</strong><div><img src="../../latest/images/latest02_img03.jpg" alt=""></div><span>네오레스트</span></li>
<li><strong>파나소닉</strong><div><img src="../../latest/images/latest02_img04.jpg" alt=""></div><span>아라우노</span></li>
<li><strong>LIXIL</strong><div><img src="../../latest/images/latest02_img05.jpg" alt=""></div><span>사티스</span></li>
</ul><div class="clear"></div>
</div>
</section>
<section id="_03">
<div class="block">
<h2 class="line"><span>03</span>절수 기기</h2>
<h3>절수 변기</h3>
<p>일본의 양식 화장실에서 한번 세정 (대 세정)에 사용하는 물의 양은 6리터 이하입니다. 또한, 세정수를 아랫 부분에 따라 "빙글 돌리는" 방법으로, 절수화를 실현함과 동시에 더욱 효율적으로 세정합니다.</p>
<ul>
<li><img src="../../latest/images/latest03_img01.jpg" alt=""></li>
<li><img src="../../latest/images/latest03_img02.jpg" alt=""></li>
</ul><div class="clear"></div>
<ul id="small">
<li><h3>자동 세정 소변기</h3><p>
아동을 배려하여 접근하기 쉬운 낮은 소변기가 일반적입니다</p></li>
<li><img src="../../latest/images/latest03_img03.jpg" alt=""></li>
</ul><div class="clear"></div>
<h3>세정 존(자동 수도꼭지, 자동 비누, 에어 타올)</h3>
<ul id="auto">
<li><img src="../../latest/images/latest03_img04.jpg" alt=""><p>세정 존(자동 수도꼭지, 자동 비누, 에어 타올)</p></li>
<li><img src="../../latest/images/latest03_img05.jpg" alt=""><p>상업 시설 둥에는 자동 타입의 비누도 있습니다.</p></li>
<li><img src="../../latest/images/latest03_img06.jpg" alt=""><p>바람으로 물기를 날리는 타입의 에어 타올도 있습니다.</p></li>
</ul><div class="clear"></div>
</div>
</section>
<section id="_04">
<div class="block">
<h2 class="line"><span>04</span>아동 동반 배려 기기</h2>
<p>상업 시설이나 교통 시설에서는, 베이비 시트, 베이비 체어 등의 유아 배려 또는 아동의 탈의를 배려한 핏팅 보드 등의 기구가 늘어나고 있습니다.<br />
어린이를 동반한 가족이어도 안심하고 화장실을 사용할 수 있습니다.</p>
<ul>
<li><img src="../../latest/images/latest04_img01.jpg" alt=""><p>영유아용의 기저귀 교환대 입니다.</p></li>
<li><img src="../../latest/images/latest04_img02.jpg" alt=""><p>영유아를 동반하신 분이 볼일을 보시는 동안 영유아를 앉혀둘 수 있는 의자입니다.</p></li>
<li><img src="../../latest/images/latest04_img03.jpg" alt=""><p>어린이의 의류나 기저귀 교환에 편리한 얇은 보드입니다.</p></li>
</ul><div class="clear"></div>
</div>
</section>
<section class="latest_menu foot_menu"> <section class="latest_menu foot_menu">
<div class="block"> <div class="block">
<ul> <ul>
<li><span>01</span><a href="./#_01">비데</a></li> <li><span>01</span><a href="./#_01">비데</a></li>
<li><span>02</span><a href="02.html#_02">로우 실루엣 변기</a></li> <li><span>02</span><a href="./#_02">로우 실루엣 변기</a></li>
<li><span>03</span><a href="02.html#_03">절수 기기</a></li> <li><span>03</span><a href="./#_03">절수 기기</a></li>
<li><span>04</span><a href="02.html#_04">아동 동반 배려 기기</a></li> <li><span>04</span><a href="./#_04">아동 동반 배려 기기</a></li>
</ul><div class="clear"></div> </ul><div class="clear"></div>
</div> </div>
</section> </section>
......
utsukushitoilet/kr/shared/js/common_parts.js
/* 2020.2.19 update */
function includeHead2(tag) {
document.write(
'<div class="overlay"><img src="/utsukushitoilet/shared/images/main_visual0_002.png" width="100%" height="auto" class="back_img"></div>\n'+
'<header class="pht">\n'+
'<div id="head_area" class="head_area">\n'+
'<'+tag+' class="title_area"><a href="/utsukushitoilet/kr/"><img src="/utsukushitoilet/shared/images/logo.svg" alt="JAPAN TOILET INFORMATION"><span class="logo_line"><img src="/utsukushitoilet/shared/images/logo_line.svg" alt="NIPPON UTSUKUSHI TOILET"></span></a></'+tag+'>\n'+
'<div class="lang_menu">\n'+
'<div id="lang">\n'+
'<select>\n'+
'<option value="">LANGUAGE</option>\n'+
'<option value="/utsukushitoilet/cn_t/" id="cn_t">CHINESE(Traditional)</option>\n'+
'<option value="/utsukushitoilet/cn_s/" id="cn_s">CHINESE(Simplified)</option>\n'+
'<option value="/utsukushitoilet/kr/" id="kr">KOREAN</option>\n'+
'<option value="/utsukushitoilet/en/" id="en">ENGLISH</option>\n'+
'<option value="/utsukushitoilet/" id="ja">JAPANESE</option>\n'+
'</select>\n'+
'</div>\n'+
'</div>\n'+
'</div>\n'+
'<nav>\n'+
'<div class="inner-toggle">\n'+
'<a href="" id="toggle_btn" class="toggle_btn">\n'+
'<div class="toggle"><span></span></div>\n'+
'</a>\n'+
'</div>\n'+
'<div id="toggle_menu" class="toggle_menu">\n'+
'<div class="inner-menu">\n'+
'<div class="menu_box">\n'+
'<div class="header_flxpc">\n'+
'<ul class="header_nav">\n'+
'<li>일본의 화장실 사정</li>\n'+
'<li class="situation"><a href="/utsukushitoilet/kr/situation/">화장실이 있는 시설</a></li>\n'+
'<li class="sign"><a href="/utsukushitoilet/kr/sign/">화장실의 안내 표시</a></li>\n'+
'<li class="type"><a href="/utsukushitoilet/kr/type/">화장실의 종류와 사용법</a></li>\n'+
'<li class="howtouse"><a href="/utsukushitoilet/kr/howtouse/">화장실 내 기구의 사용법</a></li>\n'+
'</ul>\n'+
'<div class="latest"><b>화장실 정보</b><a href="/utsukushitoilet/kr/latest/">일본의 최신 화장실</a></div>\n'+
'</div>\n'+
'</div>\n'+
'<div class="search">\n'+
'<gcse:searchbox-only></gcse:searchbox-only>\n'+
'</div>\n'+
'</div>\n'+
'</div>\n'+
'</nav>\n'+
'</header>\n'
);
}
/* 共通 ページメニュー　ヘッダ */ /* 共通 ページメニュー　ヘッダ */
function includeHead(tag) { function includeHead(tag) {
document.write( document.write(
...@@ -53,25 +103,30 @@ document.write( ...@@ -53,25 +103,30 @@ document.write(
'</div>\n'+ '</div>\n'+
'<footer>\n'+ '<footer>\n'+
'<div id="footer_div1">\n'+ '<div id="footer_div1">\n'+
'<div id="footer_menu1">\n'+ '<div id="footer_menu1" class="list_wt">\n'+
'<strong>일본의 화장실 사정</strong>\n'+ '<strong>일본의 화장실 사정</strong>\n'+
'<ul>\n'+ '<ul>\n'+
' <li><a href="/utsukushitoilet/kr/situation/">일본의 화장실 사정</a></li>\n'+ ' <li><a href="/utsukushitoilet/kr/situation/">일본의 화장실 사정</a></li>\n'+
' <li><a href="/utsukushitoilet/kr/situation//#guide">화장실의 안내 표시</a></li>\n'+ ' <li><a href="/utsukushitoilet/kr/sign/">화장실의 안내 표시</a></li>\n'+
' <li><a href="/utsukushitoilet/kr/type/">화장실의 종류와 사용법</a></li>\n'+ ' <li><a href="/utsukushitoilet/kr/type/">화장실의 종류와 사용법</a></li>\n'+
' <li><a href="/utsukushitoilet/kr/type/#use">화장실 내 기구의 사용법</a></li>\n'+ ' <li><a href="/utsukushitoilet/kr/howtouse/">화장실 내 기구의 사용법</a></li>\n'+
'</ul>\n'+ '</ul>\n'+
'</div>\n'+ '</div>\n'+
'<div id="footer_menu2">\n'+ '<div id="footer_menu2" class="list_wt">\n'+
'<strong>일본의 최신 화장실</strong>\n'+ '<strong>일본의 최신 화장실</strong>\n'+
'<ul>\n'+ '<ul>\n'+
' <li><a href="/utsukushitoilet/kr/latest/#_01">비데</a></li>\n'+ ' <li><a href="/utsukushitoilet/kr/latest/#_01">비데</a></li>\n'+
' <li><a href="/utsukushitoilet/kr/latest/02.html#_02">로우 실루엣 변기</a></li>\n'+ ' <li><a href="/utsukushitoilet/kr/latest/#_02">로우 실루엣 변기</a></li>\n'+
' <li><a href="/utsukushitoilet/kr/latest/02.html#_03">절수 기기</a></li>\n'+ ' <li><a href="/utsukushitoilet/kr/latest/#_03">절수 기기</a></li>\n'+
' <li><a href="/utsukushitoilet/kr/latest/02.html#_04">아동 동반 배려 기기</a></li>\n'+ ' <li><a href="/utsukushitoilet/kr/latest/#_04">아동 동반 배려 기기</a></li>\n'+
'</ul>\n'+ '</ul>\n'+
'</div>\n'+ '</div>\n'+
'<div class="clear"></div>\n'+ '<div id="footer_banner">\n'+
'<ul>\n'+
' <li class="line"><a href="http://www.sanitary-net.com/" target="_blank"><img src="/utsukushitoilet/shared/images/bnr_toiletnavi.gif" alt="TOILET NAVIGATION"></a></li>\n'+
' <li class="line"><a href="http://www.mlit.go.jp/kankocho/" target="_blank"><img src="/utsukushitoilet/shared/images/bnr_kanko.gif" alt="Japan Tourism Agency"></a></li>\n'+
'</ul>\n'+
'</div><div class="clear"></div>\n'+
'</div>\n'+ '</div>\n'+
'<div id="copyright">\n'+ '<div id="copyright">\n'+
'Copyright &copy; 一般社団法人日本レストルーム工業会\n'+ 'Copyright &copy; 一般社団法人日本レストルーム工業会\n'+
......
utsukushitoilet/kr/sign/css/style.css 0 → 100644
@charset "UTF-8";
#facility ul {
padding: 50px 0;
}
#facility ul:after {
content: "";
display: block;
clear: both;
}
#facility li {
display: inline-block;
width: 16.6%;
float: left;
text-align: center;
}
#facility li div {
width: 99%;
}
#facility li strong {
display: block;
}
#facility li img {
width: 100%;
}
#cleaning {
border: solid 1px #ec6b55;
position: relative;
text-align: left;
padding: 20px;
background: url(/utsukushitoilet/situation/images/bg_cleaning.gif) no-repeat 94% center;
background-size: 224px auto;
margin-top: 50px;
margin-bottom: 50px;
}
#cleaning:after {
content: "";
display: block;
position: absolute;
z-index:-1;
top: 3px;
left: 3px;
right: -5px;
bottom: -5px;
border: 1px solid #dcdcdc;
}
#cleaning h2 {
font-size: 20px;
font-weight: bold;
}
#cleaning p {
width: 66%;
}
#guide h2 {
background-color: #7f7f7f;
color: #fff;
width: 110px;
margin-bottom: 0;
margin-top: 20px;
}
#guide .guide_eg {
border: solid 1px #ccc;
padding: 30px 10px 20px 10px;
margin-bottom: 20px;
position: relative;
}
#guide #letter li {
display: inline-block;
width: 17%;
padding-bottom: 20px;
}
#guide #letter li img {
max-width: 116px;
width: 100%;
}
#guide #letter li:before {
content: "-";
color: #ed638a;
font-weight: bold;
margin-right: 6px;
}
#guide ul#sign {
display: block;
height: 115px;
}
#guide #sign li {
display: block;
position: absolute;
background-color: #f4f4f4;
padding: 14px 0;
width: 106px;
border-radius: 5px;
}
#guide #sign li img {
width: 58%;
}
#guide #sign li:first-child {
left: 30px;
}
#guide #sign li:nth-child(2) {
left: 152px;
}
#guide #sign li:nth-child(3) {
width: 185px;
left: 274px;
height: 77px;
}
#guide #sign li:nth-child(3) img {
width: 95%;
margin-top: 12px;
}
#guide #sign li:nth-child(4) {
width: 272px;
left: 476px;
height: 77px;
background-color: #666;
}
#guide #sign li:nth-child(4) img {
width: 67%;
margin-top: 12px;
}
#guide #sign li:nth-child(5) {
left: 152px;
}
#guide #sign li:nth-child(6) {
left: 274px;
}
#guide #sign li:nth-child(7) {
left: 396px;
}
#guide #sign li:nth-child(8) {
left: 518px;
}
#guide #sign li:nth-child(9) {
left: 641px;
width: 186px;
}
#guide #sign li:nth-child(9) img {
width: 90%;
}
#guide #sign li:nth-child(10) {
right: 28px;
clear: both;
}
#guide ul#sign:after {
content: "";
display: block;
clear: both;
}
/* 0-640px ----*/
@media screen and (max-width:640px){
#facility li {
float: none;
display: block;
clear: both;
width: 92%;
margin: 1px auto;
}
#facility li:after {
content: "";
display: block;
clear: both;
}
#facility li strong {
position: absolute;
display: block;
text-shadow: 1px 1px 2px #fff;
}
#facility li img {
display: block;
width: 30%;
float: left;
margin-right: 1px;
}
#facility li img:first-child {
margin-left: 39%;
}
#cleaning {
background-position: center 95%;
width: 86%;
padding-bottom: 200px;
}
#cleaning p {
width: initial;
margin: 0 auto;
}
#guide h2 {
margin-left: 4%;
}
#guide .guide_eg {
margin-left: 4%;
margin-right: 4%;
}
#guide #letter li {
width: 48%;
}
#guide ul#sign {
height: inherit;
}
#guide #sign li {
position: inherit;
display: inline-block;
width: 42%;
margin-bottom: 12px;
pading: 4% 0;
}
#guide #sign li:nth-child(3), #guide #sign li:nth-child(4), #guide #sign li:nth-child(9) {
width: 85.2%;
height: auto;
}
#guide #sign li:nth-child(3) img, #guide #sign li:nth-child(4) img {
margin-top: 0;
}
#guide #sign li:nth-child(10) {
margin-left: 7.4%;
float: left;
}
}
utsukushitoilet/kr/sign/index.html 0 → 100644
<!DOCTYPE html>
<html lang="ja" prefix="og: http://ogp.me/ns#">
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta charset="UTF-8">
<meta name="keywords" content="">
<meta name="description" content="">
<title>화장실의 안내 표시 - NIPPON UTSUKUSHI TOILET</title>
<link rel="stylesheet" href="/utsukushitoilet/shared/css/reset.css" type="text/css" media="all">
<link rel="stylesheet" href="/utsukushitoilet/shared/css/common.css" type="text/css" media="all">
<link rel="stylesheet" href="css/style.css" type="text/css" media="all">
<script type="text/javascript" src="/utsukushitoilet/shared/js/jquery.js"></script>
<script type="text/javascript" src="/utsukushitoilet/shared/js/jquery.plugin.js"></script>
<script type="text/javascript" src="/utsukushitoilet/shared/js/common.js"></script>
<script type="text/javascript" src="../shared/js/common_parts.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#facility li strong").autoHeight();
});
</script>
<!-- google analytics -->
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-560401-9']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<!-- //google analytics -->
</head>
<body class="second" id="sign">
<script type="text/javascript" >
<!--
includeHead2('div');
//-->
</script>
<noscript>
<p>이 사이트를 보려면 Javascript를 활성화하십시오.</p>
</noscript>
<section id="guide" class="first">
<div class="block">
<h1><span>일본의 화장실 사정</span>화장실의 안내 표시</h1>
<p>일본에는 화장실을 뜻하는 단어가 다수 존재합니다.<br />
직접적인 표현도 있다면, 간접적인 표현도 있습니다.<br />
예를 들면, 식사중에 「화장실」이라고 직접적으로 표현하기 보다는 「손 씻는곳」이라고 표현하는 편이, 기품이 있습니다.<br />
헤매지 않기 위해서도, 다양한 표현이 있다는 점을 기억해 두시기 바랍니다.<br />
대표적인 표시의 한 예입니다.</p>
<h2>文字</h2>
<div class="guide_eg">
<ul id="letter">
<li><img src="../../situation/images/letter01.gif" alt="お手洗い"></li>
<li><img src="../../situation/images/letter02.gif" alt="お手洗"></li>
<li><img src="../../situation/images/letter03.gif" alt="御手洗"></li>
<li><img src="../../situation/images/letter04.gif" alt="洗面所"></li>
<li><img src="../../situation/images/letter05.gif" alt="化粧室"></li>
<li><img src="../../situation/images/letter06.gif" alt="Toilet"></li>
<li><img src="../../situation/images/letter07.gif" alt="lavatory"></li>
<li><img src="../../situation/images/letter08.gif" alt="W.C"></li>
<li><img src="../../situation/images/letter09.gif" alt="RestRoom"></li>
<li><img src="../../situation/images/letter10.gif" alt="厠"></li>
</ul>
</div>
<h2>サイン</h2>
<div class="guide_eg">
<ul id="sign">
<li><img src="../../situation/images/sign01.gif" alt=""></li>
<li><img src="../../situation/images/sign02.gif" alt=""></li>
<li><img src="../../situation/images/sign03.gif" alt="TOILET"></li>
<li><img src="../../situation/images/sign04.gif" alt="化粧室"></li>
</ul>
</div>
</div>
</section>
<script type="text/javascript" >
<!--
includeFoot();
//-->
</script>
</body>
</html>
\ No newline at end of file
utsukushitoilet/kr/situation/index.html
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="keywords" content=""> <meta name="keywords" content="">
<meta name="description" content=""> <meta name="description" content="">
<title>화장실이 있는 시설・화장실의 안내 표시 - NIPPON UTSUKUSHI TOILET</title> <title>화장실이 있는 시설 - NIPPON UTSUKUSHI TOILET</title>
<link rel="stylesheet" href="/utsukushitoilet/shared/css/reset.css" type="text/css" media="all"> <link rel="stylesheet" href="/utsukushitoilet/shared/css/reset.css" type="text/css" media="all">
<link rel="stylesheet" href="/utsukushitoilet/shared/css/common.css" type="text/css" media="all"> <link rel="stylesheet" href="/utsukushitoilet/shared/css/common.css" type="text/css" media="all">
<link rel="stylesheet" href="css/style.css" type="text/css" media="all"> <link rel="stylesheet" href="css/style.css" type="text/css" media="all">
...@@ -31,14 +31,14 @@ $(document).ready(function(){ ...@@ -31,14 +31,14 @@ $(document).ready(function(){
</script> </script>
<!-- //google analytics --> <!-- //google analytics -->
</head> </head>
<body class="second"> <body class="second" id="situation">
<script type="text/javascript" > <script type="text/javascript" >
<!-- <!--
includeHead('div'); includeHead2('div');
//--> //-->
</script> </script>
<noscript> <noscript>
<p>当サイトはJavaScriptをonにしてご覧ください。</p> <p>이 사이트를 보려면 Javascript를 활성화하십시오.</p>
</noscript> </noscript>
<section id="facility" class="first"> <section id="facility" class="first">
<div class="block"> <div class="block">
...@@ -72,40 +72,6 @@ includeHead('div'); ...@@ -72,40 +72,6 @@ includeHead('div');
혹시 발견하시게 된다면 하루에 몇번 청소 점검 되고 있는지 확인해 보시는건 어떨까요.</p> 혹시 발견하시게 된다면 하루에 몇번 청소 점검 되고 있는지 확인해 보시는건 어떨까요.</p>
</div> </div>
</section> </section>
<section id="guide">
<div class="block">
<h1><span>일본의 화장실 사정</span>화장실의 안내 표시</h1>
<p>일본에는 화장실을 뜻하는 단어가 다수 존재합니다.<br />
직접적인 표현도 있다면, 간접적인 표현도 있습니다.<br />
예를 들면, 식사중에 「화장실」이라고 직접적으로 표현하기 보다는 「손 씻는곳」이라고 표현하는 편이, 기품이 있습니다.<br />
헤매지 않기 위해서도, 다양한 표현이 있다는 점을 기억해 두시기 바랍니다.<br />
대표적인 표시의 한 예입니다.</p>
<h2>文字</h2>
<div class="guide_eg">
<ul id="letter">
<li><img src="../../situation/images/letter01.gif" alt="お手洗い"></li>
<li><img src="../../situation/images/letter02.gif" alt="お手洗"></li>
<li><img src="../../situation/images/letter03.gif" alt="御手洗"></li>
<li><img src="../../situation/images/letter04.gif" alt="洗面所"></li>
<li><img src="../../situation/images/letter05.gif" alt="化粧室"></li>
<li><img src="../../situation/images/letter06.gif" alt="Toilet"></li>
<li><img src="../../situation/images/letter07.gif" alt="lavatory"></li>
<li><img src="../../situation/images/letter08.gif" alt="W.C"></li>
<li><img src="../../situation/images/letter09.gif" alt="RestRoom"></li>
<li><img src="../../situation/images/letter10.gif" alt="厠"></li>
</ul>
</div>
<h2>サイン</h2>
<div class="guide_eg">
<ul id="sign">
<li><img src="../../situation/images/sign01.gif" alt=""></li>
<li><img src="../../situation/images/sign02.gif" alt=""></li>
<li><img src="../../situation/images/sign03.gif" alt="TOILET"></li>
<li><img src="../../situation/images/sign04.gif" alt="化粧室"></li>
</ul>
</div>
</div>
</section>
<script type="text/javascript" > <script type="text/javascript" >
<!-- <!--
includeFoot(); includeFoot();
......
utsukushitoilet/kr/type/css/style.css
...@@ -24,6 +24,9 @@ h3 { ...@@ -24,6 +24,9 @@ h3 {
font-weight: bold; font-weight: bold;
font-size: 20px; font-size: 20px;
} }
#kind{
margin-bottom: 70px;
}
#kind ul { #kind ul {
padding: 50px 0; padding: 50px 0;
} }
...@@ -195,3 +198,83 @@ h3 { ...@@ -195,3 +198,83 @@ h3 {
} }
#kind ul.toilet {
display: flex;
align-items: stretch;
justify-content: space-between;
padding: 20px 0;
}
#kind ul.toilet li {
display: block;
width: 48.4%;
float: none;
text-align: left;
margin-right: 0;
margin-left: 0;
background-color: #f7f6f2;
}
#kind ul.toilet li:nth-child(2) {
margin-right: 0;
}
#kind ul.toilet:after {
content: none;
}
#kind ul.toilet li h3 {
background-color: #fff;
text-align: center;
padding-bottom: 10px;
}
#kind ul.toilet li img {
width: 100%;
}
#kind ul.toilet li p {
padding: 20px;
margin-bottom: 10px;
}
#kind ul.toilet li div {
border-top: solid 1px #e1e0db;
margin: 0 auto;
width: 92%;
padding-bottom: 10px;
}
#kind ul.toilet li div img {
border: solid 1px #e1e0db;
display: block;
margin-bottom: 10px;
}
#kind ul#toilet li span {
display: block;
text-align: center;
font-weight: bold;
font-size: 14px;
padding: 10px 0;
}
@media screen and (max-width:640px){
#kind ul.toilet {
display: block;
}
#kind ul.toilet li {
float: none;
display: block;
clear: both;
width: 92%;
margin: 1px auto 20px auto;
}
#kind ul.toilet li:nth-child(2) {
margin-right: auto;
}
#kind ul.toilet li:after {
content: "";
display: block;
clear: both;
}
#kind ul.toilet li span {
padding: 6px;
font-size: inherit;
}
#kind ul.toilet li strong {
position: absolute;
display: block;
}
}
utsukushitoilet/kr/type/index.html
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="keywords" content=""> <meta name="keywords" content="">
<meta name="description" content=""> <meta name="description" content="">
<title>화장실의 종류와 사용법・화장실 내 기구의 사용법 - NIPPON UTSUKUSHI TOILET</title> <title>화장실의 종류와 사용법 - NIPPON UTSUKUSHI TOILET</title>
<link rel="stylesheet" href="/utsukushitoilet/shared/css/reset.css" type="text/css" media="all"> <link rel="stylesheet" href="/utsukushitoilet/shared/css/reset.css" type="text/css" media="all">
<link rel="stylesheet" href="/utsukushitoilet/shared/css/common.css" type="text/css" media="all"> <link rel="stylesheet" href="/utsukushitoilet/shared/css/common.css" type="text/css" media="all">
<link rel="stylesheet" href="css/style.css" type="text/css" media="all"> <link rel="stylesheet" href="css/style.css" type="text/css" media="all">
...@@ -13,13 +13,6 @@ ...@@ -13,13 +13,6 @@
<script type="text/javascript" src="/utsukushitoilet/shared/js/jquery.plugin.js"></script> <script type="text/javascript" src="/utsukushitoilet/shared/js/jquery.plugin.js"></script>
<script type="text/javascript" src="/utsukushitoilet/shared/js/common.js"></script> <script type="text/javascript" src="/utsukushitoilet/shared/js/common.js"></script>
<script type="text/javascript" src="../shared/js/common_parts.js"></script> <script type="text/javascript" src="../shared/js/common_parts.js"></script>
<script type="text/javascript">
$(document).ready(function(){
if ($(window).width() > 640) {
$("#toilet li").autoHeight();
}
});
</script>
<!-- google analytics --> <!-- google analytics -->
<script type="text/javascript"> <script type="text/javascript">
var _gaq = _gaq || []; var _gaq = _gaq || [];
...@@ -33,25 +26,33 @@ $(document).ready(function(){ ...@@ -33,25 +26,33 @@ $(document).ready(function(){
</script> </script>
<!-- //google analytics --> <!-- //google analytics -->
</head> </head>
<body class="second"> <body class="second" id="type">
<script type="text/javascript" > <script type="text/javascript" >
<!-- <!--
includeHead('div'); includeHead2('div');
//--> //-->
</script> </script>
<noscript> <noscript>
<p>当サイトはJavaScriptをonにしてご覧ください。</p> <p>이 사이트를 보려면 Javascript를 활성화하십시오.</p>
</noscript> </noscript>
<section id="kind" class="first"> <section id="kind" class="first">
<div class="block"> <div class="block">
<h1><span>일본의 화장실 사정</span>화장실의 종류와 사용법</h1> <h1><span>일본의 화장실 사정</span>화장실의 종류와 사용법</h1>
<p>기본적으로 와식 화장실, 양식 화장실, 다기능 화장실으 3종류가 있으며, 장소에 따라 양식이 다릅니다 <p>화장실은 형태에 따라 일본식 화장실, 서양식 화장실, 다기능 화장실 총 세 가지가 있습니다.<br>
와식은 관광지 등에 많으며, 지금은 이용자의 니즈를 바탕으로 양식 화장실로 바뀌어 가고 있습니다.</p> 지금은 누구나 불편함 없이 이용할 수 있도록 일본식 화장실을 서양식 화장실로 개보수하는 공사를 적극적으로 시행하고 있습니다.</p>
<h2 class="line"><span>01</span>교통 시설, 상업 시설 등의 화장실</h2> <h2 class="line"><span>01</span>공중 화장실</h2>
<ul id="toilet"> <ul class="toilet 01">
<li><h3>와식 화장실</h3><img src="../../type/images/type01_washiki01.jpg" alt=""><p>옛부터 일본에 존재하고 있는 변기로, 주저 앉아서 사용하는 화장실입니다. 공공 화장실에 설치 되어 있는 경우가 많습니다.</p><div><span>사용 방법</span><img src="./images/type01_washiki02.gif" alt=""></div></li> <li><h3>와식 화장실</h3><img src="../../type/images/type01_washiki01.jpg" alt=""><p>옛부터 일본에 존재하고 있는 변기로, 주저 앉아서 사용하는 화장실입니다. 공공 화장실에 설치 되어 있는 경우가 많습니다.</p><div><span>사용 방법</span><img src="./images/type01_washiki02.gif" alt=""></div></li>
<li><h3>양식 화장실</h3><img src="../../type/images/type01_yoshiki01.jpg" alt=""><p>현재 가장 일반적인 화장실 입니다</p><div><span>사용 방법</span><img src="./images/type01_yoshiki02.gif" alt=""></div></li> <li><h3>양식 화장실</h3><img src="../../type/images/type01_yoshiki01.jpg" alt=""><p>현재 가장 일반적인 화장실 입니다</p><div><span>사용 방법</span><img src="./images/type01_yoshiki02.gif" alt=""></div></li>
</ul>
<ul class="toilet 01">
<li><h3>다기능 화장실</h3><img src="../../type/images/type01_takino01.jpg" alt=""><p>휠체어 사용자나 인공 장기를 사용하시는 분, 영유아를 동반하고 계신 분 등을 우선적으로, 다양한 분들이 사용할 수 있는 넓은 화장실 입니다. 고령자 등 일반 분들께서도 사용하실 수 있습니다</p><div><span>다기능 화장실을 가리키는 표시</span><img src="../../type/images/type01_takino02.gif" alt=""></div></li> <li><h3>다기능 화장실</h3><img src="../../type/images/type01_takino01.jpg" alt=""><p>휠체어 사용자나 인공 장기를 사용하시는 분, 영유아를 동반하고 계신 분 등을 우선적으로, 다양한 분들이 사용할 수 있는 넓은 화장실 입니다. 고령자 등 일반 분들께서도 사용하실 수 있습니다</p><div><span>다기능 화장실을 가리키는 표시</span><img src="../../type/images/type01_takino02.gif" alt=""></div></li>
<li><h3>소변기</h3><img src="images/type01_urinal.jpg" alt=""><p>세정 버튼을 직접 만질 필요 없이 자동으로 물이 내려가므로 위생적이고 쾌적합니다.</p><div><span>세정 벨브(변기 손잡이)와 자동 세정 사용법</span><img src="../../type/images/type01_urinal02.gif" alt=""></div></li>
</ul>
<ul class="toilet 01">
<li><h3>자동 수도꼭지</h3><img src="images/type01_autofaucet.jpg" alt=""><p>수도꼭지를 직접 만질 필요 없이 자동으로 비누와 물이 배출되어 위생적이고 쾌적합니다.</p><div><span>자동 수도꼭지와 자동 비누 사용법</span><img src="images/type01_autofaucet02.gif" alt=""></div></li>
<li><h3>핸드 드라이어</h3><img src="images/type01_handdryer.jpg" alt=""><p>손을 씻은 후 바람으로 손을 건조시킬 수 있는 장치입니다.<br>통풍구 주변에 손을 가져다 대면 자동으로 바람이 나옵니다.</p>
<div><span>콤팩트 타입과 롱 타입 사용법</span><img src="images/type01_handdryer02.gif" alt=""></div></li>
</ul> </ul>
<h2 class="line"><span>02</span>숙박 시설・객실 내의 화장실</h2> <h2 class="line"><span>02</span>숙박 시설・객실 내의 화장실</h2>
<ul> <ul>
...@@ -62,67 +63,12 @@ includeHead('div'); ...@@ -62,67 +63,12 @@ includeHead('div');
<div class="point"> <div class="point">
<div> <div>
<h2><img src="/utsukushitoilet/shared/images/point.gif" alt="point!"></h2> <h2><img src="/utsukushitoilet/shared/images/point.gif" alt="point!"></h2>
<p>호텔의 욕실을 이용하실때의 주의점<br> <p><img src="/utsukushitoilet/type/images/point_img01.png" alt="">
호텔의 욕실에는, 샤워가 설치 되어 있습니다만, 사용 장소는 욕조 안으로 한정됩니다.<br /> <span>&lt;호텔 욕실 이용 시 주의점&gt;</span>
또한, 욕실의 문을 열어둔 채로 사용하면 화재 경보기 오작동의 원인이 되기 도합니다.<br /> <span class="point_txt01">* 유닛 배스에는 샤워기가 설치되어 있으나 욕조 내에서만 사용할 수 있습니다.</span>
샤워 사용시에는, 욕실의 문을 반드시 닫아 주시기 바랍니다. 샤워 커텐이 붙어있는 경우에는, 변기 주변이 젖지 않도록, 커텐을 닫고 샤워를 사용해 주시기 바랍니다.</p><div class="clear"></div> <span class="point_txt01">* 샤워 커튼을 이용할 수 있는 경우에는 변기 주변으로 물이 튀지 않도록 커튼을 닫고 샤워기를 이용해 주십시오.</span>
</div> <span class="point_txt01">* 욕실 문을 열고 사용할 경우 화재경보기 오작동의 원인이 되므로 욕실 문은 반드시 닫은 후에 사용해 주십시오.</span>
</div> </p><div class="clear"></div>
</section>
<section id="use">
<div class="block">
<h1><span>일본의 화장실 사정</span>화장실 내 기구의 사용법</h1>
<h2 class="line"><span>01</span>물을 내리는 방법</h2>
<p class="left">설치 되어 있는 화장실에 따라 세정 방법도 달라집니다.<br />
탱그 방식인 경우에는, 탱크 옆의 레버 핸들로 세정할 수 있습니다.<br />
공공시설의 화장실이나 와식 화장실 등의 탱크가 없는 화장실의 경우에는, 변기 뒷면의 레버 핸들로 세정할 수 있습니다.<br />
또한, 벽면의 버튼이나 렙, 비 접촉식 (손을 가까이 댄다) 세정, 리모컨 버튼을 이용한 세정 방식도 있습니다.
최신 화장실에서는, 변기에서 일어서면 자동으로 세정을 하는 경우도 있습니다</p>
<h3>레버 핸들 등이 있는 장소</h3>
<ul>
<li><img src="../../type/images/use01_img01.jpg" alt=""><p>핸들을 돌리거나 내린다</p></li>
<li><img src="../../type/images/use01_img02.jpg" alt=""><p>핸들을 내린다</p></li>
<li><img src="../../type/images/use01_img03.jpg" alt=""><p>핸들을 내린다</p></li>
</ul><div class="clear"></div>
<ul>
<li><h3>버튼</h3><img src="../../type/images/use01_img04.jpg" alt=""><p>버튼을 누른다</p></li>
<li><h3>센서</h3><img src="../../type/images/use01_img05.jpg" alt=""><p>센서에 손을 가까이 한다</p></li>
</ul><div class="clear"></div>
</div>
<div class="point">
<div>
<h2><img src="/utsukushitoilet/shared/images/point.gif" alt="point!"></h2>
<p>일본의 화장실에서는, 사용한 화장지는 그대로 변기 안에 넣어 함께 내려주시기 바랍니다.<br />
※함께 흘러내릴 수 있는 것은, 화장지와 전술한 물에 녹는 티슈에 한합니다.<br />
생리용품이나 그 외의 것은, 화장실 안에 설치되어있는 쓰레기통에 버려 주시기 바랍니다.<br />
화장실 주변을 확인하고, 그 이후에 사용하기 위해서도 반드시 세정해 주시기 바랍니다.</p><div class="clear"></div>
</div>
</div>
<div class="block">
<h2 class="line"><span>02</span>비데</h2>
<p class="left">비데를 사용할 때는, 변기 본체의 측면에 있는 조작 버튼으로 조작할 수 있습니다.<br />
또한, 측면에 조작 버튼이 없는 경우에는, 벽면 등에 있는 리모컨으로 조작할 수 있습니다.<br />
버튼의 의미는 아래와 같습니다.</p>
<h3>조작부의 장소</h3>
<ul>
<li><img src="../../type/images/use02_img01.jpg" alt=""></li>
<li><img src="../../type/images/use02_img02.jpg" alt=""></li>
</ul><div class="clear"></div>
<h3>조작부 그림의 의미</h3>
<ul id="operation">
<li><img src="../../type/images/use02_img03.gif" alt=""></li>
<li><img src="../../type/images/use02_img04.gif" alt=""></li>
<li><img src="../../type/images/use02_img05.gif" alt=""></li>
</ul><div class="clear"></div>
<h2 class="line"><span>03</span>화장실 유사음 장치</h2>
<div class="bisection">
<p>일본에는 소리를 감추기 위해, 물이 흘러내려가는 소리를 내는 "유사음 장치"라는 것이 있습니다. <br />화장실에 들어가면 사람을 감지하고 자동으로 소리가 나는 경우와, 버튼을 누르면 소리가 나는 경우도 있습니다. 변기의 세정 버튼과는 다른 소리가 나므로, 잘못 눌렀을 때에는 변기의 세정 버튼을 찾아 주시기 바랍니다.</p>
<div><img src="./images/use03_img01.gif" alt=""></div><div class="clear"></div>
</div>
<h2 class="line"><span>04</span>긴급 호출 버튼</h2>
<div class="bisection">
<p>세정 조작 버튼의 근처에 긴급용 호출 버튼이 달려있는 경우가 있습니다. 화장실 안에서 기분이 안좋아진 분을 위한 긴급 호출 버튼이므로, 『呼出』라는 글자가 보인다면, 긴급시 이외에는 누르지 않도록 합시다.</p>
<div><img src="../../type/images/use04_img01.jpg" alt=""></div><div class="clear"></div>
</div> </div>
</div> </div>
</section> </section>
......
utsukushitoilet/latest/02.html
...@@ -5,7 +5,6 @@ ...@@ -5,7 +5,6 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="keywords" content=""> <meta name="keywords" content="">
<meta name="description" content=""> <meta name="description" content="">
<meta http-equiv="Refresh" content="10;URL=https://www.nikkei4946.com/studyum/">
<title>日本の最新トイレ : JAPAN TOILET INFORMATION -NIPPON UTSUKUSHI TOILET-</title> <title>日本の最新トイレ : JAPAN TOILET INFORMATION -NIPPON UTSUKUSHI TOILET-</title>
<link rel="stylesheet" href="/utsukushitoilet/shared/css/reset.css" type="text/css" media="all"> <link rel="stylesheet" href="/utsukushitoilet/shared/css/reset.css" type="text/css" media="all">
<link rel="stylesheet" href="/utsukushitoilet/shared/css/common.css" type="text/css" media="all"> <link rel="stylesheet" href="/utsukushitoilet/shared/css/common.css" type="text/css" media="all">
......
utsukushitoilet/latest/02_191023.html 0 → 100644
<!DOCTYPE html>
<html lang="ja" prefix="og: http://ogp.me/ns#">
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta charset="UTF-8">
<meta name="keywords" content="">
<meta name="description" content="">
<title>02.ローシルエット便器/03.節水機器/04.子ども連れ配慮機器：日本の最新トイレ - NIPPON UTSUKUSHI TOILET</title>
<link rel="stylesheet" href="/utsukushitoilet/shared/css/reset.css" type="text/css" media="all">
<link rel="stylesheet" href="/utsukushitoilet/shared/css/common_b.css" type="text/css" media="all">
<link rel="stylesheet" href="css/style.css" type="text/css" media="all">
<script type="text/javascript" src="/utsukushitoilet/shared/js/jquery.js"></script>
<script type="text/javascript" src="/utsukushitoilet/shared/js/jquery.plugin.js"></script>
<script type="text/javascript" src="/utsukushitoilet/shared/js/common.js"></script>
<script type="text/javascript" src="/utsukushitoilet/shared/js/common_parts.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".latest_menu li").autoHeight();
});
</script>
</head>
<body class="second" id="latest">
<!-- google analytics -->
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-560401-9']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<!-- //google analytics -->
<section class="first latest_menu">
<div class="block">
<h1>日本の最新トイレ</h1>
<p>日本の最新トイレは、温水洗浄便座をはじめとするさまざまな最先端の技術が詰まっています。<br>
安心・安全・快適に利用していただくために進化を続けています。
</p>
<ul>
<li><span>01</span><a href="./#_01">温水洗浄便座</a></li>
<li><span>02</span><a href="02.html#_02">ローシルエット便器</a></li>
<li><span>03</span><a href="02.html#_03">節水機器</a></li>
<li><span>04</span><a href="02.html#_04">子ども連れ配慮機器</a></li>
</ul><div class="clear"></div>
</div>
</section>
<section id="_02">
<div class="block">
<h2 class="line"><span>02</span>ローシルエット便器</h2>
<p>近年のトレンドでは、「ローシルエット」デザインが人気となっております。<br>
トイレ単体のデザインを主張させるタイプや空間を自由に演出できるような品揃えにするタイプなど、各社それぞれ特長を持ったラインナップがあります。</p>
<ul>
<li><strong>メーカー</strong><div>外観</div><span>商品名</span></li>
<li><strong><a href="http://www.asahieito.co.jp/" target="_blank">アサヒ衛陶</a></strong>
<div><img src="images/latest02_img01.jpg" alt=""></div><span>ワンピース</span></li>
<li><strong><a href="http://www.janis-kogyo.co.jp/" target="_blank">ジャニス工業</a></strong>
<div><img src="images/latest02_img02.jpg" alt=""></div><span>スマートクリン</span></li>
<li><strong><a href="http://www.toto.co.jp/" target="_blank">TOTO</a></strong>
<div><img src="images/latest02_img03.jpg" alt=""></div><span>ネオレスト</span></li>
<li><strong><a href="http://sumai.panasonic.jp/" target="_blank">パナソニック</a></strong>
<div><img src="images/latest02_img04.jpg" alt=""></div><span>アラウーノ</span></li>
<li><strong><a href="http://inax.lixil.co.jp/" target="_blank">LIXIL</a></strong>
<div><img src="images/latest02_img05.jpg" alt=""></div><span>サティス</span></li>
</ul><div class="clear"></div>
</div>
</section>
<section id="_03">
<div class="block">
<h2 class="line"><span>03</span>節水機器</h2>
<h3>節水便器</h3>
<p>日本の洋式トイレで1回の洗浄（大洗浄）に使用する水量は、6リットル以下です。<br>
また、洗浄水をボウル（便鉢）面に沿って「ぐるっと回す」ことで、節水化を実現しながら、汚れを効率よく洗浄します。</p>
<ul>
<li><img src="images/latest03_img01.jpg" alt=""></li>
<li><img src="images/latest03_img02.jpg" alt=""></li>
</ul><div class="clear"></div>
<ul id="small">
<li><h3>自動洗浄小便器</h3><p>使用後、自動で水が流れます。<br>子どもにも配慮した、アプローチしやすい受け口が低い小便器が一般的です。</p></li>
<li><img src="images/latest03_img03.jpg" alt=""></li>
</ul><div class="clear"></div>
<h3>洗面ゾーン（自動水栓、自動水石けん、エアータオル）</h3>
<ul id="auto">
<li><img src="images/latest03_img04.jpg" alt=""><p>自動で水が出るタイプが一般的になってきました。</p></li>
<li><img src="images/latest03_img05.jpg" alt=""><p>商業施設などには自動タイプの水石けんもあります。</p></li>
<li><img src="images/latest03_img06.jpg" alt=""><p>風で水滴を吹き飛ばすタイプのエアータオルもあります。</p></li>
</ul><div class="clear"></div>
</div>
</section>
<section id="_04">
<div class="block">
<h2 class="line"><span>04</span>子ども連れ配慮機器</h2>
<p>商業施設や交通施設には、ベビーシート・ベビーチェアなどのベビー配慮や子どもの着替えに配慮したフィッティングボードなどの器具が増えてきました。<br>
子ども連れのご家族でも安心してトイレを使うことができます。</p>
<ul>
<li><img src="images/latest04_img01.jpg" alt=""><p>乳幼児用のおむつ交換台です。</p></li>
<li><img src="images/latest04_img02.jpg" alt=""><p>乳幼児のお連れの方が、排泄時に乳幼児を座らせておくためのチェアです。</p></li>
<li><img src="images/latest04_img03.jpg" alt=""><p>子どもの衣類やパンツタイプのおむつの交換に便利な薄形のボードです。</p></li>
</ul><div class="clear"></div>
</div>
</section>
<section class="latest_menu foot_menu">
<div class="block">
<ul>
<li><span>01</span><a href="./#_01">温水洗浄便座</a></li>
<li><span>02</span><a href="02.html#_02">ローシルエット便器</a></li>
<li><span>03</span><a href="02.html#_03">節水機器</a></li>
<li><span>04</span><a href="02.html#_04">子ども連れ配慮機器</a></li>
</ul><div class="clear"></div>
</div>
</section>
<script type="text/javascript">
<!--
includeFoot();
//-->
</script>
</body>
</html>
\ No newline at end of file
utsukushitoilet/latest/02_2.html 0 → 100644
<!DOCTYPE html>
<html lang="ja" prefix="og: http://ogp.me/ns#">
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta charset="UTF-8">
<meta name="keywords" content="">
<meta name="description" content="">
<title>02.ローシルエット便器/03.節水機器/04.子ども連れ配慮機器：日本の最新トイレ - NIPPON UTSUKUSHI TOILET</title>
<link rel="stylesheet" href="/utsukushitoilet/shared/css/reset.css" type="text/css" media="all">
<link rel="stylesheet" href="/utsukushitoilet/shared/css/common.css" type="text/css" media="all">
<link rel="stylesheet" href="css/style.css" type="text/css" media="all">
<script type="text/javascript" src="/utsukushitoilet/shared/js/jquery.js"></script>
<script type="text/javascript" src="/utsukushitoilet/shared/js/jquery.plugin.js"></script>
<script type="text/javascript" src="/utsukushitoilet/shared/js/common.js"></script>
<script type="text/javascript" src="/utsukushitoilet/shared/js/common_parts.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".latest_menu li").autoHeight();
});
</script>
</head>
<body class="second" id="latest">
<!-- google analytics -->
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-560401-9']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<!-- //google analytics -->
<script type="text/javascript" >
<!--
includeHead('div');
//-->
</script>
<noscript>
<p>当サイトはJavaScriptをonにしてご覧ください。</p>
</noscript>
<section class="first latest_menu">
<div class="block">
<h1>日本の最新トイレ</h1>
<p>日本の最新トイレは、温水洗浄便座をはじめとするさまざまな最先端の技術が詰まっています。<br>
安心・安全・快適に利用していただくために進化を続けています。
</p>
<ul>
<li><span>01</span><a href="./#_01">温水洗浄便座</a></li>
<li><span>02</span><a href="02.html#_02">ローシルエット便器</a></li>
<li><span>03</span><a href="02.html#_03">節水機器</a></li>
<li><span>04</span><a href="02.html#_04">子ども連れ配慮機器</a></li>
</ul><div class="clear"></div>
</div>
</section>
<section id="_02">
<div class="block">
<h2 class="line"><span>02</span>ローシルエット便器</h2>
<p>近年のトレンドでは、「ローシルエット」デザインが人気となっております。<br>
トイレ単体のデザインを主張させるタイプや空間を自由に演出できるような品揃えにするタイプなど、各社それぞれ特長を持ったラインナップがあります。</p>
<ul>
<li><strong>メーカー</strong><div>外観</div><span>商品名</span></li>
<li><strong><a href="http://www.asahieito.co.jp/" target="_blank">アサヒ衛陶</a></strong>
<div><img src="images/latest02_img01.jpg" alt=""></div><span>ワンピース</span></li>
<li><strong><a href="http://www.janis-kogyo.co.jp/" target="_blank">ジャニス工業</a></strong>
<div><img src="images/latest02_img02.jpg" alt=""></div><span>スマートクリン</span></li>
<li><strong><a href="http://www.toto.co.jp/" target="_blank">TOTO</a></strong>
<div><img src="images/latest02_img03.jpg" alt=""></div><span>ネオレスト</span></li>
<li><strong><a href="http://sumai.panasonic.jp/" target="_blank">パナソニック</a></strong>
<div><img src="images/latest02_img04.jpg" alt=""></div><span>アラウーノ</span></li>
<li><strong><a href="http://inax.lixil.co.jp/" target="_blank">LIXIL</a></strong>
<div><img src="images/latest02_img05.jpg" alt=""></div><span>サティス</span></li>
</ul><div class="clear"></div>
</div>
</section>
<section id="_03">
<div class="block">
<h2 class="line"><span>03</span>節水機器</h2>
<h3>節水便器</h3>
<p>日本の洋式トイレで1回の洗浄（大洗浄）に使用する水量は、6リットル以下です。<br>
また、洗浄水をボウル（便鉢）面に沿って「ぐるっと回す」ことで、節水化を実現しながら、汚れを効率よく洗浄します。</p>
<ul>
<li><img src="images/latest03_img01.jpg" alt=""></li>
<li><img src="images/latest03_img02.jpg" alt=""></li>
</ul><div class="clear"></div>
<ul id="small">
<li><h3>自動洗浄小便器</h3><p>使用後、自動で水が流れます。<br>子どもにも配慮した、アプローチしやすい受け口が低い小便器が一般的です。</p></li>
<li><img src="images/latest03_img03.jpg" alt=""></li>
</ul><div class="clear"></div>
<h3>洗面ゾーン（自動水栓、自動水石けん、エアータオル）</h3>
<ul id="auto">
<li><img src="images/latest03_img04.jpg" alt=""><p>自動で水が出るタイプが一般的になってきました。</p></li>
<li><img src="images/latest03_img05.jpg" alt=""><p>商業施設などには自動タイプの水石けんもあります。</p></li>
<li><img src="images/latest03_img06.jpg" alt=""><p>風で水滴を吹き飛ばすタイプのエアータオルもあります。</p></li>
</ul><div class="clear"></div>
</div>
</section>
<section id="_04">
<div class="block">
<h2 class="line"><span>04</span>子ども連れ配慮機器</h2>
<p>商業施設や交通施設には、ベビーシート・ベビーチェアなどのベビー配慮や子どもの着替えに配慮したフィッティングボードなどの器具が増えてきました。<br>
子ども連れのご家族でも安心してトイレを使うことができます。</p>
<ul>
<li><img src="images/latest04_img01.jpg" alt=""><p>乳幼児用のおむつ交換台です。</p></li>
<li><img src="images/latest04_img02.jpg" alt=""><p>乳幼児のお連れの方が、排泄時に乳幼児を座らせておくためのチェアです。</p></li>
<li><img src="images/latest04_img03.jpg" alt=""><p>子どもの衣類やパンツタイプのおむつの交換に便利な薄形のボードです。</p></li>
</ul><div class="clear"></div>
</div>
</section>
<section class="latest_menu foot_menu">
<div class="block">
<ul>
<li><span>01</span><a href="./#_01">温水洗浄便座</a></li>
<li><span>02</span><a href="02.html#_02">ローシルエット便器</a></li>
<li><span>03</span><a href="02.html#_03">節水機器</a></li>
<li><span>04</span><a href="02.html#_04">子ども連れ配慮機器</a></li>
</ul><div class="clear"></div>
</div>
</section>
<script type="text/javascript">
<!--
includeFoot();
//-->
</script>
</body>
</html>
\ No newline at end of file
utsukushitoilet/latest/images/latest01_graph01.gif
utsukushitoilet/latest/images/latest01_graph01.gif

15.7 KB | W: | H:

utsukushitoilet/latest/images/latest01_graph01.gif

11.7 KB | W: | H:

utsukushitoilet/latest/images/latest01_graph01.gif
utsukushitoilet/latest/images/latest01_graph01.gif
utsukushitoilet/latest/images/latest01_graph01.gif
utsukushitoilet/latest/images/latest01_graph01.gif
  • 2-up
  • Swipe
  • Onion skin
utsukushitoilet/latest/index2.html 0 → 100644
<!DOCTYPE html>
<html lang="ja" prefix="og: http://ogp.me/ns#">
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta charset="UTF-8">
<meta name="keywords" content="">
<meta name="description" content="">
<title>01.温水洗浄便座：日本の最新トイレ - NIPPON UTSUKUSHI TOILET</title>
<link rel="stylesheet" href="/utsukushitoilet/shared/css/reset.css" type="text/css" media="all">
<link rel="stylesheet" href="/utsukushitoilet/shared/css/common.css" type="text/css" media="all">
<link rel="stylesheet" href="css/style.css" type="text/css" media="all">
<script type="text/javascript" src="/utsukushitoilet/shared/js/jquery.js"></script>
<script type="text/javascript" src="/utsukushitoilet/shared/js/jquery.plugin.js"></script>
<script type="text/javascript" src="/utsukushitoilet/shared/js/common.js"></script>
<script type="text/javascript" src="/utsukushitoilet/shared/js/common_parts.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".latest_menu li").autoHeight();
});
</script>
</head>
<body class="second" id="latest">
<!-- google analytics -->
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-560401-9']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<!-- //google analytics -->
<script type="text/javascript" >
<!--
includeHead('div');
//-->
</script>
<noscript>
<p>当サイトはJavaScriptをonにしてご覧ください。</p>
</noscript>
<section class="first latest_menu">
<div class="block">
<h1>日本の最新トイレ</h1>
<p>日本の最新トイレは、温水洗浄便座をはじめとするさまざまな最先端の技術が詰まっています。<br>
安心・安全・快適に利用していただくために進化を続けています。
</p>
<ul>
<li><span>01</span><a href="./#_01">温水洗浄便座</a></li>
<li><span>02</span><a href="02.html#_02">ローシルエット便器</a></li>
<li><span>03</span><a href="02.html#_03">節水機器</a></li>
<li><span>04</span><a href="02.html#_04">子ども連れ配慮機器</a></li>
</ul><div class="clear"></div>
</div>
</section>
<section id="_01">
<div class="block">
<h2 class="line"><span>01</span>温水洗浄便座</h2>
<p>ぜひとも体感してほしい機能として、便器に設置してある温水洗浄便座があります。（設置してない場合もあります）<br>
温水洗浄便座は、便座を温める暖房機能と温水で局部を洗う機能があります。<br>
また、節電のためのタイマー節電やトイレをあまり使用していない時間帯を見つけて、自動で温度を下げる学習節電するもの、さらには省エネを追及し、使用時のみ瞬間的に便座を暖め、温水にする瞬間式温水洗浄便座。人感センサーにより便ふたを自動開閉したり、自動洗浄するものもあります。</p>
<ul class="type">
<li><h3>袖付タイプ</h3><img src="images/latest01_img01.jpg" alt=""></li>
<li><h3>リモコンタイプ</h3><img src="images/latest01_img02.jpg" alt=""></li>
</ul><div class="clear"></div>
<div id="spread">
<div>
<h3>日本での普及率：77.5％（2015年現在）</h3>
<p>平成25年度の「内閣府消費動向調査」での世帯普及率は約77.5％と、パソコン（78.0%）とほぼ同等の普及率となっています。</p>
</div>
<div><img src="images/latest01_graph01.gif" alt=""></div>
</div><div class="clear"></div>
<h3>温水洗浄便座アンケート</h3>
<p>（アメリカ・イギリス・シンガポール　300名.実施2015年4月）<br>
使用された方の声は、以下の通りです。</p>
<h4>コメント</h4>
<div class="result">
<ul id="comment_pc">
<li><img src="images/latest01_comment01_pc.gif" alt="清潔だと思う"></li>
<li><img src="images/latest01_comment02_pc.gif" alt="おしりを洗えるのが良い"></li>
<li><img src="images/latest01_comment03_pc.gif" alt="トイレットペーパーを使わないのが良い"></li>
<li><img src="images/latest01_comment04_pc.gif" alt="使ったことが無い人にお勧めしたい"></li>
<li><img src="images/latest01_comment05_pc.gif" alt="簡単につかえた"></li>
</ul>
<ul id="comment_sp">
<li><img src="images/latest01_comment01.gif" alt="清潔だと思う"></li>
<li><img src="images/latest01_comment02.gif" alt="おしりを洗えるのが良い"></li>
<li><img src="images/latest01_comment03.gif" alt="トイレットペーパーを使わないのが良い"></li>
<li><img src="images/latest01_comment04.gif" alt="使ったことが無い人にお勧めしたい"></li>
<li><img src="images/latest01_comment05.gif" alt="簡単につかえた"></li>
</ul>
</div>
<h4>グラフ</h4>
<div class="result">
<ul id="graph">
<li id="result_pc"><img src="images/latest01_graph02_yoko.gif" alt=""></li>
<li id="result_sp"><img src="images/latest01_graph02.gif" alt=""></li>
</ul>
</div>
</div>
</section>
<section class="latest_menu foot_menu">
<div class="block">
<ul>
<li><span>01</span><a href="./#_01">温水洗浄便座</a></li>
<li><span>02</span><a href="02.html#_02">ローシルエット便器</a></li>
<li><span>03</span><a href="02.html#_03">節水機器</a></li>
<li><span>04</span><a href="02.html#_04">子ども連れ配慮機器</a></li>
</ul><div class="clear"></div>
</div>
</section>
<script type="text/javascript">
<!--
includeFoot();
//-->
</script>
</body>
</html>
\ No newline at end of file
utsukushitoilet/latest/index_191023.html 0 → 100644
<!DOCTYPE html>
<html lang="ja" prefix="og: http://ogp.me/ns#">
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta charset="UTF-8">
<meta name="keywords" content="">
<meta name="description" content="">
<title>01.温水洗浄便座：日本の最新トイレ - NIPPON UTSUKUSHI TOILET</title>
<link rel="stylesheet" href="/utsukushitoilet/shared/css/reset.css" type="text/css" media="all">
<link rel="stylesheet" href="/utsukushitoilet/shared/css/common_b.css" type="text/css" media="all">
<link rel="stylesheet" href="css/style.css" type="text/css" media="all">
<script type="text/javascript" src="/utsukushitoilet/shared/js/jquery.js"></script>
<script type="text/javascript" src="/utsukushitoilet/shared/js/jquery.plugin.js"></script>
<script type="text/javascript" src="/utsukushitoilet/shared/js/common.js"></script>
<script type="text/javascript" src="/utsukushitoilet/shared/js/common_parts.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".latest_menu li").autoHeight();
});
</script>
</head>
<body class="second" id="latest">
<!-- google analytics -->
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-560401-9']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<!-- //google analytics -->
<section class="first latest_menu">
<div class="block">
<h1>日本の最新トイレ</h1>
<p>日本の最新トイレは、温水洗浄便座をはじめとするさまざまな最先端の技術が詰まっています。<br>
安心・安全・快適に利用していただくために進化を続けています。
</p>
<ul>
<li><span>01</span><a href="./#_01">温水洗浄便座</a></li>
<li><span>02</span><a href="02.html#_02">ローシルエット便器</a></li>
<li><span>03</span><a href="02.html#_03">節水機器</a></li>
<li><span>04</span><a href="02.html#_04">子ども連れ配慮機器</a></li>
</ul><div class="clear"></div>
</div>
</section>
<section id="_01">
<div class="block">
<h2 class="line"><span>01</span>温水洗浄便座</h2>
<p>ぜひとも体感してほしい機能として、便器に設置してある温水洗浄便座があります。（設置してない場合もあります）<br>
温水洗浄便座は、便座を温める暖房機能と温水で局部を洗う機能があります。<br>
また、節電のためのタイマー節電やトイレをあまり使用していない時間帯を見つけて、自動で温度を下げる学習節電するもの、さらには省エネを追及し、使用時のみ瞬間的に便座を暖め、温水にする瞬間式温水洗浄便座。人感センサーにより便ふたを自動開閉したり、自動洗浄するものもあります。</p>
<ul class="type">
<li><h3>袖付タイプ</h3><img src="images/latest01_img01.jpg" alt=""></li>
<li><h3>リモコンタイプ</h3><img src="images/latest01_img02.jpg" alt=""></li>
</ul><div class="clear"></div>
<div id="spread">
<div>
<h3>日本での普及率：77.5％（2015年現在）</h3>
<p>平成25年度の「内閣府消費動向調査」での世帯普及率は約77.5％と、パソコン（78.0%）とほぼ同等の普及率となっています。</p>
</div>
<div><img src="images/latest01_graph01.gif" alt=""></div>
</div><div class="clear"></div>
<h3>温水洗浄便座アンケート</h3>
<p>（アメリカ・イギリス・シンガポール　300名.実施2015年4月）<br>
使用された方の声は、以下の通りです。</p>
<h4>コメント</h4>
<div class="result">
<ul id="comment_pc">
<li><img src="images/latest01_comment01_pc.gif" alt="清潔だと思う"></li>
<li><img src="images/latest01_comment02_pc.gif" alt="おしりを洗えるのが良い"></li>
<li><img src="images/latest01_comment03_pc.gif" alt="トイレットペーパーを使わないのが良い"></li>
<li><img src="images/latest01_comment04_pc.gif" alt="使ったことが無い人にお勧めしたい"></li>
<li><img src="images/latest01_comment05_pc.gif" alt="簡単につかえた"></li>
</ul>
<ul id="comment_sp">
<li><img src="images/latest01_comment01.gif" alt="清潔だと思う"></li>
<li><img src="images/latest01_comment02.gif" alt="おしりを洗えるのが良い"></li>
<li><img src="images/latest01_comment03.gif" alt="トイレットペーパーを使わないのが良い"></li>
<li><img src="images/latest01_comment04.gif" alt="使ったことが無い人にお勧めしたい"></li>
<li><img src="images/latest01_comment05.gif" alt="簡単につかえた"></li>
</ul>
</div>
<h4>グラフ</h4>
<div class="result">
<ul id="graph">
<li id="result_pc"><img src="images/latest01_graph02_yoko.gif" alt=""></li>
<li id="result_sp"><img src="images/latest01_graph02.gif" alt=""></li>
</ul>
</div>
</div>
</section>
<section class="latest_menu foot_menu">
<div class="block">
<ul>
<li><span>01</span><a href="./#_01">温水洗浄便座</a></li>
<li><span>02</span><a href="02.html#_02">ローシルエット便器</a></li>
<li><span>03</span><a href="02.html#_03">節水機器</a></li>
<li><span>04</span><a href="02.html#_04">子ども連れ配慮機器</a></li>
</ul><div class="clear"></div>
</div>
</section>
<script type="text/javascript">
<!--
includeFoot();
//-->
</script>
</body>
</html>
\ No newline at end of file
utsukushitoilet/owner/02_191023.html 0 → 100644
<!DOCTYPE html>
<html lang="ja" prefix="og: http://ogp.me/ns#">
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta charset="UTF-8">
<meta name="keywords" content="">
<meta name="description" content="">
<title>施設管理者様向け - トイレに関する案内用記号の種類と意味 - NIPPON UTSUKUSHI TOILET</title>
<link rel="stylesheet" href="/utsukushitoilet/shared/css/reset.css" type="text/css" media="all">
<link rel="stylesheet" href="/utsukushitoilet/shared/css/common_b.css" type="text/css" media="all">
<link rel="stylesheet" href="css/style.css" type="text/css" media="all">
<script type="text/javascript" src="/utsukushitoilet/shared/js/jquery.js"></script>
<script type="text/javascript" src="/utsukushitoilet/shared/js/jquery.plugin.js"></script>
<script type="text/javascript" src="/utsukushitoilet/shared/js/common.js"></script>
<script type="text/javascript" src="/utsukushitoilet/shared/js/common_parts.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".latest_menu li").autoHeight();
});
</script>
</head>
<body class="second">
<!-- google analytics -->
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-560401-9']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<!-- //google analytics -->
<section class="first owner_menu">
<div class="block">
<h1>施設管理者様向け</h1>
<p>訪日外国人の方に日本のトイレの使い方をお知らせするラベルやシール用の素材データをご用意しています。<br>
フリー素材ですので、目的に合わせて自由にお使いください。
</p>
<ul>
<li><a href="./">ラベル・素材</a></li>
<li><a href="02.html">案内用図記号</a></li>
</ul><div class="clear"></div>
</div>
</section>
<section id="_02">
<div class="block">
<h2 class="line">トイレに関する案内用記号の種類と意味</h2>
<p>日本のトイレでは利用者にわかりやすく案内するために、その用途や設備を示す様々な案内用図記号が表示されています。<br>
それらの主な案内用図記号の種類とその意味についてご紹介します。</p>
<h3>案内用図記号と表示の意味</h3>
<dl id="kigou">
<dt><img src="images/kigou01.jpg" alt=""></dt><dd><strong>トイレ</strong>トイレの位置や設備を示しています。</dd>
<dt><img src="images/kigou02.jpg" alt=""></dt><dd><strong>男性用トイレ</strong>男性用のトイレの位置や設備を示しています。<br>※トイレに限らず、男性用の施設を示す場合もあります。</dd>
<dt><img src="images/kigou03.jpg" alt=""></dt><dd><strong>女性用トイレ</strong>女性用のトイレの位置や設備を示しています。<br>※トイレに限らず、女性用の施設を示す場合もあります。</dd>
<dt><img src="images/kigou04.jpg" alt=""></dt><dd><strong>男女共用トイレ</strong>男女問わず使用できるトイレの位置や設備を示しています。</dd>
<dt><img src="images/kigou05.jpg" alt=""></dt><dd><strong>子ども用トイレ</strong>子ども用トイレの位置や設備を示しています。<br>※トイレに限らず子ども用の施設を示す場合もあります。</dd>
<dt><img src="images/kigou06.jpg" alt=""></dt><dd><strong>障がいがある人が使える設備</strong>車いす利用者など、障がいがある人が使える設備の位置や存在を示しています。</dd>
<dt><img src="images/kigou07.jpg" alt=""></dt><dd><strong>温水洗浄便座</strong>温水洗浄便座の設置位置や設備を示しています。<br>この図記号は洋式トイレであることも示しています。</dd>
<dt><img src="images/kigou08.jpg" alt=""></dt><dd><strong>洋式トイレ（腰掛式トイレ）</strong>洋式トイレ（腰掛式トイレ）が設置されていることを示しています。</dd>
<dt><img src="images/kigou09.jpg" alt=""></dt><dd><strong>和式トイレ（しゃがみ式トイレ）</strong>和式トイレ（しゃがみ式トイレ）が設置されていることを示しています。</dd>
<dt><img src="images/kigou10.jpg" alt=""></dt><dd><strong>乳幼児用設備</strong>授乳、おむつ交換など、乳幼児のために使用する施設の位置や設備を示しています。</dd>
<dt><img src="images/kigou11.jpg" alt=""></dt><dd><strong>おむつ交換台</strong>乳幼児のおむつ交換ができる設備の位置や設備を示しています。</dd>
<dt><img src="images/kigou12.jpg" alt=""></dt><dd><strong>ベビーチェア</strong>トイレブース内にある乳幼児の固定設備を示しています。</dd>
<dt><img src="images/kigou13.jpg" alt=""></dt><dd><strong>着替え台</strong>トイレブース内にある着替えのための設備を示しています。</dd>
<dt><img src="images/kigou14.jpg" alt=""></dt><dd><strong>オストメイト用設備</strong>人工肛門保有者や人工膀胱保有者のパウチ洗い等の位置や設備を示しています。</dd>
<dt><img src="images/kigou15.jpg" alt=""></dt><dd><strong>簡易型オストメイト用設備</strong>人工肛門保有者や人工膀胱保有者のパウチ洗いが付属する便器（トイレ）の位置や設備を示しています。</dd>
</dl>
</div>
</section>
<script type="text/javascript">
<!--
includeFoot();
//-->
</script>
</body>
</html>
\ No newline at end of file
utsukushitoilet/owner/02_2.html 0 → 100644
<!DOCTYPE html>
<html lang="ja" prefix="og: http://ogp.me/ns#">
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta charset="UTF-8">
<meta name="keywords" content="">
<meta name="description" content="">
<title>施設管理者様向け - トイレに関する案内用記号の種類と意味 - NIPPON UTSUKUSHI TOILET</title>
<link rel="stylesheet" href="/utsukushitoilet/shared/css/reset.css" type="text/css" media="all">
<link rel="stylesheet" href="/utsukushitoilet/shared/css/common.css" type="text/css" media="all">
<link rel="stylesheet" href="css/style.css" type="text/css" media="all">
<script type="text/javascript" src="/utsukushitoilet/shared/js/jquery.js"></script>
<script type="text/javascript" src="/utsukushitoilet/shared/js/jquery.plugin.js"></script>
<script type="text/javascript" src="/utsukushitoilet/shared/js/common.js"></script>
<script type="text/javascript" src="/utsukushitoilet/shared/js/common_parts.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".latest_menu li").autoHeight();
});
</script>
</head>
<body class="second">
<!-- google analytics -->
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-560401-9']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<!-- //google analytics -->
<script type="text/javascript" >
<!--
includeHead('div');
//-->
</script>
<noscript>
<p>当サイトはJavaScriptをonにしてご覧ください。</p>
</noscript>
<section class="first owner_menu">
<div class="block">
<h1>施設管理者様向け</h1>
<p>訪日外国人の方に日本のトイレの使い方をお知らせするラベルやシール用の素材データをご用意しています。<br>
フリー素材ですので、目的に合わせて自由にお使いください。
</p>
<ul>
<li><a href="./">ラベル・素材</a></li>
<li><a href="02.html">案内用図記号</a></li>
</ul><div class="clear"></div>
</div>
</section>
<section id="_02">
<div class="block">
<h2 class="line">トイレに関する案内用記号の種類と意味</h2>
<p>日本のトイレでは利用者にわかりやすく案内するために、その用途や設備を示す様々な案内用図記号が表示されています。<br>
それらの主な案内用図記号の種類とその意味についてご紹介します。</p>
<h3>案内用図記号と表示の意味</h3>
<dl id="kigou">
<dt><img src="images/kigou01.jpg" alt=""></dt><dd><strong>トイレ</strong>トイレの位置や設備を示しています。</dd>
<dt><img src="images/kigou02.jpg" alt=""></dt><dd><strong>男性用トイレ</strong>男性用のトイレの位置や設備を示しています。<br>※トイレに限らず、男性用の施設を示す場合もあります。</dd>
<dt><img src="images/kigou03.jpg" alt=""></dt><dd><strong>女性用トイレ</strong>女性用のトイレの位置や設備を示しています。<br>※トイレに限らず、女性用の施設を示す場合もあります。</dd>
<dt><img src="images/kigou04.jpg" alt=""></dt><dd><strong>男女共用トイレ</strong>男女問わず使用できるトイレの位置や設備を示しています。</dd>
<dt><img src="images/kigou05.jpg" alt=""></dt><dd><strong>子ども用トイレ</strong>子ども用トイレの位置や設備を示しています。<br>※トイレに限らず子ども用の施設を示す場合もあります。</dd>
<dt><img src="images/kigou06.jpg" alt=""></dt><dd><strong>障がいがある人が使える設備</strong>車いす利用者など、障がいがある人が使える設備の位置や存在を示しています。</dd>
<dt><img src="images/kigou07.jpg" alt=""></dt><dd><strong>温水洗浄便座</strong>温水洗浄便座の設置位置や設備を示しています。<br>この図記号は洋式トイレであることも示しています。</dd>
<dt><img src="images/kigou08.jpg" alt=""></dt><dd><strong>洋式トイレ（腰掛式トイレ）</strong>洋式トイレ（腰掛式トイレ）が設置されていることを示しています。</dd>
<dt><img src="images/kigou09.jpg" alt=""></dt><dd><strong>和式トイレ（しゃがみ式トイレ）</strong>和式トイレ（しゃがみ式トイレ）が設置されていることを示しています。</dd>
<dt><img src="images/kigou10.jpg" alt=""></dt><dd><strong>乳幼児用設備</strong>授乳、おむつ交換など、乳幼児のために使用する施設の位置や設備を示しています。</dd>
<dt><img src="images/kigou11.jpg" alt=""></dt><dd><strong>おむつ交換台</strong>乳幼児のおむつ交換ができる設備の位置や設備を示しています。</dd>
<dt><img src="images/kigou12.jpg" alt=""></dt><dd><strong>ベビーチェア</strong>トイレブース内にある乳幼児の固定設備を示しています。</dd>
<dt><img src="images/kigou13.jpg" alt=""></dt><dd><strong>着替え台</strong>トイレブース内にある着替えのための設備を示しています。</dd>
<dt><img src="images/kigou14.jpg" alt=""></dt><dd><strong>オストメイト用設備</strong>人工肛門保有者や人工膀胱保有者のパウチ洗い等の位置や設備を示しています。</dd>
<dt><img src="images/kigou15.jpg" alt=""></dt><dd><strong>簡易型オストメイト用設備</strong>人工肛門保有者や人工膀胱保有者のパウチ洗いが付属する便器（トイレ）の位置や設備を示しています。</dd>
</dl>
</div>
</section>
<script type="text/javascript">
<!--
includeFoot();
//-->
</script>
</body>
</html>
\ No newline at end of file
utsukushitoilet/owner/images/pdf/sahou.pdf 0 → 100644
No preview for this file type
utsukushitoilet/owner/index2.html 0 → 100644
<!DOCTYPE html>
<html lang="ja" prefix="og: http://ogp.me/ns#">
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta charset="UTF-8">
<meta name="keywords" content="">
<meta name="description" content="">
<title>施設管理者様向け - ラベル・素材ダウンロード - NIPPON UTSUKUSHI TOILET</title>
<link rel="stylesheet" href="/utsukushitoilet/shared/css/reset.css" type="text/css" media="all">
<link rel="stylesheet" href="/utsukushitoilet/shared/css/common.css" type="text/css" media="all">
<link rel="stylesheet" href="css/style.css" type="text/css" media="all">
<script type="text/javascript" src="/utsukushitoilet/shared/js/jquery.js"></script>
<script type="text/javascript" src="/utsukushitoilet/shared/js/jquery.plugin.js"></script>
<script type="text/javascript" src="/utsukushitoilet/shared/js/common.js"></script>
<script type="text/javascript" src="/utsukushitoilet/shared/js/common_parts.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".latest_menu li").autoHeight();
});
</script>
</head>
<body class="second">
<!-- google analytics -->
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-560401-9']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<!-- //google analytics -->
<script type="text/javascript" >
<!--
includeHead('div');
//-->
</script>
<noscript>
<p>当サイトはJavaScriptをonにしてご覧ください。</p>
</noscript>
<section class="first owner_menu">
<div class="block">
<h1>施設管理者様向け</h1>
<p>訪日外国人の方に日本のトイレの使い方をお知らせするラベルやシール用の素材データをご用意しています。<br>
フリー素材ですので、目的に合わせて自由にお使いください。
</p>
<ul>
<li><a href="./">ラベル・素材</a></li>
<li><a href="02.html">案内用図記号</a></li>
</ul><div class="clear"></div>
</div>
</section>
<section id="_02">
<div class="block">
<h2 class="line">ラベル・素材</h2>
<p>近年のトレンドでは、「ローシルエット」デザインが人気となっております。<br>
トイレ単体のデザインを主張させるタイプや空間を自由に演出できるような品揃えにするタイプなど、各社それぞれ特長を持ったラインナップがあります。</p>
<ul class="label">
<li><strong>トイレの使い方を説明します</strong><div><img src="images/label01_2.jpg" alt=""><span>洋風トイレの使い方を5か国語で表記しています。</span></div>
<a href="#" target="_blank">＞＞ダウンロードはこちら</a>
<div><img src="images/label01_1.jpg" alt=""><span>トイレの個室内の壁などに貼ります。一般的なトイレの使い方についてわかりやすく図示します。</span></div>
</li>
<li><strong>トイレの使い方を説明します（NG例）</strong><div><img src="images/label02_2.jpg" alt=""><span>洋風トイレを使用する際にやってはいけないことを例に挙げて説明しています。</span></div>
<a href="https://www.sanitary-net.com/cms/wp-content/uploads/2015/10/1809_type_a.pdf" target="_blank">＞＞ダウンロードはこちら</a>
<div><img src="images/label02_1.jpg" alt=""><span>トイレの個室内の壁などに貼ります。一般的なトイレの使い方についてわかりやすく図示します。</span></div>
</li>
<li><strong>洗浄便座の使い方を説明します。</strong><div><img src="images/label03_2.jpg" alt=""><span>来日し、温水洗浄便座を初めて使用される方に、ぜひ使っていただくためのシートです。客室等でご案内ください。</span></div>
<a href="https://www.sanitary-net.com/cms/wp-content/uploads/2015/10/1809_type_a.pdf" target="_blank">＞＞ダウンロードはこちら</a>
<div><img src="images/label03_1.jpg" alt=""><span></span></div>
</li>
</ul>
<ul class="label mb40">
<li><strong>温水洗浄便座の操作部について説明します。（標準ピクトグラム仕様）</strong><div><img src="images/label04_2.jpg" alt=""><span>2018年以降に発売の温水洗浄便座で標準ピクトグラムに対応したラベル・素材です。</span></div>
<a href="https://www.sanitary-net.com/cms/wp-content/uploads/2015/10/1809_tipe_b.pdf" target="_blank">＞＞ダウンロードはこちら</a>
<div><img src="images/label04_1.jpg" alt=""><span>ホテル客室等のユニットバス内に貼ります。温水洗浄便座の使い方についてわかりやすく図示します。</span></div>
</li>
<li><strong>温水洗浄便座の操作部について説明します。（メーカーごと）</strong><div><img src="images/label05_2.jpg" alt=""><span>2017年以前に発売の温水洗浄便座のピクトグラムは各メーカーごとに異なっています。ご使用のメーカーのものを選んでお使いください。</span></div>
<a href="https://www.sanitary-net.com/cms/wp-content/uploads/2018/03/180320_b.pdf" target="_blank">＞＞ダウンロードはこちら</a>
<div><img src="images/label05_1.jpg" alt=""><span>ホテル客室等のユニットバス内に貼ります。温水洗浄便座の使い方についてわかりやすく図示します。</span>
</li>
<li><strong>トイレの洗浄操作位置を示します。</strong><div><img src="images/label06_2.jpg" alt=""><span>リモコン洗浄など、トイレの洗浄操作位置がわかりにくい場合、洗浄ボタンの近くに貼ってください。「流す」の標準ピクトグラムです。</span></div>
<a href="#" target="_blank">＞＞ダウンロードはこちら</a>
<div><img src="images/label06_1.jpg" alt=""></div>
</li>
</ul><div class="clear"></div>
</div>
</section>
<script type="text/javascript">
<!--
includeFoot();
//-->
</script>
</body>
</html>
\ No newline at end of file
utsukushitoilet/owner/index_191023.html 0 → 100644
<!DOCTYPE html>
<html lang="ja" prefix="og: http://ogp.me/ns#">
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta charset="UTF-8">
<meta name="keywords" content="">
<meta name="description" content="">
<title>施設管理者様向け - ラベル・素材ダウンロード - NIPPON UTSUKUSHI TOILET</title>
<link rel="stylesheet" href="/utsukushitoilet/shared/css/reset.css" type="text/css" media="all">
<link rel="stylesheet" href="/utsukushitoilet/shared/css/common_b.css" type="text/css" media="all">
<link rel="stylesheet" href="css/style.css" type="text/css" media="all">
<script type="text/javascript" src="/utsukushitoilet/shared/js/jquery.js"></script>
<script type="text/javascript" src="/utsukushitoilet/shared/js/jquery.plugin.js"></script>
<script type="text/javascript" src="/utsukushitoilet/shared/js/common.js"></script>
<script type="text/javascript" src="/utsukushitoilet/shared/js/common_parts.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".latest_menu li").autoHeight();
});
</script>
</head>
<body class="second">
<!-- google analytics -->
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-560401-9']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<!-- //google analytics -->
<section class="first owner_menu">
<div class="block">
<h1>施設管理者様向け</h1>
<p>訪日外国人の方に日本のトイレの使い方をお知らせするラベルやシール用の素材データをご用意しています。<br>
フリー素材ですので、目的に合わせて自由にお使いください。
</p>
<ul>
<li><a href="./">ラベル・素材</a></li>
<li><a href="02.html">案内用図記号</a></li>
</ul><div class="clear"></div>
</div>
</section>
<section id="_02">
<div class="block">
<h2 class="line">ラベル・素材</h2>
<p>ホテルや旅館のオーナーの方に活用いただくチラシデータを作成しました。訪日外国人に向けた、日本のトイレの使い方などを紹介しています。<br>
客室に設置いただくなど、是非ご活用ください。</p>
<ul class="label">
<li><strong>トイレの使い方を説明します</strong><div><img src="images/label01_2.jpg" alt=""><span>洋風トイレの使い方を5か国語で表記しています。<br>トイレの個室内の壁などに貼ります。<br>一般的なトイレの使い方についてわかりやすく図示します。</span></div>
<a href="images/howtouse_label.pdf" target="_blank">＞＞ダウンロードはこちら</a>
</li>
<li><strong>トイレの使い方を説明します（NG例）</strong><div><img src="images/label02_2.jpg" alt="">
<span>洋風トイレを使用する際にやってはいけないことを例に挙げて説明しています。<br>
トイレの個室内の壁などに貼ります。一般的なトイレの使い方についてわかりやすく図示します。</span></div>
<a href="https://www.sanitary-net.com/cms/wp-content/uploads/2015/10/1809_type_a.pdf" target="_blank">＞＞ダウンロードはこちら</a>
</li>
<li><strong>洗浄便座の使い方を説明します。</strong><div><img src="images/label03_2.jpg" alt=""><span>来日し、温水洗浄便座を初めて使用される方に、ぜひ使っていただくためのシートです。客室等でご案内ください。</span></div>
<a href="https://www.sanitary-net.com/cms/wp-content/uploads/2015/10/1809_type_a.pdf" target="_blank">＞＞ダウンロードはこちら</a>
<div><span></span></div>
</li>
</ul>
<ul class="label mb40">
<li><strong>温水洗浄便座の操作部について説明します。（標準ピクトグラム仕様）</strong><div><img src="images/label04_2.jpg" alt=""><span>2018年以降に発売の温水洗浄便座で標準ピクトグラムに対応したラベル・素材です。<br>ホテル客室等のユニットバス内に貼ります。温水洗浄便座の使い方についてわかりやすく図示します。</span></div>
<a href="https://www.sanitary-net.com/cms/wp-content/uploads/2015/10/1809_tipe_b.pdf" target="_blank">＞＞標準ピクトグラムVer.</a>
</li>
<li><strong>温水洗浄便座の操作部について説明します。（メーカーごと）</strong><div><img src="images/label05_2.jpg" alt=""><span>2017年以前に発売の温水洗浄便座のピクトグラムは各メーカーごとに異なっています。ご使用のメーカーのものを選んでお使いください。<br>ホテル客室等のユニットバス内に貼ります。温水洗浄便座の使い方についてわかりやすく図示します。</span></div>
<a href="https://www.sanitary-net.com/cms/wp-content/uploads/2015/11/type_c_asahi.pdf" target="_blank">＞＞アサヒ衛陶</a>
<a href="https://www.sanitary-net.com/cms/wp-content/uploads/2015/11/type_c_sanei.pdf" target="_blank">＞＞SANEI</a>
<a href="https://www.sanitary-net.com/cms/wp-content/uploads/2015/10/type_c_janis_160304.pdf" target="_blank">＞＞ジャニス</a>
<a href="https://www.sanitary-net.com/cms/wp-content/uploads/2015/11/type_c_toshiba.pdf" target="_blank">＞＞東芝ホームテクノ</a>
<a href="https://www.sanitary-net.com/cms/wp-content/uploads/2015/11/type_c_toto.pdf">＞＞TOTO</a>
<a href="https://www.sanitary-net.com/cms/wp-content/uploads/2015/11/type_c_panasonic.pdf" target="_blank">＞＞パナソニック</a>
<a href="https://www.sanitary-net.com/cms/wp-content/uploads/2015/11/type_c_lixil.pdf" target="_blank">＞＞LIXIL</a>
<div>
</li>
<li><strong>トイレの洗浄操作位置を示します。</strong><div><img src="images/label06_2.jpg" alt=""><span>リモコン洗浄など、トイレの洗浄操作位置がわかりにくい場合、洗浄ボタンの近くに貼ってください。「流す」の標準ピクトグラムです。</span></div>
<a href="#" target="_blank">＞＞ラベル1</a>
<a href="#" target="_blank">＞＞ラベル2</a>
<a href="#" target="_blank">＞＞ラベル3</a>
<div></div>
</li>
</ul><div class="clear"></div>
</div>
</section>
<section id="_03">
<div class="block">
<h2 class="line">使用イメージ</h2>
<p>トイレの個室内の壁やホテル客室等のユニットバス内に貼ります。<br>使用イメージ貼り付け位置をご確認ください。</p>
<div id="use">
<ul>
<li><img src="images/use01_img01.png" alt=""><p>ユニットバス</p></li>
<li><img src="images/use01_img02.png" alt=""><p>ユニットバス</p></li>
<li><img src="images/use01_img03.png" alt=""><p>一般便房</p></li>
</ul>
</div>
<div class="clear"></div>
</div>
</section>
<script type="text/javascript">
<!--
includeFoot();
//-->
</script>
</body>
</html>
\ No newline at end of file
utsukushitoilet/shared/css/common.css
@charset "UTF-8"; @charset "UTF-8";
.clear{
clear:both; .clear {
clear: both;
} }
body { body {
margin: 0; margin: 0;
padding: 0; padding: 0;
...@@ -11,18 +13,23 @@ body { ...@@ -11,18 +13,23 @@ body {
line-height: 1.8; line-height: 1.8;
color: #333; color: #333;
} }
a { a {
text-decoration: none; text-decoration: none;
} }
strong { strong {
font-weight: bold; font-weight: bold;
} }
header { header {
background-color: #e9573e; background-color: #e9573e;
} }
header a { header a {
color: #fff; color: #fff;
} }
#head_area { #head_area {
max-width: 980px; max-width: 980px;
width: 100%; width: 100%;
...@@ -30,38 +37,51 @@ header a { ...@@ -30,38 +37,51 @@ header a {
padding: 20px 0; padding: 20px 0;
position: relative; position: relative;
} }
header h1, header #title {
header h1,
header #title {
width: 30%; width: 30%;
float: left; float: left;
} }
header h1 a, header #title a {
header h1 a,
header #title a {
display: block; display: block;
} }
header h1 img, header #title img {
header h1 img,
header #title img {
width: 100%; width: 100%;
max-width: 344px; max-width: 344px;
/*min-width: 312px;*/ /*min-width: 312px;*/
} }
#head_menu { #head_menu {
width: 70%; width: 70%;
float: right; float: right;
} }
#menu01, #head_area .search {
#menu01,
#head_area .search {
/*width: 40%;*/ /*width: 40%;*/
float: right; float: right;
} }
#head_area .search { #head_area .search {
position: absolute; position: absolute;
right: 0; right: 0;
bottom: 20px; bottom: 20px;
width: 21%; width: 21%;
} }
#head_area table { #head_area table {
width: 100%; width: 100%;
} }
#head_area td { #head_area td {
line-height: 0; line-height: 0;
} }
#head_area .search input[type="text"] { #head_area .search input[type="text"] {
border: none !important; border: none !important;
background-color: #ec6b55 !important; background-color: #ec6b55 !important;
...@@ -73,56 +93,73 @@ header h1 img, header #title img { ...@@ -73,56 +93,73 @@ header h1 img, header #title img {
-moz-border-radius: 0 !important; -moz-border-radius: 0 !important;
-webkit-border-radius: 0 !important; -webkit-border-radius: 0 !important;
} }
#head_area .gsc-input-box { #head_area .gsc-input-box {
background-color: inherit; background-color: inherit;
} }
#head_area .gsc-search-box-tools .gsc-search-box .gsc-input { #head_area .gsc-search-box-tools .gsc-search-box .gsc-input {
padding-right: 0; padding-right: 0;
} }
#head_area .gsib_a { #head_area .gsib_a {
padding-right: 0; padding-right: 0;
padding-left: 0; padding-left: 0;
padding-top: 0; padding-top: 0;
} }
#head_area .gsst_b { #head_area .gsst_b {
padding: 0; padding: 0;
} }
#head_area input.gsc-search-button, #head_area input.gsc-search-button:hover, #head_area input.gsc-search-button:focus {
#head_area input.gsc-search-button,
#head_area input.gsc-search-button:hover,
#head_area input.gsc-search-button:focus {
background-color: #e9573e; background-color: #e9573e;
} }
#head_area .cse input.gsc-search-button, #head_area input.gsc-search-button {
#head_area .cse input.gsc-search-button,
#head_area input.gsc-search-button {
border-radius: 0; border-radius: 0;
-moz-border-radius: 0; -moz-border-radius: 0;
-webkit-border-radius: 0; -webkit-border-radius: 0;
} }
#head_area .gsc-input-box { #head_area .gsc-input-box {
border: none; border: none;
} }
#head_area .gsc-search-box .gsc-input>input:hover,
#head_area .gsc-search-box .gsc-input > input:hover,
#head_area .gsc-input-box-hover { #head_area .gsc-input-box-hover {
border: none; border: none;
} }
#head_area input.gsc-search-button-v2 { #head_area input.gsc-search-button-v2 {
margin-top: 3px; margin-top: 3px;
} }
#head_area .search input[type="image"] { #head_area .search input[type="image"] {
width: 14px; width: 14px;
padding: 8px; padding: 8px;
border: solid 1px #fff; border: solid 1px #fff;
} }
#menu01 { #menu01 {
display: block; display: block;
} }
#menu01 li { #menu01 li {
display: inline-block; display: inline-block;
text-align: center; text-align: center;
font-size: 12px; font-size: 12px;
width: 124px; width: 124px;
} }
#lang { #lang {
float: right; float: right;
width: 124px; width: 124px;
} }
#lang select { #lang select {
border: solid 2px #fff; border: solid 2px #fff;
background-color: #e9573e; background-color: #e9573e;
...@@ -139,9 +176,34 @@ header h1 img, header #title img { ...@@ -139,9 +176,34 @@ header h1 img, header #title img {
-moz-border-radius: 0; -moz-border-radius: 0;
-webkit-border-radius: 0; -webkit-border-radius: 0;
} }
body.active #lang select {
border: solid 2px #e9573e;
background-color: #fff;
color: #e9573e;
width: 100%;
padding: 5px 10px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: url(../images/pt_language.png) no-repeat 98% center;
background-size: 18px auto;
background-color: #fff;
border-radius: 0;
-moz-border-radius: 0;
-webkit-border-radius: 0;
}
body.active #lang select option {
color: #e9573e;
background-color: #fff;
}
#lang select option { #lang select option {
color: #fff;
background-color: #e9573e; background-color: #e9573e;
} }
#lang select::-ms-expand { #lang select::-ms-expand {
display: none; display: none;
} }
...@@ -149,14 +211,17 @@ header h1 img, header #title img { ...@@ -149,14 +211,17 @@ header h1 img, header #title img {
#moble_menu { #moble_menu {
display: none; display: none;
} }
header nav { header nav {
background-color: #ec6b55; background-color: #ec6b55;
} }
#navi { #navi {
clear: both; clear: both;
width: 980px; width: 980px;
margin: 0 auto; margin: 0 auto;
} }
#navi li { #navi li {
display: inline-block; display: inline-block;
float: left; float: left;
...@@ -164,24 +229,30 @@ header nav { ...@@ -164,24 +229,30 @@ header nav {
background-color: #ec6b55; background-color: #ec6b55;
text-align: center; text-align: center;
} }
#navi li a { #navi li a {
display: block; display: block;
border-right: solid 1px #e64c32; border-right: solid 1px #e64c32;
padding: 10px 0; padding: 10px 0;
} }
#navi li a:hover { #navi li a:hover {
background-color: #fc826d; background-color: #fc826d;
} }
#navi li:first-child a { #navi li:first-child a {
border-left: solid 1px #e64c32; border-left: solid 1px #e64c32;
} }
section { section {
clear: both; clear: both;
} }
.pagetop { .pagetop {
background: url(../images/pt_pagetop.gif) no-repeat center top; background: url(../images/pt_pagetop.gif) no-repeat center top;
padding-top: 20px; padding-top: 20px;
} }
.pagetop a { .pagetop a {
display: block; display: block;
color: #fff; color: #fff;
...@@ -190,117 +261,150 @@ section { ...@@ -190,117 +261,150 @@ section {
text-align: center; text-align: center;
padding: 16px; padding: 16px;
} }
footer li { footer li {
font-size: 14px; font-size: 14px;
} }
footer a { footer a {
color: #333; color: #333;
} }
footer strong { footer strong {
display: block; display: block;
margin-bottom: 10px; margin-bottom: 10px;
} }
#footer_menu1, #footer_menu2 {
#footer_menu1,
#footer_menu2 {
width: 20%; width: 20%;
float: left; float: left;
} }
#footer_menu1 li, #footer_menu2 li, #footer_download li {
#footer_menu1 li,
#footer_menu2 li,
#footer_download li {
line-height: 2.0; line-height: 2.0;
} }
#footer_menu1 li:before, #footer_menu2 li:before {
#footer_menu1 li:before,
#footer_menu2 li:before {
content: "-"; content: "-";
color: #e70012; color: #e70012;
margin-right: 5px; margin-right: 5px;
} }
#footer_banner, #footer_link {
#footer_banner,
#footer_link {
width: 40%; width: 40%;
float: right; float: right;
} }
#footer_banner li { #footer_banner li {
display: block; display: block;
margin-left: 14px; margin-left: 14px;
margin-bottom: 14px; margin-bottom: 14px;
float: left; float: left;
} }
#footer_banner li.line { #footer_banner li.line {
border: solid 1px #dcdcdc; border: solid 1px #dcdcdc;
max-width: 178px; max-width: 178px;
height: 58px; height: 58px;
} }
#footer_banner li.noline { #footer_banner li.noline {
border: solid 1px #fff; border: solid 1px #fff;
max-width: 180px; max-width: 180px;
} }
#footer_banner .empty { #footer_banner .empty {
width: 180px; width: 180px;
height: 58px; height: 58px;
} }
#footer_banner li img { #footer_banner li img {
width: 100%; width: 100%;
} }
#footer_div1 { #footer_div1 {
border-bottom: solid 1px #dcdcdc; border-bottom: solid 1px #dcdcdc;
} }
#footer_div1, #footer_div2 {
#footer_div1,
#footer_div2 {
clear: both; clear: both;
max-width: 980px; max-width: 980px;
width: 100%; width: 100%;
margin: 0 auto 0 auto; margin: 0 auto 0 auto;
} }
#footer_div1 { #footer_div1 {
margin-top: 30px; margin-top: 30px;
padding-bottom: 20px; padding-bottom: 20px;
} }
#footer_div2 { #footer_div2 {
margin-top: 20px; margin-top: 20px;
margin-bottom: 20px; margin-bottom: 20px;
} }
#footer_download { #footer_download {
width: 57%; width: 57%;
float: left; float: left;
padding: 10px 0; padding: 10px 0;
} }
#footer_download li { #footer_download li {
display: table-cell; display: table-cell;
vertical-align: middle; vertical-align: middle;
} }
#footer_download li:first-child { #footer_download li:first-child {
width: 50%; width: 50%;
padding-right: 10px; padding-right: 10px;
font-size: 11px; font-size: 11px;
line-height: 1.6; line-height: 1.6;
} }
#footer_download strong { #footer_download strong {
/*width: 46%; /*width: 46%;
float: left;*/ float: left;*/
margin-bottom: 0; margin-bottom: 0;
} }
#footer_download ul { #footer_download ul {
width: 100%; width: 100%;
display: table; display: table;
} }
#footer_link { #footer_link {
border-left: solid 1px #dcdcdc; border-left: solid 1px #dcdcdc;
padding: 10px 0; padding: 10px 0;
} }
#footer_link strong { #footer_link strong {
margin-bottom: 0; margin-bottom: 0;
padding-left: 20px; padding-left: 20px;
} }
#footer_link ul { #footer_link ul {
padding-left: 20px; padding-left: 20px;
display: table; display: table;
width: 95%; width: 95%;
} }
#footer_link li { #footer_link li {
display: table-cell; display: table-cell;
vertical-align: middle; vertical-align: middle;
} }
#footer_link li:first-child { #footer_link li:first-child {
width: 51%; width: 51%;
font-size: 12px; font-size: 12px;
line-height: 1.5; line-height: 1.5;
} }
#copyright { #copyright {
clear: both; clear: both;
text-align: center; text-align: center;
...@@ -314,12 +418,14 @@ footer strong { ...@@ -314,12 +418,14 @@ footer strong {
background: url(../images/main_visual.jpg) no-repeat top center; background: url(../images/main_visual.jpg) no-repeat top center;
padding-top: 300px; padding-top: 300px;
} }
.second .block { .second .block {
max-width: 980px; max-width: 980px;
width: 100%; width: 100%;
margin: 0 auto; margin: 0 auto;
text-align: center; text-align: center;
} }
.second h1 { .second h1 {
font-size: 30px; font-size: 30px;
font-weight: bold; font-weight: bold;
...@@ -327,16 +433,18 @@ footer strong { ...@@ -327,16 +433,18 @@ footer strong {
border-bottom: solid 1px #e8392d; border-bottom: solid 1px #e8392d;
margin-bottom: 20px; margin-bottom: 20px;
} }
.second h1 span { .second h1 span {
display: block; display: block;
font-size: 20px; font-size: 20px;
} }
/* 20170303 update */ /* 20170303 update */
.second .point { .second .point {
/*background-color: #ec6b55; /*background-color: #ec6b55;
color: #fff;*/ color: #fff;*/
} }
.second .point > div { .second .point > div {
width: 880px; width: 880px;
margin: 30px auto 0 auto; margin: 30px auto 0 auto;
...@@ -344,22 +452,27 @@ footer strong { ...@@ -344,22 +452,27 @@ footer strong {
border: 3px #ec6b55 double; border: 3px #ec6b55 double;
position: relative; position: relative;
} }
.second .point h2 { .second .point h2 {
width: 100%; width: 100%;
text-align: center; text-align: center;
position: relative; position: relative;
top: -60px;margin-bottom: -30px; top: -60px;
margin-bottom: -30px;
} }
.second .point h2 img { .second .point h2 img {
max-width: 134px; max-width: 134px;
width: 100%; width: 100%;
} }
/* //20170303 update */
.second .point p { /* //20170303 update */
} .second .point p {}
.second .point em { .second .point em {
text-decoration: underline; text-decoration: underline;
} }
.second h2.line { .second h2.line {
border-top: solid 1px #ccc; border-top: solid 1px #ccc;
border-bottom: solid 1px #ccc; border-bottom: solid 1px #ccc;
...@@ -371,6 +484,7 @@ footer strong { ...@@ -371,6 +484,7 @@ footer strong {
line-height: 1.4; line-height: 1.4;
clear: both; clear: both;
} }
.second h2.line span { .second h2.line span {
color: #e9573e; color: #e9573e;
font-weight: normal; font-weight: normal;
...@@ -384,35 +498,44 @@ footer strong { ...@@ -384,35 +498,44 @@ footer strong {
} }
/* 0-640px ----*/ /* 0-640px ----*/
@media screen and (max-width:640px){ @media screen and (max-width:640px) {
body { body {
color: #000; color: #000;
} }
#head_area { #head_area {
padding: 0; padding: 0;
} }
header h1, header #title {
header h1,
header #title {
width: 60%; width: 60%;
} }
header h1 a, header #title a {
header h1 a,
header #title a {
padding: 16px; padding: 16px;
} }
#head_menu { #head_menu {
width: 35%; width: 35%;
} }
#moble_menu { #moble_menu {
display: block; display: block;
width: 100%; width: 100%;
float: right; float: right;
background-color: #ec6b55; background-color: #ec6b55;
} }
#moble_menu a { #moble_menu a {
display: block; display: block;
padding: 9% 6px 9% 14px; padding: 9% 6px 9% 14px;
font-size: 13px; font-size: 13px;
line-height: 2.0; line-height: 2.0;
} }
#moble_menu a:after { #moble_menu a:after {
content: ""; content: "";
display: block; display: block;
...@@ -423,9 +546,11 @@ footer strong { ...@@ -423,9 +546,11 @@ footer strong {
width: 40px; width: 40px;
margin-top: -7px; margin-top: -7px;
} }
#head_menu.open { #head_menu.open {
width: 100%; width: 100%;
} }
#menu01.open { #menu01.open {
width: 100%; width: 100%;
display: block; display: block;
...@@ -435,6 +560,7 @@ footer strong { ...@@ -435,6 +560,7 @@ footer strong {
background-color: #e9573e; background-color: #e9573e;
padding-bottom: 30px; padding-bottom: 30px;
} }
#menu01.open li { #menu01.open li {
display: block; display: block;
width: 94%; width: 94%;
...@@ -442,11 +568,13 @@ footer strong { ...@@ -442,11 +568,13 @@ footer strong {
text-align: left; text-align: left;
font-size: inherit; font-size: inherit;
} }
#menu01.open li:before { #menu01.open li:before {
content: "-"; content: "-";
padding-right: 5px; padding-right: 5px;
color: #fff; color: #fff;
} }
#head_area .search.open { #head_area .search.open {
display: block; display: block;
width: 96.8%; width: 96.8%;
...@@ -454,9 +582,11 @@ footer strong { ...@@ -454,9 +582,11 @@ footer strong {
top: 70px; top: 70px;
z-index: 3; z-index: 3;
} }
#head_area form.gsc-search-box { #head_area form.gsc-search-box {
width: 96.6%; width: 96.6%;
} }
#moble_menu a.open { #moble_menu a.open {
background: url(../images/bt_menu_close.gif) no-repeat 96% 14px #e9573e; background: url(../images/bt_menu_close.gif) no-repeat 96% 14px #e9573e;
background-size: 36px auto; background-size: 36px auto;
...@@ -468,10 +598,12 @@ footer strong { ...@@ -468,10 +598,12 @@ footer strong {
font-size: 30px; font-size: 30px;
text-indent: 20px; text-indent: 20px;
} }
#moble_menu a.open:after { #moble_menu a.open:after {
content: ""; content: "";
display: none; display: none;
} }
ul#navi.open { ul#navi.open {
display: block; display: block;
position: absolute; position: absolute;
...@@ -481,26 +613,34 @@ footer strong { ...@@ -481,26 +613,34 @@ footer strong {
background-color: #e9573e; background-color: #e9573e;
padding-bottom: 50px; padding-bottom: 50px;
} }
#navi.open li { #navi.open li {
display: block; display: block;
float: none; float: none;
width: 94%; width: 94%;
margin: 1px auto; margin: 1px auto;
} }
header h1.non, header #title.non {
header h1.non,
header #title.non {
visibility: hidden; visibility: hidden;
} }
#lang.non { #lang.non {
display: none; display: none;
} }
#menu01, .search, #navi { #menu01,
.search,
#navi {
display: none; display: none;
} }
#lang { #lang {
width: 100%; width: 100%;
margin-bottom: 4%; margin-bottom: 4%;
} }
#lang select { #lang select {
border: none; border: none;
background-color: #ec6b55; background-color: #ec6b55;
...@@ -508,6 +648,7 @@ footer strong { ...@@ -508,6 +648,7 @@ footer strong {
background-size: 20px, auto; background-size: 20px, auto;
font-size: 13px; font-size: 13px;
} }
#lang select option { #lang select option {
background-color: #ec6b55; background-color: #ec6b55;
} }
...@@ -515,10 +656,14 @@ footer strong { ...@@ -515,10 +656,14 @@ footer strong {
#footer_div2 { #footer_div2 {
display: none; display: none;
} }
#footer_menu1, #footer_menu2, #footer_banner {
#footer_menu1,
#footer_menu2,
#footer_banner {
float: none; float: none;
width: 100%; width: 100%;
} }
footer strong { footer strong {
clear: both; clear: both;
text-align: center; text-align: center;
...@@ -526,33 +671,45 @@ footer strong { ...@@ -526,33 +671,45 @@ footer strong {
margin-bottom: 0; margin-bottom: 0;
padding: 10px 0; padding: 10px 0;
} }
#footer_menu1 li, #footer_menu2 li {
#footer_menu1 li,
#footer_menu2 li {
width: 50%; width: 50%;
float: left; float: left;
display: block; display: block;
line-height: 1; line-height: 1;
} }
#footer_menu1 li a, #footer_menu2 li a {
#footer_menu1 li a,
#footer_menu2 li a {
display: block; display: block;
border-bottom: solid 1px #dcdcdc; border-bottom: solid 1px #dcdcdc;
padding: 20px 0; padding: 20px 0;
text-align: center; text-align: center;
} }
#footer_menu1 li:nth-child(2n+1) a, #footer_menu2 li:nth-child(2n+1) a {
#footer_menu1 li:nth-child(2n+1) a,
#footer_menu2 li:nth-child(2n+1) a {
border-right: solid 1px #dcdcdc; border-right: solid 1px #dcdcdc;
} }
#footer_menu1 li:before, #footer_menu2 li:before {
#footer_menu1 li:before,
#footer_menu2 li:before {
content: ""; content: "";
display: none; display: none;
} }
#footer_menu1:after, #footer_menu2:after {
#footer_menu1:after,
#footer_menu2:after {
content: ""; content: "";
display: block; display: block;
clear: both; clear: both;
} }
#footer_banner ul { #footer_banner ul {
margin: 10px 1%; margin: 10px 1%;
} }
#footer_banner li { #footer_banner li {
max-width: 271px; max-width: 271px;
display: inline-block; display: inline-block;
...@@ -560,21 +717,24 @@ footer strong { ...@@ -560,21 +717,24 @@ footer strong {
margin: 2%; margin: 2%;
width: 44%; width: 44%;
} }
#footer_banner .empty { #footer_banner .empty {
width: 100%; width: 100%;
display: none; display: none;
} }
/* second page 共通 */ /* second page 共通 */
.second .first { .second .first {
background: none; background: none;
padding-top: 40px; padding-top: 40px;
} }
/* 20170303 update */ /* 20170303 update */
.second .block > p { .second .block > p {
text-align: left; text-align: left;
margin: 0 4%; margin: 0 4%;
} }
.second .point > div { .second .point > div {
width: 90%; width: 90%;
margin: 0 auto; margin: 0 auto;
...@@ -582,16 +742,19 @@ footer strong { ...@@ -582,16 +742,19 @@ footer strong {
border: 3px #ec6b55 double; border: 3px #ec6b55 double;
position: relative; position: relative;
} }
.second .point h2 { .second .point h2 {
margin: 30px auto -40px auto; margin: 30px auto -40px auto;
float: none; float: none;
} }
/* //20170303 update */ /* //20170303 update */
.second .point p { .second .point p {
margin: 0 4%; margin: 0 4%;
float: none; float: none;
width: initial; width: initial;
} }
.second h2.line { .second h2.line {
margin-left: 4%; margin-left: 4%;
margin-right: 4%; margin-right: 4%;
...@@ -600,12 +763,759 @@ footer strong { ...@@ -600,12 +763,759 @@ footer strong {
} }
.nodl_txt{ .nodl_txt {
text-align: center; text-align: center;
color: #dd0000; color: #dd0000;
font-size: 70%; font-size: 70%;
} }
.nodl_txt img{
.nodl_txt img {
opacity: 0.4; opacity: 0.4;
background-color:black; background-color: black;
}
/* 2020.2.19 update */
body#situation h1 {
padding-top: 110px;
background: url(/utsukushitoilet/shared/images/icon01.png) no-repeat 50% top;
}
body#sign h1 {
padding-top: 110px;
background: url(/utsukushitoilet/shared/images/icon02.png) no-repeat 50% top;
}
body#type h1 {
padding-top: 110px;
background: url(/utsukushitoilet/shared/images/icon03.png) no-repeat 50% top;
}
body#howtouse h1 {
padding-top: 110px;
background: url(/utsukushitoilet/shared/images/icon04.png) no-repeat 50% top;
}
body#latest h1 {
padding-top: 110px;
background: url(/utsukushitoilet/shared/images/icon05.png) no-repeat 50% top;
}
header.pht {
position: absolute;
top: 0;
left: 0;
right: 0;
display: block;
width: 100%;
height: 134.5px;
margin: auto;
background: url(/utsukushitoilet/shared/images/showcase.jpg) no-repeat top center;
background-size: cover;
}
[class|=inner] {
max-width: 980px;
width: 100%;
margin: 0 auto;
}
.title_area {
float: none;
}
.title_area a {
display: block;
width: 248px;
}
.title_area a .logo_line {
display: block;
margin-top: .5em;
padding: .2em 3em;
background-color: #fff;
line-height: 0;
}
.title_area a .logo_line img {
max-width: 100%;
}
#head_area.head_area {
position: absolute;
top: 0;
left: 0;
right: 0;
max-width: 980px;
width: 100%;
margin: 0 auto;
padding: 20px 0;
display: flex;
align-items: center;
justify-content: space-between;
z-index: 110;
}
.lang_menu {
margin-right: 6em;
}
.inner-toggle {
position: relative;
}
/* toggle ********************* */
.toggle_menu {
display: none;
position: absolute;
left: 0;
right: 0;
top: 8em;
padding: 2em 0;
z-index: 100;
/*background-color: #e9573e;*/
}
.toggle_btn {
position: absolute;
top: 2em;
right: 0;
display: block;
width: 70px;
height: 70px;
padding: 22px;
margin: auto;
box-sizing: border-box;
border: solid 1px #fff;
border-radius: 50%;
z-index: 111;
}
.toggle {
position: absolute;
display: block;
width: 25px;
height: auto;
z-index: 10;
padding: 0;
}
.toggle span {
position: relative;
display: block;
width: 100%;
transition: transform .3s ease;
}
.toggle span,
.toggle span:before,
.toggle span:after {
background-color: #fff;
height: 3px;
margin: auto;
}
.toggle span:before,
.toggle span:after {
position: absolute;
content: "";
right: 0;
}
.toggle span:before {
width: 100%;
margin-top: 10px;
transition: opacity .6s ease;
}
.toggle span:after {
width: 100%;
margin-top: 20px;
transition: transform .3s ease;
}
.toggle:hover,
.active .toggle:hover {
text-decoration: none;
}
.toggle_btn.active {
background-color: #e9573e;
}
.toggle_btn.active .toggle span {
transform: rotate(-45deg);
transform-origin: 1.5em .4em;
transition: all .3s ease;
}
.toggle_btn.active .toggle span:before {
opacity: 0;
transition: opacity 0s ease;
}
.toggle_btn.active .toggle span:after {
width: 100%;
transform: rotate(90deg);
transition: all .3s ease;
margin-top: 0;
}
/* overlay
****************************************************** */
.overlay {
display: none;
width: 100%;
height: 100%;
text-align: center;
position: fixed;
top: 0;
z-index: 99;
background-color: #d4d4d4;
opacity: 1;
}
.header_flxpc {
display: flex;
align-items: flex-end;
justify-content: space-between;
}
.header_nav {
display: flex;
flex-wrap: wrap;
align-items: stretch;
justify-content: flex-start;
width: 73%;
}
.header_nav li {
width: 50%;
box-sizing: border-box;
border-right: solid 1px #e9573e;
}
.header_nav li:first-child {
width: 100%;
border-top: solid 2px #fff;
border-right: solid 2px #fff;
border-left: solid 2px #fff;
text-align: center;
font-size: 14px;
font-weight: bold;
color: #fff;
background-color: #e9573e;
}
.header_nav .situation,
.header_nav .sign {
border-bottom: solid 1px #e9573e;
}
.header_nav .sign,
.header_nav .howtouse {
border-right-color: #fff;
}
.header_nav li a {
position: relative;
display: block;
padding: 1em 0 1em 5em;
background-color: #fff;
font-weight: bold;
color: #e9573e;
}
.header_nav a::before {
content: "";
position: absolute;
left: 1em;
top: 0;
bottom: 0;
display: block;
margin: auto;
width: 2em;
height: 2em;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
.header_nav .situation a::before {
width: 2.4em;
height: 2.4em;
background-image: url(/utsukushitoilet/shared/images/icon01.svg);
}
.header_nav .sign a::before {
background-image: url(/utsukushitoilet/shared/images/icon02.svg);
}
.header_nav .type a::before {
background-image: url(/utsukushitoilet/shared/images/icon03.svg);
}
.header_nav .howtouse a::before {
background-image: url(/utsukushitoilet/shared/images/icon04.svg);
}
.header_nav a::after,
.header_flxpc .latest a::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
right: 1.8em;
display: block;
margin: auto;
width: .6em;
height: .6em;
background: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%205%2010%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20fill%3D%22%23e9573e%22%20d%3D%22M5.000%2C5.000%20L-0.000%2C-0.000%20L-0.000%2C10.000%20L5.000%2C5.000%20Z%22%2F%3E%3C%2Fsvg%3E') no-repeat center;
background-size: contain;
}
.header_flxpc .latest a {
position: relative;
display: block;
padding: 2.5em 4em 2.5em 6em;
background-color: #fff;
line-height: 1.3;
font-weight: bold;
color: #e9573e;
}
.header_flxpc .latest a::before {
content: "";
position: absolute;
left: 2.5em;
top: 0;
bottom: 0;
display: block;
margin: auto;
width: 2.4em;
height: 2.4em;
background: url(/utsukushitoilet/shared/images/icon05.svg) no-repeat center;
background-size: contain;
}
.menu_box .manage {
margin-top: .5em;
text-align: right;
}
.menu_box .manage a {
display: inline-block;
vertical-align: middle;
font-weight: bold;
}
.menu_box .manage a::before {
content: "";
display: inline-block;
width: .6em;
height: .6em;
margin-right: .5em;
background: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%205%2010%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20fill%3D%22%23fff%22%20d%3D%22M5.000%2C5.000%20L-0.000%2C-0.000%20L-0.000%2C10.000%20L5.000%2C5.000%20Z%22%2F%3E%3C%2Fsvg%3E') no-repeat center;
background-size: contain;
vertical-align: middle;
}
.header_nav2 {
margin: 2em 0;
padding-top: 2em;
border-top: solid 1px rgba(255, 255, 255, .3);
}
.header_nav2 li {
display: inline-block;
}
.header_nav2 li:first-child {
margin-right: 3em;
}
.header_nav2 a {
font-size: 112.5%;
font-weight: bold;
}
.toggle_menu .search {
margin: 2em 0;
padding-top: 2em;
border-top: solid 1px rgba(255, 255, 255, .3);
}
.toggle_menu .search > div {
max-width: 580px;
}
.toggle_menu .search .gsc-search-box-tools .gsc-search-box .gsc-input {
padding-right: 0;
}
.toggle_menu .search .gsc-search-box-tools .gsc-search-box .gsc-input input[type=text] {
background-color: rgba(255, 255, 255, .3) !important;
}
.toggle_menu .search .gsc-search-button .gsc-search-button-v2 {
padding: 11px 20px 10px;
margin-left: 0;
width: 100%;
border-radius: 0;
border: none;
}
#lang {
width: 180px;
}
#lang select {
background: none;
/*-webkit-appearance: menulist;*/
}
#lang select option {
padding: .5em;
}
.second .first {
padding-top: 196px;
background: none;
}
@media screen and (max-width:640px) {
br.pc {
display: none;
}
header.pht {
height: 19.76563vw;
}
[class|=inner] {
width: 92%;
}
.title_area {
width: 45%;
}
.title_area a {
width: 38.75vw;
padding: 2.5vw;
}
.title_area a .logo_line {
margin-top: 1.5vw;
padding: .2em 7vw;
}
#head_area.head_area {
max-width: 100%;
padding: 0;
}
.lang_menu {
margin-right: 18vw;
}
.menu_box {
font-size: 2.5vw;
}
/* toggle ********************* */
.toggle_menu {
top: 19.6875vw;
}
.toggle_btn {
top: 4.8vw;
right: 0;
width: 10.9375vw;
height: 10.9375vw;
padding: 3.4375vw;
}
.toggle {
width: 3.90625vw;
}
.toggle span:before {
margin-top: 1.5625vw;
}
.toggle span:after {
margin-top: 3.125vw;
}
.toggle_btn.active .toggle span {
transform-origin: 3.8vw 1.1vw;
}
.header_nav .type,
.header_nav .howtouse {
border-bottom: solid 1px #e9573e;
}
.header_flxpc .latest a::before {
left: 1em;
}
.header_flxpc
/*,
.header_nav*/
{
display: block;
}
.header_nav {
width: 100%;
}
/*
.header_nav li {
width: 100%;
}*/
.header_nav a::before,
.header_flxpc .latest a::before {
left: .6em;
}
.header_nav li:first-child {
font-size: 2.5vw;
}
.header_nav li a,
.header_flxpc .latest a {
padding: 1em 0 1em 3.5em;
line-height: 1.5;
}
.header_nav li a {
padding-right: 1.8em;
padding-left: 3.2em;
}
.header_flxpc .latest a {}
.header_nav a::after {
right: 1em;
}
#lang {
width: 28vw;
margin-bottom: 0;
line-height: 1;
}
#lang select {
padding: 1vw 2vw;
border: solid 2px #fff;
font-size: 2.5vw;
}
.header_nav2 {
margin: 1em 0;
padding-top: 1em;
}
.header_nav2 li {
display: block;
margin-bottom: .5em;
}
.header_nav2 li:first-child {
margin-right: 0;
}
.header_nav2 a {
font-size: 2.5vw;
}
.search {
display: block;
}
.toggle_menu .search .gsc-search-button .gsc-search-button-v2 {
padding: 15px 20px;
}
.second .first {
padding-top: 27vw;
}
/* 多言語ページ */
#moble_menu + .search {
display: none;
}
header:not([class]) #lang {
width: 100%;
margin-bottom: 4%;
}
header:not([class]) #lang select {
border: none;
background-color: #ec6b55;
padding: 13% 0 13% 10px;
background-image: url(/utsukushitoilet/images/pt_language.gif);
background-repeat: no-repeat;
background-position: 90% center;
background-size: 20px, auto;
font-size: 13px;
}
}
/* 2020.2.19 upsate */
.header_flxpc a {
font-size: 85%;
}
.header_flxpc .latest {
max-width: 240px;
}
.header_flxpc .latest b {
display: block;
border-top: solid 2px #fff;
border-right: solid 2px #fff;
border-left: solid 2px #fff;
text-align: center;
font-size: 14px;
color: #fff;
background-color: #e9573e;
}
.menu_box .manage a {
padding: 0 0 0 .71em;
background-color: #fff;
color: #e9573e;
}
.menu_box .manage a::before {
content: none;
}
.menu_box .manage a::after {
content: "";
display: inline-block;
width: .6em;
height: .6em;
margin-left: .2em;
margin-right: .5em;
background: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%205%2010%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20fill%3D%22%23e9573e%22%20d%3D%22M5.000%2C5.000%20L-0.000%2C-0.000%20L-0.000%2C10.000%20L5.000%2C5.000%20Z%22%2F%3E%3C%2Fsvg%3E') no-repeat center;
background-size: contain;
}
@media screen and (max-width:640px) {
.header_flxpc .latest {
max-width: 100%;
}
.header_flxpc .latest b {
font-size: 2.5vw;
}
}
#breadcrumbs_area {
margin: -55px auto 30px auto;
font-size: 75%;
text-align: left;
}
#breadcrumbs_area a {
text-decoration: underline;
color: #e05538;
}
@media screen and (max-width:640px) {
#breadcrumbs_area {
margin-top: -25px;
}
}
#footer_menu2 strong {
line-height: 1.5;
}
#footer_menu2 small {
line-height: 1.5;
font-size: 72%;
display: block;
margin-top: -5px;
margin-bottom: 10px;
}
@media screen and (max-width:640px) {
#footer_menu2 small {
display: none;
}
}
#footer_menu1.list_wt,
#footer_menu2.list_wt {
width: 28%;
}
.second .point p {}
.second .point p img,
.second .point .box img {
float: right;
}
.second .point p span,
.second .point .box li {
width: 70% !important;
display: block;
float: left;
}
.second .point p span.point_txt01 {
text-indent: -1em;
padding-left: 1em;
}
.second .point em {
text-decoration: underline;
}
.second h2.line {
border-top: solid 1px #ccc;
border-bottom: solid 1px #ccc;
font-size: 24px;
font-weight: bold;
padding: 36px 0;
position: relative;
margin-top: 60px;
line-height: 1.4;
clear: both;
}
.second h2.line span {
color: #e9573e;
font-weight: normal;
font-size: 40px;
position: absolute;
left: 0;
right: 0;
top: -36px;
font-family: Arial, Helvetica・ Verdana;
font-stretch: condensed;
}
@media screen and (max-width:640px) {
#footer_menu1.list_wt,
#footer_menu2.list_wt {
width: 100%;
}
} }
utsukushitoilet/shared/css/common_191023.css 0 → 100644
@charset "UTF-8";
.clear{
clear:both;
}
body {
margin: 0;
padding: 0;
font-size: 16px;
/*font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', sans-serif;*/
font-family: Verdana, Roboto, "Droid Sans", "游ゴシック", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ＭＳ Ｐゴシック", sans-serif;
line-height: 1.8;
color: #333;
}
a {
text-decoration: none;
}
strong {
font-weight: bold;
}
header {
background-color: #e9573e;
position: relative;
}
header a {
color: #fff;
}
#head_area {
max-width: 980px;
width: 100%;
margin: 0 auto;
padding: 20px 0;
position: relative;
}
header h1, header #title {
width: 30%;
float: left;
}
header h1 a, header #title a {
display: block;
}
header h1 img, header #title img {
width: 100%;
max-width: 256px;
/*max-width: 344px;20190319updata*/
/*min-width: 312px;*/
}
#head_menu {
width: 70%;
float: right;
}
#menu01,#menu02, #head_area .search {
/*width: 40%;*/
float: right;
}
#head_area .search {
position: absolute;
right: 0;
bottom: 20px;
width: 21%;
}
#head_area table {
width: 100%;
}
#head_area td {
line-height: 0;
}
#head_area .search input[type="text"] {
border: none !important;
background-color: #ec6b55 !important;
height: 30px !important;
width: 100% !important;
background-image: none !important;
color: #fff;
border-radius: 0 !important;
-moz-border-radius: 0 !important;
-webkit-border-radius: 0 !important;
}
#head_area .gsc-input-box {
background-color: inherit;
}
#head_area .gsc-search-box-tools .gsc-search-box .gsc-input {
padding-right: 0;
}
#head_area .gsib_a {
padding-right: 0;
padding-left: 0;
padding-top: 0;
}
#head_area .gsst_b {
padding: 0;
}
#head_area input.gsc-search-button, #head_area input.gsc-search-button:hover, #head_area input.gsc-search-button:focus {
background-color: #e9573e;
}
#head_area .cse input.gsc-search-button, #head_area input.gsc-search-button {
border-radius: 0;
-moz-border-radius: 0;
-webkit-border-radius: 0;
}
#head_area .gsc-input-box {
border: none;
}
#head_area .gsc-search-box .gsc-input>input:hover,
#head_area .gsc-input-box-hover {
border: none;
}
#head_area input.gsc-search-button-v2 {
margin-top: 3px;
}
#head_area .search input[type="image"] {
width: 14px;
padding: 8px;
border: solid 1px #fff;
}
#menu01 {
display: block;
margin-right: 2em;/*20190319updata*/
}
#menu01 li {
display: inline-block;
text-align: center;
font-size: 12px;
/*width: 124px;20190319updata*/
width: 10em;/*20190319updata*/
}
#lang {
float: right;
width: 124px;
}
#lang select {
border: solid 2px #fff;
background-color: #e9573e;
color: #fff;
width: 100%;
padding: 5px 10px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: url(../images/pt_language.gif) no-repeat 90% center;
background-size: 10px, auto;
background-color: #e9573e;
border-radius: 0;
-moz-border-radius: 0;
-webkit-border-radius: 0;
}
#lang select option {
background-color: #e9573e;
}
#lang select::-ms-expand {
display: none;
}
#moble_menu {
display: none;
}
header nav {
background-color: #ec6b55;
}
#navi {
clear: both;
width: 980px;
margin: 0 auto;
font-size: 90%;/*20190319updata*/
font-weight: bold;/*20190319updata*/
}
#navi li {
display: inline-block;
float: left;
/*width: 20%;20190319updata*/
width: 16.6%;/*20190319updata*/
background-color: #ec6b55;
text-align: center;
}
#navi li a {
display: block;
border-right: solid 1px #e64c32;
padding: 8px 0;
}
#navi li a:hover {
background-color: #fc826d;
}
#navi li:first-child a {
border-left: solid 1px #e64c32;
}
section {
clear: both;
}
.pagetop {
background: url(../images/pt_pagetop.gif) no-repeat center top;
padding-top: 20px;
}
.pagetop a {
display: block;
color: #fff;
background-color: #dcdcdc;
border-bottom: solid 1px #ccc;
text-align: center;
padding: 16px;
}
footer li {
font-size: 14px;
}
footer a {
color: #333;
}
footer strong {
display: block;
margin-bottom: 10px;
}
#footer_menu1, #footer_menu2 {
width: 20%;
float: left;
}
#footer_menu1 li, #footer_menu2 li, #footer_download li {
line-height: 2.0;
}
#footer_menu1 li:before, #footer_menu2 li:before {
content: "-";
color: #e70012;
margin-right: 5px;
}
#footer_banner, #footer_link {
width: 40%;
float: right;
}
#footer_banner li {
display: block;
margin-left: 14px;
margin-bottom: 14px;
float: left;
}
#footer_banner li.line {
border: solid 1px #dcdcdc;
max-width: 178px;
height: 58px;
}
#footer_banner li.noline {
border: solid 1px #fff;
max-width: 180px;
}
#footer_banner .empty {
width: 180px;
height: 58px;
}
#footer_banner li img {
width: 100%;
}
#footer_div1 {
border-bottom: solid 1px #dcdcdc;
}
#footer_div1, #footer_div2 {
clear: both;
max-width: 980px;
width: 100%;
margin: 0 auto 0 auto;
}
#footer_div1 {
margin-top: 30px;
padding-bottom: 20px;
}
#footer_div2 {
margin-top: 20px;
margin-bottom: 20px;
}
#footer_download {
width: 57%;
float: left;
padding: 10px 0;
}
#footer_download li {
display: table-cell;
vertical-align: middle;
}
#footer_download li:first-child {
width: 50%;
padding-right: 10px;
font-size: 11px;
line-height: 1.6;
}
#footer_download strong {
/*width: 46%;
float: left;*/
margin-bottom: 0;
}
#footer_download ul {
width: 100%;
display: table;
}
#footer_link {
border-left: solid 1px #dcdcdc;
padding: 10px 0;
}
#footer_link strong {
margin-bottom: 0;
padding-left: 20px;
}
#footer_link ul {
padding-left: 20px;
display: table;
width: 95%;
}
#footer_link li {
display: table-cell;
vertical-align: middle;
}
#footer_link li:first-child {
width: 51%;
font-size: 12px;
line-height: 1.5;
}
#copyright {
clear: both;
text-align: center;
border-top: solid 1px #dcdcdc;
font-size: 11px;
padding: 20px;
}
/* second page 共通 */
.second .first {
background: url(../images/main_visual.jpg) no-repeat top center;
padding-top: 300px;
}
.second .block {
max-width: 980px;
width: 100%;
margin: 0 auto;
text-align: center;
}
.second h1 {
font-size: 30px;
font-weight: bold;
display: inline-block;
border-bottom: solid 1px #e8392d;
margin-bottom: 20px;
}
.second h1 span {
display: block;
font-size: 20px;
}
/* 20170303 update */
.second .point {
/*background-color: #ec6b55;
color: #fff;*/
}
.second .point > div {
width: 880px;
margin: 30px auto 0 auto;
padding: 30px 50px;
border: 3px #ec6b55 double;
position: relative;
}
.second .point h2 {
width: 100%;
text-align: center;
position: relative;
top: -60px;margin-bottom: -30px;
}
.second .point h2 img {
max-width: 134px;
width: 100%;
}
/* //20170303 update */
.second .point p {
}
.second .point em {
text-decoration: underline;
}
.second h2.line {
border-top: solid 1px #ccc;
border-bottom: solid 1px #ccc;
font-size: 24px;
font-weight: bold;
padding: 36px 0;
position: relative;
margin-top: 60px;
line-height: 1.4;
clear: both;
}
.second h2.line span {
color: #e9573e;
font-weight: normal;
font-size: 40px;
position: absolute;
left: 0;
right: 0;
top: -36px;
font-family: Arial, Helvetica・ Verdana;
font-stretch: condensed;
}
/* 0-640px ----*/
@media screen and (max-width:640px){
body {
color: #000;
}
#head_area {
padding: 0;
}
header h1, header #title {
width: 60%;
}
header h1 a, header #title a {
padding: 16px;
}
#head_menu {
width: 35%;
}
#moble_menu {
display: block;
width: 100%;
float: right;
background-color: #ec6b55;
}
#moble_menu a {
display: block;
padding: 9% 6px 9% 14px;
font-size: 13px;
line-height: 2.0;
}
#moble_menu a:after {
content: "";
display: block;
background: url(../images/bt_menu_open.gif) no-repeat center center;
background-size: 36px auto;
min-height: 40px;
float: right;
width: 40px;
margin-top: -7px;
}
#head_menu.open {
width: 100%;
}
#menu01.open {
width: 100%;
display: block;
position: absolute;
z-index: 3;
top: 380px;
background-color: #e9573e;
padding-bottom: 30px;
}
#menu01.open li {
display: block;
width: 94%;
margin: 1px auto;
text-align: left;
font-size: inherit;
}
#menu01.open li:before {
content: "-";
padding-right: 5px;
color: #fff;
}
#head_area .search.open {
display: block;
width: 96.8%;
margin: 0 auto;
top: 70px;
z-index: 3;
}
#head_area form.gsc-search-box {
width: 96.6%;
}
#moble_menu a.open {
background: url(../images/bt_menu_close.gif) no-repeat 96% 14px #e9573e;
background-size: 36px auto;
z-index: 2;
position: absolute;
top: 0;
width: 100%;
padding: 10px 0 100px 0;
font-size: 30px;
text-indent: 20px;
}
#moble_menu a.open:after {
content: "";
display: none;
}
ul#navi.open {
display: block;
position: absolute;
top: 120px;
width: 100%;
z-index: 2;
background-color: #e9573e;
padding-bottom: 50px;
}
#navi.open li {
display: block;
float: none;
width: 94%;
margin: 1px auto;
}
header h1.non, header #title.non {
visibility: hidden;
}
#lang.non {
display: none;
}
#menu01, .search, #navi {
display: none;
}
#lang {
width: 100%;
margin-bottom: 4%;
}
#lang select {
border: none;
background-color: #ec6b55;
padding: 13% 0 13% 10px;
background-size: 20px, auto;
font-size: 13px;
}
#lang select option {
background-color: #ec6b55;
}
#footer_div2 {
display: none;
}
#footer_menu1, #footer_menu2, #footer_banner {
float: none;
width: 100%;
}
footer strong {
clear: both;
text-align: center;
border-bottom: solid 1px #dcdcdc;
margin-bottom: 0;
padding: 10px 0;
}
#footer_menu1 li, #footer_menu2 li {
width: 50%;
float: left;
display: block;
line-height: 1;
}
#footer_menu1 li a, #footer_menu2 li a {
display: block;
border-bottom: solid 1px #dcdcdc;
padding: 20px 0;
text-align: center;
}
#footer_menu1 li:nth-child(2n+1) a, #footer_menu2 li:nth-child(2n+1) a {
border-right: solid 1px #dcdcdc;
}
#footer_menu1 li:before, #footer_menu2 li:before {
content: "";
display: none;
}
#footer_menu1:after, #footer_menu2:after {
content: "";
display: block;
clear: both;
}
#footer_banner ul {
margin: 10px 1%;
}
#footer_banner li {
max-width: 271px;
display: inline-block;
float: none;
margin: 2%;
width: 44%;
}
#footer_banner .empty {
width: 100%;
display: none;
}
/* second page 共通 */
.second .first {
background: none;
padding-top: 40px;
}
/* 20170303 update */
.second .block > p {
text-align: left;
margin: 0 4%;
}
.second .point > div {
width: 90%;
margin: 0 auto;
padding: 10px 10px 30px 10px;
border: 3px #ec6b55 double;
position: relative;
}
.second .point h2 {
margin: 30px auto -40px auto;
float: none;
}
/* //20170303 update */
.second .point p {
margin: 0 4%;
float: none;
width: initial;
}
.second h2.line {
margin-left: 4%;
margin-right: 4%;
}
}
.nodl_txt{
text-align: center;
color: #dd0000;
font-size: 70%;
}
.nodl_txt img{
opacity: 0.4;
background-color:black;
}
/* 20190319updata ----*/
.manager{
background-color: #ec6b55;
width: 100%;
padding: 2px 6px;
border: solid 1px #fff;
}
.manager a{
color: #fff;
}
#top #navi {
display: none;
}
/* 0-640px ----*/
@media screen and (max-width:640px){
#top ul#navi.open {
display: block;
position: absolute;
top: 120px;
width: 100%;
z-index: 2;
background-color: #e9573e;
padding-bottom: 50px;
}
#top #navi.open li {
display: block;
float: none;
width: 94%;
margin: 1px auto;
}
}
#navi_top {
position: absolute;
top:540px;
left:0;
right:0;
bottom: 0;
clear: both;
width: 980px;
margin: 0 auto;
font-size: 90%;/*20190319updata*/
font-weight: bold;/*20190319updata*/
}
#navi_top li {
display: inline-block;
float: left;
/*width: 20%;20190319updata*/
width: 16.6%;/*20190319updata*/
background-color: #ec6b55;
text-align: center;
}
#navi_top li a {
display: block;
border-right: solid 1px #e05538;
padding: 8px 0;
color: #fff;
}
#navi_top li a:hover {
background-color: #fc826d;
}
#navi_top li:last-child a {
border-right: none;
}
@media screen and (max-width:640px){
#navi_top{
display: none;
}
}
body#situation h1{
padding-top: 110px;
background: url(../images/icon01.png) no-repeat 50% top;
}
body#sign h1{
padding-top: 110px;
background: url(../images/icon02.png) no-repeat 50% top;
}
body#type h1{
padding-top: 110px;
background: url(../images/icon03.png) no-repeat 50% top;
}
body#howtouse h1{
padding-top: 110px;
background: url(../images/icon04.png) no-repeat 50% top;
}
body#latest h1{
padding-top: 110px;
background: url(../images/icon05.png) no-repeat 50% top;
}
\ No newline at end of file
utsukushitoilet/shared/css/common_200318.css 0 → 100644
@charset "UTF-8";
.clear{
clear:both;
}
body {
margin: 0;
padding: 0;
font-size: 16px;
/*font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', sans-serif;*/
font-family: Verdana, Roboto, "Droid Sans", "游ゴシック", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ＭＳ Ｐゴシック", sans-serif;
line-height: 1.8;
color: #333;
}
a {
text-decoration: none;
}
strong {
font-weight: bold;
}
header {
background-color: #e9573e;
}
header a {
color: #fff;
}
#head_area {
max-width: 980px;
width: 100%;
margin: 0 auto;
padding: 20px 0;
position: relative;
}
header h1, header #title {
width: 30%;
float: left;
}
header h1 a, header #title a {
display: block;
}
header h1 img, header #title img {
width: 100%;
max-width: 344px;
/*min-width: 312px;*/
}
#head_menu {
width: 70%;
float: right;
}
#menu01, #head_area .search {
/*width: 40%;*/
float: right;
}
#head_area .search {
position: absolute;
right: 0;
bottom: 20px;
width: 21%;
}
#head_area table {
width: 100%;
}
#head_area td {
line-height: 0;
}
#head_area .search input[type="text"] {
border: none !important;
background-color: #ec6b55 !important;
height: 30px !important;
width: 100% !important;
background-image: none !important;
color: #fff;
border-radius: 0 !important;
-moz-border-radius: 0 !important;
-webkit-border-radius: 0 !important;
}
#head_area .gsc-input-box {
background-color: inherit;
}
#head_area .gsc-search-box-tools .gsc-search-box .gsc-input {
padding-right: 0;
}
#head_area .gsib_a {
padding-right: 0;
padding-left: 0;
padding-top: 0;
}
#head_area .gsst_b {
padding: 0;
}
#head_area input.gsc-search-button, #head_area input.gsc-search-button:hover, #head_area input.gsc-search-button:focus {
background-color: #e9573e;
}
#head_area .cse input.gsc-search-button, #head_area input.gsc-search-button {
border-radius: 0;
-moz-border-radius: 0;
-webkit-border-radius: 0;
}
#head_area .gsc-input-box {
border: none;
}
#head_area .gsc-search-box .gsc-input>input:hover,
#head_area .gsc-input-box-hover {
border: none;
}
#head_area input.gsc-search-button-v2 {
margin-top: 3px;
}
#head_area .search input[type="image"] {
width: 14px;
padding: 8px;
border: solid 1px #fff;
}
#menu01 {
display: block;
}
#menu01 li {
display: inline-block;
text-align: center;
font-size: 12px;
width: 124px;
}
#lang {
float: right;
width: 124px;
}
#lang select {
border: solid 2px #fff;
background-color: #e9573e;
color: #fff;
width: 100%;
padding: 5px 10px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: url(../images/pt_language.gif) no-repeat 90% center;
background-size: 10px, auto;
background-color: #e9573e;
border-radius: 0;
-moz-border-radius: 0;
-webkit-border-radius: 0;
}
#lang select option {
background-color: #e9573e;
}
#lang select::-ms-expand {
display: none;
}
#moble_menu {
display: none;
}
header nav {
background-color: #ec6b55;
}
#navi {
clear: both;
width: 980px;
margin: 0 auto;
}
#navi li {
display: inline-block;
float: left;
width: 20%;
background-color: #ec6b55;
text-align: center;
}
#navi li a {
display: block;
border-right: solid 1px #e64c32;
padding: 10px 0;
}
#navi li a:hover {
background-color: #fc826d;
}
#navi li:first-child a {
border-left: solid 1px #e64c32;
}
section {
clear: both;
}
.pagetop {
background: url(../images/pt_pagetop.gif) no-repeat center top;
padding-top: 20px;
}
.pagetop a {
display: block;
color: #fff;
background-color: #dcdcdc;
border-bottom: solid 1px #ccc;
text-align: center;
padding: 16px;
}
footer li {
font-size: 14px;
}
footer a {
color: #333;
}
footer strong {
display: block;
margin-bottom: 10px;
}
#footer_menu1, #footer_menu2 {
width: 20%;
float: left;
}
#footer_menu1 li, #footer_menu2 li, #footer_download li {
line-height: 2.0;
}
#footer_menu1 li:before, #footer_menu2 li:before {
content: "-";
color: #e70012;
margin-right: 5px;
}
#footer_banner, #footer_link {
width: 40%;
float: right;
}
#footer_banner li {
display: block;
margin-left: 14px;
margin-bottom: 14px;
float: left;
}
#footer_banner li.line {
border: solid 1px #dcdcdc;
max-width: 178px;
height: 58px;
}
#footer_banner li.noline {
border: solid 1px #fff;
max-width: 180px;
}
#footer_banner .empty {
width: 180px;
height: 58px;
}
#footer_banner li img {
width: 100%;
}
#footer_div1 {
border-bottom: solid 1px #dcdcdc;
}
#footer_div1, #footer_div2 {
clear: both;
max-width: 980px;
width: 100%;
margin: 0 auto 0 auto;
}
#footer_div1 {
margin-top: 30px;
padding-bottom: 20px;
}
#footer_div2 {
margin-top: 20px;
margin-bottom: 20px;
}
#footer_download {
width: 57%;
float: left;
padding: 10px 0;
}
#footer_download li {
display: table-cell;
vertical-align: middle;
}
#footer_download li:first-child {
width: 50%;
padding-right: 10px;
font-size: 11px;
line-height: 1.6;
}
#footer_download strong {
/*width: 46%;
float: left;*/
margin-bottom: 0;
}
#footer_download ul {
width: 100%;
display: table;
}
#footer_link {
border-left: solid 1px #dcdcdc;
padding: 10px 0;
}
#footer_link strong {
margin-bottom: 0;
padding-left: 20px;
}
#footer_link ul {
padding-left: 20px;
display: table;
width: 95%;
}
#footer_link li {
display: table-cell;
vertical-align: middle;
}
#footer_link li:first-child {
width: 51%;
font-size: 12px;
line-height: 1.5;
}
#copyright {
clear: both;
text-align: center;
border-top: solid 1px #dcdcdc;
font-size: 11px;
padding: 20px;
}
/* second page 共通 */
.second .first {
background: url(../images/main_visual.jpg) no-repeat top center;
padding-top: 300px;
}
.second .block {
max-width: 980px;
width: 100%;
margin: 0 auto;
text-align: center;
}
.second h1 {
font-size: 30px;
font-weight: bold;
display: inline-block;
border-bottom: solid 1px #e8392d;
margin-bottom: 20px;
}
.second h1 span {
display: block;
font-size: 20px;
}
/* 20170303 update */
.second .point {
/*background-color: #ec6b55;
color: #fff;*/
}
.second .point > div {
width: 880px;
margin: 30px auto 0 auto;
padding: 30px 50px;
border: 3px #ec6b55 double;
position: relative;
}
.second .point h2 {
width: 100%;
text-align: center;
position: relative;
top: -60px;margin-bottom: -30px;
}
.second .point h2 img {
max-width: 134px;
width: 100%;
}
/* //20170303 update */
.second .point p {
}
.second .point em {
text-decoration: underline;
}
.second h2.line {
border-top: solid 1px #ccc;
border-bottom: solid 1px #ccc;
font-size: 24px;
font-weight: bold;
padding: 36px 0;
position: relative;
margin-top: 60px;
line-height: 1.4;
clear: both;
}
.second h2.line span {
color: #e9573e;
font-weight: normal;
font-size: 40px;
position: absolute;
left: 0;
right: 0;
top: -36px;
font-family: Arial, Helvetica・ Verdana;
font-stretch: condensed;
}
/* 0-640px ----*/
@media screen and (max-width:640px){
body {
color: #000;
}
#head_area {
padding: 0;
}
header h1, header #title {
width: 60%;
}
header h1 a, header #title a {
padding: 16px;
}
#head_menu {
width: 35%;
}
#moble_menu {
display: block;
width: 100%;
float: right;
background-color: #ec6b55;
}
#moble_menu a {
display: block;
padding: 9% 6px 9% 14px;
font-size: 13px;
line-height: 2.0;
}
#moble_menu a:after {
content: "";
display: block;
background: url(../images/bt_menu_open.gif) no-repeat center center;
background-size: 36px auto;
min-height: 40px;
float: right;
width: 40px;
margin-top: -7px;
}
#head_menu.open {
width: 100%;
}
#menu01.open {
width: 100%;
display: block;
position: absolute;
z-index: 3;
top: 380px;
background-color: #e9573e;
padding-bottom: 30px;
}
#menu01.open li {
display: block;
width: 94%;
margin: 1px auto;
text-align: left;
font-size: inherit;
}
#menu01.open li:before {
content: "-";
padding-right: 5px;
color: #fff;
}
#head_area .search.open {
display: block;
width: 96.8%;
margin: 0 auto;
top: 70px;
z-index: 3;
}
#head_area form.gsc-search-box {
width: 96.6%;
}
#moble_menu a.open {
background: url(../images/bt_menu_close.gif) no-repeat 96% 14px #e9573e;
background-size: 36px auto;
z-index: 2;
position: absolute;
top: 0;
width: 100%;
padding: 10px 0 100px 0;
font-size: 30px;
text-indent: 20px;
}
#moble_menu a.open:after {
content: "";
display: none;
}
ul#navi.open {
display: block;
position: absolute;
top: 120px;
width: 100%;
z-index: 2;
background-color: #e9573e;
padding-bottom: 50px;
}
#navi.open li {
display: block;
float: none;
width: 94%;
margin: 1px auto;
}
header h1.non, header #title.non {
visibility: hidden;
}
#lang.non {
display: none;
}
#menu01, .search, #navi {
display: none;
}
#lang {
width: 100%;
margin-bottom: 4%;
}
#lang select {
border: none;
background-color: #ec6b55;
padding: 13% 0 13% 10px;
background-size: 20px, auto;
font-size: 13px;
}
#lang select option {
background-color: #ec6b55;
}
#footer_div2 {
display: none;
}
#footer_menu1, #footer_menu2, #footer_banner {
float: none;
width: 100%;
}
footer strong {
clear: both;
text-align: center;
border-bottom: solid 1px #dcdcdc;
margin-bottom: 0;
padding: 10px 0;
}
#footer_menu1 li, #footer_menu2 li {
width: 50%;
float: left;
display: block;
line-height: 1;
}
#footer_menu1 li a, #footer_menu2 li a {
display: block;
border-bottom: solid 1px #dcdcdc;
padding: 20px 0;
text-align: center;
}
#footer_menu1 li:nth-child(2n+1) a, #footer_menu2 li:nth-child(2n+1) a {
border-right: solid 1px #dcdcdc;
}
#footer_menu1 li:before, #footer_menu2 li:before {
content: "";
display: none;
}
#footer_menu1:after, #footer_menu2:after {
content: "";
display: block;
clear: both;
}
#footer_banner ul {
margin: 10px 1%;
}
#footer_banner li {
max-width: 271px;
display: inline-block;
float: none;
margin: 2%;
width: 44%;
}
#footer_banner .empty {
width: 100%;
display: none;
}
/* second page 共通 */
.second .first {
background: none;
padding-top: 40px;
}
/* 20170303 update */
.second .block > p {
text-align: left;
margin: 0 4%;
}
.second .point > div {
width: 90%;
margin: 0 auto;
padding: 10px 10px 30px 10px;
border: 3px #ec6b55 double;
position: relative;
}
.second .point h2 {
margin: 30px auto -40px auto;
float: none;
}
/* //20170303 update */
.second .point p {
margin: 0 4%;
float: none;
width: initial;
}
.second h2.line {
margin-left: 4%;
margin-right: 4%;
}
}
.nodl_txt{
text-align: center;
color: #dd0000;
font-size: 70%;
}
.nodl_txt img{
opacity: 0.4;
background-color:black;
}
/* 2020.2.19 update */
body#situation h1{
padding-top: 110px;
background: url(/utsukushitoilet/shared/images/icon01.png) no-repeat 50% top;
}
body#sign h1{
padding-top: 110px;
background: url(/utsukushitoilet/shared/images/icon02.png) no-repeat 50% top;
}
body#type h1{
padding-top: 110px;
background: url(/utsukushitoilet/shared/images/icon03.png) no-repeat 50% top;
}
body#howtouse h1{
padding-top: 110px;
background: url(/utsukushitoilet/shared/images/icon04.png) no-repeat 50% top;
}
body#latest h1{
padding-top: 110px;
background: url(/utsukushitoilet/shared/images/icon05.png) no-repeat 50% top;
}
header.pht {
position: absolute;
top: 0;
left: 0;
right: 0;
display: block;
width: 100%;
height: 134.5px;
margin: auto;
background: url(/utsukushitoilet/shared/images/showcase.jpg) no-repeat top center;
background-size: cover;
}
[class|=inner] {
max-width: 980px;
width: 100%;
margin: 0 auto;
}
.title_area {
float: none;
}
.title_area a {
display: block;
width: 248px;
}
.title_area a .logo_line {
display: block;
margin-top: .5em;
padding: .2em 3em;
background-color: #fff;
line-height: 0;
}
.title_area a .logo_line img {
max-width: 100%;
}
#head_area.head_area {
position: absolute;
top: 0;
left: 0;
right: 0;
max-width: 980px;
width: 100%;
margin: 0 auto;
padding: 20px 0;
display: flex;
align-items: center;
justify-content: space-between;
z-index: 110;
}
.lang_menu {
margin-right: 6em;
}
.inner-toggle {
position: relative;
}
/* toggle ********************* */
.toggle_menu {
display: none;
position: absolute;
left: 0;
right: 0;
top: 8em;
padding: 2em 0;
z-index: 100;
/*background-color: #e9573e;*/
}
.toggle_btn {
position: absolute;
top: 2em;
right: 0;
display: block;
width: 70px;
height: 70px;
padding: 22px;
margin: auto;
box-sizing: border-box;
border: solid 1px #fff;
border-radius: 50%;
z-index: 111;
}
.toggle {
position: absolute;
display: block;
width: 25px;
height: auto;
z-index: 10;
padding: 0;
}
.toggle span {
position: relative;
display: block;
width: 100%;
transition: transform .3s ease;
}
.toggle span,
.toggle span:before,
.toggle span:after {
background-color: #fff;
height: 3px;
margin: auto;
}
.toggle span:before,
.toggle span:after {
position: absolute;
content: "";
right: 0;
}
.toggle span:before {
width: 100%;
margin-top: 10px;
transition: opacity .6s ease;
}
.toggle span:after {
width: 100%;
margin-top: 20px;
transition: transform .3s ease;
}
.toggle:hover,
.active .toggle:hover {
text-decoration: none;
}
.toggle_btn.active {
}
.toggle_btn.active .toggle span {
transform: rotate(-45deg);
transform-origin: 1.5em .4em;
transition: all .3s ease;
}
.toggle_btn.active .toggle span:before {
opacity: 0;
transition: opacity 0s ease;
}
.toggle_btn.active .toggle span:after {
width: 100%;
transform: rotate(90deg);
transition: all .3s ease;
margin-top: 0;
}
/* overlay
****************************************************** */
.overlay {
display: none;
width: 100%;
height: 100%;
text-align: center;
position: fixed;
top: 0;
z-index: 99;
background-color: #e9573e;
opacity: 1;
}
.header_flxpc {
display: flex;
align-items: flex-end;
justify-content: space-between;
}
.header_nav {
display: flex;
flex-wrap: wrap;
align-items: stretch;
justify-content: flex-start;
width: 73%;
}
.header_nav li {
width: 50%;
box-sizing: border-box;
border-right: solid 1px #e9573e;
}
.header_nav li:first-child {
width: 100%;
border-top: solid 2px #fff;
border-right: solid 2px #fff;
border-left: solid 2px #fff;
text-align: center;
font-size: 14px;
font-weight: bold;
color: #fff;
}
.header_nav .situation,
.header_nav .sign {
border-bottom: solid 1px #e9573e;
}
.header_nav .sign,
.header_nav .howtouse {
border-right-color: #fff;
}
.header_nav li a {
position: relative;
display: block;
padding: 1em 0 1em 5em;
background-color: #fff;
font-weight: bold;
color: #e9573e;
}
.header_nav a::before {
content: "";
position: absolute;
left: 1em;
top: 0;
bottom: 0;
display: block;
margin: auto;
width: 2em;
height: 2em;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
.header_nav .situation a::before {
width: 2.4em;
height: 2.4em;
background-image: url(/utsukushitoilet/shared/images/icon01.svg);
}
.header_nav .sign a::before {
background-image: url(/utsukushitoilet/shared/images/icon02.svg);
}
.header_nav .type a::before {
background-image: url(/utsukushitoilet/shared/images/icon03.svg);
}
.header_nav .howtouse a::before {
background-image: url(/utsukushitoilet/shared/images/icon04.svg);
}
.header_nav a::after,
.header_flxpc .latest a::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
right: 1.8em;
display: block;
margin: auto;
width: .6em;
height: .6em;
background: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%205%2010%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20fill%3D%22%23e9573e%22%20d%3D%22M5.000%2C5.000%20L-0.000%2C-0.000%20L-0.000%2C10.000%20L5.000%2C5.000%20Z%22%2F%3E%3C%2Fsvg%3E') no-repeat center;
background-size: contain;
}
.header_flxpc .latest a {
position: relative;
display: block;
padding: 2.5em 4em 2.5em 6em;
background-color: #fff;
line-height: 1.3;
font-weight: bold;
color: #e9573e;
}
.header_flxpc .latest a::before {
content: "";
position: absolute;
left: 2.5em;
top: 0;
bottom: 0;
display: block;
margin: auto;
width: 2.4em;
height: 2.4em;
background: url(/utsukushitoilet/shared/images/icon05.svg) no-repeat center;
background-size: contain;
}
.menu_box .manage {
margin-top: .5em;
text-align: right;
}
.menu_box .manage a {
display: inline-block;
vertical-align: middle;
font-weight: bold;
}
.menu_box .manage a::before {
content: "";
display: inline-block;
width: .6em;
height: .6em;
margin-right: .5em;
background: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%205%2010%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20fill%3D%22%23fff%22%20d%3D%22M5.000%2C5.000%20L-0.000%2C-0.000%20L-0.000%2C10.000%20L5.000%2C5.000%20Z%22%2F%3E%3C%2Fsvg%3E') no-repeat center;
background-size: contain;
vertical-align: middle;
}
.header_nav2 {
margin: 2em 0;
padding-top: 2em;
border-top: solid 1px rgba(255,255,255,.3);
}
.header_nav2 li {
display: inline-block;
}
.header_nav2 li:first-child {
margin-right: 3em;
}
.header_nav2 a {
font-size: 112.5%;
font-weight: bold;
}
.toggle_menu .search {
margin: 2em 0;
padding-top: 2em;
border-top: solid 1px rgba(255,255,255,.3);
}
.toggle_menu .search > div {
max-width: 580px;
}
.toggle_menu .search .gsc-search-box-tools .gsc-search-box .gsc-input {
padding-right: 0;
}
.toggle_menu .search .gsc-search-box-tools .gsc-search-box .gsc-input input[type=text] {
background-color: rgba(255,255,255,.3) !important;
}
.toggle_menu .search .gsc-search-button .gsc-search-button-v2 {
padding: 11px 20px 10px;
margin-left: 0;
width: 100%;
border-radius: 0;
border: none;
}
#lang {
width: 180px;
}
#lang select {
background: none;
/*-webkit-appearance: menulist;*/
}
#lang select option {
padding: .5em;
}
.second .first {
padding-top: 196px;
background: none;
}
@media screen and (max-width:640px){
br.pc {
display: none;
}
header.pht {
height: 19.76563vw;
}
[class|=inner] {
width: 92%;
}
.title_area {
width: 45%;
}
.title_area a {
width: 38.75vw;
padding: 2.5vw;
}
.title_area a .logo_line {
margin-top: 1.5vw;
padding: .2em 7vw;
}
#head_area.head_area {
max-width: 100%;
padding: 0;
}
.lang_menu {
margin-right: 18vw;
}
.menu_box {
font-size: 2.5vw;
}
/* toggle ********************* */
.toggle_menu {
top: 19.6875vw;
}
.toggle_btn {
top: 4.8vw;
right: 0;
width: 10.9375vw;
height: 10.9375vw;
padding: 3.4375vw;
}
.toggle {
width: 3.90625vw;
}
.toggle span:before {
margin-top: 1.5625vw;
}
.toggle span:after {
margin-top: 3.125vw;
}
.toggle_btn.active .toggle span {
transform-origin: 3.8vw 1.1vw;
}
.header_nav .type,
.header_nav .howtouse {
border-bottom: solid 1px #e9573e;
}
.header_flxpc .latest a::before {
left: 1em;
}
.header_flxpc/*,
.header_nav*/ {
display: block;
}
.header_nav {
width: 100%;
}
/*
.header_nav li {
width: 100%;
}*/
.header_nav a::before,
.header_flxpc .latest a::before {
left: .6em;
}
.header_nav li:first-child {
font-size: 2.5vw;
}
.header_nav li a,
.header_flxpc .latest a {
padding: 1em 0 1em 3.5em;
line-height: 1.5;
}
.header_nav li a {
padding-right: 1.8em;
padding-left: 3.2em;
}
.header_flxpc .latest a {
}
.header_nav a::after {
right: 1em;
}
#lang {
width: 28vw;
margin-bottom: 0;
line-height: 1;
}
#lang select {
padding: 1vw 2vw;
border: solid 2px #fff;
font-size: 2.5vw;
}
.header_nav2 {
margin: 1em 0;
padding-top: 1em;
}
.header_nav2 li {
display: block;
margin-bottom: .5em;
}
.header_nav2 li:first-child {
margin-right: 0;
}
.header_nav2 a {
font-size: 2.5vw;
}
.search {
display: block;
}
.toggle_menu .search .gsc-search-button .gsc-search-button-v2 {
padding: 15px 20px;
}
.second .first {
padding-top: 27vw;
}
/* 多言語ページ */
#moble_menu + .search {
display: none;
}
header:not([class]) #lang {
width: 100%;
margin-bottom: 4%;
}
header:not([class]) #lang select {
border: none;
background-color: #ec6b55;
padding: 13% 0 13% 10px;
background-image: url(/utsukushitoilet/images/pt_language.gif);
background-repeat: no-repeat;
background-position: 90% center;
background-size: 20px, auto;
font-size: 13px;
}
}
/* 2020.2.19 upsate */
.header_flxpc a {
font-size: 85%;
}
.header_flxpc .latest {
max-width: 240px;
}
.header_flxpc .latest b {
display: block;
border-top: solid 2px #fff;
border-right: solid 2px #fff;
border-left: solid 2px #fff;
text-align: center;
font-size: 14px;
color: #fff;
}
.menu_box .manage a {
padding: 0 0 0 .71em;
background-color: #fff;
color: #e9573e;
}
.menu_box .manage a::before {
content: none;
}
.menu_box .manage a::after {
content: "";
display: inline-block;
width: .6em;
height: .6em;
margin-left: .2em;
margin-right: .5em;
background: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%205%2010%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20fill%3D%22%23e9573e%22%20d%3D%22M5.000%2C5.000%20L-0.000%2C-0.000%20L-0.000%2C10.000%20L5.000%2C5.000%20Z%22%2F%3E%3C%2Fsvg%3E') no-repeat center;
background-size: contain;
}
@media screen and (max-width:640px){
.header_flxpc .latest {
max-width: 100%;
}
.header_flxpc .latest b {
font-size: 2.5vw;
}
}
#breadcrumbs_area{
margin: -55px auto 30px auto;
font-size: 75%;
text-align: left;
}
#breadcrumbs_area a{
text-decoration: underline;
color: #e05538;
}
@media screen and (max-width:640px){
#breadcrumbs_area {
margin-top: -25px;
}
}
#footer_menu2 strong{
line-height: 1.5;
}
#footer_menu2 small {
line-height: 1.5;
font-size: 72%;
display: block;
margin-top: -5px;
margin-bottom: 10px;
}
@media screen and (max-width:640px){
#footer_menu2 small {
display: none;
}
}
#footer_menu1.list_wt,
#footer_menu2.list_wt {
width: 28%;
}
utsukushitoilet/shared/css/common_b.css 0 → 100644
@charset "UTF-8";
.clear{
clear:both;
}
body {
margin: 0;
padding: 0;
font-size: 16px;
/*font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', sans-serif;*/
font-family: Verdana, Roboto, "Droid Sans", "游ゴシック", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ＭＳ Ｐゴシック", sans-serif;
line-height: 1.8;
color: #333;
}
a {
text-decoration: none;
}
strong {
font-weight: bold;
}
header {
background-color: #e9573e;
position: relative;
}
header a {
color: #fff;
}
#head_area {
max-width: 980px;
width: 100%;
margin: 0 auto;
padding: 20px 0;
position: relative;
}
header h1, header #title {
width: 30%;
float: left;
}
header h1 a, header #title a {
display: block;
}
header h1 img, header #title img {
width: 100%;
max-width: 256px;
/*max-width: 344px;20190319updata*/
/*min-width: 312px;*/
}
#head_menu {
width: 70%;
float: right;
}
#menu01,#menu02, #head_area .search {
/*width: 40%;*/
float: right;
}
#head_area .search {
position: absolute;
right: 0;
bottom: 20px;
width: 21%;
}
#head_area table {
width: 100%;
}
#head_area td {
line-height: 0;
}
#head_area .search input[type="text"] {
border: none !important;
background-color: #ec6b55 !important;
height: 30px !important;
width: 100% !important;
background-image: none !important;
color: #fff;
border-radius: 0 !important;
-moz-border-radius: 0 !important;
-webkit-border-radius: 0 !important;
}
#head_area .gsc-input-box {
background-color: inherit;
}
#head_area .gsc-search-box-tools .gsc-search-box .gsc-input {
padding-right: 0;
}
#head_area .gsib_a {
padding-right: 0;
padding-left: 0;
padding-top: 0;
}
#head_area .gsst_b {
padding: 0;
}
#head_area input.gsc-search-button, #head_area input.gsc-search-button:hover, #head_area input.gsc-search-button:focus {
background-color: #e9573e;
}
#head_area .cse input.gsc-search-button, #head_area input.gsc-search-button {
border-radius: 0;
-moz-border-radius: 0;
-webkit-border-radius: 0;
}
#head_area .gsc-input-box {
border: none;
}
#head_area .gsc-search-box .gsc-input>input:hover,
#head_area .gsc-input-box-hover {
border: none;
}
#head_area input.gsc-search-button-v2 {
margin-top: 3px;
}
#head_area .search input[type="image"] {
width: 14px;
padding: 8px;
border: solid 1px #fff;
}
#menu01 {
display: block;
margin-right: 2em;/*20190319updata*/
}
#menu01 li {
display: inline-block;
text-align: center;
font-size: 12px;
/*width: 124px;20190319updata*/
width: 10em;/*20190319updata*/
}
#lang {
float: right;
width: 124px;
}
#lang select {
border: solid 2px #fff;
background-color: #e9573e;
color: #fff;
width: 100%;
padding: 5px 10px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: url(../images/pt_language.gif) no-repeat 90% center;
background-size: 10px, auto;
background-color: #e9573e;
border-radius: 0;
-moz-border-radius: 0;
-webkit-border-radius: 0;
}
#lang select option {
background-color: #e9573e;
}
#lang select::-ms-expand {
display: none;
}
#moble_menu {
display: none;
}
header nav {
background-color: #ec6b55;
}
#navi {
clear: both;
width: 980px;
margin: 0 auto;
font-size: 90%;/*20190319updata*/
font-weight: bold;/*20190319updata*/
}
#navi li {
display: inline-block;
float: left;
/*width: 20%;20190319updata*/
width: 16.6%;/*20190319updata*/
background-color: #ec6b55;
text-align: center;
}
#navi li a {
display: block;
border-right: solid 1px #e64c32;
padding: 8px 0;
}
#navi li a:hover {
background-color: #fc826d;
}
#navi li:first-child a {
border-left: solid 1px #e64c32;
}
section {
clear: both;
}
.pagetop {
background: url(../images/pt_pagetop.gif) no-repeat center top;
padding-top: 20px;
}
.pagetop a {
display: block;
color: #fff;
background-color: #dcdcdc;
border-bottom: solid 1px #ccc;
text-align: center;
padding: 16px;
}
footer li {
font-size: 14px;
}
footer a {
color: #333;
}
footer strong {
display: block;
margin-bottom: 10px;
}
#footer_menu1, #footer_menu2 {
width: 20%;
float: left;
}
#footer_menu1 li, #footer_menu2 li, #footer_download li {
line-height: 2.0;
}
#footer_menu1 li:before, #footer_menu2 li:before {
content: "-";
color: #e70012;
margin-right: 5px;
}
#footer_banner, #footer_link {
width: 40%;
float: right;
}
#footer_banner li {
display: block;
margin-left: 14px;
margin-bottom: 14px;
float: left;
}
#footer_banner li.line {
border: solid 1px #dcdcdc;
max-width: 178px;
height: 58px;
}
#footer_banner li.noline {
border: solid 1px #fff;
max-width: 180px;
}
#footer_banner .empty {
width: 180px;
height: 58px;
}
#footer_banner li img {
width: 100%;
}
#footer_div1 {
border-bottom: solid 1px #dcdcdc;
}
#footer_div1, #footer_div2 {
clear: both;
max-width: 980px;
width: 100%;
margin: 0 auto 0 auto;
}
#footer_div1 {
margin-top: 30px;
padding-bottom: 20px;
}
#footer_div2 {
margin-top: 20px;
margin-bottom: 20px;
}
#footer_download {
width: 57%;
float: left;
padding: 10px 0;
}
#footer_download li {
display: table-cell;
vertical-align: middle;
}
#footer_download li:first-child {
width: 50%;
padding-right: 10px;
font-size: 11px;
line-height: 1.6;
}
#footer_download strong {
/*width: 46%;
float: left;*/
margin-bottom: 0;
}
#footer_download ul {
width: 100%;
display: table;
}
#footer_link {
border-left: solid 1px #dcdcdc;
padding: 10px 0;
}
#footer_link strong {
margin-bottom: 0;
padding-left: 20px;
}
#footer_link ul {
padding-left: 20px;
display: table;
width: 95%;
}
#footer_link li {
display: table-cell;
vertical-align: middle;
}
#footer_link li:first-child {
width: 51%;
font-size: 12px;
line-height: 1.5;
}
#copyright {
clear: both;
text-align: center;
border-top: solid 1px #dcdcdc;
font-size: 11px;
padding: 20px;
}
/* second page 共通 */
.second .first {
background: url(../images/main_visual_b.png) no-repeat top center;
padding-top: 196px;
}
.second .block {
max-width: 980px;
width: 100%;
margin: 0 auto;
text-align: center;
}
.second h1 {
font-size: 30px;
font-weight: bold;
display: inline-block;
border-bottom: solid 1px #e8392d;
margin-bottom: 20px;
}
.second h1 span {
display: block;
font-size: 20px;
}
/* 20170303 update */
.second .point {
/*background-color: #ec6b55;
color: #fff;*/
}
.second .point > div {
width: 880px;
margin: 30px auto 0 auto;
padding: 30px 50px;
border: 3px #ec6b55 double;
position: relative;
}
.second .point h2 {
width: 100%;
text-align: center;
position: relative;
top: -60px;margin-bottom: -30px;
}
.second .point h2 img {
max-width: 134px;
width: 100%;
}
/* //20170303 update */
.second .point p {
}
.second .point em {
text-decoration: underline;
}
.second h2.line {
border-top: solid 1px #ccc;
border-bottom: solid 1px #ccc;
font-size: 24px;
font-weight: bold;
padding: 36px 0;
position: relative;
margin-top: 60px;
line-height: 1.4;
clear: both;
}
.second h2.line span {
color: #e9573e;
font-weight: normal;
font-size: 40px;
position: absolute;
left: 0;
right: 0;
top: -36px;
font-family: Arial, Helvetica・ Verdana;
font-stretch: condensed;
}
/* 0-640px ----*/
@media screen and (max-width:640px){
body {
color: #000;
}
#head_area {
padding: 0;
}
header h1, header #title {
width: 60%;
}
header h1 a, header #title a {
padding: 16px;
}
#head_menu {
width: 35%;
}
#moble_menu {
display: block;
width: 100%;
float: right;
background-color: #ec6b55;
}
#moble_menu a {
display: block;
padding: 9% 6px 9% 14px;
font-size: 13px;
line-height: 2.0;
}
#moble_menu a:after {
content: "";
display: block;
background: url(../images/bt_menu_open.gif) no-repeat center center;
background-size: 36px auto;
min-height: 40px;
float: right;
width: 40px;
margin-top: -7px;
}
#head_menu.open {
width: 100%;
}
#menu01.open {
width: 100%;
display: block;
position: absolute;
z-index: 3;
top: 380px;
background-color: #e9573e;
padding-bottom: 30px;
}
#menu01.open li {
display: block;
width: 94%;
margin: 1px auto;
text-align: left;
font-size: inherit;
}
#menu01.open li:before {
content: "-";
padding-right: 5px;
color: #fff;
}
#head_area .search.open {
display: block;
width: 96.8%;
margin: 0 auto;
top: 70px;
z-index: 3;
}
#head_area form.gsc-search-box {
width: 96.6%;
}
#moble_menu a.open {
background: url(../images/bt_menu_close.gif) no-repeat 96% 14px #e9573e;
background-size: 36px auto;
z-index: 2;
position: absolute;
top: 0;
width: 100%;
padding: 10px 0 100px 0;
font-size: 30px;
text-indent: 20px;
}
#moble_menu a.open:after {
content: "";
display: none;
}
ul#navi.open {
display: block;
position: absolute;
top: 120px;
width: 100%;
z-index: 2;
background-color: #e9573e;
padding-bottom: 50px;
}
#navi.open li {
display: block;
float: none;
width: 94%;
margin: 1px auto;
}
header h1.non, header #title.non {
visibility: hidden;
}
#lang.non {
display: none;
}
#menu01, .search, #navi {
display: none;
}
#lang {
width: 100%;
margin-bottom: 4%;
}
#lang select {
border: none;
background-color: #ec6b55;
padding: 13% 0 13% 10px;
background-size: 20px, auto;
font-size: 13px;
}
#lang select option {
background-color: #ec6b55;
}
#footer_div2 {
display: none;
}
#footer_menu1, #footer_menu2, #footer_banner {
float: none;
width: 100%;
}
footer strong {
clear: both;
text-align: center;
border-bottom: solid 1px #dcdcdc;
margin-bottom: 0;
padding: 10px 0;
}
#footer_menu1 li, #footer_menu2 li {
width: 50%;
float: left;
display: block;
line-height: 1;
}
#footer_menu1 li a, #footer_menu2 li a {
display: block;
border-bottom: solid 1px #dcdcdc;
padding: 20px 0;
text-align: center;
}
#footer_menu1 li:nth-child(2n+1) a, #footer_menu2 li:nth-child(2n+1) a {
border-right: solid 1px #dcdcdc;
}
#footer_menu1 li:before, #footer_menu2 li:before {
content: "";
display: none;
}
#footer_menu1:after, #footer_menu2:after {
content: "";
display: block;
clear: both;
}
#footer_banner ul {
margin: 10px 1%;
}
#footer_banner li {
max-width: 271px;
display: inline-block;
float: none;
margin: 2%;
width: 44%;
}
#footer_banner .empty {
width: 100%;
display: none;
}
/* second page 共通 */
.second .first {
background: none;
padding-top: 40px;
}
/* 20170303 update */
.second .block > p {
text-align: left;
margin: 0 4%;
}
.second .point > div {
width: 90%;
margin: 0 auto;
padding: 10px 10px 30px 10px;
border: 3px #ec6b55 double;
position: relative;
}
.second .point h2 {
margin: 30px auto -40px auto;
float: none;
}
/* //20170303 update */
.second .point p {
margin: 0 4%;
float: none;
width: initial;
}
.second h2.line {
margin-left: 4%;
margin-right: 4%;
}
}
.nodl_txt{
text-align: center;
color: #dd0000;
font-size: 70%;
}
.nodl_txt img{
opacity: 0.4;
background-color:black;
}
/* 20190319updata ----*/
.manager{
background-color: #ec6b55;
width: 100%;
padding: 2px 6px;
border: solid 1px #fff;
}
.manager a{
color: #fff;
}
#top #navi {
display: none;
}
/* 0-640px ----*/
@media screen and (max-width:640px){
#top ul#navi.open {
display: block;
position: absolute;
top: 120px;
width: 100%;
z-index: 2;
background-color: #e9573e;
padding-bottom: 50px;
}
#top #navi.open li {
display: block;
float: none;
width: 94%;
margin: 1px auto;
}
}
#navi_top {
position: absolute;
top:540px;
left:0;
right:0;
bottom: 0;
clear: both;
width: 980px;
margin: 0 auto;
font-size: 90%;/*20190319updata*/
font-weight: bold;/*20190319updata*/
}
#navi_top li {
display: inline-block;
float: left;
/*width: 20%;20190319updata*/
width: 16.6%;/*20190319updata*/
background-color: #ec6b55;
text-align: center;
}
#navi_top li a {
display: block;
border-right: solid 1px #e05538;
padding: 8px 0;
color: #fff;
}
#navi_top li a:hover {
background-color: #fc826d;
}
#navi_top li:last-child a {
border-right: none;
}
@media screen and (max-width:640px){
#navi_top{
display: none;
}
}
body#situation h1{
padding-top: 110px;
background: url(../images/icon01.png) no-repeat 50% top;
}
body#sign h1{
padding-top: 110px;
background: url(../images/icon02.png) no-repeat 50% top;
}
body#type h1{
padding-top: 110px;
background: url(../images/icon03.png) no-repeat 50% top;
}
body#howtouse h1{
padding-top: 110px;
background: url(../images/icon04.png) no-repeat 50% top;
}
body#latest h1{
padding-top: 110px;
background: url(../images/icon05.png) no-repeat 50% top;
}
\ No newline at end of file
utsukushitoilet/shared/css/common_jp.css
...@@ -1228,6 +1228,32 @@ body.active .header_nav li:first-child { ...@@ -1228,6 +1228,32 @@ body.active .header_nav li:first-child {
text-align: right; text-align: right;
} }
.under_menu_box.manage {
margin-bottom: 35px;
margin-top: -10px;
text-align: center;
}
.under_menu_box.manage a {
padding: 0 0 0 .71em;
background-color: #e9573e;
color: #fff;
display:inline-block;
vertical-align: middle;
font-weight: bold;
}
.under_menu_box.manage a::after {
content: "";
display: inline-block;
width: .6em;
height: .6em;
margin-left: .2em;
margin-right: .5em;
background: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%205%2010%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20fill%3D%22%23fff%22%20d%3D%22M5.000%2C5.000%20L-0.000%2C-0.000%20L-0.000%2C10.000%20L5.000%2C5.000%20Z%22%2F%3E%3C%2Fsvg%3E') no-repeat center;
background-size: contain;
}
.menu_box .manage a { .menu_box .manage a {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
...@@ -1595,8 +1621,8 @@ body.active .menu_box .manage a { ...@@ -1595,8 +1621,8 @@ body.active .menu_box .manage a {
} }
.gsc-input-box { .gsc-input-box {
padding-top: 0!important; padding-top: 0 !important;
border-top-left-radius: 0!important; border-top-left-radius: 0 !important;
border-bottom-left-radius: 0!important; border-bottom-left-radius: 0 !important;
} }
} }
utsukushitoilet/shared/css/common_jp_200318.css 0 → 100644
@charset "UTF-8";
.clear{
clear:both;
}
body {
margin: 0;
padding: 0;
font-size: 16px;
/*font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', sans-serif;*/
font-family: Verdana, Roboto, "Droid Sans", "游ゴシック", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ＭＳ Ｐゴシック", sans-serif;
line-height: 1.8;
color: #333;
}
a {
text-decoration: none;
}
strong {
font-weight: bold;
}
header {
background-color: #e9573e;
position: relative;
}
header a {
color: #fff;
}
#head_area {
max-width: 980px;
width: 100%;
margin: 0 auto;
padding: 20px 0;
position: relative;
}
header h1, header #title {
width: 30%;
float: left;
}
header h1 a, header #title a {
display: block;
}
header h1 img, header #title img {
width: 100%;
max-width: 256px;
/*max-width: 344px;20190319updata*/
/*min-width: 312px;*/
}
#head_menu {
width: 70%;
float: right;
}
#menu01,#menu02, #head_area .search {
/*width: 40%;*/
float: right;
}
#head_area .search {
position: absolute;
right: 0;
bottom: 20px;
width: 21%;
}
#head_area table {
width: 100%;
}
#head_area td {
line-height: 0;
}
#head_area .search input[type="text"] {
border: none !important;
background-color: #ec6b55 !important;
height: 30px !important;
width: 100% !important;
background-image: none !important;
color: #fff;
border-radius: 0 !important;
-moz-border-radius: 0 !important;
-webkit-border-radius: 0 !important;
}
#head_area .gsc-input-box {
background-color: inherit;
}
#head_area .gsc-search-box-tools .gsc-search-box .gsc-input {
padding-right: 0;
}
#head_area .gsib_a {
padding-right: 0;
padding-left: 0;
padding-top: 0;
}
#head_area .gsst_b {
padding: 0;
}
#head_area input.gsc-search-button, #head_area input.gsc-search-button:hover, #head_area input.gsc-search-button:focus {
background-color: #e9573e;
}
#head_area .cse input.gsc-search-button, #head_area input.gsc-search-button {
border-radius: 0;
-moz-border-radius: 0;
-webkit-border-radius: 0;
}
#head_area .gsc-input-box {
border: none;
}
#head_area .gsc-search-box .gsc-input>input:hover,
#head_area .gsc-input-box-hover {
border: none;
}
#head_area input.gsc-search-button-v2 {
margin-top: 3px;
}
#head_area .search input[type="image"] {
width: 14px;
padding: 8px;
border: solid 1px #fff;
}
#menu01 {
display: block;
margin-right: 2em;/*20190319updata*/
}
#menu01 li {
display: inline-block;
text-align: center;
font-size: 12px;
/*width: 124px;20190319updata*/
width: 10em;/*20190319updata*/
}
#lang {
float: right;
width: 124px;
}
#lang select {
border: solid 2px #fff;
background-color: #e9573e;
color: #fff;
width: 100%;
padding: 5px 10px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: url(../images/pt_language.gif) no-repeat 90% center;
background-size: 10px, auto;
background-color: #e9573e;
border-radius: 0;
-moz-border-radius: 0;
-webkit-border-radius: 0;
}
#lang select option {
background-color: #e9573e;
}
#lang select::-ms-expand {
display: none;
}
#moble_menu {
display: none;
}
header nav {
background-color: #ec6b55;
}
#navi {
clear: both;
width: 980px;
margin: 0 auto;
font-size: 90%;/*20190319updata*/
font-weight: bold;/*20190319updata*/
}
#navi li {
display: inline-block;
float: left;
/*width: 20%;20190319updata*/
width: 16.6%;/*20190319updata*/
background-color: #ec6b55;
text-align: center;
}
#navi li a {
display: block;
border-right: solid 1px #e64c32;
padding: 8px 0;
}
#navi li a:hover {
background-color: #fc826d;
}
#navi li:first-child a {
border-left: solid 1px #e64c32;
}
section {
clear: both;
}
.pagetop {
background: url(../images/pt_pagetop.gif) no-repeat center top;
padding-top: 20px;
}
.pagetop a {
display: block;
color: #fff;
background-color: #dcdcdc;
border-bottom: solid 1px #ccc;
text-align: center;
padding: 16px;
}
footer li {
font-size: 14px;
}
footer a {
color: #333;
}
footer strong {
display: block;
margin-bottom: 10px;
}
#footer_menu1, #footer_menu2 {
width: 20%;
float: left;
}
#footer_menu1 li, #footer_menu2 li, #footer_download li {
line-height: 2.0;
}
#footer_menu1 li:before, #footer_menu2 li:before {
content: "-";
color: #e70012;
margin-right: 5px;
}
#footer_banner, #footer_link {
width: 40%;
float: right;
}
#footer_banner li {
display: block;
margin-left: 14px;
margin-bottom: 14px;
float: left;
}
#footer_banner li.line {
border: solid 1px #dcdcdc;
max-width: 178px;
height: 58px;
}
#footer_banner li.noline {
border: solid 1px #fff;
max-width: 180px;
}
#footer_banner .empty {
width: 180px;
height: 58px;
}
#footer_banner li img {
width: 100%;
}
#footer_div1 {
border-bottom: solid 1px #dcdcdc;
}
#footer_div1, #footer_div2 {
clear: both;
max-width: 980px;
width: 100%;
margin: 0 auto 0 auto;
}
#footer_div1 {
margin-top: 30px;
padding-bottom: 20px;
}
#footer_div2 {
margin-top: 20px;
margin-bottom: 20px;
}
#footer_download {
width: 57%;
float: left;
padding: 10px 0;
}
#footer_download li {
display: table-cell;
vertical-align: middle;
}
#footer_download li:first-child {
width: 50%;
padding-right: 10px;
font-size: 11px;
line-height: 1.6;
}
#footer_download strong {
/*width: 46%;
float: left;*/
margin-bottom: 0;
}
#footer_download ul {
width: 100%;
display: table;
}
#footer_link {
border-left: solid 1px #dcdcdc;
padding: 10px 0;
}
#footer_link strong {
margin-bottom: 0;
padding-left: 20px;
}
#footer_link ul {
padding-left: 20px;
display: table;
width: 95%;
}
#footer_link li {
display: table-cell;
vertical-align: middle;
}
#footer_link li:first-child {
width: 51%;
font-size: 12px;
line-height: 1.5;
}
#copyright {
clear: both;
text-align: center;
border-top: solid 1px #dcdcdc;
font-size: 11px;
padding: 20px;
}
/* second page 共通 */
.second .first {
background: url(../images/main_visual.jpg) no-repeat top center;
padding-top: 300px;
}
.second .block {
max-width: 980px;
width: 100%;
margin: 0 auto;
text-align: center;
}
.second h1 {
font-size: 30px;
font-weight: bold;
display: inline-block;
border-bottom: solid 1px #e8392d;
margin-bottom: 20px;
}
.second h1 span {
display: block;
font-size: 20px;
}
/* 20170303 update */
.second .point {
/*background-color: #ec6b55;
color: #fff;*/
}
.second .point > div {
width: 880px;
margin: 30px auto 0 auto;
padding: 30px 50px;
border: 3px #ec6b55 double;
position: relative;
}
.second .point h2 {
width: 100%;
text-align: center;
position: relative;
top: -60px;margin-bottom: -30px;
}
.second .point h2 img {
max-width: 134px;
width: 100%;
}
/* //20170303 update */
.second .point p {
}
.second .point p img {
float: right;
}
.second .point p span {
width: 70%;
display: block;
float: left;
}
.second .point p span.point_txt01{
text-indent: -1em;
padding-left: 1em;
}
.second .point em {
text-decoration: underline;
}
.second h2.line {
border-top: solid 1px #ccc;
border-bottom: solid 1px #ccc;
font-size: 24px;
font-weight: bold;
padding: 36px 0;
position: relative;
margin-top: 60px;
line-height: 1.4;
clear: both;
}
.second h2.line span {
color: #e9573e;
font-weight: normal;
font-size: 40px;
position: absolute;
left: 0;
right: 0;
top: -36px;
font-family: Arial, Helvetica・ Verdana;
font-stretch: condensed;
}
/* 0-640px ----*/
@media screen and (max-width:640px){
body {
color: #000;
}
#head_area {
padding: 0;
}
header h1, header #title {
width: 60%;
}
header h1 a, header #title a {
padding: 16px;
}
#head_menu {
width: 35%;
}
#moble_menu {
display: block;
width: 100%;
float: right;
background-color: #ec6b55;
}
#moble_menu a {
display: block;
padding: 9% 6px 9% 14px;
font-size: 13px;
line-height: 2.0;
}
#moble_menu a:after {
content: "";
display: block;
background: url(../images/bt_menu_open.gif) no-repeat center center;
background-size: 36px auto;
min-height: 40px;
float: right;
width: 40px;
margin-top: -7px;
}
#head_menu.open {
width: 100%;
}
#menu01.open {
width: 100%;
display: block;
position: absolute;
z-index: 3;
top: 380px;
background-color: #e9573e;
padding-bottom: 30px;
}
#menu01.open li {
display: block;
width: 94%;
margin: 1px auto;
text-align: left;
font-size: inherit;
}
#menu01.open li:before {
content: "-";
padding-right: 5px;
color: #fff;
}
#head_area .search.open {
display: block;
width: 96.8%;
margin: 0 auto;
top: 70px;
z-index: 3;
}
#head_area form.gsc-search-box {
width: 96.6%;
}
#moble_menu a.open {
background: url(../images/bt_menu_close.gif) no-repeat 96% 14px #e9573e;
background-size: 36px auto;
z-index: 2;
position: absolute;
top: 0;
width: 100%;
padding: 10px 0 100px 0;
font-size: 30px;
text-indent: 20px;
}
#moble_menu a.open:after {
content: "";
display: none;
}
ul#navi.open {
display: block;
position: absolute;
top: 120px;
width: 100%;
z-index: 2;
background-color: #e9573e;
padding-bottom: 50px;
}
#navi.open li {
display: block;
float: none;
width: 94%;
margin: 1px auto;
}
header h1.non, header #title.non {
visibility: hidden;
}
#lang.non {
display: none;
}
#menu01, .search, #navi {
display: none;
}
#lang {
width: 100%;
margin-bottom: 4%;
}
#lang select {
border: none;
background-color: #ec6b55;
padding: 13% 0 13% 10px;
background-size: 20px, auto;
font-size: 13px;
}
#lang select option {
background-color: #ec6b55;
}
#footer_div2 {
display: none;
}
#footer_menu1, #footer_menu2, #footer_banner {
float: none;
width: 100%;
}
footer strong {
clear: both;
text-align: center;
border-bottom: solid 1px #dcdcdc;
margin-bottom: 0;
padding: 10px 0;
}
#footer_menu1 li, #footer_menu2 li {
width: 50%;
float: left;
display: block;
line-height: 1;
}
#footer_menu1 li a, #footer_menu2 li a {
display: block;
border-bottom: solid 1px #dcdcdc;
padding: 20px 0;
text-align: center;
}
#footer_menu1 li:nth-child(2n+1) a, #footer_menu2 li:nth-child(2n+1) a {
border-right: solid 1px #dcdcdc;
}
#footer_menu1 li:before, #footer_menu2 li:before {
content: "";
display: none;
}
#footer_menu1:after, #footer_menu2:after {
content: "";
display: block;
clear: both;
}
#footer_banner ul {
margin: 10px 1%;
}
#footer_banner li {
max-width: 271px;
display: inline-block;
float: none;
margin: 2%;
width: 44%;
}
#footer_banner .empty {
width: 100%;
display: none;
}
/* second page 共通 */
.second .first {
background: none;
padding-top: 40px;
}
/* 20170303 update */
.second .block > p {
text-align: left;
margin: 0 4%;
}
.second .point > div {
width: 90%;
margin: 0 auto;
padding: 10px 10px 30px 10px;
border: 3px #ec6b55 double;
position: relative;
}
.second .point h2 {
margin: 30px auto -40px auto;
float: none;
}
/* //20170303 update */
.second .point p {
margin: 0 4%;
float: none;
width: initial;
}
.second h2.line {
margin-left: 4%;
margin-right: 4%;
}
}
.nodl_txt{
text-align: center;
color: #dd0000;
font-size: 70%;
}
.nodl_txt img{
opacity: 0.4;
background-color:black;
}
/* 20190319updata ----*/
.manager{
background-color: #ec6b55;
width: 100%;
padding: 2px 6px;
border: solid 1px #fff;
}
.manager a{
color: #fff;
}
#top #navi {
/*display: none;*/
}
/* 0-640px ----*/
@media screen and (max-width:640px){
#top ul#navi.open {
display: block;
position: absolute;
top: 120px;
width: 100%;
z-index: 2;
background-color: #e9573e;
padding-bottom: 50px;
}
#top #navi.open li {
display: block;
float: none;
width: 94%;
margin: 1px auto;
}
}
#navi_top {
position: absolute;
top:540px;
left:0;
right:0;
bottom: 0;
clear: both;
width: 980px;
margin: 0 auto;
font-size: 90%;/*20190319updata*/
font-weight: bold;/*20190319updata*/
}
#navi_top li {
display: inline-block;
float: left;
/*width: 20%;20190319updata*/
width: 16.6%;/*20190319updata*/
background-color: #ec6b55;
text-align: center;
}
#navi_top li a {
display: block;
border-right: solid 1px #e05538;
padding: 8px 0;
color: #fff;
}
#navi_top li a:hover {
background-color: #fc826d;
}
#navi_top li:last-child a {
border-right: none;
}
@media screen and (max-width:640px){
#navi_top{
display: none;
}
}
body#situation h1{
padding-top: 110px;
background: url(../images/icon01.png) no-repeat 50% top;
}
body#sign h1{
padding-top: 110px;
background: url(../images/icon02.png) no-repeat 50% top;
}
body#type h1{
padding-top: 110px;
background: url(../images/icon03.png) no-repeat 50% top;
}
body#howtouse h1{
padding-top: 110px;
background: url(../images/icon04.png) no-repeat 50% top;
}
body#latest h1{
padding-top: 110px;
background: url(../images/icon05.png) no-repeat 50% top;
}
/* 2019.10.23 update */
header.pht {
position: absolute;
top: 0;
left: 0;
right: 0;
display: block;
width: 100%;
height: 134.5px;
margin: auto;
background: url(../images/showcase.jpg) no-repeat top center;
background-size: cover;
}
[class|=inner] {
max-width: 980px;
width: 100%;
margin: 0 auto;
}
.title_area {
float: none;
}
.title_area a {
display: block;
width: 248px;
}
.title_area a .logo_line {
display: block;
margin-top: .5em;
padding: .2em 3em;
background-color: #fff;
line-height: 0;
}
.title_area a .logo_line img {
max-width: 100%;
}
#head_area.head_area {
position: absolute;
top: 0;
left: 0;
right: 0;
max-width: 980px;
width: 100%;
margin: 0 auto;
padding: 20px 0;
display: flex;
align-items: center;
justify-content: space-between;
z-index: 110;
}
.lang_menu {
margin-right: 6em;
}
.inner-toggle {
position: relative;
}
/* toggle ********************* */
.toggle_menu {
display: none;
position: absolute;
left: 0;
right: 0;
top: 8em;
padding: 2em 0;
z-index: 100;
/*background-color: #e9573e;*/
}
.toggle_btn {
position: absolute;
top: 2em;
right: 0;
display: block;
width: 70px;
height: 70px;
padding: 22px;
margin: auto;
box-sizing: border-box;
border: solid 1px #fff;
border-radius: 50%;
z-index: 111;
}
.toggle {
position: absolute;
display: block;
width: 25px;
height: auto;
z-index: 10;
padding: 0;
}
.toggle span {
position: relative;
display: block;
width: 100%;
transition: transform .3s ease;
}
.toggle span,
.toggle span:before,
.toggle span:after {
background-color: #fff;
height: 3px;
margin: auto;
}
.toggle span:before,
.toggle span:after {
position: absolute;
content: "";
right: 0;
}
.toggle span:before {
width: 100%;
margin-top: 10px;
transition: opacity .6s ease;
}
.toggle span:after {
width: 100%;
margin-top: 20px;
transition: transform .3s ease;
}
.toggle:hover,
.active .toggle:hover {
text-decoration: none;
}
.toggle_btn.active {
}
.toggle_btn.active .toggle span {
transform: rotate(-45deg);
transform-origin: 1.5em .4em;
transition: all .3s ease;
}
.toggle_btn.active .toggle span:before {
opacity: 0;
transition: opacity 0s ease;
}
.toggle_btn.active .toggle span:after {
width: 100%;
transform: rotate(90deg);
transition: all .3s ease;
margin-top: 0;
}
/* overlay
****************************************************** */
.overlay {
display: none;
width: 100%;
height: 100%;
text-align: center;
position: fixed;
top: 0;
z-index: 99;
background-color: #e9573e;
opacity: 1;
}
.header_flxpc {
display: flex;
align-items: flex-end;
justify-content: space-between;
}
.header_nav {
display: flex;
flex-wrap: wrap;
align-items: stretch;
justify-content: flex-start;
width: 73%;
}
.header_nav li {
width: 50%;
box-sizing: border-box;
border-right: solid 1px #e9573e;
}
.header_nav li:first-child {
width: 100%;
border-top: solid 2px #fff;
border-right: solid 2px #fff;
border-left: solid 2px #fff;
text-align: center;
font-size: 14px;
font-weight: bold;
color: #fff;
}
.header_nav .situation,
.header_nav .sign {
border-bottom: solid 1px #e9573e;
}
.header_nav .sign,
.header_nav .howtouse {
border-right-color: #fff;
}
.header_nav li a {
position: relative;
display: block;
padding: 1em 0 1em 5em;
background-color: #fff;
font-weight: bold;
color: #e9573e;
}
.header_nav a::before {
content: "";
position: absolute;
left: 1em;
top: 0;
bottom: 0;
display: block;
margin: auto;
width: 2em;
height: 2em;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
.header_nav .situation a::before {
width: 2.4em;
height: 2.4em;
background-image: url(../images/icon01.svg);
}
.header_nav .sign a::before {
background-image: url(../images/icon02.svg);
}
.header_nav .type a::before {
background-image: url(../images/icon03.svg);
}
.header_nav .howtouse a::before {
background-image: url(../images/icon04.svg);
}
.header_nav a::after,
.header_flxpc .latest a::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
right: 1.8em;
display: block;
margin: auto;
width: .6em;
height: .6em;
background: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%205%2010%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20fill%3D%22%23e9573e%22%20d%3D%22M5.000%2C5.000%20L-0.000%2C-0.000%20L-0.000%2C10.000%20L5.000%2C5.000%20Z%22%2F%3E%3C%2Fsvg%3E') no-repeat center;
background-size: contain;
}
.header_flxpc .latest a {
position: relative;
display: block;
padding: 2.5em 4em 2.5em 6em;
background-color: #fff;
line-height: 1.3;
font-weight: bold;
color: #e9573e;
}
.header_flxpc .latest a::before {
content: "";
position: absolute;
left: 2.5em;
top: 0;
bottom: 0;
display: block;
margin: auto;
width: 2.4em;
height: 2.4em;
background: url(../images/icon05.svg) no-repeat center;
background-size: contain;
}
.menu_box .manage {
margin-top: .5em;
text-align: right;
}
.menu_box .manage a {
display: inline-block;
vertical-align: middle;
font-weight: bold;
}
.menu_box .manage a::before {
content: "";
display: inline-block;
width: .6em;
height: .6em;
margin-right: .5em;
background: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%205%2010%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20fill%3D%22%23fff%22%20d%3D%22M5.000%2C5.000%20L-0.000%2C-0.000%20L-0.000%2C10.000%20L5.000%2C5.000%20Z%22%2F%3E%3C%2Fsvg%3E') no-repeat center;
background-size: contain;
vertical-align: middle;
}
.header_nav2 {
margin: 2em 0;
padding-top: 2em;
border-top: solid 1px rgba(255,255,255,.3);
}
.header_nav2 li {
display: inline-block;
}
.header_nav2 li:first-child {
margin-right: 3em;
}
.header_nav2 a {
font-size: 112.5%;
font-weight: bold;
}
.toggle_menu .search {
max-width: 580px;
}
.toggle_menu .search .gsc-search-box-tools .gsc-search-box .gsc-input {
padding-right: 0;
}
.toggle_menu .search .gsc-search-box-tools .gsc-search-box .gsc-input input[type=text] {
background-color: rgba(255,255,255,.3) !important;
}
.toggle_menu .search .gsc-search-button .gsc-search-button-v2 {
padding: 11px 20px 10px;
margin-left: 0;
width: 100%;
border-radius: 0;
border: none;
}
#lang {
width: 180px;
}
#lang select {
background: none;
/*-webkit-appearance: menulist;*/
}
#lang select option {
padding: .5em;
}
.second .first {
padding-top: 196px;
background: none;
}
@media screen and (max-width:640px){
br.pc {
display: none;
}
header.pht {
height: 19.76563vw;
}
[class|=inner] {
width: 92%;
}
.title_area {
width: 45%;
}
.title_area a {
width: 38.75vw;
padding: 2.5vw;
}
.title_area a .logo_line {
margin-top: 1.5vw;
padding: .2em 7vw;
}
#head_area.head_area {
max-width: 100%;
padding: 0;
}
.lang_menu {
margin-right: 18vw;
}
.menu_box {
font-size: 2.5vw;
}
/* toggle ********************* */
.toggle_menu {
top: 19.6875vw;
}
.toggle_btn {
top: 4.8vw;
right: 0;
width: 10.9375vw;
height: 10.9375vw;
padding: 3.4375vw;
}
.toggle {
width: 3.90625vw;
}
.toggle span:before {
margin-top: 1.5625vw;
}
.toggle span:after {
margin-top: 3.125vw;
}
.toggle_btn.active .toggle span {
transform-origin: 3.8vw 1.1vw;
}
.header_nav .type,
.header_nav .howtouse {
border-bottom: solid 1px #e9573e;
}
.header_flxpc .latest a::before {
left: 1em;
}
.header_flxpc/*,
.header_nav*/ {
display: block;
}
.header_nav {
width: 100%;
}
/*
.header_nav li {
width: 100%;
}*/
.header_nav a::before,
.header_flxpc .latest a::before {
left: .6em;
}
.header_nav li:first-child {
font-size: 2.5vw;
}
.header_nav li a,
.header_flxpc .latest a {
padding: 1em 0 1em 3.5em;
line-height: 1.5;
}
.header_nav li a {
padding-right: 1.8em;
padding-left: 3.2em;
}
.header_flxpc .latest a {
}
.header_nav a::after {
right: 1em;
}
#lang {
width: 28vw;
margin-bottom: 0;
line-height: 1;
}
#lang select {
padding: 1vw 2vw;
border: solid 2px #fff;
font-size: 2.5vw;
}
.header_nav2 {
margin: 1em 0;
padding-top: 1em;
}
.header_nav2 li {
display: block;
margin-bottom: .5em;
}
.header_nav2 li:first-child {
margin-right: 0;
}
.header_nav2 a {
font-size: 2.5vw;
}
.search {
display: block;
}
.toggle_menu .search .gsc-search-button .gsc-search-button-v2 {
padding: 15px 20px;
}
.second .first {
padding-top: 27vw;
}
/* 多言語ページ */
#moble_menu + .search {
display: none;
}
header:not([class]) #lang {
width: 100%;
margin-bottom: 4%;
}
header:not([class]) #lang select {
border: none;
background-color: #ec6b55;
padding: 13% 0 13% 10px;
background-image: url(../images/pt_language.gif);
background-repeat: no-repeat;
background-position: 90% center;
background-size: 20px, auto;
font-size: 13px;
}
}
/* 2020.1.9 */
.header_flxpc .latest b {
display: block;
border-top: solid 2px #fff;
border-right: solid 2px #fff;
border-left: solid 2px #fff;
text-align: center;
font-size: 14px;
color: #fff;
}
.menu_box .manage a {
padding: 0 0 0 .71em;
background-color: #fff;
color: #e9573e;
}
.menu_box .manage a::before {
content: none;
}
.menu_box .manage a::after {
content: "";
display: inline-block;
width: .6em;
height: .6em;
margin-left: .2em;
margin-right: .5em;
background: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%205%2010%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20fill%3D%22%23e9573e%22%20d%3D%22M5.000%2C5.000%20L-0.000%2C-0.000%20L-0.000%2C10.000%20L5.000%2C5.000%20Z%22%2F%3E%3C%2Fsvg%3E') no-repeat center;
background-size: contain;
}
@media screen and (max-width:640px){
.header_flxpc .latest b {
font-size: 2.5vw;
}
}
#breadcrumbs_area{
margin: -55px auto 30px auto;
font-size: 75%;
text-align: left;
}
#breadcrumbs_area a{
text-decoration: underline;
color: #e05538;
}
@media screen and (max-width:640px){
#breadcrumbs_area {
margin-top: -25px;
}
}
#footer_menu2 strong{
line-height: 1.5;
}
#footer_menu2 small {
line-height: 1.5;
font-size: 72%;
display: block;
margin-top: -5px;
margin-bottom: 10px;
}
@media screen and (max-width:640px){
#footer_menu2 small {
display: none;
}
}
\ No newline at end of file
utsukushitoilet/shared/js/_common.js 0 → 100644
$(document).ready( function() {
mobileNav();
smoothScroll();
gSearch();
});
/* 言語切り替え */
$( function () {
$('#lang select').change( function() {
if ($(this).val() != '') {
window.location.href = $(this).val();
}
});
});
/* モバイル用ナビゲーション */
var mobileNav = ( function() {
var openFlg = 0;
var ua = navigator.userAgent;
$('#toggle').click(function(){
if(openFlg == 0){
$('#navi').addClass("open");
$('#toggle').addClass("open");
$('#head_menu').addClass("open");
$('#menu01').addClass("open");
$('#head_area .search').addClass("open");
$('header h1').addClass("non");
$('header #title').addClass("non");
$('#lang').addClass("non");
openFlg = 1;
} else {
$('#navi').removeClass("open");
$('#toggle').removeClass("open");
$('#head_menu').removeClass("open");
$('#menu01').removeClass("open");
$('#head_area .search').removeClass("open");
$('header h1').removeClass("non");
$('header #title').removeClass("non");
$('#lang').removeClass("non");
openFlg = 0;
}
});
});
var gSearch = function() {
var cx = '002492979778199743801:oaprkry4gm4';
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
'//cse.google.com/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
}();
/* smooth scroll */
var smoothScroll = ( function() {
$('.pagetop a').click(function() {
var speed = 400;
var href= $(this).attr("href");
var target = $(href == "#" || href == "" ? 'html' : href);
var position = target.offset().top;
$('body,html').animate({scrollTop:position}, speed, 'swing');
return false;
});
});
utsukushitoilet/shared/js/_common_parts.js 0 → 100644
/* 共通 ページメニュー　ヘッダ */
function includeHead(tag) {
document.write(
'<header>\n'+
'<div id="head_area">\n'+
'<'+tag+' id="title">'+'<a href="/utsukushitoilet/"><img src="/utsukushitoilet/shared/images/logo.gif" alt="NIPPON UTSUKUSHI TOILET"></a>'+'</'+tag+'>\n'+
'<div id="head_menu">\n'+
' <div id="lang">\n'+
' <select>\n'+
' <option value="">LANGUAGE</option>\n'+
' <option value="/utsukushitoilet/cn_t/" id="cn_t">CHINESE(Traditional)</option>\n'+
' <option value="/utsukushitoilet/cn_s/" id="cn_s">CHINESE(Simplified)</option>\n'+
' <option value="/utsukushitoilet/kr/" id="kr">KOREAN</option>\n'+
' <option value="/utsukushitoilet/en/" id="en">ENGLISH</option>\n'+
' <option value="/utsukushitoilet/" id="ja">JAPANESE</option>\n'+
' </select>\n'+
' </div>\n'+
'<ul id="menu01">\n'+
' <li><a href="/privacy/" target="_blank">個人情報保護方針</a></li>\n'+
' <li><a href="/contact/" target="_blank">お問い合わせ</a></li>\n'+
'</ul><div class="clear"></div>\n'+
'<div id="moble_menu">\n'+
' <a id="toggle" href="#">MENU</a>\n'+
'</div>\n'+
'<ul class="search">\n'+
' <li>'+
' <gcse:searchbox-only></gcse:searchbox-only>'+
/*' <form>\n'+
' <table>\n'+
' <tr>\n'+
' <td><input type="text" name="search"></td>\n'+
' <td><input type="image" src="/utsukushitoilet/shared/images/bt_search.gif"></td>\n'+
' </tr>\n'+
' </table></form>'+*/
' </li>\n'+
'</ul>\n'+
'</div><div class="clear"></div>\n'+
'</div>\n'+
'<nav>\n'+
'<ul id="navi">\n'+
' <li><a href="/utsukushitoilet/situation/">トイレがある施設</a></li>\n'+
' <li><a href="/utsukushitoilet/situation/#guide">トイレの案内表示</a></li>\n'+
' <li><a href="/utsukushitoilet/type/">トイレの種類と使い方</a></li>\n'+
' <li><a href="/utsukushitoilet/type/#use">トイレ内器具の使い方</a></li>\n'+
' <li><a href="/utsukushitoilet/latest/">日本の最新トイレ</a></li>\n'+
'</ul><div class="clear"></div>\n'+
'</nav>\n'+
'</header>\n'
);
}
/* 共通 ページメニュー　フッタ */
function includeFoot() {
document.write(
'<div class="pagetop">\n'+
'<a href="#head_area">PAGE TOP</a>\n'+
'</div>\n'+
'<footer>\n'+
'<div id="footer_div1">\n'+
'<div id="footer_menu1">\n'+
'<strong>日本のトイレ事情</strong>\n'+
'<ul>\n'+
' <li><a href="/utsukushitoilet/situation/">トイレの設置場所</a></li>\n'+
' <li><a href="/utsukushitoilet/situation//#guide">トイレの案内表示</a></li>\n'+
' <li><a href="/utsukushitoilet/type/">トイレの種類と使い方</a></li>\n'+
' <li><a href="/utsukushitoilet/type/#use">トイレ内の器具の使い方</a></li>\n'+
'</ul>\n'+
'</div>\n'+
'<div id="footer_menu2">\n'+
'<strong>日本の最新トイレ</strong>\n'+
'<ul>\n'+
' <li><a href="/utsukushitoilet/latest/#_01">温水洗浄便座</a></li>\n'+
' <li><a href="/utsukushitoilet/latest/02.html#_02">ローシルエット便器</a></li>\n'+
' <li><a href="/utsukushitoilet/latest/02.html#_03">節水機器</a></li>\n'+
' <li><a href="/utsukushitoilet/latest/02.html#_04">子ども連れ配慮機器</a></li>\n'+
'</ul>\n'+
'</div>\n'+
'<div id="footer_banner">\n'+
'<ul>\n'+
' <li class="line"><a href="http://www.sanitary-net.com/" target="_blank"><img src="/utsukushitoilet/shared/images/bnr_toiletnavi.gif" alt="トイレナビ"></a></li>\n'+
' <li class="line"><a href="http://www.mlit.go.jp/kankocho/" target="_blank"><img src="/utsukushitoilet/shared/images/bnr_kanko.gif" alt="観光庁"></a></li>\n'+
' <li class="line"><a href="http://www.j-hotel.or.jp/" target="_blank"><img src="/utsukushitoilet/shared/images/bnr_japanhotel.gif" alt="日本ホテル協会"></a></li>\n'+
' <li class="noline"><a href="http://www.kankou-fa.jp/" target="_blank"><img src="/utsukushitoilet/shared/images/bnr_kokusaikankoushisetu.jpg" alt="国際観光施設協会"></a></li>\n'+
' <li class="noline"><a href="http://www.yadonet.ne.jp/" target="_blank"><img src="/utsukushitoilet/shared/images/bnr_yadonet.gif" alt="全国旅館ホテル衛生同業組合連合会"></a></li>\n'+
'</ul>\n'+
'</div><div class="clear"></div>\n'+
'</div>\n'+
'<div id="footer_div2">\n'+
'<div id="footer_download">\n'+
'<strong>チラシ素材ダウンロードはこちら</strong>\n'+
'<ul>\n'+
' <li>ホテルや旅館のオーナーの方に活用いただくチラシデータを作成しました。訪日外国人に向けた、日本のトイレの使い方などを紹介しています。<br>客室に設置いただくなど、是非ご活用ください。</li>\n'+
' <li><a href="http://www.sanitary-net.com/news/news963" target="_blank"><img src="/utsukushitoilet/shared/images/btn_flyler.gif" alt="チラシ素材ダウンロード"></a></li>\n'+
'</ul>\n'+
'</div>\n'+
'<div id="footer_link">\n'+
'<strong>リンクについて</strong>\n'+
'<ul>\n'+
' <li>当サイトはリンクフリーです<br>\n'+
'リンクをご希望の方は<br>\n'+
'このロゴをお使い下さい。</li>\n'+
' <li><img src="/utsukushitoilet/shared/images/bnr_utsukushi.gif" alt="NIPPON UTSUKUSHI TOILET"></li>\n'+
'</ul>\n'+
'</div><div class="clear"></div>\n'+
'</div>\n'+
'<div id="copyright">\n'+
'Copyright &copy; 一般社団法人日本レストルーム工業会\n'+
'</div>\n'+
'</footer>\n'
);
}
utsukushitoilet/shared/js/common.js
...@@ -42,6 +42,9 @@ $(function () { ...@@ -42,6 +42,9 @@ $(function () {
overlay.slideUp('fast'); overlay.slideUp('fast');
}); });
if (window.location.href.indexOf("/cn_t/") > 0 || window.location.href.indexOf("/cn_s/") > 0 || window.location.href.indexOf("/kr/") > 0 || window.location.href.indexOf("/en/") > 0) {
return false;
} else {
setTimeout(function () { setTimeout(function () {
$("#gsc-i-id1").attr("placeholder", "サイト内検索"); $("#gsc-i-id1").attr("placeholder", "サイト内検索");
$("#gsc-i-id1").css("background", "none"); $("#gsc-i-id1").css("background", "none");
...@@ -53,6 +56,7 @@ $(function () { ...@@ -53,6 +56,7 @@ $(function () {
$("#gsc-i-id1").attr("placeholder", "サイト内検索"); $("#gsc-i-id1").attr("placeholder", "サイト内検索");
$("#gsc-i-id1").css("font-family", 'Verdana, Roboto, "Droid Sans", "游ゴシック", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ＭＳ Ｐゴシック", sans-serif'); $("#gsc-i-id1").css("font-family", 'Verdana, Roboto, "Droid Sans", "游ゴシック", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ＭＳ Ｐゴシック", sans-serif');
}); });
}
}); });
/* モバイル用ナビゲーション */ /* モバイル用ナビゲーション */
......
utsukushitoilet/shared/js/common_191023.js 0 → 100644
$(document).ready( function() {
mobileNav();
smoothScroll();
gSearch();
});
/* 言語切り替え */
$( function () {
$('#lang select').change( function() {
if ($(this).val() != '') {
window.location.href = $(this).val();
}
});
});
/* モバイル用ナビゲーション */
var mobileNav = ( function() {
var openFlg = 0;
var ua = navigator.userAgent;
$('#toggle').click(function(){
if(openFlg == 0){
$('#navi').addClass("open");
$('#toggle').addClass("open");
$('#head_menu').addClass("open");
$('#menu01').addClass("open");
$('#head_area .search').addClass("open");
$('header h1').addClass("non");
$('header #title').addClass("non");
$('#lang').addClass("non");
openFlg = 1;
} else {
$('#navi').removeClass("open");
$('#toggle').removeClass("open");
$('#head_menu').removeClass("open");
$('#menu01').removeClass("open");
$('#head_area .search').removeClass("open");
$('header h1').removeClass("non");
$('header #title').removeClass("non");
$('#lang').removeClass("non");
openFlg = 0;
}
});
});
var gSearch = ( function() {
var cx = '002492979778199743801:oaprkry4gm4';
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
'//cse.google.com/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
});
/* smooth scroll */
var smoothScroll = ( function() {
$('.pagetop a').click(function() {
var speed = 400;
var href= $(this).attr("href");
var target = $(href == "#" || href == "" ? 'html' : href);
var position = target.offset().top;
$('body,html').animate({scrollTop:position}, speed, 'swing');
return false;
});
});
utsukushitoilet/shared/js/common_parts.js
/* 日本語 共通 ページメニュー　ヘッダ */ /* 日本語 共通 ページメニュー　ヘッダ */
function includeHead_Ja(tag) { function includeHead_Ja(tag) {
document.write( document.write(
'<div class="overlay"><img src="/utsukushitoilet/shared/images/main_visual0_002.png" width="100%" height="auto" class="back_img"></div>\n' + '<div class="overlay"><img src="/utsukushitoilet/shared/images/main_visual0_002.png" width="100%" height="auto" class="back_img"></div>\n'+
'<header class="pht">\n' + '<header class="pht">\n'+
'<div id="head_area" class="head_area">\n' + '<div id="head_area" class="head_area">\n'+
'<' + tag + ' class="title_area"><a href="/utsukushitoilet/"><img src="/utsukushitoilet/shared/images/logo.svg" alt="JAPAN TOILET INFORMATION"><span class="logo_line"><img src="/utsukushitoilet/shared/images/logo_line.svg" alt="NIPPON UTSUKUSHI TOILET"></span></a></' + tag + '>\n' + '<'+tag+' class="title_area"><a href="/utsukushitoilet/"><img src="/utsukushitoilet/shared/images/logo.svg" alt="JAPAN TOILET INFORMATION"><span class="logo_line"><img src="/utsukushitoilet/shared/images/logo_line.svg" alt="NIPPON UTSUKUSHI TOILET"></span></a></'+tag+'>\n'+
'<div class="lang_menu">\n' + '<div class="lang_menu">\n'+
'<div id="lang">\n' + '<div id="lang">\n'+
'<select>\n' + '<select>\n'+
'<option value="">LANGUAGE</option>\n' + '<option value="">LANGUAGE</option>\n'+
'<option value="/utsukushitoilet/cn_t/" id="cn_t">CHINESE(Traditional)</option>\n' + '<option value="/utsukushitoilet/cn_t/" id="cn_t">CHINESE(Traditional)</option>\n'+
'<option value="/utsukushitoilet/cn_s/" id="cn_s">CHINESE(Simplified)</option>\n' + '<option value="/utsukushitoilet/cn_s/" id="cn_s">CHINESE(Simplified)</option>\n'+
'<option value="/utsukushitoilet/kr/" id="kr">KOREAN</option>\n' + '<option value="/utsukushitoilet/kr/" id="kr">KOREAN</option>\n'+
'<option value="/utsukushitoilet/en/" id="en">ENGLISH</option>\n' + '<option value="/utsukushitoilet/en/" id="en">ENGLISH</option>\n'+
'<option value="/utsukushitoilet/" id="ja">JAPANESE</option>\n' + '<option value="/utsukushitoilet/" id="ja">JAPANESE</option>\n'+
'</select>\n' + '</select>\n'+
'</div>\n' + '</div>\n'+
'</div>\n' + '</div>\n'+
'</div>\n' + '</div>\n'+
'<nav>\n' + '<nav>\n'+
'<div class="inner-toggle">\n' + '<div class="inner-toggle">\n'+
'<a href="" id="toggle_btn" class="toggle_btn">\n' + '<a href="" id="toggle_btn" class="toggle_btn">\n'+
'<div class="toggle"><span></span></div>\n' + '<div class="toggle"><span></span></div>\n'+
'</a>\n' + '</a>\n'+
'</div>\n' + '</div>\n'+
'<div id="toggle_menu" class="toggle_menu">\n' + '<div id="toggle_menu" class="toggle_menu">\n'+
'<div class="inner-menu">\n' + '<div class="inner-menu">\n'+
'<div class="menu_box">\n' + '<div class="menu_box">\n'+
'<div class="header_flxpc">\n' + '<div class="header_flxpc">\n'+
'<ul class="header_nav">\n' + '<ul class="header_nav">\n'+
'<li>日本のトイレ事情</li>\n' + '<li>日本のトイレ事情</li>\n'+
'<li class="situation"><a href="/utsukushitoilet/situation/">トイレがある施設</a></li>\n' + '<li class="situation"><a href="/utsukushitoilet/situation/">トイレがある施設</a></li>\n'+
'<li class="sign"><a href="/utsukushitoilet/sign/">トイレの案内表示</a></li>\n' + '<li class="sign"><a href="/utsukushitoilet/sign/">トイレの案内表示</a></li>\n'+
'<li class="type"><a href="/utsukushitoilet/type/">トイレの種類と使い方</a></li>\n' + '<li class="type"><a href="/utsukushitoilet/type/">トイレの種類と使い方</a></li>\n'+
'<li class="howtouse"><a href="/utsukushitoilet/howtouse/">トイレ内器具の使い方</a></li>\n' + '<li class="howtouse"><a href="/utsukushitoilet/howtouse/">トイレ内器具の使い方</a></li>\n'+
'</ul>\n' + '</ul>\n'+
'<div class="latest"><b>トイレ情報</b><a href="/utsukushitoilet/latest/">日本の<br class="pc">最新トイレ</a></div>\n' + '<div class="latest"><b>トイレ情報</b><a href="/utsukushitoilet/latest/">日本の<br class="pc">最新トイレ</a></div>\n'+
'</div>\n' + '</div>\n'+
'<div class="manage">\n' + '<div class="manage">\n'+
'<a href="/utsukushitoilet/owner/" target="_blank">施設オーナー・管理者様向け</a>\n' + '<a href="/utsukushitoilet/owner/" target="_blank">施設オーナー・管理者様向け</a>\n'+
'</div>\n' + '</div>\n'+
'</div>\n' + '</div>\n'+
'<ul class="header_nav2">\n' + '<ul class="header_nav2">\n'+
'<li><a href="/privacy/" target="_blank">個人情報保護方針</a></li>\n' + '<li><a href="/privacy/" target="_blank">個人情報保護方針</a></li>\n'+
'<li><a href="/contact/" target="_blank">お問い合わせ</a></li>\n' + '<li><a href="/contact/" target="_blank">お問い合わせ</a></li>\n'+
'</ul>\n' + '</ul>\n'+
'<div class="search">\n' + '<div class="search">\n'+
'<gcse:searchbox-only></gcse:searchbox-only>\n' + '<gcse:searchbox-only></gcse:searchbox-only>\n'+
'</div>\n' + '</div>\n'+
'</div>\n' + '</div>\n'+
'</div>\n' + '</div>\n'+
'</nav>\n' + '</nav>\n'+
'</header>\n' '</header>\n'
); );
} }
/* 共通 ページメニュー　ヘッダ */ /* 共通 ページメニュー　ヘッダ */
function includeHead(tag) { function includeHead(tag) {
document.write( document.write(
'<header>\n' + '<header>\n'+
'<div id="head_area">\n' + '<div id="head_area">\n'+
'<' + tag + ' id="title">' + '<a href="/utsukushitoilet/"><img src="/utsukushitoilet/shared/images/logo.gif" alt="JAPAN TOILET INFORMATION"></a>' + '</' + tag + '>\n' + '<'+tag+' id="title">'+'<a href="/utsukushitoilet/"><img src="/utsukushitoilet/shared/images/logo.gif" alt="JAPAN TOILET INFORMATION"></a>'+'</'+tag+'>\n'+
'<div id="head_menu">\n' + '<div id="head_menu">\n'+
' <div id="lang">\n' + ' <div id="lang">\n'+
' <select>\n' + ' <select>\n'+
' <option value="">LANGUAGE</option>\n' + ' <option value="">LANGUAGE</option>\n'+
' <option value="/utsukushitoilet/cn_t/" id="cn_t">CHINESE(Traditional)</option>\n' + ' <option value="/utsukushitoilet/cn_t/" id="cn_t">CHINESE(Traditional)</option>\n'+
' <option value="/utsukushitoilet/cn_s/" id="cn_s">CHINESE(Simplified)</option>\n' + ' <option value="/utsukushitoilet/cn_s/" id="cn_s">CHINESE(Simplified)</option>\n'+
' <option value="/utsukushitoilet/kr/" id="kr">KOREAN</option>\n' + ' <option value="/utsukushitoilet/kr/" id="kr">KOREAN</option>\n'+
' <option value="/utsukushitoilet/en/" id="en">ENGLISH</option>\n' + ' <option value="/utsukushitoilet/en/" id="en">ENGLISH</option>\n'+
' <option value="/utsukushitoilet/" id="ja">JAPANESE</option>\n' + ' <option value="/utsukushitoilet/" id="ja">JAPANESE</option>\n'+
' </select>\n' + ' </select>\n'+
' </div>\n' + ' </div>\n'+
'<ul id="menu01">\n' + '<ul id="menu01">\n'+
' <li><a href="/privacy/" target="_blank">個人情報保護方針</a></li>\n' + ' <li><a href="/privacy/" target="_blank">個人情報保護方針</a></li>\n'+
' <li><a href="/contact/" target="_blank">お問い合わせ</a></li>\n' + ' <li><a href="/contact/" target="_blank">お問い合わせ</a></li>\n'+
' <li class="manager"><a href="/utsukushitoilet/owner/" target="_blank">施設管理者様向け</a></li>\n' + ' <li class="manager"><a href="/utsukushitoilet/owner/" target="_blank">施設管理者様向け</a></li>\n'+
'</ul><div class="clear"></div>\n' + '</ul><div class="clear"></div>\n'+
'<div id="moble_menu">\n' + '<div id="moble_menu">\n'+
' <a id="toggle" href="#">MENU</a>\n' + ' <a id="toggle" href="#">MENU</a>\n'+
'</div>\n' + '</div>\n'+
'<ul class="search">\n' + '<ul class="search">\n'+
' <li>' + ' <li>'+
' <gcse:searchbox-only></gcse:searchbox-only>' + ' <gcse:searchbox-only></gcse:searchbox-only>'+
/*' <form>\n'+ /*' <form>\n'+
' <table>\n'+ ' <table>\n'+
' <tr>\n'+ ' <tr>\n'+
' <td><input type="text" name="search"></td>\n'+ ' <td><input type="text" name="search"></td>\n'+
' <td><input type="image" src="/utsukushitoilet/shared/images/bt_search.gif"></td>\n'+ ' <td><input type="image" src="/utsukushitoilet/shared/images/bt_search.gif"></td>\n'+
' </tr>\n'+ ' </tr>\n'+
' </table></form>'+*/ ' </table></form>'+*/
' </li>\n' + ' </li>\n'+
'</ul>\n' + '</ul>\n'+
'</div><div class="clear"></div>\n' + '</div><div class="clear"></div>\n'+
'</div>\n' + '</div>\n'+
'<nav>\n' + '<nav>\n'+
'<ul id="navi">\n' + '<ul id="navi">\n'+
' <li><a href="/utsukushitoilet/">TOP</a></li>\n' + ' <li><a href="/utsukushitoilet/">TOP</a></li>\n'+
' <li><a href="/utsukushitoilet/situation/">トイレがある施設</a></li>\n' + ' <li><a href="/utsukushitoilet/situation/">トイレがある施設</a></li>\n'+
' <li><a href="/utsukushitoilet/sign/">トイレの案内表示</a></li>\n' + ' <li><a href="/utsukushitoilet/sign/">トイレの案内表示</a></li>\n'+
' <li><a href="/utsukushitoilet/type/">トイレの種類と使い方</a></li>\n' + ' <li><a href="/utsukushitoilet/type/">トイレの種類と使い方</a></li>\n'+
' <li><a href="/utsukushitoilet/howtouse/">トイレ内器具の使い方</a></li>\n' + ' <li><a href="/utsukushitoilet/howtouse/">トイレ内器具の使い方</a></li>\n'+
' <li><a href="/utsukushitoilet/latest/">日本の最新トイレ</a></li>\n' + ' <li><a href="/utsukushitoilet/latest/">日本の最新トイレ</a></li>\n'+
'</ul><div class="clear"></div>\n' + '</ul><div class="clear"></div>\n'+
'</nav>\n' + '</nav>\n'+
'</header>\n' '</header>\n'
); );
} }
/* 共通 ページメニュー　フッタ */ /* 共通 ページメニュー　フッタ */
function includeFoot() { function includeFoot() {
document.write( document.write(
'<div class="pagetop">\n' + '<div class="pagetop">\n'+
'<a href="#head_area">PAGE TOP</a>\n' + '<a href="#head_area">PAGE TOP</a>\n'+
'</div>\n' + '</div>\n'+
'<footer>\n' + '<footer>\n'+
'<div id="footer_div1">\n' + '<div id="footer_div1">\n'+
'<div id="footer_menu1">\n' + '<div id="footer_menu1">\n'+
'<strong>日本のトイレ事情</strong>\n' + '<strong>日本のトイレ事情</strong>\n'+
'<ul>\n' + '<ul>\n'+
' <li><a href="/utsukushitoilet/situation/">トイレがある施設</a></li>\n' + ' <li><a href="/utsukushitoilet/situation/">トイレがある施設</a></li>\n'+
' <li><a href="/utsukushitoilet/sign/">トイレの案内表示</a></li>\n' + ' <li><a href="/utsukushitoilet/sign/">トイレの案内表示</a></li>\n'+
' <li><a href="/utsukushitoilet/type/">トイレの種類と使い方</a></li>\n' + ' <li><a href="/utsukushitoilet/type/">トイレの種類と使い方</a></li>\n'+
' <li><a href="/utsukushitoilet/howtouse/">トイレ内の器具の使い方</a></li>\n' + ' <li><a href="/utsukushitoilet/howtouse/">トイレ内の器具の使い方</a></li>\n'+
'</ul>\n' + '</ul>\n'+
'</div>\n' + '</div>\n'+
'<div id="footer_menu2">\n' + '<div id="footer_menu2">\n'+
'<strong>日本の最新トイレ</strong>\n' + '<strong>日本の最新トイレ</strong>\n'+
'<ul>\n' + '<ul>\n'+
' <li><a href="/utsukushitoilet/latest/#_01">温水洗浄便座</a></li>\n' + ' <li><a href="/utsukushitoilet/latest/#_01">温水洗浄便座</a></li>\n'+
' <li><a href="/utsukushitoilet/latest/#_02">ローシルエット便器</a></li>\n' + ' <li><a href="/utsukushitoilet/latest/#_02">ローシルエット便器</a></li>\n'+
' <li><a href="/utsukushitoilet/latest/#_03">節水機器</a></li>\n' + ' <li><a href="/utsukushitoilet/latest/#_03">節水機器</a></li>\n'+
' <li><a href="/utsukushitoilet/latest/#_04">子ども連れ配慮機器</a></li>\n' + ' <li><a href="/utsukushitoilet/latest/#_04">子ども連れ配慮機器</a></li>\n'+
'</ul>\n' + '</ul>\n'+
'</div>\n' + '</div>\n'+
'<div id="footer_menu2">\n' + '<div id="footer_menu2">\n'+
'<strong>日本のトイレ<br>関連ラベル・記号</strong><small>（施設のオーナー・管理者様向け）</small>\n' + '<strong>日本のトイレ<br>関連ラベル・記号</strong><small>（施設のオーナー・管理者様向け）</small>\n'+
'<ul>\n' + '<ul>\n'+
' <li><a href="/utsukushitoilet/owner/">トイレの使い方ラベル</a></li>\n' + ' <li><a href="/utsukushitoilet/owner/">トイレの使い方ラベル</a></li>\n'+
' <li><a href="/utsukushitoilet/owner/index2.html">案内用図記号</a></li>\n' + ' <li><a href="/utsukushitoilet/owner/index2.html">案内用図記号</a></li>\n'+
'</ul>\n' + '</ul>\n'+
'</div>\n' + '</div>\n'+
'<div id="footer_banner">\n' + '<div id="footer_banner">\n'+
'<ul>\n' + '<ul>\n'+
' <li class="line"><a href="http://www.sanitary-net.com/" target="_blank"><img src="/utsukushitoilet/shared/images/bnr_toiletnavi.gif" alt="トイレナビ"></a></li>\n' + ' <li class="line"><a href="http://www.sanitary-net.com/" target="_blank"><img src="/utsukushitoilet/shared/images/bnr_toiletnavi.gif" alt="トイレナビ"></a></li>\n'+
' <li class="line"><a href="http://www.mlit.go.jp/kankocho/" target="_blank"><img src="/utsukushitoilet/shared/images/bnr_kanko.gif" alt="観光庁"></a></li>\n' + ' <li class="line"><a href="http://www.mlit.go.jp/kankocho/" target="_blank"><img src="/utsukushitoilet/shared/images/bnr_kanko.gif" alt="観光庁"></a></li>\n'+
' <li class="line"><a href="http://www.j-hotel.or.jp/" target="_blank"><img src="/utsukushitoilet/shared/images/bnr_japanhotel.gif" alt="日本ホテル協会"></a></li>\n' + ' <li class="line"><a href="http://www.j-hotel.or.jp/" target="_blank"><img src="/utsukushitoilet/shared/images/bnr_japanhotel.gif" alt="日本ホテル協会"></a></li>\n'+
' <li class="noline"><a href="http://www.kankou-fa.jp/" target="_blank"><img src="/utsukushitoilet/shared/images/bnr_kokusaikankoushisetu.jpg" alt="国際観光施設協会"></a></li>\n' + ' <li class="noline"><a href="http://www.kankou-fa.jp/" target="_blank"><img src="/utsukushitoilet/shared/images/bnr_kokusaikankoushisetu.jpg" alt="国際観光施設協会"></a></li>\n'+
' <li class="noline"><a href="http://www.yadonet.ne.jp/" target="_blank"><img src="/utsukushitoilet/shared/images/bnr_yadonet.gif" alt="全国旅館ホテル衛生同業組合連合会"></a></li>\n' + ' <li class="noline"><a href="http://www.yadonet.ne.jp/" target="_blank"><img src="/utsukushitoilet/shared/images/bnr_yadonet.gif" alt="全国旅館ホテル衛生同業組合連合会"></a></li>\n'+
'</ul>\n' + '</ul>\n'+
'</div><div class="clear"></div>\n' + '</div><div class="clear"></div>\n'+
'</div>\n' + '</div>\n'+
'<div id="footer_div2">\n' + '<div id="footer_div2">\n'+
'<div id="footer_link">\n' + '<div id="footer_link">\n'+
'<strong>リンクについて</strong>\n' + '<strong>リンクについて</strong>\n'+
'<ul>\n' + '<ul>\n'+
' <li>当サイトはリンクフリーです<br>\n' + ' <li>当サイトはリンクフリーです<br>\n'+
'リンクをご希望の方は<br>\n' + 'リンクをご希望の方は<br>\n'+
'このロゴをお使い下さい。</li>\n' + 'このロゴをお使い下さい。</li>\n'+
' <li><img src="/utsukushitoilet/shared/images/bnr_utsukushi.gif" alt="NIPPON UTSUKUSHI TOILET"></li>\n' + ' <li><img src="/utsukushitoilet/shared/images/bnr_utsukushi.gif" alt="NIPPON UTSUKUSHI TOILET"></li>\n'+
'</ul>\n' + '</ul>\n'+
'</div><div class="clear"></div>\n' + '</div><div class="clear"></div>\n'+
'</div>\n' + '</div>\n'+
'<div id="copyright">\n' + '<div id="copyright">\n'+
'Copyright &copy; 一般社団法人日本レストルーム工業会\n' + 'Copyright &copy; 一般社団法人日本レストルーム工業会\n'+
'</div>\n' + '</div>\n'+
'</footer>\n' '</footer>\n'
); );
} }
// ユニバーサルアナリティクス // ユニバーサルアナリティクス
(function (i, s, o, g, r, a, m) { (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
i['GoogleAnalyticsObject'] = r; (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
i[r] = i[r] || function () { m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
(i[r].q = i[r].q || []).push(arguments) })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
}, i[r].l = 1 * new Date();
a = s.createElement(o),
m = s.getElementsByTagName(o)[0];
a.async = 1;
a.src = g;
m.parentNode.insertBefore(a, m)
})(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
ga('create', 'UA-50037685-2', 'auto'); ga('create', 'UA-50037685-2', 'auto');
ga('require', 'displayfeatures'); ga('require', 'displayfeatures');
ga('send', 'pageview'); ga('send', 'pageview');
utsukushitoilet/shared/js/common_parts_191023.js 0 → 100644
/* 共通 ページメニュー　ヘッダ */
function includeHead(tag) {
document.write(
'<header>\n'+
'<div id="head_area">\n'+
'<'+tag+' id="title">'+'<a href="/utsukushitoilet/"><img src="/utsukushitoilet/shared/images/logo.gif" alt="JAPAN TOILET INFORMATION"></a>'+'</'+tag+'>\n'+
'<div id="head_menu">\n'+
' <div id="lang">\n'+
' <select>\n'+
' <option value="">LANGUAGE</option>\n'+
' <option value="/utsukushitoilet/cn_t/" id="cn_t">CHINESE(Traditional)</option>\n'+
' <option value="/utsukushitoilet/cn_s/" id="cn_s">CHINESE(Simplified)</option>\n'+
' <option value="/utsukushitoilet/kr/" id="kr">KOREAN</option>\n'+
' <option value="/utsukushitoilet/en/" id="en">ENGLISH</option>\n'+
' <option value="/utsukushitoilet/" id="ja">JAPANESE</option>\n'+
' </select>\n'+
' </div>\n'+
'<ul id="menu01">\n'+
' <li><a href="/privacy/" target="_blank">個人情報保護方針</a></li>\n'+
' <li><a href="/contact/" target="_blank">お問い合わせ</a></li>\n'+
' <li class="manager"><a href="/utsukushitoilet/owner/" target="_blank">施設管理者様向け</a></li>\n'+
'</ul><div class="clear"></div>\n'+
'<div id="moble_menu">\n'+
' <a id="toggle" href="#">MENU</a>\n'+
'</div>\n'+
'<ul class="search">\n'+
' <li>'+
' <gcse:searchbox-only></gcse:searchbox-only>'+
/*' <form>\n'+
' <table>\n'+
' <tr>\n'+
' <td><input type="text" name="search"></td>\n'+
' <td><input type="image" src="/utsukushitoilet/shared/images/bt_search.gif"></td>\n'+
' </tr>\n'+
' </table></form>'+*/
' </li>\n'+
'</ul>\n'+
'</div><div class="clear"></div>\n'+
'</div>\n'+
'<nav>\n'+
'<ul id="navi">\n'+
' <li><a href="/utsukushitoilet/">TOP</a></li>\n'+
' <li><a href="/utsukushitoilet/situation/">トイレがある施設</a></li>\n'+
' <li><a href="/utsukushitoilet/sign/">トイレの案内表示</a></li>\n'+
' <li><a href="/utsukushitoilet/type/">トイレの種類と使い方</a></li>\n'+
' <li><a href="/utsukushitoilet/howtouse/">トイレ内器具の使い方</a></li>\n'+
' <li><a href="/utsukushitoilet/latest/">日本の最新トイレ</a></li>\n'+
'</ul><div class="clear"></div>\n'+
'</nav>\n'+
'</header>\n'
);
}
/* 共通 ページメニュー　フッタ */
function includeFoot() {
document.write(
'<div class="pagetop">\n'+
'<a href="#head_area">PAGE TOP</a>\n'+
'</div>\n'+
'<footer>\n'+
'<div id="footer_div1">\n'+
'<div id="footer_menu1">\n'+
'<strong>日本のトイレ事情</strong>\n'+
'<ul>\n'+
' <li><a href="/utsukushitoilet/situation/">トイレがある施設</a></li>\n'+
' <li><a href="/utsukushitoilet/sign/">トイレの案内表示</a></li>\n'+
' <li><a href="/utsukushitoilet/type/">トイレの種類と使い方</a></li>\n'+
' <li><a href="/utsukushitoilet/howtouse/">トイレ内の器具の使い方</a></li>\n'+
'</ul>\n'+
'</div>\n'+
'<div id="footer_menu2">\n'+
'<strong>日本の最新トイレ</strong>\n'+
'<ul>\n'+
' <li><a href="/utsukushitoilet/latest/#_01">温水洗浄便座</a></li>\n'+
' <li><a href="/utsukushitoilet/latest/02.html#_02">ローシルエット便器</a></li>\n'+
' <li><a href="/utsukushitoilet/latest/02.html#_03">節水機器</a></li>\n'+
' <li><a href="/utsukushitoilet/latest/02.html#_04">子ども連れ配慮機器</a></li>\n'+
'</ul>\n'+
'</div>\n'+
'<div id="footer_banner">\n'+
'<ul>\n'+
' <li class="line"><a href="http://www.sanitary-net.com/" target="_blank"><img src="/utsukushitoilet/shared/images/bnr_toiletnavi.gif" alt="トイレナビ"></a></li>\n'+
' <li class="line"><a href="http://www.mlit.go.jp/kankocho/" target="_blank"><img src="/utsukushitoilet/shared/images/bnr_kanko.gif" alt="観光庁"></a></li>\n'+
' <li class="line"><a href="http://www.j-hotel.or.jp/" target="_blank"><img src="/utsukushitoilet/shared/images/bnr_japanhotel.gif" alt="日本ホテル協会"></a></li>\n'+
' <li class="noline"><a href="http://www.kankou-fa.jp/" target="_blank"><img src="/utsukushitoilet/shared/images/bnr_kokusaikankoushisetu.jpg" alt="国際観光施設協会"></a></li>\n'+
' <li class="noline"><a href="http://www.yadonet.ne.jp/" target="_blank"><img src="/utsukushitoilet/shared/images/bnr_yadonet.gif" alt="全国旅館ホテル衛生同業組合連合会"></a></li>\n'+
'</ul>\n'+
'</div><div class="clear"></div>\n'+
'</div>\n'+
'<div id="footer_div2">\n'+
'<div id="footer_download">\n'+
'<strong>チラシ素材ダウンロードはこちら</strong>\n'+
'<ul>\n'+
' <li>ホテルや旅館のオーナーの方に活用いただくチラシデータを作成しました。訪日外国人に向けた、日本のトイレの使い方などを紹介しています。<br>客室に設置いただくなど、是非ご活用ください。</li>\n'+
' <li><a href="http://www.sanitary-net.com/news/news963" target="_blank"><img src="/utsukushitoilet/shared/images/btn_flyler.gif" alt="チラシ素材ダウンロード"></a></li>\n'+
'</ul>\n'+
'</div>\n'+
'<div id="footer_link">\n'+
'<strong>リンクについて</strong>\n'+
'<ul>\n'+
' <li>当サイトはリンクフリーです<br>\n'+
'リンクをご希望の方は<br>\n'+
'このロゴをお使い下さい。</li>\n'+
' <li><img src="/utsukushitoilet/shared/images/bnr_utsukushi.gif" alt="NIPPON UTSUKUSHI TOILET"></li>\n'+
'</ul>\n'+
'</div><div class="clear"></div>\n'+
'</div>\n'+
'<div id="copyright">\n'+
'Copyright &copy; 一般社団法人日本レストルーム工業会\n'+
'</div>\n'+
'</footer>\n'
);
}
// ユニバーサルアナリティクス
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-50037685-2', 'auto');
ga('require', 'displayfeatures');
ga('send', 'pageview');
utsukushitoilet/shared/js/common_parts_200109.js 0 → 100644
/* 日本語 共通 ページメニュー　ヘッダ */
function includeHead_Ja(tag) {
document.write(
'<div class="overlay"></div>\n'+
'<header class="pht">\n'+
'<div id="head_area" class="head_area">\n'+
'<'+tag+' class="title_area"><a href="/utsukushitoilet/"><img src="/utsukushitoilet/shared/images/logo.svg" alt="JAPAN TOILET INFORMATION"><span class="logo_line"><img src="/utsukushitoilet/shared/images/logo_line.svg" alt="NIPPON UTSUKUSHI TOILET"></span></a></'+tag+'>\n'+
'<div class="lang_menu">\n'+
'<div id="lang">\n'+
'<select>\n'+
'<option value="">LANGUAGE</option>\n'+
'<option value="/utsukushitoilet/cn_t/" id="cn_t">CHINESE(Traditional)</option>\n'+
'<option value="/utsukushitoilet/cn_s/" id="cn_s">CHINESE(Simplified)</option>\n'+
'<option value="/utsukushitoilet/kr/" id="kr">KOREAN</option>\n'+
'<option value="/utsukushitoilet/en/" id="en">ENGLISH</option>\n'+
'<option value="/utsukushitoilet/" id="ja">JAPANESE</option>\n'+
'</select>\n'+
'</div>\n'+
'</div>\n'+
'</div>\n'+
'<nav>\n'+
'<div class="inner-toggle">\n'+
'<a href="" id="toggle_btn" class="toggle_btn">\n'+
'<div class="toggle"><span></span></div>\n'+
'</a>\n'+
'</div>\n'+
'<div id="toggle_menu" class="toggle_menu">\n'+
'<div class="inner-menu">\n'+
'<div class="menu_box">\n'+
'<div class="header_flxpc">\n'+
'<ul class="header_nav">\n'+
'<li>日本のトイレ事情</li>\n'+
'<li class="situation"><a href="/utsukushitoilet/situation/">トイレがある施設</a></li>\n'+
'<li class="sign"><a href="/utsukushitoilet/sign/">トイレの案内表示</a></li>\n'+
'<li class="type"><a href="/utsukushitoilet/type/">トイレの種類と使い方</a></li>\n'+
'<li class="howtouse"><a href="/utsukushitoilet/howtouse/">トイレ内器具の使い方</a></li>\n'+
'</ul>\n'+
'<div class="latest"><a href="/utsukushitoilet/latest/">日本の<br class="pc">最新トイレ</a></div>\n'+
'</div>\n'+
'<div class="manage">\n'+
'<a href="/utsukushitoilet/owner/" target="_blank">施設管理者様向け</a>\n'+
'</div>\n'+
'</div>\n'+
'<ul class="header_nav2">\n'+
'<li><a href="/privacy/" target="_blank">個人情報保護方針</a></li>\n'+
'<li><a href="/contact/" target="_blank">お問い合わせ</a></li>\n'+
'</ul>\n'+
'<div class="search">\n'+
'<gcse:searchbox-only></gcse:searchbox-only>\n'+
'</div>\n'+
'</div>\n'+
'</div>\n'+
'</nav>\n'+
'</header>\n'
);
}
/* 共通 ページメニュー　ヘッダ */
function includeHead(tag) {
document.write(
'<header>\n'+
'<div id="head_area">\n'+
'<'+tag+' id="title">'+'<a href="/utsukushitoilet/"><img src="/utsukushitoilet/shared/images/logo.gif" alt="JAPAN TOILET INFORMATION"></a>'+'</'+tag+'>\n'+
'<div id="head_menu">\n'+
' <div id="lang">\n'+
' <select>\n'+
' <option value="">LANGUAGE</option>\n'+
' <option value="/utsukushitoilet/cn_t/" id="cn_t">CHINESE(Traditional)</option>\n'+
' <option value="/utsukushitoilet/cn_s/" id="cn_s">CHINESE(Simplified)</option>\n'+
' <option value="/utsukushitoilet/kr/" id="kr">KOREAN</option>\n'+
' <option value="/utsukushitoilet/en/" id="en">ENGLISH</option>\n'+
' <option value="/utsukushitoilet/" id="ja">JAPANESE</option>\n'+
' </select>\n'+
' </div>\n'+
'<ul id="menu01">\n'+
' <li><a href="/privacy/" target="_blank">個人情報保護方針</a></li>\n'+
' <li><a href="/contact/" target="_blank">お問い合わせ</a></li>\n'+
' <li class="manager"><a href="/utsukushitoilet/owner/" target="_blank">施設管理者様向け</a></li>\n'+
'</ul><div class="clear"></div>\n'+
'<div id="moble_menu">\n'+
' <a id="toggle" href="#">MENU</a>\n'+
'</div>\n'+
'<ul class="search">\n'+
' <li>'+
' <gcse:searchbox-only></gcse:searchbox-only>'+
/*' <form>\n'+
' <table>\n'+
' <tr>\n'+
' <td><input type="text" name="search"></td>\n'+
' <td><input type="image" src="/utsukushitoilet/shared/images/bt_search.gif"></td>\n'+
' </tr>\n'+
' </table></form>'+*/
' </li>\n'+
'</ul>\n'+
'</div><div class="clear"></div>\n'+
'</div>\n'+
'<nav>\n'+
'<ul id="navi">\n'+
' <li><a href="/utsukushitoilet/">TOP</a></li>\n'+
' <li><a href="/utsukushitoilet/situation/">トイレがある施設</a></li>\n'+
' <li><a href="/utsukushitoilet/sign/">トイレの案内表示</a></li>\n'+
' <li><a href="/utsukushitoilet/type/">トイレの種類と使い方</a></li>\n'+
' <li><a href="/utsukushitoilet/howtouse/">トイレ内器具の使い方</a></li>\n'+
' <li><a href="/utsukushitoilet/latest/">日本の最新トイレ</a></li>\n'+
'</ul><div class="clear"></div>\n'+
'</nav>\n'+
'</header>\n'
);
}
/* 共通 ページメニュー　フッタ */
function includeFoot() {
document.write(
'<div class="pagetop">\n'+
'<a href="#head_area">PAGE TOP</a>\n'+
'</div>\n'+
'<footer>\n'+
'<div id="footer_div1">\n'+
'<div id="footer_menu1">\n'+
'<strong>日本のトイレ事情</strong>\n'+
'<ul>\n'+
' <li><a href="/utsukushitoilet/situation/">トイレがある施設</a></li>\n'+
' <li><a href="/utsukushitoilet/sign/">トイレの案内表示</a></li>\n'+
' <li><a href="/utsukushitoilet/type/">トイレの種類と使い方</a></li>\n'+
' <li><a href="/utsukushitoilet/howtouse/">トイレ内の器具の使い方</a></li>\n'+
'</ul>\n'+
'</div>\n'+
'<div id="footer_menu2">\n'+
'<strong>日本の最新トイレ</strong>\n'+
'<ul>\n'+
' <li><a href="/utsukushitoilet/latest/#_01">温水洗浄便座</a></li>\n'+
' <li><a href="/utsukushitoilet/latest/02.html#_02">ローシルエット便器</a></li>\n'+
' <li><a href="/utsukushitoilet/latest/02.html#_03">節水機器</a></li>\n'+
' <li><a href="/utsukushitoilet/latest/02.html#_04">子ども連れ配慮機器</a></li>\n'+
'</ul>\n'+
'</div>\n'+
'<div id="footer_banner">\n'+
'<ul>\n'+
' <li class="line"><a href="http://www.sanitary-net.com/" target="_blank"><img src="/utsukushitoilet/shared/images/bnr_toiletnavi.gif" alt="トイレナビ"></a></li>\n'+
' <li class="line"><a href="http://www.mlit.go.jp/kankocho/" target="_blank"><img src="/utsukushitoilet/shared/images/bnr_kanko.gif" alt="観光庁"></a></li>\n'+
' <li class="line"><a href="http://www.j-hotel.or.jp/" target="_blank"><img src="/utsukushitoilet/shared/images/bnr_japanhotel.gif" alt="日本ホテル協会"></a></li>\n'+
' <li class="noline"><a href="http://www.kankou-fa.jp/" target="_blank"><img src="/utsukushitoilet/shared/images/bnr_kokusaikankoushisetu.jpg" alt="国際観光施設協会"></a></li>\n'+
' <li class="noline"><a href="http://www.yadonet.ne.jp/" target="_blank"><img src="/utsukushitoilet/shared/images/bnr_yadonet.gif" alt="全国旅館ホテル衛生同業組合連合会"></a></li>\n'+
'</ul>\n'+
'</div><div class="clear"></div>\n'+
'</div>\n'+
'<div id="footer_div2">\n'+
'<div id="footer_download">\n'+
'<strong>チラシ素材ダウンロードはこちら</strong>\n'+
'<ul>\n'+
' <li>ホテルや旅館のオーナーの方に活用いただくチラシデータを作成しました。訪日外国人に向けた、日本のトイレの使い方などを紹介しています。<br>客室に設置いただくなど、是非ご活用ください。</li>\n'+
' <li><a href="http://www.sanitary-net.com/news/news963" target="_blank"><img src="/utsukushitoilet/shared/images/btn_flyler.gif" alt="チラシ素材ダウンロード"></a></li>\n'+
'</ul>\n'+
'</div>\n'+
'<div id="footer_link">\n'+
'<strong>リンクについて</strong>\n'+
'<ul>\n'+
' <li>当サイトはリンクフリーです<br>\n'+
'リンクをご希望の方は<br>\n'+
'このロゴをお使い下さい。</li>\n'+
' <li><img src="/utsukushitoilet/shared/images/bnr_utsukushi.gif" alt="NIPPON UTSUKUSHI TOILET"></li>\n'+
'</ul>\n'+
'</div><div class="clear"></div>\n'+
'</div>\n'+
'<div id="copyright">\n'+
'Copyright &copy; 一般社団法人日本レストルーム工業会\n'+
'</div>\n'+
'</footer>\n'
);
}
// ユニバーサルアナリティクス
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-50037685-2', 'auto');
ga('require', 'displayfeatures');
ga('send', 'pageview');
utsukushitoilet/shared/js/common_parts_b.js 0 → 100644
/* 共通 ページメニュー　ヘッダ */
function includeHead(tag) {
document.write(
'<div>\n'+
'
'</div>\n'
);
}
/* 共通 ページメニュー　フッタ */
function includeFoot() {
document.write(
'<div class="pagetop">\n'+
'<a href="#head_area">PAGE TOP</a>\n'+
'</div>\n'+
'<footer>\n'+
'<div id="footer_div1">\n'+
'<div id="footer_menu1">\n'+
'<strong>日本のトイレ事情</strong>\n'+
'<ul>\n'+
' <li><a href="/utsukushitoilet/situation/">トイレがある施設</a></li>\n'+
' <li><a href="/utsukushitoilet/sign/">トイレの案内表示</a></li>\n'+
' <li><a href="/utsukushitoilet/type/">トイレの種類と使い方</a></li>\n'+
' <li><a href="/utsukushitoilet/howtouse/">トイレ内の器具の使い方</a></li>\n'+
'</ul>\n'+
'</div>\n'+
'<div id="footer_menu2">\n'+
'<strong>日本の最新トイレ</strong>\n'+
'<ul>\n'+
' <li><a href="/utsukushitoilet/latest/#_01">温水洗浄便座</a></li>\n'+
' <li><a href="/utsukushitoilet/latest/02.html#_02">ローシルエット便器</a></li>\n'+
' <li><a href="/utsukushitoilet/latest/02.html#_03">節水機器</a></li>\n'+
' <li><a href="/utsukushitoilet/latest/02.html#_04">子ども連れ配慮機器</a></li>\n'+
'</ul>\n'+
'</div>\n'+
'<div id="footer_banner">\n'+
'<ul>\n'+
' <li class="line"><a href="http://www.sanitary-net.com/" target="_blank"><img src="/utsukushitoilet/shared/images/bnr_toiletnavi.gif" alt="トイレナビ"></a></li>\n'+
' <li class="line"><a href="http://www.mlit.go.jp/kankocho/" target="_blank"><img src="/utsukushitoilet/shared/images/bnr_kanko.gif" alt="観光庁"></a></li>\n'+
' <li class="line"><a href="http://www.j-hotel.or.jp/" target="_blank"><img src="/utsukushitoilet/shared/images/bnr_japanhotel.gif" alt="日本ホテル協会"></a></li>\n'+
' <li class="noline"><a href="http://www.kankou-fa.jp/" target="_blank"><img src="/utsukushitoilet/shared/images/bnr_kokusaikankoushisetu.jpg" alt="国際観光施設協会"></a></li>\n'+
' <li class="noline"><a href="http://www.yadonet.ne.jp/" target="_blank"><img src="/utsukushitoilet/shared/images/bnr_yadonet.gif" alt="全国旅館ホテル衛生同業組合連合会"></a></li>\n'+
'</ul>\n'+
'</div><div class="clear"></div>\n'+
'</div>\n'+
'<div id="footer_div2">\n'+
'<div id="footer_download">\n'+
'<strong>チラシ素材ダウンロードはこちら</strong>\n'+
'<ul>\n'+
' <li>ホテルや旅館のオーナーの方に活用いただくチラシデータを作成しました。訪日外国人に向けた、日本のトイレの使い方などを紹介しています。<br>客室に設置いただくなど、是非ご活用ください。</li>\n'+
' <li><a href="http://www.sanitary-net.com/news/news963" target="_blank"><img src="/utsukushitoilet/shared/images/btn_flyler.gif" alt="チラシ素材ダウンロード"></a></li>\n'+
'</ul>\n'+
'</div>\n'+
'<div id="footer_link">\n'+
'<strong>リンクについて</strong>\n'+
'<ul>\n'+
' <li>当サイトはリンクフリーです<br>\n'+
'リンクをご希望の方は<br>\n'+
'このロゴをお使い下さい。</li>\n'+
' <li><img src="/utsukushitoilet/shared/images/bnr_utsukushi.gif" alt="NIPPON UTSUKUSHI TOILET"></li>\n'+
'</ul>\n'+
'</div><div class="clear"></div>\n'+
'</div>\n'+
'<div id="copyright">\n'+
'Copyright &copy; 一般社団法人日本レストルーム工業会\n'+
'</div>\n'+
'</footer>\n'
);
}
// ユニバーサルアナリティクス
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-50037685-2', 'auto');
ga('require', 'displayfeatures');
ga('send', 'pageview');
utsukushitoilet/sign/index2.html 0 → 100644
<!DOCTYPE html>
<html lang="ja" prefix="og: http://ogp.me/ns#">
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta charset="UTF-8">
<meta name="keywords" content="">
<meta name="description" content="">
<title>トイレの案内表示 - NIPPON UTSUKUSHI TOILET</title>
<link rel="stylesheet" href="/utsukushitoilet/shared/css/reset.css" type="text/css" media="all">
<link rel="stylesheet" href="/utsukushitoilet/shared/css/common.css" type="text/css" media="all">
<link rel="stylesheet" href="css/style.css" type="text/css" media="all">
<script type="text/javascript" src="/utsukushitoilet/shared/js/jquery.js"></script>
<script type="text/javascript" src="/utsukushitoilet/shared/js/jquery.plugin.js"></script>
<script type="text/javascript" src="/utsukushitoilet/shared/js/common.js"></script>
<script type="text/javascript" src="/utsukushitoilet/shared/js/common_parts.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#facility li strong").autoHeight();
});
</script>
</head>
<body class="second"id="sign">
<!-- google analytics -->
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-560401-9']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<!-- //google analytics -->
<script type="text/javascript" >
<!--
includeHead('div');
//-->
</script>
<noscript>
<p>当サイトはJavaScriptをonにしてご覧ください。</p>
</noscript>
<section id="guide" class="first">
<div class="block">
<h1><span>日本のトイレ事情</span>トイレの案内表示</h1>
<p>
日本では、トイレを表す言葉が多数存在します。<br>
直接的な表現もあれば、間接的な表現もあります。設置場所・TPOにあわせて使い分けしています。<br>
例えば、食事中に「トイレ」と直接的な表現をするよりも「化粧室」と表現した方が、品があるということです。<br>
迷わないために、様々なサインがあることを知ってください。<br>
代表的な表示サインの一例です。
</p>
<h2>文字</h2>
<div class="guide_eg">
<ul id="letter">
<li><img src="images/letter01.gif" alt="お手洗い"></li>
<li><img src="images/letter02.gif" alt="お手洗"></li>
<li><img src="images/letter03.gif" alt="御手洗"></li>
<li><img src="images/letter04.gif" alt="洗面所"></li>
<li><img src="images/letter05.gif" alt="化粧室"></li>
<li><img src="images/letter06.gif" alt="Toilet"></li>
<li><img src="images/letter07.gif" alt="lavatory"></li>
<li><img src="images/letter08.gif" alt="W.C"></li>
<li><img src="images/letter09.gif" alt="RestRoom"></li>
<li><img src="images/letter10.gif" alt="厠"></li>
</ul>
</div>
<h2>サイン</h2>
<div class="guide_eg">
<ul id="sign">
<li><img src="images/sign01.gif" alt=""></li>
<li><img src="images/sign02.gif" alt=""></li>
<li><img src="images/sign03.gif" alt="TOILET"></li>
<li><img src="images/sign04.gif" alt="化粧室"></li>
</ul>
</div>
</div>
</section>
<script type="text/javascript" >
<!--
includeFoot();
//-->
</script>
</body>
</html>
\ No newline at end of file
utsukushitoilet/sign/index_191023.html 0 → 100644
<!DOCTYPE html>
<html lang="ja" prefix="og: http://ogp.me/ns#">
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta charset="UTF-8">
<meta name="keywords" content="">
<meta name="description" content="">
<title>トイレの案内表示 - NIPPON UTSUKUSHI TOILET</title>
<link rel="stylesheet" href="/utsukushitoilet/shared/css/reset.css" type="text/css" media="all">
<link rel="stylesheet" href="/utsukushitoilet/shared/css/common_b.css" type="text/css" media="all">
<link rel="stylesheet" href="css/style.css" type="text/css" media="all">
<script type="text/javascript" src="/utsukushitoilet/shared/js/jquery.js"></script>
<script type="text/javascript" src="/utsukushitoilet/shared/js/jquery.plugin.js"></script>
<script type="text/javascript" src="/utsukushitoilet/shared/js/common.js"></script>
<script type="text/javascript" src="/utsukushitoilet/shared/js/common_parts.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#facility li strong").autoHeight();
});
</script>
</head>
<body class="second"id="sign">
<!-- google analytics -->
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-560401-9']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<!-- //google analytics -->
<section id="guide" class="first">
<div class="block">
<h1><span>日本のトイレ事情</span>トイレの案内表示</h1>
<p>
日本では、トイレを表す言葉が多数存在します。<br>
直接的な表現もあれば、間接的な表現もあります。設置場所・TPOにあわせて使い分けしています。<br>
例えば、食事中に「トイレ」と直接的な表現をするよりも「化粧室」と表現した方が、品があるということです。<br>
迷わないために、様々なサインがあることを知ってください。<br>
代表的な表示サインの一例です。
</p>
<h2>文字</h2>
<div class="guide_eg">
<ul id="letter">
<li><img src="images/letter01.gif" alt="お手洗い"></li>
<li><img src="images/letter02.gif" alt="お手洗"></li>
<li><img src="images/letter03.gif" alt="御手洗"></li>
<li><img src="images/letter04.gif" alt="洗面所"></li>
<li><img src="images/letter05.gif" alt="化粧室"></li>
<li><img src="images/letter06.gif" alt="Toilet"></li>
<li><img src="images/letter07.gif" alt="lavatory"></li>
<li><img src="images/letter08.gif" alt="W.C"></li>
<li><img src="images/letter09.gif" alt="RestRoom"></li>
<li><img src="images/letter10.gif" alt="厠"></li>
</ul>
</div>
<h2>サイン</h2>
<div class="guide_eg">
<ul id="sign">
<li><img src="images/sign01.gif" alt=""></li>
<li><img src="images/sign02.gif" alt=""></li>
<li><img src="images/sign03.gif" alt="TOILET"></li>
<li><img src="images/sign04.gif" alt="化粧室"></li>
</ul>
</div>
</div>
</section>
<script type="text/javascript" >
<!--
includeFoot();
//-->
</script>
</body>
</html>
\ No newline at end of file
utsukushitoilet/situation/index2.html 0 → 100644
<!DOCTYPE html>
<html lang="ja" prefix="og: http://ogp.me/ns#">
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta charset="UTF-8">
<meta name="keywords" content="">
<meta name="description" content="">
<title>トイレがある施設 - NIPPON UTSUKUSHI TOILET</title>
<link rel="stylesheet" href="/utsukushitoilet/shared/css/reset.css" type="text/css" media="all">
<link rel="stylesheet" href="/utsukushitoilet/shared/css/common.css" type="text/css" media="all">
<link rel="stylesheet" href="css/style.css" type="text/css" media="all">
<script type="text/javascript" src="/utsukushitoilet/shared/js/jquery.js"></script>
<script type="text/javascript" src="/utsukushitoilet/shared/js/jquery.plugin.js"></script>
<script type="text/javascript" src="/utsukushitoilet/shared/js/common.js"></script>
<script type="text/javascript" src="/utsukushitoilet/shared/js/common_parts.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#facility li strong").autoHeight();
});
</script>
</head>
<body class="second" id="situation">
<!-- google analytics -->
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-560401-9']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<!-- //google analytics -->
<script type="text/javascript" >
<!--
includeHead('div');
//-->
</script>
<noscript>
<p>当サイトはJavaScriptをonにしてご覧ください。</p>
</noscript>
<section id="facility" class="first">
<div class="block">
<h1><span>日本のトイレ事情</span>トイレがある施設</h1>
<p>訪問先のいろいろな場所にトイレがあります。<br>
それぞれの施設にあわせ、おもてなしトイレがあります。<br>
上記の施設以外にも、たとえば新幹線の中や長距離バスの中にもトイレが設置されていますので、<br>
遠くても安心して観光地へ行くことができます。<br>
※施設により、利用許可を求められることがありますので、<br>
利用前にひとこと従業員の方に声をかけることをお勧めします。</p>
<ul>
<li><div><img src="images/facility01.jpg" alt=""><strong>空港</strong><img src="images/facility02.jpg" alt=""></div></li>
<li><div><img src="images/facility03.jpg" alt=""><strong>駅</strong><img src="images/facility04.jpg" alt=""></div></li>
<li><div><img src="images/facility05.jpg" alt=""><strong>宿泊施設</strong><img src="images/facility06.jpg" alt=""></div></li>
<li><div><img src="images/facility07.jpg" alt=""><strong>コンビニエンスストア</strong><img src="images/facility08.jpg" alt=""></div></li>
<li><div><img src="images/facility09.jpg" alt=""><strong>商業施設</strong><img src="images/facility10.jpg" alt=""></div></li>
<li><div><img src="images/facility11.jpg" alt=""><strong>公園</strong><img src="images/facility12.jpg" alt=""></div></li>
</ul><div class="clear"></div>
</div>
<div class="point">
<div>
<h2><img src="/utsukushitoilet/shared/images/point.gif" alt="point!"></h2>
<p>
トイレットペーパーはほとんどのトイレ内に設置されていますが、
トイレットペーパーがなくなっている場合もあります。<br>
<em>水に流せるティッシュペーパー</em>等を持ち歩かれることをお勧めします。<br>
水に流せるトイレットペーパーはコンビニエンスストア・スーパーマーケット等で購入できます。
</p><div class="clear"></div>
</div>
</div>
<div class="block" id="cleaning">
<h2>清掃もおもてなし</h2>
<p>
公共施設のトイレは、皆さんに気持ちよくトイレを使用いただきたい
「おもてなし」の心で、清掃業者によって日々清掃されています。<br>
清掃業者は、トイレが使用中でも誰もいないかのように清掃を行います。<br>
びっくりするかもしれませんが、日本のトイレがキレイに保たれているのは、
こういった日常清掃によるものです。<br>
トイレのどこかに点検表が貼ってあるはずです。<br>
もし見ることができたら、1日に何回清掃点検されているか見ていただきたいです。
</p>
</div>
</section>
<script type="text/javascript" >
<!--
includeFoot();
//-->
</script>
</body>
</html>
\ No newline at end of file
utsukushitoilet/situation/index_191023.html 0 → 100644
<!DOCTYPE html>
<html lang="ja" prefix="og: http://ogp.me/ns#">
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta charset="UTF-8">
<meta name="keywords" content="">
<meta name="description" content="">
<title>トイレがある施設 - NIPPON UTSUKUSHI TOILET</title>
<link rel="stylesheet" href="/utsukushitoilet/shared/css/reset.css" type="text/css" media="all">
<link rel="stylesheet" href="/utsukushitoilet/shared/css/common_b.css" type="text/css" media="all">
<link rel="stylesheet" href="css/style.css" type="text/css" media="all">
<script type="text/javascript" src="/utsukushitoilet/shared/js/jquery.js"></script>
<script type="text/javascript" src="/utsukushitoilet/shared/js/jquery.plugin.js"></script>
<script type="text/javascript" src="/utsukushitoilet/shared/js/common.js"></script>
<script type="text/javascript" src="/utsukushitoilet/shared/js/common_parts.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#facility li strong").autoHeight();
});
</script>
</head>
<body class="second" id="situation">
<!-- google analytics -->
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-560401-9']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<!-- //google analytics -->
<section id="facility" class="first">
<div class="block">
<h1><span>日本のトイレ事情</span>トイレがある施設</h1>
<p>訪問先のいろいろな場所にトイレがあります。<br>
それぞれの施設にあわせ、おもてなしトイレがあります。<br>
上記の施設以外にも、たとえば新幹線の中や長距離バスの中にもトイレが設置されていますので、<br>
遠くても安心して観光地へ行くことができます。<br>
※施設により、利用許可を求められることがありますので、<br>
利用前にひとこと従業員の方に声をかけることをお勧めします。</p>
<ul>
<li><div><img src="images/facility01.jpg" alt=""><strong>空港</strong><img src="images/facility02.jpg" alt=""></div></li>
<li><div><img src="images/facility03.jpg" alt=""><strong>駅</strong><img src="images/facility04.jpg" alt=""></div></li>
<li><div><img src="images/facility05.jpg" alt=""><strong>宿泊施設</strong><img src="images/facility06.jpg" alt=""></div></li>
<li><div><img src="images/facility07.jpg" alt=""><strong>コンビニエンスストア</strong><img src="images/facility08.jpg" alt=""></div></li>
<li><div><img src="images/facility09.jpg" alt=""><strong>商業施設</strong><img src="images/facility10.jpg" alt=""></div></li>
<li><div><img src="images/facility11.jpg" alt=""><strong>公園</strong><img src="images/facility12.jpg" alt=""></div></li>
</ul><div class="clear"></div>
</div>
<div class="point">
<div>
<h2><img src="/utsukushitoilet/shared/images/point.gif" alt="point!"></h2>
<p>
トイレットペーパーはほとんどのトイレ内に設置されていますが、
トイレットペーパーがなくなっている場合もあります。<br>
<em>水に流せるティッシュペーパー</em>等を持ち歩かれることをお勧めします。<br>
水に流せるトイレットペーパーはコンビニエンスストア・スーパーマーケット等で購入できます。
</p><div class="clear"></div>
</div>
</div>
<div class="block" id="cleaning">
<h2>清掃もおもてなし</h2>
<p>
公共施設のトイレは、皆さんに気持ちよくトイレを使用いただきたい
「おもてなし」の心で、清掃業者によって日々清掃されています。<br>
清掃業者は、トイレが使用中でも誰もいないかのように清掃を行います。<br>
びっくりするかもしれませんが、日本のトイレがキレイに保たれているのは、
こういった日常清掃によるものです。<br>
トイレのどこかに点検表が貼ってあるはずです。<br>
もし見ることができたら、1日に何回清掃点検されているか見ていただきたいです。
</p>
</div>
</section>
<script type="text/javascript" >
<!--
includeFoot();
//-->
</script>
</body>
</html>
\ No newline at end of file
utsukushitoilet/type/index2.html 0 → 100644
<!DOCTYPE html>
<html lang="ja" prefix="og: http://ogp.me/ns#">
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta charset="UTF-8">
<meta name="keywords" content="">
<meta name="description" content="">
<title>トイレの種類と使い方 - NIPPON UTSUKUSHI TOILET</title>
<link rel="stylesheet" href="/utsukushitoilet/shared/css/reset.css" type="text/css" media="all">
<link rel="stylesheet" href="/utsukushitoilet/shared/css/common.css" type="text/css" media="all">
<link rel="stylesheet" href="css/style.css" type="text/css" media="all">
<script type="text/javascript" src="/utsukushitoilet/shared/js/jquery.js"></script>
<script type="text/javascript" src="/utsukushitoilet/shared/js/jquery.plugin.js"></script>
<script type="text/javascript" src="/utsukushitoilet/shared/js/common.js"></script>
<script type="text/javascript" src="/utsukushitoilet/shared/js/common_parts.js"></script>
<script type="text/javascript">
$(document).ready(function(){
if ($(window).width() > 640) {
$("#toilet li").autoHeight();
}
});
</script>
</head>
<body class="second" id="type">
<!-- google analytics -->
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-560401-9']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<!-- //google analytics -->
<script type="text/javascript" >
<!--
includeHead('div');
//-->
</script>
<noscript>
<p>当サイトはJavaScriptをonにしてご覧ください。</p>
</noscript>
<section id="kind" class="first">
<div class="block">
<h1><span>日本のトイレ事情</span>トイレの種類と使い方</h1>
<p>基本的には和式トイレ、洋式トイレ、多機能トイレの3種類があり、場所により様式が異なります。<br>
和式は観光地などに多く、現在は利用者のニーズをもとに洋式トイレ化が進められています。
</p>
<h2 class="line"><span>01</span>公共のトイレ</h2>
<ul class="toilet 01">
<li><h3>和式トイレ</h3><img src="images/type01_washiki01.jpg" alt=""><p>日本に昔からある便器をまたいで使用するトイレです。公共のトイレでは、設置されているところがあります。</p><div><span>使用方法</span><img src="images/type01_washiki02.gif" alt=""></div></li>
<li><h3>洋式トイレ</h3><img src="images/type01_yoshiki01.jpg" alt=""><p>現在、もっとも一般的なトイレです。</p><div><span>使用方法</span><img src="images/type01_yoshiki02.gif" alt=""></div></li>
</ul>
<ul class="toilet 01">
<li><h3>多機能トイレ</h3><img src="images/type01_takino01.jpg" alt=""><p>車いす使用者やオストメイトの方、乳幼児をお連れの方などを優先的に、いろいろな方にご使用いただくための広めのトイレです。高齢者など一般の方もご使用いただけます。</p><div><span>多機能トイレを表すサイン</span><img src="images/type01_takino02.gif" alt=""></div></li>
<li><h3>小便器</h3><img src="images/type01_urinal.jpg" alt=""><p>＊＊＊＊＊＊＊</p><div><span>フラッシュバルブと自動洗浄の使い方</span><img src="images/type01_urinal02.gif" alt=""></div></li>
</ul>
<ul class="toilet 01">
<li><h3>自動水栓</h3><img src="images/type01_autofaucet.jpg" alt=""><p>＊＊＊＊＊＊</p><div><span>自動水栓とオートソープの使い方</span><img src="images/type01_autofaucet02.gif" alt=""></div></li>
<li><h3>ハンドドライヤー</h3><img src="images/type01_handdryer.jpg" alt=""><p>＊＊＊＊＊＊＊</p><div><span>コンパクトタイプとロングタイプの使い方</span><img src="images/type01_handdryer02.gif" alt=""></div></li>
</ul>
<h2 class="line"><span>02</span>宿泊施設（客室内）のトイレ</h2>
<ul>
<li><h3>セパレート</h3><img src="images/type02_separate.jpg" alt=""><p>トイレと浴室がそれぞれ独立した空間に設置されています。</p></li>
<li><h3>ユニットバス</h3><img src="images/type02_unit.jpg" alt=""><p>トイレと洗面・浴室が同一空間に設置されています。</p></li>
</ul>
</div>
<div class="point">
<div>
<h2><img src="/utsukushitoilet/shared/images/point.gif" alt="point!"></h2>
<p>
ホテル浴室利用時の注意点<br>
ホテルの浴室には、シャワーが設置されていますが、使用場所はバスタブの中だけに限られています。<br>
また、浴室の扉を開けたままで使用すると火災報知機が誤作動する原因にもなります。<br>
シャワー使用時は、浴室の扉を必ず閉めてください。シャワーカーテンが付いて場合は、
便器まわりを濡らさないように、カーテンを閉めてシャワーをお使いください。
</p><div class="clear"></div>
</div>
</div>
</section>
<script type="text/javascript" >
<!--
includeFoot();
//-->
</script>
</body>
</html>
\ No newline at end of file
utsukushitoilet/type/index_191023.html 0 → 100644
<!DOCTYPE html>
<html lang="ja" prefix="og: http://ogp.me/ns#">
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta charset="UTF-8">
<meta name="keywords" content="">
<meta name="description" content="">
<title>トイレの種類と使い方 - NIPPON UTSUKUSHI TOILET</title>
<link rel="stylesheet" href="/utsukushitoilet/shared/css/reset.css" type="text/css" media="all">
<link rel="stylesheet" href="/utsukushitoilet/shared/css/common_b.css" type="text/css" media="all">
<link rel="stylesheet" href="css/style.css" type="text/css" media="all">
<script type="text/javascript" src="/utsukushitoilet/shared/js/jquery.js"></script>
<script type="text/javascript" src="/utsukushitoilet/shared/js/jquery.plugin.js"></script>
<script type="text/javascript" src="/utsukushitoilet/shared/js/common.js"></script>
<script type="text/javascript" src="/utsukushitoilet/shared/js/common_parts.js"></script>
<script type="text/javascript">
$(document).ready(function(){
if ($(window).width() > 640) {
$("#toilet li").autoHeight();
}
});
</script>
</head>
<body class="second" id="type">
<!-- google analytics -->
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-560401-9']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<!-- //google analytics -->
<section id="kind" class="first">
<div class="block">
<h1><span>日本のトイレ事情</span>トイレの種類と使い方</h1>
<p>基本的には和式トイレ、洋式トイレ、多機能トイレの3種類があり、場所により様式が異なります。<br>
和式は観光地などに多く、現在は利用者のニーズをもとに洋式トイレ化が進められています。
</p>
<h2 class="line"><span>01</span>公共のトイレ</h2>
<ul class="toilet 01">
<li><h3>和式トイレ</h3><img src="images/type01_washiki01.jpg" alt=""><p>日本に昔からある便器をまたいで使用するトイレです。公共のトイレでは、設置されているところがあります。</p><div><span>使用方法</span><img src="images/type01_washiki02.gif" alt=""></div></li>
<li><h3>洋式トイレ</h3><img src="images/type01_yoshiki01.jpg" alt=""><p>現在、もっとも一般的なトイレです。</p><div><span>使用方法</span><img src="images/type01_yoshiki02.gif" alt=""></div></li>
</ul>
<ul class="toilet 01">
<li><h3>多機能トイレ</h3><img src="images/type01_takino01.jpg" alt=""><p>車いす使用者やオストメイトの方、乳幼児をお連れの方などを優先的に、いろいろな方にご使用いただくための広めのトイレです。高齢者など一般の方もご使用いただけます。</p><div><span>多機能トイレを表すサイン</span><img src="images/type01_takino02.gif" alt=""></div></li>
<li><h3>小便器</h3><img src="images/type01_urinal.jpg" alt=""><p>洗浄ボタンに手を触れることなく、自動で洗浄してくれるので、衛生的で快適です。</p><div><span>フラッシュバルブと自動洗浄の使い方</span><img src="images/type01_urinal02.gif" alt=""></div></li>
</ul>
<ul class="toilet 01">
<li><h3>自動水栓</h3><img src="images/type01_autofaucet.jpg" alt=""><p>水栓に手を触れることなく、自動で石鹸や水が出ますので、衛生的で快適です。</p><div><span>自動水栓とオートソープの使い方</span><img src="images/type01_autofaucet02.gif" alt=""></div></li>
<li><h3>ハンドドライヤー</h3><img src="images/type01_handdryer.jpg" alt=""><p>吹き出し口に手を差し込むだけで、手を乾かすことができます。非接触操作のため衛生的で、ペーパータオル使用時のゴミ処理負担の削減や環境保護が図れます。</p><div><span>コンパクトタイプとロングタイプの使い方</span><img src="images/type01_handdryer02.gif" alt=""></div></li>
</ul>
<h2 class="line"><span>02</span>宿泊施設（客室内）のトイレ</h2>
<ul>
<li><h3>セパレート</h3><img src="images/type02_separate.jpg" alt=""><p>トイレと浴室がそれぞれ独立した空間に設置されています。</p></li>
<li><h3>ユニットバス</h3><img src="images/type02_unit.jpg" alt=""><p>トイレと洗面・浴室が同一空間に設置されています。</p></li>
</ul>
</div>
<div class="point">
<div>
<h2><img src="/utsukushitoilet/shared/images/point.gif" alt="point!"></h2>
<p>
ホテル浴室利用時の注意点<br>
ホテルの浴室には、シャワーが設置されていますが、使用場所はバスタブの中だけに限られています。<br>
また、浴室の扉を開けたままで使用すると火災報知機が誤作動する原因にもなります。<br>
シャワー使用時は、浴室の扉を必ず閉めてください。シャワーカーテンが付いて場合は、
便器まわりを濡らさないように、カーテンを閉めてシャワーをお使いください。
</p><div class="clear"></div>
</div>
</div>
</section>
<script type="text/javascript" >
<!--
includeFoot();
//-->
</script>
</body>
</html>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment