﻿

/* モーダルCSSのテンプレート */
/*
#WpModalWindowのコンストラクタで指定した識別子(identifier)__bg_filter{
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 501;
	background-color: rgba(0.5, 0.5, 0.5, 0.7);
}

#WpModalWindowのコンストラクタで指定した識別子(identifier)__wrapper{
	position: absolute;
	z-index: 502;
	display: none;
}
#WpModalWindowのコンストラクタで指定した識別子(identifier)__wrapper #WpModalWindowのコンストラクタで指定した識別子(identifier)__inner{
	position: fixed;
	width: calc(100% - 20px);
	margin: 0 10px;
	top: calc(50% - 10px);
	left: calc(50% - 10px);
	transform: translate(-50%, -50%);
	max-width: 900px;
	height: 460px;
	background-color: #FFF;
	border-radius: 10px;
	z-index: 503;
}
#WpModalWindowのコンストラクタで指定した識別子(identifier)__wrapper #WpModalWindowのコンストラクタで指定した識別子(identifier)__inner #WpModalWindowのコンストラクタで指定した識別子(identifier)__close_button_block{
	width: calc(100% - 10px);
	margin: 5px;
	text-align: right;
}
#WpModalWindowのコンストラクタで指定した識別子(identifier)__wrapper #WpModalWindowのコンストラクタで指定した識別子(identifier)__inner #WpModalWindowのコンストラクタで指定した識別子(identifier)__close_button_block #WpModalWindowのコンストラクタで指定した識別子(identifier)__close_button{
	cursor: pointer;
}
@media(max-width: 700px) {
	#WpModalWindowのコンストラクタで指定した識別子(identifier)__wrapper #WpModalWindowのコンストラクタで指定した識別子(identifier)__inner{
		height: calc(100vh - 90px);
	}
}
*/


/* 商品紹介モーダル */
#item_modal__bg_filter{
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 501;
	background-color: rgba(0.5, 0.5, 0.5, 0.7);
}

#item_modal__wrapper{
	position: absolute;
	z-index: 502;
	display: none;
}
#item_modal__wrapper #item_modal__inner{
	position: fixed;
    width: 90%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 900px;
	height: 100%;
    max-height: 500px;
    background-color: #FFF;
    z-index: 503;
}
#item_modal__wrapper #item_modal__inner #item_modal__close_button_block{
	width: 100%;
    text-align: right;
}
#item_modal__wrapper #item_modal__inner #item_modal__close_button_block #item_modal__close_button{
	cursor: pointer;
	width: 100%;
    max-width: 27px;
    padding: 20px 20px 0 0;
}
@media(max-width: 900px) {
	#item_modal__wrapper #item_modal__inner{
		height: 82.75vh;
		max-height: unset;
	}
	#item_modal__wrapper #item_modal__inner #item_modal__close_button_block #item_modal__close_button {
		width: 100%;
		padding: 5px;
	}
}

