@keyframes scrollbar { 0% { height: 0; }
  15% { height: 0; }
  30% { height: 0; }
  75% { height: 100%; }
  100% { height: 100%; } }
@keyframes scrollbar2 { 0% { height: 100%; }
  15% { height: 0%; }
  50% { height: 0%; }
  100% { height: 0%; } }
@keyframes extend { 0% { transform: scaleY(0); }
  100% { transform: scaleY(1); } }
@keyframes hidden { 0% { transform: scaleY(1); }
  100% { transform: scaleY(0); } }
.wrap ul li figure img { border: 1px solid #161719; border-radius: 0.5em; }
.wrap dl { border-bottom: 1px solid #555; }
.wrap dl dt, .wrap dl dd { border-top: 1px solid #555; }
.wrap dl dt:nth-child(1) { border: none; }
.wrap dl dd:nth-child(2) { border: none; }
.wrap dl dt { font-weight: bold; }
.wrap dl dd a:link { color: #f8f8f8; text-decoration: underline; transition: opacity 0.3s; }
.wrap dl dd a:visited { color: #f8f8f8; text-decoration: underline; }
.wrap dl dd a:hover { color: #d71b2a; text-decoration: none; }
.wrap dl dd a:active { color: #f8f8f8; text-decoration: underline; }
.wrap dl dd a span { position: relative; }
.wrap dl dd a span::after { content: ""; display: block; background: url("../images/common/icon_blank_white.png") no-repeat; background-size: 100% auto; position: absolute; right: -1.2em; bottom: 0; }
.wrap dl .role p { background: #f8f8f8; color: #161719; border: 1px solid #f8f8f8; }
.wrap dl .role p.false { background: #161719; color: #555; border: 1px solid #555; }

@media screen and (min-width: 568px) { .wrap ul { display: flex; flex-wrap: wrap; }
  .wrap ul li { width: 50%; min-width: 510px; }
  .wrap ul li:nth-child(odd) { padding: 0 40px 0 0; }
  .wrap ul li:nth-child(even) { padding: 0 0 0 40px; }
  .wrap ul li figure { margin-bottom: 20px; }
  .wrap ul li dl { display: flex; flex-wrap: wrap; margin-bottom: 75px; font-size: 15px; }
  .wrap ul li dl dt, .wrap ul li dl dd { padding: 6px 0; }
  .wrap ul li dl dt { width: 31%; }
  .wrap ul li dl dd { width: 69%; }
  .wrap ul li dl dd a span::after { width: 13.5px; height: 13px; }
  .wrap ul li dl .role { display: flex; flex-wrap: wrap; gap: 5px 1.3%; padding: 10px 0; }
  .wrap ul li dl .role p { font-size: 14px; letter-spacing: 0; line-height: 1; text-align: center; width: 32%; padding: 2px; border-radius: 9px; } }
@media screen and (min-width: 568px) and (max-width: 1420px) { .wrap ul li dl .role p:nth-child(7) { font-size: 11px; } }

@media screen and (min-width: 568px) { #container01 { padding: 150px 80px 0; }
  #container01 #web { height: 100px; }
  #container02 { padding: 0 80px 0; }
  #container02 #print { height: 100px; }
  #container03 { padding: 0 80px 150px; }
  #container03 #logo { height: 100px; } }
@media screen and (min-width: 1740px) { .wrap ul { display: flex; flex-wrap: wrap; justify-content: space-between; }
  .wrap ul li { width: 32%; min-width: 510px; }
  .wrap ul li:nth-child(odd) { padding: 0; }
  .wrap ul li:nth-child(even) { padding: 0; }
  .wrap ul li dl .role p { font-size: 0.672vw; border-radius: 0.563vw; } }
@media screen and (max-width: 567px) { .wrap ul li figure { margin-bottom: 3vw; }
  .wrap ul li dl { display: flex; flex-wrap: wrap; margin-bottom: 10vw; font-size: 2.8vw; letter-spacing: 0; }
  .wrap ul li dl dt, .wrap ul li dl dd { padding: 1.2vw 0; }
  .wrap ul li dl dt { width: 26vw; font-size: 2.6vw; }
  .wrap ul li dl dd { width: 58vw; }
  .wrap ul li dl dd a span::after { width: 2.7vw; height: 2.6vw; }
  .wrap ul li dl .role { display: flex; flex-wrap: wrap; gap: 1vw 1.4vw; padding: 2.5vw 0; }
  .wrap ul li dl .role p { font-size: 2.6vw; letter-spacing: 0; line-height: 1; text-align: center; width: 28vw; padding: 0.4vw; border-radius: 1.8vw; }
  .wrap ul li dl .role p:nth-child(7) { font-size: 2.5vw; }
  .anchor p a { padding: 2vw 7vw !important; }
  #container01 { padding: 30vw 8vw 5vw; }
  #container01 #web { height: 15vw; }
  #container02 { padding: 0 8vw 5vw; }
  #container02 #print { height: 15vw; }
  #container03 { padding: 0 8vw 30vw; }
  #container03 #logo { height: 15vw; } }