@charset "UTF-8";
/* CSS Document */

/* リセット */
*{margin:0; padding:0; box-sizing:border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;}

body { padding-top: 135px; font-family: 'Noto Sans JP', sans-serif; min-height: 100vh; position: relative;/*←相対位置*/ padding-bottom: 264px;/*←footerの高さ*/ box-sizing: border-box;/*←全て含めてmin-height:100vhに*/}

h1 { font-size: 180%; padding-bottom: 12px; text-align: center;}
h1 , h2 ,h3 { margin-bottom: 6px; color:  #333;}
h5 { font-size: 100%;}
p { margin-bottom: 36px; line-height: 175%;}
a { text-decoration:none;}
ul, ol { list-style:none;}
img { vertical-align:middle; border:0;}
address { font-style: normal;}

/* ヘッダ */
header { background-color:#FFF; width: 100%; position: fixed; top: 0;  z-index: 9999; padding:20px; filter: drop-shadow(0 3px 5px #999);}
header nav { margin-left: 370px; font-weight: 700; margin-bottom: 0;}
header nav ul li { display:inline-block; margin-right: 15px; margin-bottom: 0;}
header nav ul li a { display:table-cell; height: 50px; vertical-align: middle; color: #4D4D4D;}
header nav ul li a:hover { color:#FB8800;}
.logo {height: 50px; float: left;}

/* フォーム */
input[type="search"],
button,
select,
textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: transparent;
  border: none;
  border-radius: 0;
  font: inherit;
  outline: none;
  margin: 0;
  padding: 0;
}

textarea {
  resize: vertical;
}

input[type='submit'],
input[type='button'],
label,
button,
select {
  cursor: pointer;
}

select::-ms-expand {
  display: none;
}

input[type='submit'] { width: 100%; padding: 10px; border: 0; font-size: 110%; appearance: none; -webkit-appearance: none;}
input[type='submit']:hover { background-color:#FFB300;}

/* 非公開求人タブ */
.hikoukaiTab { writing-mode: vertical-rl; color: #FFF; font-weight: bolder; font-size: 125%; background-color: #FFB300; position:fixed; bottom: 24px; right: 0; z-index: 9999; padding: 0 12px; border-radius: 12px 0 0 12px;}
.hikoukaiTab a { padding: 12px}
.hikoukaiTab a:visited { color: #FFF;}

/* 検索窓 */
#searchWindow { margin: 0 auto 6px auto;  border: 1px solid #CCC; background-color: #FFF; border-radius: 50px; width: 40%;}
#searchWindow .inputArea , .submitBt { height: 50px; vertical-align: top; text-align: center;}
#searchWindow .inputArea { width: 90%; padding: 0 5px 0 48px;}
#searchWindow .submitBt { width: 9%; padding: 0; background-image: url(../img/search.svg); background-size: 40%; background-repeat: no-repeat; background-position: left; background-color: transparent;}

/* コンテナ */
.container { width: 90%; max-width: 1000px; margin: 0 auto;}

/* その他 */
.imageWidth100 { width: 100%; height: auto; margin-bottom: 36px;}
.textRight { text-align: right;}
.textLeft { text-align: left!important;}
article .imageWidth100 { height: 400px;; object-fit: cover;}
.marginBt12 { margin-bottom: 12px;}
.marginBt24 { margin-bottom: 24px;}
.marginBt36 { margin-bottom: 36px;}

/* ボタン */
.button { clear: both; width: 38%; background-color:#FB8800; margin: 0 auto 24px auto; text-align: center; border-radius: 5px; color: #FFF; font-weight: 500;}
.button:hover { background-color:#FFB300;}
.button a { color: #FFF; padding: 10px; display: block;}

/* ボタン2 */
.button2 { clear: both; display:flex; width: 50%; margin: 0 auto 36px auto;}
.button2 div { width: 50%; background-color:#FB8800; text-align: center; border-radius: 5px; color: #FFF; margin: 0 2% 0 0;}
.button2 div:nth-child(2) { margin-right: 0;}
.button2 div a { color: #FFF; padding: 10px; display: block;}
.button2 div:hover { background-color:#FFB300;}

/* 囲み */
.surround { background-color: #e1e7ff; margin-bottom: 36px; border-radius: 10px; padding: 20px; width: 50%; margin: 0 auto 36px auto;}
.surround h1 { font-size: 120%; border-bottom: 1px solid #4D4D4D; margin-bottom: 12px;}
.surround dl { line-height: 175%;}
.surround dt { clear: both; float: left;}
.surround dt::after { content: "：";}

/* 回り込み */
.imageLeft { clear: both; overflow: auto; margin-bottom: 36px;}
.imageLeft p:last-of-type { margin-bottom: 0;}
.imageLeft img {width: 35%; float: left; margin: 0 20px 20px 0;}

.imageRight { clear: both; overflow: auto; margin-bottom: 36px;}
.imageRight img {width: 35%; float: right; margin: 0 0 20px 20px;}
.imageRight p:last-of-type { margin-bottom: 0;}

/* 2カラム */
.twoColumn { display: flex; flex-wrap: wrap; width: 90%; max-width: 1000px; margin: 0 auto ;}
.twoColumn section { position: relative; background-color: #FFF; flex-basis: 49%; margin-right: 2%; border-radius: 10px; padding: 2%; word-break: break-all; margin-bottom: 36px;}
.twoColumn section:nth-child(2n) { margin-right: 0;}
.twoColumn section img { width: 45%; margin: 0 10px 5px 0; height: 150px; object-fit: cover; float: left;}
.twoColumn section p { margin-bottom: 96px;}
.twoColumn section .button { width: 80%; position:absolute; left: 10%; bottom: 0; }

/* 3カラム */
.threeColumn { display: flex; flex-wrap: wrap; width: 90%; max-width: 1000px; margin: 0 auto;}
.threeColumn section { background-color: #FFF; flex-basis: 32%; margin-right: 2%; border-radius: 10px; word-break: break-all; margin-bottom: 36px;}
.threeColumn section:nth-child(3n) { margin-right: 0;}
.threeColumn section h2 { font-size: 125%;}
.threeColumn section a { display: block; padding: 5%; overflow: hidden; height: 100%;}
.threeColumn section p { margin-bottom: 0; color: #000;}
.threeColumn section img { margin-bottom: 12px; width: 100%; height: 180px; object-fit: cover; }
.threeColumn section .icon { margin-bottom: 6px;}
.threeColumn section .list { margin-bottom: 6px; color: #000;}

/* 契約までの流れ */
.contractFlow { display: flex; flex-wrap: wrap; margin-bottom: 12px;}
.contractFlow div { flex-basis: 32%; margin: 0 2% 24px 0; position: relative; background-color: #eee; padding: 2%; border-radius: 10px; text-align: center;}
.contractFlow img { height: 50px; position: absolute; left: 45%; left:0; right: 0; margin: auto;}
.contractFlow div:nth-child(3n) { margin-right: 0; }
.contractFlow h3 { color: #07217e; padding-top: 55px;}
.contractFlow p { margin: 0; font-size: 90%;}

/* 案件リスト */
.recommend section { border: 2px solid #07217e; background-color: #FFF; overflow: hidden; }
.recommend a { color: #000;}
.recommend h1 { text-align: left;}
.recommend h2 { margin-bottom: 24px; border-bottom: 1px solid #333; padding-bottom: 12px;}
.recommend .list { margin-bottom: 84px; font-size: 90%;}
.recommend .list li { margin-bottom: 12px;}
.recommend .list li:nth-child(1) { padding-left: 2em; background-image: url("../img/recommend/price.svg"); background-repeat: no-repeat; background-size: 1.5em; background-position: left center;}
.recommend .list li:nth-child(2) { padding-left: 2em; background-image: url("../img/recommend/contract.svg"); background-repeat: no-repeat; background-size: 1.5em; background-position: left center;}
.recommend .list li:nth-child(3) { padding-left: 2em; background-image: url("../img/recommend/occupation.svg"); background-repeat: no-repeat; background-size: 1.5em; background-position: left center;}
.recommend .list li:nth-child(4) { padding-left: 2em; background-image: url("../img/recommend/station.svg"); background-repeat: no-repeat; background-size: 1.5em; background-position: left center;}
.recommend .list li:nth-child(5) { padding-left: 2em; background-image: url("../img/recommend/language.svg"); background-repeat: no-repeat; background-size: 1.5em; background-position: left center;}
.icon li { display: inline-block; background-color: #FB8800; padding: 0px 2px; font-size: 80%; color: #FFF; font-weight: 400;}
.date { font-size: 90%; text-align: right;}
.date::before { content: "情報更新日：";}

/* フッタ */
footer { background-color: #07217e; color: #FFF; clear: both; height: 264px; padding: 36px 0; font-size: 90%; width: 100%; position: absolute;/*←絶対位置*/ bottom: 0; /*下に固定*/}
footer a { color: #FFF;}
footer nav { line-height: 100%;}
footer .telNo { font-size: 400%; font-weight: 700; line-height: 125%;}
footer .threeColumn { width: 90%; max-width: 1000px; margin: 0 auto 24px auto;}
footer .threeColumn section { background-color: transparent; padding: 0; flex-basis: 28%;}
footer .threeColumn section:nth-child(3) { flex-basis: 40%;}
footer .threeColumn section a { padding: 0  0 5% 0;}
footer .threeColumn .logo { height: 100%; filter:brightness(0) invert(1); border: none;}
footer .banner { clear: both; text-align: center;}
footer .banner img { height: 100px; width: auto; display: inline-block; margin-right: 10px; }
footer .banner:last-child { margin-right: 0;}
#copyright { text-align: center; margin-bottom: 0; clear: both;}

/* ハンバーガーメニュー */
.menu-btn {
    display: none;
    position: fixed;
    top: 20px;
    right: 20px;
    height: 50px;
    width: 50px;
    justify-content: center;
    align-items: center;
    z-index: 90;
    background-color: #07217e;
}
.menu-btn span,
.menu-btn span:before,
.menu-btn span:after {
    content: '';
    display: block;
    height: 3px;
    width: 25px;
    border-radius: 3px;
    background-color: #FFF;
    position: absolute;
}
.menu-btn span:before {
    bottom: 8px;
}
.menu-btn span:after {
    top: 8px;
}
#menu-btn-check:checked ~ .menu-btn span { background-color: rgba(255, 255, 255, 0);/*メニューオープン時は真ん中の線を透明にする*/}
#menu-btn-check:checked ~ .menu-btn span::before { bottom: 0; transform: rotate(45deg);}
#menu-btn-check:checked ~ .menu-btn span::after { top: 0; transform: rotate(-45deg);
}
#menu-btn-check { display: none;}
.menu-content {
    min-height: 100vh;
    height: 100%;
    position: fixed;
    top: 0;
    left: 100%;
    z-index: 80;
    background-color: #07217e;
    transition: all 0.5s;
}
/*.menu-content {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 80;
    background-color: #07217e;
    overflow: scroll; はみ出した部分をスクロールで見せる
}*/
@media screen and (orientation: landscape) {
    .menu-content {
      height: 80%;
    }
}
  
  @media screen and (orientation: portrait) {
    .menu-content {
      height: 100%;
    }
}
.menu-content ul {
    padding: 70px 20px 0;
}
.menu-content ul li {
    border-bottom: solid 1px #526ac0;
    list-style: none;
}
.menu-content ul li a {
    display: block;
    width: 100%;
    font-size: 15px;
    box-sizing: border-box;
    color:#FFF;;
    text-decoration: none;
    padding: 9px 15px 10px 0;
    position: relative;
}
.menu-content ul li a::before {
    content: "";
    width: 7px;
    height: 7px;
    border-top: solid 2px #FFF;;
    border-right: solid 2px #FFF;;
    transform: rotate(45deg);
    position: absolute;
    right: 11px;
    top: 16px;
}
.menu-content {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 100%;/*leftの値を変更してメニューを画面外へ*/
    z-index: 80;
    background-color: #07217e;
    transition: all 0.5s;/*アニメーション設定*/
}
#menu-btn-check:checked ~ .menu-content { left: 0;/*メニューを画面内へ*/}

/* トップイメージ */
.topImage{ text-align: center; background-image: url("../img/top/topImage.webp"); background-repeat: no-repeat; background-position: 50% ; height: 500px; background-size:cover; display: block; position: relative;}
.topImage::before {
    content: '';
    /* ↓暗いオーバーレイを半透明で配置 */
    background-color: rgba(0, 0, 0, 0.1);
    /* ↓全体を覆うように配置 */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;}
.topImage h1 {color: #FFF; font-size: 200%;}
.topImage div { position: relative; left: 0%; top:60%; width: 90%; margin: 0 auto;}
.topImage div p { margin-bottom: 0; color: #FFF; font-weight: 700; font-size: 125%;}

/* 背景青 */
.blueBack { margin-bottom: 36px; padding: 36px 0 0 0 ; background-color:#e1e7ff; overflow:auto;}

/* 背景グレー */
.grayBack { padding: 36px 0 0 0 ; background-color:#eee; overflow:auto;}

/* 画像切り抜き */
.cutoutRound{ width: 100px; height: 100px; object-fit: cover; border: 1px #eee solid; border-radius: 50%; margin-bottom: 36px;}

/* テーブル */
table { margin-bottom: 36px; background-color: #FFF; border-collapse: collapse; width: 100%;}
table caption{ text-align: left; margin-bottom: 6px;}
th { background-color: #eee; width: 10px; white-space: nowrap;}
table li { margin-bottom: 0;}
td , th { border: 1px #CCC solid; padding: 20px; font-weight: 100;}
table .liststyleDecimal { margin-bottom: 0;}

/* 横並びテーブル */
.tableL { width: 50%; margin-bottom: 36px; float: left;}
.tableR { width: 50%; margin-bottom: 36px; border-left: 0;}
.tableR th { border-left: 0;}

/* グラフ */
.chart { width: 500px; margin: 60px auto;}
.pieChart { width: 100%; margin: 0 auto; position: relative;}
.chart-container { width: 100%!important; position: relative; height:50vh; width:50vw}

/* アコーディオンパネル */
.acMenu { margin:0 auto; width: 100%; }
.acMenu h2 { font-size: 100%;}
.acMenu dt { background-color: #FFF; padding: 12px; border: solid 1px #ccc; cursor:pointer; margin-bottom: -1px;}
.acMenu dd { background-color: #FFF; margin-bottom: 12px; padding: 12px; display:none; border: solid 1px #ccc; overflow: auto;}
.acMenu dd p { margin-bottom: 0;}

/* リストスタイル */
.liststyleDisc{ list-style:disc; padding-left: 1.5em; margin-bottom: 24px;}
.liststyleDecimal { list-style:decimal; padding-left: 1.5em; margin-bottom: 24px;}

/* Topページ */
#topPage { padding-top: 95px; }
#topPage .grayBack { margin-bottom: 48px;}
#topPage .acMenu { margin-bottom: 48px;}
#topPage .acMenu dt { background-image: url(/img/top/question.svg); background-repeat: no-repeat; background-size: 2em; background-position: 12px 50%; padding-left: 50px;}
#topPage .acMenu dd { background-image: url(/img/top/answer.svg); background-repeat: no-repeat; background-size: 2em; background-position: 12px 50%;padding-left: 50px;}
#introduction { background-image: url(../img/top/introduction.webp); background-repeat: no-repeat; background-size:cover; background-position: 0; height: 500px; position: relative;}
#introduction div { width: 25%; position: absolute; right: 5%; top:120px;}
.statistics  { overflow: hidden; margin-bottom: 48px;}
.statistics .text { width: 55%; word-wrap: break-word; float: left;}
.statistics .graph { width:40%; float: right; margin-top: 0;}

/* 案件詳細 */
#projectDetails table th { width: 25%;}
#projectDetails .recommend h1 { display: flex; align-items: center; width: 100%; max-width: 1000px; margin: 0 auto 12px auto;}
#projectDetails .recommend h1:before , #projectDetails .recommend h1:after { content: ""; height: 1px; flex-grow: 1; background-color: #666;}
#projectDetails .recommend h1:before { margin-right: 1rem;} 
#projectDetails .recommend h1:after { margin-left: 1rem;}
#projectDetails .container { margin-top: 50px;}
#projectDetails .container .button { margin: 0 auto 108px auto;}
#projectDetails h1 { margin-bottom: 24px; text-align: left;}
#projectDetails h2 { font-size: 125%;}
#projectDetails .icon { margin-bottom: 12px;}
#projectDetails .date { margin-bottom: 24px;}

/* 検索結果 */
#searchResults { padding-top: 95px;}
#searchResults aside { width: 30%; float: left;}
#searchResults aside .button { width: 100%;}
#searchResults .recommend { width: 68%; float: right;}
#searchResults .recommend section { margin-bottom:36px; border-radius: 10px; word-break: break-all;}
#searchResults .recommend section:last-of-type {margin-bottom: 72px;}
#searchResults .recommend section a { padding: 20px; display: block; overflow: hidden;}
#searchResults .recommend h1 { border-bottom: 1px solid #333; margin-bottom: 24px; padding-bottom: 12px; font-size: 150%;}
#searchResults .recommend h2 { border:none; margin-bottom: 6px; padding-bottom: 0; font-size: 100%;}
#searchResults .recommend .details section { margin: 0; padding: 0; border: 0;}
#searchResults .recommend .details section:nth-child(1) { width: 25%; float: left;}
#searchResults .recommend .details section:nth-child(2) { width: 70%; margin: 0; float:right;}
#searchResults .recommend .list { margin-bottom: 0;}
#searchResults #searchWindow { width: 100%;}
#searchResults #searchWindow { margin-bottom: 12px;}
#searchResults #searchWindow .inputArea { width: 83%;}
#searchResults #searchWindow .submitBt { width: 15%;}
#searchResults .button input { background-color:#FB8800; border-radius: 5px; color: #FFF; width: 100%;}
#searchResults .button input:hover { background-color:#FFB300;}
aside .acMenu { margin-bottom: 24px;}
aside .acMenu dt { font-weight: 400;}
aside .acMenu dd { max-height: 300px; overflow: auto;}
aside .acMenu label { margin: 0 12px 0 6px; }
aside .acMenu .checkBox { margin-bottom: 6px;}
aside .acMenu .checkBox:last-child { margin-bottom: 0;}
aside .acMenu select { width: 100%;}
.conditions { background-color: #FFF; padding: 12px; border-radius: 10px; border: solid 1px #ccc; margin-bottom: 12px;}
.conditions dt {font-weight:400;}
.conditions dd { margin-bottom: 12px;}
.conditions dd:last-child { margin-bottom: 0;}
.conditions h2 { margin-bottom: 12px; border-bottom: 1px solid #333; padding-bottom: 12px; font-size: 125%;}
#hit { font-size: 150%; margin-bottom: 12px; font-weight: 400;}
#hit #number { font-size: 150%; color: #FB8800;}

/* ページネイション */
#pagination { text-align: center; margin-bottom: 60px; clear: both; font-weight: 400;}
#pagination li { display: inline-block; margin-right: 5px;}
#pagination li:last-child { margin-right: 0;}
#pagination li a { background-color: #FFF; padding: 10px 20px; border-radius: 5px; color: #666;}
#pagination .currentPage a { color: #FFF; background-color: #FB8800;}
#pagination li a:hover { color: #FFF; background-color: #FB8800;}

/* コラム */
#columnTop { padding-top: 95px;}
#columnTop .grayBack { margin-bottom: 0;}
#column .date { font-size: 90%; float: right; margin-top: 36px; }

/* マージン率 */
#marginRate th { width: 30%; white-space:normal;}
#marginRate .container { margin-bottom: 64px;}
#marginRate .container ul { line-height: 200%; margin-bottom: 36px;}
#marginRate table { margin-bottom: 6px;}

/* フォーム */
#apply th, td { padding: 10px 20px;}
#apply input , textarea { padding: 10px; border: #CCC 1px solid; }
#apply textarea { width: 100%; height: 120px;}
#apply p { text-align: center; margin-bottom: 12px;}
#apply p a { text-decoration: underline;}
#apply span { font-size: 70%; color: #ff0000;}

/* 送信ボタン */
#apply .button { margin: 0 auto 72px;}
#apply .button input { width: 100%!important; background-color:#999; border: 0; border-radius: 5px; color: #FFF;}
#apply .button input.enabled { background-color: #FB8800;}
#apply .button2 { margin: 0 auto 72px auto;}
#apply .button2 input { width: 50%; background-color:#FB8800; border: 0!important; border-radius: 5px; color: #FFF; margin: 0 2% 0 0;}
#apply .button2 input:nth-child(2) { margin-right: 0;}
#apply .button2 input:hover { background-color:#FFB300;}

/* 個人情報関連ページ */
#privacyPolicy h1 { margin-bottom: 36px;}
#privacyPolicy h2 { border-bottom: #666 1px solid; margin-bottom: 12px; padding-bottom: 12px;}
#privacyPolicy .surround { margin-bottom: 72px;}
#privacyPolicy li {margin-bottom: 12px;}

/* 仕事を依頼する */
#request .container .button { margin: 0 auto 108px auto;}
#request h2 { text-align: center}
#request p { text-align: center}

/* サービス紹介 */
#service h2 { text-align: center;}
#service .container { margin: 0 auto 108px auto;}
#service p { text-align: center}

/* ===== 1024px以下 ===== */
@media screen and (max-width: 1024px) {
    header nav { margin-left: 340px; font-size: 90%;}
    header nav ul li { margin-right: 10px;}
    #searchWindow { width: 50%;}
    #introduction { height: 400px; background-position: -50px;}    
    #introduction div { width: 30%; position: absolute; right: 5%; top:50px;}
    .topImage h1 { font-size: 175%;}

}

/* ===== 768px以下 ===== */
@media screen and (max-width: 910px) {
    body { padding-bottom: 100px;}
    #topPage, #columnTop, #searchResults { padding-top: 90px;}
    footer { height: 100px;}
    .container { width: 95%;}
    #topPage h1 { width: 95%; font-size: 150%;}
    .topImage h1 { margin-bottom: 6px!important;}
    .topImage div p { font-size: 100%;}
    h2 { font-size: 125%;}
    header nav { display: none;}
    .menu-btn { display: flex;}/* ハンバーガーメニューを表示 */
    #searchWindow { width: 80%;}
    .twoColumn { width: 95%;}
    .threeColumn { width: 95%;}
    .threeColumn section { flex-basis: 49%;}
    .threeColumn section:nth-child(3n) { margin-right: 2%;}
    .threeColumn section:nth-child(2n) { margin-right: 0;}
    .threeColumn section img { height: 150px;}
    .statistics .text { width: 100%; clear: both;}
    .statistics .graph { width:100%; clear: both;}
    #introduction { background-position: -200px; height: 400px;}    
    #introduction div { width: 40%;}
    .chart-container { width: 100%!important; position: relative; height:500px; width:500px}
    #searchResults aside { width: 100%; clear: both;}
    #searchResults .recommend { width: 100%; clear: both;}
    footer .threeColumn { display:none;}
    #searchResults #searchWindow .inputArea { width: 90%;}
    #searchResults #searchWindow .submitBt { width: 8%;}
    input[type='submit'] { width: 50%;}
    #searchResults aside .button { width: 50%;}
    .surround { width: 70%;}
    .contractFlow div { flex-basis: 49%; }
    .contractFlow div:nth-child(3n) { margin-right: 2%; }
    .contractFlow div:nth-child(2n) { margin-right: 0; }
}

/* ===== 568px以下 ===== */
@media screen and (max-width: 568px) {
    #topPage h1 { width: 95%; font-size: 150%;}
    body { font-size: 14px; padding-top: 80px;}
    #topPage, #columnTop, #searchResults { padding-top: 60px;}
    header {padding:10px;}
    .logo {height: 40px;}
    h1 {font-size: 150%;}
    .container { width: 90%;}
    #topPage h1 { width: 90%;}
    #searchWindow { width: 100%;}
    #searchWindow .inputArea { width: 85%; padding: 0 5px 0 48px;}
    #searchWindow .submitBt { width: 10%; padding: 0; background-size: 50%;}
    .recommend .list { margin-bottom: 96px;}
    .threeColumn { display: block; width: 90%;}
    .threeColumn section { margin-right: 0!important; padding: 4%;}
    .threeColumn section a { display: block; padding: 1%;}
    .threeColumn section img { height: 200px;}
    #introduction { background-position: -390px; height: 400px;}
    #introduction div { width: 50%; top: 20px;}
    td , th { padding: 10px 5px; display: block; width: 100%!important;}
    #searchResults .recommend section { margin-bottom:24px; padding: 0%;}
    #searchResults .recommend section p { margin-bottom:0px;}
    #searchResults .recommend .details section:nth-child(1) { width: 100%; margin: 0; clear: both;}
    #searchResults .recommend .details section:nth-child(2) { width: 100%; clear: both;}
    #searchResults .recommend .list { margin-bottom: 24px;}
    .button { width: 90%; }
    #pagination li { display: inline-block; margin-right: 2px;}
    #pagination li a { background-color: #FFF; padding: 6px;}
    .menu-btn { top: 10px; right: 20px; height: 40px; width: 40px;}
    .topImage h1 {font-size: 150%;}
    .topImage div { width: 95%;}
    .surround { width: 90%;}
}