@charset "utf-8";
/* CSS Document */
body{
  font-family:Avenir , "Open Sans" , "Helvetica Neue" , Helvetica , Arial , Verdana , Roboto , "游ゴシック" , "Yu Gothic" , "游ゴシック体" , "YuGothic" , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "Meiryo UI" , "メイリオ" , Meiryo , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif;
  margin: 0;
  padding: 0;
  background-color: #1f2d58;
  list-style:none;
}
h2{
  margin: 0;
  padding: 0;
}
html,
body,
div#wrapper {
  height: 100%; /* 「div.background」に対してはmin-heightに対応していないブラウザ用 */
}
div#wrapper{
  min-height: 100%; /* 最小の高さ */
}
 
body > div#wrapper {
  height: auto; /* 要素を超えた分の背景が伸びないブラウザ用 */
}
.bg{
  position: relative;
  top:0;
}
.back_btn{
  max-width: 300px;
  min-width: 50px;
  width:30%;
float: right;
margin-top: 1.5%;
margin-bottom: 1.5%;
margin-right: 1%;
}
.back_btn img{
  z-index: 3;
}
.logo{
margin-top: 1.5%;
margin-bottom: 1.5%;
margin-left: 1%;
 max-width: 382px;
  min-width: 50px;
width:40%;
float: left;
}
.title_ruby{
  font-size:70%
}

.entrytitle{
  white-space: nowrap;
}
ul{
  list-style:none;
}
img{
  vertical-align: bottom;
  width: 100%;
  height: auto;
}
#wrapper{
  max-width: 1024px;
  margin: 0 auto;
background-color: #ffeb08;

  width: 95%;
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
}
.text_job{
text-align: center;
color:#1f2d58;
  font-size: 20px;
  font-weight: 700;
background-color: #FFFFFF;
border-radius: 25px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
padding-bottom:1.5%;
padding-top:1.5%;
margin-bottom: 1.5%;
clear: both;
}
#wrapper2{
  margin: 0 auto;
  max-width: 869px;
  overflow: hidden;
 
}
#details{
margin: 0 auto;
  width: 100%;
max-width: 850px;
background-color: #000;
}
#top{
  overflow: hidden;
  width: 100%;
  padding-left: 4%;
  padding-bottom: 1%;
}
.title{
  width: 74%;
  margin-top: 3%;
  float: left;
  line-height: 1.2;
}
.title_img{
  margin-top: 3%;
  width: 20%;
  float: left;
}
.sub_title_01{
  font-size: 19px;
  margin-top: 3%;
}
.sub_title_02{
  margin-top: 5%;
  font-size: 19px;
}
.main_title{
  color:#32acf3;
  font-size: 28px;
  font-weight: 700;
}
.kakko{
  color:#32acf3;
  font-size: 20px;
  font-weight: 600;
  margin: 0;
  padding: 0;
}
#contents_01{
  margin-bottom: 1%;
}
#contents_02{
  margin-bottom: 1%;
}
#contents_03{
  margin-bottom: 1%;
}
#contents_04{
  margin-bottom: 1%;
}
#contents_05{
  margin-bottom: 1%;
}
.contents_title{
  font-weight: 600;
  color: aliceblue;
  padding: 0 3% 0 3%;
}
.text_title{
  width:85%;
}
.article{
  padding: 0 3% 0 3%;
}
.contents_sub_title{
  padding-left: 3%;
  padding-right: 3%;
  margin-top: 2%;
  margin-bottom: 2%;
  color:#32acf3;
  font-weight: 600;
  font-size: 19px;
}
.root_img{
  width: 44%;
  margin-bottom: 20px;
  float: left;
  margin-left: 2%;
}
.article_left{
  max-width: 441px;
  float: left;
  margin-bottom: 20px;
}
.text_area{
  padding: 0 3% 0 3%;
  overflow: hidden;
}
#otherworks{
  margin: 0 auto;
  max-width: 869px;
  margin-top: 30px;
  margin-bottom: 1%;
  background-color: #FFFFFF;
  border-radius:25px;          
  -webkit-border-radius: 25px;  
  -moz-border-radius: 25px;
  padding: 0 0 0.5% 0;
}
.works_titel{
  font-weight: 600;
  color: aliceblue;
  padding: 0.7% 3% 0.7% 3%;
  background-color:#0b5590;
  margin-bottom: 20px;
}
.works_area{
  overflow: hidden;
  margin-bottom: 30px;
  width: 100%;
}
.works_img{
  float: left;
  width: 18%;
  text-align: center;
  margin: 1%;
  min-width: 50px;
  background-color:#0b5590;
}
.search_list{
  max-width: 850px;
  width: 100%;
  overflow: hidden;
  margin: 0 auto;
  padding: 1%;
  margin-bottom: 40px;
}
.result{
  width: 19%;
  background-color: #FFFFFF;
  padding:10px;
  text-align: center;
  margin:1.8%;
  min-width: 50px;
  float:left;
  border-radius: 10px;
  -webkit-border-radius:10px;
  -moz-border-radius: 10px;
  box-shadow: 0 8px  rgba(0,0,0,0.2);
  -webkit-box-shadow: 0 8px  rgba(0,0,0,0.2);
  -moz-box-shadow: 0 8px rgba(0,0,0,0.2);
  font-size:90%;
  white-space: normal;
}
.search_icon{
  width: 100%;
  margin-bottom: 3%;
}
.icon_title{
  text-align: center;
  color: #000;
}
.search_look{
  cursor:pointer;
  max-width: 215px;
  margin: 0 auto;
}
.entrytitle{
color: #000;
  text-align: center;
  font-size:99%;
  position: relative;
  height: 30px;
  vertical-align: middle;
  line-height: 1.2;
}
.entrytitle.type2{
  height:60px;
}
.thumbnail_title{
  width: 100%;
  display:block;
  font-size:99%;
  line-height: 1.1;
  text-align: center;
  margin: 0 auto;
}
.thumbnail_titles{
  text-align: center;
  display:block;
  padding: 0;
  margin: 0 auto;
  white-space: normal;
}
.thumbnail_title_ruby{
  white-space: normal;
  display:block;
  margin-top:1%;
  line-height: 1.2;
  font-size:90%;
  color: #000;
padding: 0;
}
.lp{
  max-width: 720px;
  width: 100%;
  margin: 0 auto;
  text-align: center;
}
.lp a img{
    -moz-transition: -moz-transform 0.3s ease-in-out;
    -webkit-transition: -webkit-transform 0.3s ease-in-out;
    -o-transition: -o-transform 0.3s ease-in-out;
    -ms-transition: -ms-transform 0.3s ease-in-out;
    transition: transform 0.3s ease-in-out;
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
}
.lp:hover a img{
-webkit-transform: scale(0.9);
    -moz-transform:   scale(0.9);
    -o-transform:   scale(0.9);
    -ms-transform:   scale(0.9);
    transform:   scale(0.9); 
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
}

