

/* -----------------------------------------------------------
    TOP
-------------------------------------------------------------- */
#main{
	margin: 0;
}
.header.active #top .mv-area::before{
	z-index: 1 !important;
}


/* -----------------------------------------------------------
    h1
-------------------------------------------------------------- */
.h1-area {
	position: absolute;
	top: auto;
	bottom: 15px;
	left: calc( ( 100% - 1200px ) / 2 );
	background: none;
    z-index: 4;
}
.h1-area h1{
	width: auto;
	/*
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	*/
	font-size: 1.2rem;
	color: #ccc;
    margin: 0 0 0 auto;
}

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

	/* h1 */
	.h1-area{
		position: absolute;
		left: 20px;
		background: none;
		z-index: 2;
		padding: 0 20px 0 0;
        margin: 0 auto;
		top: auto;
        bottom: 5px;
		width: 95%;
	}
	.h1-area h1{
		width: auto;
		font-size: 1rem;
		margin: 0 auto;
		padding: 0;
		font-weight: 500;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

}



/*    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 10px;
    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: 20px 0 0;
	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::before {
	content: "";
	display: inline-block;
	background: #fcf192;
	background: var(--red);
	background: #FFF701;
	width: 100%;
	height: 6px;
	bottom: -5px;
	position: absolute;
	z-index: -1;
}
*/

