/* 
font-family: 'Klee One', cursive;
font-family: 'Palette Mosaic', cursive;
font-family: 'Rampart One', cursive;
font-family: 'Rock 3D', cursive;
font-family: 'RocknRoll One', sans-serif;
font-family: 'Shizuru', cursive;
font-family: 'Slackside One', cursive;
font-family: 'Train One', cursive;
font-family: 'Zen Kurenaido', sans-serif; 
*/

@import url('https://fonts.googleapis.com/css2?family=Klee+One&family=Palette+Mosaic&family=Rampart+One&family=Rock+3D&family=RocknRoll+One&family=Shizuru&family=Slackside+One&family=Train+One&family=Zen+Kurenaido&family=Zen+Maru+Gothic:wght@300&display=swap');

body{
  	background-color:#E3BFB2 ;
	font-family: 'Klee One', cursive;
	Font-size: 62.5%;
	line-height: 2;
	
}
main{
	width: 960px;
	margin:auto;
}
a {
	font-weight: bold;
	color: #000;
	text-decoration:none; 
}

h1{
  	font-family: 'Train One', cursive;
}
h2{
	font-family: 'Klee One', cursive;
  	font-size: 3em;
}

.container0 {
}

.div0 { 
}

.logomark{
  text-align: right;
}
.logomark img{
  width: 125px;
}	

.container1 {
}

.div1 { 
  	width: 900px;
  	aspect-ratio: 5/4;
  	overflow: hidden;
  	align-items: center;
	position: relative;
	margin: auto;
}

.div2 { 
	text-align: center ;
	margin : 10px;
}

.memo {
	width : 90%;
	}
	
.hitorigoto {
	width : 90%;
	}

.div3 { 
  	width: 900px;
  	aspect-ratio: 5/4;
  	overflow: hidden;
  	align-items: center;
	position: relative;
	margin: auto;
}

.container2 {
}

.div21 { 
	margin: auto;
	Padding: 50px 20px;
}

.toptext-wrap {
  position: relative;
  width: 100%;
}

.toptext{
	overflow-y: auto;
  	writing-mode: vertical-rl;
  	width: 90%;
}

.toptext p
{
	display: inline-block;
	text-align: left;
	Font-size: 2em;
}

.vimeo {
position: relative;
height: 0;
padding: 0 0 68%;
overflow: hidden;
}

.vimeo iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

.div22 { 
  	background: rgba(255,255,255,0.4);
	Height: auto;
	margin: 20px;
	Padding: 30px;
}

.div22 p{
	font-size: 2em;
	margin: 5px 10px 5px 10px;
}

.div22 > a > p {
  font-weight: 500;
  letter-spacing: 0.03em;
  border-bottom: 1px solid rgba(0,0,0,0.35);
  display: inline-block;
  padding-bottom: 4px;
}

.div22 span{
	font-size: 1.5em;
	margin: 10px 20px 10px 10px;
}
/* div22 内に置くブログ最新記事フレーム */
.div22 .blog-frame {
  background: rgba(255,255,255,0);
  max-width: 800px;
  margin: 30px auto;
  padding-bottom: 30px;
  border-bottom: 1px solid rgba(0,0,0,0.25);
}

/* 最後の記事だけ区切り線なし */
.div22 .blog-frame:last-child {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}

/* カードリンク全体 */
.div22 .blog-frame a {
  display: block;
  color: inherit;
  text-decoration: none;
}

.div22 .blog-frame img {
  width: 100%;
  max-width: 400px;
  height: 350px;
  object-fit: cover;
  display: block;
  margin: 0 auto;
}

/* テキスト */
.div22 .blog-frame p {
  font-size: 1.7em;     /* ここで大きさ調整 */
  margin: 14px 20px 24px 20px;
  line-height: 1.6;
}


.container3 {
	display: flex;
}

.container3 div {
}

.goods {
  	width: 190px;
  	height: 190px;
  	object-fit: cover;
}

.div31 {  
	font-size: 2em;
	margin: 20px;
}

.footer{
  background-color: #BE4E27;
  height: 60px;
  padding: 15px 40px;
  margin: 0px;
  font-size: 1.8em;
}


