* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
/* 自定links义前景色与背景色 */
:root {
  --highlight-color: #ffde59;
  --background-color: #01471f;
}
/* 定义自定义字体 */
@font-face {
  font-family: "nikoniko";
  src: 
    url("../font/nicokaku_v1.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

/* 将自定义字体应用到全局 */
body {
  font-family: "nikoniko", sans-serif;
  background-color: #fff8ed;
}

/* 导航栏 */
#nav-bar {
  /* position: fixed; */
  /* top: 0; */
  /* left: 0; */
  /* z-index: 99; */
  width: 100%;
  height: 12dvh;
  background-color: var(--background-color);
  color: var(--highlight-color);
  display: flex;
  flex-direction: row ;
  justify-content: flex-start;
  align-items: center;
  padding: 1dvh 0;
}
/* logo容器 */
#logo-container {
    display: flex;
    align-items: center;
    margin-left: 10px;
    /* width: 20dvw; */
    /* height: 12dvh; */
    /* order: 1; */
}

#logo {
  height:10dvh;
}
/* 导航菜单 */
#nav-menus {
  list-style-type: none;
  display: flex;
  flex-grow: 2;
  flex-direction: row;
  justify-content: flex-end;
  /* order: 2; */
}
#nav-menus li {
  margin-right: 2rem;
  position: relative;
  display: block;
}
#nav-menus a {
  color: var(--highlight-color);
  text-decoration: none;
}
#nav-menus a img {
  vertical-align: text-top;
  /* width: 1rem; */
  height: 3dvh;
  max-height: 20px;
  margin-right: 5px;
}
.nav-button::after {
  display: block;
  position: absolute;
  left: 0;
  content: "";
  width: 100%;
  height: 1px;
  background: #eec21d;
  bottom: -1px; /*アンダーラインがaタグの下端から現れる*/
  transform: scale(0, 1); /*アンダーラインの縮尺比率。ホバー前はx方向に0*/
  transform-origin: left top; /*変形（アンダーラインの伸長）の原点がaタグ（各メニュー）の左端*/
  transition: transform 0.3s;
}
.nav-button:hover:after {
  transform: scale(1, 1);
}

/* ins */
#menu-icon {
  /* width: 30px; */
  height: 30px;
  max-height: 30px;
  background-color: var(--highlight-color);
  margin: 0 20px 0 10px;
}


.screen {
  height: 100dvh;
  display: flex;
  flex-direction: column;   
  justify-content: center;
  align-items: center;
  border-color: #01471f;
  border-width: 2px;
}


.main-image {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
}

.main-text {
  position: absolute;
  display: flex;
  /* 让子元素垂直排列 */
  flex-direction: column;
  /* 垂直方向上居中 */
  justify-content: center;
  /* 水平方向上居中 */
  align-items: center;
  top: 45%;
  right: 5%;
  height: 45dvh;
  max-height: 12rem;
  width: 45dvw;
  border-radius:35px;
  background-color: #01471fc0;
  padding: 20px 40px;
  text-align: center;
}

h1 {
  font-size: 60px;
  margin: 14dvh 0 2rem 0;
  padding-top: 1rem;
  font-weight: 400;

  -webkit-text-stroke: 1.5px #3d3202;
  color: var(--highlight-color);
  text-align: center;
}
#main-title{
  margin-top: 0;
}
h2,h3 {
  font-weight: 200;
}

h2,h3,p,a {
  text-align: center;
}

.main-text p {
  font-size: 30px;
  font-weight: 200;
  /* text-text-stroke: 2px #3d3202; */
  /* WebKit 内核浏览器（如 Chrome、Safari）的写法 */
  -webkit-text-stroke: 1.5px #3d3202;
  color: var(--highlight-color);
}


h1.screen-title {
  margin-bottom: 2rem; 
}

.circle-container {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-shrink: 2;
}

.circle {
  width: 30dvh;
  min-width: 350px;
  height: 25dvh;
  min-height: 250px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin: 50px;
}
.circle.red {
  background-color: #ff8e8e80;
  color: #d23a3a;
  margin-top: -140px;
  margin-right: 50px;
}
.circle.green {
  background-color: #caf78280;
  color: #567328;
}
.circle.blue {
  background-color: #82c6f780;
  color: #3376a7;
  margin-top: -140px;
  margin-left: 50px;
}

