@charset "UTF-8";

body{ counter-reset: stepNum 0; }

@media not screen and ( min-aspect-ratio: 4/3 ) {
	.WeekData{ margin: .3rem .5rem .7rem 2rem; }
	.index { margin-top: 1rem!important; }
	.StepNum, .WkHoliday { width: 70%; position: relative; left: 6rem; }
	.StepNum::before, .WkHoliday::before { content: "Week"; position: absolute; left: -5rem; }
	.StepNum::after, .WkHoliday::after { counter-increment: stepNum 1; content: counter( stepNum ); position: absolute; width: 1.5em; left: -2rem; height: 1.5em; border-radius: 50%; text-align: center; background: -webkit-linear-gradient( 90deg, red, yellow ); color: mintcream; }
	.check{ margin-left: 1.5em; }
	.check:before{ left: -1rem!important;}
	.check:after{ left: -.8rem!important; }
	.columm { width: 90%!important; margin-left: 1rem; }
	.acd-check:checked + .acd-label + .acd-content { height: 12%;}
}
@media only screen and ( min-aspect-ratio: 4/3 ) {
	#content { width: 100%; box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.2); }
	.WeekData{ margin-left: 6.5rem; margin-right: .5rem; }
	#side { margin-left: .3rem; }
	.StepNum, .WkHoliday { margin-left: 1rem; padding-bottom: .3em; font-size: 1.1em; padding-top: .5em; padding-left: 5em; position: relative; }
	.StepNum::before, .WkHoliday::before { content: "STEP"; position: absolute; left: 0em; margin-: .3em; }
	.StepNum::after, .WkHoliday::after { counter-increment: stepNum 1; content: counter( stepNum ); position: absolute; width: 1.5em; left: 3em; top: .5em; height: 1.5em; border-radius: 50%; text-align: center; background: -webkit-linear-gradient( 90deg, red, yellow ); color: mintcream; }
	.columm { margin-left: 2rem!important; }
	.acd-check:checked + .acd-label + .acd-content { height: 7%;}
}

/* 未実施週のカウントクリア */
.WkHoliday{ counter-reset: stepNum -1!important; }

/* サイドメニュー */
.index { margin: .1rem; font-size: 1.2rem; font-weight: bold; border-bottom: solid darkorange .2rem; background: ghostwhite; padding-left: .5rem; }
.indexData1 { padding-left: .8rem; color: black; border-bottom: 1px dotted black; margin-bottom: .3rem; }

/* 本文*/
.title { font-size: 1.5rem; font-weight: bolder; padding-left: .7rem; margin-top: .5rem; }
.WkHoliday { color: grey; }
.WkHoliday::before { color: grey; }
.WkHoliday::after { background: grey; }
.StepNum a { font-size: 1.2rem; }

.marginTB1rem { margin: 1rem 0; }
.goal { margin: .3rem 0; font-weight: bold; font-size: 1.05rem; border-bottom: 1px dotted black; width: 7rem; }
.check{ display:block; width: 93%; padding-top: .2em; padding-left: 2em; position:relative; }
.check:before, .check:after{ content:""; display: block; position: absolute; }
.check:before{ width: 1rem; height: 1.2rem; background: white; border: 1px solid #000000; left: 3px; top: .4rem;}
.check:after{ border-left: 3px solid #2D5AA1; border-bottom: 3px solid #2D5AA1; width: 18px; height: 5px; -webkit-transform: rotate( -45deg ); transform: rotate( -45deg ); left: 6px; top: 8px; }

.columm { margin: .25rem .5rem .25rem .5rem; padding-left: .5rem; color: white; background: -webkit-linear-gradient( 90deg, dodgerblue, limegreen ); width: 60%; height: 6rem; }
.columm a { display: block; color: white; width: 100%; height: 100%; }

.try { font-size: 1.4rem; margin: 1rem .5rem; background-color: khaki; border-left: solid .5rem maroon; padding-left: .3rem; }
.tryTitle { font-size: 1.2rem; margin: 0 .8rem; font-weight: bold; }
.tryBox { display: flex; width: 90%; }
.tryBoxItem { width: calc(100% / 2); text-align: center; background-color: darkolivegreen; border-radius: .3rem; margin: .3rem 1rem; padding: .5rem; }
.tryBoxItem:hover { background-color: limegreen; }
.tryBoxItem a { display: block; text-decoration: none; color: white; }