/* =================================================================
トップ共通
=================================================================*/
/*.cmn-title {font-size: 32px; font-weight: 400; position: relative; text-align: center; color: #000; margin-bottom: 90px; letter-spacing: 0.2em; display: flex; flex-direction: column;}
.cmn-title .en {font-size: 18px; color: #1CA7C6; letter-spacing: 0; font-family: "EB Garamond", serif; margin-top: 10px;}
.cmn-title:before {content: ""; display: block; width: 1px; height: 60px; background: #000; position: absolute; left: 0; right: 0; top: -70px; margin: auto;}*/

.cmn-title {font-size: 32px; font-weight: 600; position: relative; text-align: center; color: #555555; margin-bottom: 90px; letter-spacing: 0.2em; display: flex; flex-direction: column;}
.cmn-title .en {font-size: 18px; font-weight: 400; color: #1CA7C6; letter-spacing: 0.2em; font-family: 'Times New Roman',sans-serif; margin-top: 10px;}
.cmn-title:before {content: ""; display: block; width: 1px; height: 60px; background: #555555; position: absolute; left: 0; right: 0; top: -70px; margin: auto;}

.top-button {width: 180px; display: flex; justify-content: center; align-items: center; font-size: 16px; color: #969696; letter-spacing: 0; height: 44px; padding: 0 49px; border: 1px solid #969696; position: relative; margin: auto;}
.top-button span {position: relative; z-index: 10;}
.top-button::before {content: ""; position: absolute; top: 0; left: 0; z-index: 1; background: #1CA7C6; width: 100%; height: 100%; transition: transform 0.2s cubic-bezier(0.8, 0, 0.2, 1); transform: scale(0, 1.0); transform-origin: right top;}
.top-button.big {width: 315px;}
.top-button:after {content: ""; display: block; width: 30px; height: 1px; background: #969696; position: absolute; right: -15px; z-index: 10;}

.top-button:hover {color: #fff; border-color: #1CA7C6;}
.top-button:hover::before {transform-origin: left top; transform: scale(1.0, 1.0);}


p {font-size: 16px; line-height: 1.5; font-weight: 400; letter-spacing: 0.2em;}
.inner {width: 100%; max-width: 1200px; margin: auto;}

@media screen and (max-width: 969px) {
	.cmn-title {font-size: 24px; line-height:0.8; margin-bottom: 30px;}
	.cmn-title .en {font-size: 16px;}
	.cmn-title:before {height: 50px; top: -60px;}
	.top-button {width: 155px; height: 45px; padding: 0px; font-size: 14px;}
	.top-button.big {width: 280px;}
	.top-button:after {width: 25px; right: -11px;}

	p {font-size: 15px;}
}



/* =================================================================
FV
=================================================================*/
.fv {}
.fv .swiper-slide {position: relative;}
.fv .text {background: #fff; padding: 20px 10px 20px 20px; display: flex; align-items: center; justify-content: center; position: absolute; left: 50px; bottom: 50px; z-index: 2;}
.fv .text p {font-size: 34px;}
.fv .swiper-pagination {bottom: 20px;}
.fv .swiper-pagination-bullet {height: 12px; width: 12px; background-color: #000; border-radius: 0; opacity: 1; margin: 0 10px !important;}
.fv .swiper-pagination-bullet-active {background-color: #1CA7C6;}
.fv .swiper-button-prev, .swiper-button-next {width: 22px; height: 40px;}
.fv .swiper-button-prev:after, .swiper-button-next:after {content: ""; display: block; width: 22px; height: 40px; background-image: url('https://file001.shop-pro.jp/PA01508/005/assets/images/top/fv-arrow_left.png'); background-size: cover;}
.fv .swiper-button-next:after {background-image: url('https://file001.shop-pro.jp/PA01508/005/assets/images/top/fv-arrow_right.png');}
.fv .swiper-button-next:after,
.fv .swiper-rtl .swiper-button-prev:after {content: "";}

@media screen and (max-width: 969px) {
	.fv .text {padding: 20px 12px 20px 20px; left: 0; bottom: 68px;}
	.fv .text p {font-size: 22px;}
	.fv .swiper-pagination-bullet {height: 10px; width: 10px; margin: 0 8px !important;}
	.fv .swiper-button-prev, .swiper-button-next {display: none;}
}

/* =================================================================
intro
=================================================================*/
.intro {background-image: url('https://file001.shop-pro.jp/PA01508/005/assets/images/top/cmn_bg.jpg'); background-size: 1400px;}
.intro .inner {display: flex; justify-content: center; align-items: flex-start; padding: 80px 0; max-width: 100%;}
.intro img {width: 700px;}
.intro .text {padding: 73px 0 0 64px;}
.intro p {font-size: 20px; line-height: 1.9; }
.intro p + p {margin-top: 15px;}

@media screen and (max-width: 969px) {
	.intro .inner {flex-direction: column; padding: 50px 30px 61px;}
	.intro img {width: 100%;}
	.intro .text {padding: 20px 0px 0;}
	.intro p {font-size: 14px;}
	.intro p + p {margin-top: 12px;}
}

/* =================================================================
pickup
=================================================================*/
.pickup {padding: 120px 0;}
.pickup .inner {
	display: flex;
	justify-content:left;
	--cols:3;
	--gap:3.75%;
	gap:50px var(--gap);
	flex-wrap:wrap;
}
.pickup .box{
	width:calc((100% / var(--cols)) - (var(--gap) * (var(--cols) - 1)) / var(--cols));
}
.pickup img {width: 370px; height: auto; border-radius: 10px;}
.pickup .text {max-width: 370px;}
.pickup h3 {font-size: 24px; font-weight: 600; letter-spacing: 0.1em; text-align: center; margin-top: 24px;}
.pickup p {font-size: 16px; margin-top: 18px; line-height: 1.875; min-height: 3em;}
.pickup .top-button {margin-top: 23px;}

@media screen and (max-width: 969px) {
	.pickup {padding: 103px 0 70px;}
	.pickup .inner {
		--cols:2;
		padding-left:30px;
		padding-right:30px;
	}
	.pickup img {width: 100%;}
	.pickup h3 {font-size: 20px; text-align: left; margin-top: 10px;}
	.pickup p {font-size: 14px; margin-top: 10px;}
}
@media screen and (max-width: 768px) {
	.pickup .inner {
		--cols:1;
		gap:40px;
	}
}





/* =================================================================
取り扱い用紙
=================================================================*/
.paper-list {padding-bottom: 100px;}
.paper-list .title-wrap {margin-bottom: 30px; background-image: url('https://file001.shop-pro.jp/PA01508/005/assets/images/top/paper-list-title_bg.jpg'); background-size: cover; height: 300px; padding-top: 133px;}
.paper-list .list {display: flex; justify-content: space-between;}
.paper-list .item {width: 180px;}
.paper-list h3 {font-size: 20px; font-weight: 600; margin-top: 15px; line-height: 1.2em;}
.paper-list p {font-size: 15px; margin-top: 11px; text-align: justify; letter-spacing: 0.1em; line-height: 1.7em;}
.paper-list .top-button {margin-top: 49px;}

@media screen and (max-width: 969px) {
	.paper-list {padding-bottom: 56px;}
	.paper-list .title-wrap {height: 193px; padding-top: 94px;}
	.paper-list .list {flex-wrap: wrap; padding: 0 20px;}
	.paper-list .item {width: calc((100% - 20px)/2); margin-right: 20px;}
	.paper-list .item:nth-child(2n) {margin-right: 0;}
	.paper-list .item:nth-child(n + 3) {margin-top: 20px;}
	.paper-list h3 {font-size: 18px; margin-top: 9px;}
	.paper-list p {font-size: 14px; margin-top: 7px;}
}

/* =================================================================
箔の種類
=================================================================*/
.foil-list {padding-bottom: 100px;}
.foil-list .title-wrap {margin-bottom: 30px; background-image: url('https://file001.shop-pro.jp/PA01508/005/assets/images/top/foil-list-title_bg.jpg'); background-size: cover; height: 300px; padding-top: 133px;}
.foil-list .list {display: flex; justify-content: space-between;}
.foil-list .item {width: 180px;}
.foil-list h3 {font-size: 20px; font-weight: 600; margin-top: 15px; line-height: 1.2em;}
.foil-list p {font-size: 15px; margin-top: 11px; text-align: justify; letter-spacing: 0.1em; line-height: 1.7em;}
.foil-list .top-button {margin-top: 49px;}

@media screen and (max-width: 969px) {
	.foil-list {padding-bottom: 71px;}
	.foil-list .title-wrap {height: 193px; padding-top: 94px;}
	.foil-list .list {flex-wrap: wrap; padding: 0 20px;}
	.foil-list .item {width: calc((100% - 20px)/2); margin-right: 20px;}
	.foil-list .item:nth-child(2n) {margin-right: 0;}
	.foil-list .item:nth-child(n + 3) {margin-top: 20px;}
	.foil-list h3 {font-size: 18px; margin-top: 9px;}
	.foil-list p {font-size: 14px; margin-top: 7px;}
}

/* =================================================================
見本・制作事例
=================================================================*/
.sample {background-image: url('https://file001.shop-pro.jp/PA01508/005/assets/images/top/cmn_bg.jpg'); background-size: 1400px; padding-top: 120px; padding-bottom: 100px;}
.sample .cmn-title {margin-bottom: 30px;}
/*
.sample .list {display: flex; justify-content: space-between;}
.sample .box{width:270px}
*/
.sample img {width: 100%; height: auto; border-radius: 10px;}
.sample h3 {max-width: 100%; font-size: 18px; letter-spacing: 0.1em; text-align: left; margin-top: 24px; line-height: 1.5;}
.sample .top-button {margin-top: 46px;}


@media screen and (max-width: 969px) {
	.sample {padding-bottom: 71px;}
	/*
	.sample .list {flex-wrap:wrap; padding: 0 30px; gap:30px 15px;}
	*/
	.sample h3 {font-size: 16px; margin-top: 16px;}
	.sample .box{width:calc(50% - 7.5px);}
	.sample .box + .box {margin-top: 0; }
}

/* =================================================================
サービス
=================================================================*/
.service {padding-top: 120px;}
.service .inner {display: flex; justify-content: space-between;}
/*
.service .box {width: 270px;}
.service img {border-radius: 10px;}
*/
.service h3 {margin-top: 27px; font-size: 20px; font-weight: 600; text-align: center;}
.service p {margin-top: 10px; font-size: 15px; min-height: 90px; text-align: justify; letter-spacing: 0.1em; line-height: 1.7em;}
.service .top-button {margin-top: 25px;}

@media screen and (max-width: 969px) {
	.service {padding-top: 104px;}
	.service .inner {flex-wrap:wrap; gap:30px 15px; padding: 0 30px;}
	/*
	.service .box {width:calc(50% - 7.5px);}
	.service .box + .box {margin-top: 0;}
	*/
	.service h3 {font-size: 18px; margin-top: 15px;}
	.service p {margin-top: 13px; font-size: 14px; min-height: auto;}
}



.sample .list,
.service .inner{
	--cols:4;
	--gap:30px;
	width:86vw;
	max-width:1200px;
	margin-left:auto;
	margin-right:auto;
	display:flex;
	justify-content:left;
	flex-wrap:wrap;
	gap:50px var(--gap);
}
.sample .box,
.service .box{
	width:calc((100% / var(--cols)) - (var(--gap) * (var(--cols) - 1)) / var(--cols));
}
.sample .box img,
.service .box img{
	width:100%;
	max-width:100%;
	height:auto;
	display:block;
}
@media (max-width: 1200px){
	.sample .list,
	.service .inner{
		--cols:3;
	}
}
@media (max-width: 900px){
	.sample .list,
	.service .inner{
		--cols:2;
	}
}
@media (max-width: 768px){
	.sample .list,
	.service .inner{
		--cols:2;
		--gap:15px;
		padding:0;
		gap:30px var(--gap);
	}
}

/*ホバー自画像拡大*/
.zoom-box{
    border-radius: 10px;
    overflow: hidden;
}
.zoom-box a img{
    transition: all 0.3s;
}
.zoom-box a:hover img{
    transform: scale(1.1);
}

@media (max-width:768px){
  #swiper01 .swiper-button-next,
  #swiper01 .swiper-button-prev{
    display:none !important;
  }
}