@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Marcellus&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&family=Oswald:wght@300;500&display=swap');

/*
■ フェードイン
■ フォント設定
■ 汎用パーツ
■ 全画面キービジュアル
■ フォーム
■ ライブラリー
*/

/* ■ ヘッダー ==================================================================================== */

.HeaderWrapUnit {
position: relative;
z-index: 10000 !important;
}

.l-header {
z-index: 210;
}

#l-utility {
z-index: 200 !important;
}

@media only screen and (max-width: 767px) {

}

@media print, screen and (min-width: 768px) {

	.l-header {
	position: fixed;
	height: 63px;
	}

	.section.FooterWrapUnit {
	min-height: auto !important;
	}

}


/* ■ フッター ==================================================================================== */

.l-footer__utility li a {
font-size: 1.3rem;
}

.l-footer__hills li a {
font-size: 1.2rem;
}


/* ■ リセット ==================================================================================== */

#scrollsnap_wrapper .section:not(.FooterWrapUnit):not(.HeaderWrapUnit) img {
width: 100%;
height: auto;
border: none;
vertical-align: bottom;
}

#scrollsnap_wrapper .section:not(.FooterWrapUnit):not(.HeaderWrapUnit) li {
list-style-type: none;
}

#scrollsnap_wrapper .section:not(.FooterWrapUnit):not(.HeaderWrapUnit) ul {
margin: 0;
padding: 0;
}

#scrollsnap_wrapper .section:not(.FooterWrapUnit):not(.HeaderWrapUnit) p {
margin: 0;
padding: 0;
}

#scrollsnap_wrapper .section:not(.FooterWrapUnit):not(.HeaderWrapUnit) dl {
margin: 0;
padding: 0;
}

#scrollsnap_wrapper .section:not(.FooterWrapUnit):not(.HeaderWrapUnit) figure {
margin: 0;
padding: 0;
}

#l-footer {
background: #fff !important;
padding-top: 100px;
/* padding-top: 185px; */
z-index: 15;
position: relative;
}

/* stickey用 */
@media only screen and (max-width: 767px) {

	html, body {
	overflow: visible !important;
	}

}


/* ■ フェードイン ==================================================================================== */

#Wrapper {
display: none;
}


@media only screen and (max-width: 767px) {

	.PC {
	display: none;
	}

	.inview-letter-spacing {
	letter-spacing: -0.04em;
	}

}

@media print, screen and (min-width: 768px) {

	.SP {
	display: none;
	}

	.inview-letter-spacing {
	letter-spacing: 0.01em;
	}

}

/* ■ フォント設定 ==================================================================================== */

/*
フォント
基準サイズ
*/


/* フォント --------------------------------------------------- */

/* WEBフォント：英語 */
.WF1 {
	font-family: 'Marcellus', serif;
	letter-spacing: 0.05em;
}

#scrollsnap_wrapper .section:not(.FooterWrapUnit) {
	font-family: dnp-shuei-gothic-gin-std, sans-serif;
	font-style: normal;
	font-weight: 400;
}

body {
-webkit-font-smoothing: antialiased;

}


/* 基準サイズ --------------------------------------------------- */

@media only screen and (max-width: 767px) {

	html {
	font-size: 62.5%;
	}

/* 	#scrollsnap_wrapper {
		overflow-x: hidden;
	} */

	#scrollsnap_wrapper .section:not(.FooterWrapUnit)  {
	font-size: 1.6em;
	}

}

@media print, screen and (min-width: 768px) {

	html {
	font-size: 56%;
	}

	#scrollsnap_wrapper .section:not(.FooterWrapUnit) {
	font-size: 1.6em;
	}

}

@media print, screen and (min-width: 1090px) {

	html {
	font-size: 62.5%;
	}

}



/* ■ カラー設定 ==================================================================================== */

/*
本文・body背景
リンク
アラート
テキスト個別
ボーダー個別
背景個別
*/


/* テキスト、ポインタ --------------------------------------------------- */

@media print, screen and (min-width: 768px) {

	.section p::selection,
	.section li::selection,
	.section h2::selection,
	.section h3::selection,
	.section dt::selection,
	.section dd::selection,
	.section span::selection,
	.section object::selection,
	.section figure::selection,
	.section img::selection,
	.section small::selection {
	background-color: #FFD033;
	}

	body {
	cursor: none;
	}

	#cursor {
	transform: translate(0, 0);
	pointer-events: none;
	position: fixed;
	top: -8px;
	left: -8px;
	width: 16px;
	height: 16px;
	background: #FFD033;
	border-radius: 50%;
	z-index: 999;
	transition: width 0.3s, height 0.3s, top 0.3s, left 0.3s;
	}

}


/* キービジュアル フルスクリーン表示 --------------------------------------------------- */

@media only screen and (max-width: 767px) {

	.KeyVisualSection {
	overflow-x: hidden;
	}

}

@media print, screen and (min-width: 768px) {

	.KeyVisualSection {
	width: 100%;
	min-height: inherit !important;
	justify-content: flex-start !important;
/* 	padding-top: 60px; */
	}

	/* MURAKAMI ---------- */
	.KeyVisualVol2 .KeyVisual.Vol2 {
	width: 100%;
    height: auto;
/*     margin-top: 30px; */
    position: relative;
	}

	/* TSUJI ------------ */
	.KeyVisualVol1 .KeyVisual.Vol1Unit {
	background: url(../images/top/KeyVisual1_PC.jpg) no-repeat;
	width: 100%;
    height: auto;
    margin-top: 30px;
    background-repeat: no-repeat;
    background-position: center top;
    background-size: contain;
    position: relative;
    padding-top: 58.5%;
	}

}

@media print, screen and (min-width: 1025px) {

	.KeyVisualSection.KeyVisualVol1 {
	width: 100vw;
/* 	height: 100vh; */
	min-height: calc(100vh - 90px) !important;
	justify-content: center !important;
	padding-top: 0;
	}

	/* MURAKAMI ---------- */
	.KeyVisualVol2 .KeyVisual.Vol2 {
	width: 100%;
    height: auto;
    margin-top: 30px;
    position: relative;
    padding-top: 0;
	}

	/* TSUJI ------------ */
	.KeyVisualVol1 .KeyVisual.Vol1Unit {
	background: url(../images/top/KeyVisual1_PC.jpg) no-repeat;
	width: 100%;
    height: calc(100vh - 123px);
    margin-top: 30px;
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: contain;
    position: relative;
    padding-top: 0;
	}

	/* スクロールボタンアニメーション */
	.c-scrolldown {
	  width: 1px;
	  height: 60px;
	  position: absolute;
	  bottom: 0;
	  left: 0;
	  right: 0;
	  margin: 0 auto;
	  overflow: hidden;
	}
	.c-scrolldown .c-line {
	  width: 100%;
	  height: 100%;
	  display: block;
	  background: linear-gradient(to bottom, black 50%, rgba(0, 0, 0, 0) 50%);
	  background-position: 0 -60px;
	  background-size: 100% 200%;
	  animation: scrolldown 2.2s cubic-bezier(0.76, 0, 0.3, 1) forwards infinite;
	}

	@keyframes scrolldown {
	  0% {
	    background-position: 0 -60px;
	  }
	  75% {
	    background-position: 0 0;
	  }
	  100% {
	    background-position: 0 60px;
	  }
	}


}


