@charset 'utf-8';

@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP');
@import url('https://fonts.googleapis.com/css?family=Noto+Serif+JP&subset=japanese');



html {-webkit-text-size-adjust:100%; font-size: 62.5%;}



/*共通css*/
body { width: 100%;
  min-height: 100%;
  overflow-y: scroll;
  font-family:  'メイリオ',Verdana,"ＭＳ Ｐゴシック","ヒラギノ角ゴ Pro W3",Arial,Helvetica,sans-serif;
  text-align: justify;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  word-wrap : break-word;
  overflow-wrap : break-word;
  color:222222;
  font-size: 1.6rem;
  letter-spacing: .1em;
  line-height: 1.8em;
}
body * { box-sizing:border-box; }/*線幅とpaddingを含める*/
span { line-height: 1.5em;}
small { line-height: 1.5em;}
a{color: #000;}

.gothic { font-family:  'メイリオ',Verdana,"ＭＳ Ｐゴシック","ヒラギノ角ゴ Pro W3",Arial,Helvetica,sans-serif;}



@media screen and (min-width: 840px) {
  body {  font-size: 1.4rem;
  }


}
.mincho{ font: normal normal normal 13px/2em "Hiragino Mincho Pro", "ヒラギノ明朝 Pro W3", "小塚明朝 Pro EL", "Kozuka Mincho Pro", Century, "Times New Roman", Times, "ＭＳ 明朝", serif;}

p { text-align: justify;}



h1{font-size:18px;  font-family:"Hiragino Mincho Pro", "ヒラギノ明朝 Pro W3", "小塚明朝 Pro EL", "Kozuka Mincho Pro", Century, "Times New Roman", Times, "ＭＳ 明朝", serif; font-weight:normal; letter-spacing:0.15;}
h1.gothic { font-size:16px; letter-spacing:0.15em; font-family:  'メイリオ',Verdana,"ＭＳ Ｐゴシック","ヒラギノ角ゴ Pro W3",Arial,Helvetica,sans-serif;margin-top: 10px;}

h2 {font-weight: 300;font-style: normal;font-size:16px; margin-bottom:30px;}


h2.ryumin{
  font-family: "a-otf-ryumin-pr6n", serif;
	font-weight: 300;
	font-style: normal;
	font-size:3rem;
  margin-bottom:30px;
  line-height:1.7em;
  letter-spacing: 0.1em;

}


h3{
	font-size:1.6rem;
	text-align:left;
	margin: 0 0 30px 0;
  letter-spacing: .1em;
  font-weight:normal;
}

h3.ryumin {
	font-family: "a-otf-ryumin-pr6n", serif;
	font-weight: 300;
	font-style: normal;
	font-size:2.5rem;
}



@media screen and (max-width: 840px){
  .sp { display:block; }
  br.sp { display:inline-block;}
  .pc { display:none; }
  .pad { display:none; }
}

@media screen and (min-width: 840px) and (max-width:1120px){
  br.sp { display:none; }
  br.pc { display:inline-block; }
  .pc { display:block; }
}

@media screen and (min-width: 1120px){
  br.sp { display:none; }
  br.pc { display:inline-block; }
}

section .left { width:50%; }
section .right { width:50%; }

.white {color:#fff;}

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


.graybox { width:100%; height:auto; background:#F7F7F7; padding:50px 5%; }

@media screen and (min-width: 840px) {
.graybox { padding:50px; }
}

.h1_wrap{width:100%;text-align:center;margin:0px 0 50px 0;}

@media screen and (min-width: 840px) {
  .h1_wrap { margin-bottom:60px; }
}
.h1_wrap strong{
  width:100%;
  display:inline-block;
  font-size:35px;
  letter-spacing: .1em;
  font-weight: normal;
  color:#000;
  font-style: bold;

  font-family: 'Sen', sans-serif;
}

@media screen and (min-width: 840px) {
  .h1_wrap strong{
    font-size:50px;}
}



h1 {
  display: inline-block;
  position: relative;
}
h1: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: #C0A47B; /*下線の色*/
}



.h2_wrap{
  width:100%;
  text-align:center;
  margin:0px 0 30px 0;
}

.h2_wrap strong{
  width:100%;
  display:inline-block;
  font-size:35px;
  letter-spacing: .1em;
  font-weight: normal;
  color:#000;
  font-style: bold;
  margin-bottom:15px;
  font-family: 'Sen', sans-serif;
  text-align:center; 
}

@media screen and (min-width: 840px) {
  .h2_wrap{margin:50px 0 30px 0;}
  .h2_wrap strong{ text-align:left;}
  

}

.h2_wrap h1{
  width:100%;
  margin:0 0 100px 0;
  font: normal normal normal 1.5rem "Hiragino Mincho Pro", "ヒラギノ明朝 Pro W3", "小塚明朝 Pro EL", "Kozuka Mincho Pro", Century, "Times New Roman", Times, "ＭＳ 明朝", serif; position:relative;
}

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



.button { width:80%; height:50px; line-height:50px; font-size:1.4rem; background:#000; color:#fff; display:inline-block; border-radius:5px; text-align: center; font-family:  'メイリオ',Verdana,"ＭＳ Ｐゴシック","ヒラギノ角ゴ Pro W3",Arial,Helvetica,sans-serif;} 
@media screen and (min-width: 840px) {
  .button { width:230px; }
  .button span{display: inline-block;}
  .button:hover span{  transition: .5s;
    -webkit-transform: rotateX(360deg);
    transform: rotateX(360deg); }
}
.button { margin-left:0px; }

.button:link { text-decoration:none; }
.button:visited { text-decoration:none; }
.button .button_arrow { width:5px; margin-top:5px; margin-left:5px;transition:0.5s; }
.button:hover .button_arrow {transform: translateX(10px); transition:0.5s;}



.center{
  width:100%;
  text-align:center;
  display:block;
  margin:0px 0 0 0;
}

.center.bottom100 {
  width:100%;
  text-align:center;
  display:block;
  margin:50px 0 100px 0;
}

/*矢印*/
.arrow_r {
  position: relative;
  display: inline-block;
  padding-left: 20px;
  color: #fff;
  text-decoration: none;
}
.arrow_r:before {
  content: '';
  width: 6px;
  height: 6px;
  border: 0;
  border-top: solid 1px #fff;
  border-right: solid 1px #fff;
  position: absolute;
  top: 50%;
  left: 0;
  margin-top: -4px;
  transform: rotate(45deg);
}


/*オブジェクトを配置して回転*/
.mark_wrap {display:none; }
@media screen and (min-width: 840px) {
  .mark_wrap { width:300px; position:absolute; left:-100px; top:500px; z-index:10; display:block; }
  .mark_wrap .mark_left { width:240px; position:absolute; left:0; }
  .mark_wrap #mark_right { width:200px; position:absolute; left:160px; top:95px; animation:mark_right 5s linear infinite; z-index:10;}
  @keyframes mark_right {
    0% {
      transform:rotate(0deg);
    }
    60% {
      transform:rotate(0deg);
    }
    100% {
      transform:rotate(360deg);
    }
  }
}






/*スクロール（PCだけ）*/
@media screen and (min-width: 840px) {
/*----------------------------
scroll_up ｜下から上へ出現
----------------------------*/
.scroll_up {
    transition: 0.8s ease-in-out;
    transform: translateY(30px);
    opacity: 0;
  }
  .scroll_up.on {
    transform: translateY(0);
    opacity: 1.0;
  }

  /*----------------------------
  scroll_left ｜左から出現
  ----------------------------*/
  .scroll_left {
      -webkit-transition: 0.8s ease-in-out;
      -moz-transition: 0.8s ease-in-out;
      -o-transition: 0.8s ease-in-out;
      transition: 0.8s ease-in-out;
      transform: translateX(-30px);
      opacity: 0;
      filter: alpha(opacity=0);
      -moz-opacity: 0;
  }
  .scroll_left.on {
      opacity: 1.0;
      filter: alpha(opacity=100);
      -moz-opacity: 1.0;
      transform: translateX(0);
  }

  /*----------------------------
  scroll_right ｜右から出現
  ----------------------------*/

  .scroll_right {
      -webkit-transition: 0.8s ease-in-out;
      -moz-transition: 0.8s ease-in-out;
      -o-transition: 0.8s ease-in-out;
      transition: 0.8s ease-in-out;
      transform: translateX(30px);
      opacity: 0;
      filter: alpha(opacity=0);
      -moz-opacity: 0;
  }
  .scroll_right.on {
      opacity: 1.0;
      filter: alpha(opacity=100);
      -moz-opacity: 1.0;
      transform: translateX(0);
  }
  /*------------------------*/
  /*------------------------*/
  /*------- layout -------*/
  ul.box {
    width: 80%;
    max-width: 300px;
    margin: 0 auto;
    padding: 10vw;
    list-style: none;
  }
  ul.box li {
    margin-bottom: 400px;
    & img {
      max-width: 100%;
    }
  }
}


/* 十字モチーフ */
#main .border {
  position: absolute;
  width: 200px;
  height: 292px;
  overflow: hidden;
  /* background: #000; */
  left: 0;
  bottom: 50px;
  z-index: 10;
  }




/*矢印が右に移動して背景がつく*/

.btnarrow{
    /*矢印の基点とするためrelativeを指定*/
	position: relative;
    /*ボタンの形状*/
	border: 1px solid #555;
    padding: 10px 50px;
    display: inline-block;
    text-align: center;
    text-decoration: none;
    color: #333;
    outline: none;
    /*アニメーションの指定*/
    transition: all .2s linear;
}

.btnarrow:hover{
	background:#333;
	color:#fff;
}

/*矢印と下線の形状*/
.btnarrow::before{
	content:"";
    /*絶対配置で下線の位置を決める*/
	position: absolute;
	top:50%;
	right:-26px;
    /*下線の形状*/
	width:40px;
	height:1px;
	background:#333;
    /*アニメーションの指定*/
    transition: all .2s linear;
}

.btnarrow::after{
	content:"";
    /*絶対配置で矢印の位置を決める*/
	position: absolute;
    top: 25%;
    right: -21px;
    /*矢印の形状*/
	width:1px;
	height:12px;
	background:#333;
    transform:skewX(45deg);
    /*アニメーションの指定*/
    transition: all .2s linear;
}

/*hoverした際の移動*/
.btnarrow:hover::before{
	right:-30px;
}

.btnarrow:hover::after{
	right:-25px;
}






#page.act .txtL.mv.act,#page.act .mv.act .index-wrap-image,#page.act .mWap.b2.mv.act:before{
	opacity: 1;
   -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
	transition: all .5s cubic-bezier(.4,.8,.74,1) 0s;
}



#page.act .mv.act .wrap7 .areasBx,#page.act .mv.act .boxTx.mv.act,#page.act .mv.act .firmWp.mv.act,#page.act .mWap.b2.mv.act{
		opacity: 1;
   -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
	transition: all .5s cubic-bezier(.4,.8,.74,1) 0s;
}

