/* ##############################
 * Created on : 2020/04/17
 * @version 1.00
 * @copyright Sumika-Group.com(Heaven-studio.com)
 * @author Toshiyasu Takamoto
##############################  */

/* ##############################
	初期化
##############################  */
/*### Basic CSS ###*/
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,500,700&display=swap');

body { margin: 0; padding: 0; width: 100%; min-height: 100%; font-family: 'Noto Sans JP', sans-serif; font-weight: 400; z-index: 0; color: #000; background-size: cover; background-position: center; position: absolute;}
* { margin: 0; padding: 0; }
a { color: #000; text-decoration: none; }
img { border-style: none; }
.red { color: #f00; }
.red_b { color: #f00; font-weight: bold; }
.blue { color: #00F; }
.blue_b { color: #00F; font-weight: bold; }
#no_js { position: fixed; width: 100%; height: 100%; top: 0; left: 0; background: rgba(0,0,0,0.8); z-index: 5000; }
#no_js div { position: fixed; width: 320px; padding: 15px 0; top:50%; left: 50%; transform: translate(-50%,-60%); font-size: 14px; line-height: 22px; text-align: center; color: #f00; background: #fff; border-radius: 10px; }
.fixed-top { position: fixed; margin: 0; padding: 0; z-index: 10; }

/*### Header ###*/
header { width: 100%; height: 40px; display: block; padding: 5px; background: none; z-index: 10; }
header h1 { line-height: 40px; font-size: 20px; text-align: center; }


/*### Main ###*/
main { width: 100%; min-height: calc(100vh - 120px); padding: 5px; }
#top_logo_svg { display: block; min-width: 200px; max-width: 400px; margin: 0 auto; }
#select_contents { min-width: 300px; max-width: 900px; margin: 10px auto; padding: 0; display: block; }
.row { justify-content: center; margin: 0 !important; }
.cont_wrap { width: 100%; display: block; margin: 10px 0; padding: 0 0 5px; background: rgba(255,255,255,.8); cursor: pointer; border-radius: 10px; }
.cont_wrap h2 { font-size: 16px; line-height: 32px; text-align: center; background: #FD971F; border-radius: 10px 10px 0 0; }
.cont_wrap svg { min-width: 100px; max-width: 150px; display: block; margin: 5px auto; }
.cont_wrap:hover svg { fill: #0099FF; }
.cont_wrap p { text-align: center; }

/*### Footer ###*/
footer { width: 100%; height: 80px; display: block; border-top: 1px #333 solid; text-align: center; bottom: 0; position: relative; padding: 0; background: rgba(255,255,255,.3); }
footer small { display: block; margin: 20px 0 0; line-height: 16px; font-size: 10px; }
footer small a:hover { color: #666; text-decoration: underline; }


/* ### フレキシブル ###  */
@media (min-width: 320px) {
	#top_logo_svg { width: calc(12.5rem + ((1vw - 3.2px) * 30.303)); }
	#select_contents { width: calc(18.75rem + ((1vw - 3.2px) * 90.9091)); }
	.col-lg-4 { flex: 0 0 49.999999%; min-width: 150px; max-width: 300px; padding: 0 5px; }
	.cont_wrap svg { width: calc(6.25rem + ((1vw - 3.2px) * 7.5758)); }
	.cont_wrap p { font-size: calc(0.75rem + ((1vw - 3.2px) * 0.303)); line-height: calc(1.125rem + ((1vw - 3.2px) * 0.6061)); }

}
@media (min-width: 980px) {
	#top_logo_svg { width: 400px; }
	#select_contents { width: 900px; }
	.col-lg-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
	.cont_wrap svg { width: 150px; }
	.cont_wrap p { font-size: 14px; line-height: 22px; }
}