/*
Theme shibuya: 
Theme URI: https://shibuya-roofrepair.com/
Description: E-LIFE
Version: 1.1
Author: E-LIFE
Author URI: https://shibuya-roofrepair.com/
*/
@font-face {
    font-family: "M PLUS Rounded 1c";
    font-style: normal;
    font-weight: 400;
    src: url("font/MPLUSRounded1c/MPLUSRounded1c-Regular.woff") format("woff");
    font-display: swap;
}
@font-face {
    font-family: "M PLUS Rounded 1c";
    font-style: normal;
    font-weight: 700;
    src: url("font/MPLUSRounded1c/MPLUSRounded1c-Bold.woff") format("woff");
    font-display: swap;
}
@font-face {
    font-family: "Montserrat";
    font-style: normal;
    font-weight: bold;
    src: url("font/Montserrat.woff") format("woff");
    font-display: swap;
}
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
body {
font-family: YakuHanJP, 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
font-size: 1.66667vw;
font-weight: 400;
margin: 0;
overflow-x: hidden;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0px;
font-family:YakuHanJP, 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
}
h1 {
  font-size: 36px;
}
h2 {
  font-size: 24px;
  font-weight: 500;
}
h3 {
  font-size: 22px;
  font-weight: 600;
}
p {
  font-weight: 400;
  line-height: 1.8;
  margin: 0px;
  font-family: YakuHanJP, 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
}
ul {
  padding: 0;
  margin: 0;
  list-style: none;
}
a,
a:active,
a:focus,
a:active {
  text-decoration: none !important;
  font-size: 15px;
  color: #333;
}
img{
    max-width: 100%;
}
.container {
    width: 80%;
    padding-right: 2rem;
    padding-left: 2rem;
    margin-right: auto;
    margin-left: auto;
}
.animation-fadeleft , .animation-fadeup{
    opacity: 0;
  }
.animation-fadeleft.active {
    animation: fadeleft 0.5s ease-in-out forwards;
}
.animation-fadeup.active {
    animation: fadeup 0.5s ease-in-out forwards;
}
@keyframes fadeleft{
      0%{
          opacity: 0;
          transform: translateX(-75px);
      }
      50% {
          opacity: 0;
          transform: translateX(-75px);
      }
      100%{
          opacity: 1;
          transform: translateX(0);
      }
}
@keyframes fadeup{
    0%{
        opacity: 0;
        transform: translateY(75px);
    }
    50% {
        opacity: 0;
        transform: translateY(75px);
    }
    100%{
        opacity: 1;
        transform: translateY(0);
    }
}
@media screen and (min-width:768px) and ( max-width:1024px) {
    html {
        -webkit-text-size-adjust: 100%;
      }
    p {
        font-size: 15px;
    }
    .midashi.m-line h2 {
        font-size: 24px;
    }
    .midashi.m-line {
        margin: 0 auto 5em;
    }
}
@media screen and (max-width: 767px) {
    p {
        font-size: 15px;
    }
}
/* -----------------------------------ヘッダー・固定関連----------------------------------- */
header {
    width: 100%;
    position: fixed;
    display: flex;
    top: 0;
    left: 0;
    align-items: center;
    height: 90px;
    background: #fff;
    z-index: 2;
    transition-duration: 0.5s;
    box-shadow: 0 0px 5px rgb(0 0 0 / 10%);
}
header.hide {
  transform: translateY(-90px);
}
.header-h1-wrap {
    width: 400px;
    margin-left: 1%;
}
.header-h1-wrap h1 {
    font-size: 10px;
    padding: 0px 0 0;
    text-align: left;
    font-weight: 400;
}
img.logo {
    width: 200px;
    margin: -10px 0 0;
    display: block;
}
/*　ハンバーガーボタン　*/
.hamburger {
    display: block;
    position: fixed;
    z-index: 3;
    right: 0px;
    top: 0px;
    width: 90px;
    height: 90px;
    cursor: pointer;
    text-align: center;
    background: #0192be;
}
.hamburger span {
  display : block;
  position: absolute;
  width   : 30px;
  height  : 2px ;
  left    : 30px;
  background : #fff;
  -webkit-transition: 0.3s ease-in-out;
  -moz-transition   : 0.3s ease-in-out;
  transition        : 0.3s ease-in-out;
}
.hamburger span:nth-child(1) {
  top: 40px;
}
.hamburger span:nth-child(2) {
  top: 50px;
}
.hamburger span:nth-child(3) {
  top: 60px;
}
.hamburger p{
    color: #fff;
    font-size: 13px;
    padding: 10px;
    transform: scale(1);
}
/* ナビ開いてる時のボタン */
.hamburger.active span:nth-child(1) {
top: 50px;
    left: 30px;
  -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  : 90px;
  left : 0;
  color: #000;
  background: #fff;
  text-align: center;
  transform: translateX(100%);
  transition: all 0.2s;
  width: 100%;
}
.nav-open{
    display: flex;
    margin: 0px auto 0;
    width: 100%;
    justify-content: space-evenly;
    padding: 5rem 0 8rem;
    background: #222;
    background-image: url(images/nav-bg.webp);
    background-size: cover;
}
.nav-open .nav-contents.nc01,.nav-open .nav-contents.nc02,.nav-open .nav-contents.nc03,.nav-open .nav-contents.nc04 {
    width: 21%;
    padding: 0 0%;
}
.nav-open .nav-contents ul li {
    text-align: left;
    padding: 25px 0px 15px;
    position: relative;
    text-align: center;
    line-height: 1.1;
}
.nav-open .nav-contents ul li a{
    color:#fff;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0px;
    text-shadow: 1px 1px 1px rgb(0 0 0 / 5%);
    transition: 0.1s;
    font-family: 'M PLUS Rounded 1c', sans-serif;
}
.nav-open .nav-contents ul li.cate {
    padding: 15px 0 15px 1.8em;
    position: relative;
    text-align: left;
    font-size: 15px;
    line-height: 1.6;
}
.nav-open .nav-contents ul li.cate:before {
    content: "";
    display: inline-block;
    width: 0.8em;
    height: 1px;
    background-color: #fff;
    position: absolute;
    top: 48%;
    left: 0.3em;
}
.nav-open .nav-contents ul li.cate a{
    color:#fff;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 1px;
    text-shadow: 0px 0px 0px rgb(0 0 0 / 5%);
    transition: 0.1s;
    font-family: 'M PLUS Rounded 1c', sans-serif;
}
.nav-open .nav-contents ul li a:hover,.nav-open .nav-contents ul li.cate a:hover{
    color: #bc1448;
}

/* このクラスを、jQueryで付与・削除する */
nav.globalMenuSp.active {
    transform: translateX(0%);
    background-size: cover;
    background-position: center;
    box-shadow: 0 0 10px rgb(0 0 0 / 20%);
}
#page-top {
    position: fixed;
    right: 1.5%;
    bottom: 7.5%;
    height: 50px;
    text-decoration: none;
    font-weight: bold;
    letter-spacing: 1px;
    transform: rotate(90deg);
    font-size: 100%;
    line-height: 1.5rem;
    color: #bc1448;
    padding: 10px 0 0 35px;
    border-top: solid 2px;
}
#page-top::before {
    content: "";
    display: block;
    position: absolute;
    top: -1px;
    left: 0px;
    width: 15px;
    border-top: solid 2px;
    transform: rotate(35deg);
    transform-origin: left top;
}
#page-top:hover {
    bottom: 8.5%;
    transition: 0.3s;
}
/* -----------------------------------メインビジュアル----------------------------------- */
section#keyvisual{
    position:relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width:100%;
    margin-top: 90px;
    height: 500px;
    background-image: url(images/kv-bg.webp);
}
.main-img-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
}
.main-img-wrap img{
    width: 85%;
    display: block;
    margin: 0 auto;
}
@media screen and (min-width:768px) and ( max-width:1024px) {
    section#keyvisual {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        height: auto;
        width: 100%;
        margin-top: 85px;
        height: 400px;
    }
    .main-img-wrap img {
        width: 85%;
    }
    .container {
        max-width: 100%;
        width: 100%;
        padding-right: 1.5rem;
        padding-left: 1.5rem;
    }
}
@media screen and (max-width: 767px) {
    section#keyvisual {
        height: 220px;
        width: 100%;
        margin: 70px auto 0;
        background-position: center;
        background-size: cover;
    }
    .container {
        max-width: 100%;
        width: 100%;
        padding-right: 15px;
        padding-left: 15px;
    }
    .main-img-wrap {
        display: flex;
        align-items: center;
        flex-direction: column;
    }
    .main-img-wrap figure {
        margin: 0;
    }
    .main-img-wrap img {
        width: 100%;
    }
}
/* -----------------------------------トップスライダー----------------------------------- */
@media screen and (min-width:768px) and ( max-width:1024px) {
    .header-h1-wrap h1 {
        font-size: 10px;
    }
}
@media screen and (max-width: 767px) {
    header {
        height: 70px;
    }
    nav.globalMenuSp.active {
        position: fixed;
        top: 70px;
        transform: translateX(0%);
        background: #1b1717;
        overflow: scroll;
        height: 100%;
        -webkit-overflow-scrolling: touch;
    }
    .hamburger {
        right: 0px;
        top: 0px;
        width: 70px;
        height: 70px;
    }
    .nav-open {
        margin: 0;
        flex-wrap: wrap;
        padding: 15px 0 7rem;
    }
    .hamburger p {
        color: #fff;
        font-size: 10px;
        padding: 10px 5px 5px;
    }
    .hamburger span {
        width: 28px;
        height: 2px;
        left: 21px;
    }
    img.logo {
        width: 130px;
        margin: 0px 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: 21px;
    }
    .hamburger.active span:nth-child(2), .hamburger.active span:nth-child(3) {
        top: 40px;
    }
    nav.globalMenuSp {
        top: 70px;
    }
    nav.globalMenuSp ul li a {
        padding: 1.6em 0;
    }
    .header-h1-wrap {
        width: 75%;
        margin-left: 2%;
        padding: 5px 0;
    }
    .header-h1-wrap h1 {
        font-size: 1.5em;
        padding: 0px 0 0;
        line-height: 1.3;
        margin: 2px 0 4px;
    }
}
@media only screen and (max-width: 599px) {
    .pc-tab {
      display: none !important;
    }
}

@media only screen and (min-width: 1025px) {
    .tab-sp {
      display: none !important;
    }

}
@media screen and (min-width:768px) and ( max-width:1024px) {
.breadcrumbs , .breadcrumbs a{
    font-size: 11px;
}
}
@media screen and (max-width: 767px) {
    #page-top {
        position: fixed;
        right: 10px;
        bottom: 25px;
        height: 50px;
        text-decoration: none;
        font-weight: bold;
        letter-spacing: 1px;
        transform: rotate(90deg);
        font-size: 13px;
        line-height: 1.5rem;
        padding: 5px 0 0 20px;
        border-top: solid 2px;
    }
}
.sub-heading {
    margin: 90px auto 20px;
    padding: 20px 0;
    position: relative;
    display: block;
    background: #ffeff4;
}

.breadcrumbs {
    font-size: 13px;
    letter-spacing: 0.5px;
    color: #111;
    width: 70%;
}
.breadcrumbs a{
    font-size: 13px;
    letter-spacing: 1px;
    color: #111;
}
.breadcrumbs a:hover{
    color: #bc1448;
    transition: 0.3s;
}.breadcrumbs .fa{
    color: #bc1448;
}
@media screen and (min-width:768px) and ( max-width:1024px) {
    .breadcrumbs,.breadcrumbs a {
        font-size: 11px;
    }
    .breadcrumbs {
        font-size: 11px;
        width: 100%;
    }.nav-open {
        display: flex;
        flex-wrap: wrap;
        padding: 2rem 0 3rem;
    }
    .nav-open .nav-contents.nc01, .nav-open .nav-contents.nc02, .nav-open .nav-contents.nc03, .nav-open .nav-contents.nc04 {
        width: 43%;
        padding: 0 0%;
    }
    .nav-open .nav-contents ul li {
        line-height: 1.6;
    }
    .nav-open .nav-contents ul li a {
        font-size: 15px;
    }
    .nav-open .nav-contents ul li.cate {
        padding: 10px 0 10px 1.8em;
        font-size: 13px;
        line-height: 1.7;
    }
    .nav-open .nav-contents ul li.cate a {
        font-size: 13px;
        letter-spacing: 1px;
    }
    nav.globalMenuSp {
        height: 100%;
        overflow: scroll;
        padding: 0 0 5rem;
    }

}
@media screen and (max-width: 767px) {
    .sub-heading {
        margin: 70px auto 0px;
        padding: 0;
    }
    .sub-heading .card03.l-section {
        padding: 10px 10px;
    }
    .breadcrumbs {
        width: 100%;
        font-size: 11px;
        letter-spacing: 0px;
        margin: 0px auto 0;
        padding: 15px 0;
        line-height: 1.7;
    }
    .breadcrumbs a {
        font-size: 11px;
    }
    .nav-open .nav-contents.nc01, .nav-open .nav-contents.nc02, .nav-open .nav-contents.nc03, .nav-open .nav-contents.nc04 {
        width: 100%;
        padding: 0 20px;
    }
    .nav-open .nav-contents ul li.cate {
        padding: 10px 0 10px 1.8em;
        font-size: 14px;
        line-height: 1.7;
    }
    .nav-open .nav-contents ul li.cate a {
        font-size: 14px;
        font-weight: 600;
        letter-spacing: 1px;
        line-height: 1.7;
    }
    .nav-open .nav-contents ul li {
        padding: 35px 0px 10px;
        position: relative;
        text-align: left;
        line-height: 1.5;
    }
    .nav-open .nav-contents ul li a {
        font-size: 16px;
        line-height: 1.6;
    }
}
/*-------------- 圧縮ここまで ---------------*/
footer {
    margin: 0;
    padding: 4rem 0px 4rem;
    background: #ffffff;
    background-size: cover;
    border-top: 1px solid #e9e9e9;
}
footer .container{
    max-width: 1200px;
}
.footer-contents{
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin: 0 auto 3rem;
}
.footer-contents .footer-list{
    width: 22%;
}
.footer-contents .footer-list a h3{
    font-size: 16px;
    margin: 0 auto 10px;
    color: #222;
    border-bottom: 2px solid #0192be;
    padding: 0 5px 15px;
    transition: 0.2s;
    font-family: 'M PLUS Rounded 1c', sans-serif;
}
.footer-contents .footer-list a h3:hover{
    color: #0192be;
}
.footer-contents ul li.main-list {
    position: relative;
    padding: 12px 0;
    line-height: 0;
}
.footer-contents ul a{
    position: relative;
    padding-left: 0;
    font-size: 14px;
    line-height: 1.6;
    color: #111;
}
.footer-contents ul li.main-list a::before{
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f0da";
    color: #ff6896;
    padding: 0 0.3em 0 0;
}

.footer-contents ul a:hover{
    color: #0192be;
    transition: 0.2s;
}
.footer-contents ul li.main-list a:hover::before{
    width: 30px;
    left: -15px;
}
.footer-contents-bottom{
    width:100%;
}
.footer-contents-bottom img {
    display: block;
    margin: 0px auto 0px;
    width: 400px;
}
.footer-contents-bottom ul{
    display: flex;
    justify-content: center;
    margin: 20px auto 30px;
}
.footer-contents-bottom ul li{
    display: inline-block;
    padding: 0 5px;
}
.footer-contents-bottom ul li a{
    font-size: 13px;
    color: #222;
    font-weight: 500;
    font-family: 'M PLUS Rounded 1c', sans-serif;
}
.footer-contents-bottom ul li a:hover{
    color: #bc1448    ;
    transition: 0.2s;
}

@media screen and (min-width:768px) and ( max-width:1024px) {
    footer {
        padding: 50px 0 30px;
    }
    .footer-contents ul a {
        font-size: 13px;
    }
    .footer-contents ul li.main-list {
        padding: 10px 0;
    }
    #page-top {
        right: 1.5%;
        bottom: 5.5%;
    }
}
@media screen and (max-width: 767px) {
    footer {
        margin: 0;
        padding: 50px 0;
    }
    .footer-contents {
        display: none;
    }

}
/* -----------------------------------2カラム制御----------------------------------- */
.top-two-column {
    position: relative;
    padding: 5rem 0 0;
    background: #fffefa;
}
.sub-top-two-column {
    position: relative;
    padding: 3rem 0 0;
    background: #fffefa;
}
.top-two-wrap{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
}
.top-two-column .left{
    width: 69%;
}
.top-two-column .right{
    width: 27%;
    position: sticky;
    top: 90px;
    padding: 0 0 3rem;
}
.top-two-wrap .left h2{
    position: relative;
    font-size: 24px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 1px;
    background: #bc1448;
    padding: 0.7em 1em 0.7em;
    line-height: 1.5;
    margin: 0 auto 2rem;
    text-shadow: 2px 2px 3px rgb(0 0 0 / 15%);
}
.top-two-wrap .left .know-body h2{
    margin: 3rem auto 2rem;
}
.know-read {
    position: relative;
    display: block;
    margin: 5rem auto 0;
}
.introduction{
    display: block;
    background: #fafafa;
    padding: 1rem 1.5rem 0.5rem;
    margin: 0 auto 2rem;
}
.introduction p{
    font-size: 16px;
    margin: 0 auto 1em;
    line-height: 1.9;
}
.top-two-wrap .left .knowledge-column .introduction p{
    font-size: 16px;
    margin: 0 auto 0.5em;
    line-height: 1.9;
}
.rank-link {
    display: flex;
    align-items: center;
    margin: 0 auto 2rem;
    justify-content: space-around;
}
.rank-link .left {
    width: 48%;
}
.rank-link .right {
    width: 48%;
    padding: 0;
    position: relative;
    top: 0;
}
.top-two-wrap .left .rank-link-wrap p{
    position: relative;
    font-family: 'M PLUS Rounded 1c', sans-serif;
    padding: 0 3em;
    font-weight: 700;
    text-align: center;
    line-height: 1.5;
}
.top-two-wrap .left .rank-link-wrap p:before {
    content: '';
    position: absolute;
    top: 50%;
    display: inline-block;
    width: 44px;
    height: 2px;
    background-color: black;
    -webkit-transform: rotate(-120deg);
    transform: rotate(-120deg);
}
  .top-two-wrap .left .rank-link-wrap p:after {
    content: '';
    position: absolute;
    top: 50%;
    display: inline-block;
    width: 44px;
    height: 2px;
    background-color: black;
    -webkit-transform: rotate(-60deg);
    transform: rotate(-60deg);
  }
  .top-two-wrap .left .rank-link-wrap p:before {
    left:0;
  }
  .top-two-wrap .left .rank-link-wrap p:after {
    right: 0;
}
span.red {
    color: #ba0000;
    font-weight: 700;
}
.top-two-wrap .left p{
    font-size: 15px;
    margin: 0 auto 1em;
    line-height: 1.9;
}
.top-two-wrap .left h3{
    border-top: #bc1448 3px solid;
    border-bottom: #bc1448 1px solid;
    background: #fefefe;
    padding: 0.5em;
    letter-spacing: 1px;
    font-size: 20px;
    margin: 2.5rem auto 2rem;
}
.top-two-wrap .left .know-body h3{
    margin: 2rem auto 1.5rem;
}
.top-two-wrap .left p a{
    font-size: 16px;
    font-weight: 700;
    color: #bc1448;
    transition: 0.1s;
    text-decoration: underline!important;
}
.top-two-wrap .left p a:hover{
    opacity: 0.8;
    text-decoration: none!important;
}
.top-two-wrap .left p.inyou{
    font-size: 13px;
}
.top-two-wrap .left p.inyou a{
    font-size: 13px;
    word-break: break-all;
}
.top-ex02 blockquote {
    margin: 2rem auto 3rem;
}
table.sibsidy-table{
    width: 100%;
    margin: 0 auto 20px;
    border: 1px solid #ccc;
}
table.sibsidy-table tr{
    display: flex;
    align-items: center;
    width: 100%;
}
table.sibsidy-table tr:nth-child(even){
    background: #f7f7f7;
}
table.sibsidy-table tr th{
    width: 25%;
    font-size: 15px;
    padding: 20px 5px;
    box-sizing: border-box;
}
table.sibsidy-table tr td{
    font-size: 15px;
    width: 75%;
    padding: 20px 2.5%;
    box-sizing: border-box;
    line-height: 1.8;
}
.top-ex03{
    position: relative;
    margin: 1.5rem auto 3rem;
    padding: 1.5rem 0 0
}
.company-wrap{
    position: relative;
    padding: 2rem;
    margin: 0 auto 5rem;
    border-radius: 8px;
    box-shadow: 0 0 8px rgb(0 0 0 / 10%);
}
.company-wrap figure{
    margin: 0;
}
.company-wrap img{
    display: block;
    margin: 0px auto 30px;
}
.company-recommend{
    display: block;
    background: #fff8e9;
    padding: 1.5rem 1.5rem 1.5rem;
    margin: 0 auto 0;
}
.company-recommend ul li{
    font-size: 15px;
    padding: 5px;
    font-weight: 700;
}
.company-recommend ul li:before{
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f14a";
    padding: 0 0.3em 0 0;
    font-size: 1em;
    color: #bc1448;
}
.company-link01{
    position: relative;
    display: block;
    margin: 50px auto;
}
.company-link02{
    position: relative;
    display: block;
    margin: 50px auto 25px;
}
.company-link01 a,.company-link02 a{
    position: relative;
    display: block;
    width: 70%;
    margin: 0 auto;
    line-height: 1.5;
    font-size: 18px;
    font-weight: 700;
    text-align: center;
    padding: 1.5rem 2.5rem 1.5rem 2.5rem;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
    /* border: 2px solid #000; */
    border-radius: 20px;
    background: rgb(230 122 0);
    font-family: 'M PLUS Rounded 1c', sans-serif;
    background: linear-gradient(-155deg, rgb(255 147 26) 0%, rgb(230 122 0) 100%);
    color: #fff;
    text-shadow: 1px 1px 1px rgb(0 0 0 / 20%);
    border-radius: 15px;
    box-shadow: 0px 5px 0 #b96309;
}
.company-link01 a:hover,.company-link02 a:hover{
    transform: translate(0px,3px);
    box-shadow: 0px 2px 0 #b96309;
}
.company-wrap h4{
    font-size: 18px;
    border-bottom: 2px solid #bc1448;
    margin: 2rem auto 1.5rem;
    padding: 0 0 10px;
    letter-spacing: 1px;
}
span.fas.fa-lightbulb {
    color: #ffb200;
    font-size: 22px;
}
span.fas.fa-building {
    color: #ffb200;
    font-size: 22px;
}
.company-wrap table{
    width: 100%;
    border-top: 1px solid #ccc;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    margin: 0 auto 3rem;
}
.company-wrap table tr{
    width: 100%;
}
.company-wrap table tr th{
    width: 25%;
    font-size: 14px;
    background: #f1f1f1;
    padding: 15px;
    border-bottom: 1px solid #ccc;
}
.company-wrap table tr td{
    width: 75%;
    font-size: 14px;
    padding: 15px;
    line-height: 1.6;
    border-bottom: 1px solid #ccc;
}
.company-wrap table tr td a{
    color: #0092be;
    text-decoration: underline!important;
}
.company-wrap table tr td a:hover{
    text-decoration: none!important;
}
.company-link03{
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin: 0px auto 25px;
}
.company-link03 .left{
    width: 45%;
}
.company-link03 .left a{
    position: relative;
    display: block;
    width: 100%;
    margin: 0 auto;
    line-height: 1.5;
    font-size: 17px;
    font-weight: 700;
    text-align: center;
    padding: 1rem 1.5rem 1rem 1.5rem;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
    /* border: 2px solid #000; */
    border-radius: 20px;
    background: #f99b31;
    font-family: 'M PLUS Rounded 1c', sans-serif;
    background: linear-gradient(-155deg, rgb(255 147 26) 0%, rgb(230 122 0) 100%);
    color: #fff;
    text-shadow: 1px 1px 1px rgb(0 0 0 / 20%);
    border-radius: 15px;
    box-shadow: 0px 5px 0 #b96309;
}
.company-link03 .left a:hover{
    transform: translate(0px,3px);
    box-shadow: 0px 2px 0 #b96309;
}
.company-link03 .right{
    width: 45%;
    padding: 0;
    position: relative;
    top: 0;
}
.company-link03 .right a{
    position: relative;
    display: block;
    width: 100%;
    margin: 0 auto;
    line-height: 1.5;
    font-size: 17px;
    font-weight: 700;
    text-align: center;
    padding: 1rem 1.5rem 1rem 1.5rem;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
    /* border: 2px solid #000; */
    border-radius: 20px;
    background: #f99b31;
    font-family: 'M PLUS Rounded 1c', sans-serif;
    background: linear-gradient(-155deg, rgb(32 177 220) 0%, rgb(0 146 190) 100%);
    color: #fff;
    text-shadow: 1px 1px 1px rgb(0 0 0 / 20%);
    border-radius: 15px;
    box-shadow: 0px 5px 0 #007397;
}
.company-link03 .right a:hover{
    transform: translate(0px,3px);
    box-shadow: 0px 2px 0 #007397;
}
.review-wrap{
    position: relative;
    display: block;
    background: #fffdfd;
    padding: 1.5rem;
    border-radius: 15px;
    margin: 0 auto 2rem;
    border: 1px solid #cd6686;
}
.top-two-wrap .left .review-wrap p{
    font-size: 15px;
    padding: 0 10px;
    margin: 0 auto;
}
.top-two-wrap .left .review-wrap p.user-name{
    font-size: 18px;
    font-weight: 700;
    border-bottom: 2px solid #d4d4d4;
    padding: 0 10px 10px;
    margin: 0 auto 10px;
    line-height: 1;
}
.company-wrap blockquote{
    margin: 0 auto;
}
.top-two-wrap .left p.review-inyou{
    margin: -1rem auto 0.5rem;
    font-size: 14px;
    text-align: right;
    display: block;
}
.side-contents,.side-contents02{
    position: relative;
    display: block;
    margin: 0 auto 30px;
    padding: 20px 15px;
    border-radius: 10px;
    box-shadow: 0 0 5px rgb(0 0 0 / 10%);
}
.side-contents h2,.side-contents02 h2{
    border-bottom: 2px solid #bc1448;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.4;
    padding: 0 5px 15px 5px;
    margin: 0 auto 10px;
    transition: 0.2s;
    color: #222;
    font-family: 'M PLUS Rounded 1c', sans-serif;
}
.side-contents h2:hover,.side-contents02 h2:hover{
    color: #bc1448;
}
.side-contents ul a{
    display: block;
    transition: 0.2s;
    border-bottom: 1px solid #ccc;
    margin: 0 auto 10px;
    padding: 10px 0 10px;
}
.side-contents02 ul a {
    display: block;
    transition: 0.2s;
    border-bottom: 1px solid #ccc;
    margin: 0 auto;
    color: #000;
    padding: 15px 10px 15px;
}
.side-contents ul a:last-child{
    border-bottom: none;
    margin: 0 auto;
    padding: 10px 0 0;
}
.side-contents02 ul a:last-child{
    border-bottom: none;
    padding: 15px 10px 0px 10px;
}
.side-contents ul a li{
    display: block;
}
.side-contents02 ul a li{
    display: block;
    position: relative;
}
.side-contents02 ul a li:before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f0da";
    color: #ff6896;
    padding: 0 0.4em 0 0;
}
.side-contents ul a li:nth-child(3){
    border-bottom: none;
}
.side-contents ul a li figure{
    display: block;
    width: 90%;
    margin: 0 auto 5px;
    transition: 0.2s;
}
.side-contents ul a li span{
    display: block;
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    transition: 0.2s;
}
.side-contents ul a:hover figure{
    opacity: 0.7;
}
.side-contents ul a:hover span{
    color: #bc1448;
}
.side-contents02 ul a:hover {
    transform: translate(5px,0px);
    color: #bc1448;
}
.right.sticky {
    position: sticky;
    top: 90px;
}
.know-catch{
    display: block;
    margin: 0 auto 3rem;
}
.know-catch img{
    display: block;
    margin: 0 auto;
}
.top-two-wrap .left .know-read h2{
    color: #222;
    background: none;
    text-shadow: none;
    border-left: 10px solid #bc1448;
    padding: 0.5em;
    margin: 0 auto 2rem;
    font-family: 'M PLUS Rounded 1c', sans-serif;
}
.know-wrap {
    display: flex;
    align-items: center;
    justify-content: space-around;
    border-radius: 15px;
    padding: 15px 10px;
    margin: 2rem auto;
    box-shadow: 0 0 10px rgb(0 0 0 / 10%);
}
.know-wrap img {
    width: 35%;
    object-fit: contain;
    transition: 0.2s;
}
.know-wrap .know-content {
    width: 60%;
}
.top-two-wrap .left a .know-wrap .know-content h3{
    margin: 0 auto 10px;
    border-top: none;
    padding: 0 5px 10px;
    font-size: 18px;
    border-bottom: 2px solid #bc1448;
    color: #222;
    transition: 0.2s;
}
.top-two-wrap .left .know-wrap .know-content p.know-ex{
    font-size: 14px;
    margin: 0 auto;
}
.top-two-wrap .left .know-wrap .know-content .know-link p{
    margin: 5px auto 0;
    text-align: right;
    font-size: 16px;
    font-weight: 700;
    color: #bc1448;
    font-family: 'M PLUS Rounded 1c', sans-serif;
}
a .know-wrap:hover img{
    opacity: 0.8;
}
.top-two-wrap .left a .know-wrap:hover .know-content h3{
    color: #bc1448;
}
section.know-body img{
    display: block;
    margin: 0 auto 1em;
    max-width: 500px;
    height: auto;
}

