@charset "UTF-8";
@import url('https://fonts.googleapis.com/css?family=Quicksand:300,400,500,700');

@font-face {
  font-family: 'Noto Serif Japanese';
  font-style: normal;
  font-weight: 100;
  src: url(../fonts/NotoSerifCJKjp/NotoSerifCJKjp-ExtraLight.otf) format('opentype');
}
@font-face {
  font-family: 'Noto Serif Japanese';
  font-style: normal;
  font-weight: 200;
  src: url(../fonts/NotoSerifCJKjp/NotoSerifCJKjp-Light.otf) format('opentype');
}
@font-face {
  font-family: 'Noto Serif Japanese';
  font-style: normal;
  font-weight: 400;
  src: url(../fonts/NotoSerifCJKjp/NotoSerifCJKjp-Regular.otf) format('opentype');
 }
@font-face {
  font-family: 'Noto Serif Japanese';
  font-style: normal;
  font-weight: 500;
  src: url(../fonts/NotoSerifCJKjp/NotoSerifCJKjp-Medium.otf) format('opentype');
 }
@font-face {
  font-family: 'Noto Serif Japanese';
  font-style: normal;
  font-weight: 600;
  src: url(../fonts/NotoSerifCJKjp/NotoSerifCJKjp-SemiBold.otf) format('opentype');
 }
@font-face {
   font-family: 'Noto Serif Japanese';
   font-style: normal;
   font-weight: 700;
  src: url(../fonts/NotoSerifCJKjp/NotoSerifCJKjp-Bold.otf) format('opentype');
 }
@font-face {
  font-family: 'Noto Serif Japanese';
  font-style: normal;
  font-weight: 900;
  src: url(../fonts/NotoSerifCJKjp/NotoSerifCJKjp-Black.otf) format('opentype');
 }

html {
  overflow-y: scroll;
  height: 100%;
  width: 100%;
  font-size: 62.5%;
  }

body {

  font-size: 14px;
  font-size: 1.4rem;
  line-height: 1.6;
  letter-spacing: 0.06em; 
  color: #333;
  width: 100%;
  height: 100%;
  font-family: "游ゴシック","Yu Gothic","游ゴシック体","YuGothic","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","Meiryo UI","メイリオ",Meiryo,"ＭＳ Ｐゴシック","MS PGothic", Arial, sans-serif;
  
    /*-webkit-font-smoothing: antialiased;
    font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-tap-highlight-color: transparent;*/ }


#wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0;
  
}


a {
  transition: 0.3s ease-in-out; }

a:link {
  color: #4d5057;
  text-decoration: none; }

a:visited {
  color: #4d5057;
  text-decoration: none; }

a:hover {
  color: #888;
  text-decoration: none; }

.bg_c {
    background-color: #edece6;
}

.gold {
  color: #a2843c !important;
}

.center_c {
  text-align: center !important;
}

.center_l {
  text-align: center !important;
}
 

.mt40 {
   margin-top: 40px !important;
}

.mb40 {
   margin-bottom: 40px !important;
}

.noscript {
  display: none!important;; }

img {
  max-width: 100%;
  height: auto;
  width: auto;
  vertical-align: bottom; }

img[src$=".svg"] {
  width: 100%; }


@media screen and (min-width: 769px) {
  .br-sp {
    display: none!important;; }
 }

@media screen and (max-width: 768px) {
  .br-pc {
    display: none!important;; }
}

@media screen and (min-width: 769px) {

.dsp {
    display: none!important; }

.dpc {
    display: block!important; }
}

    .pu-only--pc {
        display: block!important
    }
    .pu-only--sp {
        display: none!important
    }
    

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

    .pu-only--pc {
        display: none!important
    }
    .pu-only--sp {
        display: block!important
    }
}

@media screen and (max-width: 768px) {
body {
  color: #3c3c3c;
  letter-spacing: 0.03em; 
  line-height: 1.6;
  
}
    .dpc {
        display: none!important
    }

    .dsp {
        display: block!important
    }


.center_c {
  text-align: center !important;
}

.center_l {
  text-align: left !important;
}

.mt40 {
   margin-top: 20px !important;
}

.mb40 {
   margin-bottom: 20px !important;
}
}


