@charset 'utf-8';

 /*ローディング*/
#is-loading {display: block;position: fixed;width: 100%;height: 100%;top: 0px;left: 0px;background: #000;z-index: 10000;display:flex; justify-content:center; align-items:center;}
#loading {width:250px; height:150px; ;position:fixed; top:47%; left: 0;right: 0; text-align:center; color:#fff;z-index: 10001;margin:0 auto;}
#loading .img_loading { width:100%; margin:0 auto; } 
.button { margin-left:0px; }

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

/*スライド*/
.top_wrap { width:100%; display:flex; position: relative;}
.top_wrap .line_color { width:30%; position:absolute; right:0; bottom:-50px; z-index:1; }
@media screen and (min-width: 840px) {
  .top_wrap .line_color { width:300px; position:absolute; left:0; bottom:-50px; z-index:1; }
}
.top { width:100%;margin:0px auto 0 auto; position:relative;}
.top_wrap h1{  position:absolute; right:5%; top:30px; -ms-writing-mode: tb-rl;writing-mode: vertical-rl; padding: 0px; z-index:5; line-height:2em; font-size:2rem; }
.top_wrap h1 img { width:70px; }
@media screen and (min-width: 840px) {
  .top { margin-top:0; }
  .top_wrap h1{ width:200px; position:absolute; right:130px; top:0px; left:auto; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; padding: 0px; z-index:5; line-height:2em; font-size:2rem; } 
    .top_wrap h1:before { content:none;}
  }
.top_side {display:none; }

.slide {position: relative;width: 100%;height:80vh;overflow: hidden;margin:0px 5% 50px auto;display:block;}  

