@charset "utf-8";

/* mv */
#mv {
	position: relative;
}

/* news */
#news .ttl .more a {
	display: flex;
	font-weight: bold;
}

/* concept */
#concept {
	position: relative;
}

#concept .img {
	position: absolute;
}

#concept .section-ttl h2 {
	align-items: center;	
}

#concept .section-ttl h2 span {
	display: block;
	font-weight: bold;
}

#concept .txt-box .txt {
	color: #000;
}

/* service */
#service .section-ttl h2 {
	text-align: center;
}

#service .section-ttl h2 img {
	margin: 0 auto;
}

#service .catch {
	text-align: center;
}

#service .link-btn {
	margin: 0 auto;
}

#service .point-box .point .txt-box p {
	color: #000;	
}

#service .schedule h3 {
	text-align: center;
}

#service .schedule .table img {
	margin: 0 auto;
}

/* other */
#other {
	position: relative;
}

#other h2 {
	text-align: center;
}

#other .other-list {
	justify-content: space-between;
	align-items: baseline;
}

#other .other-list h3 {
	text-align: center;
}

#other .other-list .item {
	display: flex;
	justify-content: center;
	flex-direction: column;
}

/* twitter */
#twitter .content {
	justify-content: center;
}

#twitter .r-box {
	display: flex;
	justify-content: center;
	flex-direction: column;
}

#twitter .r-box .comment {
	position: relative;
}

#twitter .r-box .comment img {
	position: absolute;
}

#twitter .r-box .prof .name {
	text-align: center;
}

#twitter .r-box .prof .twt-id {
	align-items: center;
	flex-wrap: wrap;
}

/* contact */
#contact h2 img {
	margin: 0 auto;
}

#contact h3 {
	text-align: center;
}

#contact .contact-box {
	justify-content: center;
}

#contact .contact-box address dl dt {
	font-weight: bold;
}

