/*gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg*/
/*　gallery */
.container0{    
  display: grid;
  background-color: rgb(237, 239, 239);
  color: blue;
  /*grid-template-columns: 1fr 400px 1fr;/* 1fr*/
  grid-template-columns: 300px 1fr 300px;
  grid-template-rows: auto auto auto auto auto auto auto auto;
  margin-right:auto;
  margin-left:auto; 
  }
.zu112{
    width: 400px;
    height: auto;
    border-top: 8px solid #CCCCCC;    /* 上のborderを指定 */
    border-right: 10px solid #555555;  /* 右のborderを指定 */
    border-bottom: 10px solid #808080; /* 下のborderを指定 */
    border-left: 8px solid #BBBBBB;   /* 左のborderを指定 */
    box-shadow: inset 0 0 10px #000;  
}
.item0{
    padding-top: 20px;
    color:rgb(42, 41, 46);
    grid-row: 1 / 2;
    grid-column: 2 / 3;
    }
.item1{
  color:rgb(143, 10, 10);
  grid-row: 2 / 3;
  grid-column: 2 / 3;
  }

/*gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg*/
/* index   start*/
#home{
  text-align: center;
  background-image: url(../imges/kimiwo.jpg);
  min-height: 100vh;
  /*.resizeimage img { width: 100vw; }  */
}
.container_i{
  text-align: center;
  display: grid;
 /* grid-template-columns: 300px auto 250px;calc(100% / 3)*/
  grid-template-columns: 300px calc(100% / 3) calc(100% / 3);
  grid-template-rows: 50px 80px 400px 400px auto;  
}
.item_i1{
  /*background-color:#f0f;*/
  grid-row: 1 / 2;
  grid-column: 1 / 2;
  padding-top: 40px;
  padding-left: 20px;
  font-size: large;
}
.item_i2{
  /*background-color:#f0f;/*transparent;*/
  /*background-color:#f0f;*/
  grid-row: 3 / 4;
  grid-column: 2 / 3;
  padding-top: 70px;
  padding-left: 0px;
  font-size: larger;
}
/*スクロール実験　スクロール実験　スクロール実験*/
/* バナー本体 */
.news-banner {
  display: block;
  height: 30px;
  width: 90%;
  background-color: rgb(244, 162, 10);
  background-color: #f0f;/*transparent;*/
  background-color: transparent;
  margin: 0 auto;
  overflow: hidden;
}

/* バナー内コンテンツ */
.news-banner__content {
  display: inline-block;
  color: #fff;
  color: rgb(9, 9, 9);
  font-size: larger;
  line-height: 30px;
  /*padding-left: 100%;*/
  
  white-space: nowrap;
  animation: animate-banner 20s linear infinite;
}

/* バナー内の要素をすべて選択 */
.news-banner__content > * {
  display: inline-block;
}

/* 横にスクロールさせるアニメーション */
@keyframes animate-banner {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

/*スクロール実験　スクロール実験　スクロール実験*/
.item_i3{
  width: 270px;
  grid-row: 3 / 4;
  grid-column: 1 / 2;
  padding-left: 20px;
}
.item_i4{
  grid-row: 4 / 5;
  grid-column: 1 / 2;
  padding-left: 20px;
}
.item_i5{
  grid-row: 3 / 4;
  grid-column: 3 / 4;
  padding-left: 20px;
}

.navi02_i:hover{
  background-color: rgb(6, 252, 166); 
  font-size: large;  
  }
.shasin{
  width: 200px;
}
.zu0720{
  padding-left: 80px;
  width: 350px;
  padding-right: auto;
}
  /* --- ↓新着情報 ------------------------------------------- */
#whatsnew_i {
  width: 260px;
  /*width: 240px;*/
  height: 300px;
  padding-left: 5px;
  /*margin-left: 5px;*/
  margin-right: 10px;
  scrollbar-width: thin;
  border-width: 1px;
  border-style: solid; 
  background-color: rgba(0,0,0,0);
  opacity: 0.9;
 }
 .wnewtop {
  width: 180px;
  width: 200px;
  color: rgb(81, 0, 255);
 }
 .whatnewbody{
  background-color: rgb(90, 185, 91);
 }
.toph2_i{
width: 100px;
  }