p.textwrap {
  line-height: 160%; }

.cf:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden; }

.cf {
  min-height: 1px; }

* html .cf {
  height: 1px;
  /*¥*/
      /*/
height: auto;
overflow: hidden;
/**/ }

.both {
  clear: both; }

ul, li {
  list-style: none; }


.fadein {
	opacity : 0;
	transform : translate(0px, 60px);
	transition : all 600ms;
	}
.fadein.scrollin {
	opacity : 1;
	transform : translate(0px, 0px);
	}

.fadein:nth-of-type(2) {
	-moz-transition-delay:200ms;
	-webkit-transition-delay:200ms;
	-o-transition-delay:200ms;
	-ms-transition-delay:200ms;
	}
.fadein:nth-of-type(3) {
	-moz-transition-delay:400ms;
	-webkit-transition-delay:400ms;
	-o-transition-delay:400ms;
	-ms-transition-delay:400ms;
	}
.fadein:nth-of-type(4) {
	-moz-transition-delay:600ms;
	-webkit-transition-delay:600ms;
	-o-transition-delay:600ms;
	-ms-transition-delay:600ms;
	}
.fadein:nth-of-type(5) {
	-moz-transition-delay:800ms;
	-webkit-transition-delay:800ms;
	-o-transition-delay:800ms;
	-ms-transition-delay:800ms;
	}
.fadein:nth-of-type(5) {
	-moz-transition-delay:1000ms;
	-webkit-transition-delay:1000ms;
	-o-transition-delay:1000ms;
	-ms-transition-delay:1000ms;
	}





.menu {
    position: relative;
    width: 100%;
    height: 50px;
    /*max-width: 1000px;*/
    margin: 0 auto;
    
}


.menu li {
    float: left;
    width: 16.6%; 
    margin: 10px auto;
    height: 20px;
    line-height: 20px;
    
    text-align: center; 
    border-left: solid 1px #bfbfbf;
}

.menu li:first-child {
   border-left: none!important;
}

.menu li a {
    display: block;
    color: #333;
    text-decoration: none;
    letter-spacing: 0.08em;
    -webkit-transition: all 0.6s;
  -moz-transition: all 0.6s;
  -ms-transition: all 0.6s;
  -o-transition: all 0.6s;
  transition: all 0.6s; 
}

.menu li span {
    display: block;
    color: #fff;
}

.menu li a:hover {  
    
    letter-spacing: 0.4em;
    text-decration: none !important;
}



/* 下矢印 */
.init-bottom:after {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    margin: 0 0 2px 15px;
    border-right: 1px solid #fff;
    border-bottom: 1px solid #fff;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

/* floatクリア */
.menu:before,
.menu:after {
    content: " ";
    display: table;
}

.menu:after {
    clear: both;
}

.menu {
    *zoom: 1;
}

.menu > li.menu__single {
    position: relative;
}

li.menu__single ul.menu__second-level {
    position: absolute;
    top: 40px;
    width: 100%;
    background-color: rgba(100,25,35,0.8);
    -webkit-transition: all .2s ease;
    transition: all .2s ease;
}

li.menu__single:hover ul.menu__second-level {
    top: 50px;
    visibility: visible;
    opacity: 1;
}
/* =Basic structure
	-------------------------------------------------------------- */

	.component-inner,
	.site-header-area .component-inner,
	.header-image-area .component-inner {
		margin: 0 auto;
		max-width: 1200px;
		max-width: 120rem;
		padding: 0 20px 0;
		padding: 0 2rem 0;
	}

	/* =Header Layout
	-------------------------------------------------------------- */

	.site-header-area {
                background-color: rgba(255,255,255,0.9);
		border-top: none;
                position: fixed;
                top: 0;
                width: 100%;
               z-index: 1000;
	}

	#header-menu-button {
		display: none;
	}

	/* --------- Header Title Area --------- */

	.header-title-only {
		border: none;
		text-align: left;
		padding: 20px 0;
		padding: 2rem 0;
		width: 100%;
	}

	.header-title-area {
		border: none;
		float: left;
		text-align: left;
		padding: 0;
		width: 40%;
	}

	.header-title-only .site-title-img,
	.header-title-only .site-title,
	.header-title-area .site-title-img,
	.header-title-area .site-title {
		margin-left: 0;
		text-align: left;
		float: left;
		width: 360px;
	}

	

	/* --------- Header Widget Area --------- */
        #header-widget-area img {
                margin: 0;
                text-align: right;
        }
	#header-widget-area {
		float: right;
		width: 40%;
		text-align: right;
		margin-top:20px;
	}

        #header-widget-area img {
        width: 248px;
        height: auto;
        /*margin-top: 7px;
        margin-right: 6px;*/
}
	
	/* --------- Header Image Area (Slide) --------- */

	.header-image-area {
               width: 100%;
	height: auto;
	padding-top: 25px;
	padding-top: 2.5rem;
	}

        .header-image-area .component-inner {
	padding-left: 30px;
	padding-left: 3rem;
	padding-right: 30px;
	padding-right: 3rem;
        }
	/* --------- Navigation Menu --------- */

	#header-nav-area {
		background-color: rgba(255,255,255,0.9);
		text-align: center;
		
		overflow: visible; 
                position: fixed;
                top: 100px;
                width: 100%;
               z-index: 1000;
                -moz-box-shadow: 0px 1px 3px rgba(237, 236, 230, 0.3);
		-webkit-box-shadow: 0px 1px 3px rgba(237, 236, 230, 0.3);
		box-shadow: 0px 1px 3px rgba(237, 236, 230, 0.3); /*177, 194, 119, 0.3);*/
	}



