@charset "UTF-8";

@media screen and (min-width: 791px) { /*ウィンドウ幅が540px以上の場合に適用*/
  

body{
margin-top: 100px;
background-color : #004d29;
text-align:left;
font-size:14px;
font-family: sans-serif;
color:#fff
} 

#fixed {
z-index: 30;
position: fixed;
top: 0;
left: 0; 
height: 70px; 
width: 100%; 
background: #004d29;
font-size: 20px;
font-weight: bold;
COLOR:#000;
font-family: "Helvetica Neue",
Arial,
"Hiragino Kaku Gothic ProN",
"Hiragino Sans",
Meiryo,
sans-serif;
color:#000 
}


#menu2 {
  /*配置*/
  z-index: 20;
  position: fixed;
  top: 70px;
  left: 0; 
  margin: 0; 
  padding: 0; 
  height:50px; 
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  background: linear-gradient(90deg, #c1ab05 0%, #013b20 50%, #c1ab05  100%);
}

#menu2 ul{
  /*横並びに表示する*/
  display: flex;
  font-size:19px;
  font-family: "Meiryo UI", sans-serif;
 }
 
 #menu2 li{
  /*横並びに表示する*/
   list-style: none;
   padding: 10px;
 }

 .list2 {
  top: 40px;
  list-style-type: none;
  padding: 0;
  width:80%;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  
}


.flex_box {
  padding:  2px;             /* 余白指定 */
  display: flex;              /* フレックスボックスにする */
  justify-content:center;            /* 要素の位置中央 */
  flex-wrap: wrap;            /* 折り返し指定 */
  
}

#menu3 {
  /*配置*/
  position: fixed;
  top: 80px;
  left: 0; 
  margin: 0; 
  padding: 0; 
  height:30px; 
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fffacc;
}



.flex_item_menu {
  padding: 2px;
  color:  #fff;               /* 文字色 */
  margin:  2px;              /* 外側の余白 */
  border-radius:  3px;        /* 角丸指定 */
  align-self: stretch;
  width: 100px;
  background-color:  #ccc8a3; /* 背景色指定 */
  text-align:  center;
}


.flex_item {
  margin-top: 5px;  /* 外側の余白 */
  margin-left: 20px;
  margin-right: 20px;
  margin-bottom: 5px;
  padding: 8px;
  color:  #fff;               /* 文字色 */            
  border-radius:  10px;        /* 角丸指定 */
  align-self: stretch;
  width: 340px;
  height: 115px;
  text-align:  center;
}


.flex_item2 {
  margin-top: 20px;  /* 外側の余白 */
  align-self: stretch;
  border-radius:  10px;        /* 角丸指定 */
  color:  #fff;               /* 文字色 */  

}

.flex_item2:nth-child(1) {
  /*  動画または写真  */
  padding: 30px;
  width: 380px; 
  background-color: #004d29;  /* 背景色指定 */
}

.flex_item2:nth-child(2) {
  margin-left: 20px;  /* 外側の余白 */
  padding: 0;
  font-size:14px;
  width: 420px;
  background-color:  #004d29; /* 背景色指定 */
  color:  #fff;               /* 文字色 */ 
  text-align:  center;
}

.flex_item3 {
  color:  #fff;               /* 文字色 */
  align-self: stretch;
  width: 380px;
  text-align:  center;
}

.flex_item4 {
  padding: 10px;
  color:  #fff;               /* 文字色 */
  margin:  5px;              /* 外側の余白 */
  border-radius:  10px;        /* 角丸指定 */
  align-self: stretch;
  width: 380px;
  text-align:  center;
  border: solid 2px #000;/*線*/
}

.flex_item5 {
  padding: 20px;
  color:  #fff;               /* 文字色 */
  margin:  5px;              /* 外側の余白 */
  border-radius:  10px;        /* 角丸指定 */
  align-self: stretch;
  font-size:14px; 
  width: 450px;
  border: solid 2px #000;/*線*/
}


