@charset "utf-8";

.sp,
.sp_320px,
.sp_inline,
#SiteSpHeaderMountPoint{
  display: none;
}
.pc{
  display: block;
}
.cpm__main {
  line-height: 1.5;
}
.cpm__main .main_image {
  height: 320px;
  margin: 0 auto 10px auto;
}
.cpm__main .cpm__sec {
  margin: 0px auto;
}
#container img{
  width: 100%;
  vertical-align: top;
}
#promo_end_txt{
  display: none;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  margin: 30px 0;
  color: #CA1738;
}
#top_nav_wrapper{
  display: flex;
  justify-content: flex-end;
  line-height: 1;
  margin-bottom: 20px;
}
#top_nav{
  display: flex;
  justify-content: space-between;
  width: 340px;
}
#top_nav li{
  font-size: 12px;
  text-align: right;
  background-image: url(/jalan/doc/top/top_image/tri_sk.gif);
  background-repeat: no-repeat;
}
#top_nav li:first-child{
  width: 188px;
}
#top_nav li:last-child{
  width: 130px;
}
/*
#promo_period_img_wrapper{
  width: 374px;
  margin: 0 auto;
}
*/
#promo_period_img_p{
  width: 290px;
  margin: 0 auto;
  margin-bottom: 10px;
}
#promo_period{
  position: relative;
}
#promo_period::before{
  display: block;
  content: "";
  width: 100%;
  padding-top: 3.684%;
}
#promo_period_inner{
  text-align: center;
  font-size: 30px;
  font-weight: bold;
  line-height: 1;
  height: 35px;
  letter-spacing: 0.03em;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: baseline;
  opacity: 0;
}
#promo_period_inner.fadeIn{
  animation: fadeIn 0.7s cubic-bezier(0.33, 1, 0.68, 1) 1 forwards;
}
@keyframes fadeIn {
  0% {opacity: 0;}
  100% {opacity: 1;}
}
.promo_period_fs1{
  font-size: 44px;
}
.promo_period_fs2{
  font-size: 27px;
}
.promo_period_fs3{
  font-size: 20px;
  margin-right: 2px;
}
/*
#promo_period_img_wrapper.coming_soon{
  width: 600px;
  height: 94px;
}
#promo_period_img_wrapper.closed{
  width: 374px;
  height: 39px;
}
*/
#promo_period_txt_wrapper{
  width: 640px;
  margin: 30px auto;
  background-color: #F7F5F2;
  margin-bottom: 85px;
}
#promo_period_txt_wrapper dl{
  display: flex;
  flex-wrap: wrap;
  padding: 20px 35px;
  font-size: 14px;
}
#promo_period_txt_wrapper dl dt{
  width: 98px;
  font-weight: bold;
}
#promo_period_txt_wrapper dl dd{
  width: 472px;
}
h3{
  width: 600px;
  margin: 0 auto;
}
#coupon_yad{
  border: solid 1px #E78A13;
  position: relative;
  padding-top: 55px;
}
#coupon_yad h3,
#coupon_renta h3{
  position: absolute;
  left: 0;
  right: 0;
  top: -25px;
  margin: auto;
}
#coupon_yad_list{
  display: flex;
  justify-content: space-between;
  padding: 0 30px;
}
#coupon_yad_list li{
  width: 280px;
  position: relative;
}
#coupon_yad_list li .txt_overlay,
#coupon_renta_list li .txt_overlay{
  display: none;
}
#coupon_yad_list.coming_soon li .coupon_layer,
#coupon_yad_list.closed li .coupon_layer,
#coupon_renta_list.coming_soon li .coupon_layer,
#coupon_renta_list.closed li .coupon_layer{
  pointer-events: none;
}
#coupon_yad_list.coming_soon li .coupon_layer:after,
#coupon_yad_list.closed li .coupon_layer:after,
#coupon_renta_list.coming_soon li .coupon_layer:after,
#coupon_renta_list.closed li .coupon_layer:after{
  pointer-events: none;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  box-sizing: border-box;
  content: "";
  background: rgb(128,128,128,0.6);
  filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#99ffffff, EndColorStr=#99ffffff);
  zoom: 1;
  filter: none\9;
  -ms-filter: none\9;
}
#coupon_yad_list.closed li .coupon_layer:after,
#coupon_renta_list.closed li .coupon_layer:after{
  background: rgba(128, 128, 128, 0.8);
}
@media screen\0 {
  #coupon_yad_list.coming_soon li .coupon_layer:after,
  #coupon_yad_list.closed li .coupon_layer:after,
  #coupon_renta_list.coming_soon li .coupon_layer:after,
  #coupon_renta_list.closed li .coupon_layer:after{
    filter: brightness(0.7);
    pointer-events: none;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    box-sizing: border-box;
    content: "";
    background: rgba(128, 128, 128, 0.6);
    filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#99ffffff, EndColorStr=#99ffffff);
    zoom: 1;
    filter: none\9;
    -ms-filter: none\9;
  }
  #coupon_yad_list.closed li .coupon_layer:after,
  #coupon_renta_list.closed li .coupon_layer:after{
    background: rgba(128, 128, 128, 0.8);
  }
}
#coupon_yad_list.coming_soon li .txt_overlay,
#coupon_yad_list.closed li .txt_overlay,
#coupon_renta_list.coming_soon li .txt_overlay,
#coupon_renta_list.closed li .txt_overlay{
  display: block;
  position: absolute;
  margin: auto;
  color: #fff;
  font-weight: bold;
  font-size: 38px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  line-height: 1.3;
  text-align: center;
  width: 100%;
}
#coupon_yad_list.closed li .txt_overlay,
#coupon_renta_list.closed li .txt_overlay{
  font-size: 24px;
}
#coupon_yad_list li img{
  vertical-align: top;
}
.notes_list{
  width: 420px;
  margin: 20px auto;
  font-size: 14px;
}
.toggle_button{
  text-align: center;
  font-size: 14px;
  position: relative;
  margin-bottom: 30px;
}
.toggle_button p{
  display: inline-block;
  cursor: pointer;
  color: #1558ce;
  transition: all .3s ease-out;
  font-weight: bold;
}
.toggle_button p:hover {
  color: #ff7d00;
}
.arrow_wrapper{
  display: inline-block;
  position: relative;
  width: 8px;
  height: 8px;
  margin-left: 5px;
}
.arrow{
  border-top: 2px solid #999;
  border-right: 2px solid #999;
  border-top: 2px solid #999;
  border-right: 2px solid #999;
  width: 8px;
  height: 8px;
  display: block;
  transform: rotate(135deg);
  position: absolute;
  top: -3px;
}
.toggle_button.open .arrow{
  transform: rotate(-45deg);
  top: 1.5px;
}

