@charset "utf-8";

/*-----------------------------------------
共通
-------------------------------------------*/
.common-section{
	max-width:1200px;
	margin: 0px auto;
}
@media screen and (max-width:768px){
.common-section{
	max-width:95%;
	}
}

.bg-common{
	padding:10em 0 ;
}
@media screen and (max-width:768px){
.bg-common{
	padding:5em 0 ;
	overflow:hidden;
	}
}

.lbl-title{
	font-size:2.7rem;
	font-weight:var(--w-weight);
	letter-spacing:var(--spacing);
	text-align:center;
	padding:0px 0 30px;
	margin: 0 auto;
	max-width:750px;
	line-height:1.2;
}
@media screen and (max-width:768px){
.lbl-title{
	font-size:1.6rem;
	max-width:95%;
	}
}

.text-common{
	font-size:1.1rem;
	letter-spacing:var(--spacing);
	text-align:center;
}
/*-----------------------------------------
メインビジュアル
-------------------------------------------*/
.mv_bg{
	padding:10em 2em ;
	/*
	background:url(../images/mv/bg-left.png) no-repeat 0% 0%  ,
	url(../images/mv/bg-right.png) no-repeat 100% 100% 	#FEF3F8;
	background-size:40% , 30%;
	*/
	background:url(../images/mv/bg.png) no-repeat 0% 50% ;
	background-size:cover;
	
}


@media screen and (max-width:768px){
.mv_bg{
	padding:5em 2em ;
/*	background:url(../images/mv/bg-left.png) no-repeat 0% 0%  ,
	url(../images/mv/bg-right.png) no-repeat 100% 100% 	#FEF3F8;
	background-size:90% , 80%;
	*/
	background:url(../images/mv/bg.png) no-repeat 10% 100% ;
	background-size:cover;
	}
}

.mv_main{
	max-width:90%;
	margin: 0 auto;
	display:flex;
	gap:0 40px;
	justify-content:space-between;
	align-items:center;
}
@media screen and (max-width:768px){
.mv_main{
	flex-wrap:wrap;
	gap:45px 0px;
	max-width:95%;
	}
}

.mv_main .items01{
	flex-basis: 60%;
}
@media screen and (max-width:768px){
.mv_main .items01{
	flex-basis: 100%;
	}
}
.mv_main .items02{
	flex-basis: 35%;
}
@media screen and (max-width:768px){
.mv_main .items02{
	flex-basis: 100%;
	}
}
.mv_main h1{
	margin:0 0 30px;
}

.mv_main dl{
	margin:20px 0;
}

.mv_main dt{
	margin:20px 0 15px;
}

.mv_main ul{
	display:flex;
	gap:0 0px;
}
.mv_main ul li{
	margin:0 -20px 0 0;
	position:relative;
  transition: 1s;
  opacity: 0;
  transform: translateY(20px);
}
@media screen and (max-width:768px){
.mv_main ul li img{
	max-width:85%;
	}

}
@keyframes catch_anime {
  0% {
    transform: translateY(20px);
    transform: rotate(0deg);
  }
   100% {
    opacity: 1;
    transform: translateY(0);
    transform: rotate(-7deg);
  }
}


.mv_main ul li:nth-child(1){
	z-index:3;
	animation: catch_anime .8s forwards .5s;
}
.mv_main ul li:nth-child(2){
	z-index:2;
	animation: catch_anime 1s forwards .8s;
}
.mv_main ul li:nth-child(3){
	z-index:1;
	animation: catch_anime 1.1s forwards 1.1s;
}
.mv_main ul li:nth-child(4){
	z-index:0;
	animation: catch_anime 1.2s forwards 1.3s;
}

.img-wrap {
  overflow: hidden;
  position: relative;
}

.img-wrap::before {
  animation: img-wrap 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  background: #fff;
  content: '';
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}

@keyframes img-wrap {
  100% {
    transform: translateX(100%);
  }
}
/*----------------------------------------

カード.jpとは

-----------------------------------------*/
.card_main{
	/*	background:url(../images/card/bg01.png) no-repeat -7% 10%  ,
	background:url(../images/card/bg02.png) no-repeat 105% 85% ;*/
	background:url(../images/card/bg02.png) no-repeat 105% 85% ;
	position:relative;
}
@media screen and (max-width:768px){
.card_main{
	background:url(../images/card/bg02.png) no-repeat 105% 80% ;
	background-size:40%;
	}
}

.rotate{
	position:absolute;
	z-index:-1;
	animation: rotateAnimation 20s linear infinite;
}
@media screen and (max-width:768px){
.rotate img{
	max-width:150px;
	}
}
.rotate_a{
	left:-5%;
	top:150px;
	}
