@charset "utf-8";

/*-----------------------------------------------------------
カバーテキスト
-----------------------------------------------------------*/

.topCoverImgBoxMask {
	position: relative
}

.topCoverImgBoxMask::before {
	content: "";
	display: block;
	width: 100%;
	height: 85%;
	background: linear-gradient(to top, rgba(145, 87, 92, 0.85)-10%, rgba(244, 226, 223, 0)90%);
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	z-index: 2;
	pointer-events: none;
}

.topCoverTextArea {
    max-width: 360px;
    width: 100%;
    position: absolute;
    bottom: 20px;
    left: 20px;
	z-index: 3;
}

.topCoverTexBox01 {
	position: relative;
}

.topCoverText01 {
    font-size: clamp(30px, calc(1.875rem + ((1vw - 3.75px) * 2.2654)), 65px);
    font-weight: 400;
	color: #FFF;
	letter-spacing: 0.1em;
	line-height: 1.05em;
    text-shadow: 3px 3px 20px rgba(255, 250, 250, 0.8);
    position: relative;
    z-index: 1;
}

.topCoverText01 span {
	font-size: clamp(20px, calc(1.25rem + ((1vw - 3.75px) * 1.9417)), 50px);
}

.topCoverTextEn {
	font-size: 30px;
    color: #DDC9A3;
    letter-spacing: 0.05em;
    position: absolute;
    top: 61%;
    right: 0;
    transform: rotate(-5deg);
}

.topCoverTexBox02 {
    display: inline-block;
    width: 100%;
	padding: 0 0 0 2%;
}

.topCoverText02 {
    font-size: clamp(20px, calc(1.25rem + ((1vw - 3.75px) * 0.9709)), 35px);
    letter-spacing: 0.1em;
    color: #F4E2DF;
    overflow-wrap: anywhere;
}

.topCoverWr {
	padding: 0 0 40px;
}


.topCoverWr .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
    display: block;
    width: 11px;
    height: 11px;
    border: solid 1px #E6A4A9;
    background: #fff;
    margin: 0 5px;
    opacity: 1;
	transition: all .3s;
}

.topCoverWr .swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal {
    display: flex;
    justify-content: center;
    align-items: center;
    bottom: 0;
}

.topCoverWr .swiper-pagination-bullet-active {
    background: #E6A4A9 !important;
	transform: scale(1.3);
}

/*-----------------------------------------------------------
top01
-----------------------------------------------------------*/

.top01TitBox {
	padding: 0 0 15px;
    display: flex;
	flex-direction: column;
    justify-content: space-between;
	position: relative;
}

.top01TitBox::before {
	content: "";
    width: 100%;
    height: 1px;
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    background-size: 6px 10px;
    background-image: linear-gradient(to right, #3C3C3C 1px, transparent 1px);
    background-repeat: repeat-x;
    background-position: left bottom;
}

.top01Tit:before {
    content: "";
    width: 100%;
    height: 1px;
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    background-size: 6px 10px;
    background-image: linear-gradient(to right, #3C3C3C 1px, transparent 1px);
    background-repeat: repeat-x;
    background-position: left bottom;
}

.top04MenuItem {
	transition: all .3s;
}

.top04MenuItem .text01 {
	color: #3C3C3C;
}

.top04MenuItem:hover {
	opacity: 0.6;
}

.top04MenuItem:hover .text01 {
	color: #3C3C3C;
}

.top04MenuItem:hover .comBtn02:after {
    transform: translate(7px, 0px);
    transition: all .5s;
}

/*-----------------------------------------------------------
top02
-----------------------------------------------------------*/

.textLoopWrap {
    display: flex;
    align-items: center;
    overflow: hidden;
}

.textLoopArea {
    display: flex;
    animation: loop-slide 50s infinite linear 1s both;
    list-style: none;
    margin: 0;
    padding: 0;
}

.textContent {
    width: 463px;
    font-size: 50px;
    color: #FFF;
    letter-spacing: 0.05em;
}

@keyframes loop-slide {

    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-100%);
    }

}

.top02TextArea .tit01 br {
    display: none;
}

.top02TextBox .text02 br {
    display: none;
}

/*-----------------------------------------------------------
top03
-----------------------------------------------------------*/

.top03Wr {
    background-image: linear-gradient(to right, rgb(253, 248, 249), rgb(248, 241, 237) 60%, rgb(233, 251, 253) 110%);
}

