@charset "utf-8";

/* ========================================================
	template.css => テンプレート用CSS
======================================================== */
html {
    font-size: 62.5%;
}
body {
    background-color: #fff;
    font-size: 10px;
    font-size: 1rem;
    line-height: 1.8;
    color: #000000;
    word-wrap: break-word;
    overflow-wrap: break-word;
    font-family: "游ゴシック", YuGothic, "Hiragino Kaku Gothic ProN",
        "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3",
        "メイリオ", "Meiryo", Verdana, Arial, Helvetica, sans-serif;
    font-weight: 400;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    width: 100%;
    height: 100%;
}
*,
*::before,
*::after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
    line-height: 1.8;
}
a[href] {
    color: #000000;
    text-decoration: underline;
    outline: none;
}
a[href]:hover {
    text-decoration: none;
}
a[href].a_reverse,
.a_reverse a[href] {
    text-decoration: none;
}
@media screen and (min-width: 769px) {
    a[href].a_reverse:hover,
    .a_reverse a[href]:hover {
        text-decoration: underline;
    }
}

a[href^="http"],
a[href^="mailto:"] {
    /*display: inline-block;*/
    word-break: break-all;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

label {
    cursor: pointer;
}
input,
select,
textarea,
button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    max-width: 100%;
    margin: 0;
    border-radius: 0;
    vertical-align: middle;
    font-family: inherit;
    outline: none;
    font-size: 100%;
}
::-webkit-input-placeholder {
    color: #ccc;
}
:-ms-input-placeholder {
    color: #ccc;
}
::-moz-placeholder {
    color: #ccc;
}
select::-ms-expand {
    display: none;
}

button {
    cursor: pointer;
}
iframe {
    max-width: 100%;
    vertical-align: middle;
}

.hidden {
    display: none;
}
.slick-slider * {
    outline: none;
}
@media screen and (min-width: 769px), print {
}
@media screen and (max-width: 768px) {
    body {
        font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN",
            "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ",
            "Meiryo", Verdana, Arial, Helvetica, sans-serif;
    }
    img {
        max-width: 100%;
        height: auto;
    }
}

/* pc / sp
============================================================================================================ */
.sp,
.sps {
    display: none !important;
}
@media screen and (min-width: 769px), print {
    .pc_break {
        position: relative;
        display: block;
        height: 0;
        overflow: hidden;
    }
    .pc_hidden {
        position: relative;
        overflow: hidden;
        display: block;
        height: 0;
    }
}
@media screen and (max-width: 768px) {
    .pc {
        display: none !important;
    }
    .sp {
        display: block !important;
    }
    img.sp,
    span.sp,
    br.sp,
    em.sp,
    strong.sp {
        display: inline !important;
    }
    td.sp,
    th.sp {
        display: table-cell !important;
    }
    .sp_break {
        position: relative;
        display: block;
        height: 0;
        overflow: hidden;
    }
}
@media screen and (max-width: 370px) {
    .sps {
        display: block !important;
    }
    img.sps,
    spsan.sps,
    br.sps,
    em.sps,
    strong.sps {
        display: inline !important;
    }
    .sps_non {
        display: none !important;
    }
}

/* transition
============================================================================================================ */
@media screen and (min-width: 769px) {
    body.init a[href],
    body.init a[href]::before,
    body.init a[href]::after,
    body.init button,
    body.init button::before,
    body.init button::after,
    body.init .basic_trs,
    body.init .basic_trs::before,
    body.init .basic_trs::after,
    body.init .basic_trs *,
    body.init .basic_trs *::before,
    body.init .basic_trs *::after {
        -webkit-transition: color 0.2s ease-in-out, background 0.2s ease-in-out,
            border 0.2s ease-in-out, opacity 0.2s ease-in-out;
        -o-transition: color 0.2s ease-in-out, background 0.2s ease-in-out,
            border 0.2s ease-in-out, opacity 0.2s ease-in-out;
        transition: color 0.2s ease-in-out, background 0.2s ease-in-out,
            border 0.2s ease-in-out, opacity 0.2s ease-in-out;
    }
    body.init a svg {
        -webkit-transition: fill 0.2s ease-in-out;
        -o-transition: fill 0.2s ease-in-out;
        transition: fill 0.2s ease-in-out;
    }
}

/* font family
============================================================================================================ */
.ff_en {
    font-family: Avenir, "Poppins", sans-serif;
    font-weight: 300;
}
.ff_en.m {
    font-weight: 500;
}

/* color
============================================================================================================ */
.c_theme {
    color: #aba8a0;
}

/* font
============================================================================================================ */
.fwb {
    font-weight: bold;
}
.fwn {
    font-weight: normal;
}

/* display
============================================================================================================ */
.db {
    display: block;
}
.dib {
    display: inline-block;
}

/* position
============================================================================================================ */
.pos-r {
    position: relative;
}

/* hover
============================================================================================================ */
@media screen and (min-width: 769px), print {
    a.hv_wh,
    button.hv_wh,
    a .hv_wh,
    .hv_wh a {
        position: relative;
        display: inline-block;
        vertical-align: middle;
        overflow: hidden;
    }
    a.hv_wh::after,
    button.hv_wh::after,
    a .hv_wh::after,
    .hv_wh a::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background-color: rgba(255, 255, 255, 0);
        z-index: 3;
    }
    body.init a.hv_wh::after,
    body.init button.hv_wh::after,
    body.init a .hv_wh::after,
    body.init .hv_wh a::after {
        -webkit-transition: background 0.2s;
        -o-transition: background 0.2s;
        transition: background 0.2s;
    }
    a[href].hv_wh:hover::after,
    button.hv_wh:hover::after,
    a[href]:hover .hv_wh::after,
    .hv_wh a[href]:hover::after {
        background-color: rgba(255, 255, 255, 0.3);
    }
    a[href].hv_wh.a20:hover::after,
    button.hv_wh.a20:hover::after,
    a[href]:hover .hv_wh.a20::after,
    .hv_wh.a20 a[href]:hover::after {
        background-color: rgba(255, 255, 255, 0.2);
    }
    a[href].hv_wh.a10:hover::after,
    button.hv_wh.a10:hover::after,
    a[href]:hover .hv_wh.a10::after,
    .hv_wh.a10 a[href]:hover::after {
        background-color: rgba(255, 255, 255, 0.1);
    }

    body.init a[href] .hv_op {
        -webkit-transition: opacity 0.2s;
        -o-transition: opacity 0.2s;
        transition: opacity 0.2s;
    }
    a[href].hv_op:hover,
    a[href]:hover .hv_op,
    button.hv_op:hover,
    .hv_op a[href]:hover {
        opacity: 0.7;
    }
    a[href].hv_op.a20:hover,
    a[href]:hover .hv_op.a20,
    .hv_op.a20 a[href]:hover {
        opacity: 0.8;
    }
    a[href].hv_op.a10:hover,
    a[href]:hover .hv_op.a10,
    .hv_op.a10 a[href]:hover {
        opacity: 0.9;
    }
    a[href].hv_op.a50:hover,
    a[href]:hover .hv_op.a50,
    .hv_op.a50 a[href]:hover {
        opacity: 0.5;
    }
}

.hv_zoom {
    position: relative;
    display: block;
    overflow: hidden;
}
.hv_zoom > * {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background-repeat: no-repeat;
    background-position: 50%;
    -webkit-background-size: cover;
    background-size: cover;
}
@media screen and (min-width: 769px), print {
    body.init a[href].hv_zoom > *,
    body.init a[href] .hv_zoom > * {
        -webkit-transition: -webkit-transform 0.6s, opacity 0.3s;
        -o-transition: -o-transform 0.6s, opacity 0.3s;
        transition: transform 0.6s, opacity 0.3s;
    }
    a[href]:hover .hv_zoom.s > * {
        -webkit-transform: scale(1.03);
        -ms-transform: scale(1.03);
        -o-transform: scale(1.03);
        transform: scale(1.03);
    }
    a[href]:hover.hv_zoom > *,
    a[href]:hover .hv_zoom > * {
        -webkit-transform: scale(1.05);
        -ms-transform: scale(1.05);
        -o-transform: scale(1.05);
        transform: scale(1.05);
    }
}

/* target
============================================================================================================ */
.target {
    display: block;
    position: relative;
    width: 1px;
    top: -80px;
}
.target.pt {
    top: -100px;
}
@media screen and (max-width: 768px) {
    .target {
        top: -50px;
    }
    .target.pt {
        top: -70px;
    }
}

/* w
============================================================================================================ */
.w {
    position: relative;
}
@media screen and (min-width: 769px), print {
    .w {
        width: 1000px;
        margin: 0 auto;
    }
    .mw {
        min-width: 1100px;
    }
    .m.m {
        padding: 0 40px;
    }
    .xw {
        position: relative;
        max-width: 1290px;
        padding-left: 30px;
        padding-right: 30px;
        margin: 0 auto;
    }
}
@media screen and (max-width: 768px) {
}

/* spパディング
============================================================================================================ */
@media screen and (max-width: 768px) {
    .sp_pd {
        padding-left: 5vw !important;
        padding-right: 5vw !important;
    }
    .sp_full {
        margin-left: -5vw !important;
        margin-right: -5vw !important;
    }
    .sp_full_l {
        margin-left: -5vw !important;
    }
    .sp_full_r {
        margin-right: -5vw !important;
    }
}

/* pageWrap
============================================================================================================ */
#pageWrap {
    position: relative;
    overflow: hidden;
}

