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

.tss_gotop img{max-width: 88px;}
.hsm_body{
  background-image: url("../img/bg.svg");
  background-position: center center;
  background-repeat: no-repeat;
  background-color: #E62C22;
  background-attachment:fixed;
  background-size: 100% auto;
  padding-bottom: 3em;
}

.hsm_body img{max-width: 100%;}

.hsm_wrap{
  font-size: clamp(14px,0.875rem + 0.18vw,24px);
  line-height: 1.6;
  max-width: 1080px;
  width: calc(100% - 32px);
  margin: auto;
}

.hsm_kv{
    text-align: center;
    padding: 3em 0;
    max-width: 640px;
    margin: auto;
}
.hsm_profile{
  display: flex;
  gap:2%;
  justify-content: center;
  margin-bottom: 2em;
}

.hsm_chara{max-width: 444px;}

.hsm_profile dl{max-width: calc(100% - 444px);}
.hsm_profile dt{
  max-width: 444px;
  margin-bottom: 24px;
}
.hsm_profile dd{
  font-weight: bold;
  line-height: 1.8;
  text-align: left;
  color: #fff;
}
.hsm_linepr{
  background-color: #FFF;
  padding: 32px;
  display: flex;
  gap:24px;
}

.hsm_lineprimg{
  max-width: 206px;
  width: 100%;
}
.hsm_linepr dl{
  max-width: calc(100% - 206px);
  width:100%; 
}
.hsm_linepr dt{
  font-weight: bold;
  font-size: 1.2em;
  line-height: 1.4;
  color: #2f8f22;
}

.hsm_linepr dd{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.hsm_linepr dd div.hsm_sample{
  font-size: 0.75em;
  max-width: 600px;
  width: 100%;
}
.hsm_linepr dd div.hsm_qr{
  width: 19%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hsm_qr > div:first-of-type{
  min-width: 120px;
  margin: auto;
}
.hsm_qr p{font-size: 0.62em;}

.hsm_banner{
  margin: 3em auto;
  max-width: 800px;
  display: block;
  transition: transform 0.15s ease, box-shadow 0.15s ease; /* スムーズに動かすための設定 */
  transform: translateY(0); /* 通常時の位置 */
  box-shadow: 5px 5px 5px #9f0000;
}

@media screen and (max-width:1080px){
  .hsm_linepr dd div.hsm_qr {
    width: 100%;
    flex-direction: row;
  }
  .hsm_linepr dd div.hsm_qr > div:last-of-type{width: 84%;}
}

@media screen and (min-width:801px){
  .hsm_banner:hover{transform: translateY(2px);
  box-shadow: 1px 1px 1px #9f0000;}
}
@media screen and (max-width:800px){
  .hsm_profile {flex-wrap: wrap;}
  .hsm_profile dl {max-width: none;}
  .hsm_profile dt {margin: 0 auto 1em;}
  .hsm_brpc{display: none;}
  .hsm_lineprimg{max-width: 80px;}
  .hsm_linepr dl {max-width: calc(100% - 80px);}
  .hsm_linepr dd div.hsm_qr{max-width: none;} 
  
  footer{padding-bottom: calc(17.5vw + 120px);}
}

@media screen and (max-width:480px){
  .hsm_body {background-size: cover;}
  .hsm_kv {padding: 3em 3em 1em;}
  .hsm_chara {width: 46.25vw;}
  .hsm_lineprimg {
    max-width: 23vw;
    margin: 0 auto 1em;
  }
  .hsm_linepr{
    display: block;
    padding: 1.5em;
  }
  .hsm_linepr dl {max-width: none;}
  .hsm_linepr dt {
    font-size: 0.9em;
    margin-bottom: 1em;
  }
  footer {
    padding-bottom: calc(-10.5vw + 120px);
}
  
}