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

/* index.html */
body{font-size:13px;color:#333333;line-height:1.8em;}
.sponly, #olayBtn {display: none;}
ul#gNav li a {text-shadow: none;}
#mainImg_area{width:100%; overflow:hidden; margin-top:-10px; position:relative; background:url(../img/mainImg_bg.png) left top repeat-x; height:572px;}
#mainImg_area:before,#mainImg_area:after{display:table;content:"";line-height:0;}
#mainImg_area:after{clear:both;}

#mainImg_H_bg{position: relative; float:left;width:50%; height:572px; background:url(../img/mainImg_H.jpg) right bottom no-repeat;}
#mainImg_H_bg p {position: absolute; font-size: 25px; bottom: 58px; left: 0; right: 0; line-height: 1.2em; text-align: center; color: #333333; text-shadow: none; background: rgba(255,255,255,0.9); padding: 15px 0;}
#mainImg_H_bg p strong {color: #ff4d00;}
#mainImg_K_bg{position: relative; float:left;width:50%; height:572px; background:url(../img/mainImg_K.jpg) left bottom no-repeat;}
#mainImg_K_bg p {position: absolute; font-size: 25px; bottom: 58px; left: 0; right: 0; line-height: 1.2em; text-align: center; color: #333333; text-shadow: none; background: rgba(255,255,255,0.9); padding: 15px 0;}
#mainImg_K_bg p strong {color: #26a9e1;}
#mainImg_K_bg p span {letter-spacing: -5px;}

#mainImg_balloonH{position:absolute;bottom:0;right:50%; z-index:200;}
#mainImg_balloonK{position:absolute;bottom:0;left:50%; z-index:200;}

#top_sec01{padding:30px 0 100px;}

#top_sec_H{width:50%;float:left;background:url(../img/line_ddd.png) right bottom repeat-y;}
#top_sec_K{width:50%;float:left;}
#top_sec_H_inner{padding-right:20px;}
#top_sec_K_inner{padding-left:20px;}

#top_sec01 h2{margin-bottom:15px;}

dl.top_sec01_dl dt{float:left; clear:both;width:7em; padding:0.5em 0 0.5em 0.5em; box-sizing:border-box; font-size:15px; font-weight:bold;}
dl.top_sec01_dl dd{padding:0.5em 1em 0.5em 7em;border-bottom:1px dotted #d6d6d6; font-size:13px;}
dl.top_sec01_dl dd.top_sec01_dd{font-size:15px;}
dl.top_sec01_dl dd ul {font-size: 13px; list-style-type: none;}
dl.top_sec01_dl dd ul li, dl#view360_dl dd ul li {margin-bottom: 0.7em; line-height: 1.5em;}

.top_btn_bg{background:url(../img/top_btn_bg.png); width:445px;height:69px;margin:40px auto 0;}
.top_btn_to{ padding-top:10px;}
.top_btn_bg a#top_btn_h{background:url(../img/top_btn_to_h.png) no-repeat;}
.top_btn_bg a#top_btn_k{background:url(../img/top_btn_to_k.png) no-repeat;}
.top_btn_bg a{width:337px;height:48px;text-align:center; display:block; margin:0 auto; line-height:45px; font-size:18px; color:#ffffff; text-shadow: none;}
.top_btn_bg a:hover,#mainImg_area a:hover {
opacity: 0.7;
-moz-transition-property: all;
-webkit-transition-property: all;
-o-transition-property: all;
-ms-transition-property: all;

-moz-transition-duration:500ms;
-webkit-transition-duration:500ms;
-o-transition-duration:500ms;
-ms-transition-duration:500ms;

-moz-transition-timing-function:ease-in-out;
-webkit-transition-timing-function:ease-in-out;
-o-transition-timing-function:ease-in-out;
-ms-transition-timing-function:ease-in-out;
behavior: url(js/ie-css3.htc);
}

.link_detail {display: block;}

/* studio-H & studio-K.html */
.studio-k-360 a, .studio-h-360 a, .studio_equip_box1 a, .studio_equip_box2 a {display: block; position: relative; overflow: hidden; width: 100%; height: 100%;}
.studio-k-360 a span div:before, .studio-h-360 a span div:before {display: block; content: ""; background: rgba(0,0,0,0.5); position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.studio-k-360 a span, .studio-h-360 a span, .studio_equip_box1 a span, .studio_equip_box2 a span {display: block; line-height: 2em;}
.studio-k-360 a:after, .studio-h-360 a:after, .studio_equip_box1 a:after, .studio_equip_box2 a:after {display: block; position: absolute; content: ""; right: -45px; bottom: -45px; width: 92px; height: 92px; transform: rotate(45deg);}
.studio-k-360 a:before, .studio-k-equip .studio_equip_box1 a:before, .studio-k-equip .studio_equip_box2 a:before {display: block; font-family: "Font Awesome 5 Free"; content: "\f002"; font-size: 20px; font-weight: 900; color: #ffffff; position: absolute; bottom: 8px; right: 8px; z-index: 2; text-shadow: 1px 1px 5px rgb(38,169,225);}
.studio-h-360 a:before, .studio-h-equip .studio_equip_box1 a:before, .studio-h-equip .studio_equip_box2 a:before {display: block; font-family: "Font Awesome 5 Free"; content: "\f002"; font-size: 20px; font-weight: 900; color: #ffffff; position: absolute; bottom: 8px; right: 8px; z-index: 2; text-shadow: 1px 1px 5px rgb(255,77,0);}
.studio-k-360 a:before, .studio-h-360 a:before {content: "\f03d";}
.studio-k-360 a:after, .studio-k-equip .studio_equip_box1 a:after, .studio-k-equip .studio_equip_box2 a:after {background: rgba(38,169,225,0.8);}
.studio-h-360 a:after, .studio-h-equip .studio_equip_box1 a:after, .studio-h-equip .studio_equip_box2 a:after {background: rgba(255,77,0,0.8);}
.studio-k-360 a span:before, .studio-h-360 a span:before, .studio_equip_box1 a span:before, .studio_equip_box2 a span:before {display: block; content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; box-shadow:inset 0 0 5px rgba(0,0,0,0.75); z-index: 2;}
.studio-k-360 a span:after, .studio-h-360 a span:after {
    display: block;
    position: absolute;
    top: 40%;
    bottom: 40%;
    left: 0;
    right: 0;
    white-space: pre !important;
    content: "360° view\A※クリックすると全画面表示で\A部屋を360° 見渡せます";
    text-align: center;
    font-size: 1.5em;
    color: #fafafa;
    text-shadow: 0 1px 5px rgba(0,0,0,0.75);
}

/* download.html */
#download_list {margin: 50px 0 130px; padding-bottom: 30px;}
#download_list ul {font-size: 16px; margin: 30px 15px 45px 15px;}
#download_list ul li {margin-bottom: 10px; list-style-type: none;}
#download_list ul li a:before {display: inline-block; font-family: "Font Awesome 5 Free"; content: "\f019"; font-weight: 900; margin-right: 5px;}
#download_list ul li a {display: inline-block;}
.box_txt {background: rgba(38,169,225,0.1); font-size: 16px; text-align: center; padding: 15px; margin-bottom: 45px; border-radius: 5px;}

/* price.html */
.contact_h2_blue span.txt_alter {
  display: inline-block;
  font-size: 120%;
  float: right;
  color: #26a9e1;
  position: relative;
  right: 15px;
  bottom: 15px;
}
.mb30 {margin-bottom: 30px;}
.mb60 {margin-bottom: 60px;}

.fl_left {width: 35%; float: left; margin-right: 3%;}
.fl_left img {max-width: 100%; height: auto;}
.txt_option {margin-top: 30px; font-size: 120%;}
.txt_option:after {display: block; content: ""; clear: both;}
.txt_option p {margin-bottom: 15px; line-height: 1.7em;}
#option_douji-tsuyaku ul {clear: both;}
.option_area {margin: 30px 0 45px 0;}
.option_area p {line-height: 1.7em;}
.option_area small center {display: block; color: #26a9e1; margin: 5px auto 0 auto;}

ul.checklist {
  clear: both;
  border: solid 2px #ffb03f;
  padding: 0.5em 1em 0.5em 2.3em;
  position: relative;
  margin: 2em 0 3em 0;
}

ul.checklist li {
  line-height: 1.7;
  padding: 0.5em;
  list-style-type: none!important;/*ポチ消す*/
}

ul.checklist li:before {
  font-family: "Font Awesome 5 Free";
  content: "\f00c";
  position: absolute;
  font-weight: 900;
  left : 1.3em;
  color: #ffb03f;
}

/* company.html */

.contact_h2_blue{background:url(../img/heading_line_blue.png) no-repeat; width:970px;height:75px;}
.contact_h2_blue-k{background:url(../img/heading_line_blue-k.png) no-repeat; width:970px;height:75px;}
.contact_h2_blue h2,.contact_h2_blue-k h2{ padding:30px 0 0 100px; font-size:30px; color:#26a9e1;font-weight:normal;}
.contact_h2_blue h2 span,.contact_h2_blue-k h2 span{font-size:15px; color:#333333; font-weight:normal; margin-left:2em;}

#company {width: 100%; font-size: 15px; border: 1px solid #d7d7d7; border-collapse: collapse;margin: 30px 0 80px 0;}
#company th {background:url(../img/studio_table_th_bg.png);text-align: left;padding: 15px;border: 1px solid #d7d7d7;width: 23%;}
#company td {padding: 15px;border: 1px solid #d7d7d7;}


/* access.html */

#access {text-align: center; margin: 40px auto 80px auto;}
#access ul li {display: inline-block; margin: 0 30px;}
.flex_box {display: flex; align-items: flex-start; justify-content: space-between; margin: 45px auto 80px auto; list-style-type: none;}
.flex_box li {width: 100%; text-align: center; font-size: 90%; line-height: 1.7em;}
.flex_box li img {display: block; max-width: 200px; text-align: center; border: 1px solid #dddddd; padding: 3px; margin: 0 auto 15px auto; box-sizing: border-box;}

/* contact.html */

/* thanks.html */
#bg_thanks {background:url(../img/bg_thanks.png); width:405px;height:682px;margin:40px auto 80px auto;}
#bg_thanks p {text-align: center; font-size: 18px; padding-top: 60px; line-height: 1.6em;}


@media only screen and (max-width: 801px) {
.sponly {display: block !important;}
.pconly {display: none !important;}

header {margin-bottom: 80px;}
#head_logo a img {max-width: 30%;}
#mainImg_H_bg, #mainImg_K_bg {border: none;}
#mainImg_area {margin-top: -26px; height: auto;}
#breadcrumb, #foot_nav, #foot_to_top {display: none;}

#gNav_area {background-position-y: -3px; margin-bottom: -8px;}
#nav-drawer {
  position: relative;
}

/*チェックボックス等は非表示に*/
.nav-unshown {
  display:none;
}

/*アイコンのスペース*/
#nav-open {
  display: inline-block;
  width: 30px;
  height: 22px;
  vertical-align: middle;
  float: left;
  position: relative;
  top: 17px;
}

/*ハンバーガーアイコンをCSSだけで表現*/
#nav-open span, #nav-open span:before, #nav-open span:after {
  position: absolute;
  height: 3px;/*線の太さ*/
  width: 25px;/*長さ*/
  border-radius: 3px;
  background: #ffffff;
  display: block;
  content: '';
  cursor: pointer;
  float: left;
}
#nav-open span:before {
  bottom: -8px;
}
#nav-open span:after {
  bottom: -16px;
}

/*閉じる用の薄黒カバー*/
#nav-close {
  display: none;
  position: fixed;
  z-index: 99;
  top: 0;/*全体に広がるように*/
  left: 0;
  width: 100%;
  height: 100%;
  background: black;
  opacity: 0;
  transition: .3s ease-in-out;
}

/*中身*/
#nav-content {
  overflow: auto;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;/*最前面に*/
  width: 80%;/*右側に隙間を作る（閉じるカバーを表示）*/
  max-width: 330px;/*最大幅（調整してください）*/
  height: 100%;
  background: #ffffff;/*背景色*/
  transition: .3s ease-in-out;/*滑らかに表示*/
  -webkit-transform: translateX(-105%);
  transform: translateX(-105%);/*左に隠しておく*/
}

/*チェックが入ったらもろもろ表示*/
#nav-input:checked ~ #nav-close {
  display: block;/*カバーを表示*/
  opacity: .5;
}

#nav-input:checked ~ #nav-content {
  -webkit-transform: translateX(0%);
  transform: translateX(0%);/*中身を表示（右へスライド）*/
  box-shadow: 6px 0 25px rgba(0,0,0,.15);
}

#nav-close:after {
  display: block;
  content: "×";
  font-size: 260%;
  position: absolute;
  color: #ffffff;
  text-shadow: none;
  top: 10px;
  right: 15px;
  z-index: 999999;
  opacity: 1.0;
  width: 30px;
  height: 30px;
}

