@charset "utf-8";
/* CSS Document */
section {padding-top:0;}
#contents h2 {text-align: center;font-size: 24px; margin-bottom: 2rem;}

ul.rbox {display: flex; flex-wrap: wrap; justify-content: space-between;}
ul.rbox li {width: 31%; border-radius: 8px; box-shadow: 0 0 20px 10px rgba(0,0,0,0.15); padding: 10px;}
#contents ul.rbox li { margin-bottom: 3rem;}
ul.rbox li.clearbox { box-shadow: none; border:1px solid #ddd;}
ul.rbox li figure {display: flex; justify-content: center; align-items: center; height: 130px; margin: 0 auto;}

#contents ul.rbox li h3 {text-align: center; color: #fff; background: #005bac; border-radius: 4px; padding: 0.5rem 0; 1rem; margin:0; letter-spacing:-0.05em; font-weight: normal; font-size: 16px;}
#contents ul.rbox li a:hover h3 {background: #0092bc;transition: 0.2s;text-decoration:: none !important;}
#contents ul.rbox li.clearbox h4{ text-align: center; font-size: 16px; margin-bottom:0.5rem;}

#contents ul.investment li h3 {background: #22b573;}
#contents ul.investment li a:hover h3 {background: #2ed489;}

.kabu {width: 70%;}


#contents h2.icon {line-height: 2}
#contents h2.icon::before { content:url(/ir/individual_investors/img/top00009.gif); vertical-align:top; padding-right:10px;}
#contents section.sec04 h2.icon::before {content:url(/ir/individual_investors/img/top00010.gif); }
#contents section.sec05 h2.icon::before {content:url(/ir/individual_investors/img/top00011.gif); }
#contents section.sec06 h2.icon::before {content:url(/ir/individual_investors/img/top00012.gif); }

ul.info {display: flex; flex-wrap: wrap; justify-content: space-between;}
ul.info li {width: 31%;  border-bottom: 1px solid #ccc; padding-bottom: 1rem; position:relative;}
ul.info li:nth-child(-n+3) {border-top: 1px solid #ccc; padding-top: 1rem;}
ul.info li a::after {content: "\f0a9"; font-family: "Font Awesome 5 Free"; font-size: 1.5em; font-weight: 900; position:absolute; right:0; display:inline-block;}

ul.bluelink {display: flex; flex-wrap: wrap; justify-content: space-between;}
ul.bluelink li {width: 31%; background:#005bac; border-radius: 6px;}
ul.bluelink li a {color: #fff;padding: 1rem; display: block; position:relative;}
ul.bluelink li a::after {content: "\f0a9"; font-family: "Font Awesome 5 Free"; font-size: 1.5em; font-weight: 900; position:absolute; right:10px; display:inline-block;}

ul.info.bluelink li {border-bottom: none; padding: 1rem;}
ul.info li:nth-child(-n+3) {border-top: 1px solid #ccc; padding-top: 1rem;}


ul.imgInlineList {display: flex; flex-wrap: wrap;align-items: center;}
ul.imgInlineList li {margin-right: 20px;}


@media screen and (min-width: 641px) and (max-width: 979px) {
}

@media screen and (max-width:640px){
	ul.rbox li {width: 100%;}
	#contents ul.rbox li a {display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;}
	ul.rbox li figure {height: auto; max-width: 180px;}
	ul.rbox li figure img {height: 100px;}
	#contents ul.rbox li h3 {height: 100px; position: relative;width: calc(100% - 180px);}
	#contents ul.rbox li h3 span {position: absolute;top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%);width: 90%;}
	
	ul.info {border-top: 1px solid #ccc;margin-bottom:1rem;}
	ul.info li:nth-child(-n+3) {border-top: none; padding-top:0;}
	ul.info li:first-child {padding-top:1rem;}
	ul.info li {width: 100%; border-top: none; margin-bottom: 0;}
	
	ul.bluelink li {width: 100%;}
	ul.imgInlineList li {width: 50% !important; margin-right: 0;}
}