.toggle_cont{
  display: none;
  padding: 0 30px;
}
.coupon_how{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: 40px;
}
.coupon_how li{
  width: 280px;
  background-color: #FAF9F7;
  padding: 35px 10px 10px 10px;
  margin-bottom: 40px;
  position: relative;
}
#coupon_yad .coupon_how li:last-child{
  margin-bottom: 20px;
}
#coupon_renta .coupon_how li{
  margin-bottom: 30px;
}
.coupon_how li h5{
  text-align: center;
  font-size: 18px;
  color: #E77611;
}
.coupon_how_txt{
  font-size: 14px;
  margin-bottom: 10px;
}
.ico_coupon{
  width: 40px;
  position: absolute;
  top: -20px;
  left: 0;
  right: 0;
  margin: auto;
}
#notes_coupon_how{
  padding-left: 1em;
  text-indent: -1em;
  font-size: 14px;
  margin-bottom: 30px;
  color: #CA1738;
}
#coupon_renta {
  border: solid 1px #E78A13;
  position: relative;
  margin-top: 85px;
  padding-top: 55px;
}
#coupon_renta_list{
  width: 500px;
  margin: 0 auto;
}
#coupon_renta_list li{
  position: relative;
}
#bn_special{
  width: 600px;
  margin: 80px auto;
  margin-bottom: 40px;
}
#csp_pc_specialweek{
  width: 600px;
  margin: 0 auto;
  margin-bottom: 40px;
}
#csp_pc_dpoint{
  width: 600px;
  margin: 0 auto;
  margin-bottom: 95px;
}
#promo_period_txt_wrapper,
#coupon_yad,
#coupon_renta,
.coupon_how li{
  border-radius: 8px;
}
#bn_special:hover{
  opacity: 0.6;
}

