@charset "EUC-JP";
/*------------------------------
基本
--------------------------------*/
html{
	-webkit-text-size-adjust: none;
	-webkit-font-smoothing: aliased;
	font-size: 62.5%;
    scroll-behavior: smooth;
}
body{
	font-family:"M PLUS 1","ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 1.5rem;
	color:#000000;
	margin:0px;
	padding:0px;
    line-height: 130%;
    letter-spacing: 0.1rem;
}
img{
	border:none;
}
a{
	color:#000000;
	text-decoration:none;
    transition: 0.3s;
    cursor:pointer;
}
a:hover{
	/*color:#21607d;*/
	text-decoration:none;
}
strong{
	font-weight:bold;
}
p{
    margin: 0;
    padding: 0;
}
.bbig{
    font-weight: 700;
}
.red{
    color: #e60000;
}
@media screen and (min-width: 768px) {
    /* 画面幅が768px以上のデバイスで適用されるスタイル */
    body{
        font-size: 1.6rem;
    }
}
@media screen and (min-width: 1024px) {
  /* 画面幅が1024px以上のデバイスで適用されるスタイル */
}

/*------------------------------
共通（ボタン・見出し・空間など）
--------------------------------*/
/*パンクズ*/
.breadcrumb {
    position: absolute;
    top: 265px;
    left: 0;
    right: 0;
    padding: 0px 8px;
    z-index: 5; /* 他の要素に埋もれないように */
    pointer-events: auto; /* タッチイベントを有効に */
    font-size: 1.3rem;
}
.breadcrumb ol {
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    
    display: block;
    list-style: none;
    padding: 0;
    margin: 0;
    
    /* スクロール可能領域を明確にする */
    touch-action: pan-x; /* 横スクロールのみ許可 */
    
    /* スクロールバーを隠す */
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.breadcrumb ol::-webkit-scrollbar {
    display: none;
}
.breadcrumb ol li {
    display: inline-block;
    white-space: nowrap;
    margin: 0;
    padding: 0;
    vertical-align: middle;
}
.breadcrumb ol li a {
    display: inline-block;
    text-decoration: none;
    color: inherit;
    white-space: nowrap;
    padding: 8px 0; /* タッチ領域を広げる */
    transition: 0.3s;
}
.breadcrumb ol li a:hover {
    color: #0c9164;
}
.breadcrumb .hs-arrow{
    display: none !important;
}
.breadcrumb p{
    height: 16px;
    text-align: right;
}
.breadcrumb p img{
    height: 16px;
}


/*空間系*/
.p_txtMini{
    font-size: 1.4rem;
    line-height: 126%;
    color: #4a4ace;
    margin-bottom: 13px;
}
.p_txt18{
    font-size: 1.6rem;
}
.mt70{
    margin-top: 50px;
}
.page_c{
    text-align: center;
}
.kasoMain{
    border-bottom: 1.5px solid #ccc;
    padding-bottom: 50px;
    margin-bottom: 60px;
}

/*見出し系*/
.sr-only{
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.miTitle-set{
    text-align: center;
    margin: 20px 10px;
}
.miTitle-set h2.miTitle{
    font-size: 5rem;
    font-weight: 800;
    line-height: 100%;
    margin-bottom: 10px;
}
.miTitle-set p small{
    font-size: 1.3rem;
}

.kaso_miTitle-set {
    background-image: repeating-linear-gradient(45deg, #0a9165, #13988d 10px, #33333366 10px, #33333366 11px);
    padding: 30px 0px;
    text-align: center;
    color: #ffffff;
    margin-bottom: 40px;
}
.kaso_miTitle-set h2.miTitle{
    font-size: 3.8rem;
    font-weight: 700;
    line-height: 100%;
}
.miTitle_com{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin: 25px auto 0 auto;
    width: 95%;
}
.kaso_miTitle-set p.miTitle_com_txt{
    width: 92%;
    margin: 0 5px 0px 0px;
    max-width: 1200px;
    font-weight: 500;
    color: #fff;
    line-height: 150%;
    font-size: 1.3rem;
    overflow: scroll;
    height: 70px;
}
.scroll_img{
    height: 70px;
}
.scroll_img img{
    height: 70px;
    width: auto;
}

.cat_midashi{
    padding-top: 10px;
}
.cat_midashi h3{
    width: 90%;
    max-width: 1000px;
    padding: 18px 15px;
    margin: 30px auto;
    border-radius: 10px;
    font-weight: 700;
    --stripe-color: #eee;
    color: #333;
    background: linear-gradient(135deg, #00000033 25%, var(--stripe-color) 26%, var(--stripe-color) 50%, transparent 51%, #00000033 75%, var(--stripe-color) 76%, var(--stripe-color));
    background-size: 4px 4px;
    font-size: 1.8rem;
}
.kaso_miH3{
    margin: 60px 0px 20px 0px ! Important;
    padding: 18px 15px ! Important;
    font-size: 2.2rem !important;
    font-weight: 500;
    line-height: 130%;
    text-align: left !important;
    color: #1d7489;
    text-shadow: 0 0 5px white;
    border-left: solid 7px #1c7589;
    background: -webkit-repeating-linear-gradient(-45deg, #dbe7f1, #dbe7f1 3px, #e9f4ff 3px, #e9f4ff 7px);
    background: repeating-linear-gradient(-45deg, #dbe7f1, #dbe7f1 3px, #e9f4ff 3px, #e9f4ff 7px);
}
.sitemapTitle{
    margin: 20px 0px 20px 0px ! Important;
    padding: 10px 12px ! Important;
    font-size: 1.8rem !important;
    font-weight: 500;
    line-height: 130%;
    text-align: left !important;
    color: #1d7489;
    /*text-shadow: 0 0 5px white;*/
    background: #eeeeee4f;
    border-left: solid 7px #1c7589;
    border-top: 1px solid #ccc;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}
.sTorange{
    border-left: solid 7px #FF9800 !important;
}
.sTpurple{
    border-left: solid 7px #ae89ef !important;
}
.sTred{
    border-left: solid 7px #c4372d !important;
}
.sTgreen{
    border-left: solid 7px #8bc34a !important;
}
.sTyellow{
    border-left: solid 7px #eccd0b !important;
}
.sTbrown{
    border-left: solid 7px #795548 !important;
}
.sTSky{
    border-left: solid 7px #6cbde5 !important;
}
.sTpink{
    border-left: solid 7px #e56cdb !important;
}
.sTgrey{
    border-left: solid 7px #5e5d5d !important;
}
.sitemapTitle .i_arrow:before{
    color: #ffffff;
    background: #1d7489;
    width: 28px;
    height: 28px;
    display: inline-block;
    text-align: center;
    line-height: 190%;
    border-radius: 50%;
    font-size: 1.5rem;
}
.sitemapTitle a{
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #1d7489;
}
.sitemapTitle small{
    font-size: 1.3rem;
    display: block;
    line-height: 100%;
}
h4.sitemapTitle_mini {
    background: #e3e3e3;
    padding: 6px 10px 6px 6px;
    border-radius: 4px;
    margin-bottom: 10px;
}
h4.sitemapTitle_mini a{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
h4.sitemapTitle_mini a:hover{
    
}
.sitemapTitle_mini .i_arrow:before{
    color: #ffffff !important;
    background: #000000;
    width: 20px;
    height: 20px;
    display: inline-block;
    text-align: center;
    line-height: 180%;
    border-radius: 50%;
    font-size: 1.2rem;
}

/*ボタン系*/
.btn_green{
    background: #0c9164;
    color: #ffffff;
    display: inline-block;
    padding: 7px 22px;
    border-radius: 30px;
    margin: 0px 5px 13px;
}
.btn_defa{
    font-size: 1.8rem;
    background: #fff;
    margin: 0 auto;
    display: inline-block;
    padding: 12px 30px;
    line-height: 150%;
    color: #0c9164;
    font-weight: 500;
    border-radius: 30px;
    width: 80%;
}
.moreBtn_box{
    margin: 40px 0px;
}
.moreBtn{
    font-size: 1.8rem;
    background: #000000;
    margin: 0 auto;
    display: inline-block;
    padding: 12px 30px;
    line-height: 150%;
    color: #ffffff;
    font-weight: 500;
    border-radius: 30px;
    width: 80%;
}
.base_btn_box{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-top: 50px;
}
.base_btn_box2{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-top: 0px;
}
.base_btn {
    min-width: 300px;
    padding: 10px 25px;
    margin: 0 15px 15px 15px;
    color: #fff;
    line-height: 100%;
    transition: 0.3s ease-in-out;
    font-size: 1.6rem;
    font-weight: 500;
    border-radius: 50px;
}
.base_btn:hover {
    transform: translateY(3px);
}
.back_btn{
    border: 1px solid #0d9065;
    display: inline-block;
    margin: 40px auto 20px auto;
    font-size: 1.6rem;
    line-height: 100%;
    transition: 0.3s;
    font-weight: 500;
    color: #0d9065;
    padding: 14px 25px;
    border-radius: 50px;
}
.back_btn:hover {
    color: #fff;
    background: #0d9065;
}
.btn_con{
    background: #555555;
    border-bottom: solid 5px #333;
}
.btn_line{
    background: #01ba03;
    border-bottom: solid 5px #053505;
}
.btn_osusume{
    background: #3f51b5f0;
    border-bottom: solid 5px #161f4df0;
}
.btn_con:hover {
    border-bottom: solid 2px #333;
}
.btn_line:hover {
    border-bottom: solid 2px #053505;
}
.btn_osusume:hover {
    border-bottom: solid 2px #161f4df0;
}
a.contact_btn{
    width: auto;
    margin: 5px 10px 10px 10px;
    padding: 20px 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    transition: 0.3s;
}
a.contact_btn i:before{
    display: block;
    margin-bottom: 5px;
    font-size: 3rem;
}
a.contact_btn small{
    font-size: 1.2rem;
}
a.contact_btn:hover{
    background: #eee;
}


@media screen and (min-width: 768px) {
    /* 画面幅が768px以上のデバイスで適用されるスタイル */
    .p_txt18{
        font-size: 1.8rem;
    }
    .breadcrumb{
        top: 320px;
        width: 100%;
        margin: 0px 10px 0px 10px;
        font-size: 1.6rem;
    }
    .breadcrumb p{display: none;}
    .osusume_brjp_pan{
        top: 375px;
    }
    .sitemap_pan{
        padding-top: 70px;
    }
    .contact_pan{
        top: 300px;
    }
    .tokushu_detail_pan{
        top: 340px;
    }
    
    .kaso_miTitle-set {
        padding: 50px 0px;
    }
    .kaso_miTitle-set h2.miTitle{
        font-size: 5rem;
    }
    .miTitle_com{
        display: block;
        width: 80%;
    }
    .kaso_miTitle-set p.miTitle_com_txt{
        width: 100%;
        font-size: 1.4rem;
        overflow: auto;
        height: 100%;
    }
    .kaso_miTitle-set p.scroll_img{
        display: none;
    }
    .mt70{
        margin-top: 70px;
    }
    .cat_midashi{
        padding-top: 30px;
    }
    .btn_defa,
    .moreBtn{
        font-size: 2.2rem;
        padding: 8px 30px;
        width: 450px;
    }
    .base_btn_box{
        flex-direction: row;
    }
    .base_btn {
        padding: 15px 25px;
        margin: 0 15px;
        font-size: 1.8rem;
    }
    .base_btn_box2{
        margin-top: 30px;
    }
    .kasoMain{
        margin-bottom: 80px;
    }
}
@media screen and (min-width: 1024px) {
  /* 画面幅が1024px以上のデバイスで適用されるスタイル */
    .osusume_brjp_pan{
        top: 320px;
    }
    .sitemap_pan{
        padding-top: 0px;
    }
}



/*------------------------------
ページャー
--------------------------------*/
.pagination{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    width: 90%;
    margin: 0 auto;
}
.pagination li a{
    font-size: 2rem;
    background: #0a9165;
    color: #fff;
    padding: 10px;
    margin: 10px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: block;
    text-align: center;
    line-height: 140%;
    font-weight: 500;
}
.pagination li a.active{
    border: 3px solid #0a9165;
    color: #0a9165;
    background: #fff;
    text-decoration: none;
}
.pagination li .i_right:before,
.pagination li .i_left:before{
    color: #ffffff;
}


/*------------------------------
webアイコン
--------------------------------*/
header nav .i_visit:before ,
header nav .i_mail:before,
.headTop p .i_visit:before,
.headTop p .i_mail:before{
    font-size: 2rem;
    vertical-align: bottom;
    color: #fff;
}
#introduction .i_arrow:before{
    font-size: 2.2rem;
    vertical-align: middle;
    color: #0a9165;
    margin-left: 10px;
}
.blogList-box .i_arrow:before,
.blist-box .i_arrow:before{
    font-size: 2.2rem;
    vertical-align: middle;
    margin-left: 10px;
    color: #fff;
}
.step-inner i:before{
    color: #fff;
    font-size: 2.4rem;
    vertical-align: middle;
    margin-bottom: 0px;
    margin-right: 5px;
}
.article-box-inner i:before{
    color: #fff;
    font-size: 2.2rem;
    vertical-align: baseline;
    margin-right: 8px;
}
.shop-info i:before{
    color: #fff;
    font-size: 2.2rem;
    vertical-align: sub;
}
footer nav i:before{
    color: #ffffff !important;
    margin-right: 8px;
    font-size: 2rem;
    vertical-align: sub;
}
i.i_new{
    display: inline-block;
    line-height: 50%;
    vertical-align: -webkit-baseline-middle;
}
i.i_new:before{
    font-size: 4rem;
    color: #ce1b31;
}
.base_btn .i_document:before,
.base_btn .sns_line:before,
.base_btn .i_mail:before{
    font-size: 3rem;
    margin-right: 8px;
    vertical-align: middle;
    color: #fff;
}
.contact_btn .i_visit:before{
    color: #4d4d77;
}
.contact_btn .i_home:before{
    color: #ff9900;
}
.contact_btn .i_building:before{
    color: #1674BA;
}
.contact_btn .i_sale:before{
    color: #F26C7D;
}
.contact_btn .i_jigyo:before{
    color: #383B5F;
}
.contact_btn .i_site:before{
    color: #666666;
}
.contact_btn .i_mail:before{
    color: #988676;
}
.sitemapWrap .i_link{
    font-size: 1.4rem;
    margin-left: 4px;
    vertical-align: baseline;
    background: #545454;
    padding: 2px;
    border-radius: 2px;
    transition: 0.3s;
}
.sitemapWrap .i_link:before{
    color: #fff;
}
.sitemapBlock .sitemapList li a:hover .i_link{
    background: #1d7489;
}


@media screen and (min-width: 768px) {
    /* 画面幅が768px以上のデバイスで適用されるスタイル */
    .step-inner i:before{
        vertical-align: baseline;
        font-size: 3rem;
        margin-right: 8px;
        margin-bottom: 10px;
    }
}
@media screen and (min-width: 1024px) {
  /* 画面幅が1024px以上のデバイスで適用されるスタイル */
}



/*------------------------------
ヘッダー
--------------------------------*/
#container{
    width: 100%;
}
header{
    display: none;
}
#headerWrap{
    position: fixed;
    z-index: 10;
}
header h1 a,
#headerWrap h1 a{
    height: 60px;
    display: flex;
    flex-direction: row;
}
#headerWrap h1 a{
    padding: 5px 0px;
}
header nav ul{
    font-weight: 700;
}
header nav li a{
    transition: 0.3s;
}
header nav li a:hover{
    color: #0c9164;
}
.headTop{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 95%;
    margin: 12px auto;
    box-sizing: border-box;
}
.headTop p{
    display: flex;
    align-items: center;
}
.side_sns a{
    margin-left: 6px;
}

@media screen and (min-width: 768px) {
    /* 画面幅が768px以上のデバイスで適用されるスタイル */
    header{
        display: contents;
        padding: 10px 0px;
    }
    header nav{
        display: flex;
        list-style: none;
        flex-wrap: wrap;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        font-size: 1.7rem;
        margin-top: 8px;
        margin-bottom: 12px;
        width: 100%;
    }
    header nav ul{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        font-size: 1.8rem;
        width: 100%;
    }
    header nav ul li{
        margin-right: 32px;
    }
    header .p_text{
        font-size: 1.3rem;
    }
    header h1,#headerWrap h1{
        width: 35%;
        margin-right: 5%;
    }
    header h1 img,#headerWrap h1 img{width: 50%;}
    header .p_right{
        width: 100%
    }
    header nav{
        font-size: 1.8rem;
    }
    .side_sns a{
        display: inline-block;
    }
}
@media screen and (min-width: 1024px) {
  /* 画面幅が1024px以上のデバイスで適用されるスタイル */
    header{
        display: flex;
        padding: 10px 0px;
    }
    header h1,#headerWrap h1{width: 20%}
    header nav{
        margin-top: 8px;
        margin-bottom: 0px;
    }
    header nav ul{
        width: 60%;
        justify-content: flex-start;
    }
    header .p_right{
        width: 80%
    }
}

/*------------------------------
メインビジュアル
--------------------------------*/
main{
    margin-top: 62px;
}
main.topMain{
    margin-top: 0px;
}
/* --- 全体のBOX定義 ---------------------------------------- */
#mainv {
  position   : relative;
  max-width  : 100%;
  height     : 420px;
  margin     : auto;
  overflow   : hidden;
}

/* --- 背景の指定 ------------------------------------------- */
#mainv .bgImg {
  position   : absolute;
  top        : 0;
  left       : -200px;
  bottom     : 0;
  right      : 0;
  opacity    : 0;
  animation  : bgAnime 20s infinite;   /* 4画像 × 各5s = 20s */
}

