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

.fnormal{
	font-size: 100%;
}
.kadomaru{
	border-radius: 20px;
	background-color: #fff;
	border: solid 1px #999;
}

.kadomaru_2{
	border-radius: 20px 0 0 0;
	background-color: #fff;
	border: solid 1px #999;
}
.kadomaru_3{
	border-radius: 0 20px 0 0;
	background-color: #fff;
	border: solid 1px #999;
}
.border_red{
	font-weight: 600;
	padding: 2px 10px;
	color: #fff;
	background-color: #fa8072;
	text-align: center;
}

.border_blue{
	font-weight: 600;
	background-color: #7b68ee;
	padding: 2px 10px;;
	color: #FFF;
}
/** Front
---------------------------------------------------------------------------------*/
#main-visual {
	position: relative;
	width:100%;
	background-color:#fff;
}
@media screen and (max-width: 639px) {
	#main-visual h2 {
		width: 70%;
		position: absolute;
		top:20%;
		left: 1%;
		z-index: 2;
	}
}
@media screen and (min-width: 640px) {
	#main-visual h2 {
		width: 50%;
		position: absolute;
		top:32%;
		left: 5%;
		z-index: 2;
	}
}

@media screen and (max-width: 639px) {
	section#front-banner { padding-top:50px; padding-bottom:50px; }
	section#front-recommend,section#front-recommend-1 { padding-top:0; padding-bottom:40px; }
	section#front-link { padding-top:0; padding-bottom:20px; }
	section#front-news { padding-top:0; padding-bottom:50px; }
	section#front-comtown { padding-top:40px; padding-bottom:40px; }
	section#front-comtown2 { padding-top:40px; padding-bottom:40px; }
	section#front-group { padding-top:40px; padding-bottom:30px; }
}
@media screen and (min-width: 640px) {
	section#front-banner { padding-top:70px; padding-bottom:70px; }
	section#front-recommend { padding-top:0; padding-bottom:80px; }
	section#front-link { padding-top:0; padding-bottom:80px; }
	section#front-news { padding-top:0; padding-bottom:80px; }
	section#front-comtown { padding-top:0; padding-bottom:0; }
	section#front-comtown2 { padding-top:0; padding-bottom:0; }
	section#front-group { padding-top:80px; padding-bottom:90px; }
}
/*--------------------  front-recommend  --------------------*/
section#front-recommend p.induction {
	color: #0096dc;
	font-weight: 600;
	text-align: center;
}
.recommend-link {
	display: block;
	max-width: 430px;
	margin: 0 auto;
}
.recommend-link,
section#front-recommend .flex-3 {
	position: relative;
}
.recommend-link span,
section#front-recommend .flex-3 span {
	position: absolute;
	z-index: 1;
	display:inline-block;
	line-height:1.2;
	text-align:center;
	color:#0070b8;
	background-color:#fff;
	box-shadow: 0 0 8px gray;
}
.recommend-link .scaling-wrap,
section#front-recommend .scaling-wrap {
	box-shadow: 0 0 8px gray;
	overflow: hidden;
}
@media screen and (max-width: 639px) {
	.recommend-link,
	section#front-recommend .flex-3 {
		display: block;
		margin-bottom: 50px;
	}
	.recommend-link span,
	section#front-recommend .flex-3 span {
		bottom:-20px;
		left:10%;
		width: 80%;	
		font-size: 14px;
		padding:12px 5px;
		border-radius:20px;
		background-image: url( "../img/arrow.png" );
		background-size:7px;
		background-repeat:no-repeat;
		background-position:right 15px center;	
	}
	.recommend-link .scaling-wrap,
	section#front-recommend .scaling-wrap {
		border: 3px solid #fff;
		border-radius:10px;
	}	
	section#front-recommend p.induction {
		font-size: 16px;
		margin-bottom: 20px;
	}
}
@media screen and (min-width: 640px) {
	section#front-recommend {
		max-width: 1400px !important;
	}
	section#front-recommend .flex-3 {
		margin-bottom: 80px;
	}
	.recommend-link span,
	section#front-recommend .flex-3 span {
		bottom:-24px;
		left:10%;
		width: 80%;
		padding:17px 10px;
		border-radius:30px;
	}
	.recommend-link:hover span,
	section#front-recommend a.flex-3:hover span {
		color:#fff;
		background-color:#0070b8;
	}	
	.recommend-link .scaling-wrap,
	section#front-recommend .scaling-wrap {
		border: 4px solid #fff;
		border-radius:20px;
	}	
	section#front-recommend p.induction {
		font-size: 24px;
		margin-bottom: 30px;
	}
}
@media screen and (min-width: 640px) and (max-width: 960px) {
	.recommend-link span,
	section#front-recommend .flex-3 span {
		font-size: 15px;
	}
}
@media screen and (min-width: 961px) and (max-width: 1200px) {
	.recommend-link span,
	section#front-recommend .flex-3 span {
		font-size: 1.5vw;
	}
}
@media screen and (min-width: 1200px) and (max-width: 1280px) {
	.recommend-link span,
	section#front-recommend .flex-3 span {
		font-size: 18px;
	}
}
@media screen and (min-width: 1281px) and (max-width: 1520px) {
	.recommend-link span,
	section#front-recommend .flex-3 span {
		font-size: 1.1vw;
	}
}
@media screen and (min-width: 1521px) {
	.recommend-link span,
	section#front-recommend .flex-3 span {
		font-size: 18px;
	}
}

