@charset "UTF-8";

/* ==============================================================
  media query
============================================================== */
@media (max-width:767px) {

	body {
		width: 100%;
	}

	/* ------------------------
	  main
	------------------------ */
	/* pager */
	#main > .pager {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		
		-webkit-flex-wrap : wrap;
		-ms-flex-wrap : wrap;
		flex-wrap : wrap;
		
		-webkit-box-pack:justify;
		-ms-flex-pack:justify;
		justify-content: space-between;
	}
	#main > .pager > li  {
		margin: 0 1rem;
	}
	#main > .pager > li > a  {
		background-color: #337ab7;
		border-radius: 0.4rem;
		border: 0;
		color: #fff;
		display: block;
		font-size: 1.4rem;
		font-weight: bold;
		padding: 1.0rem;
		text-decoration: none;
	}
	
	/* ------------------------
	  aside
	------------------------ */
	#aside.flex {
		display: block;
	}
	#aside.flex > section {
		width: 100%;
	}
	
	/* ------------------------
	  foot
	------------------------ */
	#foot {
		display: block;
	}
	#foot >:first-child {
		margin-right: 0;
	}
	
	/* ------------------------
	  共通クラス
	------------------------ */
	/* モーダル */
	.modal-content {
		width: 90%;
	}
	
	/* youtube */
	#main > article > .video {
		position: relative;
		width: 100%;
		padding-top: 56.25%; /* 16:9 */
	}
	#main > article > .video > iframe {
		position: absolute;
		top: 0;
		right: 0;
		width: 100%;
		height: 100%;
	}
	
	/* hamburger icon */
	#hamburger {
		display: none;
		position: absolute; /* to body */
		right: 24px;
		top: 24px;
		width: 30px;
		height: 25px;
		cursor: pointer;
	}
	#hamburger > div { position: relative; }
	#hamburger > div > span {
		display: block;
		position: absolute; /* to div */
		width: 100%;
		border-bottom: solid 3px #999;
		-webkit-transition: .35s ease-in-out;
		-moz-transition: .35s ease-in-out;
		transition: .35s ease-in-out;
	}
	#hamburger > div > span:nth-child(1) { top: 0; }
	#hamburger > div > span:nth-child(2) { top: 11px; }
	#hamburger > div > span:nth-child(3) { top: 22px; }
	
	/* hamburger menu */
	#head > nav.menu {
		z-index: 2;
		position: absolute;
		top: 71px;
		left: 100%;
		background: rgba(255,255,255,.9);
		width: 50%;
		display: none;
	}
	#head > nav.menu > ul {
		margin: 0;
		border: 1px solid #999;
		display: block;
		border-radius: 0.4rem;
	}
	#head > nav.menu > ul > li {
		margin: 0;
		border: 1px solid #999;
	}
	#head > nav.menu > ul > li > a {
		color: #999;
		padding: 10px;
	}
	#head > nav.menu > ul > li > a:hover,
	#head > nav.menu > ul > li > a:focus,
	#head > nav.menu > ul > li > a.current,
	#head > nav.menu > ul > li > a.current:hover,
	#head > nav.menu > ul > li > a.current:focus {
		background-color: #999;
		border-bottom: none;
		color: #fff;
		padding:10px;
	}
	#head > nav.menu > ul > li > a:first-child {
		padding-left: 10px;
	}
	#head > nav.menu > ul > li > a:last-child {
		padding-right: 10px;
	}
	
	/* toggle button */
	#hamburger { display: block }
	
	/* click toggle button */
	.open-hamburger > #hamburger span:nth-child(1) {
		top: 11px;
		-webkit-transform: rotate(-45deg);
		-moz-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}
	.open-hamburger > #hamburger span:nth-child(2),
	.open-hamburger > #hamburger span:nth-child(3) {
		top: 11px;
		-webkit-transform: rotate(45deg);
		-moz-transform: rotate(45deg);
		transform: rotate(45deg);
	}
	
	/* header menu */
	.open-hamburger > nav.menu {
		-moz-transform: translateX(-100%);
		-webkit-transform: translateX(-100%);
		transform: translateX(-100%);
	}
	
	
	/* ------------------------
	  各コンテンツ
	------------------------ */
	/* ブックマーク */
	.service-bookmark > #main > ul.category > li {
		width: 100%;
	}
	
	/* プロフィール */
	.service-profile > #main > .profile > div.flex {
		display: block;
	}
	.service-profile > #main > .profile > div.flex > div.img,
	.service-profile > #main > .profile > div.flex > dl,
	.service-profile > #main > .profile > div.flex > dl > dt,
	.service-profile > #main > .profile > div.flex > dl > dd
	 {
		width: 100%;
	}
	.service-profile > #main > .profile > div.flex > dl > dd {
		border-left-style: none;
	}
	
	/* フォーム関連 */
	.service-form > #main > form {
		font-size: 1.8rem;
		width: 100%;
	}
	.service-form > #main > form > p > input,
	.service-form > #main > form > p > select,
	.service-form > #main > form > p > input[type=checkbox],
	.service-form > #main > form > p > input[type=radio] {
		width: 100%;
	}
	.service-form > #main > form > div.foot,
	#comment-form > form > div.foot {
		display: block;
		margin-bottom: 0;
	}
	.service-form > #main > form > div.foot > p,
	#comment-form > form > div.foot > p {
		width: 100%;
		margin-right: 0;
		margin-bottom: 2rem;
	}
}