@charset "utf-8";
/* CSS Document */

/*-----------------------------------------------------------------

	detail　商品詳細

-----------------------------------------------------------------*/

/*------------------------------------------------------------------------------
  h-item
------------------------------------------------------------------------------*/
.h-item {
    text-align: center;
    color: #423f52;
    font-size: 2.6rem;
    padding: 4rem 3rem 3rem;
    margin-bottom: 4rem;
    position: relative;
    font-weight: bold;
    border-bottom: 1px solid #191919;
}
.h-item:before {
    content: "";
    width: 100%;
    height: 1rem;
    background: var(--main-grad);
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}



/*----h要素----*/
@media screen and (max-width: 1200px) {
    .h-type2 {
        width: 100%;
        margin: 0 auto 5rem;
        box-sizing: border-box;
    }
}

@media screen and (max-width: 680px) {
    .h-type2 {
        width: calc(100% + 40px);
        margin: 0 -20px 3rem;
    }
}

/*------------------------------------------------------------------------------
  item-data-top
------------------------------------------------------------------------------*/
.item-data-top {
    width: 1200px;
    margin: 0 auto 8rem;
    display:flex;
	flex-flow: row wrap;
	justify-content: space-between;
    align-items: flex-start;
}

.item-data-top .main-data {
    width: 920px;
}

.item-data-top .main-data .main-data-top {
    display:flex;
	flex-flow: row wrap;
	justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 3.5rem;
}

.item-data-top .main-data .main-data-top .data-left {
    width: 530px;
    position: sticky;
    top: 20px;
}

.item-data-top .main-data .main-data-top .data-right {
    width: 365px;
    position: sticky;
    top: 20px;
}

.estimate-data {
    width: 250px;
    position: sticky;
    top: 20px;
}

.data-right .estimate-data {
    display: none;
}

@media screen and (max-width: 1200px) {
    
    .item-data-top img {
        width: 100%;
        height: auto;
    }
    
    .item-data-top {
        width: 100%;
        padding: 0 20px;
        box-sizing: border-box;
    }
    
    .estimate-data {
        width: 200px;
    }

    .item-data-top .main-data {
        width: calc(100% - 220px);
    }
    
    .item-data-top .main-data .main-data-top .data-left {
        width: 60%;
    }

    .item-data-top .main-data .main-data-top .data-right {
        width: 37%;
    }
}


@media screen and (max-width: 980px) {
    .item-data-top .main-data .main-data-top .data-left,
    .item-data-top .main-data .main-data-top .data-right {
        width: 100%;
        position: static;
        top: auto;
    }

    .item-data-top .main-data .main-data-top .data-left {
        margin-bottom: 20px;
    }
}

@media screen and (max-width: 680px) {
    .item-data-top .main-data {
        width: 100%;
    }
    
    .estimate-data {
        width: 100%;
        position: static;
        top: auto;
    }
    
    .data-right .estimate-data {
        display: block;
        margin-bottom: 3rem;
    }
    
    .item-data-top .main-data .main-data-top {
        margin-bottom: 1.5rem;
    }
}


/*------------------------------------------------------------------------------
  estimate-data
------------------------------------------------------------------------------*/
.estimate-data {
    background: #f2f2f2;
    padding: 10px 10px 15px;
    box-sizing: border-box;
}

.estimate-data .top-data {
    margin-bottom: 2rem;
}

.estimate-data .top-data dl {
    background: #FFF;
    border-radius: 5px;
    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1);
    text-align: center;
}
.estimate-data .top-data dl:not(:last-child) {
    margin-bottom: 5px;
}

.estimate-data .top-data dt {
    color: #56555c;
    letter-spacing: .06em;
}

/**/
.estimate-data .top-data .price {
    padding: 1.5rem 2rem;
}
.estimate-data .top-data .price dt {
    font-size: 13px;
}
.estimate-data .top-data .price .tax {
    font-weight: bold;
    color: #ff0c3f;
    font-size: 1.6rem;
}
.estimate-data .top-data .price .tax em {
    font-size: 2.7rem;
    padding: 0 5px;
}

.estimate-data .top-data .price .notax {
    color: #979797;
    font-size: 12px;
    border-top: 1px solid #e9e9e9;
    padding-top: 1rem;
    margin-top: 1rem;
}

/**/
.estimate-data .top-data .data-box {
    display:flex;
	justify-content: center;
    align-items: center;
    padding: 1.2rem 2rem;
}
.estimate-data .top-data .data-box dt {
    font-size: 1.4rem;
    margin-right: 7px;
}
.estimate-data .top-data .data-box dd {
    font-size: 1.8rem;
    color: #4e66a1;
    font-weight: bold;
}


/*----day-cont----*/
.estimate-data .day-cont {
    padding: 0 5px;
    letter-spacing: .08em;
    margin-bottom: 1.5rem;
}

.estimate-data .day-cont > dt {
    font-size: 14px;
    color: #35333f;
    padding-bottom: 3px;
    margin-bottom: 1rem;
    border-bottom: 1px solid #191919;
}
.estimate-data .day-cont > dt:before {
    font-family: "Font Awesome 5 Free";
	content: '\f133';
	font-size: 1em;
    margin-right: 5px;
}


.estimate-data .day-cont dd dl {
    border: 1px dashed;
    border-radius: 5px;
    text-align: center;
    padding: 1.2rem 2rem;
    background: #FFF;
}

.estimate-data .day-cont dd dt {
    font-weight: bold;
    font-size: 13px;
}

.estimate-data .day-cont dd dd {
    color: #4f4c5c;
    font-size: 14px;
}

.estimate-data .day-cont dd .day-muji {
    margin-bottom: 5px;
}

