@charset "utf-8";

body.no-scroll {
	overflow: hidden;
	height: 100%;
}

/* ================================
   Font
================================ */

/* Font Global Setting */
.toppage h3 {
	font-size: 42px;
	font-weight: bold;
	font-family: "Cormorant", serif;
	margin-bottom: 0 !important;
	line-height: 1;
}

.toppage .ttl__style01 {
	margin-bottom: 30px;
}

.toppage .ttl__style01-en {
	font-size: 60px;
	font-weight: 700;
	font-family: "Cormorant", serif;
	margin-bottom: 0 !important;
	line-height: 1;
}

.toppage .ttl__style01-ja {
	font-family: "Shippori Mincho", serif;
	font-weight: 700 !important;
	font-size: 20px;
	color: #1D1D1D !important;
}

@media screen and (max-width:768px) {
	.toppage .ttl__style01 {
		display: flex;
		align-items: baseline;
	}

	.toppage .ttl__style01-en {
		font-size: 32px;
	}

	.toppage .ttl__style01-ja {
		font-size: 16px;
		margin-left: 10px;
	}
}

.toppage .ttl__style02 {
	margin-bottom: 30px;
}

.toppage .ttl__style02-en {
	font-size: 60px;
	font-weight: 700;
	font-family: "Cormorant", serif;
	margin-bottom: 0 !important;
	line-height: 1;
	color: #fff;
}

.toppage .ttl__style02-ja {
	font-family: "Shippori Mincho", serif;
	font-weight: 700 !important;
	font-size: 20px;
	color: #fff;
}

@media screen and (max-width:768px) {
	.toppage .ttl__style02 {
		display: flex;
		align-items: baseline;
	}

	.toppage .ttl__style02-en {
		font-size: 32px;
	}

	.toppage .ttl__style02-ja {
		font-size: 16px;
		margin-left: 10px;
	}
}

@media screen and (max-width:768px) {
	.toppage h3 {
		font-size: 28px;
		font-weight: bold;
		text-align: left;
	}
}

#header-top .openbtn span {
	background-color: #fff !important;
}

#header-top .openbtn.active span {
	background-color: #666 !important;
}

/* ================================
   Intro
================================ */

.top-head {
	margin-top: 89px;
	margin-bottom: 39px;
}

.top-head .left {
	padding-top: 20px;
	width: 292px;
	height: 86px;
}

.top-head .right {
	font-size: 39px;
	font-weight: bold;
	line-height: 50px;
}

.top-movie-wrap {
	margin-left: auto;
	margin-right: auto;
	position: relative;
}

.top-movie-wrap:before {
	width: 100%;
	height: 100%;
	content: '';
	position: absolute;
	background-color: rgba(0, 0, 0, 0.38);
}

.top-movie-txt {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
}

.top-movie-en {
	color: #fff;
	font-family: "Cormorant", serif;
	font-size: 40px;
	font-weight: bold;
	text-align: center;
	margin-bottom: 0;
}

.top-movie-scroll {
	position: absolute;
	bottom: 0;
	right: 10px;
}

@media screen and (min-width:992px) {
	.top-movie-en {
		font-size: 79px;
	}

	.top-movie-scroll {
		right: 75px;
	}
}

.top-movie-ja {
	color: #fff;
	text-align: center;
	font-family: "Shippori Mincho", serif;
	font-size: 21px;
	font-weight: bold;
}

@media screen and (min-width:992px) {
	.top-movie-ja {
		font-size: 36px;
	}
}

.top-movie-wrap video {
	width: 100%;
	overflow: hidden;
	/* コンテンツが角からはみ出ないように */
	vertical-align: top;
}

@media screen and (max-width:768px) {

	.top-head {
		margin-top: 0;
		margin-bottom: 20px;
	}

	.top-head .left {

		width: 180px;
		height: 70px;
	}

	.top-head .right {
		font-size: 24px;
		line-height: 40px;
	}

	.top-movie-wrap {
		overflow: hidden;
	}

	.top-movie-wrap video {
		height: 560px;
		object-fit: cover;
	}

}

/* ================================
   Pickup Items
================================ */

#pickup {
	overflow-x: hidden;
}

.top-itemPickup {
	display: flex;
	flex-wrap: wrap;

	max-width: 1720px;
	margin: auto auto;
}

.top-itemPickup .header {
	/*order: 1;*/
	margin-bottom: 60px;
}

.top-itemPickup .header .mtitle {}

.top-itemPickup .header>p {
	font-size: 20px;
	font-weight: normal;
	color: #585858;

}

