/* =============================================================
法人のお客様へ　.corporate-customers
============================================================= */
/* 共通
-------------------------------------------*/
/* リスト
----------------------------*/
/* h2 */
.corporate-customers h2{
	margin-bottom:1.5rem;
	border-bottom:none;
	border-top:#ceacaa solid 5px;
	background:var(--color-primary-a5);
	padding:1.2rem 0;
}


/* 大口注文承ります
-------------------------------------------*/
.corporate-customers .first h2{
	border-bottom:none;
	border-top:none;
	background:transparent;
}
.corporate-customers .first .wrapper{
	display:flex;
	flex-flow:wrap;
	gap:10px;
	justify-content: center;
}
.corporate-customers .first .wrapper > *{
	width:45%;
}
.corporate-customers .first a{
	display:block;
	width:35%;
	margin:2rem auto;
	background-image: linear-gradient(147deg, #f5dcc0, #cf5952);
	border-radius:20px;
	padding:.8rem;
	text-align:center;
	color:#fff;
	font-weight:600;
	box-shadow:3px 3px 5px 3px #eee;
}
.corporate-customers .first a i{
	transition: transform 0.3s ease;
}
.corporate-customers .first a:hover i{
	transform:translateX(20px);
}


/* オススメの利用シーン
-------------------------------------------*/
/* 丸 */
.corporate-customers .scene ul{
	display:flex;
	flex-direction:row;
	gap:1rem;
	margin:2rem auto;
	align-items: center;
	justify-content: space-around;
}
.corporate-customers .scene ul li{
	border:#8a5858 solid 3px;
	border-radius:100%;
	background:#fff;
	width:calc(90% / 6);
	display: flex;
	justify-content: center;
	align-items: center;
}
.corporate-customers .scene ul li:before{
	display: block;
	content: '';
	padding-top: 100%;
}
.corporate-customers .scene ul li p{
	color:#6d2e2e;
	font-family:serif;
	font-weight:600;
	text-align: center;
}
/* img */
.corporate-customers .scene img{
	margin:0 auto;
}
/* スライダー */
.corporate-customers .scene .flex-viewport {
	width:80%;
	margin:0 auto;
}
.corporate-customers .scene ul.slides {
	display: inline-block; 
}

/* よくある質問
-------------------------------------------*/
/*summaryの矢印を消す*/
.corporate-customers .question summary{
	display:block;
}
.corporate-customers .question summary::-webkit-details-marker {
	/* Safariで表示されるデフォルトの三角形アイコンを消します */
	display: none;
}
/*格納式見出し（オレンジ）*/
.corporate-customers .question summary p{
	font-size:1.1rem;
	text-align:left;
	font-weight:bold;
	background-color:#fff;
	border-bottom:#aaa solid 1.5px;
	padding:0.8rem;
	padding-left:1rem;
	border-radius:0px;
	display:flex;
	flex-direction:row;
	justify-content:space-between;
	align-items:center;
}
/*見出し後の＋アイコン*/
.corporate-customers .plus{
	display:block;
	font-size:25px;
	font-weight:1000;
	width:25px;
	color:#8a5858;
	position:relative;
	flex-shrink:0;
	transform-origin: center center;
	transition: transform 0.4s;
}
/* details */
.corporate-customers .question details {
	margin:.5rem 0;
}
.corporate-customers .question details p.answer{
	margin:1rem auto;
	width:90%;
}
/* アコーディオンが開いた時のスタイル */
.corporate-customers details[open] .plus {
	transform: rotate(90deg);
	/*color:#fff;*/
}
/* ホーバー時
----------------------------*/
/* デザインとカーソルを変更 */
.corporate-customers .question summary p:hover {
	cursor:pointer;
	/*background-color: #efefef;*/
}
/* オープン時
----------------------------*/
/* アニメーションを設定 */
.corporate-customers .question details[open] .details-content {
	animation: fadeIn 0.5s ease;
}
@keyframes fadeIn {
	0% {
		opacity: 0; /* 透明 */
		transform: translateY(-10px); /* 上から表示 */
	}
	100% {
		opacity: 1;
		transform: none;
	}
}


/* 数量・納期について
-------------------------------------------*/
.corporate-customers .quantity ul{
	display:grid;
	grid-template-columns:repeat(4, 1fr);
	gap:1rem;
	margin:2rem 0;
}
.corporate-customers .quantity ul li{
	box-shadow:3px 3px 5px 3px #eee;
	padding:1rem;
	text-align:center;
}

/* バナーボタン
-------------------------------------------*/
.corporate-customers a.cta  {
	margin:0 auto;
	width:80%;
	display:block;
}


/*600px以下*/
@media screen and (max-width: 768px){
	.corporate-customers .scene ul{
		gap:.5rem;
	}
}

/*480px以下*/
@media screen and (max-width: 480px){
	.corporate-customers .first .wrapper > *{
		width:100%;
	}
	.corporate-customers .scene ul{
		width:85%;
	}
	.corporate-customers .scene ul li{
		width:calc(90% / 3);
	}
	/* 数量・納期について
	-------------------------------------------*/
	.corporate-customers .quantity ul{
		grid-template-columns:repeat(2, 1fr);
	}
}