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

/* RESET
----------------------------------------------------------------------------------------------------*/
a,article,body,dd,div,dl,dt,em,form,footer,header,h1,h2,h3,h4,h5,h6,html,i,iframe,img,label,legend,li,nav,ol,p,section,main,span,table,tbody,tfoot,thead,time,tr,th,td,ul,video{font-family:inherit;font-size:100%;font-weight:inherit;font-style:inherit;vertical-align:baseline;white-space:normal;margin:0;padding:0;border:0;outline:0;background:transparent;line-height:1.6;text-align:left}textarea{font-family:inherit;font-size:100%;font-weight:inherit;font-style:inherit;vertical-align:baseline;margin:0;padding:0;border:0;outline:0;background:transparent;line-height:1.6;text-align:left}article,footer,header,nav,section,main{display:block}ol,ul{list-style:none}table{border-collapse:collapse;border-spacing:0}

/* ----------------------------------------------

 * 設定をしなおす

---------------------------------------------- */

html, body { height: 100%;}


body {
  margin: 0 auto;
  padding: 0;
  font-size: 18px;
  line-height: 1.6em;
  font-family: 'Roboto',"游ゴシック Medium", "Yu Gothic Medium","游ゴシック",YuGothic,"ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,sans-serif;
  font-weight: 500;
  color: #05121E;
  -webkit-text-size-adjust: 100%;
  background: #FDF7F1;
  overflow-x: hidden;
}

@media only screen and ( max-width : 768px ) {
  body {font-size: 14px;}
}

table {
  margin : 0;
  border-collapse: collapse;
  border-spacing: 0;
  empty-cells: show;
}

img {
  vertical-align: middle;
  border: none;
}


/* ----------------------------------------------

 * アンカータグの設定

---------------------------------------------- */
a {
  outline:none;
  color: #333;
}

a:hover {
  text-decoration: none;
}


a,a:hover,a:hover img {
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
  text-decoration: none;
}

a:hover {
  filter: alpha(opacity=80);
  -moz-opacity:0.80;
  opacity:0.80;
}


/* ----------------------------------------------

 * 要素を左右中央寄せ

---------------------------------------------- */


img {
    max-width: 100%;
    height: auto;
    width /***/:auto;　/*IE8のみ適用*/
}


@media only screen and ( max-width : 768px ) {
  #header {
    padding: 10px 0;
    height: 60px;
  }
  .h_logo {
    width: 200px;
    position: absolute;
    top: 18px;
    left: 10px;
    z-index: 100;
  }
  #gNav .nav {
    overflow-y: auto;
    height: 100vh;
  }
  .mean-nav .container {
    padding: 0;
  }
  nav li .fa {
    display: none;
  }
}


.mainphoto{
	margin:0 0 120px;
	background:url(../img/bg_mainphoto.jpg) no-repeat;
	background-size:contain;
	position:relative;
	min-height:25vw;
}
.mainphoto_inner{
	position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit- transform: translateY(-50%) translateX(-50%);
  margin: auto;

}


.clearfix:after {  
  content: ".";   
  display: block;   
  height: 0;   
  clear: both;   
  visibility: hidden;  
}  
  
.clearfix { display: inline-table; }  
  
/* Hides from IE-mac \*/  
* html .clearfix { height: 1%; }  
.clearfix { display: block; }  
/* End hide from IE-mac */  


/* ---------------------------------------------------------------------------------------------

　   CONTENTS

--------------------------------------------------------------------------------------------- */
.cover {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
  color: #fff;
}
.centerBoxFix { position: fixed; top: 0; bottom: 0; left: 0; right: 0; margin: auto; width: 100%; height: 20px; line-height: 160%; text-align: center; text-shadow: 0 1px 1px rgba(0,0,0,.3); }
.centerBoxLast { z-index: -1; }

.centerBox { position:relative; margin: auto; width: 80%; max-width: 1200px; line-height: 160%; rgba(0,0,0,.3); }
.centerBox i { height: 120px; padding: 20px; font-size: 100px; transition: .8s; transition-delay: 0; } 
.centerBox div { margin: auto; transition: .8s; transition-delay: .8s; }