.matome{
    display: block;
    background: #fcfcfc;
    padding: 1em 1em 0.5em;
    border: 1px solid #bc1448;
    border-radius: 8px;
    margin: 1em auto 2em;
}
.matome ul {
    display: block;
    margin: -0.5em auto 0.2em;
}
.matome ul li{
    font-size: 15px;
    padding: 3px;
    font-weight: 700;
}
.matome ul li:before{
    content: "・";
    color: #bc1448;
    margin: 0 0.3em 0 0;
}
ul.check,ul.top-list {
    position: relative;
    display: block;
}
ul.check:before {
    content: "- Check Point -";
    color: #bc1448;
    font-size: 15px;
    font-weight: 800;
}
ul.check li,ul.top-list li{
    font-size: 15px;
    padding: 3px;
    font-weight: 700;
}
ul.check li:before,ul.top-list li:before{
    content: "・";
    color: #bc1448;
    margin: 0 0.3em 0 0;
}
.top-two-wrap .left p a.p-link{
    color: #bc1448;
}
img.top-img {
    display: block;
    margin: 0 auto 30px;
}

.knowledge-column ul{
    display: block;
    margin: 0 auto 20px;
}
.knowledge-column ul li{
    font-size: 15px;
    font-weight: 700;
    padding: 3px 0;
}
.knowledge-column ul li:before{
    content: "・";
    color: #bc1448;
    display: inline-block;
    margin: 0 3px 0 0;
}

@media screen and (min-width:768px) and ( max-width:1024px) {
    .top-two-column {
        position: relative;
        margin: 3rem 0 0;
    }
    .top-two-column .left {
        width: 70%;
    }
    .side-midashi span {
        font-size: 13px;
    }
    .side-midashi h2 {
        font-size: 16px;
    }
    .side-link a {
        font-size: 14px;
        letter-spacing: 1px;
        padding: 15px 1em;
    }
    .introduction {
        padding: 1rem 1rem 0.1rem;
    }
    .top-two-wrap .left h2 {
        font-size: 18px;
    }
    .top-two-wrap .left h3 {
        font-size: 16px;
        margin: 2rem auto 1.5rem;
    }
    .top-two-wrap .left p {
        font-size: 15px;
    }
    .rank-link {
        flex-wrap: wrap;
        margin: 0 auto 3rem;
    }
    .rank-link .left {
        width: 70%;
    }
    .rank-link .right {
        width: 75%;
    }
    .top-two-wrap .left p a {
        font-size: 15px;
    }
    table.sibsidy-table tr th,table.sibsidy-table tr td {
        font-size: 13px;
    }
    p.inyou {
        margin: -5px auto 0px;
        font-size: 12px!important;
    }
    .top-two-wrap .left p.inyou a {
        font-size: 12px;
        word-break: break-all;
    }
    .company-wrap {
        position: relative;
        padding: 1.2rem;
        margin: 0 auto 3rem;
        border-radius: 10px;
    }
    .company-recommend ul li {
        font-size: 15px;
        line-height: 1.7;
        padding: 7px 0;
        font-weight: 700;
    }
    .company-recommend {
        padding: 1rem 1rem 1rem;
    }
    .company-link01 {
        margin: 40px auto;
    }
    .company-wrap h4 {
        font-size: 16px;
        margin: 30px auto 20px;
        padding: 0 0 10px;
        letter-spacing: 1px;
    }
    .company-link01 a, .company-link02 a {
        width: 85%;
        font-size: 18px;
        padding: 1rem 2rem 1rem 2rem;
    }
    .company-wrap table tr td, .company-wrap table tr th,.company-wrap table tr td a {
        font-size: 12px;
    }
    .company-wrap table tr td {
        width: 70%;
        padding: 10px;
    }
    .company-wrap table tr th {
        width: 30%;
        padding: 10px;
    }
    .company-link03 {
        justify-content: space-between;
        margin: 0px auto 30px;
    }
    .company-link03 .left,.company-link03 .right {
        width: 48%;
    }
    .company-link03 .left a,.company-link03 .right a {
        font-size: 15px;
        padding: 1rem 0.5rem 1rem 0.5rem;
    }
    .side-contents, .side-contents02 {
        padding: 15px 7px;
    }
    .side-contents h2, .side-contents02 h2 {
        font-size: 16px;
        padding: 0 5px 10px 5px;
        margin: 0 auto 8px;
    }
    .side-contents02 ul a {
        font-size: 12px;
        padding: 10px 7px 10px;
    }
    .side-contents ul a li span {
        font-size: 13px;
    }
    .review-wrap {
        padding: 1rem;
        margin: 0 auto 1.5rem;
    }
    .top-two-wrap .left .review-wrap p.user-name {
        font-size: 15px;
        padding: 0 5px 10px;
    }
    .top-two-wrap .left .review-wrap p {
        font-size: 13px;
        padding: 0 5px;
    }
    .top-two-wrap .left p.review-inyou {
        margin: -0.5rem auto 0rem;
        font-size: 12px;
    }
    .company-link02 {
        margin: 30px auto 30px;
    }
    .top-two-wrap .left .knowledge-column .introduction p {
        font-size: 15px;
        margin: 0 auto 1em;
        line-height: 1.9;
    }
    section.know-body img {
        display: block;
        margin: 0 auto 1.5em;
        max-width: 400px;
    }
    .top-two-wrap .left .know-body h2 {
        margin: 2rem auto 1.5rem;
    }
    .top-two-wrap .left .know-body h3 {
        margin: 1.5rem auto 1rem;
    }
    .know-read {
        margin: 4rem auto 0;
    }
    .top-two-wrap .left a .know-wrap .know-content h3 {
        font-size: 15px;
    }
    .top-two-wrap .left .know-wrap .know-content p.know-ex {
        font-size: 12px;
        margin: 0 auto;
    }
    .top-two-wrap .left .know-wrap .know-content .know-link p {
        font-size: 15px;
    }
}
@media screen and (max-width: 767px) {
    .top-two-column {
        position: relative;
        margin: 0;
        padding: 30px 0 0;
    }
    .sub-top-two-column {
        position: relative;
        margin: 0px 0 0;
    }
    .top-two-column .left {
        width: 100%;
    }
    .top-two-column .right {
        width: 100%;
        padding: 30px 0 30px;
    }
    .top-two-wrap .left h2 {
        font-size: 18px;
        padding: 0.7em 0.7em 0.7em;
        line-height: 1.5;
        margin: 0 auto 25px;
    }
    .top-two-wrap .left p {
        font-size: 15px;
    }
    .introduction {
        padding: 1rem 0.8rem 0.1rem;
        margin: 0 auto 25px;
    }
    .rank-link {
        flex-wrap: wrap;
        margin: 0 auto 1rem;
    }
    .rank-link .left img {
        display: block;
        width: 85%;
        margin: 0 auto;
    }
    .top-two-wrap .left .rank-link-wrap p {
        padding: 0 2.5em;
    }
    .top-two-wrap .left h3 {
        letter-spacing: 0px;
        font-size: 17px;
        margin: 35px auto 20px;
    }
    .top-two-wrap .left p a {
        font-size: 15px;
        word-break: break-all;
    }
    table.sibsidy-table tr {
        flex-wrap: wrap;
    }
    table.sibsidy-table tr td {
        font-size: 14px;
        width: 100%;
        padding: 15px 10px;
        box-sizing: border-box;
        line-height: 1.9;
    }
    table.sibsidy-table tr th {
        width: 100%;
        font-size: 15px;
        padding: 15px 10px 15px 10px;
        box-sizing: border-box;
        text-align: left;
        border-bottom: 1px solid #ccc;
    }
    .top-two-wrap .left p.inyou a {
        font-size: 12px;
    }
    .top-two-wrap .left .know-body blockquote {
        margin: 0 1%;
    }
    .company-wrap {
        position: relative;
        padding: 20px 15px;
        margin: 0 auto 50px;
        border-radius: 10px;
    }
    .company-recommend {
        padding: 10px 10px;
    }
    .company-recommend ul li {
        font-size: 15px;
        padding: 10px 0;
        font-weight: 700;
    }
    .company-link01 {
        margin: 45px auto;
    }
    .company-wrap table tr th {
        width: 30%;
        font-size: 13px;
        padding: 10px;
    }
    .company-wrap table tr td {
        width: 70%;
        font-size: 13px;
        padding: 10px;
        word-break: break-word;
    }
    .company-link01 a, .company-link02 a {
        width: 100%;
        line-height: 1.5;
        font-size: 18px;
        padding: 1rem 1.5rem 1rem 1.5rem;
    }
    .company-wrap h4 {
        font-size: 16px;
        margin: 30px auto 15px;
        padding: 0 0 10px;
        letter-spacing: 0px;
        line-height: 1.5;
    }
    .company-wrap table tr td a {
        font-size: 13px;
    }
    .company-wrap table {
        margin: 0 auto 30px;
    }
    .company-link03 {
        flex-wrap: wrap;
        margin: 40px auto 0px;
    }
    .side-contents02 ul a li {
        font-size: 14px;
    }
    .side-contents02 ul a {
        padding: 15px 5px 15px;
    }
    .side-contents h2, .side-contents02 h2 {
        font-size: 16px;
        padding: 0 5px 10px 5px;
    }
    .side-contents ul a li span {
        font-size: 15px;
    }
    .review-wrap {
        padding: 20px 10px;
        border-radius: 10px;
        margin: 20px auto 20px;
        padding: 20px 10px 15px;
    }
    .top-two-wrap .left .review-wrap p.user-name {
        font-size: 16px;
        padding: 0 5px 10px;
        margin: 0 auto 10px;
    }
    .top-two-wrap .left .review-wrap p {
        font-size: 13px;
        padding: 0 5px 0;
        margin: 0 auto;
    }
    .top-two-wrap .left p.review-inyou {
        margin: -10px auto 0;
        font-size: 12px;
    }
    .company-link02 {
        position: relative;
        display: block;
        margin: 35px auto 35px;
    }
    section.right.sub-right {
        margin: -15px auto 0;
    }
    .top-two-wrap .left .knowledge-column .introduction p {
        font-size: 15px;
        margin: 0 auto 1em;
    }
    .know-catch img {
        height: auto;
    }
    section.know-body img {
        display: block;
        margin: 0 auto 25px;
        max-width: 90%;
        height: auto;
    }
    .top-two-wrap .left .know-body h2 {
        margin: 2rem auto 1.5rem;
    }
    .top-two-wrap .left .know-body h3 {
        margin: 1.8rem auto 1.2rem;
    }
    .know-read {
        margin: 4rem auto 0;
    }
    .know-wrap {
        display: flex;
        flex-wrap: wrap;
        padding: 20px 15px 10px;
    }
    .know-wrap img {
        width: 90%;
    }
    .know-wrap .know-content {
        width: 100%;
        margin: 20px auto 0;
    }
    .top-two-wrap .left a .know-wrap .know-content h3 {
        font-size: 16px;
    }
    .top-two-wrap .left .know-wrap .know-content p.know-ex {
        font-size: 13px;
    }
    .matome {
        padding: 15px 15px 5px;
        border-radius: 8px;
        margin: 20px auto 30px;
    }
    .matome ul {
        display: block;
        margin: -0.5em auto 1.2em;
    }
    ul li {
        font-size: 15px;
        padding: 3px 0;
        line-height: 1.7;
    }
    ul.check:before {
        content: "- Check Point -";
        color: #bc1448;
        font-size: 13px;
        font-weight: 800;
    }
    .matome ul li {
        font-size: 15px;
    }
    ul.check li, ul.top-list li {
        font-size: 15px;
        padding: 3px;
        font-weight: 700;
    }



}

/* -----------------------------------運営・プライバシー----------------------------------- */
.company-content {
    position: relative;
    padding: 0 0 90px;
}
section.privacy-column p,.privacy-content p{
    font-size: 15px;
}
.privacy-content {
    position: relative;
    padding: 0 0 90px;
}
.company-content table{
    width: 100%;
    margin: 0px auto 0;
    border-top: 1px #ccc solid;
    border-left: 1px #ccc solid;
    border-right: 1px #ccc solid;
    border-bottom: 1px #ccc solid;
}
.company-content table tr {
    border-bottom: 1px #ccc solid;
}
.company-content table tr th {
    padding: 15px;
    width: 25%;
    font-size: 15px;
    background: #f4f4f4;
    border-right: 1px #ccc solid;
}
.company-content table tr td {
    padding: 15px;
    width: 75%;
    font-size: 14px;
    line-height: 1.9;
}
.privacy-content h2{
    font-size: 18px;
    line-height: 1.4;
    letter-spacing: 1px;
    padding: 0 10px 12px;
    margin: 40px auto 15px;
    border-bottom: 2px solid #00aecc;
    position: relative;
    font-weight: 600;
    text-shadow: 1px 1px 1px rgb(0 0 0 / 15%);
}
.privacy-content h2:after {
    position: absolute;
    content: " ";
    display: block;
    border-bottom: solid 2px #f99b31;
    bottom: -2px;
    width: 25%;
}
.know-contents.animation-fadeup.active {
    font-size: 15px;
}
@media screen and (min-width:768px) and ( max-width:1024px) {
    .company-content table tr th {
        font-size: 14px;
    }
    .company-content table tr td {
        font-size: 13px;
    }
    .privacy-content p{
        font-size: 14px;
    }
    section.privacy-column p,.privacy-content p{
        font-size: 13px;
    }
}
@media screen and (max-width: 767px) {
    .company-content {
        padding: 30px 0 50px;
    }
    .privacy-content {
        position: relative;
        padding: 0 0 50px;
    }
    .privacy-txt{
        padding: 25px 0 0;
    }
    .company-content table tr th {
        font-size: 13px;
    }
    .company-content table tr td {
        font-size: 13px;
        line-height: 1.7;
    }
    .privacy-content p{
        font-size: 14px;
    }
}

/* -----------------------------------お問い合わせ----------------------------------- */
.contact-column{
    position: relative;
    padding: 0 0 90px;
}
p.form-title {
    font-family: 'M PLUS Rounded 1c', sans-serif;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    padding: 0px 0 0px;
    /*border-bottom: 1px solid #0dc2a5;*/
}
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 15px;
    padding-bottom: 15px;
}
.cp_iptxt span {
    position: absolute;
    top: 14px;
    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: 15px;
}
.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: 400;
    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: 20px auto 30px;
    width: 95%;
}
.contact-box textarea {
    display: block;
    width: 96%;
    height: 180px;
    font-size: 16px;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #ccc;
    margin: 20px auto 40px;
}
.contact-box textarea:focus {
    border-color: #06907b;
    outline: 0;
}
.contact-box input[type="submit"] {
    font-size: 16px;
    letter-spacing: 1px;
    font-weight: 600;
    display: inline-block;
    background: #f99b31;
    font-family: 'M PLUS Rounded 1c', sans-serif;
    background: linear-gradient(-155deg, rgb(255 161 55) 0%, rgb(255 135 0) 100%);
    color: #fff;
    padding: 20px 5.5em;
    border-radius: 50px;
    text-shadow: 1px 1px 1px rgb(0 0 0 / 20%);
    box-shadow: 0px 4px 0 #b96309;
    transition: 0.2s;
    border: none;
    height: auto;
    margin: 0 auto;
}
.contact-box input[type="submit"]:hover {
    transform: translate(0px, 2px);
    box-shadow: 0px 2px 0 #b96309;
}
.contact-tel{
    position: relative;
    margin: 20px auto 50px;
}
.contact-tel p {
    font-size: 16px;
    line-height: 1.9;
    margin: 0 auto 20px;
}
.contact-tel p span{
    font-size: 14px;
}
.thanks-column{
    position: relative;
    padding: 0 0 0px;
}
.thanks-column p{
    font-size: 16px;
}
@media screen and (min-width:768px) and ( max-width:1024px) {
    .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%;
    }
    .contact-tel p {
        font-size: 14px;
    }
    .contact-tel p {
        font-size: 14px;
        line-height: 1.9;
    }
    section.contact-column .midashi-wrap .midashi:before{
        font-size: 18px;
    }

}
@media screen and (max-width: 767px) {
    .contact-column {
        position: relative;
        padding: 0 0 75px;
    }
    .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 20px 0;
        font-size: 14px;
        display: block;
    }
    .contact-box textarea {
        font-size: 14px;
        width: 100%;
        margin: 10px auto 40px;
    }
    .contact-box input[type="submit"] {
        padding: 20px 1.8em;
    }
    .cp_iptxt {
        position: relative;
        margin: 0px auto 0px;
        width: 100%;
    }
    .contact-tel p {
        font-size: 15px;
        line-height: 1.9;
    }
    .cp_iptxt input[type=text], .cp_iptxt input[type=tel], .cp_iptxt input[type=email] {
        padding-left: 10px;
    }
}
/* -----------------------------------豆知識----------------------------------- */

.btn,a.btn {
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    position: relative;
    display: block;
    padding: 1rem 4rem;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    text-align: center;
    vertical-align: middle;
    text-decoration: none;
    letter-spacing: 0.1em;
    color: #212529;
    border-radius: 0.5rem;
}

a.btn-custom01 {
  margin-bottom: 0.5rem;
  padding: 0;
  border-radius: 12px;
  box-shadow: 0px 5px 0 #b96309;
}
.btn-custom01-front {
    position: relative;
    display: block;
    line-height: 1.5;
    padding: 1.1rem 2.0rem 1.2rem 0.5rem;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    /* border: 2px solid #000; */
    border-radius: 10px;
    background: rgb(230 122 0);
    font-family: 'M PLUS Rounded 1c', sans-serif;
    background: linear-gradient(-155deg, rgb(255 147 26) 0%, rgb(230 122 0) 100%);
    color: #fff;
    text-shadow: 1px 1px 1px rgb(0 0 0 / 20%);
}
.fa-position-right {
  position: absolute;
  top: calc(50% - 0.5em);
  right: 1.0rem;
  color: #fff;
  text-shadow: 1px 1px 1px rgb(0 0 0 / 20%);
}
a.btn-custom01:hover {
  -webkit-transform: translate(0,2px);
  transform: translate(0, 3px);
  box-shadow: 0px 2px 0 #b96309;
}

