/*--------------------------------------------------------------------------
header
---------------------------------------------------------------------------*/
header {
display: none;
}
header .pc {
display: block;
}
header.fixed {
display: block;
width: 100%;
padding: 15px 20px;
position: fixed!important;
top: 0!important;
border-bottom: solid 1px #f2f2f2;
background: #fff!important;
z-index: 9999!important;
}
header h1 {
width: 130px;
margin: 0;
}
header ul {
width: calc(100% - 130px);
text-align: right;
align-self: center;
}
header ul li {
display: inline-block;
margin-right: 20px;
position: relative;
}
header ul li::after {
content: "";
display: block;
width: 30px;
height: 30px;
margin: 0 auto;
border-radius: 100%;
background: #f5efe9;
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
left: 0;
right: 0;
opacity: 0;
pointer-events: none;
z-index: -1;
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
}
header ul li:hover::after {
content: "";
display: block;
width: 30px;
height: 30px;
margin: 0 auto;
border-radius: 100%;
background: #f5efe9;
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
left: 0;
right: 0;
opacity: 1;
pointer-events: none;
}
header ul li a {
font-family: 'Shippori Mincho', serif;
font-size: 13px;
line-height: 13px;
}
.sp-menu {
display: none;
}

@media screen and (max-width: 1200px) {
header ul li a {
font-size: 12px;
line-height: 12px;
}
header ul li {
margin-right: 15px;
}
}
@media screen and (max-width: 980px) {
header {
display: block;
padding: 15px 20px;
border-bottom: solid 1px #f2f2f2;
}
header.fixed {
display: block;
width: 100%;
position: relative!important;
top: 0!important;
border-bottom: solid 1px #f2f2f2;
background: #fff!important;
z-index: 9999!important;
}
header h1 {
width: 100%;
margin: 0;
}
header h1 img {
display: block;
width: 100px;
margin: 0 auto;
}
header ul {
display: none;
}
.sp-menu {
display: block;
}
}

.l-header__nav-toggle {
width: 60px;
height: 60px;
display: block;
background: #fff;
border-radius: 100%;
position: fixed;
top: 60px;
right: 70px;
cursor: pointer;
z-index: 1000;
-webkit-transition: all .4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
transition: all .4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s
}

.l-header__nav-toggle div {
position: absolute;
top: 50%;
left: 50%;
margin-top: -1px;
margin-left: -10px;
height: 2px;
width: 20px;
background-color: #c3ad8d!important;
-webkit-transform-origin: center left;
transform-origin: center left
}

.l-header__nav-toggle div:nth-child(1) {
-webkit-transform: translate(0px, -5px) scale(1, 1);
transform: translate(0px, -5px) scale(1, 1)
}

.l-header__nav-toggle div:nth-child(2) {
-webkit-transform: translate(0px, 0px) scale(0.8, 1);
transform: translate(0px, 0px) scale(0.8, 1)
}

.l-header__nav-toggle div:nth-child(3) {
-webkit-transform: translate(0px, 5px) scale(0.9, 1);
transform: translate(0px, 5px) scale(0.9, 1)
}

.l-header .nav-open .l-header__nav-toggle::before {
background: #fff
}

@media only screen and (max-width: 1200px) {

.l-header__nav {
margin: 48px 0 0 56px
}

.l-header__nav__list__item a {
font-size: 1.1rem
}

.l-header__nav-toggle {
width: 50px;
height: 50px;
top: 48px;
right: 56px
}
}

@media only screen and (max-width: 960px) {
.l-header {
height:100vh;
height: 100svh
}

.l-header__nav {
display: none
}

.l-header__nav-toggle {
width: 50px;
height: 50px;
top: 10px;
right: 10px;
}

.l-header__nav-toggle div {
height: 1px
}

.l-header__nav-toggle div:nth-child(1) {
-webkit-transform: translate(0px, -4px) scale(1, 1);
transform: translate(0px, -4px) scale(1, 1)
}

.l-header__nav-toggle div:nth-child(2) {
-webkit-transform: translate(0px, 0px) scale(0.8, 1);
transform: translate(0px, 0px) scale(0.8, 1)
}

.l-header__nav-toggle div:nth-child(3) {
-webkit-transform: translate(0px, 4px) scale(0.9, 1);
transform: translate(0px, 4px) scale(0.9, 1)
}
}

@media only screen and (max-width: 768px) {
}




.modal-nav__cont {
width: 100%;
height: 100vh;
vertical-align: top !important;
text-align: left;
position: relative
}

.modal-nav__cont .modal-nav__main {
width: 100%;
height: 100svh;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
position: absolute;
top: 0;
left: 0;
}

.modal-nav__cont .modal-nav__list__item a {
padding: 20px 0;
display: inline-block;
letter-spacing: 0.05em;
line-height: 1;
color: #404040;
font-family: 'Shippori Mincho', serif;
font-weight: 400;
font-size: 1.8rem;
position: relative;
cursor: pointer
}

