@charset "utf-8";


/* * * * * * * * * * * * * * * * * * * * * * *
 *
 * subpage 東京タウンガイド
 *
 * * * * * * * * * * * * * * * * * * * * * * */ 
 

/*********************************************
 * スマートフォン
 ******************************************* */
 

  /*　main-visual
 * --------------------------------- */
 
.main-visual {
 	background: url(../../img/img_main_lifestyle.03_s.png) center top no-repeat;
	background-size: cover; 	
}

.content-area p.column-head {
	padding-bottom: 25px;
}

 /*　footer-menu
 * --------------------------------- */
 
.sp-menu .life-style dt {
    background-color: #fff;
	border-bottom: 1px solid #7ea0c6;
	pointer-events: inherit;
}
.sp-menu .life-style dt a {
	color: #000;
}
.sp-menu .life-style dt:after {
	border-top: 2px solid #00428e;
    border-right: 2px solid #00428e;
}
.sp-menu .work-style dt {
	background-color: #4c5283;
	pointer-events: inherit;
}
.sp-menu .life-style dd {
	display: block;
}

.sp-menu .life-style dd:nth-of-type(2):after {
	border-top: 2px solid #fff;
    border-right: 2px solid #fff;
	
}
.sp-menu .life-style dd:nth-of-type(2) a {
	pointer-events: none;
	background-color: #6d729a;
	color: #fff;	
}
.sp-menu .work-style dd {
	display: none;
}





.box h5 {
	padding: 0 10px;
	font-family: 'M+ 1c regular';
	font-size: 120%;
	font-weight: bold;
    margin: 7px 0;
}
.box .woman h5 {
	color: #fa1a5a;
}
.box .man h5 {
	color: #494d7f;
}
.box .woman h5:after {
    background: #fb487b;
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    margin: 4px 0;
}
.box .man h5:after {
    background: #494d7f;
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    margin: 4px 0;
}



 /*　box-figure
 * --------------------------------- */


.box-figure dl:nth-of-type(3) dd img {
	width: 26%
}
.box-figure dl:nth-of-type(4) dd img {
	width: 23%;
}
.box-figure dl:nth-of-type(5) dd img {
	width: 22%;
}
.box-figure dl:nth-of-type(7) dd img {
	width: 20%;
}

.box .box-01 dl {
	font-size: 92%;
	line-height: 1.3; 	
}
.box .box-01 dt {
	font-weight: bold;
	padding-bottom: 3px;

}
.box .box-01 dl dd:nth-of-type(1), .box .box-02 dl dd:nth-of-type(2) {
	padding-bottom: 16px;
	
}
.box .box-01 dl dd {
	line-height: 1.4;	
}



 /*　table
 * ------------------------------ */
 
.box table {
	text-align: left;
	font-size: 92%;
	
}
.box .man {
	margin-bottom: 30px;	
}
.box .woman table {
	border: 1px solid #fbacc3;
	margin-bottom: 20px;	
}
.box .man table {
	border: 1px solid #9699b5;
}
.box .woman table tr {
	border-bottom: 1px solid #fdb2c7;
}
.box .man table tr {
	border-bottom: 1px solid #9a9eb9;
}
.box table th {
	width: 35%;
	color: #111;
	font-weight: normal;
	padding: 9px 6px 9px 7px;
	border-right: 1px solid #bbbed0;
	vertical-align: middle;	
}
.box .woman table th {
	background: #fef0f3;
	border-right: 1px solid #fbacc3;	
}
.box .man table th {
	background: #f4f4f7;
	border-right: 1px solid #aeb0c6;	
}
.box table th span {
	font-weight: bold;
	padding-right: 10px;
}
.box table td {
	padding: 9px 6px 9px 8px;
	line-height: 1.3;
	vertical-align: middle;
}
.box table td:nth-of-type(1) {
	border-right: 1px solid #fbacc3;
	background: #fef8f9;
	width: 21%;	
}
.box .woman table td:nth-of-type(1) {
	background: #fef8f9;
}
.box .man table td:nth-of-type(1) {
	background: #f8f8fa;
	border-right: 1px solid #aeb0c6;
}




 /*　each-department
 * --------------------------------- */
 
 
.each-department dl {
	display: table;
	font-size: 92%;
	padding: 13px 0;
	border-bottom: 1px solid #ccc;
	line-height: 1.4;
	width: 100%;
}
.each-department dl:first-child {
	padding: 3px 0 13px;	
}
.each-department dt, .each-department dd {
	display: table-cell;
	vertical-align: top;	
	
}
.each-department dt {
	font-weight: bold;
	padding-right: 5px;
	width: 35%;
}
.each-department span.tit_each-department01 {
	display: block;
	padding-bottom: 3px;
	font-size: 105%;
}
.each-department span.tit_each-department02 {
	color: #fb7b97;
	padding: 0 1.2%;
	font-size: 98%;
}


 /*　attention
 * --------------------------------- */
 
.attention {
	margin: 20px 0 40px;
} 
.attention img {
	padding-bottom: 12px;
	width: 40%;
}
.attention p span {
    display: block;
    font-size: 95%;
    line-height: 1.4;
    padding: 10px 0 0;
}


/*　railway
 * --------------------------------- */
 
