/*---------------------------- 共通項目 ----------------------------*/
@charset "euc-jp";
html {
    scroll-padding-top: 90px; /* ヘッダーの高さと同じ */
}

h1 {
font-size: 11pt;
padding: 1px;
margin: 1px;
}

/* ここからブースの検索ボックス */
.search-box {
        position: relative;
        width: 100%;
}

.search-box input[type="text"] {
        width: 90%;
        padding: 9px 5%;
        font-size: 16px;
        border: 2px solid #ccc;
        border-radius: 20px;
        outline: none;
        transition: all 0.3s ease;
}

.search-box input[type="text"]:focus {
        border-color: #66cc75;
}

.search-box button {
        position: absolute;
        top: 8px;
        right: 10px;
        border: none;
        background: none;
        cursor: pointer;
        padding: 0;
}

.search-box button svg {
        width: 30px;
        height: 30px;
}

.search-box input[type="text"]:focus + button svg {
        fill: #66cc75;
}
/* ここまでブースの検索ボックス */

/* ここから製品リストデザイン */

/* ボタン */
.navigation {
  display: flex;
  justify-content: space-between;
  margin: 20px 0;
  font-weight: bold;
}
.navigation a {
  text-decoration: none;
  color: #fff;
  background-color: #007BFF;
  padding: 10px 15px;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}
.navigation a:hover {
  background-color: #0056b3;
}

/* カテゴリ見出し */
h2 {
  font-size: 1.4em;
  margin-top: 20px;
  color: #333;
  border-bottom: 2px solid #007BFF;
  padding-bottom: 5px;
}

/* アイテムリスト */
.item {
  display: flex;
  background-color: #fff;
  margin: 15px 0;
  padding: 15px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.item:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

/* 写真 */
.item img {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 5px;
  margin-right: 15px;
}

/* サービス名 */
.item h3 {
  font-size: 1.2em;
  margin: 0;
  color: #007BFF;
}

/* 説明文 */
.item p {
  margin: 8px 0 0;
  color: #555;
}

/* リンク */
.item a {
  display: block;
  margin-top: 10px;
  font-size: 0.9em;
  color: #555;
  text-decoration: none;
  transition: color 0.3s ease;
}
.item a:hover {
  color: #007BFF;
}
/* ここまで製品リストデザイン */
/* ここから詳細ページ問い合わせかごボタン */
.inquiry-form {
    margin: 0;
    font-size: 14px;
    color: #333;
}

.inquiry-button {
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    background-color: #4a90e2;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.inquiry-button:hover {
    background-color: #357abd;
}

.form-text {
    margin-bottom: 10px;
    color: #555;
}
/* ここまで詳細ページ問い合わせかごボタン */

/* ここから詳細ページ記事部分デザイン */
.product-header {
width: 100%;
padding: 15px;
background-color: #eeeeee;
border: 1px solid #A3A3A3;
border-radius: 8px;
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.product-title {
font-size: 18pt;
font-weight: bold;
color: #333;
}

.product-id {
font-weight: bold;
color: #777;
font-size: 14pt;
}

.product-description {
display: flex;
align-items: flex-start;
gap: 15px;
margin-bottom: 20px;
}

.product-image {
max-width: 300px;
border-radius: 5px;
border: 1px solid #ddd;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.description-text {
color: #555;
}

.extra-info {
background-color: #f9f9f9;
padding: 15px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
margin-top: 10px;
}
/* ここまで詳細ページ記事部分デザイン */






/*-------------------------------------------------------- PC向けのスタイル ------------------------------------------------------------------------------------*/
@media screen and (min-width: 1200px) {
.sp_mode_only {
    display: none;
}
body {

 margin:90px 0 0 0;
}

#header {
	margin-bottom: 7px;
	position: fixed;
	z-index: 999;
	top: 0;
	left: 0;
	width: 100%;
	box-sizing: border-box;
	height: 90px;
	padding: 10px 0; /* 左右のパディングを0に設定 */
	background-color: #fff;

}

#header2 {
    width:1200px;
    margin-left:auto;
    margin-right:auto;
    margin-bottom:20px;
}

#navibar {
    height: 40px;
    width: 1200px; /* 幅を固定 */
    margin-bottom: 5px;
    display: flex; /* フレックスボックスに変更 */
    justify-content: center; /* 子要素を中央揃え */
    align-items: center; /* 垂直方向の中央揃え */
    box-shadow: 2px 2px 10px 2px #EEE;
    border-radius: 10px;
    margin: 0 auto; /* 中央に配置 */
}

#navibar ul {
    margin: 0;
    padding: 0;
    display: flex; /* フレックスボックスに変更 */
    justify-content: space-between; /* 子要素を均等に配置 */
    width: 100%;
    list-style: none; /* リストスタイルを削除 */
}

#navibar ul li {
    flex: 1; /* 子要素を均等に広げる */
    text-align: center; /* テキストを中央揃え */
    display: flex; /* フレックスボックスに変更 */
    align-items: center; /* 垂直方向の中央揃え */
    justify-content: center; /* 水平方向の中央揃え */
}

#navibar ul li a {
    font-size: 16px;
    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    text-align: center; /* テキストを中央揃え */
    padding: 5px;
    text-decoration: none;
    display: block; /* ブロック表示 */
    font-weight: bold;
    color: #666666;
}

#navibar ul li a:hover {
    color: #000;
}

#navibar ul li a.current {
    color: #000;
}





.search_container{
  position: relative;
  box-sizing: border-box;
  border: 2px solid #3879D9;
  padding: 3px 10px;
  border-radius: 3px;
  height: 2.3em;
  width: 283px;
  overflow: hidden;
}
.search_container input[type="text"]{
  border: none;
  height: 2.0em;
}
.search_container input[type="text"]:focus {
  outline: 0;
}
.search_container input[type="submit"]{
  cursor: pointer;
  font-family: FontAwesome;
  border: none;
  background: #3879D9;
  color: #fff;
  position: absolute;
  width: 3.5em;
  height: 3.0em;
  right:0px;
  top: -5px;
  outline : none;
}


#top_of_contents {
	width: 1200px;
    height: 30px;
    margin-top: 30px;
	margin-bottom: 20px;
}
#right_bar {
	width: 280px;
	float: left;
	margin-bottom: 20px;
}
.booth_midashi1 {
  padding: 1rem 2rem;
  border-left: 5px solid #DDD;
  background: #f4f4f4;
}


