@charset "utf-8";

/* clearfix常駐 */
    div:after,
    ul:after {
    content: "";
    display: block;
    clear: both;
}

/*全デバイス共通設定スタイル*/
*, *:before, *:after {
    box-sizing: border-box;
}
body {
	width: 100%;
    min-width: 500px;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    background-color: #000;
	color: #FFF;
//    background-size: 100% auto;
//    background-image:url(../image/IMG_0021.JPG);
//    -webkit-background-repeat: repeat-y;
//    -moz-background-repeat: repeat-y;
//    background-repeat: repeat-y;
//    -webkit-background-position: top center;
//    -moz-background-position: top center;
//    background-position: top center;
    background-size:contain;
}
body a {
    text-decoration: none;    
}
.video-wrap video {
  position: fixed; right: 0; bottom: 0;
  min-width: 100%; min-height: 100%;
  width: auto; height: auto; z-index: -100;
}

header h1 {
    font-size: 11vw;
    margin-top: 2%;
}
header {
    text-align:center;
	color:coral;
    padding-top: 1%;
    text-shadow: 
        0 0 25px #edf8ff,
        0 0 20px #edf8ff,
        0 0 0.40px #edf8ff;
    margin-bottom: 0.2em;
}
.air {
    text-align: center;
    color: #FFFFFF;
    text-shadow: 2px 2px 0 #000,
             -2px 2px 0 #000,
             2px -2px 0 #000,
             -2px -2px 0 #000;
}
#flexcons {
    width: 100%;
    display: flex;
    padding-top: 1%;
//    background-image:url(../image/Brick01-p.jpg);
//    background-repeat: repeat;
}
.console {
    width: 35%;
    color: #000000; 
    background-color: #3cb371;
    background-color:darkgray;
}
.console a{
    display: block;
    color:blue;    
}
.console p {
    float:left;
}
#navi {
    font-size: 3vw
}

#navi ul li {
    transition: all 0.5s;
    width:33%;
	float:left;
}
#navi ul li a {
    text-decoration: none;
    display: block;
//    padding-top: 20px;
	text-align: center;
    color: #fff;
}
#navi img {
    width: 100%;
    height: 30px;
    margin-top: 3px;
}
#panlist a {
    color:blue;
}
#contentmain {
	width: 100%;
	margin: 0 auto;
//	background-color: whitesmoke;
    color: #000;
    padding: 15px;
