@charset "utf-8";

/*------------------------------------------------------

	グローバル

------------------------------------------------------*/

body { min-width: 0px;}

.ta_right-s_center { text-align: center;}
.ta_left-s_center { text-align: center;}

/* ボックス */

.float_l, .float_r { float: none;}

.hidden_l { display: block !important;}
.hidden_s { display: none !important;}

/* margin */
.mb40-20-0 { margin-bottom: 20px !important;}
/*スマホのみ0px*/
@media screen and (max-width: 414px) {
	.mb40-20-0 { margin-bottom: 0 !important;}
}
.mb40-20 { margin-bottom: 20px !important;}
.mb60-30 { margin-bottom: 30px !important;}
.mb80-40 { margin-bottom: 40px !important;}
.mb120-80 { margin-bottom: 80px !important;}

/* ------------------------
	ヘッダー
------------------------ */

.header .box01 .float_l { max-width: 100%; padding-top: 5px;}
.header .box01 .float_r { float: right;}
.header .box01 .float_r li {
	float: none;
	display: inline-block;
	vertical-align: middle;
	max-width: 24%;
}
.header .box01 .float_r .header_tel { width: 60%; max-width: 100%;}

.header .box02 .pos_ab { position: static;}


/* スマホボタン */
.side-menu-btn {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 45px;
	height: 43px;
	cursor: pointer;
	z-index: 4;
}
.ellipsis-v {
	position: relative;
	cursor: pointer;
	width: 23px;
	height: 18px;
	top: 50%;
	left: 50%;
	margin: -11px -9px;
}
.ellipsis-v .point {
	position: absolute;
	top: 50%;
	left: 0;
	display: block;
	width: 100%;
	height: 3px;
	margin: auto;
	background: #fff;
	-webkit-transition: all .3s;
	transition: all .3s;
}
.ellipsis-v .point.top { margin-top: -7px;}
.ellipsis-v .point.bot { margin-top: 7px;}
.side-menu-btn:hover .top {
	-webkit-transform: translateY(-2px);
	-ms-transform: translateY(-2px);
	transform: translateY(-2px);
}
.side-menu-btn:hover .bot {
	-webkit-transform: translateY(2px);
	-ms-transform: translateY(2px);
	transform: translateY(2px);
}
.side-open .side-menu-btn:hover .top,
.side-open .top {
	top: 50%;
	margin-top: 0px !important;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}
.side-open .mid { opacity: 0;}
.side-open .side-menu-btn:hover .bot,
.side-open .bot {
	top: 50%;
	margin-top: 0px !important;
	-webkit-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

.side-open .side-menu-btn:hover .bot,
.side-open .side-menu-btn:hover .top { background: #ccc;}

/* ------------------------
	グローバルナビ
------------------------ */
#slide_menu {
    position: fixed;
    top: 0;
    left: 0px;
    width: 260px;
    height: 100%;
	padding: 50px 15px;
    background: #333;
	z-index: 1;
	overflow-y: scroll;
}
.slide_menu_nav a {
	display: inline-block;
	text-decoration: none;
	color: #fff;
	padding: 5px 0px;
}
.slide_menu_nav li ul li:before {
	content: "└ ";
	color: #fff;
}

.side-open #slide_menu {
	left: 0;
	visibility: visible;
	z-index: 5;
}

/* サイドオープン時にメインコンテンツを覆う部分 */
.overlay {
  content: '';
  visibility: hidden;
  position: fixed;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0);
  -webkit-transition: all .5s ease;
  transition: all .5s ease;
  z-index: 3;
}
.overlay::after {
  content: "";
  visibility: hidden;
  position: fixed;
  top: 40%;
  left: 0;
  display: block;
  width: 100%;
  height: 50px;
  color: rgba(255,255,255,0);
  font-size: 40px;
  font-weight: bold;
  text-align: center;
  -webkit-transition: all .5s ease;
  transition: all .5s ease;
}
.side-open .overlay {
  visibility: visible;
  cursor: pointer;
  background: rgba(0,0,0,.2);
}
.side-open .overlay::after {
  visibility: visible;
  color: rgba(255,255,255,.8);
}

#wrapper { position: relative; z-index: 2; background-color: #fff; height: auto;}
@-moz-document url-prefix() {
	#wrapper {
		margin-top: -20px;
	}
}

/* サイドメニューオープン */
.side-open #wrapper,
.side-open .overlay {
	-webkit-transform: translate3d(260px, 0, 0);
	transform: translate3d(260px, 0, 0);
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -o-transition: 0.3s;
    -ms-transition: 0.3s;
    transition: 0.3s;
}