.items_warap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: space-between;
  margin-right: 6%;
}
.items_warap .items1 {
  width: 30%;
  z-index: 1;
}

.txtR,.btn_contact{
	opacity: 0;
   -webkit-transform: translate3d(200px,0,0);
    transform: translate3d(200px,0,0);
	transition: all .5s cubic-bezier(.4,.8,.74,1) 0s;
}



@media screen and (min-width: 840px) {
  .wrap5{
    position: relative;
    display:  block;
    padding: 70px 0;
    margin-bottom:100px;
  }

}

.txtL,.index-wrap-image,.mWap.b2:before{
	opacity: 0;
   -webkit-transform: translate3d(-200px,0,0);
    transform: translate3d(-200px,0,0);
	transition: all .5s cubic-bezier(.4,.8,.74,1) 0s;
}

.wrap7 .areasBx,.boxTx,.firmWp,.mWap.b2.mv{
	opacity: 0;
   -webkit-transform: translate3d(-200px,0,0);
    transform: translate3d(-200px,0,0);
	transition: all .5s cubic-bezier(.4,.8,.74,1) 0s;
}

.mWap.b2:before {
  right: 5%;
}







/* 600px〜959px：タブレット
------------------------------ */
@media screen and (min-width:600px) and (max-width:959px) {
.txt{
  font-size: 1.4rem;
  letter-spacing: .1em;
  line-height: 1.8em;
}
}