.top-itemPickup .items {
	/*order: 3;*/

}

.top-itemPickup>.btnWrap {
	align-items: center;
	/*order: 2;*/
	position: absolute;
	top: 30px;
	right: 0;
}

.top-pickup-main {
	font-size: 40px !important;
	font-family: "Cormorant", serif;
	font-weight: 700 !important;
}

@media screen and (min-width:992px) {
	.top-pickup-main {
		font-size: 60px !important;
	}
}

.top-pickup-sub {
	font-size: 16px;
	font-family: "Shippori Mincho", serif;
	font-weight: 700 !important;
}

.top-pickup-p {
	font-family: "Shippori Mincho", serif;
	font-size: 18px;
}

@media screen and (max-width: 1299px) {
	/*
	.top-itemPickup .header{
		order: 1;
	}
	.top-itemPickup .items{
		order: 2;
	}
	.top-itemPickup .btn{
		order: 3;
	}
	*/
}


.box {
	background: #030909;
	padding: 60px;

}



.top-itemPickup {
	position: relative;
	/* height: 720px; */
	max-width: 1300px;
	margin: 120px auto 140px auto;
}

.top-itemPickup .items {
	/* position: absolute; */
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	max-width: 1300px;
	width: 100vw;
}

.top-itemPickup .box {
	width: calc(25% - 13.5px);
	padding: 0;
}

.top-itemPickup .box a {
	padding: 3vw;
	display: block;
}


.top-itemPickup .title {
	color: white;
	font-size: clamp(10px, 1.5vw, 18px);
	text-align: center;
	height: auto;
	line-height: 100%;
	font-family: "Shippori Mincho", serif;
	line-height: 1.27;
	margin-bottom: 6px;
	font-weight: 700;
}

.top-itemPickup .text {
	color: white;
	font-size: 16px;
	text-align: center;
	margin-bottom: 25px;
	font-family: "Shippori Mincho", serif;
}

.top-itemPickup .photo {
	/* height: 288px; */
	margin-bottom: 20px;
	overflow-y: hidden;
}

.top-itemPickup .photo img {
	margin-left: auto;
	margin-right: auto;
	width: 100%;
}

.top-itemPickup .items .btnWrap {
	text-align: center;
	margin: auto;

}

.top-pickup-more {
	border-bottom: 1px solid #212529;
	display: block;
	padding-right: 37px;
}

.top-pickup-more-in {
	color: #212529;
	font-family: "Shippori Mincho", serif;
	font-weight: 600;
	font-size: 16px;
	position: relative;
}

.top-pickup-more-in::after {
	position: absolute;
	content: '';
	width: 27px;
	height: 8px;
	background-image: url(../images/top/pickup-arrow.svg);
	background-repeat: no-repeat;
	background-size: contain;
	right: -37px;
	top: 11px;
	background-position: right;
}

@media screen and (min-width: 1700px) {

	.leftBtn,
	.leftBtn {
		display: none;
	}
}


@media screen and (max-width: 1699px) {
	.top-itemPickup {
		/* height: 50vw; */
	}

	.top-itemPickup .items {
		transition: margin-left 1s ease;
	}

	.top-itemPickup .items>.btnWrap {
		order: none;
		position: absolute;
		bottom: 0;
	}

	.leftBtn,
	.rightBtn {
		position: absolute;
		right: 0;
		bottom: 0;
		border: 0;
		border-radius: 40px;
	}

	.leftBtn span,
	.rightBtn span {
		display: block;
		width: 34px;
		height: 34px;
	}

	.leftBtn {
		background: url("../images/common/btn-arrow_white_rev.svg") center no-repeat #121212;
		right: 50px;
	}

	.rightBtn {
		background: url("../images/common/btn-arrow_white.svg") center no-repeat #121212;
		right: 0;
	}
}

@media screen and (max-width: 991px) {

	.top-itemPickup {
		margin-top: 40px;
		margin-bottom: 100px;
	}

	.top-itemPickup>.btnWrap {
		top: auto;
		right: auto;
		bottom: -50px;
		left: 0;
	}

	.top-itemPickup .items {
		/* max-width: 400px; */
	}

	.top-itemPickup .header {
		margin-bottom: 30px;
	}

}

@media screen and (max-width: 1015px) {
	.top-itemPickup .items {
		margin-left: -15px;
	}
}

@media screen and (max-width: 767px) {
	.top-itemPickup .items .box {
		width: calc(100vw + -30px);
	}


	.leftBtn {
		padding: 0;
	}

	.rightBtn {
		padding: 0;
	}
}

