@charset "UTF-8";

*{margin: 0;
padding: 0;}

body{width: 100%;}

body{background-image:url("asset/background_img.png");
     background-repeat: no-repeat;
    background-size: cover;
background-color:white; /*背景色指定*/
    background-attachment: fixed;}

header nav ul{display: flex;
    justify-content: flex-end;
    position: fixed;
    z-index: 99;
    top:40px;
    right: 10px;
    }

nav ul li{list-style-type: none;}

nav ul li a{display: block;
    text-decoration: none;
    color: white;
    margin:0 20px;
    font-size: 15pt;
    text-shadow:2px 2px 2px rgba(100, 100, 100, 0.9);
    font-family: "Sawarabi Gothic", sans-serif;
  font-weight: 400;
  font-style: normal;}



/*hover時*/
.body_li {
  position: relative;
  display: inline-block; /* または block */
  padding: 0 0 10px 0; /* テキストと円の間のスペース */
}

.body_li::before {
  content: "";
  position: absolute;
  bottom: -10px; /* 円の位置調整 */
  left: 50%;
  transform: translateX(-50%);
  width: 10px;
  height: 10px;
  background-color: white;
  border-radius: 50%;
  opacity: 0; /* 初期状態では非表示 */
  transition: opacity 0.3s ease; /* アニメーション */
  box-shadow: 2px 2px 2px rgba(100, 100, 100, 0.9);
}

.body_li:hover::before {
  opacity: 1; /* ホバー時に表示 */
}

.body_li_a{
  position: relative;
  z-index: 1; /* 円より前面に表示 */
}


.header_mainky{width: 100%;}
.header_mainky_mobile{width: 100%;}

.header_mainky{display: block !important;}
.header_mainky_mobile{display: none !important;}



.body_index{display: flex;
    justify-content: flex-end;
    position: fixed;
    z-index: 99;
    top:150px;
    right: 0;
    writing-mode: vertical-rl;
    padding: 40px 30px;
    text-align: center;
    color: white;
    background-color: #60b74c;
    font-size: 20px;
   font-family: "Sawarabi Gothic", sans-serif;
  font-weight: 400;
  font-style: normal;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    border: solid #FFFFFF 4px;
    border-right: none;
    }
.body_index img{width: 30px;
    margin:0 0 20px;}

