/*
Theme Name: Yamaguchi-Re
Theme URI: https://yamaguchi-bankin-kyoto.com/
Description: Yamaguchi-Re
Version: 1.1
Author: NK
Author URI: https://yamaguchi-bankin-kyoto.com/
*/

@font-face{
  font-display: swap;
  font-weight: 500;
  font-style: normal;
  font-family: 'Montserrat';
  src:url('/fonts/Montserrat-VariableFont_wght.ttf') format('ttf'),
      url('fonts/Montserrat-VariableFont_wght.ttf') format('woff');
}

body {
    font-family: "Yu Gothic Medium", "游ゴシック Medium",YuGothic,"游ゴシック体","ヒラギノ角ゴ Pro W3", Hiragino Kaku Gothic ProN, "メイリオ", Meiryo, sans-serif;
    font-size: 15px;
    font-weight: 400;
    margin: 0;
    padding: 0;
}
* {
    box-sizing: border-box;
}
/* 　adjust  */
.mgt5 { margin-top: 5px!important}.mgt10 { margin-top: 10px!important}.mgt20 { margin-top: 20px!important}.mgt30 { margin-top: 30px!important}.mgt40 { margin-top: 40px!important}.mgt50 { margin-top: 50px!important}.mgt60 { margin-top: 60px!important}.mgt80 { margin-top: 80px!important}.mgt100 { margin-top: 100px!important}
.pdt5 { padding-top: 5px!important}.pdt10 { padding-top: 10px!important}.pdt20 { padding-top: 20px!important}.pdt30 { padding-top: 30px!important}.pdt40 { padding-top: 40px!important}.pdt50 { padding-top: 50px!important}.pdt60 { padding-top: 60px!important}.pdt80 { padding-top: 80px!important}

h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0px;
font-family: "Yu Gothic Medium", "游ゴシック Medium",YuGothic,"游ゴシック体","ヒラギノ角ゴ Pro W3", Hiragino Kaku Gothic ProN, "メイリオ", Meiryo, sans-serif;
}
h1 {
  font-size: 36px;
}
h2 {
  font-size: 24px;
  font-weight: 500;
}
h3 {
  font-size: 22px;
  font-weight: 600;
}
p {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.8;
  margin: 0px;
    font-family: "Yu Gothic Medium", "游ゴシック Medium",YuGothic,"游ゴシック体","ヒラギノ角ゴ Pro W3", Hiragino Kaku Gothic ProN, "メイリオ", Meiryo, sans-serif;
}
ul {
  padding: 0;
  margin: 0;
  list-style: none;
}
a,
a:active,
a:focus,
a:active {
  text-decoration: none !important;
  color: #333;
}
img {
    max-width: 100%;
}
.text-center {
    text-align: center;
}
#content {
    width: 100%;
    display: flex;
    max-width: 1480px;
    margin: auto;    
}
#main {
    flex-basis: 80%;
    max-width: 80%;
}
#main .container {
    width: 95%;
    margin: auto;
}
#sidecolumn {
    flex-basis: 20%;
    max-width: 20%;
    padding: 0px 30px 20px 10px;
    box-sizing: border-box;
}
#sidecolumn .widget {
    margin-bottom: 23px;
}
#sidecolumn .widget img{
    vertical-align: top;
}
#sidecolumn .widget p.small {
    margin-top: 3px;
    font-size: 11px;
    line-height: 1.4em;
    text-align: right;
}
.widget .btn {
    margin-top: 20px;
    position: relative;
    display: inline-block;
    text-align: center;
    padding: 1rem 2rem 1rem;
    border-radius: 4px;
    font-size: 15px;
    color: #f07343;
    font-weight: 600;
    line-height: 1;
    border:1px solid #f07343;
    transition: 0.3s;
}
.widget .btn .fa {
    transition: 0.3s;
}
.widget .btn:hover {
    background: #f07343;
    color: #fff;
}
.widget_menu {
    margin-bottom: 10px;
    padding: 5px;
}
.widget_menu a {
    display: flex;
    align-items: center;    
}
.widget_menu h3 {
    font-size: 14px;
    line-height: 1.4em;
}
.widget_menu .image-wrap img {
    vertical-align: top;
}
.widget.bnr a {
    display: block;
}
section.side-works{
    padding: 60px 0 0 0;
}
.side-works .midashi {
    margin: 40px 0 15px;
}
.side-works .midashi .midashi-heading{
    text-align: center;
	padding: 10px 5px 10px;
    margin: 10px auto 0;
    font-size: 16px;
    position: relative;    
}

section.side-works .midashi:before {
    bottom: -15px;
    height: 25px;    
}
.side-works .workslist li.news {
    align-items: center;
    padding: 10px 5px;
    border-bottom: 1px solid #C8C1B3;
    margin-bottom: 0;
    background: transparent;
}
.side-works .workslist li.news:first-child {
    border-top: 1px solid #C8C1B3;
}
.side-works .news_img {
   flex-basis: 35%;
}
.side-works .news_title {
    margin: 0;
    padding: 0 0 0 10px;
    font-weight: 500;
    flex-basis: 65%;
    box-sizing: border-box;
    line-height: 1.2em;
    font-size: 14px; 
}
.side-works .news_title a {
    font-size: 14px;    
}
.side-works .news_title::after {
    display: none;
}
.sidebar_cat {
    width: 90%;
    margin: 30px auto 0;
}
.sidebar_cat li {
    font-weight: bold;
}
.sidebar_cat li:first-child {
    border-top: 1px solid #C8C1B3;
}
.sidebar_cat li a {
    display: block;
    padding: 10px 5px 10px;
    border-bottom: 1px solid #C8C1B3;
}
@media (min-width: 1200px){
    .container {
        max-width: 1200px;
    }
 }
@media (max-width: 1200px) and (min-width: 992px){
    .contback-grayainer {
        max-width: 970px;
    }
    #content {
        max-width: 1120px;
    } 
    #main .container {
        width: 90%;
    }
 }
@media screen and (max-width:767px) {
    section {
        padding: 40px 0;
    }
    section.side-works{
        padding: 0px 0 0 0;
    }
    .breadcrumbs span{
        font-size: 13px;
    }
    #content {
        display: block;
    }
    #main, #sidecolumn {
        flex-basis: 100%;
        max-width: 100%;
        margin-bottom: 20px;
    }
    #main .container {
        width: 90%;
    }
    #sidecolumn {
        margin: 0px auto;
        padding: 0px 20px;
    }
    .widget_menu .flexbox.row2.margin .item{
        flex-basis: 50%;
        max-width: 50%;
        margin: 0;
    }
    .widget_menu h3 {
        font-size: 16px;
    }
    .widget_menu h3.item {
        padding-left: 10px;
    }
    #sidecolumn .widget {
        margin-bottom: 30px;
    }
}

/* -----------------------------------ヘッダー・固定関連----------------------------------- */
.page-wrap {
    position: relative;
    display: flex;
    flex-wrap: wrap;
}
.page-wrap-left {
    position: fixed;
    width: 21%;
    display: block;
    overflow-y: scroll;
    height: 100vh;
    scrollbar-width: none;
}
.page-wrap-left::-webkit-scrollbar{
    display: none;
  }
.page-wrap-right {
    position: relative;
    width: 79%;
    display: block;
    margin-left: 21%;
}

section.fix-bottom {
    bottom: 0%;
    width: 80%;
    position: fixed;
    z-index: 10;
    padding: 12px 0;
    background: rgb(0 0 0 / 70%);
    display: flex;
    justify-content: center;
}
.footer-fix-tel,
.footer-fix-mail,
.footer-fix-line {
    display: flex;
    align-items: center;
    justify-content: center;
}
.footer-fix-tel {
}
.footer-fix-mail {
    margin: 0;
    background: #f07343;
}
.footer-fix-mail,
.footer-fix-line {
    border-radius: 5px;
    text-align: center;
    transition: 0.3s;
}
.footer-fix-mail p,.footer-fix-line p {
    text-align: center;
    color: #fff;
    font-size: clamp(14px, 1.0vw, 15px);
    font-weight: 500;
    line-height: 1.3;
    text-shadow: 1px 1px 1px rgb(0 0 0 / 15%);
}
.footer-fix-tel p{
    text-align: center;
    color: #fff;
    font-size: clamp(14px, 1.0vw, 15px);
    font-weight: 500;
    line-height: 1.3;
    text-shadow: 1px 1px 1px rgb(0 0 0 / 20%);
    font-size: 19px;
    font-weight: bold;
}
.footer-fix-tel p span.nub{
    font-size: 1.2em;
    color: #fff;
    letter-spacing: 1px;
    font-weight: 600;
    font-family: serif;
    display: inline-block;
    line-height: 0.9em;
    margin-top: 5px;
}
.footer-fix-tel p span.time{
    font-size: 13px;
    display: block;
}
.footer-fix-mail a.contact span {
    font-size: 20px;
}
.footer-fix-mail a,
.footer-fix-line a {
    display: block;
    padding: 10px 15px;
    font-size: 17px;
    line-height: 1.3em;
    color: #ffffff;
    font-weight: 600;
}
.footer-fix-line {
    margin: 0 0 0 1%;
    background: #00ba3a;
}

.footer-fix-line a img {
    width: 30px;
    vertical-align: middle;
}
.footer-fix-line picture:hover{
    transition: 0.3s;
    opacity: 0.7;
}
.footer-fix-mail a:hover,.footer-fix-line a:hover {
    transform: translate(2px, 2px);
    box-shadow: none;
}
section.fix-area a {
    display: none;
}
@media screen and (min-width:1801px) {
    .page-wrap-left {
        width: 17%;
    }
    .page-wrap-right {
        width: 83%;
        margin-left: 17%;
    }
    section.fix-bottom {
        width: 83%;
    }
    .footer-fix-mail,.footer-fix-line {
        width: 20%;
    }
    .footer-fix-tel {
        width: 18%;
    }
}
@media screen and (min-width:1681px) and ( max-width:1800px) {
    .page-wrap-left {
        width: 18%;
    }
    .page-wrap-right {
        width: 82%;
        margin-left: 18%;
    }
    section.fix-bottom {
        width: 82%;
    }
    .footer-fix-mail,.footer-fix-line {
        width: 22%;
    }
    .footer-fix-tel {
        width: 19%;
    }
}
@media screen and (min-width:1561px) and ( max-width:1680px) {
    .page-wrap-left {
        width: 19%;
    }
    .page-wrap-right {
        width: 81%;
        margin-left: 19%;
    }
    section.fix-bottom {
        width: 81%;
    }
    .footer-fix-mail,.footer-fix-line {
        width: 23%;
    }
    .footer-fix-tel {
        width: 19%;
    }
}
@media screen and (min-width:1441px) and ( max-width:1560px) {
    .page-wrap-left {
        width: 20%;
    }
    .page-wrap-right {
        width: 80%;
        margin-left: 20%;
    }
    section.fix-bottom {
        width: 80%;
    }
    .footer-fix-mail,.footer-fix-line {
        width: 24%;
    }
    .footer-fix-tel {
        width: 22%;
    }
}
@media screen and ( max-width:1400px) {
    .page-wrap-left {
        width: 21%;
    }
    .page-wrap-right {
        width: 79%;
        margin-left: 21%;
    }
    section.fix-bottom {
        width: 79%;
    }
    .footer-fix-mail,.footer-fix-line {
        width: 25%;
    }
    .footer-fix-tel {
        width: 24%;
    }
}
header {
    /*width: 100%;
    position: fixed;
    display: flex;
    top: 0;
    align-items: center;
    height: 85px;
    background: #fff;
    z-index: 2;
    transition-duration: 0.5s;*/
}
.header-h1-wrap {
    margin-left: 2%;
    text-align: center;
    padding: 0 8%;
}
.header-h1-wrap h1 {
    font-size: 11px;
    padding: 5px 0 5px;
    font-weight: 500;
}
img.logo {
    width: 100%;
    display: block;
    margin: 10px auto 15px;
    max-width: 100%;
}
.desktop-nav01 ul {
    border-top: 1px #ccc dotted;
}
.desktop-nav01 ul a li {
    position: relative;
    font-size: 13px;
    line-height: 1.4;
    font-weight: bold;
    border-bottom: 1px #ccc dotted;
    padding: 5% 8%;
    text-shadow: 1px 1px 1px rgb(255 255 255 / 50%);
}
.desktop-nav01 ul a li:first-child {
    border-bottom: 1px #ccc solid;
}
.desktop-nav01 ul a li span{
    font-size: 24px;
    color: #222;
    font-weight: 600;
    font-family: serif;
    text-shadow: 1px 1px 0px rgb(0 0 0 / 10%);
}
.desktop-nav01 ul a:hover,.desktop-nav01 ul a:hover li span{
    color: #f07343;
    transition: 0.3s;
}
li.nav-about{
    background-image: url(images/menu/menu01.jpg);
    background-size: cover;
}
li.nav-roofrepair{
    background-image: url(images/menu/menu02.jpg);
    background-size: cover;
}
li.nav-leakage{
    background-image: url(images/menu/menu03.jpg);
    background-size: cover;
}
li.nav-bankin{
    background-image: url(images/menu/menu07.jpg);
    background-size: cover;
}
li.nav-service{
    background-image: url(images/menu/menu08.jpg);
    background-size: cover;
}
li.nav-price{
    background-image: url(images/menu/menu05.jpg);
    background-size: cover;
}
li.nav-works{
    background-image: url(images/menu/menu06.jpg);
    background-size: cover;
}
.desktop-nav01 ul a li:hover:after{
    transform: translateX(-10%);
    transition: 0.3s;
}
.desktop-nav02 {
    position: relative;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    padding: 5% 0 8%;
}
.desktop-nav02 a.works,.desktop-nav02 a.knowledge{
    width: 35%;
    margin: 0 3% 5%;
    display: grid;
    place-items: center;
    border-radius: 5px;
    border: 2px solid #333;
    padding: 20px 5px;
    font-size: 15px;
    font-weight: 500;
    text-align: center;
    background: #fff;
    box-shadow: 2px 2px 3px rgb(0 0 0 / 20%);
    transition: 0.3s;
}
.desktop-nav02 a.contact{
    border: 2px solid #f07343;
    width: 75%;
    display: grid;
    place-items: center;
    padding: 10px 12px;
    border-radius: 4px;
    font-size: 15px;
    line-height: 1.4em;
    color: #fff;
    text-shadow: 1px 1px 2px rgb(0 0 0 / 15%);
    font-weight: 500;
    text-align: center;
    background: #f07343;
    box-shadow: 2px 2px 3px rgb(0 0 0 / 20%);
    transition: 0.3s;
}
.desktop-nav02 a.works:hover,.desktop-nav02 a.knowledge:hover,.desktop-nav02 a.contact:hover{
    transform: translate(2px, 2px);
    box-shadow: none;
}
.txt-link {
    padding: 0 6% 5%;
}
.txt-link a {
    display: inline-block;
    width: 47%;
    margin: 0 1% 2%;
    font-size: 15px;
    font-weight: bold;
    transition: 0.3s;
}
.txt-link a:last-child {
    width: 100%;
}
.txt-link a:before{
    content: "\f138";
    font-weight: 900;
    font-family: "Font Awesome 6 Free";
    padding-right: 5px;
    color: #f07343;
}
.txt-link a:hover {
    color: #f07343;
}
.icon-link {
    width: 90%;
    margin:0px auto 0;
    display: flex;
    justify-content: center;
}
ul.icon-link li {
    width: 32%;
    text-align: center;
}
.icon-link li i{
    font-size: 30px;    
}
.icon-link li.line i{
    color: #06c755;    
}
.icon-link li.insta i{
    color: #FF0069;    
}
.icon-link li.tel i{
    color: #d2a7c7;    
}
.icon-link li.youtube i{
    color: #FF0000;    
}
.icon-link li p{
    font-size: 12px;
    line-height: 1.3em;
    letter-spacing: 0.05em;
    text-align: center;
}
.header-tel-wrap{
    display: block;
    position: relative;
    margin: 8% auto 0;
}
.header-tel-wrap p{
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
}
.header-tel-wrap p span.nub{
    font-size: 32px;
    font-weight: 600;
    color: #f07343;
    font-family: serif;
}
.header-tel-wrap p span.time{
    font-size: 13px;
    color: #686868;
}

.contact_list{
     display: none;
}


