@charset "UTF-8";


/*----------------------
全体、リセットの設定
----------------------*/

html{
    font-size:62.5%;/*単位remに対してこの数値を入れると、かなりよい基準値になる。基準値に設定*/
}

body{
     font-family:"游ゴシック Medium",YuGothic,YuGothicM,"Hiragino Kaku Gothic ProN","Hiragino Kaku Gothic Pro",メイリオ,Meiryo,sans-serif;
    background:#f8f8f8;
}


*{
    margin:0;
    padding:0;
}


ul{
    list-style:none;
}

a{
    color:black;/*-----仮-----*/
    text-decoration:none;
}

img{
    max-width:100%;
}



/*----------------------
wrapper
----------------------*/

/*----------------------
header
----------------------*/

header{
    max-width:100%;
    background:url(../images/sp_nav_background.png) ;
    background-size: auto 56px;
    background-repeat:repeat-x;
}

#header_box{
    max-width:375px;
    margin:0 auto;
}


header ul.pc{
    display:none;
}

header ul.sp{
    max-width:96%;
    display:flex;
    margin:0 auto;
}

header ul.sp li img{
    height:56px;/*効いてない 元73px*/
    max-width:auto;
}





/*----------------------
main
----------------------*/

main{
    /*background:#ffff99;*/
    text-align:center;/*h1を真ん中に配置するための記述*/
    margin:0 auto 100px;
}


h1{
    font-size:6.0rem;
    padding:10px 0 30px;
    color:#e3e3e3;/*旧#000*/
}


/*-------#worksページ-------*/
#works{
    width:85%;/*スマホ用*/
    text-align:left;
    display:block;
    margin:0 auto;
}


.work_cell{
    /*background:#e6ffe9;*/
    width:100%;
    height:350px;/*なんとなくの数値*/
    margin-bottom:80px;
}


.work_cell img{
    width:100%;
    display:block;/*hoverのための記述*/
	transition-duration: 0.3s;	/**hover時に、変化に掛かる時間*/
}

.work_cell img:hover{
    transform: scale(1.02);	/*画像の拡大率*/
	transition-duration: 0.3s;	/*変化に掛かる時間*/
    /*---hover時に白くなる記述ここから---*/
    cursor:pointer;
    filter: alpha(opacity=70);        /* ie lt 8 */
    -ms-filter: "alpha(opacity=70)";  /* ie 8 */
    -moz-opacity:0.7;                 /* FF lt 1.5, Netscape */
    -khtml-opacity: 0.7;              /* Safari 1.x */
    opacity:0.7;
    zoom:1;
    /*---hover時に白くなる記述ここまで---*/
}



.work_cell h2{
    font-size:2.4rem;/*PCを見て設定した数値*/
    padding:20px 0;
}


.work_cell p a{
    display:block;
    font-size:1.6rem;
    width:180px;/*超適当に入力*/
    background:#e9e9e9;
    text-align:center;
    text-decoration:none;
    color:#868686;
}

.work_cell p a:hover{
    background:gray;/*てきとうな色のため要リデザイン*/
    color:#fff;/*てきとうな色のため要リデザイン*/
}

.graphic_work{
    margin:19px 0;/*グラフィック」と「web」作品画像周辺の高さをここの記述で同じ数値になるように調整するための記述*/
}

.graphic_work{
    padding:0;
}





/*-------#each_workページ-------*/
#each_work{
    width:85%;
    font-size:1.6rem;
    text-align:center;
    display:block;
    margin:40px auto 0;
    display:block;
}


#each_work #works_leftbox{
    /*background:pink;*/
    width:100%;
    /*height:400px;/*てきとう*/
    border:none;
}

h3{
    font-size:24px;
    padding:50px 0 10px;/*てきとう*/
}


#each_work #works_leftbox_pdf p{/*pdf作品の時のみ効く*/
    margin:20px auto 0;
}

#each_work #works_leftbox_graphic p{/*graphic作品の時のみ効く*/
    margin:20px auto 0;
}

.mini_link_graphic{
    background:#e9e9e9;
    text-align:center;
    text-decoration:none;
    color:#868686;
    padding:5px 30px;
    /*margin-right:5px;*/
}

.mini_link_graphic:hover{
    background:gray;/*てきとうな色のため要リデザイン*/
    color:#fff;/*てきとうな色のため要リデザイン*/
}

