@charset "UTF-8";
@import url("./pc.css") screen and (min-width: 1000px);
@import url('./mobile.css') screen and (max-width: 1000px);
@font-face { font-family: 'Material Symbols Outlined'; src: url(material-symbols-outlined.woff2) format('woff2'), url(material-symbols-outlined.woff) format('woff'), url(material-symbols-outlined.ttf) format('truetype'); }
@font-face { font-family: 'M PLUS 1'; src: url(mplus1-thin.woff2) format('woff2'), url(mplus1-thin.woff) format('woff'), url(mplus1-thin.ttf) format('truetype'); }

/*********************
        setting 
**********************/

:root {
/* font-family */
    --font_text: sans-serif;
    --font_logo: 'M PLUS 1', sans-serif;
/* color */
    --color_text: #333;
    --color_light: #DDE6ED;
    --color_middle: #526D82;
    --color_dark: #27374D;
    --color_accent: #B82E2E;
    --color_star: #ffb721;
}

/* icon */
.icon_home::before { content: '\e88a'; } /* home */
.news::before { content: '\ef49'; } /* campaign */
.info::before { content: '\e88e'; } /* info */
.icon_list::before { content: '\e241'; } /* list */
.icon_search::before { content: '\e8b6'; } /* search */
.icon_top::before { content: '\e55d'; } /* navigation */
.cat_arrow::before { content: '\e089'; } /* start */
.sub_cat_arrow::before { content: '\e089'; } /* start */

.star1::before { content: '\e838'; font-variation-settings: 'FILL' 1, 'wght' 100, 'GRAD' 0, 'opsz' 32; } /* star */
.star05::before { content: '\e839'; font-variation-settings: 'FILL' 1, 'wght' 100, 'GRAD' 0, 'opsz' 32; } /* star half */
.star0::before { content: '\e838'; font-variation-settings: 'FILL' 0, 'wght' 100, 'GRAD' 0, 'opsz' 32; } /* star */

.icon_medicine::before { content: '\e4c8'; } /* mixture_med */
    .icon_general::before { content: '\f805'; } /* stethoscope */
    .icon_gastro::before { content: '\e0f1'; } /* gastroenterology */
    .icon_cardio::before { content: '\e09c'; } /* cardiology */
    .icon_gluco::before { content: '\e4a0'; } /* glucose */
    .icon_pulmo::before { content: '\e124'; } /* pulmonology */
    .icon_hemato::before { content: '\e0f6'; } /* hematology */
    .icon_allergy::before { content: '\e094'; } /* allergies */
    .icon_micro::before { content: '\e10c'; } /* microbiology */
    .icon_neuro::before { content: '\e10e'; } /* neurology */
    .icon_nephro::before { content: '\e10d'; } /* nephrology */
.icon_surgery::before { content: '\e131'; } /* surgery */
.icon_emergency::before { content: '\e650'; } /* vital signs */
.icon_pediatrics::before { content: '\e11d'; } /* pediatrics */
.icon_obgn::before { content: '\f5f1'; } /* pregnancy */
.icon_psy::before { content: '\e09f'; } /* cognition */
.icon_others::before { content: '\ea19'; } /* menu book */
    .icon_anes::before { content: '\f80d'; } /* fluid balance */
    .icon_intensive_care::before { content: '\e127'; } /* respiratory rate */
    .icon_radiology::before { content: '\e125'; } /* radiology */

/*********************
        general  
**********************/

html {
    width: 100%;
    height: 100%;
    min-height: 100vh;
    font-family: var(--font_text);
    color: var(--color_text);
}

body {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

img {
    max-width: 100%;
}

a {
    text-decoration: underline;
    color: var(--color_text);
}

a:hover {
    color: var(--color_accent);
}

.wrapper h2 {
    margin-bottom: 20px;
    font-size: 20px;
    color: var(--color_dark);
}

/*********************
        header  
**********************/

header {
    width: 100%;
}

/* logo */

#logo {
    padding-top: 30px;
    padding-bottom: 20px;
    font-size: 48px;
    font-family: var(--font_logo);
    color: #000;
    text-align: center;
}

#logo p {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 26px;
    color: #000;
}

#logo p::before, 
#logo p::after {
    content: '';
    width: 1px;
    height: 30px;
    background-color: #000;
}

