@charset "utf-8";

/* --------------------------------------------------
	bese	
-------------------------------------------------- */
html {
  scroll-behavior: smooth;
}
body #lp_contents {
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック",
    "MS PGothic", sans-serif;
  font-size: 18px;
  color: #333;
  line-height: 1.4;
  background-color: #ffffff;
}

#lp_contents img {
  width: 100%;
  height: auto;
}

#lp_contents a {
  display: block;
}
#lp_contents a:hover {
  opacity: 0.7;
}

/* グルーバルLPnav */
.lp-global-nav__menu{
  display: flex;
  flex-wrap: nowrap;
  height: 50px;
  margin: 0;
  padding: 0;
}
.lp-global-nav__menu li{
  list-style: none;
  width: 25%;
  position: relative;
  margin: 0;
}
li.lp-global-nav__1 a{
  background: url(/assets/lp/did-646/images/header_tvcm.png) no-repeat;
  background-position-y: 0;
  background-position-x: 50%;
  display: block;
  width: 280px;
  height: 66px;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}
li.lp-global-nav__2 a{
  background: url(/assets/lp/did-646/images/header_reco.png) no-repeat;
  background-position-y: 0;
  background-position-x: 50%;
  display: block;
  width: 280px;
  height: 66px;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}
li.lp-global-nav__3 a{
  background: url(/assets/lp/did-646/images/header_list.png) no-repeat;
  background-position-y: 0;
  background-position-x: 50%;
  display: block;
  width: 280px;
  height: 66px;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}
li.lp-global-nav__4 a{
  background: url(/assets/lp/did-646/images/header_guide.png) no-repeat;
  background-position-y: 0;
  background-position-x: 50%;
  display: block;
  width: 280px;
  height: 66px;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}



/* --------------------------------------------------
	contents	
-------------------------------------------------- */

.lp_contents__wrapper {
  width: 1120px;
  margin-left: auto;
  margin-right: auto;
}

#lp_contents .header__inner {
  display: flex;
  align-items: center;
  padding-top: 20px;
}
#lp_contents .header__logo {
  width: 162px;
  padding-top: 10px;
}
#lp_contents .lp_title {
  width: 634px;
  margin-left: 81px;
}

#lp_contents #ranking-tab {
  margin-top: 30px;
  display: flex;
  align-items: flex-end;
}
#lp_contents #ranking-tab li {
  width: 560px;
  border-bottom: solid 5px #ff903e;
}
#lp_contents #ranking-tab li img {
  width: 560px;
}
#lp_contents #ranking-tab li.current {
  width: 560px;
  border: 5px solid #ff903e;
  border-bottom: none;
}
#lp_contents #ranking-tab li.current img {
  width: 550px;
}

