@charset "UTF-8";


/* ★★★★★★★★★★★★ 
 全ページ共通
★★★★★★★★★★★★ */

/* @@@@@@@@@@@@@@@@@@@@ 
 基本設定
@@@@@@@@@@@@@@@@@@@@ */


html {
 font-size: 62.5%;
 scroll-behavior: smooth;
}


body {  
 margin: 0px auto;
 background-color: white;
 font-size: 1.6em;
 -webkit-text-size-adjust: 100%;
 letter-spacing: 0.1em;
 font-family:'メイリオ', 'Meiryo','YuGothic','Yu Gothic','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3','ＭＳ ゴシック',sans-serif;
 color: rgb(46,46,46);
/*animation: bgchange 20s ease infinite;*/
 }


.container {
 aborder: 1px solid green;
 margin: auto;
 height: auto;
 margin-top: 5px;
 min-height: auto;
 padding: 10px;
 justify-content: center;
 }



/* @@@@@@@@@@@@@@@@@@@@ 
 下サイドの設定
@@@@@@@@@@@@@@@@@@@@ */

.fwrapper{
 width: 100%;
 background-color: rgb(102,80,77);
}


.footer{
 text-align: center;
 margin: auto;
 max-width: 800px;
 color: white;
 font-weight: bold;
 padding: 10px;/* 重要:これを書かないとフッターの下に余白ができてしまう */
}



/* :::::::::: スクロール時で現れるボタンの設定 :::::::::: */
main {
 position: relative;
}

/* 右下のTOPへ戻るボタン */
.pagetop{
 display: none;
 width: 60px;
 height: 60px;
 box-sizing: border-box;
 background: #373737;/*FFF;*/
 border: 1px solid #999;
 border-radius: 10% 10%; 
 padding-top: 10px;
 text-align: center;
 letter-spacing: -1px;
 font-size: 95%;
 text-decoration: none;
 color:#fff;
 opacity: 0.7;
 position: fixed;
 bottom: 90px;
 right: 20px;
 z-index: 10000;
}

.pagetop::after{
 content: "";
 display: block;
 width: 25%;
 height: 25%;
 top: 25%;
 left: 0;
 right: 0;
 margin: auto;
 position: absolute;
 transform: rotate(-45deg);
}


/* 右下のHOMEへ戻るボタン */
.gohome{
 display: none;
 width: 60px;
 height: 60px;
 box-sizing: border-box;
 background:#373737;/*FFF;*/
 border: 1px solid #999;
 border-radius: 10% 10%; 
 padding-top: 10px;
 text-align: center;
 letter-spacing: -1px;
 font-size: 95%;
 text-decoration: none;
 color:#fff;
 opacity: 0.7;
 position: fixed;
 bottom: 90px;
 right: 85px;
 z-index: 10000;
}

.gohome::after{
 content: "";
 display: block;
 width: 25%;
 height: 25%;
 top: 25%;
 left: 0;
 right: 0;
 margin: auto;
 position: absolute;
 transform: rotate(-45deg);
}


/* 右下の俺流の稼ぎ方へ戻るボタン */
.goaimani{
 display: none;
 width: 125px;
 height: 60px;
 box-sizing: border-box;
 background:blue;
 border: 1px solid #999;
 border-top-right-radius:5px;
 border-top-left-radius:5px;
 border-bottom-right-radius:5px;
 border-bottom-left-radius:5px;
 padding-top: 10px;
 text-align: center;
 letter-spacing: -1px;
 font-size: 95%;
 text-decoration: none;
 color:#fff;
 opacity: 0.7;
 position: fixed;
 bottom: 20px;
 right: 20px;
 z-index: 10000;
}

.goaimani::after{
 content: "";
 display: block;
 width: 25%;
 height: 25%;
 top: 25%;
 left: 0;
 right: 0;
 margin: auto;
 position: absolute;
 transform: rotate(-45deg);
}


/* @@@@@@@@@@@@@@@@@@@@ 
 ズームのフィルター
@@@@@@@@@@@@@@@@@@@@ */

.img_wrap{
 height: auto;
 overflow: hidden;
 cursor: pointer;
}
.img_wrap img{
 transition-duration: 0.5s;
}
.img_wrap:hover img{
 transform: scale(1.2);
 transition-duration: 0.5s;
}




/* @@@@@@@@@@@@@@@@@ */

/* うり坊の肴メニューバー */
/* 外枠 */
.cnta {
 display: flex;
 background-color: rgb(250,253,240);
 width: 100%;
 height: 3.5em;
 border-style: solid;
 border-width: 0px 0px 3px 0px;
 border-color: gray;
 max-width: 100%;
}


/* menu 現在枠なし */
.cnta_a {
 margin: 10px;
 background-color:rgb(250,253,240); 
 width: 230px;
 height: 40px;
 max-width: 100%;
}


/* テキスト */
.cnta_a p{
 text-align:center;
 margin: 0 auto;
 font-size: 120%;
 font-weight: bold;
 color: gray;
 -webkit-text-stroke: 0px gray;
}



/* @@@@@@@@@@@@@@@@@@@@ 
 カラムの設定
@@@@@@@@@@@@@@@@@@@@ */

/* 全体 */
#A {
 flex-basis: 37%;
 aborder: 1px solid green; 
 height: auto;
 margin-left: 30px;
 }

/* 全体	*/
#B {
 flex-basis: 60%;
 height: auto;
 aborder: 1px solid blue;
 }




/* ドロップダウン */
ul {
list-style-type: none;
 }


/* ナビゲーションメニュー */
.nav-menu {
  background-color: rgb(250,253,240);
  color: #fff;
  border-bottom:2px solid gray;
  height:40px;
  
}

.menu-list {
  display: flex;
  justify-content: left; /* メニューアイテムを中央揃えに */
  
}

.menu-item {
  background-color: rgb(250,253,240); /* メニューアイテムの背景色 */
  /*border-left: 1px solid #fff; メニューアイテムの左ボーダー */
  position: relative;
  transition: background-color .3s; /* 背景色の変化をアニメーション化 */
}

.menu-item:last-child {
  /*border-right: 1px solid #fff;  最後のメニューアイテムの右ボーダー */
}

/* メニューアイテムのホバースタイル */
.menu-item:hover .drop-menu-list {
  transform: scaleY(1); /* ドロップダウンメニューの表示 */
}

.menu-item:hover {
  background-color: rgb(237,248,201); /* メニューアイテムのホバー時の背景色 */
  transition: background-color .3s; /* 背景色の変化をアニメーション化 */
}

.drop-menu-item:hover {
  background-color: rgb(248,252,233); /* メニューアイテムのホバー時の背景色 */
  transition: background-color .3s; /* 不透明度の変化をアニメーション化 */
}

.menu-item a {
  align-items: center;
  color: gray; /* メニューアイテム内のリンクテキストの色 */
  font-weight: bold;
  font-size: 110%;
  display: flex;
  height: 40px;
  justify-content: center;
  text-decoration: none; /* リンクの下線を非表示 */
  width: 200px;
}

/* ドロップダウンメニュー */
.dop-menu {
  psosition: relative;
}

.drop-menu-list {
  left: -40px;
  position: absolute;
  top: 100%;
  transform: scaleY(0); /* ドロップダウンメニューの非表示 */
  transform-origin: center top; /* 変形を適応する基準を設定 */
  transition: transform .3s; /* 表示の変化をアニメーション化 */
  width: max-content;
  z-index: 1;
}

.drop-menu-item {
  background-color: rgb(237,248,201); /* ドロップダウンメニューの背景色 */
  transition: opacity .3s; /* 不透明度の変化をアニメーション化 */
}