@charset "UTF-8";

/* **************************************************

Name: modify.responsive.css

Description: Sub CSS

Create: 2019.02.01
Update: 20xx.xx.xx

Copyright 2019 Hitachi,Ltd.

***************************************************** */


/* Common
=========================================================================================== */

@media only screen and (max-width: 579px) {
.pc01 { display: none !important; }
.sp { display: block !important; }
}

/* Common Table
=========================================================================================== */

/* Table Scroll */
@media screen and (max-width: 767px) {

	.ResponsiveTableScroll {
		overflow-x: scroll;
		margin:0 0 25px;
	}
	.ResponsiveTableScroll table.DataTableStyle2 {
		margin:0;
	}
	.ResponsiveTableScroll table.DataTableStyle2 th,
	.ResponsiveTableScroll table.DataTableStyle2 td {
		white-space:nowrap;
	}
	.Grid3 .ResponsiveTableScroll table.DataTableStyle4 ,
	.Grid3 .ResponsiveTableScroll table.DataTableStyle3 {
		width: 720px;
		margin:0;
	}
	
	.Grid4 .ResponsiveTableScroll table.DataTableStyle4 ,
	.Grid4 .ResponsiveTableScroll table.DataTableStyle3 {
		width: 965px;
		margin:0;
	}
}

/* Head
=========================================================================================== */

/* Index
=========================================================================================== */
@media screen and (min-width: 1441px) {
    #TopRenewal #BrandingImgStyle2 {
    max-width: none;
    }
}

@media screen and (max-width: 994px) {
	#BrandingImgStyle2 {
		margin: 0 -15px 15px;
		padding: 0;
	}
    #BrandingBase {
    padding-bottom: 0;
    }
    
	.ActivitiesArea ul {
    width: auto;
    padding-bottom: 50px;
    }
    .GridWide {
    background-size: auto 90%;
    }
    .TopBannerBase {
    width: 100%;
    right: 15px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    }
    #TopBannerList li {
    width: 150px;    
    }

	.BannerArea li {
	width:23.835%;
	margin: 0 1.553% 1.553% 0;
	box-sizing: border-box;
	}
	.BannerArea li:nth-of-type(4n) {
	margin-right: 0;
	}
	.BannerArea li img {
	width: 100%;
	}
	.BArea02 li {
	width:90%;
	margin: 0 1.553% 1.553% 0;
	}

}

@media screen and (max-width: 767px) {
    .TopBannerBase {    
    min-width: 290px;
    position: static;
    width: 100%;
    padding: 30px 15px 0;
    }
    
    #TopBannerList {position: static;}
    
    #TopBannerList {
    width: auto;
    margin: 0 0 0 -24px;
    }
    #TopBannerList li {
    width: 50%;
    margin: 0 0 24px 0;
    padding: 0 0 0 24px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    }
    .ActivitiesArea {
    padding-bottom: 10px;

    }
    .ActivitiesArea ul {
    padding: 20px 0;
    }
    .ActivitiesArea li {
    width: 50%;
    margin: 0 0 24px 0;
    }
    .GridWide {
    background-size: auto 100%;
    }
    
	.BannerArea li:nth-of-type(2n) {
	margin-right: 0;
	}
	.BannerArea li {
	float: left;
	width: 48%;
	margin-right: 4%;
	margin-bottom: 4%;
	}

}

@media screen and (max-width: 579px) {
    .StyleWorks .ImgBoxStyle1 .Inner {/*見出し未使用時用*/
         padding: 10px 0 10px 0; 
    }
    div.TopTopicsFrm dl.DateListStyle2 dd {margin: 0;}
}


/* Sub Page Common
=========================================================================================== */

/* Message
=========================================================================================== */

/* Overview
=========================================================================================== */
@media screen and (max-width: 767px) {
.StyleHistory .DateListStyle2 dd {
    margin: 0 0 15px 0;
}
}

/* Activities
=========================================================================================== */

