@charset "UTF-8";
/*
Add transition to containers so they can push in and out.
*/
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@1,500;1,600;1,700;1,800&family=Kaisei+HarunoUmi:wght@700&family=Kaisei+Tokumin:wght@500&family=Noto+Serif+JP:wght@400;700;900&display=swap');
* {
  box-sizing: border-box;
}
h2 {
  margin: 40px 0px;
  padding: 0;
  color: #001f00;
  font-family: 'Noto Serif JP', serif;
  font-weight: normal;
  font-size: 1.6rem;
}
h3 {
  font-family: 'Noto Serif JP', serif;
}
#wrap{
 max-width: 100%;
 position: relative;
 margin:0 auto;
 background-color: #fff;
 text-align: left;
}
.spec {
  font-size: 90%;
  margin: 1em 0 0 0;
  display:flex;
  justify-content: flex-start;
  padding: 0.5em 1em 0.5em;
  background: rgb(249, 248, 248);
  background: linear-gradient(90deg, rgba(249, 248, 248, 1) 0%, rgba(251, 251, 251, 0) 100%);
}
#layout,
#menu,
.menu-link {
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -ms-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
}

/*
This is the parent `<div>` that contains the menu and the content area.
*/
#layout {
    position: relative;
    padding-left: 0;
    padding-bottom:2em;
    min-height: 100vh;
}
    #layout.active #menu {
        left: 150px;
        width: 150px;
    }

    #layout.active .menu-link {
        left: 150px;
    }
    
#main{
  margin:0 auto;
  padding: 0 0 0 !important;
  height:auto;
  background: url(../img/back02.png);
}

#main .gly {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-start;
  margin: 0 auto;
  width: 100%;
  gap: 5px;
  box-sizing:border-box;
}
#main .gly .gly_box {
  width: 33%;
  text-align: center;
  box-sizing:border-box;
  margin: 0 0 1em;
}
  #main .gly .gly_box h4{
  margin: 0.5em 0 0;
  color: #212529;
}
 #main .gly .gly_box p{
  margin: 0 0 0.5em;
  color: #212529;
}
 
#main .gly_box img {
  width: 100%;
  height: 350px;
  padding:2px;
  object-fit: cover;
  border-radius: 0px;
}


#footer.end{
 height: 4em!important;
 margin:0 auto;
 text-align:center;
 font-size:0.8rem;
 color:#FFF;
 background:rgb(196 189 173);
 z-index:2;
}

#footer.end:before{
  content: "";
  display: block;
  width:100%;
  height: 0px;
  background: linear-gradient(90deg, #330033 0%, #97609c 100%);
}

#footer.end .end_txt{
 padding:1em 0;
 margin-bottom:0;
}
/*
The content `<div>` is where all your content goes.
*/
.content {
    margin: 0 auto;
    padding: 2em 2em;
    width: 100%;
    max-width: 1400px;
    line-height: 1.6em;
    background: #ffffff;
}

