/* COMMON -----------------------------*/

body { font-size: 93%; }

.contents-area { font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif }

#kansetsu-contents {
	margin: 0 10px;
}
.pageTitle {
	background-color: #e7f1fc;
	font-size: 1.6rem;
	font-weight: bold;
	text-align: center;
	margin: 0 0 15px;
	padding: 20px 0;
	color: #004ea2;
	line-height: 1;
}

#kansetsu-contents h1 {
	font-size: 1.2rem;
	color: #FFFFFF;
	line-height: 1.3em;
	margin: 0 0 10px;
	padding: 10px 0 10px 33px;
	background: #004ea2 url(../img/h1-img.png) 8px 50% no-repeat;
	background-size: 18px;
	font-size: bold;
	border-bottom: #d2d2d3 2px solid;
}

#kansetsu-contents h2 {
	font-size: 1.1rem;
	font-weight: bold;
	padding: 25px 0 0;
	letter-spacing: -0.02em;
}

#kansetsu-contents h2.txt-blue,
#kansetsu-contents h3.txt-blue {
	font-size: 1.1rem;
	font-weight: bold;
	padding: 10px 0 5px;
}

.kansetsuImg {
	text-align: center;
	padding: 15px 0 0;
}

#other-page {
	clear: both;
	text-align: center;
	padding: 40px 0 0 0;
}

#other-page a {
	display: block;
}

#other-page table {
	width: 100%;
	border-top: #e1e1e1 1px solid;
	border-right: #e1e1e1 1px solid;
	margin: 5px 0 12px;
}
#other-page table td {
	border-bottom: #e1e1e1 1px solid;
	border-left: #e1e1e1 1px solid;
}

#other-page .page-next-00 {
	width: 100%;
	background: url(../img/arrow-001.png) 97% 50% no-repeat;
	background-size: 15px;
	text-align: center;
}
#other-page .page-prev-00 {
	width: 100%;
	background: url(../img/arrow-002.png) 3% 50% no-repeat;
	background-size: 15px;
	text-align: center;
}
#other-page .page-next-00 a { padding: 20px 0; }
#other-page .page-prev-00 a { padding: 20px 0; }


#other-page .page-next,
#other-page .page-next-02,
#other-page .page-next-03 {
	width: 50%;
	background: url(../img/arrow-001.png) 97% 50% no-repeat;
	background-size: 15px;
	text-align: center;
	font-size: 93%;
	line-height: 1.3;
}
#other-page .page-prev,
#other-page .page-prev-02,
#other-page .page-prev-03,
#other-page .page-prev-04 {
	width: 50%;
	background: url(../img/arrow-002.png) 4% 50% no-repeat;
	background-size: 15px;
	text-align: center;
	font-size: 93%;
	line-height: 1.3;
}

#other-page a { display: block; }

#other-page .page-next a { padding: 10px 6% 10px 0; }
#other-page .page-next-02 a { padding: 2.5em 6% 2.5em 0; }
#other-page .page-next-03 a { padding: 2.5em 6% 2.5em 0; }
#other-page .page-prev a { padding: 10px 0 10px 6%; }
#other-page .page-prev-02 a { padding: 1.3em 0 1.3em 6%; }
#other-page .page-prev-03 a { padding: 2em 6% 2em 0; }
#other-page .page-prev-04 a { padding: 2.5em 6% 2.5em 0; }






#other-page .back-atoc {
	clear: both;
	border: #e1e1e1 1px solid;
	width: 8em;
	margin: 0 auto;
}

#other-page .back-atoc a {
	padding: 0.5em 0;
}



#other-content-btn {
	text-align: center;
	border-top: #dddddd 1px solid;
	margin: 40px 0 20px 0;
}

#other-content-btn p {
	color: #004ea2;
	padding: 25px 0 5px;
}

#other-content-btn a {
	display: block;
	border: #0052a5 1px solid;
	margin: 0 20px;
	padding: 15px 0;
	color: #0052a5;
	font-size: 112%;
	font-weight: bold;
	background: #fcfeff url(../img/arrow-004.png) 96% 50% no-repeat;
	background-size: 15px;
}
.contents-area p a { color: #0289c7; text-decoration: underline; }

.pagetop {
	margin: 15px 0;
}
.pagetop a {
	font-size: 100%;
}

.txt-blue { color: #0052a5; }
.txt-red { color: #d70c19; }
.txt-bold { font-weight: bold; }

.txt-SS { font-size: 77%; }
.txt-S { font-size: 85%; }
.txt-M { font-size: 108%; }
.txt-L { font-size: 115%; }

.txt-indent1 { padding: 0 0 0 1em; text-indent: -1em; }
.txt-indent3 { padding: 0 0 0 3em; text-indent: -3em; }


/* INDEX -----------------------------*/
.pageTitle-top {
	background-color: #e7f1fc;
	background-image: url(../img/index-kv01.png);
	background-position: 7% 55%;
	background-repeat: no-repeat;
	background-size: 153px auto;
	font-size: 1.6rem;
	font-weight: bold;
	margin: 0 0 10px;
	padding: 30px 0 30px 63%;
	color: #004ea2;
	line-height: 1.2;
}

.pageTitle-top span {
	margin: 0 0 0 -0.7em;
	padding: 5px 0 5px 1.2em;
	background: url(../img/index-kv02.png) 0 100% no-repeat;
	background-size: 27px auto;
}

.atoc {
	width: 5em;
	margin: 25px auto 0;
	color: #FFFFFF;
	font-size: 1.2rem;
	text-align: center;
	background: #004ea2;
	border-radius: 50px;
	-webkit-border-radius: 50px; 
    -moz-border-radius: 50px;
}

#index .btn-pagelist-001,
#index .btn-pagelist-002,
#index .btn-pagelist-003,
#index .btn-pagelist-004,
#index .btn-pagelist-005,
#index .btn-pagelist-006,
#index .btn-pagelist-007,
#index .btn-pagelist-008,
#index .btn-pagelist-009 {
	border: #d8e8fa 2px solid;
	margin: 20px 10px 0;
	background-repeat: no-repeat , no-repeat;
	background-size: 15px , auto 100%;
}

#index a {
	display: block;
}

#index .btn-pagelist-001 {
	background-image: url(../img/arrow-001.png) , url(../img/index-btn-img001-02.png);
	background-position: 97% 50% , 25% 0;
}

