@charset "UTF-8";
/* CSS Document */

#contents {
  margin-bottom: 0;
}

/*mv*/

#mv .mvInr {
  min-width: 90%;
  height: auto;
}

#mv .mvInr #slider li.slide {
  width: 100%;
  height: 700px;
  background-size: cover;
  background-position: center center;
  padding-top: 80px;
}

#mv .mvInr #slider li.slide h2 {
  color: #fff;
  font-weight: normal;
  text-align: center;
  font-size: 24px;
  line-height: 2.2;
  letter-spacing: 0.1em;
  background: none;
  padding: 0;
  margin: 0;
}


.box-caution {
    display: flex;
    grid-gap: 0 .7em;
    margin: 0 auto;
    padding: 1em;
    border-radius: 5px;
    background-color: rgb(255 235 238 / 85%);
    color: #333333;
    position: absolute;
    right: 40px;
    bottom: -150px;
    z-index: 5;
}

_:lang(x)::-internal-media-controls-overlay-cast-button, .box-caution{
    bottom: -120px;
}

.box-caution::before {
    width: 60px;
    height: 60px;
    background-repeat: no-repeat;
    content: '';
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.8659 3.00017L22.3922 19.5002C22.6684 19.9785 22.5045 20.5901 22.0262 20.8662C21.8742 20.954 21.7017 21.0002 21.5262 21.0002H2.47363C1.92135 21.0002 1.47363 20.5525 1.47363 20.0002C1.47363 19.8246 1.51984 19.6522 1.60761 19.5002L11.1339 3.00017C11.41 2.52187 12.0216 2.358 12.4999 2.63414C12.6519 2.72191 12.7782 2.84815 12.8659 3.00017ZM10.9999 16.0002V18.0002H12.9999V16.0002H10.9999ZM10.9999 9.00017V14.0002H12.9999V9.00017H10.9999Z' fill='%23f06060'%3E%3C/path%3E%3C/svg%3E");
}

.box-caution p {
    margin: 0;
    padding: 0 0 0 .7em;
    border-left: 1px solid #f06060;
    font-size: 14px;
    font-weight: bold;
}

@media only screen and (max-width: 800px) {
.box-caution {
    display: flex;
    grid-gap: 0 .7em;
    margin: 0 auto;
    padding: 0.5em;
    border-radius: 5px;
    background-color: rgb(255 235 238 / 85%);
    color: #333333;
    position: absolute;
    right: 20px;
    left: 20px;
    bottom: 400px;
    z-index: 5;
}

.box-caution::before {
    width: 40px;
    height: 30px;
    background-repeat: no-repeat;
    content: '';
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.8659 3.00017L22.3922 19.5002C22.6684 19.9785 22.5045 20.5901 22.0262 20.8662C21.8742 20.954 21.7017 21.0002 21.5262 21.0002H2.47363C1.92135 21.0002 1.47363 20.5525 1.47363 20.0002C1.47363 19.8246 1.51984 19.6522 1.60761 19.5002L11.1339 3.00017C11.41 2.52187 12.0216 2.358 12.4999 2.63414C12.6519 2.72191 12.7782 2.84815 12.8659 3.00017ZM10.9999 16.0002V18.0002H12.9999V16.0002H10.9999ZM10.9999 9.00017V14.0002H12.9999V9.00017H10.9999Z' fill='%23f06060'%3E%3C/path%3E%3C/svg%3E");
}

.box-caution p {
    margin: 0;
    padding: 0 0 0 .7em;
    border-left: 1px solid #f06060;
    font-size: 9px;
    font-weight: bold;
    }
    
    
.caution_area{
    background-color: #ffebee;
    color: #333333;
    padding: 1em;
}

/*.caution_area p::before{
    background-repeat: no-repeat;
    content: '';
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.8659 3.00017L22.3922 19.5002C22.6684 19.9785 22.5045 20.5901 22.0262 20.8662C21.8742 20.954 21.7017 21.0002 21.5262 21.0002H2.47363C1.92135 21.0002 1.47363 20.5525 1.47363 20.0002C1.47363 19.8246 1.51984 19.6522 1.60761 19.5002L11.1339 3.00017C11.41 2.52187 12.0216 2.358 12.4999 2.63414C12.6519 2.72191 12.7782 2.84815 12.8659 3.00017ZM10.9999 16.0002V18.0002H12.9999V16.0002H10.9999ZM10.9999 9.00017V14.0002H12.9999V9.00017H10.9999Z' fill='%23f06060'%3E%3C/path%3E%3C/svg%3E");
}*/

.caution_area .caution_text::before{
    content: '';
    display: inline-block;   /* ← これを追加 */
    width: 40px;
    height: 30px;
    background-image: url("../images/caution.png");
    background-repeat: no-repeat;
    background-size: contain; /* あると安心 */
    margin-right: 8px;        /* 文字との間隔 */
}


/*.caution_area .caution_text::before {
    content: "";
    display: inline-block;
    width: 30px;
    height: 30px;
    background-repeat: no-repeat;
    background-image: url("../images/caution.png");
    background-position: center;
    background-size: contain;
}*/

.caution_area .caution_text {
    margin: 0;
    padding: 0 0 0 .7em;
    /*border-left: 1px solid #f06060;*/
    font-size: 9px;
    font-weight: bold;
    display: flex;
    align-items: center;
    }



    
}