/** reserve
---------------------------------------------------------------------------------*/
@media screen and (max-width: 639px) {
	section#reserve-01 { padding-top: 40px; padding-bottom:40px; } 
}
@media screen and (min-width: 640px) {
	section#reserve-01 { padding-top: 80px; padding-bottom:80px; } 
}

/** voice
---------------------------------------------------------------------------------*/
@media screen and (max-width: 639px) {
	section#voice-01 { padding-top: 40px; padding-bottom:20px; }
	section#voice-02 { padding-top: 0; padding-bottom:40px; }
	section#voice-03 { padding-top: 0; padding-bottom:40px; }
	section#voice-04 { padding-top: 0; padding-bottom:30px; }
}
@media screen and (min-width: 640px) {
	section#voice-01 { padding-top: 80px; padding-bottom:40px; }
	section#voice-02 { padding-top: 0; padding-bottom:60px; }
	section#voice-03 { padding-top: 0; padding-bottom:100px; }
	section#voice-04 { padding-top: 0; padding-bottom:100px; }
}

/** staff
---------------------------------------------------------------------------------*/
@media screen and (max-width: 639px) {
	section#staff-01 { padding-top: 40px; padding-bottom:20px; }
	section#staff-02 { padding-top: 0; padding-bottom:60px; }
}
@media screen and (min-width: 640px) {
	section#staff-01 { padding-top: 80px; padding-bottom:60px; }
	section#staff-02 { padding-top: 0; padding-bottom:100px; }
}
/*--------------------  staff-01  --------------------*/
section#staff-01 p.note {
	color: #999;
	text-align: right;
	margin-bottom: 5px;
}
.flex-staff div.img-wrap {
	overflow: hidden;
}
.flex-staff p.name {
	font-weight: 600;
	text-align: center;
}
.flex-staff p.job {
	color: #0070b8;
	text-align: center;
}
.flex-store{
	display: flex;
	flex-wrap: wrap;
}

.flex-staff dt, .flex-staff dd {
	font-weight: normal;
	margin:0;
}
.flex-staff dl {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap:         wrap;
	border-top: 1px dotted #666;
}
.flex-staff dl:after {
	content:none;
}
.flex-staff li,
.flex-staff dt,
.flex-staff dd {
	font-size: 14px;
	padding:10px 5px 10px;
	border-bottom: 1px dotted #666;
}

