@charset "utf-8";


/*PC*/
@media print, screen and (min-width: 769px) {

main { background: #eceae0; }
header { background: #eceae0; }


/* head
--------------------------------------------*/
.head { background: url(../images/life/head_img.jpg) no-repeat center; background-size: cover; }
.head .txt h1 span.en { background: #7f474b; }
.head .txt h1 span.jp { color: #7f474b; }




/* 一覧
--------------------------------------------*/
.list { position: relative; width: 80%; margin: 120px auto 0; }
.list ul {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
position: relative;
}
.list ul::after {
content: '';
display: block;
width: 32%;
}
.list ul li { width: 32%; margin-bottom: 30px; }
.list ul li .img {
position: relative;
overflow: hidden;
aspect-ratio: 4 / 3;   /* ★ 4:3固定 */
width: 100%;
}
.list ul li .img img {
width: 100%;
height: 100%;
object-fit: cover;
}
.list ul li .txt { background: #fff; padding: 30px; }
.list ul li .txt h3 { font-size: 1.7rem; margin-bottom: 10px; }
.list ul li .txt p { font-size: 1.4rem; color: #7f474b; line-height: 1.8; }




/* txtbox
--------------------------------------------*/
.txtbox { position: relative; width: 80%; margin: 0 auto 50px; padding-top: 120px; }

.txtbox h2 { position: relative; font-size: 4rem; margin-bottom: 10px; padding-left: 20px; }
.txtbox h2 img { position: absolute; top: 23px; left: 0; width: 14px; padding-right: 10px; }
.txtbox p { font-size: 1.4rem; margin-bottom: 50px; }




/* side
--------------------------------------------*/
.flex_wrap {
position: relative;
width: 80%;
margin: 120px auto 0;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}

.flex_wrap .side {
width: 250px;
position: sticky;
top: 150px;
align-self: flex-start;
}
.flex_wrap .side h4 {
margin: 0 0 15px;
padding: 2px 30px;
background: #7f474b;
border: 1px solid #7f474b;
border-radius: 0px 50px 50px 0;
color: #f8f8f4;
box-sizing: border-box;
text-align: center;
}
.flex_wrap .side ol { list-style: decimal; margin-left: 2rem; }
.flex_wrap .side ol li { font-size: 1.2rem; margin-bottom: 10px; }




/* 詳細
--------------------------------------------*/
.flex_wrap .content { width: calc(100% - 350px); }
.flex_wrap .content h2 { font-size: 4rem; margin-bottom: 30px; }

.flex_wrap .content .box { margin-bottom: 80px; }
.flex_wrap .content .box h3 {
font-size: 2.7rem;
margin-bottom: 30px;
background: #7f474b;
border-radius: 0 40px 40px 0;
padding: 3px 30px;
color: #fff;
}
.flex_wrap .content .box figure { margin-bottom: 40px; }
.flex_wrap .content .box figure img { border-radius: 20px; }
.flex_wrap .content .box p { font-size: 1.4rem; line-height: 1.8; margin-bottom: 30px; }

.flex_wrap .content .box .point {
padding: 30px;
background: #fff;
border: 2px solid #7f474b;
border-radius: 10px;
}
.flex_wrap .content .box .point h4 { color: #7f474b; font-size: 1.7rem; margin-bottom: 10px; }
.flex_wrap .content .box .point ul { list-style: disc; margin-left: 2rem; }
.flex_wrap .content .box .point ul li { font-size: 1.4rem; margin-bottom: 10px; }
.flex_wrap .content .box .point ul li::marker { color: #7f474b; font-size: 2rem; line-height: 1; }



.news { margin: 80px 0 0; }





}



















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

main { background: #eceae0; }
header { background: #eceae0; }


/* head
--------------------------------------------*/
.head { background: url(../images/life/head_img.jpg) no-repeat center; background-size: cover; }
.head .txt h1 span.en { background: #7f474b; }
.head .txt h1 span.jp { color: #7f474b; }




/* 一覧
--------------------------------------------*/
.list { width: 90%; margin: 50px auto 0; }
.list ul {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.list ul li { width: 48%; margin-bottom: 20px; }
.list ul li .img {
position: relative;
overflow: hidden;
aspect-ratio: 4 / 3;   /* ★ 4:3固定 */
width: 100%;
}
.list ul li .img img {
width: 100%;
height: 100%;
object-fit: cover;
}
.list ul li .txt { background: #fff; padding: 20px; }
.list ul li .txt h3 { font-size: 1.7rem; margin-bottom: 10px; }
.list ul li .txt p { font-size: 1.2rem; color: #7f474b; line-height: 1.8; }




/* txtbox
--------------------------------------------*/
.txtbox { position: relative; width: 90%; margin: 50px auto 0; }

.txtbox h2 { position: relative; font-size: 2.5rem; margin-bottom: 10px; padding-left: 20px; }
.txtbox h2 img { position: absolute; top: 10px; left: 0; width: 14px; padding-right: 10px; }
.txtbox p { margin-bottom: 20px; }




/* side
--------------------------------------------*/
.flex_wrap {
position: relative;
width: 90%;
margin: 50px auto 0;
}

.flex_wrap .side { margin-bottom: 40px; }
.flex_wrap .side h4 {
margin: 0 0 15px;
padding: 2px 10px;
background: #7f474b;
border: 1px solid #7f474b;
border-radius: 0px 50px 50px 0;
color: #f8f8f4;
box-sizing: border-box;
text-align: center;
}
.flex_wrap .side ol { list-style: decimal; margin-left: 2rem; }
.flex_wrap .side ol li { font-size: 1.2rem; margin-bottom: 10px; }




/* 詳細
--------------------------------------------*/
.flex_wrap .content { margin-bottom: 40px; }
.flex_wrap .content h2 { font-size: 2.5rem; margin-bottom: 20px; }

.flex_wrap .content .box { margin-bottom: 50px; }
.flex_wrap .content .box h3 {
font-size: 1.6rem;
margin-bottom: 20px;
background: #7f474b;
border-radius: 0 40px 40px 0;
padding: 3px 20px;
color: #fff;
}
.flex_wrap .content .box .img01 figure { width: 48%; }
.flex_wrap .content .box .img02 { flex-wrap: wrap; }
.flex_wrap .content .box .img02 figure { width: 48%; }
.flex_wrap .content .box figure { margin-bottom: 20px; }
.flex_wrap .content .box figure img { border-radius: 10px; }
.flex_wrap .content .box p { line-height: 1.8; margin-bottom: 20px; }

.flex_wrap .content .box .point {
padding: 20px;
background: #fff;
border: 2px solid #7f474b;
border-radius: 10px;
}
.flex_wrap .content .box .point h4 { color: #7f474b; margin-bottom: 10px; }
.flex_wrap .content .box .point ul { list-style: disc; margin-left: 2rem; }
.flex_wrap .content .box .point ul li { font-size: 1.2rem; margin-bottom: 5px; }
.flex_wrap .content .box .point ul li::marker { color: #7f474b; font-size: 2rem; line-height: 1; }



.news { margin: 0; padding: 0 5% 50px; }





}