.tab-area{
  width: 658px;
  margin: 0 auto;
  }
  .tab-btn{
  display:none; /*タブの切り替えを制御するラジオボタンを非表示に*/
  }
  .tab-list-wrap{
  padding:0; /*デフォルトの値をクリア*/
  margin: 0; /*デフォルトの値をクリア*/
  list-style-type:none; /*デフォルトの値をクリア*/
  display:flex; /*ボタンを横並びに*/
  justify-content:space-between; /*ボタンを横幅いっぱいに配置*/
  }
   
  .tab-list{
  display:block;
  width: 130px;
  height: 55px;
  padding: 8px 0;/*幅の高さの余白*/
  text-align:center;
  border-top:1px solid #000;
  border-left:1px solid #000;
  border-right:1px solid #000;
  
  border-radius: 4px 4px 0 0;
  background: #fff;
  box-sizing:border-box; /*borderの値を横幅に含める*/
  cursor:pointer; /*オンマウス時にカーソルを指の形に*/
  }
   
  #tab-btn1:checked ~ .tab-list-wrap #tab-list1,
  #tab-btn2:checked ~ .tab-list-wrap #tab-list2,
  #tab-btn3:checked ~ .tab-list-wrap #tab-list3,
  #tab-btn4:checked ~ .tab-list-wrap #tab-list4,
  #tab-btn5:checked ~ .tab-list-wrap #tab-list5{
  background:#FFD700; /*対応するボタンにチェックが入ったときに背景を#ffffff（白）に*/
  }
  .tab-content{
  padding:5px;
  border-top:1px solid #000;
  border-bottom: 1px solid #000;
  border-left: 1px solid #000;
  border-right: 1px solid #000;
  display:none; /*初期状態を非表示に*/
  }
  #tab-btn1:checked ~ .tab-content-wrap #tab-content1,
  #tab-btn2:checked ~ .tab-content-wrap #tab-content2,
  #tab-btn3:checked ~ .tab-content-wrap #tab-content3,
  #tab-btn4:checked ~ .tab-content-wrap #tab-content4,
  #tab-btn5:checked ~ .tab-content-wrap #tab-content5{
  display: block;/*対応するボタンにチェックが入ったときに表示*/
}



.box1{
  width: 115px;
  margin-top: 30px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 30px
  }


.box2{
  padding-top:0;
  margin-top:0;
  height: auto;
  width: 550px;
  margin-left: auto;
  margin-right: auto;
}


.youtube {
  position: relative;
  width: 360px;
  padding-top: 56.25%;
 
}
.youtube iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

a{
text-decoration: none;
color:#fff;
 
}

a.anchor {
  display: block;
  position: relative;
  top: -120px;             /* リンク位置ずれ対策 */
  visibility: hidden;
}



a:hover{
  /* カーソルが重なった時のスタイル */
  width: 120px;
  height: 35px;
  background-color:#c1ab05 
}

h1{
font-size:20px;
COLOR:#fff;
}

h2{
font-size:18px;
COLOR:#fff;
text-align:center;
}

h3{
  font-size:14px;
  COLOR:#fff;
  text-align:center;
  }

h4{
  font-size:12px;
  COLOR:#fff;
  padding-left:70px;
  }
  
p{
  text-align: center;
  margin-top: 5px;
  line-height: normal;
  COLOR: #fff;
}

.title {
  margin-top:-130px;
  padding-top:130px;
  }


@keyframes fade{
  0%{
    opacity: 0;
  }
  100%{
    opacity: 1;
  }
}

  
* {/*　フローチャート　*/
  box-sizing: border-box;
}

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



/*　フォーム　*/
#formWrap {
	width: 100%;
	margin:0 auto;
	color:#000;
	line-height:200%;
	font-size:90%;
  margin-left: auto;
  margin-right: auto;
}
table.formTable{

	margin:0 auto;
	border-collapse:collapse;
}
table.formTable td,table.formTable th{
	border:3px solid #ccc8a3;
	padding: 5px;
  height: 60px;
}
table.formTable th{
	font-weight:normal;
	background:#fff599;
	text-align:left;

}
}

