/* ブラウザがそれぞれ持っているCSSをリセットするため */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


.clearfix::after {
  content: "";
  display: block;
  clear: both;
}


/* ****** 全の体設定/START ****** */

h1:first-letter {
  font-size: 150%;
}

body {
}

/* ****** 全の体設定/END ****** */



/* ****** アイキャッチの設定/START ****** */



}
/* ****** アイキャッチの設定/END ****** */




/* ****** aboutの設定/START ****** */
.about {
  width: 100%;
}


.about-box {
    width: 1025px;
    margin: 0 auto; /* PCのサイズ幅(1025px)に合わせて余白を作り中央寄せする設定 */
    margin-bottom: 150px;

}


.about-box h1 {
  text-align: left;
}


.about-box_left {
	width: 420px;
	float: left;

}

.about-text_title {
	font-size: 20px;
	font-weight:300;
/*	font-family: serif; */
	margin-bottom: 15px;
}


.about-box_right {
    width: 605px;
    float: right;
    padding: 90px 0px 0px 100px;
}

.about-text {
	line-height: 2; /* テキスト行間 */
	text-align: justify;  /* テキスト両端揃えの設定 */
　　text-justify: inter-ideograph; /* テキスト両端揃えの設定 */
}


.about-box1 {
	text-align: center;
	width: 150px;
	float: left;
}

.about-box2 {
	text-align: center;
	width: 150px;
	float: left;
	margin: 0 20px;
}

.about-box3 {
	text-align: center;
	width: 150px;
	float: left;
}

.about-icon {
	width: 150px;
}



/* リンクボタンの設定 */
.button {
  display       : inline-block;
  border-radius : 20px;          /* 角丸       */
  font-size     : 12pt;        /* 文字サイズ */
  text-align    : center;      /* 文字位置   */
  cursor        : pointer;     /* カーソル   */
  padding       : 14px 100px;   /* 余白       */
  background    : #8a7d65;     /* 背景色     */
  color         : #ffffff;     /* 文字色     */
  line-height   : 1em;         /* 1行の高さ  */
  opacity       : 1;           /* 透明度     */
  transition    : .3s;         /* なめらか変化 */
  box-shadow    : 2px 2px 6px #666666;  /* 影の設定 */
  margin-top: 100px;
}
.button:hover {
  box-shadow    : none;        /* カーソル時の影消去 */
  opacity       : 0.8;         /* カーソル時透明度 */
}

.link_About {
	text-align: center;
	padding-top: 100px;
}

.link_About a {
	text-decoration: none;

}
/* ****** aboutの設定/END ****** */




/* ****** Profileの設定/START ****** */

.profile {
	margin: 0 auto;
  padding: 100px 0;
  background: url("/img/profile_img_s.jpg") center center / cover no-repeat fixed;
  height: 100vh;
}

}


.profile h1 {
  text-align: right;
  font-size: 50px;
  margin: 0px 0 40px;
}

.img {
	width: 400px;
	height: 400px;
  background-size: 100%;
}

.profile-box1 {
  width: 1025px;
}


.profile-box_left {
	width: 420px;
	float: left;
  margin-top: 60px;
}


.profile-box_right {
	width: 605px;
	float: right;
	padding: 0 200px 0 0;
	color: #8A7D65;
}


.catchcopy-top {
	margin: 0 0 40px 0;
	text-align: center;
}


.Profile-text_top {
	font-size: 30px;
}


.catchcopy-bottom {
	line-height: 2; /* テキスト行間 */
	text-align: justify;  /* テキスト両端揃えの設定 */
　　text-justify: inter-ideograph; /* テキスト両端揃えの設定 */
}


/* ※ キャッチコピー「」の設定----------------------- */
.catchcopy-top {
    position: relative;
    padding:0.25em 1em;
}
.catchcopy-top:before,.catchcopy-top:after{
    content:'';
    width: 20px;
    height: 30px;
    position: absolute;
    display: inline-block;
}
.catchcopy-top:before{
    border-left: solid 1px #8A7D65;
    border-top: solid 1px #8A7D65;
    top:0;
    left: 0;
}
.catchcopy-top:after{
    border-right: solid 1px #8A7D65;
    border-bottom: solid 1px #8A7D65;
    bottom:0;
    right: 0;
}
.catchcopy-top p {
    margin: 0;
    padding: 0;
}


/* ※ Profile背景の設定----------------------- */


/*
.contents {
  position: relative;
  overflow: hidden;
  margin-top: 50%;
  padding: 150px 0;
}

.contents:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 150%;
  height: 650px;
  margin: 1% -30% 0;  /* 斜めに傾ける設定 */

/*
  background-color:rgba(1, 1, 1, 0.05);
  -webkit-transform-origin: right center;
  -ms-transform-origin: right center;
  transform-origin: right center;
  -webkit-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  transform: rotate(-3deg);
  z-index: -1;
}

*/

.contents {
    overflow: hidden;
    position: absolute;
    right: -10vw;
    left: -10vw;
    background-color:rgba(1, 1, 1, 0.05);
    transform: rotate(-2deg);
}


.contents::before {
    content: "";
    position: absolute;
    top: -30px;
    right: 0;
    bottom: -30px;
    left: 0;
    transform: rotate(2deg);
}

.contents::before {
    content: "";
    background-repeat: no-repeat;
    background-position: left top;
    position: absolute;
    transform: rotate(-2deg);
}