.flex-staff li,
.flex-staff dt,
.flex-staff dd {
	font-size: 14px;
	padding:10px 5px 10px;
	border-bottom: 1px dotted #666;
}
.flex-staff dt {
	width:80px;
}
.flex-store dt {
	width:100px;
}
.flex-staff dd {
	width:calc(100% - 80px)
}
.flex-store dd {
	width:calc(100% - 120px)
}
.flex-staff ul {
	border-top: 1px dotted #666;
}
@media screen and (max-width: 639px) {
	section#staff-01 h3 {
		font-size: 17px;
		margin-bottom: 30px;
	}
	.flex-staff {
		width: 48%;
		margin-bottom: 30px;
	}
	.flex-staff div.img-wrap {
		margin-bottom: 10px;
		border-radius:10px;
		-webkit-border-radius:10px;
		-moz-border-radius:10px;
	}
	.flex-staff p {
		line-height: 1.6;
	}
	.flex-staff p.name {
		font-size: 18px;
		margin-bottom: 5px;
	}
	.flex-staff p.job {
		font-size: 12px;
		margin-bottom: 10px;
	}
	.flex-staff li,
	.flex-staff dt,
	.flex-staff dd {
		font-size: 12px;
		padding:10px 0 10px;
	}
	.flex-staff dt {
		width:60px;
	}
	.flex-staff dd {
		width:calc(100% - 60px)
	}	
	.flex-store dd {
		width:100%;
		font-size: 14px;
	}	
}
@media screen and (min-width: 640px) {
	.flex-staff {
		width: 25%;
	}
	.flex-staff div.img-wrap {
		margin-bottom: 15px;
		border-radius:20px;
		-webkit-border-radius:20px;
		-moz-border-radius:20px;
		margin-bottom: 20px;
	}
	.flex-staff p.name {
		font-size: 24px;
		margin-bottom: 5px;
	}
}
/*--------------------  staff-02  --------------------*/
section#staff-02 h3 {
	width: 100%;
	color: #0096dc;
	background:url(../img/staff/bg_h3_youtube.png) center center no-repeat;
	display: -webkit-box;
	display: flex;
	justify-content: center;
	align-items: center;
}
.youtube {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
	background-color:#000;
}
.youtube iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
@media screen and (max-width: 639px) {
	section#staff-02 h3 {
		min-height: 80px;
		padding-left: 20%;
		padding-right: 20%;
		background-size: 100%;
	}	
}
@media screen and (min-width: 640px) {
	section#staff-02 h3 {
		min-height: 140px;
		letter-spacing: 0.1em;
		background-size: 100%;
	}	
}
@media screen and (min-width: 960px) and (max-width: 1089px) {
	section#staff-02 h3 {
		background-size: 100%;
	}	
}
@media screen and (min-width: 1090px) and (max-width: 1280px) {
	section#staff-02 h3 {
		background-size: 1089px;
	}	
}
@media screen and (min-width: 1281px) and (max-width: 1409px) {
	section#staff-02 h3 {
		background-size: 100%;
	}	
}
@media screen and (min-width: 1410px) {
	section#staff-02 h3 {
		background-size: 1089px;
	}	
}

/** recruit
---------------------------------------------------------------------------------*/
@media screen and (max-width: 639px) {
	section#recruit-menu { padding-top: 40px; padding-bottom:40px; }
}
@media screen and (min-width: 640px) {
	section#recruit-menu { padding-top: 80px; padding-bottom:80px; }
}
/*--------------------  recruit-menu  --------------------*/
section#recruit-menu a {
	display:inline-block;
	color: #0096dc;
	line-height:1.2;
	text-align:center;
	text-decoration:none;
	background-color: #cceaf8;
}
section#recruit-menu p {
	display:inline-block;
	color: #fff;
	line-height:1.2;
	text-align:center;
	background-color: #0096dc;
	margin-bottom: 0;
}
@media screen and (max-width: 639px) {
	section#recruit-menu a,
	section#recruit-menu p {
		width: 49%;
		font-size: 13px;
		padding:8px 0 8px;
		margin-bottom: 10px;
		border-radius:20px;
		-webkit-border-radius:20px;
		-moz-border-radius:20px;
	}
}
@media screen and (min-width: 640px) {
	section#recruit-menu a,
	section#recruit-menu p {
		width: 24%;
		font-size: 16px;
		padding:12px 5px;
		border-radius:30px;
		-webkit-border-radius:30px;
		-moz-border-radius:30px;
	}
	section#recruit-menu a:hover {
		color: #fff;
		background-color: #0096dc;
	}
}
/** recruit - interview
---------------------------------------------------------------------------------*/
@media screen and (max-width: 639px) {
	section#interview-01 { padding-top: 0; padding-bottom:10px; } 
}
@media screen and (min-width: 640px) {
	section#interview-01 { padding-top: 0; padding-bottom:20px; } 
}
/*--------------------  interview-01  --------------------*/
.interview p.catch {
	color: #0096dc;
}
.interview h4 {
	line-height: 1.5;
	border-bottom: 2px solid #0070b8;
}
.interview h4 span {
	color: #0096dc;
}
.interview h5 {
	font-weight: 600;
}
.interview li {
	font-size: 14px;
	padding:10px 5px 10px;
	border-bottom: 1px dotted #666;
}
@media screen and (max-width: 639px) {
	.interview {
		padding-bottom: 40px;
	}
	.interview p.catch {
		font-size: 16px;
		line-height: 1.5;
		padding: 5px 10px;
		margin-bottom: 20px;
	}
	.interview h4 {
		font-size: 20px;
		padding-bottom: 5px;
		margin-bottom: 5px;
	}
	.interview h4 span {
		font-size: 13px;
		margin-left: 20px;
	}
	.interview h5 {
		font-size: 15px;
	}
}
@media screen and (min-width: 640px) {
	.interview {
		padding-bottom: 30px;
	}
	.interview p.catch {
		font-size: 24px;
		padding: 7px 20px;
		margin-bottom: 40px;
	}
	.interview .flex {
		margin-bottom: 40px;
	}
	.interview .flex-sp {
		margin-bottom: 30px;
	}
	.interview h4 {
		font-size: 32px;
		padding-bottom: 7px;
		margin-bottom: 5px;
	}
	.interview h4 span {
		font-size: 14px;
		margin-left: 30px;
	}
	.interview h5 {
		font-size: 18px;
	}	
}

