@charset "UTF-8";
/* Scss Document */
html:not(.responsive) {
    min-width: 1100px;
    /* viewport */
}
/*=============================================
 * body
 *=============================================*/

body {
	color: #333333;
	font-family: "Noto Sans JP", serif;
	font-size: 13px;
	line-height: 20px;
	letter-spacing: 0.15em;
	min-width: inherit;
	min-height: inherit;
	max-height: 100%;
	font-weight: 400;
	background: #fff
}

@media screen and (min-width: 767px) {
    body {
	font-size: 13px;
	line-height: 17px
    }
}
/*=============================================
 * fonts - DON'T EDIT
 *=============================================*/

.fnt-mincho {
    font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "メイリオ", Meiryo, "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif
}

.fnt-meiryo {
    font-family: "メイリオ", Meiryo, "ヒラギノ角ゴシックPro", "ＭＳ ゴシック", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif
}

.fnt-gothic {
    font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif
}

.fnt-ser {
    font-family: "Noto Serif JP", serif
}

.title-common {
    font-size: 18px;
    text-align: center;
    font-weight: bold
}

@media screen and (min-width: 767px) {
    .title-common {
        font-size: 20px;
        line-height: 38px;
        letter-spacing: 0.2em
    }
}

body.navopen {
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch
}

body.navopen, body.navopen *, body.navopen * :hover, body.navopen * :focus, body.navopen * :active {
    pointer-events: none !important;
    -ms-touch-action: none !important;
    touch-action: none !important
}

body.navopen .hamburger, body.navopen .menu-toggle, body.navopen .menu-toggle *, body.navopen .remodal-is-opened, body.navopen .remodal-is-opened * {
    pointer-events: visible !important;
    -ms-touch-action: auto !important;
    touch-action: auto !important
}

.remodal-is-locked body.navopen, .remodal-is-locked body.navopen *, .remodal-is-locked body.navopen * :hover, .remodal-is-locked body.navopen * :focus, .remodal-is-locked body.navopen * :active {
    pointer-events: visible !important;
    -ms-touch-action: auto !important;
    touch-action: auto !important
}

.remodal-is-locked .remodal-is-opened, .remodal-is-locked .remodal-is-opened * {
    pointer-events: visible !important;
    -ms-touch-action: auto !important;
    touch-action: auto !important
}
/*=============================================
 * <main>
 *=============================================*/

main {
    clear: both;
    width: 100%;
    position: relative;
    overflow: hidden
}
/*=============================================
 * header header header header header header
 *=============================================*/

header {
    z-index: 99;
    position: relative;
    top: 0;
    left: 0;
    width: 100%
}

header h1 {
    line-height: 20px;
    z-index: 88;
    font-size: 15px;
    left: 5%;
    top: -40px;
    left: 10px;
    position: absolute;
    width: 70%
}



header .logo {
    font-family: "Noto Serif JP", serif;
    font-weight: bold;
    padding: 13px 5%;
    font-size: 16px
}

.navopen header .logo {
    font-family: "Noto Serif JP", serif;
    font-weight: bold;
    padding: 35px 5% 0;
    font-size: 18px;
    position: fixed;
    z-index: 100;
    color: #fff
}

header .logo img {
    opacity: 1 !important
}

.hamburger {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 100;
    width: 58px;
    border-radius: 0;
    cursor: pointer
}

.hamburger:after {
    display: none
}

.hamburger.is-active:after {
    content: "close";
    display: none
}

.navopen .hamburger {
    top: 0;
    background: url(../img/close.png) no-repeat center;
    background-size: 100% auto
}

.navopen .hamburger img {
    opacity: 0
}



/*上メニューSP用*/




header .menu-toggle {
     opacity: 0.85;
    visibility: hidden;
    position: fixed;
    width: 100% !important;
    top: 0;
    right: -110%;
    height: 110vh;
    z-index: 99;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 22vw 0% 20vw;
    background: #fff;
    transition: all 0.4s ease;
    text-align: center;
    overflow-y: auto
}

header .menu-toggle dl {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between
}

header .menu-toggle dl dt {
    width: 70%;
    overflow: hidden;
    margin: 0 15% -10px;
    position: relative
}

header .menu-toggle dl dt img {
    width: 140%;
    margin-left: -20%
}

header .menu-toggle dl dd {
    width: 46%;
    margin-top: 30px
}

header .menu-toggle dl dd:nth-child(8) {
    margin-left: 25%;
}

header .menu-toggle dl dd span {
    display: flex;
    width: 25px;
    margin: 10px auto 1px
}

header .menu-toggle .close-nav {
    width: 62px;
    margin: 30px auto 150px
}

header .menu-toggle .box {
    display: flex;
    flex-wrap: wrap
}

header .menu-toggle .nav {
    list-style-type: none;
    list-style-position: outside;
    margin-bottom: 40px;
    display: flex;
    justify-content: center
}

