@charset "utf-8";


.modaal-container{
     position:relative;
     display:inline-block;
     width:100%;
     margin:auto;
     text-align:right;
     color:#000;
     max-width:1000px;
     border-radius:0;
     background:#fff;
     box-shadow:0 4px 15px rgba(0,0,0,.2);
     cursor:auto
 }

.modal-window{
    display: none;
    //padding: 0;
    background-color: #000000;
}
.modal_img{
    width: 100%;
}
.modal_copyright{
  display: block;
  position: absolute;
  right: 0;
  bottom: 0;
  color: #fff;
  background-color: rgb(0 0 0 / 50%);
  font-size: 0.8rem;
  margin: 0;
  padding: 0px 0.4rem !important;
}

/*全て共通：hideエリアをはじめは非表示*/
.hide-area{
	display: none;
}

/*全て共通：モーダルのボタンの色を変更したい場合*/
.modaal-close:after, 
.modaal-close:before{
	background:#ccc;	
}

.modaal-close:focus:after,
.modaal-close:focus:before,
.modaal-close:hover:after,
.modaal-close:hover:before{
	background:#666;
}

/*確認を促すモーダル：タイトルの色を変更したい場合*/
#modaal-title{
	font-size:1.2rem;
	text-align: center;
	margin: 0 0 20px 0;
}

/*動画表示のモーダル：余白を変更したい場合*/
.modaal-video .modaal-inner-wrapper{
	padding:0;
}

/*以下はコンテンツ内のレイアウト*/
.info-list dl,
.gallery-list{
	display: flex;
}

.info-list dt{
	margin:0 10px 0 0;
}

.gallery-list li{
	margin:0 10px 0 0;
}



/*========= レイアウトのためのCSS ===============*/
/*
header{
	background: #333;
}

header h1{
	font-size:1.5rem;
	text-align: center;
	text-transform: uppercase;
	padding: 20px;
	color: #fff;
}

h2{
	font-size:1.2rem;
	text-align: center;
	margin: 0 0 30px 0;
}

ul{
	list-style: none;
}

p,ul{
	margin-top:20px;	
}

a{
	color:#333;
}

small{
	background:#333;
	color:#fff;
	display: block;
	text-align: center;
	padding:20px;
}


section{
	padding:30px;
}

section:nth-child(2n){
	background:#f3f3f3;	
}

img{
	max-width: 100%;
	height: auto;
}
*/