/* Activities TOP
=========================================================================================== */
@media screen and (min-width: 1024px) {
    .WorksFrm .WorksTopBox {max-height: 260px;}
}
@media screen and (max-width: 994px) {
    .WorksFrm {padding-top: 100px;}
    .WColumnSet p.ImgOnlyStyle {margin-bottom: -100px;}
    .WorksFrm h2 {min-height: 93px;}
    .WorksFrm .WorksTopBox {max-height: none;min-height: 320px;}
    .WorksFrm .ListBox {padding-top: 0;min-height: 330px;}
}
@media screen and (max-width: 981px) {
    .WorksFrm h2 {min-height: 80px;}
    .WorksFrm .WorksTopBox {min-height: 350px;max-height: 400px;}
}
@media screen and (max-width: 890px) {
    .WorksFrm .WorksTopBox {min-height: 400px;max-height: 450px;}
}
@media screen and (max-width: 800px) {
    .WorksFrm .WorksTopBox {/*min-height: 510px;*/min-height: 440px;}
}
@media screen and (max-width: 782px) {
    .WorksFrm h2 {min-height: 93px;}
    .WorksFrm .WorksTopBox {/*min-height: 500px;*/min-height: 430px;}
    .WorksFrm .ListBox {padding-top: 0;min-height: 400px;}
}
@media screen and (max-width: 767px) {
    .TpsTitle01 {
    margin-bottom: 30px !important;
    }
    .WColumnSet p.ImgOnlyStyle {margin-bottom: -134px;}
    .WorksFrm {padding-top: 140px;}
    .WorksFrm .ListBox ul.LinkListStyle2 {height: auto;position: static;}
    .WorksFrm .TextStyle1 {margin: 0 0 5px;}
    .WorksFrm h2 {min-height: auto;}
    .WorksFrm .WorksTopBox {padding-bottom: 0;max-height: none;min-height:auto; height: auto;}
    .WorksFrm .ListBox {padding-top: 0;max-height: none;min-height:auto; height: auto;}
    
    .JS .Grid4 .TpsColumnSet01 .Column3.LastItem {float:left; width: 66.666666%;}
}
@media screen and (max-width: 579px) {
    .JS .Grid4 .TpsColumnSet01 .Column3.LastItem {float:none; width: 100%;}
    .JS .Grid4 .TpsColumnSet01.TpsColumn3_1 .Column1.FirstItem {float: none;}
}


/* Activities Pages
=========================================================================================== */
@media screen and (max-width: 767px) {
	.PageTitleStyleKurata {
		height: auto;
		padding: 15px 20px;
		margin: 0 -15px 10px -15px;
		font-size: 106.25%;
		line-height: 1.5;
	}
	.PageTitleStyleKurataMedhod {
		height: auto;
		padding: 15px 20px;
		line-height: 1.5;
		font-size: 106.25%;
		font-weight: normal;
		background-color: #bdefef;
		background-image: none;
		margin: 0 -15px 10px -15px;
	}
}

/* index
--------------------------------------------- */

/* Topics
=========================================================================================== */

@media screen and (max-width: 767px) {
.DateListStyle2 dd {
    margin-left: 0;
}
}


/* Special interview 
=========================================================================================== */



/* 汎用テーブル
=========================================================================================== */

/* Table スクロール */
@media screen and (max-width: 767px) {

	.ResponsiveTableScroll {
		overflow-x: scroll;
		margin:0 0 25px;
	}
	.ResponsiveTableScroll table.DataTableStyle2 {
		margin:0;
	}
	.ResponsiveTableScroll table.DataTableStyle2 th,
	.ResponsiveTableScroll table.DataTableStyle2 td {
		white-space:nowrap;
	}
	.ResponsiveTableScroll table.DataTableStyle4 {
		width: 720px;
		margin:0;
	}

}

/* 「倉田奨励金」倉田奨励金申請方法 environment / application-method
--------------------------------------------- */
@media screen and (max-width: 767px) {
	.StepKurataIcon {
		float: none;
		width: auto;
		text-align: center;
		margin-left: 0;
	}
	.StepKurataInner {
		float: none;
		width: auto;
		padding-left: 0;
	}
	.ButtonRedKurata p {
		width: auto;
		font-size: 90%;
	}
	.ButtonRedKurata p span {
		padding-right: 15px;
	}
}


