@charset 'utf-8';

/*フッター*/
.footer_link a.f_top:visited {text-decoration:none;}
.footer_link a.f_top:link {text-decoration:none;}
.footer_link a.f_gallery:visited {text-decoration:underline;}
.footer_link a.f_gallery:link {text-decoration:underline;}


.h1_wrap { position:relative; }
.h1_wrap strong.bunjo {
  font-family:"Hiragino Mincho Pro", "ヒラギノ明朝 Pro W3", "小塚明朝 Pro EL", "Kozuka Mincho Pro", Century, "Times New Roman", Times, "ＭＳ 明朝", serif;
  font-size:22px; font-weight:normal; letter-spacing: 0.15em; line-height:1.7em; 
}
.h1_wrap strong.bunjo:before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -28px; /*下線の上下位置調整*/
  display: inline-block;
  width: 34px; /*下線の幅*/
  height: 3px; /*下線の太さ*/
  -moz-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translate(-50%); /*位置調整*/
  background-color: #FCA528; /*下線の色*/
}
h1:before {
  background-color: #FCA528; /*下線の色*/
  }
@media screen and (min-width: 840px) {
  .h1_wrap .bunjo { font-size:36px; }
  .h1_wrap strong.bunjo {font-size:32px;}
}


.work_info h1.midashi { width:100%; text-align:center; font-size:17px; line-height:1.7em; letter-spacing: 0.1em;  margin-bottom:0px; font-weight:normal; }
.h1_wrap .line { display:none; }
.lead { font-size:20px; line-height:1.7em; text-align:center; margin-bottom:50px; font-family:"Hiragino Mincho Pro", "ヒラギノ明朝 Pro W3", "小塚明朝 Pro EL", "Kozuka Mincho Pro", Century, "Times New Roman", Times, "ＭＳ 明朝", serif;}

@media screen and (min-width: 840px) {
  .h1_wrap h1 { font-size:18px; }
  .h1_wrap .line { display:none; }
  .work_info h1.midashi { font-size:18px; font-family:  'メイリオ',Verdana,"ＭＳ Ｐゴシック","ヒラギノ角ゴ Pro W3",Arial,Helvetica,sans-serif;}
  .lead { font-size:20px; margin-bottom:50px; text-align:center; font-family:"Hiragino Mincho Pro", "ヒラギノ明朝 Pro W3", "小塚明朝 Pro EL", "Kozuka Mincho Pro", Century, "Times New Roman", Times, "ＭＳ 明朝", serif;}

}
h1.midashi:before { content: initial;}

#main .contents { width:90%; margin:0 auto; text-align:center;  position:relative; padding:30px 0px 0px 0px; display:block;}
@media screen and (min-width: 840px) {
  #main .contents { margin-bottom:80px; }
}

/*施工事例*/
.graybox .lead { width:100%; text-align:center; font-size:2rem; margin-bottom:30px; line-height:1.7; letter-spacing:0.1em; font-family:"Hiragino Mincho Pro", "ヒラギノ明朝 Pro W3", "小塚明朝 Pro EL", "Kozuka Mincho Pro", Century, "Times New Roman", Times, "ＭＳ 明朝", serif; }
.graybox { padding:50px 0 0px 0; }
.img_jirei { width:100%; margin:0 0% 0px 0%; }
@media screen and (min-width: 840px) {
  .graybox { padding-top:100px; }  
  .img_jirei { width:90%; margin:0 5% 50px 5%; }
  .graybox .sp { display:none;}
}