.right_bar_box0_bottom {
	width: 270px;
	/*border-right: 1px solid #ccc;
	border-left: 1px solid #ccc;
	border-bottom: 1px solid #ccc;*/
	padding: 5px;
	margin-bottom: 10px;
	background-color:#fff;

}
.right_bar_box0_bottom dl dt {
	background-image: url(list1.gif);
	margin-left: 4px;
	background-repeat: no-repeat;
	background-position: 0px 5px;
	padding-left: 20px;
	margin-bottom: 5px;
	font-size:12pt;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.right_bar_box0_bottom dl dd {
	background-image: url(list2.gif);
	margin-left: 11px;
	background-repeat: no-repeat;
	background-position: 0px 5px;
	padding-left: 20px;
	margin-bottom: 5px;
	font-size:12pt;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.right_bar_box1_bottom {
	width: 270px;
	padding: 5px;
	margin-bottom: 10px;
	background-color:#fff;
}

.right_bar_box1_bottom ul li {
	list-style-image: none;
	list-style-type: none;
	list-style-position: outside;
	width: 240px;
	margin: 0px;
	margin-bottom: 5px;
	padding: 0px;
}

.right_bar_box1_bottom ul {
	margin: 0px;
	margin-left: 4px;
	padding: 0px;
}

.right_bar_box1_bottom ul li a {
	font-size: 12pt;
    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	/*text-align: center;*/
	padding-right: 10px;
	padding-left: 20px;
	padding-top: 0px;
	padding-bottom: 0px;
	/*text-decoration: none;*/
	width: 205px;
	display: block;
	background-image: url(list1.gif);
    background-repeat: no-repeat;
	background-position: 0px 5px;
}


#main_bar {
	width: 890px;
	margin-left: 30px;
	float: right;
    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 13pt;
}


#top_yohaku {
  height: 90px;

}
#nav1{
text-align: center;
}
#nav1 ul{
margin: 0 ;
padding: 0 ;
}
#nav1 li{
list-style: none;
display: inline-block;
/*width: 10%;*/
/*min-width: 90px;*/
}
#nav1 li:not(:last-child){
border-right:2px solid #ddd;
}
#nav1 a{
text-decoration: none;
color: #333;
font-size:10pt;
padding-right:7px;
padding-left:5px;
}
#nav1 a.current{
color: #00B0F0;
border-bottom:2px solid #00B0F0;
}
#nav1 a:hover{
color:#F7CB4D;
border-bottom:2px solid #F7CB4D;
}


.headline1 {
  position: relative;
  display: inline-block;
  padding: 8px 12px 8px 30px;
  color: #fff;
  border-radius: 20px 20px 20px 20px;
  background: #fa4141;
  margin-bottom: 10px;
}
.headline1 a {
  text-decoration: none;
  color:#fff;
}
.headline1:before {
  position: absolute;
  top: calc(50% - 7px);
  left: 10px;
  width: 14px;
  height: 14px;
  content: '';
  border-radius: 50%;
  background: #fff;
}
.headline2 {
  position: relative;
  display: inline-block;
  padding: 8px 12px 8px 30px;
  color: #000;
  border-radius: 20px 20px 20px 20px;
  background: #eee;
  margin-bottom:10px;
}
.headline2 a {
  text-decoration: none;
  color:#000;
}
.headline2:before {
  position: absolute;
  top: calc(50% - 7px);
  left: 10px;
  width: 14px;
  height: 14px;
  content: '';
  border-radius: 50%;
  background: #a9a9a9;
}
.feature_boxn {


}
.trim_img1 {
  width: 770px;
  height: 480px;
  object-fit: cover;
}
.trim_img2 {
  width: 370px;
  height: 235px;
  object-fit: cover;
}
.trim_img2_table {
  width: 778px;

}
.trim_img3 {
  width: 120px;
  height: 120px;
  object-fit: cover;
}


#load-more,
a #load-more {
  color: #fff;
  background-color: #eb6100; 
  border-radius: 20px;
  padding:20px;
  font-size:16pt;
}
.ranking_list1_title {
  font-size: 14pt;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-weight: bold;
  font-style: italic;
  text-align: center;

}
.ranking_list2_title {
  font-size: 12pt;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-style: italic; 
  text-align: center;

}
.ranking_list1 {
  color: #1e366a;
  border-top: solid #1e366a 1px;/*上のボーダー*/
  border-bottom: solid #1e366a 1px;/*下のボーダー*/
  padding: 0 0 0 2.0em;
  margin-top: 0px; 

}

.ranking_list1 li {
  line-height: 1.5;
  padding: 0.5em 0;
 
}



#container {
	width: 1200px;
	margin-right: auto;
	margin-left: auto;
	clear: both;
}

#contents {
	width: 1200px;
}
#footer {
    /*display: flex;
    align-items: center;
    justify-content: center;*/
    margin-top: 30px;
	width: 94%;
	height: 70px;
	text-align: center;
    background-color: #eee;
    padding: 50px 3%  20px 3%;
}


.clear_both {
	clear: both;
}




.search-form {
    display: flex;
    background-color: #fff;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
    border-radius: 30px;
    overflow: hidden;
    width:100%;
}

.select-box {
    padding: 12px;
    background-color: skyblue;
    color: #000;
    border: none;
    border-top-left-radius: 30px;
    border-bottom-left-radius: 30px;
    cursor: pointer;
}

.search-input {
    flex: 1;
    padding: 12px;
    border: none;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    width:100%;
}

.search-button {
    background-color: #007bff;
    color: #fff;
    border: none;
    padding: 12px 20px;
    border-top-right-radius: 30px;
    border-bottom-right-radius: 30px;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: background-color 0.3s ease-in-out;
}

.search-icon {
    margin-right: 8px;
}

.search-button:hover {
    background-color: #e35d5a;
}

.itemsearch_font_size {
 font-size:11pt;
}


#h_info{
  margin: 0;
  padding: 10px 0px 0 0px;
  text-align: right;
  font-size: 14px;
  color: #555555;
  line-height: 1.6;
  text-decoration: none;
  float: right;
  width:452px;

}

#h_info p{
  margin: 0;
  padding: 3px;
  text-align: left;
  font-size: 14px;
  color: #444444;
  letter-spacing: 0.05em;
}

#h_info a{
  font-size: 13px;
  color: #333333;
  text-decoration: none;
}