@media screen and (max-width: 768px) {

	/* mv */
	#mv {
		margin-top: 37px;
	}

	#mv .content:after {
		content: "";
		display: block;
		background: url(../images/top/mv_sp.png) no-repeat right top;
		background-size: contain;
		width: 93.335%;
		height: 83.733vw;
		margin: 24px 0 0 auto;
	}

	#mv .box {
		padding: 0 20px;
	}

	#mv .content {
		flex-direction: column;
	}

	#mv .catch {
		width: 100%;
	}

	#mv .link-btn {
		margin-top: -10px;
	}

	#mv .link-btn a {
		background-position: 86% center;
	}

	/* news */
	#news {
		margin-top: 53px;
	}

	#news .inner {
		padding: 0 20px;
	}

	#news .content {
		flex-direction: column;
	}

	#news .ttl img {
		width: 105px;
	}

	#news .news-list {
		margin-top: 22.5px;
	}

	#news .news-list .news-item:nth-child(n + 2) {
		margin-top: 10px;
	}

	#news .news-list .news-item .news-link {
		flex-direction: column;
		font-size: 1.3rem;
		line-height: 1.61;
	}

	#news .news-list .news-item .news-link .news-date {
		font-weight: bold;
	}

	#news .link-btn {
		margin-top: 20px;
	}

	#news .link-btn a {
		background-position: 75% center;
	}

	/* concept */
	#concept {
		background: url(../images/top/concept_bg_sp.png) no-repeat center top;
		background-size: cover;
		margin-top: 35px;
		padding-top: calc(290 / 750 * 100%); /* 画像の高さ ÷ 画像の幅 × 100% */
	}

	#concept .inner {
		margin-top: -50px;
		padding: 0 20px 7px;
	}

	#concept .content {
		flex-direction: column;
	}

	#concept .content:after {
		content: "";
		display: block;
		background: url(../images/top/concept_smp01_sp.png) no-repeat center bottom;
		background-size: 100% auto;
		width: 63.134328%;
		max-width: 423px;
		height: 83.6vw;
		margin: 28px auto 0;
	}

	#concept .section-ttl h2 {
		flex-direction: column;
	}

	#concept .section-ttl h2 img {
		width: 56.696%;
		max-width: 343px;
	}

	#concept .section-ttl h2 span {
		font-size: 1.4rem;
		line-height: 1.25;
		margin-top: 10px;
	}

	#concept .txt-box h3 {
		font-size: 2.4rem;
		line-height: 1.41;
		text-align: center;
		margin-top: 10px;
		padding: 0 14px;
	}

	#concept .txt-box .txt {
		font-size: 1.4rem;
		letter-spacing: 0.0125em;
		line-height: 1.92;
		margin-top: 15px;
	}

	/* service */
	#service {
		margin-top: 38px;
	}

	#service .inner {
		padding: 0 5%;
	}

	#service .section-ttl h2 img {
		width: 47%;
		max-width: 315px;
	}

	#service .section-ttl h2 .jp {
		display: block;
		font-size: 1.4rem;
		line-height: 1.25;
		margin-top: 10px;
	}

	#service .catch {
		font-size: 2.4rem;
		line-height: 1.41;
		margin-top: 10px;
		padding: 0 10px;
	}

	#service .point-box {
		margin-top: 52px;
	}

	#service .point-box .point {
		flex-direction: column-reverse;
	}

	#service .point-box .point:nth-child(n + 2) {
		margin-top: 32px;
	}

	#service .point-box .point .img {
		width: 71.14%;
		max-width: 480px;
		margin: 9px auto 0;
	}

	#service .point-box .point .txt-box {
		width: 100%;
	}

	#service .point-box .point .txt-box img {
		width: 31%;
		max-width: 163px;
	}

	#service .point-box .point .txt-box h4 {
		font-size: 2rem;
		line-height: 2;
		margin-top: 3px;
	}

	#service .point-box .point .txt-box p {
		font-size: 1.4rem;
		letter-spacing: 0.0125em;
		line-height: 1.92;
		margin-top: 18px;
	}

	#service .link-btn {
		margin-top: 18px;
	}

	#service .link-btn a {
		background-position: 78% center;
	}

	#service .schedule {
		margin-top: 29px;
	}

	#service .schedule h3 {
		font-size: 2.4rem;
		line-height: 1.41;
	}

	#service .schedule .table {
		overflow-x: auto;
		margin-top: 6px;
	}

	#service .schedule .table img {
		display: inline-block;
		width: 175vw;
		max-width: none;
		margin: 0 auto;
	}

	#service .schedule .arw-txt p {
		background: url(../images/common/arrow02.png) no-repeat right center;
		background-size: 12px 10px;
		font-size: 1.2rem;
		font-weight: bold;
		line-height: 2;
		letter-spacing: 0.0625em;
		text-align: center;
		width: 160px;
		margin: 0 auto;
	}

	/* other */
	#other {
		background: url(../images/top/other_bg_sp.png) no-repeat center top;
		background-size: cover;
		margin-top: 27px;
		padding-top: calc(1747 / 750 * 100%); /* 画像の高さ ÷ 画像の幅 × 100% */
	}

	#other .inner {
		padding: 0 5.5%;
		position: absolute;
		top: 48%;
		left: 50%;
		transform: translateY(-50%) translateX(-50%);
		-webkit- transform: translateY(-50%) translateX(-50%);
	}

	#other .content {
		padding-top: 6%;
	}

	#other h2 {
		font-size: 2.4rem;
		line-height: 1.41;
	}

	#other .other-list {
		flex-direction: column;
		margin-top: 30px;
	}

	#other .other-list h3 {
		font-size: 2rem;
		line-height: 1.35;
	}

	#other .other-list .item {
		width: 100%;
		margin: 0 auto;
	}

	#other .other-list .item:nth-child(n + 2) {
		margin-top: 30px;
	}

	#other .other-list .item .txt-box {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 13px;
	}

	#other .other-list .item .txt-box .img {
		width: 50%;
		max-width: 280px;
	}

	#other .other-list .item p {
		font-size: 1.3rem;
		letter-spacing: 0.0125em;
		line-height: 1.69;
		width: 62%;
		margin-left: 21px;
	}

	/* twitter */
	#twitter {
		margin-top: 50px;
	}

	#twitter .l-box {
		padding: 0 5%;
	}

	#twitter .content {
		flex-direction: column;
	}

	#twitter .l-box h2 img {
		width: 52.71%;
		margin: 0 auto;
	}

	#twitter .l-box h3 {
		font-size: 2.4rem;
		line-height: 1.41;
		margin-top: 20px;
		text-align: center;
	}

	#twitter .l-box p {
		font-size: 1.3rem;
		letter-spacing: 0.0125em;
		line-height: 1.76;
		margin-top: 20px;
	}

	#twitter .l-box .link-btn {
		margin-top: 35px;
	}

	#twitter .r-box {
		flex-direction: column;
	}

	#twitter .r-box .comment img {
		position: absolute;
		top: -99px;
		right: -60px;
	}

	#twitter .r-box .prof {
		margin-top: 15px;
	}

	#twitter .r-box .prof > img {
		width: 72.27%;
		margin: 0 0 0 80px;
	}

	#twitter .r-box .prof .name {
		font-size: 1.3rem;
		letter-spacing: 0.0125em;
		line-height: 1.53;
		text-align: left;
		margin-top: 17px;
		padding: 0 15%;
	}

	#twitter .r-box .prof .twt-id {
		padding: 0 15%;
	}

	#twitter .r-box .prof .twt-id p {
		font-size: 1.3rem;
		letter-spacing: 0.0125em;
		margin-right: 7px;
	}

	#twitter .r-box .prof .twt-id img {
		width: 71.66%;
	}

	#twitter .link-btn {
		margin-top: 27px;
	}

	/* contact */
	#contact {
		margin-top: 72px;
		padding: 0 5%;
	}

	#contact h2 img {
		width: 51.56%;
	}

	#contact h3 {
		font-size: 2.4rem;
		line-height: 1.41;
		margin-top: 28px;
		padding: 0 0%;
	}

	#contact .contact-box {
		flex-direction: column;
		margin-top: 24px;
	}

	#contact .contact-box address:nth-child(n + 2) {
		margin-top: 25px;
	}

	#contact .contact-box address dl dt {
		font-size: 2rem;
		letter-spacing: 0.025em;
		line-height: 1.35;
		margin-bottom: 12px;
	}

	#contact .contact-box address dl dd {
		font-size: 1.3rem;
		letter-spacing: 0.0125em;
		line-height: 1.69;
	}
}

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

	/* mv */
	#mv {
		margin-top: 95px;
	}

	#mv:before {
		content: "";
		display: block;
		background: url(../images/top/mv_pc.png) no-repeat right center;
		background-size: cover;
		width: 48.682%;
		height: 49vw;
		position: absolute;
		top: 38%;
		right: 0;
		transform: translateY(-50%) translateX(0);
		-webkit- transform: translateY(-50%) translateX(0);
		z-index: -1;
	}

	#mv .inner {
		max-width: 1280px;
		padding: 0 calc( 70 / 1280 * 100vw);
	}

	#mv .catch {
		width: 55.03777%;
	}

	#mv .link-btn {
		margin-top: 58px;
	}

	/* news */
	#news {
		margin-top: 115px;
	}

	#news .inner {
		max-width: 1280px;
		padding: 0 calc( 70 / 1280 * 100vw);
	}

	#news .ttl {
		width: 11%;
	}

	#news .ttl .more {
		display: flex;
		align-items: center;
		margin-top: 19px;
	}

	#news .ttl .more {
		background: url(../images/common/arrow02.png) no-repeat 91% 4px;
		background-size: 19px auto;
	}

	/* IE11 */
	_:lang(x)::-ms-backdrop,
	#news .ttl .more {
		background-position: 95% 0px;
	}

	#news .ttl .more a {
		font-size: 1.6rem;
		letter-spacing: 0.125em;
		padding: 0 20px 0 0;
	}

	#news .news-list {
		width: 90%;
		margin: -9px 0 0 50px;
	}

	#news .news-list .news-item .news-link {
		font-size: 1.6rem;
		line-height: 2.125;
	}

	#news .news-list .news-item .news-link span {
		width: 100%;
		max-width: 86px;
		margin-right: 18px;
	}

	@-moz-document url-prefix() {
		#news .news-list .news-item .news-link span {
			max-width: 96px;
		}
	}

	/* concept */
	#concept {
		background: url(../images/top/concept_bg_pc.png) no-repeat center top;
		background-size: contain;
		padding-top: calc(966 / 1420 * 100%); /* 画像の高さ ÷ 画像の幅 × 100% */
	}

	#concept .inner {
		width: 100%;
		max-width: 1140px;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translateY(-50%) translateX(-50%);
		-webkit- transform: translateY(-50%) translateX(-50%);
	}

	#concept .content {
		padding-left: 40px;
		position: relative;
	}

	#concept .img {
		width: 30vw;
		max-width: 423px;
	}

	#concept .txt-box {
		width: 55%;
		margin-left: auto;
		top: 50%;
		right: 0;
		-webkit- transform: translateY(10%) translateX(-50%);
		transform: translateY(10%) translateX(0);
	}

	/* IE11 */
	_:lang(x)::-ms-backdrop,
	#concept .txt-box {
		width: 56%;
	}

	#concept .content:before {
		content: "";
		display: block;
		background: url(../images/top/concept_smp01_pc.png) no-repeat center bottom;
		background-size: contain;
		width: 29.789vw;
		max-width: 423px;
		height: 44.155vw;
		margin: auto auto;
		position: absolute;
		top: calc(14vw / 3);
		right: auto;
		bottom: 0;
		left: 0;
	}

	#concept .section-ttl h2 img {
		width: 56.696%;
	}

	#concept .section-ttl h2 span {
		font-size: 1.55vw;
		margin-left: 27px;
	}

	#concept .txt-box h3 {
		font-size: 2.68vw;
		line-height: 1.57;
		margin-top: 30px;
	}

	#concept .txt-box .txt {
		font-size: 1.13vw;
		letter-spacing: 0.025em;
		line-height: 2;
		margin-top: 30px;
	}

	/* service */
	#service {
		margin-top: 38px;
		padding: 0 5%;
	}

	#service .inner {
		max-width: 1024px;
	}

	#service .catch {
		font-size: 3.8rem;
		line-height: 1.42;
		margin-top: 15px;
	}

	#service .point-box {
		margin-top: 52px;
	}

	#service .point-box .point .img {
		width: 100%;
		max-width: 480px;
	}

	#service .point-box .point .txt-box {
		width: 53.125%;
	}

	#service .point-box .point .txt-box h4 {
		font-size: 3.2rem;
		line-height: 1.68;
		margin-top: 15px;
	}

	#service .point-box .point .txt-box p {
		font-size: 1.6rem;
		letter-spacing: 0.025em;
		line-height: 2;
		margin-top: 10px;
	}

	#service .point-box .point01 .txt-box {
		margin-left: 47px;
		padding-top: 73px;
	}

	#service .point-box .point01 .txt-box p {
		padding-right: 14%;
	}

	#service .point-box .point02 {
		flex-direction: row-reverse;
		margin-top: -15%;
	}

	#service .point-box .point02 .txt-box {
		margin: 0 36px 0 69px;
		padding-top: 233px;
	}

	@-moz-document url-prefix() {
		#service .point-box .point02 .txt-box {
			margin: 0 20px 0 69px;
		}
	}

	#service .point-box .point02 .txt-box p {
		max-width: 413px;
	}

	#service .link-btn {
		margin-top: 35px;
	}

	#service .link-btn a {
		background-position: 78% center;
	}

	#service .schedule {
		margin-top: 105px;
	}

	#service .schedule h3 {
		font-size: 3.8rem;
		line-height: 1.42;
	}

	#service .schedule .table {
		margin-top: 13px;
	}

	/* other */
	#other {
		background: url(../images/top/other_bg_pc.png) no-repeat center center;
		background-size: cover;
		margin-top: 52px;
		padding: calc(1014 / 1420 * 100%) 5% 0; /* 画像の高さ ÷ 画像の幅 × 100% */
	}

	#other .inner {
		width: 100%;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translateY(-50%) translateX(-50%);
		-webkit- transform: translateY(-50%) translateX(-50%);
	}

	#other .inner {
		max-width: 1070px;
	}

	#other .content {
		padding-top: 6%;
	}

	#other h2 {
		font-size: 2.68vw;
		line-height: 1.42;
	}

	#other .other-list {
		margin-top: 2.9%;
	}

	#other .other-list h3 {
		font-size: 1.97vw;
		line-height: 1.92;
	}

	#other .other-list .item {
		width: 31.78%;
		max-width: 334px;
	}

	#other .other-list .item .img {
		width: 84%;
		margin: 5.3% auto 0;
	}

	#other .other-list .item p {
		font-size: 1.13vw;
		letter-spacing: 0.025em;
		line-height: 1.62;
		margin-top: 6.5%;
	}

	/* twitter */
	#twitter {
		margin-left: 4.5%;
		padding: 5.9% 5% 0;
	}

	#twitter .l-box h3 {
		font-size: 3.8rem;
		letter-spacing: 0.05em;
		line-height: 1.42;
		margin-top: 46px;
	}

	#twitter .l-box p {
		font-size: 1.6rem;
		letter-spacing: 0.025em;
		line-height: 2;
		margin-top: 33px;
	}

	#twitter .l-box .link-btn {
		margin-top: 35px;
	}

	#twitter .l-box .link-btn a {
		background: url(../images/common/arrow01.png) no-repeat 78% center;
	}

	#twitter .r-box {
		margin-left: 12%;
	}

	#twitter .r-box .comment img {
		position: absolute;
		top: -99px;
		right: -60px;
	}

	#twitter .r-box .prof {
		margin-top: 12px;
	}

	#twitter .r-box .prof .name {
		font-size: 1.6rem;
		letter-spacing: 0.025em;
		line-height: 2;
		margin-top: 17px;
	}

	#twitter .r-box .prof .twt-id p {
		font-size: 1.6rem;
		letter-spacing: 0.025em;
		line-height: 2;
		margin-right: 10px;
	}

	/* contact */
	#contact {
		margin-top:166px;
		padding: 0 5%;
	}

	#contact h3 {
		font-size: 3.8rem;
		letter-spacing: 0.05em;
		line-height: 1.84;
		margin-top: 28px;
	}

	#contact .contact-box {
		margin-top: 54px;
	}

	#contact .contact-box address:nth-child(n + 2) {
		margin-left: 6.5355%;
	}

	#contact .contact-box address dl dt {
		font-size: 2.8rem;
		letter-spacing: 0.05em;
		line-height: 1.92;
		margin-bottom: 12px;
	}

	#contact .contact-box address dl dd {
		font-size: 1.6rem;
		letter-spacing: 0.025em;
		line-height: 1.62;
	}
}

