@charset "utf-8";
/* volks 50th anniversary project _ contents PJ03 css - update: 2022.11.30 */
/*-------------------------------
 project 03
---------------------------------*/
#pj03-conts {
  background-image: url("/50th/assets/image/pj03-main.jpg");
  background-position: right top;
  background-repeat: no-repeat;
  background-size: calc(var(--rs) * 48);
}
#pj03-conts .cont-title_pj {
  text-shadow: var(--cont-text-ts);
  filter: var(--cont-text-ds);
}
.pj03-cont {
  width: min(92%, 58rem);
  margin: calc(var(--rs) * 2) 4%;
  position: relative;
}
.pj03-cont--full {
  width: 92%;
}
.pj03-cont-text {
  color: #202020;
  font-size: calc(var(--fs) * 1.7);
  font-weight: bold;
  line-height: 1.8;
  text-align: justify;
  text-shadow: var(--cont-text-ts);
  filter: var(--cont-text-ds);
}
.pj03-cont > p ~ p {
  margin-top: 1em;
}
.pj03-cont:not(.pj03-cont--full) > p:first-child {
  width: clamp(50%, 54vw, calc(var(--rs) * 54));
}
/* cont - Intended use */
.pj03-cont-use {
  display: flex;
  flex-flow: row wrap;
  align-items: flex-start;
  justify-content: space-around;
  gap: calc(var(--rs) * 1);
}
.pj03-cont-use > * {
  width: min(50%, calc(var(--rs) * 44));
  flex: 1 1 auto;
}
/*-------------------------------
 pj03 - tree planting
---------------------------------*/
.cont-box > .cont-box-heading-50thlogo {
  margin-left: 0;
  padding-left: calc(var(--fs) * 5);
  margin-bottom: calc(var(--rs) * 3);
  display: flex;
  align-items: center;
}
.cont-box-heading_50thlogo {
  width: calc(var(--fs) * 8);
  margin: calc(var(--fs) * -1.5) calc(var(--rs) * 1) calc(var(--rs) * -2.5) calc(var(--fs) * -5);
  display: inline-block;
  z-index: 1;
}
.pj03-treePlanting > figure {
  float: right;
}
.pj03-img-sato {
  width: min(30%, calc(var(--fs) * 20));
  margin-top: calc(var(--rs) * -6);
  margin-left: auto;
  margin-bottom: calc(var(--fs) * -10);
  margin-right: 0;
  position: relative;
  right: calc(var(--rs) * -2);
  vertical-align: bottom;
}
.pj03-img-sato > img {
  filter: drop-shadow(calc(var(--rs) * 0.5) calc(var(--rs) * 0.5) calc(var(--rs) * 0.5) hsl(0deg 0% 20% / 50% ));
}
/* tree planting schedule */
.treePlanting-schedule {
  border-collapse: separate;
  border-spacing: calc(var(--fs) * 1);
}
.treePlanting-schedule th,
.treePlanting-schedule td {
  padding: calc(var(--fs) * 0.5) calc(var(--fs) * 1);
  font-size: calc(var(--fs) * 2);
  font-weight: bold;
  line-height: 1.2;
}
.treePlanting-schedule th {
  background: var(--c-mc);
  color: #fff;
  text-align: center;
  text-shadow: 2px 2px 0px hsl(0deg 0% 0% / 90%);
  white-space: nowrap;
}
.treePlanting-schedule td[colspan] {
  padding: 0;
}
.treePlanting-schedule b {
  font-size: calc(var(--rs) * 3.6);
}
.treePlanting-schedule span {
  display: inline-block;
}
.schedule-details {
  margin-top: 0.5em;
  font-size: calc(var(--fs) * 1.8);
}
.schedule-details li {
  margin-top: 0.3em;
}
/* tree planting notice */
.treePlanting-notice {
  width: 100%;
  padding: calc(var(--fs) * 1) calc(var(--fs) * 1.2) calc(var(--fs) * 1.3);
  background: rgb(255 255 255 / 80%);
  border: 1px solid #a10417;
  position: relative;
}
.treePlanting-notice p {
  color: #a10417;
  font-size: calc(var(--fs) * 1.8);
  line-height: 1.5;
}
.treePlanting-notice span {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: calc(var(--fs) * 0.5);
  
}
/* tree planting contents */
.treePlanting-cont {
  padding: calc(var(--rs) * 1);
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  gap: calc(var(--fs) * 2);
}
.treePlanting-cont + .notice-list {
  width: 96%;
  margin: calc(var(--rs) * 2) auto;
}
.treePlanting-cont__detail {
  width: min(96%, calc(var(--rs) * 40));
  padding: calc(var(--rs) * 1);
  margin: calc(var(--rs) * 2) auto 0;
  background: #fff;
  border: 5px solid var(--c-mc);
  box-shadow: 1px 1px 5px -1px #342d07;
  border-radius: 1rem;
  position: relative;
  flex: 1 1 auto;
}
.treePlanting-cont-title {
  color: #ac1728;
  font-size: calc(var(--fs) * 2);
  font-weight: bold;
  display: flex;
  align-items: center;
}
.treePlanting-cont-text {

}
.treePlanting-cont-text p {
  width: 60%;
  padding: 0.5em 0em 1em 0.5em;
  float: left;
}
.treePlanting-cont-text figure {
  width: 40%;
  margin: calc(var(--fs) * -5) 0 0;
  float: right;
}
.treePlanting-cont-text figcaption {
  margin-top: -0.5em;
  color: #ac1728;
  font-family: "wf-tegaki";
  font-weight: bold;
  transform: rotate(-2deg);
  text-shadow: 0 0 1px #fff;
  position: relative;
  left: 0.5em;
  top: 0.2em;
}
.treePlanting-cont-text figcaption span {
  display: inline-block;
}
/*-------------------------------
  tree planting details
---------------------------------*/
.treePlanting-details {
  width: 98%;
  padding: calc(var(--rs) * 1) calc(var(--rs) * 2);
  margin: calc(var(--rs) * 1) auto;
  background-color: rgb(255 255 255 / 80%);
  border: 5px solid var(--c-mc);
  border-radius: 1rem;
}
.treePlanting-details .cont-box-heading {
  padding: 0.3em calc(var(--rs) * 3);
  margin: 0 0 calc(var(--fs) * 1);
  left: calc(var(--rs) * -3);
}
.treePlanting-details .cont-box-heading small {
  margin-left: calc(var(--rs) * 3);
  font-size: calc(var(--fs) * 1.4);
  font-weight: normal;
  text-shadow: none;
  display: inline-block;
}
.treePlanting-text {
  margin-top: calc(var(--rs) * 1);
}
.treePlanting-details hr {
  width: 100%;
  border-color: #e2dae3;
}
/* check */
.check {
  padding: 0.8em  0.5em;
  margin-top: 1em;
  background: hsl(0deg 100% 100% / 60%);
  border: 1px solid #c1bda5;
}
.check-list  {
  width: 96%;
  padding-left: 1em;
  margin: calc(var(--fs) * 1) auto;
  font-weight: bold;
  line-height: 1.3;
}
.check-list li {
  list-style: decimal;  
}
.check-list li ~ li {
  margin-top: 0.5em;
}
/* title */
.treePlanting-title {
  padding: calc(var(--rs) * 0.5) calc(var(--fs) * 1);
  margin-top: calc(var(--rs) * 4  );
  margin-bottom: calc(var(--rs) * 1);
  background: var(--c-mc);
  color: #fff;
  font-weight: normal;
}
.treePlanting-title--en {
  font-size: calc(var(--fs) * 1.8);
}
/* event program */
.treePlanting-ep {
  width: 98%;
  margin: 0 auto;
  font-weight: bold;
  display: flex;
  flex-flow: row wrap;
  gap: calc(var(--rs) * 2);
}
.treePlanting-ep > div {
  min-width: 48%;
}
.treePlanting-ep dt {
  padding-left: 0.5em;
  margin-top: calc(var(--fs) * 1);
  margin-bottom: calc(var(--rs) * 1);
  border-left: calc(var(--fs) * 0.6) solid #ac1728;
  color: #ac1728;
  font-size: calc(var(--fs) * 2);
  line-height: 1.2;
}
.treePlanting-ep dd {
  margin-left: calc(var(--fs) * 1.4);
  font-size: calc(var(--fs) * 1.8);
}
.entryfee {
  padding: calc(var(--fs) * 0.5) calc(var(--fs) * 2);
  background: #ac1728;
  margin: calc(var(--rs) * 2) 1% calc(var(--rs) * 1);
  color: #fff;
  font-weight: bold;
  display: inline-block;
}
/* service */
.service-info {
  width: 98%;
  margin: 0 auto;
  font-weight: bold;
  display: flex;
  flex-flow: row wrap;
  gap: calc(var(--rs) * 4);
}
.service-info > div {
  min-width: 40%;
}
.service-info dt {
  margin-top: calc(var(--fs) * 1);
  margin-bottom: calc(var(--rs) * 1);
  color: #ac1728;
  font-size: calc(var(--fs) * 1.8);
  line-height: 1.2;
}
.service-info dd {
  margin-left: calc(var(--fs) * 1.4);
}
/* notice */
.treePlanting-note {
  width: 98%;
  margin: calc(var(--rs) * 2) auto;
}
.treePlanting-note li {
  padding-left: 1em;
  margin-top: 0.7em;
  font-size: calc(var(--fs) * 1.4);
  line-height: 1.3;
  text-indent: -1em;
}
.treePlanting-note b {
  line-height: 1.8;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: calc(var(--fs) * 0.5);
}
/* request */
.treePlanting-request {
  padding: calc(var(--rs) * 1);
  margin: calc(var(--rs) * 2) auto;
  background: #f5f5f5;  
}
.treePlanting-request li {
  padding-left: 1em;
  margin: calc(var(--rs) * 1) 0;
  text-indent: -0.6em;
}
.treePlanting-request b {
    color: #ac1728;
}
/* link */
.treePlanting-link {
  padding: calc(var(--fs) * 0.5);
  margin: calc(var(--rs) * 2) auto;
  border: 1px solid #ac1728;
  text-align: center;
}
/* address */
.address {
  padding: calc(var(--rs) * 1);
  margin: calc(var(--rs) * 2) auto calc(var(--rs) * 1);
  background: #F2F1ED;
  font-size: calc(var(--fs) * 1.4);
  font-style: normal;
  line-height: 1.6;
}
.address b {
  font-size: calc(var(--fs) * 1.6);
}
.address small {
  display: inline-block;
}