@charset "utf-8";

.visual {
 margin: 0 0 9rem;}

.visual_area {
 margin: auto;
 max-width: 114.2rem;}

.btn {
 background: #373737;
 color: #fff !important;
 display: inline-block;
 float: right;
 padding: .4rem 0;
 text-align: center;
 width: 15rem;
 max-width: 100%;
 font-weight: 500;
 letter-spacing: 0.08em;
 position: relative;
 z-index: 0;}

.btn::before {
 position: absolute;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 z-index: -1;
 content: '';
 background: #803F3F;
 transform-origin: left top;
 transform: scale(0, 1);
 transition: transform .1s;}

.btn::after {
 content: url("../img/btn_allow_gold.svg");
 float: right;
 margin: 0 1rem 0 0;}

.btn:hover {
 opacity: 1;}

.btn:hover::before {
 transform-origin: left top;
 transform: scale(1, 1);}

.wrap {
 max-width: 1260px;}

.sec1 {
 background: #FAFAF9;
 padding: 6rem 0;}

.sec1 .wrap > div {
 flex-basis: 60rem;}

.sec1 .wrap > div > .flex {
 align-items: flex-end;}

.sec1 p {
 color: #808080;
 display: inline;
 letter-spacing: 0.12em;}

.sec1 p span {
 color: #333;
 font-size: 2.6rem;
 font-weight: 500;
 letter-spacing: 0.3em;}

@media (max-width: 1300px) {
 .sec1 .wrap > div {
  flex-basis: 49%;
  margin: 0;
  text-align: center;}
}

@media (max-width: 640px) {
 .sec1 .wrap > div {
  flex-basis: 49%;
  margin: 0;
  text-align: center;}
}

@media (max-width: 900px) {
 body.modepc.visual {
  margin: 0;}

 body.modepc.sec1 .btn {
  display: block;
  float: none;
  max-width: 13.6rem;
  width: 100%;
  letter-spacing: 0.08em;
  font-size: 1.3rem;
  margin: 0 auto;}

 body.modepc.sec1 .wrap > div > .flex {
  display: block;}

 body.modepc.sec1 p {
  font-size: 1.3rem;
  letter-spacing: 0.08em;
  margin: 0.5rem auto 1.5rem;
  display: block;
  line-height: 2;}

 body.modepc.sec1 p span {
  color: #333;
  font-size: 1.8rem;}
}

@media (max-width: 640px) {
 .visual {
  margin: 0;}

 .sec1 .btn {
  display: block;
  float: none;
  max-width: 13.6rem;
  width: 100%;
  letter-spacing: 0.08em;
  font-size: 1.3rem;
  margin: 0 auto;}

 .sec1 .wrap > div > .flex {
  display: block;}

 .sec1 p {
  font-size: 1.3rem;
  letter-spacing: 0.08em;
  margin: 0.5rem auto 1.5rem;
  display: block;
  line-height: 2;}

 .sec1 p span {
  color: #333;
  font-size: 1.8rem;}
}

@media (max-width: 480px) {
 .sec1 {
  padding: 3rem 0 4.5rem;}

 .slick-dotted.slick-slider {
  margin-bottom: 0;}

 .slick-dots {
  display: none !important;}

 .sec1 .wrap > div + div {
  margin: 4rem 0 0;}
}

.sec2 {
 background-color: rgba(242, 242, 239, 0.5);
 padding: 9rem 0;
 background-image: url(../img/sec2_bg.png);
 background-size: cover;}

.sec2 .wrap {
 flex-direction: row-reverse;}

.sec2 h2,
.sec2 p {
 writing-mode: vertical-rl;
 color: #474747;
 letter-spacing: .4em;
 line-height: 3em;}

