@charset "UTF-8";
/* CSS Document */
body {
  background-color: #f7eee5;
  width: 100%;
}
@media only screen and (max-width: 920px) {
body {
  font-size: 16px;
}
br.intro {
  display: none;  
}
span {
  display: inline-block;
}
div.title {
 width: 81.55%;
 margin: 2vw auto 0;
}
div.title h1 {
 width: 100%;
 height: 1%;
}
div.title h1 img {
 width: 35%;
 height: 1%;
}
div.sns {
  width: 81.55%;
  margin: 0 auto;
  display: flex;
}
div.sns a.fb {
  width: 7.76%;
  max-width: 40px;
  display: block;
  margin-left: 1vw;
}
div.sns a.ig {
  width: 7.76%;
  max-width: 40px;
  display: block;
  margin-left: auto;
}
div.sns a img {
  width: 100%;
  display: block;
}
div.sns a:hover {
  opacity: 0.5;
  transition: 0.3s;
}
div.sns p { 
  font-size: 3.7vw;
  width: 50%;
  padding: 0.8vw 0.5vw 0.5vw 2.2vw;
  letter-spacing: 0.3vw;
  font-family: 'a-otf-futo-min-a101-pr6n', serif;
  font-style: normal;
  font-weight: 300;
  color: #646464;
  border: 1.5px solid #646464;
  border-radius: 20px;
  margin-left: 1vw;
}
div.sns p a {
  color: #646464;
  text-decoration: none;
}
div.container {
  width: 81.55%;
  margin: 2% auto 0;
  box-shadow: 1vw 1vw 2vw -1vw #000000
}
header {
  width: 100%;
  background-color: #f7eee5;
}
header div.topimg {
  position: relative;
}
header img#logo {
  position: absolute;
  top: 36.5vw;
  left: 4vw;
  width: 26%;
  z-index: 11;
}
header p#slideshow {
  position: relative;
  width:  100%; /* 画像の横幅に合わせて記述 */
  /* 画像の高さに合わせて記述 */
}
header p#slideshow img {
  width: 100%;
  position: absolute;
  top: 0;
  left:0;
  z-index: 8;
  opacity: 0.0;
}
header p#slideshow img.active {
  z-index: 10;
  opacity: 1.0;
}
header p#slideshow img.last-active {
  z-index: 9;
}
section.skytree {
  background-color: #FFC100; 
  padding-top: 73%;
}
section.skytree img {
  display: block;
  margin: 0 auto;
  width: 45%;
  padding-bottom: 8%;
} 
section.insta {
  width: 100%;
  background-color: #ffffff;
  padding-bottom: 6.8%;
}
section.insta h2 {
  width: 100%;
  margin: 0 auto;
  padding-top: 8%;
  font-size: 18px;
  color: #787a79;
  line-height: 1.6;
  text-align: center;
  font-family: 'a-otf-futo-min-a101-pr6n', serif;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0.01vw;
}
section.insta img {
  display: block;
  width: 39.53%;
  margin: 3.5% auto 3%;
  padding-right: 10%;
}
section.insta div.wiget {
  margin: 0 auto;
}
section.intro {
  width: 100%;
  text-align: center;
  background-color: #f1f6f6;
}
section.intro h2 {
  font-family: 'a-otf-futo-min-a101-pr6n', serif;
  font-style: normal;
  font-weight: 300;
  color: #646464;
  letter-spacing: 0.3vw;
  font-size: 18px;
  padding: 4.5% 0 1.6%;
}
section.intro hr {
  width: 84.642%;
  height: 1px;
  color: #646464;
  margin: 0 auto;
  padding-bottom: 4.8%;
}
section.intro h3 {
  font-size: 20px;
  font-family: 'a-otf-futo-min-a101-pr6n', serif;
  font-style: normal;
  font-weight: 300;
  color: #787a79;
}
section.intro p {
  width: 83%;
  margin: 0 auto;
  font-size: 13px;
  color: #787a79;
  line-height: 2.4;
  padding: 3% 0 3.5%;
  letter-spacing: 0.2vw;
  font-family: 'kozuka-gothic-pr6n', sans-serif;
  font-style: normal;
  font-weight: 200;
}
section.menu {
  width: 100%;
  text-align: center;
  background-color: #ffffff;
}
section.menu h2 {
  font-family: 'a-otf-futo-min-a101-pr6n', serif;
  font-style: normal;
  font-weight: 300;
  color: #646464;
  letter-spacing: 0.3vw;
  font-size: 18px;
  padding: 10% 0 1.6%;
}
section.menu hr {
  width: 84.642%;
  height: 1px;
  color: #646464;
  margin: 0 auto;
  padding-bottom: 4.8%;
}
/* 紹介一覧 */
.cp_box_pc {
  display: none;  
}
#introduce_list_sp .sp_menu {
  display: flex;
  width: 80%;
  margin: 0 auto 2%;
}
.sp_menu img { 
  display:block;
  width: 30%;
  height: 1%;
}
.sp_menu .info { 
  width: 60%;
  margin-left: 10%;
}
.sp_menu .info .title { 
  font-family: 'a-otf-futo-min-a101-pr6n', serif;
  margin: 8% 0 8% 0; 
  padding: 0; 
  font-size: 12.4px;
  text-align: left;
  font-weight: 600; 
  line-height: 1.7; 
  color: #b69e84; 
}
.sp_menu .info .title_long { 
  font-family: 'a-otf-futo-min-a101-pr6n', serif;
  margin: 5% 0 5% 0; 
  padding:0; 
  font-size: 14px;
  text-align: left;
  font-weight:600; 
  line-height:1.7; 
  color:#b69e84; 
}
 .sp_menu .info .title_long_ { 
  font-family: 'a-otf-futo-min-a101-pr6n', serif;
  margin: 2% 0 2% 0; 
  padding:0; 
  font-size: 14px;
  text-align: left;
  font-weight:600; 
  line-height:1.7; 
  color:#b69e84; 
}
.sp_menu .info .title_long span {
  font-size: 1.8vw;
  letter-spacing: -0.1vw;
}
.sp_menu .info .title_long_ span {
  font-size: 1.8vw;
  letter-spacing: -0.1vw;
}
.sp_menu .info .title_corn {
  font-family: 'a-otf-futo-min-a101-pr6n', serif;
  margin: 2% 0; 
  padding:0; 
  font-size: 13px;
  text-align: left;
  font-weight:600; 
  line-height:1.3; 
  color:#b69e84; 
}
.sp_menu .info .title_corn span {
  line-height: 2;
  font-size: 1.8vw;
  letter-spacing: -0.1vw;
}
.sp_menu .info .excerpt { 
  margin:0; 
  padding:0; 
  line-height:2; 
  color:#000; 
  font-size: 12px;
  text-align: left;
}
.sp_menu .info .excerpt_ { 
  margin:0; 
  padding:0; 
  color:#000; 
  font-size: 12px;
  text-align: left;
}
.cp_box *, .cp_box *:before, .cp_box *:after {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
.cp_box {
	position: relative;
}
.cp_box label {
	position: absolute;
  left: 0%;
	z-index: 1;
	bottom: -7.1%;
	width: 100%;
	height: 30%; /* グラデーションの高さ */
	cursor: pointer;
	text-align: center;
	/* 以下グラデーションは背景を自身のサイトに合わせて設定してください */
	background: linear-gradient(to bottom, rgba(250, 252, 252, 0) 0%, rgba(250, 252, 252, 0.95) 90%);
}
.cp_box input:checked + label {
	background: inherit; /* 開いた時にグラデーションを消す */
}
.cp_box label:after {
  font-family: 'a-otf-futo-min-a101-pr6n', serif;
  line-height: 2rem;
  position: absolute;
  z-index: 2;
  bottom: 30%;
  left: 50%;
  width: 30%;
  content: ' more';
  transform: translate(-50%, 0);
  letter-spacing: 0.05em;
  border-radius: 10px;
  color: #ffffff;
  background-color: #646464;
}
.cp_box input {
	display: none;
}
.cp_box .cp_container {
	overflow: hidden;
	height: 250px; /* 開く前に見えている部分の高さ */
	transition: all 0.5s;
}
.cp_box input:checked + label {
	/* display: none ; 閉じるボタンを消す場合解放 */
}
.cp_box input:checked + label:after {
  font-family: 'a-otf-futo-min-a101-pr6n', serif;
	content: ' close';
}
.cp_box input:checked ~ .cp_container {
	height: auto;
	padding-bottom: 80px; /* 閉じるボタンのbottomからの位置 */
	transition: all 0.5s;
}
section.staff {
  width: 100%;
  text-align: center;
  background-color: #f1f6f6;
  padding-bottom: 5%;
}
section.staff h2 {
  font-family: 'a-otf-futo-min-a101-pr6n', serif;
  font-style: normal;
  font-weight: 300;
  color: #646464;
  letter-spacing: 0.3vw;
  font-size: 18px;
  padding: 6% 0 1.6%;
}
section.staff hr {
  width: 84.642%;
  height: 1px;
  color: #646464;
  margin: 0 auto;
  padding-bottom: 4.8%;
}
p.profile {
  text-align: center;
  color: #646464;
  font-size: 12px;
  line-height: 2;
  letter-spacing: 0.1vw;  
}
div.box {
  width: 75%;
  margin: 0 auto;
}
div.box figure {
  width: 35%;
  margin: 0 auto;
}
div.box figure img {
  width: 100%;
}
div.box figure p.name{
  text-align: center;
  font-family: 'a-otf-futo-min-a101-pr6n', serif;
  font-style: normal;
  font-weight: 300;
  color: #646464;
  letter-spacing: 0.3vw;
  font-size: 14px;
  margin: 5% 0;
}
div.box figure p {
  line-height: 1.5;
  font-size: 14px;
}
section.about {
  width: 100%;
  text-align: center;
  background-color: #ffffff;
  padding-bottom: 8%;
}
section.about h2 {
  font-weight: 300;
  color: #646464;
  letter-spacing: 0.3vw;
  font-size: 16px;
  padding: 8% 0 1.6%;
}
section.about p{
  width: 80%;
  margin: 0 auto;
  text-align: center;
  color: #646464;
  font-size: 12px;
  line-height: 2;
  letter-spacing: 0.1vw;
}
section.about p span.holiday {
  font-size: 10px;
  letter-spacing: none;
}
section.about p a {
  text-decoration: none;
  color: #646464;
}
section.about p img.credit {
  width: 100%;
  padding-top: 2vw;
}
section.map {
  position: relative;
}   
iframe {
  width: 100%;
  height: 37vw;
}
img.furuno {
  z-index: 999;
  width: 36%;
  display: block;
  position: absolute;
  top: 17.5vw;
  right: 10.5vw;
}
img.milk {
  z-index: 999;
  width: 34%;
  display: block;
  position: absolute;
  top: 16vw;
  right: 43vw;
} 
footer {
  width: 100%;
  margin: 9.8vw auto 0;
}
footer img{
  display: block;
  margin: 0 auto;
  /*width: 35%;*/
  padding-bottom: 5vw;
}
footer p {
  text-align: center;
  width: 100%;
  color: #646464;
  font-size: 12px;
  line-height: 2;
  letter-spacing: 0.1vw;
}
  
}
@media only screen and (min-width: 921px) and (max-width: 1100px) {
div.sns p { 
  font-size: 1.7vw;
  width: 27%;
  padding: 0.5vw 0.5vw 0.5vw 1.2vw;
  letter-spacing: 0.37vw;
  font-family: 'a-otf-futo-min-a101-pr6n', serif;
  font-style: normal;
  font-weight: 300;
  color: #646464;
  border: 2px solid #646464;
  border-radius: 20px;
  margin-left: 1vw;
  line-height: 1.5;
}
}

