@charset "UTF-8";
/* service yumail CSS */
.sec-yumail {
    container-type: inline-size;
    container-name: yumail;
}


/* 共通 */
.yumail-ttl{
	border-left: 6px solid #DC1400;
    padding-left: 8px;
    line-height: 1.3;
}

/* catch */
@container yumail (max-width:650px){
	.pc-only-yc {
		display: none;
	}
}

/* panel */
.yumail-panel-area{
	gap: 30px;
}
.yumail-panel{
	width: calc(50% - 15px);
	border-radius: 10px;
}
.yumail-panel.is-possible{
	border: 3px solid #FFE1E8;
}
.yumail-panel.is-impossible{
	border: 3px solid #D2E8F7;
}

.f-blu-yumail{
	color: #41489E;
}

.yumail-panel-ttl{
	padding: 5px 10px 5px max(100px , 30%);
	position: relative;
}
.is-possible .yumail-panel-ttl{
	background-color: #FFE1E8;
}
.is-impossible .yumail-panel-ttl{
	background-color: #D2E8F7;
}

.panel-icon{
	width: 65px;
	height: 65px;
	position: absolute;
	bottom: 0;
	left: 30px;
}
.info-list{
	padding: 20px 30px;
}
.info-list>li{
	gap: 10px;
	align-items: center;
	width: fit-content;
	padding-bottom: 20px;
}
.info-list>li:last-of-type{
	padding-bottom: 0;
}
.info-list .item-img{
	width: 80px;
	height: 80px;
}

.info-list .item-txt{
	flex: 1;
}

@container yumail (max-width:800px){
	.yumail-panel-area {
		gap: 20px;
	}
	.yumail-panel {
		width: calc(50% - 10px);
	}

	.yumail-panel-ttl {
		padding: 5px 10px 10px max(100px, 40%);
	}
	.panel-ttl-txt {
		line-height: 1.2;
	}
	.panel-ttl-block {
		display: block;
	}

	.info-list {
		padding: 15px;
	}
}

@container yumail (max-width:600px){
	.yumail-panel {
		width: 100%;
	}
	.yumail-panel-ttl {
        padding: 5px 10px 10px max(100px, 25%);
    }
	.panel-ttl-block {
		display: inline;
	}
	.panel-icon {
		left: 20px;
	}
}

@container yumail (max-width:350px){
	.panel-ttl-block {
		display: block;
	}
}

/* merit */
.merit-img-area{
	gap: 30px;
}
.merit-img{
	width: calc(50% - 15px);
}

@container yumail (max-width:500px){
	.merit-img-area {
		gap: 20px;
		max-width: 350px;
		margin: 0 auto;
	}
	.merit-img {
		width: 100%;
	}
}

/* reduce */
.reduce-ttl{
	background-color: #DC1400;
	padding: 15px 200px 10px 30px;
	position: relative;
}
.reduce-ttl-sub{
	width: 110px;
	height: 55px;
	position: absolute;
	top: -35px;
	left: 0;
}

.has-dot {
    display: inline-flex;
}
.has-dot > span {
    position: relative;
}
.has-dot > span::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -0.1em;
    transform: translateX(-50%);
    width: 0.25em;
    height: 0.25em;
    border-radius: 50%;
    background: currentColor;
}

.reduce-img{
	width: 180px;
	position: absolute;
	bottom: 0;
	right: 20px;
}

.f-blu-dm{
	color: #3c8ff9;
}
.btn-contact.btn-dm{
	background-color: #3c8ff9;
	box-shadow: 0 3px 0 #2468c0;
}

@media (min-width:768px) {
	.btn-contact.btn-dm:hover {
        transform: translateY(3px);
        box-shadow: none;
    }
}

@container yumail (max-width:560px){
	.reduce-img {
		width: 110px;
		right: 5px;
	}
	.reduce-ttl {
		padding: 15px 100px 10px 20px;
	}
	.reduce-ttl-sub {
		width: 100px;
		height: 50px;
		top: -30px;
	}
}

@container yumail (max-width:400px){
    .reduce-ttl {
        padding: 10px 10px 100px 10px;
        text-align: center;
    }
	.reduce-ttl-sub {
        width: 90px;
        height: 45px;
		left: 50%;
        transform: translateX(calc(-50% + -15px));
    }
	.has-dot > span::before {
		top: -0.01em;
	}
	.reduce-img {
        width: 150px;
        right: 50%;
        transform: translateX(50%);
    }
}