@charset "UTF-8";

.keeper__bgcolor {
  background-color: #F4F4F6;
}

li {
  list-style: none;
}

.keeper__mv {
  margin: 0% auto 0;
  padding: 16.4% 0 0%;
  text-align: center;
}

.keeper__mvblock {
  position: relative;
  padding-top: 92.8%;
  margin-top: -92.8%;
}

.keeper__mv__text {
  position: absolute;
  top: 4.7%;
  width: 44.6%;
  left: 5.5%;
}

.keeper__mv__text.keeper__item01 {
  top: auto;
  left: auto;
  right: 0%;
  bottom: 11.2%;
  text-align: left;
  font-family: "Noto Serif JP", "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
  font-size: 1.5rem;
  letter-spacing: .1em;
  line-height: 1.875;
  width: 70.4%;
  white-space: nowrap;
}

.keeper__border:after {
  content: '';
  display: block;
  position: absolute;
  bottom: 14%;
  left: 1px;
  width: 95%;
  height: 0.0714285714285714rem;
  background-color: #fff;
}

.keeper__border:nth-child(1):after {
  width: 56%;
}

.keeper__content {
  background-image: url(../img/keeper/keeper_cobg_sp.png);
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
  background-position: top;
}

.keeper__content::before {
  background-image: url(../img/keeper/keeper_coating_sp.png);
  width: 100%;
  height: 36%;
  display: block;
  content: '';
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: 2.5%;
}

.keeper__border {
  display: block;
  color: #fff;
  position: relative;
}

.keeper__list {
	display: flex;
	align-items: center;
	position: relative;
	min-height: 8.8125rem;
	margin-bottom: 1px;
	padding: 0 5.34%;
	box-sizing: border-box;
	font-family: "Noto Serif JP", "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
	color: #fff;
	background-color: rgba(0, 0, 0, .8);
}

li:last-child .keeper__list {
  border-bottom: none;
  margin-bottom: 0;
}

@media screen and (min-width:769px) {
  .keeper__list:hover {
    background: linear-gradient(45deg, rgba(24, 93, 175, .6), rgba(52, 146, 206));
    transition: background .5s;
  }
}

.keeper__list::before {
  position: absolute;
  display: block;
  content: '';
  border-bottom: 0.0714285714285714rem solid #fff;
  border-right: 0.0714285714285714rem solid #fff;
  transform: rotate(-45deg);
  width: 0.4rem;
  height: 0.4rem;
  right: 9.6%;
}

.keeper__list::after {
  position: absolute;
  display: block;
  content: '';
  border: 0.0714285714285714rem solid #fff;
  width: 2.25rem;
  height: 2.25rem;
  right: 5%;
  border-radius: 50%;
  top: 0;
  bottom: 0;
  margin: auto 0;
}

.keeper__width {
  width: 75.67%;
  padding: 6.928% 0px;
}

.keeper__lititle {
  font-size: 1rem;
  margin-bottom: 0;
  /*margin-top: 9.7%;*/
  /* margin-top: 8%; */
  margin-bottom: 4.5%;
}

.keeper__exp {
  font-size: .875rem;
  line-height: 1.6;
}
.keeper__exp ul {
	margin-left: 1.5em;
}
.keeper__exp ul li {
	list-style: disc;
}

.keeper__backimg {
  padding: 10.6% 5.34% 17%;
  background-image: url(../img/keeper/keeper_reserve_sp.jpg);
  font-family: "Noto Serif JP", "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
  color: #fff;
  text-align: center;
  background-size: cover;
}

.keeper__reserve {
  line-height: 1.5;
  margin-bottom: 5.5%;
  font-size: 1.55rem;
  font-weight: bold;
}

.keeper__form {
  line-height: 1.5;
  margin-bottom: 5.6%;
}

.keeper__tel, .keeper__days {
  width: 81.5%;
  margin: 0 0 0 auto;
}

.keeper__tel {
  font-size: 2.25em;
  display: block;
  letter-spacing: .08em;
  color: #fff;
}

.keeper__tel a {
  color: #fff;
}

.keeper__days {
  display: block;
  margin-top: .3em;
  font-size: 0.875rem;
  letter-spacing: 0em;
}

.keeper__bklist {
  padding-bottom: 9%;
  position: relative;
}

.keeper__bklist::before {
  display: block;
  content: '';
  width: 11%;
  height: 42%;
  position: absolute;
  background-image: url(../img/keeper/icon_phone.png);
  background-repeat: no-repeat;
  background-size: contain;
  top: -3%;
  left: 4.5%;
}