@media screen and (min-width: 769px) and (max-width: 1024px) {

	#service .point-box .point02 .txt-box {
		padding-top: 5%;
	}

	#service .point-box .point02 {
		margin-top: 0;
	}
}

/* 最大font-size */
@media screen and (min-width: 1280px) {

	#concept .section-ttl h2 span {
		font-size: 22px;
	}

	#concept .txt-box h3 {
		font-size: 38px;
	}

	#concept .txt-box .txt {
		font-size: 16px;
	}

	#other h2 {
		font-size: 38px;
	}

	#other .other-list h3 {
		font-size: 28px;
	}

	#other .other-list .item p {
		font-size: 16px;
	}
}

@media screen and (min-width: 414px) and (max-width: 768px) {
	#concept {
		padding-top: calc(1747 / 750 * 100%);
	}

	#concept .inner {
		position: absolute;
		top: 64.5%;
		left: 50%;
		transform: translateY(-50%) translateX(-50%);
		-webkit- transform: translateY(-50%) translateX(-50%);
	}

	#twitter .r-box .prof {
		padding: 0 5%;
	}

	#twitter .r-box .prof > img {
		width: 80%;
		margin: 0 auto 0 20%;
	}

	#twitter .r-box .prof .name {
		width: 38.35%;
		margin: 17px auto 0;
		padding: 0;
	}

	#twitter .r-box .prof .twt-id {
		width: 38.35%;
		margin: 0 auto;
		padding: 0;	
	}
}