/* --- 段差で背景画像のアニメーションを実行 ----------------- */
#mainv .src1 {
    background-image : url('../images/mainv1.jpg');   /* 背景の画像を指定 */
    background-size: cover;
}
#mainv .src2 {
    background-image : url('../images/mainv2.jpg');   /* 背景の画像を指定 */
    animation-delay  : 5s;
    background-size: cover;
}
#mainv .src3 {
    background-image : url('../images/mainv3.jpg');   /* 背景の画像を指定 */
    animation-delay  : 10s;
    background-size: cover;
}
#mainv .src4 {
    background-image : url('../images/mainv4.jpg');   /* 背景の画像を指定 */
    animation-delay  : 15s;
    background-size: cover;
}

@keyframes bgAnime {
   0% { opacity: 0; }
   8% { opacity: 1; }
  25% { opacity: 1; }
  33% { opacity: 0; }
 100% { opacity: 0; }
}

/* --- 前面の文字定義 ----- */
#mainv .mainvString{
    position   : absolute;
    display    : inline-block;
    padding    : 20px;
    color      : #fff;
    top        : 10%;
    left       : 0%;
    /*z-index    : 11;*/
    width: 100%;
    text-align: center;
}
.mainvString_logo{
    height: 96px;
    width: auto;
}
.mainv_copy{
    line-height: 100%;
   margin-top: 25px;
   margin-right: -30px;
   font-size: 4rem;
   font-weight: 700;
   color: #ffffff;
   text-shadow: rgb(51, 51, 51) 6px 0px 0px, rgb(51, 51, 51) 5.91686px 0.995377px 0px, rgb(51, 51, 51) 5.66974px 1.96317px 0px, rgb(51, 51, 51) 5.2655px 2.87655px 0px, rgb(51, 51, 51) 4.71532px 3.71022px 0px, rgb(51, 51, 51) 4.03447px 4.44106px 0px, rgb(51, 51, 51) 3.24181px 5.04883px 0px, rgb(51, 51, 51) 2.35931px 5.51667px 0px, rgb(51, 51, 51) 1.41143px 5.83163px 0px, rgb(51, 51, 51) 0.424423px 5.98497px 0px, rgb(51, 51, 51) -0.574341px 5.97245px 0px, rgb(51, 51, 51) -1.55719px 5.79441px 0px, rgb(51, 51, 51) -2.49688px 5.45578px 0px, rgb(51, 51, 51) -3.36738px 4.96596px 0px, rgb(51, 51, 51) -4.14455px 4.33852px 0px, rgb(51, 51, 51) -4.80686px 3.59083px 0px, rgb(51, 51, 51) -5.33596px 2.74364px 0px, rgb(51, 51, 51) -5.71718px 1.8204px 0px, rgb(51, 51, 51) -5.93995px 0.84672px 0px, rgb(51, 51, 51) -5.99811px -0.150428px 0px, rgb(51, 51, 51) -5.89004px -1.14341px 0px, rgb(51, 51, 51) -5.61874px -2.1047px 0px, rgb(51, 51, 51) -5.19172px -3.00766px 0px, rgb(51, 51, 51) -4.62082px -3.82727px 0px, rgb(51, 51, 51) -3.92186px -4.54081px 0px, rgb(51, 51, 51) -3.11421px -5.12852px 0px, rgb(51, 51, 51) -2.22026px -5.57409px 0px, rgb(51, 51, 51) -1.26477px -5.86518px 0px, rgb(51, 51, 51) -0.274238px -5.99373px 0px, rgb(51, 51, 51) 0.723898px -5.95617px 0px, rgb(51, 51, 51) 1.70197px -5.75355px 0px, rgb(51, 51, 51) 2.63288px -5.39147px 0px, rgb(51, 51, 51) 3.49082px -4.87998px 0px, rgb(51, 51, 51) 4.25202px -4.23324px 0px, rgb(51, 51, 51) 4.89538px -3.46919px 0px, rgb(51, 51, 51) 5.40307px -2.60899px 0px, rgb(51, 51, 51) 5.76102px -1.67649px 0px, rgb(51, 51, 51) 5.95932px -0.697531px 0px;
}
.mainv_copymini{
    line-height: 120%;
    margin-top: 10px;
    font-size: 2.4rem;
    font-weight: 500;
    color: #ffffff;
    text-shadow: rgb(51, 51, 51) 4px 0px 0px, rgb(51, 51, 51) 3.87565px 0.989616px 0px, rgb(51, 51, 51) 3.51033px 1.9177px 0px, rgb(51, 51, 51) 2.92676px 2.72656px 0px, rgb(51, 51, 51) 2.16121px 3.36588px 0px, rgb(51, 51, 51) 1.26129px 3.79594px 0px, rgb(51, 51, 51) 0.282949px 3.98998px 0px, rgb(51, 51, 51) -0.712984px 3.93594px 0px, rgb(51, 51, 51) -1.66459px 3.63719px 0px, rgb(51, 51, 51) -2.51269px 3.11229px 0px, rgb(51, 51, 51) -3.20457px 2.39389px 0px, rgb(51, 51, 51) -3.69721px 1.52664px 0px, rgb(51, 51, 51) -3.95997px 0.56448px 0px, rgb(51, 51, 51) -3.97652px -0.432781px 0px, rgb(51, 51, 51) -3.74583px -1.40313px 0px, rgb(51, 51, 51) -3.28224px -2.28625px 0px, rgb(51, 51, 51) -2.61457px -3.02721px 0px, rgb(51, 51, 51) -1.78435px -3.57996px 0px, rgb(51, 51, 51) -0.843183px -3.91012px 0px, rgb(51, 51, 51) 0.150409px -3.99717px 0px, rgb(51, 51, 51) 1.13465px -3.8357px 0px, rgb(51, 51, 51) 2.04834px -3.43574px 0px, rgb(51, 51, 51) 2.83468px -2.82216px 0px, rgb(51, 51, 51) 3.44477px -2.03312px 0px, rgb(51, 51, 51) 3.84068px -1.11766px 0px, rgb(51, 51, 51) 3.9978px -0.132717px 0px;
}
.mainv_copy small{
    font-size: 3.2rem;
}
.mainv_copy span.f_yellow,
.mainv_copymini span.f_yellow{
    color: yellow !important;
}
.mainv_copymini span.block{
    display: inline-block;
}
.medal{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    margin-top: 25px;
}
.medal .medal_language{
    width: 54%;
}
@media screen and (min-width: 768px) {
    /* 画面幅が768px以上のデバイスで適用されるスタイル */
    main{
        margin-top: 0px;
    }
    #mainv {
      height     : 550px;
    }
    #mainv .mainvString{
        top        : 10%;
        left       : 5%;
        width: 50%;
    }
   .mainv_copy{
       font-size: 5.7rem;
    }
    .mainv_copy small {
        font-size: 4.2rem;
        margin: 0px 3px;
    }
    .mainv_copymini{
        line-height: 100%;
    }
    #mainv .bgImg {
        left: 0;
    }
}
@media screen and (min-width: 1024px) {
  /* 画面幅が1024px以上のデバイスで適用されるスタイル */
}