a.naibu {
    color: #222;
    position: relative;
    font-size: 18px;
    font-weight: 700;
    padding: 30px 20px 17px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background: #fafafa;
    margin: 0px auto;
    display: block;
}
a.naibu:before {
    content: "参考記事";
    position: absolute;
    font-family: 'M PLUS Rounded 1c', sans-serif;
    top: 5px;
    left: 10px;
    color: #ff9422;
    letter-spacing: 1px;
    font-size: 14px;
}
a.naibu:hover{
    background: #fff;
    color: #ff9422;
}
.main-link{
    text-align: center;
    margin: 50px auto;
}
.main-link a{
    font-size: 18px;
    letter-spacing: 1.5px;
    font-weight: 600;
    color: #fff;
    display: inline-block;
    background: #00aecc;
    background-image: linear-gradient(
-225deg, #23ccb5 0%, #17b49b 100%);
    padding: 15px 2.5em;
    border-radius: 30px;
    text-shadow: 1px 1px 1px rgb(0 0 0 / 25%);
    box-shadow: 3px 4px 0px #222;
    transition: 0.3s;
}
.main-link a:hover{
    transform: translate(3px, 4px);
    box-shadow: 0px 0px 0px #222;
}
@media screen and (min-width:768px) and ( max-width:1024px) {

    .btn-custom01-front {
        font-size: 16px;
        padding: 15px 2.5rem 14px 3.8rem;
    }


}
@media screen and (max-width: 767px) {

    .btn-custom01-front {
        font-size: 18px;
    }

    a.naibu {
        font-size: 16px;
        line-height: 1.5;
    }
    a.naibu:before {
        font-size: 13px;
    }
}






/* -----------------------------------知識コラムページ----------------------------------- */
section.knowledge-column {
    position: relative;
    padding: 0px 0 90px;
}
section.knowledge-column .midashi-wrap .midashi:before {
    content: "Knowledge";
    position: absolute;
    bottom: -1.8em;
    right: calc(50% - 3.5em);
    font-size: 1.1em;
    color: #00aecc;
    font-weight: 700;
    font-family: 'Montserrat', sans-serif;
}
section.knowledge-column .midashi.m-line h2{
    padding: 0 0.6em 0.6em;
}

div#toc_container {
    border: 1px #ccc solid;
    width: 90%!important;
    margin: 0 auto;
    padding: 20px 15px 7px;
}
p.toc_title {
    text-align: center;
    font-size: 18px;
    font-weight: 600;
}
ul.ez-toc_list li {
    padding: 7px 0 7px;
}
ul.ez-toc_list li a {
    color: #222;
}
p.toc_title span a {
    color: #00aecc;
}
ul.ez-toc_list li a:hover{
    color: #00aecc;
    transition: 0.2s;
}
p.toc_title span a:hover{
    opacity: 0.7;
    transition: 0.2s;
}
ul.ez-toc_list li ul {
    padding: 5px 0 5px 1rem;
}
span.toc_number.toc_depth_1 , span.toc_number.toc_depth_2{
    font-weight: 600;
    padding-right: 0.5em;
}
#ez-toc-container {
    background: #fcfcfc!important;;
    border: 1px solid #ccc!important;;
    border-radius: 5px;
    -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05);
    box-shadow: 0 1px 1px rgba(0,0,0,.05);
    display: table;
    margin-bottom: 1em;
    padding: 20px!important;
    position: relative;
    width: 90%;
}
p.ez-toc-title {
    font-size: 18px!important;
    text-align: center!important;
    font-family: 'M PLUS Rounded 1c', sans-serif;
}
#ez-toc-container a,#ez-toc-container a:visited {
    color: #222!important;
}
#ez-toc-container ul ul, .ez-toc div.ez-toc-widget-container ul ul {
    margin-left: 1em!important;
}
#ez-toc-container .ez-toc-toggle label, #ez-toc-container label.cssicon, #ez-toc-widget-container label.cssicon {
    display: none!important;
}
dl.double{
    width: 100%;
    font-size: 15px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    margin: 30px auto 30px;
    border-top: 1px solid #ccc;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
}
dl.double dt{
    display: inline-block;
    width: 50%;
    padding: 10px;
    border-bottom: 1px solid #ccc;
    border-right: 1px solid #ccc;
}
dl.double dd{
    display: inline-block;
    width: 50%;
    padding: 10px;
    margin: 0;
    border-bottom: 1px solid #ccc;
}
dl.double dt.header , dl.double dd.header{
    background: #eee;
    font-weight: 600;
}
dl.triple{
    width: 90%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    margin: 30px auto 30px;
    border-top: 1px solid #ccc;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
}
dl.triple dt{
    display: inline-block;
    width: 33.3333%;
    padding: 10px;
    border-bottom: 1px solid #ccc;
    border-right: 1px solid #ccc;
}
dl.triple dd.center{
    display: inline-block;
    width: 33.3333%;
    padding: 10px;
    border-bottom: 1px solid #ccc;
    border-right: 1px solid #ccc;
}
dl.triple dd{
    display: inline-block;
    width: 33.3333%;
    padding: 10px;
    border-bottom: 1px solid #ccc;
}
dl.triple dt.header , dl.triple dd.header{
    background: #eee;
    font-weight: 600;
}
span.bold{
    font-weight: 600;
}
span.yellow {
    background: linear-gradient(transparent 75%, #ffea59 25%);
    font-weight: 500;
}

hr.keisen{
    color: #ccc;
    margin-top: -10px;
    margin-bottom: 12px;
}
@media screen and (min-width:768px) and ( max-width:1024px) {
    section.knowledge-column .midashi-wrap .midashi:before {
        right: calc(50% - 3em);
        font-size: 18px;
    }
    dl.double , dl.triple{
        width: 95%;
        font-size: 12px;
    }
}
@media screen and (max-width: 767px) {
    section.knowledge-column .midashi.m-line h2{
        padding: 0 0em 0.6em;
    }
    section.knowledge-column .midashi-wrap .midashi:before {
        bottom: -35px;
        right: calc(50% - 3.5em);
        font-size: 18px;
    }

    dl.double , dl.triple{
        width: 100%;
        font-size: 11px;
    }
    div#toc_container {
        width: 95%!important;
    }

    section.knowledge-column {
        position: relative;
        padding: 0px 0 25px;
    }
    #ez-toc-container {
        padding: 15px!important;
    }
    div#ez-toc-container {
        width: 100%!important;
    }
    .ez-toc-title-container {
        margin: 0 auto 10px;
    }
    div#ez-toc-container ul li {
        font-size: 95%;
        margin: 0 auto 1.5em;
    }
    li.ez-toc-heading-level-3 {
        margin: 1.5em auto 0!important;
    }
}
@media screen and (max-width: 320px) {

    div#toc_container {
        width: 100%!important;
    }
    ul.ez-toc_list li a {
        color: #222;
        font-size: 14px;
    }

}
















/* -----------------------------------LPページ----------------------------------- */
section.reason-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: 55px;
    background: #fff9ef url(images/reason/03.webp) repeat-x center bottom;

}
.reason-header-contents {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 5rem 0 11rem;
    justify-content: space-between;
}
.reason-header-contents .left{
    width: 53%;
}
.reason-header-contents .left p{
    font-family: 'M PLUS Rounded 1c', sans-serif;
    font-size: 0.7em;
    font-weight: 500;
    margin: 1.5rem auto 0;
}
.reason-header-contents .right{
    width: 45%;
}
.reason-qa {
    position: relative;
    padding: 5rem 0 1rem;
    background-image: url(images/reason/07.jpg);
    background-repeat: repeat;
}
.reason-qa h2{
    font-family: 'M PLUS Rounded 1c', sans-serif;
    font-size: 2.5rem;
    text-align: center;
    font-weight: 600;
    margin: 0 auto 2rem;
    padding: 0 0 1rem;
    border-bottom: 3px #f99b31 dotted;
}
.reason-qa-contents{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    margin: 0 auto 2.5rem;
}
.reason-qa-contents .left{
    width: 35%;
}
.reason-qa-contents .right{
    width: 60%;
}
.reason-qa-contents .right ul li{
    font-family: 'M PLUS Rounded 1c', sans-serif;
    font-weight: 500;
    padding: 0.5rem 0 0.5rem 2.3rem;
    line-height: 1.6;
    position: relative;
    font-size: 1.7rem;
}
.reason-qa-contents .right ul li span{
    color: #ea891c;
}
.reason-qa-contents .right ul li::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 500;
    content: "\f14a";
    font-size: 1.9rem;
    position: absolute;
    top: 0.4rem;
    left: 0;
    color: #222;
}
.reason-qa-middle{
    text-align: center;
}
.reason-qa-middle p{
    font-size: 20px;
    text-align: center;
}
.reason-qa-middle img{
    margin: 40px auto 40px;
    display: block;
}
.reason-qa-bottom{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}
.reason-qa-bottom .left{
    width: 55%;
}
.reason-qa-bottom .left p{
    font-family: 'M PLUS Rounded 1c', sans-serif;
    font-weight: 500;
    font-size: 1.8rem;
    line-height: 1.9;
}
.reason-qa-bottom .left p span{
    background: linear-gradient(transparent 75%, #fac000 25%);
}
.reason-qa-bottom .right{
    width: 40%;
}
.reason-ex{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    margin: 4rem auto;
}
.reason-ex .left{
    width: 42%;
}
.reason-ex .left p{
    font-size: 0.7em;
    line-height: 2;
}
.reason-ex .left p span{
    background: linear-gradient(transparent 75%, #fac000 25%);
}
.reason-ex .right{
    width: 55%;
}
.reason-ex .right img{
    display: block;
    margin: 0 auto 10px;
}
.reason-ex .right blockquote{
    margin: 0;
}
.reason-ex .right p{
    font-size: 14px;
    line-height: 1.4;
    color: #222;
}
.reason-ex .right p a{
    font-size: 14px;
    color: #222;
}
.reason-ex .right p a:hover{
    transition: 0.2s;
    opacity: 0.7;
}
.r-ex02 {
    flex-direction: row-reverse;
}
.reason-case{
    position: relative;
    padding: 5rem 0 0.1rem;
    background: #eeffff;
    margin: 0 auto 160px;
}
.reason-case:after {
    content: "";
    position: absolute;
    top: 100%;
    box-sizing: border-box;
    border-right: 50vw solid transparent;
    border-left: 50vw solid transparent;
    border-top: 150px solid #eeffff;
}
.reason-case h2{
    font-family: 'M PLUS Rounded 1c', sans-serif;
    font-size: 2.5rem;
    text-align: center;
    font-weight: 600;
    margin: 0 auto 2rem;
    padding: 0 0 1rem;
    border-bottom: 3px #f99b31 dotted;
}
.reason-case-contents01,.reason-case-contents02,.reason-case-contents03{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    margin: 4.5rem auto;
}
.reason-case-contents02{
    flex-direction: row-reverse;
}
.reason-case-contents01 .left,.reason-case-contents02 .left,.reason-case-contents03 .left{
    width: 50%;
}
.reason-case-contents01 .left h3,.reason-case-contents02 .left h3,.reason-case-contents03 .left h3{
    font-family: 'M PLUS Rounded 1c', sans-serif;
    font-size: 1.8rem;
    font-weight: 600;
    line-height: 1.4;
    display: block;
    position: relative;
    z-index: 1;
    padding: 0 0 15px;
    margin: 0 auto 15px;
    border-bottom: 1px solid #ccc;
}
.reason-case-contents01 .left h3::after{
    content: "Case01";
    position: absolute;
    top: -3rem;
    left: 0;
    font-size: 4rem;
    font-family: sans-serif;
    font-weight: 700;
    color: rgb(245 136 20 / 35%);
    z-index: 0;
}
.reason-case-contents02 .left h3::after{
    content: "Case02";
    position: absolute;
    top: -3rem;
    left: 0;
    font-size: 4rem;
    font-family: sans-serif;
    font-weight: 700;
    color: rgb(245 136 20 / 35%);
    z-index: 0;
}
.reason-case-contents03 .left h3::after{
    content: "Case03";
    position: absolute;
    top: -3rem;
    left: 0;
    font-size: 4rem;
    font-family: sans-serif;
    font-weight: 700;
    color: rgb(245 136 20 / 35%);
    z-index: 0;
}
.reason-case-contents01 .left p,.reason-case-contents02 .left p,.reason-case-contents03 .left p{
    font-size: 0.7em;
}
.reason-case-contents01 .left p span,.reason-case-contents02 .left p span,.reason-case-contents03 .left p span{
    background: linear-gradient(transparent 75%, #fac000 25%);
}
.reason-case-contents01 .right,.reason-case-contents02 .right,.reason-case-contents03 .right{
    width: 47%;
}
.reason-case-contents01 .left a,.reason-case-contents02 .left a,.reason-case-contents03 .left a{
    line-height: 1.5;
    display: block;
    font-size: 16px;
    margin: 15px auto 0;
    font-family: 'M PLUS Rounded 1c', sans-serif;
    font-weight: 700;
    transition: 0.2s;
}
.reason-case-contents01 .left a:hover,.reason-case-contents02 .left a:hover,.reason-case-contents03 .left a:hover{
    color: #f99b31;
}
.r-caution{
    position: relative;
    width: 90%;
    max-width: 1000px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    margin: 7rem auto 3rem;
    padding: 50px 35px 30px;
    background: #fff;
    border: 5px solid #f99b31;
    border-radius: 15px;
}
.r-caution:before {
    content: "";
    background: url(images/reason/15.webp);
    position: absolute;
    top: -75px;
    left: calc(50% - 60px);
    display: inline-block;
    width: 120px;
    height: 120px;
    background-size: cover;
}
.r-caution .left{
    width: 65%;
}
.r-caution .left p{
    font-family: 'M PLUS Rounded 1c', sans-serif;
    font-size: 2.0rem;
    font-weight: 600;
    line-height: 1.7;
}
.r-caution .right{
    width: 33%;
}
.reason-b-contents01{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-evenly;
}
.reason-b-contents01 .left{
    width: 55%;
}
.reason-b-contents01 .left p{
    font-family: 'M PLUS Rounded 1c', sans-serif;
    font-size: 2.0rem;
    font-weight: 600;
    line-height: 1.5;
    position: relative;
    display: inline-block;
    border: 3px solid #222;
    border-radius: 30px;
    padding: 1.5rem;
}

.reason-b-contents01 .left p:before {
    content: "";
    position: absolute;
    top: 50%;
    right: -24px;
    margin-top: -12px;
    border: 12px solid transparent;
    border-left: 12px solid #FFF;
    z-index: 2;
}
.reason-b-contents01 .left p:after {
    content: "";
    position: absolute;
    top: 50%;
    right: -30px;
    margin-top: -14px;
    border: 14px solid transparent;
    border-left: 14px solid #222;
    z-index: 1;
}
.reason-b-contents01 .right{
    width: 30%;
}
.reason-b-middle img{
    display: block;
    margin: 20px auto 40px;
}
.reason-b-contents02{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-evenly;
    flex-direction: row-reverse;
}
.reason-b-contents02 .left{
    width: 60%;
}
.reason-b-contents02 .left p{
    font-family: 'M PLUS Rounded 1c', sans-serif;
    font-size: 2.0rem;
    font-weight: 600;
    line-height: 1.5;
    position: relative;
    display: inline-block;
    border: 3px solid #222;
    border-radius: 30px;
    padding: 1.5rem;
}
.reason-b-contents02 .left p span{
    color: #ea891c;
}
.reason-b-contents02 .left p:before {
    content: "";
    position: absolute;
    top: 50%;
    left: -24px;
    margin-top: -12px;
    border: 12px solid transparent;
    border-right: 12px solid #FFF;
    z-index: 2;
}
.reason-b-contents02 .left p:after {
    content: "";
    position: absolute;
    top: 50%;
    left: -30px;
    margin-top: -14px;
    border: 14px solid transparent;
    border-right: 14px solid #222;
    z-index: 1;
}
.reason-b-contents02 .right{
    width: 30%;
}
.reason-break{
    position: relative;
    margin: 0 auto 0px;
    padding: 2rem 0 2rem;
}
.reason-point{
    position: relative;
    background: #fef8f3;
    padding: calc(5rem + 150px) 0 3.5rem;
}
.reason-point:before {
    content: "";
    position: absolute;
    top: 0%;
    box-sizing: border-box;
    border-right: 50vw solid transparent;
    border-left: 50vw solid transparent;
    border-top: 150px solid #fff;
}
.reason-point h2 {
    font-family: 'M PLUS Rounded 1c', sans-serif;
    font-size: 2.5rem;
    text-align: center;
    font-weight: 600;
    margin: 0 auto 2rem;
    padding: 0 0 1rem;
    border-bottom: 3px #f99b31 dotted;
}
.reason-point-contents{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding: 2rem 0;
}
.reason-point-contents .left{
    width: 40%;
}
.reason-point-contents .left img{
    box-shadow: 10px 10px 0 #ea891c;
}
.reason-point-contents .right{
    width: 55%;
}
.reason-point-contents .right h3{
    position: relative;
    font-family: 'M PLUS Rounded 1c', sans-serif;
    font-size: 2.0rem;
    font-weight: 600;
    line-height: 1.5;
    display: block;
    position: relative;
    z-index: 1;
    padding: 0 1.5rem 25px;
    margin: 0 auto 25px;
}
.reason-point-contents .right h3:before {
    content: "";
    display: block;
    width: 100px;
    height: 3px;
    background: #f99b31;
    position: absolute;
    bottom: 0;
    left: calc(50% - 50px);
}
.reason-point-contents .right h3 span{
    color: #ea891c;
}
.reason-point-contents .right p{
    font-size: 0.6em;
    line-height: 1.9;
}
.reason-point-contents .right p span{
    font-weight: bold;
}
.rpc2{
    flex-direction: row-reverse;
}
.reason-cta{
    padding: 5rem 0;
    background: #ff6f21;
}
.reason-cta-contents{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    background: #fff;
    border-radius: 20px;
}
.reason-cta-contents h2 {
    font-family: 'M PLUS Rounded 1c', sans-serif;
    font-size: 2.1rem;
    text-align: left;
    font-weight: 600;
    padding: 2.5rem;
    width: 60%;
}
.reason-cta-contents h2 span{
    color: #ea891c;
    font-size: 2.5rem;
}
.reason-cta-link {
    width: 38%;
}
.reason-cta-link img{
    display: block;
    margin: 0 auto 15px;
}
.reason-cta-link a{
    font-size: 18px;
    font-family: 'M PLUS Rounded 1c', sans-serif;
    font-weight: 600;
    line-height: 1.6;
    color: #fff;
    text-align: center;
    display: block;
    background: #f99b31;
    background: linear-gradient(-45deg, rgb(255 150 33) 0%, rgb(255 130 0) 100%);
    padding: 1.5rem 0.7rem;
    margin: 0 auto 0;
    border-radius: 100px;
    text-shadow: 1px 1px 0 rgb(0 0 0 / 20%);
    box-shadow: 0px 6px 0 #b96309;
    transition: 0.2s;
}
.reason-cta-link a:hover{
    box-shadow: 0px 2px 0 #b96309;
    transform: translate(0,4px);
}
.reason-cta-link a br.sp{
    display: none;
}
.reason-promise {
    position: relative;
    padding: 6rem 0 12rem;
    background: #fff url(images/reason/23.webp) no-repeat center bottom;
    background-size: contain;
}
.reason-promise h2{
    font-family: 'M PLUS Rounded 1c', sans-serif;
    font-size: 2.5rem;
    text-align: center;
    font-weight: 600;
    margin: 0 auto 2rem;
}
.reason-promise p {
    font-size: 0.75em;
    line-height: 2;
    text-align: center;
    margin: 0 auto 1rem;
}
.reason-promise p span{
    font-weight: bold;
}
.reason-service{
    position: relative;
    padding: 5rem 0 4rem;
    background: #FBF8E2;
}
.reason-direct h2{
    font-family: 'M PLUS Rounded 1c', sans-serif;
    font-size: 2.5rem;
    text-align: center;
    font-weight: 600;
    margin: 0 auto 2rem;
    padding: 0 0 1rem;
    border-bottom: 3px #f99b31 dotted;
}
.reason-direct h2 span{
    color: #f99b31;
}
.reason-direct-contents {
    background: #fff;
    border: 5px solid #f99b31;
    position: relative;
    border-radius: 20px;
    padding: 2.5rem;
    margin: 0 auto 5rem;
}
.reason-direct-contents img{
    display: block;
    margin: 30px auto;
}
.reason-direct-contents p{
    font-size: 0.75em;
    line-height: 1.9;
    margin: 0 auto 1rem;
}
.reason-direct-contents p span{
    color: #f26000;
    font-weight: bold;
}
.reason-direct-contents-sub{
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-around;
}
.reason-direct-contents-sub .left{
    width: 45%;
}
.reason-direct-contents-sub .left img{
    margin: 0 auto;
}
.reason-direct-contents-sub .right{
    width: 50%;
}
.reason-service-wrap{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.reason-service-inner {
    width: 46%;
    margin: 2% 2% 2%;
    background: #fff;
    border: 3px solid #f99b31;
    border-radius: 15px;
}
.reason-service-inner img{
    border-radius: 12px 12px 0 0;
}
.reason-service-inner h3{
    font-family: 'M PLUS Rounded 1c', sans-serif;
    font-size: 1.6rem;
    line-height: 1.4;
    text-align: center;
    font-weight: bold;
    margin: 1rem auto 1rem;
    padding: 0 1rem;
}
.reason-service-inner h3 span{
    color: #f26000;
}
.reason-service-inner p{
    font-size: 0.7em;
    line-height: 1.9;
    padding: 0 1em 1.3rem;
}
.reason-voice{
    position: relative;
    padding: 5rem 0 2.5rem;
    background-image: url(images/reason/07.jpg);
    background-repeat: repeat;
}
.reason-voice h2{
    font-family: 'M PLUS Rounded 1c', sans-serif;
    font-size: 2.5rem;
    text-align: center;
    font-weight: 600;
}
.reason-voice h2 span{
    color: #f99b31;
}
.reason-voice-header{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}
.reason-voice-header .left{
    width: 55%;
}
.reason-voice-header .right{
    width: 30%;
}
.reason-voice-header .right img{
    width: 80%;
    margin: 0 auto;
    display: block;
}
.reason-voice-header .right p{
    font-size: 11px;
    line-height: 1.5;
    text-align: center;
    margin: 10px auto 0;
}
.reason-voice-contents{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 3rem auto 0;
}
.reason-voice-inner{
    width: 30%;
    margin: 0 0 3%;
}
.reason-voice-inner img{
    box-shadow: 8px 8px 0 #ea891c;
    display: block;
    margin: 0 auto 15px;
}
.reason-voice-inner p.voice-title{
    font-size: 15px;
    font-weight: bold;
}
.reason-voice-inner h3{
    font-size: 20px;
    margin: 0.5rem 0;
    color: #f26000;
}
.reason-voice-inner p{
    font-size: 16px;
    line-height: 1.8;
}
@media screen and (min-width:768px) and ( max-width:1024px) {
    section.reason-header {
        background-size: 750px;
    }
    .reason-header-contents {
        padding: 3rem 0 7rem;
    }
    .reason-qa h2 {
        font-size: 32px;
    }
    .reason-qa-contents .right ul li {
        font-size: 18px;
    }
    .reason-qa-contents .right ul li::before {
        font-size: 1.8rem;
        top: 0rem;
    }
    .reason-qa-middle p {
        font-size: 16px;
    }
    .reason-qa-middle img {
        width: 50px;
    }
    .reason-qa-bottom .left p {
        font-size: 24px;
    }
    .reason-ex .left p {
        font-size: 14px;
    }
    .reason-ex {
        margin: 3rem auto;
    }
    .reason-qa {
        position: relative;
        padding: 3rem 0 1rem;
    }
    .reason-case h2 {
        font-size: 32px;
    }
    .reason-case-contents01 .left h3, .reason-case-contents02 .left h3, .reason-case-contents03 .left h3 {
        font-size: 24px;
    }
    .reason-case-contents01 .left p, .reason-case-contents02 .left p, .reason-case-contents03 .left p {
        font-size: 15px;
    }
    .reason-case-contents01, .reason-case-contents02, .reason-case-contents03 {
        margin: 3.5rem auto;
    }
    .reason-case {
        position: relative;
        padding: 4rem 0 0.1rem;
        margin: 0 auto 75px;
    }
    .reason-case-contents01 .left a, .reason-case-contents02 .left a, .reason-case-contents03 .left a {
        font-size: 13px;
    }
    .r-caution {
        width: 100%;
        padding: 50px 25px 20px;
    }
    .r-caution .left p {
        font-size: 24px;
    }
    .reason-case:after {
        border-top: 75px solid #eeffff;
    }
    .reason-b-contents01 .left p,.reason-b-contents02 .left p {
        font-size: 24px;
    }
    .reason-b-middle img {
        width: 50px;
    }
    .reason-b-contents01 .left {
        width: 60%;
    }
    .reason-b-contents02 .left {
        width: 62%;
    }
    .reason-b-contents02 .right {
        width: 33%;
    }
    .reason-b-contents02 {
        justify-content: space-between;
    }
    .reason-break {
        position: relative;
        padding: 4rem 0 0.1rem;
        margin: 0 auto 50px;
    }
    .reason-point h2 {
        font-size: 32px;
        margin: 2rem auto 0;
    }
    .reason-point {
        position: relative;
        background: #fef8f3;
        padding: 75px 0 2rem;
    }
    .reason-point:before {
        position: relative;
        margin: 0 auto 125px;
        border-top: 75px solid #fff;
    }
    .reason-point-contents .right h3 {
        font-size: 24px;
        padding: 0 0rem 20px;
        margin: 0 auto 20px;
    }
    .reason-point-contents .right p {
        font-size: 15px;
    }
    .reason-cta-link {
        width: 100%;
        padding: 0rem 4rem 3rem;
    }
    .reason-cta-contents h2 {
        width: 100%;
    }
    .reason-cta-contents h2 {
        font-size: 24px;
    }
    .reason-cta-contents h2 span {
        font-size: 32px;
    }
    .reason-cta-link a br.sp{
        display: none;
    }
    .reason-promise h2 {
        font-size: 32px;
    }
    .reason-promise p {
        font-size: 16px;
        text-align: left;
        padding: 0 2rem;
    }
    .reason-promise {
        padding: 5rem 0 6rem;
    }
    .reason-direct h2 {
        font-size: 32px;
    }
    .reason-direct-contents p {
        font-size: 15px;
    }
    .reason-service-inner h3 {
        font-size: 22px;
    }
    .reason-service-inner p {
        font-size: 15px;
    }
    .reason-voice h2 {
        font-size: 32px;
        text-align: left;
    }
    .reason-voice-header {
        justify-content: space-between;
    }
    .reason-voice-header .left {
        width: 65%;
    }
    .reason-voice-header .right {
        width: 33%;
    }
    .reason-voice-inner p {
        font-size: 14px;
    }
    .reason-voice-inner p.voice-title {
        font-size: 13px;
    }
    .reason-voice-inner h3 {
        font-size: 18px;
    }
}
@media screen and (max-width: 767px) {
    .reason-header-contents {
        padding: 50px 0 60px;
    }
    .reason-header-contents .left {
        width: 100%;
    }
    .reason-header-contents .left p {
        font-size: 16px;
        margin: 20px auto 0;
    }
    .reason-header-contents .right {
        width: 90%;
        margin: 30px auto 0;
    }
    section.reason-header {
        margin-top: 70px;
        background: #fff9ef url(images/reason/03.webp) repeat-x center bottom/100%;
    }
    .reason-qa {
        padding: 50px 0 10px;
    }
    .reason-qa h2 {
        font-size: 26px;
        margin: 0 auto 25px;
    }
    .reason-qa-contents {
        margin: 0 auto 20px;
    }
    .reason-qa-contents .left {
        width: 80%;
        margin: 0 auto 20px;
    }
    .reason-qa-contents .right {
        width: 100%;
    }
    .reason-qa-contents .right ul li {
        padding: 8px 0 8px 2rem;
        font-size: 20px;
    }
    .reason-qa-contents .right ul li::before {
        font-size: 24px;
        top: 6px;
    }
    .reason-qa-middle p {
        font-size: 15px;
    }
    .reason-qa-middle img {
        margin: 30px auto 30px;
        width: 40px;
    }
    .reason-qa-bottom .left {
        width: 100%;
    }
    .reason-qa-bottom .left p {
        font-size: 20px;
    }
    .reason-qa-bottom .right {
        width: 90%;
        margin: 20px auto 0;
    }
    .reason-ex {
        margin: 40px auto;
        flex-direction: column-reverse;
    }
    .reason-ex .left {
        width: 100%;
    }
    .reason-ex .left p {
        font-size: 15px;
        line-height: 1.9;
    }
    .reason-ex .right {
        width: 100%;
        margin: 0 auto 20px;
    }
    .reason-ex .right p,.reason-ex .right p a {
        font-size: 12px;
    }
    .reason-case {
        padding: 50px 0 25px;
        margin: 0 auto 100px;
    }
    .reason-case h2 {
        font-size: 24px;
        margin: 0 auto 20px;
    }
    .reason-case-contents01 .left, .reason-case-contents02 .left, .reason-case-contents03 .left {
        width: 100%;
    }
    .reason-case-contents01 .right, .reason-case-contents02 .right, .reason-case-contents03 .right {
        width: 80%;
        margin: 25px auto 0;
    }
    .reason-case-contents01 .left h3, .reason-case-contents02 .left h3, .reason-case-contents03 .left h3 {
        font-size: 22px;
    }
    .reason-case-contents01 .left p, .reason-case-contents02 .left p, .reason-case-contents03 .left p {
        font-size: 15px;
    }
    .r-caution:before {
        top: -55px;
        left: calc(50% - 45px);
        width: 90px;
        height: 90px;
    }
    .r-caution .left {
        width: 100%;
    }
    .r-caution .left p {
        font-size: 20px;
    }
    .r-caution .right {
        width: 85%;
        margin: 20px auto 0;
    }
    .r-caution {
        position: relative;
        width: 100%;
        margin: 100px auto 0px;
        padding: 50px 15px 20px;
    }
    .reason-case:after {
        border-top: 50px solid #eeffff;
    }
    .reason-b-contents01 .left {
        width: 95%;
        position: relative;
    }
    .reason-b-contents01 .left p {
        font-size: 20px;
        border: 3px solid #222;
        border-radius: 20px;
        padding: 15px;
    }
    .reason-b-contents01 .right {
        width: 60%;
        margin: 25px auto;
    }
    .reason-b-contents01 .left:after {
        content: "";
        position: absolute;
        bottom: -36px;
        left: calc(50% - 14px);
        margin-top: -14px;
        border: 18px solid transparent;
        border-top: 18px solid #222;
        z-index: 1;
    }
    .reason-b-contents01 .left:before {
        content: "";
        position: absolute;
        bottom: -32px;
        left: calc(50% - 14px);
        margin-top: -12px;
        border: 18px solid transparent;
        border-top: 18px solid #FFF;
        z-index: 2;
    }
    .reason-b-contents01 .left p:after,.reason-b-contents01 .left p:before{
        content: none;
    }
    .reason-b-middle img {
        margin: 0px auto 30px;
        width: 40px;
    }
    .reason-b-contents02 .left:after {
        content: "";
        position: absolute;
        bottom: -36px;
        left: calc(50% - 14px);
        margin-top: -14px;
        border: 18px solid transparent;
        border-top: 18px solid #222;
        z-index: 1;
    }
    .reason-b-contents02 .left:before {
        content: "";
        position: absolute;
        bottom: -32px;
        left: calc(50% - 14px);
        margin-top: -12px;
        border: 18px solid transparent;
        border-top: 18px solid #FFF;
        z-index: 2;
    }
    .reason-b-contents02 .left p:after,.reason-b-contents02 .left p:before{
        content: none;
    }
    .reason-b-contents02 {
        flex-direction: row;
    }
    .reason-b-contents02 .left {
        width: 100%;
        position: relative;
    }
    .reason-b-contents02 .left p {
        font-size: 22px;
        line-height: 1.6;
        border: 3px solid #222;
        border-radius: 20px;
        padding: 20px;
    }
    .reason-b-contents02 .right {
        width: 75%;
        margin: 25px auto 0;
    }
    .reason-break {
        position: relative;
        margin: 0 auto 25px;
        padding: 0 0 0px;
    }
    .reason-break:after {
        border-top: 50px solid #fff;
    }
    .reason-point:before {
        border-top: 50px solid #fff;
    }
    .reason-point {
        padding: 100px 0 35px;
    }
    .reason-point h2 {
        font-size: 22px;
        margin: 0 auto 20px;
    }
    .reason-point-contents {
        flex-direction: column-reverse;
        padding: 25px 0;
    }
    .reason-point-contents .right {
        width: 100%;
    }
    .reason-point-contents .right h3 {
        font-size: 20px;
        font-weight: 600;
        padding: 0 0rem 25px;
        margin: 0 auto 25px;
        line-height: 1.6;
    }
    .reason-point-contents .right p {
        font-size: 15px;
    }
    .reason-point-contents .left {
        width: 85%;
        margin: 25px auto 25px;
    }
    .reason-cta {
        padding: 60px 0;
    }
    .reason-cta-contents h2 span {
        font-size: 26px;
    }
    .reason-cta-contents h2 {
        font-size: 22px;
        width: 100%;
        padding: 25px 20px;
        letter-spacing: 1px;
        line-height: 1.4;
    }
    .reason-cta-link {
        width: 100%;
    }
    .reason-cta-link {
        width: 100%;
        padding: 0 20px 40px;
    }
    .reason-cta-link a {
        font-size: 16px;
        line-height: 1.6;
        padding: 1.5rem 0.7rem 1.3rem;
        margin: 0 auto 0;
        border-radius: 40px;
    }
    .reason-cta-link a br.sp{
        display: block;
    }
    .reason-promise h2 {
        font-size: 24px;
        margin: 0 auto 25px;
    }
    .reason-promise p {
        font-size: 16px;
        margin: 0 auto 1rem;
        text-align: left;
    }
    .reason-promise {
        position: relative;
        padding: 60px 0 60px;
    }
    .reason-service {
        padding: 50px 0 25px;
    }
    .reason-direct h2 {
        font-size: 24px;
    }
    .reason-direct-contents p {
        font-size: 15px;
    }
    .reason-direct-contents {
        border-radius: 15px;
        padding: 20px 15px 8px;
        margin: 0 auto 50px;
    }
    .reason-direct-contents-sub .left {
        width: 80%;
        margin: 0 auto 25px;
    }
    .reason-direct-contents-sub .right {
        width: 100%;
    }
    .reason-service-inner {
        width: 100%;
        margin: 0 auto 30px;
    }
    .reason-service-inner h3 {
        font-size: 20px;
        line-height: 1.5;
        text-align: center;
        font-weight: bold;
        margin: 20px auto 15px;
        padding: 0 15px;
    }
    .reason-service-inner p {
        font-size: 15px;
        line-height: 1.9;
        padding: 0 15px 20px;
    }
    .reason-voice {
        padding: 50px 0 25px;
    }
    .reason-voice h2 {
        font-size: 24px;
        text-align: left;
    }
    .reason-voice-header .left {
        width: 100%;
    }
    .reason-voice-header .right {
        width: 85%;
        margin: 25px auto 0;
    }
    .reason-voice-contents {
        margin: 40px auto 0;
    }
    .reason-voice-inner {
        width: 95%;
        margin: 0 auto 30px;
    }
    .reason-voice-inner p.voice-title {
        font-size: 14px;
    }
    .reason-voice-inner p {
        font-size: 15px;
    }
    .reason-voice-inner img {
        width: 95%;
    }
}
/* -----------------------------------外壁LP----------------------------------- */
.sub-reason01 {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    background: #fff;
    margin: 3% auto;
    border: 3px solid #fabe00;
    border-radius: 15px;
    padding: 3%;
}
.sub-reason01 h3{
    font-family: 'M PLUS Rounded 1c', sans-serif;
    font-size: 1.7rem;
    display: block;
    padding: 0 0 20px;
    margin: 0 auto 30px;
    width: 90%;
    text-align: center;
    border-bottom: 1px solid #fabe00;
}
.sub-reason01 .case01,.sub-reason01 .case02{
    width: 45%;
}
.sub-reason01 .case01 h4,.sub-reason01 .case02 h4{
    font-size: 1.3rem;
    display: block;
    margin: 0 auto 10px;
    padding: 0 0 10px;
    border-bottom: 1px solid #ccc;
    text-align: center;
    font-family: 'M PLUS Rounded 1c', sans-serif;
    color: #ea891c;
}
.sub-reason01 .case01 img,.sub-reason01 .case02 img{
    display: block;
    margin: 0 auto 15px;
    max-width: 350px;
    border-radius: 10px;
}
.sub-reason01 .case01 p,.sub-reason01 .case02 p{
    font-size: 16px;
}
.sub-reason01 .case03{
    display: block;
    width: 100%;
    margin: 30px auto 0;
}
.sub-reason01 .case03 p {
    font-size: 0.6em;
}
.sub-reason01 .case03 p span {
    background: linear-gradient(transparent 75%, #fac000 25%);
}
.sub-reason01 .case04{
    display: block;
    width: 100%;
    margin: 0px auto 0;
}
.sub-reason01 .case04 p {
    font-size: 0.6em;
    margin: 0 auto 1em;
}
.sub-reason01 .case04 p:last-child {
    margin: 0 auto 0;
}
.sub-reason01 .case04 p span {
    background: linear-gradient(transparent 75%, #fac000 25%);
}
.sub-reason01 .case04 img {
    float: right;
    max-width: 350px;
    padding: 10px 0 20px 20px;
}
.reason-cta-contents h2 img {
    display: block;
    text-align: center;
    margin: 0 auto -2rem;
}
.lp-cta {
    padding: 0% 0;
}
.lp-cta .reason-cta-link a {
    letter-spacing: 2px;
    margin: 0 auto 20px;
}
section#contact {
    position: relative;
    padding: 4rem 0 5rem;
}
section#contact .container {
    width: 850px;
}
section#contact h2{
    font-family: 'M PLUS Rounded 1c', sans-serif;
    font-size: 2.5rem;
    text-align: center;
    font-weight: 600;
    margin: 0 auto 3rem;
    padding: 0 0 1rem;
    border-bottom: 3px #f99b31 dotted;
}
a.tel-link {
    background: no-repeat;
    box-shadow: none;
    margin: 0 auto;
    padding: 0;
}
a.tel-link:hover{
    box-shadow: none;
    transform: none;
}
section.fix-bottom.reason-footer .container{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}
.reason-footer-tel-wrap {
    margin: 0 20px;
}
a.reason-footer-tel {
    font-family: 'M PLUS Rounded 1c', sans-serif;
    color: #fff;
    font-weight: 700;
    text-align: center;
}
a.reason-footer-tel p{
    font-size: 32px;
    line-height: 0.8;
}
a.reason-footer-tel p span{
    font-size: 16px;
}
.reason-footer-mail {
    text-align: center;
    font-size: 16px!important;
    padding: 0.7rem 2rem 0.7rem 4rem!important;
}
.scroll_box {
    background-color: rgba(247,247,247,1.00);
    width: 100%;
    height: 300px;
    padding: 20px;
    overflow: scroll;
    margin-bottom: 50px;
    font-size: 16px;
    line-height: 1.9;
    color: #222;
}
.scroll_box h3{
    font-family: 'M PLUS Rounded 1c', sans-serif;
    font-size: 20px;
    text-align: center;
    margin: 0 auto 10px;
}
section.reason-gaiyo {
    position: relative;
    padding: 5rem 0;
    background: #FF6D17;
}

.reason-tips {
    background: #fff;
    border: 5px solid #f99b31;
    border-radius: 20px;
    padding: 2.5rem;
    margin: 2rem auto 1rem;
}
.reason-tips h2{
    position: relative;
    font-size: 2.0rem;
    display: block;
}
.reason-tips p {
    font-size: 0.6em;
    line-height: 1.9;
    margin: 0 auto 1em;
}
.reason-tips p span {
    background: linear-gradient(transparent 75%, #fac000 25%);
}
.reason-tips h2:before {
    content: "Tips";
    position: absolute;
    left: 3%;
    top: -25px;
    font-size: 2.2em;
    color: #f99b31;
    transform: skew(20deg, -20deg);
}
.reason-tips-wrap{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    margin: 4% auto 2%;
}
.tips-wrap-inner{
    width: 45%;
}
.tips-wrap-inner h3{
    font-family: 'M PLUS Rounded 1c', sans-serif;
    color: #ea891c;
    font-size: 22px;
    margin: 0 auto 10px;
    padding: 0 0 10px;
    text-align: center;
    border-bottom: 1px solid #ccc;
}
.tips-wrap-inner p{
    font-size: 16px;
}
.tips-wrap-inner img{
    display: block;
    margin: 0 auto 15px;
    max-width: 350px;
    border-radius: 10px;
}



@media screen and (min-width:768px) and ( max-width:1024px) {
    .sub-reason01 {
        margin: 5% auto;
    }
    .sub-reason01 h3 {
        font-size: 22px;
    }
    .sub-reason01 .case01 img, .sub-reason01 .case02 img {
        max-width: 90%;
    }
    .sub-reason01 .case01 h4, .sub-reason01 .case02 h4 {
        font-size: 18px;
    }
    .sub-reason01 .case01 p, .sub-reason01 .case02 p {
        font-size: 14px;
    }
    .sub-reason01 .case03 p {
        font-size: 15px;
    }
    .sub-reason01 .case04 img {
        max-width: 220px;
        padding: 5px 0 20px 20px;
    }
    .sub-reason01 .case04 p {
        font-size: 15px;
        margin: 0 auto 1em;
    }
    section#contact .container {
        width: 90%;
    }
    section#contact {
        position: relative;
        padding: 4rem 0 5rem;
    }
    section#contact h2 {
        font-size: 32px;
    }
    .reason-cta-link img {
        width: 90%;
    }
    p.reason-footer-txt {
        display: none;
    }
    .scroll_box {
        font-size: 13px;
    }

    .reason-tips p {
        font-size: 15px;
    }
    .tips-wrap-inner p {
        font-size: 14px;
    }
    .tips-wrap-inner img {
        max-width: 90%;
    }
    .reason-tips h2 {
        font-size: 22px;
        margin: 0 auto 25px;
    }
    .reason-tips h2:before {
        left: -30px;
        top: -35px;
        font-size: 38px;
    }
    .reason-tips-wrap {
        margin: 50px auto 30px;
    }
    .reason-tips {
        padding: 2.5rem 2.5rem 2rem;
        margin: 0 auto 2rem;
    }
}
@media screen and (max-width: 767px) {
    .sub-reason01 {
        margin: 30px auto 0;
        border: 3px solid #fabe00;
        border-radius: 15px;
        padding: 15px;
    }
    .sub-reason01 h3 {
        font-size: 22px;
        padding: 0 0px 10px;
        margin: 0 auto 0px;
        width: 100%;
    }
    .sub-reason01 .case04 img {
        float: none;
        display: block;
        margin: 20px auto 20px;
        max-width: 90%;
        padding: 0;
    }
    .sub-reason01 .case01, .sub-reason01 .case02 {
        width: 100%;
    }
    .sub-reason01 .case01 img, .sub-reason01 .case02 img {
        max-width: 80%;
        margin: 20px auto 15px;
    }
    .sub-reason01 .case04 p {
        font-size: 15px;
    }
    .sub-reason01 .case01 h4, .sub-reason01 .case02 h4 {
        font-size: 18px;
    }
    .sub-reason01 .case01 p, .sub-reason01 .case02 p {
        font-size: 14px;
    }
    .sub-reason01 .case03 p {
        font-size: 15px;
    }
    .sub-reason01 .case03 {
        margin: 20px auto 0;
    }
    .reason-cta-contents h2 img {
        margin: 0 auto -20px;
        width: 90%;
    }
    section#contact h2 {
        font-size: 24px;
        margin: 0 auto 30px;
        padding: 0 0 15px;
    }
    section#contact {
        position: relative;
        padding: 50px 0 60px;
    }
    section.fix-bottom.reason-footer {
        padding: 0;
    }
    section.fix-bottom.reason-footer .container {
        padding: 0;
    }
    section.fix-bottom p.reason-footer-txt {
        margin: 0 0 0px;
    }
    .reason-footer-tel-wrap {
        margin: 0 0px;
        width: 48%;
    }
    a.reason-footer-tel p {
        font-size: 17px;
        line-height: 1.0;
    }
    a.reason-footer-tel p span {
        font-size: 11px;
    }
    a.estimate-btn.reason-footer-mail {
        width: 48%;
    }
    .reason-footer-mail {
        text-align: center;
        font-size: 10px!important;
        margin: 5px 0 0!important;
        padding: 0.2rem 0rem 0.2rem 1rem!important;
    }
    a.estimate-btn.reason-footer-mail:before {
        font-size: 10px;
        top: 10px;
        left: -47px;
    }
    .scroll_box h3 {
        font-size: 16px;
    }
    .scroll_box {
        font-size: 13px;
    }
    section.reason-gaiyo {
        padding: 60px 0;
    }
    .reason-tips {
        border: 3px solid #f99b31;
        padding: 20px 15px 10px;
        margin: 30px auto 30px;
    }
    .reason-tips p {
        font-size: 15px;
    }
    .reason-tips h2 {
        font-size: 22px;
        margin: 20px auto 20px;
        z-index: 1;
    }
    .reason-tips h2:before {
        left: -7px;
        top: -36px;
        font-size: 28px;
        color: #f99b31;
        transform: skew(10deg, -10deg);
        z-index: 0;
    }
    .tips-wrap-inner {
        width: 100%;
    }
    .tips-wrap-inner p {
        font-size: 14px!important;
    }
    .tips-wrap-inner h3 {
        font-size: 20px;
    }
    .tips-wrap-inner img {
        margin: 20px auto 15px;
        max-width: 80%;
    }
    .reason-tips-wrap {
        margin: 20px auto 20px;
    }
}