/* --- ↑新着情報 ------------------------------------------- */
#carenda_i{

width: 240px;
height: 290px;
}
.carenda_i{
  background-color: rgb(103, 20, 220);
  width: 280px;
  height: 500px; 
}
/* ---↑ 入り口 ------------------------------------------- */
body{
background-color: rgb(251, 253, 252);
}
.gura {
  color: green;
}
.gura:hover { 
  background-color: lime;
  font-size: x-large;
}
.navtop atuhead {
  /*display: block;*/
  text-align: center;
}
.renraku {
padding-left: 5px;
font-size: 18px;
color: green;
}
.navtop {
  position: sticky;
  top: 0;
  } 
.navtop > p {
  font-size: 40px; 
  font-weight: bolder;
  text-align: left;
  color: crimson;
  padding-left: 10px;
}
.navi {
  display: flex;
  list-style: none;
  flex-wrap: wrap;
  margin-bottom: 5px;
  margin-bottom: 5px;
  justify-content: center;
  }
  .navi02:hover{
  background-color: lime; 
  font-size: large;
  }
  .navi22:hover{
    background-color: lime; 
    font-size: large;
    }
  /* --- ↑ナビゲイション部分 ------------------------------------------- */
.contena2 a {
  width: 200px;/*240px;*/
  height: 30px;
  margin-left: 10px;
  margin-right: 10px;
  color: #FFF;
  background-image: linear-gradient(#3b414d 0%, #698fa0 70%);
  color: #fff;
  display: block;
  padding: 5px;
  text-decoration: none;
  text-align: center;
}
.float_none {
	clear: both;
} 


/* --- ↓ index ------------------------------------------- */
.big-bg {
  background-size: cover;
  background-position: center top;
  min-height: 100vh;
}
.contena-co{
  display: grid;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 400px;
 } 
 .cont1-co {
  margin-top: 50px;
  grid-row: 1 / 2;
  grid-column: 1 / 2;   
   
} 
.cont2-co {
  margin-left: 30px;
  margin-top: 50px;
  margin-right: 40px;
  grid-row: 1 / 2;
  grid-column: 2 / 3;   
  border: rgb(228, 226, 226);
  border-width: 10px;
  border-style: groove; 
} 
.cont31-co {
  grid-row: 2 / 3;
  grid-column: 1 / 2;    
} 
.cont32-co {
  grid-row: 3 / 4;
  grid-column: 1 / 2;    
}
.cont33-co {
  grid-row: 4 / 5;
  grid-column: 1 / 2;    
} 
.cont34-co {
  grid-row: 5 / 6;
  grid-column: 1 / 2;    
}
.cont34b-co {
  grid-row: 6 / 7;
  grid-column: 1 / 2;    
}
.cont35-co {
  margin-top: 50px;
  grid-row: 8 / 9;
  grid-column: 1 / 2;    
} 
.cont36-co {
  grid-row: 9 / 10;
  grid-column: 1 / 2;    
}   
/*.cont4-co {
 width: 380px; 
 margin-left: 30px;
         
} */
.fig41{
  grid-row: 2 / 4;
  grid-column: 2 / 3;
  margin-left: auto;
  margin-right: auto;
} 
.fig42 {
  grid-row: 4 / 7;
  grid-column: 2 / 3;
  margin-left: auto;
  margin-right: auto; 
} 
.fig43 {
  grid-row: 7 / 8;
  grid-column: 1 / 2;
  margin-left: auto;
  margin-right: auto;
}
.fig44 {  
  grid-row: 7 / 8;
  grid-column: 2 / 3;
  margin-left: auto;
  margin-right: auto;
}  
.fig45 { 
  margin-top: 100px; 
  grid-row: 8 / 9;
  grid-column: 2 / 3;
  margin-left: auto;
  margin-right: auto; 
}  
.fig46 { 
  margin-top: 450px;
  grid-row: 8 / 9;
  grid-column: 2 / 3;
  margin-left: auto;
  margin-right: auto; 
}
.fig41 img {
  margin-top: 50px;
  width: 280px;
}
.fig42 img {
  margin-top: 40px;
  width: 280px;
}
.fig43 img {
  width: 280px;
}
.fig44 img {
  width: 280px;
}
.fig45 img {
  width: 280px;
}
.fig46 img {
  width: 280px;
}

.fig1 {
	float: right;
  margin: 0 0 15px 15px;
  max-width: 500px;
}
.fig1 img {
	max-width: 350px;
}
.fig2 {
  margin-right: 10px;
  padding-left: 140px;
	float: left;
}
.fig2 img {
	max-width: 200px;
}

.zu1 {
  width: 400px;
  margin: 120px;
  margin-top: 50px;
  margin-left: 120px;
  margin-bottom: 20px;
}
.zu11 {
 width: 280px;
 margin-left: 10px;
 margin-right: 10px;    
}
.top21-co {
  padding-right: 50px;
  
  padding-left: 140px;     
  font-size: 16px; 
}
.top22-co {
  /*background-color: aquamarine;*/
  padding-right: 50px;
  padding-left: 40px;
  font-size: 18px; 
  margin-left: 100px;
}
.top1-co{
  position: relative;
  padding-left: 120px;    
  color: mediumvioletred;
}
.top2-co{
  position: relative;
  padding-left: 140px; 
  padding-right: 50px;     
  font-size: 18px;
  }
 .top21-co{
  position: relative;
  padding-left: 140px; 
  padding-right: 50px;     
  font-size: 18px;  
 }
/* --- ↑ index ------------------------------------------- */
/* --- ↓hotei ------------------------------------------- */
.contena-ho{
  display: grid;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 400px;
 } 
.cont1-ho {
    margin-top: 50px;
    grid-row: 1 / 2;
    grid-column: 1 / 2;    
} 
.cont2-ho {
    margin-left: 30px;
    margin-top: 50px;
    margin-right: 40px;
    grid-row: 1 / 2;
    grid-column: 2 / 3;   
    border: rgb(228, 226, 226);
    border-width: 10px;
    border-style: groove; 
} 
.cont3-ho {
    grid-row: 2 / 3;
    grid-column: 1 / 2;    
} 
.cont4-ho {
    margin-left: 30px;
    grid-row: 2 / 3;
    grid-column: 2 / 3;        
} 
.cont5-ho {
  grid-row: 3 / 4;
  grid-column: 1 / 2;      
} 
.top1-ho{
  position: relative;
  padding-left: 120px;    
  color: mediumvioletred;
}
.top2-ho{
  position: relative;
  padding-left: 140px; 
  padding-right: 50px;     
  font-size: 18px;
  }
.top21-ho {
  padding-right: 50px;
  
  padding-left: 140px;     
  font-size: 18px; 
}
.fig4-ho img {
  width: 280px;
}
.fig4-ho {
  width: 280px;
}
/* --- ↑ hotei ------------------------------------------- */
/* --- ↓shohin ------------------------------------------- */
.consmp {    
  display: grid;
  margin: 50px;
  gap: 10px;
  grid-template-columns: 1fr 1fr 1fr 1fr;  
  grid-template-rows: auto auto auto;
  
}
.han-sa {     
  grid-row: 1 / 2;
  grid-column: 1 / 4;           
}
.aside-sa {   
  justify-self: center; 
  grid-row: 1 / 2;
  grid-column: 4 / 5;    
} 

.con1-sa {    
  justify-self: center;
  grid-row: 2 / 3;
  grid-column: 1 / 2; 
  height: 450px;          
}
.con2-sa {    
  justify-self: center;
  grid-row: 2 / 3;
  grid-column: 2 / 3;   
  height: 450px;  
}
.con3-sa {  
justify-self: center;
grid-row: 2 / 3;
grid-column: 3 / 4;
height: 450px;         
}
.con4-sa {  
  justify-self: center;
  grid-row: 2 / 3;
  grid-column: 4 / 5;  
  height: 450px;       
} 
.con5-sa {  
  justify-self: center;
  grid-row: 3 / 4;
  grid-column: 1 / 2; 
  height: 450px;         
}
.con6-sa {  
  justify-self: center;
  grid-row: 3 / 4;
  grid-column: 2 / 3;
  height: 450px;        
} 
.con7-sa {  
  justify-self: center;
  grid-row: 3 / 4;
  grid-column: 3 / 4;
  height: 450px;       
}
.han-sa > p {
  margin-left: 140px;
  margin-right: 100px;  
}
.han-sa > h2{
  color: mediumvioletred;
  margin-left: 120px;
  padding-top: 30px;
}
.yo-sa > .con1{  
  
  background-color: #f0f;
}  

.zusho {
  width: 300px;
  margin-left: 10px;
  margin-right: 10px; 
  padding-right: 10px;
  padding-left: 10px; 
    
} 
.toph22 {
  justify-self: center;
  padding-left: 20px;
}  
.toph22:hover {
  color: limegreen;
  font-size: x-large;
}
.toph2 {
  justify-self: center;
  padding-left: 20px;
}  
.shohin1 > . {
font-size: large;  
}
.gura:hover {  
background-color: lime;
font-size: x-large;
}

.shoary {
  padding-left: 140px;     
}

.item9 > img {
  width: 280px; 
  height: 350px;
  max-width: 320px;
  text-align: center;
  object-fit: scale-down;
}
.item9 > p{
  text-align: center;  
}
.tuhan {
  color: mediumvioletred;
  margin-left: 120px;
}
.tuhannaiyo {
  margin-left: 140px;
  margin-bottom: 40px;
}
.han-sa .shosai {
  
  margin: 10px;
  margin-left: 150px;
  margin-right: 10px;
  border-collapse: collapse;
  border:1px solid #333;
}
/* --- ↑ shohin ------------------------------------------- */
/* --- ↓商取引 ------------------------------------------- */ 
.yohanbai {
  color: crimson;
  margin-top: 30px;
  text-align: right;
  margin-right: 100px;
}
.yohanbai:hover {
  color: chartreuse;
  
}
div.main5 {
  width: 650px;
  margin : 0 auto;  
}
h2.toku {
  padding: 30px;
}
td.hyo2 {
  padding-left: 10px;
  padding-right: 10px;
}
td.hyo3 {
  width: 410px;
  padding-left: 10px;
  padding-right: 10px;
}
.junbi {
  width: 600px;
  margin : 0 auto;  
  margin-top: 50px;
  margin-bottom: 20px;
}
.junbi > .ju1 {
  text-align: center;
  font-size: 50px;
  color: blue;
  font-weight: bold;
}
.junbi > .ju2 {
  text-align: center;
  font-size: 20px;
  color: blue;
  font-weight: bold;
}
.imgjunbi{
  style=display: block;
  margin: auto;";
}
/* --- ↑商取引 ------------------------------------------- */ 
/* --- ↓予約販売ぺージ  ------------------------------------------- */

.contena_yo{
  display: grid;
  margin: 50px;
  gap: 10px;*/
  grid-template-columns: 1fr 1fr 1fr 1fr;  
  grid-template-rows: auto auto;
  
}
.main-yo{
  grid-row: 1 / 2;
  grid-column: 1 / 4; 
  
}
.aside-yo{
  justify-self: center; 
  grid-row: 1 / 2;
  grid-column: 4 / 5;
  background-color: #CCFFCC;
}
.con1{
  width: 100%;table-layout: fixed;
}
.retsu1{
  width: 30px;
  
}
.retsu2{
  width: 30px;
 
}
.retsu3{
  
  
}
.retsu4{
  width: 30px;
  
}
.yoyakutable{
  font-size: 20px;
  text-align: center;
  vertical-align: middle;
  font-weight: bolder;
}
/* --- ↑予約販売ぺージ  ------------------------------------------- */
/* --- ↓問合せぺージ  予約------------------------------------------- */
.main10 {
  border-style: ridge;
  padding: 10px;  
  width: 800px;
  margin : 0 auto;    
}    
.main101 {
  border-style: ridge;
  padding: 10px;  
  width: 800px;
  margin : 0 auto;    
}   
  
table {
  padding: 5px;  
  margin-left: 10px;
}   
td {
  height: 30px;
} 
input {
  margin: 4px;
  padding-left: 6px;
}
.tab1 {
  width: 180px;
}
tr {
  border: 2px #808080 solid;
}
input,textarea {
  border: 2px #808080 solid;    
}
.ta1 {
  vertical-align:top;    
}
textarea {
  vertical-align:top;
  margin-top: 4px;
  margin-left: 3px;
}
.chui {
  color: red;
  font-size: large;
  font-weight: bolder;
}
.kakunin {
  color: blue;
  font-size: larger;
  font-weight: bolder;
}
/* --- ↑問合せぺージ  予約------------------------------------------- */
/* --- ↓新着情報 ------------------------------------------- */
#whatsnew { 
  width: 300px;
  height: 300px;
  padding-left: 5px;
  margin-left: 5px;
  margin-right: 10px;/*atuhead;*/
 }
