@charset "utf-8";

/* display control 1 */
.only_pc {
	display:block;
}

.only_pc.inline {
	display:inline;
}

.only_mobile {
	display:none;
}

.only_mobile.inline {
	display:none;
}

.pc_and_tablet {
	display:block;
}

.pc_and_tablet.inline {
	display:inline;
}

.except_pc {
	display:none;
}

.except_pc.inline {
	display:none;
}

.only_sp {
	display:none;
}

.only_sp.inline {
	display:none;
}

.except_sp {
	display:block;
}

.except_sp.inline {
	display:inline;
}

/* for tablets or smartphones general settings */
@media screen and (max-device-width: 960px) {

html,body { font-size: 16px; }

/* display control 2 */
.only_pc {
	display:none !important;
}

.only_mobile {
	display:block;
}

.only_mobile.inline {
	display:inline;
}

.only_sp {
	display:none;
}

.only_sp.inline {
	display:none;
}

.except_pc {
	display:block;
}

.except_pc.inline {
	display:inline;
}

.except_sp {
	display:block;
}

.except_sp.inline {
	display:inline;
}

html, body {
	max-width:100%;
	min-width:auto;
}

.center_content {
    max-width: none;
	min-width: auto;
	width: 330px;
	padding-left:calc((100vw - 330px)/2);
	padding-right:calc((100vw - 330px)/2);
	word-break: keep-all;
}

.w1020,.w960 {
	width:330px;
}

.center_content.w1020 {
	padding-left:calc((100vw - 330px)/2);
	padding-right:calc((100vw - 330px)/2);
}


/* common */

.fs_xxxxl {
	font-size: 5rem;
	font-weight: 900;
	line-height:1.32em;
}

.fs_xxxl {
	font-size: 3.8rem;
	font-weight: 900;
	line-height:1.32em;
	letter-spacing: 0.05em;
}

.fs_xxl {
	font-size:9.8rem;
}

.fs_xl {
	font-size:1.6rem;
}

.fs_big {
    font-size:1.4rem;
}

.fs_large {
	font-size:1.3rem;
}

.fs_mid {
	font-size:1.2rem;
}

.fs_normal {
	font-size: 1rem;
}

.fs_ns {
	font-size: 0.9rem;
	line-height:2em;
}

.fs_small {
    font-size: 0.8rem;
}

.fs_ss {
	font-size: 0.7rem;
}

.fs_xs {
	font-size: 0.6rem;
}

/* margins and padding */
.mt40 { margin-top:20px; }
.mt60 { margin-top:40px; }
.mb40 { margin-bottom:20px; }
.mb60 { margin-bottom:40px; }
.pt100 {padding-top:60px; }
.pb100 {padding-bottom:60px; }


/* content start */
body {
	background: none;
}

/* header */
header {
	/*position: relative;*/
	min-width:auto;
	width: 100vw;
	height:55px;
	box-shadow: none;
}

header .frame_box {
	width:100%;
	max-width:none;
	min-width:auto;
}

header #logo_kibari {
    top:16.5px;
    width:90px;
    height:22px;
    left:calc(50vw - 45px);
}

header h1.fs_mid {
	padding-top: 0px;
	padding-top: calc((100px - 1em)/2);
	display:none;
}

header #bt_top_contact {
	display: none;
}

.showroom2023 #bt_header_sidebar {
	width:40px;
	top:55px;
}

#bt_header_badge {
	top:60px;
}

#bt_menu {
	width:31px;
	height:25px;
	display:block;
	position:absolute;
	left:4vw;
	top:27.5px;
	background:url(../images/bt_menu.png) center center no-repeat;
	background-size:contain;
	overflow:hidden;
}

#bt_menu.on {
	background:url(../images/bt_menu_on.png) center center no-repeat;
	background-size:contain;
}

/* door */
section#door {
	margin-top:55px;
	border-bottom:4px solid #C6311D;
	height:calc(100vh - 99px);
	position:relative;
	z-index:80;
	overflow:hidden;
}

#door_title {
	width:60vw;
	height:22.5vw;
}

#door_title h1 {
	margin-bottom:1em;
}

#door_title #door_logo {
	background-image: url(../images/logo_kibari_sp.png);
	width:60vw;
	height:22.5vw;
}