.mini_link_web{
    background:#e9e9e9;
    text-align:center;
    text-decoration:none;
    color:#868686;
    padding:5px 60px;
}

.mini_link_web:hover{
    background:gray;/*てきとうな色のため要リデザイン*/
    color:#fff;/*てきとうな色のため要リデザイン*/
}

.link_to_web{
    width:80%;/*てきとう*/
    font-size:24px;
    border:2px solid #e9e9e9;
    margin:30px auto 30px;
    padding:12px;
    background-color:#e9e9e9;
    color:#000000;
}


.link_to_web:hover{
    background:#fcbe7a;/*旧#f4a460*/
    background-image: linear-gradient(#fcd5a2, #f7da89);/*グラデーションカラー*/
    border:solid 2px #f7da89;
    color:#545454;
    transition: 0.5s;/*0.5秒かけて変化*/
}


.next_link{
    width:80%;/*てきとう*/
    display:flex;
    justify-content:space-between;
    margin:0 auto;
}

.next_link a:hover{
    color:#f19218;/*元orange*/
}


.next_link p:nth-child(1){
    background:url(../images/i_work_previous.png);
    background-repeat:no-repeat;
    background-position:left;
    padding-left:22px;/*てきとう*/
}


.next_link p:nth-child(3){
    background:url(../images/i_work_next.png);
    background-repeat:no-repeat;
    background-position:right;
    padding-right:22px;/*てきとう*/
}



.next_link p:nth-child(1):hover{
    background:url(../images/i_work_previous_hov.png);
    background-repeat:no-repeat;
    background-position:left;
    padding-left:22px;/*てきとう*/
}

.next_link p:nth-child(3):hover{
    background:url(../images/i_work_next_hov.png);
    background-repeat:no-repeat;
    background-position:right;
    padding-right:22px;/*てきとう*/
}


.link_to_web img{
    width:21px;
    padding-right:3px;
}

#each_work #works_rightbox{
    /*background:#fff;*/
    width:100%;
}

/*☆jQuery作品用のスライドここから☆*/
#each_work #works_rightbox{
    /*background:#fff;*/
    width:100%;/*100*/
    height:auto;/*てきとう*/
}


#each_work #works_rightbox img{
        width:100%;/*530px*/
        height:auto;
        margin:0 auto;
}
/*☆jQuery作品用のスライドここまで☆*/


#works_information{
    background:#fff;
    width:92%;
    /*height:400px;/*てきとう*/
    font-size:1.6rem;
    border:solid 1px #e9e9e9;
    margin:30px auto;
    padding:30px 30px;
}

#information1{
    /*background:pink;*/
    width:100%;
    display:block;
    margin:0px auto;
}


table{
    width:100%;
    margin:0 auto;
    text-align:left;
}

table th, table td{
    border-bottom: dotted 1px #e9e9e9;
    padding:10px 0;
    word-break:break-all;
}

table td{
    margin:0;
    padding:0;
}/*効いてない*/

table th{
    padding-left:28px;
    width:37%;
}


table th.part{
    background:url(../images/i_work_part.png) no-repeat;
    background-size:23px;
    background-position:left;
}

table th.relase{
    background:url(../images/i_work_release.png) no-repeat;
    background-size:23px;
    background-position:left;
}


table th.spec{
    background:url(../images/i_work_spec.png) no-repeat;
    background-size:23px;
    background-position:left;
}

table th.skill{
    background:url(../images/i_work_skill.png) no-repeat;
    background-size:23px;
    background-position:left;
}

table th.concept{
    background:url(../images/i_work_concept.png) no-repeat;
    background-size:23px;
    background-position:left;
}

#concept td{
    padding-bottom:5px;
}


#concept{
    width:100%;
    margin:0 auto;
}

#concept table{
    width:100%;
    text-align:left;
}

#concept th{
    width:37%;
}


/*-------#contactページ-------*/


#contact{
    /*background:pink;*/
    width:85%;/*てきとう 85%*/
    text-align:left;
    display:block;
    margin:0 auto;
    /*height:400px;*/
    font-size:1.5rem;/*htmlに指定した基準値「16px × 62.5% = 10px」なので、15px→1.5remとなる*/
}


#contact span{
    background:#e9e9e9;
    color:#868686;
    padding:1px 20px;
    margin-left:10px;
}