.estimate-data .day-cont dd .day-muji { border-color: #3f5a86; }
.estimate-data .day-cont dd .day-muji dt { color: #3f5a86; }

.estimate-data .day-cont dd .day-print { border-color: #00c377; }
.estimate-data .day-cont dd .day-print dt { color: #00c377; }


/*----caution----*/
.estimate-data .day-cont .caution {
    margin-top: 1rem;
}

.estimate-data .day-cont .caution li {
    padding-left: 20px;
    position: relative;
}

.estimate-data .day-cont .caution li:before {
	font-family: "Font Awesome 5 Free";
	content: '\f04e';
	font-weight: 900;
	font-size: 1em;
	color: #70727d;
    position: absolute;
    top: .4rem;
    left: 5px;
}

.estimate-data .day-cont .caution li:not(:last-child) {
    margin-bottom: 5px;
}

.estimate-data .day-cont .caution p {
    font-size: 12px;
    color: #70727d;
    line-height: 1.4;
}


/*----estimate-btn----*/
.estimate-data .estimate-btn {
    margin: 0 auto;
    width: calc(100% - 10px);
}

.estimate-data .estimate-btn a span {
    padding-right: 25px;
}

.estimate-data .estimate-btn a span:after {
    font-size: .7em;
}


/*----detail-soldout----*/
.estimate-data .detail-soldout {
    margin: 0 auto;
    width: calc(100% - 10px);
}

.estimate-data .detail-soldout:after {
    content: none;
}

.estimate-data .detail-soldout dt,
.estimate-data .detail-soldout dd {
    padding: 1.5rem 2rem;
}

.estimate-data .detail-soldout dt {
    font-size: 1.7rem;
}

.estimate-data .detail-soldout dt span {
    font-size: 2rem;
}

.estimate-data .detail-soldout dd p {
    font-size: 13px;
}
.estimate-data .detail-soldout dd p br {
    display: none;
}


/*------------------------------------------------------------------------------
  item-mainimg
------------------------------------------------------------------------------*/
.item-mainimg .swiperItem {
    margin-bottom: 15px;
}

.item-mainimg .swiper-container {
    overflow: inherit;
}

.item-mainimg .swiperItem li img {
    border: 1px solid #cacaca;
    box-sizing: border-box;
}

.item-mainimg .swiperItem-thumb ul {
    display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
    gap: 13px 6px !important;
}

.item-mainimg .swiperItem-thumb li {
    width: 61px !important;
    border: 1px solid #cacaca;
    box-sizing: border-box;
    background-color: #ff2e2e;
    cursor: pointer;
}

.item-mainimg .swiperItem-thumb li a {
    display: block;
}

.item-mainimg .swiperItem-thumb li img {
    width: 100%;
    height: auto;
}

.item-mainimg .swiperItem-thumb li.swiper-slide-thumb-active img {
    opacity: .8;
    border-color: #ff2e2e;
    box-shadow: 0px 0px 0px 3px #ff2e2e;
}

@media screen and (max-width: 1200px) {
    .item-mainimg .swiperItem-thumb ul {
        gap: 13px 2% !important;
    }

    .item-mainimg .swiperItem-thumb li {
        width: 15% !important;
    }
}


/*------------------------------------------------------------------------------
  data-right
------------------------------------------------------------------------------*/

/*----number----*/
.data-right .number {
    width: fit-content;
    border: 1px solid #d8d8d8;
    border-left: 7px solid #3f5a86;
    margin-bottom: 2rem;
    color: #6c6c7e;
    font-size: 1.5rem;
    padding: 1rem 3rem;
    box-shadow: 0px 1px 2.85px 0.15px rgba(0, 0, 0, 0.15);
}


/*----category-cont----*/
.data-right .category-cont {
    display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
    gap: 8px;
    margin-bottom: 15px;
}

.data-right .category-cont li a {
    display: block;
    padding: .8rem 2rem;
    background: #191919;
    border-radius: 5px;
    color: #FFF;
    font-size: 14px;
}



/*------------------------------------------------------------------------------
  item-cont
------------------------------------------------------------------------------*/
.item-cont {

}

.item-cont .icon {
    display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
    gap: 10px 7px;
    margin-bottom: 2rem;
}

.item-cont .item-table {
    border-top: 1px solid #d8d8d8;
    border-bottom: 1px solid #d8d8d8;
    width: 100%;
}

.item-cont .item-table tr {
    border-bottom: 1px solid #d8d8d8;
}


.item-cont .item-table th,
.item-cont .item-table td {
    font-size: 13px;
    color: #35333f;
    padding: 1.2rem 2rem;
    box-sizing: border-box;
}

.item-cont .item-table th {
    width: 125px;
    background: #fbfbfb;
}



@media screen and (max-width: 810px) {
    .item-cont .icon li {
        max-width: 70px;
    }
}

@media screen and (max-width: 480px) {
    .item-cont .item-table th {
        width: 110px;
    }
}




/*------------------------------------------------------------------------------
  free-area
------------------------------------------------------------------------------*/

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

}

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

}

/*------------------------------------------------------------------------------
  product
------------------------------------------------------------------------------*/

/*表示確認用*/
.area-box {
    height: 300px;
    width: 100%;
    border: 8px solid #f01010;
    color: #f01010;
    background: #D7D7D7;
    display:flex;
	justify-content: center;
	align-items: center;
    font-size: 3rem;
    font-weight: bold;
    box-sizing: border-box;
}



/*----other-size----*/
.data-right .other-size {
    margin-top: 3rem;    
}

.data-right .other-size dt {
    font-size: 1.5rem;
    color: #35333f;
    letter-spacing: .08em;
    padding-bottom: 5px;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid #35333f;
}

.data-right .other-size dd ul {
    display: flex;
    overflow-x: auto;
    flex-wrap: nowrap;
    gap: 0 10px;
    padding-bottom: 10px;
}

.data-right .other-size li a {
    display: block;
    text-align: center;
    width: 120px;
    padding: 1.3rem 2rem;
    border: 1px solid #425585;
    border-radius: 8px;
    box-sizing: border-box;
    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
}

.data-right .other-size li a div {
    color: #425585;
    font-weight: bold;
    font-size: 1.7rem;
    margin-bottom: .07rem;
}

.data-right .other-size li a span {
    font-size: 12px;
    color: #969696;
}


.data-right .other-size li a:hover {
    opacity: 1;
    background: #DBDFFD;
}


/*----item-text----*/
.main-data .item-text {
    margin-bottom: 5rem;
}

/*----caution-img----*/
.data-right .caution-img {
    color: #70727d;
    font-size: 12px;
    margin: 2rem 0;
    padding-left: 18px;
    border-left: 3px solid #4e66a1;
    line-height: 1.6;
}


@media screen and (max-width: 810px) {    
    .data-right .other-size dd ul {
        padding: 0 20px 15px;
        box-sizing: border-box;
        width: calc(100% + 40px);
        margin: 0 -20px;
    }
    
    .data-right .other-size dd ul li {
        margin: 0;
    }
}



/*------------------------------------------------------------------------------
  color-cont
------------------------------------------------------------------------------*/
.color-cont {
    margin-bottom: 5rem;
}

.color-cont ul {
    display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
    gap: 20px 25px;
}

.color-cont ul li {
    width: 110px;
    text-align: center;
}

.color-cont ul li a {
    display: block;
    margin-bottom: .7rem;
}

.color-cont ul li figcaption {
    color: #35333f;
    font-size: 12px;
}

/*soldout*/
.color-cont ul li.soldout a {
	border-radius: 8px;
    overflow: hidden;
    background: #565656;
}
.color-cont ul li.soldout a img {
	opacity: .8;
}

.color-cont ul li.soldout div {
	color: #d9182a;
	width: 90%;
    padding: 5px 10px;
    margin: 5px auto 0;
    border-radius: 3px;
    font-weight: bold;
    border: 1px solid #d9182a;
    letter-spacing: .2em;
    box-sizing: border-box;
}


/*stockonly*/
.color-cont ul li.stockonly div {
	color: #425585;
	width: 90%;
    padding: 5px 10px;
    margin: 5px auto 0;
    border-radius: 3px;
    font-weight: bold;
    border: 1px solid #425585;
    letter-spacing: .2em;
    box-sizing: border-box;
}

@media screen and (max-width: 1200px) {
    .color-cont ul {
        gap: 20px 2%;
    }

    .color-cont ul li {
        width: 15%;
    }
}

@media screen and (max-width: 480px) {
    
    .color-cont ul {
        gap: 20px 5%;
    }

    .color-cont ul li {
        width: 30%;
    }
}

/*------------------------------------------------------------------------------
  estimate-btn
------------------------------------------------------------------------------*/
.estimate-btn {
    width: 80%;
    max-width: 530px;
    margin: 0 auto 8rem;
}

.estimate-btn a {
    display: block;
    padding: 2rem 2.5rem;
    border-radius: 5px;
    box-shadow:
        rgba(116, 17, 17, 0.07) 0px 1px 1px,
        rgba(116, 17, 17, 0.07) 0px 2px 2px,
        rgba(116, 17, 17, 0.07) 0px 4px 4px,
        rgba(116, 17, 17, 0.07) 0px 8px 8px,
        rgba(116, 17, 17, 0.07) 0px 16px 16px;
    position: relative;
    overflow: hidden;
    z-index: 1;
    cursor: pointer;
}
.estimate-btn a:hover {
    opacity: 1;
}
.estimate-btn a:before{
    content: "";
    width: 100%;
    height: 100%;
    position:absolute;
    z-index: -1;
    left: 0;
    top: 0;
    transition: 0.5s;
    background-image: -moz-linear-gradient( 0deg, rgb(255,8,8) 20%, rgb(255,64,163) 100%);
    background-image: -webkit-linear-gradient( 0deg, rgb(255,8,8) 20%, rgb(255,64,163) 100%);
    background-image: -ms-linear-gradient( 0deg, rgb(255,8,8) 20%, rgb(255,64,163) 100%);
}
.estimate-btn a:after{
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: -2;
    left: 0;
    top: 0;
    background-image: -moz-linear-gradient( 0deg, rgb(0,0,0) 20%, rgb(49,16,16) 100%);
    background-image: -webkit-linear-gradient( 0deg, rgb(0,0,0) 20%, rgb(49,16,16) 100%);
    background-image: -ms-linear-gradient( 0deg, rgb(0,0,0) 20%, rgb(49,16,16) 100%);
}
.estimate-btn a:hover:before{
    opacity: 0;
}

.estimate-btn a span {
    color: #FFF;
    font-weight: bold;
    font-size: 2.1rem;
    letter-spacing: .1em;
    position: relative;
    display: block;
    width: fit-content;
    padding-right: 40px;
    margin: 0 auto;
    text-align: center;
}
.estimate-btn a span:after {
    font-family: "Font Awesome 5 Free";
	content: '\f04e';
	font-size: .8em;
	position: absolute;
    right: 0;
    top: 55%;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
    transition: all 0.2s ease-out;
}

.estimate-btn a:hover span:after {
    right: -5px;
}


@media screen and (max-width: 480px) {
    .estimate-btn {
        width: 95%;
    }
    
    .estimate-btn a span {
        font-size: 1.8rem;
        padding-right: 20px;
    }
}


/*------------------------------------------------------------------------------
  detail-soldout
------------------------------------------------------------------------------*/
.detail-soldout {
    width: 80%;
    max-width: 530px;
    margin: 0 auto 8rem;
    border: 1px solid #FF0808;
    border-radius: 5px;
    text-align: center;
    letter-spacing: .1em;
    position: relative;
}
.detail-soldout:after {
    content: "完売御礼";
    color: #FFF;
    font-weight: bold;
    background: #ff722e;
    padding: 3px 12px 17px;
    position: absolute;
    top: 50%;
    left: 1px;
    font-size: 1.8rem;
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
    writing-mode: vertical-rl;
    line-height: 1;
    transform: rotate(-7deg) translateY(-50%);
    -webkit-transform: rotate(-7deg) translateY(-50%);
    letter-spacing: -5px;
    border-top: 6px solid #ff4800;
    width: 20px;
    height: 100px;
}

.detail-soldout dt {
    background-image: -moz-linear-gradient( 0deg, rgb(255,8,8) 50%, rgb(255,108,0) 100%);
    background-image: -webkit-linear-gradient( 0deg, rgb(255,8,8) 50%, rgb(255,108,0) 100%);
    background-image: -ms-linear-gradient( 0deg, rgb(255,8,8) 50%, rgb(255,108,0) 100%);
    font-weight: bold;
    color: #FFF;
    font-size: 2rem;
    padding: 1rem 2rem 1rem 60px;
    
}

.detail-soldout dt span {
    font-size: 2.7rem;
    margin: 0 5px;
}

.detail-soldout dd {
    padding: 2rem 4rem 2rem 65px;
    background: #FFF;
    border-radius: 0 0 4px 4px;
}

.detail-soldout dd p {
    color: #352122;
    line-height: 1.6;
    font-size: 1.5rem;
}



/*------------------------------------------------------------------------------
  print-cont
------------------------------------------------------------------------------*/
.print-cont .item-print {
    display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
    gap: 3rem calc((100% - 93%) / 2);
    margin-bottom: 3rem;
}

.print-cont .item-print li {
    width: 280px;
}

.print-cont .item-print li .name {
    font-size: 1.8rem;
    color: #35333f;
    letter-spacing: .08em;
    padding-bottom: 5px;
    margin-bottom: 1rem;
    border-bottom: 1px solid #191919;
}

.print-cont .item-print li .name span {
    font-size: 1.7rem;
    color: #425a96;
    font-weight: bold;
    background: #ecf1f9;
    border-radius: 3px;
    padding: 3px 10px;
    display: inline-block;
    margin-right: 15px;
}


.print-cont .item-print li .img {
    margin-bottom: 15px;    
    border: 1px solid #cacaca;
    box-sizing: border-box;
    border-radius: 15px;
    overflow: hidden;
}

.print-cont .item-print li .img img {
    width: 100%;
    height: auto;
}


.print-cont .item-print .print-type dl:not(:last-child) {
    margin-bottom: 1.5rem;
}

.print-cont .item-print .print-type dt {
    font-weight: bold;
    color: #425a96;
    font-size: 14px;
    border-left: 4px solid #425a96;
    padding: 0 1rem;
    margin-bottom: 1rem;
    margin-bottom: 5px;
}

.print-cont .item-print .print-type dt span {
    margin-right: 10px;
}

.print-cont .item-print .print-type dd {
    padding: 0 10px;
    font-size: 1.5rem;
    color: #5d5d5d;
    letter-spacing: .08em;
}

.print-cont .item-print .print-type dd small {
    display: block;
    color: #a7a7a7;
    font-size: 13px;
    margin-top: 5px;
}

/*fullcolor*/
.print-cont .item-print .print-type .fullcolor dt:after {
    content: "フルカラー印刷可能";
    display: inline-block;
    color: #725b48;
    font-size: 11px;
    background-image: -moz-linear-gradient( 0deg, rgb(255,243,52) 10%, rgb(255,220,229) 90%);
    background-image: -webkit-linear-gradient( 0deg, rgb(255,243,52) 10%, rgb(255,220,229) 90%);
    background-image: -ms-linear-gradient( 0deg, rgb(255,243,52) 10%, rgb(255,220,229) 90%);
    padding: 4px 10px;
    border-radius: 3px;
    font-weight: bold;
    margin: 5px 0;
}

.print-cont .print-caution {
    text-align: center;
    width: fit-content;
    margin: 0 auto;
    padding: 1.5rem 8rem;
    border: 1px solid #d1d1d1;
    border-radius: 5px;
    box-shadow: 0px 1px 2.85px 0.15px rgba(0, 0, 0, 0.15);
}

.print-cont .print-caution p {
    font-size: 1.3rem;
    letter-spacing: .1em;
    color: #485179;
    line-height: 1.4;
}

.print-cont .print-caution p em {
    color: #ff3166;
    font-weight: bold;
}

@media screen and (max-width: 810px) {
    .print-cont {
        margin-bottom: 5rem;
    }
    
    .print-cont .item-print {
        gap: 3rem 4%;
    }
    
    .print-cont .item-print li {
        width: 48%;
    }
}

@media screen and (max-width: 480px) {
    .print-cont .item-print li {
        width: 100%;
    }
    
    .print-cont .item-print li .img {
        text-align: center;
        padding: 20px;
        box-sizing: border-box;
    }
    
    .print-cont .item-print li .img img {
        max-width: 190px;
    }
}


/*------------------------------------------------------------------------------
  item-description
------------------------------------------------------------------------------*/
.item-description:not(:has(img)) {
  display: none;
}

.item-description {
    margin-bottom: 5rem;
}

.item-description {
    margin-bottom: 5rem;
}

.item-description .flex {
    gap: 4.5rem 0;
}

.item-description li {
    width: 48%;
}

.item-description li .img {
    margin-bottom: 1.5rem;
}

.item-description li img {
    width: 100%;
    height: auto;
    border: 1px solid #cacaca;
    box-sizing: border-box;
}


@media screen and (max-width: 480px) {
    .item-description .flex {
        gap: 2.5rem 0;
    }
    
    .item-description li {
        width: 100%;
    }
    
    .item-description li p {
        font-size: 12px;
    }
}


/*------------------------------------------------------------------------------
  recommend-cont
------------------------------------------------------------------------------*/
.recommend-cont .h-recommend {
    text-align: center;
    position: relative;
    margin-bottom: 3.5rem;
    padding: 4.7rem 2rem 0;
}
.recommend-cont .h-recommend:before {
    content: "";
    width: 100%;
    height: .8rem;
    background: var(--main-grad);
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}

.recommend-cont .h-recommend span {
    font-size: 1.8rem;
    color: var(--main-color);
    display: block;
    font-weight: bold;
    margin-bottom: .5rem;
    letter-spacing: .08em;
}

.recommend-cont .h-recommend em {
    font-size: 2.2rem;
    color: #353333;
    letter-spacing: .12em;
    font-weight: bold;
}

@media screen and (max-width: 810px) {
    .recommend-cont .h-recommend {
        width: calc(100% + 40px);
        margin: 0 -20px 5rem;
        box-sizing: border-box;
    }
}


@media screen and (max-width: 480px) {
    .recommend-cont .h-recommend {
        margin-bottom: 2rem;
    }
}


.swiper-container {
    overflow: hidden;
}

.recommend-cont .item-list,
.recent-cont .item-list {
    flex-wrap: inherit;
    gap: 0;
    margin-bottom: 0;
}

.swiper-autoheight .swiper-wrapper {
    height: auto !important;
}


/*----button----*/

.swiper-parent {
    position: relative;
}



@media screen and (max-width: 810px) {
    .swiper-parent .item-list > li {
        width: calc((100% - 40px) / 3) !important;
    }
}

@media screen and (max-width: 480px) {
     .swiper-parent .item-list > li {
        width: calc((100% - 15px) / 2) !important;
    }

}



.swiper-button-prev,
.swiper-button-next{
	width: 4.5rem;
	height: 4.5rem;
    border: .5rem solid #425585;
    box-sizing: border-box;
	background-color: rgba(255,255,255,0.6);
	border-radius: 50%;
    box-shadow: 0 0 3px rgba(0,0,0,0.3);
	transition: all 0.3s ease-out;
    position: absolute;
    top: 50%;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
    z-index: 1;
    cursor: pointer;
}
.swiper-button-prev:hover,
.swiper-button-next:hover{
	opacity: 0.6;
}
.swiper-button-prev{
	left: -3rem;
}
.swiper-button-next{
	right: -3rem;
}

.swiper-button-prev:before,
.swiper-button-next:before{
	content: "";
	display: block;
	width: .8rem;
	height: .8rem;
	border-top: 2px solid #425585;
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto;
}
.swiper-button-prev:before{
	border-left: 2px solid #425585;
	left: 1.4rem;
	transform: rotate(-45deg);
}
.swiper-button-next:before{
	border-right: 2px solid #425585;
	right: 1.4rem;
	transform: rotate(45deg);
}

@media screen and (max-width: 810px) {
    .swiper-button-prev{
        left: -1.5rem;
    }
    .swiper-button-next{
        right: -1.5rem;
    }
}


/*------------------------------------------------------------------------------
  recent-cont
------------------------------------------------------------------------------*/
.recent-cont .h-recent {
    text-align: center;
    font-weight: bold;
    letter-spacing: .12em;
    color: #35333f;
    font-size: 2rem;
    padding-bottom: 1.5rem;
    margin-bottom: 2rem;
    border-bottom: 1px solid #191919;
}

.swiper-pagination {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  gap: 1.2rem 0.8rem;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-top: 3.2rem;
  text-align: center;
}
.swiper-pagination-bullet {
  width: 1.6rem;
  height: 3px;
  cursor: pointer;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
  vertical-align: top;
  background-color: #dfdfdf;
}
.swiper-pagination-bullet-active {
  width: 4rem;
  background-color: var(--main-color);
}

@media screen and (max-width: 810px) {
    .recent-cont .h-recent {
        width: calc(100% + 40px);
        margin: 0 -20px 2rem;
    }
}


/*------------------------------------------------------------------------------
  commit-cont
------------------------------------------------------------------------------*/
.commit-cont {
    border: 1px dotted #191919;
    padding: 5rem 7rem;
    width: 85%;
    margin: 0 auto 5rem;
    box-sizing: border-box;
    border-radius: 15px;
}

.commit-cont .address-cont {
    background: #f2f4fb;
    padding: 2.5rem 5rem 3.5rem;
    width: fit-content;
    min-width: 500px;
    margin: 2rem auto;
    border-radius: 5px;
    border-top: 5px solid #6476b5;
    box-sizing: border-box;
}

.commit-cont .address-cont dt {
    text-align: center;
    font-size: 1.7rem;
    padding-bottom: 10px;
    margin-bottom: 1rem;
    border-bottom: 1px solid #191919;
}

.commit-cont .address-cont dd {
    font-size: 1.5rem;
    line-height: 1.5;
    letter-spacing: .1em;
}

@media screen and (max-width: 810px) {
    .commit-cont .address-cont {
        min-width: 80%;
    }
    
    .commit-cont .address-cont .address  {
        width: 100%;
        height: auto;
    }
}

@media screen and (max-width: 480px) {
    .commit-cont {
        padding: 4rem 4.5rem;
        width: 90%;
    }

    .commit-cont .address-cont {
        padding: 2.5rem 4rem 3.5rem;
        width: 100%;
    }
}




/*------------------------------------------------------------------------------
  見積り
------------------------------------------------------------------------------*/
.form_area {
	width: 800px;
	padding: 35px 40px;
	box-sizing: border-box;
}

.estimate_cont .estimate_lead {
    text-align: center;
    font-size: 1.5rem;
    padding: 2rem 3rem;
    display: block;
    margin: 0 auto 20px;
    border: 1px dotted #7f7f7f;
    border-radius: 5px;
}

.estimate_cont .estimate_lead p {
    line-height: 1.4;
}

@media screen and (max-width: 1100px) {
	.form_area {
		width: 100%;
		padding: 15px 20px;
	}
}

/*---独自エリア-------------*/
.estimate_cont .h_estimate {
	font-size: 21px;
	font-weight: bold;
	text-align: center;
	padding: 10px;
	border-top: 4px solid;	
	border-bottom: 1px solid;
	margin-bottom: 25px;
}


/*---見積-------------*/
.estimate_cont .h_type1 { font-size: 19px; }
.estimate_cont .estimate_box > dt {
	font-size: 14px;
	padding: .8rem 2rem;
	border-left: .7rem solid var(--main-color);
	margin-bottom: 2rem;
	letter-spacing: .08em;
	line-height: 1.3em;
}
.estimate_cont .estimate_box > dt.required:before {
	content: "必須";
	font-size: 13px;
	padding: 1px 10px;
	border-radius: 30px;
	background: #ff1818;
	margin-right: 10px;
	color: #FFF;
	font-weight: bold;
}

.estimate_cont .estimate_box > dd {
	font-size: 17px;
	margin-bottom: 55px;
}

.estimate_cont .estimate_box > dd:after {  
  content: ".";   
  display: block;   
  height: 0;   
  clear: both;
  visibility: hidden;  
}  


@media screen and (max-width: 1100px) {
	.estimate_cont .estimate_box > dd {
		width: 94%;
		margin: 0 auto 55px;
	}
}

@media screen and (max-width: 786px) {
	.estimate_cont .estimate_box > dd{
		width: 100%;
		margin: 0 auto 4rem;
		font-size: 14px;
	}
}


/*---入力フォーム設定-------------*/

input,
select,
textarea {
	padding: 10px;
	font-size: 15px;
	border: 1px solid #ababab;
	box-sizing: border-box;
	transition: all 0.1s ease-out;
}

input:focus,
select:focus,
textarea:focus {
	background-color: #fff5d0;
	border: 1px solid #949db7;
	z-index: 10;
    outline: 0;
}

textarea {
	width: 80%;
}

@media screen and (max-width: 1100px) {
	input,
	input[type=number],
	select,
	textarea {
		font-size: 16px !important;
		border-radius: 0 !important;
	}
}


/* iOSでのデフォルトスタイルをリセット */
input[type="submit"],
input[type="button"] {
  border-radius: 0;
  -webkit-box-sizing: content-box;
  -webkit-appearance: button;
  appearance: button;
  border: none;
  box-sizing: border-box;
  cursor: pointer;
}
input[type="submit"]::-webkit-search-decoration,
input[type="button"]::-webkit-search-decoration {
  display: none;
}
input[type="submit"]::focus,
input[type="button"]::focus {
  outline-offset: -2px;
}



/*-----ラジオボタン------------*/

.estimate_cont .type_radio img {
	float: right;
}
.estimate_cont .type_radio dd > ul {
	float: left;
	width: 420px;
	margin-left: 20px;
}



.estimate_cont .estimate_box input[type="radio"]{
	border: none;
	vertical-align: middle;
}
.estimate_cont .estimate_box li label {
  display: inline-block;
  word-break: break-all;
	cursor: pointer;
}
input[type="radio"]:checked + span {
    color: #345ca6;
    font-weight: bold;
}

.estimate_cont .estimate_box li label input[type="radio"] + span {
  position: relative;
  padding: 0 0 0 30px;
  text-align: center;
	letter-spacing: 0;
}
.estimate_cont .estimate_box li label input[type="checkbox"] + span {
  position: relative;
  padding: 0 0 0 30px;
}
.estimate_cont .estimate_box li label input[type="radio"] + span::before {
  border: 1px solid #b1b1b1;
}
.estimate_cont .estimate_box label input[type="radio"] {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}
.estimate_cont .estimate_box label input[type="radio"] + span::before {
  content: '';
  display: block;
  background-color: transparent;
  width: 20px;
  height: 20px;
  border: 2px #78909c solid;
  box-sizing: border-box;
  border-radius: 50%;
  position: absolute;
  z-index: 0;
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}
.estimate_cont .estimate_box li label input[type="radio"]:checked + span::after {
  content:"";
  display: block;
  box-sizing: border-box;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #f81212;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 4px;
  margin: auto;
}

.estimate_cont .estimate_box li {
	font-size: 16px;
	line-height: 1.8em;
	margin-bottom: 5px;
	vertical-align: middle;
	position: relative;
}


@media screen and (max-width: 1100px) {
	.estimate_cont .type_radio img {
		width: 40%;
	}
	.estimate_cont .type_radio dd > ul {
		width: 53%;
		margin-left: 2%;
	}
}

@media screen and (max-width: 786px) {
	.estimate_cont .type_radio img {
		width: 100%;
		float: none;
		margin-top: 15px;
	}
	.estimate_cont .type_radio dd > ul {
		width: 100%;
		float: none;
	}
}




/*-----チェックボックス------------*/

.estimate_cont .type_check ul {
	margin: 0 20px 10px;
	word-break: break-all;
}
.estimate_cont .type_check li {
	display: inline-block;
	margin: 0 15px 10px 0;
}
input[type="checkbox"]:checked + span {
    color: #345ca6;
    font-weight: bold;
}

.estimate_cont .type_check li label input[type="checkbox"] + span {
  position: relative;
  padding: 0 0 0 30px;
}
.estimate_cont .type_check li label input[type="checkbox"] + span::before {
  border: 1px solid #b1b1b1;
}
.estimate_cont .type_check label input[type="checkbox"] {
  position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
}
.estimate_cont .type_check label input[type="checkbox"] + span::before {
  content: '';
  display: block;
  background-color: transparent;
  width: 20px;
  height: 20px;
  border: 2px #78909c solid;
  box-sizing: border-box;
  position: absolute;
  z-index: 0;
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}
.estimate_cont .type_check li label input[type="checkbox"]:checked + span::after {
  content:"";
  display: block;
  box-sizing: border-box;
  width: 11px;
  height: 21px;
  border-bottom: 4px solid #f81212;
  border-right: 4px solid #f81212;
  transform: rotate(45deg);
  position: absolute;
  top: -10px;
  bottom: 0;
  left: 7px;
  margin: auto;
}



/*-----プルダウン------------*/

.estimate_cont .type_pull select{
	width: 100%;
	padding-right: 1em;
	cursor: pointer;
	text-indent: 0.01px;
	text-overflow: ellipsis;
	border: none;
	outline: none;
	background: transparent;
	background-image: none;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
}
.estimate_cont .type_pull select::-ms-expand {
    display: none;
}

.estimate_cont .type_pull .selectBtn {
	width: 390px;
	background: #ffffff;
	border: 1px solid #bbbbbb;
	border-radius: 2px;
	position: relative;
	box-sizing: border-box;
	float: left;
	margin-left: 20px;
}
.estimate_cont .type_pull .selectBtn:after{
	content: "";
	display: block;
	right: 20px;
	top: 50%;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 12px 8px 0 8px;
	border-color: #1d1d1d transparent transparent transparent;
	pointer-events: none;
	position: absolute;
}

.estimate_cont .type_pull img {
	float: right;
}

@media screen and (max-width: 1100px) {
	.estimate_cont .type_pull img {
		width: 40%;
	}
	.estimate_cont .type_pull .selectBtn {
		width: 53%;
		margin-left: 2%;
	}
}

@media screen and (max-width: 786px) {
	.estimate_cont .type_pull img {
		width: 100%;
		float: none;
		margin-top: 15px;
	}
	.estimate_cont .type_pull .selectBtn {
		width: 100%;
		float: none;
	}
}




/*-----テキストエリア------------*/

.estimate_cont .type_comment textarea {
	width: 94%;
	height: 8em;
	padding: 10px;
	box-sizing: border-box;
	margin: 0 auto;
	display: block;
}

@media screen and (max-width: 1100px) {
	.estimate_cont .type_comment textarea {
		width: 100%;
	}
}


/*--カレンダー--*/
.estimate_cont .type_calendar input {
	width: 15em;
}

.estimate_cont .type_calendar .calendarForm {
	position: relative;
	padding-left: 65px;
}
.estimate_cont .type_calendar .calendarForm label:before{
	display: block;
    font-family: "Font Awesome 5 Free";
    content: '\f133';
    font-size: 22px;
    margin-right: 5px;
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}

@media screen and (max-width: 786px) {
	.estimate_cont .type_calendar .calendarForm {
		padding-left: 45px;
	}
	.estimate_cont .type_calendar input {
		width: 90%;
	}
}


/*-----ファイルアップロード------------*/
.estimate_cont .type_upload #upfile {
	margin-left: 20px;
}
.estimate_cont .type_upload .caution {
	width: 94%;
	margin: 20px auto 0;
}
.estimate_cont .type_upload .caution dt {
	color: #FFF;
	font-size: 19px;
	font-weight: bold;
	background: #ff3d23;
	padding: 10px 30px;
	letter-spacing: .1em;
	box-sizing: border-box;
}
.estimate_cont .type_upload .caution dd {
	font-size: 13px;
	line-height: 1.5em;
	background: #ffebe8;
	padding: 15px 30px;
	box-sizing: border-box;
}


@media screen and (max-width: 1100px) {
	.estimate_cont .type_upload #upfile {
		margin-left: 0;
		width: 100%;
	}

	.estimate_cont .type_upload .caution {
		width: 100%;
		margin: 15px auto;
	}
	.estimate_cont .type_upload .caution dt {
		font-size: 14px;
		padding: 10px 10%;
		line-height: 1.4em;
	}
	.estimate_cont .type_upload .caution dd {
		padding: 15px 10%;
	}
    .estimate_cont .type_upload .caution dd p {
		font-size: 12px;
        line-height: 1.5;
	}
}




