/*****************
トップページ＋全体基本設定
******************/

@charset "utf-8";

/*****************
基本設定
******************/

:root{
    
    --title_color:#2E8B57; /*タイトルカラー*/
    --title_arch:#a6ddb0;  /*h2タイトルのアーチ部*/
    --textarea_color:rgb(152,251,152,0.5); /*テキストエリアカラー*/
    --header_color:rgb(152,251,152,0.5);  /*ヘッダーカラー*/
    --menu_color:rgba(100,150,100,0.7);  /*メニュースライドカラー*/
    --main_color:#f9fff2; /*メインラッパーカラー*/
    --text_color:black;
}


html{
  font-size:100%;
}


/*ボディ設定*/
body{
 font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", sans-serif;
 width:100vw;
 background-image:url(../image/body.png);/*背景画像*/
 /* background-image:url(../image/scale_1400_8000.png);   */
 background-size:content;
 background-repeat:no-repeat;
 background-position:center bottom; /*バック画像縦位置調整*/
 /*background-position:center -1565px; バック画像縦位置調整*/
 background-color:#F5FFFA;/*バック色　薄緑色*/
 overflow-x:hidden;
}

a{
    text-decoration:none;
}

ul{
    list-style-type:none;
    padding-left:0;
}

img{
    max-width:100%;
}

/*title文字の設定*/
h2.sub_title{
    position: relative;
    /*color: #158b2b; 緑（梅雨）*/
    /*color: #ADFF2F;緑（デフォルト)*/
    /*color:#F8B400; オレンジ（秋）*/
    color:var(--title_color);
    font-size: 20px;
    padding: 10px 0;
    text-align: center;
    margin: 1.5em 0;
   }

h2.sub_title:before {
    content: "";
    position: absolute;
    top: -8px;
    left: 50%;
    width: 150px;
    height: 58px;
    border-radius: 50%;

    border: 5px solid var(--title_arch);
    border-left-color: transparent;
    border-right-color: transparent;
     -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
   }

/*テキストエリア*/
p.text{
    color:var(--text_color);
    background-color:var(--textarea_color);
    border:2px dashed white;
    outline:10px solid var(--textarea_color);
    padding:1rem;    
}


/*ラッパー*/
.main-wrapper{
    max-width:1000px;
    padding:1rem;
    margin:0 auto;
}

/*****************
header
******************/

/*top部分*/
#header{
    background-image:url(../image/top_back.png); /*葉っぱ*/
    background-repeat:no-repeat;
}

#header .top{
  display:flex;
  justify-content:space-between;
  align-items: center;
  margin-bottom:2rem;
}

#header .logo{
    max-width:50%;
}

/*menu部分*/
#header .menu{
    background-image:url(../image/menu_back.png);
    background-repeat:no-repeat;
    padding:1rem;
    margin:1rem 0rem;
}

#header .menu ul{
    display:flex;
    justify-content:space-evenly;
}

#header .menu li h2{
    font-size:1.5rem;
    font-weight:800;
    text-align:center;
    color:var(--title_color);
}

#header .menu li a p{
    font-size:1rem;
    font-weight:800;
    text-align:center;
    color:var(--title_color);
}


/*key-visual部分*/

#key-visual{
    width:100%;
    /* height:20vh; */
    height:80vh;  /*修正*/

    background-image:url(../image/gaikan.png);
    background-repeat:no-repeat;
    display:grid;
    place-items:center;
    margin-top:-2rem;
    position:relative;

}

/*上部canvas設定 jsアニメ設置陽*/
#myCanvas1{
    position:absolute;
    top:0rem;
    left:0rem;
    background-color:transparent;
    z-index:999;
}

/*****************
New
******************/

#new{
    height:fit-content;
    display:flex;
    justify-content: space-around;

}

/*左サイド　お知らせ部分*/
#new .left{
  width:50%;
}

/*右サイド　3Dボックス部分  3Dボックスはbox.cssで設定,画像はbox_imageフォルダ*/
#new .right {
  width:50%;
  display:flex;
  justify-content: center;
  align-items: center;
}

/*****************
contents
******************/

#contents{
    height:fit-content;
    width:100%;
   
}

/*タイトルバナー*/
#contents .title{
    /* height:13vh; */
    width:100%;
    height:13vh;
    background-image:url(../image/about.png);
    background-repeat:no-repeat;
    background-size:cover;
    margin:1rem 0;
}

#contents .flex{
    display:flex;
}

/*左サイド*/
#contents .left{
    width:50%;
}

/*右サイド*/
#contents .right{
    width:50%;
    padding-left:1rem;
}

#contents .right ul li img{
    margin:1rem;
}

#contents .otoiawase img{
    display:block;
    margin:0 auto;
    margin-top:3rem;
}

/*****************
access
******************/

/*タイトルバナー*/
#access .title{
    height:40vh;
    background-image:url(../image/access.png);
    background-repeat:no-repeat;
    background-size:100%;
}

/* #access .back_image{ 
    background-repeat:no-repeat;
    background-size:cover;
    opacity:0.8;
} */

#access .flex{
    display:flex;
    padding:1rem;
}

/*左サイド*/
#access .left{
    width:50%;
}

/*マップ下文字*/
.map_p{
    text-align:center;
    color:#fff;
    font-weight:bold;
    background-color:rgba(100,100,100,0.5);
   }


/*右サイド*/
#access .right{
    width:50%;
}

/*youtube用枠*/
#access iframe{
    width:100%;
    height:80%;
    margin-top:3rem;
}

#access .youtube{
    position:relative;
    top:-10px;
    left:15px;
    width:100%;
    height:45vh;
    background-color:rgba(200,200,0,0);
}

/*画像拡大表示window*/
#mapWindow{
    position:fixed;
    top:10%;
    left:25%;
    width:50%;
    z-index:-1;
    display:none;
    visibility:hidden;
    border:5px solid black;
    border-radius:10px;
    background-color:white;
}

#mapWindow.active{
    z-index:999;
    display:block;
    visibility:visible;
}

#mapWindow .btn{
    position:absolute;
    top:-25px;
    right:10px;
    border:4px solid black;
    background-color:rgb(200,255,200);
    font-size:1.5rem;
    padding:0.5rem 2rem;
}


/*****************
フッター
******************/


#footer{
    background-color:var(--title_color);
    padding:2rem;

}

#footer p{

    color:white;
    text-align:center;
}

.footer_wrapper{
    position:relative;
    top:6.5rem;
}