/*　ハンバーガーボタン　*/
.hamburger {
    display: none;
}
nav.globalMenuSp {
    display: none;
}
/* このクラスを、jQueryで付与・削除する */
nav.globalMenuSp.active {
  transform: translateX(0%);
  background: #333;
}
section.totop {
    position: relative;
    text-align: center;
    padding: 1.2vw 0;
    border-top: 2px solid #f07343;
}
a#page-top {
    display: inline-block;
    position: relative;
    font-weight: bold;
    letter-spacing: 1px;
    font-size: clamp(15px, 1.2vw, 16px);
    line-height: 1.5rem;
    color: #f07343;
    padding: 0;
}
a#page-top:before{
    display: inline-block;
    content: "\f102";
    font-weight: 900;
    font-family: "Font Awesome 6 Free";
    padding-right: 5px;
    color: #f07343;
}
a#page-top:hover::before{
transform: translate(0,-5px);
    transition: 0.3s;
}
a.works span {
    color: #04b6be;
    font-size: 2.3em;
    padding-bottom: 0.2em;
}
a.knowledge span {
    color: #fa0;
    font-size: 2.3em;
    padding-bottom: 0.2em;
}
a.contact span {
    font-size: 2.3em;
    padding-bottom: 0.1em;
}
main {
    position: relative;
    background: #fafafa;
}
section .midashi {
    position: relative;
    display: block;
    margin: 2vw auto 5.5vw;
    text-align: center;
}
section .midashi:before{
    content: "";
    position: absolute;
    left: 50%;
    bottom: -4.5vw;
    background: #222;
    width: 1px;
    height: 4vw;
}
section .midashi h2 {    
    position: relative;
    font-size: clamp(31px, 2.0vw, 35px);
    font-weight: bold;
    letter-spacing: 0.1rem;
    color: #222;
    z-index: 10;
    font-family: serif;
    text-shadow: #fcefd3;
}
section .midashi h2 span {
    font-size: clamp(24px, 1.8vw, 32px);
    display: block;
}
section .midashi h2::before,
section .midashi h2::after {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
section .midashi h2::before {
    content: attr(data-en);
    top: -5vw;
    color: #fbefde;
    font-size: 5.5vw;
    text-shadow: none;
    font-family: serif;
    font-style: italic;
    text-transform: none;
    z-index: -1;
}
section .midashi + p {
    text-align: center;
}
footer {
    background: #383838;
    padding: 4% 6% 150px;
}
.footer-top h3{
    color: #fff;
    font-size: clamp(20px, 1.4vw, 20px);
    font-weight: 500;
    border-bottom: 1px solid #7c7c7c;
    margin: 0 auto 1.5vw;
    padding: 0 0 1.5vw;
    font-family: serif;
}
.footer-wrap {
    display: flex;
    justify-content: space-evenly;
}
.footer-inner {
    display: block;
    width: 25%;
}
.footer-inner ul a:hover{
    transition: 0.3s;
    opacity: 0.7;
}
.footer-inner ul a li {
    color: #fff;
    font-size: clamp(13px, 1.1vw, 14px);
    padding: 0.5vw 0;
}
.footer-inner ul a li.layer {
    margin: 0 0 0 1rem;
}
.footer-inner ul a li:before{
    content: "\f105";
    font-weight: 900;
    font-family: "Font Awesome 6 Free";
    padding-right: 5px;
    color: #f07343;
}
.footer-inner ul a li.img-link:before,.footer-inner ul a li.footer-contact:before{
    content: none;
}
.footer-inner ul a li.footer-contact {
    border: 2px solid #f07343;
    width: 86%;
    margin: 0.6vw auto 0.8vw 0;
    display: grid;
    place-items: center;
    padding: 10px 15px;
    border-radius: 4px;
    font-size: 15px;
    color: #fff;
    text-shadow: 1px 1px 2px rgb(0 0 0 / 15%);
    font-weight: 500;
    text-align: center;
    background: #f07343;
    transition: 0.3s;
}
.footer-inner ul a li.footer-contact span {
    font-size: 2.0em;
    padding-bottom: 0.1em;
}
.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #7c7c7c;
    margin: 1.8vw auto 0;
    padding: 1.5vw 0 0;
}
.footer-bottom-left {
    display: flex;
    align-items: center;
}
.footer-bottom-left img.footer-logo{
    width: 17vw;
    max-width: 230px;
}
.footer-bottom-left .company-info {
    display: block;
    margin: 0 0 0 2vw;
}
.footer-bottom-left .company-info p {
    color: #fff;
    font-size: clamp(12px, 1vw, 13px);
}
.outer-link {
    display: flex;
    margin: 0.5vw auto 0;
    justify-content: space-between;
}
.outer-link a{
    width: 32.33%;
    text-align: center;
}
.outer-link img:hover{
   opacity: 0.8;
   transition: 0.3s;
}
li.img-link picture:hover,li.img-link img:hover {
    opacity: 0.8;
    transition: 0.3s;
}
.footer-bottom-right p{
    color: #fff;
    font-size: clamp(12px, 1vw, 13px);
}
.btn-wrap {
    position: relative;
    text-align: center;
    display: block;
    margin: 1vw auto;
}
.btn-wrap a.top-link{
    position: relative;
    display: inline-block;
    padding: 1.8rem 3rem 1.9rem;
    border-radius: 4px;
    font-size: clamp(16px, 1.2vw, 18px);
    color: #fff;
    text-shadow: 1px 1px 2px rgb(0 0 0 / 10%);
    font-weight: 600;
    line-height: 1;
    text-align: center;
    background: #f07343;
    /*background: linear-gradient(210deg, rgb(59 235 209) 0%, rgba(0,168,122,1) 100%);*/
    letter-spacing: 0.1em;
    box-shadow: 2px 2px 3px rgb(0 0 0 / 25%);
    transition: 0.3s;
}
.btn-wrap a.top-link:after {
    content: "\f101";
    font-weight: 900;
    font-family: "Font Awesome 6 Free";
    padding-left: 0.5em;
    color: #fff;
}
.btn-wrap a.top-link:hover {
    transform: translate(2px, 2px);
    box-shadow: none;
}
.sub-header {
    position: relative;
    padding: 6% 6%;
    background-image: url(images/sub-header-bg.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
.sub-header-wrap{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.sub-header-wrap .left{
    position: relative;
    width: 40%;
}
.sub-header-wrap .right{
    position: relative;
    width: 50%;
}
.sub-header-wrap h2{
    position: relative;
    font-size: clamp(30px, 2vw, 36px);
    font-weight: 600;
    font-family: serif;
    letter-spacing: 0.1rem;
    color: #fff;
    text-shadow: 1px 1px 1px rgb(0 0 0 / 20%);
}
.sub-header-wrap h2 span{
    display: block;
    font-size: 14px;
    font-family: 'Noto Sans JP';
    border-bottom: 1px solid #fff;
    padding: 0 0 10px;
    margin: 0 0 5px;
}
.sub-header-wrap p{
    font-size: clamp(14px, 1.1vw, 15px);
    line-height: 1.8;
    color: #fff;
    text-shadow: 1px 1px 1px rgb(0 0 0 / 20%);
}
section.bread {
    position: relative;
    padding: 2% 2%;
    background: #222;
    border-bottom: 1px solid #ccc;
}
.breadcrumbs {
    font-size: 13px;
    letter-spacing: 0.5px;
    color: #fff;
    width: 100%;
    font-weight: 600;
}
.breadcrumbs a {
    font-size: 13px;
    letter-spacing: 1px;
    color: #fff;
    font-weight: 400;
}
.breadcrumbs a:hover {
    color: #f07343;
    transition: 0.3s;
}
.breadcrumbs .fa {
    color: #f07343;
}
.breadcrumbs .fa {
    color: #f07343;
}

@media screen and (min-width:768px) and ( max-width:1024px) {
    .page-wrap-left,.page-wrap-right {
        position: relative;
        width: 100%;
        display: block;
        height: auto;
        margin: 0;
    }
    .desktop-nav01,.desktop-nav02{
        display: none;
    }
    header {
        width: 100%;
        position: fixed;
        display: flex;
        top: 0;
        align-items: center;
        height: 75px;
        background: #fff;
        z-index: 100;
        transition-duration: 0.5s;
    }
    header.hide {
        transform: translateY(-85px);
      } 
    .hamburger span {
      display : block;
      position: absolute;
      width   : 30px;
      height  : 2px ;
      left    : 27px;
      background : #fff;
      -webkit-transition: 0.3s ease-in-out;
      -moz-transition   : 0.3s ease-in-out;
      transition        : 0.3s ease-in-out;
    }
    .hamburger:hover {
        background: #f07343;
        transition: 0.3s;
    }
    /* ナビ開いてる時のボタン */
    .hamburger.active span:nth-child(1) {
    top: 50px;
        left: 27px;
      -webkit-transform: rotate(-45deg);
      -moz-transform   : rotate(-45deg);
      transform        : rotate(-45deg);
    }
    .hamburger.active span:nth-child(2),
    .hamburger.active span:nth-child(3) {
      top: 50px;
      -webkit-transform: rotate(45deg);
      -moz-transform   : rotate(45deg);
      transform        : rotate(45deg);
    }
    nav.globalMenuSp {
      position: fixed;
      z-index : 2;
      top  : 0px;
      left : 0;
      color: #000;
      background: #fff;
      text-align: center;
      transform: translateX(100%);
      transition: all 0.3s;
      width: 100%;
    }
    nav.globalMenuSp {
        display: block;
    }
    nav.globalMenuSp.active {
        position: fixed;
        top: 75px;
        transform: translateX(0%);
        background: #fff;
        overflow: scroll;
        height: 100%;
        -webkit-overflow-scrolling: touch;
    }
    .hamburger {
        display: block;
        position: fixed;
        z-index: 3;
        cursor: pointer;
        text-align: center;
        background: #f07343;
        right: 0px;
        top: 0px;
        width: 75px;
        height: 75px;
    }
    .nav-open{
        display: flex;
        margin: 0;
        flex-wrap: wrap;
        width: 100%;
    }
    .hamburger p {
        color: #fff;
        font-size: 11px;
        padding: 10px 5px 5px;
    }
    .hamburger span {
        width: 30px;
        height: 2px;
        left: 23px;
    }
    img.logo {
        width: 180px;
        margin-left: 0%;
        display: block;
        margin: 3px 0 0;
    }
    .hamburger span:nth-child(1) {
        top: 32px;
    }
    .hamburger span:nth-child(2) {
        top: 40px;
    }
    .hamburger span:nth-child(3) {
        top: 48px;
    }
    .hamburger.active span:nth-child(1) {
        top: 40px;
        left: 23px;
    }
    .hamburger.active span:nth-child(2), .hamburger.active span:nth-child(3) {
        top: 40px;
    }
    nav.globalMenuSp {
        top: 75px;
    }
    nav.globalMenuSp ul li a {
        padding: 1.6em 0;
    }
    .nav-open nav{
        width: 100%;
    }
    .nav-open ul {
        /*border-top: 1px #ccc dotted;*/
    }
    .nav-open ul a li {
        position: relative;
        font-size: 12px;
        letter-spacing: 1px;
        line-height: 1.3;
        font-weight: 500;
        border-bottom: 1px #ccc dotted;
        padding: 3% 8% 3%;
    }
    .nav-open ul a li span{
        font-size: 18px;
        color: #f07343;
        font-weight: 600;
    }
    .nav-open ul a:hover{
        color: #f07343;
        transition: 0.3s;
    }
    li.nav-about:after,li.nav-roofrepair:after,li.nav-leakage:after,li.nav-bankin:after,li.nav-service:after,li.nav-price:after {
        width: 60px;
        height: 60px;
        position: absolute;
        top: 10px;
        right: 15%;
        background-repeat: no-repeat;
    }
    .sp-nav02 {
        position: relative;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        padding: 5% 0 35%;
    }
    .sp-nav02 a.works,.sp-nav02 a.knowledge{
        width: 43%;
        margin: 0 1% 5%;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 5px;
        border: 2px solid #333;
        padding: 15px 5px;
        font-size: 15px;
        font-weight: 500;
    }
    .sp-nav02 a.contact{
        border: 2px solid #f07343;
        width: 75%;
        display: grid;
        place-items: center;
        padding: 10px 15px;
        border-radius: 5px;
        font-size: 16px;
        color: #fff;
        text-shadow: 1px 1px 2px rgb(0 0 0 / 15%);
        font-weight: 500;
        text-align: center;
        background: #f07343;
        box-shadow: 2px 2px 3px rgb(0 0 0 / 20%);
        transition: 0.3s;
    }
    .sp-nav02 a.works:hover,.sp-nav02 a.knowledge:hover,.sp-nav02 a.contact:hover{
        transform: translate(2px, 2px);
        box-shadow: none;
    }
    .txt-link {
        padding: 0 6% 3%;
    }
    .txt-link a {
        display: inline-block;
        width: 100%;
        margin: 0 1% 3%;
        font-size: 15px;
        font-weight: 500;
        transition: 0.3s;
    }
    .txt-link a:last-child {
        width: 100%;
    }
    .txt-link a:before{
        content: "\f138";
        font-weight: 900;
        font-family: "Font Awesome 6 Free";
        padding-right: 5px;
        color: #f07343;
    }
    .txt-link a:hover {
        color: #f07343;
    }
    
    a.works span {
        color: #04b6be;
        font-size: 1.5em;
        padding-bottom: 0;
        padding-right: 5px;
    }
    a.knowledge span {
        color: #fa0;
        font-size: 1.5em;
        padding-bottom: 0;
        padding-right: 5px;
    }
    a.contact span {
        font-size: 2.3em;
        padding-bottom: 0.1em;
    }
    .header-tel-wrap {
        margin: 6% auto 0;
    }
    .header-h1-wrap {
        margin-left: 2%;
        text-align: center;
        padding: 0 10% 0 1%;
    }
    .header-h1-wrap h1 {
        font-size: 10px;
        padding: 3px 0 0px;
    }
    section .midashi {
        position: relative;
        display: block;
        margin: 2.5vw auto 7.5vw;
        text-align: center;
    }
    section .midashi h2 {
        font-size: 24px;
    }
    section .midashi:before {
        content: "";
        position: absolute;
        left: 50%;
        bottom: -80%;
        height: 60%;
    }
    section .midashi h2::before {
       
        font-size: 53px;
        content: "";
    }
    section .midashi:before {
        content: "";
        position: absolute;
        left: 50%;
        bottom: -95%;
        height: 70%;
    }

    .footer-top h3 {
        font-size: 20px;
    }
    .footer-inner ul a li {
        font-size: 11px;
        padding: 0.9vw 0;
    }
    .footer-inner ul a li.footer-contact {
        border: 2px solid #f07343;
        width: 90%;
        padding: 10px 5px;
        font-size: 12px;
    }
    .footer-bottom-left .company-info p,.footer-bottom-right p {
        color: #fff;
        font-size: 10px;
    }
    section.fix-bottom {
        width: 100%;
        padding: 10px 0;
    }
    .footer-fix-tel,.footer-fix-mail, .footer-fix-line {
        width: 32.33%;
    }

    .sub-header {
        position: relative;
        margin: 75px 0 0;
        padding: 3% 3%;
    }
    .sub-header-wrap h2 {
        font-size: 24px;
    }
    .sub-header-wrap .left {
        position: relative;
        width: 47%;
    }
    .sub-header-wrap p {
        font-size: 13px;
        line-height: 1.7;
    }
    .breadcrumbs,.breadcrumbs a {
        font-size: 12px;
    }
    .footer-fix-tel p span.nub {
        font-size: 1.5em;
    }
    .footer-fix-mail a {
        padding: 10px 5px;
    }

    footer {
        padding: 4% 6% 125px;
    }
    .sub-header-wrap h2 span {
        display: block;
        font-size: 11px;
    }
    li.nav-about,li.nav-roofrepair,li.nav-leakage,li.nav-bankin,li.nav-service,li.nav-price,li.nav-works {
        background-size: auto;
        background-position: center right;
        background-repeat: no-repeat;
    }
}
@media screen and ( max-width:1024px) {
       .contact_list{
        position: absolute;
        top: 0;
        bottom: 8px;
        right: 76px;
        display: block;
    }
    .contact_list ul {
        font-size: 0;
    }
    .contact_list ul li {
        line-height: 1em;
        display: inline-block;
        height: auto;
        width: auto;
        padding: 0;
        vertical-align: top;    
    }
    .contact_list ul li a {
        padding: 4px 4px 1px;
        position: relative;
        width: 75px;
        height: 75px;
        background: #222;
        text-align: center;
        font-size: 16px;
        font-weight: bold;
        transition: all 0.3s ease;
        text-align: center;
        display: inline-block;
    }
    .contact_list ul li i {
        font-size: 24px;
        font-weight: 900;
        position: absolute;
        top: 20%;
        left: 0;
        right: 0;    
        transition: all 0.3s ease;
        color: #fff;
    }
    .contact_list ul li a p {
        font-size: 16px;
        color: #fff;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 5px;
    }
}
@media screen and (max-width: 767px) {
    .page-wrap-left,.page-wrap-right {
        position: relative;
        width: 100%;
        display: block;
        height: auto;
        margin: 0;
    }
    .desktop-nav01,.desktop-nav02{
        display: none;
    }
    header {
        width: 100%;
        position: fixed;
        display: flex;
        top: 0;
        align-items: center;
        height: 75px;
        background: #fff;
        z-index: 100;
        transition-duration: 0.5s;
    }
    header.hide {
        transform: translateY(-85px);
      }

    .hamburger span {
      display : block;
      position: absolute;
      width   : 30px;
      height  : 2px ;
      left    : 27px;
      background : #fff;
      -webkit-transition: 0.3s ease-in-out;
      -moz-transition   : 0.3s ease-in-out;
      transition        : 0.3s ease-in-out;
    }
    .hamburger:hover {
        background: #f07343;
        transition: 0.3s;
    }
    /* ナビ開いてる時のボタン */
    .hamburger.active span:nth-child(1) {
    top: 50px;
        left: 27px;
      -webkit-transform: rotate(-45deg);
      -moz-transform   : rotate(-45deg);
      transform        : rotate(-45deg);
    }
    .hamburger.active span:nth-child(2),
    .hamburger.active span:nth-child(3) {
      top: 50px;
      -webkit-transform: rotate(45deg);
      -moz-transform   : rotate(45deg);
      transform        : rotate(45deg);
    }
    nav.globalMenuSp {
      position: fixed;
      z-index : 2;
      top  : 0px;
      left : 0;
      color: #000;
      background: #fff;
      text-align: center;
      transform: translateX(100%);
      transition: all 0.3s;
      width: 100%;
    }
    nav.globalMenuSp {
        display: block;
    }
    nav.globalMenuSp.active {
        position: fixed;
        top: 75px;
        transform: translateX(0%);
        background: #fff;
        overflow: scroll;
        height: 100%;
        -webkit-overflow-scrolling: touch;
    }
    .hamburger {
        display: block;
        position: fixed;
        z-index: 3;
        cursor: pointer;
        text-align: center;
        background: #f07343;
        right: 0px;
        top: 0px;
        width: 75px;
        height: 75px;
    }
    .nav-open{
        display: flex;
        margin: 0;
        flex-wrap: wrap;
        width: 100%;
    }
    .hamburger p {
        color: #fff;
        font-size: 11px;
        padding: 10px 5px 5px;
    }
    .hamburger span {
        width: 30px;
        height: 2px;
        left: 23px;
    }
    img.logo {
        width: 165px;
        margin-left: 0%;
        display: block;
        margin: 0px 0 -3px;
    }
    .hamburger span:nth-child(1) {
        top: 32px;
    }
    .hamburger span:nth-child(2) {
        top: 40px;
    }
    .hamburger span:nth-child(3) {
        top: 48px;
    }
    .hamburger.active span:nth-child(1) {
        top: 40px;
        left: 23px;
    }
    .hamburger.active span:nth-child(2), .hamburger.active span:nth-child(3) {
        top: 40px;
    }
    nav.globalMenuSp {
        top: 75px;
    }
    nav.globalMenuSp ul li a {
        padding: 1.6em 0;
    }
    .nav-open nav{
        width: 100%;
    }
    .nav-open ul {
        /*border-top: 1px #ccc dotted;*/
    }
    .nav-open ul a li {
        position: relative;
        font-size: 12px;
        letter-spacing: 1px;
        line-height: 1.4;
        font-weight: 500;
        border-bottom: 1px #ccc dotted;
        padding: 3% 8% 3%;
    }
    .nav-open ul a li span{
        font-size: 18px;
        color: #f07343;
        font-weight: 600;
        font-family: serif;
    }
    .nav-open ul a:hover{
        color: #f07343;
        transition: 0.3s;
    }
    li.nav-about:after,li.nav-roofrepair:after,li.nav-leakage:after,li.nav-bankin:after,li.nav-service:after,li.nav-price:after {
        width: 40px;
        height: 40px;
        position: absolute;
        top: 10px;
        right: 8%;
        background-repeat: no-repeat;
    }
    .sp-nav02 {
        position: relative;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        padding: 5% 0 35%;
    }
    .sp-nav02 a.works,.sp-nav02 a.knowledge{
        width: 43%;
        margin: 0 1% 5%;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 5px;
        border: 2px solid #333;
        padding: 15px 5px;
        font-size: 15px;
        font-weight: 500;
    }
    .sp-nav02 a.contact{
        border: 2px solid #f07343;
        width: 75%;
        display: grid;
        place-items: center;
        padding: 10px 15px;
        border-radius: 5px;
        font-size: 16px;
        color: #fff;
        text-shadow: 1px 1px 2px rgb(0 0 0 / 15%);
        font-weight: 500;
        text-align: center;
        background: #f07343;
        box-shadow: 2px 2px 3px rgb(0 0 0 / 20%);
        transition: 0.3s;
    }
    .sp-nav02 a.works:hover,.sp-nav02 a.knowledge:hover,.sp-nav02 a.contact:hover{
        transform: translate(2px, 2px);
        box-shadow: none;
    }
    .txt-link {
        padding: 0 6% 3%;
    }
    .txt-link a {
        display: inline-block;
        width: 100%;
        margin: 0 1% 3%;
        font-size: 15px;
        font-weight: 500;
        transition: 0.3s;
    }
    .txt-link a:last-child {
        width: 100%;
    }
    .txt-link a:before{
        content: "\f138";
        font-weight: 900;
        font-family: "Font Awesome 6 Free";
        padding-right: 5px;
        color: #f07343;
    }
    .txt-link a:hover {
        color: #f07343;
    }
    .icon-link {
        margin-top: 20px;
    }
    a.works span {
        color: #04b6be;
        font-size: 1.5em;
        padding-bottom: 0;
        padding-right: 5px;
    }
    a.knowledge span {
        color: #fa0;
        font-size: 1.5em;
        padding-bottom: 0;
        padding-right: 5px;
    }
    a.contact span {
        font-size: 2.3em;
        padding-bottom: 0.1em;
    }
    .header-tel-wrap {
        margin: 6% auto 0;
    }
    #page-top{
        display: none;
    }
    .header-h1-wrap {
        width: 70%;
        margin-left: 2%;
        padding: 3px 0 5px;
    }
    .header-h1-wrap h1 {
        font-size: 10px;
        text-align: left;
        padding: 0px 0 0;
        line-height: 1.2;
        margin: 0 0 3px;
        font-weight: 500;
    }
    footer {
        padding: 10% 15px 110px;
    }
    .footer-wrap {
        display: flex;
        flex-wrap: wrap;
    }
    .footer-inner {
        display: block;
        width: 100%;
        margin: 0 auto 15px;
    }
    .footer-inner ul a li {
        color: #fff;
        font-size: 14px;
        padding: 10px 5px;
    }
    .footer-top h3 {
        font-size: 20px;
        margin: 0 auto 10px;
        padding: 0 0 15px;
    }
    .footer-inner ul a li.footer-contact {
        width: 99%;
        margin: 0 auto 15px;
        padding: 10px 0px;
        font-size: 15px;
    }
    .outer-link {
        margin: 10px auto 5px;
        justify-content: center;
    }
    .footer-bottom-left {
        display: flex;
        flex-wrap: wrap;
    }
    .footer-bottom-left img.footer-logo {
        width: 70%;
        max-width: 100%;
        display: block;
        margin: 20px auto;
    }
    .footer-bottom-left .company-info {
        display: block;
        margin: 0 auto;
        text-align: center;
    }
    .footer-bottom-left .company-info p {
        font-size: 11px;
    }
    .footer-bottom-right {
        text-align: center;
        display: block;
        margin: 20px auto 0;
    }
    .footer-bottom-right p {
        font-size: 11px;
    }
    section.totop {
        padding: 15px 0;
    }
    section .midashi {
        margin: 5vw auto 10vw;
        padding-bottom: 10px;
    }
    section .midashi h2 {
        font-size: clamp(24px, 5.8vw, 26px);
        text-shadow: 1px 1px 1px rgb(0 0 0 / 10%);
        line-height: 1.4em;
    }
    section .midashi h2::before {
        top: -30px;
        font-size: 12vw;
        content: "";
    }
    section .midashi h2 span {
        font-size: clamp(20px, 4vw, 22px);
}
    section .midashi:before {
        content: "";
        position: absolute;
        left: 50%;
        top: 100%;
        height: 7vw;
    }
    section .midashi + p {
        text-align: left;
    }
    li.img-link {
        text-align: center;
    }
    .btn-wrap a.top-link {
        padding: 1.5rem 1.5rem 1.6rem;
        font-size: 16px;
    }
    .btn-wrap {
        margin: 5vw auto;
    }
    section.fix-bottom {
        width: 100%;
        padding: 8px 0;
    }
    .footer-fix-tel,.footer-fix-mail,.footer-fix-line {
        width: 31.33%;
        justify-content: center;
        margin: 0 0.5% 0;
    }
    .footer-fix-tel p span.time {
        font-size: 10px;
        display: none;
    }
    .footer-fix-tel p span.nub {
        font-size: 20px;
    }
 
    section.fix-area{
        display: block;
    }
    section.fix-area{
        bottom: 85px;
        right: 0;
        position: fixed;
        z-index: 1;
        width: 40px;
    }
    section.fix-area a {
        display: block;
    }
    .fix-area-line{
        display: flex;
        padding: 0.8em 0em 0.8em 0em;
        background: #00ba3a;
        flex-direction: row-reverse;
        border-radius: 8px 0 0 8px;
        width: 100%;
        justify-content: center;
        display: none;
    }
    .fix-area-line .left{
        display: none;
    }
    .fix-area-line .left p{
        font-size: 11px;
        color: #fff;
        letter-spacing: 1px;
        font-weight: 600;
        text-shadow: 1px 1px 0px rgb(0 0 0 / 10%);
        -ms-writing-mode: tb-rl;
        writing-mode: vertical-rl;
    }
    .fix-area-line .right {
        width: auto;
    }
    .fix-area-line .right p{
        font-size: 12px;
        color: #fff;
        letter-spacing: 1px;
        font-weight: 600;
        line-height: 1.3;
        text-shadow: 1px 1px 0px rgb(0 0 0 / 10%);
        -ms-writing-mode: tb-rl;
        writing-mode: vertical-rl;
    }
    .fix-area-line .right img{
        width: 25px;
        display: block;
        margin: 0 auto 7px;
    }
    .fix-area-line p span {
        color: #faf800;
    }
    .sub-header {
        margin: 75px 0 0;
        padding: 10% 15px;
        background-image: url(images/sub-header-bg-sp.jpg);
    }
    .sub-header-wrap {
        flex-wrap: wrap;
    }
    .sub-header-wrap .left {
        width: 100%;
    }
    .sub-header-wrap .right {
        width: 100%;
    }
    .sub-header-wrap h2 {
        font-size: clamp(24px, 5.8vw, 26px);
        text-align: center;
        margin: 0 auto 20px;
    }
    .sub-header-wrap p {
        font-size: 13px;
    }
    section.bread {
        position: relative;
        padding: 3% 3%;
    }
    .breadcrumbs,.breadcrumbs a {
        font-size: 10px;
    }
    li.nav-about,li.nav-roofrepair,li.nav-leakage,li.nav-bankin,li.nav-service,li.nav-price,li.nav-works {
        background-size: contain;
        background-position: center right;
        background-repeat: no-repeat;
    }
}
@media screen and (max-width: 600px) {
    .fix-area-line .right p{
        display: none;
    }
    .fix-area-line .right img {     
        margin: 0 auto 0px;
    }
    .footer-fix-mail a, .footer-fix-line a{
        font-size: 15px;
        padding: 5px 10px;
    }
    .footer-fix-tel p span.nub {
        font-size: 18px;
        line-height: 1.2em;
        display: inline-block;
        margin-top: 5px;
    }
    .footer-fix-line a img {
        width: 24px;
    }
}
/*---トップスライダー---*/
/*.swiper.swiperMain.swiper-fade.swiper-initialized.swiper-horizontal.swiper-pointer-events.swiper-watch-progress.swiper-backface-hidden {
    height: 58vh;
}*/
.swiperThumbnail {
    margin: 1% 1% 0;
}
.slide01, .slide02, .slide03, .slide04{
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    padding-top: 50%;
}
.slide01{
    background-image: url(images/slide/hero-bg01.jpg);
}
.slide02{
    background-image: url(images/slide/hero-bg02.jpg);
}
.slide03{
    background-image: url(images/slide/hero-bg03.jpg);
}
.slide04{
    background-image: url(images/slide/hero-bg04.jpg);
}
.swiper-slide-thumb-active {
    border: 2px solid #f07343;
    box-sizing: border-box;
}
.swiper-slide-thumb-active img {
    margin: 0 0 -5px;
}
@media screen and (min-width:768px) and ( max-width:1024px) {
    .main-slider {
        margin: 75px 0 0;
    }
    /*.swiper.swiperMain.swiper-fade.swiper-initialized.swiper-horizontal.swiper-pointer-events.swiper-watch-progress.swiper-backface-hidden {
        height: 35vh;
    }*/
}
@media screen and (max-width: 767px) {
    section.main-slider {
        margin: 75px 0 0;
        padding: 0;
    }    
    .slide01, .slide02, .slide03, .slide04{
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        background-size: cover;
        width: 100%;
        height: 300px;
        padding-top: 80%;
    }
    .slide01{
        background-image: url(images/slide/hero-bg01-sp.jpg);
    }
    .slide02{
        background-image: url(images/slide/hero-bg02-sp.jpg);    
    }
    .slide03{
        background-image: url(images/slide/hero-bg03-sp.jpg);    
    }
    .slide04{
        background-image: url(images/slide/hero-bg04-sp.jpg); 
    }
}
/*---CTA---*/
section.cta {
    position: relative;
    z-index: 0;
    padding: 6%;
    background-image: url(images/cta-bg.jpg);
    background-position: center;
    background-size: cover;
}
section.cta::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: #fff;
    opacity: 0.5;
    z-index: -1;
}
.cta-wrap{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    background: rgb(255 255 255 / 90%);
    padding: 3% 5%;
    border-radius: 5px;
    box-shadow: 0 0 10px rgb(0 0 0 / 15%);
}
.cta-txt {
    width: 100%;
    margin: 0 auto 3vw;
    padding-bottom: 1vw;
    border-bottom: 1px solid #ccc;
}
.cta-txt h2 {
    text-align: center;
    font-size: clamp(24px, 1.8vw, 28px);
    font-weight: 600;
    color: #222;
    font-family: serif;
    margin: 0 auto 3px;
    text-shadow: 2px 2px 0px #f6e6c2;
}
.cta-txt p{
    font-size: clamp(16px, 1.2vw, 18px);
    text-align: center;
    font-weight: 500;
    color: #f07343;
}
.cta-tel{
    width: 32.3%;
    text-align: center;
    border-right: 1px dotted #ccc;
}
.cta-tel p{
    font-size: clamp(14px, 1.1vw, 15px);
    font-weight: 500;
    line-height: 1.4;
}
.cta-tel p span.nub{
    font-size: clamp(32px, 2.4vw, 38px);
    font-weight: 600;
    color: #f07343;
    font-family: serif;
}
.cta-tel p span.time{
    font-size: clamp(13px, 1.0vw, 14px);
    font-weight: 500;
    color: #686868;
}
.cta-tel p span.fa-solid.fa-phone{
    font-size: clamp(32px, 2.4vw, 38px);
    font-weight: 600;
    color: #f1c661;
    padding-bottom: 1vw;
}
.cta-mail{
    width: 33.3%;
    text-align: center;
    border-right: 1px dotted #ccc;
}
.cta-mail p,.cta-line p{
    font-size: clamp(14px, 1.1vw, 15px);
    font-weight: 500;
    line-height: 1.4;
}
.cta-mail p span.fa-solid.fa-envelope{
    font-size: clamp(34px, 2.4vw, 38px);
    font-weight: 600;
    color: #f1c661;
    padding-bottom: 1vw;
}
.cta-line p span.fa-brands.fa-line{
    font-size: clamp(38px, 2.4vw, 40px);
/*    font-weight: 600;*/
    color: #f1c661;
    padding-bottom: 0.8vw;
}
.cta-mail a.contact,.cta-line a.contact, .repair-menu-inner a.contact{
    border: 2px solid #f07343;
    width: 75%;
    display: block;
    margin: 1vw auto;
    padding: 15px 5px;
    border-radius: 4px;
    font-size: 16px;
    color: #fff;
    text-shadow: 1px 1px 2px rgb(0 0 0 / 15%);
    font-weight: 600;
    text-align: center;
    background: #f07343;
    box-shadow: 2px 2px 3px rgb(0 0 0 / 20%);
    transition: 0.3s;
}
.cta-line a.contact {
    background: #00ba3a;
    border: 2px solid #00ba3a;
}
.cta-mail a.contact:hover,.cta-line a.contact:hover,
.repair-menu-inner a.contact:hover{
    transform: translate(2px, 2px);
    box-shadow: none;
}
.cta-line{
    width: 33.3%;
    text-align: center;
}
@media screen and (min-width:768px) and ( max-width:1024px) {
    .cta-txt h2 {
        font-size: 20px;
    }
    .cta-txt p {
        font-size: 16px;
    }
    .cta-tel p,.cta-mail p, .cta-line p {
        font-size: 13px;
    }
    .cta-tel p span.time {
        font-size: 11px;
    }
    .cta-tel p span.nub {
        font-size: 20px;
    }
    .cta-mail a.contact, .cta-line a.contact {
        width: 80%;
        font-size: 12px;
    }
}
@media screen and (max-width: 767px) {
    section.cta {
        padding: 10% 15px;
        background-image: url(images/cta-bg-sp.jpg);
    }
    .cta-tel,.cta-mail {
        width: 100%;
        text-align: center;
        border-right: none;
        border-bottom: 1px dotted #ccc;
        padding: 0 0 20px;
        margin: 0 auto 20px;
    }
    .cta-line {
        width: 100%;
        text-align: center;
    }
    .cta-txt h2 {
        font-size: 20px;
        line-height: 1.5;
        margin: 0 auto 10px;
        text-shadow: 1px 1px 2px rgb(0 0 0 / 15%);
    }
    .cta-txt p {
        font-size: 16px;
        line-height: 1.4;
    }
    .cta-txt {
        width: 100%;
        margin: 0 auto 15px;
        padding-bottom: 15px;
    }
    .cta-wrap {
        padding: 10% 15px;
        border-radius: 8px;
    }
    .cta-mail a.contact, .cta-line a.contact {
        width: 80%;
        padding: 25px 5px;
        line-height: 1;
        font-size: 16px;
    }
    .cta-mail p span.fa-solid.fa-envelope {
        font-size: 42px;
        padding-bottom: 10px;
    }
    .cta-line p span.fa-brands.fa-line {
        font-size: 46px;
        padding-bottom: 10px;
    }
    .cta-mail p, .cta-line p {
        font-size: 15px;
        margin: 0 auto 10px;
    }
    .cta-tel p span.fa-solid.fa-phone {
        font-size: 40px;
        padding-bottom: 10px;
    }
    .cta-tel p {
        font-size: 15px;
    }
    .cta-tel p span.nub {
        font-size: 38px;
    }
}
/*---エリア---*/
section.area {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 7% 0 0;
}
section.area .midashi h2::before {
    content: 'Area';
}
.area-left {
    position: relative;
    width: 100%;
    padding: 0 7vw;
}
.area-right {
    width: 100%;
}
.area-right iframe{
    width: 100%;
}
.pref-area-wrap {
    padding: 0px 0px 30px;
}
.pref-area-wrap ul {
    text-align: left;
    padding: 5px 10px;
}
.pref-area-wrap ul li {
    display: inline-block;
    font-size: clamp(16px, 1.3vw, 16px);
    padding: 0.15vw 0;
}
.pref-area-wrap ul.ward {
    border-top: 1px #ccc solid;
    margin: 7px auto 0;
    padding: 5px 5px;
}
.pref-area-wrap ul.ward li {
    font-size: clamp(15px, 1.2vw, 15px);
}
.pref-area-wrap ul.ward li a , .pref-area-wrap ul li a{
    color: #f07343;
}
.pref-area-wrap ul li::after {
    content: "\ff5c";
}
.pref-area-wrap ul li:last-child:after {
    content: none;
}
.pref-area-wrap h3{
    text-align: center;
    margin: 20px auto 3%;
    font-size: 18px;
    line-height: 1.6;
}
@media screen and (min-width:768px) and ( max-width:1024px) {
    .area-left {
        padding: 0 5%;
    }
}
@media screen and (max-width: 767px) {
    section.area {
        padding: 10% 0 0;
    }
    .area-left {
        padding: 0 15px;
    }
    .pref-area-wrap ul {
        text-align: left;
        padding: 5px 0px;
    }
    .pref-area-wrap ul li {
        font-size: 14px;
    }
    .pref-area-wrap ul.ward li {
        font-size: 13px;
    }
    .pref-area-wrap h3 {
        text-align: left;
        margin: 20px auto 5%;
        font-size: 16px;
    }
}
/*---代表挨拶---*/
.banner-wrap {
    padding: 2% 3% 0%;
}
.banner-wrap .flexbox.row4.margin .item {
    text-align: center;
    margin: 0 0.5% 0px;
}

section.greeting{
    position: relative;
    padding: 7% 6% 6%;
}
section.greeting .midashi h2::before {
    content: 'Greeting';
}
.greeting-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
.greeting-wrap .greeting-img {
    width: 32%;
}
.greeting-wrap .greeting-img img {
    max-width: 300px;
}
.greeting-wrap .greeting-txt{
    width: 65%;
    margin: 0 3% 0 0;
}
.greeting-wrap .greeting-txt p {
    margin: 0 auto 3.5%;
    font-size: clamp(16px, 1.2vw, 16px);
    line-height: 1.9;
}
.greeting-wrap p.chief{
    font-size: clamp(14px, 1.2vw, 16px);
    font-family: serif;
    font-weight: 600;
    margin: 0 auto 6%;
}
.greeting-wrap p.chief span{
    font-size: clamp(20px, 1.6vw, 22px);
 }
.movie-wrap {   
    text-align: center;
    margin: 0px auto 0px;
}
.movie-wrap iframe{
     max-width: 900px;
    width: 100%;
    height: auto;
    aspect-ratio: 16/9;
}
@media screen and (min-width:768px) and ( max-width:1024px) {
    section.greeting {
        padding: 7% 5%;
    }
    .greeting-wrap .greeting-txt p {
        margin: 0 auto 15px;
        font-size: 14px;
        line-height: 1.9;
    }
    .greeting-wrap .greeting-txt p.chief {
        font-size: 18px;
    }
}
@media screen and (max-width: 767px) {
    section.greeting {
        position: relative;
        padding: 10% 15px;
    }
    .greeting-wrap .greeting-img {
        width: 80%;
        display: block;
        margin: 0 auto 15px;
    }
    .greeting-wrap .greeting-img img {
        max-width: 100%;
    } 
    .greeting-wrap .greeting-txt {
        width: 100%;
        margin: 0;
    }
    .greeting-wrap .greeting-txt p {
        margin: 0 auto 15px;
        font-size: 15px;
        line-height: 1.8;
    }
    .greeting-wrap img{
        border-radius: 8px;
    }
    .greeting-wrap .greeting-txt p.chief {
        margin: 0 auto 10%;
    }
}

section.reason{
    position: relative;
}
/*---選ばれる理由---*/
section.reason {
    position: relative;
    padding: 5% 4% 5%;
    /*background: rgba(241, 198, 97, 0.1);*/
}
section.reason .midashi h2::before {
    content: 'Reason';
}
.reason-wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 100px;
}
.reason-inner {
    position: relative;
    width: 22.5%;
    margin: 0 1% 4%;
    background: #fff;
    padding: 10px 12px 10px;
}
.reason-inner picture{
    display: block;
    margin: 0 auto 0.5vw;
}
.reason-inner h3 {
    font-size: clamp(19px, 1.3vw, 21px);
    font-weight: 600;
    text-align: center;
    margin: 0 auto 0.9vw;
    color: #f07343;
    line-height: 1.4em;
}
.reason-inner p {
    font-size: clamp(15px, 0.8vw, 16px);
    font-weight: 500;
    line-height: 1.6;
}
.reason-inner::before {
    content: attr(data-number);
    position: absolute;
    top: -4%;
    left: -6%;
    font-size: 3.5vw;
    font-weight: 900;
    color: #f07343;
    text-shadow: 2px 2px 2px #fff;
    font-family: serif;
}
.reason-inner::after {
    content: "reason";
    position: absolute;
    top: -5%;
    left: -4%;
    font-size: 1vw;
     color: #f07343;
    text-shadow: 2px 2px 2px #fff;
    font-family: serif;
    text-align: center;
    font-style: italic;
}
.reason-top{
    display: flex;
    align-items: center;
}
.reason-top .left{
    width: 50%;
    padding: 0 4%;
}
.reason-top:nth-child(1) .right{
    width: 50%;
    background-image: url(images/reason-bg01.jpg);
    background-size: cover;
    background-position: center;
    height: 450px;
}
.reason-top:nth-child(2){
    display: flex;
    align-items: center;
}
.reason-top:nth-child(2) .left{
    width: 50%;
    background-image: url(images/reason-bg02.jpg);
    background-size: cover;
    background-position: center;
    height: 400px;
}
.reason-top:nth-child(3) .right{
    width: 50%;
    background-image: url(images/reason-bg03.jpg);
    background-size: cover;
    background-position: center;
    height: 450px;
}
/*.reason-bottom .left{
    width: 50%;
    background-image: url(images/reason-bg02.jpg);
    background-size: cover;
    background-position: center;
    height: 400px;
}*/
.reason-top:nth-child(2) .right{
    width: 50%;
    padding: 0 4%;
}
.reason-top .left p,.reason-top:nth-child(2) .right p{
    font-size: 15px;
    margin-bottom: 10px;
}
.reason-top:nth-child(2) .right h2,.reason-top .left h2{
    font-size: 24px;
    text-shadow: 1px 1px 1px rgb(0 0 0 / 10%);
    font-weight: 600;
    font-family: serif;
    letter-spacing: 1px;
    padding: 10px 10px 9px;
    margin: 0 auto 20px;
    border-top: 3px solid #f07343;
    border-bottom: 1px solid #f07343;
}
.reason-img {
    position: relative;
}
.reason-img::after {
    position: absolute;
    content: "";
    left: 0;
    right: 0;
    height: calc(42px / 2);
    width: 42px;
    clip-path: polygon(0 0, 100% 0%, 50% 100%);
    background: #f07343;
    margin: auto;
    bottom: -36px;
}
@media screen and (min-width:768px) and ( max-width:1024px) {
    .reason-top:nth-child(2) .right h2, .reason-top .left h2 {
        font-size: 16px;
    }
    .reason-top .left p {
        font-size: 13px;
    }
    .reason-top:nth-child(2) .right,.reason-top .left {
        width: 44%;
        padding: 0 3%;
    }
}
@media screen and (max-width: 767px) {
    section.reason {
        position: relative;
        padding: 10% 15px 4%;
    }
    .reason-wrap {
        margin-top: 60px;
    }
    .reason-inner {
        width: 95%;
        margin: 0 auto 11%;  
    }
     .reason-inner h3 {    
        margin: 10px auto 7px;      
    }
    .reason-top {
        flex-direction: column;
    }
    .reason-top:nth-child(2) {
        flex-direction: column;
        flex-direction: column-reverse;
    }
    .reason-top .right,.reason-top:nth-child(2) .left {
        width: 100%;
        height: 200px;
    }
    .reason-top .left,.reason-top:nth-child(2) .right {
        width: 98%;
        height: auto;
        padding: 30px 1%;
    }
    .reason-top:nth-child(2) .right h2, .reason-top .left h2 {
        font-size: 20px;
        line-height: 1.3;
        padding: 10px 0px 9px;
    }
    .reason-top:nth-child(1) .right,
    .reason-top:nth-child(2) .left,
    .reason-top:nth-child(3) .right{
        width: 100%;
        height: 300px;
    } 
    .reason-inner::before {
        top: 0;
        left: 0;
        font-size: 50px;
    }
    .reason-inner::after {
        top: -1%;
        left: 0;
        font-size: 16px;
        line-height: 1.2em;
    }
    
}
@media screen and (max-width: 600px) {
   .reason-inner img {
        width: 100%;
    }
}
/*---トップめにゅー---*/
.top-menu-wrap{
    display: flex;
    flex-wrap: wrap;
 
}
.top-menu-wrap .roofrepair{
    position: relative;
    z-index: 0;
    width: 50%;
    padding: 0 0 5%;
    background: url(images/roofrepair-bg.jpg) no-repeat center center / cover;
    display: flex;
    flex-direction: column
}
.top-menu-wrap .roofrepair::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: #222;
    opacity: 0.75;
    filter: brightness(80%);
    z-index: -1;
}
.top-menu-wrap .roofrepair h2,.top-menu-wrap .leakage h2{
    color: #fff;
    text-align: center;
    padding: 10% 0 3%;
    font-weight: 600;
    font-family: serif;
    border-bottom: 1px #ccc solid;
    letter-spacing: 0.1rem;
    font-size: clamp(26px, 1.8vw, 28px);
    text-shadow: 1px 1px 1px hsl(0deg 0% 0% / 20%);
}
.top-menu-wrap .roofrepair p, .top-menu-wrap .leakage p {
    color: #fff;
    padding: 3% 10% 3%;
    font-size: clamp(15px, 1.1vw, 16px);
    line-height: 1.9;
    text-shadow: 1px 1px 1px hsl(0deg 0% 0% / 20%);
}
.top-menu-wrap .leakage{
    position: relative;
    z-index: 0;
    width: 50%;
    padding: 0 0 5%;
    background: url(images/leakage-bg.jpg) no-repeat center center / cover;
    display: flex;
    flex-direction: column
}
.top-menu-wrap .leakage::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: #222;
    opacity: 0.75;
    filter: brightness(70%);
    z-index: -1;
}
@media screen and (min-width:768px) and ( max-width:1024px) {
    .top-menu-wrap .roofrepair h2, .top-menu-wrap .leakage h2 {
        font-size: 22px;
    }
    .top-menu-wrap .roofrepair p, .top-menu-wrap .leakage p {
        font-size: 14px;
    }
}
@media screen and (max-width: 767px) {
    .top-menu-wrap .roofrepair,.top-menu-wrap .leakage {
        width: 100%;
        padding: 0 0 10%;
    }
    .top-menu-wrap .roofrepair h2, .top-menu-wrap .leakage h2 {
        color: #fff;
        text-align: center;
        padding: 11% 0 15px;
        font-size: 24px;
    }
    .top-menu-wrap .roofrepair p, .top-menu-wrap .leakage p {
        padding: 15px 15px 15px;
        font-size: 15px;
        line-height: 1.9;
    }
    .top-menu-wrap .roofrepair::before,.top-menu-wrap .leakage::before {
        filter: brightness(50%);
    }
}
/*---トップページ施工実績---*/
section.top-works {
    position: relative;
    padding: 6% 5% 5%;
    background: #f5f5f5;
}
section.top-works .midashi h2::before {
    content: 'Works';
}
.top-works-roof,.top-works-leak{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto 4%;
    padding: 0 0 5%;
    border-bottom: 1px solid #ccc;
}
.top-works-other{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto 0;
    padding: 0;
}
.top-works-txt {
    width: 27%;
    padding: 0% 0 0;
}
.top-works-txt h3 {
    position: relative;
    font-size: 27px;
    font-weight: 600;
    letter-spacing: 0.1rem;
    color: #f07343;
    font-family: serif;
    text-align: center;
    text-shadow: 1px 1px 1px rgb(0 0 0 / 10%);
}
.top-works-txt p{
    font-size: clamp(15px, 1.1vw, 15px);
    line-height: 1.6;
    font-weight: 500;
    padding: 0.8rem 0 1.2rem;
    color: #333;
}
.top-works-txt a{
    display: block;
    line-height: 1;
    font-size: 16px;
    color: #fff;
    text-align: center;
    background: #f07343;
    font-weight: 600;
    letter-spacing: 1px;
    padding: 1.5rem 0.5rem 1.6rem;
    border-radius: 4px;
    margin: 0 auto;
    text-shadow: 1px 1px 2px rgb(0 0 0 / 15%);
    box-shadow: 2px 2px 3px rgb(0 0 0 / 20%);
    transition: 0.3s;
}
.top-works-txt a:hover {
    transform: translate(2px, 2px);
    box-shadow: none;
}
.top-works-txt a:after {
    content: "\f101";
    font-weight: 900;
    font-family: "Font Awesome 6 Free";
    padding-left: 0.5em;
    color: #fff;
}
.top-works-slide {
    width: 68%;
}
.top-hoken-work {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 90%;
    margin: auto;
}
.top-hoken-work li.item.news {
    width: 30.33%;
    margin: 0 1.5% 20px;
}
.works-inner{
    border-radius: 4%;
    background: #fff;
    width: 95%;
    display: block;
    margin: 0 auto;
}
.works-inner img {
    border-radius: 4% 4% 0 0;
    width: 100%;
    object-fit: cover;
}
.works-inner h3{
    font-size: 17px;
    line-height: 1.4;
    font-weight: 600;
    color: #222;
    word-break: break-word;
    padding: 0.4rem 0.7rem 0rem;
}
.works-inner p.date{
    font-size: 13px;
    padding: 0.2rem 0.7rem 0.7rem;
    text-align: right;
    color: #555;
    font-weight: 500;
}
.top-works-slide a:hover{
    opacity: 0.7;
    transition: 0.3s;
}
.slick-prev:before {
    content: "\f0a8";
    font-weight: 900;
    font-family: "Font Awesome 6 Free";
    color: #f07343;
    font-size: 1.6vw;
    opacity: 1;
}
.slick-next:before {
    content: "\f0a9";
    font-weight: 900;
    font-family: "Font Awesome 6 Free";
    color: #f07343;
    font-size: 1.6vw;
    opacity: 1;
}
.slick-prev {
    left: -3.5%;
}
.slick-next {
    right: -3.0%;
}