/* -----------------------------------カラーシミュレーション・読本プレゼント----------------------------------- */
section.simulation-column .midashi-wrap .midashi:before {
    content: "PrivacyPolicy";
    position: absolute;
    bottom: -1.8em;
    right: calc(50% - 3.5em);
    font-size: 1.1em;
    color: #00aecc;
    font-weight: 700;
    font-family: 'Montserrat', sans-serif;
}
section.simulation-column .midashi-wrap .midashi:before {
    content: "Color Simulation";
    position: absolute;
    bottom: -1.8em;
    right: calc(50% - 4.4em);
    font-size: 1.1em;
    color: #00aecc;
    font-weight: 700;
    font-family: 'Montserrat', sans-serif;
}
section.present-column .midashi-wrap .midashi:before {
    content: "Present";
    position: absolute;
    bottom: -1.8em;
    right: calc(50% - 2.4em);
    font-size: 1.1em;
    color: #00aecc;
    font-weight: 700;
    font-family: 'Montserrat', sans-serif;
}
section.subsidy-column .midashi-wrap .midashi:before {
    content: "Subsidy";
    position: absolute;
    bottom: -1.8em;
    right: calc(50% - 2.0em);
    font-size: 1.1em;
    color: #00aecc;
    font-weight: 700;
    font-family: 'Montserrat', sans-serif;
}
.present-inner01 {
    display: block;
    margin: 3.5rem auto;
}
.present-inner01 p{
    font-size: 14px;
    text-align: right;
}
.present-inner02 {
    box-sizing: border-box;
    border: 2px solid #ff9727;
    border-radius: 10px;
    margin: 0 auto 2.5rem;
}
.present-inner02 h2{
    background: #ff9727;
    display: block;
    text-align: center;
    font-weight: 700;
    color: #fff;
    padding: 8px 5px 10px;
    font-size: 28px;
    border-radius: 7px 7px 0 0;
}
.present-sample-wrap {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    padding: 3% 15px 0;
}
.present-sample-inner{
    width: 30%;
    margin: 0 auto 3%;
}
.present-sample-inner img{
    max-width: 100%;
    box-shadow: 2px 2px 3px rgb(0 0 0 / 10%);
    margin: 0 auto 5px;
}
.present-sample-inner p{
    font-size: 15px;
    line-height: 1.5;
    font-family: 'M PLUS Rounded 1c', sans-serif;
    text-align: center;
}
.present-inner03 {
    position: relative;
    box-sizing: border-box;
    margin: 2.5rem auto;
    background: #4a210e;
    padding: 2rem 2rem 1rem;
}
.present-inner03 h2{
    display: block;
    text-align: center;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.4;
    margin: 0 auto 2rem;
    color: #fff;
}
.present-follow-wrap{
    position: relative;
    box-sizing: border-box;
    background: #fff;
    padding: 20px;
    margin: 0 auto 2.5rem;
}
.present-follow-wrap h3{
    font-family: 'M PLUS Rounded 1c', sans-serif;
    font-size: 22px;
    color: #4a210e;
    border-bottom: 1px dotted #ccc;
    margin: 0 auto 10px;
    padding: 0 0 10px;
    line-height: 1.4;
}
.present-follow-inner{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}
.present-follow-inner p{
    font-size: 16px;
    line-height: 1.9;
}
.pfw01,.pfw02,.pfw03,.pfw04,.pfw05,.pfw06{
    background-position: center right;
    background-repeat: no-repeat;
    background-size: contain;
    border-radius: 10px;
}
.pfw01{
    background-image: url(images/present/08.jpg);
}
.pfw02{
    background-image: url(images/present/09.jpg);
}
.pfw03{
    background-image: url(images/present/10.jpg);
}
.pfw04{
    background-image: url(images/present/11.jpg);
}
.pfw05{
    background-image: url(images/present/12.jpg);
}
.pfw06{
    background-image: url(images/present/13.jpg);
}
span.flow-caution{
    font-size: 14px;
    display: block;
    line-height: 1.7;
}
h2.present-h2 {
    border-bottom: 2px solid #f99b31;
    padding: 0 5px 15px;
}
.present-last{
    margin: 4rem auto;
}
.simulation-content {
    position: relative;
    padding: 0 0 90px;
}
.simulation-inner01{
    background: #fffaef;
    padding: 3%;
    border-radius: 10px;
}
.simulation-inner01 p {
    font-size: 18px;
    line-height: 2;
    font-family: 'M PLUS Rounded 1c', sans-serif;
}
.simulation-inner02{
    position: relative;
    margin: 4rem auto;
}
.simulation-inner03{
    background: #f8fdff;
    padding: 3% 3% 2%;
    margin: 30px auto 0;
}
.simulation-inner03 img{
    float: right;
    max-width: 350px;
    padding: 0 0 10px 20px;
}
.simulation-inner02 p ,.simulation-inner03 p {
    font-size: 16px;
    line-height: 2;
    margin: 0 auto 1em;
}
.simulation-inner04{
    position: relative;
}
.simulation-inner04 p {
    font-size: 16px;
    line-height: 2;
    margin: 0 auto 1em;
}
.simulation-inner04 img{
    display: block;
    margin: 0 auto 0.7em;
}
.simulation-inner05{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 50px auto 0;
}
.simulation-inner05 .left,.simulation-inner05 .right{
    width: 48%!important;
    text-align: center;
    padding: 0;
}
.simulation-inner05 img{
    margin: 0 auto;
}
.simulation-inner05 a {
    font-size: 14px;
}
.subsidy-inner01{
    position: relative;
    margin: 4rem auto;
}
.subsidy-inner01 p{
    font-size: 16px;
}
.subsidy-inner01 h2,.subsidy-inner02 h2 {
    font-size: 24px;
    background: #00aecc;
    padding: 15px 12px 17px;
    line-height: 1.3;
    letter-spacing: 1px;
    font-weight: 600;
    color: #fff;
    text-shadow: 1px 1px 1px hsl(0deg 0% 0% / 20%);
    border-left: 7px solid #f99b31;
    margin: 60px auto 25px;
}
.subsidy-inner01 h3,.subsidy-inner02 h3 {
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 1px;
    text-align: left;
    margin: 25px auto 20px;
    padding: 15px 10px;
    line-height: 1.3;
    border-bottom: solid 3px #00aecc;
    position: relative;
    text-shadow: 1px 1px 1px hsl(0deg 0% 0% / 5%);
}
.subsidy-inner01 h3:after,.subsidy-inner02 h3:after {
    position: absolute;
    content: " ";
    display: block;
    border-bottom: solid 3px #f99b31;
    bottom: -3px;
    width: 30%;
}
.subsidy-inner01 ul{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
}
.subsidy-inner01 ul li{
    display: flex;
    padding: 0 15px 15px 0;
}
.subsidy-inner01 ul li a{
    font-size: 16px;
    position: relative;
    color: #00659c;
    text-decoration: underline!important;
    transition: 0.2s;
}
.subsidy-inner01 ul li a:before{
    content: "・";
}
.subsidy-inner01 ul li a:hover{
    text-decoration: none!important;
}
.subsidy-inner02{
    position: relative;
    margin: 4rem auto;
}
.subsidy-inner02 p{
    font-size: 16px;
    color: #2f2f2f;
    margin: 0 auto 20px;
    line-height: 2em;
}
.sibsidy-body {
    display: block;
    margin: 0 auto 5rem;
}