/* キービジュアル fade in --------------------------------------------------- */

.fadeIn {
animation-name: fadeInAnime;
animation-duration: 2.5s;
animation-delay: 0.5s;
animation-fill-mode: forwards;
opacity: 0;
}

@keyframes fadeInAnime{
	from {
	opacity: 0;
	}

	to {
	opacity: 1;
	}
}

/* キービジュアル Vol4 --------------------------------------------------- */

@media only screen and (max-width: 767px) {

	.KeyVisual_Btm_Sp {
	display: flex;
	}

	.KeyVisual .Logo {
	width: 86%;
	text-align: center;
	padding-top: 8% !important;
	margin-bottom: 8% !important;
	margin-left: 5% !important;
	}

	.KeyVisual .Lead {
	width: 15px;
	text-align: center;
	}

	.KeyVisual_LeftBox.BoxS2 {
	width: 22%;
	padding-left: 5% !important;
	box-sizing: border-box;
	}

	.KeyVisualrightBox.BoxS2 {
	width: 78%;
	}

	.KeyVisual .Name {
	width: 65%;
	margin-top: 10% !important;
	}

	.KeyVisualVol4 .Name {
    width: 73% !important;
	}

	.KeyVisualVol5 .Name {
    width: 88% !important;
    margin-top: 5% !important;
	}

	.KeyVisualVol14 .Name {
    width: 55% !important;
    margin-top: 5% !important;
	}

	.KeyVisualVol17 .Name {
    width: 28% !important;
    margin-top: 5% !important;
	}

}

@media print, screen and (min-width: 768px) {

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

	.KeyVisual .Logo {
	width: 55%;
	text-align: center;
	padding-top: 3% !important;
	margin-bottom: 3% !important;
	}

	.KeyVisual .Lead img {
	width: 15% !important;
	height: auto !important;
	text-align: center;
	}

	.KeyVisual .Name {
	width: 75%;
	margin-top: 40% !important;
	}

	.KeyVisual .NameVol17 {
    width: 32% !important;
	margin-top: 40% !important;
	}

	.KeyVisual .KeyVisual_LeftBox {
	width: 30%;
	box-sizing: border-box;
	}

	.KeyVisual .KeyVisualrightBox {
	width: 70%;
	}

	.KeyVisual .KeyVisual_LeftBox.BoxS2 {
	padding-left: 3% !important;
	}

	.KeyVisual .slider-wrap .slide-item {

	}

}

@media print, screen and (min-width: 1025px) {



}


.slide-item>img {
width: 100%;
height: 100%;
object-fit: cover;
}

@keyframes fadezoom {
0% {
transform: scale(1);
}

100% {
transform: scale(1.1);
}
}

.slick-animation {
animation: fadezoom 15s 0s forwards;
}


@media only screen and (max-width: 767px) {

	.slider-wrap {
	height: auto;
	margin: 0 auto;
	overflow: hidden;
	}

}

@media print, screen and (min-width: 768px) {

	.slider-wrap {
	height: auto;
	margin: 0 auto;
	overflow: hidden;
	}

}





/* 2nd view --------------------------------------------------- */

@media only screen and (max-width: 767px) {

	.PrologueSection .Prologue {
    width: 100%;
    padding: 18% 0 27% 0 !important;
    }

	.sec.sec2 {
	margin-top: 70px;
/* 	margin-top: 90px; */
	}

    .PrologueSection .Prologue p {
        font-size: 1.3rem !important;
        line-height: 2.2em;
    }

    .PrologueSection .Prologue .guest_name {
        margin-top: 8rem !important;
        margin-left: 20% !important;
        margin-bottom: 30px !important;
        height: 5vh;
    }

    .PrologueSection .Prologue .guest_name img {
        width: 50% !important;
        height: auto !important;
    }

    .PrologueSection .Prologue .sec1 p:first-child {
        margin-left: 8% !important;
    }

    .PrologueSection .Prologue .sec2 p:last-child {
        margin-left: 20% !important;
    }

	.PrologueSection .PrologueB {
    width: 100%;
    padding: 18% 0 30% 0 !important;
    }
    .PrologueSection .PrologueB p {
        font-size: 1.3rem !important;
        line-height: 2.2em;
    }
    .PrologueSection .PrologueB .vol22 {
        letter-spacing: -0.02em !important;
    }
    .PrologueSection .PrologueB .guest_name {
        margin-top: 8rem !important;
        margin-left: 20% !important;
        margin-bottom: 30px !important;
        height: 5vh;
    }
    .PrologueSection .PrologueB .guest_name img {
        width: 50% !important;
        height: auto !important;
    }
    .PrologueSection .PrologueB .sec1 p:first-child {
        margin-left: 8% !important;
    }
    .PrologueSection .PrologueB .sec2 p:last-child {
        margin-left: 20% !important;
    }

    .PrologueIn .sec3 {
    margin-left: 21% !important;
    }

    .PrologueIn .sec3 p {
    text-align-last: left;
    margin-top: 15px !important;
    font-size: 1.1rem !important;
    line-height: 2.0em;
    color: #707070;
    }

}

@media print, screen and (min-width: 768px) {

	.PrologueSection {
	margin-bottom: 0;
	display: block !important;
	min-height: inherit !important;
	}

	.PrologueIn {
	padding: 200px 0;
	}

    .PrologueIn .guest_name {
    height: 8vh;
    width: 40%;
    padding-top: 10px;
    box-sizing: border-box;
    text-align: center;
    }

    .PrologueIn .guest_name img {
    height: 120px !important;
    width: auto !important;
    }

    .PrologueVol5 .guest_name img {
    height: 16px !important;
    }

    .PrologueIn .sec1 {
    text-align: left;
	padding-left: 40%;
    }

    .PrologueIn .sec1 .sec1_lead {
    font-size: 1.3rem;
    line-height: 2.2em;
    }

    .PrologueIn .sec2 {
    padding-top: 3%;
    display: flex;
    flex-direction: row;
    }

   .PrologueIn .sec2 p:first-child {
    font-size: 1.3rem;
    line-height: 2.2em;
    margin-bottom: 100px;
    }

    .PrologueIn .sec2 p:last-child {
    font-size: 1.5rem;
    line-height: 2.2em;
    }

    .PrologueIn .sec3 {
    text-align: left;
	padding-left: 40%;
    }

    .PrologueIn .sec3 p {
	margin-top: 15px !important;
	font-size: 1.1rem;
	line-height: 1.8em;
	color: #707070;
    }

    .PrologueIn .KerningVol17 {
        letter-spacing: 0.07em !important;
    }

}


