/* CSS Document */

#main{
	background: rgba(var(--color-theme-rgb), 0.25);
	}

#pagePath{
	display: none;
	}

#hero{
	display: grid;
	padding: 0 0 40px 0;
	background: var(--color-theme);
	}
	#hero img{
		justify-self: center;
		max-width: 800px;
		}

#attention{
	grid-gap: clamp(32px, 7.2vw, 48px) 0;
	padding: clamp(56px, 9.6vw, 64px) 0 0;
	}
	#attention h2{
		display: none;
		}
	#attention h2+p{
		font-size: clamp(1.25em, 4vw, 1.5em);
		font-weight: bold;
		text-align: center;
		}
	#attention section{
		padding: 24px;
		background: #fff;
		border-radius: clamp(12px, 2.4vw, 16px);
		filter: drop-shadow(0 0 8px rgba(var(--color-theme-rgb), 0.5));
		}
	@media (min-width: 768px) {
		#attention section{
			padding: 32px;
			}
		}
	@media (min-width: 1200px) {
		#attention{
			padding: 80px 0 0;
			}
		}

:where(#attentionInfo, #attentionEntry){

	}

#attentionInfo{
	position: relative;
	}
	#attentionInfo h3{
		display: none;
		}
	#attentionInfo h3+div{
		position: relative;
		display: grid;
		@media (min-width: 1000px){
			margin-right: 5%;
			}
		}
	#attentionInfo h3+div>div{
		display: flex;
		flex-direction: column;
		gap: 32px;
		}
	#attentionInfo h3~p{
		background: url("../images/attentionPict.svg") center no-repeat;
		font-size: 0;
		aspect-ratio: 1/1;
		@media (max-width: 1000px) {
			aspect-ratio: 1.2 / 1;
			margin: 0 -24px -24px -24px;
			background-color: #d3a100;
			background-size: auto 100%;
			background-position-y: 24px;
			margin-top: 24px;
			}
		@media (min-width: 1000px) {
			width: min(20vw, 300px);
			position: absolute;
			top: -10px;
			right: -10px;
			}
		}

#attentionDate{
	display: flex;
	align-items: end;
	font-weight: bold;
	font-size: 1.8em;
	@media (max-width: 824.98px) {
		flex-direction: column;
		align-items: start;
		}
	}
	#attentionDate b{
		border-radius: 100%;
		color: #fff;
		font-style: normal;
		display: inline-grid;
		justify-content: center;
		font-size: 0.5em;
		width: 1.6em;
		line-height: 1.5em;
		vertical-align: bottom;
		margin: 0 12px;
		padding-bottom: 4px;
		}
		#attentionDate b:nth-of-type(1){
			background: #0073bf;
			}
		#attentionDate b:nth-of-type(2){
			background: #df0042;
			}

		#attentionDate span:nth-of-type(2){
			font-size: clamp(1.5em, 11.5vw, 2.5em);
			line-height: 1em;
			}
		#attentionDate small{
			font-size: 0.7em;
			line-height: 1.1em;
			font-weight: normal;
			display: block;
			}