.railway p {
	padding-bottom: 20px;
}
.railway span {
	color: #fa1a5a;
}
.railway .attention {
	margin: 10px 0 15px;
}
 

.point {
   margin: -12px 0 30px;
}
.point dd {
    font-size: 92%;
	line-height: 1.35;
	
} 


@media screen and (min-width: 320px) { 	
	.box h3 {
		font-size: 109%;
	}	
}
@media screen and (min-width: 480px) { 	
	.each-department dt {
		width: 32%;
	}	
}
@media screen and (min-width: 720px) { 	
	.each-department dt {
		width: 26%;
	}	
}
@media (min-width: 420px) and (max-width: 780px) {
	.box table th {
    	width: 26%;
	}
	.box table td:nth-of-type(1) {
		width: 18%;
	}
}




 /*********************************************
 * PC
 ******************************************* */


@media screen and (min-width: 780px) {

 
  /*　main-visual
 * --------------------------------- */
 
  
.main-visual {
 	background: url(../../img/img_main_lifestyle.03.png) center top no-repeat; 	
}

.box h5 {
	font-family: 'M+ 1c light';
	font-size: 110%;
}



 /*　box-figure
 * --------------------------------- */


.box-figure dl:nth-of-type(1) dd img {
	width: 60px;	
}
.box-figure dl:nth-of-type(2) dd img {
	width: 53px;
}
.box-figure dl:nth-of-type(3) dd img {
	width: 50px;
}
.box-figure dl:nth-of-type(4) dd img {
	width: 45px;
	padding-bottom: 3px;
}
.box-figure dl:nth-of-type(5) dd img {
	width: 52px;
}
.box-figure dl:nth-of-type(6) dd img {
	width: 53px;
}
.box-figure dl:nth-of-type(7) dd img {
    width: 44px;
}
.box-figure dl {
	margin-bottom: 8px;
	width: 24.1%;
}
.box-figure dt {
	font-size: 105%;
}
.box-figure dl dd:nth-of-type(1) {
    padding: 0;
}




.box .box-01 dl {
	font-size: 88%;
	line-height: 1.6;
	padding-left: 10px;	
}
.box .box-01 dt {
	float: left;
	padding: 0 5px 0 0;
	width: 10%;
}
.box .box-01 dl dd:nth-of-type(1) {
	padding-bottom: 7px;	
}
.box .box-01 dl dd:nth-of-type(2) {
	padding-bottom: 0;	
}
.box .box-01 dl dd {
	line-height: 1.58;
	
}
.box .box-02 dl dd:nth-of-type(2) {
	padding-bottom: 7px;	
}


/*　price-situation
 * --------------------------------- */

.box .price-situation {
	display: table;
}
.box .price-situation dl dt, .box .price-situation dl dd {
	display: table-cell;	
}
.box .price-situation dl dt {
	width: 7.5%;
}
.box .price-situation h3 {
	margin-bottom: 30px;
}
.box .price-situation dl dd:nth-of-type(1) {
	padding-bottom: 15px;
}
.box .price-situation dl {
	padding-right: 7px
}



 /*　table
 * --------------------------------- */
 
 
.box table {
	margin-top: 10px;
}
.box table th {
	width: 14%;
	padding: 11px 6px 11px 10px;
}
.box table td {
	font-size: 94%;
	padding: 11px 8px 11px 11px;
}
.box table td span {
	display: inline;
	padding: 6px 7px 0 15px;
}
.box table td ul {
	padding: 12px 2% 0 1.5%;	
}
.box table td ul li {
	text-indent: -1em;
	padding-bottom: 5px;
}
.box table th span {
	padding-right: 15px;
}
.box .man {
	margin-bottom: 40px;	
}
.box table td:nth-of-type(1) {
	width: 13%;
}



 /*　each-department
 * --------------------------------- */
 
 
.each-department dl {
	display: table;
	font-size: 90%;
	padding: 13px 12px;
	width: 97%;
}
.each-department dl:first-child {
	padding: 3px 12px 13px;	
}
.each-department dt, .each-department dd {
	display: table-cell;
	vertical-align: top;
	
}
.each-department dt {
	width: 15.4%;
}
.each-department span.tit_each-department01 {
	display: inline;
	padding-bottom: 0;
	padding-right: 7px;
}
.each-department span.tit_each-department02 {
	padding: 0 0.5%;
	letter-spacing: -0.2px;
}



 /*　attention
 * --------------------------------- */
 
 .attention {
	margin: 25px 0 30px;
}
 .attention img {
	width: 12%;	
	padding-bottom: 13px;
}
 .attention p span {
	display: block;
	font-size: 92%;
	line-height: 1.3;
	padding: 10px 0;
}

/*　railway
 * --------------------------------- */
 
.railway p {
	padding: 0 10px 30px 10px;
}
 
 
 
.point {
   margin: 0 0 30px;
} 
.point dd {
    font-size: 95%;
} 




}

@media (min-width: 780px) and (max-width: 1089px) {
	.each-department dt {
		width: 19%;
	}	
}
@media (min-width: 780px) and (max-width: 1050px) { 
	.box .price-situation dl dt {
    	width: 8.8%;
	}
	.box .box-01 dt {
		width: 11.2%;
	}
}