.modal-nav__cont .modal-nav__list__item a::after {
content: "";
width: 0;
height: 1px;
background: #404040;
position: absolute;
left: 0;
bottom: .45em;
-webkit-transition: all .4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
transition: all .4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s
}

.modal-nav__cont .modal-nav__list__item a:hover::after {
width: 100%
}

.modal-nav__cont .remodal-close {
width: 60px;
height: 60px;
position: absolute;
top: 60px;
right: 70px;
z-index: 100000000;
border: 1px solid rgba(0,0,0,.1);
border-radius: 100%
}

.modal-nav__cont .remodal-close::before,.modal-nav__cont .remodal-close::after {
content: "";
width: 20px;
height: 2px;
background: #333;
position: absolute;
top: 50%;
left: calc(50% - 10px)
}

.modal-nav__cont .remodal-close::before {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg)
}

.modal-nav__cont .remodal-close::after {
-webkit-transform: rotate(45deg);
transform: rotate(45deg)
}

@media only screen and (max-width: 1200px) {
.modal-nav__cont .modal-nav__list__item a {
font-size:1.4rem
}

.modal-nav__cont .remodal-close {
width: 50px;
height: 50px;
top: 48px;
right: 56px
}
}

.modal-nav__cont .modal-nav__main {
padding-left: 0;
left: 0;
}

.modal-nav__cont .modal-nav__list__item a {
font-size: 16px;
}

.modal-nav__cont .remodal-close {
width: 50px;
height: 50px;
top: 20px;
right: 20px;
background: #c3ad8d!important;
}

.modal-nav__cont .remodal-close::before,.modal-nav__cont .remodal-close::after {
height: 1px;
background: #fff;
}
}

@-webkit-keyframes toggle {
0% {
-webkit-transform: translateY(-116px);
transform: translateY(-116px)
}

100% {
-webkit-transform: translateY(0);
transform: translateY(0)
}
}

@keyframes toggle {
0% {
-webkit-transform: translateY(-116px);
transform: translateY(-116px)
}

100% {
-webkit-transform: translateY(0);
transform: translateY(0)
}
}



/*--------------------------------------------------------------------------
hero
---------------------------------------------------------------------------*/
#hero {
width: 100%;
height: 100svh;
background-image: url(../img/hero/main.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
position: relative;
}
#hero .copy {
position: absolute;
left: 70px;
bottom: 10%;
}
#hero .copy .txt {
display: inline-block;
padding: 10px 0 10px 10px;
position: relative;
z-index: 3;
overflow: hidden;
}

#hero .copy .txt::before {
content: "";
display: block;
width:95%;
height: 100%;
background: #fff;
position: absolute;
top: 0;
left: 0;
z-index: -1;
animation-name: box_slide;
animation-duration:1.5s;
animation-fill-mode: forwards;
transform: translateX(-100%);
-webkit-transform:  translateX(-100%);
}
@keyframes box_slide {
0% {
ransform: translate(-100%,0);
-webkit-transform: translate(-100%,0);
}
100% {
transform: translate(0,0);
-webkit-transform: translate(0,0);
}
}
#hero .copy .txt strong{
opacity: 0;
filter: blur(10px);
animation: letter-glow 0.7s 0s ease both, blur 2s 0s ease both;
font-size: 60px;
line-height: 60px;
font-family: 'Shippori Mincho', serif;
font-weight: normal;
animation-delay: 0.9s;
}
@keyframes letter-glow{
0%   {
  opacity: 0;
  text-shadow: 0px 0px 1px rgba(255,255,255,0.1);
}
66%  {
  opacity: 1;
  text-shadow: 0px 0px 20px rgba(255,255,255,0.9);
}
77%   { opacity: 1;  }
100% {
  opacity:0.7;
  text-shadow: 0px 0px 20px rgba(255,255,255,0.0);
}
}
@keyframes blur {
0% {
  opacity: 0;
  filter: blur(10px);
}
100% {
  opacity: 1;
  filter: blur(0);
}
}

#hero .copy .txt:first-child {
margin-bottom: 15px;
}

@media screen and (max-width: 768px) {
#hero {
width: 100%;
height: calc(100svh - 68px);
background-image: url(../img/hero/main-sp.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
position: relative;
}
#hero .copy {
position: absolute;
left: 20px;
bottom: 10%;
}
#hero .copy .txt strong{
opacity: 0;
filter: blur(10px);
animation: letter-glow 0.7s 0s ease both, blur 2s 0s ease both;
font-size: 30px;
line-height: 30px;
font-family: 'Shippori Mincho', serif;
font-weight: normal;
animation-delay: 0.2s;
}
#hero .copy .txt:first-child {
margin-bottom: 8px;
}
}