#h_info a:hover{
  font-size: 13px;
  color: #666666;
  text-decoration: none;
}













}/*@media screen and (min-width: 1100px) {*/



/*-------------------------------------------------------- タブレット向けのスタイル ------------------------------------------------------------------------------------*/
@media screen and (min-width:1000px) and (max-width:1300px) {
.sp_mode_only {
    display: none;
}

body {

 margin:90px 0 0 0;
}


#header {
	margin-bottom: 7px;
	position: fixed;
	z-index: 999;
	top: 0;
	left: 0;
	width: 100%;
	box-sizing: border-box;
	height: 90px;
	padding: 10px 0; /* 左右のパディングを0に設定 */
	background-color: #fff;

}

#header2 {
    width:1000px;
    margin-left:auto;
    margin-right:auto;
    margin-bottom:20px;
}


#navibar{
	height: 40px;

	margin-bottom: 5px;
	display:table-cell;
	vertical-align: bottom;
	box-shadow: 2px 2px 10px 2px #EEE;
	border-radius: 10px;
}

#navibar ul li {
	list-style-image: none;
	list-style-type: none;
	list-style-position: outside;
	float: left;
	width: 110px;
	height: 40px;
	margin: 0px;
	padding: 0px;
}

#navibar ul {
	margin: 0px;
	padding: 0px;
}

#navibar ul li a {
	font-size: 14px;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	text-align: center;
	padding: 5px;
	
	text-decoration: none;
	height: 18px;
	width: 110px;
	display: block;
	/*background-image: url(images/menu1_2.gif);*/
	font-weight: bold;
	color: #666666;
}

#navibar ul li a:hover {
	/*background-image: url(images/menu1.gif);*/
	color: #000;
}

#navibar ul li a.current {
	/*background-image: url(images/menu1.gif);*/
	color: #000;
}




.search_container{
  position: relative;
  box-sizing: border-box;
  border: 2px solid #3879D9;
  padding: 3px 10px;
  border-radius: 3px;
  height: 2.3em;
  width: 230px;
  overflow: hidden;
}
.search_container input[type="text"]{
  border: none;
  height: 2.0em;
}
.search_container input[type="text"]:focus {
  outline: 0;
}
.search_container input[type="submit"]{
  cursor: pointer;
  font-family: FontAwesome;
  border: none;
  background: #3879D9;
  color: #fff;
  position: absolute;
  width: 3.5em;
  height: 3.0em;
  right:0px;
  top: -5px;
  outline : none;
}


#top_of_contents {
	width: 950px;
    height: 30px;
    margin-top: 30px;
	margin-bottom: 20px;
}
#right_bar {
	width: 230px;
	float: left;
	margin-bottom: 20px;
}
.booth_midashi1 {
  padding: 1rem 2rem;
  border-left: 5px solid #DDD;
  background: #f4f4f4;
}


.right_bar_box0_bottom {
	width: 270px;
	/*border-right: 1px solid #ccc;
	border-left: 1px solid #ccc;
	border-bottom: 1px solid #ccc;*/
	padding: 5px;
	margin-bottom: 10px;
	background-color:#fff;

}
.right_bar_box0_bottom dl dt {
	background-image: url(list1.gif);
	margin-left: 4px;
	background-repeat: no-repeat;
	background-position: 0px 5px;
	padding-left: 20px;
	margin-bottom: 5px;
	font-size:12pt;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.right_bar_box0_bottom dl dd {
	background-image: url(list2.gif);
	margin-left: 11px;
	background-repeat: no-repeat;
	background-position: 0px 5px;
	padding-left: 20px;
	margin-bottom: 5px;
	font-size:12pt;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.right_bar_box1_bottom {
	width: 270px;
	padding: 5px;
	margin-bottom: 10px;
	background-color:#fff;
}

.right_bar_box1_bottom ul li {
	list-style-image: none;
	list-style-type: none;
	list-style-position: outside;
	width: 240px;
	margin: 0px;
	margin-bottom: 5px;
	padding: 0px;
}

.right_bar_box1_bottom ul {
	margin: 0px;
	margin-left: 4px;
	padding: 0px;
}

.right_bar_box1_bottom ul li a {
	font-size: 12pt;
    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	/*text-align: center;*/
	padding-right: 10px;
	padding-left: 20px;
	padding-top: 0px;
	padding-bottom: 0px;
	/*text-decoration: none;*/
	width: 205px;
	display: block;
	background-image: url(list1.gif);
    background-repeat: no-repeat;
	background-position: 0px 5px;
}


#main_bar {
	width: 680px;
	margin-left: 30px;
	float: right;
    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 13pt;
}


#top_yohaku {
  height: 90px;

}
#nav1{
text-align: center;
}
#nav1 ul{
margin: 0 ;
padding: 0 ;
}
#nav1 li{
list-style: none;
display: inline-block;
/*width: 10%;*/
/*min-width: 90px;*/
}
#nav1 li:not(:last-child){
border-right:2px solid #ddd;
}
#nav1 a{
text-decoration: none;
color: #333;
font-size:10pt;
padding-right:7px;
padding-left:5px;
}
#nav1 a.current{
color: #00B0F0;
border-bottom:2px solid #00B0F0;
}
#nav1 a:hover{
color:#F7CB4D;
border-bottom:2px solid #F7CB4D;
}


.headline1 {
  position: relative;
  display: inline-block;
  padding: 8px 12px 8px 30px;
  color: #fff;
  border-radius: 20px 20px 20px 20px;
  background: #fa4141;
  margin-bottom: 10px;
}
.headline1 a {
  text-decoration: none;
  color:#fff;
}
.headline1:before {
  position: absolute;
  top: calc(50% - 7px);
  left: 10px;
  width: 14px;
  height: 14px;
  content: '';
  border-radius: 50%;
  background: #fff;
}
.headline2 {
  position: relative;
  display: inline-block;
  padding: 8px 12px 8px 30px;
  color: #000;
  border-radius: 20px 20px 20px 20px;
  background: #eee;
  margin-bottom:10px;
}
.headline2 a {
  text-decoration: none;
  color:#000;
}
.headline2:before {
  position: absolute;
  top: calc(50% - 7px);
  left: 10px;
  width: 14px;
  height: 14px;
  content: '';
  border-radius: 50%;
  background: #a9a9a9;
}
.trim_img1 {
  width: 570px;
  height: 355px;
  object-fit: cover;
}
.trim_img2 {
  width: 274px;
  height: 174px;
  object-fit: cover;
}
.trim_img2_table {
  width: 578px;

}
.trim_img3 {
  width: 120px;
  height: 120px;
  object-fit: cover;
}