/* --- ↑新着情報 ------------------------------------------- */
/* --- ↓フッター以下 ------------------------------------------- */
.footer{
  height: 20px;
  background-color: rgb(203, 213, 219);
  color: #661010;
  clear: both;
  margin-right: 2px;
}
/* スクロールテスト　*/

.marquee {
  display: flex;
  white-space: nowrap;
  overflow: hidden;
  gap: 1rem;
  font-size: 1rem;
}
.marquee-inner {
  text-align: center;
  padding-left: 200px;
  animation: marquee 20s linear infinite;
}

@keyframes marquee {
  0%   { translate: 0; }
  100% { translate: calc(-100% - 1rem); }
}

/* スクロールテスト　*/
.wdpancs{
font-size: 15px;
color: royalblue;
text-align: center;
background-color: whitesmoke;
}
/* --- ↓アニメイション ------------------------------------------- */
.start {
	background: #FFF;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
  height: auto;
  z-index: 0;
  background-size: cover;
    background-position: center top;
    min-height: 100vh;
	z-index: 9000;
}


.start p {
	position: fixed;
  left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	display: none;
  z-index: 10;	
    object-fit: cover;
}
/* --- 全体のBOX定義 ---------------------------------------- */
.box {
    position   : relative;
    max-width  : 1200px;
    height     : 250px;
    margin     : auto;
    overflow   : hidden;        
  }
  
  /* --- 背景の指定 ------------------------------------------- */
  .box .bgImg {
    position   : absolute;
    top        : 0;
    left       : 0;
    bottom     : 0;
    right      : 0; 
    opacity    : 0;  
    animation  : bgAnime 16s infinite;   /* 4画像 × 各5s = 20s */
    background-position: center center;
    background-size: cover;            
  }
 
  /* --- 段差で背景画像のアニメーションを実行 ----------------- */
  .box .src1 {
    background-image : url(../imges/tb1.jpg);   /* 背景の画像を指定 */
  }  
  .box .src2 {
    background-image : url(../imges/tb22.jpg);   /* 背景の画像を指定 */
    animation-delay  : 4s;
  }
  .box .src3 {
    background-image : url(../imges/tb3.jpg);   /* 背景の画像を指定 */
    animation-delay  : 8s;
  }
  .box .src4 {
    background-image : url(../imges/tb4.jpg);   /* 背景の画像を指定 */
    animation-delay  : 12s;
  }
 
