/*HP制作に慣れる*/
article, aside, details, figcaption, figure, header, hgroup, menu, nav, section {
display: block;
}

body{
font-family: "メイリオ",sans-serif;

}
/*aタグをブロックラインにすることでマウスのクリック範囲が広が*/
a{
display: block;
}

#wrap{                       f
/*自動的に左右の余白が調整され、中央寄せで表示*/
/*100%は大きなボックスで見ている(そのため、margin:0 autol;を記載しても実質適用されない)(pxは小さなボックスで見ている)*/
margin:0 auto;
width:100%;
/*background-color:green;*/
}

#mainimg{
z-index:-1;
width:100%;
height:50em;
position:absolute;
background-image: url("../image/top-bk.png") ;
background-size:cover;
background-repeat:repeat-y;
}

#mainimg2{
z-index:-1;
width:100%;
height:70em;
position:absolute;
background-image: url("../image/top-bk.png") ;
background-size:cover;
background-repeat:repeat-y;

}


.title_txt{
position:relative;
width:100%;
height:20%;
}

.title_txt h2{
position:absolute;
margin-left:35px;
top: 0;
font-size:4.4em;
font-family: 'Great Vibes', cursive;
color:#fff;

}

a:link{
        color:#fff;
        text-decoration : none; /*リンクの下線を表示しないようにする。*/
}

a:visited{
        color:#fff;
        text-decoration : none; /*リンクの下線を表示しないようにする。*/
}

a:visited{
        color:#fff;
        text-decoration : none; /*リンクの下線を表示しないようにする。*/
}

a:active{
        color:#fff;
        text-decoration : none; /*リンクの下線を表示しないようにする。*/
}


.block_box{
position:relative;
height:56%;
color:white;
}

.block_box p{
position:absolute;
margin-top:100px;
color:white;
}

.center_box{
position: relative;

}

.center_box ul{
position: absolute;
margin-top:360px;
z-index:2;
background-color:#000;
    filter:alpha(opacity=80);
    -moz-opacity: 0.8;
    opacity: 0.8;
color:#fff;
margin-bottom:3px;
margin-top:170px;
width:15%;

}

#header-right{
position: absolute;
/*float:left;*/
/*padding-left:50%;*/
width:100%;
text-align:center;
height:230px;
margin-top:223px;
}

#header-right li{
margin-top:23px;
margin-bottom:10px;
margin-right:-2000px;
padding-top:12px;
padding-bottom:10px;

}

#header-right_2{
position: absolute;
/*float:left;*/
/*padding-left:50%;*/
/*width:100%;*/
text-align:center;
height:144px;
padding-top:20px;
padding-left:0;
}

#header-right_2 li{
margin-top:-7px;
margin-bottom:10px;
/*margin-right:-2000px;*/
padding-top:12px;
padding-bottom:10px;
list-style: none;

}

.boxmoji{
position: absolute;
margin-left: 30%;
/*margin-top: 8%;*/
margin-top: 125px;
width:65%;
height:55px;
/*background-color: #FF8119;*/
}

.boxmoji h2{
/*フェードインのタイミングが全部表示された後*/
font-family: 'Great Vibes', cursive;
font-size:3.4em;/*文字の広さで幅も確保可能*/
background-color:#000;
    filter:alpha(opacity=80);
    -moz-opacity: 0.8;
    opacity: 0.8;
color:#fff;
margin-bottom:3px;
padding-left:21px;

}

/*四角に分けるための大型ボックスを位置づけ後、中身を作成する*/
.portfoliobox_positon{
position: absolute;
margin-left: 30%;
/*margin-top: 14%;*/
margin-top:219px;
width:65%;
/*background-color: #FF8119;*/
/*z-index:2;*/


}

/*選択できる中身*/
.portfoliobox_positon h2{
background-color:#000;
    filter:alpha(opacity=80);
    -moz-opacity: 0.8;
    opacity: 0.8;
color:#fff;
margin-bottom:3px;
padding-left:21px;
height:700px;
/*text-align:center;*/
padding-top:20px;
}

.p_box1{
position: absolute;
z-index:1;
/*background-color:#fff;*/
color:#fff;
margin-top:-40em;
margin-left:3%;
width:25%;
height:200px;
}

