@import url('css2-Montserratitalwght0100..9001100..900_swap.css');

/* banner */
#banner { overflow: hidden; position: relative; min-width: 100vw; width: 100vw; aspect-ratio: 16/5; }
#banner:after { position: absolute; background: url(../../gamefishgambling/image/banner_bg.png) repeat; top: 0; right: 0; bottom: 0; left: 0; content: ""; }
#banner video { width: 100vw; height: 100%; object-fit: cover; }
#banner a { display: block; height: 100%; }
#banner img { min-width: 100%; width: 100%; height: 100%; }

/* title_box */
.title_box { margin-bottom: 1.5em; }
.title_box *:not(:last-child) { margin-bottom: .3em; }
.title_box h2 { text-align: center; font-weight: 600; font-size: 1.8em; color: var(--indigo); }
.title_box article { text-align: center; font-size: 1.1em; }
.title_box p {text-align: center !important;}
.title_box a {font-weight: 600;font-size: 1.5em;color:#485da2;}
/* news */
#news { padding: 3vmax 0; }
#news .newsList .info_box { position: relative; margin: .3em 0; padding: .8em 1em; border-bottom: 1px var(--g_200) solid; display: flex; flex-wrap: wrap; align-items: center; gap: 0 1em; }
#news .newsList .info_box .time { display: flex; align-items: baseline; gap: .5em; line-height: 1; }
#news .newsList .info_box h3 { width: 1%; flex: 1 1 auto; }
#news .newsList .info_box article { width: 100%; }
#news .newsList .info_box a , #products .product_list .item a { position: absolute; display: block; top: 0; right: 0; bottom: 0; left: 0; z-index: 5; }
#news .newsList .info_box:after { height: 1.5em; aspect-ratio: 1/1; border-radius: 50%; content: url("data:image/svg+xml,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%23485DA2'%3E%3Cpath d='M17.707 9.293l-5-5a.999.999 0 1 0-1.414 1.414L14.586 9H3a1 1 0 1 0 0 2h11.586l-3.293 3.293a.999.999 0 1 0 1.414 1.414l5-5a1 1 0 0 0 0-1.414'/%3E%3C/svg%3E"); display: none; }
#news .more { margin-top: 1.5em; text-align: center; }
#news .more a { padding: .5em 2em; background: -webkit-linear-gradient(-30deg, var(--blue) 0, var(--purple) 100%); border-radius: 1.7em; color: #fff; }

/* products */
#products { padding: 3vmax 0; background: color-mix(in srgb, var(--indigo) 70%, black); }
#products * { color: #fff; }
#products .title_box h2 { color: color-mix(in srgb, var(--cyan) 50%, white); }
#products .product_list .item { overflow: hidden; position: relative; margin: 0 1em; padding: 0 1.3em 1em; background: color-mix(in srgb, var(--indigo) 50%, black); border-radius: 1em; }
#products .product_list .photo { margin: 0 -1.3em 1em; }
#products .product_list .photo img { width: 100%; aspect-ratio: 5/3; object-fit: cover; }
#products .product_list .item h3 { height: 3.4em; -webkit-line-clamp: 2; }

/* faq_list */
#faq_list { padding: 3vmax 0; }
#faq_list .faq-question:not(:last-child) { padding-bottom: 1em; border-bottom: 1px color-mix(in srgb, var(--g_100) 40%, white) solid; }
#faq_list .faq-question .faq-q { position: relative; margin-top: 1em; padding: .5em 20px .5em 60px; background: color-mix(in srgb, var(--g_100) 50%, white); border-left: 3px var(--primary) solid; cursor: pointer; }
#faq_list .faq-question .faq-q:before , #faq_list .faq-question >div:before { position: absolute; width: 35px; font-family: "Montserrat", sans-serif; font-weight: 500; line-height: 1; text-align: center; font-size: 28px; color: var(--primary); top: 8px; left: 10px; content: "Q."; }
#faq_list .faq-question >div { position: relative; padding: .5em 20px .5em 60px; border-left: 3px var(--g_300) solid; display: none; -webkit-transition: none; transition: none; }
#faq_list .faq-question >div:before { color: var(--g_300); content: "A."; }

@media screen and (max-width: 1024px){
	#banner { aspect-ratio: 21/9; }
}
@media screen and (max-width: 640px){
	#banner { aspect-ratio: 16/9; }
}