@charset "Shift_JIS";

body {max-width: 680px;}

/*---------------------------------
contents
-----------------------------------*/
#gaju{margin:4% 0 4%;padding:4%;}

/*---------------------------------
???? gaju
-----------------------------------*/
.area_gaju_inner{padding: 1em 0;}
.area_gaju_inner ul{display:flex;justify-content: center;}
.area_gaju_inner ul li{margin:4px;font-size: 23px;color: #656565;width: 20%;border-radius: 50%;display: inline-block;text-align: center;position:relative;background:#fff;padding-top: 12px;box-sizing: border-box;border:2px solid #656565;font-weight: bold;}
.area_gaju_inner ul li a{position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 100%;text-align: center;font-weight: bold;}
.area_gaju_inner ul.top_list li{width:23%;font-size: min(6.2vw, 24px);border:none;}
.area_gaju_inner ul.top_list li.ha{border:none;transition:0.2s;}
.area_gaju_inner ul.top_list li.ha a{color: #656565;}
.area_gaju_inner ul.top_list li.ka a{color: #D60000;}
.area_gaju_inner ul.top_list li.be a{color: #A38111;}
.area_gaju_inner ul.top_list li.ki a{color: #5A1488;}
.area_gaju_inner ul.top_list li.ki a::after{border-left: 8px solid #5A1488;}
.area_gaju_inner ul.top_list li.be a::after{border-left: 8px solid #A38111;}
.area_gaju_inner ul.top_list li.ha a::after{border-left: 8px solid #656565;}
.area_gaju_inner ul.bottom_list{display:flex;justify-content: center;flex-wrap:wrap;}
.area_gaju_inner ul.bottom_list li{padding-top:0;}
.area_gaju_inner ul.bottom_list li div.wrap_gaju_bottom{padding-top:100%;width:100%;position:relative;}
.area_gaju_inner ul.bottom_list li div.wrap_gaju_bottom span{position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 100%;text-align: center;font-weight: bold;}

.area_gaju_inner ul li span.adjust_name{position:absolute;top:50%;left:50%;transform: translate(-50%,-50%);width:100%;text-align: center;font-weight: 700;}
.area_gaju_inner ul li span.adjust_age{font-size: 13px;display: block;text-align: center;color: #ed301d;line-height: 1.2;}
.area_gaju_inner ul li.ki span.adjust_age{color: #5A1488;}
.area_gaju_inner ul li.be span.adjust_age{color: #A38111;}
.area_gaju_inner ul li.ha span.adjust_age{color: #656565;}

.area_gaju_inner ul.bottom_list li a{color: #313131;border: 2px solid #313131;background: #fff;}
.area_gaju_inner ul.bottom_list li span.adjust_age{color: #313131;margin-top: 0;width: 100%;}

.area_gaju_annotation{text-align: right;}

.area_gaju_inner ul li div.wrap_gaju {font-size: min(6vw, 21px);color: #ed301d;width: 100%;padding-top: 100%;border-radius: 50%;display: inline-block;text-align: center;position: relative;background: #FFDDDD;}

.area_gaju_inner ul.top_list li.ka div.wrap_gaju{background:#FFDDDD;border:none;}
.area_gaju_inner ul.top_list li.ki div.wrap_gaju{background:#ECDDFF;border:none;}
.area_gaju_inner ul.top_list li.be div.wrap_gaju{background:#FFF0C7;border:none;}
.area_gaju_inner ul.top_list li.ha div.wrap_gaju{background:#E8F0F0;border:none;}

#gaju h3.heading_single{padding-top:12%;margin:-4% 4% 4%;}