@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.2
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}
.page .sns-share {
    display: none;
}
/*ヘッダーの文字と背景の色を変える*/
.share-menu-button.menu-button{
	background-color: #333333;
	color: #ac74e4;
}
.logo-menu-button.menu-button{
	background-color: #333333;
}
.sidebar-menu-button{
	background-color: #333333;
	color: #ac74e4;
}


/* 画像サイズ最適表示 */
img {
max-width: 100%;
height:auto;
}
/*スライドインメニューを右から*/
.navi-menu-content{
	left: auto;
	right: 0;
	background-color: #E0DDDD;
	transform: translateX(101%);
}


/*---------------------------------
複数の固定ページの日付を非表示にする
--------------------------------*/
.post-41 .date-tags,
.post-2842 .date-tags,
.post-147 .date-tags,
.post-91 .date-tags,
.post-22 .date-tags,
.post-93 .date-tags {
  display: none;
}
/* 見出しカスタマイズ */
/* H2 */
.article h2{
background:none;
padding: 0;
padding: 0.5em;/*文字周りの余白*/
color: #494949;/*文字色*/
background: #DDDDDD;/*背景色*/
border-left: solid 5px #444444;/*左線（実線 太さ 色）*/
}

/* H3 */
.article h3{
border-top:none;
border-bottom:none;
border-left:none;
border-right:none;
padding: 0;
padding: 0.25em 0.5em;/*上下 左右の余白*/
color: #494949;/*文字色*/
background: transparent;/*背景透明に*/
border-left: solid 5px #888888;/*左線*/
}

/* H4 */
.article h4{
border-top:none;
border-bottom:none;
padding: 0;
/*線の種類（二重線）太さ 色*/
border-bottom: double 5px #444444;
}

/* H5 */
.article h5{
border-top:none;
border-bottom:none;
color: #eb6100;
padding: 0;
}

/* H6 */
.article h6{
border-bottom:none;
padding: 0;
}



/*新着記事ウィジェット文字の行間隔*/
.new-entry-card{
line-height: 170%
}

.ect-vertical-card .entry-card-wrap {
margin-bottom: 30px;
}

@media screen and (max-width: 480px) {/*縦１列のときの下の空き*/
.ect-vertical-card .entry-card-wrap {
margin-bottom: 10px;
}
}

/*Cocoonのcat-label（カテゴリラベル）の位置と文字のカスタマイズ*/
/*ここから*/
.cat-label {
	left: 2.5%;
	line-height: 1.8;
	border: 0;
	font-size: 0.80em;
	font-weight: 500;
}
/*ここまで*/

/**************************************
カテゴリーのもっと見るボタン
************************************/
/*カテゴリーごと表示の「もっと見る」ボタン*/
.list-more-button{
background:#333333;
color:#FFFFFF; /*文字色*/
:hover{
background: #555555; /*背景色*/
color:#FFFFFF; /*文字色*/
}
}



#main .button-caption {
	display: none; /*キャプション非表示*/
}
@media screen and {
    .recommended{
    overflow: auto;
    }
    .recommended .navi-entry-cards {
    flex-wrap: nowrap;
    width: 140%;
    }
}

#recommended .navi-entry-card-thumb img{
height:150px;
}

@media screen and (max-width: 834px){
    .recommended{
    overflow: auto;
    }
    .recommended .navi-entry-cards {
    flex-wrap: nowrap;
    width: 350%;/*おすすめカードサムネ幅*/
    }
}

/*フロント固定ページの投稿日を非表示*/
.home.page .post-date{
display: none;
}
/*フロント固定ページの更新日を非表示*/
.home.page .post-update{
display: none;
}
/*フロント固定ページの投稿者名を非表示*/
.home.page .author-info{
display: none;
}

/*フロント固定ページのタイトルを非表示*/
.home.page .entry-title{
display: none;
}

* 画像の周りに細い線　*/
.wp-show-posts-image img {
   padding: 0px;
   border: solid 0.6px #ccc;
   background-color: #fff;
}

/* 画像の右側と文字の間隔 */
.wp-show-posts-image.wpsp-image-left {
   float: left;
   margin-right: 0.6em;
}

/* Title文字の大きさ */
.wp-show-posts .wp-show-posts-entry-title {
   font-size: 18px;
   line-height: 20px;
   margin-bottom:5px;
}

/* 新着記事表示 */

.new-entry-cards.large-thumb-on {
display: flex;
flex-wrap: wrap;
}

.new-entry-cards.large-thumb-on a {
width: 33.333%;
}

