@charset "UTF-8";

/* ==========================================================================
   2026/07/13 — MV
   ========================================================================== */
#tacks_town + section.contents_box01 .content_wrapper {
    padding: 0px;
}
.content_wrapper {
    width: 96%;
}

#mv .mv_textimg img {
    width: auto;
    max-height: 500px !important;
    height: auto;
}
#mv .mv_textimg a {
    display: block;
    width: 38%;
    height: 10%;
    position: absolute;
    top: auto;
    bottom: 2%;
    left: 62%;
    right: 0;
}
@media screen and (min-width: 901px) {
    #mv {
        display: flex;
    }
    #mv .mv_img {
        width: 60%;
    }
    #mv .mv_textimg {
        position: inherit !important;
        width: 50%;
        margin-right: -10%;
        order: -1;
        background-color: #fff;
        -webkit-mask-image: linear-gradient(to right, black 98%, transparent 100%);
        mask-image: linear-gradient(to right, black 98%, transparent 100%);
    }
    #mv, #mv .mv_img, #mv:after, #mv .mv_mp4, #mv .mv_mp4 video {
        border-radius: 0 !important;
    }
    #mv .mv_textimg .mv_textimg_pc {
        display: inline-block !important;
    }
    #mv .mv_textimg .mv_textimg_sp {
        display: none !important;
    }
}
@media screen and (max-width: 900px) {
    #mv .mv_img {
        height: 50%;
    }
    #mv .mv_textimg {
        padding: 0;
        position: inherit;
        height: 50%;
        background-color: #fff;
        align-items: center !important;
    }
    #mv .mv_textimg img {
        width: 100%;
        max-height: 100% !important;
    }
    #mv .mv_textimg .mv_textimg_sp {
        height: 100%;
        display: inline-block !important;
    }
    #mv .mv_textimg .mv_textimg_pc {
        display: none !important;
    }
}


/* ==========================================================================
   TOP 見出しあしらい（家並みアイコン）
   対象: 特徴 / About / 事例 / ブログ(top_blog) / アクセス
   → すべて中央寄せタイトル、PC・SP両方とも左右両側に表示
   ========================================================================== */
#feature + section.contents_box01 .heading.block_header_1 p,
#about + section.dec1_1 .heading.block_header_1 p,
#top_cases + div.widget_gallery01 .heading.block_header_1 p,
#top_blog + div.block_news_1 .heading.block_header_1 p,
#topAccess + .widget_shop01 .heading.block_header_1 p {
    position: relative;
    display: inline-block;
}

#feature + section.contents_box01 .heading.block_header_1 p::before,
#feature + section.contents_box01 .heading.block_header_1 p::after,
#about + section.dec1_1 .heading.block_header_1 p::before,
#about + section.dec1_1 .heading.block_header_1 p::after,
#top_cases + div.widget_gallery01 .heading.block_header_1 p::before,
#top_cases + div.widget_gallery01 .heading.block_header_1 p::after,
#top_blog + div.block_news_1 .heading.block_header_1 p::before,
#top_blog + div.block_news_1 .heading.block_header_1 p::after,
#topAccess + .widget_shop01 .heading.block_header_1 p::before,
#topAccess + .widget_shop01 .heading.block_header_1 p::after {
    content: "";
    width: 150px;
    height: 40px;
    position: absolute;
    background: url(/common/upload_data/tack-sjp/image/20260713180846.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: bottom;
}

#feature + section.contents_box01 .heading.block_header_1 p::before,
#about + section.dec1_1 .heading.block_header_1 p::before,
#top_cases + div.widget_gallery01 .heading.block_header_1 p::before,
#top_blog + div.block_news_1 .heading.block_header_1 p::before,
#topAccess + .widget_shop01 .heading.block_header_1 p::before {
    left: 0;
    bottom: 0;
    transform: translateX(-100%);
}

#feature + section.contents_box01 .heading.block_header_1 p::after,
#about + section.dec1_1 .heading.block_header_1 p::after,
#top_cases + div.widget_gallery01 .heading.block_header_1 p::after,
#top_blog + div.block_news_1 .heading.block_header_1 p::after,
#topAccess + .widget_shop01 .heading.block_header_1 p::after {
    right: 0;
    bottom: 0;
    transform: translateX(100%);
}

@media screen and (max-width: 800px) {
    #feature + section.contents_box01 .heading.block_header_1 p::before,
    #feature + section.contents_box01 .heading.block_header_1 p::after,
    #about + section.dec1_1 .heading.block_header_1 p::before,
    #about + section.dec1_1 .heading.block_header_1 p::after,
    #top_cases + div.widget_gallery01 .heading.block_header_1 p::before,
    #top_cases + div.widget_gallery01 .heading.block_header_1 p::after,
    #top_blog + div.block_news_1 .heading.block_header_1 p::before,
    #top_blog + div.block_news_1 .heading.block_header_1 p::after,
    #topAccess + .widget_shop01 .heading.block_header_1 p::before,
    #topAccess + .widget_shop01 .heading.block_header_1 p::after {
        bottom: 40%;
        width: 100px;
    }
}