header .menu-toggle .nav li {
    margin-top: 0
}

header .menu-toggle .nav li:first-child a {
    border: none
}

header .menu-toggle .nav a {
    position: relative;
    font-size: 13px;
    display: flex;
    padding: 0 10px;
    border-left: 1px solid;
    line-height: 22px
}

header .menu-toggle .nav a:hover {
    opacity: 0.75
}

.navopen .menu-toggle {
    visibility: visible;
    pointer-events: visible;
    right: 0
}













.map-nav {
    position: relative
}

.map-nav .title {
    display: none
}



.map-nav dl dt {
	margin-top:-20px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    padding: 10px 5% 15px
}

.map-nav dl dt a {
    display: block;
    width: 25%
}

.map-nav dl dt a:last-child {
    transform: translateY(2vw)
}

.map-nav dl dd span {
    display: block;
    margin: 0 auto 35px;
    width: 180px
}

.map-nav dl dd a {
    display: none
}

.map-nav .map-photo {
    margin: 0 5%;
    border: 1px solid #999999;
    padding-bottom: 15px
}

@media screen and (min-width: 767px) {
    header h1 {
        font-size: 18px;
        left: inherit;
        top: 18px;
        text-align: right;
        right: 70px;
        width: auto
    }

    header .menu-toggle dl dd:nth-child(8) {
        margin-left: 0%;
    }
}


@media screen and (min-width: 768px) {
	
	.map-nav dl dt {
	margin-top:30px;
}

}









@media screen and ( min-width: 850px) {
    header h1 {
	font-size: 18px;
	left: inherit;
	top: 18px;
	text-align: right;
	right: 80px;
	width: auto
    }

    .hamburger {
        width: 60px;
        opacity: 1;
        visibility: visible;
        z-index: 10000;
        transition:opacity 0.3s ease
    }

    .navopen .hamburger {
        background: url(../img/close.png) no-repeat center right;
        background-size: 100% auto;
        right:20px
    }

    .hamburger:hover {
        opacity:0.85
    }

    header .menu-toggle {
        padding:120px 0 100px
    }

    header .menu-toggle dl {
        display: flex;
        flex-wrap: wrap;
        justify-content:space-between
    }

    header .menu-toggle dl dt {
        width: 100%;
        overflow: hidden;
        margin: 50px auto 0;
        position: relative;
        text-align:center
    }

    header .menu-toggle dl dt img {
        width: 408px;
        height: auto;
        margin-left:0%
    }

    header .menu-toggle dl dd {
        width: 230px;
        margin-top:50px
    }

    header .menu-toggle dl dd span {
        display: flex;
        width: 30px;
        margin:18px auto 15px
    }

    header .menu-toggle .close-nav {
        width: 60px;
        margin: 40px auto 80px;
        cursor: pointer;
        transition:all 0.3s ease
    }

    header .menu-toggle .close-nav:hover {
        opacity:0.7
    }

    header .menu-toggle .header-nav {
        max-width: 1000px;
        margin: 0 auto;
        position:relative
    }

    header .menu-toggle .nav {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        padding: 0;
        margin: 0 auto;
        text-align: center;
        width: 400px;
        box-sizing: border-box;
        z-index: 5;
        position:relative
    }

    header .menu-toggle .nav a {
	position: relative;
	font-size: 13px;
	letter-spacing: 0.15em;
	line-height: 22px;
	transition: all 0.3s ease;
	padding: 0 15px;
	color: #000;
    }
	
	
	
	
	
	
	
	
/* 

    .map-nav {
        position: relative;
        width: 100%;
        display: flex;
        justify-content: center;
        box-sizing: border-box;
        padding-right: 50px;
        margin-bottom:100px
    }

    .map-nav::before {
        content: "";
        position: absolute;
        top: 116px;
        left: 0;
        right: 340px;
        height: 1px;
        background: rgba(0, 0, 0, 0.5);
        z-index:100
    }
	
 */		



	
	

    .map-nav .title {
        display: block;
        position: absolute;
        display: block;
        position: absolute;
        top: 86px;
        left: 0;
        z-index:1
    }

    .map-nav dl {
        display: flex;
        flex-direction: column;
        flex-wrap:wrap
    }

    .map-nav dl dt {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        padding:7px 0 15px
    }

    .map-nav dl dt a {
        display: block;
        width:auto
    }

    .map-nav dl dt a:last-child {
        transform:translateY(0)
    }

    .map-nav dl dd {
        display: flex;
        justify-content: center;
        align-items:center
    }

    .map-nav dl dd span {
        display: block;
        margin: 0 25px 0;
        cursor: pointer;
        transition:all 0.3s ease
    }

    .map-nav dl dd span:hover {
        opacity:0.75
    }

    .map-nav dl dd a {
        display: block;
        font-size: 13px;
        line-height: 24px;
        height: 24px;
        padding: 0 15px;
        position:relative
    }

    .map-nav dl dd a + a {
        border-left:1px solid rgba(0, 0, 0, 0.5)
    }

    .map-nav dl dd a::before {
        width: 0;
        content: "";
        position: absolute;
        bottom: -4px;
        left: 15px;
        height: 2px;
        background: rgba(0, 0, 0, 0.5);
        transition:all 0.3s ease
    }

    .map-nav dl dd a:hover::before, .map-nav dl dd a.active::before {
        width:calc(100% - 30px)
    }

    .map-nav .map-photo {
        position: absolute;
        top: -122px;
        right: 0;
        margin: 0;
        border: none;
        border-bottom: 1px solid #999999;
        padding-bottom: 45px;
        z-index:99
    }

    .navopen .map-nav {
        opacity: 0
    }
	
	
	
	
}