#nav-content {
  background: #26a9e1;
}
#nav-content ul {border: none; margin-left: -1px;}
#nav-content ul li {
  list-style-type: none;
  padding: 17px;
  border-bottom: 1px solid #dddddd;
  box-shadow: 1px 0 0 0 #ffffff inset;
}
#nav-content ul li:hover {
  background: #1c78a0;
}
#nav-content ul li a {
  display: block;
  color: #ffffff;
  text-shadow: none;
}
#head_logo h1 {padding: 0;}
#head_logo {
  width: 80%;
  padding: 0 5%;
  float: left;
  text-align: center;
}
#head_logo h1 {
  font-size: 80%;
  color: #ffffff;
  text-shadow: none;
}
#head_logo img {
  max-width: 40%;
  height: auto;
  display: block;
  margin: 0 auto;
  padding: 0;
}

.baseW, #top_sec_H_inner, #top_sec_K_inner {width: 90%; margin: 0 auto; clear: both;}
#kihon_price .baseW {width: 100%;}
#top_sec01 {padding-bottom: 0;}
#top_sec01 h2, #top_sec01 h2 img, .top_btn_bg {width: 100%; height: auto;}
.top_btn_to {padding: 2%;}
.top_btn_bg a#top_btn_h, .top_btn_bg a#top_btn_k {background-size: 96%;}
#top_sec01 .baseW, .baseW .baseW {width: 100%;}
#mainImg_H_bg, #mainImg_K_bg {width: 100%; float: none; background-size: cover; object-fit: cover; height: 200px; overflow: hidden; position: relative;}
#mainImg_H_bg {background: url(../img/mainImg_H.jpg) no-repeat 50% 10%; background-size: cover; position: relative;}
#mainImg_K_bg {background: url(../img/mainImg_K.jpg) no-repeat 50% 40%; background-size: cover; position: relative;}
#mainImg_balloonH, #mainImg_balloonK {width:;}
#mainImg_balloonH, #mainImg_balloonK {width:;}
#top_sec_H, #top_sec_K {width: 100%; float: none;}
#mainImg_balloonH {right: 0;}
#mainImg_balloonH img, #mainImg_balloonK img {display: none;}
#mainImg_H_bg img, #mainImg_K_bg img {
  max-width: 42%;
  height: auto;
  position: absolute;
  right: 0;
  top: 15px;
}
#mainImg_H_bg img {right: -15px; left: auto;}
#mainImg_K_bg img {left: -15px; right: auto;}
#mainImg_balloonK img  {max-width: 80%; height: auto; float: left;}
#mainImg_balloonK {left: 0;}
#top_sec_H, #top_sec_K {background: none; margin: 5% 0 15% 0; float: none;}
#top_sec_H_inner, #top_sec_K_inner {padding: 0;}