/* 1280px〜：大型PC
------------------------------ */
@media screen and (min-width:1280px) {



}



/*線のアニメーション*/
@media screen and (min-width:840px) {
#main { position:relative; overflow: hidden;}

.arrow {position: absolute;border-left: 50px solid #808080;}
.arrow::before {content: "";position: absolute;bottom: 15px;left: -50px;width: 250px;height: 8px;background: #808080;transform-origin: left center;transform: rotate(-180deg);}
  /*右側の斜め線*/
  #main .border_right {position: absolute;width: 250px;height:250px;overflow: hidden;/*  background: #000; */right:-7%;top:4%; z-index:1;transform:rotate(135deg); }
  #main .border_right2 {position: absolute;width: 292px;height:292px;overflow: hidden;/*  background: #000; */right:-5%;top:4%; z-index:1;transform:rotate(135deg); }
  #main .border_right2 .left-to-right {bottom: 20%;border-left-color: #000;transform: rotate(0);animation: left-to-right-anim 4s linear infinite;}
  #main .border_right2 .left-to-right::before {background: #000;}
  #main .border_right2 .red {bottom: 20%;border-left-color: #E53B00;transform: rotate(0);animation: left-to-right-anim 4s linear infinite;}
  
#main .border_right2 .red::before {background: #E53B00;}
#main .border_right2 .yellow::before {background:#FCA518;}
#main .border_right2 .green::before {background:#C5CE00;}
#main .border_right2 .purple::before {background:#AF457D;}
#main .border_right2 .brown::before {background:#C0A47B;}








/*十時の線*/
.left-to-right {bottom: 20%;border-left-color: #000;transform: rotate(0);animation: left-to-right-anim 4s linear infinite;animation-delay: 0.1s;}
.left-to-right::before {background: #000;}

/*十時の線*/
.top-to-bottom {left: 5vw;border-left-color: #C5CE2B;transform: rotate(90deg);animation: top-to-bottom-anim 4s linear infinite;}
.top-to-bottom::before {background: #C5CE2B;}

/* @keyframes left-to-right-anim {0% {left: -10%;}100% {left: 100%;}} もとはこれ*/

@keyframes left-to-right-anim {0% {left: -10%;}30% {left: 100%;}100% {left: 100%;}}

@keyframes top-to-bottom-anim {0% {top: -20%;}30% {top: 120%;}100% {top: 120%;}}
.ani{transition: 1s all;opacity: 0; position:absolute; z-index:10; }
.ani.move{opacity: 1; z-index:10; }
}

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

.img_wrap .hover-text{display: none;}

@media screen and (min-width:840px) {
.work .img_wrap{
  position: relative;
}

.img_wrap .hover-text {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  color: #fff;
  background-color: rgba(0,0,0,0.65);
  /*透明にして表示させない*/
  opacity: 0;
  /*ホバーの動き方*/
  transition: .3s ease-in-out;
}
.img_wrap .hover-text{
  font-size: 16px;
  line-height: 274px;
  font-family: 'Sen', sans-serif;
  display: block;
}

/*ホバーエフェクト*/
.img_wrap:hover .hover-text {
  /*不透明にして表示*/
  opacity: 1;
}
.img_wrap:hover{filter: brightness(100%);}
}