.header-nav dd span {
    display: flex;
    justify-content: center
}

.header-nav dd span a {
    margin: 0 15px;
    color: #fff;
    line-height: 2.2em
}

.header-nav dd span a.res_btn {
    padding: 0 15px;
    background-color: #666
}

.header-nav dd span a.res_btn:hover {
    opacity: 0.8
}

.header-nav dd span {
    width: 100% !important
}

@media screen and (max-width: 766px) {
    .header-nav dd span a {
        margin:0 5px
    }

    .header-nav dd span a.res_btn {
        font-size: 11px;
        padding: 0 6px;
        height: 2.4em;
        line-height: 2.4em
    }
}





/*=============================================
 * <footer>
 *=============================================*/

footer {
    font-size: 10px;
    line-height: 26px;
    padding: 35vw 0 0
}



footer .ft-btn {
    width: 220px;
    height: 40px
}

footer .ft-btn::before {
    background: url(../img/arr_01.png) no-repeat;
    width: 37px;
    height: 9px;
    position: absolute;
    top: 50%;
    margin-top: -4px;
    right: -15px;
    content: ""
}

footer .ft-btn a {
    font-size: 14px;
    position: relative
}



/*一番下の関連サイトのSP*/

footer .link-ext {
    margin-top: 28px;
    display: flex;
    flex-wrap: wrap;
}

footer .link-ext li {
    width: 60%;
    margin-left: 19%;
    margin-bottom: 20px;
}

footer .link-ext li:nth-child(7) {
    margin-left: 36%;
}

/*一番下の関連サイトのSPここまで*/



footer .inner {
    background: #242221;
    color: #fff;
    text-align: center;
    margin-top: 10px;
    padding: 10vw 0 30vw
}

footer .inner .cookies-link {
    margin: 5px 0 20px
}






#pagetop {
    width: 54px;
    bottom: 0;
    right: 0;
    z-index: 100
}

.navopen #pagetop {
    z-index: -1
}

@media screen and (max-width: 767px) {
    header .menu-toggle {
        height: 110vh
    }

    .header-nav {
        padding: 0 8%
    }
}










/*====================== ft-fixed ====================== */

#ft-fixed {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 89;
    color: #000;
    width: 100%;
    background: #fff;
    height: 54px
}

.has-nav #ft-fixed {
    opacity: 1;
    visibility: visible
}

#ft-fixed ul {
    text-align: center;
    box-sizing: border-box;
    width: calc(100% - 54px);
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: none
}

#ft-fixed ul li {
    width: 100%;
    box-sizing: border-box
}

#ft-fixed ul li a {
    font-size: 12px;
    width: 100%;
    height: 24px;
    display: block;
    line-height: 24px
}

#ft-fixed ul li + li a {
    border-left: 1px solid rgba(0, 0, 0, 0.5)
}

#ft-fixed ul .web-btn {
    background-color: #1b7279;
    color: #fff;
    padding: 15px 0
}

#ft-fixed ul .web-btn2 {
	background-color: #FF6600;
	color: #000;
	padding: 15px 0
}
/* iPhone X */

@media only screen and (min-device-width: 375px) and(min-device-height: 812px) and(-webkit-device-pixel-ratio: 3) and(orientation: portrait) {
    .has-nav footer:after {
        background: #333333;
        content: "";
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 36px;
        z-index: 88
    }

    .has-nav footer::before {
        background: #242221;
        content: "";
        position: fixed;
        bottom: 0;
        right: 0;
        height: 36px;
        width: 54px;
        z-index: 89
    }

    #ft-fixed, #pagetop {
        bottom: calc(env(safe-area-inset-bottom) - 0px)
    }
}
/* iPhone XR */

@media only screen and (min-device-width: 414px) and(min-device-height: 896px) and(-webkit-device-pixel-ratio: 2) and(orientation: portrait) {
    .has-nav footer:after {
        background: #333333;
        content: "";
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 36px;
        z-index:88
    }

    .has-nav footer::before {
        background: #242221;
        content: "";
        position: fixed;
        bottom: 0;
        right: 0;
        height: 36px;
        width: 54px;
        z-index:89
    }

    .has-nav footer::before {
        background: #242221;
        content: "";
        position: fixed;
        bottom: 0;
        right: 0;
        height: 36px;
        width: 54px;
        z-index:89
    }

    #ft-fixed, #pagetop {
        bottom: calc(env(safe-area-inset-bottom) - 0px)
    }
}
/* iPhone 11 */