.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: 100%;
    height: 100vh;
    z-index: -1;
    opacity: 0;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    left: 0;
    top: 0;

    -webkit-animation: anime 18s 0s infinite;
    animation: anime 18s 0s infinite;
}
.mv-bgarea .mv-bg.slide1 {
	/*background-image: url(../img/top-mv.jpg);*/
	/*background-image: url("../img/gallery/1N4A6956.jpg");*/
	background-image: url("../image/img09.jpg");
}
.mv-bgarea .mv-bg.slide2 {
    background-image: url("../image/img01.jpg");
    animation-delay: 6s;
}
.mv-bgarea .mv-bg.slide3 {
    /*background-image: url("../img/gallery/1N4A7072.jpg");*/
	background-image: url("../image/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 }
}




/* 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){

	/*    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 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;
	}
	.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: 15px 0 0;
        display: block;
        width: 100%;
    }
    .mv-area .catch-copy .review {
        font-size: 2.8rem;
        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(../image/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;
	}
	.mv-bgarea .mv-bg.slide1 {
		background-image: url("../image/top-mv-sp01.jpg");
	}
	.mv-bgarea .mv-bg.slide2 {
		background-image: url("../image/top-mv-sp02.jpg");
	}
	.mv-bgarea .mv-bg.slide3 {
		background-image: url("../image/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(../image/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("../image/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(../image/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("../image/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;
	}
	
}


/*    .common-repair-area
-------------------------------------------------------------- */
.common-repair-area {
    padding: 25px 0;
    font-weight: 500;
    background: url("../image/bg-cmn-repair-area.jpg") repeat left top;
}


.common-repair-area .inner {
    display: flex;
    align-items: center;
    gap: 20px;
}

.common-repair-area .catch {
    font-size: 1.8rem;
    font-weight: 500;
    position: relative;
    padding: 0 0 0 40px;
    min-width: 200px;
}

.common-repair-area .catch::before {
    content: "";
    display: inline-block;
    background: url("../image/icon-watch.svg") center/cover, no-repeat;
    width: 33px;
    height: 29px;
    position: absolute;
    left: 0;
    top: -5px;
}

.common-repair-area .repair-list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.common-repair-area .repair-list li {
    display: inline-block;
    
}

.common-repair-area .repair-list li a {
    display: block;
    padding: 8px 15px;
    font-size: 1.4rem;
    border: 1px solid #CCCCCC;
    border-radius: 50px;
    box-shadow: 1px 3px 0 0 rgba(0,0,0,.1);
    background: #fff;
    transition: all .4s;
    top: 0;
    position: relative;
}

.common-repair-area .repair-list li a:hover {
    background: #333;
	border: 1px solid #333;
    color: #fff;
    box-shadow: none;
    top: 2px;
    
}

@media screen and (max-width: 768px) {
    .common-repair-area {
        padding: 20px 0 20px;
    }
    
    .common-repair-area .inner {
        flex-wrap: wrap;
    }
    
    .common-repair-area .catch {
        font-size: 1.7rem;
        padding: 0 0 0 60px;
        min-width: initial;
        display: block;
    }
    
    .common-repair-area .catch::before {
        left: 20px;
    }
    
    .common-repair-area .repair-list {
        flex-wrap: nowrap;
        gap: 8px;
        padding: 0 0 20px 20px;
    }
}

/*    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: 2.2rem;
    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("../image/bg-red.png") no-repeat center top / cover;
        padding: 200px 0 40px;
    }
    
    .point-area::before {
        content: "";
        display: inline-block;
        background: url("../image/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("../image/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;
    }
}


/*    flow-intro-area
-------------------------------------------------------------- */
.flow-intro-area {
    background: url("../image/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("../image/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("../image/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("../image/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("../image/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;
    }
}

/*    brand-area
-------------------------------------------------------------- */
.brand-area {
    padding: 0;
}

.brand-area .brand-slider {
    z-index: 1;
}

@media screen and (max-width: 768px) {
    .brand-area {
        position: relative;
        z-index: 0;
    }
}


/*    brand-select-area
-------------------------------------------------------------- */
.brand-select-area {
    background: url("../image/bg-brand-select-area.png");
    background-size: cover;
    background-repeat: no-repeat;
    padding: 280px 0 100px;
    position: relative;
    margin-top: -185px;
}

.brand-select-area::before {
    content: "WATCH HOSPITAL";
    display: inline-block;
    position: absolute;
    text-align: center;
    top: 125px;
    left: 0;
    right: 0;
    font-size: 15rem;
    font-family: var(--josefin);
    font-weight: bold;
    color: rgba( 255, 255, 255, .9 );
    z-index: 2;
    letter-spacing: .3rem;
    white-space: nowrap;
}

/*
.brand-select-area::after {
    background: #fff;
    height: 100%;
    width: 3.5%;
    position: absolute;
    top: 0;
    right: 0;
    content: "";
    display: inline-block;
}
*/

.brand-select-area .inner {
}

.brand-select-area .catch-area {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 20px 0;
    align-items: center;
	justify-content: space-between;
	/*
	padding: 0 0 60px;
	*/
}

.brand-select-area .catch-area .catch-title {
    font-size: 2.2rem;
    color: var(--red);
    font-weight: bold;
    display: block;
	margin: 0 0 15px;
	/*
    width: 100%;
	*/
}

.brand-select-area .catch-area .catch-copy {
    font-size: 4.0rem;
    font-weight: bold;
    line-height: 1.5;
    display: inline-block;
    flex-basis: 50%;
}

.brand-select-area .catch-area .basic-txt {
    flex-basis: 45%;
	font-size: 1.5rem;
	line-height: 1.9;
}

.brand-select-area .cmn-title-area {
    padding: 70px 0 0;
}


@media screen and (max-width: 768px) {
    .brand-select-area {
        padding: 140px 0 50px;
        margin-top: -100px;
        background: url("../image/bg-brand-select-area-sp.png") top/cover, no-repeat;
    }
    
    .brand-select-area::before {
        font-size: 4.2rem;
        letter-spacing: .1rem;
        top: 85px;
    }
    
    .brand-select-area::after {
        display: none;
    }
    
    .brand-select-area .catch-area {
        width: 100%;
		padding: 0;
    }
    
    .brand-select-area .catch-area .catch-title {
		font-size: 1.6rem;
		margin: 0 0 10px;
		font-weight: 500;
    }
    
    .brand-select-area .catch-area .catch-copy {
        font-size: 2rem;
        flex-basis: 100%;
        padding: 0 20px;
    }
    
    .brand-select-area .catch-area .basic-txt {
        display: none;
        /*flex-basis: 100%;*/
    }
    
    .brand-select-area .cmn-title-area {
        padding: 30px 20px 0;
    }
    
}



/*    symptom-select-area
-------------------------------------------------------------- */
.symptom-select-area {
    
}

.symptom-select-area .inner {
    position: relative;
}

.symptom-select-area .inner::after {
    content: "";
    display: inline-block;
    position: absolute;
    background: url("../image/illust-watch03.png") center/cover, no-repeat;
    opacity: .6;
    width: 349px;
    height: 121px;
    right: 0;
    top: -20px;
    z-index: -1;
}

.symptom-select-area .symptom-list-area {
    padding: 60px 0 100px;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 60px 30px;
}

.symptom-select-area .symptom-block {
    width: calc( (100% - 120px) / 5 );
}

.symptom-select-area .symptom-ttl {
    display: block;
    background: url("../image/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 .s {
    font-size: 1.4rem;
	margin: 0 0 0 5px;
}
.symptom-select-area .symptom-ttl::before {
    content: "";
    display: inline-block;
    position: absolute;
    width: 5px;
    height: 20px;
    left: 15px;
    top: 37%;
    background: var(--red);
	border-radius: 5px;
}
.symptom-select-area .symptom-ttl a {
    pointer-events: none;
}

.symptom-select-area .symptom-block .symptom-list {
    width: 100%;
}

.symptom-select-area .symptom-list li {
    width: 100%;
}

.symptom-select-area .symptom-list li a {
    padding: 20px 20px 20px 12px ;
    border-bottom: 1px solid #ccc;
    position: relative;
    line-height: 1.5;
    display: block;
}
.symptom-select-area .symptom-list li a::after {
    display: inline-block;
    content: "\f105";
    position: absolute;
    right: 0;
    top: 26%;
    color: var(--red);
    font-size: 2.0rem;
    font-weight: bold;
    font-family: var(--awesome); 
}

.symptom-select-area .accordion-icon {
    display: none;
}

@media screen and (max-width: 768px){
    
    .symptom-select-area {
        padding: 30px 0 30px;
        background: linear-gradient(90deg, #fff 0%, #fff 50%, #F5F6F7 50%, #F5F6F7 100%);
    }
    
    .symptom-select-area .inner::after {
        width: 43%;
        height: initial;
        aspect-ratio: 349 / 121;
        right: 10px;
        top: 0;
        z-index: 0;
        background-blend-mode: multiply;
        opacity: .5;
    }
    
    .symptom-select-area .symptom-list-area {
        margin: 30px 0;
        padding: 0;
        border: 1px solid #707070;
        gap: 0;
    }
    
    .symptom-select-area .symptom-block {
        width: 100%;
        border-bottom: 1px solid #707070;
    }
    
    .symptom-select-area .symptom-block:last-child {
        border-bottom: none;
    }
    
    .symptom-select-area .symptom-list {
        display: none;
    }
    
    .symptom-select-area .symptom-block .symptom-ttl {
        background: #fff;
		/*
        padding: 15px 20px 15px 25px;
		*/
		padding: 0;
        font-size: 1.6rem;
    }
	.symptom-select-area .symptom-ttl::before {
		display: none;
	}
    .symptom-select-area .symptom-ttl::after {
		display: inline-block;
		content: "\f105";
		position: absolute;
		
		right: 20px;
		top: 50%;
		transform: translateY(-50%);
		color: var(--red);
		font-size: 2.0rem;
		font-weight: bold;
		font-family: var(--awesome);
    }
    .symptom-select-area .symptom-ttl a {
		pointer-events: auto;
		display: block;
		padding: 15px 20px 15px 25px;
	}
	
    .symptom-select-area .symptom-list li a::after {
        right: 15px;
        top: 26%;
        font-size: 2.0rem;
    }
    
    .symptom-select-area .symptom-list li a {
        padding: 15px 25px;
        border-bottom: none;
        border-top: 1px solid #ddd;
        background: #fff;
    }
    
    .symptom-select-area .accordion-icon {
        display: initial;
    }

}


/*    cmn-comparison-area
-------------------------------------------------------------- */
.cmn-comparison-area .bottom-area .comparison-list li:nth-child(n+7) {
	display: none;
}
.cmn-comparison-area .bottom-area .btn-more {
	display: block;
}

/*    cmn-works-area
-------------------------------------------------------------- */
.cmn-works-area{
}

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


/*    voice-area
-------------------------------------------------------------- */
.voice-area {
    background: url("../image/bg-voice-area.jpg") center/cover, no-repeat;
    padding: 110px 0 100px;
    position: relative;
}

.voice-area::before {
    content: "";
    display: inline-block;
    position: absolute;
	/*
    top: -200px;
	*/
	top: -110px;
    left: 2%;
    background: url("../image/bg-voice01.jpg") center/cover, no-repeat;
    aspect-ratio: 14 / 15;
    width: 15%;
    min-width: 280px;
}
/*
.voice-area::after {
    content: "";
    display: inline-block;
    position: absolute;
    top: 370px;
    left: 0;
    background: url("../img/bg-voice02.jpg") center/cover, no-repeat;
    width: 12%;
    aspect-ratio: 58 / 75;
    min-width: 232px;
}
*/
.voice-area .inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    position: relative;
}

.voice-area .inner::before {
    content: "";
    display: inline-block;
    position: absolute;
    bottom: 0;
    left: -10%;
    background: url("../image/bg-voice03.jpg") center/cover, no-repeat;
    aspect-ratio: 32 / 17;
    width: 20%;
    min-width: 320px;
}

.voice-area .inner::after {
    content: "";
    display: inline-block;
    position: absolute;
    top: -170px;
    right: -10%;
    background: url("../image/bg-voice04.jpg") center/cover, no-repeat;
    aspect-ratio: 35 / 22;
    width: 22%;
    min-width: 350px;
    z-index: 0;
}

.voice-area .scroll-wrap {
    width: 760px;
    z-index: 1;
}

.voice-area .title-block {
    display: flex;
    flex-wrap: wrap;
    width: 380px;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 60px 0 0 70px;
    z-index: 1;
    position: relative;
}

.voice-area .section-title-en {
    font-family: var(--josefin);
    font-size: 4.0rem;
    font-weight: 600;
    position: relative;
    display: block;
    line-height: 1.3;
    width: 100%;
}

.voice-area .section-title {
    font-size: 1.8rem;
    font-weight: 500;
    color: var(--red);
    position: relative;
    padding: 0 0 0 20px;
    display: block;
    width: 100%;
}

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

.voice-area .catch-copy {
    font-weight: bold;
    padding: 40px 0 40px;
    display: flex;
    flex-wrap: wrap;
}

.voice-area .catch-copy span {
    display: inline-block;
}

.voice-area .catch-copy .sub {
    font-size: 2.0rem;
    line-height: 1.5;
}

.voice-area .catch-copy .share {
    color: var(--red);
    display: flex;
    align-items: center;
    margin: 20px 0 0;
    white-space: nowrap;
    position: relative;
    width: 100%;
}

.voice-area .catch-copy .share .no1 {
    font-size: 12rem;
    font-weight: normal;
    font-family: var(--gilda);
    line-height: .8;
    height: 100px;
}

.voice-area .catch-copy .share .vertical {
    font-size: 4.0rem;
    writing-mode: vertical-rl;
    letter-spacing: .7rem;
    line-height: 1;
    text-align-last: justify;
    height: 100px;
    margin: -8px 10px 0 0;
	font-weight: 500;
}

.voice-area .catch-copy .share .kome-mark {
    font-size: 1.4rem;
    color: var(--black);
    position: absolute;
    display: inline-block;
    top: -10px;
    right: 10px;
}

.voice-area .catch-copy .kome-txt {
    font-weight: normal;
    font-size: 1.2rem;
    padding: 10px 0 0;
}

.voice-area .catch-copy .review {
    font-size: 3.4rem;
    line-height: 1.3;
    padding: 10px 0 0;
}

.voice-area .catch-copy .review .review-num {
    font-size: 5.2rem;
    font-family: var(--lato);
    line-height: 1.3;
}

@media screen and (max-width: 768px){
    
    .voice-area {
        padding: 55px 0 60px;
    }
    
    .voice-area::before {
        top: 65px;
        left: initial;
        right: 0;
        width: 30%;
        min-width: 130px;
        background: url("../image/bg-voice01-sp.jpg") center/cover, no-repeat;
        aspect-ratio: 1 / 1;
    }
    
    .voice-area::after {
        display: none;
    }
    
    .voice-area .inner::before {
        bottom: initial;
        top: -100px;
        left: 0;
        width: 50%;
        min-width: 190px;
        background: url("../image/bg-voice03-sp.jpg") center/cover, no-repeat;
        aspect-ratio: 19 / 12;
    }
    
    .voice-area .inner::after {
        top: -130px;
        right: 15px;
        aspect-ratio: 5 / 4;
        width: 40%;
        min-width: 150px;
        background: url("../image/bg-voice04-sp.jpg") center/cover, no-repeat;
    }
    
    .voice-area .title-block {
        width: 100%;
        padding: 0 0 0 20px;
    }
    
    .voice-area .scroll-wrap {
        width: initial;
        margin: 0 0 30px 0;
    }
    
    .voice-area .catch-copy {
        font-weight: bold;
        padding: 30px 0;
        display: flex;
        flex-wrap: wrap;
    }

    .voice-area .catch-copy .sub {
        font-size: 1.6rem;
    }
    
    .voice-area .catch-copy .share {
        justify-content: flex-start;
        width: initial;
    }

    .voice-area .catch-copy .share .no1 {
        font-size: 8.6rem;
        height: auto;
    }

    .voice-area .catch-copy .share .vertical {
        font-size: 2.7rem;
        margin: 0 10px 0 0;
        height: 70px;
    }

    .voice-area .catch-copy .share .kome-mark {
        font-size: 1.3rem;
		right: auto;
		left: 205px;
    }

    .voice-area .catch-copy .kome-txt {
        font-size: 1.2rem;
        padding: 5px 0 0;
        display: block;
        width: 100%;
    }

    .voice-area .catch-copy .review {
        font-size: 2.2rem;
        padding: 15px 0 0;
    }

    .voice-area .catch-copy .review .review-num {
        font-size: 3.0rem;
    }
    
}

/*    声リスト
-------------------------------------------------------------- */
.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){

	.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;
	}

}

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

@media screen and (max-width: 768px){
    .shop-list-area {
        padding: 45px 0 60px;
    }
}




/*    link-area
-------------------------------------------------------------- */

.link-area .inner{
	/* width: calc(100% - 40px);
	padding: 30px 0;
	margin: 0 auto; */
}
.link-area a{
	color: #fff;
}
.link-area .link-list{
	display: flex;
	justify-content: space-between;
}
.link-area .link-list .link-item{
	width: calc(100% / 3);
	background-size: cover;
	background-repeat: no-repeat;
	position: relative;
}
.link-area .link-list .link-item::after{
	content: "";
	background: url("../image/arrow-icon-wh.png") no-repeat center center;
    position: absolute;
	background-size: cover;
	bottom: 20px;
    right: 20px;
    width: 42px;
    height: 7px;
	display: flex;
    transition: all 0.3s ease-in-out;
}
.link-area .link-list .link-item a{
	width: 100%;
	height: 100%;
	display: block;
	/* padding: 140px 30px 40px; */
	font-weight: bold;
	overflow: hidden;
	position: relative;
}
.link-area .link-list .link-item .thumb img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition-duration: 0.3s;
}
.link-area .link-list .link-item:hover::after{
	background: url("../image/arrow-icon.png") no-repeat center center;
	background-size: cover;
	right: 15px;
	transition: all 0.3s ease-in-out;
}
.link-area .link-list .link-item:hover .thumb img{
	transform: scale(1.1);
	transition-duration: 0.3s;
}
.link-area .link-list .link-item .txt-box{
	position: absolute;
	z-index: 1;
	bottom: 20px;
    left: 30px;
}
.link-area .link-list .link-item .txt-box .link-ttl{
	font-size: 3.6rem;
	font-weight: bold;
	margin: 0 0 10px 0;
	transition: all 0.3s ease-in-out;
}
.link-area .link-list .link-item .txt-box .link-catch{
	font-size: 2.2rem;
	font-weight: bold;
	line-height: 1.5;
	transition: all 0.3s ease-in-out;
}
.link-area .link-list .link-item .link-ttl-en{
	position: absolute;
	transform: rotate(90deg) translateX(-1em);
    transform-origin: left bottom;
	top: 20px;
	left: 10px;
	z-index: 1;
	font-family: 'Poppins', sans-serif;
	font-size: 1.6rem;
	font-weight: bold;
	color: #F0353C;
	transition: all 0.3s ease-in-out;
}
.link-area .link-list .link-item:hover .link-ttl,
.link-area .link-list .link-item:hover .link-catch{
	color: #F0353C;
	transition: all 0.3s ease-in-out;
}
.link-area .link-list .link-item:hover .link-ttl-en{
	top: 10px;
	color: #fff;
}



@media screen and (max-width: 768px){
	.link-area {
		padding: 70px 0;
		background: linear-gradient(90deg, #fff 0%, #fff 50%, #EAEAEA 50%, #EAEAEA 100%);
		background-color: #111;
	}
	/* .link-area .bg-gray{
		width: calc(100% - 70px);
		margin: 0;
	} */
	.link-area .link-list{
		display: block;
		padding: 0 0 0 20px;
	}
	.link-area .link-list .link-item{
		width: 100%;
		margin: 0 0 20px;
		box-shadow: 5px 5px 10px rgba(0, 0, 0, .16)
	}
	.link-area .link-list .link-item:last-of-type{
		margin: 0;
	}
	.link-area .link-list .link-item a{
		color: #333;
		display: flex;
		justify-content: space-between;
	}
	.link-area .link-list .link-item .link-ttl-en{
		color: #F0353C;
		font-size: 1.2rem;
		z-index: 2;
		top: 30px;
		left: -5px;
	}
	.link-area .link-list .link-item .txt-box{
		width: calc(100% - 140px);
		/* display: flex; */
		position: unset;
		background-color: #fff;
		padding: 30px 10px 30px 20px;
		/* flex-wrap: wrap;
		align-items: center; */
	}
	.link-area .link-list .link-item .txt-box .link-ttl{
		font-size: 2.2rem;
	}
	.link-area .link-list .link-item .txt-box .link-catch{
		font-size: 1.5rem;
	}
	.link-area .link-list .link-item .thumb{
		width: 140px;
		height: 130px;
	}
}
/*    corp-area
-------------------------------------------------------------- */
.corp-area{
	padding: 85px 0;
	width: 100%;
	margin: 0  0 0 auto;
	position: relative;
    margin: 100px 0 100px 0;
}

.corp-area::after {
    content: "";
    display: inline-block;
    background: url("../image/img-corp-area-pc.png");
    background-repeat: no-repeat;
    position: absolute;
    width: 890px;
    height: 380px;
    top: 30px;
    right: 30px;
    z-index: -1;
}

.corp-area .bg {
    display: block;
    background: url(../image/bg-corp-area.png);
    background-repeat: no-repeat;
    background-size: cover;
    width: 96.5%;
    height: 100%;
    right: 0;
    top: 0;
    position: absolute;
    z-index: -2;
}

@media screen and (max-width: 1400px){
    .corp-area .bg {
        width: 100%;
    }
}

.corp-area .inner {
    
}

.corp-area .inner .title-area {
    flex-wrap: wrap;
    gap: 30px 0;
}

.corp-area .inner .title-area .title-block {
    display: block;
    width: 100%;
    border-right: none;
}

.corp-area .inner .title-area .section-title-en {
    font-size: 4.0rem;
    font-weight: bold;
    color: #fff;
    padding: 0;
    margin: 0;
    letter-spacing: 0;
    text-shadow: 0 0 10px rgba(0,0,0,.3);
}

.corp-area .inner .title-area .section-title-en::before {
    display: none;
}

.corp-area .inner .title-area .section-title {
    font-size: 1.8rem;
    font-weight: bold;
    color: #fff;
    position: relative;
    padding-left: 25px;
}

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

.corp-area .inner .title-area .catch-copy {
    color: #fff;
    font-size: 2.6rem;
    font-weight: bold;
    line-height: 1.5;
    width: 100%;
    text-shadow: 0 0 10px rgba(0,0,0,.3);
    padding: 0 0 10px 0;
}


@media screen and (max-width: 768px){
	.corp-area{
		padding: 200px 0 55px;
		width: 100%;
        margin: 0 0 50px;
		display: block;
	}
	.corp-area::after{
		background: url("../image/img-corp-area-sp.png");
        background-size: cover;
        width: 100%;
        max-height: 200px;
        aspect-ratio: 750 / 401;
        height: initial;
        top: 10px;
        right: 0;
	}
    
    .corp-area .bg {
        background: url("../image/bg-corp-area-sp.png") left/cover, no-repeat;
    }

	.corp-area .inner .title-area .section-title-en {
		font-size: 3.0rem;
	}
    
    .corp-area .inner .title-area .catch-copy {
        font-size: 2.2rem;
        padding: 0;
    }
    
    .corp-area .inner .title-area .btn-more {
        text-align: left;
    }
    
	.corp-area .img-slick{
		height: 460px;
	}
	.corp-area .mv-block {
		width: 100%;
		height: 460px;
		background-position: center;
		background-size: cover;
	}
	.corp-area .mv-block.mv01 {
		background-image: url(../image/top-corp-bg-sp.jpg);
	}
	.corp-area .mv-block.mv02 {
		background-image: url(../image/top-corp-bg01-sp.png);
		animation-delay: 6s;
	}
	.corp-area .inner .content-box{
		padding: 0 20px;
		right: 0px;
		left: 0px;
		top: 116px;
		margin: 0;
	}
	.corp-area .inner .content-box .sec-ttl-jp{
		font-size: 2.6rem;
		margin: 20px 0 30px 20px;
	}
	.corp-area .inner .content-box .sec-catch{
		font-size: 2.0rem;
		margin: 20px 0 30px 20px;
	}
	.corp-area .inner .content-box .btn-box{
		display: block;
	}
	.corp-area .inner .content-box .btn-box .hotel a{
		width: 295px;
		text-align: left;
		padding: 0 0 0 28px;
		margin: 0 auto 12px;
	}
	.corp-area .inner .content-box .btn-box .airline a{
		width: 295px;
		text-align: left;
		padding: 0 0 0 28px;
	}
}

/*    news-area
-------------------------------------------------------------- */
.news-area {
	margin: -20px 0 0;
	padding: 0 0 80px;
	position: relative;
}
.news-area .inner .fs-box{
	display: flex;
	justify-content: space-between;
}
.news-area .title-area {
    flex-wrap: wrap;
    width: 250px;
    align-items: flex-start;
    gap: 20px 50px;
}

.news-area .title-area .txt-block {
    display: block;
    width: 100%;
}

.news-area .title-area .title-block {
    padding: 0;
    border-right: none;
}

.news-area .title-area .section-title {
    font-size: 2.2rem;
}

.news-area .title-area .section-title-en {
    font-size: 1.6rem;
}

.news-area .news-more{
}
.news-area .news-more a{
	font-size: 1.5rem;
}
.news-area .news-more a::before{
	display: inline-block;
	content: "\f105";
	font-family: 'FontAwesome';
	padding: 0 8px 0 0;
	color: #F0353C;
}

.news-area .news-list {
	/*
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	*/
	width: calc(100% - 290px);
}
.news-area .news-list li{
	display: flex;
	align-items: center;
	margin: 20px 0 0;
}
.news-area .news-list li:first-child{
	margin: 0;
}
.news-area .news-list li:nth-of-type(n+4){
	display: none;
}
.news-area .date{
	font-family: 'Lato';
	display: inline-block;
	font-size: 1.6rem;
	line-height: 1;
	margin: 3px 25px 0 0;
	width: 100px;
	letter-spacing: .05em;
}
.news-area .cate{
	display: inline-block;
	font-size: 1.3rem;
	line-height: 1;
	text-align: center;
	padding: 5px;
	margin: 2px 20px 0 0;
	border: 1px #707070 solid;
	width: 110px;
}
.news-area .title {
	line-height: 1.5;
	font-weight: 500;
}
.news-area .news-list a{
	display: block;
	/*
	overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
	*/
}

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

    .news-area{
		display: block;
		margin: 0;
		padding: 5px 20px 40px;
    }
	.news-area .inner .fs-box{
		display: block;
	}
    
    .news-area .title-area .section-title {
        font-size: 2.0rem;
    }
    
    .news-area .title-area .title-block {
        padding: 0 0 30px;
    }
    
	.news-area .news-list{
		width: auto;
	}
	.news-area .news-list li{
		display: block;
		margin: 20px 0 0;
	}
	.news-area .news-list a{
		width: 100%;

		overflow: inherit;
		text-overflow: inherit;
		white-space: inherit;
	}
	.news-area .date{
		margin: 0 8px 0 0;
		width: auto;
	}
	.news-area .cate{
		padding: 3px 10px;
		margin: 0 5px 0 0;
		width: auto;
	}
	.news-area .title {
		width: 100%;
		line-height: 1.6;
		margin: 6px 0 0;
	}
	.news-area .news-more{
		text-align: right;
		margin: 0 0 0 auto;
		position: absolute;
		top: 30px;
		right: 20px;
	}

}


/*    blog-area
-------------------------------------------------------------- */
.blog-area {
	background: url("../image/bg-blog-area.jpg") center/cover, no-repeat;
	padding: 100px 0;
	position: relative;
}

.blog-area::after {
    content: "";
    background: url("../image/illust-watch05.png") center/cover, no-repeat;
    display: inline-block;
    width: 79px;
    height: 158px;
    position: absolute;
    right: calc( ( 100% - 1200px ) / 2 - 80px );
    top: -20px;
}




.blog-area .inner {
    position: relative;
}

.blog-area .inner::before {
    content: "";
    background: url("../image/illust-watch04.png") center/cover, no-repeat;
    display: inline-block;
    width: 93px;
    height: 172px;
    position: absolute;
    right: 25px;
    top: -150px;
}

.blog-area .inner::after {
    content: "";
    background: url("../image/illust-watch06.png") center/cover, no-repeat;
    display: inline-block;
    width: 106px;
    height: 175px;
    position: absolute;
    left: 153px;
    bottom: -130px;
}

.blog-area .inner .fs-box{
	display: flex;
	justify-content: space-between;
}

.blog-area .title-area {
    flex-wrap: wrap;
    width: 260px;
}

.blog-area .title-area .txt-block {
    display: block;
    width: 100%;
}

.blog-area .title-area .title-block {
    padding: 0;
    border-right: none;
}

.blog-area .title-area .txt-block .section-txt {
    font-size: 2.2rem;
    display: block;
}

.blog-area .news-more{
}
.blog-area .news-more a{
	font-size: 1.5rem;
}
.blog-area .news-more a::before{
	display: inline-block;
	content: "\f105";
	font-family: 'FontAwesome';
	padding: 0 8px 0 0;
	color: #F0353C;
}


.blog-area ul.blog-box {
	/*
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	width: 900px;
	*/
	display: flex;
	width: calc(100% - 290px);
}
.blog-area ul li {
	width: calc((100% - 100px) / 3);
	margin: 0 50px 0 0;
}
.blog-area ul li:nth-child(3n){
    margin: 0 0 0 0;
}
.blog-area ul li:nth-of-type(n+4){
	display: none;
}

.blog-area ul li a {
	display: block;
}
.blog-area ul li a:hover{
	opacity: 1;
}

.blog-area .thumb{
    display: flex;
	width: 100%;
    height: 160px;
    justify-content: center;
    align-items: center;
    margin: 0 0 15px;
    overflow: hidden;
    background: #f0f0f0;
	position: relative;
}
.blog-area .thumb img{
    width: 100%;
	height: 100%;
	object-fit: cover;
	transition-duration: 0.3s;
}
.blog-area a:hover .thumb img{
	transform: scale(1.1);
	transition-duration: 0.3s;
}

.blog-area .txt_area{
}

.blog-area .txt_area .date{
    flex-shrink: 0;
    display: inline-block;
	font-size: 1.4rem;
	line-height: 1;
    margin: 0;
	padding: 2px 0 0;
	float: left;
	color: #55423E;
}
.blog-area .txt_area .title{
	font-size: 1.6rem;
	line-height: 1.6;
	clear: both;
	padding: 5px 0 0;
}
.blog-area .txt_area .cate{
	float: right;
    display: inline-block;
	font-size: 1.1rem;
    line-height: 1;
    margin: 0 0 0 5px;
    padding: 4px 5px 3px;
    text-align: center;
    vertical-align: middle;
    min-width: 90px;
	color: #4C4948;
	border: 1px #7C7C84 solid;
}


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

    .blog-area{
		display: block;
		padding: 55px 20px 50px;
    }
    
    .blog-area::after {
        width: 50px;
        height: 101px;
        right: 15px;
        top: 15px;
    }
    
    .blog-area .title-area {
        width: 100%;
        padding: 0 0 30px 0;
    }
    
    .blog-area .title-area .txt-block .section-txt {
        font-size: 2.0rem;
    }
    
    .blog-area .inner::before {
        width: 59px;
        height: 110px;
        right: 60px;
        top: -80px;
    }
    
    .blog-area .inner::after {
        display: none;
    }
	
	.blog-area .inner .fs-box{
		display: block;
		position: relative;
	}
	.blog-area .news-more {
		text-align: right;
		position: absolute;
		top: 60px;
		right: 0px;
	}
	.blog-area ul.blog-box {
		display: block;
		margin:  0;
		width: auto;
        padding: 0 0 30px 0;
	}
    
    .blog-area .btn-more {
        text-align: left;
    }

	.blog-area ul li {
		width: 100%;
		margin: 0;
	}
    .blog-area ul li:nth-child(3n){
        margin: 0;
    }
	.blog-area ul li:nth-child(n+2){
		margin: 10px 0 0;
	}
	.blog-area ul li a {
		display: flex;
        width: 100%;
        align-items: center;
		padding: 0 0 10px;
		position: relative;
		border-bottom: solid 1px #C2C2C2;
	}
	.blog-area ul li a:after {
		display: block;
		content: "\f105";
		font-family: "FontAwesome";
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		-webkit-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		right: 0;
		transition: all .5s;
		color: #333;
		font-size: 2.2rem;
		font-weight: 500;
		/*
		position: absolute;
		background: url("../img/arrow.png") no-repeat center center / contain;
		content: "";
		width: 13px;
		height: 13px;
		top: 50%;
		transform: translateY(-50%);
		-webkit-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		right: 10px;
		transition: all 0.3s ease-in-out;
		*/
	}

	.blog-area .thumb{
		width: 100px;
        height: 80px;
        margin: 0 15px 0 0;
		align-items: normal;
	}
    .blog-area a:hover .thumb img{
		transform: scale(1.0);
	}
	.blog-area .thumb img{
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	
	.blog-area .txt_area{
        flex: 1;
        padding: 0 10px 0 0;
	}

	.blog-area .txt_area .cate{
		font-size: 1.2rem;
		float: none;
		min-width: inherit;
		padding: 4px 8px 3px;
	}

    .blog-area .txt_area .date{
        font-size: 1.4rem;
		margin: 0 5px 0 0;
    }

    .blog-area .txt_area .title{
        padding: 5px 0 0;
		font-size: 1.6rem;
    }

}
