@charset "utf-8";

/* =========================================================================================

  // CSSのリセット
  // over write

========================================================================================== */
html{color:#000;background:#FFF;overflow-y:scroll;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{padding:0;margin:0;}table{border-collapse:collapse;border-spacing:0;font-size:100%;font-family:inherit;}caption,th,td{text-align:left;vertical-align:top;font-weight:normal;}fieldset,img{border:none;}address,caption,cite,code,dfn,em,th,var,optgroup{font-style:normal;font-weight:normal;}del,ins{text-decoration:none;}li{list-style:none;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}sup{vertical-align:baseline;}sub{vertical-align:baseline;}legend{color:#000;}input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;}input,button,textarea,select{font-size:100%;}textarea{overflow:auto;} /* select,input,button,textarea,button{font:99% arial,helvetica,clean,sans-serif;} */ pre,code,kbd,samp,tt{font-family:monospace;font-size:108%;line-height:100%;}img{vertical-align:bottom;border:none;}*:first-child+htmlbody,*:first-child+htmlbr{letter-spacing:0;}

/*==========================================================================================

  // template-d レイアウト

==========================================================================================*/

/* body
------------------------------------------ */
body {
  font-family : "メイリオ", Meiryo, "ヒラギノ角ゴPro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", Arial, Helvetica, Verdana, sans-serif;
  font-size: 13px;
  word-wrap: break-word;
  -webkit-text-size-adjust: none;
  color: #444444;
}

small {
  font-size: 70%;
}

a {
  color: #0033cc;
  text-decoration: underline;
}

a:visited { color: #663399; }

a:hover,
a:active,
a:focus { text-decoration: none; }

h1,h2,h3,h4,h5,h6 { line-height: 1; }

/* header
------------------------------------------ */

div#header {
  width: 100%;
  height: 30px;
  background: #470C0C;
}

div#header .inner {
  position: relative;
  width: 980px;
  margin: 0 auto;
  color: #fff;
}

div#header .inner h1 {
  float:left;
  font-size: 10px;
  line-height: 30px;
}

div#header .inner p.toTop {
  float:left;
  height: 30px;
  line-height: 30px;
  margin:0 5px 0 0;
}

div#header .inner p.toTop a {
  color: #fff;
  font-size: 10px;
  margin:0 5px 0 0;
}

/* wrapper
------------------------------------------ */

div#wrapper {
  width: 980px;
  margin: 0 auto;
}

/* chrome float でのデザイン崩れ回避のため */
#wrapper .left a,
#wrapper .right a {
  display: block;
}

/* snsBtns
------------------------------------------ */

.snsBtns {
  padding:5px 0 0;
}

.snsBtns ul {
  float:right;
}

.snsBtns ul li {
  float:left;
  padding:0 0 0 10px;
}


/* snsBtns2
------------------------------------------ */

.snsBtns2 {
  margin:0 0 10px;
}

.snsBtns2 ul {
  text-align:center;
}

.snsBtns2 ul li {
  display:inline-block;
  padding:0 5px;
  vertical-align: top;
}


/* topicPath
------------------------------------------ */


#topicPath { margin: 0 0 26px;}

#topicPath li {
  float: left;
  padding: 0 10px 0 0;
}

#topicPath li a { margin: 0 10px 0 0; }

/* contents
------------------------------------------ */

div#contents {
  padding: 15px 20px 20px;
  margin:0 0 8px;
  background: #FFFFFF;
}


/* footer
------------------------------------------ */


div#footer { background: #EAEAEA; }

div#footer div.inner {
  width: 980px;
  margin: 0 auto;
  padding: 15px 0;
  color: #43100e;
}

div#footer .footerLink { text-align: center; }

div#footer .footerLink a { color: #43100e; }

div#footer .footerLink a:hover { text-decoration: none; }

div#footer p.footerLink { margin: 0 0 12px; }

div#footer p.footerLink a { font-size: 13px; }

div#footer ul.footerLink { margin: 0 0 5px; }

div#footer ul.footerLink li {
  display: inline;
  font-size: 11px;
  padding: 0 5px 0 0;
}

