@charset "UTF-8";

/* ====================================
	共通スタイル
 ==================================== */
article {
	font-weight: 400;
}

.ma {
	margin-left: auto;
	margin-right: auto;
}

.font-regular {
	font-weight: 300;
}

.font-medium {
	font-weight: 400;
}

.font-bold {
	font-weight: bold;
}

.bg-baige {
	background-color: #FEFAF4;
}

.block {
	display: block;
}

.inline-block {
	display: inline-block;
}

.overflow-hidden {
	overflow: hidden
}

/* アニメーション */
.mv-visual {
	transform: scale(1.2);
}

.passed .mv-visual {
	transform: scale(1);
	transition: transform 1.5s;
}

.mv-title .move-in-bottom {
	transition-delay: .4s;
}

.move-in-left {
	display: block;
	opacity: 0;
	transform: translateX(-5%);
}

.passed .move-in-left {
	transform: translateX(0);
	opacity: 1;
	transition: opacity .8s, transform .8s;
}

#sub01 .sub-header.move-in-left {
	transition-delay: .9s;
}

.move-in-bottom {
	display: block;
	transform: translateY(110%);
}

.passed .move-in-bottom {
	transform: translateY(0);
	/* transition: -webkit-transform .8s cubic-bezier(.77, 0, .175, 1) .8s; */
	transition: transform 1.5s cubic-bezier(.77, 0, .175, 1);
	/* transition: transform .8s cubic-bezier(.77, 0, .175, 1) .8s, -webkit-transform .8s cubic-bezier(.77, 0, .175, 1) .8s */
}

.products-title .move-in-bottom,
.products-copy .move-in-bottom {
	transition-delay: .2s;
}

.prod-name-container .move-in-bottom {
	transition-delay: .2s;
}

.intro-text .text2 .move-in-bottom {
	transition-delay: .4s;
}

.passed .sub-title .move-in-bottom {
	transition-delay: .2s;
}

.fade-in-bottom {
	opacity: 0;
	transform: translateY(10%);
}

.passed .fade-in-bottom {
	transform: translateY(0);
	opacity: 1;
	transition: opacity .8s, transform .8s;
}

.passed .sub-text .fade-in-bottom {
	transition-delay: 1.4s;
}

.fade-in {
	opacity: 0;
}

.passed .fade-in {
	opacity: 1;
	transition: opacity 1.5s;
}

/* アロー */
.arrow-small path {
	stroke-dasharray: 50px;
	stroke-dashoffset: 50px;
}

.passed .arrow-small path {
	animation: just1 .7s forwards;
}

@keyframes just1 {
	0% {
		stroke-dashoffset: 50px;
	}

	100% {
		stroke-dashoffset: 0px;
	}
}

.arrow-large path {
	stroke-dasharray: 83px;
	stroke-dashoffset: 83px;
}

.passed .arrow-large path {
	animation: just2 .7s forwards;
}

@keyframes just2 {
	0% {
		stroke-dashoffset: 83px;
	}

	100% {
		stroke-dashoffset: 0px;
	}
}

/* フォント */
.zen-kaku-gothic-new {
	font-family: "zen-kaku-gothic-new", sans-serif;
	font-style: normal;
}

/* メインビジュアル */
.mv-title {
	text-shadow: 0px 0px 5px rgba(255, 255, 255, 0.8), 0px 0px 5px rgba(255, 255, 255, 0.8), 0px 0px 5px rgba(255, 255, 255, 0.8), 0px 0px 5px rgba(255, 255, 255, 0.8);
}

.mv-visual .visual1 {
	background-image: url(images/main-visual.jpg);
}

/* サブセクション */
.sub-header {
	position: relative;
}

.sub-header-title-container {
	display: flex;
	color: #fff;
	position: absolute;
	top: 20px;
	left: 25px;
	align-items: center;
}

.sub-header-num {
	line-height: 1;
	font-weight: 900;
	text-shadow: 0px 0px 4px rgba(156, 156, 156, 0.8);
}