#hero .scrollcont {
width: 13px;
text-align: center;
z-index: 100;
position: absolute;
right: 70px;
bottom: 0;
}

#hero .scrollcont .scroll {
height: 53px;
text-align: center;
z-index: 10;
overflow: hidden;
position: relative
}

#hero .scrollcont .scroll::before {
content: "";
display: block;
width: 1px;
height: 53px;
background: #fff;
position: absolute;
bottom: 0;
left: 50%
}

#hero .scrollcont .scroll::after {
content: "";
display: block;
width: 1px;
height: 53px;
background: rgba(51,51,51,1);
position: absolute;
bottom: 0;
left: 50%;
-webkit-animation: scroll 2.2s cubic-bezier(0.42, 0, 0.58, 1) infinite;
animation: scroll 2.2s cubic-bezier(0.42, 0, 0.58, 1) infinite
}

#hero .scrollcont p {
font-family: 'Cinzel', serif;
font-size: 16px;
line-height: 1;
color: #fff;
position: absolute;
left: 13px;
top: -65px;
text-shadow:0px 0px 15px #000;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
-webkit-transform-origin: left top;
transform-origin: left top
}

@media only screen and (max-width: 960px) {
#hero .scrollcont {
width: 13px;
text-align: center;
z-index: 5;
position: absolute;
right: 30px;
bottom: 0;
}
}

@-webkit-keyframes scroll {
0%,6% {
-webkit-transform: translateY(-53px);
transform: translateY(-53px)
}

33%,66% {
-webkit-transform: translateY(0);
transform: translateY(0)
}

94%,100% {
-webkit-transform: translateY(53px);
transform: translateY(53px)
}
}

@keyframes scroll {
0%,6% {
-webkit-transform: translateY(-53px);
transform: translateY(-53px)
}

33%,66% {
-webkit-transform: translateY(0);
transform: translateY(0)
}

94%,100% {
-webkit-transform: translateY(53px);
transform: translateY(53px)
}
}

@-webkit-keyframes scroll_sp {
0%,6% {
-webkit-transform: translateY(-60px);
transform: translateY(-60px)
}

33%,66% {
-webkit-transform: translateY(0);
transform: translateY(0)
}

94%,100% {
-webkit-transform: translateY(60px);
transform: translateY(60px)
}
}

@keyframes scroll_sp {
0%,6% {
-webkit-transform: translateY(-60px);
transform: translateY(-60px)
}

33%,66% {
-webkit-transform: translateY(0);
transform: translateY(0)
}

94%,100% {
-webkit-transform: translateY(60px);
transform: translateY(60px)
}
}


/*--------------------------------------------------------------------------
slider
---------------------------------------------------------------------------*/

.sample-slider .swiper-wrapper{
    transition-timing-function: linear;
}
    .sample-slider{
        width:100%;
    }
    .sample-slider img{
        width: 100%;
    }



/*--------------------------------------------------------------------------
lead
---------------------------------------------------------------------------*/
.lead {
width: 86.6666%;
max-width: 700px;
margin: 0 auto;
text-align: center;
position: relative;
}
.lead .dec {
width: 100%;
position: absolute;
left: 0;
right: 0;
text-align: center;
z-index: -1;
}
.lead p.copy {
font-family: 'Shippori Mincho', serif;
font-size: 36px;
font-weight: normal;
line-height: 1.6em;
}
.lead p.copy br {
display: none;
}
.lead p {
font-size: 17px;
line-height: 2.5em;
letter-spacing: 0;
}
.lead p br.pc {
display: block!important;
}
.lead p br.sp {
display: none;
}


@media screen and (max-width: 768px) {
.lead {
text-align: left;
}
.lead .dec {
width: 100%;
position: absolute;
left: 0;
right: 0;
text-align: center;
}
.lead {
}
.lead p.copy {
padding-top: 30px!important;
font-family: 'Shippori Mincho', serif;
font-size: 23px;
font-weight: normal;
line-height: 1.5em;
}
.lead p.copy br {
display: none;
}
.lead p {
margin-bottom: 20px;
font-size: 14px;
line-height: 2em;
}
.lead p br {
display: none;
}
}

.movie {
width: 90%;
max-width: 800px;
margin: 0 auto;
position: relative;
cursor: pointer;
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
}

.movie:hover {
box-shadow: 0px 0px 15px 3px #b0b0b0;
}

.movie:hover::after {
opacity: 0;
}


.movie::after {
content: "";
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: #000;
opacity: 0.6;
z-index: 1;
pointer-events: none;
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
}
.movie .icon {
width: 10%;
margin: 0 auto;
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
left: 0;
right: 0;
z-index: 10;
pointer-events: none;
}
.movie-txt {
text-align: center;
font-family: 'Junge', cursive;
font-size: 20px;
letter-spacing: 0.1em;
}

