@charset "utf-8";
/* *****************************************************************************
共通スタイル記述変更
***************************************************************************** */

/* *****************************************************************************
PC用のスタイル記述
***************************************************************************** */

/* -----------------------------------------------------------------------------
Showroom Gallery
----------------------------------------------------------------------------- */
.gallery {
    width: 100%;
    box-sizing: border-box;
    position: relative;
    padding: 0px;
}

.gallery .gallery__inner {
    max-width: 100%;  /* スライダーの横幅分を増量調整 */
    width: 100%;
    padding: 0px;
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}

.gallery .swiper {
    overflow: unset;
}

.gallery .swiper-wrapper {
  /* wrapperのサイズを調整 */
    width: 100%;
    height: auto;
    position: relative;
}

.gallery .swiper-slide {
  /* スライドのサイズを調整、中身のテキスト配置調整、背景色 */
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/*.swiper-slide:nth-child(3n + 1) {
  background-color: #de4439;
}

.swiper-slide:nth-child(3n + 2) {
  background-color: #fcd500;
}

.swiper-slide:nth-child(3n + 3) {
  background-color: #53c638;
}*/

.gallery .swiper-img,
.gallery .swiper-img img {
    width: 100%;
    max-width: 100%;
    object-fit: contain;
    object-position: center;
}

.gallery .swiper-button-next,
.gallery .swiper-button-prev {
    width: 65px;
    height: 65px;
    overflow: hidden;
}

.gallery .swiper-button-prev {
    left: 70px;
    top: 47%;
}

.gallery .swiper-button-next {
    right: 70px;
    top: 47%;
}

.gallery .swiper-button-next:after {
    background-image: url(../images/common/ico_next_white.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: 65px;
    height: 65px;
    text-indent: -9999px;
    overflow: hidden;
}

.gallery .swiper-button-prev:after {
    background-image: url(../images/common/ico_next_white.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: 65px;
    height: 65px;
    text-indent: -9999px;
    overflow: hidden;
    transform: rotate(180deg);
}

.mySwiper2 {
    width: auto;
    max-width: 100%;
}

/* *****************************************************************************
SP用のスタイル記述
***************************************************************************** */
@media screen and (max-width: 1120px){

/* -----------------------------------------------------------------------------
SP__Showroom Gallery
----------------------------------------------------------------------------- */
.gallery {
    width: 100%;
    box-sizing: border-box;
    position: relative;
    padding: 20px 0px;
}

.gallery .gallery__inner {
    max-width: 100%;
    width: 100%;
    padding: 0;
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}

}

/* *****************************************************************************
TB用のスタイル記述（431px〜1120px）
***************************************************************************** */
@media screen and (min-width: 431px) and (max-width: 1120px) {

}

/* *****************************************************************************
カラムレイアウト記述（〜767px）
***************************************************************************** */
@media screen and (max-width: 767px) {

.gallery .swiper-button-next,
.gallery .swiper-button-prev {
    width: 30px;
    height: 30px;
    overflow: hidden;
}

.gallery .swiper-button-prev {
    left: 0px;
    top: 50%;
}

.gallery .swiper-button-next {
    right: 0px;
    top: 50%;
}

.gallery .swiper-button-next:after {
    background-image: url(../images/common/ico_next_white.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: 30px;
    height: 30px;
    text-indent: -9999px;
    overflow: hidden;
}

.gallery .swiper-button-prev:after {
    background-image: url(../images/common/ico_next_white.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: 30px;
    height: 30px;
    text-indent: -9999px;
    overflow: hidden;
    transform: rotate(180deg);
}

}

/* *****************************************************************************
完全にスマホ用のスタイル記述（〜431px）
***************************************************************************** */
@media screen and (max-width: 430px) {

.gallery {
    padding: 0px;
}

.gallery .swiper-button-next {
    right: -8px;
    top: 50%;
}

.gallery .swiper-button-prev {
    left: -8px;
    top: 50%;
}

}

/* *****************************************************************************
カラー後付け
***************************************************************************** */
.bgcolor__navy {
    background-color: #001960;
}

.color__red {
    color: #c8000a;
}

.color__white {
    color: #fff;
}

.ftcolor__navy {
	color: #001960;
}