.keeper__bklist::after {
  display: block;
  content: '';
  width: 100%;
  height: 0.0714285714285714rem;
  background-color: #fff;
  margin-top: 9%;
}

.keeper__btn {
  /* background-image: url(../img/keeper/keeper_btn.png); */
  width: 100%;
  padding: 7.315% 0;
  border-radius: 3px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  box-shadow: 0px 0.1875em #1A1A1A;
  display: block;
  color: #fff;
  text-decoration: none;
  font-size: 0.9375rem;
  position: relative;
  background: linear-gradient(45deg, rgba(18, 93, 180, 1), rgba(35, 146, 210));
  transition: 1s;
}

.keeper__btn span {
  display: flex;
  position: relative;
  justify-content: center;
  width: 100%;
  letter-spacing: .05em;
  align-items: center;
}

.keeper__btn span::before {
  content: '';
  display: block;
  position: relative;
  background: url(../img/keeper/icon_contact.png);
  width: 6%;
  height: 1em;
  /* margin-right: 5%; */
  margin-left: 0;
  margin-right: 3%;
  background-size: cover;
  background-repeat: no-repeat;
}

.keeper__btn::before {
  position: absolute;
  display: block;
  content: '';
  border-bottom: 0.0714285714285714rem solid #fff;
  border-right: 0.0714285714285714rem solid #fff;
  transform: rotate(-45deg);
  width: 0.3rem;
  height: 0.3rem;
  top: 0;
  right: 9.7%;
  bottom: 0;
  margin: auto;
}

.keeper__btn::after {
  position: absolute;
  display: block;
  content: '';
  border: 0.0714285714285714rem solid #fff;
  width: 1.6rem;
  height: 1.6rem;
  right: 6.2%;
  border-radius: 50%;
  top: 0;
  bottom: 0;
  margin: auto 0;
}

p.\35 star-logo {
  width: 26%;
}

