@charset "UTF-8";
.mt10{
    margin-top: 1em !important;
}
.mt20{
    margin-top: 2em !important;
}
.mt30{
    margin-top: 3em !important;
}
.mt40{
    margin-top: 4em !important;
}
.mt50{
    margin-top: 5em !important;
}
.mb10{
    margin-bottom: 1em !important;
}
.mb20{
    margin-bottom: 2em !important;
}
.mb30{
    margin-bottom: 3em !important;
}
.mb40{
    margin-bottom: 4em !important;
}
.mb50{
    margin-bottom: 5em !important;
}
.text-c{
    text-align: center;
}

/* Flex  ------------------------------------*/
.flexwrap{
 display: -webkit-flex;
 display: flex;
 flex-wrap: wrap;
 -webkit-flex-wrap: wrap;
}
.flexnowrap{
 display: -webkit-flex;
 display: flex;
 flex-wrap: nowrap;
 -webkit-flex-wrap: nowrap;
}
.JCfs{
 justify-content: flex-start;
 -webkit-justify-content: flex-start;
}
.JCfe{
 justify-content: flex-end;
 -webkit-justify-content: flex-end;
}
.JCc{
 justify-content: center;
 -webkit-justify-content: center;
}
.JCsb{
 justify-content: space-between;
 -webkit-justify-content: space-between;
}
.AIc{
    align-items: center;
    -webkit-align-items: center;
}
.AIs{
    align-items: stretch;
    -webkit-align-items: stretch;
}
.AIe{
    align-items: end;
    -webkit-align-items: end;
}

/* 202501 TOPのNEWS枠広げ　*/
.demo-box2 .list-unstyled{
    width: 100%;
}

/* 2022909 背景チェンジによるコメント欄見やすく*/
.comments-area{
    background: rgba(255,255,255,0.5);
    padding: 15px 30px;
}

/* tsutsumikakusazu */
.tsutumi-f iframe{
    transform: translateX(-50%);
    left: 50% !important;
}
/* NEWSタイトル表示変更 250609 */
  .demo-box h1 {
    font-size : 1.7rem;
    text-align: center;
    font-weight : bold;
    margin : 20px auto;
    padding : 12px 0;
    text-indent : 30px;
    letter-spacing : 2px;
    color : #fff;
    background-color : #898989;
    background-position : right;
  }



/*footer固定用*/
body{
    margin-bottom : 0 !important;
}
#page{
    position: relative;
    min-height: 100vh;
    padding-bottom: 80px;/*←footerの高さ*/
    box-sizing: border-box;/*←全て含めてmin-height:100vhに*/
}
/*
.page,.page2{
    padding-bottom: 70px !important;
}
*/
.wp-pagenavi a.page{
    padding-bottom: 3px !important;
}

/* FC用背景自　ロゴ色　*/
#logo img{
    filter: drop-shadow(2px 4px 6px black);
}

/*DISCOページ構築 20230905*/
.disco-f{
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    box-sizing: border-box;
}
.disco-box{
    margin-bottom: 10px;
    width: calc(100% / 4);
    padding: 0 15px;
    overflow-wrap: break-word;
    box-sizing: border-box;
}
.disco-box img{
    margin: 10px 0;
    width: 100%;
    height: auto;
}
.disco-single-l{
    width: 35%;
}
.disco-single-l img{
    width: 100%;    
    height: auto;
}
.disco-single-r{
    padding-left: 20px;
    width: 65%;
    line-height: 1.8;
}
.disco-single-r a{
    color: #e9472a;
}


/*SHOPページ構築*/

.shop-f{
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    box-sizing: border-box;
}
.shop-box{
    width: calc(100% / 6);
    padding: 10px;
    overflow-wrap: break-word;
}
.shop-box img{
    width: 100%;
    height: auto;
}
.shop-box p{
    margin: 0;
}

