@charset "UTF-8";
/* ==========================================================================
   initialize
   ========================================================================== */
/* ==========================================================================
   index
   ========================================================================== */
#header.index {
  height:80vh;
}

.topimage_202307::after {
  display: block;
  content: "";
  width: min(17vw,68px);
  height: min(20vw,119px);
  background: url(/img/index/mv_himejijo_logo.png) no-repeat center / contain;
  position: absolute;
  bottom: 2%;
  left: 2%;}
#introduction {
  text-align: center; }
  #introduction .title {
    margin-bottom: 2rem; }
  #introduction .text {
    line-height: 1.75;
    display: inline-block;
    text-align: left;
    margin-bottom: 2rem; }
  #introduction .time {
    font-family: 'Noto Serif JP', sans-serif;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center; }
    #introduction .time dl {
      padding: 0 1.5rem;
      margin-bottom: 0; }
      #introduction .time dl dt {
        font-size: 1.5rem;
        font-weight: normal; }
  #introduction .holiday {
    font-family: 'Noto Serif JP', sans-serif;
    font-size: 1.4rem;
    margin-bottom:0; }
  #introduction .address {
    margin-bottom: 2.0rem; }
  #introduction .message {
    font-size: 1.2rem; }
  #introduction .tel {
    font-family: 'Noto Serif JP', sans-serif;
    font-size: 1.5rem; }
  #introduction .part-time {
    margin-bottom: 15px;}
  #introduction .part-time img{
	max-width: 100%;}
  #introduction .coronavirus .btn{
    color:#291c19;
    background-color:#CAAF77;
    padding:0.375rem 0.85rem;}
  #introduction .coronavirus .btn:hover{
    color:#CAAF77;
    background-color:#291c19;
    padding:0.375rem 0.85rem;}
  #introduction .banner{
    max-width:800px;
    margin:15px auto 75px;}
  #introduction .banner img{
    width:100%;
    height:auto;
    margin-bottom:15px;}
  #introduction .banner .banner-inner{
  	margin: 0 auto;
  }
  #introduction .banner .banner-inner-five{
	flex-wrap: wrap;
	justify-content: center;
	width: 100%;
  	margin: 0 auto;
  }
  #introduction .banner .banner-inner-five > div {
	width: calc(100% / 5);
  	padding: 0 1rem;
  }
  #introduction .letter-abolish {
    margin: 0 0 1.5em;
  }
  #introduction .banner-virtual {
	  width: 100%;
	  max-width:800px;
	  padding: 0;
	  margin: 0 auto 15px auto;}
  #introduction .banner-virtual p {
	  color: #FFF;
	  font-size: clamp(1.2rem,3vw,2rem);;
	  text-align: center;
	  margin-bottom: 0;
	  border-bottom: 4px solid #E6CC99; 
	  background: url(/img/index/banner_virtual_title.jpg);}
  #introduction .banner-virtual .flex-box {
	  display: flex;
	  background:url(/img/index/banner_virtualbg.png);}
  #introduction .banner-virtual .flex-item{
	  display: flex;
	  justify-content: space-around;
	  width: calc(97% / 3);
	  margin-left: 5px;}
  #introduction .banner-virtual .img-box {
	  width: 39%;
	  max-height: 150px;
	  padding: 5px 0;
	  overflow: hidden;}
  #introduction .banner-virtual .img-box img {
	  margin-bottom: 0;}
  #introduction .banner-virtual .text-box {
	  width: 59%;
	  padding: 5px 0;
	  margin-left: 2%;}
  #introduction .banner-virtual ul {
	  margin-bottom: .5rem;}
  #introduction .banner-virtual ul li {
	  font-size: 1rem;
	  font-family: sans-serif;
	  text-align: left;}
  #introduction .banner-virtual span {
	  display: inline-block; 
	  text-align: center; 
	  border: 2px solid #FF8262; 
	  border-radius: 50px; 
	  background: #7A2D25;}
  #introduction .banner-virtual a {
	  display: inline-block;
	  color: #FFF;
	  font-size: 1rem;
	  padding: .2em 1.5em;}
  #introduction .banner-virtual a:hover {
	  text-decoration: none;}
  #introduction .banner-virtual span::after {
	  content:">";
	  color: #ceb7b7;
	  font-size: 1rem;
	  padding: 0 4px;
      margin-right: 5px;
	  border-radius: 50px; 
	  background: #CD7B6F; }