.component-inner {
	display: block;
	position: relative;
	width: 100%;
	height: auto;
}


@media screen and (max-width: 768px) {
/*SPナビ*/



/* =Header Layout
-------------------------------------------------------------- */
.component-inner,
	.site-header-area .component-inner,
	.header-image-area .component-inner {
		margin: 0 auto;
		width: 100%;
                padding: 0
		
	}



.site-header-area {
	
	background-color: #fff;
        position: fixed;
                top: 0;
                width: 100%;
               z-index: 100;
          -moz-box-shadow: 0px 1px 3px rgba(237, 236, 230, 0.3);
		-webkit-box-shadow: 0px 1px 3px rgba(237, 236, 230, 0.3);
		box-shadow: 0px 1px 3px rgba(237, 236, 230, 0.3); /*177, 194, 119, 0.3);*/
}


/* --------- Header Title Area --------- */

.header-title-only,
.header-title-area {
	display: block;
	/*overflow: hidden;*/
	width: 40%;
	/*border-bottom: 1px solid #641923;*/
	text-align: right;
	padding: 0!important;
         float: left;
}

/* Header Logo */
.header-title-only .site-title-img,
.header-title-area .site-title-img {
	display: block;
	/*max-width: 180px;
	max-width: 18rem;*/
	
        width: 180px;
        height: auto;
	line-height: 0;
	margin: -5px 0 0 40px;
}

.header-title-only .site-title-img a,
.header-title-area .site-title-img a {
	display: inline-block;
	width: 100%;
	height: auto;
}

.header-title-only .site-title-img a img,
.header-title-area .site-title-img a img {
	display: inline-block;
	max-width: 100%;
	height: auto;
}
@media screen and (max-width: 400px) {
	.header-title-only .site-title-img a img,
	.header-title-area .site-title-img a img {
		height: 52px;
		width: 124px;
	}
}
/* Header Title Text */
.header-title-only .site-title,
.header-title-area .site-title {
	display: block;
}

.header-title-only .site-title a,
.header-title-area .site-title a {
	font-size: 20px;
	font-size: 2rem;
	line-height: 1.3;
	display: inline-block;
	color: #aaa;
	text-decoration: none;
	word-break: break-all;
}

.header-title-only .site-description,
.header-title-area .site-description {
		display: none;
		padding-top: 12px; 
		padding-top: 1.2rem;
		font-size: 11px;
		font-size: 1.1rem;
		line-height: 1.5;
		font-weight: normal;
		color: #888;
		clear: none;
}

/* --------- Header Widget Area --------- */

#header-widget-area{
	text-align: right;
	line-height: 1.5;
        margin: 0;
	padding: 0;
}

