@charset "UTF-8";



@media (min-width: 769px) {
	br.xs{ display: none; }
	.forsp { display: none; }
}

@media (max-width: 768px) {
	.button-t3 {
		-webkit-appearance: none;
	}
	h1{
		line-height:129%;
	}
	body{
		-webkit-text-size-adjust: 100%;
	}
	h2>div{
		margin-top: 7px;
		line-height: 100%;
	}
	#sp-global a {
		display: block;
		color: #fff !important;
		margin: 2em 1em 0 0;
	}
	#sp-global a i {
		margin-right: 0.5em;
	}

	br.xs{ display: none; }
	.forsp { display: block; }
	.md-padding{ padding: 1em; }
	.sp-menu { position: relative;}
	#sp-menu, .sp-menu { z-index: 10000 ;}

	.h1 { line-height: 130%;margin: 8px 0 0 0; }
	h2,#mainslider h5{ line-height: 130%; }
	#wrapper { width: 100% ;min-width: 640px; position: relative;}
	#header { top: 0 !important; position: fixed; z-index: 10001; }
	#logo { position: relative; top: -2px;}

	.js-fixed { margin-top: 69px; width: 100%; z-index: 9998; }

	.first-section p {
		text-align: left !important;
		padding: 0.5em;
	}
	.first-section br {
		display: none;
	}

	.first-section h1,
	#mainslider h3 {
		line-height: 130%;
	}
	#mainslider li > div {
		left: auto;
		padding: 135px 10px 0 10px !important;
		right: 0;
	}
	.sp-menu-opener {
		position: fixed;
		top: 0;
		right: 0;
		display: block;
		font-size: 1.8em;
		width: 74px;
		height: 74px;
		text-align: center;
		line-height: 74px;
		z-index: 10002;
	}

	#sp-menu {
		background-color: #000;
		width: 100%;
		height: 100%;
		color: #fff;
		z-index: 999;
		display: none;
		margin-top: 69px;
		position: relative;
		overflow: scroll;
		padding-bottom: 3em;
	}
	#sp-menu > li > a,
	#sp-menu > li > div.a {
		color: #fff;
		display: block;
		border-bottom: 1px solid #d6d6d6;
		padding: 1em 0 1em 1em;
		letter-spacing: 1px;
	}
	#sp-menu > li > a i {
		float: right;
		margin-right: 0.5em;
		margin-top: 5px;
		line-height: 70%;
	}
	#sp-menu > li > a i,.sp-menu-second i {
		font-size: 1.8em ;
	}
	.sp-menu-second a {
		color: #1f1f1f !important;
		display: block;
		border-bottom: 1px solid #d6d6d6;
		padding: 1em 0 1em 1em;
		letter-spacing: 1px;
		background-color: #F0F0F0;
		padding-left: 2em !important;
		vertical-align: middle;
	}
	.sp-menu-second i {
		margin-right: 1em;
		vertical-align: middle;
	}
	.sp-menu-second span {
		display: inline-block;
		vertical-align: middle;
		margin-top: 4px;
	}

	.xs-push { float: right !important; }
	.xs-pull { float: left !important; }
	.xs-visible { display: block; }

	.xs-hidden,
	#gnav,
	#global {
		display: none !important;
	}

	#wrapper,
	.container {
		width: 100% !important;
	}

	#wrapper {
		overflow: hidden;
	}

	#wrapper,
	#header {
		min-width: auto !important;
	}

	#header {
		padding: 1em 0 1.2em;
	}

	#mainslider {
		width: 100%;
	}

	#c1 p {
		text-align: left !important;
		padding: 0.5em;
	}
	#c1 p br {
		display: none;
	}

	#service .col-2 > * {
		float: none !important;
		width: 100%;
	}

	#service .col-2 > li.text {
		padding: 7em 1em 7em;
		height: auto;
	}

	#service .fit img { width: 125%; }

	#news .list {
		margin-left: 0;
		padding: 1em;
	}
	#news .list > li {
		margin-bottom: 2em;
	}
	#news .list > li,
	#news .list > li img,
	#news .list > li:nth-child(3n+3){
		width: 100%;
	}
	#news .col-3 > * {
		float: none;
		width: 100%;
		margin-bottom: 2em;
	}

	#news .col-3 > li:last-child {
		margin-bottom: 0;
	}

	#news .col-3 > li .hover-image {
		margin-bottom: 1em;
	}


	#brand .bg-light-gray {
		min-width: 0;
	}
	#brand .text {
		padding: 3em 1em !important;
		float: none;
		width: 100%;
		box-sizing: border-box;
	}
	#brand .image {
		float: none;
		width: 100%;
	}

	#brand .col-2 > * {
		float: none;
		width: 100%;
	}

	#gallery li div {
		width: 100%;
	}
	#gallery .col-4 > * {
		width: 50%;
	}

	#gallery .col-4 > li .hover-image {
		padding: 0.5em;
	}
	#gallery .col-4 > li .hover-image,
	#gallery .col-4 > li .hover-image img,
	#gallery .col-4 > li .hover-image .hover {
		width: 100%;
	}

	#sns li {
		width: 50%;
		height: 325px;
		text-align: left;
	}
	#sns .text {
		padding: 21px 45px 0;

	}
	#sns .text > div {
		display: table-cell;
		vertical-align: middle;
		height: 270px;
	}

	#sns li img {
		width: 100%;
	}

	#company .container {
		padding: 1em;
	}
	#company .container h1 {
		margin-bottom: 1em !important;
		font-size: 3em;
	}
	#company .col-3 > div {
		float: none;
		width: 100%;
	}
	#company .col-3 > div:first-child {
		margin-bottom: 3em;
	}

	#company dd {
		width: 100%;
	}

	#company dt + dd {
		width: 80%;
	}

	#contact {
		background-position: 0 0;
		-webkit-background-size: cover;
		background-size: cover;
	}
	#contact .container {
		width: 100%;
		box-sizing: border-box;
		padding: 1em;
	}

	#contact .inner p {
		color: #fff;
	}

	#contact .container textarea, #contact .container input[type="text"], #contact .container input[type="email"] {
		width: 100%;
		box-sizing: border-box;
	}
	.container2 {
		width: 100%;
	}
	.container2 .forsp {
		margin-top: 2em;
	}

	.gift_text .container2 {
		padding: 0 !important;
		background-image: none !important;
	}
	.gift_text .container2 .inner {
		margin-top: 0;
		padding: 1em;
		width: 100%;
	}
	.container2 .inner_image {
		transform: scale(0.8);
		margin-left: -1% !important;
	}

	#item1 .image {
		background-position: 45% 0;
	}
	#item2 .image {
		background-position: 45% 0;
	}
	#item3 .image {
		background-position: 45% 0;
	}
	#item4 .image {
		background-position: 45% 0;
	}
}