.contact_leftbox{
    display:block;
    /*background:lightyellow;*/
    width: 100%;
}


.contact_rightbox{
    display:block;
    /*background:lightblue;*/
    width:100%;
}


#contact_button{
    display:block;
}

/*****入力画面の幅を設定する******/
input[type="text"],
input[type="email"],
textarea{
    width:100%;/*仮の数値*/
    height:50px;
    border:1px solid #e9e9e9;
    background:#fff;
    padding:10px 8px 10px 10px;
}

input[type="checkbox"]{
    margin:0px 2px 0  0;
}


form label, form input, form textarea{
        margin-top:5px;/*入力欄の上の余白をまとめて設定*/
}

input[type="submit"]{/*送信ボタン*/
    display:inline-block;/*押せるぽいボタンにまとめるために記述*/
    background:#f4a460; /*旧 #f6a848*//*★送信ボタンの色。超てきとうなので変更する*/
    color:#fff;
    padding:2% 0;
    width:25%;
    margin-top:30px;
    border-bottom:solid 4px #d2691e;/*旧#de8009*//*押せるぽいボタンにまとめるために記述*/
    border-radius:3px;/*押せるぽいボタンにまとめるために記述*/
}


input[type="submit"]:hover{
    -webkit-transform: translateY(4px);
    transform:translateY(4px);/*下に動く*/
    border-bottom:none;/*線を消す*/
}

textarea{
    height:270px;/***内容の入力画面に高さを設定***/
    width:100%;
}

.contact_type{
    margin:0;
    display:flex;
    text-align:center;
}

.contact_type label{
    display:block;
    width:39%;/*てきとうな数値*/
    margin-right:10px;/****ボタン同士の隙間を空ける。paddeingの場合だと、ボタンが反応する範囲が増えて誤操作の原因になるので、marginを使う****/
    padding:10px 0;
    border:solid 1px #e9e9e9;
    border-radius:8px;
}


.contact_type label:hover{
    background:#fcdea2;/*#d8d8d8・gray*//*てきとうな色のため、要調整*/
}




/*----------------------
footer
----------------------*/

footer{
    /*background:#dcc2ff;*/
    text-align:center;
    font-size:1.0rem;
    padding-bottom:2px;
}




/*----------------------
top_button
----------------------*/


#top_button{
    position:fixed;
    bottom:0;
    right:0;
}

#top_button img{
    width:80.5px;
}








/***------------------------------------------------------------
PC
------------------------------------------------------------***/
@media screen and (min-width:1000px){/*元1024px*/


/***----------------------
header
----------------------***/

header{
    max-width:100%;
    background:url(../images/nav_background.png) ;
    background-size:3px 113px;
    background-repeat:repeat-x;
    margin:0 auto;
}
    
#header_box{
    max-width:1200px;/*てきとう*/
    /*background:pink;*/
    margin:0 auto;
    }
    
header ul.sp{
    display:none;
}

header ul.pc{
    /*width:90%;*/
    display:flex;
    margin:0 auto;
}


header ul.pc li img{
    height:113px;/*修正の数値*/
    width:auto;
}
    
li:nth-child(1):hover{
    background:url(../images/nav_home_hov.png);
    background-size:100% auto;
    background-repeat:no-repeat;
}
    
    
li:nth-child(2):hover{
    background:url(../images/nav_graphic_mouseon.png);
    background-size:100% auto;
    background-repeat:no-repeat;
}
    
li:nth-child(3):hover{
    background:url(../images/nav_web_mouseon.png);
    background-size:100% auto;
    background-repeat:no-repeat;
}
    
    
li:nth-child(4):hover{
    background:url(../images/nav_contact_mouseon.png);
    background-size:100% auto;
    background-repeat:no-repeat;
}
    
nav li a img:hover{
    opacity:0;
}
 
    
li:nth-child(2):active{
    background:url(../images/nav_graphic_hov.png);
    background-size:100% auto;
    background-repeat:no-repeat;
}
    
li:nth-child(3):active{
    background:url(../images/nav_web_hov.png);
    background-size:100% auto;
    background-repeat:no-repeat;
}
    
    
li:nth-child(4):active{
    background:url(../images/nav_contact_hov.png);
    background-size:100% auto;
    background-repeat:no-repeat;
}    


/***----------------------
main
----------------------***/

main{
    width:100%;
    }
    
h1{
    font-size:8rem;
}
    