@media screen and (max-width: 991px) {
	.top-itemPickup {
		/* height: 750px; */
	}
}

@media screen and (max-width: 400px) {
	.top-itemPickup {
		/* height: 160vw; */
	}

	.top-itemPickup>.btnWrap {

		left: 0;
	}

}

.slick-prev:before,
.slick-next:before {
	color: #1d1d1d !important;
}

.slick-prev {
	left: -15px !important;
	z-index: 3;
}

.slick-next {
	right: -15px !important;
}


@media screen and (max-width: 1000px) {
	.top-itemPickup .box {
		margin: 0 10px;
	}
}

@media screen and (max-width: 1015px) {
	.top-itemPickup .slick-prev {
		background: url(../images/common/btn-arrow_white_rev.svg) center no-repeat #121212;
		right: 50px;
		width: 34px;
		height: 34px;
		left: auto !important;
		border-radius: 60px;
		bottom: -70px;
		top: auto !important;
		opacity: .7;
	}

	.top-itemPickup .slick-next {
		background: url(../images/common/btn-arrow_white.svg) center no-repeat #121212;
		right: 0px !important;
		width: 34px;
		height: 34px;
		left: auto !important;
		border-radius: 60px;
		bottom: -70px;
		top: auto !important;
		opacity: .7;
	}

	.top-itemPickup .slick-next::before,
	.top-itemPickup .slick-prev:before {
		content: "";
	}

	.top-itemPickup .slick-next:hover {
		background: url(../images/common/btn-arrow_white.svg) center no-repeat #121212;
		opacity: 1;

	}

	.top-itemPickup .slick-prev:hover {
		background: url(../images/common/btn-arrow_white_rev.svg) center no-repeat #121212;
		opacity: 1;
	}
}

/* ================================
   Section Detail Settings
================================ */
@media screen and (max-width: 767px) {
	#about>div {
		padding-bottom: 200px !important;
	}
}

#about .corner-top {
	background-color: #000000;
	border-radius: 0 !important;
}

#news {
	background-color: #F7F5F1;
}

#news .corner-top {
	border-radius: 0 !important;
}

#sdgs {
	background: #fff;
	margin: auto;
}

#products {
	background-color: #090303;
}


#products .corner-top {
	/* background: #090303; */
}

#company {
	/* background: #090303; */
}

#company .corner-top {
	/* background: #fff; */
}

/* move to common.css

#contentsBottom{
	background: linear-gradient(-100deg, #DDC77F 0%, #DEAF79 54%);
}
*/


/* ================================
   #about
================================ */

#about>div {
	padding-top: 160px;
}

#about>div {
	background-image: url("../images/top/about_bg.png");
	background-repeat: no-repeat;
	background-position: bottom center;
	background-size: contain;
}

#about .mtitle {
	text-align: center;
	margin-bottom: 40px;
}

#about .text {
	max-width: 100%;
	font-size: 27px;
	line-height: 2.4;
	margin: 0 auto 25px auto;
	position: relative;
	z-index: 4;
}

#about .btnWrap {
	width: 484px;
	text-align: center;
	margin: 0 auto 40px auto;
}

#about .corner-top {
	position: relative;
	padding-bottom: 150px;
}

@media screen and (max-width:991px) {
	#about .corner-top {
		padding-top: 100px;
		padding-bottom: 140px;
	}

	#about .text p {
		font-size: 20px;
		line-height: 220%;
		text-align: left;
	}
}

@media screen and (max-width:991px) {
	#about h3 {
		text-align: center;
	}

	#about .text {
		width: 100%;
		font-size: clamp(1rem, 2vw + 1rem, 3rem);
		padding-left: 25px;
		padding-right: 25px;
	}

	#about .btnWrap {
		width: 100%;
	}

	#about .image {
		padding-top: 0;
	}

	#about>div {
		background-image: url("../images/top/about_bg_sp.png");
	}

}

.top-about-ttl {
	color: #fff;
}

.top-about-sub {
	color: #fff;
	font-family: "Shippori Mincho", serif !important;
	font-size: 18px;
	text-align: center;
	position: relative;
	z-index: 3;
}

.top-about-btn {
	border-bottom: 1px solid #fff;
	display: block;
	padding-right: 37px;
	max-width: 122px;
	margin: auto;
}

.top-about-btn-in {
	color: #fff;
	font-family: "Shippori Mincho", serif;
	font-weight: 600;
	font-size: 16px;
	position: relative;
	white-space: nowrap;
}