@media screen and (min-width: 768px) and (max-width: 1024px) {

	#contact .contact-box {
		align-items: baseline;
		justify-content: center;
		flex-direction: row;
	}

	#contact .contact-box address:nth-child(n + 2) {
		margin-left: 25px;
	}
}

@media screen and (min-width: 769px) and (max-width: 1023px) {

	#news .ttl {
		width: 15%;
	}

	#news .news-list .news-item .news-link {
		flex-direction: row;
	}

	#news .news-list .news-item .news-link span {
		margin-right: 18px;
	}

	#other {
		background: url(../images/top/other_bg_pc.png) no-repeat center center;
		padding-top: calc(1300 / 1420 * 100%);
	}

	#other .inner {
		padding: 0 5%;
	}

	#twitter {
		margin-left: 0;
	}

	#twitter .l-box {
		width: 57%;
	}

	#twitter .r-box {
		margin-left: 4%;
	}
}

@media screen and (min-width: 768px) and (max-width: 1023px) {

	#concept {
		background: url(../images/top/concept_bg_pc.png) no-repeat center top;
		background-size: contain;
		padding-top: calc(966 / 1420 * 100%); /* 画像の高さ ÷ 画像の幅 × 100% */
	}

	#concept .inner {
		width: 100%;
		max-width: 1140px;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translateY(-50%) translateX(-50%);
		-webkit- transform: translateY(-50%) translateX(-50%);
	}

	#concept .content {
		flex-direction: row-reverse;
		padding-left: 40px;
		position: relative;
	}

	#concept .content:after {
		width: 33.134328%;
		height: 60.6vw;
		margin-right: 30px;
	}

	#concept .img {
		width: 30vw;
		max-width: 423px;
	}

	#concept .txt-box {
		width: 65%;
		margin-left: auto;
		top: 50%;
		right: 0;
		-webkit- transform: translateY(36%) translateX(0);
		transform: translateY(36%) translateX(0);
	}

	#concept .content:before {
		top: calc(-21vw / 3);
	}

	#concept .section-ttl h2 img {
		width: 56.696%;
	}

	#concept .section-ttl h2 span {
		font-size: 1.55vw;
		margin-left: 27px;
	}

	#concept .txt-box h3 {
		font-size: 2.68vw;
		line-height: 1.57;
		margin-top: 30px;
	}

	#concept .txt-box .txt {
		font-size: 1.13vw;
		letter-spacing: 0.025em;
		line-height: 2;
		margin-top: 30px;
	}
}

