@charset "utf-8";
/*----------------------------
	main visual
-----------------------------*/
.mv {
	position: relative;
	width: 100%;
	aspect-ratio: 750/1170;
}
.mv::before {
	content: "";
	width: 100%;
	aspect-ratio: 750/1170;
	background: url(../images/top/img_mv_sp.jpg) center bottom / 100% no-repeat;
	position: fixed;
	left: 0;
	top: 0;
	display: block;
	z-index: -1;
}
.mv::after {
	content: "";
	width: 100%;
	height: 100%;
	background: rgba(255, 255, 255, .2);
	position: fixed;
	left: 0;
	top: 0;
	z-index: -1;
}
.mv_title_outer {
	font-weight: bold;
	line-height: 1;
	background-color: var(--white);
	position: relative;
	top: 0;
	left: 0;
	padding: 125px 20px 105px;
	box-sizing: border-box;
	width: 100%;
	z-index: 1;
}
.mv_title {
	max-width: max-content;
	margin: auto;
	position: relative;
}
.mv_title::before {
	content: "";
	background: url(../images/common/bg_logo.png) center/100% no-repeat;
	width: 235px;
	height: 234px;
	position: absolute;
	z-index: -1;
	left: -23px;
	top: 57px;
}
.mv_title_text {
	display: block;
	background-color: var(--black);
	color: var(--white);
	letter-spacing: 0.2em;
	padding: 2px 18px;
	box-sizing: border-box;
	margin-bottom: 7px;
	position: relative;
	z-index: 1;
}
.mv_title_name {
	display: block;
	font-size: var(--fs-29);
	text-align: center;
	letter-spacing: 0.06em;
	position: relative;
	z-index: 1;
}
.mv_title_logo {
	margin: auto;
	display: block;
	margin-bottom: 17px;
}
/*----------------------------
	contents
-----------------------------*/
/* concept */
.sec-concept {
	padding-top: 60px;
	padding-bottom: 60px;
}
.sec_text-l {
	font-size: var(--fs-30);
	margin-bottom: 25px;
	font-weight: bold;
	letter-spacing: 0.06em;
	text-align: center;
}
.sec-concept .sec_text {
	text-align: center;
	line-height: 2;
}
.sec-concept .sec_text + .sec_text {
	margin-top: 24px;
}
/* about */
.sec-about {
	padding-top: 76px;
	padding-bottom: 60px;
}
.sec-about .sec_title_outer {
	margin-bottom: 50px;
}
.sec-about .contents_title {
	font-size: var(--fs-18);
	line-height: 1;
	padding-bottom: 15px;
	margin-bottom: 25px;
	border-bottom: 1px solid var(--white);
	display: flex;
	align-items: center;
}
.sec-about .contents_title::before {
	content: "";
	width: 18px;
	height: 1px;
	background-color: var(--white);
	display: block;
	margin-right: 7px;
}
.profile {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}
.img-ceo {
	display: block;
	aspect-ratio: 158/175;
	max-width: 158px;
	margin-bottom: 30px;
}
.img-ceo img,.img-ceo source {
	width: 100%;
	height: auto;
}
.profile_name {
	line-height: 1;
	font-weight: bold;
	margin-left: 18px;
	margin-bottom: 30px;
}
.profile_name em {
	font-size: var(--fs-30);
	letter-spacing: 0.06em;
	display: block;
	margin-bottom: 10px;
}
.profile_name span {
	font-size: var(--fs-14);
}
.sec-about .contents {
	width: 100%;
	font-size: var(--fs-13);
	margin-bottom: 47px;
}
.contents-history .title {
	background-color: var(--white);
	color: var(--black);
	line-height: 1;
	padding: 2px 16px;
	border-radius: .75rem;
	max-width: max-content;
	margin-bottom: 5px;
	font-weight: bold;
}
.contents-history .list {
	margin-bottom: 27px;
}
.list_item {
	padding-left: calc(1em + 5px);
	position: relative;
}
.list_item + .list_item {
	margin-top: 4px;
}
.list_item::before {
	content: "・";
	position: absolute;
	left: 0;
	top: 0;
}
.contents-history .text + .text {
	margin-top: 4px;
}
.contents-message .text + .text {
	margin-top: 16px;
}
.contents_title-company {
	margin-bottom: 14px;
}
.contents-company_name-en {
	font-size: var(--fs-31);
	font-family: var(--aoboshi);
	letter-spacing: 0.06em;
}
.contents-company_name-ja {
	font-size: var(--fs-14);
	font-weight: bold;
	margin-bottom: 24px;
}
.contents_address {
	font-size: var(--fs-14);
	font-weight: bold;
	width: max-content;
	margin-left: auto;
}
.contents_address .text + .text {
	margin-top: 14px;
}
@media screen and (min-width: 961px) {
	.sec-about .contents_title {
		margin-bottom: 48px;
	}
	.profile_name span {
		font-size: var(--fs-20);
	}
}
/* servece/fee */
.sec-service {
	counter-reset: number 0;
}
.sec-service .sec_title_outer {
	margin-bottom: 50px;
}
.sec-service .sec_text {
	font-size: var(--fs-14);
	font-weight: bold;
	margin-bottom: 3px;
}
.sec-service .contents {
	padding: 0 20px;
	box-sizing: border-box;
}
.sec-service .contents + .contents {
	margin-top: 40px;
	border-top: 1px solid var(--gray-2);
	padding-top: 7px;
}
.sec-service .contents_title {
	font-size: var(--fs-25);
	font-weight: bold;
	letter-spacing: 0.06em;
	line-height: 1.2;
	padding-top: 3.875rem;
	position: relative;
	z-index: 1;
}
.sec-service .contents_title::before {
	counter-increment: number 1;
	content: counter(number,decimal-leading-zero) "";
	position: absolute;
	font-family: var(--aoboshi);
	font-size: var(--fs-60);
	font-weight: normal;
	line-height: 1;
	top: 1.5rem;
	left: -20px;
	color: var(--black);
	text-shadow:1px 1px 0 var(--gray-2), -1px -1px 0 var(--gray-2),-1px 1px 0 var(--gray-2), 1px -1px 0 var(--gray-2),0px 1px 0 var(--gray-2),  0-1px 0 var(--gray-2),-1px 0 0 var(--gray-2), 1px 0 0 var(--gray-2);
	z-index: -1;
}
.contents_price {
	display: flex;
	align-items: flex-end;
	margin: 2px 0 22px;
}
.price {
	font-size: var(--fs-13);
	font-weight: bold;
	background-color: var(--white);
	color: var(--black);
	padding: 2px 16px;
	border-radius: 12px;
	margin-right: 6px;
	margin-bottom: .5625rem;
}
.contents_price em {
	font-size: var(--fs-35);
	font-family: var(--aoboshi);
	margin-right: 7px;
	letter-spacing: .05em;
}
.contents_price .bold {
	font-size: var(--fs-18);
	margin-right: 4px;
}
.contents_price .mr-3 {
	font-size: var(--fs-15);
	margin-right: 3px;
	font-weight: normal;
}
.contents_price .tax {
	font-size: var(--fs-14);
	font-weight: normal;
}
.sec-service .contents img {
	width: 100%;
	height: auto;
}
.attention {
	padding-left: 1em;
	position: relative;
	font-size: var(--fs-12);
	margin-top: 25px;
}
.attention + .attention {
	margin-top: 0;
}
.attention::before {
	content: "※";
	position: absolute;
	top: 0;
	left: 0;
}
.link-yellowline {
	color: var(--yellow);
	border-bottom: 1px solid var(--yellow);
	display: inline-block;
	padding-right: .75rem;
	position: relative;
}
.link-yellowline.icon-newtab::after {
	background: var(--yellow);
	position: absolute;
	right: 0;
	top: .4rem;
	width: 10px;
	height: 8px;
}
@media screen and (min-width: 769px){
	.link-yellowline {
		padding-right: 1.125rem;
	}
	.link-yellowline.icon-newtab::after {
		width: 14px;
		height: 11px;
	}
}
/* works */
.sec-works {
	background-color: var(--white);
}
.sec-works .sec_title_outer {
	margin-bottom: 50px;
}
.list-works {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	padding-bottom: 30px;
	margin-bottom: 27px;
	gap: 20px min(5.97%,20px);
	border-bottom: 1px solid var(--gray-2);
}
.list-works_item {
	width: 46.567%;
	cursor: pointer;
}
.list-works_item img {
	aspect-ratio: 156/107;
	object-fit: contain;
	width: 100%;
	height: auto;
}
.sec-works .sec_text {
	font-size: var(--fs-14);
	font-weight: bold;
	text-align: center;
	margin-bottom: 27px;
}
.modal_outer {
	position: relative;
	z-index: 10;
}
.modal {
	opacity: 0;
	visibility: hidden;
	position: fixed;
	width: 100%;
	height: 100vh;
	top: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}