/** recruit（準備中）
---------------------------------------------------------------------------------*/
@media screen and (max-width: 639px) {
	section#recruit-01 { padding-top: 0; padding-bottom:60px; }
}
@media screen and (min-width: 640px) {
	section#recruit-01 { padding-top: 0; padding-bottom:100px; }
}

/** renovation
---------------------------------------------------------------------------------*/
@media screen and (max-width: 639px) {
	section.renovation-detail { padding-top: 40px; padding-bottom:30px; }
	section.renovation-gallery { padding-top: 0; padding-bottom:40px; }
}
@media screen and (min-width: 640px) {
	section.renovation-detail { padding-top: 80px; padding-bottom:60px; }
	section.renovation-gallery { padding-top: 0; padding-bottom:90px; }
}
/*--------------------  renovation-detail  --------------------*/
section.renovation-detail p.catch {
	color: #0096dc;
	font-weight: 600;
}
section.renovation-detail h4 {
	display:inline-block;
	color: #fff;
	font-weight: 600;
	line-height: 1.2;
	background-color: #0096dc;
}
section.renovation-detail ul {
	border-top: 1px dotted #666;
}
section.renovation-detail li {
	background:url(../img/renovation/ico_finger.png) left center no-repeat;
	border-bottom: 1px dotted #666;
}
@media screen and (max-width: 639px) {
	section.renovation-detail p.catch {
		font-size: 18px;
		line-height: 1.5;
		padding: 5px 10px;
		margin-bottom: 20px;
	}
	section.renovation-detail img {
		margin-bottom: 30px;
	}
	section.renovation-detail h4 {
		font-size: 14px;
		padding: 3px 15px 4px;
		margin-bottom: 20px;
		border-radius:16px;
		-webkit-border-radius:16px;
		-moz-border-radius:16px;
	}
	section.renovation-detail li {
		font-size: 14px;
		padding: 10px 5px 10px 30px;
		background-size: 20px;
	}	
}
@media screen and (min-width: 640px) {
	section.renovation-detail p.catch {
		font-size: 22px;
		text-align: center;
		padding: 7px;
		margin-bottom: 40px;
	}
	section.renovation-detail img {
		margin-bottom: 50px;
	}
	section.renovation-detail h4 {
		font-size: 16px;
		padding: 3px 20px 5px;
		margin-bottom: 20px;
		border-radius:20px;
		-webkit-border-radius:20px;
		-moz-border-radius:20px;
	}
	section.renovation-detail li {
		font-size: 15px;
		padding: 15px 5px 15px 40px;
		background-size: 26px;
	}	
}
/*--------------------  renovation-gallery  --------------------*/
section.renovation-gallery p {
	text-align: center;
}
@media screen and (min-width: 640px) {
	section.renovation-gallery .flex-sp {
		margin-top: 40px;
	}
}

/** news-index
---------------------------------------------------------------------------------*/
@media screen and (max-width: 639px) {
	section#news-list { padding-top: 40px; padding-bottom:40px; }
}
@media screen and (min-width: 640px) {
	section#news-list { padding-top: 80px; padding-bottom:80px; }
}
/** news-single
---------------------------------------------------------------------------------*/
@media screen and (max-width: 639px) {
	section#news { padding-top: 40px; padding-bottom:40px; }
}
@media screen and (min-width: 640px) {
	section#news { padding-top: 80px; padding-bottom:70px; }
}
/*--------------------  news  --------------------*/
section#news .content-title h2 {
	font-weight: 600;
	line-height: 1.25;
	background:url(../img/line_double.png) left bottom repeat-x;
}
@media screen and (max-width: 639px) {
	section#news .content-title h2 {
		font-size: 18px;
		padding-bottom: 15px;
		margin-bottom: 20px;
	}
}
@media screen and (min-width: 640px) {
	section#news .content-title h2 {
		font-size: 24px;
		padding-bottom: 15px;
		margin-bottom: 25px;
	}
}

/** contact
---------------------------------------------------------------------------------*/
@media screen and (max-width: 639px) {
	section#contact-form { padding-top: 40px; padding-bottom:40px; }
}
@media screen and (min-width: 640px) {
	section#contact-form { padding-top: 80px; padding-bottom:80px; }
}
section#contact-form p {
	margin-bottom: 30px;
}
@media screen and (min-width: 640px) {
	section#contact-form .dl-horizon dd {
		padding:15px 10px 15px 20px;
	}
}