#lp_contents .ranking {
  padding: 70px 30px 50px;
  background-color: #f6f6f6;
  border: solid 5px #ff903e;
  border-top: none;
}
#lp_contents .ranking .best3 {
  display: flex;
}
#lp_contents .ranking .best3 li {
  width: 344px;
  position: relative;
}
#lp_contents .ranking .best3 li + li {
  margin-left: 9px;
}
#lp_contents .ranking .best3 li::before {
  content: "";
  display: block;
  position: absolute;
  z-index: 1;
}
#lp_contents .ranking .best3 li a::before {
  content: "";
  display: block;
  position: absolute;
}
#lp_contents .ranking .best3 li a::after {
  content: "";
  display: block;
  position: absolute;
}
#lp_contents .ranking .best3 li img {
  width: 334px;
}
#lp_contents .ranking .best3 li .ranking__btn {
  display: block;
  position: absolute;
  width: 303px;
  height: 46px;
  overflow: hidden;
  left: 50%;
  transform: translateX(-50%);
  bottom: 25px;
}
#lp_contents .ranking .best3 li .ranking__btn img {
  width: 303px;
  height: 46px;
}
@keyframes shiny {
  0% {
    transform: scale(0) rotate(45deg);
    opacity: 0;
  }
  80% {
    transform: scale(0) rotate(45deg);
    opacity: 0.8;
  }
  81% {
    transform: scale(4) rotate(45deg);
    opacity: 1;
  }
  100% {
    transform: scale(50) rotate(45deg);
    opacity: 0;
  }
}
#lp_contents .ranking li {
	background: #FFF;
}
/* 1位 */
#lp_contents .ranking li#no1 {
  border: solid 5px #d9c555;
}
#lp_contents .ranking li#no1::before {
  width: 80px;
  height: 92px;
  background: url(../images/no_01.png) no-repeat;
  background-size: 100% 100%;
  top: -14px;
  left: 15px;
}
#lp_contents .ranking li#no1 .ranking__btn::after {
  position: absolute;
  content: "";
  display: inline-block;
  top: -180px;
  left: 0;
  width: 30px;
  height: 100%;
  background-color: #fff;
  animation: shiny 3s ease-in-out infinite;
}
#lp_contents .ranking li#no1 a::before {
  left: calc(50% + 2px);
  transform: translateX(-50%);
  bottom: 20px;
  background-color: #006d33;
  border-radius: 23px;
  width: 303px;
  height: 46px;
}
#lp_contents .ranking li#no1 a:hover .ranking__btn {
  transform: translateX(calc(-50% + 2px)) translateY(5px);
}
/* 2位 */
#lp_contents .ranking li#no2 {
  border: solid 5px #bbbbbb;
}
#lp_contents .ranking li#no2::before {
  width: 81px;
  height: 92px;
  background: url(../images/no_02.png) no-repeat;
  background-size: 100% 100%;
  top: -14px;
  left: 15px;
}
/* 3位 */
#lp_contents .ranking li#no3 {
  border: solid 5px #d98d56;
}
#lp_contents .ranking li#no3::before {
  width: 82px;
  height: 92px;
  background: url(../images/no_03.png) no-repeat;
  background-size: 100% 100%;
  top: -14px;
  left: 15px;
}

#lp_contents .ranking .other {
  display: flex;
  margin-top: 35px;
}
#lp_contents .ranking .other li {
  width: 255px;
  position: relative;
}
#lp_contents .ranking .other li + li {
  margin-left: 10px;
}
#lp_contents .ranking .other li::before {
  content: "";
  display: block;
  position: absolute;
  z-index: 1;
}
#lp_contents .ranking .other li a::after {
  content: "";
  display: block;
  position: absolute;
}
#lp_contents .ranking .other li img {
  width: 249px;
}
/* 4位 */
#lp_contents .ranking li#no4 {
  border: solid 3px #4b2a15;
}
#lp_contents .ranking li#no4::before {
  width: 65px;
  height: 42px;
  background: url(../images/no_04.png) no-repeat;
  background-size: 100% 100%;
  top: -9px;
  left: 8px;
}
#lp_contents .ranking li#no4 a::after {
  width: 231px;
  height: 42px;
  background: url(../images/link_normal.png) no-repeat;
  background-size: 100% 100%;
  left: 50%;
  transform: translateX(-50%);
  bottom: 25px;
}
/* 5位 */
#lp_contents .ranking li#no5 {
  border: solid 3px #4b2a15;
}
#lp_contents .ranking li#no5::before {
  width: 66px;
  height: 42px;
  background: url(../images/no_05.png) no-repeat;
  background-size: 100% 100%;
  top: -8px;
  left: 8px;
}
#lp_contents .ranking li#no5 a::after {
  width: 231px;
  height: 42px;
  background: url(../images/link_normal.png) no-repeat;
  background-size: 100% 100%;
  left: 50%;
  transform: translateX(-50%);
  bottom: 25px;
}
/* 6位 */
#lp_contents .ranking li#no6 {
  border: solid 3px #4b2a15;
}
#lp_contents .ranking li#no6::before {
  width: 66px;
  height: 42px;
  background: url(../images/no_06.png) no-repeat;
  background-size: 100% 100%;
  top: -8px;
  left: 8px;
}
#lp_contents .ranking li#no6 a::after {
  width: 231px;
  height: 42px;
  background: url(../images/link_normal.png) no-repeat;
  background-size: 100% 100%;
  left: 50%;
  transform: translateX(-50%);
  bottom: 25px;
}
/* 7位 */
#lp_contents .ranking li#no7 {
  border: solid 3px #4b2a15;
}
#lp_contents .ranking li#no7::before {
  width: 66px;
  height: 42px;
  background: url(../images/no_07.png) no-repeat;
  background-size: 100% 100%;
  top: -8px;
  left: 8px;
}
#lp_contents .ranking li#no7 a::after {
  width: 231px;
  height: 42px;
  background: url(../images/link_normal.png) no-repeat;
  background-size: 100% 100%;
  left: 50%;
  transform: translateX(-50%);
  bottom: 25px;
}
/* その他バナー */
#lp_contents .ranking li.other-bnr {
  width: 256px;
}
#lp_contents .ranking li + li.other-bnr {
  margin-left: 9px;
}
#lp_contents .ranking li.other-bnr::before {
  display: none;
}
#lp_contents .ranking li.other-bnr a::after {
  display: none;
}
#lp_contents .ranking li.other-bnr img {
  width: 256px;
}