#searchform2 { position: relative;}
#keywords2  {
    width: 100%;
    height: 30px;
    background-color: #f5f5f5;
	border-radius: 3px;
    border: none;
    padding: 5px 40px 5px 10px;
}
#searchbtn2 {
    position: absolute;
    top: 5px;
    right: 7px;
}

.slide_menu_sns li { margin: auto 5px;}

.slide_menu_sns img {
	vertical-align: middle;
}


/* ------------------------
	フッター
------------------------ */

.footer .box02 { padding: 30px 0px 60px 30px;}
.footer .box03 { padding-top: 30px;}

.footer_nav { margin-right: 25px !important;}

.footer .pos_ab { left: 230px;}

@media only screen and (max-width: 640px) {
	.footer .box_wrap, .footer .box { display: block; width: 100% !important;}
	.footer .container { padding: 0px;}
	.footer .box01 { padding: 15px;}
	.footer .box02 { padding: 30px 20px 20px;}
	.footer .box03 { max-width: 100%; padding-top: 0px;}
	#searchform3 { max-width: 250px; margin: auto auto 15px;}
	.footer .pos_ab { position: static; padding-bottom: 10px;}
}

/*------------------------------------------------------

	トップページ

------------------------------------------------------*/

/* スライダー */
.slider_wrap figcaption {
	font-size: 0.9em;
	padding: 10px;
	-webkit-text-size-adjust: 100%;
}

.top_left, .top_right { width: 100%;}

/* sec01 */
.top_sec01 article {
	max-width: 600px;
	margin: auto auto 30px !important;
}
.top_sec01 article .float_l { width: 100%; max-width: 400px; margin: auto;}
.top_sec01 article .float_r { width: 100%; padding-left: 0px;}

/* sec02 */
.top_sec02 section { max-width: 470px; margin: auto;}
.top_sec02 .pos_ab { background-size: 11% auto;}
.top_sec02 .pos_ab span span {
	padding: 15px 17% 15px 15px;
	font-size: 1.05em;
}

/* sec03 */
.top_box { margin: 0px -14px;}
.top_box .top_sec03, .top_box .top_bnr02 {
	float: left;
	padding: 0px 14px;
}
.top_box .top_sec03 { width: 75%;}

.top_sec03 article figure { width: 47%; overflow: hidden;}
.top_sec03 article p { width: 40%;}

/* bnr02 */
.top_box .top_bnr02 { width: 25%; min-width: 150px; margin: auto;}
.top_box .top_bnr02 li {
	display: inline-block;
	vertical-align: middle;
	margin: auto 3px;
}
@media only screen and (max-width: 640px) {
	.top_box .top_sec03, .top_box .top_bnr02 { float: none; width: 100%;}
}

/* instagram */
#sb_instagram #sbi_images { margin: 0px auto;}
#sb_instagram.sbi_col_6 #sbi_images .sbi_item {
	width: 33.3333%;
	padding: 0px 8px !important;
}


/*------------------------------------------------------

	下層ページ

------------------------------------------------------*/

/* ------------------------
	共通
------------------------ */

/* ページタイトル */
.pagettl {
	font-size: 2.2em;
	padding: 20px 15px 15px;
}

/* 下層共通 */
@media only screen and (max-width: 720px) {
	.under_footer h2 {
		display: block;
		background-color: #ffcc00;
		font-size: 1.2em;
		font-weight: bold;
		line-height: 1.1;
		padding: 7px;
		margin-bottom: 10px;
	}
	.under_footer ul { padding: 0px 10px;}
	.under_footer .dis_inline-block { margin: auto 3px 10px;}
	.under_footer .dis_inline-block:first-Child { display: none;}
}

.last_mb { margin-bottom: 40px;}


/* ------------------------
	ABOUT
------------------------ */

.about_sec { margin-bottom: 60px;}
.about_pagettl { padding-top: 40px;}

@media only screen and (max-width: 640px) {
	.about_sec li {
		float: none;
		width: 100%;
	}
}
.about_sec .about_sec__outline-container {
	flex-flow: column;
	text-align: center;
}
.about_sec .about_sec__outline-container picture {
	order: 2;
	width: 100%;
}
.about_sec__outline-container .about_sec__outline-wrapper {
	width: 100%;
}
.about_sec__outline {
	font-size: 1.1em;
}
.about_sec__outline p:first-child {
	line-height: 2;
}
.about_sec .about_sec__contents {
	flex-flow: column;
	text-align: center;
}
.about_sec .more_btn01 a {
	max-width: none;
	width: 100%;
}
	/* ------------------------
    GUIDE
  ------------------------ */

.guide_wrap { width: 100%; margin-bottom: 60px;}