@media print, screen and (min-width: 1025px) {

	.PrologueSection {
	overflow: hidden;
	margin-bottom: 0;
	display: block !important;
	}

	.PrologueSection .Prologue {
    position: relative;
    display: flex;
	justify-content: center;
	align-items: center;
	}

	.PrologueIn {
	padding: 270px 0;
	min-width: 90%;
	}

    .PrologueIn .guest_name img {
    height: 155px !important;
    width: auto !important;
    }

    .PrologueVol5 .guest_name img {
    height: 24px !important;
    }

    .PrologueIn .guest_name {
    width: 50%;
    }

    .PrologueIn .sec1 {
	padding-left: 50%;
    }

    .PrologueIn .sec3 {
	padding-left: 50%;
    }


}



/* 左側ロゴ固定表示 --------------------------------------------------- */

.IssuesTitle.hidden {
opacity: 0;
visibility: hidden;
transition: all 0.5s ease;
}


@media only screen and (max-width: 767px) {

	.sectionWrap_SP {
	position: relative;
	}

	.IssuesTitle {
	position: sticky;
	z-index: 15;
	top: 80px;
	left: 10px;
	text-indent: -9999px;
	}

	/* 鈴木啓太・畑野ひろ子 ---------- */
	.IssuesTitle.IssuesTitleVol58 {
	margin-bottom: -320px !important;
	width: 36px;
	height: 306px;
	background: url(../images/common/Head_Logo58.svg) no-repeat;
	background-size: 36px 306px;
	z-index: 20;
	}

}

@media print, screen and (min-width: 768px) {

	.IssuesTitle {
	transition: opacity .3s;
	opacity: 1;
	visibility: visible;
	position: sticky;
	z-index: 200;
	top: 140px;
	left: 20px;
	text-indent: -9999px;
	}

	/* 鈴木啓太・畑野ひろ子 ---------- */
	.IssuesTitle.IssuesTitleVol58 {
	margin-bottom: -490px !important;
	width: 44px;
	height: 367px;
	background: url(../images/common/Head_Logo58.svg) no-repeat;
	background-size: 44px 367px;
	}

	.IssuesTitle.hidden {
	opacity: 0;
	visibility: hidden;
	}

}

@media print, screen and (min-width: 1201px) {

	.IssuesTitle {
	top: 90px;
	}

}



/* リスト記述 --------------------------------------------------- */

.ListKomeS li {
position: relative;
}

.ListKomeS li:before {
content: '※';
display: inline-block;
position: absolute;
left: 0;
}

.ListKomeS li {
padding-left: 16px;
}



/* ■ セクション ==================================================================================== */

body {
background: #fafafa;
}

.SectionUnit {
	position: relative;
	background: #fafafa;
}

#box0 {
	height: 100vh;
}

@media only screen and (max-width: 767px) {

	.LRBox {
	padding-top: 56px;
	}

	#box1 {
		margin-top: -100px;
	}

	#scrollsnap_wrapper {
		scroll-behavior: auto;
	}

}

@media print, screen and (min-width: 768px) {

	#scrollsnap_wrapper {
		height: 100vh;
		/* border: solid 1px red; */
		overflow-x: hidden;
		overflow-y: visible;
		/* scroll-snap-type: y; */
	}

	#scrollsnap_wrapper > div.section {
		display: flex;
		flex-direction: column;
		justify-content: center;
		/* border: solid 1px blue; */
		min-height: calc(100vh - 90px);
		width: 100%;
	}

	/*
	#scrollsnap_wrapper > div.section:nth-child(2){
		scroll-snap-align: start;
	}
	*/

	#box0 {
		height: calc(100vh - 90px);
	}

	.LRBox {
		display: flex;
		overflow: visible !important;
		/* padding-top: 63px; */
	}

	#box2 .LBox,
	#box4 .LBox,
	#box6 .LBox,
	#box8 .LBox,
	#box10 .LBox {
	width: 50%;
	position: relative;
	}

	#box2 .RBox.Mgtat,
	#box4 .RBox.Mgtat,
	#box6 .RBox.Mgtat,
	#box8 .RBox.Mgtat,
	#box10 .RBox.Mgtat {
	margin-left: 0;
	}

	#box2 .RBox,
	#box4 .RBox,
	#box6 .RBox,
	#box8 .RBox,
	#box10 .RBox {
		width: 50%;
		position: relative;
		/* overflow-x: hidden; */
		background: #fafafa;
	}


	.sticky_item_a {
		position: sticky;
		z-index: 100;
		overflow: visible !important;
		top: 63px;
		height: calc(100vh - 60px);
		width: 50%;
	}

	#box2 .sticky_item_a .RBox,
	#box4 .sticky_item_a .RBox,
	#box6 .sticky_item_a .RBox,
	#box8 .sticky_item_a .RBox,
	#box10 .sticky_item_a .RBox {
		width: 100%;
	}

	#box3 .LBox,
	#box5 .LBox,
	#box7 .LBox,
	#box9 .LBox {
	width: 40%;
	position: relative;
	background: #fafafa;
	}

	#box3 .sticky_item_a .LBox,
	#box5 .sticky_item_a .LBox,
	#box7 .sticky_item_a .LBox,
	#box9 .sticky_item_a .LBox {
		width: 100%;
	}

	#box3 .RBox,
	#box5 .RBox,
	#box9 .RBox,
	#box7 .RBox {
	width: 50%;
	position: relative;
	}

	/* Vol19対応　*/
	.WrapVol19 	#box4 .LBox {
	width: 100%;
	}

	.WrapVol19 	#box5 .LBox {
	width: 50%;
	}

	.WrapVol19 	#box5 .RBox {
	width: 100%;
	}

	.WrapVol19 	#box6 .LBox {
	width: 100%;
	}

	.WrapVol19 	#box4 .ShopNCredit,
	.WrapVol19 	#box4 .sticky_item_a,
	.WrapVol19 	#box7 .ShopNCredit,
	.WrapVol19 	#box7 .sticky_item_a {
	height: auto !important;
	}


	.SectionUnit {
		height: 100%;
		/*
		padding-top: 63px;
		margin-top: -63px;
		*/
	}

	#box2 .LBox {
	z-index: 7;
	}

	#box2 .RBox {
	z-index: 8;
	}

	#box3 .LBox {
	z-index: 10;
	}

	#box3 .RBox {
	z-index: 9;
	}

	#box4 .LBox {
	z-index: 11;
	}

	#box4 .RBox {
	z-index: 12;
	}

	#box5 .LBox {
	z-index: 14;
	}

	#box5 .RBox {
	z-index: 13;
	}

	#box6 .LBox {
	z-index: 15;
	}

	#box6 .RBox {
	z-index: 16;
	}

	#box7 .LBox {
	z-index: 18;
	}

	#box7 .RBox {
	z-index: 17;
	}

	#box8 .LBox {
	z-index: 19;
	}

	#box8 .RBox {
	z-index: 20;
	}

	#box9 .LBox {
	z-index: 21;
	}

	#box9 .RBox {
	z-index: 22;
	}

	#box10 .LBox {
	z-index: 23;
	}

	#box10 .RBox {
	z-index: 24;
	}

}