/* girls
--------------------------------------------- */
@media screen and (max-width: 738px) {
	.about-contents__ttl {
		padding-bottom: 4%;
		font-size: 1.6rem;
	}
	.about-contents__ttl:before {
		width: 16.66vw;
		height: 1.6vw;
	}
	.about-contents__list {
		display: block;
		margin-top: 9vw;
	}
}
@media screen and (min-width: 739px) {
	.about-contents__item:hover {
		opacity: 0.9;
	}
}
@media screen and (max-width: 738px) {
	.about-contents__item {
		width: 100%;
		margin-top: 6.4%;
	}
	.about-contents__item:first-of-type {
		margin-top: 0;
	}
	.about-contents__link {
		padding: 4.9% 4% 12.6%;
	}
	.about-contents__item-ttl {
		/*font-size: 5vw;*/
		font-size: 1.5rem;
	}
	.about-contents__img {
		width: 17.4%;
		margin-top: 4%;
	}
	.about-contents__txt {
		margin-top: 4vw;
		font-size: 1.4rem;
	}
}

/* innovator
--------------------------------------------- */
@media screen and (max-width: 994px) {

    .InnFrm01 dl .htAdjust {margin-bottom: 0px;}
/*
.InnFrm01 dl dt:first-child + dd {width:28%;margin-right: 5px }
*/
    .InnSetBox01 div.InnTextBox01 {
    width: 50%;
    }
    .InnSetBox01 div.InnImgBox01 {
    width: 48%;
    }
}


	@media screen and (max-width: 767px) {
    .InnFrm01 dl .htAdjust {margin-bottom: 10px;}
    
    .InnFrm01 dl dt:first-child + dd {/*margin-right: 0;margin-bottom: 12px;width:auto;*/}
    .InnFrm01 dl dd {width:auto;float: none;padding-top: 10px; }
        
    .InnSetBox01 div.InnTextBox01 {
    width: 100%;
    float:none;
    }
    .InnSetBox01 div.InnImgBox01 {
    float: none;
    width: 100%;
    }
    .InnSetBox01 div.InnImgBox01 img {
    width: 270px;
    }
}

	@media screen and (max-width: 579px) {
    .InnFrm01 dl dd {padding-top: 3px; }

}

/* Asia Innovation Award
--------------------------------------------- */
@media screen and (min-width: 995px) and (max-width: 1304px){
	.AWTitFrame01 img {
		max-width: none!important;
	}
}
@media screen and (max-width: 1304px) {
	ul.AWImglist01 li {
    	width: 49%;
    }
	ul.AWImglist02 li {
    	width: 28%;
    }
	
	span.AWAline05 {display: inline-block;min-height: 355px;}
	span.AWAline09 {display: inline-block;min-height: 450px;}
	span.AWAline11 {display: inline-block;min-height: 935px;} 
	span.AWAline13 {display: inline-block;min-height: 450px;}
	span.AWAline14 {display: inline-block;min-height: 490px;}
	span.AWAline15 {display: inline-block;min-height: 685px;} 
	span.AWAline16 {display: inline-block;min-height: 575px;}
	span.AWAline17 {display: inline-block;min-height: 1260px;}
    
    span.AWAline18 {display: inline-block;min-height: 915px;}
    span.AWAline19 {display: inline-block;min-height: 640px;}
    span.AWAline20 {display: inline-block;min-height: 482px;}
    span.AWAline21 {display: inline-block;min-height: 425px;}
}

@media screen and (max-width: 1280px) {
    span.AWAline18 {display: inline-block;min-height: 680px;}
    span.AWAline19 {display: inline-block;min-height: 468px;}
    span.AWAline20 {display: inline-block;min-height: 402px;}
    span.AWAline21 {display: inline-block;min-height: 320px;}	
}
@media screen and (max-width: 1279px) {
    span.AWAline18 {display: inline-block;min-height: 915px;}
    span.AWAline19 {display: inline-block;min-height: 574px;}
    span.AWAline20 {display: inline-block;min-height: 482px;}
    span.AWAline21 {display: inline-block;min-height: 425px;}
}