@media (max-width: 640px) {

	br.xs{ display: block; }

	#sp-menu { margin-top: 77px; }

	#wrapper { min-width: 480px; }

	.container2 .inner_image {
		transform: scale(0.6);
		margin-left: -18%;
		margin-top: -7em;
	}

	.gift_text {
		margin-bottom: 0 !important;
	}

	#sns li { height: 269px; }

}

@media (max-width: 480px) {

	br.xs{ display: block; }

	#wrapper { min-width: 480px; }

	section.mb7em{ margin-bottom: 6em !important; }

	.container2 .inner_image {
		transform: scale(0.6);
		margin-left: -18% !important;
		margin-top: -7em !important;
	}

	.gift_text {
		margin-bottom: 0 !important;
	}

	#service .col-2 > li { height: 345px; }
	#service .col-2 > li.text { padding: 3em 1em; }

	#brand .image img {
		width: 800px;
	}

	#gallery li {
	    margin: 0 0 36px;
	}

	#sns li { height: 203px; }
	#sns .text { padding: 0.5em; }
	#sns .text > div { height: auto; }

	#item1 .image, #item2 .image, #item3 .image, #item4 .image, #item5 .image, #item6 .image {
		height: 212px;
	}
}
@media (max-width: 428px) {
	#service .col-2 > li {
		height: 307px;
	}
}
@media (max-width: 414px) {

	#wrapper { min-width: 414px; }
	section.mb7em{ margin-bottom: 4em !important; }

	.first-section h1, #mainslider h3 {
		font-size: 2em;
	}
	#mainslider h4 {
		line-height: 130%;
	}
	.first-section h1, #mainslider h5 {
		font-size: 1.6em;
	}

	#item1 .image, #item2 .image, #item3 .image, #item4 .image, #item5 .image {
		height: 182px;
	}

	.container2 .inner_image {
		margin-left: -29% !important;
		transform: scale(0.55);
	}

	.gift_text {
		margin-bottom: 0 !important;
	}
	#service .col-2 > li {
		height: 297px;
	}
	#gallery li {
	    margin: 0 0 9px;
	}

	#sns {
		line-height: 110%;
		font-size: 0.9em;
	}

	#sns li,
	#sns .text > div {
		height: auto;
		min-height: 180px;
	}

	#brand .image img {
		width: 600px;
	}

	#footer li {
		margin: 0 1.4em;
	}

}

@media (max-width: 390px) {
	#service .col-2 > li {
		height: 280px;
	}
}
@media (max-width: 375px) {

	#wrapper { min-width: 375px; }
	section.mb7em{ margin-bottom: 3em !important; }

	.em24{
		font-size: 2.2em;
	}

	.container2 .inner_image {
		margin-left: -39% !important;
		transform: scale(0.5);
		margin-top: -9em !important;
	}

	#service .col-2 > li {
		height: 268px;
	}

	#service .col-2 > li.text {
		padding-bottom: 5em;
	}

	#gallery li {
	    height: 170px;
	}
	#gallery li {
	    margin: 0 0 0px;
	}

	.gift_text {
		margin-bottom: -2em !important;
	}

	#sns .text {
		padding: 0 0.5em;
	}

	#item1 .image, #item2 .image, #item3 .image, #item4 .image, #item5 .image {
		height: 158px;
	}

	#footer li {
		margin: 0 1.3em;
	}
}

@media (max-width: 360px) {

	#wrapper { min-width: 360px; }

	section.mb7em{ margin-bottom: 2em !important; }

	.container2 .inner_image {
		margin-left: -42% !important;
		transform: scale(0.48);
		margin-top: -9em !important;
	}
	#service .col-2 > li {
		height: 259px;
	}
	#gallery li {
	    height: 160px;
	}
	#gallery li {
	    margin: 0 0 0px;
	}

	#footer li {
		margin: 0 1em;
	}

}

@media (max-width: 320px) {

	#wrapper { min-width: 320px; }

	#item1 .image, #item2 .image, #item3 .image, #item4 .image, #item5 .image {
		height: 142px;
	}

	.container2 .inner_image {
		margin-left: -53% !important;
		transform: scale(0.45);
		margin-top: -9em !important;
	}

	#gallery li {
	    height: 150px;
	}
	#brand .image img {
		width: 500px;
	}

}