@charset "utf-8";
/* ==========================================================================
	MAIN
	========================================================================== */
#slider {
  width: 100%;
  height: 100vh;
  min-height: 800px;
  max-height: 910px;
  box-sizing: border-box;
}
/* ==========================================================================
	CONTENTS
	========================================================================== */
/*TOP*/
.top-tit01 {
  color: var(--color02);
  font-family: var(--font02);
  font-size: clamp(4rem, 9.16vw, 11rem);
  line-height: 1;
  letter-spacing: 0;
}
.top-tit02 {
  color: var(--color01);
  font-size: clamp(1.8rem, 2.5vw, 3rem);
}
.top-tit03 {
  font-family: var(--font02);
  font-size: clamp(1.8rem, 2.5vw, 3rem);
  margin-bottom: 30px;
}
/*concept*/
#concept {
  padding: 80px 0;
}
#concept .box {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
#concept .box01 {
  position: relative;
  width: 45%;
}
#concept .box .pop {
  position: absolute;
  width: 250px;
  left: -100px;
  bottom: -80px;
}
#concept .box02 {
  width: 55%;
}
#concept .box02 .inner {
  position: relative;
  padding-top: 91%;
}
#concept .box02 .inner .img01 {
  position: absolute;
  width: 57%;
  top: 0;
  right: 0;
}
#concept .box02 .inner .img02 {
  position: absolute;
  width: 38%;
  left: 0;
  bottom: 0;
}
#concept .box02 .inner .img03 {
  position: absolute;
  width: 24%;
  top: 26%;
  left: 14%;
}
/*guide*/
#guide {
  overflow: visible;
}
#guide .box {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
#guide .box01 {
  width: 57%;
}
#guide .box01 .inner {
  padding-top: 555px;
  position: relative;
  overflow: hidden;
}
#guide .box01 .inner img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  top: 0;
  left: 0;
}
#guide .box02 {
  position: relative;
  width: 39%;
  display: flex;
  align-items: center;
}
#guide .box02 h2 {
  position: absolute;
  top: -5%;
  left: -13%;
  z-index: 10;
}
#guide .box02 .inner {
  max-width: 390px;
  text-align: left;
}
/*menu*/
#menu {
  position: relative;
  padding: 80px 0;
}
#menu::after {
  display: block;
  position: absolute;
  content: "";
  background-color: var(--color02);
  width: calc(50% + 430px);
  padding-top: 500px;
  top: 50%;
  right: 0;
  transform: translate(0, -50%);
  z-index: -1;
}
#menu .wrapper {
  position: relative;
}
#menu .wrapper .pop {
  position: absolute;
  width: 156px;
  left: -50px;
  bottom: -50px;
}
#menu .wrapper::after {
  display: block;
  position: absolute;
  content: "";
  width: 120px;
  height: 520px;
  background: url("../images/index-images/menu-title.png") 0 0 no-repeat;
  background-size: 100% auto;
  top: 0;
  left: 0;
}
#menu .box {
  margin-left: 18%;
}
#menu .menu-list {
  display: flex;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}
