@charset "UTF-8";


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

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

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


body {  
   margin: 0px auto;
   background-color:white;/* rgb(236,230,230);*/
   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);
 }


.container {
  margin:auto;
  height:auto;
  margin-top:5px;
  min-height: 100vh;
  display:flex;
 max-width:1000px;
 padding:10px;
 justify-content:center;
 }

/* @@@@@@@@@@@@@@@@@@@@ 
 TOP_banner
@@@@@@@@@@@@@@@@@@@@ */

.hwrapper{
 width: 100%;
 background-color:white;
 }

.header{
 margin: auto;
 max-width: 980px;
 padding: 10px;
 }

#topimg {
 margin:0px auto;
 width:950px;
 height:250px;
 background-image:url(../img/title_a.png);
 background-repeat:no-repeat;
 }



/* @@@@@@@@@@@@@@@@@@@@ 
 上部の帯　HOME
@@@@@@@@@@@@@@@@@@@@ */

/* 外側 */
.top_a {
 display: flex;
 height: 25px;
 width: 100%;
 padding: 5px 0px; 
 background-color: rgb(240,240,240);
 border-top: 10px solid rgb(102,80,77);
 border-bottom: 1px solid rgb(127,127,127);
 }

/* 内側 */
.top_a_txt {
 max-width:1020px;
 width:100%;
 min-width:800px;
 margin:auto;
 color: rgb(102,80,77);
 font-weight: bold;
 letter-spacing: 0.1em; 
 }



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

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


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



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

/* 全体 */
#A {
 flex-basis: 70%;
/* border: 1px solid green;*/ 
 height: auto;
 margin-right: 10px;
 }


/* 要素横並び */
.dis_fle {
 display: flex;
 }



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

/* 全体	*/
#B {
 flex-basis: 25%;
 height:auto;
 /* border:1px solid blue; */
 margin-left:15px;
 }


/* 固定する場合に使用 */
#B .box{
   position: sticky;
   top: 25px;
 }




/* @@@@@@@@@@@@@@@@@@@@ 
 特殊リンク
@@@@@@@@@@@@@@@@@@@@ */

.type_a {
 color:blue;
 transition:color 0.3s;

 }

.type_a:visited {
 color:brown;
 }

.type_a:hover {
 color:orange;
 }

.type_a:active {
 color:red;
 }


/* 外部リンク画像付き */
.type_x a{
   color: blue;/*rgb(46,46,46);*/
   text-decoration: underline
 }

.type_x a:hover{
   color: tomato;
   text-decoration: none;
 }

.type_x a:after{
   margin-left: 5px;
   content: url("../画像/link_out_1.png");
 }

/* 白文字で下線ありホバーで赤色 */
#type_c a{
   color: white;/*rgb(46,46,46);*/
   text-decoration: underline
 }

#type_c a:hover{
   color: tomato;
   text-decoration: none;
 }

/* 黒文字で下線ありホバーで赤色 */
#type_e a{
   color: rgb(46,46,46);
   text-decoration: underline
 }

#type_e a:hover {
   color: tomato;
   text-decoration: none;
 }

.type_y a {
 color:white;
 text-decoration: none;
 transition:color 0.3s;
 }

.type_y a:hover {
 color:orange;
 }


/* アスタリスク */
sup {
 font-weight:bold;
 color:red;
 }

/* ----- 縦の空白 ----- */
/* Aパターン */
.dec_xx {
 height:10px;
 }

/* Bパターン */
.dec_yy {
 height:30px;
 }

/* Cパターン */
.dec_zz {
 height:20px;
 }

/* Dパターン */
.dec_xa {
 height:16px;
 }

/* Eパターン */
.dec_ya {
 height:32px;
 }

/* Fパターン */
.dec_za {
 height:48px;
 }



/* :::::::::: スクロール時で現れるボタンの設定 :::::::::: */
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;
   /* border-top: 2px solid #FFF; */
   /* border-right: 2px solid #FFF;*/
    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;
   /* border-top: 2px solid #FFF;*/
   /* border-right: 2px solid #FFF;*/
    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;/*FFF;*/
    border: 1px solid #999;
 border-top-right-radius:5px;
 border-top-left-radius:5px;
 border-bottom-right-radius:5px;
 border-bottom-left-radius:5px;

/*    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: 20px;
    right: 20px;
    z-index: 10000;
}
.goaimani::after{
    content: "";
    display: block;
   /* border-top: 2px solid #FFF;*/
   /* border-right: 2px solid #FFF;*/
    width: 25%;
    height: 25%;
    top: 25%;
    left: 0;
    right: 0;
    margin: auto;
    position: absolute;
    transform: rotate(-45deg);
   
}


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

.img_wrap{
  /*border: 1px solid #ddd;*/
  /*width: 300px;*/
  height: auto;
 /* margin: 0 auto;*/
  overflow: hidden;
  cursor: pointer;
}
.img_wrap img{
  /*width: 100%;*/
  transition-duration: 0.5s;
}
.img_wrap:hover img{
  transform: scale(1.2);
  transition-duration: 0.5s;
}



/* @@@@@@@@@@@@@@@@@@@@ 
 ぼかしのフィルター
@@@@@@@@@@@@@@@@@@@@ */

.img_wrapa{
 /* border: 1px solid #ddd;*/
 /* width: 300px;
  height: 226px;*/
  overflow: hidden;
}
.img_wrapa img{
  border: 1px solid #ddd;
  width: 100%;
  transform: scale(1.1);
  cursor: pointer;
  filter: blur(5px);
  transition-duration: 0.5s;
}
.img_wrapa img:hover{
  filter: blur(0);
  transition-duration: 0.5s;
}

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