/* CSS Document */
.isOtherDevice .sp_only {
    display: none;
}

.p-youto .inner {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 30px 3%;
}

/*.mod_catalog-Btn*/
.mod_catalog-Btn a {
    color: #FFF;
    margin-top: 10px;
    padding-top: 16px !important;
    line-height: 1.4;
    font-size: 12px;
    font-size: 1.2rem;
}

.mod_catalog-Btn a:after {
    content: none;
}

.mod_catalog-Btn .txt {
    font-size: 19px !important;
    margin-top: 13px !important;
    font-weight: bold;
}

.mod_catalog-Btn a:after {
    place-self: center;
    width: 10px;
    height: 10px;
    margin-top: 10px;
    position: static;
    border-top: solid 2px #fff;
    border-right: solid 2px #fff;
}


.mod_catalog-Btn a {
    border-bottom: 84px solid #d1c038;
}

/*mainVisual*/

.ttl_box .txt {
    line-height: normal;
}

.mainVisual-Head {
    position: relative;
}

.ayl_badge {
    position: absolute;
    right: 0px;
    top: -30px;
}

.ayl_badge img {
    width: 200px;
}

#contents.p-youto article.senior {
    margin-top: 60px;
    padding: 80px 0px;
}

.mod_slanting_head .ttl {
    margin: 20px 0px;
}

.mod_slanting_head ul {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    row-gap: 20px;
}

.mod_slanting_head {
    max-width: 1000px !important;
}

.mod_slanting_head li {
    width: 23%;
    text-align: center;
    align-content: center;
    border-radius: 10px;
    background-color: #FFF;
}

.mod_slanting_head li p {
    display: block;
    padding: 4px;
    color: #2C2C2C;
    font-size: 1.4rem;
    line-height: 1.5;
    border-radius: 10px;
}

.mod_limiter p {
    margin-top: 10px;
    font-size: 1.8rem;
    text-align: center;
    line-height: 2;
}

.scene {
    margin: 40px 0px 60px;
}

.youto li p {
    font-weight: bold;
}

.scene>li {
    padding: 20px;
    display: flex;
    flex-direction: column;
    border: solid 1px #7a9d7a;
    justify-content: flex-start;
}

.scene p span {
    display: inline-block;
    background-color: #d6e3d6;
    font-size: 1.3rem;
    margin: 3px;
    padding: 5px;
}

.scene h3 {
    font-weight: bold;
    font-size: 2.3rem;
    margin: 10px 0px;
}

.mod_limiter p span {
    font-weight: bold !important;
}

.flex {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    row-gap: 20px;
}

.flex.column_pc4_sp2 .item .name {
    /*text-align: left;*/
    font-weight: bold;
    font-size: 1.8rem;
}

.flex.column_pc4_sp2 .item .name span {
    display: block;
    font-weight: normal !important;
    font-size: 1rem;
}

.flex.column_pc4_sp2 .item {
    background-color: #fff;
    border-radius: 10px;
    padding: 20px;
    height: 100%;
    text-align: -webkit-center;
    display: flex;
    row-gap: 20px;
}

ul.flex.column_pc4_sp2 {
    max-width: 1100px;
    padding: 30px 50px 50px;
}

#contents .mod_local-nav {
    position: sticky;
    top: 0;
    z-index: 20;
}

.flex.column_pc4_sp2 .item img {
    max-width: 155px !important;
    width: auto;
}

.flex.column_pc4_sp2 li {
    position: relative;
}

.ayl_info {
    margin-left: 20px;
    align-content: center;
}

.sample img {
    width: 50% !important;
}

.sample.flex {
    width: 100%;
    justify-content: flex-start;
}

figure.pic {
    align-content: center;
}

.center {
    text-align: -webkit-center;
}

@media screen and (min-width: 768px) {
    .flex.column_pc4_sp2 li {
        width: 49%;
    }

    .flex.column_pc4_sp2 .item .txt {
        font-size: 1.2rem;
    }
}