/768px以下/
@media screen and (max-width: 768px){
.new-entry-cards.large-thumb-on a {
width: 50%;
}
}

/480px以下/
@media screen and (max-width: 480px){
.new-entry-cards.large-thumb-on a {
width: 100%;
}
}

/*ページネーション*/
.pagination-next-link{
position: relative;
width:40%;
background-color:#333333;
color:#FFFFFF;
font-size: 1rem;
font-weight: bold;
top: 0;
left: 50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
}
.pagination-next-link:hover { 
background-color:#ac74e4;
color:#fff;
} 

.page-numbers{
	color: #333333;
 font-family: "游ゴシック", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
 border-radius: 50%; /* 角を丸く */
 border-color: transparent;/* ページネーションの枠線を消す */
}
/* 色を変更 */
.pagination .current{
 font-family: "游ゴシック", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
 background: #ac74e4;/* 背景色 */
 color: #fff; /* 文字の色 */
}
.pagination a:hover{
 font-family: "游ゴシック", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
 background: #ac74e4;/* 背景色 */
 color: #fff; /* 文字の色 */
}
.page-numbers.dots{
 background-color: #fff;}

.entry-card-title {
    font-family:"Hiragino Sans";
	font-weight: 900;
	font-size: 1rem;
	color: #333333;
	margin: 0.4rem;
	margin-bottom: 1rem;
	letter-spacing: 0.1em;
	line-height: 1.5em
} 




/* 画面サイズの横幅が 481px より小さい場合に適用 */
@media screen and (max-width: 481px) {
	.ect-vertical-card .entry-card-wrap {
		width: 47%;
	}
}

/* 画面サイズの横幅が 481px より小さい場合に適用 */
@media screen and (max-width: 481px) {
	.entry-card-title {
    font-family: "游ゴシック", "ヒラギノ角ゴ Pro W3", sans-serif;
	font-size: 0.8rem;
	font-weight: 900;
	display:block;
	}
}


.author-name {
    font-size: 1.1em;
    font-weight: bold;
    margin-bottom: 10px;
}
.author-box .author-name a {
    text-decoration: none;
    color: #333;
}
.author-box p {
    margin-top: 0.3em;
    line-height: 1.6;
}
.author-box p a {
    text-decoration: none;
    color: #008cee;
}
.author-box p a:hover {
    text-decoration: underline;
    color: #008cee;
}
.author-box .sns-follow-buttons a.follow-button {
    font-size: 20px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    margin-bottom: 4px;
    margin-right: 8px;
    background: none;
    color: #fff;
}
.author-box a.follow-button span {
    line-height: 40px;
}
.author-box a.follow-button span::before {
    font-size: 22px;
}
.author-box .icon-facebook-logo::before {
    font-family: FontAwesome;
    content: "\f09a";
}
.author-box .icon-instagram-new::before {
    font-family: FontAwesome;
    content: "\f16d";
}
.author-box .icon-hatebu-logo::before {
    font-family: Verdana;
    content: 'B!';
    font-weight: bold;
}
.author-box .icon-google-plus-logo::before {
    font-family: FontAwesome;
    content: "\f0d5";
}
.author-box .icon-pinterest-logo::before {
    font-family: FontAwesome;
    content: "\f231";
}
.author-box .icon-amazon-logo::before {
    font-family: FontAwesome;
    content: "\f270";
}
.author-box .icon-github-logo::before {
    font-family: FontAwesome;
    content: "\f09b";
}
.author-box .website-button { background-color: #47555c !important; }
.author-box .twitter-button { background-color: #333333 !important; }
.author-box .facebook-button { background-color: #3b5998 !important; }
.author-box .hatebu-button { background-color: #2c6ebd !important; }
.author-box .google-plus-button { background-color: #dd4b39 !important; }
.author-box .instagram-button { background: #333333 !important; }
.author-box .youtube-button { background-color: #333333 !important; }
.author-box .flickr-button { background-color: #0063dc !important; }
.author-box .pinterest-button { background-color: #bd081c !important; }
.author-box .line-button { background-color: #00c300 !important; }
.author-box .amazon-button { background-color: #ff9900 !important; }
.author-box .rakuten-room-button { background-color: #c42e7f !important; }
.author-box .github-button { background-color: #333 !important; }
.author-box .feedly-button { background-color: #333333 !important; }
.author-box .rss-button { background-color: #f26522 !important; }
.author-box .soundcloud-button { background-color: #ff7700 !important; }
#main .author-box {
    border: none;
    border-radius: 3px;
    margin: 1em 0;
    line-height: 1.4;
    position: relative;
    padding: 1.4% 2% 1.8% 0;
    box-shadow: 0 5px 20px -5px rgba(105,115,131,.35);
}
#main .author-widget-name {
    display: inline-block;
    position: relative;
    margin: 10px 0 0 -170px;
    padding: 6px 12px;
    border-radius: 20px;
    background: #eaedf2;
    color: #555;
    font-size: 14px;
    font-weight: 700;
    z-index: 1;
}
#main .author-widget-name::before {
    position: absolute;
    content: '';
    z-index: -1;
    bottom: -30px;
    left: 60px;
    border: 15px solid transparent;
    border-top: solid 30px #eaedf2;
    transform: rotate(-40deg);
}
#main .author-thumb {
    float: left;
    margin: 0;
    padding-top: 70px;
    width: 200px;
    text-align: center;
}
#main .author-thumb img {
    border: solid 5px #dfe2e8;
    width: 100px;
}
#main .author-content {
    margin: -30px 0 0 200px;
    padding-left: 30px;
    border-left: 2px #eaedf2 dashed;
}
#main .author-box .author-name {
    line-height: 1;
}
#main .author-box p {
    font-size: .95em;
}
@media screen and (max-width: 480px){
#main .author-box {
    margin: 1em 10px;
    padding: 16px;
    text-align: center;
}
#main .author-widget-name {
    margin: 0;
}
#main .author-widget-name::before {
    left: 50px;
}
#main .author-thumb {
    float: none;
    margin: 0;
    padding-top: 20px;
    width: 100%;
}
#main .author-box .author-name {
    font-size: 14px;
}
#main .author-content {
    margin: 10px 0 0 0;
    padding-left: 0;
    border: none;
}
#main .author-box p {
    font-size: 14px;
    text-align: left;
}
#main .author-box .sns-follow-buttons {
    justify-content: center;
}
}

.comment-notes {
	display: none;
}


.blogcard{
	background: #d4cced
}

.internal-blogcard-footer{
	display: none
}

.internal-blogcard-footer{
	display: none
}

.blogcard{
	position: relative
}



.blogcard-title{
    text-shadow:
           2px 2px 0px #FFF, -2px -2px 0px #FFF,
          -2px 2px 0px #FFF,  2px -2px 0px #FFF,
           2px 0px 0px #FFF, -2px  0px 0px #FFF,
           0px 2px 0px #FFF,  0px -2px 0px #FFF;
}








.internal-blogcard:after{
	position: absolute;
	bottom: 10px;
	right: 20px;
	font-family: 'Font Awesome 5 free';
	content: '記事を読む \f101';
	font-size: 90%;
	font-weight: bold;
	background-color: #555555;
	color: #FFF; 
	padding: 0.2em 2em;
	border-radius: 2px
}

.blogcard{
	position: relative;
	padding-bottom:50px;
}

/*内部ブログカードの抜粋文を消す*/
.blogcard-snippet {
display: none;
}



/* 画面サイズの横幅が 481px より小さい場合に適用 ブログカード*/
@media screen and (max-width: 481px) {
.blogcard-title{
	font-size: 15px;
	margin: 8px;
    text-shadow:
           1px 1px 0px #FFF, -1px -1px 0px #FFF,
          -1px 1px 0px #FFF,  1px -1px 0px #FFF,
           1px 0px 0px #FFF, -1px  0px 0px #FFF,
           0px 1px 0px #FFF,  0px -1px 0px #FFF;
}}
.blogcard-thumbnail {
	width: 170px !important;
}
}






