/* ==========================================================================
   main-sp.css
   ========================================================================== */

/* -----------------------------------
      レスポンシブ対応
   ----------------------------------- */
/* 0px～480pxの画面サイズにCSSを適応（スマホ） */
@media screen and (max-width: 480px) {
	/*************************
	 共通 480px
	 *************************/
	body {
		font-size : 12px;
	}
	table {
	    width: 90%;
	}
	.for-pc {
		display : none;
	}
	.for-sp {
		display : block;
	}
	.pagetop_button {
	}
	.text-left {
		font-size: 14px;
	}
	.upload-file-name {
		font-size: 11px;
		padding: 10px 0 0 0;
		margin: 0;
	}
	/*************************
	 ヘッダー部
	 *************************/
	 .header-container {
		position : fixed;
		z-index  : 90000;
		width    : 100%;
		top      : 0;
	 }
	.header-container-bk {
	    width   : 100%;
	    height  : 70px;
	}
	.header-back {
		height  : 70px;
	}
	.logo {
		width   : 10px;
	}
	.logo img {
		height  : 40px;
		padding : 5px;
		position: absolute;
		z-index: 99998;
	}
	/* PC版メニューは非表示 */
	.logo-navi {
		display : none;
	}
	#navi {
		display : none;
	}
	.header-img-container {
	
	}
	.img-container {
		height: 100px;  /* トリミングしたい高さ */
	}
	.img-container img {
		position: absolute;
	}
	.img-container-msg-en {
		font-size: 16px;
	}
	.img-container-msg-ja {
		font-size: 20px;
	}

	/***********************
	  メニュー関連
	 ***********************/
	.logo-navi-sp {
		display : block;
		float   : right;
		height  : auto;
		width   : auto;
		overflow :hidden;
	}
	.logo-navi-sp ul {
		list-style    : none;
		padding-left  : 0;
	}
	.logo-navi-sp li {
		color   : #fff;
		float   : left;
		height  : 55px;
		width   : 55px;
		margin  : 15px 1px 0 0;
	}
	.logo-navi-sp li a {
		color   : #fff;
		position: relative;	/* z-index用 */
		z-index : 99998;
	}
	.logo-navi-sp .fa {
		font-size : 25px;
	}
	.logo-navi-sp p {
		font-size   : 9px;
		font-weight : bold;
		position    : relative;	/* z-index用 */
		z-index : 99998;
	}
	.pankuzu ul {
		padding-left : 0;
	}
	.area-title-search-en {
	    font-size: 16px;
	}
	.area-title-search-ja {
	    font-size: 22px;
	}

	/***********************
	 トップ画像エリア
	 ***********************/
	.top-image-container {
	}
	.top-image-container-bk {
		height: 175px;
	}
	.top-image-back {
		height      : 300px;
	}
	.top-message-container {
		width : 100%;
	}
	.top-message-container img {
		width   : 230px;
		padding : 20px 0 0 10px;
	}
	/* トップ 画像が左、文字が右 */
	.top-message-char-left {
	    position: absolute;
    	left    : 0;
    	top     : 0;
	}
	.balloon-right-btm {
	    position  : absolute;
	    right     : 30px;
	    top       : -10px;
		font-size : 20px;
		width: 45px;
		height: 45px;
		line-height: 40px;
	    margin: 20px 95px 15px 0;
	}
	.balloon-right-btm:before {
		position: absolute;
	    bottom: -6px;
	    right: -6px;
	    margin-top: -15px;
	    border: 6px solid transparent;
	    border-left: 10px solid #e92619;
	}
	.top-message-word-right {
		padding : 10px;
		width   : auto;
		height  : 300px;
	    position: absolute;
    	right   : 0;
    	top     : 0;
	}
	.top-message-word-right-top {
		margin     : 0;
	    font-size  : 16px;
	    height     : 35%
	}
	.top-message-word-right-top span {
		margin     : 0 0 10px 0;
	}
	.top-message-word-right-middle {
		font-size  : 18px;
		margin     : 0;
	    height     : 20%;
	    text-shadow: 
			 2px  2px 1px #fff,
			-2px  2px 1px #fff,
			 2px -2px 1px #fff,
			-2px -2px 1px #fff,
			 2px  0px 1px #fff,
			 0px  2px 1px #fff,
			-2px  0px 1px #fff,
			 0px -2px 1px #fff;
	}
	.top-message-word-right-bottom {
		font-size  : 14px;
		margin     : 0;
	    height     : 50%;
        padding    : 5px 0 0 0;
		text-shadow:
			 2px  2px 1px #fff,
			-2px  2px 1px #fff,
			 2px -2px 1px #fff,
			-2px -2px 1px #fff,
			 2px  0px 1px #fff,
			 0px  2px 1px #fff,
			-2px  0px 1px #fff,
			 0px -2px 1px #fff;
	}
	/* トップ 画像が右、文字が左 */
	.top-message-char-right {
	    position: absolute;
    	right   : 30px;
    	top     : 0;
	}
	.balloon-left-btm {
	    position   : absolute;
	    left       : 0px;
	    top        : -10px;
		font-size  : 20px;
		width      : 45px;
		height     : 45px;
		line-height: 40px;
	    margin: 20px 95px 15px 0;
	}
	.balloon-left-btm:before {
		position: absolute;
	    bottom: -6px;
	    right: -6px;
	    margin-top: -15px;
	    border: 6px solid transparent;
	    border-left: 10px solid #e92619;
	}
	.top-message-word-left {
		padding : 10px;
		width   : auto;
		height  : 300px;
	    position: absolute;
    	left    : 0;
    	top     : 0;
	}
	.top-message-word-left-top {
		margin     : 0;
	    font-size  : 16px;
	    height     : 35%;
	    text-align : right;
	}
	.top-message-word-left-top span {
		margin     : 0 0 10px 0;
		text-align : right;
		left       : 20px;
	}
	.top-message-word-left-middle {
		font-size  : 18px;
		margin     : 0;
	    height     : 16%;
	    text-shadow: 
			 2px  2px 1px #fff,
			-2px  2px 1px #fff,
			 2px -2px 1px #fff,
			-2px -2px 1px #fff,
			 2px  0px 1px #fff,
			 0px  2px 1px #fff,
			-2px  0px 1px #fff,
			 0px -2px 1px #fff;
	}
	.top-message-word-left-bottom {
		font-size  : 14px;
		margin     : 0;
	    height     : 50%;
        padding    : 5px 0 0 0;
		text-shadow:
			 2px  2px 1px #fff,
			-2px  2px 1px #fff,
			 2px -2px 1px #fff,
			-2px -2px 1px #fff,
			 2px  0px 1px #fff,
			 0px  2px 1px #fff,
			-2px  0px 1px #fff,
			 0px -2px 1px #fff;
	}

	.top-pickup-container {
		height     : 200px;
		width      : 95%;
		top        : -55px;
	}
	.top-pickup-container section {
		min-height: 160px;
		width      : 95%;
		padding: 10px 10px 10px 40px;
	}
	/***********************
	  「ピックアップ案件」エリア
	 ***********************/
	.triangle {
		font-size : 12px;
		padding: 67px 0px 2px;
		left: -109px;
	}
	.circle-h1 {
		height: 18px;
	    width: 18px;
	    left:-24px;
	}
	.anken-li {
		font-size : 10px;
	}
	.anken-li h1 {
		font-size : 16px;
		margin    : 4px 0;
	}
	.anken-tanka {
		margin: 4px 0;
	}
	.anken-price {
		font-size:18px; 
	}
	.anken-joken {
	    display: block;
	    margin: 0;
	    width: 100%;
	}
	.anken-joken-job,
	.anken-joken-area {
	    width: 50%;
	    margin: 5px 0;
		padding: 0 0 0 16px;
	}
	.anken-skill {
	    display: inline-block;
	    width: 100%;
	}
	.icon-man:before {
	    height: 10px;
	    width: 10px;
	    top: 0px;
	    left: 0;
	}
	.icon-man:after {
	    width  : 10px;
	    height : 8px;
		top    : 8px;
	    bottom : 0;
	}
	.icon-map:before {
		top: 0;
	}
	.icon-map:after {
		bottom: -2px;
	}
	.skill-language,
	.skill-joken {
	    height: 14px;
	    padding: 0 6px;
		margin: 2px 2px 2px 0;
	}
	/***********************
	  「案件を探す」エリア
	 ***********************/
	.top-search-container {
		padding: 50px 0 0 0;
	}
	.search-area,
	.search-detail {
		width : 90%;
	}
	.search-detail-body {
		margin : 0;
	}
	.search-detail-head {
		font-size      : 12px;
	}
	
	.search-yakuwari-checkbox .list_item,
	.search-kodawari-checkbox .list_item {
		width : 50%;
		border-bottom : 1px solid #fff;
		margin : 0;
	}
	.search-yakuwari-checkbox ul,
	.search-kodawari-checkbox ul {
		margin : 0;
	}
	/* 奇数行 */
	.search-yakuwari-checkbox .list_item:nth-child(odd),
	.search-kodawari-checkbox .list_item:nth-child(odd) {
		border-right  : 1px solid #fff;
	}
	.search-yakuwari-checkbox label,
	.search-kodawari-checkbox label {
		width: 100%;
		margin: 20px 0;
		padding: 0 0 0 10px;
	}
	/* 「閉じる」エリア */
	#top-detail-close-area {
	}
	/*************************
	  「最新案件」エリア
	 *************************/
	.top-latest-container {
	}
	.switcher {
	    font-size: 12px;
	    margin: 10px;
	    padding: 10px 10px;
	}
	.list-style-buttons {
	    padding: 40px 0 10px 0;
		margin-bottom: 20px;
	}
	.list-style-buttons a.active {
	    font-size: 12px;
	    margin: 10px;
	    padding: 10px 10px;
	}
	/* リスト表示 */
	.anken-ul {
    	width: 90%;
	}
	/* サムネイル表示 */
	.anken-li-thum-slide {
	    font-size  : 10px !important;
		min-height : 280px !important;
	    padding    : 20px 20px 20px 30px !important;
	}
	.anken-li-thum-slide h1 {
	    font-size: 16px;
	    margin: 8px 0;
	}
	.anken-li-thum-slide .anken-date {
	    font-size  : 10px !important;
	}
	/* ボタン */
	.submit-button,
	.send-button,
	.back-button {
	    margin    : 10px auto;
	    max-width : 250px;
	}
	.submit-button span,
	.send-button span,
	.back-button span {
	    font-size: 14px;
	    font-weight: unset;
	}
	.pager ul li span, .pager ul li a {
	    border-radius: 20px;
	    font-size: 12px;
	    padding: 0.3em 0.7em;
	    margin: 0 0.3em;
	}
	.pager ul li {
	    left: -66%;
	}
	.pager-arrow a {
		font-size : 12px !important;
	}
	/*************************
	 「年齢不問の案件」エリア
	 *************************/
	.top-all-age-container {
	}
	/*************************
	 「特集」エリア
	 *************************/
	.top-Feature-container {
	}
	.feature-area {
	 	width: 90%;
	 	position: unset;
	 }
	.feature-area-left {
	    float: none;
	    width: 100%;
	    display: block;
	    position: relative;
	    height: 200px;
	}
	.feature-area-right {
		float: none;
	    width: 100%;
	    display: block;
		height: auto;
	}
	.feature-area-right-top {
		font-size : 12px;
	}
	.feature-area-right-top h2 {
		font-weight : bold;
		font-size : 18px;
	}
	/**************************
	 フッターエリア
	 **************************/
	.footer-container {
	}
	.footer-container-bk {
		width: 100%;
	}
	.search-footer-form {
		width : 100%;
		display: block;
	}
	.search-footer-label {
		width      : 85%;
		height     : 20px;
		color      : #fff;
		margin     : 0 auto;
	}
	.search-footer-text {
		width: 85%;
		margin : 10px auto;
		float : none;
	}
	.search-footer-navi {
		position: unset;
		width: 100%;
		min-width: 0;
		float: none;
	}
	.search-footer-navi {
		margin : 20px 0;
	}
	.footer-navi {
		padding-left : 0;
	}
	.footer-navi li {
		width : 50%;
		padding : 16px 0;
		border-top : 1px solid #fff;
		border-bottom : 1px solid #fff;
	}
	/* 線の重なりを除去 */
	.footer-navi li:nth-child(2),
	.footer-navi li:nth-child(3) {
		border-bottom : 0;
	}
	.footer-navi li a {
		font-weight : normal;
	}
	.footer-logo img {
		margin: 10px 0 0 0;
	}
	.links li {
		margin: 0 0px 0px 0;
		width: 100%;
	}

	/*************************
	 「案件を探す」ページ
	 *************************/
	.anken-detail-container {
	}
	.search-header-container {
	}
	.table-head {
		width: 90%;
		margin: 1em auto;
	}
	.search-count {
	    font-size: 12px;
	}
	.text-right {
	    font-size: 12px;
	}
	.select-sort {
    	width: 110px;
	}
	
	/******************
	 「案件詳細」画面
	 ******************/
	.case-title {
	}
	.case-title span {
	    font-size: 12px;
	}
	 .case-title h1 {
	    font-size: 16px;
	    font-weight: bold;
	}
	 .comment-face-img {
	 	width: 65px;
	 	min-height: 120px;
	 }
	 .case-detail-comment-title {
	    font-size: 16px;
	    display: block;
	    margin: 5px 0;
	}
	.case-detail-comment-area {
		min-height          : 160px;
	}
	.case-detail-comment-header {
		font-size: 14px;
	}
	.case-detail-comment-body {
		font-size: 14px;
	}
	.case-detail-comment-area .back-button {
		margin: 0 auto;
	}
	.case-detail-old-message {
		margin-left: 0;
		text-align: center;
	}
	.anken-detail-container .case-relation-skill li {
		padding: 2px 10px;
		height: 24px;
		margin: 2px;
	}
	.member-table th,
	.member-table td {
		display: block;
		padding: 5px 10px;
		width: 100%;
	}
	.member-table td {
		padding: 20px 10px;
	}
	.case-detail-comment-area {
		width: 90%;
	}
	.relative {
		position:relative;
		height:150px;
	}
	.absolute-top {
		display: block !important;
		position:absolute !important;
		top:20px;
		left:0;
		right:0;
	}
	.absolute-bottom {
		display: block !important;
		position:absolute !important;
		bottom:20px;
		left:0;
		right:0;
	}
	/******************
	 「indecoについて」画面
	 ******************/
	.about-contents {
		font-size: 14px;
	}
	.about-contents h3 {
		font-size: 16px;
	}
	.about-contents-image {
	    position: relative;
	    overflow: hidden;
	    width: 100%;
	    height: 200px;
	}
	.about-contents-image img {
	    position: absolute;
	    height: 280px;
	    margin-top: -35px;
	    margin-left: -250px;
	    left: 50%;
	}

	/******************
	 管理：「案件一覧」画面
	 ******************/
	.admin-container-bk {
	}
	.admin-anken-result {
		/* 一覧の横スクロール化 */
		overflow-x: auto;
	}
	/******************
	「お問い合わせ」画面
	 ******************/
	.contact-table-th,
	.contact-table-td {
		display: block;
		width: 100%;
		padding: 10px;
	}
	/******************
	「仮登録」画面
	 ******************/
	.entry-table-th {
		display: block;
		width: 100%;
		padding: 10px;
	}
	.entry-table-td {
		display: block;
		width: 100%;
		padding: 10px;
		text-align: center;
	}
	.entry-message-area {
		width: 90%;
		height: 250px;
		font-size: 14px;
	}
	.entry-message-area h3 {
		font-size: 20px;
	}
	.agree-type {
		text-align: center;
	}
	.contact-message-area,
	.entry-message-area {
		font-size: 14px;
	}
	.contact-message-area h3,
	.entry-message-area h3 {
		font-size: 18px;
		font-weight: bold;
	}
	.privacy-checkbox-parts {
		font-size: 14px;
	}
}
/* 480px～1024pxの画面サイズにCSSを適応（タブレット）  */
@media screen and (min-width: 480px) and (max-width:1024px){
	.header-container-bk {
	    height: 80px;
	}
	.header-back {
	    height: 120px;
	}
	.navi-container {
	    width: 100%;
	}
	.top-message-container {
	    width: 75%;
	}
	.top-message-container img {
	}
	/* トップ 画像が左、文字が右 */
	.top-message-char-left {
	    position: absolute;
    	left    : 0;
    	top     : 0;
	}
	.balloon-right-btm {
	    position: absolute;
		right: 95px;
	    top: -10px;
		font-size: 28px;
		width: 70px;
		height: 70px;
		line-height: 70px;
	    margin: 20px 95px 15px 0;
	}
	.balloon-right-btm:before {
		position: absolute;
	    bottom: -3px;
	    right: -3px;
	    margin-top: -15px;
	    border: 6px solid transparent;
	    border-left: 10px solid #e92619;
	}
	.top-message-word-right {
		padding: 0;
		padding-top: 50px;
		width   : 55%;
		height  : 400px;
	    position: absolute;
    	right   : 0;
    	top     : 0;
	}
	.top-message-word-right-top {
		margin     : 0;
	    font-size  : 16px;
	    height     : 35%
	}
	.top-message-word-right-top span {
		margin     : 0 0 15px 0;
	}
	.top-message-word-right-middle {
		font-size  : 28px;
		margin     : 0;
	    height     : 20%;
	    text-shadow: -1px -1px 1px #fff, 1px 1px 1px #fff;
	}
	.top-message-word-right-bottom {
		font-size  : 16px;
		margin     : 0;
	    height     : 50%;
        padding    : 15px 0 0 0;
		text-shadow: -1px -1px 1px #fff, 1px 1px 1px #fff;
	}
	/* トップ 画像が右、文字が左 */
	.top-message-char-right {
	    position: absolute;
    	right   : 0;
    	top     : 0;
	}
	.balloon-left-btm {
	    position    : absolute;
		left        : 0px;
	    top         : -10px;
		font-size   : 28px;
		width       : 70px;
		height      : 70px;
		line-height : 70px;
	    margin      : 20px 95px 15px 0;
	}
	.balloon-left-btm:before {
		position: absolute;
	    bottom: -3px;
	    right: -3px;
	    margin-top: -15px;
	    border: 6px solid transparent;
	    border-left: 10px solid #e92619;
	}
	.top-message-word-left {
		padding: 0;
		padding-top: 50px;
		width   : 55%;
		height  : 400px;
	    position: absolute;
    	left    : 0;
    	top     : 0;
	}
	.top-message-word-left-top {
		margin     : 0;
	    font-size  : 16px;
	    height     : 35%
	}
	.top-message-word-left-top span {
		margin     : 0 0 15px 0;
		left       : 50px;
	}
	.top-message-word-left-middle {
		font-size  : 28px;
		margin     : 0;
	    height     : 20%;
	    text-shadow: -1px -1px 1px #fff, 1px 1px 1px #fff;
	}
	.top-message-word-left-bottom {
		font-size  : 16px;
		margin     : 0;
	    height     : 50%;
        padding    : 15px 0 0 0;
		text-shadow: -1px -1px 1px #fff, 1px 1px 1px #fff;
	}
	/* 案件表示 */
	.top-pickup-container {
		width      : 100%;
		max-width  : 650px;
	}
	.anken-ul {
		width      : 100%;
		max-width  : 650px;
	}
	/* フッター */
	.footer-container-bk {
	    width: 100%;
	}
	.search-footer-text {
	    width: 55%;
	    margin: 10px auto;
	    float: none;
	}
}