@charset "utf-8";
/* CSS Document */
img{max-width: 100%;}

.pad_body{background: url("../img/ph_bg.jpg") center top no-repeat;}

.pad_wrap{
  max-width: 1100px;
  margin: auto;
}
.pad_body>.pad_wrap{
  padding:0px 0 56px;
  /*padding: 184px 0 56px;
  background: url("../img/il_assembly_202410.jpg") center top / 100% 500px no-repeat;*/
}

.pad_bottom .pad_wrap > p{
  text-align:center;
  padding:1em 0;
  background-color:#FFF;
}

h1{
  margin-bottom: 24px;
  text-align: center;
}
.pad_oa{
  margin-bottom: 40px;
  text-align: center;
}

.pad_whtabt{
  line-height: 1.5;
  margin-bottom:16px;
  text-align: center;
  font-weight: bold;
  font-size: 2.5rem;
  color: #3B3B3B;
}
.pad_whtabt span{background: linear-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,0) 65%, #FFCB0E 65%, #FFCB0E 95%, rgba(255,255,255,0) 95%, rgba(255,255,255,0) 100%);}

.pad_ytb{
  margin-bottom: 64px;
  text-align: center;
}

.pad_ytb div{
  position: relative;
  margin-bottom:24px;
}

.pad_ytb h3{
  font-size: 2rem;
  font-weight: bold;
  color: #D26E3A;
  margin-bottom:1em;
}

.pad_ytb a{
  display: inline-block;
  height: 360px;
  overflow: hidden;
}
.pad_ytb img{margin-top: -60px;}
.pad_play{
  position: absolute;
  left: calc(50% - 40px);
  top: calc(50% + 24px);
  pointer-events: none;
}
.pad_ytb p{font-size: 1.25rem;margin-top:8px;}

.pad_ytbflex{
  display:flex;
  justify-content:space-around;
}

.pad_ytbflex div{
  width:50%;
  padding:0 24px;
  position:relative;
  margin: auto;
}

.pad_ytbflex .pad_play{
  position: absolute;
  inset: 0;
  pointer-events: none;
  margin: auto;
}

.pad_ytbflex div a img{
  width:100%;
}

.pad_ytbflex div a img:hover{
  opacity: 0.7;
}

.pad_ytbflex div a{
  display:block;
  
}

.pad_personality{
  margin-bottom: 48px;
  padding: 50px 32px;
  border-radius: 40px;
  background-color: #F9F2CB;
}
.pad_personality h3{
  text-align: center;
  font-size: 2.875rem;
  color: #BD660F;
}
.pad_personality div{
  display: flex;
  justify-content: space-between;
  gap:24px;
}


.pad_link{
  margin: 64px 0;
  padding: 50px;
  text-align: center;
  background-color: #F9F2CB;
  border: 2px solid #FFCB0E;
  border-radius: 40px;
}
.pad_link h3{
  margin-bottom: 30px;
  font-size: 2rem;
  font-weight: bold;
  color: #D26E3A;
}
.pad_link .pad_presentbtn{
  display: inline-block;
  width: 600px;
  height: 90px;
  margin-bottom: 30px;
  padding-top: 28px;
  text-decoration: none;
  font-size: 1.875rem;
  font-weight: bold;
  text-align: center;
  color: #FFFFFF;
  text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.77);
  border-radius: 45px;
  background: linear-gradient(#d5737c 0%, #bb0e01 100%);
  border: 3px solid #FFFFFF;
  box-shadow: 0px 6px 0px rgba(0, 0, 0, 0.28);
}
.pad_present p{
  margin-bottom: 40px;
  font-size: 1.25rem;
}
.pad_present img{max-width: 36%;}
.pad_limit{
  line-height: 1.5;
  font-size: 1.5rem;
  font-weight: bold;
}

.pad_presentcaution{
  font-size:0.65rem;
  padding-top:1em;
  line-height:1.375;
}

.pad_presentcaution a{
  color:#000;
}