@media (max-width: 939px){
  #introduction .banner-virtual .flex-box {
      flex-wrap: wrap;
      background: url(/img/index/banner_virtualbg.png);
  }
  #introduction .banner-virtual .flex-item {
    width: 49%;
    margin-left: 5px;
  }
  #introduction .banner-virtual .text-box {
    text-align: left;
  }
}
@media (max-width: 768px){
  #introduction .banner-virtual {
	padding-right: 1rem;
    padding-left: 1rem;
	box-sizing: border-box;}
  #introduction .banner-virtual a {
    padding: 3px 1em;}
  #introduction .letter-abolish {
    margin: -em 0 1.5em;
  }
}
@media (max-width: 546px){
  #introduction .banner-virtual .flex-item {
	width: 95%;}
  #introduction .banner .banner-inner-five > div {
	width: calc(100% / 3);
  	padding: 0 1rem;
  }

}
#news {
  background-color: #F7F6F0;
  margin-bottom:30px;}
  #news h2 {
    text-align: center;
    margin-bottom: 1rem; }
  #news .slick-track {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch; }
    #news .slick-track:before, #news .slick-track:after {
      content: none; }
  #news .slick-slide {
    float: none;
    height: auto; }
  #news .slick-prev, #news .slick-next {
    z-index: 1;
    width: 3rem;
    padding: 1rem;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    /*
    &:after {
      content: "";
      position: absolute;
      display: block;
      width: 50%;
      height: 50%;
      bottom: 0;
      background-color: rgba(red, .5);
      left: 0;
    }*/ }
    #news .slick-prev:hover, #news .slick-next:hover {
      background-color: rgba(0, 0, 0, 0.25); }
    #news .slick-prev:before, #news .slick-next:before {
      content: "";
      position: absolute;
      display: block;
      width: 24px;
      height: 24px;
      border-left: 4px solid white;
      border-top: 4px solid white; }
  #news .slick-prev {
    left: 0; }
    #news .slick-prev:before {
      -webkit-transform: rotate(315deg);
      -ms-transform: rotate(315deg);
      transform: rotate(315deg);
      margin: -12px 0px 0px 4px;
      margin: -12px 0px 0px -4px; }
  #news .slick-next {
    right: 0; }
    #news .slick-next:before {
      -webkit-transform: rotate(135deg);
      -ms-transform: rotate(135deg);
      transform: rotate(135deg);
      margin: -12px 0px 0px -12px;
      margin: -12px 0px 0px -4px; }
  #news .img-container {
    position: relative;
    overflow: hidden;
    width: 100%; }
    #news .img-container:before {
      display: block;
      padding-top: 66.66666%;
      content: ''; }
    #news .img-container img {
      position: absolute;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      width: 100%; }
  #news .slide-item {
    margin: 1rem; }
    #news .slide-item .slide-item-inner {
      color: inherit;
      text-decoration: none;
      display: block;
      opacity: 1;
      height: 100%;
      -webkit-transition: opacity .5s;
      -o-transition: opacity .5s;
      transition: opacity .5s;
      background-color: #fff; }
      #news .slide-item .slide-item-inner:hover {
        opacity: .5; }
    #news .slide-item h3 {
      font-size:1.1rem;
      color:#F00;
      margin: 0;
      padding: 1rem 1rem 0.5rem 1rem; }
    #news .slide-item p {
      font-size:0.9rem;
      margin: 0;
      padding: 0 1rem 1rem 1rem; }


#main-banner-container{
  }
  #main-banner-container .wrap{
    text-align:center;}


#main-menu-container{
  }
  #main-menu-container .content{
    padding-bottom:0;}
  #main-menu-container .wrap{
    margin-bottom:50px;
    text-align:center;}
    #main-menu-container .wrap .photo{
    max-width:500px;
    margin:0 auto 15px;}
    #main-menu-container .wrap h3{
    font-size:2.0rem;
    }
    #main-menu-container .wrap p{
    font-size:0.8rem;}
    #main-menu-container .wrap .btn{
    padding:0 2rem;}
    #main-menu-container .wrap .ls{
    letter-spacing:1em;}