/********* PC *********/

@media only screen and (min-width: 921px) {
br.about {
  display: none;  
}
div.title {
 width: 81.55%;
 margin: 2vw auto 0;
}
div.title h1 {
 width: 100%;
 height: 1%;
}
div.title h1 span,
div.topimg h1 span {
font-size: 1.5vw; 
visibility: hidden;
}
div.title h1 img {
 width: 25%;
 height: 1%;
}
div.sns {
  width: 81.55%;
  margin: 0 auto;
  display: flex;
}
div.sns a.fb {
  width: 7.76%;
  max-width: 40px;
  display: block;
  margin-left: 1vw;
}
div.sns a.ig {
  width: 7.76%;
  max-width: 40px;
  display: block;
  margin-left: auto;
}
div.sns a img {
  width: 100%;
  display: block;
}
div.sns a:hover {
  opacity: 0.5;
  transition: 0.3s;
}
div.sns p { 
  font-size: 1.7vw;
  width: 27%;
  padding: 0.5vw 0.5vw 0.5vw 1.2vw;
  letter-spacing: 0.37vw;
  font-family: 'a-otf-futo-min-a101-pr6n', serif;
  font-style: normal;
  font-weight: 300;
  color: #646464;
  border: 2px solid #646464;
  border-radius: 20px;
  margin-left: 1vw;
}
div.sns p a {
  color: #646464;
  text-decoration: none;
}
div.container {
  width: 81.55%;
  margin: 0.8vw auto 0;
  box-shadow: 1vw 1vw 2vw -1vw #000000
}
header {
  width: 100%;
  background-color: #f7eee5;
}
header div.topimg {
  position: relative;
}
header img#logo {
  position: absolute;
  top: 40.5vw;
  left: 3vw;
  width: 20%;
  z-index: 11;
}
header p#slideshow {
  position: relative;
  width:  100%; /* 画像の横幅に合わせて記述 */
  /* 画像の高さに合わせて記述 */
}
header p#slideshow img {
  width: 100%;
  position: absolute;
  top: 0;
  left:0;
  z-index: 8;
  opacity: 0.0;
}
header p#slideshow img.active {
  z-index: 10;
  opacity: 1.0;
}
header p#slideshow img.last-active {
  z-index: 9;
}
  