@media screen and (max-width: 1040px) {
  .modal-video-close-btn {
    width: 30px!important;
    height: 30px!important;
    top: -30px!important;
    right: 10px!important;
  }
}

@media screen and (max-width: 768px) {
.movie .icon {
width: 15%;
margin: 0 auto;
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
left: 0;
right: 0;
z-index: 10;
pointer-events: none;
}
.movie-txt {
font-size: 16px;
}
}


/*--------------------------------------------------------------------------
history
---------------------------------------------------------------------------*/
#history {
padding: 80px 0;
position: relative;
}
#history::after {
content: "";
display: block;
width: 80%;
height: 100%;
background: #f8f4f2;
position: absolute;
top: 0;
left: 0;
}

#history .label {
font-size: 12px;
position: relative;
opacity: 0.6;
}
#history .label::after {
content: "";
display: block;
width: 250px;
height: 1px;
position: absolute;
top: 50%;
left: 0;
background: #000;
opacity: 0.6;
}
#history .label span {
display: inline;
padding-right: 10px;
font-size: 12px;
position: relative;
background: #f5efe9;
z-index: 10;
}

#history #swiper-history {
overflow: hidden;
position: relative;
}
#history #swiper-history .intro {
max-width: 55%;
flex: 0 1 55%;
}
#history #swiper-history .cover {
max-width: 45%;
flex: 0 1 45%;
padding-left: 5%;
align-self: center;
}

#history .intro h2 {
position: relative;
font-family: 'Shippori Mincho', serif;
font-size: 40px;
font-weight: normal;
line-height: 1.6em;
}
#history #swiper-history .intro p {
line-height: 2.4em;
}
#history #swiper-history .controll {
width: 316px;
height: 60px;
margin: 0 auto;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
position: relative;
z-index: 1;
}
#history #swiper-history .controll .swiper-button-prev {
margin-top: 0!important;
background-image: url("../img/history/arrow.svg");
background-size: cover;
width: 60px;
height: 60px;
position: absolute;
top: 0;
left: 0;
}
#history #swiper-history .controll .swiper-button-next {
margin-top: 0!important;
background-image: url("../img/history/arrow.svg");
background-size: cover;
width: 60px;
height: 60px;
position: absolute;
top: 0;
right: 0;
-webkit-transform: scale(-1, 1);
transform: scale(-1, 1);
}
#history #swiper-history .swiper-button-prev:after, #history #swiper-history .swiper-button-next:after {
display: none;
}
.swiper-pagination-fraction {
line-height: 50px;
pointer-events: none;
color: #c2ad8c!important;
}
.swiper-pagination > * {
color: #c2ad8c!important;
}

@media screen and (max-width: 1400px) {
#history {
padding: 50px 0;
position: relative;
}
#history .intro h2 br {
display: none;
}
}

@media screen and (max-width: 1300px) {
#history #swiper-history .intro p br {
display: none;
}
}

@media screen and (max-width: 900px) {
#history #swiper-history .intro {
max-width: 100%;
flex: 0 1 100%;
margin-bottom: 30px;
}
#history .intro h2{
position: relative;
font-family: 'Shippori Mincho', serif;
font-size: 28px;
line-height: 1.6em;
}
#history #swiper-history .intro p {
font-size: 14px;
line-height: 1.8em;
letter-spacing: 0;
}
#history #swiper-history .cover {
max-width: 100%;
flex: 0 1 100%;
padding-left: 0;
}
#history #swiper-history .cover img {
display: block;
width: 100%;
max-width: 400px;
margin: 0 auto;
}
}
@media screen and (max-width: 768px) {
#history #swiper-history .intro {
margin-bottom: 20px;
}
#history .intro h2{
position: relative;
font-family: 'Shippori Mincho', serif;
font-size: 24px;
line-height: 1.6em;
}
#history #swiper-history .cover img {
max-width: initial;
}
#history #swiper-history .controll {
width: 240px;
height: 60px;
margin: 0 auto;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
position: relative;
}
}

/*--------------------------------------------------------------------------
wedding
---------------------------------------------------------------------------*/
#wedding {
text-align: center;
position: relative;
}
#wedding .dec { 
font-family: 'Junge', cursive;
font-size: 40px;
line-height: 40px;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
position: absolute;
top: -25px;
left: 60px;
color: #c2ad8c;
z-index: 0;
}
#wedding h2 {
position: relative;
font-family: 'Shippori Mincho', serif;
font-size: 32px;
font-weight: normal;
line-height: 1.6em;
}
#wedding .situation {
max-width: 900px;
margin: 0 auto;
position: relative;
}
#wedding .situation li {
max-width: 21%;
flex: 0 1 21%;
}
#wedding .situation li .cover img {
border-radius: 100%;
}
#wedding .situation li p {
margin-top: 10px;
font-size: 14px;
line-height: 1.6em;
}