.works-blog-wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.works-blog-wrap > .works-inner.item.news {
    width: 23%;
}
.item.news {
    transition: all .3s ease;
    -webkit-transition: all .3s ease;
    position: relative;
    background-color: #fff;
    padding: 10px;
    width: 98%;
    margin: 0 0.2% 20px;
    box-sizing: border-box;
}
.item a.blocklink{
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
.item.news:hover {
    background-color:rgba(199, 199, 198, 0.1);
    z-index: 999;
    position: relative;
}
.workslist li.news .item {
    position: relative;
    margin-bottom: 0;
}
.workslist li.news .item.archive_pic {
    padding-right: 20px;
}
.news_textbox {
    padding: 0 5px 5px;
    position: relative;
}
/* アップロードした画像の縦横比を固定して表示 */
.news_img figure {
    position: relative;
    overflow: hidden;
    padding-top: 67.64%;
    margin: 0 0 0;
}
.news_img figure img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 100%;
} 

.workslist .news_img.row2 {
    position: relative;
    overflow: hidden;
    padding-top: 67.64%;
    margin: 0 0 0;
}
.workslist .news_img.row2 .item {
    flex-basis: 50%;
    max-width: 50%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);    
    width: 100%;
    height: 100%;
    margin: 0;
}
.workslist .news_img.row2 .item:first-child{
    left: 0%;
}
.workslist .news_img.row2 .item:last-child{
    right: 0%;
}
.news_img.row2 .text {
    position: absolute;
    padding: 2px 10px;
    background: #0f70b9;
    color: #fff;
    font-size: 13px;
    font-family: 'Roboto Slab', serif;
    letter-spacing: 0.05em;
    bottom: auto;
    top: 0;
    left: 0;
    z-index: 5;
}
.news_img.row2 .text.after {
    left: 50%;
    background: #0f70b9;
}
figure {
    font-size: 0;
}
.news_img.row2 figure {
    position: relative;
    padding-top: 0%;
    height: 100%;
}
.news_img.row2 figure img {
    height: 100%;
    object-fit: cover;
    position: relative;
    top: 0;    
    transform: none;
    left: 0;
} 
.news_textbox p.date{
    font-size: 13px;
    padding: 0.2rem 0 0;
    text-align: right;
    color: #555;
    font-weight: 500;
}
.news_title {
    font-size: 17px;
    line-height: 1.4;
    font-weight: 600;
    color: #222;
    word-break: break-word;
    padding: 0.4rem 0 0rem;
}
.item.news:hover .news_img figure img {
    opacity: 0.6;
}
.wp_img_bg {
    height: 200px;
    padding-top: 66.6666%;
    width: 100%;
    max-width: 100%;
    background-position: center;
    background-size: cover;
    transition: all .3s ease;
    -webkit-transition: all .3s ease;
}
.item.news:hover .wp_img_bg {
    opacity: 0.6;
}
.wp-pagenavi a, .wp-pagenavi span{
    padding: 3px 7px !important;
}
@media screen and (min-width:768px) and ( max-width:1024px) {
    .top-works-slide {
        width: 55%;
    }
    .top-works-txt {
        width: 40%;
        padding: 0% 0 0;
    }
    .top-works-txt a {
        font-size: 15px;
    }
    .top-works-txt h3 {
        font-size: 22px;
    }
    .top-works-roof .top-works-txt h3:before, .top-works-leak .top-works-txt h3:before .top-works-other .top-works-txt h3:before {
        content: '';
        display: inline-block;
        width: 40px;
        height: 40px;
        position: absolute;
        top: -2.8rem;
        left: calc(50% - 20px);
        background-size: contain;
    }
    .top-works-txt p {
        font-size: 14px;
        padding: 0.8rem 0 1.2rem;
    }
    .slick-prev:before,.slick-next:before {
        font-size: 20px;
        opacity: 1;
    }
    .slick-prev {
        left: -5.5%;
    }
    .slick-next {
        right: -6%;
    }
    .works-inner p.date {
        font-size: 12px;
    }
    .works-inner h3 {
        font-size: 15px;
    }
}
@media screen and (max-width: 767px) {
    section.top-works {
        padding: 11% 15px 8%;
    }
    .top-works-txt {
        width: 100%;
        padding: 0% 0 0;
    }
    .top-works-txt h3 {
        font-size: 22px;
    }
    .top-works-roof .top-works-txt h3:before, .top-works-leak .top-works-txt h3:before, .top-works-other .top-works-txt h3:before {
        content: '';
        display: inline-block;
        width: 40px;
        height: 40px;
        position: absolute;
        top: -2.8rem;
        left: calc(50% - 20px);
    }
    .top-hoken-work li.item.news {
    width: 100%;
    margin: 0 0 20px;
}
    .top-works-txt a {
        width: 80%;
    }
    .top-works-slide {
        width: 85%;
        margin: 10% auto 0;
    }
    .slick-prev:before,.slick-next:before {
        font-size: 19px;
    }
    .slick-prev {
        left: -7.5%;
    }
    .slick-next {
        right: -7.5%;
    }
    .top-works-roof, .top-works-leak {
        margin: 0 auto 8%;
        padding: 0 0 12%;
    }
    .works-inner h3 {
        font-size: 16px;
    }
    .works-inner p.date {
        font-size: 12px;
    }
    .top-works-txt p {
        font-size: 14px;
    }
    .works-blog-wrap > .works-inner.item.news {
        width: 49%;
    }
}
/*---トップサービス案内---*/
section.service {
    position: relative;
    padding: 7% 0% 7%;
    background: #ffffff;
}
section.service .midashi h2::before {
    content: 'Service';
}
.service-wrap{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.service-inner{
    width: 27.2%;
    margin: 0%;
    padding: 4% 3% 5%;
    border-right: 1px #ccc solid;
}
.roofrepair section.service {
    position: relative;
    padding: 7% 0% 4%;
    background: #ffffff;
}
.roofrepair .service-inner{
    width: 31.33%;
    margin: 0%;
    padding: 4% 1.5% 5%;
    border-right: 1px #ccc solid;
}
.service-inner:last-child,.service-inner:nth-child(3){
    border-right: none;
}
.service-inner:nth-child(4),.service-inner:nth-child(5),.service-inner:nth-child(6){
    border-bottom: none;
}
.service-inner h3{
    position: relative;
    font-size: clamp(24px, 1.8vw, 24px);
    color: #222;
    font-family: serif;
    text-align: center;
    letter-spacing: 1px;
    text-shadow: 2px 2px 0px #f6e6c2;
}
.service-inner h3:before {
    content: '';
    display: inline-block;
    width: 50px;
    height: 50px;
    position: absolute;
    top: -3.2rem;
    left: calc(50% - 25px);
    background-size: contain;
}
.service-inner p{
    font-size: clamp(15px, 1.1vw, 16px);
    line-height: 1.7;
    font-weight: 500;
    padding: 0.8rem 0 1.2rem;
    color: #333;
}
.service-inner a{
    display: block;
    width: 75%;
    line-height: 1;
    font-size: 16px;
    color: #fff;
    text-align: center;
    background: #f07343;
    font-weight: 600;
    letter-spacing: 1px;
    padding: 1.5rem 0.5rem 1.6rem;
    border-radius: 4px;
    margin: 0 auto;
    text-shadow: 1px 1px 2px rgb(0 0 0 / 15%);
    box-shadow: 2px 2px 3px rgb(0 0 0 / 20%);
    transition: 0.3s;
}
.service-inner a:after {
    content: "\f101";
    font-weight: 900;
    font-family: "Font Awesome 6 Free";
    padding-left: 0.5em;
    color: #fff;
}
.service-inner a:hover {
    transform: translate(2px, 2px);
    box-shadow: none;
}
@media screen and (min-width:768px) and ( max-width:1024px) {
    .service-inner {
        width: 29.2%;
        margin: 0%;
        padding: 5% 2% 5%;
        border-right: 1px #ccc solid;
    }
    .service-inner h3 {
        font-size: 20px;
    }
    .service-inner p {
        font-size: 14px;
    }
    .service-inner a {
        display: block;
        width: 85%;
        font-size: 15px;
    }
    .service-inner h3:before {
        top: -3.5rem;
    }
}
@media screen and (max-width: 767px) {
    section.service {
        position: relative;
        padding: 10% 15px 10%;
        background: #ffffff;
    }
    .service-inner {
        width: 100%;
        margin: 0%;
        padding: 15.5% 0% 10%;
        border-right: none;
        border-bottom: 1px #ccc solid;
    }
    .service-inner {
        width: 100%;
        margin: 0% 0 5%;
        padding: 5% 0% 12%;
        border-right: none;
        border-bottom: 1px #ccc solid;
    }
    .service-inner a {
        display: block;
        width: 80%;
    }
    .service-inner:nth-child(4),.service-inner:nth-child(5){
        border-bottom: 1px #ccc solid;
    }
}
/*---区切り画像---*/
section.border01{
    background-size: cover;
    background-position: center;
    height: 25vh;
}
section.border01{
    background-image: url(images/border01-bg.jpg);
}
@media screen and (max-width: 767px) {
    section.border01 {
        background-size: cover;
        background-position: center;
        height: 20vh;
    }
    section.border01 {
        background-image: url(images/border01-bg.jpg);
    }
}
/*--- 屋根の豆知識 ---*/
section.top-knowledge {
    position: relative;
    padding: 6% 5% 4%;
    background: #fcefd3;
    background: linear-gradient(175deg, #fcefd3 0%, #fcefd3 73%, #fafafa 73%, #fafafa 100%);
}
section.top-knowledge .midashi h2{
    color: #222;
}
section.top-knowledge .midashi:before {
    background: #fff;
}
section.top-knowledge .midashi h2::before {
    content: 'Knowledge';
    color: #fad1c1;
}
section.top-knowledge h3 {
    position: relative;
    font-size: clamp(26px, 1.5vw, 30px);
    color: #f07343;
    border-top: #f07343 solid 3px;
    border-bottom: #f07343 solid 1px;
    margin: 0 auto 2%;
    padding: 0.3em 0.5em;
    z-index: 1;
    text-shadow: 1px 1px 1px rgb(0 0 0 / 15%);
}
.know-topic {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    position: relative;
    justify-content: space-around;
    margin: 0 auto 5%;
}
.know-topic::before {
    content: "Pick Up";
    position: absolute;
    top: -45%;
    right: -5%;
    z-index: 0;
    font-size: 10vw;
    font-weight: 600;
    color: rgb(234 237 2 / 50%);
}
.know-topic a{
    position: relative;
    width: 48%;
    margin: 1%;
    transition: 0.3s;
    z-index: 1;
}
.know-topic-inner {
    position: relative;
    background: #fff;
    display: flex;
    align-items: center;
}
.know-topic-inner img {
    width: 30%;
}
.know-topic-inner-txt{
    width: 62%;
    padding: 4%;
}
.know-topic-inner .know-topic-inner-txt h3 {
    font-size: clamp(17px, 0.9vw, 18px);
    margin: 0 auto 5px;
    color: #333;
    padding: 0;
}
.know-topic a:hover > .know-topic-inner .know-topic-inner-txt h3{
    color: #f07343;
    transition: 0.2s;
}
.know-topic-inner-txt p {
    font-size: 14px;
    line-height: 1.5;
}
.know-wrap {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 98%;
    margin: 0 auto 3%;
}
.know-wrap a {
    width: 23%;
}
.know-inner {
    background: #fff;
    position: relative;
    transition: 0.3s;
    box-shadow: 2px 2px 3px rgb(0 0 0 / 15%);
    height: 100%;
}
.know-inner:hover {
    transform: translate(2px, 2px);
    box-shadow: none;
}
.know-inner img {
    height: auto;
    width: 100%;
    object-fit: cover;
}
.know-inner figure {
    position: relative;
    overflow: hidden;
    padding-top: 61.67%;
    margin: 0 0 0;
}
.know-inner figure img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 100%;
    height: 100%;
}
.know-wrap .know-inner h3{
    color: #333;
    font-size: clamp(17px, 0.9vw, 18px);
    padding: 0.4em 0.8em 0.8em;
    line-height: 1.4;
    margin: 0;
    border: none;
    font-size: 16px;
}
.know-inner:hover > h3{
    color: #f07343;
    transition: 0.2s;
}
.top-knowledge .scroll{
    display: none;
}
@media screen and (min-width:768px) and ( max-width:1024px) {
    section.top-knowledge {
        padding: 6% 5% 6%;
    }
    .know-topic::before {
        content: "Pick Up";
        position: absolute;
        top: -25%;
        right: -5%;
        z-index: 0;
        font-size: 13vw;
    }
    .know-wrap {
        margin: 0 auto 5%;
    }
    section.top-knowledge h3 {
        position: relative;
        font-size: 20px;
    }
    .know-topic-inner-txt p {
        font-size: 13px;
    }
    .know-topic-inner .know-topic-inner-txt h3 {
        font-size: 15px;
    }
    .know-wrap .know-inner h3 {
        font-size: 15px;
    }
}
@media screen and (max-width: 767px) {
    section.top-knowledge {
        position: relative;
        padding: 12% 15px 8%;   
    }
    section.top-knowledge h3 {
        position: relative;
        font-size: 20px;
        margin: 0 auto 5%;
    }
    .know-topic::before {
        content: "Pick Up";
        position: absolute;
        top: -80px;
        right: 0%;
        z-index: 0;
        font-size: 16vw;
        font-weight: 600;
        color: rgb(234 237 2 / 50%);
    }
    .know-topic a {
        position: relative;
        width: 96%;
        margin: 0% auto 5%;
        transition: 0.3s;
        z-index: 1;
    }
    .know-topic-inner {
        flex-wrap: wrap;
    }
    .know-topic-inner img {
        width: 100%;
    }
    .know-topic-inner-txt {
        width: 92%;
        padding: 4%;
    }
    .know-topic-inner .know-topic-inner-txt h3 {
        font-size: 16px;
        line-height: 1.4;
    }
    .know-wrap {
        position: relative;
        flex-wrap: nowrap;
        overflow-x: scroll;
        justify-content: space-between;
        width: 98%;
        margin: 0 auto 5%;
        padding: 0 0 5%;
        -webkit-overflow-scrolling: touch;
        overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        justify-content: flex-start;
    }
    .know-wrap a {
        width: 96%;
        margin: 0 2% ;
        flex-shrink: 0;
    }
    .know-wrap .know-inner h3 {
        font-size: 15px;
    }
    .top-knowledge .scroll {
        display: block;
        position: relative;
        width: 50px;
        text-align: center;
        z-index: 1;
        margin: 0px 0 15px;
    }
    .top-knowledge .scroll::before {
        animation: scroll 1.5s infinite;
        border: solid #fff;
        border-width: 2px 0px 0px 2px;
        content: "";
        display: inline-block;
        margin: auto;
        position: absolute;
        top: 0px;
        right: 0;
        left: 50px;
        transform: rotate(0deg);
        width: 20px;
        height: 20px;
    }
    .top-knowledge .scroll span.txt {
        font-weight: 600;
        color: #fff;
    }
    @keyframes scroll {
        0% {
          transform: rotate(-45deg) translate(40px, 40px);
        }
        80% {
          transform: rotate(-45deg) translate(10px, 10px);
        }
        0%, 80%, 100% {
          opacity: 0;
        }
        40% {
          opacity: 1;
        }
    }
}
/*--- トップブログ ---*/
section.shokunin {
    position: relative;
    padding: 2% 5% 5%;
    background: #fafafa;
}
section.shokunin .midashi h2::before {
    content: 'Blog';
}
.shokunin-wrap {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 98%;
    margin: 0 auto 3%;
}
.shokunin-wrap a {
    width: 23%;
}
.shokunin-inner {
    background: #fff;
    position: relative;
    transition: 0.3s;
    box-shadow: 2px 2px 3px rgb(0 0 0 / 15%);
}
.shokunin-inner:hover {
    transform: translate(2px, 2px);
    box-shadow: none;
}
.shokunin-inner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.shokunin-wrap .shokunin-inner h3{
    color: #333;
    font-size: clamp(17px, 0.9vw, 18px);
    padding: 0.4em 0.8em 0;
    line-height: 1.4;
    margin: 0;
    border: none;
    text-shadow: 1px 1px 1px rgb(0 0 0 / 15%);
}
.shokunin-inner:hover > h3{
    color: #f07343;
    transition: 0.2s;
}
.shokunin-inner p{
    font-size: 13px;
    text-align: right;
    color: #555;
    font-weight: 500;
    padding: 0.5em 0.5em 0.7em;
}
section.shokunin .scroll{
    display: none;
}
@media screen and (min-width:768px) and ( max-width:1024px) {
    section.top-knowledge {
        padding: 6% 5% 6%;
    }
    .shokunin-wrap {
        margin: 0 auto 5%;
    }
    .shokunin-wrap .shokunin-inner h3 {
        font-size: 15px;
    }
    .shokunin-inner p {
        font-size: 12px;
        padding: 0.1em 0.5em 0.5em;
    }
}
@media screen and (max-width: 767px) {
    section.shokunin {
        position: relative;
        padding: 5% 15px 10%;
        background: #fff;
    }
    .shokunin-wrap {
        position: relative;
        flex-wrap: nowrap;
        overflow-x: scroll;
        justify-content: space-between;
        width: 98%;
        margin: 0 auto 5%;
        padding: 0 0 5%;
        -webkit-overflow-scrolling: touch;
        overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        justify-content: flex-start;
    }
    .shokunin-wrap a {
        width: 96%;
        margin: 0 2% ;
        flex-shrink: 0;
    }
    .shokunin-wrap .shokunin-inner h3 {
        font-size: 16px;
        padding: 0.5em 0.5em 0.5em;
    }
    .shokunin-inner p {
        font-size: 13px;
        padding: 0em 0.5em 0.7em;
    }
    section.shokunin .scroll {
        display: block;
        position: relative;
        width: 50px;
        text-align: center;
        z-index: 1;
        margin: 0px 0 15px;
    }
    section.shokunin .scroll::before {
        animation: scroll 1.5s infinite;
        border: solid #333;
        border-width: 2px 0px 0px 2px;
        content: "";
        display: inline-block;
        margin: auto;
        position: absolute;
        top: 0px;
        right: 0;
        left: 50px;
        transform: rotate(0deg);
        width: 20px;
        height: 20px;
    }
    section.shokunin .scroll span.txt {
        font-weight: 600;
        color: #333;
    }
    @keyframes scroll {
        0% {
          transform: rotate(-45deg) translate(40px, 40px);
        }
        80% {
          transform: rotate(-45deg) translate(10px, 10px);
        }
        0%, 80%, 100% {
          opacity: 0;
        }
        40% {
          opacity: 1;
        }
    }
}
.top-ashiba {
    position: relative;
    padding: 6% 6%;
}
.ashiba-wrap,.tosou-wrap {
    display: flex;
    flex-wrap: wrap;
    position: relative;
    align-items: stretch;
}
.tosou-wrap {
    padding: 3% 0 0;
}
.ashiba-wrap .left,.tosou-wrap .left{
    width: 62%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 12px 0px 0px 12px;
}
.ashiba-wrap .left{
    background-image: url(images/ashiba-bg.jpg);
}
.tosou-wrap .left{
    background-image: url(images/tosou-bg.jpg);
}
.ashiba-wrap .right,.tosou-wrap .right {
    width: 38%;
    background: #222;
    border-radius: 0 12px 12px 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
.ashiba-wrap .right h2,.tosou-wrap .right h2{
    color: #fff;
    padding: 10% 7% 0;
    font-size: 20px;
    font-weight: 600;
    text-align: center;
}
.ashiba-wrap .right p,.tosou-wrap .right p{
    color: #f5f5f5;
    font-size: 15px;
    padding: 5% 7% 8%;
    font-weight: 400;
    width: 100%;
}
.ashiba-wrap a,.tosou-wrap a{
    display: block;
    width: 75%;
    line-height: 1;
    font-size: 16px;
    color: #fff;
    text-align: center;
    background: #f07343;
    font-weight: 600;
    letter-spacing: 1px;
    padding: 1.5rem 0.5rem 1.6rem;
    border-radius: 6px;
    margin: 0 auto 10%;
    text-shadow: 1px 1px 2px rgb(0 0 0 / 15%);
    box-shadow: 2px 2px 3px rgb(0 0 0 / 20%);
    transition: 0.3s;
}
.ashiba-wrap a:after,.tosou-wrap a:after {
    content: "\f101";
    font-weight: 900;
    font-family: "Font Awesome 6 Free";
    padding-left: 0.5em;
    color: #fff;
}
.ashiba-wrap a:hover,.tosou-wrap a:hover {
    transform: translate(2px, 2px);
    box-shadow: none;
}
@media screen and (min-width:768px) and ( max-width:1024px) {
    .top-ashiba {
        position: relative;
        padding: 6% 3%;
    }
    .ashiba-wrap .right h2, .tosou-wrap .right h2 {
        padding: 10% 7% 0;
        font-size: 17px;
    }
    .ashiba-wrap .right p, .tosou-wrap .right p {
        font-size: 14px;
    }
    .ashiba-wrap a, .tosou-wrap a {
        display: block;
        width: 80%;
        font-size: 15px;
    }
}
@media screen and (max-width: 767px) {
    .top-ashiba {
        position: relative;
        padding: 12% 15px;
    }
    .ashiba-wrap .left, .tosou-wrap .left {
        width: 100%;
        border-radius: 10px 10px 0px 0px;
        height: 200px;
    }
    .ashiba-wrap .right, .tosou-wrap .right {
        width: 100%;
        border-radius: 0 0px 10px 10px;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }
    .ashiba-wrap .right h2, .tosou-wrap .right h2 {
        color: #fff;
        padding: 10% 5% 0;
        font-size: 18px;
        line-height: 1.4;
    }
    .ashiba-wrap .right p, .tosou-wrap .right p {
        font-size: 15px;
        padding: 5% 5% 7%;
    }
    .ashiba-wrap .left{
        background-image: url(images/ashiba-bg-sp.jpg);
    }
    .tosou-wrap .left{
        background-image: url(images/tosou-bg-sp.jpg);
    }
}
/*--- 山口板金について ---*/
section.about {
    position: relative;
    padding: 7% 6% 0%;
    background: #fafafa;
}
section.direct {
    position: relative;
    padding: 7% 6% 3%;
    background: #fafafa;
}
section.about .midashi h2::before {
    content: 'Greeting';
}
section.about#warranty .midashi h2::before {
    content: 'Warranty';
}
section.direct .midashi h2::before {
    content: 'Directly Managed';
}
.about-wrap {
    padding: 5%;
    background: #fff;
    border-radius: 10px;
    box-shadow: 1px 3px 4px rgb(0 0 0 / 5%);
}
.about-wrap p{
    font-size: 16px;
    line-height: 1.8;
    margin: 0 auto 15px;
}
.about-wrap p.bold{
    font-weight: 500;
}
.about-wrap picture {
    float: right;
    max-width: 33%;
    padding: 0 0 20px 20px;
}
.about-wrap p.chief {
    font-size: clamp(17px, 1.5vw, 22px);
    font-family: serif;
    font-weight: 600;
    letter-spacing: 0.1vw;
    margin: 0;
}
.direct-wrap {
    display: block;
    margin: 0 auto 6%;
}
.direct-wrap p{
    font-size: 15px;
    line-height: 1.8;
    margin: 0 auto 20px;
}
.direct-wrap ul {
    display: block;
    margin: 0 0 20px;
}
.direct-wrap ul li {
    font-size: 16px;
    font-weight: 500;
    padding: 4px 0;
    list-style: inside;
    line-height: 1.4;
}
.direct-wrap picture {
    display: block;
    text-align: center;
    margin: 30px auto;
    max-width: 800px;
}
p.direct {
    font-size: 20px;
    font-weight: 500;
    line-height: 1.4;
    text-shadow: 1px 1px 1px rgb(0 0 0 / 10%);
}
p.direct span.d01{
    font-size: 26px;
    font-weight: 600;
    color: #f07343;
}
p.direct span.d02{
    font-size: 26px;
    font-weight: 600;
    color: #ff7400;
}
@media screen and (min-width:768px) and ( max-width:1024px) {
    .about-wrap p,.direct-wrap p {
        font-size: 14px;
    }
    .direct-wrap ul li {
        font-size: 15px;
        padding: 3px 0;
    }
    p.direct {
        font-size: 18px;
    }
    p.direct span.d01,p.direct span.d02 {
        font-size: 24px;
    }
}
@media screen and (max-width: 767px) {
    section.about {
        padding: 10% 15px 0%;
    }
    .about-wrap {
        padding: 8% 10px;
        background: #fff;
        border-radius: 8px;
    }
    .about-wrap picture {
        float: none;
        padding: 0;
    }
    .about-wrap picture img {
        width: 80%;
        display: block;
        margin: 0 auto 25px;
        border-radius: 8px;
    }
    section.direct {
        position: relative;
        padding: 13% 15px 4%;
    }
    .about-wrap p {
        font-size: 15px;
    }
    section.direct .midashi h2::before {
        font-size: 4.2vw;
    }
    .direct-wrap {
        display: block;
        margin: 0 auto 12%;
    }
    .direct-wrap ul li {
        font-size: 16px;
        padding: 6px 0;
        line-height: 1.5;
    }
    p.direct {
        font-size: 16px;
        line-height: 1.5;
    }
    p.direct span.d01,p.direct span.d02 {
        font-size: 22px;
    }
}
/*--- 屋根修理 ---*/
section.roofrepair,section.bankin {
    position: relative;
    padding: 7% 6% 1%;
    background: #fafafa;
}
section.roofrepair.menu .midashi h2::before {
    content: 'Menu';
}
section.roofrepair.leakage .midashi h2::before {
    content: 'Leakage';
}
section.roofrepair .midashi h2::before {
    content: 'Roofrepair';
}
section.bankin .midashi h2::before {
    content: 'SheetMetal';
}
.roofrepair-wrap p{
    text-align: center;
    font-size: clamp(16px, 1.2vw, 16px);
    margin: 0 auto 20px;
}
.repair-howto-wrap{
    border-radius: 10px;
    box-shadow: 1px 1px 3px rgb(0 0 0 / 5%);
    padding: 4%;
    background: #fff;
    margin: 4% auto;
}
.repair-howto-wrap .top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}
.repair-howto-wrap .top h2{
    width: 100%;
    font-size: 24px;
    font-weight: 600;
    font-family: serif;
    color: #222;
    margin: 0 auto 30px;
    text-align: left;
    border-top: 2px solid #f07343;
    border-bottom: 1px solid #f07343;
    padding: 0.3em 0.5em 0.25em;
    text-shadow: 1px 1px 1px rgb(0 0 0 / 5%);
}
.repair-howto-wrap .top p{
    font-size: 15px;
    line-height: 1.8;
    margin-bottom: 10px;
}
.repair-howto-wrap .top picture{
    width: 40%;
}
.repair-howto-wrap .bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 3% 0 0;
}
.repair-howto-wrap .bottom .left{
    width: 49%;
    margin: 0;
    border: 1px solid #ccc;
    background: #fafafa;
}
.repair-howto-wrap .bottom .right{
    width: 49%;
    margin: 0;
    border: 1px solid #ccc;
}
.repair-howto-wrap .bottom .left h3 {
    font-size: 18px;
    padding: 0.3em 0.5em 0.4em;
    background: #f58900;
    color: #fff;
    text-shadow: 1px 1px 1px hsl(0deg 0% 0% / 10%);
}
.repair-howto-wrap .bottom .right h3{
    font-size: 18px;
    padding: 0.3em 0.5em 0.4em;
    background: #222;
    color: #fff;
    text-shadow: 1px 1px 1px hsl(0deg 0% 0% / 10%);
}
.repair-howto-wrap .bottom .left ul,.repair-howto-wrap .bottom .right ul{
    padding: 15px;
    background: #fafafa;
}
.repair-howto-wrap .bottom .left ul li,.repair-howto-wrap .bottom .right ul li{
    font-size: 14px;
    line-height: 1.4;
    padding: 5px 0;
    list-style: inside;
}
.sub-top {
    display: flex;
    justify-content: space-between;
}
.repair-menu{
    border-radius: 10px;
    box-shadow: 1px 1px 3px rgb(0 0 0 / 5%);
    padding: 4% 4% 1%;
    background: #fff;
    margin: 4% auto;
}
.repair-menu h2{
    width: 100%;
    font-size: 24px;
    font-weight: 600;
    color: #222;
    font-family: serif;
    margin: 0 auto 30px;
    text-align: left;
    border-top: 2px solid #f07343;
    border-bottom: 1px solid #f07343;
    padding: 0.3em 0.5em 0.4em;
    text-shadow: 1px 1px 1px rgb(0 0 0 / 5%);
}
.repair-menu-wrap{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.repair-menu-inner {
    width: 30%;
    margin: 0 1.5% 4%;
}
.repair-menu-inner picture{
    border-radius: 50%;
    display: block;
    margin: 0 auto;
}
.repair-menu-inner picture img{
    border-radius: 50%;
    display: block;
    margin: 0 auto;
}
.repair-menu-inner img{
    border-radius: 50%;
    display: block;
    margin: 0 auto;
    max-width: 250px;
}
.repair-menu-inner h3{
    font-size: 18px;
    border-top: 2px #222 solid;
    border-bottom: 1px #222 solid;
    padding: 0.3em 0em 0.4em;
    text-align: center;
    margin: 20px auto 15px;
    text-shadow: 1px 1px 1px rgb(0 0 0 / 5%);
}
.repair-menu-inner p{
    font-size: 15px;
    line-height: 1.6;
}
.repair-material {
    padding: 2% 0% 0%;
    margin: 4% auto 5%;
}
.repair-material h3 {
    width: 95%;
    font-size: 24px;
    font-weight: 600;
    color: #f07343;
    margin: 0 auto 30px;
    text-align: center;
    border-top: 2px solid #f07343;
    border-bottom: 1px solid #f07343;
    padding: 0.3em 0em 0.4em;
    text-shadow: 1px 1px 1px rgb(0 0 0 / 5%);
}
.repair-material picture{
    display: block;
    margin: 0 auto;
}
.repair-material picture img{
    display: block;
    margin: 0 auto;
    max-width: 750px;
}
h3.repair-caution {
    margin: 0 auto 4%;
    font-size: 20px;
    font-family: serif;
    border-bottom: 2px solid #f07343;
    border-top: 2px solid #f07343;
    padding: 1% 2%;
}
@media screen and (min-width:768px) and ( max-width:1024px) {
    .roofrepair-wrap p {
        font-size: 14px;
    }
    .repair-howto-wrap .top h2 {
        font-size: 18px;
        margin: 0 auto 20px;
    }
    .repair-howto-wrap .top p {
        font-size: 14px;
    }
    .repair-howto-wrap .bottom .left ul li, .repair-howto-wrap .bottom .right ul li {
        font-size: 12px;
    }
    .repair-menu-inner {
        width: 46%;
        margin: 0 2% 5%;
    }
    .repair-menu-inner img {
        max-width: 200px;
    }
    .repair-menu {
        padding: 4% 4% 1%;
    }
    .repair-menu-inner p {
        font-size: 14px;
        line-height: 1.6;
    }
    .repair-material h3 {
        width: 100%;
    }
    .repair-material picture img {
        max-width: 100%;
    }
    .repair-material {
        padding: 2% 0% 0%;
        margin: 6% auto;
    }
    h3.repair-caution {
        margin: 3% auto 6%;
    }
}
@media screen and (max-width: 767px) {
    section.roofrepair {
        padding: 10% 15px 5%;
    }
    .roofrepair-wrap p {
        text-align: left;
        font-size: 15px;
        margin: 0 auto 20px;
    }
    .repair-howto-wrap .top h2 {
        font-size: 20px;
        margin: 0 auto 25px;
    }
    .repair-howto-wrap {
        border-radius: 8px;
        padding: 25px 15px;
        margin: 35px auto;
    }
    .repair-howto-wrap .top p {
        width: 100%;
        font-size: 14px;
    }
    .repair-howto-wrap .top picture {
        width: 100%;
        margin: 0 auto 20px;
    }
    .sub-top {
        display: flex;
        flex-wrap: wrap;
        flex-direction: column-reverse;
    }
    .repair-howto-wrap .bottom {
        margin: 25px 0 0;
    }
    .repair-howto-wrap .bottom .left {
        width: 100%;
        margin: 0 auto 20px;
    }
    .repair-howto-wrap .bottom .right {
        width: 100%;
    }
    .repair-howto-wrap .bottom .left h3 {
        font-size: 16px;
    }
    .repair-howto-wrap .bottom .left ul li, .repair-howto-wrap .bottom .right ul li {
        font-size: 13px;
        line-height: 1.5;
        list-style: inside;
    }
    .repair-menu{
        border-radius: 8px;
        padding: 25px 15px 0;
        margin: 35px auto;
    }
    .repair-menu-wrap {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .repair-menu-inner {
        width: 100%;
        margin: 0 0 35px;
    }
    .repair-menu-inner img {
        max-width: 90%;
    }
    .repair-menu h2 {
        width: 100%;
        font-size: 20px;
        max-width: 90%;
    }
    .repair-menu-inner h3 {
        font-size: 16px;
    }
    .repair-menu-inner p {
        font-size: 14px;
        line-height: 1.6;
    }
    .repair-material h3 {
        width: 100%;
        font-size: 18px;
        text-align: left;
    }
    .repair-material picture img {
        display: block;
        margin: 0 auto;
        max-width: 100%;
    }
    .repair-material {
        padding: 2% 0% 0%;
        margin: 12% auto;
    }
    h3.repair-caution {
        margin: 5% auto 13%;
        font-size: 16px;
        padding: 3% 2%;
    }
}
/*--- 雨漏り修理 ---*/
section.leakage {
    position: relative;
    padding: 7% 6% 4%;
    background: #fafafa;
}
section.leakage .midashi h2::before {
    content: 'Leakage';
}
.leakage-wrap p{
    text-align: center;
    font-size: clamp(16px, 1.3vw, 16px);
    margin: 0 auto 20px;
}
.leakage-promise-wrap{
    border-radius: 10px;
    box-shadow: 1px 1px 3px rgb(0 0 0 / 5%);
    padding: 4%;
    background: #fff;
    margin: 4% auto;
}
.leakage-promise-wrap h2{
    width: 100%;
    font-size: 24px;
    font-weight: 600;
    color: #222;
    font-family: serif;
    margin: 0 auto 30px;
    text-align: center;
    border-top: 2px solid #f07343;
    border-bottom: 1px solid #f07343;
    padding: 0.3em 0.5em 0.4em;
    text-shadow: 1px 1px 1px rgb(0 0 0 / 5%);
}
.leakage-promise-wrap p{
    font-size: 16px;
    text-align: center;
}
.leakage-promise-inner{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    margin: 5% 0;
}
.leakage-promise-inner .left{
    width: 55%;
}
.leakage-promise-inner .left h3{
    margin: 0 auto 20px;
    font-size: 20px;
    border-top: 2px #222 solid;
    border-bottom: 1px #222 solid;
    padding: 0.3em 0.5em 0.4em;
    text-shadow: 1px 1px 1px rgb(0 0 0 / 5%);
}
.leakage-promise-inner .left p{
    font-size: 15px;
    text-align: left;
    margin-bottom: 10px;
}
.leakage-promise-inner .right{
    width: 40%;
}
.leakage-menu{
    border-radius: 10px;
    box-shadow: 1px 1px 3px rgb(0 0 0 / 5%);
    padding: 4% 4% 0.5%;
    background: #fff;
    margin: 4% auto;
}
.leakage-menu h2{
    width: 100%;
    font-size: 24px;
    font-weight: 600;
    color: #f07343;
    margin: 0 auto 30px;
    text-align: left;
    border-top: 2px solid #f07343;
    border-bottom: 1px solid #f07343;
    padding: 0.3em 0.5em 0.4em;
    text-shadow: 1px 1px 1px rgb(0 0 0 / 5%);
}
.leakage-menu-wrap{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.leakage-menu-inner {
    width: 47%;
    margin: 0 1.5% 4%;
}
.leakage-menu-inner picture{
    display: block;
    margin: 0 auto;
}
.leakage-menu-inner picture img{
    display: block;
    margin: 0 auto;
}
.leakage-menu-inner img{
    display: block;
    margin: 0 auto;
    max-width: 350px;
}
.leakage-menu-inner h3{
    font-size: 18px;
    border-top: 2px #222 solid;
    border-bottom: 1px #222 solid;
    padding: 0.3em 0em 0.4em;
    text-align: center;
    margin: 25px auto 15px;
    text-shadow: 1px 1px 1px rgb(0 0 0 / 5%);
}
.leakage-menu-inner p{
    font-size: 15px;
    line-height: 1.6;
}
.leakage-material {
    padding: 2% 0% 0%;
    margin: 4% auto 6%;
}
.leakage-material h3 {
    width: 95%;
    font-size: 24px;
    font-weight: 600;
    color: #222;
    font-family: serif;
    margin: 0 auto 30px;
    text-align: center;
    border-top: 2px solid #f07343;
    border-bottom: 1px solid #f07343;
    padding: 0.3em 0em 0.4em;
    text-shadow: 1px 1px 1px rgb(0 0 0 / 5%);
}
.leakage-material-wrap picture {
    float: right;
    padding: 0 0 15px 15px;
}
.leakage-material-wrap p{
    font-size: 15px;
    margin: 0 auto 20px;
}
@media screen and (min-width:768px) and ( max-width:1024px) {
    .leakage-wrap p {
        font-size: 14px;
    }
    .leakage-promise-wrap h2 {
        font-size: 18px;
        margin: 0 auto 20px;
    }
    .leakage-promise-wrap p {
        font-size: 14px;
        text-align: center;
    }
    .leakage-promise-inner .left h3 {
        margin: 0 auto 15px;
        font-size: 16px;
    }
    .leakage-promise-inner .left p {
        font-size: 13px;
    }
    .leakage-menu h2 {
        width: 100%;
        font-size: 18px;
    }
    .leakage-menu-inner img {
        max-width: 90%;
    }
    .leakage-menu-inner h3 {
        font-size: 16px;
    }
    .leakage-menu-inner p {
        font-size: 14px;
    }
    .leakage-material-wrap picture img {
        max-width: 280px;
    }
    .leakage-material-wrap p {
        font-size: 14px;
        margin: 0 auto 20px;
    }
    .leakage-material h3 {
        width: 100%;
        font-size: 18px;
    }
    .leakage-material {
        padding: 2% 0% 0%;
        margin: 5% auto 7%;
    }
}
@media screen and (max-width: 767px) {
    section.leakage {
        padding: 10% 15px 5%;
    }
    .leakage-wrap p {
        text-align: left;
        font-size: 15px;
        margin: 0 auto 20px;
    }
    .leakage-promise-wrap {
        border-radius: 8px;
        padding: 25px 15px 1px;
        margin: 35px auto;
    }
    .leakage-promise-wrap h2 {
        font-size: 20px;
        margin: 0 auto 25px;
        padding: 0.3em 0em 0.4em;
    }
    .leakage-promise-wrap p {
        font-size: 15px;
        text-align: left;
    }
    .leakage-promise-inner .left {
        width: 100%;
    }
    .leakage-promise-inner .left h3 {
        margin: 0px auto 20px;
        font-size: 18px;
    }
    .leakage-promise-inner .left p {
        font-size: 14px;
        text-align: left;
    }
    .leakage-promise-inner .right {
        width: 100%;
        margin: 0 auto 22px;
    }
    .leakage-promise-inner {
        flex-direction: column-reverse;
        margin: 12% 0;
    }
    .leakage-menu h2 {
        width: 100%;
        font-size: 20px;
        margin: 0 auto 30px;
        padding: 0.3em 0em 0.4em;
    }
    .leakage-menu-inner {
        width: 100%;
        margin: 0 auto 10%;
    }
    .leakage-menu {
        border-radius: 8px;
        padding: 25px 15px 0;
        margin: 35px auto;
    }
    .leakage-menu-inner img {
        max-width: 100%;
    }
    .leakage-menu-inner p {
        font-size: 14px;
        line-height: 1.7;
    }

    .leakage-material {
        padding: 2% 0% 0%;
        margin: 12% auto 14%;
    }
    .leakage-material h3 {
        width: 95%;
        font-size: 20px;
    }
    .leakage-material-wrap picture {
        float: none;
        padding: 0;
        margin: 0;
    }
    .leakage-material-wrap picture img {
        max-width: 95%;
        display: block;
        margin: 0 auto 25px;
    }
}
/*--- 会社概要 ---*/
section.company {
    position: relative;
    padding: 7% 6% 7%;
    background: #fafafa;
}
section.recruit {
    position: relative;
    padding: 6% 6% 6%;
    background: #fafafa;
}
section.company .midashi h2::before {
    content: 'Company';
}
section.recruit .midashi h2::before {
    content: 'Recruit';
}
.company-wrap p,.recruit-wrap p{
    text-align: center;
    font-size: clamp(16px, 1.2vw, 16px);
    margin: 0 auto 20px;
}
.company-wrap table,.recruit-wrap table {
    width: 70%;
    display: block;
    margin: 30px auto 0;
}
.company-wrap table th,.recruit-wrap table th{
    position: relative;
    text-align: left;
    width: 20%;
    font-size: 16px;
}
.company-wrap table th:after,.recruit-wrap table th:after{
    display: block;
    content: "";
    width: 30px;
    height: 2px;
    background-color: #333;
    position: absolute;
    top:calc(50% - 1px);
    right:-15px;
}
.company-wrap table td,.recruit-wrap table td {
    text-align: left;
    padding: 1em 0 1em 10%;
    width: 65%;
    line-height: 1.7;
}
@media screen and (min-width:768px) and ( max-width:1024px) {
    .company-wrap p, .recruit-wrap p {
        font-size: 14px;
    }
    .company-wrap table, .recruit-wrap table {
        width: 90%;
    }
    .company-wrap table th, .recruit-wrap table th {
        font-size: 15px;
    }
    .company-wrap table td, .recruit-wrap table td {
        font-size: 14px;
    }
}
@media screen and (max-width: 767px) {
    section.company {
        padding: 10% 15px 0%;
    }
    section.recruit {
        padding: 10% 15px 10%;
    }
    .company-wrap p, .recruit-wrap p {
        text-align: left;
        font-size: 15px;
    }
    .company-wrap table, .recruit-wrap table {
        width: 100%;
        display: block;
        margin: 30px auto 0;
    }
    .company-wrap table th, .recruit-wrap table th {
        width: 18%;
        font-size: 15px;
    }
    .company-wrap table th:after, .recruit-wrap table th:after {
        display: block;
        content: "";
        width: 15px;
        height: 2px;
        top: calc(50% - 1px);
        right: -20px;
    }
    .company-wrap table td, .recruit-wrap table td {
        padding: 1em 0 1em 10%;
        width: 70%;
        font-size: 14px;
    }
    br.sp-none {
        display: none;
    }
}
/*--- プライバシーポリシー ---*/
section.privacy {
    position: relative;
    padding: 7% 6% 6%;
    background: #fafafa;
}
section.privacy .midashi h2::before {
    content: 'PrivacyPolicy';
}
.privacy-wrap {
    display: block;
    margin: 0 auto;
}
.privacy-wrap p{
    font-size: 15px;
    text-align:center;
}
.privacy-inner {
    display: block;
    margin: 0 auto;
    width: 95%;
}
.privacy-inner h3 {
    font-size: 18px;
    border-top: 2px solid #222;
    border-bottom: 1px solid #222;
    line-height: 1;
    padding: 0.5em 0.5em 0.7em;
    margin: 30px 0 20px;
}
.privacy-inner p {
    font-size: 15px;
    text-align: left;
    line-height: 1.9;
}
.privacy-inner p span.bold{
    font-weight: 600;
}
@media screen and (min-width:768px) and ( max-width:1024px) {
    .privacy-wrap p {
        font-size: 14px;
    }
    .privacy-inner p {
        font-size: 14px;
    }
}
@media screen and (max-width: 767px) {
    section.privacy {
        padding: 10% 15px 10%;
    }
    .privacy-wrap p {
        font-size: 15px;
        text-align: left;
    }
    .privacy-inner {
        width: 100%;
    }
    .privacy-inner h3 {
        font-size: 16px;
    }
    .privacy-inner p {
        font-size: 14px;
        text-align: left;
        line-height: 1.8;
        padding: 0 10px;
    }
}
/*--- お問い合わせ ---*/
section.contact {
    position: relative;
    padding: 7% 6% 0%;
    background: #fafafa;
}
section.contact .midashi h2::before {
    content: 'Contact';
}
section.thanks .midashi h2::before {
    content: 'Thanks';
}
section.thanks {
    position: relative;
    padding: 6% 6% 5%;
    background: #fafafa;
}
section.contact-tel {
    position: relative;
    padding: 4% 6% 0%;
    background: #fafafa;
}
section.contact-tel .midashi h2::before {
    content: 'By Phone';
}
section.contact-mail {
    position: relative;
    padding: 4% 6% 7%;
    background: #fafafa;
}
section.contact-mail .midashi h2::before {
    content: 'By Mail';
}
.contact-wrap{
    display: block;
    margin: 0 auto;
}
.contact-wrap p{
    font-size: clamp(16px, 1.2vw, 16px);
    text-align:center;
    margin: 0 auto 20px;
}
.contact-tel-wrap{
    display: block;
    margin: 0 auto;
}
.contact-tel-wrap p{
    font-size: clamp(16px, 1.2vw, 16px);
    text-align:center;
    margin: 0 auto 20px;
}
.contact-tel-wrap a {
    font-size: 46px;
    font-weight: 600;
    color: #f07343;
    display: block;
    margin: -20px auto -15px;
    text-align: center;
}
.contact-tel-wrap a.line {
    border: 2px solid #f07343;
    width: 40%;
    display: block;
    margin: 1vw auto;
    padding: 20px 5px;
    border-radius: 4px;
    font-size: 16px;
    color: #fff;
    text-shadow: 1px 1px 2px rgb(0 0 0 / 15%);
    font-weight: 500;
    text-align: center;
    background: #f07343;
    box-shadow: 2px 2px 3px rgb(0 0 0 / 20%);
    transition: 0.3s;
}
.contact-tel-wrap a.line:hover {
    transform: translate(2px, 2px);
    box-shadow: none;
}
.contact-mail-wrap p{
    font-size: clamp(16px, 1.2vw, 16px);
    text-align:center;
    margin: 0 auto 20px;
}
.form-wrap {
    display: block;
    margin: 30px auto 0;
}
.contact-box {
    display: block;
    margin: 0 auto;
    width: 80%;
}
p.form-title {
    font-size: 16px;
    font-weight: 600;
    margin: 0;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    padding: 0px 0 0px;
    /*border-bottom: 1px solid #0dc2a5;*/
    text-shadow: 1px 1px 2px rgb(0 0 0 / 10%);
}
span.required {
    background: #ff4a4a;
    color: #fff;
    font-size: 13px;
    padding: 1px 7px 2px;
    margin-left: 15px;
}
.cp_iptxt {
    position: relative;
    width: 96%;
    margin: 5px auto 10px;
    padding-bottom: 15px;
}
.cp_iptxt span {
    position: absolute;
    top: 20px;
    left: 0;
    padding: 8px 8px;
    transition: 0.3s;
    color: #aaaaaa;
}
.cp_iptxt input[type=text], .cp_iptxt input[type=tel], .cp_iptxt input[type=email] {
    font: 15px sans-serif;
    box-sizing: border-box;
    width: 100%;
    margin: 8px 0;
    padding: 0.6em 0.6em 0.55em;
    transition: 0.3s;
    border: 1px solid #ccc;
    border-radius: 4px;
    outline: none;
}
.cp_iptxt input[type=text], .cp_iptxt input[type=tel], .cp_iptxt input[type=email] {
    padding-left: 40px;
}
.cp_iptxt input[type=text]:focus , .cp_iptxt input[type=tel]:focus , .cp_iptxt input[type=email]:focus{
    border-color: #06907b;
    outline: 0;
}
.cp_iptxt input[type=text]:focus + span , .cp_iptxt input[type=tel]:focus + span , .cp_iptxt input[type=email]:focus + span{
    color: #06907b;
}
input[type="checkbox"] {
    display: none;
}
input[type="checkbox"] + label {
    display: inline-block;
    position: relative;
    padding-left: 28px;
    margin: 0 25px 15px 0;
    font-size: 15px;
    font-weight: 500;
    color: #222;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}
input[type="checkbox"] + label:before {
    content: '';
    display: block;
    width: 20px;
    height: 20px;
    border: 1px solid #06907b;
    position: absolute;
    left: 0;
    top: 2px;
    opacity: .6;
    -webkit-transition: all .12s, border-color .08s;
    transition: all .12s, border-color .08s;
}
input[type="checkbox"]:checked + label:before {
    width: 10px;
    top: -1px;
    left: 5px;
    border-radius: 0;
    opacity: 1;
    border-top-color: transparent;
    border-left-color: transparent;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
.boxes {
    display: block;
    margin: 15px auto 20px;
    width: 95%;
}
.contact-box textarea {
    display: block;
    width: 96%;
    font: 15px sans-serif;
    height: 180px;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #ccc;
    margin: 15px auto 50px;
}
.contact-box textarea:focus {
    border-color: #06907b;
    outline: 0;
}
.contact-box input[type="submit"] {
    position: relative;
    display: inline-block;
    padding: 1.8rem 3rem 1.9rem;
    border-radius: 4px;
    font-size: clamp(16px, 1.2vw, 18px);
    color: #fff;
    text-shadow: 1px 1px 2px rgb(0 0 0 / 10%);
    font-weight: 600;
    line-height: 1;
    text-align: center;
    border: none;
    background: #f07343;
    letter-spacing: 0.1em;
    box-shadow: 2px 2px 3px rgb(0 0 0 / 25%);
    transition: 0.3s;
}
.contact-box input[type="submit"]:hover {
    transform: translate(2px, 2px);
    box-shadow: none;
}
input.how-form {
    font: 15px sans-serif;
    box-sizing: border-box;
    width: 100%;
    margin: 8px 0 15px;
    padding: 0.6em 0.6em 0.55em;
    transition: 0.3s;
    border: 1px solid #ccc;
    border-radius: 4px;
    outline: none;
}
p.how {
    font-size: 16px;
    font-weight: 500;
    margin: 10px auto 0;
    text-align: left;
}
@media screen and (min-width:768px) and ( max-width:1024px) {
    .contact-wrap p,.contact-tel-wrap p,.contact-mail-wrap p {
        font-size: 14px;
    }
    section.contact-mail {
        padding: 6% 6% 6%;
    }
    .contact-box {
        display: block;
        margin: 0 auto 30px;
        width: 90%;
    }
    .contact-tel-wrap p {
        font-size: 14px;
        text-align: left;
        margin: 0 auto 20px;
    }
    .contact-tel-wrap a.line {
        border: 2px solid #f07343;
        width: 80%;
    }
    .cp_iptxt input[type=text], .cp_iptxt input[type=tel], .cp_iptxt input[type=email] {
        font: 14px sans-serif;
    }
    input[type="checkbox"] + label {
        font-size: 13px;
        margin: 0 25px 20px 0;
    }
    input[type="checkbox"] + label:before {
        top: 0px;
    }
    input[type="checkbox"]:checked + label:before {
        top: -3px;
    }
    .contact-box textarea {
        font-size: 14px;
    }
    .cp_iptxt {
        width: 98%;
    }
}
@media screen and (max-width: 767px) {
    section.contact {
        padding: 10% 15px 0%;
    }
    section.thanks {
        padding: 10% 15px 8%;
    }
    .contact-wrap p {
        font-size: 15px;
        text-align: left;
        margin: 0 auto 20px;
    }
    .contact-tel-wrap a {
        font-size: 38px;
        font-weight: 600;
        color: #f07343;
        display: block;
        margin: -25px auto -20px;
        text-align: center;
    }
    section.contact-mail {
        padding: 14% 15px 12%;
    }
    section.contact-tel {
        padding: 8% 15px 0%;
    }
    .contact-tel-wrap p,.contact-mail-wrap p {
        font-size: 15px;
        text-align: left;
    }
    .contact-tel-wrap a.line {
        width: 75%;
    }
    .contact-box {
        width: 100%;
    }
    p.form-title{
        font-size: 16px;
    }
    span.required {
        font-size: 12px;
        margin-left: 15px;
        border-radius: 4px;
    }
    p.how{
        font-size: 14px;
    }
    .contact-box textarea {
        font-size: 14px;
        line-height: 1.7;
    }
    input.how-form {
        font-size: 14px;
    }
    .contact-column {
        position: relative;
        padding: 0 0 100px;
    }
    .cp_iptxt input[type=text], .cp_iptxt input[type=tel], .cp_iptxt input[type=email] {
        font: 14px sans-serif;
    }
    input[type="checkbox"] + label {
        margin: 0 0px 25px 0;
        font-size: 14px;
        display: block;
    }
    .contact-box textarea {
        font-size: 14px;
    }
    .contact-box input[type="submit"] {
        padding: 2.0em 3.5em;
    }
    .cp_iptxt {
        position: relative;
        width: 100%;
    }
    .contact-box textarea {
        display: block;
        width: 95%;
        margin: 15px auto 40px;
    }
}
#map1{
    width: 100%;
    height: 350px;
}
@media screen and (max-width: 767px) {
    #map1 {
        width: 100%;
        height: 300px;
    }
}
/*--- 会社概要 ---*/
section.notfound {
    position: relative;
    padding: 7% 6% 7%;
    background: #fafafa;
    text-align: center;
}
section.notfound .midashi h2::before {
    content: 'Not Found';
}

/*--- LINE ---*/
section.line {
    position: relative;
    padding: 7% 6% 2%;
    background: #fafafa;
}
section.line .midashi h2::before {
    content: 'LINE';
}
.line-wrap p{
    font-size: clamp(16px, 1.2vw, 16px);
    text-align:center;
    margin: 0 auto 20px;
}
.line-img-wrap{
    display: block;
    margin: 30px auto 50px;
    text-align: center;
}
.line-add-wrap{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}
.line-add-wrap .left{
    position: relative;
    width: 35%;
    border: #ccc solid 1px;
    padding: 3%;
    border-radius: 10px;
    text-align: center;
    margin: 0 3%;
}
.line-add-wrap .right{
    position: relative;
    width: 35%;
    border: #ccc solid 1px;
    padding: 3%;
    border-radius: 10px;
    text-align: center;
    margin: 0 3%;
}
.line-add-wrap .right img{
    width: 150px;
}
.line-add-wrap .left h3, .line-add-wrap .right h3 {
    font-size: 18px;
    line-height: 1.4;
    margin: 0 auto 10px;
}
.line-add-wrap .left p, .line-add-wrap .right p {
    font-size: 15px;
    line-height: 1.7;
    margin: 0 auto 10px;
}
.line-add-wrap p{
    width: 100%;
}
p.add-txt{
    width: 100%;
    text-align: center;
    font-size: 18px;
    margin: 25px auto 0;
}
p.add-txt span {
    color: #00976e;
    font-weight: 500;
}
.line-add-wrap p span{
    color: #00976e;
    font-weight: 500;
}
.line-aimitsu{
    position: relative;
    background: #fff4db;
    padding: 4% 5% 3%;
    text-align: center;
    border-radius: 10px;
    margin: 5% auto 5%;
}
.line-aimitsu h3{
    font-size: 24px;
    display: block;
    text-align: center;
    color: #f07343;
    padding: 0 5px 13px;
    margin: 0 auto 13px;
    font-family: serif;
    border-bottom: 2px solid #f07343;
}
.line-aimitsu p {
    font-size: 16px;
    margin: 15px auto 15px;
    font-weight: 500;
}
.line-aimitsu p.fukidashi{
    font-size: 18px;
    font-weight: 500;
    padding: 15px 0;
    margin: 0;
    color: #653800;
}
.line-aimitsu p.fukidashi span {
    padding: 10px 30px 12px;
    background: #fff;
    line-height: 1;
    border-radius: 100px;
    font-weight: bold;
}
span.bold{
    font-weight: bold;
}
@media screen and (min-width:768px) and ( max-width:1024px) {
    .line-wrap p {
        font-size: 14px;
    }
    .line-add-wrap .left p, .line-add-wrap .right p {
        font-size: 14px;

    }
    .line-aimitsu h3 {
        font-size: 20px;
    }
    .line-aimitsu p {
        font-size: 15px;
    }
}
@media screen and (max-width: 767px) {
    section.line {
        padding: 10% 15px 4%;
    }
    .line-wrap p {
        font-size: 15px;
        text-align: left;
        margin: 0 auto 20px;
    }
    .line-img-wrap {
        margin: 30px auto 35px;
    }
    .line-add-wrap .left {
        width: 100%;
        padding: 5%;
        margin: 0 auto 20px;
    }
    .line-add-wrap .left p, .line-add-wrap .right p {
        font-size: 15px;
    }
    .line-add-wrap .right {
        width: 100%;
        padding: 5%;
        margin: 0 auto;
    }
    p.add-txt {
        font-size: 17px;
        line-height: 1.6;
        margin: 20px auto 25px;
    }
    .line-aimitsu {
        padding: 8% 5% 5%;
        text-align: left;
        margin: 10% auto 10%;
    }
    .line-aimitsu h3 {
        font-size: 20px;
    }
    .line-aimitsu p.fukidashi span {
        padding: 0;
        display: block;
        background: none;
        line-height: 1.4;
        border-radius: 0;
    }
    .line-aimitsu p.fukidashi {
        font-size: 16px;
        font-weight: 500;
        padding: 8px 20px;
        line-height: 1.4;
        margin: 10px auto;
        color: #653800;
        display: block;
        border-radius: 100px;
        background: #fff;
    }
}
section.service.gray-bg{
    background: #fafafa;
}
/*--------------------------------よくある質問-------------------------------------*/
section.question {
    position: relative;
    padding: 6% 6% 4%;
    background: #fafafa;
}
section.question .midashi h2::before {
    content: 'Question';
}
.question-wrap p{
    font-size: clamp(15px, 1.1vw, 16px);
    text-align:center;
    margin: 0 auto 0px;
}
.qa-wrap {
    display: block;
    margin: 0 auto;
    padding: 0px 0 0;
}
.qa-wrap h3{
    font-size: 22px;
    color: #222;
    border-top: 2px solid #222;
    border-bottom: 1px solid #222;
    padding: 0.5em 0.3em 0.6em;
    margin-top: 30px;
}
.accordion-wrap{
    border-bottom: 1px solid #f07343;
}
.accordion-item{
  width: 100%;
  margin: 0 auto;
  cursor: pointer;
  padding: 0 0.5em 5px;
  margin-top: 30px;
}
.accordion-header{
  transition: ease-in-out 100ms;
  font-size: 16px;
  font-weight: 500;
}
.accordion-text{
  width: 100%;
  display: none;
  padding: 5px 10px 30px;
}
.fa{
  transition: ease-in-out 300ms;
}
.rotate-fa{
  transform: rotate(180deg);
}
.accordion-header .fa{
    float: right;
    line-height: 35px;
    padding: 0 1.5em;
}
.accordion-gold{
    color: #f07343;
    font-size: 16px;
    font-weight: 500;
}
.accordion-no-bar{
  border-bottom: 0;
}
.accordion-text a{
    font-weight: 500;
    color: #f07343;
}
.accordion-text a:hover{
    opacity: 0.7;
    transition: 0.3s;
}
.question-link-wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin: 50px auto 0;
}
.question-link-wrap a {
    width: 22%;
    text-align: center;
    font-size: clamp(15px, 1.1vw, 16px);
    padding: 1em 0 1.2em;
    margin: 0 5px 20px;
    font-weight: 600;
    color: #f07343;
    border: 2px solid #f07343;
    transition: 0.3s;
    box-shadow: 2px 2px 2px rgb(0 0 0 / 15%);
}
.question-link-wrap a:hover {
    transform: translate(2px, 2px);
    box-shadow: none;
}


.qa-wrap{
    display: block;
    position: relative;
    margin: 50px auto 30px;
}
.qa-wrap dl dt {
    font-size: 18px;
    font-weight: bold;
    padding: 20px 55px 20px 20px;
    position: relative;
    cursor: pointer;
    background: #fcf0d8;
    margin-bottom: 15px;
}
.qa-wrap dl dt.active {
    background: #fff;
    margin-bottom: 0px;
    color: #f07343;
    
}
.single-wrap h4 {
    font-size: 18px;
    font-weight: bold; 
    width: 100%;
    margin: 20px 0 10px;
    padding: 5px 0 5px 5px;
    position: relative;
    color: #f47d17;
}
.single-wrap h5 {
    font-size: 17px;
    margin: 20px 0 10px;
    color: #f07343;
}
.single-wrap p a {
    color: #f47d17;
}
.single-wrap table {
    border-collapse: collapse;
}

.single-wrap table th, .single-wrap table td {
    padding: 10px;
   /* border:1px solid #888;*/
}
.single-wrap table td {
    text-align: left;
    background-color: #fff;
}
.single-wrap table th {
    background-color: rgba(244, 125, 23,0.1);
    font-weight: bold;
}    
.qa-wrap dl#acMenu dd{
    padding: 0px;
    margin: 0px;
    visibility: hidden;
    height: 0;
    opacity: 0;
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
    position: relative;
    line-height: 1.9;
}
.qa-wrap dl#acMenu dd a {
    color: #f07343;
}
.qa-wrap dl#acMenu dd.active{
    border-top: 1px solid #999;
    padding: 10px 10px 20px 20px;
    margin: 0 0 15px;
    visibility: visible;
    height: auto;
    opacity: 1;  
    background: #fff;
}
.qa-wrap dl dt span.qa-toggle_btn {
    position: absolute;
    top: 50%;
    right: 20px;
        width: 30px;
    height: 30px;
    left: auto;
    transform: translateY(-50%);
    display: block;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    background: #f07343;
}
.qa-wrap dl dt.active span.qa-toggle_btn {
    background: #f2f0ee;
}
.qa-toggle_title.selected .qa-toggle_btn:before {
	content: normal;
}
.qa-wrap dl dt span.qa-toggle_btn:before,
.qa-wrap dl dt span.qa-toggle_btn:after {
    display: block;
    content: '';
    background-color: #fff;
    position: absolute;
    width: 15px;
    height: 2px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: all .3s ease;
}
.qa-wrap dl dt span.qa-toggle_btn:before {
	width: 2px;
	height: 15px;
}
.qa-wrap dl#acMenu dt.active span.qa-toggle_btn:before {
    display: none;
}
.qa-wrap dl dt.active span.qa-toggle_btn:after {
    background-color:#f07343;
}
@media screen and (max-width:1024px) {
    .qa-wrap {
        width: 100%;
        margin: 30px auto 30px;
    }
    .qa-wrap dl dt {
        padding-right: 60px;
    }
}
@media screen and (max-width:767px) {
    .qa-wrap dl dt {
        font-size: 15px;
        line-height: 1.4;
    }
    .qa-wrap dl dd {
        padding: 10px 5px;
    }
}
/*--------------------------------プロフィール-----------------------------------*/
section.profile{
    padding: 7% 6% 7%;
}    
section.profile .midashi h2::before {
    content: 'Profile';
}
.profile-top-wrap p {
    text-align: center;
    margin: 0 auto 20px;
}
.profile-wrap {
    width: 100%;
    margin: 20px auto 30px;
}
.profile-wrap h4{
    padding: 10px 15px 10px;
    border-bottom: 1px solid #e2e2e2;
    border-top: 1px solid #e2e2e2;
    position: relative;
    width: 100%;
    background-color: #fff6e4;
    margin-bottom: 26px;
    font-size: 17px;
    cursor: none;
    font-weight: bold;
    position: relative;
}
.profile-wrap .anim-box .flexbox:nth-child(odd) {
    margin-top: 20px;  
}
.profile .anim-box{
    margin: 0 auto 30px;
}
.profile-wrap .item p {
    font-size: 15px;
    margin-bottom: 10px;
}
.privacy .qa-wrap .item {
    margin: 30px auto;
}
.privacy .qa-wrap .item ul li {
    margin: 0 auto 15px;
}
.certification .flexbox .item figure {
    width: 80%;
    margin: 15px auto 10px;
}

