@charset "utf-8";

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin:0;
	padding:0;
	border:0;
	font-size:100%;
	font:inherit;
	vertical-align:baseline;
}
tr, th, td {
	font-size:100%;
	font:inherit;
	vertical-align:baseline;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display:block;
}
blockquote, q {
	quotes:none;
}
blockquote:before, blockquote:after, q:before, q:after {
	content:'';
	content: none;
}
nav, ul, li {
  list-style:none;
}



* {
   box-sizing: border-box;
}
html {
	font-size:62.5%;
}
body {
   font-family: 游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN","Hiragino Mincho Pro",HGS明朝E,メイリオ,Meiryo,serif;
   background-color: #e6e6e6;
   letter-spacing : 0.2em;
   font-size:1.4rem;
   font-variant-ligatures: no-common-ligatures;	
   -moz-font-feature-settings: "liga" 0, "clig" 0;	
   -webkit-font-feature-settings: "liga" 0, "clig" 0;	
   font-feature-settings: "liga" 0, "clig" 0;
}
header {
   padding: 32px 4% 10px;
   position: fixed;
   top: 0;
   width: 100%;
   background-color: transparent;
   display: flex;
   align-items: center;
}
a {	
   text-decoration: none;
}
.pc-nav {
    margin: 0 0 0 auto;
}
.gnav {
    display: flex;
    height: 2rem;
    font-size:1.5rem;
    font-family: 'Cormorant Garamond';
    font-weight: 600;
}
.gnav > li {/*親階層のみ幅*/
    width: 135px;
}
/*全てのリスト・リンク共通*/
.gnav li {
    list-style: none;
    position: relative;
}
.gnav li a {
    color: #fff;
    display: block;
    height: 4rem;
    line-height: 2rem;
    text-align: center;
    text-decoration: none;
    width: 100%;
}
/*子階層以降共通*/
.gnav li li {
    height: 0;
    overflow: hidden;
    transition: .5s;
}
.gnav li li a {
}
.gnav li:hover > ul > li {
    height: 4rem;
    overflow: visible;
}
.pcmain-visual {
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
   height: 100vh;
   background: url('../img/pc_main.jpg') ;
   background-size: cover;
   background-position: center;
}
.spmain-visual {
   display: none;
}
.pcmain-visual .toplogo {
   margin: 0;
   font-size: 3rem;
   font-weight: normal;
   color: #fff;
   font-family: 'Cormorant Garamond';
   letter-spacing: 0.5em;
   text-shadow:0px 0px 10px #000000;
}
.sp-nav {
   display: none;
}
footer {
   padding: 30px 4% 10px;
   position: fixed;
   bottom: 0;
   width: 100%;
   background-color: transparent;
   color:#fff;
   text-align: center;
}











@media screen and (max-width: 640px) {
.spmain-visual {
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
   height: 100vh;
   width: 100%;
   background: url('../img/sp_main.jpg') ;
   background-size: cover;
   background-position: center;
}
.pcmain-visual {
   display: none;
}



.pc-nav {
    display: none;
}
.sp-nav {
      z-index: 1;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100vh;
      display: block;
      width: 100%;
      background-color: #fff;
      transform: translateY(-100%);
      transition: all .2s ease-in-out;
      font-size:1.7rem;
      font-family: 'Cormorant Garamond';
      font-weight: 600;
}
#hamburger {
      position: relative;
      display: block;
      width: 30px;
      height: 25px;
      margin: 0 0 0 auto;
}
#hamburger span {
      position: absolute;
      top: 50%;
      left: 0;
      display: block;
      width: 100%;
      height: 2px;
      background-color: #fff;
      transform: translateY(-50%);
}
#hamburger::before {
      content: '';
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 2px;
      background-color: #fff;
}
#hamburger::after {
      content: '';
      display: block;
      position: absolute;
      bottom: 0;
      left: 0;
      width: 70%;
      height: 2px;
      background-color: #fff;
}
/*スマホメニュー*/
.sp-nav ul {
      padding: 0;
      margin-top:10%;
      margin-left:5%;
      display: flex;
      flex-direction: column;
      justify-content: top;
      align-items: left;
      height: 100%;
      color: #000;
}
.sp-nav li {
      margin: 0;
      padding: 0;
}
.sp-nav li span {
      font-size: 15px;
}
.sp-nav li a, .sp-nav li span {
      display: block;
      padding: 20px 0;
      color: #000;
}
/*-閉じるアイコンー*/
.sp-nav .close {
      position: relative;
      padding-left: 20px;
}
.sp-nav .close::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 0;
      display: block;
      width: 16px;
      height: 1px;
      background: #000;
      transform: rotate( 45deg );
}
.sp-nav .close::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 0;
      display: block;
      width: 16px;
      height: 1px;
      background: #000;
      transform: rotate( -45deg );
}
.spmain-visual .toplogo {
   margin-top:35%;
   margin-left:3%;
   margin-right:0;
   margin-bottom: 65%;
   font-size: 3rem;
   font-weight: normal;
   color: #fff;
   font-family: 'Cormorant Garamond';
   letter-spacing: 0.3em;
   text-shadow:0px 0px 10px #000000;
}

.toggle {
      transform: translateY( 0 );
      opacity: 1;
}


}