﻿@charset "utf-8";

body {
  font-size: 16px;
  line-height: 1.9rem;
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
	font-style: normal;
	letter-spacing: 0.1em;
	margin: 0 auto;
	padding: 0;
}
.font-g {
  font-family: "Noto Sans JP", 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;
}

@media (min-width: 768px) {
  html,
  body {
    font-size: 17px;
  }
}
@media (min-width: 992px) {
  html,
  body {
    font-size: 18px;
  }
}
@media (min-width: 1200px) {
  html,
  body {
    font-size: 19px;
  }
}
@media (min-width: 1400px) {
  html,
  body {
    font-size: 20px;
  }
}

h1,h2,h3,h4,.h1,.h2,.h3,.h4,.h5,.h6 {
	font-family: "Noto Sans JP", sans-serif;
	line-height:1.5em;
}

section {
	overflow: hidden;
}

h2, p {
	text-align: justify;
}

/* 文字サイズ
==================================================== */
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; }
	h2 { font-size:1.9rem !important;}
}

@media (max-width: 1199px) {
	.h2, h2 { font-size: calc(1.225rem + .9vw) !important; }
}

@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{ padding-left: 110px; }
.pe-110{ padding-right: 110px; }
.px-110{ padding-left: 110px; padding-right: 110px; }
.px-130{ padding-left: 130px; padding-right: 130px; }
.mt-160 { margin-top:160px; }
.mt-200 { margin-top:200px; }
.mt-m20 { margin-top:-20px; }
.mt-m40 { margin-top:-40px; }
.mt-m60 { margin-top:-60px; }
.mt-m80 { margin-top:-80px; }
.mt-m100 { margin-top:-100px; }
.mt-m110 { margin-top:-110px; }
.mt-m140 { margin-top:-140px; }
.mt-m160 { margin-top:-160px; }
.mt-m180 { margin-top:-180px; }

.my-80 { margin-top:80px; margin-bottom:80px; }
.my-110 { margin-top:110px; margin-bottom:110px; }
.py-80 { padding-top:80px; padding-bottom:80px; }
.px-80 { padding-left:80px; padding-right:80px; }
.py-110 { padding-top:110px; padding-bottom:110px; }



@media (max-width: 1200px) {
	.mt-m110 { margin-top:-80px; }
	.mt-m140 { margin-top:-90px; }
	.mt-m180 { margin-top:-110px; }
}	

@media (max-width: 1078px) {
	.mt-m40 { margin-top:-60px; }
}

@media (max-width: 1007px) {
	.mt-m40 { margin-top:-90px; }
}

@media (max-width: 951px) {
	.mt-m110 { margin-top:-110px; }
	.mt-m140 { margin-top:-90px; }
	.mt-m180 { margin-top:-110px; }
}	

@media (max-width: 948px) {
	.mt-m60 { margin-top:-10px; }
	.mt-m180 { margin-top:-70px; }
	.mt-m110 { margin-top:-50px; }
}	

@media (max-width: 767.98px) {
	.mt-40, .mt-80, .mt-110, .mt-160, .mt-200, .mt-m40, .mt-m60, .mt-m80, .mt-m100, .mt-m110, .mt-m140, .mt-m160, .mt-m180 { margin-top:30px; }
	.mb-40, .mb-80, .mb-110 { margin-bottom:30px; }
	.pt-40, .pt-80, .pt-110 { padding-top:30px; }
	.pb-40, .pb-80, .pb-110 { padding-bottom:30px; }
	.ps-80, .ps-110 { padding-left:30px; }
	.pe-80, .pe-110 { padding-right:30px; }
	.my-80, .my-110 { margin-top:30px; margin-bottom:30px; }
	.py-80, .py-110 { padding-top:30px; padding-bottom:30px; }
	.mx-80, .px-110, .px-130 { margin-left:30px; margin-right:30px; }
}


.mt_tekikaku {
	margin-top: -4rem;
}

@media (max-width: 1200px) {
	
.mt_tekikaku {
	margin-top: -3rem;
}	
}

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

@media (max-width: 575.98px) {
	.ls_h2 {
		letter-spacing: 0.003em !important;
	}
}




/* リンク
==================================================== */
a {
	color: #666;
}

header a { 
	color: #fff;
	text-decoration: none;
}
footer a {
	color: #fff;
}


/* Header
==================================================== */



:root {
	
	/*--header-height:70px; */
	--header-height:47px;
	--unit-size: 7px;
}
@media (min-width: 1200px) {
    :root {
	/*--header-height:154px; */
        --header-height:92px;
    }
}

@media (min-width: 767px) {
  :root {
    --unit-size: 8px;
  }
}
html {
    scroll-behavior: smooth;
    scroll-padding-top: var(--header-height);
}
body {
 
    padding-top: var(--header-height);
}
#globalHeader {
	color: #231815 !important;
    height: var(--header-height);
}
/* ナビバー
==================================================== */

.navbar-brand {
	padding:0;
	margin:0;
	padding-left: 15px;
}

.navbar-toggler { 
	position:relative;
	border:none!important;
	padding-bottom:0;
	border-color: #ffffff;
}

.navbar-light .navbar-toggler .navbar-toggler-icon {
	position:relative;
	margin-top:-4px;
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(169, 169, 169,1)' stroke-width='3' stroke-linecap='' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");

}