.sibsidy-body p{
    font-size: 14px;
}
.subsidy-inner02 p a {
    color: #007ec3;
    text-decoration: underline!important;
}
.sibsidy-body p a{
    font-size: 14px;
    color: #00659c;
    text-decoration: underline!important;
    word-break: break-all;
}
.sibsidy-body p a:hover{
    text-decoration: none!important;
}
.sibsidy-body blockquote{
    margin: 0;
}
.subsidy-area ul{
    margin: 20px auto 0;
}
.color-review{
    position: relative;
    margin: 30px auto;
}
.color-review-inner{
    display: flex;
    align-items: center;
    justify-content: center;
}
.color-review-inner img{
    margin: 0 50px;
    width: 120px;
}
.color-review-inner p{
    position: relative;
    display: inline-block;
    margin: 1.5em 0 1.5em 15px;
    padding: 15px 15px;
    min-width: 120px;
    max-width: 100%;
    color: #222;
    font-family: 'M PLUS Rounded 1c', sans-serif;
    font-size: 16px;
    background: #FFF;
    border: solid 2px #555;
    border-radius: 10px;
}
.color-review-inner p:before {
    content: "";
    position: absolute;
    top: 50%;
    left: -24px;
    margin-top: -12px;
    border: 12px solid transparent;
    border-right: 12px solid #FFF;
    z-index: 2;
}
.color-review-inner p:after {
    content: "";
    position: absolute;
    top: 50%;
    left: -29px;
    margin-top: -14px;
    border: 14px solid transparent;
    border-right: 14px solid #555;
    z-index: 1;
}
.simulation-cta {
    padding: 3rem 1.0rem;
    background: #ff6f21;
    margin: 40px auto 15px;
}
.simulation-cta-contents{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    background: #fff;
    border-radius: 20px;
}
.simulation-cta-contents h2 {
    font-family: 'M PLUS Rounded 1c', sans-serif;
    font-size: 1.8rem;
    text-align: left;
    font-weight: 600;
    padding: 2.5rem 2rem;
    width: 50%;
}
.simulation-cta-contents h2 span{
    color: #ea891c;
    font-size: 2.2rem;
}
.simulation-cta-link {
    width: 48%;
    padding: 2rem 0;
}
.simulation-cta-link img{
    display: block;
    margin: 0 auto 15px;
}
.simulation-cta-link a{
    font-size: 18px;
    font-family: 'M PLUS Rounded 1c', sans-serif;
    font-weight: 600;
    line-height: 1.6;
    color: #fff;
    text-align: center;
    display: block;
    background: #f99b31;
    background: linear-gradient(-45deg, rgb(255 150 33) 0%, rgb(255 130 0) 100%);
    padding: 1.5rem 0.7rem;
    margin: 0 auto 0;
    border-radius: 100px;
    text-shadow: 1px 1px 0 rgb(0 0 0 / 20%);
    box-shadow: 0px 6px 0 #b96309;
    transition: 0.2s;
}
.simulation-cta-link a:hover{
    box-shadow: 0px 2px 0 #b96309;
    transform: translate(0,4px);
}
.simulation-cta-link a br.sp{
    display: none;
}
p.simulation-caution {
    font-size: 15px;
    text-align: right;
}
.simulation-recommend{
    position: relative;
    margin: 40px auto;
}
.simulation-recommend h2{
    text-align: center;
    font-size: 36px;
    font-weight: 700;
    font-family: 'M PLUS Rounded 1c', sans-serif;
}
.simulation-recommend h2 span{
    color: #ea891c;
    font-size: 40px;
}
.simulation-recommend-img{
    display: block;
    margin: 30px auto;
}
.simulation-recommend-img img{
    display: block;
    margin: 20px auto;
}
.simulation-recommend-wrap{
    display: flex;
    align-items: center;
    justify-content: center;
}
.simulation-recommend-wrap .left{
    width: 20%!important;
}
.simulation-recommend-wrap .left img{
    display: block;
    margin: 0 auto;
}
.simulation-recommend-wrap .right {
    width: 78%!important;
    padding: 0!important;
    position: relative!important;
    top: 0!important;
}
.simulation-recommend-wrap .right p{
    position: relative;
    display: inline-block;
    margin: 1.5em 0 1.5em 15px;
    padding: 15px 15px;
    min-width: 120px;
    max-width: 100%;
    color: #222;
    font-family: 'M PLUS Rounded 1c', sans-serif;
    font-size: 18px;
    background: #FFF;
    border: solid 2px #555;
    border-radius: 10px;
}
.simulation-recommend-wrap .right p:before {
    content: "";
    position: absolute;
    top: 50%;
    left: -24px;
    margin-top: -12px;
    border: 12px solid transparent;
    border-right: 12px solid #FFF;
    z-index: 2;
}
.simulation-recommend-wrap .right p:after {
    content: "";
    position: absolute;
    top: 50%;
    left: -29px;
    margin-top: -14px;
    border: 14px solid transparent;
    border-right: 14px solid #555;
    z-index: 1;
}
.simulation-step{
    position: relative;
    margin: 0 auto 50px;
}
.simulation-step h2{
    text-align: center;
    font-size: 32px;
    font-weight: 700;
    margin: 0 auto 20px;
    font-family: 'M PLUS Rounded 1c', sans-serif;
}
.simulation-step h2 span{
    color: #ea891c;
    font-size: 40px;
}
.step-wrap {
    position: relative;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    border: 3px solid #ccc;
    border-radius: 10px;
}
.step-wrap img{
    width: 30%;
    border-radius: 10px;
    padding: 10px;
}
.step-wrap-inner {
    width: 65%;
    padding: 20px 15px;
}
.step-wrap-inner h3{
    font-family: 'M PLUS Rounded 1c', sans-serif;
    font-size: 20px;
    color: #ea891c;
    border-bottom: 1px solid #ccc;
    margin: 0 auto 10px;
    padding: 0 0 10px;
}
.step-wrap-inner p{
    font-size: 16px;
}
.step-arrow {
    display: block;
    margin: 30px auto 25px;
}
.step-arrow img {
    display: block;
    margin: 0 auto;
    width: 75px;
}
.step-arrow img.after {
    display: block;
    margin: 0 auto;
    width: 400px;
}
.step-l-wrap{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-evenly;
}
.step-l-wrap img{
    width: 40%;
}
.step-l-wrap p {
    width: 55%;
    font-family: 'M PLUS Rounded 1c', sans-serif;
    font-size: 20px;
    font-weight: bold;
}
.addtoany_content {
    clear: both;
    margin: 40px auto!important;
}
.addtoany_list.a2a_kit_size_32 a {
    padding: 5px;
}
@media screen and (min-width:768px) and ( max-width:1024px) {
    .simulation-inner01 p {
        font-size: 15px;
    }
    section.simulation-column .midashi-wrap .midashi:before {
        font-size: 18px;
    }
    section.subsidy-column .midashi-wrap .midashi:before {
        font-size: 18px;
    }
    .simulation-inner02 {
        position: relative;
        margin: 2rem auto;
    }
    .simulation-inner02 p, .simulation-inner03 p {
        font-size: 14px;
    }
    .simulation-inner03 img {
        max-width: 200px;
    }
    .simulation-inner03 {
        background: #f8fdff;
        padding: 4% 4% 2%;
    }
    .simulation-inner04 p {
        font-size: 14px;
    }
    .simulation-inner04 img {
        display: block;
        margin: 0 auto 1em;
    }
    .simulation-inner05 img {
        margin: 0 auto 15px;
    }
    .simulation-inner05 a {
        font-size: 13px;
    }
    .simulation-inner05 {
        margin: 50px auto 0;
    }
    .color-review {
        position: relative;
        margin: 15px auto;
    }
    .color-review-inner p {
        padding: 10px 15px;
    }
    .simulation-cta-contents h2 {
        font-size: 24px;
        width: 100%;
        padding: 2.5rem 1.5rem 1.5rem;
    }
    .simulation-cta-link{
        width: 100%;
        padding: 0rem 1rem 3rem;
    }
    .simulation-cta-link img {
        width: 80%;
    }
    .simulation-cta-contents h2 span {
        color: #ea891c;
        font-size: 32px;
    }
    .simulation-recommend h2,.simulation-step h2 {
        font-size: 24px;
    }
    .simulation-recommend h2 span,.simulation-step h2 span {
        font-size: 32px;
    }
    .simulation-recommend-wrap .right {
        width: 80%!important;
    }
    .simulation-recommend-wrap .right p {
        font-size: 16px;
    }
    p.simulation-caution {
        font-size: 13px;
        text-align: left;
    }
    .step-wrap-inner p {
        font-size: 14px;
    }
    .step-arrow img.after {
        width: 250px;
    }
    .step-l-wrap img {
        width: 50%;
        margin: 0 auto 20px;
    }
    .step-l-wrap p {
        width: 100%;
        font-size: 16px;
    }
    section.present-column .midashi-wrap .midashi:before{
        font-size: 18px;
    }
    .present-inner01 {
        display: block;
        margin: 35px auto;
    }
    .present-inner01 p {
        font-size: 12px;
        text-align: left;
        line-height: 1.6;
    }
    .present-inner02 h2 {
        padding: 7px 5px 10px;
        font-size: 20px;
    }
    .present-sample-inner p {
        font-size: 12px;
    }
    .present-inner02 {
        margin: 0 auto 20px;
    }
    .present-inner03 {
        margin: 20px auto 30px;
        padding: 25px 15px 10px;
    }
    .present-inner03 h2 {
        font-size: 24px;
        margin: 0 auto 25px;
    }
    .present-follow-wrap h3 {
        font-size: 18px;
    }
    .present-follow-inner p {
        font-size: 14px;
        line-height: 1.8;
    }
    .present-follow-wrap {
        padding: 20px 15px;
        margin: 0 auto 25px;
    }
    .pfw01, .pfw02, .pfw03, .pfw04, .pfw05, .pfw06 {
        background-size: cover;
    }
    .step-wrap-inner h3 {
        font-size: 18px;
    }
    .subsidy-inner01 p {
        font-size: 15px;
    }
    .subsidy-inner02 p {
        font-size: 15px;
    }
    .subsidy-inner01 h2, .subsidy-inner02 h2 {
        font-size: 20px;
    }
    .subsidy-inner01 ul li a {
        font-size: 15px;
    }

    .sibsidy-body p a {
        font-size: 13px;
        word-break: break-all;
    }
    .sibsidy-body p {
        font-size: 13px;
    }
}
@media screen and (max-width: 767px) {
    section.simulation-column .midashi-wrap .midashi:before {
        bottom: -35px;
        right: calc(50% - 4.4em);
        font-size: 18px;
    }
    section.subsidy-column .midashi-wrap .midashi:before {
        bottom: -35px;
        right: calc(50% - 2em);
        font-size: 18px;
    }
    .simulation-inner01 {
        padding: 5%;
        margin: 15px auto;
    }
    .simulation-inner01 p {
        font-size: 15px;
    }
    .simulation-inner02 {
        margin: 40px auto;
    }
    .simulation-inner02 p, .simulation-inner03 p {
        font-size: 15px;
    }
    .simulation-inner03 img {
        float: none;
        max-width: 280px;
        padding: 0;
        display: block;
        margin: 0 auto 15px;
    }
    .simulation-inner03 {
        background: #f8fdff;
        padding: 25px 15px 5px;
        margin: 30px auto 0;
    }
    .simulation-inner02 {
        position: relative;
        margin: 30px auto 30px;
    }
    .simulation-inner04 p {
        font-size: 15px;
    }
    .simulation-inner04 img {
        display: block;
        margin: 0 auto 15px;
    }
    .simulation-inner05 .left, .simulation-inner05 .right {
        width: 90%!important;
        text-align: center;
        padding: 0;
        margin: 0 auto 20px;
    }
    .simulation-inner05 img {
        margin: 0 auto 10px;
    }
    .simulation-inner05 {
        margin: 50px auto 0px;
    }
    .simulation-inner04 img {
        display: block;
        margin: 0 auto 15px;
    }
    .simulation-inner04 p {
        font-size: 14px;
        line-height: 1.8;
    }
    .color-review {
        position: relative;
        margin: 0px auto 20px;
    }
    .color-review-inner img {
        width: 100px;
        margin: 0;
    }
    .simulation-cta {
        padding: 50px 15px;
        margin: 40px auto 15px;
    }
    .simulation-cta-contents h2{
        font-size: 22px;
        width: 100%;
        padding: 25px 20px;
        letter-spacing: 1px;
    }
    .simulation-cta-contents h2 span {
        font-size: 26px;
    }

    .simulation-cta-link {
        width: 100%;
        padding: 0 15px 40px;
    }
    .simulation-cta-link a {
        font-size: 16px;
        line-height: 1.6;
        padding: 1.5rem 0.7rem 1.3rem;
        margin: 0 auto 0;
        border-radius: 30px;
    }
    p.simulation-caution {
        font-size: 12px;
        text-align: left;
        line-height: 1.5;
    }
    .simulation-recommend h2 {
        text-align: left;
        font-size: 22px;
    }
    .simulation-step h2 {
        font-size: 22px;
    }
    .simulation-recommend h2 span {
        font-size: 26px;
    }
    .simulation-step h2 span {
        font-size: 30px;
    }
    br.sp-none{
        display: none;
    }
    .simulation-recommend-img {
        margin: 30px auto 0;
    }
    .simulation-recommend-wrap .right p {
        margin: 10px 0 10px 15px;
        padding: 10px 10px;
        font-size: 15px;
    }
    .step-wrap {
        flex-wrap: wrap;
    }
    .step-wrap img {
        width: 70%;
        border-radius: 10px;
        padding: 10px;
    }
    .step-wrap-inner {
        width: 100%;
        padding: 0px 15px 15px;
    }
    .step-wrap-inner h3 {
        text-align: center;
    }
    .step-wrap-inner p {
        font-size: 15px;
    }
    .step-arrow {
        margin: 20px auto 15px;
    }
    .step-arrow img {
        width: 55px;
    }
    .simulation-step {
        margin: 0 auto 40px;
    }
    .step-arrow img.after {
        display: block;
        margin: 0 auto;
        width: 250px;
    }
    .step-l-wrap img {
        width: 100%;
        margin: 0 auto 20px;
    }
    .step-l-wrap p {
        width: 100%;
        font-size: 16px;
    }
    section.present-column .midashi-wrap .midashi:before {
        right: calc(50% - 2em);
        font-size: 18px;
    }
    .present-inner01 {
        margin: 30px auto;
    }
    .present-inner01 p {
        font-size: 12px;
        text-align: left;
        line-height: 1.6;
    }
    .present-inner02 h2 {
        padding: 6px 5px 10px;
        font-size: 20px;
    }
    .present-sample-wrap {
        justify-content: space-between;
        padding: 20px 15px 5px;
    }
    .present-sample-inner {
        width: 47%;
        margin: 0px 0 15px;
    }
    .present-sample-inner p {
        font-size: 12px;
    }
    .present-inner02 {
        margin: 0 auto 25px;
    }
    .present-inner03 {
        margin: 25px auto;
        padding: 25px 10px 5px;
    }
    .present-inner03 h2 {
        font-size: 20px;
        margin: 0 auto 25px;
    }
    .present-follow-wrap h3 {
        font-size: 18px;
    }
    .present-follow-inner p {
        font-size: 14px;
        line-height: 1.8;
    }
    .present-follow-wrap {
        padding: 15px;
        margin: 0 auto 25px;
    }
    span.flow-caution {
        font-size: 13px;
        padding: 7px 0 0;
        display: block;
        line-height: 1.8;
    }
    .simulation-content {
        padding: 0 0 50px;
    }
    .subsidy-inner01 h2, .subsidy-inner02 h2 {
        font-size: 20px;
        padding: 15px 10px 17px 10px;
    }
    .subsidy-inner01 p {
        font-size: 15px;
    }
    .subsidy-inner01 ul li a {
        font-size: 15px;
    }
    .subsidy-inner01 h3, .subsidy-inner02 h3 {
        font-size: 18px;
    }
    .subsidy-inner02 p {
        font-size: 15px;
    }

    .sibsidy-body p a {
        font-size: 13px;
        word-break: break-all;
    }
    .sibsidy-body p {
        font-size: 13px;
    }
    .subsidy-area ul {
        margin: 30px auto 0;
    }
    .subsidy-inner01 ul li {
        display: flex;
        padding: 0 18px 18px 0;
    }
}

/* -----------------------------------簡単見積もり----------------------------------- */
section#estimate{

}
section#estimate .midashi-wrap .midashi:before {
    content: "Estimate Simulation";
    position: absolute;
    bottom: -1.8em;
    right: calc(50% - 5.3em);
    font-size: 1.1em;
    color: #00aecc;
    font-weight: 700;
    font-family: 'Montserrat', sans-serif;
}
.estimate-header{
    background: #fffaef;
    padding: 3%;
    border-radius: 10px;
}
.estimate-header p{
    width: 100%;
    font-size: 16px;
    line-height: 2em;
}
.estimate-header p span{
    display: block;
    margin: 0.5em auto 0;
    font-size: 14px;
    color: #dc0000;
    line-height: 1.6;
}
.estimate-point {
    position: relative;
    border: 3px solid #f99b31;
    padding: 15px 20px 0;
    border-radius: 8px;
    display: block;
    margin: 4rem auto;
}
.estimate-point:before{
    content: "当サイトのシミュレーションを使うメリット";
    position: absolute;
    top: -20px;
    left: 30px;
    color: #f99b31;
    font-weight: bold;
    font-size: 24px;
    background: #fff;
    padding: 0 10px;
}
.estimate-wrap h3{
    color: #222;
    text-align: center;
    font-family: 'M PLUS Rounded 1c', sans-serif;
    letter-spacing: 1px;
    text-shadow: 1px 1px 1px rgb(0 0 0 / 10%);
    line-height: 1.4;
    font-size: 28px;
    padding: 10px 0 15px;
    margin: 0 auto 30px;
    font-weight: 500;
    border-bottom: 3px solid #f99b31;
}
.estimate-wrap h3 span{
    font-size: 0.9em;
    color: #00aecc;
    font-weight: 700;
}
.estimate-point-inner {
    position: relative;
    margin: 25px auto;
}
.estimate-point-txt {
    position: relative;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
}
.estimate-wrap .estimate-point-inner h3{
    display: flex;
    align-items: center;
    justify-content: center;
    color: #222;
    font-family: 'M PLUS Rounded 1c', sans-serif;
    text-align: center;
    letter-spacing: 1px;
    text-shadow: 1px 1px 0px rgb(0 0 0 / 10%);
    line-height: 1.4;
    font-size: 20px;
    background: none;
    background-image: none;
    padding: 10px 0 15px;
    margin: 0 auto 15px;
    font-weight: 600;
    border-bottom: 1px #a7a7a7 dotted;
}
.estimate-wrap .estimate-point-inner h3 span{
    font-size: 24px;
    color: #f99b31;
    padding: 0 5px 0 0;
}
.estimate-point-txt img{
    width: 35%;
}
.estimate-point-txt p{
    width: 60%;
    font-size: 15px;
    line-height: 1.9em;
}












section#estimate li .plan-wrap {
    border: 1px solid #333;
    margin: 0px 1px;
    background: #333;
    cursor: pointer;
}
section#estimate ul li {
    list-style: none;
}
section#estimate li label{
    margin: 0;
}
section#estimate li label input {
    display: none;
}
.estimate-wrap {
    position: relative;
    padding: 0px 0 80px;
}
.estimate-wrap h2 img{
    max-width: 100%;
}

.estimate-wrap ul.plan-list{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    margin: 0 auto 50px;
}
.estimate-wrap ul.plan-list li{
    width: 25%;
}
.plan-wrap img{
    max-width: 100%;
    cursor: pointer;
}
.plan-wrap figure {
    margin: 0;
    padding: 0;
}
.plan-wrap label p {
    text-align: center;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    padding: 5px 10px 10px;
    color: #fff;
}
.plan-wrap label p span{
    font-size: 0.8em;
    line-height: 1.5;
    display: block;
    font-weight: 500;
    margin-top: 5px;
}
section#estimate li .plan-wrap:hover {
    border: 1px solid #F29225;
    background: #F29225;
    transition: 0.2s;
}
section#estimate li .plan-wrap.selected {
    border: 1px solid #F29225;
    background: #F29225;
    transition: 0.2s;
}
section#estimate li .plan-wrap.selected label p{
    color: #fff;
}
section#estimate li label input:checked + p {
    background: #F29225;
    transition: 0.2s;
}
section#estimate li .floor-wrap:hover {
    border: 1px solid #F29225;
    background: #F29225;
    transition: 0.2s;
}
section#estimate li .part-wrap:hover {
    border: 1px solid #F29225;
    background: #F29225;
    color: #fff;
    transition: 0.2s;
}
section#estimate li .area-wrap:hover {
    border: 1px solid #F29225;
    background: #F29225;
    color: #fff;
    transition: 0.2s;
}
section#estimate li .year-wrap:hover {
    border: 1px solid #F29225;
    background: #F29225;
    color: #fff;
    transition: 0.2s;
}
section#estimate li .joint-wrap:hover {
    border: 1px solid #F29225;
    background: #F29225;
    color: #fff;
    transition: 0.2s;
}
.estimate-wrap ul.part-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    margin: 0 auto 50px;
}
section#estimate li .part-wrap {
    border: 1px solid #333;
    margin: 0px 1px;
    cursor: pointer;
}
section#estimate li .part-wrap:hover p{
    color: #fff;
}
.estimate-wrap ul.part-list li {
    width: 25%;
}
.part-wrap figure {
    margin: 0;
    padding: 0;
}
.part-wrap img {
    max-width: 100%;
    cursor: pointer;
}
.part-wrap label p {
    text-align: center;
    cursor: pointer;
    line-height: 1.4;
    font-size: 18px;
    font-weight: bold;
    padding: 9px 0 19px;
    color: #222;
}
section#estimate li .part-wrap.selected {
    border: 1px solid #f99b31;
    background: #f99b31;
    transition: 0.2s;
}
section#estimate li .part-wrap.selected p {
    color: #fff;
}
section#estimate li label input:checked + p {
    background: #f99b31;
    color: #fff;
    transition: 0.2s;
}
.estimate-wrap ul.floor-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0 auto 50px;
}
section#estimate li .floor-wrap {
    border: 1px solid #333;
    margin: 0px 1px;
    cursor: pointer;
    text-align: center;
}
.estimate-wrap ul.floor-list li {
    width: 20%;
    margin: 0 10px 0;
}
.floor-wrap figure {
    margin: 0;
    padding: 0;
}
.floor-wrap img {
    max-width: 100%;
    cursor: pointer;
}
.floor-wrap label p {
    text-align: center;
    cursor: pointer;
    line-height: 1.4;
    font-size: 18px;
    font-weight: bold;
    padding: 10px 40px 20px;
    color: #222;
}
section#estimate li .floor-wrap:hover p {
    color: #fff;
}
section#estimate li .floor-wrap.selected {
    border: 1px solid #f99b31;
    background: #f99b31;
    color: #fff;
    transition: 0.2s;
}
section#estimate li label input:checked + p {
    background: #f99b31;
    transition: 0.2s;
    color: #fff;
}
section#estimate li .floor-wrap.selected p {
    color: #fff;
}
.estimate-wrap ul.area-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0 auto 50px;
}
section#estimate li .area-wrap {
    border: 1px solid #333;
    margin: 0px 1px;
    cursor: pointer;
    text-align: center;
}
.estimate-wrap ul.area-list li {
    width: 16.6666%;
}
.area-wrap figure {
    margin: 0;
    padding: 0;
}
.area-wrap img {
    max-width: 100%;
    cursor: pointer;
}
.area-wrap label p {
    text-align: center;
    cursor: pointer;
    line-height: 1.4;
    font-size: 16px;
    font-weight: bold;
    padding: 30px 25px 30px;
    color: #222;
}
section#estimate li .area-wrap.selected {
    border: 1px solid #f99b31;
    background: #f99b31;
    transition: 0.2s;
}
section#estimate li .area-wrap:hover p{
    color: #fff;
}
section#estimate li .area-wrap.selected p{
    color: #fff;
}
section#estimate li label input:checked + p {
    background: #f99b31;
    transition: 0.2s;
}
.part-container p.caution , .area-container p.caution , .joint-container p.caution{
    text-align: right;
    font-size: 14px;
    margin: 0 auto 20px;
}
.area-container p.caution a , .joint-container p.caution a{
    cursor: help;
    color: #333;
}
.area-container p.caution a span , .joint-container p.caution a span{
    position: relative;
    display: inline-block;
    margin: 0.5em 10px 0.5em 0;
    padding: 0 5px;
    width: 40px;
    height: 30px;
    line-height: 28px;
    text-align: center;
    color: #FFF;
    font-size: 14px;
    font-weight: bold;
    background: #00aecc;
    border-radius: 0%;
    box-sizing: border-box;
}
.area-container p.caution a span:before , .joint-container p.caution a span:before{
    content: "";
    position: absolute;
    top: 50%;
    right: -15px;
    margin-top: -8px;
    border: 8px solid transparent;
    border-left: 8px solid #00aecc;
    z-index: 0;
}
.area-container p.caution a:hover , .joint-container p.caution a:hover{
    opacity: 0.7;
    transition: 0.2s;
}
.estimate-wrap ul.year-list , .estimate-wrap ul.joint-list{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0 auto 50px;
}
section#estimate li .year-wrap , section#estimate li .joint-wrap{
    border: 1px solid #333;
    margin: 0px 1px;
    cursor: pointer;
    text-align: center;
}
.estimate-wrap ul.year-list li , .estimate-wrap ul.joint-list li{
    width: 20%;
}
.year-wrap figure , .joint-wrap figure {
    margin: 0;
    padding: 0;
}
.year-wrap img , .joint-wrap img{
    max-width: 100%;
    cursor: pointer;
}
.year-wrap label p , .joint-wrap label p{
    text-align: center;
    cursor: pointer;
    line-height: 1.4;
    font-size: 16px;
    font-weight: bold;
    padding: 20px 30px 20px;
    color: #222;
}
section#estimate li .year-wrap.selected , section#estimate li .joint-wrap.selected {
    border: 1px solid #f99b31;
    background: #f99b31;
    transition: 0.2s;
}
section#estimate li .year-wrap:hover p{
    color: #fff;
}
section#estimate li .year-wrap.selected p{
    color: #fff;
}
section#estimate li .joint-wrap:hover p{
    color: #fff;
}
section#estimate li .joint-wrap.selected p{
    color: #fff;
}
.part-container {
    display: none;
}
.area-container {
    display: none;
}
.year-container {
    display: none;
}
.joint-container {
    display: none;
}
.calc-wrap {
    display: none;
}
.calc-wrap {
    text-align: center;
    margin: 75px auto 50px;
}
input.calculation {
    font-size: 32px;
    font-weight: 600;
    background: #f99b31;
    background: linear-gradient(-175deg, rgb(255 161 55) 0%, rgb(241 127 0) 100%);
    text-shadow: 1px 2px 1px rgb(51 51 51 / 51%);
    color: #fff;
    padding: 15px 100px;
    border: none;
    border-radius: 50px;
    box-shadow: 0 6px #b96309;
    transition: 0.2s;
}
input.calculation:hover {
    transform: translateY(3px);
    box-shadow: 0 3px #b96309;
    background: #f99b31;
    background: linear-gradient(-175deg, rgb(255 161 55) 0%, rgb(241 127 0) 100%);
}
.result-container{
    position: relative;
    margin: 100px auto 50px;
}
.result-table{
    position: relative;
    width: 100%;
    border-collapse: collapse;
    margin: 30px auto 50px;
}
.result-table tr{
    border-bottom: solid 5px white;
}
.result-table th.toryo-name{
    position: relative;
    width: 40%;
    background-color: #00aecc;
}
.result-table th.toryo-name:after{
    display: block;
    content: "";
    width: 0px;
    height: 0px;
    position: absolute;
    top:calc(50% - 10px);
    right:-10px;
    border-left: 10px solid #00aecc;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
  }
