@charset "UTF-8";
/* CSS Document */

#taser {
	background-image: url(../../images/case/caseTaser.jpg);
}



/*===============================================
●画面の横幅が730px以上(PCのみ)
===============================================*/
@media screen and (min-width: 730px) {

	#caseLeadTitle {
		display: -webkit-flex;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	#caseLeadTitle li:nth-child(1) {
		background-color: #D3D3D3;
		height: 2px;
		width: 35%;
		display: block;
	}

	#caseLeadTitle li:nth-child(2) {
		margin: 0 1%;
	}

	#caseLeadTitle li:nth-child(3) {
		background-color: #D3D3D3;
		height: 2px;
		width: 35%;
		display: block;
	}

	/* ご相談事例の大枠 */
	#caseBoxWrap {
		max-width: 1020px;
        box-sizing: border-box;
        margin: 0 auto;
	}

	.caseBox + .caseBox {
		margin-top: 120px;
	}

	.caseHeader {
		position: relative;
		background-color: #2F4E7A;
		padding: 8px 0;
	}
	.caseHeader .number {
		position: absolute;
		top: 50%;
		left: 0;
		transform: translate(0, -50%);
		display: flex;
		align-items: baseline;
		justify-content: center;
		gap: 8px;
		width: 146px;
		color: #D5D5D5;
		font-size: 14px;
		font-weight: 400;
		border-right: 1px solid #FFFFFF;
	}
	.caseHeader .number .accent {
		display: inline-block;
		font-size: 2em;
		font-family: 'Lora', serif;
		font-weight: 400;
		line-height: 1;
	}
	.caseHeader .category {
		flex: 1;
		color: #FFFFFF;
		font-size: 24px;
		font-weight: 700;
		text-align: center;
		letter-spacing: 0.1em;
	}
	.caseBody {
		background-color: #FFFFFF;
		padding: 40px 6.8% 72px;
	}
	.caseBody .catchphrase {
		color: #2F4E7A;
		font-size: 24px;
		font-weight: 700;
		font-family: "Zen Kaku Gothic Antique", "游ゴシック Medium", YuGothic, "游ゴシック体", "Yu Gothic Medium", "メイリオ", Meiryo, Arial, Helvetica, "MS UI Gothic", "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
		letter-spacing: 0.06em;
		text-align: center;
		line-height: 2;
		padding-bottom: 40px;
		border-bottom: 1px solid #D3D3D3;
	}
	.caseBody .caseItem:first-of-type {
		margin-top: 40px;
	}
	.caseBody .caseItem:nth-of-type(n+2) {
		margin-top: 56px;
	}
	.caseBody .caseItem .caseItemTItle {
		color: #167742;
		font-size: 18px;
		font-weight: 700;
	}
	.caseBody .caseItem .detail {
		margin-top: 8px;
	}
	.caseBody .caseItem .detail * {
		font-size: 16px;
		letter-spacing: 0.06em;
		line-height: 2.25;
	}
	.caseBody .caseItem .detail p + p{
		margin-top: 1em;
	}
	/* リスト */
	.caseBody .caseItem .list {
		margin-left: 1.5em;
	}	
	.caseBody .caseItem .list .listItem {
		list-style: disc;
		font-weight: bold;
	}
	.caseBody .caseItem .list .listItem::marker {
		color: #167742;
	}
	/* リンクボタン */
	a.linkBtn {
		display: block;
		width: 320px;
		height: 60px;
		text-decoration: none;
		margin: 60px auto 0px;
		background-color: #2F4E7A;
		color: #FFF;
		text-align: center;
		line-height: 60px;
		border-radius: 30px;
		border: 2px solid #FFF;
	}

	a:hover.linkBtn {
		opacity: 0.9;
		filter: alpha(opacity=90);
		-ms-filter: "alpha( opacity=90 )";
		color: #FFF;
	}

	a.linkBtn span {
		background-image: url(../../images/common/btIco01.svg);
		background-repeat: no-repeat;
		background-position: 260px center;
		background-size: 30px 6px;
		display: block;
		padding-right: 30px;
	}

	a:hover.linkBtn span {
		animation-name: anime02;
		animation-duration: 0.5s;
		background-position: 270px center;
		animation-fill-mode: forwards;
	}

	@keyframes anime02 {
		from {
			background-position: 260px center;
		}
		to {
			background-position: 270px center;
		}
	}
}

