@charset "utf-8";
body{
    margin: 0 auto;
    max-width: 550px;
    font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
	box-sizing: border-box;
}
body::before {
  content: "";
  display: block;
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: -1;
  width: 100%;
  height: 100vh;
  background-image: url(../img/content_bg.jpg);
  background-size: cover;
  background-repeat: no-repeat;
}
#wrapper {
	background: #fff;
    box-shadow: #c9cdcf 0px 0px 23px;
}
img{
    display: block;
    width: 100%;
    height: auto;
}

/* ヘッダー */
header {
	background: #0b0c0f;
}
.header_item {
	padding: 3% 4% 4%;
	display: flex;
	justify-content: space-between;
}
.header_logo:hover {
	opacity: 0.8;
	transition: 0.5s;
	cursor: pointer;
}
.header_item img.sub{
    width: 30%;
}
.header_item a img{
    width: 80%;
}
@media (max-width: 550px) {
    .header_item a img{
    width: 60%;
}
}
/* mv */
.mv {
  position: relative;
  height: 733px;
}
.slideshow {
   position: relative;
   width: 100%;
}
.slideshow img {
   position: absolute;
   top: 0;
   left:0;
   z-index: 8;
   opacity: 0.0;
}
.slideshow img.active {
   z-index: 10;
   opacity: 1.0;
}
.slideshow img.last-active {
   z-index: 9;
}
.mv_txt h1 {
   position: absolute;
   width: 90%;
   left: 5%;
   top: 50%;
   z-index: 10;
}
@media (max-width: 550px) { 
	.mv {
		height: calc(733 / 550 * 100vw);
	}
}

/* scroll */
.scroll {
	animation-name:updown;
    animation-delay:0s;
    animation-duration: 3s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite; 
	width: 8%;
	margin: 6% auto 0;
}
.scroll a:hover {
	opacity: 0.8;
	transition: 0.5s;
	cursor: pointer;
}
@keyframes updown {
   0% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
  100% {
    transform: translateY(0);
  }
}

/* cta */
.cta {
	margin: 15% auto;
	width: 90%;
}
.cta_btn {
	margin: 8% 0 0;
}
.cta_form {
	position: relative;
	top: 0;
	transition: 0.2s ease-in-out;
	border-radius: 100px;
	background: #6f0808;
	box-shadow: 0 12px #6f0808;
}
.cta_form:hover {
	top: 12px;
	cursor: pointer;
	box-shadow: none;
}
.cta_box {
	display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
	margin: 4% 0 0;
}
.cta_box .cta_item {
	width: calc(97% / 2);
	margin: 3px;
}
.cta_tel {
	position: relative;
	top: 0;
	transition: 0.2s ease-in-out;
	border-radius: 100px;
	background: #193c64;
	box-shadow: 0 12px #193c64;
}
.cta_tel:hover {
	top: 12px;
	cursor: pointer;
	box-shadow: none;
}
.cta_line {
	position: relative;
	top: 0;
	transition: 0.2s ease-in-out;
	border-radius: 100px;
	background: #154516;
	box-shadow: 0 12px #154516;
}
.cta_line:hover {
	top: 12px;
	cursor: pointer;
	box-shadow: none;
}

@media (max-width: 550px) { 
	.cta_box .cta_item {
	width: calc(96% / 2);
	margin: 3px;
}
}

/* example */
.example {
	background: url(../img/example_bg.jpg) no-repeat center;
	background-position: top;
	background-color: #20284a;
}
.example_ttl {
	width: 85%;
	margin: 0 auto;
	padding: 13% 0 0;
}
.example_img {
	width: 85%;
	margin: 0 auto;
	padding: 15% 0;
}

/* example-slider */
.l-inner {
    position: relative;
    margin: 0 auto;
    padding: 0 5%;
  }
  .slide-media,
  .thumb-media {
    position: relative;
    overflow: hidden;
  }
  .slide-media img,
  .thumb-media img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
  }
.swiper-button-prev {
	background-image: url(../img/swiper_arrow_left.png);
	background-size: 50px 50px;
}
.swiper-button-next {
	background-image: url(../img/swiper_arrow_right.png);
	background-size: 50px 50px;
}
.swiper-button-prev, .swiper-button-next {
    display: grid;
    place-content: center;
    width: 3.5rem;
    height: 3.5rem;
    cursor: pointer;
    -webkit-transition: var(--transition);
    transition: var(--transition);
  }
  .swiper-button-disabled {
    pointer-events: none;
    opacity: 0;
  }

