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

@media (max-width: 768px) {
	/* header */
	#GoTop { display: none!important; }
	header, .header { height: 90px; }
	.header h1 {  position: absolute; left: 32px; top: 29px; }
	.header > .inner { width: 100%; }
	.login-wrap, .gnb_links{ display: none; }
    .button-container { display: block; right: 32px; top: 47px; }
	.header h1 a { width: 85px; height: 32px; background-size: 100%; }

	footer .inner > div { flex-direction: column; }
	footer .inner .flex { position: relative; }
	footer .inner .flex div:nth-child(1) { margin-top: 50px; }
	footer .inner > div > div { margin-bottom: 30px; }
	footer .inner div strong { font-size: var(--font-size-b); font-weight: 900; margin-bottom: 0; }
	footer .inner div span { font-size: var(--font-size-l); font-weight: 500; }
	footer .copy-sns { position: absolute; top: 0; }

	/* visual */
	.main-visual .text-wr { width: 84%; top: 70%; }
	.sub-visual .text-wr { width: 84%; top: 80%; }
	.main-visual { width: 100%; height: 100vh; background-position: -100px 0; }
	.main-visual .text-wr h2 { margin-left: 0; line-height: 46px; margin-bottom: 20px; }
	.sub-visual .text-wr h2 { font-size: var(--font-size-title1); }
	.main-visual .text-wr p { margin-left: 0; font-size: var(--font-size-l); line-height: 28px; }
	.sub-visual .text-wr p { font-size: var(--font-size-s); line-height: 32px; }
	.main-visual video { height: auto; left: 0; transform: none; top: 90px; }
	.sub-visual { height: 200px; }
	.desktop-video { display: none; }
	.mobile-video { display: block; }


	/* common */
	section { padding: 50px 0; }
	.inner { width: 84%; }
	.inner.full { width: 100%!important; }
	.inner.full h5 { margin-top: 10px; }
	.inner.full h5, .inner.full span { padding-left: 10px; } 
	.ml10 { margin-left: 10px; }
	.image-container img {width: 100%; height: auto; }
	.section-01 .inner > div { display: flex; flex-direction: column; }
	.section-01 .inner > div > div:nth-child(1) { margin-bottom: 50px; }
	.section-01 .text-01 { font-size: var(--font-size-title2); margin-bottom: 10px; }
	.section-01 .text-02 { font-size: var(--font-size-l); line-height: 24px; }
	.section-02 h3 { font-size: var(--font-size-title1); margin-bottom: 30px; }
	.section-02 h3 span { font-size: var(--font-size-l); }
	.section-02 ul { flex-direction: column; }
	.section-02 ul li { width: 100%; margin-bottom: 10px; padding: 20px 0; }
	.section-03 { margin-bottom: 0; }
	.section-03 h3 { font-size: var(--font-size-title3); line-height: 42px; }
	.section-03 p { font-size: var(--font-size-b); line-height: 27px; }
	.section-03 .thumb { position: relative; width: 100%; right: 0; top: 0; }
	footer .logo { position: relative; }
	footer .inner { padding-bottom: 50px!important; }
	footer .mailto { position: relative; top: 30px; text-align: center; font-size: var(--font-size-b); padding: 5px 30px 10px; }

	.column-4 li { width: 100%; margin-right: 0; margin-top: 5%; }
	.column-4 li:nth-child(1) { margin-top: 0; }
	.column-4 li:nth-child(2), .column-4 li:nth-child(3), .column-4 li:nth-child(4) { margin-top: 10%; }

	.banner { height: 46px; }
	.banner-text { font-size: var(--font-size-l); }
	.banner div span a i { width: 46px; height: 46px; }
	.text-l { font-size: 14px!important; }
	.text-title1 { font-size: 18px!important; }
	.copy-wr { flex-wrap: wrap; }
	.copy { width: 100%; margin-bottom: 20px; }

	.work-menu { display: none!important; }
	.sub-navi { padding: 20px 0; }	
	.m-work-menu { display: block; width: 100%; order: 1px solid #e4e4e4; border-radius: 4px; padding: 0 50px 0 8px; background: #FAF8F4 url(../img/ico_selectarrow.svg) no-repeat center right 10px / 14px auto; font-size: 16px; font-weight: 500;
    color: #4b4b4b; height: 37px; line-height: 37px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; appearance: none; cursor: pointer; }
	.search-wr { padding-top: 0; }
	
	.about p, .about dl, .about ul { margin-bottom: 50px!important; }
	.about h3 { margin-bottom: 20px!important; font-size: 34px; }
	.about h3 span { font-size: 26px; display: inline-block; }
	.about dl dt { font-size: 16px; }
	.about dl dd { font-size: 14px; padding-left: 10px; }
	.about ul { flex-wrap: wrap; }
	.about ul li { width: 160px; height: 160px; margin-bottom: 10px; }
	.about ul li strong { text-align: center; font-size: 14px; }
	.biz-wr { flex-wrap: wrap; }
	.biz-wr .business { width: 100%; }
	.biz-wr .business dl { margin-bottom: 30px!important; }
	.biz-wr div:last-child dl { margin-bottom: 0!important; }
	.biz-wr .business strong { margin-bottom: 10px; }
	.biz-wr .business dd { padding: 0; }

	.map { overflow: hidden; }
	.map > div { margin-bottom: 0!important; }
	.inquiry dl { flex-direction: column; }
	.inquiry dl dt, .inquiry dl dd { width: 100%!important; padding-left: 0!important; }
	.inquiry dl dt { margin-bottom: 5px; }
	.inquiry dl dd { margin-bottom: 10px; }
}