div#footer ul.footerLink li a { padding: 0 5px 0 0; }

div#footer p#copyright {
  text-align: center;
  font-size: 10px;
}

div#footer p.footerAttention {
  font-size:12px;
  padding:5px 0 17px;
  color:#444;
  line-height:1;
  text-align: center;
}

/* post-password-form
------------------------------------------ */

.post-password-form {
  display:block;
  text-align:center;
  padding:50px 0;
}

.post-password-form p {
  padding:10px 0;
}

/*==========================================================================================

  // モジュール

==========================================================================================*/


/* section
------------------------------------------ */


div.section {
  margin: 0 0 30px;
}

div.section .sectionTxt { width: 510px; }

div.section .sectionPhoto { width:370px; }

div.section .sectionPhoto p { text-align:center; }

div.section .sectionTxt.left { float: right; }

div.section .sectionPhoto.left { float: left; }

div.section .sectionTxt.right { float: left; }

div.section .sectionPhoto.right { float: right; }

div.section .sectionFull{ clear: both; padding: 0 0 1px;}

div.section .sectionFull .font-small { font-size: 12px;}

div.section h2 {
  height: 50px;
  line-height: 50px;
  font-weight: bold;
  font-size: 27px;
  padding: 0 20px;
  color: #fff;
}

div.section p { font-size: 14px; }

div.section strong {
  color:#f00;
  font-weight:bold;
}

.sectionTitle02,
div.section .sectionTxt h3,
div.section .sectionFull h3 {
  font-weight: bold;
  font-size: 20px;
  margin: 0 0 12px;
  padding: 0 0 5px;
  border-bottom:2px dotted #444444;
  line-height: 1.3;
}

div.section .sectionTxt h4,
div.section .sectionFull h4 {
  font-weight: bold;
  font-size: 15px;
  margin: 0 0 10px;
}

div.section .sectionTxt p,
div.section .sectionFull p {
  margin: 0 0 26px;
  padding:0 5px;
  font-size:14px;
  line-height:1.6;
}

div.section .sectionPhoto p { margin: 0 0 20px; }

div.section .sectionPhoto img {
  max-width:370px;
  width:auto;
  height:auto;
}



/* sectionInner */


div.sectionInner1 {
  padding: 30px 20px 0;
  background:#fff;
}

/* font-small */
div#contents .font-small { font-size: 12px;}


/* 商品エリア共通 */

div.productSection { margin: 0; }

div.productSection .sectionPhoto { width:376px; }

div.productSection .sectionPhoto a img { border: 3px solid #ddd; }

div.productSection .sectionPhoto a:hover img { border: 3px solid #fff; }

div.productSection .productTxt1 {
  font-weight: bold;
  font-size: 20px;
  margin: 0 0 12px;
  padding: 0 0 5px;
  border-bottom:2px dotted #444444;
  line-height:1.2;
}

div.productSection p.btn1,
div.productSection p.btn2 {
  clear: both;
  padding: 20px 0 30px;
  overflow:hidden;
}


div.productSection p.btn1 a,
div.productSection p.btn2 a {
  display: block;
  width: 840px;
  height: 60px;
  line-height: 60px;
  margin: 0 auto;
  text-align: center;
  font-size: 27px;
  font-weight:bold;
  text-decoration: none;
  color: #fff;
}

div.productSection p.btn2 a { width: 440px;}

div.section p.btn1 a:hover,
div.section p.btn2 a:hover{ background-position: left bottom;}


/* productDouble 商品エリア */

div#productArea1 {
  float:left;
  width:440px;
}

div#productArea2 {
  float:right;
  width:440px;
}

div#productDouble .sectionTxt {
  width: 224px;
  height:230px;
}

div#productDouble .sectionPhoto {
  width:206px;
  padding: 0 10px 0 0;
}

div#productDouble .sectionPhoto.right {padding: 0;}

div#productDouble .sectionPhoto img {
  max-width:200px;
  height:auto;
}


/* ドクター
------------------------------------------ */

#profile{
  border:1px solid #D8D8D8;
  padding:10px;
  margin: 0 0 20px;
  background: #fff;
}