#menu .menu-list li {
  width: 32%;
  margin-right: 2%;
  margin-bottom: 10px;
}
#menu .menu-list li:nth-child(3n) {
  margin-right: 0;
}
#menu .menu-list li:nth-child(1) {
  margin-top: 100px;
}
#menu .menu-list li:nth-child(2) {
  margin-top: 50px;
}
#menu .menu-list li:nth-child(4) {
  margin-top: 100px;
}
#menu .menu-list li:nth-child(5) {
  margin-top: 50px;
}
#menu .menu-list li div {
  padding-top: 100%;
  position: relative;
  overflow: hidden;
  margin-bottom: 6px;
}
#menu .menu-list li div img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  top: 0;
  left: 0;
  transition: 0.5s;
}
#menu .menu-list li div img:hover {
  transform: scale(1.05, 1.05);
}
#menu .menu-list li .txt01 {
  position: relative;
  color: var(--color01);
  font-family: var(--font02);
  font-size: clamp(1.8rem, 2.5vw, 3rem);
  font-weight: bold;
  display: block;
  line-height: 1;
  margin-bottom: 8px;
}
#menu .menu-list li .txt02::after {
  content: "";
  display: inline-block;
  width: 21px;
  height: 7px;
  background: url("../images/cmn-images/icon01.png") 0 0 no-repeat;
  background-size: 100% auto;
  top: 50%;
  transform: translate(0, -50%);
  margin-left: 10px;
}
/*service*/
#service .box {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  text-align: left;
}
#service .box01 {
  width: 49.5%;
}
#service .box02 {
  width: 49.5%;
}
#service .box-img {
  position: relative;
  display: block;
  width: 100%;
  margin-bottom: 10px;
}
#service .box01 .box-img h3, #service .box02 .box-img h3 {
  position: absolute;
  width: 100%;
  max-width: 590px;
  bottom: 15px;
  color: #fff;
  font-family: var(--font02);
  font-size: clamp(2.4rem, 5vw, 6rem);
  line-height: 1;
  margin-bottom: 0;
}
#service .box01 .box-img h3 {
  right: 0;
}
#service .box02 .box-img h3 {
  left: 0;
}
#service .inner {
  position: relative;
  box-sizing: border-box;
  max-width: 590px;
}
#service .box01 .inner {
  float: right;
}
#service .inner h4 {
  font-size: clamp(1.6rem, 2.0vw, 2.5rem);
}
/*gallery*/
#gallery {
  overflow: visible;
  padding: 80px 0;
}
#gallery .box {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  text-align: left;
  position: relative;
}
#gallery .box h2 {
  position: absolute;
  top: -0.5em;
  right: 0;
  z-index: 10;
}
#gallery .box01 {
  width: 61%;
}
#gallery .box02 {
  position: relative;
  width: 32%;
  display: flex;
  align-items: center;
}
#gallery .box02 .pop {
  position: absolute;
  width: 198px;
  right: -50px;
  bottom: -50px;
}
.gallery-list {
  display: flex;
  flex-wrap: wrap;
}
.gallery-list li {
  width: 33.333%;
}
/*info*/
#info {
  position: relative;
  padding-top: 80px;
  padding-bottom: 80px;
  margin-bottom: 0;
}
#info::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background-color: var(--color02);
  top: 140px;
  left: 0;
  z-index: 1;
}
#info h2 {
  color: var(--color01);
}
#info .wrapper {
  position: relative;
  z-index: 10;
}
#info .box {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  text-align: left;
}
#info .box01 {
  width: 47.5%;
}
#info .box02 {
  width: 47.5%;
}
.newsContent {
  margin-bottom: 4%;
  background-color: #fff;
  padding: 5%;
}
.newsContent dl {
  width: 100%;
  border-bottom: 2px solid #d7d7d7;
  overflow: hidden;
}
.newsContent dl:last-child {
  border-bottom: none;
}
.newsContent dl dt, .newsContent dl dd {
  padding: 20px 0;
  display: block;
  text-align: left;
}
.newsContent dl dt {
  width: 30%;
  clear: left;
  float: left;
  padding-left: 1em;
}
.newsContent dl dd {
  width: 70%;
  float: left;
  position: relative;
}
/* ==========================================================================
	PC 1025px -
	========================================================================== */
@media screen and (min-width: 1025px) {}
@media screen and (max-width: 1200px) { /*1200以下*/
}
/* ==========================================================================
	TABLET - 1024px
	========================================================================== */
@media screen and (max-width:1024px) {}
/* ==========================================================================
	SP - 640px
	========================================================================== */
