@charset "UTF-8";
:root {
  --white: #fff;
  --black: #222;
  --gray: #858383;
  --gray-light: #e4e4e4;
  --gray-dark: #454545;  
  --gold: #aa904d;
  --silver: #6f819a;
  --red: #cf000e;
  --blue: #0054a7;
  --blue-light: #68abe2;
  --navy: #0f0964;
  --teal: #008b83;
  --fw-l: 300;
  --fw-r: 400;
  --fw-m: 500;
  --fw-sb: 600;
  --fw-b: 700;
  --max-width: calc(1236px + calc(4.063rem * 2));
}

*, *::before, *::after {
  box-sizing: border-box;
}
blockquote,body,button,dd,dl,fieldset,h1,h2,h3,h4,h5,h6,hr,iframe,input,legend,ol,option,p,
pre,select,td,textarea,th,ul {
  margin: 0;
  padding: 0;
  border: none;
}
h1,h2,h3,h4,h5,h6,small,strong,sub,sup,th {
  font-size: inherit;
  font-weight: inherit;
}
a{
  color: inherit;
  text-decoration: none;
}
ol, ul {
  list-style-type: none;
}
sup {
  vertical-align: baseline;
}
svg {
  overflow: visible;
}
img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  vertical-align: top;
}
html {
  font-family: sans-serif;
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}
body {
  color: #222;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1rem;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.6;
  text-align: left;
}
main {
  display: block;
}

.inner {
  max-width: var(--max-width);
  padding: 0 1.25rem;
  margin: 0 auto;
}
.bg-gray {
  background: var(--gray-light);
}
.bg-gray > .inner {
  padding-top: 1.786rem;
  padding-bottom: 1.964rem;
}

/* header
--------------------------------------------------------*/
.header {
  padding: 2.063rem 0 1.786rem;
}
.header-logo {
  width: 6rem;
}

/* main
--------------------------------------------------------*/
.main {
  padding-bottom: 2.429rem;
}

/* mv
--------------------------------------------------------*/
.mv {
  margin-bottom: 1.25rem;
}
.mv .inner {
  text-align: center;
}

/* case
--------------------------------------------------------*/
.case {
  padding: 1.143rem 1.071rem;
  border-radius: 1.56rem;
  background: var(--white);
}
.case__head {
  padding-left: .5rem;
  margin-bottom: 1.429rem;
}
.case__head h2 {
  font-size: 1.2857rem;
  font-weight: var(--fw-b);
  text-align: center;
  letter-spacing: 1px;
}
.case-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: 1.25rem;
}
.bf-af {
  display: flex;
  gap: .357rem;
}
.bf-af-arrow {
  display: inline-block;
  width: 1.929rem;
  height: 4.643rem;
  background: var(--red);
  clip-path: polygon(0 25%, 41.8% 25%, 41.8% 0, 100% 50%, 41.8% 100%, 41.8% 75%, 0 75%);
  margin-top: 2.8rem;
}
.bf-af__box {
  width: 9.7143rem;
  position: relative;
}
.bf-af-ttl {
  width: 4.857rem;
  color: var(--white);
  font-size: .929rem;
  text-align: center;
  letter-spacing: 1px;
  border-radius: .375rem;
  padding: .25rem 0 .35rem;
  position: absolute;
  top: -.625rem;
  left: -.625rem;
  z-index: 1;
}
.bf-af-ttl.bf {
   background: var(--gray-dark);
}
.bf-af-ttl.af {
   background: var(--red);
}
.voice {
  width: 100%;
  max-width: 30rem;
}
.voice__box {
  display: flex;
  align-items: center;
  gap: 1.15rem;
  padding: 1.25rem 0 1.25rem 1.15rem;
  border: 1px solid;
  border-radius: .625rem;
}
.voice__box.premium {
  border-color: var(--gold);
}
.voice__box.highgrade {
  margin-top: .714rem;
  border-color: var(--silver);
}
.voice-face img {
  width: 3.036rem;
  height: auto;
  object-fit: contain;
}
.voice-coment {
  font-size: .857rem;
  font-weight: var(--fw-m);
}
.voice-coment .use-type {
  display: inline-block;
  font-size: .786rem;
  font-weight: var(--fw-l);
  padding-top: .143rem;
}