#profile .img {
  float:left;
}

#profile .img img{
  border:1px solid #D8D8D8;
}

#profile .title{
  margin:0 0 5px 152px;
}

#profile .title span.name1{
  padding: 0 0 0 10px;
}

#profile .title span.name2{
  padding: 0 5px 0 0;
  font-size:20px;
  font-weight:bold;
}

#profile .txt {
  margin:0 0 0 152px;
}

/* クリニック情報 */

#clinicInfo table{
  border:1px solid #DDDDDD;
  margin: 0 0 30px;
}

#clinicInfo th ,
#clinicInfo td {
  border:1px dotted #DDDDDD;
  padding: 15px;
  line-height:1.4;
  font-size: 14px;
}

#clinicInfo th {
  width: 60px;
  background: #F6F6F6;
  font-weight: bold;
  text-align: center;
  word-break:keep-all;
}

#clinicInfo td {
  word-break:break-all;

}


#clinic .sectionPhoto { width:376px; }

#clinic .sectionPhoto a img { border: 3px solid #ddd; }

#clinic .sectionPhoto a:hover img { border: 3px solid #fff; }






/*==========================================================================================

  // 汎用スタイル

==========================================================================================*/



.clear { clear: both; }

/* clearFix
---------------------------*/


.clearFix:after {
  content: " ";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

.clearFix { display: inline-block; }

* html .clearFix { height: 1%; }

.clearFix { display: block; }

/*==========================================================================================

  // カラーバリエーション

==========================================================================================*/

/* ピンク
---------------------------*/

#pink #contents { background: #FAEBE6; }
#pink #profile{ border:1px solid #FAEBE6;}
#pink div#contents h2 { background: url(../img/title-bg-pink.png) no-repeat left top; }
#pink div.productSection .sectionPhoto a:hover img,
#pink #clinic .sectionPhoto a:hover img{ border: 3px solid #EC73A0; }

/* オレンジ
---------------------------*/

#orange #contents { background: #FAEBE6; }
#orange #profile{ border:1px solid #FAEBE6;}
#orange div#contents h2 { background: url(../img/title-bg-orange.png) no-repeat left top; }
#orange div.productSection .sectionPhoto a:hover img,
#orange #clinic .sectionPhoto a:hover img { border: 3px solid #FF8000; }

/* パープル
---------------------------*/

#purple #contents { background: #E4E1FD; }
#purple #profile{ border:1px solid #E4E1FD;}
#purple div#contents h2 { background: url(../img/title-bg-purple.png) no-repeat left top; }
#purple div.productSection .sectionPhoto a:hover img,
#purple #clinic .sectionPhoto a:hover img{ border: 3px solid #5900B2; }

/* ブルー
---------------------------*/

#blue #contents { background: #D6EAFF; }
#blue #profile{ border:1px solid #D6EAFF;}
#blue div#contents h2 { background: url(../img/title-bg-blue.png) no-repeat left top; }
#blue div.productSection .sectionPhoto a:hover img,
#blue #clinic .sectionPhoto a:hover img{ border: 3px solid #006DD9; }

/* レッド
---------------------------*/

#red #contents { background: #FAEBE6; }
#red #profile{ border:1px solid #FAEBE6;}
#red div#contents h2 { background: url(../img/title-bg-red.png) no-repeat left top; }
#red div.productSection .sectionPhoto a:hover img,
#red #clinic .sectionPhoto a:hover img{ border: 3px solid #D11A2C; }


/* ブラウン
---------------------------*/

#brown #contents { background: #FAEBE8; }
#brown #profile{ border:1px solid #FAEBE8;}
#brown div#contents h2 { background: url(../img/title-bg-brown.png) no-repeat left top; }
#brown div.productSection .sectionPhoto a:hover img,
#brown #clinic .sectionPhoto a:hover img{ border: 3px solid #A94E51; }


/* グリーン
---------------------------*/

#green #contents { background: #e0f2d4; }
#green #profile{ border:1px solid #e0f2d4;}
#green div#contents h2 { background: url(../img/title-bg-green.png) no-repeat left top; }
#green div.productSection .sectionPhoto a:hover img,
#green #clinic .sectionPhoto a:hover img{ border: 3px solid #2F9200; }


/* ブラック
---------------------------*/

#black #contents { background: #EDEDED; }
#black #profile{ border:1px solid #EDEDED;}
#black div#contents h2 { background: url(../img/title-bg-black.png) no-repeat left top; }
#black div.productSection .sectionPhoto a:hover img,
#black #clinic .sectionPhoto a:hover img{ border: 3px solid #555555; }


/* ネイビー
---------------------------*/

#navy #contents { background: #DCE8FD; }
#navy #profile{ border:1px solid #DCE8FD;}
#navy div#contents h2 { background: url(../img/title-bg-navy.png) no-repeat left top; }
#navy div.productSection .sectionPhoto a:hover img,
#navy #clinic .sectionPhoto a:hover img{ border: 3px solid #000; }





/*==========================================================================================

  // ボタン

==========================================================================================*/

/* green
------------------------------------------ */

div.section p.btn1.green a { background-image: url(../img/btn-green1.png); }
div.section p.btn2.green a { background-image: url(../img/btn-green2.png); }

/* orange
------------------------------------------ */

div.section p.btn1.orange a { background-image: url(../img/btn-orange1.png); }
div.section p.btn2.orange a { background-image: url(../img/btn-orange2.png); }

/* orange
------------------------------------------ */

div.section p.btn1.red a { background-image: url(../img/btn-red1.png); }
div.section p.btn2.red a { background-image: url(../img/btn-red2.png); }





/*==========================================================================================

  // スマホ レスポンシブ 768pxをブレイクポイント

==========================================================================================*/



@media screen and (max-width: 768px) {

/* header
------------------------------------------ */
div#header {
  width: 100%;
  height:auto;
}

div#header .inner {
  position: relative;
  width: 100%;
}

