Skip to content

sora / mci-retympa

Go to a project
Commit 52088b7c by o.kimura
Options

SP対応　第1版

parent fd921cc6
Inline Side-by-side
Showing with 265 additions and 142 deletions
common.css
...@@ -140,155 +140,98 @@ table caption { ...@@ -140,155 +140,98 @@ table caption {
/********************************************************** * /********************************************************** *
Layout (編集NG) Layout (編集NG)
********************************************************** */ ********************************************************** */
body { @media screen and (min-width:961px) {
font-size: 100%; body {
background-color: #fff; font-size: 100%;
text-align: center; background-color: #fff;
} text-align: center;
}
#header,
#contents,
#footer {
width: 1200px;
margin: 10px auto;
text-align: left;
}
@media screen and (max-width:960px) {
#header, #header,
#contents, #contents,
#footer { #footer {
width: 100%; width: 1200px;
margin: 0 auto 10px; margin: 10px auto;
text-align: left; text-align: left;
} }
}
#header_inner { #header_inner {
padding: 10px; 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: none;
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 { article {
display: none; width: 100%;
float: right; margin: 0;
width: 300px; padding: 0;
background: none; }
border: 2px dashed #C00;
box-sizing: content-box;
}
#contents_sub .contents_sub_inner { #footer_inner {
padding: 10px; padding: 10px;
} }
@media screen and (max-width:960px) {
#contents_main { #contents_main {
clear: both; width: 850px;
width: 100%;
margin: 0 auto; margin: 0 auto;
background: none;
border: 2px dashed #C00;
box-sizing: content-box;
} }
#contents_main .dt_area { #contents_main .dt_area {
clear: both; margin: 0 20px;
width: 100%;
margin: 0 auto;
} }
#contents_sub { .dt_img {
clear: both;
width: 100%; width: 100%;
margin: 0; margin: 10px auto;
padding: 0;
text-align: center;
} }
.detailing_img img { .dt_img img {
width: 100%; width: 100%;
height: auto; height: auto;
max-width: 670px; margin: 0 auto;
margin: 10px auto;
padding: 0; padding: 0;
text-align: center; text-align: center;
} }
.figure {
display: block;
margin: 20px auto;
max-width: 600px;
text-align: right;
}
.figure img { .figure img {
width: 90%; margin: 0 auto;
height: auto;
max-width: 670px;
margin: 10px 5%;
padding: 0; padding: 0;
text-align: center; text-align: center;
} }
.figure span {
font-size: 81.25%;
text-align: right;
}
.dt_area table { .dt_area table {
width: 90%; width: 90%;
margin: 0 5%; margin: 20px 5%;
}
#contents_sub {
display: none;
float: right;
width: 300px;
background: none;
border: 2px dashed #C00;
box-sizing: content-box;
} }
}
@media screen and (max-width:480px) {} #contents_sub .contents_sub_inner {
padding: 10px;
}
}
/********************************************************** * /********************************************************** *
...@@ -309,36 +252,16 @@ article { ...@@ -309,36 +252,16 @@ article {
#dt_retympa .top_area { #dt_retympa .top_area {
width: 100%; width: 100%;
margin: 35px 0 10px 0; margin: 20px 0 10px 0;
border: 2px solid #8bc886; border: 2px solid #8bc886;
display: flex; display: flex;
-webkit-justify-content: space-between; -webkit-justify-content: space-between;
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 { #dt_retympa .top_area .retympa_logo {
width: 400px; width: 200px;
height: 75px; height: 37px;
padding: 12px 0 0 15px; padding: 12px 0 0 15px;
} }
...@@ -350,7 +273,7 @@ article { ...@@ -350,7 +273,7 @@ article {
#dt_retympa .top_area .supplement { #dt_retympa .top_area .supplement {
position: absolute; position: absolute;
margin: 100px 0 0 13px; margin: 100px 0 0 13px;
font-size: 70%; font-size: 0.72rem;
} }
#dt_retympa .attachedDoc { #dt_retympa .attachedDoc {
...@@ -416,12 +339,210 @@ a:hover { ...@@ -416,12 +339,210 @@ a:hover {
} }
@media screen and (max-width:960px) { @media screen and (max-width:960px) {
/*タブレット表示用CSSを記述*/ /*タブレット表示用CSSを記述*/
#contents_main {
clear: both;
width: 100%;
margin: 0 auto;
}
#contents_main .dt_area {
clear: both;
width: 100%;
margin: 0 auto;
}
#contents_sub {
display: none;
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%;
}
} }
@media screen and (max-width:480px) { @media screen and (max-width:480px) {
/*スマホ表示用CSSを記述*/ /*スマホ表示用CSSを記述*/
#header,
#contents,
#footer {
width: 100%;
margin: 0 auto 10px;
text-align: left;
}
#header_inner {
padding: 10px;
}
article {
width: 100%;
margin: 0;
padding: 0;
}
#footer_inner {
padding: 10px;
}
#contents_main {
clear: both;
width: 100%;
margin: 0 auto;
}
#contents_main .dt_area {
clear: both;
width: 100%;
margin: 0 auto;
}
#contents_sub {
display: none;
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 h2 {
font-size: 1rem;
padding: 10px 5px;
margin-bottom: 0;
}
#dt_retympa .top_area {
width: 99%;
margin: 0;
border: 2px solid #8bc886;
display: inline-block;
-webkit-justify-content: space-between;
justify-content: space-between;
}
#dt_retympa .top_area .retympa_logo {
width: 93%;
height: auto;
padding: 10px;
}
#dt_retympa .top_area .retympa_right {
display: none
}
#dt_retympa .top_area .supplement {
position: relative;
margin: 0;
font-size: 0.72rem;
padding: 6px;
}
#dt_retympa .attachedDoc {
display: inherit;
text-align: right;
margin-bottom: 0;
font-size: 0.8rem;
padding: 10px;
}
#dt_retympa .drArea {
font-size: 0.8rem;
padding: 10px;
}
#dt_retympa .movieArea {
margin-top: 0;
font-size: 0.8rem;
padding: 10px;
}
#dt_retympa .productArea {
margin-top: 0;
font-size: 0.8rem;
padding: 10px;
}
#dt_retympa .meetingArea {
margin: 0;
font-size: 0.8rem;
padding: 10px;
}
#dt_retympa sup {
font-size: 70%;
position: relative;
top: -0.2em;
}
#dt_retympa .btnArea {
display: flex;
justify-content: center;
margin-top: 30px;
}
.btn_retympa {
font-size: 1rem;
}
.btn_retympa:hover {
background-color: #ffb561;
}
.btn_retympa:active {
position: relative;
top: 1px;
}
a:hover {
cursor: pointer;
}
} }
common.min.css 0 → 100644
@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}@media screen and (min-width:961px){body{font-size:100%;background-color:#fff;text-align:center}#header,#contents,#footer{width:1200px;margin:10px auto;text-align:left}#header_inner{padding:10px}article{width:100%;margin:0;padding:0}#footer_inner{padding:10px}#contents_main{width:850px;margin:0 auto;background:0;border:2px dashed #C00;box-sizing:content-box}#contents_main .dt_area{margin:0 20px}.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}}#dt_retympa h2{font-size:1.5rem}#dt_retympa .top_area{width:100%;margin:20px 0 10px 0;border:2px solid #8bc886;display:flex;-webkit-justify-content:space-between;justify-content:space-between}#dt_retympa .top_area .retympa_logo{width:200px;height:37px;padding:12px 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:.72rem}#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{font-size:70%;position:relative;top:-0.2em}#dt_retympa .btnArea{display:flex;justify-content:center;margin-top:30px}.btn_retympa{box-shadow:inset 0 1px 0 0 #fce2c1;background-color:#ff9419;border-radius:6px;display:inline-block;cursor:pointer;color:#fff!important;font-size:1.4rem;font-weight:bold;padding:12px 20px;text-decoration:none;text-shadow:0 1px 0 #cc9f52}.btn_retympa:hover{background-color:#ffb561}.btn_retympa:active{position:relative;top:1px}a:hover{cursor:pointer}@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{display:none;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%}}@media screen and (max-width:480px){#header,#contents,#footer{width:100%;margin:0 auto 10px;text-align:left}#header_inner{padding:10px}article{width:100%;margin:0;padding:0}#footer_inner{padding:10px}#contents_main{clear:both;width:100%;margin:0 auto}#contents_main .dt_area{clear:both;width:100%;margin:0 auto}#contents_sub{display:none;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 h2{font-size:1rem;padding:10px 5px;margin-bottom:0}#dt_retympa .top_area{width:99%;margin:0;border:2px solid #8bc886;display:inline-block;-webkit-justify-content:space-between;justify-content:space-between}#dt_retympa .top_area .retympa_logo{width:93%;height:auto;padding:10px}#dt_retympa .top_area .retympa_right{display:none}#dt_retympa .top_area .supplement{position:relative;margin:0;font-size:.72rem;padding:6px}#dt_retympa .attachedDoc{display:inherit;text-align:right;margin-bottom:0;font-size:.8rem;padding:10px}#dt_retympa .drArea{font-size:.8rem;padding:10px}#dt_retympa .movieArea{margin-top:0;font-size:.8rem;padding:10px}#dt_retympa .productArea{margin-top:0;font-size:.8rem;padding:10px}#dt_retympa .meetingArea{margin:0;font-size:.8rem;padding:10px}#dt_retympa sup{font-size:70%;position:relative;top:-0.2em}#dt_retympa .btnArea{display:flex;justify-content:center;margin-top:30px}.btn_retympa{font-size:1rem}.btn_retympa:hover{background-color:#ffb561}.btn_retympa:active{position:relative;top:1px}a:hover{cursor:pointer}}
\ No newline at end of file
index.html
...@@ -2,7 +2,9 @@ ...@@ -2,7 +2,9 @@
<html lang="ja"> <html lang="ja">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8">
<meta name="format-detection" content="telephone=no">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>ディテーリング入稿用HTML</title> <title>ディテーリング入稿用HTML</title>
<meta name="description" content="" /> <meta name="description" content="" />
<meta name="keywords" content="" /> <meta name="keywords" content="" />
...@@ -18,7 +20,6 @@ ...@@ -18,7 +20,6 @@
<header id="header"> <header id="header">
<div id="header_inner"> <div id="header_inner">
<p>Header / Don't touch</p>
</div> </div>
</header> </header>
<div id="contents" class="clf"> <div id="contents" class="clf">
...@@ -68,7 +69,7 @@ ...@@ -68,7 +69,7 @@
<div class="productArea"> <div class="productArea">
<h2>「リティンパ<sup>®</sup> 耳科用250μgセット」のご紹介</h2> <h2>「リティンパ<sup>®</sup> 耳科用250μgセット」のご紹介</h2>
<p>「リティンパ<sup>®</sup> 耳科用250μgセット」は、トラフェルミンと鼓膜用ゼラチンスポンジをセットにした鼓膜穿孔治療剤です。本剤を用いた治療法では、トラフェルミンの上皮組織増殖作用と血管新生作用により鼓膜修正が期待されます。複雑な形状の穿孔や大きな穿孔に対しても効果が認められている、新しい治療法です。</p> <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> <p>「リティンパ.jp」では、<a href="https://retympa.nobelpark.jp/product/features.html#content_3" target="_blank">国内臨床試験成績</a>や、<a href="https://retympa.nobelpark.jp/for_the_first_time/" target="_blank">手術手技解説動画</a>、<a href="https://retympa.nobelpark.jp/member/safety/appropriate_use.html" target="_blank">適正使用に関する情報</a>などを掲載しておりますのでぜひご覧ください。</p>
<div class="btnArea"> <div class="btnArea">
<a class="btn_retympa" href="https://retympa.nobelpark.jp/" target="_blank">「リティンパ.jp」へ</a> <a class="btn_retympa" href="https://retympa.nobelpark.jp/" target="_blank">「リティンパ.jp」へ</a>
</div> </div>
...@@ -99,7 +100,6 @@ ...@@ -99,7 +100,6 @@
<hr class="doc_separate" /> <hr class="doc_separate" />
<footer id="footer"> <footer id="footer">
<div id="footer_inner"> <div id="footer_inner">
<p>Footer / Don't touch</p>
</div> </div>
</footer> </footer>
</body> </body>
......
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