@charset "UTF-8";
#container #contents {
  background: var(--grade_wht);
}
#container #contents .bread_area .breadcrumb * {
  color: var(--black01);
}
#container #contents .slick-prev,
#container #contents .slick-next {
  width: var(--w30_50);
  height: var(--w30_50);
  background-color: var(--blue01);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}
#container #contents .slick-prev::before,
#container #contents .slick-next::before {
  color: #fff;
  font-weight: bold;
  font-size: var(--fs20_32);
}
#container #contents .slick-prev {
  left: 0;
}
#container #contents .slick-next {
  right: 0;
}
#container #contents .works_list .noposts {
  font-size: var(--fs14_20);
  color: #fff;
}
#container #contents .detail_area img {
  width: auto;

}

/* ----------------------------------------------
　PC設定
------------------------------------------------*/
@media all and (min-width: 769px) {
  #container #contents .works_list .title {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: -moz-fit-content;
    width: fit-content;
    grid-gap: var(--m8px);
    margin: 0 auto var(--m50);
  }
  #container #contents .works_list .title::before {
    content: "";
    display: inline-block;
    width: 50%;
    height: 2px;
    border-radius: 3px;
    background-color: var(--black01);
    order: 2;
  }
  #container #contents .works_list .title .jp {
    font-size: var(--fs16_20);
    order: 3;
  }
  #container #contents .works_list .title .en {
    font-size: var(--fs22_56);
    line-height: 1;
    order: 1;
  }
  #container #contents .works_list .list {
    display: flex;
    flex-wrap: wrap;
    grid-gap: var(--m50) 2%;
  }
  #container #contents .works_list .box {
    width: 32%;
  }
  #container #contents .works_list .box a {
    display: flex;
    flex-direction: column-reverse;
    position: relative;
    grid-gap: 5px;
    z-index: 1;
    transition: all 0.5s;
  }
  #container #contents .works_list .box a .text_area .tit {
    font-size: var(--fs16_18);
    color: var(--black01);
  }
  #container #contents .works_list .box a .text_area .more {
    margin-left: auto;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    grid-gap: var(--m16);
  }
  #container #contents .works_list .box a .text_area .more::after {
    content: "";
    display: inline-block;
    width: var(--w20_42);
    aspect-ratio: 58/12;
    background: url(/images/common/arrow_more.svg) center/100% no-repeat;
    transition: all 0.5s;
  }
  #container #contents .works_list .box a .text_area .more .en {
    font-size: var(--fs14_18);
    transition: all 0.5s;
  }
  #container #contents .works_list .box a .img {
    aspect-ratio: 3/2;
    overflow: hidden;
    display: flex;
    align-items: center;
    background-color: #fff;
  }
  #container #contents .works_list .box a .img img {
    height: 100%;
    -o-object-fit: contain;
       object-fit: contain;
  }
  #container #contents .works_list .box a:hover .text_area .more::after {
    transform: translateX(5px);
  }
  #container #contents .works_list .box a:hover .img img {
    transform: scale(1.1);
  }
  #container #contents .works_list .recommend {
    margin-bottom: var(--m100);
  }
  #container #contents .works_list .past {
    padding: var(--m50) 0 var(--m100);
    background: var(--grade_black);
  }
  #container #contents .works_list .past .title::before {
    background-color: #fff;
  }
  #container #contents .works_list .past .title .jp, #container #contents .works_list .past .title .en {
    color: #fff;
  }
  #container #contents .works_list .past .box {
    width: 23.5%;
  }
  #container #contents .works_list .past .box a .text_area .tit {
    color: #fff;
    font-size: var(--fs14_16);
  }
  #container #contents .works_list .past .box a .text_area .more::after {
    background: url(/images/common/arrow_more_w.svg) center/100% no-repeat;
  }
  #container #contents .works_list .past .box a .text_area .more .en {
    color: #fff;
    font-size: var(--fs14_16);
  }
  #container #contents .works_list .past .box a .img {
    background: var(--black01);
  }
  #container #contents .works_list .past .box a:hover .text_area .more::after {
    transform: translateX(5px);
  }
  #container #contents .works_list .past .box a:hover .img img {
    transform: scale(1.1);
  }
  #container #contents .gallery_detail {
    padding-bottom: var(--m100);
  }
  #container #contents .gallery_detail .wrapper {
    max-width: 1100px;
  }
  #container #contents .gallery_detail .title_box {
    font-size: var(--fs18_28);
    text-align: center;
    position: relative;
    width: -moz-fit-content;
    width: fit-content;
    margin: 0 auto var(--m50);
  }
  #container #contents .gallery_detail .title_box::after {
    content: "";
    display: inline-block;
    width: 50%;
    height: 2px;
    border-radius: 5px;
    background-color: var(--black01);
    position: absolute;
    bottom: calc(var(--m8px) * -1);
    left: 50%;
    transform: translateX(-50%);
  }
  #container #contents .gallery_detail .img_area {
    margin-bottom: var(--m50);
  }
  #container #contents .gallery_detail .img_area .slider .img {
    aspect-ratio: 3/2;
    overflow: hidden;
  }
  #container #contents .gallery_detail .img_area .slider .img a {
    display: block;
    width: 100%;
    height: 100%;
    text-align: center;
  }
  #container #contents .gallery_detail .img_area .slider .img a img {
    height: 100%;
    -o-object-fit: contain;
       object-fit: contain;
  }
  #container #contents .gallery_detail .img_area .thumb .img {
    overflow: hidden;
    width: 100%;
    aspect-ratio: 3/2;
    position: relative;
  }
  #container #contents .gallery_detail .img_area .thumb .img img {
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
  }
  #container #contents .gallery_detail .outline {
    padding: var(--m20) var(--m32);
    background-color: var(--blue01);
    font-size: var(--s16_18);
    color: #fff;
    margin-bottom: var(--m100);
  }
  #container #contents .gallery_detail .detail_area {
    margin-bottom: var(--m100);
  }
  #container #contents .gallery_detail .detail_area > div[class*=_box]:not(:last-of-type) {
    margin-bottom: var(--m60);
  }
  #container #contents .gallery_detail .detail_area p {
    margin-bottom: 0.5em;
  }
  #container #contents .gallery_detail .detail_area p:has(img) {
    margin-bottom: var(--m16);
    aspect-ratio: 3/2;
  }
  #container #contents .gallery_detail .detail_area p:has(img) img {
    height: 100%;
    -o-object-fit: contain;
       object-fit: contain;
  }
  #container #contents .gallery_detail .detail_area p.tit {
    font-size: var(--fs18_20);
    font-weight: bold;
  }
  #container #contents .gallery_detail .detail_area .double_box .img_box {
    display: flex;
    flex-flow: wrap;
    justify-content: space-between;
  }
  #container #contents .gallery_detail .detail_area .double_box .img_box p:has(img) {
    width: 49%;
  }
  #container #contents .gallery_detail .detail_area .harf_box {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
  }
  #container #contents .gallery_detail .detail_area .harf_box.rev {
    flex-direction: row-reverse;
  }
  #container #contents .gallery_detail .detail_area .harf_box .text_area {
    width: 49%;
  }
  #container #contents .gallery_detail .detail_area .harf_box p:has(img) {
    width: 49%;
  }
  #container #contents .gallery_detail .sns_area {
    margin-bottom: var(--m70);
  }
  #container #contents .gallery_detail .sns_area .en {
    font-size: var(--fs22_36);
    text-align: center;
    position: relative;
    width: -moz-fit-content;
    width: fit-content;
    margin: 0 auto var(--m50);
  }
  #container #contents .gallery_detail .sns_area .en::after {
    content: "";
    display: inline-block;
    width: 50%;
    height: 2px;
    border-radius: 5px;
    background-color: var(--black01);
    position: absolute;
    bottom: calc(var(--m8px) * -1);
    left: 50%;
    transform: translateX(-50%);
  }
  #container #contents .gallery_detail .sns_area .flex_area {
    display: flex;
    flex-wrap: wrap;
    grid-gap: var(--m32) 4%;
  }
  #container #contents .gallery_detail .sns_area .flex_area .banner {
    width: 48%;
  }
  #container #contents .gallery_detail .contact_area {
    margin-bottom: var(--m70);
    border: 3px solid var(--green01);
    padding: 0;
    padding-bottom: var(--m40);
  }
  #container #contents .gallery_detail .contact_area .title {
    padding: 0.25em 1em;
    background-color: rgba(103, 162, 214, 0.85);
    margin-bottom: var(--m50);
  }
  #container #contents .gallery_detail .contact_area .tel_area, #container #contents .gallery_detail .contact_area .ct_flex {
    padding-left: var(--m40);
    padding-right: var(--m40);
  }
  #container #contents .gallery_detail .contact_area .button a .txt {
    font-size: var(--fs16_24);
  }
  #container #contents .gallery_detail .back {
    max-width: 300px;
    margin: 0 auto;
  }
  #container #contents .gallery_detail .back a {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--m16) var(--m40);
    position: relative;
    transition: all 0.5s;
    font-size: var(--fs16_20);
    background-color: var(--blue01);
    border: 1px solid var(--blue01);
    color: #fff;
  }
  #container #contents .gallery_detail .back a:hover {
    background-color: #fff;
    color: var(--blue01);
  }
}
@media all and (min-width: 769px) and (max-width: 980px) {
  #container #contents .works_list .box {
    width: 49%;
  }
  #container #contents .works_list .past .box {
    width: 32%;
  }
  #container #contents .gallery_detail .contact_area .button {
    width: 100%;
  }
}
/* ----------------------------------------------
　PAD以下設定
------------------------------------------------*/
@media all and (max-width: 768px) {
  #container #contents .works_list .title {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: -moz-fit-content;
    width: fit-content;
    grid-gap: var(--m8px);
    margin: 0 auto var(--m50);
  }
  #container #contents .works_list .title::before {
    content: "";
    display: inline-block;
    width: 50%;
    height: 2px;
    border-radius: 3px;
    background-color: var(--black01);
    order: 2;
  }
  #container #contents .works_list .title .jp {
    font-size: var(--fs16_20);
    order: 3;
  }
  #container #contents .works_list .title .en {
    font-size: var(--fs22_56);
    line-height: 1;
    order: 1;
  }
  #container #contents .works_list .list {
    display: flex;
    flex-wrap: wrap;
    grid-gap: var(--m50) 2%;
  }
  #container #contents .works_list .box {
    width: 49%;
  }
  #container #contents .works_list .box a {
    display: flex;
    flex-direction: column-reverse;
    position: relative;
    grid-gap: 5px;
    z-index: 1;
    transition: all 0.5s;
  }
  #container #contents .works_list .box a .text_area .tit {
    font-size: var(--fs16_18);
    color: var(--black01);
  }
  #container #contents .works_list .box a .text_area .more {
    margin-left: auto;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    grid-gap: var(--m16);
  }
  #container #contents .works_list .box a .text_area .more::after {
    content: "";
    display: inline-block;
    width: var(--w20_42);
    aspect-ratio: 58/12;
    background: url(/images/common/arrow_more.svg) center/100% no-repeat;
    transition: all 0.5s;
  }
  #container #contents .works_list .box a .text_area .more .en {
    font-size: var(--fs14_18);
    transition: all 0.5s;
  }
  #container #contents .works_list .box a .img {
    aspect-ratio: 3/2;
    overflow: hidden;
    display: flex;
    align-items: center;
    background-color: #fff;
  }
  #container #contents .works_list .box a .img img {
    height: 100%;
    -o-object-fit: contain;
       object-fit: contain;
  }
  #container #contents .works_list .recommend {
    margin-bottom: var(--m100);
  }
  #container #contents .works_list .past {
    padding: var(--m50) 0 var(--m100);
    background: var(--grade_black);
  }
  #container #contents .works_list .past .title::before {
    background-color: #fff;
  }
  #container #contents .works_list .past .title .jp, #container #contents .works_list .past .title .en {
    color: #fff;
  }
  #container #contents .works_list .past .box {
    width: 32%;
  }
  #container #contents .works_list .past .box a .text_area .tit {
    color: #fff;
    font-size: var(--fs14_16);
  }
  #container #contents .works_list .past .box a .text_area .more::after {
    background: url(/images/common/arrow_more_w.svg) center/100% no-repeat;
  }
  #container #contents .works_list .past .box a .text_area .more .en {
    color: #fff;
    font-size: var(--fs14_16);
  }
  #container #contents .works_list .past .box a .img {
    background: var(--black01);
  }
  #container #contents .gallery_detail {
    padding-bottom: var(--m100);
  }
  #container #contents .gallery_detail .wrapper {
    max-width: 1100px;
  }
  #container #contents .gallery_detail .title_box {
    font-size: var(--fs18_28);
    text-align: center;
    position: relative;
    width: -moz-fit-content;
    width: fit-content;
    margin: 0 auto var(--m50);
  }
  #container #contents .gallery_detail .title_box::after {
    content: "";
    display: inline-block;
    width: 50%;
    height: 2px;
    border-radius: 5px;
    background-color: var(--black01);
    position: absolute;
    bottom: calc(var(--m8px) * -1);
    left: 50%;
    transform: translateX(-50%);
  }
  #container #contents .gallery_detail .img_area {
    margin-bottom: var(--m50);
  }
  #container #contents .gallery_detail .img_area .slider .img {
    aspect-ratio: 3/2;
    overflow: hidden;
  }
  #container #contents .gallery_detail .img_area .slider .img a {
    display: block;
    width: 100%;
    height: 100%;
    text-align: center;
  }
  #container #contents .gallery_detail .img_area .slider .img a img {
    height: 100%;
    -o-object-fit: contain;
       object-fit: contain;
  }
  #container #contents .gallery_detail .img_area .thumb .img {
    overflow: hidden;
    width: 100%;
    aspect-ratio: 3/2;
    position: relative;
  }
  #container #contents .gallery_detail .img_area .thumb .img img {
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
  }
  #container #contents .gallery_detail .outline {
    padding: var(--m20) var(--m32);
    background-color: var(--blue01);
    font-size: var(--s16_18);
    color: #fff;
    margin-bottom: var(--m100);
  }
  #container #contents .gallery_detail .detail_area {
    margin-bottom: var(--m100);
  }
  #container #contents .gallery_detail .detail_area > div[class*=_box]:not(:last-of-type) {
    margin-bottom: var(--m60);
  }
  #container #contents .gallery_detail .detail_area p {
    margin-bottom: 0.5em;
  }
  #container #contents .gallery_detail .detail_area p:has(img) {
    margin-bottom: var(--m16);
    aspect-ratio: 3/2;
  }
  #container #contents .gallery_detail .detail_area p:has(img) img {
    height: 100%;
    -o-object-fit: contain;
       object-fit: contain;
  }
  #container #contents .gallery_detail .detail_area p.tit {
    font-size: var(--fs18_20);
    font-weight: bold;
  }
  #container #contents .gallery_detail .detail_area .double_box .img_box {
    display: flex;
    flex-flow: wrap;
    justify-content: space-between;
  }
  #container #contents .gallery_detail .detail_area .double_box .img_box p:has(img) {
    width: 49%;
  }
  #container #contents .gallery_detail .detail_area .harf_box {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
  }
  #container #contents .gallery_detail .detail_area .harf_box.rev {
    flex-direction: row-reverse;
  }
  #container #contents .gallery_detail .detail_area .harf_box .text_area {
    width: 49%;
  }
  #container #contents .gallery_detail .detail_area .harf_box p:has(img) {
    width: 49%;
  }
  #container #contents .gallery_detail .sns_area {
    margin-bottom: var(--m70);
  }
  #container #contents .gallery_detail .sns_area .en {
    font-size: var(--fs22_36);
    text-align: center;
    position: relative;
    width: -moz-fit-content;
    width: fit-content;
    margin: 0 auto var(--m50);
  }
  #container #contents .gallery_detail .sns_area .en::after {
    content: "";
    display: inline-block;
    width: 50%;
    height: 2px;
    border-radius: 5px;
    background-color: var(--black01);
    position: absolute;
    bottom: calc(var(--m8px) * -1);
    left: 50%;
    transform: translateX(-50%);
  }
  #container #contents .gallery_detail .sns_area .flex_area {
    display: flex;
    flex-wrap: wrap;
    grid-gap: var(--m32) 4%;
  }
  #container #contents .gallery_detail .sns_area .flex_area .banner {
    width: 48%;
  }
  #container #contents .gallery_detail .contact_area {
    margin-bottom: var(--m70);
    border: 3px solid var(--green01);
    padding: 0;
    padding-bottom: var(--m40);
  }
  #container #contents .gallery_detail .contact_area .title {
    padding: 0.25em 1em;
    background-color: rgba(103, 162, 214, 0.85);
    margin-bottom: var(--m50);
  }
  #container #contents .gallery_detail .contact_area .tel_area, #container #contents .gallery_detail .contact_area .ct_flex {
    padding-left: var(--m40);
    padding-right: var(--m40);
  }
  #container #contents .gallery_detail .contact_area .button a .txt {
    font-size: var(--fs16_24);
  }
  #container #contents .gallery_detail .back {
    max-width: 300px;
    margin: 0 auto;
  }
  #container #contents .gallery_detail .back a {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--m16) var(--m40);
    position: relative;
    transition: all 0.5s;
    font-size: var(--fs16_20);
    background-color: var(--blue01);
    border: 1px solid var(--blue01);
    color: #fff;
  }
  #container #contents .gallery_detail .back a:hover {
    background-color: #fff;
    color: var(--blue01);
  }
}
/* ----------------------------------------------
　SP調整
------------------------------------------------*/
@media all and (max-width: 520px) {
  #container #contents .works_list .box {
    width: 100%;
  }
  #container #contents .works_list .past .box {
    width: 49%;
  }
  #container #contents .gallery_detail .detail_area .double_box .img_box p:has(img) {
    width: 100%;
  }
  #container #contents .gallery_detail .detail_area .harf_box .text_area, #container #contents .gallery_detail .detail_area .harf_box p:has(img) {
    width: 100%;
  }
  #container #contents .gallery_detail .sns_area .flex_area .banner {
    width: 100%;
  }
}