@charset "UTF-8";
/* CSS Document */

body { padding: 0px; margin: 0px; font-family: "Titillium Web", sans-serif; -webkit-font-smoothing: antialiased;  background: url("images/bg_ill.svg") no-repeat right top rgba(255,255,255,1.00); font-size: 100.01%; background-size: 60vw; height: auto; background-attachment: fixed;  }
h1 { font-size: 161.6%; font-weight: bold; }
h2 { font-size: 138.5%; font-weight: bold; }
h3 { font-size: 123.1%; font-weight: bold; }
h4 { font-size: 108%; font-weight: bold; }
h5 { font-size: 93%; text-align: right; }
h6 { font-size: 77%; }
p { font-size: 108%; line-height: 150%; margin:0 0 1rem; }

a:link { color: rgb(2,117,193); text-decoration: none; -webkit-transition: background-color 0.1s ease-in-out, color 0.1s ease-in-out, border-color 0.1s ease-in-out; -moz-transition: background-color 0.1s ease-in-out, color 0.1s ease-in-out, border-color 0.1s ease-in-out; -o-transition: background-color 0.1s ease-in-out, color 0.1s ease-in-out, border-color 0.1s ease-in-out; transition: background-color 0.1s ease-in-out, color 0.1s ease-in-out, border-color 0.1s ease-in-out; }
a:visited { color: rgb(2,117,193); text-decoration: none; }
a:hover { color: rgb(2,148,244);}
a:active { color: rgb(2,117,193); }
a:focus { color: rgb(2,117,193); outline: none; }
ul li { list-style: disc; }

ol { padding-left: 0; }
ol li { list-style: decimal inside; }
li { font-size: 108%; }
table,
th,
td { border-collapse: collapse; border-spacing: 0; }

