/* EVENT-NAGANO original CSS v7 */

/* オリジナルカラー
**************************************/
.en-bg-orange{
	background-color:#ffcf6e !important;
}

.en-bg-orange-light{
	background-color:#ffe5b0 !important;
}

.en-bg-green{
	background-color:rgba(46, 85, 46, 0.8) !important;
}

.en-bg-green-light{
	background-color:rgba(99, 136, 99, 0.8) !important;
}

.en-bg-green-light2{
	background-color:#e2f0e5 !important;
}


.en-bg-pink{
	background-color:#ff86ef !important;
}

.en-bg-pink-light{
	background-color:#ffc7f8 !important;
}


.en-bg-blue{
	background-color:#1e50a2 !important;
}

.en-bg-blue-light{
	background-color:#5c82c0 !important;
}

.en-bg-blue-light2{
	background-color:#92afdf !important;
}

.en-bg-gray{
	background-color:#9e9e9e !important;
}

.en-bg-gray-light{
	background-color:#eee !important;
}

.en-bg-magenta{
	background-color:#993375 !important;
}

.en-bg-magenta-light{
	background-color:#f4ebef !important;
}



/* h1-h6
**************************************/
.en-column-title {
	font-weight:bold;
	border-bottom:1px solid #888;
	border-left:5px solid #888;
	padding-left:0.5rem;
}

/* font-size
**************************************/
.en-fsize-05{
	font-size:0.5rem !important;
}

.en-fsize-08{
	font-size:0.8rem !important;
}

.en-fsize-10{
	font-size:1.0rem !important;
}

.en-fsize-12{
	font-size:1.2rem !important;
}

.en-fsize-15{
	font-size:1.5rem !important;
}

.en-fsize-20{
	font-size:2.0rem !important;
}

/* en-button
**************************************/
.en-btn-green{
	color:#fff;
	background-color:#49a75f;
}
.en-btn-green.focus,.en-btn-green:focus,.en-btn-green:hover{
	color:#fff;
	background-color:#00913b;
}
.btn-check:active+.en-btn-green,.btn-check:checked+.en-btn-green,.en-btn-green.active,.en-btn-green:active,.show>.en-btn-green.dropdown-toggle{
	color:#fff;
	background-color:#005121;
}
.btn-check:active+.en-btn-green:focus,.btn-check:checked+.en-btn-green:focus,.en-btn-green.active:focus,.en-btn-green:active:focus,.show>.en-btn-green.dropdown-toggle:focus{
	box-shadow:0 4px 10px 0 rgba(0,0,0,.2),0 4px 20px 0 rgba(0,0,0,.1);
}
.en-btn-green.disabled,.en-btn-green:disabled{
	color:#fff;
	background-color:#49a75f;
}


/* marker
**************************************/
mark {
	border-radius: 5px;
	padding:0.1rem 0.3rem;
}