#wedding {
  margin-bottom:30px;}
  #wedding h2 {
    text-align: center;
    margin-bottom: 1rem; }
  
  #wedding .box{
    border:1px solid #B40B0D;
    padding:15px;
    }
  #wedding .content{
    padding-bottom:0;}
  
  #wedding .heading{
    text-align:center;
    margin-bottom:30px;}
    #wedding .heading  .photo{
      margin-bottom:15px;}
    #wedding .heading  .h2{
      margin-bottom:15px;}
    #wedding .heading  .p{
      margin-bottom:15px;}
  
  #wedding .info{
    background-color: #F7F6F0;
    margin-bottom:30px;
    padding:15px 0;}
    #wedding .info h3{
      font-size:1.5rem;
      text-align:center;
      color:#B40B0D;}
  
  #wedding .plan{
    max-width:992px;
    margin:0 auto 30px;}
    #wedding .plan h3{
      font-size:1.5rem;
      text-align:center;
      margin-bottom:1em;}
    #wedding .plan .wrap{
      border-right:1px solid #B40B0D;
      border-bottom:1px solid #B40B0D;
      margin-bottom:15px;}
    #wedding .plan .wrap .photo{
      margin-bottom:15px;}
    #wedding .plan .wrap h4{
      font-size:1.25rem;
      text-align:center;}
    #wedding .plan .wrap p{
      text-align:center;}
    #wedding .plan .wrap a{
      color:#291c19;}
    #wedding .plan .wrap a:hover{
      text-decoration:none;}
  
  #wedding .link{
    max-width:768px;
    margin:0 auto;}
    #wedding .link .btn{
      width:100%;
      color:#7B7675;
      background-color:#ECECE4;
      border:none;
      padding:0.375rem 0.85rem;}
    #wedding .link .btn:hover{
      color:#ECECE4;
      background-color:#7B7675;
    }
  #wedding .slick-track {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch; }
    #wedding .slick-track:before, #wedding .slick-track:after {
      content: none; }
  #wedding .slick-slide {
    float: none;
    height: auto; }
  #wedding .slick-prev, #wedding .slick-next {
    z-index: 1;
    width: 3rem;
    padding: 1rem;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;}
    #wedding .slick-prev:hover, #wedding .slick-next:hover {
      background-color: rgba(0, 0, 0, 0.25); }
    #wedding .slick-prev:before, #wedding .slick-next:before {
      content: "";
      position: absolute;
      display: block;
      width: 24px;
      height: 24px;
      border-left: 4px solid white;
      border-top: 4px solid white; }
  #wedding .slick-prev {
    left: 0; }
    #wedding .slick-prev:before {
      -webkit-transform: rotate(315deg);
      -ms-transform: rotate(315deg);
      transform: rotate(315deg);
      margin: -12px 0px 0px 4px;
      margin: -12px 0px 0px -4px; }
  #wedding .slick-next {
    right: 0; }
    #wedding .slick-next:before {
      -webkit-transform: rotate(135deg);
      -ms-transform: rotate(135deg);
      transform: rotate(135deg);
      margin: -12px 0px 0px -12px;
      margin: -12px 0px 0px -4px; }
  #wedding .img-container {
    position: relative;
    overflow: hidden;
    width: 100%; }
    #wedding .img-container:before {
      display: block;
      padding-top: 66.66666%;
      content: ''; }
    #wedding .img-container img {
      position: absolute;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      width: 100%; }
  #wedding .slide-item {
    margin: 1rem; }
    #wedding .slide-item .slide-item-inner {
      color: inherit;
      text-decoration: none;
      display: block;
      opacity: 1;
      height: 100%;
      -webkit-transition: opacity .5s;
      -o-transition: opacity .5s;
      transition: opacity .5s;
      background-color: #fff; }
      #wedding .slide-item .slide-item-inner:hover {
        opacity: .5; }
    #wedding .slide-item p {
      margin: 0;
      padding: 1rem; }

