@charset "utf-8";
/* -----------------------------------------------------------------
LAYOUT CSS
LAST UPDATE:
--------------------------------------------------------------------*/
html{
  color: #333;
  font-family: "メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック","Osaka",Verdana,Arial,sans-serif;
  font-size: 62.5%;/*10px*/
  line-height: 1.4;
  word-wrap: break-word;
  -webkit-text-size-adjust: 100%;
  height: 100%;
  overflow-y: hidden;
}

body{font-size: 1.0rem;height: 100%;}
input, textarea,select {font-family: "メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック","Osaka",Verdana,Arial,sans-serif;-webkit-appearance: none;
}
input:focus{outline:0;}

#navArea{height: 100%;}
#wrap{height: 100%;}
#contentsWrap{height: 100%;}
#scrollWrap{height: 100%;}
#mainArea{height: 100%; }
.mainAreaInner{height: auto;}
#listArea{height: 100%;}
.listAreaInner{height:auto;}


/*--------------------------------
LINk
---------------------------------*/
body a,
body input{ color:#0087ca; text-decoration:none;
-webkit-transition:	0.4s;
-moz-transition: 	0.4s;
-ms-transition:		0.4s;
-o-transition: 		0.4s;
transition: 		0.4s;
}
body a:hover{ color:#0087ca; text-decoration:underline;}
body a:focus {outline: none;}


/*--------------------------------
wrap
---------------------------------*/
#wrap{ width: 1280px; margin: 0 auto;position: relative;}


/*--------------------------------
noMember
---------------------------------*/
body.noMember #navArea{}
body.noMember #navArea p.menu,
body.noMember #navArea ul.topCategory > li{height: auto; min-height: 46px;}
body.noMember #navArea  p.menu span,
body.noMember #navArea ul.topCategory > li > span{ display: block;}
body.noMember #navArea .topCategoryWrap{ overflow-y: auto;}

.lpWrap{height: 100%; overflow-y: auto;}
body.noMember #mainArea{overflow-x: auto;}
.trialArea{display: none;}
body.noMember .trialArea{display: table; width: 100%;height: 70px;}
.trialArea p.ttl{display: table-cell;font-weight: bold; vertical-align: middle;background: #1a9258; color: #fff; font-size: 1.6rem;width: 150px;text-align: center;}
.trialArea p.detail{display: table-cell;font-weight: bold; background: #25aa6a; color: #fff;font-size: 2rem;padding:7px 30px;}
.trialArea p.detail > strong{font-size: 3.4rem; color: #ffff00;font-weight: bold;padding: 0 10px;}
.trialArea p.detail a{font-weight: bold;margin-left: 30px;border-radius: 4px; color: #fff;background: #ff921c; padding: 11px 25px 11px 15px; font-size: 1.6rem; user-select:none;}
.trialArea p.detail a:hover{text-decoration: none;background: #fca445;}
.trialArea p.detail a strong{font-size: 1.4rem; background: #ff1c1c; border-radius: 2px; line-height: 1; padding: 3px 5px;margin-right: 10px;}
.trialArea > a{font-weight: bold;display: table-cell;vertical-align: middle; background: url(/img/icon_rock_01.png) no-repeat 20px center #30ace5; color: #fff;line-height: 1.6; font-size: 1.4rem;padding: 0 0 0 50px; width: 18%; user-select:none;}
.trialArea > a span{font-weight: bold;}
.trialArea > a:hover{opacity: 0.8;text-decoration: none; color: #fff;}


/*--------------------------------
newsArea
---------------------------------*/
.newsArea{ display: table; width: 100%; line-height: 1; background: #ffe4e4;}
.newsArea.nolist{ display: none;}
.newsArea p.ttl{ width: 86px; display: table-cell;font-size: 1.3rem; color: #fff; vertical-align: middle; text-align: center; font-weight: bold; background: #ce4747;padding: 3px 0 0 0;}
.newsArea  ul{padding: 7px 20px 6px 14px; display: table-cell;}
.newsArea  ul li{margin-top: 8px;font-size: 1.2rem;}
.newsArea  ul li:first-child{margin-top: 0;}
.newsArea  ul li a{padding-left: 13px; background: url(/img/icon_arrow_right_01.png) no-repeat left center; color: #282828;}
.newsArea  ul li a:hover{text-decoration: underline;}


/*--------------------------------
header
---------------------------------*/
header{width: 100%;min-width: 820px;position: absolute; top: 0; left: 0; z-index: 4; }
.headerWrap{width: 100%;min-width: 820px;border: 1px solid #e3e3e3; border-top: 0;background: #fafafa;line-height: 1;padding: 15px 20px; display: table; position: relative;}
header h1{padding: 0 25px 0 10px; display: table-cell;vertical-align: middle;width: 200px;}
header #headSearch{display: table-cell; vertical-align: middle;}
header #headSearch input[type="text"]{box-sizing: border-box; min-width: 460px; height: 40px;border: 1px solid #e3e3e3; border-right: 0; border-radius: 2px 0 0 2px; font-size: 1.4rem;line-height: 1;padding: 10px;}
header #headSearch input[type="submit"]{text-indent: -9999px; vertical-align: top;box-sizing: border-box; width: 58px; height: 40px;border: 1px solid #329ac9; background: url(/img/icon_search_01.png) no-repeat center center #329ac9;  border-radius: 0 2px 2px 0; cursor:pointer;margin-right: 30px;}
header #headSearch input[type="submit"]:hover{opacity: 0.8;}
header #headSearch input[type="checkbox"]{width: 12px; height: 12px;-webkit-appearance:checkbox; vertical-align: middle; line-height: 1; }
header #headSearch label{font-size: 1.4rem; vertical-align: middle;}
header #headSearch p{display: inline-block;}

.headLinks{font-size: 1.1rem; float: right; margin-top: 4px;}
.headLinks li{display: inline-block; border-right: 2px solid #c3c3c3;margin: 0 0 0 -4px; padding: 0 10px;}
.headLinks li:last-child{border: none;padding-right: 0;}
.headLinks li a{ color: #282828;}
.headLinks a[target="_blank"]{padding-right: 15px; background: url(/img/icon_blank01.png) no-repeat right center;}


/*--------------------------------
contentsWrap
---------------------------------*/
#contentsWrap{overflow: hidden; position: relative;width: 100%;padding-bottom: 28px;}
#scrollWrap{display: table;width: 100%;table-layout: fixed;}


/*--------------------------------
navArea
---------------------------------*/
/*枠*/
body.noMember #navArea.open{width: 470px;}
body.noMember #navArea.close{width: 50px !important;}
#navArea{ overflow: hidden; width: 50px;border-right:#dedede 1px solid; border-left:#dedede 1px solid; background: url(/img/bg_navarea_01.png) repeat-y 0 0 #fff; position: absolute ; left: 0; transition: all 300ms 0s ease; z-index: 3;}

/*メニューボタン*/
#navArea p.menu{width: 470px;height: 54px;line-height: 1; background: url(/img/menu_navi_01.png) no-repeat 15px 12px;cursor:pointer; position: relative;}
#navArea p.menu:hover{background: url(/img/menu_navi_01_on.png) no-repeat 15px 12px;}
#navArea p.menu:before{ content: "メニュー"; position: absolute; top:37px; width: 49px; display: block; text-align: center;}
#navArea p.menu span{display: none;margin-left: 50px; padding:19px 20px; font-size: 1.5rem; font-weight: bold; background: url(/img/icon_arrow_left_01.png) no-repeat right center;}
#navArea p.menu:hover span{ background: url(/img/icon_arrow_left_01.png) no-repeat right center #fefef1;}

/*親メニュー*/
#navArea .topCategoryWrap{border-top: 1px solid #dedede;  position: relative; width: 470px;}
#navArea ul.topCategory > li{line-height: 1;cursor:pointer;border-top: 1px solid #dedede;height: 54px;}
#navArea ul.topCategory li:first-child{border: none;}
#navArea ul.topCategory > li > span{display: none;margin-left: 50px; padding:19px 20px; font-size: 1.5rem; font-weight: bold; background: url(/img/icon_plus_01.png) no-repeat right center;}
#navArea ul.topCategory > li.navStar > span{background:none;}
#navArea ul.topCategory > li.navStar:hover > span{background:#fefef1;}
#navArea ul.topCategory > li:hover > span{background: url(/img/icon_plus_01.png) no-repeat right center #fefef1;}
#navArea ul.topCategory > li.cur > span{background: url(/img/icon_minus_01.png) no-repeat right center#fefef1;}
#navArea ul.topCategory > li.cur:hover > span{background: url(/img/icon_minus_01.png) no-repeat right center #fefef1;}
#navArea ul.topCategory > li > span.hasNoChild{background: none; }
#navArea ul.topCategory > li:hover > span.hasNoChild{ background: #fefef1;}
#navArea ul.topCategory > li.navInfo:hover > span.hasNoChild{ background: #fff;}

#navArea ul.topCategory > li > span.infoTtl{background: none; }
#navArea ul.topCategory > li:hover > span.infoTtl{ background: #fefef1;}
#navArea ul.topCategory > li.navInfo:hover > span.infoTtl{ background: #fff;}

#navArea ul.topCategory li.navSearch{ background: url(/img/menu_navi_02.png) no-repeat 14px 9px; position: relative;}
#navArea ul.topCategory li.navStar{ background: url(/img/menu_navi_03.png) no-repeat 15px 8px; position: relative;}
#navArea ul.topCategory li.navFolder{ background: url(/img/menu_navi_04.png) no-repeat 15px 11px; position: relative;}
#navArea ul.topCategory li.navLabel{ background: url(/img/menu_navi_05.png) no-repeat 16px 9px; position: relative;}
#navArea ul.topCategory li.navMail{ background: url(/img/menu_navi_06.png) no-repeat 15px 11px; position: relative;}
#navArea ul.topCategory li.navBook{ background: url(/img/menu_navi_07.png) no-repeat 16px 7px; position: relative;}
#navArea ul.topCategory li.navAuthor{ background: url(/img/menu_navi_08.png) no-repeat 12px 8px; position: relative;}
#navArea ul.topCategory li.navInfo{ background: url(/img/menu_navi_09.png) no-repeat 14px 9px;cursor: default; position: relative;}

#navArea ul.topCategory li.navSearch:hover{ background: url(/img/menu_navi_02_on.png) no-repeat 14px 9px;}
#navArea ul.topCategory li.navStar:hover{ background: url(/img/menu_navi_03_on.png) no-repeat 15px 8px;}
#navArea ul.topCategory li.navFolder:hover{ background: url(/img/menu_navi_04_on.png) no-repeat 15px 11px;}
#navArea ul.topCategory li.navLabel:hover{ background: url(/img/menu_navi_05_on.png) no-repeat 16px 9px;}
#navArea ul.topCategory li.navMail:hover{ background: url(/img/menu_navi_06_on.png) no-repeat 15px 11px;}
#navArea ul.topCategory li.navBook:hover{ background: url(/img/menu_navi_07_on.png) no-repeat 16px 7px;}
#navArea ul.topCategory li.navAuthor:hover{ background: url(/img/menu_navi_08_on.png) no-repeat 12px 8px;}
#navArea ul.topCategory li.navInfo:hover{ background: url(/img/menu_navi_09.png) no-repeat 14px 9px;}

#navArea ul.topCategory li.navSearch:before{ content: "履歴"; position: absolute; top:37px; width: 49px; display: block; text-align: center;}
#navArea ul.topCategory li.navStar:before{ content: "スター"; position: absolute; top:37px; width: 49px; display: block; text-align: center;}
#navArea ul.topCategory li.navFolder:before{ content: "フォルダ"; position: absolute; top:37px; width: 49px; display: block; text-align: center;}
#navArea ul.topCategory li.navLabel:before{ content: "ラベル"; position: absolute; top:37px; width: 49px; display: block; text-align: center;}
#navArea ul.topCategory li.navMail:before{ content: "新着"; position: absolute; top:37px; width: 49px; display: block; text-align: center;}
#navArea ul.topCategory li.navBook:before{ content: "収録誌"; position: absolute; top:37px; width: 49px; display: block; text-align: center;}
#navArea ul.topCategory li.navAuthor:before{ content: "著者"; position: absolute; top:37px; width: 49px; display: block; text-align: center;}
#navArea ul.topCategory li.navInfo:before{ content: "お知らせ"; position: absolute; top:40px; width: 49px; display: block; text-align: center;}

/*サブナビ*/
#navArea ul.topCategory li .toggleArea{display: none;margin-left: 50px;background: #fefef1; padding-top: 1px;padding-bottom: 15px; padding-left: 20px; cursor: default;}
#navArea ul.topCategory li ul.subMenu li{line-height: 1;cursor:pointer;border:none;height: auto;min-height:auto; margin-top: 5px;}
#navArea ul.topCategory li ul.subMenu li span{display: inline-block;margin-left: 0; padding:3px 25px 3px; font-size: 1.2rem; font-weight: normal; background: none;}
#navArea ul.topCategory li.navSearch ul.subMenu li span{background: url(/img/icon_clock_search_01.png) no-repeat 0 0; display: block;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
#navArea ul.topCategory li.navSearch ul.subMenu li span:hover{text-decoration: underline;}
#navArea ul.topCategory li.navSearch ul.subMenu li span.cur{ color: #329ac9; font-weight: bold;}
#navArea ul.topCategory li.navSearch ul.subMenu li.noIcon span{background: none;}
#navArea ul.topCategory li.navLabel ul.subMenu li span{background: none;padding:3px 0 3px; display: block;}
#navArea ul.topCategory li.navLabel ul.subMenu li span:hover{text-decoration: underline;}
#navArea ul.topCategory li.navLabel ul.subMenu li span.cur{ color: #329ac9; font-weight: bold;}
#navArea ul.topCategory li.navBook ul.subMenu li span{background: none;padding:3px 0 3px; display: block;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
#navArea ul.topCategory li.navBook ul.subMenu li span:hover{text-decoration: underline;}
#navArea ul.topCategory li.navBook ul.subMenu li span.cur{ color: #329ac9; font-weight: bold;}
#navArea ul.topCategory li.navAuthor ul.subMenu li span{background: none;padding:3px 0 3px; display: block;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
#navArea ul.topCategory li.navAuthor ul.subMenu li span:hover{text-decoration: underline;}
#navArea ul.topCategory li.navAuthor ul.subMenu li span.cur{ color: #329ac9; font-weight: bold;}

#navArea ul.topCategory li.navFolder ul.subMenu li span{background: none;padding:3px 0 3px; display: block;}
#navArea ul.topCategory li.navFolder ul.subMenu li span:hover{text-decoration: underline;}
#navArea ul.topCategory li.navFolder ul.subMenu li span.cur{ color: #329ac9; font-weight: bold;}
#navArea ul.topCategory li.navMail ul.subMenu li span{background: none;padding:3px 0 3px; display: block;}
#navArea ul.topCategory li.navMail ul.subMenu li span:hover{text-decoration: underline;}
#navArea ul.topCategory li.navMail ul.subMenu li span.cur{ color: #329ac9; font-weight: bold;}

/*メニュー展開時*/
#navArea.cur{width: 470px;}
#navArea.cur p.menu,
#navArea.cur ul.topCategory > li{height: auto; min-height: 54px;}
#navArea.cur p.menu span,
#navArea.cur ul.topCategory > li > span{ display: block;}
#navArea.cur .topCategoryWrap{ overflow-y: auto;}

/*お知らせエリア*/
#navArea ul.topCategory li.navInfo .infoBox{margin-left: 50px; padding:0 20px;line-height: 1.6; }
#navArea ul.topCategory li.navInfo .infoBox p.ttl{font-weight: bold; font-size: 1.3rem;margin-bottom: 5px;}
#navArea ul.topCategory li.navInfo .infoBox hr{border:none;border-top:1px dotted #bababa;line-height: 1.6; margin-top: 10px; padding-top: 5px;}
#navArea ul.topCategory li.navInfo .infoBox .infoList{margin-top: 10px;}
#navArea ul.topCategory li.navInfo .infoBox .infoList li{height: auto !important; min-height: auto !important;padding: 10px 0; border-top: 1px dotted #bababa;line-height: 1.6; cursor: default;}
#navArea ul.topCategory li.navInfo .infoBox .infoList li a{font-size: 1.3rem; color: #0075ab; display: inline-block;}

#navArea ul.topCategory li.navInfo .infoBox .infoList li em{display: block;margin-left: 0; padding:0; font-size: 1rem; font-weight: normal; background:none;}

/*フォルダ展開*/
#navArea ul.topCategory li ul.subMenu02{font-size: 1.2rem;margin-right: 22px;}
#navArea ul.topCategory li ul.subMenu02 li{border-top: 1px solid #dedede; position: relative;}
#navArea ul.topCategory li ul.subMenu02>li>span{display: block;background: #fff; border: 1px solid #dedede;padding: 12px 12px;margin: -1px 0;}
#navArea ul.topCategory li ul.subMenu02>li.hasChild>span{}
#navArea ul.topCategory li ul.subMenu02>li.hasChild>span>span{ cursor: pointer;}
#navArea ul.topCategory li ul.subMenu02>li.hasChild.cur>span{}
#navArea ul.topCategory li ul.subMenu02>li>span>em{position: relative; cursor: pointer;}
#navArea ul.topCategory li ul.subMenu02>li>span>em img{vertical-align: middle; margin-left: 10px;}

#navArea ul.topCategory li ul.subMenu02>li.hasChild strong{background: url(/img/icon_plus_05.png) no-repeat left center #fff;position: absolute; top: 12px; right: 12px; width: 12px; height: 12px; text-indent: -9999px; cursor: pointer; }
#navArea ul.topCategory li ul.subMenu02>li.hasChild strong.cur{background: url(/img/icon_minus_05.png) no-repeat left center #fff;}

#navArea ul.topCategory li ul.subMenu02>li>ul.subMenuChild{padding: 10px 0; display: none;}
#navArea ul.topCategory li ul.subMenu02>li:last-child ul.subMenuChild{padding-bottom: 0;}
#navArea ul.topCategory li ul.subMenu02 li ul.subMenuChild li{padding:7px 10px; border: none;}
#navArea ul.topCategory li ul.subMenu02 li ul.subMenuChild li span{ cursor: pointer;}
#navArea ul.topCategory li ul.subMenu02 li ul.subMenuChild li em{position: relative; cursor: pointer;}
#navArea ul.topCategory li ul.subMenu02 li ul.subMenuChild li em img{vertical-align: middle; margin-left: 10px;}
#navArea ul.topCategory li ul.subMenu02 li ul.subMenuChild li span:hover{text-decoration: underline;}
#navArea ul.topCategory li ul.subMenu02 li ul.subMenuChild li em li{padding: 0;border-left: 3px solid #b1b1b1;border-top: 1px solid #dedede; }
#navArea ul.topCategory li ul.subMenu02 li ul.subMenuChild li em li:first-child{border-top: none;}
#navArea ul.topCategory li ul.subMenu02 li ul.subMenuChild li em li:hover{text-decoration: none !important;}

#navArea ul.topCategory li .addBtn01{margin-top: 15px; cursor: pointer; background: #ededed; display: inline-block; font-size: 1.2rem;border: 1px solid #dedede;}
#navArea ul.topCategory li .addBtn01:hover{opacity: 0.8;}
#navArea ul.topCategory li .addBtn01 a{color: #333; display: block;padding: 10px; user-select:none;}
#navArea ul.topCategory li .addBtn01 a:hover{text-decoration: none;}

#navArea ul.topCategory li ul li ul.addBtnList{ display: none;position: absolute;right: -110px; top: 15px; background: #fff;box-shadow: 3px 3px 3px 0 rgba(0,0,0,0.3);width: 120px; border: 1px solid #dbdbdb; z-index: 4;}
#navArea ul.topCategory li ul li ul.addBtnList.longName{ display: none;position: absolute;right: 0; top: 15px; background: #fff;box-shadow: 3px 3px 3px 0 rgba(0,0,0,0.3);width: 120px; border: 1px solid #dbdbdb; z-index: 4;}
#navArea ul.topCategory li ul li ul.addBtnList li{border-left: 3px solid #b1b1b1; border-top: 1px solid #dbdbdb; }
#navArea ul.topCategory li ul ul.addBtnList li:first-child{border-top: none;}
#navArea ul.topCategory li ul li ul.addBtnList li:hover{ background: #ededed;border-left: 3px solid #6b6b6b;}
#navArea ul.topCategory li ul li ul.addBtnList li a{color: #333; display: block;padding: 12px 15px; user-select:none;}
#navArea ul.topCategory li ul li ul.addBtnList li a:hover{text-decoration: none;}

/*メール*/
#navArea ul.topCategory li ul.subMenu03{font-size: 1.2rem;margin-right: 22px;}
#navArea ul.topCategory li ul.subMenu03 li.new span {cursor: pointer;}
#navArea ul.topCategory li ul.subMenu03 li.new span{background: url(/img/icon_mail_01.png) no-repeat left center;}
#navArea ul.topCategory li ul.subMenu03>li>span{display: inline-block;padding: 8px 0 8px 25px; cursor: pointer;}
#navArea ul.topCategory li ul.subMenu03>li em{font-weight: normal; position: relative; cursor: pointer;}
#navArea ul.topCategory li ul.subMenu03>li em img{vertical-align: middle; margin-left: 10px;}
#navArea ul.topCategory li ul.subMenu03>li>span:hover,
#navArea ul.topCategory li ul.subMenu03>li em.cur{text-decoration: none; }
#navArea ul.topCategory li ul.subMenu03>li>span:hover{text-decoration: underline;}


/*--------------------------------
listArea
---------------------------------*/
#listArea{display: table-cell;width: 470px;border-right: 1px solid #e3e3e3;padding-left: 50px; vertical-align: top;}
#listArea .listAreaHead{border-bottom: 2px solid #e3e3e3;padding: 10px 15px; overflow: auto;}
#listArea .listAreaHead p{font-size: 1.4rem;}
/*icon*/
#listArea .listAreaHead p.label{background: url(/img/icon_label_02.png) no-repeat left center;padding-left: 25px;}
#listArea .listAreaHead p.star{background: url(/img/icon_star_01.png) no-repeat left center;padding-left: 25px;}
#listArea .listAreaHead p.search{background: url(/img/icon_search_02.png) no-repeat left center;padding-left: 25px;}
#listArea .listAreaHead p.folder{background: url(/img/icon_folder_03.png) no-repeat left center;padding-left: 25px;}
#listArea .listAreaHead p.mail{background: url(/img/icon_mail_03.png) no-repeat left center;padding-left: 25px;}
#listArea .listAreaHead p.book{background: url(/img/icon_book_01.png) no-repeat left center;padding-left: 25px;}
#listArea .listAreaHead p.author{background: url(/img/icon_author_01.png) no-repeat left center;padding-left: 25px;}

#listArea .listAreaHead p strong{font-size: 1.8rem; font-weight: bold; color: #329ac9;padding-right: 5px;}
#listArea .listAreaHead p em{font-size: 1.6rem; font-weight: bold;padding-right: 5px;}

#listArea .listAreaLoader{text-align:center;padding-top:40px}

#listArea .listAreaMessage div{float: left;}
#listArea .listAreaMessage div img{width: 60px; padding: 10px; margin-left: 10px; margin-top: 5px;}
#listArea .listAreaMessage div.blankMessage{font-size: 2.0rem;}

#listArea .listAreaInner{ overflow-y: auto; box-shadow:rgba(0, 0, 0, 0.1) 0 -5px 8px -3px inset;}
#listArea .listAreaInner ul li{position: relative; border-top: 1px solid #dedede; cursor: pointer;line-height: 1.4;padding: 14px 20px 12px 40px;}
#listArea .listAreaInner ul li:first-child{border: none;}
#listArea .listAreaInner ul li:hover{background: #fafafa;}
#listArea .listAreaInner ul li.cur{background: #edfaff;border-left: 4px solid #329ac9;padding: 14px 20px 12px 36px;}
#listArea .listAreaInner ul li.cur span.star{left: 9px;}

#listArea .listAreaInner ul li span{display: block;}
#listArea .listAreaInner ul li span.star{background: url(/img/icon_list_star_01.png) no-repeat 0 0;width: 20px;height: 20px; text-indent: -9999px;position: absolute; left: 13px; top: 17px; z-index: 2;}
#listArea .listAreaInner ul li span.star.starCur{background: url(/img/icon_list_star_01_on.png) no-repeat 0 0;}
#listArea .listAreaInner ul li span.ttl{font-size: 1.6rem;font-weight: bold;line-height: 1.4; }
#listArea .listAreaInner ul li span.lead01{font-size: 1.2rem; color: #6e6e6e; margin-top: 5px; word-break : break-all;}
#listArea .listAreaInner ul li span.lead02{font-size: 1.2rem; color: #6e6e6e;}
#listArea .listAreaInner ul li span.detail01{margin-top: 5px; color: #a9a9a9; font-style: italic;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
#listArea .listAreaInner ul li span.detail02{ color: #a9a9a9;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
#listArea .listAreaInner ul li span.icon{text-align: right;margin-top: 2px;}
#listArea .listAreaInner ul li span.icon em{font-size: 1.1rem;line-height: 1;padding:4px 6px; background: #e5e5e5; display: inline-block;margin-left: 3px;margin-top: 3px;}

#listArea .listAreaFoot{border-top: 1px solid #e3e3e3;padding: 14px 15px 12px; font-size: 1.2rem;}
#listArea .listAreaFoot .pageSkip{width: 100%; display: table; padding: 0;}
#listArea .listAreaFoot .pageSkip li{width: 50%; display: table-cell;}
#listArea .listAreaFoot .pageSkip li a{ color: #282828; background: url(/img/icon_listarrow_r_01.png) no-repeat right  center; padding-right: 15px; user-select:none;}
#listArea .listAreaFoot .pageSkip li.prev a{background: url(/img/icon_listarrow_l_01.png) no-repeat left  center; padding-left: 15px; padding-right: 0;}
#listArea .listAreaFoot .pageSkip li.next {text-align: right;}
#listArea .listAreaFoot .pageSkip li a:hover{text-decoration: underline;}

/*langEn*/
body.langEn #listArea .listAreaInner ul li span.ttl{display: none;}
body.langEn #listArea .listAreaInner ul li span.lead01{font-size: 1.6rem;font-weight: bold;line-height: 1.4; color: #333; margin: 0;}
body.langEn #listArea .listAreaInner ul li span.lead02{font-size: 1.2rem; color: #6e6e6e;}


/*--------------------------------
mainArea
---------------------------------*/
#mainArea{ vertical-align: top; overflow-x: auto;border-right:#dedede 1px solid; height: auto;}
#mainArea .mainAreaHead{border-bottom: 2px solid #e3e3e3;padding: 0 15px 12px;line-height: 1.6;min-width: 804px;}
#mainArea .mainAreaHead .selectArea{padding-right: 100px;position: relative; padding-top: 10px;}
#mainArea .mainAreaHead .selectArea p img{vertical-align: middle; margin-right: 5px; margin-left: 15px;}
#mainArea .mainAreaHead .selectArea p img:first-child{margin-left: 0;}
#mainArea .mainAreaHead .selectArea .addBtn{border:1px solid #ddd; font-size: 1.1rem; padding: 5px 6px; line-height: 1; cursor: pointer;margin-right: 10px; display: inline-block; user-select:none;}
#mainArea .mainAreaHead .selectArea .addBtn:hover{background: #f2f2f2;}
#mainArea .mainAreaHead .selectArea .addBtn02{border:1px solid #ddd; font-size: 1.1rem; padding: 5px 20px 5px 6px; line-height: 1; cursor: pointer; background: url(/img/icon_plus_03.png) no-repeat right 0.6em;margin-right: 10px;}
#mainArea .mainAreaHead .selectArea .addBtn02:hover{background: url(/img/icon_plus_03.png) no-repeat right 0.6em #f2f2f2;}

#mainArea .mainAreaHead .selectArea .curBtn{border:1px solid #e5e5e5; font-size: 1.1rem; padding: 5px 20px 5px 6px; line-height: 1; cursor: pointer; background: url(/img/icon_close_02.png) no-repeat right center #e5e5e5;margin-right:6px; display: inline-block; margin-top: 5px;}
#mainArea .mainAreaHead .selectArea .curBtn:hover{background: url(/img/icon_close_02.png) no-repeat right center #c6c6c6;}

#mainArea .mainAreaHead p.num{position: absolute; top: 15px; right:0; font-size: 1.2rem;}
#mainArea .mainAreaHead .ttlBox{line-height: 1.6;padding-top:18px;padding-right:30px; position: relative;}
#mainArea .mainAreaHead h2{font-weight: bold; font-size: 1.8rem; margin-bottom: 2px;}
#mainArea .mainAreaHead p{font-size: 1.4rem; color: #6e6e6e;}
#mainArea .mainAreaHead p.star{ cursor: pointer;width: 21px;height: 21px; text-indent: -9999px; position: absolute; top: 20px; right:0;background: url(/img/icon_detail_star_01.png) no-repeat 0 0;}
#mainArea .mainAreaHead p.star.starCur{background: url(/img/icon_detail_star_01_on.png) no-repeat 0 0;}

/*langEn*/
body.langEn #mainArea .mainAreaHead h2{display: none;}
body.langEn #mainArea .mainAreaHead .ttlBox p{font-weight: bold; font-size: 1.8rem; margin-bottom: 2px; color: #333;}
body.langEn #mainArea .mainAreaHead .ttlBox p.num{position: absolute;font-weight: normal; top: 15px; right:0; font-size: 1.2rem;color: #6e6e6e;}

#mainArea .mainAreaInner{ overflow-y: auto; box-shadow: 0 -7px 8px -6px rgba(0,0,0,0.7) inset;padding: 4px 20px 0 ;min-width: 804px;}
#mainArea .mainAreaInner .itemData01{display: table; width: 100%;border-bottom: 1px solid #e3e3e3;padding: 10px 0 12px;}
#mainArea .mainAreaInner .itemData01 dt{color: #898989;width: 65px;display: table-cell;}
#mainArea .mainAreaInner .itemData01 dd{display: table-cell; font-size: 1.2rem;}

#mainArea .mainAreaInner .itemData02{padding: 10px 0;padding-bottom: 60px;}
#mainArea .mainAreaInner .itemData02 dt{color: #898989;padding-bottom: 10px;padding-top: 5px;}
#mainArea .mainAreaInner .itemData02 dd{font-size: 1.5rem;}
#mainArea .mainAreaInner .itemData02 dd p{margin-top: 20px;}
#mainArea .mainAreaInner .itemData02 dd p:first-child{margin-top: 0;}
#mainArea .mainAreaInner .notice01{ text-align: right; color: #898989;font-size: 1.2rem;vertical-align: top;}

#mainArea .mainAreaFoot{line-height: 1;padding: 13px 0 13px 15px; min-width: 804px; position: relative;}
#mainArea .mainAreaFoot .articleNav{padding: 10px 20px 12px;width: 792px; overflow: hidden;font-size: 1.2rem; position: absolute;left:0; top: -58px; background-color: rgba(255,255,255,0.7); zoom:1;}
#mainArea .mainAreaFoot .articleNav li{display: inline-block; background: #dcdcdc;padding: 12px 15px; text-align: center;float: left;width: 160px; cursor: pointer; border-radius: 2px;}
#mainArea .mainAreaFoot .articleNav li span{background: url(/img/icon_listarrow_l_01.png) no-repeat left center; padding-left: 15px; user-select:none;}
#mainArea .mainAreaFoot .articleNav li.next{float: right;}
#mainArea .mainAreaFoot .articleNav li.next span{background: url(/img/icon_listarrow_r_01.png) no-repeat right center; padding-right: 15px;padding-left: 0;}
#mainArea .mainAreaFoot .articleNav li:hover{opacity: 0.8;}

#mainArea .mainAreaFoot .mainAreaFootInner{width: 100%; overflow: hidden;}
#mainArea .mainAreaFoot .linkNav{float: left;}
#mainArea .mainAreaFoot .linkNav li{margin-right: 9px;display: inline-block; cursor: pointer;border-radius: 4px; color: #fff;width: 240px;line-height: 54px;font-size: 1.6rem; text-align: center;}
#mainArea .mainAreaFoot .linkNav li span{font-weight: bold;}
#mainArea .mainAreaFoot .linkNav li.btn01{background: #3cb57b;box-decoration-break: 1px solid #3cb57b; border: 1px solid #3cb57b;}
#mainArea .mainAreaFoot .linkNav li.btn01 span{padding-left: 35px; height: 35px; overflow: hidden; background: url(/img/icon_link_01.png) no-repeat left center; user-select:none;}
#mainArea .mainAreaFoot .linkNav li.btn01.nolink{background: #fff; border: 1px solid #959394; color: #959394; cursor: default;}
#mainArea .mainAreaFoot .linkNav li.btn01.nolink span{padding-left: 35px; background: url(/img/icon_nolink_01.png) no-repeat left center;}
#mainArea .mainAreaFoot .linkNav li.btn01.nolink:hover{opacity: 1;}
#mainArea .mainAreaFoot .linkNav li.btn02{background: #329ac9; box-decoration-break: 1px solid #329ac9;}
#mainArea .mainAreaFoot .linkNav li.btn02 span{padding-left: 35px; background: url(/img/icon_pubmed_01.png) no-repeat left center; user-select:none;}
#mainArea .mainAreaFoot .linkNav li:hover{opacity: 0.8;}

#mainArea .mainAreaFoot .snsBtn{float: right; position: relative;}
#mainArea .mainAreaFoot .snsBtn li{ width:48px; height: 53px; cursor: pointer;position: absolute; top: 0;}
#mainArea .mainAreaFoot .snsBtn li span{ display: none;}
#mainArea .mainAreaFoot .snsBtn li:hover span{ display: block; text-align: center; width: 48px; top: 46px; position: absolute;}
#mainArea .mainAreaFoot .snsBtn li.mail{ background: url(/img/icon_sns_01.png) no-repeat center center;right: 223px; position: relative;}
#mainArea .mainAreaFoot .snsBtn li.mail:hover{background: url(/img/icon_sns_01_on.png) no-repeat center center;}
#mainArea .mainAreaFoot .snsBtn li.evernote{background: url(/img/icon_sns_03.png) no-repeat center center;right: 152px;}
#mainArea .mainAreaFoot .snsBtn li.evernote:hover{background: url(/img/icon_sns_03_on.png) no-repeat center center;}
#mainArea .mainAreaFoot .snsBtn li.dropbox{background: url(/img/icon_sns_04.png) no-repeat center center;right: 80px;}
#mainArea .mainAreaFoot .snsBtn li.dropbox:hover{background: url(/img/icon_sns_04_on.png) no-repeat center center;}
#mainArea .mainAreaFoot .snsBtn li.dropbox.cur{background: url(/img/icon_sns_04_on.png) no-repeat center center;}
#mainArea .mainAreaFoot .snsBtn li.dropbox.off{background: url(/img/icon_sns_04_off.png) no-repeat center center; pointer-events: none;}
#mainArea .mainAreaFoot .snsBtn li.trashbox{background: url(/img/icon_trashbox_01.png) no-repeat center 8px;border-left: 1px solid #d9d9d9;width:70px; height: 53px;margin-left: 10px;text-indent: 0;font-size: 1.1rem; color: #979797;text-align: center;vertical-align: bottom;padding-top: 40px; right: 0; user-select:none;}
#mainArea .mainAreaFoot .snsBtn li.trashbox:hover{background: url(/img/icon_trashbox_01_on.png) no-repeat center 8px; color: #333;}


/*--------------------------------
footer
---------------------------------*/
footer{background: #474747;color: #fff; position: fixed; bottom: 0; height: 28px; display: table; line-height: 1;padding: 4px 20px 8px 10px; font-size: 1.1rem; width: 1280px; z-index: 3;}
.footLinks{display: table-cell;}
.footLinks ul li{display: inline-block; border-right: 2px solid #c3c3c3;margin: 5px 0 0 -4px; padding: 0 10px;}
.footLinks ul li:last-child{border: none;}
.footLinks ul li a{ color: #fff;}
.footLinks ul li a[target="_blank"]{padding-right: 15px; no-repeat right center;}
p.copy{display: table-cell; text-align: right;}


/*--------------------------------------------------------------------------------------------------------------------------
Component
---------------------------------------------------------------------------------------------------------------------------*/
#co1wrap{min-width:900px;width: 100px;}

/*header*/
#co1wrap header{width: 100%;min-width:900px; }
#co1wrap header p.logo{width: 900px; margin: 0 auto;padding: 15px 0;}
#co1wrap header h1 {font-size: 2.4rem; width: 100%; display: block;background: #edfaff; padding: 30px 0;}
#co1wrap header h1 strong{width: 900px; margin: 0 auto; display: block;font-weight: bold;}

/*contents*/
#contents{}

/*footer*/
#co1wrap footer{min-width:900px;width: 100%;background: #e8e8e8; padding: 20px 0;}
.btnCol2{text-align: center; width: 900px; margin: 0 auto;}
.btnCol2 li{display: inline-block;padding:0 20px;}
.btnCol2 li input{ cursor: pointer;-webkit-appearance: none; color: #fff;font-size: 1.8rem; font-weight: bold; border: none; border-radius: 4px; display: block;min-width: 240px; text-align: center;padding: 15px 0;}
.btnCol2 li.save{}
.btnCol2 li.save input{background: #329ac9;}
.btnCol2 li.cancel{}
.btnCol2 li.cancel input{ background: #afafaf;}
.btnCol2 li input:hover{ opacity: 0.8;}


/*---- j10 add css 260715 ----*/
.lpWrap .lpTop {
  position: relative;
  z-index: 1;
  background: #fff;
  color: #000;
}

.lpWrap .lpTop,
.lpWrap .lpTop * {
  box-sizing: border-box;
}

.lpWrap .lpTop {
  --lp-inner: 690px;
  width: 100%;
  margin: 0;
  font-family: "Hiragino Kaku Gothic Pro", "Yu Gothic", Meiryo, sans-serif;
  font-size: 16px;
  line-height: 1.9;
}

.lpWrap .lpTop h1,
.lpWrap .lpTop h2,
.lpWrap .lpTop h3,
.lpWrap .lpTop p,
.lpWrap .lpTop ul,
.lpWrap .lpTop li {
  margin: 0;
  padding: 0;
}

.lpWrap .lpTop h1,
.lpWrap .lpTop h2,
.lpWrap .lpTop h3 {
  font-weight: 700;
}

.lpWrap .lpTop li {
  list-style: none;
}

.lpWrap .lpTop a {
  color: inherit;
  text-decoration: none;
}

.lpWrap .lpTop img {
  max-width: 100%;
  height: auto;
}

.lpWrap .lpTop p {
  font-size: 16px;
  line-height: 1.9;
}

/* Key visual */
.lpWrap .lpTop .hero {
  position: relative;
  height: 468px;
  overflow: hidden;
  background: #f8f8f8;
}

.lpWrap .lpTop .heroCopyPc {
  position: absolute;
  z-index: 2;
  top: 35px;
  left: 49px;
  color: #222;
  font-family: "Hiragino Mincho Pro", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-size: 34px;
  font-weight: 700;
  line-height: 1.35;
  white-space: nowrap;
}

.lpWrap .lpTop .heroTitle {
  position: absolute;
  z-index: 2;
  top: 99px;
  left: 49px;
  display: block;
  height: auto;
}

.lpWrap .lpTop .heroTitlePc {
  display: block;
  width: 400px;
  mix-blend-mode: multiply;
}

.lpWrap .lpTop .heroVisual {
  position: absolute;
  inset: 0;
}

.lpWrap .lpTop .heroDevice {
  position: absolute;
  left: -170px;
  bottom: -18px;
  width: 1160px;
  max-width: none;
}

.lpWrap .lpTop .heroDoctor {
  position: absolute;
  top: 99px;
  right: 0;
  bottom: auto;
  width: 362px;
  max-width: none;
  height: auto;
}

.lpWrap .lpTop a.howtoBubble {
  position: absolute;
  z-index: 4;
  right: 35px;
  bottom: 17px;
  display: block;
  width: 106px;
  height: 106px;
  padding: 0;
  overflow: visible;
}

.lpWrap .lpTop a.howtoBubble.fixed {
  position: fixed;
  right: auto;
  bottom: 45px;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease, visibility 0s linear 0s;
}

.lpWrap .lpTop a.howtoBubble.fixed.hide {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}

.lpWrap .lpTop a.howtoBubble:hover{
  opacity: 0.8;
}

.lpWrap .lpTop .howtoBubble img {
  display: block;
  width: 106px;
  height: 106px;
  max-width: none;
}

.lpWrap .lpTop .anchorSection {
  background: #ededed;
}

.lpWrap .lpTop .anchorNav {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding: 14px 35px 14px 20px;
  background: #ededed;
}

.lpWrap .lpTop .anchorNav a {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 76px;
  padding: 12px 38px 12px 20px;
  border-radius: 7px;
  background: #177CA8;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
}

.lpWrap .lpTop .anchorNav a:hover{
  opacity: 0.8;
}

.lpWrap .lpTop .introBox a:hover {
  text-decoration: underline;
}

.lpWrap .lpTop .anchorNav a::after,
.lpWrap .lpTop .introBox a::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  border-right: 2px solid #177CA8;
  border-bottom: 2px solid #177CA8;
  transform: rotate(45deg);
}

.lpWrap .lpTop .anchorNav a::after {
  top: 32px;
  right: 19px;
  border-color: #fff;
}

/* Shared sections */
.lpWrap .lpTop .section {
  padding: 60px 0 58px;
}

.lpWrap .lpTop .search,
.lpWrap .lpTop .howto,
.lpWrap .lpTop .notification,
.lpWrap .lpTop .pubMed {
  background: #F8F8F8;
}

.lpWrap .lpTop .section > * {
  width: auto;
  margin-right: 30px;
  margin-left: 30px;
}

.lpWrap .lpTop .sectionTitle {
  padding-bottom: 30px;
  border-bottom: 4px solid #efefef;
  color: #177CA8;
  font-family: "Hiragino Mincho Pro", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-size: 36px;
  font-weight: 700;
  line-height: 1.45;
  text-align: center;
}

.lpWrap .lpTop .sectionTitle span {
  display: block;
  margin-top: 4px;
  color: #7d7d7d;
  font-family: "Hiragino Mincho Pro", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
}

.lpWrap .lpTop .lead {
  padding-top: 30px;
  font-size: 20px;
  line-height: 1.9;
  text-align: center;
}

.lpWrap .lpTop .note {
  margin-top: 28px;
  font-size: 12px;
  line-height: 1.7;
}

/* About */
.lpWrap .lpTop .problemBox {
  display: grid;
  grid-template-columns: 110px 1fr;
  align-items: end;
  gap: 28px;
  min-height: 145px;
  margin-top: 32px;
  padding: 0 50px 0 108px;
  overflow: hidden;
  border-radius: 7px;
  background: #EFEFEF;
}

.lpWrap .lpTop .problemBox img {
  display: block;
  width: 110px;
  max-width: none;
  align-self: end;
}

.lpWrap .lpTop .problemBox ul {
  align-self: center;
}

.lpWrap .lpTop .problemBox li {
  font-size: 18px;
  line-height: 2;
}

.lpWrap .lpTop .problemBox li::before,
.lpWrap .lpTop .introBox li::before {
  content: "・";
  margin-right: .35em;
}

.lpWrap .lpTop .introBox {
  position: relative;
  display: grid;
  grid-template-columns: 344px 1fr;
  align-items: center;
  gap: 32px;
  min-height: 190px;
  margin-top: 20px;
  padding: 40px 40px 32px;
  overflow: visible;
  border: 2px solid #177CA8;
  border-radius: 6px;
  background: #EEF8FD;
}

.lpWrap .lpTop .introBox::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: -21px;
  left: 50%;
  width: 38px;
  height: 54px;
  border: 0;
  background: url("../img/about_arrow.png") center / 38px 54px no-repeat;
  transform: translateX(-50%);
}

.lpWrap .lpTop .logoImage {
  display: block;
  height: auto;
  object-fit: contain;
}

.lpWrap .lpTop .logoSmall {
  display: block;
  width: 344px;
  max-width: none;
}

.lpWrap .lpTop .introBox ul {
  position: relative;
  z-index: 3;
}

.lpWrap .lpTop .introBox li {
  position: relative;
  display: flex;
  align-items: center;
  color: #177CA8;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
}

.lpWrap .lpTop .introBox li + li {
  margin-top: 16px;
}

.lpWrap .lpTop .introBox li::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  margin-right: 10px;
  border-radius: 50%;
  background: #177CA8;
  vertical-align: middle;
}

.lpWrap .lpTop .introBox a {
  position: relative;
  display: inline-block;
  padding-right: 18px;
}

.lpWrap .lpTop .introBox a::after {
  top: 5px;
  right: -4px;
}

/* Search features */
.lpWrap .lpTop .feature {
  display: grid;
  grid-template-columns: 1fr 318px;
  align-items: start;
  gap: 20px;
  margin-top: 40px;
}

.lpWrap .lpTop .feature + .feature {
  margin-top: 40px;
}

.lpWrap .lpTop .featureTextRight {
  grid-template-columns: 318px 1fr;
}

.lpWrap .lpTop .feature > img {
  display: block;
  width: 318px;
}

.lpWrap .lpTop .featureBody {
  display: grid;
  grid-template-columns: 40px 1fr;
  align-items: center;
  gap: 0 14px;
  min-height: 40px;
  padding-left: 0;
}

.lpWrap .lpTop .featureIcon {
  display: block;
  width: 40px;
  height: 40px;
}

.lpWrap .lpTop .featureIcon img {
  display: block;
  width: 40px;
  height: 40px;
  max-width: none;
}

.lpWrap .lpTop .feature h3 {
  color: #111;
  font-family: "Hiragino Mincho Pro", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.45;
}

.lpWrap .lpTop .feature p {
  grid-column: 1 / -1;
  margin-top: 12px;
  font-size: 16px;
  line-height: 1.9;
}

/* Voice */
.lpWrap .lpTop .voiceGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-top: 30px;
}

.lpWrap .lpTop .voiceGrid article {
  font-size: 14px;
  line-height: 1.8;
}

.lpWrap .lpTop .voiceBalloon {
  position: relative;
  min-height: 76px;
  padding: 12px 16px;
  border-radius: 8px;
  background: #DCEDF5;
  color: #177CA8;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.7;
  text-align: left;
}

.lpWrap .lpTop .voiceBalloon::after {
  content: "";
  position: absolute;
  bottom: -14px;
  left: 50%;
  border-top: 15px solid #DCEDF5;
  border-right: 10px solid transparent;
  border-left: 10px solid transparent;
  transform: translateX(-50%);
}

.lpWrap .lpTop .voiceProfile {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0 14px;
}

.lpWrap .lpTop .voiceProfile img {
  width: 60px;
}

.lpWrap .lpTop .voiceProfile strong {
  font-size: 14px;
  line-height: 1.8;
}

.lpWrap .lpTop .voiceGrid article > p:not(.voiceBalloon) {
  font-size: 14px;
  line-height: 1.8;
}

/* How to */
.lpWrap .lpTop .step {
  margin-top: 30px;
}

.lpWrap .lpTop .step h3 {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 11px;
  font-family: "Hiragino Mincho Pro", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-size: 24px;
  line-height: 1.45;
}

.lpWrap .lpTop .step h3 span,
.lpWrap .lpTop .step h3 span img {
  display: block;
  width: 60px;
  height: 60px;
  max-width: none;
  flex: 0 0 60px;
}

.lpWrap .lpTop .step > img {
  display: block;
  width: 100%;
}

/* Storage */
.lpWrap .lpTop .cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  margin-top: 30px;
}

.lpWrap .lpTop .cards article {
  padding: 0;
  background: transparent;
  text-align: left;
}

.lpWrap .lpTop .cards h3 {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 10px;
  color: #111;
  font-family: "Hiragino Mincho Pro", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-size: 24px;
}

.lpWrap .lpTop .cards .cardIcon {
  width: 30px;
  height: 30px;
  object-fit: contain;
  image-rendering: auto;
}

.lpWrap .lpTop .cardPanel {
  min-height: 204px;
  padding: 32px 20px 28px;
  border-radius: 8px;
  background: #DCEDF5;
  text-align: center;
}

.lpWrap .lpTop .cardPanel > img {
  display: block;
  width: auto;
  max-width: 420px;
  height: auto;
  max-height: 112px;
  margin: 0 auto;
}

.lpWrap .lpTop .cardPanel p {
  margin-top: 20px;
  font-size: 16px;
  line-height: 1.8;
}

/* Notification */
.lpWrap .lpTop .noticeHeading {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 36px;
  font-family: "Hiragino Mincho Pro", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-size: 26px;
  line-height: 1.4;
}

.lpWrap .lpTop .noticeHeading img {
  display: block;
  width: 30px;
  height: 27px;
  object-fit: contain;
}

.lpWrap .lpTop .noticePanel {
  margin-top: 16px;
  padding: 44px 28px 30px;
  border-radius: 8px;
  background: #DCEDF5;
  text-align: center;
}

.lpWrap .lpTop .noticeImage {
  display: block;
  width: 420px;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

.lpWrap .lpTop .noticeImageMail {
  margin-top: 32px;
}

.lpWrap .lpTop .noticePanel > p {
  margin-top: 20px;
  font-size: 16px;
  line-height: 1.8;
}

/* Third party */
.lpWrap .lpTop .serviceList {
  display: flex;
  justify-content: center;
  gap: 30px;
  margin-top: 30px;
}

.lpWrap .lpTop .serviceList img {
  display: block;
  width: 135px;
  height: 135px;
}

.lpWrap .lpTop .outlineBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 274px;
  min-height: 51px;
  margin: 30px auto 0;
  padding: 8px 24px;
  border: 1px solid #177CA8;
  border-radius: 26px;
  color: #177CA8;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
}

.lpWrap .lpTop .outlineBtn:hover {
  background: #EEF8FD;
}

.lpWrap .lpTop .outlineBtn::after {
  content: "";
  display: block;
  width: 7px;
  height: 7px;
  margin-left: 12px;
  border-right: 2px solid #177CA8;
  border-bottom: 2px solid #177CA8;
  transform: rotate(-45deg);
}


.lpWrap .lpTop .thirdParty .note {
  margin-top: 30px;
}

/* CTA */
.lpWrap .lpTop .cta {
  padding: 48px 0 60px;
  background: #F8F8F8;
  text-align: center;
}

.lpWrap .lpTop .logoCta {
  width: 424px;
  margin: 0 auto;
  background: #fff;
}

.lpWrap .lpTop .cta p {
  margin-top: 22px;
  font-family: "Hiragino Mincho Pro", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.65;
}

/* CareNet and PubMed */
.lpWrap .lpTop .careNet h2,
.lpWrap .lpTop .pubMed > h2 {
  font-family: "Hiragino Mincho Pro", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-size: 30px;
  text-align: center;
}

.lpWrap .lpTop .careNet h2 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

.lpWrap .lpTop .pubMed > h2 {
  font-size: 28px;
}

.lpWrap .lpTop .careNet h2 span img {
  display: inline-block;
  width: 140px;
  vertical-align: middle;
  transform: translateY(-3px);
}

.lpWrap .lpTop .careNetGrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  align-items: center;
  gap: 20px;
  margin-top: 30px;
}

.lpWrap .lpTop .careNetGrid p {
  font-size: 16px;
  line-height: 1.85;
}

.lpWrap .lpTop .careNetGrid img {
  display: block;
  width: 280px;
  height: auto;
}

.lpWrap .lpTop .pubMedGrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px 30px;
  margin-top: 36px;
}

.lpWrap .lpTop .pubMedGrid h3 {
  padding: 8px 12px;
  border-radius: 4px;
  background: #111;
  color: #fff;
  font-size: 16px;
  line-height: 1.45;
}

.lpWrap .lpTop .pubMedGrid p {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.8;
}
/*---- // j10 add css 260715 ----*/