/* CSS Document */

.idt1{
	text-indent: -1.3em;
	padding-left: 1.3em;
}
.check li::before{
	content: url("images/i_check.png");
	margin-right: 5px;
}
img{ max-width: 100%;}

#fv{
  background: #D1E6A5;
  padding: 70px 10px 30px;
  margin: 80px 0 0;
  position: relative;
}
#fv .icon{
  position: absolute;
  top: -50px;
  left: 50%;
  transform: translateX(-50%);
}

#ogataminato{
	margin-bottom: 100px;
}
#ogataminato h1{
	margin-top: 100px;
}
#ogataminato .lead{
	width: 840px;
	margin: 40px auto;
	font-size: 120%;
	font-weight: 600;
	line-height: 2em;
	text-align: center;
}



#archive{
	background: #EFECE7;
	padding: 80px 0;
}
#archive ul.study{
	display: flex;
	flex-wrap: wrap;
	margin: 20px 30px 80px;
}
#archive ul.study li{
	width: 50%;
	padding: 15px;
	box-sizing: border-box;
}


#archive{
}
#archive dl{
	max-width: 1600px;
	margin: 0 auto 100px;
	padding: 0 20px;
}
#archive dl dt{
	margin: 20px;
}
#archive dl dd{
}
#archive dl dd ul{
	display: flex;
	flex-wrap: wrap;
}
#archive dl dd ul li{
	width: 24%;
	margin: .5%;
}


/*
#archive{
}
#archive dl{
	margin: 0 0 100px;
}

#archive dl dt{
	font-size: 300%;
	font-weight: 600;
	text-align: center;
	margin: 20px;
	line-height: 1.4em;
	color: #604943;
}
#archive dl dd{
}
#archive dl dd ul{
}
#archive dl dd ul li{
	margin: 15px;
}
#archive dl dd ul li a{
	display: flex;
	align-items: center;
	border: 3px solid #796660;
	padding: 15px 30px;
	border-radius: 15px;
	font-size: 180%;
	font-weight: 600;
	line-height: 1.4em;
	color: #655652;
	background: #ffd46d;
}
#archive dl.summer dt{color: #72b9ce;}
#archive dl.autumn dt{color: #eeb833;}
#archive dl.winter dt{color: #f9827c;}
#archive dl.summer dd ul li a{background: #dce7ea;}
#archive dl.autumn dd ul li a{background: #f7d98f;}
#archive dl.winter dd ul li a{background: #ffbaab;}
#archive dl.summer dd ul li a:hover{background: #cae6ee;}
#archive dl.autumn dd ul li a:hover{background: #ffd263;}
#archive dl.winter dd ul li a:hover{background: #ffaca8;}
#archive dl dd ul li a:hover img{
	opacity: unset;
}
#archive dl dd ul li a img{
	margin-right: 30px;
}
*/




#study{
	padding: 80px 0;
}
#study .bd{
	border: 2px solid #604943;
	border-radius: 20px;
	padding: 80px 80px 40px;
	box-sizing: border-box;
	margin-top: 20px;
}
#study h1{
	color: #8DC11F;
	border-bottom: 3px solid #8DC11F;
	font-size: 270%;
	font-weight: 600;
	line-height: 1.3em;
	text-align: center;
	padding: 10px;
}
#study .lead{
	padding: 30px;
	font-size: 120%;
	font-weight: 600;
	line-height: 1.8em;
}
#study .lead h2{
	font-size: 140%;
	font-weight: 600;
	line-height: 1.8em;
}

#study .question{
	padding: 20px;
	border: 6px double #ccc;
	border-radius: 40px;
	margin: 20px;
}
#study .question .title{
	color: #8DC11F;
	font-size: 200%;
	font-weight: 600;
	text-align: center;
	padding: 20px;
	line-height: 1.2em;
}
#study .question .text{
	margin: 0 0 30px;
	font-size: 160%;
	font-weight: 600;
	line-height: 1.8em;
	text-align: center;
}
#study .question ul.answer{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
#study .question ul.answer li{
	font-size: 160%;
	font-weight: 600;
	line-height: 1.8em;
	margin: 20px 20px 0;
}
#study .question ul.answer li:nth-of-type(1){	color: #00aded;}
#study .question ul.answer li:nth-of-type(2){	color: #ff0000;}
#study .question ul.answer li:nth-of-type(3){	color: #000000;}
#study .question ul.answer li:nth-of-type(4){	color: #006837;}
#study .question ul.answer li:nth-of-type(5){	color: #0000FF;}