/***-------#worksページ-------***/
#works{
    width:1200px;/*元89%*/
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
    /*background:pink;*/
}

.work_cell{
    width:30%;/*てきとう（元：350px）*/
    margin-bottom:130px;
}
  
    
/***-------#each_workページ-------***/
#each_work{
    width:1200px;/*85%*/
    text-align:center;
    display:block;
    margin:40px auto 0;
    display:flex;
    flex-direction: row-reverse;
    justify-content:space-between;
}

    

#each_work #works_leftbox{
    /*background:pink;*/
    width:37%;
    height:400px;/*てきとう*/
    border:solid 2px #e9e9e9;
}
    
    

#works_leftbox h3{
    font-size:24px;
    padding:50px 0 50px;/*てきとう*/
}


#works_leftbox .link_to_web{
    width:80%;/*てきとう*/
    font-size:24px;
    margin:50px auto 30px;
    padding:10px;
}


.next_link{
    width:80%;/*てきとう*/
    display:flex;
    justify-content:space-between;
    margin:0 auto;
}


.next_link p:nth-child(1){
    background:url(../images/i_work_previous.png);
    background-repeat:no-repeat;
    background-position:left;
    padding-left:22px;/*てきとう*/
}


.next_link p:nth-child(3){
    background:url(../images/i_work_next.png);
    background-repeat:no-repeat;
    background-position:right;
    padding-right:22px;/*てきとう*/
}


.link_to_web img{
    width:21px;
    padding-right:3px;
}


#each_work #works_rightbox{
    /*background: #fff;*/
    width:60%;
    height:400px;/*てきとう*/
    margin: 0;
    padding: 0;
}
    

/*（WEB作品ページ用の指定）*/
#works_rightbox #works_rightbox_web img{
    height:400px;
    width:auto;
}
    
/*（バナー作品ページ用の指定）*/
#each_work #works_rightbox_graphic img{
        width:74%;/*530px*/
        height:auto;
        margin:0 auto;
}
    
/*（PDF縦作品ページ用の指定）ここから*/
#each_work #works_leftbox_pdf{
    /*background: #fff;*/
    width:60%;
    height:500px;/*てきとう*/
    margin: 0;
    padding: 0;
    border:solid 2px #e9e9e9;
}

#each_work #works_leftbox_pdf p{
    margin:150px auto 0;
}

#each_work #works_rightbox_graphic_pdf img{
        height:500px;
        width:auto;
        margin:0 auto;
    }
/*（PDF縦作品ページ用の指定）ここまで*/
    
    
    
/*（graphicボタンなし作品ページ用の指定）ここから*/
#each_work #works_leftbox_graphic{
    /*background: #fff;*/
    width:60%;
    height:400px;/*てきとう*/
    margin: 0;
    padding: 0;
    border:solid 2px #e9e9e9;
}

#each_work #works_leftbox_graphic p{
    margin:80px auto 0;
}
    
    
#each_work #works_leftbox_graphic img{
        height:500px;
        width:auto;
        margin:0 auto;
    }
/*（graphicボタンなし作品ページ用の指定）ここまで*/

    
#works_information{
    /*background:#fff;*/
    max-width:1200px;/*width:89.4%;*/
    /*height:400px;/*てきとう*/
    border:solid 1px #e9e9e9;
    margin:30px auto;
    padding:30px 30px;
}
    
#information1{
    /*background:pink;*/
    width:100%;
    display:flex;
    margin:0px auto;
}


table{
    width:45%;
}

table th{
    width:27%;
}
    
#concept table{
    width:95%;
    text-align:left;
}

#concept th{
    width:12.5%;
}
    
/***-------#contactページ-------***/
#contact{
    width:1200px;/*89%*/
    display:flex;
    justify-content:space-between;
    /*padding-right:5px;/*微妙に縦のラインが合わないので、headerと位置を合わせるための微調整スキマ*/
    font-size:20px;
}



.contact_leftbox{
    /*background:lightyellow;*/
    width:560px;
}


.contact_rightbox{
    /*background:lightblue;*/
    width:560px;
}

input[type="submit"]{
    font-size:20px;
    padding:1.5% 0;
    margin-top:23px;
}


/*----------------------
footer
----------------------*/

footer{
    font-size:1.6rem;
}



    
}/***--------------------pc幅用の記述ここまで-----------------------***/