/*------------------------------
TOP_コンテンツ
--------------------------------*/
/*エイブルにお任せ＆駅別*/
#introduction{
    background: #0c9164;
    color: #fff;
    padding: 50px 0px 0px 0px;
    position: relative;
    margin-bottom: 130px;
}
#introduction::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #0c9164;
    transform: skewY(-3deg) translateY(90px);
    transform-origin: bottom;/* 傾斜の基準を下に設定 */
    z-index: -1;
}
#introduction h2{
    font-size: 3.6rem;
    font-weight: 700;
    text-align: center;
    line-height: 100%;
    width: 90%;
    margin: 0 auto;
}
#introduction h2 small{
    font-size: 3rem;
}
#introduction h2 span{
    display: inline-block;
}
#introduction p.p_txt18{
    width: 90%;
    margin: 50px auto 30px auto;
    line-height: 170%;
}
.mugen-loop { overflow: hidden; }
.about_station{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    width: max-content;
    animation: scrollAnimation 50s linear infinite;
    gap: 20px;
}
.about_station article h3{
    font-size: 2.2rem;
    letter-spacing: 0.1rem;
    font-weight: 500;
    color: #fff;
    margin-top: 7px;
}
.about_station article h3 small{
    font-size: 1.4rem;
}
.about_station article p{
    margin-top: 7px;
    color: #fff;
}
/* ★ホバーでアニメーションを一時停止するCSSを追加 */
.mugen-loop:hover .about_station {
    animation-play-state: paused;
}
@keyframes scrollAnimation {
  0% { transform: translateX(0%); }
  100% { transform: translateX(-50%); }
}
a:hover{ opacity: 0.8; }
.about_station{ gap: 15px; }
.about_station article { width: calc(100vw / 3);}