.header {
    display:flex;
    margin: 0;
    text-align: right;
    background: #fff;
    flex-wrap:wrap;
    justify-content: flex-end;
    align-items: center;
}
    .header .nav2{
    order:1
    }
    .header .nav1 {
    order:2;
    }
    .header .nav1 img{
     width:30px;
     height:auto;
     margin :0 0 0.5em 1em;
}
    .header h1 {
        margin: 0;
        padding: 1rem 3rem 1rem 0;
        font-size: 1.5em;
        font-weight: 600;
        font-family: 'EB Garamond', serif;
        font-style: italic;
        color: #00401d;
    }
    .header p {
      font-weight: 400;
      line-height: 1;
      color: rgb(0, 64, 30);
      padding: 0.5rem 2rem 0.5rem 0;
      margin: 0;
      font-size: 1rem;
      font-family: 'Kaisei Tokumin', serif;
  }
     .header h2 {
        font-weight: 400;
        color: #ccc;
        padding: 0;
        margin-top: 0;
        font-family: 'Noto Serif JP', serif;
    }

    .content-subhead {
      margin: 1.7em 0 0.7em 0;
      font-weight: normal;
      color: #817162;
      line-height: 1.5;
      font-family: 'EB Garamond', serif;
      letter-spacing: 1.2px;
  }
  .content-subhead:after {
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    margin-top: 0.5em;
    background: linear-gradient(90deg, #001f00 0%, #00401e 100%);
}

.content-subhead02 {
    margin: 1.5em 0 1.2em 0;
    font-weight: normal;
    font-size: 1.3rem;
    color: #817162;
}
  br.sp_b {
    display: none;
  }
  br.pc_b {
    display: inline;
  }

/*
The `#menu` `<div>` is the parent `<div>` that contains the `.m_menu` that
appears on the left side of the page.
*/

#menu {
    margin-left: 0; /* "#menu" width */
    padding: 0 0 0;
    width: 100%;
    top: 0;
    bottom: 0;
    z-index: 1; /* so the menu or its navicon stays above all content */
    overflow-y: auto;
    border-right: solid 0px #fff;
    background-image: url("../img/back.png");
    background-color:#330033;
    background-repeat: repeat;
    filter: hue-rotate(176deg) saturate(130%);
    border-bottom: solid 2px #897c5b;
    border-top: solid 2px #897c5b;
}

    /*
    All anchors inside the menu should be styled like this.
    */
    #menu a {
        color: #d0b5d3;
        border: none;
        font-family: 'EB Garamond', serif;
        font-size: 1.1rem;
        font-style: italic;
        letter-spacing: 1.5px;
    }
    #menu span {
    color: #d0b5d3;
    border: none;
    font-family: 'serif';
    font-size: 0.8rem;
    font-weight: normal;
    margin: 0 0 0 1em;
  }
   #menu .ma{
    font-family: 'Monsieur La Doulaise', cursive;
    color: #fff;
    font-size: 1em;
    font-weight: bold;
}
    /*
    Remove all background/borders, since we are applying them to #menu.
    */
     #menu .m_menu,
     #menu .m_menu ul {
        border: none;
        background: transparent;
        padding-right:0.5em;
        list-style: none;
        display: flex;
        justify-content: flex-start;
    }
    /*
    Add that light border to separate items into groups.
    */
    #menu .m_menu ul,
    #menu .m_menu .menu-item-divided {
        border-top: 0 solid #333;
    }
     #menu .m_menu li{
     padding: 0 0 0.7em 0em;
     margin: 5px 10px 0;
     display: flex;
     flex-direction: row;
     align-content: space-between;
     align-items: baseline;
    }
        /*
        Change color of the anchor links on hover/focus.
        */
        #menu .m_menu li a:hover,
        #menu .m_menu li a:focus {
            opacty: 0.8;
        }
     #menu .m_menu li img {
     width:20px;
     height:auto;
     margin :0.2em 0 0.2em 0.8em; 
}
    /*
    This styles the selected menu item `<li>`.
    */
    #menu .m_menu-selected,
    #menu .m_menu-heading {
        opacity: 0.8;
    }
        /*
        This styles a link within a selected menu item `<li>`.
        */
        #menu .m_menu-selected a {
            color: #fff;
        }

    /*
    This styles the menu heading.
    */
    #menu .m_menu-heading {
        font-size: 110%;
        color: #fff;
        margin: 0;
    }

/* -- Dynamic Button For Responsive Menu -------------------------------------*/

/*
The button to open/close the Menu is custom-made and not part of Pure. Here's
how it works:
*/

/*
`.menu-link` represents the responsive menu toggle that shows/hides on
small screens.
*/
.menu-link {
    position: fixed;
    display: block; /* show this only on small screens */
    top: 0;
    left: 0; /* "#menu width" */
    background: #330033;
    font-size: 10px; /* change this value to increase/decrease button size */
    z-index: 10;
    width: 100%;
    height: auto;
    padding: 2.1em 1.6em;


}

    .menu-link:hover,
    .menu-link:focus {
        background: #330033;
    }

    .menu-link span {
        position: relative;
        display: block;
    }

    .menu-link span,
    .menu-link span:before,
    .menu-link span:after {
        background-color: #fff;
        pointer-events: none;
        width: 100%;
        height: 0.2em;
    }

        .menu-link span:before,
        .menu-link span:after {
            position: absolute;
            margin-top: -0.6em;
            content: " ";
        }

        .menu-link span:after {
            margin-top: 0.6em;
        }

.clumn {
 display:flex;
 align-items: center;
 margin: 0 auto 3em;
 width: 100%;
 border-bottom: 1px solid #d5caca;
 padding: 0 0 3em;
 overflow: hidden;
 /*box-shadow: 0px 9px 8px -8px #dedede; */
 border-radius: 0;
}
.clumn img{
  padding: 0 0;
  margin: 0 0 0 0;
  width: 100%;
 }
.clumn img[data-type="h600"]{
  max-height: 600px;
  margin: 0 auto 0;
  width: auto;
 }
.clumn img[data-type="h400"]{
  max-height: 450px;
  margin: 0 auto 0;
  width: auto;
 }
