@charset "utf-8";

/* -----------------------------------------------------------
    TOP
-------------------------------------------------------------- */

/*    mv-area
-------------------------------------------------------------- */
.mv-area {
	position: relative;
	/*
	background: url("../img/top-mv.jpg") no-repeat center center / cover;
	*/
	height: 100vh;
}
.mv-area .txt-area{
	position: absolute;
	top: 22%;
	left: calc( ( 100% - 1200px) / 2);
	z-index: 1;
}
.mv-area .txt-area .section-catch{
	font-size: 5.6rem;
	font-weight: bold;
	line-height: 1.4;
}

.mv-area .catch-copy {
    font-weight: bold;
    padding: 40px 0 40px;
    display: flex;
    flex-wrap: wrap;
	position: relative;
	
	text-shadow: #fff 2px 0px 0px, #fff -2px 0px 0px, #fff 0px -2px 0px, #fff 0px 2px 0px, #fff 2px 2px 0px, #fff -2px 2px 0px, #fff 2px -2px 0px, #fff -2px -2px 0px, #fff 1px 2px 0px, #fff -1px 2px 0px, #fff 1px -2px 0px, #fff -1px -2px 0px, #fff 2px 1px 0px, #fff -2px 1px 0px, #fff 2px -1px 0px, #fff -2px -1px 0px, #fff 1px 1px 0px, #fff -1px 1px 0px, #fff 1px -1px 0px, #fff -1px -1px 0px;
}
.mv-area .catch-copy span {
    display: inline-block;
}
.mv-area .catch-copy .sub {
    font-size: 2.0rem;
    line-height: 1.5;
}
.mv-area .catch-copy .share {
    color: var(--red);
	color: #CE2B2B;
    display: flex;
    align-items: center;
    margin: 30px 0 5px;
    white-space: nowrap;
    position: relative;
    width: 100%;
}
.mv-area .catch-copy .share .no1 {
    font-size: 15rem;
    font-weight: normal;
    font-family: var(--gilda);
    line-height: .8;
}
.mv-area .catch-copy .share .vertical {
    font-size: 5.2rem;
    writing-mode: vertical-rl;
    letter-spacing: 1rem;
    line-height: 1;
    text-align-last: justify;
	margin: -6px 20px 0 0;
	font-weight: 500;
}
.mv-area .catch-copy .share .kome-mark {
    font-size: 1.4rem;
    color: var(--black);
    position: absolute;
    display: inline-block;
    top: -10px;
    left: 360px;
}
.mv-area .catch-copy .kome-txt {
    font-weight: 400;
    font-size: 1.2rem;
    padding: 0px 0 30px;
	width: 100%;
	text-shadow: none;
}
.mv-area .catch-copy .review {
    font-size: 3rem;
    line-height: 1.3;
    padding: 0 0 0;
	position: relative;
}

