@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');

.fullPageScroll {
	width: 100%;
	height: 100vh;
	scroll-snap-type: y mandatory;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}
.section {
	width: 100%;
	height: 100vh;
	scroll-snap-align: start;
	box-sizing: border-box;
}
.ttlArea {
	text-align: center;
	font-size: 4.3vmin;
	letter-spacing: 1px;
	margin-bottom: 40px;
	background: url(../img/ttl_line.svg) no-repeat;
	background-size: 64px 6px;
	background-position: 50% 65%;
}
.ttlArea span {
	font-size: 1.9vmin;
	display: block;
	margin-top: 20px;
	letter-spacing: 0;
}
/*--------------------------------------*/
/*---------------↓ #top ↓---------------*/
/*--------------------------------------*/
#top .section1 {
	background-color: #ccc;
}
#top .section1 h1 {
	font-size: 18vmin;
	font-weight: bold;
}
#top .section1 p {
	font-size: 3.4vmin;
	line-height: 2;
	font-weight: 500;
}
#top .section1 .textArea {
	background: url(../img/top_bg.jpg) no-repeat;
	background-size: cover;
}
.textArea {
	height: calc(100vh - 10vh);
	padding: 0 6%;
}
.contArea {
	position: relative;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.newsArea {
	width: 100%;
	height: 10vh;
	justify-content: space-between;
	align-items: center;
	background: #fff;
}
.newsArea ul {
	align-items: center;
	width: 100%;
}
.newsArea ul.newsBox {
	justify-content: space-between;
	flex-wrap: nowrap;
}
.newsArea ul.newsBox ul {
	flex-wrap: nowrap;
}
.newsArea ul li h2 {
	font-size: 3vmin;
	background: #000;
	color: #fff;
	letter-spacing: 1px;
	padding: 28px 0 27px;
	width: 320px;
	text-align: center;
}
.newsArea ul li dl {
	width: 100%;
	padding: 10px 0;
}
.newsArea ul li dt {
	color: #919191;
	width: 245px;
	margin-left: 40px;
}
.newsArea ul li dt span {
	background: #000;
	color: #fff;
	padding: 2px 5px;
	margin-right: 25px;
}
.newsArea ul li dd {
	width: auto;
	font-size: 2vmin;
}

.newsArea ul li .toList {
	text-align: center;
	width: 100%;
	margin-right: 40px;
}
.newsArea ul li .toList a {
	color: #333;
	border: 1px solid #000;
	font-size: 2vmin;
	display: inline-block;
	width: 280px;
	height: 60px;
}
.newsArea ul li .more a {
	padding: 15px 18px 15px 0px;
}
.imageWrapper{
	width: 100%;
	height: 100%;
	overflow: hidden;
	position: relative;
}
#top .section2 .inner {
	display: unset;

}
#top .section2 .contArea {
	background: url(../img/sec02_bg.png) top no-repeat;
	background-size: cover;
}
#top .section2 h1 {
	position: absolute;
	left: 0;
	top: 88%;
	width: 100%;
	color: #ffffff;
	text-align: center;
}
#top h3 {
	font-size: 6vmin;
	margin-bottom: 20px;
	text-align: center;
}
#top .section3 .contArea {
	background: url(../img/sec03_bg.png) top no-repeat;
	background-size: cover;
}
#top .section3 p,
#top .section4 p {
	font-size: 3vmin;
	margin: 0 auto 120px;
	line-height: 1.7;
	width: 850px;
}
#top .aboutusArea {
	text-align: center;
}
#top .aboutusArea ul {
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
	font-size: 5vmin;
	letter-spacing: 15px;
	font-family: 'Bebas Neue', cursive;
	position: relative;
}
#top .aboutusArea ul li {
	width: calc((100% - 240px) / 2);
}
#top .aboutusArea ul li:nth-child(odd) {
	margin-right: 200px;
}
#top .aboutusArea ul li:nth-child(1),
#top .aboutusArea ul li:nth-child(2) {
	margin-bottom: 80px;
}
#top .aboutusArea ul li span {
	display: block;
	font-size: 2vmin;
	letter-spacing: 2px;
}
#top .aboutusArea .qArea img {
	position: absolute;
	width: 140px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
}
.readMore {
	width: 240px;
	margin: 0 auto 40px;
	text-align: center;
}
.readMore a {
	display: block;
	padding: 7px 0;
	background: #666464;
	color: #fff;
	font-size: 3vmin;
}
#top .aboutusArea h4 {
	background: #f2f2f2;
	display: inline-block;
	font-size: 3vmin;
	padding: 1px 30px 4px;
}
#top .aboutusArea p {
	margin: 40px 0;
}
#top .ordermadeArea .contactInfo a {
	background: #A1A0A0;
	margin: 0;
}
#top .contactInfo a::before {
	width: 26px;
	height: 20px;
	position: absolute;
}
.performanceArea ul.pc li {
	width: calc(100% / 3);
}
.performanceArea {
	position: relative;
}
.performanceArea ul li dl {
	position: absolute;
	bottom: 1%;
	padding: 5%;
	color: #fff;
	text-align: left;
}
.performanceArea ul li dl dt {
	font-size: 1.5vmin;
}
.performanceArea ul li dl dd {
	font-size: 2.1vmin;
}
.performanceMore {
	text-align: center;
	display: flex;
	justify-content: center;
	margin-top: 60px;
}
.performanceMore a {
	padding: 15px 20px 14px 0;
	border: 1px solid #000;
	color: #333;
	font-size: 1.9vmin;
	display: inline-block;
	width: 280px;
	height: 60px;
}
#top .section4 .contArea {
	background: url(../img/sec04_bg.png) top no-repeat;
	background-size: cover;
}
.section5 .contArea {
	background: url(../img/sec05_bg.png) no-repeat;
	background-size: cover;
}
.section6 .contArea {
	padding: 0;
}
.section0 {
	text-align: center;
}
.contactArea {
	height: calc(100vh - 26vh);
	background: #000;
	color: #fff;
	padding: 2%;
}
.contactArea h3 {
	font-size: 6vmin;
	margin-top: 40px;
}
.contactArea p {
	font-size: 3vmin;
	margin: 0 auto;
	line-height: 1.7;
	text-align: left;
	width: 850px;
}
.contactInfo {
	width: 500px;
	margin: 0 auto;
	text-align: center;
}
.contactInfo a {
	position: relative;
	display: block;
	padding: 19px 0 21px 30px;
	background: #E84729;
	color: #fff;
	border: none;
	font-size: 2vmin;
	margin: 40px 0 30px;
}
.contactInfo a::before {
	content: "";
	display: inline-block;
	background: url(../img/mail_w.svg) no-repeat;
	background-size: contain;
	width: 34px;
	height: 26px;
	position: absolute;
	left: 130px;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}