.clumn img[data-type="small"]{
  max-height: 350px;
  margin: 0 auto 0;
  width: auto;
 }
.clumn02 {
    width: 100%;
  }

.clumn02 img {
  float: right;
  margin-left: 20px;
  width:30%;
}

.clearfix {
  clear: both;
}


.clumn:nth-of-type(even) .item p {
  padding: 2em 1.5em 2em 2em;
  margin: 0 0 0 0;
  background: rgb(249,248,248);
  background: linear-gradient(270deg, rgba(249,248,248,1) 0%, rgba(251,251,251,0) 100%);
}

.clumn:nth-of-type(odd) .item p {
  padding: 2em 3em 2em 2em;
  margin: 0 0 0 0;
  background: rgb(249,248,248);
  background: linear-gradient(90deg, rgba(249,248,248,1) 0%, rgba(251,251,251,0) 100%);
  }
.item {
 width:50%;
 z-index: 99;
 display: flex;
 justify-content: space-around;
 flex-direction: column;
}
.item_3{
  width:65%;
 }
 .item_4{
  width:35%;
 }
 .item_4 img {
  margin: 2em 0 1.2em 0!important;
 }
.ribbn {
  position: relative;
  height: 60px;
  margin: 2em 30px 1em;
  padding: 0 0;
  text-align: center;
  padding-top:0.8em;
  color: #fff;
  font-size:1.2rem;
  background: linear-gradient(90deg, #897c5b 0%, #897c5b 100%);
}

/* -- Responsive Styles (Media Queries) ------------------------------------- */

/*
Hides the menu at `48em`, but modify this based on your app's needs.
*/
@media (min-width: 48em) {

    .header {
        padding-left: 0;
        padding-right: 0;
    }

    #layout {
        padding-left: 0; /* left col width "#menu" */
        left: 0;
    }
    #menu {
        left: 150px;
    }

    .menu-link {
        position: fixed;
        left: 150px;
        display:none;
    }

    #layout.active .menu-link {
        left: 150px;
    }
}
@media (max-width: 1066px) {
#main .gly .gly_box {
  width: 32%;
  text-align: center;
    box-sizing:border-box;
}
    #main .gly_box img {
  width: 100%;
  height: 280px;
  padding:2px;
  object-fit: cover;
  border-radius: 0px;
}
}
@media (max-width: 48em) {
    /* Only apply this when the window is small. Otherwise, the following
    case results in extra padding on the left:
        * Make the window small.
        * Tap the menu to trigger the active state.
        * Make the window large again.
    */
    h2 {
      font-size: 1.4rem;
    }
    br.sp_b {
      display: inline;
    }
    br.pc_b {
      display: none;
    }
    #layout.active {
        position: relative;
        left: 150px;
    }
    #menu {
      margin-left: 0;
      position: fixed!important;
      top: 0;
      left: 0;
      font-size: 0.95em;
      z-index: 10;
      width: 100%;
      height: 60px;
      font-weight: bold;
      padding: 12px 0 12px 0;
      display: block;
      overflow-y: auto;
      border-right: solid 0 #fff;
      background-repeat: repeat;
      background-size: 80%;
      background-position: left 0 top 10px,center;
  }
   #menu .m_menu ul {
    display: flex;
    text-align: center;
    justify-content: space-evenly;
    align-items: flex-end;
    padding: 0;
    flex-direction: row;
    flex-wrap: nowrap;
    }
    #menu .m_menu-item{
      height: 30px;
    }
    #menu .m_menu li{
     padding:0;
     margin: 6px;
    }
     #menu .m_menu li img {
     width:20px;
     height:auto;
     margin :0 0.5em 1em 0.5em;
    }
     #menu a {
      font-size: 1rem;
    letter-spacing: 1px;
     }
    #menu span {
      display: none;
    }
    
  #main {
  margin:0 auto;
  padding:0!important;
}
#main .gly {
  display: flex;
  flex-wrap: wrap;
  margin-bottom:0.5em;
}
#main .gly .gly_box {
  display: block;
  width: 100%;
}
 