.navbar-nav .nav-link {
	padding-left: 15px;
	color: #fff;
}

.navbar-light .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(169, 169, 169, 0.5)' stroke-width='3' stroke-linecap='' stroke-miterlimit='10' d='M6 6L 24 24M24 6L6 24'/%3E%3C/svg%3E");
}

.header_nav {
  padding-left: 0;
  list-style: none;
  margin-left: auto;
  margin-right: 0;
}
.header_nav {
  width: auto !important;
  max-width: auto !important;
  line-height: 0.7em;
}
@media (min-width: 992px) {
.header_nav {
    font-size: 16px;
  }
}
@media (min-width: 1200px) {
.header_nav {
    font-size: 16px;
  }
}


/* 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-scroll {
    z-index: 2; /* オーバーレイより確実に上 */
    position: absolute;
    bottom: 0;   /* 下から20px (調整OK) */
    left: 20px;     /* 左から20px (調整OK) */
}

#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;
    }
}

/* Information
==================================================== */
.info_title {
	padding: calc(var(--unit-size) * 2) 0;
}

.information ul li {
border-bottom: 1px solid #c7c8c8;
padding-top: calc(var(--unit-size) * 2) 0;
	padding-bottom: calc(var(--unit-size) * 2) 0;
}

.information ul {
list-style: none;
	padding-left: 0px;
}


/* #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;
    }
}


.mt-top { margin-top: 500px;}


@media (max-width: 767.98px) {
	.mt-top { margin-top: 50px;}
}

.mt-top_toso { margin-top: 700px;}


@media (max-width: 767.98px) {
	.mt-top_toso { margin-top: 50px;}
}



/* moreボタン 透過 */

.btn-more {
	background:transparent;
	border:1px solid #fff;
	color: #fff !important;
  display: block;
  text-align: center;
  text-decoration: none;
  line-height: 1.2;
  padding: calc(var(--unit-size) * 3) 1rem;
  position: relative;
  -webkit-transition: all .5s ease;
  transition: all .5s ease;
  max-width: 100%;
  margin-top: calc(var(--unit-size) * 8);
  letter-spacing: 2px;
}
.btn-more:hover {
  background-color: #231815;
  color: #FFF !important;
}
.btn-more::after {
  content: '';
  display: block;
  border-bottom: 1px solid #E60012;
  width: 30px;
  height: 0;
  position: absolute;
  top: 50%;
  right: 0;
  -webkit-transition: all .5s ease;
  transition: all .5s ease;
}
.btn-more:hover::after {
  -webkit-transform: translateX(50%);
          transform: translateX(50%);
}

/* moreボタン 黒 */
.btn-more_b {
  background: #31312d;
  color: #fff !important;
  display: block;
  text-align: center;
  text-decoration: none;
  line-height: 1.2;
  padding: calc(var(--unit-size) * 3) 1rem;
  position: relative;
  -webkit-transition: all .5s ease;
  transition: all .5s ease;
  max-width: 510px;
  margin-top: calc(var(--unit-size) * 8);
  letter-spacing: 2px;
}
.btn-more_b:hover {
  background-color: #231815;
  color: #FFF !important;
}
.btn-more_b::after {
  content: '';
  display: block;
  border-bottom: 1px solid #E60012;
  width: 30px;
  height: 0;
  position: absolute;
  top: 50%;
  right: 0;
  -webkit-transition: all .5s ease;
  transition: all .5s ease;
}
.btn-more_b:hover::after {
  -webkit-transform: translateX(50%);
          transform: translateX(50%);
}


/* fade
==================================================== */
.sclfade {
  position: relative;
  opacity: 0;
}
.sclfade.fade-up {
  top: 50px;
}
.sclfade.fade-down {
  top: -50px;
}
.sclfade.fade-left {
  left: -50px;
}
.sclfade.fade-right {
  right: -50px;
}

.faed-animate {
  -webkit-animation: fade 2s forwards;
          animation: fade 2s forwards;
}
.faed-animate.fade-up, .faed-animate.fade-down {
  -webkit-animation: fadeY 1s forwards;
          animation: fadeY 1s forwards;
}
.faed-animate.fade-left {
  -webkit-animation: fadeL 1s forwards;
          animation: fadeL 1s forwards;
}
.faed-animate.fade-right {
  -webkit-animation: fadeR 1s forwards;
          animation: fadeR 1s forwards;
}
.faed-animate.delay {
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
}

@-webkit-keyframes fade {
  100% {
    opacity: 1;
  }
}

@keyframes fade {
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes fadeY {
  100% {
    opacity: 1;
    top: 0;
  }
}
@keyframes fadeY {
  100% {
    opacity: 1;
    top: 0;
  }
}
@-webkit-keyframes fadeL {
  100% {
    opacity: 1;
    left: 0;
  }
}
@keyframes fadeL {
  100% {
    opacity: 1;
    left: 0;
  }
}
@-webkit-keyframes fadeR {
  100% {
    opacity: 1;
    right: 0;
  }
}
@keyframes fadeR {
  100% {
    opacity: 1;
    right: 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);
    }
}



.card-body { 
	padding-left: 0px !important;
	padding-right: 0px !important;
}
/* メディアクエリ
==================================================== */
/*
// 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) {}
