@charset "utf-8";
/* ゆいすまオキナワ スタイルシート 全体 */


/*-----------------------------------------------------------
header
-----------------------------------------------------------*/



#header{
    position: fixed;
    width: 100%;
    margin: 0 auto;
    line-height: 1;
    height: 70px;
    z-index: 10;
	background-color:rgba(255,255,255,1);
	top:0
}

#header .wrap {
    position: relative;
    width: 96%;
    height: 100%;
    margin: auto;
    padding: 0 0 0 0;
}

.header_logo {
    width: 200px;
    height: 56px;
    margin: 7px 0 0 0;
    position: relative;
    z-index: 2;
    transition: -webkit-transform .6s cubic-bezier(.645,.045,.355,1);
    transition: transform .6s cubic-bezier(.645,.045,.355,1);
    transition: transform .6s cubic-bezier(.645,.045,.355,1),-webkit-transform .6s cubic-bezier(.645,.045,.355,1);
    line-height: 1;
    background: url(image/header/logo.png?v=20261020b) no-repeat center;
    background-size: contain;
    float: left;
}

.header_logo > a{height:100%; display:block; width:100%}


.header_tel {
    position: absolute;
    top: 0;
    right: 60px;
}

.header_sns {
    float: left;
    margin: 22px 0 0 15px;
}

.header_sns li{display:inline-block; padding:0 3px} 
.header_sns li a{display: block; height: 30px}
.header_sns li a img{height: 100%; width: auto}

.header_btn{
    position: fixed;
    right: 5%;
    top: 10%;
	text-align:center
}
.header_btn .tel img{ height:auto; width:100%;max-width:241px;}
.header_btn .contact img{ height:auto; width:100%;max-width:110px;}

.header_btn > div:not(:where(.hx1)){ margin-bottom:15px}

#header .areacomment {
    margin: 30px 0 0 5px;
    float: left;
    font-weight: 500;
    letter-spacing: -0.1rem;
	font-size: 1.6rem
}
/*グローバルナビ*/

#gnavi {
    float: right;
    margin: 0 2% 0 0;
}
#gnavi .gnavi_li > a {
    text-decoration: none;
    font-size: 1.6rem;
    font-weight: 400;
    display: block;
    -webkit-transition: all 400ms cubic-bezier(0.19, 1, 0.22, 1);
    -moz-transition: all 400ms cubic-bezier(0.19, 1, 0.22, 1);
    -o-transition: all 400ms cubic-bezier(0.19, 1, 0.22, 1);
    transition: all 400ms cubic-bezier(0.19, 1, 0.22, 1);
    -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
    -moz-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
    -o-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
    transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
    width: 160px;
    padding: 10px 0;
}

#gnavi > ul > li {
    display: inline-block;
    letter-spacing: 0;
    text-align: center;
}



#gnavi .gnavi_li > a > span {
  position: relative;
  text-decoration: none;
}


#gnavi .gnavi_li > a:hover span{color:#F4D63D}

#gnavi .gnavi_li > a > span::after {
  position: absolute;
  bottom: -4px;
  left: 0;
  content: "";
  width: 100%;
  height: 2px;
  background: #F4D63D;
  transform: scale(0, 1);
  transform-origin: left top;
  transition: transform .3s;
}
#gnavi .gnavi_li:hover span::after {
  transform: scale(1, 1);
}

/*-----------------------------------------------------------
ドロップダウンメニュー
-----------------------------------------------------------*/

.dropmenu{
  *zoom: 1;
  list-style-type: none;
  margin:20px 0 0 0 
}


.dropmenu:before, .dropmenu:after{
  content: "";
  display: table;
}
.dropmenu:after{
  clear: both;
}


.dropmenu li{
  position: relative;
}


/*子メニュー*/

.dropmenu li ul{
  position: absolute;
  top: 100%;
  left: 0;
  margin: 0;
  padding: 0;
  width:168px;
  box-shadow:1px 1px 3px 1px #444444;
  -moz-box-shadow: 1px 1px 3px 1px #444444;
  -webkit-box-shadow:1px 1px 3px 1px #444444;
}

.dropmenu li ul li {
    height: 50px;
    background-color: #fff;
    text-align: center;
    border-bottom: 1px solid #AAAAAA;
    -webkit-transition: 0.1s linear;
    -moz-transition: 0.1s linear;
    transition: 0.1s linear;
    display: table;
    width: 100%;
}

.dropmenu li ul li a {
    text-align: center;
    font-weight: 500;
    font-size: 1.4rem;
    display: table-cell;
    vertical-align: middle;
    line-height: 1.8rem;
}

#fade-in2 li ul{
  opacity: 0;
  top: 20px;
  visibility: hidden;
  transition: .5s;
  z-index:1
}


#fade-in2 li:hover ul{
  top: 60px;
  visibility: visible;
  opacity: 1;
}

.dropmenu li ul li:hover{background-color:#F4D63D}


#menu_overlay {
    display: none;
    position: fixed;
    top: 85px;
    left: 0;
    width: 100%;
    height: 100vh;
    background: #000;
    filter: alpha(opacity=30);
    -moz-opacity: 0.3;
    opacity: 0.3;
    z-index: 1;
    overflow: hidden;
    -webkit-transition: 0.3s linear;
    -moz-transition: 0.3s linear;
    transition: 0.3s linear;
}




/*-----------------------------------------------------------
メニューボタン
-----------------------------------------------------------*/

#menu_btn {
    position: absolute;
    margin-top: 20px;
    z-index: inherit;
    right: 0%;
    z-index: 100;
}


.menu-trigger,
.menu-trigger span {
  display: inline-block;
  transition: all .4s;
  box-sizing: border-box;
}
.menu-trigger {
    position: relative;
    width: 32px;
    height: 26px;
}

.menu-trigger span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: #333;
  border-radius: 0;
}
.menu-trigger span:nth-of-type(1) {
  top: 0;
}
.menu-trigger span:nth-of-type(2) {
  top: 11px;
}
.menu-trigger span:nth-of-type(3) {
  bottom: 0;
}

.menu-trigger span:nth-of-type(2)::after {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  width: 100%;
  height: 3px;
  background-color: #333;
  border-radius: 4px;
  transition: all .4s;
}

.menu-trigger > p {
    position: absolute;
    font-size: 1.1rem;
    bottom: -16px;
}

.menu-trigger .text_close{display:none }

/*active時のスタイル*/

.menu-trigger.active span{ background-color:#fff}
.menu-trigger.active span:nth-of-type(1) {
  transform: translateY(20px) scale(0);
  background-color:#fff
}
.menu-trigger.active span:nth-of-type(2) {
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);background-color:#fff
}
.menu-trigger.active span:nth-of-type(2)::after {
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);background-color:#fff
}
.menu-trigger.active span:nth-of-type(3) {
  transform: translateY(-20px) scale(0);background-color:#fff
}


.menu-trigger.active > p{ color:#fff !important}
.menu-trigger.active .text_menu{ display:none}
.menu-trigger.active .text_close{ display:block !important}

/*-----------------------------------------------------------
#header_tb TB用ヘッダー
-----------------------------------------------------------*/


/*TB用ヘッダー*/


#header_tb {
    position: relative;
    z-index: 10;
    width: 100%;
    height: 60px;
    background: #fff;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    padding: 1% 2%;
    position: fixed;
    top: 0;
}

#header_tb :is(h1,:where(.hx1)) {
    width: 130px;
    height: 56px;
    margin: 10px 0 0 0;
    z-index: 0;
}

/*ナビ部分*/


#header_tb nav {
    display: none;
    position: absolute;
    top: 60px;
    width: 100%;
    background: #fff;
    left: 0;
}

#header_tb header nav ul{
	display: block;
	margin: 0 auto;
	width: 90%;

}
#header_tb header nav ul li{
	margin: 0 auto;
	text-align: center;
	border-bottom: 1px solid #fff;
}
#header_tb header nav ul li:last-child{
	border: none;
}
#header_tb header nav ul li a{
	display: block; 
}	
#header_tb nav .tbnavlist {
    margin: auto;
    overflow-x: hidden;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    height: 88vh;
}
#header_tb nav .tbnavlist > li > a{
    padding: 14px 4%;
	display:block
}

#header_tb .arrow{
    position: relative;
    display: inline-block;
    padding: 0 0 0 16px;
    color: #000;
    vertical-align: middle;
    text-decoration: none;
}

#header_tb .arrow::before,
#header_tb .arrow::after{
    position: absolute;
    top: 0;
    bottom: 0;
    right: 5%;
    margin: auto;
    content: "";
    vertical-align: middle;
}


#header_tb .sample5-2::before {
    right: 5%;
    width: 9px;
    height: 9px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

#header_tb .tbnavlist_child .sample5-2::before {
    border-top: 2px solid #333;
    border-right: 2px solid #333;
}



#header_tb nav .tbnavlist .tbnavlist_parent{background-color:#356FA1; color:#fff; border-bottom:1px solid #fff}
#header_tb nav .tbnavlist .tbnavlist_child{background-color:#fff; color:#333; border-bottom:1px solid #ccc; font-weight:300}

#header_tb #nav_toggle {
    display: block;
    width: 40px;
    height: 40px;
    position: relative;
    top: 4px;
    z-index: 100;
    margin-left: auto;
}
#header_tb #nav_toggle div:not(:where(.hx1)) {
  position: relative;
}
#header_tb #nav_toggle span {
    display: block;
    height: 3px;
    background: #222;
    position: absolute;
    width: 90%;
    left: 0;
    -webkit-transition: 0.5s ease-in-out;
    -moz-transition: 0.5s ease-in-out;
    transition: 0.5s ease-in-out;
}
#header_tb #nav_toggle span:nth-child(1){
  top:0px;
}
#header_tb #nav_toggle span:nth-child(2){
  top:12px;
}
#header_tb #nav_toggle span:nth-child(3){
  top:24px;
}

/*開閉ボタンopen時*/
.open #nav_toggle span:nth-child(1) {
	  top: 12px  !important;
	 -webkit-transform: rotate(135deg);
	  -moz-transform: rotate(135deg);
	  transform: rotate(135deg);
  }
  .open #nav_toggle span:nth-child(2) {
	  width: 0  !important;
	  left: 50%;
  }
  .open #nav_toggle span:nth-child(3) {
	  top: 12px !important;
	  -webkit-transform: rotate(-135deg);
	  -moz-transform: rotate(-135deg);
	  transform: rotate(-135deg);
  }


/*TBメニュー　SNS*/

.headertb_sns {
    margin: 30px 3% 20px 3%;
}
.headertb_sns ul {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    -js-display: flex;
    width: 90%;
}
.headertb_sns ul li {
    width: 46%;
    margin: 0 2% 5px 0;
}
.headertb_sns ul li a{border:1px solid #666; display:block; padding:12px 0; position:relative}
.headertb_sns ul li a p {
    background-size: contain;
    padding-left: 35px;
    margin: auto;
    background-repeat: no-repeat;
    background-position: 38% center;
    text-align: center;
}
.headertb_sns ul li a.sns01 p {background-image: url(image/header/sns01tb.png) }
.headertb_sns ul li a.sns02 p {background-image: url(image/header/sns02tb.png) }


/*TBメニュー tel&contact*/

.headertb_btn {
    background-color: #F4D63D;
    position: fixed;
    top: 60px;
    width: 100%;
    z-index: 2;
	display:table
}

.headertb_btn a {
    width: 33.3333%;
    display: table-cell;
    text-align: center;
    padding: 14px 0;
}
.headertb_btn .online{border-right:2px solid #fff ; border-left:2px solid #fff}
.headertb_btn .contact{border-right:2px solid #fff }

.headertb_btn a p {
    background-size: contain;
    padding-left: 35px;
    margin: auto;
    background-repeat: no-repeat;
    text-align: center;
	font-weight:400
}
.headertb_btn a.tel p {background-image: url(image/header/teltb.png) ; background-position: 44% center;}
.headertb_btn a.contact p {background-image: url(image/header/contacttb.png) ; background-position: 27% center;}
.headertb_btn a.online p {background-image: url(image/header/onlinetb.png) ; background-position: 27% center;}
#header_tb .areacomment {
	font-size: 1.1rem;
    letter-spacing: -0.1rem;
    font-weight: 400;
    padding: 2px 0 0 3px;
}
/*-----------------------------------------------------------
モーダルメニュー
-----------------------------------------------------------*/


/* 閉じているときのスタイル */

.modal_menu {
    position: fixed;
    display: table;
    top: 0;
    left: 0;
    background: rgba(22,105,165,.9);
    -webkit-transition: all .5s;
    transition: all .5s;
    visibility: hidden;
    opacity: 0;
	width:100%;
	height:100vh
}

.modal_menu .modal_box li a {
    color: #fff;
    font-size: 1.8rem;
    font-weight: 300;
}


.modal_menu li a:hover {text-decoration:underline}

/* 開いた時のスタイル */

.open .modal_menu {
    cursor: url(../images/cross.svg),auto;
    -webkit-transition: all .5s;
    transition: all .5s;
    visibility: visible;
    opacity: 1;
    z-index: 99;
    -webkit-transition: all .5s;
    transition: all .5s;
}

.modal_menu{display:table}
.modal_content{display:table-cell; vertical-align:middle}
.modal_content .content_in {
    width: 100%;
    max-width: 1060px;
    margin: auto;
    overflow: hidden;
}

.modal_content :is(h1,:where(.hx1)) img{ height:auto; width:100%;max-width:226px;}


.modal_content .modal_logo {
    max-width: 100px;
    margin: auto;
}

.modal_wrap {
    overflow: hidden;
    width: 100%;
    margin-top: 60px;
    margin-left: auto;
    margin-right: auto;
}

.modal_box {
    float: left;
    width: 30%;
    margin: 0 5% 0 0;
}

.modal_box03{float:right; margin:0 0 0 0}

.modal_menu .modal_box li {
    color: #fff;
    padding: 0 0 20px 0;
}


.modal_menu .modal_box li:last-child a{border-right:none}

.modal_menu :is(h1,:where(.hx1)) {
    text-align: center;
    margin-bottom: 40px;
}

.modal_menu .modal_box h2:not(:where(.hx1)) {
    color: #fff;
    margin-bottom: 10px;
    letter-spacing: 0.3rem;
    font-size: 1.8rem;
    border-bottom: 1px solid #fff;
    padding-bottom: 10px;
}


.modal_menu .arrow{
    position: relative;
    display: inline-block;
    padding: 0 0 0 16px;
    color: #000;
    vertical-align: middle;
    text-decoration: none;
    font-size: 15px;
}
.modal_menu .arrow::before,
.modal_menu .arrow::after{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    content: "";
    vertical-align: middle;
}


.modal_menu .modal_box .sample5-1::before {
    left: 0;
    width: 7px;
    height: 7px;
    border-top: 1px solid #fff;
    border-right: 1px solid #fff;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}



.modal_sns {
    overflow: hidden;
    display: table;
}

.modal_sns li {
    text-align: center;
    padding: 0 6px !important;
    display: table-cell;
}

.modal_sns li a {
    display: block;
}

.modal_sns li a img {
    display: block;
    margin: auto;
    max-width: 26px;
    height: auto;
}




/*-----------------------------------------------------------
top
-----------------------------------------------------------*/

#top_wrap .title01 img{ height:auto; width:100%;max-width:334px; display:block; margin:auto}

#topImage {
    position: relative;
    width: 100%;
    min-height: 100%;
    height: 100vh;
    background-color: #000;
    overflow: hidden;
    margin-top: 70px;
}

#top_slider {
    height: 100vh;
}


.top_slides ul li {
    position: relative;
    overflow: hidden;
    width: 100%;
    text-align: center;
}


.top_logo {
    display: table;
    position: absolute;
    z-index: 1;
    height: 100%;
    width: 100%;
}

.top_logo :is(h1,:where(.hx1)){text-align:center; vertical-align:middle; display:table-cell}


/*news*/

.top_section{ padding:80px 0}
#top_news {
    background-image: url(image/top/back01.jpg);
    background-size: cover;
}
#top_news :is(h1,:where(.hx1)){display:inline-block}
#top_news .postlist {
	width:60%;
}

