@charset "utf-8";

body,p,td,li, h5,h6 {
    font-family: "Hiragino Kaku Gothic ProN","BIZ UDPGothic", "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ",Meiryo,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
	font-weight: 400;
	font-size:1rem;
	line-height:1.8em;
}
h1,h2,h3,h4,.h1,.h2,.h3,.h4,.h5,.h6 {
	font-family: "TsukuOldMinPro-R", "Hiragino Mincho ProN", "BIZ UDPMincho", "ヒラギノ明朝 Pro W3","Hiragino Mincho Pro",source-han-serif-japanese,"游明朝","Yu Mincho","游明朝体",YuMincho,"HGS明朝E","ＭＳ Ｐ明朝","MS PMincho",serif;
	font-weight:normal;
	line-height:1.5em;
}

.font-g {
    font-family: "Hiragino Kaku Gothic ProN","BIZ UDPGothic", "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ",Meiryo,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
}

.font-m {
	font-family: "TsukuOldMinPro-R", "Hiragino Mincho ProN", "BIZ UDPMincho", "ヒラギノ明朝 Pro W3","Hiragino Mincho Pro",source-han-serif-japanese,"游明朝","Yu Mincho","游明朝体",YuMincho,"HGS明朝E","ＭＳ Ｐ明朝","MS PMincho",serif;
}

.bold {
	font-weight:700;
}

.container {
	max-width: 1164px;
}



/* 文字サイズ
==================================================== */
h1 { font-size:1.5rem; }

@media (min-width: 576px) {
	h1 { font-size:1.8rem;letter-spacing:2px; }
}
@media (min-width: 768px) {
	h1 { font-size:1.8rem; }
}
@media (min-width: 1200px) {
	h1 { font-size:2rem;letter-spacing:2px; }
}
@media (min-width: 1400px) {
	h1 { font-size:2.2rem;letter-spacing:2px; }
}

@media (min-width: 768px) and (max-width: 1050.98px) {
	.top_square .top_text { font-size:0.8rem; }
}
@media (max-width: 767.98px) {
	.top_text { font-size:1rem; }
}



/* マージン、パディング
==================================================== */
.mt-40, .my-40 { margin-top:40px; }
.mb-40, .my-40 { margin-bottom:40px; }
.ms-40, .mx-40 { margin-left: 40px; }
.me-40, .mx-40 { margin-right: 40px; }
.pt-40, .py-40 { padding-top:40px; }
.pb-40, .py-40 { padding-bottom:40px; }
.ps-40, .px-40 { padding-left:min(calc(40 / 1140 * 100vw), 40px); }
.pe-40, .px-40 { padding-right:min(calc(40 / 1140 * 100vw), 40px); }
.mt-80, .my-80 { margin-top:80px; }
.mb-80, .my-80 { margin-bottom:80px; }
.ms-80, .mx-80 { margin-left: 80px; }
.me-80, .mx-80 { margin-right: 80px; }
.pt-80, .py-80 { padding-top:80px; }
.pb-80, .py-80 { padding-bottom:80px; }
.ps-80, .px-80 { padding-left:min(calc(80 / 1140 * 100vw), 80px); }
.pe-80, .px-80 { padding-right:min(calc(80 / 1140 * 100vw), 80px); }
.mt-110, .my-110 { margin-top:110px; }
.mb-110, .my-110 { margin-bottom:110px; }
.pt-110, .py-110 { padding-top:110px; }
.pb-110, .py-110 { padding-bottom:110px; }
.ps-110, .px-110 { padding-left: 110px; }
.pe-110, .px-110 { padding-right: 110px; }