section.skytree {
  background-color: #FFC100; 
  padding-top: 73%;
}
section.skytree img {
  display: block;
  margin: 0 auto;
  width: 45%;
  padding-bottom: 8%;
}
section.insta {
  width: 100%;
  background-color: #ffffff;
  padding-bottom: 6.8%;
}
section.insta h2 {
  width: 100%;
  margin: 0 auto;
  padding-top: 10.45%;
  font-size: 2.347vw;
  color: #787a79;
  line-height: 1.6;
  text-align: center;
  font-family: 'a-otf-futo-min-a101-pr6n', serif;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0.01vw;
}
section.insta img {
  display: block;
  width: 39.53%;
  margin: 3.5% auto 3%;
  padding-right: 10%;
}
section.insta div.wiget {
  width: 61.1%;
  margin: 0 auto;
}
section.intro {
  width: 100%;
  text-align: center;
  background-color: #f1f6f6;
}
section.intro h2 {
  font-family: 'a-otf-futo-min-a101-pr6n', serif;
  font-style: normal;
  font-weight: 300;
  color: #646464;
  letter-spacing: 0.3vw;
  font-size: 2.347vw;
  padding: 4.5% 0 1.6%;
}
section.intro hr {
  width: 84.642%;
  height: 1px;
  color: #646464;
  margin: 0 auto;
  padding-bottom: 4.8%;
}
section.intro h3 {
  font-size: 2.7vw;
  font-family: 'a-otf-futo-min-a101-pr6n', serif;
  font-style: normal;
  font-weight: 300;
  color: #787a79;
}
section.intro p {
  font-size: 1.2vw;
  color: #787a79;
  line-height: 2.4;
  padding: 3% 0 3.5%;
  letter-spacing: 0.2vw;
  font-family: 'kozuka-gothic-pr6n', sans-serif;
  font-style: normal;
  font-weight: 200;
}
section.menu {
  width: 100%;
  text-align: center;
  background-color: #ffffff;
}
section.menu h2 {
  font-family: 'a-otf-futo-min-a101-pr6n', serif;
  font-style: normal;
  font-weight: 300;
  color: #646464;
  letter-spacing: 0.3vw;
  font-size: 2.347vw;
  padding: 10% 0 1.6%;
}
section.menu hr {
  width: 84.642%;
  height: 1px;
  color: #646464;
  margin: 0 auto;
  padding-bottom: 4.8%;
}

