/*  personal_data
=============================================== */

/* mainttl
-------------------------------- */

#personal_data #mainttl .inner { background-image:url(../img/personal_data/mainttl_bg.jpg); }

/* ---- Media Queries ---- */

@media all and (max-width: 979px) {

#personal_data #mainttl .inner { background-image:url(../img/personal_data/mainttl_bg_smp.jpg); }

}


/* diagram_relation
-------------------------------- */

#diagram_relation { width:800px; margin:0 auto; }

#dgm-rl-box { position:relative; width:100%; height:0; margin-bottom:1.0em; padding-top:calc(2000% / 2000 * 100); border:var(--cl-lightgray) 2px solid; }
#dgm-rl-box .dgm { position:absolute; z-index:1; display:block; left:0; top:0; width:100%; height:100%; background:url(../img/personal_data/diagram_relation202412.png) center center no-repeat; background-size:cover; text-indent:-9999px; }
#dgm-rl-link { position:absolute; z-index:2; left:0; top:0; width:100%; height:100%; }
#dgm-rl-link li { position:absolute; z-index:3; }
#dgm-rl-link li a { display:block; width:100%; height:100%; text-indent:-9999px; background-color:rgba(255,255,255,0); }
@media (hover: hover) { #dgm-rl-link li a:hover { background-color:rgba(255,255,255,0.3); } }
#dgm-rl-link li:nth-child(1) { top:135px; left:208px; width:201px; height:178px; }
#dgm-rl-link li:nth-child(2) { top:135px; left:424px; width:319px; height:99px; }
#dgm-rl-link li:nth-child(3) { top:256px; left:92px; width:104px; height:226px; }
#dgm-rl-link li:nth-child(4) { top:329px; left:208px; width:201px; height:152px; }
#dgm-rl-link li:nth-child(5) { top:245px; left:424px; width:319px; height:236px; }
#dgm-rl-link li:nth-child(6) { top:672px; left:32px; width:736px; height:96px; }

#main #diagram_relation .btn p { padding:0 0.25em  0.5em  0.25em; }
#main .btn p a { padding:0.7em 2.3em 0.8em 1.3em; }
/* ---- Media Queries ---- */

@media all and (max-width: 979px) {

#diagram_relation { width:100%; margin:0; }

}