#attentionDetail{
	display: grid;
	gap: 16px;
	}
	#attentionDetail>div  {
		position: relative;
		counter-reset: dt-counter;
		}
	#attentionDetail h4 {
        display: grid;
        align-items: center;
        min-height: 32px;
		width: 10em;
        padding: 4px;
        border: 2px solid currentColor;
        font-weight: 700;
		font-size: clamp(18px, 3vw, 20px);
        text-align: center;
		margin: 1em 0;
		}
	#attentionDetail dl{
		display: grid;
		grid-gap: 8px;
		align-items: baseline;
		@media (min-width: 1000px) {
			grid-template-columns: 230px 1fr;
			}
		}
		#attentionDetail dl+dl {
			margin-top: 1em;
			}
	#attentionDetail div:first-child dl{
		@media (min-width: 1000px) {
			grid-template-columns: 230px 450px 1fr;
			}
		}
	#attentionDetail dl:not(:has(table)) {
		font-weight: bold;
		position: relative;
		display: grid;
		@media (min-width: 576px) {
			font-size: clamp(18px, 3vw, 20px);
			}
		}
	#attentionDetail dt {
		font-weight: bold;
		font-size: clamp(18px, 3vw, 20px);
		counter-increment: dt-counter;
		padding-left: 3rem;
		}
		#attentionDetail dt::before {
			content: "(" counter(dt-counter) ") ";
			position: absolute;
			left: 0;
			}
	#attentionDetail dd:not(:has(table)) {
		display: grid;
		@media (max-width: 999.98px) {
			padding-left: 3rem;
			}
		}
	#attentionDetail small {
		font-size: 16px!important;
		padding-left: 3rem;
		}
	#attentionDetail .floating {
		display: inline-block;
		margin-top: 16px;
		padding-left: 3rem;
		/*@media(min-width: 1200px){
			position: absolute;
			bottom: 0;
			right: -60px;
			transform: translateY(-100%);
			}*/
		@media(min-width: 576px){
			font-size: clamp(18px, 3vw, 20px);
			}
		}

	.detailTable table {
		border-collapse: collapse;
		width: 100%;
		text-align: center;
		white-space: nowrap;
		}
	.detailTable div:has(table) small {
		padding: 0!important;
		}
		.detailTable th,
		.detailTable td {
			border: 1px solid #ccc;
			padding: 0.75em 1em;
			background-color: #fff;
			}
		.detailTable thead {
			background-color: #f0f0f0;
			font-weight: bold;
			}
		.detailTable th {
			background-color: #f0f0f0;
			text-align: center;
			}
	.flex-cell {
		display: flex;
		justify-content: space-between;
		width: 7ch;
		margin: 0 auto;
		}
	.swipeIcon,
	.swipeIcon h4+div {
		overflow: auto;
		position: relative;
		}
		@media (max-width: 767.98px) {
			.swipeIcon:before{
				content: "";
				display: block;
				aspect-ratio: 1;
				width: 6em;
				position: absolute;
				top: 50%;
				right: 0;
				background: url("/images/swipe.svg") right center no-repeat;
				background-size: contain;
				pointer-events: none;
				z-index: 1;
				transition: opacity 0.2s 0.4s ease-out;
				}
				.swipeIcon.scroll:before{
					opacity: 0;
					}
			}

#attentionAplly {
	background: #fefcda;
	padding: 24px;
	margin-top: 32px;
	display: grid;
	gap: 8px;
	}
	#attentionAplly>div p{
		font-size: 0.8em;
		margin-top: 8px;
		}
	#attentionAplly>div>div{
		display: flex;
		flex-wrap: wrap;
		column-gap: 16px;
		row-gap: 8px;
		@media (max-width: 1000px) {
			flex-direction: column;
			}
		}
	#attentionAplly dl {
		display: grid;
		grid-template-columns: 85px 1fr;
		align-items: baseline;
		grid-gap: 16px;
		font-weight: bold;
		}
	#attentionAplly dt {
		border: 1px solid currentColor;
		border-radius: 8px;
		font-size: 0.9em;
		padding: .2em 0;
		text-align: center;
		}
	#attentionAplly dl:nth-of-type(2) dt {
		background: #df0042;
		color: #fff;
		}
	#attentionAplly dd small {
		font-weight: normal;
		margin-left: 1em;
		@media (max-width: 1000px) {
			display: block;
			margin: 0;
			}
		}

:where(#attentionEntry){
	dl{
		display: grid;
		align-items: start;
		}
	dt{
		display: grid;
		align-items: center;
		min-height: 32px;
		padding: 4px;
		border: 2px solid currentColor;
		font-weight: 700;
		text-align: center;
		}
	dt+dd{
		font-weight: 700;
		font-size: clamp(18px, 3vw, 20px);
		}
	@media (max-width: 575.98px) {
		dt{
			justify-self: center;
			width: 6em;
			margin-bottom: 8px;
			}
		dd+dt{
			margin-top: 24px;
			}
		dd{
			text-align: center;
			}
		}
	@media (min-width: 576px) {
		dl{
			grid-template-columns: 6em 1fr;
			grid-gap: 16px;
			}
		dt{
			transform: translateY(-0.1em);
			}
		dd{
			grid-column: 2;
			}
		dd+dd{
			margin-top: -16px;
			}
		}
	@media (min-width: 1200px) {
		dl{
			column-gap: 24px;
			}
		}
	}
