body {
    font-family:  -apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Noto Sans","Helvetica Neue","Helvetica","Hiragino Kaku Gothic ProN","Meiryo",sans-serif;
}
a {
    color: #000;
    text-decoration: none;
}
a:hover {
    color: #000;
    text-decoration: none;
    opacity: 75%;
    cursor: pointer;
}

div.container {
    max-width: 1360px;
}
img.left-pane-logo {
    width: 101px;
    height: 93px;
    position: relative;
    top: 60px;
    left: 70px;
    margin-bottom: 120px;
}
img.header-logo {
    width: 56px;
    height: 52px;
}
div.header {
    padding: 5px 35px 35px;
}
div.header-left,
div.header-right {
   width: unset;
   padding: 0;
}
div.header-right button.btn-menu {
    width: 26px;
    height: 26px;
    position: relative;
}
div.header-right button.btn-menu::after {
    content: "";
    background-image: url(../images/burgermenu.png);
    width: 26px;
    height: 26px;
    position: absolute;
    top: 0;
    left: 0;
}
div.menu {
    margin-left: 65px;
    position: relative;
    font-size: 1em;
    color: #512120;
    margin-bottom: 28px;
}
div.menu a,
div.submenu a {
    color: #512120;
}
div.menu a:hover,
div.submenu a:hover {
    border-bottom: 1px solid #512120;
    color: #512120;
}
div.submenu {
    margin-left: 90px;
    position: relative;
    font-size: 0.9em;
    color: #512120;
    margin-bottom: 14px;
}
#collapseStyling {
    margin-bottom: 28px;
}
div.for-retail {
    margin: 150px 40px 28px;
    padding: 0.6em 1.2em;
    position: relative;
    border: 1px solid #512120;
    font-size: 0.7em;
}
div.follow-us .label {
    margin: 0 40px 12px;
    position: relative; 
    font-size: 1em;
    color: #512120;
}
div.follow-us .icon-container {
    margin: 0 40px 28px;
    position: relative; 
}
div.follow-us .icon-container a {
    margin-right: 20px;
}

div.main-contents {
    background-color: #fbf8f7;
    padding: 60px 65px;
    width: 64.8%;
}
div.main-contents .page-title h1 {
    font-size: 1.2em;
    margin: 60px 0;
}
div.main-contents .page-title h2 {
    font-size: 1.1em;
    margin: 20px 0;
}
div.main-contents .title-sub h1 {
    display: inline-block;
    margin-right: 30px;
}
div.main-contents .title-sub h2 {
    display: inline-block;
}

div.main-contents .carousel-box {
    height: 535px;
    width:100%;
    max-width: 770px;
    margin: 4rem auto 10rem;
    background-position: center;
    background-size: cover;
}
div.main-contents .carousel-indicators {
    bottom: -3rem;
    z-index: 200;
}
div.main-contents .carousel-indicators [data-bs-target] {
    width: 10px;
    background-color: #512120;
    opacity: .3;
}
div.main-contents .carousel-indicators .active {
    opacity: 1;
}
div.main-contents .carousel-item {
    height: 535px;
    Width: 100%;
    background-position: center;
    background-size: cover;
}

div.main-contents .sec01,
div.main-contents .sec02 {
    margin-bottom: 2rem;
}
div.main-contents .sec01 .sub-title {
    font-size: 0.8rem;
    font-weight: 700;
    margin-top: 1.5rem;
}
div.main-contents .sec01 .news-img {
    width: 40%;
    max-width: 300px;
}
div.main-contents .sec01 .news-img img {
    width: 100%;
}
div.main-contents .sec01 .news-contents {
    font-size: 0.8em;
    width: 60%;
    padding-left: 2rem;
}
div.main-contents .sec02 .back-to-list {
    font-size: 0.8em;
    margin-top: 2rem;
}
div.main-contents section.footer .copyright {
    margin-top: 3rem;
    font-size: 0.5em;
}