@media screen and (max-width: 994px) {
    .AWSet02 .AWTitle {width: 70%;padding: 0 10px; }
    .AWSet02 .AWToro {width: 20%; vertical-align: middle;}
    .AWSet02 .AWSDGsIc {width: 10%; }

    ul.AWImglist01 li {
    width: 49%;
    }
    ul.AWImglist02 li {
    width: 28%;
    }
    .AWOnlyImg img {width: 100%;}

    div.AWColumnSet.ColumnSet .Column2.LastItem {padding: 0;}
    table.AWSet.DataTableStyle5 th {
    width: 15%;
    }
    table.AWSet02.DataTableStyle5 th {
    width: 20%;
    }
    table.DataTableStyle1.AWjevaTb th {width: auto;}
    
    span.AWAline04 {display: inline-block;min-height: 460px;}
    span.AWAline06 {display: inline-block;min-height: 440px;}
    span.AWAline07 {display: inline-block;min-height: 370px;}
    
    span.AWAline08 {display: inline-block;min-height: 470px;}
	span.AWAline10 {display: inline-block;min-height: 490px;}
	span.AWAline17 {display: inline-block;min-height: 1215px;}
    
    span.AWAline18 {display: inline-block;min-height: 1150px;}
    span.AWAline19 {display: inline-block;min-height: 790px;}
    span.AWAline20 {display: inline-block;min-height: 623px;}
    span.AWAline21 {display: inline-block;min-height: 555px;}


    .JS .AWTb01 table th,
    .JS .AWTb01 table td {word-break: break-all;}
    
    /* for IE11 */
    div.AWColumnSet.ColumnSet .Column2 {width: 50%;}
    
}

@media screen and (max-width: 820px) {
    span.AWAline12 {display: inline-block;min-height: 540px;}
    span.AWAline13 {display: inline-block;min-height: 410px;}
    span.AWAline14 {display: inline-block;min-height: 306px;}
    span.AWAline15 {display: inline-block;min-height: 636px;} 
    span.AWAline16 {display: inline-block;min-height: 620px;} 
}

@media screen and (max-width: 768px) {
	span.AWAline05 {display: inline-block;min-height: 455px;}
	span.AWAline09 {display: inline-block;min-height: 600px;}
	span.AWAline11 {display: inline-block;min-height: 1235px;} 
    span.AWAline12 {display: inline-block;min-height: 630px;}
    span.AWAline13 {display: inline-block;min-height: 575px;}
    span.AWAline14 {display: inline-block;min-height: 660px;}
    span.AWAline15 {display: inline-block;min-height: 835px;} 
    span.AWAline16 {display: inline-block;min-height: 770px;} 
	span.AWAline17 {display: inline-block;min-height: 1370px;}
}

@media screen and (max-width: 579px) {
	span.AWAline17 {display: inline-block;min-height: auto;}
}


