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

@media screen and (max-width: 750px) {
	
	
	/*------------------------------
	  MV
	-------------------------------*/
	.mainWrap #titleSec.designMv { background-image: url("/works/design/images/design_title_bg_sp.png"); background-size: cover; }

	.mainWrap #titleSec.designIndexMv > div { width: 85%; padding: 0; }
	.mainWrap #titleSec.designIndexMv > div #mvTxt { position: relative; right: 0; bottom: 20px; width: 100%; }
	.mainWrap #titleSec.designIndexMv > div #mvTxt p { margin-top: 10px; }


	/*------------------------------
	  共通
	-------------------------------*/
	.importantTitle { font-size: 156%; }
	
	.indexItem a .worksImgListTxt { width: 85%; padding: 10px 15px; }
	.indexItem a .worksImgListTxt dl dt { font-size: 100%; }
	.indexItem a .worksImgListTxt dl dd { font-size: 75%; margin-top: 0; }
	
	.indexItem a .worksImgListImg img { height: calc(85vw * 0.499); object-fit: cover; width: 100%; }

	/* リスト */
	ul.worksImgList li a .worksImgListTxt { margin-top: 8px; }
	ul.worksImgList li a .worksImgListTxt dl dt { font-size: 113%; }
	ul.worksImgList li a .worksImgListTxt dl dd { margin-top: 5px; }

	/* ボタン */
	.txtBlueBtn { margin-top: 25px; width: 100%; }

	/* ページネーション */
	.pagination { margin-top: 20px; }
	.pagenationBox > span { font-size: 100%; margin: 0 5px; }

	/*------------------------------
	  index
	-------------------------------*/
	/* 最近の実績 */
	.singleColumn .mainContents .breadcrumbNavi + div { width: 100%; }
	#indexArea #recentInner { margin: 0; }

	#indexArea #recentInner #indexSlider #slick-prev { left: 5%; }
	#indexArea #recentInner #indexSlider #slick-next { right: 5%; }
	#indexArea #recentInner #indexSlider .slick-arrow { top: 40%; }
	#indexArea #recentInner #indexSlider .slick-arrow img { width: 28px; }
	#indexArea #recentInner #indexSlider .slick-dots li span { width: 45px; height: 5px; margin-top: 15px; }
	#indexArea #recentInner #indexSlider .slick-list { height: calc(85vw * 0.499); }

	#indexArea #recentInner ul#recentList { margin-top: 20px; }
	#indexArea #recentInner ul#recentList li { width: 100%; margin: 20px 0 0; }
	#indexArea #recentInner ul#recentList li:first-child a .worksImgListTxt dl dt { font-size: 113%; }
	#indexArea #recentInner ul#recentList li:first-child a .worksImgListTxt dl dd { margin-top: 5px; }
	#indexArea #recentInner ul#recentList li:first-child a { border-radius: 0; }
	#indexArea #recentInner ul#recentList li:first-child a .worksImgListTxt { position: relative; width: 100%; padding: 0; margin-top: 8px; }

	/* カテゴリーリスト */
	#indexArea #recentInner #cateList { margin-top: 40px; }
	#indexArea #recentInner #cateList li { width: 100%; }
	#indexArea #recentInner #cateList li:nth-child(n+2) { margin-top: 30px; }
	#indexArea #recentInner #cateList li .arrowLink { font-size: 112%; margin-top: 25px; }
	#indexArea #recentInner #cateList li .arrowLink img { width: 48px; margin-left: 18px; }

	/* 実績検索 */
	#indexArea #searchInner { margin-top: 40px; padding: 40px 0; }
	#indexArea #searchInner .bgWhite { margin-top: 40px; padding: 20px 18px; }
	#indexArea #searchInner .enTitle + .bgWhite { margin-top: 25px; padding-top: 20px; padding-bottom: 20px; }
	#indexArea #searchInner .bgWhite ul.searchLink { display: block; }
	#indexArea #searchInner .bgWhite ul.searchLink li,
	#indexArea #searchInner .bgWhite ul.searchLink li:nth-child(n+4) { width: 100%; margin: 10px 0 0; font-size: 75%; }
	#indexArea #searchInner .bgWhite ul.searchLink li:first-child { margin-top: 0; }
	#indexArea #searchInner .bgWhite ul.searchLink li a { padding: 10px 15px; }
	#indexArea #searchInner .bgWhite ul.searchLink li a span { background-size: 13px; }
	#indexArea #searchInner .bgWhite h5 { font-size: 125%; }
	#indexArea #searchInner .bgWhite h5 img { width: 35px; }
	#indexArea #searchInner .bgWhite h5 + ul.searchLink { margin-top: 25px; }
	#indexArea #searchInner .bgWhite h4 + ul.searchLink { margin-top: 25px; }

	/*------------------------------
	  建築設計作品集
	-------------------------------*/
	/* 扉ページ */
	#designIndex #indexArea #designMvTxt { position: static; width: 85%; margin: 0 auto; }
	#designIndex #indexArea #designMvTxt h2 { font-size: 150%; margin-top: 35px; }
	#designIndex #indexArea #designMvTxt p { line-height: 2.5; margin-top: 15px; }
	#designIndex .breadcrumbNavi { position: static; }

	#designIndex #pickup01Inner { margin-top: 40px; }

	#designIndex #indexArea #pickup01Inner .indexItem { height: calc(85vw * 0.499); }

	#designIndex #indexArea #pickup02Inner { margin-top: 30px; }
	#designIndex #indexArea #pickup02Inner ul { justify-content: space-between; }
	#designIndex #indexArea #pickup02Inner ul li { width: 49%; height: calc((85vw * 0.49) * 0.7); margin-left: 0; }
	#designIndex #indexArea #pickup02Inner ul a .pickup02Img { height: auto; }

	#designIndex #indexArea #pickup02Inner ul a .pickup02Img img { object-fit: cover; width: 100%; height: calc((85vw * 0.49) * 0.7); object-position: 50% 50%; }
	#designIndex #indexArea #pickup02Inner ul a:hover .pickup02Img img { transform: scale(1); }

	#designIndex #indexArea #pickup02Inner ul li:nth-child(n+3),
	#designIndex #indexArea #pickup02Inner ul li:nth-child(n+4) { margin-top: 7px; }

	#designIndex #indexArea #pickup02Inner ul a .pickup02Info dl dt { font-size: 100%; }
	#designIndex #indexArea #pickup02Inner ul a .pickup02Info dl dd { font-size: 75%; margin-top: 5px; }

	#designIndex #indexArea #searchInner .bgWhite ul.searchLink { display: flex; justify-content: space-between; }
	#designIndex #indexArea #searchInner .bgWhite ul.searchLink li { width: 49%; margin: 0; }
	#designIndex #indexArea #searchInner .bgWhite ul.searchLink li:nth-child(n+3),
	#designIndex #indexArea #searchInner .bgWhite ul.searchLink li:nth-child(n+4) { margin: 10px 0 0; }

	/*------------------------------
	  扉ページ共通
	-------------------------------*/
	#cateTopArea { padding-bottom: 40px; }
	#cateTopArea .contentsOuter { width: 85%; }
	#cateTopArea .importantTitle { margin: 0; }
	#cateTopArea #searchInner { margin: 20px 0 0; }

	#cateTopArea #searchInner #conditionsArea { width: 100%; }
	#cateTopArea #searchInner #conditionsArea.posFixed { width: 85%; }
	#cateTopArea #searchInner #conditionsArea #conditionsChange { font-size: 112%; padding: 15px; }
	#cateTopArea #searchInner #conditionsArea #conditionsChange::before,
	#cateTopArea #searchInner #conditionsArea #conditionsChange::after { right: 15px; width: 15px; }
	#cateTopArea #searchInner #conditionsArea #conditionsSearch { padding: 20px 30px; }
	#cateTopArea #searchInner #conditionsArea #conditionsSearch h4 { font-size: 106%; }
	#cateTopArea #searchInner #conditionsArea #conditionsSearch ul { margin-top: 15px; }
	#cateTopArea #searchInner #conditionsArea #conditionsSearch ul li { width: 100%; font-size: 106%; }
	#cateTopArea #searchInner #conditionsArea #conditionsSearch ul li:nth-child(n+2) { margin-top: 20px; }
	#cateTopArea #searchInner #conditionsArea #conditionsSearch ul li .selectBg { margin-top: 10px; }
	#cateTopArea #searchInner #conditionsArea #conditionsSearch ul li .selectBg::after { width: 8px; height: 8px; right: 15px; }
	#cateTopArea #searchInner #conditionsArea #conditionsSearch ul li .selectBg select { padding: 5px 15px; }
	#cateTopArea #searchInner #conditionsArea #conditionsSearch #conditionsSearchClose { margin-top: 30px; }

	#cateTopArea #resultInner { margin-top: 40px; }
	#cateTopArea #resultInner ul.worksImgList li { width: 100%; margin: 0; }
	#cateTopArea #resultInner ul.worksImgList li,
	#cateTopArea #resultInner ul.worksImgList li:nth-child(n+4) { margin: 0 0 20px; }
	#cateTopArea #resultInner ul.worksImgList li a .worksImgListImg { height: auto; }
	#cateTopArea #resultInner ul.worksImgList li a .worksImgListImg img { max-height: 308px; }
	#cateTopArea #resultInner ul.worksImgList li a .worksImgListTxt { margin-top: 15px; }
	#cateTopArea #resultInner ul.worksImgList li a .worksImgListTxt dl dt { font-size: 118%; }

	#cateTopArea #searchNumInner { margin-top: 90px; display: block; }
	#cateTopArea #searchNumInner p#overTxt { margin: 0; padding-left: 1em; text-indent: -1em; }


	/*------------------------------
	  詳細ページ共通
	-------------------------------*/
	#detailArea { padding-bottom: 40px; }
	#detailArea #detailTitleInner { padding: 10px 0; margin-top: 20px; }
	#detailArea #detailTitleInner h4 { font-size: 106%; }
	#detailArea #detailTitleInner h4 + div { margin-top: 10px; display: block; text-align: center; }
	#detailArea #detailTitleInner h4 + div div { font-size: 75%; }
	#detailArea #detailTitleInner h4 + div ul { font-size: 75%; margin: 5px auto 0; justify-content: center; }
	#detailArea #detailTitleInner h4 + div ul li { margin-left: 5px; }

	#detailArea #detailImgInner #sliderMainOuter { height: calc(100vw * 0.67); overflow: hidden; }
	#detailArea #detailImgInner #sliderMain { width: 72vw; margin: 0 auto; }
	#detailArea #detailImgInner #sliderMain .slick-slide,
	#detailArea #detailImgInner #sliderMain .slick-slide div,
	#detailArea #detailImgInner #sliderMain .slick-slide div div { height: calc(100vw * 0.67); }
	#detailArea #detailImgInner #sliderMain .slick-arrow { width: 28px; background: none; top: 50%; }
	#detailArea #detailImgInner #sliderMain #slick-prev { left: -11vw; }
	#detailArea #detailImgInner #sliderMain #slick-next { right: -11vw; }

	#detailArea #detailImgInner #sliderThumbs { margin: 10px auto 0; width: 85%; }
	#detailArea #detailImgInner #sliderThumbs > div { width: 23vw; height: calc(20vw * 0.77); margin: 0 1vw; }

	#detailArea #detailTxtInner { width: 85%; margin-top: 30px; }

	#detailArea #detailInfoInner { margin-top: 30px; }
	#detailArea #detailInfoInner ul { padding: 25px 30px; display: block; }
	#detailArea #detailInfoInner ul li { display: block; }
	#detailArea #detailInfoInner ul li { margin-top: 12px; }
	#detailArea #detailInfoInner ul li:first-child { margin-top: 0; }
	#detailArea #detailInfoInner ul li:nth-child(2n),
	#detailArea #detailInfoInner ul li:nth-child(2n+1) { width: 100%; padding: 0; }
	#detailArea #detailInfoInner ul li:nth-child(2n+1)::before { display: none; }
	#detailArea #detailInfoInner ul li.listNote { }

	#detailArea #detailInfoInner ul li span { display: block; width: 100%; }
	#detailArea #detailInfoInner ul li sup { top: -0.7em; }

	/* ジャンプページ用 */
	#jumpPageArea { padding: 50px 0; }
	
	/*------------------------------
	  建築設計作品集
	-------------------------------*/

	/* 詳細ページ */
	#designDetail #detailArea.designDetailArea #detailTitleInner { padding: 20px 7.5% 0; }


}