/* メディケア for Men（旧デザイン）：本番の mens-top.css から2ページで使うルールを抜き出したもの。tools/build_mens.py で生成 */
.mens_top { border-bottom: 10px solid rgb(0, 0, 0); border-top: 10px solid rgb(0, 0, 0); background: url("../img/mensTop/bgMainVisula.png") 50% 0px no-repeat, linear-gradient(rgb(255, 255, 255) 0%, rgb(199, 199, 199) 100%); background-image: image-set(url("../img/mensTop/bgMainVisula.webp") type("image/webp"), url("../img/mensTop/bgMainVisula.png") type("image/png")), linear-gradient(rgb(255, 255, 255) 0%, rgb(199, 199, 199) 100%); }
.mainVisuals { height: 504px; }
.mainVisuals .leftBox { width: 211px; }
.mainVisuals .rightBox { width: 700px; }
.mainVisuals .rightBox h1 { padding-top: 135px; }
.mainVisuals .rightBox h2 { padding: 0.5em 0px 1em; font-weight: normal; }
.mainVisuals .rightBox p { padding-bottom: 15px; font-size: 0.9em; line-height: 160%; }
.mainVisuals .rightBox p { width: 432px; }
.menuBlock { padding: 1em 0px; }
.menuBlock h1.lineCenter { color: rgb(51, 51, 51); font-size: 1.2em; font-weight: normal; letter-spacing: 0.5em; padding: 1em 0px; background: url("../img/course/common/bar_mens.png") 50% 50% no-repeat; background-image: image-set(url("../img/course/common/bar_mens.webp") type("image/webp"), url("../img/course/common/bar_mens.png") type("image/png")); }
.menuBlock ul li { float: left; padding: 10px; }
.menuBlock ul li dl { width: 460px; }
.menuBlock ul li dt { width: 221px; }
.menuBlock ul li dd h1 { font-size: 0.9em; padding: 10px 2px 0px; }
.menuBlock ul li dd h2 { font-size: 1.15em; line-height: 120%; padding: 7px 2px 10px; border-bottom: 1px solid rgb(0, 0, 0); font-weight: normal; }
.menuBlock ul li dd h3 { font-size: 0.8em; padding: 15px 2px 10px; }
.menuBlock ul li dd p { font-size: 0.75em; padding-left: 2px; }
.menuBlock ul li dd { width: 218px; padding-right: 7px; }
.menuBlock ul li a h1, .menuBlock ul li a h2, .menuBlock ul li a h3 { letter-spacing: 0.1em; color: rgb(51, 51, 51); text-decoration: none; }
.menuBlock ul li a h1 { border-top: 1px solid rgb(0, 0, 0); transition: 0.3s ease-in-out; }
.menuBlock ul li a:hover h1 { border-top: 3px solid rgb(0, 0, 0); }
.menuBlock ul li a dd { border-bottom: 0px; padding-bottom: 0px; transition: 0.3s ease-in-out; }
.menuBlock ul li a:hover dd { padding-bottom: 10px; border-bottom: 3px solid rgb(0, 0, 0); }
@media screen and (max-width: 770px) {
  .mens_top { background: url("../img/mensTop/bgMainVisulaS.png") 50% 0px no-repeat, linear-gradient(rgb(255, 255, 255) 0%, rgb(199, 199, 199) 100%); background-image: image-set(url("../img/mensTop/bgMainVisulaS.webp") type("image/webp"), url("../img/mensTop/bgMainVisulaS.png") type("image/png")), linear-gradient(rgb(255, 255, 255) 0%, rgb(199, 199, 199) 100%); }
  .mainVisuals { height: 100%; }
  .mainVisuals .leftBox { width: 100%; text-align: center; }
  .header dl.fntGothic { padding: 15px 0px; max-width: 211px; margin: 0px auto; }
  .mens_top { background-size: cover; background-position: 50% 0px; }
  .mainVisuals .rightBox { width: 100%; }
  .mainVisuals .rightBox h1 { padding-top: 15px; text-align: center; }
  .mainVisuals .rightBox h2 { padding: 0.5em 0px 1em; font-weight: normal; text-align: center; }
  .mainVisuals .rightBox p { width: 100%; }
  .menuBlock ul li { width: 49%; float: left; padding: 0px; }
  .menuBlock ul li dl, .menuBlock ul li dt, .menuBlock ul li dd { width: 100%; max-width: 222px; margin: 0px auto; }
}
@media screen and (max-width: 380px) {
  .mainVisuals .rightBox h2 { font-size: 100%; }
  .mens_top { background-image: none; }
  .menuBlock ul li dl, .menuBlock ul li dt, .menuBlock ul li dd { font-size: 80%; }
}