.is-active.modal {
	opacity: 1;
	visibility: visible;
}
.is-active.modal figure {
	max-width: 676px;
	width: 88.533%;
	height: auto;
}
.is-active.modal img {
	width: 100%;
	height: auto;
}
.is-active .bg-modal {
	content: "";
	width: 100%;
	height: 100%;
	background: rgba(34, 34, 34, .8);
	top: 0;
	left: 0;
	position: fixed;
	z-index: -1;
}
.is-active .close {
	width: 50px;
	height: 50px;
	position: fixed;
	top: 0;
	right: 0;
	border: solid 1px var(--white);
	color: var(--white);
	background: var(--black);
	display: flex;
	align-items: center;
	justify-content: center;
}
/* guide */
.sec-guide .sec_title_outer {
	margin-bottom: 33px;
}
.sec-guide .sec_text {
	font-size: var(--fs-18);
	font-weight: bold;
	line-height: 2;
	letter-spacing: 0.06em;
	text-align: center;
	margin-bottom: 15px;
}
.img-qr {
	display: block;
	margin: 0 auto 24px;
}
/* Q&A */
.sec-faq {
	background-color: var(--white);
	padding-left: 0;
	padding-right: 0;
}
.sec-faq .sec_title_outer {
	margin-bottom: 15px;
}
.list-faq {
	font-size: var(--fs-14);
	font-weight: bold;
	counter-reset: number_faq 0;
}
.list-faq_item:nth-child(1) {
	border-top: 1px solid #cbcece;
}
.list-faq_item {
	border-bottom: 1px solid #cbcece;
	counter-increment: number_faq 1;
}
.question {
	cursor: pointer;
}
.answer {
	border-top: 1px solid #cbcece;
	background: var(--gray);
	opacity: 0;
	visibility: hidden;
	height: 0;
	transition: .5s;
}
.is-active + .answer {
	opacity: 1;
	visibility: visible;
	height: auto;
}
.question .inner,
.answer .inner {
	display: flex;
	justify-content: space-between;
	box-sizing: border-box;
	position: relative;
	transition: .5s;
}
.question .inner {
	padding: 16px 59px 13px 21px;
}
.answer .inner {
	padding: 17px 22px 25px 21px;
}
.question .inner::before,
.answer .inner::before {
	color: #cbcece;
	font-family: var(--aoboshi);
	font-size: var(--fs-22);
	font-weight: normal;
	line-height: 1;
}
.answer .inner::before {
	color: #333;
}
.question .inner::before {
    content: "Q."counter(number_faq, decimal-leading-zero);
}
.answer .inner::before {
    content: "A."counter(number_faq, decimal-leading-zero);
}
.question .text,
.answer .text {
	width: calc(100% - (3.4375rem + 21px));
}
.question .text::before,
.question .text::after {
	content: "";
	width: 15px;
	height: 2px;
	border-radius: 2px;
	background: var(--black);
	position: absolute;
	top: 0;
	bottom: 0;
	right: 22px;
	margin: auto;
	transition: .5s;
}
.question .text::before {
	transform: rotate(90deg);
}
.is-active.question .text::before {
	transform: rotate(0deg);
}
.is-active.question .text::after {
	opacity: 0;
}
/* NEWS */
.sec-news {
	background: url(../images/common/bg_logo_repeat.png),var(--gray);
	padding: 80px 0;
}
.list-news {
	margin-bottom: 43px;
}
.list-news_item {
	display: flex;
	justify-content: center;
	align-items: center;
}
.list-news_item + .list-news_item {
	margin-top: 20px;
}
.list-news_item .text_outer {
	width: 82%;
	margin-right: 11px;
}
.list-news .date {
	font-size: var(--fs-13);
	line-height: 1;
	margin-bottom: 5px;
}
.list-news .text {
	font-size: var(--fs-14);
	font-weight: bold;
	line-height: 2;
}
.link-r {
	font-size: var(--fs-12);
	border: solid 1px var(--black);
	line-height: 1.75;
	border-radius: 11px;
	padding: 0 11px;
	box-sizing: border-box;
	display: inline-block;
}
.sec-news .bg-light-black {
	background-color: #444;
}
.news_txt_box{
	transition: background-color .4s;
}
.news_txt_box:hover {
	background-color: #fff;
}
.news_txt_btn{
	transition: background-color .4s, color .4s;
}
.news_list_link {
	padding: 10px 21px;
	display: block;
}
.news_list_link:hover .news_txt_btn {
	background-color: #222;
	color: #fff;
}
.news_list_btn{
	background-color: #222;
	color: #fff;
	transition: background-color .4s;
}
.news_list_btn:hover {
	background-color: #444;
}
/*----------------------------
	media query
-----------------------------*/
@media screen and (min-width: 769px){
	/* mv */
	.mv {
		aspect-ratio: 1920/1080;
	}
	.mv::before {
		background: url(../images/top/img_mv_pc.jpg) center bottom / 100% no-repeat;
		aspect-ratio: 1920/1080;
	}
	.mv_title {
		max-width: none;
		width: 100%;
	}
	.mv_title::before {
		width: 37.553%;
		height: auto;
		aspect-ratio: 706/703;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		margin: auto;
		transform: translate(-25.212%,11.808%);
	}
	.mv_title_outer {
		padding: 18.333% 20px 6.927%;
	}
	.mv_title_logo {
		width: 21.117%;
		min-width: 214px;
		height: auto;
	}
	.mv_title_text {
		font-size: clamp(1rem, 0.415rem + 1.22vw, 1.875rem);
		max-width: max-content;
		margin-left: auto;
		margin-right: auto;
	}
	.mv_title_name {
		font-size: clamp(1.813rem, 0.727rem + 2.26vw, 3.438rem);
	}
	/* concept */
	.sec-concept {
		padding: 120px 20px;
	}
	.sec_text-l {
		font-size: var(--fs-36);
	}
	.sec-concept .sec_text {
		font-size: var(--fs-22);
	}
	/* about */
	.sec-about {
		padding: 160px 20px;
		background: var(--light-black);
	}
	.sec-about {
		padding-top: 76px;
		padding-bottom: 60px;
	}
	.sec-about .contents_title {
		font-size: var(--fs-24);
	}
	.profile {
		display: grid;
		grid-template-columns: 1.5fr 3fr;
	}
	.img-ceo {
		aspect-ratio: 278/396;
		max-width: 278px;
		height: auto;
		grid-column: 1/2;
		grid-row: 1/3;
		margin-bottom: auto;
		margin-right: 32px;
	}
	.profile_name {
		grid-column: 2/3;
		grid-row: 1/2;
		margin-left: 0;
		display: flex;
		align-items: flex-end;
	}
	.profile_name em {
		font-size: var(--fs-40);
		margin-bottom: 0;
		margin-right: 16px;
	}
	.contents-history {
		grid-column: 2/3;
		grid-row: 2/3;
	}
	.contents-history .title {
		font-size: var(--fs-18);
		padding: 2px 20px;
		margin-bottom: 16px;
	}
	.contents-history .list {
		font-size: var(--fs-18);
		margin-bottom: 41px;
	}
	.contents-history .text_outer {
		font-size: var(--fs-18);
	}
	.list_item + .list_item,
	.contents-history .text + .text {
		margin-top: 11px;
	}
	.sec-about .contents {
		font-size: var(--fs-18);
	}
	.contents-message {
		margin-bottom: 0;
		line-height: 1.7;
	}
	.contents-message .text + .text {
		margin-top: 26px;
	}
	.company_outer {
		width: 100%;
	}
	.contents-company {
		display: grid;
		max-width: 1037px;
		width: 84.172%;
		margin: auto;
	}
	.contents-company_name-en {
		font-size: var(--fs-42);
		grid-column: 1/2;
		grid-row: 1/2;
	}
	.contents-company_name-ja {
		font-size: var(--fs-20);
		grid-column: 1/2;
		grid-row: 2/3;
	}
	.contents_address {
		grid-column: 2/3;
		grid-row: 1/3;
		font-size: var(--fs-20);
	}
	.contents_price {
		display: flex;
		align-items: flex-end;
		margin: 40px 0 0px;
	}
	/* service */
	.sec-service {
		padding-top: 132px;
	}
	.sec-service .sec_text {
		font-size: var(--fs-20);
		margin-bottom: 52px;
		padding: 0 10px;
		box-sizing: border-box;
	}
	.sec-service .contents {
		display: flex;
		flex-direction: row-reverse;
		justify-content: flex-end;
		align-items: center;
		padding: 0 10px;
	}
	.sec-service .contents + .contents {
		margin-top: 46px;
		padding-top: 36px;
	}
	.sec-service .contents_title::before {
		font-size: var(--fs-80);
	}
	.contents_text {
		width: calc(100% - 48.376% - 11.85%);
		margin-left: 5%;
	}
	.sec-service .contents figure {
		max-width: 596px;
		width: 48.376%;
		height: auto;
	}
	.attention {
		padding-left: calc(1em + 10px);
		box-sizing: border-box;
	}
	.attention::before {
		left: 10px;
	}
	.attention {
		padding-left: 1.9em;
		position: relative;
		font-size: var(--fs-16);
		margin-top: 0;
	}
	.content_txt_box{
		margin: 60px 0 0;
	}
	/* works */
	.list-works {
		gap: 40px min(3.246%,40px);
		padding-bottom: 60px;
		margin-bottom: 40px;
	}
	.list-works_item {
		width: 22.564%;
	}
	.sec-works .sec_text {
		font-size: var(--fs-20);
	}
	.link-square {
		font-size: var(--fs-18);
	}
	.link_insta {
		transition: background-color .3s;
	}
	.link_insta:hover {
		background-color: #444;
	}
	.link_line {
		transition: background-color .3s;
	}
	.link_line:hover {
		background-color: #F1F1F1;
	}
	/* guide */
	.sec-guide .sec_text_outer {
		display: grid;
	}
	.sec-guide .sec_text {
		grid-column: 1/2;
		grid-row: 1/2;
		font-size: var(--fs-24);
		text-align: left;
		margin-bottom: 48px;
	}
	.sec-guide .img-qr {
		grid-column: 2/3;
		grid-row: 1/3;
		width: 170px;
		height: auto;
	}
	.sec-guide .link-square {
		grid-column: 1/2;
		grid-row: 2/3;
		margin-left: 0;
	}
	/* faq */
	.sec-faq .sec_title_outer {
		margin-bottom: 32px;
		padding-left: 20px;
		box-sizing: border-box;
	}
	.question .inner,
	.answer .inner {
		max-width: 1272px;
		padding: 32px 20px 32px 20px;
		box-sizing: border-box;
	}
	.question .inner::before, .answer .inner::before {
		font-size: var(--fs-30);
	}
	.question .text, .answer .text {
		font-size: var(--fs-20);
		width: calc(100% - (4.6875rem + 31px));
	}
	.question .text::before, .question .text::after {
		width: 20px;
	}
	/* news */
	.sec-news {
		padding: 160px 0;
	}
	.sec-news .sec_title_outer {
		margin-bottom: 32px;
		padding-left: 20px;
		box-sizing: border-box;
	}
	.list-news {
		margin-bottom: 79px;
		justify-content: space-between;
	}
	.news_list_link {
		padding: 33px 21px 24px;
	}
	.list-news_item .text_outer {
		width: calc(100% - 5.8125rem);
	}
	.list-news .date {
		font-size: var(--fs-18);
		margin-bottom: 19px;
	}
	.list-news .text {
		font-size: var(--fs-20);
	}
	.list-news_item + .list-news_item {
		margin-top: 50px;
	}
	.link-r {
		line-height: 1;
		font-size: 1rem;
		padding: 4px 22px;
		border-radius: 1.25rem;
	}
}
@media screen and (min-width: 1025px) {
	/* concept */
	.contents_outer {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.contents_text {
			margin-left: 11.85%;
  }
	.profile_outer {
		width: 56.98%;
		margin-bottom: 100px;
	}
	.message_outer {
		width: 34.415%;
		margin-bottom: 100px;
	}
	.sec-concept .sec_text {
		font-size: var(--fs-28);
	}
	.sec_text-l {
		font-size: var(--fs-47);
	}
	/* about */
	.profile {
		grid-template-columns: 1.5fr 1.9fr;
	}
	/* service */
	.price{
		font-size: var(--fs-18);
    padding: 3px 20px;
    border-radius: 17px;
	}
}

@media screen and (min-width: 1233px) {
	/* faq */
	.sec-faq .sec_title_outer {
		padding-left: 0px;
	}
	/* news */
	.sec-news .sec_title_outer {
		padding-left: 0px;
	}
	.sec-service .contents_title {
		font-size: var(--fs-36);
	}
/* service */
	.contents_price em {
		font-size: 48px;
		margin-right: 7px;
	}
	.contents_price .bold {
		font-size: var(--fs-24);
		margin-right: 4px;
	}
	.contents_price .mr-3 {
		font-size: var(--fs-20);
		margin-right: 3px;
	}
	.contents_price .tax {
		font-size: var(--fs-20);
	}
}