@charset "utf-8";

@font-face{
    font-family:'Noto Sans JP';
    font-style:normal;
    font-weight:500;
    src:url('../font/NotoSansJP-Medium.woff2') format('woff2');
    font-display:swap;
}



body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,
pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td { margin: 0; padding: 0; }
body {font-size:14px; line-height:160%; font-family:'Noto Sans JP','Helvetica Neue','Helvetica','Hiragino Sans','Hiragino Kaku Gothic ProN','Arial','Yu Gothic',Meiryo,sans-serif; background-color: #fff; }

ul,ol,li,dl,dt,dd{list-style: none;}
fieldset,img { border: 0; vertical-align: middle; overflow: hidden; }
.clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
.clearfix { *zoom:1;}
.clear { clear: both; display: block; height: 0; overflow: hidden; }
img{ max-width:100%;height: auto;}
a{ text-decoration:none; color:inherit;}
.txlink{transition: color 0.3s;}
.txlink:hover{color: #a08f2e;}

::selection{ background:transparent; color: #a08f2e}

.fw-FTK{font-family: fot-tsukuardgothic-std, sans-serif;font-weight: 400;font-style: normal;}


/***サイトキーカラー設定***/
.kycl_gn{color:#a7dcc4;}/***企業イメージ色***/
.kycl_gy{color:#3f3f3f;}/***ベタ***/
.kycl_ye{color:#a08f2e;}/***差し色***/
.kycl_gn{color:#e8e8db;}/***背景色***/

.red_cl{ color:#e60012;}
.red_bucl{ color:#c8161d;}
.pink_cl{ color:#eb6ca5;}
.blue_cl{ color:#001596;}
.bluein_cl{ color:#4e78aa;}
.ql_cl{ color:#02a586;}
.or_cl{ color:#f39800;}
.gr_cl{ color:#91c21e;}
.ye_cl{color: #dfb500;}

.f16{ font-size: 0.16rem; line-height: 178%; }
.f18{ font-size: 0.18rem; line-height: 178%; }
.f20{ font-size: 0.2rem; line-height: 150%; }
.f22{ font-size: 0.22rem; line-height: 150%; }
.f24{ font-size: 0.24rem; line-height: 150%; }
.f26{ font-size: 0.26rem; line-height: 150%; }
.f30{ font-size: 0.3rem; line-height: 150%; }
.fs08{ font-size: 0.8em; line-height: 180%; }
.fs110{ font-size: 1.1em; line-height: 180%; }
.fs120{ font-size: 1.2em; line-height: 180%; }
.fs140{ font-size: 1.4em;  line-height: 160%;}
.fs150{ font-size: 1.5em;  line-height: 155%;}
.fs160{ font-size: 1.6em;  line-height: 150%;}
.fs170{ font-size: 1.7em;  line-height: 145%;}
.fs180{ font-size: 1.8em;  line-height: 140%;}

.pd_t10{ padding-top: 0.1rem; }
.pd_t20{ padding-top: 0.2rem; }
.pd_t30{ padding-top: 0.3rem; }
.pd_t40{ padding-top: 0.4rem; }
.pd_t50{ padding-top: 0.5rem; }
.pd_t70{ padding-top: 0.7rem; }
.pd_b10{ padding-bottom: 0.1rem; }
.pd_b20{ padding-bottom: 0.2rem; }
.pd_b30{ padding-bottom: 0.3rem; }
.pd_b40{ padding-bottom: 0.4rem; }
.pd_b50{ padding-bottom: 0.5rem; }
.pd_b70{ padding-bottom: 0.7rem; }


.fwb{font-weight: bold;}
.fws{font-weight: 500;}

.align_left{ text-align: left; }
.align_center{ text-align: center; }
.align_right{ text-align: right; }

.lsp_-005{ letter-spacing: -0.05em;}

.inpv{ text-align: center;  }
.YoutubeWrapper{position:relative;padding-bottom:56.25%;overflow: hidden; display: inline-block; width: 750px; max-width: 100%;}
.YoutubeWrapper iframe {position:absolute;top:0;left:0;height:100%;width:100% ;}

.hvop08{ transition: opacity 0.4s; }
.hvop08:hover{opacity: 0.8; }

.textshadow{text-shadow: 0 0 0.1em #000,0 0.1em 0 #000,0 -0.1em 0 #000,-0.1em -0.05em 0 #000,-0.1em 0.05em 0 #000,0.1em -0.1em 0 #000,0.1em 0.1em 0 #000,0.1em 0 0 #000,-0.1em -0.1em 0 #000,-0.1em 0 0 #000,-0.1em 0.1em 0 #000,-0.1em -0.05em 0 #000,-0.1em 0.05em 0 #000,0.1em -0.05em 0 #000,0.1em 0.05em 0 #000,-0.05em -0.1em 0 #000,-0.05em 0.1em 0 #000,0.05em -0.1em 0 #000,0.05em 0.1em 0 #000;transform: translateZ(0);}

:root{
    --htmlfont: 100px;
    --fsbody: 0.2rem;
    --hdmh: 85px;/* headmenu hight */
    --menfs:20px;/* menu font size */
    --mnhov:#a7dcc4;
    --pgic01: #f3dadd;
    --pgic02: #e9e5b5;
    --pgic03: #f5dcc8;
    --pgic04: #d9edc1;
    --pgic05: #d5e0e7;
    --pgic06: #e0dbea;
    --pgic07: #dadada;
}



/******************************index************************************************/
html{ font-size:var(--htmlfont);overflow-x:hidden; }
body{ position:relative;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;color: #000; font-size:var(--fsbody); line-height: 150%;font-weight: 500; background:#fff; position: relative; overflow-x:hidden; padding-top:var(--hdmh); }

.pc_none{display: none; }
.sp_none{display: block;}

/* headmenu */
.headmenu{ font-size: var(--menfs); position: fixed;top: 0;left: 0; background: #fff; width: 100%;  border-bottom: 0.4em solid #3f3f3f;height:var(--hdmh);box-sizing: border-box; z-index: 500;}
    .headmenu_inner{display: flex;justify-content: space-between;align-items: flex-end; width: 1300px; max-width: 94%; margin: 0 auto;}
        .ban_menu{ display:block; width: 3.3em;margin-bottom: -0.05em;overflow: hidden; position:relative;}
        .ban_menu img{transition: all 0.3s; position: relative;bottom: 0; bottom: -0.3em;}
        .ban_menu:hover img{ bottom: 0; }

        .title{margin-left: -1.7em; font-size: 1em; line-height: 1.2; text-align: center; width: 11.1em; font-weight: bolder; letter-spacing: 0.3em;padding: 0.8em;}
        .headerSNS{display: flex; align-items: center; padding-bottom: 1.15em;}
        .headerSNS a{transition: all 0.3s;}
        .headerSNS a:hover{ opacity: 0.7; }
            .bansns_x{ width: 1.2em;}
            .bansns_ins{ width: 1.3em;margin-left: 1.7em;}

/* menu */
.menulistmob{font-size: var(--menfs); position: fixed; top: 0; left: 0;width: 100%; height: 100vh; z-index: 999;display: none;}
    .menuforbs{width: 100%; height: 100vh; display: flex; justify-content: center;align-items: center;transition: opacity 0.3s 0.1s; opacity: 0;}
    .menulist_inner {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: flex-start; /* ← 上下揃え */
      padding: 5em 2em;
      width: 960px;
      max-width: 100%;
      max-height: calc(100vh - 2 * var(--hdmh));
      box-sizing: border-box;
      background: rgba(63, 63, 63, 0.9);
      color: #fff;
      overflow-y: auto;
    }
.menulist_pg{display:flex;flex-direction:column;width:15.7em;font-size:1.4em;line-height:2.18;}
.menulist_pg a{display:inline-block;letter-spacing:0.05em;transition:all 0.3s;}
.menulist_sns{width:12em;display:flex;justify-content:space-evenly;align-content:flex-start;flex-direction:column;flex-wrap:wrap;}
.menulist_pg .sns_linkset{white-space:nowrap;display:inline-block;overflow:auto;}
.menulist_pg,.menulist_sns{align-self:stretch;display:flex;flex-direction:column;justify-content:space-between;}
.menulist_sns a{display:inline-block;font-size:0.8em;line-height:3;letter-spacing:0.05em;transition:all 0.3s;}
.banmn_close{width:100%;text-align:center;margin-top:5em;}
.banmn_close a{display:inline-block;max-width:5em;transition:all 0.3s;}
.menulist_pg a:hover{color:var(--mnhov);}
.menulist_sns a:hover{color:var(--mnhov);}
.banmn_close a:hover{opacity:0.6;}

.menushow{ overflow: hidden;}
.menushow .menulistmob{ display: block;}
    .menushow .menuforbs{ animation:fadeIn 0.4s 0.1s both;}

.menuout .menulistmob{ display: block; }
    .menuout .menuforbs{ animation:fadeOut 0.4s both;}

@keyframes fadeIn {
  0% {opacity: 0;}
  100% {opacity: 1;}
}
@keyframes fadeOut {
  0% {opacity: 1;}
  100% {opacity: 0;}
}



/* menu */

header{display: block; padding-bottom: 0.18rem; background: #a7dcc4; position: relative;margin-bottom: 0.95rem;}
    .header_tx{text-align: center; font-size: 0.8em; line-height: 1.1; padding: 0.7em 1em 1em 1em;}
    .ioc_car02{ position: absolute; width: 3.5rem; left: calc(50% - 1.75rem); bottom:-0.9rem; }



    /* ban css */
    .ban_moremob{width: 100%; text-align: center; padding: 1em ; box-sizing: border-box;}
    .ban_more{--hbg: #a08f2e; display: inline-block; font-size: 0.85em; line-height:1; padding: 0.8em 4em 0.9em 4em; position: relative;color: #fff; transition: color 0.6s;  }
        .ban_more::after{ content: ""; position: absolute;top: 0; left: 0; width: 100%;height: 100%; display: block; transform: skewX(-12deg);transform-origin:center;background: var(--hbg,#a08f2e); z-index: 1; transition:all 0.3s;}
        .ban_more:hover{--hbg: #a7dcc4;color: #000;}
        .ban_more:hover::after{}
        .ban_more span{ position: relative; z-index: 10; }
    /* ban css */


.mob_width{ width: 1280px; max-width: 100%;margin: 0 auto; }
article{display: block; padding-bottom: 0.8rem;}
    .title_04{text-align: center; font-size: 0.85em;line-height: 1;}
    .title_04 span{display: inline-block; padding: 0.3em 2.2em; background: #3f3f3f; color: #fff; border-radius: 999px; margin-bottom: 0.5em;}
    .mob_title{position: relative; text-align: center; font-size: 1em; line-height: 1;padding: 1px 0;background:url("../images/title_bg.jpg") center 0 repeat; background-size: 0.75rem; padding-bottom: 0.65rem;}
        .title_ico{padding:0 0 1em 0; margin-top: -1em}
            .tico01{ height: 3em;}
            .tico02{ height: 2.7em;}
        .title_tx{ font-size: 2.4em; line-height: 1;}


    .article_cont{margin-top: -0.4rem; position: relative; z-index: 10;}
    .mobnotitle .article_cont{margin-top:0;}
        .con_tx{font-size: 0.9em;line-height: 2.3; padding:1.45em 0 1.2em 0; letter-spacing: 0.1em; text-align: center; font-weight: 500;}
        .typelist{display: flex; flex-wrap: wrap;justify-content: center;}
            .banid_ico{ width: 12.5%;margin: 0.78%; background:var(--pgic,#f3dadd);box-sizing: border-box; padding:2em 0.5em 1.8em 0.5em; text-align: center; transition: all 0.3s;}
            .banid_ico > span{width: 100%;height: 3em; line-height: 1.5; display: flex; justify-content: center; align-items: center; padding:0 0 1em 0;}
            .banid_ico img{ width: 3em; }
            .ban_cls01{--pgic:#f3dadd; }
            .ban_cls02{--pgic:#e9e5b5; }
            .ban_cls03{--pgic:#f5dcc8; }
            .ban_cls04{--pgic:#d9edc1; }
            .ban_cls05{--pgic:#d5e0e7; }
            .ban_cls06{--pgic:#e0dbea; }
            .ban_cls07{--pgic:#dadada; }
            .banid_ico:hover{background:#a7dcc4;}


    .examplelist{display: flex; flex-wrap: wrap;}
        .example_insmob{ width: 29.7%;margin: 1.6% 2.2% 1.6% 1.6%;}
        .examplelist .example_insmob:nth-child(3n){margin-right: 0;}
        .ban_hop{overflow: hidden; position: relative;display: block;height: 2.5rem; border-bottom: 0.02rem solid #a7dcc4; box-sizing: border-box;}
            .ban_hop img{width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; transition: all 1.6s; max-width: none; max-height: none;}
            .ban_hop:hover img{transform: scale(1.1, 1.1);}
            .icolist {
              font-size: 0.7em;
              line-height: 1.57;
              padding-top: 0.8em;
              display: flex;
              flex-wrap: wrap;
              gap: 0.4em; /* 各タグの間隔 */
            }
            
            .icolist .taglink {
              display: inline-block;
              padding: 0.3em 0.8em;
              background: #f3f3f3;
              border-radius: 999px;
              font-size: 0.85em;
              transition: background 0.3s, color 0.3s;
              border: 1px solid #ddd;
            }
            
            .icolist .taglink:hover {
              background: #a08f2e;
              color: #fff;
              border-color: #a08f2e;
            }


.linemob{ background: #e8e8db; padding: 0.3rem 0 0.5rem 0; }
    .linemob .ban_more{font-size: 1.5em;padding: 0.5em 4.5em 0.6em 4.5em; letter-spacing: 0.1em; font-weight: bold;}
    .addrline{display: flex; justify-content: center; align-items: center; padding: 1.3em;}
        .logo_tel{height: 2em;  width: auto;}
        .tel_num{font-size: 1.9em; padding: 0 0.5em 0.1em 0.4em; font-weight: bolder; position: relative;transition: color 0.3s;}
        .tel_num:hover{color: #a08f2e; cursor: pointer;}

.mob_info{padding: 0.7rem 0 0.2rem 0;}




/* page */
.page{}
.page main{display: block; width: 1340px; max-width: 96%;margin: 0 auto;}
    .ontenttitle_ico{text-align: center; padding: 0.4rem 0 0.25rem 0;}
        .type_ico{background:var(--pgic,#a7dcc4); display: inline-block;font-size: 0.9em; line-height: 1; padding:0.6em 6em;}
    .ontent_title{width: 960px; max-width: 90%;margin: 0 auto;font-size:1.4em; line-height: 1.4;letter-spacing: 0.05em; padding-bottom: 0.3rem;}

    .pagemob_inner{margin-top: 3%; padding: 1px 0 0.6rem 0; background:var(--pgic,#e8e8db);}
    .content_ph {
      margin: -3.21% auto 0 auto;
      width: 89.55%;
      padding-bottom: 0.35rem;
      height: 500px;
      overflow: hidden;
      display: flex;
      justify-content: center;
      align-items: center;
  }
  
  .content_ph picture {
      display: block;
      width: 100%;
      height: 100%;
  }
  
  .content_ph picture img {
      width: 100%;
      height: 100%;
      object-fit: cover; /* 縦長の画像を中央でトリミング */
  }
        .pagemob_content{padding:0 6.7%; margin-top: 2em;}/* 1150 */
            .content_line{display: flex; flex-wrap: wrap;align-items: center;padding-bottom: 2em;}


                .pagemob_content h2{font-size:1.5em;font-weight:bold;color:#333;border-left:6px solid #a08f2e;padding-left:0.6em;margin:1.5em 0;}
                .pagemob_content h3{font-family: fot-tsukuardgothic-std, sans-serif;font-weight: 400;font-style: normal;font-size:1.5em;font-weight:bold;color:#444;margin:1.2em 0;padding-left:1.3em; background: url("../svg/h3ico.svg") 0 0 no-repeat; background-size: 1em auto;}
                .pagemob_content h4{font-size:1.3em;font-weight:bold;color:#555;border-bottom:1px solid #a08f2e;padding-bottom:5px;margin-bottom:0.8em;}
                .pagemob_content h5{font-size:1.5em;font-weight:bold;color:#444;margin:1.2em 0;padding-left:1em; background: url("../svg/ico_01.svg") 0 0 no-repeat; background-size: 0.7em auto;}
                .pagemob_content p{font-size:1em;line-height:1.7;margin-bottom:1.5em;}
                .pagemob_content ul,.pagemob_content ol{margin-left:1.5em;}
                .pagemob_content ul{list-style:none;padding-left:0;}
                .pagemob_content ul li{margin-bottom:0.5em;line-height:1.6;position:relative;padding-left:1.5em;}
                .pagemob_content ul li::before{content:"►";font-size:1.1em;position:absolute;left:0;top:-0.15em;color:#a08f2e;}

                @media screen and (max-width:768px){.pagemob_content h2{font-size:1.5em;padding-left:10px;}
                .pagemob_content h3{font-size:2em;padding-left:1em;background-size: 0.75em auto;}
                .pagemob_content h4{font-size:1.2em;padding-bottom:4px;}
                }


                .contl_title{ width:20%;padding-right: 3%; text-align: center; letter-spacing: 0.1em;}
                    .ct_01{ font-size: 1.4em; line-height: 1.2; display: inline-block; }
                    .ct_02{font-size: 1.8em; line-height: 1.2; display: inline-block; padding-bottom: 0.5em;}
                .ctico{ width: 3.55em; }

                .contl_inst{ width: 77%; background: #fff; border-radius:0.5em; font-size: 0.9em; line-height: 1.85; padding:2em 3.4em; box-sizing: border-box;}
                .contl_inst p{margin-bottom:0;}

                .content_intitle{ text-align: center; padding: 0.7rem 0 0.5rem 0; }
                .content_intitle img{ height: 1rem; }

                .photomobs{position: relative;width: 900px; max-width: 80%; margin: 0.2rem auto 0.6rem auto;}

                .photos-slidemob{position: relative;margin: 0.2rem 0 0.6rem 0;}
                .photomobs-slide{overflow: hidden; padding: 0 0.4rem; }
                    .photomobs-slide .swiper-slide{display: flex; flex-wrap: wrap;justify-content: space-between}
                        .photo_before{ width: 48.5%; position: relative; }
                        .photo_3D{ width: 48.5%; position: relative; }
                        .photomobs-button-prev{position: absolute; cursor: pointer; width: 0.36rem; top: calc(50% - 0.18rem); left:-0.18rem; z-index:60;}
                        .photomobs-button-next{position: absolute; cursor: pointer; width: 0.36rem;top: calc(50% - 0.18rem); right:-0.18rem; z-index:60;}

                .keywork_mob{ background: #F3F2E9;margin-top: 0.5rem;padding-bottom: 0.5rem; }
                    .content_intitletx{text-align: center; font-size:1.4em; line-height: 130%;padding: 0.5rem 0 0.4rem 0;}
                    .keywork_list{ display: flex;flex-wrap: wrap; padding: 0 0.3rem; justify-content: center; align-items: center; }
                    .keywork_list li{ margin: 0.3em; font-size: 0.8em; line-height: 1;}
                    .keywork_list li a{ display: flex; padding: 0.3em 0.8em; background: #fff;}
                    .keywork_list li a::before{ content: ""; display: inline-block; width: 1.1em; height: 1.1em; background:url("../svg/keyword.svg")center center no-repeat; background-size: 100% auto; vertical-align: middle;margin-right: 0.2em; }
                    .keywork_list li a:hover{background: #b9b995; color: #fff;}




                .photolistmobs{padding:0 0 0.2rem 0; width:66.2%; margin: 0 auto; position: relative;}
                    .photo_ico{font-size: 1em; line-height: 1.8; position: absolute; top:0.1rem; left:-0.1rem; z-index: 20; padding:0.2em 2.5em ;  color: #fff;overflow: hidden;}
                    .photo_ico span{position: relative; z-index: 25;}
                    .photo_ico::after{ content: ""; position: absolute; top:0; left:0; width: 100%; height: 100%; z-index: 21;background: rgba(63, 63, 63, 1.0); transform: skewX(-15deg); transform-origin: 0 0; }
                    .photolistmobs .swiper-slide{ transform: scale(0.6, 0.6); transform-origin: 50%; transition:all 0.3s; text-align: center; }
                    .photolistmobs .swiper-slide.swiper-slide-active{ transform: scale(1, 1); position: relative;z-index: 50;}
                        .phclip{ position: relative;padding-top:66%;overflow: hidden; }
                        .phclip img{ position: absolute ; top: 0; left: 0; width: 100%; height:100%;object-fit: cover;object-position: 50% 50%; }
                        
                    .sl_tx{font-size: 0.85em; display: inline-block; padding-top: 0.5em}
                    .photo-button-prev{position: absolute; cursor: pointer; width: 0.36rem; top: calc(50% - 0.18rem); left:calc(1px - 22% - 0.18rem); z-index:60;}
                    .photo-button-next{position: absolute; cursor: pointer; width: 0.36rem;top: calc(50% - 0.18rem); right:calc(1px - 22% - 0.18rem); z-index:60;}
                    .photo-button-prev:hover,.photo-button-next:hover{opacity: 0.8;}
                    .swiper-button-disabled{opacity: 0.3!important;}
                    .swiper-button-disabled:hover{opacity: 0.3!important;}

                .content_flex{display: flex; flex-wrap: wrap; width: 960px; max-width: 90%; font-size: 0.82em; line-height: 1.5; margin: 0 auto;}
                    .content_flex dt{ text-align: center; width:28.15%;margin-right: 1.85%;margin-bottom: 1.85%; background: #828282; padding:0.5em 1em; box-sizing: border-box; color: #fff; display: flex; justify-content: center; align-items: center; }
                    .content_flex dd{ text-align: left;width:70%;margin-bottom: 1.85%;box-sizing: border-box; background: #fff; padding:0.5em 1.5em;}

                .pgtypelist{ display: flex; flex-wrap: wrap; justify-content: center; align-items: center; padding: 0.3rem 1.2rem 0.6rem 1.2rem; }
                    .banpg_ico{display: flex;justify-content: center; align-items: center;width:14em;margin: 0.78%; background:var(--pgic,#f3dadd);box-sizing: border-box; padding: 0.6em 0.5em; text-align: center; transition: all 0.3s;}
                    .banpg_ico span{font-size: 0.85em; display: block; padding-left:0.6em }
                    .banpg_ico img{width: 1.8em;}
                    .banpg_ico:hover{--pgic: #a7dcc4;}

                .line{ width: 100%;--lnc: #000; height:0px; padding-top: 2px; background: var(--lnc); margin: 0.1rem 0 0.5rem 0;}
                .line::before{content: ""; display: block; width: 100%; height:1px;margin-top:3px;background: var(--lnc);}


                
            /* banmob */
            .banpagenp{  padding: 0.4rem 0.4rem 0.1rem 0.4rem; width: 100%; box-sizing: border-box;text-align: center;} 
                .banpagenp::after{ content: ""; display: block; height: 0; clear: both; }
                .banpagenp a{color: #000; transition: all 0.3s; }
                .banpagenp .ban_moremob{display: inline-block; width: auto; vertical-align: middle; padding: 0 1em; box-sizing:border-box;}
                .banpagenp .ban_moremob .ban_more{ color: #fff; }
                .banmore_pgl{ float: left;  line-height: 100%; padding-top: 0.3em;}
                .banmore_pgr{ float: right;  line-height: 100%; padding-top: 0.3em;}
                .banmore_pgl a:hover{opacity: 0.7;}
                .banmore_pgr a:hover{opacity: 0.7;}
                .ban_txins{vertical-align: middle;}
                .banmore_pgl img{ vertical-align: middle;margin-right: 0.2em; height: 1.4em;  }
                .banmore_pgr img{ vertical-align: middle;margin-left: 0.2em; height: 1.4em; }
            /* banmob */



/* photo */
.image-compare-container {position: relative; padding-bottom: 80%;overflow: hidden;}
.compare-image {position: absolute;top: 0;width: 100%;height: 100%;object-fit: cover;outline: none; }
.image-before {z-index: 2;clip-path: inset(0 50% 0 0);/* filter: grayscale(100%); */}
.slider {position: absolute;top: 0;left: 50%;width: 4px;height: 100%;background: #fff;z-index: 3;cursor: col-resize;transform: translateX(-50%);}
.slider-button {position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);width: 40px;height: 40px;border-radius: 50%;background: #fff;display: flex;align-items: center;justify-content: center;box-shadow: 0 2px 10px rgba(0,0,0,0.2);}
/* photo */



/* footer */
footer{margin-top: 0.8rem; position: relative;background: #343434; }
    .carline{--iw: 1.14rem;--as: 3s; position: relative;}
    .carpos{ position: absolute; top: -0.7rem;left:100%;width:var(--iw); height: 0.7rem; }
    .anicar{ animation:anicar var(--as,18s) var(--ds,0s) linear infinite; }
    .anicar img{width: auto; height: 100%;}


    .footermob{position: relative; z-index: 10; color: #fff; padding:0.4rem 0 0.6rem 0; display: flex; flex-wrap: wrap;align-items: center}
        .footlogo{width:25.3%; padding: 0 5.08%; text-align: center; box-sizing: border-box;}
            .foot_title{font-size: 1.15em; line-height: 1.1; letter-spacing: 0.15em;}
            .foot_logo{padding: 1.75em 0;}
            .foot_logo img{width:0.6rem;}
            .foot_copy{font-size: 0.6em; line-height: 1.1;}

        .flmenu{display: flex; width: 50%;align-items: center;}
            .ftmenulist_pg{ width: 50%; }
            .ftmenulist_pg a{display:inline-block; font-size: 0.9em; line-height:2.9; letter-spacing: 0.05em;transition: all 0.3s;}
            .ftmenulist_sns{width: 50%;}
            .ftmenulist_sns a{display: inline-block; font-size: 0.75em; line-height: 3.3; letter-spacing: 0.05em;transition: all 0.3s;}
            .ftmenulist_pg a:hover{ color:var(--mnhov); }
            .ftmenulist_sns a:hover{ color:var(--mnhov); }
        .ftbanlist{width:17%;}
            .ban_ftlogo{ display: block;margin: 1em 0;transition: all 0.3s; }
            .ban_ftlogo:hover{opacity: 0.8;}
/* footer */


@keyframes anicar {
  0% {transform: translateX(0); opacity: 0;}
  5% {opacity: 1;}
  100% {transform: translateX(calc(1px - 100vw - 0.8rem)); opacity: 1;}
}



@media screen and (max-width:1580px){
    :root{
        --htmlfont: 6.3vw;
    }
}


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

    :root{
        --htmlfont: 13vw;
        --fsbody: 0.2rem;
        --hdmh:4.7em;/* headmenu hight */
        --menfs:1em;/* menu font size */
    }

    html,body{ width: 100%; overflow-x: hidden;}
    .pc_none{display: block;}
    .sp_none{display: none;}

    .title_tx{ font-size: 2em;}

    .con_tx{padding: 1.45em 0.3rem 1.2em 0.3rem;}
        .mob_title{font-size: 1.2em;}
        .banid_ico{ width: 45%;margin: 1.5%; padding: 0.8em 0.5em 1.8em 0.5em;}
        .banid_ico > span{font-size: 1.25em; padding: 0;}
        .banid_ico img{ width: 4.5em; }
    .article_cont{padding: 0 1.7%; box-sizing: border-box;}
    .examplelist{padding: 0 2.5%; box-sizing: border-box;}
        .example_insmob{ width: 45%;margin: 2.5%;}
        .examplelist .example_insmob:nth-child(3n){margin-right:2.5%;}

        .ban_hop{overflow: hidden; position: relative;display: block;height: 2.5rem; border-bottom: 0.02rem solid #a7dcc4; box-sizing: border-box;}

        .linemob .ban_more{font-size: 1.3em; padding: 0.5em 3em 0.6em 3em;}
        .addrline{ font-size: 0.9em; }

        .contl_title{ width: 26%; }
            .ct_01{ font-size: 1.1em; }
            .ct_02{font-size: 1.4em;}
        .contl_inst{width: 71%;padding: 1.2em 1.8em;}

        .pgtypelist{ padding: 0.2rem 0.3rem 0.6rem 0.3rem; }

        .photomobs{max-width: 88%;}
        .photolistmobs{ padding: 0.3rem 0; width:85%;}

        .photo_before{ width:100%;margin-bottom: 0.15rem; }
        .photo_3D{ width:100%; }
        .photo_ico{ font-size: 0.9em; }

        .pagemob_content{padding:0 3%;}
        .content_flex{max-width: 95%;}


        /* banmob  */
        .banpagenp{ padding: 0.4rem 0.2rem 0.1rem 0.2rem;} 

        /* banmob */

/* page */
.page{}
.page main{max-width: 88%;}
.banpg_ico{margin: 0.5em;}


/*menu*/
.title b{ font-size: 1.35em; }
.menulist_inner{flex-direction: column;}
    .menulist_pg,.menulist_sns{width: 100%; align-items: center;align-content: normal;}


/* footer */
.footermob{width: 100%;justify-content: center}

    .carpos{ top: -0.5rem;left:100%;width:var(--iw); height: 0.5rem; }
    .anicar{}

    .footlogo{width: 28%; padding: 0 5.08% 0 2.08%;}
    .flmenu{width: 64%; }
        .ftmenulist_pg{ width:60%; }
        .ftmenulist_sns{ width: 40%; }

    .ftbanlist{ width: 100%; text-align: center; padding-top: 1em; }
    .ban_ftlogo{display: inline-block; width:30%;margin: 1em;}

}


/* --- NEWS --- */

/* ニュースリスト（タイトルと日付の位置ズレを防ぐ） */
#news_list li.clearfix {
  display: flex !important;
  align-items: center;
  gap: 1em;
  min-height: 40px;
  padding: 1em 0;
  border-bottom: 1px solid #e0e0e0 !important;
}

/* 日付とタイトルのマージン・パディングリセット */
#news_list li .date,
#news_list li .title {
  margin: 0;
  padding: 0;
}

/* 日付部分 */
#news_list li .date {
  flex: 0 0 auto;
  font-size: 0.9em;
  color: #999;
  width: 7em;
  line-height: 1.5;
}

/* タイトル部分 */
#news_list li .title {
  flex: 1 1 auto;
  font-size: 1.1em;
  color: #333;
  word-break: break-word;
  line-height: 1.5;
}

#news_list li .title a {
  display: block;
  text-align: left;
  width: 100%;
  text-decoration: none;
  color: inherit;
  transition: color 0.3s ease;
}

#news_list li .title a:hover {
  color: #a08f2e;
}

  .pagination {
    text-align: center;
    margin: 0 4em 4em 4em;
  }
  
/* ページ番号全体の基本スタイル */
/* ページ番号全体の基本スタイル（変更なし） */
.pagination .page-numbers {
    display: inline-block;
    padding: 0.5em 0.8em;
    margin: 0 0.3em;
    border: 1px solid #ccc;
    color: #333;
    font-size: 1em;
    text-decoration: none;
    transition: background 0.3s ease, color 0.3s ease;
    vertical-align: middle;
  }
  
  /* ホバー時 */
  .pagination .page-numbers:hover {
    background: #a08f2e;
    color: #fff;
  }
  
  /* 現在のページ */
  .pagination .page-numbers.current {
    background: #a08f2e;
    color: #fff;
    border-color: #a08f2e;
  }
  
  /* NEXT, PREV ボタンは、ページ番号と同じボックスサイズを維持しつつ、枠線の色を透明に */
  .pagination .next,
  .pagination .prev {
    display: inline-block;
    padding: 0.5em 0.8em;
    margin: 0 0.3em;
    border: 1px solid transparent; /* 枠線のスペースは確保しつつ色は透明 */
    color: #333;
    font-size: 1em;
    text-decoration: none;
    transition: background 0.3s ease, color 0.3s ease;
    vertical-align: middle;
    text-align: center;
  }
  
  .pagination .next:hover,
  .pagination .prev:hover {
    background: #a08f2e;
    color: #fff;
    /* 枠線はそのまま透明 */
    border-color: transparent;
  }
  
  /* NEXT, PREV ボタン内のテキストと画像の間隔 */
  .pagination .next img,
  .pagination .prev img {
    margin-left: 0.5em;
    vertical-align: middle;
  }
  
  /* スマホ表示時の画像サイズ調整 */
  @media screen and (max-width: 768px) {
    .pagination img {
      width: 1.2em;  /* 調整可能なサイズ */
      height: auto;
    }
  }



  /* MailForm*/
/* --- 入力フィールド全般（モダン＆洗練スタイル） --- */
form input[type="text"],
form input[type="email"],
form input[type="tel"],
form textarea,
form select {
  width: 100%;
  padding: 0.9em 1.2em;
  margin-bottom: 1.5em;
  border: 1px solid #e0e0e0;
  border-radius: 5px;
  background-color: #fafafa;
  font-size: 1em;
  box-sizing: border-box;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

form input[type="text"]:focus,
form input[type="email"]:focus,
form input[type="tel"]:focus,
form textarea:focus,
form select:focus {
  border-color: #74ad79;
  box-shadow: 0 3px 8px rgba(0,0,0,0.12);
  outline: none;
}

/* --- セレクトボックス --- */
form select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: url('/assets/images/select-arrow.png') no-repeat right 1em center;
  background-color: #fafafa;
  background-size: 0.8em auto;
  cursor: pointer;
}

/* --- チェックボックス（2回り大きめモダンスタイル） --- */
form input[type="checkbox"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 2.4em;
  height: 2.4em;
  border: 1px solid #d0d0d0;
  border-radius: 6px;
  background-color: #fff;
  margin-right: 0.5em;
  vertical-align: middle;
  cursor: pointer;
  transition: background-color 0.3s ease, border-color 0.3s ease;
  position: relative;
}

form input[type="checkbox"]:checked {
  background-color: #74ad79;
  border-color: #74ad79;
}

form input[type="checkbox"]:checked:after {
  content: "";
  position: absolute;
  left: 0.7em;    /* 調整済み */
  top: 0.3em;     /* 調整済み */
  width: 0.6em;   /* 調整済み */
  height: 1em;    /* 調整済み */
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

form input[type="checkbox"]:hover {
  border-color: #74ad79;
}

/* CF7 チェックボックスラベル */
form .wpcf7-list-item {
  display: inline-block;
  margin-right: 1em;
  font-size: 1em;
  vertical-align: middle;
}

/* --- 送信ボタン --- */
/* --- 送信ボタン（フラットデザイン） --- */
form input[type="submit"] {
    background: #343434;  /* 単色の背景色 */
    color: #fff;
    border: none;
    padding: 1em 1.5em;
    font-size: 1em;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.3s ease, box-shadow 0.3s ease;
  }
  
  form input[type="submit"]:hover {
    background: #669f66;
    box-shadow: 0 3px 8px rgba(0,0,0,0.2);
  }

/* --- ラベル --- */
form label.title {
  display: block;
  border-left: 4px solid #74ad79;
  padding: 0.5em;
  margin: 1em 0 0.5em 0;
  font-weight: bold;
  font-size: 1em;
  white-space: nowrap;
  text-align: left;
}

/* 必須マーク */
form span.required {
  color: #ff3b3b;
  margin-left: 0.2em;
}

/* --- 見出し --- */
/* ご相談内容見出しのモダンデザイン（グラデーション背景） */
form h3 {
  margin: 2em 0 1em 0 !important;
  padding: 1em;
  background: linear-gradient(to right, #74ad79, #8ecfa1);
  color: #fff;
  font-size: 1.6em;
  font-weight: bold;
  text-align: center;
  border-radius: 5px;
  position: relative;
}

form h3.no-left-line {
    background: #74ad79 !important;
    border-left: none !important;
    padding-left: 0 !important;
  }
  
  form h3.no-left-line:before {
    content: "";
  }

/* アイコン部分（不要の場合は空） */
form h3:before {
  content: "";
  position: absolute;
  left: 1em;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.2em;
  color: rgba(255,255,255,0.8);
}

/* --- インラインフィールド --- */
.form-group.inline-fields {
  display: flex;
  align-items: center;
  white-space: nowrap;
}

.form-group.inline-fields label.title {
  margin-right: 1em;
  white-space: nowrap;
}

.postal-code {
  display: inline-flex !important;
  align-items: center;
  white-space: nowrap;
}

.postal-code br {
  display: none;
}