.top-about-btn-in::after {
	position: absolute;
	content: '';
	width: 27px;
	height: 8px;
	background-image: url(../images/top/about-arrow.svg);
	background-repeat: no-repeat;
	background-size: contain;
	right: -37px;
	top: 11px;
	background-position: right;
}

.top-about-bg01 {
	position: absolute;
	width: 30vw;
	left: 0;
	top: 25%;
	transform: translateY(-50%);
	z-index: 2;
}

.top-about-bg02 {
	position: absolute;
	width: 30vw;
	right: 0;
	top: 25%;
	transform: translateY(-50%);
	z-index: 2;
}

/* ================================
   #news
================================ */

#news {}

#news>div {
	padding-top: 160px;
}

#news .btnWrap {
	justify-content: right;
	display: flex;
}

@media screen and (max-width: 767px) {
	#news .btnWrap {
		justify-content: left;
	}
}

#news .separate {
	justify-content: space-between;
}

#news .items {
	display: flex;
	flex-wrap: nowrap;
	justify-content: flex-start;
	padding-top: 100px;
	padding-bottom: 100px;
	overflow-x: hidden;
	max-width: 1300px;
	margin-left: auto;
	margin-right: auto;
}

#news .items .item {
	width: calc(100% / 3);
}

@media screen and (max-width:1000px) {
	#news .items {
		overflow-x: visible;
	}

	#news .items .item {
		width: 100%;
		padding: 0 10px;
	}
}

@media screen and (max-width:768px) {
	#news .items {
		padding-bottom: 50px;
	}
}

#news .items .item a {
	text-decoration: none;
}

#news .items .item a:hover img {
	transform: scale(1.1);
}

#news .items .item a:hover .title {
	color: #1d1d1d;
}

#news .items .item .date {
	color: #1d1d1d;
	font-size: 14px;
	padding-top: 10px;
	padding-bottom: 3px;
	font-family: "Shippori Mincho", serif;
}

#news .items .item .photo {
	position: relative;
	overflow: hidden;
}

#news .items .item .photo span {
	display: block;
	position: absolute;
	padding: 2px 15px;
	font-size: 14px;
	top: 0;
	left: 0;
	background-color: #1d1d1d;
	text-align: center;
	color: #fff;
	font-family: "Shippori Mincho", serif;
}

#news .items .item .photo img {
	width: 100%;
	aspect-ratio: 314 / 239;
	object-fit: cover;
	transition: transform .6s ease;
}

#news .items .item .title {
	font-size: 16px;
	margin-bottom: 8px;
	font-family: "Shippori Mincho", serif;
	font-weight: 700;
}

#news .items .item .text {
	color: #5B5B5B;
	line-height: 220%;

}

#news .items .item,
#news .items .date,
#news .items .title,
#news .items .text {

	/* width: 360px; */
}

#news .slick-list {}

@media screen and (max-width: 1015px) {
	#news .slick-prev {
		background: url(../images/common/btn-arrow_white_rev.svg) center no-repeat #121212;
		right: 50px;
		width: 34px;
		height: 34px;
		left: auto !important;
		border-radius: 60px;
		bottom: -7px;
		top: auto !important;
	}

	#news .slick-next {
		background: url(../images/common/btn-arrow_white.svg) center no-repeat #121212;
		right: 0px !important;
		width: 34px;
		height: 34px;
		left: auto !important;
		border-radius: 60px;
		bottom: -7px;
		top: auto !important;
	}

	#news .slick-next::before,
	#news .slick-prev:before {
		content: "";
	}

	#news .slick-next:hover {
		background: url(../images/common/btn-arrow_white.svg) center no-repeat #121212;
		opacity: .7;

	}

	#news .slick-prev:hover {
		background: url(../images/common/btn-arrow_white_rev.svg) center no-repeat #121212;
		opacity: .7;
	}
}

@media screen and (min-width:992px) {
	#news .item {
		padding: 0 7px;
	}

	#news .item:first-child {
		padding: 0 7px 0px 0;
	}

	#news .item:last-child {
		padding: 0 0 0px 7px;
	}
}

.slider-container {
	position: relative;
	overflow-x: scroll;
	/* 水平方向のスクロールを許可 */
	overflow-y: hidden;
	/* 垂直方向のオーバーフローを非表示 */
	white-space: nowrap;
	/* 改行を防止 */
}

.slick-track {
	display: flex !important;
}