/* ■ Info ==================================================================================== */

@media only screen and (max-width: 767px) {

	.SectionInfo .InfoLead1,
	.SectionInfo .InfoLead2 {
	font-size: 1.3rem;
	line-height: 2.2em;
	letter-spacing: 0.05em;
	}

	.SectionInfo .InfoLead1 {
	margin-top: 32%;
	padding-right: 30px;
	padding-left: 30px;
	}

	.SectionInfo .InfoName {
	width: 140px;
	margin: 90px 0 40px 25%;
	}

	.SectionInfo .InfoLead2 {
	margin-left: 25%;
	}

}

@media print, screen and (min-width: 768px) {

	.scrollable-content {
		height: 80vh;
		overflow-y: scroll;
	}

	.InfoUnitIn {
	display: flex;
	}

	.SectionInfo .InfoName {
		width: 50%;
	}

	.SectionInfo .InfoName span {
	display: block;
	width: 240px;
	position: absolute;
	top: 50%;
	left: 15%;
	}

	.SectionInfo .InfoLead1 {
	font-size: 1.3rem;
	line-height: 2.2em;
	margin-bottom: 100px;
	}

	.SectionInfo .InfoLead2 {
	font-size: 1.5rem;
	line-height: 2.2em;
	}

	.SectionInfo .InfoWrap {
	width: 50%;

	}

	.SectionInfo .InfoWrapIn {

	position: absolute;
		transform: translateY(-62%);
		left: 55%;
	}

}




/* ■ 詳細 ==================================================================================== */


.ShopNCredit a:link {
text-decoration: none;
}

.ShopNCredit a:hover {
text-decoration: none;
}

.ShopNCredit a:active {
text-decoration: none;
}

.ShopNCredit a:visited {
text-decoration: none;
}

.ShopInfoName span {
display: block;
}

.ShopInfoNameB span {
display: block;
}

.ShopInfoName .barbacoa {
width: 80px;
height: 101px;
background: url(../images/map/Logo_barbacoa.png);
background-repeat: no-repeat;
background-size: contain;
text-indent: -9999px;
}

.ShopInfoName .tfw49 {
width: 110px;
height: 31px;
background: url(../images/map/Logo_tfw49.png);
background-repeat: no-repeat;
background-size: contain;
text-indent: -9999px;
}

.ShopInfoName .KNOCK {
width: 110px;
height: 25px;
background: url(../images/map/Logo_KNOCK.png);
background-repeat: no-repeat;
background-size: contain;
text-indent: -9999px;
}

.ShopInfoName .Estnation {
width: 110px;
height: 14px;
background: url(../images/map/Logo_Estnation.png?260227B);
background-repeat: no-repeat;
background-size: contain;
text-indent: -9999px;
}

.ShopInfoName .hoolywood {
width: 110px;
height: 64px;
background: url(../images/map/Logo_hoolywood.png);
background-repeat: no-repeat;
background-size: contain;
text-indent: -9999px;
}

.Name_W {
font-weight: bold;
}