.body_index:hover{background-color: #498d3b;}


.main_title{width: 100%;
    text-align: center;
    background-color: #419123;
    color: white;
    padding:100px 0;
    font-size: 25pt;
    font-family: "Sawarabi Gothic", sans-serif;
  font-weight: 400;
  font-style: normal;
    letter-spacing:0.12em;}

.main_about{width: 100%;
    text-align:center;}
.main_about_h1{width: 100%;
    font-size: 49pt;
    font-family: "Sawarabi Gothic", sans-serif;
  font-weight: 400;
  font-style: normal;
    color: #67b94c;
    margin: 100pt 0 50pt 0;}
.main_about_border{width: 70%;}
.main_about_text{width: 90%;
    font-size: 20pt;
    font-family: "Sawarabi Gothic", sans-serif;
  font-weight: 400;
  font-style: normal;
    margin: 50px auto;
    line-height: 55pt;
    letter-spacing:0.14em;}

.main_event{width: 100%;
    text-align: center;
    margin: 200pt 0;}
.main_event_title{font-family: "Sawarabi Gothic", sans-serif;
  font-weight: 400;
  font-style: normal;
    color:#67b94c;
    font-size: 17pt;}
.main_event_title_span{font-size: 49pt;
    margin: -20px 0 0 0;}

.main_event_cafe_btn{height: 100px;}
.main_event_cafe img{margin: 50px 0 0 0;}

.main_event_cafe_pc{width: 100%;}
.main_event_cafe_mobile{width: 100%;}

.main_event_cafe_pc{display: block !important;}
.main_event_cafe_mobile{display: none !important;}



.main_activity{width: 100%;
    text-align: center;
    margin: 200pt 0;}
.main_activity_title{font-family: "Sawarabi Gothic", sans-serif;
  font-weight: 400;
  font-style: normal;
    color:#67b94c;
    font-size: 17pt;
    margin: 0 0 50px;}
.main_activity_title_span{font-size: 49pt;
    margin: -20px 0 0 0;}
.main_activity_subtitle{font-size: 25pt;
    color: #419123;
    font-family: "Sawarabi Gothic", sans-serif;
  font-weight: 400;
  font-style: normal;}



.main_activity_h1{width: 100%;
    font-size: 49pt;
   font-family: "Sawarabi Gothic", sans-serif;
  font-weight: 400;
  font-style: normal;
    color: #67b94c;
    margin: 100pt 0 50pt 0;}
.main_activity_border{width: 70%;}
.main_activity_text{width: 90%;
    font-size: 20pt;
    font-family: "Sawarabi Gothic", sans-serif;
  font-weight: 400;
  font-style: normal;
    margin: 50px auto;
    line-height: 55pt;
    letter-spacing:0.14em;}



.main_event_experience img{margin: 50px 0 0 0;}

.main_event_experience_pc{width: 100%;}
.main_event_experience_mobile{width: 100%;}

.main_event_experience_pc{display: block !important;}
.main_event_experience_mobile{display: none !important;}

.main_map{width: 100%;
    text-align: center;
    margin: 200pt 0;}
.main_map_title{font-family: "Sawarabi Gothic", sans-serif;
  font-weight: 400;
  font-style: normal;
    color:#67b94c;
    font-size: 17pt;}
.main_map_title_span{font-size: 49pt;
    margin: -20px 0 0 0;}

.main_map_element{display: flex;
    width: 100%;}
.main_map_element iframe{margin: 10px 20px;
    width: 50%;}
.main_map_element_text{text-align: center;
    width: 50%;
    font-size: 20pt;
    font-family: "Sawarabi Gothic", sans-serif;
  font-weight: 400;
  font-style: normal;
    margin:200px 0 0;}

.main_img_scissors{text-align: center;}
.main_img_scissors img{width: 90%;}


.main_contact{width: 100%;
    text-align: center;
    margin: 80pt 0;}
.main_contact_title{font-family: "Sawarabi Gothic", sans-serif;
  font-weight: 400;
  font-style: normal;
    color:#67b94c;
    font-size: 17pt;}
.main_contact_title_span{font-size: 49pt;
    margin: -20px 0 0 0;}

.main_contact_text{width: 100%;
    text-align: center;
    font-family: "Sawarabi Gothic", sans-serif;
  font-weight: 400;
  font-style: normal;
    color: #424242;
    margin: 50px 0;}




@media screen and (max-width: 960px) 
{.main_about_h1{width: 100%;
    text-align: center;
    font-size: 39pt;
    color: #67b94c;
    margin: 100pt 0 0 0;}
header nav ul li a{font-size: 25px;
        margin:0 20px;}
    
    .body_index{
    z-index: 99;
    top:auto;
    bottom: 0;
    right: 0;
    writing-mode: vertical-rl;
    padding: 60px 50px;
    text-align: center;
    color: white;
    background-color: #60b74c;
    font-size: 20px;
    font-family: "Sawarabi Gothic", sans-serif;
  font-weight: 400;
  font-style: normal;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    border: solid #FFFFFF 4px;
    border-right: none;
    }
.body_index img{width: 30px;
    margin:0 0 20px;}
    
.main_map{
    margin: 100pt 0;}
    
    .main_map_element{display:block;}
    .main_map_element iframe{margin: 100px 10px 0;
    width: 90%;}
.main_map_element_text{text-align: center;
    width: 100%;
    font-size: 15pt;
    font-family: "Sawarabi Gothic", sans-serif;
  font-weight: 400;
  font-style: normal;
    margin:50px 0 0;}
}

@media screen and (max-width: 600px) 
{
    header nav ul li a{font-size: 13px;
        margin:0 10px;}
     
    .body_index{display: flex;
    top:auto;
    bottom: 0;
    right: 0;
    padding: 0px 40px;
    justify-content: normal;
    position: fixed;
    writing-mode: horizontal-tb;
    text-align: center;
    color: white;
    font-size: 20px;
    font-family: "Sawarabi Gothic", sans-serif;
  font-weight: 400;
  font-style: normal;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-left-radius:0px;
    border: solid #FFFFFF 4px;
    border-right:solid #FFFFFF 4px;
    border-bottom: 0;
    line-height: 60px;
    }
     .body_index img{width: 40px;
    margin:10px 20px 30px 0;}
    
    
    
    .main_about_h1{
    font-size: 30pt;
    margin: 100pt auto 50pt auto;}
.main_about_border{width: 80%;}
.main_about_text{width: 80%;
    font-size: 13pt;
    font-family: "Sawarabi Gothic", sans-serif;
  font-weight: 400;
  font-style: normal;
    margin: 50px auto 30px auto;
    line-height: 35pt;
    letter-spacing:0.14em;
	text-align: left;}
    
    .main_event{
    margin: 100pt 0;}
    
    .main_activity{
    margin: 100pt 0;}
    .main_activity_subtitle{font-size: 20pt;}
    
    .main_activity_h1{
    font-size: 25pt;
    margin: 70pt 0 50pt 0;}
    .main_activity_border{width: 80%;}
    .main_activity_text{width: 80%;
    font-size: 13pt;
    font-family: "Sawarabi Gothic", sans-serif;
  font-weight: 400;
  font-style: normal;
    margin: 50px auto 30px;
    line-height: 35pt;
    letter-spacing:0.14em;
	text-align: left;}
    
    .main_map{
    margin: 100pt 0;}
    
    .main_map_element{display:block;}
    .main_map_element iframe{margin: 100px 10px 0;
    width: 90%;}
.main_map_element_text{text-align: center;
    width: 100%;
    font-size: 15pt;
    font-family: "Sawarabi Gothic", sans-serif;
  font-weight: 400;
  font-style: normal;
    margin:50px 0 0;}
    
    .main_contact_text{width: 100%;
    text-align: center;
    font-family: "Sawarabi Gothic", sans-serif;
  font-weight: 400;
  font-style: normal;
    color: #424242;
    margin: 50px 0;
    font-size: 15pt;}
    
    .main_activity_img_back{background-image: url("asset/main_activity_img_back.png");
        background-size: cover;
        width: 90%;
        background: center;}

    }
    
    
 @media only screen and (max-width : 960px ){
    .header_mainky{display: none !important;}
    .header_mainky_mobile{display: block !important;}

}

@media screen and (max-width: 428px) 
{.main_about_h1{width: 100%;
    text-align: center;
    font-size: 20pt;
    font-family: "Sawarabi Gothic", sans-serif;
  font-weight: 400;
  font-style: normal;
    color: #67b94c;
    margin: 100pt 0 0 0;}
header nav ul{
    top:20px;
    right: 10px;
    }
    }