@media only screen and (min-width : 769px){
  #coupon_yad_list:not(.coming_soon):not(.closed) li:hover,
  #coupon_renta_list:not(.coming_soon):not(.closed) li:hover{
    opacity: 0.6;
  }
}


/*SP*/
@media only screen and (max-width : 768px){
  .pageTopLink a, #ft_ul, .sp_pankuzu, #tarm_cam, .socialIcon h3, #info #page_info h1 {
    font-family: -apple-system,BlinkMacSystemFont,sans-serif;
  }
  .sp,
  #SiteSpHeaderMountPoint{
    display: block;
  }
  .sp_inline{
    display: inline;
  }
  .pc,
  .pc_inline,
  #siteHeaderMountPoint{
    display: none;
  }
  h3 {
    width: auto;
  }
  #header_area #header990 .cf {
    display: block!important;
    border-bottom: 1px solid #d2d2d2;
    padding: 5px 5px 1px 10px;
    position: relative;
  }
  .cS {
    background-image: url(/assets/img/common/sitetitle.png);
    background-repeat: no-repeat;
  }
  .logoL {
    background-position: 0 0;
    display: block;
    width: 90px;
    height: 35px;
    text-indent: -9999px;
    background-size: 214px auto;
  }
  .fl {
    float: left !important;
  }
  .cf:after {
    content: "" !important;
    display: block !important;
    clear: both !important;
    height: 0 !important;
    visibility: hidden !important;
  }
  .header_icon_help {
    overflow: hidden;
    background: url(/assets/img/pages/smart/2x/btn_helpinfo_l.png) no-repeat 0 0;
    background-size: 40px 34px;
    -webkit-background-size: 40px 34px;
    text-indent: 100%;
    white-space: nowrap;
  }
  .headerIcons{
    display:block!important;
  }
  .head-set{
    width: 100%;
  }
  #pankuzu{width: 94%; margin: 0 auto;}
  #welcometop, .catch {display: none;}

  #header990,
  #pankuzu,
  #wrap,
  #info,
  #container{
    width: 100%;
  }
  .cpm__main {
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    clear: both;
    font-size: 16px;
    text-align: left;
    padding: 0;
    margin: 0 auto;
    line-height: 1.5;
    font-weight: normal;
  }
  .cpm__main h1 {
    color: #303030;
    font-size: 8px;
    font-weight: 100;
    margin: 0 auto;
    text-align: right;
    padding:  5px 10px 0;
    border-left: none!important;
  }
  .content.cpm__main img{
    width: 100%;
    vertical-align: top;
  }
  #promo_end_txt{
    margin: 6.65% 0;
    margin-bottom: 5.3%;
  }

  /* MAIN IMAGE */
  .cpm__main h2.main_image {
    width: 100%;
    height: auto;
    margin: 0 0 3.2% 0;
    padding: 0;
  }
  .cpm__main h2 img {
    width: 100%;
    margin: 0;
    padding: 0;
  }
  .cpm__main .cpm__sec {
    width: 95.73%;
    margin: 0 auto;
    font-size: 14px;
    line-height: 1.5;
  }
  #top_nav_wrapper{
    padding: 0 2.66%;
    text-align: right;
    display: flex;
    justify-content: flex-end;
    margin-bottom: 4.27%;
    line-height: 1.5;
  }
  #top_nav li img{
    width: 9px;
  }
  #top_nav li{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    background-image: none;
  }
  #top_nav li:first-child,
  #top_nav li:last-child{
    width: auto;
  }
  #top_nav li:first-child {
    margin-bottom: 2.12%;
  }
  #top_nav {
    display: initial;
    justify-content: initial;
    width: auto;
  }
  #promo_period_img_wrapper,
  #promo_period_img_wrapper.coming_soon,
  #promo_period_img_wrapper.closed{
    width: 100%;
    margin: 0 auto;
    margin-bottom: 3.35%;
    height: auto;

    position: relative;
  }

  #promo_period_img_p {
    width: 68.5%;
  }
  #promo_period::before {
    padding-top: 8%;
  }
  #promo_period_inner {
    font-size: 5vw;
    height: auto;
    letter-spacing: 0;
  }
  .promo_period_fs1 {
    font-size: 8vw;
  }
  .promo_period_fs2 {
    font-size: inherit;
  }
  .promo_period_fs3 {
    font-size: 3vw;
    margin-right: 0;
  }

  #promo_period_txt_wrapper{
    padding: 3.35%;
    background-color: #F7F5F2;
    width: 100%;
    margin: 0;
  }
  #promo_period_txt_wrapper dl {
    display: block;
    flex-wrap: initial;
    padding: 0;
  }
  #promo_period_txt_wrapper dl dt{
    font-weight: bold;
  }
  #promo_period_txt_wrapper dl dt,
  #promo_period_txt_wrapper dl dd {
    width: auto;
  }
  #promo_period_txt_wrapper dl dd {
    margin-bottom: 1.2%;
  }
  #promo_period_txt_wrapper dl dd:last-child {
    margin-bottom: 0;
  }
  #coupon_yad{
    border: solid 1px #E78A13;
    position: relative;
    margin-top: 11.2%;
    padding-top: 0;
  }
  #coupon_yad h3,
  #coupon_renta h3{
    position: absolute;
    left: 0;
    right: 0;
    top: -4.89vw;
    margin: auto;
    width: 97.2%;
  }
  #coupon_yad_list{
    padding: 0 3.36%;
    padding-top: 9.52%;
    width: 100%;
    display: block;
    justify-content: initial;
    margin: 0;
  }
  #coupon_yad_list li{
    margin-bottom: 3.61%;
    width: 100%;
  }
  #coupon_yad_list.coming_soon li .txt_overlay,
  #coupon_renta_list.coming_soon li .txt_overlay{
    font-size: 42px;
  }
  #coupon_yad_list.closed li .txt_overlay,
  #coupon_renta_list.closed li .txt_overlay {
    font-size: 28px;
  }
  .notes_list{
    padding: 0 3.36%;
    margin: 0;
    margin-bottom: 4.48%;
    width: 100%;
  }
  .notes_list li{
    padding-left: 1em;
    text-indent: -1em;
    font-size: 14px;
  }
  .toggle_button{
    text-align: center;
    margin-bottom: 4.48%;
  }
  .toggle_button p{
    display: inline-block;
    font-weight: bold;
    line-height: 1.5;
  }
  .toggle_cont{
    padding: 0 3.36%;
    width: 100%;
    margin: 0;
  }
  #coupon_yad .coupon_how li,
  #coupon_renta .coupon_how li{
    padding: 4.81%;
    background-color: #FAF9F7;
    margin-bottom: 3.61%;
    width: 100%;
  }
  #coupon_yad .coupon_how li:last-child{
    margin-bottom: 3.61%;
  }
  #coupon_renta .coupon_how li:last-child{
    margin-bottom: 4.81%;
  }
  .ico_coupon{
    width: 11.5%;
    margin: 0;
    margin-right: 2.66%;
    position: relative;
    top: 0;
  }
  .coupon_how{
    margin-top: 4.81%;
  }
  .coupon_how li h5 {
    text-align: left;
  }
  .coupon_how li .row1_wrapper{
    display: flex;
    align-items: center;
  }
  .coupon_how li .row1_wrapper{
    font-size: 16px;
    color: #E78A13;
  }
  .coupon_how_txt{
    margin: 2.66% 0 3.99% 0;
    font-size: 14px;
  }
  #notes_coupon_how{
    padding-left: 1em;
    text-indent: -1em;
    margin-bottom: 4.81%;
    font-size: 14px;
  }
  #coupon_renta{
    border: solid 1px #E78A13;
    position: relative;
    margin-top: 11.2%;
    padding-top: 0;
  }
  #coupon_renta_list {
    padding: 0 3.36%;
    padding-top: 9.52%;
    width: 100%;
  }
  #coupon_renta_list li {
    margin-bottom: 3.61%;
  }
  .cpm__main .cpm__sec#bn_special{
    margin-top: 10.7%;
    margin-bottom: 12%;
  }
  .pageTopLink a {
    padding: 0 10px 10px 10px;
  }
  #bn_special,
  #csp_pc_specialweek,
  #csp_pc_dpoint{
    width: 95.73%;
    margin: 10.67% auto;
  }


  /* ----- common setting ----- */
  .cpm__main{
    color: #3b1800;
  }
  .cpm__main a{
      opacity: 1;
      transition: all .3s ease-out;
      font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    }
  .cpm__main a:hover{
      opacity: 0.6;
    }
  .cpm__main a:link {
    color: #1558ce;
    text-decoration: none  !important;
  }
  .cpm__main a:visited {
    color: #7607F1;
    text-decoration: none  !important;
  }
  .cpm__main a:hover {
    color: #e78a13;
    text-decoration: none  !important;
  }

  /* PAGETOP */
  .to_pagetop {
    width: 100% !important;
    margin: 0 auto 30px;
    font-size: 12px;
    text-align: right;
  }
  .to_pagetop_a {
    text-align: left;
    padding-left: 12px;
    padding-right: 20px;
    background: url(/jalan/doc/theme/common/images/totop_icon003.gif) no-repeat left top;
  }
  .pageTopLink{
    width: 100%;
    margin: 0 auto;
    border-bottom: none;
  }
  .pageTopLink a{
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: normal;
  }

  /* ----- Footer ----- */
  #footerLinks {
    border-top: 1px solid #ccc;
    border-left: 1px solid #ccc;
    margin: 10px;
    font-size: 12px;
    font-weight: bold;
    padding: 0;
  }
  #footerLinks li {
    list-style: none;
  }
  #footerLinks li.line {
    display: block;
    padding: 8px 10px;
    border-bottom: 1px solid #ccc;
    border-right: 1px solid #ccc;
  }
  #footerLinks a {
    text-decoration: none;
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  }
  #footerLinks a.line {
    display: block;
    padding: 8px 10px;
    border-bottom: 1px solid #ccc;
    border-right: 1px solid #ccc;
  }

  /* ---------------

  -----------------*/
  #footerLinks a {color: #444!important;}
  .content {background-color: #FFF;}
  #pankuzu {display: none;}
  .sp_pankuzu{
    width: 94%;
    margin: 5px auto 25px auto;
    overflow: hidden;
  }
  .sp_pankuzu li{
    float: left;
    font-size: 10px;
    padding-left: 5px;
    margin-top: 0;
    list-style-type: none;
    line-height: 1.5em;
  }
  #tarm_cam {
    color: #303030;
    padding-bottom: 5px;
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  }
  .footer,.breadList li,.breadList li a{font-family: -apple-system, BlinkMacSystemFont, sans-serif;}
  .to_pagetop a:link {
    color: #1558ce!important;
  }
  .to_pagetop a:visited {
    color: #7607F1!important;
  }
  .to_pagetop a:hover {
    color: #e78a13!important;
  }
  .socialIcon{
    border-top: none!important;
    margin: 0 0 10px 0;
  }
  .socialIcon h3{
    text-align: center;
    font-weight: bold;
    color: #3b1800;
    margin: 15px 0 0 0;
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: normal;
  }
  .socialIcon li{
    margin-right: 15px!important;
  }
  .socialIcon li:last-child{
    margin-right: 0px!important;
  }
  .bdFooter{
    border-top: none!important;
  }
  a {color:#1558ce!important;}

  #wrap #info #page_info h1 {
    color: #303030;
    font-size: 8px;
    font-weight: 100;
    margin: 0 auto;
    text-align: right;
    padding: 5px 10px 0;
    border-left: none!important;
  }
  #tarm_cam {
    font-size: 10px;
    text-align: right;
    margin-bottom: 0;
    color: #303030;
    padding: 3px 10px 0;
  }

  #promo_period_txt_wrapper,
  #coupon_yad,
  #coupon_renta,
  .coupon_how li{
    border-radius: 4px;
  }
}

@media only screen and (max-width : 320px){
  .sp_320px {
    display: block;
  }
}