.instagramArea img {
	width: 68px;
	height: 60px;
}
/*---------- pagination ----------*/
.pagination {
	position: fixed;
	top: 50%;
	right: 32px;
	transform: translateY(-50%);
}
.pagination a {
	display: block;
	width: 12px;
	height: 12px;
	margin: 24px 0;
	border-radius: 50%;
	background-color: #fcfcfc;
	transition: transform 0.2s;
}
.pagination a.active {
	transform: scale(1.8);
}
/*---------- before - after ----------*/
.arrow {
	position: relative;
}
.arrow::after {
	content: "";
	display: inline-block;
	background: url(../img/performanc_arrow.svg) no-repeat;
	background-size: contain;
	width: 55px;
	height: 9px;
	position: absolute;
	right: 5%;
	bottom: 8%;
}
.more a {
	position: relative;
}
.more a::after {
	content: "";
	display: inline-block;
	background: url(../img/more_arrow.svg) no-repeat;
	background-size: contain;
	width: 9px;
	height: 15px;
	position: absolute;
	right: 20px;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}
.mail a {
	position: relative;
}
.mail a::before {
	content: "";
	display: inline-block;
	background: url(../img/mail.svg) no-repeat;
	background-size: contain;
	width: 26px;
	height: 20px;
	position: absolute;
	left: 60px;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}
/*--------------------------------------*/
/*------------↓ #ordermade ↓------------*/
/*--------------------------------------*/
#ordermade {
	text-align: center;
}
h2.ttlBox {
	font-size: 3vmin;
	background: #eaeaea;
	padding: 56px 0 86px 0;
	position: relative;
	margin-bottom: 40px;
	text-align: center;
}
h2.ttlBox::after {
	content: "";
	display: inline-block;
	background: url(../img/ttl_ber.svg) no-repeat;
	background-size: contain;
	width: 30px;
	height: 2px;
	position: absolute;
	bottom: 60px;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}