div#header .inner h1 {
  text-align: left;
  font-size: 10px;
  line-height: 1.2;
  padding:5px;
}


div#header .inner p.toTop { display:none;}


/* wrapper
------------------------------------------ */

div#wrapper {
  width: 100%;
}

/* mainVisual
------------------------------------------ */

#mainVisual {
}

#mainVisual img {
  width:100%;
  height:auto;
}


/* snsBtns
------------------------------------------ */

/* snsBtns
------------------------------------------ */

.snsBtns {
  margin:0 0 5px;
}

.snsBtns ul {
  float:right;
}

.snsBtns ul li {
  padding: 0 0 0 10px;
}

/* topicPath
------------------------------------------ */

#topicPath {
  margin:0 0 5px;
  padding: 2px 5px;
  font-size:10px;
}

#topicPath li {
  line-height:1.1;
  margin:0 0 5px;
}

#topicPath li a { margin: 0 10px 0 0; }


/* contents
------------------------------------------ */

div#contents {
  padding: 5px;
  background: #FFFFFF;
}

div#contents p {
  font-size:15px;
}

/* footer
------------------------------------------ */


div#footer { }

div#footer div.inner {
  width: 100%;
  padding: 15px 10px;
  -webkit-box-sizing:border-box;
     -moz-box-sizing:border-box;
          box-sizing:border-box;

}

div#footer ul.footerLink {
  margin:0 0 10px;
}

div#footer ul.footerLink li {
  display: inline-block;
  font-size: 10px;
  padding: 0 5px 10px 0;
  white-space:nowrap;
}

div#footer p.footerAttention {
  font-size:12px;
  padding:3px 0 15px;
  color:#444;
  line-height:1.4;
  text-align: left;
}


/* section
------------------------------------------ */


div.section { margin: 0 0 20px; }

div.section h2 {
  height: auto;
  line-height: 1.4;
  font-weight: bold;
  font-size: 15px;
  padding: 5px 10px;
  color: #fff;
  border-radius:5px 5px 0 0;
}

div.section .sectionTxt,
div.section .sectionFull { width: 100%; padding-bottom:15px; }
div.section .sectionPhoto { width:100%; }

div.section .sectionTxt.left,
div.section .sectionPhoto.left,
div.section .sectionTxt.right,
div.section .sectionPhoto.right { float: none; }

