@charset "utf-8";
/*------------------------------------------------------------
	汎用スタイル
------------------------------------------------------------*/
/* 81-PSP */
/* clearfix */
.clearfix:after {
  content: "";
  display: block;
  clear: both;
}
/* flex */
.flex,
.flexA,
.flexB,
.flexC {
  display: flex;
  flex-wrap: wrap;
}
.flexA {
  justify-content: space-around;
}
.flexB {
  justify-content: space-between;
}
.flexC {
  justify-content: center;
}
/*------------------------------------------------------------
	pageTitle
------------------------------------------------------------*/
.pageTitle {
  margin-bottom: 8rem;
  height: 58rem;
  position: relative;
}
.pageTitle > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pageTitle h2 {
  padding: 4rem 4rem 4rem 1rem;
  width: 56.6rem;
  min-height: 18.4rem;
  position: absolute;
  left: 0;
  bottom: 9.6rem;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 6rem;
  font-weight: 500;
  border-radius: 0 10rem 10rem 0;
  background: rgba(255, 255, 255, 0.65);
}
.pageTitle h2 .num {
  margin: 1rem 1.5rem 0 0;
  padding-top: 0.2rem;
  width: 6.4rem;
  height: 6.4rem;
  flex: none;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  text-indent: -9999px;
  font-size: 2.579rem;
  border-radius: 50%;
  background: linear-gradient(
    45deg,
    rgba(165, 206, 172, 1) 0%,
    rgba(169, 206, 173, 1) 0%,
    rgba(92, 168, 163, 1) 49.95%,
    rgba(43, 93, 134, 1) 100%
  );
}
.pageTitle h2 small {
  font-size: 4rem;
}
@media all and (max-width: 896px) {
  .pageTitle {
    margin-bottom: 3rem !important;
    height: 30rem;
  }
  .pageTitle h2 {
    padding: 2rem;
    width: auto;
    min-height: 9rem;
    bottom: 2rem;
    justify-content: flex-start;
    font-size: 3rem;
  }
  .pageTitle h2 .num {
    margin: 0 0.5rem 0 0 !important;
    width: 4rem;
    height: 4rem;
    font-size: 1.8rem;
  }
  .pageTitle h2 small {
    font-size: 2rem;
  }
}
/*------------------------------------------------------------
	content
------------------------------------------------------------*/
.content {
  margin: 0 auto;
  padding: 0 2rem;
  position: relative;
  max-width: 134rem;
  z-index: 1;
}
@media all and (max-width: 896px) {
  .content {
    max-width: inherit !important;
  }
}
/*------------------------------------------------------------
	headLine01
------------------------------------------------------------*/
.headLine01 {
  margin-bottom: 7rem;
  padding-left: 9.2rem;
  position: relative;
  font-size: 6rem;
  font-weight: 500;
  font-family: "M PLUS Rounded 1c", serif;
}
.headLine01::before {
  width: 6.4rem;
  height: 6.4rem;
  position: absolute;
  left: 0;
  top: 1.7rem;
  border-radius: 50%;
  background: linear-gradient(
    45deg,
    rgba(165, 206, 172, 1) 0%,
    rgba(169, 206, 173, 1) 0%,
    rgba(92, 168, 163, 1) 49.95%,
    rgba(43, 93, 134, 1) 100%
  );
  content: "";
}
.headLine01 small {
  font-size: 4rem;
  margin-bottom: -1.5rem;
}
@media all and (max-width: 896px) {
  .headLine01 {
    margin: 0 -0 3rem 0 !important;
    padding-left: 4.5rem;
    font-size: 3rem;
  }
  .headLine01::before {
    width: 3.5rem;
    height: 3.5rem;
    top: 0.4rem;
  }
  .headLine01 small {
    font-size: 2rem;
    margin-bottom: -0.8rem;
  }
}
/*------------------------------------------------------------
	headLine02
------------------------------------------------------------*/
.headLine02 {
  margin-bottom: 3rem;
  font-size: 4rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 2.312;
}
@media all and (max-width: 896px) {
  .headLine02 {
    margin-bottom: 1.5rem;
    font-size: 2rem;
    line-height: 1.8;
  }
}
/*------------------------------------------------------------
	headLine03
------------------------------------------------------------*/
.headLine03 {
  margin-bottom: 3rem;
  font-size: 6rem;
  font-weight: 500;
  text-align: center;
}
@media all and (max-width: 896px) {
  .headLine03 {
    font-size: 4rem !important;
  }
}
/*------------------------------------------------------------
	comTabUl
------------------------------------------------------------*/
.comTabUl {
  display: flex;
}
.comTabUl li {
  width: 50%;
}
.comTabUl a {
  padding: 2.2rem 0;
  display: block;
  text-align: center;
  font-size: 3.35rem;
  letter-spacing: 0.05em;
  color: #808080;
  font-weight: 700;
  position: relative;
  border-bottom: 2.2rem solid #cccccc;
}
.comTabUl a:after {
  width: 4.2rem;
  height: 4.4rem;
  background: url(../img/common/arrow.png) no-repeat;
  background-size: 100% auto;
  position: absolute;
  bottom: -5.1rem;
  left: 50%;
  display: none;
  transform: translateX(-50%);
  content: "";
}
.comTabUl .on a:after {
  display: block;
}
.comTabUl .on a {
  color: #009b7d;
  border-color: #009b7d;
}