@media screen and (min-width:768px) and ( max-width:1024px) {
    .question-link-wrap a {
        width: 40%;
        font-size: 15px;
    }
    .question-wrap p {
        font-size: 14px;
    }
    .qa-wrap h3 {
        font-size: 20px;
    }
    .qa-wrap {
        display: block;
        width: 100%;
    }
    .accordion-header {
        transition: ease-in-out 100ms;
        font-size: 15px;
    }
    .accordion-text p{
        font-size: 14px;
    }
}
@media screen and (max-width: 767px) {
    section.question {
        padding: 10% 15px 2%;
    }
    .question-wrap p {
        font-size: 15px;
        text-align: left;
        margin: 0 auto 0px;
    }
    .question-link-wrap a {
        width: 90%;
        text-align: center;
        font-size: 16px;
        margin: 10px 0px 10px;
    }
    .question-link-wrap {
        margin: 30px auto 0;
    }
    .qa-wrap {
        display: block;
        width: 100%;
        overflow: hidden;
    }
    .accordion-header {
        font-size: 15px;
        padding: 0 3em 0 0;
    }
    .accordion-header .fa {
        float: right;
        line-height: 35px;
        padding: 0;
        margin: 0 -2em;
    }
    .accordion-item {
        padding: 0 0.5em 10px;
    }
    .accordion-text p {
        padding: 0px 15px 0 0;
    }
    .profile .item.row3, .profile .item.row5,.profile .item.row2{
        margin-bottom: 10px;
    }
    .profile-wrap h4 {
        font-size: 14px;
    }
    .profile .item figure{
        display: block;
        text-align: center;
    }
    .profile .item .link-wrap{
        margin: 20px auto 30px;
    }
    .profile-wrap .anim-box .flexbox:nth-child(odd) {
        flex-direction: column-reverse;    
    }
    .profile .flexbox.nowrap {
        flex-wrap:wrap;
    }
    .certification .flexbox .item figure {
        width: 100%;
        margin: 15px auto 0;
    }
    .contact-wrap {
        width: 100%;
        margin: auto;
        text-align: center;
    }
    .flexbox.row2 .item.mail-wrap {
        margin: 0 0 20px;
    }
}
/*--- お客様の声 ---*/
section.voice {
    position: relative;
    padding: 5% 6% 4%;
    background: rgba(241, 198, 97, 0.1);
}
section.voice .midashi h2::before {
    content: 'Voice';
}
.voice-wrap{
    margin: 30px auto;
}
.voice-wrap p{
    font-size: clamp(15px, 1.1vw, 16px);
    text-align:center;
    margin: 0 auto 0px;
}


