html {
	 height: 100%;
}
body{
	font-family: 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
	height: 100%;
}
/*最初にマージンを初期化(リセットcssを作るらしいhttp://shiru-web.com/2017/06/26/01-62/)*/
* {
	margin: 0px;
	padding: 0px;
}
	

/* navigation barにbodyの位置を合わせる */
body.adjustTopToNavbar{
	padding-top: 0px;
}

/* p内では区切り文字がなくとも英字を改行させる */
p{
  font-family: 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
	word-wrap:break-word;
  overflow-wrap: break-word;
  color:#333333;
  font-weight: 500;
  font-size: 16px;
}
a{
  font-family: 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
	word-wrap:break-word;
  font-weight: 500;
  font-size: 16px;
}

a.no_all {/* 全ての効果がない */	 	
	text-decoration: none;  
}

/* left block型の見出し */
.leftBlock1{
	padding-left: 10px;
	border-left: 15px solid;
	border-color: #5b2;
  font-size: 16px;
}
.leftBlock2{
	padding-left: 5px;
	border-left: 10px solid;
	border-color: #5b2;
  font-size: 16px;
}
.leftBlock3{
	padding-left: 5px;
	border-left: 5px solid;
	border-color: #5b2;
  font-size: 16px;
}

/* ボタンサイズ亜種 */
.btnSm, .btnSm:hover{
	position: relative;
  display: inline-block;
  margin-top:5px;
  padding: 0.25em 0.5em;
  text-decoration: none;
  color: #FFF;
  background: #03A9F4;/*色*/
  border: solid 1px #0f9ada;/*線色*/
  border-radius: 4px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
  text-shadow: 0 1px 0 rgba(0,0,0,0.2);
}