.result-table th.toryo-name p{
    font-size: 24px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 2px;
    text-shadow: 2px 2px 1px rgb(0 0 0 / 10%)
}
.result-table td.price{
    width: 45%;
}
.result-table td.price p {
    font-size: 48px;
    font-weight: 700;
    text-align: center;
    letter-spacing: 3px;
    padding: 0px 0px 6px 15px;
    text-shadow: 1px 1px 1px rgb(0 0 0 / 10%);
}
.result-table td.en{
    width: 10%;
}
.result-table td.en p{
    font-size: 20px;
    padding: 13px 0 0;
}
.result-table td.en p span{
    font-size: 15px;
}
.result-table td.result-bg{
    background: #f3fdff;
}






.result-box {
    width: 95%;
    display: flex;
    margin: 20px auto 20px;
    align-items: center;
    border: #fff;
    box-shadow: 2px 2px 3px rgb(51 51 51 / 50%);
}
.result-box .left{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 43%;
    background: rgb(51,51,51);
    background: linear-gradient(0deg, rgba(51,51,51,1) 0%, rgba(78,78,78,1) 50%, rgba(51,51,51,1) 100%);
    height: 80px;
}
.result-box .left p{
    color: #ffed18;
    padding: 3px 20px 6px;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: 5px;
    text-align: center;
    line-height: 1.2;
    text-shadow: 2px 2px 3px rgb(51 51 51 / 51%);
}
.result-box .left p span{
    color: #fff;
    font-size: 16px;
    letter-spacing: 2px;
}
.result-box .center{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 43%;
    border-top: 2px solid #555;
    border-bottom: 2px solid #555;
    background: rgb(247,247,247);
    background: linear-gradient(0deg, rgba(247,247,247,1) 0%, rgba(255,255,255,1) 50%, rgba(250,250,250,1) 100%);
    height: 80px;
}
.result-box .center p{
    padding: 5px 20px;
    font-size: 40px;
    font-weight: 600;
    letter-spacing: 5px;
    text-align: center;
    line-height: 1.2;
    text-shadow: 2px 2px 2px rgb(51 51 51 / 30%);
}
.result-box .right{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 14%;
    background: rgb(51,51,51);
    background: linear-gradient(0deg, rgba(51,51,51,1) 0%, rgba(78,78,78,1) 50%, rgba(51,51,51,1) 100%);
    height: 80px;
}
.result-box .right p{
    color: #fff;
    padding: 5px 15px;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 5px;
    text-align: center;
    line-height: 1.2;
    text-shadow: 2px 2px 3px rgb(51 51 51 / 51%);
}
.result-box .right p span{
    font-size: 0.6em;
    letter-spacing: 0.1em;
}
.paint-ex {
    display: block;
    width: 90%;
    margin: 0 auto 30px;
}
.paint-ex p{
    font-size: 13px;
    line-height: 1.6;
}
.caution-txt {
    width: 95%;
    display: block;
    margin: 0 auto 30px;
}
.caution-txt p{
    font-size: 14px;
}
.message-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
    margin: 0 auto;
    width: 100%;
    max-width: 100%;
    border: 2px solid #ccc;
    background: #fff;
    padding: 20px 25px;
}
.message-wrap .left {
    width: 100%!important;
}
.message-wrap .left p{
    font-size: 16px;
    font-weight: 500;
    color: #222;
    line-height: 1.6;
}
.message-wrap .left p span {
    font-size: 1.2em;
    color: #e42121;
}
.message-wrap .right{
    width: 100%!important;
    text-align: center;
    margin: 30px auto 15px;
}
.message-wrap .right button{
    font-size: 18px;
    letter-spacing: 3px;
    font-weight: 500;
    color: #fff;
    display: inline-block;
    background: #00aecc;
    background-image: linear-gradient( -225deg, #19d8bf 0%, #00aecc 100%);
    padding: 15px 3.5em;
    border-radius: 60px;
    border: none;
    text-shadow: 1px 1px 1px rgb(0 0 0 / 20%);
    box-shadow: 3px 4px 0px #222;
    transition: 0.3s;
}
.message-wrap .right button:hover {
    transform: translate(3px, 4px);
    box-shadow: 0px 0px 0px #222;
}
section.top-search {
    position: relative;
    padding: 70px 0 0;
}
section.top-search h2{
    width: 100%!important;
}
.top-area-kenmei {
    width: 48%;
    margin: 0px 0px 0 0px;
}
.top-area-kenmei .stafflink-unit{
    margin: 0 0 5px;
    white-space: nowrap;
    font-size: 15px;
    display: inline-block;
    padding-right: 10px;
}
.top-area-kenmei .stafflink-unit a{
	color:#333;
	text-decoration:none;
}
.top-area-kenmei .stafflink-unit a:hover{
	color:#F93;
	text-decoration:underline;
}
span.fa.fa-caret-right.thk {
    color: #7a8cdc;
}

span.fa.fa-caret-right.knt {
    color: #2973b4;
}

span.fa.fa-caret-right.htk {
    color: #20d28e;
}

span.fa.fa-caret-right.knk {
    color: #7dab2e;
}

span.fa.fa-caret-right.cgk {
    color: #cb9c31;
}

span.fa.fa-caret-right.skk {
    color: #a25925;
}

span.fa.fa-caret-right.ksu {
    color: #ff6634;
}
h3.area-name01 {
    background: #7a8cdc;
    font-size: 16px;
    width: 100%;
    color: #fff;
    text-align: left;
    padding: 8px 10px 9px;
    margin: 0px auto 10px;
}
h3.area-name02 {
    background: #2973b4;
    font-size: 16px;
    width: 100%;
    color: #fff;
    text-align: left;
    padding: 8px 10px 9px;
    margin: 15px auto 10px;
}
h3.area-name03 {
    background: #20d28e;
    font-size: 16px;
    width: 100%;
    color: #fff;
    text-align: left;
    padding: 8px 10px 9px;
    margin: 15px auto 10px;
}
h3.area-name04 {
    background: #7dab2e;
    font-size: 16px;
    width: 100%;
    color: #fff;
    text-align: left;
    padding: 8px 10px 9px;
    margin: 15px auto 10px;
}
h3.area-name05 {
    background: #cb9c31;
    width: 100%;
    font-size: 16px;
    color: #fff;
    text-align: left;
    padding: 8px 10px 9px;
    margin: 15px auto 10px;
}
h3.area-name06 {
    background: #a25925;
    font-size: 16px;
    width: 100%;
    color: #fff;
    text-align: left;
    padding: 8px 10px 9px;
    margin: 15px auto 10px;
}
h3.area-name07 {
    background: #ff6634;
    font-size: 16px;
    width: 100%;
    color: #fff;
    text-align: left;
    padding: 8px 10px 9px;
    margin: 15px auto 10px;
}
html.modalset , html.modalset02 , html.modalset03 , html.modalset04 , html.modalset05 , html.modalset06{
    overflow: hidden;
}
.modal , .modal02 , .modal03 , .modal04 , .modal05 , .modal06{
    display: none;
    width: 100%;
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 9999;
}
.modal-wrap , .modal-wrap02 , .modal-wrap03 , .modal-wrap04 , .modal-wrap05 , .modal-wrap06{
    width: 100%;
    height: 100%;
    text-align: center;
    padding: 20px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: none;
    overflow: -moz-scrollbars-none;
}
.modal-wrap::-webkit-scrollbar {
    display: none;
}
.modal-wrap02::-webkit-scrollbar , .modal-wrap03::-webkit-scrollbar , .modal-wrap04::-webkit-scrollbar , .modal-wrap05::-webkit-scrollbar , .modal-wrap06::-webkit-scrollbar {
    display: none;
}
.modal-wrap:after {
    content: '';
    display: inline-block;
    vertical-align: middle;
    width: 1px;
    height: 100%;
}
.modal-wrap02:after , .modal-wrap03:after , .modal-wrap04:after , .modal-wrap05:after , .modal-wrap06:after{
    content: '';
    display: inline-block;
    vertical-align: middle;
    width: 1px;
    height: 100%;
}
.modal-bg , .modal-bg02 , .modal-bg03 , .modal-bg04 , .modal-bg05 , .modal-bg06{
    position: absolute;
    left: 0;
    top: 0;
    background: rgba(51, 51, 51, 0.8);
    width: 100%;
    height: 100%;
}
.modal-box , .modal-box02 , .modal-box03 , .modal-box04 , .modal-box05 , .modal-box06{
    width: 100%;
    max-width: 800px;
    display: inline-block;
    vertical-align: middle;
    position: relative;
}
.modal-box .inner , .modal-box02 .inner , .modal-box03 .inner , .modal-box04 .inner , .modal-box05 .inner , .modal-box06 .inner{
    background: #fff;
    padding: 60px 20px;
    text-align: left;
    border-radius: 10px;
}
.modal-box .inner h4 , .modal-box02 .inner h4 , .modal-box03 .inner h4 , .modal-box04 .inner h4 , .modal-box05 .inner h4 , .modal-box06 .inner h4{
    text-align: center;
    font-size: 24px;
    margin: 0 auto 20px;
    display: block;
    width: 100%;
}
.nobeyuka-wrap{
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-evenly;
        margin: 0 auto 30px;
}
.modal-box h4,.modal-box04 h4{
    font-family: 'M PLUS Rounded 1c', sans-serif;
    text-shadow: 1px 1px 1px rgb(0 0 0 / 10%);
    border-bottom: 1px solid #f99b31;
    padding: 0 0 15px;
}
.nobeyuka-wrap img{
        width: 30%;
        max-width: 100%;
}
.nobeyuka-wrap p{
    width: 65%;
    font-size: 16px;
}
.modal-box .inner > :first-child {
    margin-top: 0;
}
.modal-box02 .inner > :first-child {
    margin-top: 0;
}
.modal-box03 .inner > :first-child {
    margin-top: 0;
}
.modal-box04 .inner > :first-child {
    margin-top: 0;
}
.modal-box05 .inner > :first-child {
    margin-top: 0;
}
.modal-box06 .inner > :first-child {
    margin-top: 0;
}
.modal-close {
    text-align: center;
    cursor: pointer;
    font-size: 18px;
}
.meji-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-evenly;
    margin: 0 auto 30px;
}
.meji-wrap img {
    width: 22%;
}
.meji-wrap p {
    width: 48%;
    font-size: 16px;
}

