@charset "utf-8";

/*
Theme Name: mims
*/

/* CSS Document */
.grecaptcha-badge{
    display: none;
}

div.wpcf7 .ajax-loader{
    display: block!important;
    margin: 4px auto 0!important;
}

/*
---------------------------------------
下層ページ共通
---------------------------------------
*/
body.single #wrapper,
body.page #wrapper,
body.category #wrapper{
}

/*
---------------------------------------
カテゴリ共通 .category
---------------------------------------
*/
body.category h1{
    text-align: center;
    padding: 42px 0 38px;
}

body.category h1 img{
    display: block;
    text-align: center;
    margin: 0 auto 3px;
    width: auto;
    height: 39px;
}

body.category.news h1 img{
        margin: 0 auto 8px;
    }

body.category h1 .ja img{
    width: auto;
    height: 15px;
}

body.category h1:after {
    content: "";
    width: 1px;
    height: 60px;
    margin: 8px 0 0;
    background: #ccc;
    display: inline-block;
    position: absolute;
}

body.category main .all-list{
    background: #f2f2f2;
    padding: 120px 0 40px;
    
}


body.category footer #contactBOX{
    background: #fff;
}
body.category footer #contactBOX .contact .tel-mail a{
    background: #f2f2f2;
}





body.category main .category_list,
body.category main .pagination{
    position: absolute;
    top: -72px;
    right: 0;
    display: flex;
}

body.category main .pagination{
    top: auto;
    bottom: 10px;
}

body.category main .pagination .page-numbers{
    display: flex;
}

body.category main .category_list li,
body.category main .pagination .page-numbers li{
    margin-right: 20px;
    font-size: 12px;
}
body.category main .category_list li:last-child,
body.category main .pagination .page-numbers li:last-child
{
    margin-right: 0;
}


body.category main .category_list li a,
body.category main .pagination .page-numbers li a{
    padding:4px 0;
        position: relative;
        display: inline-block;
}

body.category main .category_list li a:before,
body.category main .pagination .page-numbers li a:before,
body.category main .pagination .page-numbers li a.prev:after{
    content: "";
    background: #534741;
    width: 100%;
    height: 1px;
    position: absolute;
    bottom: 1px;
    left: 0;
    transform: scale(0, 1);
  transform-origin: center top;
  transition: transform .3s;
}

body.category main .category_list li a:hover:before,
body.category main .pagination .page-numbers li a:hover:before,
body.category main .pagination .page-numbers li a.prev:hover:after{
    transform: scale(1, 1);
}

body.category main .pagination .page-numbers li span{
padding: 0.4em 0.4em 0.3em;
}
body.category-2 main #category-case .category_list li.all a,
body.category main .category_list li.current-cat a,
body.category main .pagination .page-numbers li span.current{
    background: #999;
    color: #fff;
}

body.category-2 main #category-case .category_list li.all a,
body.category main .category_list li.current-cat a,
body.category main .pagination .page-numbers li span.current{
    cursor: default;
}

body.category-2 main #category-case .category_list li.all a:before,
body.category main .category_list li.current-cat a:before,
body.category main .pagination .page-numbers li span.current:before{
    display: none;
}

body.category main .pagination .page-numbers li a.next::after {
    font-family: "Font Awesome 5 Free";
    margin: 0 0 0 5px;
    font-size: 0.4em;
    position: relative;
    display: inline-block;
    content: "\f054";
    font-weight: bold;
    top: 0px;
}

body.category main .pagination .page-numbers li a.prev::before {
    transform: none;
    font-family: "Font Awesome 5 Free";
    margin: 0 5px 0 0;
    font-size: 0.4em;
    position: relative;
    display: inline-block;
    content: "\f053";
    font-weight: bold;
    top: 0px;
    width: auto;
    background: none;
}


/*
---------------------------------------
記事共通 body.single
---------------------------------------
*/



main .inner {
   max-width: 880px;
    width: 84%;
    margin: 0 auto;
}

