@charset "UTF-8";

/* page setting ------------------------------------------  */

header.floating-menu{
  border-bottom: 1px solid #eee;
  bottom: inherit;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
}

#archive_section .inner,
#post_section:not(.works_post) .inner,
#page_section .inner{
  border-top: 1px solid #eee;
  padding-top: 1.5rem;
}

.title{
  padding: 6rem 0 0;
  text-align: center;
}

/*@media screen and (max-width: 980px) {
  .title{
    padding: 6rem 0 0;
  }
}*/

@media screen and (max-width: 768px) {
  .title{
    padding: 5rem 0 0;
  }
}

.title .en{
  display: block;
  font-size: 3rem;
  font-weight: 500;
  line-height: 1;
  text-transform: uppercase;
}

@media screen and (max-width: 980px) {
  .title .en{
    font-size: 7vw;
  }
}


@media screen and (max-width: 768px) {
  .title .en{
    font-size: 8.5vw;
  }
}

.title .ja{
  background: var(--point-color);
  color: var(--white-color);
  display: inline-block;
  font-size: .85rem;
  font-weight: 400;
  padding: .5rem 1rem;
  line-height: 1;
}

@media screen and (max-width: 980px) {
  .title .ja{
    font-size: .75rem;
  }
}


@media screen and (max-width: 768px) {
  .title .ja{
    font-size: .65rem;
    padding: .25rem .75rem;
  }
}

.text-box{
  position: relative;
  z-index: 10;
}

.text-box p:not(:last-child){
  margin-bottom: 1rem;
}

.text-content{
  padding: 3rem 0;
}


.text-content h2,
.text-content h3{
  margin-top: 3rem;
}

.text-content h2{
  background: #eee;
  padding: .35rem 1rem;
  margin-bottom: 2rem;
}
.text-content h3{
  padding-left: 1rem;
  position: relative;
}

.text-content h3::before{
  background: var(--point-color);
  content: '';
  display: block;
  height: 3px;
  left: 0;
  position: absolute;
  top: 1.15rem;
  width: .5rem;
}

.text-content p{
  margin-bottom: 1.5rem;
}

.text-content ul{
  margin-left: 1rem;
}

.text-content ul li{
  margin-bottom: .5rem;
  padding-left: 1rem;
  position: relative;
}

.text-content ul li::before{
  background: var(--point-color);
  border-radius: 1rem;
  content: '';
  display: block;
  height: 4px;
  left: 0;
  position: absolute;
  top: .65rem;
  width: 4px;
}

.banner_tel{
  margin: 2rem auto;
  max-width: 450px;
  width: 100%;
}

.banner_tel a{
  filter: brightness(0) saturate(100%) invert(13%) sepia(80%) saturate(13%) hue-rotate(337deg) brightness(87%) contrast(102%);
  background-repeat: no-repeat;
  background-size: 80px auto;
  padding: 2rem 2rem 2rem 6.5rem;
}

@media screen and (max-width: 1380px) {
  .banner_tel a{
    background-size: 70px auto;
  } 
}

@media screen and (max-width: 1240px) {
  .banner_tel a{
    background-size: 8vw auto;
    padding: 2.5vw 2vw 2.5vw 10vw;
  }
}

@media screen and (max-width: 768px) {
  .banner_tel a{
    background-size: 15vw auto;
    padding: 3vw 2vw 3vw 25vw;
  }
}


/* pankuzu setting ------------------------------------------  */
.pankuzu{
  margin: 0 auto 1rem;
  padding-top: 5rem;
  max-width: 1920px;
  width: 90%;
}

@media screen and (max-width: 980px) {
  .pankuzu{
    padding-top: 7rem; 
  }
}

@media screen and (max-width: 768px) {
  .pankuzu{
    padding-top: 4rem; 
  }
}

.pankuzu ul{
  align-items: center;
  display: flex;
  font-size: .7rem;
  justify-content: flex-end;
  margin: 0;
}
@media screen and (max-width: 768px) {
  .pankuzu ul{
    font-size: .6rem;
  }
}

.pankuzu ul li::after{
  border-bottom: 1px solid var(--black-color);
  border-right: 1px solid var(--black-color);
  content:'';
  display: inline-block;
  height: 7px;
  margin: 0 .75rem;
  transform: rotate(-45deg);
  width: 7px;
}

.pankuzu ul li:last-child::after{
  display: none;
}

