body{background: #fff;}

a:hover{opacity: 1; text-decoration: none;}

#menuList{background-color: #ffb0b3; padding: 20px 0px;}
#menuList li{display: inline-block; vertical-align: middle;}
#menuList li:before{content: "|"; color: #c491a4; font-size: 24px; height: 10px; vertical-align: middle;}
#menuList li:last-child:after{content: "|"; color: #c491a4; font-size: 24px; height: 10px; vertical-align: middle;}
#menuList li a{display: inline-block; min-width: 120px; vertical-align: middle; padding: 70px 40px 0px;}
#menuList li a#icon01{background: url('../images/icon01.png') top center no-repeat; background-size: 60px 60px;}
#menuList li a#icon02{background: url('../images/icon02.png') top center no-repeat; background-size: 60px 60px;}
#menuList li a#icon03{background: url('../images/icon03.png') top center no-repeat; background-size: 60px 60px;}
#menuList li a#icon04{background: url('../images/icon04.png') top center no-repeat; background-size: 60px 60px;}

#menuList li a#icon01:hover{background: url('../images/icon01-active.png') top center no-repeat; background-size: 60px 60px;}
#menuList li a#icon02:hover{background: url('../images/icon02-active.png') top center no-repeat; background-size: 60px 60px;}
#menuList li a#icon03:hover{background: url('../images/icon03-active.png') top center no-repeat; background-size: 60px 60px;}
#menuList li a#icon04:hover{background: url('../images/icon04-active.png') top center no-repeat; background-size: 60px 60px;}

@media screen and (max-width: 768px){
  #menuList li a{font-size: 12px;}
  #menuList li:before{content: "|"; color: #c491a4; font-size: 0px; height: 5px; vertical-align: middle;}
  #menuList li:last-child:after{content: "|"; color: #c491a4; font-size: 0px; height: 5px; vertical-align: middle;}
  #menuList li a{display: inline-block; min-width: 40px; vertical-align: middle; padding: 35px 10px 0px;}
  #menuList li a#icon01{background: url('../images/icon01.png') top center no-repeat; background-size: 30px 30px;}
  #menuList li a#icon02{background: url('../images/icon02.png') top center no-repeat; background-size: 30px 30px;}
  #menuList li a#icon03{background: url('../images/icon03.png') top center no-repeat; background-size: 30px 30px;}
  #menuList li a#icon04{background: url('../images/icon04.png') top center no-repeat; background-size: 30px 30px;}
  #menuList li a#icon01:hover{background: url('../images/icon01-active.png') top center no-repeat; background-size: 30px 30px;}
  #menuList li a#icon02:hover{background: url('../images/icon02-active.png') top center no-repeat; background-size: 30px 30px;}
  #menuList li a#icon03:hover{background: url('../images/icon03-active.png') top center no-repeat; background-size: 30px 30px;}
  #menuList li a#icon04:hover{background: url('../images/icon04-active.png') top center no-repeat; background-size: 30px 30px;}
}

p{margin: 15px 0px; font-size: 14px; line-height: 1.5; color: #123577;}
.bgWhite{background-color: #fff;}
.mb40{margin-bottom: 40px;}
.redFont{padding: 0px 15px; color: #d4555c; border-bottom: 1px solid #d4555c;}
.blueFont{padding: 0px 15px; color: #123577; border-bottom: 1px solid #123577;}
.w80{display: block; width: 80%; margin: 0px auto;}
.w90{display: block; width: 90%; margin: 0px auto;}
.line{border-bottom: 1px solid #ccc; margin-top: 40px; margin-bottom: 40px;}

#content01{background-color: #ededed; padding-top: 20px;}
.imgBlock{margin: 15px 0px;}
.w90 .imgBlock{margin: 30px 0px;}
.textBlock{padding: 20px 15px;}

.font-number{font-size: 28px; color: #123577;}
h1.font-name{font-size: 16px; color: #123577;}
h1.font-name-f{font-size: 16px; color: #123577;}
h1 span{padding-top: 10px; border-left: 2px solid #123577; display: inline-block; padding-left: 10px; margin-top: 5px;}
h1.font-name-f span{display: inline-block; margin-top: 5px; padding-left: 0px; border: 0px;}

h2.hasIcon{font-size: 16px; color: #123577; padding-left: 30px; background: url('../images/assets-icon01.jpg') center left no-repeat; margin-top: 0px; padding-top: 5px; padding-bottom: 5px;}

.bg01{background-color: #ffb0b3;}
.bg02{background-color: #ededed;}

#content02{background-color: #ffb0b3; padding: 20px 0px;}
#content03{background-color: #d8dce5; padding: 20px 0px;}

.border-bottom{border-bottom: 1px solid #ccc;}
.border-bottom-02{border-bottom: 1px dotted #4a63a5;}
.m-y-20{margin-top: 20px; margin-bottom: 20px;}
.bg-gray{background: #e8e8e8;}
.bg-gray02{background-image: linear-gradient(#ffffff, #efefef);}

.w90 .no-m-b{margin-bottom: 0px;}

.w-full {
  width: 100%;
}

.flex {
  display: flex;
}
.grid {
  display: grid;
}

.flex-col {
  flex-direction: column;
}
.items-center {
  align-items: center;
}
.justify-center {
  justify-content: center;
}

.ta-hidden {
  display: none;
}

.group-hover\:block {
  &:is(:where(.group):hover *) {
    @media (hover: hover) {
      display: block;
    }
  }
}
.group-hover\:ta-hidden {
  &:is(:where(.group):hover *) {
    @media (hover: hover) {
      display: none;
    }
  }
}

.max-w-screen-lg {
  max-width: 1080px;
}

.mx-auto {
  margin-inline: auto;
}

.w-10\/12 {
  width: calc(10 / 12 * 100%);
}

.w-11\/12 {
  width: calc(11 / 12 * 100%);
}

.grid-cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

#menu-list {
  padding: 20px 0px;
}
#menu-list .grid a {
  padding: 0px 10px;
}
@media (max-width: 750px) {
  #menu-list {
    padding: 10px 0px;
  }
  #menu-list .grid a {
    padding: 0px 5px;
  }
}