@charset "utf-8";

/*--------------------------------------------------*/
/*		http://www.sapporo-koshi.jp/sp/
/*		/css/guide.css
/*--------------------------------------------------*/
/*		$index
/*--------------------------------------------------*/
/*			$index......目次
/*--------------------------------------------------*/



/*--------------------------------------------------*/
/*			$layout
/*--------------------------------------------------*/
#visual{margin-bottom: 4.6875%; font-size: 0; line-height: 0;}
#tabs{padding: 0 3.125%;}
#tabs ul{-webkit-justify-content: space-between; justify-content: space-between;}
#tabs ul li{width: 31.034%; margin-bottom: 10px; padding: 3px; border: 1px #c0b57c solid; background-color: #fff;}
#tabs ul li.on{align-self: flex-end; margin-bottom: 0; padding-bottom: 0; border-bottom: none;}
#tabs ul li a{display: block; padding: .5em; background: rgb(220,216,194);
background: -moz-linear-gradient(top, rgba(220,216,194,1) 0%, rgba(244,244,243,1) 100%);
background: -webkit-linear-gradient(top, rgba(220,216,194,1) 0%,rgba(244,244,243,1) 100%);
background: linear-gradient(to bottom, rgba(220,216,194,1) 0%,rgba(244,244,243,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dcd8c2', endColorstr='#f4f4f3',GradientType=0 ); font-weight: bold; text-align: center;}
#tabs ul li.on a{background: rgb(233,219,145);
background: -moz-linear-gradient(top, rgba(233,219,145,1) 0%, rgba(255,255,255,1) 100%);
background: -webkit-linear-gradient(top, rgba(233,219,145,1) 0%,rgba(255,255,255,1) 100%);
background: linear-gradient(to bottom, rgba(233,219,145,1) 0%,rgba(255,255,255,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e9db91', endColorstr='#ffffff',GradientType=0 );}
hr.tab-border{display: block; position: absolute; z-index: -1; width: 100%; height: 1px; margin-top: -1px; background-color: #c0b57c;}
.guide-contents{padding: 6.25% 1.5625% 0;}
.intro{padding-bottom: 1em; font-size: .9rem;}
table{width: 100%; border-collapse: collapse; font-size: .9rem;}



/*--------------------------------------------------*/
/*			$webApplication
/*--------------------------------------------------*/
#web-application{margin-bottom: 9.375%; padding: 4.6875% 3.125%; border: 1px #c0b57c solid; background-color: #efebd6;}
#web-application h3{padding-bottom: 1em; color: #7d2000; font-size: 1.2rem; text-align: center;}
#web-application li{padding-bottom: 3.125%; font-size: 0; line-height: 0;}
#web-application p{color: #7d2000; font-size: .9rem; text-align: center;}



/*--------------------------------------------------*/
/*			$detail box01
/*--------------------------------------------------*/
.guide-index #box01
.guide-index #box01 ul{padding-bottom: 1.5625%;}
.guide-index #box01 li{padding-bottom: 3.125%;}
.guide-index #box01 dt{position: relative; padding: .8em 0; border: 1px #c0b57c solid; background-color: #efebd6; font-size: 1.2rem; font-weight: 700; line-height: 1; text-align: center;}
.guide-index #box01 dt:after{content: "＋"; position: absolute; right: 3.125%; top: 50%; margin-top: -.5em;}
.guide-index #box01 dt.on:after{content: "－";}
.guide-index #box01 dd{display: none;}
.guide-index #box01 table th{width: 20%; padding: 1em .2em; border: 1px #c0b57c solid; border-top: none; line-height: 1.2; text-align: center;}
.guide-index #box01 table td{width: 20%; padding: 1em .2em; border: 1px #c0b57c solid; border-top: none; line-height: 1.2; text-align: center;}
.guide-index #box01 table.cel6 th{width: 16.666%;}
.guide-index #box01 table.cel6 td{width: 16.666%;}
.guide-index #box01 table td span{font-size: .8rem;}
.guide-index .remarks{padding-bottom: 6.25%;}
.guide-index .remarks dl{padding-bottom: 6.25%;}
.guide-index .remarks ol{list-style: decimal; padding-left: 1.5em;}
.guide-index .remarks p{font-size: 0; line-height: 0;}

.guide-calendar #box01 ul{padding-bottom: 1.5625%;}
.guide-calendar #box01 li{padding-bottom: 3.125%;}
.guide-calendar #box01 ul.remarks{padding-bottom: 3.125%;}
.guide-calendar #box01 .remarks li{padding-bottom: 0;}
.guide-calendar #box01 dt{position: relative; padding: .8em 0; border: 1px #c0b57c solid; background-color: #efebd6; font-size: 1.2rem; font-weight: 700; line-height: 1; text-align: center;}
.guide-calendar #box01 dt:after{content: "＋"; position: absolute; right: 3.125%; top: 50%; margin-top: -.5em;}
.guide-calendar #box01 dt.on:after{content: "－";}
.guide-calendar #box01 dd{display: none;}
.guide-calendar #box01 table{margin-bottom: 1.5625%;}
.guide-calendar #box01 table th,.guide-calendar table td{box-sizing: border-box; padding: .2em; border:1px #c0b57c solid; text-align: center;}
.guide-calendar #box01 table thead th{border-top: none; background-color: #EFEBD6;}
.guide-calendar #box01 table .sat{color: #2673be;}
.guide-calendar #box01 table .hol{color: #e51d4f;}
.guide-calendar #box01 span.c-mark{color: #000;}
.guide-calendar #box01 .circle {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  flex-flow: column;
  vertical-align: top;
  border: 2px solid #ff0000;
  width: 55%;
  margin: 0 auto;
}
.guide-calendar #box01 .remarks{font-size: .8rem;}
.guide-calendar .remarks{padding-bottom: 6.25%;}
.guide-calendar .remarks ul{padding-bottom: 6.25%;}
.guide-calendar .remarks p{font-size: 0; line-height: 0;}
.guide-calendar .remarks .circle {
  display: inline-block;
  border-radius: 50%;
  vertical-align: top;
  border: 2px solid #ff0000;
  margin: 0 auto;
  height: 14px;
  padding: 0px 0 0;

}
.guide-calendar .remarks .circle .txt {
  opacity: 0;
}

.guide-info #box01 ul{padding-bottom: 1.5625%;}
.guide-info #box01 li{padding-bottom: 3.125%;}
.guide-info #box01 dt{position: relative; padding: .8em 2em .8em .5em; border: 1px #c0b57c solid; background-color: #efebd6; font-size: 1.1rem; font-weight: 700; line-height: 1;}
.guide-info #box01 dt.flex {
  align-items: center;
  -webkit-box-align: center;
}
.guide-info #box01 dt:after{content: "＋"; position: absolute; right: 3.125%; top: 50%; margin-top: -.5em;}
.guide-info #box01 dt.on:after{content: "－";}
.guide-info #box01 dd{display: none;}
.guide-info #box01 table th{width: 35%; padding: 1em; border: 1px #c0b57c solid; border-top: none; line-height: 1.2; text-align: left;}
.guide-info #box01 table td{padding: 1em .2em; border: 1px #c0b57c solid; border-top: none; line-height: 1.2; text-align: center;}
.guide-info #box01 dd p{padding: 4.6875% 9.375%; border: 1px #c0b57c solid; border-top: none; font-size: 0; line-height: 0;}
.guide-info .remarks{padding-bottom: 6.25%;}
.guide-info .remarks ol{padding-bottom: 6.25%;}
.guide-info .remarks ol li{padding-left: 1.5em; text-indent: -1.5em;}
.guide-info .remarks ol li a{color: #b95700; text-decoration: underline;}
.guide-info .remarks p{font-size: 0; line-height: 0;}


.caution{margin-bottom: 40px; padding: 25px 15px; border: 1px #dfdfdf solid;}
.caution dt{margin-bottom: .5em; padding-bottom: .2em; border-bottom: 1px #dfdfdf solid; font-size: 14px; font-weight: bold; text-align: center;}
.caution dd{padding: 0 10px;}
.caution dd p{padding-bottom: 1.5em;}
.caution dd li{line-height: 1.6;}


/*--------------------------------------------------*/
/*			$detail box02
/*--------------------------------------------------*/
.guide-index #box02
.guide-index #box02 ul{padding-bottom: 1.5625%;}
.guide-index #box02 li{padding-bottom: 3.125%;}
.guide-index #box02 dt{position: relative; padding: .8em 0; border: 1px #c0b57c solid; background-color: #efebd6; font-size: 1.2rem; font-weight: 700; line-height: 1; text-align: center;}
.guide-index #box02 dt:after{content: "＋"; position: absolute; right: 3.125%; top: 50%; margin-top: -.5em;}
.guide-index #box02 dt.on:after{content: "－";}
.guide-index #box02 dd{display: none;}
.guide-index #box02 table th{width: 20%; padding: 1em .2em; border: 1px #c0b57c solid; border-top: none; line-height: 1.2; text-align: center;}
.guide-index #box02 table td{width: 20%; padding: 1em .2em; border: 1px #c0b57c solid; border-top: none; line-height: 1.2; text-align: center;}
.guide-index #box02 table td a.adj span{display: block; text-align: center;}
.guide-index #box02 table.cel6 th{width: 16.666%;}
.guide-index #box02 table.cel6 td{width: 16.666%;}
.guide-index #box02 table td span{font-size: .8rem;}

.guide-calendar #box02 ul{padding-bottom: 1.5625%;}
.guide-calendar #box02 li{padding-bottom: 3.125%;}
.guide-calendar #box02 dt{position: relative; padding: .8em 0; border: 1px #c0b57c solid; background-color: #efebd6; font-size: 1.2rem; font-weight: 700; line-height: 1; text-align: center;}
.guide-calendar #box02 dt:after{content: "＋"; position: absolute; right: 3.125%; top: 50%; margin-top: -.5em;}
.guide-calendar #box02 dt.on:after{content: "－";}
.guide-calendar #box02 dd{display: none;}
.guide-calendar #box02 table{margin-bottom: 1.5625%;}
.guide-calendar #box02 table th,.guide-calendar table td{box-sizing: border-box; padding: .2em; border:1px #c0b57c solid; text-align: center;}
.guide-calendar #box02 table thead th{border-top: none; background-color: #EFEBD6;}
.guide-calendar #box02 table .sat{color: #2673be;}
.guide-calendar #box02 table .hol{color: #e51d4f;}
.guide-calendar #box02 .remarks{font-size: .8rem;}

.guide-info #box02 ul{padding-bottom: 1.5625%;}
.guide-info #box02 li{padding-bottom: 3.125%;}
.guide-info #box02 dt{position: relative; padding: .8em 2em .8em .5em; border: 1px #c0b57c solid; background-color: #efebd6; font-size: 1.1rem; font-weight: 700; line-height: 1;}
.guide-info #box02 dt:after{content: "＋"; position: absolute; right: 3.125%; top: 50%; margin-top: -.5em;}
.guide-info #box02 dt.on:after{content: "－";}
.guide-info #box02 dd{display: none;}
.guide-info #box02 table th{width: 35%; padding: 1em; border: 1px #c0b57c solid; border-top: none; line-height: 1.2; text-align: left;}
.guide-info #box02 table td{padding: 1em .2em; border: 1px #c0b57c solid; border-top: none; line-height: 1.2; text-align: center;}
.guide-info #box02 dd p{padding: 4.6875% 9.375%; border: 1px #c0b57c solid; border-top: none; font-size: 0; line-height: 0;}