@charset "Shift_JIS";

.sim_sys__i_a_f_wrap{
	/* display: none; */
	position: sticky;
	top: 34px;		/* 上部ラベルの高さ */
	left: 0;
	width: 100%;
	z-index: 20;
	background-color: #fff;
	background-color: rgba(256, 256, 256, 0.75);
	/* box-shadow: 0 0 8px rgba(0, 0, 0, 0.8); */
	box-shadow: 2px 2px 6px rgba(0,0,0,0.8);
	margin-bottom: 10px;
/*	margin-top: 4px;	*/
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
	transition-property: background-color;
	-webkit-transition-property: background-color;
	-moz-transition-property: background-color;
	-o-transition-property: background-color;
	-ms-transition-property: background-color;
	transition-duration: 0.2s;
	-webkit-transition-duration: 0.2s;
	-moz-transition-duration: 0.2s;
	-o-transition-duration: 0.2s;
	-ms-transition-duration: 0.2s;
	transition-timing-function: linear;
	-webkit-transition-timing-function: linear;
	-moz-transition-timing-function: linear;
	-o-transition-timing-function: linear;
	-ms-transition-timing-function: linear;
}
.sim_sys__i_a_f_wrap.sim_sys__filteroff_mode[data-simulationwindow="max"]{
	backdrop-filter: none;
	background-color: rgba(256, 256, 256, 1);
}
.sim_sys__i_a_f_wrap .sim_sys__i_a_f_relative{
	height: 100%;
	margin: 0;
	position: relative;
	overflow: hidden;
	display: grid;
	place-items: center;
}
.sim_sys__i_a_f_wrap .sim_sys__i_a_f_contents{
/*	width: 100%;
	height: 100%;	*/
	display: grid;
	place-items: center;
	user-select: none;
	grid-area: 1/1/2/2;
	transform: scale(1);
}
.sim_sys__i_a_f_wrap .sim_sys__i_a_f_contents *{
	grid-area: 1/1/2/2;
}
.sim_sys__i_a_f_wrap .sim_sys__i_a_f_contents img{
	height: 300px;
	width: auto;
}
.sim_sys__i_a_f_wrap .sim_sys__i_a_f_loading {
	grid-area: 1/1/2/2;
}
.sim_sys__i_a_f_wrap .sim_sys__i_a_f_loading ~ .sim_sys__i_a_f_contents img {
	filter: grayscale(100%) contrast(50%) blur(2px);
	-webkit-filter: grayscale(100%) contrast(50%) blur(2px);
	-moz-filter: grayscale(100%) contrast(50%) blur(2px);
}

/* ボタン */
.sim_sys__i_a_f_wrap .sim_sys__i_a_f_oBt{
	background-color: rgba(11, 34, 101, 0.5);
	border-radius: 5px;
	box-shadow: 1px 1px 2px #000;
	color: #fff;
	cursor: pointer;
	font-weight: bold;
	line-height: 2em;
	position: absolute;
	text-align: center;
	width: 35px;
	height: 35px;
	z-index: 500!important;
	opacity: 0.6;
	-moz-transition: opacity 0.2s linear;
	-ms-transition: opacity 0.2s linear;
	-o-transition: opacity 0.2s linear;
	-webkit-transition: opacity 0.2s linear;
	transition: opacity 0.2s linear;
/*	background-image: url(icon.svg?20200404);
	background-repeat: no-repeat;	*/
	text-decoration: none;
	user-select: none;
	display:grid;
	place-items: center;
}
.sim_sys__i_a_f_wrap .sim_sys__i_a_f_relative:hover .sim_sys__i_a_f_oBt{
	opacity: 1;
}
.sim_sys__i_a_f_wrap .sim_sys__i_a_f_oBt:hover{
	background-color: rgb(255 174 76);
}