/* 紹介一覧 */
.cp_box {
  display: none;    
}
#introduce_list_pc {
  width: 84.642%;
  margin: 4.5% auto 0; 
  padding-bottom: 15%;
}
#introduce_list_pc::after {
  content: "";
  display: block;
  clear: both;
}
.introduce_list_row {
  margin:0; 
}
.introduce_list_col {
  width:23.333%; 
  margin:0 0 0 0; 
  float:left; 
  overflow:hidden; 
  position:relative;
  -webkit-transition:width 0.5s ease; 
  -moz-transition:width 0.5s ease; 
  -ms-transition:width 0.5s ease; 
  -o-transition:width 0.5s ease; 
  transition:width 0.5s ease;
}
.introduce_list_row:last-child .introduce_list_col {
  margin-bottom:0; 
}
.introduce_list_col:last-child {
  margin-right:0; 
}
.introduce_list_col a {
  display:block; 
  height:1%; 
  overflow:hidden; 
  text-decoration:none; 
  position:relative; 
}
.introduce_list_col .image {
  display:block; 
  width:100%; 
  height:0; 
  overflow:hidden; 
  padding-top:100%; 
  position:relative; 
}
.introduce_list_col .image img { 
  display:block; 
  width:auto; 
  min-width:100%; 
  height:100%; 
  position:absolute; 
  top:0; 
  left:50%;
  -webkit-transform:translate3d(-50%,0,0); 
  -moz-transform:translate3d(-50%,0,0); 
  -ms-transform:translate3d(-50%,0,0); 
  -o-transform:translate3d(-50%,0,0); 
  transform:translate3d(-50%,0,0);
}
.introduce_list_col .info { 
  display:none; 
  height: 1%; 
  position:absolute; 
  top:0; 
  right:0;
}
.introduce_list_col .info .title { 
  font-family: 'a-otf-futo-min-a101-pr6n', serif;
  margin:20% 0 20% 5%; 
  padding:0; 
  font-size: 1.5vw;
  text-align: left;
  font-weight:600; 
  line-height:1.7; 
  color:#b69e84; 
}
.introduce_list_col .info .title_ice { 
  font-family: 'a-otf-futo-min-a101-pr6n', serif;
  margin:20% 0 20% 5%; 
  padding:0; 
  font-size: 1.4vw;
  text-align: left;
  font-weight:600; 
  line-height:1.7; 
  color:#b69e84; 
}
.introduce_list_col .info .title_ice span {
  font-size: 1vw;
  letter-spacing: 0.1vw;
}
.introduce_list_col .info .title_long { 
  font-family: 'a-otf-futo-min-a101-pr6n', serif;
  margin:9.5% 0 5% 5%; 
  padding:0; 
  font-size: 1.5vw;
  text-align: left;
  font-weight:600; 
  line-height:1.7; 
  color:#b69e84; 
}
.introduce_list_col .info .title_long span {
  font-size: 1vw;
  letter-spacing: -0.1vw;
}
.introduce_list_col .info .title_corn { 
  font-family: 'a-otf-futo-min-a101-pr6n', serif;
  margin:4% 0 5% 5%; 
  padding:0; 
  font-size: 1.4vw;
  text-align: left;
  font-weight:600; 
  line-height:1.4; 
  color:#b69e84; 
}
.introduce_list_col .info .title_corn span {
  font-size: 1vw;
}
.introduce_list_col .info .excerpt { 
  font-family: 'a-otf-futo-min-a101-pr6n', serif;
  margin:0; 
  padding:0 0 0 5%; 
  line-height:2; 
  color:#000; 
  font-size: 1.5vw;
  text-align: left;
}
.introduce_list_col.show_info { 
  width: 46.666%; 
}
.introduce_list_col.show_info .image { 
  width:47.728%; 
  padding-top:47.728%; 
}
.introduce_list_col.show_info .info { 
  display:block; 
  width:50%; 
}