#main .gly_box img {
  width: 100%;
  height: 220px;
  padding:2px;
  object-fit: cover;
}
  #main .gly_box h4{
  font-size: 90%;
  margin: 0 0 0.3em;
}
    #main .gly_box p{
  font-size: 90%;
  margin: 0 0 0;
}
    .header {
    margin: 0;
    text-align: center;
    padding: 60px 0 0;
    display:flex;
    flex-flow: row wrap-reverse;
    flex-direction: column;
    align-items: center;
    border-bottom: 0px solid #fff;
}

  .header:after{
  content: "";
  display: block;
  width:100%;
  height: px;
  top:0;
  background: linear-gradient(90deg, rgba(2,0,36,1) 0%, #97609c 100%);
}    
 .header .nav1{
 order: 1;
 width:100%;
 }
 
  .header .nav2{
 order: 2;
 }
 
   .header .nav1 img{
     width:20px;
     height:auto;
     margin :0.2em 0.5em 0.2em 0.5em; 
}
        .header h1 {
        padding: 0.6em 0 0.3em 0;
        font-size: 1.6rem;
        font-weight: 300;
        line-height: 1;
    }
    
    .header p{
        font-weight: 300;
        font-size: 0.9rem;
        padding: 0rem 0 0.8rem 0;
        margin-top: 0;
    }

 .header h2 {
        font-weight: 300;
        color: #ccc;
        padding: 0;
        margin-top: 0;
    }
 .content {
    margin: 0 auto;
    padding: 0 0.7em 0 0.7em;
    margin-bottom: 0;
    line-height: 1.6em;
    width: 100%;
}

.content-subhead {
    margin: 1.5em 0 0.7em 0;
    font-weight: normal;
    color: #817162;
    line-height: 1.5;
    text-align:center;
    font-size:1.2rem;
}

 .clumn {
 display:flex;
 flex-direction: column-reverse;
 flex-wrap:wrap-reverse;
 align-items:flex-start;
 overflow: hidden;
}

.clumn img{
 padding: 0 0 0;
}
.clumn img[data-type="h400"] {
    max-height: 400px;
    margin: 0 auto 0;
    width: auto;
}
  .clumn img[data-type="small"] {
    max-height: 300px;
    margin: 0 auto 0;
    width: auto;
}
.clumn02 img {
  float: right;
  margin-left: 20px;
  width:40%;
}
.item {
 order: 2;
 width:100%;
 margin: 0 auto;
 display: flex;
 flex-direction: column;
}

.clumn:nth-of-type(even) .item p {
  padding: 1em 1em 2em 3em;
  margin: 0 0 0 -1em;
}

.clumn:nth-of-type(odd) .item p {
  padding: 2em 1em 2em 1em;
  margin: 0 0 0 0;
  width: 95%;
}
.item_2{
 order: 1;
  width:100%;
}
.item_3{
  width:50%;
 }
 .item_4{
   width:50%;
 }

.ribbn {
  position: relative;
  height: 60px;
  margin: 2em 30px 1em;
  padding: 0 0;
  text-align: center;
  padding-top:5px;
  color: #fff;
  font-size:1.1rem;
  background: linear-gradient(90deg, #897c5b 0%, #bfb7b0 100%);
}

.ribbn:before {
  position: absolute;
  top: 0;
  display: block;
  height: 48px;
  content: '';
  border: 30px solid #897c5b;
}
.ribbn:after {
  position: absolute;
  top: 0;
  display: block;
  height: 48px;
  content: '';
  border: 30px solid #bfb7b0;
}

.ribbn:before {
  left: -40px;
  border-left-width: 20px;
  border-left-color: transparent;
}

.ribbn:after {
  right: -40px;
  border-right-width: 20px;
  border-right-color: transparent;
}
}

/* -- Responsive Styles (Media Queries) ------------------------------------- */

label {
    display: inline-block;
    margin-bottom: .5rem;
}
.form-control {
    display: block;
    width: 100%;
    height: calc(2.25rem + 2px);
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.form-group {
    margin-bottom: 1.5rem;
}
button, input {
    overflow: visible;
}
button, input, optgroup, select, textarea {
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}
textarea.form-control {
    height: auto;
}
button{
  background-color: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  padding: 0;
  appearance: none;
  color: transparent;
}
.btn {
    color:#FFF!important;
    display: inline-block;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 1px solid transparent;
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.5;
    border-radius: .25rem;
    margin:0 0 1em 0;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.btn-group-lg>.btn, .btn-lg {
    padding: 1.2rem 1rem;
    font-size: 1.25rem;
    line-height: 1.5;
    border-radius: .4rem;
}

.btn-info {
    background: #897c5b;
    background: linear-gradient(90deg, #897c5b 0%, #897c5b 100%);
    transition: 1.0s;
}

.btn-info:hover {
    opacity:0.7;
}
.btn-block {
    display: block;
    width: 100%;
}

.btn a{
    color:#FFF!important;
    letter-spacing: 1.2px;
}

.btn-secondary {
    color: #fff;
    background-color: #CCC;
    border-color: #CCC;
}
.btn_dt_box {
  width: auto;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}
.btn_dt {
  position: relative;
  display: inline-block;
  margin: 1rem 1rem 2rem 1rem;
  padding: 10px 20px 10px 0px;
  background: transparent;
  color: rgb(0, 64, 30)!important;
}
.btn_dt a {
  color: rgb(0, 64, 30)!important;
}
.btn_dt:before {
  position: absolute;
  content: '';
  bottom: -3px;
  right: 0;
  width: 0;
  height: 0;
  border: none;
  border-right: solid 20px transparent;
  border-bottom: solid 10px rgb(0, 64, 30);
}
.btn_dt:after {
  position: absolute;
  content: '';
  bottom: -3px;
  right: 10px;
  width: 100%;
  border-bottom: solid 1px rgb(0, 64, 30);
}
@media (max-width: 1400px) {
.content {
    max-width: 1200px;
    width: 100%;
}
}
@media (max-width: 900px) {
#menu .m_menu, #menu .m_menu ul {
    justify-content: center;
}
 #menu span {
    display:none;
  }
}

@media (max-width: 768px) {
#main{
  margin:0 auto;
  padding: 0 0 0 !important;
  height:auto;
  background: none;
}
}
@media (max-width: 700px) {

.btn_dt {
  display: inline-block;
  margin: 0.5rem 1rem 2rem 1rem;
  padding: 10px 20px 10px 0px;
  left: 0%;
}
}

.btn_dt02 {
  position: relative;
  display: inline-block;
  margin: 0 1rem 2rem 1rem;
  padding: 2px 20px 2px 0px;
  background: #FFF;
  border: none;
  color: rgb(0, 64, 30)!important;
}
.btn_dt02 a {
  color: rgb(0, 64, 30)!important;
}
.btn_dt02:before {
  position: absolute;
  content: '';
  bottom: -3px;
  right: 0; 
  width: 0;
  height: 0;
  border: none;
  border-right: solid 10px transparent; 
  border-bottom: solid 10px rgb(196 189 173);
}
.btn_dt02:after {
  position: absolute;
  content: '';
  bottom: -3px;
  right: 10px; 
  width: 100%;
  border-bottom: solid 2px rgb(196 189 173);
}
@media (max-width: 700px) {
.btn-group-lg>.btn, .btn-lg {
  padding: 1.2rem 0.5rem;
  font-size: 1rem;
  line-height: 1.5;
  border-radius: .4rem;
}
}
.shadow {
  filter: drop-shadow(0px 0px 1px hsl(0deg 0% 65.19% / 50%));
}

.shadow02{ filter: drop-shadow(2px 0px 2px rgba(95,99,111,0.6));}

.height{
 height:800px;
}

.center{
 text-align:center;
}

.mt30{
 margin-top:30px;
}

.mb30{
 margin-bottom:30px;
}

.mb20{
 margin-bottom:20px;
}
.more{
 text-align:right;
}

.red_t{
color:#FF0000;
}

.vi_t{
color:#c4bdad;
}


#page_top{
  width: 50px;
  height: 50px;
  position: fixed;
  right: 10px;
  bottom: 55px;
  background: rgb(137 124 91);
  opacity: 0.5;
  border-radius: 50%;
}
#page_top a{
  position: relative;
  display: block;
  width: 50px;
  height: 50px;
  text-decoration: none;
}
#page_top a::before{
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f106';
  font-size: 25px;
  color: #fff;
  position: absolute;
  width: 25px;
  height: 25px;
  top: 0;
  bottom: 12px;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}

.breadcrumbs {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding: 0.5rem 1rem;
    margin-bottom: 0rem;
    list-style: none;
    font-size:0.8rem;
    background: linear-gradient(90deg, #e5e2df 0%, #FFF 100%);
}

.breadcrumbs-item+.breadcrumbs-item {
    padding-left: .5rem;
}
.breadcrumbs a {
    color: #001f00;
}
.breadcrumbs .active {
    color: #817162;
}

.ph_pc {
  display:block;
 }
 .ph_sp {
  display:none;
 }

 @media screen and (max-width: 768px) {
  .swiper-wrapper img {
      width: 100%;
      height: auto;
      max-height: 90vh;
  }
  .ph_pc {
   display:none;
  }
  .ph_sp {
   display:block;
  }
}

.about p {
  margin-top: 0;
  margin-bottom: 1rem;
}
.pre_nxt {
  display:flex;
  width: 100%;
  justify-content: space-between;
}
.next {
  width: 50%;
  text-align: right;
  display: block;
}
.prev {
  width: 50%;
  text-align: left;
  display: block;
}