.sub-header-title {
	text-shadow: 0px 0px 4px rgba(156, 156, 156, 0.8);
}

/* 製品セクション */
.prod-link {
	display: inline-block;
	font-weight: bold;
	background-color: #673E01;
	color: #fff;
}

.prod-link:hover {
	color: #fff;
	text-decoration: none;
}


/* 固定背景設定 */
#globalHeader,
#globalPageTitle,
#pageTop.default-v2,
/* #mainVisual, */
#main-area,
.sub-section,
.product-section {
	background-color: #fff;
}

main[data-footer-type] {
	padding-bottom: 0;
}


/* ====================================
	1023px以下
===================================== */
@media only screen and (max-width: 1023px) {
	.more-1024 {
		display: none;
	}

	.sp-maxw360 {
		max-width: 360px;
	}

	.sp-maxw480 {
		max-width: 480px;
	}

	.sp-maxw540 {
		max-width: 540px;
	}

	/* メインビジュアル */
	#mainVisual {
		padding-top: calc(100lvh - 189px);
	}

	.mv-title-container {
		width: 100%;
		padding-left: 5%;
		font-size: 6.0lvw;
		position: absolute;
		top: calc(46px + 10lvw);
		left: 50%;
		transform: translate(-50%, 0);
	}

	.mv-visual {
		width: 100%;
		height: calc(100lvh - 46px);
		position: fixed;
		top: 46px;
		left: 0;
		z-index: -1;
	}

	.mv-visual figure {
		width: 100%;
		height: 100%;
		background-repeat: no-repeat;
		background-position: center top;
		background-size: cover;
	}

	.mv-title {
		font-size: inherit;
	}

	/* イントロ */
	#intro {
		padding-top: 6rem;
		padding-bottom: 6rem;
	}

	.intro-text {
		font-size: 1.7rem;
		line-height: 2;
		text-align: center;
	}

	.intro-text .text2 {
		margin-top: 2rem;
	}

	.intro-img {
		margin-top: 4rem;
	}

	/* メインタイトル */
	.main-title {
		margin-bottom: 6rem;
		font-size: 2.8rem;
		text-align: center;
	}

	/* サブセクション */
	.sub-section,
	.sub-section-col:first-child {
		padding-bottom: 8rem;
	}

	.sub-section:first-of-type {
		padding-top: 6rem;
	}

	.sub-header-title-container {
		top: 10px;
		left: 8px;
	}

	.sub-header-num {
		font-size: 3.6rem;
	}

	.sub-header-title {
		margin-top: .5em;
		margin-left: .5em;
		font-size: 1.8rem;
	}

	.sub-section .arrow-down {
		margin: 10px 0;
		text-align: center;
	}

	.sub-container {
		text-align: center;
	}

	.sub-title {
		margin-bottom: 20px;
		font-size: 2.0rem;
		line-height: 1.7;
	}

	.sub-text {
		font-size: 1.4rem;
		line-height: 2;
	}

}

