@charset "utf-8";

/* ============================================================
	研究所用ヘッダ
	============================================================ */

/**
 * 研究所用ヘッダ
 * 
 * ハンバーガーボタンを押下した際の動作は、CSSのtransitionを使用しているが、クラスの付け替えはJSにて動かしている。
 * 操作するidやclassはJS内に記載してあり、依存関係があるため注意が必要。
 */

/* override
	============================================================ */

/**
 * メイン記事領域のラッパー
 */
#wrapper2 {
	position : relative;
	max-width : 1000px;
}



/* ヘッダのラッパー
	============================================================ */
#maga_head_wrap {
	max-width: 1000px;
	padding : .5rem 0;
}

/* ローソンIDのリンク画像
	============================================================ */
@media screen and (max-width: 750px) {
	#lawson_id_link img {
		width : 38px;
		object-position : 0 50%;
		object-fit : cover;
	}
}

/* 検索フォーム
	============================================================ */
.search-form-container {
	margin : 0;
	margin-right : 1rem;
	border-radius : 30px;
}
.search-form-container form {
	height : 100%;
}
@media screen and (min-width: 751px) {
	#lawson_lab_search_form_in_menu {
		display : none;
	}
}
@media screen and (max-width: 750px) {
	#lawson_lab_search_form {
		display : none;
	}
	.search-form-container.column {
		padding : 0 .4rem !important;
		margin : 1rem !important;
	}
}

/* (検索フォームの)入力
	============================================================ */
.input {
	width: auto;
	margin: 10px;
	position:relative;
}
.input form {
	text-align: center;
}
.input button{
	position: absolute;
	width:40px;
	top: 0px;
	right: 5px;
	background: none;
	border: 0;
	padding: 0;
	height: 40px;
	cursor: pointer;
	line-height: 2;
	outline:none;
}
.input input {
	width: 100%;
	height : 100%;
	font-size: 12px;
	border : none;
	outline : none;
	box-sizing: border-box;
	background-color: #fff;
	border-radius: 6px;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	margin: 0 auto;
	background:url(/common2015/sp/img/input_btn.png) no-repeat right 2% center;
	background-size:20px 20px;
}


/* ヘッダのインナー  #maga_header
	============================================================ */
#maga_header .level {
	margin : 0;
}
@media screen and (max-width: 750px) {
	#maga_header img {
		height : 55px;
		max-height : 40px;
	}
	#maga_header .level-item:last-child {
		/* margin-right : 1rem; */
	}
	#maga_header .level-right .level-item {
		margin-right : .4rem;
	}
}

/* サブメニュー
	============================================================ */
nav.submenu {
	position : absolute;
	top : 0;
	opacity : 0;
	width: 100%;
	z-index : 100;
}
nav.submenu a {
	color : #333;
	display : block;
}
@media screen and (min-width: 751px) {
	nav.submenu {
		left : 200%;
		padding : 0;
		transition-property : height, opacity, padding;
		transition-duration : 0.4s;
		transition-timing-function : ease-in-out;
	}
	nav.submenu .hero-body {
		padding : 3rem 0;
	}
	nav.submenu.open {
		opacity : 1;
		left : 0 !important;
		padding : 2rem;
		max-width : 1000px; /* IE用 */
	}
	nav.submenu a {
		font-size : 1.1rem;
	}
}
@media screen and (max-width: 750px) {
	nav.submenu {
		left : 110% !important;
		padding : .7rem;
		transition-property : left, opacity;
		transition-duration : 0.3s;
		transition-timing-function : ease;
	}
	nav.submenu.open {
		opacity : 1;
		left : 0 !important;
	}
	nav.submenu section.hero {
		display : none;
	}
	nav.submenu .column {
		position : relative;
		padding : .8rem 0 .6rem;
		padding-left : 1.2rem;
	}
	nav.submenu .column:nth-child(even) {
		background-color : #f9f9f9;
	}
	nav.submenu a:after {
		content: ' ';
		right: 4%;
		position: absolute;
		width: .5rem;
		height: .5rem;
		border-top: #bbb 1px solid;
		border-right: #bbb 1px solid;
		transform: rotate(45deg);
		top: 40%;
	}
}


/* ハンバーガーアイコン
	============================================================ */
/**
  *
  * ハンバーガーの線の太さをいじる場合は、それぞれの線の位置やトランスフォーム時の値も変更する必要がある。
  * 
  */
.menu-trigger,
.menu-trigger span {
	display: inline-block;
	transition: all .4s;
	box-sizing: border-box;
}
.menu-trigger {
	position: relative;
}
.menu-trigger span {
	position: absolute;
	left: 0;
	width: 100%;
	background-color: #666;
}
.menu-trigger span:nth-of-type(1) {
	top: 0;
}
.menu-trigger span:nth-of-type(3) {
	bottom: 0;
}
.menu-trigger.active span:nth-of-type(2) {
	opacity: 0;
}
@media screen and (min-width: 751px) {
	.menu-trigger {
		width: 40px;
		height: 32px;
	}
	.menu-trigger span {
		height: 2px;
		border-radius: 2px;
	}
	.menu-trigger span:nth-of-type(2) {
		top: 15px;
	}
	.menu-trigger.active span:nth-of-type(1) {
		-webkit-transform: translateY(15px) rotate(-45deg);
		transform: translateY(15px) rotate(-45deg);
	}
	.menu-trigger.active span:nth-of-type(3) {
		-webkit-transform: translateY(-15px) rotate(45deg);
		transform: translateY(-15px) rotate(45deg);
	}
}
@media screen and (max-width: 750px) {
	.menu-trigger {
		width: 32px;
		height: 26px;
	}
	.menu-trigger span {
		height: 2px;
		border-radius: 2px;
	}
	.menu-trigger span:nth-of-type(2) {
		top: 12px;
	}
	.menu-trigger.active span:nth-of-type(1) {
		-webkit-transform: translateY(12px) rotate(-45deg);
		transform: translateY(12px) rotate(-45deg);
	}
	.menu-trigger.active span:nth-of-type(3) {
		-webkit-transform: translateY(-12px) rotate(45deg);
		transform: translateY(-12px) rotate(45deg);
	}
}