@charset "utf-8";

/* ===================================================================
CSS information

 File Name  : common.css
 Author     : 
 Style Info : 天然科学研究所　共通css設定
=================================================================== */

/* ----------------------- Browser Default Initialization */

html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,
b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-style:normal; font-weight: normal; font-size: 100%; vertical-align: baseline; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
html{ overflow-y: scroll; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
input, textarea{ margin: 0; padding: 0; }
ol, ul{ list-style:none; }
table{ border-collapse: collapse; border-spacing:0; }
caption, th{ text-align:left; }
a:focus { outline:none; }
li img { vertical-align:top; }
img { vertical-align:bottom; }

/*--float--*/
.fL { float:left; }
.fR { float:right; }

/*--clearfix--*/
.clearfix:after { content: "."; display: block; clear: both; height: 0; visibility: hidden; }
.clearfix { min-height:1px; }
* html .clearfix { height: 1px; /*\*//*/ height: auto; overflow: hidden; /**/ }

/*--clear--*/
.clear { clear:both; }

/* margin */
.mT00{margin-top:0 !important;} .mT05{margin-top:5px !important;} .mT10{margin-top:10px !important;} .mT15{margin-top:15px !important;} .mT20{margin-top:20px !important;} .mT25{margin-top:25px !important;} .mT30{margin-top:30px !important;} .mT35{margin-top:35px !important;} .mT40{margin-top:40px !important;} .mT45{margin-top:45px !important;} .mT50{margin-top:50px !important;} .mT55{margin-top:55px !important;} .mT60{margin-top:60px !important;} .mT65{margin-top:65px !important;} .mT70{margin-top:70px !important;} .mT75{margin-top:75px !important;} .mT80{margin-top:80px !important;} .mT85{margin-top:85px !important;} .mT90{margin-top:90px !important;} .mT95{margin-top:95px !important;} .mT100{margin-top:100px !important;} .mT110{margin-top:110px !important;} .mT120{margin-top:120px !important;} .mT130{margin-top:130px !important;} .mT145{margin-top:145px !important;} .mT200{margin-top:200px !important;}
.mTmns05{margin-top:-5px !important;} .mTmns10{margin-top:-10px !important;}
.mR00{margin-right:0 !important;} .mR05{margin-right:5px !important;} .mR10{margin-right:10px !important;} .mR15{margin-right:15px !important;} .mR20{margin-right:20px !important;} .mR25{margin-right:25px !important;} .mR30{margin-right:30px !important;} .mR35{margin-right:35px !important;} .mR40{margin-right:40px !important;} .mR45{margin-right:45px !important;} .mR50{margin-right:50px !important;} .mR55{margin-right:55px !important;} .mR60{margin-right:60px !important;} .mR65{margin-right:65px !important;} .mR70{margin-right:70px !important;} .mR75{margin-right:75px !important;} .mR80{margin-right:80px !important;} .mR85{margin-right:85px !important;} .mR90{margin-right:90px !important;} .mR95{margin-right:95px !important;} .mR100{margin-right:100px !important;} .mR150{margin-right:150px !important;} .mR160{margin-right:160px !important;} .mR200{margin-right:200px !important;}
.mB00{margin-bottom:0 !important;} .mB05{margin-bottom:5px !important;} .mB10{margin-bottom:10px !important;} .mB15{margin-bottom:15px !important;} .mB20{margin-bottom:20px !important;} .mB25{margin-bottom:25px !important;} .mB30{margin-bottom:30px !important;} .mB35{margin-bottom:35px !important;} .mB40{margin-bottom:40px !important;} .mB45{margin-bottom:45px !important;} .mB50{margin-bottom:50px !important;} .mB55{margin-bottom:55px !important;} .mB60{margin-bottom:60px !important;} .mB65{margin-bottom:65px !important;} .mB70{margin-bottom:70px !important;} .mB75{margin-bottom:75px !important;} .mB80{margin-bottom:80px !important;} .mB85{margin-bottom:85px !important;} .mB90{margin-bottom:90px !important;} .mB95{margin-bottom:95px !important;} .mB100{margin-bottom:100px !important;}
.mBmns10{margin-bottom:-10px !important;}
.mL00{margin-left:0 !important;} .mL05{margin-left:5px !important;} .mL10{margin-left:10px !important;} .mL15{margin-left:15px !important;} .mL20{margin-left:20px !important;} .mL25{margin-left:25px !important;} .mL30{margin-left:30px !important;} .mL35{margin-left:35px !important;} .mL40{margin-left:40px !important;} .mL45{margin-left:45px !important;} .mL50{margin-left:50px !important;} .mL55{margin-left:55px !important;} .mL60{margin-left:60px !important;} .mL65{margin-left:65px !important;} .mL70{margin-left:70px !important;} .mL75{margin-left:75px !important;} .mL80{margin-left:80px !important;} .mL85{margin-left:85px !important;} .mL90{margin-left:90px !important;} .mL95{margin-left:95px !important;} .mL100{margin-left:100px !important;} .mL110{margin-left:110px !important;} .mL120{margin-left:120px !important;} .mL125{margin-left:125px !important;} .mL130{margin-left:130px !important;} .mL150{margin-left:150px !important;} .mL200{margin-left:200px !important;} .mL230{margin-left:230px !important;} .mL285{margin-left:285px !important;} .mL330{margin-left:330px !important;}
.mLmns10{margin-left:-10px !important;} .mLmns20{margin-left:-20px !important;}

/* padding */
.pT00{padding-top:0 !important;} .pT05{padding-top:5px !important;} .pT10{padding-top:10px !important;} .pT15{padding-top:15px !important;} .pT20{padding-top:20px !important;} .pT25{padding-top:25px !important;} .pT30{padding-top:30px !important;} .pT35{padding-top:35px !important;} .pT40{padding-top:40px !important;} .pT45{padding-top:45px !important;} .pT50{padding-top:50px !important;} .pT55{padding-top:55px !important;} .pT60{padding-top:60px !important;} .pT65{padding-top:65px !important;} .pT70{padding-top:70px !important;} .pT75{padding-top:75px !important;} .pT80{padding-top:80px !important;} .pT85{padding-top:85px !important;} .pT90{padding-top:90px !important;} .pT95{padding-top:95px !important;} .pT100{padding-top:100px !important;}
.pR00{padding-right:0 !important;} .pR05{padding-right:5px !important;} .pR10{padding-right:10px !important;} .pR15{padding-right:15px !important;} .pR20{padding-right:20px !important;} .pR25{padding-right:25px !important;} .pR30{padding-right:30px !important;} .pR35{padding-right:35px !important;} .pR40{padding-right:40px !important;} .pR45{padding-right:45px !important;} .pR50{padding-right:50px !important;} .pR55{padding-right:55px !important;} .pR60{padding-right:60px !important;} .pR65{padding-right:65px !important;} .pR70{padding-right:70px !important;} .pR75{padding-right:75px !important;} .pR80{padding-right:80px !important;} .pR85{padding-right:85px !important;} .pR90{padding-right:90px !important;} .pR95{padding-right:95px !important;} .pR100{padding-right:100px !important;}
.pB00{padding-bottom:0 !important;} .pB05{padding-bottom:5px !important;} .pB10{padding-bottom:10px !important;} .pB15{padding-bottom:15px !important;} .pB20{padding-bottom:20px !important;} .pB25{padding-bottom:25px !important;} .pB30{padding-bottom:30px !important;} .pB35{padding-bottom:35px !important;} .pB40{padding-bottom:40px !important;} .pB45{padding-bottom:45px !important;} .pB50{padding-bottom:50px !important;} .pB55{padding-bottom:55px !important;} .pB60{padding-bottom:60px !important;} .pB65{padding-bottom:65px !important;} .pB70{padding-bottom:70px !important;} .pB75{padding-bottom:75px !important;} .pB80{padding-bottom:80px !important;} .pB85{padding-bottom:85px !important;} .pB90{padding-bottom:90px !important;} .pB95{padding-bottom:95px !important;} .pB100{padding-bottom:100px !important;}
.pL00{padding-left:0 !important;} .pL05{padding-left:5px !important;} .pL10{padding-left:10px !important;} .pL15{padding-left:15px !important;} .pL20{padding-left:20px !important;} .pL25{padding-left:25px !important;} .pL30{padding-left:30px !important;} .pL35{padding-left:35px !important;} .pL40{padding-left:40px !important;} .pL45{padding-left:45px !important;} .pL50{padding-left:50px !important;} .pL55{padding-left:55px !important;} .pL60{padding-left:60px !important;} .pL65{padding-left:65px !important;} .pL70{padding-left:70px !important;} .pL75{padding-left:75px !important;} .pL80{padding-left:80px !important;} .pL85{padding-left:85px !important;} .pL90{padding-left:90px !important;} .pL95{padding-left:95px !important;} .pL100{padding-left:100px !important;} .pL160{padding-left:160px !important;} .pL180{padding-left:180px !important;}

/*　テキスト */
.tac{text-align: center !important;} .tar{text-align: right !important;}
.txtMin{font-family:"Times New Roman", Times, "Hiragino Mincho ProN", "Hiragino Mincho Pro","HG明朝B","ＭＳ 明朝", serif;}
.u_line{ border-bottom:1px solid;}
.pink{color: #E53451; }

/* ----------------------- Basic Style */

body { font-family: "Sawarabi Mincho",'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W5', 'Meiryo', 'メイリオ','ＭＳ Ｐゴシック', 'ＭＳ ゴシック', Osaka, Osaka-等幅, sans-serif; font-size:16px; line-height:150%; background:#fff; letter-spacing:normal; color:#111;  -webkit-text-size-adjust: 100%;}
html>/**/body { font-size: 16px; }
* + html body { font-family: "メイリオ","Meiryo"; }

a { text-decoration: none;}
a:link{color: #23410d;}
a:hover.mo01 img { filter: alpha(opacity=75); -moz-opacity: 0.75; opacity: 0.75; }

#wrapper { /*width:1200px; min-width:1200px; position:relative;*/ z-index:99; margin:0 auto; }
#container { width:1280px; margin:0 auto; min-width:960px; display: block; /*background:#fff;*/}

section{ margin:0 auto; padding:15px 50px;}

/* ----------------------- header*/
#wrapper header{background:#0089CC;}
#wrapper header #headerinner{width: 960px; margin: 0 auto;}
#wrapper header #headerinner h1 img{width: 260px;}

/* ロールオーバー */
.ro01:hover { opacity:.7; -webkit-opacity:.7; -moz-opacity:.7; filter:alpha(opacity=70); -ms-filter:"alpha(opacity=70)"; }
.ro01 { -webkit-transition:opacity 0.3s; -moz-transition:opacity 0.3s; -ms-transition:opacity 0.3s; transition:opacity 0.3s; }


/*---------------------------------------------
共通ヘッダー02
---------------------------------------------*/

.head_r{ width:280px; float:right; margin-right:-30px;}
.gsc{ float:right; text-align:right;}
.sns{float:right; text-align:right; margin-left:0px;}
.sns img{ vertical-align:middle; margin-left:3px; }
.member{ text-align:center; background-color:#d2eeff; margin-top:3px; border:1px solid #CCCCCC;}
.member img{ margin-left:3px; margin-top:10px; margin-bottom:10px;}

#gHeader .logo{ float:left; margin-top:15px;}
#gHeader .sitename{ float:left; margin:15px 0 0 15px; font-family:"ヒラギノ明朝 Pro W5", "Hiragino Mincho Pro", "Sawarabi Mincho", serif font-weight:bold;}
.sitename a {font-weight: bold; color: #977E6E;}
.col_4.Header_btn {width: 750px; float: right;}

#gHeader02{ background:url(../img/background_01.jpg) no-repeat  center; background-size:cover;}

#gHeader02 .topline{ height:2px; background-color:#3a3863;}
#gHeader02 .hdWrp { width:900px; height:160px; margin:0 auto; margin-top:15px; margin-bottom:15px; position:relative;  }
#gHeader02 .hdWrp h1,#gHeader02 .hdWrp dl,#gHeader02 .hdWrp .tel,#gHeader02 .hdWrp .cart,#gHeader02 .hdWrp ul { position:absolute; }
#gHeader02 .hdWrp h1 { top:5; left:0; width:235px; height:81px; }
#gHeader02 .hdWrp .tel { top:0px; left: 170px;}
#gHeader02 .hdWrp ul { top:0; left:610px; height:55px; padding:30px 10px 0 10px; line-height:1.6; border-left:1px dotted rgba(118,118,118,1.00);; }
#gHeader02 .hdWrp ul li { color:#b8b7c8; background:URL(../img/cmn/arrow03.png) no-repeat left center; padding-left:18px; }
#gHeader02 .hdWrp ul li a { color:#504e75; }
#gHeader02 .hdWrp .cart { top:0; right:0; padding:30px 0 20px 33px; margin-bottom:10px; border-left:1px dotted #dfe1e6; }
#gHeader02 .mo02{ margin-left:-30px;}

#gHeader03{ background:url(../img/background_02.jpg) no-repeat top  center; background-size:cover;}
#gHeader03 .hdWrp { width:900px; height:87px; margin:0 auto; margin-bottom:15px; position:relative;  }
#gHeader03 .mo02{ margin-top:15px; margin-left:-50px;}


/*　グロナビ　*/
#gNav, #gNav * { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -o-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box; }
#gNav {position: relative; z-index: 9999; width: 100%; min-width: 1280px; height: auto; line-height: 1.4; background-image:url(../img/com/head_back.jpg); background-repeat:repeat-x;}
#gNav .gMenu { width:1280px; margin:0 auto; }
#gNav .gMenu li a { display:block;  color:#7b4c00; font-weight:bold;}
#gNav .gMenu li a:hover { text-decoration:none; }
#gNav .gMenu > li { float:left; width:14%; /*border-right:1px solid rgba(85,85,85,1.00);*/ font-size:15px; text-align:center; padding:15px 0;position: relative; }
#gNav .gMenu > li.frst a { /*border-left:1px solid rgba(85,85,85,1.00);*/ height: 41px; }
#gNav .gMenu > li.frst a img{margin-top: 10px;}
#gNav .gMenu > li > a { height:auto;}
#gNav .gMenu > li.ln2 > a { padding:6px 0 0 0; }
#gNav .gMenu > li.ln1 a{height: 41px; line-height: 41px;}
#gNav .gMenu > li:hover { background:#f4d16b url(../img/cmn/gNavBg_on.jpg) repeat-x top center; -webkit-transition:all 0.5s; transition:all 0.5s; }
#gNav .gMenu .menu_2nd { visibility:hidden; opacity:0; z-index:1; position:absolute; top:40px; width: 100%; /*width:240px !important;*/ background:#555f64; text-align:left; line-height:1.5; -webkit-transition:all 0.2s ease; transition:all 0.2s ease; }
#gNav .gMenu .menu_2nd li { border-top:1px solid rgba(27,27,27,1.00); font-size:15px; font-weight:bold; }
#gNav .gMenu .menu_2nd li a { padding:8px 10px; }
#gNav .gMenu .menu_2nd li a:hover { background:rgba(25,25,25,1.00); }
#gNav .gMenu:before, #gNav .gMenu:after { content:" "; display:table; }
#gNav .gMenu:after { clear:both; }
#gNav .gMenu { *zoom:1; }
#gNav .gMenu > .menu_1st { position:relative; }
#gNav .gMenu .menu_1st:hover .menu_2nd { top:52px; visibility:visible; opacity:1; }


/*---------------------------------------------
共通ヘッダー
---------------------------------------------*/
#gHeader { width:100%; min-width:960px; height:auto; margin:0 auto;position:relative; z-index:100; background:#fff;}
#gHeader div h2 { width:960px; height:auto; margin:0 auto; padding:7px 0 0 0; }
#gHeader div h2 a { }
#gHeader .inner {width: 1280px; margin: 0 auto; background:#fff;}

/*---------------------------------------------
共通フッター
---------------------------------------------*/
#gFooter { width: 100%; min-width: 960px; text-align: center; background: #977E6E; color:#fff;}
#gFooter a{ color:#fff;}

#gFooter .gFooterInner { width:960px; height:auto; margin: 10px auto 0;  /*text-shadow:1px 1px 1px rgba(102, 102, 102,1);*/ }
#gFooter .guide_ttl{text-align: center; font-size: 18px; line-height: 170%; background: #555; color: #fff; }
#gFooter .gFooterInner p.links { float:left; width:100%; height:40px; line-height:40px; font-size:12px; color:#fff; text-align:center; }
#gFooter .gFooterInner p.links span { padding:0 15px 0 0; }
#gFooter .gFooterInner p.links a { color:#504e75; background:URL(../img/cmn/arrow02.png) no-repeat left center; min-height:12px; height:auto !important; height:12px; padding:0 0 0 18px; }
#gFooter .gFooterInner p.logo { float:right; width:215px; }
#gFooter .copy { width:100%; height:30px; line-height:30px; text-align:center; color:#fff; font-size:12px; background:#977E6E;}

#gFooter .footer_tbl tr{ height:20px;}
#gFooter .footer_tbl td{ padding:5px;}
.smrsc{margin: 10px 20px 0 0; text-align: center; background: #e70012; color: #fff; padding: 3px; font-weight: bold; font-size: 14px; letter-spacing: 1px;}
.smrsc span{letter-spacing: 0; font-size: 13px;}
.redtext{color: #e70012; font-weight: bold; line-height: 1.8;}
.redtext span{background: #e70012; color: #fff; padding: 2px 5px; letter-spacing: 1px; font-weight: bold;}

/*------------------------------*/
/* SPスライドメニュー追加　*/
.pc{ display:inline;}
.smp{ display:none;}

.smp_header {
    display: block;
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    z-index: 90;
    background: #fff url(../img/smp_logo.png);
    background-position: center;
    background-size: 43%;
    background-repeat: no-repeat;
    box-sizing: border-box;
    padding: 3%;
	border-bottom:#4D4D4D solid 1px;
}

.acd-check{
    display: none;
}
.acd-label{
	font-size: 16px;
    background: #333;
    color: #fff;
    display: block;
    margin-bottom: 1px;
    padding: 10px 10px 10px 1.2em;
}
.acd-content{
    border: 1px solid #333;
    height: 0;
    opacity: 0;
    padding: 0 10px;
    transition: .5s;
    visibility: hidden;
}
.acd-check:checked + .acd-label + .acd-content{
    height:auto;
    opacity: 1;
    padding: 10px;
    visibility: visible;
}


.acd-content .fa{
	font-size: 20px;
}

.menu-container {
  margin: 0;
  position: relative;
}

.menu-container .menu {
  border: 1px solid #ccc;
  display: flex;
  justify-content: space-between;
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu-container .menu .menu-item {
  flex: 1;
}

.menu-container .menu .menu-item a {
  background: #fff;
  border-right: 1px solid #ccc;
  color: #333;
  display: block;
  padding: 0.6em 0.4em;
  text-align: center;
  text-decoration: none;
}

.menu-container .menu .menu-item a:hover {
  background: #ccc;
  color: #ffffff;
}

.menu-container .menu .menu-item:last-child a {
  border-right: none;
}

@media screen and (max-width: 768px) {
	
.pc{ display:none;}
.smp{ display:inline;}

	#container{ margin-top:50px;}

  .menu-container .menu {
    display: none;
    position: absolute;
    width: 100%;
  }
  .menu-container .menu .menu-item a {
    border-bottom: 1px solid #ccc;
    border-right: none;
  }
  .menu-container .menu .menu-item:last-child a {
    border-bottom: none;
  }
  
.push_left{
	margin-left: 6px;
}
.push_right{
	margin-right: 6px;
}
code,xmp{
	white-space: normal !important;
}
textarea{
    margin-bottom: 0px;
    min-height: 200px;
    line-height: 1;
}

.close{
    width: 20px;
    height: 23px;
    position: relative;
    display: inline-block;
    vertical-align: text-bottom;
    text-align: center;
    cursor:pointer;
}
.close:before, .close:after {
    position: absolute;
    left: 10px;
    content: ' ';
    height: 29px;
    width: 3px;
    background-color: #fff;
}

.close:before {
  transform: rotate(45deg);
}

.close:after {
  transform: rotate(-45deg);
}

.card{
	margin:20px;
    border-radius: 5px;
    background:#fff;
	box-shadow:0px 0px 20px rgba(0, 0, 0, 0.1)
}


/* メニューの背景色・文字色 */
.card_title,.pushbar.title,.pushbar{
    background: #111!important;
    color: #fff;
	z-index: 1500;
}

.card_title,.title{
	padding: 15px 20px;
    font-weight: bold;
	font-size: 15px;
}
.card_title{
border-radius: 4px 4px 0px 0px;
}
.card_content{
	padding: 15px;
}

a.button.getBtn{
margin-top: 16px;background-color:#fff;color:#fff;border-color: #fff;
}

.small{
font-size: 14px;
font-weight: 400;
}
.menu li{
    list-style: none;
    padding: 15px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    display: block;
    margin: 0px;
    color: rgba(255, 255, 255, 0.65);
}

.button, button, input[type='button'], input[type='reset'], input[type='submit'] {
    background-color:transparent;
    border:none;
	color:#fff;
}
button a{ color:#fff;}

aside ul {
  border: solid 2px #676767;
  padding: 0 0.3em;
  position: relative;
}

aside li {
	font-family: "メイリオ";
	font-weight:500;
	font-size: 16px;
  line-height: 1.8;
  padding: 0.5em 0 0.5em 2em;
  border-bottom: dashed 1px #838383;
  list-style-type: none!important;
}
aside li a{ color:#fff;}

aside li:before {
  font-family:Georgia, "Times New Roman", Times, serif;
  content: ">";/*アイコン種類*/
  position: absolute;
  left : 1em; /*左端からのアイコンまで*/
  color: #dcdcdc; /*アイコン色*/
}

aside li:last-of-type{
  border-bottom: none;
}

.pushbar.from_top a{
    color: #fff;
    text-decoration: none;
}

.pushbar.opened{
display: block;
}

html.pushbar_locked{
    overflow: hidden;
    -ms-touch-action: none;
    touch-action: none;
}


.pushbar_locked .pushbar_main_content.pushbar_blur{
	filter:blur(15px);
}
.pushbar{
	z-index: 1000;
	position: fixed;
	will-change: transform;
	overflow-y: scroll;
	height:100%;
	transition:transform 0.5s ease;
	will-change: transform;
	background:#fff;
}
.pushbar_overlay{
	z-index: -999;
	position: fixed;
	width: 100%;
	max-width: 100%;
	height: 100%;
	min-height: 100vh;
	top: 0;
	left: 0;
    will-change: opacity;
    transition:opacity 0.5s ease;
    opacity:0;
    will-change: opacity;
	background: #3c3442;
}
html.pushbar_locked .pushbar_overlay{
	opacity:0.8;
	z-index: 999;
    transition:opacity 0.5s ease;
}


.pushbar.from_left{
	top: 0;
	left: 0;
	width: 256px;
	max-width: 100%;
	height: 100%;
	min-height: 100vh;
	transform: translateZ(0) translateX(-100%);
}

.pushbar.from_right{
	top: 0;
	right: 0;
	width: 256px;
	max-width: 100%;
	height: 100%;
	min-height: 100vh;
	transform: translateZ(0) translateX(100%);
}

.pushbar.from_top{
	top: 0;
	left: 0;
	width: 100%;
	max-width: 100%;
	min-height: 150px;
	transform: translateZ(0) translateY(-100%);
}
.pushbar.from_bottom{
	bottom: 0;
	left: 0;
	width: 100%;
	max-width: 100%;
	min-height: 150px;
	transform: translateZ(0) translateY(100%);
}

.pushbar.opened{
   transform: translateX(0px) translateY(0px);
}

}