/** privacy
---------------------------------------------------------------------------------*/
@media screen and (max-width: 639px) {
	section#privacy-policy { padding-top: 40px; padding-bottom:30px; }
}
@media screen and (min-width: 640px) {
	section#privacy-policy { padding-top: 80px; padding-bottom:50px; }
}
section#privacy-policy h4 {
	color: #0070b8;
	font-weight: 600;
	text-align: left;
}
@media screen and (max-width: 639px) {
	section#privacy-policy h4 {
		font-size: 16px;
		padding-top: 5px;
		margin-bottom: 20px;
	}
	section#privacy-policy p,
	section#privacy-policy ol {
		margin-bottom: 20px;
	}
}
@media screen and (min-width: 640px) {
	section#privacy-policy h4 {
		font-size: 16px;
		padding-top: 10px;
		margin-bottom: 25px;
	}
	section#privacy-policy p,
	section#privacy-policy ol {
		margin-bottom: 25px;
	}
}

/** sitemap
---------------------------------------------------------------------------------*/
@media screen and (max-width: 639px) {
	section#site-map { padding-top: 40px; padding-bottom:20px; }
}
@media screen and (min-width: 640px) {
	section#site-map { padding-top: 80px; padding-bottom:40px; }
}

#site-map .f-nav p.ttl {
	color: #0070b8;
	font-size: 16px;
	font-weight: 600;
	border-bottom: 1px solid #999;
}
#site-map .f-nav li {
	background:url(../img/arrow.png) left center no-repeat;
	background-size:6px;	
}
#site-map .f-nav a {
	color: #333;
	text-decoration: none;
}
@media screen and (max-width: 639px) {
	#site-map .f-nav p.ttl {
		padding-bottom: 12px;
		margin-bottom: 12px;
	}
	#site-map .f-nav ul {
		margin-bottom: 30px;
	}
	#site-map .f-nav li {
		padding: 6px 0 6px 15px;
	}
}
@media screen and (min-width: 640px) {
	#site-map .f-nav {
		width: 42%;
		margin-right: 8%;
	}
	#site-map .f-nav p.ttl {
		padding-bottom: 16px;
		margin-bottom: 16px;
	}
	#site-map .f-nav ul {
		margin-bottom: 40px;
	}
	#site-map .f-nav li {
		padding: 7px 0 7px 15px;
	}
	#site-map .f-nav a:hover {
		color: #0070b8;
		text-decoration:underline;
	}
}

/** company 会社概要 
---------------------------------------------------------------------------------*/
section#company1 .name {
	text-align: right;
}
section#company1 .name span {
	font-size: 14px;
	margin-right: 1em;
}
section#company2 .tell span {
/*	background: url(../img/ico_free.png) no-repeat left center;
	background-size: 1.8em;
	padding-left: 2.2em; */
	color: #0096dc;
	font-weight: bold;
}
section#company2 .flex-img {
	position: relative;
}
section#company2 .flex-img .note {
	position: absolute;
	width: 70%;
	left: 0;
	right: 0;
	bottom: -1.3em;
	background-color: #fff;
	border-radius: 2em;
	box-shadow: 5px 5px 5px rgba(100, 100, 100, 0.4) ;
	text-align: center;
	font-weight: bold;
	padding: 0.6em 0;
	margin: auto;
}