/*-----1行テキスト------------*/
.estimate_cont .type_text input {
	width: 450px;
	margin: 0 10px 0 20px;
}


@media screen and (max-width: 1100px) {
	.estimate_cont .type_text input {
		width: 80%;
		margin: 0 10px 0 0;
	}
}


/*---プリント方法・プリント位置-------------*/
.estimate_cont.print-cont .item-print li {
    width: 31%;
}

.estimate_cont.print-cont .print-type {
    margin-bottom: 1rem;
}

.estimate_cont.print-cont select {
    width: 100%;
}

@media screen and (max-width: 810px) {
    .estimate_cont.print-cont .item-print li {
        width: 48%;
    }
    
    .estimate_cont.print-cont .item-print li .img {
        text-align: center;
    }
    
    .estimate_cont.print-cont .item-print li .img img {
        max-width: 190px;
    }
}

@media screen and (max-width: 480px) {
    .estimate_cont.print-cont .item-print li {
        width: 100%;
        padding-bottom: 4rem;
        margin-bottom: 2rem;
        position: relative;
    }
    
        
    .estimate_cont.print-cont .item-print li:after {
        content: "";
        width: calc(100% + 40px);
        height: 1px;
        display: block;
        position: absolute;
        bottom: 0;
        left: -20px;
        border-bottom: 1px dashed #676767;
    }
}




