動画ページその１

66664ea9 · o.kimura · 0c3eabcb · 66664ea9 · 66664ea9 · 66664ea9
Commit 66664ea9 authored Jan 19, 2022 by o.kimura
Showing with 51 additions and 17 deletions
clean/css/parts.css
clean/public/images/02.jpg
clean/public/images/06.jpg
clean/public/images/07.jpg
clean/public/images/09.png
clean/public/images/11.jpg
clean/public/images/09.jpg → clean/public/images/14.jpg
clean/public/images/14.png → clean/public/images/15.png
clean/public/images/_02.jpg
clean/public/index.html
clean/public/mov/nozzle.png
shared/css/_parts.css
sp/shared/css/common.css
sp/shared/css/fonts/icomoon.svg
sp/shared/images/book.png
sp/shared/inc/header.php
--- a/clean/css/parts.css
+++ b/clean/css/parts.css
@@ -987,6 +987,16 @@ body#clean04 div#container div#contents div#main_contents div.content div.right0
 position: relative;
 }
+.font_conditioned .section .flex_wrapper div.max {
+ width: 100%;
+ padding: 15px;
+ position: relative;
+}
+.font_conditioned .section .flex_wrapper div.max span.notice {
+ color: #fb0000;
+}
 .font_conditioned .section .flex_wrapper div a.btn {
 display: inline-block;
 font-weight: 400;

--- a/clean/public/images/02.jpg
+++ b/clean/public/images/02.jpg
--- a/clean/public/images/06.jpg
+++ b/clean/public/images/06.jpg
--- a/clean/public/images/07.jpg
+++ b/clean/public/images/07.jpg
--- a/clean/public/images/09.png
+++ b/clean/public/images/09.png
--- a/clean/public/images/11.jpg
+++ b/clean/public/images/11.jpg
--- a/clean/public/images/09.jpg
+++ b/clean/public/images/09.jpg
--- a/clean/public/images/14.png
+++ b/clean/public/images/14.png
--- a/clean/public/images/_02.jpg
+++ b/clean/public/images/_02.jpg
--- a/clean/public/index.html
+++ b/clean/public/index.html
@@ -117,16 +117,15 @@
      <h4 class="label"><span>日常清掃・定期清掃</span></h4>
      <div class="content clearfix">
       <p class="normal">マニュアルに掲載されたトイレ清掃（日常清掃・定期清掃）の手順をご紹介します。<br>
-        温水洗浄便座のメーカーは複数あり、機種により清掃のための洗浄ノズルの出し・戻し方法や温水洗浄便座の脱着方法が異
+        温水洗浄便座のメーカーは複数あり、機種により清掃のための洗浄ノズルの出し・戻し方法や温水洗浄便座の脱着方法が異なります。清掃にあたっては、必ず当該機種の取扱説明書をご確認のうえ操作ください。<br>
-        なります。清掃にあたっては、必ず当該機種の取扱説明書をご確認のうえ操作ください。<br>
        <a href="https://www.sanitary-net.com/clean/manual.html" target="_blank">⇒各社取扱説明書・相談窓口</a>
       </p>
       <h6>ご準備と清掃のポイント</h6>
-       <p class="normal">・はじめに、指示に従って手袋・防護具を着用ください。清掃される方、ご自身で身を守ることが大切です。</p>
+       <p class="normal">・はじめに、指示に従って手袋・防護具を着用ください。清掃される方がご自身で身を守ることが大切です。</p>
       <p class="txt_c"><img src="/clean/public/images/01.jpg" alt="" width="250" height="auto" /></p>
       <p class="normal"><br>・洗剤拭き用、洗剤拭き後の仕上げ水拭き用、水拭き用、ノズル水拭き用に色分けされた４枚の<br class="pc-only">　マイクロファイバークロスを使い分けて清掃する。</p>
-       <p class="txt_c"><img src="/clean/public/images/02.jpg" alt="" width="250" height="auto" /></p>
+       <p class="txt_c"><img src="/clean/public/images/02.jpg" alt="" width="300" height="auto" /></p>
-       <p class="normal"><br><br>・洗剤拭き、水拭き等各々その作業においては原則として「きれいな箇所」から「汚れた箇所」へと<br class="pc-only">　一方方向拭きで清掃する。</p>
+       <p class="normal"><br><br>・洗剤拭き、水拭き等各々その作業においては原則として「きれいな箇所」から「汚れた箇所」へと<br class="pc-only">　一方向拭きで清掃する。</p>
       <p class="normal">・マイクロファイバークロスの拭き取り面が汚れたら、拭き取り箇所が変わるタイミングで<br class="pc-only">　新たな面に替えて作業する。</p>
       <p class="txt_c"><img src="/clean/public/images/03.jpg" alt="" width="480" height="auto" /></p>
      </div>
@@ -138,19 +137,21 @@
      <div class="content clearfix">
       <p class="notice">・各製品の取扱説明書に従い必要に応じて電源プラグを抜いて清掃を行う。</p>
       <p class="normal">ポイント動画で温水洗浄便座の清掃作業をご覧ください。</p>
-       <p class="normal">※動画は、2017年に試験想定会場で撮影された訓練動画を抜粋したものです。<br>
+       <p class="normal">※試験会場を想定した場所で撮影した動画です。<br>
        　実際のトイレ清掃では、各施設の状況に応じて行ってください。</p>
      </div>
      <div class="flex_wrapper mb10">
-       <div>
+       <div class="side-video">
        <p class="normal"><b>① ノズル清掃</b></p>
        <img src="/clean/public/images/04.jpg" alt="" width="250" height="auto" />
       </div>
       <div class="">
        <p>ノズルを出し、ノズルに手を添えて「ノズル水拭き用マイクロファイバークロス（緑）」でノズル全体を清拭する。その後、ノズルを戻す。</p>
-        <img src="/clean/public/images/mov.png" alt="" width="250" height="auto" />
+        <p class="notice">便器ボウル部の清掃用ブラシでノズルを清掃しない。</p>
-        <p class="notice">便器ボウル部清掃用具でノズルを清掃しない。</p>
+        <div class="video-wrapper">
+         <video controls src="/clean/public/mov/nozzle.mp4" preload="auto" class="movie-player-image" id="movie-preview" height="100%" width="100%" muted="" playsinline=""></video>
+        </div>
       </div>
      </div>
@@ -167,10 +168,18 @@
      </div>
      <div class="flex_wrapper mb20">
+       <div class="max">
+        <h6>洗剤の使い方に注意しましょう</h6>
+        <p>洗剤の選択ミスや誤った使い方、便器鉢内に洗剤の放置は、洗剤から発生するガスにより金属部品が腐食・劣化し、
+         <span class="notice">発煙・発火などの原因</span>となります。使用できる洗剤でも直接かけてしまうと<span class="notice">発煙・発火などの原因</span>となります。</p>
+       </div>
+      </div>
+      <div class="flex_wrapper mb20">
       <div>
        <p class="normal"><b>③ 便座の裏面,ケース下部,便器リム・側面の清掃</b></p>
-        <img src="/shared/images/now_printing.png" alt="" class="mb20" />
+        <img src="/clean/public/images/06.jpg" alt="" class="mb40" width="350" height="auto" />
-        <img src="/shared/images/now_printing.png" alt="" />
+        <img src="/clean/public/images/07.jpg" alt="" width="350" height="auto" />
       </div>
       <div class="">
        <p class="normal">上げた便座の裏面、便座本体ケース下部、便器リム部、便器側面を適度な濃度に水で希釈された中性洗剤を含ませかたく絞った「洗剤拭き用マイクロファイバークロス(赤)」で清拭する。</p>
@@ -211,7 +220,7 @@
      <div class="flex_wrapper mb20">
       <div>
        <p class="normal mb20"><b>① 電源プラグを抜く</b></p>
-        <img src="/clean/public/images/09.jpg" alt="" width="150" height="auto" class="ml30" />
+        <img src="/clean/public/images/09.png" alt="" width="150" height="auto" class="ml30" />
       </div>
       <div class="mt30">
        <p class="normal">運転ランプの点灯を確認し電源プラグを抜く。</p>
@@ -233,7 +242,7 @@
      <div class="flex_wrapper mb20">
       <div>
        <p class="normal mb20"><b>③ 便座本体底面,便座接続部の清掃</b></p>
-        <img src="/shared/images/now_printing.png" alt="" />
+        <img src="/clean/public/images/11.jpg" width="350" height="auto" alt="" />
       </div>
       <div class="">
        <p class="normal mb20">便器上面の便座接続部を適度な濃度に水で希釈された中性洗剤を含ませかたく絞った「洗剤拭き用マイ
@@ -269,7 +278,7 @@
      <div class="flex_wrapper mb20">
       <div>
        <p class="normal mb20"><b>⑥ 電源プラグを差込む</b></p>
-        <img src="/shared/images/now_printing.png" alt="" />
+        <img src="/clean/public/images/14.jpg" width="150" height="auto" alt="" />
       </div>
       <div class="mt30">
        <p class="notice">※手袋が濡れている場合は、事前に必ず拭く。</p>
@@ -280,7 +289,7 @@
     </div>
     <div class="section" id="section_e">
-      <h4 class="label"><span>日常清掃・定期清掃</span></h4>
+      <h4 class="label"><span>ビルクリーニング科 実技訓練 DVD教材のご紹介</span></h4>
      <div class="content clearfix">
       <p class="normal">ポイント動画は、「2 級ビルクリーニング科実技訓練」 DVD 教材を二次利用して編集したものです。<br>
        DVD 教材は、一般社団法人 建築物管理訓練センターから販売されています。トイレ清掃など必要な清掃手順を学べる動画があります。床やガラス面清掃などの実技動画もあり、ビルクリーニング技能検定受験準備や社内教育に活用できます。詳しくは、「申込ページへ」からご覧ください。</p>
@@ -288,7 +297,7 @@
      <div class="flex_wrapper mb20">
       <div>
-        <img src="/clean/public/images/14.png" alt="" width="300" height="auto" />
+        <img src="/clean/public/images/15.png" alt="" width="300" height="auto" />
       </div>
       <div>
        <a href="https://bmtc-books.shop-pro.jp/" class="btn btn-primary mb30" target="_blank">申込ページへ</a>

--- a/clean/public/mov/nozzle.png
+++ b/clean/public/mov/nozzle.png
--- a/shared/css/_parts.css
+++ b/shared/css/_parts.css
--- a/sp/shared/css/common.css
+++ b/sp/shared/css/common.css
--- a/sp/shared/css/fonts/icomoon.svg
+++ b/sp/shared/css/fonts/icomoon.svg
@@ -15,4 +15,5 @@
 <glyph unicode="&#xe905;" glyph-name="study" d="M755.302 340.685v0h-562.79v609.894h187.597v-609.69h46.899v609.69h164.25v-609.69h46.899v609.69h187.597v-609.69h-70.451zM591.258 129.741l164.25 211.149h70.246l-316.621-398.746-316.621 398.541h70.246l164.25-211.149h164.25z" />
 <glyph unicode="&#xe910;" glyph-name="keyboard_arrow_right" d="M366 240.667l196 196-196 196 60 60 256-256-256-256z" />
 <glyph unicode="&#xe911;" glyph-name="keyboard_arrow_left" d="M658 252.667l-60-60-256 256 256 256 60-60-196-196z" />
+<glyph unicode="&#xe912;" glyph-name="technology" d="M415.594,93.344l-18.906-62.563c4.625-2.969,7.75-8.156,7.75-14.078C404.438,7.469,396.969,0,387.719,0,H129.891C112.5,0,96.609,7.094,85.25,18.5c-11.406,11.359-18.516,27.25-18.5,44.625V470.75C66.75,493.531,85.219,512,108,512h302.5,c19.188,0,34.75-15.547,34.75-34.734V127.578C445.25,110.125,432.344,95.844,415.594,93.344z M129.891,92.844,c-8.266,0-15.594-3.313-21.016-8.703c-5.406-5.453-8.719-12.766-8.719-21.016s3.313-15.578,8.719-21.016,c5.422-5.391,12.75-8.703,21.016-8.703h241.984l17.969,59.438H129.891z" />
 </font></defs></svg>
\ No newline at end of file
--- a/sp/shared/images/book.png
+++ b/sp/shared/images/book.png
--- a/sp/shared/inc/header.php
+++ b/sp/shared/inc/header.php
@@ -16,13 +16,26 @@
     <li><a href="/" class="icon-home">HOME</a></li>
     <li><a href="/sp/faq/" class="icon-faq">トイレQ＆A</a></li>
     <li><a href="/sp/trend/study.php" class="icon-study">研究など<span>（インタビュー）</span></a>
-      <ul>
+      <ul class="study-contents">
       <li><a href="/sp/trend/study02.php">温水洗浄便座に関する医学研究</a></li>
       <li><a href="/sp/trend/study01.php">温水洗浄便座の適切な使い方</a></li>
       <li><a href="/sp/trend/study_03.php">感染症の基礎知識と、トイレにおける感染症（対策と清掃管理）</a></li>
       <li><a href="/sp/trend/study/study02-6.php">ユニバーサルデザインに関する研究<br>車椅子使用者用便房における適切な便座高さの検証（2019年12月受理）</a></li>
      </ul>
     </li>
+     <li><a href="/sp/trend/study.php" class="icon-technology">お掃除らくらく新技術</a>
+      <ul class="technology-contents">
+       <li><a href="/sp/trend/study02.php">温水洗浄便座に関する医学研究</a></li>
+       <li><a href="/sp/trend/study01.php">温水洗浄便座の適切な使い方</a></li>
+      </ul>
+     </li>
+     <li><a href="/sp/trend/study.php" class="icon-maintenance">トイレのメンテナンス</span></a>
+      <ul class="maintenance-contents">
+       <li><a href="/sp/trend/study02.php">温水洗浄便座に関する医学研究</a></li>
+       <li><a href="/sp/trend/study01.php">温水洗浄便座の適切な使い方</a></li>
+      </ul>
+     </li>
+     <li><a href="/sp/faq/" class="icon-maintenance">各社取扱説明書</a></li>
     <li><a href="#subnavi" class="pc_site">PCサイトを見る</a></li>
    </ul>
   </div>