@media screen and (min-width: 768px) {
  /* 画面幅が768px以上のデバイスで適用されるスタイル */
    #introduction{
        padding: 80px 0px 0px 0px;
    }
    #introduction h2{
        font-size: 5rem;
    }
    #introduction h2 small{
        font-size: 3.6rem;
    }
    #introduction p.p_txt18{
        width: 80%;
        line-height: 200%;
    }
    .about_station article {
        width: calc(100vw / 6);
        gap: 20px;
    }
    .about_station article h3{
        font-size: 2.4rem;
        letter-spacing: 0.1rem;
        font-weight: 500;
    }
    .about_station article h3 small{
        font-size: 1.6rem;
    }
}
@media screen and (min-width: 1024px) {
  /* 画面幅が1024px以上のデバイスで適用されるスタイル */
    .about_station article {
        width: calc(100vw / 7);
        gap: 20px;
    }
}

/*PICK UP*/
.blogList-box{
    padding: 20px 0px;
}
.blogList-box .bl_box{
    margin-top: 30px !important;
}
/*記事自体のcssはbk.cssに記載*/


/*NEW LIST*/
.blist-box{
    background: #e8f9f6;
    padding: 0px 0px 0px 0px;
    position: relative;
    margin: 130px 0px;
}
.blist-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #e8f9f6;
    transform: skewY(3deg) translateY(-90px);
    transform-origin: bottom;/* 傾斜の基準を下に設定 */
    z-index: -1;
}
.blist-box::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #e8f9f6;
    transform: skewY(-3deg) translateY(90px);
    transform-origin: bottom;/* 傾斜の基準を下に設定 */
    z-index: -1;
}