/* ====================================
	767px以下
===================================== */
@media only screen and (max-width: 767px) {

	/* メインビジュアル  */
	.mv-visual .visual1 {
		background-image: url(images/main-visual_sp.jpg);
	}

	/* 製品セクション */
	/* .products-section {
		padding-top: 6rem;
		padding-bottom: 8rem;
		text-align: center;
		position: relative;
	}

	.products-section .arrow-down {
		position: absolute;
		top: 0;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.products-title {
		margin-bottom: 26px;
		font-size: 3.6rem;
	}

	.products-copy {
		font-size: 1.6rem;
	}

	.prod-container {
		max-width: 280px;
		margin-top: 4rem;
	}

	.prod-color {
		margin-top: .5em;
		font-size: 1.2rem;
	}

	.prod-img-item:not(:first-child) {
		margin-top: 4rem;
	}

	.prod-name {
		margin-top: 40px;
		font-size: 3.2rem;
	}

	.prod-link {
		width: 180px;
		margin-top: .5em;
		padding: .5em;
		font-size: 1.4rem;
	} */

	/* 製品セクション */
	.products-section {
		padding-top: 6rem;
		padding-bottom: 8rem;
		text-align: center;
		position: relative;
	}

	.products-section .arrow-down {
		position: absolute;
		top: 0;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.products-title {
		margin-bottom: 26px;
		font-size: 3.6rem;
	}

	.products-copy {
		font-size: 1.6rem;
	}

	.prod-color {
		margin-top: .5em;
		font-size: 1.2rem;
	}

	.prod-name {
		margin-top: 30px;
		font-size: 3.2rem;
	}

	.prod-link {
		width: 180px;
		margin-top: .5em;
		padding: .5em;
		font-size: 1.4rem;
	}

	.prodocts-inner {
		display: flex;
		flex-direction: column;
	}
	.mark-gd {
		width: 52%;
		margin: 40px auto 0;
	}
	.prod-img{
		padding:12px 13% 8px;
	}
	
	/* 製品ラインアップスライダー */
	#sliderLineup {
		margin-top: 20px;
	}

	.slide-outer {
		display: flex;
		flex-wrap: wrap;
	}

	.slide-outer .prod-item {
		width: 78%;
	}

	.slide-outer .thums-item {
		width: 22%;
		padding: 2.4% 0% 4% 0;
	}

	.slide-outer .prod-img-item {
		background-color: #FEFAF4;
	}

	ul.slider-img-thumbs {
		display: flex;
		flex-wrap: wrap;
		flex-direction: column;
	}

	ul.slider-img-thumbs li {
		border: solid 1px #fff;
		opacity: .4;
		padding: 3px 10px;
	}

	ul.slider-img-thumbs li:not(:first-child) {
		margin-top: 22%;
		padding: 4px 10px 2px;
	}

	ul.slider-img-thumbs li.active {
		border: solid 1px #707070;
		opacity: 1;
	}

	ul.slider-img-thumbs li a img {
		display: block;
	}

	ul.slider-img-thumbs a {
		display: block;
		cursor: pointer;
	}

	ul.slider-img-thumbs {
		min-height: 0%;
		/* IE対応 */
		width: 100%;
		margin-top: auto;
	}
}

/* ====================================
	600px以上
===================================== */
@media only screen and (min-width: 600px) {
	.less-599 {
		display: none;
	}
}