#ordermade .section1 h3 {
	font-size: 3.5vmin;
}
#ordermade .section1 p {
	line-height: 2;
}
#ordermade .section1 img {
	width: 100%;
	height: 140px;
	margin: 40px auto;
}
#ordermade .section1 h4 {
	font-size: 3vmin;
	margin-bottom: 30px;
}
#ordermade .section1 ul {
	justify-content: center;
	align-items: center;
	flex-wrap: nowrap;
}
#ordermade .section1 ul li {
	background: #91969B;
	color: #fff;
	padding: 10px;
	margin-left: 20px;
	font-weight: bold;
	line-height: 1.7;
	font-size: 2vmin;
	letter-spacing: 1px;
}
#ordermade .section1 ul li:first-child {
	margin-left: 0;
}
#ordermade .section2 h3 {
	font-size: 10.7vmin;
	margin-bottom: 20px;
}
.emphasis {
	font-size: 3.5vmin;
	font-weight: bold;
	border-top: 1px solid #e6e6e6;
	border-bottom: 1px solid #e6e6e6;
	padding: 10px 0;
	margin-bottom: 20px;
}
#ordermade .section2 ul li {
	font-size: 3vmin;
	font-weight: bold;
	margin: 0 auto 30px auto;
	background: #eaeaea;
	padding: 10px 0;
}
#ordermade .section3 ul {
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
}
h3.blackTll {
	background: #000;
	color: #fff;
	padding: 30px 0;
	font-size: 4vmin;
	letter-spacing: 0.1em;
}
h3.blackTll span {
	color: #F5FD2A;
}
#ordermade .section3 h3 {
	background: #000;
	color: #fff;
	padding: 30px 0;
	font-size: 4vmin;
	letter-spacing: 0.1em;
	position: relative;
}
h3 span {
    color: #F5FD2A;
}
h3.triangle {
	margin-bottom: 44px;
}
h3.triangle::after {
	content: "";
	display: inline-block;
	background: url(../img/triangle.svg) no-repeat;
	background-size: contain;
	width: 50px;
	height: 15px;
	position: absolute;
	bottom: -14px;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}
#ordermade .section3 h4 {
	font-size: 4.5vmin;
	text-decoration: underline;
	margin-bottom: 20px;
}
#ordermade .section3 ul {
	margin-bottom: 20px;
}
#ordermade .section3 ul li {
	border: 1px solid #888;
	border-radius: 10px;
	padding: 20px 30px;
	width: calc((100% / 2) - 50px);
	height: 273px;
}
#ordermade .section3 ul li:first-child {
	margin-right: 50px;
}
#ordermade .section3 dt {
	font-size: 2.5vmin;
	margin-bottom: 20px;
}
#ordermade .section3 dd {
	margin-bottom: 20px;
	font-size: 1.5vmin;
	line-height: 1.7;
	text-align: left;
}
#ordermade .section3 ul li img {
	width: 100%;
	max-width: 340px;
	height: 56px;
}
#ordermade .section3 p {
	margin-bottom: 20px;
}