.p_box1 .p_box1_moji {
z-index:1;
 /*margin: 15px auto;
 padding: 10px 5px 2px;*/
/*position: absolute;*/
 width: 200px;
 /*background-color: #fff;*/
 opacity: 0.8;
/*border-radius: 10px 10px 10px 10px*/
}

.p_box1 .text{
position: absolute;
font-size: 1em;
}

/*************************************************プロフィール開始**************************************/

.p_box1_hako{
position: absolute;
z-index:1;
width:80%;
/*height:500px;*/
}

.p_box1_pro{
/*position: absolute;*/
z-index:1;
/*background-color:#fff;*/
color:#fff;
margin-top:-40em;
margin-left:3%;
width:50%;
height:200px;
}

.p_box1_pro .p_box1_moji_pro {
z-index:1;
 /*margin: 15px auto;
 padding: 10px 5px 2px;*/
/*position: absolute;*/

/*background-color: #fff;*/
 opacity: 0.8;
/*border-radius: 10px 10px 10px 10px*/
margin-top:-348px;
margin-left:112%;
width:100%;
}

.p_box1_pro .text_pro{
position: absolute;
font-size: 1em;
/*height:500px;*/
width:110%;
/*margin-left:492px;*/
margin-left:112%;
margin-top:-346px;
}

/*orijinal_pro2用*/
.p_box1_pro .text_pro_2{
position: absolute;
font-size: 1em;
/*height:500px;*/
width:110%;
/*margin-left:492px;*/
/*margin-left:0%;
margin-top:-346px;*/
}

.p_box1_moji_pro{
  height:20px;
  margin-left: 55%;
}

.p_box1_moji_pro  p{
/*position: absolute;*/
font-size: 1em;
/*height:500px;*/
width:140%;
margin-left:2%;
margin-top:-203px;
color:#FFF;
}

/*.text_pro ul p{
padding:10px;
width:100%;
}*/



/*四角に分けるための大型ボックスを位置づけ後、中身を作成する*/
.portfoliobox_positon_pro{
position: absolute;
margin-left: 30%;
/*margin-top: 14%;*/
margin-top:219px;
width:65%;
/*background-color: #FF8119;*/
/*z-index:2;*/


}

/*選択できる中身*/
.portfoliobox_positon_pro h2{
background-color:#000;
    filter:alpha(opacity=80);
    -moz-opacity: 0.8;
    opacity: 0.8;
color:#fff;
margin-bottom:3px;
padding-left:21px;
height:700px;
/*text-align:center;*/
padding-top:20px;
font-size:2em;
}


/*********************************************プロフィールここまで****************************************/


.p_box2{
position: absolute;
z-index:1;
background-color:#fff;
color:#fff;
margin-top:-40em;
margin-left:71%;
width:25%;
height:200px;
}

.p_box2 .p_box2_moji {
z-index:1;
 /*margin: 15px auto;
 padding: 10px 5px 2px;*/
/*position: absolute;*/
 width: 200px;
 background-color: #fff;
 opacity: 0.8;
/*border-radius: 10px 10px 10px 10px*/
}

.p_box2 .text{
position: absolute;
font-size: 1em;
}



.p_box3{
position: absolute;
z-index:1;
background-color:#fff;
color:#fff;
margin-top:-23em;
margin-left:71%;
width:25%;
height:200px;
}

.p_box4{
position: absolute;
z-index:1;
background-color:#fff;
color:#fff;
margin-top:-23em;
margin-left:3%;
width:25%;
height:200px;
}

.p_box5{
position: absolute;
z-index:1;
/*background-color:#fff;*/
color:#fff;
margin-top:-31em;
margin-left:40%;
width:20%;
height:200px;
background-image: url("../image/main-go.jpg") ;
background-size:contain;
background-repeat:no-repeat;
}