/*アコーディオン*/
section.accordion{ width:100%; margin:50px 0 0 0; padding:0; }
.toggle {display: none;}
.Label {padding: 1em;display: block; border-bottom:1px solid #000; font-size:16px; }
.Label::before{	/*タイトル横の矢印*/
	content:"";width: 6px;height: 6px;border-top: 1px solid #000;border-right: 1px solid #000;-webkit-transform: rotate(45deg);position: absolute;top:calc( 50% - 3px );right: 20px;transform: rotate(135deg);}
.Label,.content {-webkit-backface-visibility: hidden;backface-visibility: hidden;transform: translateZ(0);transition: all 0.3s;}
.content {/*本文*/height: 0;margin-bottom:0px;padding:0 20px;overflow: hidden;}
.toggle:checked + .Label + .content {	/*開閉時*/height: auto;padding:20px ;transition: all .3s;}
.toggle:checked + .Label::before {transform: rotate(-45deg) !important;}
.content .dl_list { width:100%; display:flex; margin-bottom:30px; border-bottom:1px solid #D1D1D1; padding-bottom:30px; flex-wrap:wrap; }
.content .dl_list dt { width:100%; margin-bottom:10px; }
.content .dl_list dd { width:100%; font-size:15px; }

@media screen and (min-width: 840px) {
  section.accordion{ width:800px; margin:0 auto; padding:0; }
  section.accordion { margin-bottom:50px; }
  .content .dl_list dt { width:30%; }
  .content .dl_list dd { width:70%; }

}



/*事例詳細ページ*/
.work_info{width:100%; }
.work_info small {width:100%; display:inline-block; color:#808080; text-align:center; font-size:1.2rem; margin-bottom:30px; font-family:  'メイリオ',Verdana,"ＭＳ Ｐゴシック","ヒラギノ角ゴ Pro W3",Arial,Helvetica,sans-serif;}
.work_info small h2.bukken_title { font-size:2.5rem; letter-spacing: 0.1em; }
.work_info p.setsumei { font-size:14px; line-height:2em; display:inline-block; text-align:left; font-family:  'メイリオ',Verdana,"ＭＳ Ｐゴシック","ヒラギノ角ゴ Pro W3",Arial,Helvetica,sans-serif; margin-bottom:50px; }
.image_center { width:100%; margin-bottom:50px; }
.image_center img { width:100%; margin-bottom:0px;}
.image_center .sp { display:block; }
.pagenation{ width:100%; display:flex; justify-content: space-between; font-size:1rem; margin:0 0 30px 0; font-size:15px; font-weight:normal; }
.pagenation li { width:50%; }
.pagenation li a { height:auto; display:flex; align-items: center; font-size:1.5rem; font-family:  'メイリオ',Verdana,"ＭＳ Ｐゴシック","ヒラギノ角ゴ Pro W3",Arial,Helvetica,sans-serif; margin-bottom:50px;}
.pagenation li a:link { color:#000; text-decoration:none;}
.pagenation li a:visited { color:#000; text-decoration:none;}
.pagenation li a:hover { color:#000; text-decoration:underline;}
.pagenation li.pagenation_left a { width:100%; text-align:left; display:inline-block;}
.pagenation li.pagenation_left img { width:3px; margin:0 10px 2px 0px; }
.pagenation li.pagenation_right img { width:3px; margin:0 0px 2px 10px; }
.pagenation li.pagenation_right a { width:100%; text-align:right; display:inline-block;}
@media screen and (min-width: 840px) {
  .image_center img { margin-bottom:50px;} 
  .image_center { width:1080px; margin:0 auto 0px auto; }
  .image_center .sp { display:none; }
  .pagenation  {width:100%; margin:10px auto 0 auto; display:flex; justify-content: space-between; font-size:1rem; }

  .pagenation li a:link { color:#000; text-decoration:none;}
  .pagenation li a:visited { color:#000; text-decoration:none;}
  .pagenation li a:hover { color:#000; text-decoration:underline;}
  .pagenation li img { width:3px; }
  .pagenation li.pagenation_left a { width:100%; text-align:left; display:inline-block; font-weight:normal; }
  .pagenation li.pagenation_left img { width:3px; margin:0 10px 2px 0px; }
  .pagenation li.pagenation_right img { width:3px; margin:0 0px 2px 10px; }
  .pagenation li.pagenation_right a { width:100%; text-align:right; display:inline-block; font-weight:normal; }
  .work_info p.setsumei { font-size:14px; text-align:center;}
}

/*線アニメーション*/
.top-to-bottom {left: 5vw;border-left-color: #B1437D;transform: rotate(90deg);animation: top-to-bottom-anim 2s linear forwards;}
.top-to-bottom::before {background:  #B1437D;}
#main .border {position: absolute; width:200px; height:292px; overflow: hidden; left:0; bottom:50px;z-index:-1;}

.ani { right:220px; top:1600px; z-index:10; }
.ani .border { border-bottom:0;}

p.center { width:100%; text-align:center; }
.button { color:#fff; display:flex; align-items: center; margin:0 auto;}
.button span { width:100%; display:inline-block; text-align:center; }
.button span img { margin:0; }

.three { width:100%; display:flex; justify-content:space-between; flex-wrap:wrap;}
.three li { width:49%; }
.three li.width_long { width:100%; }
.three li.width_long img{ width:100%; }
@media screen and (min-width: 840px) {
  .image_center img.all { width:100%; margin-bottom:0px; border-radius:5px; }
  .two { width:100%; display:flex; justify-content:space-between;}
  .two li { width:535px; }
  .two li img { width:100%; margin-bottom:0; border-radius:5px;}

  .three { width:100%; display:flex; justify-content:space-between;}
  .three li { width:353px; }
  .three li.width_long { width:716px; height:471px; overflow:hidden;border-radius:5px;}
  .three li.heihgt { width:353px; height:287px; }
  .three li.heihgt_long { width:353px; height:auto; }
  .three li img { width:100%; margin-bottom:0;border-radius:5px; }
  .three li.heihgt img { height:100%; margin-bottom:0;border-radius:5px; }
  .three li.heihgt_long img { height:100%; margin-bottom:0;border-radius:5px; }
  .three li.width_long img { width:100%; }
}