.sectionTitle02,
div.section .sectionTxt h3,
div.section .sectionFull h3 {
  border-left:5px solid #444444;
  border-bottom:none;
  padding:0 0 0 5px;
  font-size:16px;
  line-height:1.2;
}

div.section .sectionTxt h4,
div.section .sectionFull h4 {
  padding:10px 0 0;
  margin:0 0 5px;
}

div.section .sectionTxt p,
div.section .sectionFull p {
  margin: 0 0 15px;
  padding:0 5px;
}
div.section .sectionTxt p:last-child,
div.section .sectionFull p:last-child { margin: 0; }

div.section .sectionPhoto {
  width: 100%;
  text-align:center;
  padding:0 0 20px;
}

div.section .sectionPhoto img {
  width:185px;
  height:auto;
  max-width: none;
  max-height: none;
}

div.section .sectionPhoto img.big {
  width:290px;
  height:auto;
}

div.section .sectionPhoto p { margin: 0; }


/* sectionInner */

div.sectionInner1 {
  padding: 20px 10px 0;
  margin: 0 0 10px;
  border-radius: 0 0 5px 5px;
}


/* 商品エリア共通 */

div.productSection .sectionPhoto img.big {  width:284px;}

/* productSingle 商品エリア */

.productTxt1 {  font-size: 16px;}

div#productSingle .sectionPhoto { width:100%; }


/* productDouble 商品エリア */

div#productArea1,
div#productArea2 {
  float:none;
  width:100%;
}

div#productDouble .sectionTxt {
  width: 100%;
  height:auto;
}

div#productDouble .sectionPhoto {
  width:100%;
  padding: 0 0 10px;
}
div#productDouble .sectionPhoto.right {padding: 0 0 10px;}

div#productDouble p.btn1 a {
  width: 100%;
}
div#productDouble .sectionPhoto img {
  max-width:none;
}



/* ドクター
------------------------------------------ */

#profile{
  border:1px solid #FAEBE6;
  padding:10px;
  margin: 0 0 10px;
}

#profile .img {
  margin:0 0 5px;
}

#profile .img img{
  width:50px;
  height:50px;
}

#profile .title{
  margin:0 0 10px 62px;
  font-size:12px;
}

#profile .title span.name1{
  display:block;
  padding:0;
}

#profile .title span.name2{
  font-size:16px;
  font-weight:bold;
}

#profile .txt {
  clear:both;
  margin:0;
  font-size:10px;
  color:#666;
  line-height:1.2;
}


/* クリニック情報 */

#clinic .sectionPhoto img.big { width:284px;}

#clinicInfo table{
  margin: 0 0 30px;
}

#clinicInfo th ,
#clinicInfo td {
  padding: 10px;
  font-size: 13px;
}
#clinic .sectionPhoto { width:auto; text-align: center; }




/*==========================================================================================

  // カラーバリエーション

==========================================================================================*/

/* ピンク
---------------------------*/

#pink div#contents h2 {
  background: #EC74A0 -webkit-gradient(linear, left top, left bottom, from(#F2A2C0), to(#EC74A0));/* Safari,Google Chrome用 */
  background: #EC74A0 -moz-linear-gradient(top, #F2A2C0, #EC74A0);/* Firefox用 */
}

/* オレンジ
---------------------------*/

#orange div#contents h2 {
  background: #FF8001 -webkit-gradient(linear, left top, left bottom, from(#FFAA55), to(#FF8001));/* Safari,Google Chrome用 */
  background: #FF8001 -moz-linear-gradient(top, #FFAA55, #FF8001);/* Firefox用 */
}

/* パープル
---------------------------*/

#purple div#contents h2 {
  background: #5C01B2 -webkit-gradient(linear, left top, left bottom, from(#9055CC), to(#5C01B2));/* Safari,Google Chrome用 */
  background: #5C01B2 -moz-linear-gradient(top, #9055CC, #5C01B2);/* Firefox用 */
}

/* ブルー
---------------------------*/