.pankuzu ul li a{
  text-decoration: underline;
}

/* anchor link setting ------------------------------------------  */

ul.anchor-link {
  align-items: center;
  display: flex;
  justify-content: center;
  margin: 2rem auto 5rem;
  max-width: 700px;
  width: 100%;
}

@media screen and (max-width: 768px) {
  ul.anchor-link {
    margin: 2rem auto 3rem;
  }
}

ul.anchor-link li{
  padding: 0 1%;
  width: calc( 100% / 3);
}

ul.anchor-link a{
  display: block;
  line-height: 1;
  padding: 1rem 1.5rem;
  position: relative;
  text-align: center;
  width: 100%;
}

@media screen and (max-width: 768px) {
  ul.anchor-link a{
    padding: 1rem .5rem;
  }
}

ul.anchor-link a:hover{
  opacity: 1;
}

ul.anchor-link a span.ja{
  display: block;
  font-size: 80%;
}

@media screen and (max-width: 768px) {
  ul.anchor-link a span.ja{
    font-size: 75%;
  }
}

ul.anchor-link a span.en{
  display: block;
  font-size: 110%;
  font-weight: 500;
  margin-bottom: .5rem;
}

ul.anchor-link a::before,
ul.anchor-link a::after{
  content: '';
  display: block;
  position: absolute;
  left: 50%;
  transform: translatex(-50%);
  transition: .25s ease-in-out;
}

ul.anchor-link a::before{
  border-bottom: 1px solid var(--white-color);
  border-right: 1px solid var(--white-color);
  bottom: -.5rem;
  height: 7px;
  margin: .5rem auto 0;
  transform: translatex(-50%) rotate(45deg);
  width: 7px;
  z-index: 2;
}

@media screen and (max-width: 768px) {
  ul.anchor-link a::before{
    bottom: -.15rem;
	margin: 0 auto 0;
    height: 5px;
    width: 5px;
  }
}

ul.anchor-link a:hover::before{
  bottom: -1rem;
}


@media screen and (max-width: 768px) {
  ul.anchor-link a:hover::before{
    bottom: -.35rem;
  }
}

ul.anchor-link a::after{
  background: var(--black-color);
  border-radius: 1rem;
  bottom: -1rem;
  height: 20px;
  width: 20px;
  z-index: 0;
}

@media screen and (max-width: 768px) {
  ul.anchor-link a::after{
    bottom: -.5rem;
    height: 15px;
    width: 15px;
  }

}

ul.anchor-link a:hover::after{
  background: var(--point-color);
  bottom: -1.5rem;
}

@media screen and (max-width: 768px) {
  ul.anchor-link a:hover::after{
    bottom: -.75rem;
  }
}

/* pagenation setting ------------------------------------------  */

ul.page-numbers{
  align-items: flex-start;
  display: flex;
  justify-content: center;
  margin: 3rem auto 0;
}

ul.page-numbers li{
  margin: 2px;
}
ul.page-numbers a{
  background: var(--black-color);
  color: var(--white-color);
  display: inline-block;
  font-family: "Jost", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: 400;
  line-height: 1;
  padding: 1rem;
  text-align: center;
}

ul.page-numbers a.prev{
  padding: 1rem 1rem 1rem .5rem;
}

ul.page-numbers a.next{
  padding: 1rem .5rem 1rem 1rem;
}


ul.page-numbers span.current,
ul.page-numbers a:hover{
  box-shadow: inset 0 0 0 1px var(--black-color);
  background: transparent;
  color: var(--black-color);
  display: inline-block;
  padding: 1rem;
  line-height: 1;
}

ul.page-numbers a{}

/* font setting ------------------------------------------  */

#page_section h2{
  position: relative;
  margin-bottom: 1rem;
}

.h2-box h2 span.en{
  color: var(--point-color);
  display: inline-block;
  font-size: .85rem;
  font-weight: 500;
  line-height: .5;
  margin: 0 0 .5rem -1rem;
  padding: .5rem 1rem;
  position: relative;
}

.h2-box h2 span.en.white{
  color: var(--point-color02);
}

.h2-box h2 span.en::before{
  background: var(--point-color);
  content: '';
  display: block;
  height: 2px;
  left: 0;
  position: absolute;
  top: 50%;
  transform: translatey(-50%);
  width: .35rem;
}