@media only screen and (device-width: 414px) and(device-height: 896px) and(-webkit-device-pixel-ratio: 2) {
    .has-nav footer:after {
        background: #333333;
        content: "";
        position: fixed;
        bottom: -1px;
        left: 0;
        right: 0;
        height: 36px;
        z-index:88
    }

    .has-nav footer::before {
        background: #242221;
        content: "";
        position: fixed;
        bottom: 0;
        right: 0;
        height: 36px;
        width: 54px;
        z-index:89
    }

    #ft_fixed, #pagetop {
        bottom: calc(env(safe-area-inset-bottom) - 0px)
    }
}

@media screen and (min-width: 767px) {
    .has-nav footer:after {
        display:none !important
    }

    .has-nav footer::before {
        display: none !important
    }

    #ft-fixed {
        background: none;
        opacity: 0;
        visibility: hidden;
    }

    #ft-fixed ul li:nth-child(1), #ft-fixed ul li:nth-child(2), #ft-fixed ul li:nth-child(3), #ft-fixed p {
        /*display:none*/
        background: none;
    }

    #ft-fixed ul li:nth-child(4) {
        background: none
    }
}

@media screen and (max-width: 767px) {
    #pagetop {
        opacity: 1 !important;
        visibility: visible !important
    }
}









/*=============================================
 * style custom
 *=============================================*/

.bg-parallax {
    position: relative;
    z-index: 0
}

.img-parallax {
    clip: rect(0, auto, auto, 0);
    margin-bottom: 0;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: -1
}

.img-parallax img {
    width: 100% !important;
    height: 100vh !important;
    position: fixed;
    bottom: 0;
    left: 0;
    padding: 0;
    margin: 0;
    object-fit: cover;
    z-index: 0;
    transform: translateZ(0)
}

.img-parallax.slide-par picture img {
    opacity: 0;
    transition: all 2s ease
}

.img-parallax.slide-par picture.active img {
    opacity: 1
}

.slick-arrow {
    position: absolute;
    background: url(../img/a_l.png) no-repeat center;
    width: 60px;
    height: 22px;
    cursor: pointer;
    border: none;
    font-size: 0
}

.slick-arrow.slick-prev {
    left: 0
}

.slick-arrow.slick-next {
    right: 0;
    background: url(../img/a_r.png) no-repeat center
}

.slick-dots {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content: center;
    padding: 10px 0 25px
}

.slick-dots li {
    width: 12px;
    height: 12px;
    margin: 0 8px;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex
}

.slick-dots li button {
    width: 100%;
    height: 100%;
    line-height: 0;
    font-size: 0;
    background: none;
    border: none;
    border-radius: 0;
    background: rgba(255, 255, 255, 0.4);
    cursor: pointer
}

.slick-dots li.slick-active button {
    background: #fff
}



.btn {
    display: flex;
    border: 1px solid #5a5a5a;
    position: relative;
    justify-content: center;
    align-items: center;
    width: 185px;
    height: 36px;
    margin: auto
}

.btn a {
    color: #000;
    font-size: 10px;
    font-style: normal;
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    overflow: hidden
}

@media screen and (min-width: 767px) {
    .slick-dots li button:hover {
        opacity:0.7
    }

    .btn {
        display: flex;
        border: 1px solid #5a5a5a;
        position: relative;
        justify-content: center;
        align-items: center;
        width: 135px;
        height: 36px;
        margin:auto
    }

    .btn::before {
        background: url(../img/arr_01.png) no-repeat;
        width: 37px;
        height: 9px;
        position: absolute;
        top: 50%;
        margin-top: -4px;
        right: -15px;
        content: "";
        z-index:3
    }

    .btn a {
        color: #000;
        font-size: 14px;
        font-style: normal;
        position: relative;
        z-index: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        overflow: hidden;
        background: #ebebeb;
        padding:0
    }

    .btn a span {
        position: relative;
        z-index: 2;
        display: flex;
        justify-content: center;
        width: 100%;
        height: 100%;
        align-items:center
    }

    .btn a span::after {
        content: "";
        position: absolute;
        z-index: -1;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: #fff;

    }

    .btn a:hover span::after {
        -webkit-transform: scaleY(0);
        transform:scaleY(0)
    }
	
	




	
	
	
	

    footer {
	font-size: 11px;
	line-height: 20px;
	padding-top: 30px;
	padding-right: 0;
	padding-bottom: 0;
	padding-left: 0;
    }

    footer .ft-btn {
        width: 250px;
        height:45px
    }
	
	
	
/*矢印ここから*/
	

    footer .ft-btn::before {
        background: url(../img/arr_01.png) no-repeat;
        width: 37px;
        height: 9px;
        position: absolute;
        top: 50%;
        margin-top: -4px;
        right: -15px;
        content: ""
    }

    footer .ft-btn a {
        font-size: 14px;
        position: relative;
        letter-spacing: 0.2em
    }
	
/*矢印ここまで*/











/*一番下の関連WEBサイトのPCここから*/
	
	

    footer .link-ext {
        margin: 30px auto;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: flex-start;
        flex-wrap: wrap;
        width: 880px;
    }

    footer .link-ext li {
        width: 300px !important;
        margin: 0 15px;
        margin-bottom: 40px
    }
	
	
	
/*一番下の関連WEBサイトのPCここまで*/	



    footer .link-ext li:nth-child(5) {
        margin-left: 120px;
    }

    footer .link-ext li:nth-child(7) {
        margin-left: 10px;
    }
	

	

    footer .inner {
        background: #242221;
        color: #fff;
        text-align: center;
        margin-top: 0;
        padding:25px 0 35px
    }

    footer .inner .cookies-link {
        margin:15px 0 25px
    }

    footer .inner .cookies-link a:hover {
        text-decoration: underline
    }
}