@media screen and (min-width: 769px) and (max-width: 1023px) {

	#concept {
		background: url(../images/top/concept_bg_pc.png) no-repeat center top;
		background-size: cover;
		padding-top: calc(966 / 1420 * 100%); /* 画像の高さ ÷ 画像の幅 × 100% */
	}

	#concept .inner {
		width: 100%;
		max-width: 1140px;
		position: absolute;
		top: 58%;
		left: 50%;
		transform: translateY(-50%) translateX(-50%);
		-webkit- transform: translateY(-50%) translateX(-50%);
	}

	#concept .content {
		padding-left: 40px;
	}

	#concept .content:after {
		width: 33.134328%;
		height: 49.6vw;
		margin-right: 40px;
	}

	#concept .img {
		width: 30vw;
		max-width: 423px;
	}

	#concept .txt-box {
		width: 65%;
		margin-left: auto;
		top: 50%;
		right: 0;
		-webkit- transform: translateY(-5%) translateX(-50%);
		transform: translateY(-5%) translateX(0);
	}

	#concept .section-ttl h2 img {
		width: 56.696%;
	}

	#concept .section-ttl h2 span {
		font-size: 1.55vw;
		margin-left: 27px;
	}

	#concept .txt-box h3 {
		font-size: 2.68vw;
		line-height: 1.57;
		margin-top: 30px;
	}

	#concept .txt-box .txt {
		font-size: 1.13vw;
		letter-spacing: 0.025em;
		line-height: 2;
		margin-top: 30px;
	}
}

@media screen and (min-width: 1024px) and (max-width: 1200px) {

	#concept .content:before {
		width: 33.134328%;
		height: 42.6vw;
		top: calc(23vw / 3);
		right: 540px;
	}

	#concept .txt-box {
		-webkit- transform: translateY(10%) translateX(-5%);
		transform: translateY(10%) translateX(-5%);
	}
}

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

	#concept .content:before {
		top: calc(18vw / 3);
	}

	/* IE11 */
	_:lang(x)::-ms-backdrop,
	#concept .content:before {
		top: calc(18vw / 3);
	}
}