.cp_box_pc *, .cp_box_pc *:before, .cp_box_pc *:after {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
.cp_box_pc {
	position: relative;
}
.cp_box_pc label {
	position: absolute;
  left: 0%;
	z-index: 1;
	bottom: -1.9%;
	width: 100%;
	height: 30%; /* グラデーションの高さ */
	cursor: pointer;
	text-align: center;
	/* 以下グラデーションは背景を自身のサイトに合わせて設定してください */
	background: linear-gradient(to bottom, rgba(250, 252, 252, 0) 0%, rgba(250, 252, 252, 0.95) 90%);
}
.cp_box_pc input:checked + label {
	background: inherit; /* 開いた時にグラデーションを消す */
}
.cp_box_pc label:after {
  font-family: 'a-otf-futo-min-a101-pr6n', serif;
  line-height: 3.8vw;
  position: absolute;
  z-index: 2;
  bottom: 20%;
  left: 50%;
  width: 23.7%;
  height: 3.8vw;
  content: ' more';
  transform: translate(-50%, 0);
  letter-spacing: 0.05em;
  color: #ffffff;
  background-color: #646464;
  }
.cp_box_pc input {
	display: none;
}
.cp_box_pc {
	overflow: hidden;
	height: 52vw; /* 開く前に見えている部分の高さ */
	transition: all 0.5s;
}
.cp_container_open {
	height: auto;
}
.cp_box_pc input:checked + label {
/*	 display: none ; */
}
.cp_box_pc input:checked + label:after {
  font-family: 'a-otf-futo-min-a101-pr6n', serif;
	content: ' close';
}
.cp_box input:checked ~ .cp_container {
	height: auto;
	padding-bottom: 80px; /* 閉じるボタンのbottomからの位置 */
	transition: all 0.5s;
}
  
  
  
  
  
section.staff {
  width: 100%;
  text-align: center;
  background-color: #f1f6f6;
  padding-bottom: 5%;
}
section.staff h2 {
  font-family: 'a-otf-futo-min-a101-pr6n', serif;
  font-style: normal;
  font-weight: 300;
  color: #646464;
  letter-spacing: 0.3vw;
  font-size: 2.347vw;
  padding: 6% 0 1.6%;
}
section.staff hr {
  width: 84.642%;
  height: 1px;
  color: #646464;
  margin: 0 auto;
  padding-bottom: 4.8%;
}
div.box {
  width: 60%;
  margin: 0 auto;
}
div.box figure {
  width: 40%;
  margin: 0 auto;
}
div.box figure img {
  width: 100%;
  margin-bottom: 6%;
}
div.box figure img:hover {
  opacity: 0.8;
  transition: 0.5s;
  
}
div.box figure p.name{
  text-align: center;
  font-family: 'a-otf-futo-min-a101-pr6n', serif;
  font-style: normal;
  font-weight: 300;
  color: #646464;
  letter-spacing: 0.3vw;
  font-size: 1.5vw;
  margin-bottom: 5%;
}
div.box figure p {
  line-height: 1.5;
  font-size: 1.2vw;
}
  
div.box p.profile {
  width: 47%;
  text-align: left;
  line-height: 1.5;
  display: block;
  margin: 0 auto;
  font-size: 1vw;
}
section.about {
  width: 100%;
  text-align: center;
  background-color: #ffffff;
  padding-bottom: 8%;
}
section.about h2 {
  font-weight: 300;
  color: #646464;
  letter-spacing: 0.3vw;
  font-size: 1.23vw;
  padding: 8% 0 1.6%;
}
section.about p ,footer p {
  text-align: center;
  color: #646464;
  font-size: 1.2em;
  line-height: 2;
  letter-spacing: 0.1vw;
}
section.about p a {
  text-decoration: none;
  color: #646464;
}
section.about p img.credit {
  width: 60%;
  padding-top: 2vw;
}
section.map {
  position: relative;
}    
iframe {
  width: 100%;
  height: 37vw;
}
img.furuno {
  z-index: 999;
  width: 21%;
  display: block;
  position: absolute;
  top: 17.5vw;
  right: 22.5vw;
}
img.milk {
  z-index: 999;
  width: 34%;
  display: block;
  position: absolute;
  top: 16vw;
  right: 43vw;
}
footer {
  width: 80%;
  margin: 6.7vw auto 0;
}
footer img{
  display: block;
  margin: 0 auto;
  /*width: 34.33%;*/
  padding-bottom: 4vw;
}
footer p {
  text-align: center;
}
  
}