@media only screen and (max-width: 767px) {

	.ShopNCredit a:hover {
	text-decoration: none;
	}

	.Photo {
	position: relative;
	overflow: hidden;
	z-index: 15;
	}

	.RBox.Mgtat	.ShopMapUnit {
	top: 120px;
	}

	.ShopName {
	font-size: 1.6rem;
	margin-bottom: 20px;
	}

	.ShopNCredit {
	padding-top: 70px;
	padding-left: 27px;
	}

	.PhotoList {
	padding: 0 20px !important;
	}

	.ShopNCredit a {
	display: block;
	position: relative;
	}

	.ShopNCredit a:before {
	position: absolute;
	left: -37px;
	top: 0;
	content: '';
	display: inline-block;
	width: 16px;
	height: 16px;
	border-radius: 50%;
    background-color: #000;
  	transition : 1s;
	}

	.ShopNCredit a:hover:before {
	transform: scale(1.4);
	transition : 0.8s;
	}

	.ShopNCredit {
	width: 100%;
	position: relative;
	text-align: justify;
	text-justify: inter-ideograph; /* IE用 */
	height: 100vh;
	}

	.ShopList {
	font-size: 13px;
	line-height: 21px;
	}

	.ShopTextWrap {
	padding: 50px 20px 40px 80px;
	text-align: justify;
    text-justify: inter-ideograph;
	}

	.ShopTextMds {
	position: relative;
	font-size: 1.5rem;
	line-height: 1.8em;
	letter-spacing: 0.08em;
	font-weight: 600;
	margin-bottom: 30px !important;
	}

	.ShopTextMds:before {
	display: block;
	position: absolute;
	background-color: #000;
	content: "";
	top: 15px;
	left: -45px;
	width: 30px;
	height: 1px;
	margin-top: -1px;
	}

	.ShopText {
	font-size: 1.3rem;
	line-height: 2.2em;
	}

	.ShopTextNote {
	font-size: 1.1rem;
	line-height: 1.6em;
	margin-top: 10px !important;
	}

	.ShopTextLink {
	font-size: 1.1rem;
	line-height: 1.8em;
	color: #939598;
	margin-top: 20px !important;
	}

	.ShopTextLink a {
	text-decoration: underline !important;
	}

	.ShopText .Kerning {
	letter-spacing: -0.04em !important;
	}

	/*地図の中身*/
	.leaflet-demo {
	width: 100%;
	height: 300px;
	}

	.leaflet-demo iframe {
	width: 100%;
	height: 300px;
	}

	.ShopInfoWrap {
	position: absolute;
	bottom: 0;
	right: 0;
	padding-bottom: 40px;
	padding-right: 50px;
	}

	.LBox .ShopInfoWrap {
	padding-left: 50px;
	padding-right: 0;
	}


	.ShopMapWrap .ShopInfoCaution {
	font-size: 1.0rem;
	color: #999;
	line-height: 1.8em;
	margin-top: 15px !important;
	}

	.ShopInfoCaution a {
	color: #999;
	text-decoration: underline !important;
	}

	.ShopMapWrap .ShopInfoTxt {
	margin-bottom: 30px;
	width: 60%;
    font-family: dnp-shuei-gothic-gin-std, sans-serif;
    font-style: normal;
    font-weight: 400;
	}

	.ShopMapWrap .ShopInfoTxt p {
	font-size: 1.1rem;
	line-height: 2.0rem;
	margin-bottom: 0 !important;
	}

	.ShopInfoTxtB {
	margin-bottom: 30px;
	width: 35%;
	}

	.ShopInfoTxtB p {
	font-size: 1.1rem;
	line-height: 2.0rem;
	}

	.WebSite {
	position: relative;
	}

	.WebSite a {
	text-decoration: underline !important;
	}

	.WebSite:after {
	content: '';
	display: inline-block;
	width: 11px;
	height: 11px;
	background-image: url(../images/map/Icon_Web.svg);
	background-size: contain;
	vertical-align: middle;
	margin-left: 10px;
	}

	.ShopMapWrap .ShopInfoName {
	margin-top: 5px !important;
	margin-bottom: 30px;
	width: 40%;
	}

	.ShopMapWrap .ShopInfoNameB {
	margin-top: 5px !important;
	margin-bottom: 30px;
	width: 65%;
	}

	.ShopInfoClose {
    width: 40px;/*枠の大きさ*/
    height: 40px;/*枠の大きさ*/
    position: absolute;
    top: 40px;
    right: 20px;
    text-indent: -9999px;
	}

	.ShopCreditWrap .ShopCredit {
	padding-top: 60px !important;
	font-size: 13px;
	color: #707070;
	}

	.ShopList {
	margin-top: 30px !important;
	}

	#box6 .ShopList {
	padding-bottom: 80px !important;
	}

	.ShopList li {
	font-size: 13px;
	line-height: 21px;
	color: #707070;
	}

	.ShopMapWrap {
	background: #fafafa;
	padding: 30px 20px 30px 20px;
	}

	.ShopMapUnitIn {
	display: flex;
	}

}