@media screen and (max-width:768px){
.rotate_a{
	left:60%;
	top:20px;
	}
}
@keyframes rotateAnimation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.card_section{
	display:grid;
	grid-template-columns:50% 1fr;
	gap:60px 60px;
	justify-content:space-between;
	align-items:center;
	padding:0 2em;
}
@media screen and (max-width:768px){
.card_section{
	grid-template-columns:1fr;
	gap:20px 0px;
	max-width:95%;
	}
}

.card_section p{
	font-size:1.3rem;
}
.card_section p {
  position: relative;
  padding: 0 0px;

}

.card_section p:before {
  position: absolute;
  top: calc(50% - 1px);
  left: 0;
  width: 100%;
  height: 1px;
  content: '';
  background: #D4145A;
}

.card_section p span {
  position: relative;
  padding: 0 1em 0 0;
  background: #fff;
}
.card-item01 dl{
	line-height:var(--baselineheight);
	letter-spacing:var(--spacing);
}
.card-item01 dt{
	font-weight:var(--w-weight);
	font-size:2.3rem;
	margin:25px 0 ;
}
@media screen and (max-width:768px){
.card-item01 dt{
	font-weight:var(--w-weight);
	font-size:1.3rem;
	margin:25px 0 ;
}

}
.card-item01 dd{
	font-size:1rem;
}
.card-item01 dd span{
	display:block;
	margin:20px 0;
}
.card-item01 ul li{
	font-size:1rem;
	margin:15px ;
	position:relative;
}
@media screen and (max-width:768px){
.card-item01 ul li{
	line-height:1.3;
	}

}

.card-item01 ul li:before{
	content:"●";
	color: #D4145A;
	padding:0 0px 0px 0px;
	position:absolute;	
	left:-15px;
	top:-3px;
}
.card-item02{
	text-align:center;
}
@media screen and (max-width:768px){
.card-item02{
	margin:0 0 40px;
}
.card-item02 img{
	max-width:60%;
	}
}
.card-item02 img{
	max-width:80%;
}

.gizagiza {
    position: relative;
    width: 100%;
    height: 40px;
    background: transparent;
    filter: drop-shadow(0 0 0 rgba(0, 0, 0, 1));
}

.gizagiza::before {
    height: 40px;
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
}

