@charset "utf-8";

/*
 common
======================================================= */
html{
  overflow: auto;
}
body{
  position: relative;
  overflow-x: hidden;
  min-width: 960px;
}
.width960{
  width: 960px;
  margin: 0 auto;
}

/*
kanban
======================================================= */
/*
main_section
======================================================= */
.main_section{
  position: relative;
  padding-top: 74px;
  padding-bottom: 80px;
  color:#333;
}
.main_section._bg01::before{
  content: "";
  background-color: #e8eef9;
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0 500%;
  margin: 0 -500%;
  z-index: -1;
}
/*
title
======================================================= */
/* title01 */
.title01{
  font-size: 36px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 51px;
  color:#333;
}
/* title02 */
.title02{
  margin-bottom: 49px;
}
.title02 .title_ic{
  width: 68px;
  margin: 0 auto 16px;
}
.title02 .h2_ic_area img{
  width: 100%;
}
.title02 h2{
  font-weight: bold;
  text-align: center;
  line-height: 1.3;
  font-size: 36px;
  color:#333;
}
.ttl_note{
  font-size: 18px;
  line-height: 1.45;
  margin: -6px auto 34px;
  text-align:
  center;
}

/*heiyo*/
        .heiyo {
            position: relative; /* 子要素の絶対配置の基準にする */
            width: 100%; /* 必要に応じて調整 */
            height: 400px; /* 親要素の高さを指定（背景画像の高さに合わせるか、調整） */
            overflow: hidden; /* 子要素がはみ出さないように */
        }

        .background-image {
            position: absolute; /* 親要素を基準に配置 */
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover; /* 画像がアスペクト比を保ちつつ、要素全体を覆うように */
            z-index: 0; /* バナーの下に配置 */
        }

        .banner-link {
            position: absolute; /* 親要素（.container）を基準に配置 */
            top: 77%; /* 親要素の垂直方向の中心に配置 */
            left: 50%; /* 親要素の水平方向の中心に配置 */
            transform: translate(-50%, -50%); /* 要素自体の中心を親要素の中心に合わせる */
            z-index: 1; /* 背景画像の上に配置 */
            display: block; /* <a>タグをブロック要素にする */
            /* バナー画像のサイズ調整は、imgタグのスタイルで行うか、
               ここで max-width などで指定することも可能です */
            width: 100%; /* バナーの幅を親要素の90%にする */
            max-width: 900px; /* 必要に応じて最大幅を設定 */
            text-align: center; /* imgが中央揃えになるように */
        }

        .banner-link img {
            width: 100%; /* 親の<a>タグの幅に合わせる */
            height: auto; /* アスペクト比を維持 */
            display: block; /* 余分なスペースを削除 */
        }
        .banner-link:hover {
            opacity: 0.8;
        }
/*
 floating_bnr
----------------------------------------------------- */
.floatingBanner .bannerWrap {
	position: relative;
	width: 100%;
	height: auto;
	margin: 0 auto;
}
.floatingBanner .banner_list {
  display: flex;
  justify-content: space-between;
	width: 100%;
	height: auto;
  padding: 16px 114px;
  background-color: rgba(5,72,143,.3);
  box-sizing: border-box;
}
.floatingBanner .banner_list._col02 .bnrImg_wrap {
	width: calc((100% - 24px)/2 - 0.001px);
}
.floatingBanner .banner_list._col01 .bnrImg_wrap {
	width: 100%;
}
.floatingBanner .banner_list .bnrImg_wrap a{
  display: block;
}
.floatingBanner .banner_list .bnrImg_wrap a:hover{
  opacity: .8;
}
.floatingBanner .banner_list .bnrImg_wrap img {
	width: 100%;
  height: auto;
}
.floatingBanner .closeButton {
	cursor: pointer;
	position: absolute;
	width: 45px;
	height: 45px;
	top: -10px;
	right: 90px;
	background-image: url("https://r.r10s.jp/evt/event/medicine/contactlens/coupon/_cmn/img/20231204/floatingclose_btn.png");
  background-repeat: no-repeat;
  background-size: 100% auto;
  z-index: 1;
}
.floatingBanner .closeButton:hover {
	opacity: .8;
}
.floatingRight {
	width: 122px;
	height: auto;
}
.floatingRight a:hover{
	opacity: .8;
}

