フォーマット遵守版（以降カスタマイズ）

common.css

@@ -309,7 +309,7 @@ article {
 
 #dt_retympa .top_area {
  width: 100%;
- margin: 10px 0;
+ margin: 35px 0 10px 0;
  border: 2px solid #8bc886;
  display: flex;
  -webkit-justify-content: space-between;
@@ -377,7 +377,9 @@ article {
 }
 
 #dt_retympa sup {
- font-size: 50%;
+ font-size: 70%;
+ position: relative;
+ top: -0.2em;
 }
 
 #dt_retympa .btnArea {
@@ -386,69 +388,31 @@ article {
  margin-top: 30px;
 }
 
-.retympa_button {
+.btn_retympa {
+ box-shadow: inset 0px 1px 0px 0px #fce2c1;
+ background-color: #ff9419;
+ border-radius: 6px;
  display: inline-block;
- text-align: center;
- border-width: 1px;
- border-style: solid;
- text-transform: uppercase;
+ cursor: pointer;
+ color: #ffffff !important;
+ font-size: 1.4rem;
+ font-weight: bold;
+ padding: 12px 20px;
  text-decoration: none;
- line-height: 1.1;
- font-weight: normal;
- font-family: sans-serif;
- color: #FFFFFF !important;
- font-size: 1.6rem;
- background-color: #FF9036;
- background-image: -webkit-linear-gradient(top, #ff933b 0%, #efa86f 48%, #FF9036 49%, #FF9036 82%, #ff9f52 100%);
- background-image: -moz-linear-gradient(top, #ff933b 0%, #efa86f 48%, #FF9036 49%, #FF9036 82%, #ff9f52 100%);
- background-image: -o-linear-gradient(top, #ff933b 0%, #efa86f 48%, #FF9036 49%, #FF9036 82%, #ff9f52 100%);
- background-image: linear-gradient(top, #ff933b 0%, #efa86f 48%, #FF9036 49%, #FF9036 82%, #ff9f52 100%);
- border-color: hsl(27, 41%, 53%);
- /*
- -webkit-box-shadow: inset 0 0 1px 1px #ffb77d, 0 0 1px 3px rgba(0, 0, 0, 0.15);
- -moz-box-shadow: inset 0 0 1px 1px #ffb77d, 0 0 1px 3px rgba(0, 0, 0, 0.15);
- box-shadow: inset 0 0 1px 1px #ffb77d, 0 0 1px 3px rgba(0, 0, 0, 0.15);
- */
- -webkit-text-shadow: 1px 1px 1px #cf5d00;
- -moz-text-shadow: 1px 1px 1px #cf5d00;
- -o-text-shadow: 1px 1px 1px #cf5d00;
- text-shadow: 1px 1px 1px #cf5d00;
- -webkit-border-radius: 14px;
- -moz-border-radius: 14px;
- border-radius: 14px;
- padding: 12px 30px 12px 30px;
-}
-
-.retympa_button strong {
- letter-spacing: 1px;
- font-size: 22px;
-}
-
-.retympa_button:hover {
- color: #FFFFFF;
- background-color: #ff9845;
- background-image: -webkit-linear-gradient(top, #ff9b4a 0%, #f0b07c 48%, #ff9845 49%, #ff9845 82%, #ffa861 100%);
- background-image: -moz-linear-gradient(top, #ff9b4a 0%, #f0b07c 48%, #ff9845 49%, #ff9845 82%, #ffa861 100%);
- background-image: -o-linear-gradient(top, #ff9b4a 0%, #f0b07c 48%, #ff9845 49%, #ff9845 82%, #ffa861 100%);
- background-image: linear-gradient(top, #ff9b4a 0%, #f0b07c 48%, #ff9845 49%, #ff9845 82%, #ffa861 100%);
- border-color: hsl(27, 40%, 54%);
- -webkit-box-shadow: inset 0 0 1px 1px #ffc291, 0 0 1px 3px rgba(0, 0, 0, 0.15);
- -moz-box-shadow: inset 0 0 1px 1px #ffc291, 0 0 1px 3px rgba(0, 0, 0, 0.15);
- box-shadow: inset 0 0 1px 1px #ffc291, 0 0 1px 3px rgba(0, 0, 0, 0.15);
- -webkit-text-shadow: 1px 1px 1px #de6300;
- -moz-text-shadow: 1px 1px 1px #de6300;
- -o-text-shadow: 1px 1px 1px #de6300;
- text-shadow: 1px 1px 1px #de6300;
-}
-
-.retympa_button:active {
- color: #FFFFFF;
- background-color: #ff8827;
- background-image: -webkit-linear-gradient(top, #ff821d 0%, #FF9036 100%);
- background-image: -moz-linear-gradient(top, #ff821d 0%, #FF9036 100%);
- background-image: -o-linear-gradient(top, #ff821d 0%, #FF9036 100%);
- background-image: linear-gradient(top, #ff821d 0%, #FF9036 100%);
- padding: 13px 30px 11px 30px;
+ text-shadow: 0px 1px 0px #cc9f52;
+}
+
+.btn_retympa:hover {
+ background-color: #ffb561;
+}
+
+.btn_retympa:active {
+ position: relative;
+ top: 1px;
+}
+
+a:hover {
+ cursor: pointer;
 }
 
 @media screen and (max-width:960px) {

common.min.css

-@charset "UTF-8";html,body,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,dt,dd,li,table,th,td,form{margin:0;padding:0}*{font-size:100%}body{margin:0;padding:0}a img{border:0}a{color:#06f;text-decoration:underline}a:hover{color:#06f}a:visited{color:#551a8b}h1,h2,h3,h4,h5,h6{margin:0 0 .5em 0}p,ul,ol,dl{margin:0 0 1em 0;line-height:1.4}ul,ol{padding:0 0 0 30px}dt{font-weight:bold}dd{margin:0 0 .5em 1.0}table{border-collapse:collapse;border-spacing:0;margin:0 0 1em 0}table th,table td{font-weight:normal;border:1px solid #666;text-align:left;padding:4px 6px;vertical-align:top}table th{background-color:#efefef}table caption{caption-side:top;text-align:left}.clf{min-height:1px}.clf:after{content:"";display:block;clear:both;height:1px;overflow:hidden}/*\*/* html .clf{height:1px;overflow:visible}/**/.doc_separate{display:none}body{font-size:100%;background-color:#fff;text-align:center}#header,#contents,#footer{width:1200px;margin:10px auto;text-align:left}@media screen and (max-width:960px){#header,#contents,#footer{width:100%;margin:0 auto 10px;text-align:left}}#header_inner{padding:10px;border:2px dashed #C00}article{width:100%;margin:0;padding:0}#footer_inner{padding:10px;border:2px dashed #C00}#contents_main{width:850px;margin:0 auto;background:0;border:2px dashed #C00;box-sizing:content-box}#contents_main .dt_area{width:90%;margin:0 5%}.dt_img{width:100%;margin:10px auto;padding:0;text-align:center}.dt_img img{width:100%;height:auto;margin:0 auto;padding:0;text-align:center}.figure{display:block;margin:20px auto;max-width:600px;text-align:right}.figure img{margin:0 auto;padding:0;text-align:center}.figure span{font-size:81.25%;text-align:right}.dt_area table{width:90%;margin:20px 5%}#contents_sub{display:none;float:right;width:300px;background:0;border:2px dashed #C00;box-sizing:content-box}#contents_sub .contents_sub_inner{padding:10px}@media screen and (max-width:960px){#contents_main{clear:both;width:100%;margin:0 auto}#contents_main .dt_area{clear:both;width:100%;margin:0 auto}#contents_sub{clear:both;width:100%;margin:0}.detailing_img img{width:100%;height:auto;max-width:670px;margin:10px auto;padding:0;text-align:center}.figure img{width:90%;height:auto;max-width:670px;margin:10px 5%;padding:0;text-align:center}.dt_area table{width:90%;margin:0 5%}}#dt_retympa .top_area{width:100%;margin:10px 0;border:2px solid #8bc886;display:flex;-webkit-justify-content:space-between;justify-content:space-between}#dt_retympa .top_area .upper_text{position:absolute;margin:3px 0 0 72px;font-weight:600}#dt_retympa .top_area .under_text{position:absolute;margin:68px 0 0 72px;font-weight:600;border-top:1px solid #8bc886}#dt_retympa .top_area .under_text span{font-size:80%;margin-left:25px}#dt_retympa .top_area .retympa_logo{width:400px;height:48px;padding:22px 0 0 15px}#dt_retympa .top_area .retympa_right{width:260px;height:auto}#dt_retympa .top_area .supplement{position:absolute;margin:100px 0 0 13px;font-size:70%}#dt_retympa sup{font-size:50%}
\ No newline at end of file

index.html

@@ -38,9 +38,12 @@
        2. 耳内に悪性腫瘍のある患者又はその既往歴のある患者［本剤が細胞増殖促進作用を有するため］</div>
      </div>
 
-     <div class="attachedDoc"><a href="">＞添付文書はこちら</a></div>
+     <div class="attachedDoc">
+      注意）禁忌を含む使用上の注意等については、最新の添付文書をご参照ください<br>
+      <a href="">＞添付文書はこちら</a>
+     </div>
 
-     <h2>「リティンパ®耳科用250μgセット」　小穿孔における投与例</h2>
+     <h2>「リティンパ<sup>®</sup> 耳科用250μgセット」 小穿孔における投与例</h2>
 
      <div class="drArea">
       公益財団法人 田附興風会 医学研究所 北野病院 耳鼻咽喉科・頭頸部外科<br>
@@ -63,19 +66,19 @@
      </div>
 
      <div class="productArea">
-      <h2>「リティンパ®耳科用250μgセット」のご紹介</h2>
-      <p>「リティンパ®耳科用250μgセット」は、トラフェルミンと鼓膜用ゼラチンスポンジをセットにした鼓膜穿孔治療剤です。本剤を用いた治療法では、トラフェルミンの上皮組織増殖作用と血管新生作用により鼓膜修正が期待されます。複雑な形状の穿孔や大きな穿孔に対しても効果が認められている、新しい治療法です。</p>
-      <p>「リティンパ.jp」では、<a href="">国内臨床試験成績</a>や、<a href="">手術手技解説動画</a>、<a href="">適正使用に関する情報</a>などを掲載しておりますのでぜひご覧ください。</p>
+      <h2>「リティンパ<sup>®</sup> 耳科用250μgセット」のご紹介</h2>
+      <p>「リティンパ<sup>®</sup> 耳科用250μgセット」は、トラフェルミンと鼓膜用ゼラチンスポンジをセットにした鼓膜穿孔治療剤です。本剤を用いた治療法では、トラフェルミンの上皮組織増殖作用と血管新生作用により鼓膜修正が期待されます。複雑な形状の穿孔や大きな穿孔に対しても効果が認められている、新しい治療法です。</p>
+      <p>「リティンパ.jp」では、<a href="https://retympa.jp/product/features.html#content_3" target="_blank">国内臨床試験成績</a>や、<a href="https://retympa.jp/for_the_first_time/" target="_blank">手術手技解説動画</a>、<a href="https://nobelpark.jp/member/retympa/safety/appropriate_use.html" target="_blank">適正使用に関する情報</a>などを掲載しておりますのでぜひご覧ください。</p>
       <div class="btnArea">
-       <a class="retympa_button" href="">「リティンパ.jp」へ</a>
+       <a class="btn_retympa" href="https://retympa.nobelpark.jp/" target="_blank">「リティンパ.jp」へ</a>
       </div>
      </div>
 
      <div class="meetingArea">
       <h2>オンライン面談・説明のご案内</h2>
-      <p>専任MRが直接Web会議システムでご質問にお答えする「オンライン面談・説明会」を行っております。ご希望の日時でご予約いただけますので、ぜひお問い合わせください。</p>
+      <p>専任MRがWeb会議システムでリティンパのご紹介や、先生方のご質問にお答えする「オンライン面談・説明会」を行っております。ご希望の日時でご予約いただけますので、ぜひお問い合わせください。</p>
       <div class="btnArea">
-       <a class="retympa_button" href="">オンライン面談・説明会に申し込む</a>
+       <a class="btn_retympa" href="#">オンライン面談・説明会に申し込む</a>
       </div>
      </div>