@media screen and (max-width: 1200px) {
#wedding .dec { 
font-family: 'Junge', cursive;
font-size: 40px;
line-height: 40px;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
position: absolute;
top: -25px;
left: 0;
color: #c2ad8c;
z-index: 0;
}
}

@media screen and (max-width: 768px) {
#wedding {
text-align: left;
}
#wedding .dec { 
font-family: 'Junge', cursive;
font-size: 40px;
line-height: 40px;
-ms-writing-mode: initial;
writing-mode: initial;
position: absolute;
top: -20px;
color: #c2ad8c;
z-index: 1;
opacity: 0.2;
}
#wedding h2 {
font-size: 24px;
line-height: 1.6em;
}
#wedding .situation li {
max-width: 100%;
flex: 0 1 100%;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
justify-content: space-between;
-webkit-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-ms-flex-wrap: wrap;
-o-flex-wrap: wrap;
flex-wrap: wrap;
padding: 15px 0;
border-bottom: 1px dotted #d3d3d3;
}
#wedding .situation li:first-child {
border-top: 1px dotted #d3d3d3;
}
#wedding .situation li .cover {
width: 80px;
align-self: center;
}
#wedding .situation li p {
width: calc(100% - 95px);
margin-top: 0;
align-self: center;
font-size: 13px;
}
#wedding .situation li p br {
display: none;
}
}

/*--------------------------------------------------------------------------
episode
---------------------------------------------------------------------------*/
#episode {
padding: 4%;
box-shadow: 0 0 0 1px #efefef inset;
border-radius: 3px;
}
#episode .dec {
font-family: 'Junge', cursive;
font-size: 50px;
line-height: 50px;
}
#episode h2 {
display: inline;
padding-left: 10px;
font-size: 12px;
line-height: 12px;
font-weight: normal;
vertical-align: super;
}
#episode ul li {
max-width: 30%;
flex: 0 1 30%;
margin-bottom: 40px;
position: relative;
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
}
#episode ul li:hover {
opacity: 0.5;
}

#episode ul li img {
border-radius: 6px;
}
#episode ul li p {
display: inline-block;
margin-top: 20px;
padding-bottom: 5px;
text-align: left;
}
#episode ul li p .link {
width: 18px;
height: 18px;
padding-left: 3px;
vertical-align: middle;
}

#episode .btn-more {
text-align: center;
}
#episode .btn-more a {
display: inline-block;
margin: 0 auto;
padding-bottom: 5px;
border-bottom: dotted 2px #333;
text-align: center;
font-weight: bold;
}


@media screen and (max-width: 980px) {
#episode ul li p {
font-size: 13px;
}
#episode ul li p .link {
width: 15px;
height: 15px;
padding-left: 3px;
vertical-align: middle;
}

#episode .btn-more a {
font-size: 14px;
}
}

@media screen and (max-width: 900px) {
#episode {
padding: 0;
box-shadow: none;
border-radius: 0;
}
#episode .dec {
display: block;
margin: 0 auto 10px;
font-family: 'Junge', cursive;
font-size: 40px;
line-height: 40px;
text-align: center;
}
#episode h2 {
display: block;
margin: 0 auto;
padding-left: 0;
font-size: 12px;
line-height: 12px;
font-weight: normal;
vertical-align: super;
text-align: center;
}
#episode ul li {
max-width: 47%;
flex: 0 1 47%;
margin-bottom: 25px;
position: relative;
}
#episode ul li:last-child {
margin-bottom: 0;
}
#episode ul li p {
display: inline-block;
margin-top: 15px;
padding-bottom: 3px;
font-size: 12px;
letter-spacing: 0;
}
}
@media screen and (max-width: 768px) {
#episode .dec {
display: block;
margin: 0 auto 10px;
font-family: 'Junge', cursive;
font-size: 32px;
line-height: 32px;
text-align: center;
}
#episode ul li p {
margin-top: 10px;
font-size: 10px;
}
#episode ul li .plus {
padding-left: 5px;
font-size: 10px;
}
#episode .btn-more a {
font-size: 13px;
}
}

/*--------------------------------------------------------------------------
vow
---------------------------------------------------------------------------*/
#vow {
text-align: center;
}
#vow .vis {
width: 100%;
height: 500px;
background-image: url("../img/vow/main.jpg");
background-size: cover;
vertical-align: middle;
position: relative;
}
#vow .vis::before {
content: "";
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: #000;
opacity: 0.8;
}

#vow .vis img {
display: block;
width: 200px;
margin: 0 auto;
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
left: 0;
right: 0;
}