.btn-gradient-radius{
	display: inline-block;
  padding: 7px 20px;
  border-radius: 10px;
  text-decoration: none;
  color: #FFF;
  background-image: linear-gradient(45deg, #87ceeb 0%, #00bfff 100%);
  transition: .4s;
}
.btn-gradient-radius:hover {
  background-image: linear-gradient(45deg, #87ceeb 0%, #00bfff 100%);
}
.btnS:active {
	/*押したとき*/
  border: solid 1px #03A9F4;
  box-shadow: none;
  text-shadow: none;
}


/**ボタンサイズ補足
 * bootstrap3には、
 * btn-lg, (指定なしサイズ), btn-sm, btn-xs、
 * の四つのサイズが用意されている 
 */

 /*アイコン*/
 i.red{
	color:red;
}
 i.blue{
	color:blue;
}
 i.yellow{
	color:yellow;
}
/* リストグループ水平線のみのスタイル */
.liHoriLine{
	position: relative;
	display: block;
	padding: 0px 5px 5px 5px;
	margin-top: 12px;
	margin-bottom: 12px;
	background-color: #fff;
	border: 1px solid;
	border-radius: 10px;
	border-color: #ddd;
}

/* overflow: hidden */
.overflowHidden{
	overflow: hidden;
}

/* 改行を禁止し、横幅を超えた文字は隠す */
.hideOverWidth{
	white-space: nowrap;
	overflow: hidden;
	width: 100%;
}

/* display: inline-flex */
.inlineFlex{
	display: inline-flex;
}

/*flex用のクラス*/
.flex{
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
}
/*flex以下の子クラスのdivの左側要素にleftを追加し、右側にrightを追加する*/
.flex-child-left{
  width: 50%;
}
.flex-child-right{
  width: calc(100% - 50%);
}

/* 横線を引く */
.borderline{
	margin-top: 5px;
	margin-bottom: 15px;
	border-bottom: 1px solid #eee;
}

/* margin調整 */
.marginTop0{
	margin-top: 0;
}
.marginTop05{
	margin-top: 5px;
}
.marginTop1{
	margin-top: 10px;
}
.marginTop2{
	margin-top: 20px;
}

.marginBottom0{
	margin-bottom: 0;
}
.marginBottom05{
	margin-bottom: 5px;
}
.marginBottom1{
	margin-bottom: 10px;
}
.marginBottom2{
	margin-bottom: 20px;
}
.marginLeft0{
	margin-left: 0;
}
.marginLeft05{
	margin-left: 5px;
}
.marginLeft1{
	margin-left: 10px;
}
.marginLeft2{
	margin-left: 20px;
}
.marginRight0{
	margin-left: 0;
}
.marginRight05{
	margin-left: 5px;
}
.marginRight1{
	margin-left: 10px;
}
.marginRight2{
	margin-left: 20px;
}
/* padding調整 */
.padding0{
	padding: 0;
}

.paddingLeft0{
	padding-left: 0;
}
.paddingLeft05{
	padding-left: 5px;
}
.paddingLeft1{
	padding-left: 10px;
}
.paddingLeft2{
	padding-left: 20px;
}

.paddingRight0{
	padding-right: 0;
}
.paddingRight05{
	padding-left: 5px;
}
.paddingRight1{
	padding-right: 10px;
}
.paddingRight2{
	padding-right: 20px;
}

/*hタグデザイン*/
.h4{
  font-family: 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
}


/*フォントアクセント*/
.set_marker_yellow {
background:linear-gradient(transparent 70%, #FFFF00 0%);
}
.set_marker_red {
background:linear-gradient(transparent 70%, #FF0000 0%);
}
.set_bold{
  font-weight:bold;
}
/*フォント枠デザイン*/
.border{
  display: inline-block;
  padding:5px;
  border:solid;
  border-radius: 5px;
}
.border:hover{
  transition: 0.5s;
  background:green;
  border:solid green;
  border-radius: 5px;
  color:white !important;
}



/*imgを同サイズで横並びさせるクラス*/
.col-a .col {
    float: left;
    margin-left: 1px;
    margin-top:15px;
    margin-bottom:5px;
}
.col-a .col {
    width: 24%;
}
/*floatの解除*/
.col-a:after {
    content: '';
    display: block;
    clear: both; 
    height: 0;
}
/*画像のサムネイル*/
.col-thumb {
  width:100%;
  height:150px;
  object-fit:cover;
}

.col-thumb-half {
  width:50%;
  height:auto;
  object-fit:cover;
  border-radius: 10px;
}


/*imgズームアップエフェクト*/
/*img親要素にscaleクラス追加*/
.scale {
    width: 100%;
    overflow: hidden;
}
.scale img {
    -moz-transition: -moz-transform 0.3s linear;
    -webkit-transition: -webkit-transform 0.3s linear;
    -o-transition: -o-transform 0.3s linear;
    -ms-transition: -ms-transform 0.3s linear;
    transition: transform 0.3s linear;
}
.scale img:hover {
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -o-transform: scale(1.05);
    -ms-transform: scale(1.05);
    transform: scale(1.05);
}

/*ファイル選択ボタンデザイン*/
.file-upload {
  margin: 10px 0px 10px 0px;
    display: inline-block;
  padding: 7px 10px;
  border-radius: 25px;
  text-decoration: none;
  color: #FFF;
  background-image: linear-gradient(45deg, #FFC107 0%, #ff8b5f 100%);
  transition: .4s;
}
.file-upload input {
     display: none;
}
.file-name-text{
  margin: 15px 0px 10px 10px;
  width: 7em;
  max-width: 70%;
  float: left;
}
/*ページ読み込み待機*/
/*画面全体にローディング画面を表示*/
#showloading {
width: 100%;
height: 100vh;
background-color: #fff;
position: relative;
}
#showloading img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.hidden-content {
  height: 0px; 
  overflow-y: hidden;
}

/*ユーザー一覧モーダルウィンドウ*/
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.5); /* モーダルの背景 */
  z-index: 10; /* 必要に応じて */
}
.modal-content {
  background-color: #fff;
  margin: 20% auto;
  width: 85%;
  border-radius: 5px;
  max-height: 80%; /* モーダルの最大高さを設定 */
  box-shadow: 0 5px 8px 0 rgba(0,0,0,0.2),0 7px 20px 0 rgba(0,0,0,0.17);
  overflow-y: auto; /* 必要に応じてスクロールを有効化 */
  animation-duration: 1s;
  position: relative;
}
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}
.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}
.user-list {
  max-height: 400px; /* 適宜設定 */
  margin-left: 40px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: start;
}
.user-list > div {
  display: flex;
  align-items: start;
  margin-bottom: 10px;
}
.user-list img {
  border-radius: 50%;
  width: 40px; /* インスタグラムと同程度のサイズに調整 */
  height: 40px;
  margin-right: 10px;
}

