html{
    scroll-behavior: smooth;
    font-family: "Noto Sans JP";
}
html,body {
    padding: 0;
    margin: 0;
}
body * {
    box-sizing: border-box;
}
.wrap{
    width: 100%;
    overflow: hidden;
}
h1 , h2, h3 ,p ,dd{
    margin: 0;
}
p, ul, dl, dd {
    margin: 0;
    padding: 0;
}
li {
    list-style: none;
}
a {
    text-decoration: none;
}
img {
    width: 100%;
    display: block;
}
:root {
    --black: rgb(0, 0, 0);
    --white: rgb(255, 255, 255);
    --grey: rgb(233, 231, 231);
    --lightgrey: rgb(231, 236, 239);
    --darkgrey: rgb(77, 77, 77);
    --blue: rgb(77, 75, 122);
    --yellow: rgb(219, 223, 11);
    --green: rgb(70, 163, 103);
    --red: rgb(200, 0, 0);

    --main: rgb(192, 223, 240);
    --sub: rgb(0, 110, 185);

    --grad: rgb(0, 110, 185), rgb(3, 68, 154);
}
.back-white { background: var(--white);}
.back-lightgrey { background: var(--lightgrey)}
.back-blue { background: var(--blue);}
.back-green { background: var(--green);}
.back-yellow { background: var(--yellow);}
.back-main { background: var(--main);}
.back-sub { background: var(--sub);}
.back-grad { background-image: linear-gradient(0deg, var(--grad));}

.text-white {color: var(--white);}
.text-grey {color: var(--grey);}
.text-darkgrey {color: var(--darkgrey);}
.text-blue { color: var(--blue);}
.text-green { color: var(--green);}
.text-yellow { color: var(--yellow);}
.text-main {color: var(--main);}
.text-sub {color: var(--sub);}


/* wbr */
.wbr {
word-break: keep-all;
overflow-wrap: break-word;
}

/* text-bubble */
.text-bubble {
    width: fit-content;
    border-radius: 200px;
    display: block;
    padding: 0.5em 2em;
    margin: 0 auto;
    margin-bottom: 0.7em;
    position: relative;
}
.text-bubble::before {
    content: "";
    width: 1.25em;
    height: 0.75em;
    clip-path: polygon(0 0, 100% 0, 20% 100%);
    position: absolute;
    bottom: -0.7em;
    left: 50%;
    transform: translateX(-50%);
}
.text-bubble.back-main, .text-bubble.back-main::before {
    background: var(--main);
}
.text-bubble.back-sub, .text-bubble.back-sub::before {
    background: var(--sub);
}

/* line-bubble */

/* link-btn */
.link-btn {
    width: fit-content;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2em;
    border-radius: 200px;
    padding: 0.5em;
    padding-left: 1em;
}
.link-arrow {
    width: 1.5em;
    height: 1.5em;
    display: block;
    border-radius: 50%;
    position: relative;
}
.link-arrow::before {
    content: "";
    width: 0.5em;
    height: 0.5em;
    border-top: solid 2px var(--sub);
    border-right: solid 2px var(--sub);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
}

/* text-dots */
.text-dots {
    -webkit-text-emphasis: filled;
    text-emphasis: filled;
}

/* text-border__white */
.text-border__white {
  text-shadow    : 
       2px  2px 0px #ffffff,
      -2px  2px 0px #ffffff,
       2px -2px 0px #ffffff,
      -2px -2px 0px #ffffff,
       2px  0px 0px #ffffff,
       0px  2px 0px #ffffff,
      -2px  0px 0px #ffffff,
       0px -2px 0px #ffffff;        /* 文字の影 */
}


.width-1600 {
    max-width: 1600px;
    width: 90%;
    margin: 0 auto;
}

.line-break {
    display: block;
    padding-top: 2em;
}

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

wrap

--------------------------------------------*/
.wrap {
    padding-top: 115px;
}


.cp-icon {
    font-size: 150%;
    font-weight: 700;
    width: 7em;
    height: 7em;
    position: fixed;
    bottom: 1em;
    left: 1em;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.35em;
    line-height: 1em;
}
.cp-icon small {
    font-size: 90%;
    line-height: 1em;
}
.cp-icon span {
    font-size: 150%;
    font-weight: 500;
    line-height: 1em;
}

