@charset "UTF-8";

/* ==========================================================================
    products style
============================================================================= */
.l-main article {
    padding-bottom: 0;
}

.l-main article section {
    border-bottom: 0;
    margin-bottom: inherit;
}

.page-title {
    background: url(../images/pagetitle_bg04.webp) no-repeat center / cover;
}

article .lead,
article .txt {
    line-height: 1.4375;
}

article .btn {
    vertical-align: middle;
}

.products-wrapper {
    border-top: solid 2px #3F4DB3;
    padding-top: 60px;
    position: relative;
}
.products-wrapper::before {
    background-color: #F4F8FA;
    content: "";
    display: block;
    height: 2px;
    width: 100%;
    position: absolute;
    top: -3px;
    left: 0;
}
.products-intro {
    margin-bottom: 100px;
}
.products-intro .lead {
    margin-bottom: 64px;
}

.bg-white {
    background-color: #fff;
    border-bottom: 0;
    margin-bottom: 0;
    padding: 64px 0;
}

.product-list {
    display: flex;
    flex-wrap: wrap;
    gap: 32px 16px;
    margin: 32px 0 85px;
    margin-bottom: 60px;
}

.product-list > li {
    flex-basis: calc(25% - 12px);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.product-list .product-ttl {
    font-family: "Roboto", sans-serif;
    font-size: 2rem;
    font-weight: bold;
    line-height: 1;
}

.product-img img {
    height: auto;
}

.product-txt {
    line-height: 1.4375;
}

.product-category {
    margin-bottom: 30px;
}
.product-category .hdg-1 {
   

}
.product-category .hdg-2 {
    font-size: 2rem;
    max-width: inherit;
    border: 1px solid #000000;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 15px 20px;

}
.product-category .product-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    cursor: pointer;
}
.product-category .hdg-2::after {
    transform: translateY(-25%) rotate(45deg);
    width: 7px;
    height: 7px;
    margin-left: 10px;
    border-bottom: 2px solid #000;
    border-right: 2px solid #000;
    content: '';
    transition: transform .3s;
}
.product-category[open] .hdg-2::after {
    transform: rotate(225deg);
}
.product-category .txt-cont {
    max-width: 800px;
    margin-top: 32px;
    margin-bottom: 64px;
}

.product-category  + .product-category {
    margin-top: 165px;
}

.product-item .figure {
	aspect-ratio: 1;
    background: #fff;
    /*display: grid; */
    /*place-content: center; */
    overflow: hidden;
}

.product-item .figure img {
    object-fit: contain;
    height: 100%;
    width: 100%;
    /* max-height: 160px; */
    transition: all .5s;
}

.product-item:hover .figure img {
    transform: scale(1.2);
}

.product-item .ttl {
    color: #000;
    padding-top: 16px;
	text-align: center;
	font-size: 15px;
}
.product-cover{
    margin-bottom: 100px;
}
.product-search{
    margin: 50px 0;
    padding: 15px 20px 30px 20px;
    background: #f4f5f5;
    color: #000;
}
.product-search .searchandfilter h4 {
    color: #222e87;
    font-weight: bold;
}
/* .product-search .searchandfilter li:last-child{
    display: block;
    margin-top: 20px;
} */
.product-search .searchandfilter li:last-child input[type="submit"] {
    background-color: #CD1B2F;
    color: #fff;
    box-shadow: 0 0 4px rgba(0, 0, 0, .25);
    border: none;
    padding: 10px 15px;
}
.product-cont + .product-cont {
    margin-top: 64px;
}

.product-cont .detail {
    flex-basis: calc(58.333% - 48px);
    display: flex;
    flex-direction: column;
    align-items: baseline;
    gap: 24px;
}

.product-cont .detail .txt {
    color: #000;
}

.product-cont .detail .btn .txt {
    color: #fff;
}

.product-oem-contact {
    background: url(../images/products/oem_bg.webp) no-repeat center / cover;
    box-sizing: border-box;
    min-height: 360px;
    padding: 54px 0;
}

.product-oem-contact .hdg-1 {
    border-bottom: solid 1px #fff;
    margin-bottom: 24px;
    padding-bottom: 24px;
    max-width: inherit;
}

.product-oem-contact .btn-wrap {
    border-top: solid 1px #fff;
    margin-top: 24px;
    padding-top: 24px;
    text-align: center;
}

.product-oem-contact .hdg-1,
.product-oem-contact .txt {
    color: #fff;
}

@media screen and (min-width: 768px) {
    .product-cont .figure {
        flex-basis: 41.666%;
    }

    .product-cont .detail {
        flex-basis: calc(58.333% - 48px);
    }
}