/*--------------------------------------*/
/*------------↓ #branding ↓-------------*/
/*--------------------------------------*/
/*　スロットマシンのような動き　*/
#page {
	text-align: center;
	background: #ccc;
	overflow: hidden;
}
#page p {
	margin: 0;
	padding: 1em 0;
	background: #eee;
}
#B {
	padding:5px;
}
#S {
	position: relative;
	background: #ccc;
	height: 480px;
}
.textItem {
	position: absolute;
	left: 50%;
	transform: translate(-50%, 0%);
	-webkit-transform: translate(-50%, 0%);
	-ms-transform: translate(-50%, 0%);
	opacity: 0;
	font-weight: bold;
	background: #fff;
	width: 900px;
}
#source-viewer {
	padding: 10px;
	box-sizing: border-box;
	margin: 0;
}
/*　------------------------------------　*/
#branding {
	text-align: center;
}
#branding ul {
	width: 100%;
}
#branding .section1 h3 {
	font-size: 5.3vmin;
	margin-bottom: 40px;
}
#branding .section2 h3 {
	position: relative;
}
#branding .section2 p {
	margin-bottom: 20px;
}
#branding .section2 .inner {
	text-align: left;
}
#branding .section2 ul {
	align-items: center;
	justify-content: center;
	flex-wrap: nowrap;
}
#branding .section2 ul li {
	width: calc(100% / 2);
	height: auto;
	padding: 60px;
}
#branding .section2 ul li:nth-child(1) {
	margin-right: 50px;
}
#branding .section2 ul li:nth-child(2) {
	border: 1px solid #eaeaea;
	margin-left: 50px;
}
#branding .section2 ul li dl dt {
	text-align: center;
	font-size: 3vmin;
	margin-bottom: 10px;
}
#branding .section2 ul li dl dd {
	line-height: 1.7;
}
.bgGray {
	background: #eaeaea;
}
.question {
	position: relative;
	font-size: 3.5vmin;
	padding: 25px 0 25px 60px;
	margin-bottom: 40px;
	text-align: left;
}
.question::before {
	content: "";
	display: inline-block;
	background: url(../img/branding/q_icon.svg) no-repeat;
	background-size: contain;
	width: 34px;
	height: 56px;
	position: absolute;
	left: 0;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}
.answer {
	position: relative;
	text-align: left;
	padding: 20px 0 20px 90px;
	margin-bottom: 40px;
}
.answer::before {
	content: "";
	display: inline-block;
	background: url(../img/branding/a_icon.svg) no-repeat;
	background-size: contain;
	width: 70px;
	height: 70px;
	position: absolute;
	left: 0;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}
#branding .section3 h5 {
	font-size: 1.45vw;
	margin-bottom: 20px;
}
#branding .section3 ul li {
	width: calc((100% / 4) - 30px);
	margin-left: 40px;
}
#branding .section3 ul li:first-child {
	margin-left: 0;
}
#branding .section3 figure img {
	width: 217px;
	margin-bottom: 20px;
}
#branding .section3 figure dl {
	text-align: left;
	margin-bottom: 40px;
}
#branding .section3 figure dl dt {
	margin-bottom: 10px;
	font-size: 2vmin;
	font-weight: bold;
}
#branding .section4 ul {
	align-items: center;
	justify-content: center;
}
#branding .section4 ul li {
	width: calc(100% / 2);
	margin: 40px;
}
#branding .section4 ul li:nth-child(1) img {
	width: 500px;
	height: auto;
}
#branding .section4 ul li:nth-child(2) img {
	width: 325px;
	height: auto;
}

/*--------------------------------------*/
/*-------------↓ #contact ↓-------------*/
/*--------------------------------------*/
form p {
	margin-bottom: 2%;
	text-align: center;
}
.tableBox {
	border-radius: 3px;
	margin-bottom: 2%;
}
.tableBox li {
	border-bottom: 1px solid #e6e6e6;
	padding: 1% 2%;
}
.tableBox li:first-child {
	border-top: 1px solid #e6e6e6;
}
.tableBox dl {
	width: 100%;
	font-size: 2.5vmin;
	font-weight: bold;
	line-height: 1.7;
}
.tableBox dl dt {
	width: 30%;
}
.tableBox dl dt span {
	font-size: 14px;
	padding: 2px 4px;
	background: #F10015;
	margin-left: 10px;
	border-radius: 3px;
	color: #fff;
}
.tableBox dl dd {
	width: 70%;
}
input,
select,
textarea {
	width: 100%;
	padding: 10px;
	border: none;
	border-radius: 3px;
}
form .btn {
	text-align: center;
}
form button {
	padding: 15px 0;
	border: 1px solid #000;
	color: #333;
	font-size: 1.9vmin;
	display: inline-block;
	width: 280px;
	height: 60px;
}


/*--------------------------------------*/
/*-------------↓ #privacy ↓-------------*/
/*--------------------------------------*/
#privacy .inner h4 {
	margin-bottom: 1%;
}
#privacy .inner div {
	padding: 1% 2% 0;
}
#privacy ul {
	padding: 0 2% 0 2%;
}
#privacy li {
	list-style: decimal;
}
#privacy li ol li {
	list-style: inside;
}