@keyframes bgAnime {
     0% { opacity: 0; }
     5% { opacity: 0.2; }
    25% { opacity: 1; }
    30% { opacity: 0; }
   100% { opacity: 0; }
  }
/* --- スマホ対応                          ----------------- */
/* --- スマホ対応                          ----------------- */  
/* --- スマホ対応                          ----------------- */
/* --- スマホ対応                          ----------------- */  
/* --- スマホ対応                          ----------------- */
/* --- スマホ対応                          ----------------- */  
/* --- スマホ対応                          ----------------- */
/* --- スマホ対応                          ----------------- */  
/* --- スマホ対応                          ----------------- */
/* --- スマホ対応                          ----------------- */  
/* --- スマホ対応                          ----------------- */
/* --- スマホ対応                          ----------------- */  
/* --- スマホ対応                          ----------------- */
/* --- スマホ対応                          ----------------- */  
/* --- スマホ対応                          ----------------- */
/* --- スマホ対応                          ----------------- */  
@media screen and (max-width:600px) {
/* --- ↓ index ------------------------------------------- */
/*gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg*/
.container0{  
  display: grid;
  background-color: rgb(237, 239, 239);
  color: blue;
  grid-template-columns: 1fr 370px 1fr;/* 1fr*/
  grid-template-rows: 100px auto auto auto auto auto;
  margin-right:auto;
  margin-left:auto; 
  }
.item0{
    padding-top: 20px;
    color:rgb(42, 41, 46);
    grid-row: 1 / 2;
    grid-column: 2 / 3;
}
.item1{
  color:rgb(143, 10, 10);
  grid-row: 2 / 3;
  grid-column: 2 / 3;
}
  width: 250px;
}
.zu112{
    width: 370px;
    height: auto;
}
.zu113{
  width: 400px;
  height: auto;
}
.item2{
  color:rgb(143, 10, 10);
  grid-row: 3 / 4;
  grid-column: 2 / 3;
}
.item3{
  color:rgb(143, 10, 10);
  grid-row: 4 / 5;
  grid-column: 2 / 3;
}
.item4{
    color:rgb(143, 10, 10);
    grid-row: 5 / 6;
    grid-column: 2 / 3;
  }