ul#menu {
	display:none;
	position:fixed;
	left:0;
	top:80px;
	background-color:#000;
	width:100vw;
	height:calc(100vh - 80px);
	z-index:100;
}

ul#menu li {
	text-align:center;
	padding-top: 5px;
	padding-bottom:5px;
}

ul#menu li:first-child {
	padding-top:80px;
}

ul#menu li.line {
	margin:10px auto;
	width:4vw;
	height:2px;
	
}

#door_cover {
	height:calc(100vh - 99px);
}

section#door #slide {
	display:none;
}


section#door #slide_sp li {
	height:calc(100vh - 99px);
}

#door_title {
	top:-30px;
}

/* sns share buttons */
#door_share_buttons {
	position:absolute;
	right:0;
	left:0;
	margin:0 auto;
	top:calc(100vh - 40px);
	width:100%;
	padding:4px 0;
	background-color:#1F1F1F;
}

#door_share_buttons .share_buttons_icons_box {
	margin: 0 auto;
	min-width:300px;
	width:calc(300px + 5%);
}

#door_share_buttons.share_buttons a.snsicons {
	width:36px;
	height:36px;
}

#door_share_buttons.share_buttons a.snsicons + a.snsicons {
	margin-left:1%;
}

#door_share_buttons .text {
	line-height:36px;
	/*padding-top:calc((36px - 1em)/2);*/
	height:36px;
	margin-right:0.4em;
	float:left;
}

a#scrolldown {
	width:38px;
	height:28px;
	bottom: 100px;
}

/* main contents */

#sr2_ti01 {
	width:330px;
	height:50px;
	margin-bottom:40px;
}

#about {
	z-index:79;
}

#about h2 + div,
#price h1 + div,
#showroom_photo > div > h1 + div,
#interview > div > div,
.modal p {
	text-align:left;
	width:330px;
	word-break:break-all;
}

#sr2_cases li h2 + .txt {
	text-align:center;
}

#sr2_ti03 {
	width:330px;
	height:50px;
}

#price div.center_content {
	width:100%;
	padding:0;
}

#sr2_ti04 {
	width:330px;
	height:88px;
}

#showroom_photo ul#cr01 li {
	padding:0;
	background-color:transparent;
	border-radius:0;
	margin-bottom:40px;
}

#showroom_photo ul#cr01 li:last-child {
	margin-bottom:0;
}

#showroom_photo ul#cr01 li figure img {
	width:330px;
	height:auto;
	margin-bottom:10px;
}

#showroom_photo ul#cr01 li h3,
#showroom_photo ul#cr01 li .desc {
	text-align:center;
}

#interview h1#sr2_ti05 {
	width:330px;
	height:50px;
}

#interview .w960.center_content {
	width:330px;
	padding:0;
}

#sr2_ti07 {
	width:330px;
	height:50px;
}


#land h1 + h2 {
	font-size:0.8rem;
}

#download h2 + div {
	font-size:1rem;
}

#download img + div.fs_normal {
	font-size:0.8rem;
}

#download > img {
	margin-top:50px;
	width:100%;
}

#download #dl_photo + div.fs_mid {
	font-size:1rem;
}
.button {
	font-size:1rem;
}

footer h2.fs_mid {
	font-size:0.8rem;
}

footer #footer_logo {
	width:180px;
	height:68px;
}

#contact form {
	width:100%;
}

/* modalwindow */

.modal {
	width:100vw;
	left:0;
	z-index:190;
}

.modal_content {
	padding : 50px 20px;
}

.modal #ig_box {
	overflow-y:auto;
}

.modal #ig_photo {
	float:none;
}

.modal #ig_text {
	float:none;
	width:100%;
	margin: 50px auto 0 auto;
	max-width:392px;
	height:calc( 100vh - 250px - 50vw );
	overflow-y:unset;
}

.modal #ig_photo img {
	margin: 0 auto;
	width:50vw;
	height:auto;
}

.modal #ig_photo video {
	max-width:100%;
}

.modal.interview h3 {
	word-break:break-all;
	text-align:left;
}

.modal.interview div.txt_caption {
	word-break:break-all;
}

#mask {
	height:140vh;
}