#load-more,
a #load-more {
  color: #fff;
  background-color: #eb6100; 
  border-radius: 20px;
  padding:20px;
  font-size:16pt;
}
.ranking_list1_title {
  font-size: 14pt;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-weight: bold;
  font-style: italic;
  text-align: center;

}
.ranking_list2_title {
  font-size: 12pt;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-style: italic; 
  text-align: center;

}
.ranking_list1 {
  color: #1e366a;
  border-top: solid #1e366a 1px;/*上のボーダー*/
  border-bottom: solid #1e366a 1px;/*下のボーダー*/
  padding: 0 0 0 2.0em;
  margin-top: 0px; 

}

.ranking_list1 li {
  line-height: 1.5;
  padding: 0.5em 0;
 
}



#container {
	width: 950px;
	margin-right: auto;
	margin-left: auto;
	clear: both;
}

#contents {
	width: 950px;
}
#footer {
    display: flex;
    align-items: center;
    justify-content: center;
	width: 100%;
	height: 90px;
	text-align: center;

}


.clear_both {
	clear: both;
}

.search-form {
    display: flex;
    background-color: #fff;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
    border-radius: 30px;
    overflow: hidden;
    width:100%;
}

.select-box {
    padding: 12px;
    background-color: skyblue;
    color: #000;
    border: none;
    border-top-left-radius: 30px;
    border-bottom-left-radius: 30px;
    cursor: pointer;
}

.search-input {
    flex: 1;
    padding: 12px;
    border: none;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    width:100%;
}

.search-button {
    background-color: #007bff;
    color: #fff;
    border: none;
    padding: 12px 20px;
    border-top-right-radius: 30px;
    border-bottom-right-radius: 30px;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: background-color 0.3s ease-in-out;
}

.search-icon {
    margin-right: 8px;
}

.search-button:hover {
    background-color: #e35d5a;
}

.itemsearch_font_size {
 font-size:11pt;
}
#h_info{
  margin: 0;
  padding: 10px 0px 0px 0px;
  text-align: right;
  font-size: 11px;
  color: #555555;
  line-height: 1.6;
  text-decoration: none;
  float: right;
  width:380px;

}

#h_info p{
  margin: 0;
  padding: 3px;
  text-align: left;
  font-size: 11px;
  color: #444444;
  letter-spacing: 0.05em;
}

#h_info a{
  font-size: 11px;
  color: #333333;
  text-decoration: none;
}

#h_info a:hover{
  font-size: 11px;
  color: #666666;
  text-decoration: none;
}

}


/*-------------------------------------------------------- スマホ向けのスタイル ------------------------------------------------------------------------------------*/
@media screen and (max-width:1000px) {
.pc_tb_mode_only {
    display: none;
}


body {

 margin:0 0 0 0;
}

#header {
	margin-bottom:7px;
	/*position:fixed;
	z-index: 999;
    top: 0;
    left: 0;
    padding: 10px 0px 10px 0px;*/
    width: 100%;
    box-sizing: border-box;
}

#header2 {
    width:100%;
    margin-left:auto;
    margin-right:auto;
    margin-bottom:20px;
}

.search-form {
    display: flex;
    background-color: #fff;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
    border-radius: 30px;
    overflow: hidden;
    width:100%;
}

.select-box {
    padding: 12px;
    background-color: skyblue;
    color: #000;
    border: none;
    border-top-left-radius: 30px;
    border-bottom-left-radius: 30px;
    cursor: pointer;
}

.search-input {
    flex: 1;
    padding: 12px;
    border: none;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    width:100%;
}

.search-button {
    background-color: #007bff;
    color: #fff;
    border: none;
    padding: 12px 20px;
    border-top-right-radius: 30px;
    border-bottom-right-radius: 30px;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: background-color 0.3s ease-in-out;
}

.search-icon {
    margin-right: 8px;
}

.search-button:hover {
    background-color: #e35d5a;
}


.search_container{
  position: relative;
  box-sizing: border-box;
  border: 2px solid #3879D9;
  padding: 3px 10px;
  border-radius: 3px;
  height: 2.3em;
  width: 100%;
  overflow: hidden;
}
.search_container input[type="text"]{
  border: none;
  height: 2.0em;
}
.search_container input[type="text"]:focus {
  outline: 0;
}
.search_container input[type="submit"]{
  cursor: pointer;
  font-family: FontAwesome;
  border: none;
  background: #3879D9;
  color: #fff;
  position: absolute;
  width: 3.5em;
  height: 3.0em;
  right:0px;
  top: -5px;
  outline : none;
}



.booth_midashi1 {
  padding: 1rem 2rem;
  border-left: 5px solid #DDD;
  background: #f4f4f4;
}

.right_bar_box0_bottom {
	width: 270px;
	/*border-right: 1px solid #ccc;
	border-left: 1px solid #ccc;
	border-bottom: 1px solid #ccc;*/
	padding: 5px;
	margin-bottom: 10px;
	background-color:#fff;

}
.right_bar_box0_bottom dl dt {
	background-image: url(list1.gif);
	margin-left: 4px;
	background-repeat: no-repeat;
	background-position: 0px 5px;
	padding-left: 20px;
	margin-bottom: 5px;
	font-size:12pt;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.right_bar_box0_bottom dl dd {
	background-image: url(list2.gif);
	margin-left: 11px;
	background-repeat: no-repeat;
	background-position: 0px 5px;
	padding-left: 20px;
	margin-bottom: 5px;
	font-size:12pt;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}



#top_yohaku {
  height: 140px;

}
#nav1{
text-align: center;
}
#nav1 ul{
margin: 0 ;
padding: 0 ;
}
#nav1 li{
list-style: none;
display: inline-block;
/*width: 10%;*/
/*min-width: 90px;*/
}
#nav1 li:not(:last-child){
border-right:2px solid #ddd;
}
#nav1 a{
text-decoration: none;
color: #333;
font-size:10pt;
padding-right:7px;
padding-left:5px;
}
#nav1 a.current{
color: #00B0F0;
border-bottom:2px solid #00B0F0;
}
#nav1 a:hover{
color:#F7CB4D;
border-bottom:2px solid #F7CB4D;
}


