@charset "UTF-8";
@media only screen and (min-width: 768px) {
	.sp {
		display: none !important;
	}
}

@media only screen and (max-width: 767px) {
	.pc {
		display: none !important;
	}
}

#concept{
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	font-family: "Hiragino Sans", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", 游ゴシック体, 'Yu Gothic', YuGothic, メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
	text-align: center;
}

/*--------------------
  main-ttl
 --------------------*/
@media only screen and (max-width: 767px) {
	.main-ttl {
		margin-top: 54px;
		padding-top: 133vw;
		background: url(/yokohama/artgrace_yokohama/concept/yokohama_concept_mv-img_sp.jpg) no-repeat 0 0/100% auto;
	}
}

@media only screen and (min-width: 768px) {
	.main-ttl {
		padding-top: 57vw;
		background: url(/yokohama/artgrace_yokohama/concept/yokohama_concept_mv-img_pc.jpg) no-repeat 0 0/100% auto;
	}
}

.ttl-area {
	padding: 28px 20px 35px;
}

.ttl-area .lead {
	padding-bottom: 0;
	text-align: left;
	line-height: 1.5;
}

/*--------------------
  article
 --------------------*/
.module-concept_description {
	overflow: hidden;
	padding-bottom: 60px;
}

@media only screen and (max-width: 767px) {
	.module-concept_description figure {
		padding: 0 20px 25px;
		position: relative;
	}
	.module-concept_description figure:after {
		content: "";
		position: absolute;
		display: block;
		width: 100%;
		height: 100%;
		bottom: 0;
	}
	.module-concept_description.story01 figure:after {
		background: url(/yokohama/artgrace_yokohama/concept/yokohama_concept_ttl-text01.png) no-repeat right 22px bottom 3px/235px auto;
	}
	.module-concept_description.story02 figure:after {
		background: url(/yokohama/artgrace_yokohama/concept/yokohama_concept_ttl-text02.png) no-repeat right 22px bottom 3px/138px auto;
	}
	.module-concept_description.story03 figure:after {
		background: url(/yokohama/artgrace_yokohama/concept/yokohama_concept_ttl-text03.png) no-repeat right 22px bottom 3px/170px auto;
	}
	.module-concept_description.story04 figure:after {
		background: url(/yokohama/artgrace_yokohama/concept/yokohama_concept_ttl-text04.png) no-repeat right 22px bottom 3px/266px auto;
	}
	.module-concept_description.story05 figure:after {
		background: url(/yokohama/artgrace_yokohama/concept/yokohama_concept_ttl-text05.png) no-repeat right 22px bottom 3px/200px auto;
	}
	.module-concept_description.story06 figure:after {
		background: url(/yokohama/artgrace_yokohama/concept/yokohama_concept_ttl-text06.png) no-repeat right 22px bottom 3px/215px auto;
	}
	.module-concept_description.story07 figure:after {
		background: url(/yokohama/artgrace_yokohama/concept/yokohama_concept_ttl-text07.png) no-repeat right 22px bottom 3px/257px auto;
	}
	.module-concept_description.story08 figure:after {
		background: url(/yokohama/artgrace_yokohama/concept/yokohama_concept_ttl-text08.png) no-repeat right 22px bottom 3px/200px auto;
	}
}

.module-concept_description h3 {
	padding: 6px 0;
	height: 50px;
}

.module-concept_description h3:before, .module-concept_description h3:after {
	content: '';
	display: inline-block;
	width: 30px;
	height: 50px;
}

.module-concept_description h3:before {
	background: url(/yokohama/artgrace_yokohama/concept/yokohama_concept_h3_ttl-l.png) no-repeat 50% 50%/auto 50px;
}

.module-concept_description h3:after {
	background: url(/yokohama/artgrace_yokohama/concept/yokohama_concept_h3_ttl-r.png) no-repeat 50% 50%/auto 50px;
}

.module-concept_description h3 span {
	display: inline-block;
	font-size: 18px;
	font-size: 1.5rem;
	line-height: 1.3;
}

.module-concept_description h3 span.line1 {
	vertical-align: 80%;
}

.module-concept_description h3 span.line2 {
	vertical-align: 22%;
}

