@charset "utf-8";

/* スマホ向け：320px～499pxまで */
@media only screen and (min-width: 10px) and (max-width:499px){
body {
	width: 100%;
    margin:0 auto;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	color:#000;
    background-color: #dcdcdc;
    text-align: left}
    
    img{width:100%;}

a {color:#000;
	text-decoration:none;}
a:hover {
	color:#000;
    text-decoration:none;}
a:hover img {
  opacity: 0.7;
  filter: alpha(opacity=70);
  -ms-filter: "alpha(opacity=70)";}
    
/*==========================================
 ヘッダーのスタイル
===========================================*/
/*logoの設定*/  
header{
    margin:0 auto;
    background-color: white;}
header h1 {
	margin:0 auto 0 0;
	width:100%;
    text-align:center;}
header h1 img {
	width:100%;
	max-width:200px;}
header a {
    color:#000;
    text-decoration:none;}
header a:hover {
	color:#000;
    text-decoration:none;}
nav{ 
    background-color:#dcdcdc;
    width:101%;
    margin-left:auto;
    margin-right:auto;
    margin-top:10px;
    border-left: 2px solid #000;}     
nav ul li {
  float: left;
  text-align: center;
  width: 100%;
  border-right: 2px solid #000;
}   
 nav ul li:first-child{
  width: 49%;
  height:50px;
  border-top: 2px solid #000;}
nav ul li:nth-child(2){
    width:48%;
    height:50px;
    border-top: 2px solid #000;}  
nav ul li:nth-child(3){
    width:49%;
    height:50px;
    border-top: 2px solid #000;}
nav ul li:nth-child(4){
    width:48%;
    height:50px;
    border-top: 2px solid #000;}
nav ul li:nth-child(5){
    width:49%;
    height:50px;
    border-top: 2px solid #000;
    border-bottom: 2px solid #000;}
nav ul li:nth-child(6){
        width: 48%;
        height:50px;
        border-top: 2px solid #000;
        border-bottom: 2px solid #000;}        
nav ul li a{
  display:block;
  padding-top: 17px;
  padding-bottom: 20px;
  font-size: 14px;
}

nav ul li a:hover {
text-decoration: none;
background-color: whitesmoke;
}
    
#contents{
   width:100%;;
   margin:0 auto;
   background-color: white;
    }   
    #contents section#banner{
        width:100%;
        background-color:#b0c4de;
    }

    #contents section#banner p{
        text-align: left;
        font-size: 10px;
        color:white;
        padding: 15px;
    }

   .bannerimg{width:90%;
              margin:20px auto;}

   .link{width:100%;}

#top h1#title{ padding-top:15px;
              padding-bottom:10px;
              text-align: center;}
    
    
    section#workkind{
        width:90%;
        margin-left:auto;
        margin-right:auto;
        margin-top: 50px;
        font-size:13px;
    }
    
    section#workkind article{padding:3% 1% 3% 1%;}
    
    div#proposal{width:100%;}
    
    #rightbox{width:100%;}
    
    #leftbox{padding:3%;}
    
    
    
    
    .square{width:100%;
            height:5px;
            background-color: black;}
    .trianglearrangement{width:60px;
                         margin-left: auto;
                         margin-right: auto;}
    
/* 三角形部分のスタイル */
    /* 上向き三角形 */
.triangle{display:none;
  width: 0;
  height: 0;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  border-bottom: 30px solid black;
}
    /* 右向き三角形 */
.triangle1{display:none;
  width: 0;
  height: 0;
  border-left: 30px solid black;
  border-top: 30px solid transparent;
  border-bottom: 30px solid transparent;
}
    /* 左向き三角形 */
.triangle2{display:none;
  width: 0;
  height: 0;
  border-top: 30px solid transparent;
  border-right: 30px solid black;
  border-bottom: 30px solid transparent;
}
    /* 下向き三角形 */
.triangle3{
  width: 0;
  height: 0;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  border-top: 30px solid black;
}
    
/* 三角形部分のスタイル終わり */
    
    article#point{width:100%;}
    
    article h6{text-align: center;}
    
    article #point p#bold{padding:3%;
                          font-weight: bold;
                          color:red;}
    
    
    /* ボタン部分のリンク文字の色設定*/
    #buttonbox a:hover h8{color:black;}
    
    #buttonbox a:hover p{color:black;}
    
    
    #button{width:78%;margin-left: auto;margin-right: auto;padding:4%;
    color:white;
    background-color: #1e90ff}
    
    #button p{font-size: 10px;text-align: left;}
    
    #button #center{text-align: center;
                    margin-top: 10px;}
    #button h8{font-size: 14px;}
    
    
    
    
    
    
   footer{ background-color: #696969;
        color:white;
        margin-top: 10px;
        padding-top:40px;
        width:100%;
        text-align:center;
        float:left;}
footer section{
        width:90%;
        margin-top: ;
        margin-left:auto;
        margin-right: auto;
    }     
footer a{ color:white;}  


  
    
div#footeradvertise{width:100%;
                    margin-bottom:15px;
                    margin-left:auto;
                    margin-right: auto;}