/* linkPointer
============================================================================================================ */
@media screen and (min-width: 769px), print {
    .linkPointer {
        position: fixed;
        top: -100px;
        left: -100px;
        pointer-events: none;
        transition: transform 0.3s, opacity 0.5s;
        transition-timing-function: ease-out;
        z-index: 2000;
        opacity: 0;
    }
    .linkPointer::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 10px;
        height: 10px;
        margin: -5px 0 0 -5px;
        background-color: #cccccc;
        border-radius: 100%;
    }
    .linkPointer.show {
        opacity: 1;
    }
    .linkPointer > * {
        position: relative;
        width: 200px;
        height: 200px;
        -webkit-animation: link_pointer2 0.8s ease-in-out 0s alternate infinite;
        animation: link_pointer2 0.8s ease-in-out 0s alternate infinite;
    }
    .linkPointer > *::before {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        background: url(../images/parts/link_pointer.png) no-repeat 50%;
        -webkit-background-size: 100%;
        background-size: 100%;
        -webkit-animation: link_pointer 4s linear 0s infinite;
        animation: link_pointer 4s linear 0s infinite;
    }

    .linkPointer.zoom {
        opacity: 0.5;
    }
    .linkPointer.zoom::before {
        content: none;
    }
    .linkPointer.zoom > * {
        -webkit-transform: scale(0.8);
        -ms-transform: scale(0.8);
        -o-transform: scale(0.8);
        transform: scale(0.8);
        -webkit-animation: none;
        animation: none;
        visibility: hidden;
    }
    .linkPointer.zoom.show > * {
        -webkit-transition: opacity 0.8s, -webkit-transform 0.8s;
        -o-transition: opacity 0.8s, -o-transform 0.8s;
        transition: opacity 0.8s, transform 0.8s;
        -webkit-transform: scale(1.3);
        -ms-transform: scale(1.3);
        -o-transform: scale(1.3);
        transform: scale(1.3);
        opacity: 0;
        visibility: visible;
    }
}
@-webkit-keyframes link_pointer {
    0% {
        -webkit-transform: rotate(0);
    }
    100% {
        -webkit-transform: rotate(360deg);
    }
}
@keyframes link_pointer {
    0% {
        transform: rotate(0);
    }
    100% {
        transform: rotate(360deg);
    }
}
@-webkit-keyframes link_pointer2 {
    0% {
        -webkit-transform: rotate(0);
    }
    100% {
        -webkit-transform: rotate(360deg);
    }
}
@keyframes link_pointer2 {
    0% {
        transform: scale(0.8);
    }
    100% {
        transform: scale(1);
    }
}

/* header
============================================================================================================ */
#header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    border-bottom: 1px solid #eee;
    z-index: 1000;
}
#header .logo svg {
    fill: #a88c63;
}

/* nav_btn */
#header .nav_btn {
    position: absolute;
    right: 0;
    top: 0;
    height: 70px;
    z-index: 15;
}
#header .nav_btn a {
    position: relative;
    overflow: hidden;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    width: 125px;
    height: 100%;
    -ms-align-items: center;
    align-items: center;
    text-decoration: none;
    font-size: 1.6rem;
    letter-spacing: 0.15em;
    color: #a88c63;
}
#header .nav_btn::before,
#header .nav_btn::after,
#header .nav_btn a::after {
    content: "";
    position: absolute;
    left: 80px;
    top: 50%;
    width: 15px;
    margin-top: -1px;
    border-top: 1px solid #a88c63;
}
body.init #header .nav_btn::before,
body.init #header .nav_btn::after,
body.init #header .nav_btn a::after {
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
#header .nav_btn::before {
    width: 20px;
    -webkit-transform: translateY(-7px);
    -ms-transform: translateY(-7px);
    -o-transform: translateY(-7px);
    transform: translateY(-7px);
}
#header .nav_btn::after {
    width: 10px;
    -webkit-transform: translateY(7px);
    -ms-transform: translateY(7px);
    -o-transform: translateY(7px);
    transform: translateY(7px);
}
#header .nav_btn a span {
    display: block;
    position: relative;
}
#header .nav_btn a::before {
    content: "CLOSE";
    position: absolute;
    left: 0;
    top: 50%;
    -webkit-transform: translateY(-50%) translateY(-15px);
    -ms-transform: translateY(-50%) translateY(-15px);
    -o-transform: translateY(-50%) translateY(-15px);
    transform: translateY(-50%) translateY(-15px);
    color: #fff;
    opacity: 0;
}
body.init #header .nav_btn a span,
body.init #header .nav_btn a::before {
    -webkit-transition: opacity 0.3s ease-in-out,
        -webkit-transform 0.3s ease-in-out;
    -o-transition: opacity 0.3s ease-in-out, -o-transform 0.3s ease-in-out;
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}
/* nav_btn open */
#header.open .nav_btn::before,
#header.open .nav_btn::after,
#header.open .nav_btn a::after {
    border-color: #fff !important;
}
#header.open .nav_btn a::after {
    width: 0;
    opacity: 0;
}
#header.open .nav_btn::before {
    -webkit-transform: translateY(0) rotate(45deg);
    -ms-transform: translateY(0) rotate(45deg);
    transform: translateY(0) rotate(45deg);
}
#header.open .nav_btn::after {
    width: 20px;
    -webkit-transform: translateY(0) rotate(-45deg);
    -ms-transform: translateY(0) rotate(-45deg);
    transform: translateY(0) rotate(-45deg);
}
#header.open .nav_btn a span {
    -webkit-transform: translateY(15px);
    -ms-transform: translateY(15px);
    -o-transform: translateY(15px);
    transform: translateY(15px);
    opacity: 0;
}
#header.open .nav_btn a::before {
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    opacity: 1;
}