@media screen and (-ms-high-contrast: active),(-ms-high-contrast: none) {
    .img-parallax img {
        height: auto !important;
        object-fit: unset;
        top: 50%;
        transform: translateY(-50%) !important
    }
}

.sp {
    display: block
}

.pc {
    display: none
}

@media screen and (min-width: 768px) {
    .sp {
        display:none
    }

    .pc {
        display: block
    }
}

@-webkit-keyframes fadeIn {
    0% {
        opacity:0
    }

    100% {
        opacity: 1
    }
}

@keyframes fadeIn {
    0% {
        opacity:0
    }

    100% {
        opacity: 1
    }
}

@-webkit-keyframes fadeInRight {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        transform:translate3d(100%, 0, 0)
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

@keyframes fadeInRight {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        -ms-transform: translate3d(100%, 0, 0);
        transform:translate3d(100%, 0, 0)
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none
    }
}

@-webkit-keyframes fadeZ {
    0% {
        transform: scale(0.8) translateZ(0);
        transition:all 3s ease
    }

    100% {
        transform: scale(1) translateZ(0);
        transition: all 3s ease
    }
}

@keyframes fadeZ {
    0% {
        transform: scale(0.8) translateZ(0);
        transition:all 3s ease
    }

    100% {
        transform: scale(1) translateZ(0);
        transition: all 3s ease
    }
}

@-webkit-keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 20px, 0);
        transform:translate3d(0, 20px, 0)
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 20px, 0);
        -ms-transform: translate3d(0, 20px, 0);
        transform:translate3d(0, 20px, 0)
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none
    }
}

.fadeInUp {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp
}

.fadeInRight {
    -webkit-animation-name: fadeInRight;
    animation-name: fadeInRight
}

.fadeIn {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn
}

.fadeZ {
    -webkit-animation-name: fadeZ;
    animation-name: fadeZ
}
/* .fadeIn[style]{opacity:1}
*/

.animated {
    -webkit-animation-duration: 1.3s;
    animation-duration: 1.3s;
    -webkit-animation-delay: 0.3s;
    animation-delay: 0.3s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both
}

.animated.infinite {
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite
}

@keyframes scrollUp {
    0% {
        background-position:0 -140px
    }

    75% {
        background-position:0 0
    }

    100% {
        background-position: 0 140px
    }
}













#sec5 {
    padding-top: 25vw
}

#sec5 .wrap #gmap {
    margin: 0;
    margin-bottom: 13vw;
    filter: grayscale(100%)
}

#sec5 .wrap #gmap .box {
    width: 100%;
    height: 480px
}

#sec5 .wrap #gmap .box iframe {
    width: 100%;
    height: 100%
}

#sec5 .wrap #gmap #banner ul {
    display: block;
    padding-top: 20px
}

#sec5 .wrap #gmap #banner ul li {
    border: 1px solid #999999;
    padding: 0;
    position: relative;
    width: 80%;
    height: 42px;
    margin: 0 auto
}

#sec5 .wrap #gmap #banner ul li {
    border: none;
    padding: 0
}

#sec5 .wrap #gmap #banner ul li span {
    display: flex;
    font-size: 14px;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
}

#sec5 .wrap #gmap #banner ul li .btn::before {
    display: none
}

#sec5 .wrap #gmap #banner ul li::before {
    position: absolute;
    content: "";
    background: url(../img/arr_01.png) no-repeat;
    width: 37px;
    height: 9px;
    top: 50%;
    margin-top: -4px;
    right: -15px
}

#sec5 .wrap #gmap #banner ul li:first-child {
    margin-bottom: 5vw
}

#sec5 .wrap .top {
    margin-bottom: 7vw;
    text-align: center
}