.module-concept_description p {
	margin-top: 20px;
	padding: 0;
	color: #555;
	font-size: 14px;
	font-size: 1.16667rem;
	line-height: 1.5;
}

.module-concept_description a {
	margin: 50px auto 0;
	position: relative;
	display: block;
	padding: 15px 0;
	width: calc( 100% - 40px);
	border: 1px dashed #aaa;
	z-index: 10;
}

.module-concept_description a:hover {
	text-decoration: none;
}

.module-concept_description a:before {
	content: "";
	position: absolute;
	width: 60px;
	height: 33px;
	background: url(/yokohama/artgrace_yokohama/concept/yokohama_concept_button_check.png) no-repeat 50% 50%/60px auto;
	top: -38%;
	right: 13%;
}

.module-concept_description a span {
	font-size: 14px;
	font-size: 1.16667rem;
	background: linear-gradient(transparent 80%, #ffe3e8 80%);
	color: #555;
}

.module-concept_last-image {
	width: 100%;
	margin: 0;
	padding: 0;
}

/*--------------------
  info-area
 --------------------*/
.info-area {
	background-color: #f3fcff;
	padding: 70px 25px;
}

.info-area h2 {
	font-family: 'Big Caslon', serif;
	font-size: 22px;
	font-size: 1.83333rem;
	color: #4799d3;
	letter-spacing: 2px;
	margin-bottom: 25px;
}

.info-area .nav-area {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

.info-area .nav-area li {
	width: 49%;
}

.info-area .nav-area li:first-child {
	width: 100%;
	margin-bottom: 2%;
}

.info-area .nav-area li .copy {
	font-size: 12px;
	font-size: 1rem;
	padding-bottom: 2px;
}

.info-area .nav-area li a {
	display: block;
	position: relative;
	padding: 15px 0;
	text-align: center;
	font-size: 14px;
	font-size: 1.16667rem;
}

.info-area .nav-area li a:after {
	content: '';
	display: inline-block;
	margin: -6px 0 0 20px;
	width: 0;
	height: 0;
	border-top: 5px solid transparent;
	border-right: 5px solid transparent;
	border-bottom: 5px solid transparent;
}

.info-area .nav-area li a.button01 {
	background: linear-gradient(#5ba2d4 100%, #4799d3 0%);
	border: 1px solid #4799d3;
	color: #fff;
}

.info-area .nav-area li a.button01:after {
	border-left: 5px solid #fff;
}

.info-area .nav-area li a.button02 {
	background-color: #fff;
	border: 1px solid #aaaaaa;
	color: #555555;
}

.info-area .nav-area li a.button02:after {
	border-left: 5px solid #555555;
}

/*---------------------------------------
---------------------------------------
TB
---------------------------------------
---------------------------------------*/
@media only screen and (min-width: 768px) {
	.main-ttl {
		position: relative;
	}
	.ttl-area {
		position: absolute;
		padding: 0;
		top: 62%;
		right: 0;
	}
	.ttl-area .lead {
		padding: 20px 40px;
		position: relative;
		background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.8) 20%, rgba(255, 255, 255, 0.8) 85%, transparent);
	}
	.ttl-area .lead:before, .ttl-area .lead:after {
		content: '';
		position: absolute;
		left: 0;
		right: 0;
		width: 100%;
		height: 2px;
		margin: 0 auto;
		text-align: center;
		background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.6) 20%, white 40%, white 60%, rgba(255, 255, 255, 0.6) 80%, transparent);
	}
	.ttl-area .lead:before {
		top: 0;
	}
	.ttl-area .lead:after {
		bottom: 2px;
	}
	.bg01 {
		background: url(/yokohama/artgrace_yokohama/concept/yokohama_concept_bg01.png) 100% 0 repeat;
		background-size: 100% auto;
		margin: 0 auto;
		padding: 0;
	}
	.bg10 {
		background: url(/yokohama/artgrace_yokohama/concept/yokohama_concept_bg02.png) 100% 0 repeat;
		background-size: 100% auto;
		margin: 0 auto;
		padding: 0;
		z-index: 200;
		height: auto;
	}
	.content-area .bg_big02 {
		padding-top: 44vw;
		background: url(/yokohama/artgrace_yokohama/concept/yokohama_concept_img02_00.png) no-repeat 0 0/100% auto;
	}
	.content-area .bg_big03 {
		padding-top: 44vw;
		background: url(/yokohama/artgrace_yokohama/concept/yokohama_concept_img03_00.png) no-repeat 0 0/100% auto;
	}
	.content-area .bg_big05 {
		padding-top: 44vw;
		background: url(/yokohama/artgrace_yokohama/concept/yokohama_concept_img05_00.png) no-repeat 0 0/100% auto;
	}
	.content-area .bg_big07 {
		padding-top: 44vw;
		background: url(/yokohama/artgrace_yokohama/concept/yokohama_concept_img07_00.png) no-repeat 0 0/100% auto;
	}
	.content-area .module-concept_description {
		width: 94%;
		margin: 0 auto;
		display: flex;
		position: relative;
	}
	.content-area .module-concept_description figure {
		width: 42%;
	}
	.content-area .module-concept_description:before, .content-area .module-concept_description:after {
		content: "";
		position: absolute;
		display: block;
		width: 100%;
		height: 100%;
	}
	.content-area .module-concept_description .elm-description {
		width: 50%;
	}
	.content-area .module-concept_description.story01 {
		padding: 60px 0 120px;
	}
	.content-area .module-concept_description.story01 .elm-description {
		margin-top: 75px;
	}
	.content-area .module-concept_description.story01:after {
		background: url(/yokohama/artgrace_yokohama/concept/yokohama_concept_ttl-text01.png) no-repeat right 60px bottom 140px/200px auto;
	}
	.content-area .module-concept_description.story02 {
		padding: 60px 0 140px 0;
		flex-direction: column;
	}
	.content-area .module-concept_description.story02 figure {
		margin-left: 58%;
	}
	.content-area .module-concept_description.story02 .elm-description {
		margin: 150px 0 0 50%;
	}
	.content-area .module-concept_description.story02:before {
		background: url(/yokohama/artgrace_yokohama/concept/yokohama_concept_img02_02.png) no-repeat left 20px top 35%/50.4% auto;
		z-index: 0;
	}
	.content-area .module-concept_description.story02:after {
		background: url(/yokohama/artgrace_yokohama/concept/yokohama_concept_ttl-text02.png) no-repeat right 20px top 46%/140px auto;
	}
	.content-area .module-concept_description.story03 .elm-description {
		margin: 40px auto 120px;
	}
	.content-area .module-concept_description.story03:after {
		background: url(/yokohama/artgrace_yokohama/concept/yokohama_concept_ttl-text03.png) no-repeat right 30% top 80%/140px auto;
	}
	.content-area .module-concept_description.story04 {
		padding: 0 0 120px;
		flex-direction: row-reverse;
	}
	.content-area .module-concept_description.story04 figure {
		padding-top: 120px;
	}
	.content-area .module-concept_description.story04 .elm-description {
		margin: 380px 10px 0 0;
	}
	.content-area .module-concept_description.story04:before {
		background: url(/yokohama/artgrace_yokohama/concept/yokohama_concept_img04_02.png) no-repeat left 30px top 0/50.4% auto;
		z-index: 0;
	}
	.content-area .module-concept_description.story04:after {
		background: url(/yokohama/artgrace_yokohama/concept/yokohama_concept_ttl-text04.png) no-repeat left 40% top 91%/200px auto;
	}
	.content-area .module-concept_description.story05 {
		padding: 30px 0 120px;
	}
	.content-area .module-concept_description.story05 .elm-description {
		margin: 120px 0 0 10px;
	}
	.content-area .module-concept_description.story05:after {
		background: url(/yokohama/artgrace_yokohama/concept/yokohama_concept_ttl-text05.png) no-repeat right 10% top 8%/200px auto;
	}
	.content-area .module-concept_description.story06 {
		padding: 0 0 120px;
		flex-direction: column;
	}
	.content-area .module-concept_description.story06 figure {
		margin-left: 58%;
	}
	.content-area .module-concept_description.story06 .elm-description {
		margin: 90px 0 0 52%;
	}
	.content-area .module-concept_description.story06:before {
		background: url(/yokohama/artgrace_yokohama/concept/yokohama_concept_img06_02.png) no-repeat left 30px top 200px/50.4% auto;
		z-index: 0;
	}
	.content-area .module-concept_description.story06:after {
		background: url(/yokohama/artgrace_yokohama/concept/yokohama_concept_ttl-text06.png) no-repeat right 0 top 45%/200px auto;
	}
	.content-area .module-concept_description.story07 {
		padding: 60px 0 120px;
	}
	.content-area .module-concept_description.story07 .elm-description {
		margin-top: 75px;
	}
	.content-area .module-concept_description.story07:after {
		background: url(/yokohama/artgrace_yokohama/concept/yokohama_concept_ttl-text07.png) no-repeat right 60px bottom 140px/200px auto;
	}
	.content-area .module-concept_description.story08 {
		padding: 0 0 120px;
	}
	.content-area .module-concept_description.story08 figure {
		margin: 180px 0 0 20px;
	}
	.content-area .module-concept_description.story08 .elm-description {
		margin: 400px 0 0 20px;
	}
	.content-area .module-concept_description.story08:before {
		background: url(/yokohama/artgrace_yokohama/concept/yokohama_concept_img08_02.png) no-repeat right 0 top 0/50.4% auto;
		z-index: 0;
	}
	.content-area .module-concept_description.story08:after {
		background: url(/yokohama/artgrace_yokohama/concept/yokohama_concept_ttl-text08.png) no-repeat right 10px bottom 380px/180px auto;
	}
	.content-area .module-concept_description h3 {
		padding: 0;
		height: 70px;
	}
	.content-area .module-concept_description h3:before, .content-area .module-concept_description h3:after {
		width: 40px;
		height: 70px;
		background-size: auto 70px;
	}
	.content-area .module-concept_description h3 span {
		font-size: 19px;
		font-size: 1.58333rem;
		line-height: 1.5;
	}
	.content-area .module-concept_description h3 span.line1 {
		vertical-align: 100%;
	}
	.content-area .module-concept_description h3 span.line2 {
		vertical-align: 40%;
	}
	.content-area .module-concept_description p {
		margin-top: 20px;
		line-height: 1.5;
	}
	.content-area .module-concept_description a {
		width: 80%;
	}
	/*--------------------
    info-area
   --------------------*/
	.info-area {
		padding: 60px 25px;
	}
	.info-area h2 {
		font-size: 32px;
		font-size: 2.66667rem;
		letter-spacing: 2px;
		margin-bottom: 40px;
	}
	.info-area .nav-area {
		display: flex;
		flex-wrap: nowrap;
		flex-direction: row-reverse;
	}
	.info-area .nav-area li {
		width: 32%;
	}
	.info-area .nav-area li:first-child {
		width: 32%;
		margin-bottom: 0;
	}
}