@media print {
    #header {
        position: absolute;
    }
}
@media screen and (min-width: 769px), print {
    #header {
        -webkit-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
        -o-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
        height: 80px;
        padding: 0 35px;
        justify-content: space-between;
        -ms-align-items: center;
        align-items: center;
        background-color: #fff;
    }
    #header .nav_btn {
        display: none;
    }
    #header .nav_btn:hover::after,
    #header .nav_btn:hover a::after {
        width: 20px;
    }
    #header nav.horizontal > *,
    #header nav.horizontal > * > * {
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
        -ms-align-items: center;
        align-items: center;
    }
    #header nav.horizontal ul a {
        position: relative;
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
        justify-content: center;
        -ms-align-items: center;
        align-items: center;
        text-align: center;
        text-decoration: none;
        font-size: 1.5rem;
        line-height: 1.5;
        letter-spacing: 0.15em;
    }
    #header nav.horizontal .gnav > li {
        position: relative;
    }
    #header nav.horizontal .gnav > li > a {
        height: 80px;
        padding: 0 20px;
        color: #d1ccbd;
    }
    #header nav.horizontal .gnav > li > a::after {
        content: "";
        position: absolute;
        top: 50%;
        right: 10px;
        width: 10px;
        height: 10px;
        margin-top: -5px;
        border-radius: 100px;
        background-color: #a88c63;
        opacity: 0;
    }
    #header nav.horizontal .gnav > li:hover > a,
    #header nav.horizontal .gnav > li > a.current {
        color: #a88c63;
    }
    #header nav.horizontal .gnav > li:hover > a::after,
    #header nav.horizontal .gnav > li > a.current::after {
        opacity: 1;
    }
    #header nav.horizontal .reserve {
        margin-left: 20px;
    }
    #header nav.horizontal .reserve a {
        min-width: 170px;
        max-width: 220px;
        width: 15vw;
        height: 40px;
        padding-top: 2px;
        font-size: 1.4rem;
        border: 1px solid #c5c2b7;
        font-weight: bold;
    }
    #header nav.horizontal .reserve a:hover {
        background-color: #a88c63;
        border-color: #c5c2b7;
        color: #fff;
    }

    #header nav.horizontal .dd {
        position: absolute;
        left: 0;
        top: 100%;
        min-width: 100%;
        overflow: hidden;
    }
    #header nav.horizontal .dd ul {
        padding: 10px 0;
        background-color: #afa790;
    }
    #header nav.horizontal .dd a {
        position: relative;
        display: block;
        padding: 6px 20px;
        border-top-width: 0;
        color: #fff;
        text-decoration: none;
        white-space: nowrap;
        text-align: left;
        font-size: 1.5rem;
        line-height: 1.5;
        opacity: 0.7;
    }
    #header nav.horizontal .dd a > span {
        position: relative;
        display: inline-block;
        padding-right: 20px;
    }
    #header nav.horizontal .dd a > span::after {
        content: "";
        position: absolute;
        top: 50%;
        right: 0;
        width: 10px;
        height: 10px;
        margin-top: -5px;
        border-radius: 100px;
        background-color: #fff;
        opacity: 0;
    }
    #header nav.horizontal .dd a.current,
    #header nav.horizontal .dd a.current > span::after,
    #header nav.horizontal .dd a:hover,
    #header nav.horizontal .dd a:hover > span::after {
        opacity: 1;
    }

    body.init #header nav.horizontal .dd {
        -webkit-transition: opacity 0.3s ease-in-out, height 0.3s ease-in-out;
        -o-transition: opacity 0.3s ease-in-out, height 0.3s ease-in-out;
        transition: opacity 0.3s ease-in-out, height 0.3s ease-in-out;
    }
    body.init #header nav.horizontal .dd ul {
        -webkit-transition: -webkit-transform 0.3s;
        -o-transition: -o-transform 0.3s;
        transition: transform 0.3s;
    }
    #header nav.horizontal .dd {
        height: 0;
        opacity: 0;
    }
    #header nav.horizontal .dd ul {
        -webkit-transform: translateY(-10px);
        -ms-transform: translateY(-10px);
        -o-transform: translateY(-10px);
        transform: translateY(-10px);
    }
    #header nav.horizontal li.hover .dd {
        opacity: 1;
    }
    #header nav.horizontal li.hover .dd ul {
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0);
    }
}
@media screen and (min-width: 1150px) {
    #header nav.horizontal .gnav > li > a {
        padding: 0 22px;
    }
    #header nav.horizontal .dd a {
        padding-left: 22px;
        padding-right: 22px;
    }
    #header nav.horizontal .reserve {
        margin-left: 22px;
    }
}
@media screen and (min-width: 1200px) {
    #header nav.horizontal .gnav > li > a {
        padding: 0 25px;
    }
    #header nav.horizontal .dd a {
        padding-left: 25px;
        padding-right: 25px;
    }
    #header nav.horizontal .reserve {
        margin-left: 25px;
    }
}
@media screen and (max-width: 768px) {
    #header {
        height: 50px;
        background-color: #fff;
    }
    #header .logo svg {
        width: 70px;
    }
    #header .logo {
        position: relative;
        float: left;
        z-index: 3;
    }
    #header .logo a {
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
        -ms-align-items: center;
        align-items: center;
        height: 50px;
        padding: 0 15px;
    }
    #header .logo a img {
        width: auto;
        height: 40px;
    }

    /* nav_btn */
    #header .nav_btn {
        height: 50px;
    }
    #header .nav_btn a {
        width: 110px;
        font-size: 1.4rem;
    }
    #header .nav_btn::before,
    #header .nav_btn::after,
    #header .nav_btn a::after {
        left: 70px;
    }

    /* nav */
    #header nav {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: 170px;
        background-color: #afa790;
        /*overflow-y: scroll;
		-webkit-overflow-scrolling: touch;*/
        -webkit-transform: translateX(110%);
        -ms-transform: translateX(110%);
        -o-transform: translateX(110%);
        transform: translateX(110%);
    }
    body.init #header nav {
        -webkit-transition: -webkit-transform 0.4s ease-in-out;
        -o-transition: -o-transform 0.4s ease-in-out;
        transition: transform 0.4s ease-in-out;
    }
    /* open */
    #header.open nav {
        -webkit-transform: translateX(0%);
        -ms-transform: translateX(0%);
        -o-transform: translateX(0%);
        transform: translateX(0%);
    }

    #header nav > * {
        position: relative;
        height: 100%;
        min-height: 560px;
    }
    #header nav ul a {
        position: relative;
        display: block;
        text-decoration: none;
        color: #fff;
        letter-spacing: 0.2em;
    }
    #header nav .gnav {
        margin-top: 20px;
        position: absolute;
        top: 47%;
        left: 0;
        right: 0;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        -o-transform: translateY(-50%);
        transform: translateY(-50%);
    }
    #header nav .gnav > li {
        position: relative;
    }
    #header nav .gnav > li > a {
        padding: 10px 0 10px 15px;
        font-size: 1.4rem;
    }
    #header nav .gnav > li > a.open {
        background-color: #a9a18a;
    }
    #header nav .reserve {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
    }
    #header nav .reserve a {
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
        -ms-align-items: center;
        align-items: center;
        justify-content: center;
        height: 60px;
        font-size: 1.3rem;
        background-color: #9a9279;
    }

    #header nav .dd {
        position: absolute;
        right: 100%;
        top: 0;
        width: 0;
        overflow: hidden;
    }
    #header nav .dd ul {
        padding: 10px 0;
        background-color: #a9a18a;
    }
    #header nav .dd a {
        position: relative;
        display: block;
        width: 160px;
        padding: 12px 0 12px 25px;
        border-top-width: 0;
        color: #fff;
        text-decoration: none;
        text-align: left;
        font-size: 1.3rem;
    }

    #header nav .dd a > span span.navi_sub_cap {
        font-size: 1rem;
    }

    body.init #header nav .dd {
        -webkit-transition: width 0.3s;
        -o-transition: width 0.3s;
        transition: width 0.3s;
    }
    body.init #header nav a.open + .dd {
        width: 160px;
    }
}
@media screen and (max-width: 768px) and (max-height: 650px) {
    #header nav .gnav {
        top: 45%;
    }
}
@media screen and (max-width: 370px) {
    #header nav {
        width: 160px;
    }
    #header nav .dd a,
    body.init #header nav a.open + .dd {
        width: 150px;
    }
}

.common_header_important {
    height: 66px;
    margin: 0px;
    text-align: center;
    margin-top: 80px;
}
.common_header_important li + li {
    margin-top: 0px;
}

.common_header_important a {
    display: block;

    background-color: #66d566;
    font-size: 120%;
    text-decoration: underline;
    color: #fff;
    padding: 6px;
    font-weight: bold;
}

.common_header_important li:nth-child(2) a {
    display: block;
    background-color: #b4d4f0;
    color: #fff;
}

@media screen and (max-width: 768px) {
    .common_header_important {
        height: auto;
        margin: 50px 0px 0px 0px;
    }
    .common_header_important li + li {
        margin-top: 0px;
    }
    .common_header_important a {
        font-weight: bold;
        padding: 10px;
        font-size: 120%;
    }
}

/* footer
============================================================================================================ */
#footer {
    position: relative;
    margin-top: 200px;
    padding-bottom: 30px;
}
@media screen and (min-width: 769px), print {
}
@media screen and (max-width: 768px) {
    #footer {
        margin-top: 100px;
    }
}

/* pagetop
------------------------------------------------------------- */
#pagetop a {
    display: block;
    padding: 18px;
    text-align: center;
    border-top: 1px solid #c9c6bc;
    border-bottom: 1px solid #c9c6bc;
}
@media screen and (min-width: 769px) {
    #pagetop a:hover {
        background-color: rgba(201, 198, 188, 0.2);
    }
}
@media screen and (max-width: 768px) {
    #pagetop a {
        padding: 12px;
    }
}

/* logo
------------------------------------------------------------- */
#footer .logo {
    margin-top: 35px;
    text-align: center;
}

/* nav
------------------------------------------------------------- */
#footer nav {
    margin-top: 40px;
}
#footer nav ul {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content: center;
}
#footer nav ul a {
    display: block;
    padding: 0 1em;
    font-size: 1.3rem;
}
@media screen and (max-width: 768px) {
    #footer nav {
        margin-top: 30px;
    }
    #footer nav ul a {
        padding: 0 0.6em;
        font-size: 1.2rem;
    }
}

/* sns
------------------------------------------------------------- */
#footer .sns {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content: center;
}
#footer .sns a {
    display: block;
    padding: 5px;
}
#footer .sns svg {
    width: 20px;
    height: 20px;
}
@media screen and (min-width: 769px), print {
    #footer .sns {
        position: absolute;
        right: 30px;
        bottom: 30px;
    }
    #footer .sns li {
        margin-left: 5px;
    }
    #footer .sns li a:hover svg {
        fill: #a88c63;
    }
}
@media screen and (max-width: 768px) {
    #footer .sns {
        margin-top: 60px;
    }
    #footer .sns li {
        margin: 0 5px;
    }
}

/* small
------------------------------------------------------------- */
#footer small {
    display: block;
    margin-top: 35px;
    font-size: 1.2rem;
    color: #333333;
    text-align: center;
}
@media screen and (max-width: 768px) {
    #footer small {
        margin-top: 20px;
    }
}

/* reserve_bnr
============================================================================================================ */
.reserve_bnr {
    margin-top: 150px;
}
.reserve_bnr a {
    position: relative;
    display: block;
    margin-right: 10px;
    color: #fff;
    text-decoration: none;
}
.reserve_bnr a::before,
.reserve_bnr a::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
}
.reserve_bnr a::before {
    border: 1px solid #c5c2b7;
    -webkit-transform: translate(10px, 10px);
    -ms-transform: translate(10px, 10px);
    -o-transform: translate(10px, 10px);
    transform: translate(10px, 10px);
}
.reserve_bnr a::after {
    background-repeat: no-repeat;
    background-position: 50%;
    -webkit-background-size: cover;
    background-size: cover;
}
.reserve_bnr a > * {
    position: relative;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    height: 160px;
    -ms-align-items: center;
    align-items: center;
    justify-content: center;
    font-size: 2.6rem;
    line-height: 1.4;
    padding-left: 0.2em;
    letter-spacing: 0.2em;
    z-index: 3;
}
@media screen and (min-width: 769px), print {
    .reserve_bnr a::after {
        background-image: url(../images/parts/reserve_bnr_bg.jpg);
    }
    .reserve_bnr a > *::before {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        background-color: #000;
        opacity: 0;
        z-index: -1;
    }
    body.init .reserve_bnr a > *,
    body.init .reserve_bnr a > *::before,
    body.init .reserve_bnr a::before,
    body.init .reserve_bnr a::after {
        -webkit-transition: -webkit-transform 0.3s ease-in-out,
            opacity 0.3s ease-in-out, background 0.3s ease-in-out;
        -o-transition: -o-transform 0.3s ease-in-out, opacity 0.3s ease-in-out,
            background 0.3s ease-in-out;
        transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out,
            background 0.3s ease-in-out;
    }
    .reserve_bnr a:hover::before {
        -webkit-transform: translate(5px, 5px);
        -ms-transform: translate(5px, 5px);
        -o-transform: translate(5px, 5px);
        transform: translate(5px, 5px);
        background-color: #c5c2b7;
    }
    .reserve_bnr a:hover > *,
    .reserve_bnr a:hover::after {
        -webkit-transform: translate(5px, 5px);
        -ms-transform: translate(5px, 5px);
        -o-transform: translate(5px, 5px);
        transform: translate(5px, 5px);
    }
    .reserve_bnr a:hover > *::before {
        opacity: 0.3;
    }
}
@media screen and (max-width: 768px) {
    .reserve_bnr {
        margin-top: 100px;
    }
    .reserve_bnr a::after {
        background-image: url(../images/parts/reserve_bnr_bg_sp.jpg);
    }
    .reserve_bnr a > * {
        height: 140px;
        font-size: 1.6rem;
    }
}