/*---カラー・数量-------------*/

.estimate_cont .estimate_color {
	display:flex;
	flex-flow: row wrap;
	justify-content: flex-start;
    border-left: 1px solid #a1a1a1;
	margin-bottom: 15px;
}
.estimate_cont .estimate_color li {
	width: 20%;
	text-align: center;
	padding: 10px 15px;
	box-sizing: border-box;
	border: 1px solid #a1a1a1;
    border-left: none;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    margin-top: -1px;
}
.estimate_cont .estimate_color li img {
	width: 100%;
    max-width: 110px;
    padding: 10px 0;
}
.estimate_cont .estimate_color li span {
	font-size: 12px;
	display: block;
	line-height: 1.3em;
	margin-bottom: 10px;
}
.estimate_cont .estimate_color li span.number {
    font-size: 2rem;
    color: #4e66a1;
    font-weight: bold;
}

.estimate_cont .estimate_color li input {
	width: 100%;
	padding: 6px 10px;
	font-size: 14px;
}


/*soldout*/
.estimate_cont .estimate_color li.soldout {
	background: #f1f1f1;
}

.estimate_cont .estimate_color li.soldout img {
	border-radius: 5px;
    margin-bottom: 10px;
}

.estimate_cont .estimate_color li.soldout div {
	color: #13226c;
	width: 90%;
    padding: 7px 10px;
    margin: 0 auto;
    border-radius: 3px;
    font-weight: bold;
    border: 1px solid #13226c;
    letter-spacing: .2em;
    box-sizing: border-box;
	background: #FFF;
	font-size: 13px;
	line-height: 1.2em;
}