@media screen and (max-width: 639px) {
	section#company1 { padding-top:40px; padding-bottom:40px; }
	section#company2 { padding-bottom:30px; }
	section#company3 { padding-bottom:20px; }
	section#company4 { padding-bottom:30px; }
	section#company1 .intoro {
		margin-bottom: 20px;
	}
	section#company1 .flex-txt {
		margin-bottom: 20px;
	}
	section#company1 .flex-img {
		margin-bottom: 5px;
	}
	section#company1 .name {
		font-size: 20px;
	}
	section#company2 .flex-txt,
	section#company2 .flex-img {
		margin-bottom: 20px;
	}
	section#company2 h4 {
		font-size: 20px;
	}
	section#company2 .tell span {
		font-size: 24px;
	}
	section#company2 .map,
	section#company2 .googlemap {
		margin-bottom: 40px;
	}
	section#company2 .flex:last-of-type .flex-img {
		margin-bottom: 40px;
	}
	section#company2 .flex:last-of-type .flex-img .note {
		font-size: 16px;
	}
}
@media screen and (min-width: 640px) {
	section#company1 { padding-top:60px; padding-bottom:60px; }
	section#company2 { padding-bottom:40px; }
	section#company3 { padding-bottom:30px; }
	section#company4 { padding-bottom:30px; }
	section#company1 .intoro {
		margin-bottom: 40px;
	}
	section#company1 .flex-txt,
	section#company1 .flex-img {
		width: 48%;
		margin-bottom: 40px;
	}
	section#company1 .name {
		font-size: 24px;
	}
	section#company2 .flex-txt,
	section#company2 .flex-img {
		width: 48%;
		margin-bottom: 60px;
	}
	section#company2 h4 {
		font-size: 20px;
	}
	section#company2 .tell span {
		font-size: 24px;
	}
	section#company2 .map,
	section#company2 .googlemap {
		margin-bottom: 60px;
	}
	section#company2 .flex-img .note {
		font-size: 18px;
	}
}
/** comtown ミユキCOMタウン 
---------------------------------------------------------------------------------*/
section#comtown1 h3 {
	position: relative;
	color: #0096dc;
	background: url(../img/comtown/bg_town.png) center bottom no-repeat;
	letter-spacing: 0.2em;
	padding: 2.5em 0;
}
section#comtown1 h3::before {
	content: "";
	display: block;
	position: absolute;
	background: url(../img/comtown/title_go.png) center no-repeat;
	background-size: contain;
	width: 3.5em;
	height: 50%;
	top: 0%;
	right: calc(50% + 3em);
}
section#comtown1 .intoro {
	text-align: center;
}
section#comtown2 .flex-item {
	position: relative;
	background-color: #f0fcff;
}
section#comtown2 .flex-item::before {
	content: "1";
	display: block;
	color: #fff;
	text-align: center;
	position: absolute;
	background-color: #0096dc;
	padding: calc(5% - 0.5em) 5%;
	top: 0;
	left: 0;
}
section#comtown2 .flex-item:nth-of-type(2)::before {
	content: "2";
}
section#comtown2 .box-blue {
	border: 10px solid #0096dc;
}
section#comtown2 .box-blue h4 {
	color: #e60012;
	font-weight: bold;
}
section#comtown2 .box-blue .list-radius li::after {
	background-color: #0096dc;
	width: 0.5em;
	height: 0.5em;
	top: 0.75em;
}
section#comtown3 .flex {
	border-bottom: 1px solid #0070b8;
}
section#comtown3 .flex-txt .name {
	color: #0070b8;
	font-weight: bold;
}
section#comtown3 .flex-txt .bg-blue {
	background-color: #f0fcff;
	padding: 15px;
}
section#comtown3 .flex-txt .bg-blue dl {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap:         wrap;
	-webkit-box-align: start;
	align-items: flex-start;
}
section#comtown3 .flex-txt .bg-blue dl:after {
	content:none;
}
section#comtown3 .flex-txt .bg-blue dl dt,
section#comtown3 .flex-txt .bg-blue dl dd {
	margin:0;
	font-weight: normal;
	line-height: 1.4;
	padding-bottom: 1px;
	margin-bottom: 5px;
}
section#comtown3 .flex-txt .bg-blue dl dt {
	color: #fff;
	font-size: 13px;
	background-color: #0096dc;
	text-align: center;
	width:5.5em;
}
section#comtown3 .flex-txt .bg-blue dl dd {
	padding-left: 1em;
	width:calc(100% - 5.5em);
}
section#comtown3 .flex-txt .bg-blue .map {
	display: inline-block;
	background-color: #0070b8;
	border: 1px solid #0070b8;
	text-align: center;
	line-height: 1.1;
	border-radius: 20px;
	padding: 0 10px 3px;
	margin-left: 1em;
}
section#comtown3 .flex-txt .bg-blue .map a {
	color: #fff;
	width: 100%;
	text-decoration: none;
	font-size: 12px;
}
section#comtown3 .flex-img {
	position: relative;
}
section#comtown3 .catgory {
	display: inline-block;
	position: absolute;
	top: 0;
	left: 0;
	line-height: 1.5;
	padding:0px 15px;
	text-align: center;
	font-size: 12px;
	color: #fff;
}
section#comtown3 .cat-life {
	background-color: #e65082;
}
section#comtown3 .cat-health {
	background-color:  #22ac38;
}
section#comtown3 .cat-gourmet {
	background-color:#eb6100;
}
section#comtown3 .cat-beauty {
	background-color:#00ff00;
}
@media screen and (max-width: 639px) {
	section#comtown1 { padding-top:0px; padding-bottom:60px; }
	section#comtown2 { padding-bottom:50px; }
	section#comtown3 { padding-bottom:40px; }
	section#comtown1 h3 {
		font-size: 22px;
		background-size: 150%;
	}
	section#comtown1 .intoro {
		font-size: 15px;
		text-align: left;
		margin-bottom: 40px;
	}
	section#comtown2 .flex-item {
		padding: 15px;
		margin-bottom: 40px;
	}
	section#comtown2 .flex-item::before {
		font-size: 28px;
	}
	section#comtown2 .flex-item img {
		margin-bottom: 10px;
	}
	section#comtown2 .flex-item p {
		font-size: 13px;
		line-height: 1.5;
	}
	section#comtown2 .box-blue {
		padding: 20px 15px 15px;
		border: 6px solid #0096dc;
	}
	section#comtown2 .box-blue h4 {
		font-size: 18px;
		margin-bottom: 10px;
	}
	section#comtown3 .flex {
		padding-bottom: 24px;
		margin-bottom: 24px;
		border-bottom: 1px solid #0070b8;
	}
	section#comtown3 .flex-txt .bg-blue dl dt,
	section#comtown3 .flex-txt .bg-blue dl dd {
		margin-bottom: 10px;
	}
	section#comtown3 .flex-txt .bg-blue dl dt {
		font-size: 12px;
	}
	section#comtown3 .flex-txt .bg-blue .map {
		margin-left: auto;
		width: 100px;
		display: block;
	}
	section#comtown3 .flex-txt {
		padding-bottom: 0;
	}
	section#comtown3 .flex-txt .name {
		font-size: 18px;
		line-height: 1.5;
		margin-top: 10px;
		margin-bottom: 15px;
	}
	section#comtown3 .catgory {
		padding:0px 15px;
		font-size: 14px;
	}	
}
@media screen and (min-width: 640px) {
	section#comtown1 { padding-top:0px; padding-bottom:100px; }
	section#comtown2 { padding-bottom:80px; }
	section#comtown3 { padding-bottom:50px; }
	section#comtown1 h3 {
		font-size: 40px;
	}
	section#comtown1 .intoro {
		font-size: 18px;
		margin-bottom: 60px;
	}
	section#comtown2 .flex-item {
		width: 48%;
		padding: 20px;
		margin-bottom: 40px;
	}
	section#comtown2 .flex-item::before {
		font-size: 36px;
	}
	section#comtown2 .flex-item img {
		margin-bottom: 10px;
	}
	section#comtown2 .box-blue {
		padding: 30px;
	}
	section#comtown2 .box-blue h4 {
		font-size: 20px;
		margin-bottom: 20px;
	}
	section#comtown3 .flex {
		padding-bottom: 40px;
		margin-bottom: 40px;
	}
	section#comtown3 .flex-img {
		width: 25%;
	}
	section#comtown3 .flex-txt {
		width: 70%;
	}
	section#comtown3 .flex-txt .name {
		font-size: 20px;
	}
	section#comtown3 .flex-txt .bg-blue .map:hover {
		background-color: #fff;
	}
	section#comtown3 .flex-txt .bg-blue .map:hover a {
		color: #0070b8;
	}
}
/** renovation お部屋を覗いてみよう！ 
---------------------------------------------------------------------------------*/
section#renovation-intoro h3::before {
	content: "";
	display: inline-block;
	width: 2.5em;
	height: 2.5em;
	margin-bottom: -0.8em;
	margin-right: 0.5em;
	background: url(../img/renovation/ico_door.png) center no-repeat;
	background-size: contain;
}
section#renovation-intoro h3 span {
	display: inline-block;
	margin-top: 20px;
	color: #0096dc;
	background: url(../img/bg_dot.gif) ;
}
section#renovation3 .flex-item .family,
section#renovation3 .flex-item .single {
	padding: 15px 0 15px 90px;
	background: url(../img/renovation/ico_family.png) left center no-repeat;
	background-size: 70px;
	color: #0096dc;
	font-weight: bold;
}
section#renovation3 .flex-item .family {
	background-image: url(../img/renovation/ico_family.png);
}
section#renovation3 .flex-item .single {
	background-image: url(../img/renovation/ico_single.png);
}
section#renovation3 .flex-item {
	position: relative;
}
section#renovation3 .flex-item .note {
	position: absolute;
	width: 70%;
	left: 0;
	right: 0;
	bottom: -1.3em;
	background-color: #fff;
	border-radius: 2em;
	box-shadow: 5px 5px 5px rgba(100, 100, 100, 0.4) ;
	color: #0070b8;
	text-align: center;
	font-weight: bold;
	padding: 0.6em 0;
	margin: auto;

	background-image: url( "../img/arrow.png" );
	background-size:8px;
	background-repeat:no-repeat;
	background-position:right 20px center;
}
section#renovation4 ul li {
	position: relative;
	padding: 1em 10px 1em 5em;
	margin-bottom: 10px;
	background-color: #f0fcff;
}
section#renovation4 ul li::before {
	content: "1";
	position: absolute;
	left: 0;
	top: 0;
	display: inline-block;
	width: calc(2.5em);
	height: calc(100% - 10px);
	padding: calc((1em / 1.5) * 0.5625 ) 0 0;
	color: #fff;
	font-size: 1.5em;
	text-align: center;
	background-color: #0096dc;
