/*! destyle.css v2.0.2 | MIT License | https://github.com/nicolas-cusan/destyle.css */

/* Reset box-model and set borders */
/* ============================================ */

*,
::before,
::after {
  box-sizing: border-box;
  border-style: solid;
  border-width: 0;
}

/* Document */
/* ============================================ */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 * 3. Remove gray overlay on links for iOS.
 */

html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -webkit-tap-highlight-color: transparent; /* 3*/
}

/* Sections */
/* ============================================ */

/**
 * Remove the margin in all browsers.
 */

body {
  margin: 0;
  overflow-x: hidden !important;
}

/**
 * Render the `main` element consistently in IE.
 */

main {
  display: block;
}

/* Vertical rhythm */
/* ============================================ */

p,
table,
blockquote,
address,
pre,
iframe,
form,
figure,
dl {
  margin: 0;
}

/* Headings */
/* ============================================ */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
  margin: 0;
}

/* Lists (enumeration) */
/* ============================================ */

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Lists (definition) */
/* ============================================ */

dt {
  font-weight: bold;
}

dd {
  margin-left: 0;
}

/* Grouping content */
/* ============================================ */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
  border-top-width: 1px;
  margin: 0;
  clear: both;
  color: inherit;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: inherit; /* 2 */
}

address {
  font-style: inherit;
}

/* Text-level semantics */
/* ============================================ */

/**
 * Remove the gray background on active links in IE 10.
 */