//    display: flex;
}
#sidenav {
    width: 15%;
    text-align: center;
}
#menuList li a {
    width: 100%;
}
#content {
    width: 84%;
}
.side_btn{
display: inline-block;
min-height: 45px;
padding: 0.7em 1em;
text-decoration: none;
background: #f7f7f7;
border-left: solid 6px #87ceeb;/*左線*/ color: #0000ff;/*文字色*/ font-weight: bold;
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
margin-bottom: 5%;
}
.side_btn:active {
box-shadow: inset 0 0 2px rgba(128, 128, 128, 0.1);
transform: translateY(2px);
}
#reset {
display: inline-block;
width: 100%;
padding: 0.5em 1em;
text-decoration: none;
background: #f7f7f7;
border-left: solid 6px #87ceeb;/*左線*/ color: #0000ff;/*文字色*/ font-weight: bold;
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
margin-bottom: 2%;
}
.index {
    text-align: center;
    color: #FFFFFF;
    text-shadow: 2px 2px 0 #000,
             -2px 2px 0 #000,
             2px -2px 0 #000,
             -2px -2px 0 #000;
    margin: 0.5em auto;
}
.indexnomal {
    text-align: center;
    color: #FFFFFF;
    margin: 0.5em auto;
}
.backgroundW {
    background-color:cornsilk;
    background: -webkit-radial-gradient(#E4A972, #FFFFFF);
    background: radial-gradient(#E4A972, #FFFFFF);
    padding: 0.5%;
    margin-bottom: 3%;
}
.dataW {
    color: #000000;
}
.backgroundB {
    background: -webkit-radial-gradient(#00bfff, #000000);
    background: radial-gradient(#00bfff, #000000);
    padding: 0.5%;
    margin-bottom: 3%;
}
.backgroundBL {
    background: -webkit-radial-gradient(#000000, #0000FF);
    background: radial-gradient(#000000, #0000FF);
    padding: 0.5%;
    margin-bottom: 3%;
    border: solid 3px #FFF;/*線*/
    border-radius: 10px;/*角の丸み*/
}
.data {
    overflow:auto;
    padding-top: 1%;
    color: #FFFFFF;
    word-break: break-all;
    text-shadow: 1px 1px 0 #000,
             -1px 1px 0 #000,
             1px -1px 0 #000,
             -1px -1px 0 #000;
}
.data a {
    color:bisque;
}
.dataBL {
    overflow:auto;
    padding-top: 1%;
    color: #FFFFFF;
    word-break: break-all;
    text-shadow: 1px 1px 0 #000,
             -1px 1px 0 #000,
             1px -1px 0 #000,
             -1px -1px 0 #000;
}
.dataBL a {
    color:bisque;
}
.flexbox {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content:space-between;
    margin-bottom: 2%;
}
.flexboxnotcenter {
    display: flex;
    justify-content:space-between;
}

.marginauto {
    margin: 0 auto;
}
.flexsitemenu {
    width: 100%;
    display: flex;
    margin: 2% 0;
}
.center {
    text-align: center;
}
.box100 {
    width: 100%;
}
.LR50 {
    width:49%;
}

#sitemap {
    background-color:floralwhite;
    background: -webkit-radial-gradient(#F2B9A1, #EA6264);
    background: radial-gradient(#F2B9A1, #EA6264);
    padding: 1%;
}
.f-info{
     color: #FFFFFF;
}
.portfoliobox {
    width: 100%;
//    float:left;
}
.fl {
 //   width: 47%;
    float: left;
    text-align: center;
    background-color: #444;
    margin: 10px;
}
.fl img {
//		margin: 0 0.50%;
        width: 100%;
//		max-width:  500px;
//        max-height: 375px;
	}
.fl h3 {
//    max-width: 500px;
    height: 50px;
    text-align: center;
    color: #FFFFFF;
    line-height: 120%;
    text-shadow: 2px 2px 0 #3366ff,
             -2px 2px 0 #3366ff,
             2px -2px 0 #3366ff,
             -2px -2px 0 #3366ff;
    margin: 0.5em auto;
}

.fl p {
//    max-width: 500px;
    height: 85px;
    text-align:left;
    color: #FFFFFF;
//    text-shadow: 2px 2px 0 #000,
//             -2px 2px 0 #000,
//             2px -2px 0 #000,
//             -2px -2px 0 #000;
    margin: 0.5em auto;
}
.fl a{
    color:bisque;
    text-align: center;
}
.fl h3{
    margin-bottom: 0.8em;
}
.fl2 {
 //   width: 47%;
    float: left;
    text-align: center;
    background-color: #444;
//    background-color: #000000;
    margin: 10px;
}
.fl2 img {
//		margin: 0 0.50%;
        width: 100%;
//		max-width:  500px;
//        max-height: 375px;
	}
.fl2 h3 {
//    max-width: 500px;
    height: 50px;
    text-align: center;
    color: #FFFFFF;
    text-shadow: 2px 2px 0 #3366ff,
             -2px 2px 0 #3366ff,
             2px -2px 0 #3366ff,
             -2px -2px 0 #3366ff;
    margin: 0.5em auto;
}
.fl2 p {
//    max-width: 500px;
    height: 85px;
    text-align:left;
    color: #FFFFFF;
//    text-shadow: 2px 2px 0 #000,
//             -2px 2px 0 #000,
//             2px -2px 0 #000,
//             -2px -2px 0 #000;
    margin: 0.5em auto;
}
.fl2 a{
    color:bisque;
    text-align: center;
}
.fl2 h3{
    margin-bottom: 0.8em;
}

.msbox {
    display:block;
    background-color:cornsilk;
    background: -webkit-radial-gradient(#E4A972, #FFFFFF);
    background: radial-gradient(#E4A972, #FFFFFF);
    border: inset 10px #00f0ff; 
    padding: 0.5%;
    text-align: center;
}
.msbox2 {
    display:block;
    background-color:cornsilk;
    background: -webkit-radial-gradient(#E4A972, #FFFFFF);
    background: radial-gradient(#E4A972, #FFFFFF);
    border: inset 10px #00f0ff; 
    padding: 0.5%;
}
.msbox2 h3 , .msbox2 h4 {
    text-align: center;
}
.dell {
    text-decoration: line-through;
    color: coral;
}
.red {
    color: coral;
}
footer {
    font-family: 'Ferrum';
    height: auto;
    padding: 0.5% 0 0.5% 0;
	margin: 1% 0 1% 0;
	background-color: aqua;
    color: #000;
//	text-align: center;
}

/* ------------------------------
   CHAPTER ELEMENTS
------------------------------ */
#fixedTop {
	padding: 15px 20px;
	right: 10px;
	bottom: 10px;
	color: #fff;
	text-align: center;
	display: block;
	background: #000;
	position: fixed;
	z-index: 99;
}

.em2 {
    font-size: 2em;
}
.em18 {
    font-size: 1.8em;
}
.em16 {
    font-size: 1.6em;
}
.em14 {
    font-size: 1.4em;
}
.em12 {
    font-size: 1.2em;    
}
.em1 {
    font-size: 1em;    
}
.em07 {
    font-size: 0.7em;    
}
.right-just {
    justify-content: flex-end;
}

/* MediaQuerie */

@media only screen and (max-width: 4000px) {
body {
    font-size: 1.1vw;
    }
.air {
    font-size: 3vw;    
}
.fl {
    width: 23%;
    }
.fl2 {
    width: 23%;
    }
h3 , h4 {
    font-size: 1.5vw;    
}
.backgroundB p {
    position: relative;
    width: 80%;
    left: 20%;        
    }
.backgroundW p {
    position: relative;
    width: 80%;
    left: 20%;        
    }
.data {
    max-height: 1200px;
    }

}

@media only screen and (max-width: 2000px) {
body {
    font-size: 1.3vw;
    }
.air {
    font-size: 3.5vw;    
}
.fl {
    width: 31%;
    }
.fl2 {
    width: 31%;
    }
h3 , h4 {
    font-size: 1.8vw;    
}
    
}

@media only screen and (max-width: 1500px) {
body {
    font-size: 1.7vw;
    }
.air {
    font-size: 4vw;    
    }
h3 , h4 {
    font-size: 2.1vw;    
}
    
}

@media only screen and (max-width: 1300px) {
body {
    font-size: 2.1vw;
    }
.air {
    font-size: 4.5vw;    
}
.fl {
    width: 46%;
    }
.fl2 {
    width: 46%;
    }
h3 , h4 {
    font-size: 2.4vw;    
}
    
}

@media only screen and (max-width: 1100px) {
body {
    font-size: 2.4vw;
    }
.air {
    font-size: 5vw;    
}
h3 , h4 {
    font-size: 2.7vw;    
}
    
}

@media only screen and (max-width: 900px) {
body {
    font-size: 2.7vw;
    background-repeat: repeat;
    background-size: 100%;
    }
.air {
    font-size: 6vw;    
}
h3 , h4 {
    font-size: 3vw;    
}
.backgroundB p {
    position: relative;
    width: 90%;
    left: 10%;        
    }
.backgroundW p {
    position: relative;
    width: 90%;
    left: 10%;        
    }
.data {
    max-height:none;
    }
    
}

@media only screen and (max-width: 700px) {
body {
    font-size: 3.3vw;
    }
.air {
    font-size: 6.5vw;    
}
.fl {
    width: 98%;
    }
.fl2 {
    width: 98%;
    }
h3 , h4 {
    font-size: 3.3vw;    
}
.backgroundB p {
    position: static;
    width: 100%;
    }
.backgroundW p {
    position: static;
    width: 100%;
    }
//#sidenav {
//    width: 24%;
//}
.side_btn{
padding: 1em 1em;
margin-bottom: 3%;
}

}

@media only screen and (max-width: 600px) {
body {
    font-size: 3.3vw;
    }
.air {
    font-size: 7vw;    
}
h3 , h4 {
    font-size: 3.6vw;    
}
    
}