@media (max-width: 767.98px) {
	.mt-40, .my-40, .mt-80, .my-80 { margin-top:30px; }
	.mb-40, .my-40, .mb-80, .my-80 { margin-bottom:30px; }
	.mt-110, .my-110 { margin-top:60px; }
	.mb-110, .my-110 { margin-bottom:60px; }
    .ms-40, .mx-40, .ms-80, .mx-80 { margin-left: 30px; }
    .me-40, .mx-40, .me-80, .mx-80 { margin-right: 30px; }
	.pt-40, .py-40, .pt-80, .py-80 { padding-top:30px; }
	.pb-40, .py-40, .pb-80, .py-80 { padding-bottom:30px; }
	.ps-40, .px-40, .ps-80 { padding-left:30px; }
	.pe-40, .px-40, .pe-80 { padding-right:30px; }
	.pt-110, .py-110 { padding-top:60px; }
	.pb-110, .py-110 { padding-bottom:60px; }
	.ps-110, .px-110 { padding-left:40px; }
	.pe-110, .px-110 { padding-right:40px; }
}

.lh-1 { line-height: 1em; }
.lh-2 { line-height: 2em; }
.lh-3 { line-height: 3em; }




/* リンク
==================================================== */
a {
	color: #FFF;
}
#globalHeader a {
	color: #231815 !important;
}
#globalFooter a {
    color: #FFF;
}
@media (min-width: 992px) {
    a[href*="tel:"] {
        pointer-events: none;
        cursor: default;
        text-decoration: none;
    }
}


/* Header
==================================================== */
:root {
    --header-height:70px;
}
@media (min-width: 992px) {
    :root {
        --header-height:154px;
    }
}
html {
    scroll-behavior: smooth;
    scroll-padding-top: var(--header-height);
}
body {
    background-color:#282B2D;
    padding-top: var(--header-height);
}
#globalHeader {
	color: #231815 !important;
    height: var(--header-height);
}
.navbar-brand {
    max-width: 150px;
    width: calc(300 / 750 * 100vw);
    height: calc(var(--header-height) - var(--bs-navbar-padding-y) * 2);
}
.navbar-tel {
    max-width:44px;
    width:calc(88 / 750 * 100vw);
}
.navbar-toggler-icon {
    width: 2em;
    height: 2em;
}
@media (min-width: 992px) {
    .navbar-brand {
        max-width: 280px;
        width: calc(280 / 1140 * 100%);
    }
    .navbar-tel {
        max-width:514px;
        width:calc(514 / 1140 * 100%);
    }
}
@media (max-width: 575.98px) {
    #navbarOffcanvasLg {
        width: 60vw;
    }
}



/* Footer
==================================================== */
#globalFooter {}
.f-logo {
    max-width: 160px;
    width: calc(234 / 750 * 100vw);
}
.icon_g-map {
    width: 44px;
}
.icon_insta {
    width: 40px;
}
.icon_fb {
    width: 40px;
}
@media (min-width: 992px) {
    .f-logo {
        max-width: 160px;
        width: calc(160 / 1140 * 100%);
    }
    .icon_g-map {
        width: 88px;
    }
    .icon_insta {
        width: 80px;
    }
    .icon_fb {
        width: 80px;
    }
}


/* トップへ戻る
==================================================== */
a.page-top {
	position:fixed;
	bottom:60px;
	right:10px;
	opacity:0.5;
	color:#0064f2;
	display:block;
}
a.page-top:hover {
	opacity:0.7;
}