.item5{
    color:rgb(143, 10, 10);
    grid-row: 6 / 7;
    grid-column: 2 / 3;
}
/*gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg*/
#home{
  background-color: aquamarine;
  background-image: url(../imges/kimiwo.jpg);
  min-height: 100vh;
  /*width: 100%;*/
  /*test********************************************/
  position:absolute;
  top:0;left:0;right:0;bottom:0;
  background-size:cover;
  /*横は50% 縦は80%の位置を中心に設定*/
  background-position:50%;
  /*test********************************************/
}
body{
  background-color: #e6eae6;
  margin: auto;
}
.navtop {
  position: static;
  top: 0;
  } 
  .tspace {
    height: 360px;
  }
.container_i{
  display: grid;
  grid-template-columns: 5px 370px;
  grid-template-rows: 360px 400px 540px 100px 300px auto;  
}

/* バナー内コンテンツ */
.news-banner__content {
  display: inline-block;
  color: #fff;
  color: magenta;
  line-height: 30px;
  padding-left: 100%;
  
  white-space: nowrap;
  animation: animate-banner 20s linear infinite;
}
.item_i1{
  padding-top: 300px;
  grid-row: 1 / 2;
  grid-column: 2 / 3;
  font-size: large;
  color:rgb(170, 21, 83);
  
}
.item_i2{
  grid-row: 2 / 3;
  grid-column: 2 / 3; 
  margin:10px;
  padding: 10px;
}
.item_i3{
  grid-row: 3 / 4;
  grid-column: 2 / 3;
  padding-top: 20px;
  }