.en-mark-red {
	background:linear-gradient(transparent 75%,#ff7f7f 75%);
}

.en-mark-red-light {
	background:linear-gradient(transparent 75%,#ff9393 75%);
}

.en-mark-orange {
	background:linear-gradient(transparent 75%,#ffdc00 75%);
}

.en-mark-orange-light {
	background:linear-gradient(transparent 75%,#fff799 75%);
}

.en-mark-blue {
	background:linear-gradient(transparent 75%,#7fbfff 75%);
}

.en-mark-blue-light {
	background:linear-gradient(transparent 75%,#9eceff 75%);
}

.en-mark-pink {
	background:linear-gradient(transparent 75%,#ff9ece 75%);
}

.en-mark-pink-light {
	background:linear-gradient(transparent 75%,#ffc0cb 75%);
}

.en-mark-green {
	background:linear-gradient(transparent 75%,#7fff7f 75%);
}

.en-mark-green-light {
	background:linear-gradient(transparent 75%,#b2ffb2 75%);
}

/* bold-text
**************************************/
.en-text-red {
	color:#CC0000;
	font-weight:bold;
}

.en-text-grey {
	color:#666666;
	font-weight:bold;
}

/* button
**************************************/
.en-btn-grey{
	color:#fff;
	background-color:#bbbbbb;
}
.en-btn-grey.focus,.en-btn-grey:focus,.en-btn-grey:hover{
	color:#fff;
	background-color:#888888;
}
.btn-check:active+.en-btn-grey,.btn-check:checked+.en-btn-grey,.en-btn-grey.active,.en-btn-grey:active,.show>.en-btn-grey.dropdown-toggle{
	color:#fff;
	background-color:#888888;
}
.btn-check:active+.en-btn-grey:focus,.btn-check:checked+.en-btn-grey:focus,.en-btn-grey.active:focus,.en-btn-grey:active:focus,.show>.en-btn-grey.dropdown-toggle:focus{
	box-shadow:0 4px 10px 0 rgba(0,0,0,.2),0 4px 20px 0 rgba(0,0,0,.1);
}
.en-btn-grey.disabled,.en-btn-grey:disabled{
	color:#fff;
	background-color:#555555;
}

/* link
**************************************/
a.en-outlink{
	background: url(https://www.mwt.jp/material/icon/icooon-g-outlink.svg) no-repeat right top;
    padding-right: 1.5rem;
	margin:0 .25rem;
}

/* list
**************************************/
.en-list-none{
	margin-bottom:0.5rem;
	list-style:none;
}

ul.en-list-inside li{
	list-style-position:inside;
}

ul.en-list-museum li{
	list-style-position:inside;
	margin-bottom:0.5rem;

}


/* alphabetアイコン
**************************************/
.en-alphabet{
	width:1.2rem;
	margin-right:0.1rem;
}

/* headerアイコン
**************************************/
.nav-link img{
	flex:20%;
	width:20px;
	height:20px;
	margin-right:0.25rem;
	margin-top:-0.2rem;

}

.navbar-toggler span {
	display:block;
	height:3px;
	background-color:#fff;
	margin-bottom:4px;
	border-radius:1px;
	transition:all .4s ease-out;
	width:20px;
	margin-right:auto;
	margin-left:auto;
}

.navbar-toggler span.bar-top {
	margin-top:2px;
}

.navbar-toggler p{
	margin:0;
	padding-top:4px;
	font-size:0.5rem;
	font-weight:bold;
	color:#fff;
	transform:scale(.9) translate3D(0,0,0);
	position:relative;
	top:-2px;
}

.nav-item i{
    margin-right:0.25rem;
}



/* card表示
**************************************/
.card-header h3{
	margin-bottom:0;
	padding-bottom:0;
}

.card-text p , .card-text ul li{
	font-size:0.8rem;
}

.en-card-photo-start , .en-card-photo-end , .en-card-photo-top {
	width:100%;
	float:both;
	margin-bottom:0.5rem;
}

.en-card-photo-small {
	width:40%;
	float:both;
}

@media(min-width:576px){
	.card-text p, .card-text ul li{
		font-size:0.8rem;
	}
	.en-card-photo-start , .en-card-photo-end , .en-card-photo-top , .en-card-photo-small {
		width:100%;
		float:both;
	}
}

@media(min-width:768px){
	.card-text p, .card-text ul li{
		font-size:0.8rem;
	}
	.en-card-photo-start , .en-card-photo-top {
		width:50%;
		float:left;
		margin-right:0.5rem;
	}
	.en-card-photo-end {
		width:50%;
		float:right;
		margin-left:0.5rem;
	}
	.en-card-photo-small {
		width:50%;
		float:left;
		margin-right:0.5rem;
	}

}

@media(min-width:992px){
	.card-text p, .card-text ul li{
		font-size:0.9rem;
	}
	.en-card-photo-start {
		width:100%;
		float:both;
	}
	.en-card-photo-end {
		width:100%;
		float:both;
	}
	.en-card-photo-top {
		width:50%;
		float:left;
		margin-right:0.5rem;
	}
	.en-card-photo-small {
		width:100%;
		float:both;
	}
}

@media(min-width:1200px){
	.card-text p, .card-text ul li{
		font-size:1rem;
	}
	.en-card-photo-start {
		width:50%;
		float:left;
		margin-right:0.5rem;
	}
	.en-card-photo-end {
		width:50%;
		float:right;
		margin-left:0.5rem;
	}
	.en-card-photo-top {
		width:25%;
		float:left;
		margin-right:0.5rem;
	}
	.en-card-photo-small {
		width:50%;
		float:left;
		margin-right:0.5rem;
	}
}

@media(min-width:1400px){
	.card-text p, .card-text ul li{
		font-size:1rem;
	}
	.en-card-photo-start {
		width:50%;
		float:left;
		margin-right:0.5rem;
	}
	.en-card-photo-end {
		width:50%;
		float:both;
		margin-left:0.5rem;
	}
	.en-card-photo-top {
		width:25%;
		float:left;
		margin-right:1rem;
	}
	.en-card-photo-small {
		width:30%;
		float:left;
		margin-right:0.5rem;
	}
}

.en-card-green .card-header {
	background:rgba(46, 85, 46, 0.8);
	color:#fff;
} 

.en-card-blue .card-header {
	background:#1e50a2;
	color:#fff;
} 

.en-card-orange .card-header {
	background:#ffb116;
	color:#333;
} 

.en-card-orange-light .card-header {
	background:#f8d184;
	color:#333;
} 

.en-card-grey .card-header {
	background:#9e9e9e;
	color:#fff;
} 


/* youtube表示設定(en-youtube)
   ここを変更する時は/lite-youtube-embed/src/lite-yt-embed.cssも変更すること
**************************************/

.en-youtube {
	width: 100%;
	margin-bottom:1rem;
	aspect-ratio: 16 / 9;
}

.en-youtube-h {
	width: 100%;
	aspect-ratio: 6 / 7;
}

.en-youtube-h2 {
	width: 100%;
	aspect-ratio: 6 / 9;
}

.en-youtube-shorts {
	width: 100%;
	aspect-ratio: 9 / 16;
}

.en-youtube iframe , .en-youtube-h iframe , .en-youtube-h2 iframe , .en-youtube-shorts iframe {
	width: 100%;
	height: 100%;
}

/* ribbon表示設定(en-ribbon)
   元データはhttps://css-generators.com/ribbon-shapes/
**************************************/

/* HTML: <div class="ribbon">Your text content</div> */
.en-ribbon-box{
	position:relative;
}

.en-ribbon {
	font-size: 1rem;
	font-weight: bold;
	color: #fff;
}

.en-ribbon {
	--f: .5em; /* control the folded part */
	
	position: absolute;
	top: 0;
	right: 0;
	line-height: 1.8;
	padding-inline: 1lh;
	padding-bottom: var(--f);
	border-image: conic-gradient(#0008 0 0) 51%/var(--f);
	clip-path: polygon(
	  100% calc(100% - var(--f)),100% 100%,calc(100% - var(--f)) calc(100% - var(--f)),var(--f) calc(100% - var(--f)), 0 100%,0 calc(100% - var(--f)),999px calc(100% - var(--f) - 999px),calc(100% - 999px) calc(100% - var(--f) - 999px));
	transform: translate(calc((1 - cos(45deg))*100%), -100%) rotate(45deg);
	transform-origin: 0% 100%;
}

.en-ribbon-new{
	background-color: #BD1550; /* the main color  */
}

.en-ribbon-up{
	background-color: #F07818; /* the main color  */
}

.en-ribbon-movie{
/*
	font-size: 1rem;
	font-weight: bold;
	color: #fff;

	--f: .5em;
	
	position: absolute;
	top: 0;
	right: 0;
	line-height: 1.8;
	padding-inline: 1lh;
	padding-bottom: var(--f);
	border-image: conic-gradient(#0008 0 0) 51%/var(--f);
	clip-path: polygon(
	  100% calc(100% - var(--f)),100% 100%,calc(100% - var(--f)) calc(100% - var(--f)),var(--f) calc(100% - var(--f)), 0 100%,0 calc(100% - var(--f)),999px calc(100% - var(--f) - 999px),calc(100% - 999px) calc(100% - var(--f) - 999px));

    transform: translate(calc((cos(45deg) - 1)*100%), -100%) rotate(-45deg);
	transform-origin: 40% 480%;
	background-color: #F07818;
*/
/* HTML: <div class="ribbon">Your text content</div> */
	font-size: 28px;
	font-weight: bold;
	color: #fff;

	--f: .5em; /* control the folded part */
	
	position: absolute;
	top: 0;
	left: 0;
	line-height: 1.8;
	padding-inline: 1lh;
	padding-bottom: var(--f);
	border-image: conic-gradient(#0008 0 0) 51%/var(--f);
	clip-path: polygon(
	  100% calc(100% - var(--f)),100% 100%,calc(100% - var(--f)) calc(100% - var(--f)),var(--f) calc(100% - var(--f)), 0 100%,0 calc(100% - var(--f)),999px calc(100% - var(--f) - 999px),calc(100% - 999px) calc(100% - var(--f) - 999px));
	transform: translate(calc((cos(45deg) - 1)*100%), -100%) rotate(-45deg);
	transform-origin: 100% 100%;
	background-color: #F07818; /* the main color  */

}

.en-video-next {

	position: absolute;
	top: 1.5rem;
	right: 1.5rem;
	line-height: 1.8;
	padding-inline: .5lh;
	background-color:#BBBBBB;
	color:#FFFFFF;
}