.slick-slide {
	height: auto !important;
}

.top-news-ttl {
	font-size: 40px !important;
	font-family: "Cormorant", serif;
	font-weight: 700 !important;
}

@media screen and (min-width:992px) {
	.top-news-ttl {
		font-size: 60px !important;
	}
}

.top-news-sub {
	font-size: 16px;
	font-family: "Shippori Mincho", serif;
	font-weight: 700 !important;
}

.top-news-btn {
	border-bottom: 1px solid #212529;
	display: block;
	padding-right: 37px;
	padding-bottom: 10px;
	height: fit-content;
}

.top-news-btn-in {
	color: #212529;
	font-family: "Shippori Mincho", serif;
	font-weight: 600;
	font-size: 16px;
	position: relative;
	white-space: nowrap;
}

.top-news-btn-in::after {
	position: absolute;
	content: '';
	width: 27px;
	height: 8px;
	background-image: url(../images/top/pickup-arrow.svg);
	background-repeat: no-repeat;
	background-size: contain;
	right: -37px;
	top: 11px;
	background-position: right;
}

.top-news-btn01 {
	margin-right: 20px;
}

@media screen and (max-width: 767px) {
	.top-news-btn01 {
		margin-left: 0;
	}
}

@media screen and (max-width:1299px) {
	#news>div {
		padding-top: 100px;
	}
}

@media screen and (max-width:991px) {
	#news .items {
		padding-top: 40px;
	}

	#news .btnWrap {
		text-align: center;
	}

	#news>div {
		padding-top: 50px;
	}
}

/* ================================
   #sdgs
================================ */
#sdgs {
	padding: 80px 15px;
	position: relative;
}

.sdgs-in {
	max-width: 1300px !important;
	margin: auto;
}

#sdgs .box {
	background-color: unset;
	display: flex;
	padding: 0;
	position: relative;
}

#sdgs .box-l {
	width: 45%;
	padding-right: 30px;
}

#sdgs .box-r {
	width: 100%;
	height: 200px;
}

#sdgs .box-r img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

#sdgs .box-r .slick-track {
	height: 200px;
}

#sdgs .box-r {
	width: 100%;
	margin-top: 10px;
}

@media screen and (min-width:600px) {
	#sdgs .box-r {
		height: 400px;
	}

	#sdgs .box-r .slick-track {
		height: 400px;
	}
}

@media screen and (min-width:992px) {
	#sdgs .box-r {
		width: 45.20vw;
		top: 50%;
		right: 0;
		position: absolute;
		transform: translateY(-50%);
		height: 23.64vw;
		margin-top: 0;
		max-height: 451px;
	}

	#sdgs .box-r .slick-track {
		height: 23.64vw;
	}

	#sdgs .box-r img {
		max-height: 451px;
	}
}

#sdgs .box-r img {
	width: 100%;
}

#sdgs .imageWrap {
	padding-right: 100px;
}

#sdgs .div2 .mtitle {
	margin-top: 150px;
	margin-bottom: 20px;
}

#sdgs .div2 .text {
	margin-bottom: 25px;
}

#sdgs .btnWrap {
	margin-bottom: 100px;
}

#sdgs .corner-top {
	border-radius: 0 !important;
}

@media screen and (max-width:768px) {
	#sdgs>div {
		padding-top: 0;
	}

	#sdgs .box {
		display: block;
	}

	#sdgs .div2 {
		order: 1;
	}

	#sdgs .div1 {
		order: 2;
	}

	#sdgs div {
		width: 100%;
	}

	#sdgs div img {
		width: 100%;
	}

	#sdgs .div2 .mtitle {
		margin-top: 0;
	}

	#sdgs .mtitle h3 {
		text-align: center;
	}

	#sdgs .div2 .text {
		padding: 0 25px;
	}

	#sdgs .div2 .btnWrap {
		text-align: center;
	}

	#sdgs .btnWrap {
		margin-bottom: 25px;
	}

	#sdgs div#sustainability {
		width: 300px;
		margin-bottom: 25px;
	}

	#sdgs div#sustainability img {
		width: 100%;
	}

	#sdgs .imageWrap {
		padding: 20px;
	}

	#sdgs .box-l {
		width: 100%;
		padding-right: 0;
	}

}

#sdgs .ttl {
	font-size: 40px !important;
	font-family: "Cormorant", serif;
	font-weight: 700 !important;
}

@media screen and (min-width:992px) {
	#sdgs .ttl {
		font-size: 60px !important;
	}
}