div#footeradvertise img{width:100%;}
    
    
section#footerbox{width:40%;
                  float:left;
                margin:5%} 

section#footernavi{margin-top: 250px;}    
    
    #footernivigation{margin-top: 100px;
        margin-bottom: 100px;
        width:95%;max-width: 400px; height: 130px;
        margin-left: auto;margin-right: auto;
        text-align: left;
        font-size: 10px;}
    
    #footernivigation div{width:45%;margin:10px 2.5% 0 2.5%;float:left;} 
  
    
}
    
    

   

/* タブレット向けのレイアウトの指定：500px～960px */
@media only screen and (min-width:500px) and (max-width:960px){ 
    

body {
	width: 100%;
    margin:0 auto;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	color:#000;
    background-color: #dcdcdc;
    text-align: left}
    
    img{width:100%;}

a {color:#000;
	text-decoration:none;}
a:hover {
	color:#000;
    text-decoration:none;}
a:hover img {
  opacity: 0.7;
  filter: alpha(opacity=70);
  -ms-filter: "alpha(opacity=70)";}
    
/*==========================================
 ヘッダーのスタイル
===========================================*/
/*logoの設定*/  
 
header{
    width:100%;
    margin:0px auto;
    background-color:white;
    }
header h1 {
	margin:0 auto 0 0;
	width:100%;
    text-align:center;
}
header h1 img {
	width:100%;
	max-width:200px;
}
header a {
    color:#000;
    text-decoration:none;}
header a:hover {
	color:#000;
    text-decoration:none;}
    
 /*言語切り替えスイッチ*/ 
#translate{
    width:;
    height:15px;
    margin-left:85%;
    margin-bottom:15px;
    font-size:90%
    }
    
#dropmenu{
  *zoom: 1;
  list-style-type: none;
  width: 40%;
  margin: 0px 0px 0px 0px;
  padding: 0;
}
#dropmenu:before, .dropmenu:after{
  content: "";
  display: table;
}
#dropmenu:after{
  clear: both;
}
#dropmenu li{
  position: relative;
  width: 20%;
  float: left;
  margin: 0;
  padding: 0;
  text-align: center;
}
#dropmenu li a{
  display: block;
  margin: 0;
  padding: 15px 0 11px;
  background: #8a9b0f;
  color: #fff;
  font-size: 14px;
  line-height: 1;
  text-decoration: none;
}
#dropmenu li ul{
  list-style: none;
  position: absolute;
  z-index: 9999;
  top: 100%;
  left: 0;
  margin: 0;
  padding: 0;
}
#dropmenu li ul li{
  width: 100%;
}
#dropmenu li ul li a{
  padding: 13px 15px;
  border-top: 1px solid #7c8c0e;
  background: #6e7c0c;
  text-align: left;
}
#dropmenu li:hover > a{
  background: #6e7c0c;
}
#dropmenu li a:hover{
  background: #616d0b;
}