.gallery01 {
    overflow: hidden;
	margin: 10% 0 0;
  }
  .gallery01 .swiper,
  .gallery01 .thumb-wrapper {
    margin: auto;
  }
  .gallery01 .swiper {
    overflow: visible;
  }
  .gallery01 .swiper-fade .swiper-slide {
    -webkit-transition-property: opacity, -webkit-transform !important;
    transition-property: opacity, -webkit-transform !important;
    transition-property: opacity, transform !important;
    transition-property: opacity, transform, -webkit-transform !important;
    pointer-events: none;
  }
  .gallery01 .swiper-fade .swiper-slide-active {
    pointer-events: auto;
  }
  .gallery01 .swiper-controller {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding-top: 75%;
  }
  .gallery01 .swiper-button-prev, .gallery01 .swiper-button-next {
    position: absolute;
    z-index: 1;
    top: 0;
    bottom: 0;
    margin: auto;
  }
  .gallery01 .swiper-button-prev {
    right: calc(100% + 31rem);
  }
  .gallery01 .swiper-button-next {
    left: calc(100% + -4.5rem);
  }
  .gallery01 .slide {
    display: block;
    overflow: hidden;
  }
  .gallery01 .slide-media {
    display: block;
    padding-top: 75%;
    border-radius: 4px;
  }
  .gallery01 .slide-media img {
    -o-object-fit: contain;
       object-fit: contain;
  }
  .gallery01 .thumb-wrapper {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
  }
  .gallery01 .thumb-media {
    padding-top: 100%;
    cursor: pointer;
    -webkit-transition: var(--transition);
    transition: var(--transition);
    border-radius: 4px;
	margin: 20% 0 0;
  }
  .gallery01 .thumb-media img {
    -webkit-transition: var(--transition);
    transition: var(--transition);
  }
  .gallery01 .thumb-media-active {
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
    opacity: 0.3;
  }
  .gallery01 .thumb-media-active img {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
  }

/* trust */
.trust_ttl {
	width: 86%;
	margin: 0 auto;
	padding: 15% 0 0;
}
/* trust-slider */
.l-inner02 {
    position: relative;
    margin: 0 auto;
  }
 .gallery02 {
    overflow: hidden;
	margin: 10% 0 0;
	padding: 0 0 15%;
  }
  .gallery02 .swiper {
    overflow: visible;
  }
  .gallery02 .swiper-wrapper {
    -webkit-transition-timing-function: linear !important;
            transition-timing-function: linear !important;
  }
  .gallery02 .swiper-slide {
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
  }
  .gallery02 .slide {
    overflow: hidden;
    width: 36rem;
    -webkit-box-shadow: var(--box-shadow);
            box-shadow: var(--box-shadow);
  }
  .gallery02 .slide-media {
    padding-top: 60%;
  }
  .gallery02 .slide-media img {
    height: calc(100% + 16px);
    -webkit-transform: translateY(-16px);
            transform: translateY(-16px);
  }

/* quality */
.quality {
	position: relative;
}
.quality_inner {
	position: absolute;
	top: 5%;
}
.quality_ttl {
	width: 90%;
	margin: 0 auto;
}
.quality_img01 {
	width: 85%;
	margin: 10% auto 0;
}
.quality_img02 {
	width: 90%;
	margin: 10% auto 0;
}
.quality_img03 {
	width: 85%;
	margin: 10% auto 0;
}

/* feature */
.feature {
	margin: 0 0 15%;
}
.feature_ttl {
	width: 60%;
	margin: 13% auto 0;
}
.feature_img01, .feature_img02, .feature_img03 {
	margin: 10% 0 0;
}

/* after */
.after_box {
	position: relative;
}
.after_inner {
	position: absolute;
	top: 0;
}
.after_img01 {
	margin: 0 auto;
}
.after_img02 {
	width: 90%;
	margin: 10% auto 0;
}
.after_img03 {
	width: 90%;
	margin: 5% auto 0;
}

.after_map{
	margin: 5% auto 0;
	text-align: center;
}
.after_map iframe{
	height: 300px;
}
@media (max-width: 550px) {
    .after_map iframe{
	height: 220px;
}
}

