@charset 'utf-8';

body    {
		animation: fadeIn 2s ease 0s 1 normal;
		-webkit-animation: fadeIn 2s ease 0s 1 normal;
	}
		@keyframes fadeIn {
			0% {opacity: 0}
			100% {opacity: 1}
		}
		@-webkit-keyframes fadeIn {
			0% {opacity: 0}
			100% {opacity: 1}
		}
	.wrapper.style .box {
		background-color: #fff;
		padding: 3em 2.5em;
	}
	.box {
		border-radius: 4px;
		border: solid 1px rgba(144, 144, 144, 0.25);
		margin-bottom: 2em;
		padding: 1.5em;
	}
	h1 {
		position: relative;
		padding-bottom: .5em;
		border-bottom: 4px solid #ccc;
		font-size: 18pt;
		font-family: 'Josefin Sans', sans-serif;
		font-weight: bold;
		text-align: left;
	}
		h1::after {
			position: absolute;
			bottom: -4px;
			left: 0;
			z-index: 2;
			content: '';
			width: 20%;
			height: 4px;
			background-color: #3498db;
		}
	.box_block {
		width: 100%;
		text-align: center;
	}
	.tab_recent {
		display: table;
		border-collapse: collapse;
		text-align: left;
		margin-right: auto;
		margin-left: auto;
		border-radius:6px;
		-moz-border-radius:6px;
		-webkit-border-radius:6px;
		margin-top: 25px;
	}
	.rowlist_recent {
		display: table-row;
	}
	.rowlist_recent > div {
		display: table-cell;
		margin: 15px;
	}
	.tab_center_recent {
		padding-bottom: 20px !important;
	}
	input.photograph {
		outline: none;
	}
	input.photograph[type=search] {
		border: solid 2px #88929e;
		padding-left: 50px;
		padding-right: 30px;
		width: 530px;
		height: 90px;
		-moz-border-radius: 10em;
		border-radius: 10em;
		-moz-transition: all .5s;
		transition: all .5s;
		color: #000;
		font-family: 'M PLUS 1p', sans-serif;
		font-size: 25px;
		background-color: #fff;
	}
	input.photograph[type=search]:focus {
		box-shadow: 0 0 7px #EF810F;
		border: solid 2px #EF810F;
	}
	input.photograph:-moz-placeholder {
		color: #999;
	}
	input.photograph::-webkit-input.photograph-placeholder {
		color: #999;
	}
	input.photograph[type=reset] {
		position: absolute;
		top: 170px;
		left: 510px;
		right: 0px;
		margin: auto;
		border: solid 5px rgba(255,255,255,0);
		color: #3AABD2;
		font-size: 40px;
		background-color: rgba(255,255,255,0);
	}
	input.photograph[type=reset]:focus {
		color: #DD9296;
		background-color: #fff;
	}
	.tab_right_recent {
		padding-left: 15px;
	}
	/* 操作説明　PC版　ここから */
	.hidden_box1 {
		margin: 2em 0;
		padding-top: 0px;
	}
	.hidden_box1 label {
		font-family: 'Josefin Sans', sans-serif;
		padding: 7px;
		color: #666;
		font-size: 20px;
		font-weight: bold;
		background: #fde7a5;
		border-radius: 5px;
		transition: .5s;
		margin: 0px 0px 0px 20px;
		cursor: pointer;
	}
		.hidden_box1 label::before {
			display: inline-block;
			content: '\f078';
			font-family: 'Font Awesome 5 Free';
			padding-right: 5px;
			transition: 0.2s;
		}
		.hidden_box1 label:hover {
			background: silver;
			background :#ffe9a9;
		}
	.hidden_box1 input:checked ~ label::before {
		content: '\f00d';
		-ms-transform: rotate(360deg);
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
		color: #668ad8;
	}
	.hidden_box1 input {
		display: none;
	}
	.hidden_box1 .hidden_show1 {
		height: 0;
		padding: 0;
		overflow: hidden;
		opacity: 0;
		transition: 0.8s;
	}
	.hidden_box1 input:checked ~ .hidden_show1 {
		padding: 1px 0;
		height: auto;
		opacity: 1;
	}
	p.img1 {
		margin-top: 10px;
		margin-left: 20px;
		padding: 0;
		z-index: 999;
	}
	img#imgs1 {
		border: solid 3px #fde7a5;
	}
	#imgs1 {
		width: 620px;
		height: 331px;
		background-image: url('../img/explanation1.png');
		background-repeat: no-repeat;
		background-size: 620px;
		cursor: pointer;
	}
	/* 操作説明　PC版　ここまで */
	/* 操作説明　スマホ版　ここから */
	.hidden_box2 {
		margin: 0.7em 0;
		padding-top: 0px;
	}
	.hidden_box2 label {
		font-family: 'Josefin Sans', sans-serif;
		padding: 7px;
		color: #666;
		font-size: 12px;
		font-weight: bold;
		background: #fde7a5;
		border-radius: 5px;
		transition: .5s;
		margin: 0px 0px 0px 0px;
	}
		.hidden_box2 label::before {
			display: inline-block;
			content: '\f078';
			font-family: 'Font Awesome 5 Free';
			padding-right: 5px;
			transition: 0.2s;
		}
		.hidden_box2 label:hover {
			background: silver;
			background :#ffe9a9;
		}
	.hidden_box2 input:checked ~ label::before {
		content: '\f00d';
		-ms-transform: rotate(360deg);
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
		color: #668ad8;
	}
	.hidden_box2 input {
		display: none;
	}
	.hidden_box2 .hidden_show2 {
		height: 0;
		padding: 0;
		overflow: hidden;
		opacity: 0;
		transition: 0.8s;
	}
	.hidden_box2 input:checked ~ .hidden_show2 {
		padding: 2px 0;
		height: auto;
		opacity: 2;
	}
	p.img2 {
		margin-top: 20px;
		margin-left: 0px;
		padding: 0;
		z-index: 999;
	}
	img#imgs2 {
		border: solid 3px #fde7a5;
	}
	#imgs2 {
		width: 200px;
		height: 214px;
		background-image: url('../img/explanation2.png');
		background-repeat: no-repeat;
		background-size: 200px;
	}
	/* 操作説明　スマホ版　ここまで */
	.page-top {
		position: fixed;
		bottom: 10px;
		right: 20px;
		font-size: 20px;
		padding-bottom: 120px;
	}
	.page-top a {
		display: block;
		font-family: 'Federo', sans-serif;
		color: #fff;
		font-size: 12px;
		width: 85px;
		height: 85px;
		text-decoration: none;
		text-align: center;
		line-height: 80px;
		border: solid 5px #aaa;
		border-radius: 50%;
		background: #666;
		background-image: url('../svg/page_top.svg');
		background-repeat: no-repeat;
		background-position: center 4px;
		background-size: 20px 20px;
	}
		.page-top a:hover {
			text-decoration: none;
			background: #1dbfec;
			border: solid 5px #aaa;
			opacity: 0.6;
			background-image: url('../svg/page_top.svg');
			background-repeat: no-repeat;
			background-position: center 4px;
			background-size: 20px 20px;
		}