@charset "utf-8";


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

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




/* read
--------------------------------------------*/
.read { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; margin: 120px 10% 0 0; }

.read .txtbox { width: 42%; }
.read .txtbox h2 { position: relative; font-size: 4rem; margin-bottom: 30px; padding-left: 20px; }
.read .txtbox h2 img {
position: absolute;
top: 23px;
left: 0;
width: 14px;
padding-right: 10px;
}
.read .txtbox p { color: #7f474b; line-height: 2; }

.read .imgbox { width: 55%; }
.read .imgbox img { border-radius: 0 20px 0 0; }




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

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

.enjoy .box {
display: flex;
flex-wrap: wrap;
align-items: center;
background: #eceae0;
border-radius: 20px;
width: 95%;
margin: 0 auto 50px;
}
.enjoy .box:nth-of-type(2n) { flex-direction: row-reverse; }
.enjoy .box .txtbox { width: 50%; padding: 50px; box-sizing: border-box; }
.enjoy .box .txtbox h3 { position: relative; font-size: 2.7rem; margin-bottom: 20px; padding-left: 40px; }
.enjoy .box .txtbox h3 img { position: absolute; top: -10px; left: 0; width: 30px; }
.enjoy .box .txtbox p {
font-size: 1.4rem;
color: #7f474b;
line-height: 1.8;
padding-left: 40px;
}

.enjoy .box .imgbox { width: 50%; }
.enjoy .box .imgbox img { border-radius: 0 20px 20px 0; }
.enjoy .box:nth-of-type(2n) .imgbox img { border-radius: 20px 0 0 20px; }




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

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

.content ul { display: flex; flex-wrap: wrap; justify-content: space-between; }
.content ul li { width: 32%; }
.content ul li .img { position: relative; margin-bottom: 20px; }
.content ul li h4 { font-size: 1.8rem; margin-bottom: 5px; }
.content ul li p { font-size: 1.4rem; color: #7f474b; line-height: 1.8; }





}



















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

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




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

.read .imgbox { margin-bottom: 40px; }
.read .imgbox img { border-radius: 0 20px 0 0; }

.read .txtbox { padding-left: 5%; }
.read .txtbox h2 { position: relative; font-size: 2.5rem; margin-bottom: 20px; padding-left: 20px; }
.read .txtbox h2 img {
position: absolute;
top: 10px;
left: 0;
width: 14px;
padding-right: 10px;
}
.read .txtbox p { color: #7f474b; line-height: 2; }




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

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

.enjoy .box {
background: #eceae0;
border-radius: 20px;
width: 95%;
margin-bottom: 40px;
}
.enjoy .box .txtbox { padding: 40px 20px; box-sizing: border-box; }
.enjoy .box .txtbox h3 { position: relative; font-size: 1.7rem; margin-bottom: 20px; padding-left: 30px; }
.enjoy .box .txtbox h3 img { position: absolute; top: -15px; left: 0; width: 25px; }
.enjoy .box .txtbox p { color: #7f474b; }

.enjoy .box .imgbox {  }
.enjoy .box .imgbox img { border-radius: 0 0 20px 20px; }


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




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

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

.content ul {  }
.content ul li { margin: 10px; }
.content ul li .img { position: relative; margin-bottom: 20px; }
.content ul li h4 { font-size: 1.7rem; margin-bottom: 5px; }
.content ul li p { color: #7f474b; }

/* ドットの見た目 */
.content .slick-dots { bottom: -25px; }
.content .slick-dots li button::before {
width: 9px; height: 9px;
background: #f8f8f4;
border: 1px solid #2c2321;
opacity: 1;
margin: 0 5px !important;
}
.content .slick-dots li.slick-active button::before {
background: #c03f28;
border: 1px solid #c03f28;
}





}