/* CSS Document */

#material {
}


#material .titleSet{
    font-size: 140%;
}
#material .mk {
    background: linear-gradient(transparent 80%, #ffff66 20%);
}

#fv {
}
#fv dl {
	display: flex;
	flex-direction: row-reverse;
	margin: 0 0 40px;
}
#fv dl dt {
	width: 50%;
	position: relative;
  top: -40px;
}
#fv dl dt img {
	max-width: 680px;
}
#fv dl dt.feather::after {
	left: -50px;
	bottom: -50px;
}
#fv dl dd {
	width: 50%;
	display: flex;
  justify-content: flex-end;
}
#fv dl dd .block {
	max-width: 520px;
	margin: 120px 0 0;
	padding: 0 80px 0 0;
  box-sizing: border-box;
}
#fv dl dd .block h2 {
	margin: 0 0 40px;
}
#fv dl dd .block p {
	text-align: justify;
}



#please {
	padding: 50px 0 60px;
}
#please .stepArea{
    display:flex;
    align-items:center;
    gap:10px;
    margin-top:30px;
}

#please .step{
  flex:1;
    min-width:235px;
    background:#fff;
    border:2px solid #dfeedd;
    border-radius:20px;
    padding:25px;

}
#please .step p a{
    color: #03B74F;
}
#please .num {
  display: inline-block;
  background: #2f7d32;
  color: #fff;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 1.2rem;
  margin-bottom: 15px;
}
#please .flowImg{
    text-align: center;
    margin-top: 30px;
}
#please .flowImg img{
    border-radius: 20px;
    width:auto;
}
#please .stepArrow{
    flex:0 0 auto;
}

#please .stepArrow img{
    display:block;
    width:50px; 
    height:auto;
}

#bookmarkArea{
  padding: 60px 0;
  background:#f8fcf6;
  border-radius:20px;
}

#bookmarkArea h3{
  text-align:center;
  color:#2f7d32;
  margin-bottom:30px;
  font-size: 120%;
  font-weight: 600;
  line-height: 1.4em;
  letter-spacing: 3px;    
}

#bookmarkArea .bookmarkImages{
  display:flex;
  gap:30px;
  justify-content:center;
  margin-bottom:30px;
}

#bookmarkArea .bookmarkImages figure{
  flex:1;
  max-width:300px;
  text-align:center;
}

#bookmarkArea .bookmarkImages img{
  width:100%;
  border-radius:10px;
}

#bookmarkArea .bookmarkImages figcaption{
  margin-top:10px;
}

#bookmarkArea .bookmarkInfo{
  max-width:700px;
  margin:auto;
}

#bookmarkArea .bookmarkInfo .set{
  font-size:1.8rem;
  margin-bottom:20px;
}

#bookmarkArea .bookmarkInfo ul{
  margin-bottom:20px;
}

#bookmarkArea .bookmarkInfo .notice{
  margin-top:20px;
  padding:15px;
  background:#fff;
  border-left:5px solid #2f7d32;
}
#bookmarkArea .flowerTitle{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:15px;
    color:#2f7d32;
    margin-bottom:30px;
    font-size:120%;
    font-weight:600;
    line-height:1.4;
    letter-spacing:3px;
    text-align:center;
}

#bookmarkArea .flowerTitle .flower{
    width:40px;
    height:auto;
    flex-shrink:0;
}

#bookmarkArea .flowerTitle span{
    display:block;
}


#howTo {
	padding: 80px 0;
	background: #fff;
	position: relative;
}
#howTo h3 {
	align-items: center;
	position: relative;
}

#howTo .block {
	display: flex;
	gap: 80px;
    margin-top: 30px;
}
#howTo dl {
	width: 50%;
}
#howTo dl dt {
	font-size: 110%;
	font-weight: 500;
	padding: 0 0 2px;
	display: flex;
	align-items: flex-end;
	gap: 5px;
	position: relative;
}
#howTo dl dt::before {
	content: url("../module/img/i_feather.svg");
	width: 20px;
	line-height: 0;
	flex-shrink: 0;
}
#howTo dl dt::after {
	content: '';
  border-bottom: 1px solid #000;
  position: absolute;
  left: 25px;
  bottom: 0;
  width: calc(100% - 25px);
}
#howTo dl dd {
	margin: 10px 10px 30px 25px;
}
#howTo dl dd ul {
	margin: 0 0 15px;
}
#howTo dl dd ul li {
}
#howTo dl dd ul li a:hover {
	text-decoration: underline;
}



@media screen and (max-width: 480px) {
  
	#material {
		padding: 40px 0;
	}
	
	#fv dl {
		flex-direction: column-reverse;
		margin: 0 30px 40px;
	}
	#fv dl dt {
		width: auto;
		top: 0;
		margin: 30px 0 0;
	}
	#fv dl dt.feather::after {
		width: 40px;
		left: -20px;
		bottom: -20px;
	}
	#fv dl dt img {
		max-width: 100%;
	}
	#fv dl dd {
		width: auto;
	}
	#fv dl dd .block {
		margin: 0;
		padding: 0;
	}
	#fv dl dd .block h2 {
		margin: 0 0 30px;
	}
	
    #please {
        padding: 40px 0;
    }
    #please .stepArea{
        display: block;
    }
    #please .step{
        margin-bottom: 20px;
    }
    #please .stepArrow{
        display:none;
    }
    
    #bookmarkArea {
        margin-top: 20px;
        padding: 60px 20px;
    }    
    #bookmarkArea .bookmarkImages{
        display:block;
    }

    #bookmarkArea .bookmarkImages figure{
        max-width:none;
        margin-bottom:25px;
    }
    #bookmarkArea .bookmarkInfo .set {
        font-size: 1.6rem;
    }
    #bookmarkArea .flowerTitle{
        gap:8px;
        letter-spacing:1px;
        font-size:1.8rem;
    }

    #bookmarkArea .flowerTitle .flower{
        width:28px;
    }
    
	#howTo {
		padding: 60px 0;
	}
	#howTo .block {
		flex-direction: column;
		gap: 0;
	}
	#howTo dl {
		width: auto;
	}
	#howTo dl dt {
		margin: 0 0 15px;
	}
	#howTo dl dd ul {
		margin: 0 0 30px;
	}
	#howTo dl dd ul li {
		margin: 10px 0;
	}
	
	
	
	
	
}