/**カルーセル**/
.carousel{
 width:100%;
 margin-left:calc( ( 100% - 100vw ) / 2 );
  margin: 0;
}
#carousel .carousel-in{
   box-shadow:none;
   width:100%;
   background-color:#333333;
}
#carousel .a-wrap{
   margin-top: 1rem;
   box-shadow:none;
   border:none;
   margin: 10px;
}
#carousel .carousel-entry-card-title{
   font-family: "游ゴシック", "ヒラギノ角ゴ Pro W3", sans-serif;
   font-size:0.92em;
   font-weight:bold;
   color:#ffffff;
	margin: 0.4rem;
	margin-bottom: 1rem;
	letter-spacing: 0.06em;
	line-height: 1.2em
}

.carousel-entry-card-title {
    max-height: 5em;
}


#carousel .carousel-entry-card-wrap:hover {
    background-color: #AC74E4;
}

.related-entry-card-title {
	font-size: 0.8rem !important;
	color: #333333;
	margin: 0.5rem;
	margin-bottom: 1rem;
	letter-spacing: 0.1em;
	line-height: 1.5em
}

/************************************
** ■日付のカスタマイズ
************************************/
.date-tags{
  line-height: 1.4; /*行間設定*/
  color: #666; /*文字色*/
}
.post-date, .post-update{
  font-size: 12px; /*フォントサイズ*/
  padding-right: 4px; /*右余白*/
  display: inline; /*横並びで縦中央揃え*/
}