.h2-box h2 span.en.white:before{
  background: var(--point-color02);
}


.h2-box h2 span.ja{
  display: block;
  font-weight: 600;
  line-height: 1.5;
  position: relative;
}


.h2-box{
  margin-bottom: 3rem;
  position: relative;
  z-index: 5;
}

@media screen and (max-width: 768px) {
  .h2-box{
    margin-bottom: 2rem;
  }
}

/* company setting ------------------------------------------  */

main{
  overflow-x: hidden;
}

#page_section .box_40{
  align-items: center;
  padding-left: 2.5%;
}

@media screen and (max-width: 768px) {
  #page_section .box_40{
    padding-left: 0;
	padding-top: 8%;
  }
}

#page_section .mask{
  background: #f5f5f5;
  height: auto;
  overflow: hidden;
  padding-top: 65%;
  position: relative;
  width: 52%;
}

@media screen and (max-width: 768px) {
  #page_section .mask{
    padding-top: 50%;
	width: 50%;
  }
}

#page_section .mask.img01{
  margin: 40% 0 0 auto;
}

@media screen and (max-width: 768px) {
  #page_section .mask.img01{
    margin: 10% 0 0 auto;
  }
}

#page_section .mask.img02{
  margin: 0 -15% auto auto;
}

@media screen and (max-width: 768px) {
  #page_section .mask.img02{
    margin: 0 -10% auto auto;
  }
}

#page_section .mask.img01_wide{
  margin:0;
  padding-top: 95%;
  width:100%;
}



[class^="parallax-small-image-"] {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  will-change: transform;
  transition: opacity 0.3s ease;
  max-width: 130%;
  width: 130%;
  height: auto;
}


#service{
  color: var(--white-color);
  position: relative;
}

#service::before,
#service::after{
  content: '';
  display: block;
  height: 100%;
  left: -6%;
  right: -6%;
  position: absolute;
  top: 0;
  width: 112%;
}

#service::after{
  background: rgba(0,0,0,.7);
  z-index: 1;
}

#service::before{
  background: url(../img/index/photo3.webp) no-repeat center / cover;
  background-attachment: fixed;
  z-index: 0;
}

#service ul{
  align-items: flex-start;
  display: flex;
  justify-content: space-between;
  margin-bottom: 2rem;
}

#service ul li{
  position: relative;
  width: 30%;
}

@media screen and (max-width: 768px) {
  #service ul li{
    width: 100%;
  }
  #service ul li:not(:first-child){
	margin-top: 1.5rem;
  }
}

#service ul li::before{
  background-repeat: no-repeat;
  background-size: 80% auto;
  background-position: center;
  content: '';
  display: block;
  margin: 0 auto;
  opacity: .6;
  height: 100px;
  width: 100px;
}

@media screen and (max-width: 768px) {
  #service ul li::before{
   height: 80px;
    width: 80px;
  }
}

#service ul li.icon_building::before{
  background-image: url(../img/common/icon_building.png);
}

#service ul li.icon_note::before{
  background-image: url(../img/common/icon_note.png);
}

#service ul li.icon_home::before{
  background-image: url(../img/common/icon_home.png);
}


#service ul li h3{
  font-size: 1.25rem;
  margin-bottom: 1rem;
  text-align: center;
}

@media screen and (max-width: 768px) {
  #service ul li h3{
    font-size: 1.05rem;
  }

}

#service .button-more2 a::after {
  filter: brightness(0) saturate(100%) invert(99%) sepia(23%) saturate(2%) hue-rotate(74deg) brightness(113%) contrast(100%);
}

.company-info{
  padding: 5rem 0;
}

.company-info .job_data{
  margin: 0 auto 2rem;
  width: 90%;
}
.company-info dl{
  align-items: flex-start;
  border-bottom: 1px solid var(--gray-color02);
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
  padding: 1.5rem 1rem;
  max-width: 980px;
  width: 100%;
}

@media screen and (max-width: 768px) {
  .company-info dl{
    display: block; 
  }
}

.company-info dl dt{
  font-weight: 600;
  padding-left: 1.5rem;
  position: relative;
  width: 30%;
}

@media screen and (max-width: 768px) {
  .company-info dl dt{
	padding-bottom: 1rem;
    width: 100%;
  }
}

.company-info dl dt::before{
  content: '';
  background: var( --point-color);
  border-radius: 5px;
  display: block;
  height: 6px;
  top: .65rem;
  position: absolute;
  left: 0;
  width: 6px;
}

