@charset "utf-8";
@import url('components.css');

.strong { font-weight: bold; }
.wave { font-weight: bold; color: #FF4D4D; text-decoration:underline wavy #FF4D4D; }
.red { color: #f00; }
.attention { color: #f00; }
.indent { text-indent: -1em; padding-left: 1em; }
a { text-decoration:none; color:#2d3934; }
a:hover { text-decoration:none; color:#006549; }
img { max-width: 100%; }
body { background: #ffffff; padding:0; width: 100%; overflow: hidden; }

header { width: 100%; height: 100px; display: flex; align-items: center; justify-content: space-between; background: rgba(255, 255, 255, .85); position: fixed; left: 0; top:0; z-index: 10010; transition: height .4s; }
header .logo { margin:0 0 0 40px; /* transition: .4s; */ }
header .menubtn { display: none; cursor: pointer; position: absolute; right: 60px; /* transition: .4s; */ }
header .contactbtn {  position: absolute; right: 30px; z-index: 100; }
header .contactbtn a { display: flex; align-items: center; justify-content: center; letter-spacing: .1em; font-weight: 600; width: 240px; height: 60px; text-align: center; background: #32DBCF; color: rgba(0,0,0,.8); border-radius: 2px; /* transition: .4s; */ }
header nav ul { display: flex; align-items: center; flex-wrap: wrap; padding: 0 1rem; }
header nav ul li a { display: inline-block; padding: 1rem; font-weight: 600; color: rgba(0,0,0,.9); }
header nav ul li.contact a { background: #009d76; border-radius: 100px; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 600; padding: .8rem 3rem; margin: 0 0 0 1rem; line-height: 1; transition: background .4s; }
header nav ul li.contact a:before { content: url(/kdri/org/center/bm/static/images/ico_mail.svg); vertical-align: middle; margin: 0 .5em 0 0; }
header nav ul li.contact a:hover { background: #1a8eaf; }

body.fixed header.topheader { background: transparent; }
body.fixed header { height: 60px; }
body.fixed header .logo { margin: 0 0 0 1rem; }
body.fixed header .logo img { height: 34px; }

.kv { height: 75vh; }

footer { padding: 0 20px; line-height: 150px; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; background: #555; text-align: center; position: relative; z-index: 10; }
footer small { width: 100%; display: block; font-size: .7rem; color: rgba(255,255,255,.4); }

.pagetop { width: 100%; border-top:1px solid #ddd; }
.pagetop a { display: block; background: #fff; line-height: 59px; text-align: center; letter-spacing: .1em; }
.pagetop a:hover { color: rgba(0,0,0,.4); }

.video-wrap { position: fixed; top: 0; left: 0; width: 100%; height: 75vh; /* opacity: .5; */ }
.video-wrap video { width: 100%; height:75vh; z-index: -100; object-fit: cover; object-position: 50% 50%; }
.video-wrap img { width: 100%; height:75vh; z-index: -100; object-fit: cover; object-position: 50% 50%; position: absolute; left: 0; top:0; }

.kvcontents { position: absolute; height: calc(75vh - 100px); width: 100%; left: 0; top:100px; display: flex; align-items: center; justify-content: center; }/*
.kvcontents h1 { }
.kvcontents h1 span { display: inline-block; letter-spacing: .05em; line-height: 1.1; margin: .5rem 0; padding: .2em .3em; color: #fff; font-size: 3.6rem; font-weight: 900; text-shadow: 0 0 8px #000; font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; }
*/
.top { background: #fff; position: relative; z-index: 1; }
.top .menulist { /* height: 100vh; */ display: flex; align-items: center; justify-content: center; }
.top .menulist .inr { display: flex; justify-content: space-between; max-width: 1200px; margin: 0 auto; padding:5rem; }
.top .menulist .inr .cont { width: calc((100% - 5rem) / 2); position: relative; padding: 0 0 60px; }
.top .menulist .inr .cont .img { text-align: center; margin: 0 auto 40px; }
.top .menulist .inr .cont .img img { height: 150px; }
.top .menulist .inr .cont h2 { text-align: center; font-size: 2rem; letter-spacing: .05em; line-height: 1; margin: 0 auto 50px; font-weight: normal; }
.top .menulist .inr .cont h2 small { display: block; margin: 10px auto 0; text-align: center; font-size: 1rem; font-weight: normal; color: rgba(0,0,0,.5); }
.top .menulist .inr .cont p { line-height: 2; margin: 0 0 50px; }
.top .menulist .inr .cont ul { width: 100%; position: absolute; left: 0; bottom: 0; }
.top .menulist .inr .cont ul li { text-align: center; }
.top .menulist .inr .cont ul li a { display: inline-block; padding: 15px 60px; background: #555; color: #fff; line-height: 1; box-shadow: none; transition: background .3s, box-shadow .5s; }
.top .menulist .inr .cont ul li a:hover { background: #676; box-shadow: 3px 6px 9px rgba(0,0,0,.15); }

.top .about { /* height: 100vh; */ background: url(/kdri/org/center/bm/static/images/about_bg.jpg) center center / cover no-repeat; background-attachment: fixed; }
.top .about .inr { /* height: 100vh; */ padding: 10rem 5rem; width: 100%; display: flex; align-items: center; justify-content: center; background: rgba(46,86,79,.6); }
.top .about .inr .cont { max-width: 800px; }
.top .about .inr .cont h2 { font-size: 2rem; color: #fff; text-align: center; letter-spacing: .05em; line-height: 1; margin: 0 auto 50px; font-weight: normal; }
.top .about .inr .cont p { line-height: 2; color: #fff; margin: 0 auto 50px; }
.top .about .inr .cont ul li { text-align: center; }
.top .about .inr .cont ul li a { display: inline-block; padding: 15px 60px; background: #fff; line-height: 1; box-shadow: none; transition: background .3s, box-shadow .5s; }
.top .about .inr .cont ul li a:hover { background: rgba(255,255,255,.8); box-shadow: 3px 6px 9px rgba(0,0,0,.15); }

.top .information { /* height: 100vh; */ background:#fff; }
.top .information .inr { /* height:calc(100vh - 210px); */ padding: 10rem 5rem; width: 100%; display: flex; align-items: center; justify-content: center; }
.top .information .inr h2 { font-size: 2rem; text-align: center; letter-spacing: .05em; line-height: 1; margin: 0 auto 50px; font-weight: normal; }
.top .information .inr .cont dl { width: 100%; display: flex; margin: 0 0 1em; }
.top .information .inr .cont dl dt { width: 7em; }
.top .information .inr .cont dl dd { width: calc(100% - 7em); }
.top .information .inr .cont dl dd a { }
.top .information .inr .cont dl dd a:hover { color: rgba(0,0,0,.4); }

.title { padding: 0 80px; margin: 100px 0 0; background: url(/kdri/org/center/bm/static/images/title_bg.png) left center / cover no-repeat; display: flex; align-items: center; justify-content: flex-start; height: 300px; }
.title h1 { color: #fff; font-size: 2rem; font-weight: 100; letter-spacing: .1em; line-height: 1; }
.title.lipidomics { background-image: url(/kdri/org/center/bm/static/images/title_bg_gcms.png); }
.title.metabolomics { background-image: url(/kdri/org/center/bm/static/images/title_bg_lcms.png); }

body.fixed .title { margin-top: 79px; }

article.page { margin: 100px auto; }
article.page h2 { font-size: 2rem; margin: 0 0 30px; }
article.page h2 small { font-size: 1.2rem; font-weight: bold; color: rgba(0,0,0,.4); }

article.page p { line-height: 1.8; margin: 0 0 30px; }
article.page section { max-width: 1000px; margin: 0 auto 100px; }

article.page .wrap { background: rgba(0,0,0,.05); padding: 25px; margin: 0 0 30px; border-radius: 7px; }
article.page .wrap dl { border-bottom: 1px solid rgba(0,0,0,.05); padding: 0 0 30px; margin: 0 0 30px; }
article.page .wrap dl dt { font-size: 1.25rem; font-weight: bold; line-height: 1.2; margin: 0 0 10px; }
article.page .wrap dl dd table { margin: 0 0 15px; }
article.page .wrap dl dd table th { padding: 0 2em 0 0; }
article.page .wrap dl dd ul li { text-align: center; }
article.page .wrap dl dd ul li a { display: inline-block; padding: 15px 60px; background: #555; color: #fff; line-height: 1; box-shadow: none; transition: background .3s, box-shadow .5s; }
article.page .wrap dl dd ul li a:hover { background: #676; box-shadow: 3px 6px 9px rgba(0,0,0,.15); }

article.contact { max-width: 860px; margin: 100px auto; padding: 0; }
article.contact .contacttip a { display: block; background: rgba(0,0,0,.05); padding: 15px; margin: 0 auto 30px; text-decoration: underline; }
article.contact ul.list { list-style-type: none; margin: 0 0 30px; }
article.contact ul.list li { list-style-type: none; padding: 0 0 0 20px; margin: 10px 0; position: relative; }
article.contact ul.list li:before { content: ""; display: block; width: 6px; height: 6px; border-radius: 100px; background: rgba(0,0,0,.3); overflow: hidden; position: absolute; top:calc(.7em - 3px); left: 5px; }
article.contact ol.list { list-style-type: decimal; margin: 0 0 30px 1.5em; }
article.contact ol.list li { list-style-type: decimal; padding: 0 0 0 5px; margin: 10px 0 ; position: relative; }
article.contact .formarea { border-bottom:1px solid #eee; margin: 0 0 60px; }
article.contact .formarea dl { display: flex; align-items: center; padding: 30px 0; border-top:1px solid #eee; }
article.contact .formarea dl dt { width: 18em; position: relative; }
article.contact .formarea dl.must dt:before   { content: "必須"; display: block; width: 3.5em; line-height: 1; font-size: .8rem; text-align: center; padding: 8px 0; background: #E6728D; color: #fff; position: absolute; right: 30px; top:calc(50% - (8px + .5em)); }
article.contact .formarea dl.option dt:before { content: "任意"; display: block; width: 3.5em; line-height: 1; font-size: .8rem; text-align: center; padding: 8px 0; background: #75C3D8; color: #fff; position: absolute; right: 30px; top:calc(50% - (8px + .5em)); }
article.contact .formarea dl dd { width: calc(100% - 18em); }
article.contact .formarea dl dd input { width: 100%; font-size: 16px; height: 36px; }
article.contact .formarea dl dd textarea { width: 100%; font-size: 16px; }
article.contact .formarea dl.error { background: rgba(255,0,0,.05); }
article.contact .formarea dl.error dt { color: rgba(200,0,0,.8); }

article.contact .privacypolicy { margin: 0 auto 60px; }
article.contact .privacypolicy h3 { margin: 0 0 10px; }
article.contact .privacypolicy .inr { max-height: 400px; background: rgba(0,0,0,.05); padding: 20px; overflow: auto; }
article.contact .privacypolicy h4 { margin: 0 0 10px; }
article.contact .privacypolicy p { margin: 0 0 30px; }
article.contact .btnlist ul { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; }
article.contact .btnlist ul li { margin: 0 20px 20px; }
article.contact .btnlist ul li button { text-align: center; cursor: pointer; display: inline-block; padding: 20px; width: 260px; line-height: 1; font-weight: bold; color: rgba(0,0,0,.8); background: #32DBCF; border:none; outline: none; font-size: 18px; letter-spacing: .05em; transition: background .3s; }
article.contact .btnlist ul li button:hover { background: #329DDB; }
article.contact .btnlist ul li a { text-align: center; cursor: pointer; display: inline-block; padding: 20px; width: 260px; line-height: 1; font-weight: normal; color: rgba(0,0,0,.8); background: #ddd; border:none; outline: none; font-size: 18px; letter-spacing: .05em; transition: background .3s; }
article.contact .btnlist ul li a:hover { background: #aaa; }

.errorlist { background: rgba(255,0,0,.05); padding: 15px; margin: 0 0 30px; }
.errorlist li { color: rgba(200,0,0,.7); }

.wideimg { width: 100%; height: 240px; object-fit: cover; }

article.menu_list section { border-bottom: 1px dashed #ccc; padding: 0 0 60px; }
article.menu_list section em { vertical-align: baseline; font-size: inherit; color:#d00; line-height: inherit; font-weight: bold; }
article.menu_list section sup { vertical-align: baseline; font-size: inherit; color:#00d; line-height: inherit; font-weight: bold; }
article.menu_list dl { border: 4px solid #e5e5e5; margin: 0 0 30px; padding: 30px 30px 1px; }
article.menu_list dt { display: inline-block; padding:5px 20px; line-height: 1; border-radius: 3px; background: #009d76; color: #fff; margin: 0 0 30px; }
article.menu_list dd { display: block; width: 100%; margin: 0 0 30px; }
article.menu_list dd h3 { font-size: 1rem; font-weight: bold; line-height: 1; margin: 0 0 5px; }

.contactbtnBottom { position: fixed; left: 0; bottom: 0; display: flex; align-items: center; justify-content: center; width: 100%; padding: 15px; background: #009d76; }
.contactbtnBottom a { display: inline-block; line-height: 1; width: 360px; height: 60px; background: rgba(255,255,255,.2); box-shadow: 0 3px 6px rgba(0,0,0,.1); color: #fff; font-weight: bold; display: flex; align-items: center; justify-content: center; transition: .3s; }
.contactbtnBottom a:hover { background: rgba(0,0,0,.5); }

/* ───────────────────────────────────────────────────────────────────────────
 1200px以下の動作
─────────────────────────────────────────────────────────────────────────── */
@media print, screen and (max-width:1200px){
input[type="search"], input[type="email"], input[type="text"] { font-size: 16px; }
html, body { font-size: 15px; }

  header { height: 100px; transform: translate3d(0, 0, 0); }
  header .logo { margin: 0 0 0 10px; }
  header .logo img { height: 30px; }
  header .menubtn { display: block; right: 20px; }
  header .menubtn img { height: 30px; }
  body.fixed header .logo { margin: 0 0 0 10px; }
  body.fixed header .logo img { height: 30px; }
  body.fixed header .menubtn { right: 20px; }
  header nav { opacity: 0; visibility: hidden; position: fixed; top:0; left: 0; width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; background: rgba(245,245,245,.9); z-index: -1; }
  header nav.active { opacity:1; visibility:visible; transition: .4s; }
  header nav ul { display: block; }
  header nav ul li { display: block; margin: 10px; }
  header nav ul li a { display: flex; align-items: center; justify-content: flex-start; box-shadow: 4px 4px 8px rgba(0,0,0,.05), -4px -4px 8px #f6f6f6; background: #fff; width: 260px; padding: 1rem; }
  header nav ul li.contact a { display: flex; align-items: center; justify-content: flex-start; border-radius: 0; margin: 0; padding: 1rem; font-weight: 600; text-align: left; }

  .kvcontents { padding: 0 5vw; }
  /* .kvcontents h1 span { font-size: 5.5vw } */

  .top .menulist { height: auto; }
  .top .menulist .inr { display: block; padding: 0; }
  .top .menulist .inr .cont { width: 100%; padding: 100px 30px; }
  .top .menulist .inr .cont .img { margin: 0 auto 30px; }
  .top .menulist .inr .cont h2 { margin: 0 auto 30px; }
  .top .menulist .inr .cont ul { position: static; }
  .top .about .inr .cont { padding: 100px 30px; }
  .top .about .inr .cont h2 { font-size: 1.5rem; }
  .top .about { height: auto; }
  .top .about .inr { height: auto; padding: 0; }
  .top .information { height: auto; }
  .top .information .inr { height: auto; padding: 100px 30px;}
  .top .information .inr h2 { font-size: 1.5rem; }
  .top .information .inr .cont dl { display: block; }
  .top .information .inr .cont dl dt { width: auto; font-size: .8rem; font-weight: bold; color: rgba(0,0,0,.4); }
  .top .information .inr .cont dl dd { width: auto; }
  .title { padding: 0 20px; height: 100px; }
  .title h1 { font-size: 1.5rem; }
  article.page { margin: 30px; }
  article.contact { margin: 30px; }
  article.contact .formarea { margin: 0 0 30px; }
  article.contact .formarea dl { display: block; padding: 15px 0 20px; }
  article.contact .formarea dl dt { width: auto; font-weight: bold; color: rgba(0,0,0,.5); font-size: .9rem; padding: 5px 0; }
  article.contact .formarea dl dd { width: auto; }
  article.contact .formarea dl.must dt:before   { right: 0; padding: 4px 0; font-size: 11px; top:calc(50% - (4px + .5em)); }
  article.contact .formarea dl.option dt:before { right: 0; padding: 4px 0; font-size: 11px; top:calc(50% - (4px + .5em)); }
  article.page .wrap dl dd ul li a { display:block; padding: 15px; }


}

/* ───────────────────────────────────────────────────────────────────────────
 360px以下の動作
─────────────────────────────────────────────────────────────────────────── */
@media print, screen and (max-width:360px){
  .kvcontents { padding:0 1rem; }
  /* .kvcontents h1 span { font-size: 6vw; } */
}

/* ───────────────────────────────────────────────────────────────────────────
 印刷時動作
─────────────────────────────────────────────────────────────────────────── */
@media print{  }


/* ───────────────────────────────────────────────────────────────────────────
 追加css
─────────────────────────────────────────────────────────────────────────── */

.kvcontents h1 {
  display: inline-block;
  font-family: 'Shippori Mincho','游明朝', YuMincho, 'Hiragino Mincho ProN W3', 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN','ＭＳ 明朝', serif;
  color: rgba(255,255,255,1);
  font-size: 36px;
  font-size: 3.6rem;
  font-weight: 700;
  line-height: 180%;
  font-feature-settings: "palt" 1;
  text-shadow: 0 0 15px rgba(0,0,0,1), 0 0 15px rgba(0,0,0,1);
}

.kvcontents h1 span {
  letter-spacing: -0.08em;
  font-family: 'Shippori Mincho','游明朝', YuMincho, 'Hiragino Mincho ProN W3', 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN','ＭＳ 明朝', serif;
  color: rgba(255,255,255,1);
  font-size: 36px;
  font-size: 3.6rem;
  font-weight: 700;
  line-height: 180%;
}

.kvcontents h1 span.light {
  letter-spacing: -0.12em;
}

.kvcontents h1 span.semi {
  letter-spacing: -0.16em;
}

.kvcontents h1 span.extra {
  letter-spacing: -0.5em;
}


@media print, screen and (max-width:768px){

.kvcontents h1,
.kvcontents h1 span {
  font-size: 6vw;
  text-shadow: 0 0 0.35em rgba(0,0,0,1), 0 0 0.35em rgba(0,0,0,1);
}

}