#normal li ul{
  display: none;
}
#normal li:hover ul{
  display: block;
}    
/*フェードイン*/
#fade-in li ul{
  visibility: hidden;
  opacity: 0;
  transition: 0s;
}
#fade-in li:hover ul{
  visibility: visible;
  opacity: 1;
}
#fade-in li ul li a{
  visibility: hidden;
  opacity: 0;
  transition: .5s;
}
#fade-in li:hover ul li a{
  visibility: visible;
  opacity: 1;
}        
    
    
nav{ 
    width:101%;
    background-color:#dcdcdc; 
    margin-left:auto;
    margin-right:auto;
    margin-top:10px;
    border-left: 2px solid #000;}     
nav ul li {
  float: left;
  text-align: center;
  width: 100%;
  border-right: 2px solid #000;
}   
 nav ul li:first-child{
  width: 33%;
  height:50px;
  border-top: 2px solid #000;
  border-bottom: 2px solid #000;}
nav ul li:nth-child(2){
    width:32%;
    height:50px;
    border-top: 2px solid #000;
    border-bottom: 2px solid #000;}  
nav ul li:nth-child(3){
    width:33%;
    height:50px;
    border-top: 2px solid #000;
    border-bottom: 2px solid #000;}
nav ul li:nth-child(4){
    width:33%;
    height:50px;
    border-bottom: 2px solid #000;}
nav ul li:nth-child(5){
    width:32%;
    height:50px;
    border-bottom: 2px solid #000;}
nav ul li:nth-child(6){
        width: 33%;
        height:50px;
        border-bottom: 2px solid #000;}        
nav ul li a{
  display:block;
  padding-top: 17px;
  padding-bottom: 20px;
  font-size: 14px;
}

nav ul li a:hover {
text-decoration: none;
background-color: whitesmoke;
}
    
#contents{
   width:100%;;
   margin:0 auto;
   background-color: white;
    }   
    #contents section#banner{
        width:100%;
        background-color:#b0c4de;
    }

    #contents section#banner p{
        text-align: left;
        font-size: 10px;
        color:white;
        padding: 15px;
    }

    .bannerimg{width:90%;
      margin:20px auto;}

    .link{width:100%;}

#top h1#title{ padding-top:15px;
              padding-bottom:10px;
              text-align: center;}
    
    
    section#workkind{
        width:90%;
        margin-left:auto;
        margin-right:auto;
        margin-top: 50px;
        font-size:13px;
    }
    
    section#workkind article{padding:3% 1% 3% 1%;}
    
    div#proposal{width:100%;}
    
    #rightbox{width:100%;}
    
    #leftbox{padding:3%;}
    
    
    
    
    .square{width:100%;
            height:5px;
            background-color: black;}
    .trianglearrangement{width:60px;
                         margin-left: auto;
                         margin-right: auto;}
    
/* 三角形部分のスタイル */
    /* 上向き三角形 */
.triangle{display:none;
  width: 0;
  height: 0;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  border-bottom: 30px solid black;
}
    /* 右向き三角形 */
.triangle1{display:none;
  width: 0;
  height: 0;
  border-left: 30px solid black;
  border-top: 30px solid transparent;
  border-bottom: 30px solid transparent;
}
    /* 左向き三角形 */
.triangle2{display:none;
  width: 0;
  height: 0;
  border-top: 30px solid transparent;
  border-right: 30px solid black;
  border-bottom: 30px solid transparent;
}
    /* 下向き三角形 */
.triangle3{
  width: 0;
  height: 0;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  border-top: 30px solid black;
}
    
/* 三角形部分のスタイル終わり */
    
    article#point{width:100%;}
    
    article h6{text-align: center;}
    
    article #point p#bold{padding:2%;
                          font-weight: bold;
                          color:red;}
    
    
    /* ボタン部分のリンク文字の色設定*/
    #buttonbox a:hover h8{color:black;}
    
    #buttonbox a:hover p{color:black;}
    
    
    #button{width:78%;max-width: 250px; margin-left: auto;margin-right: auto;padding:4%;
    color:white;
    background-color: #1e90ff}
    
    #button p{font-size: 10px;text-align: left;}
    
    #button #center{text-align: center;
                    margin-top: 10px;}
    #button h8{font-size: 14px;}
    
    
    
    
    
    
  footer{ background-color: #696969;
        color:white;
        margin-top: 10px;
        padding-top:40px;
        width:100%;
        text-align:center;
        float:left;}
