@charset "utf-8";
@font-face {
 font-family: "noto";
 font-style: bold;
 font-weight:bold; line-height:100%;
 src: url('../fonts/notosans_b.woff') format('woff'), url('../font/notosans_b.ttf') format('truetype');
}
@font-face {
 font-family: "noto";
 font-style: normal;
 font-weight:normal; line-height:100%;
 src: url('../fonts/notosans_r.woff') format('woff'), url('../font/notosans_r.ttf') format('truetype');
}
@font-face {
 font-family: "dm";
 font-style: bold;
 font-weight:bold; line-height:100%;
 src: url('../fonts/dmsans_b.woff') format('woff'), url('../font/dmsans_b.ttf') format('truetype');
}
@font-face {
 font-family: "dm";
 font-style: normal;
 font-weight:normal; line-height:100%;
 src: url('../fonts/dmsans_r.woff') format('woff'), url('../font/dmsans_r.ttf') format('truetype');
}
*{ margin: 0;padding: 0}
a { text-decoration : none; }
img { vertical-align : top; margin:0px; padding:0px;}
p { line-height:25px; margin:0; padding:15px 0; }

a img { border:0;}
a:hover img { filter:alpha(opacity=70);opacity:0.7;}
.clearfix { content: ".";  display: block;    clear: both; height: 0; visibility: hidden;}
.clearfix { min-height: 1px;}
* html .clearfix { height: 1px;
  /*¥*//*/  height: auto; overflow: hidden; /**/}
