/*  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; }

:root {
  --dgm-w:1000;
  --dgm-h:1080;}

#dgm-rl-box { position:relative; width:100%; height:auto; margin-bottom:1.0em; aspect-ratio:var(--dgm-w) / var(--dgm-h); 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_relation202605.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:calc(169 / var(--dgm-h) * 100%); left:calc(261 / var(--dgm-w) * 100%); width:calc(250 / var(--dgm-w) * 100%); height:calc(252 / var(--dgm-h) * 100%); }
#dgm-rl-link li:nth-child(2) { top:calc(169 / var(--dgm-h) * 100%); left:calc(530 / var(--dgm-w) * 100%); width:calc(399 / var(--dgm-w) * 100%); height:calc(220 / var(--dgm-h) * 100%); }
#dgm-rl-link li:nth-child(3) { top:calc(319 / var(--dgm-h) * 100%); left:calc(115 / var(--dgm-w) * 100%); width:calc(130 / var(--dgm-w) * 100%); height:calc(357 / var(--dgm-h) * 100%); }
#dgm-rl-link li:nth-child(4) { top:calc(438 / var(--dgm-h) * 100%); left:calc(260 / var(--dgm-w) * 100%); width:calc(250 / var(--dgm-w) * 100%); height:calc(238 / var(--dgm-h) * 100%); }
#dgm-rl-link li:nth-child(5) { top:calc(406 / var(--dgm-h) * 100%); left:calc(530 / var(--dgm-w) * 100%); width:calc(399 / var(--dgm-w) * 100%); height:calc(270 / var(--dgm-h) * 100%); }
#dgm-rl-link li:nth-child(6) { top:calc(920 / var(--dgm-h) * 100%); left:calc(40 / var(--dgm-w) * 100%); width:calc(920 / var(--dgm-w) * 100%); height:calc(120 / var(--dgm-h) * 100%); }

#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; }

}