/*sec01*/

#sec01 {
  padding: 100px 0;
}

#sec01 .scInr {
  text-align: center;
}

#sec01 .scInr .inr {
  overflow: hidden;
  display: inline-block;
  margin-right: 50px;
  max-width: 1100px;
  width: 100%;
}

#sec01 .scInr .inr h3 {
  width: 15%;
  float: right;
}

#sec01 .scInr .inr p.txtarea {
  width: 40%;
  float: right;
  padding: 0 8%;
}

#sec01 .scInr .inr p.imgarea {
  float: right;
  width: 45%;
}

/*sec02*/

#sec02 {
  padding: 100px 0;
  background: #fff;
}

#sec02 ul {
  overflow: hidden;
  max-width: 1400px;
  width: 96%;
  margin: 0 auto;
}

#sec02 ul li {
  width: 31%;
  float: left;
  margin-right: 3.5%;
  border: #b5b5b5 1px solid;
}

#sec02 ul li:last-child {
  margin-right: 0;
}

#sec02 ul li figure {
}

#sec02 ul li figure a {
  display: block;
  padding: 25px;
}

#sec02 ul li figure .img {
  height: 300px;
  text-indent: -9999px;
  margin-bottom: 20px;
}

#sec02 ul li:nth-child(1) figure .img {
  background: url(../images/sec02_img01.jpg) no-repeat center center;
  background-size: cover;
}

#sec02 ul li:nth-child(2) figure .img {
  background: url(../images/sec02_img02.jpg) no-repeat center center;
  background-size: cover;
}

#sec02 ul li:nth-child(3) figure .img {
  background: url(../images/sec02_img03.jpg) no-repeat center center;
  background-size: cover;
}

#sec02 ul li figure h4 {
  font-size: 24px;
  font-weight: normal;
  text-align: center;
  line-height: 1.3;
  margin-bottom: 10px;
}

#sec02 ul li figure h4 span {
  display: block;
  font-size: 10px;
  color: #e8340c;
}

/*sec03*/

#sec03 {
  padding: 100px 0;
}

#sec03 .bg01 {
  background: url(../images/sec03_banner_bg01.png) no-repeat;
  background-size: cover;
  max-width: 1600px;
  width: 96%;
  margin: 0 auto;
  padding: 20px;
}

#sec03 .bg02 {
  background: url(../images/sec03_banner_bg02.png) no-repeat center center;
  background-size: cover;
  padding: 90px 30px;
}

#sec03 .bg02 .inr {
  display: table;
  max-width: 800px;
  width: 80%;
}

#sec03 .bg02 .inr .img {
  display: table-cell;
  width: 25%;
  vertical-align: middle;
  padding-right: 4%;
}

#sec03 .bg02 .inr .img img {
  width: 100%;
  height: auto;
}

#sec03 .bg02 .inr .txtarea {
  display: table-cell;
  width: 75%;
  vertical-align: middle;
}

#sec03 .bg02 .inr .txtarea h3 {
  font-size: 26px;
  line-height: 1.4;
  margin-bottom: 10px;
}

#sec03 .bg02 .inr .txtarea h3 span {
  font-size: 11px;
  display: block;
  color: #d8cc37;
  font-weight: normal;
}

#sec03 .bg02 .inr .txtarea p {
  position: relative;
  display: inline-block;
}

#sec03 .bg02 .inr .txtarea p:after {
  content: "";
  background: url(../lib/cmn_img/red_allow.png) no-repeat;
  width: 42px;
  height: 42px;
  position: absolute;
  right: -60px;
  top: -10px;
}

#sec03 ul {
  overflow: hidden;
  display: table;
  max-width: 1600px;
  width: 96%;
  margin: 0 auto;
  margin-top: 40px;
}

#sec03 ul li {
  width: 33.3%;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  border-left: #888 1px dotted;
}

#sec03 ul li:last-child {
  border-right: #888 1px dotted;
}

