@charset "utf-8";

#top{background:#f2f2f0;margin-bottom:40px;}
#top div{overflow:hidden;}
#top img{display:block;width:140%;}

h2{margin-bottom:30px;font-size:1.5em;color:#222;}
h2 span{display:block;font-size:0.5em;color:#09C;}
h2 + img{display:block;width:100%;margin-bottom:2em;}
.taiken img{width:100%;margin-bottom:40px;}

#index .sec0{/*background:repeating-linear-gradient(90deg, #edfdff, #edfdff 10px, #dafaff 10px 80px);*/}
#index .sec0 > section{width:100%;max-width:1100px;}
#index .sec0 h2{margin-bottom:0.5em;font-size:clamp(1.2em,5vw,1.6em);text-align:center;}
#index .sec0 h2 span{display:inline;overflow:hidden;color:#111;vertical-align:baseline;text-align:center;}
#index .sec0 h2 .span1{display:block;font-size:0.8em;}
#index .sec0 h2 .span2{font-size:1.2em;color:#5e9175;font-weight:900;background:linear-gradient(-180deg,#fff 60%,#ff0 60%,#ff0);}
#index .sec0 h2 .span3{font-size:1.2em;color:#ff0036;font-weight:900;background:linear-gradient(-180deg,#fff 60%,#ff0 60%,#ff0);}
#index .sec0 h2 .span4{display:block;font-size:1.2em;font-weight:900;}
#index .sec0 h2::after{content:'';display:block;width:100%;height:5px;margin-top:0.5em;
background: repeating-linear-gradient(-45deg ,var(--main) 0,var(--main) 3px ,#fff 3px, #fff 6px ,#ccc 6px, #ccc 9px ,#fff 9px, #fff 12px );}
#index .sec0 p{font-size:0.9em;}
#index .sec0 p:not(:last-child){margin-bottom:1em;}
#index .sec0 p span{font-weight:600;color:#C00;}
#index .sec0 .col{margin:2em 0;background:var(--main);border-radius:1rem;}
#index .sec0 .col > div{padding:1em;border:solid 4px #111;border-radius:1em;background:#fff;}
#index .sec0 .col h3{margin-bottom:0.8em;font-size:1.6em;font-weight:900;color:#111;text-align:center;}
#index .sec0 .col h3 span{text-align:center;}
#index .sec0 .col h3 span.sp1{display:block;padding:0.6em 0;margin-bottom:1em;font-weight:700;font-size:0.6em;border-radius:1rem;color:#fff;}
#index .sec0 .col .box1{margin-bottom:1em;}
#index .sec0 .col .box1 h3 span.sp1{background:#5e9175;}
#index .sec0 .col .box2 h3 span.sp1{background:#ff0036;}
#index .sec0 .col h3 span.sp2{display:block;font-size:0.8em;}
#index .sec0 .col h3 span.sp3{display:block;background:linear-gradient(-180deg,rgba(255,255,0,0) 0%,rgba(255,255,0,0) 60%,rgba(255,255,0,1.0) 60%,rgba(255,255,0,1.0) 100%);
  /*-webkit-text-stroke: 4px #fff;  text-stroke: 4px #fff;  paint-order: stroke;*/}
#index .sec0 .col ul{margin-bottom:2em;padding:1em 0 0;border-top:dotted 4px #111;}
#index .sec0 .col li{padding:0.2em 0;font-weight:500;font-size:0.9em;}
#index .sec0 .col li::before{content:'✔';color:#f93;margin-right:0.5em;}
#index .sec0 .col .box2 img{width:100%;}
#index .sec0 .col a{display:block;width:100%;margin:auto;padding:1em 0;font-size:1.1em;text-decoration:none;text-align:center;background:#ff0;border-radius:100px;font-weight:700;color:#111;transition:transform 0.3s;}
#index .sec0 .col a::after{content:'→';display:inline-block;padding-left:2em;}
#index .sec0 .col a:hover{transform:scale(1.1);}

@media (width >= 820px) {
#index .sec0 .col{display:flex;gap:2em;margin:2em 0;background:var(--main);border-radius:1rem;}
#index .sec0 .col > div{flex-basis:50%;padding:2em 1em;border:solid 4px #111;border-radius:1em;background:#fff;}
#index .sec0 .col .box1{margin-bottom:0;}
#index .sec0 .col h3{margin-bottom:0.8em;font-size:1.8em;font-weight:900;color:#111;text-align:center;}
#index .sec0 p{font-size:1em;}
#index .sec0 .col ul{padding:1em 1em 0;}
#index .sec0 .col li{font-size:inherit;}
#index .sec0 .col a{font-size:inherit;}
}


#topics,#courseinfo{overflow:hidden;margin-bottom:60px;}
/*
#school_info + p a{box-sizing:border-box;display:block;width:100%;margin:0 auto;padding:1em;text-align:center;border:2px solid #09c;color:#09c;}
#school_info dt{font-weight:bold;color:#09C;margin-bottom:16px;border-left:solid 5px #ccc;text-indent:0.5em;font-size:1.3em;}
#school_info dd{margin-bottom:30px;}
*/

#news{padding:1em;margin-bottom:40px;border:4px solid #f00;}
#news p{text-align:center;color:#000;font-weight:bold;}

#topics {padding:4em 0 0;}
#topics dl{margin-bottom:40px;border-top:1px dotted #333;}
#topics dt,#topics dd{padding:10px 0;line-height:1.6em;}
#topics dt{font-weight:bold;}
#topics dd{border-bottom:1px dotted #333;}
#topics dl span{font-weight:bold;color:#f00;}
#topics dl + a img{width:100%;}

#winoff{box-sizing:border-box;padding:1em;border:solid 6px #DDD;text-align:center;}
#winoff p{text-align:center;color:#333333;}
#winoff p:nth-of-type(1){margin-bottom:2em;}
#winoff img{width:100%;margin-bottom:1em;}
#winoff img.img1{width:auto;max-width:100%;margin-bottom:1em;}
#winoff ul{display:flex;justify-content:center;gap:0.5em;margin-bottom:1em;}
#winoff li{box-sizing:border-box;width:32%;padding:1em 0;border:solid 1px #999;text-align:center;font-weight:bold;}
#winoff li span{white-space:nowrap;color:#333;}
/*
p.windows{background-image:url(../image/windows.jpg);background-repeat:no-repeat;background-position:center top;background-size:100%;}
p.mos{background-image:url(../image/mos.jpg);background-repeat:no-repeat;background-position:center top;background-size:100%;}
p.office2007{background-image:url(../image/office2007.jpg);background-repeat:no-repeat;background-size:100%;}
p.office101316{background-image:url(../image/office101316.jpg);background-repeat:no-repeat;background-position:center top;background-size:100%;}*/
#topics a.taiken img{width:100%;}


.newtech{padding:4em 0;background:#fff;}
.newtech section{max-width:960px;margin:auto;}
.newtech h2{font-size:clamp(1.4em,5vw,2em);}
.newtech h2::after{content:'';display:block;width:100%;height:5px;margin-top:0.5em;
background: repeating-linear-gradient(-45deg ,var(--main) 0,var(--main) 3px ,#fff 3px, #fff 6px ,#ccc 6px, #ccc 9px ,#fff 9px, #fff 12px );}
.newtech dl {}
.newtech dl div{padding:1em;background:#fff;border-radius:20px;border:solid 5px #222;}
.newtech dl div:not(:last-child){margin-bottom:1em;}
.newtech dt{margin-bottom:0.8em;padding-bottom:0.2em;text-align:center;font-size:1.4em;font-weight:700;border-bottom:solid 6px #ff0;}

@media (width >= 820px) {
	.newtech dl {}
	.newtech dl div{padding:2em;}
	.newtech dt{font-size:1.8em;}
}



#courseinfo dt{margin-bottom:20px;}
#courseinfo dt a{
display:block;
line-height:1.6em;
font-size:1.6em;
padding-left:10px;
font-weight:bold;
color:#222;
border-left:solid 10px #09C;
}

#courseinfo dd{
overflow:hidden;
position:relative;
margin-bottom:40px;
padding-bottom:20px;
text-align:left;
color:#333333;
line-height:1.6em;
border-bottom:dotted 1px #333;
}

#courseinfo dd p{margin-bottom:40px;}
#courseinfo dd img{margin-top:10px;width:100%;}
#courseinfo dd a{
display:block;
width:100%;
line-height:80px;
text-align:center;
color:#FFF;
font-weight:bold;

background: #00b7ea;
background: -moz-linear-gradient(top,  #00b7ea 0%, #009ec3 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00b7ea), color-stop(100%,#009ec3));
background: -webkit-linear-gradient(top,  #00b7ea 0%,#009ec3 100%);
background: -o-linear-gradient(top,  #00b7ea 0%,#009ec3 100%);
background: -ms-linear-gradient(top,  #00b7ea 0%,#009ec3 100%);
background: linear-gradient(to bottom,  #00b7ea 0%,#009ec3 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b7ea', endColorstr='#009ec3',GradientType=0 );
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#41c0e0', endColorstr='#2eb1cc',GradientType=0 );
-moz-border-radius   : 6px;
-webkit-border-radius: 6px;
-khtml-border-radius : 6px;
border-radius        : 6px;
}


/* 480px以上用の記述 
---------------------------------------------------------------------------------------------------------------------------------- */
@media screen and (min-width: 480px) ,print {
#top img{width:auto;}
aside{display:block;position:absolute;top:-412px;right:0;width:230px;z-index:1;}
.menu1{margin-bottom:20px;padding:8px;}

h2{font-size:26px;}
h2 span{font-size:14px;}

h2 + img{display:none;}
#school_info{padding:0 10px 0 160px;background:url(../image/info_bg.jpg) no-repeat;}
#school_info + p a:after{content:"→";box-sizing:border-box;display:block;width:1.4em;height:1.4em;line-height:1.4em;float:right;margin-left:1em;border:1px solid #09c;color:#09c;border-radius:100px;}
#school_info dt{
margin:0px 0  0;
text-indent:-9999px;
line-height:40px;
background-repeat:no-repeat;
border:none;

}
#school_info dd{
text-indent:0px;
margin:0 0 30px;
padding-left: 60px;
line-height:1.5em;
text-align:justify;
text-justify:distribute;background-color:#FFF;
}
#school_info .tokutyou1{background-image:url(../image/tokutyou1.gif);}
#school_info .tokutyou2{background-image:url(../image/tokutyou2.gif);}
#school_info .tokutyou3{background-image:url(../image/tokutyou3.gif);}
#school_info .tokutyou4{background-image:url(../image/tokutyou4.gif);}
#school_info span{font-weight:bold;color:#FF9933;}


#topics dl{overflow:hidden;margin-bottom:40px;border-top:1px dotted #333;}
#topics dt,#topics dd{padding:10px 0;line-height:1.6em;}
#topics dt{clear:both;width:240px;float:left;font-weight:bold;}
#topics dd{padding-left:240px;border-bottom:1px dotted #333;}
#topics dl span{font-weight:bold;color:#f00;}
#topics + a img{width:100%;}
#winoff{padding:40px;}

#topics a.taiken{margin-bottom:40px;}

#courseinfo dt {margin-bottom:10px;}
#courseinfo dd p{width:450px;float:left;}
#courseinfo dd img{margin-top:10px;}
#courseinfo dd a{
display:block;
width:230px;
float:right;
line-height:80px;
text-align:center;
color:#FFF;
font-weight:bold;
background: #00b7ea;
background: -moz-linear-gradient(top,  #00b7ea 0%, #009ec3 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00b7ea), color-stop(100%,#009ec3));
background: -webkit-linear-gradient(top,  #00b7ea 0%,#009ec3 100%);
background: -o-linear-gradient(top,  #00b7ea 0%,#009ec3 100%);
background: -ms-linear-gradient(top,  #00b7ea 0%,#009ec3 100%);
background: linear-gradient(to bottom,  #00b7ea 0%,#009ec3 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b7ea', endColorstr='#009ec3',GradientType=0 );
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#41c0e0', endColorstr='#2eb1cc',GradientType=0 );
-moz-border-radius   : 6px;
-webkit-border-radius: 6px;
-khtml-border-radius : 6px;
border-radius        : 6px;
}
#courseinfo dd a:hover{
background: #0094ce;
background: -moz-linear-gradient(top,  #0094ce 0%, #006489 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0094ce), color-stop(100%,#006489));
background: -webkit-linear-gradient(top,  #0094ce 0%,#006489 100%);
background: -o-linear-gradient(top,  #0094ce 0%,#006489 100%);
background: -ms-linear-gradient(top,  #0094ce 0%,#006489 100%);
background: linear-gradient(to bottom,  #0094ce 0%,#006489 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0094ce', endColorstr='#006489',GradientType=0 );

}


div#topics a#android{
display:block;
margin:10px auto 20px;
width:600px;
height:120px;
background-image:url(../android/doroid2.jpg);
background-repeat:no-repeat;
}
}