@media screen and (max-width: 768px) {

    .mod_page-title {
        margin: 0px !important;
        overflow-x: hidden;
    }

    .ayl_badge {
        position: absolute;
        right: -30px;
        top: -30px;
    }

    .mod_limiter p {
        font-size: 14px;
        text-align: left;
        padding: 0px 40px;
    }

    .ayl_badge img {
        width: 140px !important;
    }

    #contents .mod_local-nav {
        width: 100%;
        background: url(/ayl/images/common/bg_local_nav.png);
        background-color: #80a280;
        z-index: 20;
        position: sticky;
        top: 43px;
    }

    .mod_local-nav ul {
        text-align: center !important;
        display: flex;
        justify-content: space-around;
    }

    .mod_local-nav li {
        width: 25%;
    }

    .mod_local-nav ul li a {
        display: block;
        width: auto;
        padding: 6px 0;
        color: #fff;
        font-weight: bold;
        font-size: 16px;
        font-size: 1.3rem;
    }

    /*
    .mod_local-nav ul li:first-child a span {
        border-left: 2px solid rgba(255, 255, 255, 0.5);
    }*/
    .mod_local-nav ul li a span {
        display: block;
        border-right: 2px solid rgba(255, 255, 255, 0.5);
        /* padding-bottom: 20px; */
        position: relative;
        font-size: 10px;
    }

    .mod_local-nav ul li:last-child a span {
        border: none !important;
    }

    .flex.column_pc4_sp2 .item .txt {
        height: auto;
    }

    .scene {
        margin-top: 0px;
    }

    .scene>li {
        height: auto !important;
        padding: 20px 0px;
    }

    .scene p span {
        font-size: 1.3rem;
    }

    .scene img {
        width: 80%;
        align-self: center;
    }
}

@media screen and (max-width: 767px) {

    /*MV下リード文*/

    /*おすすめ用途別カタログギフト*/
    #contents.p-youto.s-business article.senior {
        background-color: #d6e3d6;
    }

    p.read {
        padding: 30px;
    }

    #contents.p-youto article.senior {
        background-image: url(/ayl/images/common/bg_box_pattern.png);
        background-repeat: repeat;
        -webkit-background-size: 84px 84px;
        background-size: 84px 84px;
        padding: 60px 0;
    }

    #contents article:not(:nth-of-type(1)) {
        margin-top: 60px;
    }

    .send>p {
        margin: 10px;
    }

    .mod_slanting_head ul {
        row-gap: 10px;
    }

    .mod_slanting_head li {
        width: 49%;
        height: 45px;
    }

    .mod_slanting_head li p {
        font-size: 1.2rem;
        text-align: center;
    }

    .flex.column_pc4_sp2 .item .txt {
        height: auto;
    }

    ul.flex.column_pc4_sp2 {
        max-width: 100%;
        padding: 0px;
    }

    .flex.column_pc4_sp2 li p {
        color: #333;
        margin-bottom: 7px;
    }

    .catalog_image {
        height: 165px;
        margin-bottom: 40px;
    }

    .catalog_image_square {
        height: 165px;
        padding: 13% 0%;
        margin-bottom: 40px;
    }

    .flex.column_pc4_sp2 li {
        width: 100%;
        height: auto;
    }

    .name {
        display: block !important;
    }
}

span.auto_br {
    display: inline-block;
}

/*.katachi*/
.customer img {
    width: auto;
    height: 80px;
    max-height: 100%;
    margin-bottom: 30px;
}

.customer {
    margin: 20px 0px 40px;
}

.katachi {
    padding: 30px 0px 60px;
}

.katachi h3 {
    font-weight: bold;
    font-size: 2.6rem;
    margin-top: 50px;
    text-align: center;
}

.customer li h3 {
    font-weight: bold;
    font-size: 1.8rem;
    margin-top: 0;
}

.customer li {
    background-color: #F4F4F4;
    padding: 30px;
    align-items: center;
    display: flex;
    flex-direction: column;
}

.customer li p {
    text-align: left;
}

.mod_limiter {
    padding: 0px !important;
}

.mod_limiter .check li {
    width: 80%;
    position: relative;
    font-size: 2rem;
    background: none;
    padding: 0px 0px 0px 60px;
    font-weight: bold;
    text-align: left;
    margin: 20px auto;
}