#sdgs .sub {
	font-size: 16px;
	font-family: "Shippori Mincho", serif;
	font-weight: 700 !important;
}

#sdgs .txt {
	font-family: "Shippori Mincho", serif;
	font-size: 18px;
	margin-top: 30px;
	line-height: 2.22;
}

#sdgs .btn {
	border-bottom: 1px solid #1d1d1d;
	display: block;
	max-width: 122px;
	border-radius: 0 !important;
	padding: 0 37px 0 0 !important;
	margin-top: 10px;
}

#sdgs .btn-in {
	color: #1d1d1d;
	font-family: "Shippori Mincho", serif;
	font-weight: 600;
	font-size: 16px;
	position: relative;
	white-space: nowrap;
}

#sdgs .btn-in::after {
	position: absolute;
	content: '';
	width: 27px;
	height: 8px;
	background-image: url(../images/top/pickup-arrow.svg);
	background-repeat: no-repeat;
	background-size: contain;
	right: -37px;
	top: 11px;
	background-position: right;
}

#sdgs .small {
	margin-top: 100px;
}

@media screen and (max-width:768px) {
	#sdgs .small {
		margin-top: 40px;
	}
}

#sdgs .thumbnail-img {
	width: 110px;
	height: 110px;
	margin: 0 3px;
}

#sdgs .thumbnail-img img {
	width: 110px;
	height: 110px;
	object-fit: cover;
}

#sdgs .thumbnail .slick-list {
	width: 227px;
	overflow-x: hidden;
}

#sdgs .thumbnail .slick-track {
	margin-left: -175px;
}

#sdgs .thumbnail {
	margin-top: 100px;
}

@media screen and (max-width:768px) {
	#sdgs .thumbnail {
		margin-top: 40px;
	}
}

/* ================================
   #products
================================ */
#products {
	padding: 0 15px;
}

#products .corner-top {
	border-radius: 0 !important;
	position: relative;
	height: 3000px;
}

#products .products-in {
	max-width: 1300px;
	margin: 0 auto;
}

#products>div {
	position: relative;
	padding-bottom: 100px;
}

#products .separate {
	top: 180px;
	/*実質固定位置*/
	position: sticky;
}

#products>div {
	padding-top: 100px;
}

#products .sub {
	font-size: 16px;
	color: #fff;
	font-family: "Shippori Mincho", serif;
}

#products .text p {
	color: white;
	font-family: "Shippori Mincho", serif;
	font-size: 18px;
}

#products .btn {
	border-bottom: 1px solid #fff;
	display: block;
	max-width: 122px;
	border-radius: 0 !important;
	padding: 0 37px 0 0 !important;
	margin-top: 10px;
}

#products .btn-in {
	color: #fff;
	font-family: "Shippori Mincho", serif;
	font-weight: 600;
	font-size: 16px;
	position: relative;
	white-space: nowrap;
}

#products .btn-in::after {
	position: absolute;
	content: '';
	width: 27px;
	height: 8px;
	background-image: url(../images/top/about-arrow.svg);
	background-repeat: no-repeat;
	background-size: contain;
	right: -37px;
	top: 11px;
	background-position: right;
}

#products .div1 p {
	color: #f8f8f8;
	font-size: 20px;
	line-height: 200%;
	margin-bottom: 25px;
}

#products .div1 {
	position: relative;
	width: 100%;
}

#products .div2 {
	width: 100%;
}

#products .div1 .content {
	/* position: absolute;
	top: 0;
	right: 100px;
	width: 500px; */
}

#products .image-wrapper {
	height: 677px;
	position: relative;
	margin-top: 50px;
}

#products .image-wrapper img {
	width: 100%;
}

#products .image-section img.image {
	opacity: 0;
	visibility: hidden;
	position: absolute;
	top: 0;
	left: 0;
	transition: opacity 0.5s ease, visibility 0s 0.5s;
	/* フェードのアニメーション */
}

#products .image-section img.image.active {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.5s ease;
	/* visibilityの遅延をなくす */
}

.image-section {
	position: relative;
}

.imageNavi {
	position: absolute;
	top: -150px;
	right: 0;
	display: flex;
	align-items: center;
}

/* デザインの制約で消す */
@media screen and (max-width:1400px) {
	.imageNavi {
		display: none;
	}
}

.imageNavi ul {
	padding-left: 0;
	display: flex;
}

.imageNavi li {
	list-style: none;
	padding: 10px;
}

.imageNavi .navImage {
	width: 86px;
	height: 86px;
}

