@charset "utf-8";

/* plan
------------------------------------------------------------ */

.wrap {
    min-width:auto;
}

.noBreak{
	word-break: keep-all;
	white-space: nowrap;
}

.plan_description{
	width:100%;
	margin:2rem auto 3rem;
	font-size:2rem;
}

@media print, screen and (max-width:900px) {
	.plan_description{
		font-size:1.6rem;
	}
}

@media screen and (max-width: 768px) {
	.plan_description{
		font-size:1.4rem;
	}
	
}

@media print, screen and (max-width:480px) {
	.plan_description{
		font-size:1.2rem;
	}
	
}

/* selectPlan
------------------------------------------------------------ */

.selectPlan{
    width: 96%;
    max-width: 600px;
    margin: 2rem auto;
    padding: 0;
}

.selectPlan ul{
    display:flex;
	justify-content: center;
	align-items: center;
}

.selectPlan li.act a{
	color: #000;
	background: #a78b47;
}
.selectPlan li.act a::after {
	border-left: 8px solid #a78b47;
	right: 10px;
}

.selectPlan a{
    margin: 10px;
    border: 1px solid #a78b47;
    position: relative;
    box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.3);
}

@media print, screen and (max-width:600px) {
	.selectPlan li{
		width:50%;
		margin: 4px;
	}
	.selectPlan a{
		width:100%;
    	margin: 0;
	}
}

@media print, screen and (max-width:480px) {
	.selectPlan a{
		font-size:12px;
	}
}


/* planArea共通
------------------------------------------------------------ */

.pcImg{display:block;}
.spImg{display:none;}

.wide .course .photo li{
	width:100%;
	margin-bottom:4rem;
}
.wide .course .photo li:last-child{
	margin-bottom:0;
}

.wide .course .photo img{
	width:100%;
}

.wide .course.recommendedCourse .menu {
	width:100%;
	max-width:600px;
}

.wide .recommendedCourse .menu > div {
	width:100%;
	max-width:600px;
}

@media print, screen and (max-width: 1340px) {
	.wide .course.recommendedCourse .menu {
		max-width:auto;
	}
}

.wide .recommendedCourse .menu .periodArea{
	max-width:400px;
	margin:0 auto;
}

.period {
    margin-bottom: 0.5em;
}

.periodNote{
    margin-right: 0.5em;
    font-size: 1.2rem;
}

.menuName {
	margin:2rem auto;
}

.menuName p{
	font-size:1.8rem;
}

.menuList {
    margin: 30px 0 40px;
    line-height: 1.8;
}

.course .menuList li{
    font-size: 1.4rem!important;
}

.menuList li{
    margin: 1rem 0;
    padding: 0;
    position: relative;
}

.menuList li h3{
    font-size: 2.8rem;
    color: #a78b47;
}

.menuList li.tSpace {
    margin-top: 2.4rem;
}

.flexList {
    display: flex;
    flex-wrap: wrap;
}

.flexList li{
    display: inline;
    margin: 0;
    padding: 0;
    position: relative;
}

.markOn > li {
    padding: 0 0 0 1.5em;
}
.markOn > li::before {
    display: block;
    content: "●";
    color: #a78b47;
    position: absolute;
    top: 0;
    left: 0;
}

.markOff > li {
    padding: 0;
}
.markOff > li::before {
    content: "";
}

.delimOn li::after{
    content: "、";
}
.delimOn li:last-child::after{
    content: "";
}

.price ul{
	margin:1rem;
	justify-content: center;
}

.price li{
	margin:0 1rem;
}

.planBonus{
	width:100%;
	margin:2rem auto;
	padding:2rem 0 3.2rem;
	border:1px solid #fff;
}

.planBonus h3,
.privateroomLink h3{
	font-size:3rem;
	margin:0 auto 1.2rem;
}

.planBonus ul{
	justify-content: center;
	align-items: center;
}
.planBonus li{
	margin:0 1rem;
}

.privateroomLink{
	margin:2rem auto;
	border:1px solid #fff;
	padding:2rem 2rem 3rem;
}

.privateroomLink p{
	margin:0 auto 1rem;
}