dl.top_sec01_dl dt {width: 20%;}
dl.top_sec01_dl dd {width: 75%;}
dl.top_sec01_dl dd span, dl#view360_dl dd ul li span {display: none;}
dl.top_sec01_dl dt, dl.top_sec01_dl dd, dl.top_sec01_dl dd.top_sec01_dd {font-size: 100%;}

h2 img .top_btn_bg, .top_btn_bg a {width: 100%; height: auto; text-align: center;}
.studio_h3 {font-size: 140%;}
.contact_h2_red-img h2, .contact_h2_blue-k-img h2 {padding: 20px 0 0 100px;}
.contact_h2_red-img h2 img, .contact_h2_blue-k-img h2 img {width: 230px; height: auto;}
.contact_h2_red h2 {padding-top: 20px; padding-left: 85px; font-size: 180%;}
.contact_h2_blue h2, .contact_h2_blue-k h2 {font-size: 180%;}
.contact_h2_red h2 span {display: block; margin-left: 15px; font-size: 50%;}
.txt-with-brank h2 {padding-top: 10px; line-height: 1.2em;}
#bg_thanks {width: 100%; background-size: 100%; background-repeat: no-repeat;}
#bg_thanks p {font-size: 130%; padding-top: 50px; margin: 0 30px;}