@media screen and (max-width: 768px) {
  .company-info dl dt::before{
    top: .45rem;
  }
}

.company-info dl dd{
  width: 70%;
}

@media screen and (max-width: 768px) {
  .company-info dl dd{
    padding-left: 1.5rem;
    width: 100%;
  }
}

.company-info address{
  font-style: normal;
}

.company-info address:last-child{
  margin-top: 1rem;
}

.company-info p:not(:last-child){
  margin-bottom: 1rem;
}
dd .tag_small{
  background: var(--bg-gray-color);
  color: var(--white-color);
  display: inline-block;
  font-size: 80%;
  margin-bottom: .25rem;
  line-height: 1;
  padding: .25rem 1rem;
}


/* contact setting ------------------------------------------  */

.form-content{
  margin-left: auto;
  margin-right: auto;
  max-width: 980px;
}

.form-content dl{
  align-items: flex-start;
  border-bottom: 1px solid var(--gray-color02);
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
  padding: 1.5rem 1rem;
  max-width: 980px;
  width: 100%;
}

@media screen and (max-width: 768px) {
  .form-content dl{
	border:0;
	padding: 0;
    display: block; 
  }
}

.form-content dl dt{
  font-weight: 600;
  padding-left: 0;
  position: relative;
  width: 30%;
}

@media screen and (max-width: 768px) {
  .form-content dl dt{
	background: var(--gray-color);
	padding: .75rem .75rem;
    width: 100%;
  }
}

span.required{
  background: var(--point-color);
  border-radius: 1px;
  color: var(--white-color);
  display: inline-block;
  font-size: 10px;
  line-height: 1;
  right: 1rem;
  padding: .25rem .5rem;
  position: absolute;
  top: .25rem
}

@media screen and (max-width: 768px) {
  span.required{
    top: .75rem
  }
}

.form-content dl dd{
  padding-left: 1rem;
  width: 70%;
}

@media screen and (max-width: 768px) {
  .form-content dl dd{
    padding: 1rem .75rem 2rem;
    width: 100%;
  }
}

.form-content dl p:last-child{
  margin-bottom: 0;
}

span.p-country-name{
  display: none !important;
}

input[type=checkbox],
input[type=radio]{
  display: none;
}

input[type=checkbox]:checked + .wpcf7-list-item-label::after,
input[type=radio]:checked + .wpcf7-list-item-label::after {
  opacity: 1;
}

.wpcf7-list-item{
  display: inline-block;
  padding-left: 1.5rem;
  position: relative;
}

.wpcf7-list-item-label::before,
.wpcf7-list-item-label::after{
  content: '';
  display: block;
  left: 0;
  position: absolute;
  top: .25rem;
}

.wpcf7-list-item-label::before{
  background: var(--white-color);
  border: 1px solid var(--gray-color02);
  border-radius: 1px;
  height: 1rem;
  width: 1rem;
}

.wpcf7-list-item-label::after{
  width: 15px;
  height: 10px;
  border-left: 3px solid var(--point-color);
  border-bottom: 3px solid var(--point-color);
  transform: rotate(-45deg);
  left: .15rem;
  top: .15rem;
  transition: .25s ease-in;
  opacity: 0;
}

textarea,
input[type="email"],
input[type="date"],
input[type="tel"],
input[type="text"]{
  border: 1px solid var(--gray-color02);
  display: block;
  padding: .45rem;
  width: 100%;
}

input[type="text"].p-postal-code{
  display: inline-block;
  width: 95px;
}

textarea.wpcf7-form-control.wpcf7-textarea.p-region {
  margin-top: .5rem;
  height: 70px;	
}

.button-form p{
  background: transparent;
  box-shadow: inset 0 0 0 1px #000;
  color: var(--white-color);
  cursor: pointer;
  display: block;
  margin: 3rem auto 0;
  overflow: hidden;
  position: relative;
  transition: .35s ease-in;
  max-width: 250px;
  width: 100%;
}

.button-form input{
  background: transparent;
  border: 0;
  color: var(--white-color);
  display: block;
  line-height: 1;
  padding: 1rem 1.5rem;
  transition: .35s ease-in;
  max-width: 250px;
  width: 100%;
}

.button-form input:hover{
  color: var(--black-color);
}


