Skip to content

sora / mci-retympa

Go to a project
Commit 43671b26 by o.kimura
Options

PCコーディングラフ

parent 6b2bb31f
Inline Side-by-side
Showing with 132 additions and 87 deletions
common.css
...@@ -303,6 +303,10 @@ article { ...@@ -303,6 +303,10 @@ article {
********************************************************** */ ********************************************************** */
/*PC表示用CSSを記述*/ /*PC表示用CSSを記述*/
#dt_retympa h2 {
font-size: 1.5rem;
}
#dt_retympa .top_area { #dt_retympa .top_area {
width: 100%; width: 100%;
margin: 10px 0; margin: 10px 0;
...@@ -312,6 +316,7 @@ article { ...@@ -312,6 +316,7 @@ article {
justify-content: space-between; justify-content: space-between;
} }
/*
#dt_retympa .top_area .upper_text { #dt_retympa .top_area .upper_text {
position: absolute; position: absolute;
margin: 3px 0 0 72px; margin: 3px 0 0 72px;
...@@ -329,11 +334,12 @@ article { ...@@ -329,11 +334,12 @@ article {
font-size: 80%; font-size: 80%;
margin-left: 25px; margin-left: 25px;
} }
*/
#dt_retympa .top_area .retympa_logo { #dt_retympa .top_area .retympa_logo {
width: 400px; width: 400px;
height: 48px; height: 75px;
padding: 22px 0 0 15px; padding: 12px 0 0 15px;
} }
#dt_retympa .top_area .retympa_right { #dt_retympa .top_area .retympa_right {
...@@ -347,10 +353,104 @@ article { ...@@ -347,10 +353,104 @@ article {
font-size: 70%; font-size: 70%;
} }
#dt_retympa .attachedDoc {
display: inherit;
text-align: right;
margin-bottom: 10px;
}
#dt_retympa .drArea {
display: inherit;
text-align: right;
}
#dt_retympa .movieArea {
margin-top: 30px;
}
#dt_retympa .productArea {
margin-top: 70px;
}
#dt_retympa .meetingArea {
margin: 60px 0;
}
#dt_retympa sup { #dt_retympa sup {
font-size: 50%; font-size: 50%;
} }
#dt_retympa .btnArea {
display: flex;
justify-content: center;
margin-top: 30px;
}
.retympa_button {
display: inline-block;
text-align: center;
border-width: 1px;
border-style: solid;
text-transform: uppercase;
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;
}
@media screen and (max-width:960px) { @media screen and (max-width:960px) {
/*タブレット表示用CSSを記述*/ /*タブレット表示用CSSを記述*/
......
index.html
...@@ -31,108 +31,53 @@ ...@@ -31,108 +31,53 @@
<div id="dt_retympa" class="dt_area"> <div id="dt_retympa" class="dt_area">
<div class="top_area"> <div class="top_area">
<span class="upper_text">鼓膜穿孔治療剤</span> <img src="/files/logo2.png" alt="" class="retympa_logo">
<img src="/files/logo.png" alt="" class="retympa_logo">
<img src="/files/main.png" alt="" class="retympa_right"> <img src="/files/main.png" alt="" class="retympa_right">
<span class="under_text">Retympa<sup>®</sup><span>トラフェルミン（遺伝子組み換え）製剤</span></span>
<div class="supplement">【禁忌（次の患者には投与しないこと）】<br> <div class="supplement">【禁忌（次の患者には投与しないこと）】<br>
1. 本剤の成分に対し過敏症の既往歴のある患者<br> 1. 本剤の成分に対し過敏症の既往歴のある患者<br>
2. 耳内に悪性腫瘍のある患者又はその既往歴のある患者［本剤が細胞増殖促進作用を有するため］</div> 2. 耳内に悪性腫瘍のある患者又はその既往歴のある患者［本剤が細胞増殖促進作用を有するため］</div>
</div> </div>
<!--///////　▼編集しないでください　///////-->
<h1>ディテーリングコンテンツ用レイアウト</h1>
<h2>CSSは、common.cssに記述してください</h2>
<p>レスポンシブ対応とするため、&lt;div class="detailing_area"&gt;内にwidth:100%;で作成してください。画像については、ディスプレイサイズに応じて可変できるものとし、幅を1000px程度確保したものをご用意ください。</p>
<!--///////　△編集しないでください。ココマデ　///////-->
<div class="attachedDoc"><a href="">＞添付文書はこちら</a></div>
<h2>ヘッダー画像</h2> <h2>「リティンパ®耳科用250μgセット」　小穿孔における投与例</h2>
<p>ヘッダー画像のように幅100%でフィットさせるには、imgタグをdivで囲み、class="dt_img"を付与してください。</p>
<div class="dt_img">
<img src="files/img_header.png" alt="" />
</div>
<h2>H2見出し</h2>
<p>Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>. Aliquam mauris erat, sodales quis rutrum eu, tincidunt eu leo. Ut aliquam nulla sit amet libero faucibus tincidunt. Ut et urna purus. Mauris eros nibh, sollicitudin sit amet posuere sed, faucibus id odio. Quisque vitae urna augue. Cras est nisl, iaculis in dignissim nec, facilisis id ipsum. Duis non enim consectetur urna fringilla congue. Nunc nec ipsum orci. Suspendisse vehicula lectus ut sem ornare ut aliquet nibh placerat. Nam eros sem, commodo id auctor egestas, tempor eleifend lorem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed at felis venenatis nulla pharetra gravida at eu lacus. Vivamus tristique risus non tortor cursus aliquam. Proin quis tortor at nisi vulputate pharetra. Maecenas placerat nisi in nunc ultrices a suscipit diam cursus. Nunc aliquam ultricies dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eu ultricies lorem. Nulla luctus adipiscing feugiat.</p> <div class="drArea">
公益財団法人 田附興風会 医学研究所 北野病院 耳鼻咽喉科・頭頸部外科<br>
公益財団法人神戸医療産業都市推進機構 医療イノベーション推進センター<br>
<strong>金丸 眞一 先生</strong>
</div>
<h2>レスポンシブ対応画像</h2> <div class="movieArea">
<p>レスポンシブイメージとして使いたい場合は、imgタグをdivで囲み、class="figure"を付与してください。</p> <p>リティンパは、トラフェルミンと鼓膜用ゼラチンスポンジをセットにした鼓膜穿孔治療剤です。<br>
本剤を用いた治療法では、トラフェルミンの上皮組織増殖作用と血管新生作用により鼓膜修復が期待されます。</p>
<p>細胞増殖の足場となる鼓膜用ゼラチンスポンジは加工が容易であるため、複雑な形状の穿孔や大きな穿孔に対しても効果が認められている、新しい治療法です。</p>
<p>また、本療法は外来で実施可能であり、低侵襲であることも特徴の一つです。<br>
外来で治療が可能な症例や、小穿孔における投与方法、投与後の注意、適正使用情報についてご説明します。
</p>
<div class="figure"> <div class="figure">
<img src="files/img_beach.jpg" width="600" height="400" alt="" /> <img src="files/05.png" width="600" height="400" alt="" />
<span>画像キャプション</span>
</div> </div>
<h3>H3見出し</h3>
<p>Aenean tempor dictum dui et varius. <em>Maecenas bibendum dui eu ipsum convallis sed</em> iaculis ante semper. Suspendisse vel lorem quis dui vulputate adipiscing at non sem. Aenean quis turpis non lorem placerat adipiscing. Duis accumsan lobortis eros at convallis. Nunc sapien nunc, bibendum facilisis molestie sed, posuere eget quam. Mauris pulvinar tincidunt vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultricies posuere molestie. Donec enim turpis, elementum a mattis vitae, malesuada sed velit. Integer non ipsum vitae nulla malesuada commodo eget vitae nulla. Sed et ligula tortor. Mauris quis facilisis ante. Maecenas id purus augue, nec laoreet magna. Fusce eu nisi dui, et placerat eros. Mauris risus tellus, volutpat in elementum sit amet, ullamcorper auctor leo. Fusce imperdiet tellus vitae libero dapibus non molestie massa rutrum. Aliquam et felis id arcu tempor pharetra. Sed ipsum eros, faucibus facilisis viverra ut, dictum non tellus. </p>
<div class="figure">
<img src="files/img_beach.jpg" width="600" height="400" alt="" />
<span>画像キャプション</span>
</div> </div>
<h3>H3見出し</h3> <div class="productArea">
<p>テーブルはこちら</p> <h2>「リティンパ®耳科用250μgセット」のご紹介</h2>
<p>「リティンパ®耳科用250μgセット」は、トラフェルミンと鼓膜用ゼラチンスポンジをセットにした鼓膜穿孔治療剤です。本剤を用いた治療法では、トラフェルミンの上皮組織増殖作用と血管新生作用により鼓膜修正が期待されます。複雑な形状の穿孔や大きな穿孔に対しても効果が認められている、新しい治療法です。</p>
<table> <p>「リティンパ.jp」では、<a href="">国内臨床試験成績</a>や、<a href="">手術手技解説動画</a>、<a href="">適正使用に関する情報</a>などを掲載しておりますのでぜひご覧ください。</p>
<caption> <div class="btnArea">
table caption <a class="retympa_button" href="">「リティンパ.jp」へ</a>
<details> </div>
<summary>sample table</summary>
</details>
</caption>
<tr>
<th scope="row">header A</th>
<td>data A-1</td>
<td>data A-2</td>
<td>data A-3</td>
</tr>
<tr>
<th scope="row">header B</th>
<td>data B-1</td>
<td>data B-2</td>
<td>data B-3</td>
</tr>
<tr>
<th scope="row">header C</th>
<td>data C-1</td>
<td>data C-2</td>
<td>data C-3</td>
</tr>
</table>
<!-- InstanceEndEditable -->
<div class="more">
<!-- InstanceBeginEditable name="EditRegion_More" -->
<h3>Lorem ipsum</h3>
<p>Duis sit amet porta enim. Integer fermentum tincidunt tellus, laoreet ultrices arcu dignissim sit amet. Nullam sem massa, dictum in gravida sed, cursus eu lacus. Fusce non nisi quis ante tincidunt sagittis eget eu ligula. Phasellus varius turpis at dui luctus ullamcorper. Maecenas tincidunt, ipsum non tristique imperdiet, lacus neque elementum magna, non euismod dui erat congue sapien. Praesent congue hendrerit suscipit. Pellentesque erat tortor, interdum eu congue in, congue in mi. Curabitur ullamcorper lacinia dolor at convallis. In risus urna, convallis ac commodo id, bibendum nec mi. Phasellus lacus arcu, ultricies quis elementum non, pretium ut orci. Phasellus posuere congue consequat. Integer posuere volutpat leo eget posuere. Phasellus eget odio quis tortor gravida mollis a quis purus. Suspendisse et euismod metus. Donec nisi nulla, rutrum a interdum a, aliquam sed libero. Nullam condimentum elementum ipsum. Duis ut orci ut ligula dignissim pretium.</p>
<ul>
<li>list A</li>
<li>list B</li>
<li>list C</li>
</ul>
<h4>Lorem ipsum</h4>
<p>In pharetra odio id diam elementum facilisis. Phasellus sit amet est nec neque bibendum viverra eget vel sapien. Aenean et metus ut urna lobortis imperdiet. Pellentesque quis leo sodales ligula malesuada ullamcorper eu nec tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla elementum elit eu turpis tristique rhoncus. Suspendisse malesuada feugiat suscipit. Pellentesque non tempus est. Maecenas dictum risus ac tortor convallis nec molestie nisl tristique. Nunc ac pellentesque magna. Integer ut feugiat nibh. Cras lacinia libero quis ante viverra non sollicitudin odio consequat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam dapibus dolor eget erat aliquet id mollis nisl cursus. Sed eleifend hendrerit accumsan. Curabitur ac mauris ut nisl pharetra dapibus nec semper nulla. Sed rhoncus, tortor in pulvinar aliquam, nisi metus fermentum lorem, blandit varius lectus nisi sed ipsum.</p>
<ol>
<li>list 1</li>
<li>list 2</li>
<li>list 3</li>
</ol>
<h5>Lorem ipsum</h5>
<p>Morbi tincidunt pharetra lectus, eu pretium risus varius eget. Nam sed fringilla lectus. Cras sit amet velit nulla. Pellentesque placerat molestie tellus, vel vestibulum libero laoreet nec. Cras ultricies aliquet mauris. Proin gravida, diam sit amet elementum ornare, neque nibh gravida est, sit amet aliquam arcu nisi nec elit. Aenean malesuada justo sit amet eros posuere nec commodo orci convallis. Sed justo dolor, pellentesque at ornare ut, tempus nec lectus. Mauris at lorem vitae enim ultrices lobortis. Curabitur pharetra velit molestie orci lacinia eget viverra elit interdum. Sed turpis tortor, adipiscing eget euismod vel, elementum sed leo. Sed leo eros, pharetra ac gravida id, lacinia sit amet enim. Nunc eget felis mauris. Phasellus porta neque erat, quis imperdiet orci. Donec dui orci, luctus ac fermentum et, tempor a est. Aliquam dictum varius justo. </p>
<dl>
<dt>definition term A</dt>
<dd>definition description A</dd>
<dt>definition term B</dt>
<dd>definition description B</dd>
<dt>definition term C</dt>
<dd>definition description C</dd>
</dl>
</div> </div>
<div class="meetingArea">
<h2>オンライン面談・説明のご案内</h2>
<p>専任MRが直接Web会議システムでご質問にお答えする「オンライン面談・説明会」を行っております。ご希望の日時でご予約いただけますので、ぜひお問い合わせください。</p>
<div class="btnArea">
<a class="retympa_button" href="">オンライン面談・説明会に申し込む</a>
</div>
</div>
<!-- // .dt_area --> <!-- // .dt_area -->
</div> </div>
......
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