@charset "utf-8";

/* ウィンドウ幅が681～1200pxの場合に適用するCSS */

@media only screen and (min-width:681px) and (max-width: 1200px) {
	body {
		background: url(../images/bg_top.jpg) no-repeat center -100px;
		background-size: 1400px auto;
	}
	body,
	body {
		background: url(../images/bg_top.jpg) no-repeat center -150px;
		background-size: 1200px auto;
	}
}


/* ウィンドウ幅が0～680pxの場合に適用するCSS */

@media only screen and (min-width:1px) and (max-width: 680px) {
	body {
		width: 100%;
		min-width: 100%;
	}
	body {
		background: url(../images/bg_top.jpg) no-repeat center -20px;
		background-size: 750px auto;
	}
	ul.list li,
	ol.list li {
		margin-bottom: 1em;
	}
	.sp_none {
		display: none !important;
	}
	.sp_show {
		display: block !important;
	}
	.pdf {
		margin-bottom: 1em;
	}
/* ↓ common
================================== */
	.fl_right,
	.fl_left,
	.fl_rightS,
	.fl_leftS {
		float: none;
		margin: 0 auto 20px;
	}
	.fl_right img,
	.fl_left img,
	.fl_rightS img,
	.fl_leftS img,
	.photo_2line img,
	.photo_4line img {
		width: 100%;
		max-width: 270px;
		margin: 0 auto;
	}
	.photo_2line li,
	.photo_4line li {
		width: 100%;
		max-width: 310px;
	}
	.ttlDesign1 {
		font-size: 1.6rem;
	}

/* ↓ header
================================== */
	#header {
		max-width: none;
		min-width: auto;
		width: 100%;
		margin: 0 auto;
		padding: 0;
	}
	.header_inr {
		width: 100%;
		margin: 0 auto;
		padding: 0;
	}
	.h_left {
		float: none;
	}
	.h_right {
		float: none;
	}
	.logo {
		float: none;
		position: absolute;
		top: 25%;
		bottom: 0;
		left: 20px;
		width: 45%;
		height: auto;
		z-index: 400;
		margin: auto 0;
		padding: 0;
	}
	.logo img {
		width: auto;
		height: 27px;
	}
	.jst_logo {
		display: none;
	}
	.sns {
		position: static;
		margin: 0;
	}
	.search {
		display: none;
		margin: 0;
		padding: 0 20px;
		position: absolute;
		top: 50px;
		left: 0;
		width: 100%;
		height: 70px;
		background: #231d17;
		border-bottom: 1px solid #fff;
		z-index: 300;
	}
	/* Google カスタム検索 */
	.cse .gsc-control-cse,
	.gsc-control-cse {
		position: relative !important;
		background: none !important;
		border: none !important;
		margin-top: 14px !important;
		padding: 0 !important;
	}
	table.gsc-search-box td {
		vertical-align: top !important;
		padding: 0 !important;
	}
	table.gsc-search-box td.gsc-search-button {
		width: 20px;
		height: 20px;
		position: absolute;
		top: 10px;
		right: 13px;
	}
	input.gsc-input,
	.gsc-input-box,
	.gsc-input-box-hover,
	.gsc-input-box-focus {
		border-radius: 3px;
	}
	.gsc-search-box-tools .gsc-search-box .gsc-input {
		width: 100% !important;
		height: 40px !important;
		background-color: rgba(255, 255, 255, 0) !important;
	}
	input.gsc-input,
	.gsc-input-box,
	.gsc-input-box-hover,
	.gsc-input-box-focus {
		border-color: #ccc !important;
		height: 40px !important;
		border-radius: 40px !important;
	}
	input.gsc-search-button,
	input.gsc-search-button:hover,
	input.gsc-search-button:focus {
		opacity: 0 !important;
	}
	.cse .gsc-search-button input.gsc-search-button-v2,
	input.gsc-search-button-v2 {
		width: 20px !important;
		height: 20px !important;
		min-width: 20px !important;
		border: 0 !important;
		vertical-align: top;
		margin: 0 !important;
		padding: 0 !important;
	}
	.gsc-results-wrapper-overlay {
		width: 85% !important;
		left: 8% !important;
	}
	/* ↓ gnav
================================== */
	#menu {
		position: static;
		width: 100%;
	}
	.menu>li {
		display: block;
		text-align: left;
		border: none;
		border-bottom: 1px solid #FFF;
		width: 100%;
		margin: 0;
	}
	.menu>li:first-child {
		border-left: none;
	}
	.menu>li a {
		color: #FFF;
	}
	.menu>li>a:hover {
		color: #7a6958;
	}
	.menu>li>a {
		position: static;
		min-height: 50px;
		background: url(../images/cmn/icn_arw_whtr.svg) no-repeat 95% center;
		-webkit-background-size: 8px auto;
		background-size: 8px aut;
	}
	.menu>li.arw_btm>a {
		background: url(../images/cmn/icn_arw_Lbtm.svg) no-repeat 20px center;
	}
	.menu>li>a::before {
		display: none;
	}
	.menu>li>a::after {
		display: none;
	}
	.dl-menuwrapper ul.sns_btn {
		position: absolute;
		top: 10px;
		right: 70px;
		background: #fff;
	}
	.dl-menuwrapper ul.sns_btn li a {
		display: block;
		padding: 0;
		line-height: 1.0;
	}
	.dl-menu {
		display: none;
	}
	.dl-trigger {
		display: block;
	}
	.dl-trigger img {
		width: 30px;
		height: auto;
		margin-top: 18px;
	}
	.dl-trigger span {
		display: inline-block;
		transition: all .4s;
	}
	.dl-trigger span {
		position: absolute;
		left: 10px;
		width: 25px;
		height: 4px;
		background-color: #7a6958;
	}
	.dl-trigger span:nth-of-type(1) {
		top: 10px;
	}
	.dl-trigger span:nth-of-type(2) {
		top: 18px;
	}
	.dl-trigger span:nth-of-type(3) {
		bottom: 14px;
	}
	.dl-trigger.active span {
		background-color: #7a6958;
	}
	.dl-trigger.active span:nth-of-type(1) {
		-webkit-transform: translateY(8px) rotate(-45deg);
		transform: translateY(8px) rotate(-45deg);
	}
	.dl-trigger.active span:nth-of-type(2) {
		opacity: 0;
	}
	.dl-trigger.active span:nth-of-type(3) {
		-webkit-transform: translateY(-8px) rotate(45deg);
		transform: translateY(-8px) rotate(45deg);
	}
	.dl-menuwrapper {
		position: relative;
		background: #FFF;
		width: 100%;
		height: 50px;
		z-index: 300;
	}
	.dl-menuwrapper button {
		float: right;
		background: #fff;
		border: none;
		width: 44px;
		height: 44px;
		text-indent: -900em;
		overflow: hidden;
		position: relative;
		cursor: pointer;
		outline: none;
		margin-right: 15px;
	}
	.dl-menuwrapper ul {
		position: relative;
		background: #231d17;
	}
	.dl-menuwrapper li a {
		display: block;
		position: relative;
		padding: 9px 20px 9px 5%;
		font-size: 16px;
		line-height: 32px;
		font-weight: 600;
		color: #fff;
		outline: none;
	}
	.no-touch .dl-menuwrapper li a:hover {
		background: none;
	}
	.dl-menuwrapper .dl-menu {
		position: absolute;
		top: 120px;
		right: 0;
		left: 0;
		background: #231d17;
	}
	.layer {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: #000;
		-ms-filter: "alpha(opacity=50)";
		/* ie 8 */
		opacity: 0.6;
		z-index: 200;
	}
	.pankuzu {
		margin: 10px 10px 0 10px;
	}
	.pankuzu li {
		font-size: 1.0rem;
		line-height: 1.6;
	}
	.pankuzu_inr {
		max-width: none;
		min-width: auto;
	}
	.pankuzu_inr span span {
		font-size: 1.2rem;
	}
	/* ↓ footer
================================== */
	.footer_top {
		height: auto;
		line-height: 1.0;
	}
	.ft_top_inr {
		max-width: none;
		min-width: auto;
		width: 100%;
		display: block;
		padding: 0;
	}
	.gotop a {
		position: absolute;
		top: -40px;
		right: 0;
		width: 40px;
		height: 40px;
		line-height: 40px;
		font-size: 1.4rem;
	}
	.privacy_link {
		width: 100%;
		background: #f2efeb;
		padding: 0;
		font-size: 0;
	}
	.privacy_link li a {
		display: block;
		padding: 13px 0 13px 10px;
		color: #000;
		background: url(../images/cmn/icn_arw_sg.svg) no-repeat 95% center;
	}
	.privacy_link li a:hover {
		text-decoration: none;
	}
	.privacy_link li {
		display: inline-block;
		width: 50%;
		margin-right: 0;
		text-align: left;
		border-top: 1px solid #c6c6c6;
		border-bottom: 1px solid #c6c6c6;
		border-right: 1px solid #c6c6c6;
	}
	.footer_btm {
		width: 100%;
		display: block;
		background: #f2efeb;
		padding: 0;
	}
	.ft_btm_inr {
		max-width: none;
		min-width: auto;
	}
	.footer_nav {
		text-align: left;
		margin: 0;
	}
	.footer_nav>li {
		display: inline-block;
		padding: 0;
		border: 0;
		border-bottom: 1px solid #c6c6c6;
		border-right: 1px solid #c6c6c6;
		width: 50%;
	}
	.footer_nav>li:nth-child(even) {
		border-right: 0;
	}
	.footer_nav>li:last-child {
		border-bottom: 1px solid #c6c6c6;
	}
	.footer_nav>li>a {
		padding-right: 10px;
		background: url(../images/cmn/icn_arw_sg.svg) no-repeat 95% center;
	}
	.footer_nav li a {
		display: block;
		padding: 13px 0 13px 10px;
		font-size: 1.4rem;
		color: #000;
	}
	.footer_nav li a:hover {
		text-decoration: none;
	}
	.footer_nav li.pc_none {
		display: inline-block;
	}
	.footer_logo {
		padding: 30px 10px;
		background: #FFF;
	}
	.footer_logo img {
		width: 100%;
		max-width: 282px;
		height: auto;
		margin: 0 auto;
	}
	.flexbox {
		display: block;
	}
	.copy {
		background: #332c25;
		font-size: 1.0rem;
		font-style: normal;
	}
	.f_jst_logo {
		display: block;
		text-align: center;
		background: #fff;
		height: 75px;
		position: relative;
	}
	.f_jst_logo img {
		position: absolute;
		width: 207px;
		height: auto;
		top: 15px;
		left: 0;
		right: 0;
		margin: 0 auto;
	}
	/* ↓ layout
================================== */
	#main_top,
	#main_contents_inr {
		min-width: auto;
	}
	#main_top {
		padding: 35px 0 50px 0;
	}
	#main_contents {
		overflow: hidden;
		background: #fff;
		min-height: 300px;
	}
	#main_contents_inr {
		padding: 0;
	}
	#nonfixed_containar #research_top,
	#nonfixed_containar #support_top {
		background: none;
		padding: 20px 0;
		margin: 0;
	}
	#fixed_containar,
	#research_top_inr,
	#support_top_inr {
		width: 100%;
		max-width: none;
		min-width: 100%;
		margin: 0 auto;
	}
	#research_top_inr,
	#support_top_inr {
		padding: 0 20px;
	}
	#research_contents,
	#support_contents {
		width: 100%;
		max-width: none;
		min-width: 100%;
		padding: 0 20px;
	}
	.col_wrap {
		float: none;
		padding-bottom: 45px;
	}
	#main_col {
		overflow: hidden;
		margin: 0;
		padding: 0 10px;
	}
	#side_col {
		float: none;
		width: 100%;
		margin: 0 0 40px 0;
		padding: 0 10px;
	}
	.one_col {
		width: 100%;
		max-width: none;
		min-width: 100%;
	}
	#main_col.partition {
		border: none;
		padding: 0;
	}
	#main_col section,
	#side_col section {
		font-size: 1.4rem;
	}
	#main_col h3,
	.one_col h3 {
		color: #333;
		font-size: 2.1rem;
		font-weight: bold;
		line-height: 1.5;
		position: relative;
		padding-bottom: 5px;
		margin-bottom: 5px;
	}
	#main_col h3:before,
	.one_col h3:before {
		content: '';
		background: #7a6958;
		width: 70px;
		height: 2px;
		position: absolute;
		bottom: 0;
		left: 0;
	}
	#main_col h3 {
		padding-bottom: 10px;
		margin-bottom: 1em;
		text-align: center;
	}
	#main_col h3:before {
		width: 50px;
		position: absolute;
		right: 0;
		margin: auto;
	}
	#main_col h4 {
		font-size: 1.7rem;
	}
	#side_col h3 {
		border-bottom: 2px solid #bdc1b3;
	}
	#side_col h3::before {
		width: 200px;
		height: 2px;
		bottom: -2px;
	}
	.one_col h3 {
		text-align: center;
		margin-bottom: 30px;
		padding: 40px 0 8px;
	}
	.one_col h3:before {
		right: 0;
		margin: 0 auto;
	}
	#side_col .side_movie {
		position: relative;
		width: 90%;
		height: 0;
		padding-top: 50.625%;
		margin: 0 auto;
	}
	#side_col .side_movie iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	#side_col ul.side_bnr {
		width: 230px;
		margin: 30px auto;
	}
	#side_col .sns_share {
		width: 90%;
		margin: 0 auto;
	}
	#side_col .sns_share p,
	#side_col .sns_share ul {
		margin-top: 10px;
	}
	#side_col .sns_share ul li img {
		width: 30px;
		height: 30px;
	}
	/* ↓ top_page
================================== */
	.no-script {
		width: 100%;
	}
	.main_message {
		max-width: none;
		min-width: auto;
	}
	.main_message h2 {
		margin: 0 auto;
		font-size: 1.9rem;
		line-height: 2.1;
	}
	.main_message h2 span {
		font-size: 3.4rem;
		line-height: 1.2;
	}
	.main_message h2 span br {
		display: block;
	}
	.main_message p {
		margin-bottom: 0;
	}
	.main_message p.main_txt {
		font-size: 1.6rem;
		margin-bottom: 40px;
	}
	.main_message p.main_btn a {
		width: 290px;
		color: #fff;
		font-size: 1.6rem;
		padding: 8px 7px 8px 0;
	}
	.main_message p.main_btn a::after {
		content: '';
		background: url(../images/cmn/icn_arw_whtr.svg) no-repeat;
		-webkit-background-size: 7px auto;
		background-size: 7px auto;
		width: 7px;
		height: 12px;
		position: absolute;
		top: 10px;
		right: 18px;
	}
	.main_message p.main_btn a:hover {
		background: rgba(122, 105, 88, 0.6);
		border: 1px solid rgba(0, 0, 0, 0);
	}
	.top_list_btn {
		display: none;
	}
	.twitter_wrap {
		margin: 0 20px 80px 20px;
	}
	.twitter_wrap .twitter-timeline {
		width: 95% !important;
	}
	#main_under {
		width: 100%;
		max-width: none;
		min-width: 100%;
		margin: o auto;
	}
	#main_under h2 {
		font-size: 3.0rem;
		margin: 52px auto;
	}
	.sub_ttl {
		padding: 0 10px;
	}
	/* ↓ second page
================================== */
	/* ↓ sec_common */
	.sp_btn_01 {
		display: block;
		text-align: center;
	}
	.sp_btn_01 a {
		display: block;
		color: #fff;
		background: #7a6958;
		width: 80%;
		margin: 0 auto;
		padding: 10px;
	}
	.sp_btn_01 a span {
		position: relative;
	}
	.sp_btn_01 a span::after {
		content: '';
		background: url(../images/cmn/icn_arw_whtr.svg) no-repeat;
		-webkit-background-size: 7px auto;
		background-size: 7px auto;
		width: 7px;
		height: 12px;
		position: absolute;
		top: 0;
		bottom: 0;
		right: -15px;
		margin: auto 0;
	}
	#contents_btm_inr {
		max-width: none;
		min-width: 100%;
		padding: 40px 20px;
	}
	ul.link_btn {
		display: block;
		margin-bottom: 40px;
	}
	ul.link_btn li {
		width: 100%;
		margin: 0 0 35px 0;
		padding: 0;
	}
	ul.link_btn li a {
		width: auto;
		background: none;
		font-size: 1.7rem;
		padding: 16px 0;
	}
	ul.link_btn.flx_ai li a:first-child {
		margin-bottom: 35px;
	}
	ul.link_btn li.return a span {
		padding-left: 25px;
	}
	ul.link_btn li.return a span:before {
		-webkit-background-size: 18px 15px;
		background-size: 18px 15px;
		width: 18px;
		height: 15px;
	}
	ul.link_btn li.blank a span {
		padding-right: 25px;
	}
	ul.link_btn li.blank a span:before {
		background-size: 19px auto;
		width: 19px;
		height: 18px;
	}
	/* ↓ event & research */
	#research_lead {
		float: none;
		width: 100%;
		margin-top: calc(51.75% + 90px);
		padding: 20px;
	}
	#research_lead h3 {
		font-size: 1.7rem;
	}
	#research_lead .name {
		font-size: 1.8rem;
	}
	#research_lead .affiliation,
	#research_lead .text {
		font-size: 1.5rem;
	}
	#research_lead ul.program_tags img {
		width: 70px;
	}
	#research_lead ul.keyword li {
		font-size: 1.1rem;
	}
	#research_movie {
		width: 92%;
		height: 0;
		padding-top: 51.75%;
		left: 0;
		right: 0;
		margin: 0 auto;
	}
	#research_movie iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	ul.anchor_link {
		width: 90%;
		margin: 30px auto;
	}
	ul.anchor_link li a {
		-webkit-background-size: 10px auto;
		background-size: 10px auto;
		text-align: center;
		font-size: 1.4rem;
	}
	ul.anchor_link li a:hover {
		opacity: 0.6;
	}
	ul.program_list {
		display: block;
	}
	ul.program_list li {
		width: 100%;
		margin-bottom: 30px;
	}
	ul.program_list li:after {
		content: "";
		clear: both;
		display: block;
	}
	ul.program_list li .new img {
		width: 35px;
		height: auto;
	}
	ul.program_list li a,
	ul.program_list li > div {
		overflow: hidden;
		width: 100%;
		padding: 20px 10px;
	}
	ul.program_list li img {
		width: 70px;
		height: 70px;
		position: absolute;
		top: 20px;
		left: 10px;
	}
	ul.program_list li ul.program_tags {
		float: left;
		margin: 0;
		padding-top: 80px;
	}
	ul.program_list li ul.program_tags li {
		display: block;
		width: 70px;
		padding: 0;
		margin-bottom: 5px;
	}
	ul.program_list li ul.program_tags li:last-child {
		margin-right: 0;
	}
	ul.program_list li ul.program_tags img {
		width: 70px;
		position: static;
	}
	ul.program_list li dl,
	ul.program_list li a ul.keyword {
		float: right;
		width: 70%;
		/* calc非サポートブラウザ用 */
		width: calc(100% - 80px);
		margin: -4px 0 15px 0;
	}
	ul.program_list li dl {
		margin-bottom: 1em;
	}
	ul.program_list li dl dd {
		margin: 0;
	}
	ul.program_list li ul.keyword li {
		margin: 0;
	}
	ul.program_list li a .caption {
		display: block;
		font-size: 1.4rem;
		color: #3b94d9;
		text-align: right;
		top: auto;
		right: 10px;
		bottom: 10px;
	}
	ul.program_list li a[target="_blank"] .caption {
		background: url(../images/cmn/icn_blank_blu.svg) no-repeat right center;
		-webkit-background-size: 12px auto;
		background-size: 12px auto;
		padding-right: 18px;
	}
	ul.program_list li a .caption {
		background: none;
		padding-right: 0;
	}
	ul.program_list li a .mask {
		top: auto;
		left: auto;
		right: 0;
		bottom: 0;
		transform: none;
		background: rgba(0, 0, 0, 0);
		opacity: 1.0;
	}
	ul.program_list li a:hover .mask {
		transform: none;
	}
	.research_message {
		max-width: 100%;
		min-width: 100%;
		padding: 0 10px;
		font-size: 1.5rem;
	}
	.msg_main br {
		display: block;
	}
	.msg_rmks {
		font-size: 1.3rem;
	}
	/* ↓ support */
	#support_lead {
		float: none;
		width: 100%;
		margin-top: calc(51.75% + 90px);
		padding: 20px;
	}
	#support_lead h3,
	#support_lead h3 span {
		font-size: 1.7rem;
	}
	#support_lead .text {
		font-size: 1.5rem;
	}
	#support_movie {
		width: 92%;
		height: 0;
		padding-top: 51.75%;
		top: 0;
		left: 0;
		right: 0;
		margin: 0 auto;
	}
	.sns_share ul li img {
		width: 30px;
		height: 30px;
	}
	.note {
		font-size: 1.2rem;
		padding: 20px 10px;

	}
	.note dl dd {
		width: 100%;
	}
	.support #main_col h5 span {
		display: block;
		margin-bottom: 5px;
		padding-left: 0;
		font-weight: bold;
	}
	.support #main_col h4 {
		font-size: 1.8rem;
	}
	.support_intro {
		padding: 10px;
	}

	/* contact_page */
	#contact_contents {
		max-width: 100%;
		min-width: 100%;
		padding: 40px 20px;
	}
	#contact_contents section {
		width: 100%;
		padding: 30px 15px;
	}
	.contact_btn span br {
		display: block;
	}

	/* link_page */
	#link_contents {
		max-width: 100%;
		min-width: 100%;
		padding: 40px 20px 80px;
	}
	#link_contents > section {
		padding: 15px;
	}
	#link_contents h3 {
		padding-left: 14px;
		font-size: 1.8rem;
		background-size: 6px;
	}
	#link_contents h4 {
		margin-left: 15px;
		font-size: 1.6rem;
	}
	#link_contents dl {
		margin: 0 0 2em 5px;
	}
	#link_contents dt {
		margin-left: 10px;
	}
	#link_contents dd {
		margin: 0 0 1em 10px;
	}
	#link_contents .more_box {
		margin: 0;
	}
	#link_contents .more_box dt span {
		padding-right: 20px;
		background-size: 14px;
		font-size: 1.4rem;
	}
	#link_contents .more_box dd {
		margin-right: 0;
		font-size: 1.4rem;
	}

	/* ↓ print */
	.print_btn {
		display: none;
	}
}