.item_i4{
  grid-row: 4 / 5;
  grid-column: 2 / 3;
}
.item_i5{
  grid-row: 5 / 6;
  grid-column: 2 / 3;
  padding-left: 20px;
  margin-left: 10px;
}
.right-navi_1{
  padding-right: 20px;
}

.navi02_i:hover{
  background-color: rgb(6, 252, 166); 
  font-size: large;
  color: "#CC0099";
  padding-left: 20px;
  }
  .item_i1b{
    padding-top: 20px;
    }
    .zu0720{
      padding-left: 50px;
      width: 300px;
      padding-right: auto;
    }
  /* --- ↓新着情報 ------------------------------------------- */
 .left-navi_i{ 
  position:relative;
  width: 240px;
 }
  #whatsnew_i { 
  width: 260px;/*340px*/
  height: 250px;
  padding-left: 5px;
  margin-left: 5px;
  margin-right: 5px;/*atuhead*/
  /*border: rgb(228, 226, 226);*/  
  border-width: 1px;
  border-style: solid;
  color: red; 
  
  background-color: #CCFFCC;/*rgb(6, 252, 166)*/
  opacity: 0.6;
 }

  .wnewtop {
    color: red;
   }
   .whatnewbody{
    background-color: rgb(90, 185, 91);
   }

   #whatsnew { 
    width: 260px;/*400px*/
    height: 300px;
    
    margin-left: 5px;
    margin-right: 10px;/*atuhead*/
}
  /* --- ↑新着情報 ------------------------------------------- */
  /* --- ↓カレンダー ------------------------------------------- */
  #carenda_i{

    width: 300px;
    height: 400px;
    }