/* TOP page
==================================================== */
#firstview {
    width: 100%;
    height: calc(100svh - var(--header-height));
}
.carousel-item.active img {
    animation: zoom 20s;
}
@keyframes zoom {
    from {
        transform: scale(1, 1);
    }
    to {
        transform: scale(1.3, 1.3);
    }
}
#firstview-logo {
    max-width: 246px;
    width: calc(246 / 750 * 100vw);
    margin-right: calc(36 / 750 * 100vw);
    margin-bottom: calc(28 / 750 * 100vw);
}
#firstview-logo img {
    filter: drop-shadow(3px 3px 2px rgba(0, 0, 0, 1));
}
@media (min-width: 992px) {
    #firstview-logo {
        width: calc(246 / 1140 * 100%);
        margin-right: calc(36 / 1140 * 100%);
        margin-bottom: calc(28 / 1140 * 100%);
    }
}
#firstview-scroll .scroll-btn {
    width: 20px;
    font-size: 12px;
    line-height: 1;
    letter-spacing: .1em;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    padding-top: 4em;
    text-decoration: none;
}
#firstview-scroll .scroll-txt {
    color: #FFF;
    width: 4em;
    transform: rotate(90deg) translate(-4em,-50%);
    transform-origin: bottom left;
}
#firstview-scroll .scroll-line {
    width:100%;
    height: 5.8em;
    display: block;
    position: relative;
    overflow: hidden;
}
#firstview-scroll .scroll-line:before {
    content: '';
    height: 100%;
    border-left: solid 1px #000;
    position: absolute;
    left: 50%;
    animation: wrap_on 1s ease-in-out 1.5s forwards;
}
#firstview-scroll .scroll-line:after {
    content: '';
    height: 100%;
    border-left: solid 1px #fff;
    position: absolute;
    left: 50%;
    z-index: 1;
    animation: scroll_border 2.5s ease-in-out 2.5s infinite;
}
@keyframes wrap_on {
    0% {
        height: 0%;
    }
    100% {
        height: 100%;
    }
}
@keyframes scroll_border {
    0%,
    100%,
    52% {
        top: 0;
        opacity: 1;
    }
    25% {
        top: 100%;
        opacity: 1;
    }
    26% {
        top: 100%;
        opacity: 0;
    }
    27% {
        top: -100%;
        opacity: 0;
    }
}


/* #top */
#top {}
.top-img001 {
    padding-left: calc(30 / 750 * 100vw);
    padding-right: calc(350 / 750 * 100vw);
    padding-bottom: calc(225 / 750 * 100vw);
}
.top-img001 .img001 {}
.top-img001 .img002 {
    width: calc(283 / 750 * 100vw);
    position: absolute;
    top: calc(200 / 750 * 100vw);
    right: 0;
}
.top-img002 {}
.top-img002 .img003 {
    width: calc(425 / 750 * 100vw);
    margin-right: auto;
    margin-bottom: calc(60 / 750 * 100vw);
}
.top-img002 .img004 {
    width: calc(410 / 750 * 100vw);
    margin-left: auto;
    margin-bottom: calc(60 / 750 * 100vw);
}
.img005 {
    width: calc(620 / 750 * 100vw);
    margin-bottom: calc(60 / 750 * 100vw);
}
.top-img003 {}
.top-img003 .img006 {
    width: calc(600 / 750 * 100vw);
    margin-left: auto;
    margin-bottom: calc(60 / 750 * 100vw);
}
.top-img003 .img007 {
    width: calc(530 / 750 * 100vw);
    margin: 0 auto calc(60 / 750 * 100vw) calc(30 / 750 * 100vw);
}
.top-img003 .img008 {
    width: calc(350 / 750 * 100vw);
    margin-left: auto;
}
@media (min-width: 992px) {
    .top-img001 {
        padding-left: calc(100 / 1140 * 100%);
        padding-right: calc(650 / 1140 * 100%);
        padding-bottom: calc(180 / 1140 * 100%);
    }
    .top-img001 .img001 {}
    .top-img001 .img002 {
        width: calc(328 / 1140 * 100%);
        top: calc(140 / 490 * 100%);
        left: calc(570 / 1140 * 100%);
        right: inherit;
    }
    .top-img002 {
        padding-bottom: calc(170 / 1140 * 100%);
    }
    .top-img002 .img003 {
        width: calc(490 / 1140 * 100%);
        margin: 0;
    }
    .top-img002 .img004 {
        width: calc(442 / 1140 * 100%);
        position: absolute;
        top: calc(160 / 530 * 100%);
        right: 0;
        margin: 0;
    }
    .img005 {
        width: calc(560 / 1140 * 100%);
        margin-bottom: calc(110 / 1140 * 100%);
    }
    .top-img003 {
        padding: 0 0 calc(360 / 1140 * 100%) calc(630 / 1140 * 100%);
    }
    .top-img003 .img006 {
        width: 100%;
        margin: 0;
    }
    .top-img003 .img007 {
        width: calc(500 / 1140 * 100%);
        position: absolute;
        top: calc(140 / 675 * 100%);
        left: calc(70 / 1140 * 100%);
        margin: 0;
    }
    .top-img003 .img008 {
        width: calc(275 / 1140 * 100%);
        position: absolute;
        right: calc(160 / 1140 * 100%);
        bottom: 0;
        margin: 0;
    }
}

