@charset "UTF-8";


.point .ttl{font-size: 4vw;font-family: var(--mincho);margin-bottom: 11vw;text-align: center;}
.point li{padding: 5% 5% 2%;border: 3px solid #bfe3e7;margin-bottom: 10vw;}
.point li .num{background: var(--blue);color: #fff;display: table;padding: 1% 7%;border-radius: 40px;margin: -8vw auto 3vw;font-family: "Marcellus";font-weight: 400;}
.point li .read{color: var(--gold);font-family: var(--mincho);font-size: 5.6vw;border-bottom: 1px solid #ddd;text-align: center;padding-bottom: 3vw;margin-bottom: 3vw;}
.point li p {text-align: center;}
.point li p span{font-weight: bold;display: block;}

.link a{padding: 8vw 0;text-align: center;background: #ffffffc4;position: relative;background: #4DCEF7;background: linear-gradient(90deg, rgba(77, 206, 247, 1) 1%, rgba(123, 231, 230, 1) 50%);}
.link a:before {content: '';width: calc(100% - 4vw);height: calc(100% - 4vw);border: 1px solid #8c8c8c;position: absolute;top: 50%;left: 50%;-moz-transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%);-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);}
.link a:after{content: '';width: 4vw;height: 4vw;position: absolute;bottom: 2vw;right: 2vw;background: -webkit-gradient(linear, 0% 0%, 100% 100%, color-stop(50%, rgba(0, 0, 0, 0)), color-stop(50%, #8c8c8c));background: -moz-linear-gradient(left, rgba(0, 0, 0, 0) 50%, #8c8c8c 50%);background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 50%, #8c8c8c 50%);background: linear-gradient(to right bottom, rgba(0, 0, 0, 0) 50%, #8c8c8c 50%);}
.link a .text .en{display: block;margin-bottom: 3%;font-family: 'cormorant-garamond';font-size: 6vw;color: #666;}
.link a .text .jp{font-size: 3.4vw;opacity: 0.8;}



/* =============================================
pc-size
================================================*/
@media screen and (min-width: 736px) {

.point .ttl{font-size: 20px;margin-bottom: 100px;}
.point ul{display: -webkit-flex;display: flex;-webkit-flex-wrap: wrap;flex-wrap: wrap;-webkit-justify-content: center;justify-content: center;gap: 0 30px;}
.point li{padding: 30px 30px 0px;margin-bottom: 60px;width: calc((100% - 60px) / 3);width: calc((100% - 60px) / 3);}
.point li .num{padding: 4px 30px;margin: -50px auto 20px;}
.point li .read{font-size: 26px;padding-bottom: 12px;margin-bottom: 16px;}
.point li p span{font-weight: bold;display: block;}


}

/* =============================================
pc-size
================================================*/
@media screen and (min-width: 1200px) {
.service li{margin-bottom: 50px;width: calc((100%) / 4);width: calc((100%) / 4);}
}