.headline1 {
  position: relative;
  display: inline-block;
  padding: 8px 12px 8px 30px;
  color: #fff;
  border-radius: 20px 20px 20px 20px;
  background: #fa4141;
  margin-bottom: 10px;
}
.headline1 a {
  text-decoration: none;
  color:#fff;
}
.headline1:before {
  position: absolute;
  top: calc(50% - 7px);
  left: 10px;
  width: 14px;
  height: 14px;
  content: '';
  border-radius: 50%;
  background: #fff;
}
.headline2 {
  position: relative;
  display: inline-block;
  padding: 8px 12px 8px 30px;
  color: #000;
  border-radius: 20px 20px 20px 20px;
  background: #eee;
  margin-bottom:10px;
}
.headline2 a {
  text-decoration: none;
  color:#000;
}
.headline2:before {
  position: absolute;
  top: calc(50% - 7px);
  left: 10px;
  width: 14px;
  height: 14px;
  content: '';
  border-radius: 50%;
  background: #a9a9a9;
}
.trim_img1 {
  width: 100%;
  height: 420px;
  object-fit: cover;
}
.trim_img2 {
  width: 100%;
  height: 240px;
  object-fit: cover;
}
.trim_img2_table {
  width: 100%;

}
.trim_img3 {
  width: 120px;
  height: 120px;
  object-fit: cover;
}


#load-more,
a #load-more {
  color: #fff;
  background-color: #eb6100; 
  border-radius: 20px;
  padding:20px;
  font-size:16pt;
}
.ranking_list1_title {
  font-size: 14pt;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-weight: bold;
  font-style: italic;
  text-align: center;

}
.ranking_list2_title {
  font-size: 12pt;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-style: italic; 
  text-align: center;

}
.ranking_list1 {
  color: #1e366a;
  border-top: solid #1e366a 1px;/*上のボーダー*/
  border-bottom: solid #1e366a 1px;/*下のボーダー*/
  padding: 0 0 0 2.0em;
  margin-top: 0px; 

}

.ranking_list1 li {
  line-height: 1.5;
  padding: 0.5em 0;
 
}



#container {
	width: 100%;
	margin-right: auto;
	margin-left: auto;
	clear: both;
}

#contents {
	width: 100%;
}
#footer {
    /*display: flex;
    align-items: center;
    justify-content: center;*/
	width: 100%;
	height: 90px;
	text-align: center;

}
#main_contents {
	width: 100%;
	/*float: left;*/
	padding-top: 5px;
	padding-right: 0px;
	padding-bottom: 5px;
	padding-left: 0px;
}
#right_contents {
	width: 98%;
	/*float: right;*/
	padding: 0
	background-color: #CCC;
	margin-top:6px;
	margin-right: auto;
	margin-left: auto;
}
.clear_both {
	clear: both;
}
#nav_bar {
	width: 100%;
	border-bottom-width: 5px;
	border-bottom-style: solid;
	border-bottom-color: #EA5431;
	height: 52px;
	margin-top: 5px;
}
#nav_bar #nav_contents ul li {
	width: 81.5px;
	float: left;
	text-align: center;
	display: block;
	list-style-type: none;
	height: 42px;
	font-size: 12px;
	font-weight: bold;
	background-image: url(images/menu1_1.gif);
}
#nav_bar #nav_contents ul li a {
	color: #333;
	text-decoration: none;
	display: block;
	height: 27px;
	width: 81.5px;
	padding-top: 14px;
	padding-right: 0px;
	padding-left: 0px;
}
#nav_bar #nav_contents ul li a:hover {
	background-color: #faeb30;
}
#on_nav_bar {
    margin-top: 8px;

}
#on_nav_bar li {

    display: inline;
}
.main_banner1 {
	height: 20px;
	width: 560px;
	background-image: url(images/main_banner1.gif);
	margin-bottom: 10px;
}
.main_banner2 {

	width: 100%;
	background-image: url(images/main_banner2.gif);
	margin-bottom: 10px;
}
#feature_box {
	width: 550px;
	margin-bottom: 10px;
	border: 2px solid #CCC;
	padding: 3px;
}
#feature_left {
	width: 188px;
	float: left;
	padding: 0px;
}
#feature_right {
	width: 356px;
		float: right;
			padding-left: 4px;
}#nav_left {
	width: 110px;
	float: left;
	height: 52px;
	background-color: #EA5431;
	color: #FFF;
	font-size: 13pt;
	line-height: 14pt;
}
#nav_left a {
    color: #fff;
	text-decoration: none;
	text-align: center;
	display: block;
	height: 27px;
	font-weight: bold;
	font-size: 10pt;
	padding-top: 18px;
	padding-right: 5px;
	padding-bottom: 5px;
	padding-left: 5px;
	/*width: 110px;*/
}
#nav_contents_top {
	height: 10px;
	width: 600px;
}
#nav_contents {
	width: 978px;
	float: right;
	text-align: left;
}
#nav_bar #nav_contents ul {
	margin: 0px;
		padding: 0px;
}

#top_of_banner_left1 {
	height: 16px;
	float: left;
	margin-right: 10px;
	background-color: #FFF;
    font-size: 12px;
    font-weight: bold;
    background-image: url(images/top_of_header_back2.gif);
}
#top_of_banner_left1 a {
    color: #333;
	text-decoration: none;
	display: block;
	height: 12px;
	padding: 2px;
	/*width: 110px;*/
}
#top_of_banner_left2 {
	height: 16px;
	float: left;
	margin-right: 10px;
	background-color: #FFF;
	font-size: 12px;
	font-weight: bold;
	background-image: url(images/top_of_header_back2.gif);
	display: block;
}
#top_of_banner_left2 a {
    color: #333;
	text-decoration: none;
	display: block;
	height: 12px;
	padding: 2px;
    /*width: 110px;*/
}
#top_of_banner_left3 {
	height: 16px;
	float: left;
	margin-right: 10px;
	background-color: #FFF;
	font-size: 12px;
	font-weight: bold;
	background-image: url(images/top_of_header_back2222.gif);
	display: block;
}
#top_of_banner_left3 a {
    color: #333;
	text-decoration: none;
	display: block;
	height: 12px;
	padding: 2px;
	/*width: 110px;*/
}
.cap1 {
	width: 146px;
	font-size: 11px;
	padding: 2px;
}
.font1 {
	font-size: 12px;
	font-weight: bold;
}
.font2 {
	font-size: 12px;
}
.text1 {

	font-size: 12pt;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	line-height: 18pt;

}
h3 {

	font-size: 12pt;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	line-height: 18pt;
	font-weight: normal;
	margin-top: 0px;

}
.banner {
	border: thin solid #666;
}
.list1 {
	font-size: 14px;
	list-style-image: url(images/list1.gif);
	line-height: 26px;
	margin: 8px;
	padding-left: 15px;
}
#sph_annai {
	font-size: 40pt;
	padding: 24px;
}

