img {width: 100%;}
body {background: #e5ecf2;}
#header {margin: 0 0 3em;}
#header > .header_wrap {
width: 100%;
padding: 35px 0;
background: #FFF;
/*background: url("/liaison/seeds/img/top-bg.jpg") no-repeat top right;
background-size: auto 100%;*/
}
#header > .header_wrap > .header_sp {
width: 80%;
margin: 0 10%;
padding: 35px 5%;
background: url("/liaison/seeds/img/wt_80.png") repeat;
}
#header > .header_wrap > .header_sp > h2 {
display: block;
width: 50%;
margin: 0 25% 1em;
}
#header > .header_wrap > .header_sp > h1 {
font-family: 'A-OTF-A1MinchoStd-Bold';
margin: 0 0 1em;
letter-spacing: 0.3em;
text-align: center;
font-size: 2em;
}
#header > .header_wrap > .header_sp > h1::after {
content: "";
display: block;
position: relative;
width: 35%;
height: 7px;
margin: 0.5em 32.5% 0;
background: url("/liaison/seeds/img/line_dot.png") no-repeat center top;
background-size: auto 7px;
}
#header > .header_wrap > .header_sp > h3 {
/*font-family: 'font_1_honokamin';*/
font-family: 'A-OTF-A1MinchoStd-Bold';
text-align: center;
font-size: 0.9em;
}
#header > .header_wrap > .header_sp > a {
display: block;
position: relative;
width: 70%;
margin: 1em 15% 0;
padding: 0.5em 0;
text-decoration: none;
color: #FFF;
overflow: hidden;
text-align: center;
background: #1379d0;
border-radius: 3px;
}
#header > .header_wrap > .header_sp > a > span {
position: relative;
z-index: 100;
}
#header > .header_wrap > .header_sp > a::before {
content: "";
display: block;
position: absolute;
width: 100%;
height: 100%;
background: #1571b2;
top: 0;
left:-100%;
z-index: 10;
transition: all .2s;
}
#header > .header_wrap > .header_sp > a:hover::before {
left: 0;
}


ul.attention > li {
display: block;
margin: 0 0 2em;
background: #FFF;
}
ul.attention > li > figure > div {
height: 200px;
overflow: hidden;
}
ul.attention > li > figure > figcaption {
padding: 2em 5%;
}
ul.attention > li > figure > figcaption > .course {
margin: 0 0 0.5em;
color: #1379d0;
font-size: 0.9em;
}
ul.attention > li > figure > figcaption > h4 {
/*font-family: 'A-OTF-A1MinchoStd-Bold';*/
margin: 0 0 1em;
font-size: 1.3em;
line-height: 1.4;
}
ul.attention > li > figure > figcaption > .researcher {
font-weight: bold;
}
ul.attention > li > figure > figcaption > .keyword {
position: relative;
margin: 1.5em 0;
padding: 30px 0 0 0;
color: #888888;
}
ul.attention > li > figure > figcaption > .keyword::before {
content: "keyword";
position:absolute;
display: block;
width: 20%;
padding: 0 1em 0 0;
background: #FFF;
top: 0;
z-index: 100;
}
ul.attention > li > figure > figcaption > .keyword::after {
content: "";
position:absolute;
display: block;
width: 100%;
height: 1px;
border-top: #888888 solid 1px;
top: 13px;
z-index: 50;
}
ul.attention > li > figure > figcaption > a {
display: block;
position: relative;
width: 80%;
margin: 0 10%;
padding: 1em 0;
text-decoration: none;
background: #3690cf;
color: #FFF;
text-align: center;
overflow: hidden;
border-radius: 3px;
}
ul.attention > li > figure > figcaption > a > span {
position: relative;
z-index: 100;
}
ul.attention > li > figure > figcaption > a::before {
content: "";
display: block;
position: absolute;
width: 100%;
height: 100%;
background: #1571b2;
top: 0;
left:-100%;
z-index: 10;
transition: all .2s;
}
ul.attention > li > figure > figcaption > a:hover::before {
left: 0;
}

/*-------------------------------------------------------------------------------------------------------------- 768 ---*/
@media print, screen and (min-width:768px){
.br-tb {display: none}
#header > .header_wrap {
/*background: url("/liaison/seeds/img/top-bg.jpg") no-repeat top right;
background-size: 100% auto;*/
}
#header > .header_wrap > .header_sp {
width: 70%;
margin: 0 15%;
padding: 40px 5%;
}
#header > .header_wrap > .header_sp > h2 {
width: 40%;
margin: 0 30% 1em;
}
#header > .header_wrap > .header_sp > a {
width: 55%;
margin: 1em 22.5% 0;
}

ul.attention > li > figure > figcaption {
padding: 2em 5%;
}
ul.attention > li > figure > div {
height: 250px;
}




}
/*-------------------------------------------------------------------------------------------------------------- 1024 ---*/
@media print, screen and (min-width:1024px){
.br-sp {display: none}
#header {margin: 0 0 120px;}
#header > .header_wrap {
width: 100%;
padding:0;
/*background: url("/liaison/seeds/img/top-bg.jpg") no-repeat center right;
background-size: 100% auto;*/
}
#header > .header_wrap::after {content:'';display:table;clear:both;}
#header > .header_wrap > .header_sp {
width: 50%;
max-width: 660px;
margin: 0 auto;
padding: 50px 0;
background: #FFF url("/liaison/seeds/img/wt_80.png") repeat;
}
/*#header > .header_wrap > .header_sp {
width: 50%;
max-width: 660px;
margin: 0;
float: left;
padding: 100px 5%;
background: #FFF url("/liaison/seeds/img/wt_80.png") repeat;
}*/
#header > .header_wrap > .header_sp > h2 {
max-width: 200px;
margin: 0 auto 1em;
}
#header > .header_wrap > .header_sp > h1 {
font-size: 2.5em;
}
#header > .header_wrap > .header_sp > a {
width: 300px;
margin: 2em auto;
}

ul.attention {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 0 0 2em;
}
ul.attention > li {
width: 32.5%;
}
ul.attention > li > figure > div {
position: relative;
height: 200px;
overflow: hidden;
}
ul.attention > li > figure > div > img {
position: absolute;
width: 130%;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
ul.attention > li > figure > figcaption {
padding: 2em 5%;
}
ul.attention > li > figure > figcaption > a {
width: 100%;
margin: 0;
padding: 0.8em 0;
}





}

/*-------------------------------------------------------------------------------------------------------------- 1300 ---*/
@media print, screen and (min-width:1300px){
#header > .header_wrap > .header_sp {
padding: 50px 0;
}

ul.attention > li {
width: 31%;
}
ul.attention > li > figure > figcaption {
padding: 2em 10%;
}









}