#attentionEntry{
	position: relative;
	display: grid;
	grid-gap: 24px;
	overflow: hidden;
	}
	#attentionEntry h3{
		display: none;
		}
	#attentionEntry h4{
		color: #0073bf;
		font-weight: 900;
		font-size: clamp(20px, 3.6vw, 24px);
		text-align: center;
		letter-spacing: 0.05em;
		}
		#attentionEntry h4 span{
			position: absolute;
			top: 0;
			left: 0;
			display: grid;
			width: 10em;
			padding: 8px;
			background: #df0042;
			color: #fff;
			font-size: 0.8em;
			text-align: center;
			line-height: 1;
			transform: translate(-3em, 1em) rotate(-45deg);
			}
	#attentionEntry h4+div{
		display: grid;
		grid-gap: 24px;
		}
	#attentionEntry h4+p{
		font-weight: bold;
		text-align: center;
		}
	#attentionEntry dd {
		@media (max-width: 576px) {
			display: grid;
			}
		}
	#attentionEntry dd small{
		font-size: clamp(18px, 3vw, 20px);
		@media (max-width: 576px) {
			padding: 8px 0;
			margin: 16px auto 8px;
			border-bottom: 1px solid;
			border-top: 1px solid #666;
			width: fit-content;
			}
		}
	#attentionEntry dl+p{
		margin-top: -24px;
		@media (min-width: 576px) {
			margin-left: calc(6em + 16px);
			}
		@media (min-width: 1200px) {
			margin-left: calc(6em + 24px);
			}
		}
	#attentionEntry > div:has(.button){
		justify-self: center;
		justify-items: center;
		display: grid;
		grid-gap: 16px;
		width: min(100%, 480px);
		margin-top: 16px;
		}
	#attentionEntry > div:has(.button) + div{
		a{
			width: 100%;
			font-size: 16px;
		}
		@media (min-width: 768px) {
			grid-template-columns: 1fr 1fr;
			width: auto;
			}
		}
	#attentionEntry p span{
		color: #ff6666;
		font-weight: 700;
		}
	@media (max-width: 575.98px) {
		#attentionEntry h4{
			padding-left: 1em;
			}
		}
	@media (min-width: 768px) {
		#attentionEntry h4{
			font-size: 32px;
			}
		}
	@media (min-width: 1200px) {
		#attentionEntry h4{
			letter-spacing: 0.1em;
			}
		}

#attentionFlow{
	display: grid;
	grid-gap: 24px;
	}
	#attentionFlow h3{
		color: #0073bf;
		font-weight: 900;
		font-size: clamp(20px, 3.6vw, 24px);
		text-align: center;
		letter-spacing: 0.05em;
		}
	#attentionFlow dl{
		counter-increment: count;
		display: grid;
		grid-template-columns: auto 1fr;
		grid-gap: 8px 16px;
		}
		#attentionFlow dl:before{
			content: counter(count);
			display: grid;
			align-items: center;
			aspect-ratio: 1;
			width: 40px;
			padding-bottom: 2px;
			background: var(--color-theme);
			border-radius: 100%;
			color: #fff;
			font-weight: 700;
			font-size: 24px;
			line-height: 1;
			text-align: center;
			}
		#attentionFlow dl:nth-of-type(-n+3):after{
			content: "";
			grid-column: 1 / 3;
			height: 24px;
			margin-top: 16px;
			background: #0073bf;
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 13"><polyline points="1 1 12 12 23 1" style="fill: none; stroke: black; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2px;"/></svg>') center no-repeat;
			-webkit-mask-size: auto 100%;
			opacity: 0.25;
			}
	#attentionFlow dt{
		display: grid;
		font-weight: 700;
		font-size: 20px;
		}
	#attentionFlow dt span{
		display: grid;
		}
	/*終了*/
	#attentionFlow dt small:nth-child(2){
		color: #ff6666;
		}
	#attentionFlow dd{
		grid-column: 2;
		}
	@media (min-width: 768px) {
		#attentionFlow h3{
			font-size: 32px;
			}
		#attentionFlow dt span{
			grid-template-columns: auto 1fr;
			}
		}
	@media (min-width: 1200px) {
		#attentionFlow h3{
			letter-spacing: 0.1em;
			}
		}

#attentionLink{
	display: grid;
	grid-gap: 16px;
	}
	#attentionLink a{
		max-width: 100%;
		}
	@media (min-width: 768px) {
		#attentionLink{
			display: grid;
			grid-gap: 16px;
			grid-template-columns: 1fr 1fr;
			}
		#attentionLink a:first-child{
			grid-column: 1/3
			}
		}