@media screen and (max-width: 767.98px) {
    .product-cont .figure,
    .product-cont .detail {
        flex-basis: auto;
    }

    .product-cont .detail .btn {
        margin-left: auto;
    }
	.product-item .ttl {
		font-size: 14px;
	}
}

/* tab */
.tab-nav {
    display: flex;
    justify-content: space-between;
}

.tab-item {
    background: linear-gradient(180deg, rgba(216, 222, 225, 1) 82%, rgba(205, 208, 210, 1) 100%);
    border-radius: 8px 8px 0 0;
    height: 48px;
    display: flex;
    flex-basis: 32%;
    flex-direction: column;
    font-size: 1rem;
    line-height: 1;
    font-weight: bold;
    justify-content: center;
    text-align: center;
}

.tab-item.is-current,
.tab-item:hover {
    background: linear-gradient(180deg, rgba(34,46,135,1) 0%, rgba(10,13,37,1) 100%);
}

.tab-item a {
    color: #fff;
    text-shadow: 0 0 2px rgba(0, 0, 0, .25);
}

.tab-item.is-current a {
    text-shadow: none;
}


@media screen and (min-width: 768px) {
    .tab-item {
        font-size: min(1.5625vw, 20px);
    }
}

@media screen and (max-width: 767.98px) {
    .breadcrumb {
        padding-bottom: 30px;
    }

    .product-list > li {
        flex-basis: calc(50% - 8px);
    }

    .products-list.l-column.col-3 {
        flex-direction: row;
    }

    .products-list.l-column.col-3 .product-item {
        flex-basis: calc(50% - 16px);
    }
}


/* ------------------------------
  products-detail
------------------------------ */
.product-detail .products-wrapper {
    padding: 64px 6.25vw;
}

.product-detail .products-wrapper::before {
    background: #DBE7EE;
}

.l-main .product-detail section {
    padding-bottom: 0;
}

.product-detail .white-wrap,
.product-detail .white-wrap .hdg-1 {
    color: #000;
}

.product-detail .white-wrap {
    color: #000;
    padding-bottom: 64px;
}

.product-detail .white-wrap .l-container {
    padding-inline: 0;
    max-width: inherit;
}

.product-detail .product-item .ttl {
    color: #000;
    font-size: 2rem;
    line-height: 1.45;
}

.product-detail .note {
    font-size: 1.6rem;
}

/* tags */
.product-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 24px;
    margin-top: 32px;
}

.product-tag-item {
    border: solid 1px #8D969A;
    color: #8D969A;
    display: inline-block;
    padding: 8px 24px;
    line-height: 1;
}