.button-form p::before {
  background: var(--black-color);
  content: '';
  display: block;
  height: 100%;
  left: -0%;
  position: absolute;
  top: 0;
  transition: .25s ease-in-out;
  z-index: -1;
  width: 100%;
}

.button-form p:hover::before{
  left: -100%;
}

.button-form p::after {
  background: url('../img/common/arrow.svg') no-repeat center / contain;
  content: '';
  display: inline-block;
  filter: brightness(0) saturate(100%) invert(99%) sepia(23%) saturate(2%) hue-rotate(74deg) brightness(113%) contrast(100%);
  height: 1.5rem;
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  transition: .35s ease-in;
  vertical-align: middle;
  width: 2.5rem;
}

.button-form p:hover::after{
  filter: none;
}

.button-form .wpcf7-spinner{
  display: none;
}

/* recruit setting ------------------------------------------  */

#page_section #job-list .mask.img01{
  margin-top: 10%;
}
section#job-list,
section#voice{
  padding-bottom: 0;
}

.job-list-content{
  background: var(--gray-color);
  margin: 3rem auto 0;
  padding: 1.5rem;
}

@media screen and (max-width: 768px) {
  .job-list-content{
    margin: 1.5rem auto 0;
    padding: .5rem 1rem;
  }

}

.job-list-content article{
  padding: .5rem 2.5rem;
  margin: 0 auto;
  overflow: hidden;
}

@media screen and (max-width: 768px) {
  .job-list-content article{
    padding: .5rem 1.5rem;
  }
}

.job-list-content article h3{
  margin: 0;
  padding: 0;
  position: relative;
}

.job-list-content article.active h3{
  margin-bottom: 1rem;
}

.job-list-content article h3::before{
  background: var(--point-color);
  content: '';
  display: block;
  height: 2px;
  position: absolute;
  left: -1.75rem;
  top: 50%;
  transform: translatey(-50%);
  width: 1rem;
}

@media screen and (max-width: 768px) {
  .job-list-content article h3::before{
    left: -1.5rem;
    width: .85rem;
  }
}

.job-list-content article.active h3::before{
  transform:translatey(-50%) rotate(-45deg)
}

.job-list-content article h3::after{
  background: var(--point-color);
  content: '';
  display: block;
  height: 1rem;
  position: absolute;
  left: -1.35rem;
  top: 50%;
  transform: translatey(-50%);
  width: 2px;
}

@media screen and (max-width: 768px) {
  .job-list-content article h3::after{
    height: .85rem;
    left: -1.15rem;
  }
}


.job-list-content article.active h3::after{
  transform:translatey(-50%) rotate(-45deg)
}

.job-list-content article .content {
  padding: 0;
  height: 0;
  opacity: 0;
  transition: .25s ease-in-out;
}

.job-list-content article.active .content {
  background: var(--white-color);
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  height: auto;
  opacity: 1;
}

.job-list-content article .content > p{
  margin: 0 auto;
  width:90%;
}

.job-list-content article.active .content > p{
  margin: 0 auto 1rem;
}

.job-list-content article.active .content > p:first-child{
  padding-top: 2rem;
}

.job-list-content article h4{
  cursor: pointer;
  margin-top: 4rem;
  text-align: center;
}

@media screen and (max-width: 768px) {
  .job-list-content article h4{
    margin-top: 2rem;
  }
}

.job-list-content article h4 span{
  display: inline-block;
}

.job-list-content article h4 span::before,
.job-list-content article h4 span::after{
  background: var(--point-color);
  height: 2px;
  width: 1rem;
  content: '';
  display: inline-block;
  margin: -.5rem .57rem 0;
  vertical-align: middle;
}

#message .flex-box,
#voice .flex-box{
  flex-direction: row-reverse;
}

#message .flex-box .box_40{
  left: -5.5%;
  top: -5%;
  padding: 0;
  position: relative;
}

#page_section .flex-box .box_50.img{
  left: -5.5%;
  top: -5%;
  padding: 0;
  position: relative;
}


@media screen and (max-width: 980px) {
  #page_section .flex-box .box_50.img{
    top: 0;
	left: 0;
	margin-top: 2rem;
  }
}

@media screen and (max-width: 768px) {
  #message .flex-box .box_40{
    top: 0;
	margin-top: 2rem;
  }
}

section#entry{
  padding-bottom: 0;
}

/* works setting ------------------------------------------  */