/* showroom */


/* wrapping arc for tablet end */

@media screen and
(max-device-width : 767px) {
	
	html,body { font-size: 16px; }
	
	/* display control 3 */
	.only_mobile {
		display:block !important;
	}
	
	.only_mobile.inline {
		display:inline !important;
	}
	
	.pc_and_tablet {
		display:none !important;
	}

	.pc_and_tablet.inline {
		display:none !important;
	}
	
	.only_sp {
		display:block;
	}
	
	.only_sp.inline {
		display:inline;
	}
	
	.except_pc {
		display:block;
	}

	.except_pc.inline {
		display:inline;
	}
	
	.except_sp {
		display:none;
	}
	
	.except_sp.inline {
		display:none;
	}
	
	/* common */
	
	footer {
		width: calc(100% - 36px) !important;
		padding-left:18px !important;
		padding-right:18px !important;
	}
	
	.fs_normal {
		letter-spacing:0;
	}
	
	/* contents */
	
	ul#menu li:first-child {
		padding-top:40px;
	}
	
	#bt_header_badge {
		width:80px;
		height:80px;
		top:30px;
	}
	
	#bt_header_badge #bt_circle {
		padding-top:25px;
		width:80px;
		height:80px;
		z-index:200;
	}
	
	#bt_header_badge #pic_catalog {
		width:80px;
		height:60px;
		top:auto;
		left:auto;
		right:auto;
		margin-top:-50px;
		
		position:relative;
	}
	
	#bt_header_badge #bt_circle .txt {
		position:relative;
	}
	
	#bt_header_badge #bt_circle .txt:nth-child(5) {
		margin-top:-10px;
	}
	
	.ic_arrow_down {
		width:12px;
		height:10px;
		margin-top:3px;
	}
	
	#land {
		padding:50px 0;
	}
	
	#area #map {
		height:84vw;
		margin-top:0;
	}
	
	#dl_photo li {
		margin-right: 10px;
		display: block;
		width: calc((100% - 20px)/3);
	}
	
	.button {
		margin-bottom:0;
	}
	
	#contact {
		padding-top:40px;
		padding-bottom:20px;
	}
	
	#contact form {
		width:330px;
	}
	
	.showroom2023 #fbuilder .pbSubmit {
		width:330px;
		margin: 10px 0;
		margin-left:0 !important;
	}
	
	.modal {
		top:0;
	}
	
	.modal .bt_close {
		top:20px;
		position:absolute;
	}
	
	.modal_content {
		 padding: 60px 0 20px 0;
	}
	
	.grid {
		width:330px;
	}
	
	.grid-item {
		width:100%;
		margin: 0 0 10px 0;
	}
	
	.grid picture img {
		width:100%;
	}
	
	.modal.interview {
		padding:0
	}
	
	.modal #ig_text {
		width:80vw;
		max-width:80vw;
		height:calc( 100vh - 250px - 80vw );
	}

	.modal #ig_photo img {
		width:80vw;
	}
	
	#area,
	#download {
		padding: 100px 4vw;
		width:92vw;
	}
	
	#view_studio {
		padding-top:0;
	}
	
	/* showroom */
	.showroom .center_content {
		width:92vw;
		padding-left:4vw;
		padding-right:4vw;
	}
	.showroom #bt_header_sidebar {
		height:8em;
	}
	
	.page .title_combine_base,
	.showroom .title_combine_base {
		font-size:1.8rem;
	}
	
	.page .title_combine,
	.showroom .title_combine,
	.showroom #contact h1 + h2.title_combine {
		font-size:1.2rem;
		margin-top:-0.6em;
		letter-spacing:0;
	}
	
	.showroom #kodawari {
		margin-top:100px;
	}
	
	.showroom .bg_circle_cy {
		padding-top:20px;
		width:92vw;
		height:92vw;
	}
	.showroom .logo_kibari_basic {
		width:98px;
		height:45px;
		margin-bottom:10px;
	}
	
	.showroom #price h4 {
		line-height:1.5em;
		margin-bottom:10px;
	}
	
	.showroom .price_breakdown {
		margin:0 auto 10px auto;
		padding:0;
	}
	
	.showroom .price_number {
		font-size:3rem;
	}
	
	.showroom .price_withtax {
		bottom:2rem;
		margin-left:-1em;
	}
	
	.showroom .price_unit {
		font-size:1.2rem;
	}
	
	.showroom #kodawari_box {
		margin-bottom:60px;
	}
	
	.showroom #kodawari_box h1 {
		font-size:1.6rem;
		line-height: 1.5em !important;
		margin-top:40px;
		margin-bottom:30px;
	}
	
	.showroom #kodawari_box ul {
		display:block;
	}
	
	.showroom #kodawari_box ul li {
		width:100%;
	}
	
	.showroom #kodawari_box ul li:nth-child(2n + 1) {
		margin-right:0;
	}
	
	.showroom #kodawari_box ul li:nth-child( n + 2 ) {
		margin-top:20px;
	}
	
	.showroom #kodawari_box ul li h2 {
		font-size:120%;
		line-height:1.5em;
	}
	
	.showroom #kibari_price_list_sp {
		max-width: calc(100% - 40px);
		margin: 40px auto 20px auto;
	}
	
	.showroom #showroom_introduction {
		padding-bottom:40px;
	}
	
	.showroom #showroom_introduction > figure h2 {
		font-size:2rem;
	}
	
	.showroom #showroom_introduction ul:first-of-type li {
		float:none;
		width:100%;
	}
	
	.showroom #showroom_introduction ul:first-of-type li:nth-child(2) {
		background-image:url(../images/showroom/ic_tri_down.svg);
		width:100%;;
	}
	
	.showroom h2#title_experience {
		font-size:1.8rem;
	}
	
	.showroom #title_experience::before {
		content:"＼";
	}
	
	.showroom #title_experience::after {
		content:"／";
	}
	
	.showroom #showroom_introduction ul:nth-of-type(2) li {
		width:100%;
		margin-right:0;
	}
	
	.showroom #showroom_introduction ul:nth-of-type(2) li:nth-child(n + 2) {
		margin-top:30px;;
	}
	
	.showroom #showroom_introduction ul:nth-of-type(2) {
		width: 86vw;
		margin: 40px auto 0px auto;
	}
	
	.showroom #access {
		text-align:left;
		width:92vw;
		padding:0 4vw;
	}
	
	.showroom #access img#map {
		width:92vw;
		height:calc(92vw / 714 * 537);
	}
	
	.showroom #access address {
		width:92vw;
		line-height:1.5em;
		margin-top:10px;
	}
	
	.showroom #access .txt {
		width:92vw;
		line-height:1.5em;
		margin-top:10px;
		margin-bottom:10px;
	}
	
	.showroom #bt_jumpto_reserve {
		width:calc(94vw - 40px);
		margin:40px auto;
	}
	
	.showroom #bt_jumpto_reserve span {
		background-size:27px 27px;
	}
	
	.showroom #interview {
		margin-top:80px;
	}
	
	.showroom #interview > figure figcaption {
		width:92vw;
		margin:0 4vw;
	}
	
	.showroom #interview > ul {
		width:92vw;
	}
	
	.showroom #interview .txt_caption {
		text-align:left;
	}
	
	#fbuilder .left_aligned .fields label {
		float:none !important;
	}
	
	#fbuilder .left_aligned .fields .dfield {
		float:none !important;
		width:100% !important;
	}

	
	.showroom #fbuilder .pbSubmit {
		width:100%;
		margin-left:0 !important;
		margin-top:30px !important;
		display:block;
	}
	
	#backtotop {
		display:none;
	}
	
	.page .page_content {
		word-break:break-all;
		text-align:left;
	}
	
	.page footer {
		padding:0 !important;
		width:100% !important;
	}
	
	.page #footer_map, .showroom #footer_map {
		margin-bottom:50px;
	}

} /* wrapping arc end */

@media screen and
(max-device-width : 320px) {
	.center_content {
		width: 92vw;
		padding-left: 4vw;
		padding-right: 4vw;
	}
	.insta_reel {
		width:92vw;
	}
	
	.insta_reel li{
		width: calc((92vw - 15px)/2);
	}
	
	.insta_reel li a img {
		width: calc((92vw - 15px)/2);
		height: calc((92vw - 15px)/2);
	}

}