@media screen and (max-width: 1100px) {
	.estimate_cont .estimate_color li {
		width: 33%;
		padding: 5px 10px;
	}
	.estimate_cont .estimate_color li:nth-child(3n) {
		width: 34%;
	}
}


/*合計枚数*/
.estimate_cont .all_number {
	font-size: 16px;
	width: 220px;
	margin-left: 500px;
	text-align: right;
	border: 3px solid #e9e9e9;
	padding: 8px 15px;
	border-radius: 5px;
	margin-bottom: 30px;
	box-sizing: border-box;
}

.estimate_cont .all_number .tit {
	margin-right: 15px;
}
.estimate_cont .all_number .number {
	font-size: 20px;
	font-weight: bold;
	margin-right: 5px;
}

@media screen and (max-width: 1100px) {
	.estimate_cont .all_number {
		width: 30%;
		margin-left: 70%;
	}
}

@media screen and (max-width: 786px) {
	.estimate_cont .all_number {
		width: 100%;
		margin-left: 0;
	}
}




/*----お客様情報---------------*/
.customerBox table{
	width: 100%;
	margin: 15px 0;
    border-collapse: separate;
    border-spacing: 0 10px;
}
.customerBox table th{
	background-color: #f2f2f2;
	width: 270px;
	padding: 15px 30px;
	font-size: 15px;
	font-weight: bold;
	color: #3b4276;
	box-sizing: border-box;
}
.customerBox table th.required{
	padding-right: 35px;
	position: relative;
}
.customerBox table th.required:after{
	content: "必須";
	display: inline-block;
	background-color: #ff1818;
	color: #fff;
	padding: 5px 10px;
	line-height: 1em;
	border-radius: 30px;
	font-size: 13px;
	font-weight: bold;
	margin-left: 20px;
}