#works_archive .flex-box {
  flex-wrap: wrap;
  margin-top: 5rem;
}

@media screen and (max-width: 980px) {
  #works_archive .flex-box {
    justify-content: flex-start;
  }
}
#works_archive .flex-box .box_33{
  padding: .5rem;
}

@media screen and (max-width: 768px) {
  #works_archive .flex-box .box_33{
    padding: .25rem;
    width: 50%;
  }
}

#works_archive .flex-box a{
  color: var(--white-color);
  display: block;
  overflow: hidden;
  position: relative;
  height: 100%;
  width: 100%;
}

#works_archive .flex-box a:hover{
  opacity: 1;
}

#works_archive .flex-box a::before {
  content: '';
  display: block;
  background: transparent;
  padding-top: 63%;
  width: 100%;
}
#works_archive .flex-box a:hover::before{
  background: var(--black-color);
}


#works_archive .flex-box a img {
  display: block;
  line-height: 1;
  height: auto;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%,-50%);
  transition: .2s ease-in;
  max-width: 100%;
  width: 100%;
}

#works_archive .flex-box a:hover img {
  filter: grayscale(0.8) blur(2px);
  opacity: .25;
  max-width: 115%;
  width: 115%;
}

#works_archive .flex-box .post_title{
  opacity: 0;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%,-50%);
  transition: .5s ease-in;
  width: 90%;
}

#works_archive .flex-box a:hover .post_title{
  opacity: 1;
}

#works_archive .flex-box .post_title strong {
  display: block;
  font-size: 1.3rem;
  font-weight: 500;
  letter-spacing:2px;
  line-height: 1.75;
  text-align: center;
  width: 100%;
}

@media screen and (max-width: 1024px) {
  #works_archive .flex-box .post_title strong{
    font-size: 1.15rem;
  }
}

#works_archive .flex-box .post_title strong::after{
  background: var(--white-color);
  content:'';
  display: block;
  margin: .5rem auto;
  height: 1px;
  width: 5rem;
}

@media screen and (max-width: 768px) {
  #works_archive .flex-box .post_title strong{
    font-size: 1rem;
  }
}


#works_archive .flex-box p.tag {
  align-items: center;
  font-size: 1.15rem ; /*.85rem;*/
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 0;
}

@media screen and (min-width: 769px) and (max-width: 1240px) {
  #works_archive .flex-box p.tag {
    font-size: 1.45vw; /*.85rem;*/
  }
}

@media screen and (max-width: 768px) {
  #works_archive .flex-box p.tag {
    font-size: 2.25vw; /*.65rem;*/
	     letter-spacing: 1px;
  }
}

#works_archive .flex-box p.tag time {
  font-family: "Jost", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: 400;
  margin-right: 1rem;
}

#works_archive .flex-box p.tag span{
  display: inline-block;
}
#works_archive .flex-box p.tag span:not(:last-child)::after{
  content:'/';
  display: inline-block;
  margin:0 .5rem;
}

@media screen and (max-width: 768px) {
  #works_archive .flex-box p.tag span:not(:last-child)::after{
    margin:0 .25rem;
  }
}

#works_archive .flex-box p.area {
  font-size: .8rem;
  text-align: center;
  margin: 0;
}

@media screen and (min-width: 769px) and (max-width: 1240px) {
  #works_archive .flex-box p.area {
    font-size: 1.15vw; /*.85rem;*/
  }
}

@media screen and (max-width: 768px) {
  #works_archive .flex-box p.area {
    font-size: .6rem; /*.65rem;*/
  }
}


#works_archive .flex-box p.area::before{
  background: var(--white-color);
  content:'';
  display: block;
  margin: .5rem auto;
  height: 1px;
  width: 3.5rem;
}


@media screen and (max-width: 768px) {
  #works_archive .flex-box p.area::before{
    margin: .35rem auto;
    width: 2rem;
  }
}



#works_archive .flex-box p.cat{
  position: absolute;
  right: 1.5%;
  top: 2.5%;
  font-size: .75rem;
  line-height: 1;
}

#works_archive .flex-box p.cat span{
  background: var(--black-color);
  color: var(--white-color);
  display: inline-block;
  font-size: .75rem;
  margin-right: .25rem;
  padding: .5rem;
}

#works_archive .flex-box p.cat span:last-child{
  margin: 0;
}

