@charset "utf-8";

/*-- swiper -------------------------------------------------------------*/


/*#mv .swiper-wapre .swiper-slide-wapre.slide01 img { border-radius: 12px; border: 5px solid #dbe2f3; }
#mv .swiper-wapre .swiper-slide-wapre.slide02 img { border-radius: 12px; border: 5px solid #c8e5f3; }
#mv .swiper-wapre .swiper-slide-wapre.slide03 img { border-radius: 12px; border: 5px solid #f5d5d3; }
#mv .swiper-wapre .swiper-slide-wapre.slide04 img { border-radius: 12px; border: 5px solid #ffefbd; }
#mv .swiper-wapre .swiper-slide-wapre.slide05 img { border-radius: 12px; border: 5px solid #b3d7b4; }*/

@media screen and (max-width: 599px) {
	#mv .swiper-wapre .swiper-slide { opacity: 0.1; margin: 10px auto; }
	#mv .swiper-wapre .swiper-slide-active { opacity: 1.0; /*transform: scale(1.05);*/ transition: 1.0s; z-index: 10; }
	#mv .swiper-wapre.swiper-add .swiper-slide { opacity: 1.0; }
	#mv .swiper-wapre.swiper-add .swiper-slide-prev { opacity: 0.1; }
	#mv .swiper-wapre { overflow:visible; width: 92%; margin: 0 4%; }
	#mv .swiper-slide-wapre { position: relative; }	
	#mv .swiper-pagination { bottom: 20px; }
	#mv .swiper-wapre .swiper-slide-wapre img { border-radius: 6px; }
}
@media screen and (min-width: 600px) {
	#mv .swiper-wapre .swiper-slide { opacity: 0.3; transform: scale(0.95); margin-bottom: 40px; }
	#mv .swiper-wapre .swiper-slide-active { opacity: 1.0; /*transform: scale(1.05);*/ transition: 1.0s; z-index: 10; }
	#mv .swiper-wapre.swiper-add .swiper-slide { opacity: 1.0; }
	#mv .swiper-wapre.swiper-add .swiper-slide-prev { opacity: 0.1; }
	
	#mv .swiper-wapre { overflow:visible;  }
	#mv .swiper-slide-wapre { position: relative; }	
	#mv .swiper-wapre .swiper-slide-wapre img { border-radius: 8px; border: 1px solid #dedede; }
}
@media screen and (min-width: 600px) and (max-width: 960px) {
	#mv .swiper-wapre {  width:90%; margin: 0 auto ; }
}
@media screen and (min-width: 961px) and (max-width: 1024px) {
	#mv .swiper-wapre { width:90%; margin: 0 auto; }
}
@media screen and (min-width: 1025px) and (max-width: 1179px) {
	#mv .swiper-wapre { width:960px; margin: 0 auto; }
}
@media screen and (min-width: 1180px) and (max-width: 1259px) {
	#mv .swiper-wapre { width:1030px; margin: 0 auto; }
}
@media screen and (min-width: 1260px) and (max-width: 1319px) {
	#mv .swiper-wapre { width:1030px; margin: 0 auto; }
}
@media screen and (min-width: 1320px) {
	#mv .swiper-wapre { width:1030px; margin: 0 auto; }
}

.swiper-wapre .swiper-button-prev:after {
    content: 'prev';
    color: rgba(155,155,155,0.9);
    border-radius: 25px;
    font-size: 1rem;
}
.swiper-wapre .swiper-button-next:after {
    content: 'next';
    color: rgba(155,155,155,0.9);
    border-radius: 25px;
    font-size: 1rem;
}

.swiper-wapre .swiper-button-prev,.swiper-wapre .swiper-button-next {
    width: 50px;
	height: 50px;
	border-radius: 25px;
	background: rgba(187,187,187,0.5);
}