/* FCサービスページ　250530 */
.service-f h1{
    font-size: 2rem !important;
    margin: 2em 0;
    font-weight: 800;
}
.mainbox.point-f h2,
.mainbox.service-f h2{
    font-size: 2rem !important;
    margin: 3em auto 1em;
    color: #000 !important;
}
.service-f .info-l{
    width: 75%;
    letter-spacing: 0.1em;
}
.service-f .info-r{
    width: 25%;
    text-align: center;
}
.service-f .info-r img{
    width:100%;
    padding: 20px;
}
.service-f .service-list div{
    width: calc((100% - 300px)/5);
    margin: 30px;
    aspect-ratio:1 / 1;
}
.service-f .service-list div img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.service-f .fc-info,
.service-f .entry,
.service-f .point{
    font-size: 1.4rem;
    line-height: 1.7;
    padding: 20px 30px;
    border-radius: 15px;
    background-color: rgba(255,255,255,0.5);
    box-shadow: 0 3px 10px rgba(0,0,0,.3);
}
.service-f .entry p span{
    font-size: 2.5rem;
    color: black;
    font-weight: 900;
}
.service-f .entry .bt{
    height: 30px;
    line-height: 30px;
    width: 95%;
    margin: 2em auto;
    background: black;
    text-align: center;
    border: 1px solid #000;
}
.service-f .entry .bt a{
    display: block;
    text-decoration-line: none;
    color: #fff;
}
.service-f .entry .bt:hover{
    background: white;
    transition: 0.3s;
}
.service-f .entry .bt:hover a{
    color: black;
    transition: 0.3s;
}
.mainbox.point-f h2 img{
    height: 50px;
    width: auto;
    margin-right: 10px;
    vertical-align: text-bottom;
}
.point-f .about{
    margin: 2em auto;
    text-align: center;
}
.point-f .about h1{
    margin: 2em auto;
    font-size: 2rem;
}
.point-f .menu-f{
    width: 80%;
    margin: 1em auto 10em;
}
.point-f .menu{
    margin: 10px;
    width: calc(50% - 20px);
    background: #000;
    border: 1px solid #000;
    text-align: center;
    padding: 15px 0;
}
.point-f .menu a{
    color: #FFF;
    text-decoration-line: none;
}
.point-f .menu:hover{
    background: #fff;
    transition: 0.3s;
}
.point-f .menu:hover a{
    color: #000 !important;
    transition: 0.3s;
}
.point-f .menu:hover img{
    filter: brightness(0);
}
.point-f .menu a:visited{
    color: #FFF;    
}
.point-f .menu img,
.point-f .menu img{
    margin: 0 15px 0 0;
    filter: brightness(0) invert(1);
    height: 50px;
    width: auto;
}
.point-f .info-l{
    width: 60%;
    padding-right: 30px;
}
.point-f .info-r{
    width: 40%;    
}
.point-f .info-r span{
    font-size: 3.5rem;
    font-weight: 800;
    padding: 0 5px;
    vertical-align: sub;
}
.point-f .info-r .continue span{
    font-size: 2.5rem;    
}
.point-f .info-r .continue div{
    width: 50%;
}
.point-f .ex-img img{
    width: 100%;
    padding: 15px;
}
.mail-f .frame,
.point-f .frame{
    line-height: 1.7;
    padding: 20px 30px;
    border-radius: 15px;
    background-color: rgba(255,255,255,0.5);
    box-shadow: 0 3px 10px rgba(0,0,0,.3);    
}
.mail-f .frame{
    line-height: 1.7;
    padding: 20px 30px;
    border-radius: 15px;
    background-color: rgba(0,0,0,0.5);
    box-shadow: 0 3px 10px rgba(0,0,0,.3);    
}
.point-f .frame.limited{
    margin-bottom: 2em;
}
.mainbox.service-f h3,
.mainbox.point-f h3{
    background: unset;
    color: #000;
    border-left: 1px solid #000;
    padding-left: 15px;    
}
.mainbox.service-f h3{
    margin: 2em 0 0;
    padding-left:0;}
.mainbox.service-f .fc-info h3:first-child{
    margin: 1em 0 0;    
}

.point-f .point-img{
    width: 100%;
    text-align: center;
}
.point-f .add{
    font-size: 1.3rem;
}
.point-f .add p{
    font-weight: 900;
    margin: 1em 0;
    font-size: 2rem;
}
.point-f .addlist{
    padding: 10px;
    border-bottom: 1px solid rgba(0,0,0,0.5);
}
.point-f .entry{
    font-size: 1.2rem;
}
.point-f .entry h4{
    margin: 1em 0 2em;
}
.point-f .contact,
.point-f .faq{
    margin: 3em auto;
    width: 80%;
    max-width: 600px;
    text-align: center;
}
.point-f .contact .bt,
.point-f .faq .bt{
    margin: 1em auto;
    background-color: #000;
    height: 40px;
    line-height: 40px;
    width: 90%;
    max-width: 300px;
}
.point-f .contact .bt a,
.point-f .faq .bt a{
    display: block;
    text-decoration-line: none;
    color: #fff;
}
.point-f .contact .bt a:visited,
.point-f .faq .bt a:visited{
    color: #fff;    
}

.mail-f .about{
    margin: 2em auto;
    text-align: center;
}
.mail-f .about h1{
    margin: 2em auto;
    font-size: 2.5rem;
}
.mail-f .about h1 p{
    margin: 1em auto;
    font-size: 1.5rem;
}

@media screen and (max-width: 768px) {
.disco-box{
    width: calc(100% / 3);
    padding: 10px;
    font-size: 90%;
}    
}
@media screen and (max-width: 600px) {
.disco-box{
    width: calc(100% / 2);
    padding: 10px;
    font-size: 90%;
}    
.shop-box{
    width: calc(100% / 3);
    padding: 10px;
    font-size: 90%;
}
/* 2022909 背景チェンジによるコメント欄見やすく*/
.comments-area{
    padding: 10px 5px 10px 20px;
}    
.service-f .info-l{
    width: 100%;
}
.service-f .info-r{
    width: 100%;
}  
.service-f .service-list div{
    width: calc((100% - 40px)/2);
    margin: 10px;
}    
.mainbox.service-f h3, .mainbox.point-f h3{
    line-height: 1.7;
    }    
.point-f .about img{
    width: 90%;
}    
.point-f .menu-f{
    width: 100%;
    }   
.mail-f .frame,
.point-f .frame{
    padding: 10px 10px;
}    
.point-f .info-r .continue div{
    width: 100%;
}    
.point-f .info-l{
    width: 100%;
    padding-right: 0;
}
.point-f .info-r{
    width: 100%;    
}    
.point-f .ex-img img{
    padding: 0;
    }    
.point-f .contact{
    padding-bottom: 2em;
}    
}