.sim_sys__i_a_f_wrap .sim_sys__i_a_f_oBt.sim_sys__i_a_f_oBt_min {
	background-image: none;
	top: 10px;
	right: 10px;
	display: grid;
	place-items: center;
}
.sim_sys__i_a_f_wrap .sim_sys__i_a_f_oBt.sim_sys__i_a_f_oBt_min::before {
	content: "";
	display: block;
	height: 13px;
	width: 20px;
	border: 5px solid #fff;
	border-width: 0 0 5px 0;
}
.sim_sys__i_a_f_wrap .sim_sys__i_a_f_oBt.sim_sys__i_a_f_oBt_scaling {
	top: 55px;
	right: 10px;
}
.sim_sys__i_a_f_wrap .sim_sys__i_a_f_oBt.sim_sys__i_a_f_oBt_scaling::before {
	content: "\f424";
	font-family: 'Font Awesome 5 Free';
	font-size: 22px;
	display: block;
}
.sim_sys__i_a_f_wrap .sim_sys__i_a_f_oBt.sim_sys__i_a_f_oBt_list {
	background-image: none;
	top: 100px;
	right: 10px;
	display: grid;
	place-items: center;
}
.sim_sys__i_a_f_wrap .sim_sys__i_a_f_oBt.sim_sys__i_a_f_oBt_list::before {
	content: "\f0ca";
	font-family: 'Font Awesome 5 Free';
	display: block;
	width: 20px;
	font-size: 23px;
}
.sim_sys__i_a_f_wrap .sim_sys__i_a_f_oBt.sim_sys__i_a_f_oBt_dark {
	background-image: none;
	top: 100px;
	right: 10px;
	display: grid;
	place-items: center;
}
.sim_sys__i_a_f_wrap .sim_sys__i_a_f_oBt.sim_sys__i_a_f_oBt_dark::before {
	content: "\f186";
	font-family: 'Font Awesome 5 Free';
	font-size: 22px;
}
.sim_sys__i_a_f_wrap .sim_sys__i_a_f_oBt.sim_sys__i_a_f_oBt_inspiration {
	width: auto;
	bottom: 10px;
	left: 10px;
	background-image: none;
	height: auto;
	padding: 5px;
	background-color: #f00;
	background-color: rgba(255,0,0,0.6);
}
.sim_sys__i_a_f_wrap .sim_sys__i_a_f_oBt.sim_sys__i_a_f_oBt_inspiration:hover {
	background: rgb(255 174 76);
}
.sim_sys__i_a_f_wrap .sim_sys__i_a_f_info{
	position: absolute;
	right: 10px;
	bottom: 45px;
	z-index: 500!important;
	display: grid;
	place-items: center end;
	gap: 2px;
}
.sim_sys__i_a_f_wrap .sim_sys__i_a_f_info > *{
	background-color: rgba(255,255,255,0.5);
	font-size: 0.9em;
	padding: 0 5px;
}
.sim_sys__i_a_f_wrap .sim_sys__i_a_f_oBt_filter{
	display: none;
}
.sim_sys__i_a_f_wrap[data-simulationwindow="max"] .sim_sys__i_a_f_oBt_filter{
	position: absolute;
	left: 20px;
	top: 20px;
	display: grid;
	grid-template-columns: auto 1fr;
	place-items: center;
	font-size: 12px;
	height: 25px;
	padding: 0 5px;
	gap: 5px;
	cursor: pointer;
	z-index: 1;
	background-color: white;
}
.sim_sys__i_a_f_wrap[data-simulationwindow="max"] .sim_sys__i_a_f_oBt_filter::before{
	display: block;
	grid-area: 1/1/2/2;
	content: "";
	width: 15px;
	height: 15px;
	border: 1px solid #ccc;
}
.sim_sys__i_a_f_wrap.sim_sys__filteroff_mode[data-simulationwindow="max"] .sim_sys__i_a_f_oBt_filter::after{
	content: "";
	grid-area: 1/1/2/2;
	width: 12px;
	height: 5px;
	transform: rotate(-45deg) translate(3px,-2px);
	border-style: solid;
	border-width: 0 0 3px 3px;
	border-color: #333;
}