/* トップのヘッダー画像をクリックするためのクラス */
.slide-link {
  display: block; /* or inline-block, depending on your layout */
  width: 100%; /* adjust as needed */
  min-height: 100px; /* Adjust the height as needed */
}

.slide-img img {
  width: 100%; /* make sure the image takes up all available space */
}



/* 画面サイズの横幅が 768px 以下で適用 */
@media screen and (max-width: 768px) {
  /*row配下の左側コンテンツのクラス*/
  .row-content{
    margin-top:10px;
  }
  /*hタグデザイン*/
    /*記事やコラム系のデザイン*/
    h1.title-h1{
      font-weight:bold;
      font-family:"Lato", "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, "YuGothic M", "Helvetica Neue", Helvetica, Arial, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "MS ゴシック", "MS Gothic", sans-serif;
      margin:0px 0px 5px 5px;
      padding:10px 0px 0px 0px;
      font-size:16px !important;
        color: #424242;
        background: white !important;
      box-shadow: none !important;
    }
    h1.article-h1{
      font-weight:bold;
      font-family:"Lato", "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, "YuGothic M", "Helvetica Neue", Helvetica, Arial, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "MS ゴシック", "MS Gothic", sans-serif;
      margin:0px 0px 5px 0px;
      padding:10px 0px 0px 0px;
      font-size:20px !important;
        color: #424242;
        background: white !important;
      box-shadow: none !important;
    }
    h2.article-h2 {
      font-size:19px;
      font-weight:bold;
      background: #c2edff;/*背景色*/
      padding: 0.5em;/*文字まわり（上下左右）の余白*/
    }
    h3.article-h3{
      font-size:17px;
      font-weight:bold;
       /*線の種類（実線） 太さ 色*/
        border-bottom: solid 3px #c2edff;
    }
    /*フォントデザイン*/
    p.description-p{
      font-family: 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
      font-size:15px;
      margin:5px 0px 5px 0px;
    }
    /*星デザイン*/
    .star-rating-front {
    display:inline;
    font-size: 20px;
    top: 0;
    left: 0;
    overflow: hidden;
    color: #ffcc33;
    margin: 0px 1px 0px 5px;
}

    /*一般的な1列写真の表示*/
    .gallery{
      text-align: center;
      margin-bottom: 50px;
      font-size:12px;
    }
    .gallery h2{
      position: relative;
      display: inline-block;
      padding: 0 45px;
      font-size:20px;
    }
    .gallery h2{
      font-size:16px;
    }
    .gallery img{
      border-radius: 10px;
      width: 100%;
    }


    /*imgを同サイズで横並びさせるクラス(スマホ用追加要素)*/
    .col-a .col:first-child{
        margin-left: 1px;
    }
    .col-a .col{
      margin-bottom:1px;
        width: 48%; /*幅48%で横に2つ並べる*/
    }


	/*ページャーデザイン*/
	.pager  ul.pagination {
    text-align: center;
    margin: 0px;
    padding: 0px;
}
    .pager .pagination li{
    display: none;
  }
  .pager .pagination li.pre,
  .pager .pagination li.next,
  .pager .pagination li.first,
  .pager .pagination li.last{
    font-size:20px;
    display: inline-block;
    width: 22%;
    height: auto;
    text-align: center;
    color:black;
  }
  .pager .pagination li.pre a,
  .pager .pagination li.next a,
  .pager .pagination li.first a,
  .pager .pagination li.last a{
    vertical-align: middle;
    position: relative;
    width: 100%;
    text-align: center;
    color:black;
    border-radius: 10px;
    border-color: #00bfff;
    display:table-cell;
    vertical-align:middle;
    text-decoration: none;
  }

  /*目次デザイン*/
  #toc{
    color: #1e366a;
    border-top: solid #1e366a 1px;/*上のボーダー*/
    border-bottom: solid #1e366a 1px;/*下のボーダー*/
    padding: 0.5em 0 0em 0.5em;
    margin: 20px 0px 20px 0px;
  }
  /*******************************/
  /*水平スクロールのためのクラス*/
  /*****************************/
   .horizontal-list {
      overflow-x: auto;
      white-space: nowrap;
      -webkit-overflow-scrolling: touch;
    }
    /*おすすめ記事css*/
    .item-article {
      /* 横スクロール用 */
      display: inline-block;
      width: 70%;
      /* 見た目調整 */
      height: auto;
      margin: 2px;
      font-size: 24px;
      background: rgba(255, 255, 255, 0);
      border-radius: 6px;
      margin:10px 5px 10px 5px;
      /* padding:10px 0px 10px 10px; */
    }
    .item-article>a>img{
      border-radius: 10px;
    }
    /*おすすめ課題css*/
    .item {
      /* 横スクロール用 */
      display: inline-block;
      width: 80%;

      /* 見た目調整 */
      height: auto;
      margin: 2px;
      font-size: 24px;
      background: rgba(174, 174, 174, 0.2);
      border-radius: 6px;
      margin:10px 5px 10px 5px;
      padding:10px 0px 10px 10px;
    }
    .item>.title, .item-article>.title{
      display: inline;
      font-size:16px;
      color:black;
      font-weight:bold;
      margin:10px 0px 0px 10px;
      width: 100%;
      word-wrap: break-word;
      word-break: break-all;
    }
    .item>.new-line{
      font-size:0px;
      margin:0px;
      padding:0px;
    }
    .item>.area{
      display: inline;
      font-size:12px;
      margin:10px 0px 0px 10px;
    }
    .item>.prefc{
      display: inline;
      font-size:12px;
      margin:0px;
    }
    .item>.rmd{
      display: inline;
      font-size:16px;
      font-weight:bold;
      margin:0px;
    }
    .item>.grade{
      display: inline;
      font-size:16px;
      font-weight:bold;
      margin:0px;
    }
    .item>.review{
      display: inline;
      font-size:12px;
      margin:10px 0px 0px 10px;
      font-weight:bold;
    }
    .item>.user{
      display: inline;
      font-weight:bold;
      font-size:14px;
      margin:0px 0px 0px 5px;
    }
    .item>.sir{
      display: inline;
      font-size:13px;
      margin:0px 0px 0px 15px;
    }
    /******************************/
    /*性別で変化するリストデザイン*/
    /*****************************/
    .linkBox{
         position:relative;
        width: 100%;
        height: 60px;
        margin: 0px 0px 20px 0px;
        list-style: none;
        display: flex; /* Flexboxコンテナに設定 */
        align-items: center; /* 子要素を垂直方向の中央に配置 */
        justify-content: space-between; /* 子要素を水平方向の両端に配置 */
    }
    .box_M{/*男性用デザイン*/
        border-bottom: 3px solid #1e90ff;
        background: #f0f8ff;
    }
    .box_W{/*女性用デザイン*/
        border-bottom: 3px solid #ffc0cb;
        background: #fbeff1;
    }

    .linkBox a{
      display: flex;
      align-items: center;
    /* position: absolute; */
    top: 0;
    left: 0;
    height:100%; 
    width: 70%;
    padding: 5px 0px 0px 3px;
    color:black; 
    font-weight: bold;
    text-decoration: none; /* ホバー時の下線を削除 */
    }
    
    .linkBox dt{
        display: flex!important;
        align-items: center!important;
        flex-grow: 1; /* スペースに応じて伸縮 */
        margin:0px 0px 0px 0px;
    }
    .linkBox dd{
          display: flex; /* Flexboxを使用 */
          align-items: center; /* 中央揃え */
            text-align: left;
            margin:0px 0px 0px 0px;
    }
    .linkBox dd>p{
        font-size:14px;
        text-align: right;
        flex-grow: 1; /* 利用可能なスペースをすべて使用 */
       font-weight: bold;
        padding: 19px 3px 3px 0px;
    }
    .sidebar-a {
      display: flex;
      align-items: center; /* アイテムを垂直方向に中央に配置 */
      font-size: 14px !important;
      padding: 5px 0px 3px 3px !important;
      height: auto;
  }
  
  /*amazonアソシエイトのデザインcss*/
  .amazon-box {
    position: relative;
    background: #F3F3F3;
    margin: 1.5em 0;
    border-left: 5px solid #D4D4D4;
    display: inline-block;
    width: 98%; /* ここは必要に応じて変更 */
    }
    
    .amazon-img {
    margin: 0.8em 0em 0.8em 1em;
    width: 30%; /* ここは必要に応じて変更 */ 
    float: left;
    }
    
    .amazon-img a:hover {
    opacity: .7;
    }
    
    .amazon-text {
      text-align:center;
      width:65%;
    margin: 1.5em 0em 0em 0em;
    float:  left;   /* 回り込み指定 */
    }
    .amazon-text a {
    text-decoration: none;
    font-size:15px !important;
    font-weight: bold;
    font-size: 1.4em;
    color: black;
    }
    .amazon-text a:hover {
    color: #FF9100;
    text-decoration: underline;
    }


}
/* 画面サイズの横幅が 769px 以上で適用 */
@media screen and (min-width: 769px) { 
  /*row配下の左側コンテンツのクラス*/
  .row-content{
    margin-top:50px;
  }
	/*hタグデザイン*/
    /*記事やコラム系の見出しデザイン*/
    h1.title-h1{
      font-weight:bold;
      font-family:"Lato", "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, "YuGothic M", "Helvetica Neue", Helvetica, Arial, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "MS ゴシック", "MS Gothic", sans-serif;
      margin:10px 0px 5px 5px;
      padding:10px 0px 0px 0px;
      font-size:25px !important;
        color: #424242;
        background: white !important;
      box-shadow: none !important;
    }
    h1.article-h1{
      font-weight:bold;
      font-family:"Lato", "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, "YuGothic M", "Helvetica Neue", Helvetica, Arial, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "MS ゴシック", "MS Gothic", sans-serif;
      font-size:21px;
        padding:7px;/*文字周りの余白*/
        color: #424242;
        background: white !important;
      box-shadow: none !important;
    }
    h2.article-h2 {
      font-size:20px;
      font-weight: bold;
      background: #c2edff;/*背景色*/
      padding: 0.5em;/*文字まわり（上下左右）の余白*/
    }
    h3.article-h3{
      font-size:20px;
      font-weight: bold;
       /*線の種類（実線） 太さ 色*/
        border-bottom: solid 3px #c2edff;
    }
    /*フォントデザイン*/
    p.description-p{
      font-family: 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
      font-size:16px;
      margin:5px 0px 5px 0px; 
    }
    /*星デザイン*/
    .star-rating-front{
    display:inline;
    font-size: 18px;
    top: 0;
    left: 0;
    overflow: hidden;
    color: #ffcc33;
}

    /*一般的な1列写真の表示*/
    .gallery{
      text-align: center;
      margin-bottom: 50px;
    }
    .gallery h2{
      font-size:20px;
    }
    .gallery img{
      border-radius: 20px;
      width: 80%;
    }


	/*ページャーデザイン*/
	.pager  ul.pagination {
    font-size:18px;
    text-align: center;
    margin: 0px;
    padding: 0px;
}
.pager .pagination li {
  display: inline-block;
  margin: 0px 8px 0px 0px;
  padding: 0;
  background:#ffffff;
  width: 50px;
  height: 50px;
  text-align: center;
  position: relative;
  border-radius: 10px;
}
.pager .pagination li a{
  vertical-align: middle;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  display:table;
  background: #ffffff;
  color:black;
  border-radius: 10px;
  border-color: #00bfff;
  text-decoration: none;
}
.pager .pagination li a span{
  display:table-cell;
  vertical-align:middle;
}
.pager .pagination li a:hover,
.pager .pagination li a.active{
  color: #ffffff;
  background: #00bfff;
}

  /*目次デザイン*/
  #toc{
    color: #1e366a;
    border-top: solid #1e366a 1px;/*上のボーダー*/
    border-bottom: solid #1e366a 1px;/*下のボーダー*/
    padding: 0.5em 0 0em 0.5em;
    margin: 20px 0px 20px 0px;
  }

  /******************************/
  /*水平スクロールのためのクラス*/
  /******************************/
   .horizontal-list {
      overflow-x: auto;
      white-space: nowrap;
      -webkit-overflow-scrolling: touch;
    }
    /*オススメ記事水平スクロール*/
    .item-article {
      /* 横スクロール用 */
      display: inline-block;
      width: 50%;
      /* 見た目調整 */
      height: auto;
      margin: 2px;
      font-size: 24px;
      background: white;
      border-radius: 6px;
      margin:10px 5px 10px 5px;
    }
    .item-article>a>img{
      border-radius: 10px;
    }
    /*オススメ課題水平スクロール*/
    .item {
      /* 横スクロール用 */
      display: inline-block;
      width: 50%;
      /* 見た目調整 */
      height: auto;
      margin: 2px;
      font-size: 24px;
      background: rgba(174, 174, 174, 0.2);
      border-radius: 6px;
      margin:10px 5px 10px 5px;
    }
    .item>.title, .item-article>.title{
      display: inline;
      overflow-wrap: break-word;
      color:black;
      font-weight:bold;
      font-size:16px;
      margin:10px 0px 0px 20px;
    }
    .item>.new-line{
      display: inline;
      margin:0px;
    }
    .item>.area{
      display: inline;
      font-size:15px;
      margin:10px 0px 0px 20px;
    }
    .item>.prefc{
      display: inline;
      font-size:12px;
      margin:0px;
    }
    .item>.rmd{
      display: inline;
      font-size:16px;
      font-weight:bold;
      margin:0px;
    }
    .item>.grade{
      display: inline;
      font-size:18px;
      font-weight:bold;
      margin:0px;
    }
    .item>.review{
      display: inline;
      font-size:15px;
      font-weight: bold;
      margin:5px 0px 0px 20px;
    }
    .item>.user{
      display: inline;
      font-weight:bold;
      font-size:14px;
      margin:0px 0px 0px 5px;
    }
    .item>.sir{
      display: inline;
      font-size:12px;
      text-align: right;
      margin:0px 0px 0px 25px;
    }

    /******************************/
    /*性別で変化するリストデザイン*/
    /*****************************/
    .linkBox{
        position:relative;
        width: 100%;
        margin: 0px 0px 20px 0px;
        list-style: none;
        display: flex; /* Flexboxコンテナに設定 */
        align-items: center; /* 子要素を垂直方向の中央に配置 */
        justify-content: space-between; /* 子要素を水平方向の両端に配置 */
    }
    .box_M{/*男性用デザイン*/
        border-bottom: 5px solid #1e90ff;
        background: #f0f8ff;
    }
    .box_W{/*女性用デザイン*/
        border-bottom: 5px solid #ffc0cb;
        background: #fbeff1;
    }
    .linkBox a{
    display: flex;
    align-items: center;
    /* position: absolute; */
    top: 0;
    left: 0;
    font-weight:bold;
    padding: 5px 5px 3px 5px;
    height:100%; 
    width: 100%; 
    color:black;
    }
    .linkBox a:hover{
        text-decoration: none;
    }
    .linkBox dt{
        display: flex!important;
        align-items: center!important;
        flex-grow: 1; /* スペースに応じて伸縮 */
        width: 70%;
        margin:0px 0px 0px 0px;
    }
    .linkBox dd{
      display: flex!important; /* Flexboxを使用 */
      align-items: center; /* 中央揃え */
        text-align: left;
        margin:0px 0px 0px 0px;
    }
    .linkBox dd>p{
        font-size:12px;
        flex-grow: 1; /* 利用可能なスペースをすべて使用 */
        text-align: right;
       font-weight: bold;
        padding: 20px 0px 3px 0px;
    }
    .sidebar-a{
      display: flex;
      align-items: center; /* アイテムを垂直方向に中央に配置 */
      font-size: 14px !important;
      padding: 5px 0px 3px 3px !important;
      height: auto;
    }
    
/*amazonアソシエイトのデザインcss*/
  .amazon-box {
    background: #F3F3F3;
    margin: 1.5em 0;
    border-left: 5px solid #D4D4D4;
    display: inline-block;
    width: 80%; /* ここは必要に応じて変更 */
    }
    
    .amazon-img {
    margin: 1em 0em 1.8em 1em;
    width: 23%; /* ここは必要に応じて変更 */ 
    float: left;
    }
    
    .amazon-img a:hover {
    opacity: .7;
    }
    
    .amazon-text {
    margin: 1em;
    }
    .amazon-text a {
    text-decoration: none;
    font-weight: bold;
    font-size: 1.4em;
    color: black;
    }
    .amazon-text a:hover {
    color: #FF9100;
    text-decoration: underline;
    }
}