/* --- ↑カレンダー ------------------------------------------- */
 .bodycon{
   color: #CCFFCC;
   width: 150px;
 }
 .wnewtop {
  width: 232px;
  color: #333;
 }
 .shasin{
  display: none;
  width: 100px;
}
/* --- ↑ index ------------------------------------------- */
.contena-co{
  /*background-color: aqua;*/
  width: 400px;/*400px;*/
  display: grid;
  grid-template-rows: auto;
  grid-auto-columns: auto;
  margin: auto;
  margin-top: 50px;
} 
 .cont1-co {
  margin: 0;
  margin-top: 50px;
  grid-row: 2 / 3;
  grid-column: 1 / 2;   
  margin-left: auto;
  margin-right: auto;
  width: 380px;/*400px;*/
} 
.cont2-co {
  margin-top: 50px;
  width: 380;
  grid-row: 1 / 2;
  grid-column: 1 / 2;   
  border: rgb(228, 226, 226);
  border-width: 10px;
  border-style: groove; 
  margin: auto;
} 
/*.cont3-co {
  grid-row: 3 / 4;
  grid-column: 1 / 2;
  margin-left: auto;
  margin-right: auto;
  width: 380px;    
} */
.cont31-co {
  grid-row: 3 / 4;
  grid-column: 1 / 2;
  margin-left: auto;
  margin-right: auto;
  width: 380px;    
} 
.fig41 {
  grid-row: 4 / 5;
  grid-column: 1 / 2;
  margin-left: auto;
  margin-right: auto;
  width: 380px; 
} 
.cont32-co {
  margin-top: 20px;
  grid-row: 5 / 6;
  grid-column: 1 / 2;
  margin-left: auto;
  margin-right: auto;
  width: 380px;    
} 
.fig42 {
  grid-row: 6 / 7;
  grid-column: 1 / 2;
  margin-left: auto;
  margin-right: auto;
  width: 380px; 
} 
.cont33-co {
  margin-top: 20px;
  grid-row: 7 / 8;
  grid-column: 1 / 2;
  margin-left: auto;
  margin-right: auto;
  width: 380px;    
} 
.fig43 {
  grid-row: 8 / 9;
  grid-column: 1 / 2;
  margin-left: auto;
  margin-right: auto;
  width: 380px; 
}
.fig44 {
  margin-top: 50px;
  grid-row: 9 / 10;
  grid-column: 1 / 2;
  margin-left: auto;
  margin-right: auto;
  width: 380px; 
}  
.cont34-co {
  margin-top: 20px;
  grid-row: 10 / 11;
  grid-column: 1 / 2;
  margin-left: auto;
  margin-right: auto;
  width: 380px;    
} 
.cont34b-co {
  margin-top: 20px;
  grid-row: 11 / 12;
  grid-column: 1 / 2;
  margin-left: auto;
  margin-right: auto;
  width: 380px;    
} 
.fig45 {
  margin-top: 50px;
  grid-row: 12 / 13;
  grid-column: 1 / 2;
  margin-left: auto;
  margin-right: auto;
  width: 380px; 
}
.fig46 {
  margin-top: 50px;
  grid-row: 13 / 14;
  grid-column: 1 / 2;
  margin-left: auto;
  margin-right: auto;
  width: 380px; 
}    

.cont35-co {
  margin-top: 20px;
  grid-row: 14 / 15;
  grid-column: 1 / 2;
  margin-left: auto;
  margin-right: auto;
  width: 380px;    
} 
/*.cont4-co {
  grid-row: 4 / 5;
  grid-column: 1 / 2;
  margin: 0 auto;
} */
.fig2 {
  margin-right: 10px;
  padding-left: 20px;
  float: left;
} 
.fig2 img {
  max-width: 200px;
}

.top21-co {
  padding-left: 20px;     
  font-size: 18px; 
}
.top22-co {
  margin-left: 0;
  padding-left: 20px;
  font-size: 18px; 
}

.top1-co{
  position: relative;
  padding-left: 10px;    
  color: mediumvioletred;
}
.top2-co{
  position: relative;
  padding-left: 20px; 
  font-size: 18px;
  }
/* --- ↓hotei ------------------------------------------- */
.contena-ho{
  display: grid;
  width: 400px;/*400px;*/  
  grid-template-rows: auto; /*auto*/
  grid-template-columns: 10px 1fr 40px;
  margin: auto;
  margin-top: 50px;
 } 