.top_btn_bg a#top_btn_h, .top_btn_bg a#top_btn_k {background-position: center;}

table td {font-size: 100% !important;}
#studio_rule_area {padding-bottom: 30px;}
table.studio_table {width: 100%;}
#company th {width: auto; white-space: nowrap;}
table.no_brd td, table.studio_table th {font-size: 100%;}
table.no_brd td.bg_user span, table.no_brd td.bg_hsk span {white-space: nowrap; font-size: 100%; padding: 0 15px; margin: 15px;}
table.studio_table td {padding: 0.7em; width: 40%;}
table.studio_table td.studio_table_td_price {padding: 1.7em;}
table.studio_table td.studio_table_td_price, #option_price table td:last-child {padding: 0.7em; text-align: center;}
table.nowrap th {table-layout:fixed; white-space: normal;}
table.nowrap th, table.nowrap td {width: 33%;}

#mainImg_H_bg, #mainImg_K_bg {height: 260px;}
#mainImg_H_bg p, #mainImg_K_bg p {font-size: 20px; bottom: 0;}

/* studio-H & studio-K.html */
#view360_img, #view360_txt, .studio_equip_box1, .studio_equip_box2 {width: 100%; float: none; margin: 0;}
#view360_img a {display: block;}
#view360_img a img, .studio_equip_box1 a img, .studio_equip_box2 a img {width: 100%; height: auto;}
#view360_txt {margin-top: 15px;}
#studio_equip_area {padding: 30px 0;}

