/* mypageページ専用スタイル - ヘッダー・フッター以外のデザイン */

/* PC版 */
@media screen and (min-width: 769px) {
	/* mypage */

	#mypage div.wrap dl.title {
		padding: 60px 0 40px;
		text-align: center;
		position: relative;
	}

	#mypage div.wrap dl.title dt {
		font-family: 'freightdispbooksc';
		font-size: 48px;
		line-height: 80%;
	}

	#mypage div.wrap div.main>dl.title dt {
		letter-spacing: .2em;
	}

	#mypage div.wrap dl.title dt span {
		font-family: 'freightdispbookitalic';
	}

	#mypage div.wrap dl.title dd {
		font-size: 14px;
		line-height: 140%;
		padding-top: 20px;
	}

	#mypage div.wrap dl.title dd.bread {
		font-family: 'freightdispbookitalicsc';
		font-size: 10px;
		line-height: 180%;
		padding-top: 0;
	}

	#mypage div.wrap div.info dl.title dd:after,
	#mypage div.wrap div.list dl.title dd:after,
	#mypage div.wrap div.howto dl.title dd:after {
		content: "";
		position: absolute;
		left: 50%;
		bottom: 20px;
		margin-left: -30px;
		width: 60px;
		height: 1px;
		border-top: 1px solid #000;
	}

	#mypage div.wrap div.about {
		text-align: center;
		width: 960px;
		margin: 0 auto;
		border-bottom: 1px solid #000;
	}

	#mypage div.wrap div.about img {
		display: block;
		margin: 0 auto;
	}

	#mypage div.wrap div.about img:nth-child(2) {
		width: 100px;
		height: 100px;
		margin: 40px auto;
	}

	#mypage div.wrap div.about dl dt {
		font-size: 30px;
		line-height: 100%;
		padding-bottom: 30px;
	}

	#mypage div.wrap div.about dl dd {
		font-size: 14px;
		line-height: 180%;
		padding-bottom: 30px;
	}

	#mypage div.wrap div.info {
		margin: 0 auto 60px;
	}

	#mypage div.wrap div.info p {
		width: 640px;
		margin: 0 auto;
		font-size: 14px;
		line-height: 180%;
	}

	#mypage div.wrap div.list {
		background: #eee;
	}

	#mypage div.wrap div.list div.tile {
		font-size: 0;
		width: 960px;
		margin: 0 auto;
		padding: 4px 0 60px;
	}

	#mypage div.wrap div.list div.box {
		display: inline-block;
		background: #fff;
		width: 310px;
		height: 345px;
		box-shadow: 0 2px 5px rgba(0, 0, 0, .3);
		position: relative;
		margin: 0 5px 10px;
		text-align: center;
		vertical-align: top;
	}

	#mypage div.wrap div.list div.box:nth-child(3n+3) {
		margin-right: 0;
	}

	#mypage div.wrap div.list div.box div.photo {
		position: relative;
		background: #000;
		width: 100%;
		height: 207px;
	}

	#mypage div.wrap div.list div.box div.photo img {
		width: 100%;
		height: 100%;
	}

	#mypage div.wrap div.list div.box div.photo a {
		display: block;
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 30;
	}

	#mypage div.wrap div.list div.box div.state {
		background: url(../imgHtml/pc/listShadow.png) repeat-x center bottom;
		width: 100%;
		height: 100px;
		position: absolute;
		left: 0;
		bottom: 0;
		color: #fff;
		padding-top: 53px;
	}

	#mypage div.wrap div.list div.box dl.data {
		padding-top: 15px;
	}

	#mypage div.wrap div.list div.box dl.data dt {
		font-family: 'freightdispbooksc';
		font-size: 30px;
		line-height: 100%;
	}

	#mypage div.wrap div.list div.box dl.data dd.size {
		font-family: 'freightdispbookitalicsc';
		font-size: 10px;
		line-height: 140%;
	}

	#mypage div.wrap div.list div.box dl.data dd.name {
		font-family: "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
		font-size: 12px;
		line-height: 180%;
		letter-spacing: .2em;
	}

	#mypage div.wrap div.list div.box a.delete {
		display: block;
		margin: 0 auto;
		color: #fff;
		background: #a0a0a0;
		font-size: 12px;
		width: 130px;
		height: 30px;
		line-height: 30px;
	}

	#mypage div.wrap div.howto {
		padding-bottom: 60px;
		width: 640px;
		margin: 0 auto;
	}

	#mypage div.wrap div.howto div.movie {
		width: 640px;
		height: 360px;
		background: #000;
		margin-bottom: 30px;
	}

	#mypage div.wrap div.howto div.text {
		font-size: 14px;
		line-height: 180%;
	}

	#mypage div.wrap div.howto div.text h4 {
		font-size: 24px;
		line-height: 100%;
		margin-bottom: 15px;
	}

	/* default.cssから移動 - PC版 */
	#mypage div.main div.list div.box div.state div {
		font-family: "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
		width: 190px;
		height: 20px;
		font-size: 12px;
		line-height: 20px;
		background: rgba(229, 0, 110, .5);
		margin: 8px auto 0;
		letter-spacing: .1em;
		font-style: italic;
	}

	#mypage div.main div.list div.box div.state div.tel {
		background: rgba(0, 158, 150, .5);
	}

	#mypage div.main div.list div.box div.state div.thanks {
		background: rgba(95, 82, 160, .5);
	}

	#mypage div.main div.list div.box div.state div.close {
		background: rgba(0, 139, 180, .5);
	}

	#mypage div.main div.list div.box div.state div.add {
		width: 114px;
		position: relative;
		left: 38px;
	}

	#mypage div.main div.list div.box div.state div.add:after {
		content: "追加出勤";
		display: block;
		position: absolute;
		left: -76px;
		top: 0;
		width: 76px;
		height: 20px;
		font-size: 12px;
		line-height: 20px;
		background: rgba(199, 188, 2, .5);
	}
}