.carousel {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    anchor-name: --carousel;
    
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: var(--size-content-1);
    gap: var(--size-4);
    inline-size: 100vw;
    max-inline-size: 100vw;
    margin: 0 auto;
    padding: 10px 20px;
}

.carousel .carousel__slide {
    scroll-snap-align: center;
    
    width: 280px;
    border: 1px solid #000;
    border-radius: 10px;
    background: #fff;
    padding: 10px;
    margin: 2px 5px;
}
.carousel--scroll-buttons::scroll-button {
    position: fixed;
    position-anchor: --carousel;
    position-visibility: always;
    font-family: "Material Symbols Outlined";
}
/*.carousel--scroll-buttons::scroll-button(right) {
    position-area: inline-end center;
    content: 'arrow_forward' / 'Next';
}
.carousel--scroll-buttons::scroll-button(left) {
    position-area: inline-start center;
    content: 'arrow_back' / 'Previous';
}*/

.pitem .pitem__body h3{
    margin: 8px 0px;
    font-size: 1.6rem;
    font-weight: bold;
    border-bottom: 1px solid #333;
    padding-bottom: 8px;
}
.blist article .pitem__price{
    font-weight: 700;
    font-size: 2.2rem;
}
.blist article .pitem__fee{
    font-size: 1.4rem;
}
.blist article .gray{
    color: #666666;
}
.blist article .pitem__text{
    font-size: 1.4rem;
    line-height: 120%;
    margin: 10px 0px;
}
.blist-box .moreBtn_box{
    margin: 80px 0px 40px 0px;
}
.pitem a img{
    width: 100%;
    height: auto;
    max-height: 190px;
    object-fit: cover;
}

/* バッジ：10px・横並び・色付き */
.pitem .pitem__badges{
  display:flex; flex-wrap:wrap; gap:6px; margin:6px 0 6px; padding:0; list-style:none;
}
.pitem .badge{
	font-size:10px; line-height:1;
	padding:6px 8px;
	border-radius:999px;
	background:#efefef; color:#333; border:1px solid #e5e5e5;
	white-space:nowrap;
}
p.plist__sub{
	text-align:right;
	padding:10px;
	font-size:1.4rem;
}
/* バリエーション色（必要に応じて追加） */
.pitem .badge--new{
  background:#e7f1ff; color:#003c7e; border-color:#b3d0ff;
}
.pitem .badge--pet{
  background:#eaffec; color:#075e27; border-color:#c5f3cd;
}
.pitem .badge--design{
  background:#f8edff; color:#5b138b; border-color:#e8caff;
}
.pitem .badge--exe{
  background:#fff5e5; color:#7a3a00; border-color:#ffd9a1;
}
.pitem .badge--lgbt{
  background:#f2e6ff; color:#5a1da0; border-color:#dec6ff;
}
.pitem .badge--sinia{
  background:#ffeaea; color:#a02020; border-color:#ffc8c8;
}
.pitem .badge--cupple{
  background:#e8fff8; color:#006b54; border-color:#bdf2dc
}
.pitem .badge--family{
  background:#fff9e3; color:#6e5400; border-color:#ffe79b;
}
.pitem .badge--single{
  background:#e9f5ff; color:#00537a; border-color:#c3e6ff;
}
.pitem .badge--maisonette{
  background:#f1f3ff; color:#2a358b; border-color:#d3d8ff;
}
.pitem .badge--tower{
  background:#fff0ed; color:#912c00; border-color:#ffc9b8;
}
.pitem .badge--bunjo{
  background:#e6f7ff; color:#0b4473; border-color:#b8e7ff;
}
.pitem .badge--share{
  background:#f1fff0; color:#246a0b; border-color:#ccf5c3;
}
.pitem .badge--renove{
  background:#fff1e8; color:#6b3000; border-color:#ffd6b8;
}
/*スクロールバーデザイン*/
.blist::-webkit-scrollbar {
    background: #333333;
    width: 10px;
    height: 8px;
    border-radius: 20px;
}
.blist::-webkit-scrollbar-thumb {
    background-color: #0a9165;
    border-radius: 20px;
}
@media screen and (min-width: 768px) {
  /* 画面幅が768px以上のデバイスで適用されるスタイル */
    .blist-box{
        padding: 80px 0px 0px 0px;
    }
    .blogList-box {
        padding: 60px 0px 80px 0px;
    }
}
@media screen and (min-width: 1024px) {
  /* 画面幅が1024px以上のデバイスで適用されるスタイル */
    .blogList-box{
        padding: 80px 0px;
    }
}



/*絵選ばれる5つの理由 reason*/
.reason{
    padding: 60px 0px 70px 0px;
    background: #4d4d4d;
    position: relative;
}
.reason::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #4d4d4d;
    transform: skewY(-3deg) translateY(-40px);
    transform-origin: bottom;/* 傾斜の基準を下に設定 */
    z-index: -1;
}

.reason h2{
    max-width: 1000px;
    width: 95%;
    margin: 0 auto;
    
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 140%;
    text-align: center;
    color: #fff;
}
.reason h2 span{
    display: inline-block;
}
.reason h2 big.sname,
.reason h2 big.number{
    font-size: 3.5rem;
}
.reason h2 .h2_top{
}
.reason h2 .h2_bottom{
    margin-top: -15px;
}
.reason div{
    max-width: 1000px;
    width: 90%;
    margin: 30px auto 0 auto;
    
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    box-sizing: border-box;
}
.reason div article{
    width: 100%;
    border: 1px solid #000;
    padding: 12px;
    margin: 0px 0px 20px 0px;
    background: #fff;
}
.reason div article h3{
    font-weight: 700;
    text-align: center;
    font-size: 2rem;
    line-height: 115%;
    padding: 8px 0px;
}

@media screen and (min-width: 768px) {
  /* 画面幅が768px以上のデバイスで適用されるスタイル */
    .reason{
        padding: 100px 0px;
    }
    .reason h2{
    font-size: 3.6rem;
    font-weight: 700;
    line-height: 100%;
    text-align: center;
    }
    .reason h2 span{
        display: inline-block;
    }
    .reason h2 big.sname{
        font-size: 5rem;
    }
    .reason h2 big.number{
        font-size: 10rem;
    }
    .reason h2 .h2_top{
        margin-right: 290px;
    }
    .reason h2 .h2_bottom{
        margin-left: 290px;
        margin-top: -15px;
    } 
    .reason div article{
        width: 31%;
        margin: 1%;
    }
}

@media screen and (min-width: 1024px) {
  /* 画面幅が1024px以上のデバイスで適用されるスタイル */
}