body{font-size: 100%;line-height:170%;  box-sizing: border-box;  word-break: break-all;
width:100%;text-size-adjust: 100%;margin: 0; padding: 0;}
html{font-size: 100%;line-height:170%; box-sizing: border-box; width:100%;-webkit-text-size-adjust: 100%;margin: 0; padding: 0; font-family:"noto"}
img {border:0;max-width: 100%;	height: auto;vertical-align: bottom;}
span{display: inline-block; padding:0; margin:0 }
a{ text-decoration:none;}
a:hover{ transition : all 0.5s ease 0s;}
.border{border:1px solid #F63;}
.clear {clear:both;}
div, ul, ul li, section, dl, dl dt, dl dd{ box-sizing:border-box; }
article{ box-sizing:border-box; width:80%; margin:0 auto; }	
.c_main{background-color: #49BAA8;}
.c_sub{ background-color: #27525A;}
header{z-index:20; position:fixed; background-color:#FFF; margin:0 !important; width:100%; top:0; left:0;}
.headerin{ width:90%; max-width:1400px; margin:10px auto !important;} 
.arrow{position:absolute;display: inline-block;padding:0;vertical-align: middle;text-decoration: none;font-size: 15px; z-index:30}
.arrow::before,.arrow::after{position: absolute;margin: auto;content: "";vertical-align: middle;}
.arrow::before{ top:-4px; left:2px;width: 15px;height: 1px; background: #194951;}
.arrow::after{top:-6px; left:13px;width: 4px;height: 4px;-webkit-transform: rotate(45deg);transform: rotate(45deg);border-top: 1px solid #194951;	border-right: 1px solid #194951;}
a:hover .arrow::before{ background: #FFF;transition : all 0.5s ease 0s;}
a:hover .arrow::after{border-top: 1px solid #FFF; border-right: 1px solid #FFF;transition : all 0.5s ease 0s;}

.pagetop { width:10%; display:block; margin:0 0 0 90%; position: relative; display: inline-block; font-size:10px; 
height:70px; line-height:20px; color:#333; text-align:center; }
.pagetop::after { content: ''; position:absolute; left:0; right:0; bottom:0; width:1px; height:50px; margin:auto; background-color:#666;}
footer{ padding:30px 0; width:90%; box-sizing:border-box }
footer .flex{justify-content: space-between; }
footer h1{ margin:20px 0 0 0; padding:0; font-size:16px; line-height:30px}
.mark{ margin:20px 0  }
.foot1{ margin:0; padding:0; font-size:10px; line-height:10px; display:flex;align-items: flex-end;flex-wrap: wrap; width:300px;}
.foot1 li { margin:0 0 10px 0; padding:0 10px; border-left:1px solid #666}
.foot1 li:nth-of-type(3){ border-right:1px solid #666}
.foot1 li a{ color:#666}
.footmenu ul{ font-size:10px; line-height:20px; margin:0 30px 30px 0; padding:0; list-style:none}
.footmenu ul li:nth-of-type(1){ margin:0 0 20px 0; padding:0; color:#A7B0B1; font-weight:bold; font-family:"noto"}
.footmenu ul li:nth-of-type(2) a{ margin:0 0 10px 0 !important; font-weight:bold }
.footmenu ul li:nth-of-type(2){ margin:0 0 10px 0; font-weight:bold}
.footmenu ul li:nth-of-type(2) a::before {border-top:none; width:0 !important; margin-right:0 !important;}
.footmenu ul li a{ margin:0; padding:0 0 5px 0; display: flex; align-items: center; color:#333;}
.footmenu ul li a::before {border-top: 1px solid; content: ""; width:10px; margin-right:10px;}
footer p{ width:100%; font-size:10px; color:#666; padding:10px 5% 0 0; margin:30px 0 0 0; border-top:#999 1px solid}
footer ul{ list-style:none}
.sp{ display:none }
.flex{ width:90%; margin:40px auto; display:flex;  flex-wrap: wrap;}
.mt20{ margin-top:20px}
.mt10{ margin-top:10px}
@media only screen and (max-width: 1024px) {
.pcmenu{ display:none}
.footmenu{ display:none}
.pc{ display:none !important }
.sp{ display:block }
.pagetop { margin:0 0 0 35%;  width:30%; }
  }
.main{ width:100%; position:relative;height:442px; overflow:hidden }
.main article{ z-index:10; position:absolute;width:100%; }
.main article div{ width:90%; margin:0 0 0 10% }
article{ width:90%; max-width:1400px; margin:30px auto; }
.icon{ display:flex; margin:0; padding:0; }
.icon a{ display:block; color:#27525A; border-radius:50px; height:30px; line-height:30px; padding:0 30px; margin:20px 10px; background-color:#FFF}
.icon a.iconon{ background-color:#27525A !important; color:#FFF !important}
.main h2{ color:#FFF; font-size:30px; line-height:40px; margin:60px 0 0 20px; padding:0}
.main h3{ color:#FFF;margin:30px 0 0 20px !important; padding:0 !important}

.content{ background-color:#F7F9F8; padding:30px 0; margin:0}
.content article{ background:#FFF; padding:30px}
.content h1{ color: #27525A; font-size:20px; line-height:30px; font-weight:normal; margin:50px 0 0 0; padding:0}
.content p{ margin:0 0 20px 0; padding:0; }
.category{ margin:30px 0; padding:0;display:flex; flex-wrap: wrap; list-style:none }
.category li{ width:31.3%; padding:20px; margin:10px 1%; border:#CCC 1px solid; border-radius:10px}
.category li a dl{ width:100%; margin:0; padding:0}
.category li a dl dt{ width:100%; margin:0; padding:0; color: #27525A; font-size:18px; line-height:24px; height:100px; background-repeat:no-repeat; background-position:center right; }
.category li a dl dd{ position:relative; color:#333; padding:0 60px 0 0; font-size:14px; line-height:20px}
.category3{ margin:30px 0; padding:0;display:flex; flex-wrap: wrap; list-style:none }
.category3 li{ width:47.95%; padding:20px; margin:10px 1%; border:#CCC 1px solid; border-radius:10px}
.category3 li a dl{ width:100%; margin:0; padding:0}
.category3 li a dl dt{ width:100%; margin:0; padding:0; color: #27525A; font-size:18px; line-height:24px; height:100px; background-repeat:no-repeat; background-position:center right; }
.category3 li a dl dd{ position:relative; color:#333; padding:0 60px 0 0; font-size:14px; line-height:20px}
.thirdicon{ position:absolute; bottom:0; right:0; z-index:10; border:1px solid #333; 
width:30px !important; height:30px !important; border-radius:50% }
.thirdarrow{ bottom:12px; right:25px; z-index:20 }
a:hover .thirdicon{ background:#49BAA8;border:1px solid #49BAA8;}

@media only screen and (max-width: 1200px) {
.category li a dl dt{background-size:50px; height:60px;  }
.category li a dl dd{ font-size:12px;}
.category3 li a dl dt{background-size:50px; height:60px;  }
.category3 li a dl dd{ font-size:12px;}
}
@media only screen and (max-width:1024px) {
.headerin{ height:35px} 
h3{margin:20px 0 0 20px; }
.category li{ width:48%}
.category3 li{ width:48%}
.main{ height:221px;margin-top:50px; }
.main article div{ margin:0 auto !important; }
.main h2{ margin:10px 0 0 0;}
.icon a{ height:20px; font-size:14px; line-height:20px; padding:0 20px; margin:10px 10px; }
}
@media only screen and (max-width:768px) {
.icon{ display:none}
.main h2{ padding:10px}
.category li{ width:98%}
.category2 li{ width:48% !important}
.category2 li a dl dd{ display:none}
.category2 li a dl dt{  height:80px; background-position:bottom right; }
.category3 li{ width:98%}
.foot1{ display:block;}
.foot1 li{ padding:10px 0 !important; border:none !important}
}