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


/* ▼▼▼▼▼▼▼▼▼▼ スマートフォン ▼▼▼▼▼▼▼▼▼▼ */

/* -------------------------------------------------- SP toppage */

.aboutus .k-visual {
	width: 100%;
	max-width: 1000px;
	margin: auto;
}
.aboutus h2 {
	font-size: clamp(20px, 4vw, 30px);
	text-align: center;
	font-weight: 900;
	color: #333;
}

.aboutus .copy {
	width: 90%;
	max-width: 600px;
	margin: auto;
}
.aboutus .copy p {margin-bottom: 1rem;}


.aboutus-menu {
	width: 95%;
	max-width: 900px;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	margin: auto auto 5rem;
}
.aboutus-menu li {
	width: 50%;
    padding: 0;
	height: 4rem;
	text-align: center;
	padding: 3px;
	position: relative;
}
.aboutus-menu li a {
	display: flex;
	align-items: center;
	justify-content: center;
    color: #CFD1DE;
	background: #3E434B;
	border-radius: 5px;
	line-height: 1.3;
	height: 100%;
	width: 100%;
	padding-left: 10px;
}
.aboutus-menu li a::before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url(https://flakes.ocnk.net/data/flakes/image/common/icon-link-d1.svg);
    background-size: contain;
    margin-right: .5rem;
    background-repeat: no-repeat;
    flex-shrink: 0;
    transform: rotate(90deg);
	position: absolute;
	top: 35%;
	left: 10px;
}


.aboutus section {
	width: 90%;
	max-width: 1000px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin: auto auto 5rem;
}

.aboutus section img {
	border-radius: 10px;
	margin: auto auto 1rem;
}

.aboutus section h3 {
	width: 100%;
	font-size: clamp(20px, 4vw, 30px);
	text-align: center;
	margin-bottom: .5rem;
	color: #333;
}
.aboutus section .read {} 






.policy ul {
	display: flex;
	width: 100%;
	max-width: 600px;
}
.policy li {
	width: 50%;
	display: flex;
	align-items: center;
	height: 4rem;
	padding: 5px 2px;
	position: relative;
}
.policy li a {
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 5px;
	line-height: 1.3;
	height: 100%;
	width: 100%;
	padding-left: 10px;
	border: 1px solid #999;
	letter-spacing: -1px;
}
.policy li a::before {
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: '\f105';
	font-size: .8rem;
	margin-right: 5px;
    right: 1rem;
    color: #666;
    position: absolute;
    left: .8rem;
    top: 37%;
}

.payment ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
}
.payment ul li {
	width: 50%;
	padding: 5px;
}



.campaign ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
}
.campaign ul li {
	margin-bottom: 1.5rem;
	display: flex;
	align-items: flex-start;
	flex-wrap: wrap;
	margin-bottom: 2rem;
}
.campaign ul li img {
	width: 30%;
	height: auto;
	padding: 5px 10px 5px 0;
}
.campaign ul li .campaign-li-inner {
	width: 70%;
}
.campaign ul li h4 {
	font-size: clamp(16px, 3vw, 20px);
}
.campaign ul li p {
	font-size: clamp(13px, 2vw, 14px);
	margin-bottom: .5rem;
}
.campaign ul li a {
	width: 70%;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 5px;
	line-height: 1.3;
	height: 3rem;
	padding-left: 10px;
	border: 1px solid #999;
	margin: auto;
	position: relative;
}
.campaign ul li a::before {
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: '\f105';
	font-size: .8rem;
	margin-right: 5px;
    right: 1rem;
    color: #666;
    position: absolute;
    left: .8rem;
    top: 32%;
}





/* ▼▼▼▼▼▼▼▼▼▼ タブレット ▼▼▼▼▼▼▼▼▼▼ */
@media screen and (min-width: 600px) {
	
	.aboutus .copy {
		text-align: center;
	}
	.aboutus-menu li {
		width: 25%;
	}
	.policy ul {
		justify-content: space-between;
	}
	.policy li {
		width: 45%;
	}
	
	.payment ul {justify-content: center;}
	.payment ul li {
		width: 33%;
		padding: 5px;		
	}
	
	
	.campaign ul {}
	.campaign ul li {
		width: 33%;
		display: flex;
		flex-direction: column;
		padding: 0 2rem;
	}
	.campaign ul li .campaign-li-inner {
		width: 100%;
	}
	.campaign ul li h4 {
		text-align: center;
	}
	.campaign ul li a {
		width: 90%;
	}
	

	




/* ▲▲▲▲▲▲▲▲▲▲ タブレット ▲▲▲▲▲▲▲▲▲▲ */
}



/* ▼▼▼▼▼▼▼▼▼▼ PC ▼▼▼▼▼▼▼▼▼▼ */

@media screen and (min-width: 960px){
	
	
	.wrapper.wrapper--column-1 .__inner, .wrapper--product-detail .__inner {max-width: 2000px;}
	
	.k-visual {	}
	
	.k-visual .k-visual-inner {	}

	.k-visual .k-visual-inner img {	}


	.k-visual .k-visual-inner div {	}

	.k-visual .k-visual-inner p {
		line-height: 1.8;
	}
/* ▲▲▲▲▲▲▲▲▲▲ PC ▲▲▲▲▲▲▲▲▲▲ */
}

/* ▲▲▲▲▲▲▲▲▲▲ 調整 ▲▲▲▲▲▲▲▲▲▲ */
@media screen and (min-width: 1300px){
	.fwa .k-visual-inner {right: 25vw;}
	.dido .dido-inner {left: 5%;}
	.porteporta .porteporta-inner {right: 5%;}

/* ▲▲▲▲▲▲▲▲▲▲ 調整 ▲▲▲▲▲▲▲▲▲▲ */
}