.breadcrumb-area {
  padding: 16px 100px 12px;
    font-size: 11px;
    color: #999;
}
.breadcrumb-area a:after{
    content: "";
    width: 20px;
    height: 1px;
    position: absolute;
    display: inline-block;
    background: #999;
    top: 0.5em;
    right: -28px;
}
.breadcrumb-area a{
    color: #534741;
position: relative;
margin-right: 36px;}

.breadcrumb-area a.home:before{
    content: "";
    width: 15px;
    height: 12px;
    background: url(img/icn_home.svg) no-repeat center center;
    display: inline-block;
    position: relative;
    top: 2px;
    margin-right: 5px;
    }


/*
---------------------------------------
記事詳細・固定ページ共通 .single-post
---------------------------------------
*/

.single-post main h1,
.page main h1{
    margin-top: 120px;
    
    font-size: 24px;
    padding-bottom: 88px;
    position: relative;
    line-height: 1.4em;
}

.single-post main h1 div{
    margin-bottom: 10px;
}

.single-post main h1 a{
    font-size: 16px;
    color: #534741;
    line-height: 1em;
}

.single-post main h1 a:before{
    content: "・";
    display: inline;
}

.single-post main h1 a:first-child:before{
    display: none;
}

.single-post main h1:after,
.page main h1:after{
    content: "";
    width: 32px;
    height: 1px;
    background: #ccc;
    display: block;
    position: absolute;
    bottom: 60px;
    left: 0;  
}



.single-post main .prevnext{
    text-align: center;
    margin: 100px 0 120px;
    font-size: 12px;
}

.single-post main .prevnext a{
    padding:0 0 5px 14px;
    position: relative;
}

.single-post main .prevnext a[rel="next"]{
    padding: 0 14px 5px 0;
}

.single-post main .prevnext .back{
    margin:0 30px 5px 44px;
}


.single-post main .prevnext .back:last-child{
    margin:0 0 0 44px;
}

.single-post main .prevnext .back:first-child{
    margin:0 30px 0 14px;
}

.single-post main .prevnext a:before{
    font-family: "Font Awesome 5 Free";
    position: absolute;
    display: inline-block;
    content: "\f053";
    font-weight: bold;
    top: -1px;
    left: 0;
    font-size: 0.6em;
}
.single-post main .prevnext a[rel="next"]:before{
content: "\f054";
    right: 0;
    font-size: 0.6em;
    left: auto;
}

.single-post main .prevnext a:after{
    content: "";
    background: #534741;
    width: 100%;
    height: 1px;
    position: absolute;
    bottom: 1px;
    left: 0;
    transform: scale(0, 1);
  transform-origin: center top;
  transition: transform .3s;
}

.single-post main .prevnext a:hover:after{
    transform: scale(1, 1);
}


/*記事詳細・固定ページパーツ*/
main .textbox.parts-use p,
main .textbox.parts-use hr,
main .textbox.parts-use .wp-block-table,
main .textbox.parts-use .wp-block-image{
    margin:0 0 50px;
}

main .textbox.parts-use h1,
main .textbox.parts-use h2,
main .textbox.parts-use h3,
main .textbox.parts-use h4,
main .textbox.parts-use h5,
main .textbox.parts-use h6{
    font-size: 20px;
    color: #534741;
    padding-bottom: 12px;
    font-family: "游明朝", YuMincho, "游明朝 Medium", "YuMincho Medium", "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}

main .textbox.parts-use a{color: #534741;font-size: 14px;}

main .textbox.parts-use a:hover{
    text-decoration: underline;
}

main .textbox.parts-use hr{
        text-align: center;
    border: none;}

main .textbox.parts-use hr:before {
    content: "";
    width: 1px;
    height: 60px;
    background: #ccc;
    display: inline-block;

}
main .textbox.parts-use .wp-block-image{
    text-align: center;
}

main .textbox.parts-use .wp-block-image figcaption{
    font-size: 12px;
    color: #999;
}
main .textbox.parts-use .wp-block-table table{
    border: 1px solid #F2F2F2;
}
main .textbox.parts-use .wp-block-table table th{
    background: #F2F2F2;
    width: 30%;
    border-bottom: 1px solid #fff;
}
main .textbox.parts-use .wp-block-table table th,
main .textbox.parts-use .wp-block-table table td{
    padding: 10px 16px;
}
main .textbox.parts-use .wp-block-table table td{
border: 1px solid #F2F2F2;}


main .textbox.parts-use{
    margin: 54px 0;
        line-height: 2.3em;
}

/*
---------------------------------------
固定ページ .page
---------------------------------------
*/
body.page main .textbox.parts-use{
    margin-bottom: 120px;
}

/*メールフォーム*/
body.page main #contact_form dl{
    width: 100%;
    margin-bottom: 40px;
    display: flex;
}

body.page main #contact_form dl dt{
    width: 32%;
    font-size: 14px;
}

body.page main #contact_form dl dt span{
    font-size: 11px;
    color: #999;
    padding-left: 10px;
}