@media screen and (min-width:768px) and ( max-width:1024px) {
    .voice-wrap p {
        font-size: 14px;
    }
}


@media screen and (max-width: 767px) {
    section.voice {
        padding: 10% 15px 11%;
    }
    .voice-wrap p {
        font-size: 15px;
        text-align: left;
        margin: 0 auto 0px;
    }
}
/*--- おすすめ屋根材 ---*/
section.recommend {
    position: relative;
    padding: 6% 6% 3%;
    background: #fafafa;
}
section.recommend .midashi h2::before {
    content: 'Recommend';
}
.recommend-wrap p{
    font-size: clamp(16px, 1.3vw, 16px);
    text-align:center;
    margin: 0 auto 20px;
}
section.d-trade {
    position: relative;
    padding: 0% 6% 6%;
    background: #fafafa;
}
section.d-trade .midashi h2::before {
    content: none;
}
.d-trade-wrap p{
    font-size: 16px;
    text-align: left;
    margin: 0 auto 20px;
}
.d-trade-wrap img{
    display: block;
    margin: 25px auto;
}
.d-trade-wrap h3{
    position: relative;
    font-size: 24px;
    font-family: serif;
    color: #222;
    border-top: 2px solid #f07343;
    border-bottom: 1px solid #f07343;
    padding: 0.5em;
    margin: 30px auto 30px;
}
.d-trade-inner{
    display: flex;
    flex-wrap: wrap;
}
.d-trade-inner .d-trade-inner-wrap{
    width: 46%;
    margin: 1% 2% 1%;
}
.d-trade-inner .d-trade-inner-wrap h3{
    position: relative;
    font-size: 18px;
    color: #222;
    font-family: 'Noto Sans JP';
    border-top: 2px solid #222;
    border-bottom: 1px solid #222;
    padding: 0.5em;
    margin: 0px auto 20px;
}
.d-trade-inner .d-trade-inner-wrap p{
    font-size: 15px;
}
section.sg {
    position: relative;
    padding: 0% 6% 6%;
    background: #fafafa;
}
section.sg .midashi h2::before {
    content: none;
}
.sg-wrap p{    
    text-align: left;
    margin: 0 auto 20px;
}
.sg-wrap img{
    display: block;
    margin: 30px auto;
}
.sg-wrap h3{
    position: relative;
    font-size: 24px;
    color: #222;
    font-family: serif;
    border-top: 2px solid #f07343;
    border-bottom: 1px solid #f07343;
    padding: 0.5em;
    margin: 30px auto 30px;
}
.sg-wrap h4{
    position: relative;
    font-size: 18px;
    color: #222;
    border-top: 2px solid #222;
    border-bottom: 1px solid #222;
    padding: 0.5em;
    margin: 0px auto 20px;
}
.d-trade-wrap a{
    display: block;
    font-size: 16px;
    color: #f07343;
    font-weight: 500;
    margin: 10px 0;
}
a.block_link{
    display: block;
    font-size: 16px;
    color: #f07343;
    font-weight: 500;
    margin: 10px 0;
}
.d-trade-wrap a:hover,.sg-wrap a:hover{
    transition: 0.3;
    opacity: 0.7;
}
@media screen and (min-width:768px) and ( max-width:1024px) {
    .recommend-wrap p {
        font-size: 14px;
    }
    .d-trade-wrap p {
        font-size: 14px;
    }
    .d-trade-wrap h3,.sg-wrap h3 {
        font-size: 20px;
    }
    .d-trade-inner .d-trade-inner-wrap h3,.sg-wrap h4 {
        font-size: 16px;
    }
    .d-trade-inner .d-trade-inner-wrap p {
        font-size: 14px;
    }
    .sg-wrap p {
        font-size: 14px;
    }
}
@media screen and (max-width: 767px) {
    section.recommend {
        padding: 10% 15px 5%;
    }
    .recommend-wrap p {
        font-size: 15px;
        text-align: left;
        margin: 0 auto 20px;
    }
    section.d-trade .midashi h2,section.sg .midashi h2 {
        font-size: 22px;
        letter-spacing: 0;
    }
    section.d-trade {
        padding: 0% 15px 7%;
    }
    .d-trade-wrap h3,.sg-wrap h3 {
        font-size: 18px;
        margin: 10px auto 20px;
    }
    .d-trade-inner .d-trade-inner-wrap {
        width: 100%;
        margin: 0 auto 20px;
    }
    .d-trade-inner .d-trade-inner-wrap h3,.sg-wrap h4 {
        font-size: 16px;
    }
    .d-trade-inner .d-trade-inner-wrap p,.sg-wrap p,.d-trade-wrap p {
        font-size: 14px;
    }
    .d-trade-wrap a {
        margin: 15px 0;
    }
    section.sg {
        padding: 0% 15px 8%;
    }
}
/*--- 施工実績一覧 ---*/
.works-blog-wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.works-blog-wrap a {
    width: 25%;
    margin: 0 auto 2%;
}
.works-blog-wrap a .works-inner {
    border-radius: 4%;
    background: #fff;
    width: 95%;
    display: block;
    margin: 0 auto;
}
.works-blog-wrap a:hover {
    transition: 0.3s;
    opacity: 0.7;
}
@media screen and (max-width: 767px) {
    .works-blog-wrap a {
        width: 50%;
        margin: 0 auto 3%;
    }
    .works-blog-wrap a .works-inner h3 {
        font-size: 15px;
    }
}
/*--- 料金一覧 ---*/
section.price {
    position: relative;
    padding: 7% 6% 1%;
    background: #fafafa;
}
section.price#price {
     background: #fff;
    padding: 7% 6% 6%;
}
section.price .midashi h2::before {
    content: 'Price';
}
.price-wrap img{
    display: block;
    margin: 30px auto;
}
.price-wrap p{
    font-size: clamp(16px, 1.2vw, 16px);
    margin: 0 auto 20px;
}
.price-list {
    display: block;
    margin: 5% auto 6%;
    width: 95%;
}
.price-list h3, .middle-heading{
    font-size: 24px;
    font-weight: 600;
    color: #222;
    border-top: 2px solid #f07343;
    border-bottom: 1px solid #f07343;
    margin: 0px auto 30px;
    padding: 0.35em 0.5em 0.5em;
    text-shadow: 1px 1px 1px rgb(0 0 0 / 10%);
}
.price-list table {
    margin: 0 auto 4%;
}
.price-list table tbody th{
    background: #d1ede6;
    width: 45%;
    font-size: 16px;
    font-weight: 500;
    text-align: left;
}
.price-list table tbody td{
    text-align: left;
    padding: 1em;
    font-size: 15px;
    background: #fff;
    line-height: 1.6;
}
.price-list table tbody td.price{
    text-align: right;
    width: 50%;
    font-weight: 500;
    background: #fff;
}
.price-list table tr th {
    background: #fff1d2;
    padding: 0.5em 1em;
    text-shadow: 1px 1px 0px rgb(0 0 0 / 5%);
}
/* 偶数行　１行ごとの色変えが不要なら削除 */
.price-list table tr:nth-child(2n) td {
    background: #f8f9f9;
}
/* 偶数行の項目 １行ごとの色変えが不要なら削除 */
.price-list table tr:nth-child(2n) th {
    background: #fbefde;
}

