@charset "UTF-8";

/*===========================
  base.css
===========================*/
body{
  font:16px "Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3", "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", sans-serif;
  box-sizing:border-box;
  letter-spacing:0.03em;
  line-height:1.4;
}

/*===========================
    色指定
===========================*/
body,
a{ background: #F9F9F9; color:#000; }

/* normal (black) */
.pagenav_line ul li.on{background: linear-gradient(350deg, #8F8F8F 25%, #666 25%, #666 50%, #8F8F8F 50%, #8F8F8F 75%, #666 75%, #666 100%); }
.faq_box .title{ color:#000;}
.faq_box .title span::before{ display: none; }

/*===========================
    common
===========================*/
/*  btn_area
===========================*/
.btn_area{ padding: 29.6px 0 0; position: absolute; left: 50%; transform: translateX(-50%); bottom: 52px;}

/*  btn
===========================*/
.next_btn{ padding:16px 0; border:1px solid #E71F18; border-radius:0px;  font-size:12px; font-weight:bold; color:#E71F18; width:250px; height: 52px; text-align:center;  transition: 0.3s; position: relative;  overflow: hidden;}
.next_btn::before { content: ""; position: absolute; top: 0; left: 0; z-index: 2; background: #E71F18; width: 100%; height: 100%; transition: transform 0.6s cubic-bezier(0.8, 0, 0.2, 1) 0s; transform: scale(0, 1); transform-origin: right top;}
.next_btn::after { content: "NEXT"; position: absolute; top: 17px; left: 0; z-index: 3; color: #E71F18; width: 100%;}
.top .next_btn::after { content: "START";}
.next_btn span{ width:24px; height:24px; content:""; background:url("./img/icon/img_next-btn-arrow.svg") no-repeat 0 0 / 100% auto; top:13px; right:8px; z-index: 3;}
.next_btn span::before{ display: none; }

/*  hover
===========================*/
.next_btn:hover::before { transform-origin: left top; transform: scale(1, 1);}
.next_btn:hover::after { color: #ffffff;}

@media screen and (min-width:769px){ /* hover PC */
  .next_btn:hover span{ animation:0.3s linear nbhover1; }
}
@keyframes nbhover1{
  0%{ opacity:0; }
  100%{ opacity:1; }
}
@keyframes nbhover2{
  0%{ transform:scaleX(0); }
  50%{ transform:scaleX(0); }
  100%{ transform:scaleX(1); }
}

/*  backlink
===========================*/
.backlink {background-color: #ffffff; transform: translateY(-50%); text-align:center; font-size:12px; font-weight:bold; border:1px solid #E71F18; border-radius:0px;  font-size:12px; font-weight:bold; color:#E71F18; width:250px; height: 52px; text-align:center; transition: 0.3s; position: relative; overflow: hidden; z-index: 100;}
.backlink a{ padding:0 0 0 0; color:#E71F18; width: 100%; height: 100%; display: block; position: relative; z-index: 110;}
.backlink::before { content: ""; position: absolute; top: 0; left: 0; z-index: 2; background: #E71F18; width: 100%; height: 100%; transition: transform 0.6s cubic-bezier(0.8, 0, 0.2, 1) 0s; transform: scale(0, 1); transform-origin: right top;}
.backlink::after { content: "BACK"; position: absolute; top: 17px; left: 0; z-index: 105; color: #E71F18; width: 100%;}
.backlink span{width:24px; height:24px; content:""; background:url("./img/icon/img_back-btn-arrow.svg") no-repeat 0 0 / 100% auto; position: absolute; top:13px; left:6px; z-index: 105; }
.backlink span::before{ display: none; }

/*  hover
===========================*/
.backlink:hover::before { transform-origin: right top; transform: scale(1, 1);}
.backlink:hover::after { color: #ffffff;}

@media screen and (min-width:769px){ /* hover PC */
  .backlink:hover span{ animation:0.3s linear nbhover1; }
}
@keyframes nbhover1{
  0%{ opacity:0; }
  100%{ opacity:1; }
}
@keyframes nbhover2{
  0%{ transform:scaleX(0); }
  50%{ transform:scaleX(0); }
  100%{ transform:scaleX(1); }
}

/*===========================
    move
===========================*/
/*--- タイトル波線 ---*/
.scrollMoveTit span::after{ animation:1.8s linear titleline; transform:translateX(910px); }
@keyframes titleline{
  0%{ transform:translateX(0); }
  100%{ transform:translateX(910px); }
}

/* hover */
@media screen and (min-width:769px){ /* hover PC */
  .rclist_02 li:hover{ animation: 0s; transform-origin:center center; box-shadow: 0 15px 30px -5px rgba(0,0,0,.15), 0 0 5px rgba(0,0,0,.1); transform:translateY(-4px); }
}

/*---------- PC版 ----------------------------------------------------------*/
@media screen and (min-width:769px){

    /*===========================
      base
    ===========================*/
    /*  contents
    ===========================*/
    #contents{ max-width: 500px; margin:0 auto; padding:18px}
	  #contents.wide{ max-width:none; box-sizing:border-box; }
    #contents.toppage{ max-width: none; height: 100vh; box-sizing: border-box; padding:50px 10px 70px; display: flex; flex-direction: column; justify-content: space-between;}
    
    /*  win_close
    ===========================*/
    #win_close{ top:8px; right:8px; }
    #win_close a{ width:40px; height:40px; display:block; background:url("../img/btn_close_sp.svg") no-repeat center center / 100% auto; }
    
    /*===========================
      parts
    ===========================*/
    /*  btn
    ===========================*/
    .next_btn{ width:250px; }
    
    /*  hover
    ===========================*/
    a:hover{
        -webkit-transition:0.2s ease-in-out;
        -moz-transition:0.2s ease-in-out;
        -o-transition:0.2s ease-in-out;
        transition:0.2s ease-in-out;
    }
    
    /*  form
    ===========================*/
    input,
    textarea{ width:100%; padding:18px 15px; }

    /*===========================
      module
    ===========================*/
    /*  toppage
    ===========================*/
    .toppage p {font-size: 14px; margin:0;}
    .toppage .topimg{ margin:0; height: 65%;}
    .toppage .topimg img{ height: 100%; border-radius:0px; margin:0; object-fit: contain; display: inline-block; max-height: none;}
    .toppage .btn_area{ margin:0; padding:0; text-align: center; position: static; transform: translateX(0);}
    
    /*  pagenav_line
    ===========================*/
    .pagenav_line{ margin:0 auto 20px; padding:0 0 0 0; width: 307px;}
    .pagenav_line ul{ padding:31px 0 0;}
    .pagenav_line ul li{ background:#fff;}
    .pagenav_line ul li.present::after,
    .pagenav_line ul li.present span{ display:none; }
    
    /*  faq_box
    ===========================*/
    .faq_box{ padding:27px 0 0; border-radius:0px; min-height: 40vh;}
    .faq_box .title{ margin:0 0 7px; text-align:center; font-size:18px; font-weight:bold;}
    .faq_box .title span{ display:inline-block; padding:0 2px 13px;}
    .faq_box .title span::before{ display:none;}
    .faq_box .title span::after{ display:none;}
    .faq_box .main_img{ height:auto;}
    .faq_box .main_img img{ width:auto; max-height:100%; }

    /*  btn_area
    ===========================*/
    .btn_area{ padding: 0; margin: 48px 0 0; position: absolute; top:541px; bottom: auto; display: flex; justify-content: center;}
    .backlink { top: 0px; transform: translateY(0%); position: relative;}

    /*-----  rclist_02 -----*/
    ul.rclist_02{ margin:0 -10px; }
    ul.rclist_02.facetype{width: 600px; margin-left: -50px;}
    ul.rclist_02 li{ width:160px; margin:20px 10px 0; border-radius:0px; box-shadow:0 0 10px 0 rgba(0,0,0,0.04); transition: .3s;}
    ul.rclist_02 li label .img{ width:100%; height:126px; display: block; background-size: cover; border-radius:0;}
    ul.rclist_02 li label::after{ width:27px; height:27px; }
    ul.rclist_02 li input[type=radio] + label::after{ background-image:url("./img/icon/img_radio-off.svg"); }
    /* on */
    ul.rclist_02 li input[type=radio]:checked + label::after{ background-image:url("./img/icon/img_radio-on.svg"); }
    ul.rclist_02 li label .txt{ font-size: 14px; }
    
    /*-----  rclist_03 -----*/
    ul.rclist_03{ display:block; margin-top: 26px;}
    ul.rclist_03 li{ width:auto; display:block; margin:13px 0 0; border-radius:0px; background:#ffffff;}
    ul.rclist_03 li:nth-child(2n){ margin-right:0;}
    ul.rclist_03 li label{ padding:15.1px 47px; display:block; background-size:24px auto; box-sizing: border-box; font-size: 14px;}
    ul.rclist_03 li input[type=radio] + label{ background-image:url("./img/icon/img_radio-off.svg"); }
    /* on */
    ul.rclist_03 li input[type=radio]:checked + label{ background-image:url("./img/icon/img_radio-on.svg"); }
    
    /*-----  rclist_04 -----*/
    ul.rclist_04 li label{ display:inline-block; padding:10px 0 10px 35px; background-repeat:no-repeat; background-position:0 center; background-size:21px auto; }
    ul.rclist_04 li input[type=radio] + label{ background-image:url("./img/icon/img_radio-off.svg"); }
    /* on */
    ul.rclist_04 li.on input[type=radio] + label{ background-image:url("./img/icon/img_radio-on.svg"); }
    
    /*-----  inputarea_02 -----*/
    dl.inputarea_02{ width:100%; margin:0 0 14px; }
    dl.inputarea_02:last-child{ margin-bottom:0; }
    dl.inputarea_02 dt{ width:auto; float:none; padding:0; font-size:14px; font-weight:bold; }
    dl.inputarea_02 dd{ padding:0; }    
}

/*---------- SP版 ----------------------------------------------------------*/
@media screen and (max-width: 768px){ 
    
    /*===========================
      module
    ===========================*/
    /*  toppage
    ===========================*/
    .toppage{ margin-top:7px;}
    .toppage p {font-size: 14px;}
    .toppage .topimg img{max-height:228px; margin:0 0 52.7px; border-radius:0px; }
    .toppage .btn_area{ margin:23px 0 0; text-align: center; position: static; transform: translateX(0);}
    
    /*  btn_area
    ===========================*/
    .backlink{position: absolute; left:50%; transform: translateX(-50%); top:0;}
    
    /*  pagenav_line
    ===========================*/
    .pagenav_line{ margin:0 auto 20px; padding:0 0 0 0; width: 307px;}
    .pagenav_line ul{ padding:31px 0 0;}
    .pagenav_line ul li{ background:#fff;}
    .pagenav_line ul li.present::after,
    .pagenav_line ul li.present span{ display:none; }
    
    /*  faq_box
    ===========================*/
    .faq_box{ padding:0;}
    .faq_box .title{ margin:0px; font-size:18px;}
    .fashionpage .faq_box .title span {padding: 0;}
    .faq_box .title span::before{ display: none;}
    .faq_box .title span::after{ display:none;}       

    /*-----  rclist_02 -----*/
    ul.rclist_02 {max-width: 320px; margin: 0 auto;}
    ul.rclist_02 li{ box-shadow:0 0 10px 0 rgba(0,0,0,0.04); border-radius:0; width: 130px; aspect-ratio: 160/167; margin: 20px 10px 0;}
    ul.rclist_02 li label .img{border-radius:0; width: 100%; height: 95px; }
    ul.rclist_02 li label::after{ width:27px; height: 27px; top: 12px; right: 10px;}
    ul.rclist_02 li input[type=checkbox] + label::after{ background-image:url("../img/checkbox_off.svg"); }
    ul.rclist_02 li input[type=radio] + label::after{ background-image:url("./img/icon/img_radio-off.svg"); }

    /* on */
    ul.rclist_02 li input[type=checkbox]:checked + label::after{ background-image:url("../img/checkbox_on.svg"); }
    ul.rclist_02 li input[type=radio]:checked + label::after{ background-image:url("./img/icon/img_radio-on.svg"); }
    ul.rclist_02 li label .txt{ font-size: 14px;}

    /* 顔型 */
    /* ul.rclist_02.facetype li{width: 95px; aspect-ratio: 160/167; margin: 20px 2.5px;}
    ul.rclist_02.facetype li label::after{ width:17px; height: 17px; top: 5px; right: 5px;}
    ul.rclist_02.facetype li label .img{width: 100%; height: 70px;}
    ul.rclist_02.facetype li label .txt{ padding: 5px 5px;} */
    
    /*-----  rclist_03 -----*/
    ul.rclist_03 { margin-top: 0px;}
    ul.rclist_03 li{ margin:13px 0 0; background:#ffffff; box-sizing:border-box; overflow:hidden; position:relative; border-radius: 0;}
    .fashionpage ul.rclist_03 li {margin: 8px 0 0;}
    ul.rclist_03 li input[type=checkbox],
    ul.rclist_03 li input[type=radio]{ display:none; }
    ul.rclist_03 li label{ width:100%; display:block; padding:15.1px 47px; text-align:center; background-repeat:no-repeat; background-position:15px center; background-size:24px auto; box-sizing:border-box; font-size: 14px;}
    ul.rclist_03 li input[type=checkbox] + label{ background-image:url("../img/checkbox_off.svg"); }
    ul.rclist_03 li input[type=radio] + label{ background-image:url("./img/icon/img_radio-off.svg"); }
    /* on */
    ul.rclist_03 li input[type=checkbox]:checked + label{ background-image:url("../img/checkbox_on.svg"); }
    ul.rclist_03 li input[type=radio]:checked + label{ background-image:url("./img/icon/img_radio-on.svg"); }
    
    /*-----  rclist_04 -----*/
    ul.rclist_04 li input[type=checkbox] + label{ background-image:url("../img/checkbox_off.svg"); }
    ul.rclist_04 li input[type=radio] + label{ background-image:url("./img/icon/img_radio-off.svg"); }
    /* on */
    ul.rclist_04 li.on input[type=checkbox] + label{ background-image:url("../img/checkbox_on.svg"); }
    ul.rclist_04 li.on input[type=radio] + label{ background-image:url("./img/icon/img_radio-on.svg"); }

}

/*結果ページ*/
/* ========================================
  Arrow Mixin
  @param {String} $direction - Direction
  @param {Number} $width - Width
  @param {Number} $height - Height
  @param {Number} $border - Border
  @param {Color} $color - Color
  ex: @include arrow.arrow(upward, 20px, 20px, 2px, #333);
======================================== */
/* ========================================
  Aspect Ratio Mixin
  @param {Number} $width - Width
  @param {Number} $height - Height
  ex: @include aspect-ratio.aspect-ratio(16, 9);
======================================== */
/* ========================================
  Hover Mixin
  ex: @include hover.hover() {...}
======================================== */
/* ========================================
  Leading Trim Mixin
  @param {Number} $line-height - Line Height
  Note: You can use get-line-height function.
  ex: @include leading-trim.leading-trim(1.6);
======================================== */
/* ========================================
  Breakpoint Variables
  Note: These breakpoints are refered from Bootstrap.
  https://getbootstrap.com/docs/5.0/layout/breakpoints/
  ex: $breakpoints
======================================== */
/* ========================================
  Media Query Mixin
  @param {String} $breakpoint - Class infix like 'sm', 'md'
  Note: Check out a breakpoints file if you want to modify breakpoints.
  ex: @include media-query(md) {...}
======================================== */
/* ========================================
  Triangle Mixin
  @param {String} $direction - Direction
  @param {Number} $width - Width
  @param {Number} $height - Height
  @param {Color} $color - Color
  ex: @include triangle.triangle(upward, 20px, 20px, #333);
======================================== */
/* ========================================
  Underline Mixin
  @param {Color} $color - Color
  @param {Number} $height - Height
  ex: @include underline.underline(#ff6B00, 10px);
======================================== */
/* ========================================
  Visibility Hidden Mixin
  ex: @include visibility-hidden.visibility-hidden();
======================================== */
/* ========================================
  Strip-unit Function
  @param {Number} $number - Number to remove unit
  @return {Number} - Unitless number
  note: You can use this function in other functions and mixins.
  ex: strip-unit(100px); -> 100
======================================== */
/* ========================================
  Get Line Hight Function
  @param {Number} $font-size - Font size with px
  @param {Number} $line-feed - Line feed with no-unit
  @return {Number} $line-height - Line hight
  ex: get-line-height(16); -> 1.5
======================================== */
/* ========================================
  Font Size Variables
======================================== */
/* ========================================
  Get Rem Function
  @param {Number} $font-size - Number to convert px to rem
  @param {Number} $root-font-size - Number to divite target value by root's font size
  @return {Number} $rem - Number with rem unit
  ex: get-rem(16px); -> 1rem
======================================== */
/* ========================================
  Get Vw Function
  @param {Number} $px - Number to convert px to vw
  @param {Number} $viewport - Viewport size
  @return {Number} $vw - Number with vw unit
  ex: get-vw(30px); -> 8vw
======================================== */
/* ========================================
  Z-index Function
======================================== */
/* ========================================
  Color Variables
======================================== */
/* ========================================
  Font Variables
======================================== */
/* ========================================
  Transition Variables
======================================== */
/* ========================================
  Content Width Variables
======================================== */
/* ========================================
  Base
======================================== */
:root {
  --color-canvas-primary: #fff;
  --color-canvas-inverted: #202021;
  --color-brand-primary: #4da1ff;
  --color-brand-secondary: #1675e1;
  --color-brand-tertiary: #2e2e30;
  --color-brand-hard-active: #ef999c;
  --color-brand-matte-hard: #f0f0f0;
  --color-brand-air-matte: #8bb5a8;
  --color-brand-free-styler: #ebeaa0;
  --color-brand-gross-move: #97c4d7;
  --color-brand-hard-blast: #ab9cb5;
  --color-brand-dry-blast: #94bdb7;
  --color-brand-wet-blast: #8f9eac;
  --color-brand-the-gross: #e9ddb9;
  --color-brand-free-hard: #A7DAD4;
  --color-brand-oil-apple: #E7E7E7;
  --color-brand-oil-damage: #92B1D5;
  --color-text-primary: #000;
  --color-text-secondary: #999;
  --color-text-tertiary: #ccc;
  --color-text-inverted: #fff;
  --color-text-link: #4da1ff;
  --color-text-success: #00b533;
  --color-text-warn: #ffb700;
  --color-text-danger: #e71f18;
  --color-ui-primary: #4da1ff;
  --color-ui-secondary: #1675e1;
  --color-ui-tertiary: #2e2e30;
  --color-ui-success: #00b533;
  --color-ui-warn: #ffb700;
  --color-ui-danger: #ff2600;
  --color-ui-info: #f5f5f5;
  --font-size-xx-small: 0.625rem;
  --font-size-x-small: 0.75rem;
  --font-size-small: 0.875rem;
  --font-size-medium: 1rem;
  --font-size-large: 1.125rem;
  --font-size-x-large: 1.5rem;
  --font-size-xx-large: 1.75rem;
}

html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video {
  vertical-align: baseline;
  margin: 0;
  padding: 0;
  font-size: 100%;
  outline: 0;
  border: 0;
  background: transparent;
}

body {
  line-height: 1;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

nav ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote::before,
blockquote::after,
q::before,
q::after {
  content: "";
  content: none;
}

a {
  vertical-align: baseline;
  margin: 0;
  padding: 0;
  font-size: 100%;
  background: transparent;
}

/* change colours to suit your needs */
ins {
  text-decoration: none;
  background-color: #ff9;
  color: #000;
}

/* change colours to suit your needs */
mark {
  font-weight: bold;
  font-style: italic;
  background-color: #ff9;
  color: #000;
}

del {
  text-decoration: line-through;
}

abbr[title],
dfn[title] {
  border-bottom: 1px dotted;
  cursor: help;
}

table {
  border-spacing: 0;
  border-collapse: collapse;
}

/* change border colour to suit your needs */
hr {
  display: block;
  height: 1px;
  margin: 1em 0;
  padding: 0;
  border: 0;
  border-top: 1px solid #ccc;
}

input,
select {
  vertical-align: middle;
}

html {
  overflow-y: scroll;
  width: 100%;
  height: 100%;
  font-size: 16px;
  letter-spacing: 170%;
}

body,
input,
button,
select,
textarea {
  font-family: "Poppins", arial, "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", meiryo, sans-serif;
}

body {
  width: 100%;
  height: 100%;
  min-width: 320px;
  word-wrap: break-word;
  overflow-wrap: break-word;
  line-height: 1.6;
  background: #F9F9F9;
  color: var(--color-text-primary);
  font-feature-settings: "palt";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: 1.4;
}

img {
  vertical-align: top;
  max-width: 100%;
  height: auto;
}

label {
  cursor: pointer;
}

strong {
  font-weight: bold;
}

em {
  font-style: italic;
}

a {
  text-decoration: none;
  color: #4da1ff;
  transition: opacity 0.3s;
}

li {
  list-style: none;
}

/* ========================================
  Layout Container
======================================== */
.l-container {
  width: calc(100% - 64px);
  margin-right: auto;
  margin-left: auto;
}

/* ========================================
  Layout Footer
======================================== */
.l-footer__inner {
  max-width: 800px;
  margin-right: auto;
  margin-left: auto;
}

.p-footer__nav {
  display: flex;
  justify-content: center;
  row-gap: 8px;
  flex-direction: column;
}

.p-footer__nav-list-child {
  display: flex;
  justify-content: center;
}

.p-footer__nav-item a {
  display: block;
  line-height: 1;
  color: var(--color-text-primary);
  font-size: var(--font-size-x-small);
}
.p-footer__nav-item a::before {
  content: "|";
  margin: 0 min(2.1333333333vw, 8px);
  color: #efefef;
}

.p-footer__nav-item-wrapper:first-of-type .p-footer__nav-item:first-of-type a::before {
  content: none;
}

.p-footer__link {
  text-align: center;
  margin-top: 48px;
}
.p-footer__link a {
  display: flex;
  justify-content: center;

  img {
    width: 126px;
    height: 23px;
  }
}

.p-footer__copy {
  margin-top: 48px;
  background-color: var(--color-text-primary);
  color: var(--color-text-inverted);
  text-align: center;
  line-height: 1;
  padding: 10px 0;
  font-size: var(--font-size-x-small);
}

/* ========================================
  Layout Header
======================================== */
.l-header {
  z-index: 1;
}

.l-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 800px;
  margin-right: auto;
  margin-left: auto;
  padding: 16px;
}

.p-header__logo a {
  display: flex;
}

/* ========================================
  Layout Main
======================================== */
.l-main {
  padding: 0 0 26.6666666667vw;
}

/* ========================================
  Button
======================================== */
.c-btn, .c-btn-secondary, .c-btn-main {
  display: inline-flex;
  justify-content: center;
}
.c-btn a, .c-btn-secondary a, .c-btn-main a {
  width: 100%;
  padding: 0.85rem 1.5rem;
  text-align: center;
  text-decoration: none;
  font-size: 1.4rem;
  cursor: pointer;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  font-size: var(--font-size-medium);
  font-weight: 800;
}

.c-btn-main a {
  box-sizing: border-box;
  border: 2px solid transparent;
  background-color: var(--color-text-danger);
  color: #fff;
  transition: 0.3s;
  position: relative;
  overflow: hidden;
}
.c-btn-main a::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  background: #ffffff;
  width: 100%;
  height: 100%;
  transition: transform 0.6s cubic-bezier(0.8, 0, 0.2, 1) 0s;
  transform: scale(0, 1);
  transform-origin: right top;
}
.c-btn-main a:hover span {
  color: var(--color-text-danger);
  position: relative;
  z-index: 2;
}
.c-btn-main a:hover::before {
  transform-origin: left top;
  transform: scale(1, 1);
}

.c-btn-secondary a {
  box-sizing: border-box;
  border: 2px solid transparent;
  background-color: var(--color-text-primary);
  color: #fff;
  transition: 0.3s;
  font-weight: 800;
  position: relative;
}
.c-btn-secondary a::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  background: #ffffff;
  width: 100%;
  height: 100%;
  transition: transform 0.6s cubic-bezier(0.8, 0, 0.2, 1) 0s;
  transform: scale(0, 1);
  transform-origin: right top;
}
.c-btn-secondary a:hover span {
  color: var(--color-text-primary);
  position: relative;
  z-index: 2;
}
.c-btn-secondary a:hover::before {
  transform-origin: left top;
  transform: scale(1, 1);
}

/* ========================================
  Caption
======================================== */
.c-caption--center {
  text-align: center;
}

.c-caption--right {
  text-align: right;
}

.c-caption__txt {
  margin-top: 1rem;
  font-size: 1.4rem;
  font-weight: bold;
}

/* ========================================
  Caution
======================================== */
.c-caution {
  color: red;
}

/* ========================================
  Heading
======================================== */
.c-heading {
  color: var(--color-text-primary);
  line-height: 1;
  text-align: center;
}

.c-heading__en {
  font-size: 40px;
  line-height: 0.75;
  font-weight: 500;
}

.c-heading__ja {
  font-size: var(--font-size-small);
  line-height: 1;
  margin-top: 18px;
  font-weight: 400;
}

.c-heading--lev1 {
  font-size: 40px;
}

.c-heading--lev2 {
  font-size: 10.6666666667vw;
}

.c-heading--lev3 {
  font-size: 9.6vw;
}

.c-heading--lev4 {
  font-size: 8vw;
}

/* ========================================
  Icon
======================================== */
.c-icon {
  vertical-align: text-top;
  width: 1.2em;
  height: 1.2em;
}

.c-icon--before {
  margin-right: 0.5em;
}

.c-icon--after {
  margin-left: 0.5em;
}

.c-icon-bg--before {
  padding-left: 1.5em;
  line-height: 1.2em;
}

.c-icon-bg--after {
  display: inline-block;
  padding-right: 1.5em;
  line-height: 1.2em;
}

/* ========================================
  Iframe
======================================== */
.c-iframe {
  display: block;
  position: relative;
  overflow: hidden;
  height: 0;
  padding-bottom: 56.25%;
}
.c-iframe iframe,
.c-iframe embed,
.c-iframe object,
.c-iframe video {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ========================================
  Label
======================================== */
.c-label {
  display: inline-block;
  padding: 0.2em 0.3em;
  font-size: 1.2rem;
  font-weight: bold;
  background-color: #1675e1;
  color: #fff;
}

/* ========================================
  List
======================================== */
.c-bullet-list {
  list-style: none;
}

.c-bullet-list__item {
  position: relative;
  margin-bottom: 1rem;
  padding-left: 1em;
}
.c-bullet-list__item::before {
  content: "";
  display: block;
  position: absolute;
  top: 0.5em;
  left: 0;
  width: 0.4em;
  height: 0.4em;
  border-radius: 50%;
  background-color: #1675e1;
}
.c-bullet-list__item:last-child {
  margin-bottom: 0;
}

.c-order-list {
  counter-reset: c-order-list;
}

.c-order-list__item {
  position: relative;
  margin-bottom: 1rem;
  padding-left: 1em;
}
.c-order-list__item::before {
  content: counter(c-order-list) ". ";
  position: absolute;
  top: 0;
  left: 0;
  font-weight: bold;
  color: #1675e1;
  counter-increment: c-order-list;
}
.c-order-list__item:last-child {
  margin-bottom: 0;
}

/* ========================================
  Media
======================================== */

.c-media__img-wrapper {
  margin-bottom: 1rem;
}
.c-media__img-wrapper img {
  width: 100%;
}

.c-media__body {
  flex: 1 1;
}
.c-media__body > *:last-child {
  margin-bottom: 0;
}

.c-media__ttl {
  margin-bottom: 1.2rem;
  font-size: 1.8rem;
}

.c-media__txt {
  margin-bottom: 1rem;
}

/* ========================================
  Accordion
======================================== */
.p-accordion {
  max-width: 680px;
  margin-right: auto;
  margin-left: auto;
}

.p-accordion__btn {
  display: block;
  position: relative;
  width: 100%;
  margin: 0;
  padding: 5.3333333333vw 13.3333333333vw 5.3333333333vw 6.6666666667vw;
  text-align: left;
  font-size: 6.9333333333vw;
  outline: none;
  border: none;
  border-bottom: 1px solid #2d5996;
  background-color: #4da1ff;
  color: #fff;
  cursor: pointer;
}
.p-accordion__btn::before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  right: 1.5rem;
  width: 20px;
  height: 2px;
  background-color: currentcolor;
  transform: translateY(-50%);
}
.p-accordion__btn::after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  right: 2.4rem;
  width: 2px;
  height: 20px;
  background-color: currentcolor;
  transform: translateY(-50%);
}
.p-accordion__btn:focus, .p-accordion__btn:hover {
  background-color: #fff;
  color: #4da1ff;
}

.p-accordion__body {
  overflow: hidden;
  height: 0;
  padding: 0 6.6666666667vw;
  line-height: 0;
  opacity: 0;
  transition: padding 0.25s, opacity 0.25s;
}
.p-accordion__body > *:last-child {
  margin-bottom: 0;
}

.p-accordion__txt {
  margin-bottom: 8vw;
}

.is-accordion-active {
  border-bottom: none;
}
.is-accordion-active::after {
  content: none;
}

.is-accordion-open {
  height: auto;
  padding: 6.6666666667vw;
  line-height: normal;
  opacity: 1;
}

/* ========================================
  Banner
======================================== */
.p-bnr__list {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
}

.p-bnr__list-col2 {
  margin-bottom: -2rem;
}
.p-bnr__list-col2 .p-bnr__list-item {
  width: 100%;
  margin-right: 0;
  margin-bottom: 2rem;
}

.p-bnr__list-col3 {
  margin-bottom: -2rem;
}
.p-bnr__list-col3 .p-bnr__list-item {
  width: 100%;
  margin-right: 0;
  margin-bottom: 2rem;
}

.p-bnr__list-col4 {
  margin-bottom: -2rem;
}
.p-bnr__list-col4 .p-bnr__list-item {
  width: 100%;
  margin-right: 0;
  margin-bottom: 2rem;
}

.p-bnr__list-item img {
  width: 100%;
}

.p-bnr__list-link {
  opacity: 0.8;
}

/* ========================================
  Bread crumb
======================================== */
.p-bread-crumb {
  display: flex;
  max-width: 800px;
  margin-right: auto;
  margin-left: auto;
  list-style: none;
}

.p-bread-crumb__item {
  font-size: 1.2rem;
}
.p-bread-crumb__item:not(:first-child)::before {
  content: "＞";
  display: inline-block;
  padding: 0 1rem;
  color: #999;
}

.p-bread-crumb__link {
  color: #999;
}

/* ========================================
  Card
======================================== */
.p-card-wrapper {
  display: flex;
  flex-wrap: wrap;
}

.p-card__col2 {
  margin-bottom: -2rem;
}
.p-card__col2 .p-card {
  width: 100%;
  margin-right: 0;
  margin-bottom: 2rem;
}

.p-card__col3 {
  margin-bottom: -2rem;
}
.p-card__col3 .p-card {
  width: 100%;
  margin-right: 0;
  margin-bottom: 2rem;
}

.p-card {
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
}

.p-card__img-wrapper {
  position: relative;
  overflow: hidden;
  padding-top: 56.25%;
}
.p-card__img-wrapper img {
  position: absolute;
  top: 50%;
  width: 100%;
  transform: translateY(-50%);
}

.p-card__body {
  padding: 1.5rem;
}
.p-card__body > *:last-child {
  margin-bottom: 0;
}

.p-card__ttl {
  margin-bottom: 0.5rem;
  font-size: 1.8rem;
  font-weight: bold;
}

.p-card__txt {
  color: #000;
}

/* ========================================
  Table
======================================== */
.p-horizontal-table {
  border: 1px solid #ddd;
}
.p-horizontal-table table {
  width: 100%;
}
.p-horizontal-table th {
  vertical-align: middle;
  width: 20%;
  padding: 1.5rem;
  font-weight: bold;
  border-bottom: 1px solid #ddd;
  background-color: #ccc;
  color: #fff;
}
.p-horizontal-table td {
  padding: 1.5rem;
  border-bottom: 1px solid #ddd;
}
.p-horizontal-table tr:last-child th,
.p-horizontal-table tr:last-child td {
  border-bottom-width: 0;
}

.p-horizontal-table--scrollX {
  overflow-x: auto;
  border-right-width: 0;
}
.p-horizontal-table--scrollX td,
.p-horizontal-table--scrollX th {
  white-space: nowrap;
}
.p-horizontal-table--scrollX td {
  border-right: 1px solid #ddd;
}

.p-vert-table {
  overflow-x: auto;
  border: 1px solid #ddd;
  border-right-width: 0;
}
.p-vert-table table {
  width: auto;
  min-width: 100%;
  text-align: center;
  table-layout: fixed;
}
.p-vert-table thead tr {
  background-color: #ccc;
  color: #fff;
}
.p-vert-table th {
  vertical-align: middle;
  padding: 1.5rem;
  font-weight: bold;
  border-right: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
}
.p-vert-table td {
  vertical-align: middle;
  padding: 1.5rem;
  border-right: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
}
.p-vert-table th,
.p-vert-table td {
  white-space: nowrap;
}
.p-vert-table td:last-child,
.p-vert-table th:last-child {
  border-right-width: 1px;
}
.p-vert-table tbody tr:last-child td {
  border-bottom-width: 0;
}

.p-cross-table {
  overflow-x: auto;
  border: 1px solid #ddd;
  border-right-width: 0;
}
.p-cross-table table {
  width: auto;
  min-width: 100%;
  text-align: center;
  table-layout: fixed;
}
.p-cross-table th {
  vertical-align: middle;
  padding: 1.5rem;
  font-weight: bold;
  border-right: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  background-color: #ccc;
  color: #fff;
}
.p-cross-table td {
  vertical-align: middle;
  padding: 1.5rem;
  border-right: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
}
.p-cross-table th,
.p-cross-table td {
  white-space: nowrap;
}
.p-cross-table td:last-child,
.p-cross-table th:last-child {
  border-right-width: 1px;
}
.p-cross-table tbody tr:last-child td {
  border-bottom-width: 0;
}
.p-cross-table .p-cross-table--sticky {
  position: sticky;
  left: 0;
}

.p-result {
  padding-top: 24px;
  padding-bottom: 104px;
}

.p-result--hard-active {
  background-color: var(--color-brand-hard-active);
}

.p-result--matte-hard {
  background-color: var(--color-brand-matte-hard);
}

.p-result--air-matte {
  background-color: var(--color-brand-air-matte);
}

.p-result--free-styler {
  background-color: var(--color-brand-free-styler);
}

.p-result--gross-move {
  background-color: var(--color-brand-gross-move);
}

.p-result--hard-blast {
  background-color: var(--color-brand-hard-blast);
}

.p-result--dry-blast {
  background-color: var(--color-brand-dry-blast);
}

.p-result--wet-blast {
  background-color: var(--color-brand-wet-blast);
}

.p-result--the-gross {
  background-color: var(--color-brand-the-gross);
}

.p-result--free-hard {
  background-color: var(--color-brand-free-hard);
}

.p-result--oil-apple {
  background-color: var(--color-brand-oil-apple);
}

.p-result--oil-damage {
  background-color: var(--color-brand-oil-damage);
}

.p-result-style__heading {
  text-align: center;
  position: relative;
  display: flex;
  justify-content: center;

  img {
    width: 233px;
    max-width: 76px;
  }
}

.p-result-style__image {
  width: 100vw;
  margin: 0 calc(50% - 50vw);
  margin-top: -12px;
}
.p-result-style__image img {
  width: 100%;
}

.p-result-styling {
  padding-top: 104px;
}

.p-result-styling__unit {
  margin-top: 16px;
}

.p-result-style__sub-heading {
  text-align: center;
  font-size: var(--font-size-x-large);
  line-height: 1.5;
}
.p-result-style__sub-heading::before, .p-result-style__sub-heading::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
}
.p-result-style__sub-heading::before {
  /* prettier-ignore */
  margin-top: calc((1 - 1.5) * 0.5em);
}
.p-result-style__sub-heading::after {
  /* prettier-ignore */
  margin-bottom: calc((1 - 1.5) * 0.5em);
}

.p-result-styling__voice-unit, .p-result-styling__voice-unit--black {
  display: flex;
  flex-direction: column;
  row-gap: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--color-text-inverted);
  margin-top: 46px;
}

.p-result-styling__voice-unit--black {
  border-bottom: 1px solid var(--color-text-primary);
}

.p-result-style__en, .p-result-style__en--black {
  padding: 8px 0;
  color: var(--color-text-inverted);
  border-top: 1px solid var(--color-text-inverted);
  border-bottom: 1px solid var(--color-text-inverted);
  line-height: 1.7;
  font-weight: 800;
  font-size: var(--font-size-small);
}
.p-result-style__en::before, .p-result-style__en--black::before, .p-result-style__en::after, .p-result-style__en--black::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
}
.p-result-style__en::before, .p-result-style__en--black::before {
  /* prettier-ignore */
  margin-top: calc((1 - 1.7) * 0.5em);
}
.p-result-style__en::after, .p-result-style__en--black::after {
  /* prettier-ignore */
  margin-bottom: calc((1 - 1.7) * 0.5em);
}

.p-result-style__en--black {
  color: var(--color-text-primary);
  border-top: 1px solid var(--color-text-primary);
  border-bottom: 1px solid var(--color-text-primary);
}

.p-result-styling-card {
  display: flex;
  align-items: center;
  -moz-column-gap: 16px;
       column-gap: 16px;
}

.p-result-styling-card__inner {
  display: flex;
  flex-direction: column;
  row-gap: 12px;
}

.p-result-styling-card__position,
.p-result-styling-card__name {
  font-size: var(--font-size-small);
  line-height: 1;
}

.p-result-styling__copy {
  font-size: var(--font-size-medium);
  font-weight: 700;
  line-height: 170%;
}
.p-result-styling__copy::before, .p-result-styling__copy::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
}
.p-result-styling__copy::before {
  /* prettier-ignore */
  margin-top: calc((1 - 1.7) * 0.5em);
}
.p-result-styling__copy::after {
  /* prettier-ignore */
  margin-bottom: calc((1 - 1.7) * 0.5em);
}

.p-result-styling__txt {
  font-size: var(--font-size-small);
  line-height: 170%;
}
.p-result-styling__txt::before, .p-result-styling__txt::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
}
.p-result-styling__txt::before {
  /* prettier-ignore */
  margin-top: calc((1 - 1.7) * 0.5em);
}
.p-result-styling__txt::after {
  /* prettier-ignore */
  margin-bottom: calc((1 - 1.7) * 0.5em);
}

.p-result-product {
  padding-top: 40px;
}

.p-result-product__img {
  padding: 0 55px;
  text-align: center;
}

.p-result-product__unit {
  margin-top: -5px;
  padding: 40px 25px;
  background-color: var(--color-canvas-primary);
}

.p-result-product__unit-inner {
  max-width: 353px;
}

.p-result-product__body-unit {
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin-top: 24px;
}

.p-result-product__body-unit-inner {
  display: flex;
  flex-direction: column;
  row-gap: 16px;
  align-items: center;
}

.p-result-product__heading,
.p-result-product__detail {
  line-height: 1;
}

.p-result-product__heading {
  font-size: 22px;
  font-weight: 400;
  line-height: 1.4;
  text-align: center;
}
.p-result-product__heading::before, .p-result-product__heading::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
}
.p-result-product__heading::before {
  /* prettier-ignore */
  margin-top: calc((1 - 1.4) * 0.5em);
}
.p-result-product__heading::after {
  /* prettier-ignore */
  margin-bottom: calc((1 - 1.4) * 0.5em);
}

.p-result-product__detail {
  font-size: var(--font-size-small);
}

.p-result-product-spec {
  display: flex;
}

.p-result-product-spec__txt {
  display: flex;
  align-items: center;
  line-height: 1;
  font-size: var(--font-size-medium);
  min-width: 64px;
}

.p-result-product-spec__unit {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.p-result-product-spec__square-unit {
  display: flex;
  gap: 2px;
}

.p-result-product-spec__square {
  width: 16px;
  height: 16px;
  border: 1px solid var(--color-text-primary);
  box-sizing: border-box;
}

.p-result-product-spec__square--deco {
  background-color: var(--color-text-primary);
}

.p-result-product__txt {
  font-size: var(--font-size-small);
  line-height: 1.7;
}
.p-result-product__txt::before, .p-result-product__txt::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
}
.p-result-product__txt::before {
  /* prettier-ignore */
  margin-top: calc((1 - 1.7) * 0.5em);
}
.p-result-product__txt::after {
  /* prettier-ignore */
  margin-bottom: calc((1 - 1.7) * 0.5em);
}

.p-result-product__btn {
  margin-top: 40px;
}

.p-result-product-point {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 16px;

  img {
    width: 22px;
    height: 22px;
  }
}
.p-result-product-point svg {
  flex-shrink: 0;
}

.p-result-product-point__txt {
  line-height: 1.4;
  font-size: var(--font-size-small);
}
.p-result-product-point__txt::before, .p-result-product-point__txt::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
}
.p-result-product-point__txt::before {
  /* prettier-ignore */
  margin-top: calc((1 - 1.4) * 0.5em);
}
.p-result-product-point__txt::after {
  /* prettier-ignore */
  margin-bottom: calc((1 - 1.4) * 0.5em);
}

.p-result-product-point__txt-deco {
  color: var(--color-text-danger);
}

.p-result-styling-heading {
  text-align: center;
}

.p-result-styling-splide {
  margin-top: 48px;
  position: relative;
}
.p-result-styling-splide__item img {
  width: 100%;
}

.p-more {
  padding-top: 104px;
}

.p-more-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  max-width: 372px;
}

.p-more__body {
  margin-top: 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 64px;
}
.p-more__body > * {
  flex: 1 1;
}

.p-more-card__unit {
  display: flex;
  gap: 32px;
}

.p-more-card:last-of-type .p-more-card__img {
  max-width: 40px;
}

.p-more-card__img {
  max-width: 48px;
}
.p-more-card__img img {
  width: 100%;
}

.p-more-card__heading {
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
}

.p-more-card__txt {
  font-size: var(--font-size-small);
  line-height: 1.4;
  margin-top: 24px;
}
.p-more-card__txt::before, .p-more-card__txt::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
}
.p-more-card__txt::before {
  /* prettier-ignore */
  margin-top: calc((1 - 1.4) * 0.5em);
}
.p-more-card__txt::after {
  /* prettier-ignore */
  margin-bottom: calc((1 - 1.4) * 0.5em);
}

.p-series {
  padding-top: 104px;
}

.p-series__img {
  margin-top: 48px;
  width: calc(100% - 64px);
  margin-right: auto;
  margin-left: auto;
}
.p-series__img img {
  width: 100%;
}

.p-series-product__track {
  overflow: initial !important;
}

.p-series__list-wrapper {
  margin-top: 40px;
}

.p-series__list {
  /**
   * PCだけSplide を使うので、あえてmax-width で指定
   */
}

.p-series__item {
  /**
  * PCだけSplide を使うので、あえてmax-width で指定
  */
}

.p-series__splide-arrow {
  width: 64px !important;
  height: 64px !important;
  border-radius: 100% !important;
  border: 1px solid var(--color-text-primary) !important;

  img {
    width: 20px;
    height: 6px;
  }
}

.p-series__splide-arrow--prev {
  left: -6.25vw !important;
}

.p-series__splide-arrow--next {
  right: -6.25vw !important;
}

.p-series__splide-arrow svg {
  width: auto !important;
}

.c-product-card {
  max-width: 144px;
  transition: 0.4s;
}

.c-product-card__img {
  aspect-ratio: 1/1;
}
.c-product-card__img::after {
  content: "";
  width: 100%;
  height: 52px;
  background-color: var(--color-ui-info);
  display: block;
  margin-top: -50px;
}

.c-product-card__sub {
  color: var(--color-text-secondary);
}

.c-product-card__price {
  font-size: var(--font-size-medium);
}

.c-product-card__price-tax {
  font-size: var(--font-size-xx-small);
}

.c-product-card__heading {
  font-weight: 400;
  color: var(--color-text-primary);
}
.c-product-card__heading::before, .c-product-card__heading::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
}
.c-product-card__heading::before {
  /* prettier-ignore */
  margin-top: calc((1 - 1.4) * 0.5em);
}
.c-product-card__heading::after {
  /* prettier-ignore */
  margin-bottom: calc((1 - 1.4) * 0.5em);
}

.c-product-card__price,
.c-product-card__sub {
  line-height: 1;
}

.c-product-card__price {
  color: var(--color-text-primary);
}

.c-product-card__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 20px;
}

.p-share {
  padding-top: 104px;
}

.p-share__heading {
  text-align: center;
}

.p-share__heading-txt {
  display: inline-flex;
  flex-direction: column;
  font-size: 20px;
  font-weight: 400;
}

.p-share-sns {
  text-align: center;
  margin-top: 16px;
  height: 40px;
}

.p-share-sns__list {
  display: inline-flex;
  -moz-column-gap: 32px;
       column-gap: 32px;
  height: -moz-max-content;
  height: max-content;
}

.p-share-sns__item {
  aspect-ratio: 1/1;
}
.p-share-sns__item * {
  height: 40px;
  display: block;
}

.p-share__btn {
  margin-top: 48px;
  text-align: center;
}
.p-share__btn a {
  padding: 1.85rem 1.5rem;
}

.js-index-list {
  visibility: hidden;
  opacity: 0;
  transition: all 0.4s ease;
}
.js-index-list.is-active {
  visibility: visible;
  opacity: 1;
}

/* ========================================
  Display
======================================== */
.u-dsp-block {
  display: block;
}
.u-dsp-none {
  display: none;
}
.u-dsp-inline {
  display: inline;
}
.u-dsp-ib {
  display: inline-block;
}
.u-dsp-sp {
  display: block;
}
.u-dsp-pc {
  display: none;
}

/* ========================================
  Margin
======================================== */
.u-mt0 {
  margin-top: 0px;
}

.u-mt5 {
  margin-top: 5px;
}

.u-mt10 {
  margin-top: 10px;
}

.u-mt15 {
  margin-top: 15px;
}

.u-mt20 {
  margin-top: 20px;
}

.u-mt25 {
  margin-top: 25px;
}

.u-mt30 {
  margin-top: 30px;
}

.u-mt35 {
  margin-top: 35px;
}

.u-mt40 {
  margin-top: 40px;
}

.u-mt45 {
  margin-top: 45px;
}

.u-mt50 {
  margin-top: 50px;
}

.u-mt55 {
  margin-top: 55px;
}

.u-mt60 {
  margin-top: 60px;
}

.u-mt65 {
  margin-top: 65px;
}

.u-mt70 {
  margin-top: 70px;
}

.u-mt75 {
  margin-top: 75px;
}

.u-mt80 {
  margin-top: 80px;
}

.u-mt85 {
  margin-top: 85px;
}

.u-mt90 {
  margin-top: 90px;
}

.u-mt95 {
  margin-top: 95px;
}

.u-mt100 {
  margin-top: 100px;
}

.u-mt105 {
  margin-top: 105px;
}

.u-mt110 {
  margin-top: 110px;
}

.u-mt115 {
  margin-top: 115px;
}

.u-mt120 {
  margin-top: 120px;
}

.u-mt125 {
  margin-top: 125px;
}

.u-mt130 {
  margin-top: 130px;
}

.u-mt135 {
  margin-top: 135px;
}

.u-mt140 {
  margin-top: 140px;
}

.u-mt145 {
  margin-top: 145px;
}

.u-mt150 {
  margin-top: 150px;
}

.u-mt155 {
  margin-top: 155px;
}

.u-mt160 {
  margin-top: 160px;
}

.u-mt165 {
  margin-top: 165px;
}

.u-mt170 {
  margin-top: 170px;
}

.u-mt175 {
  margin-top: 175px;
}

.u-mt180 {
  margin-top: 180px;
}

.u-mt185 {
  margin-top: 185px;
}

.u-mt190 {
  margin-top: 190px;
}

.u-mt195 {
  margin-top: 195px;
}

.u-mt200 {
  margin-top: 200px;
}

.u-mt205 {
  margin-top: 205px;
}

.u-mt210 {
  margin-top: 210px;
}

.u-mt215 {
  margin-top: 215px;
}

.u-mt220 {
  margin-top: 220px;
}

.u-mt225 {
  margin-top: 225px;
}

.u-mt230 {
  margin-top: 230px;
}

.u-mt235 {
  margin-top: 235px;
}

.u-mt240 {
  margin-top: 240px;
}

.u-mt245 {
  margin-top: 245px;
}

.u-mt250 {
  margin-top: 250px;
}

.u-mt255 {
  margin-top: 255px;
}

.u-mt260 {
  margin-top: 260px;
}

.u-mt265 {
  margin-top: 265px;
}

.u-mt270 {
  margin-top: 270px;
}

.u-mt275 {
  margin-top: 275px;
}

.u-mt280 {
  margin-top: 280px;
}

.u-mt285 {
  margin-top: 285px;
}

.u-mt290 {
  margin-top: 290px;
}

.u-mt295 {
  margin-top: 295px;
}

.u-mt300 {
  margin-top: 300px;
}

.u-mb0 {
  margin-bottom: 0px;
}

.u-mb5 {
  margin-bottom: 5px;
}

.u-mb10 {
  margin-bottom: 10px;
}

.u-mb15 {
  margin-bottom: 15px;
}

.u-mb20 {
  margin-bottom: 20px;
}

.u-mb25 {
  margin-bottom: 25px;
}

.u-mb30 {
  margin-bottom: 30px;
}

.u-mb35 {
  margin-bottom: 35px;
}

.u-mb40 {
  margin-bottom: 40px;
}

.u-mb45 {
  margin-bottom: 45px;
}

.u-mb50 {
  margin-bottom: 50px;
}

.u-mb55 {
  margin-bottom: 55px;
}

.u-mb60 {
  margin-bottom: 60px;
}

.u-mb65 {
  margin-bottom: 65px;
}

.u-mb70 {
  margin-bottom: 70px;
}

.u-mb75 {
  margin-bottom: 75px;
}

.u-mb80 {
  margin-bottom: 80px;
}

.u-mb85 {
  margin-bottom: 85px;
}

.u-mb90 {
  margin-bottom: 90px;
}

.u-mb95 {
  margin-bottom: 95px;
}

.u-mb100 {
  margin-bottom: 100px;
}

.u-mb105 {
  margin-bottom: 105px;
}

.u-mb110 {
  margin-bottom: 110px;
}

.u-mb115 {
  margin-bottom: 115px;
}

.u-mb120 {
  margin-bottom: 120px;
}

.u-mb125 {
  margin-bottom: 125px;
}

.u-mb130 {
  margin-bottom: 130px;
}

.u-mb135 {
  margin-bottom: 135px;
}

.u-mb140 {
  margin-bottom: 140px;
}

.u-mb145 {
  margin-bottom: 145px;
}

.u-mb150 {
  margin-bottom: 150px;
}

.u-mb155 {
  margin-bottom: 155px;
}

.u-mb160 {
  margin-bottom: 160px;
}

.u-mb165 {
  margin-bottom: 165px;
}

.u-mb170 {
  margin-bottom: 170px;
}

.u-mb175 {
  margin-bottom: 175px;
}

.u-mb180 {
  margin-bottom: 180px;
}

.u-mb185 {
  margin-bottom: 185px;
}

.u-mb190 {
  margin-bottom: 190px;
}

.u-mb195 {
  margin-bottom: 195px;
}

.u-mb200 {
  margin-bottom: 200px;
}

.u-mb205 {
  margin-bottom: 205px;
}

.u-mb210 {
  margin-bottom: 210px;
}

.u-mb215 {
  margin-bottom: 215px;
}

.u-mb220 {
  margin-bottom: 220px;
}

.u-mb225 {
  margin-bottom: 225px;
}

.u-mb230 {
  margin-bottom: 230px;
}

.u-mb235 {
  margin-bottom: 235px;
}

.u-mb240 {
  margin-bottom: 240px;
}

.u-mb245 {
  margin-bottom: 245px;
}

.u-mb250 {
  margin-bottom: 250px;
}

.u-mb255 {
  margin-bottom: 255px;
}

.u-mb260 {
  margin-bottom: 260px;
}

.u-mb265 {
  margin-bottom: 265px;
}

.u-mb270 {
  margin-bottom: 270px;
}

.u-mb275 {
  margin-bottom: 275px;
}

.u-mb280 {
  margin-bottom: 280px;
}

.u-mb285 {
  margin-bottom: 285px;
}

.u-mb290 {
  margin-bottom: 290px;
}

.u-mb295 {
  margin-bottom: 295px;
}

.u-mb300 {
  margin-bottom: 300px;
}

.u-ml0 {
  margin-left: 0px;
}

.u-ml5 {
  margin-left: 5px;
}

.u-ml10 {
  margin-left: 10px;
}

.u-ml15 {
  margin-left: 15px;
}

.u-ml20 {
  margin-left: 20px;
}

.u-ml25 {
  margin-left: 25px;
}

.u-ml30 {
  margin-left: 30px;
}

.u-ml35 {
  margin-left: 35px;
}

.u-ml40 {
  margin-left: 40px;
}

.u-ml45 {
  margin-left: 45px;
}

.u-ml50 {
  margin-left: 50px;
}

.u-ml55 {
  margin-left: 55px;
}

.u-ml60 {
  margin-left: 60px;
}

.u-ml65 {
  margin-left: 65px;
}

.u-ml70 {
  margin-left: 70px;
}

.u-ml75 {
  margin-left: 75px;
}

.u-ml80 {
  margin-left: 80px;
}

.u-ml85 {
  margin-left: 85px;
}

.u-ml90 {
  margin-left: 90px;
}

.u-ml95 {
  margin-left: 95px;
}

.u-ml100 {
  margin-left: 100px;
}

.u-ml105 {
  margin-left: 105px;
}

.u-ml110 {
  margin-left: 110px;
}

.u-ml115 {
  margin-left: 115px;
}

.u-ml120 {
  margin-left: 120px;
}

.u-ml125 {
  margin-left: 125px;
}

.u-ml130 {
  margin-left: 130px;
}

.u-ml135 {
  margin-left: 135px;
}

.u-ml140 {
  margin-left: 140px;
}

.u-ml145 {
  margin-left: 145px;
}

.u-ml150 {
  margin-left: 150px;
}

.u-ml155 {
  margin-left: 155px;
}

.u-ml160 {
  margin-left: 160px;
}

.u-ml165 {
  margin-left: 165px;
}

.u-ml170 {
  margin-left: 170px;
}

.u-ml175 {
  margin-left: 175px;
}

.u-ml180 {
  margin-left: 180px;
}

.u-ml185 {
  margin-left: 185px;
}

.u-ml190 {
  margin-left: 190px;
}

.u-ml195 {
  margin-left: 195px;
}

.u-ml200 {
  margin-left: 200px;
}

.u-ml205 {
  margin-left: 205px;
}

.u-ml210 {
  margin-left: 210px;
}

.u-ml215 {
  margin-left: 215px;
}

.u-ml220 {
  margin-left: 220px;
}

.u-ml225 {
  margin-left: 225px;
}

.u-ml230 {
  margin-left: 230px;
}

.u-ml235 {
  margin-left: 235px;
}

.u-ml240 {
  margin-left: 240px;
}

.u-ml245 {
  margin-left: 245px;
}

.u-ml250 {
  margin-left: 250px;
}

.u-ml255 {
  margin-left: 255px;
}

.u-ml260 {
  margin-left: 260px;
}

.u-ml265 {
  margin-left: 265px;
}

.u-ml270 {
  margin-left: 270px;
}

.u-ml275 {
  margin-left: 275px;
}

.u-ml280 {
  margin-left: 280px;
}

.u-ml285 {
  margin-left: 285px;
}

.u-ml290 {
  margin-left: 290px;
}

.u-ml295 {
  margin-left: 295px;
}

.u-ml300 {
  margin-left: 300px;
}

.u-mr0 {
  margin-right: 0px;
}

.u-mr5 {
  margin-right: 5px;
}

.u-mr10 {
  margin-right: 10px;
}

.u-mr15 {
  margin-right: 15px;
}

.u-mr20 {
  margin-right: 20px;
}

.u-mr25 {
  margin-right: 25px;
}

.u-mr30 {
  margin-right: 30px;
}

.u-mr35 {
  margin-right: 35px;
}

.u-mr40 {
  margin-right: 40px;
}

.u-mr45 {
  margin-right: 45px;
}

.u-mr50 {
  margin-right: 50px;
}

.u-mr55 {
  margin-right: 55px;
}

.u-mr60 {
  margin-right: 60px;
}

.u-mr65 {
  margin-right: 65px;
}

.u-mr70 {
  margin-right: 70px;
}

.u-mr75 {
  margin-right: 75px;
}

.u-mr80 {
  margin-right: 80px;
}

.u-mr85 {
  margin-right: 85px;
}

.u-mr90 {
  margin-right: 90px;
}

.u-mr95 {
  margin-right: 95px;
}

.u-mr100 {
  margin-right: 100px;
}

.u-mr105 {
  margin-right: 105px;
}

.u-mr110 {
  margin-right: 110px;
}

.u-mr115 {
  margin-right: 115px;
}

.u-mr120 {
  margin-right: 120px;
}

.u-mr125 {
  margin-right: 125px;
}

.u-mr130 {
  margin-right: 130px;
}

.u-mr135 {
  margin-right: 135px;
}

.u-mr140 {
  margin-right: 140px;
}

.u-mr145 {
  margin-right: 145px;
}

.u-mr150 {
  margin-right: 150px;
}

.u-mr155 {
  margin-right: 155px;
}

.u-mr160 {
  margin-right: 160px;
}

.u-mr165 {
  margin-right: 165px;
}

.u-mr170 {
  margin-right: 170px;
}

.u-mr175 {
  margin-right: 175px;
}

.u-mr180 {
  margin-right: 180px;
}

.u-mr185 {
  margin-right: 185px;
}

.u-mr190 {
  margin-right: 190px;
}

.u-mr195 {
  margin-right: 195px;
}

.u-mr200 {
  margin-right: 200px;
}

.u-mr205 {
  margin-right: 205px;
}

.u-mr210 {
  margin-right: 210px;
}

.u-mr215 {
  margin-right: 215px;
}

.u-mr220 {
  margin-right: 220px;
}

.u-mr225 {
  margin-right: 225px;
}

.u-mr230 {
  margin-right: 230px;
}

.u-mr235 {
  margin-right: 235px;
}

.u-mr240 {
  margin-right: 240px;
}

.u-mr245 {
  margin-right: 245px;
}

.u-mr250 {
  margin-right: 250px;
}

.u-mr255 {
  margin-right: 255px;
}

.u-mr260 {
  margin-right: 260px;
}

.u-mr265 {
  margin-right: 265px;
}

.u-mr270 {
  margin-right: 270px;
}

.u-mr275 {
  margin-right: 275px;
}

.u-mr280 {
  margin-right: 280px;
}

.u-mr285 {
  margin-right: 285px;
}

.u-mr290 {
  margin-right: 290px;
}

.u-mr295 {
  margin-right: 295px;
}

.u-mr300 {
  margin-right: 300px;
}

/* ========================================
  New Line
======================================== */
.u-newLine-pc::before {
  content: none;
}

.u-newLine-sp::before {
  content: "\a";
  white-space: pre;
}

.u-newLine-no {
  white-space: nowrap;
}

/* ========================================
  Padding
======================================== */
.u-pt0 {
  padding-top: 0px;
}

.u-pt5 {
  padding-top: 5px;
}

.u-pt10 {
  padding-top: 10px;
}

.u-pt15 {
  padding-top: 15px;
}

.u-pt20 {
  padding-top: 20px;
}

.u-pt25 {
  padding-top: 25px;
}

.u-pt30 {
  padding-top: 30px;
}

.u-pt35 {
  padding-top: 35px;
}

.u-pt40 {
  padding-top: 40px;
}

.u-pt45 {
  padding-top: 45px;
}

.u-pt50 {
  padding-top: 50px;
}

.u-pt55 {
  padding-top: 55px;
}

.u-pt60 {
  padding-top: 60px;
}

.u-pt65 {
  padding-top: 65px;
}

.u-pt70 {
  padding-top: 70px;
}

.u-pt75 {
  padding-top: 75px;
}

.u-pt80 {
  padding-top: 80px;
}

.u-pt85 {
  padding-top: 85px;
}

.u-pt90 {
  padding-top: 90px;
}

.u-pt95 {
  padding-top: 95px;
}

.u-pt100 {
  padding-top: 100px;
}

.u-pt105 {
  padding-top: 105px;
}

.u-pt110 {
  padding-top: 110px;
}

.u-pt115 {
  padding-top: 115px;
}

.u-pt120 {
  padding-top: 120px;
}

.u-pt125 {
  padding-top: 125px;
}

.u-pt130 {
  padding-top: 130px;
}

.u-pt135 {
  padding-top: 135px;
}

.u-pt140 {
  padding-top: 140px;
}

.u-pt145 {
  padding-top: 145px;
}

.u-pt150 {
  padding-top: 150px;
}

.u-pt155 {
  padding-top: 155px;
}

.u-pt160 {
  padding-top: 160px;
}

.u-pt165 {
  padding-top: 165px;
}

.u-pt170 {
  padding-top: 170px;
}

.u-pt175 {
  padding-top: 175px;
}

.u-pt180 {
  padding-top: 180px;
}

.u-pt185 {
  padding-top: 185px;
}

.u-pt190 {
  padding-top: 190px;
}

.u-pt195 {
  padding-top: 195px;
}

.u-pt200 {
  padding-top: 200px;
}

.u-pt205 {
  padding-top: 205px;
}

.u-pt210 {
  padding-top: 210px;
}

.u-pt215 {
  padding-top: 215px;
}

.u-pt220 {
  padding-top: 220px;
}

.u-pt225 {
  padding-top: 225px;
}

.u-pt230 {
  padding-top: 230px;
}

.u-pt235 {
  padding-top: 235px;
}

.u-pt240 {
  padding-top: 240px;
}

.u-pt245 {
  padding-top: 245px;
}

.u-pt250 {
  padding-top: 250px;
}

.u-pt255 {
  padding-top: 255px;
}

.u-pt260 {
  padding-top: 260px;
}

.u-pt265 {
  padding-top: 265px;
}

.u-pt270 {
  padding-top: 270px;
}

.u-pt275 {
  padding-top: 275px;
}

.u-pt280 {
  padding-top: 280px;
}

.u-pt285 {
  padding-top: 285px;
}

.u-pt290 {
  padding-top: 290px;
}

.u-pt295 {
  padding-top: 295px;
}

.u-pt300 {
  padding-top: 300px;
}

.u-pb0 {
  padding-bottom: 0px;
}

.u-pb5 {
  padding-bottom: 5px;
}

.u-pb10 {
  padding-bottom: 10px;
}

.u-pb15 {
  padding-bottom: 15px;
}

.u-pb20 {
  padding-bottom: 20px;
}

.u-pb25 {
  padding-bottom: 25px;
}

.u-pb30 {
  padding-bottom: 30px;
}

.u-pb35 {
  padding-bottom: 35px;
}

.u-pb40 {
  padding-bottom: 40px;
}

.u-pb45 {
  padding-bottom: 45px;
}

.u-pb50 {
  padding-bottom: 50px;
}

.u-pb55 {
  padding-bottom: 55px;
}

.u-pb60 {
  padding-bottom: 60px;
}

.u-pb65 {
  padding-bottom: 65px;
}

.u-pb70 {
  padding-bottom: 70px;
}

.u-pb75 {
  padding-bottom: 75px;
}

.u-pb80 {
  padding-bottom: 80px;
}

.u-pb85 {
  padding-bottom: 85px;
}

.u-pb90 {
  padding-bottom: 90px;
}

.u-pb95 {
  padding-bottom: 95px;
}

.u-pb100 {
  padding-bottom: 100px;
}

.u-pb105 {
  padding-bottom: 105px;
}

.u-pb110 {
  padding-bottom: 110px;
}

.u-pb115 {
  padding-bottom: 115px;
}

.u-pb120 {
  padding-bottom: 120px;
}

.u-pb125 {
  padding-bottom: 125px;
}

.u-pb130 {
  padding-bottom: 130px;
}

.u-pb135 {
  padding-bottom: 135px;
}

.u-pb140 {
  padding-bottom: 140px;
}

.u-pb145 {
  padding-bottom: 145px;
}

.u-pb150 {
  padding-bottom: 150px;
}

.u-pb155 {
  padding-bottom: 155px;
}

.u-pb160 {
  padding-bottom: 160px;
}

.u-pb165 {
  padding-bottom: 165px;
}

.u-pb170 {
  padding-bottom: 170px;
}

.u-pb175 {
  padding-bottom: 175px;
}

.u-pb180 {
  padding-bottom: 180px;
}

.u-pb185 {
  padding-bottom: 185px;
}

.u-pb190 {
  padding-bottom: 190px;
}

.u-pb195 {
  padding-bottom: 195px;
}

.u-pb200 {
  padding-bottom: 200px;
}

.u-pb205 {
  padding-bottom: 205px;
}

.u-pb210 {
  padding-bottom: 210px;
}

.u-pb215 {
  padding-bottom: 215px;
}

.u-pb220 {
  padding-bottom: 220px;
}

.u-pb225 {
  padding-bottom: 225px;
}

.u-pb230 {
  padding-bottom: 230px;
}

.u-pb235 {
  padding-bottom: 235px;
}

.u-pb240 {
  padding-bottom: 240px;
}

.u-pb245 {
  padding-bottom: 245px;
}

.u-pb250 {
  padding-bottom: 250px;
}

.u-pb255 {
  padding-bottom: 255px;
}

.u-pb260 {
  padding-bottom: 260px;
}

.u-pb265 {
  padding-bottom: 265px;
}

.u-pb270 {
  padding-bottom: 270px;
}

.u-pb275 {
  padding-bottom: 275px;
}

.u-pb280 {
  padding-bottom: 280px;
}

.u-pb285 {
  padding-bottom: 285px;
}

.u-pb290 {
  padding-bottom: 290px;
}

.u-pb295 {
  padding-bottom: 295px;
}

.u-pb300 {
  padding-bottom: 300px;
}

.u-pl0 {
  padding-left: 0px;
}

.u-pl5 {
  padding-left: 5px;
}

.u-pl10 {
  padding-left: 10px;
}

.u-pl15 {
  padding-left: 15px;
}

.u-pl20 {
  padding-left: 20px;
}

.u-pl25 {
  padding-left: 25px;
}

.u-pl30 {
  padding-left: 30px;
}

.u-pl35 {
  padding-left: 35px;
}

.u-pl40 {
  padding-left: 40px;
}

.u-pl45 {
  padding-left: 45px;
}

.u-pl50 {
  padding-left: 50px;
}

.u-pl55 {
  padding-left: 55px;
}

.u-pl60 {
  padding-left: 60px;
}

.u-pl65 {
  padding-left: 65px;
}

.u-pl70 {
  padding-left: 70px;
}

.u-pl75 {
  padding-left: 75px;
}

.u-pl80 {
  padding-left: 80px;
}

.u-pl85 {
  padding-left: 85px;
}

.u-pl90 {
  padding-left: 90px;
}

.u-pl95 {
  padding-left: 95px;
}

.u-pl100 {
  padding-left: 100px;
}

.u-pl105 {
  padding-left: 105px;
}

.u-pl110 {
  padding-left: 110px;
}

.u-pl115 {
  padding-left: 115px;
}

.u-pl120 {
  padding-left: 120px;
}

.u-pl125 {
  padding-left: 125px;
}

.u-pl130 {
  padding-left: 130px;
}

.u-pl135 {
  padding-left: 135px;
}

.u-pl140 {
  padding-left: 140px;
}

.u-pl145 {
  padding-left: 145px;
}

.u-pl150 {
  padding-left: 150px;
}

.u-pl155 {
  padding-left: 155px;
}

.u-pl160 {
  padding-left: 160px;
}

.u-pl165 {
  padding-left: 165px;
}

.u-pl170 {
  padding-left: 170px;
}

.u-pl175 {
  padding-left: 175px;
}

.u-pl180 {
  padding-left: 180px;
}

.u-pl185 {
  padding-left: 185px;
}

.u-pl190 {
  padding-left: 190px;
}

.u-pl195 {
  padding-left: 195px;
}

.u-pl200 {
  padding-left: 200px;
}

.u-pl205 {
  padding-left: 205px;
}

.u-pl210 {
  padding-left: 210px;
}

.u-pl215 {
  padding-left: 215px;
}

.u-pl220 {
  padding-left: 220px;
}

.u-pl225 {
  padding-left: 225px;
}

.u-pl230 {
  padding-left: 230px;
}

.u-pl235 {
  padding-left: 235px;
}

.u-pl240 {
  padding-left: 240px;
}

.u-pl245 {
  padding-left: 245px;
}

.u-pl250 {
  padding-left: 250px;
}

.u-pl255 {
  padding-left: 255px;
}

.u-pl260 {
  padding-left: 260px;
}

.u-pl265 {
  padding-left: 265px;
}

.u-pl270 {
  padding-left: 270px;
}

.u-pl275 {
  padding-left: 275px;
}

.u-pl280 {
  padding-left: 280px;
}

.u-pl285 {
  padding-left: 285px;
}

.u-pl290 {
  padding-left: 290px;
}

.u-pl295 {
  padding-left: 295px;
}

.u-pl300 {
  padding-left: 300px;
}

.u-pr0 {
  padding-right: 0px;
}

.u-pr5 {
  padding-right: 5px;
}

.u-pr10 {
  padding-right: 10px;
}

.u-pr15 {
  padding-right: 15px;
}

.u-pr20 {
  padding-right: 20px;
}

.u-pr25 {
  padding-right: 25px;
}

.u-pr30 {
  padding-right: 30px;
}

.u-pr35 {
  padding-right: 35px;
}

.u-pr40 {
  padding-right: 40px;
}

.u-pr45 {
  padding-right: 45px;
}

.u-pr50 {
  padding-right: 50px;
}

.u-pr55 {
  padding-right: 55px;
}

.u-pr60 {
  padding-right: 60px;
}

.u-pr65 {
  padding-right: 65px;
}

.u-pr70 {
  padding-right: 70px;
}

.u-pr75 {
  padding-right: 75px;
}

.u-pr80 {
  padding-right: 80px;
}

.u-pr85 {
  padding-right: 85px;
}

.u-pr90 {
  padding-right: 90px;
}

.u-pr95 {
  padding-right: 95px;
}

.u-pr100 {
  padding-right: 100px;
}

.u-pr105 {
  padding-right: 105px;
}

.u-pr110 {
  padding-right: 110px;
}

.u-pr115 {
  padding-right: 115px;
}

.u-pr120 {
  padding-right: 120px;
}

.u-pr125 {
  padding-right: 125px;
}

.u-pr130 {
  padding-right: 130px;
}

.u-pr135 {
  padding-right: 135px;
}

.u-pr140 {
  padding-right: 140px;
}

.u-pr145 {
  padding-right: 145px;
}

.u-pr150 {
  padding-right: 150px;
}

.u-pr155 {
  padding-right: 155px;
}

.u-pr160 {
  padding-right: 160px;
}

.u-pr165 {
  padding-right: 165px;
}

.u-pr170 {
  padding-right: 170px;
}

.u-pr175 {
  padding-right: 175px;
}

.u-pr180 {
  padding-right: 180px;
}

.u-pr185 {
  padding-right: 185px;
}

.u-pr190 {
  padding-right: 190px;
}

.u-pr195 {
  padding-right: 195px;
}

.u-pr200 {
  padding-right: 200px;
}

.u-pr205 {
  padding-right: 205px;
}

.u-pr210 {
  padding-right: 210px;
}

.u-pr215 {
  padding-right: 215px;
}

.u-pr220 {
  padding-right: 220px;
}

.u-pr225 {
  padding-right: 225px;
}

.u-pr230 {
  padding-right: 230px;
}

.u-pr235 {
  padding-right: 235px;
}

.u-pr240 {
  padding-right: 240px;
}

.u-pr245 {
  padding-right: 245px;
}

.u-pr250 {
  padding-right: 250px;
}

.u-pr255 {
  padding-right: 255px;
}

.u-pr260 {
  padding-right: 260px;
}

.u-pr265 {
  padding-right: 265px;
}

.u-pr270 {
  padding-right: 270px;
}

.u-pr275 {
  padding-right: 275px;
}

.u-pr280 {
  padding-right: 280px;
}

.u-pr285 {
  padding-right: 285px;
}

.u-pr290 {
  padding-right: 290px;
}

.u-pr295 {
  padding-right: 295px;
}

.u-pr300 {
  padding-right: 300px;
}

/* ========================================
  Shame リファクタリングを前提とするコード
  https://csswizardry.com/2013/04/shame-css/
======================================== */
/* ==========================================================================
  Print
  http://www.phpied.com/delay-loading-your-print-css/
========================================================================== */
.splide__container {
  box-sizing: border-box;
  position: relative;
}

.splide__list {
  backface-visibility: hidden;
  display: flex;
  height: 100%;
}

.splide.is-initialized:not(.is-active) .splide__list {
  display: block;
}

.splide__pagination {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0;
  pointer-events: none;
}

.splide__pagination li {
  display: inline-block;
  line-height: 1;
  list-style-type: none;
  margin: 0;
  pointer-events: auto;
}

.splide:not(.is-overflow) .splide__pagination {
  display: none;
}

.splide__progress__bar {
  width: 0;
}

.splide {
  position: relative;
  visibility: hidden;
}

.splide.is-initialized,
.splide.is-rendered {
  visibility: visible;
}

.splide__slide {
  backface-visibility: hidden;
  box-sizing: border-box;
  flex-shrink: 0;
  list-style-type: none !important;
  margin: 0;
  position: relative;
}

.splide__slide img {
  vertical-align: bottom;
}

.splide__spinner {
  animation: splide-loading 1s linear infinite;
  border: 2px solid #999;
  border-left-color: transparent;
  border-radius: 50%;
  bottom: 0;
  contain: strict;
  display: inline-block;
  height: 20px;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0;
  width: 20px;
}

.splide__sr {
  clip: rect(0 0 0 0);
  border: 0;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

.splide__toggle.is-active .splide__toggle__play,
.splide__toggle__pause {
  display: none;
}

.splide__toggle.is-active .splide__toggle__pause {
  display: inline;
}

.splide__track {
  overflow: hidden;
  position: relative;
  z-index: 0;
}

@keyframes splide-loading {
  0% {
    transform: rotate(0);
  }
  to {
    transform: rotate(1turn);
  }
}
.splide__track--draggable {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
       user-select: none;
}

.splide__track--fade > .splide__list > .splide__slide {
  margin: 0 !important;
  opacity: 0;
  z-index: 0;
}

.splide__track--fade > .splide__list > .splide__slide.is-active {
  opacity: 1;
  z-index: 1;
}

.splide--rtl {
  direction: rtl;
}

.splide__track--ttb > .splide__list {
  display: block;
}

.splide__arrow {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  height: 2em;
  justify-content: center;
  opacity: 0.7;
  padding: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2em;
  z-index: 1;
}

.splide__arrow img {
  fill: #000;
  height: auto;
}

.splide__arrow:hover:not(:disabled) {
  opacity: 0.9;
}

.splide__arrow:disabled {
  opacity: 0.3;
}

.splide__arrow:focus-visible {
  outline: 3px solid #0bf;
  outline-offset: 3px;
}

.splide__arrow--prev {
  left: 16px;
}

.splide__arrow--prev img {
  transform: scaleX(-1);
}

.splide__arrow--next {
  right: 16px;
}

.splide.is-focus-in .splide__arrow:focus {
  outline: 3px solid #0bf;
  outline-offset: 3px;
}

.splide__pagination {
  bottom: 0.5em;
  left: 0;
  padding: 0 1em;
  position: absolute;
  right: 0;
  z-index: 1;
}

.splide__pagination__page {
  background: #ccc;
  border: 0;
  border-radius: 50%;
  display: inline-block;
  height: 8px;
  margin: 3px;
  opacity: 0.7;
  padding: 0;
  position: relative;
  transition: transform 0.2s linear;
  width: 8px;
}

.splide__pagination__page.is-active {
  background: #fff;
  transform: scale(1.4);
  z-index: 1;
}

.splide__pagination__page:hover {
  cursor: pointer;
  opacity: 0.9;
}

.splide__pagination__page:focus-visible {
  outline: 3px solid #0bf;
  outline-offset: 3px;
}

.splide.is-focus-in .splide__pagination__page:focus {
  outline: 3px solid #0bf;
  outline-offset: 3px;
}

.splide__progress__bar {
  background: #ccc;
  height: 3px;
}

.splide__slide {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.splide__slide:focus {
  outline: 0;
}

@supports (outline-offset: -3px) {
  .splide__slide:focus-visible {
    outline: 3px solid #0bf;
    outline-offset: -3px;
  }
}
@supports (outline-offset: -3px) {
  .splide.is-focus-in .splide__slide:focus {
    outline: 3px solid #0bf;
    outline-offset: -3px;
  }
}
.splide__toggle {
  cursor: pointer;
}

.splide__toggle:focus-visible {
  outline: 3px solid #0bf;
  outline-offset: 3px;
}

.splide.is-focus-in .splide__toggle:focus {
  outline: 3px solid #0bf;
  outline-offset: 3px;
}

.splide__track--nav > .splide__list > .splide__slide {
  border: 3px solid transparent;
  cursor: pointer;
}

.splide__track--nav > .splide__list > .splide__slide.is-active {
  border: 3px solid #000;
}

.splide__arrows--rtl .splide__arrow--prev {
  left: auto;
  right: 1em;
}

.splide__arrows--rtl .splide__arrow--prev img {
  transform: scaleX(1);
}

.splide__arrows--rtl .splide__arrow--next {
  left: 1em;
  right: auto;
}

.splide__arrows--rtl .splide__arrow--next img {
  transform: scaleX(-1);
}

.splide__arrows--ttb .splide__arrow {
  left: 50%;
  transform: translate(-50%);
}

.splide__arrows--ttb .splide__arrow--prev {
  top: 1em;
}

.splide__arrows--ttb .splide__arrow--prev img {
  transform: rotate(-90deg);
}

.splide__arrows--ttb .splide__arrow--next {
  bottom: 1em;
  top: auto;
}

.splide__arrows--ttb .splide__arrow--next img {
  transform: rotate(90deg);
}

.splide__pagination--ttb {
  bottom: 0;
  display: flex;
  flex-direction: column;
  left: auto;
  padding: 1em 0;
  right: 0.5em;
  top: 0;
}

@media screen and (min-width: 768px){
  .l-container {
    max-width: 800px;
  }
  .p-footer__nav {
    flex-direction: row;
  }
  .p-footer__nav-list-child {
    display: contents;
  }
  .p-footer__nav-item a {
    font-size: var(--font-size-small);
  }
  .p-footer__nav-item-wrapper {
    display: flex;
  }
  .l-header__inner {
    padding: 16px 0;
  }
  .l-main {
    padding: 0 0 100px;
  }
  .c-btn, .c-btn-secondary, .c-btn-main {
    max-width: initial;
    width: 100%;
  }
  .c-btn a, .c-btn-secondary a, .c-btn-main a {
    font-size: var(--font-size-medium);
  }
  .c-heading--lev1 {
    font-size: 3.8rem;
  }
  .c-heading--lev2 {
    font-size: 3rem;
  }
  .c-heading--lev3 {
    font-size: 2.6rem;
  }
  .c-heading--lev4 {
    font-size: 2rem;
  }
  .c-media {
    display: flex;
    align-items: center;
  }
  .c-media__img-wrapper {
    flex: 0 1 48.4%;
    margin-right: 3.3333333333%;
    margin-bottom: 0;
  }
  .c-media--rev {
    flex-direction: row-reverse;
  }
  .c-media--rev .c-media__img-wrapper {
    margin-right: 0;
  }
  .c-media--rev .c-media__body {
    margin-right: 3.3333333333%;
  }
  .p-accordion__btn {
    padding: 1rem 4rem 1rem 1.5rem;
    font-size: 1.6rem;
  }
  .p-accordion__body {
    padding: 0 1.5rem;
  }
  .p-accordion__txt {
    margin-bottom: 2rem;
  }
  .is-accordion-open {
    padding: 1.5rem;
  }
  .p-bnr__list-col2 {
    margin-bottom: -1.5rem;
  }
  .p-bnr__list-col2 .p-bnr__list-item {
    width: 49.375%;
    margin-right: 1.25%;
    margin-bottom: 1.5rem;
  }
  .p-bnr__list-col2 .p-bnr__list-item:nth-of-type(2n) {
    margin-right: 0;
  }
  .p-bnr__list-col3 {
    margin-bottom: -1.5rem;
  }
  .p-bnr__list-col3 .p-bnr__list-item {
    width: 32.5%;
    margin-right: 1.25%;
    margin-bottom: 1.5rem;
  }
  .p-bnr__list-col3 .p-bnr__list-item:nth-of-type(3n) {
    margin-right: 0;
  }
  .p-bnr__list-col4 {
    margin-bottom: -1.5rem;
  }
  .p-bnr__list-col4 .p-bnr__list-item {
    width: 24.0625%;
    margin-right: 1.25%;
    margin-bottom: 1.5rem;
  }
  .p-bnr__list-col4 .p-bnr__list-item:nth-of-type(4n) {
    margin-right: 0;
  }
  .p-bread-crumb__item {
    font-size: 1.4rem;
  }
  .p-card__col2 {
    margin-bottom: -3rem;
  }
  .p-card__col2 .p-card {
    width: 48.75%;
    margin-right: 2.5%;
    margin-bottom: 3rem;
  }
  .p-card__col2 .p-card:nth-of-type(2n) {
    margin-right: 0;
  }
  .p-card__col3 {
    margin-bottom: -3rem;
  }
  .p-card__col3 .p-card {
    width: 31.6666666667%;
    margin-right: 2.5%;
    margin-bottom: 3rem;
  }
  .p-card__col3 .p-card:nth-of-type(3n) {
    margin-right: 0;
  }
  .p-vert-table table {
    width: 100%;
  }
  .p-vert-table th,
  .p-vert-table td {
    white-space: pre-wrap;
  }
  .p-vert-table td:last-child,
  .p-vert-table th:last-child {
    border-right-width: 0;
  }
  .p-cross-table table {
    width: 100%;
  }
  .p-cross-table th,
  .p-cross-table td {
    white-space: pre-wrap;
  }
  .p-cross-table td:last-child,
  .p-cross-table th:last-child {
    border-right-width: 0;
  }
  .p-cross-table .p-cross-table--sticky {
    position: static;
  }
  .p-result {
    padding-top: 76px;
    padding-bottom: 144px;
  }
  .p-result-style__body {
    display: flex;
    align-items: center;
    gap: 56px;
    margin-top: -14px;
  }
  .p-result-style__body > * {
    flex: 1 1;
  }
  .p-result-style__image {
    width: 100%;
    margin: initial;
  }
  .p-result-styling__unit {
    margin-top: 0;
  }
  .p-result-style__sub-heading {
    text-align: initial;
  }
  .p-result-styling__voice-unit, .p-result-styling__voice-unit--black {
    margin-top: 40px;
  }
  .p-result-product {
    padding-top: 56px;
  }
  .p-result-product__img {
    padding: 0;
  }
  .p-result-product__unit {
    display: flex;
    gap: 72px;
    padding: 64px 72px;
  }
  .p-result-product__unit > * + * {
    flex: 1 1;
  }
  .p-result-product__body-unit {
    align-items: flex-start;
    margin-top: 0;
  }
  .p-result-product__body-unit-inner {
    align-items: flex-start;
  }
  .p-result-product__heading {
    font-size: var(--font-size-x-large);
    text-align: initial;
  }
  .p-result-product-spec:last-of-type .p-result-product-spec__txt {
    min-width: 64px;
  }
  .p-result-product-spec__unit {
    flex-direction: row;
    flex-wrap: wrap;
    row-gap: 16px;
    -moz-column-gap: 42px;
         column-gap: 42px;
  }
  .p-result-product-point {
    align-items: center;
  }
  .p-result-styling-splide__item {
    max-width: 311px;
  }
  .p-more {
    padding-top: 144px;
  }
  .p-more-card {
    gap: 35px;
  }
  .p-more__body {
    gap: 56px;
    flex-direction: row;
    align-items: flex-end;
  }
  .p-series__img {
    max-width: 640px;
    margin-right: auto;
    margin-left: auto;
  }
  .p-series-product__track {
    overflow: hidden !important;
  }
  .p-series__list-wrapper {
    max-width: 1196px;
    width: calc(100% - 64px);
    margin-right: auto;
    margin-left: auto;
    margin-top: 64px;
  }
  .c-product-card {
    max-width: initial;
  }
  .c-product-card__img img {
    width: 100%;
  }
  .p-share__btn a {
    max-width: 311px;
  }
  .u-dsp-sp {
    display: none;
  }
  .u-dsp-pc {
    display: block;
  }
  .u-newLine-pc::before {
    content: "\a";
    white-space: pre;
  }
  .u-newLine-sp::before {
    content: none;
  }
  .splide__arrow {
    position: relative;
    top: initial;
    transform: initial;
  }
  .splide__arrow--prev {
    left: initial;
  }
  .splide__arrow--next {
    left: initial;
    right: initial;
  }
  .splide__arrows {
    max-width: 975px;
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

@media screen and (min-width: 576px){
  .c-bullet-list--horiz {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: -1rem;
  }
  .c-bullet-list--horiz .c-bullet-list__item {
    flex: calc(50% - 2.5rem) 1;
    margin-right: 1rem;
  }
  .c-bullet-list--horiz .c-bullet-list__item:nth-of-type(even) {
    margin-right: 0;
  }
}

@media screen and (max-width: 768px){
  .p-series__list {
    display: flex !important;
    gap: 16px;
    overflow-x: scroll;
    overflow-y: hidden;
    margin-top: 40px;
    padding-left: 32px;
    padding-right: 32px;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .p-series__list::-webkit-scrollbar {
    display: none;
  }
  .p-series__list > * {
    flex: 1 0 auto;
  }
  .p-series__item {
    max-width: 144px;
  }
}

@media (hover: hover) and (pointer: fine){
  .c-product-card:hover {
    opacity: 0.7;
  }
}

@media print{
  *,
  *::before,
  *::after {
    text-shadow: none !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #000 !important;
  }
  a,
  a:visited {
    text-decoration: underline;
  }
  a[href]::after {
    content: " (" attr(href) ")";
  }
  abbr[title]::after {
    content: " (" attr(title) ")";
  }
  /*
   * Don't show links that are fragment identifiers,
   * or use the `javascript:` pseudo protocol
   */
  a[href^="#"]::after,
  a[href^="javascript:"]::after {
    content: "";
  }
  pre {
    white-space: pre-wrap !important;
  }
  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }
  /*
   * Printing Tables:
   * http://css-discuss.incutio.com/wiki/Printing_Tables
   */
  thead {
    display: table-header-group;
  }
  tr,
  img {
    page-break-inside: avoid;
  }
  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }
  h2,
  h3 {
    page-break-after: avoid;
  }
}

@media screen and (-ms-high-contrast: none){
  .splide__slide:focus-visible {
    border: 3px solid #0bf;
  }
  .splide.is-focus-in .splide__slide:focus {
    border: 3px solid #0bf;
  }
  .splide.is-focus-in .splide__track > .splide__list > .splide__slide:focus {
    border-color: #0bf;
  }
}