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

ガイド

	---------------
	タイトル
	---------------
	.ttl--subpage：下層ページの一番上のタイトル
	.ttl--subpage-eng：タイトル下の英語

	---------------
	サブタイトル
	---------------
	.subttl：1カラムの場合に中央に大きく入るサブタイトル
	.subttl--grid：4カラム場合のタイトル
	.subttl--basic：普通に文字が大きいタイトルを打ちたい時
	.subttl--timeline：口腔ドックページなどの「1回目」とか書いてある文字
		.subttl--timeline-s：文字小
		.subttl--timeline-L：左付き
		.subttl--timeline-R：右付き
		.subttl--timeline-advance：補綴治療と定期検診のタイムライン

	---------------
	コピー
	---------------
	.copy--vertical：縦書きのコピー
		.copy--vertical__inner：文字画像

		例：	<div class="copy--vertical">
				<h2 class="copy--vertical__inner"><img src="img/copy.png"></h2>
			</div>

	---------------
	汎用テキスト
	---------------
	.txt--normal：普通の文章のはずがほとんど使ってない。捨てようかな。
	.txt--small：小さい
	.txt--LLL：特大
	.txt--large：特大
	.txt--strong：大・太い
	.txt--important：大・ピンク
	.txt--bg-colorful：背景色緑
	.txt--colorful：文字緑
	.txt--marker：蛍光マーカーを塗る


	---------------
	特殊テキスト
	---------------
	.txt--story：トップページ冒頭のストーリー
	.txt--script：トップページタイトル上の手書き文字
	.txt--copyright：footerのコピーライト
	.txt--flow：流れ内の文章（口腔ドックページなど）
		.txt--flow-halfway：流れの途中のボックス（この間3週間など）
	・txt--job：staffページ


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


/*===============================================
font-family
===============================================*/