/*	line-height: 1.75; */
	line-height: 1.5;
}
section#renovation4 ul li:nth-of-type(2)::before {
	content: "2";
}
section#renovation4 ul li:nth-of-type(3)::before {
	content: "3";
}
@media screen and (max-width: 639px) {
	section#renovation-intoro { padding-top:40px; padding-bottom:10px; }
	section#renovation1 { padding-bottom:40px; }
	section#renovation2 { padding-bottom:40px; }
	section#renovation3 { padding-bottom:20px; }
	section#renovation4 { padding-bottom:40px; }
	section#renovation1 h3,
	section#renovation2 h3,
	section#renovation3 h3,
	section#renovation4 h3 {
		margin-bottom: 50px;
	}
	section#renovation-intoro h3 span {
		font-size: 16px;
		padding: 5px 5px;
	}
	section#renovation3 .intoro {
		margin-bottom: 20px;
	}
	section#renovation3 .flex-item {
		margin-bottom: 60px;
	}
	section#renovation3 .flex-item .family,
	section#renovation3 .flex-item .single {
		font-size: 16px;
		line-height: 1.5;
		padding: 5px 0 5px 70px;
		background-size: 60px;
	}
	section#renovation3 .flex-item .note {
		font-size: 16px;
		background-size:7px;
		background-position:right 12px center;	
	}
	section#renovation4 ul li {
		font-size: 15px;
		padding-left: 5em;
	}
}
@media screen and (min-width: 640px) {
	section#renovation-intoro { padding-top:60px; padding-bottom:30px; }
	section#renovation1 { padding-bottom:80px; }
	section#renovation2 { padding-bottom:70px; }
	section#renovation3 { padding-bottom:100px; }
	section#renovation4 { padding-bottom:80px; }
	section#renovation1 h3,
	section#renovation2 h3,
	section#renovation3 h3,
	section#renovation4 h3 {
		margin-bottom: 80px;
	}
	section#renovation-intoro h3 {
		font-size: 30px;
		letter-spacing: 5px;
	}
	section#renovation-intoro h3 span {
		font-size: 24px;
		padding: 5px 20px;
	}
	section#renovation3 .intoro {
		margin-bottom: 60px;
		text-align: center;
	}
	section#renovation3 .flex-item {
		width: 48%;
	}
	section#renovation3 .flex-item .family,
	section#renovation3 .flex-item .single {
		font-size: 16px;
	}
	section#renovation3 .flex-item .note {
		font-size: 18px;
	}
	section#renovation4 ul li {
		font-size: 17px;
	}
	section#renovation3 .flex-item .note:hover {
		color: #fff;
		background-color: #0070b8;
		background-image: url( "../img/arrow_w.png" );
	}	
}