.check li::before {
    color: #80a280;
    content: '';
    display: inline-block;
    width: 2em;
    height: 2em;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' fill='%2380a280' version='1.1' id='Capa_1' width='30px' height='30px' viewBox='0 0 26.362 26.361' xml:space='preserve'%3E%3Cg%3E%3Cpath d='M24.361,0H2C0.896,0,0,0.896,0,2v22.361c0,1.104,0.896,2,2,2h22.36c1.104,0,2-0.896,2-2V2C26.361,0.896,25.465,0,24.361,0z M21.125,9.953l-8.199,8.2c-0.375,0.375-0.884,0.586-1.414,0.586c-0.529,0-1.039-0.21-1.414-0.586l-4.861-4.862 c-0.781-0.78-0.781-2.047,0-2.828c0.781-0.78,2.047-0.78,2.828,0l3.447,3.447l6.785-6.785c0.781-0.78,2.047-0.78,2.828,0 C21.908,7.907,21.908,9.172,21.125,9.953z'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    top: -3px;
    left: 15px;
}

ul.check {
    background-color: #F4F4F4;
    padding: 40px;
    border-radius: 10px;
    width: 60%;
    margin: 40px auto;
}

.issue {
    background-color: #e4ebe4;
    padding: 20px !important;
    border-radius: 10px;
}

ul.okomari {
    margin: 3rem 0;
}

.okomari li {
    background-color: transparent;
}

.okomari p {
    background-color: #FFF;
    font-size: 1.8rem !important;
    padding: 1rem !important;
}

article#category {
    margin-bottom: 60px;
}

@media screen and (max-width: 768px) {

    /*ご注文前に確認したいこと*/
    .contents .mod_btn-catalog-all a img {
        padding: 5px;
    }

    span.fcP {
        color: #80a280;
    }

    .contents .mod_btn-catalog-all {
        padding: 0;
    }

    .customer li {
        width: 48%;
        height: auto;
        padding: 15px 10px;
    }

    .mod_limiter .button {
        width: auto;
        margin: 20px 0px;
    }

    .mod_limiter .button a {
        width: 80% !important;
    }

    #p_category .asyoulike {
        position: relative;
        padding: 50px 10px !important;
    }

    #p_category.is_business .box {
        padding: 50px 10px !important;
        margin: 0px;
    }

    .katachi h3 {
        font-size: 2rem;
        margin-top: 15px;
    }

    .issue {
        border-radius: 0px;
    }

    ul.okomari {
        margin: 1rem 0;
    }

    .customer img {
        margin: 8px;
    }

    .okomari li {
        height: auto;
        width: 49%;
    }

    .okomari p {
        font-size: 1.5rem !important;
        height: 7rem;
        align-content: center;
    }
}

/*contact*/
.contact {
    background-color: #80a280;
    padding: 50px 0px;
    margin-top: -30px !important;
}

.contact p {
    color: #FFFFFF;
    font-weight: bold;
}

.contact p span {
    font-size: 3rem;
}

.contact .button a img {
    width: 20px;
}

/*
.contact object:hover path {
    fill: #d1c038;
  }*/

.st0 {
    fill: #FFF;
    transition: fill 0.3s ease;
}

.contact a:hover .st0 {
    fill: #d1c038;
    /* ホバー時の色 */
}

@media screen and (max-width: 768px) {

    .contact p {
        text-align: center;
    }

    .contact p span {
        line-height: 1.5;
        font-size: 2.5rem;
    }

}


.mod_limiter .button a {
    background: #d1c038;
    border-radius: 3px;
    font-size: 2.1rem;
    font-weight: bold !important;
    position: relative;
    display: flex;
    column-gap: 12px;
    justify-content: center;
    align-items: center;
    margin: 20px auto;
    padding: 10px 30px 10px 10px;
    color: #FFFFFF;
    transition: 0.3s ease-in-out;
    border: 2px solid #FFFFFF;
    width: 60%;
}

.mod_limiter .button a:after {
    content: "";
    position: absolute;
    top: 50%;
    bottom: 0;
    right: 2rem;
    font-size: 90%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: right 0.3s;
    width: 6px;
    height: 6px;
    border-top: solid 2px currentColor;
    border-right: solid 2px currentColor;
    transform: translateY(-50%) rotate(45deg);
}