/*FLOW*/
.flow{
    padding: 80px 0px 120px 0px;
}
.stepBox{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.step-set{
    width: 90%;
}
.step-set img{
    height: 70px;
    width: auto;
    margin: 0px auto 10px auto;
    display: block;
}
.step-inner{
    border: 2px solid #333333;
    padding: 14px;
}
.step-inner ul{
    display: block;
    margin: 0 auto;
    font-size: 1.7rem;
    font-weight: 500;
    width: 80%;
}
.step-inner ul li{
    height: auto;
    padding: 6px 15px;
    margin: 14px 0px;
    background: #0c9164;
    color: #fff;
    border-radius: 70px;
}
.step-inner p{
    font-size: 1.6rem;
    line-height: 150%;
    
    text-align: center;
    margin-top: 15px;
    font-weight: 500;
}
.step-inner .red{
    color: #c1272d;
}
.stepBox .triangle {
    width: 0;
    height: 0;
    border-style: solid;
    border-right: 27px solid transparent;
    border-left: 27px solid transparent;
    border-top: 22px solid #333333;
    border-bottom: 0;
    margin: 25px 0px;
}
@media screen and (min-width: 768px) {
  /* 画面幅が768px以上のデバイスで適用されるスタイル */
    .stepBox{
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: row;
    }
    .step-set{
        max-width: 240px;
        width: 30%;
    }
    .step-set img{
        height: 53px;
    }
    .step-inner ul{
        writing-mode: vertical-lr;
        display: block;
        margin: 0 auto;
        font-size: 1.9rem;
        width: 100%;
    }
    .step-inner ul li{
        height: 240px;
        background: #0c9164;
        color: #fff;
        padding: 15px 10px;
        margin: 0px 14px;
        border-radius: 70px;
    }
    .step-inner p{
        font-size: 1.5rem;
    }
    .stepBox .triangle {
        width: 0;
        height: 0;
        border-style: solid;
        border-top: 27px solid transparent;
        border-bottom: 27px solid transparent;
        border-left: 22px solid #333333;
        border-right: 0;
        margin: 12px;
    }
}
@media screen and (min-width: 1024px) {
  /* 画面幅が1024px以上のデバイスで適用されるスタイル */
}



/*FAQ よくある質問*/
.faq{
    background: #f2f2f2;
    padding: 80px 0px 120px 0px;
}
.faqBox{
    max-width: 1000px;
    width: 90%;
    margin: 0 auto;
    padding: 50px 0px 0px 0px;
}
.qa {
    margin-bottom: 5px;
    border-bottom: 2px solid #4d4d4d;
}
.qa-topb{
    border-top: 2px solid #4d4d4d;
}
.qa summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    padding: 20px 10px;
    color: #000000;
    font-weight: 600;
    cursor: pointer;
    font-size: 1.8rem;
}
.qa summary span{
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.qa summary img{
    height: 40px;
    width: auto;
    margin-right: 12px;
    vertical-align: middle;
}
.qa summary::after {
    transform: translateY(-25%) rotate(45deg);
    width: 11px;
    height: 7px;
    margin-left: 10px;
    border-bottom: 3px solid #000000b3;
    border-right: 3px solid #000000b3;
    content: '';
    transition: transform .5s;
}
.qa[open] summary::after {
    transform: rotate(225deg);
}
.qa p {
    position: relative;
    transform: translateY(-10px);
    opacity: 0;
    margin: 0;
    padding: 0px 2px 25px 40px;
    color: #333;
    transition: transform .5s, opacity .5s;
    
    display: flex;
    align-items: center;
    line-height: 160%;
}
.qa p img{
    height: 40px;
    width: auto;
    margin-right: 20px;
    vertical-align: middle;
}
.qa[open] p {
    transform: none;
    opacity: 1;
}
@media screen and (min-width: 768px) {
  /* 画面幅が768px以上のデバイスで適用されるスタイル */
    .qa summary::after {
        width: 7px;
    }
}
@media screen and (min-width: 1024px) {
  /* 画面幅が1024px以上のデバイスで適用されるスタイル */
}



/*お役立ちコラム　箕面ブログ*/
.article-box{
    background: #0c9164;
    padding: 50px 0px;
}
.article-box-inner{
    background: #fff;
    max-width: 1100px;
    width: 90%;
    margin: 0 auto;
    padding: 30px;
    box-sizing: border-box;
}
.articleList{
    margin-top: 50px;
    padding: 0px 0px 30px 0px;
    border-top: 2px solid #4d4d4d;
}
.article_card{
    border-bottom: 2px solid #4d4d4d;
    
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-direction: column;
    padding: 20px 0px;
}
.article_card .left{
    text-align: left;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}
.article_card .left time{
    font-weight: 500;
    font-size: 1.8rem;
    letter-spacing: -0.05rem;
    margin-right: 10px;
}
.article_card h3.article_title{
    font-size: 2rem;
    text-decoration: underline;
    margin-bottom: 12px;
    line-height: 130%;
}
.article_card h3.article_title a{
    transition: 0.3s;
}
.article_card h3.article_title a:hover{
    color: #0c9164;
}
.article_card .article_com{
    font-size: 1.5rem;
}
.article_more a{
    font-size: 1.8rem;
    background: #000000;
    margin: 8px 0px;
    display: inline-block;
    padding: 10px 30px;
    line-height: 150%;
    color: #ffffff;
    font-weight: 500;
    border-radius: 30px;
    width: 100%;
}
@media screen and (min-width: 768px) {
  /* 画面幅が768px以上のデバイスで適用されるスタイル */
    .article-box-inner{
        padding: 60px;
    }
    .article_card{
        flex-direction: row;
    }
    .article_card .left{
        margin-right: 40px;
        margin-bottom: 0px;
        display: flex;
        flex-direction: column;
    }
    .article_card .left time{
        margin-right: 0px;
        margin-bottom: 5px;
    }
    .article_more a{
        margin: 0px 10px;
        width: 230px;
    }
}
@media screen and (min-width: 1024px) {
  /* 画面幅が1024px以上のデバイスで適用されるスタイル */
}





/*スタッフ*/
#staff-box{
    inline-size: 60vw;
    max-inline-size: 60vw;
    display: grid;
    grid-auto-flow: column;
    justify-content: end;
    margin-right: 0px;
    position: relative;
}
.staff-section .miTitle-set{
    flex-shrink: 0;
}
.staff-section {
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 30px;
    padding: 50px 0px;
}
.navigation {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 30px;
}

.nav-button {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #000;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s;
}

.nav-button:hover {
    background-color: #333;
}

.nav-button::before {
    content: '';
    width: 12px;
    height: 12px;
    border-top: 3px solid white;
    border-right: 3px solid white;
}

.nav-button.prev::before {
    transform: rotate(-135deg);
    margin-left: 5px;
}

.nav-button.next::before {
    transform: rotate(45deg);
    margin-right: 5px;
}

.carousel-container {
    flex: 1;
    overflow: hidden;
    position: relative;
    width: 110%;
    margin-left: 70px;
}

.carousel-track {
    display: flex;
    gap: 20px;
    transition: transform 0.5s ease;
    /*width: 110%;*/
}

.staff-card {
    min-width: calc(50% - 10px);
    width: 80%;
    background: white;
    border: 1.5px solid #000000;
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
    padding: 10px;
    box-sizing: border-box;
}

/*.staff-card.active {
border-color: #4CAF50;
border-width: 3px;
}*/

.staff-image {
width: 100%;
height: 230px;
object-fit: cover;
display: block;
}

