/*-------------------------
  base
-------------------------*/
html {
    font-size: 62.5%;
    overflow-x: hidden;
    margin: 0;
    padding: 0;
}
body{
    margin: 0;
    padding: 0;
    font-family: "Poppins", "Zen Kaku Gothic New", sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 1.6rem;
    color: #111111;
    background-color: #ffffff;
}
h1, h2, h3, h4, h5, h6, strong, em, p, span, ul, li, dl, dt, dd, div, a{
    line-height: 1.8em;
    letter-spacing: 0;
}
h1, h2, h3, h4, h5, h6, strong, em, p, span, a{
    margin-block: var(--leading-trim);
}
ul{
    list-style-position: inside;
    padding-left: 1em;
    margin: 0;
    padding: 0;
}
li{
    list-style: square;
}
dt{
    list-style-type: none;
}
address, em, b{
    font-style: normal;
}
a:link,
a:visited,
a:active,
a:focus{
    text-decoration: none;
    color:  var(--color-black);
}
p a:link,
p a:visited,
p a:active,
p a:focus{
    text-decoration: underline;
}
a:hover{
    text-decoration: underline;
}
table{
    width: 100%;
    border-collapse:collapse;
}
tr{
}
th{
    width: 200px;
    padding: 16px 0;
    text-align: left;
    vertical-align: top;
}
td{
    width: auto;
    padding: 16px 16px 16px 0;
    text-align: left;
    vertical-align: top;
}
input,
textarea,
select{
    border: none;
    background-color: #fff;
}
input[type="text"],
input[type="email"],
select{
    padding: 0.5em 1em;
    width: 100%;
}
textarea{
    padding: 0.5em 1em;
    margin-top: 8px;
    width: 100%;
    height: 16em;
}
select{
    cursor: pointer;
    appearance: auto;
}
input[type="radio"],input[type="checkbox"]{
    vertical-align:middle;
    margin-right: 0.2em;
}
input::placeholder{
    color: var(--color-lightgray);
}
select{
    color: var(--color-black);
}
small{
    font-size: 1.2rem;
    color: var(--color-gray1);
}
a:hover img{
    opacity: 70%;
}

/*-------------------------
  common
-------------------------*/
.pc{
    display: block;
}
.sp{
    display: none;
}
.wrap880{
    width: 880px;
    margin: 0 auto;
}
.wrap1120{
    width: 1120px;
    margin: 0 auto;
}
.wrap1200{
    width: 1200px;
    margin: 0 auto;
}
.paddingTop80{
    padding-top: 80px;
    padding-bottom: 80px;
}
.paddingTop120{
    padding-top: 120px;
    padding-bottom: 120px;
}
.marginBottom120{
    margin-bottom: 120px;
}
.borderBottom{
    border-bottom: 2px solid var(--color-black);
}
.ttlA{
    font-size: var(--font-l5);
    line-height: 1.15em;
    font-weight: var(--font-weight2);
    letter-spacing: -0.02em;
}
.ttlB span{
    font-size: var(--font-l5);
    line-height: 1.15em;
    font-weight: var(--font-weight2);
    letter-spacing: -0.04em;
}
.ttlB h2{
    font-size: var(--font-l2);
    font-weight: var(--font-weight4);
    margin-top: 80px;
    line-height: 1.15em;
    letter-spacing: -0.04em;
}
.ttlB p{
    margin-top: 32px;
    width: 520px;
}
.ttlB ul{
    margin-top: 32px;
    width: 520px;
    position: relative;
    left: 4px;
}
.img-multiply{
    mix-blend-mode: multiply;
}
:root {
    --leading-trim: calc((1em - 1lh) / 2);
    --font-s: 1.3rem;
    --font-l: 1.9rem;
    --font-l2: 2.5rem;
    --font-l3: 3.7rem;
    --font-l4: 6.3rem;
    --font-l5: 7.2rem;
    --font-l6: 9.3rem;
    --font-l7: 11.4rem;
    --font-weight1: 400;
    --font-weight2: 500; /* Medium */
    --font-weight3: 600;
    --font-weight4: 700;
    --font-weight5: 800; 
    --color-black: #0D0D0D;
    --color-lightgray: #cccccc;
    --color-gray1: #333333;
    --color-gray2: #262626;
    --color-gray3: #1A1A1A;
    --color-white: #EDEDED;
    --color-fff: #fff;
    --color-red: #f00;
}
header input[type=checkbox] {
    display: none; 
}
@supports not (top: 1lh) {
    :root{
        --leading-trim: 0px;
    }
}