#index .btn-pagelist-002 {
	background-image: url(../img/arrow-001.png) , url(../img/index-btn-img002-02.png);
	background-position: 97% 50% , 22% 0;
}

#index .btn-pagelist-003 {
	background-image: url(../img/arrow-001.png) , url(../img/index-btn-img003-02.png);
	background-position: 97% 50% , 26% 0;
}

#index .btn-pagelist-004 {
	background-image: url(../img/arrow-001.png) , url(../img/index-btn-img004-02.png);
	background-position: 97% 50% , 26% 0;
}

#index .btn-pagelist-005 {
	background-image: url(../img/arrow-001.png) , url(../img/index-btn-img005-02.png);
	background-position: 97% 50% , 22% 0;
}

#index .btn-pagelist-006 {
	background-image: url(../img/arrow-001.png) , url(../img/index-btn-img006-02.png);
	background-position: 97% 50% , 10% 0;
}

#index .btn-pagelist-007 {
	background-image: url(../img/arrow-001.png) , url(../img/index-btn-img007-02.png);
	background-position: 97% 50% , 23% 0;
}

#index .btn-pagelist-008 {
	background-image: url(../img/arrow-001.png) , url(../img/index-btn-img008-02.png);
	background-position: 97% 50% , 20% 0;
}

#index .btn-pagelist-009 {
	background-image: url(../img/arrow-001.png) , url(../img/index-btn-img009-02.png);
	background-position: 97% 50% , 20% 0;
}

#index .mushimegane {
	margin: -8px 38% 0 -8px;
	width: 46px;
	float: left;
}

#index h2 {
	height: 105px;
	font-size: 1.0rem;
	font-weight: bold;
	display: table-cell;
	vertical-align: middle;
	line-height: 1.3em;
}

/* 下階層 -----------------------------*/


#kansetsu-contents .underline01 {
	background: url(../img/underline.png) 0 100% repeat-x;
	background-size: auto 3px;
	padding: 0 0 7px;
}

#kansetsu-contents .underline02 {
	border-bottom: #004ea2 1px dotted;
	padding: 0 0 10px;
}


.mechanism {
	background: url(../img/04-img-001.png) 0 0 repeat-y;
	background-size: 100% auto;
	margin: 20px 0 5px 0;
	padding: 15px 10px;
}

#kansetsu-contents .mechanism h2 {
	margin: 0;
	padding: 5px 0 10px;
}


.mechanismBox {
	clear: both;
	margin: 15px 0 0 0;
	border: #004ea2 1px solid;
	border-radius: 8px;
	-webkit-border-radius: 8px; 
    -moz-border-radius: 8px;
	background-color: #FFFFFF;
}
.mechanismBox p {
	text-align: center;
	padding: 10px 0 10px 14%;
	letter-spacing: -0.03em;
	background-image: url(../img/04-img-006.png);
	background-position: 15% 50%;
	background-repeat: no-repeat;
	background-size: 15%;
}
.mechanismBox p span {
	font-size: 123%;
	color: #d70c19;
	font-weight: bold;
	line-height: 1.3em;
}
@media screen and (max-width: 375px) {
.mechanismBox p {
	padding: 10px 0 10px 13%;
	background-position: 10% 50%;
}
}
@media screen and (max-width: 320px) {
.mechanismBox p {
	padding: 10px 0 10px 20%;
	background-position: 5% 50%;
}
}

.radiusBox-50 {
	background: #004ea2;
	border-radius: 50px;
	-webkit-border-radius: 50px; 
    -moz-border-radius: 50px;
	margin: 20px 0 0 0;
	padding: 3px;
	text-align: center;
	color: #FFFFFF;
}

.column {
	border: #004ea2 1px solid;
	border-radius: 10px;
	-webkit-border-radius: 10px; 
    -moz-border-radius: 10px;
	margin: 15px 0;
	padding: 0 0 15px;
}

.column h3 {
	width: 100%;
	background: #004ea2;
	text-align: center;
	padding: 2px 0 2px 0;
	border-radius: 8px 8px 0 0;
	-webkit-border-radius: 8px 8px 0 0;
    -moz-border-radius: 8px 8px 0 0;
	color: #FFFFFF;
	font-size: 108%;
}

.column h3 span {
	background: url(../img/07-img-001.png) 0 50% no-repeat;
	background-size: 40px;
	padding: 20px 0 20px 44px;
}

.column p {
	padding: 15px 15px 0;
}


.cushion {
	text-align: center;
	background: #e5f1ff;
	border-radius: 5px;
	-webkit-border-radius: 5px; 
    -moz-border-radius: 5px;
	color: #004ea2;
	font-weight: bold;
	padding: 7px 0;
	margin: 0 15px;
}

.medicineBox-01,
.medicineBox-02 {
	clear: both;
	padding: 20px 0 0 0
}

.medicineBox-01 .medicineBox-txt { width: 70%; }
.medicineBox-02 .medicineBox-txt { width: 64%; margin: 0 0 20px; }

.medicineBox-01 .fr {
	width: 30%;
	text-align: right;
}

.medicineBox-02 .fl {
	width: 36%;
	text-align: left;
}