.privateroomLink a{
	display:block;
	position:relative;
	width:100%;
	height:auto;
	aspect-ratio:100 / 30;
	background-image: url(https://www.hankyu-hotel.com/-/media/hotel/hs/hanshin/contents/restaurants/loin/img/privateroom/mv.jpg);
	background-repeat: repeat;
	background-position: 0 40%;
	background-size:100% auto;
}

.privateroomLink a .pLTitle{
	display:block;
	width:100%;
	color:#fff;
	position:absolute;
	top:20%;
	left:0;
	text-shadow: #000 0 0 10px;
}

.privateroomLink a span .pLEng{
	font-family: "EB Garamond", serif;
    font-weight: 400;
	font-size: 4rem;
	line-height:4rem;
}

.privateroomLink a span .pLJp{
	font-size: 2rem;
}


.txtGold{
color: #a78b47;
}

.pointCircle{
	width:100px;
	height:100px;
	color:#000;
	background:#a78b47;
	border-radius:100px;
	font-size:18px!important;
	line-height:22px;
	padding:12px 0!important;
}
.pointCircle span{
	font-size:12px!important;
}

@media print, screen and (max-width:1340px) {
    .wide .course .photo {
        width: calc(100% - 540px);
    }
    
    .wide .course .menu {
        padding-left: 4%;
    }
    
	.wide .course.recommendedCourse .menu,
	.wide .recommendedCourse .menu > div {
		width:96%;
		max-width:540px;
	}
    
}

@media print, screen and (max-width:1000px) {
    .wide .course .photo,
    .wide .course .menu {
        width: 100%;
        margin:0 auto 4rem;
        padding-left: 0;
    }
    
	.wide .course.recommendedCourse .menu,
	.wide .recommendedCourse .menu > div {
		max-width:540px;
	}
	
	.pcImg{display:none;}
	.spImg{display:block;margin-left: 5%;}
	

}

@media print, screen and (max-width: 768px) {
    .planBonus li {
        font-size: 1.4rem!important;
    }

	.planBonus{
		margin:2rem auto;
		padding:1rem 0 1.2rem;
	}

	.planBonus p{
		font-size:2.4rem;
		margin:0 auto 0.8rem;
	}
	
	.spImg{
		margin-left:0;
	}
}

/* plan_mv
------------------------------------------------------------ */
.plan_mv {
	position: relative;
	overflow: hidden;
}
.plan_mv .page_title {
	position: absolute;
	z-index: 2;
}
.plan_mv .page_title .eng {
	font-size: 14.0rem;
	line-height: 1;
	letter-spacing: 0.05em;
	color: #a78b47;
	text-shadow: 0 0 1em #000, 0 0 0.2em #000;
}
.plan_mv .page_title .jp {
	display: flex;
	margin-left: 2.5em;
	line-height: 24px;
	color: #fff;
}
.plan_mv .page_title .jp .time {
	margin-left: 1em;
	padding: 0 0.25em 0 1em;
	font-size: 0.86em;
	background: #000;
}
.plan_mv .mv {
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: cover;
	position: relative;
}
.plan_mv .mv::after {
	display: block;
	content: "";
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	background-image: url(/-/media/hotel/hs/hanshin/contents/restaurants/loin/img/share/cover.png);
	background-repeat: repeat;
	background-position: 0 0;
	background-size: 2px auto;
	opacity: 0.15;
}
@media print, screen and (max-width: 768px) {
	.plan_mv {
		margin-bottom: 30px;
		padding: 20px 0 60px;
	}
	.plan_mv .page_title {
		width: 100%;
		height: 110px;
		margin: auto 0;
		text-align: center;
		bottom: 20px;
	}
	.plan_mv .page_title .jp {
		justify-content: center;
		margin-left: 0;
	}
	.plan_mv .mv {
		width: 100%;
	}
}
@media print, screen and (max-width: 539px) {
	.plan_mv {
		margin: -5px 0 35px;
		padding: 0 0 70px;
	}
	.plan_mv .page_title .eng {
		font-size: 9.0rem;
	}
	.plan_mv .mv {
		width: 100%;
		padding-top: 90%;
	}
}
@media print, screen and (min-width: 540px) and (max-width: 768px) {
	.plan_mv {
		margin: 0 0 40px;
		padding: 20px 0 60px;
	}
	.plan_mv .page_title .eng {
		font-size: 10.0rem;
	}
	.plan_mv .mv {
		width: 100%;
		padding-top: 71.6%;
	}
}
@media print, screen and (min-width: 769px) {
	.plan_mv {
		margin: 0 0 20px;
		padding: 30px 0 40px;
	}
	.plan_mv .page_title .eng {
		font-size: 12.0rem;
	}
	.plan_mv .page_title {
		height: 130px;
		margin: auto 0;
		top: -5%;
		bottom: 0;
		left: 2.5%;
	}
	.plan_mv .mv {
		width: calc(97.5% - 20%);
		height: 550px;
		float: right;
	}
}
@media print, screen and (min-width: 1200px) {
	.plan_mv {
		margin: 0;
		padding: 40px 0 60px;
	}
	.plan_mv .page_title .eng {
		font-size: 14.0rem;
	}
	.plan_mv .mv {
		width: calc(97.5% - 240px);
	}
}
@media print, screen and (min-width: 1400px) {
	.plan_mv .page_title {
		left: calc((100% - 1400px) / 2 + 2.5%);
	}
	.plan_mv .mv {
		width: calc(97.5% - ((100% - 1400px) / 2) - 240px);
	}
}



/* categoryBox
------------------------------------------------------------ */
.categoryBox {
	margin-top:30px;
}
.categoryBox a {
	display:flex;
	flex-wrap: wrap;
	width:100%;
	overflow:hidden;
	text-decoration:none;
	background:#fff;
}

.categoryBox a .image{
	position:relative;
}
.categoryBox a .image::after {
	display:block;
	content:"";
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
	z-index:2;
	background-image:url(../img/share/cover.png);
	background-repeat:repeat;
	background-position:0 0;
	background-size:2px auto;
	opacity:0.15;
}
.categoryBox a .image,
.categoryBox a .text{
	transition:opacity 0.5s ease;
}
.categoryBox a:hover .image,
.categoryBox a:hover .text{
	opacity:0.6;
}
.categoryBox a .text{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	width:240px;
	height:220px;
	padding:0 15px;
	text-align:center;
}
.categoryBox a .text .eng{
	line-height:1;
}
.categoryBox a .text .jp{
	margin:5px 0 0;
	font-size:1.4rem;
	line-height:1.5;
}
.categoryBox a .image{
	width: calc(100% - 240px);
	height:220px;
}
.categoryBox a .image img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 20% 15%;
}