.ttl--index-eng,
.ttl--subpage,
.ttl--subpage-eng,
.subttl,
.subttl--grid,
.subttl--timeline,
.copy--vertical,
.copy--box,
.txt--copyright,
.txt--pagenum,
.txt--serif,
.txt--italic {
    font-family: “Times New Roman”, "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}

.txt--italic {
    font-style: italic;
}


/*===============================================
font-size
===============================================*/

.ttl--index-eng {
    font-size: 0.7em;
}


/* small english title  */

.ttl--subpage-eng {
    font-size: 0.5em;
}


/* small english title  */

.ttl--subpage {
    font-size: 1.5em;
}


/* title for subpage */


/*.ttl--num{ font-size: 2.4em; }  title for subpage */

.subttl--basic {
    font-size: 1.5em;
}


/* basic subtitle */

.subttl--timeline {
    font-size: 1em;
}


/* for report-page, dock-page  */

.subttl--small {
    font-size: 1em;
}

.subttl {
    font-size: 1.25em;
}


/* subtitle in page  */

.subttl--grid {
    font-size: 1.15em;
}


/* subtitle for 1/4 grid  */

.copy--box__inner {
    font-size: 1.25em;
}

.txt--xsmall {
    font-size: 0.15em;
}


/* small */

.txt--small {
    font-size: 0.85em;
}


/* small */

.txt--copyright {
    font-size: 0.7em;
}


/* footer  */

.txt--marker {
    font-size: 1em;
}


/* like a marker pen */

.txt--large {
    font-size: 1.1em;
}

.txt--strong {
    font-size: 1.1em;
}


/* large bold */

.txt--important {
    font-size: 1.1em;
}


/* pink large */

.txt--LL {
    font-size: 2em;
}


/* LLL */

.txt--LLL {
    font-size: 3em;
}


/* LLL */

.txt--pagenum {
    font-size: 7em;
}

.txt--job {
    font-size: 0.7em;
}

.txt--story {
    font-size: 1.05em;
}


/*===============================================
font-weight
===============================================*/

.txt--strong {
    font-weight: bold;
}

.txt--marker {
    font-weight: bold;
}

.txt--copyright {
    font-weight: 100;
}


/*===============================================
line-height
===============================================*/

.ttl--subpage,
.ttl--subpage-eng,
.subttl,
.subttl--basic,
.subttl--grid,
.subttl--timeline,
.copy--box__inner {
    line-height: 2.1;
}

.subttl--essay {
    line-height: 1.8;
}

.txt--pagenum {
    line-height: 1;
}


/*===============================================
letter-spacing
===============================================*/

.ttl--subpage,
.ttl--subpage-eng,
.subttl,
.subttl--basic,
.subttl--grid,
.subttl--timeline,
.txt--copyright {
    letter-spacing: 0.3em;
}

.copy--box__inner {
    letter-spacing: 0.2em;
}

.txt--pagenum {
    letter-spacing: 0;
}

.txt--xsmall {
    letter-spacing: 0.15em;
}


/*===============================================
text-align
===============================================*/

.ttl--subpage,
.ttl--subpage-eng,
.subttl,
.subttl--grid,
.subttl--timeline,
.copy--vertical,
.copy--vertical__inner,
.txt--script,
.txt--copyright,
.txt--pagenum {
    text-align: center;
}

.txt--left {
    text-align: left;
}

.txt--right {
    text-align: right;
}

.txt--center {
    text-align: center;
}

.subttl--timeline-L {
    text-align: right;
}

.subttl--timeline-R {
    text-align: left;
}



/*===============================================
color
===============================================*/

.subttl--timeline {
    color: #099c7f;
}

.txt--important {
    color: #c46a94;
}
.txt--alert {
    color: #d92653;
}
.txt--focus {
    color: #dfdfdf;
}

.txt--colorful {
    color: #099c7f;
}

.txt--bg-colorful {
    color: #fff;
}

.txt--copyright {
    color: #A0E4D6;
}



/*===============================================
bg color
===============================================*/


/*.txt--story{ background-color: #fff; }*/

.txt--bg-colorful {
    background-color: #419271;
}

.txt--marker {
    background-color: rgba(214, 244, 62, 0.32);
}

.txt--flow-halfway {
    background-color: #fff;
}

.txt--copyright {
    background-color: #099c7f;
}

.txt--pasttime {
    background-color: #fff;
}


/*===============================================
border
===============================================*/

.subttl--timeline {
    border-bottom: 2px solid #419271;
}

.ttl--border-box {
    border: 1px solid #a5a5a5;
}

.copy--vertical__inner {
    border: 1px solid #ccc;
}

.copy--box {
    border: 3px double #ccc;
}

.txt--flow-halfway {
    border: 1px solid #333;
}

.txt--pasttime {
    border: 1px solid #999;
}


/*===============================================
width height
===============================================*/

.copy--box {
    width: 75%
}

.ttl--num img {
    width: 50px;
}

.txt--pagenum img {
    width: 50px;
}

.txt--pagenum--eng img {
    width: 70px;
}


/*===============================================
margin padding
===============================================*/

.ttl--border-box {
    padding: 0.3em 0.2em 0.3em 0.4em;
}

.ttl--num {
    margin-bottom: 20px;
}

.subttl--basic {
    margin-bottom: 2em;
}

.subttl--small {
    margin-bottom: 0.8em;
}

.subttl {
    margin-bottom: 60px;
}

.subttl--grid {
    margin: 55px 0 45px;
}

.subttl--timeline {
    margin-top: -6.3em;
}

.subttl--timeline-s {
    margin-top: -2em;
}

.subttl--timeline-L {
    margin-left: -80px;
    padding-right: 10px;
}

.subttl--timeline-R {
    margin-right: -80px;
    padding-left: 10px;
}

.subttl--timeline-advance {
    margin-top: -3em;
}

.subttl--essay {
    margin-bottom: 20px;
}

.txt--script {
    margin-bottom: 20px;
}

.txt--strong {
    padding: 1px 3px 0 0;
}

.copy--vertical {
    margin-top: -40px;
}

.copy--vertical__inner {
    padding: 30px 25px;
}

.copy--box {
    padding: 50px 50px 45px;
}

.copy--box.align--left {
    margin: 10px 40px 40px -40%;
}

.copy--box.align--right {
    margin: 10px -40% 40px 40px;
}

.txt--normal {
    padding-bottom: 1.0em;
}

.txt--essay {
    margin-bottom: 30px;
}

.txt--story {
    padding: 2em 4em 1em;
    margin-bottom: 0;
}

.txt--copyright {
    padding: 2.5em 0;
}

.txt--flow {
    margin-bottom: -10%;
}

.txt--bg-colorful {
    padding: 2px 4px;
}

.txt--pasttime {
    margin: 8em;
    padding: 0.5em;
}

.txt--flow-halfway {
    padding: 2em 1em 2em 1.8em;
    margin-bottom: 180px;
    margin-left: -9em;
}

.txt--pagenum {
    margin-top: 5px;
}

.txt--pagenum--eng {
    margin-top: 7px;
}



/*===============================================
display
===============================================*/

.ttl--subpage,
.ttl--subpage-eng,
.ttl--index-eng,
.ttl--num,
.subttl,
.subttl--grid,
.subttl--timeline,
.txt--xsmall {
    display: block;
}

.copy--vertical__inner {
    display: inline-block;
}

.txt--script {
    display: block;
}

.txt--flow-halfway {
    display: inline-block;
}



/*===============================================
position
===============================================*/

.ttl--subpage,
.ttl--subpage-eng,
.subttl,
.subttl--basic,
.subttl--grid,
.subttl--timeline,
.copy--vertical__inner,
.txt--marker,
.txt--flow,
.txt--copyright,
.txt--pagenum {
    position: relative;
}


/*===============================================
z-index
===============================================*/

.subttl--timeline,
.subttl--timeline-s,
.subttl--timeline-advance,
.txt--pagenum {
    z-index: 3;
}



/*===============================================
before after child
===============================================*/

.ttl--num:after {
    width: 3px;
    height: 4px;
    margin: 20px auto 0;
    content: " ";
    background-color: #099c7f;
    background-size: auto 100%;
    display: block;
}

.ttl--subpage--section:before {
    height: 13px;
    margin: 0px auto 12px;
    content: " ";
    background: url('../../img/ico-crown.png') no-repeat center center;
    background-size: auto 100%;
    display: block;
}

.ttl--subpage:after {
    height: 1px;
    margin: 7px auto 3px;
    content: " ";
    background: url('../../img/ico-border.png') no-repeat center center;
    background-size: auto 100%;
    display: block;
}

.ttl--subpage-eng:after {
    height: 4px;
    margin: 3px auto 0;
    content: " ";
    background: url('../../img/ico-dot.png') no-repeat center center;
    background-size: auto 100%;
    display: block;
}


.copy--vertical img {
    width: 74px;
}

.txt--script img {
    width: 8%;
}

.txt--flow p {
    position: absolute;
    top: 0;
    left: 0;
}

.txt--pasttime:before,
.txt--pasttime:after {
    content: "ー";
}


/*===============================================
writing mode
===============================================*/

.subttl--vertical {
    -webkit-writing-mode: tb-rl;
    -ms-writing-mode: tb-rl;
    writing-mode: tb-rl;
    /*IE用*/
    writing-mode: vertical-rl;
    -webkit-writing-mode: vertical-rl;
}