@media screen and (min-width:769px) {
  p.\35 star-logo {
    width: 10%;
    font-size: 0;
  }

  .keeper__tel a {
    pointer-events: none;
  }

  .keeper__bgcolor {
    min-width: 1200px;
  }

  .keeper__mv {
    padding: 0;
    background-color: rgba(1, 24, 115, 80%);
  }

  .keeper__warpper {
    max-width: 1200px;
    width: 100%;
    margin: auto;
  }

  .keeper__mv__text {
    width: min(21.77%,337px);
    left: 1.4%;
    bottom: 26.2em;
    margin: auto;
    top: auto;
  }

  .keeper__mvblock {
    padding-top: 45.91666666666667%;
    margin-top: -45.91666666666667%;
  }

  .keeper__mv__text.keeper__item01 {
    width: 34.3%;
    top: auto;
    left: auto;
    right: 0%;
    bottom: 6.55em;
    font-size: 1.875em;
    letter-spacing: .1em;
    line-height: 2;
  }

  .keeper__border:after {
    content: '';
    display: block;
    position: absolute;
    bottom: 14%;
    left: 1px;
    width: 76%;
    height: 2px;
    background-color: #fff;
  }

  .keeper__border:nth-child(1):after {
    width: 44%;
  }

  .keeper__content {
    background-image: url(../img/keeper/keeper_cobg.png);
    width: 100%;
  }

  .keeper__list {
    width: 57.4%;
    min-height: 10.4375em;
    margin: 0 0 0 auto;
    padding: 2em 3.8%;
    box-sizing: border-box;
    border-bottom: 1px solid #fff;
    transition: background-color 1s;
  }

  .keeper__lititle {
    font-size: 1.625em;
    margin-top: 0%;
    margin-bottom: 3%;
  }

  .keeper__exp {
    font-size: 1em;
  }

  .keeper__width {
    width: 86%;
    padding: 0;
  }

  .keeper__content:before {
    background-image: url(../img/keeper/keeper_coating.png);
    width: 56.6%;
    top: 3%;
    left: -2.1%;
  }

  .keeper__list::before {
    width: 0.5rem;
    height: 0.5rem;
    right: 8.5%;
    border-bottom: 2px solid #fff;
    border-right: 2px solid #fff;
  }

  .keeper__list::after {
    width: 2.8rem;
    height: 2.8rem;
    right: 5.4%;
    border: 2px solid #fff;
  }

  .keeper__backimg {
    background-image: url(../img/keeper/keeper_reserve.jpg);
    background-repeat: no-repeat;
    padding: 2.4em 0 3.6em;
    width: 100%;
    margin: auto;
  }

  .keeper__reserve {
    font-size: 2.25em;
    margin-bottom: 0.8%;
  }

  .keeper_pc_none {
    display: none;
  }

  .keeper__btn {
    /* background-image: url(../img/keeper/keeper_btn.png); */
    width: 93%;
    background-color: #fff;
    padding: 7% 0;
    border-radius: 3px;
    box-shadow: 0px 3px #1A1A1A;
    font-size: 1.25em;
    margin: 0 0 0 auto;
    position: relative;
    z-index: 1;
    transition: 1s;
    transition: background 1s, border 1s, color 1s;
  }

  .keeper__contactlist {
    display: flex;
    width: 78%;
    margin: auto;
  }

  .keeper__contactlist li {
    width: 50%;
    background-color: transparent;
    position: relative;
  }

  .keeper__form {
    margin-bottom: 3.6%;
  }

  .keeper__tel, .keeper__days {
    width: 94%;
  }

  .keeper__tel {
    font-size: 3.4375em;
    letter-spacing: .07em;
  }

  .keeper__days {
    font-size: 1.3125em;
    margin-top: 0.5%;
    width: 100%;
	  margin-left: 1em;
  }

  .keeper__bklist {
    padding-bottom: 0;
  }

  .keeper__bklist::before {
    display: block;
    content: '';
    width: 11%;
    height: 75%;
    top: 11%;
    left: 0;
  }

  .keeper__bklist::after {
    width: 1px;
    height: 5.5rem;
    margin-top: 0;
    position: absolute;
    top: 0;
    left: 100%;
  }

  .keeper__btn span::before {
    content: '';
    display: block;
    position: relative;
    width: 1.3em;
    height: 1em;
    /* margin-right: 5%; */
    margin-left: 0;
    margin-right: 3%;
    background-size: contain;
    transition: background 1s;
  }

  .keeper__btn:hover span:before {
    transition: background .5s;
    background: url(../img/keeper/icon_contact_hover.png);
  }

  .keeper__btn::before {
    right: 1.85em;
    border-bottom: 0.125em solid #fff;
    border-right: 0.125em solid #fff;
    transition: border-bottom 1s, border-right 1s;
  }

  .keeper__btn::after {
    width: 2rem;
    height: 2rem;
    right: 1.05em;
    border: 0.125em solid #fff;
    transition: border 1s;
  }

  .keeper__btn:hover {
    background: #fff;
    border: none;
    /* 	box-shadow:none; */
    transition: background .5s, border .5s, color .5s;
    color: #125DB0;
  }

  .keeper__btn:hover::before {
    border-bottom: 2px solid #125db0;
    border-right: 2px solid #125db0;
    transition: border-bottom .5s, border-right .5s;
  }

  .keeper__btn:hover::after {
    border: 2px solid #125db0;
    transition: border .5s;
  }

  .keeper__contact {
    background-color: #747474;
  }

  .keeper.lower .warpper,
  .lower.diamond .warpper,
  .lower.wdiamond .warpper,
  .lower.crystal .warpper,
  .lower.fresh .warpper,
  .lower.eco-plus .warpper
  .lower.exterior .warpper
	{
    min-width: 1200px;
  }
}

@media only screen and (min-device-width: 769px) and (max-device-width: 1200px) {
  .keeper__bgcolor {
    min-width: auto;
  }

  .keeper.lower .warpper,
  .lower.diamond .warpper,
  .lower.wdiamond .warpper,
  .lower.crystal .warpper,
  .lower.fresh .warpper,
  .lower.eco-plus .warpper
  .lower.exterior .warpper{
    min-width: auto;
  }

  .keeper__content {
    max-width: 100%;
  }

  .keeper__backimg {
    max-width: 100%;
  }

  .keeper__list::after {
    width: 2.9em;
    height: 2.9em;
    right: 5.4%;
  }

  .keeper__list::before {
    width: 0.4em;
    height: 0.4em;
    right: 3.8em;
  }

  .keeper__btn::before {
    width: 0.2em;
    height: 0.2em;
    right: 1.8em;
  }

  .keeper__backimg {
    background-image: url(../img/keeper/keeper_reserve.jpg);
    background-repeat: no-repeat;
    max-width: 1200px;
    /* min-width: 1200px; */
    padding: 3.3% 0 4.7%;
    width: 100%;
    margin: auto;
  }

  .keeper__btn::after {
    width: 1.6em;
    height: 1.6em;
    right: 1em;
  }
}

.keeper__backimg .contact__wrap {
	max-width: 1200px;
	margin: 0 auto;
}