/* lineup
--------------------------------------------------------*/
.lineup { 
  padding: 2.143rem 0;
}
.lineup__head {
  margin-bottom: 1.429rem;
  position: relative;
}
.lineup__head::before,
.lineup__head::after {
  content: "";
  position: absolute;
}
.lineup__head::before {
  width: 100%;
  height: 1px;
  background: var(--black);
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  z-index: -2;
}
.lineup__head::after {
  width: calc(1.2857rem * 15);
  height: 2rem;
  background: var(--white);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
}
.lineup__head h2 {
  font-size: 1.2857rem;
  font-weight: var(--fw-b);
  text-align: center;
  letter-spacing: 2px;
}
.lineup-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  max-width: var(--max-width);
  margin: 0 auto;
}
.lineup-list__item {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding-bottom: 1.964rem;
  margin-bottom: 1.964rem;
  border-bottom: 1px solid var(--gray-light);
}
.lineup-list__item:last-of-type {
  margin-bottom: 0;
  border-bottom: none;
}
.product {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0 auto;
}
.type-name {
  text-align: center;
  padding: .625rem;
  border-bottom: 3px solid;
}
.type-name h3 {
  font-size: 1.357rem;
  font-weight: var(--fw-m);
  letter-spacing: 2px;
}
.type-name.premium {
  border-color: var(--gold);
  background: color-mix(in srgb, var(--gold) 20%, transparent);
}
.type-name.highgrade {
  border-color: var(--silver);
  background: color-mix(in srgb, var(--silver) 20%, transparent);
}
.type-name.light {
  border-color: var(--blue-light);
  background: color-mix(in srgb, var(--blue-light) 20%, transparent);
}
.product-thumb {
  padding: 0 1rem;
}
.product > h4 {
  margin-bottom: .714rem;
}
.lineup-list__item h4 {
  font-size: 1.214rem;
  font-weight: var(--fw-m);
}
.lineup-list__item sup {
  font-size: .714rem;
  font-weight: var(--fw-r);
  padding: 0 2px;
  vertical-align: top;
}
.product-detail {
  margin-top: auto;
}
.product-detail .features {
  margin-top: .5rem;
}
.product-detail .features dt {
  color: var(--gray-dark);
  font-size: .929rem;
}
.product-detail .features dd ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 .25rem;
}
.product-detail .features dd ul li {
  width: 11.964rem;
  color: var(--white);
  font-size: .964rem;
  font-weight: var(--fw-sb);
  text-align: center;
  line-height: 1.2;
  padding: .55rem .313rem .65rem;
  margin-top: .25rem;
  border-radius: .25rem;
}
.product-detail .features.care dd ul li {
  background: var(--navy);
}
.product-detail .features.saving dd ul li {
  background: var(--teal);
}
.product-detail .features.safety dd ul li {
  background: var(--blue);
}
.oilsmasher {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0 .85rem;
}
.oilsmasher-logo {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 15.857rem;
  height: 3.786rem;
  border: 1px solid var(--gray-light);
  border-radius: .25rem;
}
.oilsmasher-logo img {
  width: 76.92%;
}
.oilsmasher a {
  display: flex;
  align-items: center;
  font-size: .857rem;
  text-decoration: underline;
}
.oilsmasher a::before {
  display: inline-block;
  content: "";
  width: .929rem;
  height: .929rem;
  margin-right: 3px;
  background: url(../images/icon_arrow.svg) no-repeat center;
  background-size: cover;
}
.series-name {
  color: var(--gray);
}
.series-name span {
  font-size: 1.607rem;
  padding-right: .313rem;
}
.product-price {
  margin-top: 1.5rem;
}
.product-price dl span {
  display: inline-block;
}
.product-price dl dt {
  font-size: 1.214rem;
  font-weight: var(--fw-sb);
}
.product-price dl dt span {
  font-size: clamp(12px, .9vw, 13px);
  font-weight: var(--fw-r);
}
.product-price dl dd {
  font-size: .929rem;
}
.product-price dl dd.price-original {
  margin-bottom: .6rem;
}
.product-price dl dd.price-original span {
  font-size: 1.071rem;
  margin: 0 -.3rem 0 .75rem;
}
.product-price dl dd.price > div {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
}
.product-price dl dd.price .red {
  color: var(--red);
  font-size: 1.357rem;
  font-weight: var(--fw-m);
  margin-right: 1rem;
}
.product-price dl dd.price .price-main{
  font-size: 2.036rem;
  line-height: 1.1;
}
.product-price dl dd.price .price-yen{
  margin: 0 -.3rem 0 .3rem;
}
.product-price dl dd.price .price-tax{
  font-size: .929rem;
  font-weight: var(--fw-r);
  margin-right: -.3rem;
}
.sp-banner {
  margin-top: 1rem;
}
.pc-banner {
  margin-bottom: 1.563rem;
}
.lineup__foot .lineup-att {
  color: var(--gray-dark);
  font-size: .857rem;
  line-height: 1.6;
}