div.top.main-contents .sec01,
div.top.main-contents .sec02,
div.top.main-contents .sec03,
div.top.main-contents .sec04 {
    margin-bottom: 8rem;
}
div.top.main-contents .sec01 .sec-title h2,
div.top.main-contents .sec02 .sec-title h2,
div.top.main-contents .sec04 .sec-title h2 {
    font-size: 1.5em;
    font-weight: 400;
    margin-bottom: 3.2rem;
}
div.top.main-contents .sec03 .sec-title h2 {
    font-size: 1.5em;
    font-weight: 400;
    margin-bottom: 2.0rem;
}
div.top.main-contents .sec01 .news-items {
    margin-bottom: 4rem;
}
div.top.main-contents .sec01 .news-date, 
div.top.main-contents .sec01 .news-title {
    font-size: 0.85em;
}
div.top.main-contents .sec01 button {
    font-size: 0.85em;
    font-weight: 600;
    border: 1px solid #000;
    border-radius: 0;
    width: 8rem;
    padding: 0;
}
div.top.main-contents .sec02 .sec-mv,
div.top.main-contents .sec02 .sec-contents {
    width: 48%;
}
div.top.main-contents .sec02 .sec-contents button {
    font-size: 1.0em;
    font-weight: 600;
    border: 1px solid #000;
    border-radius: 0;
    width: 8rem;
    padding: 0;
    color: #000;
    background-color: #fff;
    margin-top: 9rem;
}
div.top.main-contents .sec03 .sec-sub-title h3 {
    font-size: 0.90em;
    display: inline-block;
    margin: 0 1rem 2rem;
}
div.top.main-contents .sec03 .sec-sub-title h3 a {
    color: #808080;
}
div.top.main-contents .sec03 .sec-sub-title h3 a:hover,
div.top.main-contents .sec03 .sec-sub-title h3 a:active {
    color: #000;
    position: relative;/rolca/
}
div.top.main-contents .sec03 .sec-sub-title h3 a:hover:before,
div.top.main-contents .sec03 .sec-sub-title h3 a:active:before {
content: '';
position: absolute;
left: 50%;
bottom: -5px;
display: inline-block;
width: 30px;
height: 1px;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
background-color: #808080;
border-radius: 0;
}
div.top.main-contents .sec03 .slick-prev {
    top: 105%;
    left: 100%;
    margin-left: -80px;
    width: 30px;
}
div.top.main-contents .sec03 .slick-prev:before {
    content: '';
    background-image: url(../images/prev_icon.png);
    width: 30px;
    height: 5px;
    display: block;
    opacity: 1;
}
div.top.main-contents .sec03 .slick-prev:hover:before {
    background-image: url(../images/prev_icon_hov.png);
    cursor: pointer;
}
div.top.main-contents .sec03 .slick-next {
    top: 105%;
    right: 0;
    width: 30px;
}
div.top.main-contents .sec03 .slick-next:before {
    content: '';
    background-image: url(../images/next_icon.png);
    width: 30px;
    height: 5px;
    display: block;
    opacity: 1;
}
div.top.main-contents .sec03 .slick-next:hover:before {
    background-image: url(../images/next_icon_hov.png);
    cursor: pointer;
}
div.top.main-contents .sec03 .counter-box {
    text-align: right;
    margin-top: 1.8rem;
    font-size: 0.7em;
    margin-right: 1.8rem;
}
div.top.main-contents .sec03 .slick-slide {
    margin: 0 0.5rem;
}
div.top.main-contents .sec03 .slick-list {
    margin: 0 -0.5rem;
}
div.top.main-contents .sec04 .sec-contents {
    margin-bottom: 2rem;
}
div.top.main-contents .sec04 .sec-contents p {
    font-size: 1.2em;
}
div.top.main-contents .sec04 .sec-contents button {
    font-size: 1.0em;
    font-weight: 400;
    border: 2px solid #808080;
    border-radius: 0;
    width: 13rem;
}
div.top.main-contents .sec04 .image-box img {
    width: 32%;
}

div.news-items {
    width: 21%;
    margin-bottom: 8rem;
}
div.news-items img {
    width: 100%;
}
div.news-items .news-date,
div.news-items .news-title {
    font-size: 0.85em;
    margin-top: 8px;
}
div.main-contents .sec01 .news-title {
    margin-bottom: 1.2rem;
}

div.styling-items {
    width: 40%;
    margin-bottom: 2rem;
    text-align: center;
}
div.styling-items img {
    width: 100%;
    max-width: 296px;
}

