@charset "utf-8";

@import "/Portals/0/css/old_contents.css";

/*===========================================================
 default
===========================================================*/
a{color:#70c7b1;text-decoration:underline;}
a:hover{opacity:0.65;color:#70c7b1;text-decoration:none;}

/* animation
------------------------------ */
a,
a:link,
a:visited,
a:before,
a:after,
input[type="submit"]:not(.submitBtn){transition-delay:0s;transition-timing-function:ease-in-out;transition-duration:0.3s;transition-property:opacity,border,background,color,height,font-size,padding;}

h1{font-size:225%;text-align:center;}/*36px*/
h1:after{content:"";display:block;width:50px;height:6px;margin:10px auto 0;background:#f2cd00;}
h2{position:relative;padding-bottom:0.25em;border-bottom:4px solid #41bea3;font-size:200%;}/*32px*/
h2:after{content:"";display:block;position:absolute;bottom:-4px;left:0;width:150px;height:4px;background:#70c7b1;}
h3{border-bottom:2px solid #41bea3;font-size:175%;}/*28px*/
h4{position:relative;font-size:150.0%;}/*24px*/
h4:after{content:"";display:block;position:absolute;bottom:-2px;left:0;width:70px;height:2px;background:#41bea3;}
h5{padding:0 0 0 20px;border-left:1px solid #41bea3;font-size:125.0%;}/*20px*/
h6{position:relative;padding:0 0 0 20px;font-size:112.5%;}/*18px*/
h6:before{content:"";display:block;position:absolute;top:0.5em;left:0;width:10px;height:2px;background:#f2cd00;}
/*.ContentPane h2:first-of-type{margin-top:0;}*/


/* pc/sp settings */
.pcArea{display:block;}
.spArea{display:none;}

/*========================================================
 base.css
========================================================*/

/* --------------------------------------------------
	txt
-------------------------------------------------- */
/* font-size
------------------------------ */
.txtXXLarge{font-size:200%;line-height:1.4;}/*32px*/
.txtXLarge{font-size:175%;line-height:1.4;}/*28px*/
.txtLarge{font-size:150.0%;line-height:1.4;}/*24px*/
.txtSmall{font-size:81.3%;line-height:1.6;}/*13px*/

/* font-color
------------------------------ */
.colorGreen{color:#70c7b1;}


/* --------------------------------------------------
	link
-------------------------------------------------- */
/* linkBtn
------------------------------ */
a.linkBtn,
.linkBtn a{border:2px solid #70c7b1;border-radius:3px;background:#fff;color:#222;font-weight:bold;}

/* linkColoredBtn
------------------------------ */
a.linkColoredBtn,
.linkColoredBtn a{display:inline-block;position:relative;padding:0.5em 1em;border-radius:3px;background-color:#f2cd00;color:#fff;font-weight:bold;text-decoration:none;-webkit-transition:opacity 0.25s ease-out;transition:opacity 0.25s ease-out;}
a.linkColoredBtn:hover,
.linkColoredBtn a:hover{opacity:0.75;text-decoration:none;}
/* shrink */
a.linkColoredBtn.shrink,
.linkColoredBtn.shrink a{padding:0.25em 0.5em;}
/* bulge */
a.linkColoredBtn.bulge,
.linkColoredBtn.bulge a{padding:1.5em 2em;}
/* full */
a.linkColoredBtn.full,
.linkColoredBtn.full a{display:block;}

/* linkTxt
------------------------------ */
a.linkTxt,
.linkTxt a{padding-left:0.75em;color:#222;font-weight:bold;}
a.linkTxt:before,
.linkTxt a:before{width:0;height:0;border-width:3.5px 0 3.5px 5px;border-color:transparent transparent transparent #f2cd00;border-style:solid;}
a.linkTxt:hover,
.linkTxt a:hover{text-decoration:underline;}

/* linkBtn + linkTxt
------------------------------ */
a.linkBtn.linkTxt,
.linkBtn.linkTxt a{text-decoration:none;}
a.linkBtn.linkTxt:before,
.linkBtn.linkTxt a:before{border-color:transparent transparent transparent #41bea3;}

/* linkColoredBtn + linkTxt
------------------------------ */
a.linkColoredBtn.linkTxt,
.linkColoredBtn.linkTxt a{display:inline-block;position:relative;position:relative;padding-left:1.7em;color:#fff;text-decoration:none;-webkit-transition:opacity 0.25s ease-out;transition:opacity 0.25s ease-out;}
a.linkColoredBtn.linkTxt:before,
.linkColoredBtn.linkTxt a:before{top:0;bottom:0;left:0.7em;border-color:transparent transparent transparent #fff;background:linear-gradient(45deg,transparent 40%,#fff 40%,#fff 60%,transparent 60%,transparent 100%),linear-gradient(135deg,transparent 40%,#fff 40%,#fff 60%,transparent 60%,transparent 100%);background-size:100% 50%;background-repeat:no-repeat;background-position:top left,bottom left;}

/* linkInpage
------------------------------ */
a.linkInpage,
.linkInpage a{padding-left:2.5em;border-radius:3px;background-color:rgba(112,199,177,0.3);color:#222;font-weight:bold;text-decoration:none;}
a.linkInpage:before,
.linkInpage a:before{left:1.1em;width:0;height:0;border-width:5px 3.5px 0 3.5px;border-color:#70c7b1 transparent transparent transparent;border-style:solid;}
a.linkInpage:after,
.linkInpage a:after{content:"";position:absolute;top:50%;left:0.7em;z-index:3;transform:translateY(-50%);width:20px;height:20px;border-radius:10px;background:#fff;}


/* --------------------------------------------------
	table
-------------------------------------------------- */
.tableBasic{border-right:1px solid #999;border-bottom:1px solid #999;}
.tableBasic > tbody > tr > th,
.tableBasic > tbody > tr > td{padding:0.5em 0.75em;border-top:1px solid #999;border-left:1px solid #999;}
.tableBasic > tbody > tr > th{background-color:rgba(112,199,177,0.3);color:#008568;}
.tableBasic > tbody > tr > td{background:#fff;}
.tableBasic > tbody > tr > th[align="center"]{text-align:center;}
/* shrink */
.tableBasic.shrink > tbody > tr > th,
.tableBasic.shrink > tbody > tr > td{padding:0.25em 0.5em;}


/* --------------------------------------------------
	box
-------------------------------------------------- */
/* boxBordered && boxColored
------------------------------ */
.boxColored{background-color:rgba(0,0,0,0.05);}
.boxColored.boxGreen{background-color:rgba(112,199,177,0.3);}
.boxBordered{border-color:#999;}
.boxBordered.borderGreen{border-color:#70c7b1;}
.boxBordered.bgWhite{background-color:#fff;}


/*========================================================
 common
========================================================*/

/* header
------------------------------ */
.hLink{display:flex;list-style:none;margin:0;padding:0;flex-wrap:wrap;}
.hLink li{margin-left:20px;}
.hLink li a{display:inline;color:#222;font-size:93.8%;text-decoration:none;}
.hLink li a:hover{text-decoration:underline;}
.hLink li a:before{display:inline-block;width:auto;height:auto;margin:0 5px;line-height:1;vertical-align:middle;}
.hLink li.contact a:before{content:url(/Portals/0/images/common/ico_contact.png);}
.hLink li.sitemap a:before{content:url(/Portals/0/images/common/ico_sitemap.png);}

/* footer
------------------------------ */
.addressWrap{padding:3em 0 2em;border-bottom:1px solid #70c7b1;text-align:center;}
.addressWrap .company,
.addressWrap .address{margin:0;}

.fNav{display:flex;list-style:none;margin:0;padding:1.5em 0 0;flex-wrap:wrap;justify-content:center;}
.fNav li a{padding:0 1.5em;border-right:1px solid #70c7b1;color:#222;font-weight:bold;text-decoration:none;}
.fNav li:first-child a{padding-left:0;}
.fNav li:last-child a{padding-right:0;border-right:none;}
.fNav li a:hover{text-decoration:underline;}

.fLink{display:flex;list-style:none;margin:0;padding:0.25em 0 1.5em;flex-wrap:wrap;justify-content:center;}
.fLink li{padding:0 1em;}
.fLink li a{color:#222;font-size:87.5%;text-decoration:none;}
.fLink li a:hover{text-decoration:underline;}

.snsLink{display:flex;margin-top:-4em;justify-content:flex-end;}
.snsLink p{margin-left:1.5em;}

/* Pagetitle
------------------------------ */
.PagetitlePane div[id*="ModuleContent"]{display:flex;overflow:hidden;height:200px;background:url(/Portals/0/images/common/bg_title.jpg) no-repeat;align-items:center;justify-content:center;}
.PagetitlePane h1{width:1100px;margin:0;padding:0.5em 0;}

/* title
------------------------------ */
.layoutItem.firstitemlefted > div > h2,
.layoutItem.firstitemlefted > div > h3,
.layoutItem.firstitemlefted > div > h4,
.layoutItem.firstitemlefted > div > h5,
.layoutItem.firstitemlefted > div > h6,
.layoutItem.firstitemrighted > div > h2,
.layoutItem.firstitemrighted > div > h3,
.layoutItem.firstitemrighted > div > h4,
.layoutItem.firstitemrighted > div > h5,
.layoutItem.firstitemrighted > div > h6{margin-top:0;}

/* Pager
------------------------- */
.ulList_vertical.ulPaging{display:flex;margin:0;padding:15px 0;justify-content:center;flex-wrap:wrap;}
.ulList_vertical.ulPaging li{float:none;margin:0 4px 5px;padding:0;border-radius:3px;background:#eee;font-size:87.5%;}
.ulList_vertical.ulPaging li a{padding:0.5em 2em;border:none;border-radius:3px;color:#222;}
.ulList_vertical.ulPaging li a:hover{border:none;background:#70c7b1;color:#fff;}
.ulList_vertical.ulPaging li.Current{padding:0.5em 2em;border:none;background:#70c7b1;color:#fff;}

/* category top
------------------------- */
.categoryMenu a{display:inline-block;color:#222;font-weight:bold;text-decoration:none;text-align:center;}
.categoryMenu a img{margin-bottom:0;}
.categoryMenu a:hover{text-decoration:underline;}

/* PDFダウンロード
------------------------- */
.downloadItem{width:50%;max-width:574px;margin:0 auto 2.5em;}
.downloadItem .subTitle{margin-bottom:0;padding:14px 0 14px 0;border-bottom:1px solid #ddd;color:#41bea3;font-size:112.5%;}
.downloadItem .subTitle:after{background:transparent;}
.downloadItem > *{padding:15px 0;border-bottom:1px solid #ddd;}
.downloadItem > * > a{display:block;position:relative;padding-right:25px;color:#222;text-decoration:none;}
.downloadItem > * > a:before{content:"";position:absolute;top:0;right:10px;bottom:0;width:0;height:0;margin:auto;border-width:5px 0 5px 8.5px;border-color:transparent transparent transparent #41bea3;border-style:solid;}



/*========================================================
 index
========================================================*/
._Index h2.smallTitle{font-size: 125.0%;}

/* Osteoporosis
------------------------------ */
._Index .ContentPane div:first-child + section h2{margin-top:0.5em;}
._Index h2{margin:2em 0 1em;padding:0;border:none;text-align:center;}
._Index h2:after{display:none;}
.aboutOsteoporosisWrap{display:flex;flex-wrap:wrap;}
.aboutOsteoporosisWrap > div{margin:0 5px 5px 0;}
.aboutOsteoporosisWrap > div:nth-child(3n){margin-right:0;}


.aboutOsteoporosisWrap a{display:block;position:relative;border-radius:3px;background:#000;line-height:0;text-align:center;}
.aboutOsteoporosisWrap a:hover{opacity:1;background:#70c7b1;}


.aboutOsteoporosisWrap a span{display:inline-block;position:absolute;top:50%;left:50%;z-index:10;transform:translate(-50%, -50%);width:100%;color:#fff;font-weight:bold;font-size:150.0%;line-height:1.2;}
.aboutOsteoporosisWrap a img{opacity:0.75;border-radius:3px;}
.aboutOsteoporosisWrap a:after{content:"";display:block;position:absolute;right:0;bottom:0;width:40px;height:40px;margin:0;border-radius:3px;background:url(/Portals/0/images/index/btn_osteoporosis.png);}
.aboutOsteoporosisWrap a[href*=".pdf"]:after,
.aboutOsteoporosisWrap a[href*=".doc"]:after,
.aboutOsteoporosisWrap a[href*=".docx"]:after,
.aboutOsteoporosisWrap a[href*=".xls"]:after,
.aboutOsteoporosisWrap a[href*=".xlsx"]:after,
.aboutOsteoporosisWrap a[href*=".zip"]:after,
.aboutOsteoporosisWrap a.externalLink:after{margin:0;}

/* tab
------------------------------ */
.ViewTabs > ul{justify-content:space-between;}
._Index .ViewTabs > ul > li{width:49.5%;}
.ViewTabs > ul > li > a{border-bottom:3px solid rgba(0,0,0,0.2);color:#999;font-weight:bold;line-height:1.2;text-decoration:none;text-align:center;}
.ViewTabs > ul > li > a:hover,
.ViewTabs > ul > li.ui-tabs-active > a{opacity:1;border-color:rgba(112,199,177,0.8);color:#70c7b1;}

/* side
------------------------------ */
.titleBoxWrap{margin-bottom:20px;}
.titleBoxWrap > div{margin-bottom:10px;padding:5px;border:2px solid #70c7b1;border-radius:3px;background:#fff;}
.titleBoxWrap p:not(.title){margin:0.5em 1em;}
.titleBoxWrap .title{position:relative;margin:0;padding:0.5em 1em;background:#ccc;background:rgba(112,199,177,0.3);color:#008568;font-weight:bold;font-size:137.5%;line-height:1.2;}
.titleBoxWrap .title:before{content:"";display:block;position:absolute;top:50%;left:0;transform:translateY(-50%);width:10px;height:4px;background:#f2cd00;}

.sideBannerWrap{list-style:none;margin:0 0 10px;padding:0;text-align:center;}


/* banner
------------------------------ */
.bannerCompany img{max-width:120px;max-height:60px;}


/* --------------------------------------------------
 news
-------------------------------------------------- */
.icmdtp-newsItem{padding:1.25em 0 0.75em;}
.icmdtp-newsItem .newsList > li,
.icmdtp-newsItem .newsList > li:first-child{border-top:none;border-bottom:#ddd solid 1px;align-items:center;}
.icmdtp-newsItem .newsList .newsCategory{width:5em;margin:0 1em 0 0;}
.icmdtp-newsItem .newsCategory > span{margin:0;border-radius:12px;background:#eee;font-size:81.3%;}
.icmdtp-newsItem .newsList .newsTitle a{color:#222;text-decoration:none;}
.icmdtp-newsItem .newsList .newsTitle a:hover{text-decoration:underline;}

/* 講演・イベント */
.icmdtp-newsItem .newsList.seminar .newsCategory{width:6em;}

.icmdtp-newsItem .newsDetail .newsTitle{margin:0 0 0.5em;}
.icmdtp-newsItem .newsDetail .newsDate{float:left;}
.icmdtp-newsItem .newsDetail .newsCategory{float:left;margin:0 1em 0 0;}
.icmdtp-newsItem .newsDetail .newsCategory > span{width:100%;margin:0;padding:0 1em;border-radius:12px;background:#eee;font-size:81.3%;}
.icmdtp-newsItem .newsDetail .newsDescription{clear:left;padding:2em 0;}


/* --------------------------------------------------
 sitemap
-------------------------------------------------- */
.icmdtp-sitemapItem > li{padding:0;}
.icmdtp-sitemapItem > li > a,
.icmdtp-sitemapItem > li > ul > li > a{font-weight:bold;font-size:125.0%;}
.icmdtp-sitemapItem a{color:#595959;text-decoration:none;}
.icmdtp-sitemapItem a:hover{opacity:1;color:#70c7b1;text-decoration:underline;}
.icmdtp-sitemapItem > li > ul > li > ul{margin:0 0 1em 3em;font-size:100%;}
.icmdtp-sitemapItem > li > ul > li,
.icmdtp-sitemapItem > li > ul > li:first-child{border-top:1px solid #d6d6d6;}
.icmdtp-sitemapItem > li > a{padding:1em 0.5em;}
.icmdtp-sitemapItem > li > ul > li a{padding:1em 0.5em;border-top:1px solid #d6d6d6;}
.icmdtp-sitemapItem > li > ul > li > ul > li > a:before{content:"";display:inline-block;width:10px;height:2px;margin-right:0.5em;background:#f2cd00;vertical-align:middle;}


/* --------------------------------------------------
 search
-------------------------------------------------- */
h3.SearchResultsTitle{position:relative;margin:2em 0 1em;padding:0 0 0.25em 0.5em;border-bottom:4px solid #41bea3;font-size:200%;}/*32px*/
h3.SearchResultsTitle:after{content:"";display:block;position:absolute;bottom:-4px;left:0;width:150px;height:4px;background:#70c7b1;}
h3.SearchResultsTitle:before{content:"";display:block;position:absolute;top:0.5em;bottom:0.2em;left:0;width:0;height:0;border-width:3.5px 0 3.5px 5px;border-color:transparent transparent transparent #f2cd00;border-style:solid;}
h3.SearchResultsTitle a{color:#222;text-decoration:none;}
.SearchResultsLink a[id^="dnn_"].CommandButton{color:#70c7b1;}
h3.SearchResultsTitle a[id^="dnn_ctr"]:hover,
.SearchResultsLink a[id^="dnn_"].CommandButton:hover{opacity:0.65;text-decoration:underline;}


/* --------------------------------------------------
 hospitallist
-------------------------------------------------- */

/* search
------------------------------ */
.hospitalSearchWrap{margin-bottom:4em;padding:2em 6em;border:5px solid #eee;}
.hospitalSearchWrap > div{display:flex;margin:0.5em 0;justify-content:center;}
.hospitalSearchWrap .productSearchArea{display:flex;width:100%;padding:1.5em;background:#eee;justify-content:space-between;}
.hospitalSearchWrap .productSearchArea .productSearchItem{display:flex;width:100%;padding:0;align-items:center;}
.hospitalSearchWrap .productSearchArea .productSearchItem div:nth-child(1){display:none;}
.hospitalSearchWrap .productSearchArea .productSearchItem div:nth-child(2){width:100%;}
.hospitalSearchWrap .productSearchArea input[id^="dnn_"][type="text"]{width:100%;padding:0.75em;}
.hospitalSearchWrap .productSearchArea input[id^="dnn_"][type="text"]:focus{border-color:#41bea3;background:rgba(112,199,177,0.3);}
.hospitalSearchWrap .submitArea{display:flex;width:100px;margin:0;padding:0;}
.hospitalSearchWrap .submitArea input.submitBtn.notice[type="submit"]{min-width:100%;margin:0;padding:3em 0 0;border:none;border-radius:0 3px 3px 0;background:#70c7b1 url(/Portals/0/images/hospitallist/ico_btn_search.png) center 25px no-repeat;}
.hospitalSearchWrap .submitArea .cmdClear.submitBtn{display:none;}

/* list */
.hospitallistTable th{width:15%;}
.hospitallistTable td ul{display:flex;list-style:none;margin:0;padding:0;flex-wrap:wrap;}
.hospitallistTable td ul li{padding:0 1em 0 0;}
.hospitallistTable td ul li:after{content:"/";margin-left:1em;color:#ccc;}
.hospitallistTable td ul li:last-child:after{display:none;}

/* list
------------------------------ */
.hospitaLlist tr th:nth-child(1){width:19%;}
.hospitaLlist tr th:nth-child(2){width:13%;}
.hospitaLlist tr th:nth-child(3){width:36%;}
.hospitaLlist tr th:nth-child(4){width:13%;}
.hospitaLlist tr th:nth-child(5){width:19%;}
.hospitaLlist tr td:nth-child(5){word-break:break-word;}
.hospitaLlist tr td{line-height:1.4;}
/*.hospitaLlist tr td:nth-child(1) a{display:block;position:relative;padding-left:0.75em;color:#222;font-weight:bold;text-decoration:none;}
.hospitaLlist tr td:nth-child(1) a:before{content:"";display:block;position:absolute;top:0.5em;left:0;width:0;height:0;border-width:3.5px 0 3.5px 5px;border-color:transparent transparent transparent #f2cd00;border-style:solid;}
.hospitaLlist tr td:nth-child(1) a:hover{opacity:1;text-decoration:underline;}*/

.hospitaLlist tr td .SupportingMemberOn a{color:#70c7b1;}
.hospitaLlist tr td:nth-child(1) .SupportingMemberOn a:before{border-color:transparent transparent transparent #41bea3;}
.hospitaLlist tr td a[target="_blank"]:after{content:url(/Portals/0/images/common/ico_external.png);padding-left:0.25em;}

span.SupportingMemberOn a:after{content:"賛助";display:inline-block;margin-left:0.5em;padding:0.3em 0.5em;border-radius:3px;background:#008568;color:#fff;font-size:60%;vertical-align:middle;}
/*span.SupportingMemberOn a:after {
    content: "賛助";
    display: inline-block;
    font-size: 60%;
    background: rgba(112,199,177,0.3);
    color: #70c7b1;
    padding: .3em .5em;
    border-radius: 3px;
    vertical-align: middle;
    margin-left: .5em;
}*/
p.SupportingMemberOn span{display:inline-block;margin-right:0.5em;padding:0.3em 0.5em;border-radius:3px;background:#008568;color:#fff;font-size:60%;vertical-align:middle;}



/* Detail
------------------------------ */
.hospitalDetail th{width:15%;}
.hospitalDetail tr td a[target="_blank"]:after{content:url(/Portals/0/images/common/ico_external.png);padding-left:0.25em;}
.hospitalDetail tr td .SupportingMemberOn:after{content:"賛助会員";display:inline-block;margin-left:10px;padding:1px 10px;background:rgba(112,199,177,0.3);color:#70c7b1;font-weight:bold;font-size:80%;text-align:center;}



/* --------------------------------------------------
 全国骨を守る会
-------------------------------------------------- */
.societyList li{padding:6px;border:2px solid #70c7b1;border-radius:3px;}
.societyList .societyTitle a{display:flex;height:150px;padding:1.25em;background:rgba(112,199,177,0.3);color:#222;font-weight:bold;line-height:1.4;text-decoration:none;text-align:center;align-items:center;justify-content:center;}
.societyList .societyTxt{padding:0 0.5em;line-height:1.4;}


/* --------------------------------------------------
 出版物・資料
-------------------------------------------------- */
.publicationWrap img{width:141px;margin-bottom:0.5em;border:1px solid #ccc;}
.publicationWrap .layoutItem > *{line-height:1.5;}

/* canopus
------------------------------ */
.canopus_wrap{display:flex;margin-top:2em;flex-wrap:wrap;justify-content:space-between;}
.canopus_wrap .thumbnail{width:49.5%;}
.canopus_wrap .thumbnail a:after{display:none;}
.canopus_wrap p{width:100%;text-align:center;;}


/* --------------------------------------------------
 骨粗鬆症情報紙　カノープス（無料配信）
-------------------------------------------------- */
.canopusBackNum.layoutItem{margin:2em 0;}
.canopusBackNum.layoutItem > *{padding:1em;background:rgba(112,199,177,0.3);}
.canopusBackNum.layoutItem > * .layoutItem,
.canopusBackNum.layoutItem > * .layoutItem > *{margin-bottom:0;}

/* --------------------------------------------------
 日光浴はどのくらい必要？
-------------------------------------------------- */
.speechBubbleItem{display:flex;width:100%;align-items:flex-start;justify-content:space-around;flex-wrap:nowrap;}
.speechBubbleItem > div:first-child{flex-shrink:0;}
.speechBubbleItem .speechBubble{display:flex;height:100%;justify-content:flex-end;flex-wrap:wrap;align-items:center;}
.speechBubbleItem .speechBubble .img{margin:0 35px 0 0;}
.speechBubbleItem .speechBubble .txt{display:inline-block;position:relative;margin:1em 1em 1.5em 2em;padding:25px 30px;border:3px solid #ddd;border-radius:25px;background:#fff;font-size:114.286%;}
.speechBubbleItem .speechBubble .txt:before,
.speechBubbleItem .speechBubble .txt:after{content:"";position:absolute;right:50px;bottom:-26px;z-index:2;border:14px solid transparent;border-top:14px solid #fff;}
.speechBubbleItem .speechBubble > .txt:after{content:"";position:absolute;right:50px;bottom:-30px;z-index:1;border:14px solid transparent;border-top:14px solid #ddd;}

.layoutItem.imgPoint{display:flex;width:90%;margin:0 auto;align-items:center;}
.layoutItem.imgPoint > p{width:23%;}
.layoutItem.imgPoint > p img{width:100px;height:auto;margin:1em 3em;}
.layoutItem.imgPoint > .boxColored{width:75%;}

/* --------------------------------------------------
 骨粗鬆症の検査
-------------------------------------------------- */
.sokuteiImgWrap > *:first-child{margin-bottom:4em;}
.sokuteiImgWrap .layoutItem.dxa,
.sokuteiImgWrap .layoutItem.dxa > *{margin-bottom:0;}
.sokuteiImgWrap .title{font-weight:bold;font-size:175%;}

/* --------------------------------------------------
 骨粗鬆症とは - 病気について
-------------------------------------------------- */
.linkColoredBtn.navBtn > ul{display:flex;padding:0;justify-content:space-between;}
.linkColoredBtn.navBtn > ul > li{list-style:none;width:100%;margin-right:20px;padding:0;}
.linkColoredBtn.navBtn > ul > li:last-child{margin-right:0;}
.linkColoredBtn.navBtn > ul > li > a{display:block;position:relative;padding:0.5em 1em 0.5em 2.5em;border-radius:3px;color:#fff;font-weight:bold;text-decoration:none;-webkit-transition:opacity 0.25s ease-out;transition:opacity 0.25s ease-out;}
.linkColoredBtn.navBtn > ul > li > a:before{content:"";position:absolute;top:0;bottom:2px;left:1.22em;z-index:4;width:0;height:0;margin:auto;border-width:3.5px 0 3.5px 5px;border-color:transparent transparent transparent #f2cd00;border-style:solid;}
.linkColoredBtn.navBtn > ul > li > a:after{content:"";position:absolute;top:49%;left:0.7em;z-index:3;transform:translateY(-50%);width:20px;height:20px;border-radius:10px;background:#fff;}
.linkColoredBtn.navBtn > ul > li.currentItem > a{opacity:1;background:#d19102;/* background: #f2cd00; *//* background:#cbac02; */pointer-events:none;}
.linkColoredBtn.navBtn > ul > li.currentItem > a:before{content:"";position:absolute;top:0;bottom:2px;left:1.22em;z-index:4;width:0;height:0;margin:auto;border-width:3.5px 0 3.5px 5px;/*border-color:transparent transparent transparent #b79b00;*/border-color:transparent transparent transparent #d19102;border-style:solid;}

.categoryMenu.aboutOsteoporosisWrap a[href*=".pdf"] span:after{content:url(/Portals/0/images/common/ico_file_pdf.png);position:absolute;right:0;bottom:-12px;left:0;width:21px;height:16px;margin:auto;}

/* --------------------------------------------------
 骨粗鬆症とは - どんな病気
-------------------------------------------------- */
.layoutItem.osteoporoticFractures img {height: 380px;}

/* --------------------------------------------------
 骨粗鬆症とは - なったらどうなる
-------------------------------------------------- */
.pcView .pcVertical {writing-mode: vertical-rl;}
.pcView th.pcVertical {text-align: center;}
.osteoporosisSymptoms img {width: 250px;}


/* --------------------------------------------------
 骨粗鬆症とは - レシピ
-------------------------------------------------- */
/* .newsList */
.recipe .ViewTabs > ul > li{width:19.2%;}
.icmdtp-newsItem .newsList.recipe .newsImage{overflow:hidden;position:relative;width:100%;padding-top:56.625%;background:#fff;margin-left:0;}
.icmdtp-newsItem .newsList.recipe .newsImage img{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:100%;height:auto;object-fit:cover;}
.icmdtp-newsItem .newsList.recipe .newsTitle{margin-top:1em;}

/* .newsDetail */
.icmdtp-newsItem .newsDetail.recipe .newsCategory{float:none;}
.icmdtp-newsItem .newsDetail.recipe .newsCategory span{width:auto;}
.icmdtp-newsItem .newsDetail.recipe .newsTitle{margin:0.5em 0;}
.icmdtp-newsItem .newsDetail.recipe .newsDate{float:none;width:auto;}
.icmdtp-newsItem .newsDetail.recipe .newsDescription img{max-width:100%;max-height:300px;}
.icmdtp-newsItem .newsDetail.recipe .recipe_list dl{display: flex;flex-wrap: wrap;}
.icmdtp-newsItem .newsDetail.recipe .recipe_list dt,
.icmdtp-newsItem .newsDetail.recipe .recipe_list dd{border-bottom:1px solid #ccc;padding:6px 0;}
.icmdtp-newsItem .newsDetail.recipe .recipe_list dt{width: 40%;}
.icmdtp-newsItem .newsDetail.recipe .recipe_list dd{width: 60%;text-align:right;margin-left: 0;}

/* --------------------------------------------------
 骨粗鬆症とは - 数字でみる
-------------------------------------------------- */
.dataList .box{padding:10px;}
.dataList .heading{position:relative;margin:0;padding:0.5em 0 0.5em 1em;border-bottom:0;background-color:rgba(0,0,0,0.05);font-size:137.5%;}
.dataList .heading:before{content:"";display:block;position:absolute;top:0;bottom:0;left:0;width:10px;height:4px;margin:auto;background-color:#f2cd00;}
.dataList .heading:after{content:none;}
.dataList .content{display:flex;min-height:230px;align-items:center;justify-content:center;}
.dataList .references{margin-top:26px;}
.dataList .references .head{margin:0;font-size:137.5%;}

/* --------------------------------------------------
 骨を守る会からのお知らせ
-------------------------------------------------- */
.text_area p.p_society_date{padding:1em;background-color:rgba(0,0,0,0.05);}
.text_area p.lead{font-size:110%;font-weight:bold;}
.text_area th.tdtitle{text-align:center;}

/* --------------------------------------------------
 講演・イベント
-------------------------------------------------- */
.newsDetail .text_area > *:first-child{margin-top:0;}
.dxa.tableBasic th{text-align:center;}