/* 画面サイズの横幅が 481px より小さい場合に適用 エントリーカード隙間*/
@media screen and (max-width: 481px) {
	.ect-vertical-card .entry-card-wrap {
		width: 47%;
	}
}


/***タブ一覧表示の設定***/
/*選択タブの色*/
#index-tab-1:checked ~ .index-tab-buttons .index-tab-button[for="index-tab-1"],
#index-tab-2:checked ~ .index-tab-buttons .index-tab-button[for="index-tab-2"],
#index-tab-3:checked ~ .index-tab-buttons .index-tab-button[for="index-tab-3"],
#index-tab-4:checked ~ .index-tab-buttons .index-tab-button[for="index-tab-4"] {
background: #ac74e4; /*タブ色*/
border: none; /*枠線なし*/
}
/*非選択タブの色*/
.index-tab-buttons .index-tab-button{
background-color: #333333;
}
/*ホバー時のタブの色*/
.index-tab-wrap label:hover{
background-color: #ac74e4;
}
/*タブの文字色・太字*/
.index-tab-button{
font-family: "游ゴシック", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
font-size: 16px!important;/*文字の大きさ*/
color:#FFF;
font-weight: 700;
}

/* 画面サイズの横幅が 481px より小さい場合に適用 上へ戻るボタン*/
@media screen and (max-width: 481px) {
.index-tab-button{
font-family: "游ゴシック", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
font-size: 16px!important;/*文字の大きさ*/
color:#FFF;
font-weight: 700;
}
}

/*834px以上*/
@media screen and (min-width: 834px){
.index-tab-button{
font-family: "游ゴシック", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
font-size: 20px!;/*文字の大きさ*/
color:#FFF;
font-weight: 700;
}
}

/* ヘッダーカスタマイズ */
#navi-in,
.slicknav_menu {
font-family: "游ゴシック", "ヒラギノ角ゴ Pro W3";
font-weight: 600;

}


.grecaptcha-badge { visibility: hidden; }


/************************************************
 トップへ戻るボタン
*************************************************/

.go-to-top {
  right: 20px; /*右から20px*/
  bottom: 55px; /*下から55px*/
}

.go-to-top-button {
  border-radius: 50%; /*丸くする*/
  width: 60px; /*横幅*/
  height: 60px; /*高さ*/
  font-size: 30px; /*アイコンフォントのサイズ*/
  opacity:0.9; /*透明度*/
  box-shadow: 2px 2px 4px rgba(0, 0, 0, .2); /*影*/
}

/*ホバー時*/
.go-to-top-button:hover {
  color: #fff; /*アイコンフォントの色*/
  background-color:#ac74e4; /*背景色*/
}

.go-to-top {
  right: 20px; /*右から20px*/
  bottom: 55px; /*下から55px*/
}

/* 画面サイズの横幅が 481px より小さい場合に適用 上へ戻るボタン*/
@media screen and (max-width: 481px) {
.go-to-top {
  right: 20px; /*右から20px*/
  bottom: 10px; /*下から55px*/
}
}

/*834px以上*/
@media screen and (min-width: 834px){
.go-to-top {
  right: 200px; /*右から90px*/
  bottom: 20px; /*下から20px*/
}
}

/*834px以上*/
@media screen and (min-width: 834px){
.entry-title {
font-size: 30px;
}
}


/*サイドバー背景色*/
.header-container,
.sidebar,
.footer {
background-color:#333333;
}

.sidebar h3 {
	display: none;
}

/*コンテンツ上部の画像配置*/
#content-top-in {
    width: 100%;
}
.widget .widget-content-top .widget_media_image img {
    display: block;
    width: 100%;
}


/* 画面サイズの横幅が 481px より小さい場合に適用 アピールエリア*/
@media screen and (max-width: 481px) {
.go-to-top {
  right: 20px; /*右から20px*/
  bottom: 10px; /*下から55px*/
}
}