.gizagiza::before {
    top: 0px;
    background: linear-gradient(45deg, #FFF5F9 20px, transparent 0), linear-gradient(315deg, #FFF5F9 20px, transparent 0);
    background-size: 40px 40px;
}
/*-----------------------------------------
トレーディングカード.jpの活用例
-------------------------------------------*/
.used_section{
	background:#FFF5F9;
	
}
.case{
	max-width:700px;
	margin: 20px auto;
	padding:2em 2.5em;
	box-sizing: border-box;
	display:grid;
	grid-template-columns:170px 2fr;
	gap:0 35px;
	align-items:end;
}
@media screen and (max-width:768px){
.case{
	max-width:90%;
	margin: 20px auto;
	padding:0em 0em 1em;
	grid-template-columns:1fr;
	gap:35px 0px;
	align-items:end;
	}	
}
@media screen and (max-width:768px){
.case figure img{
	max-width:170px;
	}
.case figure{
	text-align:center;
	margin: 0 0 -20px;
	}
}
.case-radius{
	padding:10px 25px;
	background:#D4145A;
	color:#fff;
	border-radius:50px;
	font-size:1.1rem;
	letter-spacing:var(--spacing);
	max-width:200px;
	margin: 0px 0 20px;
	text-align:center;
	position:relative;
}
@media screen and (max-width:768px){
.case-radius{
	margin: 0px auto 20px;
	}
}

.case-radius:after{
  content: "";
  position: absolute;
  right: 0;
  bottom: -10px;
  left: 0;
  width: 0px;
  height: 0px;
  margin: auto;
  border-style: solid;
  border-color: #D4145A transparent transparent transparent;
  border-width: 10px 10px 0 10px;
}

.used-text{
	line-height:var(--baselineheight);
	text-align:left;
}
@media screen and (max-width:768px){
.used-text{
	margin:0 0 20px;
	}

}

/*-----------------------------------------
トレーディングカードの注文方法
-------------------------------------------*/
.tcard_section{
	background:#FFF;
	background-image: repeating-linear-gradient(to bottom, #FFF5F9, #FFF5F9 1px, transparent 0, transparent 45px), repeating-linear-gradient(to right,#FFF5F9, #FFF5F9 1px, transparent 0, transparent 45px);
}
.data-root{
	background:#fff;
	max-width:780px;
	margin: 0 auto;
	padding:3em 2.5em;
	box-sizing: border-box;
	box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
}
.radius{
	padding:10px 25px;
	border:2px solid #D4145A;
	color:#D4145A;
	border-radius:50px;
	font-size:1rem;
	font-weight:var(--w-middle);
	letter-spacing:var(--spacing);
	text-align:center;
	max-width:200px;
	margin: 0px auto 20px;
}

.tcard-text{
	line-height:var(--baselineheight);
}
.triangle {
	width: 80px;
	aspect-ratio: 1/cos(30deg);
	clip-path: polygon(50% 40%,100% 0,0 0);
	background: #ccc;
	margin:20px auto -20px;
}
.icon01{
	background:url(../images/icon/icon04.png) no-repeat 95% 50% #fff;
	background-size:130px;
}
.icon02{
	background:url(../images/icon/icon02.png) no-repeat 95% 50% #fff;
	background-size:130px;
}
.icon03{
	background:url(../images/icon/icon03.png) no-repeat 95% 50% #fff;
	background-size:130px;
}
.icon04{
	background:url(../images/icon/icon01.png) no-repeat 95% 50% #fff;
	background-size:130px;
}
.icon05{
	background:url(../images/icon/icon05.png) no-repeat 95% 50% #fff;
	background-size:130px;
}
.link-text{
	text-align:center;
	font-size:1rem;
	margin:20px 0 0;
	line-height:1.4;

}
.link-text span{
	display:block;
	margin:20px 0 0;
}
.link-text a{
	color:blue;
}
/*-----------------------------------------
商品案内
-------------------------------------------*/

.product_section{
	background:#FFF5F9;
	background:url(../images/mv/bg-right.png) no-repeat #FFF5F9 100% 100%;
	background-size:50%;
}
@media screen and (max-width:768px){
.product_section{
	background-size:60%;
	}
}

.border-radius {
  width: 75px;
  height: 75px;
  line-height: 15px;
  padding:2em 0;
  background-color: #fff;
  border-radius: 50%;
  color: #D4145A;
  text-align: center;
  border:#D4145A solid 2px;
	font-size:.7rem;
	font-weight:var(--w-middle);
	position:absolute;
	left:45px;
	top:10px;
}

.border-radius:after{
  content: "";
  position: absolute;
  top: 50%;
  left: 100%;
  margin-top: -8px;
  border: 8px solid transparent;
  border-left: 8px solid #D4145A;
}




@media screen and (max-width:768px){
.border-radius {
  width: 70%;
  height: auto;
  line-height: 0;
  padding:1.5em 2em;
  border-radius: 0%;
	font-size:.8rem;
	margin: 0 auto 15px;
  border:#D4145A solid 1px;
	position:relative;
	left:0;
	top:0px;
	}
.border-radius:after{
  content: "";
  position: absolute;
  right: 0;
  bottom: -30px;
  left: 0;
  width: 0px;
  height: 0px;
  margin: auto;
  border-style: solid;
  border-color:#D4145A  transparent  transparent transparent ;
  border-width: 10px 10px 0 10px;
	}
}

.product_div{
	margin:30px auto;
	max-width:600px;


}
.product_div dt{
	text-align:center;
	font-size:1.3rem;
	padding:15px 0;
	background:#fff;
}

.product_div ul{
	padding:30px 0 ;
	text-align:center;
}
@media screen and (max-width:768px){
.product_div ul{
	padding:0px 0 ;
	}
}
.product_div ul li{
	padding:30px 0 ;
	font-size:1rem;
	position:relative;
}

.product_div ul .mai{
	display:inline-block;
	width:60px;
	font-size:1.7rem;
	text-align: right;
}
.product_div ul .en{
	display:inline-block;
	width:120px;
	font-size:1.7rem;
	margin:0 0 0 10px;
	text-align: right;
}
.product_div table{
	margin: 20px auto ;
	text-align:left;
}
.product_div table th{
	font-size:1.4rem;
	padding:0 1em;
	line-height:var(--baselineheight);
}
@media screen and (max-width:768px){
.product_div table th{
	font-size:1rem;
	padding-bottom: 8px;
	}
}

.product_div table td{
	font-size:1.4rem;
	padding:0 1em;
	line-height:var(--baselineheight);
}
@media screen and (max-width:768px){
.product_div table td{
	font-size:1rem;
	padding-bottom: 8px;
	}
}
/*-----------------------------------------
納品
-------------------------------------------*/
.delivery_section{
	background:#fff;
}

.border-on{
	border-bottom:2px solid #ccc;
	padding:0 0 5px;
}
.delivery-text{
	padding:40px 0;
}