/* bottom_contact_area
============================================================================================================ */
.bottom_contact_area {
    margin-top: 150px;
    text-align: center;
}
.bottom_contact_area > * {
    position: relative;
    padding: 70px;
    margin: 0 5px;
}
.bottom_contact_area > *::before,
.bottom_contact_area > *::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    border: 1px solid #c5c2b7;
    z-index: -1;
}
.bottom_contact_area > *::before {
    -webkit-transform: translate(5px, 5px);
    -ms-transform: translate(5px, 5px);
    -o-transform: translate(5px, 5px);
    transform: translate(5px, 5px);
}
.bottom_contact_area > *::after {
    -webkit-transform: translate(-5px, -5px);
    -ms-transform: translate(-5px, -5px);
    -o-transform: translate(-5px, -5px);
    transform: translate(-5px, -5px);
}
.bottom_contact_area .lead {
    margin: -30px 0 40px;
    font-size: 2rem;
    letter-spacing: 0.2em;
    line-height: 2.5;
}
.bottom_contact_area .content dt {
    margin-bottom: 10px;
    text-align: center;
    font-size: 2rem;
}
.bottom_contact_area .content .form_btn {
    margin: 15px auto 0;
    display: flex;
    justify-content: center;
    -ms-align-items: center;
    align-items: center;
    text-align: center;
    text-decoration: none;
    width: 280px;
    height: 60px;
    padding-top: 2px;
    border: 1px solid #a88c63;
    font-weight: bold;
}
.bottom_contact_area .content .tel {
    display: block;
    line-height: 1.5;
}
@media screen and (min-width: 769px), print {
    .bottom_contact_area .content {
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
        padding-top: 30px;
        justify-content: center;
        border-top: 1px solid #c5c2b7;
    }
    .bottom_contact_area .content > * {
        padding: 10px 0;
    }
    .bottom_contact_area .content > * + * {
        padding-left: 20px;
        margin-left: 30px;
        /*border-left: 1px solid #c5c2b7;*/
    }
    .bottom_contact_area .content ul {
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
        justify-content: center;
    }
    .bottom_contact_area .content ul li {
        padding: 0 10px;
    }
    .bottom_contact_area .content .form_btn:hover {
        background-color: #a88c63;
        color: #fff;
    }
    /* .bottom_contact_area .content .tel { */
    /* } */
}
@media screen and (max-width: 768px) {
    .bottom_contact_area {
        margin-top: 80px;
    }
    .bottom_contact_area > * {
        padding: 40px 20px;
    }
    .bottom_contact_area .content {
        padding-top: 30px;
        border-top: 1px solid #c5c2b7;
    }
    .bottom_contact_area .content > * + * {
        margin-top: 40px;
    }
    .bottom_contact_area .lead {
        margin: -20px 0 30px;
        font-size: 1.4rem;
    }
    .bottom_contact_area .content dt {
        font-size: 1.5rem;
    }
    .bottom_contact_area .content .form_btn {
        margin-top: 10px;
        width: auto;
        height: 50px;
        padding-top: 0;
    }
    .bottom_contact_area .content ul li {
        margin-top: 5px;
    }
    .bottom_contact_area .content .tel {
        display: inline-block;
        margin-left: 0.5em;
        font-size: 1.6rem;
    }
}

/* container
============================================================================================================ */
#container {
    position: relative;
    padding-top: 0px; /* 80px */
    font-size: 1.6rem;
    line-height: 2;
}
#container::before,
#container::after {
    content: "";
    display: table;
    clear: both;
}
@media screen and (max-width: 768px) {
    #container {
        padding-top: 0px; /* 50px */
        font-size: 1.6rem;
    }
}

/* ===================================================================================================================

	パーツ

=================================================================================================================== */

/* pd_block
============================================================================================================ */
.pd_block {
    padding: 100px 0;
}
@media screen and (max-width: 768px) {
    .pd_block {
        padding: 40px 0;
    }
}