@media print, screen and (min-width: 768px) {

	.ShopName {
	font-size: 1.6rem;
	margin-bottom: 20px !important;
	color: #333 !important;
	}

	.ShopNCredit {
	padding-top: 70px;
	padding-left: 27px;
	}

	.PhotoList li {
		overflow: hidden;
		position: relative;
	}

	.PhotoList img {
		width: 100%;
		height: auto;
	}

	.ShopNCredit a {
	display: block;
	position: relative;
	}

	.ShopNCredit a:before {
	position: absolute;
	left: -35px;
	top: 2px;
	content: '';
	display: inline-block;
	width: 16px;
	height: 16px;
	border-radius: 50%;
    background-color: #000;
  	transition : 1s;
  	z-index: 20;
	}

	.ShopNCredit a:hover:before {
	transform: scale(1.4);
	transition : 0.8s;
	}

	.ShopNCredit {
	box-sizing: border-box;
	width: 100%;
	position: relative;
	text-align: justify;
	text-justify: inter-ideograph; /* IE用 */
	height: calc(100vh - 60px);
	}

	#box3 .ShopNCredit,
	#box5 .ShopNCredit {
	height: calc(100vh - 60px);
	}

	.ShopList {
	font-size: 13px;
	line-height: 21px;
	color: #707070;
	}

	.OpenBtn:link {
	color: #999;
	-webkit-transition: color 0.6s ease 0.01s;
	transition: color 0.6s ease 0.01s;
	}

	.OpenBtn:hover {
	color: #333;
	}

	.ShopTextWrap {
	width: 60%;
	position: absolute;
	right: 40px !important;
	bottom: 40px !important;
	top: auto;
	}

	.ShopTextMds {
	position: relative;
	font-size: 1.5rem;
	line-height: 1.8em;
	letter-spacing: 0.08em;
	font-weight: 600;
	margin-bottom: 30px !important;
	}

	.ShopTextMds:before {
	display: block;
	position: absolute;
	background-color: #000;
	content: "";
	top: 15px;
	left: -50px;
	width: 30px;
	height: 1px;
	margin-top: -1px;
	}

	.ShopText {
	font-size: 1.3rem;
	line-height: 2.1em;
	}

	.ShopTextNote {
	font-size: 1.1rem;
	line-height: 1.6em;
	margin-top: 10px !important;
	}

	.ShopTextLink {
	font-size: 1.1rem;
	line-height: 1.8em;
	color: #939598;
	margin-top: 20px !important;
	}

	.ShopTextLink a {
	text-decoration: underline !important;
	}

	.ShopNCredit .ShopTextLink a:before {
	display: none;
	}

	.ShopText .Kerning {
	letter-spacing: -0.03em !important;
	}

	.ShopText .Kerning2 {
	letter-spacing: -0.04em !important;
	}

	/*左側にテキスト*/
	.LBox .ShopNCredit {
	padding-right: 27px;
	}

	.LBox .ShopName {
	text-align: right;
	}

	.LBox .ShopList {
	text-align: right;
	}

	.LBox .ShopTextWrap {
	left: 50px;
	right: auto !important;
	}

	.LBox .ShopNCredit a:before {
	right: -35px;
	left: auto !important;
	z-index: 20;
	}

	.LBox .ShopNCredit {
	width: 100%;
	box-sizing: border-box;
	}

	.LBox .fixed-box2,
	.LBox .fixed-box4,
	.LBox .fixed-box6 {
	width: 100%;
	}

	.LBox .Mgtat .ShopTextWrap {
	bottom: 100px !important;
	}

	.LBox .Mgtat .ShopNCredit {
	width: 100%;
	position: absolute !important;
	top: 70px;
	padding-top: 0 !important;
	box-sizing: border-box;
	}

	/*地図の中身*/
	/*
	.RBox.Mgtat	.ShopMapUnit {
		top: 120px;
	}
	*/

	.ShopMapUnit {
	/*position:fixed;にし、z-indexの数値を大きくして前面へ*/
	position:absolute;
	z-index: 20;
	/*ナビのスタート位置と形状*/
	top: 0;
	right: -120%;
	width: 100%;
	height: calc(100vh - 90px);
	background: #fafafa;
	/*動き*/
	transition: right 0.6s, opacity 1.0s;
	padding: 0 30px;
	box-sizing: border-box;
	z-index: 15;
	opacity: 0;
	}

	/*アクティブクラスがついたら位置を0に*/
	.ShopMapUnit.panelactive {
	right: 0;
	opacity: 1;
	transition: right 0.6s, opacity 1.0s;
	}

	/*.ShopMapUnit.panelactive .ShopInfoClose {
	transform:rotate(0);
	opacity: 1;
	transition: opacity 2.8s, transform 1.0s;
	}

	.ShopMapUnit .ShopInfoClose {
	transform:rotate(-90deg);
	opacity: 0;
	transition: opacity 2.8s, transform 1.0s;
	}*/


	.ShopMapUnit.MapUnit2,
	.ShopMapUnit.MapUnit4,
	.ShopMapUnit.MapUnit6 {
	top: 0;
	left: -120%;
	right: auto !important;
	transition: left 0.6s, opacity 1.0s !important;
	}

	.ShopMapUnit.MapUnit2.panelactive,
	.ShopMapUnit.MapUnit4.panelactive,
	.ShopMapUnit.MapUnit6.panelactive {
	right: auto !important;
	left: 0;
	}

	/*ナビゲーションの縦スクロール*/
	.ShopMapUnit.panelactive .g-nav-list{
    /*ナビの数が増えた場合縦スクロール*/
    position: fixed;
    z-index: 999;
    width: 100%;
    height: 100vh;/*表示する高さ*/
    overflow: auto;
    -webkit-overflow-scrolling: touch;
	}

	.MapUnit3 .leaflet-demo iframe {
	margin-bottom: 20px;
	}

	.leaflet-demo {
	width: 100%;
	height: 300px;
	}

	.leaflet-demo iframe {
	width: 100%;
	height: 300px;
	}

	.ShopInfoWrap {
	position: absolute;
	bottom: 20px;
	right: 0;
	padding-bottom: 0;
	padding-right: 40px;
	width: 300px;
	}

	.LBox .ShopInfoWrap {
	padding-left: 40px;
	padding-right: 0;
	right: auto;
	left: 0;
	}

	.MapUnit2 .ShopInfoWrap {
	padding-left: 40px;
	padding-right: 0;
	right: auto;
	left: 0;
	}

	.ShopInfoCaution {
	font-size: 1.2rem;
	color: #999;
	line-height: 1.8em;
	margin-top: 20px !important;
	}

	.ShopInfoCaution a {
	color: #999;
	text-decoration: underline !important;
	}

	.ShopInfoWrap .ShopInfoTxt {
	margin-bottom: 30px;
	}

	.ShopInfoWrap .ShopInfoTxt p {
	margin-bottom: 0 !important;
	font-size: 1.2rem !important;
	line-height: 2.0rem !important;
	}

	.ShopInfoTxtB {
	margin-bottom: 30px;
	}

	.ShopInfoTxtB p {
	font-size: 1.2rem;
	line-height: 2.0rem;
	}

	.WebSite {
	position: relative;
	}

	.WebSite a {
	text-decoration: underline !important;
	}

	.WebSite:after {
	content: '';
	display: inline-block;
	width: 11px;
	height: 11px;
	background-image: url(../images/map/Icon_Web.svg);
	background-size: contain;
	vertical-align: middle;
	margin-left: 10px;
	}

	.ShopInfoWrap .ShopInfoName {
	margin-bottom: 30px !important;
	}

	.ShopInfoWrap .ShopInfoNameB {
	margin-bottom: 30px !important;
	}

	.ShopInfoClose {
    width: 40px;/*枠の大きさ*/
    height: 40px;/*枠の大きさ*/
    position: absolute;
    top: 40px;
    right: 20px;
    text-indent: -9999px;
    z-index: 20;
	}

	.LBox .ShopInfoClose {
	left: 20px;
	right: auto !important;
	}

	.MapUnit2 .ShopInfoClose {
	left: 20px;
	right: auto !important;
	}

	.ShopInfoClose::before, .ShopInfoClose::after{
    content: "";
    display: block;
    width: 100%;/*バツ線の長さ*/
    height: 1px;/*バツ線の太さ*/
    background: #000;
    transform: rotate(45deg);
    transform-origin:0% 50%;
    position: absolute;
    top: calc(14% - 5px);
    left: 14%;
	}

	.ShopInfoClose::after{
    transform: rotate(-45deg);
    transform-origin:100% 50%;
    left: auto;
    right: 14%;
	}

	.RCoInfo {
    width: 100%;
    overflow: hidden;
	}
	.RCoInfoL {
	float: left;
    width: 55%;
	}
	.RCoInfoR {
    width: 45%;
    float: right;
	}

	.ShopCreditWrap .ShopCredit {
	padding-top: 60px !important;
	font-size: 13px;
	color: #707070;
	}

}

@media print, screen and (min-width: 1025px) {

	.ShopTextWrap {
	width: 300px;
	}

	.LBox .ShopTextWrap {
	width: 320px;
	}

}



/*------ モーダル -------*/