@media screen and (max-width: 1024px) {
  #works_archive .flex-box p.cat span{
    font-size: .6rem;
    padding: .25rem .5rem;
  }
}

.works_post .main_box{
  align-items: stretch;
  margin: 5rem auto;
}

@media screen and (max-width: 768px) {
  .works_post .main_box{
    margin: 0 auto 3rem;
  }

}

.works_post .box_outline{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 3rem 0;
  width: 45%;
}

@media screen and (max-width: 1240px) {
  .works_post .box_outline{
    width: 40%;
  }
}

@media screen and (max-width: 768px) {
  .works_post .box_outline{
	padding: 0;
	order: 2;
    width: 100%;
  }
}

.works_post .box_outline .page_title{
  margin-bottom: 2rem;
}
@media screen and (max-width: 768px) {
  .works_post .box_outline .page_title{
    margin-bottom: 1rem;
  }
}
.works_post .box_outline .page_title h2{
  margin-bottom: .25rem;
}

.works_post .box_outline .page_title h2 span{ 
  display: inline-block;
}

.works_post .box_outline .page_title h2 span:not(:last-child)::after{
  content:'/';
  display: inline-block;
  margin:0 .5rem;
}

.works_post .box_outline .page_title p{
  font-size: 1.1rem;
  font-weight: 600;
}

@media screen and (max-width: 768px) {
  .works_post .box_outline .page_title p{
    font-size: .95rem;
  }
}

.works_post .box_outline h3{
  color: var(--point-color);
  font-size: 1rem;
  margin-top: 2rem;
  margin-bottom: .75rem;
}

@media screen and (max-width: 768px) {
  .works_post .box_outline h3{
    font-size: .85rem;
  }
}

.works_post .box_outline ul li{
  line-height: 1;
  margin-bottom: .5rem;
}

.works_post .box_outline ul li span{
  background: var(--main-color);
  color:var(--white-color);
  font-size: .65rem;
  display: inline-block;
  margin-right: 1rem;
  padding: .25rem;
  text-align: center;
  width: 4.25rem;
  vertical-align: top;
}

@media screen and (max-width: 768px) {
  .works_post .box_outline ul li span{
    font-size: .6rem;
    margin-right: .75rem;
    width: 4rem;
  }

}

.works_post .box_image{
  right: -6%;
  overflow: hidden;
  min-height: 25rem;
  position: relative;
  width: 60%;
}

@media screen and (max-width: 1240px) {
  .works_post .box_image{
	right: -5.5%;
    width: 60%;
  }
}

@media screen and (max-width: 768px) {
  .works_post .box_image{
	margin: 0 -5.5% 2rem;
	order: 1;
    right: inherit;
    width: 112%;
  }
}

@media screen and (min-width: 769px) {
  .works_post .box_image img{
    height: 100%;
    min-height: 100%;
    object-fit: cover;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate( -50%, -50%);
  }
}

.works_post .sub_image{
  column-count: 3;
  column-gap: 1.75rem;
}

@media screen and (min-width: 981px) {
  .works_post .sub_image{
	  align-items: flex-start;
	  display: flex;
	  justify-content: flex-start;
	  flex-wrap:wrap;
	  gap: 1.5rem;
  }
}
@media screen and (max-width: 980px) {
  .works_post .sub_image {
    column-count: 2;
    column-gap: 1rem;
  }
}
@media screen and (min-width: 1241px)  {
.works_post .sub_image .thum{
  margin-bottom: 0;
  width: calc( calc( 100% - 3rem) / 3);
}
}
@media screen and (min-width: 981px) and (max-width: 1240px)  {
  .works_post .sub_image .thum{
    width: calc( calc( 100% - 3rem) / 2);
  }
}
@media screen and (max-width: 980px) {
  .works_post .sub_image .thum{
    break-inside: avoid;
  }
}
.works_post .sub_image .thum img{
  width: 100%;
  height: auto;
  display: block;
}

@media screen and (max-width: 980px) {
  .works_post .sub_image .thum{
    margin-bottom: 1rem;
  }
}

.related_post{
  margin: 6rem auto 0;
}

.related_post .flex-box .box{
  background: var(--gray-color);
  margin: 0 1.333% .5rem 0;
  width: 32%;
}

.related_post .flex-box .box:last-child{
    margin: 0 0 .5rem;
}