.mod_limiter .button a:hover {
    background: #FFFFFF;
    color: #d1c038;
    border: 2px solid #FFFFFF;
}

.mod_limiter .button a:hover:after {
    right: 1.4rem;
}

/*office-support*/

article.office-support {
    background-image: url(/ayl/images/common/bg_box_pattern.png);
    background-repeat: repeat;
    -webkit-background-size: 84px 84px;
    background-size: 84px 84px;
    background-color: #d6e3d6;
    margin-top: 0px !important;
    padding: 60px;
}

.office-support-list {
    margin-top: 40px;
}

.office-support-list li {
    position: relative;
    width: calc(33.333% - 16px);
    min-height: 100%;
    margin-left: 16px;
    align-content: baseline;
    background-color: #fff;
    -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, .16);
    box-shadow: 0 3px 6px rgba(0, 0, 0, .16);
}

.office-service-item-pic-recommend {
    position: absolute;
    background-color: #eb1010;
    font-size: 1.5rem !important;
    padding: 0 10px !important;
    color: #fff !important;
    border-radius: 0px !important;
    z-index: 100;
    top: 5%;
    width: fit-content;
}
.office-support-list .pic {
    position: relative;
    min-height: 210px;
}

.office-support-list img {
    width: auto;
}

.office-support-detail {
    padding: 0px 10px 28px 16px !important;
    font-size: 1.2rem !important;
    text-align: left !important;
    font-weight: normal;
    line-height: 2 !important;
    color: #333 !important;
}

.office-support-list .name {
    margin: 10px 0;
    font-weight: 700;
    font-size: 2.4rem;
    line-height: 1.2;
    align-content: center;
    height: 2.3em;
}

@media screen and (max-width: 768px) {

    /*サポートとサービス*/
    .office-support-list img {
        width: 100%;
    }

    .office-support-list li {
        width: 48%;
        margin: 0px;
    }

    ul.office-support-list {
        margin-top: 30px !important;
    }

    ul.office-support-list {
        row-gap: 12px;
    }

    .office-support-list .pic {
        font-size: 1.6rem;
        text-align: center;
        margin: 20px 0px 10px;
        padding: 0;
        min-height: auto;
    }

    .office-support-list .name {
        font-size: 1.6rem;
        text-align: center;
        padding: 0px;
        margin: 20px 0px 10px;
    }
}

/*category*/
/*#category .ttl {
    margin-bottom: 30px;
}*/

.category_bottom ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 40px 0 0;
}

.category_bottom li a {
    display: flex;
    align-items: center;
    padding: 5px 10px;
    border-radius: 7px;
    background-color: #F4F4F4;
    margin: 0 0 15px 0;
}

.category_bottom ul li span {
    width: 30px;
    display: block;
    margin-right: 10px;
}

.category_bottom .name {
    display: flex;
    height: 3rem;
    align-items: center;
    margin: 5px 0;
    font-weight: bold;
}

.category_bottom li {
    width: 22%;
    margin-right: 2.5%;
    text-align: center;
}


@media screen and (max-width: 768px) {

    /*感謝の気持ちが伝わるビジネスギフト*/
    div#category {
        padding: 50px 10px !important;
    }

    .category_bottom li {
        width: 49%;
        margin-right: 0%;
        text-align: center;
        font-size: 1.2rem;
    }

    .category_bottom .name {
        height: 2rem;
    }

    ul.check {
        padding: 20px 0px;
        width: 100%;
    }

    .check li::before {
        top: -2px;
        left: 0px;
    }

    .mod_limiter .check li {
        width: 88%;
        font-size: 1.6rem;
        padding: 0px 0px 0px 42px;
    }
}

/*q_and_a*/

.q_and_a {
    background-color: #F4F4F4;
    padding-bottom: 60px;
    margin-top: 0px !important;
}

.q_and_a .title h2 {
    font-size: 3.6rem;
    padding: 10px 0;
    font-weight: 700;
    text-align: center;
}

.q_and_a .title h2 span {
    font-size: 2.4rem;
}

