/*===========================================================*/
/* 個別 */
/*===========================================================*/

.linkStyle{color: #333;border-bottom: 1px solid;}
#wrap {
    background-color: #fff;
}
header{    background-color: rgb(255 255 255 / 50%);}
.catch{
        right: 3%;
    bottom: 0;
    max-width: 590px;
    width: 37%;
}
.dec01{
    top: 0;
    left: 100px;
}
.dec02{
    right: 0;
    bottom: -50px;
}
#intro{    background-color: #dcdcdc;}
#contents h3{
    background-image: linear-gradient(to bottom, currentColor, currentColor);
    background-position: bottom left 20px;
    background-repeat: no-repeat;
    background-size: 50px 1px;
    padding-bottom: 20px;
}
#contents .con_img{position: relative;}
#contents .con_img::before{
    content: "";
    position: absolute;
    top: 10px;
    left: 0;
    width: 100%;
    height: 100%;
    border: 1px solid #eee;
    z-index: 1;
    transform: rotate(5deg);
}
#contents .box:nth-of-type(2) .con_img::before{
    top: inherit;
    left: inherit;
    bottom: 10px;
    right: 0;
    transform: rotate(-5deg);
}
/*===========================================================*/
/* コード集 */
/*===========================================================*/
.slide-cont {
  position: relative;
  margin-top: 150px;
  margin-right: -15px;
  margin-left: -15px;
}

@keyframes infinity-scroll-right {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0%);
  }
}
@keyframes infinity-scroll-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}
.sl-photos {
  display: flex;
  overflow: hidden;
}
.sl-photos ul {
  list-style: none;
  display: flex;

  animation: infinity-scroll-right 90s infinite linear 0.5s both;
}
.sl-photos ul li {
  display: inline-block;
  margin-right: 20px;
  position: relative;
  width: 500px;
}
/*.sl-photos ul li img {
  max-width: 360px;
}*/
.sl-photos ul li .ui-d {
  margin-top: 70px;
}
.sl-text {
  font-family: athelas, serif;
  font-weight: 400;
  font-style: normal;
  font-size: 100px;
  line-height: 113px;
  display: flex;
  overflow: hidden;
  margin-top: -60px;
}
.sl-text .sl-t {
  letter-spacing: 15px;
  flex: 0 0 auto;
  white-space: nowrap;
  animation: infinity-scroll-left 90s infinite linear 0.5s both;
}


/*===========================================================*/
/* 下層 */
/*===========================================================*/
.pager li a:hover{background-color: #c9c9c9;}




/*===========================================================*/
/* タブレット */
/*===========================================================*/
@media screen and (max-width: 768px){
.catch{bottom: 50px;}
.top_cms_box_inner {
    padding: 50px 15px 100px;
}
.dec01 {
    top: -50px;
    left: 50px;
}
.dec02 {
    right: 0;
    bottom: -100px;
}
}



/*===========================================================*/
/* スマホ */
/*===========================================================*/
@media screen and (max-width: 667px){
    main.index{padding-top: 72px;}

#logo2 {
    width: 250px;
}
#main_img {
    height: 65vw;
}
.catch{
    bottom: -10px;
    width: 50%;
}
#intro{padding-top: 100px;margin-bottom: 100px;}
.dec01 {
    top: -50px;
    left: 0px;
    width: 70px;
}
.dec02 {
    right: 0;
    bottom: -50px;
    width: 70px;
}
.slide-cont{margin-top: 50px;}
.sl-photos ul li{width: 180px;}
.sl-photos ul li img {
    max-width: 188px;
}
.sl-text {
    font-size: 48px;
    line-height: 60px;
    margin-bottom: -30px;
}

}


/*===========================================================*/
/* IE */
/*===========================================================*/
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none){



}


/*===========================================================*/
/* Firefox */
/*===========================================================*/
@-moz-document url-prefix(){

}