/*Slidshow-1 */
.img-01, .img-02, .img-03, .img-04{
  	width: 100%;
  	height: 100%;
  	background-size: cover;
  	background-repeat: no-repeat;
	position: absolute;
}
.img-01{
  background-image: url( img/01.jpg );
  animation: slide-animation-01 24s infinite;
}
.img-02{
  background-image: url( img/02.jpg );
  animation: slide-animation-02 24s infinite;
}

.img-03{
  background-image: url( img/03.jpg );
  animation: slide-animation-03 24s infinite;
}
.img-04{
  background-image: url( img/04.jpg );
  animation: slide-animation-04 24s infinite;
}
@keyframes slide-animation-01 {
   0% {opacity: 1; transform: scale(1.0);}
  30% {opacity: 1;}
  40% {opacity: 0; transform: scale(1.15);}
  60% {opacity: 0;}
  90% {opacity: 0}
100% {opacity: 1; transform: scale(1.0);}
}
@keyframes slide-animation-02 {
    0% {opacity: 0;}
  20% {opacity: 0;transform: scale(1.1);}
  30% {opacity: 1;}
  50% {opacity: 1;}
  60% {opacity: 0;}
  70% {opacity: 0; transform: scale(1.0);}
100% {opacity: 0;}
}
@keyframes slide-animation-03 {
    0% {opacity: 0; transform: scale(1.15);}
  40% {opacity: 0;}
  50% {opacity: 1;}
  70% {opacity: 1;}
  90% {opacity: 0; transform: scale(1.1);}
100% {opacity: 0;}
}
@keyframes slide-animation-04 {
  0% {opacity: 0;}
60% {opacity: 0;transform: scale(1.0);}
70% {opacity: 1;}
90% {opacity: 1;}
100% {opacity: 0;transform: scale(1.05); }
}

/*Slidshow-2 */
.img-21, .img-22, .img-23, .img-24{
  	width: 100%;
  	height: 100%;
  	background-size: cover;
  	background-repeat: no-repeat;
	position: absolute;
}
.img-21{
  background-image: url( img/21.jpg );
  animation: slide-animation-21 18s infinite;
}
.img-22{
  background-image: url( img/22.jpg );
  animation: slide-animation-22 18s infinite;
}

.img-23{
  background-image: url( img/23.jpg );
  animation: slide-animation-23 18s infinite;
}
.img-24{
  background-image: url( img/24.jpg );
  animation: slide-animation-24 18s infinite;
}
@keyframes slide-animation-21 {
   0% {opacity: 1;}
  30% {opacity: 1;}
  40% {opacity: 0;}
  60% {opacity: 0;}
  90% {opacity: 0}
100% {opacity: 1;}
}
@keyframes slide-animation-22 {
   0% {opacity: 0;}
  20% {opacity: 0;}
  30% {opacity: 1;}
  50% {opacity: 1;}
  60% {opacity: 0;}
  70% {opacity: 0;}
100% {opacity: 0;}
}
@keyframes slide-animation-23 {
   0% {opacity: 0;}
  40% {opacity: 0;}
  50% {opacity: 1;}
  70% {opacity: 1;}
  90% {opacity: 0;}
100% {opacity: 0;}
}
@keyframes slide-animation-24 {
   0% {opacity: 0;}
60% {opacity: 0;}
70% {opacity: 1;}
90% {opacity: 1;}
100% {opacity: 0;}
}