#study .question dl{
	margin: 40px 30px;
}
#study .question dl dt{
	background: #8DC11F;
	color: #fff;
	padding: 10px;
	position: relative;
	text-align: center;
	font-size: 200%;
	font-weight: 600;
	line-height: 1.2em;
}
#study .question dl dt:after{
	content: '▼';
	font-size: 80%;
	position: absolute;
	right: 20px;
}
#study .question dl dt.active:after{
	content: '▲';
}
#study .question dl dt:hover{
	cursor: pointer;
}
#study .question dl dd{
	display: none;
	border: 2px solid #8DC11F;
	background: #fff;
	padding: 40px;
	text-align: left;
	line-height: 1.6em;
	font-size: 120%;
	font-weight: 600;
}
#study .question dl dd .explanation{
	margin: 40px 0 0;
	padding: 20px 0 0;
	border-top: 1px solid #736357;
}
#study .question dl dd .explanation h3{
	line-height: 1.6em;
	font-size: 120%;
	font-weight: 600;
	text-align: center;
	margin: 20px 0;
}
#study .question dl dd .explanation h4{
	line-height: 1.6em;
	font-size: 110%;
	font-weight: 600;
	text-align: center;
	margin: 20px 0;
}


#study .select,
#study .story{
	margin: 140px 0 0;
}
#study .select h2,
#study .story h2{
	border: 2px solid #736357;
	border-width: 2px 0;
	font-size: 250%;
	font-weight: 600;
	line-height: 1.4em;
	text-align: center;
	padding: 10px;
}

#study .select dl{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: 30px;
}
#study .select dl dt h3{
	color: #8DC11F;
	font-size: 180%;
	font-weight: 600;
	line-height: 1.4em;
}
#study .select dl dd{
	width: calc(100% - 150px);
	font-size: 120%;
	line-height: 1.6em;
}
#study .select dl dd h3{
	color: #8DC11F;
	font-size: 150%;
	font-weight: 600;
	line-height: 1.4em;
	margin: 10px 0;
}

#study .story dl{
	margin: 40px 20px;
	padding: 30px 70px 50px;
	border: 1px solid #ccc;
	border-radius: 20px;
}
#study .story dl dt{
	font-size: 150%;
	font-weight: 600;
	line-height: 1.4em;
	margin: 20px 0;
	text-align: center;
}
#study .story dl dt h3{
	color: #8DC11F;
	font-size: 130%;
	font-weight: 600;
	line-height: 1.4em;
}
#study .story dl dd{
	font-size: 120%;
	line-height: 1.6em;
}
#study .story dl dd p{
	margin: 20px 0;
}
#study .story dl dd .howto{
	border: 5px double #ccc;
	border-radius: 10px;
	padding: 30px;
	margin-top: 20px;
}
#study .story dl dd .howto .box{
	display: flex;
	flex-wrap: wrap;
	gap: 40px;
	border-bottom: 1px solid #ccc;
	padding-bottom: 20px;
	margin-bottom: 20px;
}



#study .relation{
	margin: 100px 0 0;
}
#study .relation .block{
	padding: 40px 0;
}
#study .relation .block:nth-of-type(odd){
	background: #EFECE7;
}
#study .relation .block h3{
	text-align: center;
	font-size: 180%;
	font-weight: 600;
	margin: 20px 0;
}
#study .relation .block ul{
	display: flex;
	justify-content: center;
}
#study .relation .block ul li{
	width: 300px;
	margin: 10px 20px;
	text-align: center;
	font-size: 110%;
	font-weight: 600;
}
#study .relation .block ul li img{
	width: 300px;
	height: 200px;
	object-fit: cover;
	border-radius: 20px;
	margin-bottom: 10px;
}


.ftArchive{
	margin: 100px 0 0;
	background: #D1E6A5;
	padding: 20px 0;
}
.ftArchive ul.study{
	display: flex;
	flex-wrap: wrap;
	max-width: 1600px;
	margin: auto;
	padding: 0 10px;
}
.ftArchive ul.study li{
	width: 20%;
	padding: 10px;
	box-sizing: border-box;
}


.greeting{
	background: #FFFF02;
	padding: 40px 0;
	margin: 100px 0;
}
.greeting dl{
	display: flex;
	align-items: center;
}
.greeting dl dt{
}
.greeting dl dd{
	width: 600px;
	margin: 20px;
	font-size: 120%;
	line-height: 1.8em;
	font-weight: 600;
}



#study .act{
	padding: 60px 90px;
	border: 6px double #ccc;
	border-radius: 40px;
	margin: 20px;
}
#study .act dl{
	margin: 30px 0;
	font-size: 110%;
	line-height: 1.8em;
}
#study .act dl dt img{
	border-radius: 10px;
}
#study .act dl dd{
	margin: 10px 0;
}
#study .act .flex{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
#study .act .flex dl{
	width: 48%;
}