#sec5 .wrap .top .sec5-logo {
    width: 160px;
    margin: 0 auto 5vw
}

#sec5 .wrap .top .sec5-logo img {
    width: 100%;
    height: auto
}

#sec5 .wrap .top .phone {
    margin-bottom: 10vw
}

#sec5 .wrap .top .phone dt {
    font-size: 13px
}

#sec5 .wrap .top .phone dd span {
    font-weight: bold;
    font-size: 18px;
    display: inline-block;
    background: url(../img/icon_tel.jpg) no-repeat left center;
    padding-left: 30px
}

#sec5 .wrap .top .phone dd i {
    display: block;
    font-size: 12px;
    letter-spacing: 0
}



/*プロフィール*/



#sec5 .wrap .bottom {
    display: block
}

#sec5 .wrap .bottom .right {
    width: 100%;
    right: 0;
    margin-bottom: 5vw
}

#sec5 .wrap .bottom .left {
    width: 100%
}

#sec5 .wrap .bottom .left dl {
    display: flex;
    border-bottom: 1px solid #999999
}

#sec5 .wrap .bottom .left dl dt {
    width: 90px;
    position: relative;
    border-bottom: 3px solid #ff6347
}

#sec5 .wrap .bottom .left dl dd {
    padding-left: 10px;
    flex: 1;
    letter-spacing: 0.075em
}

#sec5 .wrap .bottom .left dt, #sec5 .wrap .bottom .left dd {
    padding: 10px 0
}






@media screen and (min-width: 767px) {
    #sec5 {
        padding-top:200px
    }

    #sec5 .btn-share {
        width: 700px;
        margin: auto;
        padding:15px 0 105px
    }

    #sec5 .btn-share a {
        width: 300px;
        text-align: center;
        display:block
    }

    #sec5 .btn-share a span {
        display: inline-block;
        border-bottom: 1px solid rgba(0, 0, 0, 0.7);
        line-height: 24px;
        padding: 0 10px;
        transition:all 0.3s ease
    }

    #sec5 .btn-share a:hover span {
        border-bottom:1px solid transparent
    }

    #sec5 .wrap #gmap {
        margin: 0 -200px;
        width: 1400px;
        margin-bottom: 0;
        filter:grayscale(100%)
    }

    #sec5 .wrap #gmap .box {
        width: 100%;
        height:550px
    }

    #sec5 .wrap #gmap .box iframe {
        width: 100%;
        height:100%
    }

    #sec5 .wrap #gmap #banner ul {
        display: block;
        padding-top: 30px;
        width: 700px;
        margin: auto;
        display: flex;
        justify-content:space-between
    }

    #sec5 .wrap #gmap #banner ul li {
        border: 1px solid #999999;
        padding: 0;
        position: relative;
        width: 300px;
        height: 50px;
        margin: 0 auto;
        /*! font-family:; */
        font-size:16px
    }

    #sec5 .wrap #gmap #banner ul li {
        border: none;
        padding: 0;
        margin:0 !important
    }

    #sec5 .wrap #gmap #banner ul li span {
        display: flex;
        font-size: 16px;
        width: 100%;
        height: 100%;
        justify-content: center;
        align-items:center
    }

    #sec5 .wrap #gmap #banner ul li.btn-link span {
        background: #ebebeb;
        position:relative
    }

    #sec5 .wrap #gmap #banner ul li.btn-link span i {
        position: relative;
        z-index:2
    }

    #sec5 .wrap #gmap #banner ul li.btn-link span::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: #fff;
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
        -webkit-transform-origin: 50%;
        transform-origin: 50%;
        -webkit-transition-property: transform;
        transition-property: transform;
        -webkit-transition-duration: 0.3s;
        transition-duration: 0.3s;
        -webkit-transition-timing-function: ease-out;
        transition-timing-function:ease-out
    }

    #sec5 .wrap #gmap #banner ul li.btn-link span:hover:after {
        -webkit-transform: scaleY(0);
        transform:scaleY(0)
    }

    #sec5 .wrap #gmap #banner ul li.btn-link span.copied {
        pointer-events: none;
        background:#fff
    }

    #sec5 .wrap #gmap #banner ul li.btn-link span.copied:after {
        display:none
    }

    #sec5 .wrap #gmap #banner ul li .btn::before {
        display:none
    }

    #sec5 .wrap #gmap #banner ul li::before {
        position: absolute;
        content: "";
        background: url(../img/arr_01.png) no-repeat;
        width: 37px;
        height: 9px;
        top: 50%;
        margin-top: -4px;
        right: -15px;
        z-index:2
    }

    #sec5 .wrap #gmap #banner ul li:first-child {
        margin-bottom:5vw
    }

    #sec5 .wrap .top {
	margin-bottom: 10px;
	text-align: center
    }

    #sec5 .wrap .top .sec5-logo {
        width: 239px;
        margin:0 auto 40px
    }

    #sec5 .wrap .top .phone {
        margin-bottom:40px
    }

    #sec5 .wrap .top .phone dt {
        font-size:13px
    }

    #sec5 .wrap .top .phone dd span {
        font-weight: bold;
        font-size: 19px;
        display: inline-block;
        background: url(../img/icon_tel.jpg) no-repeat left center;
        padding-left:28px
    }

    #sec5 .wrap .top .phone dd i {
        display: block;
        font-size: 13px;
        letter-spacing:0
    }

    #sec5 .wrap .bottom {
        display: block;
        position: relative;
        padding-bottom:70px
    }

    #sec5 .wrap .bottom .right {
        width: 520px;
        right: -100px;
        margin-bottom: 0;
        position: absolute;
        top:100px
    }

    #sec5 .wrap .bottom .left {
        width:500px
    }

    #sec5 .wrap .bottom .left dl {
        display: flex;
        border-bottom: 1px solid #999999;
        font-size: 13px;
        line-height:30px
    }

    #sec5 .wrap .bottom .left dl dt {
        width: 132px;
        position: relative;
        border-bottom: 3px solid #ff6347
    }

    #sec5 .wrap .bottom .left dl dd {
        padding-left: 20px;
        flex: 1;
        letter-spacing:0.075em
    }

    #sec5 .wrap .bottom .left dt, #sec5 .wrap .bottom .left dd {
        padding: 15px 0
    }
}