#lp_contents .banner {
  background-color: #f9f8f8;
  margin-top: 20x;
}
#lp_contents .banner__inner {
  width: 1120px;
  margin-left: auto;
  margin-right: auto;
  padding: 40px 18px 80px;
}
#lp_contents .banner__title {
  width: 504px;
  margin-left: auto;
  margin-right: auto;
}
#lp_contents .banner__slider {
  margin-top: 40px;
  width: 100%;
  position: relative;
}

#lp_contents #onayami-tab {
  margin-top: 50px;
  display: flex;
  align-items: flex-end;
}
#lp_contents #onayami-tab li {
  width: 560px;
  border-bottom: solid 5px #d3da07;
}
#lp_contents #onayami-tab li img {
  width: 560px;
}
#lp_contents #onayami-tab li.current {
  width: 560px;
  border: 5px solid #d3da07;
  border-bottom: none;
}
#lp_contents #onayami-tab li.current img {
  width: 550px;
}

#lp_contents .onayami {
  padding: 70px 35px 50px;
  border: solid 5px #d3da07;
  border-top: none;
  display: flex;
  flex-wrap: wrap;
}
#lp_contents .onayami dl {
  width: 505px;
}
#lp_contents .onayami dl:nth-child(2n) {
  margin-left: 30px;
}
#lp_contents .onayami dl:nth-child(n + 3) {
  margin-top: 40px;
}
#lp_contents .onayami dl dt {
  padding-bottom: 5px;
  margin-bottom: 10px;
  font-size: 22px;
  font-weight: bold;
  color: #a5ab00;
  border-bottom: dashed 2px #ccc;
}
#lp_contents .onayami dl dt::before {
  content: "";
  display: inline-block;
  margin-right: 8px;
  margin-top: -5px;
  width: 35px;
  height: 35px;
  vertical-align: middle;
}
#lp_contents .onayami dl dt.icon-01::before {
  background: url(../images/icon_01.png) no-repeat left center;
  background-size: 100%;
}
#lp_contents .onayami dl dt.icon-02::before {
  background: url(../images/icon_02.png) no-repeat left center;
  background-size: 100%;
}
#lp_contents .onayami dl dt.icon-03::before {
  background: url(../images/icon_03.png) no-repeat left center;
  background-size: 100%;
}
#lp_contents .onayami dl dt.icon-04::before {
  background: url(../images/icon_04.png) no-repeat left center;
  background-size: 100%;
}
#lp_contents .onayami dl dt.icon-05::before {
  background: url(../images/icon_05.png) no-repeat left center;
  background-size: 100%;
}
#lp_contents .onayami dl dt.icon-06::before {
  background: url(../images/icon_06.png) no-repeat left center;
  background-size: 100%;
}
#lp_contents .onayami dl dt.icon-07::before {
  background: url(../images/icon_07.png) no-repeat left center;
  background-size: 100%;
}
#lp_contents .onayami dl dt.icon-08::before {
  background: url(../images/icon_08.png) no-repeat left center;
  background-size: 100%;
}
#lp_contents .onayami dl dt.icon-10::before {
  background: url(../images/icon_10.png) no-repeat left center;
  background-size: 100%;
}
#lp_contents .onayami dl dt.icon-11::before {
  background: url(../images/icon_11.png) no-repeat left center;
  background-size: 100%;
}
#lp_contents .onayami dl dt.icon-12::before {
  background: url(../images/icon_12.png) no-repeat left center;
  background-size: 100%;
}
#lp_contents .onayami dl dt.icon-13::before {
  background: url(../images/icon_13.png) no-repeat left center;
  background-size: 100%;
}
#lp_contents .onayami dl dt.icon-14::before {
  background: url(../images/icon_14.png) no-repeat left center;
  background-size: 100%;
}
#lp_contents .onayami dl dt.icon-15::before {
  background: url(../images/icon_15.png) no-repeat left center;
  background-size: 100%;
}
#lp_contents .onayami dl dt.icon-16::before {
  background: url(../images/icon_16.png) no-repeat left center;
  background-size: 100%;
}
#lp_contents .onayami dl dd {
  margin-bottom: 0.4rem;
  position: relative;
  padding-left: 1.3em;
}
#lp_contents .onayami dl dd::before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0.4em;
  width: 0.5em;
  height: 0.5em;
  border-top: solid 2px #ccc;
  border-right: solid 2px #ccc;
  transform: rotate(45deg);
}
#lp_contents .onayami dl dd a {
  color: #0094e0;
  text-decoration: underline;
  text-underline-offset: 4px;
  display: inline-block;
}
#lp_contents .onayami dl dd a span {
  color: #4b2a15;
  text-decoration: underline;
  text-underline-offset: 4px;
}
#lp_contents .onayami dl dd.tvcm::after {
  content: "";
  background: url(../images/tv_icon.png) no-repeat center left;
  background-size: 83px 19px;
  display: inline-block;
  width: 83px;
  height: 19px;
  vertical-align: bottom;
  margin-left: 2px;
}