/* breadcrumbs
============================================================================================================ */
.breadcrumbs {
    margin-bottom: 80px;
    padding: 10px 50px;
    font-size: 1.2rem;
    line-height: 1.4;
    background-color: #f2f2f4;
}
.breadcrumbs li {
    position: relative;
    padding-right: 30px;
}
.breadcrumbs ol li::after {
    content: "";
    position: absolute;
    right: 15px;
    top: 50%;
    width: 6px;
    height: 6px;
    margin-top: -3px;
    border-top: 1px solid #aba8a0;
    border-right: 1px solid #aba8a0;
    -webkit-transform: scaleX(0.8) rotate(45deg);
    -ms-transform: scaleX(0.8) rotate(45deg);
    -o-transform: scaleX(0.8) rotate(45deg);
    transform: scaleX(0.8) rotate(45deg);
}
.breadcrumbs ol li a {
    color: #000;
}
.breadcrumbs ol li:last-child {
    padding-right: 0;
}
.breadcrumbs ol li:last-child::after {
    content: none;
}
@media screen and (min-width: 769px), print {
    .breadcrumbs ol {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .breadcrumbs li {
        display: inline;
    }
}
@media screen and (max-width: 768px) {
    .breadcrumbs {
        margin-bottom: 30px;
        padding: 10px 0;
        font-size: 1.2rem;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .breadcrumbs ol {
        display: table;
        white-space: nowrap;
    }
    .breadcrumbs ol li {
        display: table-cell;
        white-space: nowrap;
    }
    .breadcrumbs li {
        padding-right: 20px;
    }
    .breadcrumbs ol li::after {
        right: 7px;
        margin-top: -4px;
    }
}

/* page_title
============================================================================================================ */
.page_title,
.page_title_simple {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content: center;
    -ms-align-items: center;
    align-items: center;
    height: 320px;
    background: #000 no-repeat 50%;
    -webkit-background-size: cover;
    background-size: cover;
    text-align: center;
    line-height: 1.3;
    font-size: 3.2rem;
    padding-left: 0.2em;
    letter-spacing: 0.2em;
    font-weight: bold;
    color: #fff;
}
@media screen and (min-width: 769px), print {
    .page_title {
        background-image: url(../images/parts/page_title_other.jpg);
    }
    .page-about .page_title {
        background-image: url(../images/parts/page_title_about.jpg);
    }
    .page-cad .page_title {
        background-image: url(../images/parts/page_title_cad.jpg);
    }
    .page-ordermade .page_title {
        background-image: url(../images/parts/page_title_ordermade2.jpg);
    }
    .page-wedding-ring .page_title {
        background-image: url(../images/parts/page_title_wedding-ring2.jpg);
    }
    .page-engagement-ring-tanzou .page_title,
    .page-tanzou .page_title {
        background-image: url(../images/parts/page_title_tanzou2.jpg);
    }
    .page-wax .page_title {
        background-image: url(../images/parts/page_title_wax.jpg);
    }
    /* engagement */
    .page-engagement-ring-ordermade .page_title {
        background-image: url(../images/parts/page_title_engagement-ring-ordermade.jpg);
    }
    /* .page-engagement-ring-tanzou .page_title {
        background-image: url(../images/parts/page_title_tanzou.jpg);
    } */
    .page-engagement-ring .page_title {
        background-image: url(../images/parts/page_title_engagement-ring.jpg);
    }
    .page-engagement-ring-wax .page_title {
        background-image: url(../images/parts/page_title_engagement-ring-wax.jpg);
    }
    /* ----------------------------------- */
    .page-pairing .page_title {
        background-image: url(../images/parts/page_title_pairing.jpg);
    }
    .page-reserve .page_title {
        background-image: url(../images/parts/page_title_reserve.jpg);
    }
    .page-works .page_title {
        background-image: url(../images/parts/page_title_works.jpg);
    }
    .page-blog .page_title {
        background-image: url(../images/parts/page_title_blog.jpg);
    }
    .page-shoplist .page_title {
        background-image: url(../images/parts/page_title_shoplist.jpg);
    }
    .page-pairring .page_title {
        background-image: url(../images/parts/page_title_new-pairring.jpg);
    }
    .page-bangle .page_title {
        background-image: url(../images/parts/page_title_bangle.jpg);
    }
    .page-anniversary .page_title {
        background-image: url(../images/parts/page_title_anniversary.jpg);
    }
    .page-coronavirus .page_title {
        background-image: url(../images/parts/page_title_coronavirus.jpg);
    }
    .page_title_simple {
        background-image: url(../images/parts/page_title_works.jpg);
    }
}
@media screen and (max-width: 768px) {
    .page_title {
        height: 150px;
        font-size: 2rem;
        background-image: url(../images/parts/page_title_other_sp.jpg);
    }
    .page-about .page_title {
        background-image: url(../images/parts/page_title_about_sp.jpg);
    }
    .page-engagement-ring-tanzou .page_title,
    .page-tanzou .page_title {
        background-image: url(../images/parts/page_title_tanzou2_sp.jpg);
    }
    .page-cad .page_title {
        background-image: url(../images/parts/page_title_cad_sp.jpg);
    }
    .page-ordermade .page_title {
        background-image: url(../images/parts/page_title_ordermade2_sp.jpg);
    }
    .page-wedding-ring .page_title {
        background-image: url(../images/parts/page_title_wedding-ring2_sp.jpg);
    }
    .page-wax .page_title {
        background-image: url(../images/parts/page_title_wax_sp.jpg);
    }
     /* engagement */
    .page-engagement-ring .page_title {
        background-image: url(../images/parts/page_title_engagement-ring_sp.jpg);
    }
    .page-engagement-ring-ordermade .page_title {
        background-image: url(../images/parts/page_title_engagement-ring-ordermade_sp.jpg);
    }
    .page-engagement-ring-wax .page_title {
        background-image: url(../images/parts/page_title_engagement-ring-wax_sp.jpg);
    }
    .page-pairing .page_title {
        background-image: url(../images/parts/page_title_pairing_sp.jpg);
    }
    .page-reserve .page_title {
        background-image: url(../images/parts/page_title_reserve_sp.jpg);
    }
    .page-works .page_title {
        background-image: url(../images/parts/page_title_works_sp.jpg);
    }
    .page-blog .page_title {
        background-image: url(../images/parts/page_title_blog_sp.jpg);
    }
    .page-shoplist .page_title {
        background-image: url(../images/parts/page_title_shoplist_sp.jpg);
    }
    .page-pairring .page_title {
        background-image: url(../images/parts/page_title_new-pairring_sp.jpg);
    }
    .page-bangle .page_title {
        background-image: url(../images/parts/page_title_bangle_sp.jpg);
    }
    .page-anniversary .page_title {
        background-image: url(../images/parts/page_title_anniversary_sp.jpg);
    }
    .page-coronavirus .page_title {
        background-image: url(../images/parts/page_title_coronavirus_sp.jpg);
    }
    .page_title_simple {
        background-image: url(../images/parts/page_title_works_sp.jpg);
    }
}
/* .page_title_simple { */
/* display: -webkit-flex; */
/* display: -moz-flex; */
/* display: -ms-flex; */
/* display: -o-flex; */
/* display: flex; */
/* justify-content: center; */
/* -ms-align-items: center; */
/* align-items: center; */
/* height: 230px; */
/* background: #afa790; */
/* text-align: center; */
/* line-height: 1.3; */
/* font-size: 3.2rem; */
/* padding-left: .2em; */
/* letter-spacing: 0.2em; */
/* color: #fff; */
/* font-weight: bold; */
/* } */
/* @media screen and (max-width: 768px) { */
/* .page_title_simple { */
/* height: 100px; */
/* font-size: 2rem; */
/* } */
/* } */

/* title
============================================================================================================ */
/* en_title */
.en_title {
    margin-bottom: 60px;
    text-align: center;
}
.en_title .ff_en {
    margin-bottom: 15px;
    font-size: 1.6rem;
    letter-spacing: 0.2em;
    padding-left: 0.2em;
}
.en_title .title {
    font-size: 2.6rem;
    letter-spacing: 0.2em;
    padding-left: 0.2em;
}
@media screen and (min-width: 769px), print {
}
@media screen and (max-width: 768px) {
    .en_title {
        margin-bottom: 40px;
    }
    .en_title .ff_en {
        margin-bottom: 10px;
        font-size: 1.2rem;
    }
    .en_title .title {
        font-size: 1.8rem;
    }
}

/* l_title */
.l_title {
    margin-bottom: 20px;
    font-size: 2.6rem;
    letter-spacing: 0.1em;
}
@media screen and (max-width: 768px) {
    .l_title {
        margin-bottom: 15px;
        font-size: 1.8rem;
    }
}

/* lead_text */
.lead_text {
    margin-bottom: 80px;
    text-align: center;
    font-weight: normal;
}
@media screen and (max-width: 768px) {
    .lead_text {
        margin-bottom: 40px;
        text-align: left;
        font-size: 1.4rem;
    }
}

/* fixReserveBtn
============================================================================================================ */
#fixReserveBtn {
    position: fixed;
    right: 0;
    bottom: 80px;
    width: 220px;
    z-index: 999;
}
#fixReserveBtn li + li {
    margin-top: 10px;
}
#fixReserveBtn a {
    position: relative;
    display: block;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -ms-align-items: center;
    align-items: center;
    text-decoration: none;
    color: #fff;
    font-weight: bold;
    font-size: 1.6rem;
    letter-spacing: 0.2em;
}
#fixReserveBtn a::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    opacity: 0.6;
    z-index: -1;
}
#fixReserveBtn a::after {
    content: "";
    position: absolute;
    right: 20px;
    top: 50%;
    width: 20px;
    height: 12px;
    margin-top: -6px;
    background: url(../images/parts/nav_arrow.png) no-repeat 50%;
    -webkit-background-size: 100%;
    background-size: 100%;
}
#fixReserveBtn a.reserve {
    height: 60px;
    padding-left: 30px;
}
#fixReserveBtn a.reserve::before {
    background: rgb(231, 150, 207);
    background: -moz-linear-gradient(
        -45deg,
        rgba(231, 150, 207, 1) 0%,
        rgba(125, 185, 232, 1) 100%
    );
    background: -webkit-linear-gradient(
        -45deg,
        rgba(231, 150, 207, 1) 0%,
        rgba(125, 185, 232, 1) 100%
    );
    background: linear-gradient(
        135deg,
        rgba(231, 150, 207, 1) 0%,
        rgba(125, 185, 232, 1) 100%
    );
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e796cf', endColorstr='#7db9e8',GradientType=1 );
}
#fixReserveBtn a.line {
    height: 60px;
    padding-left: 30px;
}
#fixReserveBtn a.line::before {
    background-color: #00b900;
}
@media screen and (min-width: 769px), print {
    body.init #fixReserveBtn a::after {
        -webkit-transition: -webkit-transform 0.2s ease-in-out;
        -o-transition: -o-transform 0.2s ease-in-out;
        transition: transform 0.2s ease-in-out;
    }
    #fixReserveBtn a:hover::before {
        opacity: 1;
    }
    #fixReserveBtn a:hover::after {
        -webkit-transform: translateX(5px);
        -ms-transform: translateX(5px);
        -o-transform: translateX(5px);
        transform: translateX(5px);
    }
}
@media screen and (max-width: 768px) {
    #fixReserveBtn {
        bottom: 20px;
        width: 120px;
    }
    #fixReserveBtn li + li {
        margin-top: 5px;
    }
    #fixReserveBtn a {
        font-size: 1.1rem;
        letter-spacing: 0.1em;
    }
    #fixReserveBtn a::after {
        right: 5px;
        width: 15px;
    }
    #fixReserveBtn a::before {
        opacity: 0.8;
    }
    #fixReserveBtn a.reserve {
        height: 50px;
        padding-left: 10px;
    }
    #fixReserveBtn a.line {
        height: 40px;
        padding-left: 10px;
    }
}

/* no-img
============================================================================================================ */
.no-img {
    position: relative;
    background-color: #f2f2f4;
}
.no-img::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background: url(../images/head/logo.svg) no-repeat 50%;
    opacity: 0.1;
}

/* wide_ph
============================================================================================================ */
@media screen and (min-width: 769px), print {
    .wide_ph {
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        max-width: 1440px;
        margin: auto;
    }
    .wide_ph p {
        overflow: hidden;
        width: 60%;
        max-width: 800px;
    }
    .wide_ph p img {
        position: relative;
        left: 50%;
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        -o-transform: translateX(-50%);
        transform: translateX(-50%);
    }
    wide_ph.left p {
        margin-right: auto;
    }
    wide_ph.right p {
        margin-left: auto;
    }
}

