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


/*************************************************************************************************************************
* デフォルト：640px以下用の記述
*************************************************************************************************************************/
.brandnew{ width: 100%; overflow-x: hidden;}

/* index
**********************************************************************/
.infoList{ padding: 0 0 1.29rem; border-bottom: #dcdcdc 1px dotted;}
.infoList dt{ margin: 1.29rem 0 0; padding: 1.29rem 0 0; color: #8a8a8a; border-top: #dcdcdc 1px dotted;}
.infoList dt:first-of-type{ margin: 0;}
.infoList dd{ margin: 0;}
.infoList dd a{ color: #333; text-decoration: underline;}

aside{ margin: 2.86rem 0 0;}
aside ul li{ border-bottom: #dfdfdf 1px solid;}
aside ul li a{ display: block; background: url("/common/img/arrow04.png") no-repeat 0.43rem 1.21rem; background-size: 0.36rem auto; color:#333; padding: 0.71rem 0.71rem 0.57rem 1.6rem;}
aside ul li.on a{ font-weight: bold; color: #e33a00;}

.txtBox{ margin: 0 0 2.14rem;}
.txtBox a{ color: #333; text-decoration: underline;}

.attentionBox{ border: #e33a00 2px solid; padding: 20px; margin: 20px 0 0; }
.attentionBox dl dt{ color: #e33a00; }
.attentionBox .gray{ background: #fff7f4!important;}

/* detail
**********************************************************************/
.brandnew .detailBox div > section{ padding: 3.5rem 0 0;}

#meinContent p span{ font-weight: bold; color: #e70020;}
#meinContent h3{ background: #f44663; width: 100%; padding: 1.29rem 0 1rem; margin: 2.43rem 0 0; position: relative; font-size: 1.57rem; font-weight: normal; line-height: 1.5; color: #fff; text-align: center;}
#meinContent h3 span{ display: block; margin: 0 0 0.43rem; font-size: 1.21rem;}
#meinContent h3 img{ display: none;}
#meinContent div{ background: #f3f3f3; padding: 0 0.71rem 1.71rem;}
#meinContent div ul li{ padding: 1.43rem 0 2.14rem 0; border-top: #cacaca 1px solid;}
#meinContent div ul li:first-child{ border-top: none;}
#meinContent div ul li dl dt{ margin: 0 0 0.71rem; font-size: 1.71rem;}
#meinContent div ul li img{ display: block;max-width: 125px; margin: 1.43rem auto 0; }
#meinContent div > p{ font-size: 1.14rem; font-weight: bold; color: #fc4000; text-align: center;}

#schedule .tableBox thead tr th{ font-size: 1.14rem;}
#schedule .tableBox tbody tr th{ text-align: center;}
#schedule .tableBox .time{ width: 28.44%; }
#schedule .tableBox .orange{ width: 40%;}
#schedule .tableBox .situation{ width: 16.22%!important;}
#schedule .tableBox .completion th,
#schedule .tableBox .completion td{ background: #e7e7e7!important; color: #666;}
#schedule dl{ margin: 2.14rem 0 0;}
#schedule dl dt{ padding: 0 0 0.57rem; font-size: 1.07rem; font-weight: bold; border-bottom: #d6d6d6 1px solid;}
#schedule dl dd{ margin: 1rem 0 0;}
#schedule dl dd a{ background: url("/common/img/arrow01.png") no-repeat left 0.14rem; background-size: 0.36rem auto; padding: 0 0 0 1.1rem; color: #333;}

#change .tableBox thead tr th{ background: #1d1d1d; padding: 0.86rem 0 0.71rem; font-size: 1.14rem; font-weight: normal; color: #fff; border-left: #505050 1px solid;}
#change .tableBox thead tr .renewal{ background: #f44663;}
#change .tableBox tbody tr a{ color: #333; text-decoration: underline;}
#change .tableBox tbody tr th,
#change .tableBox tbody tr td{ min-height: 3.36rem; padding: 0.86rem 0.86rem 0.71rem; font-size: 0.93rem; letter-spacing: 0;}
#change .tableBox tbody tr th{ width: 24%;}
#change .tableBox tr td{ width: 38%; border-left: #d6d6d6 1px solid;}

#infoFaq .menu dt{ padding: 0.71rem 0.71rem 0.57rem; font-size: 1.14rem; color: #fff;}
#infoFaq .menu dd{ padding: 1.14rem 0.71rem 1.43rem; }
#infoFaq .menu dd ul li{ margin: 0.29rem 0 0; position: relative;}
#infoFaq .menu dd a{ display: block; margin: 0.43rem 0 0 2.29rem; color: #333; text-decoration: underline;}
#infoFaq .menu dd span{ display: block; position: absolute; top: 0; left: 0; }
#infoFaq .menu dd a:hover{ text-decoration: none;}

#infoFaq .menu dt.before{ background: #1d1d1d;}
#infoFaq .menu dt.after{ background: #f44663; margin: 2.14rem 0 0;}
#infoFaq .menu dd.before{ border: #1d1d1d 1px solid;}
#infoFaq .menu dd.after{ border: #f44663 1px solid;}
#infoFaq h4{ margin: 3.57rem 0 0; padding: 0 0 0.86rem; font-size: 1.14rem; font-weight: bold; line-height: 1.5; border-bottom: #d6d6d6 1px solid;}

#infoFaq .openFaq li { padding-top: 50px; margin-top: -50px; border-top: none;}
#infoFaq .openFaq li:not(:first-child) .question{ border-top: #dcdcdc 1px dotted; }
#infoFaq .openFaq li .answer{ padding: 0 0 1.71rem;}
#infoFaq .openFaq li .answer > div > span{background: #f44663;}
#infoFaq .openFaq li .answer div p span{ font-weight: bold;}

#infoFaq .openFaq .attention{ font-size: 1rem;}
#infoFaq .openFaq .gray{ background: #f5f5f5; margin: 0.71rem 0 0; padding: 20px 14px; line-height: 1.9;}
#infoFaq .openFaq .link{ margin: 30px 0 0;}
#infoFaq .openFaq .link dt{ padding: 0 0 0 1rem; position: relative;}
#infoFaq .openFaq .link dt:before{ content: "■"; display: block; position: absolute; top: 0;left: 0;}
#infoFaq .openFaq .link dd a{ padding: 0; position: static;}

#infoFaq .openFaq .list dt{ margin: 1.71rem 0 0; font-weight: bold;}
#infoFaq .openFaq .list dt:first-of-type{ margin: 0;}
#infoFaq .openFaq .list dt span{ display: inline-block; margin: 0 0.43rem 0 0;}
#infoFaq .openFaq .list .attention{ margin: 0.71rem 0 0; font-size: 0.93rem;}

#infoFaq .openFaq .txt dt{ font-weight: bold; }
#infoFaq .openFaq .txt dd{ margin: 1rem 0 0;}

#q09 .list{ margin: 2.14rem 0 0;}
#q10 .gray li{ font-weight: bold;}
#q10 .gray li span{ display: inline-block; width: 8.57rem;}
#q11 .gray li,
#q11 .gray p{ font-weight: bold;}
#q11 .centerTxt{ margin: 1.43rem 0;}

.bottomTxt{ margin: 1rem 0 0;}
.read{ margin: 2.14rem 0; font-size: 1.29rem; color: #e33a00; text-align: center;}

@media print, screen and (max-width:450px){
  #schedule .tableBox thead tr th,
  #change .tableBox thead tr th{ font-size: 14px;}
}

@media print, screen and (min-width:500px){
  #meinContent h3 img{ display: block; width: 70px; position: absolute; top: 0; left: 20px;}
}

/*************************************************************************************************************************
641px以上用の記述
*************************************************************************************************************************/
@media print, screen and (min-width:641px){
  aside ul li a{ background: url("/common/img/arrow04.png") no-repeat 0.43rem 1.24rem; background-size: 0.36rem auto;}
  
  /* detail
  **********************************************************************/
  #meinContent h3{ letter-spacing: 0;}
  #meinContent div{ padding: 6px 40px 24px;}
  #meinContent div ul li{ overflow: hidden;}
  #meinContent div ul li dl{ width: 71.95%; margin: 0 8.05% 0 0; float: left;}
  #meinContent div ul li dl dt{ margin: 0 0 18px; font-size: 28px; line-height: 1.4;}
  #meinContent div ul li img{ width: 20%; max-width: 129px; margin: 10px 0 0; float: left;}
}

@media print, screen and (min-width:700px){
  #meinContent h3{ letter-spacing: 1px;}
}

/*************************************************************************************************************************
* 960px以上用の記述
*************************************************************************************************************************/
@media print, screen and (min-width:960px){
  /* index
**********************************************************************/
  .detailBox{ position: relative;}
  .detailTit{ padding: 0.34rem 0 0.6rem 1.57rem; margin: 0 0 40px; font-size: 24px; letter-spacing: 0; }
  
  .infoList{ padding: 0; overflow: hidden; }
  .infoList dt{ width: 17.78%; margin:0; padding: 24px 0 24px 18px; float: left;}
  .infoList dd{ width: 82.22%; padding: 24px 0; float: left; border-top: #dcdcdc 1px dotted;}
  .infoList dd a:hover{ text-decoration: none;}
  aside{ margin: 0;}
  aside ul li a{ -webkit-transition: background 0.3s ease-in-out 0s; transition: background 0.3s ease-in-out 0s;}
  aside ul li a:hover{ background: url("/common/img/arrow04.png") no-repeat 0.43rem 1.25rem,#DFDFDF; background-size: 0.36rem auto;; }
  
  /* detail
  **********************************************************************/
  .brandnew .detailBox div > section{ padding: 80px 0 0;}

  #meinContent h3{ font-size: 26px;}
  #meinContent div ul li{ padding: 20px 26px 30px 0; }
  #meinContent div ul li dl{ width: 73.76%; margin: 0 9% 0 0; }
  #meinContent div ul li img{ width: 17.24%;}

  #schedule dl{ margin: 54px 0 0;}
  #schedule dl dt{ font-size: 16px; }
  #schedule dl dd{ margin: 20px 0 0;}
  #schedule dl dd a:hover{ text-decoration: underline;}
  #change .tableBox tbody tr a:hover{ text-decoration: none;}
  
  #infoFaq .menu dt{ padding: 17px 22px 16px; font-size: 18px; }
  #infoFaq .menu dd{ padding: 16px 20px 20px;}
  #infoFaq .menu dd ul li{ margin: 8px 0 0;}
  #infoFaq .menu dd a:hover{ text-decoration: none;}
  #infoFaq h4{ margin: 50px 0 0; padding: 0 0 12px; font-size: 16px; font-weight: bold; line-height: 1.5; border-bottom: #d6d6d6 1px solid;}
  #infoFaq .openFaq li .question{ padding: 22px 10px 24px 50px; font-size: 16px;}
  #infoFaq .openFaq li .question:hover{ background: none;}
  #infoFaq .openFaq .link dd a:hover{ text-decoration: underline;}
  .read{ margin: 70px 0 46px; font-size: 20px; }
  .read br.sptb{ display: block;}
  
  .txtBox{ margin: 0 0 46px;}
  .txtBox p a:hover,
  .txtBox a:hover{ text-decoration: none;}
}
@media print, screen and (min-width:1060px){
  .detailTit{ letter-spacing: 2px; }
}
@media print, screen and (min-width:1200px){
  .read br.sptb{ display: none;}
}