/*タブ切り替え全体のスタイル*/
.tabs {
  margin-top: 50px;
  padding-bottom: 40px;
  background-color: #fff;
	border: solid 1px #999;
  width: 100%;
  margin: 0 auto;}

/*タブのスタイル*/
.tab_item {
  width: calc(100%/2);
  height: 50px;
  border-bottom: 3px solid #5ab4bd;
  background-color: #d9d9d9;
  line-height: 50px;
  font-size: 16px;
  text-align: center;
  color: #565656;
  display: block;
  float: left;
  text-align: center;
  font-weight: bold;
  transition: all 0.2s ease;
}
.tab_item:hover {
  opacity: 0.75;
}

/*ラジオボタンを全て消す*/
input[name="tab_item"] {
  display: none;
}

/*タブ切り替えの中身のスタイル*/
.tab_content {
  display: none;
  padding: 20px 10px 0;
  clear: both;
  overflow: hidden;
}


/*選択されているタブのコンテンツのみを表示*/
#all:checked ~ #all_content,
#programming:checked ~ #programming_content,
#design:checked ~ #design_content {
  display: block;
}

/*選択されているタブのスタイルを変える*/
.tabs input:checked + .tab_item {
  background-color: #5ab4bd;
  color: #fff;
}

@media screen and (max-width: 639px) {
	.tab_item{
		font-size: 13px;
	}
	table.none{
		font-size: 13px;
	}
}