/* price.html */
.contact_h2_blue span.txt_alter {
  display: block;
  font-size: 120%;
  float: none;
  color: #26a9e1;
  position: static;
  padding-left: 100px;
}
.sppt15 h2 {padding-top: 15px !important;}

.fl_left {width: 100%; float: none; margin: 15px auto; text-align: center;}
.fl_left img {max-width: 80%; height: auto;}
.txt_option, #option_focus-vision p, #option_focus-online p {font-size: 100%; margin-bottom: 15px;}

#access ul:after {display: block !important; clear: both; content: "";}
#access ul li {
  width: 50%;
  margin: 0;
  padding: 0;
  display: block;
  float: left;
}
#access ul li:nth-child(2) {padding-top: 10px;}
#access ul li img {max-width: 90%; height: auto;}
#mapbox {width: 97%; height: 300px; margin: 15px auto;}
#mapbox iframe {height: 100%;}
.clear {margin-bottom: 45px;}
.flex_box {display: block;}
.flex_box li {margin-bottom: 45px;}
.flex_box li img {max-width: 100%;}

dl#form_dl dt, dl#form_dl dd {width: 100%; padding: 1em 0; float: none:}
input[type="text"], textarea, .inputL {width: 92%; line-height: 2.3em; padding: 1% 2%;}
#submit-btn {
  width: 96%;
  background-position: center center;
  background-size: contain;
}