div.main-contents .sec01 .sec-title h2,
div.main-contents .sec02 .sec-title h2 {
    font-size: 1.2em;
    font-weight: 700;
    margin-bottom: 1.5em;
}
div.main-contents .sec01 .sec-contents h3 {
    font-size: 0.8em;
    font-weight: 700;
    margin-bottom: 1.5rem;
}
div.main-contents .sec01 .sec-contents p {
    font-size: 0.8em;
}
div.main-contents .sec01 .sec-mv {
    width: 40%;
    margin-bottom: 1rem;
}
div.main-contents .sec01 .sec-mv img {
    max-width: 300px;
}
div.main-contents .sec01 .sec-contents {
    width: 60%;
    padding-left: 2rem;
}
div.main-contents .sec02 .sec-boxes {
    margin-bottom: 1.5rem;
}
div.main-contents .sec02 .sec-box {
    width: 43%;
    max-width: 370px;
    padding: 3% 7%;
    border: 1px solid #000;
}
div.main-contents .sec02 .sec-box .description h5 {
    font-size: 0.9em;
}
div.main-contents .sec02 .sec-box .description p {
    font-size: 0.8em;
}
div.main-contents .sec02 button {
    width: 80%;
    padding: 3%;
    border: 1px solid #653737;
    color: #fff;
    background-color: #653737;
}
div.main-contents .sec02 .sec-contents,
div.main-contents .sec03 .sec-contents,
div.main-contents .sec04 .sec-contents {
    width: 100%;
    font-size: 0.8em;
}
div.main-contents .sec03 .offices {
    font-family: "Hiragino Mincho ProN","YuMincho","Noto Sherif JP";
}
div.main-contents .sec03 .office01 {
    margin-bottom: 3rem;
}
div.main-contents .sec03 .sec-mv {
    margin-bottom: 1.5rem;
}
div.main-contents .sec03 .sec-mv img {
    width: 100%;
    max-width: 300px;
}
div.main-contents .sec03 .offices h1 {
    font-size: 1.2em;
    margin-bottom: 1.5rem;
}
div.main-contents .sec03 .offices h2 {
    font-size: 1em;
}
div.main-contents .sec03 .office-label,
div.main-contents .sec03 .office-content {
    font-size: 0.8em;
    margin-bottom: 1.2rem;
}
div.main-contents .sec03 .office-label {
    width: 25%
}
div.main-contents .sec03 .office-content {
    width: 75%;
}

div.main-contents.concepts .sec02,
div.main-contents.concepts .sec03,
div.main-contents.concepts .sec04 {
    margin-bottom: 5rem;
}

div.main-contents.concepts .sec-title {
    background-image: url(../images/concept-bg.png);
    background-repeat-x: repeat;
    background-repeat-y: no-repeat;
    background-position-y: 10px;
    margin-bottom: 2rem;
}
div.main-contents.concepts .sec-title-box {
    width: fit-content;
    background-color: #fff;
    margin: auto;
    padding: 0 15px;
}
div.main-contents.concepts .sec-title-box h2 {
    font-size: 1.3em;
    font-weight: 400;
    margin-bottom: 0;   
}
div.main-contents.concepts .sec-title-box h5 {
    font-size: 0.8em;
    font-weight: 400;
}
div.main-contents.concepts .sec-mv {
    width: 40%;
    max-width: 310px;
}
div.main-contents.concepts .sec-contents {
    line-height: 1.5rem;
    width: 60%;
    padding-left: 40px;
}
div.main-contents.concepts .sec-contents h5 {
    font-size: 1.0em;
    font-weight: 700;
}
div.main-contents.concepts .sec-contents p {
    margin-bottom: 2rem;
}
div.main-contents.concepts .sec-contents button {
    font-size: 1.0em;
    padding: 2px;
    border: 1px solid #000;
    border-radius: 0;
    width: 100px;
    margin-right: 0.5rem;
}

div.form-items {
    margin: 0 0 20px 0;
}
div.form-items .form-label {
    padding-top: 4px;
    flex: 0 0 155px;
}
div.form-items .form-fields input {
    padding: 0;
}
div.form-items .btn-formsubmit {
    padding: 7px 0;
    color: #fff;
    background-color: #EB6565;
    border: 1px solid #EB6565;
    width: 200px;
    font-size: 0.8em;
    position: relative;
}