.staff-name {
    font-size: 2.2rem;
    line-height: 100%;
    font-weight: 700;
    padding: 10px 20px 10px;
    text-align: center;
    border-bottom: 1px solid #000000;
}

.staff-description {
    padding: 8px 0px 6px;
    font-size: 1.4rem;
    line-height: 130%;
}
@media screen and (min-width: 768px) {
  /* 画面幅が768px以上のデバイスで適用されるスタイル */
    .staff-card {
        min-width: calc(50% - 10px);
    }
    .staff-section {
        flex-direction: row;
        gap: 40px;
        padding: 150px 0px;
    }
    .carousel-container {
        margin-left: 0px;
    }
}
@media screen and (min-width: 1024px) {
  /* 画面幅が1024px以上のデバイスで適用されるスタイル */
    .staff-card {
        min-width: calc(33.333% - 14px);
        width: 30%;
    }
}

/*店舗*/
 .shop-set {
    max-width: 100vw;
    width: 100%;
    margin: 0 auto;
}
.shop-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100vw;
}

.map-container {
    flex: 1;
    position: relative;
    width: 100%;
}
.shop-info article{
    width: 100%;
    padding-left: 0px;
    text-align: center;
    margin-top: 30px;
}

.map-placeholder {
    width: 100%;
    height: 400px;
    background: #e8e8e8;
    overflow: hidden;
}

.map-placeholder iframe {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.shop-info article img{
    height: 140px;
}
    
address{
    margin: 20px 0px 15px 0px;
}
.tel {
    font-size: 4.2rem;
    font-weight: 700;
    letter-spacing: -0.3px;
    line-height: 100%;
}    
.tel-label {
    font-size: 1.8rem;
    font-weight: 600;
    margin-right: 10px;
    letter-spacing: 1px;
}

address .address,
address .hours{
    margin: 5px 0;
}

.detail-button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background-color: #008B5C;
    color: white;
    padding: 10px 30px;
    border: none;
    border-radius: 50px;
    font-weight: 600;
    cursor: pointer;
    ransition: background-color 0.3s;
    text-decoration: none;
}

.detail-button:hover {
    background-color: #006B47;
}

        
@media (max-width: 768px) {
            .store-section {
                flex-direction: column;
                gap: 30px;
            }

            .map-placeholder {
                height: 300px;
            }

            .logo-text {
                font-size: 32px;
            }

            .store-name {
                font-size: 28px;
            }

            .tel-number {
                font-size: 32px;
            }

            .address {
                font-size: 16px;
            }
        }


@media screen and (min-width: 768px) {
  /* 画面幅が768px以上のデバイスで適用されるスタイル */
    .shop-info {
        flex-direction: row;
    }
    .map-container {
        width: 50%;
    }
    .shop-info article{
        width: 50%;
        padding-left: 40px;
        text-align: left;
        margin-top: 0px;
    }
}
@media screen and (min-width: 1024px) {
  /* 画面幅が1024px以上のデバイスで適用されるスタイル */
}



/*sns*/
.sns-set ul{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    flex-wrap: wrap;
    font-size: 4.6rem;
    line-height: 8rem;
    padding: 30px 0px;
    width: 95%;
    margin: 0 auto;
}
.sns-set ul li{
    padding: 0px 15px;
}
.sns-set ul li a{
    display: block;
}
.sns-set ul li a{
    transition: 0.3s;
}
.sns-set .line a:hover .sns_line:before,
.side_sns .sns_line:before{
    color: #01ba03;
}
.sns-set .x a:hover .sns_x:before,
.side_sns .sns_x:before{
    color: #7a7a7a;
}
.sns-set .instagram a:hover .sns_inst:before,
.side_sns .sns_inst:before{
    color: #CF2E92;
}
.sns-set .facebook a:hover .sns_fb:before,
.side_sns .sns_fb:before{
    color: #1877f2;
}
.sns-set .tikTok a:hover .sns_tk:before,
.side_sns .sns_tk:before{
    color: #FE2C55;
}
.sns-set .youtube a:hover .sns_yt:before,
.side_sns .sns_yt:before{
    color: #DA1725;
}

.line_banner{
    width: 90%;
    margin: 0 auto;
    max-width: 800px;
    padding-bottom: 60px;
}

@media screen and (min-width: 768px) {
  /* 画面幅が768px以上のデバイスで適用されるスタイル */
    .sns-set ul{
        padding: 80px 0px;
    }
    .line_banner{
        padding-bottom: 100px;
    }
}
@media screen and (min-width: 1024px) {
  /* 画面幅が1024px以上のデバイスで適用されるスタイル */
}

/*フッター*/
#foot_banner{
    background: #f2f2f2;
    padding: 70px 0px;
}
#foot_banner ul{
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}
#foot_banner ul li.fb_box{
    padding: 6px;
    width: 49%;
}
#foot_banner ul li.fb_box img{
    width: 100%;
    height: auto;
}
footer p.f_logo a{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 120px;
    max-width: 80%;
    width: auto;
    margin: 40px auto;
}
footer p.f_logo img{
    height: 120px;
    width: auto;
    max-width: 50%;
    margin: 0px 10px;
}
footer nav{
    margin-bottom: 40px;
}
footer nav ul{
    display: flex;
    margin: 0 auto 20px auto;
    justify-content: center;
    flex-wrap: wrap;
    width: 90%;
    max-width: 700px;
}
footer nav ul li{
    padding: 10px 14px;
    font-weight: 500;
}
footer nav ul li a:hover{
    color: #0c9164;
}
@media screen and (min-width: 768px) {
  /* 画面幅が768px以上のデバイスで適用されるスタイル */
    #foot_banner ul li.fb_box{
        width: 22%;
    }
    footer p.f_logo a{
        margin: 50px auto;
    }
}
@media screen and (min-width: 1024px) {
  /* 画面幅が1024px以上のデバイスで適用されるスタイル */
}

/*お問い合わせ*/
section.assessment_form{
    padding-top: 50px;
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}
section.assessment_form .kaso_miH3{
    margin: 30px 0px 20px 0px ! Important;
}
section.assessment_form div{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}
section.assessment_form .com_img{
    margin-top: 30px;
}
section.assessment_form .com_img .Cicard{
    width: 100%;
    margin-bottom: 20px;
}
.formBtn_BOX{
    justify-content: center !important;
    margin: 20px auto;
}
@media screen and (min-width: 768px) {
  /* 画面幅が768px以上のデバイスで適用されるスタイル */
    section.assessment_form{
        padding-top: 80px;
    }
    section.assessment_form .com_img{
        margin: 30px auto;
        max-width: 1000px;
    }
    section.assessment_form .com_img .Cicard{
        width: 32%;
        margin-bottom: 0px;
    }
}
@media screen and (min-width: 1024px) {
  /* 画面幅が1024px以上のデバイスで適用されるスタイル */
}

