@charset "UTF-8";

@media screen and (max-width: 767px) {
  .pc {
    display: none;
  }
  .sp {
    display: block;
  }



	.bg_gy {
		background: #f6f6f6;
	}
	.right_gy {
		position: relative;
		z-index: 0;
	}
	.right_gy:after {
		content: "";
		position: absolute;
		top: 0;
		right: -300%;
		z-index: -1;
		width: 100%;
		height: 100%;
		background: #f6f6f6;
	}

  .right_gy02 {
  	position: relative;
  	z-index: 0;
  }
  .right_gy02:after {
  	content: "";
  	position: absolute;
  	top: 0;
  	right: -300%;
  	z-index: -1;
  	width: 100%;
  	height: 100%;
  	background: #f6f6f6;
  }

	.left_gy {
		position: relative;
		z-index: 0;
	}
	.left_gy:after {
		content: "";
		position: absolute;
		top: 0;
		left: -300%;
		z-index: -1;
		width: 100%;
		height: 100%;
		background: #f6f6f6;
	}

  .left_gy02 {
  	position: relative;
  	z-index: 0;
  }
  .left_gy02:after {
  	content: "";
  	position: absolute;
  	top: 0;
  	left: -300%;
  	z-index: -1;
  	width: 100%;
  	height: 100%;
  	background: #f6f6f6;
  }

	section {
		overflow-x: hidden;
	}

	.contentInner {
		max-width: 100%;
		margin: 0 auto;
	}

	.contentInner .contsBox {
		margin-top: 60px;
		background: #f5f5f5;
		position: relative;
		padding: 0 0 50px;
	}

	.contentInner .contsBox h3 {
    position: absolute;
    width: 100%;
    left: 0;
    top: -15px;
    padding: 0 30px;
	}

	/*common layout
	－－－－－－－*/

	header #header {
		width: 100%;
		min-width: 100%;
		padding: 5px 10px 10px;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 100;
		transition: .3s;
	}

	header #headerLogo {
		float: left;
		width: 80px;
    padding-top: 5px;
		background: url(../images/common/logo_wh.png) no-repeat left bottom;
		background-size: 100% auto;
		position: absolute;
    z-index: 100;
	}

	header #headerLogo img {
		opacity: 0;
	}
	
	header .spHeaderLogo#headerLogo img {
  	opacity: 0 !important;
  }

/**　-----menu-line　*/
header #header .menu-line {
  display: block;
  position: fixed;
  z-index: 3;
  right: 15px;
  top: 6px;
  width: 20px;
  height: 30px;
  cursor: pointer;
  text-align: center;
}
header #header .menu-line span {
  display: block;
  position: absolute;
  width: 20px;
  height: 1px;
  /*left: 0px;*/
	background : #ffffff;
	-webkit-transition: 0.3s ease-in-out;
	-moz-transition   : 0.3s ease-in-out;
	transition        : 0.3s ease-in-out;
}
header #header .menu-line span:nth-child(1) {
	top: 10px;
}
header #header .menu-line span:nth-child(2) {
	top: 18px;
}
header #header .menu-line span:nth-child(3) {
	top: 26px;
}

/*ーーーーーーー ナビ開いてる時のボタン */

header #header .menu-line.active span:nth-child(1) {
  top : 18px;
  left: 0px;
  background :#fff;
  -webkit-transform: rotate(-45deg);
  -moz-transform   : rotate(-45deg);
  transform        : rotate(-45deg);
}