.q_and_a .title:before {
    content: "";
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' height='50px' width='50px' version='1.1' id='_x32_' viewBox='0 0 512 512' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%2380a280;%7D%0A%3C/style%3E%3Cg%3E%3Cpath class='st0' d='M256,0C114.616,0,0,114.612,0,256s114.616,256,256,256s256-114.612,256-256S397.385,0,256,0z M207.678,378.794 c0-17.612,14.281-31.893,31.893-31.893c17.599,0,31.88,14.281,31.88,31.893c0,17.595-14.281,31.884-31.88,31.884 C221.959,410.678,207.678,396.389,207.678,378.794z M343.625,218.852c-3.596,9.793-8.802,18.289-14.695,25.356 c-11.847,14.148-25.888,22.718-37.442,29.041c-7.719,4.174-14.533,7.389-18.769,9.769c-2.905,1.604-4.479,2.95-5.256,3.826 c-0.768,0.926-1.029,1.306-1.496,2.826c-0.273,1.009-0.558,2.612-0.558,5.091c0,6.868,0,12.512,0,12.512 c0,6.472-5.248,11.728-11.723,11.728h-28.252c-6.475,0-11.732-5.256-11.732-11.728c0,0,0-5.645,0-12.512 c0-6.438,0.752-12.744,2.405-18.777c1.636-6.008,4.215-11.718,7.508-16.694c6.599-10.083,15.542-16.802,23.984-21.48 c7.401-4.074,14.723-7.455,21.516-11.281c6.789-3.793,12.843-7.91,17.302-12.372c2.988-2.975,5.31-6.05,7.087-9.52 c2.335-4.628,3.955-10.067,3.992-18.389c0.012-2.463-0.698-5.702-2.632-9.405c-1.926-3.686-5.066-7.694-9.264-11.29 c-8.45-7.248-20.843-12.545-35.054-12.521c-16.285,0.058-27.186,3.876-35.587,8.62c-8.36,4.776-11.029,9.595-11.029,9.595 c-4.268,3.718-10.603,3.85-15.025,0.314l-21.71-17.397c-2.719-2.173-4.322-5.438-4.396-8.926c-0.063-3.479,1.425-6.81,4.061-9.099 c0,0,6.765-10.43,22.451-19.38c15.62-8.992,36.322-15.488,61.236-15.429c20.215,0,38.839,5.562,54.268,14.661 c15.434,9.148,27.897,21.744,35.851,36.876c5.281,10.074,8.525,21.43,8.533,33.38C349.211,198.042,347.248,209.058,343.625,218.852 z'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
    background-position-x: center;
    width: 100%;
    height: 30px;
    display: block;
    margin: 30px auto 0px;
    vertical-align: middle;
}

.q_and_a h3 {
    font-size: 2.4rem;
    text-align: center;
    font-weight: 600;
    margin-bottom: 30px;
}

.q_and_a dt {
    font-size: 2rem;
    font-weight: bold;
    border-bottom: 2px solid #80a280;
}

.q_and_a dl {
    margin: 0 0 40px 0;
    text-align: left;
}

.q_and_a dd {
    background-color: #fff;
    padding: 15px;
    font-size: 1.8rem;
}

.question:before {
    content: "Q.";
    color: #80a280;
    font-size: 1.6rem;
}

.q_and_a a {
    /*color: #80a280;*/
    border-bottom: 1px solid #80a280;
}

.q_and_a .mod_head {
    width: 100%;
    max-width: 1000px;
    margin: auto;
    padding-top: 30px;
}

.eng_tag {
    font-family: "Oswald", sans-serif;
    letter-spacing: 2px;
    text-align: center !important;
    font-weight: 700 !important;
}

@media screen and (max-width: 768px) {

    /*よくある質問*/
    .q_and_a {
        padding: 0px 30px 40px !important;
    }

    .q_and_a .title h2 {
        font-size: 2.4rem;
        padding: 10px 0px 0px 0px;
    }

    .q_and_a h3 {
        font-size: 2rem;
        margin-bottom: 20px;
    }

    .q_and_a dt {
        font-size: 1.6rem;
    }

    .q_and_a dd {
        font-size: 14px;
    }

}

/*todayshipping*/
#todayshipping.ttl {
    margin-bottom: 30px;
}

#todayshipping img {
    margin: 10px 0 0 0;
}

#todayshipping {
    margin-top: 20px;
}

.mod_h2 {
    padding: 0px !important;
}