@charset "utf-8";

/*********************************************
  CONFUCIUS_INSTITUTE_AT_SAPPORO_UNIVERSITY
  /guide/style.css
*********************************************/

@import "/common/css/base.css";


/*==================================
  Main Layout
==================================*/
div#main-contents h3 {margin:0 0 15px; background:url(/common/images/dott02.gif) top left repeat-y; padding:4px 14px; font-size:1.1666em; line-height:1; color:#7d2000;}

p#btn {width:454px; height:48px; overflow:hidden; margin:0 0 3px 63px; background:url(./images/btn_ov.png);}
p#btn a {display:block;}
p#btn a:hover {background-color:transparent;}
p#btn a:hover img {visibility:hidden;}
p.center {color:#010101; margin-left:65px;}

dl#address {margin-left:65px; padding:3px 0 15px; line-height:1.4;}
dl#address dt {width:5em; float:left; color:#010101;}
dl#address dd {padding:0 0 5px 5em;}

div#guide-info ul{background:url(./images/info_bg.gif) no-repeat; list-style:none;}
div#guide-info ul li.f-left{float:left; width:280px;}
div#guide-info ul li.f-right{float:right; width:280px;}
div#guide-info ul li dl{padding:20px 0 15px;}
div#guide-info ul li dl dt{margin:0 0 22px; font-size:0; line-height:0; text-align:center;}
div#guide-info ul li dl dd ul{background:none; padding:0 0 0 38px;}
div#guide-info ul li dl dd ul li{overflow:hidden; width:204px; height:58px; margin:0 0 10px; font-size:0; line-height:0;}
div#guide-info ul li dl dd ul li a {display:block;}
div#guide-info ul li dl dd ul li a:hover {background-color:transparent;}
div#guide-info ul li dl dd ul li a:hover img {visibility:hidden;}
div#guide-info ul li dl dd ul li#info-btn01{background:url(./images/info_btn01_ov.png) no-repeat;}
div#guide-info ul li dl dd ul li#info-btn02{background:url(./images/info_btn02_ov.png) no-repeat;}
div#guide-info ul li dl dd ul li#info-btn03{background:url(./images/info_btn03_ov.png) no-repeat;}
div#guide-info ul li dl dd p{padding:0 20px 15px;}
div#guide-info ul li dl dd p.none{padding:0 20px;}
div#guide-info-bottom{background:url(./images/info_bg_bottom.gif) no-repeat; height:5px; margin:0 0 35px;}



ul#tabs {list-style:none; background:url(./images/tab_back.png) bottom repeat-x; margin-bottom:20px;}
ul#tabs li {width:143px; height:50px; overflow:hidden; float:left; margin-right:2px;}
ul#tabs li a {display:block;}
ul#tabs li a:hover {background-color:transparent;}
ul#tabs li a:hover img {visibility:hidden;}
ul#tabs li#tab01 {background:url(./images/tab01_ov.png);}
ul#tabs li#tab02 {background:url(./images/tab02_ov.png);}
ul#tabs li#tab03 {background:url(./images/tab03_ov.png); width:144px;}
ul#tabs li#tab04 {background:url(./images/tab04_ov.png); width:144px; margin:0;}

table.time-schedule {width:580px; border-collapse:collapse; margin-bottom:12px;}
table.time-schedule caption {text-align:left; padding:0 0 5px 4px;}
table.time-schedule td,table.time-schedule th {border:1px solid #c0b57c; padding:6px 0; text-align:center;}
table.time-schedule th {font-weight:normal; background:#e0dabe;}
table.time-schedule th.typeA {width:10%;}
table.time-schedule th.typeB {width:22.5%;}
table.time-schedule tr.typeC td {background:#f3f0e0;}

p.indent {padding:2px 0 20px 1em; text-indent:-1em;}
/*p.indent {padding:2px 0 0 1em; text-indent:-1em;}*/
p.last-area{padding:2px 0 20px;}

p#btn-procedure {width:454px; height:48px; overflow:hidden; margin-left:63px; background:url(./images/btn_procedure_ov.png);}
p#btn-procedure a {display:block;}
p#btn-procedure a:hover {background-color:transparent;}
p#btn-procedure a:hover img {visibility:hidden;}

/*--other--*/
dl#chinese-title {padding-bottom:12px; font-size:0; line-height:0;}
dl#chinese-title dt {width:353px; float:left;}
dl#chinese-title dd {width:191px; height:18px; overflow:hidden; float:right; margin-top:16px; background:url(./images/btn_chinese_ov.gif);}
dl#chinese-title dd a {display:block;}
dl#chinese-title dd a:hover {background-color:transparent;}
dl#chinese-title dd a:hover img {visibility:hidden;}
div#text-navi {background:url(./images/back_text_navi.gif) repeat-y; padding-bottom:10px; margin-bottom:30px;}
div#text-navi dl {width:142px; float:left;}
div#text-navi dl#type001 {width:154px; float:left;}
div#text-navi dl dt {padding:10px 10px 5px; font-weight:bold;}
div#text-navi dl dd ul li {list-style:none; padding:0 0 5px 10px;}

dl.class-title {border:1px solid #c0b57c; margin-bottom:10px;}
dl.class-title dt {background:#d0c89d; border-bottom:1px solid #c0b57c; color:#7d2000; font-weight:bold; font-size:1.166em; padding:7px 10px;}
dl.class-title dt img {vertical-align:middle; margin-right:10px;}
dl.class-title dd {background:#efebd6; padding:7px 10px; line-height:1.5;}
/*20130823add start*/
dl.class-entry{background:#efebd6; margin:0 0 20px; padding:0 30px 0 15px;}
dl.class-entry dt{float:left; width:114px; font-size:0; line-height:0;}
dl.class-entry dd{float:right; width:420px;}
dl.class-entry dd p{line-height:2.2; text-align:right;}
dl.class-entry dd p span{margin:0 1em; color:#c0b57c;}
/*20130823add end*/
div.spec p {width:180px; float:left;}
div.spec p span.t-change{font-size:0.8em;}
div.spec dl {width:390px; float:right; line-height:1.5;}
div.spec dl dt {width:7em; text-indent:5px; float:left;}
div.spec dl dd {padding:0 2px 1px 7em; margin-bottom:1px; background:url(/common/images/dott01.gif) bottom repeat-x;}
p.text {padding:8px 2px;}
p.totop {text-align:right; padding:5px 2px 20px 0; line-height:1;}
dl.accordion dd {background:#efebd6;}
dl.accordion dd ul {list-style:none; padding:10px;}
dl.accordion dd ul li {background:url(./images/dott.gif) bottom repeat-x; padding:3px 5px;}
dl.accordion dd ul li span.number {width:4em; float:left;}
dl.accordion dd ul li span.date {width:6.5em; float:left;}
dl.accordion dd ul li span.text02 {width:400px; float:left;}
dl.accordion dd ul li span.text03 {width:167px; float:right;}
dl.accordion dd ul li span.wth01{display:inline-block; width:10.6em;}
dl.accordion dd ul li span.ml01{margin-left:10.6em;}
dl.accordion dd ul li span.wth02{display:inline-block; width:15.8em;}
dl.accordion dd ul li span.ml02{margin-left:15.8em;}
dl.accordion dd ul li span.wth03{display:inline-block; width:18em;}
dl.accordion dd ul li span.ml03{margin-left:18em;}
dl.accordion dd ul li span.wth04{display:inline-block; width:18.5em;}
dl.accordion dd ul li span.ml04{margin-left:18.5em;}
dl.accordion dd ul li span.wth05{display:inline-block; width:4em;}
dl.accordion dd ul li span.ml05{margin-left:4em;}
dl.accordion dd ul li span.wth06{display:inline-block; width:21em;}
dl.accordion dd ul li span.ml06{margin-left:21em;}
dl.accordion dd ul li span.wth07{display:inline-block; width:13.5em;}
dl.accordion dd ul li span.ml07{margin-left:13.5em;}
dl.accordion dd ul li span.wth08{display:inline-block; width:12em;}
dl.accordion dd ul li span.ml08{margin-left:12em;}
dl.accordion dd ul li span.wth09{display:inline-block; width:11em;}
dl.accordion dd ul li span.ml09{margin-left:11em;}
dl.accordion dd ul li span.wth10{display:inline-block; width:21.4em;}
dl.accordion dd ul li span.ml10{margin-left:21.4em;}
dl.accordion dd ul li span.wth11{display:inline-block; width:15.4em;}
dl.accordion dd ul li span.ml11{margin-left:15.4em;}
dl.accordion dd ul li span.wth12{display:inline-block; width:17.8em;}
dl.accordion dd ul li span.ml12{margin-left:17.8em;}



dl.accordion dd ul.half {list-style:none; padding:0 10px 10px; width:165px; float:left;}
dl.accordion dd p.half-text {width:360px; float:right; line-height:2; padding:0 20px 0 0;}
dl.accordion dd ul.half02 {list-style:none; padding:0 10px 10px; width:190px; float:left;}
dl.accordion dd p.half-text02 {width:330px; float:right; line-height:2; padding:65px 20px 0 0;}


div#text-navi02 {background:#efebd6; padding:5px; margin-bottom:25px;}
div#text-navi02 p {text-align:center; padding:5px;}
div#text-navi02 p a {margin:0 5px;}

/***** 20140203 add *****/
dl.accordion dd{padding:10px;}
dl.accordion dd table{border-collapse:collapse; width:560px; font-size:12px;}
dl.accordion dd table tr th{width:11.5em; padding:3px 5px; background:url(./images/dott.gif) repeat-x center bottom; font-weight:normal;}
dl.accordion dd table tr th span.number{float:left; width:4em;}
dl.accordion dd table tr th span.date{float:left; width:6.5em;}
dl.accordion dd table tr td{padding:3px 5px; background:url(./images/dott.gif) repeat-x center bottom;}
dl.accordion dd table tr td.w30{width:30%;}
dl.accordion dd table tr td.special01{padding:20px; background:none; vertical-align:middle;}
dl.accordion dd table tr td.special01 p{padding:0 0 15px;}



/***** 20170301 new setting *****/
.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;}

#new-tabs{list-style: none; margin-bottom: 30px; border-bottom: 1px #c0b57c solid; font-size: 0; line-height: 0; text-align: center;}
#new-tabs li{display: inline-block; margin-right: 15px; font-size: 16px; font-weight: bold; font-family: "Times New Roman", "游明朝", YuMincho, "Hiragino Mincho ProN", Meiryo, serif; line-height: 1.4; vertical-align: top;}
#new-tabs li a{display: block; box-sizing: border-box; padding: .2em 1em; border:1px #c0b57c solid; border-radius: 2px;
background: #e7e2cc;
background: -moz-linear-gradient(top,  #e7e2cc 0%, #ffffff 100%);
background: -webkit-linear-gradient(top,  #e7e2cc 0%,#ffffff 100%);
background: linear-gradient(to bottom,  #e7e2cc 0%,#ffffff 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e7e2cc', endColorstr='#ffffff',GradientType=0 );
color: #5d3e33; text-align: center; text-shadow: 0 0 10px #fff; text-decoration: none;}
#new-tabs li.current{padding-top: 10px;}
#new-tabs li.current a{border-bottom: none; background: #e9db91;
background: -moz-linear-gradient(top,  #e9db91 0%, #ffffff 100%);
background: -webkit-linear-gradient(top,  #e9db91 0%,#ffffff 100%);
background: linear-gradient(to bottom,  #e9db91 0%,#ffffff 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e9db91', endColorstr='#ffffff',GradientType=0 );}
#new-tabs li a:hover{background: #e9db91;
background: -moz-linear-gradient(top,  #e9db91 0%, #ffffff 100%);
background: -webkit-linear-gradient(top,  #e9db91 0%,#ffffff 100%);
background: linear-gradient(to bottom,  #e9db91 0%,#ffffff 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e9db91', endColorstr='#ffffff',GradientType=0 );}
#guide-index table{width: 100%; margin-bottom: 15px; border-collapse: collapse;}
#guide-index table caption{padding-bottom: .5em;}
#guide-index table caption span{display: block; font-weight: bold; text-align: right;}
#guide-index table th,#guide-index table td{box-sizing: border-box; padding: .2em; border:1px #c0b57c solid; text-align: center;}
#guide-index table th,#guide-index table .bottom td{border-bottom:4px #c0b57c solid;}
#guide-index table thead th{border-bottom:1px #c0b57c solid; background-color: #EFEBD6; width:14.28571428571429%;}
#guide-index table tbody td.language{background-color: #fde9d9;}
#guide-index table tbody td.talk{background-color: #e4dfec;}
#guide-index table tbody td.culture{background-color: #ebf1de;}
#guide-index table tbody td.economy{background-color: #ffc000;}
#guide-index table tbody td a{display: block; color: #5d3e33; text-align: center; text-decoration: none;}
#guide-index table tbody td a:hover{opacity: .7; text-decoration: underline;}
#guide-index table tbody td a span{font-size: 10px; color: #333;}
#guide-index table tbody td a.adj span{display: block; text-align: center;}
#guide-index .example{padding-bottom: 30px;}
#guide-index .example span{display: inline-block; margin-right: 1em; padding: .1em .5em;}
#guide-index .example span.language{background-color: #fde9d9;}
#guide-index .example span.talk{background-color: #e4dfec;}
#guide-index .example span.culture{background-color: #ebf1de;}
#guide-index .example span.economy{background-color: #ffc000;}
#guide-index dl.remarks{padding-bottom: 50px; line-height: 1.6;}
#guide-index dl.remarks dd{padding-left: 1em;}

#guide-calendar table{width: 100%; margin-bottom: 5px; border-collapse: collapse;}
#guide-calendar table caption{padding-bottom: .5em;}
#guide-calendar table caption span{display: block; font-weight: bold; text-align: right;}
#guide-calendar table th,#guide-calendar table td{box-sizing: border-box; padding: .2em; border:1px #c0b57c solid; text-align: center;}
#guide-calendar table thead th{background-color: #EFEBD6;}
#guide-calendar table .sat{color: #2673be;}
#guide-calendar table .hol{color: #e51d4f;}
#guide-calendar table span.c-mark{color: #000;}
#guide-calendar p.remarks{padding-bottom: 3em;}
#guide-calendar ul.remarks{list-style: none; padding-bottom: 50px; line-height: 1.6;}
#guide-calendar ul.remarks .circle {
  display: inline-block;
  border-radius: 50%;
  flex-flow: column;
  vertical-align: top;
  border: 2px solid #ff0000;
  margin: 0 auto;
  height: 12px;
}
#guide-calendar ul.remarks .circle .txt {
  opacity: 0;
}
#guide-calendar table .circle {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  flex-flow: column;
  vertical-align: top;
  border: 2px solid #ff0000;
  width: 40%;
  margin: 0 auto;
}

#guide-information table{width: 100%; margin-bottom: 30px; border-collapse: collapse;}
#guide-information table caption{padding-bottom: .5em; font-weight: bold; text-align: right;}
#guide-information table th,#guide-information table td{box-sizing: border-box; padding: .2em; border:1px #c0b57c solid; text-align: center;}
#guide-information table thead th{background-color: #EFEBD6;}
#guide-information ol.remarks{list-style: none; padding-bottom: 50px; line-height: 1.6;}
#guide-information ol.remarks li{padding-left: 2em; text-indent: -2em;}

#guide-detail{background: none #fff;}
#guide-detail .class-title{margin-bottom:0;}
#guide-detail .class-title dt{font-size: 12px;}
#guide-detail .class-title dd strong{display: inline-block; margin-right: 1em; font-size: 18px;}
#guide-detail .class-entry dt{float: left; width: auto; margin-right: 2em; color: #7d2000; font-size: 16px; font-weight: bold; line-height: 2.2;}
#guide-detail .class-entry dd{float: left; width: auto; font-size: 16px;}
#guide-detail .guide-detail-inner{width: 90%; margin: 0 auto;}
#guide-detail .spec{padding-bottom: 20px;}
#guide-detail .spec p{float: left; width: 30%; font-size: 0; line-height: 0;}
#guide-detail .spec p img{width: 100%;}
#guide-detail .spec ul{list-style: none; width: 100%;}
#guide-detail .spec p+ul{list-style: none; float: right; width: 65%;}
#guide-detail .spec li{margin-bottom: .2em; padding-bottom: .2em; border-bottom: 1px dotted #333; font-size: 14px; line-height: 1.6;}
#guide-detail .outline{list-style: none;}
#guide-detail .outline>li{padding-bottom: 20px; font-size: 14px; line-height: 1.6;}
#guide-detail .outline>li dt{ font-weight: bold;}
#guide-detail .outline>li dt:before{content: "■";}
#guide-detail .outline>li ol{list-style: none;}
#guide-detail .outline table {width: 100%; border-collapse: collapse;}
#guide-detail .outline table th,#guide-detail .outline table td {box-sizing: border-box; padding: .5em .8em; border:1px #c0b57c solid;}
#guide-detail .outline table th {text-align: center;}
#guide-detail .outline table td:nth-child(1),#guide-detail .outline table td:nth-child(2) {text-align: center;}
#guide-detail .outline table th.type01 {width: 3em;}
#guide-detail .outline table th.type02 {width: 7em;}
#guide-detail .btnarea{list-style: none; padding-bottom: 50px; font-size: 0; line-height: 0; text-align: center;}
#guide-detail .btnarea li{display: inline-block; width: 8em; font-size: 14px; line-height: 1;}
#guide-detail .btnarea li:first-child{margin-right: 2em;}
#guide-detail .btnarea li a{display: block; box-sizing: border-box; padding: .5em 1em; border: 1px #b95700 solid; border-radius: 2px; text-align: center; text-decoration: none;}


#guide-detail .class-title.d2setting dt{text-align: center;}
#guide-detail .class-title.d2setting dd{text-align: center;}
#guide-detail .class-entry.d2setting dt{float: none; display: flex; justify-content: center; margin-right: 0; padding: 10px 0;}
#guide-detail .class-entry.d2setting dt a{display: block; padding: .8em 3em; background-color: #eb6c2d; color: #fff; font-size: 1.1rem; line-height: 1; text-decoration: none;}