@media print, screen and (max-width: 539px) {
	.categoryBox a {
		display:block;
	}
	.categoryBox a .text,
	.categoryBox a .image{
		width:100%;
	}
	.categoryBox a .text{
		height:auto;
		padding:12px;
	}
	.categoryBox a .image{
		height:160px;
	}
	.categoryBox a .text .eng{
		font-size:4.2rem;
	}
}
@media print, screen and (min-width: 540px) and (max-width: 768px) {
	.categoryBox a .text,
	.categoryBox a .image{
		height:180px;
	}
	.categoryBox a .text .eng{
		font-size:4rem;
	}
}
@media print, screen and (min-width: 769px) {
	.categoryBox {
		margin-top:50px;
	}
	.categoryBox a .text{
		width:35%;
	}
	.categoryBox a .image{
		width:65%;
	}
	.categoryBox a .text,
	.categoryBox a .image{
		height:200px;
	}
	.categoryBox a .text .eng{
		font-size:4.8rem;
	}
}
@media print, screen and (min-width: 1300px) {
	.categoryBox a .text,
	.categoryBox a .image{
		height:220px;
	}
	.categoryBox a .text .eng{
		font-size:8.0rem;
	}
}


/* afternoonTea
------------------------------------------------------------ */

#afternoonTea .plan_mv .mv{
	width:100%;
	height:100vh;
	background-position: 20% 0;
}

#afternoonTea .page_title{
	top:auto;
	bottom:100px;
	left:0;
}

#afternoonTea .plan_mv .page_title .jp {
    line-height: 24px;
}

#afternoonTea h2 img{
	width:60%;
	padding:2rem;
}

#afternoonTea .menuName p{
	font-size:2.2rem;
}

@media print, screen and (max-width:650px) {
	#afternoonTea .plan_mv .mv{
		width:100%;
		height:60vh!important;
		background-position: 20% 0;
	}
	#afternoonTea .plan_mv .page_title .eng{
		font-size:14vw!important;
		padding-top:2vh;
	}
}



/* anniversaryPlan
------------------------------------------------------------ */

#anniversaryPlan .menuNameArea{
	margin:2rem 0;
	padding:2rem 0;
	border-top:1px solid #fff;
	border-bottom:1px solid #fff;
	display:flex;
	justify-content: center;
	align-items: center;
}

#anniversaryPlan .menuNameArea div{
	margin:2rem 1.6rem;
}

#anniversaryPlan .menuName h2 p{
	font-size:4rem;
	line-height:4rem;
}

@media print, screen and (max-width:768px) {
	#anniversaryPlan .plan_mv .page_title .eng{
		font-size:13vw!important;
	}
}

@media print, screen and (max-width:480px) {
	#anniversaryPlan .menuNameArea {
		display:block;
	}
	
	#anniversaryPlan .menuNameArea .pointCircle{
		width:100%;
		height:auto;
		border-radius:0;
		margin:0 0 2rem;
		padding:4px 0!important;
		font-size:1.4rem;
	}
	#anniversaryPlan .menuNameArea .pointCircle br{
		display:none;
	}
	
}



/* Swiper
------------------------------------------------------------ */

.swiper-pagination-bullet-active {
    background: #a78b47;
}