footer section{
        width:90%;
        margin-top: ;
        margin-left:auto;
        margin-right: auto;
    }     
footer a{ color:white;}  

    
div#footeradvertise{width:100%;
                    margin-bottom:15px;
                    margin-left:auto;
                    margin-right: auto;}
div#footeradvertise img{width:100%;}

section#footerbox{width:40%;
                  float:left;
                margin:5%} 

section#footernavi{margin-top: 250px;}    
    
    #footernivigation{margin-top: 100px;
        margin-bottom: 100px;
        width:95%;max-width: 400px; height: 130px;
        margin-left: auto;margin-right: auto;
        text-align: left;
        font-size: 10px;}
    
    #footernivigation div{width:45%;margin:10px 2.5% 0 2.5%;float:left;}
    
 
}



/* PC向け全画面表示レイアウトの指定：961px以上 */
@media only screen and (min-width: 961px) {

body {
	width: 1200px;
    margin:0 auto;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	color:#000;
    background-color: #dcdcdc;
    text-align: left;}
    
    
    
    img{width:100%;}

a {color:#000;
	text-decoration:none;}
a:hover {
	color:#000;
    text-decoration:none;}
a:hover img {
  opacity: 0.7;
  filter: alpha(opacity=70);
  -ms-filter: "alpha(opacity=70)";}
    
/*==========================================
 ヘッダーのスタイル
===========================================*/
/*logoの設定*/
header{
    width:100%;
    background-color:white;}
header h1 {
	margin:0 auto 0 0;
	width:200px;
}
header h1 img {
	width:100%;
	max-width:200px;
}
header a {
    color:#000;
    text-decoration:none;}
header a:hover {
	color:#000;
    text-decoration:none;}
    
 /*言語切り替えスイッチ*/ 
#translate{
    width:;
    height:15px;
    margin-left:95%;
    margin-bottom:15px;
    font-size:90%
    }
    
#dropmenu{
  *zoom: 1;
  list-style-type: none;
  width: 40%;
  margin: 0px 0px 0px 0px;
  padding: 0;
}
#dropmenu:before, .dropmenu:after{
  content: "";
  display: table;
}
#dropmenu:after{
  clear: both;
}
#dropmenu li{
  position: relative;
  width: 20%;
  float: left;
  margin: 0;
  padding: 0;
  text-align: center;
}
#dropmenu li a{
  display: block;
  margin: 0;
  padding: 15px 0 11px;
  background: #8a9b0f;
  color: #fff;
  font-size: 14px;
  line-height: 1;
  text-decoration: none;
}
#dropmenu li ul{
  list-style: none;
  position: absolute;
  z-index: 9999;
  top: 100%;
  left: 0;
  margin: 0;
  padding: 0;
}
#dropmenu li ul li{
  width: 100%;
}
#dropmenu li ul li a{
  padding: 13px 15px;
  border-top: 1px solid #7c8c0e;
  background: #6e7c0c;
  text-align: left;
}
#dropmenu li:hover > a{
  background: #6e7c0c;
}
#dropmenu li a:hover{
  background: #616d0b;
}