.sec2 h2 {
 font-size: 2.3rem;
 font-weight: 500;
 color: #333333;}

@media (max-width: 900px) {
 body.modepc .sec2 {
  padding: 2.5rem 0 4.5rem;}

 body.modepc .sec2 .wrap {
  align-items: center;
  flex-direction: column;}

 body.modepc .sec2 h2,
 body.modepc .sec2 p {
  writing-mode: initial;}

 body.modepc .sec2 h2 {
  text-align: center;
  font-size: 1.6rem;
  margin-bottom: 3.6rem;}

 body.modepc .sec2 p {
  line-height: 1.8;
  letter-spacing: .3em ;}

 body.modepc .sec2 figure {
  margin: 0 0 2rem;}
}

@media (max-width: 640px) {
 .sec2 {
  padding: 2.5rem 0 4.5rem;}

 .sec2 .wrap {
  align-items: center;
  flex-direction: column;}

 .sec2 h2,
 .sec2 p {
  writing-mode: initial;}

 .sec2 h2 {
  text-align: center;
  font-size: 1.6rem;
  margin-bottom: 3.6rem;}

 .sec2 p {
  line-height: 1.8;
  letter-spacing: .3em ;}

 .sec2 figure {
  margin: 0 0 2rem;}
}

.sec3 {
 background: #FAFAF9;
 padding: 2.5rem 0 4.5rem ;}

.sec3 ul {
 max-width: 880px;
 width: 100%;
 margin: 0 auto;}

.sec3 ul li {
 margin: 0 0 .2rem;}

.sec3 ul li a {
 background: #eee;
 display: block;
 padding: 2rem;
 position: relative;}

.sec3 ul li a br {
 display: none;}

.sec3 ul li a::after {
 content: '';
 background: url(../img/btn_allow_gray.svg) no-repeat;
 position: absolute;
 right: 2rem;
 top: 3rem;
 width: 11px;
 height: 11px;}

.sec3 ul li span.date {
 display: inline-block;
 width: 12em;
 letter-spacing: 0.1em;}

.sec3 ul li span.ttl {
 font-size: 1.5rem;
 font-weight: 500;
 letter-spacing: 0.2em;}

@media (max-width: 1260px) {
 body.modepc .sec3 .flex > figure {
  flex-basis: 40%;}
}

@media (max-width: 640px) {
 .sec3 .flex > figure {
  flex-basis: 40%;}
}

@media (max-width: 900px) {
 body.modepc .sec3 ul li a {
  display: flex;
  padding: 2rem 4rem 1.5rem 2rem;}

 body.modepc .sec3 ul li span.date {
  flex-basis: 8.5em;
  flex-shrink: 0;}

 body.modepc .sec3 ul li span.ttl {
  flex-basis: auto;
  overflow: hidden;
  max-width: 45%;
  text-overflow: ellipsis;
  white-space: nowrap;}
}

@media (max-width: 640px) {
 .sec3 ul li a {
  display: flex;
  padding: 2rem 4rem 1.5rem 2rem;}

 .sec3 ul li span.date {
  flex-basis: 8.5em;
  flex-shrink: 0;}

 .sec3 ul li span.ttl {
  flex-basis: auto;
  overflow: hidden;
  max-width: 45%;
  text-overflow: ellipsis;
  white-space: nowrap;}
}

.sec4 {
 padding: 8rem 0;}

.sec4 .event_main {
 display: block;
 margin: 0 0 5rem;}

.sec4 li {
 background: #fff;
 margin: 0 0 4.5rem;
 display: flex;}

.sec4 li figure {
 flex-basis: 48rem;}

.sec4 li .text {
 position: relative ;
 flex: 1 1 10%;
 padding: 2rem 3rem 4rem 3rem ;}

.sec4 li p {
 margin: 0 0 2rem;
 letter-spacing: 0.1em;
 text-align: justify;}

.sec4 li .text span {
 font-size: 2.4rem;
 font-weight: 500;
 letter-spacing: 0.1em;}

.sec4 li .text > div {
 margin: 0 0 2rem;}

.sec4 li .text a{
 position: absolute ;
 right: 2rem ;
 bottom: 2rem ;}

@media (min-width: 901px) and (max-width: 1024px) {
 body.modepc .sec4 li figure {
  height: 36rem;
  width: 100%;}

 body.modepc .sec4 li figure img {
  height: 100%;
  object-fit: cover;}

 body.modepc .sec4 li .text a{
  position:relative;
  right: 0;
  bottom: 0 ;}
}

@media (max-width: 1000px) {
 body.modepc .sec4 {
  padding: 3rem 0 0;}

 body.modepc .sec4 li {
  flex-direction: column;}

 body.modepc .sec4 li figure {
  flex-basis: auto;}

 body.modepc .sec4 li img {
  width: 100%;}

 body.modepc .sec4 li .text {
  padding: 2.5rem 1rem;}

 body.modepc .sec4 li .text > div {
  display: flex;
  align-items: center;}

 body.modepc .sec4 li .text > div > figure {
  flex-basis: 50%;
  flex-shrink: 0;}

 body.modepc .sec4 li .text > div > span {
  font-size: 1.8rem;
  letter-spacing: 0.08rem;
  padding: 0 1.2rem;}

 body.modepc .sec4 li p {
  padding: 0 1.5rem;
  margin-bottom: 1rem;}

 body.modepc .sec4 li .text a{
  position:relative;
  right: 0;
  bottom: 0 ;
  margin-top: 2rem ;
  margin-bottom: 0 ;}

 body.modepc .sec4 .btn {
  max-width: 13.6rem;
  width: 100%;
  letter-spacing: 0.08em;
  font-size: 1.3rem;
  margin: 0 1.4rem 1.4rem;}
}

@media (max-width: 640px) {
 .sec4 {
  padding: 3rem 0 0;}

 .sec4 li {
  flex-direction: column;}

 .sec4 li figure {
  flex-basis: auto;}

 .sec4 li img {
  width: 100%;}

 .sec4 li .text {
  padding: 2.5rem 1rem;}

 .sec4 li .text > div {
  display: flex;
  align-items: center;}

 .sec4 li .text > div > figure {
  flex-basis: 50%;
  flex-shrink: 0;}

 .sec4 li .text > div > span {
  font-size: 1.8rem;
  letter-spacing: 0.08rem;
  padding: 0 1.2rem;}

 .sec4 li p {
  padding: 0 1.5rem;
  margin-bottom: 1rem;}

 .sec4 li .text a{
  position:relative;
  right: 0;
  bottom: 0 ;
  margin-top: 2rem ;
  margin-bottom: 0 ;}

 .sec4 .btn {
  max-width: 13.6rem;
  width: 100%;
  letter-spacing: 0.08em;
  font-size: 1.3rem;
  margin: 0 1.4rem 1.4rem;}
}

@media (max-width: 768px) {
 body.modepc .sec4 li .text span {
  font-size: 2rem;
  line-height: 1.4;}

 body.modepc .sec4 .btn {
  display: block;
  margin: 0 auto 1.4rem;
  float: none;}
}

@media (max-width: 640px) {
 .sec4 li .text span {
  font-size: 2rem;
  line-height: 1.4;}

 .sec4 .btn {
  display: block;
  margin: 0 auto 1.4rem;
  float: none;}
}

.sec5 {
 background: #FAFAF9;
 padding: 6rem 0 8rem;}

.sec5 .news_list a {
 background: #eee;
 background: #fff;
 display: block;
 padding: 2rem 3rem;
 margin-bottom: 0.1rem;}

.sec5 .news_list a .date {
 display: inline-block;
 letter-spacing: 0.1em;
 width: 10rem;}

.sec5 .news_list a .cate {
 font-weight: 500;
 font-size: 1.5rem;
 padding: 0 5rem;
 letter-spacing: 0.2em;}

.sec5 .news_list a .title {
 font-size: 1.7rem;
 letter-spacing: 0.1em;}

.sec5 .news_list a {
 position: relative;}

.sec5 .news_list a::after {
 content: '';
 background: url("../img/btn_allow_gray.svg") no-repeat;
 width: 11px;
 height: 11px;
 position: absolute;
 right: 3rem;
 top: 50%;
 transform: translateX(-50%);}

@media (max-width: 900px) {
 body.modepc .sec5 {
  padding: 2.5rem 0 4.5rem ;}

 body.modepc .sec5 .news_list a::after {
  right: 2rem;}

 body.modepc .sec5 .news_list a .date {
  font-size: 1.6rem;}

 body.modepc .sec5 .news_list a .cate {
  padding: 0 2rem;}

 body.modepc .sec5 .news_list a .title {
  font-size: 1.4rem;
  display: block;
  width: 90%;}
}

@media (max-width: 640px) {
 .sec5 {
  padding: 2.5rem 0 4.5rem ;}

 .sec5 .news_list a::after {
  right: 2rem;}

 .sec5 .news_list a .date {
  font-size: 1.6rem;}

 .sec5 .news_list a .cate {
  padding: 0 2rem;}

 .sec5 .news_list a .title {
  font-size: 1.4rem;
  display: block;
  width: 90%;}
}

.sec6 {
 padding: 8rem 0;}

.sec6 .t_center {
 text-align: center;}

.sec6 .wrap > figure {
 margin: 0 0 10rem;}

.sec6 .flex > div {
 flex-basis: 59.4rem;
 border: 1px solid #803F3F;
 position: relative;}

.sec6 .flex > div::before {
 content: "";
 position: absolute;
 top: -.7rem;
 bottom: -.7rem;
 left: -.7rem;
 right: -.7rem;
 border: 3px solid #803F3F;
 z-index: -1;}

.sec6 .flex > div .text {
 padding: 1.4rem 2.6rem 2.9rem;
 align-items: flex-end;}

.sec6 .flex > div p {
 display: inline;
 letter-spacing: 0.08em;}

.sec6 .flex > div p span {
 font-size: 3.8rem;
 font-weight: 500;
 letter-spacing: 0.3em;
 display: block;
 margin-bottom: 0.1rem;}

@media (max-width: 1300px) {
 .sec6 .flex > div {
  flex-basis: 48%;}
}

@media (max-width: 640px) {
 .sec6 .flex > div {
  flex-basis: 48%;}
}

@media (max-width: 900px) {
 body.modepc .sec6 {
  padding: 4.5rem 0 5.2rem;}

 body.modepc .sec6 .wrap > figure {
  margin: 0 0 3.5rem;}

 body.modepc .sec6 .flex img {
  width: 100%;}

 body.modepc .sec6 .flex {
  display: block;}

 body.modepc .sec6 .flex > div:not(:last-child) {
  margin-bottom: 3rem;}

 body.modepc .sec6 .flex > div .text {
  display: flex;
  padding: 1rem;
  flex-wrap: wrap;}

 body.modepc .sec6 .flex > div p {
  flex-shrink: 0;}

 body.modepc .sec6 .flex > div p span {
  font-size: 2.3rem;
  letter-spacing: 0.2em;
  margin-bottom: -1.5rem;}

 body.modepc .sec6 .btn {
  font-size: 1.3rem;
  width: 11.6rem;
  margin-left: auto;}
}

@media (max-width: 640px) {
 .sec6 {
  padding: 4.5rem 0 5.2rem;}

 .sec6 .wrap > figure {
  margin: 0 0 3.5rem;}

 .sec6 .flex img {
  width: 100%;}

 .sec6 .flex {
  display: block;}

 .sec6 .flex > div:not(:last-child) {
  margin-bottom: 3rem;}

 .sec6 .flex > div .text {
  display: flex;
  padding: 1rem;
  flex-wrap: wrap;}

 .sec6 .flex > div p {
  flex-shrink: 0;}

 .sec6 .flex > div p span {
  font-size: 2.3rem;
  letter-spacing: 0.2em;
  margin-bottom: -1.5rem;}

 .sec6 .btn {
  font-size: 1.3rem;
  width: 11.6rem;
  margin-left: auto;}
}

.sec7 {
 background: #FAFAF9;
 padding: 8rem 0;}

.sec7 a {
 flex-basis: 32rem;}

.sec7 a:not(:last-child) {
 margin: 0 1rem 0 0;}

.sec7 a .title {
 background: #fff;
 border-bottom: 2px solid #803F3F;
 display: flex;
 align-items: center;
 justify-content: center;
 width: 12rem;
 height: 16rem;
 margin: -9rem auto 2rem;
 position: relative;
 z-index: 1;}

.sec7 a .title p {
 font-size: 3.4rem;
 font-weight: 400;
 writing-mode: vertical-rl;
 line-height: 1.3;
 letter-spacing: 0.3em;
 margin-top: 0.15em;}

.sec7 a .t_center {
 letter-spacing: 0.08em;}

.sec7 a figure {
 overflow: hidden;
 position: relative;
 width: 100%;}

.sec7 a figure::before {
 content: '';
 width: 100%;
 height: 100%;
 background: rgba(0, 0, 0, .2);
 position: absolute;
 display: block;
 opacity: 0;
 z-index: 1;
 transition: .5s all;}

.sec7 a figure img {
 width: 100%;
 transition: 0.5s all;}

.sec7 a:hover {
 opacity: 1;}

.sec7 a:hover figure::before {
 opacity: 1;}

.sec7 a:hover figure img {
 transform: scale(1.2);}

@media (max-width: 900px) {
 body.modepc .sec7 {
  padding: 4.5rem 0 0;}

 body.modepc .sec7 .flex {
  flex-wrap: wrap;
  justify-content: space-around;}

 body.modepc .sec7 a {
  flex-basis: 48%;
  margin: 0 0 4rem !important;}

 body.modepc .sec7 a .title {
  width: 45%;
  height: 10rem;
  margin: -5rem auto 2rem;}

 body.modepc .sec7 a .title p {
  font-size: 2.2rem;}
}

@media (max-width: 640px) {
 .sec7 {
  padding: 4.5rem 0 0;}

 .sec7 .flex {
  flex-wrap: wrap;
  justify-content: space-around;}

 .sec7 a {
  flex-basis: 48%;
  margin: 0 0 4rem !important;}

 .sec7 a .title {
  width: 45%;
  height: 10rem;
  margin: -5rem auto 2rem;}

 .sec7 a .title p {
  font-size: 2.2rem;}
}

.sec8 {
 padding: 8rem 0 0;}

.sec8 .wrap {
 flex-wrap: wrap;}

.sec8 .wrap a {
 flex-basis: calc(100%/3 - 1rem);
 text-align: center;
 margin: 0 0 8rem;}

.sec8 .wrap a img {
 border-radius: 50%;
 margin: 0 0 3rem;
 max-width: 30rem;}

.sec8 .wrap a p {
 font-size: 1.8rem;
 font-weight: 500;
 letter-spacing: 0.2em;}

@media (max-width: 900px) {
 body.modepc .sec8 {
  padding: 0 0 1.5rem ;}

 body.modepc .sec8 .wrap a {
  flex-basis: 46%;
  margin-bottom: 3rem;}

 body.modepc .sec8 .wrap a img {
  margin-bottom: 1.5rem;
  max-width: 100%;}
}

@media (max-width: 640px) {
 .sec8 {
  padding: 0 0 1.5rem ;}

 .sec8 .wrap a {
  flex-basis: 46%;
  margin-bottom: 3rem;}

 .sec8 .wrap a img {
  margin-bottom: 1.5rem;
  max-width: 100%;}
}

.sec9 {
 background: #F2F2EF;
 padding: 9rem 0 8rem;}

.sec9 a {
 flex-basis: 26rem;}

@media (max-width: 900px) {
 body.modepc .sec9 {
  padding: 5rem 0 5.6rem;}

 body.modepc .sec9 .flex {
  flex-wrap: wrap;}

 body.modepc .sec9 a {
  flex-basis: 49%;
  margin: 0 0 2%;}

 body.modepc .sec9 a img {
  width: 100%;}
}

@media (max-width: 640px) {
 .sec9 {
  padding: 5rem 0 5.6rem;}

 .sec9 .flex {
  flex-wrap: wrap;}

 .sec9 a {
  flex-basis: 49%;
  margin: 0 0 2%;}

 .sec9 a img {
  width: 100%;}
}

.sec10 {
 background: #FAFAF9;
 padding: 4.5rem 0 1.7rem;}

.sec10 .flex > figure {
 flex-basis: 77rem;}

.sec10 .flex > div {
 flex: 1 1 10%;
 margin: 0 0 0 2%;}

.sec10 li {
 display: flex;
 align-items: center;
 justify-content: space-between;
 margin: 0 0 1rem;
 padding: 0 0 1rem;}

.sec10 li:not(:last-child) {
 border-bottom: 1px dashed #ccc;}

.sec10 li figure {
 display: flex;
 margin: 0 1.5rem 0 0;}

.sec10 li figure img:not(:last-child) {
 margin: 0 .5rem 0 0;}

.sec10 li p {
 margin-right: auto;
 letter-spacing: 0.08em;
 white-space: nowrap;}

.sec10 li a {
 color: #fff;
 background: #373737;
 border-radius: 8px;
 margin: 0 0 0 1rem;
 max-width: 16rem;
 padding: 0.6rem 4.4rem 0.7rem 6.5rem;
 position: relative;
 letter-spacing: 0.08em;}

.sec10 li a::before {
 content: '';
 background: url(../img/sec10_icon.svg) no-repeat;
 width: 1.5rem;
 height: 2.1rem;
 position: absolute;
 left: 3.8rem;
 top: 50%;
 transform: translateY(-50%);}

.sec10 .access_link {
 display: block;
 background: #803F3F;
 color: #fff;
 letter-spacing: 0.08em;
 padding: 1.7rem 6rem 1.7rem 3.9rem;
 margin: 2.8rem auto;
 max-width: 27.5rem;
 border-radius: 8px;
 position: relative;}


.sec10 .access_link::after {
 content: '';
 background: url("../img/btn_allow_white.svg");
 width: 1.1rem;
 height: 1.1rem;
 position: absolute;
 right: 1.7rem;
 top: 2.5rem;}

@media (max-width: 1300px) {
 .sec10 .flex > figure {
  flex-basis: 50%;}

 body.modepc .sec10 li img {
  max-width: 30px;}
}

@media (max-width: 640px) {
 .sec10 .flex > figure {
  flex-basis: 50%;}

 .sec10 li img {
  max-width: 30px;}
}

@media (max-width: 900px) {
 body.modepc .sec10 .flex {
  flex-wrap: wrap;}

 body.modepc .sec10 .flex > div {
  margin: 0 0 0 0;}

 body.modepc .sec10 .flex > figure {
  flex-basis: 100%;
  margin: 0 0 3rem;}

 body.modepc .sec10 li p {
  font-size: 1.6rem;}

 body.modepc .sec10 li a {
  padding: 0.2rem 1rem 0.2rem 3rem;}

 body.modepc .sec10 li a::before {
  left: 0.8rem;}
}

@media (max-width: 640px) {
 .sec10 .flex {
  flex-wrap: wrap;}

 .sec10 .flex > div {
  margin: 0 0 0 0;}

 .sec10 .flex > figure {
  flex-basis: 100%;
  margin: 0 0 3rem;}

 .sec10 li p {
  font-size: 1.6rem;}

 .sec10 li a {
  padding: 0.2rem 1rem 0.2rem 3rem;}

 .sec10 li a::before {
  left: 0.8rem;}
}

@media (max-width: 480px) {
 .sec1 .wrap {
  flex-direction: column;}
}

@media (max-width: 400px) {
 .sec10 li figure {
  margin: 0px 0.5rem 0 0;}

 .sec10 li p {
  font-size: 1.5rem;}

 .sec10 li a {
  margin: 0;}
}

@media (max-width: 1300px) {
 .wrap {
  margin: 0 5%;}
}

@media (max-width: 640px) {
 .wrap {
  margin: 0 5%;}
}

.swiper{
 margin: 0 0 3rem ;}

.swiper .swiper-slide {
 padding-bottom: 55px}

.swiper .swiper-slide img {
 width: 100%;
 max-width: 1142px;
 height: 100%;
 object-fit: cover}

.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
 width: 9px;
 height: 9px;
 margin: 0 19px 0 0;}

.swiper .swiper-pagination-bullet {
 background-color: rgb(51,51,51);
 opacity: 1}

.swiper .swiper-pagination-bullet-active {
 background-color: #c5b47f!important}

@media(max-width: 900px) {
 body.modepc .swiper{
  margin-bottom: 0 ;}
 
 body.modepc .swiper .swiper-slide img {
  max-width:none;}
 
 body.modepc .swiper .swiper-slide{
  padding-bottom: 0 ; }
 
 body.modepc .swiper-pagination{
  display: none ;}
}

@media(max-width: 640px) {
 .swiper{
  margin-bottom: 0 ;}
 
 .swiper .swiper-slide img {
  max-width:none;}
 
 .swiper .swiper-slide{
  padding-bottom: 0 ; }
 
 .swiper-pagination{
  display: none ;
 }
}