@charset "utf-8";


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



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

#group { padding-bottom: 150px; }


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




/* read
--------------------------------------------*/
.read {
position: relative;
display: flex;
flex-wrap: wrap;
flex-direction: row-reverse;
justify-content: space-between;
width: 95%;
margin: 120px auto 0 0;
}

.read .slider_wrap { width: 55%; height: 60vh; padding-bottom: 30px; }

#read-swiper { overflow: hidden; padding-bottom: 30px; }
#read-swiper .swiper-slide img { border-radius: 0 20px 0 0; height: 60vh; object-fit: cover; }

/* ドットの見た目 */
#read-swiper .swiper-pagination { bottom: 0; right: 0; width: fit-content; }
#read-swiper .swiper-pagination-bullet {
width: 12px; height: 12px;
background: #f8f8f4;
border: 1px solid #2c2321;
opacity: 1;
margin: 0 5px !important;
}
#read-swiper .swiper-pagination-bullet-active {
background: #c03f28;
border: 1px solid #c03f28;
}

.read .txtbox { width: 42%; }
.read .txtbox h2 { font-size: 4rem; }
.read .txtbox h2 span { position: relative; display: block; font-size: 1.4rem; }
.read .txtbox h2 span::before,
.read .txtbox h2 span::after { content: '／'; font-size: 1.4rem; }
.read .txtbox h2 span::before { transform: scaleX(-1); display: inline-block; }
.read .txtbox p {
font-size: 2.4rem;
font-weight: 600;
line-height: 1.8;
margin-top: 30px;
}
.read .txtbox p span {
display: block;
font-size: 1.4rem;
font-weight: 500;
color: #7f474b;
margin-top: 20px;
}

.read .txtbox ul.pagination { display: flex; flex-wrap: wrap; margin-top: 10px; }
.read .txtbox ul.pagination li {
width: 31%;
margin: 20px 10px 0 0;
padding: 10px;
background: #f8f8f4;
border: 1px solid #7f474b;
border-radius: 50px;
font-size: 1.4rem;
color: #7f474b;
text-align: center;
box-sizing: border-box;
cursor: pointer;
}
.read .txtbox ul.pagination li.active {
background: #7f474b;
color: #f8f8f4;
transition: 0.5s;
}




/* point
--------------------------------------------*/
.point { position: relative; width: 80%; margin: 120px auto 0; }

.point h2 { font-size: 4rem; margin-bottom: 30px; }
.point h2 span { position: relative; display: block; font-size: 1.4rem; }
.point h2 span::before,
.point h2 span::after { content: '／'; font-size: 1.4rem; }
.point h2 span::before { transform: scaleX(-1); display: inline-block; }

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

.point .btn button {
position: relative;
display: block;
width: fit-content;
margin: 40px auto 0;
padding: 15px 80px;
background: #7f474b;
border: 1px solid #7f474b;
border-radius: 0px 50px 50px 0;
color: #f8f8f4;
}

/* 非表示制御（アクセシブルに） */
.group_point li[hidden] { display: none; }




/* calendar
--------------------------------------------*/
.calendar { position: relative; width: 80%; margin: 120px auto 0; }

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

.calendar .btn a { margin-top: 60px; padding: 15px 80px; }




/* policy
--------------------------------------------*/
.policy { position: relative; width: 80%; margin: 120px auto 0; }

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

.policy .txt { background: #fff; border: 1px solid #919191; padding: 30px 60px; }
.policy .txt p { height: 200px; font-size: 1.4rem; overflow-y: scroll; scrollbar-width: thin; }





}



















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

#group { padding-bottom: 80px; }


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




/* read
--------------------------------------------*/
.read { position: relative; margin: 80px 0 0 0; }

.read .txtbox { width: 90%; margin: 0 auto; }
.read .txtbox h2 { font-size: 2.5rem; }
.read .txtbox h2 span { position: relative; display: block; font-size: 1.2rem; }
.read .txtbox h2 span::before,
.read .txtbox h2 span::after { content: '／'; font-size: 1.2rem; }
.read .txtbox h2 span::before { transform: scaleX(-1); display: inline-block; }
.read .txtbox p {
font-size: 1.8rem;
font-weight: 600;
line-height: 1.8;
margin-top: 30px;
}
.read .txtbox p span {
display: block;
font-size: 1.2rem;
font-weight: 500;
color: #7f474b;
margin-top: 20px;
}

.read .txtbox ul.pagination { display: flex; flex-wrap: wrap; margin-top: 10px; }
.read .txtbox ul.pagination li {
margin: 10px 5px 0 0;
padding: 4px 8px;
background: #f8f8f4;
border: 1px solid #7f474b;
border-radius: 50px;
color: #7f474b;
font-size: 1.2rem;
text-align: center;
box-sizing: border-box;
cursor: pointer;
}
.read .txtbox ul.pagination li.active {
background: #7f474b;
color: #f8f8f4;
transition: 0.5s;
}


#read-swiper { overflow: hidden; padding-bottom: 30px; margin-top: 20px; }
#read-swiper .swiper-slide img { border-radius: 0 20px 0 0; }

/* ドットの見た目 */
#read-swiper .swiper-pagination { bottom: 0; }
#read-swiper .swiper-pagination-bullet {
width: 9px; height: 9px;
background: #f8f8f4;
border: 1px solid #2c2321;
opacity: 1;
margin: 0 5px !important;
}
#read-swiper .swiper-pagination-bullet-active {
background: #c03f28;
border: 1px solid #c03f28;
}




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

.point h2 { position: relative; font-size: 2.5rem; margin-bottom: 20px; padding-left: 20px; }
.point h2 span { position: relative; display: block; font-size: 1.2rem; }
.point h2 span::before,
.point h2 span::after { content: '／'; font-size: 1.2rem; }
.point h2 span::before { transform: scaleX(-1); display: inline-block; }

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

.point .btn button {
position: relative;
display: block;
width: fit-content;
margin: 40px auto 0;
padding: 15px 80px;
background: #7f474b;
border: 1px solid #7f474b;
border-radius: 0px 50px 50px 0;
color: #f8f8f4;
}

/* 非表示制御（アクセシブルに） */
.group_point li[hidden] { display: none; }




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

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

.calendar .btn a {
margin-top: 30px;
padding: 15px 20px;
text-align: center;
width: 55%;
}




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

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

.policy .txt { background: #fff; border: 1px solid #919191; padding: 20px; }
.policy .txt p { height: 200px; font-size: 1.2rem; overflow-y: scroll; scrollbar-width: thin; }





}