a {
  background-color: transparent;
  text-decoration: none;
  color: inherit;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: inherit; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content */
/* ============================================ */

/**
 * Prevent vertical alignment issues.
 */

img,
embed,
object,
iframe {
  vertical-align: bottom;
}

/* Forms */
/* ============================================ */

/**
 * Reset form fields to make them styleable
 */

button,
input,
optgroup,
select,
textarea {
  -webkit-appearance: none;
  appearance: none;
  vertical-align: middle;
  color: inherit;
  font: inherit;
  background: transparent;
  padding: 0;
  margin: 0;
  outline: 0;
  border-radius: 0;
  text-align: inherit;
}

/**
 * Reset radio and checkbox appearance to preserve their look in iOS.
 */

[type="checkbox"] {
  -webkit-appearance: checkbox;
  appearance: checkbox;
}

[type="radio"] {
  -webkit-appearance: radio;
  appearance: radio;
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input {
  /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select {
  /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

button[disabled],
[type="button"][disabled],
[type="reset"][disabled],
[type="submit"][disabled] {
  cursor: default;
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Remove arrow in IE10 & IE11
 */

select::-ms-expand {
  display: none;
}

/**
 * Remove padding
 */

option {
  padding: 0;
}

/**
 * Reset to invisible
 */

fieldset {
  margin: 0;
  padding: 0;
  min-width: 0;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */

textarea {
  overflow: auto;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the outline style in Safari.
 */

[type="search"] {
  outline-offset: -2px; /* 1 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/**
 * Clickable labels
 */

label[for] {
  cursor: pointer;
}

/* Interactive */
/* ============================================ */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */

details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

/*
 * Remove outline for editable content.
 */

[contenteditable] {
  outline: none;
}

/* Table */
/* ============================================ */

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

caption {
  text-align: left;
}

td,
th {
  vertical-align: top;
  padding: 0;
}

th {
  text-align: left;
  font-weight: bold;
}

/* Misc */
/* ============================================ */

/**
 * Add the correct display in IE 10+.
 */

template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */

[hidden] {
  display: none;
}

/* main */

* {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: normal;
  color: #1a1a1a;
  font-size: 16px;
}

.of_hidden_x {
  overflow-x: hidden;
}
.of_hidden {
  overflow: hidden;
}
.of_auto {
  overflow: auto;
}
.block {
  display: block;
}
.inline_block {
  display: inline-block;
}
.no {
  display: none;
}
.flex {
  display: flex;
}
.jc_center {
  justify-content: center;
}
.jc_start {
  justify-content: flex-start;
}
.jc_end {
  justify-content: flex-end;
}
.jc_between {
  justify-content: space-between;
}
.jc_around {
  justify-content: space-around;
}
.ai_center {
  align-items: center;
}
.ai_start {
  align-items: flex-start;
}
.ai_end {
  align-items: flex-end;
}
.ai_base {
  align-items: baseline;
}
.fd_column {
  flex-direction: column;
}
.fd_row {
  flex-direction: row;
}
.fd_row_r {
  flex-direction: row-reverse;
}
.as_start {
  align-self: flex-start;
}
.as_center {
  align-self: center;
}
.as_end {
  align-self: flex-end;
}
.fw {
  flex-wrap: wrap;
}
.fw_r {
  flex-wrap: wrap-reverse;
}

.static {
  position: static;
}
.fixed {
  position: fixed;
}
.relative {
  position: relative;
}
.absolute {
  position: absolute;
}
.top50 {
  top: 50%;
}
.left50 {
  left: 50%;
}
.right50 {
  right: 50%;
}
.bottom50 {
  bottom: 50%;
}
.top0 {
  top: 0%;
}
.left0 {
  left: 0%;
}
.right0 {
  right: 0%;
}
.right5 {
  right: 5%;
}
.right10 {
  right: 10%;
}
.bottom0 {
  bottom: 0%;
}
.position_middle {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.position_middle_product_img {
  top: 50%;
  transform: translateY(-25%);
}
.position_bottom50_y {
  transform: translateY(50%);
}
.position_bottom40_y {
  transform: translateY(40%);
}

.w250 {
  width: 250px;
}
.w100 {
  width: 100%;
}
.h100 {
  height: 100%;
}
.w95 {
  width: 95%;
}
.h95 {
  height: 95%;
}
.w90 {
  width: 90%;
}
.h90 {
  height: 90%;
}
.w85 {
  width: 85%;
}
.h85 {
  height: 85%;
}
.w80 {
  width: 80%;
}
.h80 {
  height: 80%;
}
.w75 {
  width: 75%;
}
.vw75 {
  width: 75vw;
}
.h75 {
  height: 75%;
}
.w70 {
  width: 70%;
}
.w65 {
  width: 65%;
}
.h65 {
  height: 65%;
}
.w60 {
  width: 60%;
}
.h60 {
  height: 60%;
}
.w55 {
  width: 55%;
}
.w50 {
  width: 50%;
}
.vw50 {
  width: 50vw;
}
.h50 {
  height: 50%;
}
.w48 {
  width: 48%;
}
.w46 {
  width: 46%;
}
.w45 {
  width: 45%;
}
.w40 {
  width: 40%;
}
.h40 {
  height: 40%;
}
.w35 {
  width: 35%;
}
.w30 {
  width: 30%;
}
.w25 {
  width: 25%;
}
.w20 {
  width: 20%;
}
.w15 {
  width: 15%;
}
.w10 {
  width: 10%;
}
.w5 {
  width: 5%;
}

.w0 {
  width: 0%;
}
.h0 {
  height: 0%;
}
.w_auto {
  width: auto;
}
.h_auto {
  height: auto;
}

.mw-100 {
  max-width: 100% !important;
}
.mw-1680px {
  max-width: 1680px !important;
}
.mw-1580px {
  max-width: 1580px !important;
}
.mw-1560px {
  max-width: 1560px !important;
}
.mw-1480px {
  max-width: 1480px !important;
}
.mw-1380px {
  max-width: 1380px !important;
}
.mw-1320px {
  max-width: 1320px !important;
}
.mw-1300px {
  max-width: 1300px !important;
}
.mw-1280px {
  max-width: 1280px !important;
}
.mw-1240px {
  max-width: 1240px !important;
}
.mw-1200px {
  max-width: 1200px !important;
}
.mw-1180px {
  max-width: 1180px !important;
}
.mw-1100px {
  max-width: 1100px !important;
}
.mw-1080px {
  max-width: 1080px !important;
}
.mw-1000px {
  max-width: 1000px !important;
}
.mw-980px {
  max-width: 980px !important;
}
.mw-920px {
  max-width: 920px !important;
}
.mw-900px {
  max-width: 900px !important;
}
.mw-840px {
  max-width: 840px !important;
}
.mw-800px {
  max-width: 800px !important;
}
.mw-300px {
  max-width: 300px !important;
}
.mw-520px {
  max-width: 520px !important;
}
.min-w-1180px {
  min-width: 1180px !important;
}
.min-w-1080px {
  min-width: 1080px !important;
}
.min-w-1000px {
  min-width: 1000px !important;
}
.min-w-960px {
  min-width: 960px !important;
}
.min-w-600px {
  min-width: 600px !important;
}
.min-w-520px {
  min-width: 520px !important;
}
.vw-100 {
  width: 100vw !important;
}
.min-vw-100 {
  min-width: 100vw !important;
}
.min-h-90px {
  min-height: 90px !important;
}
.min-h-60px {
  min-height: 60px !important;
}

.mw-660 {
  max-width: 660px;
}
.mw-468 {
  max-width: 468px;
}
.ws_no {
  white-space: nowrap;
}

.ml_auto {
  margin-left: auto;
}
.mt_auto {
  margin-top: auto;
}
.mr_auto {
  margin-right: auto;
}
.mb_auto {
  margin-bottom: auto;
}

.noto {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: normal;
}
.exo {
  font-family: "Exo", sans-serif;
  font-style: italic;
}
.italic {
  font-style: italic;
}
.extra_bold {
  font-weight: 800;
}
.bold {
  font-weight: 700;
}
.semi_bold {
  font-weight: 600;
}
.medium {
  font-weight: 500;
}
.normal {
  font-weight: 400;
}
.light {
  font-weight: 300;
}
.thin {
  font-weight: 100;
}

.f_12 {
  font-size: 12px;
}
.f_14 {
  font-size: 14px;
}
.f_16 {
  font-size: 16px;
}
.f_18 {
  font-size: 18px;
}
.f_20 {
  font-size: 20px;
}
.f_22 {
  font-size: 22px;
}
.f_24 {
  font-size: 24px;
}
.f_26 {
  font-size: 26px;
}
.f_28 {
  font-size: 28px;
}
.f_29 {
  font-size: 29px;
}
.f_30 {
  font-size: 30px;
}
.f_32 {
  font-size: 32px;
}
.f_33 {
  font-size: 33px;
}
.f_36 {
  font-size: 36px;
}
.f_38 {
  font-size: 38px;
}
.f_40 {
  font-size: 40px;
}
.f_42 {
  font-size: 42px;
}
.f_44 {
  font-size: 44px;
}
.f_46 {
  font-size: 46px;
}
.f_48 {
  font-size: 48px;
}
.f_50 {
  font-size: 50px;
}
.f_58 {
  font-size: 58px;
}
.f_60 {
  font-size: 60px;
}
.f_64 {
  font-size: 64px;
}
.f_75 {
  font-size: 75px;
}
.f_80 {
  font-size: 80px;
}
.f_82 {
  font-size: 82px;
}
.f_84 {
  font-size: 84px;
}
.f_86 {
  font-size: 86px;
}
.f_88 {
  font-size: 88px;
}
.f_90 {
  font-size: 90px;
}
.f_100 {
  font-size: 100px;
}
.f_111 {
  font-size: 111px;
}
.f_115 {
  font-size: 115px;
}
.f_118 {
  font-size: 118px;
}
.f_120 {
  font-size: 120px;
}
.f_122 {
  font-size: 122px;
}
.f_124 {
  font-size: 124px;
}
.f_126 {
  font-size: 126px;
}
.f_128 {
  font-size: 128px;
}
.f_130 {
  font-size: 130px;
}
.f_132 {
  font-size: 132px;
}
.f_134 {
  font-size: 134px;
}
.f_136 {
  font-size: 136px;
}
.f_138 {
  font-size: 138px;
}
.f_140 {
  font-size: 140px;
}
.f_142 {
  font-size: 142px;
}
.f_164 {
  font-size: 164px;
}

.f_alpha {
  font-size: 1.25em;
}

.ls_normal {
  letter-spacing: normal;
}
.ls_m5 {
  letter-spacing: -5px;
}
.ls_m30 {
  letter-spacing: -30px;
}
.ls_50 {
  letter-spacing: 0.05em;
}
.ls_80 {
  letter-spacing: 0.08em;
}
.ls_100 {
  letter-spacing: 0.1em;
}
.ls_120 {
  letter-spacing: 0.12em;
}
.ls_200 {
  letter-spacing: 0.2em;
}
.ls_330 {
  letter-spacing: 0.33em;
}

.lh_06 {
  line-height: 0.6;
}
.lh_08 {
  line-height: 0.8;
}
.lh_10 {
  line-height: 1;
}
.lh_1 {
  line-height: 1.6;
}
.lh_125 {
  line-height: 1.25;
}
.lh_133 {
  line-height: 1.33;
}
.lh_15 {
  line-height: 1.5;
}
.lh_175 {
  line-height: 1.75;
}
.lh_20 {
  line-height: 2;
}
.lh_2 {
  line-height: 2.2;
}
.lh_208 {
  line-height: 2.08;
}
.lh_25 {
  line-height: 2.5;
}
.lh_3 {
  line-height: 3;
}
.lh_35 {
  line-height: 3.5;
}
.lh_4 {
  line-height: 4;
}

.txt_left {
  text-align: left;
}
.txt_center {
  text-align: center;
}
.txt_right {
  text-align: right;
}

.m-1 {
  margin: 0.25rem !important;
}

.m-2 {
  margin: 0.5rem !important;
}

.m-3 {
  margin: 1rem !important;
}

.m-4 {
  margin: 1.5rem !important;
}

.m-5 {
  margin: 3rem !important;
}

.m-auto {
  margin: auto !important;
}

.mx-0 {
  margin-right: 0 !important;
  margin-left: 0 !important;
}

.mx-1 {
  margin-right: 0.25rem !important;
  margin-left: 0.25rem !important;
}

.mx-2 {
  margin-right: 0.5rem !important;
  margin-left: 0.5rem !important;
}

.mx-3 {
  margin-right: 1rem !important;
  margin-left: 1rem !important;
}

.mx-4 {
  margin-right: 1.5rem !important;
  margin-left: 1.5rem !important;
}

.mx-5 {
  margin-right: 3rem !important;
  margin-left: 3rem !important;
}

.mx-auto {
  margin-right: auto !important;
  margin-left: auto !important;
}

.my-0 {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.my-1 {
  margin-top: 0.25rem !important;
  margin-bottom: 0.25rem !important;
}

.my-2 {
  margin-top: 0.5rem !important;
  margin-bottom: 0.5rem !important;
}

.my-3 {
  margin-top: 1rem !important;
  margin-bottom: 1rem !important;
}

.my-4 {
  margin-top: 1.5rem !important;
  margin-bottom: 1.5rem !important;
}

.my-5 {
  margin-top: 3rem !important;
  margin-bottom: 3rem !important;
}
.my-7 {
  margin-top: 4rem !important;
  margin-bottom: 4rem !important;
}
.my-9 {
  margin-top: 5rem !important;
  margin-bottom: 5rem !important;
}
.my-13 {
  margin-top: 8rem !important;
  margin-bottom: 8rem !important;
}
.my-15 {
  margin-top: 9rem !important;
  margin-bottom: 9rem !important;
}

.my-auto {
  margin-top: auto !important;
  margin-bottom: auto !important;
}

.mt-0 {
  margin-top: 0 !important;
}

.mt-1 {
  margin-top: 0.25rem !important;
}

.mt-2 {
  margin-top: 0.5rem !important;
}

.mt-3 {
  margin-top: 1rem !important;
}

.mt-4 {
  margin-top: 1.5rem !important;
}

.mt-5 {
  margin-top: 3rem !important;
}
.mt-7 {
  margin-top: 4rem !important;
}
.mt-9 {
  margin-top: 5rem !important;
}
.mt-10 {
  margin-top: 6.5rem !important;
}
.mt-12 {
  margin-top: 7.5rem !important;
}
.mt-15 {
  margin-top: 9rem !important;
}
.mt-20 {
  margin-top: 12rem !important;
}
.mt-25 {
  margin-top: 15rem !important;
}
.mt-30 {
  margin-top: 18rem !important;
}
.mt-32 {
  margin-top: 19rem !important;
}

.mt-auto {
  margin-top: auto !important;
}

.me-0 {
  margin-right: 0 !important;
}

.me-1 {
  margin-right: 0.25rem !important;
}

.me-2 {
  margin-right: 0.5rem !important;
}

.me-3 {
  margin-right: 1rem !important;
}

.me-4 {
  margin-right: 1.5rem !important;
}

.me-5 {
  margin-right: 3rem !important;
}
.me-7 {
  margin-right: 4rem !important;
}
.me-10 {
  margin-right: 6rem !important;
}

.me-auto {
  margin-right: auto !important;
}

.mb-0 {
  margin-bottom: 0 !important;
}

.mb-1 {
  margin-bottom: 0.25rem !important;
}

.mb-2 {
  margin-bottom: 0.5rem !important;
}

.mb-3 {
  margin-bottom: 1rem !important;
}

.mb-4 {
  margin-bottom: 1.5rem !important;
}

.mb-5 {
  margin-bottom: 3rem !important;
}
.mb-6 {
  margin-bottom: 3.5rem !important;
}
.mb-7 {
  margin-bottom: 4rem !important;
}
.mb-8 {
  margin-bottom: 4.5rem !important;
}
.mb-10 {
  margin-bottom: 5.5rem !important;
}

.mb-auto {
  margin-bottom: auto !important;
}

.ms-0 {
  margin-left: 0 !important;
}

.ms-1 {
  margin-left: 0.25rem !important;
}

.ms-2 {
  margin-left: 0.5rem !important;
}

.ms-3 {
  margin-left: 1rem !important;
}

.ms-4 {
  margin-left: 1.5rem !important;
}

.ms-5 {
  margin-left: 3rem !important;
}
.ms-7 {
  margin-left: 4rem !important;
}
.ms-10 {
  margin-left: 6rem !important;
}
.ms-30 {
  margin-left: 18rem !important;
}

.ms-auto {
  margin-left: auto !important;
}

.p-0 {
  padding: 0 !important;
}

.p-1 {
  padding: 0.25rem !important;
}

.p-2 {
  padding: 0.5rem !important;
}

.p-3 {
  padding: 1rem !important;
}

.p-4 {
  padding: 1.5rem !important;
}

.p-5 {
  padding: 3rem !important;
}

.px-0 {
  padding-right: 0 !important;
  padding-left: 0 !important;
}

.px-1 {
  padding-right: 0.25rem !important;
  padding-left: 0.25rem !important;
}

.px-2 {
  padding-right: 0.5rem !important;
  padding-left: 0.5rem !important;
}

.px-3 {
  padding-right: 1rem !important;
  padding-left: 1rem !important;
}

.px-4 {
  padding-right: 1.5rem !important;
  padding-left: 1.5rem !important;
}
.px-4_2 {
  padding-right: 2rem !important;
  padding-left: 2rem !important;
}
.px-4_25 {
  padding-right: 2.5rem !important;
  padding-left: 2.5rem !important;
}

.px-5 {
  padding-right: 3rem !important;
  padding-left: 3rem !important;
}
.px-6 {
  padding-right: 3.5rem !important;
  padding-left: 3.5rem !important;
}
.px-7 {
  padding-right: 4rem !important;
  padding-left: 4rem !important;
}
.px-8 {
  padding-right: 4.5rem !important;
  padding-left: 4.5rem !important;
}
.px-9 {
  padding-right: 5rem !important;
  padding-left: 5rem !important;
}
.px-10 {
  padding-right: 5.5rem !important;
  padding-left: 5.5rem !important;
}
.px-11 {
  padding-right: 6rem !important;
  padding-left: 6rem !important;
}

.py-0 {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.py-1 {
  padding-top: 0.25rem !important;
  padding-bottom: 0.25rem !important;
}

.py-2 {
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}

.py-3 {
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
}

.py-4 {
  padding-top: 1.5rem !important;
  padding-bottom: 1.5rem !important;
}

.py-5 {
  padding-top: 3rem !important;
  padding-bottom: 3rem !important;
}
.py-6 {
  padding-top: 3.5rem !important;
  padding-bottom: 3.5rem !important;
}
.py-7 {
  padding-top: 4rem !important;
  padding-bottom: 4rem !important;
}
.py-8 {
  padding-top: 4.5rem !important;
  padding-bottom: 4.5rem !important;
}
.py-9 {
  padding-top: 5rem !important;
  padding-bottom: 5rem !important;
}
.py-10 {
  padding-top: 6rem !important;
  padding-bottom: 6rem !important;
}
.py-12 {
  padding-top: 7rem !important;
  padding-bottom: 7rem !important;
}
.py-15 {
  padding-top: 9rem !important;
  padding-bottom: 9rem !important;
}

.pt-0 {
  padding-top: 0 !important;
}

.pt-05 {
  padding-top: 0.125rem !important;
}
.pt-1 {
  padding-top: 0.25rem !important;
}

.pt-2 {
  padding-top: 0.5rem !important;
}

.pt-3 {
  padding-top: 1rem !important;
}

.pt-4 {
  padding-top: 1.5rem !important;
}

.pt-5 {
  padding-top: 3rem !important;
}
.pt-6 {
  padding-top: 3.5rem !important;
}
.pt-7 {
  padding-top: 4rem !important;
}
.pt-8 {
  padding-top: 4.5rem !important;
}
.pt-9 {
  padding-top: 5rem !important;
}
.pt-10 {
  padding-top: 6rem !important;
}
.pt-15 {
  padding-top: 9rem !important;
}
.pt-17 {
  padding-top: 10rem !important;
}
.pt-32 {
  padding-top: 19rem !important;
}

.pe-0 {
  padding-right: 0 !important;
}
.pe-1 {
  padding-right: 0.25rem !important;
}
.pe-2 {
  padding-right: 0.5rem !important;
}
.pe-3 {
  padding-right: 1rem !important;
}
.pe-28 {
  padding-right: 16rem !important;
}
.pe-29 {
  padding-right: 16.5rem !important;
}
.pe-30 {
  padding-right: 18rem !important;
}
.pe-4 {
  padding-right: 1.5rem !important;
}
.pe-5 {
  padding-right: 3rem !important;
}
.pe-6 {
  padding-right: 3.5rem !important;
}
.pe-8 {
  padding-right: 4.5rem !important;
}
.pe-9 {
  padding-right: 5rem !important;
}
.pe-10 {
  padding-right: 5.5rem !important;
}
.pe-35 {
  padding-right: 21rem !important;
}
.pb-0 {
  padding-bottom: 0 !important;
}
.pb-1 {
  padding-bottom: 0.25rem !important;
}
.pb-2 {
  padding-bottom: 0.5rem !important;
}
.pb-3 {
  padding-bottom: 1rem !important;
}
.pb-4 {
  padding-bottom: 1.5rem !important;
}
.pb-05 {
  padding-bottom: 2rem !important;
}
.pb-5 {
  padding-bottom: 3rem !important;
}
.pb-6 {
  padding-bottom: 3.5rem !important;
}
.pb-7 {
  padding-bottom: 4rem !important;
}
.pb-9 {
  padding-bottom: 5rem !important;
}
.pb-10 {
  padding-bottom: 6rem !important;
}
.pb-12 {
  padding-bottom: 7rem !important;
}
.pb-13 {
  padding-bottom: 7.5rem !important;
}
.pb-14 {
  padding-bottom: 8rem !important;
}
.pb-15 {
  padding-bottom: 9.5rem !important;
}
.pb-20 {
  padding-bottom: 12rem !important;
}
.pb-25 {
  padding-bottom: 14.5rem !important;
}
.pb-30 {
  padding-bottom: 17rem !important;
}
.ps-0 {
  padding-left: 0 !important;
}
.ps-1 {
  padding-left: 0.25rem !important;
}
.ps-2 {
  padding-left: 0.5rem !important;
}
.ps-3 {
  padding-left: 1rem !important;
}
.ps-4 {
  padding-left: 1.5rem !important;
}
.ps-4_2 {
  padding-left: 2rem !important;
}
.ps-5 {
  padding-left: 3rem !important;
}
.ps-7 {
  padding-left: 4rem !important;
}
.ps-8 {
  padding-left: 4.5rem !important;
}
.ps-9 {
  padding-left: 5rem !important;
}
.ps-95 {
  padding-left: 5.5rem !important;
}
.ps-10 {
  padding-left: 6rem !important;
}
.ps-15 {
  padding-left: 9rem !important;
}
.ps-30 {
  padding-left: 18rem !important;
}
.ps-35 {
  padding-left: 21rem !important;
}

.white {
  color: white;
}
.bg_white {
  background: white;
}

.yellow {
  color: #ffff2e;
}
.blue {
  color: #0080c7;
}
.l_blue {
  color: #55afff;
}
.gray {
  color: #cccccc;
}
.l_gray {
  color: #f2f2f2;
}
.black {
  color: #1a1a1a;
}

.bg_yellow {
  background: #ffff2e;
}

.bg_blue {
  background: #0080c7;
}
.bg_l_blue {
  background: #55afff;
}
.bg_gray {
  background: #cccccc;
}
.bg_l_gray {
  background: #f2f2f2;
}
.bg_black {
  background: #1a1a1a;
}

.bg_gray_grad {
  background: rgb(255, 255, 255);
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 1) 0%,
    rgba(242, 242, 243, 1) 15%,
    rgba(229, 229, 230, 1) 53%,
    rgba(242, 242, 243, 1) 85%,
    rgba(255, 255, 255, 1) 100%
  );
}

.bg_l_gray_grad {
  background-image: url(../image/common/gray_grad_bg.jpg);
  background-position: center;
  background-size: cover;
}

.top_bg_l_blue {
  background-image: url(../image/top/blue_bg.jpg);
  background-position: center;
  background-repeat: repeat;
}
.top_bg_l_blue_color {
  background: #e8f5fd;
}
.notice_tag_bg {
  background: #55afff;
}
.media_tag_bg {
  background: #0080c7;
}

.underline_purple {
  position: relative;
}
.underline_purple::before {
  position: absolute;
  content: "";
  bottom: -5px;
  left: 0;
  transform: translateY(50%);
  height: 4px;
  width: 95%;
  background: #c92c5d;
}

.border_width_1 {
  border-width: 1px;
}
.border_width_2 {
  border-width: 2px;
}
.border_width_3 {
  border-width: 3px;
}
.border_style_solid {
  border-style: solid;
}
.border_style_dashed {
  border-style: dashed;
}
.border_color_w {
  border-color: white;
}
.border_radius_26 {
  border-radius: 26px;
}
.no_border {
  border: none;
}

.border_bottom_w {
  padding-bottom: 2px;
  border-bottom: 3px solid white;
}
.border_bottom_blue {
  border-bottom: 5px solid #0080c7;
}

.vread {
  writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  -webkit-writing-mode: vertical-rl;
}
.hread {
  writing-mode: horizontal-tb;
  -ms-writing-mode: horizontal-tb;
  -webkit-writing-mode: horizontal-tb;
}
.warp_btn {
  position: fixed;
  bottom: 15%;
  right: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 1;
  width: 80px;
  height: 80px;
  z-index: 20;
}
.warp_btn_img {
  width: 80px;
  height: 80px;
  background: url(../image/yadocar-i/pagetop.png) no-repeat;
  background-size: cover;
  background-position: center;
  transition: all 0.4s ease;
}
.warp_btn_img:hover {
  transition: 0.3;
  opacity: 0.5;
}

.scroll_down {
  display: inline-block;
  position: absolute;
  left: 50%;
  bottom: 0;
  z-index: 20;
  padding: 10px 10px 95px;
  cursor: pointer;
  text-align: center;
  transform: translateX(-50%);
}
.scroll_down img {
  margin: 0 auto;
}
.scroll_down::before {
  content: "";
  position: absolute;
  bottom: 10px;
  left: 50%;
  width: 2px;
  height: 60px;
  background: #c92c5d;
  transition: all 0.4s ease;
}
.scroll_down::after {
  content: "";
  position: absolute;
  bottom: 10px;
  left: calc(50% + 5px);
  width: 2px;
  height: 15px;
  background: #c92c5d;
  transform: rotate(35deg);
  transition: all 0.4s ease;
}
.scroll_down:hover::before,
.scroll_down:hover::after {
  bottom: 0;
}

.translate-middle {
  transform: translate(-50%, -50%) !important;
}

.translate-middle-x {
  transform: translateX(-50%) !important;
}

.translate-90per-y {
  transform: translateY(-90%) !important;
}
.translate-middle-y {
  transform: translateY(-50%) !important;
}
.translate-40-y {
  transform: translateY(-40px) !important;
}

.sp {
  display: none;
}
.sp_flex {
  display: none;
}
.tb_sp {
  display: none;
}
.se {
  display: none;
}
.pc {
  display: block;
}
.pc_flex {
  display: flex;
}

.z1 {
  z-index: 1;
}
.z0 {
  z-index: 0;
}
.z-1 {
  z-index: -1;
}

.shadow {
  box-shadow: 6px 2px 4px 0px rgba(000, 000, 000, 0.16);
}
.filter {
  filter: drop-shadow(6px 2px 4px rgba(000, 000, 000, 0.16));
}

.left_path {
  clip-path: polygon(40px 0, 100% 0, 100% 100%, 0 100%, 0 40px);
  -webkit-clip-path: polygon(40px 0, 100% 0, 100% 100%, 0 100%, 0 40px);
}
.left_path_small {
  clip-path: polygon(15px 0, 100% 0, 100% 100%, 0 100%, 0 15px);
  -webkit-clip-path: polygon(15px 0, 100% 0, 100% 100%, 0 100%, 0 15px);
}
.more_btn_path {
  clip-path: polygon(15px 0, 100% 0, 100% 100%, 0 100%, 0 15px);
  -webkit-clip-path: polygon(15px 0, 100% 0, 100% 100%, 0 100%, 0 15px);
}
.right_path {
  clip-path: polygon(calc(100% - 40px) 0, 100% 40px, 100% 100%, 0 100%, 0 0);
  -webkit-clip-path: polygon(
    calc(100% - 40px) 0,
    100% 40px,
    100% 100%,
    0 100%,
    0 0
  );
}
.bg_blue_grad {
  background: rgb(0, 128, 199);
  background: linear-gradient(
    90deg,
    rgba(0, 128, 199, 1) 0%,
    rgba(0, 128, 199, 1) 8%,
    rgba(0, 53, 129, 1) 100%
  );
}
.bg_blue_grad_reverse {
  background: rgb(0, 128, 199);
  background: linear-gradient(
    270deg,
    rgba(0, 128, 199, 1) 0%,
    rgba(0, 128, 199, 1) 8%,
    rgba(0, 53, 129, 1) 100%
  );
}
@media (min-width: 768px) {
  a[href^="tel:"] {
    pointer-events: none;
  }
}

/*----------------------------------------------------------------

ハンバーガーメニュー

----------------------------------------------------------------*/

.side_nav {
  display: none;
}

footer address {
  bottom: 0;
  height: 30px;
  padding-top: 5px;
  width: 100%;
}

.sp_banner_btn {
  display: block;
  position: absolute;
  height: 1px;
}
.recruit_btn,
.entry_btn {
  display: none;
}

a.view_more_btn.w270 {
  width: 270px;
  height: 70px;
  margin: 0 4px;
  position: relative;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  z-index: 0;
}

/*----------------------------------------------------------------

ここから、animation

----------------------------------------------------------------*/
.js-scroll.show .motion-txt:after {
  transition-property: transform, opacity;
  transition-duration: 0.5s;
  transition-delay: 0s;
  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
  transform: translate3d(0, 0, 0);
}

.js-scroll.done .motion-txt:after {
  transition-property: transform;
  transition-duration: 0.5s;
  transition-delay: 0s;
  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
  transform: translate3d(103%, 0, 0);
}


.motion-txt .motion-inner {
  display: inline-block;
  opacity: 0;
}

.js-scroll.done .motion-txt .motion-inner {
  opacity: 1;
  padding: 20px 20px 20px 0;
}
.under_mv .js-scroll.done .motion-txt .motion-inner,
.catalog_contents_title_txt .js-scroll.done .motion-txt .motion-inner,
.about_contents02 .js-scroll.done .motion-txt .motion-inner,
.product_table_recomend_title .js-scroll.done .motion-txt .motion-inner,
.product_anc_title .js-scroll.done .motion-txt .motion-inner,
.dashcam_mv_title.js-scroll.done .motion-txt .motion-inner {
  opacity: 1;
  padding: 0px 0px 0px 0;
}

.js-scroll p {
  display: inline-block;
}

.motion-txt {
  display: inline-block;
  position: relative;
  overflow: hidden;
}

.motion-txt:after {
  content: "";
  position: absolute;
  opacity: 1;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  background-color: #0080c7;
  transform: translate3d(-101%, 0, 0);
  padding: 20px 20px 20px 0;
}
.motion-txt.white-txt:after {
  background-color: white;
}

.js-scroll.show .motion-txt:after {
  transition-property: transform, opacity;
  transition-duration: 0.3s;
  transition-delay: 0s;
  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
  transform: translate3d(0, 0, 0);
  padding: 20px 20px 20px 0;
}

.js-scroll.done .motion-txt:after {
  transition-property: transform;
  transition-duration: 0.5s;
  transition-delay: 0s;
  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
  transform: translate3d(103%, 0, 0);
  padding: 20px 20px 20px 0;
}

.motion-txt .motion-inner {
  display: inline-block;
  opacity: 0;
  padding: 20px 20px 20px 0;
}
.under_mv .motion-txt .motion-inner,
.catalog_contents_title_txt .motion-txt .motion-inner,
.product_table_recomend_title .motion-txt .motion-inner,
.about_contents02 .motion-txt .motion-inner,
.product_anc_title .motion-txt .motion-inner,
.dashcam_mv_title .motion-txt .motion-inner {
  display: inline-block;
  opacity: 0;
  padding: 0px 0px 0px 0;
}

.js-scroll.done .motion-txt .motion-inner {
  display: inline-block;
  opacity: 1;
  padding: 20px 20px 20px 0;
}
.under_mv .js-scroll.done .motion-txt .motion-inner,
.catalog_contents_title_txt .js-scroll.done .motion-txt .motion-inner,
.about_contents02 .js-scroll.done .motion-txt .motion-inner,
.product_table_recomend_title .js-scroll.done .motion-txt .motion-inner,
.product_anc_title .js-scroll.done .motion-txt .motion-inner,
.dashcam_mv_title .js-scroll.done .motion-txt .motion-inner {
  display: inline-block;
  opacity: 1;
  padding: 0px 0px 0px 0;
}

/* body {
  scroll-snap-type: y mandatory;
  overflow: scroll;
  height: 100vh;
}
.sn_container {
}
section {
  scroll-snap-align: start;
} */
/*----------------------------------------------------------------

ここから、header

----------------------------------------------------------------*/

header {
  width: 100%;
  height: 80px;
  position: fixed;
  z-index: 100;
}
header .header_inner {
  display: flex;
  justify-content: flex-end;
  position: relative;
  height: 100%;
}
header .logo {
  position: absolute;
  top: 0;
  left: 30px;
  transform: translateY(0%);
  height: 100%;
}
header .logo a {
  display: flex;
  align-items: center;
  width: auto;
  letter-spacing: 0.04em;
  height: 100%;
}
header .logo a img {
  width: 100%;
  height: auto;
}
header .sub_logo {
  margin-left: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
header .sub_logo .logo_title {
  padding-bottom: 5px;
  padding-left: 2px;
}
header .sub_logo .logo_title span:nth-of-type(1) {
  letter-spacing: 0.2em;
}
header .sub_logo .logo_title span:nth-of-type(2) {
  letter-spacing: 0.08em;
}
header .sub_logo span {
  letter-spacing: 0.09em;
}

header nav {
  display: flex;
  align-items: center;
  padding-top: 0px;
  margin-right: 0px;
  margin-bottom: 5px;
  position: relative;
}
header nav a {
  display: block;
  padding: 8px 15px;
  text-align: center;
  position: relative;
  border-left: 1px solid #A8E0FF;
}

header nav h2 {
  position: relative;
  padding-top: 4px;
  transition: all 0.4s ease;
}
header nav h2::before {
  position: absolute;
  content: "";
  left: 0%;
  right: 0;
  height: 2px;
  width: 0%;
  background: #0080c7;
  bottom: -10px;
  transition: all 0.4s ease;
}
header nav a:hover h2::before {
  width: 100%;
}

header .header_right_btn {
  display: flex;
  text-align: center;
  height: 100%;
}
header .header_right_btn a {
  display: flex;
  text-align: center;
  justify-content: center;
  flex-direction: column;
}

header .contact_btn {
  width: 190px;
  /* padding-left: 10px;
  padding-right: 20px; */
  height: 100%;
  box-sizing: border-box;
  transition: all 0.4s ease;
  position: relative;
  transform: translateX(0px);
  background: #eef065;
}
header .header_right_btn a:hover {
  background: #0080c7;
}
header .header_right_btn h2 {
  transition: all 0.4s ease;
  padding-top: 0px;
}

header .entry_btn .f_24 {
  display: flex;
  justify-content: center;
  align-items: center;
}
header .entry_btn .material-icons {
  padding-left: 4px;
}
header .contact_btn:hover h2 {
  color: #ffffff;
}

#header_bg_white {
  position: absolute;
  top: 0;
  left: 0px;
  right: 0px;
  width: 100%;
  height: 100%;
  background: #ffffff;
  z-index: -1;
}

/*----------------------------------------------------------------

mv

----------------------------------------------------------------*/

.mv {
  position: relative;
  width: 100%;
  height: 770px;
  background: #ffffff;
  display: block;
  overflow: hidden;
  padding-top: 80px;
}
.mv_video {
  position: absolute;
  width: auto;
  height: calc(100% - 80px);
  top: calc(50% + 40px);
  left: 50%;
  transform: translate(-50%, -50%);
}
.mv_video img {
  width: auto;
  height: 100%;
}
.mv_video video {
  width: auto;
  height: 100%;
}

.mv_title {
  position: absolute;
  top: 45%;
  right: 28%;
  transform: translate(50%, -50%);
  display: block;
  max-width: 780px;
  width: 50%;
  height: auto;
  z-index: 1;
}
.mv_track_icon {
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%);
}
/*----------------------------------------------------------------

top_product

----------------------------------------------------------------*/
.top_product {
  background-color: #e5e5e6;
  background-image: url(../image/top/top_bg.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.top_product .left_img {
  position: relative;
  height: 510px;
  z-index: 1;
}
.top_product .left_img::before {
  position: absolute;
  content: "";
  left: 0;
  background-image: url(../image/top/product01.jpg);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  height: 100%;
  width: 80vw;
  z-index: -1;
}
.top_product .top_product05 .left_img::before {
  position: absolute;
  content: "";
  left: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  height: 100%;
  width: 50vw;
  z-index: -1;
}
.top_product .top_product02 .left_img::before {
  background-image: url(../image/top/product02.jpg);
}
.top_product .top_product03 .left_img::before {
  background-image: url(../image/top/product03.jpg);
}
.top_product .top_product04 .left_img::before {
  background-image: url(../image/top/product04.jpg);
}
.top_product .top_product05 .left_img::before {
  background-image: url(../image/top/product05.jpg);
}

.top_product .fd_row_r .left_img::before {
  left: auto;
  right: 0;
}

.top_product02 .right_txt .w65 {
  width: 80%;
}
.top_product04 .motion-txt span {
  font-size: 2.7vw;
}

.stick {
  width: 40px;
  height: 2px;
  display: block;
}

.more_btn {
  width: 210px;
  height: 60px;
  padding-right: 40px;
  transition: all 0.4s ease;
  right: 12em;
  bottom: 2.5rem;
}

.top_product .fd_row_r .more_btn {
  right: 3.5em;
  bottom: 2.5rem;
}
.top_product .top_product_details .more_btn,
.top_whoweare .more_btn,
.top_company .more_btn,
.ibox_overview_txt .more_btn,
.ibox_voice_txt .more_btn {
  right: auto;
  left: auto;
  bottom: 2.5rem;
}
.ibox_overview_txt .more_btn,
.ibox_voice_txt .more_btn {
  right: 0rem;
}
.top_company .more_btn {
  padding-right: 0px;
  width: 210px;
  height: 115px;
  right: auto;
  left: auto;
  bottom: auto;
}
.top_info .more_btn {
  width: 260px;
  height: 60px;
  right: auto;
  left: auto;
}
.top_product .top_product_details .more_btn::before,
.top_whoweare .more_btn::before,
.top_company .more_btn::before,
.top_info .more_btn::before,
footer .footer_tel_btn::before,
.ibox_overview_txt .more_btn::before,
.ibox_voice_txt .more_btn::before ,
.ibox-blog-inner .more_btn::before {
  position: absolute;
  content: "";
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - 2px);
  height: calc(100% - 2px);
  background-color: white;
  clip-path: polygon(15px 0, 100% 0, 100% 100%, 0 100%, 0 15px);
  -webkit-clip-path: polygon(15px 0, 100% 0, 100% 100%, 0 100%, 0 15px);
  z-index: -1;
  transition: all 0.4s ease;
}

.top_company .more_btn::before,
footer .footer_tel_btn::before {
  background-color: #0080c7;
  width: calc(100% - 2px);
  height: calc(100% - 2px);
}
/* .top_company .more_btn span,
footer .footer_tel_btn span {
  transition: all 0.4s ease;
} */
.right_arrow {
  position: relative;
}

.right_arrow::before,
.right_arrow::after {
  position: absolute;
  content: "";
  right: -50px;
  width: 36px;
  height: 6px;
  border-bottom: 2px solid #0080c7;
  transition: all 0.4s ease;
}
.top_company .right_arrow::before,
.top_company .right_arrow::after,
.top_catalog .right_arrow::before,
.top_catalog .right_arrow::after {
  border-bottom: 2px solid white;
  right: -25px;
  width: 46px;
}
.right_arrow::after {
  width: 15px;
  height: 2px;
  transform: rotate(30deg);
}
.top_company .right_arrow::after,
.top_catalog .right_arrow::after {
  width: 15px;
  height: 2px;
  transform: rotate(30deg);
}

.more_btn:hover {
  background: #0080c7;
  color: #ffffff;
}
.top_product .top_product_details .more_btn:hover::before,
.top_whoweare .more_btn:hover::before,
.top_company .more_btn:hover::before,
.top_info .more_btn:hover::before,
footer .footer_tel_btn:hover::before,
.ibox_overview_txt .more_btn:hover::before,
.ibox_voice_txt .more_btn:hover::before ,
.ibox-blog-inner .more_btn:hover::before {
  background: #0080c7;
  color: #ffffff;
}

/* .top_company .more_btn:hover::before,
footer .footer_tel_btn:hover::before {
  background-color: #ffffff;

} */
.more_btn:hover .right_arrow::before,
.more_btn:hover .right_arrow::after {
  border-color: #eef065;
}
/*----------------------------------------------------------------

top_whoweare

----------------------------------------------------------------*/
.top_whoweare {
  width: 100%;
  height: auto;
  background-image: url(../image/top/whoweare01.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  margin-top: -180px;
}
.bg_blue_who {
  background-image: url(../image/top/whoweare.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.top_whoweare02 {
  height: 360px;
  background-image: url(../image/top/whoweare02.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
/*----------------------------------------------------------------

top_company

----------------------------------------------------------------*/

.bg_blue_img {
  background-image: url(../image/top/top_company_bg.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

/*----------------------------------------------------------------

top_info

----------------------------------------------------------------*/
.top_info_image,
.tags {
  transition: all 0.4s ease;

}
.tags {
  height: 30px;
    min-width: 125px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.top_info_image:hover,
.tags:hover {
  opacity: 0.6;
}
.top_info_image img  {
  max-width: 100%;
  width: 262px;
  max-height: 175px;
  height: 175px;
  object-fit: cover;
  object-position: 50% 50%;
}
.info_tag {
  padding: 2px 6px;
}
.top_info_title {
  transition: all 0.4s ease;
  position: relative;
  max-width: 265px;
  width: 100%;
  line-height: 1.5;
  margin-bottom: 15px;

}
.top_info_title::before {
  position: absolute;
  content: "";
  bottom: -5px;
  left: 0;
  width: 100%;
  height: 1px;
  transition: all 0.4s ease;
  border-bottom: 2px solid transparent;
}

.top_info_title:hover {
  color: #0080c7;
}

.top_info_title:hover::before {
  border-bottom: 2px solid #0080c7;
}
/*----------------------------------------------------------------

top_catalog

----------------------------------------------------------------*/
.top_catalog {
  max-width: 1240px;
  transition: all 0.4s ease;
}
.top_catalog:hover .top_catalog_bg {
  transform: translateY(-10px);
}
.top_catalog_bg {
  background-image: url(../image/top/catalog.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  transition: all 0.4s ease;
}
.common_contact {
  background-color: #e5e5e6;
}
.top_catalog .right_arrow::before,
.top_catalog .right_arrow::after {
  border-bottom: 2px solid white;
  right: -25px;
  width: 46px;
  transition: all 0.4s ease;
}
.top_catalog .right_arrow::after {
  width: 15px;
  height: 2px;
  transform: rotate(30deg);
}

.top_catalog:hover .right_arrow::before,
.top_catalog:hover .right_arrow::after {
  border-bottom-color: #eef065;
}

/*----------------------------------------------------------------

common_contact

----------------------------------------------------------------*/
.common_contact_details .left_path_small {
  transition: all 0.4s ease;
}
.common_contact_details .left_path_small:hover {
  opacity: 0.6;
}

/*----------------------------------------------------------------

footer

----------------------------------------------------------------*/
footer {
  position: relative;
}
.footer_list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.footer_list a {
  transition: all 0.4s ease;
  position: relative;
  display: inline-block;
  width: auto;
}
.footer_list a::before {
  position: absolute;
  content: "";
  bottom: 4px;
  left: 0;
  width: 100%;
  height: 1px;
  transition: all 0.4s ease;
  border-bottom: 2px solid transparent;
}
.footer_list a:hover::before {
  border-bottom-color: white;
}
.footer_list .item {
  text-indent: -12px;
  padding-left: 12px;
}
.phone {
  transform: rotate(15deg) translateX(35%);
}

.footer_contents {
  flex-wrap: wrap;
}
/*----------------------------------------------------------------

side　banner

----------------------------------------------------------------*/

.side_01{
  position: fixed;
  right: 60px;
  bottom: 230px;
  z-index: 100;
}
.side_02{
  position: fixed;
  right: 60px;
  bottom: 130px;
  z-index: 100;
}
.side_03{
  position: fixed;
  right: 60px;
  bottom: 30px;
  z-index: 100;
}
/*----------------------------------------------------------------

オンラインショップボタン前のアイコン追加

----------------------------------------------------------------*/
a.cart_icon span.material-icons{
  color: #0080c7;
  margin-right: 5px;
  font-size: 40px;
}
a.cart_icon:hover span.material-icons{
  color: #fff;
}
a.cart_icon_b span.material-icons{
  color: #fff;
  margin-right: 5px;
  font-size: 40px;
}
a .cart_icon_c span.material-icons{
  color: #0080c7;
  margin-right: 5px;
  font-size: 40px;
  position: relative;
  top: 10px;
}




/*----------------------------------------------------------------



----------------------------------------------------------------*/


.info-item {
  max-width: 262px;
}


/*----------------------------------------------------------------

yadocar-i

----------------------------------------------------------------*/

.yadocar-i-wrapper {
  position: relative;
  height: 80vh;
  width: 420px;
  overflow: hidden;
}

.yadocar-i-wrapper video {
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}



/*------------------------------------------------------
241018 iBOXシリーズページの改修　伊藤
--------------------------------------------------------*/

.ibox_button_area{
display: flex;
max-width: 1280px;
margin-left: auto;
margin-right: auto;
width: 90%;
justify-content: space-between;
}


.ibox_button_area .ibox_button_area_more_btn{
width: 45%;
height: 100px;
background-color: #ffff2e;


}
.ibox_button_area .ibox_button_area_more_btn:hover{
opacity: 0.6;
color: #0080c7;


}
.ibox_button_area .ibox_button_area_more_btn:hover .right_arrow:before{

border-bottom: 2px solid #0080c7 !important;


}
.ibox_button_area .ibox_button_area_more_btn:hover .right_arrow:after{

border-bottom: 2px solid #0080c7 !important;


}

.ibox_button_area .ibox_button_area_more_btn02{
width: 45%;
background-color: #ffffff;


}

.ibox_button_area_section{
  padding: 100px 0;
  background-color: #55afff;
}


.ac_grid_area{
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  width: 90%;
  display: flex;
  justify-content: space-between;
}

.ac_grid_area .ac_grid_area_list{
  position: relative;
  width: 45%;
  /* border: 1.8px solid #55afff; */
  padding: 50px 40px 40px;
  clip-path: polygon(0 0, calc(100% - 60px) 0, 100% 60px, 100% 100%, 0 100%);
  -webkit-clip-path: polygon(0 0, calc(100% - 60px) 0, 100% 60px, 100% 100%, 0 100%);
}
.ac_grid_area .ac_grid_area_list:before{
  position: absolute;
  content: "";
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - 2px);
  height: calc(100% - 2px);
  background-color: white;
  clip-path: polygon(0 0, calc(100% - 59px) 0, 100% 59px, 100% 100%, 0 100%);
  -webkit-clip-path: polygon(0 0, calc(100% - 59px) 0, 100% 59px, 100% 100%, 0 100%);
  z-index: -1;
  transition: all 0.4s ease;
}

.ac_grid_area .ac_grid_area_list .ac_grid_area_list_upper{
  display: flex;
  justify-content: space-between;
}

.ac_grid_area .ac_grid_area_list .ac_grid_area_list_upper .ac_grid_area_list_upper_left{
  
}

.ac_grid_area .ac_grid_area_list .ac_grid_area_list_upper .ac_grid_area_list_upper_left span{
  background-color: #f1f9ff;
  width: fit-content;
  color: #55afff;
  padding: 5px 30px;
  border-radius: 10px;
}
.ac_grid_area .ac_grid_area_list .ac_grid_area_list_upper .ac_grid_area_list_upper_left p {
  line-height: 1.4;
  letter-spacing: 0.05em;
}



.ac_grid_area .ac_grid_area_list .ac_grid_area_list_upper .ac_grid_area_list_upper_right{
width: 45%;
max-height: 160px;
height: 100vw;
}

.ac_grid_area .ac_grid_area_list .ac_grid_area_list_upper .ac_grid_area_list_upper_right img{
width: 100%;
height: auto;
object-fit: cover;
}

.ac_grid_area_list_middle{
  display: grid;
  gap: 10px;

}

.ac_grid_area_list_middle .ac_grid_area_list_middle_grad{
  padding: 10px;
border-radius: 10px;
color: #fff;
text-align: center;
line-height: 1.6;

background: linear-gradient(
  to right,
  rgba(0, 128, 199, 1) 50%,
  rgba(0, 53, 129, 1) 100%
);


}

.ac_grid_area_list_middle .ac_grid_area_list_middle_grad span{

color: #ffff2e;

}

.ac_grid_area_list_lower{
  color: #55afff;
  text-align: center;
  line-height: 1.4;
  letter-spacing: 0.05em;

}
.ac_grid_area_list_lower span{
display: inline-block;


}





.proposal_area{
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  width: 90%;
  display: flex;
  align-items: center;
  justify-content: center;
  
}

.proposal_area_text{
width: 55%;
}


.proposal_area .proposal_area_img{
  
width: 35%;

}

.proposal_area .proposal_area_img img{
  
width: 100%;
height: auto;
object-fit: cover;

}

.txt_con_001_new{
  overflow: initial !important;
}

.yellow_title{
  color: #eef065 !important;
  letter-spacing: 0.01em !important;
  font-size: 56px !important;
  white-space: nowrap;
  margin: 30px 0 0 20px !important;
}

.black_title{
  color: #000000 !important;
  letter-spacing: 0.01em !important;
  font-size: 56px !important;
  white-space: nowrap;
  margin: 30px 0 0 20px !important;
}

.list_upper{
  display: flex;
  align-items: center;
  justify-content: start;
}

.list_upper .list_upper_yellow_label{
  border-radius: 9999px;
  background-color: #ffff2e;
  text-align: center;
  padding: 5px 20px;
}

.new_video{
  width: 400px;
  height: auto;
}

.achievement_area{
  background-color: #55afff;
}

.achievement_area_inner{
  background: unset !important;
}

.ibox_contents_white_new::before{
  border-top: 3.5vw solid #55afff !important;
}

.more_btn_new {
  width: 150px;
  height: 50px;
  background-color: #fff;
  border: 1px solid #55afff;
  border-radius: 10px;
  font-weight: 700;
  margin-left: auto;
  margin-right: auto;
  padding-left: 10px;
  padding-right: 30px;
}
.more_btn_new .right_arrow::before {
  width: 20px;
  right: -24px;
}
.more_btn_new .right_arrow::after {
  width: 12px;
  height: 3px;
  right: -24px;
}



.introduction_company_new img{
  width: 145px !important;
}

.coming_soon_img{
  width: 500px;
}


.ibox_flex01_area{
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

.ibox_contents_white_left_new{
  width: 100%;
  max-width: 1280px !important;
}

.ibox01_bluetext{
  text-align: center;
}

.ibox_contents_white_left02_new img{
width: 100%;
height: auto;

}

/*-------- 会社概要：カタログボタン追加 ---------- */
.catalog a {
  width: 415px;
  margin: 0 auto;
}
.catalog a img {
  width: 70px;
}