@charset "UTF-8";
/* 
  css設定 @charsetが消されるsass仕様へのハック用コメントです。削除しないでください。新規作成時も必須！
 */
/*==================================================================================
 lower common
==================================================================================*/
/*==================================================================================
 design
==================================================================================*/
#design .content {
  display: flex;
  justify-content: space-between;
  padding-right: 12%;
	padding-left: 12%;
  align-items: center;
}
#design .content .header {
  width: 29.75%;
  padding-bottom: 150px;
}
#design .content .header .title {
  font-size: 20px;
  font-weight: normal;
  line-height: 2;
  padding-bottom: 40px;
}
#design .content .header .lead {
  font-size: 14px;
  line-height: 2;
  padding-bottom: 25px;
}
#design .content .header .designer {
  position: relative;
  padding-top: 50px;
  display: flex;
  justify-content: space-between;
  align-items: start;
  z-index: 1;
}
#design .content .header .designer .image {
  width: 50%;
  min-width: 240px;
  margin-left: 10px;
}
#design .content .header .designer .image.img01 {
  min-width: 180px;
}
#design .content .header .designer .texts .text01 {
  font-size: 18px;
  line-height: 1.5;
  padding-bottom: 10px;
}
#design .content .header .designer .texts .text02 {
  font-size: 14px;
  line-height: 2;
  padding-bottom: 10px;
}
#design .content .header .designer .texts .text03 {
  font-size: 11px;
  line-height: 1.8;
}
#design .content .big-image {
  width: 50%;
}
#design .sec01 {
  text-align: center;
	margin-top: 60px;
	margin-bottom: 80px;
}
#design .sec01 .tit {
  font-size: 20px;
  line-height: 1.8;
  margin-bottom: 50px;
}

#design .sec01 .page-image{
	width: 50%;
	margin: 0 auto;
}



/*==================================================================================
 lower-sp
==================================================================================*/
@media (max-width: 768px) {
  /*==================================================================================
   design
  ==================================================================================*/
  #design .content {
    padding-left: 0%;
    flex-wrap: wrap;
  }
  #design .content .header {
    order: 2;
    width: 90%;
    margin: 0 auto;
    padding-bottom: 100px;
  }
  #design .content .header .title {
    font-size: 20px;
    padding-bottom: 30px;
    text-align: left;
  }
  #design .content .header .title br {
    display: inherit;
  }
  #design .content .header .lead {
    padding-bottom: 30px;
  }
  #design .content .header .texts-box {
    padding-top: 30px;
  }
  #design .content .header .texts-box .text01 {
    font-size: 18px;
    line-height: 1.5;
    padding-bottom: 6px;
  }
  #design .content .header .texts-box .text02 {
    font-size: 14px;
    line-height: 2;
    padding-bottom: 10px;
  }
  #design .content .header .designer {
    padding-top: 20px;
  }
  #design .content .header .designer .image {
    width: 46.5%;
    min-width: inherit;
    margin-left: auto;
  }
  #design .content .header .designer .image.img01 {
    min-width: inherit;
  }
  #design .content .header .designer .texts {
    width: 48.5%;
  }
  #design .content .header .designer .texts .text03 {
    font-size: 11px;
    line-height: 2;
  }
  #design .content .big-image {
    width: 100%;
    margin-bottom: 30px;
  }
  #design .sec01 {
    text-align: left;
	  	margin-top: 10px;
  }
  #design .sec01 .wrap {
    width: 90%;
  }
}/*# sourceMappingURL=style.css.map */



.photo {
  position: relative;
}

@media screen and (min-width: 768px) {
  .photo + .caption {
    padding-top: 20px;
  }
}

@media screen and (max-width: 768px) {
  .photo + .caption {
    padding-top: 10px;
  }
}

.photo__capIn, .photo__capOut {
  font-size: 10px;
  line-height: calc(18 / 10);
}

.photo__capIn, .photo__capOut {
  position: absolute;
}

.photo__capIn {
  bottom: 5px;
  right: 5px;
}

.photo__capOut {
  padding: 5px 5px 0 0;
  right: 0;
  top: 100%;
}

.photo__pic {
  display: block;
}

.photo--full .photo__image {
  width: 100%;
}

.photo--fit {
  height: 100%;
}

.photo--fit .photo__pic,
.photo--fit .photo__image {
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}


.headingUnit {
  position: relative;
}

.headingUnit--center {
  text-align: center;
}

.headingUnit h3{
	font-size: 150%;
	line-height: 2;
}

.headingUnit p.txt{
	font-size: 80%;
	line-height: 1.5;
	padding-top: 40px;
}

@media screen and (min-width: 768px) {
  .headingUnit + .pinchInFigure,
  .headingUnit + .modalFigure,
  .headingUnit + .photo {
    margin-top: 64px;
  }
}

