@charset "utf-8";

.submenu ul li a.reform_renovation:link {background: #FED631;}

.contents { margin-bottom:0; }
h1.works_h1 { width: 100%; text-align:center; font-weight:bold; font-size:20px; letter-spacing:0.05em; padding-bottom:30px; line-height:40px; }
h1.works_h1 span { font-weight:normal; margin-right:10px; }
.ul_column3 { display: block; margin:30px auto 100px auto; }
.ul_column3 li a { background: #fff;  padding:15px; box-sizing: border-box;}
.ul_column3 li a:link p { line-height: 1.7em; margin-top:0; }
.works_btn { margin: 0 auto; position: relative; display: block; background: #F2F2F2; color:#000; text-align: center; padding: 5px 0; margin:10px 0;}
.p_lead_top { margin-bottom:20px; }
.ul_column3 li a img,li .img_box img { margin-bottom:10px; }
.ul_column3 li a strong { font-size:14px; color:#000; margin:10px 0; display: inline-block; line-height:1.6em; }
.ul_column3 li a span.works_btn { transition:3ms;}
.ul_column3 li a:hover span.works_btn { background:#0a467d; color:#fff; transition:3ms;} 
@media screen and (min-width: 960px) {
  h1.works_h1  { font-size:25px; margin-bottom:0; }
  .contents { margin-bottom:100px; }
  .ul_column3 { display:flex; justify-content: normal;}
  .ul_column3 li { width: 31%;  margin: 50px 1%; }
  .ul_column3 li a:link p {}

}

/* ワンディくん */
.img_chara_all { margin: -50px auto 20px auto; }


/*詳細ページ*/
.ul_info { width:100%; display:flex; justify-content: space-between; flex-wrap:wrap; }
.ul_info .li_zumen { width:100%; background:#fff; padding:30px 0; text-align:center; }
.ul_info .li_zumen_inner { width:90%; margin:10px auto 30px auto;}
.ul_info .li_zumen .arrow_zumen { transform: rotate(90deg); position:absolute; left:50%; margin-top:-10px; }
.ul_info .li_zumen img.zumen_img { width: 100%; margin:0 auto; }

.ul_info .li_info { width:100%; color:#000; margin-top:30px; } 
.ul_info .li_info dl { width:100%; display:flex; }
.ul_info .li_info dt { width:30%; }
.ul_info .li_info dd { width:70%; }
.ul_info .li_info strong { font-size:30px; font-weight:normal; }
.ul_info .li_info p { margin-bottom:30px; }
.ul_info li.li_zumen .sp_caution { display:none; }
.contents.info { position:relative; margin-top:0; }
.contents.info .oneder_super { width: 40vw; position:absolute; bottom:-40vw; right:-5vw; }
@media screen and (min-width: 960px) {
  .ul_info li.li_zumen .sp_caution { width:100%; display:block; }
  .ul_info .li_zumen_inner { width: 40%; margin-bottom:0; }
  .ul_info .li_zumen .arrow_zumen { transform: rotate(90deg); position:initial;}
  .ul_info .li_zumen { width:55%; background:#fff; padding:30px 0; text-align:center; display: flex; padding: 20px; justify-content: space-around;
    align-items: center; flex-wrap:wrap; } 
  .ul_info .li_zumen .arrow_zumen { transform: rotate(0deg);}
  .ul_info .li_zumen img.zumen_img:hover { opacity:0.7; }
  .ul_info .li_zumen img { margin:0 auto; }
  .ul_info .li_info { width:40%; color:#000; } 
  .ul_info .li_info dt { width:30%; }
  .ul_info .li_info dd { width:70%; }
  .contents.info { padding-bottom:0; }
  .contents.info .oneder_super { width:140px; bottom:20px; right:-30px; }
}

.p_lead_top { margin-top:-20px; }
.photo_top { width:100%; margin-bottom:20px; text-align: center; }
.photo_top img { width:100%;}
@media screen and (min-width: 960px) {
.photo_top { width: 960px; margin: 0 auto 30px auto; font-size:14px; font-weight:normal; }
.photo_top img { width: auto; height: auto; max-height: 700px; max-width: 680px;}
}

.wrap_gray { width: 100%; background: url(../img/gray_bg.png) repeat-x; background-size: 400px; height: 4vw; }
.wrap_gray_bottom { width: 100%; background: url(../img/gray_bottom.png) repeat-x; background-size: 400px; height: 10vw; }
@media screen and (min-width: 960px) {
.wrap_gray_bottom { width: 100%; background: url(../img/gray_bottom.png) repeat-x; background-size: 400px; height: 4vw; }
}
.bg_gray { background: #F7F4EB; padding: 30px 0 100px 0;  }
.voice_contents { width:90%; margin: 0 auto; }
.voice_contents strong { font-size:16px; }
.voice_contents p { color:black; font-weight:bold; }
.p_voice { margin-bottom:20px; }
@media screen and (min-width: 960px) {
  .bg_gray {padding: 50px 0;  }
  .p_lead_top { text-align: center; font-size: 16px; }
  .wrap_gray { background-size: 1000px; height:initial; }
  .wrap_gray_bottom { background-size: 1000px;  }
  .voice_contents { margin-top:30px; }



}
.p_center { width:100%; margin:10px 0; text-align:center; }
.ul_work { width:100%; display:flex; justify-content:space-between; margin-top:50px; }
.ul_work li { width:100%; margin-bottom:30px; }
.ul_work li img { width:100%; }
@media screen and (min-width: 960px) {
  .p_center { margin:50px 0; }
  .ul_work li { width:200%; }
}
.slide { width:100%; }
.st_title { font-weight:normal; font-size:30px; }



.contSect_wrap.blog::before {
  display: none; 
}

.ul_page  { display: flex; flex-wrap: wrap; }
.ul_page li { }
@media screen and (min-width: 960px) {
  .ul_page  {flex-wrap: wrap; }
  .ul_page li { width: 24%;}
  .ul_page li img { width: 100%; margin-right: 10px;}
}


.slider-2 .slick-slide {
  width: 90vw;
  height: auto;
  margin: 0 5vw;
  position: relative;
  /* overflow: hidden; */
  background: #fcfcfc;
}
.slider-2 .slick-slide img {
  display: block;
  width: auto;
  height: auto;
  object-fit: cover;
  max-height: 100%;
  max-width: 100%;
  margin: 0 auto;
}
.slider-2 .slick-arrow {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background-color: rgba(255,255,255,0.9);
  cursor: pointer;
  border: none;
  outline: none;
  font-size: 0;
  position: absolute;
  top: 110px;
  z-index: 1;
  filter: drop-shadow(0px 3px 6px rgba(0, 0, 0, 0.16));
}
.slider-2 .slick-arrow::before {
  content: '';
  display: block;
  width: 12px;
  height: 12px;
  border: 1px solid #09000d;
  border-width: 3px 3px 0 0;
  position: absolute;
  top: 16px;
  transform: rotate(45deg);
}
.slider-2 .slick-next {
  right: 0;
}
.slider-2 .slick-prev {
  left: 0;
}
.slider-2 .slick-next::before {
  left: 12px;
}
.slider-2 .slick-prev::before {
  border-width: 0 0 3px 3px;
  right: 12px;
}
.dots-2 .slick-dots {
  text-align: center;
}
.dots-2 .slick-dots li {
  display: inline-block;
}
.dots-2 .slick-dots button {
  display: block;
  width: 10px;
  height: 10px;
  margin: 6px;
  font-size: 0;
  padding: 0;
  border: 0;
  outline: none;
  cursor: pointer;
  background: #bcbcbc;
  border-radius: 50%;
}
.dots-2 .slick-dots .slick-active button {
  background: #0a467d;
}


@media screen and (min-width: 960px) {
.slider-2 .slick-slide{ width: 600px; height: 400px; margin: 0px 40px 70px  0;}
.slider-2 .slick-arrow {top:160px;}

.slider-2 { width: 1080px; margin: 40px auto;}
.slider-2 li { width: 100%;}
.slider-2 li img { width: 100%;}

  #js-slider-4 li { width: 340px; height: 350px; }
  #js-slider-4 .slick-arrow { top: 100px;}
}


/* モーダルウィンドウ */
#modal {
    position: fixed; 
    z-index:3; 
    padding-top: 100px; 
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%; 
    overflow: auto; 
    background-color: rgb(0,0,0); 
    background-color: rgba(0,0,0,0.9);
    text-align: center; /* 矢印を中央に配置するために追加 */
}

/* モーダルウィンドウの中身 */
.modal-content {
    margin: auto;
    display: block;
    width: 60%;
}

/* 閉じるボタン */
.close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
    cursor: pointer; /* カーソルをポインターに変更 */
}

.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
}

/* 画像リスト */
.image_list {
    list-style-type: none;
}

/* 画像リストアイテム */
.li_zumen {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    flex-wrap:wrap; 
}

/* 画像リストアイテム内の画像 */
.zumen_img {
    width: 100px;
    height: auto;
    cursor: pointer;
}

/* モーダルウィンドウ内の矢印 */
.arrow_left,
.arrow_right {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: white;
    font-size: 30px;
    cursor: pointer;
}

.arrow_left {
    left: 20px;
}

.arrow_right {
    right: 20px;
}
#modalImg {  position: absolute;
  width:80%; 
  margin:0 10%; 
  top: 50%;
  left: 0%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);}