.kiji_honbun1 {
	font-size: 16px;
	line-height: 26px;
}


#archive {
font-size: 14pt;
font-weight: bold;
padding: 5px;
margin-top: 8px;
margin-bottom: 5px;
background: -moz-linear-gradient(to right,#e8d6bf, #be8945);
background: -webkit-linear-gradient(to right,#e8d6bf, #be8945);
background: linear-gradient(to right,#e8d6bf, #be8945); 
border: 
}

/* --- 以下検索フォーム用 --- */
form.search {
margin: 0px;
padding: 0px;
}

/* --- ボックス --- */
form.search div {
width: 280px; /* ボックスの幅 */
padding: 1px 0; /* ボックスのパディング（上下、左右） */
background-color: #ffffff; /* ボックスの背景色 */
border: 1px #808080 solid; /* ボックスの境界線 */
}

/* --- テキストボックス --- */
form.search input.textBox {
width: 210px; /* テキストボックスの幅 */
margin: 0 4px 0 5px; /* テキストボックスのマージン（上右下左） */
padding: 0;
background-color: #ffffff; /* テキストボックスの背景色 */
border: none; /* テキストボックスの境界線（なし） */
color: #000000;
}

/* --- ボタン --- */
form.search input.btn {
width: 60px; /* ボタンの幅 */
height: 1.8em; /* ボタンの高さ */
padding: 0;
background: #c08000 url(btn05.gif); /* ボタンの背景 */
border: 1px #c08000 inset; /* ボタンの境界線 */
font-weight: bold;
color: #000000;
letter-spacing: 0.3em; /* 文字間のスペース */
}

/* --- ボックス --- */
form.search2 div {
width: 380px; /* ボックスの幅 */
padding: 1px 0; /* ボックスのパディング（上下、左右） */
background-color: #ffffff; /* ボックスの背景色 */
border: 1px #808080 solid; /* ボックスの境界線 */
}

/* --- テキストボックス --- */
form.search2 input.textBox {
width: 310px; /* テキストボックスの幅 */
margin: 0 4px 0 5px; /* テキストボックスのマージン（上右下左） */
padding: 0;
background-color: #ffffff; /* テキストボックスの背景色 */
border: none; /* テキストボックスの境界線（なし） */
color: #000000;
}

/* --- ボタン --- */
form.search2 input.btn {
width: 60px; /* ボタンの幅 */
height: 1.8em; /* ボタンの高さ */
padding: 0;
background: #c08000 url(btn05.gif); /* ボタンの背景 */
border: 1px #c08000 inset; /* ボタンの境界線 */
font-weight: bold;
color: #000000;
letter-spacing: 0.3em; /* 文字間のスペース */
}





#nav_bar #nav_contents ul li a.current {

	/*background-image: url(images/menu1.gif);*/
	background-color: #faeb30;

}
#nav_bar #nav_contents ul li a.current2 {

	/*background-image: url(images/menu1.gif);*/
	background-color: #faeb30;
	width:96px;
}
.keyword_list1 {
    white-space: nowrap;
    font-size: 10pt;
    margin-left: 20px;
    line-height: 20px;
}
.kikaku_mark {
    width:100px;
	height:20px;
    font-size:8pt;
    font-weight:normal;
    text-decoration:none;
	display: inline-block;
    text-align:center;
    padding: 3px 0 0 0;
    color:#fff;
    background-color:#EA5431;
    border-radius:2px;
	white-space: nowrap;
}
.banner2 {
    margin-top: 10px;
	/*padding: .5em .75em;*/
	padding: 10px;
	width: 753px;
	/*background: -webkit-repeating-linear-gradient(45deg, #3498db, #3498db 5px, #69b4e6 5px, #69b4e6 10px);*/
	/*background: repeating-linear-gradient(45deg, #3498db, #3498db 5px, #69b4e6 5px, #69b4e6 10px);*/
	background-color:red;
	color: #fff;
	font-size:16pt;
	font-weight:bold;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	text-shadow: 1px 1px 1px rgba(0, 0, 0, .3);
}
.myButton {
    margin-top: 10px;
    /*width: 316px;*/
	-moz-box-shadow: 2px 2px 9px 0px #3dc21b;
	-webkit-box-shadow: 2px 2px 9px 0px #3dc21b;
	box-shadow: 2px 2px 9px 0px #3dc21b;
	background-color:#44c767;
	-moz-border-radius:28px;
	-webkit-border-radius:28px;
	border-radius:14px;
	border:1px solid #18ab29;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:20px;
	font-weight:bold;
	padding:10px 15px;
	text-decoration:none;
	text-shadow:0px 1px 0px #2f6627;
	text-align: center;
}
.myButton:hover {
	background-color:#5cbf2a;
}
.myButton:active {
	position:relative;
	top:1px;
}
/*読んでほしい記事５本*/
.num_list1 {
  counter-reset:number; /*数字をリセット*/
  list-style-type: none!important; /*数字を一旦消す*/
  padding: 1px 1px;
  border: solid 2px #ffb107;
  background-color:#fff;
  margin: 0px 0px 5px 0px;/*上右下左*/
}
.num_list1 li {
  border-bottom: dashed 1px orange;
  position: relative;
  padding: 0.5em 0.5em 0.5em 30px;
  line-height: 12pt;
  font-size: 10pt;
}
.num_list1 li:before{
  /* 以下数字をつける */
  position: absolute;
  counter-increment: number;
  content: counter(number);
  /*数字のデザイン変える*/
  display:inline-block;
  background: #ffb107;
  color: white;
  font-family: 'Avenir','Arial Black','Arial',sans-serif;
  font-weight:bold;
  font-size: 15px;
  border-radius: 50%;
  left: 0;
  width: 25px;
  height: 25px;
  line-height: 25px;
  text-align: center;
  /*以下 上下中央寄せのため*/
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
.num_list1 li:last-of-type {
  border-bottom: none; /*最後のliの線だけ消す*/
}
/*読んでほしい記事5本バナー*/
.box25{
    position: relative;
    background: #fff0cd;
    /*box-shadow: 0px 0px 0px 5px #fff0cd;*/
    border-top: solid 2px orange;
    border-right: solid 2px orange;
    border-left: solid 2px orange;
    padding: 0.2em 0.5em;
    color: #454545;
}
.box25:after{
    position: absolute;
    content: '';
    right: -4px;
    top: -4px;
    border-width: 1px 15px 15px 1px;
    border-style: solid;
    border-color: #ffdb88 #ccc #ffdb88;
    box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.15);
}
.box25 p {
    margin: 0; 
    padding: 0;
}
/*電子版メール配信用ボタン*/
.btn-flat-horizontal-border {
  position: relative;
  display: inline-block;
  font-weight: bold;
  padding: 8px 4px;
  text-decoration: none;
  color: #FFF;
  background: #EA5532;
  transition: .4s;
  width:190px;
  text-align: center;
  margin-bottom: 5px;
}

