@charset "utf-8";

.teraslink_caption { max-width: 900px; margin: -60px auto 60px; background: url(/wp/wp-content/themes/teras_2503/static/images/link/caption_bg.png) center/cover no-repeat; padding: 4rem 1rem; }
.teraslink_caption ul { display: flex; align-items: center; justify-content: center; gap: 2rem; }
.teraslink_caption ul li { width: 200px; height: 200px; display: flex; align-items: center; justify-content: center; background: linear-gradient(to bottom,  #028241 0%,#72ae2d 100%); border:1px solid rgba(0, 0, 0, .1); color: #fff; font-weight: 600; text-align: center; border-radius: 300px; padding: 2rem; box-sizing: border-box; }

.teraslink_about { max-width: 900px; margin: 0 auto 60px; text-align: left; }
.teraslink_about .inr { width: 100%; display: flex; }
.teraslink_about .inr .cont { width: calc(100% / 3); padding: 1.5rem; position: relative; }
.teraslink_about .inr .cont.cont01 { background: linear-gradient(to bottom,  #83cbeb 0%,#b8d4f0 50%,#c1e5f5 100%); }
.teraslink_about .inr .cont.cont02 { background: linear-gradient(to bottom,  #83A3EB 0%,#B8C9F0 50%,#C1CDF5 100%); }
.teraslink_about .inr .cont.cont03 { background: linear-gradient(to bottom,  #75D2DE 0%,#B8E5F0 50%,#C1F5F5 100%); }
.teraslink_about .inr .cont h3 { margin: 0 auto 2rem; min-height: 80px; display: flex; align-items: center; justify-content: center; border-top: 1px solid rgba(255, 255, 255, .2); border-bottom: 1px solid rgba(255, 255, 255, .2); padding: 1rem 0; color: #fff; font-weight: 600; text-align: center; line-height: 1.25; font-size: 1.4285714285714rem; white-space: nowrap; }
.teraslink_about .inr .cont.cont02 h4 { letter-spacing: 0; color: #fff; position: absolute; top:calc(80px + 4rem); left: -1rem; width: 114px; height: 64px; padding: .5rem 20px .5rem 1rem; line-height: 1.25; display: flex; align-items: center; justify-content: flex-start; background: url(/wp/wp-content/themes/teras_2503/static/images/link/about_arw01.png) center/cover no-repeat; }
.teraslink_about .inr .cont.cont01 dt,
.teraslink_about .inr .cont.cont02 dt { margin: 0 auto 2rem; text-align: center; }
.teraslink_about .inr .cont.cont01 li,
.teraslink_about .inr .cont.cont02 li { padding: .75rem; line-height: 1; text-align: center; background: #fff; border-radius: 3px; margin: 0 auto .5rem; }
.teraslink_about .inr .cont.cont03 dl { margin: 0 auto 1rem; }
.teraslink_about .inr .cont.cont03 dt { position: relative; left: -2.5rem; letter-spacing: 0; font-weight: 600; color: #fff; width: 206px; height: 64px; margin: 0 0 1rem; padding: .5rem 20px .5rem 1rem; line-height: 1; display: flex; align-items: center; justify-content: flex-start; background: url(/wp/wp-content/themes/teras_2503/static/images/link/about_arw02.png) center/cover no-repeat; }
.teraslink_about .inr .cont.cont03 dt::after { content: url(/wp/wp-content/themes/teras_2503/static/images/link/ico_cloud.svg); position: absolute; right: calc(-3rem + -30px); }
.teraslink_about .inr .cont.cont03 dt small { font-size: .7em; }
.teraslink_about .inr .cont.cont03 h4 { font-size: 1.2857142857143rem; line-height: 1; margin: 0 auto 1rem; }
.teraslink_about .inr .cont.cont03 h4 small { font-size: .7em; }
.teraslink_about .inr .cont.cont03 ul { list-style-type: disc; padding-left: 1.5rem; position: relative; }
.teraslink_about .inr .cont.cont03 ul li { list-style-type: disc; }
.teraslink_about .inr .cont.cont03 ul li img { position: absolute; right: 0; bottom: 0; }
.teraslink_about .inr .cont.cont03 p small { font-size: .7em; }

.teraslink_point { max-width: 900px; margin: 0 auto 60px; text-align: left; }
.teraslink_point h3 { background: linear-gradient(135deg, #028241 0%, #72AE2D 100%); margin: 0 auto 30px; font-size: min(5vw, 24px); color: #fff; font-weight: bold; text-align: center; padding: .5em; }
.teraslink_point .inr { display: flex; flex-wrap: wrap; gap: 1rem; }
.teraslink_point .inr dl { width: calc((100% - 1rem) / 2); display: flex; align-items: center; }
.teraslink_point .inr dl dt { width: 100px; height: 100px; display: flex; align-items: center; justify-content: center; background: #000; }
	.teraslink_point .inr dl:nth-of-type(1) dt { background-color: #83CBEA;}
	.teraslink_point .inr dl:nth-of-type(2) dt { background-color: #84A3EB;}
	.teraslink_point .inr dl:nth-of-type(3) dt { background-color: #75D2DE;}
	.teraslink_point .inr dl:nth-of-type(4) dt { background-color: #75DEAE;}
.teraslink_point .inr dl dd { width: calc(100% - 100px); font-weight: 600; padding: 0 0 0 1rem; }
.teraslink_point .inr dl dd small { font-size: .8rem; }

@media screen and (max-width: 640px) {
	.teraslink_caption { margin: 0 auto 10px; padding: 2rem 2rem 1rem; }
	.teraslink_caption ul { display: block; }
	.teraslink_caption ul br { display: none; }
	.teraslink_caption ul li { width: auto; height: auto; border-radius: 10px; margin: 0 auto 1rem; padding: 1rem; }
	.teraslink_about { margin: 0 auto 10px; }
	.teraslink_about .inr { display: block; }
	.teraslink_about .inr .cont { width: 100%; }
	.teraslink_about .inr .cont.cont02 h4 { left: -2px; }
	.teraslink_about .inr .cont.cont03 dt { left: calc(-1.5rem + -2px);}
	.teraslink_point h3 { margin: 0 auto;}
	.teraslink_point .inr { display: block; }
	.teraslink_point .inr dl { width: 100%; border-bottom: 1px solid rgba(0, 0, 0, .1); }


}