.cont1-ho {
  margin: 0;
  margin-top: 50px;
  grid-row: 2 / 3;
  grid-column: 2 / 3; 
  margin-right: 10px;
  width: 380px;/*400px;*/       
} 
.cont2-ho {
  margin-top: 50px;
  width: 380px;
  grid-row: 1 / 2;
  grid-column: 2 / 3;   
  border: rgb(228, 226, 226);
  border-width: 10px;
  border-style: groove; 
  margin: auto;
} 
.cont3-ho {
    grid-row: 3 / 4;
    grid-column: 2 / 3; 
   
    margin-right: 10px;  
    width: 380px;/*400px;*/    
} 
.cont4-ho {
    grid-row: 4 / 5;
    grid-column: 2 / 3; 
    margin-left: 10px; 
    margin-right: 10px;        
} 
.cont5-ho {
  grid-row: 5 / 6;
  grid-column: 2 / 3;
  
  margin-right: 10px;  
  width: 380px;/*400px;*/       
} 
.cont6-ho {
  grid-row: 6 / 7;
  grid-column: 2 / 3;
  
  margin-right: 10px;       
} 
.top1-ho{
  margin: 0;
  position: relative;
  padding-left: 10px;    
  color: mediumvioletred;
}
.top2-ho{
  position: relative;
  padding-left: 20px; 
  padding-right: 10px;
  font-size: 18px;
  }
  .top21-ho {
    position: relative;
    padding-left: 20px;     
    font-size: 18px; 
  }
  .fig4-ho{
    width: 280px; 
    padding-left: 50px;
    padding-right: 100px;        
  }
/* --- ↑ hotei ------------------------------------------- */
/* --- ↓shohin ------------------------------------------- */
.consmp {    
  display: grid;
  margin: 10px;
  gap: 10px;
  grid-template-columns: 1fr;  
  grid-template-rows: auto ;
  
}
.han-sa {
  margin: 0;
  margin-top: 50px;
  grid-row: 1 / 2;
  grid-column: 1 / 2;        
} 
.aside-sa {  
  margin: 0;
  margin-top: 50px;
  grid-row: 9 / 10;
  grid-column: 1 / 2; 
  padding-top: 20px;
  padding-left: 10px;
  padding-right: 10px;
  justify-self: center;  
  border: rgb(228, 226, 226);
  border-width: 10px;
  border-style: groove;       
} 

.con1-sa {  
  grid-row: 2 / 3;
  grid-column: 1 / 2;        
} 
.con2-sa {  
  grid-row: 3 / 4;
  grid-column: 1 / 2;        
} 
.con3-sa {  
  grid-row: 4 / 5;
  grid-column: 1 / 2;        
} 
.con4-sa {  
  grid-row: 5 / 6;
  grid-column: 1 / 2;        
} 
.con5-sa {  
  grid-row: 6 / 7;
  grid-column: 1 / 2;        
} 
.con6-sa {  
  grid-row: 7 / 8;
  grid-column: 1 / 2;        
} 
.con7-sa {  
  grid-row: 8 / 9;
  grid-column: 1 / 2;        
} 
.han-sa > p {
  margin: 0px;
  padding-left: 20px;
}
.han-sa > h2 {
  margin: 0px;
  padding-left: 10px;
}
.han-sa .shosai {
  margin: 10px;
  margin-left: 50px;
  margin-right: 10px;
  border-collapse: collapse;
  border:1px solid #333;
}

/* --- ↑shohin ------------------------------------------- */

.main101 {
  border-style: ridge;
  padding: 10px;  
  width: 400px;
  margin : 0 auto;    
}  
.shashin {
 width: 350px; 
}
/* --- ↓予約販売ぺージ  ------------------------------------------- */

.contena_yo{
  display: grid;
  margin: 50px;
  gap: 10px;*/
  grid-template-columns: 1fr;  
  grid-template-rows: auto auto;
  
}
.main-yo{
  grid-row: 1 / 2;
  grid-column: 1 / 2; 
  
}
.aside-yo{
  justify-self: center; 
  grid-row: 2 / 3;
  grid-column: 1 / 2;
}
.con1{
  width: 100%;table-layout: fixed;
}
.retsu1{
  width: 30px;
}
.retsu2{
  width: 30px;
}
.retsu3{
  
  
}
.retsu4{
  width: 30px;
 
}
.yoyakutable{
  font-size: 20px;
  text-align: center;
  vertical-align: middle;
  font-weight: bolder;
}
/* --- ↑予約販売ぺージ  ------------------------------------------- */