.clear_2{
/*width:300px;*/
width:100%;
/*回り込みを解除*/
/*clear:both;*/

/*position: relative;*/
/*height:0px;*/
/*テキストを中央寄せに指定*/
/*text-align:center;
font-size:0.85em;*/
/*background-image:url(img/footer.gif);*/
/*背景画像が繰り返し表示されないように指定*/
/*background-color:#1AAB8A;*/
/*background-repeat:no-repeat;*/
/*padding-top:20px;
margin-left:-20px;
margin-right:-20px;*/

/*ブラウザ未対応対策*/
display:block;
}
.clear p{
position:absolute;
width:100%;
color: #fff;
/*margin-top:80%;*/
text-align:center;
margin-top:41em;
/*overflow: hidden;*/
}

.clear_2 p{
position:absolute;
width:100%;
color: #fff;
/*margin-top:80%;*/
text-align:center;
margin-top:65em;
/*overflow: hidden;*/
}


li:hover{
background-color:green;
    filter:alpha(opacity=80);
    -moz-opacity: 0.8;
    opacity: 0.8;
}

/*ボックス選択時(~を使う)*/
.p_box1:hover ~ .p_box5{
background-image: url("../image/main-left.jpg") ;
background-size:contain;
background-repeat:no-repeat;

}

.p_box1:hover{
background-color:black;
    filter:alpha(opacity=80);
    -moz-opacity: 0.8;
    opacity: 0.8;
}

.p_box2:hover ~ .p_box5{
background-image: url("../image/main-right.jpg") ;
/*縦横比を抑えたまま、画像を入れる(imgの代わりに使用可能)*/
background-size:contain;
background-repeat:no-repeat;
}

.p_box2:hover{
background-color:greenyellow;
    filter:alpha(opacity=80);
    -moz-opacity: 0.8;
    opacity: 0.8;
}

/*.p_box3:hover{
background-color:red;
    filter:alpha(opacity=80);
    -moz-opacity: 0.8;
    opacity: 0.8;
}*/

/*.p_box4:hover{
background-color:#ffc0cb;

}*/

/*他の要素を変化させる*/
/*.p_box5{
width:50%;*
height:200px;
background-image: url("../image/main-go.jpg") ;
}

.p_box1:hover .p_box5{
height:200px;
display: block;
background-image: url("../image/main-left.jpg") ;
}*/


/*.p_box5:hover{
    display: block;
}*/

/**********************767px以下の場合*************************************/
@media only screen and (max-width: 767px){

.title_txt{
position:relative;
width:100%;
height:20%;
}

.title_txt h2{
position:absolute;
display: block;
margin-left:35px;
top: 0;
font-size:3.1em;
font-family: 'Great Vibes', cursive;
color:#fff;
}

.center_box{
position: relative;

}

.center_box ul{
position: absolute;
/*margin-top:560px;*/
margin-top:80px;
height:100px;
z-index:3;
background-color:#000;
    filter:alpha(opacity=80);
    -moz-opacity: 0.8;
    opacity: 0.8;
color:#fff;
margin-bottom:3px;
width:50%;

}

#header-right_2 {
    position: absolute;
    /* float: left; */
    /* padding-left: 50%; */
    width: 100%;
    text-align: center;
    height: 133px;
    padding-top: 10px;
}

#header-right_2 li {
    margin-top: -10px;
    margin-bottom: 10px;
    /* margin-right: -2000px; */
    padding-top: 12px;
    padding-bottom: 10px;
}

.boxmoji{
position: absolute;
margin-left: 0%;
/*margin-top: 8%;*/
margin-top: 250px;
width:100%;
height:55px;
/*background-color: #FF8119;*/
}

.boxmoji h2{
/*フェードインのタイミングが全部表示された後*/
font-family: 'Great Vibes', cursive;
font-size:3.4em;/*文字の広さで幅も確保可能*/
background-color:#000;
    filter:alpha(opacity=80);
    -moz-opacity: 0.8;
    opacity: 0.8;
color:#fff;
margin-bottom:3px;
padding-left:21px;

}

/*四角に分けるための大型ボックスを位置づけ後、中身を作成する*/
.portfoliobox_positon_pro{
position: absolute;
margin-left: 0%;
margin-top:330px;
width:100%;
/*background-color: #FF8119;*/
/*z-index:2;*/
}

/*選択できる中身*/
.portfoliobox_positon h2{
background-color:#000;
    filter:alpha(opacity=80);
    -moz-opacity: 0.8;
    opacity: 0.8;
color:#fff;
margin-bottom:3px;
padding-left:21px;
height:555px;
/*text-align:center;*/
padding-top:20px;
}