#header-widget-area img {
        width: 140px;
        height: auto;
        margin-top: 4px;
        margin-right: 5px;
	padding: 0!important;
}
	@media screen and (max-width: 400px) {
		#header-widget-area img {
			margin-top:10px;
		}
	}

/* --------- Header Image Area (Slide) --------- */

.header-image-area {
	
	width: 100%;
	height: auto;
	padding-top: 0;
}

.header-image-area .component-inner {
	padding-left: 0;
	padding-right: 0;
}


nav.globalMenuSp {
    position: fixed;
    z-index: 2000;
    top: 0;
    left: 0;
    
    color: #000;
    text-align: center;
    transform: translateY(-100%);
    transition: all 0.6s;
    width: 100%;
}

nav.globalMenuSp ul {
    background-color: rgba(237,236,230,1.0);
    margin: 0 auto;
    padding: 0;
    width: 100%;
}

nav.globalMenuSp ul li {
    font-size: 1.1em;
    list-style-type: none;
    padding: 0;
    width: 100%;
    border-top: 1px solid #fff;
}

nav.globalMenuSp ul li:first-child {
    padding-bottom: 0;
    border-top: none;
}

nav.globalMenuSp ul li a {
    display: block;
    color: #da8d2a;
    padding: 1em 0;
}

nav.globalMenuSp.active {
    transform: translateY(0%);
}


.navToggle {
    display: block;
    position: fixed;
    left: 5px;
    top: 15px;
    width: 30px;
    height: 30px;
    cursor: pointer;
    z-index: 2003;
    background: #da8d2a;
    text-align: center;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
}

.navToggle span {
    display: block;
    position: absolute;
    width: 20px;
    border-bottom: solid 1px #fff;
    -webkit-transition: .35s ease-in-out;
    -moz-transition: .35s ease-in-out;
    transition: .35s ease-in-out;
    left: 5px;
}

.navToggle span:nth-child(1) {
    top: 9px;
}

.navToggle span:nth-child(2) {
    top: 15px;
}

.navToggle span:nth-child(3) {
    top: 21px;
}




/* 最初のspanをマイナス45度に */
.navToggle.active span:nth-child(1) {
    top: 15px;
    left: 5px;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

/* 2番目と3番目のspanを45度に */
.navToggle.active span:nth-child(2),
.navToggle.active span:nth-child(3) {
    top: 15px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
}
}


#content #bottom {
  width: 100%;
  position: relative;
  display: flex;
  }



#content #bottom #menu {
  background: #8b8b8b;
  color: #fff;
  width: 100%;
  margin: 0 auto;
  padding: 30px 0 20px;
  padding-right: 10%;
  padding-left: 10%;
  float: left;
   }

#content #bottom #menu .left {
  width: 50%;
  float: left;
  color: #fff;
  margin-bottom: 20px;
}

#content #bottom #menu .left h3 {
  margin-bottom: 20px;
}

#content #bottom #menu .left h4 {
  font-weight: normal;
  font-size: 1.3rem;
}


#content #bottom #menu .left h4 .tellink {
   /*display: block;*/
   font-family: 'Quicksand', sans-serif;
   font-weight: 400; 
   font-size: 1.6rem;
   color: #fff!important;
}


#content #bottom #menu .right {
  width: 48%;
  float: right;
  color: #fff;
  margin: 35px 0 20px;
  margin-left: 2%;
  padding: 0;
}

#content #bottom #menu .right table {
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  border-collapse: collapse;
  border-spacing: 0;
  font-size: 1.3rem;
}
#content #bottom #menu .right table th {
  display: inline-block;
  width: 20%;
  font-weight: normal;
  -moz-text-align-last: justify;
  text-align-last: justify;
  text-justify: inter-ideograph;
}

#content #bottom #menu .right table td {
  display: inline-block;
  width: 80%;
}

@media screen and (max-width: 768px) {
#content #bottom #menu {
  background: #8b8b8b;
  color: #fff;
  width: 100%;
  margin: 0 auto;
  padding: 30px 0 20px;
  padding-right: 5%;
  padding-left: 5%;
  float: left;
   }


#content #bottom #menu .left {
  width: 100%;
  float: none;
  color: #fff;
  margin-bottom: 20px;
}

