@charset "UTF-8";

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

	[Style] extra.css
	このフォルダに適用するスタイル

*============================================================*
*/
	*{

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

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

			*{

			}
			
		}




body > main {
	width: 100% !important;
	max-width: 1024px !important;
	margin-bottom: 8rem;
}


	[data-module="tabunit"]{
		margin: 0 auto 4rem auto;
	}


	[role="tabpanel"]{
		padding-right: 0;
		padding-left: 0;
	}
		[role="tabpanel"] > header{
			margin: 0 auto 1.5rem auto;
			text-align: center;
		}
		@media screen and (min-width: 768px) {
			[role="tabpanel"] > header{
				margin: 0 auto 3rem auto;
			}
		}



			[role="tabpanel"] > header h4{
				position: relative;
				z-index: 2;
				
				display: inline-block;

				margin: 0 auto;
				padding: 0 1em;
				background: white;

				text-align: center;
			}
				[role="tabpanel"] > header h4::before{
					content: "";
					
					position: absolute;
					top: calc(50% - 1px);
					right: 100%;
					
					height: 1px;
					width: 1rem;
					border: 1px solid #333333;
				}
				[role="tabpanel"] > header h4::after{
					content: "";
					
					position: absolute;
					top: calc(50% - 1px);
					left: 100%;
					
					height: 1px;
					width: 1rem;
					border: 1px solid #333333;
				}
				@media screen and (min-width: 768px) {
					[role="tabpanel"] > header h4::before{
						width: 5.5rem;
					}
					[role="tabpanel"] > header h4::after{
						content: "";
						
						position: absolute;
						width: 5.5rem;
					}
						
				}


		[role="tablist"]{
			display: flex;
			flex-wrap: wrap;
		}

		[role="tab"]{
			flex: 1 0 auto;
			border: 1px solid #ccc;
			padding: 0.25rem;
			font-size: 0.8em;
			text-align: center;
			color: #999;
			margin: 0.25rem;
		}
		[role="tab"][aria-selected="true"],
		[role="tab"]:hover{
			border: 1px solid #333;
			color: black;
		}
		@media screen and (max-width: 768px) {
			[role="tab"][aria-selected="true"]{
				border: 1px solid #ccc;
				color: #999;
			}
			[role="tab"]:hover{
				border: 1px solid #333;
				color: black;
			}
		}















		[data-layout="cardlist"]{
			width: 100%;
			margin: 0;
			padding: 0;
			
			display: flex;
				justify-content: flex-start;
			flex-wrap: wrap;
		}
			[data-layout="cardlist"] > li{
				flex: 0 0 100%;
			}
			@media screen and (min-width: 480px) {
				[data-layout="cardlist"] > li{
					flex: 0 0 50%;
				}
			}
			@media screen and (min-width: 768px) {
				[data-layout="cardlist"] > li{
					flex: 0 0 33%;
				}
			}


			[data-layout="card"]{
				display: flex;
					flex-direction: column;
				height: auto;
				min-width: 128px;
				max-width: 256px;
				margin: 0 auto;
				padding: 0.25rem;
			}

				[data-layout="card"] > [data-card="name"]{
					order: 2;
					
					display: flex;
						justify-content: center;
						align-items: center;
					
					height: 3.5em;
					
					margin: -2em 1rem 0 1rem;
					background: white;

					text-align: center;
					line-height: 1;
					
					font-weight: 400;
					font-size: 0.8em;
				}


				[data-layout="card"] > [data-card="photo"]{
					order: 1;
					max-height: 160px;
				}

				[data-layout="card"] > [data-card="description"]{
					order: 3;
					margin: 0 1rem auto 1rem;
					padding: 0 0.5rem 0.5rem 0.5rem;
					
					color: #4B4949;
				}
					[data-layout="card"] > [data-card="description"] > p{
						color: #4B4949;
						font-size: 0.75em;
						line-height: 1.6;
						text-align: left;
						text-indent: 0.5em;
					}



				[data-layout="card"] > [data-card="button"]{
					order: 4;
					margin: auto 1rem 0.5rem 1rem;
					padding: 0 0.5rem;
					height: 2.5em;
				}

					[data-layout="card"] > [data-card="button"] > a{
						position: relative;
						
						display: flex;
							justify-content: center;
							align-items: center;
						height: 100%;
						width: 100%;
						padding: 0 2em 0 0.5em;
						
						background: #00A57F;
						
						color: white;
						font-size: 0.75em;
						line-height: 1;
						text-align: center;
						text-decoration: none;
					}
					[data-layout="card"] > [data-card="button"] > a:hover{
						transform: scale(1.02);
			
						box-shadow: 0 0 8px rgba(0,128,98,0.33);
			
						color: white;
						text-decoration: none;
						
					}
					[data-layout="card"] > [data-card="button"] > a:active{
						transform: scale(0.98);
			
						border: 4px solid #00A57F;
						background: white;
						box-shadow: 0 0 4px rgba(0,128,98,0.66);
			
						color: #00A57F;
						text-decoration: none;
						
					}
						[data-layout="card"] > [data-card="button"] > a > i{
						
							position: absolute;
							right: 0.8rem;
							top: calc(50% - 0.5rem);
							
							display: block;
							
							font-size: 1rem;
							line-height: 1;
						}