@charset "shift_jis";
/* CSS Document */
/*
=======================================
  Reset CSS
=======================================
*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, main, menu, nav, section, summary,
time, mark, audio, video{
margin:0;
padding:0;
box-sizing:border-box;
}

article,aside,details,figcaption,figure,
footer,header,main,menu,nav,section{
  display:block;
}


body{
background:#fff;
color: #000;
line-height: 1.5;
font-size: 14px;
font-family:Meiryo, -apple-system, BlinkMacSystemFont, "Nunito Sans", "Yu Gothic", YuGothic, "Hiragino Sans", "ƒqƒ‰ƒMƒmŠpƒS ProN W3", "Hiragino Kaku Gothic ProN",  sans-serif!important;
-webkit-text-size-adjust: 100%;
}

img{
  border: 0;
}

ul,ol{
  list-style-type: none;
	margin: 0;
	padding: 0;
}

table {
  border-collapse: collapse; 
  border-spacing: 0;
}

img, input, select, textarea { 
  vertical-align: middle;
}

a {
  color: #000;
	text-decoration:none;
}
a:hover {
  color: #8a7755;
}
a:hover img {
  opacity: 0.7;
}

/*
=========================================
  Base Layout
=========================================
*/
/*container*/
#container{
	width: 100%;
	min-width: 320px;
	background:#fff;
	margin: 0 auto;
	padding-bottom: 100px;
}
header{
	margin: 20px auto;
	padding-right: 1%;
	width: 100%;
	max-width: 1024px;
	text-align:right;
}
logo{
	max-width: 1024px;
	text-align:right;
}
.contents{
	margin: 0 auto;
	padding: 0 auto;
	width: 98%;
	max-width: 1024px;
	border-bottom:solid 1px #ccc;
}

.col2{display:flex;flex-wrap:wrap;justify-content:space-between;}
.col2 .block_startguide,.col2 .block_server{width: 49%;}

.sp{display:none;}

@media screen and (max-width: 1024px){
.col2 .block_startguide{width: 60%;}
.col2 .block_server{width: 38%;}
}
@media screen and (max-width: 660px){
.contents{width:100%;}
.col2 .block_startguide{width: 100%;}
.col2 .block_server{width: 100%;}
.sp{display:inline;}
.pc{display:none;}
}

.wrap{
	clear:both;
}
.display-flex{display:flex;flex-wrap:wrap;}
footer{
	text-align:center;
	clear:both;
	margin-top: 40px;margin-bottom: 40px;
}

.wrap:after,.block:after,footer{content:""; display:block; clear:both; height:0;}

/*
=========================================
  ModulesiBlockj
=========================================
*/

