html{
    scroll-behavior: smooth;
    font-family: "Noto Sans JP";
}
html,body {
    padding: 0;
    margin: 0;
}
body, article{
    position: relative;
    font-family: "Zen Maru Gothic", sans-serif;
}
body * {
    box-sizing: border-box;
}
.wrap{
    width: 100%;
}
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(240, 240, 240);
    --darkgrey: rgb(77, 77, 77);
    --blue: rgb(77, 75, 122);
    --beige: rgb(239, 236, 224);
    --green: rgb(70, 163, 103);
    --red: rgb(200, 0, 0);

    --lightblue: rgb(209, 224, 235);

    --main: rgb(107, 174, 242);
    --sub: rgb(168, 208, 239);
    --main__transparent: rgba(107, 174, 242, 0.6);
    --sub__transparent: rgba(168, 208, 239, 0.6);

    --machine-1: rgb(221, 171, 171);
    --machine-2: rgb(216, 198, 184);
    --machine-3: rgb(216, 210, 182);
    --machine-4: rgb(188, 220, 183);
    --machine-5: rgb(175, 195, 210);
    --machine-6: rgb(193, 189, 215);
    --machine-7: rgb(219, 190, 214);

    --machine-dark-1: rgb(187, 118, 118);
    --machine-dark-2: rgb(180, 143, 115);
    --machine-dark-3: rgb(179, 166, 110);
    --machine-dark-4: rgb(119, 175, 111);
    --machine-dark-5: rgb(119, 150, 173);
    --machine-dark-6: rgb(134, 127, 177);
    --machine-dark-7: rgb(174, 131, 167);
}
.back-white { background: var(--white);}
.back-lightgrey { background: var(--lightgrey)}
.back-blue { background: var(--blue);}
.back-green { background: var(--green);}
.back-beige { background: var(--beige);}
.back-main { background: var(--main);}
.back-sub { background: var(--sub);}

.back-machine__1 { background: var(--machine-1);}
.back-machine__2 { background: var(--machine-2);}
.back-machine__3 { background: var(--machine-3);}
.back-machine__4 { background: var(--machine-4);}
.back-machine__5 { background: var(--machine-5);}
.back-machine__6 { background: var(--machine-6);}
.back-machine__7 { background: var(--machine-7);}

.btn-machine__1 { background: var(--machine-dark-1);}
.btn-machine__2 { background: var(--machine-dark-2);}
.btn-machine__3 { background: var(--machine-dark-3);}
.btn-machine__4 { background: var(--machine-dark-4);}
.btn-machine__5 { background: var(--machine-dark-5);}
.btn-machine__6 { background: var(--machine-dark-6);}
.btn-machine__7 { background: var(--machine-dark-7);}

.text-machine__1 { color: var(--machine-dark-1);}
.text-machine__2 { color: var(--machine-dark-2);}
.text-machine__3 { color: var(--machine-dark-3);}
.text-machine__4 { color: var(--machine-dark-4);}
.text-machine__5 { color: var(--machine-dark-5);}
.text-machine__6 { color: var(--machine-dark-6);}
.text-machine__7 { color: var(--machine-dark-7);}

.text-white {color: var(--white);}
.text-black {color: var(--black);}
.text-grey {color: var(--grey);}
.text-darkgrey {color: var(--darkgrey);}
.text-blue { color: var(--blue);}
.text-green { color: var(--green);}
.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);
}
.text-bubble.back-white, .text-bubble.back-white::before {
    background: var(--white);
}


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

wrap

--------------------------------------------*/
.wrap section {
    max-width: 810px;
    width: 90%;
    margin: 0 auto;
}

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

article-view

--------------------------------------------*/
.article-view {
    background-image: url(../../../images/top/background/header.webp);
    background-color: var(--sub__transparent);
    background-blend-mode: multiply;
    background-size: cover;
    background-position: center;
    position: relative;
    padding-top: 115px;
}
.article-view::before {
    content: "";
    width: 100%;
    height: 100%;
    display: block;
    background: rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(4px);
    position: absolute;
    top: 0;
    left: 0;
}

/*--------------------------------------------
first-view
--------------------------------------------*/
.article-view__first {
    position: relative;
    z-index: 2;
    padding: 10em 0;
}
.article-view__first > span {
    font-size: 125%;
    font-weight: 600;
}
.article-view__first h1 {
    font-size: 450%;
    text-align: center;
    text-shadow: 3px 3px 3px rgba(68, 82, 91, 0.4);
}
.article-view__first h1 small {
    font-size: 50%;
  text-shadow:1px 1px 0 #FFF, -1px -1px 0 #FFF,
              -1px 1px 0 #FFF, 1px -1px 0 #FFF,
              0px 1px 0 #FFF,  0-1px 0 #FFF,
              -1px 0 0 #FFF, 1px 0 0 #FFF;
}
.article-view__first p {
    width: fit-content;
    font-size: 200%;
    letter-spacing: 0.1em;
    text-indent: 0.1em;
    font-weight: 700;
    text-align: center;
    border-radius: 200px;
    padding: 0.25em 2em;
    margin: 0 auto;
    margin-top: 1.5em;
}

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