div.shop-items {
    font-size: 0.8em;
}
div.shop-items .area-name {
    font-weight: 700;
    padding: 0 10px;
    margin-bottom: 14px;
    border-bottom: 1px dotted #000;
}
div.shop-items .shop-name {
    font-weight: 700;
    padding: 0 10px;
    margin-bottom: 14px;
    width: 30%;
}
div.shop-items .shop-address {
    padding: 0 10px;
    margin-bottom: 14px;
    width: 50%;
}
div.shop-items .shop-tel {
    padding: 0 10px;
    margin-bottom: 14px;
    width: 20%;
}
@media only screen and (max-width: 940px) {
    div.form-items .form-label {
        padding-top: 4px;
        width: 100%;
        flex: 0 0 100%;
    }
}
@media only screen and (max-width: 767px) {
    div.main-contents {
        padding: 10px 35px 35px;
    }
    div.main-contents .page-title h1 {
        margin-top: 10px;
        text-align: center;;
    }
    div.main-contents .page-title h2 {
        margin-top: 10px;
        text-align: center;;
    }
    div.main-contents .title-sub h1 {
        display: block;
        margin: 0 0 20px;
    }
    div.main-contents .title-sub h2 {
        display: block;
        margin-bottom: 40px;
    }


    div.top.main-contents .sec02 .sec-mv,
    div.top.main-contents .sec02 .sec-contents {
        width: 100%;
        text-align: center;
    }
    div.top.main-contents .sec02 .sec-mv {
        margin-bottom: 1.2rem;
    }
    div.top.main-contents .sec02 .sec-contents button {
        margin-top: 1.2rem;
    }
    div.top.main-contents .sec03 .slider_araival {
        margin: 0 -35px;
    }
    div.top.main-contents .sec03 .slick-slide img {
        width: 100%;
    }
    div.top.main-contents .sec03 .slick-prev {
        left: 50%;
        margin-left: -35px;
    }
    div.top.main-contents .sec03 .slick-next {
        right: 50%;
        margin-right: -35px;
    }
    div.top.main-contents .sec03 .counter-box {
        text-align: center;
        margin-top: 13%;
        margin-right: 0;
    }
    div.top.main-contents .sp-menu {
        margin-bottom: 8rem;
    }
    div.top.main-contents .sp-menu .sec-title h2 {
        font-size: 1.5em;
        font-weight: 400;
        margin-bottom: 3.2rem;
    }
    div.top.main-contents .sec04 .image-box img {
        width: 100%;
        margin-bottom: 1.2rem;
    }

    div.news-items {
        width: 46%;
    }
    div.main-contents .sec01 .news-img {
        width: 100%;
        max-width: none;
        margin: 0;
        text-align: center;
    }
    div.main-contents .sec01 .news-img img {
        width: 100%;
        max-width: 300px;
    }
    div.main-contents .sec01 .news-contents {
        width: 100%;
        padding-left: unset;
    }
    div.main-contents .sec01 .news-date {
        font-size: 0.7em;
    }
    div.main-contents .sec01 .news-title {
        font-size: 1.1em;
    }
    div.styling-items {
        width: 100%;
    }
    div.main-contents .sec01 .sec-title h2 {
        margin-bottom: 0;
    }
    div.main-contents .sec01 .sec-mv {
        width: 100%;
    }
    div.main-contents .sec01 .sec-contents {
        width: 100%;
        padding-left: 0;
    }
    div.main-contents .sec02 .sec-box {
        max-width: 370px;
        width: 100%;
    }
    div.main-contents section.footer .copyright {
        font-size: 0.25em;
    }
    div.main-contents.concepts .sec-mv {
        width: 100%;
        max-width: 310px;
    }
    div.main-contents.concepts .sec-contents {
        padding-left: 0;
    }
    div.main-contents.concepts .sec-mv {
        margin-bottom: 1.5rem;
    }
    div.modal-header {
        border-bottom: none;
    }
    #submenuModal div.modal-header {
        border-bottom: 1px solid #4d4d4d;
        padding-bottom: 0;
        padding-left: 3rem;
        margin-bottom: 1rem;
    }
    #submenuModal div.modal-header h5 {
        font-size: 1em;
        font-weight: 400;
        margin-top: 1.6rem;
    }
    #submenuModal div.modal-header h5:before {
        content: "";
        width: 10px;
        height: 10px;
        border-top: 2px solid #512120;
        border-right: 2px solid #512120;
        -webkit-transform: rotate(-135deg);
        transform: rotate(-135deg);
        z-index: 1600;
        float: left;
        margin-left: -20px;
        margin-top: 7px;
    }
    div.modal-dialog {
        margin: 0 0 0 auto;
        position: relative;
        float: right;
        width: 95%;
        height: 100%;
        height: 40rem;
    }
    div.modal-dialog .menu {
        margin-left: 1rem;
    }
    #submenuModal div.modal-dialog .menu {
        font-size: 0.95em;
    }
    div.modal-dialog .menu a {
        margin-left: 1rem;
        display: block;
    }
    div.modal-dialog .menu-sub a::after {
        content: "";
        width: 10px;
        height: 10px;
        border-top: 2px solid #512120;
        border-right: 2px solid #512120;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
        z-index: 1600;
        float: right;
        margin-right: 10px;
        margin-top: 6px;
    }
    div.modal-dialog .menu-border {
        margin: 0 0 40px 12px;
        width: 5rem;
        height: 1px;
        border-bottom: 1px solid #512120;
    }
    div.modal-dialog .for-retail {
        margin: 0 0 20px 12px;
        width: 60%;
    }
    div.modal-dialog .follow-us {
        margin: 0 0 0 12px;
    }
    div.modal-dialog .label {
        margin: 0 0 10px 10px;
        font-size: 0.9em;
    }
    div.modal-dialog .icon-container {
        margin: 0 0 20px 10px;
    }
    div.shop-items .shop-name {
        margin-bottom: 0;
        width: 100%;
    }
    div.shop-items .shop-address {
        margin-bottom: 0;
        width: 100%;
    }
    div.shop-items .shop-tel {
        width: 100%;
    }
}