/*ipad*/
@media screen and (max-width: 960px){

h2{
	font-family: 'Klee One', cursive;
  	font-size: 2.5em;
}

main {
	width: 90vw;
	}

.container0 {
}

.div0 { 
}

.logomark{
  text-align: right;
}
.logomark img{
  width: 100px;
}	

.container1 {
}

.div1 { 
  	width: 100%;
  	aspect-ratio: 5/4;
  	overflow: hidden;
  	align-items: center;
	position: relative;
	margin: auto;
}


	
.img-01, .img-02, .img-03, .img-04{
  	background-size: cover;
  	background-repeat: no-repeat;
	position: absolute;
}

.div2 { 
}

.memo {
	width : 95%;
	}
	
.hitorigoto {
	width : 95%;
	}
	
.div3 { 
  	width: 100%;
  	aspect-ratio: 5/4;
  	overflow: hidden;
  	align-items: center;
	position: relative;
	margin: auto;
}

.container2 {
}

.div21 { 
	padding: 20px;
}

.toptext-wrap {
  position: relative;
  width: 100%;
}

.toptext{
	overflow-y: auto;
  	writing-mode: vertical-rl;
  	width : 100%;
}

.toptext p
{
	display: inline-block;
	text-align: left;
	Font-size: 2em;
}

.div22 { 
  	background: rgba(255,255,255,0.4);
	Margin: 10px;
	padding: 5px;
	height: auto;
}
	
.div22 p{
	font-size: 1.8em;
	}
	
.div22 span{
	font-size: 1.4em;
	margin: 10px 15px 10px 15px;
}

/* iPad用：ブログカード */
.div22 .blog-frame {
  margin: 15px auto;
}

/* iPad用：ブログ画像 */
.div22 .blog-frame img {
  width: 100%;
  max-width: 400px;
  height: 300px;
  object-fit: cover;
  display: block;
  margin: 0 auto;
}

/* iPad用：本文 */
.div22 #blog-text {
  font-size: 1.5em;
  margin: 10px 20px 20px 20px;
}
	
.container3 {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	gap: 0px;
	Margin: 15px
}

.container3 div {
	width: 30vw;
}
	
.goods {
	width: 100%;
	height: 100%;
  object-fit: cover;
}

.div31 {  
	margin: 20px;
	font-size: 1.5em;
}

.footer{
  background-color: #BE4E27;
  height: 60px;
  padding: 15px 40px;
  font-size: 1.3em;
}


	
}


/*iphone*/
@media screen and (max-width: 720px){

h2{
	font-family: 'Klee One', cursive;
  	font-size: 2em;
}

main {
	width: 90vw;
	}

.container0 {
}

.div0 { 
}

.logomark{
  text-align: right;
}
.logomark img{
  width: 70px;
}	

.container1 {
}

.div1 { 
  	width: 100%;
  	aspect-ratio: 5/4;
  	overflow: hidden;
  	align-items: center;
	position: relative;
	margin: auto;
}


	
.img-01, .img-02, .img-03, .img-04{
  	background-size: cover;
  	background-repeat: no-repeat;
	position: absolute;
}

.div2 { 
	
}

.memo {
	width : 100%;
	}
	
.hitorigoto {
	width : 100%;
	}
	
.div3 { 
  	width: 100%;
  	aspect-ratio: 5/4;
  	overflow: hidden;
  	align-items: center;
	position: relative;
	margin: auto;
}

.container2 {
}

.div21 { 
	padding: 20px;
}

.toptext-wrap {
  position: relative;
  width: 100%;
}

.toptext{
	overflow-y: auto;
  	writing-mode: vertical-rl;
  	width : 100%;
}

.toptext p
{
	display: inline-block;
	text-align: left;
	Font-size: 1.4em;
}

 /* 右フェード */
.toptext-wrap::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 20px;
  height: 100%;
  pointer-events: none;
  background: linear-gradient(
    to left,
    rgba(231,198,184,0.7),
    rgba(231,198,184,0)
  );
}

/* 左フェード */
.toptext-wrap::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 100%;
  pointer-events: none;
  background: linear-gradient(
    to right,
    rgba(231,198,184,0.7),
    rgba(231,198,184,0)
  );
}

.div22 { 
  	background: rgba(255,255,255,0.2);
	Margin: 5px;
	padding: 5px;
	width: 95%;
	height: auto;
}
	
.div22 p{
	margin: 5px 10px 0px 10px;
	font-size: 1.6em;
}
	
.div22 span{
	font-size: 1.2em;
	margin: 5px 10px 5px 10px;
}

  .div22 .blog-frame img {
  width: 100%;
  max-width: 320px;
  height: 220px;
  object-fit: cover;
  display: block;
  margin: 0 auto;
}

.div22 #blog-text {
  font-size: 1.3em;
  margin: 8px 12px 16px 12px;
}

.container3 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr 1fr 1fr;
	gap: 0px;
}

.container3 div {
	width: 45vw;
}
	
.goods {
	width: 100%;
	height: 100%;
  object-fit: cover;
}

.div31 {  
	margin: 20px;
	font-size: 1.3em;
}

.footer{
  background-color: #BE4E27;
  height: 30px;
  padding: 10px 40px;
  font-size: 1.4em;
}
	
}