Skip to content

sora / sanitary-net

Go to a project
Commit 73118429 by o.kimura
Options

T123

parent 3b501069
Expand all
Inline Side-by-side
Showing with 371 additions and 12 deletions
index.html
......@@ -218,8 +218,8 @@
<p><a href="https://ondankataisaku.env.go.jp/coolchoice/" target="_blank"><img src="https://www.sanitary-net.com/cms/wp-content/uploads/2018/11/bnr_coolchoice_top.jpg" alt="（一社）日本レストルーム工業会は「COOL CHOICE」に賛同しています" width="725" height="89" /></a></p>
</div>
<div class="right">
<p><a href="https://sanitary-net-annex.com/contest/" target="_brank"><img src="/shared/images/mv_pc.png" width="222" height="80" alt="水のある暮らし" /></a></p>
<p><a href="https://www.sanitary-net.com/news/news1899"><img src="/shared/images/ecohome.png" width="222" height="80" alt="子育てエコホーム支援事業" /></a></p>
<p><a href="https://sanitary-net-annex.com/contest/" target="_brank"><img src="/images/banner/mizunoarukurashi.png" width="222" height="80" alt="水のある暮らし" /></a></p>
<p><a href="https://www.sanitary-net.com/news/news1899"><img src="/images/banner/ecohome.png" width="222" height="80" alt="子育てエコホーム支援事業" /></a></p>
<p><a href="/episode-cp/"><img src="images/banner/222_80.png" alt="温水洗浄便座出荷台数1億台達成について" /></a></p>
<p><a href="/trend/pictogram/pictogram01.html"><img src="images/banner/banner_pictgram.jpg" alt="トイレ操作系標準ピクトグラム" width="222" height="80" /></a></p>
<p><a href="/trend/study.html"><img src="images/banner/banner_interview.png" alt="専門医に訊く（女性のための）温水洗浄便座の適切な使い方" width="222" height="80" /></a></p>
......
utsukushitoilet/howtouse/css/style.css
......@@ -11,6 +11,7 @@ h2.line {
line-height: 1.4;
clear: both;
}
h2.line span {
color: #e9573e;
font-weight: normal;
......@@ -20,18 +21,22 @@ h2.line span {
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%;
......@@ -40,32 +45,39 @@ h3 {
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;
......@@ -73,18 +85,21 @@ h3 {
font-size: 14px;
}
#use .box{
#use .box {
overflow: hidden;
}
#use .left{
#use .left {
text-align: left;
}
#use .left02{
#use .left02 {
text-align: left;
padding: 40px 0;
width: 76%;
float: left;
}
#use .right {
text-align: left;
padding: 40px 0;
......@@ -95,17 +110,25 @@ h3 {
border: 1px solid #e1e0db;
text-align: center;
}
#use .right span{
#use .right.sq {
width:
}
#use .right span {
display: block;
margin-top: 10px;
}
#use h3 {
text-align: left;
padding-bottom: 10px;
}
#use ul {
margin-bottom: 20px;
}
#use li {
display: block;
width: 31.3%;
......@@ -114,9 +137,11 @@ h3 {
margin-left: 3%;
margin-bottom: 40px;
}
#use li:first-child {
margin-left: 0;
}
#use li img {
width: 100%;
}
......@@ -124,41 +149,194 @@ h3 {
#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;
}
/* 20240321 */
.mt30 {
margin-top: 30px;
}
.second .point {
margin-bottom: 150px;
}
.second .point > div.use {
width: 880px;
margin: 30px auto 0 auto;
padding: 30px 0 0 0;
border: 3px #ec6b55 double;
position: relative;
}
.second .point > div.pict {
width: 780px;
margin: 30px 0 0 auto;
padding: 30px 5px 0 30px;
border: 3px #ec6b55 double;
position: relative;
}
.under_menu_box.manage {
margin-bottom: 45px;
}
.under_menu_box.manage a {
color: #e9573e;
background-color: transparent;
font-size: 120%;
}
.under_menu_box.manage a::after {
content: "";
display: inline-block;
width: 1em;
height: 1em;
top: 3px;
margin-left: 8px;
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;
position: relative;
}
.under_menu_box.manage a:hover {
text-decoration: underline;
}
.second .block {
position: relative;
}
.flx_box {
display: flex;
height: 340px;
}
.lead_btm {
position: absolute;
bottom: -38px;
justify-content: center;
left: 20%;
display: flex;
}
.lead_btm2 {
position: absolute;
bottom: 110px;
justify-content: center;
left: 22%;
display: flex;
}
.point .side {
width: 200px !important;
border: none !important
}
.pict_inner {
width: 33%;
float: left;
text-align: center;
}
.pict_inner_2 {
width: 45%;
float: left;
text-align: center;
margin-right: 5px;
}
.pict_inner_3 {
width: 45%;
float: left;
text-align: center;
margin-left: 5px;
}
.ft120 {
font-size: 120%;
}
@media screen and (max-width:640px) {
.second .point > div.use {
width: 90%;
margin: 0 auto;
padding: 10px 10px 0px 10px;
border: 3px #ec6b55 double;
position: relative;
}
.second .point {
margin-bottom: 400px;
}
.under_menu_box.manage a {
padding: 0;
}
.second .point > div.pict {
display: table-cell;
}
.flx_box {
display: block;
}
.lead_btm {
position: absolute;
bottom: -330px;
justify-content: center;
left: 0;
display: flex;
}
.lead_btm2{
left: auto;
bottom: 160px;
}
.point .side{
width: auto!important;
}
}
/* 0-640px ----*/
@media screen and (max-width:640px){
@media screen and (max-width:640px) {
h2.line {
margin-left: 4%;
margin-right: 4%;
}
#kind li {
float: none;
display: block;
......@@ -166,25 +344,31 @@ h3 {
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;
......@@ -192,18 +376,23 @@ h3 {
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;
......@@ -211,24 +400,29 @@ h3 {
padding: 20px 0;
margin-bottom: 0;
}
.bisection div {
float: none;
width: inherit;
margin-bottom: 40px;
}
.bisection div img {
max-width: 578px;
}
#use .left02{
#use .left02 {
width: 92%;
float: none;
margin: auto;
}
#use .left.01{
#use .left.01 {
width: 100%;
float: none;
}
#use .right{
#use .right {
width: 90%;
margin: auto;
margin-top: 0;
......@@ -248,32 +442,39 @@ h3 {
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;
......@@ -281,7 +482,8 @@ h3 {
font-size: 14px;
padding: 10px 0;
}
@media screen and (max-width:640px){
@media screen and (max-width:640px) {
#kind ul#toilet li {
float: none;
display: block;
......@@ -289,25 +491,30 @@ h3 {
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{
#use span.point_txt01 {
display: block;
padding-left: 1em;
text-indent: -1em;
......@@ -318,6 +525,7 @@ h3 {
list-style: disc;
margin-bottom: 0;
}
#use .txt_list li {
display: list-item;
width: auto;
......
utsukushitoilet/howtouse/use.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>
<!-- Google Tag Manager -->
<script>
(function(w, d, s, l, i) {
w[l] = w[l] || [];
w[l].push({
'gtm.start': new Date().getTime(),
event: 'gtm.js'
});
var f = d.getElementsByTagName(s)[0],
j = d.createElement(s),
dl = l != 'dataLayer' ? '&l=' + l : '';
j.async = true;
j.src =
'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
f.parentNode.insertBefore(j, f);
})(window, document, 'script', 'dataLayer', 'GTM-N4F24ZD');
</script>
<!-- End Google Tag Manager -->
<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="">
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-N4F24ZD" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
<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>温水洗浄便座を使ってみましょう！</h1>
<p>トイレを利用した際は、おしりが洗えてきれいになる温水洗浄便座を使ってみましょう。</p>
<h2 class="line"><span>01</span>温水洗浄便座の使い方（その1）</h2>
<div class="box">
<div class="left02">
便座の横の操作パネルか、壁のリモコンで操作します。<br>
※操作は、必ず便座に座った状態で行ってください。<br>
※洗浄は、10～20秒間程度とし、洗いすぎに注意しましょう。
</div>
<p class="right sq"><img src="images/onsui.png" alt="" width="150" height="150"></p>
</div>
<div class="point flx_box">
<div class="side">
<img src="/utsukushitoilet/howtouse/images/point1.jpg" alt="point!" width="150" height="auto">
<img src="/utsukushitoilet/howtouse/images/point2.jpg" alt="point!" width="140" height="auto">
</div>
<div class="pict">
<h2><img src="/utsukushitoilet/shared/images/point.gif" alt="point!"></h2>
<div class="pict_inner">
<img src="/utsukushitoilet/howtouse/images/stop.png" width="100" height="auto"><br>
<p class="ft120"><b>洗浄ストップ</b></p>
<p>このボタンを押すと、おしり洗浄、ビデ洗浄が止まります</p>
</div>
<div class="pict_inner">
<img src="/utsukushitoilet/howtouse/images/wash.png" width="100" height="auto"><br>
<p class="ft120"><b>おしり洗浄</b></p>
<p>このボタンを押すと、温水でおしりを洗います</p>
</div>
<div class="pict_inner">
<img src="/utsukushitoilet/howtouse/images/bidet.png" width="100" height="auto"><br>
<p class="ft120"><b>ビデ洗浄</b></p>
<p>このボタンを押すと、温水で女性のデリケートゾーンを洗います</p>
</div>
<div class="clear"></div>
</div>
</div>
<p class="lead_btm">温水洗浄便座を使ったあとは、備え付けのトイレットペーパーでおしりの水滴をふき取ってください。</p>
</div>
<div class="block">
<p>温水は強さや位置が調整できるものがあります。</p>
<h2 class="line"><span>02</span>温水洗浄便座の使い方（その2）</h2>
<div class="box">
<div class="left02">
温水洗浄便座を利用している最中に、便座の横の操作パネルか、<br>壁のリモコンで操作します。
</div>
<p class="right sq"><img src="images/onsui.png" alt="" width="150" height="150"></p>
</div>
<div class="point flx_box">
<div class="side">
<img src="/utsukushitoilet/howtouse/images/point1.jpg" alt="point!" width="150" height="auto">
<img src="/utsukushitoilet/howtouse/images/point2.jpg" alt="point!" width="140" height="auto">
</div>
<div class="pict">
<h2><img src="/utsukushitoilet/shared/images/point.gif" alt="point!"></h2>
<div class="pict_inner_2">
<img src="/utsukushitoilet/howtouse/images/suisei.png" width="180" height="auto"><br><br>
<p>温水の強さが調整できます。お好みの強さでご利用ください。</p>
</div>
<div class="pict_inner_3">
<img src="/utsukushitoilet/howtouse/images/position.png" width="180" height="auto"><br><br>
<p>温水の出る位置を前後に調整できるものがあります。<br>
お好みの位置でご利用ください。</p>
</div>
<div class="clear"></div>
</div>
</div>
<div class="block">
<p class="lead_btm2">※製品によって、操作部の表示が異なるものがあります。</p>
</div>
</section>
<script type="text/javascript">
<!--
includeFoot();
//
-->
</script>
</body>
</html>
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