#content #bottom #menu .right {
  width: 100%;
  float: none;
  color: #fff;
  margin: 0 0 10px;
  margin-left: 0;
  padding: 0;
}

#content #bottom #menu .right table th {
  display: inline-block;
  width: 20%;
  font-weight: bold;
  -moz-text-align-last: justify;
  text-align-last: justify;
  text-justify: inter-ideograph;
  font-size: 1.2rem;
  text-align: left;
  
}

#content #bottom #menu .right table td {
  display: inline-block;
  width: 80%;
  text-align: left;
  
}

#content #bottom #menu .left h4 .tellink a:link { color: #ffffff !important; }
#content #bottom #menu .left h4 .tellink a:visited { color: #ffffff !important;text-decoration: none !important; }
#content #bottom #menu .left h4 .tellink a:hover { color: #ffffff!important;text-decoration: none !important; }
#content #bottom #menu .left h4 .tellink a:active { color: #ffffff !important; text-decoration: none !important;}
}

    
.footernavi {
    position: relative;
    background: #8b8b8b;
    color: #fff;
    width: 100%;
    height: 80px;
    padding: 0 100px;
    border-top: 1px solid #fff;
}
  
.footernavi ul { 
    width: 16%;
    display: block;
    float: left;
    text-align: center;
}
.footernavi ul:first-child {
    margin-left: 4%;
}
.footernavi ul li a {
    font-family: "EB Garamond", "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Meiryo UI", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
     color: #fff;
     line-height: 80px;
     transition: .2s ease-out;
     
}

.footernavi ul li a:hover {
  color: #333;
  transition: 0.5s ease; }


@media screen and (max-width: 768px) {
.footernavi {
    position: relative;
    background: #8b8b8b;
    color: #fff;
    width: 100%;
    height: auto;
    padding: 0 20px;
    border-top: 1px solid #dcdcdc;
}
.footernavi ul { 
    width: 50%;
    display: block;
    float: left;
    text-align: center;
}
.footernavi ul:first-child {
    margin-left: 0;
}

.footernavi ul li a {
    font-family: "EB Garamond", "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Meiryo UI", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
     color: #fff;
     line-height: 60px;
     transition: .2s ease-out;
     
}
}

footer {
  background: #fff;
  padding: 15px 0;
  text-align: center;
  position: relative;
  }


footer small {
  font-family: 'Quicksand', sans-serif;
   font-weight: 400; 
  font-size: 1.1rem; 
  letter-spacing: 0.04rem;
  color: #000; }

footer #top {
  position: absolute;
  /*position: relative;*/
  background-color:rgba(139,139,139,1.0);
  width: 30px;
  height: 30px;
  right: 15px;
  bottom: 10px;
  text-align: center;
  border-radius: 15px;
    -webkit-border-radius: 15px; 
    -moz-border-radius: 15px;   
   }

footer #top a {
   color: #fff;
   margin: 0 auto;
   font-size: 2rem;
   line-height: 27px;
}

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

footer #top {
  position: absolute;
  /*position: relative;*/
  background-color:rgba(139,139,139,1.0);
  width: 26px;
  height: 26px;
  right: 10px;
  bottom: 10px;
  text-align: center;
  border-radius: 13px;
    -webkit-border-radius: 13px; 
    -moz-border-radius: 13px;   
   }

footer #top a {
   color: #fff;
   margin: 0 auto;
   font-size: 1.8rem;
   line-height: 24px;
}

}

/* floating */
.floating {
	width: 85px;
	position: fixed;
	right: 0;
	top: 50%;
	margin-top: -170px;
	z-index: 9999;
}
.floating li:first-child {
	border-bottom: 1px solid #fff;
}
.floating img {
	width: 100%;
	transition: 0.5s;
}
.floating img:hover {
	opacity: 0.8;
}
.pc {
	displau: block;
}
.sp {
	display: none;
}

@media screen and (max-width: 768px) {
	.floating {
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
		top: auto;
		margin-top: 0;
		z-index: 9999;
	}
	.floating li {
		width: 50%;
		float: left;
	}
	.floating li:first-child {
		border: none;
	}
	.pc {
		display: none;
	}
	.sp {
		display: block;
	}
}