body {
	margin: 0;
	padding: 0;
	font-family:"Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
	font-size: 80%;
	line-height: 170%;
	color: #222;
	min-width:1050px;
	-webkit-text-size-adjust: 100% ;/* iPhone�t�H���g�T�C�Y�g��΍� */
	background:#fff;
	border-top:5px #569235  solid;
}
img {
	border: none;
	vertical-align:bottom;
}
div, p, ul, ul li, h1, h2, h3, h4, h5, dl, dt, dd {
	margin: 0;
	padding: 0;
	list-style:none;
}
div, p, ul, ul li, h1, h2, h3, h4, h5, dl, dt, dd, ol, ol li, table, th, td {
	background-image:url("http://www.kochi-tech.ac.jp/library/common/image/spacer.gif"); /* Android�y�[�W��P�v�f�̌��ԑ΍� */
}
a:link {color:#06F; outline:none; }
a:visited { color:#FF0000;}
a:hover {color: #333;}
a:hover img {
	opacity: 0.7;
	filter: alpha(opacity=70);
	-moz-opacity: 0.7;
}
#wrapper { background:#FFF;}
#base {}

/*====================================================================================================

  HEADER

====================================================================================================*/

#header { clear:both; width:100%;}
#header .head { margin:0 auto; padding: 20px 0; width:1000px;}
#header .head:after { /*float�̉���*/
	display:block;
	clear:both;
	height:0px;
	visibility:hidden;
	content:".";
}


/*** LOGO ******************************************************************/

#header h1,
#header h1 a {
	display:block;
	width:512px;
	height:80px;
}
#header h1 { float:left;}
#header h1 a {
	text-indent: -9999px;
	background: url("../image/logo.gif") no-repeat left center;
}


/*** H-MENU ***************************************************************/

#header .h_menu {
	float:right;
	margin:0;
	width:465px;
}
#header .h_menu:after { /*float�̉���*/
	display:block;
	clear:both;
	height:0px;
	visibility:hidden;
	content:".";
}
*+html #header .head .h_menu { clear:both; float:right;}
#header .h_menu ul { float:left; width:320px;}
#header .h_menu ul li { float:left;  margin:0 0 0 15px; padding:0 0 0 25px;}
#header .h_menu ul li a { color:#569235; text-decoration:none;}
#header .h_menu ul li.ka1 { background:url("../image/s-m1.gif") no-repeat left;}
#header .h_menu ul li.ka2 { background:url("../image/s-m2.gif") no-repeat left;}
#header .h_menu ul li.ka3 { background:url("../image/s-m3.gif") no-repeat left;}
#header .h_menu ul li.search {
	clear:both;
	float:none;
	margin:0 !important;
	padding:0 !important;
	width:100%;
	background:#000;
}
#header .login, 
#header .login a {
	display:block;
	width:60px;
	height:60px;
}
#header .login {
	float:left;
	border:1px solid #DDDDDD ;
	border-radius: 5px;		/* CSS3���� */  
	-webkit-border-radius: 5px;	/* Safari,Google Chrome�p */  
	-moz-border-radius: 5px;	/* Firefox�p */  
}
#header .login a {
	text-indent:-9999px;
	background:url("../image/login1.gif") no-repeat center;
}

#header .lang{ float: right; width: 75px;}
#header .lang p a{
	display: block;
	padding: 3px 10px;
	text-align: center;
	text-decoration: none;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;	
}

#header .lang p.eng{ margin-bottom: 5px;}
#header .lang p.ja{ color: #FFF;}

#header .lang p.eng a{  background: #EEE;  color: #569235;}
#header .lang p.ja a{background: #569235;  color: #FFF;}



/*** NAVI-MENU *************************************************************/