@media screen and (min-width: 767px) and(max-width: 1399px) {
    #sec5 .wrap #gmap {
        width: 1100px;
        margin: 0 -50px
    }
}

@media screen and (min-width: 767px) and(max-width: 1499px) {
    .map-nav {
        padding: 0 11% 0 0 !important
    }
}

@media screen and (min-width: 767px) and(max-width: 1389px) {
    .map-nav {
        padding:0 13% 0 0 !important
    }

    .map-nav dl dt a {
        display: block;
        width: 105px;
        padding-top: 13px
    }
}





/* オープニング */

#open {
    width: 100%;
    position: fixed;
    height: 100%;
    overflow: hidden;
    background-color: #fff;
    opacity: 0;
    min-height: 100vh;
    z-index: 99999
}

#open .open_title {
    display: none
}

#open .open_title {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    width: auto
}

#open .open_title img {
    display: flex;
    justify-content: center;
    text-align: center;
    margin: 0 auto
}

.d_none {
    display: none !important
}

#open.visible {
    opacity: 1;
    visibility: visible
}

#open.intro {
    visibility: hidden;
    overflow: hidden;
    background: none;
    transition: all 2s ease;
    -moz-transition: all 2s ease;
    -webkit-transition: all 2s ease
}

#web-btn {
    position: fixed;
    top: 175px;
    right: 0;
    z-index: 99;
    width: 48px;
    z-index: 9999
}

.panel {
    position: fixed;
    top: 0;
    width: 240px;
    max-width: 260px;
    padding: 20px;
    background-color: #eee;
    color: #000;
    height: 100vh
}

.panel li {
    border-bottom: 1px solid #999
}

.panel li a {
    display: block;
    padding: 6px 15px
}

#right-panel {
    right: -280px;
    transition: all 0.5s ease;
    z-index: 99999;
    /* Hide panel on the right of the page. When this panel is opened the
      class .ps-active-right will be apllied to body,and it's X translation
      will reveal the panel. */
}
/* Body animation when right panel is opened */

body.ps-active-right #right-panel {
    -webkit-transform: translateX(-280px);
    -ms-transform: translateX(-280px);
    transform: translateX(-280px);
    transition: all 0.5s ease
}

#close-panel-bt {
    cursor: pointer;
    line-height: 2em;
    text-align: center;
    background-color: #FFF;
    width: 6em;
    padding: 2px 10px !important;
    margin-bottom: 50px !important;
    color: #333;
    border: 1px solid #333;
    display: block
}

@media screen and (min-width: 767px) {
    .web-btn span {
        opacity: 1;
        display: inherit;
        display: block !important;
        position: fixed;
        top: 200px;
        right: 0;
        z-index: 9999;
        font-size: 20px !important
    }

    .web-btn span a {
        background: url(../img/web_btn2.png) no-repeat center;
        text-indent: -9999px;
        width: 48px !important;
        display: block !important;
        text-decoration: none;
        height: 178px !important
    }

    .web-btn2 span {
        opacity: 1;
        display: inherit;
        display: block !important;
        position: fixed;
        top: 200px;
        right: 0;
        z-index: 9999;
        font-size: 20px !important
    }

    .web-btn2 span a {
        background: url(../img/web_btn3.png) no-repeat center;
        text-indent: -9999px;
        width: 48px !important;
        display: block !important;
        text-decoration: none;
        height: 178px !important
    }
}

body:has(.mfp-ready) {
    overflow: hidden;
}

@media screen and (min-width: 768px) {
    .web-btn2:hover {
        opacity: .8;
    }
}