header #header .menu-line.active span:nth-child(2),
header #header .menu-line.active span:nth-child(3) {
  top: 18px;
  background :#fff;
  -webkit-transform: rotate(45deg);
  -moz-transform   : rotate(45deg);
  transform        : rotate(45deg);
}
/*　menu-line----　**/
  header nav {
  	float: none;
  	width: 100%;
    margin-top: 35%;
  }

  header nav ul li a:after {
  	display: none;
  }

	header .globalMenuSp {
	  position: fixed;
	  z-index : 2;
	  top  : 0;
	  left : 0;
	  color: #fff;
	  background: rgba(0,0,0,0.9);
	  text-align: center;
	  width: 100%;
		height: 100%;
	  opacity: 0;
	  transition: opacity .6s ease, visibility .6s ease;
    transform: translateX(-800px); /*左側の奥の奥に埋めておく*/
	}

	header .globalMenuSp nav ul {
    margin: 0 auto;
    padding: 15px;
    width: 100%;
	}

	header .globalMenuSp nav ul li {
    display: block;
    text-align: left;
    list-style-type: none;
    padding: 0;
    width: 100%;
    transition: .4s all;
	}
	header .globalMenuSp nav ul li:last-child {
	  padding-bottom: 0;
	}

	header .globalMenuSp nav ul li a {
	  display: block;
	  color: #ffffff;
	  padding-bottom: 0;
	  text-decoration :none;
    position: relative;
	}

  header .globalMenuSp nav ul li a span {
    display: inline;
    padding-right: 12px;
    font-size: 15px;
  }

  header .globalMenuSp nav ul li a span:last-child {
    font-size: 10px;
    padding-top: 5px;
  }

  header .globalMenuSp nav ul li a span:last-child:after {
    content: "";
    display: block;
    width: 18px;
    height: 9px;
    background: url(../images/common/ico_arrow_sp_ye.png) no-repeat right top;
    background-size: 100%;
    transition: .3s;
    position: relative;
    bottom: 15px;
    left: 95%;
  }

	 /*ーーSNSアイコン */
  header .globalMenuSp .Menu_sns {
    display: block;
    padding: 0 0 15px;
    margin-top: 15%;
  }
  header .globalMenuSp .Menu_sns  ul {
    display: flex;
    justify-content: center;
  }

  header .globalMenuSp .Menu_sns  ul li {
    height: 20px;
    margin: 0 15px;
  }
  header .globalMenuSp .Menu_sns ul li img {
  	width: auto;
  	height: 100%;
  	transition: .3s;
  }
  header .globalMenuSp .Menu_sns ul li a:hover img {
  	opacity: .7;
  }
  /* SNSアイコン ーー*/
	/*ーーこのクラスを、jQueryで付与・削除する */
	header .globalMenuSp.active {
	  opacity: 100;
    transform: translateX(0px); /*左側の奥の奥に埋めておく*/
	}