.guide_sec01 .text { width: 100%;}
.guide_sec02 .budget_img_wrap figcaption {
	font-size: 1em;
	padding-left: 1px;
}
.guid_sec01__flow {
	display: block;
}
.guid_sec01__flow ul {
	text-align: center;
}
.guide_sec01 .arrow {
	margin-left: 0;
}
.guide_sec02 .budget_img_arrow.arrow-icon {
	border-top: 7px solid transparent;
	border-bottom: 7px solid transparent;
	border-left: 7px solid #ABACAD;
}
.guide_sec03 {
	flex-direction: column;
}
.guide_sec03 img {
	margin-top: 35px
}

/* ------------------------
	COMPANY
------------------------ */

.company_sec01, .company_sec02_ttl { width: 100%;}
#map { height: 300px;}


/* ------------------------
	CONTACT
------------------------ */

.contact_sec { width: 100%;}

@media only screen and (max-width: 570px) {
	.contact_sec dl { display: block;}
	.contact_sec dt, .contact_sec dd {
		display: block;
		border-bottom: none;
		padding: 0px;
	}
	.contact_sec dt {
		width: 100%;
		margin-bottom: 3px;
	}
	.contact_sec dt span {
		float: none;
		padding: 3px 5px;
		margin-left: 5px;
	}
	.contact_sec dd { margin-bottom: 20px;}
	.contact_sec input, .contact_sec textarea { width: 100%;}
}

/* ------------------------
	WORKS
------------------------ */

/* ナビ */
.works_nav .list01 {
	float: none;
	width: 100%;
	padding-left: 0px;
	margin-left: 0px;
	height: auto;
	min-height: 44px;
	position: relative;
}
.works_nav .list01:after {
	float: none;
	position: absolute;
	margin-right: 0px;
	right: 13px;
	top: 0px;
}
.works_nav .list01.work_nav_open:after { top: 2px;}

.works_nav .list01 ul {
	position: static;
	padding: 20px 20px 13px;
}

/* アーカイブ */
.works_archive li {
	float: none;
	width: 100%;
	display: inline-block;
	text-align: center;
}
.works_archive .hidden_l { text-decoration: underline;}

/* シングル */
.works_article { margin-bottom: 40px;}

.works_article .other_images li:after {
	width: 10%;
	bottom: -3px;
	right: 22px;
}

.works_article .details_box .float_l, .works_article .details_box .float_r { width: 100%;}

@media only screen and (max-width: 600px) {
	.works_article .box_ba, .works_article .box_ba figure { display: block; width: 100% !important; max-width: 504px; margin: auto;}
	.works_article .box_ba figure .pos_ab { width: 20%; max-width: 90px; height: auto;}
	.works_article .box_ba .arrow { -webkit-transform: rotate(90deg); transform: rotate(90deg);}
	.works_article .box_ba .arrow img { width: 20px; height: auto;}
}

/* 関連事例 */
@media only screen and (max-width: 600px) {
	.relPostWrap {
		padding-left: 12px;
	}
	.relPostWrap li {
		width: 100%;
		margin: 0 0 25px;
	}
}

/* ------------------------
	投稿
------------------------ */

.blog_contents, .blog_rNavi {
	float: none;
	width: 100%;
}

/* 記事ヘッダー */
@media only screen and (max-width: 500px) {
	.blog_header .blog_date dt { padding-right: 0px;}
	.blog_header .blog_date .pos_ab {
		max-width: 100%;
		position: static;
		float: right;
		margin-top: 10px;
	}
	.blog_header h1.fo17 { font-size: 1.5em !important;}
}


/* テーブル */
@media only screen and (max-width: 500px) {
	.blog_content table th, .blog_content table td {
		padding: 5px;
		font-size: 0.85em;
	}
}

/* 引用 */
@media only screen and (max-width: 500px) {
	.blog_content blockquote { padding: 20px 35px;}
	.blog_content blockquote:before {
		outline: solid 5px #f7f6f6;
		background-size: 25px auto;
		background-position: 5px 5px;
	}
	.blog_content blockquote:after {
		background-size: 25px auto;
		background-position: 98% 97%;
	}
}


/*WP用 投稿表示*/
img.aligncenter, img.alignright, img.alignleft {
	display: block;
	margin: 0px auto 20px;
}
.alignright, .alignleft { float: none;}

/* ページャー(シングル) */
.pager li { margin-bottom: 5px;}
.pager li a { padding: 8px 20px !important; font-size: 0.8em;}
.pager .previous, .pager .next { position: relative;}
.pager .return a { background-size: 5px auto;}

/* ページトップボタン */
@media only screen and (max-width: 500px) {
	.pagetop {
		bottom: 50px;
		right: 5px;
	}
	.footer {
		padding-bottom: 66px;
	}
}