@media screen and (max-width: 599px) {
	.swiper-wapre .swiper-button-prev,.swiper-wapre .swiper-button-next { width: 30px; height: 30px; border-radius: 15px; }
	.swiper-wapre .swiper-button-prev:after,.swiper-wapre .swiper-button-next:after { font-size: 0.7rem; }
	
	.swiper-wapre .swiper-button-prev { left: -15px;}
	.swiper-wapre .swiper-button-next { right: -15px;}
}
@media screen and (min-width: 600px) and (max-width: 899px) {
	.swiper-wapre .swiper-button-prev,.swiper-wapre .swiper-button-next { width: 40px; height: 40px; border-radius: 20px; }
	.swiper-wapre .swiper-button-prev { left: -20px;}
	.swiper-wapre .swiper-button-next { right: -20px;}
}
@media screen and (min-width: 900px) and (max-width: 1079px) {
	.swiper-wapre .swiper-button-prev,.swiper-wapre .swiper-button-next { width: 45px; height: 45px; border-radius: 22.5px;}
	.swiper-wapre .swiper-button-prev { left: -22.5px;}
	.swiper-wapre .swiper-button-next { right: -22.5px;}
}
@media screen and (min-width: 1080px) {
	.swiper-wapre .swiper-button-prev { left: -50px;}
	.swiper-wapre .swiper-button-next { right: -50px;}
}


#mv .swiper-pagination {
	position:absolute; 
	bottom: -90px;
	box-shadow: 0px 5px 15px 0px rgba(255, 255, 255, 0.35);
	border-radius: 8px;
	height: 120px;
}

#mv .swiper-pagination-bullet {
    width: 225px; /*大きさ*/
    height: 120px; /*大きさ*/
    display: inline-block;
	border-radius: 0px;
    background: none;
	opacity: 1.0;
    box-shadow: none;
    border: none;
	margin: 0
}
#mv .swiper-pagination-bullet:hover { opacity: 0.7; }
@media screen and (max-width: 599px) {
	#mv .swiper-pagination { width: 320px; margin: 0 auto; left: 0; right: 0; bottom: -100px; }
	#mv .swiper-pagination-bullet {
		width: 80px; /*大きさ*/
		height: 80px; /*大きさ*/
	}
	
	#mv .swiper-pagination-bullet:nth-child(1) {
		display: none;
		background-size: cover; /*画像の伸縮*/
		background-image:url("../img/common/btn01_sp.gif");
	}
	#mv .swiper-pagination-bullet:nth-child(2) {
		background-size: cover; /*画像の伸縮*/
		background-image:url("../img/common/btn01_sp.gif");
		border-radius: 8px 0 0 8px;
	}
	#mv .swiper-pagination-bullet:nth-child(3) {
		background-size: cover; /*画像の伸縮*/
		background-image:url("../img/common/btn02_sp.gif");
	}
	#mv .swiper-pagination-bullet:nth-child(4) {
		background-size: cover; /*画像の伸縮*/
		background-image:url("../img/common/btn03_sp.gif");	
	}
	#mv .swiper-pagination-bullet:nth-child(5) {
		background-size: cover; /*画像の伸縮*/
		background-image:url("../img/common/btn04_sp.gif");
		border-radius: 0 8px 8px 0;
	}
}
@media screen and (min-width: 600px) {
	#mv .swiper-pagination-bullet:nth-child(1) {
		display: none;
		background-size: cover; /*画像の伸縮*/
		background-image:url("../img/common/btn01_pc.gif");
	}
	#mv .swiper-pagination-bullet:nth-child(2) {
		background-size: cover; /*画像の伸縮*/
		background-image:url("../img/common/_btn01_pc.gif");
		border-radius: 8px 0 0 8px;
	}
	#mv .swiper-pagination-bullet:nth-child(3) {
		background-size: cover; /*画像の伸縮*/
		background-image:url("../img/common/_btn02_pc.gif");
	}
	#mv .swiper-pagination-bullet:nth-child(4) {
		background-size: cover; /*画像の伸縮*/
		background-image:url("../img/common/_btn03_pc.gif");	
	}
	#mv .swiper-pagination-bullet:nth-child(5) {
		background-size: cover; /*画像の伸縮*/
		background-image:url("../img/common/_btn04_pc.gif");
		border-radius: 0 8px 8px 0;
	}
}
@media screen and (min-width: 600px) and (max-width: 1024px) {
	#mv .swiper-pagination { width: 720px; margin: 0 auto; left: 0; right: 0; bottom: -80px; height: 96px; }
	#mv .swiper-pagination-bullet {
		width: 180px; /*大きさ*/
		height: 96px; /*大きさ*/
	}
}
@media screen and (min-width: 1025px) {
	#mv .swiper-pagination { width: 900px; margin: 0 auto; left: 0; right: 0; }
}