#top_news .postlist li {
    margin: 0 0 14px 0;
}
.postlist .text_block{background-color:#fff; padding:15px}

#top_news .top_news_title{float:left}
#top_news .postlist{float:left}
#top_news .block_btn{float:left; margin-bottom:3px}
#top_news .top_news_title {
    float: left;
    margin: 36px 5% 0 0;
}
#top_news .block_news .btn01{max-width:260px}

#top_news .postlist .tag{display:table-cell; padding-right:10px}
#top_news .postlist .title{display:table-cell; vertical-align:middle;}

#top_news .postlist .title h2:not(:where(.hx1)) {
    text-decoration: underline;
    display: inline-block;
    /* padding-bottom: 5px; */
}
#top_news .postlist span {
    margin-right: 10px;
    text-decoration: none !important;
    display: inline-block;
}


#top_news .btn_yazi02{ margin-top:20px; background-color:#E95E61}
#top_news .btn_yazi02:before {
    content: "";
    background-image: url(image/top/2_icon01.png);
    height: 23px;
    width: 32px;
    position: absolute;
    left: 20px;
    background-repeat: no-repeat;
    top: 28%;
    bottom: 0;
    vertical-align: middle;
}
#top_news .btn_yazi02:hover{background-color:#ED2C31}


/*concept*/

.block_concept {
    text-align: center;
    padding-top: 140px;
}

.block_concept h3{ margin-bottom:20px}

.block_concept .conceptlist {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    -js-display: flex;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin: auto;
	max-width:1000px
}
.block_concept .conceptlist li {
    margin: 30px 2% 50px 2%;
    float: left;
    width: 29%;
}

/*allmenu リフォーム全メニュー*/

#top_menu .menulist{
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    -js-display: flex;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin: 0 auto 30px auto;
	max-width:1200px
}
#top_menu .menulist01 {
    margin: 50px auto;
}
#top_menu .menulist li {
    margin: 0 2.48888888% 0 0;
    width: 18%;
}

#top_menu .menulist li img {
    width: 100%;
    height: auto;
    max-width: 206px;
    margin: auto;
}
#top_menu .menulist li:last-child{margin: 0 0 0 0;}
#top_pack .btn_yazi02:after{top:42%}
#top_pack .block_flow{margin-top:60px}

#top_pack .block{overflow: hidden}
#top_pack .block01 {
    margin-bottom: 60px;
}
#top_pack a.banner {
    max-width: 800px;
    width: 67%;
    box-shadow: 1px 1px 6px #aaaaaa;
    -moz-box-shadow: 1px 1px 6px #aaaaaa;
    -webkit-box-shadow: 1px 1px 6px #aaaaaa;
    filter: progid:DXImageTransform.Microsoft.Shadow(color="#aaaaaa", Direction=145, Strength=5);
    /* border-radius: 23px; */
    margin: 0 5px 5px 0;
}

/*project エリア紹介*/

#top_project {
    background: url(image/top/7_back01.jpg) center no-repeat;
    background-size: auto;
    display: table;
    width: 100%;
	background-attachment: fixed;
	padding:60px 0
}
#top_project :is(h1,:where(.hx1)){margin:10px 0 30px 0 } 
#top_project .box_text{
	display:table-cell;
	vertical-align:middle;
	text-align:center
}

#top_project :is(h1,:where(.hx1)) img{ height:auto; width:100%;max-width:525px;}


/*contents*/


.contentslist {
    max-width: 1020px;
    width: 100%;
    margin: 0 auto 20px auto;
}

.contentslist li {
    position: relative;
    display: block;
    margin: 0 2.66666667% 0 0;
    text-align: center;
    text-align: center;
}

.contentslist li a {
    display: block;
    background-color: #F4D63D;
    box-shadow: 4px 4px 0px -1px #BBBBBB;
    border-radius: 14px;
    padding: 28px 0;
    position: relative;
}
.contentslist li a:hover{background-color:#FEF000}

.contentslist_li01{width:100%}
	
	
.contentslist01 .abimage {
    right: 17%;
    top: 21%;
}
	
.contentslist02 {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    -js-display: flex;
    display: flex;
    flex-wrap: wrap;
}

.contentslist02 li {
    margin: 0 2.666666% 0 0;
    width: 23%;
}


.contentslist li:last-child{ margin-right:0}
#top_contents h2:not(:where(.hx1)) img{ height:auto; width:100%;max-width:395px;}


/*sns ボタンとバナー*/

#top_sns .box_wrap{
	max-width: 1020px;
    width: 100%;
    margin: 0 auto 0 auto;
	overflow:hidden
}
#top_sns .box_wrap .box_contact {
    float: left;
    border: 1px solid #eee;
    width: 46%;
    background-color: #fff;
    padding: 5px;
}
#top_sns .box_wrap .box_friend {
    background-color: #fff;
    text-align: center;
    float: right;
    width: 45%;
    min-height: 550px;
    padding: 50px 30px 0 30px;
    border: 1px solid #EEEEEE;
}
#top_sns .box_wrap .box_friend .btn_yazi01 {
    margin-top: 20px;
}
#top_sns .box_wrap .box_friend :is(h1,:where(.hx1)){margin:20px auto 20px auto}



#top_sns .box_wrap .box_contact .wrap {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    -js-display: flex;
    display: flex;
    flex-wrap: wrap;
    width: 80%;
    margin: 20px auto;
}

#top_sns .box_wrap .box_contact .sns_btn {
    display: block;
    background-color: #F4D63D;
    box-shadow: 4px 4px 0px -1px #BBBBBB;
    border-radius: 10px;
    padding: 24px 0;
    position: relative;
	max-width:150px; 
	text-align:center;
	width:40%;
	margin:0 5%
}

/*-----------------------------------------------------------
footer
-----------------------------------------------------------*/


#footer{padding:100px 0;background:url(image/footer/back.jpg) center no-repeat; background-size:cover;}
#footer .copy{margin-top:20px}
#footer .block_wrap {
    max-width: 1060px;
    width: 100%;
    margin: auto;
	overflow:hidden;
	font-weight: 400;
}

#footer .block_left :is(h1,:where(.hx1)) img{ width:100%; height:auto; max-width:240px}
#footer .block_left{
	color:#fff;
	float:left;
	width:32%
}

#footer .block_right {
    float: right;
    width: 65%;
}

#footer address {
    font-style: normal;
    color: #fff;
    margin: 10px 0 6px 0;
}
.footer_sns {
    letter-spacing: 0.2rem;
	color:#ffff
}
.footer_tel{ margin:18px 0}
.footer_sns .sns_line {
    background: url(image/footer/sns01.png) center left no-repeat;
    padding-left: 25px;
    margin-right: 10px;
}
.footer_sns .sns_mail{
	background:url(image/footer/sns02.png) center left no-repeat;
	padding-left:25px;
	margin-right: 10px;
}
.footer_sns .sns_tel{
	background:url(image/footer/sns03.png) center left no-repeat;
	padding-left:25px;
}

.footer_link{
	width:100%;
	overflow:hidden
}

.footer_link li {
    max-width: 210px;
    margin: 0 20px 20px 0;
    float: left;
    display: table;
}
.footer_link li a{
	display: table-cell;
	vertical-align:middle;
	background-color:#fff;
	border:2px solid #DDDDDD
}
.footer_link li a img{display: block}	
/*TOPへ戻るボタン*/


#page-top {
    position: fixed;
    right: 30px;
    font-size: 77%;
    z-index: 103;
    padding: 0 !important;
    display: table;
    bottom: 30px;
	box-shadow:4px 4px 0px -1px #666666;
}
#page-top a {
    background-color: #F4D63D;
    text-align: center;
    width: 54px;
    height: 54px;
    display: block;
}

#page-top a:hover{background-color:#FEF000}


/*-----------------------------------------------------------
house 規格住宅 archive 一覧
-----------------------------------------------------------*/


#house .page_image{background-image:url(image/house/page_image.jpg)}
#house02 h2:not(:where(.hx1)) , #renovation02 :is(h1,:where(.hx1)) , #custom02 :is(h1,:where(.hx1)){margin:20px auto 30px auto}
#house02 .text_style03 , #custom02 .text_style03{margin-bottom:30px}



/*IE10以降に適用されるCSSハック*/
@media all and (-ms-high-contrast:none){
	

#house .houselist li h2:not(:where(.hx1)) span{
    font-family: "メイリオ", Meiryo, sans-serif !important;
	font-size:2.2rem !important;
	padding:3px 5px 0 5px
}


}


#house .houselist {
	display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    -js-display: flex;
    display: flex;
    flex-wrap: wrap;
    width: 72%;
    margin: auto;
    max-width: 1400px;
}

#house .houselist li {
    position: relative;
    display: block;
    width: 31%;
    margin: 0 3.5% 0 0;
    background: #fff;
    max-width: 420px;
    border: 2px solid #333333;
}


#house .houselist li:nth-child(3n) {
    margin-right: 0;
}
#house .houselist .text_block {
    background-color: #fff;
    padding: 5%;
    min-height: 228px;
}
#house .houselist li h2:not(:where(.hx1)) span {
    background: #F4E727;
    color: inherit;
    line-height: 170%;
    padding: 0px 5px 2px 5px;
}


#house .houselist li:nth-child(even) h2:not(:where(.hx1)) span{background:#333333;  color:#fff}

#house .houselist a{
    height: 100%;
}
#house .house_price{margin:5px 0}
#house .house_copy {
    padding-top: 10px;
    border-top: 1px solid #666666;
    margin-top: 10px;
}

#house .houselist li:hover .text_block * , #house .houselist li:hover .text_block h2:not(:where(.hx1)) {opacity:0.8}


.lineup .worklist {
	display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    -js-display: flex;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin: 0 auto 60px auto;
	height;100% !important
}

.lineup .worklist li {
    position: relative;
    display: block;
    width: 48%;
    margin: 0 3.66666667% 0 0;
	height:auto !important
}

.lineup .worklist li  .text_block {
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: rgba(51,51,51,0.6);
    width: 100%;
    z-index: 1;
    padding: 5px 10px 0 20px;
}


.lineup .worklist li:nth-child(even) {
    margin-right: 0;
}

/*-----------------------------------------------------------
house 規格住宅 single詳細
-----------------------------------------------------------*/


#house_single01 , #renovation01 , #custom01{
    height: 100vh;
	background-color:#000
}

#house_single01 .main_image{
    background-size: cover;
    position: relative;
    height: 100%;
    display: table;
    width: 100%;
	opacity:0.8
}


#house_single01 .title , #renovation01 .title , #custom01 .title {
    position: absolute;
    text-align: center;
    margin: auto;
    top: 45%;
    z-index: 1;
    vertical-align: middle;
    width: 100%;
}


#house_single01 #scroll , #renovation #scroll , #custom01 #scroll{
    position: absolute;
    bottom: 50px;
    margin: auto;
    right: 0;
    left: 0;
}



#house_single .planimage .block_right:before{ background:none}

#house_single03 .block_wrap {
display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    -js-display: flex;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin: 0 auto 40px auto;
}

#house_single03 .block_wrap .block_half {
    position: relative;
    display: block;
    width: 50%;
}

#house_single03 .block_wrap .text_block .inner{padding:10% 2% 0 10%}

#house_single .option_block {
    width: 100%;
    margin: 100px auto 0 auto;
    max-width: 1300px;
    border: 2px solid #222;
    padding: 60px 5% 60px 5%;
}

#house_single .option_block .abimage{text-align:center; top:-30px; right:0; left:0}


#house_single .house_option ul {
display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    -js-display: flex;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin: 30px auto 0 auto;
}
#house_single .house_option ul li {
    position: relative;
    display: block;
    width: 23%;
	margin:0 1%
}

#house_single .vr_block{margin-top:140px}
#house_single .vr_block .image_box{max-width:869px; margin:50px auto 40px auto}
#house_single .vr_block :is(h1,:where(.hx1)){margin-bottom:30px}
#house_single .vr_block .btn02 , .voice_single .link_block .btn02 {
    background-color: #FEF000;
    border: 2px solid #333;
    display: block;
    max-width: 600px;
    margin: 30px auto 0 auto;
    padding: 20px;
    position: relative;
}



#house_single .vr_block .btn02 p.arrow , .voice_single .link_block .btn02 p.arrow{
    position: relative;
    display: inline-block;
    padding: 0 8% 0 5%;
}


#house_single .vr_block .btn02 p.arrow:before , .voice_single .link_block .btn02 p.arrow:before {
    content: "";
    position: absolute;
    background: url(image/common/yazi04.png) no-repeat right;
    right: 0;
	top:25%;
    width: 20px;
    height: 16px;
}

#house_single .vr_block .btn02:hover , .voice_single .link_block .btn02:hover{background-color:#FFF97B}



.vr_block:before {
    content: "";
    width: 0;
    height: 0;
	border-left: 70px solid transparent;
	border-right: 70px solid transparent;
	border-top: 50px solid #F6F6F6;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    margin: auto;
}



.lineup:before {
    content: "";
    width: 0;
    height: 0;
    border-left: 70px solid transparent;
    border-right: 70px solid transparent;
    border-top: 50px solid #F6F6F6;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    margin: auto;
}


/*IE10以降に適用されるCSSハック*/
@media all and (-ms-high-contrast:none){
	
#house_single .vr_block .btn02 , .voice_single .link_block .btn02 {
    padding: 22px 18px 18px 18px; 
    position: relative;
}

#house_single .vr_block .btn02 p.arrow:before , .voice_single .link_block .btn02 p.arrow:before {
	top:15%;
}


}

/*-----------------------------------------------------------
custom フルオーダー
-----------------------------------------------------------*/


#custom .main_image {
	background-image:url(image/custom/page_image.jpg);
    background-size: cover;
    position: relative;
    height: 100%;
    display: table;
    width: 100%;
	opacity:0.7
}

#custom02 :is(h1,:where(.hx1)) img{max-width:580px}

#custom01 .price {
    display: inline-block;
    background-color: rgba(216,2,129,0.8);
    padding: 3px 14px;
    margin-top: 20px;
}

#custom .back {
    background-image: url(image/custom/back.jpg);
    background-size: cover;
    background-position: center;
}
#custom .customlist > li{padding:80px 0}

#custom .customlist li .block_wrap {
    max-width: 1200px;
    width: 100%;
    margin: auto;
	position:relative;
	padding-top:20px
}

#custom .customlist li .abimage{ top:0; left:24px; z-index:1}

#custom .customlist .text_block {
    position: absolute;
    bottom: 0;
    margin: auto;
    right: 0;
    left: 0;
}
#custom .customlist .text_block h2:not(:where(.hx1)){margin-bottom:20px}
#custom .customlist .text_block .inner {
    background-color: #fff;
    width: 76%;
    margin: auto;
    text-align: center;
    padding: 30px;
    box-shadow: 1px 1px 2px 1px #888888;
    -moz-box-shadow: 1px 1px 2px 1px #888888;
    -webkit-box-shadow: 1px 1px 2px 1px #888888;
}


#custom .customlist .top_block {
    position: relative;
    padding-bottom: 120px;
    margin-bottom: 60px;
}

#custom .customlist .stylelist {
	display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    -js-display: flex;
    display: flex;
    width: 90%;
    justify-content: center;
    margin: 30px auto;
}

#custom .customlist .stylelist li {
    width: 30%;
    margin: 0 1.8555%;
}

#custom .customlist .stylelist li  p{ margin-top:10px}
#custom .customlist > li:nth-child(even) .inner {
    background-color: #333333;
}

#custom .customlist > li:nth-child(even) {
    background-color: #fff;
}


/*IE10以降に適用されるCSSハック*/
@media all and (-ms-high-contrast:none){
	
#custom01 .price {
    padding: 10px 14px 0 14px;
}
	
}

/*-----------------------------------------------------------
renovation リノベーション住宅
-----------------------------------------------------------*/


#renovation01 .main_image {
	background-image:url(image/renovation/page_image.jpg);
    background-size: cover;
    position: relative;
    height: 100%;
    display: table;
    width: 100%;
	opacity:0.8
}

#renovation02 .text_style03{margin-bottom:30px}


#renovation03.back03 {
    background: url(image/common/back02b.jpg) center repeat;
}

#renovation03 ul{
	display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    -js-display: flex;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin: 60px auto 0 auto;
}

#renovation03 ul li {
    position: relative;
    display: block;
    width: 31%;
    margin: 0 3.4444% 20px 0;
}
#renovation03 ul li:nth-child(3n) {
    margin-right: 0;
}

#renovation03 ul li h2:not(:where(.hx1)){margin-top:10px}
#renovation03 .no{ display:block; margin-bottom:10px}

#renovation04 .block_wrap{background-color:#000; padding:1%}
#renovation04 .text_block{margin:50px auto}
#renovation04 .text_block h2:not(:where(.hx1)){ margin-bottom:20px}

#renovation04 .btn02 {
    background-color: #FEF000;
    border: 2px solid #333;
    display: block;
    max-width: 300px;
    margin: 30px auto 0 auto;
    padding: 14px;
    position: relative;
}
#renovation04 .btn02:hover{background-color:#FFF97B}		
	
		
/*IE10以降に適用されるCSSハック*/
@media all and (-ms-high-contrast:none){
	
#renovation04 .btn02 {
    padding:  18px 14px 10px 14px;
}
}


/*-----------------------------------------------------------
plan archive パックプラン 一覧
-----------------------------------------------------------*/

#plan_archive01 .planlist li{ margin:0 auto 60px auto}
#plan_archive01 .planlist .block_wrap {
    overflow: hidden;
    border-radius: 15px;
    box-shadow: 4px 4px 0px -1px #666666;
    padding: 40px;
    width: 96%;
    margin: auto;
}

#plan_archive01 .planlist{margin:40px auto }
#plan_archive01 .planlist li:nth-child(odd) .block_wrap { background-color: #F4D63D;}
#plan_archive01 .planlist li:nth-child(even) .block_wrap{background-color:#8EBAC4}

#plan_archive01 .planlist .block_text{ float:left; width:52%}

#plan_archive01 .icon_list {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    -js-display: flex;
    display: flex;
    flex-wrap: wrap;
    margin: 0px auto 20px auto;
    justify-content: center;
}

#plan_archive01 .planlist .block_text .text_style02{ width:92%; margin:auto}
#plan_archive01 .icon_list li {margin: 0 10px 0 0;}
#plan_archive01 .icon_list li:last-child{margin-right:0 !important}
#plan_archive01 .box_price {
    position: relative;
    margin: 14px auto 30px auto;
}

#plan_archive01 .box_price p {
    display: inline-block;
    border-bottom: 3px solid #E95E61;
	position:relative
}

#plan_archive01 .box_price span {
    display: block;
    padding-top: 5px;
}

#plan_archive01 .icon_list img{ max-width:100px; height:auto; width:100%}
#plan_archive01 .icon_list .icon_list_maker img{margin-top:15px}


#plan_archive01 .planlist .block_image {
    max-width: 460px;
    float: right;
    width: 45%;
}
#plan_archive01 .planlist .block_image .image {
    width: 50%;
    height: 230px;
    max-width: 230px;
    background-repeat: no-repeat;
    background-size: cover;
	float:left
}

#plan_archive01 .planlist .block_image span {
    padding: 2px 10px;
    margin-right: 10px;
    background-color: #E95E61;
    color: white;
    font-size: 1.5rem;
}

#plan_archive01 .btn01{ background-color:#F4D63D !important; margin-top:30px}

#plan_archive .box_price .abimage {
    top: 5px;
    right: -110px;
    max-width: 100px;
    height: auto;
    width: 100%;
}


/*-----------------------------------------------------------
plan single パックプラン 詳細
-----------------------------------------------------------*/


#plan_single01 .block_image{ 
	height:400px; width:100%; margin:0 auto 40px auto;display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    -js-display: flex;
    display: flex;
    flex-wrap: wrap;
	justify-content: center;
}
	
#plan_single01 .block_image > div:not(:where(.hx1)) {
    width: 25%;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
}


#plan_single01 .box_tag {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    -js-display: flex;
    display: flex;
    flex-wrap: wrap;
	margin:auto;
    justify-content: center;

}

#plan_single01  :is(h1,:where(.hx1)){margin:30px auto 14px auto}


#plan_single01 .box_tag span {
    padding: 2px 10px;
    display: inline-block;
    margin-right: 10px;
    background-color: #E95E61;
    color: white;
    font-size: 1.8rem;
}

#plan_single01 .box_price {
    margin: 0 auto 30px auto;
    padding-top: 10px;
}

#plan_single01 .box_price .abimage {
    top: 0;
    right: -160px;
}
#plan_single01 .box_price p{
    display: inline-block;
    border-bottom: 3px solid #E95E61;
	position:relative
}
#plan_single01 .box_price span {
    display: block;
    padding-top: 5px;
}


#plan_single01 .icon_list{
	display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    -js-display: flex;
    display: flex;
    flex-wrap: wrap;
    margin: 40px auto 24px auto;
    justify-content: center;
}
#plan_single01 .icon_list li img{ height:auto; width:100%;max-width:130px;}

#plan_single01 .icon_list li{margin:0 15px}
div:not(:where(.hx1)).box_title01{ display:table; padding:20px 0; width:100%}
div:not(:where(.hx1)).box_title01 :is(h1,:where(.hx1)){ display:table-cell; vertical-align:middle}


#plan_single02 .product_list > li{padding:60px 0}
#plan_single02 .product_list01{background-color:#E9F2F3}
#plan_single02 .product_list02{background-color:#FDF8F0}
#plan_single02 .product_list03{background-color:#FFF9F9}
#plan_single02 .product_list04{background-color:#E7EFF8}


#plan_single02 .product_list h2:not(:where(.hx1)) {padding: 10px 0 10px 46px;}
#plan_single02 .product_list01 h2:not(:where(.hx1)){background:url(image/plan/no01.png) no-repeat left center; }
#plan_single02 .product_list02 h2:not(:where(.hx1)){background:url(image/plan/no02.png) no-repeat left center; }
#plan_single02 .product_list03 h2:not(:where(.hx1)){background:url(image/plan/no03.png) no-repeat left center; }
#plan_single02 .product_list04 h2:not(:where(.hx1)){background:url(image/plan/no04.png) no-repeat left center; }


#plan_single02 .block_wrap , .box_osusume{ max-width:1000px; margin:auto; width:100%; overflow:hidden}
#plan_single02 .block_image, #reform_single02 .block_image {
    margin: 0 auto 20px auto;
    width: 100%;
    position: relative;
    background-color: #fff;
    /* background-size: cover; */
    /* max-width: 480px; */
    /* border-radius: 10px; */
    text-align: center;
}
#plan_single02 .product_list .icon_maker img{ height:auto; width:100%;max-width:100px;}
#plan_single02 .product_list .icon_maker{ top:10px; left:10px}

#plan_single02 :is(h1,:where(.hx1)) img{ height:auto; width:100%;max-width:269px;}


#plan_single02 .block_image .abimag , #reform_single02 .block_image .abimage{ top:5px; left:5px}


#plan_single02 .box_osusume{
    background-color: #fff;
    margin-top: 40px;
    padding: 30px;
}
#plan_single02 .box_osusume h3 img{ height:auto; width:100%;max-width:234px;}
#plan_single02 .box_osusume ul{ width:98%; margin:auto}
#plan_single02 .box_osusume ul li {
    border-bottom: 1px solid #DDDDDD;
    color: #336C9F;
    background: url(image/plan/icon01.png) no-repeat left center;
    padding: 10px 0 10px 26px;
}


/*-----------------------------------------------------------
flow リフォームの流れ
-----------------------------------------------------------*/

body#flow { background-color:#FDF8F0 !important}/* ---- 黄色背景 ---- */
#flow .flowlist{ max-width:1160px; margin:auto}
#flow .flowlist li{margin: 0 auto 30px auto; position: relative; padding:40px 0 80px 0}
#flow .flowlist li .block_wrap {
    background-color: #fff;
    border: 3px solid #DDDDDD;
    padding: 60px 40px 40px 40px;
    overflow: hidden;
}
#flow .flowlist .flowlist_li_orico .block_wrap {
    padding: 30px;
    margin-bottom: 30px;
}
.flowlist_li_orico p img{ height:auto; width:100%;max-width:665px;}
.flowlist_li_orico h2:not(:where(.hx1)) img{ height:auto; width:100%;max-width:569px;}
#flow .flowlist li > .abimage {
    top: 0;
    right: 0;
    left: 0;
    margin: auto;
	max-width:95px
}
#flow .flowlist .block_image {
    float: left;
    position: relative;
    width: 40%;
    max-width: 420px;
    text-align: center;
    padding: 10px 0 0 10px;
}
#flow .flowlist .block_image .no{left:0; top:0; position:absolute}
#flow .flowlist .block_text{float:right; position:relative; width:56%; margin-top:18px}
#flow .flowlist h2:not(:where(.hx1)){margin-bottom:18px}
#flow .flowlist_li01 .btn01{margin: 20px 0 0 0;}
#flow .flowlist li:after{
	content:"";
	width:113px;
	height:41px;
	position:absolute;
	right:0;
	left:0;
	bottom:0;
	background: url(image/flow/yazi01.png) no-repeat center;
	margin:auto	
}

#flow .flowlist_li07{padding: 30px 0 140px 0 !important; margin: 0 auto 40px auto !important; }
#flow .flowlist_li07:after{
	height:97px!important;
	background: url(image/flow/yazi02.png) no-repeat center !important;
}
#flow .flowlist_li08:after {background:none !important}
#flow .flowlist_li03:after{background:none !important;}
#flow .flowlist_li03{padding: 40px 0 0px 0 !important; margin: 0 auto 20px auto!important; }


/*リフォームローン*/

#flow .flowlist_li_orico .block_wrap{border: 3px solid #F4D63D !important}
#flow .flowlist_li_orico .orange{color:#FD590C}
#flow .flowlist_li_orico .btn01 {
    width: 66%;
    max-width: 700px;
    margin: 10px auto 0 auto;
    /* padding-left: 50px; */
    font-weight: 600;
    font-size: 1.8rem;
    height: 60px;
    padding: 16px 0 16px 0px;
}



/*保証*/

#flow02{background-image: url(image/flow/back01.jpg); background-size:cover}
#flow02 :is(h1,:where(.hx1)){text-align:center}
#flow02 :is(h1,:where(.hx1)) img{ height:auto; width:100%;max-width:500px;}
#flow02 .securitylist{ max-width:1100px; width:100%; margin:50px auto}
#flow02 .securitylist li {
    background-color: #fff;
    border-top: 15px solid #F4D63D;
    padding: 40px;
    margin-bottom: 30px;
    min-height: 284px;
}
#flow02 .securitylist li .block_wrap{ overflow:hidden}
#flow02 h2:not(:where(.hx1)) {
    border-bottom: 3px solid #FEF000;
    display: inline-block;
    margin-bottom: 10px;
}

#flow02 .securitylist_li01 .block_text{float:left; width:55%}
#flow02 .securitylist .block_image {
    float: right;
    width: 39%;
    max-width: 382px;
}

#flow02 .securitylist_li01{width:100%}
#flow02 .securitylist_li02, #flow02 .securitylist_li03{width:48%}
#flow02 .securitylist_li02{float:left}
#flow02 .securitylist_li03{float:right}

/*-----------------------------------------------------------
reform リフォームメニュー（全面）
-----------------------------------------------------------*/

#reform_all01{ padding-top:80px}
.reformnavi{
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    -js-display: flex;
    display: flex;
    flex-wrap: wrap;
    margin: 60px auto;
	justify-content: center;
	max-width:740px
}

#reform_all .reform_all_btn {
    padding: 30px 0;
    text-align: center;
    background: #F4D63D;
    vertical-align: baseline;
    display: block;
    color: #fff;
    height: 80px;
    box-shadow: 4px 4px 0px -1px #666666;
    font-size: 2.0rem;
    position: relative;
}

.reformnavi .reformnavi_li01 {
    float: left;
    width: 48%;
    margin-right: 4%;
}
.reformnavi .reformnavi_li02 { float:right; width:48%; }
.reformnavi .reformnavi_li03 { float:none; width:100% !important; }
.reformnavi .reformnavi_li03 .reform_all_btn{background-color:#fff !important; border:2px solid #8EBAC4; margin-top:20px}


.btn_yazi_bottom:after {
    content: "";
    background-image: url(image/reform/all/yazi01.png);
    height: 8px;
    width: 14px;
    position: absolute;
    right: 14px;
    background-repeat: no-repeat;
    top: 48%;
    bottom: 0;
    vertical-align: middle;
}

.reformnavi_li03 .btn_yazi_bottom:after{background-image: url(image/reform/all/yazi02.png);}


#reform_all02 .abimage01  , #reform_all03 .abimage01{
    top: -32px;
    left: 0;
    right: 0;
    max-width: 83px;
    width: 100%;
    height: auto;
    margin: auto;
}
#reform_all .title01 img{ height:auto; width:100%;max-width:478px;}
#reform_all .block_reform h2:not(:where(.hx1)){margin:50px auto 14px auto}

#reform_all .block_reform .box_price p {
    display: inline-block;
    border-bottom: 3px solid #E95E61;
    position: relative;
	margin-bottom:10px
}

#reform_all .box_lawn {
    margin: 30px auto;
    display: table;
}
#reform_all .box_lawn .box_left {
    background-color: #E95E61;
    color: #fff;
    text-align: center;
    display: table-cell;
    vertical-align: middle;
    padding: 0 16px;
}
#reform_all .box_lawn .box_right {
    display: table-cell;
    vertical-align: middle;
    background-color: #fff;
    padding: 20px;
}
#reform_all .box_lawn .box_right dt {
    display: table-cell;
    vertical-align: middle;
    padding-right: 20px;
}
#reform_all .box_lawn .box_right dd{display:table-cell; vertical-align:middle}
#reform_all .box_lawn .box_right .month {
    background-color: #F4D63D;
    color: #444444;
    font-size: 1.8rem;
    border-radius: 100%;
    width: 50px;
    height: 50px;g
    text-align: center;
    float: left;
    display: table;
    vertical-align: middle;
    float: left;
    margin-right: 10px;
}
#reform_all .box_lawn .box_right .month p {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

#reform_all .box_lawn .box_right .price{float:left}

#reform_all .box_lawn .box_right .price p {
    border-bottom: 2px solid #E95E61;
}
#reform_all .image_size01 {
    height: auto;
    width: 100%;
    max-width: 417px;
    margin: 0 auto 30px auto;
    display: block;
}
#reform_all .block_gray{ background-color:#fff !important}

#reform_all .reform_content {
    float: left;
    width: 23%;
    margin-right: 2.5%;
}
#reform_all .reform_content .category {
    border: 1px solid #8EBAC4;
    margin: 20px 0 10px 0;
    display: table;
    width: 90%;
}
#reform_all .reform_content .category h4 {
    font-size: 1.6rem;
    font-weight: 400;
    display: table-cell;
    vertical-align: middle;
    text-align: left;
    width: 80%;
    padding: 2px 0 2px 4%;
}
#reform_all .reform_content > span{display: block; font-size:1.6rem; font-weight:300; margin-bottom:3px}
#reform_all .reform_content .category span {
    padding: 0 5px;
    display: table-cell;
    vertical-align: middle;
    height: 100%;
    width: 10%;
    text-align: center;
}
#reform_all02 .reform_content03 .category02{}

#reform_all .box_after{display:table; float:left}
#reform_all .box_after dt{ display:table-cell; vertical-align:middle; padding-right:15px}
#reform_all .box_after dd{ display:table-cell; vertical-align:middle}
#reform_all .worklist {margin: 40px auto 0 auto;}

/*全面リフォーム7つの特徴*/

#reform_all05 :is(h1,:where(.hx1)) img{ height:auto; width:100%;max-width:489px;}
#reform_all05 .reform_alllist{
	max-width:1100px;
	width:100%;
	margin:80px auto 0 auto;
	display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    -js-display: flex;
    display: flex;
    flex-wrap: wrap;
}
#reform_all05 .reform_alllist > li {
    background-color: #fff;
    max-width: 530px;
    width: 47%;
    background-color: #fff;
    padding: 24px 30px;
    margin: 0 5% 30px 0;
    position: relative;
    border-radius: 20px;
    min-height: 270px;
}
#reform_all05 .reform_alllist > li:nth-child(even){margin: 0 0 30px 0;}
#reform_all05 h2:not(:where(.hx1)) {
    font-size: 2.1rem;
    border-bottom: 3px solid #FEF000;
    display: inline-block;
    margin-bottom: 10px;
}

#reform_all05 .title_wrap{ display: table; margin-bottom:15px}
#reform_all05 .title_wrap > div:not(:where(.hx1)){ display:table-cell; vertical-align:middle}
#reform_all05  .no img{ margin-right:14px;max-width:71px; height:auto; width:100%}

#reform_all05 .reform_alllist li > .abimage{ right:30px; bottom:10px}


/*受賞歴*/

#reform_all06 :is(h1,:where(.hx1)) img{ height:auto; width:100%;max-width:634px;}
#reform_all06 .block_wrap{
    background-color: #fff;
    max-width: 1100px;
    width: 100%;
    background-color: #fff;
    margin: 80px auto;
    position: relative;
}
#reform_all06 .block_wrap .abimage {
    left: 15px;
    top: -40px;
    max-width: 124px;
    width: 100%;
    height: auto;
}
#reform_all06 .block_text{ padding:40px 50px}
#reform_all06 .block_text h2:not(:where(.hx1)) img{ height:auto; width:100%;max-width:419px;}
#reform_all06 .block_text h2:not(:where(.hx1)){margin-bottom:20px}
/*-----------------------------------------------------------
reform リフォームメニュー（その他）
-----------------------------------------------------------*/

#reform_other .block_wrap{ overflow:hidden; max-width:1060px; margin:auto}
#reform_other .block_image{float:left; width:44%; max-width:480px}
#reform_other .block_text{float: right; width:49%}
#reform_other .block_text .tag {
    padding: 2px 10px;
    display: inline-block;
	margin:0 0 10px 0;
    background-color: #F4D63D;
    color: #444444;
    font-size: 1.7rem;
}
#reform_other .otherlist li { padding:54px}
#reform_other .otherlist li:nth-child(even){ background-color:#FDF8F0}

#reform_other .otherlist h2:not(:where(.hx1)) {padding: 10px 0 10px 46px; margin-bottom:10px}
#reform_other .otherlist_li01 h2:not(:where(.hx1)) {background: url(image/reform/other/no01.png) no-repeat left center;}
#reform_other .otherlist_li02 h2:not(:where(.hx1)) {background: url(image/reform/other/no02.png) no-repeat left center;}
#reform_other .otherlist_li03 h2:not(:where(.hx1)) {background: url(image/reform/other/no03.png) no-repeat left center;}
#reform_other .otherlist_li04 h2:not(:where(.hx1)) {background: url(image/reform/other/no04.png) no-repeat left center;}
#reform_other .otherlist_li05 h2:not(:where(.hx1)) {background: url(image/reform/other/no05.png) no-repeat left center;}
#reform_other .otherlist_li06 h2:not(:where(.hx1)) {background: url(image/reform/other/no06.png) no-repeat left center;}
#reform_other #page_navi{padding-top:80px}

/*-----------------------------------------------------------
reform single リフォームメニュー 詳細
-----------------------------------------------------------*/

#reform_single01 .block_image {
    width: 100%;
    height: 340px;
    background-repeat: no-repeat;
    background-size: cover;
    margin: 30px auto;
}
#reform_single01 .text_style02{ margin-top:20px}

.block_gray{ background-color:#F6F6F6; padding:40px; margin-top:50px}
#reform_single .block_gray{ margin-bottom:40px}

.block_gray ul li .title{ background: url(image/reform/icon01.png) no-repeat left center;padding: 10px 0 10px 40px;}

.block_gray li {
    border-bottom: 1px solid #bbb;
    padding: 10px;
}

.block_gray li:last-child{border-bottom:none}

#reform_single02 li {
    background-color: #fff;
    max-width: 1096px;
    width: 100%;
    background-color: #fff;
    padding: 40px;
    margin: 60px auto;
}
#reform_single02 .block_wrap{ overflow:hidden}
#reform_single02 :is(h1,:where(.hx1)) img{ height:auto; width:100%;max-width:374px;}
#reform_single .box_osusume {
    margin-top: 30px;
    clear: both;
    border-top: 2px dotted #AAAAAA;
    padding: 20px 10px 0 10px;
}

#reform_single .product_list h2:not(:where(.hx1)) img {
    width: auto;
    max-height: 50px;
    /* width: 100%; */
}
#reform_single .product_list li .block_text{margin-top:20px}

#reform_single .product_list .icon_list img {
    max-width: 90px;
    height: auto;
    width: 100%;
}

#reform_single .box_price{ overflow:hidden}
.box_price dt {
    display: table-cell;
	padding-right: 20px;
}
#reform_single .box_price dd {
    display: table-cell;
    position: relative;
    vertical-align: middle;
}

#reform_single .box_price .price01{float:left}
#reform_single .box_price .price02 {
    float: left;
    padding: 5px 0 0 10px;
}
#reform_single .box_price .price02 img {
    top: 5px;
    right: 7%;
    max-width: 100px;
    height: auto;
    width: 100%;
}

#reform_single .tag {
    padding: 2px 10px;
    display: inline-block;
    margin-right: 10px;
    background-color: #8EBAC4;
    color: white;
	margin-top:10px
}

#reform_single02 .product_list li .block_image {
    float: left;
    width: 44%;
    height: 280px;
    background-size: cover;
    margin: 0 30px 0 0;
}
#reform_single .box_osusume h3 img{ max-width:215px;}

/*-----------------------------------------------------------
work archive 施工事例 一覧
-----------------------------------------------------------*/



/*work ナビ*/

.work_archive .worknavi {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    -js-display: flex;
    display: flex;
    flex-wrap: wrap;
    width: 83%;
	margin:auto
}

.worknavi li {
    margin-right: 20px;
    float: left;
	width:23%;
	margin: 0 2.66666667% 0 0;
}

.worknavi li:last-child {
    margin-right: 0;
}

.worknavi li a {
    width: 220px;
    background-color: #DDDDDD;
    height: 48px;
}


.work_archive.tarm_all .worknavi_li01 a { background-color:#F4D63D}
.work_archive .worknavi a:hover{ background-color:#F4D63D !important}

.work_archive.tarm_no6 .worknavi_li02 a { background-color:#F4D63D}
.work_archive.tarm_no7 .worknavi_li03 a { background-color:#F4D63D}
.work_archive.tarm_no8 .worknavi_li04 a { background-color:#F4D63D}

/*worklist*/


.worklist {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    -js-display: flex;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin: 80px auto 0 auto;
}

.worklist_li {
    position: relative;
    display: block;
    width: 29.5%;
    margin: 0 5.66666666% 60px 0;
}
.worklist li:nth-child(3n){ margin-right:0}

.worklist_li .box_image  {
    position: relative;
    z-index: 1;
	border-radius: 10px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    width: 100%;
    height: 100%;
}

.worklist_li .box_wrap {
    border-radius: 10px;
    position: relative;
    z-index: 1;
    display: block;
    height: 230px;
    width: 100%;
    border-radius: 10px;
    overflow: hidden;
	position:relative
}

.worklist .work_category {
    z-index: 2;
    top: 5px;
    left: 5px;
}
.worklist .work_category img , #event .eventlist .box_half01 .abimage img{ height:auto; width:100%;max-width:84px;}
.worklist_li .box_text h2:not(:where(.hx1)){margin:16px 0 10px 0}
.work_chara span {
    background-color: #aaaaaa;
    border-radius: 50px;
    padding: 2px 10px;
    color: #fff;
    font-size: 1.4rem;
    margin-right: 6px;
    display: inline-block;
    margin-bottom: 5px;
}

/*-----------------------------------------------------------
works single 注文住宅実例 詳細
-----------------------------------------------------------*/


/*スライダ－*/

.sp-layer {
    color: inherit !important;
    background: rgba(255, 255, 255, 0.7) !important;
}

.slider-pro p.sp-layer{font-size:1.5rem !important}





/*次矢印のアイコンフォント*/
.sp-next-arrow:before {
  content: "" !important;
  display: block;
  background: url(image/work/prev.png) no-repeat left top;
  text-indent:-9999px !important;
  width: 20px;
  height: 34px;
}

/*前矢印のアイコンフォント*/
.sp-previous-arrow:before {
  content: "" !important;
  display: block;
  background: url(image/work/prev.png) no-repeat left top;
   text-indent:-9999px !important;
  width: 20px;
  height: 34px;
}


.common_slider.sp-horizontal .sp-previous-arrow {left: -5% }
.common_slider.sp-horizontal .sp-next-arrow {right: -5% }

/*サムネイルの矢印*/
.sp-thumbnail-arrow {
    width: 20px !important;
    height: 80px !important;
    background-color: #E95E61 !important;
}
 
 

.sp-previous-thumbnail-arrow:before, .sp-previous-thumbnail-arrow:after, .sp-next-thumbnail-arrow:before, .sp-next-thumbnail-arrow:after {
    width: 12% !important;
    height: 12% !important;
}

.sp-next-thumbnail-arrow:before , .sp-previous-thumbnail-arrow:before{
    top: 40% !important;
}

.sp-arrow:hover , .sp-thumbnail-container:hover {opacity:0.7}


.sp-previous-thumbnail-arrow:before, .sp-previous-thumbnail-arrow:after, .sp-next-thumbnail-arrow:before, .sp-next-thumbnail-arrow:after {
    background-color: #fff  !important;
}


/*スライダーend*/


#work_single02 :is(h1,:where(.hx1)) , #event_single02 :is(h1,:where(.hx1)){margin-bottom:20px}


.box_data{ border-top:1px solid #999999; border-bottom:1px solid #999999; margin-top:5px; padding:25px 20px 15px 20px; overflow:hidden}
.box_data dl {
    display: table;
    width: 100%;
    margin-bottom: 10px;
}
.box_data dt {
    display: table-cell;
    width: 25%;
    max-width: 96px;
    font-weight: 500;
}
.box_data dd{display:table-cell; width:75%}


.data_box dl {
    overflow: hidden;
    width: 100%;
    padding: 10px 0;
	display:table
}

.data_box dt {
    width: 30%;
    padding-left: 5px;
	display:table-cell;
	font-weight:bold
}

.data_box dd {
    width: 70%;
	display:table-cell
}
.box_data .box_half2 dt{width:18%}
.box_data .box_half2 dd{width:72%}


.box_data .box_half1{float:left; width:40%}
.box_data .box_half2{float:left; width:60%}


.block_comment{overflow:hidden; width:100%; max-width:1140px; margin:auto}
.block_comment .box_half01{float:left;width:42%}
.block_comment .box_half02{width:52%; float:right}

.block_comment .box_half h2:not(:where(.hx1)) img{ height:auto; width:100%;max-width:369px;}
#work_single03 :is(h1,:where(.hx1)) img{ height:auto; width:100%;max-width:562px;}

.block_comment :is(h1,:where(.hx1)){margin-bottom:14px}
.box_plan{
	position:relative;	
}

.box_plan a {
    display: block;
    position: relative;
    background-color: #fff;
    padding: 10px 20px;
    text-align: center;
    /* margin: 10px 0 0 auto; */
    max-width: 460px;
    border: 1px solid #CCCCCC;
}

.box_plan .plan_image {
    width: auto;
    height: auto;
    max-height: 280px;
}

.box_plan .abimage , #renosta03 .photolist .abimage{
    position: absolute;
    z-index: 1;
    bottom: 0;
    right: 0;
	background-color: rgba(244,214,61,0.7);
}

.box_plan .tag {
    left: 0;
    top: 0;
    padding: 7px 20px;
    position: absolute;
    z-index: 1;
}


.beforelist h2:not(:where(.hx1)) {
    background: url(image/work/icon05.png) no-repeat center left;
    padding-left: 30px;
    margin-bottom: 14px;
}
	
.beforelist {
    width: 100%;
    overflow: hidden;
    padding-top: 40px;
    clear: both;
}
.beforelist li {
    float: left;
    margin-right: 1.28888888%;
    width: 24%;
    position: relative;
    max-width: 240px;
}

#work_single .box_yazi{margin:60px auto}
#work_single #page_navi{ padding:30px 0}

#work_single .link_blog , #model_single .link_blog {
    margin: 30px auto;
    width: 480px;
    height: 60px;
    position: relative;
    padding-left: 54px;
}
#model_single .link_blog {
    margin: 40px auto 0 auto;
}
#work_single .link_blog:before , #model_single .link_blog:before{
    content: "";
    background-image: url(image/work/icon_pen.png);
    height: 35px;
    width: 37px;
    position: absolute;
    left: 106px;
    background-repeat: no-repeat;
    top: 12px;
    bottom: 0;
    vertical-align: middle;
}
#work_single .link_blog p  , #model_single .link_blog p{
    font-weight: 400;
    font-size: 1.8rem;
    color: #444444;
}
/*-----------------------------------------------------------
event  イベント archive 一覧
-----------------------------------------------------------*/


#event .eventlist {
    width: 94%;
    margin: auto;
}


#event .eventlist li {
    position: relative;
    display: block;
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
	border-bottom: 2px dotted #AAAAAA;
	padding:34px 2%
}


#event .eventlist li h2:not(:where(.hx1)) {
    margin: 10px 0 16px 0;
}

#event .eventlist .box_half01 {
    float: left;
    width: 40%;
    max-width: 420px;
}

#event .eventlist .box_half02{ float: right; width:54%}

#event .eventlist .box_half01 a {
    border-radius: 10px;
    position: relative;
    z-index: 1;
    display: block;
    height: 250px;
    width: 100%;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}

#event .eventlist .box_half01 .abimage{top:5px ; left:5px; z-index:2}
#event .eventlist .box_image {
    position: relative;
    z-index: 1;
    border-radius: 10px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    width: 100%;
    height: 100%;
}


#event .event_data {
    background-color: #F6F6F6;
    padding: 15px 24px;
	margin:20px auto
}

#event .event_data dl{display:table; width:100%; padding-bottom:8px}
#event .event_data dl:last-child{padding-bottom:0}
#event .event_data dt {
    display: table-cell;
    width: 13%;
    font-weight: 500;
}#event .event_data dd{display:table-cell; width:85%}


.eventlist_li:hover .box_text * , .eventlist_li:hover .box_text h2:not(:where(.hx1)) {opacity:0.8}

dl.event_present {
    border: 2px solid #FEF000;
    width: 100%;
    display: table;
}
dl.event_present dt img{ height:auto; width:100%;max-width:72px;}
dl.event_present dt {
    background-color: #FEF000;
    display: table-cell;
    width: 19%;
    text-align: center;
    padding: 2px;
    max-width: 110px;
}
dl.event_present dd {
    display: table-cell;
    width: 81%;
    padding: 0 2%;
    vertical-align: middle;
}
#event .eventlist .box_half01 .date_end {
    background-color: rgba(53,111,161,0.7);
    width: 100%;
    height: 100%;
    z-index: 4;
    display: table;
    text-align: center;
	position:absolute;
	top:0;
	left:0
}
#event .eventlist .box_half01 .date_end  p span img{ height:auto; width:100%;max-width:185px;}

#event .eventlist .box_half01 .date_end p{ display:table-cell; vertical-align:middle}
#event .eventlist .box_half01 .date_end p span{display:block}




.transform03{
	background-size: cover;
	transition: all 0.5s ease-out;
	transform: matrix3d(
		1, 0, 0, 0,
		0, 1, 0, 0,
		0, 0, 1, 0,
		0, 0, 0, 1
	);
	will-change: transform;
}

#event .eventlist .box_half01 .date_end_wrap:hover .transform03{
	transform: matrix3d(
		1, 0, 0, 0,
		0, 1, 0, 0,
		0, 0, 1, 0,
		0, 0, 0, 0.9
	);
}


/*-----------------------------------------------------------
event イベント  single 個別
-----------------------------------------------------------*/


#event_single01 #slider .abimage01 {
    top: -10px;
    left: -10px;
    z-index: 1;
}

#event_single01 #slider .pdf_btn{
    bottom: 0;
    right: -20px;
    z-index: 1;
	position:absolute !important
}
#event_single01 #slider .pdf_btn img{ height:auto; width:100%;max-width:130px;}

#event_single .block_wrap .abimage {
    right: 10px;
    top: 5px;
}


.event_single .box_data dt { width:10%}


#event_single03 .abimage, #renosta05 > .abimage, #reform_all04 > .abimage {
    top: -10px;
    margin: auto;
    right: 0;
    left: 0;
    max-width: 100px;
}
.events_end {
    margin: auto;
    width: 28%;
    padding: 10px;
    text-align: center;
    color: #fff;
    background-color: #356FA1;
}

.acf-map {
    height: 100%;
    display: block;
    min-height: 360px;
    border: 3px solid #356FA1;
    width: 100%;
    /* margin: auto; */
}


#event_single dl.event_present { margin:20px 0 40px 0}
#event_single dl.event_present dt p{ display:table-cell; vertical-align:middle}
#event_single dl.event_present dt{padding:10px}

#event_single .box_data dt { width:10%}

#event_single .title01 img{ height:auto; width:100%;max-width:374px;}

/*-----------------------------------------------------------
staff スタッフ紹介
-----------------------------------------------------------*/

#staff .stafflist {
    overflow: hidden;
    width: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    -js-display: flex;
    display: flex;
    flex-wrap: wrap;
    padding-top: 40px;
	justify-content: space-between;
}

#staff .stafflist li {
    width: 47%;
    position: relative;
    margin-right: 6%;
    max-width: 510px;
    margin-bottom: 50px;
}

#staff .stafflist li:nth-child(even){ margin-right:0}

#staff .stafflist li .block_wrap {
    border: 3px solid #DDDDDD;
    padding: 100px 26px 26px 26px;
    margin-top: -100px;
    height: 80%;
}

#staff02 .title01 img{ height:auto; width:100%;max-width:650px;}
#staff .staff_photo {
    margin: auto;
    text-align: center;
    z-index: 1;
    position: relative;
    /* height: 230px; */
    text-align: center;
}
#staff .staff_photo img {
    width: 230px;
    height: 230px;
    border-radius: 200px;
    overflow: hidden;
    display: block;
    margin: auto;
}

#staff .staff_photo .tag {
    position: absolute;
    bottom: 0;
    text-align: center;
    right: 0;
    left: 0;
}
#staff .staff_photo .tag span{
    padding: 3px 10px;
    background-color: #8EBAC4;
	margin:auto
}
#staff .staff_name{margin-top:10px}
#staff .staff_photo .tag span.women{background-color:#E95E61}
#staff .staff_name span {
    font-size: 1.5rem;
    font-style: italic;
    font-weight: 400;
    margin-left: 10px;
	color:#8EBAC4
}
#staff .staff_name span.women{color:#E95E61}
#staff .stafflist .staff_license{ margin-top:10px; text-align:center}
#staff .stafflist .block_bottom {
    border-top: 1px solid #dddddd;
    margin-top: 20px;
    padding-top: 26px;
}
#staff .stafflist .block_bottom .box_wrap{ background-color:#FDF8F0; padding:15px; margin-top:26px}
#staff .stafflist .block_bottom .box_wrap dl{width:100%; overflow:hidden;  margin-bottom:16px}
#staff .stafflist .block_bottom .box_wrap dl:last-child{margin-bottom:0 }
#staff .stafflist .block_bottom .box_wrap dt{ width:20%; float:left; color:#525252; font-weight:500; line-height: 150%;}
#staff .stafflist .block_bottom .box_wrap dd{ width:78%; float:right; color:#525252; line-height: 150%;}

/*-----------------------------------------------------------
contact お問い合せフォーム
-----------------------------------------------------------*/



#contact .page_image{background-image:url(image/contact/page_image.jpg)}


/*お問合せ・予約共通フォーム*/
#commonform {
    max-width: 1000px;
    margin: 40px auto 0 auto;
    overflow: hidden;
    padding: 20px 2.6%;
}

#commonform dl {
    overflow: hidden;
    width: 100%;
    padding: 24px 2% 24px 3%;
    border-bottom: 2px dotted #AAAAAA;
}
#commonform dt {
    float: left;
    width: 34%;
    font-weight: 400;
    padding: 10px 0 0 7%;
    position: relative;
}

#commonform dd {
	float:left;
	width: 64%;
}



#commonform input.short{width:18%; margin-right:10px}
#commonform input.middle , #commonform select.middle{width:52%; }
#commonform dd .checkboxwrap01{margin-bottom:15px}

.required {
    color: #fff;
    /* margin-right: 10px; */
    vertical-align: top;
    font-size: 1.4rem;
    background-color: #E95E61;
    padding: 1px 6px;
    font-weight: 300;
    position: absolute;
    left: 0;
    /* top: 0; */
}
#commonform input {
    background-color: #fff;
    border: 0;
    box-sizing: border-box;
    display: inline-block;
    outline: none;
    border: 1px solid #DDDDDD;
    padding: 8px 15px;
    width: 80%;
}
#commonform input.wpcf7-file {
    border: none;
    width: auto;
}
#commonform textarea{
	background-color: #F4F4F4;
    padding: 13px 15px;
	border: 0;
}

#commonform select {
    background-color: #fff;
    border: 1px solid #DDDDDD;
    padding: 8px 15px;
    box-sizing: border-box;
    display: inline-block;
    outline: none;
	width: 90%
}


.form_select > div:not(:where(.hx1)){ float:left; margin-right:20px}
#commonform .font_small {
    clear: both;
    display: block;
    padding-top: 3px;
    font-weight: 300;
    font-size: 1.4rem;
    line-height: 150%;
}
span.wpcf7-list-item {
    display: inline-block;
    margin: 0 0 0 0;
}


#commonform textarea {
    width: 90%;
    height: 300px;
	background-color:#fff;
	border: 1px solid #DDDDDD;
}


#commonform .number01 , #commonform .number02{margin-left:10px}

#commonform .submit_btn {
    width: 340px;
    -webkit-transition: 0.1s linear;
    -moz-transition: 0.1s linear;
    transition: 0.1s linear;
    padding: 12px 0;
    text-align: center;
    background: #F4D63D;
    vertical-align: baseline;
    display: block;
    border: none;
    color: #444444;
    height: 52px;
    box-shadow: 4px 4px 0px -1px #666666;
    position: relative;
    font-size: 1.7rem;
    font-weight: 400;
}

#commonform .submit_btn:before {
    content: "";
    background-image: url(image/common/yazi01.png);
    height: 16px;
    width: 20px;
    position: absolute;
    right: 14px;
    background-repeat: no-repeat;
}


#commonform .submit_btn:hover{ background-color:#FEF000}

div:not(:where(.hx1)).wpcf7 .ajax-loader{display:none}

#commonform .submit_btn:hover{ cursor:pointer}
#submit {
    margin-top: 40px;
}
#commonform .dd_style01 {
    padding-top: 10px;
}


/*ラジオボタンカスタム*/

/* display:none だと required のラジオが「フォーカスできない」扱いになり、
   未選択のまま送信するとブラウザがエラーを出せず無言で送信を止めてしまう。
   見た目は隠したままフォーカスだけ可能にする。 */
#commonform .wpcf7-radio label{position: relative;}
#commonform .wpcf7-radio input{position: absolute; left: 0; top: 0; width: 1px; height: 1px; opacity: 0; margin: 0; padding: 0; border: 0;}
#commonform .wpcf7-radio .wpcf7-list-item-label{
  padding-left: 20px;
  position:relative;
  margin-right: 20px;
}

#commonform .wpcf7-radio .wpcf7-list-item-label::before {
    content: "";
    display: block;
    position: absolute;
    top: 3px;
    left: 0;
    width: 18px;
    height: 18px;
    border: 1px solid #AAAAAA;
    border-radius: 50%;
	background-color:#fff
}

#commonform .wpcf7-radio input:checked + .wpcf7-list-item-label::after {
    content: "";
    display: block;
    position: absolute;
    top: 7px;
    left: 4px;
    width: 10px;
    height: 10px;
    background: #E95E61;
    border-radius: 50%;
}

/*チェックボックスカスタム*/


#commonform .wpcf7-checkbox input{display: none;}

#commonform .wpcf7-checkbox .wpcf7-list-item-label {
    padding-left: 25px;
    position: relative;
    margin-right: 20px;
}

#commonform .wpcf7-checkbox .wpcf7-list-item-label::before{
  content: "";
  display: block;
  position: absolute;
  top: 2px;
  left: 0;
  width: 18px;
  height: 18px;
  border: 1px solid #ddd;
  background-color:#fff
}

#commonform .wpcf7-checkbox input:checked + .wpcf7-list-item-label::after {
    content: "";
    display: block;
    position: absolute;
    top: 4px;
    left: 7px;
    width: 5px;
    height: 14px;
    transform: rotate(45deg);
    border-bottom: 3px solid #E95E61;
    border-right: 3px solid #E95E61;
}



#contact #commonform .category span.last{margin-top:10px}


.wpcf7-form-control-wrap.zip input{ime-mode: disabled;}


/*Contactform7のスタイル上書き*/

div:not(:where(.hx1)).wpcf7-mail-sent-ok {
    border: 2px solid #E95E61;
    color: #E95E61;
    font-weight: bold;
    background-color: #fff;
    text-align: center;
    padding: 10px 0;
}

div:not(:where(.hx1)).wpcf7-validation-errors {
    background-color: #356FA1;
    color: #fff;
    border: none;
    text-align: center;
    font-weight: 400;
    padding: 10px 0;
}

span.wpcf7-not-valid-tip {
    color: #E95E61;
}

/*同意するチェックボックス*/

#commonform .wpcf7-acceptance input {
    -webkit-appearance: checkbox !important;
    width: 18px;
    height: 18px;
}

#box_acceptance{margin:12px 0 0 0}

#commonform .response01 {
    overflow: hidden;
    width: 100%;
    display: block;
}

/*IE1だけ適用されるCSSハック*/
@media all and (-ms-high-contrast: none) {

[data-class="wpcf7cf_group"], .wpcf7cf_remove, .wpcf7cf_add {
    display: block !important;
}
	.ie_d{display: block !important}
}

/*IE10以降に適用されるCSSハック*/
@media all and (-ms-high-contrast: none) {
	
#commonform .wpcf7-acceptance input {
    -webkit-appearance: checkbox !important;
    width: 50px\	; /* IE10 */
    height: 50px\	; /* IE10 */
}


}
/*-----------------------------------------------------------
news お知らせ  一覧
-----------------------------------------------------------*/



.post_archive .postlist {
    width: 100%;
    margin: auto;
	border-bottom: 2px dotted #AAAAAA;
}

.post_archive .postlist_li {
    position: relative;
    width: 100%;
    padding: 25px 5%;
    border-top: 2px dotted #AAAAAA;
}

.post_archive .left_box , .post_single .left_box{float:left; width:69%; max-width:754px}
.post_archive .right_box , .post_single .right_box{float:right; width:20%; max-width:240px}

.post_archive .post_date{margin:0 0 5px 10px; float:left}

.post_archive .post_title {
    text-decoration: underline;
    padding-top: 10px;
	clear:both
}


/*サイドバー*/

.widget-title{text-indent:-9999px}


/*カテゴリー*/

.widget_categories .widget-title{background: url(image/news/title01.png) no-repeat center left;}
.widget_autor .widget-title {
    background: url(image/blog/title01.png) no-repeat center left;
}
.widget_categories ul , .widget_archive ul {margin:10px 0 50px 0; border-bottom: 2px dotted #AAAAAA;}
.widget_categories ul li , .widget_archive ul li{
    border-top: 2px dotted #AAAAAA;
    padding: 15px 0;
}
.widget_autor ul li{
    padding: 10px 0 10px 5px;
}
.widget_autor ul{margin:10px 0 50px 0; border-bottom: 2px dotted #AAAAAA; border-top: 2px dotted #AAAAAA;}
.widget_categories ul li.cat-item-11{display: none}
.widget_categories .cat-item-5{display: none}
.widget ul li a{font-size:1.6rem}
.widget_categories ul li a {
    background: url(image/news/icon01.png) no-repeat 10px center;/*2お知らせ*/
    padding-left: 35px;
}
.widget ul li a:hover{text-decoration:underline; opacity:0.8}

.widget_categories ul .cat-item-1 a{background: url(image/news/icon02.png) no-repeat 10px center;}/*1キャンペーン*/
.widget_categories ul .cat-item-3 a{background: url(image/news/icon03.png) no-repeat 10px center;}/*3ニュースレター*/

/*ブログライター*/

.widget_autor .avatar_image {
    text-align: center;
    margin: auto;
    background-color:#F9F9F9;
    border-radius: 100px;
    overflow: hidden;
    width: 30px;
    height: 30px;
    display: table-cell;
	border: 1px solid #EEEEEE;
    vertical-align: middle;
}
.widget_autor .avatar_image img {
    display: block;
    width: 30px;
    height: auto;
    border-radius: 100px;
}
.widget_autor a p {
    font-size: 1.5rem;
    display: table-cell;
    vertical-align: middle;
    padding-left: 6px;
    font-weight: 400;
    font-size: 1.4rem;
	letter-spacing: -0.1rem
}
.widget_autor a{display: table}


/*月別アーカイブ*/
.widget_archive .widget-title{background: url(image/news/title02.png) no-repeat center left;}
.widget_archive ul li a { padding-left:10px}

/*date.php*/
.post_date .post_category.cat_1{background: url(image/news/tag02.png) no-repeat center;}/*1キャンペーン*/
.post_date .post_category.cat_2{background: url(image/news/tag01.png) no-repeat center;}/*2お知らせ*/
.post_date .post_category.cat_3{background: url(image/news/tag03.png) no-repeat center;}/*3ニュースレター*/
.post_date .post_category{ width:117px; height:24px}

/*-----------------------------------------------------------
news お知らせ  詳細 single
-----------------------------------------------------------*/


.content_wrap {
    padding: 40px 0 0 0;
    width: 100%;
    margin: auto;
}

.post_single .left_box{padding:30px 0; border-bottom: 2px dotted #AAAAAA; border-top: 2px dotted #AAAAAA;}

.post_single .post_main {
    width: 90%;
    margin: auto;
}

.post_single .block_wrap {
    padding: 30px 0 0 0;
}
.post_single .block_wrap .inner {
    width: 80%;
    margin: auto;
    max-width: 800px;
}

.post_single .post_date{margin:0 0 5px 10px; float:left;}

.post_single .post_title {
	color:#E95E61;
    padding-top: 10px;
	clear:both;
}



.entry-footer{display:none}
.image_php .navigation{display:none}

.entry-content .alignleft{ margin:20px 0 !important}

#gallery-1 .gallery-item {
    float: left;
    margin-top: 10px;
    text-align: center;
    width: 25%;
}

#feed_main .gallery{overflow:hidden}



.entry-content img {margin: 20px 0;}
.entry-content img.size-full {
    max-width: 700px;
    height: auto;
    width: 100%;
}
.entry-content img.size-large{max-width:500px; height:auto; width: 100%}

.entry-content p{line-height:170%}

/*360°画像と動画*/

.iframe360_news iframe {
    max-width: 560px;
    width: 100%;
    height: 315px;
}
.post_single .post_main .entry-content a {
    text-decoration: underline solid #0059B2; color: #0059B2
}
/*-----------------------------------------------------------
blog ブログ  一覧
-----------------------------------------------------------*/

.news_single .block_blog , .news_single .eyecath{display: none}
.blog_single .block_news{display: none}

.blog_archive .bloglist {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    -js-display: flex;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin: auto;
}

.blog_archive .bloglist li {
    position: relative;
    display: block;
    width: 32%;
    margin: 0 3.9% 30px 0;
    background-color: #fff;
    max-width: 230px;
    border: 3px solid #DDDDDD !important;
    padding: 0 !important;
}
.blog_archive .bloglist li:nth-child(3n){margin: 0 0 30px 0;}
.blog_archive .bloglist li a {
    display: block;
    overflow: hidden;
}
.blog_archive .bloglist li .block_image {
    width: 100%;
    height: 150px;
    overflow: hidden;
    background-size: cover;
    background-position: center;
}
.blog_archive .bloglist .block_text {
    padding: 16px;
    min-height: 140px;
}
.post_archive .bloglist .post_title {
    text-decoration: none !important;
    padding-top: 0;
    clear: both;
    margin-bottom: 10px;
}
.blog_archive .bloglist .block_avator {
    background-color: #F6F6F6;
    padding: 10px;
    overflow: hidden;
    width: 100%;
    display: table;
}
.blog_archive .bloglist .avatar_image {
    text-align: center;
    margin: auto;
    background-color: #fff;
    border-radius: 100px;
    overflow: hidden;
    width: 48px;
    height: 48px;
    display: table-cell;
    /* float: left; */
    vertical-align: middle;
}
.blog_archive .bloglist .avatar_image img {
    display: block;
    width: 48px;
    height: auto;
    border-radius: 100px;
}
.blog_archive .box_right {
    display: table-cell;
    padding-left: 10px;
}
.blog_archive .box_right .avatar_name{font-size: 1.3rem; font-weight: 500}
.blog_archive .box_right .blue {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.1rem;
}
.blog_archive .box_right .post_date {
    font-size: 1.1rem;
    margin-left: 0;
}

/*-----------------------------------------------------------
blog ブログ 詳細
-----------------------------------------------------------*/

.blog_single .post_main .avatar_image {
    text-align: center;
    margin: auto;
    background-color: #F9F9F9;
    border-radius: 100px;
    overflow: hidden;
    width: 90px;
    height: 90px;
    float: left;
    border: 1px solid #EEEEEE;
    vertical-align: middle;
}
.blog_single .post_main .avatar_image img {
    display: block;
    width: 90px;
    height: auto;
    border-radius: 100px;
}
.blog_single .block_blog{overflow: hidden}
.blog_single .block_blog .box_right {
    float: left;
    margin-left: 15px;
}
.blog_single .block_blog .box_right{display: table-cell; vertical-align: middle}

.blog_single .box_right .blue {
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: 0.1rem;
}
.blog_single .block_blog .box_right span{display: inline-block}
.blog_single .post_date {
    margin: 5px 0 0 0;
    float: none;
    font-size: 1.5rem;
}
.post_single .eyecath{margin: 0 auto 10px auto}
.post_single .eyecath img {
    max-width: 700px;
    height: auto;
    width: 100%;
}
/*-----------------------------------------------------------
concept ゆいすまオキナワのチカラ
-----------------------------------------------------------*/

body#concept {
    background: url(image/concept/back01.png) repeat center;
}


#concept .conceptlist {
    margin: 100px auto 0 auto;
    max-width: 1260px;
}
#concept .conceptlist li {
    position: relative;
    padding: 30px 0 0 30px;
    margin: 0 auto 50px auto;
}
#concept .conceptlist li .inner {
    background-color: #fff;
    border: 2px solid #346EA0;
    padding: 60px 50px 50px 60px;
    max-width: 1100px;
	position:relative
}

#concept .conceptlist li .inner > .abimage {
    position: absolute;
    right: 50px;
    bottom: 0;
}


#concept .conceptlist li h2:not(:where(.hx1)) {
    font-size: 2.8rem;
    margin-bottom: 14px;
    font-weight: bold;
    line-height: 3.8rem;
}
#concept .conceptlist li .no {
    top: 0;
    left: 0;
	z-index:1
}
#concept .conceptlist li .no img{ height:auto; width:100%;max-width:100px;}

#concept .conceptlist_li01 .image_size{margin-top:-20px; display: block; max-width:1197px; width:100%; height:auto}
#concept .conceptlist_li03 .image_size {
    margin-top: -20px;
    display: block;
    max-width: 801px;
    width: 100%;
    height: auto;
    margin-left: 360px;
}
#concept .conceptlist .conceptlist_li04 .inner , #concept .conceptlist .conceptlist_li06 .inner{padding: 60px 50px 80px 60px;}
#concept .conceptlist .conceptlist_li07 a {
    background: #fff;
    border: 2px solid #DDDDDD;
    display: table;
    width: 280px;
    height: 70px;
    float: left;
}
#concept .conceptlist .conceptlist_li07 a p{ display: table-cell; vertical-align:middle; text-align:center}

/*-----------------------------------------------------------
model モデル見学一覧 2020.9追加
-----------------------------------------------------------*/

.model_archive .modellist{max-width: 1160px;margin: auto}


.model_archive .modellist_li {
    position: relative;
    display: block;
    width: 96%;
    margin: 0 auto 50px auto;
    overflow: hidden;
    padding: 10px;
}
.model_archive .modellist_li .block_status {
    position: absolute;
    z-index: 1;
    left: 0;
    top: 10%;
	display: table;
    width: 124px;
    height: 48px;
    background-color: #E95E61;
	text-align: center
}
.model_archive .modellist_li .block_status  span {
    color: #fff;
    display: table-cell;
    vertical-align: middle;
    font-size: 2rem;
}
.model_archive .modellist_li .block_status.salestatus02{background-color: #356FA1;}
.model_archive .modellist_li .block_status.salestatus03{background-color: #929292;}

.model_archive .modellist_li a {
    background-color: #fff;
    box-shadow: 3px 3px 6px #aaaaaa;
    -moz-box-shadow: 3px 3px 6px #aaaaaa;
    -webkit-box-shadow: 3px 3px 6px #aaaaaa;
    filter: progid:DXImageTransform.Microsoft.Shadow(color="#aaaaaa", Direction=145, Strength=5);
    display: table;
    overflow: hidden;
    width: 98%;
    position: relative;
}
.model_archive .modellist_li .block_image {
	display: table-cell;
    width: 50%;
    background-size: cover;
    height: 100%;
}
.model_archive .modellist_li .block_text {
    display: table-cell;
    width: 50%;
    padding: 6% 5%;
}
.model_archive .modellist_li .block_text .area{text-align: center; font-size: 1.7rem}
.model_archive .modellist_li .block_text h2:not(:where(.hx1)){text-align: center; font-size: 2.4rem; margin: 20px auto}
.model_archive .modellist_li .block_text .copy {
    margin-bottom: 20px;
    letter-spacing: 0.2rem;
    line-height: 170%;
    font-size: 1.6rem;
}

.model_archive .btn01{
    width: 80%;
}

/*-----------------------------------------------------------
model モデル見学詳細 2020.9追加
-----------------------------------------------------------*/
#model_single {
    margin-top: 0 !important;
    padding-top: 0 !important;
}
#model_single01 .main_image {
    background-size: cover;
    height: 100vh;
    display: table;
    position: relative;
    width: 100%;
    background-position: center;
    margin-bottom: 80px;
}
#model_single01 .main_image .block_text {
    position: absolute;
    bottom: 0;
    text-align: center;
    right: 0;
    left: 0;
    margin-bottom: 40px;
    z-index: 1;
}
#model_single01 .mask {
    background-position: bottom;
    width: 100%;
    height: 100%;
    background-image: url(image/model/back.png);
    background-size: auto;
    background-repeat: repeat-x;
    position: relative;
}
#model_single01 .main_image .block_text :is(h1,:where(.hx1)) {
    font-size: 4rem;
    letter-spacing: 0.5rem;
    margin: 15px 0;
    font-weight: 500;
}
#model_single01 .main_image .block_text .copy P{
    font-size: 1.8rem;
    font-weight: 500;
	color: white;
    text-align: start;
    line-height: 160%;
}
#model_single01 .main_image .block_text .copy {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    -js-display: flex;
    display: flex;
    margin: auto;
    text-align: start;
    justify-content: center;
    max-width: 600px;
}
#model_single01 .main_image .block_text .yazi{
    margin-top: 65px;
}
#model_single01 .image_concept {
    margin: auto;
    max-width: 1140px;
    width: 100%;
}
#model_single01 .image_concept p.text_style01{width: 90%; margin: auto}
#model_single01 .image_concept img{margin-bottom: 20px; width: 100%; height: auto}

#model_single02 .dot01{text-align: center}
#model_single02 :is(h1,:where(.hx1))  , #model_single03 :is(h1,:where(.hx1)) {
    text-align: center;
    margin: 15px 0;
    letter-spacing: 0.3rem;
    font-weight: 500 !important;
}
#model_single02 .block_wrap {
    margin: 60px auto;
}

#model_single02 .block {
    overflow: hidden;
    width: 100%;
    margin: 0 auto 80px auto;
    display: table;
}
#model_single02 .block .block_image {
    max-width: 700px;
    width: 56%;
    /* float: left; */
    position: relative;
    padding-top: 46px;
    display: table-cell;
}
#model_single02 .block .block_image > img{max-width: 700px; height: auto; width: 100%}
#model_single02 .block .block_text {
    width: 40%;
    display: table-cell;
    vertical-align: middle;
    padding: 0 5%;
}
#model_single02 .block .block_text .text_style01{font-size: 1.6rem}

#model_single02 .block .block_text h2:not(:where(.hx1)) {
    font-size: 2.2rem;
    margin: 10px 0 15px 0;
}

#model_single02 .block .block_image:before {
    content: "";
    background-image: url(image/model/image01.png);
    position: absolute;
    width: 16px;
    height: 55px;
    top: 0;
    margin: auto;
    right: 0;
    left: 0;
}
#model_single02 .block01 .block_image:before {
	display: none
}

/*シェアボタン*/

#model_single .btn_share {
    text-align: center;
    padding: 40px 10px 0 0;
    display: table;
    margin: 0 auto 0 auto;
}
#model_single .btn_share > img{
    display: table-cell;
    vertical-align: middle;
}
#model_single .btn_share a {
    display: table-cell;
    vertical-align: middle;
    padding-left: 14px;
}

/*リフォーム内容・物件詳細*/
#model_single04 :is(h1,:where(.hx1)) , #model_single05 :is(h1,:where(.hx1)) {
    padding: 10px 0 10px 15px;
    font-size: 1.8rem;
    font-weight: 700;
    letter-spacing: 0.3rem;
}
#model_single04 :is(h1,:where(.hx1)) {
    background-color: #8EBAC4;
}
#model_single04 .box_model01 {
    background-color: #F8F8F8;
    padding: 3% 5% 5% 5%;
}
#model_single04 .box_model01 dl {
    display: table;
    width: 100%;
    margin-bottom: 10px;
    border-bottom: 1px solid #E2E2E2;
    padding: 10px 0 15px 0;
}
#model_single04 .box_model01 dt {
    display: table-cell;
    width: 10%;
    max-width: 80px;
    font-weight: 500;
	padding-left: 1%
}
#model_single04 .box_model01 dd {
    display: table-cell;
    width: 90%;
}

#model_single .beforelist {
    padding-top: 20px;
	padding-left: 1%
}

#model_single .beforelist li {
    float: left;
    margin-right: 3%;
    width: 30%;
    position: relative;
    max-width: 280px;
    max-height: 176px;
    overflow: hidden;
}
#model_single .box_data dt {
    width: 13%;
}
#model_single .box_data dl {
    padding: 5px 0;
    margin-bottom: 10px;
}
#model_single .box_data dd{line-height: 150%}
#model_single .btn_map {
    display: inline-block;
    background-color: #E95E61;
    color: #fff;
    padding: 1px 10px;
    margin-left: 10px;
    font-size: 1.4rem;
    letter-spacing: 0.1rem;
}

#model_single06 .abimage {
    top: -10px;
    margin: auto;
    right: 0;
    left: 0;
    max-width: 100px;
}

#commonform dd .innnerblock .title{
    margin: 0 0 14px 0;
    position: relative;
}
#commonform dd .innnerblock .required {
    position: relative !important;
    display: inline-block;
    margin: 2px 5px 0 0;
}
#commonform dd .innnerblock .input {
    margin-bottom: 14px;
}
#commonform dd .innnerblock02{margin-top: 20px}

/*次矢印のアイコンフォント*/
#model_single .sp-next-arrow:before {
  background: url(image/model/prev.png) no-repeat left top;
}
/*グレーボーダーグリーンタイトル*/
.title_deco01 {
    background-color: #8EBAC4;
    border: 2px solid #DDDDDD;
    letter-spacing: 0.2rem;
    display: inline-block;

}

#model_single01 .title_deco01 {
    border-radius: 50px;
    padding: 5px 16px;
}

#model_single02 .title_deco01 {
    padding: 3px 8px;
}

/*360度画像*/
#model_single03 .block_360 {
    padding: 50px 0 0 0;
}
#model_single03 .block_360 .iframewrap , #model_single03 .block_360 .movie_wrap {
    text-align: center;
    margin: 30px auto 0 auto;
}

#model_single03 .block_360 .iframewrap , #model_single03 .block_360 .movie_wrap{
    max-width: 1000px;
    width: 58vw;
}
#model_single03 .block_360 .iframewrap iframe ,  #model_single03 .block_360 .movie_wrap iframe {
    border-style: none;
    width: 100%;
    height: 58vh;
}
/*-----------------------------------------------------------
online オンライン相談
-----------------------------------------------------------*/

#online01 .block {
    background-color: #FFE45A;
    display: table;
    width: 100%;
    margin-top: 30px;
    /* height: 400px; */
    padding: 100px 0;
}
#online01 .block .block_text{display: table-cell; vertical-align: middle}
#online01 .block .block_text :is(h1,:where(.hx1)) {
    text-align: center;
    font-size: 3.2rem;
    margin: 20px auto;
}
#online01 .block .block_text .copy {
    text-align: center;
    font-size: 1.8rem;
    font-weight: 500;
    line-height: 180%;
}
#online01 .block .block_text .subtitle {
    text-align: center;
    margin-top: 50px;
}
#online01 {
    position: relative;
    padding: 40px 0 80px 0;
}
#online01 .abimage {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    margin: auto;
}
#online01 .btn01 {
    margin-top: 30px;
    background-color: #E95E61;
    color: #fff;
    border-radius: 80px;
    height: 60px;
}
#online01 .btn01:hover{background-color:#ED2C31}
#online01 .btn01 p{color: #fff; font-size: 1.8rem; font-weight: 500}
#online02 :is(h1,:where(.hx1)) {
    font-size: 3.2rem;
    text-align: center;
    margin: 10px auto 40px auto;
}
#online02 .title_deco01{
    padding: 3px 8px;
    /* text-align: center; */
    display: table;
    margin: auto;
}
#online02 ul {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    -js-display: flex;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin: 40px auto 60px auto;
    justify-content: center;
}
#online02 ul li {
    margin: 0 1.5%;
    width: 29%;
}
#online02 ul li img{width: 100%; height: auto; max-width:362px }
#online02 ul li.li02{margin: 0 5%}
#online02 ul li.li01 , #online02 ul li.li03{margin: 20px 0 0 0}

#online02 h2:not(:where(.hx1)) img{max-width:699px; height: auto; width: 100%}
#online02 .online_support {
    max-width: 1100px;
    margin: 50px auto 0 auto;
    border: 3px solid #F4D63D;
    background-color: #F9F8F8;
}
#online02 .online_support .inner {
    padding: 5%;
    overflow: hidden;
}
#online02 .online_support .inner .block_image {
    float: left;
    width: 33%;
}
#online02 .online_support .inner .block_image img{ width: 100%; max-width: 317px; height: auto}
#online02 .online_support .inner .block_text {
    float: right;
    width: 60%;
}
#online02 .online_support .inner .block_text h2:not(:where(.hx1)) {
    font-size: 2.4rem;
    margin: 5px 0 15px 0;
}

#online03 ul {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    -js-display: flex;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin: 40px auto 60px auto;
    justify-content: center;
}
#online03 ul li {
    width: 48%;
    max-width: 500px;
    margin: 0 3% 60px 3%;
}
#online03 ul li .block_image {
    background-color: #F4D63D;
    padding: 5% 6%;
    text-align: center;
}
#online03 ul li .block_text h2:not(:where(.hx1)) {
    font-size: 2.2rem;
    margin: 10px 0 12px 0;
}
#online03 ul li .block_text {
    width: 94%;
    margin: 20px auto 0 auto;
}
#online03 ul li .block_text .feature {
    color: #F4D63D;
    border: 2px solid #F4D63D;
    font-size: 1.5rem;
    padding: 2px 5px;
}

