/* ===============================================
	▼レスポンシブル用 共通ＣＳＳ
=============================================== */
.pcShow { display: block; }
.spShow { display: none; }
.tbShow { display: none; }
.pcNone { display: none; }


/*------------------------------------------------
	▼横幅1020px～0px（スマホ/タブレット）
------------------------------------------------*/
@media screen and (max-width: 1020px) {


	/* ━━━━ ▼共通 ━━━━ */
	.pcShow { display: none; }
	#wrapper { min-width: 1px; }
	#container { padding-bottom: 0; }
	.column2main,.column2side { float: none; width: 100%; }
	.inner { width: 92%; }

	/* ━━━━ ▼FOOTER 設定 ━━━━ */
	footer {
		width: 100%;
		height: auto;
		position: relative;
	}

	/* ━━━━ ▼footInfo ━━━━ */
	footer #footInfo {
		height: auto;
	}
	footer #footInfo p {
		padding-bottom: 10px;
	}

	/* ━━━━ ▼footer #pageTop ━━━━ */
	footer #pageTop img {
		width: 100%;
		height: auto;
	}

	/* ━━━━ ▼共通 (アイテムリスト) ━━━━ */
	#itemListMenu {
		padding: 22px 0 7px;
	}
	#itemListMenu nav ul {
		width: 100%;
		margin: 0 auto;
	}
	#itemListMenu nav li {
		float: left;
		width: 33.3%;
		padding-bottom: 15px;
	}
	#itemListMenu nav li a {
		display: block;
		border-right: 1px solid #ebebeb;
		padding: 0 6px;
	}
	#itemListMenu nav li a img {
		width: 100%;
		height: auto;
	}
	#itemListMenu nav li:first-child {
		width: 33.3%;
	}
	#itemListMenu nav li:first-child a,
	#itemListMenu nav li:nth-child(4) a {
		border-left: 1px solid #ebebeb;
	}


}
/*------------------------------------------------
	▼横幅641px～横幅1020px（タブレット）
------------------------------------------------*/
@media screen and (min-width: 641px) and (max-width: 1020px) {

	.tbShow { display: block; }
	.tbNone { display: none; }
	.inner2 { width: 90%; }

	/* ━━━━ ▼GLOBAL NAVI 設定 ━━━━ */
	header #gnavi {
		padding: 0 2%;
	}
	header #gnavi ul {
		width: 100%;
		text-align: center;
	}
	header #gnavi ul li {
		width: 14%;
	}
	header #gnavi ul li:first-child {
		width: 22%;
	}
	header #gnavi ul li:nth-child(2) {
		width: 18%;
	}
	header #gnavi ul li:nth-child(6) {
		width: 18%;
	}

	/* ━━━━ ▼footer #pageTop ━━━━ */
	footer #pageTop {
		width: 70px;
		height: 70px;
		bottom: 20px;
		right: 20px;
	}

	/* ━━━━ ▼共通 (パンくず) ━━━━ */
	#breadArea .inner2 {
		width: 92%;
		padding-right: 22px;
		padding-left: 22px;
		box-sizing: border-box;
	}


}
@media screen and (min-width: 641px) and (max-width: 810px) {

	/* ━━━━ ▼HEADER 設定 ━━━━ */
	header #logoArea {
		float: left;
		width: 60%;
	}
	header #logoArea h1#logo {
		float: left;
		width: 32%;
		margin-right: 2%;
	}
	header #logoArea p {
		float: left;
		width: 64%;
	}
	header #logoArea img {
		width: auto;
		max-width: 100%;
		height: auto;
	}
	header #headBtn {
		float: right;
		width: 39%;
		padding: 5px 0 0;
	}
	header #headBtn dt,
	header #headBtn dd {
		width: 49%;
	}
	header #headBtn dl a {
		background: #d63267;
	}

	/* ━━━━ ▼GLOBAL NAVI 設定 ━━━━ */
	header #gnavi .subMenu ol {
		width: auto;
		padding: 15px 5%;
		margin: 0 auto;
	}
	header #gnavi .subMenu ol li {
		float: left;
		width: 23.5%;
		margin-right: 2%;
	}
	header #gnavi .subMenu ol li a dl dt img {
		width: 100%;
		height: auto;
	}

}
/*------------------------------------------------
	▼横幅640px以下（スマホ）
------------------------------------------------*/
@media screen and (max-width: 640px) {


	/* ━━━━ ▼共通 ━━━━ */
	.spShow { display: block; }
	.spNone { display: none; }
	.inner2 { width: 92%; }
	#contents { background-size: 100%; }
	#contents2 { background-color: #fff; padding: 0; }
	#contents3 { background: #f1f5fa url(../img/sp_bg_shadow2.png) no-repeat center top; background-size: 100%; }
	#contents4 { padding: 0; }
	.defaultPage { padding: 20px 0 30px; }

	/* ━━━━ ▼HEADER 設定 ━━━━ */
	header #logoArea {
		float: left;
		width: 82%;
	}
	header #logoArea h1#logo {
		float: left;
		width: 30%;
		margin-right: 2%;
	}
	header #logoArea p {
		float: left;
		width: 64%;
		padding-top: 7%;
	}
	header #logoArea img {
		width: auto;
		max-width: 100%;
		height: auto;
	}
	header #headBtn {
		float: right;
		width: 16%;
		margin-top: 1%;
		position: relative;
	}
	header #headBtn dl {
		display: none;
	}
	/* Toggle Button */
	header #headBtn #spMenu {
		display: block;
		position: absolute;
		right: 0;
		top: 0;
		width: 34px;
		height: 36px;
		cursor: pointer;
		z-index: 101;
		text-align: center;
		color: #30a3e9;
		font-size: 12px;
	}
	header #headBtn #spMenu div {
		position: relative;
	}
	header #headBtn #spMenu span {
		display: block;
		position: absolute;
		height: 1px;
		width: 100%;
		background: #30a3e9;
		left: 0;
		-webkit-transition: .35s ease-in-out;
		-moz-transition: .35s ease-in-out;
		transition: .35s ease-in-out;
	}
	header #headBtn #spMenu span:nth-child(1) {
		top: 0;
	}
	header #headBtn #spMenu span:nth-child(2) {
		top: 8px;
	}
	header #headBtn #spMenu span:nth-child(3) {
		top: 16px;
	}
	header #headBtn #spMenu i {
		font-style: normal;
		width: 100%;
		text-align: center;
		position: absolute;
		top: 20px;
		left: 0;
	}
	header #headBtn #spMenu i.close {
		display: none;
	}

	/* #spMenu 切り替えアニメーション */
	header #headBtn #spMenu div.open span:nth-child(1) {
		top: 8px;
		-webkit-transform: rotate(315deg);
		-moz-transform: rotate(315deg);
		transform: rotate(315deg);
	}
	header #headBtn #spMenu div.open span:nth-child(2) {
		width: 0;
		left: 50%;
	}
	header #headBtn #spMenu div.open span:nth-child(3) {
		top: 8px;
		-webkit-transform: rotate(-315deg);
		-moz-transform: rotate(-315deg);
		transform: rotate(-315deg);
	}
	header #headBtn #spMenu div.open i.open {
		display: none;
	}
	header #headBtn #spMenu div.open i.close {
		display: block;
		letter-spacing: -0.05em;
	}

	/* ━━━━ ▼GLOBAL NAVI 設定 ━━━━ */
	header #gnavi {
		display: none;
		width: 100%;
		height: auto;
		background-color: #fff;
		position: absolute;
		top: 100%;
		left: 0;
		z-index: 99999;
		border-top: 1px solid #c7cbd0;
		padding: 5% 0;
	}
	header #gnavi ul,
	header #gnavi ul.inner {
		width: 92%;
		margin: 0 auto;
	}
	header #gnavi > ul {
		padding-bottom: 10px;
	}
	header #gnavi ul li {
		float: none;
		width: auto;
		padding-bottom: 10px;
	}
	header #gnavi ul li a {
		display: block;
		color: #2ea2e9;
		text-align: left;
		padding: 0;
		-moz-transition: all 0s linear;
		-webkit-transition: all 0s linear;
		-o-transition: all 0s linear;
		-ms-transition: all 0s linear;
		transition: all 0s linear;
	}
	header #gnavi ul li a.pc {
		display: none;
	}
	header #gnavi ul li a.sp {
		display: block;
	}
	header #gnavi ul li a:hover {
		background: transparent;
	}
	header #gnavi > ul > li {
		border: 1px solid #2ea2e9;
		-webkit-border-radius: 6px;
		-moz-border-radius: 6px;
		border-radius: 6px;
		padding-bottom: 0;
		margin-bottom: 10px;
	}
	header #gnavi > ul > li > a,
	header #gnavi ul.link li a {
		padding: 12px 5%;
		position: relative;
	}
	header #gnavi ul.link li a {
		color: #fff;
		border: 1px solid #6ebbe1;
		-webkit-border-radius: 6px;
		-moz-border-radius: 6px;
		border-radius: 6px;
		background-color: #6ebbe1;
	}
	header #gnavi > ul > li > a:before,
	header #gnavi ul.link li a:before {
		display: block;
		content: "";
		position: absolute;
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
		top: 50%;
		right: 20px;
		width: 8px;
		height: 8px;
		margin-top: -4px;
		background: #2ea2e9;
	}
	header #gnavi ul.link li a:before {
		background: #fff;
	}
	header #gnavi > ul > li > a:after,
	header #gnavi ul.link li a:after {
		display: block;
		content: "";
		position: absolute;
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
		top: 50%;
		right: 22px;
		width: 8px;
		height: 8px;
		margin-top: -4px;
		background: #fff;
	}
	header #gnavi ul.link li a:after {
		background: #6ebbe1;
	}
	header #gnavi > ul > li.sub a:after {
		right: 20px;
		margin-top: -6px;
	}
	header #gnavi > ul > li.sub.on a:after {
		right: 20px;
		margin-top: -2px;
	}
	header #gnavi > ul li.on a,
	header #gnavi > ul li a:hover {
		color: #2ea2e9;
		background-color: transparent;
	}

	header #gnavi ul li span {
		border: none;
	}
	header #gnavi ul li:first-child span {
		border: none;
	}
	header #gnavi #spMenuList {
		display: block;
	}
	header #gnavi ul.sns {
		display: table;
		table-layout: fixed;
		width: 80%;
		max-width: 380px;
		padding: 10px 0 20px;
	}
	header #gnavi ul.sns li {
		display: table-cell;
		vertical-align: top;
		text-align: center;
		/*width: 33.3%;*/
		width: 50%;
		padding: 0 5%;
		box-sizing: border-box;
	}
	header #gnavi ul.sns li a {
		display: inline-block;
	}
	header #gnavi ul.sns li img {
		width: 100%;
		height: auto;
	}
	header #gnavi ul.link2 {
		text-align: center;
	}
	header #gnavi ul.link2 li {
		display: inline-block;
		width: auto;
		padding-bottom: 10px;
	}
	header #gnavi ul.link2 li a {
		display: inline-block;
		color: #333;
	}
	header #gnavi ul.link2 li span {
		border-right: 1px solid #c8c8c8;
		padding: 0 10px;
	}
	header #gnavi ul.link2 li:first-child span {
		padding-left: 0;
	}
	header #gnavi ul.link2 li:last-child span {
		border-right: none;
		padding-right: 0;
	}
	header .subMenu {
		background: none;
		position: relative;
		top: 0;
		left: 0;
	}
	header #gnavi .subMenu ol,
	header #gnavi .subMenu2 ol {
		width: auto;
		padding: 0 0 0 10%;
	}
	header #gnavi .subMenu ol li {
		float: none;
		width: 100%;
		text-align: left;
		margin: 0;
	}
	header #gnavi .subMenu ol li:last-child {
		float: none;
	}
	header #gnavi .subMenu ol li a {
		display: inline;
		min-height: 1px !important;
		color: #2ea2e9;
		font-size: 100%;
		text-decoration: none;
		text-align: left;
		padding: 0;
	}
	header #gnavi .subMenu ol li a * {
		display: inline;
	}
	header #gnavi .subMenu ol li a dl dt {
		display: none;
	}
	header #gnavi .subMenu ol li a dl dt.title {
		display: inline;
	}
	header #gnavi .subMenu ol li a dl dd {
		display: none;
	}
	header #gnavi .subMenu2 ol li {
		text-align: left;
	}
	header #gnavi .subMenu2 ol li a {
		display: inline;
	}

	/* ━━━━ ▼footInfo ━━━━ */
	footer #footInfo {
		height: auto;
	}
	footer #footInfo ul {
		width: 100%;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-between;
	}
	footer #footInfo ul li {
		width: 25%;
		text-align: center;
		padding: 0 10px;
		box-sizing: border-box;
	}
	footer #footInfo ul li img {
		width: auto;
		max-width: 100%;
		height: auto;
	}
	footer #footInfo p {
		padding: 30px 0;
	}

	/* ━━━━ ▼footMenu ━━━━ */
	footer #footMenu {
		padding-bottom: 5px;
	}
	footer #footMenu li {
		float: none;
		width: 100%;
		border-left: none;
		padding-bottom: 15px;
	}
	footer #footMenu li dl {
		text-align: center;
		padding: 0;
	}
	footer #footMenu li dl:nth-child(2) {
		padding-top: 8px;
	}
	footer #footMenu dl dt {
		color: #333;
		font-size: 115%;
		font-weight: bold;
		padding-bottom: 5px;
	}
	footer #footMenu dl dd {
		display: inline;
	}
	footer #footMenu dl dd span {
		border-right: 1px solid #c8c8c8;
		padding: 0 10px;
	}
	footer #footMenu dl dd:last-child span {
		border-right: none;
	}
	footer #copy {
		font-size: 10px;
		text-align: center;
		padding: 10px 0;
	}

	/* ━━━━ ▼footer #pageTop ━━━━ */
	footer #pageTop {
		width: 42px;
		height: 42px;
		bottom: 10px;
		right: 10px;
	}

	/* ━━━━ ▼共通 (タイトル) ━━━━ */
	.title01 {
		padding-bottom: 5px;
	}
	.title01 img {
		width: auto;
		max-width: 100%;
		height: auto;
	}

	/* ━━━━ ▼共通 (パンくず) ━━━━ */
	#breadArea {
		background: #dde2e9 url(../img/sp_bg_shadow.png) no-repeat center top;
		background-size: 100%;
		padding: 15px 0 5px;
	}
	#breadcrumbs {
		font-size: 90%;
	}

	/* ===============================================
		▼404ページ
	=============================================== */
	#page404 {
		text-align: center;
		padding: 40px 0;
	}


}
@media screen and (max-width: 420px) {
	header #logoArea h1#logo {
		width: 40%;
	}
	header #logoArea p {
		display: none;
	}
	header #headBtn {
		margin-top: 0;
	}
}