.price-box .flexbox {
    align-items: center;
}
.price-box .left {
    width: 60%;
    padding: 20px 20px 20px 0px;
}
.price-head p{
    font-size: 1.6em;
    text-align: center;
    font-weight: bold;
    margin-bottom: 5px;
    background: #f07343;
    padding: 5px 15px;
    color: #fff;
}
.price-box .left h4{
    font-size: 1.6em;
    padding-left: 20px;
    line-height: 1.2em;
}
.price-box .left h3 span{
    font-size: 1.2em;
    line-height: 1.1em;
}
.price-box .right {
    width: 40%;
    display: flex;
}
.price-box .right img {
    height: 100%;
    object-fit: cover;
}
.price-box {
    border: 1px solid #999;
    margin-bottom: 40px;
}
.price_inner {
    padding:0 20px 15px;
}
.price-box .ex {
  margin: 15px 0 10px;
    line-height: 1.4em;
    background: #d70d1d;
    font-size: 20px;
    padding: 10px 15px;
    color: #fff;
    font-weight: bold;
}
.price-box .price_box{
    flex-grow: 1;
    background: #fff;
    border: 1px solid #1590c4;
    padding: 12px;
    margin-right: 10px;
    margin-bottom: 0;
    text-align: center;
    width: 18%;
    line-height: 1.4em;
    position: relative;
    font-weight: bold;
    padding: 10px;
    font-size: 17px;
}
.price-box .price_box.tubo{
    font-size: 1.4em;
}
.price-box .price_box.year .num{
    font-size: 1.2em;
}
.price-box .price_box > span{
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    width: 95%;
    margin: auto;
}
.price-box .price{
    font-size: 22px;
    font-weight: bold;
    color: #f07343;    
    margin: 10px 0 0;
    text-align: right;
    line-height: 1.0;
    flex-grow: 2;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    
}
.price-box .price span.num_big{
    font-size: 5.3vw;
    letter-spacing: -0.0.5em;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    line-height: 0.9em;
 }
