@charset "UTF-8";
/* CSS Document */

.hp{ margin: 0; background: url("img/00.jpg") no-repeat center center / cover; padding: 100px 0; position: relative;}
.hp::after{ display: block; content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255,255,255,0.5);}
.hp .mb{ position: relative; z-index: 2;}

.meritlist{ display: flex; justify-content: space-between;}
.meritlist li{ flex: 0 0 15.5%; position: relative;}
.meritlist li *{ margin-top: 0;}
.meritlist li a{ position: relative; display: block; height: 100%; background: #ece7d6; color: #333333; text-decoration: none;}
.meritlist li figure{ display: block; padding: 66.66% 0 0 0; background: no-repeat center center / cover; position: relative; color: #FFFFFF;}
.meritlist li figure figcaption{
  display: flex;
  position: absolute;
  z-index: 2;
  top: 1px;
  left: 0;
  bottom: 0;
  right: 0;
  justify-content: center;
  align-items: center;
  font-size: 128%;
}
.meritlist li figure figcaption span{ margin-left: 0.1em; font-size: 128%;}
.meritlist li figure::after{ display: block; content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); transition: all 0.5s;}
.meritlist li h3{ margin: 1.0em 1.0em 1.0em 1.0em; line-height: 1.5; font-size: 86%;}
.meritlist li a:hover figure::after{ background: rgba(159,139,57,0.8);}

.section-title-sub{ font-size: 128%;}
.text-copy{ font-size: 108%;}

#merit03 .mb{ display: flex; justify-content: space-between;}
#merit03 .mb article:nth-child(1){ flex: 0 0 66%;}
#merit03 .mb article figure{ position: relative;}
#merit03 .mb article figure figcaption{ position: absolute; bottom: 0.5em; right:0.5em; color: #FFFFFF;}
#merit03 .mb article:nth-child(2){ flex: 0 0 32%; position: relative;}
#merit03 .mb article:nth-child(2) figure{ display: block; position: relative; width: 100%; height: 100%; background: no-repeat center center / cover;}

.block02 .mb{ display: flex; justify-content: space-between; align-items: center;}
.block02 .mb article:nth-child(1){ flex: 0 0 60%;}
.block02 .mb article figure{ position: relative;}
.block02 .mb article figure figcaption{ position: absolute; bottom: 0.5em; right:0.5em; color: #FFFFFF;}
.block02 .mb article:nth-child(2){ flex: 0 0 38%; position: relative;}
.block02 .mb article:nth-child(2) figure{ display: block; position: relative; padding: 66.66% 0 0 0; background: no-repeat center center / cover;}

@media only screen and (max-width:480px){ /* sm pnly */
  .meritlist{ display: flex; justify-content: space-between; flex-wrap: wrap}
  .meritlist li{ flex: 0 0 49%; position: relative;}
  
  #merit03 .mb{ display: block;}
  #merit03 .mb article:nth-child(2) figure{ padding: 66.66% 0 0 0; height: auto;}
  
  .block02 .mb{ display: block;}
}