body {
    box-sizing: border-box;
    font-weight: bold;
    background-image: url(../background-img.png);
    background-repeat: repeat;
    background-attachment: fixed;
}

main img {
    display: block;
    width: 100%;
}

.bp {
    display: inline-block;
}

#article p {
    margin: 0;
}

#article {
    background-color: rgba(255, 217, 0, 0.1);
    padding: 100px 8px 32px;
}

#article .breadcrumb {
    text-align: left;
    max-width: 1100px;
    margin: auto;
}

#article .breadcrumb a {
    color: #000;
    text-decoration: none;
    display: inline;
}

#article .breadcrumb span {
    display: inline-block;
}

#article .art-inner{
    margin: 10px auto;
    max-width: 1100px;
    border: 2px solid #000;
    background-color: #fff;
    padding: 12px;
    padding-right: 20px;
}

#article h1 {
    text-decoration: underline;
    text-underline-offset: 6px;
    max-width: 900px;
    margin: 1em auto;
}

#article .art-content {
    margin: 80px auto;
    max-width:900px;
}

#article h2 {
    margin: 0 0 12px 0;
    background:linear-gradient(transparent 60%, #99CCCC 60%);
    width: fit-content;
}

#article h3 {
    margin: 4px 0;
}

#article .art-inner .picture {
    display: block;
    margin: 16px auto;
    max-width: 480px;
    align-items: center;
    box-shadow: 8px 8px 0 #FFD900;
    border: 1px solid #000;
    object-fit: cover;
}

/** content **/
#article .art-inner .content {
    margin: 1em auto;
}

#article .art-inner
.content ol,#article .art-inner
.content ul,#article .art-inner
.content dl {
    margin: 10px auto;
    padding-left: 1em;
    line-height: 1.8;
}

#article .art-inner
.content ol li,#article .art-inner
.content ul li {
    margin: 8px 0;
}

/** gallery **/
#article .art-inner .gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(max(128px, calc((100% - 30px) / 4)), 1fr));
  max-width: 1100px;
  justify-content: center;
  justify-items: center;
  margin: 28px auto;
  gap: 10px;
}

#article .art-inner .gallery img {
  aspect-ratio: 3/2;
  object-fit: cover;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
}

#article .art-inner .btns {
    margin: 40px auto 0;
}

.btn {
    background-color: #FFD900;
    margin: 0 auto;
    margin-top: 1em;
    width: 100%;
    max-width: 300px;
    height: 80px;
    text-align: center;
    display: table;
    transition: background-position 1s;
    background-position: -350px 0;
    background-repeat: no-repeat;
    background-image: url(../btn.png);
}

.btn:hover {
    background-position: 0px 0;
}

.btn-wrapper {
    text-decoration: none;
    color: #000;
    font-weight: bold;
}

.btn {
    display: flex;
    vertical-align: middle;
    justify-content: space-evenly;
    align-items: center;
}

.btn a {
    display: table-cell;
    vertical-align: middle;
    font-weight: bold;
    text-decoration: none;
    color: #333333;
    transition: color 0.3s;
}

.btn img {
    width: 11px;
    height: 20px;
}

@media (min-width:700px) {
    .btn {
        width: 40vw;
    }
}

@media (min-width:854px) {
    .btn {
        max-width: 396px;
        height: 93px;
        background-position: -460px 0;
        background-image: url(../btn-2.png);
        margin: 0;
    }
}

@media (min-width:600px) {
    #article .art-inner {
        margin: 10px auto;
        padding: 8px 32px 48px;
    }   
}

@media (min-width:640px) {
    #article .breadcrumb {
        margin: 40px auto 0;
    }

    #article .art-inner h1 {
        font-size: 40px;
    } 

    /*** img-flex ***/
    #article .art-inner .img-flex .imgs {
        display: flex;
        max-width: 1100px;
        gap: 2%;
    }

    #article .art-inner .img-flex .imgs img {
        width: 49%;
        flex-shrink: 0;
        margin: 0 auto;
    }

    /** flex-box **/
    #article .art-inner .flex-box {
        display: flex;
        max-width: 1100px;
        gap: 2%;
        margin-bottom: 28px;
    }

    #article .art-inner .flex-box .content,#article .art-inner .flex-box .picture {
        width: 49%;
        margin: 0 auto;
    }

    #article .art-inner .article_btn-1 {
        padding: 30px 50px;
        margin: 0;
    }

    #article .art-inner .btns {
        display: flex;
        max-width: 850px;
        gap: 36px;
        justify-content: center;
    }
}

@media (min-width:800px) {
    #article .art-inner .article_btn-1 {
        padding: 30px 70px;
    }
}