#nav{ margin:0 auto; width:1000px;}
#nav:after { /*float�̉���*/
	display:block;
	clear:both;
	height:0px;
	visibility:hidden;
	content:".";
}
#nav ul {
	width:100%;
	height:70px;
	background: url("../image/navi1_bg.gif") no-repeat left top;
}
#nav ul li,
#nav ul li a {
	display:block;
	width:200px;
	height:70px;
}
#nav ul li { float:left;}
#nav ul li a { text-indent: -9999px;}
#nav ul li a:hover {background: url("../image/navi1_bg.gif") no-repeat;}
#nav ul li#nav1 a:hover { background-position:left bottom;}
#nav ul li#nav2 a:hover { background-position:-200px bottom;}
#nav ul li#nav3 a:hover { background-position:-400px bottom;}
#nav ul li#nav4 a:hover { background-position:-600px bottom;}
#nav ul li#nav5 a:hover { background-position:right bottom;}


/*====================================================================================================

  CONTENT

====================================================================================================*/

#content { clear:both; margin:50px auto; width:1000px;}
#content:after { /*float�̉���*/
	display:block;
	clear:both;
	height:0px;
	visibility:hidden;
	content:".";
}
#content #main_content{ float:right; width:730px; display:block; }
#content #side_content{ float:left; width:235px; }


/*** SIDE *************************************************************/

/* MY LIBRARY */
#side_content .m-lib{ 
	padding:100px 20px 20px;
	width:100%;
	border:4px solid #569235;
	background:url("../image/login2.jpg") no-repeat top center;
	box-sizing:border-box;
}
#side_content .m-lib {
	width:auto\9;
	color: blue\9;
}

#side_content .m-lib p.tit{ margin-bottom: 5px; font-size:180%; color:#589820;  }
#side_content .m-lib p.txt{ margin-bottom:10px; font-size: 80%; line-height:150%;}
#side_content .m-lib a.btn {
		display:block;
		width:100%;
		padding:10px;
		text-indent:-9999px;
		background: url("../image/login-boton.jpg") no-repeat center center;
		box-sizing:border-box;
		border-radius: 5px; 
		-webkit-border-radius: 5px; 
		-moz-border-radius: 5px;
}

/* BANNER */
#side_content .banner{ margin:10px 0;}
#side_content .banner p { margin-bottom:10px; width:100%;}
#side_content .banner p a {
	display:block;
	padding: 15px 20px;
	font-weight:bold;
	text-decoration:none;
	font-size:115%;
	font-weight:normal;
	color:#333;
	border:#ccc solid 1px;
}
#side_content p a:hover {
	opacity: 0.7;
	filter: alpha(opacity=70);
	-moz-opacity: 0.7;
}
#side_content .banner .bana1 a { background:url("../image/b-g1.gif") no-repeat 175px center; border-left:2px solid #569235;}
#side_content .banner .bana2 a { background:url("../image/b-b1.gif") no-repeat 193px center; border-left:2px solid #0058A6;}
#side_content .banner .bana3 a { padding:0; border:none;}

#side_content .search-s{ margin-top: 10px;} 
#side_content .search-s p{ margin-bottom: 10px;} 

#side_content .guidance { margin-top:10px;}
#side_content .gakunin { margin-top:10px;}
/*====================================================================================================

  FOOTER

====================================================================================================*/

#footer {
	clear:both;
	width:100%;
	padding:30px 0 0;
	background:#eee;
}
#footer:after { /*float�̉���*/
	display:block;
	clear:both;
	height:0px;
	visibility:hidden;
	content:".";
}

/* BANNER */
#footer .bana {
	margin:0 auto;
	width:1000px;
	background:#fff;
}
#footer .bana:after {
	display:block;
	clear:both;
	height:0px;
	visibility:hidden;
	content:".";
}
#footer .bana p,
#footer .bana p a {
	display:block;
	width:320px;
	height:113px;
}
#footer .bana p { float:left;}
#footer .bana p a {text-indent: -9999px;}
#footer .bana .ba1 { margin-left: 180px; background:url("../image/s-bana1.jpg") no-repeat center center;}
#footer .bana .ba2 { margin-right: 180px; background:url("../image/s-bana2.jpg") no-repeat center center;}
#footer .bana .ba4,
#footer .bana .ba4 a { width:100%; height:auto;}
#footer .bana .ba4 { clear:both; float:none; border-top:1px solid #eee;}
#footer .bana .ba4 a {
	padding:20px 0;
	background:url("../image/s-bana4.jpg") no-repeat center center;
}