@media screen and (max-width: 768px) {
  .headingUnit + .pinchInFigure,
  .headingUnit + .modalFigure,
  .headingUnit + .photo {
    margin-top: 54px;
  }
	.headingUnit{
		padding-left: 15px;
	}
	.headingUnit h3{
	font-size: 120%;
	line-height: 2;
}

.headingUnit p.txt{
	font-size: 80%;
	line-height: 1.5;
	padding-top: 40px;
	text-align: justify;
}
}

@media screen and (min-width: 768px) {
  .pageIntro__cont {
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 60px;
  }
}

@media screen and (min-width: 768px) {
  .pageIntro__cont .headingUnit {
    width: calc(50% - 30px);
  }
}

@media screen and (min-width: 768px) {
  .pageIntro__cont .photo {
    width: calc(50% - 30px);
  }
}

@media screen and (max-width: 768px) {
  .pageIntro__cont .photo {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }
}

@media screen and (min-width: 768px) {
  .pageIntro__head + .pageIntro__cont {
    margin-top: 85px;
  }
}

@media screen and (max-width: 768px) {
  .pageIntro__head + .pageIntro__cont {
    margin-top: 36px;
  }
}

@media screen and (max-width: 768px) {
  .pageIntro__bottom .featureBox {
    margin: 34px -20px 0;
  }
}

@media screen and (min-width: 768px) {
  .pageIntro__bottom .featureBox {
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 60px;
    margin-top: 60px;
  }
}

@media screen and (min-width: 768px) {
  .pageIntro__bottom .featureBox__head {
    width: calc(50% - 30px);
  }
}

@media screen and (min-width: 768px) {
  .pageIntro__bottom .featureBox__cont {
    width: calc(50% - 30px);
  }
}

@media screen and (max-width: 768px) {
  .pageIntro__bottom .featureBox__cont {
    margin-top: 24px;
  }
}

@media screen and (min-width: 768px) {
  .pageIntro__cont + .pageIntro__bottom {
    margin-top: 80px;
  }
}

@media screen and (max-width: 768px) {
  .pageIntro__cont + .pageIntro__bottom {
    margin-top: 60px;
  }
}



.lower section {
  padding: 100px 0;
}
.lower section .inner {
  width: calc(100% - 200px);
  margin: 0 auto;
}
@media only screen and (max-width: 1280px) {
  .lower section .inner {
    width: calc(100% - 120px);
  }
}
@media only screen and (max-width: 767px) {
  .lower section {
    padding: 60px 0;
  }
  .lower section .inner {
    width: calc(100% - 40px);
  }
}

.lower .section_title_wrap {
  position: relative;
  text-align: center;
  padding-bottom: 120px;
}
.lower .section_title_wrap::after {
  content: '';
  position: absolute;
  display: block;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) scaleY(0); 
  transform-origin: top; 
  width: 1px;
  height: 64px;
  background-color: #a99b65;
  animation: arrowlong01 2s ease infinite;
}

@keyframes arrowlong01 {
  0% { transform: translateX(-50%) scaleY(0); opacity: 0; }
  20% { transform: translateX(-50%) scaleY(0); opacity: 1; }
  80% { transform: translateX(-50%) scaleY(1); opacity: 1; }
  100% { transform: translateX(-50%) scaleY(1); opacity: 0; }
}

/* 線を繰り返して表示させるときは下記を削除 */
.lower .section_title_wrap.is-js::after {
  animation: arrowlong02 2s ease forwards;
  animation-delay: 1s; 
}

@keyframes arrowlong02 {
  0% { transform: translateX(-50%) scaleY(0); opacity: 0; }
  20% { transform: translateX(-50%) scaleY(0); opacity: 1; }
  100% { transform: translateX(-50%) scaleY(1); opacity: 1; }
}

.hall_content{
	padding-left: 14%;
	padding-right: 14%;
}


.lower .section_title_en {
  text-transform: uppercase;
  color: #a99b65;
  font-family: 'EB Garamond', serif;
  letter-spacing: 0.195em;
  font-size: 18px;
}
.lower .section_title {
  margin-top: 26px;
  color: #fff;
  line-height: 1.4;
  letter-spacing: 0.27em;
  font-size: 30px;
  font-size: clamp(1.625rem, 1.294rem + 0.645vw, 1.875rem);
}

@media only screen and (max-width:768px) {
  .lower .section_title_wrap {
    padding-bottom: 60px;
  }
  .lower .section_title_wrap::after {
    height: 40px;
  }
  .lower .section_title_en {
    letter-spacing: 0.195em;
    font-size: 18px;
  }
  .lower .section_title {
    margin-top: 26px;
    letter-spacing: 0.27em;
    font-size: 22px;
  }
	
	.hall_content{
	padding-left: 0%;
	padding-right: 0%;
}

}

figure {
  position: relative;
}


