﻿@charset "utf-8";
/* CSS Document */

/*選択不可にする*/
.container {
        -ms-user-select: none; /* Internet Explorer */
       -moz-user-select: none; /* Firefox */
    -webkit-user-select: none; /* Chrome, Safari, and Opera */
            user-select: none; /* Internet Explorer */
    -webkit-touch-callout: none; /* Disable Android and iOS callouts*/
}

/*----------------------------------------------------
	グローバル変数
    ※文字サイズと基本の色はglobalStyle.cssで
    　記載しています。なるべくグローバル変数を
    　使用するようにしています。
----------------------------------------------------*/
:root {
    --fontsize-H1: 24px;
    --fontsize-H2: 28px;
    --fontsize-XXL: 32px;
    --fontsize-XL: 28px;
    --fontsize-L: 24px;
    --fontsize-M: 20px;
    --fontsize-S: 16px;
    --fontsize-XS: 14px;
    --fontsize-XXS: 10px;
    --color-bg-main1: #00aed9;/*ManGoブルー*/
    --color-bg-main2: #7BBA28;/*濃い緑*/
    --color-bg-main3: #d3edd9;/*薄い緑*/
    /*--color-bg-main4: #a7d9b2;*//*薄い緑のサブ*/
    --color-bg-main4: #c3d9e9;/*薄い青*/
    --color-bg-gradMain1-1: rgb(0,174,217);
    --color-bg-gradMain1-2: linear-gradient(90deg, rgba(0,174,217,1) 21%, rgba(0,106,217,1) 100%);
    --color-btn1: #1c9ebe;/*濃い青*/
    --color-text: #00aed9;
    --color-text-brack: #3c3c3c;
}
@media (max-width: 1029px) {
    :root {
        --fontsize-H1: 24px;
        --fontsize-H2: 22px;
        --fontsize-XXL: 32px;
        --fontsize-XL: 18px;
        --fontsize-L: 18px;
        --fontsize-M: 16px;
        --fontsize-S: 14px;
        --fontsize-XS: 12px;
        --fontsize-XXS: 10px; 
    }
}
@media (max-width: 767px) {
    :root {
        --fontsize-H1: 24px;
        --fontsize-H2: 22px;
        --fontsize-XXL: 26px;
        --fontsize-XL: 20px;
        --fontsize-L: 18px;
        --fontsize-M: 16px;
        --fontsize-S: 14px;
        --fontsize-XS: 12px;
        --fontsize-XXS: 10px; 
    }
}

/*----------------------------------------------------
	Reset
----------------------------------------------------*/
html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	/*font-size: 100%;*/
    /*font-size: var(--fontsize-M);*/
	-webkit-text-size-adjust: 100%;
	/*Android Chromeフォントバグ対策*/
	max-height: 999999px;
}
article, aside, figure, footer, header, hgroup, nav, section {
	display: block;
}
html {
    overflow-y: hidden;
}
ul,ol {
	list-style: none;
}
img {
	border: none;
	vertical-align: top;
}
table {
	/*width: 100%;
	border-collapse:collapse;
	border-spacing:0;*/
	/*font-size:100%;*/
}
img {
	border:0;
}
address, caption, cite, code, dfn, em, strong, th, var {
	font-style:normal;
	font-weight:normal;
}
ul li, ol li {
	list-style:none;
}
h1, h2, h3, h4, h5, h6 {
	/*font-size:100%;*/
	font-weight:normal;
}
input, textarea, select {
	font-family:inherit;
	/*font-size:inherit;*/
	font-weight:inherit;
}
input, textarea, select {
	/**font-size:100%;*/
}
a img {
	border:none;
}
.gray {
	color: #898989;
}

/*----------------------------------------------------
	Clearfix
----------------------------------------------------*/
/* モダンブラウザにのみ適用*/
#header:after,
#content:after,
#footer:after,
.section:after,
.clearfix:after {
	content:"";
	clear:both;
	display:block;
	height:0;
}
/* for IE */
#header,
#content,
#footer,
.section,
.clearfix {
	display: inline-block;
}
#header,
#content,
#footer,
.section,
.clearfix {
	display: block;
}

/*----------------------------------------------------
	全体のCSS
----------------------------------------------------*/
* {
	margin: 0;
	padding: 0;
}
body {
    background-color: #ecf2f2;
    color: var(--color-text);
    font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', sans-serif;
}
a {
	text-decoration: none;
	color: #FFF;
}

.bg_main_color {
    background: var(--color-bg-gradMain1-1);
    background: var(--color-bg-gradMain1-2);
    color: #FFF;
}

/*ヘッダー用スタイル*/
.headarea {
    width: calc(100% - 6%)!important;
    padding: 0 3%!important;
    height: 75px!important;
    min-height: 75px!important;
    margin: 0!important;
}
.headarea_logo {
    width: 50px;
    height: 50px;
    float: left;
    margin-top: 15px;
}
.headarea_logo > img {
    width: 100%;
    height: auto;
}
#header_patientName_1 img {
    max-width: 100%;
}
.headarea_left {
    float: left;
    padding: 3px 0 0 10px;
    line-height: 1.2;
}
.headarea_left > div > span, 
.headTitle_h1, 
.headTitle_h2, 
.headTitle_h3 {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: inline-block;
    width: 100%;
}
.headarea_right {
    float: right;
}

.headTitle_h2 {
    font-size: var(--fontsize-XS);
    line-height: 20px;
    margin-top: 10px;
    float: left;
}
.headTitle_h3 {
    font-size: var(--fontsize-XL);
    line-height: 30px;
    float: left;
}
/*患者情報エリア*/
.patientInfoArea {
    padding: 5px 3%;
    background-color: #0473c4;
    color: #FFF;
}
.patientInfoArea_inrName {
    display: inline-block;
    padding-right: 1em;
}
.patientInfoArea_inrBirth {
    display: inline-block;
}

/*フッターを下に固定*/
footer {
    padding: 5px 25px 10px 25px;
    text-align: center;
    position: fixed;
    bottom: 0;
    width: 100%;
}