#logo p::before {
    transform: rotate(-30deg);
    margin-right: 12px;
}

#logo p::after {
    transform: rotate(30deg);
    margin-left: 12px;
}

#logo a {
    text-decoration: none;
    color: #000;
}

/* nav */

nav {
    width: 100%;
    border-top: 3px solid var(--color_dark);
    background-color: var(--color_light);
}

nav.fixed {
    position: fixed;
    top: 0;
    z-index: 100;
}

nav ul {
    display: flex;
    justify-content: center;
    align-items: center;
    list-style: none;
    min-height: 45px;
}

nav ul li {
    padding: 0 18px;
}

nav a {
    text-decoration: none;
}

.nav_icon {
    font-size: 24px;
    font-family: 'Material Symbols Outlined';
    font-variation-settings:
    'FILL' 1,
    'wght' 200,
    'GRAD' 0,
    'opsz' 24;
}

/* go top */

aside {
    display: none;
    position: fixed;
    right: 10px;
    bottom: 10px;
    z-index: 100;
    width: 45px;
    border-radius: 5px;
    background-color: var(--color_middle);
    text-align: center;
    font-size: 32px;
    font-family: 'Material Symbols Outlined';
    font-variation-settings: 'FILL' 1, 'wght' 100, 'GRAD' 0, 'opsz' 32;
}

aside a, 
aside a:hover {
    text-decoration: none;
    color: var(--color_light);
}

aside.top {
    display: block;
}

/*********************
        main  
**********************/

main {
    flex: 1;
    width: 100%;
}

main.fixed {
    padding-top: 48px;
}

section {
    width: 100%;
    margin: 8px 0;
}

.info {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 16px;
    background-color: #f5f5f5;
    font-size: 14px;
}

.info p {
    margin: 12px;
}

.info::before {
    font-size: 42px;
    font-family: 'Material Symbols Outlined';
    font-variation-settings:
    'FILL' 0,
    'wght' 400,
    'GRAD' 0,
    'opsz' 42;
    color: var(--color_dark);
}

/* category */

#category {
    display: flex;
    align-items: center;
    list-style: none;
}

#home_cat {
    list-style: none;
}

#sub_cat {
    display: flex;
    align-items: center;
    margin-top: 10px;
    padding: 5px;
    list-style: none;
    background-color: var(--color_middle);
    border: 3px solid var(--color_middle);
}

#category a, 
#home_cat a, 
#sub_cat a {
    text-decoration: none;
    color: var(--color_dark);
}

#category li:hover, 
#home_cat li:hover, 
#sub_cat li:hover {
    border-color: var(--color_accent);
    color: var(--color_accent);
}

#category li.now, 
#sub_cat li.now {
    background-color: var(--color_light);
}

.icon_sub {
    padding-right: 10px;
    font-size: 40px;
    font-family: 'Material Symbols Outlined';
    font-variation-settings:
    'FILL' 0,
    'wght' 200,
    'GRAD' 0,
    'opsz' 40;
}

.cat_ja {
    font-size: 18px;
    font-weight: bold;
}

.cat_en {
    font-size: 10px;
}

.cat_arrow, 
.sub_cat_arrow {
    padding-left: 10px;
    padding-right: 10px;
    font-size: 28px;
    font-family: 'Material Symbols Outlined';
    font-variation-settings:
    'FILL' 0,
    'wght' 200,
    'GRAD' 0,
    'opsz' 28;
}

.cat_arrow {
    color: var(--color_dark);
}

.sub_cat_arrow {
    color: var(--color_light);
}

/* rank_list */

.rank_cat {
    padding-right: 10px;
    font-size: 28px;
    color: var(--color_dark);
}

#rank_list {
    width: 100%;
    padding-bottom: 10px;
    background-color: #f5f5f5;
}

#rank_list h2 {
    position: relative;
    border-bottom: 3px solid var(--color_dark);
    padding: 5px;
    color: var(--color_dark);
}

#rank_list h2:before, 
#rank_list h2:after {
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    content: '';
    position: absolute;
    left: 30px;
    bottom: -15px;
    width: 30px;
    height: 15px;
}

#rank_list h2:before {
    background-color: var(--color_dark);
}