#lp_contents .shop-bnr {
  margin-top: 40px;
  width: 829px;
  margin-left: auto;
  margin-right: auto;
}

#lp_contents .about {
  margin-top: 40px;
  margin-bottom: 90px;
  width: 100%;
}

.p-footer-tel__txt a {
  color: #0056b3;
  text-decoration: underline;
}
/*メニューをページ下部に固定*/
#sp-fixed-menu{
   position: fixed;
   width: 100%;
   bottom: 0px;
   font-size: 0;
   opacity: 0.9;
   z-index: 99;
}

/*メニューを横並びにする*/
#sp-fixed-menu ul{
   display: flex;
   list-style: none;
   padding:0;
   margin:0;
   width:100%;
}

#sp-fixed-menu li{
   justify-content: center;
   align-items: center;
   width: 50%;
   padding:0;
   margin:0;
   font-size: 14px;
   border-right: 1px solid #fff;
}

/*左側メニューを緑色に*/
#sp-fixed-menu li:first-child{
   background: #38b435;
}

/*左側メニューをオレンジ色に*/
#sp-fixed-menu li:last-child{
   background: #f3a324;
}

/*ボタンを調整*/
#sp-fixed-menu li a{
   color: #fff;
   text-align: center;
   display:block;
   width: 100%;
   padding:20px;
}

/*メニューをページ下部に固定*/
#sp-fixed-menu{
  position: fixed;
  width: 100%;
  bottom: 0px;
  font-size: 0;
  opacity: 0.9;
  z-index: 99;
}

/*メニューを横並びにする*/
#sp-fixed-menu ul{
  display: flex;
  list-style: none;
  padding:0;
  margin:0;
  width:100%;
}

#sp-fixed-menu li{
  justify-content: center;
  align-items: center;
  width: 50%;
  padding:0;
  margin:0;
  font-size: 14px;
  border-right: 1px solid #fff;
}

/*左側メニューを緑色に*/
#sp-fixed-menu li:first-child{
  background: #38b435;
}

/*左側メニューをオレンジ色に*/
#sp-fixed-menu li:last-child{
  background: #f3a324;
}

/*ボタンを調整*/
#sp-fixed-menu li a{
  color: #fff;
  text-align: center;
  display:block;
  width: 100%;
  padding:20px;
}