/* ====================================
	768px以上
===================================== */
@media only screen and (min-width: 768px) {
	.less-767 {
		display: none;
	}

	/* 製品セクション */
	.prod-img-item {
		width: calc(100% / 3);
	}
	.prodocts-inner {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.mark-gd {
		width: 15%;
		padding: 0 1%;
		margin-top: 4vw;
	}
	.prod-img{
		padding:0% 7%;
	}
	
}

/* ====================================
	768px以上1023px以下
===================================== */
@media only screen and (min-width: 768px) and (max-width: 1023px) {

	/* メインビジュアル */
	.mv-title-container {
		font-size: 3.8lvw;
		top: calc(46px + 6lvh);
	}

	/* 製品セクション */
	.products-section {
		padding-top: 6rem;
		padding-bottom: 6rem;
		text-align: center;
		position: relative;
	}

	.products-section .arrow-down {
		position: absolute;
		top: 0;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.products-title {
		margin-bottom: 26px;
		font-size: 3.6rem;
	}

	.products-copy {
		font-size: 1.8rem;
	}

	.prod-container {
		display: flex;
		justify-content: center;
		margin-top: 60px;
	}

	.prod-color {
		margin-top: 1em;
		font-size: 1.4rem;
	}

	.prod-name {
		margin-top: 40px;
		font-size: 3.2rem;
	}

	.prod-link {
		width: 180px;
		margin-top: 10px;
		padding: .4em;
		font-size: 1.4rem;
	}
	.mark-gd {
    width: 180px;
}
}

/* ====================================
	1024px以上
===================================== */
@media print,
screen and (min-width: 1024px) {
	.less-1023 {
		display: none;
	}

	/* メインビジュアル */
	#mainVisual {
		padding-top: calc(100lvh - 220px);
	}

	.mv-title-container {
		min-width: 19em;
		font-size: 3.6rem;
		position: absolute;
		top: calc(60px + 6lvh);
		left: 50%;
		transform: translate(-420px, 0);
	}

	.mv-title {
		font-size: inherit;
	}

	.mv-visual {
		width: 100%;
		height: calc(100lvh - 60px);
		position: fixed;
		top: 60px;
		left: 0;
		z-index: -1;
	}

	.mv-visual figure {
		width: 100%;
		height: 100%;
		background-repeat: no-repeat;
		background-position: center top;
		background-size: cover;
	}

	/* イントロ */
	#intro {
		padding-top: 12rem;
		padding-bottom: 12rem;
	}

	.intro-flex-container {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 8%;
	}

	.intro-text {
		width: 44%;
		padding-right: 4%;
		padding-bottom: 4%;
		font-size: 2.0rem;
		line-height: 2;
	}

	.intro-text .text:first-child {
		margin-bottom: 2em;
	}

	.intro-img {
		width: 56%;
	}

	/* メインタイトル */
	.main-title {
		margin-bottom: 14rem;
		font-size: 5.0rem;
		text-align: center;
	}

	/* サブセクション */
	.sub-section {
		padding-bottom: 16rem;
	}

	.sub-section:first-of-type {
		padding-top: 12rem;
	}

	.sub-header-title-container {
		top: 20px;
		left: 25px;
	}

	.sub-header-num {
		font-size: 8.0rem;
	}

	.sub-header-title {
		margin-top: .5em;
		margin-left: .5em;
		font-size: 2.4rem;
	}

	.sub-section .arrow-down {
		margin: 30px 0;
		text-align: center;
	}

	.sub-section-col .sub-header-title-container {
		top: 15px;
		left: 15px;
	}

	.sub-section-col .sub-header-num {
		font-size: 5.0rem;
	}

	.sub-section-col .sub-header-title {
		font-size: 2.0rem;
	}

	.sub-section-col .arrow-down {
		margin: 30px 0 30px 60px;
	}

	.sub-container {
		text-align: center;
	}

	.sub-title {
		margin-bottom: 40px;
		font-size: 2.7rem;
		line-height: 1.7;
	}

	.sub-text {
		font-size: 1.6rem;
		line-height: 2;
	}

	.sub-section-col2 {
		display: flex;
		justify-content: space-between;
	}

	.sub-section-col2 .sub-section-col {
		width: 47%;
		text-align-last: left;
	}

	/* 製品セクション */
	.products-section {
		padding-top: 12rem;
		padding-bottom: 12rem;
		text-align: center;
		position: relative;
	}

	.products-section .arrow-down {
		position: absolute;
		top: 0;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.products-title {
		margin-bottom: 26px;
		font-size: 4.0rem;
	}

	.products-copy {
		font-size: 2.6rem;
	}

	.prod-container {
		display: flex;
		justify-content: center;
		margin-top: 80px;
	}

	.prod-color {
		margin-top: 1em;
		font-size: 1.4rem;
	}

	.prod-name {
		margin-top: 40px;
		font-size: 4.0rem;
	}

	.prod-link {
		width: 260px;
		margin-top: 10px;
		padding: .4em;
		font-size: 1.8rem;
	}


}

/* ====================================
	タブレット、印刷専用スタイル
===================================== */
@media only screen and (min-width: 1024px) and (max-width: 1199px) {}

/* ====================================
	1200px以上
===================================== */
@media only screen and (min-width: 1200px) {

	/* メインビジュアル */
	.mv-title-container {
		font-size: 3.6rem;
		top: calc(10lvh + 60px);
		transform: translate(-580px, 0);
	}

}

@media all and (-ms-high-contrast: none) {

	/* メインビジュアル */
	#mainVisual {
		padding-top: calc(100vh - 220px);
	}

	.mv-title-container {
		top: calc(60px + 6vh);
	}

	.mv-title {
		font-size: inherit;
	}

	.mv-visual {
		height: calc(100vh - 60px);
	}

}