#vow h2 {
color: #c2ad8c;
font-size: 10px;
font-weight: normal;
line-height: 10px;
}
#vow h2 + span {
display: block;
margin-top: 8px;
color: #c2ad8c;
font-family: 'Junge', cursive;
font-size: 40px;
line-height: 40px;
letter-spacing: 0;
}
#vow .lead {
line-height: 2.8em;
}

#vow .staff .label h3 {
font-family: 'Shippori Mincho', serif;
font-size: 20px;
line-height: 20px;
font-weight: normal;
}
#vow .staff .staff-list::before {
content: "";
display: block;
width: 30%;
order: 1;
}
#vow .staff .staff-list::after {
content: "";
display: block;
width: 30%;
}
#vow .staff .staff-list li {
max-width: 30%;
flex: 0 1 30%;
}
#vow .staff .staff-list li .cover {
overflow:hidden; 
position: relative;
}
#vow .staff .staff-list li .cover::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border: solid 0 rgba(255,255,255,.5);
-webkit-transition: all .4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
transition: all .4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s
}

#vow .staff .staff-list li .cover:hover::after {
border-width: 1.5rem
}

#vow .staff .staff-list li .cover img {
display: block;
-webkit-transition: all .4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
transition: all .4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s
}

#vow .staff .staff-list li .cover:hover img {
-webkit-transform: scale(1.1) rotate(1deg);
transform: scale(1.1) rotate(1deg);
-webkit-filter: brightness(1.1);
filter: brightness(1.1)
}



#vow .staff .staff-list li .intro {
width: 90%;
margin-top: -60px;
padding: 20px;
background: #fff;
position: relative;
z-index: 0;
text-align: left;
}
#vow .staff .staff-list li .intro p {
font-size: 14px;
line-height: 1.7em;
}
#vow .staff .staff-list li .intro .name {
margin-top: 10px;
font-family: 'Junge', cursive;
font-size: 11px;
line-height: 11px;
opacity: 0.6;
position: relative;
}
#vow .staff .staff-list li .intro .name::after {
content: "";
display: inline-block;
width: 10px;
height: 10px;
background-image: url("../img/vow/arrow.svg");
background-size: contain;
vertical-align: middle;
position: absolute;
top: 0;
right: 0;
}


@media screen and (max-width: 768px) {
#vow .vis {
width: 100%;
height: 250px;
background-image: url("../img/vow/main-sp.jpg");
background-size: cover;
vertical-align: middle;
}
#vow .vis img {
width: 130px;
}
#vow h2 + span {
font-size: 30px;
line-height: 30px;
}
#vow .lead {
text-align: left;
line-height: 2em;
}
#vow .lead br {
display: none;
}
#vow .staff .staff-list::before {
content: "";
display: block;
width: 47%;
order: 1;
}
#vow .staff .staff-list::after {
content: "";
display: block;
width: 47%;
}
#vow .staff .staff-list li {
max-width: 47%;
flex: 0 1 47%;
margin-bottom: 10px;
}
#vow .staff .staff-list li .cover::after {
border-width:0
}
#vow .staff .staff-list li .cover img {
-webkit-transform:none;
transform: none;
-webkit-filter: none;
filter: none
}
#vow .staff .staff-list li .intro {
width: 95%;
margin-top: -30px;
padding: 10px;
}
#vow .staff .staff-list li .intro p {
font-size: 11px;
line-height: 1.6em;
}
#vow .staff .staff-list li .intro .name {
margin-top: 7px;
font-family: 'Junge', cursive;
font-size: 10px;
line-height: 10px;
opacity: 0.6;
}
}

.remodal .vis {
text-align: center;
}
.remodal .vis img {
display: block;
width: 300px;
margin: 0 auto;
}
.remodal .vis p {
display: block;
margin: 20px 0;
font-size: 12px;
line-height: 12px;
}
.remodal .vis b {
display: block;
margin-top: 40px;
font-size: 20px;
line-height: 20px;
}
.remodal .message {
width: 90%;
max-width: 700px;
margin: 40px auto 0;
text-align: left;
font-size: 15px;
line-height: 2em;
}

.remodal button.close_under {
display: block;
width: 90%;
max-width: 250px;
margin: 40px auto 0;
background-color: #fff;
font-size: 14px;
border-radius: 100px;
text-align: center;
border: none;
box-shadow: 0 0 0 1px #c3ad8d inset;
cursor: pointer;
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
}
.remodal button.close_under span {
display: block;
padding: 15px 0;
color: #c3ad8d;
letter-spacing: 0;
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
}
.remodal button.close_under:hover {
background: #c3ad8d;
}
.remodal button.close_under:hover span {
color: #fff;
}

@media screen and (max-width: 768px) {
.remodal .vis img {
display: block;
width: 300px;
margin: 30px auto 0;
}
.remodal .vis b {
display: block;
margin-top: 40px;
font-size: 18px;
line-height: 18px;
}
.remodal .message {
margin: 30px auto 0;
text-align: left;
font-size: 14px;
line-height: 1.8em;
}
.remodal button.close_under {
margin: 40px auto 30px;
}
}