@media all and (min-width: 897px) {
	  .comTabUl a:hover {
	    opacity: 1;
	    background-color: rgba(128, 128, 128, 0.1);
	    border-radius: 10px 10px 0 0;
	  }
	  .comTabUl .on a:hover {
	    opacity: 1;
	    background-color:  transparent;
	  }
	  }

@media all and (max-width: 896px) {
  .comTabUl a {
    font-size: 2rem;
    border-width: 1rem;
    padding: 1.5rem 0;
  }
  .comTabUl a::after {
    height: 2.5rem;
    width: 2.2rem;
    bottom: -3rem;
  }
}
/*------------------------------------------------------------
	comIco
------------------------------------------------------------*/
.comIco {
  margin-left: 1rem;
  display: block;
  width: 6.5rem;
  height: 6.5rem;
  position: relative;
  border-radius: 50%;
  border: 1px solid #009d7b;
  background: #009d7b;
  overflow: hidden;
}
.comIco::before {
  width: 2.8rem;
  aspect-ratio: 39 / 36;
  position: absolute;
  left: 50%;
  top: 50%;
  background: #fff;
  mask: url(../img/common/icon02.png) no-repeat left center / 2.8rem;
  -webkit-mask: url(../img/common/icon02.png) no-repeat left center / 2.8rem;
  transform: translate(-50%, -50%);
  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
  z-index: 1;
  content: "";
}
.comIco::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  border-radius: 100%;
  height: 100%;
  transform: scale(0);
  transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
  background: #fff;
  content: "";
}
@media all and (min-width: 897px) {
  a:hover .comIco::before {
    background: #009d7b;
  }
  a:hover .comIco::after {
    transform: scale(1);
  }
}
@media all and (max-width: 896px) {
  .comIco {
    width: 3.5rem;
    height: 3.5rem;
  }
  .comIco::before {
    width: 1.5rem;
    mask-size: 1.5rem;
    -webkit-mask-size: 1.5rem;
  }
}
/*------------------------------------------------------------
	comLink
------------------------------------------------------------*/
.comLink {
  width: 32.3rem;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.comLink a {
  min-height: 7.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5rem;
  font-size: 2.5rem;
  font-weight: 700;
  position: relative;
  color: #459a7c;
  padding-right: 2rem;
  background-color: #fff;
  letter-spacing: 0.05em;
  border: 2px solid #459a7c;
}
.comLink a:hover {
  opacity: 1;
}
.comLink .comIco {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 4.7rem;
  height: 4.7rem;
  right: 2rem;
  z-index: 1;
}
.comLink .comIco::before {
  mask-size: 2rem auto;
  -webkit-mask-size: 2rem auto;
  mask-position: center;
  -webkit-mask-position: center;
}
@media all and (max-width: 896px) {
  .comLink {
    width: auto;
    max-width: 32rem;
  }
  .comLink a {
    padding-right: 0;
    font-size: 1.6rem !important;
    min-height: 6rem !important;
  }
  .comLink .comIco {
    width: 3.8rem !important;
    height: 3.8rem !important;
    right: 2rem;
    z-index: 1;
  }
  .comLink .comIco::before {
    mask-size: 1.6rem auto !important;
    -webkit-mask-size: 1.6rem auto !important;
    mask-position: center;
    -webkit-mask-position: center;
  }
}
/*------------------------------------------------------------
	comList
------------------------------------------------------------*/
#main .comList {
  padding-top: 2rem;
  margin-left: -0.5rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
#main .comList li {
  width: 48.3%;
}
#main .comList .photo {
  margin-bottom: 4rem;
  position: relative;
}
#main .comList .photo img {
  border-radius: 3rem;
  width: 100%;
}
#main .comList li p {
  font-size: 3rem;
  font-weight: 900;
  margin: 0 0 3.8rem 3.5rem;
}
#main .comList li .listTxt {
  margin-top: -1.5rem;
  font-size: 1.6rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  line-height: 2.3;
  margin-bottom: 4.7rem;
  text-align: justify;
}
#main .comList li .txtBox {
  max-width: 38rem;
}
#main .comList li.comingsoon .photo::before {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: #808080;
  border-radius: 3rem;
  mix-blend-mode: multiply;
  content: "";
}
#main .comList li.comingsoon .photo::after {
  position: absolute;
  left: 50%;
  top: 50%;
  color: #fff;
  font-size: 2.6rem;
  font-weight: bold;
  letter-spacing: 0.05em;
  transform: translate(-50%, -50%);
  font-family: Helvetica, Arial, sans-serif;
  content: "Coming Soon";
}
#main .comList li.comingsoon .comLink a {
  padding-right: 0;
  color: #808080;
  font-size: 2.8rem;
  border-color: #808080;
  font-family: Helvetica, Arial, sans-serif;
  pointer-events: none;
}
@media all and (max-width: 896px) {
  #main .comList {
    display: block;
  }
  #main .comList li {
    width: auto;
    margin-bottom: 4rem;
  }
  #main .comList li:last-child {
    margin-bottom: 0 !important;
  }
  #main .comList .photo {
    margin-bottom: 2rem;
  }
  #main .comList .photo img {
    border-radius: 2rem;
  }
  #main .comList li p {
    margin-left: 0;
    margin-bottom: 2rem;
    font-size: 2.2rem;
  }
  #main .comList li .listTxt {
    line-height: 1.7;
    font-size: 1.4rem;
    margin-bottom: 3rem;
  }
  #main .comList li .txtBox {
    max-width: inherit;
  }
  #main .comList li.comingsoon .photo::before {
    border-radius: 2rem;
  }
  #main .comList li.comingsoon .photo::after {
    font-size: 2.2rem;
  }
}
/*------------------------------------------------------------
	comInfoList
------------------------------------------------------------*/
.comInfoList {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem 0;
  margin: 0 -2.5rem;
}
.comInfoList > li {
  margin: 0 2.5rem;
  width: calc(33.33% - 5rem);
}
.comInfoList a {
  display: block;
}
.comInfoList li .photoBox {
  position: relative;
  transition: transform 1s cubic-bezier(0.23, 1, 0.32, 1);
}
.comInfoList li .num {
  width: 100%;
  position: absolute;
  top: -6rem;
  left: -3rem;
  font-style: italic;
  font-size: 9.7rem;
  line-height: 1;
  font-weight: 500;
  color: #009b7d;
}
.comInfoList li .photo {
  margin-bottom: 1.5rem;
  border-radius: 4rem;
  overflow: hidden;
}
.comInfoList li .photo img {
  transition: transform 1s cubic-bezier(0.23, 1, 0.32, 1);
  width: 100%;
}
.comInfoList li p {
  margin-bottom: 2rem;
  font-size: 2rem;
  line-height: 1.72;
}
.comInfoList li .txtBox {
  padding: 0 0.8rem;
}
.comInfoList .subUl {
  margin-bottom: 1.3rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 0;
}
.comInfoList .subUl li:not(.arrow) {
  width: fit-content;
  font-size: 2.7rem;
  font-weight: 500;
  color: #fff;
  padding: 0 1.1rem;
  margin: 0 1.2rem 0 0;
  background-color: #e35a24;
}
.comInfoList .subUl li.color01 {
	background-color: #e35a24;
}
.comInfoList .subUl li:last-child {
  margin-right: 0;
}
.comInfoList .subUl .arrow {
  margin-right: 1.2rem;
}
.comInfoList .subUl li img {
  width: 1.5rem;
  vertical-align: 0;
}
.comInfoList .subUl li.yellow {
  background-color: #ebaf3c;
}
.comInfoList .subUl li.blue {
  background-color: #4173a1;
}
.comInfoList li .txt {
  font-size: 2.5rem;
  font-weight: 500;
}
.comInfoList li .txt .name {
  display: block;
  font-size: 3.5rem;
}
@media all and (min-width: 897px) {
  .comInfoList a:hover {
    opacity: 1;
  }
  .comInfoList a:hover .photo:hover img {
    transform: scale(1.1);
  }
  .comInfoList li a:hover .photoBox {
    transform: scale(0.95);
  }
}

@media all and (max-width: 896px) {
}

.fadeInUp {
  opacity: 0;
  transform: translate(0, 50px);
  -webkit-transition: all ease-in-out 0.8s;
  transition: all ease-in-out 0.8s;
}

.fadeInUp.on {
  opacity: 1;
  transform: translate(0, 0);
}