/*--------------------------------------*/
/*--------------↓ #about ↓--------------*/
/*--------------------------------------*/
.contTtl {
	text-align: center;
	font-size: 11.7vmin;
	letter-spacing: 1px;
	margin-bottom: 20px;
}
#about .inner div {
	margin-bottom: 8%;
}
#about figure {
	flex-wrap: nowrap;
	align-items: flex-start;
}
#about figure img {
	width: 400px;
}
#about figure figcaption {
	margin-left: 4%;
	font-size: 2vmin;
	font-weight: bold;
	line-height: 1.7;
}
#about figure figcaption strong {
	font-size: 3.05vmin;
}
#about figure figcaption small {
	font-size: 1.5vmin;
	background: none;
	color: #333;
	margin-bottom: 0;
}
#about #section2 {
	height: calc(100vh + 700px);
}
#about .philosophy {
	text-align: center;
}
#about .philosophy p{
	font-size: 3vmin;
	font-weight: bold;
	line-height: 1.7;
}
#about .philosophy li {
	border-top: 1px solid #c9c9c9;
}
#about .philosophy li:first-child {
	border-top: none;
}
#about .philosophy figure {
	align-items: center;
	flex-direction: row;
	flex-wrap: nowrap;
}
#about .philosophy figure img {
	width: 104px;
	padding: 10px 0;
}
#about .philosophy figure dl {
	padding: 10px 0;
	text-align: left;
}
#about .philosophy figure dl dt {
}
#about .philosophy figure dl dd {
	font-size: 1.5vmin;
	font-weight: normal;
}
.yutakana{
	font-size: 3vmin;
	font-weight: bold;
	line-height: 1.7;
}

/*--------------------------------------*/
/*--------------↓ #news ↓---------------*/
/*--------------------------------------*/
#news .inner ul {
	width: 100%;
}
#news .inner ul li {
	width: calc((100% / 2) - 5px);
	padding-left: 2%;
}
#news .inner ul li:nth-child(odd) {
	padding-left: 0;
}
#news figure {
	margin-bottom: 2%;
}
#news figure img {
	width: 120px;
}
#news figure figcaption {
	margin-left: 2%;
	padding: 2%;
}
#news figure dl dt {
	color: #919191;
	margin-bottom: 4%;
}
#news figure dl dt span {
	background: #000;
	color: #fff;
	margin-right: 4%;
}