/*--------------------------------------------
first-view
--------------------------------------------*/
.section-first {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 1em;
    padding: 8em 0;
    position: relative;
    overflow: hidden;
    box-shadow: 10px 0 20px rgba(0, 0, 0, 0.5);
}
.section-first > * {
    position: relative;
    z-index: 2;
}
.section-first h1 {
    font-size: 150%;
    width: 90%;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    margin: 0 auto;
    transform: skewX(-10deg);
}
.section-first h1 span {
    font-size: 150%;
    display: block;
    margin-bottom: -0.2em;
}

.first-contents {
    max-width: 810px;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 0 auto;
}

.first-catch {
    width: 4em;
    font-size: 400%;
    text-align: center;
    font-weight: 600;
    line-height: 1em;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.25rem;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    margin-right: -1rem;
}
.first-catch small  {
    font-size: 45%;
    line-height: 0.75em;
    font-weight: 700;
    display: block;
}

.first-content {
    width: calc(100% - 4em * 4 + 1rem);
    display: flex;
    flex-direction: column;
}
.first-list {
    display: flex;
    align-items: flex-end;
    gap: 0.5em;
}
.first-list li {
    width: calc(100% / 5 - 0.5em * 4 / 5 - 2.5em * 1.2 / 5);
}
.first-list li:nth-child(odd) {
    margin-bottom: 1em;
}
.first-list li.first-list__text {
    width: fit-content;
    font-size: 120%;
    font-weight: 700;
    line-height: 1em;
    margin-bottom: 2rem;
}
.first-content p {
    font-size: 600%;
    font-weight: 900;
    margin-top: -1rem;
}

.first-img {
    position: absolute;
    z-index: -1;
}
.first-img__1 {
    max-width: 300px;
    width: 40%;
    top: -8rem;
    left: clamp(0%, calc((100lvw - 1080px) / 2), 9999px);
}
.first-img__2 {
    max-width: 300px;
    width: 30%;
    top: -2rem;
    right: clamp(5%, calc((100lvw - 1080px) / 2), 9999px);
}
.first-img__3 {
    max-width: 350px;
    width: 40%;
    bottom: -4rem;
    left: clamp(-5%, calc((100lvw - 1350px) / 2), 9999px);
}
.first-img__4 {
    max-width: 450px;
    width: 45%;
    bottom: -5rem;
    right: clamp(-10%, calc((100lvw - 1350px) / 2), 9999px);
}

/*--------------------------------------------
    article-catch
--------------------------------------------*/
.section-catch {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 2em;
    padding:  5em 0;
}
.section-catch h2 {
    font-size: 200%;
}
.section-catch p {
    font-size: 120%;
    line-height: 1.8em;
    font-weight: 600;
}
/*--------------------------------------------
    article-step
--------------------------------------------*/
.article-step {
    padding: 5em 0;
}
.section-step {
    display: flex;
    align-items: stretch;
}
.section-step:not(:first-child) {
    margin-top: -2.5em;
}
.step-parts {
    width: 5rem;
    height: stretch;
    flex-shrink: 0;
    border-radius: 500px 500px 0 0;
}
.section-step:last-of-type .step-parts {
    border-radius: 500px;
}
.step-number {
    font-size: 200%;
    width: 100%;
    line-height: 1em;
    font-weight: 600;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    aspect-ratio: 1 / 1;
}
.step-number small {
    font-size: 50%;
    line-height: 1em;
    display: block;
}

.step-contents {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 1em;
    border-radius: 0 2em 2em 0;
    padding: 3em;
    margin-top: 1.5em;
    margin-bottom: 6em;
}
.section-step:first-child .step-contents {
    margin-top: 3em;
}
.section-step:last-child .step-contents {
    margin-bottom: 3em;
}

.step-contents h2 {
    width: 100%;
    font-size: 200%;
}
.step-content__wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 1em;
}
.step-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1.5em;
}
.step-list {
    display: flex;
    flex-direction: column;
    gap: 1em;
}

.step-img {
    flex: 1;
    display: flex;
    gap: 1em;
    align-items: stretch;
    position: sticky;
    top: 10em;
}
.step-img img {
    flex: 1;
    height: auto;
    object-fit: cover;
    border-radius: 1em;
}
.step-img:has(> img:nth-child(2):last-child) img {
    width: calc(50% - 0.5em);
}