.price-box .price span.num_small{

 }
.price-box .price span.zeikomi{
    font-size: 14px;
    display: block;
 }
.price-box .use {
    margin: 15px 0 0px;
}
.price-box .use p {
    margin: 0;
    font-size: 14px;
    line-height: 1.4em;
}
.price-box .method {
    margin-top: 12px;
}
.price-box .method p {
    font-size: 12px;
    margin: 0 0 5px;
    display: inline-block;
    background: #545454;
    color: #fff;
    padding: 3px 8px 3px;
}
.price-box .method p.caution {
    font-size: 0.9em;
    line-height: 1.5;
    padding: 5px 0;
    margin-top: 5px;
    color: #333;
    background-color: transparent;
}
.price-box .bottom p{
    font-size: 11px;
    line-height: 1.5;
    padding: 5px 0;
    margin: 0;
}
.price-box .bottom p, p.sanko {
    font-size: 13px;
    line-height: 1.5;
    padding: 5px 0;
    margin: 0;
}

#price .pricing-list  {
    margin: 30px auto 0;
}
#price .pricing-list li.item {
    padding: 0px 0 10px;
    list-style-type: none;
    border: 1px solid #E2E2E2;
    margin-bottom: 30px;
    position: relative;
    background-color: rgba(255,255,255,0.8);
    display: flex;
    flex-direction: column;
}
#price .pricing-list li.item h4 {
    font-size: 18px;
    margin-bottom: 5px;
    color: #f07343;
    padding: 10px 5px 0;
    text-align: center;  
}
#price .pricing-list li.item p,
#price .pricing-list li.item ul{
    padding: 5px 10px 0;
    margin-bottom: 10px;
}
#price .pricing-list li.item ul{
    margin-bottom: 0px;
}
#price .pricing-list li.item ul {
    margin-top: auto;
}
#price .pricing-list li.item ul li {
    margin-bottom: 0;
    padding: 7px 10px 0;
    border-top: 1px solid #cccccc; 
    display: flex;
    align-items: center;
}
#price .pricing-list li.item ul li span {
    font-weight: bold; 
    padding-left: 20px;
    color: #f47d17;
    font-size: 17px;
    margin-left: auto;
}
#price .pricing-list li.item ul li span.num {
    font-size: 3em;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    padding-right: 2px;
    letter-spacing: 0.02em;
    line-height: 1.1em;
}
#price .pricing-list li.item p {
    font-size: 14px;
    line-height: 1.6em;    
}
#price .pricing-list li.item img {
    width: 100%;
}
#price .pricing-list li.item ul li span.tax {
    font-size: 0.7em;
    padding-left: 0;
}
#price .pricing-list .item {
    border: 1px solid #888;
    margin: 0 0.5% 20px;
    display: flex;
}
#price .pricing-list .item .flexbox {
    padding:5px 5px 5px;
    
}  
#price .pricing-list .item .price {
    font-size: 20px;
    font-weight: bold;
    color: #f07343;
    margin-bottom: 0;
    line-height: 1.3em;
    text-align: right;
    padding-right: 15px;
    display: block;
}
#price .pricing-list .item h4 {
    font-size: 17px;
    padding: 0px 0px 5px 10px;
}
#price .pricing-list .item span.num_big {
    font-size: 1.8em;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    line-height: 0.9em;
}
#price .pricing-list .item span.zei {
    font-size: 0.7em;
}
#price .pricing-list .item .right {
    width: 30%;
}
#price .pricing-list .item .left {
    width: 70%;
}
#price .pricing-list .item .flexbox figure {
    height: 100%;
}
#price .pricing-list .item .flexbox figure img {
    object-fit: cover;
    height: 100%;
}
.catch {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    font-weight: 500;
    color: #f07343;
    margin: 0 auto 4%;
    text-shadow: 1px 1px 1px rgb(0 0 0 / 10%);
}
.catch:before, .catch:after {
    border-top: 2px solid;
    content: "";
    width: 5em;
}
.catch:before {
    margin-right: 1em; /* 文字の右隣 */
}
.catch:after {
    margin-left: 1em; /* 文字の左隣 */
}
.ex-wrap {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: space-between;
    background: #fff;
    border-radius: 10px;
    box-shadow: 2px 2px 5px rgb(0 0 0 / 10%);
    margin: 0 auto 4%;
}
.ex-wrap .left {
    width: 50%;
    padding: 2.2em;
}
.ex-wrap .left h3{
    font-size: 20px;
    padding: 0.4em 0.5em 0.5em;
    border-top: 2px #222 solid;
    border-bottom: 1px #222 solid;
    margin: 0 auto 20px;
    text-shadow: 1px 1px 1px rgb(0 0 0 / 10%);
}
.ex-wrap.ex-paint .left h3 {
    font-size: 21px;
    color: #f58900;
    padding: 0 0.5em 0.5em;
    text-shadow: none;
    border-top: 0px #222 solid;
    border-bottom: 2px #f58900 solid;
}
.ex-wrap.ex-paint p{
    font-size: 15px;
    line-height: 1.8;
    margin-bottom: 10px;
}
.ex-wrap .right{
    width: 47%;
    background-position: center;
    background-size: cover;
    border-radius: 0 10px 10px 0;
}
.ex-wrap.ex-ashiba .right{
    background-image: url(images/ashiba-bg.jpg);
}
.ex-wrap.ex-card .right {
    background-image: url(images/price-card.jpg);
    background-size: contain;
    background-repeat: no-repeat;
}

section.about-direct{
    position: relative;
    padding: 7% 6% 1%;
    background: #fafafa;
}
section.about-direct.merit{
    background: #fff;
}
section.about-direct.merit .midashi h2::before {
    content: 'Merit';
}
section.about-direct.promise .midashi h2::before {
    content: 'Promise';
}
section.about-direct p {
    margin: 0 0 20px;
}
.price-loan{
    display: block;
    width: 100%;
}
.price-loan h3{
    font-size: 20px;
    padding: 0.4em 0.5em 0.5em;
    border-top: 2px #222 solid;
    border-bottom: 1px #222 solid;
    margin: 30px auto 20px;
    text-shadow: 1px 1px 1px rgb(0 0 0 / 10%);
}
.price-loan p{
    line-height: 1.8;
    margin: 0 auto 15px;
    font-size: 15px;
}
.price-loan picture {
    display: block;
    margin: 0 auto 30px;
}
.price-loan picture img{
    display: block;
    margin: 0 auto;
    width: 80%;
}
.promise-wrap{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 30px auto 4%;
}
.promise-inner{
    width: 30%;
    margin: 0 1.3% 2.6%;
    border: 2px solid #f07343;
    border-radius: 7px;
}
.promise-inner h4{
    font-size: 20px;
    font-family: serif;
    color: #f07343;
    padding: 20px;
    text-shadow: 1px 1px 1px rgb(0 0 0 / 7%);
}
img.gencho{
    float: right;
    padding: 0 0 20px 20px;
    max-width: 100%;
}
@media screen and (min-width:768px) and ( max-width:1024px) {
    .price-wrap p {
        font-size: 14px;
    }
    .price-list table tbody th {
        font-size: 15px;
    }
    .price-list table tbody td {
        font-size: 14px;
    }
    .price-list table tr th {
        padding: 0.5em 8px;
    }
    .catch {
        font-size: 22px;
    }
    .catch:before, .catch:after {
        width: 4em;
    }
    .ex-wrap .left {
        width: 50%;
        padding: 1.5em;
    }
    .ex-wrap .left h3 {
        font-size: 16px;
    }
    .ex-wrap .left p {
        font-size: 14px;
    }
    .price-loan {
        display: block;
        width: 100%;
        margin: 6% auto;
    }
    .price-loan h3 {
        font-size: 16px;
    }
    .price-loan p {
        font-size: 14px;
    }
    .price-loan picture img {
        width: 100%;
    }
    .price-list {
        width: 100%;
    }
    p.price-caution {
        font-size: 13px;
    }
    section.about-direct {
        padding: 3% 6% 1%;
    }
    .promise-inner h4 {
        font-size: 16px;
    }
    img.gencho {
        width: 300px;
    }
}
@media screen and (max-width: 767px) {
    section.price {
        padding: 10% 15px 5%;
    }
    .price-wrap p {
        font-size: 15px;
        text-align: left;
        margin: 0 auto 20px;
    }
    .price-list {
        display: block;
        margin: 10% auto 11%;
        width: 100%;
    }
    .price-list h3 {
        font-size: 18px;
        margin: 0px auto 20px;
        text-shadow: 1px 1px 1px rgb(0 0 0 / 10%);
    }
    .middle-heading{
        font-size: 18px;
    }
    .price-list table {
        margin: 0 auto 10%;
    }
    .price-list table tr{
        display: flex;
        flex-wrap: wrap;
    }
    .price-list table tr th {
        padding: 0.5em 5px 0.6em;
        width: 100%;
        font-size: 16px;
        text-shadow: 1px 1px 1px rgb(0 0 0 / 10%);
    }
    .price-list table tbody td {
        width: 100%;
        padding: 1em;
        font-size: 14px;
    }
    .price-list table tbody td.price {
        text-align: right;
        width: 100%;
        padding: 1em 1em;
        background: #fff;
    }
    .price-box .price span.num_big {
        font-size: 12vw;
    }
    .price-box .left h4 {
        font-size: 1.4em;
        padding-left: 10px;
    }
    .price-head p {
        font-size: 1.4em;
    }
    .price_inner {
        padding: 0 10px 15px;
    }
    .price-box .ex {
        font-size: 17px;
      }
    .catch {
        font-size: 20px;
        text-align: center;
        line-height: 1.4;
        font-weight: 600;
        margin: 0 auto 8%;
    }
    .catch:before, .catch:after {
        width: 5em;
    }
    .ex-wrap {
        flex-direction: column-reverse;
        margin: 0 auto 8%;
        display: flex;
        flex-wrap: wrap;
    }
    .ex-wrap .left {
        width: 100%;
        padding: 8% 5% 6%;
    }
    .ex-wrap .left h3 {
        font-size: 18px;
        padding: 0.4em 0.3em 0.5em;
    }
    .ex-wrap .right {
        width: 100%;
        height: 200px;
        border-radius: 10px 10px 0px 0;
    }
    .price-loan h3 {
        font-size: 18px;
    }
    .price-loan img {
        width: 100%;
        padding: 0;
    }
    .price-loan p {
        font-size: 15px;
    }
    .price-loan {
        width: 100%;
        margin: 12% auto;
    }
    .price-list table tr:nth-child(2n) td {
        background: #fff;
    }
    p.price-caution {
        font-size: 13px;
    }
    section.about-direct {
        padding: 2% 15px 1%;
    }
    .promise-wrap {
        margin: 0 auto 10%;
    }
    .promise-inner {
        width: 46%;
        margin: 0 1% 2%;
    }
    .promise-inner h4 {
        font-size: 16px;
        padding: 15px;
    }
    img.gencho {
        float: none;
        display: block;
        margin: 0 auto 25px;
    }
}
/*--- 火災保険 ---*/
section.insurance {
    position: relative;
    padding: 7% 6% 4%;
    background: #fafafa;
}
section.insurance .midashi h2::before {
    content: 'Insurance';
}
.insurance-wrap p{
    font-size: clamp(16px, 1.2vw, 16px);
    text-align:center;
    margin: 0 auto 20px;
}
.insurance-ex{
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    margin: 4% auto;
}
.insurance-ex h3{
    width: 100%;
    font-size: 24px;
    color: #222;
    font-family: serif;
    margin: 0 auto 25px;
    border-top: 2px solid #f07343;
    border-bottom: 1px solid #f07343;
    padding: 0.3em 0.5em 0.4em;
    text-shadow: 1px 1px 1px rgb(0 0 0 / 5%);
}
.insurance-ex .left {
    width: 50%;
    margin: 0 2%;
}
.insurance-ex p,.insurance-ex .left p{
    width: 100%;
    font-size: 16px;
    line-height: 1.8;
    text-align: left;
    margin: 0 auto 20px 0;
}
.insurance-ex ul {
    margin: 0 auto 20px 0;
}
.insurance-ex ul li{
    font-size: 16px;
    font-weight: 500;
    list-style: inside;
    line-height: 1.6;
}
.insurance-ex .right {
    width: 37%;
    margin: 0 2%;
    background: #fff;
    padding: 2% 2% 0% 2%;
    border-radius: 5px;
    border: 1px solid #ccc;
    box-shadow: 1px 1px 3px rgb(0 0 0 / 10%);
}
.insurance-ex .right h3{
    font-size: 20px;
    color: #222;
    text-align: center;
    margin: 0 auto 15px;
    border-top: 2px solid #222;
    border-bottom: 1px solid #222;
    padding: 0.3em 0 0.4em;
    text-shadow: 1px 1px 1px rgb(0 0 0 / 10%);
}
.insurance-ex .right h3 span.fa-solid{
    color: #ff923a;
}
.ex-wrap.ex-insurance01 .right {
    background-image: url(images/insurance-bg01.jpg);
}
.ex-wrap.ex-insurance02 .right {
    background-image: url(images/insurance-bg02.jpg);
}
.ex-wrap#paint .right {
    background-image: url(images/paint-bg01.jpg);
}
.ex-wrap#solar .right {
    background-image: url(images/solar-bg01.jpg);
}
@media screen and (min-width:768px) and ( max-width:1024px) {
    .insurance-wrap p {
        font-size: 14px;
    }
    .insurance-ex h3 {
        font-size: 18px;
    }
    .insurance-ex .right h3 {
        font-size: 16px;
    }
    .insurance-ex p, .insurance-ex .left p {
        font-size: 14px;
    }
    .insurance-ex ul li {
        font-size: 15px;
    }
    .insurance-ex .right {
        width: 35%;
        padding: 3% 3% 0;
    }
}
@media screen and (max-width: 767px) {
    section.insurance {
        padding: 10% 15px 5%;
    }
    .insurance-wrap p {
        font-size: 15px;
        text-align: left;
        margin: 0 auto 20px;
    }
    .insurance-ex h3 {
        width: 100%;
        font-size: 18px;
        line-height: 1.4;
        margin: 0 auto 20px;
    }
    .insurance-ex .left {
        width: 100%;
        margin: 0 0%;
    }
    .insurance-ex {
        margin: 10% auto;
    }
    .insurance-ex .right {
        width: 95%;
        margin: 10px auto;
        padding: 7% 5% 0%;
    }
    .insurance-ex p, .insurance-ex .left p {
        width: 100%;
        font-size: 15px;
    }
}
/*--- 外壁塗装 ---*/
section.wallpaint {
    position: relative;
    padding: 6% 6% 6%;
    background: #fafafa;
}
section.wallpaint .midashi h2::before {
    content: 'WallPaint';
}
.wallpaint-wrap p{
    font-size: clamp(15px, 1.1vw, 16px);
    text-align:center;
    margin: 0 auto 20px;
}
.wallpaint-ex{
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    margin: 4% auto;
}
.wallpaint-ex h3{
    width: 100%;
    font-size: 24px;
    color: #f07343;
    margin: 0 auto 25px;
    text-align: center;
    border-top: 2px solid #f07343;
    border-bottom: 1px solid #f07343;
    padding: 0.3em 0.5em 0.4em;
    text-shadow: 1px 1px 1px rgb(0 0 0 / 5%);
}
.wallpaint-shojou{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    justify-content: center;
    margin: 0 auto;
}
.wallpaint-shojou-inner{
    width: 20%;
    margin: 0 1% 0;
}
.wallpaint-shojou-inner img {
    width: 90%;
    display: block;
    margin: 0 auto 10px;
    border-radius: 50%;
    box-shadow: 2px 2px 3px rgb(0 0 0 / 15%);
}
.wallpaint-ex p{
    width: 100%;
    font-size: 15px;
    line-height: 1.8;
    text-align: left;
    margin: 0 auto 20px 0;
}
.wallpaint-shojou-inner p {
    display: block;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
}
.ex-wrap.ex-wallpaint01 .right {
    background-image: url(images/wallpaint-bg01.jpg);
}
.ex-wrap.ex-wallpaint02 .right {
    background-image: url(images/wallpaint-bg02.jpg);
}
.ex-wrap.ex-wallpaint03 .right {
    background-image: url(images/wallpaint-bg03.jpg);
}
.ex-wrap.ex-wallpaint04 .right {
    background-image: url(images/wallpaint-bg04.jpg);
}
.ex-wrap.ex-wallpaint05 .right {
    background-image: url(images/wallpaint-bg05.jpg);
}
@media screen and (min-width:768px) and ( max-width:1024px) {
    .wallpaint-wrap p {
        font-size: 14px;
    }
    .wallpaint-ex h3 {
        font-size: 18px;
    }
    .wallpaint-ex .right h3 {
        font-size: 16px;
    }
    .wallpaint-ex p {
        font-size: 14px;
    }
}
@media screen and (max-width: 767px) {
    section.wallpaint {
        position: relative;
        padding: 10% 15px 9%;
        background: #fafafa;
    }
    section.ex-wallpaint {
        padding: 10% 15px 5%;
    }
    .wallpaint-wrap p {
        font-size: 15px;
        text-align: left;
        margin: 0 auto 20px;
    }
    .ex-wallpaint-wrap p {
        font-size: 15px;
        text-align: left;
        margin: 0 auto 20px;
    }
    .ex-wallpaint-ex h3 {
        width: 100%;
        font-size: 18px;
        line-height: 1.4;
        margin: 0 auto 20px;
    }
    .wallpaint-ex h3 {
        width: 100%;
        font-size: 18px;
        color: #f07343;
        margin: 20px auto 20px;
    }
    .wallpaint-shojou-inner {
        width: 48%;
        margin: 0 1% 0;
    }
    .wallpaint-shojou {
        margin: 10px auto 10px;
    }
    .ex-wrap.ex-wallpaint01 .right {
        background-image: url(images/wallpaint-bg01-sp.jpg);
    }
    .ex-wrap.ex-wallpaint02 .right {
        background-image: url(images/wallpaint-bg02-sp.jpg);
    }
    .ex-wrap.ex-wallpaint03 .right {
        background-image: url(images/wallpaint-bg03-sp.jpg);
    }
    .ex-wrap.ex-wallpaint04 .right {
        background-image: url(images/wallpaint-bg04-sp.jpg);
    }
    .ex-wrap.ex-wallpaint05 .right {
        background-image: url(images/wallpaint-bg05-sp.jpg);
    }
}
/* ---アフターフォロー--- */
section.support {
    position: relative;
    padding: 6% 6% 6%;
    background: #fafafa;
}
section.support .midashi h2::before {
    content: 'Support';
}
.support-wrap{
    display: block;
    margin: 0 auto 6%;
}
.support-wrap p{
    font-size: clamp(15px, 1.1vw, 16px);
    text-align:center;
    margin: 0 auto 20px;
}
.ex-hosho p span{
    font-size: 14px;
}
.ex-wrap.ex-hosho .right {
    background-image: url(images/hosho-bg.jpg);
}
@media screen and (min-width:768px) and ( max-width:1024px) {
    section.support {
        padding: 6% 6% 1%;
    }
    .support-wrap p {
        font-size: 14px;
    }
}
@media screen and (max-width: 767px) {
    section.support {
        padding: 10% 15px 0%;
    }
    .support-wrap p {
        font-size: 15px;
        text-align: left;
        margin: 0 auto 20px;
    }
    .support-wrap {
        display: block;
        margin: 0 auto 10%;
    }
}
/* ---豆知識・ブログ一覧 ---*/
section.sub-knowledge,section.sub-shokunin {
    position: relative;
    padding: 6% 6% 6%;
    background: #fafafa;
}
section.sub-knowledge .midashi h2::before {
    content: 'Knowledge';
}
section.sub-shokunin .midashi h2::before {
    content: 'Blog';
}
section.sub-knowledge .know-wrap,section.sub-shokunin .shokunin-wrap {
    justify-content: flex-start;
    width: 100%;
    margin: 0 auto;
}
section.sub-knowledge .know-wrap a,section.sub-shokunin .shokunin-wrap a {
    width: 23%;
    margin: 0 1% 2.5%;
}
@media screen and (max-width: 767px) {
    section.sub-knowledge, section.sub-shokunin {
        position: relative;
        padding: 10% 15px 8%;
        background: #fafafa;
    }
    section.sub-knowledge .know-wrap,section.sub-shokunin .shokunin-wrap {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        width: 100%;
        margin: 0 auto;
    }
    section.sub-knowledge .know-wrap a,section.sub-shokunin .shokunin-wrap a {
        width: 48%;
        margin: 4% 1% 4%;
    }
}
/* --- 投稿ページ ---*/
section.column-knowledge,section.column-shokunin,section.column-works {
    position: relative;
    padding: 7% 2% 5% 5%;
    background: #fafafa;
}
section.column-knowledge .midashi h2::before {
    content: 'Knowledge';
}
section.column-shokunin .midashi h2::before {
    content: 'Blog';
}
section.column-works .midashi h2::before {
    content: 'Works';
}
.column-knowledge-wrap,.column-shokunin-wrap,.column-works-wrap {
    background: #fff;
    border-radius: 10px;
    padding: 5% 6% 3%;
    position: relative;
    box-shadow: 1px 1px 5px rgb(0 0 0 / 5%);
}
.title-wrap {
    position: relative;
    margin: 0 auto 25px;
    padding: 0 0 25px;
    border-bottom: 1px #ccc solid;
}
.title-wrap h2 {
    font-size: 24px;
    display: block;
    color: #f07343;
    font-weight: bold;
    padding: 0 0 10px;
    text-shadow: 1px 1px 1px rgb(0 0 0 / 8%);
}
.title-wrap p{
    font-size: 14px;
    line-height: 1;
}
.contects-wrap p, .contects-works-wrap p {
  font-size: 15px;
  line-height: 1.9;
  margin: 5px auto 20px;
  word-break: break-all;
}
.contects-wrap ul {
  margin: 0 auto 20px;
}
.contects-wrap ul li {
  line-height: 1.9;
}
.contects-works-wrap p a, .contects-wrap p a {
  color: #f07343;
}
.contects-wrap .btn {
    position: relative;
    display: inline-block;
    padding: 1.0rem 2rem 1.0rem;
    border-radius: 4px;
    font-size: clamp(16px, 1.2vw, 18px);    
    font-weight: 600;
    line-height: 1.1;
    text-align: center;
    background: #f07343;
    letter-spacing: 0.1em;
    transition: 0.3s;
    margin-bottom: 15px;
}
.contects-wrap .btn a {
    color: #fff;
}
.contects-wrap img{
    max-width: 100%;
    display: inline-block;
    margin: 0 auto 0px;
    height: auto;
}
.contects-works-wrap img {
    max-width: 100%;
    display: inline-block;
    margin: 0 auto 0px;
}