@media print, screen and (max-width: 1024px) {

}
@media print, screen and (max-width: 768px){
	.inner {
		width: 100%;
		margin: 0 auto;
	}
	.section0 .inner,
	#ordermade .section1 .inner,
	#ordermade .section2 .inner,
	#ordermade .section3 .inner,
	#branding .section2 .inner,
	#branding .section3 .inner,
	#branding .section4 .inner,
	#contact .section1 .inner,
	#privacy .section1 .inner,
	#privacy .section2 .inner,
	#privacy .section3 .inner,
	#about .section1 .inner,
	#about .section2 .inner,
	#news .section1 .inner {
		display: initial;
	}
	.newsArea ul li h2 {
		padding: 28px 0 27px;
		width: 145px;
		font-size: 4.4vmin;
	}
	#top .section1 .sp.more a::after {
		content: "";
		display: inline-block;
		background: url(../img/more_arrow_sp.svg) no-repeat;
		background-size: contain;
		width: 52px;
		height: 9px;
		position: absolute;
		right: 20px;
		top: 50%;
		-webkit-transform: translateY(-50%);
		transform: translateY(-50%);
	}
	#top .section1 h1 {
		font-size: 70px;
		line-height: 1.1;
	}
	#top .section1 p {
		font-size: 17px;
		margin-top: 2%;
	}
	.ttlArea {
		font-size: 25px;
		margin-bottom: 10%;
	}
	.ttlArea span {
		font-size: 15px;
	}
	.newsArea ul li dl {
		padding: 10px 0;
	}
	.newsArea ul li dt {
		width: 100%;
		margin-left: 20px;
	}
	.newsArea ul li dd {
		width: 100%;
		margin: 10px 0 0 20px;
	}
	#top h3 {
		font-size: 23px;
	}
	#top .section2 h3 {
		font-size: 49px;
	}
	#top .section2 p {
		max-width: 100%;
	}
	#top .section2 p span {
		font-size: 13px;
	}
	#top .aboutusArea,
	#top .brandingArea,
	#top .ordermadeArea,
	#about .philosophy,
	#about .tableBox {
		padding: 0 10px;
	}
	#top .aboutusArea ul {
		letter-spacing: 6px;
		font-size: 28px;
	}
	#top .aboutusArea ul li {
		width: calc((100% - 80px) / 2);
	}
	#top .aboutusArea ul li:nth-child(1), #top .aboutusArea ul li:nth-child(2) {
		margin-bottom: 60px;
	}
	#top .aboutusArea ul li:nth-child(odd) {
		margin-right: 80px;
	}
	#top .aboutusArea .qArea img {
		width: 80px;
		top: 40%;
	}
	#top .aboutusArea h4 {
		font-size: 20px;
		padding: 5px 10px;
	}
	#top .section3 p, #top .section4 p {
		font-size: 16px;
		margin: 0 auto 40px;
		line-height: 1.7;
		width: 100%;
		text-align: center;
	}
	.contactArea {
		height: calc(100vh - 40vh);
		background: #000;
		color: #fff;
		padding: 2%;
	}
	.contactArea h4 {
		font-size: 23px;
		margin-top: 4%;
	}
	.contactArea p {
		font-size: 14px;
		margin-top: 10px;
		text-align: center;
		width: 100%;
	}
	.contactInfo a {
		font-size: 20px;
		max-width: 345px;
		width: 100%;
		margin: 10px auto;
	}
	#top .ordermadeArea .contactInfo a {
		background: #A1A0A0;
		margin: 0 auto;
	}
	.contactInfo {
		width: 100%;
	}
	.contactInfo a::before {
		left: 15%;
	}
	.performanceMore {
		margin-top: 20px;
	}
	.performanceMore a {
		padding: 17px 20px 17px 0;
		font-size: 15px;
	}
	.performanceArea ul li dl dt {
		font-size: 12px;
	}
	.performanceArea ul li dl dd {
		font-size: 15px;
	}
	h2.ttlBox {
		font-size: 20px;
		padding: 28px 0 43px 0;
		margin-bottom: 4%;
	}
	h2.ttlBox::after {
		bottom: 30px;
	}
	.contTtl {
		font-size: 19px;
	}
	#branding .section1 h3 {
		font-size: 20px;
		margin-bottom: 4%;
	}
	#branding .textItem {
		font-size: 2em !important;
	}
	h3.triangle {
		margin-bottom: 4%;
	}
	h3.triangle::after {
		width: 33px;
		height: 10px;
		bottom: -9px;
	}
	h3.blackTll {
		padding: 4% 2%;
		font-size: 18px;
	}
	#ordermade .section1 h3 {
		font-size: 18px;
	}
	#ordermade .section1 p {
		font-size: 12px;
	}
	#ordermade .section1 img {
		margin: 4% auto;
		padding: 0 10px;
	}
	#ordermade .section1 ul {
		padding: 2%;
	}
	#ordermade .section1 ul li {
		padding: 2%;
		margin-left: 2%;
	}
	#ordermade .section1 h4 {
		font-size: 20px;
		margin-bottom: 30px;
	}
	#ordermade .section2 ul li {
		font-size: 16px;
	}
	#ordermade .section3 p {
		margin-bottom: 4%;
	}
	.emphasis {
		font-size: 16px;
		padding: 4% 0;
	}
	#ordermade .section3 h3 {
		font-size: 18px;
	}
	#ordermade .section3 ul {
		margin: 2%;
		margin: 0 10px 20px;
	}
	#ordermade .section3 ul li {
		padding: 4% 2%;
		width: calc(100% / 2);
		height: 220px;
	}
	#ordermade .section3 ul li:first-child {
		margin-right: 2%;
	}
	#ordermade .section3 dt {
		font-size: 16px;
		margin-bottom: 20px;
	}
	#ordermade .section3 dt,
	#ordermade .section3 dd {
		margin-bottom: 4%;
	}
	#ordermade .section3 h4 {
		font-size: 18px;
		margin-bottom: 4%;
	}
	.question {
		font-size: 14px;
		padding: 4% 2% 4% 11%;
		margin-bottom: 4%;
	}
	.question::before {
		width: 16px;
		height: 28px;
		left: 2%;
	}
	.answer {
		padding: 2% 2% 2% 12%;
		margin-bottom: 0;
	}
	.answer::before {
		width: 30px;
		height: 30px;
		left: 2%;
	}
	#branding .section2 ul li {
		width: calc(100% / 2);
		height: auto;
		padding: 2%;
	}
	#branding .section2 ul li:nth-child(1) {
		margin-right: 2%;
	}
	#branding .section2 ul li:nth-child(2) {
		margin-left: 2%;
	}
	#branding ul {
		padding: 2%;
	}
	#branding .section3 h5 {
		font-size: 16px;
		margin-bottom: 2%;
	}
	#branding .section3 ul li {
		width: calc((100% / 2) - 5px);
		margin-left: 2%;
	}
	#branding .section3 ul li:nth-child(1),
	#branding .section3 ul li:nth-child(3) {
		margin-left: 0;
	}
	#branding .section3 figure img {
		width: 135px;
		margin-bottom: 2%;
	}
	#branding .section3 figure dl {
		margin-bottom: 2%;
	}
	#branding .section3 figure dl dt {
		margin-bottom: 2%;
		font-size: 14px;
	}
	#branding .section3 figure dl dd {
		margin-bottom: 2%;
		font-size: 12px;
	}
	#branding .section3 .bgGray .inner,
	#branding .section4 .bgGray .inner {
		display: flex;
	}
	#branding .section4 ul li {
		width: 100%;
		margin: 2%;
	}
	#branding .section4 ul {
		flex-direction: column;
	}
	#branding .section4 ul li:nth-child(1) img {
		width: auto;
	}
	.readMore {
		max-width: 240px;
	}
	.readMore a {
		font-size: 22px;
	}
	.mail a::before {
		left: 20%;
	}
	form {
		margin: 0 2%;
	}
	.contactTtl {
		font-size: 16px;
	}
	form p {
		font-size: 12px;
	}
	.tableBox dl {
		flex-wrap: wrap;
		flex-direction: column;
		font-size: 12px;
	}
	.tableBox dl dt {
		margin-top: 1%;
	}
	.tableBox dl dt,
	.tableBox dl dd {
		width: 100%;
		margin-bottom: 1%;
	}
	.tableBox dl dt span {
		font-size: 12px;
	}
	form button {
		max-width: 200px;
		font-size: 14px;
	}
	#privacy {
		font-size: 12px;
	}
	#about figure {
		flex-direction: column;
		align-items: center;
	}
	#about figure img {
		width: 150px;
		margin-bottom: 4%;
	}
	#about figure figcaption {
		margin: 0 2%;
	}
	#about p {
		margin: 0 2%;
	}
	#about #section2 {
		height: calc(100vh + 230px);
	}
	#news .inner ul {
		flex-direction: column;
		padding: 0 2%;
	}
	#news .inner ul li {
		padding-left: 0;
		width: 100%;
	}
	#news figure {
		flex-direction: row;
		flex-wrap: nowrap;
	}
	#news figure img {
		width: 90px;
	}
	#news figure figcaption {
		width: 100%;
	}
	/*  -- slider --  */
	.slick-slide {
		margin: 0 5px;
	}
	.slick-slide img {
		width: 100%;
		height: auto;
	}
	.slick-prev, .slick-next {
		z-index: 1;
	}
	.slick-prev:before, .slick-next:before {
		color: #000;
	}
	.slick-prev:before {
		content: "" !important;
		display: inline-block;
		background: url(../img/prev.svg) no-repeat;
		background-size: contain;
		width: 35px;
		height: 35px;
		position: absolute;
		left: 40px;
		top: 50%;
		-webkit-transform: translateY(-50%);
		transform: translateY(-50%);
	}
	.slick-next:before {
		content: "" !important;
		display: inline-block;
		background: url(../img/next.svg) no-repeat;
		background-size: contain;
		width: 35px;
		height: 35px;
		position: absolute;
		right: 40px;
		top: 50%;
		-webkit-transform: translateY(-50%);
		transform: translateY(-50%);
	}
	.slick-slide {
		transition: all ease-in-out .3s;
		opacity: .2;
	}
	.slick-active {
		opacity: 1;
	}
	.slick-current {
		opacity: 1;
	}
	.thumb {
		margin: 20px 0 0;
	}
	.thumb .slick-slide {
		cursor: pointer;
	}
	.thumb .slick-slide:hover {
		opacity: .7;
	}
}
@media print, screen and (max-width: 414px){

}