/* card */
.swiper-slide-card { opacity: 0.2; background:#fffcf0; padding: 1% 1.5%; border-radius: 12px; border: 1px solid #e9e2c9; margin-bottom: 40px;  }
.swiper-slide-active,.swiper-slide-prev,.swiper-slide-next { opacity: 1.0;}

.BeforeAfter { display: flex; justify-content: center; margin-bottom: 20px; position: relative; }

.BeforeAfter .before { width: 36%; margin-right: 4%; }
.BeforeAfter .before .before-frame { border: 0px solid #bce8fd; border-radius: 6px; width: 100%; height: auto; margin-bottom: 10px; position: relative; }
.BeforeAfter .before img { border-radius: 4px; }
.BeforeAfter .before .bText { content: ""; position: absolute; left: -3px; top: -3px; width: 0; height: 0; border-style: solid; border-width: 72px 72px 0 0; border-color: #bce8fd transparent transparent transparent; color: #5c80ad; font-size: 0.8rem; }
.BeforeAfter .before .bText span { transform: rotate(-45deg); font-family: 'Roboto',sans-serif; font-weight: bold; position: absolute; top: -55px; left: 3px;}

/*.BeforeAfter .before:after { content: "\f101"; font-family: 'Font Awesome 5 Free'; font-weight: 900; position: absolute; top: 50%; transform: translateY(-50%); right: -55px; color: #f1d6ad; font-size: 5.0rem; z-index: 10; }*/
.BeforeAfter .arrow { position: absolute; top: 45%; left: 33%; z-index: 10; transform: rotate(30deg); width: 10%; }

.BeforeAfter .after { width: 60%; height: auto; border: 0px solid #e17070; border-radius: 6px; position: relative; }
.BeforeAfter .after img { border-radius: 6px; }
.BeforeAfter .after .aText { content: ""; position: absolute; left: -6px; top: -6px; width: 0; height: 0; border-style: solid; border-width: 100px 100px 0 0; border-color: #e17070 transparent transparent transparent; color: #fff; }
.BeforeAfter .after .aText span { transform: rotate(-45deg); font-family: 'Roboto',sans-serif; font-weight: bold; position: absolute; top: -80px; left: 8px; font-size: 1.0rem; }
.swiper-slide-card h3 { text-align: center; padding: 5px 20px; border-top: solid 2px #f1d6ad; border-bottom: solid 2px #f1d6ad; margin-bottom: 10px; color: #000; font-size: 1.0rem; background: #fff; }

.inLine { display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap; margin-bottom: 5px; }
.inLine p { margin-right: 5px; font-weight: bold; font-size: 0.9em; }
.inLine p.xsmall { font-size: 0.7em; color: #666; }
.inLine p.xsmall .far { margin-right: 5px; }
.inLine p span { font-size: 0.8em; font-weight: normal; margin-right: 5px; }
.inLine p:after { content: "/"; margin-left: 5px; font-weight: normal;}
.inLine p:last-child:after { display: none; }

.comment { border: 1px dashed #333; padding: 10px 15px; border-radius: 8px; position: relative; width: 70%; margin-bottom: 10px  }
.comment dt { font-size: 0.8em; font-weight: bold; position: absolute; left: 2%; top: -20px; padding: 5px 10px; background:#fffcf0; }
.comment dd { font-size: 0.8em; }

.moreBtn { position: absolute; right: 4%; bottom:4%; margin: 0; text-align: center; }
.moreBtn span { font-size: 0.7em; display: block; }
.moreBtn img { width: 50px; }

@media screen and (max-width: 599px) {
	.swiper-slide-card { padding: 4%; width: 91.5% !important; }
	.swiper-slide-card h3 { font-size: 0.85rem; }
	.BeforeAfter .after .aText { border-style: solid; border-width: 75px 75px 0 0; }
	.BeforeAfter .after .aText span { top: -55px; left: 10px; font-size: 0.8em; }
	.BeforeAfter .before .bText span { font-size: 0.8em; left: 10px; top: -50px; }
	.comment { width: 86%; margin-right: 0%;  }
	.inLine p { line-height: 1.2; font-size: 0.7rem; }
	
	.moreBtn { position: inherit; display: flex; justify-content: flex-end; align-items: center; }
	.moreBtn span { font-size: 0.7em; display: inline-block; order: 1; margin-right: 5px; }
	.moreBtn img { width: 30px; order: 2; }
}
@media screen and (min-width: 600px) and (max-width: 1024px) {
	.swiper-slide-card { padding: 2% 2%; }
	.swiper-slide-card h3 { font-size: 0.95rem;}
	.BeforeAfter .after .aText { border-width: 80px 80px 0 0; }
	.BeforeAfter .after .aText span { top: -65px; left: 7px; font-size: 0.8rem; }
	
	.BeforeAfter .before .bText { border-width: 60px 60px 0 0; font-size: 0.5rem;}
	.BeforeAfter .before .bText span { position: absolute; top: -45px; left: 6px;}
	.comment { width: 70%; margin-right: 4%;  }
	.moreBtn span { font-size: 0.6em; }
	.moreBtn img { width: 30px; }
	.inLine p { line-height: 1.2; font-size: 0.8rem; }
}

.swiper-slide a         { resize: none; }
.swiper-slide a:link    { color:#000; text-decoration: none; }
.swiper-slide a:visited { color:#000; text-decoration: none; }
.swiper-slide a:hover   { color:#000; text-decoration: none; opacity: 0.7; }
.swiper-slidea:active  { color:#000; text-decoration: none; }

@media screen and (min-width: 600px) {
	.cardSlider-swiper-slide { }
}

.arrow-ani { position:relative; color:#333; padding: 5px 0; display:inline-block; text-decoration: none; outline: none; width: 80%;}
.arrow-ani span { font-size: 0.9em;}
.arrow-ani span.aColor { color: #e17070;}
.arrow-ani span.bColor { color: #5c80ad;}
.arrow-ani::before { content: ""; position: absolute; bottom: 0; width: 100%; height: 1px; background: #5c80ad; }
.arrow-ani::after { content: ""; position: absolute; bottom:-4px; width: 8px; height: 8px; border-top: 1px solid #e17070; border-right: 1px solid #e17070; transform: rotate(45deg); }
.arrow-ani::before { animation: arrowlong01 2s ease infinite; }
.arrow-ani::after { animation: arrowlong02 2s ease infinite; }
@keyframes arrowlong01 {
    0%{ width:0; opacity:0}
    20%{ width:0; opacity:1}
    80%{ width:105%; opacity:1}
    100%{ width:105%; opacity:0}
}
@keyframes arrowlong02 {
    0%{ left:0; opacity:0}
    20%{ left:0; opacity:1}
    80%{ left:103%; opacity:1}
    100%{ left:103%; opacity:0}
}
@media screen and (max-width: 599px) {
	.arrow-ani span { font-size: 0.8em;}
}

.swiper-card .swiper-button-prev:after {
    content: 'prev';
    color: rgba(155,155,155,0.9);
    border-radius: 25px;
    font-size: 1rem;
}
.swiper-card .swiper-button-next:after {
    content: 'next';
    color: rgba(155,155,155,0.9);
    border-radius: 25px;
    font-size: 1rem;
}
.swiper-card .swiper-button-prev,.swiper-card .swiper-button-next {
    width: 50px;
	height: 50px;
	border-radius: 25px;
	background: rgba(187,187,187,0.5);
}
.swiper-card .swiper-pagination-bullet { border-radius: 0px; width: 50px; height: 2px; background: #fff; }
@media screen and (max-width: 599px) {
	.swiper-card .swiper-button-prev,.swiper-card .swiper-button-next {
		width: 30px;
		height: 30px;
		border-radius: 15px;
		background: rgba(187,187,187,0.5);
	}
	.swiper-card .swiper-button-prev { left: 5px; background: rgba(187,187,187,0.75); }
	.swiper-card .swiper-button-next { right: 5px; background: rgba(187,187,187,0.75); }
	.swiper-card .swiper-button-prev:after { color: rgba(85,85,85,0.9); font-size: 0.8rem; }
	.swiper-card .swiper-button-next:after { color: rgba(85,85,85,0.9); font-size: 0.8rem; }
}


.f_result .BeforeAfter .after .aText { border-width: 70px 70px 0 0;}
.f_result .BeforeAfter .after .aText span { position: absolute; top: -58px; left: 4px; font-size: 0.8rem; }
.f_result .BeforeAfter .before .bText { border-width: 60px 60px 0 0; font-size: 0.7rem; position: absolute; left: -5px; top: -5px; }
.f_result .BeforeAfter .before .bText span { position: absolute; top: -48px; left: 2px; }
.f_result .arrow-ani span { font-size: 0.7em; } 

@media screen and (max-width: 599px) {
	.f_result .in-f-result { margin: 0 4%; } 
}