/* qa */
.qa_inner {
	width: 90%;
    margin: 10% auto 15%;
}
.qa_item {
	font-family: "ten-mincho-text", serif;
	font-weight: 400;
	font-style: normal;
	border-bottom: 1px solid #d0d0d0;
    padding: 3% 0;
}
.qa_item:nth-of-type(1) {
	border-top: 1px solid #d0d0d0;
}
.question_content {
	display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 3% 0;
    position: relative;
    width: 100%;
	cursor: pointer;
}
.question_content::before, 
.question_content::after {
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    content: "";
    vertical-align: middle;
}
.question_content::before {
	right: 3%;
	width: 0;
    height: 0;
    border-style: solid;
	content: "";
	color: #20284a;
	border-right: 7px solid transparent;
    border-left: 7px solid transparent;
    border-top: 12px solid #20284a;
	border-bottom: 0;
	transition: all 0.5s ease-in-out;
}
.open::before {
    -webkit-transform: rotate(-180deg);
	transform: rotate(-180deg);
}
.question_content img {
    width: 7%;
}
.question_content h2 {
	font-size: clamp(20px, 3vw, 25px);
    text-align: justify;
    letter-spacing: 3px;
    line-height: 1.3;
    margin: 0 10% 0 2%;
    color: #1a1a1a;
}
.answer_content {
	padding: 0 2% 3%;
    display: none;
}
.answer_content p{
    text-align: justify;
	letter-spacing: 3px;
    line-height: 1.4;
	font-size: clamp(16px, 3vw, 18px);
}

footer{
	font-family: "ten-mincho-text", serif;
	font-weight: 100;
	font-style: normal;
    background: #1a1a1a;
	padding: 5% 3%;
}
.footer_logo {
	width: 50%;
	margin: 0 auto;
	padding: 5% 0 0;
}
.footer_txt {
	padding: 5% 0 0;
	display: flex;
	justify-content: center;
    flex-wrap: wrap;
}
.footer_txt a {
	margin: 10px;
	color: #fff;
	text-decoration: none;
}
.footer_txt a:hover {
	opacity: 0.5;
	transition: 0.5s;
}
.footer_copyright {
	padding: 5% 0 0;
}
.footer_copyright p{
	color: #fff;
	text-align: center;
	font-size: clamp(13px, 3vw, 15px);
}


/*240214 追記*/
.thumb-list{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    margin-top: 10px;
}
.thumb-list .thumb-item{
    width: 24%;
    margin-bottom: 5px;
}


/*240415 追記*/
.designtop img{
  width: 90%;
  margin: 8% auto 4%;
}

.designbottom img{
  width: 75%;
  margin: 5% auto 2%;
}

.designtop02 img{
  width: 40%;
  margin: 8% auto 8%;
}





/*240610 追記*/
.swiper--wrapper {
  /* wrapperのサイズを調整 */
  width: 100%;
  height: 300px;
}

.swiper-slide, {
  /* スライドのサイズを調整、中身のテキスト配置調整、背景色 */
  color: #ffffff;
  width: 100%;
  height: 100%;
  text-align: center;
  line-height: 400px;
  text-align: center;
}

.slider-img img{
  width: 38%;
  object-fit: cover;
  margin: 6% auto 5%;
}

.slider-img2 img{
  width: 32%;
  object-fit: cover;
  margin: 6% auto 5%;
}

.mySwiper2,.mySwiper4,.mySwiper6 {
  height: 400px;
  width: calc(100% - 40px); /* Adjust width to add margin */
  margin: 0 20px; /* Add left and right margin */
}

.mySwiper,.mySwiper3,.mySwiper5 {
  height: 100px;
  box-sizing: border-box;
  padding: 10px 0;
  width: calc(100% - 40px); /* Adjust width to add margin */
  margin: 0 20px; /* Add left and right margin */
}

.mySwiper .swiper-slide,
.mySwiper3 .swiper-slide,
.mySwiper5 .swiper-slide {
  width: 25%;
  height: 100%;
  opacity: 1;
  transition: opacity 0.3s;
}

.slider01, .slider02, .slider03{
  margin-bottom: 10%;
}

@media (max-width: 550px) {
  .mySwiper2,.mySwiper4,.mySwiper6 {
    height: 300px;
    width: calc(100% - 40px); /* Adjust width to add margin */
    margin: 0 20px; /* Add left and right margin */
  }


.prev2, .next2 {
  background-size: 40px 40px;
  opacity: 0.5;
}

.next2, .swiper-container-rtl .prev2 {
  right: 0;
  left: auto;
}

.prev2{
  left: 0;
}
}

.swiper-slide img{
  width: 99%;
  margin: 0 auto;
}