/* デスクトップ・タブレット横の設定 */
/* bodyブロックの設定 */
.container {
  display: flex;
  flex-direction: column;
  text-align: center;
  padding: 10px 20px;
  margin-bottom: 70px;
}
.cp_hr_work {
	border-width: 1px 0 0 0;
	border-style: dashed;
	border-color: #411E0C;
  width: 90%;
}

.sub-title {
  margin: -60px auto 50px;
  line-height: 25px;
}
.br {
  display: none;
}
.link {
  font-weight: 600;
}


/* contactブロックの設定 */
.contact-block {
  display: inline-block;
}


/* workメニューの設定 */
.work-menu {
  margin: -30px auto 30px;
}
.work-menu ul {
}
.work-menu li {
  display: inline-block;
  cursor: pointer;
}
.work-menu-button {
  background: #ffbb17;
  color: #fff;
  width: 100px;
  padding: 6px;
  margin: 5px 5px;
  border-radius: 15px;
  font-weight: 600;
  transition: all 0.2s ease;
}
.work-menu-button_all{
  background: #ff9920;
}
.work-menu-button:hover {
  opacity: 0.75;
}



/* workメニュー/イメージブロックの設定 */
.work-image-menu {
}
.work-image {
  width: 30%;
  margin: 10px;
  display: inline-block;
}
.work-image img {
  border-radius: 15px;
  border: 2px solid #e3d5cc;
}
.kara {
  opacity: 0;
}

/* workメニュー/イメージブロック/マウスホバーアニメーションの設定 */
figure.snip01 {
  position: relative;
  overflow: hidden;
  text-align: center;
}
figure.snip01 * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.6s ease;
  transition: all 0.6s ease;
}
figure.snip01 img {
  opacity: 1;
  width: 100%;
  -webkit-transition: opacity 0.35s;
  transition: opacity 0.35s;
}
figure.snip01 figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
figure.snip01 h2,
figure.snip01 p {
  margin: 0;
  position: absolute;
  width: 100%;
  left: 0;
  opacity: 0;
}
figure.snip01 h2 {
  padding: 0 25px;
  display: inline-block;
  font-weight: 400;
  text-transform: uppercase;
  bottom: 60%;
  -webkit-transform: translate3d(0%, -100%, 0);
  transform: translate3d(0%, -100%, 0);
}
figure.snip01 h2 span {
  font-weight: 400;
}
figure.snip01 p {
  top: 50%;
  padding: 0 50px;
  font-size: 0.8em;
  font-weight: 500;
  -webkit-transform: translate3d(0%, 100%, 0);
  transform: translate3d(0%, 100%, 0);
}
figure.snip01 a {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  position: absolute;
}
figure.snip01:hover img,
figure.snip01.hover img {
  opacity: 0.3;
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}
figure.snip01:hover figcaption h2,
figure.snip01.hover figcaption h2,
figure.snip01:hover figcaption p,
figure.snip01.hover figcaption p {
  -webkit-transform: translate3d(0%, 0%, 0);
  transform: translate3d(0%, 0%, 0);
}
figure.snip01:hover figcaption h2,
figure.snip01.hover figcaption h2 {
  opacity: 0.9;
}
figure.snip01:hover figcaption p,
figure.snip01.hover figcaption p {
  opacity: 0.6;
}
.date {
  line-height: 30px;
}


/* workビューメニューの設定 */
.work-view {
  width: 100%;
}
.work-view img {
  width: 50%;
}
.work-view-block {
  display: inline-block;
  width: 40%;
  padding: 10px 40px;
  vertical-align: top;
}
.work-view-block p {
  text-align: left;
  margin: 5px 0px;
}
.work-title {
  font-weight: 600;
}
.work-date {
  font-size: 14px;
}
.work-text {
}
.attention {
  color: #cdad97;
  margin-bottom: 60px;
  font-size: 14px;
}


/* タブレット縦の設定 */
@media screen and (max-width: 1024px) {
}



/* スマホ横の設定 */
@media screen and (max-width: 896px) {
.sub-title {
  font-size: 16px;
  margin: -100px auto -30px;
  padding: 0px 20px;
}
.br {
  display: block;
  margin-top: -24px;
}

/* workメニューの設定 */
.work-menu {
  margin: 0px auto 30px;
}

/* workメニュー/イメージブロックの設定 */
.work-image-menu {
  width: 100%;
}
.work-image {
  width: calc(100%/2.2);
}

/* workメニュー/イメージブロック/マウスホバーアニメーションの設定 */
figure.snip01 {
  text-align: left;
}
figure.snip01 h2,
figure.snip01 p {
  margin: 0;
  position: absolute;
  width: 100%;
  left: 0;
  opacity: 0;
  text-align: left;
}
figure.snip01 h2 {
  padding: 0px 20px;
  font-size: 14px;
  font-weight: 500;
  bottom: 60%;
}
figure.snip01 h2 span {
  font-weight: 400;
}
figure.snip01 p {
  top: 52%;
  padding: 0 20px;
  font-size: 12px;
  font-weight: 500;
}
.date {
}

/* workビューメニューの設定 */
.work-view {
  width: 100%;
}
.work-view img {
  width: 50%;
}
.work-view-block {
  display: inline-block;
  width: 40%;
  padding: 10px 40px;
  vertical-align: top;
}
.work-view-block p {
  text-align: left;
  margin: 5px 0px;
}
.work-title {
  font-weight: 600;
}
.work-date {
  font-size: 14px;
}
.work-text {
}


}



/* スマホ縦の設定 */
@media screen and (max-width: 545px) {
.sub-title {
  font-size: 16px;
  margin: -120px auto -30px;
}
.br {
  display: block;
  margin-top: -24px;
}
.cp_hr_work {
	margin-top: -50px;
}

/* workメニューの設定 */
.work-menu {
  margin: 0px auto 30px;
}
.work-menu ul {
}
.work-menu li {
}
.work-menu-button {
  width: 40%;
}



/* workメニュー/イメージブロックの設定 */
.work-image-menu {
  width: 100%;
}
.work-image {
  width: 95%;
}


/* workビューメニューの設定 */
.work-view {
  width: 100%;
}
.work-view img {
  width: 50%;
}
.work-view-block {
  display: inline-block;
  width: 40%;
  padding: 10px 40px;
  vertical-align: top;
}
.work-view-block p {
  text-align: left;
  margin: 5px 0px;
}
.work-title {
  font-weight: 600;
}
.work-date {
  font-size: 14px;
}
.work-text {
}

}