/* process
--------------------------------------------------------*/
.process {
  background: var(--white);
}
.process__block {
  padding: 1.071rem 1.25rem;
}
.process__block h2 {
  font-size: 1.429rem;
  font-weight: var(--fw-sb);
  letter-spacing: 1px;
  padding-bottom: .313rem;
  border-bottom: 1px solid var(--black);
}
.order-step {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 3.214rem;
}
.order-step__box {
  width: 100%;
  text-align: center;
}
.order-setp-arrow {
  display: inline-block;
  width: 2.571rem;
  height: 1.286rem;
  background: var(--gray);
  clip-path: polygon(0 0%, -40.3% 0%, -40.3% 0, 140.3% 0, 140.3% 0%, 100% 0%, 50% 100%);
  transform: rotateX(10deg);
  margin-top: 1.429rem;
}
.order-step__head{
  margin: 1.429rem 0;
}
.order-step-ttl {
  color: var(--red);
  font-size: 1.321rem;
  font-weight: var(--fw-b);
  margin-bottom: .625rem;
}
.order-step__head img {
  width: 4.375rem;
  height: 4.375rem;
}
.order-step__body h3 {
  font-size: 1.286rem;
  font-weight: var(--fw-m);
  line-height: 1.6;
  margin-bottom: 1rem;
}
.order-step__body p {
  text-align: left;
}
.order-step__body p span {
  display: inline-block;
  color: var(--gray-dark);
  font-size: .857rem;
  padding-top: 3px;
}
.badge-free {
  display: inline-block;
  color: var(--white);
  font-size: 1.286rem;
  font-weight: var(--fw-m);
  padding: .15rem .6rem .25rem 1rem;
  margin-bottom: 5px;
  border-radius: 6px;
  background: var(--red);
}
.estimate-flow__box {
  padding: 1.429rem 0 2.143rem;
  margin-bottom: .571rem;
  border-bottom: 1px solid var(--gray-light);
}
.estimate-flow__box:last-of-type {
  padding-bottom: 0;
  border-bottom: none;
}
.estimate-flow-txt {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.estimate-flow-ttl {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 2.857rem;
  height: 2.857rem;
  border-radius: 6px;
  background: var(--gray-dark);
}
.estimate-flow-ttl span {
  color: var(--white);
  font-size: 1.714rem;
  font-weight: var(--fw-m);
}
.estimate-flow-txt p {
  width: calc(100% - calc(3rem + 1.25rem));
}
.estimate-flow-capture {
  max-width: 35rem;
  margin-top: 1rem;
  background: var(--white);
  box-shadow: 3px 3px 6px rgba(0, 0, 0, .15);
}

/* attention
--------------------------------------------------------*/
.attention {
  padding-top: 2.143rem;
}
.attention .bg-gray {
  padding: 2rem 1.071rem 2.5rem;
  background: #f5f5f5;
}
.attention__head {
  margin-bottom: .5rem;
}
.attention__head h2 {
  font-size: 1.357rem;
  font-weight: var(--fw-m);
}

/* close-button
--------------------------------------------------------*/
.close-button {
  padding-top: 4.643rem;
}
.close-button .button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 15rem;
  height: 3.929rem;
  border: 1px solid var(--gray);
  border-radius: 1.9645rem;
  margin: 0 auto;
  transition: background-color .5s cubic-bezier(.16,1,.3,1),color .5s cubic-bezier(.16,1,.3,1);
  position: relative;
}
.button-text{
  font-size: 1.071rem;
  font-weight: var(--fw-sb);
  padding-left: 1.5rem;
}
.button-text::before,
.button-text::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 2.5rem;
  width: 2px;
  height: 1.2rem;
  background: var(--black);
}
.button-text::before {
  transform: translate(-50%, -50%) rotate(45deg);
}
.button-text::after {
  transform: translate(-50%,-50%) rotate(-45deg);
}
.close-button .button:hover {
  color: var(--white);
  border: none;
  background: var(--black);
}
.close-button .button:hover .button-text::before,
.close-button .button:hover .button-text::after {
  background: var(--white);
}