/*　簡易版レスポンシブ用CSS（スマホ用）　*/
@media screen and (max-width:790px) {

  body{
    margin-top: 100px;
    background-color : #004d29;
    text-align:left;
    font-size:12px;
    font-family: sans-serif;
    color:#fff
    } 


  #fixed {
    z-index: 30;
    position: fixed;
    top: 0;
    left: 0;   
    height: 55px; 
    width: 100%; 
    font-size: 14px;
    font-weight: bold; 
    background: #004d29;
    COLOR: #000;
    font-family: "Helvetica Neue",
    Arial,
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    Meiryo,
    sans-serif;
    color:#000      
    }
    
    #menu2 {
      /*配置*/
      z-index: 20;
      position: fixed;
      top: 55px;
      left: 0; 
      margin: 0; 
      padding: 0; 
      height: 65px; 
      width:100%;
      display:flex;
      align-items:center;
      justify-content:center;
      background: linear-gradient(90deg, #c1ab05 0%, #013b20 50%, #c1ab05  100%);
    
    }


    .list {
      position: fixed;
      top: 55px;
      list-style-type: none;
      padding: 0;
      margin: 1px;
      height: 65px; 
      display: flex;
      flex-wrap: wrap;
      
    }
  

    .item {
      color: #fff;
      height: 20px; 
      
      width: calc(33%);
      text-align:center;
      font-size:12px;
      margin-top: auto;
    }

    .flex_box {
      padding:  2px;             /* 余白指定 */
      display: flex;              /* フレックスボックスにする */
      justify-content:center;            /* 要素の位置中央 */
      flex-wrap: wrap;            /* 折り返し指定 */
      
    }

    .flex_item2 {
      margin-top: 5px;  /* 外側の余白 */
      align-self: stretch;
      color:  #fff;               /* 文字色 */  
    
    } 

    .flex_item2:nth-child(1) {
      /* 動画または写真 */
      padding-top: 5px;
      border-radius:  1px;        /* 角丸指定 */   
      background-color:  #004d29; /* 背景色指定 */
      width: 350px;
      
    }    
    
  
      .flex_item2:nth-child(2) {
        font-size:12px;
        color:  #fff;               /* 文字色 */
        text-align:center;
      }

      .flex_item2 img {
        width: 95%;
        height: 95%;
      } 
  
    .flex_item3 {
      padding: 20px;
      color:  #fff;               /* 文字色 */
      margin:  10px;              /* 外側の余白 */
      border-radius:  10px;        /* 角丸指定 */
      align-self: stretch;
      width: 350px;
    }
  
    .flex_item4 {
      display: flex;
      flex-direction: column; /* 追加：フレックスアイテムを縦並びに変更 */
      width:95%;
      padding: 10px;
      color:  #fff;               /* 文字色 */
      margin:  10px;              /* 外側の余白 */
      border-radius:  10px;        /* 角丸指定 */
      align-self: stretch;
      font-size:14px;
      text-align:  center;
      border: solid 2px #000;/*線*/
    }


    .flex_item5 {
      padding: 0;
      color:  #fff;               /* 文字色 */
      margin:  1px;              /* 外側の余白 */
      align-self: stretch;
      border: solid 2px #004d29;/*線*/
      width: 400px;
    }
  
    .flex_item6 {
      padding: 10px;
      color:  #000;               /* 文字色 */
      margin:  4px;              /* 外側の余白 */
      border-radius:  10px;        /* 角丸指定 */
      align-self: stretch;
      background-color:  #f3e9c2; /* 背景色指定 */
      border: solid 3px #ccc8a3;/*線*/ 
    }  

    .flex_item7 {
      padding: 10px;
      color:  #000;               /* 文字色 */
      margin:  4px;              /* 外側の余白 */
      border-radius:  10px;        /* 角丸指定 */
      align-self: stretch;
      background-color:  #f3e9c2; /* 背景色指定 */
      border: solid 3px #ccc8a3;/*線*/
    }


  .tab-area{
    width: 308px;
    margin: 0 auto;
    }
    .tab-btn{
    display:none; /*タブの切り替えを制御するラジオボタンを非表示に*/
    }
    .tab-list-wrap{
    padding:0; /*デフォルトの値をクリア*/
    margin: 0; /*デフォルトの値をクリア*/
    list-style-type:none; /*デフォルトの値をクリア*/
    display:flex; /*ボタンを横並びに*/
    justify-content:space-between; /*ボタンを横幅いっぱいに配置*/
    }
     
    .tab-list{
    display:block;
    font-size:10px;
    width: 61px;
    height: 48px;
    padding: 8px 0;/*幅の高さの余白*/
    text-align:center;
    border-top:1px solid #000;
    border-left:1px solid #000;
    border-right:1px solid #000;
    border-radius: 4px 4px 0 0;
    background: #fff;
    box-sizing:border-box; /*borderの値を横幅に含める*/
    cursor:pointer; /*オンマウス時にカーソルを指の形に*/
    }
     
    #tab-btn1:checked ~ .tab-list-wrap #tab-list1,
    #tab-btn2:checked ~ .tab-list-wrap #tab-list2,
    #tab-btn3:checked ~ .tab-list-wrap #tab-list3,
    #tab-btn4:checked ~ .tab-list-wrap #tab-list4,
    #tab-btn5:checked ~ .tab-list-wrap #tab-list5{
    background:#FFD700; /*対応するボタンにチェックが入ったときに背景を#ffffff（白）に*/
    }
    .tab-content{
    padding:5px;
    border-top:1px solid #000;
    border-bottom: 1px solid #000;
    border-left: 1px solid #000;
    border-right: 1px solid #000;
    display:none; /*初期状態を非表示に*/
    }
    #tab-btn1:checked ~ .tab-content-wrap #tab-content1,
    #tab-btn2:checked ~ .tab-content-wrap #tab-content2,
    #tab-btn3:checked ~ .tab-content-wrap #tab-content3,
    #tab-btn4:checked ~ .tab-content-wrap #tab-content4,
    #tab-btn5:checked ~ .tab-content-wrap #tab-content5{
    display: block;/*対応するボタンにチェックが入ったときに表示*/
  }



  .box1{
    width: 115px;
    margin-top: 60px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 30px
    }
  
  
  .box2{
    padding-top:0;
    margin-top: 0;
    height: auto;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
  }
   
  .youtube {
    position: relative;
    width: 90%;
    padding-top: 56.25%;
   
  }
  .youtube iframe {
    position: absolute;
    top: 0;
    right: 0;
    width: 90%;
    height: 90%;
  }

  a{
  
  text-decoration: none;
  color:#fff;
  }
  
  a:hover{
  background-color:#c1ab05
  }

  a.anchor {
    display: block;
    position: relative;
    top: -130px;          /* リンク位置ずれ対策 */
    visibility: hidden;
  }
 

  h1{
    font-size:14px;
    COLOR:#fff;
    }
  
  h2{
  font-size:14px;
  COLOR:#fff;
  text-align:center;
  }
  
  h3{
    font-size:12px;
    COLOR:#fff;
    text-align:center;
    }
    
  p{
    text-align: center;
    margin-top: 5px;
    line-height: normal;
    COLOR: #fff;
  }
  
  #menu {/*　フォーム　*/
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    }

#formWrap {
	margin:0 auto;
}
table.formTable th, table.formTable td {
	width:100%;
	display:block;
}
table.formTable th {
	margin-top:5%;
	border-bottom:0;
}
input[type="text"], textarea {
	width:98%;
	padding:5%;
	font-size:110%;
	display:block;
}
input[type="submit"], input[type="reset"], input[type="button"] {
	display:block;
	width:100%;
	height:12%;
}

  


  .prof {
    padding-top:120px;
    margin-top:-120px;
  
   }
  
  @keyframes fade{
    0%{
      opacity: 0;
    }
    100%{
      opacity: 1;
    }
  }
  
  .navi{
    position:fixed;
    bottom:1px;
    right:10px;
  }

  * {/*　フローチャート　*/
    box-sizing: border-box;
  }
  
  ul {
    padding: 0;
  }
  li {
    list-style-type: none;
  }
  dd {
    margin-left: 0;
  }
  
  


}