/* 初期選択に戻す */

.sim_sys__i_a_f_wrap .sim_sys__i_a_f_oBt_reset{
	display: none;
}
.sim_sys__i_a_f_wrap[data-simulationwindow="max"] .sim_sys__i_a_f_oBt_reset{
	position: absolute;
	right: 95px;
	bottom: 10px;
	z-index: 500!important;
	display: grid;
	place-items: center;
	gap: 2px;
	background-color: white;
	cursor: pointer;
	font-size: 12px;
	padding: 0 5px;
	color: var(--main-link-color);
	grid-template-columns: auto 1fr;
	text-decoration: underline;
	height: 30px;
}
.sim_sys__i_a_f_wrap[data-simulationwindow="max"] .sim_sys__i_a_f_oBt_reset:hover{
	color: var(--main-link-hovercolor);
}

/* ダークモード */
.sim_sys__i_a_f_wrap.sim_sys__dark_mode {
	background-color: #333;
	background-color: rgba(0,0,0,0.8);
}
.sim_sys__i_a_f_wrap.sim_sys__dark_mode.sim_sys__filteroff_mode[data-simulationwindow="max"]{
	background-color: rgb(32 33 36);
}
.sim_sys__i_a_f_wrap.sim_sys__dark_mode .sim_sys__i_a_f_oBt{
	background-color:white;
	color: rgba(11, 34, 101, 0.8);
	opacity: 1;
}
.sim_sys__i_a_f_wrap.sim_sys__dark_mode .sim_sys__i_a_f_oBt:hover{
	background-color: steelblue;
	color: white;
}

.sim_sys__i_a_f_wrap.sim_sys__dark_mode .sim_sys__i_a_f_oBt.sim_sys__i_a_f_oBt_dark::before {
	content: "\f0eb";
}
.sim_sys__i_a_f_wrap.sim_sys__dark_mode .sim_sys__i_a_f_oBt.sim_sys__i_a_f_oBt_min::before {
	content: "";
	display: block;
	width: 20px;
	border-color: rgba(11, 34, 101, 0.8);
}
.sim_sys__i_a_f_wrap.sim_sys__dark_mode .sim_sys__i_a_f_oBt.sim_sys__i_a_f_oBt_min:hover::before {
	border-color: white;
}
.sim_sys__i_a_f_wrap[data-simulationWindow="min"].sim_sys__dark_mode .sim_sys__i_a_f_oBt.sim_sys__i_a_f_oBt_min::before{
	border-color: rgba(11, 34, 101, 0.8);
}
.sim_sys__i_a_f_wrap[data-simulationWindow="max"].sim_sys__dark_mode .sim_sys__i_a_f_oBt.sim_sys__i_a_f_oBt_scaling::before{
	color: white;
}
.sim_sys__i_a_f_wrap.sim_sys__dark_mode .sim_sys__i_a_f_info > *{
	color: rgba(11, 34, 101, 0.8);
}
.sim_sys__i_a_f_wrap .sim_sys__i_a_f_price{
	position: absolute;
	right: 10px;
	bottom: 10px;
	z-index: 500!important;
	background-color: white;
	font-size: 1.2em;
	font-weight: bold;
	color: red;
	display: grid;
	height: 30px;
	place-items: center;
	padding: 0 5px;
	border: 2px solid red;
}


