@charset "utf-8";

/*
Theme Name: Cybernics
Description: style.css
style.css
Author: Gokan Soichiro
*/

*{-webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
       -o-box-sizing: border-box;
      -ms-box-sizing: border-box;
          box-sizing: border-box;
}
html {
	 font-size: 62.5%;
	 -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -o-text-size-adjust: 100%;
    text-size-adjust: 100%;
}
body {
	font-family:"Noto Sans Japanese","ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;	
	font-weight: 200;
  position: relative;
  line-height: 2;
  font-size: 1.6rem;
  margin: 0;
  letter-spacing: 0.123em
}

html,body { height: 100%}
img {
	border: 0px;
	vertical-align: top;
	line-height: 0px;
}
ul,li,dl,dt,dd,p,h1,h2,h3,h4 { margin: 0; padding: 0}
ul,li {	list-style-type: none}

h2 { margin-bottom: 50px; text-align: left; font-weight: normal}

a { 
	color:#333; cursor:pointer;
	-webkit-transition: all 0.3s linear;
	transition: all 0.3s linear;
}

a:visited { color: inherit; cursor: pointer}
a:hover { cursor:pointer}
#wrapper { height:100%}
a img {
	-webkit-transition: all 0.2s linear;
	transition: all 0.2s linear;
}
a:hover img { 
	opacity: 0.7;
	filter: alpha(opacity=70);
	-webkit-transition: all 0.2s linear;
	transition: all 0.2s linear;
}
a, a.btn {
  text-decoration: none;
  -webkit-transition: all 0.3s linear;
  transition: all 0.3s linear;
}
article { padding: 100px 5%}
section { margin: 0; width: 100%}
.wrap{
    position: relative;
    z-index: 10;
}
h2 { font-size: 3.8rem}
h2 span { font-size: 2.4rem; vertical-align: top; display: inline-block; padding: 13px 15px}
.container { max-width: 960px; width: 100%; margin: 0 auto}