/* ajaxArea
============================================================================================================ */
#ajaxArea {
    position: relative;
}
#ajaxArea.loading::before {
    content: "";
    position: absolute;
    top: 20px;
    left: 50%;
    margin: -25px 0 0 -25px;
    width: 50px;
    height: 50px;
    border-top: 8px solid rgba(197, 194, 183, 0.3);
    border-right: 8px solid rgba(197, 194, 183, 0.3);
    border-bottom: 8px solid rgba(197, 194, 183, 0.3);
    border-left: 8px solid rgba(197, 194, 183, 1);
    border-radius: 100%;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation: form_db_entry_loadimg 1.1s infinite linear;
    animation: form_db_entry_loadimg 1.1s infinite linear;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    z-index: 999;
}
#ajaxArea.loading > * {
    opacity: 0.3;
    pointer-events: none;
}
@-webkit-keyframes form_db_entry_loadimg {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes form_db_entry_loadimg {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

/* entry_list
============================================================================================================ */
.entry_list {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    -o-flex-wrap: wrap;
    flex-wrap: wrap;
}
.entry_list a {
    display: block;
    text-decoration: none;
    line-height: 1.5;
}
.entry_list a span {
    display: block;
}
.entry_list a .img {
    padding-top: 75%;
}
.entry_list a .title {
    margin-top: 20px;
    line-height: 1.8;
}
.entry_list a .time {
    display: inline-block;
    margin-top: 15px;
    margin-bottom: 1px;
    font-size: 90%;
}
.entry_list a .cat {
    display: block;
    margin-top: 15px;
}
.entry_list a .cat span {
    display: inline-block;
    margin-bottom: 1px;
    background-color: #a88c63;
    padding: 1px 5px;
    color: #fff;
    font-size: 1.1rem;
}
.entry_list a .cat span:last-child {
    margin-right: 0;
}
.entry_list a .cat ~ .time {
    margin-top: 5px;
}
.entry_list a .time ~ .title {
    margin-top: 5px;
}
@media screen and (min-width: 769px), print {
    .entry_list {
        margin-left: -30px;
    }
    .entry_list li {
        width: 33.33%;
        padding-left: 30px;
    }
    .entry_list li:nth-child(3) ~ * {
        margin-top: 40px;
    }
}
@media screen and (max-width: 768px) {
    .entry_list {
        justify-content: space-between;
    }
    .entry_list li {
        width: calc(50% - 8px);
    }
    .entry_list li:nth-child(2) ~ * {
        margin-top: 30px;
    }
    .entry_list a .title {
        margin-top: 10px;
    }
    .entry_list a .time {
        margin-top: 10px;
    }
    .entry_list a .cat {
        margin-top: 10px;
    }
    .entry_list a .cat span {
        font-size: 1rem;
    }
    .entry_list a .time ~ .title {
        margin-top: 0;
    }
}

/* relation_entry
============================================================================================================ */
.relation_entry {
    margin-top: 100px;
    padding-top: 90px;
    border-top: 1px solid #f2f2f4;
}
.relation_entry h2 {
    margin-bottom: 30px;
    font-size: 2rem;
}
@media screen and (max-width: 768px) {
    .relation_entry {
        margin-top: 60px;
        padding-top: 40px;
    }
    .relation_entry h2 {
        margin-bottom: 20px;
        font-size: 1.6rem;
    }
}

/* entry_search_box
============================================================================================================ */
.entry_search_box {
    margin-bottom: 100px;
    padding-bottom: 40px;
    border: 1px solid #c5c2b7;
}
.entry_search_box .title {
    margin-bottom: 40px;
    padding: 5px 40px;
    border-bottom: 1px solid #c5c2b7;
    font-size: 2rem;
}
.entry_search_box .category {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    -o-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 0 40px;
}
.entry_search_box .category input {
    position: absolute;
    visibility: hidden;
}
.entry_search_box .category label {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content: center;
    -ms-align-items: center;
    align-items: center;
    height: 60px;
    /* padding: 0 100px; */
    line-height: 1.3;
    text-align: center;
    border: 1px solid #c5c2b7;
}
.entry_search_box .category input:checked + label {
    background-color: #c5c2b7;
    color: #fff;
}
.entry_search_box .category .sub {
    overflow: hidden;
    height: 0;
}
body.init .entry_search_box .category .sub {
    -webkit-transition: height 0.3s; /*3s*/
    -o-transition: height 0.3s; /*3s*/
    transition: height 0.3s;
}
.entry_search_box .category .sub label {
    height: 40px;
}
.entry_search_box .category .sub ul li {
    padding-top: 10px;
}
.entry_search_box .option {
    margin: 40px 40px 0;
}
.entry_search_box .option dt {
    margin-bottom: 10px;
    font-weight: bold;
}
/* .entry_search_box .option ul { */
/* } */
/* .entry_search_box .option ul li { */
/* } */
.entry_search_box .option input {
    position: absolute;
    visibility: hidden;
}
.entry_search_box .option label {
    display: block;
    position: relative;
    padding: 0 0 0 30px;
}
.entry_search_box .option input[type="checkbox"] + label .check {
    content: "";
    position: absolute;
    left: 0;
    top: 5px;
    width: 20px;
    height: 20px;
    background-color: #fff;
    border: 2px solid #c5c2b7;
    border-radius: 3px;
    -webkit-transition: all 0.1s;
    -o-transition: all 0.1s;
    transition: all 0.1s;
}
.entry_search_box .option input[type="checkbox"] + label .check:after {
    content: "";
    position: absolute;
    left: 5px;
    top: 0px;
    width: 7px;
    height: 14px;
    border-right: 3px solid #c5aa86;
    border-bottom: 3px solid #c5aa86;
    opacity: 0;
    -webkit-transition: opacity 0.1s;
    -o-transition: opacity 0.1s;
    transition: opacity 0.1s;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}
.entry_search_box .option input[type="checkbox"]:checked + label .check {
    border-color: #c5aa86;
}
.entry_search_box .option input[type="checkbox"]:checked + label .check:after {
    opacity: 1;
}
@media screen and (min-width: 769px), print {
    .entry_search_box .category {
        margin-left: 10px;
    }
    .entry_search_box .category > li {
        width: 33.33%; /*33.33*/
        padding-left: 30px;
    }
    .entry_search_box .category > li:nth-child(3) ~ * {
        margin-top: 20px;
    }
    body.init .entry_search_box .category label {
        -webkit-transition: color 0.2s ease-in-out, background 0.2s ease-in-out,
            border 0.2s ease-in-out, opacity 0.2s ease-in-out;
        -o-transition: color 0.2s ease-in-out, background 0.2s ease-in-out,
            border 0.2s ease-in-out, opacity 0.2s ease-in-out;
        transition: color 0.2s ease-in-out, background 0.2s ease-in-out,
            border 0.2s ease-in-out, opacity 0.2s ease-in-out;
    }
    .entry_search_box .category label:hover {
        background-color: #c5c2b7;
        color: #fff;
    }
    .entry_search_box .option {
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
        border-left: 1px solid #c5c2b7;
    }
    .entry_search_box .option > * {
        width: 100%;
        padding: 10px 20px;
        border-right: 1px solid #c5c2b7;
    }
}
@media screen and (max-width: 768px) {
    .entry_search_box {
        margin-bottom: 50px;
        padding-bottom: 15px;
    }
    .entry_search_box .title {
        margin-bottom: 15px;
        padding: 5px 15px;
        font-size: 1.4rem;
    }
    .entry_search_box .category {
        margin: 0 15px 0 5px;
    }
    .entry_search_box .category > li {
        width: 33.33%;
        padding-left: 10px;
    }
    .entry_search_box .category > li:nth-child(3) ~ * {
        margin-top: 10px;
    }
    .entry_search_box .category.sp_wide > li {
        width: 50%;
    }
    .entry_search_box .category.sp_wide > li:nth-child(2) ~ * {
        margin-top: 10px;
    }
    .entry_search_box .category label {
        padding: 0 5px;
    }
    .entry_search_box .category .sub ul li {
        padding-top: 3px;
    }

    .entry_search_box .option {
        margin: 15px 15px 0;
    }
    .entry_search_box .option dl {
        padding: 10px 0;
        border-top: 1px solid #c5c2b7;
    }
    .entry_search_box .option dt {
        position: relative;
        margin-bottom: 0;
    }
    .entry_search_box .option dt::before,
    .entry_search_box .option dt::after {
        content: "";
        position: absolute;
        top: 50%;
        right: 10px;
        width: 14px;
        border-top: 2px solid #c5c2b7;
        margin-top: -1px;
    }
    .entry_search_box .option dt::after {
        -webkit-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        -o-transform: rotate(90deg);
        transform: rotate(90deg);
    }
    body.init .entry_search_box .option dt::after {
        -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
        -o-transition: -o-transform 0.3s, opacity 0.3s;
        transition: transform 0.3s, opacity 0.3s;
    }
    .entry_search_box .option dt.open::after {
        -webkit-transform: rotate(0);
        -ms-transform: rotate(0);
        -o-transform: rotate(0);
        transform: rotate(0);
        opacity: 0;
    }
    .entry_search_box .option dd {
        height: 0;
        overflow: hidden;
    }
    body.init .entry_search_box .option dd {
        -webkit-transition: height 0.3s;
        -o-transition: height 0.3s;
        transition: height 0.3s;
    }
    .entry_search_box .option ul {
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
        -webkit-flex-wrap: wrap;
        -moz-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        -o-flex-wrap: wrap;
        flex-wrap: wrap;
        padding-top: 5px;
        margin-left: -20px;
    }
    .entry_search_box .option ul li {
        padding-left: 20px;
    }
}

/* entry_img_detail
============================================================================================================ */
.entry_img_detail {
    position: relative;
}
.entry_img_detail > h1 {
    margin-bottom: 30px;
    font-size: 2.6rem;
    line-height: 1.6;
}
.entry_img_detail > header {
    margin-bottom: 30px;
    line-height: 1.6;
}
.entry_img_detail > header h1 {
    margin-top: 10px;
    font-size: 2.6rem;
}
.entry_img_detail > header time {
    display: inline-block;
    margin-right: 10px;
}
.entry_img_detail > header .cat,
.entry_img_detail > header .cat li {
    display: inline-block;
}
.entry_img_detail > header .cat a {
    display: block;
    background-color: #a88c63;
    padding: 1px 10px;
    color: #fff;
    font-size: 80%;
}
.entry_img_detail .main_img_wrap {
    position: relative;
}
.entry_img_detail .main_img_wrap::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 1px solid #c5c2b7;
    -webkit-transform: translate(10px, 10px);
    -ms-transform: translate(10px, 10px);
    -o-transform: translate(10px, 10px);
    transform: translate(10px, 10px);
    z-index: -1;
}
/* .entry_img_detail .main_img { */
/* } */
.entry_img_detail .main_img img {
    max-width: 100%;
}
.entry_img_detail .entry_body + .message {
    margin-top: 2em;
    padding-top: 2em;
    border-top: 1px solid #c5c2b7;
}
.entry_img_detail .message h2 {
    margin-bottom: 5px;
    font-size: 110%;
}
.entry_img_detail .back_list li + li {
    margin-top: 10px;
}
.entry_img_detail .back_list a {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content: center;
    -ms-align-items: center;
    align-items: center;
    height: 50px;
    border: 1px solid #c5c2b7;
    text-decoration: none;
    font-weight: bold;
}
.entry_img_detail .back_list a.bg {
    background-color: #b1a992;
    color: #fff;
}
@media screen and (min-width: 769px), print {
    .entry_img_detail .main_img_wrap {
        float: left;
        width: 480px;
    }
    .entry_img_detail .main_img_wrap + .contents {
        margin-left: 530px;
    }
    .entry_img_detail .contents {
        padding-bottom: 140px;
    }
    .entry_img_detail .contents.has_url,
    .entry_img_detail .contents.has_movie {
        padding-bottom: 140px;
    }
    .entry_img_detail .contents.has_url.has_movie {
        padding-bottom: 200px;
    }
    .entry_img_detail .back_list {
        position: absolute;
        bottom: 0;
        right: 0;
        width: 100%;
    }
    .entry_img_detail .main_img_wrap + .contents .back_list {
        width: 470px;
    }
    .entry_img_detail .back_list a:hover {
        background-color: #b1a992;
        color: #fff;
    }
}
@media screen and (max-width: 768px) {
    .entry_img_detail > h1 {
        margin-bottom: 15px;
        font-size: 1.8rem;
    }
    .entry_img_detail > header {
        margin-bottom: 15px;
    }
    .entry_img_detail > header h1 {
        font-size: 1.8rem;
    }
    .entry_img_detail .main_img_wrap {
        margin-bottom: 60px;
    }
    .entry_img_detail .back_list {
        margin-top: 40px;
    }
}

.entry_img_detail .main_img .slick-dots {
    position: absolute;
    right: 0;
    left: 0;
    bottom: -40px;
    text-align: center;
    line-height: 1;
}
.entry_img_detail .main_img .slick-dots li {
    display: inline-block;
}
.entry_img_detail .main_img .slick-dots li button {
    position: relative;
    overflow: hidden;
    width: 24px;
    height: 0;
    margin: 0;
    padding: 24px 0 0;
    border: 0;
    background: none;
}
.entry_img_detail .main_img .slick-dots li button::after {
    content: "";
    position: absolute;
    top: 7px;
    right: 7px;
    bottom: 7px;
    left: 7px;
    background-color: #fff;
    border: 1px solid #c8c5ba;
    border-radius: 100%;
    -webkit-transition: background 0.2s;
    -o-transition: background 0.2s;
    transition: background 0.2s;
}
.entry_img_detail .main_img .slick-dots li.slick-active button::after {
    background-color: #2b2b2b;
    border: 1px solid #2b2b2b;
}
@media screen and (min-width: 769px), print {
    .entry_img_detail .main_img .slick-dots li button:hover::after {
        background-color: #2b2b2b;
        border: 1px solid #2b2b2b;
    }
}
@media screen and (max-width: 768px) {
}

/* works_intro_section
============================================================================================================ */
.works_intro_section {
    margin-bottom: 200px;
}
.works_intro_section .list {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content: center;
}
.works_intro_section .list a {
    display: block;
    text-decoration: none;
}
.works_intro_section .list a .img {
    position: relative;
    display: block;
    margin-right: 10px;
    z-index: 3;
}
.works_intro_section .list a .img > * {
    display: block;
    padding-top: 146.67%;
    background-repeat: no-repeat;
    background-position: 50%;
    -webkit-background-size: cover;
    background-size: cover;
}
.works_intro_section .list a .img::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 1px solid #c5c2b7;
    -webkit-transform: translate(10px, 10px);
    -ms-transform: translate(10px, 10px);
    -o-transform: translate(10px, 10px);
    transform: translate(10px, 10px);
    z-index: -1;
}
.works_intro_section .list a .title {
    display: block;
    margin: 40px 10px 0;
}
.works_intro_section .more {
    margin-top: 240px;
}
@media screen and (min-width: 769px), print {
    .works_intro_section .list li {
        position: relative;
        width: 310px;
    }
    .works_intro_section .list li + li {
        margin-left: 35px;
    }
    .works_intro_section .list li:nth-child(2) {
        top: 80px;
    }
    .works_intro_section .list li:nth-child(3) {
        top: 160px;
    }
    body.init .works_intro_section .list a .img > *,
    body.init .works_intro_section .list a .img::after {
        -webkit-transition: -webkit-transform 0.3s ease-in-out,
            background 0.3s ease-in-out;
        -o-transition: -o-transform 0.3s ease-in-out,
            background 0.3s ease-in-out;
        transition: transform 0.3s ease-in-out, background 0.3s ease-in-out;
    }
    .works_intro_section .list a:hover .img > * {
        -webkit-transform: translate(5px, 5px);
        -ms-transform: translate(5px, 5px);
        -o-transform: translate(5px, 5px);
        transform: translate(5px, 5px);
    }
    .works_intro_section .list a:hover .img::after {
        -webkit-transform: translate(5px, 5px);
        -ms-transform: translate(5px, 5px);
        -o-transform: translate(5px, 5px);
        transform: translate(5px, 5px);
        background-color: #c5c2b7;
    }
    .works_intro_section .list a:hover .title {
        text-decoration: underline;
    }
}
@media screen and (max-width: 768px) {
    .works_intro_section {
        margin-bottom: 100px;
    }
    .works_intro_section .list {
        -webkit-flex-wrap: wrap;
        -moz-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        -o-flex-wrap: wrap;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .works_intro_section .list li {
        width: calc(50% - 15px);
    }
    .works_intro_section .list li:nth-child(2) {
        -webkit-transform: translateY(50%);
        -ms-transform: translateY(50%);
        -o-transform: translateY(50%);
        transform: translateY(50%);
    }
    .works_intro_section .list li:nth-child(2) ~ * {
        margin-top: 40px;
    }
    .works_intro_section .list a {
        font-size: 1.2rem;
    }
    .works_intro_section .list a .title {
        margin-top: 20px;
    }
    .works_intro_section .more {
        margin-top: 40px;
    }
}

/* store_section
============================================================================================================ */
.store_section {
    padding-top: 190px;
    padding-bottom: 300px;
    background: url(../../images/store_bg.png) 50% 0 repeat-x;
}
.store_section section {
    position: relative;
}
.store_section section + section {
    margin-top: 200px;
}
.store_section section .box {
    position: relative;
    background-color: #f2f2f4;
    z-index: 2;
}
.store_section section .logo {
    text-align: center;
}
.store_section section h3 {
    margin-bottom: 30px;
    text-align: center;
    letter-spacing: 0.2em;
    padding-left: 0.2em;
}
.store_section section dl {
    padding: 15px 0;
    border-top: 1px solid #c5c2b7;
    border-bottom: 1px solid #c5c2b7;
    line-height: 1.8;
}
.store_section section dl + dl {
    border-top-width: 0;
}
.store_section section .map {
    margin-top: 80px;
    border: 1px solid #c7c4ba;
}
.store_section .more {
    margin-top: 130px;
}
@media screen and (min-width: 769px), print {
    .store_section section {
        padding-top: 140px;
    }
    .store_section section .box {
        width: 500px;
        padding: 70px;
    }
    .store_section section dl {
        display: table;
        width: 100%;
    }
    .store_section section dl > * {
        display: table-cell;
    }
    .store_section section dl dt {
        width: 6em;
    }
    .store_section section dl dd {
        vertical-align: middle;
    }

    .store_section section:nth-child(2n + 1) .box {
        margin-left: auto;
    }
    .store_section section:nth-child(2n + 1) .wide_ph p {
        margin-right: auto;
    }
    .store_section section:nth-child(2n) .box {
        margin-right: auto;
    }
    .store_section section:nth-child(2n) .wide_ph p {
        margin-left: auto;
    }
}
@media screen and (max-width: 768px) {
    .store_section {
        padding-top: 90px;
        padding-bottom: 100px;
        -webkit-background-size: 360px;
        background-size: 360px;
    }
    .store_section section + section {
        margin-top: 100px;
    }
    .store_section section .box {
        margin-top: -30px;
        padding: 50px 5vw;
        font-size: 1.4rem;
    }
    .store_section section dl dt {
        margin-bottom: 10px;
    }
    .store_section section .map {
        margin-top: 50px;
    }
    .store_section section .map iframe {
        height: 190px;
    }
    .store_section .more {
        margin-top: 60px;
    }
}

/* parallax_item
============================================================================================================ */
.parallax_item {
    position: relative;
    pointer-events: none;
}
.parallax_item > * {
    position: absolute;
}
.parallax_item > * > * {
    display: block;
    height: 100%;
    background-repeat: no-repeat;
    background-position: 50%;
    -webkit-background-size: 100%;
    background-size: 100%;
}

/* para_section (paragraph section)
============================================================================================================ */
.para_section > * + * {
    margin-top: 1.2em;
}

/* table
============================================================================================================ */
.basic_table {
    width: 100%;
    table-layout: fixed;
}
.basic_table tr:nth-child(odd) {
    background-color: #f0f4f7;
}
.basic_table th,
.basic_table td {
    padding: 8px 30px;
    vertical-align: top;
}
.basic_table th {
    padding-right: 0;
}
.basic_table.th15 th {
    width: 15%;
}
.basic_table.th20 th {
    width: 20%;
}
.basic_table.th25 th {
    width: 25%;
}
.basic_table.th30 th {
    width: 30%;
}
@media screen and (max-width: 768px) {
    .basic_table th,
    .basic_table td {
        padding: 8px 20px;
    }
    .basic_table th {
        padding-right: 0;
    }
    .basic_table.sp_th15 th {
        width: 15%;
    }
    .basic_table.sp_th20 th {
        width: 20%;
    }
    .basic_table.sp_th25 th {
        width: 25%;
    }
    .basic_table.sp_th30 th {
        width: 30%;
    }
}

/* box_btn
============================================================================================================ */
button.box_btn,
a.box_btn,
a .box_btn {
    position: relative;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content: center;
    -ms-align-items: center;
    align-items: center;
    max-width: 100%;
    width: 300px;
    height: 60px;
    margin: auto;
    color: #000;
    padding-left: 0.15em;
    font-size: 1.6rem;
    line-height: 1.5;
    letter-spacing: 0.15em;
    text-decoration: none;
    z-index: 3;
}
button.box_btn {
    display: inline-block;
}
.box_btn::before,
.box_btn::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    border: 1px solid #c5c2b7;
    z-index: -1;
}
.box_btn::before {
    -webkit-transform: translate(5px, 5px);
    -ms-transform: translate(5px, 5px);
    -o-transform: translate(5px, 5px);
    transform: translate(5px, 5px);
}
.box_btn::after {
    -webkit-transform: translate(-5px, -5px);
    -ms-transform: translate(-5px, -5px);
    -o-transform: translate(-5px, -5px);
    transform: translate(-5px, -5px);
}
@media screen and (min-width: 769px), print {
    button.box_btn:hover,
    a[href].box_btn:hover,
    a[href]:hover .box_btn {
        color: #fff;
    }
    body.init .box_btn::before,
    body.init .box_btn::after {
        -webkit-transition: -webkit-transform 0.3s ease-in-out,
            background 0.3s ease-in-out !important;
        -o-transition: -o-transform 0.3s ease-in-out,
            background 0.3s ease-in-out !important;
        transition: transform 0.3s ease-in-out, background 0.3s ease-in-out !important;
    }
    button.box_btn:hover::before,
    a[href].box_btn:hover::before,
    a[href]:hover .box_btn::before,
    button.box_btn:hover::after,
    a[href].box_btn:hover::after,
    a[href]:hover .box_btn::after {
        background-color: #c5c2b7;
        -webkit-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        transform: translate(0, 0);
    }
    .box_btn.l {
        width: 360px;
    }
}
@media screen and (max-width: 768px) {
    button.box_btn,
    a.box_btn,
    a .box_btn {
        width: auto;
        margin: 0 5px;
        font-size: 1.4rem;
    }
}

