body { margin:0; padding:0; font-family: 'Noto Serif JP', serif; font-size:14px; line-height:200%; letter-spacing : 0.01em; font-weight:normal; color:#333;}
p, li { text-align:justify; text-justify: inter-ideograph;}
strong, b { font-weight:bold;}
em { font-style:normal;}
hr { display:none;}
th { font-weight:normal;}
a:link, a:active { color:#111; text-decoration: none;}
a:hover, a:visited { color:#111; text-decoration: underline;}
a:visited { color:#111;}
caption {}

.clearfix:after { font-size:1px; content:"."; display:block; height:0; clear:both; visibility:hidden; }
.clearfix { zoom:1;}

.mb0 { margin-bottom:0 !important;}
.red { color:#C00;}
.f12 { font-size:12px;}
.bold { font-weight: bold;}
.text-L { text-align: left;}
.text-C { text-align: center;}
.text-R { text-align: right;}

.winsize { display: none;}

/* delighter -----*/
/* 基本のスタイル */
.foo.delighter {
transition: all 0.4s ease-out;
opacity: 0;
}

/* スタート時のスタイル */
.foo.delighter.started {
transform: none !important;
opacity: 1;
}

.tabPhoneOnly { display: none;}
.phoneOnly { display: none;}

	
/* header --------------------*/
.header-wrap { width: 100%; height: 120px; position: fixed; z-index: 9;}
.header { height: 120px; position: relative;}
.header h1 { width: 77px; height: 77px; text-indent: -9999px; background: url("../images/logo@2x.png"); background-size: cover; margin-left: 40px; position: absolute; top: 50%; transform: translateY(-40%);}
.openBtn-wrap { position: fixed; z-index: 999; top: 0; right: 0; width: 120px; height: 120px; background-color: #fff; cursor: pointer;}
.openBtn { position: absolute; z-index: 999; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 44px; height: 26px;}
.openBtn.active { }
.openBtn span { display: inline-block; position: absolute;}
.openBtn span:nth-of-type(1), .openBtn span:nth-of-type(2) { display: inline-block; transition: all .4s; position: absolute; left: 0; height: 0.5px; background-color: #333; width: 100%;}
.openBtn span:nth-of-type(1) { top: 0px;}
.openBtn span:nth-of-type(2) { top: 8px;} 
.openBtn span:nth-of-type(3) { top: 16px; font-family: 'Mackay-Regular',serif; font-size: 10px; letter-spacing: 0.3em; text-align: center;}
.openBtn.active span:nth-of-type(1) { transform: translate(6px,12px) rotate(-45deg); width: 80%;}
.openBtn.active span:nth-of-type(2) { transform: translate(6px,4px) rotate(45deg); width: 80%;}
.openBtn.active span:nth-of-type(3) { opacity: 0;}
 

/*ナビゲーションメニュー*/
#g-nav { position: fixed; z-index: 999; top: 0; right: -120%; width: 100%; height: 100vh; background: #fff; transition: all 0.6s;}
#g-nav.panelactive { position: fixed; z-index: 99; right: 0; width: 100%; height: 100vh;}
.g-nav-list { position: absolute; z-index: 99; top: 50%; left: 50%; transform: translate(-50%,-50%); list-style: none; max-width: 900px; width: 100%; text-align: center;  overflow-y: scroll;}
.g-nav-menu { display: flex; justify-content: space-around; max-width: 900px; margin: 0 auto 30px;}
.g-nav-menu ul { width: 270px;}
.g-nav-menu ul p { margin-bottom: 20px;}
.g-nav-menu ul p a { font-family: 'Mackay-Regular',serif; font-size: 16px; padding-left: 20px; margin-bottom: 20px; color: #8aaa02; text-decoration: none;}
.g-nav-menu ul li { margin-bottom: 8px; margin-left: 20px; padding-bottom: 8px; position: relative;}
.g-nav-menu ul li::after { content: ""; display: block; bottom: 0; left: 0; height: 0.5px; position: absolute; transition: all 0.4s; width: 0; border-bottom: 0.5px dotted #8aaa02;}
.g-nav-menu ul li:hover::after { width: calc(100% - 25px);}
.g-nav-menu ul li a { text-decoration: none; font-family: 'Mackay-Regular', 'Noto Serif JP', serif; color: #8aaa02; width: 100%;}

.g-nav-btn ul { display: flex; justify-content: space-around; max-width: 900px; margin: 0 auto 30px;}
.g-nav-btn ul:nth-child(2) { margin-bottom: 0;}
.g-nav-btn ul li { width: 270px; height: 50px; background-color: #8aaa02; position: relative;}
.g-nav-btn ul li p { font-family: 'Mackay-Regular',serif; color: #fff; width: 100%; text-align: center; position: absolute; top: 50%; transform: translateY(-50%);}
.g-nav-btn ul li:hover span { display: block; transition: all 0.4s;}
.sns-btn a li p { width: 20px; height: 20px; text-indent: -9999px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.g-nav-btn span { display: none; position: absolute; top: 50%; transform: translateY(-50%); right: 15px; color: #fff;}
.sns-btn a:nth-child(1) li p { background: url("../images/gn_btn_instagram@2x.png"); background-size: cover;}
.sns-btn a:nth-child(2) li p { background: url("../images/gn_btn_facebook@2x.png"); background-size: contain;
 background-repeat: no-repeat; background-position: center;}
.sns-btn a:nth-child(3) li p { background: url("../images/gn_btn_line@2x.png");  background-size: contain;  background-repeat: no-repeat;}


/* footer --------------------*/
.footer-wrap { background: #8aaa02; padding: 70px 0 50px;}
.footer { text-align: center; color: #fff;}
.footer #page-top { position: fixed; bottom: 0; right: 0; font-size: 80%; z-index: 1; cursor: pointer;}
.footer #page-top a { display: block; background-color: #fff; color: #333; width: 120px; height: 120px; padding: 15px; text-align: center; text-decoration: none; box-sizing: border-box;}
.footer #page-top a span { display: block; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); font-size: 32px; font-weight: 100; }
.footer h1 { width: 88px; height: 88px; text-indent: -9999px; background: url("../images/logo@2x.png"); background-size: cover; margin: 0 auto; margin-bottom: 30px;}
.footShop { display: flex; justify-content: center; margin-bottom: 25px;}
.footShop p:first-child::after { color: #fff; content: "/"; float: right; margin: 0 20px 0 20px; display: block;}
.footShop p { font-family: 'Noto Serif JP', serif; color: #fff;}
.footShop p a { color: #fff;}
.foot-linkBtn ul { display: flex; justify-content: space-between; max-width: 900px; margin: 0 auto 30px;}
.foot-linkBtn ul li { width: 270px; height: 50px; border: 1px solid #fff; position: relative;}
.foot-linkBtn ul li:hover span { display: block; transition: all 0.4s;}
.foot-linkBtn ul li p { font-family: 'Mackay-Regular',serif; color: #fff; width: 100%; text-align: center; position: absolute; top: 50%; transform: translateY(-50%);}
.foot-linkBtn span { display: none; position: absolute; top: 50%; transform: translateY(-50%); right: 15px; color: #fff;}
.footMenu { display: flex; justify-content: space-between; max-width: 900px; margin: 0 auto 100px;}
.footMenu ul { width: 270px;}
.footMenu ul p { font-family: 'Mackay-Regular',serif; font-size: 16px; padding-left: 20px; margin-bottom: 20px; color: #fff;}
.footMenu ul li { margin-bottom: 8px; margin-left: 20px; padding-bottom: 8px; position: relative;}
.footMenu ul li::after { content: ""; display: block; bottom: 0; left: 0; height: 0.5px; position: absolute; transition: all 0.4s; width: 0; color: #fff; border-bottom: 0.5px dotted #fff;}
.footMenu ul li:hover::after { width: calc(100% - 20px);}
.footMenu ul li a { font-family: 'Mackay-Regular', 'Noto Serif JP', serif; color: #fff; text-decoration: none;}
.footMenu ul p a { color: #fff; text-decoration: none;}


.footPolicy { display: flex; justify-content: center; margin-bottom: 30px;}
.footPolicy li::before { color: #fff; content: "｜"; float: left; margin: 0 30px 0 0; display: block;}
.footPolicy li:last-child::after { color: #fff; content: "｜"; float: right; display: block;}
.footPolicy li a { font-family: 'Noto Serif JP', serif; color: #fff; margin-right: 30px;}
.copylight { text-align: center;}
.copylight small { color: #fff;}
.copylight a { font-family: 'Noto Serif JP', serif; color: #fff;}

/* policy 個人情報の保護について・利用規約 */
.policy { width:100%; max-width:920px; margin:0 auto; padding:0 60px; margin-bottom: 140px; display: block; overflow: hidden; box-sizing: border-box;}
.policy-mv { width: 100%; height: calc(60vh - 180px); background: url("../images/mainvisual@2x.jpg"); background-size: cover; background-repeat: no-repeat; background-position: top center; display: block; overflow: hidden;position: relative; margin-bottom: 80px;}
.policy h1 { width:100%; margin:0 auto 80px; display: block; overflow: hidden; text-align:center; font-size:24px; line-height:160%; box-sizing: border-box;}

.policy div.child { margin:0 auto 40px; display:block; overflow:hidden;}
.policy div.child:last-child { margin-bottom:0;}
.policy div.child div.inner { margin:0 0 24px; display:block; overflow:hidden;}
.policy div.child div.inner:last-child { margin-bottom:0;}
.policy div.child h2 { margin:0 0 18px; font-size:20px; line-height:160%; font-weight:bold; letter-spacing:0.1em;}
.policy div.child h3 { margin:0 0 18px; font-size:18px; line-height:160%; font-weight:bold; letter-spacing:0.1em;}
.policy div.child p { margin:0 0 18px; line-height: 2.0em;}
.policy div.child p:last-child { margin:0;}
.policy div.child ol li { line-height: 1.5em;}
.policy div.child ul.ul01 { width:100%; display:block; overflow:hidden; font-size:14px; line-height:140%; box-sizing:border-box;}
.policy div.child ul.ul01 li { padding:16px 0; border-top:1px dotted #333; line-height: 1.5em;}
.policy div.child ul.ul01 li:last-child { border-bottom:1px dotted #333;}
.policy div.child ol.ol01 { width:100%; margin:0 0 24px; padding-left:24px; display:block; overflow:hidden; font-size:14px; line-height:160%; box-sizing:border-box;}
.policy div.child ol.ol01 li { padding:16px 0; border-top:1px dotted #333; list-style:decimal;}
.policy div.child ol.ol01 li:last-child { border-bottom:1px dotted #333;}

.policy div.child table { margin:0 0 40px; border:4px solid #CCC; border-collapse:collapse; font-size:14px; line-height:180%; table-layout:fixed; box-sizing:border-box;}
.policy div.child table th { width:120px; padding:20px 16px; border:1px solid #CCC; vertical-align:top; box-sizing:border-box;}
.policy div.child table td { padding:20px 16px; border:1px solid #CCC; vertical-align:top; box-sizing:border-box;}



/* タブレット−1 ++++++++++++++++++++ */
@media print, screen and (max-width:1024px){
/* header [tab01] --------------------*/
  .g-nav-btn ul { max-width: 650px;}
  .g-nav-btn ul li { width: 190px;}
  .g-nav-menu { max-width: 650px;}
  .g-nav-menu ul { width: 190px;}
  .g-nav-menu ul li { margin-left: 10px;}
  .g-nav-menu ul li:hover::after { width: calc(100% - 10px);}
  .g-nav-menu ul p a { padding-left: 10px;}

/* footer [tab01] --------------------*/
  .foot-linkBtn ul { max-width: 650px;}
  .foot-linkBtn ul li { width: 190px;}
  .footMenu { max-width: 650px;}
  .footMenu ul { width: 190px;}
	.footMenu ul li:hover::after { width: 100%;}
}


/* タブレット−2 ++++++++++++++++++++ */
@media print, screen and (max-width:880px){

}


/* スマホ用 ++++++++++++++++++++ */
@media print, screen and (max-width:680px){

/* header [phone] --------------------*/
    .header { height: 80px;}
    .header-wrap { height: 80px;}
    .header h1 { width: 57px; height: 57px; margin-left: 24px; position: absolute; top: 40px;}
    .openBtn-wrap { width: 80px; height: 80px;}
    #g-nav.panelactive { position: fixed; overflow-y: scroll; -webkit-overflow-scrolling: touch;}
    .g-nav-list { height: 100%; padding-top: 100px;}
    .g-nav-menu { display: inline-block; margin-bottom: 30px; width: 70%; max-width: 270px;}
    .g-nav-menu ul { margin-bottom: 30px; width: 100%;}	
    .g-nav-menu ul:last-child { margin-bottom: 0;}
    .g-nav-menu ul li{ width: auto;}
    .g-nav-menu ul li:last-child { margin-bottom: 0;}
    .g-nav-menu ul li:hover::after { width: calc(100% - 20px);}
	
    .g-nav-btn { padding-bottom: 50px;}
    .g-nav-btn ul { display: grid; margin-bottom: 20px; }	
    .g-nav-btn ul li { width: 270px; margin-bottom: 10px;}
    .g-nav-btn ul a:last-child { margin-bottom: 0;}
	
/* footer [phone] --------------------*/
    .footShop { display: inline-block;}
    .footer #page-top a { width: 80px; height: 80px;}
    .footShop p { text-align: center;line-height: 2.0em;}
    .footShop p:first-child::after { display: none;}
    .foot-linkBtn ul { display: inline-block; margin-bottom: 10px; }	
    .foot-linkBtn ul li { width: 270px; margin-bottom: 20px;}
    .footMenu { display: inline-block; margin-bottom: 50px; width: 70%; max-width: 270px;}
    .footMenu ul { margin-bottom: 30px; width: 100%;}
    .footMenu ul:last-child { margin-bottom: 0;}
    .footMenu ul li { width: auto;}
    .footMenu ul li:last-child { margin-bottom: 0;}
    .footMenu ul li:hover::after { width: calc(100% - 20px);}
    .footPolicy li::before { margin-right: 10px;}
    .footPolicy li a { margin-right: 10px;}

/* policy 個人情報の保護について・利用規約 */
    .policy-mv { margin-bottom: 40px;}
    .policy { padding:0 20px; width: 90%; margin-bottom: 80px;}
    .policy h1 { margin-bottom:20px; font-size:18px;}
    .policy div.child { margin-bottom:32px;}
    .policy div.child h2 { font-size:16px; line-height:160%;}
    .policy div.child p { margin:0 0 18px;}
    .policy div.child table { width:100%; border-bottom:3px solid #CCC;}
    .policy div.child table th { width:100%; padding:20px 16px 5px; border:none; display:block; overflow:hidden; font-weight:bold;}
    .policy div.child table td { padding:5px 16px 20px; border:none; border-bottom:1px solid #CCC; display:block; overflow:hidden;}		
}