article-machine__wrap

--------------------------------------------*/
.article-machine__wrap {

}

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

machine-menu

--------------------------------------------*/
.machine-menu {
    padding: 5em 0;
}
.machine-menu h2 {
    max-width: 810px;
    width: 90%;
    font-size: 200%;
    text-align: center;
    margin: 0 auto;
    margin-bottom: 1em;
}
.machine-menu__list {
    max-width: 810px;
    width: 90%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 1em;
    margin: 0 auto;
}
.machine-menu__list li {
    width: calc(100% / 4 - 3em / 4);
}
.machine-menu__list a {
    height: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.5em;
    border-radius: 1em;
    padding: 1em;
    transition: all 0.3s;
}
.machine-menu__list a:hover {
    transform : translateY(-5px);
}
.machine-menu__list a img {
    width: auto;
    height: 5em;
}
.machine-menu__list a span {
    font-weight: 600;
    border-radius: 100px;
    padding: 0.25em 1em;
}

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

machine-menu__top

--------------------------------------------*/
.machine-menu__top {
    width: 97.5%;
    position: fixed;
    top: 160px;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    pointer-events: none;
    z-index: 60;
    transition: all 0.3s;
}
.machine-menu__top.is-active {
    opacity: 1;
    pointer-events: auto;
}
.machine-menu__top ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1em;
}
.machine-menu__top a {
    border: solid 2px var(--lightgrey);
    border-radius: 100px;
    padding: 0.25em 1em;
    transition: all 0.3s;
}
.machine-menu__top a:hover {
    transform : translateY(-5px);
}

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

article-machine

--------------------------------------------*/
.article-machine {
    display: flex;
    flex-direction: column;
    gap: 2.5em;
    padding: 5em 0;
}

/* article-machine__title */
.article-machine__title {
    max-width: 810px;
    width: 90%;
    margin: 0 auto;
    font-size: 200%;
    display: flex;
    align-items: center;
    gap: 0.5em;
}
.article-machine__title img {
    width: auto;
    height: 2.5em;
}
.article-machine__title h2 {
    font-size: 100%;
}

/*--------------------------------------------
article-machine section
--------------------------------------------*/
.article-machine section {
    display: flex;
    flex-direction: column;
    gap: 2em;
    background: var(--white);
    border-radius: 2em;
    padding: 2em;
}

.article-machine section h3 {
    font-size: 160%;
    display: flex;
    align-items: center;
    gap: 1em;
}
.article-machine .machine_ranking {
    font-size: 80%;
    border-radius: 100px;
    padding: 0.25em 1em;
    font-weight: 500;
}

/* machine-contents */
.machine-contents {
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
}
.machine-contents img,
.machine_contents__detail {
    width: calc(50% - 0.5em);
}

/* machine-contents__detail */
.machine_contents__detail {
    display: flex;
    flex-direction: column;
    gap: 1em;
}

/* machine-muscle */
.machine-muscle {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
}
.machine-muscle dt {
    width: fit-content;
    border-radius: 100px;
    padding: 0.25em 1em;
    font-weight: 500;
}

/* machine-effect */
.machine-effect {
    display: flex;
    flex-direction: column;
    gap: 1em;
    background: var(--lightgrey);
    border-radius: 1em;
    padding: 1em;
}
.machine-effect h4 {
    width: 100%;
    background: var(--white);
    border-radius: 100px;
    padding: 0.25em 1em;
    text-align: center;
    margin: 0;
}
.machine-effect dl {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
}
.machine-effect dt {
    width: fit-content;
    border-radius: 100px;
    padding: 0.25em 1em;
    font-weight: 500;
}

/* reference-link */
.reference-link {
    text-align: center;
    max-width: 500px;
    width: 100%;
    margin: 0 auto;
    font-size: 150%;
    border-radius: 0.5em;
    padding: 0.25em 1em;
    transition: all 0.3s;
    color: var(--white);
}
.reference-link:hover {
    transform: translateY(-5px);
}


/* machine_ranking__s */
.article-machine .machine_ranking__s .machine_ranking {
    color: var(--white);
    background: rgb(167, 124, 31);
}

/* machine_ranking__a */
.article-machine .machine_ranking__a .machine_ranking {
    color: var(--white);
    background: rgb(140, 149, 159);
}

/* machine_ranking__b */
.article-machine .machine_ranking__b .machine_ranking {
    color: var(--white);
    background: rgb(180, 104, 53);
}