@charset "utf-8";

/*============================
オプションパネル
============================*/

.option_list {
    display: flex;
    flex-wrap: wrap;
	justify-content: center;
}

.option_list li {
    background: #2bb4a2;
    border-radius: 10px;
    color: #fff;
    width: 20%;
    padding: 1em;
    margin: 1.5em .7em 0;
}

.option_list li img {
    width: 110px;
    margin-bottom: 1em;
}

.option_list li p {
    text-align: center;
    font-weight: 600;
    line-height: 1.5;
}

.option_list li p span {
    display: block;
    margin-top: 0.5em;
    font-size: 1.3rem;
    color: #ffff00;
}

/*============================
オプションの詳細
============================*/

.option_detail li {
    text-align: left;
    margin-top: 1.5em;
    border-top: 1px solid #dbdbdb;
    padding-top: 1.5em;
}

.option_detail li:first-child {
    margin-top: 0;
    border: none;
	padding-top: 0;
}

.option_detail li p.title {
    display: flex;
    align-items: center;
    font-size: 2rem;
    font-weight: 600;
    color: #1a9f8d;
    justify-content: space-between;
}

.option_detail li p.title span {
    font-size: 1.6rem;
    color: #56473a;
}

.option_detail li p.time {
    margin-top: 1em;
    display: flex;
    align-items: center;
    color: #da1c1c;
    font-weight: 600;
    font-size: 1.3rem;
}

.option_detail li p.time span {
    background: #da1c1c;
    padding: 0.2em 1em;
    border-radius: 100px;
    margin-right: 0.5em;
    font-size: 1.1rem;
    color: #fff;
    display: flex;
    align-items: center;
}

/*============================
他社比較（料金＆サービス）
============================*/

.hikaku div.announce {
    display: flex;
    align-items: flex-start;
}

.hikaku div.announce h4 {
    font-size: 1.5rem;
    margin: 0;
    text-align: center;
    background: #eff6f5;
    display: inline-block;
    padding: .8em 2.5em;
	border-radius: 100px;
	width: 320px;
}

.hikaku div.announce p {
	flex: 1;
	width: 100%;
	margin-left: 1em;
}

.hikaku table.df th {
    width: inherit;
    color: #fff;
    background: #a1a1a1;
    font-size: 1.4rem;
    line-height: 1.3;
}

.hikaku table.df th.sm {
	font-size: 1.8rem;
	background: #2bb4a2;
}

.hikaku table.df td:nth-child(1) {
    font-weight: 600;
    background: #e1e1e1;
	width: 16%;
}

.hikaku table.df th:first-child {
    background: #f7a035;
}

.hikaku table.df td:nth-child(2) {
    background: #eff6f5;
}

.hikaku table.df td {
    font-size: 1.4rem;
    background: #f2f2f2;
	position: relative;
}

.hikaku table.df td span.caution {
	position: absolute;
	right: 1em;
	top: 1em;	
}

.hikaku td span.en {
    font-size: 2.2rem;
    font-weight: 500;
    letter-spacing: 0;
    transform: translateY(1px);
    margin-right: .05em;
}

.hikaku .smarriage td span.en {
    font-weight: 600;
}

.hikaku td small {
	display: block;
}

/*============================
プレミアムプラン終了のテキスト
============================*/

.notice.premium_announce {
    padding: .5em;
}

.notice.premium_announce p {
    text-align: center;
    font-size: 1.3rem;
    font-weight: 600;
}

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

    /*============================
	基本サービスの表
	============================*/

	#service_new .flex.col_1 > div:last-of-type {
		padding-left: 0;
		padding-right: 0;
		margin-top: 1em;
	}

	table.service,
    table.service [class *='list_'] {
		font-size: 1.2rem;
	}

	table.service th {
		width: 30%;
	}

    /*============================
	オプションパネル
	============================*/

    .option_list {
		justify-content: space-around;
	}

	.option_list li {
        width: 48%;
        margin: .8em 0 0;
        padding: 1em 0;
    }

    .option_list li img {
        width: 60px;
		margin-bottom: .5em;
    }

    .option_list li p span {
        font-size: 1.1rem;
    }

    /*============================
	オプションの詳細
	============================*/

    .option_detail li p.title {
        text-align: center;
        font-weight: 600;
        line-height: 1.5;
        font-size: 1.6rem;
        display: block;
        text-align: left;
    }

    .option_detail li p.title span {
        font-size: 1.4rem;
        display: block;
    }

    .option_detail li p.lede {
        font-size: 1.2rem;
        line-height: 1.6;
    }

    /*============================
	他社比較（料金＆サービス）
	============================*/

	.hikaku div.announce h4 {
		width: 80%;
		font-size: 1.4rem;
	}

	.hikaku div.announce {
		display: block;
		justify-content: inherit;
	}

	.hokkaku {
		margin-top: 2em;
	}

	.hikaku div.announce p {
		flex: inherit;
		margin: auto;
		margin-top: 1em;
		position: relative;
	}

	.hikaku table.df {
		display: block;
    	overflow-x: scroll;
	}

	.hikaku table.df tbody {
		width: 400px;
    	display: table;
	}

	.hikaku table.df th,
    .hikaku table.df th.sm,
    .hikaku table.df td {
		font-size: 1.1rem;
		padding: .5em;
	}

    .hikaku table.df td:nth-child(1) {
        font-size: 1rem;
    }

    .hikaku table.df th:first-child,
    .hikaku table.df td:nth-child(1) {
        position: sticky;
        left: 0;
        z-index: 1;
    }

	.hikaku td span.en {
		font-size: 1.7rem;
	}

    .hikaku table.df td span.caution {
		right: .5em;
		top: 1em;
		font-size: .8rem;
	}

    /* scrollanime */

    .scroll_icon {
        animation: scroll_icon ease-in-out infinite alternate 1s;
    }

    @keyframes scroll_icon {
        0% {
            transform: translate(-10px,0);
        }

        100% {
            transform: translate(10px,0)
        }
    }

    /*============================
    プレミアムプラン終了のテキスト
    ============================*/

    .notice.premium_announce p {
        font-size: 1.1rem;
    }

}