@charset "utf-8";
/* CSS Document */

/*============================
#topPanelArea
============================*/
#topPanelArea { height: 730px; position: relative; }
#topPanelArea .image { height: 730px; }
#topPanelArea .image img { width: 100%; height: 100%; object-fit: cover; }
#topPanelArea .pageTitle { position: absolute; bottom: 100px; text-align: left; padding-left: 80px; }
#topPanelArea .pageTitle .main { font-size: 4em; color: #fff; }
#topPanelArea .pageTitle .sub { margin-top: 25px; color: #fff; }

/*============================
#topArea
============================*/
#topArea { text-align: center; margin-top: 90px; padding-bottom: 75px; font-weight: 500; }
#topArea h2 { font-size: 0.875em; color: #9f44a8;  }
#topArea .catch { margin-top: 40px; font-size: 2.5em; line-height: 1.5; font-weight: 500; }
#topArea .copy { margin-top: 70px; }
#topArea .copy .text { padding-bottom: 45px; line-height: 2.5; }

/*============================
#contentArea
============================*/
#contentArea { background-color: #eee9e6; margin-top: 120px; padding-bottom: 120px; border-radius: 100px 100px 0 0; }
#contentArea .container { padding-top: 120px; }
#contentArea .container.vege { position: relative; display: flex; align-items: center; gap: 80px; }
#contentArea .container.vege:after { content: ''; position: absolute; background-color: #ccc; bottom: -60px; width: 100%; height: 1px; }
#contentArea .container.vege .image { overflow: hidden; width: 360px; height: 480px; border-radius: 10px; }
#contentArea .container.vege .image img { width: 100%; height: auto; }
#contentArea .container.vege .copy {}
#contentArea .container.vege .copy .title { font-size: 2.25em; font-weight: 600; }
#contentArea .container.vege .copy .text { margin-top: 40px; line-height: 2; }
#contentArea .container.organic { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 80px; }
#contentArea .container.organic:after { content: ''; position: absolute; background-color: #ccc; bottom: -60px; width: 100%; height: 1px; }
#contentArea .container.organic .copy {}
#contentArea .container.organic .copy .title { font-size: 2.25em; font-weight: 600; }
#contentArea .container.organic .copy .text { margin-top: 40px; line-height: 2; }
#contentArea .container.organic .image { overflow: hidden; width: 360px; height: 480px; border-radius: 10px; }
#contentArea .container.organic .image img { width: 100%; height: auto; }
#contentArea .container.town { display: flex; align-items: center; gap: 80px; }
#contentArea .container.town .copy {}
#contentArea .container.town .copy .title { font-size: 2.25em; font-weight: 600; line-height: 1.5; }
#contentArea .container.town .copy .text { margin-top: 40px; line-height: 2; }
#contentArea .container.town .image { overflow: hidden; width: 360px; height: 480px; border-radius: 10px; }
#contentArea .container.town .image img { width: 100%; height: auto; }

/*============================
#detailArea
============================*/
#detailArea { margin-top: 120px; }
#detailArea h2 { text-align: center; font-size: 2em; font-weight: 600; }
#detailArea dl { display: flex; flex-wrap: wrap; align-items: center; width: 100%; margin-top: 45px; border-top: 1px solid #ccc; }
#detailArea dl div { display: flex; align-items: center; border-bottom: 1px solid #ccc; width: 100%; }
#detailArea dl dt { width: 30%; padding: 30px 0 30px 20px; }
#detailArea dl dd { width: 70%; padding: 30px 0 30px 20px; line-height: 1.5; }
#detailArea dl dd span { display: flex; flex-direction: column; margin-top: 20px; font-weight: 600; }

/*============================
.md_pankuzuArea
============================*/
.md_pankuzuArea {  margin-top: 120px; }