/*--------------------------------------------------------------------------
feature
---------------------------------------------------------------------------*/
#feature {
padding: 100px 0;
position: relative;
}
#feature::before {
content: "";
display: block;
width: calc(100% - 20px);
height: 100%;
position: absolute;
top: 0;
left: 0;
background: #f8f4f2;
z-index: -1;
}
#feature .label {
height: auto;
position: absolute;
top: -40px;
left: 40px;
writing-mode: vertical-rl;
}
#feature .label span {
font-family: 'Junge', cursive;
font-size: 40px;
line-height: 40px;
color: #c2ad8c;
}
#feature .label h2 {
display: inline;
padding-top: 10px;
font-size: 14px;
color: #c2ad8c;
}
#feature li {
margin-bottom: 80px;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
justify-content: space-between;
-webkit-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-ms-flex-wrap: wrap;
-o-flex-wrap: wrap;
flex-wrap: wrap;
}
#feature li:last-child {
margin-bottom: 0;
}
#feature li .cover {
max-width: 55%;
flex: 0 1 55%;
}
#feature li .intro {
max-width: 45%;
flex: 0 1 45%;
align-self: center;
padding-left: 5%;
}
#feature li:nth-child(even) .cover {
padding-left: 5%;
}
#feature li:nth-child(even) .intro {
order: -1;
padding-left: 0;
}
#feature .intro p {
margin-top: 20px;
}

@media screen and (max-width: 1400px) {
#feature .label {
top: -20px;
writing-mode: initial;
}
#feature .label h2 {
display: inline;
padding-top: 0;
padding-left: 10px;
font-size: 14px;
color: #c2ad8c;
vertical-align: super;
}
}

@media screen and (max-width: 768px) {
#feature {
padding: 80px 0;
}
#feature .label {
left: 20px;
}
#feature .cont-m {
width: 100%;
}
#feature li {
margin-bottom: 50px;
}
#feature li:last-child {
margin-bottom: 0;
}
#feature li .cover {
max-width: 90%;
flex: 0 1 90%;
}
#feature li .intro {
max-width: 90%;
flex: 0 1 90%;
margin-top: 20px;
padding: 0 0 0 30px;
align-self: center;
}
#feature li:nth-child(even) .cover {
margin-left: auto;
margin-right: 0;
padding-left: 0;
}
#feature li:nth-child(even) .intro {
margin-left: auto;
margin-right: 0;
padding-left: 0;
padding-right: 30px;
order: 1;
}
#feature li .intro p {
margin-top: 10px;
font-size: 14px;
line-height: 1.8em;
}
}

/*--------------------------------------------------------------------------
voice
---------------------------------------------------------------------------*/
#voice h2 {
content: "";
display: block;
width: 228px;
height: 53px;
margin: 0 auto;
background-image: url("../img/voice/dec.svg");
background-size: contain;
background-repeat: no-repeat;
vertical-align: middle;
font-family: 'Shippori Mincho', serif;
font-size: 18px;
line-height: 53px;
color: #c2ad8c;
text-align: center;
letter-spacing: 0.2em;
}

#voice .menu {
width: 90%;
max-width: 700px;
margin: 0 auto;
}
#voice .menu li {
max-width: 15%;
flex: 0 1 15%;
padding: 10px 0;
box-shadow: 0 0 0 1px #f1efed inset;
text-align: center;
border-radius: 2px;
font-family: 'Junge', cursive;
color: #c3ad8d;
cursor: pointer;
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
}
#voice .menu li.active {
background: #c3ad8d;
color: #fff;
box-shadow: 0 0 0 1px #c3ad8d inset;
}
#voice .menu li:hover {
background: #c3ad8d;
color: #fff;
box-shadow: 0 0 0 1px #c3ad8d inset;
}
#voice .box {
width: 100%;
max-width: 800px;
margin: 0 auto;
}
#voice .box .cont {
display: none;
}
#voice .box #intro-voice1.cont {
display: block;
}
#voice .card {
padding: 30px 80px 60px 80px;
border-left: solid 1px #c3ad8d;
border-right: solid 1px #c3ad8d;
position: relative;
}
#voice .card::before {
content: "";
width: 10px;
height: 100%;
display: block;
border-top: solid 1px #c3ad8d;
border-bottom: solid 1px #c3ad8d;
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
left: -1px;
}
#voice .card::after {
content: "";
width: 10px;
height: 100%;
display: block;
border-top: solid 1px #c3ad8d;
border-bottom: solid 1px #c3ad8d;
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
right: -1px;
}


#voice .card .label {
width: 100%;
margin-bottom: 20px;
text-align: center;
position: relative;
}
#voice .card .label span {
font-family: 'Junge', cursive;
font-size: 15px;
color: #c3ad8d;
}