/* ナビ開いてる時のボタンーーーーーーー */

	/*ーーーーーーースクロール時動作 */
	header.scHeader #header {
		padding: 5px 10px 42px;
		background: rgba(255,255,255,0.8);
	}

	header.scHeader #headerLogo img {
		opacity: 1;
	}

  header.scHeader #header .menu-line span {
    background: #000000;
  }

  header.scHeader nav ul li a {
  	color: #ffffff;
  }
	/*スクロール時動作 ーーーーーーー*/


	#container {
    min-width: auto;
		background: #ffffff;
	}

	.content {
		margin-bottom: 50px;
	}

	footer #footer {
		width: 100%;
    min-width: auto;
		background: #f4f4f4;
		padding: 50px 0;
	}

	footer #footerLogo {
    width: 100px;
    margin: 0 auto 50px;
	}

	footer #siteNav ul {
		display: none;
	}

	footer #siteNav ul li {
		display: none;
	}

	footer #sns_copy {
		width: 100%;
		margin: 0 auto;
	}

	footer #sns_copy #sns {
    float: none;
	}

  footer #sns_copy #sns ul {
    display: flex;
    justify-content: center;
  }

	footer #sns_copy #sns ul li {
    height: 27px;
    margin: 0 15px;
	}

	footer #sns_copy #sns ul li img {
		width: auto;
		height: 100%;
		transition: .3s;
	}

	footer #sns_copy #sns ul li a:hover img {
		opacity: .7;
	}

  footer #fNav02 {
    display: flex;
    justify-content: space-between;
  }

  footer #fNav02 p {
    display: block;
    margin-top: 45px;
    margin-left: 20px;
  }
  footer #fNav02 p a {
    color: #000000;
    font-size: 14px;
    display: block;
    transition: .3s;
  }

	footer #sns_copy #copy {
    text-align: right;
    font-size: 10px;
    margin-top: 50px;
    margin-right: 20px;
	}

	#pagetop {
    position: fixed;
    width: 13px;
    height: 36px;
    right: 20px;
    bottom: -52px;
    z-index: 100;
    transition: .3s;
	}

	#pagetop.scPagetop {
		bottom: 0;
	}

	#pagetop a {
		transition: .3s;
	}

	#pagetop a:hover {
		opacity: .6;
	}





	/*common btn
	－－－－－－－*/
	.btn1col {
		width: 100%;
		margin: 0 auto;
	}

	.btn1col ul li {
		width: 112px;
		margin: 0 auto;
		text-align: center;
	}

	.btn1col ul li a,
	.btn1col ul li button {
    display: block;
    padding: 12px 0 40px 0;
    width: 100%;
    color: #ffffff;
    font-style: italic;
    background: #3e3e3e;
    font-size: 15px;
    position: relative;
    cursor: pointer;
	}

	.btn1col ul li a:after,
	.btn1col ul li button:after {
    content: "";
    display: block;
    width: 18px;
    height: 9px;
    background: url(../images/common/ico_arrow_l_wh.png) no-repeat left top;
    background-size: 100%;
    position: absolute;
    right: 45px;
    top: 72%;
    margin-top: -6px;
    transition: .3s;
	}

	.btn1col ul li a:hover:after,
	.btn1col ul li button:hover:after {
		right: 20px;
	}

	.btn3col {
	  width: 100%;
		margin: 0 auto;
	}

	.btn3col ul {
    letter-spacing: normal;
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
	}

	.btn3col ul li {
    display: inline-block;
    letter-spacing: normal;
    width: 100%;
    margin-left: 10px;
    text-align: center;
	}

	.btn3col ul li:first-child {
		margin-left: 0;
	}

	.btn3col ul li a {
    display: block;
    padding: 12px 0 30px 0;
    color: #ffffff;
    font-style: italic;
    background: #3e3e3e;
    font-size: 15px;
    position: relative;
	}

	.btn3col ul li a:after {
    content: "";
    display: block;
    width: 18px;
    height: 9px;
    background: url(../images/common/ico_arrow_l_wh.png) no-repeat left top;
    background-size: 100%;
    position: absolute;
    right: 40%;
    top: 72%;
    margin-top: -6px;
    transition: .3s;
	}

	.btn3col ul li a:hover:after {
		right: 20px;
	}


	/*heading
	－－－－－－－*/
	section .heading02 {
    margin-bottom: 30px;
    margin-top: 50px;
    padding: 10px 30px 0 60px;
	}

	section .heading02:first-of-type {
		margin-top: 0;
	}

	section .heading02 p {
		margin-top: 35px;
		font-size: 15px;
	}

	section h2 {
    display: inline-block;
    color: #ffcc00;
    font-size: 35px;
    position: relative;
	}

	section h2 span {
		display: block;
		line-height: 1.2;
	}

	section h2 span:first-child {
		font-style: italic;
	}

	section h2 span:last-child {
    font-size: 12px;
	}

	section h2:after {
		content: '';
		display: block;
		height: 2px;
		background: #ffcc00;
		position: absolute;
		transition: width 0.4s;
	}

	section .heading_left h2:after {
    width: 100px;
    left: 24px;
    top: -15px;
    transform-origin: left bottom;
    transform: rotate(135deg);
    -webkit-transform-origin: left bottom;
    -webkit-transform: rotate(135deg);
  }

	section .heading_center h2:after {
    width: 100px;
    left: 30px;
    top: -15px;
    transform-origin: left bottom;
    transform: rotate(135deg);
    -webkit-transform-origin: left bottom;
    -webkit-transform: rotate(135deg);
    }


  section .heading_right h2:after {
    width: 100px;
    left: 44px;
    top: 70px;
  	transform-origin: left bottom;
    transform: rotate(-135deg);
    -webkit-transform-origin: left bottom;
  	-webkit-transform: rotate(-135deg);
  }

	section .heading_center {
		text-align: center;
	}

	section .heading_right {
		text-align: right;
	}

	section h3 {
		font-style: italic;
		color: #bbbbbb;
		font-weight: bold;
		font-size: 20px;
	}



	/*list
	－－－－－－－*/
	.listCol4 {

	}

	.listCol4 > ul {
		padding: 30px 25px 0;
		letter-spacing: normal;
		width: 100%;
		margin: 0 auto;
		text-align: center;
	}

	.listCol4 > ul li {
		display: inline-block;
		vertical-align: top;
		letter-spacing: normal;
		width: 100%;
		margin-right: 0;
		margin-bottom: 30px;
		transition: .3s;
	}

	.listCol4 > ul li:hover {
		filter: drop-shadow(0px 0px 5px #666666);
	}

	.listCol4 > ul li:nth-child(5n),
  .listCol4 > ul li:nth-child(6n),
  .listCol4 > ul li:nth-child(7n),
  .listCol4 > ul li:nth-child(8n){
		display: none;
	}

	.listCol4 > ul li a {
		color: #000000;
	}

	.listCol4 > ul li .listDetails {
		position: relative;
		width: 90%;
		margin: -25px auto 0;
		padding: 15px;
		background: #ffffff;
		text-align: left;
	}

	.listCol4 > ul li .listDetails .title {
		font-size: 16px;
		font-weight: bold;
		margin-bottom: 10px;
		text-align: center;
	}

	.listCol4 > ul li .listDetails .txt {
		font-size: 14px;
		margin-bottom: 10px;
	}

	.listCol4 > ul li .listDetails .tags {
		position: relative;
		padding-left: 17px;
	}

	.listCol4 > ul li .listDetails .tags span {
		color: #ffcc00;
		font-size: 12px;
		display: inline-block;
		padding-right: 5px;
	}

	.listCol4 > ul li .listDetails .tags:before {
		content: "";
		display: block;
		position: absolute;
		left: 0;
		top: 7px;
		width: 12px;
		height: 12px;
		background: url(../images/common/ico_tags.png) no-repeat left top;
	}


	/*contact
	－－－－－－－*/
	#contact {
		background: #3e3e3e;
	}

	#contact.content {
		margin-bottom: 0;
		margin-top: 100px;
		padding: 30px 0;
	}
  .contact_listCol4 {
		display: none;
	}
  .contact_listCol4 ul {

  }

  .contact_listCol4 ul li {
  	float: left;
  	width: 282px;
  	margin-right: 22px;
  	border: 1px solid #ffcc00;
  }

  .contact_listCol4 > ul li:nth-child(4n) {
  	margin-right: 0;
  }

  .contact_listCol4 ul li a {
  	color: #ffffff;
  	display: block;
  	padding: 20px 20px 80px;
  	position: relative;
  }

  .contact_listCol4 ul li a:after {
  	content: "";
  	display: block;
  	width: 28px;
  	height: 12px;
  	position: absolute;
  	bottom: 25px;
  	left: 50%;
  	margin-left: -14px;
  	background: url(../images/common/ico_arrow_l_wh.png) no-repeat left top;
  	background-size: 100%;
  	transition: .3s;
  }

  .contact_listCol4 ul li a:hover:after {
  	margin-left: -9px;
  }

  .contact_listCol4 ul li a .title {
  	font-size: 20px;
  	font-weight: bold;
  	color: #ffcc00;
  	margin-bottom: 10px;
  	text-align: center;
  }

  .contact_listCol4 ul li a:hover .title {
  	text-decoration: underline;
  }

  .contact_listCol4 ul li a .text {
  	font-size: 15px;
  	line-height: 2;
  }

	.contact_listCol3_sp {
    display: block;
		width: 100%;
	  margin: 0 auto 15px;
	}

	.contact_listCol3_sp ul {
    display: flex;
    justify-content: space-between;
    padding: 0 10px;
	}

	.contact_listCol3_sp ul li {
    width: 100%;
    margin-right: 6px;
    border: 1px solid #ffcc00;
	}
  .contact_listCol3_sp > ul li:nth-child(3n) {
    margin-right: 0;
  }

	.contact_listCol3_sp ul li a {
		color: #ffffff;
		display: block;
		padding: 10px 10px 25px;
		position: relative;
	}

	.contact_listCol3_sp ul li a:after {
    content: "";
    display: block;
    width: 18px;
    height: 9px;
    position: absolute;
    bottom: 15px;
    left: 55%;
    margin-left: -14px;
    background: url(../images/common/ico_arrow_l_wh.png) no-repeat left top;
    background-size: 100%;
    transition: .3s;
	}

	.contact_listCol3_sp ul li a .title {
		font-size: 12px;
		font-weight: bold;
		color: #ffcc00;
		margin-bottom: 10px;
		text-align: center;
	}

	.contact_listCol3_sp ul li a .text {
		font-size: 15px;
		line-height: 2;
	}

	#contactTel {
		text-align: center;
		color: #ffffff;
	}

  #contactTel .contactTel_flex {
    display: flex;
    justify-content: center;
    align-items: baseline;
  }

	#contactTel .contactTel_top {
		font-size: 12px;
		font-weight: bold;
		margin-bottom: 2px;
    margin-right: 10px;
	}

	#contactTel .contactTel_mid {
		font-size: 20px;
		font-weight: bold;
		margin-bottom: 2px;
	}

	#contactTel .contactTel_btm {
		font-size: 10px;
	}


	#breadcrumb {
		width: 100%;
		margin: 0 auto;
		padding: 30px 15px;
	}

	#breadcrumb ul {
		letter-spacing: -.4em;
	}

	#breadcrumb ul li {
		display: inline-block;
		letter-spacing: normal;
		font-size: 12px;
		padding-right: 5px;
		vertical-align: top;
	}

	#breadcrumb ul li:after {
		content: ' \003e';
	}

	#breadcrumb ul li:last-child:after {
		display: none;
	}

	#breadcrumb ul li a {
		color: #000000;
	}

	#breadcrumb ul li a:hover {
		text-decoration: underline;
	}

	.pageCopy {
		margin: 0 auto 50px;
	}

	.pageCopy .pageCopyInner p {
		line-height: 2;
		font-size: 14px;
	}

	.pageCopy .pageCopyInner {
    width: 100%;
    margin: 0 auto;
    padding: 0 15px;
	}


	.sortTab {
		position: relative;
		overflow: hidden;
	}

	.sortTab ul {
  margin: 0 auto;
  padding: 0 15px;
  width: auto;
	}

	.sortTab ul li {
  text-align: center;
  width: min(93% / 3);
	}

	.sortTab ul li a {
    display: block;
    width: 100%;
    height: 40px;
    line-height: 40px;
    border: 1px solid #3e3e3e;
    box-sizing: border-box;
    color: #000000;
    font-size: 12px;
	}

	.sortTab ul li a:hover,
	.sortTab ul li.active a {
		background: #3e3e3e;
		color: #ffcc00;
	}

	/* 404 */
	.notFound #mainVisual {
		width: 100%;
		background: url(../images/common/main_404_bg.jpg) no-repeat center top;
		background-size: cover;
    height: 285px;
  	padding-top: 80px;
		text-align: center;
	}

	.notFound #mainVisual h1 {
    color: #ffe000;
    font-weight: bold;
    font-style: italic;
    font-size: 50px;
    line-height: 1.2;
	}

	.notFound #mainVisual h1 + p {
		color: #ffe000;
    padding: 15px 15px 0;
		font-size: 12px;
	}

	.notFound .content .links {
    width: 100%;
    margin: 0 auto;
    padding: 100px 15px 0;
	}

	.notFound .content .links ul {
		width: 100%;
		letter-spacing: -.4em;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
	}

	.notFound .content .links ul li {
    display: block;
    letter-spacing: normal;
    vertical-align: top;
    text-align: center;
    margin-right: 15px;
    margin-bottom: 20px;
    width: 47%;
	}
  .notFound .content .links ul li:nth-child(3n) {
    margin-right:15px;
  }
	.notFound .content .links ul li:nth-child(2n),
  .notFound .content .links ul li:nth-child(4n),
  .notFound .content .links ul li:nth-child(6n) {
		margin-right: 0;
	}

	.notFound .content .links ul li a {
		display: block;
		width: 100%;
		padding: 25px;
		border: 1px solid #ffcc00;
		color: #000000;
		font-weight: bold;
	}
}