body.page main #contact_form dl dd{
    width: 68%;
}



body.page main #contact_form input[type="button"],
body.page main #contact_form input[type="submit"],
body.page main #contact_form input[type="text"],
body.page main #contact_form input[type="email"],
body.page main #contact_form input[type="tel"],
body.page main #contact_form select,
body.page main #contact_form textarea,
body.page main #contact_form button {
   border-radius: 0;
  -moz-appearance: none;
  -webkit-appearance: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  outline: none;
  border: none;
  background: none;
}
 

@keyframes onAutoFillStart { from {} to {}}

input:-webkit-autofill {
    animation-name: onAutoFillStart;
    transition: background-color 50000s ease-in-out 0s;
}
 
 
body.page main form.wpcf7-form{
    margin-top:-300px;
    padding-top: 300px;
}

body.page main #contact_form input[type="text"],
body.page main #contact_form input[type="email"],
body.page main #contact_form input[type="tel"],
body.page main #contact_form textarea{
  background: #F2F2F2;
  display: block;
  font-size: 14px;
  padding: 10px;
  width: 100%;
  border-radius: 0;
}

body.page main #contact_form textarea{
    height: 136px;
    resize: vertical;
}
 
body.page main #contact_form input::placeholder,
body.page main #contact_form textarea::placeholder{
  color: #B3B3B3;
}

/* IE */
body.page main #contact_form input:-ms-input-placeholder,
body.page main #contact_form textarea:-ms-input-placeholder{
  color: #B3B3B3;
}

/* Edge */
body.page main #contact_form input::-ms-input-placeholder,
body.page main #contact_form textarea::-ms-input-placeholder{
  color: #B3B3B3;
}

body.page main #contact_form .btn{
    text-align: center;
    margin-top: 60px;
}
body.page main #contact_form input[type="button"],
body.page main #contact_form input[type="submit"]{
    width: 32%;
    padding: 10px 0;
    font-size: 12px;
    background: #fff;
    color: #534741;
    border:1px solid #534741;
    cursor: pointer;
        transition: all 0.3s;
}

body.page main #contact_form input[type="button"]{
    background: #F2F2F2;
    border-color: #F2F2F2;
    margin-right: 20px;
}

body.page main #contact_form input[type="button"]:hover,
body.page main #contact_form input[type="submit"]:hover {
  transform: translate(0, -8px);
    opacity: 0.7;
}



/*
---------------------------------------
事例一覧 #category-case
---------------------------------------
*/

body.category.case{
        min-width: 1220px;
}


main #category-case #category-case-list .inner{
    transition-duration: 0.5s;
    max-width: 1120px;
    width: 100%;
    position: relative;
}


#category-case ul.list{
display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    -webkit-box-pack:justify;
-ms-flex-pack:justify;
padding:0; 
}

#category-case ul.list li{
    width: calc(calc(100% - 160px) / 3);
    margin-bottom: 80px;
    cursor: pointer;
    position: relative;
    margin-right: 80px;
}

#category-case ul.list li:nth-child(3n){
    margin-right: 0;
}

#category-case ul.list li p.photo {
    width: 100%;
    padding-top: 100%;
    overflow: hidden;
    background-size: cover;
    background-position: center center;
}