/* ▼【修正】背景位置を中央にし、PCでは固定(fixed)にする設定 */
.section1 { 
  height: 100%; 
  background: url(../img/bg_head.jpg) no-repeat; 
  background-size: cover; 
  background-position: center center; /* ど真ん中を基準にする */
  background-attachment: fixed;      /* PC用パララックス */
}

.section2 ,  .section3 ,  .section4 ,  .section5{ height: auto; background: #FDF7F1; padding: 60px 0; z-index: 10; position: relative; }

#menu-wrap { position:fixed; top:10px; right: 20px; z-index: 1; text-align: right; transition: .3s }
#menu { list-style-type: none; max-width: 300px; margin: 0px auto 0px; padding: 0; }
#menu li { width: auto; float: left; margin: 0 0 0 5px; padding: 0; text-align: center; }
#menu li a { display: inline-block; background: #F28500; border: 1px #fff solid; padding: 3px 10px; font-size: 0.8em; -moz-border-radius: 2em;
-webkit-border-radius: 2em;
-o-border-radius: 2em;
-ms-border-radius: 2em; color: #fff; transition: .3s; }
#menu li a:hover { background: #FFAF4F; }

a.btn{ display: inline-block; width: 150px; margin: 10px 0; padding: 16px 10px; border: 1px solid #fff; background: transparent; color: #fff; text-align: center; text-decoration: none; line-height: 1; transition: .3s; }
a.sample16 { position:relative; z-index:2; overflow:hidden }
a.sample16::after { display:block; content:""; position:absolute; z-index:-1; top:50%; left:50%; width:160px; height:160px; margin:-80px 0 0 -80px; border:65px solid rgba(255,255,255,0);  border-radius:50%; transition:.5s }
a.sample16:hover { color:#555 }
a.sample16:hover::after { border-width: 0; border-color:rgba(255,255,255,1); background:#fff }
#page-top i { position: relative; padding-top: 2px; transition: .2s; }
#page-top:hover i { animation: page-top-animation .1s ease 0s infinite alternate; }
@keyframes page-top-animation {
0% {padding-top: 0px; }
100% {padding-top: 3px; }
}

div{
transition: .5s; transition-delay: .5s; 
}

.section1 h2{
position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}

.section2{
padding: 100px 0 0;
}
.section2 h2{
font-size: 2.6em;
margin: 0 0 5px;
text-align: center;
line-height: 120%;
font-weight: 600;
}
.section2 h2::before{
	content:"";
   display: inline-block;
  width: 57px;/*画像の幅*/
  height: 12px;/*画像の高さ*/
  background-image: url(../img/ico_annai.png);
  background-size: contain;
  vertical-align: middle;
  margin: 0 20px 0 0;
}
.section2 h2::after{
	content:"";
   display: inline-block;
  width: 57px;/*画像の幅*/
  height: 12px;/*画像の高さ*/
  background-image: url(../img/ico_annai.png);
  background-size: contain;
  vertical-align: middle;
  margin: 0 0 0 20px;
}
.section2 h3{
font-size: 1.2em;
margin: 0 0 15px;
text-align: center;
line-height: 120%;
}
.section2 h4{
margin: 0 0 100px;
text-align: center;
line-height: 120%;
color: #F28500;
font-size: 1.1em;
}

.annai{
background: url(../img/bg_annai.png);
background-repeat: no-repeat;
background-size: contain;
position: relative;
max-width: 1587px;
width: 96%;
margin: auto;
height: 50vw;
}
.annai ul{
background: rgba(255,255,255,.8);
padding: 20px;
-moz-border-radius: 1em;
-webkit-border-radius: 1em;
-o-border-radius: 1em;
-ms-border-radius: 1em;
box-sizing: border-box;
width: 1000px;
position: absolute;
top: 10vw;
left: 50%;
transform: translate(-50%, 0%);
}
.annai ul li{
position: relative;
margin: 0 0 25px 20px;
}
.annai ul li::before{
  content: '＊';/*何も入れない*/
  display: inline-block;
  position: absolute;
  left: -20px;
}

.topics{
margin: 0 auto;
width: 100%;
}
.topics h2{
margin: 0;
padding: 0;
text-align: center;
}
.topics_inner{
background: #D9CFCA;
padding: 50px 0;
}
.topics_inner ul{
max-width: 1200px;
width: 96%;
margin: auto;
}
.topics_inner ul li{
border-bottom: 1px #fff dotted;
padding: 10px 0;
line-height: 130%;
}
.topics_inner ul li span{
font-size: 0.8em;
display:block;
}
.topics_inner ul li span:nth-of-type(2){
margin: 5px 0 0;
  background: #fff;
  padding: 10px;
  font-size: 0.85em;
  line-height: 130%;
}
.menu_area{
max-width: 1200px;
margin: auto;
}
.menu_area h2{
text-align: center;
margin: 0 0 30px;
}
.row-reverse {
    flex-flow: row-reverse;
}
.menu_en{
	width:1200px;
	display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
justify-content: space-between;
margin:0 0 30px;
}
.menu_en_photo{
	width:609px;
}
.menu_en_txt{
	width:555px;
	position:relative;
}
.menu_en_txt div{
	position:absolute;
	top: 50%;
  left: 0;
  transform: translate(0, -50%);
 
}
.menu_en_txt div h3{
	color:#795845;
	font-size:1.6em;
	font-weight:bold;
	line-height:120%;
	margin:0 0 40px;
	position:relative;
	display:inline-block;
}
.menu_en_txt div h3.ico_m01:after{
	content: '';/*何も入れない*/
  display: inline-block;
  width: 94px;/*画像の幅*/
  height: 65px;/*画像の高さ*/
  background-image: url(../img/ico_menu_en01.png);
  right: -60px;
  position: absolute;
  top: -70px;
}
.menu_en_txt div h3.ico_m02:after{
	content: '';/*何も入れない*/
  display: inline-block;
  width: 94px;/*画像の幅*/
  height: 65px;/*画像の高さ*/
  background-image: url(../img/ico_menu_en02.png);
  left: -30px;
  position: absolute;
  top: -70px;
}
.menu_en_txt div p{
	line-height:120%;
	margin:0 0 20px;
}
.menu_icophoto01{
	display:block;
	text-align:right;
}
.menu_icophoto02{
	display:block;
	text-align:left;
}
.menu_main{
display: block;
margin: 0 0 80px;
}
.menu_inner{
display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
justify-content: space-between;
flex-wrap: wrap;
max-width: 1200px;
margin: 0 auto 90px;
}
.menu_inner dl{
width: 30%;
margin: 0 0 30px;
}
.menu_inner dl dd{
color: #7B5845;
font-weight: bold;
text-align: center;
font-size: 0.9em;
line-height: 120%;
}
.kansyu{
background: #F0DAC4;
box-sizing: border-box;
padding: 20px;
-moz-border-radius: 1em;
-webkit-border-radius: 1em;
-o-border-radius: 1em;
-ms-border-radius: 1em;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
justify-content: space-between;
max-width: 1200px;
margin: auto;
position:relative;
}
.kansyu_ico{
	position:absolute;
	left:-30px;
	top:-30px;
}
.kansyu p:last-of-type{
background: #fff;
padding: 10px;
position: relative;
width: calc(100% - 250px);
}
.kansyu p:last-of-type img{
margin: -20px 0 10px -30px;
display: block;
}
.takagi{
height: 100%;
object-fit: cover;
}

.shopinfo{
	max-width: 1200px;
  margin:0 auto 50px;
}
.shopinfo h2{
	margin:0 0 30px;
}
.shopinfo ul{
display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.shopinfo ul li{
	width:48%;
	margin:0 0 25px;
}
.shopinfo_inner{
	width:100%;
	background-image: url(../img/bg_shop.jpg);
	background-size:cover;
	background-position:bottom;
	padding:60px 0;
}
.shopinfo_inner table{
	width:1200px;
	margin:auto;
}
.shopinfo_inner table th{
	font-weight:bold;
	width:20%;
	border-bottom:1px #CCCCCC dotted;
	padding:20px 0;
}
.shopinfo_inner table td{
	border-bottom:1px #CCCCCC dotted;
	padding:20px 0;
}
.map{
	width:1200px;
	margin: 30px auto;
}

.map h4{
	font-size:2em;
	font-weight:bold;
	margin: 120px auto 30px;
	position:relative;
	text-align:center;
}
.map h4::before{
	content:"";
   display: inline-block;
  width: 72px;/*画像の幅*/
  height: 73px;/*画像の高さ*/
  background-image: url(../img/ico_access.jpg);
  position:absolute;
  top: -40px;
  left: 50%;
  transform: translate(-50%, -50%);
}
.map ul{
	margin:0 0 10px 20px;
}
.map ul li{
	list-style-position:outside;
	list-style-type:decimal;
	margin:0 0 10px;
	font-size:1.1em;
}
.map p{
	font-size:1.1em;
}

.ba_link{
	max-width:856px;
	margin:60px auto;
	display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
justify-content: space-between;
}
.ba_link li{
	width:407px;
}
.fortop{
	text-align:center;
	display:block;
}

.copyright{
	text-align:center;
	width:100%;
	border-top:1px #999999 solid;
	padding:20px 0;
	font-size:0.85em;
}

.pc_only{
	display:block;
}
.smp_only{
	display:none;
}
/* ---------------------------------------------------------------------------------------------

　   SMP

--------------------------------------------------------------------------------------------- */




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

.section2, .section4 {
  max-width: 98%;
  margin:auto;
}
.section2 h2::before , .section2 h2::after{
  content: none;
}
.annai {
  width: 96%;
  margin: auto;
  height: 80vw;
  background-position: bottom;
}
.annai ul{
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80%;
}
.menu_en {
  width: 100%;
  display:block;
}
.menu_en_photo {
  width: 90%;
  margin: 0 auto 30px;
}
.menu_en_photo img{
  width: 100%;
}
.menu_en_txt {
  width: 80%;
  margin: auto;
}
.menu_en_txt div {
  position: inherit;
  width:100%;
  margin:50px auto 50px;
  top:inherit;
  left:inherit;
  transform: inherit;
}
.kansyu_ico {
  left: 0;
}

.shopinfo {
  width: 96%;
}
.topics h2 , .menu_area h2{
width: 30vw;
margin:auto;
}
.shopinfo_inner table {
  width: 96%;
}
.menu_inner dl {
  width: 48%;
}
.map {
  width: 100%;
}
.map ul {
  margin: 0 auto 10px auto;
  width: 88%;
}
.map p {
  width: 96%;
  margin: auto;
}
}


@media only screen and ( max-width : 768px ) {
/* ▼【修正】iPhone対策：背景の固定を解除し、正常なサイズで表示 */
.section1 {
    background-attachment: scroll;
}

.pc_only{
	display:none;
}
.smp_only{
	display:block;
}
.section2 h2 {
  font-size: 8vw;
}
.section2 h4 {
  margin: 0 0 50px;
}
.section4{
	padding: 10px 0 50px;
}
.section5{
	padding:10px 0 30px;
}
.annai {
  width: 96%;
  margin: auto;
  height: 150vw;
  background-position: bottom;
}
.annai ul {
    width: 90%;
  }
.annai ul li {
  font-size: 3.3vw;
}
.menu_en {
    width: 100%;
    display: block;
    margin: 30px auto 30px;
  }
.menu_en_txt {
    width: 90%;
  }
  
.menu_en_txt div h3.ico_m01::after {
  content: '';
  display: inline-block;
  width: 20vw;
  height: 20vw;
  background-image: url(../img/ico_menu_en01.png);
  right: -20px;
  position: absolute;
  top: -55px;
  background-repeat: no-repeat;
  background-size: contain;
}
.menu_en_txt div h3.ico_m02::after {
  content: '';
  display: inline-block;
  width: 20vw;
  height: 20vw;
  background-image: url(../img/ico_menu_en02.png);
  left: -30px;
  position: absolute;
  top: -55px;
  background-repeat: no-repeat;
  background-size: contain;
}
.kansyu p:last-of-type {
width: calc(100% - 50px);
}
.menu_area {
  width: 96%;
}
.kansyu {
	display:block;
}
.kansyu p:first-of-type {
	margin:0 0 15px;
	text-align:center;
}
.kansyu p:last-of-type {
width: 100%;
box-sizing: border-box;
}
.shopinfo {
  width: 96%;
}
.shopinfo_inner {
  padding: 10px 0;
}
.shopinfo_inner table th {
  line-height: 110%;
}
.map h4 {
  font-size: 1.6em;
}
.menu_main {
  margin: 0 0 30px;
}
}



/* === snow 修正済み完全版 === */
  
.snow-container {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    z-index: 100; /* 最前面に表示 */
    overflow: hidden;
    pointer-events: none; /* 雪がクリックを邪魔しないようにする */
}

/* 文字化け対策（HTML内の「?」を透明にして、CSSで雪を表示） */
.snow-container .snow span {
    color: transparent; 
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
}
/* spanの中にも雪を追加 */
.snow-container .snow span::after {
    content: "\2744"; /* 雪の結晶コード */
    color: #fff;
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    text-align: center;
}

.snow-container .snow span,
.snow-container .snow::before,
.snow-container .snow::after {
    position: absolute;
    width: 100%;
    height: 100%;
    color:#fff;
    text-align: center;
}
.snow-container .snow.small {
    font-size: 1.2rem;
    opacity: 1;
}
.snow-container .snow.medium {
    font-size: 1.4rem;
    opacity: 0.8;
}
.snow-container .snow.large {
    font-size: 1.6rem;
    opacity: 0.6;
}

.snow-container .snow.small span {
    display: block;
    animation: fall-small 7s linear infinite;
}
.snow-container .snow.small::before {
    content: "\2744";
    left: -30%;
    animation: fall-small 9s linear infinite;
}
.snow-container .snow.small::after {
    content: "\2744";
    left: 30%;
    animation: fall-small 13s linear infinite;
}

.snow-container .snow.medium span {
    display: block;
    left: 10%;
    animation: fall-medium 8s linear infinite;
}
.snow-container .snow.medium::before {
    content: "\2744";
    left: -40%;
    animation: fall-medium 10s linear infinite;
}
.snow-container .snow.medium::after {
    content: "\2744";
    left: 40%;
    animation: fall-medium 6s linear infinite;
}

.snow-container .snow.large span {
    display: block;
    left: -10%;
    animation: fall-large 5s linear infinite;
}
.snow-container .snow.large::before {
    content: "\2744";
    left: -35%;
    animation: fall-large 6s linear infinite;
}
.snow-container .snow.large::after {
    content: "\2744";
    left: 35%;
    animation: fall-large 7s linear infinite;
}

@keyframes fall-small {
    0% { top: -20px; }
    3% { transform: translateX(5px); }
    7% { transform: translateX(5px); }
    18% { transform: translateX(-5px); }
    22% { transform: translateX(-5px); }
    38% { transform: translateX(13px); }
    42% { transform: translateX(13px); }
    58% { transform: translateX(-13px); }
    62% { transform: translateX(-13px); }
    78% { transform: translateX(13px); }
    82% { transform: translateX(13px); }
    100% { top: calc(100% + 20px); }
}

@keyframes fall-medium {
    0% { top: -200px; }
    3% { transform: translateX(5px); }
    7% { transform: translateX(5px); }
    18% { transform: translateX(-5px); }
    22% { transform: translateX(-5px); }
    38% { transform: translateX(13px); }
    42% { transform: translateX(13px); }
    58% { transform: translateX(-13px); }
    62% { transform: translateX(-13px); }
    78% { transform: translateX(13px); }
    82% { transform: translateX(13px); }
    100% { top: calc(100% + 20px); }
}

@keyframes fall-large {
    0% { top: -300px; }
    3% { transform: translateX(5px); }
    7% { transform: translateX(5px); }
    18% { transform: translateX(-5px); }
    22% { transform: translateX(-5px); }
    38% { transform: translateX(13px); }
    42% { transform: translateX(13px); }
    58% { transform: translateX(-13px); }
    62% { transform: translateX(-13px); }
    78% { transform: translateX(13px); }
    82% { transform: translateX(13px); }
    100% { top: calc(100% + 20px); }
}

/* スマホでも雪を全画面にする設定 */
@media only screen and ( max-width : 1100px ) {
    .snow-container {
        display: flex;
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        z-index: 100;
        overflow: hidden;
    }
    .snow-container .snow span,
    .snow-container .snow::before,
    .snow-container .snow::after {
        position: absolute;
        width: 100%;
        height: 100%;
        color:#fff;
        text-align: center;
        overflow: hidden;
    }
}   
/* === snow ここまで === */