@charset "UTF-8";

/* campuslife/life（住まいについて）専用スタイル */
/* 共通のl-mv・page-content（accent-mosaic）等のベーススタイルはcampuslife.cssを参照 */

[data-pagename="campuslife/life"] #gradient-bg-img {
    background:url(../../img/bg-grid.jpg) repeat;
background-size:5.07vw;
}





.mv-life{
width:100%;
height:83.73vw;
background:url(../../img/mv-life-sp.jpg) no-repeat center center;
background-size:cover;
margin:0;
position:relative;
}


.life-prop{
display:flex;
flex-direction:column;
gap:6.4vw;
}


.life{
width:87.20vw;
margin:0 auto;
padding:6.40vw 0 10.67vw;
font-size:3.20vw;
line-height:1.75;
font-weight:normal;
}

.life-desc{
width:100%;
padding:3.20vw 6.40vw 6.40vw;
background:#fff;
font-size:3.73vw;
line-height:1.75;
margin:0 0 10.67vw;
border:1px dotted #000;
position:relative;
}


.anshin{
width:23.20vw;
height:28.00vw;
background:url(../../img/anshin.png) no-repeat center /cover;
position:absolute;
bottom:4.27vw;
right:3.20vw;
}


.life-item{
width:100%;
background:#fff;
padding:4.27vw 8.00vw;
}
.life-item h2{
font-size:8.00vw;
line-height:1.25;
margin:0 0 4.27vw;
}

.life-item h2 span.small-il{
font-size:6.40vw;
}
.life-item h2 span.small-br{
display:block;
font-size:4.27vw;
letter-spacing:-.05em;
}



.life-cc{
font-size:3.73vw;
line-height:1.928;
color:#14B4FF;
font-weight:bold;
margin:0 0 4.27vw;
}



.life-item h3{
font-size:3.20vw;
line-height:1.5;
}

.life-decimal{
margin:0 0 4.27vw 1.5em;
}
.life-decimal li{
list-style-type:decimal;
}
.life-col2{
display:flex;
flex-wrap:wrap;
gap:4.27vw;
margin:0 0 6.40vw;
}



.life-info{
border:0.27vw dotted #000;
margin:0 0 4.27vw;
padding:4.27vw;
}
.life-info h4{
font-size:3.20vw;
line-height:1.75;
margin:0 0 2.13vw;
font-weight:bold;
color:#14B4FF;
}

.life-info-add{
margin:0 0 2.13vw;
}
.life-tel{
font-weight:bold;
display:grid;
grid-template-columns:8em 1fr;
margin:0 0 4.27vw;
align-items:center;
font-size:2.67vw;
}

.life-tel dd{
font-size:3.20vw;
line-height:4.80vw;
}

.life-tel a{
color:#057BA2;
text-decoration:none;
}

.life-bnrs{
display:flex;
flex-wrap:wrap;
gap:4.27vw;
}



.life-link{
display:flex;
justify-content:flex-start;
}


.life-link a{
min-width: 42.67vw;
min-height: 6.93vw;
display: flex;
align-items: center;
border-bottom:0.27vw solid #000;
font-weight: bold;
position: relative;
color: #000;
font-size: 3.20vw;
text-decoration: none;
}

.life-link a::after{
content: '';
width: 4.27vw;
height: 4.27vw;
position: absolute;
top: 1.33vw;
right: 2.13vw;
background-color:#000;
mask: url(../../img/arrow-right-bk.svg) no-repeat center / contain;
}



@media (min-width: 768px) {

[data-pagename="campuslife/life"] #gradient-bg-img {
    background:url(../../img/bg-grid.jpg) repeat;
background-size:19px;
}


.mv-life{
background:url(../../img/mv-life.jpg) no-repeat center;
background-size:cover;
width:100%;
height:372px;
}

.life{
width:1260px;
margin:0 auto;
padding:40px 0 80px;
font-size:16px;
line-height:1.75;
font-weight:normal;
}

.life-desc{
width:100%;
padding:24px 30px 32px;
background:#fff;
font-size:22px;
line-height:1.75;
margin:0 0 56px;
position:relative;
}
.life-desc p{
margin-bottom:1em;
}
.life-desc p:last-child{
margin:0;
}

.anshin{
width:166px;
height:201px;
background:url(../../img/anshin.png) no-repeat center /cover;
position:absolute;
bottom:10px;
right:24px;
}



.life-prop{
display:flex;
flex-direction:column;
gap:40px;
}
.life-item{
width:100%;
background:#fff;
padding:16px 30px;
}
.life-item h2{
font-size:32px;
line-height:1.5;
margin:0 0 24px;
}
.life-item h2 span.small-il{
font-size:32px
}
.life-item h2 span.small-br{
display:inline;
font-size:32px
}

.life-cc{
font-size:22px;
line-height:1.7;
color:#14B4FF;
font-weight:bold;
margin:0 0 16px;
}

.life-item h3{
font-size:16px;
line-height:1.5;
}

.life-decimal{
margin:0 0 16px 1.5em;
}
.life-decimal li{
list-style-type:decimal;
}
.life-col2{
display:flex;
gap:40px;
margin:0 0 40px;
}

.life-col-c{
width:calc((100% - 40px) / 2);
}


.life-info{
border:1px dotted #000;
margin:8px 0 16px;
padding:24px;
}
.life-info h4{
font-size:20px;
line-height:1;
margin:0 0 8px;
font-weight:bold;
color:#14B4FF;
}

.life-info-add{
margin:0 0 8px;
}
.life-tel{
font-weight:bold;
display:grid;
grid-template-columns:8em 1fr;
margin:0 0 16px;
font-size:16px;
align-items:center;
}

.life-tel dd{
font-size:22px;
line-height:28px;
}

.life-tel a{
color:#057BA2;
text-decoration:none;
}

.life-bnrs{
display:flex;
gap:40px;
}
.life-bnr-c{
width:calc((100% - 40px) / 2);
}

.life-link{
display:flex;
justify-content:flex-start;
}


.life-link a{
min-width: 452px;
min-height: 74px;
background: #fff;
display: flex;
justify-content: center;
align-items: center;
padding: 0 80px 0 40px;
text-align: center;
font-weight: bold;
position: relative;
border: 1px solid #000;
border-radius: 37px;
color: #000;
font-size: 20px;
line-height: 1.25;
transition: all .2s;
text-decoration: none;
}

.life-link a::before{
content: '';
width: 44px;
height: 44px;
position: absolute;
top: 14px;
right: 14px;
background: #000;
border-radius: 50%;
}
.life-link a::after{
content: '';
width: 24px;
height: 17px;
position: absolute;
top: 27px;
right: 24px;
background-color: #fff;
-webkit-mask: url(../../img/btn-link-arrow.svg) no-repeat center / contain;
mask: url(../../img/btn-link-arrow.svg) no-repeat center / contain;
transition: all .2s;
}

.life-link a:hover::after {
right: 20px;
}


/* END PC CSS */
}