@charset "utf-8";

#map {
height: 100%;
width: 95%;
margin: 0 auto;
}
@media screen and (max-width: 480px) {
#map {
width: 92%;
margin: 0 auto;
}
} html, body {
height: 100%;
margin: 0;
padding: 0;
} .flex01 {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-justify-content: space-between;
justify-content: space-between;
-webkit-align-items: stretch;
align-items: stretch;
}
@media screen and (max-width: 767px) {
.flex01 {
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
}
.flex02 {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-justify-content: center;
justify-content: center;
-webkit-align-items: stretch;
align-items: stretch;
}
.flex03 {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: flex-start;
justify-content: flex-start;
-webkit-align-items: stretch;
align-items: stretch;
}
@media screen and (max-width: 767px) {
.flex03{
-webkit-justify-content: space-between;
justify-content: space-between;
}
}
.fwb {
font-weight: bold;
}
.fw500 {
font-weight: 500;
} .underline{
background: linear-gradient(transparent 55%, #ffe0c2 55%);
} .ellipsis {
position: relative;
overflow: hidden;
line-height: 20px;
height:2.8em;
}
.ellipsis:before, .ellipsis:after {
position: absolute;
background: #fff;
}
.ellipsis:before {
content: "･･･";
bottom: 0;
right: 0;
padding:0 7px;
}
.ellipsis:after {
content: "";
width: 100%;
height: 100%;
} .select_map {
margin-top: 50px;
}
.select_ttl {
background: url(//www.hometech.co.jp/wp2024/wp-content/themes/hometech/img/hometech_map/hometech_map_bg.jpg);
background-size: cover;
color: #fff;
padding: 20px 2%;
max-width: 340px;
width: 100%;
flex-basis: 33%;
}
@media screen and (max-width: 767px) {
.select_ttl {
flex-basis: 100%;
text-align: center;
max-width: 100%;
margin-bottom: 25px;
}
}
.select_ttl01 {
font-size: 1.8rem;
letter-spacing: 0.05rem;
line-height: 1.6;
padding-top: 14px;
border-top: 1px solid #b5b5b5;
}
@media screen and (max-width: 767px) {
.select_ttl01 {
text-align: center;
}
}
.select_ttl02 {
font-size: 4.8rem;
letter-spacing: 0.1rem;
line-height: 1.2;
padding-bottom: 10px;
border-bottom: 1px solid #b5b5b5;
}
@media screen and (max-width: 767px) {
.select_ttl02 {
font-size: 2.8rem;
}
}
.select_search {
flex-basis: 66%;
}
@media screen and (max-width: 767px) {
.select_search {
flex-basis: 100%;
}
}
.select_txt01 {
font-weight: bold;
font-size: 1.8rem;
line-height: 2.2;
display: inline;
}
.select_txt02 {
font-weight: 500;
font-size: 1.4rem;
line-height: 1.8;
letter-spacing: 0.05rem;
margin: 20px 0 10px;
}
.select_search_input {
flex-basis: 73%;
font-size: 1.6rem;
border: 1px solid #565656;
border-radius: 5px;
font-family: "游ゴシック", "Yu Gothic", YuGothic, "メイリオ", Meiryo, "ＭＳ ゴシック", sans-serif;
padding: 0 1.6rem;
}
@media screen and (max-width:480px) {
.select_search_input {
flex-basis: 100%;
line-height: 40px;
margin-bottom: 10px;
}
}
@media screen and (max-width:640px) {
::-webkit-input-placeholder{
font-size: 14px;
}
::-moz-placeholder {
font-size: 14px;
}
:-ms-input-placeholder {
font-size: 14px;
}
}
.select_search_icon {
flex-basis: 26%;
}
@media screen and (max-width:480px) {
.select_search_icon {
flex-basis: 100%;
}
}
.select_search_icon input[type=button] {
line-height: 40px;
font-size: 1.6rem;
border: 1px solid #005c3f;
border-radius: 5px;
background-color: #005c3f;
color: #fff;
letter-spacing: 0.2rem;
font-weight: bold;
font-family: "FontAwesome", "游ゴシック", "Yu Gothic", YuGothic, "メイリオ", Meiryo, "ＭＳ ゴシック", sans-serif;
width: 100%;
transition:0.3s all;
}
@media screen and (max-width:480px) {
.select_search_icon input[type=button] {
line-height: 30px;
max-width: 150px;
margin: 0 auto;
display: block;
}
}
.select_search_icon input[type=button]:hover {
background-color: rgba(0,92,63,0.3);
color: #005c3f;
cursor: pointer;
} .select_category{
position: relative;
margin:30px auto 60px;
}
.select_category_inner{
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: flex-start;
justify-content: flex-start;
-webkit-align-items: stretch;
align-items: stretch;
}
.select_category .select_category_txt{
font-size: 14px;
margin-bottom: 10px;
font-weight: 500;
letter-spacing: 0.05rem;
}
.select_category ul li {
flex-basis: 16.66666%;
}
@media screen and (max-width: 960px) {
.select_category ul li {
flex-basis: 25%;
}
}
@media screen and (max-width: 767px) {
.select_category ul li {
flex-basis: 33.3333%;
}
}
@media screen and (max-width: 480px) {
.select_category ul li {
flex-basis: 50%;
}
}
.select_category ul li a{
display: block;
text-align: center;
margin-right:7%;
transition:.5s all;
margin-bottom: 10px;
line-height: 40px;
border: 1px solid #ff9934;
letter-spacing: 0.2rem;
font-weight: bold;
}
@media screen and (max-width: 1140px) {
.select_category ul li a{
font-size: 14px;
}
}
.select_category ul li a:hover{
background-color: #ff9934;
color: #fff;
}
.select_category ul li a .fas{
margin-left: 1rem;
}
@media screen and (max-width: 767px) { } .ttl_blog_detail {
margin: 0 auto 40px;
padding: 0;
border-bottom: 1px solid #adadad;
}
.new {
position: inherit;
}
.blog_newarea {
-webkit-flex-basis: 6%;
flex-basis: 6%;
min-width: 59px;
}
.ttl_blog {
font-size: 24px;
line-height: 36px;
letter-spacing: 0.05em;
-webkit-flex-basis: 94%;
flex-basis: 94%;
padding-left: 1%;
}
.ttl_blog span {
font-size: 18px;
}
.cms_detail_share {
margin: 1.4rem auto 0;
text-align: right;
}
.cms_detail_share .social_btn {
margin: 0 0 10px;
padding: 0;
}
@media screen and (max-width:1140px) {
.ttl_blog_detail {
max-width: 96%;
}
}
@media screen and (max-width:767px) {
.blog_newarea {
flex-basis: 70px;
margin-bottom: 20px;
}
.ttl_blog_detail {
margin-top: 50px;
max-width: 100%;
}
.ttl_blog {
flex-basis: 100%;
}
.cms_detail_share .social_btn {
text-align: right;
}
.cms_detail_share {
max-width: 1140px;
margin-top: 30px;
}
}
.ttl_blog_bottom {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-justify-content: space-between;
justify-content: space-between;
-webkit-align-items: start;
align-items: start;
}
@media screen and (min-width: 0px) and (max-width:640px) {
.ttl_blog_bottom {
display: block;
}
}
.detail_author {
width: 40%;
line-height: 1.8;
}
.detail_tagdate {
overflow: hidden;
width: 58%;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: flex-end;
justify-content: flex-end;
-webkit-align-items: center;
align-items: center;
}
@media screen and (min-width: 0px) and (max-width:640px) {
.detail_author {
width: 100%;
margin-bottom: 10px;
}
.detail_tagdate {
width: 100%;
-webkit-justify-content: flex-start;
justify-content: flex-start;
}
}
.detail_tagdate_label {
display: inline-block;
padding-bottom: 10px;
}
.blog_tag{
padding: 0 1% 10px;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: flex-end;
justify-content: flex-end;
}
.blog_tag span{
min-width:80px;
text-align: center;
display: inline-block;
padding:0 3%;
background-color: #f1f1f1;
box-shadow: 1px 1px 0px 1px #d6d6d6;
line-height: 1.9;
} .map_work_performance_bar {
text-align: center;
margin: 50px auto 120px;
}
.map_work_performance_bar .work_performance_bar {
position: static;
z-index: inherit;
border-radius: 0;
max-width: 600px;
min-height: inherit;
font-size: 22px;
margin: 0 auto;
background: #000;
color: #fff;
font-weight: normal;
letter-spacing: 0.3rem;
text-align: center;
line-height: 2.2;
}
@media screen and (max-width:640px) {
.map_work_performance_bar .work_performance_bar {
font-size: 16px;
}
}
.map_work_performance_bar .work_performance_num {
font-size: 48px;
display: block;
line-height: 1.4;
} .btn_bottom a {
font-size: 18px;	
margin: 40px auto 0 auto;
display: block;
width: 300px;
text-align: center;
padding: 20px;
background-color: #fff;
border: 1px solid #ffa347;
color: #ffa347;
transition: .5s all;
letter-spacing: 0.1em;
}
.btn_bottom a:hover {
background: #ffa347;
color: #fff;
}
.btn_bottom a i {
padding-right: 15px;
}
@media screen and (min-width: 0px) and (max-width:767px) {
.btn_bottom a {
width:96%;
padding:10px;
line-height: 24px;
}
} .read_more_works{
background:#fffaf5;
padding:30px 0 40px;
margin:50px auto 0;
}
.more_works_ttl{
border-bottom:1px solid #ccc;
margin:0 auto 35px;
background: transparent;
border-left: solid 5px #ffa347;
padding: 5px 20px;
}
.more_works_ttl .ttl_en,
.more_works_ttl .ttl_ja{
letter-spacing:0.05em;
font-weight:bold;
}
.more_works_ttl .ttl_en{
font-family: 'Josefin Sans', sans-serif;
font-size:3rem;
}
.more_works_ttl .ttl_ja{
color:#005c3f;
font-size:1.8rem;
padding:0 0 0 20px;
}
.more_works_list{
justify-content: flex-start;
}
.more_works_list li{
max-width:208px;
width:100%;
line-height:1.5;
}
.morelist_ttl{
height:1em;
}
.more_works_list li .ellipsis:before,
.more_works_list li .ellipsis:after{
background:#fffaf5;
}
.more_works_list li a{
}
.more_works_list li a:hover .morelist_img{
opacity:0.5;
}
.morelist_img{
margin:7px auto;
transition:.2s;
}
.morelist_img_inner{
position: relative;
height: 0;
overflow: hidden;
width: 100%;
padding-top:67.3%;
}
.morelist_img_inner img {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 100%;
}
.morelist_data{
text-align:right;
font-size:1.4rem;
}
@media screen and (min-width: 1141px) {
.more_works_list li:not(:last-child) {
margin-right: 1.2%;
}
}
@media screen and (max-width: 1140px) {
.more_works_list{
flex-wrap:wrap;
}
.more_works_list li{
max-width:none;
width:30%;
}
.more_works_list li:first-child,
.more_works_list li:nth-of-type(2){
width:48%;
margin:0 0 40px;
}
.more_works_list li:first-child{
margin-right:4%;
}
.more_works_list li:nth-of-type(3),
.more_works_list li:nth-of-type(4){
margin-right:5%;
}
}
@media screen and (max-width: 550px) {
.more_works_ttl .ttl_ja{
display:block;
padding: 10px 0;
}
}
@media screen and (max-width: 480px) {
.more_works_ttl .ttl_ja{
font-size:1.6rem;
}
.more_works_list li:nth-of-type(3) .morelist_ttl,
.more_works_list li:nth-of-type(4) .morelist_ttl,
.more_works_list li:nth-of-type(5) .morelist_ttl{
font-size:1.4rem;
height: 1.5em;
}
}
#map.shop_map{
height: 722px;
}
.shop_period{
width: 95%;
margin: 10px auto;
max-width: 1140px;
text-align: right;
}