h6:first-letter {
  font-size: 2em;
  color: #ac74e4;
  font-weight:  bold;
}



.appeal-content {
	background-color: rgba(172,116,228,0.85);
}
.appeal-title,
.appeal-message {
	color: #fff;
}





/* 画面サイズの横幅が 600px より小さい場合に適用 トップページカテゴリー別新着記事一覧*/
@media screen and (max-width: 600px) {
.widget-entry-card-content {
  font-size: 14px;
  line-height: 1.5;
  padding: 0.5em;
}
.widget-entry-card {
    background-color:#ffffff;
	padding: 0.5em;
}
.new-entry-card img{ /*アイキャッチ*/
padding-left:3px;
}
}

/* トップページカテゴリー別新着記事一覧*/
.widget-entry-card-content {
  font-size: 16px;
  line-height: 1.5;
  padding: 0.5em;
}
.widget-entry-card {
    background-color:#ffffff;
	padding: 0.5em;
}


.kikaku {
font-family: "游ゴシック", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
  color: #000;
  -webkit-text-stroke: 2px #000000;
  text-stroke: 2px #000000;
}

.search {
  padding: 3em;
}

.front-top-page .list-new-entries-title.list-title {
font-size: 170%;
	

font-family: "游ゴシック", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
}






/* 画面サイズの横幅が 600px より小さい場合に適用 トップページカテゴリー別新着記事一覧*/
@media screen and (max-width: 600px) {
.front-top-page .list-new-entries-title.list-title {
font-size: 120%;
font-family: "游ゴシック", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
}
}

.author_box {
    background-color:#ffffff;
}