@media screen and (max-width: 980px) {
  .related_post .flex-box .box{
    margin: 0 0 1rem 0;
    width: 47%;
  }
  .related_post .flex-box .box:nth-child(odd){
    margin: 0 3% 1.25rem 0;
  }
}

.related_post .flex-box .box a{
  color: var(--white-color);
  display:block;
  overflow: hidden;
  position: relative;
  height: 100%;
  width: 100%;
}

.related_post .flex-box .box a::before{
  content:'';
  display: block;
  background: transparent;
  padding-top: 63%;
  width: 100%;
}
.related_post .flex-box .box a:hover{
  opacity: 1;
}

.related_post .flex-box .box a:hover::before{
  background: var(--black-color);
}

.related_post .flex-box .box a img{
  display: block;
  line-height: 1;
  height: auto;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%,-50%);
  transition: .2s ease-in;
  max-width: 100%;
  width: 100%;
}
.related_post .flex-box .box a:hover img{
  filter: grayscale(0.8) blur(2px);
  opacity: .25;
  max-width: 115%;
  width: 115%;
}

.related_post .flex-box .box .post_title{
  opacity:0;
  padding: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  transition: .5s ease-in;
  width: 90%;
}

.related_post .flex-box .box a:hover .post_title{
  opacity:1;
}
/*
.related_post .flex-box .box .title strong{
  display: block;
  font-size: 1.25rem;
  font-weight: 600;
  text-align: center;
  width: 100%;
}

@media screen and (max-width: 1240px) {
  .related_post .flex-box .box .title strong{
    font-size: 1.15rem;
  }
}*/

.related_post .flex-box .box .post_title .tag{
  font-size: 1.15rem; /*.85rem;
  margin-top: .25rem;*/
  margin: 0;
  display: flex;
  justify-content: center;
}

@media screen and (max-width: 768px) {
  .related_post .flex-box .box .post_title .tag{
    font-size: 1rem;
  }
}

.related_post .flex-box .box .post_title .tag span {
  display: inline-block;
}

.related_post .flex-box .box .post_title .tag span:not(:last-child)::after{
  content:'/';
  display: inline-block;
  margin:0 .5rem;
}

.related_post .flex-box .box .post_title p.area {
  font-size: .8rem;
  text-align: center;
  margin: 0;
}
.related_post .flex-box .box .post_title p.area::before {
  background: var(--white-color);
  content: '';
  display: block;
  margin: .5rem auto;
  height: 1px;
  width: 3.5rem;
}

/*
.related_post .flex-box .box .title time{
  font-family: "Jost", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: 400;
  margin-right: 1rem;
}
.related_post .flex-box .box figcaption p.cat{
  background: var(--black-color);
  color: var(--white-color);
  display: inline-block;
  font-size: .85rem;
  line-height: 1;
  padding: .5rem;
  position: absolute;
  right: 1.5%;
  top: 2.5%;
}

@media screen and (max-width: 1240px) {
  .related_post .flex-box .box figcaption p.cat{
    font-size: .7rem;
    padding: .25rem .5rem;
  }
}
*/


/* commitment setting ------------------------------------------  */
.bg_commitment{
  position: relative;
}
.bg_commitment::before,
.bg_commitment::after{
  content: '';
  display: block;
  height: 105%;
  position: absolute;
  left: -5.5%;
  right: -5.5%;
  top: -1.5rem;
  width: 111%;

}
.bg_commitment::before{
  background: url('https://tamurakomuten-morioka.jp/img/commitment/bg_commitment.webp') no-repeat center center / cover;
  background-attachment: fixed;
  z-index: -1;
}
.bg_commitment::after{
  background: rgba(0,0,0,.6);
  z-index: 0;
}

#commitment{
  color: var(--white-color);
  position: relative;
  z-index: 1;
}

#commitment .h2-box p strong{
  font-size: 120%;
}
#commitment p:not(:last-child){
  margin-bottom: 1rem;
}

#message {
  padding: 0;	
}


/* about setting ------------------------------------------  */
.about-image{
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 2px;
  margin-bottom: 3rem;
  margin-left: -7.5%;
  margin-right: -7.5%;
  width: 115%;
}
@media (max-width: 768px) {
  .about-image{
    grid-template-columns: repeat(3, 1fr);
  }
}
.about-image .img {
  aspect-ratio: 1 / 1; /* 正方形にする */
  overflow: hidden;
  position: relative;
}
.about-image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}