/*サイトマップ*/
.sitemapWrap{
    width: 95%;
    max-width: 1200px;
    margin: 0 auto;
    padding-top: 30px;
    
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
}
.sitemapWrap_inner{
    width: 100%;
    
}
.sitemapWrap_inner li{
    line-height: 240%;
    letter-spacing: 0.15rem;
}
.sitemapList{
    margin-bottom: 30px;
}
.sitemapBlock{
    font-size: 1.6rem;
}
.sitemapBlock .word{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.sitemapBlock .word li a{
    border: 1px solid #000;
    border-radius: 5px;
    padding: 0px 8px;
    margin: 0px 10px 10px 0px;
    display: inline-block;
    transition: 0.3s;
}
.sitemapBlock li a i{
    margin-right: 5px;
    font-size: 2rem;
}
.sitemapBlock .word li a:hover{
    color:#fff !important;
    background:#21607d;
    font-weight: 500;
}
.sitemapBlock .sitemapList li a:hover,
.sitemapBlock .sitemapList li a:hover i.i_right:before{
    color: #21607d;
    font-weight: 500;
}

@media screen and (min-width: 768px) {
  /* 画面幅が768px以上のデバイスで適用されるスタイル */
    .sitemapWrap{
        font-size: 1.6rem;
        padding-top: 50px;
    }
    .sitemapWrap_inner{
        width: 31%;
    }
    .sitemapWrap_inner li{
        line-height: 220%;
        letter-spacing: 0.15rem;
    }
}
@media screen and (min-width: 1024px) {
  /* 画面幅が1024px以上のデバイスで適用されるスタイル */
    .sitemapWrap{
        padding-top: 50px;
    }
}

/*------------------------------
LINEお問い合わせ用テキストコピーボックス
--------------------------------*/
.line_tbox{
    padding: 10px;
    border: 1px dotted #333;
}
.line_tbox span.ltb_m {
    font-size: 1.4rem;
    font-weight: bold;
    display: block;
    margin-bottom: 5px;
    background-color: #0AB43A;
    color: #fff;
    padding: 5px;
    border-radius: 5px;
    text-shadow: 1px 1px 5px #000;
}
#copytxt{
    border: 2px solid #ddd;
    background-color: #f9f9f9;
    padding: 10px 15px;
    border-radius: 5px;
    margin: 10px 0px;
}
button.copy_button {
    font-size: 1.4rem;
    padding: 5px;
    background-color: #333;
    color: #fff;
    border-radius: 5px;
    display: block;
    margin: 0 auto;
}




/*------------------------------
テーブル01
--------------------------------*/
.table01,.cb_comment table{
	margin:0px 0px 15px 0px;
	padding:0px 0px 0px 0px;
	width:100%;
	font-size:1.2rem;
	border-collapse: collapse;
	text-align: center;
}
.table01 th,.cb_comment table th{
	border:1px dotted #b1b1b1;
	background-color:#efefef;
	margin:0px 0px 0px 0px;
	padding:5px;
	text-align:center;
	font-weight:normal;
	color:#333;
	vertical-align:middle;
	line-height:140%;
}
.table01 th.th_m{
	background-color:#333;
	color:#fff;
}
.table01 th.th_m a{
	color:#fff;
	text-decoration:underline;
}
.table01 td,.cb_comment table td{
	border:1px dotted #b1b1b1;
	margin:0px 0px 0px 0px;
	padding:5px;
	color:#333;
	vertical-align:top;
	line-height:150%;
	background-color:#fff;
	text-align:left;
}
.table01 td.tnp_line{
	text-align:center;
}
.table01 td.tnp_line img{
	width:100%;
	object-fit:contain;
}
td.td_c{
	text-align:center;
}
.taw400{
	width:400px;
	margin:0px auto 0px auto;
}
.taw600{
	width:600px;
	margin:0px auto 0px auto;
}
.taw800{
	width:800px;
	margin:0px auto 0px auto;
}
.thw80{
	width:80px;
}
.thw150{
	width:150px;
}
.thw35{
	width:35%;
}
.tdw65{
	width:65%;
}
.t_fixed{
	table-layout: fixed;
}
.tmini{
	font-size:1.4rem;
}
.de_table2{
	width:650px;
	margin:10px auto;
	font-size:1.6rem;
}
@media screen and (max-width:820px){
	.taw800{
		width:100%;
		margin:0px 0px 0px 0px;
	}
}
@media screen and (max-width:640px){
	.taw600{
		width:100%;
		margin:0px 0px 0px 0px;
	}
	.table01 th,.table01 td{
		display:block;
		width:100%;
		box-sizing:border-box;
		margin:0px 0px 0px 0px;
		text-align:center;
	}
	.table01 td img{
		width:100%;
		height:auto;
	}
	.table01 td img.Lbtn{
		width:200px;
		margin:auto;
	}
	.de_table2{
		width:100%;
		font-size:1.4rem;
	}
}
@media screen and (max-width:480px){
	.taw400{
		width:100%;
		margin:0px 0px 0px 0px;
	}
}

/*------------------------------
トップに戻る
--------------------------------*/
.page_top_btn{
    opacity: .8;
    position: fixed;
    bottom: 0;
    right: 0;
    
    width: 55px;
    height: 55px;
    border-radius: 10px 10px 0 0;
    margin-right: 8px;
    margin-bottom: 0px;
    background: #2a7c5a;
    color: #ffffff;
    box-shadow: 0 0 10px 3px rgb(0 0 0 / 30%);
}
.page_top_btn:after{
    content:"↑";
    display: block;
    text-align: center;
    padding-top: 18px;
    font-size: 24px;
    font-weight: 700;
}
@media screen and (min-width: 768px) {
  /* 画面幅が768px以上のデバイスで適用されるスタイル */
    .page_top_btn {
        position: fixed;
        bottom: 10px;
        right: 10px;
        font-weight: bold;
        padding: 0.7em 0px;
        text-align: center;
        transition: 0.3s;

        height: 60px;
        width: 40px;
        margin-right:15px;
        margin-bottom:20px;
        background:none;
        color: #333;
        border-top: 3px solid #555;
        border-bottom: none;
        border-left: none;
        border-right: none;
        border-radius:0px 0px 0 0;
        box-shadow:none;
    }
    .page_top_btn:before{
        display:none;
    }
    .page_top_btn:after{
        content:"↑";
        display:block;
        text-align:center;
        padding-top:15px;
        font-size:30px;
    }
    /* マウスオーバー時 */
    .page_top_btn:hover {
        border-top: 4px solid rgb(10 145 101);
        color: rgb(10 145 101);
        font-weight: 700;
    }
}

/* safari */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
    _::-webkit-full-page-media, _:future, :root .qa summary {
        list-style: none;
    }
    /* Webkit系ブラウザ（Safari、Chrome）用 */
    _::-webkit-full-page-media, _:future, :root .qa summary::-webkit-details-marker {
        display: none;
    }

    /* テキストを左寄せ */
    _::-webkit-full-page-media, _:future, :root .qa summary span {
        text-align: left;
        display: block;
    }
}


/*------------------------------
保管用
--------------------------------*/
@media screen and (min-width: 768px) {
  /* 画面幅が768px以上のデバイスで適用されるスタイル */
}
@media screen and (min-width: 1024px) {
  /* 画面幅が1024px以上のデバイスで適用されるスタイル */
}