#main-bottom-container{
  }
  #main-bottom-container #memberscard {
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    color: rgba(41, 28, 25, 0.75);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-bottom:50px;}
    #main-bottom-container #memberscard:before {
      content: "";
      display: inline-block;
      margin-right: 1.5rem;
      width: 64px;
      height: 100px;
      background: url(../img/index/memberscard.jpg) 0 0 no-repeat;
      background-size: contain; }
    #main-bottom-container #memberscard p {
      margin-bottom: .5rem; }
    #main-bottom-container #memberscard .btn {
      min-width: 14rem;
      padding: .25rem;
      color: #fff; }
      #main-bottom-container #memberscard .btn[data-name="register"] {
        background-color: #FF5C79;
        border-color: #FF5C79; }
        #main-bottom-container #memberscard .btn[data-name="register"]:hover {
          color: #FF5C79;
          background-color: transparent; }
      #main-bottom-container #memberscard .btn[data-name="policy"] {
        background-color: #AB75AA;
        border-color: #AB75AA;}
        #main-bottom-container #memberscard .btn[data-name="policy"]:hover {
          color: #AB75AA;
          background-color: transparent; }
  @media (max-width: 767px){
    #main-bottom-container #memberscard{
      display:block;
      text-align:center;}
      #main-bottom-container #memberscard .btn-container a{
      width:100%;
      margin-bottom:15px;}
  
  }
/* ==========================================================================
   キャッシュレスに関する案内文
   ========================================================================== */
aside#notice_1910 {
  margin-top: -2rem;
  margin-bottom: 3rem; }
  aside#notice_1910 > a {
    display: block;
    margin: 10px 10px 0 10px; }
    aside#notice_1910 > a img {
      width: 100%; }
    aside#notice_1910 > a[href] {
      -webkit-transition: opacity .3s;
      -o-transition: opacity .3s;
      transition: opacity .3s; }
      aside#notice_1910 > a[href]:hover {
        opacity: .75; }




#header .slide-text {
    position: absolute;
    top: 50%;
    left: 5%;
    -webkit-transform: translate(-5%, -50%);
    -ms-transform: translate(-5%, -50%);
    transform: translate(-5%, -50%);
}

#header .slide-text a{
    writing-mode: vertical-rl;
    color:#FF5C79;
    font-size:1.2rem;
    text-decoration:none;
    text-shadow: 
    white 2px 0px 2px, white -2px 0px 2px,
    white 0px -2px 2px, white -2px 0px 2px,
    white 2px 2px 2px, white -2px 2px 2px,
    white 2px -2px 2px, white -2px -2px 2px,
    white 1px 2px 2px, white -1px 2px 2px,
    white 1px -2px 2px, white -1px -2px 2px,
    white 2px 1px 2px, white -2px 1px 2px,
    white 2px -1px 2px, white -2px -1px 2px,
    white 1px 1px 2px, white -1px 1px 2px,
    white 1px -1px 2px, white -1px -1px 2px;
}

@media (min-width: 768px){
#header .slide-text {
    top: 50%;
    left: 15%;
    -webkit-transform: translate(-15%, -50%);
    -ms-transform: translate(-15%, -50%);
    transform: translate(-15%, -50%);
}

#header .slide-text a{
    font-size:2.8rem;
}
}

#line{
  font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro','メイリオ', 'Meiryo', '游ゴシック', 'Yu Gothic', 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
  margin-bottom:50px;
}
#line h4{
  font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro','メイリオ', 'Meiryo', '游ゴシック', 'Yu Gothic', 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
  font-weight:700;
}

#line .line00{
  width:100%;
  max-width:768px;
  text-align:center;
  color:#FFF;
  background-color:#35A461;
  border-radius:5px;
  margin:0 auto 15px;
  padding:0.5em 1em;
}

#line .line01{
  width:100%;
  max-width:768px;
  margin:0 auto 15px;
	position:relative;
	padding-left:5em;
}
#line .line01::before{
	position:absolute;
	left:0;
	content:"";
	display:inline-block;
	width:3.5em;
	height:3.5em;
	background:url(/img/index/line_icon.png) no-repeat;
	background-size:contain;
}
#line .line01 h4,
#line .line02 .lineid{
  color:#00B900;
}


#line .line02{
  display:flex;
  justify-content:center;
  align-items:center;
}
#line .line02 .qr{
  display:flex;
  justify-content:center;
  align-items:center;
  margin-right:1em;
}


#line .line00 p,
#line .line01 p{
  font-weight:400;
  margin-bottom:0;
}
#line .line02 p{
  font-weight:700;
  margin-bottom:0;
}

#header .instagram {
  position: absolute;
  bottom:20px;
  right:20px;
}