.mv-area .catch-copy .review .review-num {
    font-size: 4rem;
    font-family: var(--lato);
    line-height: 1.3;
}
.mv-area .catch-copy .ani-line {
    background-image: linear-gradient(to right, #F3E669 0%, #F3E669 70%, transparent 70%);
	background-size: 200% 8px;
}


.mv-area .txt-area .basic-txt{
	padding: 30px 0 40px;
    width: 530px;
}

.mv-area .bnr-area {
    display: none;
}
.mv-area .main-image{
	width: 100%;
	width: calc(100% - 70px);
}
.mv-area .image-wrap {
	position: relative;
	overflow: hidden;
	width: 100%;
	height: 100%;
}
.mv-area .image-wrap video {
	/*object-fit: cover;
	object-position: center center;
	width: 100%;
	height: 100vh;*/
}


/* mv-bg-slider */
.mv-bgarea{
	position: relative;
}
.mv-bgarea .mv-bg {
    width:55%;
    height: 100vh;
    z-index: -1;
    opacity: 0;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    right: 0;
    top: 0;

    -webkit-animation: anime 18s 0s infinite;
    animation: anime 18s 0s infinite;
}
.mv-bgarea .mv-bg.slide1 {
	background-image: url("../img/gallery/img09.jpg");
}
.mv-bgarea .mv-bg.slide2 {
    background-image: url("../img/gallery/img01.jpg");
    animation-delay: 6s;
}
.mv-bgarea .mv-bg.slide3 {
	background-image: url("../img/gallery/hsp1241.jpg");
    animation-delay: 12s;
}

@keyframes anime {
    0% {
        opacity: 0;
    }
    16% {
        opacity: 1;
    }
    33% {
        opacity: 1;
    }
    45% {
        opacity: 0;
        transform: scale(1.1) ;
    }
    100% { opacity: 0 }
}


.mv-area .bg-wrap{
    position: absolute;
    top: 0;
    left: 0;
    width: 45%;
    height: 100%;
    overflow: hidden;
    background: #fff;
}
.mv-area .bg-wrap::before {
    content: "";
    display: block;
    position: absolute;
    background: url(../img/mv-slider.png) repeat;
    width: 2211px;
    height: 3091px;
    top: -40%;
    right: 50%;
    animation: mv-slider 40s linear infinite;
    transform: rotate(30deg) translateY(0%);
}

@keyframes mv-slider {
  0% {
    -webkit-transform: rotate(30deg) translateY(0%);
    transform: rotate(30deg) translateY(0%);
  }
  100% {
    -webkit-transform: rotate(30deg) translateY(-50%);
    transform: rotate(30deg) translateY(-50%);
  }
}

/* bot-txt-area */
.mv-area .bot-txt-area {
	/*
	width: calc(100% - 80px);
	*/
	position: relative;
	/*
	width: 60%;
	margin: -150px 0 0;
	*/
	padding: 110px 0 50px 0;
	width: 1200px;
	margin: 0 auto;
}
.mv-area .bot-txt-area .section-title-en {
	top: -70px;
}
.mv-area .bot-txt-area .basic-txt {
	margin: 0 0 30px;
	z-index: 1;
	position: relative;
}


/*特設キャンペーンバナー*/
.mv-wrap {
	position: relative;
}
.mv-wrap .special-bn-area {
	display: block;
	position: absolute;
	right: calc((100% - 1200px) / 2);
	/*
	bottom: 350px;
	*/
	bottom: 45%;
	z-index: 1;
}
.mv-wrap .special-bn-area .bn {
}
.mv-wrap .special-bn-area .bn img {
	width: 380px;
}
.mv-wrap .special-bn-area .bn a {
	display: block;
	box-shadow: 0px 10px 20px rgb(0 0 0 / 30%);
}
.mv-wrap .special-bn-area .bn a:hover {
	box-shadow: none;
}


@media screen and (max-width: 768px){
	.h1-area{
		top: 330px;
	}
	/*    mv-area
	-------------------------------------------------------------- */
	.mv-area {
		/*
		background: url("../img/top-mv-sp.jpg") no-repeat center bottom / cover;
		*/
		display: block;
		
		/*通常キャンペーンバナー時*/
		/*height: 460px;*/
		
		/*特設キャンペーンバナー時*/
		/*height: 390px;*/
		/*height: 355px;*/
		/*height: 360px;*/
		height: 350px;
	}
	
    .mv-wrap {
		/*
        height: 100vh;
        height: calc(var(--vh, 1vh) * 100);
		*/
		height: 100%;
		display: block;
	}
	.mv-area {
		position: relative;
		/* height: auto; */
		margin: 0;
		/*
		padding: 0 0 285px 0;
		*/
		padding: 0;
		
		/*
        height: calc(calc(var(--vh, 1vh) * 100) - 130px);
		*/
	}
	
	.mv-area .bg-wrap{
		display: none;
	}
	.mv-area .bg-wrap::before{
		display: none;
	}

	.mv-area img {
		width: 100%;
		max-width: 420px;
	}
	.mv-area .image-wrap video{
		/*height: calc(100vh - 75px);*/
	}
	.mv-area .txt-area {
        left: 20px;
        transform: none;
        width: 100%;
        text-align: left;
		top: 27%;
	}
	.mv-area .txt-area .section-catch{
		font-size: 3.2rem;
		line-height: 1;
		font-weight: 600;
	}
	.mv-area .txt-area .basic-txt{
		display: none;
	}
    
	.mv-area .catch-copy {
        font-weight: bold;
        padding: 0;
        display: block;
		/*
        flex-wrap: wrap;
		*/
    }
    .mv-area .catch-copy .sub {
        font-size: 1.3rem;
		background: #fff;
		padding: 3px 10px 3px;
		margin: 0 0 5px;
		color: #CE2B2B;
		text-shadow: none;
    }
    .mv-area .catch-copy .share {
       	justify-content: flex-start;
        width: 100%;
        height: 90px;
        margin: 10px 0 0;
    }
    .mv-area .catch-copy .share .no1 {
        font-size: 11rem;
    }
    .mv-area .catch-copy .share .vertical {
        font-size: 2.2em;
        margin: 0 10px 0 0;
    }
    .mv-area .catch-copy .share .kome-mark {
        font-size: 1.3rem;
		right: auto;
		left: 255px;
    }
    .mv-area .catch-copy .kome-txt {
        font-size: 1rem;
        padding: 0px 0 15px;
        display: block;
        width: 100%;
    }
    .mv-area .catch-copy .review {
        font-size: 2.4rem;
        padding: 0 0 0;
		line-height: 1.5;
    }
    .mv-area .catch-copy .review.min {
        font-size: 2.0rem;
		display: block;
    }
    .mv-area .catch-copy .review .review-num {
        font-size: 3.6rem;
		padding: 0 4px;
    }
	
	.mv-area .mv-btn {
		width: 135px;
        display: flex;
        position: absolute;
        right: 12%;
        top: 102%;
        justify-content: space-between;
        box-shadow: 3px 3px 0 0 rgba(0, 0, 0, .1);
        z-index: 1;
    }
	.mv-btn a::after {        
		display: inline-block;
        content: "";
        background: url(../img/icon-arrow-red.svg) right / cover, no-repeat;
        width: 30px;
        height: 7px;
        position: absolute;
        bottom: 0px;
        transform: translateY(-50%);
        right: -13px;
        transition: all .5s;
    }
	
	/*.mv-btn a {
        width: 140px;
        height: 140px;
        position: relative;
        text-align: center;
        background: #fff;
        border: 1px solid #CCCCCC;
        padding: 20px 0px 0px;
        border-radius: 50%;
        z-index: 1;
        box-shadow: 3px 3px 0 0 rgba(0, 0, 0, .1);
        font-size: 1.2rem;
        font-weight: bold;
        line-height: 1.4;
    }
	
	.mv-btn a::before {
		content: "";
		display: inline-block;
		background: url(../img/thumb-select-repair.png) center / cover, no-repeat;
		width: 56px;
		height: 56px;
		position: relative;        
		display: flex;
        margin: 0 auto;
		top: -5px;
	}
	
	.mv-btn a::after {
		display: inline-block;
		content: "\f105";
		font-family: 'FontAwesome';
		padding: 0 0 0 8px;
		color: #F0353C;
	}*/
	
	.mv-bgarea .mv-bg {
		height: 460px;
		width: 100%;
	}
	.mv-bgarea .mv-bg.slide1 {
		background-image: url("../img/top-mv-sp01.jpg");
	}
	.mv-bgarea .mv-bg.slide2 {
		background-image: url("../img/top-mv-sp02.jpg");
	}
	.mv-bgarea .mv-bg.slide3 {
		background-image: url("../img/top-mv-sp03.jpg");
	}
	
	
	
    .mv-area .bnr-area {
        display: block;
        padding: 0 20px;
        position: absolute;
        bottom: 20px;
        z-index: 1;
        width: 100%;
    }
    
    .mv-area .bnr-area .mv-bnr {
        text-align: center;
        width: 100%;
    }
    
    .mv-area .bnr-area .mv-bnr a {
        display: block;
        height: inherit;
        width: 100%;
        vertical-align: middle;
    }

	.mv-area .main-image{
		/* width: 100%;
		height: 300px;
		position: static;
		left: auto;
		top: auto;
		padding: 0;
        display: none; */
		width: 100%;
	}
	.mv-area .image-wrap img {
		object-position: right bottom;
		height: 330px;
	}

	.mv-area .sp-mv {
        position: absolute;
        background: url(../img/top-mv01.jpg) repeat-x 0 0;
        background-size: auto 330px;
        width: 100%;
        height: 330px;
        overflow: hidden;
        top: 0;
        z-index: 0;
    }
	.mv-area .sp-mv::before {
		content: "";
		background: rgba(0,0,0,0.1);
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
	}
	/* bot-txt-area */
	.mv-area .bot-txt-area {
		margin: 30px 0 0;
		padding: 40px 20px 40px 20px;
		width: auto;
	}
	.mv-area .bot-txt-area .section-title-en {
		top: -20px;
	}
	.mv-area .bot-txt-area .basic-txt {
		margin: 0 0 25px;
		font-size: 1.5rem;
	}
	
	
	/*特設キャンペーンバナー*/
	.mv-wrap {
		position: inherit;
	}
	.mv-wrap .special-bn-area {
		display: block;
		position: static;
		right: auto;
		bottom: auto;
		background: url("../img/bg-gray02.png") #F1F2F3 repeat center top / 300% auto;
		padding: 20px;
		border-bottom: 1px solid #ccc;
		
		display: none;
	}
	.mv-wrap .special-bn-area .bn {
		text-align: center;
	}
	.mv-wrap .special-bn-area .bn img {
		width: 100%;
	}
}

/*    .sp-select-area
-------------------------------------------------------------- */
.sp-select-area {
    display: none;
}

@media screen and (max-width: 768px) {
    .sp-select-area {
        display: block;
		background: #fff;
		/*
        padding-bottom: calc(env(safe-area-inset-bottom));
		*/
    }
    
    .sp-select-area .select-list {
        display: flex;
        border-bottom: 1px solid #ccc;
        height: 130px;
    }
    
    .sp-select-area .select-list li {
        width: calc( 100% / 3 );
        height: 130px;
    }
    
    .sp-select-area .select-list li a {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        height: 100%;
        padding: 10px 15px;
        justify-content: center;
        align-items: center;
        gap: 5px 0;
        height: 130px;
		position: relative;
		border-top: 3px solid #E00022;
    }
	
	.sp-select-area .select-list li a::after {
		display: inline-block;
        content: "";
        background: url(../img/icon-arrow-red.svg) right / cover, no-repeat;
        width: 30px;
        height: 7px;
        position: absolute;
        bottom: 4px;
        transform: translateY(-50%);
        right: 5px;
        transition: all .5s;
    }
    
    .sp-select-area .select-list li:not(:last-child) a {
        border-right: 1px solid #ccc;
    }
    
    .sp-select-area .select-list li a .img-wrap {
		width: 100%;
		text-align: center;
    }
    
    .sp-select-area .select-list li a .img-wrap img {
        width: 56px;
        height: 56px;
    }
    
    .sp-select-area .select-list li a .txt {
        text-align: center;
        font-size: 1.4rem;
        font-weight: bold;
        line-height: 1.4;
    }
}


/* -----------------------------------------------------------
    MV下：イントロ
-------------------------------------------------------------- */
.mvbot-intro{
	padding: 40px 0;
	position: relative;
	background: url("../img/bg-red.png") no-repeat left top / cover;
	color: #fff;
}
.mvbot-intro .inner{
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.mvbot-intro .section-catch{
	font-size: 3.4rem;
	/*
	flex-basis: 45%;
	*/
	line-height: 1.5;
	white-space: nowrap;
	padding: 0 50px 0 0;
}
.mvbot-intro .section-catch span{
	display: block;
	font-size: 2.2rem;
}
.mvbot-intro .basic-txt{
	/*
	flex-basis: 55%;
	*/
	border-left: 1px dashed #fff;
	padding: 0 0 0 60px;
	font-weight: 500;
}

@media screen and (max-width: 768px){
	
	.mvbot-intro{
		padding: 40px 20px;
		display: none;
	}
	.mvbot-intro .inner{
		display: block;
	}
	.mvbot-intro .section-catch{
		font-size: 2.4rem;
		padding: 0 0 0;
		margin: 0 0 20px;
		white-space: normal;
	}
	.mvbot-intro .section-catch span{
		font-size: 1.8rem;
	}
	
	.mvbot-intro .basic-txt{
		border-left: none;
		background: #fff;
		padding: 20px;
		border-radius: 5px;
		color: #333;
	}
	
}

/*    point-area
-------------------------------------------------------------- */
.point-area {
    position: absolute;
    top: 70vh;
    left: calc( (100% - 1200px ) / 2 );
}

.point-area  .point-list{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.point-area  .point-list li {
    width: calc( (100% - 40px) / 4 );
    background: rgba( 39,3,3,.3);
    padding: 40px 30px 35px;
    border: 1px solid #fff;
    text-align: center;
    position: relative;
}

.point-area  .point-list li .num {
    position: absolute;
    top: -45px;
    left: 25px;
    color: var(--red);
    font-weight: 600;
    font-size: 2.1rem;
    font-family: var(--josefin);
    transform: skewX(-10deg);
}

.point-area  .point-list li::before {
    content: "";
    display: inline-block;
    width: 45px;
    border-top: 1px solid #fff;
    top: 1px;
    left: 0;
    position: absolute;
    transform: rotate(-65deg);
}

.point-area  .point-list li .catch {
    color: #fff;
    font-weight: bold;
    font-size: 1.8rem;
    line-height: 1.6;
}

.point-area  .point-list li .txt {
    font-size: 1.6rem;
    line-height: 1.5;
    color: #fff;
    padding: 15px 0 0;
	font-weight: bold;
}

.point-area  .point-list li .red-bg {
    background: var(--red);
    display: inline-block;
    padding: 0 5px 2px;
    line-height: 1.5;
    color: #fff;
}

@media screen and (max-width: 768px) {
    .point-area {
		display: block;
        position: relative;
        top: initial;
        left: initial;
		/*
        background: url("../img/bg-point-area-sp.png") var(--red);
        background-size: 100% auto;
		background-repeat: repeat;
        background-blend-mode: multiply;
        background-position: top;
		*/
		background: url("../img/bg-red.png") no-repeat center top / cover;
        padding: 20px 0 40px;
    }
    
    /*.point-area::before {
        content: "";
        display: inline-block;
        background: url("../img/img-point-area-sp.jpg") center/cover, no-repeat;
        width: 100%;
        height: 180px;
        position: absolute;
        top: 20px;
    }*/
    
	.point-area .section-catch{
		font-size: 2.4rem;
		flex-basis: auto;
		padding: 20px 0;
		margin: 0;
		color: #fff;
		line-height: 1.4;
		text-align: center;
	}
	.point-area .section-catch span{
		font-size: 1.5rem;
		display: block;
		margin: 2px 0 0;
	}
	
    .point-area .inner {
        padding: 0 10px;
    }
    
    .point-area  .point-list {
        gap: 5px;
    }
    
    .point-area  .point-list li {
        width: calc( (100% - 5px) / 2 );
        background: #fff;
        padding: 25px 5px 20px;
        border: none;
    }
    
    .point-area  .point-list li::before {
        display: none;
    }

    .point-area  .point-list li .num {
        top: 15px;
        left: 50%;
        transform: translateX(-50%) skewX(-10deg);
        color: #333;
        font-size: 1.7rem;
        font-weight: bold;
    }
    
    .point-area  .point-list li .catch {
        color: #333;
        font-size: 1.8rem;
        padding: 15px 0 0;
    }

    .point-area  .point-list li .txt {
        line-height: 1.5;
        padding: 8px 0 0;
        color: #333;
        font-size: 1.3rem;
        font-weight: 500;
    }
    
    .point-area  .point-list li .red-bg {
        line-height: 1.4;
    }
}

/*    共通タイトルレイアウト
-------------------------------------------------------------- */
.title-area {
    display: flex;
    padding: 0;
    align-items: center;
    gap: 0 50px;
}

.title-area .title-block {
    padding: 0 40px 0 0;
    border-right: 1px solid #707070;
}

.title-area .section-title {
    font-size: 3.0rem;
    font-weight: bold;
    display: inline-block;
    line-height: 1.3;
}

.title-area .section-title-en {
    font-family: var(--josefin);
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--red);
    position: relative;
    padding: 0 0 0 20px;
    margin: 10px 0 0;
    letter-spacing: .2rem;
}

.title-area .section-title-en::before {
    content:"";
    display: inline-block;
    background: url("../img/icon-section-title.svg") center/cover,no-repeat;
    width: 15px;
    height: 11px;
    position: absolute;
    left: 0;
    top: 2px;
}

.title-area .txt-block  {
    flex-basis: auto;
}

.title-area .txt-block .section-txt {
    font-size: 1.8rem;
    font-weight: 500;
    line-height: 1.7;
    text-shadow: 0 0 10px rgba(255,255,255,1),0 0 5px rgba(255,255,255,1);
}

@media screen and (max-width: 768px) {
    .title-area {
        flex-wrap: wrap;
    }
    
    .title-area .title-block {
        padding: 0;
        border-right: none;
        width: 100%;
        display: block;
    }
    
    .title-area .section-title {
        font-size: 2.4rem;
    }
    
	.title-area .section-title-en {
		font-size: 1.6rem;
		padding: 0 0 0 20px;
		margin: 5px 0 0;
		letter-spacing: .1rem;
	}

	.title-area .section-title-en::before {
		left: 0;
		top: 2px;
	}

	
    .title-area .txt-block {
        padding: 20px 0 0;
    }
    
    .title-area .txt-block .section-txt {
        font-size: 1.6rem;
    }
}

/*    .symptom-select-area
-------------------------------------------------------------- */
.symptom-select-area .ac{
	pointer-events: none;
}
.symptom-select-area .symptom-ttl {
    display: block;
    background: url("../img/symptom-bg.png") center/cover, no-repeat #F3F4F5;
    padding: 20px 15px 20px 35px;
    font-size: 1.8rem;
    font-weight: bold;
    position: relative; 
    line-height: 1.5;
}
.symptom-select-area .symptom-ttl::before {
    content: "";
    display: inline-block;
    position: absolute;
    width: 5px;
    height: 20px;
    left: 15px;
    top: 31%;
    background: var(--red);
	border-radius: 5px;
}

@media screen and (max-width: 768px) {
	.symptom-select-area .ac{
		pointer-events: inherit;
	}
	.symptom-select-area .symptom-block{
		border: none;
		border-bottom: 1px solid #cccccc;
		position: relative;
	}
	.symptom-select-area .symptom-block .symptom-ttl {
		pointer-events: auto;
		display: block;
		padding: 15px 20px 15px 25px;
        font-size: 1.6rem;
	}
	.symptom-select-area .symptom-list{
		display: block;
	}
	.symptom-select-area .symptom-list li{
	background-image: linear-gradient(to right, #CCCCCC 1px, transparent 1px);
    background-size: 5px 1px;
    background-repeat: repeat-x;
    background-position: left bottom;
		border-top: none;
		position: relative;
}
	.symptom-select-area .ac-contents{
		display: none;
	}
	
	.symptom-select-area .ac .accordion-icon {
		position: absolute;
		height: 20px;
		width: 20px;
		top: 18px;
	}
	.symptom-select-area .accordion-icon::before,
	.symptom-select-area .accordion-icon::after {
		background-color: #E00022;
		content: "";
		height: 2px;
		width: 20px;
		position: absolute;
		transition: all .3s;
		top: 0;
		bottom: 0;
		margin: auto;
		right: 0;
	}
	.symptom-select-area .accordion-icon::before {
		transform: rotate(0deg);
	}
	.symptom-select-area .accordion-icon::after {
		transform: rotate(90deg);
	}
	.symptom-select-area .ac.active .accordion-icon::after {
		transform: rotate(180deg);
	}
	.symptom-select-area  .ac-contents {
		display: none;
		position: relative;
		background: #fff;
	}
	

}


/*    flow-intro-area
-------------------------------------------------------------- */
.flow-intro-area {
    background: url("../img/bg-flow-intro-area.png") center/cover, no-repeat #F1F2F3;
    padding: 50px 0;
}

.flow-intro-area .flex-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

.flow-intro-area .catch {
    font-weight: bold;
    font-size: 2.0rem;
    line-height: 1.7;
}

.flow-intro-area .flow-btn {
}

.flow-intro-area .flow-btn a {
    width: 420px;
    display: flex;
    padding: 25px 20px;
    box-shadow: 3px 3px 10px rgba(0,0,0,.1); 
    position: relative;
    top: 0;
}

.flow-intro-area .flow-btn a::after {
    display: inline-block;
    content: "";
    background: url("../img/icon-arrow-red.svg") center/cover, no-repeat;
    width: 43px;
    height: 7px;
    position: absolute;
    right: -20px;
    bottom: 20px;
    transition: all .4s;
}

.flow-intro-area .flow-btn.web a {
    background: url("../img/thumb-flow-web.png"), #fff;
    background-position: 20px;
    background-repeat: no-repeat;
    background-size: 80px 80px;
} 

.flow-intro-area .flow-btn.shop a {
    background: url("../img/thumb-flow-shop.png"), #fff;
    background-position: 20px;
    background-repeat: no-repeat;
    background-size: 80px 80px;
} 

.flow-intro-area .flow-btn a:hover {
    top: -5px;
    color: var(--red);
}

.flow-intro-area .flow-btn a:hover::after {
    right: -28px;
}

.flow-intro-area .flow-btn a .btn-txt {
    font-size: 1.8rem;
    font-weight: bold;
    line-height: 1.6;
    padding-left: 100px;
    width: 100%;
    display: inline-block;
}

.flow-intro-area .flow-btn a .sub {
    display: block;
    font-size: 1.6rem;
}

.flow-intro-area .flow-btn a .red {
    color: var(--red);
    font-size: 2.2rem;
}

@media screen and (max-width: 768px) {
    .flow-intro-area {
        padding: 30px 0 40px;
		background-repeat: repeat;
		background-size: 100% auto;
		
		background: url("../img/bg-gray02.png") #F1F2F3 repeat center top / 300% auto;
		display: block;
    }
    
    .flow-intro-area .flex-box {
        gap: 25px;
        width: 100%;
    }
    
    .flow-intro-area .catch {
        font-size: 1.8rem;
        text-align: center;
        display: block;
        width: 100%;
    }
    
    .flow-intro-area .flow-btn {
        width: 100%;
    }
    
    .flow-intro-area .flow-btn a {
        width: 100%;
        padding: 18px 10px;
    }
    
    .flow-intro-area .flow-btn a::after {
        right: -15px;
        bottom: 10px;
    }
    
    .flow-intro-area .flow-btn.web a {
        background-position: 15px;
        background-size: 54px 54px;
    }
    
    .flow-intro-area .flow-btn.shop a {
        background-position: 15px;
        background-size: 54px 54px;
    }
    
    .flow-intro-area .flow-btn a .sub {
        font-size: 1.4rem;
    }
    
    .flow-intro-area .flow-btn a .red {
        font-size: 1.8rem;
    }
    
    .flow-intro-area .flow-btn a .btn-txt {
        font-size: 1.5rem;
        padding-left: 75px;
    }
}


/* pagelink-area
--------------------------------------------------------------*/
.pagelink-area{
	padding:0 0;
	/*background: #F0353C;*/
	transition: .3s all;
	margin: 0 0 130px;
}
.pagelink-area ul{
	display: flex;
	justify-content: space-between;
}
.pagelink-area li{
	width: calc((100% / 6) - 5px);
	height: 70px;
	border: solid 1px #DDDDDD;
}
.pagelink-area li a{
	    background: #fff;
    font-weight: 600;
    font-size: 2rem;
    width: 100%;
    height: 60px;
    display: block;
    text-align: center;
    position: relative;
    top: 0;
    transition: all .2s;
}
.pagelink-area li a::before{
	content: "\f107";
	position: absolute;
	font-size: 1.8rem;
	bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
	    font-family: "FontAwesome";
	color: #F0353C;
}
.pagelink-area li a:hover{
	box-shadow: none;
}
.pagelink-area li a{
	font-size: 1.5rem;
	font-weight: bold;
    display: block;
    width: 100%;
    height: 100%;
	padding: 20px 0 0;
		transition: .2s all;
}

.pagelink-area.fix {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 998;
	width: 100%;
	padding: 8px 0;
	box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
	background: #fff;
}
.pagelink-area.fix li{
	height: 55px;
}
.pagelink-area.fix li a{
	padding: 12px 0 0;
}
.pagelink-area.fix li a::before{
	bottom: 4px;
}

.fixed-btn .wrap li.shop,
.fixed-btn .wrap li.line,
.fixed-btn .wrap li.estimate{
	position: fixed;
	 z-index: 999;
}

.anchor {
	display: block;
  padding-top: 90px;
  margin-top: -90px;
}

@media screen and (max-width: 768px){
	.pagelink-area{
		margin:  -27px 0 0;
		padding: 0px 0 42px;
		display: none;
	}
	.pagelink-area ul{
		flex-wrap: wrap;
	}
	.pagelink-area li{
		width: calc((100% / 3) - 5px);
		height: 50px;

	}
	.pagelink-area li:nth-child(n + 4){
		margin: 10px 0 0;
	}
	.pagelink-area li a{
		font-size: 1.4rem;
	}
	.pagelink-area li a::before{
		bottom: 5px;
	}
	.pagelink-area li a:hover{

	}
	.pagelink-area li a{
		padding: 10px 0 0;

	}

	.menu-box {
		padding: 30px 0 50px;
		background: url(../img/bg-brand-select-area.png);
	}

	.menu_btn {
	  padding: 12px 10px;
	  cursor: pointer;
	  background-color: var(--red);
		border: none;
		width: 100%;
		font-weight: bold;
		text-align: left;
		font-size: 1.6rem;
		    font-family: 'Poppins', sans-serif;
		position: relative;
		color: #fff;
				/*border: solid 1px #ccc;*/
		height: 50px;
	}

	.menu_list {
	  display: none; 
	  margin: 0;
	  padding-inline-start: 0px;
	  list-style: none;
	  background-color: #fff;
	}
	.menu_list li  {
		padding: 15px 0px 15px 30px;;
		border-bottom: solid 1px #f2f2f2;
		position: relative;
	  }
	.menu_list li::before {
		content: "";
		position: absolute;
		display: inline-block;
		width: 10px;
		height: 2px;
		top: 50%;
		left: 10px;
		transform: translateY(-50%);
		transition: all .3s;
		background: var(--red);
    }
	.menu_list li a {
		  display: block;
		  text-decoration: none;
		  color: #000;
		}
	.menu-box.fix {
	  position: fixed;
	  top: 0;
	  right: 0;
	  z-index: 999;
		width: 100%;
		padding: 10px 0;
	}
	
	.head-nofix .fixed-btn{
		display: block;
		position: fixed;
	}
	.fixed-btn .wrap li.shop,
	.fixed-btn .wrap li.line,
	.fixed-btn .wrap li.estimate{
		position: inherit;
		z-index: 99;
	}
	
/* タイトル横のプラスマーク縦線 */
.menu_btn::before{
  position: absolute;
  content: '';
  top: 50%;
  right: 15px;
  width: 15px;
  height: 2px;
  background-color:#fff;
  transform: rotate(90deg);
  transition: all .3s ease-in-out;
}
/* タイトル横のプラスマーク横線 */
.menu_btn::after{
  position: absolute;
  content: '';
  top: 50%;
  right: 15px;
  width: 15px;
  height: 2px;
  background-color:#fff;
  transition: all .3s ease-in-out;
}
/* アコーディオンが開いたとき縦線の変化 */
.menu_btn.open::before {
  transform: rotate(180deg);
}
/* アコーディオンが開いたとき横線の変化 */
.menu_btn.open::after {
  opacity:0;
}
}

/* -----------------------------------------------------------
    cmn-comparison-area
-------------------------------------------------------------- */
.cmn-comparison-area .bottom-area .comparison-list li .catch{
	font-size: 2.4rem;
		width: 90%;
}

@media screen and (max-width: 768px){
	.cmn-comparison-area .bottom-area .comparison-list li .catch{
		font-size: 1.6rem;
		width: calc(57% + 20px);
	}
}

/* -----------------------------
	brand-area
-------------------------------- */

@media screen and (max-width: 768px){
	.brand-area .btn-more{
		margin: 50px 0 0;
	}
	
	.pickup-brand-list{
		justify-content: flex-start;
	}
}

/* -----------------------------
	overhaul-area
-------------------------------- */
.overhaul-area{
	position: relative;
}
.brand-select-area{
	padding: 260px 0 150px;
}
/*
.overhaul-area::before{
	content: '';
	position: absolute;
	width: 100%;
	height: 500px;
	top: 0;
	right: 0;
	background: url("../img/overhaul-area-mv.jpg") no-repeat top center / cover;
}
*/
.overhaul-comparison{
	position: relative;
}
.overhaul-area .bottom-bg{
	    height: 100%;
    width: 96.5%;
    position: absolute;
    top: 0;
    left: 0;
    background: #fff;
    z-index: 0;
    transition: all .3s;
}

.overhaul-area .inner > .cmn-title-area{
    padding: 50px 0 50px 0;
	margin: -100px 0 0;
}

.overhaul-area .comparison-list {
    display: flex;
    flex-wrap: wrap;
    gap: 60px;
    padding: 30px 0 50px 0;
}

.overhaul-area .comparison-list li {
    width: calc( ( 100% - 120px ) / 3 );
}
.overhaul-area .comparison-list li .accordion-icon{
	display: none;
}
.overhaul-area .comparison-list li .img-wrap {
}
.overhaul-area .comparison-list li .img-wrap img {
	width: 100%;
	height: 300px;
	object-fit: cover;
}
.overhaul-area .comparison-list li .catch {
    font-size: 2.4rem;
    font-weight: bold;
    background: #fff;
    padding: 25px 25px 15px 0;
    display: inline-block;
    line-height: 1.6;
    margin-top: -40px;
    position: relative;
    z-index: 2;
	min-height: 85px;
	width: 90%;
}
.overhaul-area .comparison-list li .catch.s {
    font-size: 2.4rem;
}

.overhaul-area .comparison-list li .txt {
    line-height: 1.8;
    padding: 0;
    position: relative;
    z-index: 1;
}
.overhaul-area .comparison-list li .txt .s {
	font-size: 1.4rem;
}
.overhaul-area .comparison-list li .txt a,
.overhaul-area .comparison-list li .next-link a{
	color: var(--red);
	/*
	text-decoration: underline;
	*/
}
.overhaul-area .comparison-list li .txt a:hover {
	text-decoration: none;
}

.brand-disc-block .r {
	background: url("../img/brand/omega-main.jpg") no-repeat center center / cover;
}
.brand-disc-block.rolex .r {
	background: url("../img/brand/rolex-main.jpg") no-repeat center center / cover;
}
.brand-disc-block.tagheuer .r {
	background: url("../img/brand/tag-heuer-main.jpg") no-repeat center center / cover;
}
.brand-disc-block.panerai .r {
	background: url("../img/brand/panerai-main.jpg") no-repeat center center / cover;
}
.brand-disc-block.breitling .r {
	background: url("../img/brand/breitling-main.jpg") no-repeat center center / cover;
}
.brand-disc-block.cartier .r {
	background: url("../img/brand/cartier-main.jpg") no-repeat center center / cover;
}
.brand-disc-block.hermes .r {
	background: url("../img/brand/hermes-main.jpg") no-repeat center center / cover;
}
.brand-disc-block.bvlgari .r {
	background: url("../img/brand/bvlgari-main.jpg") no-repeat center center / cover;
}


@media screen and (max-width: 768px){
	.brand-select-area{
		padding: 140px 0 50px;
	}
	/*特徴*/
    .overhaul-area {
        padding: 0 0 40px;
    }
	.overhaul-area::before{
		height: 250px;
	}
   /* .overhaul-area .bottom-bg {
        height: 100%;
        width: 97%;
        position: absolute;
        top: 200px;
        left: 0;
        background: #fff;
        z-index: 0;
    }*/
	.overhaul-area .inner > .cmn-title-area{
		padding: 20px 0 40px;
		margin: -30px 0 0;
		
	}
    .overhaul-area .catch-copy {
        font-size: 2.6rem;
        font-weight: bold;
        position: relative;
        z-index: 1;
        line-height: 1.5;
        padding: 0 0 30px 0;
    }

    .overhaul-area .comparison-list {
        gap: 15px;
        padding: 0 0 30px 0;
    }
    
    .overhaul-area .comparison-list li {
        width: 100%;
		display: block;
    }
    .overhaul-area .comparison-list li .accordion-icon{
		display: block;
	}
    .overhaul-area .comparison-list li .img-wrap {
        width: 43%;
    }
	.overhaul-area .comparison-list li .img-wrap img {
		width: 100%;
		height: 100px;
		object-fit: cover;
    }
    
    .overhaul-area .comparison-list li .catch,
	.overhaul-area .comparison-list li .catch.s{
        font-size: 1.8rem;
        background: #fff;
        padding: 12px 15px;
        margin-top: 0;
        margin-left: -20px;
        display: block;
        width: calc( 57% + 20px );
		min-height: inherit;
		line-height: 1.4;
    }
    
    .overhaul-area .comparison-list li .txt {
    }
    
    .overhaul-area .btn-more {
        text-align: left;
    }
	
	
	.overhaul-area .accordion-icon {
		display: inline-block;
		z-index: 2;
		right: -6px;
	}
	.overhaul-area .img-area {
		display: flex;
        flex-wrap: wrap;
        align-items: center;
		position: relative;
    }
	.overhaul-area .txt-area {
        display: none;
		padding: 15px 20px 15px 0;
    }
	
	.brand-disc-block{
		margin: 20px 0 0;
	}
	

}

/* -----------------------------------------------------------
    cmn-comparison-area
-------------------------------------------------------------- */
.cmn-repair-select-area{
	padding: 100px 0 80px;
}
.cmn-repair-select-area .repair-list:last-of-type{
	padding: 0;
}
.cmn-repair-select-area .repair-list li::before,
.cmn-repair-select-area .repair-list li::after{
	display: none;
}

.cmn-repair-select-area .repair-list li {
    /*display: flex;
    flex-wrap: wrap;
    gap: 15px 0;*/
    justify-content: center;
    padding: 0 0 0 0;
    position: relative;
}

.cmn-repair-select-area .repair-list li .name{
	font-size: 2.0rem;
    font-weight: bold;
    transition: all .4s;
    line-height: 1.6;
	padding: 10px 0;
	text-align: center;
}

.cmn-repair-select-area .repair-list li .txt {
    font-size: 1.4rem;
    line-height: 1.7;
}
.cmn-repair-select-area .repair-list li img{
	width: 100%;
}

@media screen and (max-width: 768px){
	.cmn-repair-select-area{
		padding: 40px 0 ;
	}
	.cmn-repair-select-area .repair-list li .name{
		font-size: 1.8rem;
	}
}

/* -----------------------------------------------------------
    flow-area
-------------------------------------------------------------- */
.flow-area{
	background: url("../img/bg-gray01.png") repeat left top;
	padding: 80px 0 60px;
	margin: 0 0 60px;
}

/* list */
.cmn-flow-area .tab_content .inner .flow-list{
	position: relative;
	display: block;
	padding: 0;
}
.flow-list::before{
	content: '';
	position: absolute;
	width: 1px;
	height: calc(100% - 350px);
	background: var(--red);
    top: 0;
	left: 70px;
	margin: 60px 0 0;
	z-index: 1;
}
.flow-list .list-item {
	width: 100%;
	background: #fff;
	padding: 60px 60px 60px 40px;
	margin: 0 0 50px;
}

.flow-list .txt-box {
	display: flex;
	align-items: center;
    position: relative;
}
.flow-list .txt-box.st {
	align-items: flex-start;
}

.flow-list .num {
	position: absolute;
	top: -30px;
	border-radius: 50%;
	width: 60px;
	height: 60px;
	text-align: center;
	background: var(--red);
	color: #fff;
	font-size: 1.2rem;
	font-weight: 600;
	
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 2;
}
.flow-list .num span {
	display: block;
	font-size: 2.4rem;
}

.flow-list .photo {
	width: 350px;
	margin: 0 0 0 100px;
}
.flow-list .photo img {
	width: 100%;
	height: 240px;
	object-fit: cover;
}
/*
.flow-list .photo.full img {
	height: 100%;
}
*/

.flow-list .txt-area {
	width: 600px;
	margin: 0 0 0 auto;
}
.flow-list .txt-area .section-title {
	font-size: 2.8rem;
}
.flow-list .txt-area .basic-txt {
	margin: 15px 0 0;
	line-height: 1.8;
}
.flow-list .txt-area .basic-txt .s {
	font-size: 1.4rem;
	display: block;
	margin: 10px 0 0;
	line-height: 1.6;
}
.flow-list .txt-area .time {
	color: var(--red);
	font-weight: 500;
	margin: 5px 0 10px;
	font-size: 1.4rem;
}

.flow-area .next-link{
	text-align: right;
}


/*フロー：コンタクト部*/
.flow-list .tel-area{
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 30px 0 0;
}
.flow-list .tel-area .tel{
	font-size: 3rem;
	font-weight: 500;
	font-family: 'Lato';
	display: inline-block;
	vertical-align: middle;
	position: relative;
	padding: 0 0 0 40px;
}
.flow-list .tel-area .tel::before {
    content: "";
    display: inline-block;
    background: url("../img/icon-tel.svg") center/cover, no-repeat;
    width: 30px;
    height: 22px;
    position: absolute;
    left: 0;
	top: 6px;
}
.flow-list .tel-area .tel span{
	display: block;
	font-size: 1.2rem;
	line-height: 1.5;
	font-weight: 500;
	margin: 5px 0 0;
}

.flow-list .foot-contact-area  {
	width: 300px;
}
.flow-list .foot-contact-area.bot  {
	margin: 30px 0 0;
	width: 340px;
}

.flow-list .foot-contact-area .btn-area li {
	width: 100%;
}
.flow-list .foot-contact-area .btn-area li a{
	padding: 15px 10px 15px 30px;
	min-height: inherit;
	width: 100%;
	height: 100%;
}
.flow-list .foot-contact-area .btn-area li a{
	padding: 20px 10px 20px 30px;
	min-height: inherit;
	width: 100%;
	height: 100%;
}
.flow-list .foot-contact-area .btn-area li.repair a{
	/*
	padding: 20px 10px 20px 45px;]
	*/
	padding: 20px 10px 20px 30px;
}

.flow-list .foot-contact-area .btn-area .line .txt-area {
	width: calc(100% - 60px);
}
.flow-list .foot-contact-area .btn-area li a::after {
	background: url("../img/icon-arrow-black.svg") center/cover, no-repeat;
}

/*サブフロー*/
.flow-list .sub-list {
}
.flow-list .sub-list li {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 30px 0 0;
}
.flow-list .sub-list li:first-child {
	margin: 20px 0 0;
}
.flow-list .sub-list li .thumb {
	width: 160px;
	order: 2;
}
.flow-list .sub-list li .thumb img {
	width: 100%;
}
.flow-list .sub-list li .basic-txt {
	width: calc(100% - 160px);
	margin: 0;
	padding: 0 30px 0 0;
	line-height: 1.8;
	order: 1;
}


@media screen and (max-width: 768px) {
	.works-area{
		padding: 40px 0;
	}
	.flow-area{
		padding: 40px 20px;
		margin: 0 0 30px;
		/*
		background-size: 100% auto;
		*/
		background: #F3F4F5;
	}

	.flow-area .title-area{
		padding: 0 0 50px;
	}
	.flow-area .title-area .section-catch{
		margin: 0 0 15px;
	}

	/* list */
	.flow-list{
	}
	.flow-list::before{
		display: none;
	}
	.flow-list .list-item {
		padding: 30px 20px;
		margin: 0 0 40px;
	}

	.flow-list .txt-box {
		display: block;
	}

	.flow-list .num {
		position: absolute;
		width: 50px;
		height: 50px;
		left: -35px;
		top: -50px;
		font-size: 1rem;
	}
	.flow-list .num span {
		font-size: 2rem;
	}

	.flow-list .photo {
		width: 100%;
		margin: 0 auto 20px;
		text-align: center;
	}
	.flow-list .photo img,
	.flow-list .photo.full img{
		width: 150px;
		height: 150px;
		border-radius: 50%;
		min-height: inherit;
	}

	.flow-list .txt-area {
		width: auto;
		margin: 0;
	}
	.flow-list .txt-area .section-title {
		font-size: 2.2rem;
		text-align: center;
	}
	.flow-list .txt-area .basic-txt {
	}
	.flow-list .txt-area .time {
		margin: 5px 0 10px;
		text-align: center;
	}
	
	.flow-area .next-link{
		text-align: center;
		padding: 0;
	}
	
	
	/*フロー：コンタクト部*/
	.flow-list .tel-area{
		padding: 0;
		width: 100%;
		margin: 20px 0 20px;
		display: block;
		text-align: center;
	}
	.flow-list .tel-area .tel{
		font-size: 3rem;
	}
	.flow-list .tel-area .tel::before{
	}
	
	.flow-list .foot-contact-area  {
		width: 100%;
		margin: 20px 0 0;
	}
	.flow-list .foot-contact-area.bot  {
		margin: 25px 0 10px;
		width: 100%;
	}
	
	.flow-list .foot-contact-area .btn-area li {
		width: 100%;
		text-align: left;
		max-width: 300px;
	}
	.flow-list .foot-contact-area .btn-area li a,
	.flow-list .foot-contact-area .btn-area li.repair a{
		padding: 15px 20px;
		display: flex;
		/*
		justify-content: center;
		*/
	}
	.flow-list .foot-contact-area .btn-area .txt-area {
		/*
		width: calc(100% - 70px)!important;
		*/
		width: auto!important;
	}
	
	/*サブフロー*/
	.flow-list .sub-list {
	}
	.flow-list .sub-list li,
	.flow-list .sub-list li:first-child{
		align-items: flex-start;
		margin: 20px 0 0;
	}
	.flow-list .sub-list li .thumb {
		width: 100px;
		padding: 8px 0 0;
		order: 1;
	}
	.flow-list .sub-list li .thumb img {
	}
	.flow-list .sub-list li .basic-txt {
		width: calc(100% - 100px);
		margin: 0;
		padding: 0 0 0 15px;
		line-height: 1.6;
		order: 2;
	}
	
	.cmn-flow-area .tab-active:checked+.tab-label+.tab_content{
		padding: 30px 20px 30px;
	}
	
	    
}



/* -----------------------------
	-area
-------------------------------- */
.campaign-area{
	padding: 95px 0 100px;
}

@media screen and (max-width: 768px){
	.campaign-area{
		padding: 40px 0 30px 0;
	}
}


/*    声リスト
-------------------------------------------------------------- */
.voice-area{
	z-index: 1;
}

.cmn-voice-list {
    padding: 0;
}
.cmn-voice-list li .basic-txt {
	/*overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 6;
	white-space: normal;*/
}

@media screen and (max-width: 768px){
	.voice-area{
		padding: 100px 0 30px;
	}
	.voice-area::before{
		top: 145px;
	}
	.cmn-voice-list {
		display: flex;
		width: 100%;
		padding: 0 0 20px 20px;
	}
	.cmn-voice-list li {
		width: 230px;
		margin: 0 20px 0 0;
        min-height: 220px;
	}
    
	.cmn-voice-list li .txt-area .info-area{
		white-space: normal;
		/*top: 25px;*/
		display: block;
	}
	.cmn-voice-list li .basic-txt {
		-webkit-line-clamp: 4;
		white-space: normal;
		width: 190px;
	}
	.cmn-voice-list li .name {
        display: none;
	}
    .cmn-voice-list li .date {
        display: none;
	}
	.cmn-voice-list li .txt-area .review-title {
        padding: 8px 0 0;
        -webkit-line-clamp: 2;
        white-space: normal;
        width: 190px;
        font-size: 1.6rem;
		overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
    }
	.cmn-voice-list li .txt-area .reply-area{
		position: relative;
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        white-space: normal;
	}
	.cmn-voice-list li .txt-area .reply-area {
        padding: 0px 0 0px 10px;
		margin: 5px 0 0 5px;
    }
	.cmn-voice-list li .txt-area .reply-area .manager-area .img-area{
		display: none;
	}
	
	.cmn-voice-list li .txt-area .reply-area .manager-area .manager-txt{
		font-size: 1.4rem;
		padding: 0;
	}

}

/*エリアページ追記*/
.area.cmn-voice-list .more-btn,
.area.cmn-voice-list .reply-toggle {
	display: none ;
}

	
	
.area.cmn-voice-list .read-more-4 {
	position: relative;
}

.area.cmn-voice-list .read-more-4 p {
	display: -webkit-box;
	position: relative;
	margin-bottom: 35px;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4; /* 開く前に見せたい行数を指定 */
}

.area.cmn-voice-list .read-more-4:has(:checked) p {
	display: block;
}

.area.cmn-voice-list .read-more-4 p::after {
	display: block;
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 25px;
	background: linear-gradient(180deg, hsla(0, 0%, 100%, 0) 0, hsla(0, 0%, 100%, .9) 50%, hsla(0, 0%, 100%, .9) 0, #fff);
	content: '';
}

.area.cmn-voice-list .read-more-4:has(:checked) p::after {
	content: none;
}

.area.cmn-voice-list .read-more-4 label {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 80px;
	width: 76px;
	gap: 0 4px;
	position: absolute;
	bottom: -40px;
	left: 50%;
	transform: translateX(-50%);
	/*padding: 4px 10px;*/
	border-radius: 1px;
	background-color: #F0353C;
	color: #fff;
	font-size: .8em;
}

.area.cmn-voice-list .read-more-4 label:hover {
	cursor: pointer;
}
.area.cmn-voice-list .read-more-4 label .close{
	display: none;
}
.area.cmn-voice-list .read-more-4:has(:checked) label .open{
	display: none;
}

.area.cmn-voice-list .read-more-4:has(:checked) label .close{
	display: block;
}

/*.area.cmn-voice-list .read-more-4 label::after {
	display: inline-block;
	width: 10px;
	height: 5px;
	background-color: #fff;
	clip-path: polygon(0 0, 100% 0, 50% 100%);
	content: '';
}

.area.cmn-voice-list .read-more-4 label:hover::after{
	background-color: #F0353C;
}*/


.area.cmn-voice-list .read-more-4 input {
	display: none;
}

@media screen and (max-width: 768px){
	
	.area.cmn-voice-list li{
		padding: 20px 20px 40px 20px;
		height: fit-content;
	}
	
	.area.cmn-voice-list li .txt-area .review-title{
		display: block;
		font-size: 1.4rem;
		min-height: 95px;
	}
	
		/* 口コミ本文：2.5行まで表示 */
	.area.cmn-voice-list .txt-area .basic-txt {        
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		max-height: 4.3em; 
	}

  	/* reply-area は最初は非表示 */
	.area.cmn-voice-list .txt-area .reply-area {
		display: none;
	}

	/* openクラスが付いたら全文＋返信を表示 */
	.area.cmn-voice-list .txt-area.open .basic-txt {
		display: block;
		max-height: none;
		-webkit-line-clamp: unset;
		position: relative;
	}
	.area.cmn-voice-list .txt-area .basic-txt::after {
		display: block;
		position: absolute;
		left: 0;
		bottom: 40px;
		width: 100%;
		height: 30px;
		background: linear-gradient(180deg, hsla(0, 0%, 100%, 0) 0, hsla(0, 0%, 100%, .9) 50%, hsla(0, 0%, 100%, .9) 0, #fff);
		content: '';        
		z-index: -1;
	}
	.area.cmn-voice-list .txt-area.open .basic-txt::after {
		display: none;
	}
	.area.cmn-voice-list .txt-area.open .reply-area {
		display: block;
	}

	.area.cmn-voice-list .more-btn {
		display: inline-block;
		cursor: pointer;
		font-size: 1.2rem; 
		color: #fff;
		padding: 5px 22px;
		background: #485156; 
		position: absolute;left: 50%;
		transform: translateX(-50%);
		-webkit-transform: translateX(-50%);
		-ms-transform: translateX(-50%);
	}
	.area.cmn-voice-list .read-more-4 label {
		bottom: -20px;
	}
	
}


/* -----------------------------
	shop-area
-------------------------------- */
.shop-area{
	margin: 100px 0 0;
}

.shop-area .shop-block{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
		
}

.shop-area .shop-block .box{
	margin: 50px 0 0;
	width: calc((100% / 2) - 30px);
}
.shop-area .shop-block .top-box{
	display: flex;
	justify-content: space-between;
}
.shop-area .shop-block .top-box img{
	width: 296px;
}

.shop-area .shop-block .box .shop-name{
	font-size: 2rem;
	font-weight: bold;
}
.shop-area .shop-block .box .adress{
    font-size: 1.4rem;
    line-height: 1.7;
	margin: 10px 0 0;
}
.shop-area .shop-block .box .tel{
	font-family: var(--lato);
	font-size: 2.6rem;
	letter-spacing: 0.02em;
	font-weight: 500;
	margin: 10px 0 0;
	    position: relative;
    padding-left: 40px;
}
.shop-area .shop-block .box .tel::before{
	content: "";
    display: inline-block;
    background: url(../img/icon-tel.svg) center / cover, no-repeat;
    width: 30px;
    height: 22px;
    position: absolute;
    top: 3px;
    left: 0;
}
.shop-area .shop-block .box .time{
    font-size: 1.4rem;
    line-height: 1.7;
	margin: 10px 0 0;
}
.shop-area .shop-block .box iframe{
	width: 100%;
	height: 180px;
	margin: 20px 0 0;
}

@media screen and (max-width: 768px){
	.shop-area{
		margin: 40px 0 0;
	}

	.shop-area .shop-block{
		display: block;	
	}

	.shop-area .shop-block .box{
		width: 100%;
		display: block;
		background: #f8f8f8;
		padding: 20px;
		margin: 20px 0 0;
	}
	.shop-area .shop-block .top-box{
		display: block;

	}
	.shop-area .shop-block .top-box img{
		height: 180px;
		object-fit: cover;
		width: 100%;
		margin: 10px 0 0;
	}

	.shop-area .shop-block .box .shop-name{
	}
	.shop-area .shop-block .box .adress{
	}
	.shop-area .shop-block .box .tel{
	}
	.shop-area .shop-block .box .tel::before{
	}
	.shop-area .shop-block .box .time{
	}
	.shop-area .shop-block .box iframe{
	}
}


/*    faq-area
-------------------------------------------------------------- */
.faq-area{
    margin: 100px 0;
}
.faq-area .title-block{
	border-right: none;
}
.faq-area .sec-ttl{
	text-align: center;
}
.faq-area .faq-box {
    margin: 60px auto 0;
}

.faq-area .faq-box {
    margin: 60px 0 0;
}

.faq-area .faq-box dl {
    border-bottom: 1px solid #ddd;
	background: rgba(255, 255, 255, 0.9);
}

.faq-area .faq-q {
    border-top: 1px solid #ddd;
    padding: 25px 35px 28px 60px;
    position: relative;
    cursor: pointer;
}

.faq-area .faq-q h3{
	font-size: 2rem;
	line-height: 1.5;
	font-weight: 500;
}

.faq-area .faq-a{
	display: none;
	line-height: 1.8;
	position: relative;
	padding: 0 35px 30px 60px;
}

.faq-area .faq-q::before,
.faq-area .faq-a::before{
	display: block;
	position: absolute;
	left: 20px;
	font-size: 2.4rem;
	color: var(--red);
	font-family: var(--josefin);
}
.faq-area .faq-q::before{
	content: 'Q';
	color: #333;
	top: 27px;
}
.faq-area .faq-a::before{
	content: 'A';
	top: -4px;
	left: 22px;
	color: #D1373C;
}

.faq-area .faq-box .accordion-icon {
	right: 20px;
}

.faq-area .faq-box .faq-a .basic-txt:nth-child(n+2){
	margin: 15px 0 0;
}

@media screen and (max-width: 768px){
	
	.faq-area {
		padding: 44px 0;
		background: #fff;
		margin: 0;
	}
	
	.faq-area .sec-ttl{
		text-align: left;
		margin: 0 0 20px;
	}
	
	.faq-area .section-title {
		font-size: 2.6rem;
	}

	.faq-area .section-catch {
		font-size: 2.2rem;
	}

	.faq-area .faq-area {
		padding: 50px 20px 60px;
	}
	.faq-area .faq-box{
		width: auto;
		margin: 20px 0 0;
	}
	.faq-area .faq-q{
		padding: 12px 40px 12px 60px;
	}
	.faq-area .faq-q h3{
		font-size: 1.6rem;
	}
	.faq-area .faq-a{
		padding: 0 40px 20px 30px;
	}
	.faq-area .faq-q::before,
	.faq-area .faq-a::before{
		left: 20px;
		font-size: 2rem;
	}
	.faq-area .faq-q::before{
		top: 13px;
	}
	.faq-area .faq-a::before{
		top: 0px;
		left: 2px;
	}
	.faq-area .accordion-icon span{
		background: #333;
		height: 1px;
	}
	
}



/* feature-area
--------------------------------------------------------------*/
.feature-area{
	margin: 0 0 100px;
}
.feature-area .txt-area{
	text-align: center;
}
.feature-area .detail-contents{
	margin: 30px 0 0;	
}
.feature-area .feature-title{
	background: #F0353C;
    color: #fff;
    font-size: 2.2rem !important;
    margin: 40px 0 30px 0;
    padding: 15px 30px;
    font-family: "Noto Sans JP", sans-serif !important;
	font-weight: bold;
    line-height: 1.5;
}

@media screen and (max-width: 768px){
	.feature-area{
		margin: 0 0 0;
	}
	.feature-area .txt-area{
	}
	.feature-area .detail-contents{
	}
	.feature-area .feature-title{
		margin: 30px 20px 20px;
        padding: 15px 15px;
        font-size: 1.8rem !important;
	}
}

/* correspondence-area
--------------------------------------------------------------*/
.correspondence-area .section-title .jp{
	font-size: 3rem;
	color: #F0353C;
}

@media screen and (max-width: 768px){
	.correspondence-area .txt-area{
		padding: 0 20px;
	}
	.correspondence-area .section-title .jp{
		font-size: 2.3rem;
	}
}

/* free-area
--------------------------------------------------------------*/
.free-area{
	margin: 100px 0 0;
}

@media screen and (max-width: 768px){
	.free-area{
	margin: 40px 0 0;
}
}

/* support-area
--------------------------------------------------------------*/
.support-area{
	background: url("../img/bg-blog-area.jpg") no-repeat center center / cover;

	margin: 100px 0 0;
	padding: 60px 0;
}
.support-area .txt-area{
	text-align: center;
}
.support-area .section-title{
	font-size: 3rem;
}
.city-block{
	padding: 40px 50px;
	background: #fff;
	margin: 20px 0 0;
}
.city-block .region{
	font-size: 2rem;
	font-weight: 600;
}
.city-list,
.station-list{
	display: flex;
	margin: 10px 0 0;
	flex-wrap: wrap;
}
.city-list li,
.station-list li{
	margin: 10px 10px 0 0;
}
.city-list li a,
.station-list li a{
	font-size: 1.6rem;
	padding: 10px 20px;
	border: solid 1px #ccc;
	display: block;
	color: #333;
	top: 0;
	position: relative;
	transition: .3s all;
	background: #fff;
}
.city-list li a:hover,
.station-list li a:hover{
	/*box-shadow: 0 0 0 #F0353C;
	top: 2px;*/
	color: #F0353C;
	border: solid 1px #F0353C;

}
.city-list li a::before,
.station-list li a::before{
	content: "\f105";
    font-family: 'FontAwesome';
    font-size: 1.5rem;
    font-weight: bold;
    color: #F0353C;
    position: absolute;
    top: 50%;
    right: 5px;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}

@media screen and (max-width: 768px){
	.support-area{
		margin: 0 0 0;
		padding: 30px 0;
	}
	.support-area .txt-area{
	}
	.support-area .section-title{
		font-size: 2.3rem;
	}
	.city-block{
		margin: 10px 0 0;
		padding: 15px;
	}
	.city-block .region{
		font-size: 1.8rem
		}
	.city-list,
	.station-list{
		margin: 10px 0 0;
	}
	.city-list li,
	.station-list li{
		margin: 5px 5px 0 0;
	}
	.city-list li a,
	.station-list li a{
		font-size: 1.5rem;
		padding: 10px 20px 10px 15px;
	}
}

/* -----------------------------
	フルリッチテキスト
-------------------------------- */

@media screen and (max-width: 768px) {

	.campaign-area .detail-contents{
		padding: 0 0px 30px !important;
	}
	
}

/* -----------------------------------------------------------
    contact
-------------------------------------------------------------- */
.middle-contact-area .top-box{
    width: calc(100% - 100px);
	position: relative;
	background: url("../img/bg-foot-contact-area.jpg") center/cover, no-repeat;
	color: #fff;
    padding: 80px 0 60px;
	margin: 100px auto 0;
}

.middle-contact-area .top-box .inner .flex-box {
	display: flex;
	align-items: center;
	justify-content: space-between;
    flex-wrap: wrap;
    gap: 30px;
    width: 760px;
}

.middle-contact-area .top-box .inner .flex-box > .txt-area {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    gap: 30px;
	margin: 0 0 10px;
}

.middle-contact-area .top-box .txt-area .catch-copy {
    font-size: 3.2rem;
    font-weight: bold;
    line-height: 1.5;
    width: 100%;
    display: block;
}
.middle-contact-area .top-box .txt-area .basic-txt {
	margin: -25px 0 0;
	font-weight: 500;
}

.middle-contact-area .top-box .txt-area .collection {
    border: 1px solid #fff;
    font-size: 1.5rem;
    font-weight: bold;
    padding: 5px 10px;
    line-height: 1.5;
    width: 220px;
    display: inline-block;
    text-align: center;
    
}

.middle-contact-area .top-box .txt-area .tel {
    font-size: 3.4rem;
    font-family: var(--lato);
    font-weight: 500;
    position: relative;
    padding: 0 0 0 50px;
}
.middle-contact-area .top-box .txt-area .tel a {
	color: #fff;
}

.middle-contact-area .top-box .txt-area .tel::before {
    content: "";
    display: inline-block;
    background: url("../img/icon-tel-white.svg") center/cover, no-repeat;
    width: 43px;
    height: 31px;
    position: absolute;
    top: 2px;
    left: 0;
}

.middle-contact-area .top-box .txt-area .reception {
    font-size: 1.1rem;
    font-weight: bold;
    line-height: 1.6;
}

.middle-contact-area .inner .box1{
	/* width: 279px; */
	margin: 0 45px 0 0;
}
.middle-contact-area .inner .box1 .logo{
	width: 310px;
}
.middle-contact-area .inner .box1 .logo img{
	width: 100%;
}
.middle-contact-area .inner .box1 .add{
	font-family: 'Noto Sans JP';
	font-size: 1.6rem;
	margin: 15px 0 0;
}
.middle-contact-area .inner .box1 .access-btn{
	border-radius: 30px;
	width: 130px;
	background-color: #fff;
	border: solid 1px #333;
	margin: 20px 0 0;
	box-shadow: 2px 3px 0px #c6c6c6;
	transition: .3s;
}
.middle-contact-area .inner .box1 .access-btn a{
	display: block;
	width: 130px;
	height: 36px;
	text-align: center;
	line-height: 36px;
	font-size: 1.5rem;
	font-weight: 500;
}
.middle-contact-area .inner .box1 .access-btn:hover{
	transform: translateY(2px);
	box-shadow: none;
}
.middle-contact-area .inner .box1 .access-btn:hover a{
	color: #333;
}
.middle-contact-area .inner .box2{
	display: flex;
}
.middle-contact-area .inner .box2 .con-box a::before{
	display: inline-block;
    content: "\f105";
    font-family: 'FontAwesome';
    padding: 0 8px 0 0;
    color: #F0353C;
}
.middle-contact-area .inner .box2 .con-box .catch{
	font-size: 2.2rem;
	line-height: 1.5;
	font-weight: bold;
	margin: 0 0 12px;
}
.middle-contact-area .inner .box2 .btn-box{
	width: 180px;
	height: 90px;
	text-align: center;
	background-color: #fff;
	border: solid 1px #333;
	box-shadow: 4px 4px 0px #c6c6c6;
	margin: 0 15px 0 0;
	transition: .3s;
}

.middle-contact-area .inner .box2 .btn-box a{
	display: block;
	padding: 15px 0;
}
.middle-contact-area .inner .box2 .btn-box:hover{
	transform: translateY(4px);
	box-shadow: none;
}
.middle-contact-area .inner .box2 .btn-box:hover a{
	color: #333;
}
.middle-contact-area .inner .box2 .btn-box .img img{
	width: 34px;
}
.middle-contact-area .inner .box2 .btn-box .txt{
	font-weight: 500;
	margin: 10px 0 0;
}
/* 左 */
.middle-contact-area .left-area{
	width: 620px;

}
/*ロゴ*/
.middle-contact-area .left-area .logo-area{
	display: flex;
	justify-content: center;
}
.middle-contact-area .left-area .logo-area a{
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}
.middle-contact-area .left-area .logo-area img{
	width: 300px;
	margin: 0 20px 0 0;
}
.middle-contact-area .left-area .logo-area .section-title{
	font-size: 2rem;
	text-align: left;
	font-weight: 400;
	color: #55423E;
}
.middle-contact-area .left-area .logo-area .section-title span{
	font-size: 1.4rem;
	display: block;
}

/*コンタクトテキスト*/
.middle-contact-area .left-area .rese-txt{
	text-align: center;
	border-top: 1px #707070 solid;
	border-bottom: 1px #707070 solid;
	padding: 15px 0;
	font-weight: bold;
}

/*電話*/
.middle-contact-area .left-area .tel-area{
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	margin: 25px 0;
}
.middle-contact-area .left-area .tel-area .txt{
	font-size: 1.8rem;
	font-weight: bold;
	margin: 0 30px 0 0;
}
.middle-contact-area .left-area .tel-area .num{
	font-size: 2.8rem;
}
.middle-contact-area .left-area .tel-area .num i{
	font-size: 2.6rem;
	margin: 0 8px 0 0;
}

/*ボタン*/
.middle-contact-area .btn-area{
	display: flex;
	justify-content: space-between;
    gap: 60px;
}
.middle-contact-area .btn-area li{
    /*width: 340px;*/
	box-shadow: 0px 10px 30px rgb(0 0 0 / 16%);
	transition: all .5s;
}
.middle-contact-area .btn-area li a{
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 20px;
	color: #fff;
	min-height: 100px;
	/* box-shadow: 3px 3px 10px rgba(0,0,0,.2); */
	transition: all .5s;
    width: 340px;
    gap: 15px;
}
.middle-contact-area .btn-area li a::after{
    content: "";
    display: inline-block;
    background: url("../img/icon-arrow-white.svg") center/cover, no-repeat;
    width: 41px;
    height: 7px;
    position: absolute;
    bottom: 30px;
    right: -20px;
    transition: all .4s;
}
.middle-contact-area .btn-area li:hover{
	box-shadow: none;
	transition: all .5s;
}
.middle-contact-area .btn-area li a:hover::after{
	right: -30px;
}
.middle-contact-area .btn-area .icon{
	/* width: 50px; */
	text-align: center;
}
.middle-contact-area .btn-area .icon img{
	width: 45px;
}
.middle-contact-area .btn-area .txt-area{
	/*width: calc(100% - 80px);*/
	font-size: 2.2rem;
	font-weight: bold;
	line-height: 1.4;
}
.middle-contact-area .btn-area .txt-area span{
	font-size: 1.5rem;
	display: block;
}

/*ボタン：web予約*/
.middle-contact-area .btn-area li.repair a{
	background: #007DD8;
	width: 360px;
}
.middle-contact-area .btn-area li.repair .icon img{
	width: 52px;
}
/*ボタン：web予約*/
.middle-contact-area .btn-area li.line{
	/*margin: 0 60px 0 0;*/
}
.middle-contact-area .btn-area li.line a{
	background: #37B750;
}
.middle-contact-area .left-area .btn-area li.line .icon img{
	width: 50px;
	margin: 0 0 0 -5px;
}

.middle-contact-area .left-area .next-link{
	text-align: right;
	margin: 15px 0 0;
	font-size: 1.5rem;
}


.middle-contact-area .top-box .contact-txt {
    display: block;
    width: 100%;
    text-align: right;
}

.middle-contact-area .top-box .contact-txt a {
    display: inline-block;
    color: #fff;
    position: relative;
    font-size: 1.5rem;
}

.middle-contact-area .top-box .contact-txt a::before {
    display: inline-block;
    content: "\f105";
    font-family: 'FontAwesome';
    padding: 0 8px 0 0;
    color: #F0353C;
}

@media screen and (max-width: 768px){


	/* -----------------------------------------------------------
		contact
	-------------------------------------------------------------- */
	.middle-contact-area .top-box {
        background: url("../img/bg-foot-contact-area-sp.jpg") repeat left top / 50% auto;
        padding: 230px 0 45px;
        color: #333;
		position: relative;
		margin: 0 auto 0;
		width: 100%;
    }
    
    .middle-contact-area .top-box::before {
		/*
        aspect-ratio: 25 / 12;
		*/
        content: "";
        display: block;
        width: 100%;
		height: 190px;
        position: absolute;
        background: url("../img/img-foot-contact-area-sp.jpg") no-repeat center center / cover;
        top: 0;
        left: 0;
    }
    
    .middle-contact-area .top-box .inner .flex-box {
        gap: 30px;
        width: 100%;
    }
    
    .middle-contact-area .top-box .inner .flex-box > .txt-area {
        justify-content: center;
        gap: 15px;
		margin: 0;
    }
    
    .middle-contact-area .top-box .txt-area .catch-copy {
        font-size: 1.8rem;
        text-align: center;
        padding: 0 0 10px 0;
    }
    .middle-contact-area .top-box .txt-area .basic-txt {
		margin: -15px 0 10px;
		font-size: 1.5rem;
		line-height: 1.7;
	}

    .middle-contact-area .top-box .txt-area .collection {
        border-color: var(--red);
        padding: 5px 10px;
        width: 260px;
        color: var(--red);
    }
    
    .middle-contact-area .top-box .txt-area .tel {
        font-size: 3.1rem;
    }
    .middle-contact-area .top-box .txt-area .tel a {
		color: #333;
	}
    .middle-contact-area .top-box .txt-area .tel::before {
        content: "";
        display: inline-block;
        background: url("../img/icon-tel.svg") center/cover, no-repeat;
        width: 38px;
        height: 28px;
        position: absolute;
        top: 2px;
        left: 0;
    }
    
    .middle-contact-area .top-box .txt-area .reception {
        font-size: 1.2rem;
        text-align: center;
    }
    
    .middle-contact-area .btn-area {
        flex-wrap: wrap;
        gap: 20px;
        justify-content: center;
    }
    
    .middle-contact-area .btn-area li a {
        min-height: 80px;
        width: 300px;
        gap: 15px;
		justify-content: flex-start;
    }
    
    .middle-contact-area .btn-area li a::after {
        background: url("../img/icon-arrow-black.svg") center/cover, no-repeat;
    }
	
	
	
	.middle-contact-area .btn-area .icon{
		width: 50px;
		text-align: center;
	}
	.middle-contact-area .btn-area .icon img{
		width: 40px;
	}
	.middle-contact-area .btn-area .txt-area{
		font-size: 2rem;
	}

	
	/*ボタン：web予約*/
	.middle-contact-area .btn-area li.repair a {
        width: 300px;
    }
	.middle-contact-area .btn-area li.repair .icon img{
		width: 44px;
	}
	
    
    .middle-contact-area .top-box .contact-txt {
        text-align: center;
    }
    
    .middle-contact-area .top-box .contact-txt a {
        color: #333;
    }
    
    .middle-contact-area .logo {
        width: 270px;
        margin: 0 auto;
    }
    
    .middle-contact-area .shop-box {
        background-color: #fff;
        padding: 40px 0 30px;
    }
    
    .middle-contact-area .shop-box .catch-copy {
        font-size: 1.8rem;
        line-height: 1.5;
        padding: 20px 0 0;
        text-align: center;
    }
    
    .middle-contact-area .shop-box .shop-list {
        gap: 20px 12px;
        padding: 20px 0 0;
        justify-content: space-between;
    }
    
    .middle-contact-area .shop-list li {
        width: 74px;
    }
    
    .middle-contact-area .shop-list li a {
        justify-content: center;
        width: 100%;
        height: 100%;
    }
    
    .middle-contact-area .shop-list li a .img-box {
        width: 74px;
        height: 74px;
        overflow: hidden;
        border-radius: 50%;
		margin: 0;
    }
    
    .middle-contact-area .shop-list li a .img-box img {
        object-fit: cover;
        object-position: center;
        width: 100%; /*auto は object-fit効かない*/
        height: 100%;
    }
	
	.middle-contact-area .shop-list li a .name {
		text-align: center;
	}
	
	.middle-contact-area .shop-list li a .access-txt {
		display: none;
    }   
    
}

/* -----------------------------------------------------------
	mail-in-repair-area
-------------------------------------------------------------- */

.mail-in-repair-area{
	padding: 50px 0 70px;
	background: url("../img/list-bg.png") no-repeat center top / contain,#f5f5f5;
	position: relative;
}

.mail-in-repair-area .title-area{
	display: block;
}
.mail-in-repair-area .title-area .catch-copy{
	font-size: 4rem;
    font-weight: bold;
    padding: 30px 0 20px;
    line-height: 1.6;
}
.mail-in-repair-area .title-area .catch-copy span{
	color: var(--red);
}

.mail-in-repair-area ul {
    display: flex;
    padding: 30px 0 30px;
}

.mail-in-repair-area ul li {
    width: calc((100% - 90px) / 4);
    margin: 0 30px 0 0;
	position: relative;
}

.mail-in-repair-area ul li:not(:last-child)::after {
    display: inline-block;
    position: absolute;
    content: "\f054";
	font-family: "FontAwesome";
    font-size: 1.5rem;
	font-weight: 500;
    right: -20px;
    top: 50%;
    transform: translateY(-50%);
	color: var(--red);
}

.mail-in-repair-area ul .thumb {
    width: 100%;
    justify-content: center;
    align-items: center;
    position: relative;
}

.mail-in-repair-area ul .thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition-duration: 0.3s;
}

.mail-in-repair-area ul .title {
    font-size: 1.6rem;
    line-height: 1.6;
	text-align: center;
	font-weight: bold;
    padding: 10px 0 0;
}

.mail-in-repair-area .txt-box {
	padding: 30px 30px;
    font-weight: bold;
    background: #fff;
    font-size: 2.2rem;
	border: solid 1px #ddd;
	text-align: center;
	letter-spacing: .05em;
}
.mail-in-repair-area .flow-btn{
	display: none;
}
.mail-in-repair-area .flow-btn a {
    width: 420px;
    display: flex;
    padding: 25px 20px;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, .1);
    position: relative;
    top: 0;
	background: url(../img/thumb-flow-web.png), #fff;
    background-position: 20px;
    background-repeat: no-repeat;
    background-size: 80px 80px;
	margin: 0 auto;
}

.mail-in-repair-area .flow-btn a:hover {
    top: -5px;
    color: var(--red);
}

.mail-in-repair-area .flow-btn a .btn-txt {
    font-size: 1.8rem;
    font-weight: bold;
    line-height: 1.6;
    padding-left: 100px;
    width: 100%;
    display: inline-block;
}

.mail-in-repair-area .flow-btn a .sub {
    display: block;
    font-size: 1.6rem;
}

.mail-in-repair-area .flow-btn a .red {
    color: var(--red);
    font-size: 2.2rem;
}

.mail-in-repair-area .flow-btn a::after {
    display: inline-block;
    content: "";
    background: url(../img/icon-arrow-red.svg) center / cover, no-repeat;
    width: 43px;
    height: 7px;
    position: absolute;
    right: -20px;
    bottom: 20px;
    transition: all .4s;
}

.mail-in-repair-area .flow-btn a:hover::after {
    right: -28px;
}

@media screen and (max-width: 768px){
	
	.mail-in-repair-area{
		padding: 40px 20px 40px;
	}

	.mail-in-repair-area .title-area{
		display: block;
	}
	.mail-in-repair-area .title-area .catch-copy{
		font-size: 2.2rem;
		padding: 0px 0 10px;
		text-align: center;
	}
	.mail-in-repair-area .title-area .txt-area{
		font-size: 1.5rem;
		line-height: 1.7;
	}

	.mail-in-repair-area ul {
		display: flex;
		padding: 20px 0 10px;
		gap: 8px;
	}

	.mail-in-repair-area ul li {
		width: calc((100% - 24px) / 4);
		margin: 0 0px 0 0;
	}

	.mail-in-repair-area ul li:not(:last-child)::after {
		display: none;
	}

	.mail-in-repair-area ul .thumb {
		width: 100%;
		justify-content: center;
		align-items: center;
		position: relative;
	}

	.mail-in-repair-area ul .thumb img {
		width: 100%;
		height: 100%;
		object-fit: contain;
		transition-duration: 0.3s;
	}

	.mail-in-repair-area ul .title {
		font-size: 1.2rem;
		line-height: 1.6;
		text-align: center;
		font-weight: 500;
		padding: 5px 0 0;
	}

	.mail-in-repair-area .txt-box {
		padding: 15px 20px;
		font-size: 1.6rem;
		line-height: 1.6;
		letter-spacing: .05em;
	}
	
	.mail-in-repair-area .flow-btn{
		width: 100%;
	}
	.mail-in-repair-area .flow-btn a {
		background-position: 15px;
        background-size: 54px 54px;
		width: 100%;
        padding: 18px 10px;
	}

	.mail-in-repair-area .flow-btn a .btn-txt {
		font-size: 1.5rem;
        padding-left: 75px;
	}

	.mail-in-repair-area .flow-btn a .sub {
		font-size: 1.4rem;
	}

	.mail-in-repair-area .flow-btn a .red {
		font-size: 1.8rem;
	}

	.mail-in-repair-area .flow-btn a::after {
		right: -15px;
        bottom: 10px;
	}
	
}