/* ul / ol
============================================================================================================ */
.dot_li > li {
    position: relative;
    padding-left: 1em;
}
.dot_li > li::before {
    content: "・";
    position: absolute;
    top: 0;
    left: 0;
}

.circle_li > li {
    position: relative;
    padding-left: 1.1em;
}
.circle_li > li::before {
    content: "●";
    position: absolute;
    top: 0;
    left: 0;
    color: #005f8b;
    -webkit-transform-origin: 0;
    -moz-transform-origin: 0;
    -ms-transform-origin: 0;
    -o-transform-origin: 0;
    transform-origin: 0;
    -webkit-transform: scale(0.8);
    -ms-transform: scale(0.8);
    -o-transform: scale(0.8);
    transform: scale(0.8);
}

.parentheses_li > li {
    position: relative;
    padding-left: 2.8em;
}
.parentheses_li > li > span:first-child {
    position: absolute;
    top: 0;
    left: 0;
}

.parentheses_li_h > li {
    position: relative;
    padding-left: 1.6em;
}
.parentheses_li_h > li > span:first-child {
    position: absolute;
    top: 0;
    left: 0;
}
.parentheses_li_hh > li {
    position: relative;
    padding-left: 2.2em;
}
.parentheses_li_hh > li > span:first-child {
    position: absolute;
    top: 0;
    left: 0;
}