.new-btn {
    font-size: 16px !important;
    padding: 10px !important;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff !important;
    background: linear-gradient(to right, #222E86 0%, #0A0D26 100%);
    border: 1.5px solid #3F4DB3;
}

.new-btn:hover {
    opacity: 0.7;
}

.new-btn-wrap {
	display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: column;
}

.product-item:hover .new-btn-wrap:hover .figure img {
  transform: none !important;
}

/* .top-cont */
.product-intro  {
    padding-bottom: 64px;
}

.product-detail .top-cont {
    margin-top: 32px;
}

.product-detail .top-cont .figure {
/*     border: solid 1px #eee; */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* padding: 40px 0; */
}

.product-detail .top-cont .figure img {
    height: 100%;
    max-height: 500px;
    object-fit: contain;
	aspect-ratio: 1;
}

.product-detail .top-cont .detail p + p:not([class]) {
    margin-top: 1em;
}

.tbl-plain {
    margin-bottom: 16px;
}

.block {
    padding: 16px 15px 16px 20px;
    margin-top: 48px;
}

.block hr {
    margin: 24px 0;
}

.block.bg-gray {
    background-color: #EFF3F5;
}

/* product-movie */
.product-movie {
    margin-inline: -6.25vw;
    padding: 64px 6.25vw 66px;
}

.product-movie-wrap {
    aspect-ratio: 16 / 9;
    border: 2px solid;
    max-width: 800px;
    margin-inline: auto;
}

.product-movie-wrap iframe {
    height: 100%;
    width: 100%;
    vertical-align: middle;
}

/* product-section */
.l-main article .product-section {
    margin-bottom: 88px;
}

.l-main article .product-section:last-of-type {
    margin-bottom: 0;
}

.center {
    font-size: 2.4rem;
    font-weight: bold;
    color: #000;/*202A74*/
    line-height: 1.3334;
    margin: 48px 0 80px;
}
.center.mb-text {
	position: relative;
	padding-bottom: 20px;
}
.center.mb-text::after {
	position: absolute;
	content: "本メニューはこの製品を使用しています";
	font-size: 14px;
	font-weight: 400;
	bottom: 0;
	left: 0;
	white-space: nowrap;
}

.center.promotion {
	position: relative;
	padding-bottom: 20px;
}
.center.promotion::after {
	position: absolute;
	content: "店舗でPRしていただく際に役立つプロモーションツールご用意しております。"!important;
	font-size: 14px;
	font-weight: 400;
	bottom: 0;
	left: 0;
	white-space: nowrap;
}

.product-section-ttl {
    position: relative;
    font-size: 2.4rem;
    font-weight: bold;
    color: #000;/*202A74*/
    line-height: 1.3334;
    margin: 48px 0 10px;
}

.product-section-ttl span {
    font-size:18px;
	font-weight:400;
}
@media (max-width: 768px) {
	.product-section-ttl {
		font-size:18px;
	}
	.product-section-ttl span {
		font-size:14px;
	}
	.center {
		font-size:18px;
		margin: 48px 0 0;
	}
	.new-btn {
		width: 80%;
	}
}

.product-section-ttl::before {
    background: linear-gradient(90deg,rgba(10,13,37,1) 0%,  rgba(34,46,135,1) 100%);
    content: "";
    position: absolute;
    left: -6.25vw;
    height: 100%;
    width: 4.735vw;
}

.product-section .order>li::before {
    background-color: #202A74;
    font-family: 'Roboto', sans-serif;
    font-size: 1.6rem;
}

/* .media__item */
.product-detail .media__item {
    color: #000;
    margin-bottom: 0;
}

.product-detail .media__item .detail {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* banner */
.products-banner {
    margin: 52px 0 16px;
}

.products-banner-item {
    display: block;
    position: relative;
    transition: all .5s;
}

.products-banner-item:hover {
    opacity: 0.7;
}

.products-banner-item .txt-block {
    background: linear-gradient(90deg, rgba(205, 27, 47, 1) 0%, rgba(139, 33, 28, 1) 100%);
    box-sizing: border-box;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    padding-right: 3.125vw;
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: calc(38.168% - 7.34375vw);
}


.products-banner-item .txt-block::before {
    background-color: #cd1b2f;
    content: "";
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
    display: block;
    position: absolute;
    left: calc(-7.34375vw + 1px);
    height: 100%;
    width: 7.34375vw;
}

.products-banner-item .txt-block::after {
    background: url(../images/icon_arw_white.svg) no-repeat center / 12px auto;
    content: "";
    filter: drop-shadow(0 0 4px rgba(24, 47, 82, 0.75));
    position: absolute;
    width: 12px;
    height: 12px;
    right: 15px;
    bottom: 15px;
}

.products-banner-item .txt-block .en {
    display: block;
    font-family: "Roboto'', sans-serif";
    font-size: 1.25vw;
    font-weight: 300;
    opacity: 0.7;
    text-shadow: 0 0 4px rgba(0, 0, 0, .35);
}

.products-banner-item .txt-block .en .bnr-label {
    font-weight: 600;
}

.products-banner-item .txt-block b {
    font-size: 2.2vw;
    text-shadow: 0 0 4px rgba(0, 0, 0, .35);
}

.products-banner-item + .products-banner-item {
    margin-top: 48px;
}

/* OEM販売のご案内 */
/* .product-detail .product-oem-contact .l-container { */
    /* padding-inline: 6.25vw */
    /* max-width: 960px; */
/* } */


@media screen and (max-width: 767.98px) {
	.products-banner-item .txt-block {
		font-size: 12px;
	}
	.products-banner-item .txt-block::after {
		bottom: 8px;
	}
	.product-detail .top-cont .figure {
		flex: 0 0 100%;
	}
}
@media screen and (min-width: 768px) {
    .product-detail .top-cont {
        align-items: flex-start;
    }

    .media__item {
        justify-content: space-between;
    }

    .product-detail .media__item .figure {
        flex-basis: 41.666%;
    }

    .product-detail .media__item .detail {
        flex-basis: calc(100% - 41.666% - 48px);
    }
}

@media screen and (max-width: 767.98px) {
    .white-wrap {
        padding-top: 50px;
    }

    .products-list {
        justify-content: space-between;
    }

    .product-detail .top-cont {
        flex-direction: column;
    }

    .product-detail .media__item .figure {
        margin-bottom: 24px;
    }

    .product-oem-contact,
    .l-main .product-detail .product-oem-contact {
        padding-bottom: 54px;
    }
}


/* ------------------------------
  service-top / promotion-top / promotion-top
------------------------------ */
.service-top .products-wrapper,
.promotion-top .products-wrapper {
    padding-top: 80px;
}

.service-top .bg-lightblue,
.promotion-top .bg-lightblue,
.coatingbooth-top .bg-lightblue {
    padding-top: 88px;
}

.service-top .bg-lightblue .hdg-1,
.promotion-top .bg-lightblue .hdg-1,
.coatingbooth-top .bg-lightblue .hdg-1 {
    color: #222e87;
    margin-bottom: 64px;
}


.service-top .product-tags {
    margin-top: 0;
}
f
.service-top .product-tag-item {
    background: #8D969A;
    color: #fff;
}

.promotion-top .hdg-1 {
    margin-bottom: 64px;
}

.promotion-top .hdg-1 + .txt {
    margin-bottom: 32px;
}

.promotion-top .product-item .figure img {
    max-height: inherit;
}
.coatingbooth-top .products-wrapper {
    padding: 64px 6.25vw;
}
.coatingbooth-top .product-detail .white-wrap{
    color: #000;
    padding-bottom: 64px;
}
.coatingbooth-top .white-wrap .txt{
    color: #000;
}

/* ------------------------------s
  service-detail
------------------------------ */
.service-detail .top-cont .figure {
    border: 0;
    padding: 0;
}

.service-detail .top-cont .figure img {
    max-height: inherit;
}

.service-detail .product-section-ttl + .txt {
    margin-bottom: 32px;
	font-size: 14px;
}

.service-detail .bg-lightblue {
    padding-top: 88px;
}
.service-detail .service_ttl{
    color: #202A74;
    font-size: 2.4rem;
    font-weight: bold;
    line-height: 3rem;
    position: relative;
    border-left: 8px solid #ce1a30;
    padding-left: 10px;
    margin-bottom: 20px;

}
.service-detail .service_ttl::before{
  content: '';
  position: absolute;
  left: -8px;
  width: 8px;
  height: 50%;
  background: #202A74;
}
  /* service work */
.service-detail .work .l-column{
   align-content: center; 
}
.service-detail .work .work-title{
    color: #fff;
    font-weight: bold;
    text-align: center;
    padding: 10px 20px;
    margin-right: 20px;
    background-color: #202A74;
}
.service-detail .work .work-title::after{
    content: url('../images/service/icon_work-title.svg');
    display: block;
}
.service-detail .work .work-list{
    color: #202A74;
    text-align: center;
    display: flex;
    align-items: center;
}
.service-detail .work .work-list .work_time{
    font-size: 3.5rem;
    font-weight: bold;
    position: relative;
    margin-right: 55px;
}
.service-detail .work .work-list .work_time .work_ttl{
    font-size: 2rem;
    display: block;
}
.service-detail .work .work-list .work_time:last-child{
    color: #CD1B2F;
}
.service-detail .work .work-list .work_time:last-child span{
    color: #202A74;
}
.service-detail .work li.work_time::after{
    content: '';
    display: block;
    content: url('../images/service/icon_work-plus.svg');
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    right: -40px;
    top: 50%;
    transform: translateY(-50%);
}
.service-detail .work li.work_time:nth-last-child(2)::after{
    content: '';
    display: block;
    content: url('../images/service/icon_work-equal.svg');
    background-size: contain;
    background-repeat:no-repeat;
    position: absolute;
    right: -40px;
    top: 50%;
    transform: translateY(-50%);
}
.service-detail .work li.work_time:last-child::after{
    content: '';
}
.service-detail .work .work_attention{
    font-size: 1.2rem;
    margin-top: 20px;
}
.service-detail .work .work_attention ul{
    list-style: circle;
    margin-left: 2rem;
}
/* service feature */
.service-detail .feature .feature_detail{
    margin: 80px 0;
}
.service-detail .feature .feature_con{
    margin-bottom: 30px;
}
/* service merit */
.service-detail .merit .merit_con{
    display: flex;
    margin-bottom: 2vw;
}
.service-detail .merit .merit_con:last-child{
    margin-bottom: 0;
}
.service-detail .merit .merit_con .merit_figure{
    margin-right: 20px;
    flex-shrink: 0;
    max-width: 225px;
}
.service-detail .merit .merit_con .merit_detail .merit_ttl{
    color: #202A74;
    font-weight: bold;
    font-size: 2rem;
    margin-bottom: 10px;
}
@media screen and (max-width: 768px) {
	.service-detail .merit .merit_con {
		flex-direction: column!important;
	}
	.service-detail .work .work-list{
		flex-flow: column;
		display: block;
	}
	.service-detail .merit .merit_con .merit_figure {
		width: 100%;
        max-width: none;
	}
		.service-detail .merit .merit_con .merit_figure img {
		width: 100%;
		height: auto;
	}
}



.service-list {
    margin: 64px 0 80px;
}

.service-list .media__item  {
    margin-bottom: 40px;
}

.service-list .media__item .figure {
    background: inherit;
}

.service-list .media__item .figure img {
    max-height: inherit;
}

.service-list .media__item .detail {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.service-list .media__item .detail .lead,
.service-list .media__item .detail .txt,
.service-list .media__item .detail p {
    color: #fff;
}

.service-list .media__item .detail p.txt:empty {
    display: none;
}

.service-list .media__item .detail p.txt:empty + p {
    margin-top: 0;
}

.slider_line-item {
	margin-inline: 8px;
	text-align: center;
}

.slider_line-item .figure {
    aspect-ratio: 1;
	background-color: #fff;
	border: solid 1px #eee;
    display: grid;
    place-content: center;
	/* width: 280px; */
}

.slider_line-item .figure img {
	margin-inline: auto;
	height: 100%;
	width: 100%;
	object-fit: contain;
    max-height: 160px;
}

.slider_line-item .detail .ttl {
	color :#222E87;
	font-weight: 500;
	margin-top: 15px;
}

.slider_liner .slick-prev,
.slider_liner .slick-next,
.wp-asp-grid-row .slick-prev,
.wp-asp-grid-row .slick-next {
    background: #222E87;
    width: 32px;
    height: 32px;
	z-index: 100;
}

.slider_liner .slick-prev:before,
.slider_liner .slick-next:before,
.wp-asp-grid-row .slick-prev:before,
.wp-asp-grid-row .slick-next:before {
    content: "\f054";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
	display: block;
    opacity: 1;
}

.slider_liner .slick-prev:before,
.wp-asp-grid-row .slick-prev:before {
    transform: rotate(180deg);
}

.slider_liner .slick-prev,
.wp-asp-grid-row .slick-prev {
    left: 0;
}

.slider_liner .slick-next,
.wp-asp-grid-row .slick-next {
    right: 0;
}

.child-promotion .detail .ttl {
    color: #000;/*222E87*/
    font-size: 2rem;
    font-weight: 500;
    margin-top: 10px;
	text-align: center;
	word-break: keep-all;
}

@media screen and (min-width: 768px) {
    .service-list .media__item .figure {
        flex-basis: 41.666%;
    }

    .service-list .media__item .detail {
        flex-basis: calc(100% - 41.666% - 48px);
    }
}
@media (min-width: 768px) and (max-width: 1024px) {
	.child-promotion .detail .ttl {
		font-size:18px;
	}
}
@media screen and (max-width: 767.98px) {
	.child-promotion .detail .ttl {
		font-size:16px;
	}
    .service-list .media__item .figure {
        margin-bottom: 24px;
    }

    .child-promotion {
        gap: 32px;
    }

    .child-promotion.l-column.col-4 li {
        display: flex;
        flex-direction: column-reverse;
        flex-basis: 100%;
        gap: 24px;
    }
}
/* ------------------------------s
  service-item
------------------------------ */
.service-item li{margin-bottom: 50px;}
.service-item li:last-child{margin-bottom: 0px;}


/* ------------------------------s
  swiper
------------------------------ */
.figure {
  width: 100%;
  max-width: none;
  margin: 0;
  min-width: 0;
}

/* メインスライダー */
.main-swiper {
  width: 100%;
  margin-bottom: 10px;
}
.main-swiper .swiper-slide {
  text-align: center;
}
.main-swiper img {
  width: 100%;
  height: auto;
  display: block;
}

/* サムネイルスライダー */
.thumb-swiper {
  width: 100%;
  box-sizing: border-box;
  padding-top: 5px;
}
.thumb-swiper .swiper-wrapper {
  display: flex;
}
.thumb-swiper .swiper-slide {
  width: auto;
  opacity: 0.4;
  cursor: pointer;
  transition: 0.2s ease;
  border: 2px solid #3F4DB3;
}
.thumb-swiper .swiper-slide-thumb-active {
  opacity: 1;
  border-color: #6c63ff; /* 選択中のサムネイル枠色 */
}
.thumb-swiper img {
  width: 100%;
  height: auto;
  display: block;
  max-width: 100px;
}
.swiper-button-next:after, .swiper-button-prev:after {
	color: #c68989;
}