#floating_bnr2,
#floating_bnr3{
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 960px;
}


/*
floating
======================================================= */
.floating_area{
  width: 960px;
  margin: 0 auto;
  border-left: 1px solid;
  border-right: 1px solid;
}
.flotaing_list{
  margin: 0;
  padding: 0;
  width: calc(100% / 4);
  border-right: 1px solid #191c6d;
  font-size: 16px;
}
.flotaing_list .ecm-floating-navi{
  height: 52px;
}
.flotaing_list:last-of-type{
  border-right: none;
}
.floating_area .ecm-floating-navi-item.ecm-floating-navi-item-anchor[data-in-viewport=true]{
  background-color: #191c6d;
  color: #fff;
  font-weight: bold;
  border-bottom: none;
}

/*
entry
======================================================= */
.entry .rcEntryButton-button{
  margin-bottom: 32px;
}
.entry .rcEntryButton-button:hover{
  opacity: .8;
}
/* periodWrap01 */
.periodWrap01._bg01{
  background-color: #e8eef9;
  padding-top: 16px;
  padding-bottom: 16px;
  line-height: 1.4;
  margin-bottom: 40px;
}
.periodWrap01{
  display: block;
  color: #333;
  margin-bottom: 68px;
}
.periodWrap01 .periodTxt{
  text-align: center;
  font-size: 18px;
  letter-spacing: -0.1px;
}
.periodWrap01 .periodTxt ._blod{
  font-weight: bold;
  font-size: 18px;
}
.periodWrap01 .campaignLink{
  position: relative;
  width: calc((100% - 8px)/2);
  margin-right: 8px;
  margin-bottom: 0;
  font-size: 14px;
  line-height: 1.1;
  text-align: center;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.periodWrap01 .campaignLink a{
  display: -webkit-flex;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: #0783c2;
  position: relative;
  text-decoration: none;
}
.periodWrap01 .campaignLink::before{
  content: "";
  width: 2px;
  height: 100%;
  background-color: #c6c6c6;
  position: absolute;
  right: 0;
}
.periodWrap01 .campaignLink:last-of-type::before{
  content: none;
}
.periodWrap01 .campaignLink{
  margin-right: 0;
}
.periodWrap01 .campaignLink:hover{
  text-decoration: underline;
}
.periodWrap01 .campaignLink span{
  position: relative;
}
.periodWrap01 .couponNote_Info{
  font-size: 12px;
  padding-bottom: 23px;
  color: #666;
  text-align: center;
  line-height: 1.4;
}
.periodWrap01 .couponNote_Info li{
  padding-left: 1em;
  text-indent: -1em;
}
.periodWrap01 .campaignLinkList{
  padding: 0;
  display: flex;
  justify-content: center;
  width: 404px;
  margin: 0 auto;
}
.bnr_area{
  width: 616px;
  margin: 0 auto 79px;
}
.bnr_area a{
  display: block;
}
.bnr_area a:hover{
  opacity: .8;
}
/*
about
======================================================= */
.about_step_area{
  box-sizing: border-box;
  width: 880px;
  margin: 0 auto 40px;
  display: flex;
  gap: 56px;
}
.about_step_list{
  width: 256px;
  position: relative;
  border: 1px solid #191c6d;
}
.about_step_list::after{
  content: "";
  width: 22px;
  height: 68px;
  background: url(https://r.r10s.jp/evt/event/autogoods/tireservice/campaign/point/_pc/img/20241101/about_ic_arrow.png);
  background-size: 100%;
  position: absolute;
  top: 36%;
  right: -42px;
}
.about_step_list:last-of-type::after{
  content: none;
}
._step_box{
  background-color: #191c6d;
  font-size: 26px;
  font-weight: bold;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: baseline;
  height: 47px;
  padding-top: 5px;
}
._step_text{
  font-size: 20px;
  font-weight: normal;
}
._step_con{
  background-color: #fff;
  display: flex;
  font-size: 18px;
  font-weight: bold;
  justify-content: center;
  align-items: center;
  padding: 21px 12px 18px;
  text-align: center;
  flex-wrap: wrap;
  line-height: 1.35;
}
._step_con_img{
  width: 81px;
}
._step_con_text{
  margin-bottom: 16px;
}

/* button01 */
.button01{
  width: 398px;
  margin: 0 auto;
}
.button01 .buttonLink{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 72px;
  margin: 0 auto;
  border-radius: 36px;
  background: #0b42b4;
  color: #fff;
  font-size: 18px;
  text-align: center;
  line-height: 1;
  box-sizing: border-box;
  font-weight: bold;
}
.button01 a.buttonLink::before{
  content: "";
  display: inline-block;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 26px;
  width: 11px;
  height: 11px;
  margin: auto;
  border-right: 2px solid #fff;
  border-top: 2px solid #fff;
  transform: rotate(45deg);
}
/* button02 */
.button02 .buttonLink{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 262px;
  height: 50px;
  margin: 0 auto;
  border-radius: 25px;
  background: #0b42b4;
  color: #fff;
  font-size: 16px;
  text-align: center;
  line-height: 1;
  box-sizing: border-box;
  font-weight: bold;
}
.button02 .buttonLink::before{
  content: "";
  display: inline-block;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 18px;
  width: 8px;
  height: 8px;
  margin: auto;
  border-right: 2px solid #fff;
  border-top: 2px solid #fff;
  transform: rotate(45deg);
}
/*
pickup
======================================================= */
/*
search_size
======================================================= */
.search_size_box + .search_size_box{
  margin-top: 32px;
}
.search_size_box{
  border: 1px solid #191c6d;
}
.search_size_ttl{
  background-color: #191c6d;
  height: 50px;
  display: flex;
  flex-wrap: wrap;
  color: #fff;
  justify-content: center;
  align-items: center;
  font-size: 24px;
}
.search_size_ic{
  display: inline-block;
  width: 26px;
  margin-right: 10px;
  line-height: 1;
}
.search_size_con ._ttl{
  text-align: center;
  font-weight: bold;
  font-size: 20px;
  margin-bottom: 12px;
  color:#333;

}
.search_size_con{
  padding: 27px 0 35px;
  background-color: #fff;
}
.search_size_con ._con{
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-flow: column;
}
.search_size_con ._con .button02 + .button02{
  margin-top: 10px;
}
.search_size_more{
  border: 1px solid #0b42b4;
  width: 168px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 20px;
  font-size: 13px;
  margin: 24px auto 0;
  color: #0b42b4;
  position: relative;
}
.search_size_box .ecm-icon-plus{
  position: absolute;
  right: 0;
  right: 7px;
}

.search_size_pc{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 35px 40px;
}

/* .search_size_box._02 */
.search_size_box._02{
  border: 1px solid #9A2224;
}
.search_size_box._02 .search_size_ttl{
  background-color: #9A2224;
}
/*
search_tire
======================================================= */
.search .search-box ._inner {
  width: 530px;
  margin: 0 auto;
  }
  .search .search-box ._inner:after{
    display: block;
    content:"";
    clear: both;
  }
  
  .search .search-box .select_btn {
    border: 1px solid #191c6d;
    color: #333;
    border-radius: 5px;
    background: #fff;
    font-size: 100%;
    width: 100%;
    margin-bottom: 16px;
    padding: 14px 0 21px;
    outline: none;
    display: block;
    float: left;
    box-sizing: border-box;
    -webkit-appearance: none;
    position: relative;
  }
  
  .search .search-box .select_btn:after{
      position: absolute;
      top: 45%;
      right: 3.75%;
      width: 9.5px;
      height: 7.5px;
      background: no-repeat url(https://r.r10s.jp/evt/event/autogoods/tireservice/campaign/point/_cmn/img/20241101/arr_down.png);
      background-size: 100%;
      content: '';
  }
  
  .search .search-box .select_btn .label01,
  .search .search-box .select_btn .label02,
  .search .search-box .select_btn .label03{
    color: #333;
    line-height: 1.53;
    position: absolute;
    width: 100%;
    z-index: 1;
    margin-left: 16px;
    font-size: 18px;
  }
  
  .search .search-box .select01,
  .search .search-box .select02,
  .search .search-box .select03 {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    display: block;
    cursor: pointer;
    width: 100%;
    border: none;
     opacity: 0;
    position: relative;
    z-index: 2;
    color:#333;
  }

  .search_tire .sggstInputWrap .rc-searchForm__textInput.select_btn{
    text-indent: 15px;
    font-size: 18px;
    margin-bottom: 32px;
    padding: 17px 0 16px;
  }
  .search_tire .searchSubmit01{
    border: none;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 358px;
    height: 72px;
    margin: 0 auto;
    border-radius: 36px;
    background: #0b42b4;
    color: #fff;
    font-size: 18px;
    text-align: center;
    line-height: 1;
    box-sizing: border-box;
    font-weight: bold;
  }
  .search_tire .searchSubmit01:hover span{
    text-decoration: underline;
  }
  .search_tire .searchSubmit01::before{
    content: "";
    display: inline-block;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 26px;
    width: 10px;
    height: 10px;
    margin: auto;
    border-right: 2px solid #fff;
    border-top: 2px solid #fff;
    transform: rotate(45deg);
  }
/*
search_ticket
======================================================= */
.search_ticket_note{
  font-size: 18px;
  text-align: center;
  margin-top: -3px;
  padding-bottom: 29px;
}
.search_ticket_note span{
  font-weight: bold;
  font-size: 20px;
}
/* search01 */
.search01{
  width: 780px;
  margin: 0 auto;
}
.search01 .search_box{
  border: 1px solid #0b42b4;
  height: 56px;
  border-radius: 4px;
  overflow: hidden;
}
.search01 .search_box_submit{
  width: 55px;
  background-color: #0b42b4;
  border-top-right-radius: 2px;
  border-bottom-right-radius: 2px;
}
.search01 .search_input{
  padding-left: 14px;
  font-size: 18px;
}
.search01 .search_box_ic{
  font-size: 26px;
}
/*
ranking_shop
======================================================= */
.col2-post {
	position: relative;
}
.col2-button {
  margin: 0 auto;
  position: relative;
  width: 358px;
}
.col2-button::after{
  content: "";
  display: inline-block;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 27px;
  width: 10px;
  height: 10px;
  margin: auto;
  border-right: 1px solid #fff;
  border-top: 1px solid #fff;
  transform: rotate(45deg);
}
.col2-post #re-search-zip.input-post {
  width: 90.19%;
  border-radius: 5px;
  border: 1px solid #0b42b4;
  background: #fff;
  text-indent: 12px;
  font-size: 18px;
  color: #0b42b4;
  padding: 16px 0;
  outline: none;
  float: right;
}
.col2-post:after {
  position: absolute;
  top: 15px;
  left: 0;
  width: 34px;
  height: 34px;
  background: no-repeat url(https://r.r10s.jp/evt/event/autogoods/tireservice/campaign/point/_cmn/img/20241101/post_icon.png);
  background-size: 100%;
  content: '';
}
.col2-button input[type="submit"] {
  border: none;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 72px;
  margin: 0 auto;
  border-radius: 36px;
  background: #0b42b4;
  color: #fff;
  font-size: 18px;
  text-align: center;
  line-height: 1;
  box-sizing: border-box;
  font-weight: bold;
}
.col2-button input[type="submit"]:hover{
  text-decoration: underline;
  cursor: pointer;
}
.contents-inner .__inner{
  padding: 0;
  /* background: #eff4fe; */
  margin-bottom: 32px;
}
.contents-inner .__inner:after{
  display: block;
  content:"";
  clear: both;
}
.postal{
  width: 530px;
  margin: 0 auto;
}
/*
ranking_area
======================================================= */
.ranking_area .ecm-slider{
  background: #fff;
  padding: 32px 40px;
  border-radius: 4px;
}
.disclaimer{
  background-color:#f2f2f2;
  margin-top: 10px;
  padding: 16px 16px;
  font-size:13px;
  }
/*
shop_area
======================================================= */
.shoplist_box{
  border: 1px solid #f1f1f1;
  padding: 32px;
}
.shoplist_box a{
  text-decoration: none;
  color: #333;
  font-size: 14px;
}
.shoplist_box a:hover{
  text-decoration: underline;
}


/*
rule
======================================================= */
.rule{
  position: relative;
  padding: 80px 0;
}
.rule::before{
  content: "";
  background-color: #f6f6f6;
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0 500%;
  margin: 0 -500%;
  z-index: -1;
}
/*
other
======================================================= */
.bnr_area01{
  width: 616px;
  margin: 0 auto 48px;
}
.bnr_area01 .bnr_list + .bnr_list{
  margin-top: 10px;
}
.bnr_area02{
  margin-left: 16px;
  display: flex;
  align-items: center;
  overflow-x: scroll;
}
.bnr_area02 .bnr_list{
  min-width: 88px;
}
.bnr_area02 .bnr_list:last-of-type{
  margin-right: 16px;
}
.bnr_area02 .bnr_list + .bnr_list{
  margin-left: 12px;
}

.other a:hover{
  opacity: .8;
}
/* postal */
.postalTtl{
  text-align:center;
  font-size:42px;
  font-weight:bold;
  text-align:center;
  margin-bottom:15px;
}
.warning-text{
  padding:10px 10px 10px 10px;
  margin-bottom:20px;
  color:#bf0000;
  border:1px solid #bf0000;
}
.warning-text span{
  font-size:16px;
  font-weight:bold;
  display:flex;
  align-items:center;
}
.warning-text ul{
  padding:5px 5px 0px 12px;
  list-style-type:disc;
}
.warning-text li{
  list-style-position:inside;
  font-size:14px;
  list-style-type:disc;
}

/*
floatingBnr-----------------------*/

.floatingBanner .bannerWrap {
	position: relative;
	width: 100%;
	height: auto;
	margin: 0 auto;
}
.floatingBanner .banner_list {
  display: flex;
  justify-content: space-between;
	width: 100%;
	height: auto;
  padding: 16px 140px;
  background-color: rgba(5,72,143,.3);
  box-sizing: border-box;
}
.floatingBanner .banner_list._col02 .bnrImg_wrap {
	width: calc((100% - 24px)/2 - 0.001px);
}
.floatingBanner .banner_list._col01 .bnrImg_wrap {
	width: 100%;
}
.floatingBanner .banner_list .bnrImg_wrap a{
  display: block;
}
.floatingBanner .banner_list .bnrImg_wrap a:hover{
  opacity: .8;
}
.floatingBanner .banner_list .bnrImg_wrap img {
	width: 100%;
  height: auto;
}
.floatingBanner .closeButton {
	cursor: pointer;
	position: absolute;
	width: 45px;
	height: 45px;
	top: -10px;
	right: 120px;
	background-image: url("https://r.r10s.jp/evt/event/medicine/contactlens/coupon/_cmn/img/20231204/floatingclose_btn.png");
  background-repeat: no-repeat;
  background-size: 100% auto;
  z-index: 1;
}
.floatingBanner .closeButton:hover {
	opacity: .8;
}
.floatingRight {
	width: 122px;
	height: auto;
}
.floatingRight a:hover{
	opacity: .8;
}

#floating_bnr2,
#floating_bnr3{
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 960px;
}