@media screen and (max-width: 767px) {
    .AWTitle { padding: 0 20px;text-align: left;width: 100%;}

    table.AWSet02 .AWTitle {max-width: none;width: 70%;padding:  0 20px;font-size: 130%;}
    .AWAline01 {height: auto;}

    .JS .AWTb01 table {
        display: block;
        width: 100%\9;			/* for IE9 */
        border-left: solid 1px #939393;
        border-right: solid 1px #939393;
        border-bottom: solid 1px #939393;
        box-sizing: border-box\9;	/* for IE9 */
    }

    .JS .AWTb01 tbody,
    .JS .AWTb01 tr {display: block;}
    .JS .AWTb01 tr:first-child {display: none;}

    .JS .AWTb01 th,
    .JS .AWTb01 td {
        float: left\9;			/* for IE9 */
        clear: both\9;			/* for IE9 */
        display: block;
        width: auto;
        width: 100%\9;			/* for IE9 */
        padding: 10px 15px;
/*        font-size: 83%;*/
        overflow: hidden;
        border: 0 none;
        border-top: solid 1px #939393;
        box-sizing: border-box\9;	/* for IE9 */
    }
    .JS .AWTb01 th {
        color: #000;
/*        font-size: 90%;*/
        font-weight: bold;
    }

    .JS .AWTb01 .ResponsiveTableHeading {
        display: block;
        margin-bottom: 5px;
        color: #000;
/*        font-size: 105%;*/
        font-weight: bold;
    }

    table.AWTb01 colgroup col {width: auto;}
    table.AWTb01 th {font-weight: bold;}

    ul.AWImglist01 li,
    ul.AWImglist02 li {width: 100%; margin-left:0;margin-right:0;}
    ul.AWImglist01 li img,
    ul.AWImglist02 li img {width: 100%;}

    table.AWSet.DataTableStyle5 th,
    table.AWSet02.DataTableStyle5 th {
    width: 20%;
    }
    table.DataTableStyle1.AWjevaTb th {width: auto;}

    div.AWColumnTop {text-align: left;}
    .AWnoWp {white-space: normal;}
    /*
    td.AWAline01 {border-top: none;}
    div.AWColumnTop {border-bottom: none;}*/

    table.AWSet02.DataTableStyle5 {margin-bottom: 20px;}
    .AWColumnSet .Column2.LastItem {padding: 0 0 0 15px;}

    span.AWAline04 {min-height: auto;padding-bottom: 10px;}
    span.AWAline05 {min-height: auto;padding-bottom: 10px;}
    span.AWAline06 {min-height: auto;padding-bottom: 10px;}
    span.AWAline07 {min-height: auto;padding-bottom: 10px;}
    
    span.AWAline08 {min-height: auto;padding-bottom: 10px;}
    span.AWAline09 {min-height: auto;padding-bottom: 10px;}
    span.AWAline10 {min-height: auto;padding-bottom: 10px;}
    span.AWAline11 {min-height: auto;padding-bottom: 10px;}
    
    span.AWAline12 {min-height: auto;padding-bottom: 10px;}
    span.AWAline13 {min-height: auto;padding-bottom: 10px;}
    span.AWAline14 {min-height: auto;padding-bottom: 10px;}
    span.AWAline15 {min-height: auto;padding-bottom: 10px;}    
    span.AWAline16 {min-height: auto;padding-bottom: 10px;}
    
    span.AWAline18 {min-height: auto;padding-bottom: 10px;}
    span.AWAline19 {min-height: auto;padding-bottom: 10px;}
    span.AWAline20 {min-height: auto;padding-bottom: 10px;}
    span.AWAline21 {min-height: auto;padding-bottom: 10px;}
        
    
    /*  for IE11 */
    div.AWColumnSet.ColumnSet .Column2 {float: none;width: 100%;}
    div.AWColumnSet.ColumnSet .Column2.LastItem {padding-left: 15px;}
    
    
    .AWAline_plus {
    height: auto;
    }
    
     ul.AWImglist01 li.vtImg04 img {max-height: auto;max-height: initial; width: 100%;}
    
}

@media screen and (max-width: 579px) {
.DateListStyle2.ContAwardList01 dd {
	margin-left: 0;
	}
.h2MidTxt {float: none;margin-left: 0;line-height: 1.0;}
}

@media screen and (max-width: 320px) {
.AWSet th {word-break: break-all;}
}

/* topics */
@media screen and (max-width: 994px) {
  Table.tps087TB td:nth-child(3) {min-width: auto;white-space: normal;}
  Table.tps087TB td:nth-child(4) {width:auto;}
}
@media screen and (max-width: 767px) {
  Table.tps087TB td:nth-child(4) {}
}


/* News Letter
--------------------------------------------- */
@media screen and (max-width: 994px) {

}
@media screen and (max-width: 767px) {
    .textAreaRight { float: none; width: auto; }

/*追加css*/
.ActivitiesArea li.icListbox p.icImg {
    position: absolute;
    width: 45px;
    height: 45px;
    bottom: 0;
    left: 24px;
}
.ActivitiesArea li.icListbox p.icImg.fb {
    position: absolute;
    width: 45px;
    height: 45px;
    bottom: 0;
    left: 85px;
} 
}

/* Adjust
--------------------------------------------- */
@media screen and (max-width: 994px){
	.AdjustSDGsmb30 {margin-bottom:60px !important;}
}
@media screen and (max-width: 767px){
	.AdjustSDGsmb30 {margin-bottom:10px !important;}
}