.btn-flat-horizontal-border > span {
  border-bottom: solid 2px #FFF;
  border-top: solid 2px #FFF;
  
}

.btn-flat-horizontal-border:hover span {
  padding: 0.1em 0;
}

/*ログインボタンなど20200620*/
.button-soft {
  display: inline-block;
  position: relative;
  text-decoration: none;
  color: #fff;
  /*width: 120px;*/
  height: 21px;
  /*line-height: 50px;*/
  padding: 4px;
  border-radius: 5px;
  text-align: center;
  overflow: hidden;
  font-size: 10pt;
  font-weight: bold;
  background: linear-gradient(#FF66CC 0%, #FF00CC 100%);
  text-shadow: 1px 1px 1px #ccc;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.28);
}

.button-soft:active {
  /*押したとき*/
  -webkit-transform: translateY(2px);
  transform: translateY(2px);/*沈むように*/
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
  background-image: linear-gradient(#fed6e3 0%, #ffbcbc 100%);/*グラデーションを明るく*/
}
/*ログインボタンなど20200620*/
.button2-soft {
  display: inline-block;
  position: relative;
  text-decoration: none;
  color: #fff;
  /*width: 120px;*/
  height: 21px;
  /*line-height: 50px;*/
  padding: 4px;
  border-radius: 5px;
  text-align: center;
  overflow: hidden;
  font-size: 10pt;
  font-weight: bold;
  background: linear-gradient(#FF6633 0%, #FF0033 100%);
  text-shadow: 1px 1px 1px #ccc;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.28);
}

.button2-soft:active {
  /*押したとき*/
  -webkit-transform: translateY(2px);
  transform: translateY(2px);/*沈むように*/
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
  background-image: linear-gradient(#fed6e3 0%, #ffbcbc 100%);/*グラデーションを明るく*/
}


/*ログインボタンなど20200620*/
.button3-soft {
  display: inline-block;
  position: relative;
  text-decoration: none;
  color: #fff;
  /*width: 120px;*/
  height: 21px;
  /*line-height: 50px;*/
  padding: 4px;
  border-radius: 5px;
  text-align: center;
  overflow: hidden;
  font-size: 10pt;
  font-weight: bold;
  background: linear-gradient(#191970 0%, #0000cd 100%);
  text-shadow: 1px 1px 1px #ccc;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.28);
}

.button3-soft:active {
  /*押したとき*/
  -webkit-transform: translateY(2px);
  transform: translateY(2px);/*沈むように*/
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
  background-image: linear-gradient(#191970 0%, #0000cd 100%);/*グラデーションを明るく*/
}


/*ログインボタンなど20200620*/
.button4-soft {
  display: inline-block;
  position: relative;
  text-decoration: none;
  color: #fff;
  /*width: 120px;*/
  height: 21px;
  /*line-height: 50px;*/
  padding: 4px;
  border-radius: 5px;
  text-align: center;
  overflow: hidden;
  font-size: 10pt;
  font-weight: bold;
  background: linear-gradient(#ff4500 0%, #ff6347 100%);
  text-shadow: 1px 1px 1px #ccc;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.28);
}

.button4-soft:active {
  /*押したとき*/
  -webkit-transform: translateY(2px);
  transform: translateY(2px);/*沈むように*/
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
  background-image: linear-gradient(#ff8c00 0%, #ffa500 100%);/*グラデーションを明るく*/
}


/*ログインボタンなど20200620*/
.button5-soft {
  display: inline-block;
  position: relative;
  text-decoration: none;
  color: #fff;
  /*width: 120px;*/
  height: 21px;
  /*line-height: 50px;*/
  padding: 7px;
  border-radius: 5px;
  text-align: center;
  overflow: hidden;
  font-size: 12pt;
  font-weight: bold;
  background: linear-gradient(#006400 0%, #008000 100%);
  text-shadow: 1px 1px 1px #ccc;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.28);
}

.button5-soft:active {
  /*押したとき*/
  -webkit-transform: translateY(2px);
  transform: translateY(2px);/*沈むように*/
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
  background-image: linear-gradient(#006400 0%, #008000 100%);/*グラデーションを明るく*/
}






input[type="text"],
input[type="password"],
textarea,
select {
    outline: none;
    background-color: #fff;
}
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active  {
    -webkit-box-shadow: 0 0 0 30px white inset !important;
}
.tokushu_bl_intro {
width: 96%;
text-align:center;
font-size:20pt;
font-weight:bold;
font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
color:#fff;
background-color:red;
padding:2%;
}
.table2{
  border-collapse: separate;
  border-spacing: 0px 5px;
  margin: 0 auto;
}
.table2 td,th{
  padding: 10px;
}
.table2 th{
  background: #10a0e0;
  color: #fff;
}
.table2 td{
  background: #f1fafe;
}

.title1 {
  position: relative;
  padding: 1rem 2rem calc(1rem + 10px);
  background: #fff100;
}

.title1:before {
  position: absolute;
  top: -7px;
  left: -7px;
  width: 100%;
  height: 100%;
  content: '';
  border: 4px solid #000;
}

.textbox1{
  width: 220px;
  padding: 5px 8px;
  border-radius: 6px;
  border-top: 1px solid #aaa;
  border-left: 1px solid #aaa;
  border-right: 2px solid #aaa;
  border-bottom: 2px solid #aaa;
  background-image: none
  background-color: #ddd;
  font-size: 16px;
}
.button1 {
  display       : inline-block;
  border-radius : 5%;          /* 角丸       */
  font-size     : 18pt;        /* 文字サイズ */
  text-align    : center;      /* 文字位置   */
  cursor        : pointer;     /* カーソル   */
  padding       : 12px 12px;   /* 余白       */
  background    : #000066;     /* 背景色     */
  color         : #ffffff;     /* 文字色     */
  line-height   : 1em;         /* 1行の高さ  */
  transition    : .3s;         /* なめらか変化 */
  box-shadow    : 6px 6px 3px #666666;  /* 影の設定 */
  border        : 2px solid #000066;    /* 枠の指定 */
}
.button1:hover {
  box-shadow    : none;        /* カーソル時の影消去 */
  color         : #000066;     /* 背景色     */
  background    : #ffffff;     /* 文字色     */
}
.btn02 {
  display:block;  
  max-width: 180px;
  background-color: #333;
  font-size: 16px;
  color: #FFF;
  font-weight: bold;
  padding:16px;
  text-align: center;
  border-radius: 4px;
  transition: .4s;
}
.btn02:hover {
  background-color: #D3BA2B;
}

.btn-gradient-radius {
  display: inline-block;
  padding: 7px 20px;
  border-radius: 25px;
  text-decoration: none;
  color: #FFF;
  background-image: linear-gradient(45deg, #FFC107 0%, #ff8b5f 100%);
  transition: .4s;
  font-size:16pt;
  font-weight:bold;
}

.btn-gradient-radius:hover {
  background-image: linear-gradient(45deg, #FFC107 0%, #f76a35 100%);
}

.toc-005 {
    /*margin-bottom: 30px;*/
    /*border-radius: 3px;*/
    background-color: #f2f2f2;
}

.toc-005 div {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 10px;
    background-color: #2589d0;
    color: #fff;
    font-weight: 600;
    font-size: 14pt;
}

.toc-005 div::before {
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-right: 5px;
    background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22%23fff%22%3E%3Cpath%20d%3D%22M3.8%2017.2h-3c-.5%200-.8.4-.8.8v3c0%20.4.3.8.8.8h3c.4%200%20.8-.3.8-.8v-3c-.1-.4-.4-.8-.8-.8zm0-15h-3c-.5%200-.8.4-.8.8v3c0%20.4.3.8.8.8h3c.4%200%20.8-.3.8-.8V3c-.1-.4-.4-.8-.8-.8zm0%207.6h-3c-.5%200-.8.3-.8.7v3c0%20.4.3.8.8.8h3c.4%200%20.8-.3.8-.8v-3c-.1-.4-.4-.7-.8-.7zM23.2%2018h-15c-.4%200-.8.3-.8.8v1.5c0%20.4.3.8.8.8h15c.4%200%20.8-.3.8-.8v-1.5c0-.5-.3-.8-.8-.8zm0-15h-15c-.4%200-.7.3-.7.8v1.5c0%20.4.3.7.7.7h15c.5%200%20.8-.3.8-.8V3.8c0-.5-.3-.8-.8-.8zm0%207.5h-15c-.4%200-.8.3-.8.8v1.5c0%20.4.3.8.8.8h15c.4%200%20.8-.3.8-.8v-1.5c0-.5-.3-.8-.8-.8z%22%2F%3E%3C%2Fsvg%3E');
    content: '';
}

.toc-005 ol {
    list-style-type: decimal;
    margin: 0;
    overflow: hidden;
}

.toc-005 > ol {
    padding: 1em 1em 1em 3em;
}

.toc-005 ol ol {
    margin-top: 5px;
    padding-left: 1.1em;
}

.toc-005 li {
    padding: 0px;
    font-weight: 600;
}

.toc-005 ol ol li {
    font-weight: 500;
    font-size: .9em;
}

.toc-005 a {
    color: #333;
    text-decoration: none;
}


/* ここからハンバーガーメニューに関するCSS */
  
/* チェックボックスを非表示にする */
.drawer_hidden {
  display: none;
}

/* ハンバーガーアイコンの設置スペース */
.drawer_open {
  display: flex;
  height: 60px;
  width: 60px;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 100;/* 重なり順を一番上にする */
  cursor: pointer;
}

/* ハンバーガーメニューのアイコン */
.drawer_open span,
.drawer_open span:before,
.drawer_open span:after {
  content: '';
  display: block;
  height: 3px;
  width: 25px;
  border-radius: 3px;
  background: #000;
  transition: 0.5s;
  position: absolute;
}

/* 三本線の一番上の棒の位置調整 */
.drawer_open span:before {
  bottom: 8px;
}

/* 三本線の一番下の棒の位置調整 */
.drawer_open span:after {
  top: 8px;
}

/* アイコンがクリックされたら真ん中の線を透明にする */
#drawer_input:checked ~ .drawer_open span {
  background: rgba(255, 255, 255, 0);
}

/* アイコンがクリックされたらアイコンが×印になように上下の線を回転 */
#drawer_input:checked ~ .drawer_open span::before {
  bottom: 0;
  transform: rotate(45deg);
}

#drawer_input:checked ~ .drawer_open span::after {
  top: 0;
  transform: rotate(-45deg);
}



/* メニューのデザイン */
.nav_content {
  width: 70%;
  height: 100%;
  position: fixed;
  top: 0;
  left: -100%; /* メニューを左側に隠す */
  z-index: 99;
  background: #fff;
  transition: .5s;
  box-shadow: 2px 2px 15px grey;
  padding: 15px;
  overflow: scroll;
  direction: ltr; 
  text-align: left;
}

/* アイコンがクリックされたらメニューを表示 */
#drawer_input:checked ~ .nav_content {
  left: 0; /* メニューを画面の左端に表示 */
}

/* メニュー黒ポチを消す */
.nav_list {
  list-style: none;
}



/* ここまでハンバーガーメニューに関するCSS */


.nav_content_list ul {
width: 200px;
margin: 0px;
padding: 0;
list-style: none;
border-top: 1px solid #ccccca;
}

.nav_content_list li {
background:#fff;
border-bottom: 1px solid #ccc;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
}

.nav_content_list a {
padding: 10px 0 8px 10px;
display: block;
text-decoration: none;
color: #666;

}

.nav_content_list a:hover {
color: #0066ff;

background-color: #ccffff;
}

.view_photo {

    width: 35%;
    height: auto;


}


}/*@media screen and (min-width: 1100px) {*/