.imageNavi .navImage img {
	width: 86px;
	height: 86px;
	object-fit: cover;
}


.lbImageWrap {
	position: absolute;
	height: 197px;
	width: 197px;
	bottom: 0;
	right: 50px;
	transform: translateY(-50%);
}

.lbImageWrap .lbImage {
	width: 197px;
	height: 197px;
	object-fit: cover;
}

.lbImageWrap img.lbImage {
	opacity: 0;
	visibility: hidden;
	position: absolute;
	top: 0;
	left: 0;
	transition: opacity 0.5s ease, visibility 0s 0.5s;
	/* フェードのアニメーション */
}

.lbImageWrap img.lbImage.active {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.5s ease;
	/* visibilityの遅延をなくす */
}


.sdTextWrap {
	position: absolute;
	height: 40px;
	bottom: 100px;
	left: 0;
	width: 100%;
}

.sdTextWrap img.sdText {
	height: 40px;
}

@media screen and (max-width:768px) {
	.sdTextWrap img.sdText {
		height: 35px;
	}
}

.sdTextWrap img.sdText {
	opacity: 0;
	visibility: hidden;
	position: absolute;
	top: 0;
	left: 0;
	border-radius: 26px;
	transition: opacity 0.5s ease, visibility 0s 0.5s;
	/* フェードのアニメーション */
}

.sdTextWrap img.sdText.active {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.5s ease;
	/* visibilityの遅延をなくす */
}

.spTitleWrap,
.spCircleWrap {
	display: none;
}

@media screen and (max-width: 1299px) {

	#products .separate {
		top: 70px;
		/*実質固定位置*/
		position: sticky;
	}


	#products>div {
		padding-top: 60px;
		height: 3000px;
	}

	#products .div1 .content {
		width: 100%;
		right: auto;
	}

	#products .div1 p {
		font-size: 18px;
	}

	#products .div2 {
		margin-top: 100px;
	}

	#products .btnWrap {
		text-align: center;
	}

	#products .image-wrapper {
		width: 100%;
		max-width: 800px;
		margin: auto;
		height: auto;
	}

	#products .image-section img.image {
		width: 100%;
	}

	#products .text {
		margin: auto;
	}

	#products .image-section {
		max-width: 800px;
		margin-left: auto;
		margin-right: auto;
	}

	.imageNavi {
		position: absolute;
		display: block;
		height: 67px;
		top: -100px;
		right: 15px;
		left: auto;
		max-width: 400px;
	}

	.imageNavi ul {
		padding-left: 0;
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-end;
	}

	.imageNavi ul li,
	.imageNavi ul li .navImage,
	.imageNavi ul li .navImage img {
		width: 69px;
		height: 69px;
	}

	.imageNavi ul {
		padding-top: 10px;
		gap: 10px;
	}

	.imageNavi ul li .navImage img {
		border-radius: 8px;
	}

	.spCircleWrap {
		display: block;
	}

	.spCircleWrap {
		position: absolute;
		width: 107px;
		height: 107px;
		top: -160px;
		right: 0;
	}

	.spCircleWrap img.spCircle {
		width: 100%;
		max-width: 100%;
		height: 107px;

	}

	.spCircleWrap img.spCircle {
		opacity: 0;
		visibility: hidden;
		position: absolute;
		top: 0;
		right: 0;
		border-radius: 26px;
		transition: opacity 0.5s ease, visibility 0s 0.5s;
		/* フェードのアニメーション */
	}

	.spCircleWrap img.spCircle.active {
		opacity: 1;
		visibility: visible;
		transition: opacity 0.5s ease;
		/* visibilityの遅延をなくす */
	}


	.spTitleWrap {
		display: block;
		position: absolute;
		top: -35px;
		left: 0;
	}

	.spTitleWrap img.spTitle {
		max-width: 400px;
		opacity: 0;
		position: absolute;
		top: 0;
		left: 0;
		visibility: hidden;
		transition: opacity 0.5s ease, visibility 0s 0.5s;
		/* フェードのアニメーション */
	}

	.spTitleWrap img.spTitle.active {
		opacity: 1;
		visibility: visible;
		transition: opacity 0.5s ease;
		/* visibilityの遅延をなくす */
	}


	/*disabled content*/
	.lbImageWrap {
		width: 100px;
		height: 100px;
		bottom: -400px;
		right: 20px;
	}

	.lbImageWrap .lbImage {
		width: 100px;
		height: 100px;
	}

	.sdTextWrap {
		bottom: -400px;
	}


}