#blue div#contents h2 {
  background: #046ED9 -webkit-gradient(linear, left top, left bottom, from(#559EE6), to(#046ED9));/* Safari,Google Chrome用 */
  background: #046ED9 -moz-linear-gradient(top, #559EE6, #046ED9);/* Firefox用 */
}

/* レッド
---------------------------*/

#red div#contents h2 {
  background: #D21B2D -webkit-gradient(linear, left top, left bottom, from(#E06672), to(#D21B2D));/* Safari,Google Chrome用 */
  background: #D21B2D -moz-linear-gradient(top, #E06672, #D21B2D);/* Firefox用 */
}

/* ブラウン
---------------------------*/

#brown div#contents h2 {
  background: #AA4F52 -webkit-gradient(linear, left top, left bottom, from(#997755), to(#683400));/* Safari,Google Chrome用 */
  background: #AA4F52 -moz-linear-gradient(top, #997755, #683400);/* Firefox用 */
}

/* グリーン
---------------------------*/

#green div#contents h2 {
  background: #329201 -webkit-gradient(linear, left top, left bottom, from(#74B655), to(#329201));/* Safari,Google Chrome用 */
  background: #329201 -moz-linear-gradient(top, #74B655, #329201);/* Firefox用 */
}

/* ブラック
---------------------------*/

#black div#contents h2 {
  background: #606060 -webkit-gradient(linear, left top, left bottom, from(#606060), to(#151212));/* Safari,Google Chrome用 */
  background: #606060 -moz-linear-gradient(top, #606060, #151212);/* Firefox用 */
}

/* ネイビー
---------------------------*/

#navy div#contents h2 {
  background: #030045 -webkit-gradient(linear, left top, left bottom, from(#555582), to(#030045));/* Safari,Google Chrome用 */
  background: #030045 -moz-linear-gradient(top, #555582, #030045);/* Firefox用 */
}


/*==========================================================================================

  // ボタン

==========================================================================================*/

div.section p.btn1,
div.section p.btn2 {
  position:relative;
  display:table;
  width:100%;
  padding:20px 0;
  margin:-20px 0 0;
}

div#productArea1 p.btn2 {
  margin:-20px 0 20px;
}

div.section p.btn1 a,
div.section p.btn2 a {
  position:relative;
  display:table-cell;
  width: 100%;
  height: 44px;
  padding:0;
  line-height: 44px;
  vertical-align:middle;
  font-size: 22px;
  border-radius:5px;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
  box-shadow:inset 0px 0px 1px rgba(255,255,255,1),inset 0px 0px 1px rgba(255,255,255,1);
}

div.section p.btn1 a:after,
div.section p.btn2 a:after {
  position:absolute;
  top:50%;
  right:15px;
  width:12px;
  height:12px;
  margin-top:-6px;
  content:' ';
  background: url(../img/btn-arrow.png) no-repeat left top;
  background-size:12px;
}

/* green
------------------------------------------ */

div.section p.btn1.green a,
div.section p.btn2.green a {
  border:2px solid #1CAD2A;
  background: #79E095 -webkit-gradient(linear, left top, left bottom, from(#79E095), to(#449917));/* Safari,Google Chrome用 */
  background: #79E095 -moz-linear-gradient(top, #79E095, #449917);/* Firefox用 */
}

/* orange
------------------------------------------ */

div.section p.btn1.orange a,
div.section p.btn2.orange a {
  border:2px solid #CF7E00;
  background: #DF7E00 -webkit-gradient(linear, left top, left bottom, from(#FFB94B), to(#DF7E00));/* Safari,Google Chrome用 */
  background: #DF7E00 -moz-linear-gradient(top, #FFB94B, #DF7E00);/* Firefox用 */
}

/* red
------------------------------------------ */

div.section p.btn1.red a,
div.section p.btn2.red a {
  border:2px solid #990000;
  background: #990000 -webkit-gradient(linear, left top, left bottom, from(#CC0000), to(#990000));/* Safari,Google Chrome用 */
  background: #990000 -moz-linear-gradient(top, #CC0000, #990000);/* Firefox用 */
}


}/* media query end */

#pay_way_text {
  display: none;
}