#btn_to_form_fixed {display: none;}
#footer {margin-bottom: 61px; clear: both;}
#foot_copy {width: 100%; text-align: center;}
.mg0 {margin-bottom: 0 !important;}

/* オーバーレイボタン */
#olayBtn {
	display: block;
	position: fixed;
	width: 100%;
	background: transparent;
	padding: 0;
	box-sizing: border-box;
	z-index: 1000;
}
#olayBtn ul {
	overflow: hidden;
	margin: 0px !important;
	padding: 0px !important;
	border-top: 1px solid #dddddd;
}
#olayBtn ul li {
	display: table;
	width: calc(100% / 2);
	margin: 0;
	float: left;
	background: rgba(28,130,193,0.9);
}
#olayBtn ul li:last-of-type {
	margin: 0;
}
#olayBtn ul li:nth-child(1) {
}

#olayBtn ul li:nth-child(2) {
        box-shadow: 1px 0 0 0 #dddddd inset;	 
}

#olayBtn ul li a {
	display: table-cell;
	color: #ffffff;
	text-shadow: none;
	vertical-align: middle;
	text-align: center;
	height: 60px;
	text-decoration: none;
	font-size: 0.7rem;
	border: none;
}
#olayBtn ul li a:hover, #olayBtn ul li a:active {
	background: #777777;
}
#olayBtn ul li a i.fa,#olayBtn ul li a i.fab,#olayBtn ul li a i.fas {
	display: block;
	color: #ffffff;
	text-shadow: none;
	width: 36px;
	padding: 1% 0 0 0;
	margin: 0 auto;
	background-repeat: no-repeat;
	background-size: 100% auto;
}
#newsWrap {
    height: 300px;
    margin: 0 30px 60px 30px;
}
#newsList li .title {
	margin-top: 10px;
}
}

@media only screen and (max-width: 640px) {
.contact_h2_blue {width: 100%;}
.contact_h2_blue h2, .contact_h2_blue-k h2 {font-size: 140%; padding-left: 90px; padding-top: 20px;}
.contact_h2_blue h2 span, .contact_h2_blue-k h2 span {display: block; margin-left: 15px; font-size: 50%;}
.contact_h2_blue h2 strong {display: block; font-size: 60%;}
.txt_alter {display: inline-block;}
h2#contact_h2 {width: 100%;}
h2#contact_h2 img {max-width: 270%; height: auto;}
.sppt15-sp h2 {padding-top: 0 !important; line-height: 1.2em;}
#basic_price{margin-bottom: -59px;}
#option {padding-top: 90px;}
}

@media only screen and (max-width: 360px) {
#head_logo {width: 90%; padding: 0; position: relative; top: -20px; left: 30px;}
#head_logo h1 {font-size: 70%;}
#head_logo a img {max-width: 40%;}
.contact_h2_red-img h2 img, .contact_h2_blue-k-img h2 img {width: 185px;}
h2#contact_h2 img {max-width: 270%;}
.link_gmap p {font-size: 100%;}
}

@media only screen and (max-width: 320px) {
.contact_h2_red, .contact_h2_red-img {width: 100%;}
.contact_h2_red h2 {font-size: 140%; padding-left: 80px;}
.contact_h2_blue h2, .contact_h2_blue-k h2 {font-size: 140%; padding-left: 90px; padding-top: 20px;}
.contact_h2_blue h2 span, .contact_h2_blue-k h2 span {display: block; margin-left: 10px; font-size: 50%;}
}