#category-case ul.list li div.ttl {
    background: #fff;
    padding: 20px 20px 22px;
    margin: -20px 20px 0;
    z-index: 2;
    position: relative;
        font-size: 16px;
}

#category-case ul.list li div.ttl h3 .cat {
    font-size: 12px;
    padding-bottom: 4px;
    color: #534741;
    display: block;
}

#category-case ul.list li div.ttl h3 .cat span:before{
    content: "・";
    display: inline;
}

#category-case ul.list li div.ttl h3 .cat span:first-child:before{
    display: none;
}


#category-case ul.list li div.ttl h3 a {
    display: block;
        overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (min-width:1600px) {
main #category-case #category-case-list .inner{
    width: 100%;
        max-width: 1520px; 
}
#category-case ul.list li,
#category-case ul.list li:nth-child(3n){
    width: calc(calc(100% - 240px) / 4);
    margin-right: 80px;
}
#category-case ul.list li:nth-child(4n){
    margin-right: 0;
}
    
}

/*
---------------------------------------
お知らせ一覧 #category-case
---------------------------------------
*/

main #category-news #category-news-list .inner{
    width: 84%;
    max-width: 1520px;
    position: relative;
    padding-bottom: 48px;
}


#category-news ul li.link_item {
    background: #fff;
    padding: 24px;
    width: 100%;
    max-width: 880px;
    margin: 0 auto 32px;
    border-left: 1px solid #999;
    position: relative;
    cursor: pointer;
    
}

#category-news ul li.link_item time {
    font-size: 12px;
    color: #999;
    padding-bottom: 4px;
    display: inline-block;
}

#category-news ul li.link_item  h2{
    font-size: 16px;
    line-height: 1.5em;
}

/*
---------------------------------------
事例記事詳細 #single-case
---------------------------------------
*/

#single-case .breadcrumb-area span:nth-child(3){
    display: none;
}

#single-case .f_photo{
    text-align: center;
    position: relative;
    padding-bottom: 100px;
}

#single-case .f_photo img{
    margin-bottom: 40px;
    display: block;
}

#single-case .f_photo:after{
    content: "";
    width: 1px;
    height: 60px;
    background: #ccc;
    display: inline-block;
    position: absolute;
    bottom: 40px;
}


#single-case .fieldtext{
color:#999;
font-size: 12px;
    line-height: 1.6em;}


#single-case .fieldtext .place span{
    display: inline-block;
    padding-left:40px; 
    position: relative;
}

#single-case .fieldtext .place span:before{
    content: "";
    display: inline-block;
    left: 20px;
    top: 4px;
    width: 1px;
    height: 10px;
    background: #999;
    position: absolute;
}


/*
---------------------------------------
お知らせ記事詳細 #single-news
---------------------------------------
*/

#single-news h1 .date{
    font-size:16px;
    color: #999;
    display: block;
    margin-bottom: 20px;
}

#single-news .textbox{
    margin-top: 0;
}


/*
---------------------------------------
SP下層ページ共通
---------------------------------------
*/
@media screen and (max-width: 750px) { 
body.single #wrapper,
body.page #wrapper,
body.category #wrapper{
            margin-top: 130px;
            padding-top: 40px;
}
    
    
    
}

/*
---------------------------------------
カテゴリ共通 .category
---------------------------------------
*/
@media screen and (max-width: 750px) { 

body.category h1{
        padding: 0 0 38px;
    }
    
body.category h1 img{
            height: 36px;
            margin-bottom: 9px;
    }
    

    
body.category h1 .ja:before{
        margin: 6px auto 14px;
    }
body.category h1 .ja img {
    height: 14px;
}
    
    body.category main .all-list{
            padding: 60px 0 40px;
    }
}

/*
---------------------------------------
SP事例一覧 #category-case
---------------------------------------
*/