/* footer
--------------------------------------------------------*/
.footer {
  color: var(--white);
  background: #000;
}
.footer-inner {
  padding: 2.5rem 0;
}
.copyright {
  font-size: .857rem;
  text-align: center;
}


/*--------------------------------------------------------
 Responsive
--------------------------------------------------------*/
@media screen and (max-width: 767px) {
  html {
    font-size: 3.73333vw;
  }
  body {
    min-width: 320px;
  }
  .pc-banner,
  .product-detail .features dd ul li.blank {
    display: none;
  }
}
@media screen and (min-width: 768px) {
  html {
    font-size: clamp(14px, 1.2945vw, 16px);
  }
  .inner {
    padding: 0 2.031rem;
  }
  .bg-gray > .inner {
    padding-top: 3.438rem;
    padding-bottom: 3.438rem;
  }
  .header {
    padding-bottom: 1.375rem;
  }
  .main {
    padding-bottom: 5.313rem;
  }
  .mv {
    margin-bottom: 3.75rem;
  }
  .case {
    padding: 1.875rem;
    border-radius: 1.563rem;
  }
  .case__head h2 {
    font-size: 2.25rem;
    margin-bottom: 2.188rem;
  }
  .case-inner {
    gap: 1.875rem;
  }
  .bf-af {
    gap: 1.875rem;
  }
  .bf-af-arrow {
    width: 3.875rem;
    height: 8.125rem;
    margin-top: 2rem;
    clip-path: polygon(0 25%, 48.4% 25%, 48.4% 0, 100% 50%, 48.4% 100%, 48.4% 75%, 0 75%);
  }
  .bf-af__box {
    width: 14.563rem;
  }
  .bf-af-ttl {
    width: 7.5rem;
    font-size: 1.25rem;
  }
  .voice__box {
    gap: 1.25rem;
    padding: 1.688rem .5rem 1.688rem 1.625rem;
  }
  .voice__box.highgrade {
    margin-top: 1rem;
  }
  .voice-face img {
    width: 5.313rem;
  }
  .voice-coment {
    font-size: 1.063rem;
  }
  .voice-coment .use-type {
    font-size: .875rem;
    padding-top: .313rem;
  }
  .sp-banner {
    display: none;
  }
  .lineup {
    padding: 4.375rem .938rem;
  }
  .lineup .inner {
    padding: 0;
  }
  .lineup__head {
    margin: 0 1rem 2.188rem;
  }
  .lineup__head::after {
    width: calc(2.25rem * 15);
  }
  .lineup__head h2 {
    font-size: 2.25rem;
  }
  .lineup-list__item {
    width: 33.333%;
    padding: 0 1.1rem;
    margin-bottom: 0;
    border-right: 1px solid var(--gray-light);
    border-bottom: none;
  }
  .lineup-list__item:last-of-type {
    border-right: none;
  }
  .type-name h3 {
    font-size: clamp(18px, 1.941vw, 24px);
  }
  .product-thumb {
    padding: .8rem 0;
  }
  .lineup-list__item h4 {
    font-size: clamp(15px, 1.2945vw, 18px);
  }
  .oilsmasher-logo {
    width: auto;
    max-width: 14.625rem;
    height: 3.5rem;
  }
  .product-detail .features dd ul li {
    width: 100%;
  }
  .product-detail .features dd ul li.blank {
    height: 2.25rem;
    background: none!important;
  }
  .product-price dl dt span{
    display: block;
  }
  .lineup__foot {
    padding: 0 .938rem;
    margin-top: 3.125rem;
  }
  .process__block {
    padding: 2.813rem 1.5rem;
  }
  .order-step {
    flex-wrap: nowrap;
    justify-content: space-between;
  }
  .order-step__box {
    width: 11.25rem;
  }
  .order-setp-arrow {
    width: 1.125rem;
    height: 2.25rem;
    margin-top: 5rem;
    clip-path: polygon(0 50%, 0% 50%, 0% 0, 100% 50%, 0% 100%, 0% 50%, 0 50%);
  }
  .order-step__body h3 {
    min-height: calc(1.6em * 2)
  }
  .order-step__body p {
    font-size: .938rem;
  }
  .badge-free {
    font-size: 1.25rem;
  }
  .estimate-flow__box {
    padding: 2.813rem 0;
  }
  .estimate-flow-txt {
    align-items: center;
    gap: 1.25rem;
  }
  .estimate-flow-capture {
    margin: 1.875rem 0 0 calc(3rem + 1.25rem);
  }
  .attention {
    padding-top: 2.813rem;
  }
  .attention .bg-gray {
    padding: 2rem 1.875rem 2.5rem;
  }
  .attention__head h2 {
    font-size: 1.5rem;
  }
  .close-button .button {
    width: 18.75rem;
    height: 3.75rem;
  }
  .button-text::before,
  .button-text::after {
    top: 50%;
    left: 4rem;
  }
}
@media screen and (min-width: 1020px) {
  .inner {
    padding: 0 4.063rem;
  }
  .case-inner {
    flex-wrap: nowrap;
  }
  .voice {
    flex: 0 0 30rem;
    max-width: 30rem;
  }
  .voice__box {
    gap: 1.25rem;
    padding: 1.2rem .5rem 1.2rem 1.625rem;
  }
  .bf-af {
    flex: 1 1 auto;
    min-width: 0;
    justify-content: center;
  }
  .lineup {
    padding: 4.375rem 1.563rem;
  }
  .lineup__head {
    margin: 0 2.5rem 2.188rem;
  }
  .lineup-list__item {
    padding: 0 2.25rem;
  }
  .product-thumb {
    padding: .8rem 1.563rem;
  }
  .product-detail .features dd ul li,
  .product-detail .features dd ul li.blank {
     width: calc(50% - .125rem);
     font-size: clamp(9px, 1.132vw, 14px);
  }
  .product-detail .features.care dd ul li:nth-of-type(2) {
    letter-spacing: -.1em;
  }
  .lineup__foot {
    padding: 0 2.188rem;
  }
  .process__block {
    padding: 2.813rem 3.438rem;
  }
  .attention .bg-gray {
    padding: 2rem 3.438rem 2.5rem;
  }
}
@media screen and (min-width: 1320px) {
  .case {
    padding: 1.875rem 3rem;
  }
  .case-inner {
    gap: 3.438rem;
  }
  .voice__box {
    padding: 1.688rem .5rem 1.688rem 1.625rem;
  }
  .bf-af-arrow {
    margin-top: 3.25rem;
  }
  .product-price dl dt span {
    display: inline;
  }
}