/* 画面サイズの横幅が 600px より大きい場合に適用 トップページカテゴリー別新着記事一覧　背景色*/
@media screen and (min-width: 600px) {
.change-area-top {
    background: #333333;
    margin-right: calc(50% - 50vw);
    margin-left: calc(50% - 50vw);
    padding-right: calc(50vw - 50%);
    padding-left: calc(50vw - 50%);
}
body {
 overflow-x: hidden;
}


	
<style>
/*::::::::::: JAPAN MAP 日本地図 :::::::::::*/
#jp_map { max-height:640px; position:relative; list-style-type:none; margin:0 auto; padding:0; box-sizing:border-box; overflow:hidden; }
#jp_map::before { content:''; display:block; padding:80% 0 0; }
#jp_map ul, #jp_map li { display:block; list-style:none; margin:0; padding:0; }
#jp_map a { display:block; font-weight: normal; text-decoration:none; color:var(--font-color); text-shadow:#fff 2px 0px, #fff -2px 0px, #fff 0px -2px, #fff 0px 2px, #fff 2px 2px, #fff -2px 2px, #fff 2px -2px, #fff -2px -2px, #fff 1px 2px, #fff -1px 2px, #fff 1px -2px, #fff -1px -2px, #fff 2px 1px, #fff -2px 1px, #fff 2px -1px, #fff -2px -1px; 
box-sizing:border-box; border:solid #fff 2px; float:none; font-size:14px; line-height:1; padding:6px 0; text-align:center; position:absolute; margin:0; text-decoration:none; }
#jp_map a:hover { opacity:.85; text-decoration:none; }
#jp_map a span { display:block; margin:0 auto; padding:0; line-height:1.1em; text-align:center; position:absolute; left:0; right:0; top:50%; transform:translateY(-50%); } 
#jp_map .hokkaido a, #jp_map .tohoku a { background-color:#759ef4; }
#jp_map .kanto a { background-color:#7ecfea; } 
#jp_map .chubu a { background-color:#7cdc92 } 
#jp_map .kansai a { background-color:#ffe966; } 
#jp_map .chugoku a { background-color:#ffcc66; } 
#jp_map .shikoku a { background-color:#ffbb9c; } 
#jp_map .okinawa a, #jp_map .kyushu a { background-color:#ffbdbd; } 
#jp_map li a { height:12%; width:7%; }
#jp_map li.hokkaido a { top:0; left:81%; height:20%; width:21%; }
#jp_map li.hokkaido a span { right:7.5%; }
#jp_map li.hokkaido a::before, #jp_map li.hokkaido a::after { display:block; z-index: 1; content:''; background-color:inherit; width:10%; height:40%; right:100%; bottom:0; position: absolute; } 
#jp_map li.hokkaido a::after { content:''; border:inherit inherit inherit; z-index:-1; } 
#jp_map li.aomori a { top:21%; left:79%; height:8%; width:19%; }
#jp_map li.iwate a { top:29%; left:89.5%; height:8%; width:10.5%; }
#jp_map li.akita a { top:29%; left:79%; height:8%; width:10.5%; }
#jp_map li.miyagi a { top:37%; left:89.5%; height:8%; width:10.5%; }
#jp_map li.yamagata a { top:37%; left:79%; height:8%; width:10.5%; }
#jp_map li.fukushima a { top:45%; left:93%; height:18%; }
#jp_map li.ibaraki a { top:63%; left:93%; height:18%; }
#jp_map li.tochigi a { top:57%; left:86%; }
#jp_map li.gunma a { top:57%; left:79%; }
#jp_map li.saitama a { top:69%; left:86%; }
#jp_map li.chiba a { top:81%; left:93%; height:17%; }
#jp_map li.tokyo a { top:81%; left:86%; }
#jp_map li.kanagawa a { top:81%; left:79%; }
#jp_map li.nigata a { top:45%; left:79%; width:14%; }
#jp_map li.toyama a { top:45%; left:72%; }
#jp_map li.ishikawa a { top:45%; left:65%; height:17%; }
#jp_map li.fukui a { top:50%; left:58%; }
#jp_map li.yamanashi a { top:69%; left:79%; }
#jp_map li.nagano a { top:57%; left:72%; height:24%; }
#jp_map li.gifu a { top:62%; left:65%; height:19%; }
#jp_map li.shizuoka a { top:81%; left:72%; }
#jp_map li.aichi a { top:81%; left:65%; }
#jp_map li.mie a { top:86%; left:58%; }
#jp_map li.shiga a { top:62%; left:58%; }
#jp_map li.kyoto a { top:56%; left:51%; height:18%; }
#jp_map li.osaka a { top:74%; left:51%; }
#jp_map li.hyogo a { top:53%; left:44%; height:24%; }
#jp_map li.nara a { top:74%; left:58%; }
#jp_map li.wakayama a { top:86%; left:51%; }
#jp_map li.tottori a { top:53%; left:37%; }
#jp_map li.shimane a { top:53%; left:30%; }
#jp_map li.okayama a { top:65%; left:37%; }
#jp_map li.hiroshima a { top:65%; left:30%; }
#jp_map li.yamaguchi a { top:59%; left:23%; }
#jp_map li.tokushima a { top:89.5%; left:36.5%; height:8%; width:10.5%; }
#jp_map li.kagawa a { top:81.5%; left:36.5%; height:8%; width:10.5%; }
#jp_map li.ehime a { top:81.5%; left:26%; height:8%; width:10.5%; }
#jp_map li.kochi a { top:89.5%; left:26%; height:8%; width:10.5%; }
#jp_map li.fukuoka a { top:55%; left:15%; }
#jp_map li.saga a { top:55%; left:8%; }
#jp_map li.nagasaki a { top:55%; left:1%; height:16%; }
#jp_map li.kumamoto a { top:67%; left:8%; }
#jp_map li.oita a { top:67%; left:15%; }
#jp_map li.miyazaki a { top:79%; left:15%; }
#jp_map li.kagoshima a { top:79%; left:8%; }
#jp_map li.okinawa a { top:88%; left:0; }
@media screen and (max-width:782px) {
#jp_map { margin: 16px 0 0; }
#jp_map::before { padding:100% 0 0; }
#jp_map li a { font-size:12px; border-width:1px; }
#jp_map a { text-shadow:#fff 1px 0px, #fff -1px 0px, #fff 0px -1px, #fff 1px -1px, #fff -1px -1px, #fff 0px 1px, #fff 1px 1px, #fff -1px 1px; border-width:1px; font-size:12px; }
#jp_map li.tokushima a, #jp_map li.kochi a { top:88%; }
#jp_map li.kagawa a, #jp_map li.ehime a { top:80%; }
}
@media screen and (max-width:620px) {
#jp_map a span { width: 1em; }
#jp_map li.hokkaido a span, #jp_map li.aomori a span, #jp_map li.akita a span, #jp_map li.iwate a span, #jp_map li.yamagata a span, #jp_map li.miyagi a span, #jp_map li.nigata a span, #jp_map li.ehime a span, #jp_map li.kagawa a span, #jp_map li.kochi a span, #jp_map li.tokushima a span { width:auto; }
}
@media screen and (max-width:480px) {
#jp_map li a { font-size:11px; }
}
</style>
	
	
/*アピールエリアの高さ設定　スマホ*/
@media (max-width: 767px){
#appeal {
height: 80vw; 
}