/* #menu */
@media (max-width: 991.98px) {
    .menuSlide img {
        aspect-ratio: 1140 / 800;
    }
}
@media (min-width: 992px) {
    .menuSlide {
        height: calc(100svh - var(--header-height));
    }
}
.arrow {
    display: block;
    padding: 0 3em 0.4em 0;
    position: relative;
}
.arrow::after {
    content: '';
    display: block;
    width: 100%;
    height: 0.8em;
    position: absolute;
    right: 0;
    bottom: 0;
    background: url("../img/common/arrow.svg") no-repeat right bottom/cover;
}


/* #osusume */
.osusumeSlider-wrap {}
@media (min-width: 992px) {
    .osusumeSlider-wrap {
        padding-left: calc(110px - 0.5rem);
        padding-right: calc(110px - 0.5rem);
    }
}
@media (max-width: 575.98px) {
    .osusumeSlider .slick-slide {
        width: 60vw !important;
    }
}

/* #oiwai */
#oiwai a {
    color: var(--bs-black-rgb);
}
.oiwai_inner {}
@media (min-width: 992px) {
    .oiwai_inner {
        padding-left: 110px;
        padding-right: 110px;
    }
}

/* #access */
#access .access-map.ratio {
    --bs-aspect-ratio:240px;
}
@media (min-width: 768px) {
    #access .access-map.ratio {
        --bs-aspect-ratio:725px;
    }
}
.facebook_wrap{
  margin-left: auto;
  margin-right: auto;
  width: 80%;
}

.fb-page,
.fb-page span,
.facebook_wrap iframe{
  width: 100% !important;
  /*height: 500px !important;*/
}

/* inview
==================================================== */
.fadeIn {
    opacity: 0;
}
.fadeIn.is-show {
    animation-name:fadeInAnime;
    animation-duration:1.5s;
    animation-fill-mode:forwards;
    animation-timing-function:ease;
    animation-delay: .5s;
}
@keyframes fadeInAnime{
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.fadeUp {
    opacity: 0;
}
.fadeUp.is-show {
    animation-name:fadeUpAnime;
    animation-duration:1.5s;
    animation-fill-mode:forwards;
    animation-timing-function:ease-out;
    animation-delay: .5s;
}
@keyframes fadeUpAnime{
    from {
        opacity: 0;
        transform: translateY(50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* メディアクエリ
==================================================== */
/*
// X-Small devices (portrait phones, less than 576px)
// No media query for `xs` since this is the default in Bootstrap

// Small devices (landscape phones, 576px and up)
*/
@media (min-width: 576px) {}

/*// Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {}

/*// Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {}

/*// X-Large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {}

/*// XX-Large devices (larger desktops, 1400px and up)*/
@media (min-width: 1400px) {}


/*// X-Small devices (portrait phones, less than 576px)*/
@media (max-width: 575.98px) {}

/*// Small devices (landscape phones, less than 768px)*/
@media (max-width: 767.98px) {}

/*// Medium devices (tablets, less than 992px)*/
@media (max-width: 991.98px) {}

/*// Large devices (desktops, less than 1200px)*/
@media (max-width: 1199.98px) {}

/*// X-Large devices (large desktops, less than 1400px)*/
@media (max-width: 1399.98px) {}