.pad_bottom{
  padding: 88px 0 96px;
  background: url("../img/il_btmbg.svg") repeat;
  background-color: rgba(151,228,238,0.8);
  background-blend-mode: soft-light;
}
.pad_bottom h2{text-align: center;}
.pad_bottom h2 img{width: 342px;}
.pad_bottom dl{
  display: flex;
  flex-wrap: wrap;
  line-height: 2;
  margin-top: -64px;
  padding: 80px 260px 40px;
  font-size: 1.875rem;
  font-weight: bold;
  color: #3B3B3B;
  //background: url("../img/il_michel.png") right 72px top 52px / 196px 196px no-repeat;
  background-color: #FFFFFF;
}
.pad_bottom dt{width: 310px;}
.pad_bottom dd{width: calc(100% - 310px);}

.pad_explanbox{
  padding:48px 0 24px;
}
.pad_explanbox h2{
  background-color: #992f3b;
  color: #FFF;
  font-weight: bold;
  font-size: 1.75em;
  padding: 0.5em;
}

.pad_explanbox ul{
  display:flex;
  justify-content:center;
  padding:16px 0;
  gap:0 16px;
}

.pad_explanbox ul li{
  width:46%;
}

.pad_explanbox > p{
  font-size:1.25em;
  text-align:center;
  line-height:1.375;
}

.pad_excuse{
  font-size:0.875rem;
  text-align:right;
}



#tss_gototop img{width: 80px;}
.tss_footer{background-color: #0B3151 !important;}


@media screen and (min-width:769px){
  .pad_link a:hover{opacity: 0.7;}
  .pad_ytb a:hover{opacity: 0.7;}
  .pad_ytb a:hover+img{opacity: 0.7;}
}



@media screen and (max-width:800px){
  .pad_body{background-size: auto 280px;}
  .pad_body>.pad_wrap{
    /*padding: 184px 16px 56px;*/
    padding:0 16px 56px;
    background-size: auto 280px;
  }
  .pad_wrap{padding: 0 16px;}


  .pad_whtabt{font-size: 1.375rem;}
  .pad_ytbflex div{width: 80%;}
  .pad_ytb{
    width: 343px;
    margin: 0 auto 64px;
  }
  .pad_ytb h3{font-size:1.375rem;margin-top:2em;}
  .pad_ytb a{height: 177px;}
  .pad_ytb img{margin-top: -43px;}
  .pad_play{top: calc(50% - 16px);}
  .pad_ytb p{font-size: 1rem;}


  .pad_personality h3{font-size: 1.25rem;}
  .pad_personality{
    padding: 40px 12px;
    margin-bottom: 20px;
  }
  .pad_personality div{
    flex-wrap: wrap;
    gap:16px 0;
    justify-content: center;
  }
  .pad_personality div p{
    width: 50%;
    text-align: center;
  }


  .pad_link{padding: 24px;}
  .pad_link h3{
    font-size: 1.25rem;
    margin-bottom: 20px;
  }  
  .pad_present{font-size: 0.875rem;}
  .pad_present p{
    font-size: 0.875rem;
    margin-bottom: 20px;
    line-height:1.3;
  }
  h3 span{
    display:block;
    line-height:1.3;
  }
  .pad_present img{max-width: 72%;}
  .pad_link .pad_presentbtn{
    width: 100%;
    height: 64px;
    padding-top: 20px;
    font-size: 1rem;
  }
  
  .pad_limit{font-size:.875rem;}



  .pad_bottom h2{padding: 0 84px;}
  .pad_bottom h2 img{width: 100%;}
  .pad_bottom dl{
    margin-top: -18px;
    padding:20px 24px 40px;
    font-size: .875rem;
    background-size: 120px 120px;
    background-position: right bottom;
  }
  .pad_bottom dt{width: 50%;}
  .pad_bottom dd{width: 50%;}
  .pad_bottom .pad_wrap > p{
    font-size:0.87rem;
    margin-top:1rem;
  }
  
  .pad_explanbox h2{font-size: 1.375em;}
  .pad_explanbox > p{
    font-size:1em;
    text-align:left;
  }
  .pad_ytbflex{
    flex-direction:column;
    gap:24px;
  }
}

@media screen and (max-width:640px){
  .pad_ytbflex div{width: 100%;}
}