/* SP版 */
@media screen and (max-width: 768px) {
	/* mypage */

	#mypage div.wrap dl.title {
		padding: 50px 0 40px;
		text-align: center;
		position: relative;
	}

	#mypage div.wrap dl.title dt {
		font-family: 'freightdispbooksc';
		font-size: 48px;
		line-height: 80%;
	}

	#mypage div.wrap div.main>dl.title dt {
		letter-spacing: .2em;
	}

	#mypage div.wrap dl.title dt span {
		font-family: 'freightdispbookitalic';
	}

	#mypage div.wrap dl.title dd {
		font-size: 16px;
		line-height: 140%;
		padding-top: 15px;
	}

	#mypage div.wrap dl.title dd.bread {
		font-family: 'freightdispbookitalicsc';
		font-size: 10px;
		line-height: 180%;
		padding-top: 0;
	}

	#mypage div.wrap div.main div.about,
	#mypage div.wrap div.main div.info,
	#mypage div.wrap div.main div.howto {
		margin: 0 20px;
	}

	#mypage div.wrap div.info dl.title dd:after,
	#mypage div.wrap div.list dl.title dd:after,
	#mypage div.wrap div.howto dl.title dd:after {
		content: "";
		position: absolute;
		left: 50%;
		bottom: 20px;
		margin-left: -30px;
		width: 60px;
		height: 1px;
		border-top: 1px solid #000;
	}

	#mypage div.wrap div.about {
		text-align: center;
		border-bottom: 1px solid #000;
		position: relative;
	}

	#mypage div.wrap div.about img:first-child {
		position: absolute;
		top: -210px;
		left: 50%;
		margin-left: -300px;
	}

	#mypage div.wrap div.about img:nth-child(2) {
		display: block;
		margin: 0 auto;
		margin: 40px auto 40px;
	}

	#mypage div.wrap div.about dl dt {
		font-size: 30px;
		line-height: 100%;
		padding-bottom: 20px;
	}

	#mypage div.wrap div.about dl dd {
		font-size: 18px;
		line-height: 180%;
		padding-bottom: 30px;
	}

	#mypage div.wrap div.info {
		padding-bottom: 40px;
	}

	#mypage div.wrap div.info p {
		margin: 0 auto;
		font-size: 14px;
		line-height: 180%;
		color: #626262;
	}

	#mypage div.wrap div.list {
		background: #eee;
		padding: 0 40px;
	}

	#mypage div.wrap div.list div.tile {
		font-size: 0;
		margin: 0 auto;
		padding-bottom: 20px;
	}

	#mypage div.wrap div.list div.box {
		width: 100%;
		background: #fff;
		box-shadow: 0 2px 5px rgba(0, 0, 0, .3);
		position: relative;
		text-align: center;
		margin-bottom: 20px;
		padding-bottom: 20px;
	}

	#mypage div.wrap div.list div.box div.photo {
		position: relative;
		width: 100%;
	}

	#mypage div.wrap div.list div.box div.photo a {
		display: block;
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 30;
	}

	#mypage div.wrap div.list div.box div.photo img {
		width: 100%;
		height: 100%;
	}

	#mypage div.wrap div.list div.box dl.data {
		text-align: left;
	}

	#mypage div.wrap div.list div.box a.delete {
		display: block;
		margin: 20px auto 0;
		color: #fff;
		background: #a0a0a0;
		font-size: 18px;
		font-weight: bold;
		border-radius: 5px;
		width: 80%;
		height: 60px;
		line-height: 60px;
	}

	#mypage div.wrap div.howto {
		padding-bottom: 40px;
		margin: 0 auto;
	}

	#mypage div.wrap div.howto div.movie {
		height: auto;
		background: #000;
		margin-bottom: 40px;
	}

	#mypage div.wrap div.howto div.text {
		font-size: 18px;
		line-height: 180%;
	}

	#mypage div.wrap div.howto div.text h4 {
		font-size: 24px;
		line-height: 140%;
		margin-bottom: 20px;
	}

	/* default.cssから移動 - SP版 */
	#mypage div.wrap div.main dl.title dt h2 {
		font-size: 32px !important;
		line-height: 1.2 !important;
	}

	#mypage div.wrap div.main div.about dl dt {
		font-size: 18px;
	}

	#mypage div.wrap div.main div.about dl dd {
		font-size: 14px;
	}

	#mypage div.wrap div.main div.howto dl.title dt h3 {
		font-size: 48px;
	}

	#mypage div.wrap div.main div.howto dl.title dd {
		font-size: 14px;
	}

	#mypage div.wrap div.main div.howto div.text {
		font-size: 14px;
	}

	#mypage div.wrap div.main div.howto div.text h4 {
		font-size: 16px;
	}


	/* マイページSP版画像のレスポンシブ対応 */
	#mypage div.wrap div.about img:first-child {
		position: static !important;
		top: auto !important;
		left: auto !important;
		margin-left: auto !important;
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		display: block;
		margin: 0 auto 20px;
	}

	#mypage div.wrap div.about img:nth-child(2) {
		width: 100px !important;
		height: 100px !important;
		display: block;
		margin: 0 auto 20px;
	}

	#mypage div.wrap div.about img {
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		display: block;
		margin: 0 auto 20px;
	}
}