@media screen and (max-width: 768px) {
	.sdTextWrap {
		bottom: -300px;
		right: 0;
	}

	#products>div {
		/* height: 800px; */
	}
}

@media screen and (max-width: 410px) {

	.spTitleWrap img.spTitle,
	#products .image-wrapper,
	#products .image-section {
		max-width: 300px;
	}

	#products .image-section {
		/* height: 525px; */
		max-width: unset;
	}

	.spTitleWrap {}

	.spCircleWrap {
		width: 57px;
		height: 57px;
		top: -110px;
	}

	.spCircleWrap img.spCircle {
		height: 57px;
	}


}

/* ================================
   #company
================================ */
#company {
	padding: 0 15px 100px 15px;
	margin: auto;
	position: relative;
	z-index: 3;
	background-color: #fff;
}

.company-in {
	max-width: 1300px;
	margin: auto;
}

#company>div {
	padding-top: 100px;
}

#company .sub {
	font-size: 16px;
	font-family: "Shippori Mincho", serif;
}

#company .txt {
	font-family: "Shippori Mincho", serif;
	font-size: 18px;
}

#company .div1 p {
	color: #5b5b5b;
	font-size: 20px;
	line-height: 200%;
	margin-bottom: 25px;
}

#company .btn {
	border-bottom: 1px solid #1d1d1d;
	display: block;
	max-width: 122px;
	border-radius: 0 !important;
	padding: 0 37px 0 0 !important;
	margin-top: 10px;
}

#company .btn-in {
	color: #1d1d1d;
	font-family: "Shippori Mincho", serif;
	font-weight: 600;
	font-size: 16px;
	position: relative;
	white-space: nowrap;
}

#company .btn-in::after {
	position: absolute;
	content: '';
	width: 27px;
	height: 8px;
	background-image: url(../images/top/pickup-arrow.svg);
	background-repeat: no-repeat;
	background-size: contain;
	right: -37px;
	top: 11px;
	background-position: right;
}

#company .div1 {
	position: relative;
}

.panels .panel .title {
	font-size: 25px;
	font-weight: bold;
	text-align: center;
	font-family: "Shippori Mincho", serif;
	margin-top: 10px;
}

.panels img {
	width: 100%;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.38);
}

.panels .panel .nav {
	border-bottom: 1px solid #1d1d1d;
	max-width: 122px;
	margin: auto;
	font-size: 16px;
	position: relative;
	justify-content: center;
}

.panels .panel .nav p {
	color: #1d1d1d;
	font-family: "Shippori Mincho", serif;
	margin-bottom: 0;
}

.panels .panel .nav p::before {
	content: '';
	position: absolute;
	width: 6px;
	height: 6px;
	background-image: url(../images/top/hishigata-black.png);
	background-repeat: no-repeat;
	background-size: contain;
	left: 10px;
	top: 50%;
	transform: translateY(-50%);
}

.panels .panel.panel-1 .title,
.panels .panel.panel-1 .nav a {
	color: #1d1d1d;
}

#company .panels .panel.panel-1 .title,
#company .panels .panel.panel-1 .nav a {
	color: #1d1d1d;
}

.panels .panel.panel-2 .title,
.panels .panel.panel-2 .nav a {
	color: #1d1d1d;
}

.panel-2 {
	margin-top: 20px;
}

@media screen and (min-width:992px) {

	#company .panels {
		display: flex;
		justify-content: space-between;
	}

	#company .panel {
		width: calc(50% - 7.5px);
	}

	#company .div1 {
		width: 45%;
	}

	#company .div2 {
		width: 45%;
	}

	#company .separate {
		justify-content: space-between;
	}

	.panel-2 {
		margin-top: 0px;
	}
}

@media screen and (max-width:1299px) {
	#company .separate {
		flex-wrap: wrap;
	}
}

@media screen and (max-width:1299px) {
	#company>div {
		padding-top: 60px;
	}

	#company .div1,
	#company .div2 {
		width: 100%;
	}

	#company .div1 {
		margin-bottom: 60px;
	}

	#company .panels {
		justify-content: space-around;
		column-gap: 20px;
	}

	#company .div1 .content {
		position: relative;
		top: 0;
		right: auto;
		width: 100%;
	}

	#company .btnWrap {
		text-align: center;
	}

	.top-company-btm {
		display: flex;
		justify-content: space-between;
	}

	.top-company-btm .nav {
		margin: auto 0 auto auto !important;
		width: 122px;
	}

	#company .btnWrap {}
}