/* ADDRESS */
#footer .add {
	margin:15px auto;
	padding:5px 0 5px 330px;
	width:1000px;
	font-size: 88%;
	box-sizing:border-box;
	background:url("../image/name.gif") no-repeat 40px center;
}

/* COPYRIGHT */
#footer p.copy {
	margin:0 auto;
	padding:10px 0;
	width:100%;
	color:#999;
	text-align:center;
	background:#FFF;
}



.sp_btn { display:none;}





/* ====================================================================================================

	スマホ化用css

==================================================================================================== */
@media only screen and (max-width:730px){
    #device { display:block;}
    #device p.pc_btn { display:none;}
    #device p.sp_btn {display:block; }
}
    
@media only screen and (max-width:700px){

    * { box-sizing:border-box!important;}
    body { min-width:375px; font-size:100%; border:none;}
    body:has(#header .sp_btn.active) { overflow-y:hidden;}
    #header { width:100%;}
    #content{ width:100%;}
    #footer { width:100%;}
    
    #wrapper { background:#FFF; border-top:none;}
    #base { width:auto; margin:0 !important;}
    
    .pc { display:none;}
    .sm { display:block;}
    
    #page { bottom:95px; }

    :is([id], [name]) { scroll-margin-top:85px;}
    
    #device p.pc_btn { display:block !important;}
    #device p.sp_btn { display:none !important;}
    
    /*====================================================================================================
		header
    ====================================================================================================*/
    #header {
        display:flex;
        flex-direction:column;

        & .head { order:1;}
        & #nav  { order:2;}
        & #main { order:3;}

        /* ========== .head ========== */
        & .head {
            display:grid;
            grid-template-columns:1fr 70px;
            padding:0;
            width:100%;
            position:fixed;
            inset:0 auto auto 0;
            border-top:solid 5px #569235;
            border-bottom:solid 1px #1666AD;
            z-index:9999;

            & :is(h1, h1 a) { width:100%; height:70px;}
            & h1 { background-color:#fff;}
            & h1 a { background-position:left 15px center; background-size:auto 65%;}
            & .sp_btn {
                display:flex;
                flex-direction:column;
                justify-content:space-between;
                align-items:center;
                padding:15px;
                color:#fff;
                font-size:12px;
                line-height:1;
                background-color:#1666AD;
            }
            & .sp_btn span { width:90%; height:2px; background-color:currentColor;}
            & .sp_btn .open { display:block;}
            & .sp_btn .close { display:none;}


            & .h_menu {
                display:grid;
                grid-template:
                    "cont cont site site link link" auto
                    "search search search search search search" auto
                    "login login login login login login" auto
                    "eng eng eng jpn jpn jpn" 1fr /
                    1fr 1fr 1fr 1fr 1fr 1fr;
                gap:8px;
                padding:30px 15px;
                position:absolute;
                inset:100% auto auto 0;
                width:100%;
                height:calc(100dvh - 75px);
                background-color:#1666AD;
                clip-path:polygon(0 0, 100% 0, 100% 0, 0 0);
                z-index:99;
            }
            & .h_menu > :is(ul, .lang) { display:contents;}
            & .h_menu .ka1      { grid-area:cont;}
            & .h_menu .ka2      { grid-area:site;}
            & .h_menu .ka3      { grid-area:link;}
            & .h_menu .search   { grid-area:search; border-radius:5px; overflow:clip;}
            & .h_menu .login    { grid-area:login;}
            & .h_menu .eng      { grid-area:eng;}
            & .h_menu .ja       { grid-area:jpn;}

            & .h_menu :is(.ka1, .ka2, .ka3) { float:none; margin:0; padding:0; background:none;}
            & .h_menu :is(.ka1, .ka2, .ka3) a {
                display:block;
                width:100%;
                height:auto;
                aspect-ratio:115/104;
                text-indent:-9999px;
                background:url() no-repeat center / contain;
                border-radius:5px;
            }
            & .h_menu .ka1 a { background-image:url(../image/sp/h_menu_contact.png);}
            & .h_menu .ka2 a { background-image:url(../image/sp/h_menu_sitemap.png);}
            & .h_menu .ka3 a { background-image:url(../image/sp/h_menu_link.png);}
            & .h_menu .login { float:none; width:100%; height:auto; border:none;}
            & .h_menu .login a {
                width:100%;
                height:auto;
                aspect-ratio:36/8;
                background:url(../image/sp/h_menu_login.png) no-repeat center / contain;
                border-radius:5px;
            }
            & .h_menu .lang p { margin:0;}
            & .h_menu .lang a { padding-block:16px; font-weight:bold;}

            /* .active */
            & .sp_btn.active span:nth-of-type(1) { rotate:45deg; width:70%; height:3px; translate:0px 7px;}
            & .sp_btn.active span:nth-of-type(2) { display:none;}
            & .sp_btn.active span:nth-of-type(3) { rotate:-45deg; width:70%; height:3px; translate:0px -7px;}
            & .sp_btn.active .open { display:none;}
            & .sp_btn.active .close { display:block;}

            & .sp_btn.active + .h_menu { clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%);}
        }

        /* ========== #nav ========== */
        & #nav {
            width:100%;
            margin-top:75px;
        
            & ul {
                display:grid;
                grid-template-columns:repeat(5, 1fr);
                align-items:center;
                gap:1px;
                height:auto;
                padding:1px;
                background:#1666AD;
            }
            & ul :is(li, li a) { width:100%; height:auto; aspect-ratio:154/140; float:none;}
            & ul li:nth-of-type(1) a { background:url(../image/sp/h_calendar.png) no-repeat center / contain;}
            & ul li:nth-of-type(2) a { background:url(../image/sp/h_guideline.png) no-repeat center / contain;}
            & ul li:nth-of-type(3) a { background:url(../image/sp/h_floormap.png) no-repeat center / contain;}
            & ul li:nth-of-type(4) a { background:url(../image/sp/h_access.png) no-repeat center / contain;}
            & ul li:nth-of-type(5) a { background:url(../image/sp/h_application.png) no-repeat center / contain;}

            & ul li:nth-of-type(1) a:hover { background-image:url(../image/sp/h_calendar_rev.png);}
            & ul li:nth-of-type(2) a:hover { background-image:url(../image/sp/h_guideline_rev.png);}
            & ul li:nth-of-type(3) a:hover { background-image:url(../image/sp/h_floormap_rev.png);}
            & ul li:nth-of-type(4) a:hover { background-image:url(../image/sp/h_access_rev.png);}
            & ul li:nth-of-type(5) a:hover { background-image:url(../image/sp/h_application_rev.png);}
        }
    }
    
    /*====================================================================================================
		footer
    ====================================================================================================*/
    #footer {
        padding-top:20px;

        & .bana { display:flex; flex-direction:column; align-items:center; width:95%;}
        & .bana :is(.ba1, .ba2) { margin:0;}

        & .add {
            width:95%;
            padding:50px 5px 5px;
            background-position:top center;
            background-size:250px auto;
            text-align:center;
        }
        & .copy {
            display:grid;
            place-items:center;
            height:56px;
            font-size:10px;
        }
    }


    /*====================================================================================================
		search
    ====================================================================================================*/
    #search {
        display:flex;
        flex-direction:column;
        padding-inline:2.5%;

        & .s_box { display:contents;}
        & .s_box :is(.sogo, .kannai) { width:100%; float:none;}
    }


	/*====================================================================================================
		#main_content
    ====================================================================================================*/
    #content #main_content {
        float:none;
		width:100%;
	}


    /*====================================================================================================
		#side_content
    ====================================================================================================*/
    #content #main_content:has(#subpage) + #side_content { margin-top:3rem; padding-top:2rem; border-top:solid 1px #ddd;}
    #content #side_content,
    #content + #side_content {
        display:grid;
        grid-template:
            "img1 img2" auto
            "img1 img3" auto
            "img1 img4" auto
            "img5 img6" auto
            "img7 img8" auto
            "img9 img10" auto
            "img11 img12" auto
            "img13 img14" auto /
            1fr 1fr;
        gap:6px 10px;
        float:none;
        width:95%;
        margin-inline:auto;
        padding-block:1rem;

        & > * { margin:0!important; width:100%;}

        & .m-lib { grid-area:img1;}
        & .guidance { grid-area:img2;}
        & .gakunin { grid-area:img3;}
        & > .bana3 { grid-area:img4;}
        & .search-s p:nth-of-type(1) { grid-area:img5;}
        & .search-s p:nth-of-type(2) { grid-area:img6;}

        & :is(.search-s, .banner) { display:contents;}
        & :is(.search-s p, .banner p) { margin:0;}
        & .banner p a { font-size:13px; padding:10px; background-position:right 10px center;}
        & .banner .bana2 a { background-size:7px auto;}
        & .banner .bana3 a { padding:0;}

        & .m-lib { padding:clamp(4.063rem, calc(-0.625rem + 20vw), 8.125rem) 10px 10px; /* viewport:375-700px  65-130px */ background-size:100% auto;}
        & .m-lib p.tit { font-size:clamp(1.125rem, calc(0.764rem + 1.538vw), 1.438rem); /* viewport:375-700px  18-23px */}
        & .m-lib .txt { font-size:clamp(0.5rem, calc(0.381rem + 0.509vw), 0.625rem); /* viewport:375-700px  8-10px */}
        & img { width:100%;}

        /* ガイダンス・GakuNinがない（下層ページ） */
        &:not(:has(.guidance, .gakunin)) {
            grid-template:
                "img1 img2" auto
                "img1 img3" auto
                "img1 img4" auto
                "img1 img5" auto
                "img6 img7" auto
                "img8 img9" auto /
                1fr 1fr;
            
            & .search-s p:nth-of-type(1) { grid-area:img2;}
            & .search-s p:nth-of-type(2) { grid-area:img3;}
            & :nth-child(1 of .bana1) { grid-area:img4;}
            & :nth-child(2 of .bana1) { grid-area:img5;}
        }
    }
    
    /*====================================================================================================
      TOP PAGE
    ====================================================================================================*/
    #toppage .box_main { width:90%; }
    
    /* SLICK */
    .slick-next { right: 10px; }
    .slick-prev { left: 10px; }
    
    /* MAINIMG */
    #toppage .mainimg {}
    #toppage .mainimg img { width:100%; max-height: 200px; object-fit: cover;}
    
    /* ABOUT  */
    #toppage .about { width: 90%; margin:10% auto auto; }
    #toppage .about .come { text-align: justify; }
    #toppage .about p.b_more a { padding: 11px 0; }
    
    /* RECRUIT */
    #toppage .recruit { margin: 50px auto; width: 90%;}
    #toppage .recruit img { object-fit: cover; object-position: 60% center; height: auto; max-height: 127px; }
    
    /* NEWS */
    #toppage .news { padding:50px 0; }
    #toppage .news h3 { margin-bottom: 50px; }
    #toppage .news .news_list { float:none; width:100%; max-height:350px; }
    #toppage .news .news_list ul { padding:10px 20px 12px; }
    #toppage .news .news_list ul li {
        float:none;
        width:100%!important;
        line-height:150%;
    }
    #toppage .news .news_list ul li:nth-child(1) { text-align:left; }
    #toppage .news .news_list ul li:nth-child(2) { width:100%; padding-left: 3%;}
    #toppage .news .news_link { float:none; width:100%; margin-top:45px; }
    #toppage .news .news_link img { width:100%; }
    
    /* LINKS  */
    
    #toppage .links .box { float:none; width:100%; padding:5px 0; display:flex;}
    #toppage .links .box+.box { margin-left:0; border-top:1px solid rgba(130, 130, 130, 0.5); }
    #toppage .links .box .photo img {width:100%; height: auto;}
    #toppage .links .box .photo,
    #toppage .links .box .caption{
        display: flex;
        flex-wrap:nowrap;
        width:50%;
        align-items: center;
        justify-content: center;
    
    }
    #toppage .links .box .caption{
        display: flex;
        flex-wrap:nowrap;
        width:50%;
        align-items: center;
        justify-content: center;
        background:url(../image/arrow_right-bl.png) no-repeat right center;
    }
    
    
    /* ACCESS / CONTACTS */
    #toppage .access { width:100%; padding:45px 0; }
    #toppage .access .map { margin-top: 45px; }
    #toppage .access .map iframe { height:160px; }
}