@media screen and (max-width: 840px) { 
    body.category.case{
        min-width: 100%;
        transition: all 0.3s;
    }
    
    main #category-case #category-case-list .inner{
    max-width: 880px;
    width: 84%;
    margin: 0 auto;
    }
    
    #category-case ul.list{
        padding: 0 0 40px;}
    
    #category-case ul.list li{
    width: calc(calc(100% - 60px) / 3);
        margin-right: 30px;
        margin-bottom: 40px;
    }
    #category-case ul.list li:nth-child(3n){
        margin-right: 0;
    }
    

}

@media screen and (max-width: 750px) { 
    body.category main .all-list{
        padding-top: 50px;
    }
    
    body.category main .category_list{
         position: static;
        justify-content:flex-end;
        margin-bottom: 40px;
    }
    
    #category-case ul.list li div.ttl{
        padding: 14px 14px 16px;
    }
    
main #category-case #category-case-list .inner{

    width: 84%;

}
    
    #category-case ul.list{
            justify-content: space-between;
        padding: 0;
            padding-bottom: 58px;
    }
    
    #category-case ul.list li {
            width: 48%;
    margin-right: 0;
        margin-bottom: 4%;
}

    
    #category-case ul.list li div.ttl{
        margin: 0;
    }
    
    
}

/*
---------------------------------------
SP記事詳細・固定ページ共通 .single-post
---------------------------------------
*/
@media screen and (max-width: 750px) { 
.single-post main h1,
.page main h1{
    margin-top: 10px;
    padding-bottom: 60px;
}
.single-post main h1:after, .page main h1:after {

    bottom: 34px;

}
    
    .single-post main .prevnext{
        margin: 50px 0 60px;
    }

/*記事詳細・固定ページパーツ*/
main .textbox.parts-use p,
main .textbox.parts-use hr,
main .textbox.parts-use .wp-block-table,
main .textbox.parts-use .wp-block-image{
    margin:0 0 30px;
}
main .textbox.parts-use .wp-block-table table th,
main .textbox.parts-use .wp-block-table table td{
    padding: 10px 16px;
    width: 100%;
    display: block;
    box-sizing: border-box;
}
    
    main .textbox.parts-use .wp-block-table table th{
        border-bottom: none;
    }

}

/*
---------------------------------------
SP記事共通 body.single
---------------------------------------
*/

@media screen and (max-width: 840px) { 
.breadcrumb-area {
    width: 84%;
    padding-left: 0;
    padding-right: 0;
    margin: 0 auto;
}
}

@media screen and (max-width: 750px) { 
.breadcrumb-area {
    display: none;
}
}


/*
---------------------------------------
事例記事詳細 #single-case
---------------------------------------
*/
@media screen and (max-width: 750px) { 
    #single-case .f_photo{
            padding-bottom: 90px;
    }
    
    #single-case .f_photo:after{
        bottom: 40px;
    }
    
    main #single-case .textbox.parts-use{    margin: 30px 0;}
}
/*
---------------------------------------
SPお知らせ一覧 #category-case
---------------------------------------
*/



@media screen and (max-width: 750px) { 
    
    #category-news ul li.link_item h2{
        font-size: 14px;
    }
    
    #category-news ul li.link_item{
        padding: 20px;
            margin-bottom: 20px;
    }
}

/*
---------------------------------------
固定ページ .page
---------------------------------------
*/
@media screen and (max-width: 750px) {
body.page main .textbox.parts-use{
    margin-bottom: 64px;
}
}

/*
---------------------------------------
お問合せ .page
---------------------------------------
*/

@media screen and (max-width: 750px) {
    body.page main #contact_form dl{
        flex-wrap: wrap;
        margin-bottom: 20px;
    }
    body.page main #contact_form dl dt,
    body.page main #contact_form dl dd{
        width: 100%;
    }
    
    body.page main #contact_form input[type="text"], body.page main #contact_form input[type="email"], body.page main #contact_form input[type="tel"], body.page main #contact_form textarea{
        font-size: 16px;
    }
    
    body.page main #contact_form .btn{
        margin-top: 40px;
    }
    
    body.page main #contact_form input[type="button"],
    body.page main #contact_form input[type="submit"]{
        width: 45%;
    }
}