.customerBox table td {
	width: 580px;
	padding: 15px 20px;
	box-sizing: border-box;
    font-size: 1.3rem;
}

.customerBox table td input {
	width: 100%;
}


/**/
.customerBox table .tel-esti input{
    width: calc(100% / 3 - 6rem + 2rem);
    margin: 0 10px;
}
.customerBox table .tel-esti input:first-child{ margin-left: 0; }
.customerBox table .tel-esti input:last-child{ margin-right: 0; }

/**/
.customerBox table .timeCaution td  input{
	width: 10em;
	margin: 0 10px 10px 0;
}
.customerBox table .timeCaution td p{
	margin: 10px 0 0;
	font-size: 12px;
	line-height: 1.4em;
}


/*--エラー--*/
.customerBox .error span {
	color: #FF2327;
	border: 1px solid #FF2327;
	padding: 3px 15px;
	margin-top: 8px;
	border-radius: 3px;
    font-weight: bold;
    background: #ffe2e2;
	display: inline-block;
}



@media screen and (max-width: 786px) {
    
    .customerBox table{
        width: calc(100% + 40px);
        margin: 15px -20px;
    }
    
	.customerBox table th,
	.customerBox table td {
		display: block;
		width: 100%;
	}

	.customerBox table th{
		padding: 10px 25px;
	}
}