.circle>h3 {
  font-size: 24px;
  /* margin-bottom: 1rem; */
} 
.circle>p{
  font-size: 20px;
  margin-top: 1rem;
}

#activity h2, #address h2 {
  font-size: 28px;
  margin: 2rem 0;
}

#activity p {
  font-size: 20px;
}

#app {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
.carouselList{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 90dvw;
  flex-grow: 2;
  margin: 2rem 0;
}
.carouselList_item {
  width: 20dvw;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.carouselList_item span{
  align-self: center;
  width: 10rem;
  text-align: center;
  padding: 0.5rem 0;
  font-size: 18px;
  background-color: #01471f;
  border-radius: 5px;
  margin-bottom: 1rem;
}

.carouselList .el-carousel__item span {
  color: #333;
  font-size: 20px;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.5);
}

.carouselList_item:nth-child(1) span {
  background-color: #f4ccff;
  color:#8c52ff;
}

.carouselList_item:nth-child(2) span {
  background-color: #e8eede;
  color:#567328;
}

.carouselList_item:nth-child(3) span {
  background-color: #f9e7e7;
  color:#d23a3a
}
.carouselList_item:nth-child(4) span {
  background-color: #e3edf4;
  color:#3376a7
}

.el-carousel__item {
  height: 30dvh;
  max-height: 300px;
  flex-grow: 2;
  border-radius: 10px;
  border-width: 2px;
  border-color: #333;
}

.carouselList_item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* #evaluation h1,#support h1,#address h1 {
  margin-top: 2rem;
} */
#evaluation-title{
  margin: 2rem 0;
  padding: 1rem 3rem;
  background-color: #ffe98a;
  border-radius: 15px;
  font-size: 28px;
}
.blank {
  height :20dvh;
  flex-grow: 3;
}
#support p {
  font-size: 20px;
  margin: 2rem 0;
}
.file {
  flex-grow: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-bottom: 2rem;
}
.file a {
  color: black;
  font-size: 32px;
  text-decoration: underline;
}


.address-content {
  display: flex;
  flex-direction: row;
  flex-shrink: 2;
  justify-content: space-between;
}
picture {
  margin: 0 5dvw;
  border-radius: 10px;
}

#map_image {
  width: 50dvw;
  max-width: 40dvw;
  object-fit: cover;
}
.address-detail {
  border-radius:10px;
  background-color: #cfffe3;
  width: 35dvw;
  margin: 0 5dvw;
  flex-grow: 2;
  padding: 1rem;
} 

dl {
  display: flex;
  flex-wrap: wrap;
}

dt {
  flex-basis: 35%;
}

dd {
  flex-basis: 65%;
  margin: 0;
  margin-bottom: 10px;
}

.additional {
  float: left;
  position: absolute;
  z-index: -1;
}
#cloud1 {
  top: 116dvh;
  left: 18dvw;
}
  
#cloud2 {
  top: 122dvh;
  left: 6dvw;
}

#cloud3 {
  top: 116dvh;
  right: 18dvw;
}

#cloud4 {
  top: 122dvh;
  right: 6dvw;
}
#cloud5 {
  top: 216dvh;
  left: 22dvw;
}
  
#cloud6 {
  top: 222dvh;
  left: 4dvw;
}

#cloud7 {
  top: 216dvh;
  right: 22dvw;
}

#cloud8 {
  top: 222dvh;
  right: 4dvw;
}

#cloud9 {
  top: 316dvh;
  left: 6dvw;
}
  
#cloud10 {
  top: 326dvh;
  left: 22dvw;
}

#cloud11 {
  top: 324dvh;
  right: 18dvw;
}

#cloud12 {
  top: 318dvh;
  right: 6dvw;
}
#cloud13 {
  top: 416dvh;
  left: 18dvw;
}
  
#cloud14 {
  top: 422dvh;
  left: 6dvw;
}

#cloud15 {
  top: 424dvh;
  right: 18dvw;
}

#cloud16 {
  top: 418dvh;
  right: 6dvw;
}

footer {
  background-color: var(--background-color);
  height: 24px;
  /* max-height: 44px; */
  /* min-height: 20px; */
  width: 100dvw ;
  margin-top: 24px;
}
footer p {
  color: var(--highlight-color);
}
/* 
#summary {
  background-color: red;
}
#activity {
  background-color: blue;
}
#evaluation {
  background-color: pink;
}
#support{
  background-color: green;
} */