#sec03 ul li a {
  display: block;
  padding: 30px 0;
}

#sec03 ul li a h4 {
  font-size: 22px;
  margin-bottom: 20px;
}

#sec03 ul li a h4 span {
  font-size: 11px;
  display: block;
  color: #d8cc37;
  font-weight: normal;
}

#sec03 ul li a:hover {
  background: rgba(0, 0, 0, 0.1);
}

/*sec04*/

#sec04 {
  padding: 100px 0;
  background: url(../images/sec04_bg.jpg) no-repeat center center;
}

#sec04 #event li {
  background: #fff;
  margin: 0 15px;
}

#sec04 #event li .inr {
  padding: 20px 15px;
}

#sec04 #event li p.img {
  width: 100%;
  height: 240px;
  display: table;
  background: #ededed;
  text-align: center;
}

#sec04 #event li p.img span {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  line-height: 0;
}

#sec04 #event li p.img span img {
  max-height: 240px;
  max-width: 100%;
  line-height: 0;
  display: inline-block;
}

#sec04 #event li p.category {
  border: 1px #444 solid;
  border-radius: 15px;
  display: inline-block;
  font-size: 12px;
  padding: 3px 20px 2px;
  margin-bottom: 10px;
}

#sec04 #event li p.ttl {
  font-size: 18px;
  height: 58px;
  overflow: hidden;
  position: relative;
  margin-bottom: 20px;
}

#sec04 #event li p.ttl::before {
  background-color: #fff;
  font-size: 1.8rem;
  bottom: 0;
  content: "…";
  position: absolute;
  right: 0;
}

#sec04 #event li a:hover p.ttl span {
  border-bottom: #999 1px solid;
}

#sec04 #event li p.ttl::after {
  background-color: #fff;
  content: "";
  height: 100%;
  position: absolute;
  width: 100%;
}

#sec04 #event li p.date {
  font-size: 12px;
  text-align: right;
  color: #a58d59;
}

#sec04 .scInr {
  position: relative;
}

#sec04 .scInr .slick-prev,
#sec04 .scInr .slick-next {
  width: 19px; /* 画像幅 */
  height: 50px; /* 画像高さ */
}

#sec04 .scInr .slick-prev {
  background-image: url(/lib/cmn_img/left_arrow.png);
  left: -20px;
}

#sec04 .scInr .slick-next {
  background-image: url(/lib/cmn_img/right_arrow.png);
  right: -20px;
}

.slick-prev::before,
.slick-next::before {
  display: none;
}