/*===============================================
●画面の横幅が729px以下(スマホ)
===============================================*/
@media print, screen and (max-width: 729px) {

	#taser {
		background-position: 25% center;
	}

	#caseLeadTitle {
		display: -webkit-flex;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	#caseLeadTitle li:nth-child(1) {
		background-color: #D3D3D3;
		height: 2px;
		width: 30%;
		display: block;
	}

	#caseLeadTitle li:nth-child(2) {
		margin: 0 1%;
	}

	#caseLeadTitle li:nth-child(3) {
		background-color: #D3D3D3;
		height: 2px;
		width: 30%;
		display: block;
	}

	/* ご相談事例の大枠 */
	#caseBoxWrap {
        box-sizing: border-box;
        margin: 0 3%;
	}

	.caseBox + .caseBox {
		margin-top: 80px;
	}

	.caseHeader {
		position: relative;
		background-color: #2F4E7A;
		padding: 8px 0;
	}
	.caseHeader .number {
		position: absolute;
		top: 50%;
		left: 0;
		transform: translate(0, -50%);
		display: flex;
		align-items: baseline;
		justify-content: center;
		gap: 8px;
		width: 88px;
		color: #D5D5D5;
		font-size: 10px;
		font-weight: 400;
		border-right: 1px solid #FFFFFF;
	}
	.caseHeader .number .accent {
		display: inline-block;
		font-size: 2em;
		font-family: 'Lora', serif;
		font-weight: 400;
		line-height: 1;
	}
	.caseHeader .category {
		flex: 1;
		color: #FFFFFF;
		font-size: 24px;
		font-weight: 700;
		text-align: center;
		letter-spacing: 0.1em;
	}
	.caseBody {
		background-color: #FFFFFF;
		padding: 40px 5%;
	}
	.caseBody .catchphrase {
		color: #2F4E7A;
		font-size: 20px;
		font-weight: 700;
		font-family: "Zen Kaku Gothic Antique", "游ゴシック Medium", YuGothic, "游ゴシック体", "Yu Gothic Medium", "メイリオ", Meiryo, Arial, Helvetica, "MS UI Gothic", "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
		letter-spacing: 0.06em;
		text-align: center;
		line-height: 2;
		padding-bottom: 40px;
		border-bottom: 1px solid #D3D3D3;
	}
	.caseBody .caseItem:first-of-type {
		margin-top: 24px;
	}
	.caseBody .caseItem:nth-of-type(n+2) {
		margin-top: 32px;
	}
	.caseBody .caseItem .caseItemTItle {
		color: #167742;
		font-size: 18px;
		font-weight: 700;
	}
	.caseBody .caseItem .detail {
		margin-top: 8px;
	}
	.caseBody .caseItem .detail * {
		font-size: 16px;
		letter-spacing: 0.06em;
		line-height: 2.25;
	}
	/* リスト */
	.caseBody .caseItem .list {
		margin-left: 1.5em;
	}	
	.caseBody .caseItem .list .listItem {
		list-style: disc;
	}
	.caseBody .caseItem .list .listItem::marker {
		color: #167742;
	}
	/* リンクボタン */
	a.linkBtn {
		display: block;
		width: 300px;
		height: 60px;
		text-decoration: none;
		margin: 30px auto 0;
		background-color: #2F4E7A;
		color: #FFF;
		text-align: center;
		line-height: 60px;
		border-radius: 30px;
		border: 2px solid #FFF;
	}

	a:hover.linkBtn {
		color: #FFF;
	}

	a.linkBtn span {
		background-image: url(../../images/common/btIco01.svg);
		background-repeat: no-repeat;
		background-position: 240px center;
		background-size: 30px 6px;
		display: block;
		padding-right: 30px;
	}
}