@media screen and (max-width:830px) { 
.article_left{
  max-width: 100%;
  float: left;
  margin-bottom: 20px;
}
.result{
  text-align: center;
  width: 19%;
   padding: 1.2%;
}
.search_list{
  margin: 0 auto;
  padding: 3%;
}
.works_area{
  padding: 0 3% 0 3%;
}

.back_kumo{ 
  width: 35%;
}
#details{
  margin-top:0%;
 width: 90%;
}
.entrytitle{
  white-space: normal;
  height:30px;
  line-height:30px;
}
.entrytitle.type2{
  height:60px;
}
.thumbnail_title{
  line-height:1.2;
}
}
@media screen and (max-width:768px) { 
.article_left{
  max-width: 100%;
  float: left;
  margin-bottom: 20px;
}
.result{
  width: 24%;
   padding: 2.8%;
}
.search_list{
  margin: 0 auto;
  padding: 3%;
}
.works_area{
  padding: 0 3% 0 3%;
}
.back_kumo{ 
  width: 35%;
}
#details{
  margin-top:0%;
}
.entrytitle{
  white-space: normal;
  height:30px;
  line-height:30px;
}
.entrytitle.type2{
  height:60px;
}
.thumbnail_title{
  line-height:1.2;
}
}
@media screen and (max-width:480px) { 
.result{
  text-align: center;
  width: 38%;
  margin:3%;
}
.search_list{
  margin: 0 auto;
}
.search_btn{
  margin-top: -15%;  
}
#details{
   margin-top: 0%;
}
#wrapper2{
  
 
  padding: 2% 0 2% 0;
}
.entrytitle{
  white-space: normal;
  height: 35px;
  line-height:35px;
}
.entrytitle.type2{
  height:65px;
}
.works_area{
  padding: 0 1.5% 0 2%;
}
.thumbnail_title{
  line-height:1.2;
}
.title{
  line-height:1.2;
}
.root_img{
  width: 60%;
  margin-bottom: 20px;
  float: left;
}
.sub_title_01{
  font-size: 97%;
}
.sub_title_02{
  font-size: 97%;
}
.main_title{
  color:#32acf3;
  font-size: 97%;
}
.kakko{
  font-size: 97%;
}
#main_contents{
  font-size: 97%;
}
.contents_sub_title{
  font-size: 98%;
}
.contents_title{
  font-size: 97%;
}
}