.contents_inner {
  box-sizing: border-box;
  width: 100%;
  max-width: 1025px;
  height: 120%;
  color: #fff;
  margin: 0 auto;
}

/* ****** Profileの設定/END ****** */





/* ****** Worksの設定/START ****** */

.Works {
   /* width: 1025px; */ /* 1025から変更 */
    margin: 0 auto; /* PCのサイズ幅(1025px)に合わせて余白を作り中央寄せする設定 */
    /*margin-bottom: 150px; */
}

.Works h1 {
  text-align: left;
}

.works-img {
	width: auto;
/*	height: 600px; */
  background: url("/img/top-img1.jpg") center center / cover no-repeat fixed;
  height: 100vh;
}  



.more-setting {
	float: right;
  margin-top: 20px;

  color: #8A7D65;
  text-decoration: none;
  transition: .3s;  /*ゆっくり透明に*/
}

.more-setting:hover {
  opacity: 0.5;   /*ホバー時に透明度50%*/
}

.more-setting:nth-of-type(4){
  margin: 0 30px 0 0;
}




/* --- 全体のBOX定義 ---------------------------------------- */
.works-imgbox {
  position   : relative;
  max-width  : auto;
  height     : 600px;
  margin     : auto;
  overflow   : hidden;
}

/* --- 背景の指定 ------------------------------------------- */
.works-imgbox .bgImg {
  position   : absolute;
  top        : 0;
  left       : 0;
  bottom     : 0;
  right      : 0;
  opacity    : 0;
  animation  : bgAnime 16s infinite;   /* 4画像 × 各4s = 16s */
}

/* --- 段差で背景画像のアニメーションを実行 ----------------- */
.works-imgbox .src1 {
  background-image : url(img/top-img01.jpg);   /* 背景の画像を指定 */
  background-position: center;
background-size: contain;


}
.works-imgbox .src2 {
  background-image : url(img/works_g14.jpg);   /* 背景の画像を指定 */
  animation-delay  : 4s;
  background-position: center;
background-size: contain;

}
.works-imgbox .src3 {
  background-image : url(img/works_g03.jpg);   /* 背景の画像を指定 */
  animation-delay  : 8s;
  background-position: center;
background-size: contain;

}
.works-imgbox .src4 {
  background-image : url(img/works_w01.jpg);   /* 背景の画像を指定 */
  animation-delay  : 12s;
  background-position: center;
background-size: contain;

}

@keyframes bgAnime {
   0% { opacity: 0; }
   10% { opacity: 1; }
  25% { opacity: 1; }
  35% { opacity: 0; }
 100% { opacity: 0; }
}

/* --- 前面の文字定義（サンプルのため変更してください） ----- */
.works-imgbox .boxString{
  position   : absolute;
  display    : inline-block;
  padding    : 20px;
  background : rgba(0, 127, 255, 0.7);          /* 半透明の青 */
  color      : #fff;
  top        : 50%;                               /* 中央寄せ */
  left       : 50%;
  transform  : translate(-50%,-50%);
  z-index    : 11;
}


/* ****** Worksの設定/END ****** */




/*  レスポンシブ設定/START ===================================== */

.scroll-fade{opacity: 0; transition: all 2s/*処理にかかる時間*/;}
.scroll-up{opacity: 0; transform: translateY(100px)/*スクロールアップする距離*/; transition: all 2s/*処理にかかる時間*/;}
.scroll-up.done, .scroll-fade.done{opacity : 1; transform : translate(0, 0);}
.load-fade {opacity : 0; transition : all 2s/*処理にかかる時間*/;}
.load-up{opacity: 0; transform: translateY(100px)/*スクロールアップする距離*/; transition: all 2s/*処理にかかる時間*/;}
.load-up.done, .load-fade.done{opacity : 1; transform : translate(0, 0);}

/*  レスポンシブ設定/END ===================================== */



/*  レスポンシブ設定/START ===================================== */


/* ****** SP設定/START ****** */
@media screen and (max-width: 480px) {

/*  aboutの設定/START  */

.about {
  width: 100%;
  padding: 0 20px;
}


.about-box {
    width: 100%;
    margin: 0 auto;
    margin-bottom:150px;
}

.about-box1,.about-box2,.about-box3 {
  float: none;
  width: 100%;
  margin: 0;

}

.about-box_left {
  float: none;
  width: auto;
}

.about-box_right {
  width: 100%;
  float: none;
  padding: 0px;
　margin: 0 auto;
}


.link_About {
    padding-top: 5px;
}

.link_About .button {
    margin-top: 50px;
}


/*  aboutの設定/START  */




/*  Profileの設定/START  */
.profile {
  width: auto;
  margin-bottom: 150px;
  padding: 0 20px;
}


.profile-box_left {
  width: auto;
  float: left;
  margin-top: 60px;
}

.profile-box_left .img {
  width: 300px;
  height: 300px;
}


.profile-box_right {
  width: auto;
  float: left;
  padding: 0px;
  font-family: serif ;
  color: #8A7D65;
}

.profile-box_right h1 {
    text-align: left;
    position: absolute; top: 2380px;


}


.contents {
  padding: 0px;
  margin: 35% 0;

}

/* ****** Worksの設定/START ****** */

.Works {
    width: auto;
    margin-bottom: 150px;
    margin: 0 20px;
}



}