.top03MediaBox {
    margin: 40px 0 0 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px 24px;
}

.top03XBox {
    overflow-y: scroll;
}

.top-news-area section {
	display: grid;
	gap: 20px;
}

/*-----------------------------------------------------------
top06
-----------------------------------------------------------*/

.top06Wr {
    background-image: linear-gradient(to right, rgb(253, 248, 249), rgb(248, 241, 237) 60%, rgb(233, 251, 253) 110%);
}

.top06TitBox:before {
    content: "";
    width: 100%;
    height: 1px;
    display: block;
    position: absolute;
    bottom: 0;
    background-size: 6px 10px;
    background-image: linear-gradient(to right, #3C3C3C 1px, transparent 1px);
    background-repeat: repeat-x;
    background-position: left bottom;
}

/*-----------------------------------------------------------
top07
-----------------------------------------------------------*/

.top07BoxLink {
	color: #3C3C3C;
	transition: all .3s;
}

.top07BoxLink:hover {
	color: #3C3C3C;
	transform: translateY(-10px);
}

.onlineLink {
    padding: 22px 10px 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    max-width: 260px;
    width: 100%;
    background: #DDC9A3;
    border: 1px solid #DDC9A3;
    border-radius: 10px;
    transition: all .5s;
}

.onlineIconBox {
    max-width: 30px;
    width: 100%;
    height: 30px;
    background: url(/system_panel/uploads/images/logo_black.svg);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
}

.onlineLinkText {
    margin-top: 15px;
    font-size: 14px;
    color: #3C3C3C;
    letter-spacing: 0.05em;
}

.onlineLink:hover {
    background: #FFF;
}

.onlineLink:hover .onlineLinkText {
    color: #3C3C3C;
}

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
@media screen and (min-width:430px) {
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
    


    
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */
} /* min-width: 430px ここまで */
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
@media screen and (min-width:544px) {
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
    
/*-----------------------------------------------------------

-----------------------------------------------------------*/
    
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */
} /* min-width: 544px ここまで */
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
@media screen and (min-width: 768px) {
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */ 

/*-----------------------------------------------------------
カバー
-----------------------------------------------------------*/

.topCoverTextArea {
    max-width: 463px;
    width: 100%;
    position: absolute;
    bottom: 30px;
    left: 50px;
}

.topCoverTextEn {
	font-size: 50px;
    right: 0;
}

/*-----------------------------------------------------------
top01
-----------------------------------------------------------*/

.top01TitBox {
	flex-direction: row;
	align-items: flex-end;
}

/*-----------------------------------------------------------
top02
-----------------------------------------------------------*/

.top02TextArea .tit01 br {
    display: block;
}

.top02TextBox .text02 br {
    display: block;
}

.textContent {
    width: 700px;
    font-size: 80px;
}
    
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */
} /* min-width: 768px ここまで */
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
@media screen and (min-width: 1024px) {
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

.d-lx-none {
    display: none !important;
}

.d-lx-block {
    display: block !important;
}

.m-lx-0 {
    margin: 0 !important;
}

/*-----------------------------------------------------------
カバー
-----------------------------------------------------------*/

.topCoverTextArea {
    max-width: 615px;
    width: 100%;
    position: absolute;
    bottom: 44px;
    left: 64px;
}

.topCoverTextEn {
    font-size: 68px;
    width: 165px;
    bottom: 54px;
    right: 0;
}

/*-----------------------------------------------------------
top02
-----------------------------------------------------------*/

.textLoopWrap {
    margin: -40px 0 0 0;
}

.textContent {
    width: 927px;
    font-size: 104px;
}
  
.top02TextBox .text02 {
    font-size: 17px !important;
}

/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */
} /* min-width: 1024px ここまで */
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
@media screen and (min-width:1200px) {
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
    
/*-----------------------------------------------------------

-----------------------------------------------------------*/

.top02TextBox .text02 {
    font-size: 18px !important;
}
    
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */
} /* min-width: 1200px ここまで */
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
@media screen and (min-width:1300px) {
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
    
/*-----------------------------------------------------------

-----------------------------------------------------------*/


    
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */
} /* min-width: 1440px ここまで */
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
@media screen and (min-width:1620px) {
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
    

    
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */
} /* min-width: 1520px ここまで */
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */