@charset "utf-8";
/* CSS Document ゆいすまオキナワ様 ブラウザ調整スタイルシート*/

.u1440display{display: none}


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

}

/*--------------------------------------------------------------------ブラウザサイズ調整---------------------------------------------------------------------------*/

/*1680以上に発動！*/
@media (min-width: 1680px){




}


/*1680px以下*/
@media (max-width: 1720px){


}



/*1680px以下*/
@media (max-width: 1680px){


.o1680_d{display:none}

}



/*1600px以下 シェアNo.5 2.9%*/
@media (max-width: 1600px){


.header_logo {
    width: 200px;
    height: 56px;
    margin: 7px 0 0 0;
}

}


/*1536px以下 シェアNo.5 4.69%*/
@media (max-width: 1536px){



}


@media (max-width: 1490px){
	

}


/*1440以上に発動！*/
@media (min-width: 1440px){




}



/*1440x900以下 シェアNo.4 4.81%*/
@media (max-width: 1440px){

.o1440display{display:none}	
.u1440display{display:block}

.header_btn .tel img{max-width:220px}
.header_btn .contact img{max-width:94px}

#project01 .title :is(h1,:where(.hx1)) img{ max-width:580px}
#project01 .title p img{max-width:500px}

#renosta01 .title :is(h1,:where(.hx1)) img{max-width:600px}
#renosta02 :is(h1,:where(.hx1)) img{max-width:700px}
#renosta05 :is(h1,:where(.hx1)) img{ max-width:680px}
#renosta03 :is(h1,:where(.hx1)) img{ height:auto; width:100%;max-width:680px;}
#project01 .scroll img, #renosta01 .scroll img{ height:auto; width:100%;max-width:54px;}

#header .areacomment {
    margin: 16px 0 0 5px;
    float: left;
    font-weight: 500;
    letter-spacing: -0.1rem;
    font-size: 1.4rem;
    line-height: 130%;
}
}



/*1366x768以下 シェアNo.2 16.27%*/
@media (max-width: 1366px){

/*テンプレート指示*/
.o1366_d{display:none}
.u1366_d{display:block}
.u1366w100a{ width:100%; height:auto}
.header_sns {
    float: left;
    margin: 22px 0 0 10px;
}


.header_logo {
    width: 200px;
    height: 56px;
    margin: 15px 0 0 0;
}
#gnavi .gnavi_li > a {
    font-size: 1.5rem;
    width: 140px;
}
#fade-in2 li ul{left:-15px}
.header_btn {
    right: 2%;
    top: 15%;
}
#top_news h3 img{ height:auto; width:100%;max-width:610px;}
#top_news .conceptlist li img{ height:auto; width:100%;max-width:230px;}
#top_wrap .title01 img{ height:auto; width:100%;max-width:310px; display:block}

#top_project :is(h1,:where(.hx1)) img { max-width:480px}
#top_contents h2:not(:where(.hx1)) img { max-width:370px}
.box_friend :is(h1,:where(.hx1)) img{ height:auto; width:100%;max-width:330px;}
#top_menu .menulist{max-width:1100px}

#top_pack :is(h1,:where(.hx1)) img{ height:auto; width:100%;max-width:310px;}
#top_news {padding: 80px 0 110px 0;}


#concept .conceptlist {max-width: 1100px;}
#concept .conceptlist_li03 .image_size {margin-left: 300px;}


#project03 ul{ max-width:1160px}

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

.post_archive .right_box, .post_single .right_box{margin-right:8%}
.post_archive .left_box, .post_single .left_box{max-width:700px}

#plan_archive01 .planlist .block_wrap{width:90%}
#plan_single01 .block_image {
    height: 360px;
    width: 90%;
}
#staff .staff_photo img{width:200px; height:200px}
#staff .stafflist li .block_wrap{height:86%}
#staff .stafflist li {
    width: 48%;
    margin-right: 4%;
    max-width: 530px;
}
.blog_archive .bloglist li {
    margin: 0 2% 30px 0;
}
#model_single01 .main_image .block_text :is(h1,:where(.hx1)) {
    font-size: 3.2rem;
}
}

/* 横幅1366px以下で、高さ800px以下の場合 */
@media screen and (max-width: 1366px) and (max-height: 768px) {
	


}



/*1280x800 シェアNo.6 3.93%*/
/*1280x1024 シェアNo.7 3.61%*/
/*SONYタブレット横*/
@media (max-width: 1280px){

.o1280_d{ display:none}
.u1280_d{ display:block}

#top_wrap .block1200{ max-width:1100px}
#top_project {padding: 40px 0;}

.worklist{width:96%}
.worklist_li {margin: 0 4.666666% 60px 0;}
.worklist_li .box_wrap{ height:220px}
#project01 .title :is(h1,:where(.hx1)) img {max-width: 480px;}

}

/* 横幅1366px以下で、高さ800px以下の場合 */
@media screen and (max-width: 1280px) and (max-height: 800px) {
	



}


@media (max-width: 1250px){
#header .areacomment {
    margin: 20px 0 0 5px;
    float: left;
    font-weight: 500;
    letter-spacing: -0.1rem;
    font-size: 1.2rem;
    line-height: 130%;
}
.header_sns li a {
    display: block;
    height: 26px;
}
#gnavi .gnavi_li > a {
    font-size: 1.2rem;
    width: 110px;
}
.dropmenu li ul li a {
    font-size: 1.2rem;
}
	
}



/*高さ*/

/* 高さ900px以下の場合 */
@media screen and (max-height: 900px) {


}


/* 高さ768px以下の場合 */
@media screen and (max-height: 768px) {
	


}




/*1093px以下 1093×615*/
@media (max-width: 1093px){


}



/*--------------------------------------------------------------------------タブレット　横1024px-----------------------------------------------------------*/




/*シェア③タブレット横 1024×768*/

@media (max-width: 1024px){
	
	

.w100_u1024{ width:100%; height: auto}

.pc_d{display:none}

.o1024_d{display:none}
.o1280_d{display:none}
.o1366_d{display:none}
.o1440_d{display:none}
.o1680_d{display:none}

.block1100 , .block1200 , .block1000{width:92%}

/*PCでは効かせない指示*/

.tb_d{display:block}
.tbs_d{display:block}


.sp_d{display:none}
.mo_d{display:block}



/* ---- font ---- */

body { font-size: 1.6rem} /* 16px */
p, address, button {
    font-size: 1.6rem;
    font-weight: 300;
    letter-spacing: 0rem;
}
dt , dd {
    font-size: 1.5rem;
    letter-spacing: 0rem;
}
dd{font-weight:300}
:is(h1,:where(.hx1))  { font-size: 1.8rem; } 
h2:not(:where(.hx1)) , h3 { font-size: 1.7rem; font-weight:500}
input, textarea, select {
    font-size: 1.5rem;
    font-weight: 300;
}
p , div:not(:where(.hx1)) {line-height:140%;}
:is(h1,:where(.hx1)) , h2:not(:where(.hx1)) , h3 {vertical-align:bottom; letter-spacing:0.1rem}


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

.font_s11 { font-size:1.0rem !important;}
.font_s12 { font-size:1.0rem !important;}
.font_s13 { font-size:1.2rem !important;}
.font_s14 { font-size:1.2rem !important;}
.font_s15 { font-size:1.2rem !important;}
.font_s16 { font-size:1.5rem !important;}
.font_s17 { font-size:1.6rem !important;}
.font_s18 { font-size:1.6rem !important;}
.font_s19 { font-size:1.7rem !important;}
.font_s20 { font-size:1.8rem !important;}
.font_s22 { font-size:2.0rem !important;}
.font_s24 { font-size:2.0rem !important;}
.font_s26 { font-size:2.0rem !important;}
.font_s28 { font-size:2.0rem !important;}
.font_s30 { font-size:2.2rem !important;}
.font_s32 { font-size:2.2rem !important;}
.font_s34 { font-size:2.8rem !important;}
.font_s36 { font-size:2.8rem !important;}
.font_s40 { font-size:3.0rem !important;}
.font_s42 { font-size:3.0rem !important;}
.font_s44 { font-size:4.4rem !important;}
.font_s46 { font-size:4.6rem !important;}
.font_s48 { font-size:4.8rem !important;}
.font_s80 { font-size:8.0rem !important;}




/*PC用ヘッダー非表示*/
#header{display:none}

/*header & top */
#page-top{ z-index:1 !important}
#topImage{ height:100vh}

#top_wrap .block1200 {width: 92%;}
#top_news .postlist {
    width: 80%;
    float: none;
    margin: 30px auto;
}
#top_news .block_btn {
    float: none;
    width: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    -js-display: flex;
    display: flex;
    justify-content: center;
}
#top_news .block_news .btn01 {
    max-width: 260px;
    margin: 10px 2%;
}

#top_news .top_news_title {
    float: none;
    margin: 0 auto;
    text-align: center;
}
#top_wrap .title01 img{max-width:280px}
#top_news .btn_yazi02{margin-top:0}
#top_news {
    padding: 80px 0 100px 0;
    background-size: cover;
}
.block_concept { padding-top:100px}
.top_section {
    padding: 60px 0;
}
#top_menu{padding: 0 0 50px 0}
#top_menu .menulist{ width:92%}
#top_pack :is(h1,:where(.hx1)) img{ max-width:240px}
#top_project :is(h1,:where(.hx1)) img {
    max-width: 400px;
}
.contentslist{ width:90%}
#top_sns .box_wrap{ width:90%}
.fb_iframe_widget iframe {
    position: absolute;
    width: 100% !important;
}
#top_sns .box_wrap .box_friend , #top_sns .box_wrap .box_contact{width:48%}
#footer {
    padding: 40px 0;
    background-size: cover;
}
#footer .block_wrap{width:90%}
.footer_link li a > img{width:100%; height:auto}
.footer_link li {
    max-width: 210px;
    margin: 0 2% 14px 0;
    float: left;
    display: table;
    width: 30%;
}
.footer_tel {
    margin: 14px 0 10px 0;
}
#footer .copy {
    margin-top: 0;
}


/*中間ページ*/
main {margin-top: 0; padding-top:110px}
.page_title01 {
    text-align: center;
    margin: 60px auto 60px auto;
}
.page_title01 :is(h1,:where(.hx1)) img {
    height: auto;
    width: 100%;
    max-width: 460px;
}

/*ゆいすまオキナワのチカラ*/

#concept .conceptlist {
    max-width: 1100px;
    width: 94%;
    margin: 0 auto 0 auto;
}
#concept .conceptlist li .no img{ max-width:60px}
#concept .conceptlist li h2:not(:where(.hx1)) {
    font-size: 2.4rem;
    margin-bottom: 10px;
    font-weight: bold;
    line-height: 3.4rem;
}
#concept .conceptlist_li03 .image_size {
    margin: -20px auto 0 auto;
}
#concept .conceptlist li .inner > .image_size{ height:auto; width:100%;max-width:130px;}

/*エリア紹介*/
#project01 .title :is(h1,:where(.hx1)) img {
    max-width: 440px;
}
#project01{height:80vh}
#project01 .scroll img, #renosta01 .scroll img { max-width:44px}
#project .title02 {
    line-height: 4rem;
    margin: 20px auto;
}
#project .title02 {
    line-height: 4rem;
    margin: 20px auto;
}
#project .photo_wrap > div:not(:where(.hx1)){width:48%}
#project .hukidashi_wrap{width:80%}
#project .hukidashi_wrap > div:not(:where(.hx1)) img {
    max-width: 200px;
}
#project03 ul {
    max-width: 1160px;
    width: 92%;
}
#project03 ul li {
    width: 46%;
    margin: 0 2% 40px 2%;
}
#project03 ul li:last-child{ margin-right:2%}
#project .image_size02 {
    width: 90%;
    margin: 40px auto 30px auto;
}

/*流れ*/

#flow .flowlist li .block_wrap {padding:30px 20px;}
#flow .flowlist h2:not(:where(.hx1)) {
    margin-bottom: 10px;
}
#flow .flowlist .block_image .no img{ height:auto; width:100%;max-width:60px;}
#flow .flowlist li > .abimage {max-width:88px}
#flow02 :is(h1,:where(.hx1)) img {
    max-width: 420px;
}
#flow02 .securitylist{width:92%}
#flow02 .securitylist_li02, #flow02 .securitylist_li03 {
    width: 100%;
}
#flow02 .securitylist_li02 , #flow02 .securitylist_li03{float:none}
#flow02 .securitylist li{ min-height:auto}

/*パックプラン*/
#plan_archive01 .planlist .block_wrap {width: 100%;}
#plan_archive01 .planlist .block_image .image {height: 200px;}
#plan_archive01 .planlist .block_wrap{padding:24px}
#plan_single01 .block_image {
    height: 300px;
    width: 100%;
}
#plan_single02 :is(h1,:where(.hx1)) img {max-width: 210px;}
#plan_single02 .block_wrap, .box_osusume {
    width: 92%;
}
#plan_single02 .block_image, #reform_single02 .block_image {
    height: 260px;
}
#plan_single02 .box_osusume {
    margin-top: 10px;
}
#plan_single02 .product_list .icon_maker img , #reform_single .product_list .icon_maker img{max-width: 80px;}
#plan_single01 .icon_list li img{max-width:110px;}
#plan_single02 .box_osusume h3 img{ max-width:200px;}

/*リフォームメニュー 全面リフォーム & リフォームメニュー*/
#reform_all01 {
    padding-top: 0;
}
#reform_all .reform_all_btn{ font-size:1.8rem; padding:20px; height:auto}
#reform_all .title01 img {
    height: auto;
    width: 100%;
    max-width: 380px;
}
#reform_all02 .abimage01, #reform_all03 .abimage01 {
    max-width: 73px;
}

#reform_all05 .reform_alllist > li {
    width: 48%;
	margin: 0 3% 30px 0;
	padding: 20px;
}
#reform_all05 .no img {
    width: 60px;
}
#reform_all06 :is(h1,:where(.hx1)) img{ height:auto; width:100%;max-width:540px;}
#reform_all06 .block_wrap{ width:92%}
#reform_all06 .block_text {
    padding: 30px;
}
#reform_all06 .block_text h2:not(:where(.hx1)) img{ height:auto; width:100%;max-width:340px;}
#reform_all06 .block_wrap .abimage { max-width:100px}


.block_gray {
    padding: 30px 20px;
    margin-top: 30px;
}
#reform_all05 :is(h1,:where(.hx1)) img{max-width:400px;}
#reform_all05 .reform_alllist{ width:92%}

#reform_single01 .block_image {
    height: 300px;
}
#reform_single02 :is(h1,:where(.hx1)) img {max-width: 310px;}
#reform_single .product_list{width:92%; margin:auto}
#reform_single02 li{padding:30px}
#reform_single .box_osusume {
    margin-top: 10px;
    clear: both;
    border-top: 2px dotted #AAAAAA;
    padding: 14px 10px 0 10px;
    width: 100%;
}
#reform_single .box_osusume h3 img{ max-width:190px;}

/*施工事例*/

.worklist_li .box_wrap {
    height: 180px;
}
.worklist_li .box_text h2:not(:where(.hx1)) {
    margin: 10px 0;
}
.worklist_li {
    margin: 0 4.666666% 30px 0;
}
.worklist .work_category img , #event .eventlist .box_half01 .abimage img{max-width:64px;}
.work_archive .worknavi , .worknavi li a {width:100%}

.box_data .box_half1 {
    float: none;
    width: 100%;
}
.box_data .box_half2 {
    float: none;
    width: 100%;
}
.box_data dt , .box_data .box_half2 dt {width:14%}
.block_comment .box_half01 {
    float: none;
    width: 100%;
}
.box_plan a { margin:0 auto 20px auto}
.block_comment .box_half02 {
    width: 100%;
    float: none;
}
.beforelist li{ width:23%}
.box_plan {
    position: relative;
    max-width: 460px;
    margin: auto;
}
.block_comment .box_half h2:not(:where(.hx1)) img {max-width: 320px;}
#work_single03 :is(h1,:where(.hx1)) img{max-width: 500px;}

/*イベント*/
#event .eventlist .box_half01 a{ height:230px}
#event .event_data {
    background-color: #F6F6F6;
    padding: 10px 20px;
    margin: 10px auto;
}
dl.event_present dt img{ height:auto; width:100%;max-width:60px;}
dl.event_present dt {
    padding: 5px 5px 0 5px;
}
#event_single01 #slider .pdf_btn img{max-width:100px;}
#event_single .title01 img{ height:auto; width:100%;max-width:320px;}
.events_end {width: 42%;}

/*リノベーションスタジオ*/
#renosta01 .title :is(h1,:where(.hx1)) img {
    max-width: 500px;
}
#renosta01 { height:84vh}
#renosta02 :is(h1,:where(.hx1)) img {
    max-width: 600px;
}
#renosta02 .block_half { width:100%}
#renosta02 .box_data {
    min-height: auto;
}
#renosta02 .block_half01 {
    float: none;
	margin-bottom:20px
}
#renosta02 .block_half02 .block_text {
    float: left;
    width: 73%;
    margin-left: 3%;
}
#renosta03 :is(h1,:where(.hx1)) img {max-width: 540px;}
#renosta03 .renosutalist h2:not(:where(.hx1)) {
    font-size: 2.4rem;
}
#renosta03 .photolist li{width:28%}
#renosta03 .renosutalist_li02 .block_text h3{ font-size:1.8rem}
#renosta03 .renosutalist_li02 .block_text h3{ width:92%}
#renosta04 :is(h1,:where(.hx1)) img{ max-width:480px}
#renosta05 :is(h1,:where(.hx1)) img {max-width: 540px;}
#event_single03 .abimage, #renosta05 > .abimage, #reform_all04 > .abimage{ max-width:80px}
#renosta05 .btn01 {
    width: 70%U\ !important;
    height: 60px;
    padding: 18px 0;
    margin-top: 20px;
}

/*災害情報*/

#disaster01 .linkblock a img {max-width: 270px;}
#disaster01 .linkblock a{ height:90px}

/*会社概要*/
#company03 :is(h1,:where(.hx1)) img, #company04 :is(h1,:where(.hx1)) img {max-width: 210px;}
#company #map_custmomize{ height:280px !important}
#company04 .block_wrap .inner {padding: 70px 20px 30px 20px;}
#company04 .bannerlist {margin: 20px auto 0 auto;}

/*お知らせ*/
.post_archive .left_box, .post_single .left_box {
    max-width: 1100px;
    width: 92%;
    float: none;
    margin: auto;
}
.post_archive .right_box, .post_single .right_box {
    margin-right: 0;
    width: 92%;
    float: none;
    max-width: 1100px;
    margin: 40px auto 0 auto;
}

.post_archive .postlist_li {
    padding: 20px 1%;
}
.widget_categories .widget-title {background-size: 17%;}
.widget_archive .widget-title {background-size: 16%;}
.content_wrap { padding:0}
.page_next a, .page_prev a , .page_list  {
    width: 200px;
	}
/*スタッフ紹介*/

#staff02 .title01 img{ height:auto; width:100%;max-width:590px;}
	
/*オンライン相談*/
#online03 ul li {
    width: 44%;
    max-width: 500px;
    margin: 0 2% 60px 2%;
}	

}
	







/*--------------------------------------------------------------------------タブレット　縦800px-----------------------------------------------------------*/


@media (max-width: 800px){
	
.tbs_d{display:none !important}
.tbv_d{display:block !important}
.w100_u800{ width:100%; height: auto}
.text_c_pc{ text-align:left !important}



/*header&top*/

.headertb_btn a.contact p {background-position: 18% center;}
.headertb_btn a.online p {background-position: 18% center;}
#top_slider .sp-mask , #top_slider .sp-slide , #top_slider .sp-image-container{ height:74vh !important}
#topImage {
    height: 74vh;
    margin-top: 110px;
}
#top_news {
    padding: 60px 0 90px 0;
    background-size: cover;
    background-position: center;
}
#top_news .postlist {width:94%}
#top_menu .menulist01 {
    margin: 40px auto 20px auto;
}
#top_wrap .title01 img {
    max-width: 250px;
}
#top_pack :is(h1,:where(.hx1)) img {
    max-width: 200px;
}
.btn02 {
    width: 80%;
    padding: 20px 0;
    height: auto;
}
#top_project :is(h1,:where(.hx1)) img {
    max-width: 360px;
}
.contentslist01 .abimage {
    right: 7%;
    max-width: 100px;
    top: 30%;
}
#top_sns .box_wrap .box_friend, #top_sns .box_wrap .box_contact {
    width: 70%;
    margin: 0 auto 20px auto;
    float: none;
}
#top_sns .box_wrap .box_friend, #top_sns .box_wrap .box_contact {
    width: 70%;
    margin: 0 auto 20px auto;
    float: none;
}
#top_sns .box_wrap .box_friend { min-height: auto!important;     padding: 30px;}
#footer .block_wrap {
    width: 94%;
}
#footer .block_wrap :is(h1,:where(.hx1)) img{max-width:180px; width:100%; height:auto}

.footer_tel p img{ height:auto; width:100%;max-width:150px;}
#footer .block_left{ width:34%}

#footer .block_right{ width:63%}
.footer_link li{ width:32%}


/*お問合せ&災害情報*/
.page_title01 :is(h1,:where(.hx1)) img{ max-width:400px}
#commonform{ width:94%}
#commonform input , #commonform textarea{width:100%}
#disaster01 .linkblock{ width:94%}
#disaster01 :is(h1,:where(.hx1)) img{ height:auto; width:100%;max-width:320px;}

/*ゆいすまオキナワのチカラ*/
#concept .conceptlist li {
    position: relative;
    padding: 16px 0 0 10px;
}
#concept .conceptlist li h2:not(:where(.hx1)) {
    font-size: 2rem;
    margin-bottom: 5px;
    font-weight: bold;
    line-height: 3.0rem;
}
#concept .conceptlist li .inner , #concept .conceptlist .conceptlist_li04 .inner, #concept .conceptlist .conceptlist_li06 .inner{
    padding: 36px 30px 60px 40px !important;
}

/*エリア紹介*/
#project .hukidashi_wrap {
    width: 100%;
}
.flowlist_li_orico p img{ height:auto; width:100%;max-width:500px;}
.flowlist_li_orico h2:not(:where(.hx1)) img{ height:auto; width:100%;max-width:480px;}
#flow .flowlist_li_orico .btn01{ width:98%}
#flow .flowlist_li_orico .btn01:before { left:40px}
#flow02 :is(h1,:where(.hx1)) img {
    max-width: 380px;
}
#top_menu p img{ height:auto; width:100%;max-width:60px;}

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

.reformnavi{ width:92%}
#plan_single02 .block_image, #reform_single02 .block_image {
    height: 190px;
}
#plan_single02 .block_text, #reform_single02 .block_text {
    height: auto;
    width: 50%;
}
#reform_single .product_list .icon_list img{ max-width:60px}
#reform_single .product_list h2:not(:where(.hx1)) img {max-height: 38px;}
#reform_single .box_price .price02 img{ width:80px}



/*施工実績*/
.worklist {
    width: 100%;
}
.worklist_li .box_wrap {
    height: 146px;
}

/*パックプラン*/

#plan_archive01 .icon_list img {
    max-width: 74px;
}
#plan_archive01 .planlist .block_image .image {
    height: 160px;
}
#plan_archive01 .btn01 {
    margin-top: 10px;
    width: 90%;
}

#plan_archive01 .box_price {
    position: relative;
    margin: 10px auto;
}
#plan_archive01 .icon_list {
    margin: 0px auto 10px auto;
}
#plan_archive01 .planlist .block_image span {
    margin-right: 0;
    font-size: 1.2rem;
}
#plan_archive .box_price .abimage {
    right: -90px;
    max-width: 80px;
}

/*イベント*/
#event .eventlist .box_half02 {width: 56%;}
#event .eventlist{ width:100%}
#event .eventlist .box_half01 a {
    height: 200px;
}
#event .eventlist .box_half01 .date_end  p span img{max-width:140px;}
dl.event_present dt{ width:21%}
#event_single01 #slider .pdf_btn{ right:30px}
#event_single01 #slider .abimage01 {
    top: -10px;
    left: 40px;
    z-index: 1;
    max-width: 90px;
}

/*リノスタ*/
#renosta03 .renosutalist > li{ width:94%}
#renosta03 .renosutalist li > .abimage {max-width:28px}


/*スタッフ紹介*/

#staff .staff_photo img {
    width: 160px;
    height: 160px;
}
#staff .stafflist .block_bottom .box_wrap{ padding:10px}
#staff .stafflist li .block_wrap {padding: 100px 15px 15px 15px;}
#staff .stafflist .block_bottom .box_wrap dt { width:22%}
#staff .stafflist .block_bottom {
    border-top: 1px solid #dddddd;
    margin-top: 10px;
    padding-top: 10px;
}
#staff .stafflist .block_bottom .box_wrap{margin-top:10px}

/*お知らせ*/
.entry-content img.size-full {
    max-width: 100%;
    height: auto;
}
/*モデル*/
#model_single03 .block_360 .iframewrap iframe, #model_single03 .block_360 .movie_wrap iframe {
    height: 380px;
}
#model_single03 .block_360 .iframewrap, #model_single03 .block_360 .movie_wrap {
    max-width: 1000px;
    width: 80vw;
}



}
/* ヒーローは画面いっぱい（固定ヘッダー70pxを除いた高さ）。下に溢れさせない */
#topImage,#top_slider,#top_slider .sp-mask,#top_slider .sp-slides,#top_slider .sp-slide,#top_slider .sp-image-container{height:calc(100vh - 70px) !important}
#top_slider .sp-image{height:calc(100vh - 70px) !important;width:100% !important;max-width:100% !important;object-fit:cover;object-position:center}
/* ===== ヒーロービュー（2026-09-06 支給モックの再現）=====
   モック941x1672 / ヘッダー下端136 / 帯上端1450 を基準に比率で配置する。
   色: ゆいすま #0068B0→#0B2A47 / 濃色 #101C2E / 黄 #F8E048 / 帯 #E0F0F8 */
#topImage.hero_v2{position:relative;width:100%;overflow:hidden;
  background-position:center center;background-repeat:no-repeat;background-size:cover}
#topImage.hero_v2 .hero_inner{position:relative;width:100%;height:100%}
#topImage.hero_v2 .hero_copy{position:absolute;left:5.8%;top:12.6%;width:58%;margin:0}
#topImage.hero_v2 .hero_hand{position:absolute;right:4.5%;top:5.4%;width:27%;margin:0}
#topImage.hero_v2 .hero_copy img,#topImage.hero_v2 .hero_hand img{width:100%;height:auto;display:block}
#topImage.hero_v2 .hero_badges{position:absolute;left:5.8%;top:50.7%;margin:0;padding:0;
  list-style:none;display:flex;align-items:flex-start}
#topImage.hero_v2 .hero_badges li{margin:0 2.1% 0 0;padding:0;list-style:none}
#topImage.hero_v2 .hero_badges li::before{display:none}
#topImage.hero_v2 .hero_badge{display:flex;flex-direction:column;align-items:center;justify-content:center;
  border-radius:50%;background:rgba(255,255,255,.93);text-align:center}
#topImage.hero_v2 .hero_badge img{width:32%;height:auto;margin:0 0 6% 0}
#topImage.hero_v2 .hero_badge em{font-style:normal;font-weight:700;color:#101C2E;display:block}
#topImage.hero_v2 .hero_cta{position:absolute;left:8.3%;right:8.3%;bottom:15.5%}
#topImage.hero_v2 .hero_btn{display:flex;align-items:center;justify-content:center;
  text-decoration:none;font-weight:700;position:relative;box-sizing:border-box}
#topImage.hero_v2 .hero_btn img{height:auto;margin-right:3%}
#topImage.hero_v2 .hero_btn01{background:#F8E048;color:#101C2E}
#topImage.hero_v2 .hero_btn02{background:#fff;color:#0062A4;border:2px solid #0062A4}
#topImage.hero_v2 .hero_btn::after{content:"";position:absolute;border-top:2px solid currentColor;
  border-right:2px solid currentColor;transform:rotate(45deg)}
#topImage.hero_v2 .hero_band{position:absolute;left:0;right:0;bottom:0;
  background-repeat:no-repeat;background-position:bottom center;background-size:100% 100%}

#topImage.hero_v2{margin-top:70px !important;height:calc(100vh - 70px) !important;min-height:640px;
  background-image:url(image/hero/bg_pc.png)}
#topImage.hero_v2 .hero_copy{left:6.5%;top:12%;width:27%}
#topImage.hero_v2 .hero_hand{right:8%;top:8%;width:15%}
#topImage.hero_v2 .hero_badges{left:6.5%;top:55.4%}
#topImage.hero_v2 .hero_badges li{margin-right:18px}
#topImage.hero_v2 .hero_badge{width:120px;height:120px}
#topImage.hero_v2 .hero_badge em{font-size:1.2rem;line-height:1.35}
#topImage.hero_v2 .hero_cta{left:6.5%;right:auto;width:31%;bottom:12.8%}
#topImage.hero_v2 .hero_btn{height:56px;border-radius:28px;font-size:1.8rem}
#topImage.hero_v2 .hero_btn01{margin-bottom:12px}
#topImage.hero_v2 .hero_btn img{width:28px}
#topImage.hero_v2 .hero_btn::after{right:24px;width:9px;height:9px}
#topImage.hero_v2 .hero_band{height:12%;background-image:url(image/hero/band_pc.png);background-size:100% 100%;background-position:bottom center}
/* ===== 実機指摘の修正（2026-09-06）===== */
#header .header_logo{position:relative}

#header .header_logo{width:112px !important;height:56px !important;
  background-position:left center !important;background-size:auto 46px !important}
/* 吹き出しが隙間なく並んで窮屈だったので間隔を入れる（2026-09-06 実機指摘）
   🔴2026-09-08判明：実際のクラス名は #top_concept ではなく .block_concept のため、
   このルールは一度も適用されていなかった（デッドセレクタ）。.block_concept に修正。 */
.block_concept .conceptlist{gap:8px}
.block_concept .conceptlist li{flex:1 1 0 !important;min-width:0}
.block_concept .conceptlist li img{width:100% !important;height:auto !important}
/* 吹き出しが写真背景に埋もれて読みにくいので、輪郭の内側に薄い白背景を敷く（2026-09-08指示） */
.block_concept .conceptlist li{border-radius:50%;background:rgba(255,255,255,.55);
  box-shadow:0 6px 18px rgba(16,28,46,.10)}
/* ヒーロー内を縦積みフレックスに（バッジとCTAの衝突防止・2026-09-06） */
#topImage.hero_v2 .hero_inner{display:flex !important;flex-direction:column;box-sizing:border-box;
  height:100% !important;padding:5% 0 15% !important}
#topImage.hero_v2 .hero_copy{position:static !important;margin:0 0 0 6.5% !important;width:27% !important}
#topImage.hero_v2 .hero_badges{position:static !important;margin:auto 0 24px 6.5% !important;top:auto !important;left:auto !important}
#topImage.hero_v2 .hero_cta{position:static !important;margin:0 0 0 6.5% !important;width:31% !important;
  left:auto !important;right:auto !important;bottom:auto !important}
/* padding の % は「幅」基準なので帯の高さと一致しなかった。変数で揃える（2026-09-06） */
#topImage.hero_v2{--band:clamp(70px,13vh,130px)}
#topImage.hero_v2 .hero_band{height:var(--band) !important}
#topImage.hero_v2 .hero_inner{padding:26px 0 calc(var(--band) + 14px) !important}
/* 画面の高さが低いPCでもCTAが帯に重ならないよう、キャッチとバッジを高さ基準でも抑える */
#topImage.hero_v2 .hero_copy{width:min(27%,34vh) !important}
#topImage.hero_v2 .hero_badge{width:min(120px,14vh) !important;height:min(120px,14vh) !important}
#topImage.hero_v2 .hero_badge em{font-size:min(1.2rem,1.7vh) !important}
/* CTA2つを白丸3つと左右の位置を揃える（2026-09-06 指示） */
#topImage.hero_v2{--bd:min(120px,14vh);--bgap:18px;--row:calc(var(--bd)*3 + var(--bgap)*2)}
#topImage.hero_v2 .hero_badges{width:var(--row) !important;margin-left:6.5% !important;margin-right:0 !important}
#topImage.hero_v2 .hero_badges li{flex:0 0 var(--bd) !important;margin-right:var(--bgap) !important}
#topImage.hero_v2 .hero_badges li:last-child{margin-right:0 !important}
#topImage.hero_v2 .hero_badge{width:var(--bd) !important;height:var(--bd) !important}
#topImage.hero_v2 .hero_cta{width:var(--row) !important;margin-left:6.5% !important;margin-right:0 !important}
/* 「にご相談を」を抜いた分、余白をキャッチの上下に均等配分（2026-09-06） */
#topImage.hero_v2 .hero_copy{margin-top:auto !important;margin-bottom:auto !important}
#topImage.hero_v2 .hero_badges{margin-top:0 !important}

/* ===== ヘッダー簡素化（2026-09-08 指示）：PC版のみ。LINEアイコンのみ・右寄せ、ハンバーガーと右上フローティングボタンは削除済み ===== */
#header .header_sns{float:right !important;margin:22px 3% 0 0 !important}

/* ===== ヘッダーを参考サイト(健祐会訪問看護 https://.../kenyukai/)基準にサイズ・配置を統一（2026-09-08指示）
   参考実測: header高さ78px／SNSアイコン36x36・右端から34px／ロゴは高さに応じて上下中央 ===== */
#header{height:78px !important}
#topImage.hero_v2{margin-top:78px !important;height:calc(100vh - 78px) !important}
#header .header_logo{margin-top:11px !important}
#header .header_sns{margin:21px 0 0 0 !important}
#header .header_sns li a{height:36px !important}
#header .header_sns li a img{height:100% !important;width:auto !important}
#gnavi .gnavi_li > a{padding:19px 0 !important}
#header .header_sns li{padding:0}

/* ===== ヒーロー：キャッチ「にご相談を」復元＋ブロック全体を拡大（2026-09-08 指示）
   支給モックは941x1672の縦長比率のまま%配置していたため、実際のPC横幅では
   キャッチ/バッジ/CTAが小さく左に寄って見えていた。copy.pngを3行版に差し替えた上で
   ブロック全体のスケールを底上げする。 ===== */
#topImage.hero_v2 .hero_copy{width:min(38%,44vh) !important}
#topImage.hero_v2{--bd:min(150px,16.5vh);--bgap:20px;--row:calc(var(--bd)*3 + var(--bgap)*2)}
#topImage.hero_v2 .hero_badge em{font-size:min(1.4rem,1.9vh) !important}
/* 写真の左端ギリギリだったので内側へ寄せる（2026-09-08 追加指示） */
#topImage.hero_v2 .hero_copy{margin-left:11% !important}
#topImage.hero_v2 .hero_badges{margin-left:11% !important}
#topImage.hero_v2 .hero_cta{margin-left:11% !important}
#topImage.hero_v2 .hero_btn{height:64px;border-radius:32px;font-size:2rem}
#topImage.hero_v2 .hero_btn img{width:32px}
#topImage.hero_v2 .hero_btn::after{right:28px;width:10px;height:10px}

/* キャッチ＋バッジ＋CTAのブロック全体を、ヒーロー写真の中で上下中央に（2026-09-08指示）
   以前はhero_copyだけにmargin:auto上下を付けていたため、バッジ+CTAが下に押し出されていた。
   ブロック単位でセンタリングするようflexのjustify-contentに切り替える。 */
#topImage.hero_v2 .hero_copy{margin-top:0 !important;margin-bottom:0 !important}
#topImage.hero_v2 .hero_badges{margin-top:24px !important;margin-bottom:0 !important}
#topImage.hero_v2 .hero_cta{margin-top:24px !important;margin-bottom:0 !important}
#topImage.hero_v2 .hero_inner{justify-content:center !important}
/* 下は帯の直前に+14pxの余白が入る計算式のため、上下差を消すため上側paddingを揃える */
#topImage.hero_v2 .hero_inner{padding-top:12px !important}

/* ===== 2026-09-08 再指摘（3回目）：画面の"中央"は上下中央ではなく画面（写真）の水平中央だった。
   CTAの枠が大きすぎる。波の帯が毎回見切れる。まとめて直す ===== */
/* 1) キャッチ＋バッジ＋CTAを写真の水平方向の中央に配置し直す（左11%固定をやめる） */
#topImage.hero_v2 .hero_inner{align-items:center !important}
#topImage.hero_v2 .hero_copy{margin-left:0 !important}
#topImage.hero_v2 .hero_badges{margin-left:0 !important}
#topImage.hero_v2 .hero_cta{margin-left:0 !important}
/* 2) CTAボタンを大きくしすぎたので、文字に対して適正なサイズへ縮小 */
#topImage.hero_v2 .hero_btn{height:52px !important;border-radius:26px !important;font-size:1.6rem !important}
#topImage.hero_v2 .hero_btn img{width:24px !important}
#topImage.hero_v2 .hero_btn::after{right:22px !important;width:8px !important;height:8px !important}
/* ===== 2026-09-08 再指摘（4回目）: ①帯を正しい縦横比(292/1920=15.21vw)にしたら帯自体が大きくなり、
   中身がさらに窮屈になってoverflow:hiddenで切れていた。②帯の縦横比を無視して押しつぶしていたので
   文字が横伸びして見えた。③ヘッダーのナビをkenyukaiのコード実測値(15px/700/#2a2a2a)に合わせる ===== */
/* ヒーロー高さは100vh基準に戻す（帯は下記②でpadding-bottomとして正しく確保されるので、
   高さを人為的に削る必要はなかった） */
#topImage.hero_v2{height:calc(100vh - 78px) !important;min-height:640px !important}
/* ① 帯が292px相当まで大きくなった分、中身をさらに縮小して確実に収まるようにする */
#topImage.hero_v2 .hero_copy{width:min(38%,26vh) !important}
#topImage.hero_v2{--bd:min(100px,10vh);--bgap:14px;--row:calc(var(--bd)*3 + var(--bgap)*2)}
#topImage.hero_v2 .hero_badge em{font-size:min(1.05rem,1.35vh) !important}
#topImage.hero_v2 .hero_badges{margin-top:12px !important}
#topImage.hero_v2 .hero_cta{margin-top:12px !important}
/* ② 帯は画像の実際の縦横比(292/1920)に合わせた高さにし、引き伸ばさず等倍表示する */
#topImage.hero_v2{--band:15.21vw}
#topImage.hero_v2 .hero_band{background-size:100% auto !important}
/* ③ ナビを参考サイト実測値に統一 */
#gnavi .gnavi_li > a > span{font-size:15px !important;font-weight:700 !important;color:#2a2a2a !important}

/* ===== 2026-09-08 再指摘（6回目）: 「画面中央」はやはり見栄えが悪いので左寄せに戻す。
   帯の実寸対応で縮めすぎたサイズも、実際に確保できる余白の範囲で戻す ===== */
#topImage.hero_v2 .hero_inner{align-items:flex-start !important}
#topImage.hero_v2 .hero_copy{margin-left:11% !important;width:min(38%,30vh) !important}
#topImage.hero_v2 .hero_badges{margin-left:11% !important}
#topImage.hero_v2 .hero_cta{margin-left:11% !important}
#topImage.hero_v2{--bd:min(120px,11vh);--bgap:14px;--row:calc(var(--bd)*3 + var(--bgap)*2)}
#topImage.hero_v2 .hero_badge em{font-size:min(1.15rem,1.5vh) !important}

/* ===== 2026-09-08 再指摘（5回目）: ヘッダーを健祐会と同じ構造（ナビ＋CTAボタン2つ＋アイコン）に。
   間隔・サイズは実測値をそのまま流用（色はゆいすまの既存パレットに置き換え）===== */
/* ナビ項目を固定幅160pxから可変幅・間隔22pxに（参考実測） */
#gnavi .gnavi_li{margin-right:22px !important}
#gnavi .gnavi_li:last-child{margin-right:0 !important}
#gnavi .gnavi_li > a{width:auto !important;padding:0 !important}
#gnavi{margin-right:22px !important}
/* 開閉インジケーター（参考実測: 7px四方・辺2px・45度回転のシェブロン） */
/* 2026-09-08指示「施工事例だけ記号がない」: サブメニューの有無に関わらず全項目に統一 */
#gnavi .gnavi_li > a::after{content:"";display:inline-block;width:6px;height:6px;
  margin-left:7px;margin-bottom:1px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg);vertical-align:middle}
/* CTAボタン2つ（参考実測: h36 / padding 9px 18px / radius26 / font14px 700 / ボタン間10px） */
#header .header_cta{float:right;display:flex;align-items:center;gap:10px;margin:21px 22px 0 0}
#header .header_cta_btn{display:inline-flex;align-items:center;justify-content:center;
  height:36px;padding:9px 18px;border-radius:26px;font-size:14px;font-weight:700;
  text-decoration:none;white-space:nowrap;box-sizing:border-box}
#header .header_cta_btn01{background:linear-gradient(135deg,#F8E048,#F4D63D 55%,#E8CE2E);color:#101C2E}
#header .header_cta_btn02{background:#fff;color:#356FA1;border:2px solid #356FA1}
#header .header_cta_caret{display:inline-block;width:6px;height:6px;margin-left:7px;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg)}

/* 🔴2026-09-08（2回目の指摘）ヘッダー内の要素の高さが揃っていなかった。
   実測: ロゴ・CTAボタン・LINEアイコンは中心Y=39 なのに、ナビ文字だけ中心Y=30.5（8.5pxのズレ）。
   原因は上の `#gnavi .gnavi_li > a{padding:0}` で縦の余白を消したまま縦中央揃えを入れ忘れたこと。
   #gnavi にヘッダーと同じ高さを与えてflexで縦中央に揃える（マジックナンバーで押し下げない）。 */
#gnavi{height:78px !important;display:flex !important;align-items:center !important;
  margin:0 22px 0 0 !important}
/* 元テーマの .gnavi_ul に margin-top:20px が残っており、flexの縦中央揃えが
   マージンボックス基準になるため10px下にズレる。ここで打ち消す */
#gnavi .gnavi_ul{display:flex !important;align-items:center !important;margin:0 !important}

/* ===== 2026-09-08 支給モック（Downloads\ChatGPT Image 2026年9月8日 11_55_34.png）に
   ヒーロー内のレイアウトを合わせる。文言は現状維持（ユーザー指示）。
   モック実測(幅1672px基準): コンテンツ左端 x197=11.7% ／ CTAボタン 274px=16.39%×2・間隔20px=1.2%
   ／ CTA行 全体33.97%・高さ60px ／ バッジ行 x213-994=46.8%・アイコン約38px＋2行テキスト・区切り線
   ／ 並び順は キャッチ → CTA → バッジ（現状はバッジが先だったので入れ替え） ===== */
/* 並び順の入れ替え（DOMは触らずflexのorderで） */
#topImage.hero_v2 .hero_hand{order:0}
#topImage.hero_v2 .hero_copy{order:1}
#topImage.hero_v2 .hero_cta{order:2}
#topImage.hero_v2 .hero_badges{order:3}
/* 左端をモック実測の11.7%に統一 */
/* 2026-09-08 支給の新ヒーロー画像（ChatGPT Image 13_58_10.png / 1672x941・左27%が透明の切り絵風）に差し替え。
   透過部分の下地は、画像のフチが白へ溶けるデザインなので白にする */
#topImage.hero_v2{background-color:#fff !important}

/* 2026-09-08 追加指示「キャッチもう少しだけ右」: モック実測の11.7%から14%へ。
   CTA・バッジも同じ量ずらして左端の揃えを保つ */
#topImage.hero_v2 .hero_copy,
#topImage.hero_v2 .hero_cta,
#topImage.hero_v2 .hero_badges{margin-left:14% !important;margin-right:0 !important}
/* 帯画像は上49行が完全に透明（実測）なので、その分だけ枠を詰めてキャッチの縦スペースを確保する。
   13vw なら切り落とすのは透明部分のみで、波の輪郭も文字も欠けない */
#topImage.hero_v2{--band:13vw}
/* キャッチは幅ではなく高さで決める（横幅の広いPCでも縦に溢れないようにするため）。
   モックのキャッチ幅は30%。この指定で約25%まで寄せられる */
#topImage.hero_v2 .hero_copy{width:auto !important;height:auto !important}
#topImage.hero_v2 .hero_copy img{width:auto !important;height:min(36vh,330px) !important;max-width:34vw}
/* CTA: 縦2段 → 横2列 */
#topImage.hero_v2 .hero_cta{display:flex !important;flex-direction:row !important;
  width:33.97% !important;gap:1.2% !important;margin-top:24px !important}
#topImage.hero_v2 .hero_btn{flex:1 1 0 !important;height:60px !important;border-radius:30px !important;
  margin:0 !important;font-size:1.7rem !important}
#topImage.hero_v2 .hero_btn img{width:26px !important;margin-right:10px !important}
#topImage.hero_v2 .hero_btn::after{right:20px !important;width:8px !important;height:8px !important}
/* バッジ: 白い丸 → アイコン＋2行テキストの横並び（区切り線つき） */
#topImage.hero_v2 .hero_badges{display:flex !important;width:auto !important;
  align-items:stretch !important;margin-top:22px !important}
#topImage.hero_v2 .hero_badges li{flex:0 0 auto !important;margin:0 !important;
  padding:2px 22px !important;display:flex !important;align-items:center !important}
#topImage.hero_v2 .hero_badges li:first-child{padding-left:0 !important}
#topImage.hero_v2 .hero_badges li:last-child{padding-right:0 !important}
#topImage.hero_v2 .hero_badges li + li{border-left:1px solid rgba(16,28,46,.3) !important}
#topImage.hero_v2 .hero_badge{flex-direction:row !important;align-items:center !important;
  justify-content:flex-start !important;width:auto !important;height:auto !important;
  border-radius:0 !important;background:transparent !important;text-align:left !important;gap:11px}
#topImage.hero_v2 .hero_badge img{width:42px !important;height:auto !important;margin:0 !important;
  filter:drop-shadow(0 0 9px rgba(255,255,255,.95)) drop-shadow(0 0 18px rgba(255,255,255,.8))}
#topImage.hero_v2 .hero_badge em{font-size:1.6rem !important;line-height:1.5 !important;
  white-space:nowrap;text-shadow:0 0 8px rgba(255,255,255,.95),0 0 16px rgba(255,255,255,.85)}

/* ===== 2026-09-08 指示「画像をちゃんと枠と分けて配置」(company#concept01)
   元テーマは透明イラスト用に margin-top:-20px・幅が枠(max-width:1100px)より広い(1197px/801px)
   という指定だったが、実写真に差し替えたため写真が枠の上端・右端をはみ出して文字と重なっていた。
   写真を枠の内側（.innerのpadding基準）に収める。 ===== */
#concept .conceptlist_li01 .image_size,
#concept .conceptlist_li02 .image_size,
#concept .conceptlist_li03 .image_size,
#concept .conceptlist_li04 .image_size{
  margin-top:24px !important;margin-left:0 !important;
  max-width:100% !important;width:100% !important}

/* ===== 2026-09-09指示「保証・アフターサービスは消したうえで、定期的なアフターフォローの
   枠を駆けつけやすい施工エリアとそろえる」: li03削除に伴い、残るli02(48%幅で左寄せ)を
   li01と同じフル幅カードに統一する(PC1250px超のレイアウトのみ48%指定が生きているため上書き) ===== */
#flow02 .securitylist_li02{width:100% !important;float:none !important}

/* ===== 2026-09-09指示「チカラ02/04も01/03と同じ枠内表示に統一」
   02/04は.innerの中にabimage(absolute)で配置され、CSS側で意図的に右下にはみ出させていた(下記参照)。
   HTML構造を01/03と同じ(.innerの外・通常のブロック表示)に揃えたため、はみ出し用の指定は不要になった。 ===== */

/* ===== 2026-09-08 指示「この青い帯も含めて抜け」: 波の帯セクション自体を撤去 ===== */
#topImage.hero_v2 .hero_band{display:none !important}
/* 帯の分だけ確保していた下部の余白を解除（そのままだと空白が残る） */
#topImage.hero_v2 .hero_inner{padding-bottom:26px !important}

/* ===== 2026-09-08「ゆいすまオキナワのチカラ」吹き出し3つが変に見える、を実測して修正 =====
   原因を実測して特定した3点:
   1) 3_image01(左)は尻尾がtail='right'、3_image02(右)は尻尾がtail='left'で、
      両端の吹き出しの尻尾が"中央の吹き出しへ向かって"生えていた
      → 3つが引き合う/重なるように見える主因（画像側は fix_balloon_20260908.py で
        尻尾なしの正円バッジに作り直し、円の形はCSS側だけが担うようにした）。
   2) 背景(back01.jpg)が室内+海の情報量の多い写真のため、白55%不透明度の
      半透明背景だけでは文字・輪郭のコントラストが弱く「浮いて見える」状態だった。
      不透明度を上げ、はっきりした白フチを追加して輪郭を明確にする。
   3) 3つの円の間隔が狭く(実測48px/直径288pxの約17%)窮屈だった。gapを広げる。 */
.block_concept .conceptlist{gap:28px}
.block_concept .conceptlist li{margin:30px 0 50px 0 !important}
.block_concept .conceptlist li{
  background:rgba(255,255,255,.86);
  border:3px solid rgba(255,255,255,.95);
  box-shadow:0 10px 26px rgba(16,28,46,.16);
}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .block_concept .conceptlist li{
    -webkit-backdrop-filter:blur(6px);
    backdrop-filter:blur(6px);
  }
}

/* 2026-09-08指示「お問合せCTAも矢印入れて」: LINEで相談ボタンと同じ▼を追加 */
#header .header_cta_btn01::after{content:"";display:inline-block;width:6px;height:6px;
  margin-left:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg)}

/* 2026-09-08指示「PC版だけロゴの横のテキスト(画像部分)を消して、テキストで記載して」
   logo.pngは家+ハイビスカスの絵とテキストが1枚に焼き込まれていたので、
   絵の部分だけ切り出した logo_icon_only.png に差し替え、テキストは実HTMLにする */
#header .header_logo{background-image:none !important;width:auto !important;height:56px !important}
#header .header_logo a{display:flex !important;align-items:center;gap:10px;height:100%}
#header .header_logo_icon{height:50px;width:auto;display:block}
#header .header_logo_text{display:flex;flex-direction:column;line-height:1.3}
#header .header_logo_text strong{font-size:2.25rem;font-weight:700;color:#101C2E;font-style:normal;white-space:nowrap}
#header .header_logo_text small{font-size:.72rem;color:#356FA1;font-weight:500}
#header .header_logo{height:68px !important;margin-top:5px !important}
#header .header_logo a{height:68px !important}
#header .header_logo_full{display:block;width:auto;height:68px;object-fit:contain}

/* 2026-09-08指示「フッターのロゴが白抜きになってて変」: ヘッダーと同じ方式（カラーアイコン+実テキスト）に統一 */
#footer .footer_logo_link{display:flex !important;align-items:center;gap:10px}
#footer .footer_logo_icon{height:40px !important;width:auto !important;max-width:none !important;display:block}
#footer .block_left :is(h1,:where(.hx1)){margin-bottom:16px}
#footer .footer_logo_text{display:flex;flex-direction:column;line-height:1.3;text-align:left}
#footer .footer_logo_text strong{font-size:1.1rem;font-weight:700;color:#fff;font-style:normal}
#footer .footer_logo_text small{font-size:.72rem;color:#DCEBF5;font-weight:500}

/* 2026-09-08指示「枠内に画像はいってる」(会社概要 チカラ02/04)への対応として
   右下に意図的にはみ出させていたが、2026-09-09に同じ指摘が再発したため方針転換。
   HTML構造を01/03と同じ(.inner外・通常表示)に変更したので、このルールは対象要素が無くなり無効化。 */

/* ===== 2026-09-08指示「セクションタイトルが画像になってるからテキストにして」
   PILで画像化していたためフォントが実際のテキストと違って見えたり、
   キャンバス幅が足りず文字が切れたりしていた。全部実テキストに差し替え。 ===== */
.img_title_text{
  display:inline-block;font-family:"Shippori Mincho","Noto Sans JP",serif;
  font-weight:900;color:#101C2E;font-size:2.6rem;line-height:1.3;letter-spacing:.02em;
}
/* 小見出し（おすすめポイント／お知らせ） */
.top_news_title :is(h1,:where(.hx1)) .img_title_text,
h3.mb10 .img_title_text{font-size:2rem;font-weight:700}
/* サイトメニュー（ハンバーガー用。PCでは非表示だが念のため） */
.modal_wrap :is(h1,:where(.hx1)) .img_title_text{font-size:2rem}

/* 2026-09-08指示「ハンバーガーメニューのアンカー機能してない」対応（SPと同根の問題）:
   #headerがposition:fixed;height:78pxで常時上に重なるため、
   アンカージャンプ先の見出しがヘッダーの下に隠れてジャンプしていないように見えていた。 */
html{scroll-padding-top:88px}

/* 2026-09-08指示「セクションタイトルに英語もつけてカッコよく」対応。
   img_title_text(実テキスト化した見出し)の直前に英語アイバウ(eyebrow)を追加。 */
.section_eyebrow{
  display:block;font-family:"Shippori Mincho","Noto Sans JP",serif;
  font-size:1.1rem;font-weight:700;letter-spacing:.18em;
  color:#356FA1;margin-bottom:6px;text-transform:uppercase;
}

/* 2026-09-09指示「代表挨拶(スタッフ1名)を中央揃えに」
   #staff .stafflistはjustify-content:space-betweenのflexで、複数名前提のレイアウトだった。
   現状スタッフ1名のため単独カードが左に寄って見える。中央揃えに上書き。 */
#staff .stafflist{justify-content:center !important}

/* 2026-09-24: 本文・メインキャッチをロゴ同系統の筆文字書体へ統一 */
body{font-family:"Shippori Mincho","Noto Sans JP",serif}
#topImage.hero_v2 .hero_copy{display:flex;flex-direction:column;align-items:flex-start;font-family:"Shippori Mincho","Noto Sans JP",serif;color:#101C2E;line-height:1.2;white-space:nowrap}
#topImage.hero_v2 .hero_copy_lead{display:block;font-size:min(3.2vw,5.4vh);font-weight:700;padding-bottom:.12em;border-bottom:.16em solid #F8E048}
#topImage.hero_v2 .hero_copy_name{display:block;font-size:min(6.7vw,11.2vh);font-weight:700;line-height:1.05;letter-spacing:.06em;color:#06134F;margin:.13em 0 .14em}
#topImage.hero_v2 .hero_copy_name span{color:#28751F}
#topImage.hero_v2 .hero_copy_sub{display:block;font-size:min(1.85vw,3.1vh);font-weight:700;line-height:1.55;letter-spacing:.04em}

/* 2026-10-01 お知らせ欄のボタン色: タグ色に合わせる／LINEは公式カラー */
#top_news .block_btn .btn_list_news{background:#8EBAC4}
#top_news .block_btn .btn_list_news p{color:#101C2E}
#top_news .block_btn .btn_list_blog{background:#356FA1}
#top_news .block_btn .btn_list_blog p{color:#fff}
#top_news .block_btn .btn_list_blog:after{filter:brightness(0) invert(1)}
#top_news .block_btn .btn_line_official{background:#06C755}
#top_news .block_btn .btn_line_official p{color:#fff;font-weight:600}
#top_news .block_btn .btn_line_official:after{filter:brightness(0) invert(1)}
#top_news .block_btn .btn_list_news:hover,#top_news .block_btn .btn_list_blog:hover,#top_news .block_btn .btn_line_official:hover{filter:brightness(1.06)}
#top_news .block_btn .btn_list_news{margin-bottom:14px}
#top_news .block_btn .btn_list_news:after{filter:brightness(0);opacity:.75}