@charset "utf-8";

/*=====================================================
glasscube 最終更新日：2021.09

トップページ

======================================================*/

#visual div p a:before {
	content: "\0bb";
	display: inline-block;
	transform: scale(0.7, 1);
}


@media screen and (min-width: 768px){

	#visual {
		position: relative;
	}

	#visual div {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		background: rgba(241, 241, 241, 0.8);
		display: flex;
		padding: 1em;
		align-items: center;
		box-sizing: border-box;
	}

	#visual div h2 {
		background: #8d6531;
		color: #fff;
		padding: 0.5em 1em;
		display: inline-block;
		flex-shrink: 1;
		font-size: 100%;
		margin-right: 1.5em;
	}

	#visual div p {
		flex-shrink: 1;
		text-align: right;
	}

	#visual div ul {
		flex-grow: 1;
	}

	#visual div ul li {
		clear: both;
	}

	#visual div ul li span {
		width: 6em;
		display: block;
		float: left;
		margin-top: 4px;
	}

	#visual div ul li strong {
		display: block;
		width: 900px;
		margin-left: 6em;
	}

	#visual div a {
		color: #171717;
		transition: .3s;
	}

	#visual div a:hover {
		color: #8d6531;
	}

}

@media screen and (max-width: 768px){

	#visual img {
		width: 100%;
	}

	#visual div {
		position: relative;
		box-sizing: border-box;
	}

	#visual div h2 {
		background: #8d6531;
		color: #fff;
		padding: 0.5em 1em;
		display: inline-block;
		font-size: 100%;
		position: absolute;
		left: 0.5em;
		top: 50%;
		margin: 0;
		transform: translateY(-100%);
	}

	#visual div p {
		margin: 0;
	}

	#visual div ul {
		margin-left: 7em;
		padding: 0.5em;
	}

	#visual div ul li {
		margin: 0.5em 0;
	}

	#visual div ul li a {
		color: #1b0704;
	}

	#visual div > p > a {
		display: block;
		text-align: center;
		background: #1b0704;
		color: #fff;
		padding: 0.5em 0;
	}

	#visual div ul li a,
	#visual div ul li a {
		position: relative;
	}

	#visual div ul li span,
	#visual div ul li a span {
		float: left;
		display: block;
	}

	#visual div ul li strong,
	#visual div ul li a strong {
		margin-left: 6em;
		display: block;
		font-weight: normal;
	}

}


/* /////////////////////////////////////////////////// 
content
/////////////////////////////////////////////////// */

@media screen and (min-width: 768px){

	.top_list01 {
		overflow: hidden;
		position: relative;
	}

	.top_list01 li {
		position: relative;
	}

	.top_list01 li figure {
		float: left;
		position: relative;
		border: 1px solid #ccc;
		background: #fff;
		overflow: hidden;
		width: 300px;
		height: 300px;
		box-sizing: border-box;
	}

	.top_list01 li figure img {
		transform: translateX(-50%) translateY(-50%);
		left: 50%;
		top: 50%;
		position: absolute;
		max-width: 298px;
		max-height: 298px;
		transition: .3s;
	}

	.top_list01 li figure figcaption {
		background: rgba(213, 120, 0, 0.8);
		color: #fff;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 2;
		line-height: 0.9;
		padding: 0.5em 0.75em;
	}

	.top_list01 li figure figcaption strong {
		font-size: 250%;
	}

	.top_list01 li figure figcaption span {
		font-weight: bold;
		font-size: 115%;
	}

	.top_list01 li > span {
		margin-left: 320px;
		display: block;
	}

	.top_list01 li span strong {
		font-weight: normal;
		background: url(../image/top/top_icon01.png) top left no-repeat;
		background-size: 1em;
		padding: 0 0 0.5em 1em;
		border-bottom: 1px solid #ccc;
		display: block;
		margin-bottom: 0.5em;
	}

	.top_list01 li span small {
		display: block;
	}

	.top_list01 li span a {
		color: #fff;
		font-weight: bold;
		border: 2px solid #dd9333;
		background: #dd9333;
		transition: .3s;
		margin-top: 1.5em;
		display: inline-block;
		padding: 0.5em 2em;
	}

	.top_list01 li span a:hover {
		background: #fff;
		color: #dd9333;
		transition: .3s;
	}

	.top_list01 + p {
		text-align: center;
	}

	.top_list01 + p a {
		color: #fff;
		font-weight: bold;
		border: 2px solid #1b0704;
		background: #1b0704;
		transition: .3s;
		display: inline-block;
		padding: 0.75em 2em;
	}

	.top_list01 + p a:hover {
		background: #fff;
		color: #1b0704;
		transition: .3s;
	}

}

@media screen and (max-width: 768px){

	#top_main {
		margin: 1em;
	}

	.top_list01 {
		overflow: hidden;
		position: relative;
	}

	.top_list01 li {
		position: relative;
	}

	.top_list01 li figure {
		float: left;
		position: relative;
		border: 1px solid #ccc;
		background: #fff;
		overflow: hidden;
		width: 150px;
		height: 150px;
		box-sizing: border-box;
	}

	.top_list01 li figure img {
		transform: translateX(-50%) translateY(-50%);
		left: 50%;
		top: 50%;
		position: absolute;
		max-width: 148px;
		max-height: 148px;
		transition: .3s;
	}

	.top_list01 li figure figcaption {
		background: rgba(213, 120, 0, 0.8);
		color: #fff;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 2;
		line-height: 0.9;
		padding: 0.5em 0.75em;
	}

	.top_list01 li figure figcaption strong {
		font-size: 170%;
	}

	.top_list01 li figure figcaption span {
		font-weight: bold;
	}

	.top_list01 li > span {
		margin-left: 160px;
		display: block;
	}

	.top_list01 li span strong {
		font-weight: normal;
		background: url(../image/top/top_icon01.png) top left no-repeat;
		background-size: 1em;
		padding: 0 0 0.5em 1em;
		border-bottom: 1px solid #ccc;
		display: block;
		margin-bottom: 0.5em;
	}

	.top_list01 li span small {
		display: block;
	}

	.top_list01 li span a {
		color: #fff;
		font-weight: bold;
		border: 2px solid #dd9333;
		background: #dd9333;
		transition: .3s;
		margin-top: 1.5em;
		display: inline-block;
		padding: 0.5em 2em;
	}

	.top_list01 li span a:hover {
		background: #fff;
		color: #dd9333;
		transition: .3s;
	}

	.top_list01 + p {
		text-align: center;
	}

	.top_list01 + p a {
		color: #fff;
		font-weight: bold;
		border: 2px solid #1b0704;
		background: #1b0704;
		transition: .3s;
		display: inline-block;
		padding: 0.75em 2em;
	}

	.top_list01 + p a:hover {
		background: #fff;
		color: #1b0704;
		transition: .3s;
	}

}