#reco_col {
    padding-top: 80px;
    padding-bottom: 80px;
    background: #fff;
    position: relative;
    z-index: 2
}

#reco_col h2 {
    text-align: left;
    padding-left: 9vw;
    letter-spacing: .6em;
    display: table;
    position: relative
}

#reco_col h2:before {
    content: "";
    position: absolute;
    top: 9px;
    left: -9px;
    width: 15px;
    height: 15px;
    background: var(--bg)
}

#reco_col h2:after {
    content: "";
    position: absolute;
    top: 50%;
    left: calc(100% + 17px);
    width: 100%;
    height: 1px;
    background: #000
}

#reco_col .text {
    line-height: 37px;
    font-size: 13px;
    margin: 8vw 0 7vw 4%
}

#reco_col .note {
    margin-left: 4%
}

#reco_col .slide-count {
    font-weight: 700;
    font-size: 7.3vw;
    margin: 15vw 15% 5vw
}

#reco_col .slide-count small {
    font-size: 4.4vw;
    display: inline-block;
    transform: translateY(-5px)
}



/*=============================================
 * オススメスライドココカラ
 *=============================================*/





#reco_col .reco-js {
    font-weight: 700
}

#reco_col .reco-js .slick-list {
    padding: 0 !important
}

#reco_col .reco-js .slick-arrow {
    background-size: contain;
    width: 45px;
    height: 45px;
    top: -22vw
}

#reco_col .reco-js .slick-prev {
    left: auto;
    right: calc(12% + 54px)
}

#reco_col .reco-js .slick-next {
    right: 12%
}

#reco_col .reco-js .item {
    padding: 0 11%;
    box-sizing: border-box;
    position: relative;
}

#reco_col .reco-js .item h3 {
    width: 100%;
    font-weight: inherit;
    font-size: 16px;
    margin-top: 4vw;
    margin-right: -10vw;
    margin-bottom: 3vw;
    letter-spacing: 1.5px
}

#reco_col .reco-js .item .price {
    text-align: right;
    font-size: 16px;
    margin: 2vw 2% 2vw 0
}

#reco_col .reco-js .item .price small {
    font-size: 12px
}

#reco_col .reco-js .item .txt {
    font-weight: 400;
}

#reco_col .reco-js .item .txt-vertical {
    position: absolute;
    left: 1%;
    font-size: 13px;
    top: 5px;
}

#reco_col .reco-js .item .txt-vertical span {
    letter-spacing: 0.15em;
}


@media screen and (min-width:850px){

#reco_col .reco-js .slick-arrow {
    background-size: contain;
    width: 45px;
    height: 45px;
    top: -22vw
}	

}






@media screen and (min-width: 767px) {
    #reco_col h2 {
        padding-left: 90px
    }

    #reco_col h2::before {
        top: 14px;
        left: -7px
    }

    #reco_col h2:after {
        top: 53%;
        width: 2000px
    }

    #reco_col .text {
        margin: 33px 0 0 88px
    }

    #reco_col .note {
        position: absolute;
        top: 60px;
        right: 50px;
        margin-left: 0
    }

    #reco_col .slide-count {
        margin: 59px auto 26px;
        text-align: right;
        width: 400px;
        font-size: 30px
    }

    #reco_col .slide-count small {
        font-size: 18px;
        margin-left: 3px
    }

    #reco_col .reco-js {
        margin-left: -33px
    }

    #reco_col .reco-js .slick-arrow {
        width: 51px;
        height: 51px;
        top: -98px
    }

    #reco_col .reco-js .slick-arrow:hover {
        opacity: .8
    }

    #reco_col .reco-js .slick-next {
        right: calc(50% - 460px)
    }

    #reco_col .reco-js .slick-prev {
        right: calc(50% - 400px)
    }

    #reco_col .reco-js .item {
        padding: 0;
        margin: 0 68px;
        width: 408px !important
    }

    #reco_col .reco-js .item h3 {
        font-size: 18px;
        margin-top: 27px;
        line-height: 30px;
        margin-bottom: 20px;
        width: 420px;
    }

    #reco_col .reco-js .item h3.mb {
        margin-bottom: -29px;
    }

    #reco_col .reco-js .item .price {
        font-size: 18px;
        margin: 7px 15px 22px 0;
        letter-spacing: 3px
    }

    #reco_col .reco-js .item .price small {
        font-size: 14px;
        margin-right: 5px
    }

    #reco_col .reco-js .item .price small.sml {
        font-size: 12px
    }

    #reco_col .reco-js .item .txt {
        letter-spacing: 3px;
        font-size: 13px;
        line-height: 30px
    }

    #reco_col .reco-js .item .txt-vertical {
        position: absolute;
        left: -53px;
        font-size: 18px;
        top: 2px;
    }
}

.mfp-iframe-holder .mfp-content {
    height: 100%;
}

.mt_20 {
    margin-top: 20px !important;
}