#online04 .onlineflowlist {
    overflow: hidden;
    width: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    -js-display: flex;
    display: flex;
    flex-wrap: wrap;
}
#online04 .onlineflowlist li {
    width: 25%;
    position: relative;
    padding-right: 3%;
    margin-bottom: 40px;
    margin-right: 1%;
}
#online04 .onlineflowlist li:before{
    content: "";
    width: 19px;
    height: 33px;
    top: 50%;
    /* bottom: 0; */
    right: 0;
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url(image/online/yazi01@2x.png);
    background-position: center;
}
#online04 .onlineflowlist li:last-child:before {
	display: none
}
#online04 .onlineflowlist li:last-child {
    margin-right: 0;
    padding-right: 0;
	width: 22%
}
#online04 .onlineflowlist li .inner {
    max-width: 260px;
    position: relative;
    background-color: #fff;
    height: 100%;
}
#online04 .onlineflowlist li .no {
    color: #fff;
    font-size: 2rem;
    background-color: #8EBAC4;
    text-align: center;
    line-height: 180%;
}
#online04 .onlineflowlist li h2:not(:where(.hx1)) {
    text-align: center;
    margin: 14px auto;
    font-size: 2rem;
}
#online04 .onlineflowlist li .icon{
    display: block;
    margin: auto;
}
#online04 .onlineflowlist li .block_text {
    padding: 15% 8%;
}
#online05 .abimage {
    top: -10px;
    margin: auto;
    right: 0;
    left: 0;
    max-width: 100px;
}
#online #commonform h2:not(:where(.hx1)){
    background-color: #8EBAC4;
    color: #fff;
    padding: 8px 0 8px 10px;
}


/*-----------------------------------------------------------
renosta リノベーションスタジオ南城市
-----------------------------------------------------------*/


#renosta01 {
    background-image: url(image/renosta/back01.jpg);
    background-size: cover;
    height: 93vh;
    display: table;
    position: relative;
    width: 100%;
    background-position: top center;
}
#renosta01 .title{ vertical-align:middle; display:table-cell; text-align:center}
#renosta01 .title :is(h1,:where(.hx1)) img{ height:auto; width:100%;max-width:684px;}
#renosta01  .title :is(h1,:where(.hx1)){ margin-bottom:20px}
#renosta01  .title p img{ height:auto; width:100%;max-width:566px;}
#renosta01  .scroll {
    position: absolute;
    bottom: 50px;
    right: 0;
    left: 0;
    text-align: center;
}

#renosta02 :is(h1,:where(.hx1)) img{ height:auto; width:100%;max-width:783px;}
#renosta02 :is(h1,:where(.hx1)){margin:10px auto 30px auto}

#renosta02 .block_half{ width:48%}
#renosta02 .block_half01{ float:left}
#renosta02 .block_half02{ float: right}
#renosta02 .block_half02 .block_image{float:left;width: 40%; max-width:195px}
#renosta02 .block_half02 .block_text{float:right; width: 56%;}
#renosta02 dl dd span{ display:block; margin-bottom:7px}
#renosta02 dl dd a:before {
    content: "";
    position: absolute;
    left: 0;
    width: 12px;
    height: 18px;
    background: url(image/renosta/map.png) no-repeat center;
    background-size: contain;
    bottom: 2px;
}
#renosta02 dl dd a {
    padding-left: 18px;
    margin-left: 10px;
    font-weight: 400;
    font-size: 1.5rem;
}

#renosta02 .block_wrap{margin:80px auto 40px auto}
#renosta02 .box_data{min-height:260px}


#renosta03 :is(h1,:where(.hx1)) img{ height:auto; width:100%;max-width:723px;}
#renosta03 .renosutalist > li {
    background-color: #fff;
    max-width: 1140px;
    width: 100%;
    background-color: #fff;
    padding: 40px;
    margin: 120px auto 0 auto;
	position:relative
}

#renosta03 .renosutalist h2:not(:where(.hx1)){font-size:3rem; margin:40px auto 20px auto}
#renosta03 .renosutalist li > .abimage {
    top: -36px;
    left: 0;
    margin: auto;
    right: 0;
    max-width: 83px;
}
#renosta03 .photolist {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    -js-display: flex;
    display: flex;
    flex-wrap: wrap;
    width: 98%;
    margin: 50px auto 0 auto;
}
#renosta03 .photolist li {
    display: block;
    width: 30%;
    margin: 0 6.555% 0 0;
    max-width: 300px;
}
#renosta03 .photolist li a {
    display: block;
    position: relative;
}
#renosta03 .photolist li img{width:100%; height:auto}
#renosta03 .tag {
    padding: 2px 10px;
    display: inline-block;
	margin:10px 0 5px 0;
    background-color: #F4D63D;
    color: white;
}

#renosta03 .renosutalist_li02 .block_image {
    float: left;
    width: 47%;
    max-width: 484px;
}
#renosta03 .renosutalist_li02 .block_text{ float:right; width:48%}
#renosta03 .renosutalist_li02 .block_text h3 {
    font-size: 2rem;
    border-bottom: 3px solid #FEF000;
    display: inline-block;
    margin-bottom: 10px;
}
#renosta03 .renosutalist_li03 .photolist li {
    width: 44%;
    margin: 0 3%;
    max-width: 450px;
}

#renosta .sp-image-container img{ height:auto; width:100%;max-width:1000px; margin-top: 0 !important}
#renosta .slider-pro p.sp-layer {
    font-size: 1.6rem;
    line-height: 1.6rem;
    margin: 0;
    padding-left: 100px;
}
#renosta .sp-top-thumbnails, .sp-bottom-thumbnails{ margin-top:20px}
#renosta04 :is(h1,:where(.hx1)){margin:30px auto}

#renosta04 :is(h1,:where(.hx1)) img{ height:auto; width:100%;max-width:550px;}
#renosta05 :is(h1,:where(.hx1)) img{ height:auto; width:100%;max-width:730px;}
#renosta05 :is(h1,:where(.hx1)){margin-bottom:30px}
#renosta05 .btn01 {
    width: 700px !important;
    font-size: 1.8rem;
    height: 70px;
    padding: 24px 0;
    margin-top: 30px;
}
#renosta05 .btn_yazi01:after, .btn_yazi02:after{top:45%}


/*-----------------------------------------------------------
project ゆいすまの南城市活性化！プロジェクト
-----------------------------------------------------------*/

#project01 {
    background-image: url(image/project/back01.jpg);
    background-size: cover;
    height: 93vh;
    display: table;
    position: relative;
    width: 100%;
}
#project01 .title{ vertical-align:middle; display:table-cell; text-align:center}
#project01 .title :is(h1,:where(.hx1)) img{ height:auto; width:100%;max-width:664px;}
#project01 .title :is(h1,:where(.hx1)){ margin-bottom:20px}
#project01 .title p img{ height:auto; width:100%;max-width:560px;}
#project01 .scroll , #renosta01 .scroll {
    position: absolute;
    bottom: 50px;
    right: 0;
    left: 0;
    text-align: center;
}
#project .title02 {
    margin: 40px auto 20px auto;
    text-align: center;
    line-height: 5rem;
}
#project .title03{ margin-bottom:30px; text-align:center}

#project .image_size01 {
    height: auto;
    width: 100%;
    max-width: 427px;
    margin: auto;
    display: block;
}
#project .image_size02{ max-width:1060px; width:100%; height:auto; display:block; margin:100px auto 30px auto}

#project02 .no{margin-bottom:40px}
#project .hukidashi_wrap{ display:table; overflow:hidden; width:100%; margin:60px auto}
#project .hukidashi_wrap > div:not(:where(.hx1)){ display:table-cell; text-align:center}
#project .hukidashi_wrap > div:not(:where(.hx1)) img{ height:auto; width:100%;max-width:230px;}
#project .photo_wrap {
    overflow: hidden;
    width: 94%;
    margin: auto;
    border-bottom: 1px solid #AAA;
    padding-bottom: 60px;
}
#project .photo_wrap > div:not(:where(.hx1)){ max-width:490px;}

#project03 ul {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    -js-display: flex;
    display: flex;
    flex-wrap: wrap;
    margin: 100px auto 0 auto;
    justify-content: center;
    max-width: 1340px;
}
#project03 ul li {
    position: relative;
    display: block;
    width: 23.5%;
    margin: 0 1.5% 0 0;
    position: relative;
}
#project03 ul li:last-child{ margin-right:0}
#project03 ul li .block_top {
    background-color: #FDF8F0;
    text-align: center;
    padding: 34px 20px 20px 20px;
}
#project03 ul li .block_bottom{
    background-color: #356FA1;
	padding:20px
}
#project03 .no {
    position: absolute;
    top: -10px;
    right: 0;
    left: 0;
    display: block;
    margin: auto;
}

/*-----------------------------------------------------------
company 会社概要
-----------------------------------------------------------*/

#company .company_box, #profile .company_box { border:3px solid #DDDDDD}

#company .company_box dl, #profile .company_box dl {
    padding: 18px 0;
    overflow: hidden;
    width: 100%;
    border-bottom: 1px dashed #BBBBBB;
}
#company .company_box dt, #profile .company_box dt {
    float: left;
    font-weight:500;
    width: 18%;
    padding-left: 5%;
}
#company .company_box dd, #profile .company_box dd {
    float: left;
    width: 80%;
}

#company .company_box .inner, #profile .company_box .inner {
    width: 92%;
    margin: 30px auto;
}

#company02 h2:not(:where(.hx1)){ font-size:2.8rem; text-align:center; margin-bottom:36px}
#company02 .idea {
    border-bottom: 2px solid #CCCCCC;
    padding-bottom: 50px;
    margin-bottom: 50px;
}
#company02 .idea ul {
    max-width: 800px;
    margin: auto;
}
#company02 .idea ul li{margin-bottom:20px}
#company02 .idea ul li , #company02 .idea p{ line-height:3rem}
#company03 :is(h1,:where(.hx1)) , #company04 :is(h1,:where(.hx1)){ text-align:center; margin-bottom:40px}
#company03 :is(h1,:where(.hx1)) img , #company04 :is(h1,:where(.hx1)) img{ height:auto; width:100%;max-width:247px;}
#company04 .block_wrap {
    padding-top: 40px;
    position: relative;
    margin-top: 70px;
}
#company04 .block_wrap .inner {
    background-color: #F6F6F6;
    padding: 90px 30px 40px 30px;
    max-width: 1140px;
    margin: auto;
}
#company04 .block_wrap .banner01{ position:absolute; top:0; right:0; left:0; width:500px; display:block; margin:auto}
#company04 .block_wrap .banner02{ width:380px; display:block; margin:auto}
#company04 .block_wrap .banner03 {
    max-width: 340px;
    display: block;
    margin-bottom: 10px;
}
#company04 .bannerlist {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    -js-display: flex;
    display: flex;
    flex-wrap: wrap;
    width: 98.6%;
    margin: 40px auto 0 auto;
}
#company04 .bannerlist a {
    width: 32%;
    margin: 0 2% 0 0;
}
/*-----------------------------------------------------------
disaster 災害情報
-----------------------------------------------------------*/

#disaster01 :is(h1,:where(.hx1)){ margin:50px auto 24px auto}
#disaster01 .linkblock {
    overflow: hidden;
    width: 82%;
    margin: 50px auto 0 auto;
}
#disaster01 .linkblock a {
    display: table;
    height: 110px;
    max-width: 430px;
    background-color: #FEF000;
    border: 2px solid #DDDDDD;
    text-align: center;
    width: 48%;
    margin: 0 0 20px 0;
    padding-left: 15px;
}
#disaster01 .linkblock a img {
    display: block;
    margin: auto;
    max-width: 317px;
}
#disaster01 .linkblock a p{ display:table-cell; vertical-align:middle}
#disaster01 .linkblock a:hover{background-color:#FFFFC6}

/*-----------------------------------------------------------
policy プライバシーポリシー
-----------------------------------------------------------*/



#policy02 .block_wrap {
    border-bottom: 2px dotted #AAAAAA;
    border-top: 2px dotted #AAAAAA;
    padding: 60px 10px;
}


#policy02 h2:not(:where(.hx1)) {
    margin-bottom: 16px;
    border-top: 2px dotted #AAAAAA;
    padding-top: 40px;
}
#policy02 p {
    margin-bottom: 40px;
    letter-spacing: 0.1rem;
    font-size: 1.6rem;
}
#policy02 a:hover{ color:#E95E61}


/*-----------------------------------------------
IEハック
-------------------------------------------------*/	

@media all and (-ms-high-contrast: none){
	
/* ---- common ---- */

.fontw_l1 { font-weight:100 !important;}/*light*/
.fontw_l2 { font-weight:300 !important;}/*light*/
.fontw_r { font-weight:500 !important;}/*regular*/
.fontw_m { font-weight:600 !important;}/*medium*/
.fontw_b { font-weight:600 !important;}/*bold*/
.fontw_n { font-weight:normal !important;}



dd{font-weight:500}


:is(h1,:where(.hx1))  { font-size: 1.9rem; } /* 20px */
h2:not(:where(.hx1)) , h3 { font-size: 1.8rem; font-weight:600} /* 18px */
input, textarea, select {
    font-size: 1.6rem;
    font-weight: 500;
}
p , div:not(:where(.hx1)) , a , span{line-height:140%; font-weight:500}

	
/* ---- 各ページ ---- */

.modal_menu .modal_box li a{ font-weight:500}
.post_archive .post_title a{ font-weight:bold !important}
#reform_single01 , #event_single01{ padding-top:120px !important}
.block_gray ul li .title { font-weight:bold !important}
#staff .stafflist .block_bottom .box_wrap dt , .staff_name{font-weight: bold !important}


}