#study .access{
  font-size: 110%;
	line-height: 1.8em;
	border: 1px solid #ccc;
	border-radius: 20px;
	padding: 40px 80px;
	margin: 80px 20px;
	position: relative;
}
#study .access .title{
  font-size: 140%;
	font-weight: 500;
	letter-spacing: 1px;
	display: inline-block;
	background: #8dc11f;
	color: #fff;
	padding: 5px 15px;
	border-radius: 5px;
	position: absolute;
	top: -20px;
	left: 40px;
}
#study .access dl dt{
	font-size: 120%;
  text-align: center;
	margin: 40px 0;
}
#study .access dl dt h2{
	font-size: 160%;
	font-weight: 600;
	line-height: 1.4em;
  margin: 10px 0;
}
#study .access dl dd .info{
	line-height: 1.6em;
	margin: 40px 0;
}
#study .access dl dd .info h4{
	margin: 20px 0;
	text-align: center;
	font-weight: 600;
	background: #eee;
}



@media screen and (max-width: 736px){
	
	.fr.ml10{
		margin-left: auto;
	}
	.fl.mr10{
		margin-right: auto;
	}
	#ogataminato {
    margin-bottom: 50px;
	}
	#ogataminato h1 {
    margin: 40px 5px 20px 5px;
	}
	#ogataminato .lead {
    width: auto;
    margin: 10px 20px;
		font-size: 105%;
    line-height: 1.8em;
    text-align: left;
	}
	
	
	#archive {
    padding: 40px 10px;
	}
	#archive ul.study {
    margin: 10px 0px 40px;
	}
	#archive ul.study li {
    width: auto;
    padding: 10px;
	}
	
	
	#archive dl {
    margin: 0 auto 50px;
    padding: 0;
	}
	#archive dl dd ul li{
		width: 48%;
		margin: 1%;
	}

	
	
	#study {
    padding: 40px 0;
	}
	#study .bd {
    border: 1px solid #604943;
    padding: 20px;
    margin: 10px;
	}
	#study h1 {
    font-size: 180%;
	}
	#study .lead {
    padding: 20px 0;
    font-size: 120%;
	}
	#study .question {
    padding: 10px;
    border-radius: 20px;
    margin: 20px 0;
	}
	#study .question .text {
    font-size: 140%;
    line-height: 1.5em;
	}
	#study .question ul.answer li{
		font-size: 140%;
		line-height: 1.5em;
		margin: 10px 20px 0;
	}
	#study .question dl {
    margin: 40px 0;
	}
	#study .question dl dt {
    font-size: 150%;
	}
	#study .question dl dd {
    padding: 20px;
		font-size: 110%;
	}
	#study .question dl dd .explanation {
    margin: 20px 0 0;
    padding: 10px 0 0;
	}
	#study .question dl dd .explanation h3 {
    margin: 10px 0;
	}
	
	
	#study .select,
	#study .story {
    margin: 100px 0 0;
	}
	#study .select h2,
	#study .story h2 {
    font-size: 160%;
	}
	
	#study .select dl {
    display: block;
    margin: 20px 0;
	}
	#study .select dl dt {
    width: 50px;
	}
	#study .select dl dd {
    width: auto;
    font-size: 110%;
    line-height: 1.6em;
	}
	#study .select dl dd h3 {
    font-size: 125%;
    line-height: 1.4em;
    margin: 10px 0;
	}
	#study .story dl {
    margin: 10px 0;
    padding: 10px 0;
    border: none;
	}
	#study .story dl dt {
    font-size: 120%;
    margin: 10px 0;
	}
	#study .story dl dd {
    font-size: 110%;
    line-height: 1.4em;
	}
	#study .story dl dd p {
    margin: 10px 0;
	}
	#study .story dl dd .howto {
		padding: 20px;
	}
	#study .story dl dd .howto .box {
		gap: 0;
	}
	#study .relation .block {
    padding: 30px 0;
	}
	#study .relation .block h3 {
    font-size: 140%;
    margin: 10px 0;
	}
	#study .relation .block ul {
    flex-direction: column;
	}
	#study .relation .block ul li {
    width: 280px;
    margin: 10px auto;
	}
	#study .relation .block ul li img {
    width: 280px;
    height: 180px;
	}
	
	.bnBook{
    margin: 20px;
	}
	
	.ftArchive {
    margin: 50px 0 0;
    padding: 10px 0;
	}
	.ftArchive ul.study li {
    width: 50%;
	}
	
	
	.greeting {
    padding: 20px 0;
    margin: 50px 0;
	}
	.greeting dl {
    flex-direction: column;
	}
	.greeting dl dd {
    width: auto;
    margin: 20px 10px;
    font-size: 110%;
    line-height: 1.6em;
	}
	
	
	#study .act {
		padding: 0;
		border: none;
		margin: 0;
	}
	#study .act dl {
		margin: 20px 0;
	}
	#study .act .flex {
		flex-direction: column;
	}
	#study .act .flex dl {
		width: auto;
	}
	#study .access {
		border-radius: 10px;
		padding: 20px;
		margin: 80px 0;
		position: relative;
	}
	#study .access .title {
		font-size: 110%;
		left: 20px;
	}
	#study .access dl dt {
		margin: 30px 0;
	}
	#study .access dl dt h2 {
		font-size: 140%;
	}
	
	
	
	
}