table{width: 100%;}
th { padding: 3px; border: 2px solid #FFFFFF; font-size: 0.75rem; text-align:center; background: #F0EBE5;  }
td { padding: 10px 3px; border: 2px solid #FFFFFF; font-size: 0.75rem; background: #F6F3EF; }
td:first-child {text-align: center;}
tr.table-title td { background: #fcfcfc; text-align: center; border: 2px solid #FFFFFF; }
table td p { margin:0 0 0.5rem; line-height: 1.25rem;}
table td p span {display: block; background-color: rgba(0,0,0,1.00); color: rgba(255,255,255,1.00); font-size: 0.75rem; padding: 0 0.5rem; border: 1px solid rgba(0,0,0,1.00);  margin-bottom: 0.25rem;  }
table td p b {display: inline-block; padding: 0 0.5rem; color: rgba(0,0,0,1.00); }
table td p strong {font-size: 1.5rem; font-weight: bold; }

hr { clear: both; margin-bottom: 10px; margin-top: 10px; border: 0; height: 1px; background: rgb(255,236,244); }
strong { }

body#career table td p strong { display:block; font-size: 1rem; margin: 0 0  0.5rem;}
table.toiawase th {font-size: 0.7rem;}

br.pc {display: none;}
/*　リンクボタン　*/
div.linkbtn {display: flex; flex-wrap: wrap; justify-content: space-around; max-width: 1000px; margin: auto; }
a.linkbtn {background: rgba(229,100,185,1.00); width:48%; max-width:600px; padding: 20px 0; display: block; text-align: center; margin:2rem auto; color: #fff; font-size:16px; font-weight: bold; border-radius: 10px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center;}
a.linkbtn.gakusei {background-color: rgba(255,133,38,1.00);}
a.linkbtn.gakusei:hover  {background-color: rgba(68,106,179,1.00);}
a.linkbtn:hover {background: rgba(219,64,166,1.00);}
a.linkbtn span {display:block; font-size: 1.0rem;}
/*div.middle a.linkbtn { width:100%; }
*/

a.sp_w100 {width: 100%!important;}

div.header {margin:0; overflow: hidden;}

div.header h1 img{width: 40vw; height: auto;}
div.header p.header {color: rgba(255,255,255,1.00); text-align: center; padding: 0.75rem; margin: 1rem 0; background: rgba(42,139,77,1.00); display: inline-block; width: 50%; font-size: 0.7rem;}
div.header p.header span {display: block;}
div.header p.logo {float: right; margin: 2rem 2rem 0 0; width: 120px;}
div.header p.logo img {width: 100%; height: auto;}

.h-logo { display: flex; flex-wrap: wrap; justify-content: space-between; width: 50px; position: absolute; top: 17.5px; right: 17.5px;}

.hokkaido img{ width: 50px; height: auto;}
.syokokai img{ width: 50px; height: auto;}
.day1013 {position: absolute; top:50px; left: 50px;}
.day1013 img {width: 300px; height: auto;}
.black {color: rgba(0,0,0,1.00) !important;}

div.main { width: 100%; margin:auto auto 100px;}




div.middle {max-width: 1000px; margin:0 auto;  padding: 1rem;  box-sizing: border-box;  position: relative; z-index: 100;background: rgba(250,250,250,0.70);}

div.middle h2 { font-size: 1.2rem; margin: auto; text-align: center; color: rgba(0,80,146,1.00); padding: .25rem 2rem; border-bottom: 2px solid rgba(0,80,146,1.00); border-top:  2px solid  rgba(0,80,146,1.00); letter-spacing: 0.5rem;}
div.middle h2 strong { color: rgba(182,71,149,1.00); }

div.nichiji {display: flex; flex-wrap: wrap; justify-content: space-around; padding: 1rem;}
div.day {width: 40%; margin-bottom: 1rem;}

img.day { margin-bottom: 1rem;}
div.time {width: 40%;}

div.day img,
div.time img {width: 100%; height: auto;}

div.middle h4 {font-size: 1.25rem; color: rgba(255,255,255,1.00); margin: 1rem 0;}
div.middle ul { padding: 0 0 0 1rem; margin: 0 0 1rem 1rem;}
div.middle ul li {color: rgba(42,139,77,1.00); font-weight:bold; padding-left: 0; line-height: 1.25; margin-bottom: 0.5rem;}
div.middle ul li span {color: rgba(255,255,255,1.00); font-weight: 600; background: rgba(224,125,126,1.00); border-radius: 10px; font-size: 60%; padding: 1px 10px; margin-left: 0.25rem; display:inline-block;}
div.middle p {font-weight: bold;}
div.middle p.day{ color: rgba(42,139,77,1.00); font-size: 2.5rem; font-weight: bold; margin: 0 auto 0.5rem; text-align: center; line-height: 1;}
div.middle p.day span{font-size:60%; margin-right: 0.5rem; display: inline-block;}






div.contents {max-width: 1000px; margin:0 auto;  padding: 1rem;  box-sizing: border-box;  position: relative; z-index: 100; display: flex; flex-wrap: wrap; justify-content: space-around; background: rgba(250,250,250,0.70); }
div.contents > div { width: 100%;}
div.round_box { background: rgba(255,250,188,1.00); border: 2px solid rgba(0,102,153,1.00); border-radius: 10px; padding: 1rem;}
div.contents h3{ padding: 0; margin: 0; color: rgba(0,102,153,1.00); }
div.contents h4{padding: 0; margin: 0;  color: rgba(0,102,153,1.00);}
div.contents p{}




div.contents2 {max-width: 1000px; margin:0 auto ;  padding: 1rem;  box-sizing: border-box;  position: relative; z-index: 100; display: flex; flex-wrap: wrap; justify-content: space-around;background: rgba(250,250,250,0.70);}
div.contents2 h3{font-size: 1.25rem; padding: 0; margin: 1rem 0 ; color: rgba(0,102,153,1.00); }

table.oubo th {width: 80px; font-size: 0.75rem;}

div.program {max-width: 1000px;  margin: 0 auto 2rem; box-sizing: border-box; width: 100%;}
div.program img{width: 100%; height: auto; }

div.matching { margin:0 auto; box-sizing: border-box; width: 70%;}
div.matching  img{ width: 100%; height: auto;}


div.footer {max-width: 1000px;  margin: 0 auto; box-sizing: border-box; background: rgba(250,250,250,0.70);}





@media only screen and (min-width:640px ) {  /*　タブレット縦　*/

body { }
p {  margin:0 0 0.5rem; }

table td p span {display: inline-block;   }
table td p b {display: inline-block; margin-right: 1rem;}
table th br,
table td br{}
table.toiawase th {font-size: 1rem;}
td {  font-size: 1rem;  }
div.header h1 img{width: 30vw;}
div.header p.header {font-size: 1rem;  padding: 0.75rem; margin: 2rem 0;  }
div.header p.header span {display:inline-block; margin-right: 1rem;}

.h-logo { display: flex; flex-wrap: wrap; justify-content: space-between; width: 180px; position: absolute; top: 30px; right: 30px;}

.hokkaido img{ width: 80px; height: auto;}
.syokokai img{ width: 80px; height: auto;}

 br.pc {display:block;}

a.sp_w100 {width: 48%!important;}

div.middle {  padding: 1rem; }
 
div.middle h2 { font-size: 2.4rem; margin: auto; text-align: center; color: rgba(0,80,146,1.00); padding: .25rem 2rem; border-bottom: 2px solid rgba(0,80,146,1.00); border-top:  2px solid  rgba(0,80,146,1.00); letter-spacing: 0.5rem;}
 
div.middle h3 br {display: none;}
div.middle p.day{  font-size: 6rem; line-height: 1;}

div.middle ul li span { border-radius: 10px; font-size: 70%; padding: 0px 10px; margin-left: 1rem;}

div.contents > div { width: 48%; display: flex; flex-direction: column; }
div.contents > div > div { display: flex; height: 100%; flex-direction: column; }
div.contents2 h3{font-size: 2rem;}

table.oubo th {width: 200px; font-size: 1rem;}

 div.program {max-width: 1000px;  margin: 0 auto; box-sizing: border-box; width: 60%;}
 
 div.matching { margin:0 auto; box-sizing: border-box; width: 20%;}
 
}
@media only screen and (min-width:1000px ) {  /*　PC　*/


}