/*SP*/
@media only screen and (max-width: 800px) {
  #contents {
    padding-top: 0;
  }

  #mv .mvInr #slider li.slide {
    height: 40vh;
    padding-top: 30px;
  }

  #mv .mvInr #slider li.slide h2 {
    font-size: 16px;
    line-height: 1.8;
  }

  /*sec01*/

  #sec01 {
    padding: 0;
  }

  #sec01 .scInr {
    width: 97%;
    overflow: hidden;
    text-align: center;
  }

  #sec01 .scInr .inr h3 {
    width: 40px;
    float: none;
    display: inline-block;
    margin-bottom: 20px;
  }

  #sec01 .scInr .inr h3 img {
    width: 100%;
    height: auto;
  }

  #sec01 .scInr .inr p.txtarea {
    width: 100%;
    float: none;
    padding: 0;
    text-align: left;
    margin-bottom: 20px;
  }

  #sec01 .scInr .inr p.imgarea {
    max-width: 300px;
    width: 80%;
    float: none;
    display: inline-block;
  }

  /*sec02*/

  #sec02 {
    padding: 30px 0;
  }

  #sec02 ul li {
    width: 100%;
    float: none;
    margin-right: 0;
    border: #b5b5b5 1px solid;
    margin-bottom: 15px;
  }

  #sec02 ul li figure a {
    display: table;
    padding: 15px;
    width: 100%;
  }

  #sec02 ul li figure a .img {
    display: table-cell;
    width: 25%;
    height: auto;
    margin-bottom: 0;
    vertical-align: middle;
  }

  #sec02 ul li figure a figcaption {
    display: table-cell;
    width: 75%;
    padding-left: 5%;
    vertical-align: middle;
  }

  #sec02 ul li figure h4 {
    font-size: 18px;
    text-align: center;
    margin-bottom: 5px;
  }

  #sec02 ul li figure h4 span {
    display: block;
    font-size: 8px;
  }

  #sec02 ul li figure a figcaption p {
    text-align: left !important;
  }

  /*sec03*/

  #sec03 {
    padding: 30px 0;
  }

  #sec03 .bg01 {
    padding: 10px;
  }

  #sec03 .bg02 {
    background: #fff;
    padding: 30px 10px 60px;
  }

  #sec03 .bg02 .inr {
    display: block;
    max-width: 100%;
    width: 100%;
    text-align: center;
  }

  #sec03 .bg02 .inr .img {
    display: block;
    width: 30%;
    padding-right: 0;
    margin: 0 auto;
  }

  #sec03 .bg02 .inr .img img {
    width: 100%;
    height: auto;
  }

  #sec03 .bg02 .inr .txtarea {
    display: block;
    width: 100%;
  }

  #sec03 .bg02 .inr .txtarea h3 {
    font-size: 18px;
  }

  #sec03 .bg02 .inr .txtarea h3 span {
    font-size: 7px;
  }

  #sec03 .bg02 .inr .txtarea p {
    position: relative;
    display: block;
  }

  #sec03 .bg02 .inr .txtarea p:after {
    content: "";
    background: url(../lib/cmn_img/red_allow.png) no-repeat;
    background-size: 80%;
    width: 34px;
    height: 34px;
    position: absolute;
    right: 50%;
    top: 105%;
    margin-right: -17px;
  }

  #sec03 ul {
    margin-top: 20px;
  }

  #sec03 ul li {
    vertical-align: top;
  }

  #sec03 ul li:last-child {
    border-right: #888 1px dotted;
  }

  #sec03 ul li a {
    display: block;
    padding: 10px 0 7px;
  }

  #sec03 ul li a h4 {
    font-size: 14px;
    height: 55px;
    margin-bottom: 0;
    letter-spacing: 0.03em;
  }

  #sec03 ul li a h4 span {
    font-size: 8px;
  }

  #sec03 ul li a p img {
    width: 30px;
    height: 30px;
  }

  /*sec04*/

  #sec04 {
    padding: 40px 0;
  }

  #sec04 #event li {
    margin: 0 5px;
  }

  #sec04 #event li .inr {
    padding: 15px 10px;
  }

  #sec04 #event li p.img {
    height: 150px;
  }

  #sec04 #event li p.img span img {
    max-height: 150px;
  }

  #sec04 #event li p.category {
    border: 1px #444 solid;
    border-radius: 15px;
    display: inline-block;
    font-size: 12px;
    padding: 3px 20px 2px;
    margin-bottom: 10px;
  }

  #sec04 #event li p.ttl {
    font-size: 18px;
    height: 58px;
    overflow: hidden;
    position: relative;
    margin-bottom: 20px;
  }

  #sec04 #event li p.category {
    font-size: 10px;
  }

  #sec04 #event li p.ttl {
    font-size: 15px;
    height: 49px;
    margin-bottom: 10px;
  }

  #sec04 #event li p.ttl::before {
    font-size: 1.5rem;
  }

  #sec04 #event li p.date {
    font-size: 10px;
  }

  #sec04 .scInr .slick-prev,
  #sec04 .scInr .slick-next {
    width: 10px; /* 画像幅 */
    height: 25px; /* 画像高さ */
  }

  #sec04 .scInr .slick-prev {
    background-image: url(/lib/cmn_img/left_arrow.png);
    background-size: 10px 25px;
    left: -5px;
  }

  #sec04 .scInr .slick-next {
    background-image: url(/lib/cmn_img/right_arrow.png);
    background-size: 10px 25px;
    right: -5px;
  }
}

/*instagram*/
#sns {
  background-color: #fff;
  margin-bottom: 0;
  padding: 60px 0;
}
#sns .scInr {
  display: flex;
  justify-content: center;
  gap: 2em;
}
#sns .scInr .sns_box {
  width: 100%;
  max-width: 500px;
  flex: 1;
}
#sns .scInr .sns_box .ttl03 {
  margin-bottom: 20px;
  display: flex;
  justify-content: center;
  gap: 0.5em;
  align-items: center;
}
#sns .scInr .sns_box .ttl03 .icon {
  width: 30px;
  height: 30px;
}
#sns .scInr .sns_box .ttl03 .icon img {
  width: 100%;
}
#sns .facebook_list iframe {
  width: 100%;
}
#sns .insta_list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
#sns .insta_list li {
  width: calc(100% / 3 - 10px);
  aspect-ratio: 1 / 1;
}
#sns .insta_list li a {
  display: block;
  width: 100%;
  height: 100%;
}
#sns .insta_list li a img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media only screen and (max-width: 800px) {
  #sns .scInr {
    flex-direction: column;
  }
  #sns .scInr .sns_box {
    margin: 0 auto;
  }
  #sns .facebook_list {
    margin-bottom: 30px;
  }
}