.point_li > li {
    position: relative;
    padding-left: 1.2em;
}
.point_li > li > span:first-child {
    position: absolute;
    top: 0;
    left: 0;
}

.square_li > li {
    position: relative;
    padding-left: 0.8em;
}
.square_li > li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.8em;
    width: 5px;
    height: 5px;
    background-color: #14143c;
}
@media screen and (max-width: 768px) {
    .square_li > li::before {
        top: 0.6em;
    }
}

.num_li {
    margin-left: 1.8em;
    list-style: decimal;
}
.alphabet_li {
    margin-left: 1.8em;
    list-style: lower-latin;
}

.mt_li > li + li {
    margin-top: 0.8em;
}
@media screen and (max-width: 768px) {
    .sp_mt_li > li + li {
        margin-top: 0.8em;
    }
}

.inline_li > li {
    display: inline-block;
    margin-right: 0.3em;
}

/* .wp-pagenavi
============================================================================================================ */
.wp-pagenavi {
    position: relative;
    margin-top: 60px;
    text-align: center;
    text-align: center;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content: center;
    color: #a88c63;
}
.wp-pagenavi > * {
    position: relative;
    display: block;
    width: 40px;
    height: 40px;
    margin: 3px;
    background-color: #fff;
    border: 1px solid #c5c2b7;
    color: #a88c63;
    line-height: 38px;
    text-decoration: none;
}
.wp-pagenavi a {
    color: #a88c63;
    text-decoration: none;
}
.wp-pagenavi .extend {
    width: auto;
    border-width: 0;
}
.wp-pagenavi .current {
    background-color: #a88c63;
    border-color: #a88c63;
    color: #fff;
}
@media screen and (min-width: 769px), print {
    .wp-pagenavi a:hover {
        background-color: #a88c63;
        border-color: #a88c63;
        color: #fff;
    }
}
@media screen and (max-width: 768px) {
    .wp-pagenavi {
        margin-top: 40px;
        -webkit-flex-wrap: wrap;
        -moz-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        -o-flex-wrap: wrap;
        flex-wrap: wrap;
    }
    .wp-pagenavi > * {
        width: 32px;
        height: 32px;
        margin: 2px;
        line-height: 30px;
    }
    .wp-pagenavi .extend {
        display: none;
    }
}

/*  */
/* .navilogo{ */
/* display: none; */
/* } */
/*  */
/* @media screen and (max-width: 1024px) { */
/* .navilogo{ */
/* width: 20px; */
/* display: inline-block; */
/* margin-right: 4px; */
/* } */
/*  */
/* .pc_only{ */
/* display: none; */
/* } */
/* } */

/* weareopen
============================================================================================================ */

.mb_xs {
    margin-bottom: 10px;
}

.mb_s {
    margin-bottom: 20px;
}

.mb_m {
    margin-bottom: 40px;
}

section.weareopen .ls_em {
    letter-spacing: 0.02em;
}

section.weareopen img {
    width: 100%;
    height: 100%;
}

section.weareopen .weareopen_disc {
    color: #3f3f3f;
}

section.weareopen {
    background: rgba(175, 167, 144, 0.1);
    padding: 30px 0;
    margin-bottom: 80px;
}

section.weareopen a.new_btn {
    font-size: 1.4rem;
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 100%;
    height: 60px;
    margin: 0 auto;
    font-size: 1.6rem;
    line-height: 1.5;
    letter-spacing: 0.15em;
    text-decoration: none;
    z-index: 3;
    background-color: #afa790;
    border: 1px solid #afa790;
    color: #fff;
}

section.weareopen a.new_btn:hover {
    background-color: #fff;
    color: #afa790;
}

section.weareopen p.more {
    max-width: 346px;
    margin: 0 auto;
}

.weareopen_icons > ul {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
    justify-content: space-between;
}

.weareopen_icons > ul > li.icon_open {
    width: 24%;
}

.weareopen_icons > ul > li.icon_open:nth-child(n + 5) {
    margin-top: 1%;
}

.weareopen_h {
    line-height: normal;
}

.weareopen_disc {
    font-size: 1.3rem;
    letter-spacing: normal;
    line-height: 1.7;
}

@media screen and (min-width: 769px) {
    section.weareopen {
        max-width: 1000px;
        margin: 0 auto 100px;
        padding: 40px;
    }
    .weareopen_flex {
        display: flex;
        justify-content: space-between;
    }
    .weareopen_text {
        width: 47.4%;
        margin-right: 40px;
        margin-bottom: 0;
        position: relative;
    }
    .weareopen_icons {
        width: 52.6%;
        margin-bottom: 0;
    }
    .weareopen_icons > ul {
        max-width: 100%;
    }

    .bottom_btn {
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
    }

    .weareopen_disc {
        font-size: 1.6rem;
    }
}

body.page-index section.weareopen {
    padding: 0 0 60px;
    background-color: #f8f9fa;
    margin-bottom: 0;
}

body.page-index section.weareopen .sp_pd {
    padding-top: 30px;
    padding-bottom: 30px;
    background-color: #fff;
}

@media screen and (min-width: 769px) {
    body.page-index section.weareopen {
        max-width: 100%;
        padding-bottom: 100px;
    }
    body.page-index section.weareopen .sp_pd {
        max-width: 1000px;
        padding: 40px;
        margin: 0 auto;
    }
}