a.btn-1 { background: #000; color: #fff; font-size: 2.4rem; border-radius: 40px; line-height: 80px; display: block; text-align: center; letter-spacing: 2px; width: 100%; max-width: 640px}
a.btn-1:hover { background: #666;}


@media screen and (min-width: 751px){
.comment { width: 740px; text-align: left; margin: 0 auto 3em; font-size: 1.4rem;}
.visible-xs { display: none!important}
}
@media screen and (max-width: 750px){
.comment { width: 100%; text-align: left; margin: 0 auto 3em; font-size: 1.4rem}
.hidden-xs { display: none!important}
a.btn-1 { font-size: 1.6rem}
body { font-size: 1.4rem}
}

.flex {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -moz-flex;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-pack: justify;
  -ms-flex-wrap: wrap;
}



/*------------------------------------------------

	ヘッダー　header

------------------------------------------------*/
.home header { padding: 0 5%; position: relative; background: url(../images/home/mv.jpg) no-repeat 50%; background-size: cover; -webkit-background-size: cover}
.header-logo { position: absolute; top: 38px; left: 43px; width: 230px}
.header-logo img { width: 100%; height: auto}
header img { width: 100%; height: auto}
#catch { max-width: 920px; margin: 0 auto}
#catch img { max-width: 920px; margin-top: 210px}
.catch-logo { width: 120px; position: absolute; bottom: 154px; left: 50%; margin-left: -60px}
.catch-logo img { max-width: 120px}
.catch-arrow { width: 92px; position: absolute; bottom: 30px; left: 50%; margin-left: -46px}
.catch-arrow img { max-width: 92px}
header .language { position: absolute; font-size: 1.4rem; letter-spacing: 1px}
header .language li:first-child { border-bottom: solid 1px #000}
header .language li a { font-size: 1.4rem; letter-spacing: 1px}
header .language li a:hover { color: #BF9D5A}
header .language-open,
header .language-open a { color: #fff; letter-spacing: 1px}
header .language-open a:hover { color: #BF9D5A}
header .language-open li:first-child { border-bottom: solid 1px #fff; margin-bottom: 3px}
@media screen and (min-width: 751px){
	header .language-close { top: 28px; right: 135px}
	.en header .language-open { top: 28px; left: 60px; font-size: 1.2rem}
}
@media screen and (max-width: 750px){
	.header-logo { top: 10px; left: 10px; width: 130px}
	header .language-close { top: 5px; right: 70px; font-size: 1.2rem; z-index: 800}
	header .language-open { top: 5px; left: 60px; font-size: 1.2rem}
	header .language-open li:first-child { padding-bottom: 3px}
	header .language li a { font-size: 1.2rem; line-height: 1.7}
	#catch img { margin-top: 120px}
	.catch-logo { width: 70px; bottom: 100px; margin-left: -35px}
	.catch-arrow { width: 46px; margin-left: -23px}
}
@media screen and (max-width: 320px){
	header .language-close { top: 4px; right: 60px}
}

.fadeInDown {
 -webkit-animation-fill-mode:both;
 -ms-animation-fill-mode:both;
 animation-fill-mode:both;
 -webkit-animation-duration:1s;
 -ms-animation-duration:1s;
 animation-duration:1s;
 -webkit-animation-name: fadeInDown;
 animation-name: fadeInDown;
 visibility: visible !important;
}
@-webkit-keyframes fadeInDown {
 0% { opacity: 0; -webkit-transform: translateY(20px); }
 100% { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes fadeInDown {
 0% { opacity: 0; -webkit-transform: translateY(20px); -ms-transform: translateY(20px); transform: translateY(20px); }
 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}


/*------------------------------------------------

	新着情報  #news

------------------------------------------------*/
#news { background: #000; padding: 33px 5% 30px}
#news section { width: 100%; max-width: 860px; margin: 0 auto; position: relative}
#news .ttl { color: #fff; margin-bottom: 20px; padding-top: 2px; font-size: 1.4rem; letter-spacing: 1px}
#news .ttl img { width: 50px; height: auto}
#news .news-link a { font-size: 1.3rem; padding: 2px 30px 0 0; background: url(../images/home/arrow-right.png) no-repeat 100% 50%; background-size: 20px auto; -webkit-background-size: 20px auto; border-bottom: solid 1px #000}
#news .news-link a:hover { border-bottom: solid 1px #fff}
#news .entry { padding: 15px; color: #fff; position: relative}
#news .date { font-size: 1.1rem}
#news .entry-title { font-size: 1.6rem; margin-bottom: 5px}
#news .entry-body { overflow: hidden}
#news .entry-body .figure { margin: 5px 0 10px; height: 126px; overflow: hidden}
#news .entry-body .figure img { width: 100%; height: auto}
#news .entry-body p { font-size: 1.3rem} 
#news a { color: #fff}
@media screen and (min-width: 751px){
	#news .news-link-top { position: absolute; top: -10px; right: 0}
	#news .entry { width: 33.333%; border-left: solid 1px #fff}
	#news .entry:nth-child(3) { border-right: solid 1px #fff}
}
@media screen and (max-width: 750px){
	#news section { padding-bottom: 40px}
	#news .ttl { text-align: center; font-size: 16px}
	#news .news-link-top { position: absolute; top: 14px; right: 0}
	#news .news-link-bottom { position: absolute; bottom: 0; right: 0}
	#news .entry { width: 100%;}
	#news .entry:nth-child(2) { margin: 2% 0; border: solid 1px #fff; border-width: 1px 0}
	#news .entry-body p { font-size: 1.5rem}
}
#news .entry a {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  cursor:pointer!important;
}
#news .entry a:hover { background: rgba(255,255,255,0.3); cursor:pointer!important}


/*------------------------------------------------

	下層共通

------------------------------------------------*/
.page h2 { margin-bottom: 100px}
.page-title h2 { max-width: 960px; margin: 0 auto 100px; font-weight: normal}
.page h3 { font-size: 2.2rem; text-align: left; padding-left: 20px; margin-bottom: 40px; font-weight:normal}
.page .container { text-align: left; margin-bottom: 100px}
.page #mv { text-align: right}
.page #mv img { width: 100%; max-width: 1300px; height: auto}
@media screen and (max-width: 750px){
	.page-title h2 { font-size: 2.6rem}
	.page .container { padding: 0 4% 0}
	.page #mv { width: 90%; margin-left: auto}
	.en .page-title { padding: 50px 10% 0}
}


/*------------------------------------------------

	01 センター紹介

------------------------------------------------*/
.introduction .about-1 h2 { max-width: 960px; margin: 0 auto 100px; font-weight: normal}
.introduction .about-1 .flex { max-width: 1150px; margin: 0 auto}
.introduction .about-1 .flex div:first-child { width: 30%}
.introduction .about-1 .flex div:last-child { width: 70%}
.introduction .about-1 .flex div img { width: 100%; height: auto}
.introduction .about-1 .flex div:first-child img { max-width: 312px}
.introduction .about-1 .flex div:last-child img { max-width: 774px}
.introduction h3 { padding: 0; margin: 0 0 10px 0}
.introduction .about-2 { position: relative; color: #fff; background: linear-gradient(90deg, #bab0a4 50%, #fff 50%)}
.introduction .about-2 .container { padding: 45px 50px 45px 40px; background: #bab0a4}
.introduction .about-2 .figure { position: absolute; top: -155px; right: 3%}
.introduction .about-3 h2 { max-width: 960px; margin: 0 auto 40px; padding-left: 40px}
.introduction .about-3 h2 img { width: 390px}
.introduction .about-3 h2 + div { color: #fff; background: linear-gradient(90deg, #fff 50%, #95938f 50%)}
.introduction .about-3 .container { position: relative; padding: 40px; background: #95938f}
.introduction .about-3 .figure img { width: 100%; height: auto}
.introduction .about-3 .figure { max-width: 540px}
.introduction .about-4 h2 { margin-bottom: 0}
.introduction .about-4 .figure { width: 100%; max-width: 890px; height: auto}
.introduction .about-4 .container { padding: 40px}
.introduction .name+p { margin-bottom: 1.5em}
.introduction .about-5 { color: #fff; background: linear-gradient(90deg, #fff 50%, #000 50%)}
.introduction .about-5 .container { position: relative; background: #000}
.introduction .about-5 .figure { text-align: right}
.introduction .about-5 .face { box-shadow:2px 2px 10px 3px rgba(0,0,0,0.3); margin-bottom: 30px}
.introduction .about-5 .name { font-size: 2.4rem}
.introduction .about-6 { color: #fff; background: linear-gradient(90deg, #000 50%, #fff 50%)}
.introduction .about-6 .container { position: relative; background: #000}
.introduction .about-6 .figure { text-align: center}
.introduction .about-6 .face { box-shadow:2px 2px 10px 3px rgba(0,0,0,0.3); margin-bottom: 40px}
.introduction .about-6 .sign { width: 160px; height: auto}
.introduction .about-6 .name { font-size: 2.4rem}
.introduction .about-7 { padding-bottom: 0}
.introduction .about-7 .container { margin-bottom: 0}
.introduction .about-7 .container img { width: 100%; height: auto}
.introduction .about-7 h2 { text-align: center; font-size: 3.4rem; font-weight: normal}
ul.accordion > li > p span i { font-style: normal}
.introduction .profile ul li { font-size:1.6rem; letter-spacing: .06em}
.introduction .accordion ul li p { margin-bottom: 1.2em}
.introduction .profile ul li p span { margin: 0!important;padding: 0!important;display: inline!important}
.introduction .profile ul li p .span-1 { letter-spacing: .2em}
.introduction .profile ul li p .span-2 { letter-spacing: .05em}
@media screen and (min-width: 751px){
	.introduction .about-3 .figure { width: 340px; position: absolute; top: -50px; right: 0; box-shadow:2px 2px 10px 3px rgba(0,0,0,0.3)}
	.introduction .about-3 .summary { max-width: 530px}
	.introduction .about-4 { background: linear-gradient(90deg, #bab0a4 55%, #fff 45%)}
	.introduction .about-5 { margin-top: 300px}
	.introduction .about-5 h2 { position: absolute; top: -180px; left: 40px; color: #000}
	.introduction .about-5 .container { padding: 40px 40px 40px 400px}
	.introduction .about-5 .nameEn { position: absolute; top: -40px; left: 400px; color: #000}
	.introduction .about-5 .figure { position: absolute; top: -50px; left: -50px; width: 400px}
	.introduction .about-6 { margin-top: 300px}
	.introduction .about-6 h2 { position: absolute; top: -100px; left: 40px; color: #000}
	.introduction .about-6 .container { padding: 40px 360px 40px 40px}
	.introduction .about-6 .nameEn { position: absolute; top: -40px; right: 400px; color: #000}
	.introduction .about-6 .figure { position: absolute; top: -50px; right: -50px; width: 400px}
	.introduction .accordion p { pointer-events: none; color: #fff}
	.introduction .profile li { font-size: 1.5rem; letter-spacing: 1px}
}
@media screen and (max-width: 750px){
	.introduction h2 { font-size: 2.6rem}
	.introduction .about-1 { padding-top: 50px}
	.introduction .about-1 h2 { margin-bottom: 30px}
	.introduction .about-1 .flex div:first-child { text-align: center; width: 100%; margin-bottom: 40px}
	.introduction .about-1 .flex div:last-child { text-align: center; width: 100%}
	.introduction .about-1 .flex div:first-child img { max-width: 200px}
	.introduction .about-2 h3 img { max-width: 161px; height: auto}
	.introduction .about-3 h2 img { width: 100%; max-width: 200px; height: auto}
	.introduction .about-3 .figure { margin-bottom: 30px}
	.introduction .about-4 .container { padding: 0 10%}
	.introduction .about-4 .figure img { width: 100%; height: auto}
	.introduction .about-4 h2 img { max-width: 57px; height: auto}
	.introduction .about-5 h2 img { max-width: 118px; height: auto}
	.introduction .about-6 h2 img { max-width: 146px; height: auto}
	.introduction .about-5 h2,
	.introduction .about-6 h2 { position: absolute; top: 30px; left: 20px; color: #fff}
	.introduction .about-5 .container,
	.introduction .about-6 .container { padding-top: 170px}
	.introduction .about-5 .nameEn,
	.introduction .about-6 .nameEn { position: absolute; top: 100px; right: 40px; color: #fff}
	.introduction .about-5 .figure,
	.introduction .about-6 .figure { width: 100%; position: relative; text-align: center}
	.introduction .about-5 .face,
	.introduction .about-6 .face { width: 60%; height: auto}
	.introduction .about-5 .sign { width: 45%; height: auto; position: absolute; bottom: -50px; right: 0}
	.introduction .about-6 .sign { position: absolute; bottom: -50px; right: 0; width: 30%; height: auto}
	.introduction .about-7 { padding-top: 0;}
	.introduction .about-7 h2 { font-size: 2.6rem; text-align: left; line-height: 1.4; margin-bottom: 50px}
	.introduction .about-7 img { width: 100%; height: auto}
	.introduction .child-acdn { display: none}
	ul.accordion > li > p span i { border-bottom: solid 1px #fff; padding-bottom: 2px}
	ul.accordion > li > p span.open i { border-bottom: solid 1px #bf9d5a; padding-bottom: 2px}
	
	.introduction .about-1 h2 img { max-width: 207px; height: auto}
	.en.introduction article { padding: 0 5%}
	.en.introduction .about-1 { padding: 50px 5% 100px}
	.introduction .about-1 h2 { padding-left: 5%}
	.en.introduction .about-4 h2 { margin-bottom: 20px}
	.en.introduction .about-2 h2 img { max-width: 151px; height: auto}
	.en.introduction .about-3 h2 img { max-width: 290px; height: auto}
	.en.introduction .about-4 h2 img { max-width: 110px; height: auto}
	.en.introduction .about-5 h2 img { max-width: 287px; height: auto}
	.en.introduction .about-6 h2 img { max-width: 161px; height: auto}
	.en.introduction .about-5 .sign { bottom: -25px}
	.en.introduction .about-5 .figure { margin-bottom: 50px}
	.en.introduction .about-5 .container,
	.en.introduction .about-6 .container { padding:  140px 40px 0}
	.en.introduction .about-5 h2,
	.en.introduction .about-6 h2 { left: 40px}
}





/*------------------------------------------------

	02 研究成果

------------------------------------------------*/
.achievement h2 { max-width: 960px; margin: 0 auto 100px; font-weight: normal}
.achievement .category-container section { position: relative}
.achievement .category-container .container { padding: 60px 0 60px 170px; max-width: 980px; overflow: hidden}
.achievement .category-container small { display: block; font-size: 1.2rem}
.achievement .category-container h3 { font-size: 4rem; line-height: 1.5; font-weight: normal; padding: 0; margin-bottom: 30px}
.achievement .category-container h4 { font-size: 2.6rem; font-weight: normal; line-height: 1.4}
.achievement .category-container .icon-new { text-indent: 100%; overflow: hidden; white-space: nowrap; display: block; width: 90px; height: 34px; margin-bottom: 20px}
.achievement .category-container .figure { max-width: 380px; max-height: 250px; overflow: hidden; border-radius: 20px; border: solid 3px #fff}
.achievement .category-container .figure img { width: 100%; height: auto}
.achievement .category-container section:nth-child(odd) { color: #fff; background: linear-gradient(90deg, #fff 50%, #000 50%)}
.achievement .category-container section:nth-child(odd) h3,
.achievement .category-container section:nth-child(odd) .container { background: #000}
.achievement .category-container section:nth-child(odd) .icon-new { background: url(../images/achievement/icon-new-1.png) no-repeat}
.achievement .category-container section:nth-child(even) { background: linear-gradient(90deg, #fff 50%, #BAB0A3 50%)}
.achievement .category-container section:nth-child(even) .container { background: #BAB0A3}
.achievement .category-container section:nth-child(even) .icon-new { background: url(../images/achievement/icon-new-2.png) no-repeat}
.achievement .link-archive a { font-weight: bold; font-size: 1.3rem; padding: 2px 30px 0 0}
.achievement .category-container section:nth-child(odd) a { color: #fff}
.achievement .category-container section:nth-child(odd) .link-archive a { background: url(../images/common/arrow-white.png) no-repeat 100% 50%; background-size: 20px auto; -webkit-background-size: 20px auto}
.achievement .category-container section:nth-child(even) .link-archive a { background: url(../images/common/arrow-black.png) no-repeat 100% 50%; background-size: 20px auto; -webkit-background-size: 20px auto}
.achievement .ibf { padding-bottom: 0}
.achievement .ibf h2 + p { max-width: 380px}
.achievement .ibf .container { overflow: hidden}
.achievement .ibf .figure { float: right}
.achievement .society,
.achievement .society h2 { text-align: center; margin-bottom: 20px}
.achievement .society p { width: 100%; margin: 10px auto}
.achievement .society h3 { font-size: 5rem; text-align: center}
.achievement .society .pic { text-align: center; padding: 0 5%}
.achievement .society .pic img { width: 100%; max-width: 1000px; height: auto}
.society-container { color: #fff}
.society-container section:first-child { background: #BAB0A3}
.society-container section:last-child { background: #95938F}
.society-container .container { margin: 0}
@media screen and (max-width: 1000px){
	.achievement .category-container .container { padding: 60px}
}
@media screen and (min-width: 751px){
	.achievement .category-container .figure { max-width: 380px; max-height: 250px; overflow: hidden; float: left; margin-right: 50px}
	.achievement .link-archive { position: absolute; top: 105px; right: 18%}
	.society-container { color: #fff; height: 30em; margin: 0; position: relative}
	.society-container section { box-shadow:2px 2px 10px 3px rgba(0,0,0,0.3); width: 78%}
	.society-container section:first-child { background: #BAB0A3; z-index: 100; position: absolute; top: 0; left: 0; overflow: hidden;}
	.society-container section:first-child .container { float: right; padding: 40px 40px 40px 5%}
	.society-container section:last-child { background: #95938F; z-index: 90; position: absolute; top: 180px; right: 0; padding-top: 50px}
	.society-container section:last-child .container { float: left; padding: 50px 5% 40px 100px}
	.achievement .category-container section:nth-child(odd):before { content: ""; position: absolute; width: 57%; height: 1px; background: #fff; top: 100px; right: 0}
	.achievement .category-container section:nth-child(even):before { content: ""; position: absolute; width: 57%; height: 1px; background: #000; top: 100px; right: 0}
	.en .society-container { margin-bottom: 130px}
	.en .society-container section:last-child { top: 280px}
	.en .category-container section:nth-child(odd):before { width: 52%}
	.en .category-container section:nth-child(even):before { width: 52%}
	.en .category-container section:nth-child(3):before { width: 47%}
}
@media screen and (max-width: 750px){
	.achievement .page-title { padding: 50px 10% 0}
	.achievement h2 { font-size: 2.6rem; margin-bottom: 30px}
	.achievement .page-title img { max-width: 164px; height: auto}
	.achievement .link-archive { margin-bottom: 5px; overflow: hidden}
	.achievement .link-archive a { float: right; padding-top: 0}
	.achievement .category-container .icon-new { display: block!important; width: 100%!important;}
	.achievement .category-container h4 { clear: both}
	.achievement .category-container .figure { float: none; margin: 0 auto; margin-bottom: 30px}
	.achievement .category-container .container { padding: 30px}
	.achievement .ibf { position: relative; padding-bottom: 0; padding-top: 100px}
	.achievement .ibf h2 { position: absolute; top: 30px; left: 0; padding: 0 5%}
	.achievement .ibf h2 img { width: 100%; height: auto}
	.achievement .ibf .figure { width: 100%; margin-bottom: 30px; text-align: center}
	.achievement .ibf .figure img { max-width: 240px; height: auto}
	.achievement .ibf .container { margin: 0}
	.achievement .society img { width: 100%; height: auto}
	.achievement .society .arrow img { max-width: 140px; height: auto}
	.achievement .society h3 { font-size: 1.8rem; letter-spacing: 1px}
	.society-container section { margin: 0; padding: 30px}
	.society-container section:first-child { margin-bottom: 30px}
	.achievement .category-container h3,
	.achievement .category-container h4 { font-size: 2.4rem; margin: 0}
	.en.achievement .page-title { padding: 50px 10% 0;}
	.en.achievement .page-title img { width: 100%; max-width: 300px; height: auto}
	.category-container .container { margin-bottom: 20px}
}


/*------------------------------------------------

	03 研究者紹介

------------------------------------------------*/
.members section { overflow: hidden; position: relative; padding-top: 155px}
.members h3 { position: relative}
.members h3 span { display: block; padding: 0 15px; background: #000; color: #fff; border-radius: 18px; font-size: 1.6rem; text-align: center; line-height: 35px; position: absolute; left: 20%; top: 0; font-weight: bold}
.members h3:before { content: ""; width: 80%; height: 1px; background: #000; position: absolute; top: 18px; left: 20%;}

.members .container { color: #fff; position: relative; background: #000}
.members .figure img { width: 250px;}
.members .name { font-size: 2.4rem; letter-spacing: 1px; margin-bottom: 20px}
.members dl { margin-top: 2em}
.members dt { background: #fff; color: #000; border-radius: 12px; line-height: 24px; text-align: center; width: 4em;}
.members-2 section { padding-top: 50px}
.en.members h3 span { font-weight: normal}
.en.members dt { width: 10em}

@media screen and (max-width: 1110px){
	.members .container { width: 60%}
}
@media screen and (min-width: 751px){
	.members .page-title h2 { margin-bottom: 0}
	.members .even .figure { position: absolute; top: -50px; right: -200px; width: 250px}
	.members .even .container { position: relative; float: left; padding: 47px; max-width: 890px}
	.members .even .nameEn { position: absolute; top: -40px; right: 100px; color: #000}
	.members .members-container section:nth-child(odd) .figure { position: absolute; top: -50px; left: -200px; width: 250px}
	.members .members-container section:nth-child(even) .figure { position: absolute; top: -50px; right: -200px; width: 250px}
	.members .members-container section:nth-child(odd) .container { position: relative; float: right; padding: 47px 30px 47px 100px; max-width: 890px}
	.members .members-container section:nth-child(even) .container { position: relative; float: left; padding: 47px; max-width: 890px}
	.members .members-container section:nth-child(odd) .nameEn { position: absolute; top: -40px; left: 100px; color: #000}
	.members .members-container section:nth-child(even) .nameEn { position: absolute; top: -40px; right: 100px; color: #000}
	.members .even .container-inner { width: 320px; float: right}
	.members .members-container section:nth-child(odd) .container-inner { width: 360px; float: left}
	.members .members-container section:nth-child(even) .container-inner { width: 320px; float: right}
	.members-2 section:nth-child(even) .nameEn { right: 220px!important}
	.members-2 section:nth-child(odd) .container-inner { width: 100%!important; max-width: 400px!important}
	.members-2 { padding-top: 50px}
	.members-2 .container { margin-bottom: 50px}
	.en.members .page-title { padding-top: 70px; padding-bottom: 45px}
}
@media screen and (max-width: 750px){
	.members .page-title { padding: 50px 10% 0}
	.members .page-title h2 { margin-bottom: 30px}
	.members .page-title h2 img { max-width: 193px; height: auto}
	.members h3 { margin-bottom: 0px; padding-top: 20px;}
	.members h3 span { left: 10%}
	.members section { padding-top: 50px}
	.members .even,
	.members .members-container { margin-bottom: 50px;}
	.members .container { width: 100%; padding: 50px 30px; margin-bottom: 0px}
	.members .figure { width: 100%; margin-bottom: 25px; text-align: center}
	.members .figure img { width: 180px}
	.members .container-inner { width: 100%; max-width: 180px; margin: 0 auto}
	.members-2 .container-inner { width: 100%; max-width: 100%; margin: 0 auto; padding: 0 15%}
	.members-2 { margin-bottom: 0!important; padding-bottom: 0!important}
	.members .name { font-size: 2rem; margin-bottom: 0}
	.en.members .page-title img { max-width: 189px; height: auto}
}
@media screen and (max-width: 320px){
	.en.members .page-title + h3 { margin-bottom:  10px}
	.en.members .page-title + h3 span { line-height: 18px!important; padding: 10px}
}

/*------------------------------------------------

	04 関連組織・リンク

------------------------------------------------*/
.organization .page-title { padding-bottom: 0}
.organization .links li { padding-left: 1em; text-indent: -1em; margin-bottom: 10px}
.organization .links section a:before { content: "●"}
.organization .links section:nth-child(odd) a:hover { color: #000}
.organization .links section:nth-child(even) a:hover { color: #BF9D5A}
.organization .logos img { width: 100%; max-width: 250px; height: auto}
.organization .page-title h2 { margin-bottom: 0}

@media screen and (min-width: 751px){
	.organization .flex { background-image: url(../images/organization/map.png),url(../images/organization/image-3.png); background-position: 100% 0, 104% 92%; background-repeat: no-repeat; padding-top: 150px}
	.organization .links { width: 60%}
	.organization .logos { width: 40%}
	.organization .logos p { margin: 0 0 80px 50px}
	.organization .links section a { color: #fff}
	.organization .links section { padding: 45px; overflow: hidden}
	.organization .links section:nth-child(odd) { background: #B8AFA2; box-shadow:2px 2px 8px 3px rgba(0,0,0,0.15)}
	.organization .links section:nth-child(even) { background: #000; width: 95%;}
	.organization .links section:nth-child(odd) ul { float: right; width: 100%; max-width: 570px; margin-right: 5%}
	.organization .links section:nth-child(even) ul { float: right; width: 100%; max-width: 570px}
}
@media screen and (max-width: 750px){
	.organization .page-title { padding: 50px 10% 0}
	.organization .page-title h2 { margin-bottom: 30px}
	.organization .page-title h2 img { max-width: 269px; height: auto}
	.organization .flex { background-image: url(../images/organization/map.png),url(../images/organization/image-3.png); background-position: 100% 90px, 104% 100%; background-repeat: no-repeat; background-size: 100% auto, 60% auto; padding: 0 5%}
	.organization .links { width: 65%}
	.organization .logos { width: 35%; padding: 0 5%}
	.organization .logos p { margin-bottom: 50px}
	.organization .links section { padding: 0 5% 25px}
	.en.organization .page-title img { max-width: 121px; height: auto}
}


/*------------------------------------------------

	05 お問合せ・アクセス

------------------------------------------------*/
.contact .page-title { padding: 50px 0}
.contact #facilities section { color: #fff; margin-bottom: 50px; overflow: hidden; padding-top: 50px}
.contact #facilities .figure img { width: 100%; max-width: 500px; height: auto; border-radius: 20px; border: solid 2px #000}
.contact #facilities h3 { padding: 0; margin-bottom: 0; line-height: 1.5}
.contact #facilities h3 + p { margin: 10px 0}
.contact #map-area .flex { width: 100%; max-width: 1000px; margin: 0 auto}
.contact #map-area img { width: 100%; height: auto}
.contact #map-area h3 { font-size: 2.4rem; margin-bottom: 10px; padding: 0; line-height: 1.5}
.contact #map-area h3 + p { margin-bottom: 30px}
.contact iframe { width: 100%; height: 530px; border: 0; margin: 0}
.contact .image-mail { margin-top: 10px}
@media screen and (min-width: 751px){
	.contact #facilities .container { background: #95938F; height: 350px}
	.contact #facilities section:nth-child(odd) .container { position: relative; float: right; padding: 47px 30px 30px 500px; max-width: 78%}
	.contact #facilities section:nth-child(even) .container { position: relative; float: left; padding: 47px 500px 30px 30px; max-width: 78%}
	.contact #facilities section:nth-child(odd) .figure { position: absolute; top: -50px; left: -50px; width: 500px}
	.contact #facilities section:nth-child(even) .figure { position: absolute; top: -50px; right: -50px; width: 500px}
	.contact #facilities section:nth-child(odd) .container-inner { width: 320px; float: left}
	.contact #facilities section:nth-child(even) .container-inner { width: 320px; float: right}
	.contact #map-area { padding-top: 45px}
	.contact #map-area .flex div:first-child { width: 48%; padding-left: 50px}
	.contact #map-area .flex div:last-child { width: 52%; padding-left: 50px}
	.contact #map-area { background: #000 url(../images/contact/image-3.png) no-repeat 90% 70%; color: #fff; padding-top: 45px}
	.contact .page-title { padding: 100px 50px 0}
}
@media screen and (max-width: 750px){
	.contact .page-title { padding: 50px 10% 0}
	.contact .page-title h2 { margin-bottom: 30px}
	.contact .page-title h2 img { max-width: 298px; height: auto}
	.contact #facilities section { padding-top: 150px; margin-bottom: 0}
	.contact #facilities .container { background: #95938F; position: relative; padding: 70px 5% 30px}
	.contact #facilities .figure { position: absolute; top: -150px; left: 0; width: 100%; text-align: center; padding: 0 15%}
	.contact #map-area .flex div { width: 100%}
	.contact #map-area .flex div:first-child { background: #000; padding: 30px 10% 0}
	.contact #map-area .flex div:last-child { background: url(../images/contact/image-4.png) no-repeat 95% 20px; background-size: 35% auto; -webkit-background-size: 35% auto; padding: 30px 10% 0}
	.en.contact .page-title { padding: 50px 10%}
	.en.contact .page-title img { max-width: 282px; height: auto}
	.en.contact .page-title h2 { margin-bottom: 30px}
	.en.contact #facilities section { padding-top: 150px}
	.en.contact #facilities .figure { top: -150px}
}


/*------------------------------------------------

	新着情報  .single

------------------------------------------------*/
#breadcrumb,.thumbnail-box { margin-bottom: 20px; overflow: hidden}
.thumbnail-box img { width: 100%; height: auto}
#breadcrumb a { font-size: 1.3rem}
#breadcrumb ul { overflow: hidden; float: right}
#breadcrumb li { float: left; font-size: 1.3rem}
#breadcrumb li:after { content: ">"; margin: 0 0.5em}
#breadcrumb li:last-child:after { content: " "}
.single-header { margin: 0 auto 50px; width: 100%; max-width: 860px}
.single section { overflow: hidden; margin: 0 auto; width: 100%; max-width: 860px}
.single .single-main .thumbnail-box img { border-radius: 20px; border: solid 2px #000}
.single h2 { font-size: 4rem; margin: 0; font-weight: 200}
.single h3 { margin-bottom: 20px!important; padding: 0}
.single h3 a { font-size: 2rem}
.single article { margin-bottom: 80px}
.single article .post { padding: 0 20px}
.post-navi { width: 100%; overflow: hidden}
.post-navi #next { float: left; width: 40%}
.post-navi #prev { float: right; width: 40%; text-align: right}
.post-navi a { font-size: 1.3rem}
.single .post p { margin-bottom: 1em}
.btn-more a { font-size: 1.4rem; display: block}
#sidebar time { display: block}
#sidebar .newarrivals li { border-bottom: solid 1px #000; margin-bottom: 8px; padding-bottom: 8px}
#sidebar .month li { margin-bottom: 10px}
#sidebar .cat-tit { font-weight: bold; margin-bottom: 10px; font-size: 1.8rem}
.single-archive h3 a { color: #000}
.single-archive .thumbnail-box { float: left; margin-right: 50px}
.single-archive .post { margin-bottom: 50px; padding-bottom: 30px; border-bottom: solid 1px #000}
.single-archive { padding-top: 26px}
.category-band div { height: 55px; width: 100%; max-width: 860px; margin: 0 auto; overflow: hidden; text-indent: 100%; white-space: nowrap; background: url(../images/common/hd-news-bk.png) no-repeat 0 100%}
.category-band.medical { background: #000}
.category-band.basic { background: #BAB0A3}
.category-band.application { background: #000}
.category-band.social { background: #BAB0A3}




@media screen and (min-width: 751px){
	.single .single-main { margin: 0 auto; max-width: 540px; 
	order: 2;
	-webkit-order: 2;
  	-ms-flex-order: 2;
 	}
	.post-navi { padding-top: 30px; margin-top: 70px}
	#sidebar { width: 250px; margin-right: 20px}
	#sidebar ul { margin-bottom: 50px}
	.category-band { position: absolute; top: 150px; left: 0; width: 100%; padding: 0 5%}
	.category-band.medical div { background: url(../images/common/band-medical.png) no-repeat 0 50%; background-size: auto 35px; -webkit-background-size: auto 35px}
	.category-band.basic div { background: url(../images/common/band-basic.png) no-repeat 0 50%; background-size: auto 35px; -webkit-background-size: auto 35px}
	.category-band.application div { background: url(../images/common/band-application.png) no-repeat 0 50%; background-size: auto 35px; -webkit-background-size: auto 35px}
	.category-band.social div { background: url(../images/common/band-social.png) no-repeat 0 50%; background-size: auto 35px; -webkit-background-size: auto 35px}
	.en .category-band.medical div { background: url(../images/common/band-medical-en.png) no-repeat 0 50%; background-size: auto 35px; -webkit-background-size: auto 35px}
	.en .category-band.basic div { background: url(../images/common/band-basic-en.png) no-repeat 0 50%; background-size: auto 35px; -webkit-background-size: auto 35px}
	.en .category-band.application div { background: url(../images/common/band-application-en.png) no-repeat 0 50%; background-size: auto 35px; -webkit-background-size: auto 35px}
	.en .category-band.social div { background: url(../images/common/band-social-en.png) no-repeat 0 50%; background-size: auto 35px; -webkit-background-size: auto 35px}
}
@media screen and (max-width: 750px){
	.single { padding: 0px 4% 100px}
	.single-header { margin: 0 auto; padding-top: 60px}
	#breadcrumb { margin: 10px auto; overflow: hidden}
	#breadcrumb ul { float: right}
	.post-navi { padding-top: 30px; margin-bottom: 50px}
	.sidebar-navi { overflow: hidden}
	.sidebar-navi div:first-child { width: 100%}
	/*.sidebar-navi div:first-child { width: 50%; float: left}
	.sidebar-navi div:last-child { width: 45%; float: right}*/
	#sidebar .cat-tit { font-size: 1.6rem}
	.thumbnail-box { width: 100%; float: none}
	.category-band { position: absolute; top: 100px; left: 0; width: 100%}
	.category-band div { background-position: 5% 0}
	.category-band.medical div { background: url(../images/common/band-medical.png) no-repeat 5% 50%; background-size: auto 25px; -webkit-background-size: auto 25px}
	.category-band.basic div { background: url(../images/common/band-basic.png) no-repeat 5% 50%; background-size: auto 25px; -webkit-background-size: auto 25px}
	.category-band.application div { background: url(../images/common/band-application.png) no-repeat 5% 50%; background-size: auto 25px; -webkit-background-size: auto 25px}
	.category-band.social div { background: url(../images/common/band-social.png) no-repeat 5% 50%; background-size: auto 25px; -webkit-background-size: auto 25px}
	.en .category-band.medical div { background: url(../images/common/band-medical-en.png) no-repeat 5% 50%; background-size: auto 25px; -webkit-background-size: auto 25px}
	.en .category-band.basic div { background: url(../images/common/band-basic-en.png) no-repeat 5% 50%; background-size: auto 25px; -webkit-background-size: auto 25px}
	.en .category-band.application div { background: url(../images/common/band-application-en.png) no-repeat 5% 50%; background-size: auto 25px; -webkit-background-size: auto 25px}
	.en .category-band.social div { background: url(../images/common/band-social-en.png) no-repeat 5% 50%; background-size: auto 25px; -webkit-background-size: auto 25px}
}



.en .breadcrumbs { text-align: right}
/*------------------------------------------------

	フッター　#footer

------------------------------------------------*/
footer { text-align: center;}
footer .add img { display: inline-block; margin-right: 50px}
footer .add span { display: inline-block; margin-top: 10px}
.copyright { letter-spacing: 2px; font-size: 1.2rem; background: #000; color: #fff; line-height: 1.5em; padding: 5em 3em; text-align: center}
.btn-return { position: fixed; bottom: 40%; right: 6%; z-index: 101; width: 63px; text-align: left}
.btn-return img:first-child { margin-bottom: 10px}
@media screen and (min-width: 751px){
	footer .add { height: 140px; padding-top: 43px}
}
@media screen and (max-width: 750px){
	footer .add { padding: 50px 5%; font-size: 1.2rem}
	footer .add span { margin-top: 5px}
	footer .add img { margin-right: 10px; width: 80px; height: auto}
	.copyright { text-align: left; font-size: 1.1rem}
	.btn-return { position: fixed; bottom: 1%; right: 3%}
	.en footer .add { padding-top: 30px}
}



ul.accordion { width: 100%; font-size: 1.6rem}
ul.accordion a { display: block; text-decoration: none}
ul.accordion span { display: block; padding: 10px 0}
ul.accordion > li { margin-bottom: 1em}
ul.accordion > li > p { cursor: pointer; color: #fff}
ul.accordion > li > ul > li > ul > li:last-child { border: none}
ul.accordion > li > ul > li { position: relative}
ul.accordion i { font-style: normal}
@media screen and (max-width: 750px){
	ul.accordion > li > p { padding-bottom: 20px}
	ul.accordion ul { display: none; padding-bottom: 30px}
	ul.accordion > li > p span { background: url(../images/introduction/btn-more.png) no-repeat 100% 50%}
	ul.accordion > li > p span.open { background: url(../images/introduction/btn-more-close.png) no-repeat 100% 50%; color: #bf9d5a}
	.en ul.accordion > li > p span { background: url(../images/introduction/btn-more-en.png) no-repeat 100% 50%}
	.en ul.accordion > li > p span.open { background: url(../images/introduction/btn-more-close-en.png) no-repeat 100% 50%; color: #bf9d5a}
}