/* ローディング */
.sim_sys__i_a_f_loading {
	width: 100%;
	height: 250px;
	display: grid;
	place-items: center;
	color: white;
	font-weight: bold;
	font-size: 30px;
	z-index: 3;
	overflow: hidden;
}
.sim_sys__i_a_f_loading::before {
	content: attr(data-loading);
	grid-area: 1/1/2/2;
	text-shadow: 1px 1px 5px cyan, -1px 1px 5px cyan, 1px -1px 5px cyan, -1px -1px 5px cyan;
}
.sim_sys__i_a_f_loading::after {
	content: attr(data-loading);
	grid-area: 1/1/2/2;
	text-shadow: 1px 1px 10px lightcyan, -1px 1px 10px lightcyan, 1px -1px 10px lightcyan, -1px -1px 10px lightcyan;
	animation: sim_sys__i_a_f_loading_animation 2.5s ease 0s infinite normal none running;
}
@keyframes sim_sys__i_a_f_loading_animation{
	0% {
		transform: scale(1);
		opacity: 1;
	}
	100% {
		transform: scale(2);
		opacity: 0;
	}
}

/* 最小化状態 */
.sim_sys__i_a_f_wrap[data-simulationWindow="min"]{
	width: 120px;
	position: fixed;
	left: 10px;
	top: auto;
	bottom: 55px;
}
.sim_sys__i_a_f_wrap[data-simulationWindow="min"] .sim_sys__i_a_f_info:not(.sim_sys__i_a_f_oBt_min),
.sim_sys__i_a_f_wrap[data-simulationWindow="min"] .sim_sys__i_a_f_oBt:not(.sim_sys__i_a_f_oBt_min),
.sim_sys__i_a_f_wrap[data-simulationWindow="min"] .sim_sys__i_a_f_price:not(.sim_sys__i_a_f_oBt_min){
	display: none;
}
.sim_sys__i_a_f_wrap[data-simulationWindow="min"] .sim_sys__i_a_f_oBt.sim_sys__i_a_f_oBt_min::before {
	width: 15px;
	height: 15px;
	border: 3px solid #fff;
}
.sim_sys__i_a_f_wrap[data-simulationwindow="min"] .sim_sys__i_a_f_contents img {
	height: auto;
}
/* 最大化状態 */
.sim_sys__i_a_f_wrap[data-simulationWindow="max"]{
	position: fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	z-index: 601;
	margin: 0;
}
.sim_sys__i_a_f_wrap[data-simulationWindow="max"] .sim_sys__i_a_f_contents img{
	height: auto;
}

.sim_sys__i_a_f_wrap[data-simulationWindow="max"] .sim_sys__i_a_f_oBt:not(.sim_sys__i_a_f_oBt_scaling) {
	display: none;
}
.sim_sys__i_a_f_wrap[data-simulationWindow="max"] .sim_sys__i_a_f_oBt.sim_sys__i_a_f_oBt_scaling {
	background: none;
	box-shadow: none;
	width: 50px;
	height: 50px;
	display: grid;
	place-items: center;
	right: 20px;
	top: 20px;
}
.sim_sys__i_a_f_wrap[data-simulationWindow="max"] .sim_sys__i_a_f_oBt.sim_sys__i_a_f_oBt_scaling::before {
	content: "×";
	color: black;
	font-size: 50px;
}

@media screen and (max-width: 768px){
	.sim_sys__i_a_f_wrap{
		top: 54px;
	}
}