p.blink {
    line-height: 1.6;
    letter-spacing: 1px;
	-webkit-animation: blink 1.2s ease-in-out infinite alternate;
	animation: blink 1.2s ease-in-out infinite alternate;
}
.rank-wrap{
    width: 100%;
    display: block;
    margin: 30px auto;
    border: 3px solid #f99b31;
    border-radius: 10px;
    padding: 30px 25px;
    background: #fff;
}
.rank-wrap img{
    max-width: 100%;
    display: block;
    margin: 25px auto;
    width: 70%;
}
.rank-wrap h3{
    position: relative;
    padding: 0px 15px 25px;
    text-align: center;
    font-size: 24px;
    font-weight: 600;
    letter-spacing: 2px;
    background: no-repeat;
    color: #222;
    text-shadow: none;
    border-bottom: none;
}
.rank-wrap h3:before {
    position: absolute;
    bottom: 0px;
    left: 0;
    right: 0;
    margin: auto;
    width: 100px;
    height: 3px;
    content: '';
    border-radius: 0px;
    background: #00aecc;
}
.rank-wrap p{
    font-size: 15px;
    line-height: 1.9em;
}
@media screen and (min-width:768px) and ( max-width:1024px) {
    section#estimate {
        padding: 0;
    }
    .estimate-header {
        padding: 0 0px 25px;
    }
    section#estimate .midashi-wrap .midashi:before {
        font-size: 18px;
    }
    .estimate-wrap h2{
        display: block;
        width: 100%;
        margin: 0 auto;
    }
    .estimate-header p {
        width: 100%;
        font-size: 15px;
        line-height: 2em;
        padding: 3% 3% 0%;
    }
    .estimate-wrap {
        padding: 0px 0px 50px;
    }
    .estimate-header p span {
        font-size: 13px;
    }
    .estimate-point {
        margin: 3rem auto 2rem;
        padding: 5px 20px 0;
    }
    .estimate-wrap .estimate-point-inner h3 {
        font-size: 18px;
    }
    .estimate-point-txt p {
        font-size: 13px;
    }
    .estimate-point:before {
        top: -17px;
        left: 30px;
        font-size: 20px;
    }
    .estimate-point-inner {
        margin: 20px auto;
    }








    .estimate-wrap ul.plan-list {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-evenly;
        margin: 0 auto 50px;
    }
    .estimate-wrap ul.plan-list li {
        width: 25%;
    }
    .estimate-wrap h3 {
        font-size: 20px;
        margin: 0 auto 20px;
    }
    .plan-wrap label p {
        font-size: 15px;
    }
    .plan-wrap label p span {
        text-align: left;
    }
    .part-wrap label p {
        font-size: 12px;
    }
    .floor-wrap label p{
        font-size: 15px;
    }
    .result-box {
        width: 95%;
    }
    .result-box .center p {
        font-size: 28px;
        padding: 5px 10px;
    }
    .result-box .left p,.result-box .right p {
        font-size: 18px;
        padding: 3px 5px 5px;
    }
    .result-box .right p span {
        font-size: 0.5em;
        letter-spacing: 0.1em;
    }
    .result-box .left p span {
        font-size: 12px;
        letter-spacing: 1px;
    }
    .paint-ex p {
        font-size: 12px;
    }
    .caution-txt p {
        font-size: 13px;
    }
    .caution-txt {
        width: 95%;
    }
    input.calculation {
        width: 90%;
        font-size: 24px;
        padding: 15px 30px;
    }
    .message-wrap {
        width: 95%;
        padding: 15px 15px 10px;
    }
    .message-wrap p {
        font-size: 16px;
        line-height: 1.6;
    }
    .estimate-wrap ul.floor-list li {
        width: 25%;
    }
    .estimate-wrap ul.area-list li {
        width: 16.5%;
    }
    .floor-wrap label p {
        padding: 20px 20px 20px;
    }
    .area-wrap label p {
        font-size: 12px;
        padding: 20px 5px 20px;
    }
    .estimate-wrap ul.year-list li, .estimate-wrap ul.joint-list li {
        width: 25%;
    }
    .year-wrap label p, .joint-wrap label p {
        text-align: center;
        cursor: pointer;
        line-height: 1.4;
        font-size: 13px;
        font-weight: bold;
        padding: 20px 20px 20px;
    }
    section.top-search h2 {
        width: 100%!important;
        font-size: 24px!important;
        padding: 40px 15px 25px!important;
    }
    .top-area-kenmei {
        width: 90%;
        margin: 0px 0px 0 0px;
    }
    h3.area-name01 {
        font-size: 15px!important;
        margin: 0px auto 10px!important;
    }
    h3.area-name02 , h3.area-name03 , h3.area-name04 , h3.area-name05 , h3.area-name06 , h3.area-name07{
        font-size: 15px!important;
        margin: 15px auto 10px!important;
    }
    .top-area-kenmei .stafflink-unit {
        font-size: 14px;
    }
    .message-wrap .left p {
        font-size: 14px;
    }
    .message-wrap .right button {
        font-size: 16px;
        letter-spacing: 2px;
        padding: 15px 2.0em;
    }
    p.blink {
        font-size: 14px;
    }

    .rank-wrap p {
        font-size: 14px;
        line-height: 1.9em;
    }
    .part-container p.caution, .area-container p.caution, .joint-container p.caution {
        font-size: 13px;
    }
    .area-container p.caution a, .joint-container p.caution a {
        font-size: 14px;
    }
    .rank-wrap {
        width: 95%;
    }

    .result-table td.en {
        width: 15%;
    }
    .result-table td.en p {
        font-size: 13px;
        padding: 7px 0 0;
    }
    .result-table td.en p span {
        font-size: 10px;
    }
    .result-table th.toryo-name p {
        font-size: 18px;
    }
    .result-table td.price p {
        font-size: 28px;
    }
}
@media screen and (max-width: 767px) {
    section#estimate {
        padding: 0px 0 30px;
    }
    section#estimate .midashi-wrap .midashi:before {
        bottom: -35px;
        right: calc(50% - 5.4em);
        font-size: 18px;
    }
    .estimate-wrap h2{
        display: block;
        width: 100%;
        margin: 0 auto;
    }
    .estimate-header {
        flex-wrap: wrap;
        padding: 5%;
    }
    .estimate-wrap {
        padding: 15px 0px 25px;
    }
    .estimate-header p {
        width: 100%;
        font-size: 15px;
        line-height: 1.9em;
    }
    .estimate-header p span {
        margin: 1em auto 0;
        font-size: 13px;
        line-height: 1.7;
    }
    .estimate-point {
        padding: 20px 15px 0;
        border-radius: 10px;
        margin: 60px auto 50px;
    }
    .estimate-point:before {
        top: -30px;
        left: 9%;
        font-size: 20px;
        width: 80%;
        padding: 0 5px;
        text-align: center;
    }
    .estimate-wrap .estimate-point-inner h3 {
        font-size: 16px;
        text-align: left;
        padding: 10px 0 15px;
        margin: 0 auto 15px;
    }
    .estimate-wrap .estimate-point-inner h3 span {
        font-size: 28px;
        padding: 0 10px 0 0;
    }
    .estimate-point-txt p {
        width: 100%;
        font-size: 14px;
        line-height: 1.9em;
    }
    .estimate-point-txt img {
        width: 70%;
        display: block;
        margin: 0 auto 15px;
    }
    .estimate-point-inner {
        position: relative;
        margin: 20px auto;
    }
    .result-container {
        position: relative;
        margin: 50px auto 0px;
    }
    .calc-wrap {
        text-align: center;
        margin: 50px auto 50px;
    }
    .estimate-wrap h3 {
        line-height: 1.7;
        font-size: 17px;
        margin: 0 auto 10px;
        padding: 10px 5px 15px;
    }
    .estimate-wrap ul.plan-list li {
        width: 45%;
        margin: 2%;
    }
    .estimate-wrap ul.plan-list {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        margin: 0 auto 40px;
    }
    .plan-wrap label p {
        font-size: 12px;
        padding: 7px 5px 7px;
        line-height: 1.3;
    }
    .estimate-wrap ul.part-list li {
        width: 45%;
        margin: 2%;
    }
    .part-wrap label p {
        line-height: 1.3;
        font-size: 14px;
        padding: 10px 5px 12px;
        color: #222;
    }
    .plan-wrap label p span {
        text-align: left;
    }
    .estimate-wrap ul.part-list {
        margin: 0 auto 40px;
    }
    .estimate-wrap ul.floor-list {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        margin: 0 auto 40px;
    }
    .estimate-wrap ul.floor-list li {
        width: 31%;
        margin: 1%;
    }
    .estimate-wrap ul.area-list {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        margin: 0 auto 40px;
    }
    .estimate-wrap ul.area-list li {
        width: 31%;
        margin: 1%;
    }
    input.calculation {
        font-size: 22px;
        width: 95%;
        padding: 15px 10px;
    }
    .result-box {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        margin: 30px auto 10px;
        align-items: center;
    }
    .result-box .left {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 60px;
    }
    .result-box .left p {
        color: #ffed18;
        padding: 3px 10px 6px;
        font-size: 18px;
        font-weight: 600;
    }
    .result-box .center {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 72%;
        border-top: none;
        border-left: 2px solid #555;
        border-bottom: 2px solid #555;
        height: 60px;
    }
    .result-box .center p {
        padding: 5px 5px;
        font-size: 26px;
    }
    .result-box .right {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 28%!important;
        height: 60px;
    }
    .result-box .right p {
        padding: 5px 5px;
        font-size: 16px;
    }
    .result-box .right p span {
        font-size: 0.4em;
        letter-spacing: 0.05em;
    }
    .caution-txt {
        width: 95%;
        display: block;
        margin: 30px auto 30px;
    }
    .caution-txt p {
        font-size: 13px;
    }
    .message-wrap {
        width: 100%;
        flex-wrap: wrap;
        padding: 15px 15px 20px;
    }
    .message-wrap p {
        font-size: 15px!important;
        letter-spacing: 1px;
    }
    .area-wrap label p {
        font-size: 14px;
        padding: 20px 10px 20px;
    }
    .year-wrap label p, .joint-wrap label p {
        font-size: 14px;
        padding: 20px 10px 20px;
    }
    .floor-wrap label p {
        font-size: 14px;
        padding: 14px 15px 15px;
    }
    .estimate-wrap ul.year-list li, .estimate-wrap ul.joint-list li {
        width: 33%;
    }
    .part-container p.caution, .area-container p.caution, .joint-container p.caution {
        text-align: left;
        font-size: 12px;
        line-height: 1.4;
        margin: 0 auto 20px;
    }
    .top-area-kenmei {
        width: 95%;
        margin: 0px auto 0px;
    }
    h3.area-name01 {
        font-size: 15px!important;
        margin: 0px auto 15px!important;
        padding: 10px 10px 11px;
    }
    h3.area-name02 , h3.area-name03 , h3.area-name04 , h3.area-name05 , h3.area-name06 , h3.area-name07{
        font-size: 15px!important;
        margin: 10px auto 15px!important;
        padding: 10px 10px 11px;
    }
    .top-area-kenmei .stafflink-unit {
        margin: 0 0 15px;
        white-space: nowrap;
        font-size: 14px;
        display: inline-block;
        padding-right: 15px;
    }
    section.top-search h2 {
        font-size: 20px;
        line-height: 1.3;
        padding: 40px 10px 25px!important;
    }
    section.top-search {
        position: relative;
        padding: 50px 0 0px;
    }
    .result-box .left p span {
        color: #fff;
        font-size: 14px;
    }
    .paint-ex {
        width: 95%;
        margin: 0 auto 0px;
    }
    .paint-ex p {
        font-size: 12px;
        line-height: 1.6;
    }
    .message-wrap .left , .message-wrap .right{
        width: 100%;
        margin: 0 auto 20px;
    }
    .message-wrap .right button {
        font-size: 16px;
        padding: 15px 3.0em;
    }
    .area-container p.caution a, .joint-container p.caution a {
        cursor: help;
        color: #333;
        font-size: 13px;
        margin: 10px 0 0;
        display: inline-block;
    }
    .modal-box .inner h4 , .modal-box02 .inner h4 , .modal-box03 .inner h4 , .modal-box04 .inner h4 , .modal-box05 .inner h4 , .modal-box06 .inner h4{
        font-size: 20px;
    }
    .nobeyuka-wrap img {
        width: 70%;
        max-width: 100%;
    }
    .nobeyuka-wrap p {
        width: 100%;
        font-size: 13px;
    }
    .modal-box .inner , .modal-box02 .inner , .modal-box03 .inner , .modal-box04 .inner , .modal-box05 .inner , .modal-box06 .inner {
        padding: 30px 15px;
    }
    .nobeyuka-wrap , .meji-wrap{
        margin: 0 auto 20px;
    }
    .meji-wrap img {
        width: 45%;
    }
    .meji-wrap p {
        width: 100%;
        margin: 15px auto 0;
        font-size: 13px;
    }

    p.blink {
        font-size: 13px;
    }
    .top-area-kenmei .stafflink-unit a {
        font-size: 14px;
    }
    .rank-wrap {
        width: 100%;
        display: block;
        margin: 30px auto 0px;
        border: 2px #f99b31 solid;
        border-radius: 10px;
        padding: 15px;
    }
    .rank-wrap h3{
        line-height: 1.4;
        font-size: 18px;
        margin: 0 auto 20px;
        padding: 10px 5px 25px;
    }
    .rank-wrap p {
        font-size: 14px;
        line-height: 1.8;
    }
    .rank-wrap img {
        max-width: 100%;
        margin: 15px auto;
        width: 100%;
    }
    .result-table tr {
        border-bottom: none;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }
    .result-table th.toryo-name p {
        font-size: 18px;
        padding: 10px 10px;
    }
    .result-table th.toryo-name {
        width: 100%;
    }
    .result-table td.price {
        width: 70%;
    }
    .result-table td.price p {
        font-size: 32px;
        font-weight: 700;
        padding: 5px 0 10px;
    }
    .result-table td.en {
        width: 25%;
    }
    .result-table td.en p {
        font-size: 15px;
        padding: 7px 0 0;
    }
    .result-table td.en p span {
        font-size: 12px;
    }
    .result-table td.result-bg {
        background: none;
    }
    .result-table th.toryo-name:after{
        display: none;
    }

}
@media screen and (max-width: 320px) {
    section#estimate h2 {
        font-size: 18px;
    }

    .estimate-wrap h3 {
        line-height: 1.4;
        font-size: 15px;
    }
    .plan-wrap label p {
        font-size: 11px;
    }
    .part-wrap label p,.floor-wrap label p {
        font-size: 12px;
    }
    .message-wrap p {
        font-size: 15px;
        line-height: 1.6;
    }
    .area-wrap label p {
        font-size: 14px;
        padding: 35px 11px 30px;
    }
    section.greeting p {
        font-size: 14px;
        margin: 0 auto 20px;
        line-height: 1.9;
    }
    .hosho-wrap p {
        font-size: 14px;
        line-height: 1.8;
        margin-bottom: 15px;
    }
    .result-box .right p {
        padding: 5px 2px;
        font-size: 13px;
    }
    .result-box .right p span {
        font-size: 0.3em;
        letter-spacing: 0em;
    }
    .estimate-wrap h3 {
        line-height: 1.4;
        font-size: 14px;
    }
    .message-wrap .right button {
        font-size: 15px;
        padding: 15px 2em;
    }
}
/* -----------------------------------トップページ工事後の流れ----------------------------------- */
section.flow{
    position: relative;
    padding: 20px 0 20px;
}
img.flow-header{
    display: block;
    max-width: 100%;
    margin: 0 auto 70px;
}
.flow-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    margin: 0 auto 50px;
}
.flow-wrap img.flow-img01{
    max-width: 100%;
    width: 28%;
}
.flow-wrap img.flow-img02{
    max-width: 100%;
    width: 6%;
}
.flow-txt {
    width: 62%;
}
.flow-txt h3{
    font-size: 22px;
    letter-spacing: 2px;
}
.flow-txt h3 span{
    display: block;
    font-size: 22px;
    background: #f29225;
    color: #fff;
    font-weight: 500;
    padding: 10px 10px 12px;
    margin: 10px 0 15px;
    text-shadow: 1px 1px 1px rgb(0 0 0 / 20%);
}
.flow-txt p span{
    font-weight: 500;
    background: linear-gradient(transparent 70%, #ffb3b3 70%);
}
@media screen and (min-width:768px) and ( max-width:1024px) {
    .flow-wrap img.flow-img01 {
        width: 25%;
    }
    .flow-wrap img.flow-img02 {
        width: 10%;
    }
    .flow-txt{
        width: 60%;
    }
    .flow-txt h3{
        font-size: 18px;
    }
    .flow-txt p{
        font-size: 14px;
    }
    .flow-txt h3 span {
        font-size: 18px;
        line-height: 1.3;
    }
}
@media screen and (max-width: 767px) {
    section.flow {
        position: relative;
        padding: 0px 0 75px;
    }
    img.flow-header {
        display: block;
        max-width: 100%;
        margin: 0 auto 30px;
    }
    .flow-wrap {
        margin: 0 auto 20px;
    }
    .flow-wrap img.flow-img01 {
        max-width: 100%;
        width: 75%;
        margin: 0 auto 20px;
        display: block;
    }
    .flow-wrap img.flow-img02 {
        display: block;
        width: 26%;
        margin: 0 auto 60px;
        transform: rotate(90deg);
    }
    .flow-txt {
        width: 100%;
    }
    .flow-txt h3 {
        font-size: 18px;
        letter-spacing: 2px;
        line-height: 1.4;
    }
    .flow-txt h3 span {
        line-height: 1.3;
        font-size: 18px;
    }
    .flow-txt p {
        font-size: 14px;
    }
}


/* -----------------------------------水道ランキングページ----------------------------------- */
.rank-table-wrap {
    overflow-x: auto;
    margin: 0 auto 40px;
}
.rank-table {
    width: 100%;
    border: 1px solid #a9a9a9;
    border-collapse: collapse;
    display: block;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
}
.rank-table th,
.rank-table td {
    border: 1px solid #ccc;
    padding: 10px;
}
.rank-table th {
    font-size: 18px;
    font-family: 'M PLUS Rounded 1c', sans-serif;
    padding: 15px;
    background: #bae0f5;
    color: #003e61;
    width: 180px;
    min-width: 180px;
}
.rank-table td{
    font-size: 15px;
    text-align: center;
    width: 180px;
    min-width: 180px;
}
.rank-table td.c-name img{
    width: 200px;
    display: block;
    margin: 0 auto;
    max-width: 100%;
    height: auto;
}
.rank-table td img{
    width: 40px;
    display: block;
    margin: 5px auto 5px;
    height: auto;
}
.rank-table td.c-name a{
    text-align: center;
    margin: 10px auto;
    display: block;
    font-size: 15px;
    text-decoration: underline!important;
    color: #006ca3;
}
.rank-table td.c-name a:hover{
    text-decoration: none!important;
}
td.good {
    background: #fffaf2;
}
.ranking-table {
    display: block;
    margin: 40px auto;
}
.ranking-wrap{
    border: 1px solid #ccc;
    border-radius: 15px;
    position: relative;
    margin: 0 auto 50px;
    padding: 25px;
}
.ranking-wrap h3{
    position: relative;
    text-align: center;
    font-size: 28px;
    font-weight: 700;
    margin: 35px auto 20px;
    padding: 5px 5px;
    font-family: 'M PLUS Rounded 1c', sans-serif;
    border-top: 2px solid #f99b31;
    border-bottom: none;
}
.ranking-wrap h3:before{
    content: "おすすめ水道修理業者ランキング";
    position: absolute;
    top: -40px;
    left: 0;
    font-size: 20px;
}
.ranking-wrap h3:after{
    content: none;
}
.ranking-wrap img{
    display: block;
    margin:0 auto 30px;
    height: auto;
}
.ranking-recommend,.ranking-voice,.ranking-info {
    margin: 0 auto 30px;
}
.ranking-recommend h4,.ranking-voice h4,.ranking-info h4,.ranking-contact h4{
    font-family: 'M PLUS Rounded 1c', sans-serif;
    font-size: 20px;
    padding: 10px 15px 12px;
    border-top: 2px solid #f99b31;
    border-bottom: 1px solid #f99b31;
    line-height: 1;
    margin: 0 auto 15px;
}
.ranking-recommend h4 i,.ranking-voice h4 i,.ranking-info h4 i,.ranking-contact h4 i{
    color: #f99b31;
}
.ranking-recommend p,.ranking-voice p{
    font-size: 16px;
}
.ranking-info table{
    border: 1px solid #ccc;
    border-collapse: collapse;
    margin: 30px auto 40px;
}
.ranking-info table tr{
    border-bottom: 1px solid #ccc;
}
.ranking-info table tr th{
    width: 20%;
    font-size: 16px;
    border-right: 1px solid #ccc;
    padding: 15px;
    background: #f9f9f9;
}
.ranking-info table tr td{
    width: 80%;
    font-size: 15px;
    padding: 15px;
    line-height: 1.8;
}
.ranking-voice-inner{
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    position: relative;
    margin: 30px auto;
}
.ranking-voice-inner .rv01{
    width: 12%;
}
.ranking-voice-inner .rv01 img{
    margin: 0 auto;
}
.ranking-voice-inner .rv02{
    width: 80%;
    position: relative;
    display: inline-block;
    margin: 0 0 0 15px;
    padding: 15px 15px;
    min-width: 120px;
    max-width: 100%;
    color: #555;
    font-size: 16px;
    background: #FFF;
    border: solid 2px #ccc;
    box-sizing: border-box;
    border-radius: 15px;
}
.ranking-voice-inner .rv02:before {
    content: "";
    position: absolute;
    top: 50%;
    left: -24px;
    margin-top: -12px;
    border: 12px solid transparent;
    border-right: 12px solid #FFF;
    z-index: 2;
}
.ranking-voice-inner .rv02:after {
    content: "";
    position: absolute;
    top: 50%;
    left: -29px;
    margin-top: -14px;
    border: 14px solid transparent;
    border-right: 14px solid #ccc;
    z-index: 1;
}
.ranking-voice-inner .rv02 p{
    font-family: 'M PLUS Rounded 1c', sans-serif;
    font-size: 16px;
    margin: 0 auto;
}

.ranking-contact-inner {
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin: 30px auto 15px;
}
.ranking-contact-inner .rc01{
    width: 45%;
    text-align: center;
}
.ranking-contact-inner .rc01 a{
    font-family: 'M PLUS Rounded 1c', sans-serif;
    font-size: 36px;
    font-weight: 700;
}
.ranking-contact-inner .rc01 a i{
    color: #f99b31;
}
.ranking-contact-inner .rc02{
    width: 45%;
}
.ranking-contact-inner .rc02 a{
    font-size: 18px;
    font-family: 'M PLUS Rounded 1c', sans-serif;
    font-weight: 600;
    line-height: 1.6;
    color: #fff;
    text-align: center;
    display: block;
    background: #f99b31;
    background: linear-gradient(-45deg, rgb(255 150 33) 0%, rgb(255 130 0) 100%);
    padding: 15px 15px;
    margin: 0 auto 0;
    border-radius: 100px;
    text-shadow: 1px 1px 0 rgb(0 0 0 / 20%);
    box-shadow: 0px 6px 0 #b96309;
    transition: 0.2s;
}
.ranking-contact-inner .rc02 a:hover {
    box-shadow: 0px 2px 0 #b96309;
    transform: translate(0,4px);
}
.ranking-voice blockquote{
    margin: 0;
    border-left: none;
    padding: 0;
}
.sumiyasu-wrap{
    border: 1px solid #ccc;
    border-radius: 15px;
    position: relative;
    margin: 0 auto 50px;
    padding: 35px 25px 25px;
}
.sumiyasu-wrap h3{
    position: relative;
    text-align: center;
    font-size: 20px;
    font-weight: 700;
    margin: 0px auto 30px;
    padding: 0px 5px;
    font-family: 'M PLUS Rounded 1c', sans-serif;
    border-bottom: none;
}
.sumiyasu-wrap h3:after {
    content: none;
}
.sumiyasu-wrap h3 img{
    display: block;
    max-width: 400px;
    margin: 20px auto 0;
    height: auto;
}
.sumiyasu-txt01{
    position: relative;
}
.sumiyasu-txt01 p {
    font-family: 'M PLUS Rounded 1c', sans-serif;
    font-size: 18px;
    line-height: 1.9;
}
.sumiyasu-txt01 p span {
    color: #ff565e;
    font-weight: 700;
}
.sumiyasu-merit-wrap{
    position: relative;
    margin: 40px auto 0;
}
.sumiyasu-merit-wrap h3{
    display: block;
    margin: 0 auto;
    background: #ff565e;
    padding: 10px;
    font-size: 22px;
    color: #fff;
    text-shadow: 1px 1px 1px rgb(0 0 0 / 20%);
}
.sumiyasu-merit-wrap h3:after{
    content: none;
}
.sumiyasu-merit-wrap h4{
    color: #ff565e;
    font-family: 'M PLUS Rounded 1c', sans-serif;
    font-size: 20px;
    letter-spacing: 1px;
    border-bottom: #ff565e solid 1px;
    margin: 35px auto 10px;
    padding: 0 0 10px;
}
.sumiyasu-merit-wrap p{
    font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
    font-size: 16px;
    margin: 0 auto 1em;
}
.sumiyasu-merit-wrap p span {
    color: #ff565e;
    font-weight: 700;
}
.sumiyasu-merit-wrap img{
    display: block;
    margin: 35px auto;
    height: auto;
}
.sumiyasu-txt02{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    margin: 40px auto 20px;
}
.sumiyasu-txt02-left{
    width: 30%;
}
.sumiyasu-txt02-left img{
    display: block;
    max-width: 100%;
    margin: 0;
}
.sumiyasu-txt02-right {
    width: 65%;
}
.sumiyasu-txt02-right p{
    font-family: 'M PLUS Rounded 1c', sans-serif;
    font-size: 18px;
    line-height: 1.9;
    margin: 0;
}
.sumiyasu-txt02-right p span {
    color: #ff565e;
    font-weight: 700;
}
.sumiyasu-txt02-bottom{
    width: 100%;
    margin: 40px auto 0;
}
.sumiyasu-txt02-bottom a img {
    margin: 0 auto;
    max-width: 500px;
}
.sumiyasu-txt02-bottom a img:hover{
    transition: 0.2s;
    opacity: 0.8;
}
p.s-price-ctn{
    display: block;
    margin: -30px auto 0;
    text-align: right;
    font-size:15px;
}
@media screen and (min-width:768px) and ( max-width:1024px) {
    .rank-table td {
        font-size: 13px;
        width: 160px;
        min-width: 160px;
    }
    .rank-table td.c-name a {
        font-size: 14px;
    }
    .rank-table th {
        font-size: 16px;
        width: 160px;
        min-width: 160px;
    }
    .ranking-wrap h3:before {
        top: -30px;
        left: 0;
        font-size: 16px;
    }
    .ranking-wrap h3 {
        font-size: 24px;
        margin: 25px auto 20px;
    }
    .ranking-recommend h4, .ranking-voice h4, .ranking-info h4, .ranking-contact h4 {
        font-size: 16px;
    }
    .ranking-recommend p, .ranking-voice p {
        font-size: 14px;
    }
    .ranking-info table tr td {
        width: 70%;
        font-size: 13px;
        padding: 10px;
    }
    .ranking-info table tr th {
        width: 30%;
        font-size: 14px;
        padding: 10px;
    }
    .ranking-info table {
        margin: 20px auto 30px;
    }
    .ranking-voice-inner .rv02 p {
        font-size: 13px;
    }
    .ranking-voice blockquote{
        margin: 0;
    }
    .ranking-voice-inner {
        margin: 20px auto;
    }
    .ranking-contact-inner .rc01 a {
        font-size: 20px;
    }
    .ranking-contact-inner .rc02 {
        width: 50%;
    }
    .ranking-contact-inner .rc02 a {
        font-size: 14px;
        padding: 10px 5px;
    }
    .ranking-contact-inner {
        margin: 20px auto 5px;
    }
    .ranking-wrap {
        margin: 0 auto 30px;
        padding: 20px;
    }

    .sumiyasu-wrap h3 {
        font-size: 12px;
    }
    .sumiyasu-wrap h3 img {
        display: block;
        max-width: 280px;
    }
    .sumiyasu-txt01 p {
        font-size: 15px;
    }
    .sumiyasu-merit-wrap h3 {
        font-size: 18px;
    }
    .sumiyasu-merit-wrap img {
        margin: 25px auto;
    }
    .sumiyasu-merit-wrap h4 {
        font-size: 16px;
        margin: 30px auto 10px;
    }
    .sumiyasu-merit-wrap p{
        font-size: 14px;
    }
    .sumiyasu-merit-wrap {
        margin: 25px auto 0;
    }
    .sumiyasu-txt02-right p {
        font-size: 15px;
    }
    .sumiyasu-txt02-left {
        width: 35%;
    }
    .sumiyasu-txt02-right {
        width: 60%;
    }
    .sumiyasu-txt02 {
        margin: 25px auto 5px;
    }
    .sumiyasu-txt02-bottom a img {
        margin: 0 auto;
        max-width: 350px;
    }
    .sumiyasu-txt02-bottom {
        width: 100%;
        margin: 25px auto 0;
    }
    p.s-price-ctn {
        margin: -20px auto 0;
        font-size: 14px;
    }
}
@media screen and (max-width: 767px) {
    .rank-table th {
        font-size: 13px;
        padding: 10px;
        width: 140px;
        min-width: 140px;
    }
    .rank-table td.c-name a {
        font-size: 12px;
    }
    .rank-table td {
        font-size: 11px;
        width: 135px;
        min-width: 135px;
    }
    .ranking-wrap {
        border-radius: 10px;
        margin: 0 auto 40px;
        padding: 15px;
    }
    .ranking-wrap h3 {
        font-size: 20px;
        margin: 25px auto 20px;
    }
    .ranking-wrap h3:before {
        top: -25px;
        font-size: 12px;
    }
    .ranking-recommend h4, .ranking-voice h4, .ranking-info h4, .ranking-contact h4 {
        font-size: 16px;
        padding: 10px 10px 11px;
    }
    .ranking-recommend p, .ranking-voice p {
        font-size: 15px;
    }
    .ranking-recommend, .ranking-voice, .ranking-info {
        margin: 0 auto 20px;
    }
    .ranking-info table tr th {
        width: 25%;
        font-size: 13px;
        padding: 10px;
    }
    .ranking-info table tr td {
        width: 75%;
        font-size: 13px;
        padding: 10px;
        line-height: 1.7;
    }
    .ranking-voice blockquote{
        margin: 0;
    }
    .ranking-voice-inner .rv02 p {
        font-size: 14px;
    }
    .ranking-voice-inner {
        margin: 20px auto;
    }
    .ranking-voice-inner .rv01 {
        width: 15%;
    }
    .ranking-voice-inner .rv02 {
        width: 80%;
        margin: 0 0 0 15px;
        padding: 10px 10px;
        font-size: 14px;
        border-radius: 10px;
    }
    p.inyou {
        margin: -10px auto 0px;
        font-size: 12px!important;
    }
    .ranking-info table {
        margin: 20px auto 30px;
    }
    .ranking-contact-inner {
        display: flex;
        flex-wrap: wrap;
        margin: 0px auto 20px;
    }
    .ranking-contact-inner .rc01 {
        width: 100%;
        margin: 0 auto 15px;
    }
    .ranking-contact-inner .rc01 a {
        font-size: 28px;
    }
    .ranking-contact-inner .rc02 {
        width: 100%;
    }
    .ranking-contact-inner .rc02 a {
        font-size: 15px;
        padding: 10px 10px;
        margin: 0 auto 0;
    }
    .sumiyasu-wrap h3 {
        font-size: 13px;
    }
    .sumiyasu-wrap h3 img {
        margin: 20px auto 0;
        max-width: 90%;
    }
    .sumiyasu-txt01 p {
        font-size: 15px;
    }
    .sumiyasu-merit-wrap h3 {
        font-size: 18px;
    }
    .sumiyasu-merit-wrap {
        margin: 30px auto 0;
    }
    .sumiyasu-merit-wrap img {
        margin: 15px auto;
    }
    .sumiyasu-merit-wrap h4 {
        font-size: 16px;
        margin: 25px auto 10px;
    }
    .sumiyasu-merit-wrap p {
        font-size: 14px;
    }
    .sumiyasu-txt02-bottom a img {
        max-width: 100%;
    }
    .sumiyasu-txt02-left {
        width: 50%;
        margin: 0 auto;
    }
    .sumiyasu-txt02-right {
        width: 100%;
    }
    .sumiyasu-txt02-right p {
        font-size: 16px;
    }
    .sumiyasu-wrap {
        padding: 25px 15px 25px;
    }
    .sumiyasu-txt02 {
        margin: 0px auto 0px;
    }
    .sumiyasu-txt02-bottom {
        width: 100%;
        margin: 15px auto 0;
    }
    p.s-price-ctn {
        display: block;
        margin: -10px auto 0;
    }
}


/* -----------------------------------職人紹介シングルページ----------------------------------- */
.shokunin-intro {
    display: block;
    margin: 0 auto 50px;
}
.shokunin-content{
    position: relative;
    padding: 20px 15px 20px;
    border: 1px solid #ccc;
    margin: 0 auto 80px;
}
.shokunin-content h2 {
    position: relative;
    letter-spacing: 3px;
    font-size: 28px;
    font-weight: 600;
    text-align: center;
    text-shadow: 1px 1px 1px rgb(0 0 0 / 10%);
}
.shokunin-content h2 span{
    position: relative;
    font-size: 18px;
    letter-spacing: 2px;
    display: block;
    text-align: right;
    padding: 0 0 15px;
    margin: 0 0 15px;
    border-bottom: 1px solid #06C2A5;
    text-shadow: none;
}
.shokunin-content h2 span:after {
    position: absolute;
    content: " ";
    display: block;
    border-bottom: solid 1px #F29225;
    bottom: -1px;
    width: 25%;
}

.shokunin-osusume{
    position: relative;
    margin: 50px auto 50px;
}
.shokunin-osusume-inner{
    display: block;
    position: relative;
    padding: 20px 20px;
    border: solid 2px #17b49b;
    border-radius: 5px;
}
.shokunin-osusume-inner h3{
    position: absolute;
    display: inline-block;
    top: -13px;
    left: 10px;
    padding: 0 9px;
    line-height: 1;
    font-size: 18px;
    background: #FFF;
    color: #17b49b;
    font-weight: 600;
}
.shokunin-osusume-inner h3 span {
    padding-right: 0.5rem;
}
.shokunin-osusume-inner ul{
    display: flex;
    justify-content: space-between;
    align-items: normal;
}
.shokunin-osusume-inner ul li {
    width: 32%;
    color: #e58316;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
    text-align: center;
    background: #fdf9e5;
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.shokunin-description{
    position: relative;
    margin: 50px auto 50px;
}
.shokunin-description h3 , .shokunin-info h3{
    font-size: 20px;
    line-height: 1.4;
    letter-spacing: 1px;
    padding: 0 10px 12px;
    margin: 0 auto 20px;
    border-bottom: 2px solid #17b49b;
    position: relative;
}
.shokunin-description h3:after , .shokunin-info h3:after{
    position: absolute;
    content: " ";
    display: block;
    border-bottom: solid 2px #F29225;
    bottom: -2px;
    width: 25%;
}
.shokunin-description p {
    padding: 0 15px;
    line-height: 1.9;
}

.shokunin-info{
    position: relative;
    margin: 0 auto 50px;
}
.shokunin-info table{
    width: 100%;
    margin: 25px auto 0;
    border-top: 1px #ccc solid;
    border-left: 1px #ccc solid;
    border-right: 1px #ccc solid;
}
.shokunin-info table tr{
    border-bottom: 1px #ccc solid;
}
.shokunin-info table tr th{
    padding: 15px;
    width: 30%;
    font-size: 14px;
    background: #f4f4f4;
    border-right: 1px #ccc solid;
}
.shokunin-info table tr td{
    padding: 15px;
    width: 70%;
    font-size: 14px;
    line-height: 1.5;
}
.shokunin-map {
    max-width: 100%;
    display: block;
    position: relative;
    width: 100%;
    margin: 0 auto 50px;
}
.shokunin-map iframe {
    width: 100%;
    height: 350px;
    border-radius: 15px;
    box-shadow: 3px 3px 3px rgb(0 0 0 / 20%);
}
.shokunin-map:empty {
    display: none;
}
.shokunin-voice {
    position: relative;
    margin: 0 auto 100px;
}
.voice-wrap{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    margin: 0 auto 0px;
}
.toggle_contents {
    border-bottom: 1px solid #ccc;
    width: 90%;
    margin: 0 auto 10px;
}
.toggle_title {
    position: relative;
    padding: 15px;
    cursor: pointer;
    line-height: 1.4;
    font-size: 20px;
    letter-spacing: 1px;
}
.toggle_title p{
    line-height: 1.4;
    font-size: 20px;
    letter-spacing: 1px;
    display: inline;
    font-weight: 600;
}
.toggle_title span.name{
    color: #555;
    font-size: 15px;
    padding-left: 1.5em;
}
.toggle_contents .voice-inner{
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    padding: 0 0 15px;
}
.toggle_contents .voice-inner img{
    width: 22%;
    max-width: 100%;
}
.toggle_contents .voice-inner p{
    width: 70%;
    font-size: 14px;
    line-height: 1.8;
    padding: 0 10px;
}
.toggle_btn {
	position: absolute;
	top: 50%;
	right: 20px;
	transform: translateY(-50%);
	background: #00aecc;
	display: block;
	width: 24px;
	height: 24px;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	border-radius: 50%;
}
.toggle_btn:before, .toggle_btn:after {
	display: block;
	content: '';
	background-color: #fff;
	position: absolute;
	width: 10px;
	height: 2px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.toggle_btn:before {
	width: 2px;
	height: 10px;
}
.toggle_title.selected .toggle_btn:before {
	content: normal;
}
.toggle_contents dd {
	display: none;
}
.shokunin-movie{
    position: relative;
    margin: 0 auto 100px;
}
.movie-wrap {
    position: relative;
    display: block;
    margin: 0 auto;
    text-align: center;
    width: 100%;
    padding-top: 56.25%;
}
.movie-wrap iframe{
    max-width: 100%;
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    border: 2px solid #000;
    box-shadow: 5px 5px 0 #000;
}
.movie-wrap:empty{
    display: none;
}
.shokunin-works{
    position: relative;
    margin: 0 auto 70px;
}
.shokunin-works-inner{
    position: relative;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.shokunin-works dl{
    display: flex;
    margin: 0 auto 0;
    width: 90%;
    border-bottom: 1px solid #ccc;
}
.shokunin-works dl dt{
    width: 22%;
    padding: 14px 10px 10px;
    font-size: 14px;
    font-weight: 600;
    color: #555;
}
.shokunin-works dl dd{
    width: 77%;
    padding: 12px 10px;
}
.shokunin-works dl dd a{
    color: #222;
    font-size: 15px;
}
.shokunin-works dl dd a:hover{
    transition: 0.2s;
    color: rgb(219, 3, 3);
}
@media screen and (min-width:768px) and ( max-width:1024px) {
    .shokunin-intro p{
        font-size: 13px;
    }
    .shokunin-content h2 span {
        font-size: 14px;
        padding: 0 0 10px;
        margin: 0 0 10px;
    }
    .shokunin-content h2 {
        font-size: 24px;
    }

    .shokunin-description h3, .shokunin-info h3 {
        font-size: 18px;
    }
    .shokunin-description p {
        font-size: 14px;
    }
    .shokunin-info table tr th , .shokunin-info table tr td{
        padding: 12px;
        font-size: 13px;
    }
    .shokunin-map iframe {
        height: 250px;
    }
    .toggle_title {
        position: relative;
        padding: 15px;
        cursor: pointer;
        line-height: 1.4;
        font-size: 16px;
        letter-spacing: 1px;
    }
    .toggle_title p{
        line-height: 1.4;
        font-size: 16px;
        letter-spacing: 1px;
    }
    .toggle_title span.name {
        font-size: 12px;
    }
    .toggle_contents .voice-inner p{
        font-size: 11px;
        line-height: 1.6;
        padding: 0 10px;
    }
    .shokunin-works dl dd a {
        font-size: 14px;
    }
    .shokunin-osusume-inner ul li {
        font-size: 12px;
    }
}
@media screen and (max-width: 767px) {
    section.shokunin-column {
        position: relative;
        padding: 0;
    }
    .shokunin-content {
        margin: 0 auto 70px;
    }
    .shokunin-intro p{
        font-size: 15px;
    }
    .shokunin-content h2 span {
        font-size: 15px;
        padding: 0 0 10px;
        margin: 0 0 10px;
    }
    .shokunin-content h2 {
        letter-spacing: 1.5px;
        font-size: 24px;
        line-height: 1.3;
    }

    .shokunin-description h3, .shokunin-info h3 {
        font-size: 18px;
        line-height: 1.3;
        letter-spacing: 1px;
        padding: 0 5px 12px;
        margin: 0 auto 15px;
    }
    .shokunin-description p {
        padding: 0 0px;
        line-height: 1.9;
        font-size: 15px;
    }
    .shokunin-info table tr th , .shokunin-info table tr td{
        padding: 12px 10px 12px 10px;
        font-size: 13px;
    }
    .shokunin-map iframe {
        height: 220px;
    }
    .shokunin-movie {
        position: relative;
        margin: 0 auto 80px;
    }
    .shokunin-voice{
        position: relative;
        margin: 0 auto 80px;
    }
    .shokunin-movie{
        position: relative;
        margin: 0 auto 80px;
    }
    .toggle_contents {
        border-bottom: 1px solid #ccc;
        width: 95%;
        margin: 0 auto 10px;
    }
    .toggle_title {
        font-size: 15px;
        padding: 12px;
    }
    .toggle_title p {
        font-size: 15px;
    }
    .toggle_title span.name {
        font-size: 11px;
    }
    .toggle_contents .voice-inner {
        display: flex;
        flex-wrap: wrap;
    }
    .toggle_contents .voice-inner img {
        width: 50%;
        max-width: 100%;
    }
    .toggle_contents .voice-inner p {
        width: 100%;
        font-size: 14px;
        line-height: 1.8;
        padding: 15px 5px 0;
    }
    .shokunin-works-inner {
        position: relative;
        padding: 0.5em 1em 1em;
        flex-wrap: wrap;
    }
    .shokunin-works-inner:before, .shokunin-works-inner:after {
        width: 30px;
        height: 40px;
    }
    .shokunin-works dl {
        width: 100%;
    }
    .shokunin-works dl {
        align-items: center;
    }
    .shokunin-works dl dt {
        padding: 12px 10px 9px;
        font-size: 11px;
    }
    .shokunin-works dl dd a {
        font-size: 13px;
    }

    .shokunin-works {
        position: relative;
        margin: 0 auto 40px;
    }
    .shokunin-osusume-inner h3 {
        top: -11px;
        font-size: 16px;
    }
    .shokunin-osusume-inner h3 span {
        padding-right: 0.5rem;
    }
    .shokunin-osusume-inner ul {
        display: flex;
        flex-wrap: wrap;
    }
    .shokunin-osusume-inner ul li {
        width: 100%;
        font-size: 14px;
        text-align: left;
        margin: 5px 0;
        justify-content: left;
        line-height: 1.5;
    }
    .shokunin-osusume-inner {
        padding: 17px 12px 10px;
    }
    .shokunin-intro {
        margin: 0 auto 30px;
    }
}
section.search-container {
    position: relative;
    padding: 0 0 90px;
}
.search-wrap {
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: flex-start;
}
@media screen and (max-width: 767px) {
    section.search-container {
        position: relative;
        padding: 0 0 60px;
    }
}
/* -----------------------------------職人検索（都道府県）----------------------------------- */
section.pref-column {
    position: relative;
    padding: 0 0 50px;
}
.pref-content {
    position: relative;
    padding: 20px 15px 15px;
    border: 1px solid #ccc;
    margin: 0 auto 75px;
}
.pref-content h2 {
    position: relative;
    letter-spacing: 3px;
    font-size: 28px;
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
    text-shadow: 1px 1px 1px rgb(0 0 0 / 15%);
}
.pref-content h2 span {
    position: relative;
    font-size: 18px;
    letter-spacing: 2px;
    display: block;
    text-align: right;
    padding: 0 0 15px;
    margin: 0 0 15px;
    border-bottom: 1px solid #06C2A5;
}
.pref-content h2 span:after {
    position: absolute;
    content: " ";
    display: block;
    border-bottom: solid 1px #F29225;
    bottom: -1px;
    width: 25%;
}
.pref-description {
    position: relative;
    margin: 50px auto 25px;
}
.pref-description h3{
    font-size: 20px;
    line-height: 1.4;
    letter-spacing: 1px;
    padding: 0 10px 12px;
    margin: 0 auto 20px;
    border-bottom: 2px solid #06C2A5;
    position: relative;
    text-shadow: 1px 1px 1px rgb(0 0 0 / 15%);
}
.pref-description h3:after {
    position: absolute;
    content: " ";
    display: block;
    border-bottom: solid 2px #F29225;
    bottom: -2px;
    width: 25%;
}
.pref-description p {
    padding: 0 15px;
    line-height: 1.9;
}
.pref-info {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-around;
    margin: 50px auto 0;
}
.pref-info .left{
    width: 30%;
}
.pref-info .left img{
    max-width: 100%;
}
.pref-info .right {
    width: 65%;
}
.pref-info .right table{
    width: 100%;
    margin: 0px auto 0;
    border-top: 1px #ccc solid;
    border-left: 1px #ccc solid;
    border-right: 1px #ccc solid;
}
.pref-info .right table tr {
    border-bottom: 1px #ccc solid;
}
.pref-info .right table tr th {
    padding: 15px;
    width: 30%;
    font-size: 14px;
    background: #f4f4f4;
    border-right: 1px #ccc solid;
}
.pref-info .right table tr td {
    padding: 15px;
    width: 70%;
    font-size: 14px;
    line-height: 1.5;
}
.sorry-wrap {
    text-align: center;
    display: block;
    margin: 0 auto 80px;
}
.sorry-wrap img{
    max-width: 100%;
    width: 220px;
    margin: 25px auto;
}
@media screen and (min-width:768px) and ( max-width:1024px) {
    .pref-description h3{
        font-size: 18px;
    }
    .pref-description p {
        font-size: 14px;
    }
    .pref-info .right table tr th, .pref-info .right table tr td {
        padding: 12px;
        font-size: 12px;
    }
}
@media screen and (max-width: 767px) {
    section.pref-column {
        position: relative;
        padding: 0 0 50px;
    }
    .pref-content {
        margin: 0 auto 40px;
    }
    .pref-description h3{
        font-size: 18px;
        line-height: 1.3;
        letter-spacing: 1px;
        padding: 0 5px 12px;
        margin: 0 auto 15px;
    }
    .pref-description p {
        padding: 0 0px;
        line-height: 1.9;
        font-size: 15px;
    }
    .pref-info {
        margin: 30px auto 0;
    }
    .pref-info .right table tr th, .pref-info .right table tr td {
        padding: 12px 10px;
        font-size: 13px;
    }
    .pref-info .left {
        width: 100%;
    }
    .pref-info .left img {
        max-width: 100%;
        display: block;
        margin: 0 auto 30px;
        width: 250px;
    }
    .pref-info .right {
        width: 100%;
    }
    .pref-content h2 {
        letter-spacing: 1.5px;
        font-size: 22px;
    }
    .pref-content h2 span {
        font-size: 14px;
        padding: 0 0 10px;
        margin: 0 0 10px;
    }
}
section.works-column {
    position: relative;
    padding: 0px 0 90px;
}
.works-body {
    position: relative;
    padding: 25px 0 50px;
}
.works-body p{
    font-size: 16px;
    line-height: 1.9;
    margin: 0 auto 20px;
}
.works-body img{
    max-width: 100%;
    display: inline-block;
    margin: 0 auto 5px;
}
@media screen and (min-width:768px) and ( max-width:1024px) {
    .works-body {
        position: relative;
        padding: 25px 0 40px;
    }
    .works-body p {
        font-size: 15px;
    }
    .works-body img {
        width: 32%;
        height: 100%;
    }
}
@media screen and (max-width: 767px) {
    .works-body {
        position: relative;
        padding: 25px 0 25px;
    }
    .works-body p {
        font-size: 15px;
    }
    .works-body img {
        width: 49%;
        height: 100%;
    }
    section.works-column {
        position: relative;
        padding: 0px 0 40px;
    }
}


































/* -----------------------------------ブログカード----------------------------------- */
.blog-card {
    width: 70%;
    background-color: #fcfcfc;
    border: 1px solid #dddddd;
    word-wrap: break-word;
    margin: 20px 0 20px;
    padding: 0;
    box-sizing: border-box;
}
.blog-card:hover {
    background-color: #f4f4f4;
}
.blog-card a {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content: space-between;
    padding: 0 10px;
    align-items: center;
}
.blog-card-thumbnail {
    width: 20%;
}
.blog-card-thumbnail img {
    border: none;
    display: block;
    margin: 0 0 0px;
    max-width: 100%;
    width: 100%;
    object-fit: contain;
}
.blog-card-content {
    width: 77%;
}
.blog-card-title {
    font-size: 16px;
    font-weight: bold;
    line-height: 1.6;
    margin: 0 0 10px;
    letter-spacing: 1px;
    color: #222;
    text-shadow: 1px 1px 1px hsl(0deg 0% 0% / 10%);
}
.blog-card-excerpt {
    color: #333333;
    font-size: 14px;
    line-height: 1.5;
    display: none;
}
@media screen and (min-width:768px) and ( max-width:1024px) {
    .blog-card-title {
        font-size: 14px;
        line-height: 1.4;
    }
    .blog-card-excerpt {
        color: #333333;
        font-size: 12px;
        line-height: 1.5;
    }
}
@media only screen and (max-width: 767px) {
    .blog-card {
        width: 100%;
        background-color: #fcfcfc;
        border: 3px solid #dddddd;
    }
    .blog-card-title {
        margin: 0 0 0 10px;
        font-size: 14px;
        line-height: 1.4;
    }
    .blog-card-excerpt {
        display: none;
    }
}
@media only screen and (max-width: 767px) {
    .blog-card a {
        padding: 10px;
    }
    .blog-card-thumbnail{
        width: 20%;
    }
    .blog-card-content {
        width: 77%;
    }
    .blog-card-thumbnail {
        margin: 0;
    }
}
/* -----------------------------------メッセージページ----------------------------------- */
.message-column{

}
.message-content01 {
    position: relative;
    padding: 0 0 50px;
}
.message-column p{
    line-height: 1.9;
    font-size: 16px;
    margin: 0 auto 20px;
}
.message-content01 .headline{
    text-align: center;
    display: block;
    margin: 0 auto 25px;
}
.message-content01 .headline h2 {
    position: relative;
    display: inline-block;
    padding: 0 45px 0 55px;
    font-size: 30px;
    color: #ec8c20;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 1px;
    text-shadow: 1px 1px 1px rgb(0 0 0 / 10%);
}
.message-content01 .headline h2:before , .message-content01 .headline h2:after {
    content: '';
    position: absolute;
    top: 53%;
    display: inline-block;
    width: 55px;
    height: 3px;
    background-color: #0aaa90;
}
.message-content01 .headline h2:before {
    left:0;
    -webkit-transform: rotate(60deg);
    transform: rotate(60deg);
}
.message-content01 .headline h2:after {
    right: 0;
    -webkit-transform: rotate(-60deg);
    transform: rotate(-60deg);
}
.message-content01 .headline h2 span{
    font-size: 20px;
    color: #222;
}
.message-content01 h3 , .message-content02 h3 , .message-content03 h3{
    display: block;
    background: #f29225;
    color: #fff;
    font-weight: 500;
    line-height: 1.4;
    padding: 10px 10px 13px;
    margin: 25px 0 25px;
    text-shadow: 1px 1px 1px rgb(0 0 0 / 20%);
}
.message-content01 img{
    display: block;
    margin: 25px auto;
    max-width: 100%;
}
.message-content01 img.flt{
    float: right;
    margin: 0;
    padding: 0 0 10px 15px;
    width: 280px;
}
.message-content02{
    position: relative;
    padding: 70px 0 50px;
}
.msg-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    margin: 0 auto 30px;
}
.msg-wrap .left {
    width: 30%;
}
.msg-wrap .left img{
    max-width: 100%;
    margin: 0;
}
.msg-wrap .right{
    width: 67%;
}
.msg-wrap .right p {
    font-size: 16px;
    padding: 5px 0;
    line-height: 1.9;
    margin: 0;
} 
.message-content03{
    position: relative;
    padding: 70px 0 90px;
}
.message-content03 img {
    float: right;
    padding: 0 0 15px 15px;
}
@media screen and (min-width:768px) and ( max-width:1024px) {
    .message-content01 .headline h2 span {
        font-size: 14px;
        color: #222;
    }
    .message-content01 .headline h2 {
        font-size: 24px;
    }
    .message-column p {
        line-height: 1.9;
        font-size: 15px;
        margin: 0 auto 20px;
    }
    .message-content01 h3, .message-content02 h3, .message-content03 h3 {
        font-size: 18px;
    }
    .msg-wrap .right p {
        font-size: 15px;
    }
    .message-content01 img.flt {
        width: 200px;
    }
    .message-content01 {
        position: relative;
        padding: 0 0 30px;
    }
    .message-content02 {
        position: relative;
        padding: 50px 0 30px;
    }
    .message-content03 {
        position: relative;
        padding: 50px 0 50px;
    }
    .message-content03 img {
        width: 200px;
    }
}
@media screen and (max-width: 767px) {
    .message-content01 p , .message-content02 p , .message-content03 p{
        font-size: 15px;
    }
    .message-content01 h3, .message-content02 h3, .message-content03 h3 {
        font-size: 18px;
    }
    .message-content01 img.flt {
        float: none;
        display: block;
        margin: 0 auto 20px;
        padding: 0;
        width: 250px;
        max-width: 100%;
    }
    .message-content01 {
        position: relative;
        padding: 0 0 30px;
    }
    .message-content02 {
        position: relative;
        padding: 50px 0 30px;
    }
    .msg-wrap .left {
        width: 100%;
    }
    .msg-wrap .right {
        width: 100%;
    }
    .msg-wrap .left img {
        max-width: 100%;
        margin: 0 auto 20px;
        display: block;
    }
    .message-content03 {
        position: relative;
        padding: 50px 0 70px;
    }
    .message-content03 img {
        float: none;
        display: block;
        margin: 0 auto 20px;
        padding: 0;
        max-width: 100%;
    }
    .message-content01 .headline h2:before {
        left: 0;
        -webkit-transform: rotate(70deg);
        transform: rotate(70deg);
    }
    .message-content01 .headline h2:after {
        right: 0;
        -webkit-transform: rotate(-70deg);
        transform: rotate(-70deg);
    }
    .message-content01 .headline h2 span {
        font-size: 13px;
        color: #222;
        display: block;
        margin: 0 0 -25px;
    }
    .message-content01 .headline h2 {
        padding: 0 30px 0 35px;
        font-size: 18px;
    }
    .message-content01 .headline h2:before, .message-content01 .headline h2:after {
        content: '';
        position: absolute;
        top: 100%;
    }
}
/* -----------------------------------追加・修正----------------------------------- */

.pref-contact-wrap {
    display: block;
    margin: 0px auto 70px;
}

@media screen and (max-width: 767px) {

    .pref-contact-wrap {
        display: block;
        margin: 0px auto 60px;
    }
}
/* -----------------------------------ポップアップ----------------------------------- */
.pn {
    display: block;
    margin: 10px auto 15px;
    width: 100%;
}
.wp-pagenavi {
    clear: both;
    display: flex;
    align-items: center;
}
.wp-pagenavi a, .wp-pagenavi span {
    text-decoration: none;
    border: 1px solid #888888;
    padding: 3px 7px;
    margin: 0px 5px 0 0;
}
span.current {
    background: #00aecc;
    border-radius: 50%;
    color: #fff;
    padding: 10px 17px;
    line-height: 1;
    font-size: 15px;
    font-weight: 600;
    margin: 0 3px;
}
.wp-pagenavi span.current {
    font-weight: bold;
    border: 1px solid #00aecc!important;
    padding: 9px 13px 10px;
    line-height: 1;
    font-size: 15px;
    font-weight: 600;
    margin: 0 5px;
}
a.page.larger,a.page.smaller {
    background: #fff;
    border: 1px solid #00aecc;
    border-radius: 50%;
    color: #00aecc;
    padding: 9px 13px 10px;
    line-height: 1;
    font-size: 15px;
    font-weight: 600;
    margin: 0 3px;
    transition: 0.3s;
}
a.nextpostslink,a.previouspostslink {
    display: none;
}
a.page.larger:hover,a.page.smaller:hover {
    opacity: 0.7;
}
a.nextpostslink,a.previouspostslink {
    color: #00aecc;
    font-size: 1.5em;
    margin: 0 5px;
}
span.pages {
    display: inline-block;
    border: 1px solid #00aecc!important;
    font-size: 14px;
    padding: 3px 5px 4px;
    color: #00aecc;
    margin: 2px 5px!important;
}
.pref-area-wrap h2 {
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 2px;
    background: #17b49b;
    color: #fff;
    padding: 15px 15px;
    margin: 0 auto 20px;
    text-align: left;
    text-shadow: 1px 1px 1px rgb(0 0 0 / 20%);
}
.pref-area-wrap {
    padding: 0px 0px 50px;
}
.pref-area-wrap ul {
    text-align: left;
    padding: 5px 10px;
}
.pref-area-wrap ul li {
    display: inline-block;
    font-size: 16px;
    padding: 7px 0 7px 0px;
}
.pref-area-wrap ul.ward {
    border-top: 1px #ccc solid;
    margin: 7px auto 0;
    padding: 0 5px;
}
.pref-area-wrap ul.ward li {
    font-size: 15px;
}
.pref-area-wrap ul li:after {
    content: " ｜";
}
.pref-area-wrap ul li:last-child:after {
    content: none;
}
.add-works-wrap h2 {
    display: block;
    width: 100%;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 2px;
    background: #17b49b;
    color: #fff;
    padding: 15px 15px;
    margin: 0 auto 30px;
    text-align: left;
    text-shadow: 1px 1px 1px rgb(0 0 0 / 20%);
}

@media screen and (max-width: 767px) {

    .pref-area-wrap h2 {
        font-size: 16px;
        line-height: 1.3;
        letter-spacing: 1px;
        padding: 12px 10px;
        margin: 0 auto 15px;
    }
    .pref-area-wrap {
        padding: 10px 0px 10px;
    }
    .pref-area-wrap ul {
        text-align: left;
        padding: 5px 5px 0;
    }
    .pref-area-wrap ul li {
        font-size: 15px;
    }
    .pref-area-wrap ul.ward li {
        font-size: 14px;
    }

    .add-works-wrap h2 {
        font-size: 16px;
        line-height: 1.3;
        letter-spacing: 1px;
        padding: 12px 10px;
        margin: 0 auto 25px;
    }
    .top-works-wrap.add-works-wrap {
        margin: 30px 0 0;
    }
    .pn {
        display: block;
        margin: 10px auto 40px;
    }
}
.glo-list ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 50px 0 40px;
}
.glo-list ul li{
    width: 19%;
    margin: 0% 0 2%;
}
.glo-list ul li a{
    width: 100%;
    display: inline-block;
    font-size: 15px;
    font-weight: 500;
    color: #04a088;
    margin: 0;
    letter-spacing: 1px;
    text-align: center;
    padding: 1em 1.5em 1.1em;
    line-height: 1.4;
    text-decoration: none;
    background: #fff;
    border: 1px solid #04a088;
    border-radius: 3em;
}
.glo-list ul li a:hover {
    transition: 0.2s;
    border: 1px solid #00aecc;
    background: #00aecc;
    color: #fff;
}
.glo-content {
    position: relative;
    padding: 0;
    margin: 40px 0;
}
.glo-content h3{
    font-size: 18px;
    line-height: 1.4;
    letter-spacing: 1px;
    padding: 0 10px 12px;
    margin: 0px auto 15px;
    border-bottom: 2px solid #06C2A5;
    position: relative;
    font-weight: 600;
    text-shadow: 1px 1px 1px rgb(0 0 0 / 15%);
}
.glo-content h3:after {
    position: absolute;
    content: " ";
    display: block;
    border-bottom: solid 2px #F29225;
    bottom: -2px;
    width: 25%;
}
.glo-content a dl{
    padding: 0 3% 17px;
    margin: 0 auto 17px;
    border-bottom: 1px solid #ccc;
}
.glo-content a dl dt{
    font-size: 16px;
    color: #019b83;
    margin: 0 auto 8px;
}
.glo-content a:hover dl{
    opacity: 0.6;
    transition: 0.2s;
}
.glo-content a:hover dl dd{
    color: #333;
}
.glo-body {
    position: relative;
    padding: 0px 0 0px;
}
.glo-body img {
    display: block;
    margin: 0 auto 30px;
    max-width: 100%;
}
.glo-body p {
    margin: 0 auto 20px;
}
.glo-body .blog-card-thumbnail img {
    margin: 0;
}
.next-wrap {
    display: flex;
    justify-content: space-between;
    margin: 50px auto 0px;
}
.next-wrap a{
    font-size: 14px;
    background: #00aecc;
    padding: 10px 10px 11px;
    line-height: 1;
    display: block;
    text-align: center;
    color: #fff;
    font-weight: 500;
    border:1px solid #00aecc;
    text-shadow: 1px 1px 0 rgb(0 0 0 / 15%);
    transition: 0.2s;
}
.next-wrap a:hover {
    border:1px solid #00aecc;
    color: #00aecc;
    background: #fff;
    text-shadow: none;
}
.next-wrap a.pre::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f100";
    padding: 0 0.5em 0 0;
}
.next-wrap a.next::after {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f101";
}
@media screen and (min-width:768px) and ( max-width:1024px) {
    .glo-list ul li {
        width: 19%;
        margin: 0 0 2%;
    }
    .glo-list ul li a {
        font-size: 13px;
        padding: 1em 1em 1.1em;
    }
    .glo-content a dl dt {
        font-size: 15px;
    }
    .glo-content a dl dd {
        font-size: 13px;
        line-height: 1.6;
    }
    .next-wrap {
        margin: 40px auto 0px;
    }
    .next-wrap a {
        font-size: 10px;
        background: #00aecc;
        padding: 10px 8px 11px;
    }
    .glo-list ul {
        margin: 40px 0 40px;
    }
}
@media screen and (max-width: 767px) {
    .glo-list ul li {
        width: 49%;
        margin: 0 0 3%;
    }
    .glo-list ul li a {
        display: block;
        font-size: 14px;
    }
    .glo-content a dl dt {
        font-size: 15px;
        color: #04a289;
        margin: 0 auto 8px;
    }
    .glo-content a dl dd {
        font-size: 12px;
        line-height: 1.6;
    }
    .glo-body {
        position: relative;
        padding: 0px 0 0px;
    }
    .glo-body img {
        display: block;
        margin: 40px auto 30px;
        max-width: 100%;
        height: auto;
    }
    .glo-list ul {
        margin: 50px 0 40px;
    }
    .glo-content {
        margin: 40px 0;
    }
    .next-wrap {
        width: 100%;
        display: block;
        margin: 40px auto 0px;
    }
    .next-wrap a {
        font-size: 13px;
        text-align: center;
        padding: 12px 5px 13px;
    }
    .next-wrap a.pre {
        margin: 0 auto 20px 0;
        display: block;
    }
    .next-wrap a.next {
        margin: 20px 0 0 auto;
        display: block;
    }
}