/* ==========================================================================
   TOP News1（blog_type12）
   → PC: 左寄せタイトル、右側のみアイコン表示
   → SP(768px以下): 中央寄せに変わるため、左側にもアイコン追加
   ========================================================================== */
#blog_type12 + div.block_news_2 .heading.block_header_1 p {
    position: relative;
    display: inline-block;
}

#blog_type12 + div.block_news_2 .heading.block_header_1 p::after {
    content: "";
    width: 150px;
    height: 40px;
    position: absolute;
    background: url(/common/upload_data/tack-sjp/image/20260713180846.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: bottom;
    right: 0;
    bottom: 0;
    transform: translateX(100%);
}

@media screen and (max-width: 800px) {
    #blog_type12 + div.block_news_2 .heading.block_header_1 p::after {
        bottom: 40%;
        width: 100px;
    }
}

@media screen and (max-width: 768px) {
    #blog_type12 + div.block_news_2 .heading.block_header_1 p::before {
        content: "";
        width: 100px;
        height: 40px;
        position: absolute;
        background: url(/common/upload_data/tack-sjp/image/20260713180846.png);
        background-repeat: no-repeat;
        background-size: contain;
        background-position: bottom;
        left: 0;
        bottom: 40%;
        transform: translateX(-100%);
    }
}

/*TOP p_vertical (PC: right-aligned title, icon only on right side / SP: both sides below 900px)*/
#p_vertical + div.dec3_7 .heading.block_header_4 h3.h {
    position: relative;
    display: inline-block;
}
#p_vertical + div.dec3_7 .heading.block_header_4 h3.h::after {
    content: "";
    width: 150px;
    height: 40px;
    position: absolute;
    background: url(/common/upload_data/tack-sjp/image/20260713180846.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: bottom;
    right: 0;
    bottom: 0;
    transform: translateX(100%);
}
@media screen and (max-width: 900px) {
    #p_vertical + div.dec3_7 .heading.block_header_4 h3.h::after {
        bottom: 40%;
        width: 100px;
    }
    #p_vertical + div.dec3_7 .heading.block_header_4 h3.h::before {
        content: "";
        width: 100px;
        height: 40px;
        position: absolute;
        background: url(/common/upload_data/tack-sjp/image/20260713180846.png);
        background-repeat: no-repeat;
        background-size: contain;
        background-position: bottom;
        left: 0;
        bottom: 40%;
        transform: translateX(-100%);
    }
}

/*TOP c3 (Hidden above 768px & below 500px — only 500px~768px shows center-aligned, both sides)*/
#c3 + div.dec2_1 .heading.block_header_4 h3.h {
    position: relative;
    display: inline-block;
}
@media screen and (max-width: 768px) {
    #c3 + div.dec2_1 .heading.block_header_4 {
        text-align: center;
    }
    #c3 + div.dec2_1 .heading.block_header_4 h3.h::before,
    #c3 + div.dec2_1 .heading.block_header_4 h3.h::after {
        content: "";
        width: 100px;
        height: 40px;
        position: absolute;
        background: url(/common/upload_data/tack-sjp/image/20260713180846.png);
        background-repeat: no-repeat;
        background-size: contain;
        background-position: bottom;
        bottom: 15%;
    }
    #c3 + div.dec2_1 .heading.block_header_4 h3.h::before {
        left: 0;
        transform: translateX(-100%);
    }
    #c3 + div.dec2_1 .heading.block_header_4 h3.h::after {
        right: 0;
        transform: translateX(100%);
    }
}

@media screen and (max-width: 499px) {
    #c3 + div.dec2_1 .heading.block_header_4 h3.h::before,
    #c3 + div.dec2_1 .heading.block_header_4 h3.h::after {
        display: none;
    }
}

/* MV調整(2026/08/05) */
#mv,
#mv .mv_mp4,
#mv .mv_mp4 video{
	height: auto;
	max-height: initial !important;
}
#mv .mv_textimg {
    position: absolute !important;
    left: 0;
    width: 100%;
    padding: 0;
    margin-right: 0;
    -webkit-mask-image: initial;
    mask-image: initial;
    background-color: initial;
}
#mv .mv_textimg > div {
    width: 30%;
    left: 2%;
    bottom: 2%;
}
#mv .mv_textimg img {
    width: 100%;
    max-width: initial;
}
#mv .mv_textimg a {
    width: 37.5%;
}
@media screen and (min-width: 901px) {
    #mv {
        width: 100%;
    }
}
@media screen and (max-width: 900px) {
    #mv .mv_mp4 video {
        aspect-ratio: 6 / 5;
    }
    #mv .mv_textimg {
        align-items: flex-end !important;
        height: 100%;
    }
    #mv .mv_textimg .mv_textimg_sp {
        width: 45%;
        height: auto;
    }
}
@media screen and (max-width: 125vh){
	#mv.mv_mp4_cover {
		height: auto !important;
		min-height: 0 !important;
	}
}