@media screen and (max-width: 640px) {
  /*TOP*/
  #slider {
    width: 100%;
    height: 100vh;
    min-height: 300px;
    max-height: 400px;
  }
  /*concept*/
  #concept {
    padding: 40px 0;
  }
  #concept .box {
    display: block;
  }
  #concept .box01 {
    width: 100%;
    margin-bottom: 30px;
  }
  #concept .box .pop {
    width: 150px;
    left: auto;
    right: 0;
    top: 0;
    bottom: auto;
  }
  #concept .box02 {
    width: 100%;
  }
  /*guide*/
  #guide {
    overflow: hidden;
  }
  #guide .box {
    display: block;
  }
  #guide .box01 {
    box-sizing: border-box;
    width: 100%;
    margin-bottom: 30px;
  }
  #guide .box01 .inner {
    padding-top: 50%;
  }
  #guide .box02 {
    width: 100%;
    display: block;
  }
  #guide .box02 h2 {
    position: relative;
    top: auto;
    left: 5%;
    text-align: left;
  }
  #guide .box02 .inner {
    width: 90%;
    text-align: left;
    margin: 0 auto;
  }
  /*menu*/
  #menu {
    padding: 40px 0;
  }
  #menu::after {
    width: 80%;
    padding-top: 130%;
    top: 50%;
    right: 0;
    transform: translate(0, -50%);
    z-index: -1;
  }
  #menu .wrapper .pop {
    width: 80px;
    left: auto;
    right: 0;
    bottom: -40px;
  }
  #menu .wrapper::after {
    width: 8%;
    height: 100%;
    top: 0;
    left: 0;
  }
  #menu .box {
    margin-left: 12%;
  }
  #menu .menu-list {
    display: flex;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
  }
  #menu .menu-list li {
    width: 47.5%;
    margin-right: 5%;
    margin-bottom: 10px;
  }
  #menu .menu-list li:nth-child(3n) {
    margin-right: 5%;
  }
  #menu .menu-list li:nth-child(2n) {
    margin-right: 0;
  }
  #menu .menu-list li:nth-child(1), #menu .menu-list li:nth-child(3), #menu .menu-list li:nth-child(5) {
    margin-top: 50px;
  }
  #menu .menu-list li:nth-child(2), #menu .menu-list li:nth-child(4), #menu .menu-list li:nth-child(6) {
    margin-top: 0;
  }
  /*service*/
  #service .box {
    display: block;
  }
  #service .box01 {
    width: 100%;
    margin-bottom: 30px;
  }
  #service .box02 {
    width: 100%;
  }
  #service .box-img {
    margin-bottom: 20px;
  }
  #service .box01 .box-img h3, #service .box02 .box-img h3 {
    width: 95%;
    left: 5%;
    bottom: 15px;
  }
  #service .box01 .box-img h3 {
    right: auto;
  }
  #service .box02 .box-img h3 {
    left: 5%;
  }
  #service .inner {
    width: 90%;
    margin: 0 auto;
  }
  #service .box01 .inner {
    float: none;
  }
  /*gallery*/
  #gallery {
    padding: 40px 0;
  }
  #gallery .box {
    display: block;
  }
  #gallery .box h2 {
    position: relative;
    top: auto;
    right: auto;
  }
  #gallery .box01 {
    width: 100%;
    margin-bottom: 30px;
  }
  #gallery .box02 {
    width: 100%;
    display: block;
  }
  #gallery .box02 .pop {
    position: absolute;
    width: 99px;
    right: 0;
    bottom: -40px;
  }
  .gallery-list {
    display: flex;
    flex-wrap: wrap;
  }
  .gallery-list li {
    width: 33.333%;
  }
  /*info*/
  #info {
    padding-top: 40px;
    padding-bottom: 40px;
  }
  #info::after {
    top: 60px;
  }
  #info .box {
    display: block;
  }
  #info .box01 {
    width: 100%;
    margin-bottom: 30px;
  }
  #info .box02 {
    width: 100%;
  }
  .newsContent {
    margin-bottom: 15px;
    padding: 30px;
  }
  .newsContent dl dt {
    width: 100%;
	padding: 15px 0 5px 0;
  }
  .newsContent dl dd {
    width: 100%;
	padding: 0 0 15px 0;
  }
}