#rank_list h2:after {
    bottom: -11px;
    background-color: #f5f5f5;
}

#rank_list ol {
    list-style: none;
    counter-reset: li;
    width: 100%;
    border: 3px solid var(--color_dark);
    border-left: 8px solid var(--color_dark);
    border-radius: 5px;
    padding: 18px;
    background-color: #fff;
}

#rank_list ol li {
    display: flex;
    align-items: baseline;
    margin: 3px;
}

#rank_list ol li::before {
    display: inline-block;
    content: counter(li);
    counter-increment: li;
    min-width: 20px;
    line-height: 20px;
    margin-right: 10px;
    border-radius: 50%;
    background-color: var(--color_dark);
    text-align: center;
    font-size: 12px;
    font-weight: bold;
    color: #fff;
}

/* article */

article {
    padding-top: 35px;
    text-align: center;
}

article h2 {
    width: 100%;
    border-top: 5px solid var(--color_dark);
    padding: 8px;
    padding-left: 20px;
    background-color: #f5f5f5;
    text-align: left;
    color: var(--color_dark);
}

.flex {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.flex1,
.flex2 {
    margin: 12px;
}

.link {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 3px;
    padding-top: 5px;
}

.link div {
    margin: 3px;
    border-radius: 8px;
    padding: 5px 12px;
    font-size: 14px;
    font-weight: bold;
}

.link a, 
.link a:hover {
    color: #fff;
    text-decoration: none;
}

.amazon {
    background-color: #ff9900;
}

.rakuten {
    background-color: #bf0000;
}

.img a:hover, 
.link a:hover {
    opacity: 80%;
}

.star {
    margin: 10px;
    font-size: 32px;
    font-family: 'Material Symbols Outlined';
    color: var(--color_star);
}

.comment {
    position: relative;
    max-width: 800px;
    margin-top: 25px;
    margin-right: auto;
    margin-left: auto;
    text-align: left;
    padding: 8px 30px;
}

.comment::before, 
.comment::after {
    display: inline-block;
    position: absolute;
    width: 10px;
    height: 100%;
    border: 3px solid var(--color_middle);
    box-sizing: border-box;
    content: '';
}

.comment::before {
    top: 0;
    left: 0;
    border-right: none;
}

.comment::after {
    bottom: 0;
    right: 0;
    border-left: none;
}

.comment span {
    background:linear-gradient(transparent 60%, #fcf69f 60%);
}

/* chart */
.chart {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 200px;
    height: 200px;
    margin: 0 auto;
    padding: 35px;
    box-sizing: content-box;
}

.chart svg {
    width: 100%;
    height: 100%;
    padding: 10px;
}

.chart dl {
    position: absolute;
    width: 100%;
    height: 100%;
}

.chart dl > div {
    position: absolute;
    color: #666;
    font-size: 12px;
    text-align: center;
}

.chart dl dd {
    font-size: 14px;
    font-weight: bold;
    color: var(--color_accent);
}

.chart dl > div:nth-child(1) {
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

.chart dl > div:nth-child(2) {
    top: 31%;
    right: 7%;
    transform: translateX(50%);
}

.chart dl > div:nth-child(3) {
    bottom: 6%;
    right: 25%;
    transform: translateX(50%);
}

.chart dl > div:nth-child(4) {
    bottom: 6%;
    left: 25%;
    transform: translateX(-50%);
}

.chart dl > div:nth-child(5) {
    top: 31%;
    left: 7%;
    transform: translateX(-50%);
}

.chart dd {
    margin: 0;
}

/*********************
        footer  
**********************/

footer {
    width: 100%;
    margin-top: 50px;
    border-top: 3px solid var(--color_dark);
    background-color: #f5f5f5;
    font-size: 10px;
}

footer h3 {
    margin-bottom: 5px;
    border-left: 3px solid var(--color_middle);
    padding-left: 8px;
    font-size: 14px;
    color: var(--color_dark);
}

#copy {
    width: 100%;
    margin-top: 14px;
    padding: 8px;
    background-color: var(--color_dark);
    text-align: center;
    font-size: 14px;
    font-family: var(--font_logo);
    color: var(--color_light);
}

#copy a, 
#copy a:hover {
    text-decoration: none;
    color: var(--color_light);
}