/*--送信ボタン--*/
.formBtn{
	margin: 20px 0;
}

.formBtn button{
	display: block;
	width: 70%;
	color: #fff;
	margin: auto;
	padding: 10px;
	font-size: 24px;
	letter-spacing: .1em;
	font-weight: bold;
	text-align: center;
	box-sizing: border-box;
	cursor: pointer;
}


.formBtn button[type="button"]{
	background-color: #888;
	border: 3px solid #b7b7b7;
	font-size: 20px;
	padding: 10px 10px;
	width: 60%;
}
.formBtn button[type="button"]:hover{
	opacity: 0.5;
}

.formBtn button[type="button"].confirmbtn {
	background-color: #f22424;
	border: 5px solid #ff567a;
	margin-bottom: 20px;
}

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

	.formBtn button[type="button"]{
		font-size: 1.6rem;
		line-height: 1.4em;
		width: 80%;
	}
	
	.formBtn button[type="button"].confirmbtn {
		font-size: 1.8rem;
		line-height: 1.4em;
	}
}



/*----確認画面-----------------------*/
.confirm_cont {
    margin-bottom: 3rem;    
}

.confirm_cont > dt {
    font-size: 14px;
    padding: .8rem 2rem;
    border-left: .7rem solid var(--main-color);
    margin-bottom: 2rem;
    letter-spacing: .08em;
    line-height: 1.3em;
}