/*---------------------------------------
  ---------------------------------------
  PC
  ---------------------------------------
  ---------------------------------------*/
@media screen and (min-width: 1090px) {
	.ttl-area {
		top: 62%;
		right: 8%;
	}
	.ttl-area .lead {
		font-size: 20px;
		font-size: 1.66667rem;
		padding: 30px 60px;
	}
	.content-area .module-concept_description {
		max-width: 1190px;
		width: 100%;
	}
	.content-area .module-concept_description .elm-description {
		width: 42%;
	}
	.content-area .module-concept_description.story01 {
		padding: 60px 0 120px;
	}
	.content-area .module-concept_description.story01 .elm-description {
		margin-top: 150px;
	}
	.content-area .module-concept_description.story01:after {
		background-position: right 130px bottom 220px;
		background-size: 300px auto;
	}
	.content-area .module-concept_description.story02 .elm-description {
		margin: 150px 0 0 55%;
	}
	.content-area .module-concept_description.story02:before {
		background-position: left 20px top 35%;
	}
	.content-area .module-concept_description.story02:after {
		background-position: right 60px top 52%;
		background-size: 180px auto;
	}
	.content-area .module-concept_description.story03 .elm-description {
		margin: 80px auto 190px;
	}
	.content-area .module-concept_description.story03:after {
		background-position: right 30% top 80%;
		background-size: 200px auto;
	}
	.content-area .module-concept_description.story04 {
		padding: 0 0 205px;
	}
	.content-area .module-concept_description.story04 figure {
		padding-top: 200px;
	}
	.content-area .module-concept_description.story04 .elm-description {
		margin: 650px 50px 0 0;
	}
	.content-area .module-concept_description.story04:after {
		background-position: left 35% bottom 100px;
		background-size: 320px auto;
	}
	.content-area .module-concept_description.story05 {
		padding: 60px 0 120px;
	}
	.content-area .module-concept_description.story05 .elm-description {
		margin: 325px 0 0 10px;
	}
	.content-area .module-concept_description.story05:after {
		background-position: right 20% top 220px;
		background-size: 270px auto;
	}
	.content-area .module-concept_description.story06 {
		padding: 0 0 120px;
	}
	.content-area .module-concept_description.story06 .elm-description {
		margin: 120px 0 0 10px;
	}
	.content-area .module-concept_description.story06 figure {
		margin-left: 58%;
	}
	.content-area .module-concept_description.story06 .elm-description {
		margin: 150px 0 0 60%;
	}
	.content-area .module-concept_description.story06:before {
		background-position: left 30px top 300px;
	}
	.content-area .module-concept_description.story06:after {
		background-position: right 0 top 55%;
		background-size: 250px auto;
	}
	.content-area .module-concept_description.story07 {
		padding: 60px 0 120px;
	}
	.content-area .module-concept_description.story07 .elm-description {
		margin-top: 150px;
	}
	.content-area .module-concept_description.story07:after {
		background-position: right 130px bottom 220px;
		background-size: 300px auto;
	}
	.content-area .module-concept_description.story08 {
		padding: 0 0 120px;
	}
	.content-area .module-concept_description.story08 figure {
		margin: 250px 0 0 30px;
	}
	.content-area .module-concept_description.story08 .elm-description {
		margin: 680px 0 0 40px;
	}
	.content-area .module-concept_description.story08:before {
		background-position: right 0 top 0;
		background-size: 50.4% auto;
	}
	.content-area .module-concept_description.story08:after {
		background-position: right 110px bottom 420px;
		background-size: 220px auto;
	}
	.content-area .module-concept_description h3 {
		height: 90px;
		letter-spacing: 3px;
	}
	.content-area .module-concept_description h3:before, .content-area .module-concept_description h3:after {
		width: 50px;
		height: 90px;
		background-size: auto 90px;
	}
	.content-area .module-concept_description h3 span {
		font-size: 22px;
		font-size: 1.83333rem;
	}
	.content-area .module-concept_description h3 span.line1 {
		vertical-align: 120%;
	}
	.content-area .module-concept_description h3 span.line2 {
		vertical-align: 55%;
	}
	.content-area .module-concept_description p {
		font-size: 16px;
		font-size: 1.33333rem;
		margin-top: 30px;
	}
	.content-area .module-concept_description span {
		font-size: 16px;
		font-size: 1.33333rem;
	}
	/*--------------------
    info-area
   --------------------*/
	.info-area .nav-area {
		width: 100%;
		max-width: 845px;
		margin: 0 auto;
	}
	.info-area .nav-area li .copy {
		font-size: 14px;
		font-size: 1.16667rem;
		padding-bottom: 5px;
	}
	.info-area .nav-area li a {
		padding: 20px 0;
		font-size: 16px;
		font-size: 1.33333rem;
	}
	.info-area .nav-area li a:after {
		content: '';
		display: inline-block;
		margin: -6px 0 0 20px;
		width: 0;
		height: 0;
		border-top: 5px solid transparent;
		border-right: 5px solid transparent;
		border-bottom: 5px solid transparent;
	}
	.info-area .nav-area li a.button01 {
		background: linear-gradient(#5ba2d4 100%, #4799d3 0%);
		border: 1px solid #4799d3;
		color: #fff;
	}
	.info-area .nav-area li a.button01:after {
		border-left: 5px solid #fff;
	}
	.info-area .nav-area li a.button02 {
		background-color: #fff;
		border: 1px solid #aaaaaa;
		color: #555555;
	}
	.info-area .nav-area li a.button02:after {
		border-left: 5px solid #555555;
	}
}