/* img-caps
--------------------------------------------------------------------------------*/
.pos-relative {
  position: relative;
}

.img-caps {
  position: absolute;
  bottom: 0;
  right: 0;
  font-size: 10px;
  font-family: "Noto Serif JP", serif;
  line-height: 1;
  padding: 5px 5px 6px 6px;
  color: #fff;
  letter-spacing: -0.02em;
  z-index: 5;
  text-align: right;
}

.img-caps.shadow {
  text-shadow: 
  0px 0px 10px rgba(0, 0, 0, 0.3), 
  0px 0px 10px rgba(0, 0, 0, 0.3), 
  0px 0px 10px rgba(0, 0, 0, 0.3), 
  0px 0px 10px rgba(0, 0, 0, 0.3), 
  0px 0px 10px rgba(0, 0, 0, 0.3), 
  0px 0px 10px rgba(0, 0, 0, 0.3), 
  0px 0px 10px rgba(0, 0, 0, 0.3), 
  0px 0px 10px rgba(0, 0, 0, 0.3), 
  0px 0px 10px rgba(0, 0, 0, 0.3), 
  0px 0px 10px rgba(0, 0, 0, 0.3), 
  0px 0px 10px rgba(0, 0, 0, 0.3);
}

.img-caps.left {
  right: auto;
  left: 0;
}

.img-caps.rb-round-top {
  padding: 5px 15px 6px 6px;
}
@media only screen and (max-width: 767px) {
  .img-caps.rb-round-top {
    padding: 5px 25px 6px 6px;
  }
}

.img-caps.rb-round {
  padding: 5px 15px 6px 6px;
}
@media only screen and (max-width: 767px) {
  .img-caps.rb-round {
    padding: 5px 10px 6px 6px;
  }
}

.img-caps.b20 {
  bottom: 20px;
}

.img-caps.lower-kv {
  bottom: 120px;
}
@media (max-width: 1440px) {
  .img-caps.lower-kv {
    bottom: 100px;
  }
}
@media only screen and (max-width: 1280px) {
  .img-caps.lower-kv {
    bottom: 80px;
  }
}
@media only screen and (max-width: 1024px) {
  .img-caps.lower-kv {
    bottom: 60px;
  }
}
@media only screen and (max-width: 767px) {
  .img-caps.lower-kv {
    bottom: 90px;
  }
}

.img-caps.under {
  color: #333;
  bottom: -20px;
}

.img-caps.centerBottom {
  color: #333;
  bottom: -30px;
  -webkit-transform: translate(-50%);
          transform: translate(-50%);
  left: 50%;
  text-align: center;
}

.img-caps.with-bg {
  background: rgba(0, 0, 0, 0.5);
}

.img-caps.black {
  color: #333;
}

.img-caps.shadow {
  color: #fff;
  text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.8), 0px 0px 4px rgba(0, 0, 0, 0.8), 0px 0px 7px rgba(0, 0, 0, 0.8);
}

.img-caps.shadow2 {
  color: #fff;
  text-shadow: 
  0px 0px 3px rgba(0, 0, 0,1), 
  0px 0px 3px rgba(0, 0, 0,1), 
  0px 0px 3px rgba(0, 0, 0,1), 
  0px 0px 3px rgba(0, 0, 0,1), 
  0px 0px 3px rgba(0, 0, 0,1);
}

img.full-img {
  width: 100%;
  display: block;
}


/* hall
================================== */
.lower section .inner.hall {
  margin-top: 80px;
}
.lower section .inner.hall2 {
 margin-top: 80px;
 border-top: 1px solid #a99b65;
 border-bottom: 1px solid #a99b65;
}
.hall_wrap {
 margin-top: 80px;
 display: flex;
 justify-content: space-between;
 align-items: end;
}
.hall_wrap.reverse {
  flex-direction: row-reverse;
}
.hall_wrap + .hall_title {
  margin-top: 100px;
}
.hall_img {
 width: 58%;
}
.hall_body {
 width: 33%;
 display: flex;
 flex-direction: column;
 row-gap: 26px;
}

.hall_body h3{
	font-size: 180%;
	line-height: 1.8;
}
.hall_body p.contents_text{
	font-size: 120%;
	line-height: 2;
}


@media only screen and (max-width:768px) {
 .lower section .inner.hall {
  margin-top: 80px;
 }
 .hall_wrap {
  margin-top: 40px;
  flex-direction: column;
  row-gap: 30px;
 }
 .hall_wrap.reverse {
  flex-direction: column;
 }
 .hall_img {
  width: 100%;
 }
 .hall_body {
  width: 100%;
  row-gap: 14px;
 }

	
.hall_body h3{
	font-size: 120%;
	line-height: 1.8;
}
.hall_body p.contents_text{
	font-size: 80%;
	line-height: 1.8;
}
	
}