@media only screen and (max-width: 767px) {

	.modal{
	display: none;
	position: fixed;
	top: 0;
	min-height: 100%;
	width: 100%;
	overflow: scroll;
	/*z-index: 26;*/
	z-index: 100;
	}

	.modal-bg{
	position: absolute;
	height: 100vh;
	width: 100%;
	background: rgba(0, 0, 0, 0.8);
	}

	.modal-content{
	position: absolute;
	top: 0;
	left: 0;
	overflow: scroll !important; /* はみ出た部分はスクロールさせる */
	min-height: 100%;/* これが無いと「overflow:scroll」が利かない */
	width: 100%;/* これが無いと「overflow:scroll」が利かない */
	background: #fafafa;
	}

	body.fixed {
	position: fixed;
	width: 100%;
	height: 100%;
	left: 0;
	}

	.ModalBtn {
	display: none;
	position: fixed;
    left: 0;
    bottom: 0;
	width: 100%;
	height: 60px;
	padding-left: 58px;
	color: #000;
	margin: auto;
	cursor: pointer;
	font-size: 1.8rem;
	background: #fff;
	text-decoration: none;
	z-index: 10;
	}

	.ModalBtn.Mgtat {
	background: #fff;
	}

	.ModalBtn.Mgtat:before {
	display: none;
	}

	.ModalBtn:before {
	content: '';
	position: absolute;
	left: 20px;
	right: 20px;
	top: 19px;
	display: block;
	width: 24px;
	height: 24px;
	background: #333333;
	border-radius: 50%;
	}

	.ModalBtn span {
	position: relative;
	line-height: 60px;
	}

	.ModalBtn span:before,
	.ModalBtn span:after {
	position: absolute;
	top: 12px;
	left: -26px;
	content: '';
	display: inline-block;
	width: 13px;
	height: 1px;
	background: #fff;
	transform: translateX(-50%);
	z-index: 10;
	}

	.ModalBtn span:before {
	top: 6px;
	width: 1px;
	height: 13px;
	}

	/* 店舗名に行の場合 */
	.ModalBtn span.Line2 {
	position: relative;
	line-height: 1px !important;
	}

	.ModalBtnLine2 {
	line-height: 20px;
    padding-top: 10px;
	}

	.ModalBtn span.Line2:before {
	top: 16px !important;
	}

	.ModalBtn span.Line2:after {
	top: 22px !important;
	}
	/* 店舗名に行の場合 ここまで */

	.ModalBtnS {
	display: none;
	position: fixed;
    left: 0;
    bottom: 0;
	width: 100%;
	height: 60px;
	padding-left: 58px;
	color: #000;
	margin: auto;
	cursor: pointer;
	font-size: 1.3rem;
	background: #fff;
	text-decoration: none;
	z-index: 10;
	}

	.ModalBtnS.Mgtat {
	background: #fff;
	}

	.ModalBtnS.Mgtat:before {
	display: none;
	}

	.ModalBtnS:before {
	content: '';
	position: absolute;
	left: 20px;
	right: 20px;
	top: 19px;
	display: block;
	width: 24px;
	height: 24px;
	background: #333333;
	border-radius: 50%;
	}

	.ModalBtnS span {
	position: relative;
	line-height: 50px;
	}

	.ModalBtnS span:before,
	.ModalBtnS span:after {
	position: absolute;
	top: 9px;
	left: -26px;
	content: '';
	display: inline-block;
	width: 13px;
	height: 1px;
	background: #fff;
	transform: translateX(-50%);
	z-index: 10;
	}

	.ModalBtnS span:before {
	top: 3px;
	width: 1px;
	height: 13px;
	}

	.ModalBtnS small {
	line-height: 60px;
	font-size: 1.3rem;
	}

	.js-modal-close {
    width: 50px;/*枠の大きさ*/
    height: 50px;/*枠の大きさ*/
    position: fixed;
    top: 80px;
    right: 10px;
    text-indent: -9999px;
	}

	.js-modal-close::before, .js-modal-close::after {
	    content: "";
    display: block;
    width: 100%;
    height: 1px;
    background: #000;
    transform: rotate(45deg);
    transform-origin: 0% 50%;
    position: absolute;
    top: calc(14% - 5px);
    left: 14%;
	}

	.js-modal-close::after {
    transform: rotate(-45deg);
    transform-origin: 100% 50%;
    left: auto;
    right: 14%;
	}

}


/* ■ プロフィール ==================================================================================== */

.UnitProfile {
background: #f2f2f2;
position: relative;
}

@media only screen and (max-width: 767px) {

	.UnitProfile {
	z-index: 25;
	}

	.UnitProfileIn {
	padding: 20% 20% 0 20%;
	}

	.UnitProfileIn .ProfileThumb {
	margin-bottom: 40px;
	}

	.ProfileName {
	width: 250px;
	margin-bottom: 20px !important;
	}

	.ProfileNameTXT {
	font-size: 15px;
	font-weight: bold;
	margin-bottom: 10px !important;
	}

	.ProfileNameTXTB {
	font-size: 15px;
	font-weight: bold;
	margin: 60px 0 10px 0 !important;
	}

	.ProfileNameTXTC {
	font-size: 15px;
	font-weight: bold;
	margin-bottom: 10px !important;
	}

	.ProfileNameSVG {
	width: 250px;
	margin-bottom: 20px !important;
	}

	.ProfileLead {
	font-size: 1.2rem;
	text-align: left;
	line-height: 1.8em;
    text-align: justify;
    letter-spacing: 0.03em;
    text-justify: inter-ideograph;
	}

	.ProfileLeadVol18 {
	font-size: 1.2rem;
	text-align: left;
	line-height: 1.8em;
    text-align: justify;
    letter-spacing: 0.03em;
    text-justify: inter-ideograph;
	}

	.ProfileLead .Kerning{
	letter-spacing: -0.07em !important;
	}

	.UnitProfile .Logo {
	width: 86% !important;
	margin-right: auto;
	margin-left: auto;
	padding: 80px 0 50px 0;
	}

	.UnitProfile .CopyRight {
	margin: 0 auto;
	padding-bottom: 7%;
	text-align: center;
	color: #999;
	font-size: 1.0rem;
	}

	.ProfileNameVol13 {
	margin-bottom: 20px !important;
	}

	.ProfileNameVol14 {
	margin-bottom: 20px !important;
	}

	.ProfileNameVol19 {
	margin-bottom: 20px !important;
	}

	.ProfileNameVol21 {
	margin-bottom: 20px !important;
	}

	.ProfileNameVol23 {
	margin-bottom: 20px !important;
	}

	.ProfileInsta {
	font-size: 1.2rem;
	text-align: left;
	line-height: 2em;
    text-align: justify;
    letter-spacing: 0.03em;
    text-justify: inter-ideograph;
	}

	.ProfileInsta a {
	color: #333;
	text-decoration: underline !important;
	}

	.ProfileInsta a:hover {
	color: #999;
	}

}

@media print, screen and (min-width: 768px) {

	#SecProfile {
	min-height: auto !important;
	}

	.UnitProfileIn {
	display: flex;
	max-width: 1000px;
	min-height: 220px;
	text-align: center;
	margin: 11% auto 0 auto;
	}

	.UnitProfileIn .ProfileThumb {
	max-width: 440px;
	}

	.UnitProfileIn .ProfileTxt {
	max-width: 560px;
	display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0;
	}

	.UnitProfile .Logo {
	width: 600px;
	margin: 150px auto 11% auto;
	}

	.UnitProfile .CopyRight {
	margin: 5% auto 4% auto;
	text-align: center;
	color: #999;
	font-size: 1.0rem;
	}

	.ProfileName {
	width: 247px;
	text-align: left;
	padding-left: 120px !important;
	box-sizing: border-box;
	margin-top: 20px !important;
	margin-bottom: 30px !important;
	}

	.ProfileNameTXT {
	font-size: 15px;
	font-weight: bold;
	text-align: left;
	padding-left: 120px !important;
	box-sizing: border-box;
	}

	.ProfileNameTXTB {
	font-size: 15px;
	font-weight: bold;
	text-align: left;
	padding-left: 120px !important;
	box-sizing: border-box;
	margin-top: 60px !important;
	}

	.ProfileNameSVG {
	width: 247px;
	text-align: left;
	padding-left: 120px !important;
	box-sizing: border-box;
	margin-top: 7px !important;
	margin-bottom: 18px !important;
	}

	.ProfileLead {
	font-size: 1.2rem;
	text-align: left;
	padding-left: 120px !important;
	box-sizing: border-box;
	letter-spacing: 0.08em;
	line-height: 1.8em;
    text-align: justify;
    text-justify: inter-ideograph;
	}

	.ProfileInsta {
	font-size: 1.2rem;
	text-align: left;
	padding-left: 120px !important;
	box-sizing: border-box;
	letter-spacing: 0.08em;
	line-height: 2em;
    text-align: justify;
    text-justify: inter-ideograph;
	}

	.ProfileInsta a {
	color: #333;
	text-decoration: underline !important;
	}

	.ProfileInsta a:hover {
	color: #999;
	-webkit-transition: color 0.6s ease 0.01s;
	transition: color 0.6s ease 0.01s;
	}

	.ProfileLead .Kerning{
	letter-spacing: -0.06em !important;
	}

}