/******************プロフィ―ル*/
/*四角に分けるための大型ボックスを位置づけ後、中身を作成する*/
.portfoliobox_positon_pro{
position: absolute;
/*margin-left: 30%;*/
/*margin-top: 14%;*/
margin-top:344px;
width:100%;
/*background-color: #FF8119;*/
/*z-index:2;*/
}

.portfoliobox_positon_pro h2 {
    background-color: #000;
    filter: alpha(opacity=80);
    -moz-opacity: 0.8;
    opacity: 0.8;
    color: #fff;
    margin-bottom: 3px;
    padding-left: 21px;
    height: 758px;
    /* text-align: center; */
    padding-top: 20px;
    font-size: 2em;
}

.p_box1_moji_pro p{
    /* position: absolute; */
    font-size: 1em;
    /* height: 500px; */
    width: 190%;
    margin-left: -107%;
    margin-top: -461px;
    color: #FFF;
  }

/********************プロフィール*/

.p_box1{
position: absolute;
z-index:1;
/*background-color:#fff;*/
color:#fff;
margin-top:-40em;
margin-left:3%;
width:25%;
height:200px;
}

.p_box1_pro{
position: absolute;
z-index:1;
/*background-color:#fff;*/
color:#fff;
margin-top:-44em;
margin-left:3%;
width:100%;
height:200px;
}

.p_box1_pro .p_box1_moji_pro {
z-index:1;
 /*margin: 15px auto;
 padding: 10px 5px 2px;*/
/*position: absolute;*/
 opacity: 0.8;
/*border-radius: 10px 10px 10px 10px*/
margin-top:-7px;
    margin-left: 0px;
}

.text_pro ul{
position: absolute;
font-size: 1em;
/*height:500px;*/
width:100%;
/*margin-left:5%;
margin-top:10px;*/
}

.p_box1_pro .text_pro ul li{
padding:10px;
}

#mainimg2{
z-index:-1;
width:100%;
height:80em;
/*position:absolute;*/
background-image: url("../image/top-bk.png") ;
background-size:cover;
background-repeat:repeat-y;
}

.clear_2 p{
position:absolute;
width:100%;
color: #fff;
/*margin-top:80%;*/
text-align:center;
margin-top:75em;
/*overflow: hidden;*/
}

img{
zoom:70%;
margin-left:10px;
}

/*portfolio(767px以下)開始*/
.portfoliobox_positon {
    position: absolute;
    margin-left: 0%;
    /* margin-top: 14%; */
    margin-top: 335px;
    width: 100%;
    /* background-color: #FF8119; */
    /* z-index: 2; */
}

img{
margin-left:0px;
}

.p_box1{
position: absolute;
z-index:1;
/*background-color:#fff;*/
/*color:#fff;*/
margin-top:-30em;
margin-left:3%;
width:25%;
height:200px;
}

.p_box2{
position: absolute;
z-index: 1;
color: #fff;
margin-top: -30em;
margin-left: 71%;
width: 25%;
height: 100px;
}

.p_box3{
position: absolute;
z-index:1;
color:#fff;
margin-top:-12em;
margin-left:71%;
width:25%;
height:140px;
}

.p_box4{
position: absolute;
z-index:1;
color:#fff;
margin-top:-12em;
margin-left:3%;
width:25%;
height:140px;
}

.p_box5{
position: absolute;
z-index:1;
color:#fff;
margin-top:-18em;
margin-left:42%;
width:15%;
height:86px;
background-image: url("../image/main-go.jpg") ;
background-size:contain;
background-repeat:no-repeat;
}

.clear_2 p {
    position: absolute;
    width: 100%;
    color: #fff;
    /* margin-top: 80%; */
    text-align: center;
    margin-top: 75em;
    /* overflow: hidden; */
}

}
/***************************767px以下の場合ここまで************************/



/*767px以上の場合*/
@media only screen and (min-width: 768px){
.smart,.pc {
display: none;
}
}

/*960px以上の場合*/
@media only screen and (min-width: 960px){
.pc{
display: block;
}
}