.confirm_cont .customerBox table tr td {
    font-size: 13px;
}

.confirm_cont .item-print .print-place {
    display: block;
    text-align: center;
    background: #ecf1f9;
    padding: 2rem 2rem;
    font-size: 13px;
    border-radius: 5px;
}


/*----form_area用記述-----------------------*/
body.show_form_area {
	overflow: hidden;
}
.estimate_btn a {
	cursor: pointer;
}
.form_area {
	display: none;
	position: fixed;
	z-index: 100;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	overflow: hidden;
	padding: 0;
	background-color: rgba(0,0,0,.7);
}
.form_area #step_wrap {
	position: absolute;
	padding-top: 40px;
	width: 500%;
	left: 0;
	display: flex;
}
.form_area #step_wrap > section {
	width: 100%;
	height: calc(100vh - 80px);
	display: flex;
	justify-content: center;
}
.form_area #step_wrap > section > .step_inner {
	width: 800px;
	padding: 35px 40px;
	box-sizing: border-box;
	background-color: #fff;
	overflow-y: scroll;
}
.form_area #close_form_area {
	position: absolute;
	z-index: 200;
	top: 40px;
	right: 40px;
	display: block;
	width: 40px;
	height: 40px;
	cursor: pointer;
}
.form_area #close_form_area:hover {
	opacity: .8;
}
.form_area #close_form_area span:first-child {
	display: block;
	height: 2px;
	width: 54px;
	background-color: #fff;
	transform: rotate(45deg);
	transform-origin: 0% 50%;
	position: absolute;
	top: calc(14% - 5px);
	left: 4%;
}
.form_area #close_form_area span:last-child {
	display: block;
	height: 2px;
	width: 54px;
	background-color: #fff;
	transform: rotate(-45deg);
	transform-origin: 100% 50%;
	position: absolute;
	left: auto;
	right: 0%;
}
@media only screen and (max-width:786px) {
	.form_area #close_form_area {
		background-color: #333;
		border-radius: 100px;
		top: 80px;
		right: 10px;
	}
	.form_area #close_form_area span:last-child {
		width: 30px;
		top: calc(21%);
		right: 23%;
	}
	.form_area #close_form_area span:first-child {
		width: 30px;
		top: calc(21%);
		left: 23%;
	}
	.form_area #step_wrap {
		padding-top: 100px;
	}
	.form_area #step_wrap > section {
		height: calc(100vh - 200px);
	}
	.form_area #step_wrap > section > .step_inner {
		width: calc(100% - 40px);
        padding: 0px 20px 20px;
	}
}





/*-----------------------------------

other-commit

-----------------------------------*/
.other-commit {
    margin: 80px auto;
    background: #fafafa;
    border-top: 7px solid #5353b6;
    padding: 55px 45px 45px;
}

.other-commit dt {
    text-align: center;
    font-weight: bold;
    margin-bottom: 30px;
    color: #353535;
    font-size: 18px;
    letter-spacing: .08em;
}
.other-commit dt em {
    font-size: 25px;
    font-weight: bold;
    display: block;
    margin-top: 5px;
}

.other-commit .other-commit-list {
    display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
    gap: 15px calc(8% / 3);
}

.other-commit .other-commit-list li {
    width: 23%;
}

.other-commit .other-commit-list li a {
    border: 1px solid #e1e1e1;
    background: #FFF;
    padding: 5px 5px 0;
    box-sizing: border-box;
    text-align: center;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.other-commit .other-commit-list img {
    width: 100%;
    height: auto;
}

.other-commit .other-commit-list span {
    width: fit-content;
    max-width: calc(100% - 20px);
    padding: 12px 20px 12px 10px;
    color: #525252;
    font-weight: bold;
    font-size: 13px;
    position: relative;
    margin: 0 auto;
    line-height: 1.3;
    flex-grow: 1;
    display: flex;
    align-items: center;
    box-sizing: border-box;
}
.other-commit .other-commit-list span:before {
    content: "";
    display: block;
    width: 16px;
    height: 16px;
    background: url("../../../_images/common/other-item/circle-right.svg") no-repeat;
    filter: brightness(0) saturate(100%) invert(37%) sepia(15%) saturate(2471%) hue-rotate(201deg) brightness(90%) contrast(90%);
    position: absolute;
    right: 0;
    top: 50%;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
    transition: all 0.1s ease-out;
}

.other-commit .other-commit-list li a:hover {
    opacity: 1;
    box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 8px;
}
.other-commit .other-commit-list li a:hover img {
    opacity: 1;
}
.other-commit .other-commit-list li a:hover span:before {
    filter: brightness(0) saturate(100%) invert(87%) sepia(46%) saturate(3381%) hue-rotate(332deg) brightness(101%) contrast(101%);
}


.other-commit .other-commit-list li.tumbler-bottle {
    display: none;
}

@media screen and (max-width: 786px) {
    .other-commit {
        padding: 45px 30px 30px;
        width: calc(100% + 40px);
        margin: 80px -20px;
        box-sizing: border-box;
    }
	.other-commit .other-commit-list {
        gap: 15px calc((100% - 93%) / 2);
    }

    .other-commit .other-commit-list li {
        width: 31%;
    }
}

@media screen and (max-width: 480px) {
	
	.other-commit dt {
        margin-bottom: 20px;
        font-size: 13px;
    }
    .other-commit dt em {
        font-size: 18px;
        margin-top: 0;
    }
    
    .other-commit {
        padding: 40px 20px 20px;
    }
	.other-commit .other-commit-list {
        gap: 10px 4%;
    }

    .other-commit .other-commit-list li {
        width: 48%;
    }
    
    .other-commit .other-commit-list span {
        padding: 10px 20px 10px 10px;
        font-size: 12px;
    }
	
}