/* ■ プロフィール ==================================================================================== */

.ArticlesUnit {
background: #fff;
position: relative;
}

.ArticlesUnit .Mds {
text-align: center;
font-size: 2.0rem;
}

.ArticlesUnit .Bannar img {
width: 100%;
height: auto;
}

@media only screen and (max-width: 767px) {

	.ArticlesUnit {
	padding: 140px 22px 0 22px;
	z-index: 25;
	}

	.ArticlesUnit .Mds {
	margin-bottom: 35px;
	}

	.ArticlesUnit .Bannar img {
	margin-bottom: 100px;
	}

	.ArticlesUnit .BackToTop {
	font-size: 20px;
	margin-top: 50px;
	padding-bottom: 100px;
	text-align: center;
	}

	.ArticlesUnit .BackToTop a {
	text-decoration: underline !important;
	}

}

@media print, screen and (min-width: 768px) {

	.ArticlesUnit {
	padding-top: 290px;
	padding-left: 20px;
	padding-right: 20px;
	}

	.ArticlesUnit .Bannar {
	max-width: 1000px;
	margin: 0 auto;
	}

	.ArticlesUnit .Mds {
	margin-bottom: 45px;
	}

	.ArticlesUnit .Bannar a:link {
	-webkit-transition: opacity 0.3s ease 0.03s;
	transition: opacity 0.3s ease 0.03s;
	}

	.ArticlesUnit .Bannar a:hover {
	opacity: 0.9;
	}

	.ArticlesUnit .Bannar img {
	margin-bottom: 100px;
	}

	.ArticlesUnit .BackToTopPC {
	display: block !important;
	}

	.ArticlesUnit .BackToTop {
	font-size: 20px;
	margin-top: 80px;
	padding-bottom: 250px;
	text-align: center;
	}

	.ArticlesUnit .BackToTop a {
	text-decoration: underline !important;
	}

}


@media print, screen and (min-width: 1025px) {

	.ArticlesUnit {
	padding-left: 0;
	padding-right: 0;
	}

}

/* バックナンバー矢印 --------------------------------------------------- */

.AccoTarget {
display: none;
}

.AccoBtn.Current {
display: none;
}

.BackNumberOtherWrap {
text-align: center;
}

.BackNumberOther {
position: relative;
width: 100%;
margin: 0 auto 0 auto;
text-decoration: none;
font-size: 18px;
text-align: center;
}

.BackNumberOther a {
display: inline-block;
position: relative;
border: 1px solid #F8F8F8;
background: #F8F8F8;
transition: .3s cubic-bezier(0.45, 0, 0.55, 1);
box-sizing: border-box;
}

.BackNumberOther .BgData {
position: relative;
display: inline-block;
}

.BackNumberOther .BgData img {
width: 100%;
}


.BackNumberOther .BackNumberUnit {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
flex-flow: column;
align-items: center;
justify-content: center;
margin: auto;
z-index: 10;
}

.Mds2 {
position: relative;
padding-bottom: 0.5rem;
color: #333333;
}

.Mds2:before {
background: #707070;
content: '';
width: 100%;
height: 1px;
position: absolute;
left: 0;
bottom: 0;
margin: auto;
transform-origin: center top;
transform: scale(0, 1);
transition: transform .3s;
}


.fadeIn_up {
opacity: 0;
transform: translate(0, 20px) scale(1.05, 1.05);
transition: 1s;
transform-origin: top;
}

.fadeIn_up.is-show {
transform: translate(0, 0) scale(1, 1);
opacity: 1;
transform-origin: top;
}

.fadeIn_up2 {
opacity: 0;
transform: translate(0,10px);
-webkit-transform: translate(0,10px);
}

.fadeIn_up2.is-show {
opacity: 1.0 !important;
transform: translate(0,0) !important;
-webkit-transform: translate(0,0) !important;
transition-duration: 2s;
transition-property: opacity, filter, transform;
/* transition: 2s; */
}

@media only screen and (max-width: 767px) {

	.BackNumberOther .Mds1 img {
	width: 90%;
	margin: 0 auto;
	}

	.BackNumberOther .Mds2 {
	margin-top: 1rem;
	font-size: 1.1rem;
	}

	.BackNumberOther a.touched .Mds2:before {
	transform-origin: center top;
	transform: scale(1, 1);
	}

	.BackNumberOther a.touched {
	border: 1px solid #707070;
	box-sizing: border-box;
	background: #fff;
	}

	.BackNumberOther a:active {
	border: 1px solid #707070;
	box-sizing: border-box;
	background: #fff;
	}



}

@media print, screen and (min-width: 768px) {

	.BackNumberOther {
	font-size: 20px;
	}

	.BackNumberOther .Mds2 {
	margin-top: 5rem;
	}


	.BackNumberOther a:hover {
	border: 1px solid #707070;
	box-sizing: border-box;
	background: #fff;
	}

	.BackNumberOther a:hover .Mds2:before {
	transform-origin: center top;
	transform: scale(1, 1);
	}


}


@media print, screen and (min-width: 1025px) {





}


@media (hover: hover) {

	.BackNumberOther a:active {
	border: 1px solid #707070;
	box-sizing: border-box;
	background: #fff;
	}

}


@media (hover: none) {

	.BackNumberOther a:active {
	border: 1px solid #707070;
	box-sizing: border-box;
	background: #fff;
	}

}




/* ■ ClearFix ==================================================================================== */

.LRBox:after {
content: "";
display: block;
clear: both;
}