/*Œ©o‚΅*/
h1 {background:#fffffa;border:solid 1px #ebebe6;border-top:solid 4px #cc953e;padding: 15px;margin-bottom: 20px;}
.sub{font-size: 80%;}
h2 {background:#00b4b4;color:#fff;font-weight:bold;padding: 0.5em;}


h4.grade-color{font-size: 18px;color:#89c24b;}

.annotation{margin: 0.5em 0 0.5em 2em;}
/*ˆκ——•\
--------------------*/

.tb_list{
	width:100%;
	border-collapse:collapse;
	margin: 20px auto;
}
.tb_list th,.tb_list td{
	border:solid 1px #ccc;
	padding: 15px;
	text-align:center;
}
.tb_list tr:first-child th{
	background:#e6fafa;
}
.tb_list tr:first-child th:first-child{
	background:#ebebe6;	
}
.tb_list td a{
	margin: 0 auto;
	padding-left: 40px;
	text-align:left;
	background:url(../img/icon_zip.png) no-repeat;
	display:inline-block;
	color:#000;
}
.tb_list td a:hover{
	color: #c00;
	background:url(../img/icon_zip_on.png) no-repeat;
}

/*ƒNƒCƒbƒNƒXƒ^[ƒgƒKƒCƒh
--------------------*/
.block_startguide{
	background:#ffeed4;
	padding: 5% 5% 2% 5%;
}
.block_startguide h3{text-align:center;padding-bottom: 15px;font-size: 21px;border-bottom:solid 3px #000;margin-bottom: 15px;}
.btn_guide {margin: 20px auto 0;}
.btn_guide li{width: 100%;max-width:420px;height: 60px;line-height: 60px;margin-top: 15px;}
.btn_guide li a{background:url(../img/icon_arrow.png) no-repeat #222222 25px center;border-radius:30px;color:#fbd497;display:block;text-align:center;position:relative;font-size: 16px;font-weight:bold;}
.btn_guide li a:hover{background:url(../img/icon_arrow_on.png) no-repeat #222222 25px center;color:#fff;}
.guide_tab::after{content:url(../img/icon_tab.png);position:absolute;top: 8px;right:4%;}
.guide_dl::after{content:url(../img/icon_dl.png);position:absolute;top: 5px;right:4%;}
a.guide_tab:hover::after{content:url(../img/icon_tab_on.png);}
a.guide_dl:hover::after{content:url(../img/icon_dl_on.png);}


.btn_guide li .close{border-radius:30px;background:url(../img/icon_arrow_on.png) no-repeat #ccc 25px center;color:#fff;display:block;text-align:center;position:relative;font-size: 16px;font-weight:bold;}
.guide_tab.close::after{content:url(../img/icon_tab_on.png);position:absolute;top: 8px;right:4%;}
.guide_dl.close::after{content:url(../img/icon_dl_on.png);position:absolute;top: 5px;right:4%;}

.last-update{font-size:85%;text-align:right;padding: 0.5em 0;}

.btn-waka{position: relative;margin-bottom: .2em;text-align: center}
.btn-waka:before{margin-right: 1rem;content: '_';}
.btn-waka:after {margin-left: 1rem;content: '^';}

.btn_guide_2 {margin: 20px auto 0;}
.btn_guide_2 li{width: 100%;max-width:420px;height: 60px;line-height: 60px;margin-bottom: 8px;border: #474747 solid 2px; border-radius: 30px;}
.btn_guide_2 li a{border-radius:30px;display:block;text-align:center;font-size: 16px;font-weight:bold;}

.last-update{font-size:85%;text-align:right;padding: 0.5em 0;}





@media screen and (max-width: 320px){
	.btn_guide-2 li a{font-size:90%;}
}


/*ƒT[ƒo[
--------------------*/
.kanri {margin-bottom: 14px;}
.kanri dt{color:#fff;background:#4b97d6; font-size: 16px;font-weight: bold;}
.kanri dt a{color:#fff;background:url(../img/icon_dotarrow.png) no-repeat 10px center;padding-top: 4%;padding-bottom: 4%;padding-left: 35px;display:block;}
.kanri dd{padding: 13% 5%;border:solid #4b97d6;border-width: 0 5px 5px 5px;line-height:160%;box-shadow: 0px 4px 8px -2px rgba(10,10,10,0.2) inset, 0px 0px 0px 1px rgba(10,10,10,0.02) inset;}

.haishin dt{color:#fff; background:#3aa077;font-size: 16px;font-weight: bold;}
.haishin dt a{color:#fff;background:url(../img/icon_dotarrow.png) no-repeat 10px center;padding-top: 4%;padding-bottom: 4%;padding-left: 35px;display:block;}
.haishin dd{padding: 11% 5%;border:solid #3aa077;border-width: 0 5px 5px 5px;line-height:160%;box-shadow: 0px 4px 8px -2px rgba(10,10,10,0.2) inset, 0px 0px 0px 1px rgba(10,10,10,0.02) inset;}

.kanri dt a:hover,.haishin dt a:hover{opacity:0.5;}

.mirai{text-align:left;padding:5px;margin-top: 10px;}
.terms{text-align:left;padding:5px;}


a.link-icon{background:url(../img/icon_link.png) no-repeat left center;padding: 5px 0 5px 30px;}

#page_top {
    position: fixed;
    bottom: 30px;
    right: 20px;
}
#page_top a {
display:block;
    background: #00b4b4;
    color: #fff;
    padding: 10px;
    box-shadow: 0 2px 10px -6px rgba(0,0,0,.5), 0 3px 10px -4px rgba(0,0,0,.2);
    text-decoration:none;
    font-size:14px;
    line-height: 14px;
    text-align:center;
}
#page_top a:hover {
    opacity:0.5;
    text-decoration: none;
}

/*utility
--------------------*/

.mb10{margin-bottom: 10px;}
.mb20{margin-bottom: 20px;}
.mb30{margin-bottom: 30px;}
.mb40{margin-bottom: 40px;}
.mb50{margin-bottom: 50px;}
.mb60{margin-bottom: 60px;}
.mb70{margin-bottom: 70px;}
.mb80{margin-bottom: 80px;}

.mt10{margin-top: 10px;}
.mt20{margin-top: 20px;}
.mt30{margin-top: 30px;}
.mt40{margin-top: 40px;}
.mt50{margin-top: 50px;}
.mt60{margin-top: 60px;}
.mt70{margin-top: 70px;}
.mt80{margin-top: 80px;}