#normal li ul{
  display: none;
}
#normal li:hover ul{
  display: block;
}    
/*フェードイン*/
#fade-in li ul{
  visibility: hidden;
  opacity: 0;
  transition: 0s;
}
#fade-in li:hover ul{
  visibility: visible;
  opacity: 1;
}
#fade-in li ul li a{
  visibility: hidden;
  opacity: 0;
  transition: .5s;
}
#fade-in li:hover ul li a{
  visibility: visible;
  opacity: 1;
}            
    
    
nav{ 
    width:100%;
    background-color: #dcdcdc;
    height:50px;
    border-top: 2px solid #000;
    border-bottom: 2px solid #000;
    border-left: 2px solid #000;}     
nav ul li {
  float: left;
  text-align: center;
  width: 198px;
  height:50px;
  border-right: 2px solid #000;
}    
nav ul li a{
  display:block;
  padding-top: 17px;
  padding-bottom: 20px;
  font-size: 14px;
}

nav ul li a:hover {
text-decoration: none;
background-color: whitesmoke;
}
    
    
#contents{
   width:100%;;
   margin:0 auto;
   background-color: white;
    }   
    #contents section#banner{
        width:100%;
        background-color:#b0c4de;
    }

    #contents section#banner p{
        text-align: left;
        font-size: 15px;
        color:white;
        padding: 15px;
    }

#top h1#title{ padding-top:15px;
              padding-bottom:10px;
              text-align: center;}
    
    
    section#workkind{
        width:90%;
        margin-left:auto;
        margin-right:auto;
        margin-top: 90px;
        font-size:17px;
    }
    
    section#workkind h2{width:90%;margin-left: auto;margin-right: auto;}
    
    
    section#workkind article{padding:3% 1% 3% 1%;}
    
    div#proposal{width:100%;}
    
    #rightbox{width:100%;max-width: 700px;margin-left: auto;margin-right: auto;}
    
    #leftbox{padding:3%;}
    
    
    
    
    .square{width:100%;
            height:5px;
            background-color: black;}
    .trianglearrangement{width:60px;
                         margin-left: auto;
                         margin-right: auto;}
    
/* 三角形部分のスタイル */
    /* 上向き三角形 */
.triangle{display:none;
  width: 0;
  height: 0;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  border-bottom: 30px solid black;
}
    /* 右向き三角形 */
.triangle1{display:none;
  width: 0;
  height: 0;
  border-left: 30px solid black;
  border-top: 30px solid transparent;
  border-bottom: 30px solid transparent;
}
    /* 左向き三角形 */
.triangle2{display:none;
  width: 0;
  height: 0;
  border-top: 30px solid transparent;
  border-right: 30px solid black;
  border-bottom: 30px solid transparent;
}
    /* 下向き三角形 */
.triangle3{
  width: 0;
  height: 0;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  border-top: 30px solid black;
}
    
/* 三角形部分のスタイル終わり */
    
    article#point{width:100%;}
    
    article h6{text-align: center;}
    
    article #point p#bold{padding:2%;
                          font-weight: bold;
                          color:red;}
    
    
    
    /* ボタン部分のリンク文字の色設定*/
    #buttonbox a:hover h8{color:black;}
    
    #buttonbox a:hover p{color:black;}
    
    
    #button{width:78%;max-width: 320px; margin-left: auto;margin-right: auto;padding:4%;
    color:white;
    background-color: #1e90ff}
    
    #button p{font-size: 13px;text-align: left;}
    
    #button #center{text-align: center;
                    margin-top: 10px;}
    #button h8{font-size: 24px;}
    
    
    
footer{ background-color: #696969;
        color:white;
        margin-top: 10px;
        padding-top:40px;
        width:100%;
        text-align:center;
        float:left;}
footer section{
        width:90%;
        margin-top: ;
        margin-left:auto;
        margin-right: auto;
    }     
footer a{ color:white;}

div#footeradvertise{width:100%;
                    height:200px;
                    margin-bottom:15px;
                    margin-left:auto;
                    margin-right: auto;}
    
    div#footeradvertisepadding{width:40%;
                    margin-left:auto;
                    margin-right: auto;}
div#footeradvertise img{width:100%;}

section#footerbox{width:40%;
                  float:left;
                margin:5%} 

section#footernavi{margin-top: 110px;}    
    
    #footernivigation{margin-top: 60px;
        margin-bottom: 60px;
        width:95%;max-width: 400px; height: 130px;
        margin-left: auto;margin-right: auto;
        text-align: left;
        font-size: 10px;}
    
    #footernivigation div{width:45%;margin:10px 2.5% 0 2.5%;float:left;}

    
    
    
    
    
    
}