@media screen and (min-width: 840px) {
  .top { width:77%;height:640px; margin:20px 2.5% 100px auto; position:relative;}
  .top_side { width:15%; margin: 0px 0 0 60px; display:block; }
  .top_side ul { width:100%;}
  .top_side li { border-left:3px solid #000; line-height:1.2em; margin:40px 0  ;}
  .top_side li a { margin-left:10px; font-size:15px; }
  .top_side li a:hover { opacity:0.7; }
  .top_side li a:link { color:#000; text-decoration: none;}
  .top_side li a:visited { color:#000; text-decoration: none;}
  .slide {position: relative;width: 100%;height: 100%;overflow: hidden;margin:0px 5% 0 auto;display:block;}
  .top_side li.green { border-left:3px solid #C5CE2B;} 
  .top_side li.orange { border-left:3px solid #FCA528;} 
  .top_side li.pink { border-left:3px solid #C25B8E;} 
  .top_side li.brown { border-left:3px solid #C0A47B;} 
  
}

  .slide .maincopy {position:absolute;top:5;}



  .slide-image {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  animation: slider-1 7.5s linear infinite;
  }


  @media screen and (max-width: 840px) {  
  .slide-image:nth-child(1) {
    background-image: url(../img/sp01.jpg);
    animation-delay: 1s;
    }
  
    .slide-image:nth-child(2) {
    background-image: url(../img/sp02.jpg);
    animation-delay:2.5s;
    }
  
    .slide-image:nth-child(3) {
    background-image: url(../img/sp03.jpg);
    animation-delay: 4s;
    }
  
    .slide-image:nth-child(4) {
      background-image: url(../img/sp04.jpg);
      animation-delay: 5.5s;
    }
  
    .slide-image:nth-child(5) {
      background-image: url(../img/sp05.jpg);
      animation-delay:7s;
    }
  }

@media screen and (min-width: 840px) {  
  .slide-image:nth-child(1) {
  background-image: url(../img/top01.jpg);
  animation-delay: 1s;
  }

  .slide-image:nth-child(2) {
  background-image: url(../img/top02.jpg);
  animation-delay:2.5s;
  }

  .slide-image:nth-child(3) {
  background-image: url(../img/top03.jpg);
  animation-delay: 4s;
  }

  .slide-image:nth-child(4) {
    background-image: url(../img/top04.jpg);
    animation-delay: 5.5s;
  }

  .slide-image:nth-child(5) {
    background-image: url(../img/top05.jpg);
    animation-delay:7s;
  }
}

  @keyframes slider-1 {
    /* 非表示状態からフェードインを開始する */
    0% {
      opacity: 0;
      transform: scale(1); /* ズームのための指定 */
    }
    /* フェードインを完了し完全表示する */
    10% {
      opacity: 1;
    }
    /* ここまで完全表示を維持したらフェードアウトを開始する */
    20% {
      opacity: 1;
    }
    /* フェードアウトを完了し非表示にする */
  26% {
      opacity: 0;
      transform: scale(1.05); /* ズームのための指定 */
    }

    100% {
      opacity: 0;
      transform: scale(1.05); /* ズームのための指定 */
    }
  }


 /*スクロールダウン*/
.top .scrolldown1{
  /*描画位置※位置は適宜調整してください*/
position:absolute;
left:50%;
bottom:100px;
  /*全体の高さ*/
height:50px;
z-index:10; 
}

@media screen and (min-width: 840px) {  
  .top .scrolldown1{ display:none; }
}

/*Scrollテキストの描写*/
.scrolldown1 span{
  /*描画位置*/
position: absolute;
left:-19px;
top: -15px;
  /*テキストの形状*/
color: #eee;
font-size:15px;
letter-spacing: 0.05em;
}

/* 線の描写 */
.scrolldown1::after{
content: "";
  /*描画位置*/
position: absolute;
top: 0;
  /*線の形状*/
width: 1px;
height: 30px;
background: #eee;
  /*線の動き1.4秒かけて動く。永遠にループ*/
animation: pathmove 1.4s ease-in-out infinite;
opacity:0;
}

/*高さ・位置・透過が変化して線が上から下に動く*/
@keyframes pathmove{
0%{
  height:0;
  top:0;
  opacity: 0;
}
30%{
  height:30px;
  opacity: 1;
}
100%{
  height:0;
  top:50px;
  opacity: 0;
}
}



/*マーク*/
.mark_wrap{ left:0px; top:340px; }

.top_wrap h1:before { content: initial;}

p.center { margin-top:0px; display:block; }
/*事例*/
.work { width:100%; display:flex; justify-content: space-between; flex-wrap:wrap; }
.work li { width:100%; margin-bottom:50px; }
.work li img { width:100%; margin-bottom:0px; }
.work li .works_info small { color:#989898; font-size:14px;}
.work li .works_info strong { width:100%; display:block; letter-spacing: 0.1em; font-size:16px;  display:inline; align-items: center; text-align: left;  font-weight:normal; }
@media screen and (min-width: 840px) {
  .work li { width:32%; margin-bottom:50px; }
  .work li img { width:100%; display:block;}
  .work li .works_info strong  { width:auto; font-size:20px; }
  
}
.work li .works_info { display:flex; flex-wrap:wrap; }
.work li .works_info img {width:3.5px; }
.work li .works_info img.works_info_arrow {width:3.5px; }
@media screen and (min-width: 840px) {
  .work li .works_info strong { width:auto; font-size:16px; margin-right:10px; letter-spacing: 0.1em; display:inline; align-items: center; text-align: left;  font-weight:normal; }
  .work li .works_info small {margin-left:10px; }
}
.work li .works_info span { width:100px; background:#C25B8E; color:#fff; padding:2.5px 5px; margin-right:10px; font-size:12px; text-align:center; }
.work li .works_info small { color:#989898; font-size:14px; margin-left:0px; }
.work li a:link { color:#000; text-decoration:none;}
.work li a:visited { color:#000;}
.img_wrap{width: 100%;border-radius:5px; margin-bottom:0px;cursor: pointer;overflow: hidden;}
.work li a:hover .img_wrap img {transform: scale(1); /* 拡大 */}
.work li a .works_info_arrow {transition:0;}
.work li a:hover .works_info_arrow {transform: translateX(0px); transition:0s;}
.st_wrap p { width:100%; font-family: "a-otf-ryumin-pr6n", serif; font-size:18px; }
@media screen and (min-width: 840px) {
  .img_wrap{cursor: pointer;overflow: hidden;width: 100%;border-radius:5px; margin-bottom:10px; will-change: transform;}
  .img_wrap img {height: auto;transition: transform .6s ease; /* ゆっくり変化させる */}
  .work li a:hover .img_wrap { border-radius:5px; overflow: hidden;}
  .work li a:hover .img_wrap img {transform: scale(1.1); /* 拡大 */}
  .work li a .works_info_arrow {transition:0.5s;}
  .work li a:hover .works_info_arrow {transform: translateX(5px); transition:0.5s;}
}
.work li .works_info span.red { background:#E33C19; }
.work li .works_info span.green { background:#C3D72C;}
.work li .works_info span.brown { background:#C0A47B;}
.work li .works_info strong .fa { width:3.5px; margin-left:5px; }
.flag { width:100%; display:flex; text-align:left; align-items: center; margin-bottom:0px; flex-wrap:wrap; }
.st_wrap { width:100%; display:flex; align-items: center; margin-top:5px; }
.work li .works_info .st_wrap img { margin:0 0 0 10px;}
.p_jirei { width:100%; text-align:center; display:block; margin-top:10px; font-size:14px; }
.ul_link { width:100%; margin: 30px auto; display:flex; justify-content: space-between; flex-wrap:wrap; will-change: transform; }
.ul_link li { width:100%;  margin-bottom:50px; }
.p_setsumei { display:block; margin-top:40px; font-size:14px; }
@media screen and (min-width: 840px) {
.ul_link { width:70%; }
.ul_link li { width:48.5%; }
.p_jirei { font-size:15px; }
.p_setsumei { display:block; margin-top:40px; font-size:15px; }
}

.ul_link li img { width:100%; margin-bottom:0px; }
.ul_link li strong { width:100%; font-size:35px; font-weight:normal;display:inline-block; text-align:left;  font-family: 'Sen', sans-serif; margin-bottom:15px; margin-top:10px; }
.ul_link li span { width:100%; display:inline-block; text-align:left; letter-spacing:0.1em; position:relative; font-size:14px; }
@media screen and (min-width: 840px) {
  .ul_link li span { font-size:15px; }
}
.ul_link li span:before {content: '';position: absolute;left: 0%; bottom: -20px; /*下線の上下位置調整*/display: inline-block;width: 34px; /*下線の幅*/height: 3px; /*下線の太さ*/
background-color: #C25B8E; /*下線の色*/}
.ul_link li .span_outline:before { background-color: #C0A47B;}

.ul_link a:link { text-decoration: none; color:#000; }
.ul_link a:visited { text-decoration: none; color:#000; }
.ul_link a:hover { opacity:0.7; }
.ul_link li a img.a_arrow { width:7px; }


.ul_link li .img_wrap{
  cursor: pointer;
  max-width: 500px;
  overflow: hidden;
  width: 100%;
  border-radius:5px; 
  margin-top:15px; 
  margin-bottom:10px; 
  will-change:transform; 
}
.ul_link li .img_wrap img {
  height: auto;
  transition: transform .6s ease; /* ゆっくり変化させる */
  display:block; 
}
.ul_link li .img_wrap:hover img {
  transform: scale(1.1); /* 拡大 */
}


.graybox .news { width:90%; margin:0 auto; display:flex; justify-content:space-between; flex-wrap:wrap; }
.graybox .news .news_left { width:100%; }
.graybox .news .news_right { width:100%; }
a.a_link { margin-top:20px; display:flex; align-items: center; display:inline-block; text-align: left;  font-weight:normal; }
a.a_link img { width:3.5px; margin-bottom:1px; margin-left:5px;  }
a.a_link:link { text-decoration:none; color:#000;}
a.a_link:visited { text-decoration:none; color:#000;}
a.a_link:hover {opacity: 0.5; color:#000;}

@media screen and (min-width: 840px) {
.graybox .news .news_left { width:30%; }
.graybox .news .news_left .h2_wrap { margin-top:0; }
.graybox .news .news_right { width:70%; }
}
.graybox .news .news_right dl { width:100%; display:flex; border-bottom:1px solid #ccc; padding:10px 0;flex-wrap:wrap; font-size:15px; }
.graybox .news .news_right dl dt { width:100%; }
.graybox .news .news_right dl dd { width:100%; }

@media screen and (min-width:840px) and ( max-width:1280px) {
  .graybox .news .news_right dl dt { width:100%; }
  .graybox .news .news_right dl dd { width:100%; }
}
@media screen and (min-width: 1280px) {
  .graybox .news .news_right dl dt { width:25%; font-size:14px;  }
  .graybox .news .news_right dl dd { width:75%; font-size:14px; }
  .graybox .news .news_right dl dd a:link { color:#000; }
  .graybox .news .news_right dl dd a:visited { color:#000; }
  .graybox .news .news_right dl dd a:hover { opacity: 0.5; }
}
.textleft { text-align:center; }

@media screen and (min-width: 840px) {
  .textleft { text-align:left; font-family:  'メイリオ',Verdana,"ＭＳ Ｐゴシック","ヒラギノ角ゴ Pro W3",Arial,Helvetica,sans-serif; }
}
.graybox .news .news_right dl dt span.red { background:#E33C19; color:#fff; padding:2.5px 5px; font-size:12px; margin-left:10px; }

h2.textleft:before {
  content: '';
  position: absolute;
  /*left: 30%;*/
  bottom: -30px; /*下線の上下位置調整*/
  display: inline-block;
  width: 34px; /*下線の幅*/
  height: 3px; /*下線の太さ*/
  -moz-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translate(-50%); /*位置調整*/
  background-color: #C5CE2B; /*下線の色*/
}

/*h2の下線の色の指定*/
h2:before{background-color:#FCA528;}
h2.shinchaku:before{background-color:#E53B1A;}
.h2_wrap.margintop0 {width:100%;text-align:center;margin:0px 0 30px 0; }



@media screen and (min-width: 840px) {
  .graybox .news { width:70%; margin:0 auto; display:flex; justify-content:space-between;}
  .h2_wrap.margintop0 { text-align:left; }
  h2.textleft:before { left:30%; }
}

.concept { width:100%; display:flex; justify-content: space-between; margin:0 0 50px 0; flex-wrap:wrap; }
.concept .concept_left {display:none;}
.concept .concept_right { width:100%; }

@media screen and (min-width: 840px) {
.concept .concept_left { width:50%; }
.concept .concept_right { width:45%; }
.concept .concept_left {width: 50%;height: 530px;overflow: hidden; display:block; }
}
.concept .concept_left img { width:100%; }
.concept .concept_right { width:90%;  margin:0 5%; }
@media screen and (min-width: 840px) {
.concept .concept_right { width:45%; margin:0;}
.concept .concept_left p.center { text-align:left; }

}

.concept .concept_right .concept_title { width:100%; font-size:17px; letter-spacing:0.1em; line-height:1.7em; margin:0 0 30px 0;font-family: "a-otf-ryumin-pr6n", serif; display:inline-block; text-align: center;  font-weight:normal; }
.concept .concept_right p { font-size:14px; margin-bottom:30px; text-align:center; }
#main .contents { margin-bottom:0px; }

@media screen and (min-width: 840px) {
.concept .concept_right .concept_title { font-size:24px; text-align:left; }
.concept .concept_right p { margin-bottom:50px; text-align:left; font-size:15px; }
.concept .concept_right p .sp { display:none; }
#main .contents { margin-bottom:50px; }
.concept .concept_right .concept_title { font-size:28px; }
p.right { width:100%; text-align:right; } 

}



@media screen and (min-width: 840px){





  #main .border_right_top{top: 950px;}
  #main .border_right2_top{top: 950px;}
  /* #main .border_right_top{animation-delay: 2s;}
#main .border_right2_top{animation-delay: 2s;}
#main .border_right2_top .left-to-right{animation-delay: 2.5s;}
#main .border_right_top .left-to-right{animation-delay: 2.5s;} */

#main .border_right_top2s{position: relative;bottom: 240px;}

/* 十字モチーフ */
#main .border_top {
  bottom: 600px;
  }


}