/* インスピレーション */
.sim_sys__i_a_f_recommended_overlay{
	width: 100%;
	height: 100%;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	position: fixed;
	background-color: rgba(255,255,255,0.5);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
	z-index: 150;
	cursor: pointer;
	z-index: 601;
	display: grid;
	place-items: center;
}
.sim_sys__i_a_f_recommended_overlay .sim_sys__i_a_f_recommended_wrap{
	grid-area: 1/1/2/2;
	display: grid;
	place-items: center;
	width: 95%;
	max-width: 800px;
	max-height: 90%;
	background-color: rgba(0,0,0,0.8);
	z-index: 601;
	border: 2px solid black;
	box-shadow: 1px 1px 2px black;
	color: white;
	overflow-y: auto;
	padding: 20px 0;
	gap: 20px;
	cursor: initial;
}
.sim_sys__i_a_f_recommended_overlay .sim_sys__i_a_f_recommended_close {
	grid-area: 1/1/2/2;
	z-index: 1;
	display: grid;
	place-items: center;
	transform: translateY(-10px);
	margin: 0 10px 0 auto;
	width: 35px;
	height: 35px;
	border: 1px solid white;
	background: none;
	cursor:pointer;
}
.sim_sys__i_a_f_recommended_overlay .sim_sys__i_a_f_recommended_close::before,
.sim_sys__i_a_f_recommended_overlay .sim_sys__i_a_f_recommended_close::after {
	content: "";
	grid-area:1/1/2/2;
	width: 25px;
	height: 5px;
	background-color: white;
	display: block;
}
.sim_sys__i_a_f_recommended_overlay .sim_sys__i_a_f_recommended_close::before {
	transform: rotate(45deg);
}
.sim_sys__i_a_f_recommended_overlay .sim_sys__i_a_f_recommended_close::after {
	transform: rotate(-45deg);
}
.sim_sys__i_a_f_recommended_overlay .sim_sys__i_a_f_recommended_close:hover{
	border-color: rgb(255 174 76);
}
.sim_sys__i_a_f_recommended_overlay .sim_sys__i_a_f_recommended_close:hover::before,
.sim_sys__i_a_f_recommended_overlay .sim_sys__i_a_f_recommended_close:hover::after {
	background-color: rgb(255 174 76);
}
.sim_sys__i_a_f_recommended_overlay .sim_sys__i_a_f_recommended_title {
	grid-area: 1/1/2/2;
	font-size: 30px;
	line-height: 40px;
	font-weight: bold;
	text-align: center;
	text-shadow: 1px 1px 0px black, -1px 1px 0px black, 1px -1px 0px black, -1px -1px 0px black, 1px 0px 0px black, 0px 1px 0px black, -1px 0px 0px black, 0px -1px 0px black;
}
.sim_sys__i_a_f_recommended_overlay .sim_sys__i_a_f_recommended_content {
	grid-area: 2/1/3/2;
	width: 100%;
}
.sim_sys__i_a_f_recommended_overlay .sim_sys__i_a_f_recommended_about{
	text-align: center;
}
.sim_sys__i_a_f_recommended_overlay .sim_sys__i_a_f_recommended_list {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 5px;
	padding: 10px;
}
.sim_sys__i_a_f_recommended_overlay .sim_sys__i_a_f_recommended_list a {
	display: grid;
	grid-template-rows: 1fr 40px;
	place-items: center;
	border: 2px solid gray;
	padding: 3px;
	background-color: white;
	text-align: center;
	font-weight: bold;
}
.sim_sys__i_a_f_recommended_overlay .sim_sys__i_a_f_recommended_list img {
	transform: scale(1)!important;
}
.sim_sys__i_a_f_recommended_overlay .sim_sys__i_a_f_recommended_list span {
	display: block;
}
.sim_sys__i_a_f_recommended_overlay .sim_sys__i_a_f_recommended_notfound {
	display: grid;
	place-items: center;
	width: 100%;
	height: 250px;
}


@media screen and (max-width: 960px){
	.sim_sys__i_a_f_wrap .sim_sys__i_a_f_oBt {
		opacity:1;
	}
}
@media screen and (max-width: 768px){
	.sim_sys__i_a_f_recommended_overlay .sim_sys__i_a_f_recommended_list {
		grid-template-columns: repeat(auto-fit, minmax(105px, auto));
	}
	.sim_sys__i_a_f_wrap .sim_sys__i_a_f_contents img{
		height: 220px;
		width: auto;
	}

}
@media (prefers-color-scheme: dark){
  /* ダークモードの時 */
  .sim_sys__i_a_f_wrap{
    --isSimulationDarkmode: True;
  }
}