.contects-works-wrap .nayami {
    padding: 45px 20px 5px;
    border: 1px solid #f07343;
    margin: 30px auto;
    position: relative;
}
.contects-works-wrap .nayami h3 {
    margin: 0;
    padding: 5px 20px 5px;
    font-size: 15px;
    position: absolute;
    top: 0;
    left: -1px;
    background-color: #f07343;
    border-radius: 0;
    letter-spacing: 0;
    color: #fff;
    border-bottom: 0px solid #f07343;
    border-left: 0px solid #0e3d83;
}
.contects-works-wrap .nayami p {
    line-height: 1.9em;
}

.single-wrap h3, .color-heading{
    font-size: 20px;
    color: #fff;
    padding: 9px 10px 9px 15px;
    margin: 55px auto 20px;
    background: #f07343;
}
.single-wrap h4 {
    font-size: 19px;
    padding: 9px 10px 9px;
    margin: 30px auto 25px;
    border-left: 7px solid #f07343;
    background:rgba(240, 115, 67, 0.1);
}
.single-wrap h5 {
    color: #f07343;
    font-size: 17px;
    margin: 30px auto 15px;
}
.single-wrap .before, .single-wrap .after {
    position: relative;
    margin-bottom: 20px;
}
.single-wrap .before::before, .single-wrap .after::before {
    position: absolute;
    top: 0;
    left: 0;    
    color: #fff;
    font-family: 'Roboto Slab', serif;
    padding: 3px 20px;
    font-size: 15px;
    letter-spacing: 0.05em;
}
.single-wrap .before::before {
    content: 'Before';
}
.single-wrap .after::before {
    content: 'After';
}
.single-wrap .before::before,
.news_img.row2 .text{
    background: #222;
}
.single-wrap .after::before,
.news_img.row2 .text.after{
    background: #f07343;
}
.single-wrap .flexbox img {
    max-width: 100%;
    width: 100%;
    display: inline-block;
    margin: 0 auto 0px;
    height: auto;
    vertical-align: top;
}
.single-wrap .flexbox figure {
   padding: 0;
        margin: 0;
}
.single-wrap figure.wp-block-image img {
    margin-bottom: 10px;
}
.work-table-wrap{
    position: relative;
    display: block;
    margin: 50px 0px 50px;
}
.work-table-wrap table{
    width: 100%;
    border-collapse: collapse;
}
.work-table-wrap table tr{
    border-bottom: solid 2px white;
}
.work-table-wrap table tr:last-child{
    border-bottom: none;
}
.work-table-wrap table th{
    position: relative;
    text-align: left;
    width: 30%;
    background-color: rgba(240, 115, 67, 0.5);
    color: white;
    text-align: center;
    padding: 13px 10px;
    font-weight: bold;
    line-height: 1.3em;
}
.work-table-wrap table th:after{
    display: block;
    content: "";
    width: 0px;
    height: 0px;
    position: absolute;
    top:calc(50% - 10px);
    right:-10px;
    border-left: 10px solid rgba(240, 115, 67, 0.5);
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
}
.work-table-wrap table td{
    text-align: left;
    width: 65%;
    background-color: #f5f5f5;
    padding: 13px 10px 13px 1.5em;
    border-right: none;
    border-bottom: none;
}

h2.other-title {
    display: block;
    font-size: 22px;
    color: #f07343;
    border-top: 2px solid #f07343;
    border-bottom: 1px solid #f07343;
    padding: 0.3em 0.3em 0.4em;
    margin: 0 auto 25px;
    text-shadow: 1px 1px 1px rgb(0 0 0 / 8%);
}
.wp-pagenavi {
    margin: 4% 0 0;
}
.contects-wrap h2 {
    font-size: 22px;
    font-weight: 700;
    margin: 30px auto 25px;
    padding: 0 10px 5px;
    border-bottom: 2px solid #f96e3a;
}
.contects-wrap h3 {
    font-size: 20px;
    font-weight: 700;
    margin: 0 auto 20px;
    padding: 5px 10px 5px;
    border-left: 9px solid #f96e3a;
}
.contects-wrap h4 {
    font-size: 18px;
    font-weight: 600;
    color: #f07343;
    margin: 20px auto 10px;
}
.flexbox {
    display: flex;
    display: -webkit-flex;
    width: 100%;
    justify-content: space-between;
    flex-wrap: wrap;
}
.flexbox.nowrap {
    flex-wrap: nowrap;
}
.flexbox.row2.margin .item {
    flex-basis: 48%;
    max-width: 48%;
    position: relative;
}
.flexbox.row2 .item {
    flex-basis: 50%;
    max-width: 50%;
    position: relative;
}
.flexbox.row2.margin .item:nth-child(odd){
    margin-right: 1%;
}
.flexbox.row2.margin .item:nth-child(even){
    margin-left: 1%;
}
.flexbox.row3.margin .item {
    flex-basis: 32.33%;
    max-width: 32.33%;
    position: relative;
    margin: 0 0.5% 30px;
}
.flexbox.row4.margin .item {
    flex-basis: 23%;
    max-width: 23%;
    position: relative;
    margin: 0 0.5% 30px;
}
.item.row6 {
    width: 60%;
    max-width: 60%;
}
.item.row5 {
    width: 48.5%;
    max-width: 48.5%;
}
.item.row4 {
    width: 37%;
    max-width: 37%;
}
.item.row7 {
    width: 70%;
    max-width: 70%;
}
.item.row3 {
    width: 28%;
    max-width: 28%;
}
.item.row8 {
    width: 80%;
    max-width: 80%;
}
.item.row2 {
    width: 17%;
    max-width: 17%;
}
.item.row2 {
    width: 17%;
    max-width: 17%;
}
.item.row8 {
    width: 80%;
    max-width: 80%;
}
.width100 {
    width: 100%;
}
.width90 {
    width: 90%;
    margin: auto;
}
.width80 {
    width: 80%;
    margin: auto;
}
.width60 {
    width: 60%;
    margin: auto;
}
.item figure{
    width: 100%;
    margin: auto;
}
.other-material .item p{
    font-size: 14px;
    line-height: 1.6em;
}
.merit-h {
    font-size: 17px;
    margin: 5px 0 5px;
}
.syuttenn, .syuttenn a{
    font-size: 12px;
    line-height: 1.3em;
    margin-top: 5px;
    color: #666;
}
.category {
    margin-top: 0px;
}

.category li , .categories li{    
    display: inline-block;
    font-size: 13px;
    background-color: #f1c661;
    margin-right: 3px;
    margin-bottom: 6px;
    transition: all .3s ease;
    -webkit-transition: all .3s ease;
}    
.category li a, .categories li a {
    padding: 4px 10px;
    color: #fff;
    display: block;
    font-size: 14px;
}
.categories li:hover, .categories li.current-cat {
    background-color: #f07343;
}
.categories li:hover a, .categories li.current-cat a {
    color: #fff;
}
.category li a.other {
    background-color: #888;
    color: #fff;
}
.tags {
    padding: 10px 0 7px;
}
.news_textbox .tags {
    padding: 5px 0;
}
.tags li {
    display: inline-block;    
    border: 1px solid #f07343;
    margin-right: 5px;
    margin-bottom: 7px;
    transition: all .3s ease;
}
.tags li a {
    padding: 3px 10px 4px;
    color: #f07343;
    display: block;
    font-size: 14px;
    transition: all .3s ease;
}
.tags li a:hover {
    background: #f07343;
    color: #fff;
}
.nm-card-box-wrap {
    margin-top: 15px;
    margin-bottom: 20px;
     width: 90%;  
}
.nm-card-box-wrap + br + .nm-card-box-wrap{
    margin-top: -25px;
}
a.nm-card {
    border: 1px solid #ccc;
    display: block;
    padding: 10px;
    position: relative;
    -webkit-transition: 0.3s ease-in-out;
    -moz-transition: 0.3s ease-in-out;
    -o-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out;
    width: auto;
    text-decoration: none;
    position: relative;
     
}
a.nm-card:hover {
    box-shadow: none;
    opacity: .8;
}
.contects-works-wrap .nm-card-box-txt, 
.contects-wrap .nm-card-box-txt,
.nm-card-box-txt  {
    position: absolute;
    top: 0;
    left: 0;
    margin-bottom: 0;
    background: #f07343;
    padding: 6px 20px 6px;
    line-height: 1.1em;
    color: #fff;
    font-size: 13px;
}
.nm-card-box {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;    
}
.nm-card-title {
    font-size: 16px;
    font-weight: 600;
    color: rgba(240, 115, 67, 0.7);
    padding: 2px 0 5px;
    line-height: 1.4em;
}
.nm-card-thumbnail {
    margin-right: 15px;
}
.contects-works-wrap .nm-card-thumbnail img,
.contects-wrap .nm-card-thumbnail img {
    width: 160px;    
    height: 100px;
    margin: 0;
    object-fit: cover;
    vertical-align: top;
    max-width: 100%;
}
.contects-works-wrap .nm-card-thumbnail img {
    margin: 0;
}
.nm-card-content {
    flex: 2.5;
    position: relative;
}
.nm-card-excerpt {
    color: #808080;
    font-size: 14px;
    line-height: 1.5em;
    padding-bottom: 0px;
    max-height: 3.2em;
    overflow: hidden;
    visibility: visible;
}
.nm-card-site {
    border-top: dashed 1px #a4a4a4;
    color: #b2b2b2;
    font-size: 11px;
    text-align:right;
    padding-left: 5px;
    position: absolute;
    width: 100%;
    bottom: -18px;
    line-height: 1.6em;
}
.nm-card-site img {
    margin-right: 5px;
    vertical-align: bottom;
    width: 20px;
}
.contects-wrap table {
    margin: 10px 0 20px;
    width: 100%;
}
.contects-wrap table th {
    background:rgba(240, 115, 67, 0.1);
    width: 30%;
}
.contects-wrap table tr:nth-child(odd) th {
    background: rgba(240, 115, 67, 0.2);
}
.contects-wrap table tr td {
    background: rgba(241, 198, 97, 0.1);
}
.contects-wrap table tr:nth-child(odd) td {
    background: rgba(241, 198, 97, 0.3);
}

.contects-wrap table th, .contects-wrap table td {
    padding: 10px;
}

@media screen and (min-width:768px) and ( max-width:1024px) {
    section.column-knowledge,section.column-shokunin,section.column-works {
        padding: 6% 6% 6%;
    }
    .title-wrap h2 {
        font-size: 22px;
        line-height: 1.4;
    }
    .contects-wrap p,.contects-works-wrap p {
        font-size: 14px;
    }
    h2.other-title {
        font-size: 20px;
    }
    .support-wrap p {
        font-size: 14px;
    }
    .contects-works-wrap img {
        max-width: 48%;
        display: inline-block;
        margin: 0 auto 0px;
    }
}
@media screen and (max-width: 980px) {
    .flexbox.row3.margin .item{
        flex-basis: 49%;
        max-width: 49%;
        margin: 0 0.5% 30px;
    }
}
@media screen and (max-width: 767px) {
    section.column-knowledge,section.column-shokunin,section.column-works {
        padding: 7% 0px 5%;
    }
    .column-knowledge-wrap,.column-shokunin-wrap,.column-works-wrap {
        border-radius: 8px;
        padding: 9% 15px 3%;
    }
    .title-wrap h2 {
        font-size: 22px;
        line-height: 1.3;
    }
    .contects-wrap h2 {
        font-size: 20px;
        margin: 0 auto 20px;
        padding: 0 5px 3px;
    }
    .contects-wrap h3 {
        font-size: 18px;
        margin: 0 auto 20px;
        padding: 5px 10px 5px;
        border-left: 7x solid #f96e3a;
    }
    .contects-wrap h4 {
        font-size: 16px;
        margin: 20px auto 10px;
    }
    .title-wrap p {
        font-size: 13px;
    }
    h2.other-title {
        display: block;
        font-size: 18px;
        margin: 0 auto 10px;
    }
    .contects-works-wrap img {
        max-width: 49%;
        display: inline-block;
        margin: 0 auto 0px;
        height: 100%;
    }
    section.top-works.column-works-bottom {
        padding: 10% 15px 4%;
    }
    .column-works-wrap iframe {
        width: 100%;
        max-width: 100%;
    }
    iframe.wp-embedded-content.lazyloaded {
      max-width: 100%;
    }
    .contects-wrap img {
      max-width: 49%;
      display: inline-block;
      margin: 0 auto 5px;
      height: auto;
    }
    .column-knowledge-wrap .contects-wrap img {
      max-width: 100%;
    }
    .contects-works-wrap .nayami {
        padding: 0px 0px 5px;
    }
    .contects-works-wrap .nayami h3 {
        position: relative;
        padding: 7px 20px;
        left: 0;
    }
    .contects-works-wrap .nayami p {
        padding: 10px 15px 0;
    }
    .nm-card-excerpt {
        font-size: 13px;
        line-height: 1.4em;
        max-height: 3em;
    }
    .flexbox.row4.margin .item {
        flex-basis: 49%;
        max-width: 49%;
        margin: 0 0.5% 30px;
    }
    .contects-wrap .btn { 
        padding: 1.0rem 2rem 1.0rem;
        font-size: clamp(15px, 1.0vw, 17px);    
        line-height: 1.1;
        text-align: center;
        letter-spacing: 0em;
        transition: 0.3s;
    }
    .flexbox.row2.margin .item {
        flex-basis: 100%;
        max-width: 100%;
    }
    .flexbox.row2.margin .item:nth-child(odd) {
        margin-right: 0%;
    }
    .flexbox.row2.margin .item:nth-child(even) {
        margin-left: 0%;
    }

}
@media (max-width: 640px) {
    .nm-card-box-wrap {
        width: 100%;    
    }
    .nm-card-box {

    }
    a.nm-card {
        padding: 8px;
    }
    .nm-card-thumbnail {
        margin-right: 10px;
    }
    .contects-works-wrap .nm-card-thumbnail img,
    .contects-wrap .nm-card-thumbnail img{
        width: 100px;
   /*     height: 82px;*/
        max-width: 100%;
    }
    .nm-card-title {
        font-size: 14px;
    }
    .nm-card-excerpt {
        font-size: 13px;
        line-height: 1.4em;
        max-height: 2.7em;
    }
    .contects-works-wrap .nm-card-box-txt, 
    .contects-wrap .nm-card-box-txt, .nm-card-box-txt  {
        left: 0;
        right: auto;
        padding: 4px 15px 5px;        
        font-size: 12px;
        }
    .flexbox.row3.margin .item,
    .flexbox.row4.margin .item {
        flex-basis: 100%;
        max-width: 100%;
        margin: 0 0% 30px;
    }
    .banner-wrap {
        padding: 4% 3% 0%;
    }
    .banner-wrap .flexbox.row4.margin .item {
        flex-basis: 49%;
        max-width: 49%;
        margin: 0 0.5% 10px;
    }
    .item.row6, .item.row4, .item.row5, .item.row7, .item.row3, .item.row8, .item.row2 {
        width: 100%;
        max-width: 100%;
    }
}