@media screen and (max-width: 768px) {
#voice h2 {
content: "";
display: block;
width: 180px;
height: 42px;
margin: 0 auto;
background-image: url("../img/voice/dec.svg");
background-size: contain;
background-repeat: no-repeat;
vertical-align: middle;
font-family: 'Shippori Mincho', serif;
font-size: 16px;
line-height: 42px;
color: #c2ad8c;
text-align: center;
letter-spacing: 0;
}
#voice .menu li {
max-width: 32%;
flex: 0 1 32%;
margin-bottom: 8px;
}
#voice .card {
width: 90%;
max-width: 1000px;
margin: 0 auto;
padding: 20px 40px 30px;
}

#voice .card .cover {
width: 100%;
}
#voice .card .cover img {
display: block;
width: 100px;
margin: 0 auto;
}
#voice .card .label {
margin-bottom: 15px;
}
#voice .card p {
font-size: 13px;
line-height: 2em;
}
}


/*--------------------------------------------------------------------------
aside
---------------------------------------------------------------------------*/
aside {
text-align: center;
border-top: dotted 1px #d3d3d3;
}
aside .title span {
display: block;
font-family: 'Junge', cursive;
font-size: 40px;
line-height: 40px;
}

aside .btn {
width: 80%;
max-width: 500px;
margin: 0 auto;
background: #b3a184;
border-radius: 2px;
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
}
aside .btn:hover {
background: #666;
}



aside .btn a {
display: block;
padding: 30px 0;
color: #fff;
}


@media screen and (max-width: 768px) {
aside .btn a {
display: block;
padding: 20px 0;
color: #fff;
}

}





/*--------------------------------------------------------------------------
footer
---------------------------------------------------------------------------*/
footer {
background: #f8f4f2;
text-align: center;
}
footer .label {
background: #f8f4f2;
}
footer .label span {
display: block;
font-family: 'Junge', cursive;
font-size: 40px;
line-height: 40px;
}
footer ul.menu li {
display: inline-block;
padding: 0 10px;
}
footer ul.menu li a {
font-size: 13px;
letter-spacing: 0;
line-height: 13px;
}
footer .txt-link {
}
footer .txt-link a {
font-size: 13px;
line-height: 13px;
text-decoration: underline;
}
footer .copy {
font-family: 'Cinzel', serif;
font-size: 10px;
line-height: 10px;
opacity: 0.6;
}

@media screen and (max-width: 768px) {
footer ul.menu {
width: 90%;
margin: 0 auto;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
justify-content: space-between;
-webkit-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-ms-flex-wrap: wrap;
-o-flex-wrap: wrap;
flex-wrap: wrap;
padding: 0;
position: relative;
}
footer ul.menu li {
max-width: 48%;
flex: 0 1 48%;
padding: 0;
border-bottom: dotted 1px #ceba99;
}
footer ul.menu li:nth-child(1),footer ul.menu li:nth-child(2) {
border-top: dotted 1px #ceba99;
}
footer ul.menu li a {
display: block;
width: 100%;
padding: 20px 0;
}
}
/*--------------------------------------------------------------------------
c-breadcrumb
---------------------------------------------------------------------------*/
.c-breadcrumb {
  padding: 10px 0;
  border-top: solid 1px #e5e5e5;
}
.c-breadcrumb:last-child {
  border-bottom: 0;
}
.c-breadcrumb__list {
  width: calc(100% - 30px);
  margin: 0 auto;
}
.c-breadcrumb__list-item {
  display: inline-block;
  font-size: 12px;
  color: #333;
  line-height: 1;
}
.c-breadcrumb__list-item:first-child::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 13px;
  margin-right: 6px;
  background-image: url("/assets/img/common/icon/home.svg");
  background-size: contain;
  vertical-align: middle;
}
.c-breadcrumb__list-item::after {
  content: "›";
  padding-left: 5px;
}
.c-breadcrumb__list-item:last-child {
  opacity: .6;
}
.c-breadcrumb__list-item:last-child::after {
  display: none;
}
.c-breadcrumb__link {
  text-decoration: underline !important;
  transition: all 0.3s;
}
@media (min-width: 768px) {
  .c-breadcrumb__link:hover {
    color: #c0ac78;
  }
}
@media (max-width: 768px) {
  .c-breadcrumb {
    padding: 2px 0 5px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overflow-scrolling: touch;
    white-space: nowrap;
  }
  .c-breadcrumb__list {
    width: calc(100% - 20px);
  }
  .c-breadcrumb__list-item {
    font-size: 10px;
    letter-spacing: 0;
  }
  .c-breadcrumb__list-item:first-child::before {
    width: 8px;
    height: 8px;
    margin-right: 5px;
  }
}