@charset "utf-8";
:root {
	--color: #111;
	--color-1: rgba(0,0,0,0.75);
	--color-2: #FF6A00;
	--color-3: #FF4A3B;
	--color-5: #EEE;
	--color-6: #FFF;
	--radius-5: 5px;
	--radius-10: 10px;
	--radius-15: 15px;
	--radius-20: 20px;
	--radius-25: 25px;
	--radius-30: 30px;
	--radius-35: 35px;
	--radius-40: 40px;
	--radius-45: 45px;
	--radius-50: 50px;
	--f12: 12px;
	--f14: 14px;
	--f16: 16px;
	--f18: 18px;
	--f20: 20px;
	--f22: 22px;
	--f24: 24px;
	--f26: 26px;
	--f28: 28px;
	--f30: 30px;
	--f32: 32px;
	--f34: 34px;
	--f36: 36px;
	--f38: 38px;
	--f40: 40px;
	--f42: 42px;
	--f44: 44px;
	--f46: 46px;
	--f48: 48px;
	--f50: 50px;
}
html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,form,fieldset,legend,input,button,textarea,menu{margin:0;padding:0;}
html{font-size: 62.5%; box-sizing: border-box;}
header,footer,section,article,aside,nav,hgroup,address,figure,figcaption,menu,details{display:block;}
table{border-collapse:collapse;border-spacing:0;}
caption,th{text-align:left;font-weight:normal;}
html,body,fieldset,img,iframe,abbr{border:0;}
i,cite,em,var,address,dfn{font-style:normal;}
[hidefocus],summary{outline:0;}
a,button{cursor:pointer;}
del,ins,u,s,a,a:hover{text-decoration:none;}
body,textarea,input,button,select,keygen,legend{font-family:-apple-system,BlinkMacSystemFont,Helvetica Neue,PingFang SC,Microsoft YaHei,Source Han Sans SC,Noto Sans CJK SC,WenQuanYi Micro Hei,sans-serif;color:var(--color);outline:0;font-size: var(--f14);line-height: 1.234;}
a,a:link,a:visited,a:active{color:var(--color); text-decoration:none; text-decoration: none; cursor: pointer; -moz-transition: background-color 0.2s ease-out, color 0.1s ease-out; -webkit-transition: background-color 0.2s ease-out, color 0.1s ease-out; -ms-transition: background-color 0.2s ease-out, color 0.1s ease-out; transition: background-color 0.2s ease-out, color 0.1s ease-out;}
a:hover{color:var(--color-3); text-decoration:underline;}
[data-animation]{visibility: hidden;animation-duration:1.5s;-webkit-animation-duration:1.5s;opacity: 0;animation-fill-mode:forwards;}
body{background: var(--color-5);}
.container{width:100%; max-width:1400px; margin: 0 auto; box-sizing: border-box;}
.dom_flex{display: flex; flex-wrap: wrap;}
.dom_up_btn {position: fixed;bottom: 15px;right: 10px;width: 36px;height: 36px;background: var(--color-6) url('../images/nav_arrow_up.png') no-repeat center center;background-size: 50% auto;box-shadow: 1px 1px 3px var(--color-2);border-radius: var(--radius-5);cursor: pointer;}
.header{background: var(--color-2); padding: 12px 15px; align-items: center;}
.header > h1{font-size: var(--f20); color: var(--color-6); display: block; text-align: center; width: 100%;}
.header > h1 span:nth-child(2n){font-size: var(--f24);}
.panel_box{display: block; padding: 15px 0;}
.panel_box .hd{border-bottom: 2px solid var(--color-1); align-items: center;}
.panel_box .hd h2{font-size: var(--f18); line-height: 2.4;  background: url('../images/arrow_down.png') no-repeat right center; background-size: 16px auto; padding-right: 20px;}
.panel_box .hd span{margin: 0 0 0 auto;}
.panel_box .bd{padding: 15px 0;}
.data_list{width: 100%; align-items: baseline;}
.data_list li{width:24%; margin: 10px 1.333% 10px 0; list-style: none;}
.data_list li:nth-child(4n){margin: 0 0 0 auto;}
.data_list li a{display: block; background: var(--color-6); padding: 10px; box-sizing: border-box; text-align: center; border-radius: var(--radius-10); box-shadow: 1px 2px 5px rgba(0,0,0,0.125);}
.data_list li a:hover{background: var(--color-2); color: var(--color-6); text-decoration: none;}
.data_list li a img{display: block; width: 100%; height:auto; border-radius: var(--radius-5);}
.data_list li a h3{font-size: var(--f18); padding: 10px 0;}
.data_list li a p{padding: 0 0 10px 0;}
.footer{border-top: 1px solid rgba(0,0,0,0.05); padding: 15px; text-align: center; color: rgba(0,0,0,0.5);}
@media screen and (max-width: 1366px) {
	.container{max-width:1200px;}
}
@media screen and (max-width: 1024px) {
	.container{max-width:960px; padding: 0 10px;}
	.data_list li{width:49%; margin: 10px 2% 10px 0;}
	.data_list li:nth-child(2n),.data_list li:nth-child(4n){margin: 0 0 0 auto;}
}
@media screen and (max-width: 768px) {
	.header > h1 span{display: block; font-size: var(--f18);}
	.header > h1 span:nth-child(2n){font-size: var(--f24);}
	.data_list li{width:100%; margin: 10px auto;}
	.data_list li:nth-child(2n),.data_list li:nth-child(4n){margin: 5px auto;;}
}