@charset "utf-8";
/* CSS Document */

   
.chp1 {
	position: fixed;
	background-color: gray;
	width: 100%;
	height: 100%;
	}
.chp2 {
	background-color: #f4f7e6;
	width: 100%;
	height: 100%;
}



/*タブを並べる設定*/
.tab-arrow {
    display: flex;
    flex-wrap: wrap;
    max-width: 820px;
}
/*タブ見出しの設定*/
.tab-arrow > label {
    flex: 1 1;
    order: -1;
    position: relative;
    min-width: 6%;
    padding: 0.3em 0.3em;
    background-color: #fff;
    color: #693300;
    font-size: 1.5em;
    text-align: center;
	font-weight: bold;
    border-color: #d3d3d3;
    border-style: solid;
    border-width: 2px;
	border-top-right-radius: 10px;
	border-top-left-radius: 10px;
    cursor: pointer;
}
/*ホバーされた時とクリックされた時*/
.tab-arrow > label:hover,
.tab-arrow label:has(:checked) {
    background-color:darkgray ;
    color: #fff;
}

/*表示しない*/
.tab-arrow input {
    display: none;
}
/*デフォルトでは表示しない*/
.tab-arrow > div {
    display: none;
    width: 100%;
    padding: 1.5em 1em 0em 1em;
}
/*クリックされたら表示*/
.tab-arrow label:has(:checked) + div {
    display: block;
}



.tex1 {
	margin: 2px 15px ;
}



.footer {
	width: 100%;
	height: 35px;
	color: black;
	background-color: #FFF;
    position: absolute;/*←絶対位置*/
    bottom: 0; /*下に固定*/}

/** メインメニューのフレームサイズ **/

.iframe-wrapper {
  position: relative;
  padding-bottom: 100%;
  height: 75%;
  overflow: hidden;
}

.iframe-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}



/*　画面が900px以下は　*/
@media screen and (max-width: 900px) {	
	
	
	.tab-arrow {
		font-size: 0.7em;
		    min-width: 8%;

	}
	.chp1 {
	width: 820px;
	}
	.chp2 {
	width: 820px;
		}
.tex1 {
	margin: 0px 5px ;
}

}
		
/*　画面が600px以下は　*/
@media screen and (max-width: 600px) {	


}

@media screen and (min-width: 901px) {
	.iframe-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 820px;
  height: 1080px;
}



/* CSS Document */