@charset "utf-8";

body{
font-family:"游ゴシック体", YuGothic, "游ゴシック Medium",
"Yu Gothic Medium", "游ゴシック", "Yu Gothic",
"メイリオ", sans-serif;
color: #333;font-size:1rem;line-height:1.85;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-text-size-adjust: 100%;
word-wrap: break-word;background: white;}

/* =========================================================================
                      まとめて指定できるもの
   =========================================================================*/
*{box-sizing: border-box;}
a{color: #333;text-decoration: none;outline: none;}

/* 文字　 「NEWS／ARCHIVE」「ABOUT US」「CONTACT／JOIN」 */
#news h2,#aboutus h2,#contact h2{
font-family:'Oswald', sans-serif;font-weight: bold;
color:darkgreen;text-align:center;letter-spacing: 0.1em;
font-size: 25px;margin:25px auto 25px;}

/* 文字　「新着情報／過去の記事」「私たちについて」 「ご意見等／加入のご案内」*/
.title_sub{
color:#CC6600;font-family:serif,'arial black';
font-size:15px;padding-left: 20px;}
@media screen and (max-width:960px)/*  header 「むらさき」　 */
{
#news h2,#aboutus h2,#contact h2{font-size: 25px;margin:20px auto 0;}
}
@media screen and (max-width:767px)/*  header 「ピンク」　 */
{
#news h2,#aboutus h2,#contact h2{font-size: 20px;margin:20px auto  0;}
}
@media screen and (max-width:540px)/*  header 「灰色」　 */
{
#news h2,#aboutus h2,#contact h2{font-size: 20px;margin:20px auto  0;}
}
@media screen and (max-width:420px)
{
#news h2,#aboutus h2,#contact h2{font-size: 18px;margin:20px auto  0;}
.title_sub{font-size:13px;padding-left:5px;}
}
@media screen and (max-width:325px)
{
#news h2,#aboutus h2,#contact h2{font-size: 17px;margin:10px auto  0;}
.title_sub{font-size:10px;padding-left: 10px;}
}
/* =========================================================================
                      header
   ========================================================================= */
#header
{
position: fixed;display: flex;justify-content: space-between;align-items: center;
width:100%;height: 60px;top:0;z-index: 9;
background: linear-gradient(to right,#66CC66 0%,#CCFF99 30%,#CCFF99 70%,#66CC66 100%);
}
/* =========== header 左の文字　「食の未来を考えよう」 =========== */
#header h1
{
position: absolute;
font-family:'Oswald', sans-serif;color:#eb6100;
letter-spacing: 0.2em;
font-size: 1.2rem;left: 50px;
}
@media screen and (max-width:960px)/* header  紫 */
{
  #header{background: #D0B0FF;}/**/
}
@media screen and (max-width:767px)/* header ピンク*/
{
  #header{background: pink;}/**/
}
@media screen and (max-width:540px)/* header 灰色*/
{
  #header{background: #CCCCCC;}/**/
}
@media screen and (max-width:420px)/* header  黄緑 */
{
  #header{background: linear-gradient(to right,#66CC66 0%,#CCFF99 30%,#CCFF99 70%,#66CC66 100%)}
}
@media screen and (max-width:325px)
{
}
@media screen and (max-width:315px)
{
}

/* ======================== 現在地メニュー ================================ */
#pc-nav{display: flex;position: absolute;right:10%;top:17px;}

#pc-nav ul{
  	list-style: none;display: flex;justify-content: center;
  	text-transform: uppercase;
    margin: 0 0 0 20px;}
/* [TOP] [NEWS] [ARCHIVE] の配置*/
#pc-nav a{display: block;font-family:'Oswald', sans-serif;
    font-weight: bold;color: #333;transition:all 0.3s;letter-spacing: 0.1em;
    padding:0px 15px 0;font-size: 16px;}
/*  [TOP] [NEWS] [ARCHIVE] の配置*/
#pc-nav li a{
  	display: block;text-decoration: none;
  	color: #333;
  	padding:padding:0 20px;;
  	transition:all 0.3s;}

/*　↓　hover 時のみ、色を変化させる（すぐに元の色に戻したいので）*/
#pc-nav li.current a,#pc-nav li a:active{color:#eb6100;}

/*右矢印（三角）のマーク*/
.mycontent_green:before{content:"»";color:darkgreen;}

@media screen and (max-width:960px)/* header  紫 */
{
/* =========== header 左の文字　「食の未来を考えよう」 =========== */
#header h1{font-size: 1.2rem;left: 20px;}
/* [TOP] [NEWS] [ARCHIVE] の配置*/
#pc-nav{right:100px;top:17px;}
#pc-nav a{padding:0px 6px 0;font-size: 16px;}
#pc-nav ul{margin: 0 -20px 0 0px;}
#pc-nav li a{padding:0 7px;}
}
@media screen and (max-width:767px)/* header ピンク*/
{
/* ここから　flex-direction: column　*/
#header{display: flex;flex-direction: column;}
/* =========== header 左の文字　「食の未来を考えよう」 =========== */
#header h1{font-size: 1.2rem;left: 20px;}
/* [TOP] [NEWS] [ARCHIVE] の配置*/
#pc-nav{left: 22px;right:0px;top:30px;}
#pc-nav a{padding:0px 6px 0;font-size: 16px;}
#pc-nav ul{margin: 0 0 0 -10px;}
#pc-nav li a{padding:0 10px;}
}
@media screen and (max-width:555px)/* header 灰色*/
{
/* =========== header 左の文字　「食の未来を考えよう」 =========== */
#header h1{font-size: 1.0rem;top:5px;left: 13px;}/* =========== 9/4 変更　元 font-size: 1.2rem;left: 12px;=========== */
/* [TOP] [NEWS] [ARCHIVE] の配置*/
#pc-nav{left: 8px;right:0px;top:33px;}
#pc-nav a{padding:0px 4px 0;font-size: 13px;}/* ==== 9/4 変更　元 padding:0px 4px 0;font-size: 14px;========== */
#pc-nav ul{margin: 0px 0 0 0px;}
#pc-nav li a{padding:0 7px;}
}
@media screen and (max-width:420px)/* header 黄緑*/
{
/* =========== header 左の文字　「食の未来を考えよう」 =========== */
#header h1{font-size: 1.0rem;left: 12px;top:5px;}
/* [TOP] [NEWS] [ARCHIVE] の配置*/
#pc-nav{left: 8px;right:0px;top:33px;}
#pc-nav a{padding:0px 4px 0;font-size: 11px;}
#pc-nav ul{margin: 3px 0 0 0px;}
#pc-nav li a{font-size: 12px;transform: scale(0.8,1);padding:0 0px;}
}
@media screen and (max-width:325px)
{
#pc-nav ul{margin: 3px 0 0 0px;}
#pc-nav li a{font-size: 11px;transform: scale(0.8,1);padding:0 0px;}
}
@media screen and (max-width:315px)
{
#pc-nav ul{margin: 3px 0 0 0px;}
#pc-nav li a{font-size: 10px;transform: scale(0.8,1);padding:0 0px;}
}
/* =========================================================================
                      スライドショー
   ========================================================================= */
/* ↓　9/3 変更　=========== 元　width: 800px; ================================　9/3 変更 */
.slide_box{width: 100%;height:450px;position: relative;}
/* 写真　の大きさ・配置 */
.slide img
{
position:fixed;transform: translate(-50%,-50%);
opacity:0;transition:all 1s ease-in-out;padding: auto;
top: 295px;left: 50%;
width: 800px;height:450px;
}
#slide_speed
{
display: none;transform:rotateY(180deg);
width: 50px;margin: 110px 0px 0px 10px;
}
/* ====================== メイン画像の中の文字  ==========================
          　「  遺伝子組み換え食品いらない！ <br> キャンペーン 」        */
.top-lead_b{display: none;}
.top-lead_a
{
position: fixed;text-transform: uppercase;font-weight: bold;
font-family: 'Lato', sans-serif;letter-spacing: 0.05em;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);color:white;
text-align: center;transform: translate(-50%,-50%);
top:120px;left:50%;font-size:30px;line-height: 1.1;
}
/*  ↓ メイン画像の中の文字 の下に　伸びる線 */
.top-lead_a span.bgLRextend::before{background:#eb6100;}/* オレンジ色 */
.top-lead_b span.bgLRextend::before{background:#eb6100;}/* オレンジ色 */
.bx-wrapper{box-shadow:none;border:none;}

@media screen and (max-width:960px)/*  header 「むらさき」　 */
{
.slide img {width: 600px;height:350px;top: 245px;left: 50%;}
.top-lead_a{width: 500px;top:120px;left:50%;font-size:30px;}
}
@media screen and (max-width:767px)/*  header 「ピンク」　 */
{
.slide img {width: 480px;height:300px;top: 220px;left: 50%;}
.top-lead_a{width: 450px;top:110px;left:50%;font-size:25px;}
}
@media screen and (max-width:555px) /* ←　9/3 変更　 元　(max-width:540px)　======　9/3 変更 */
{
.slide img {width: 100%;height:350px;top: 230px;left: 50%;}
.top-lead_a{width: 550px;top:100px;left:50%;font-size:25px;}
}
@media screen and (max-width:420px)/*  header 「黄緑」　 */
{
.slide_box{width: 100%;height:300px;}
.slide img {width: 100%;height:300px;top: 205px;left: 50%;}
.top-lead_a{display: none;}
.top-lead_b{display: block;position: fixed;
text-transform: uppercase;font-weight: bold;
font-family: 'Lato', sans-serif;letter-spacing: 0.05em;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);color:white;
text-align: left;transform: translate(-50%,-50%);
width: 325px;top:110px;left:50%;font-size:22px;line-height: 1.1;}
}

@media screen and (max-width:325px)/*  header 「黄緑」　 */
{
.slide_box{width: 100%;height:300px;}
.slide img {width: 100%;height:300px;top: 205px;left: 50%;}
.top-lead_b{width: 300px;top:100px;left:55%;font-size:18px;}
}
@media screen and (max-width:315px)/*  295pxあたりで調整　 */
{
.top-lead_b{width: 300px;top:100px;left:55%;font-size:18px;}
}

/* =========================================================================
                    container     main-area
   ========================================================================= */
#container{position: relative;z-index:1;background:#fff;}
/*.slide img のwidth:800px　/* 上下のコーナーのアキ*/
#main-area{width:800px;margin:80px auto 0;padding: 15px 0;}
/* =======メイン画像の下の文字　「　遺伝子組み換えはいらない！ 」======= */
/*  ↓文字 「遺伝子組み換えはいらない」　 */
#topics h2{
  color:#eb6100;font-family: 'Lato', sans-serif;letter-spacing: 0.1em;
　font-size: 25px;}
#topics{border-left:3px solid darkgreen;padding: 0 0 0 20px;}/*  文字左のタテ線　 */
#topics h2 span.bgLRextend::before{background:darkgreen;}/*文字バックの伸びる線の色*/
/*  ↓　文字 「□□□□□□□□」「□□□□□□□□」「□□□□□□□□□□」*/
#topics li{font-family:serif,'arial black';font-weight: bold;font-size: 20px;}
/* ============== ニュースティッカー ==============*/
/*ニュース1行の周りの余白*/
.slider a{display: block;background:#fff;padding:10px 0;}
/*日付*/
.slider time{display:inline-block;font-size:0.8rem;margin-right:0px;color:#777;}

/* ========================================================================= レスポンシブ =========== */
@media screen and (max-width:960px)/*  header 「むらさき」　 */
{
#main-area{width:600px;margin:-30px auto 0;padding: 15px 0;}
#topics li{font-size: 15px;}/*  文字 「□□□□□□□□」「□□□□□□□□」「□□□□□□□□□□ */
}
@media screen and (max-width:767px)/*  header 「ピンク」　 */
{
#main-area{width:480px;margin:-79px auto 0;padding: 13px 0;}
#topics h2{font-size: 20px;}/*  文字 「遺伝子組み換えはいらない！」　 */
#topics li{font-size: 14px;}/*  文字 「□□□□□□□□」「□□□□□□□□」「□□□□□□□□□□」*/
}
@media screen and (max-width:555px)/*  header 「灰色」　 */ /* ←　9/3 変更　 元　(max-width:540px)　======　9/3 変更 */
{
#main-area{width:100%;margin:-45px auto 0;padding: 13px 0;}
#topics{border-left:3px solid darkgreen;margin-left: 20px;}/*  文字左のタテ線　 */
#topics h2{font-size: 18px;}/*  文字 「遺伝子組み換えはいらない！」　 */
#topics li{font-size: 14px;}/*  文字 「□□□□□□□□」「□□□□□□□□」「□□□□□□□□□□」*/
}
@media screen and (max-width:420px)/*  header 「黄緑」　 */
{
#main-area{width:100%;margin:55px auto 0;padding: 20px 0;}
#topics{margin-left: 20px;}/*  文字左のタテ線　 */
#topics h2{font-size: 16px;}/*  文字 「遺伝子組み換えはいらない！」　 */
#topics li{font-size: 14px;}/*  文字 「□□□□□□□□」「□□□□□□□□」「□□□□□□□□□□」*/
}
@media screen and (max-width:325px)/*  header 「黄緑」　 */
{
#main-area{width:90%;margin:-100px auto 0;}
#topics h2{font-size: 15px;}/*  文字 「遺伝子組み換えはいらない！」　*/
#topics li{font-size: 14px;line-height: 18px;}/* 文字「□□□□□□」「□□□□□□□」*/
}
@media screen and (max-width:315px)/*  295pxあたりで調整　 */
{
#main-area{width:90%;margin:-100px auto 0;}
#topics{display: none;}/*  小さいので非表示にした　*/
}

/* =========================================================================
                         rinks
               　　　#rinks widthは不要
   ========================================================================= */
/*　↓ 「 rinks 」全体のスペース　大きさと配置　※ widthは .slide img と同じ */
#rinks{margin: -50px auto 0;}/* 上下のコーナーのアキ width haightは不要 */

.group{display: flex;justify-content: center;}
.group_a,.group_b{padding-top: 20px;display: flex;justify-content: center;}
/* 各画像の大きさと配置*/
.group_a img,.group_b img{height: 90px;padding: 0 20px 5px 20px;}
.group_a img:hover{height: 100px;transition-duration: .5s;}
.group_b img:hover{height: 100px;transition-duration: .5s;}
/* 文字　「▲CLICK」*/
.group_a h3,.group_b h3{font-family:'Oswald', sans-serif;
  font-size: 13px;text-align: center;color:#FF4F02;line-height: 15px;}
/* 文字　「▲CLICK」の下の文字*/
.group_a span,.group_b span{font-size: 12px;text-align: center;color:darkgreen;}

.line_ue{border: 1px dotted darkgreen;}/* 「and more..」のドットケイ*/
.line_sita{border: 1px dotted darkgreen;margin-bottom:10px;}/* 「and more..」のドットケイ*/
/*　↓ .more　「and more..」のスペース　大きさと配置*/
.more{display: flex;justify-content: center;
      width: 650px;margin: 30px auto 0;}
.more h3{color: darkgreen;font-size: 20px;padding-top: 3px;}/* 文字　「and more..」*/
.more a{font-size: 15px;color:black;}
.more a:hover{color:darkgreen;}
.kankeidantai{color:darkgreen;font-weight: bold;}
.click{color: #FF4F02;padding-left: 30px;font-size: 15px;}/* 文字　「 ▼クリックで表示 」 */
.click{/* 点滅させる　「 ▼クリックで表示 」 */
animation-name: fadeInAnime;
animation-duration: 2s;/*点滅の間隔*/
animation-fill-mode: forwards;
animation-iteration-count: infinite;/*ループする　（infiniteを数字にするとその回数点滅）*/
opacity: 0;}
@keyframes fadeInAnime
{
  0%{opacity: 0;}
  100%{opacity: 1;}
}
/* ========================================================================= レスポンシブ =========== */
@media screen and (max-width:960px)/* 紫 */
{
#rinks{margin-top:-40px;}/* width haightは不要 */
.group_a img,.group_b img{height: 90px;margin: 0 -3px 0 -3px;}
/* 文字　「▲CLICK」の下の文字*/
.group_a span,.group_b span{font-size: 12px;}
.more a{font-size: 14px;}
.more{width: 600px;margin: 10px auto;}
}
@media screen and (max-width:767px)/* ピンク　ここから2段に */
{
#rinks{margin-top:-40px;}/* width haightは不要 */
.group{flex-direction: column;}
.group_a{display: flex;justify-content: center;margin-top: 10px;}
.group_b{display: flex;justify-content: center;padding-top:10px;}
.more a{font-size: 15px;}
.group_a img,.group_b img{height: 90px;margin: 0 10px 0 10px;}
.more{width: 480px;margin: 10px auto -30px;}
}
@media screen and (max-width:555px)/*  header 「灰色」　 */ /* ←　9/3 変更　 元　(max-width:540px)　======　9/3 変更 */
{
#rinks{margin-top:-40px;}/* width haightは不要 */
.more{width: 360px;height: 135px;margin: 10px auto 100px;}
/* 文字　「▲CLICK」の下の文字*/
.group_a span,.group_b span{font-size: 12px;}
.more a{font-size: 15px;}
}
@media screen and (max-width:420px)
{
#rinks{margin:-60px auto 100px;}/* width haightは不要 */
.group_a img,.group_b img{height: 60px;margin: 0 5px 0 5px;}
.group_a img:active{height: 80px;transition-duration: .5s;}/* 9/5 active に変更した　　　================  9/5 */
.group_b img:active{height: 80px;transition-duration: .5s;}/* 9/5 active に変更した　　　================  9/5 */
/* 文字　「▲CLICK」*/
.group_a h3,.group_b h3{font-size: 12px;line-height: 15px;}
 /* 文字　「▲CLICK」の下の文字*/
.group_a span,.group_b span{font-size: 11px;}
.text-narrow {transform: scale(0.9, 1);}/* 文字　少し長体かける*/
.more a{font-size: 13.5px;}
.more{width: 300px;height: 135px;margin: 10px auto 0;}
.click{padding-left: 10px;font-size: 12px;}
}
@media screen and (max-width:325px)
{
#rinks{margin-top:-40px;}/* width haightは不要 */
.group_a img,.group_b img{height: 60px;margin: 0 0px 0 0px;}
.more h3{font-size: 17px;padding-top: 5px;}/* 文字　「and more..」*/
.more a{font-size: 13px;line-height: 15px;}
.more{width: 280px;height: 135px;margin: 10px auto;}
.click{padding-left: 10px;font-size: 12px;}
}
@media screen and (max-width:315px)/*  295pxあたりで調整　 */
{
#rinks{
top:300px;left:50%;
height:550px;
margin: auto;}/* widthは不要 */
.group_a img,.group_b img{height: 60px;margin: 0 0px 0 0px;}
.more_wrap{width: 90%;}
.more h3{font-size: 17px;padding-top: 5px;}/* 文字　「and more..」*/
.more a{font-size: 13px;line-height: 15px;}
.more{width: 290px;height: 135px;margin: 10px auto;}
.click{padding-left: 10px;font-size: 12px;}
/* 文字　「▲CLICK」の下の文字*/
.group_a span,.group_b span{font-size: 10px;}
}

/* =========================================================================
                    NEWS／ARCHIVE    新着情報／過去の記事
              コーナー全体のwidth は  #main-area{width:800px;} に依存
   ========================================================================= */
#news{width: 800px;margin:-20px auto 0px;}/* 上下のコーナーのアキ*/
/* ------Tabのレイアウト     オレンジ #eb6100  うすいオレンジ #FFDBC9 --- */
/*メニュー全体の配置*/
.tab{display: flex;flex-wrap: wrap;margin-top:-20px;}
/*tabスペースと配置*/
.tab_wrap{margin:0px auto 0;}
ul{list-style:none;}
/*エリアの表示非表示と形状*/
.area{
display: none;opacity: 0;background: #FFDBC9;
padding:50px 0px 20px;}

.sec{
width: 100%;
margin: 0px auto 0;background-color: #FFDBC9;}

/*areaにis-activeというクラスがついた時の形状*/
.area.is-active{
display: block;animation-name: displayAnime;
animation-duration: 2s;animation-fill-mode: forwards;}

@keyframes displayAnime{
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

/*=======    タブの文字   「NEWEST」「EVENT」「DEMAND」「OTHER」  ========*/
.tab li a{
display: block;font-family:'Oswald', sans-serif;
color:#696969;/*文字:濃いグレー*/
background:#D3D3D3;/*地色:薄いグレー*/
margin:0 5px 0px 0px;/*タブの配置*/
padding:5px 0px;text-align: center;
border-radius: 10px 0px 0 0;
width:160px;font-size: 18px;}
/*右三角のマーク*/
.mycontent:before{content:"»";}
/*liにactiveクラスがついた時の形状*/
.tab li.active a{background:#eb6100;}/*地色:濃いオレンジ*/
.tab li.active a{color:white;}/*文字:白*/
.tab li a:hover{color:white;background:#eb6100;}
/* カテゴリー内部の タイトル　/ 地色:緑　文字:白 */
.area h4{
text-align: center;background-color: darkgreen;color:white;
font-size:1.3rem;line-height: 1.7rem;
margin:-50px auto 0px;padding: 10px;}

/*　▲ 先頭の記事へ　 記事一覧　　のスペース　*/
.kiji_lr{display: flex;justify-content: space-between;
  width: 700px;margin: 20px auto 0;}
.kiji_lr h3{padding-top: 6px;}
/*　▲ 先頭の記事へ　*/
.kiji_l{display: block;background:#eb6100;color:white;
  width: 500px;height: 40px;text-align: center;
  font-size: 16px;padding: 0px auto 0px;}
.kiji_lr.kiji_r h3{padding-top: -10px;}
/*　▲ 先頭の記事へ　 NEWEST 用　*/
.kiji_reigai{display: block;background:#eb6100;color:white;
  width: 700px;height: 40px;text-align: center;
  font-size: 16px;padding: 0px auto 0px;}
/*　▶ EVENT一覧/▶ DEMAND一覧/▶ OTHER一覧　*/
.kiji_r{display: block;background:darkgreen;color:white;
  width: 200px;height: 40px;text-align: center;
  font-size: 16px;padding: 5px auto 0px;}
/*　hover　*/
.kiji_r:hover{color:yellow;background: red;}
.kiji_l:hover{color:yellow;background: red;}
.kiji_reigai:hover{color:yellow;background: red;}
/* ========================================================================= レスポンシブ =========== */
@media screen and (max-width:960px)/*  header 「むらさき」　 */
{
#news{width: 600px;margin:-20px auto 0px;}
/*メニュー全体の配置*/
.tab{margin-top:-55px}
/*tabスペースと配置*/
.tab_wrap{margin:0px auto 0;}
/*エリアの表示非表示と形状*/
.area{padding:50px 0px 20px;}
.sec{width: 100%;margin: 0px auto 0;}
.tab li a{
  margin:60px 5px 0px 0px;/*タブの配置*/
  padding:3px 0px;
  border-radius: 10px 0px 0 0;
  width:130px;font-size: 18px;}
/* カテゴリー内部の タイトル　/ 地色:緑　文字:白 */
.area h4{margin:-50px auto 0px;padding: 10px;}
.area li{width: 70%;}
/*　▲ 先頭の記事へ　 記事一覧　　のスペース　*/
.kiji_lr{width: 555px;margin: 20px auto 0;} /* ←　9/3 変更　 元　(max-width:540px)　======　9/3 変更 */
.kiji_lr h3{padding-top: 6px;}
/*　▲ 先頭の記事へ　*/
.kiji_l{width: 340px;height: 40px;font-size: 16px;padding: 0px auto 0px;}
.kiji_lr.kiji_r h3{padding-top: -10px;}
/*　▲ 先頭の記事へ　 NEWEST 用　*/
.kiji_reigai{width: 540px;height: 40px;font-size: 16px;padding: 0px auto 0px;}
/*　▶ EVENT一覧/▶ DEMAND一覧/▶ OTHER一覧　*/
.kiji_r{width: 200px;height: 40px;font-size: 16px;padding: 5px auto 0px;}
}
@media screen and (max-width:767px)/*  header 「ピンク」　 */
{
#news{width: 500px;margin:-20px auto 0px;}
/*メニュー全体の配置*/
.tab{margin-top:-55px}
/*tabスペースと配置*/
.tab_wrap{margin:0px auto 0;}
/*エリアの表示非表示と形状*/
.area{padding:50px 0px 20px;}
.sec{width: 100%;margin: 0px auto 0;}
/*=======    タブの文字   「NEWEST」「EVENT」「DEMAND」「OTHER」  ========*/
.tab li a{
  margin:60px 5px 0px 0px;/*タブの配置*/
  padding:3px 0px;
  border-radius: 10px 0px 0 0;
  width:110px;font-size: 18px;}
/* カテゴリー内部の タイトル　/ 地色:緑　文字:白 */
.area h4{margin:-50px auto 0px;padding: 10px;}
/*　▲ 先頭の記事へ　 記事一覧　　のスペース　*/
.kiji_lr{width: 440px;margin: 20px auto 0;}
.kiji_lr h3{padding-top: 6px;}
/*　▲ 先頭の記事へ　*/
.kiji_l{width: 290px;height: 40px;font-size: 16px;padding: 0px auto 0px;}
.kiji_lr.kiji_r h3{padding-top: -10px;}
/*　▲ 先頭の記事へ　 NEWEST 用　*/
.kiji_reigai{width: 440px;height: 40px;font-size: 16px;padding: 0px auto 0px;}
/*　▶ EVENT一覧/▶ DEMAND一覧/▶ OTHER一覧　*/
.kiji_r{width: 150px;height: 40px;font-size: 16px;padding: 5px auto 0px;}
}
@media screen and (max-width:555px)/*  header 「灰色」　 */
{
#news{width: 100%;margin:-20px auto 0px;}
/*メニュー全体の配置*/
.tab{margin-top:-55px}
/*tabスペースと配置*/
.tab_wrap{width:380px;margin:0px auto 0;}
/*エリアの表示非表示と形状*/
.area{padding:50px 0px 20px;}
.sec{width: 100%;margin: 0px auto 0;}
/* 文字　「　最新情報 NEWS　」 */
.sec_header{text-align: center;margin-top: 20px;margin-bottom: 0px;}/* 上下のコーナーとのアキ */
/*=======    タブの文字   「NEWEST」「EVENT」「DEMAND」「OTHER」  ========*/
.tab li a{
margin:60px 4px 0px 0px;
padding:3px 0px;
width: 90px;font-size: 14px;}
/* カテゴリー内部の タイトル　/ 地色:緑　文字:白 */
.area h4{font-size:1.0rem;line-height: 1.7rem;
  margin:-50px auto 0px;padding: 10px;}
.area li{font-size: 15px;width: 85%;}
/*　▲ 先頭の記事へ　 記事一覧　　のスペース　*/
.kiji_lr{width: 340px;margin: 20px auto 0;}
.kiji_lr h3{padding-top: 6px;}
/*　▲ 先頭の記事へ　*/
.kiji_l{width: 200px;height: 36px;font-size: 14px;padding: 0px auto 0px;}
.kiji_lr.kiji_r h3{padding-top: -10px;}
/*　▲ 先頭の記事へ　 NEWEST 用　*/
.kiji_reigai{width: 340px;height: 36px;font-size: 14px;padding: 0px auto 0px;}
/*　▶ EVENT一覧/▶ DEMAND一覧/▶ OTHER一覧　*/
.kiji_r{width: 140px;height: 36px;font-size: 14px;padding: 5px auto 0px;}
}
@media screen and (max-width:420px)
{
#news{width: 100%;margin:-20px auto 0px;}
/*メニュー全体の配置*/
.tab{margin-top:5px}
/*tabスペースと配置*/
.tab_wrap{width:90%;margin:0px auto 0;}
/*エリアの表示非表示と形状*/
.area{padding:50px 0px 20px;}
.sec{margin: 0px auto 0;}
/* 文字　「　最新情報 NEWS　」 */
.sec_header{text-align: center;margin-top: 20px;margin-bottom: 0px;}/* 上下のコーナーとのアキ */
/*=======    タブの文字   「NEWEST」「EVENT」「DEMAND」「OTHER」  ========*/
/*tabの形状*/
.tab li a{
margin:0px 4px 0px 0px;
padding:3px 0px;
width:70px;font-size: 13px;}
/* カテゴリー内部の タイトル　/ 地色:緑　文字:白 */
.area h4{font-size:1.0rem;line-height: 1.7rem;
  margin:-50px auto 0px;padding: 10px;}
.area li{font-size: 14px;line-height: 22px;}
/*　▲ 先頭の記事へ　 記事一覧　　のスペース  9/9変更（元width:260px）　*/
.kiji_lr{width:280px;margin: 20px auto 0;}
.kiji_lr h3{padding-top: 6px;}
/*　▲ 先頭の記事へ　  9/9変更（元width:130px）*/
.kiji_l{width: 140px;height: 36px;font-size: 14px;padding: 0px auto 0px;}
.kiji_lr.kiji_r h3{padding-top: -10px;}
/*　▲ 先頭の記事へ　 NEWEST 用　  9/9変更（元width:260px）*/
.kiji_reigai{width: 280px;height: 36px;font-size: 14px;padding: 0px auto 0px;}
/*　▶ EVENT一覧/▶ DEMAND一覧/▶ OTHER一覧　  9/9変更（元width:130px）*/
.kiji_r{width: 140px;height: 36px;font-size: 14px;padding: 5px auto 0px;}
}

@media screen and (max-width:325px)
{
#news{width: 100%;margin:-20px auto 0px;}
/*メニュー全体の配置*/
.tab{margin-top:5px}
/*tabスペースと配置*/
.tab_wrap{width:280px;margin:0px auto 0;}
.tab li a{width: 65px;font-size: 13px}
/*　▲ 先頭の記事へ　 記事一覧　　のスペース　*/
.kiji_lr{width: 260px;margin: 10px auto 0;}
.kiji_lr h3{padding-top: 6px;}
/*　▲ 先頭の記事へ　*/
.kiji_l{width: 130px;height: 36px;font-size: 14px;padding: 0px auto 0px;}
.kiji_lr.kiji_r h3{padding-top: -10px;}
/*　▲ 先頭の記事へ　 NEWEST 用　*/
.kiji_reigai{width: 260px;height: 36px;font-size: 14px;padding: 0px auto 0px;}
/*　▶ EVENT一覧/▶ DEMAND一覧/▶ OTHER一覧　*/
.kiji_r{width: 130px;height: 36px;font-size: 14px;padding: 5px auto 0px;}
}
/* ===========　最新投稿　========================================================*/
/* 文字　「最新情報」 */
#newest h4,#event h4,#demand h4,#other h4
{font-family: 'Oswald', sans-serif;letter-spacing: 0.1em;color:white;}
#newest span,#event span,#demand span,#other span
{font-family: 'Oswald', sans-serif;letter-spacing: 0.1em;color:tan;
font-size: 16px;}
/* ===================== 投稿ページ　全体のくくり ================= */
/* 文字　「　最新情報 NEWS　」 */
.sec_header{text-align: center;margin-top: 20px;margin-bottom: 0px;}/* --上下のコーナーとのアキ */
.col-12 p{padding: 10px 0 0 20px;}
/* ========== 投稿のスペース全体 　　 .news_left +  .news_right  　=========== */
.news_wrap{display: flex;justify-content: space-between;
  border-bottom: 2px dotted black;padding-bottom: 10px;
  width: 700px;height: auto;margin: 0px auto 0px;}

/* ============================================= 　　　　　左　列 　=========== */
/* ------- 左列のスペース */
.news_left{width: 250px;text-align: center;margin: 15px 0px 0 0px;}
/* 日　付  */
.news_time{display: block;text-align: center;border-bottom: 1px solid black;
width: 120px; font-size: 14px;margin: 5px auto 0;}
/* ============================================= 　　　　　右　列 　=========== */
/* ------- 右列のスペース */
.news_right{width: 430px;margin: 15px 0px 0 0px;}

/* ↓  カテゴリ名の枠   widthは　.news_left の width: 250px */
.post-categories{display: block;
  border-radius: 5px;border: solid 1px gray;background:#E6FFE9;text-align: center;
  width: 250px;padding: 2px 20px 0px 20px;
  font-size: 16px;}

/* ※　カテゴリ名はcssで指定できない */
/* =========== 投稿のタイトル =========== */
#newest h2,#event h2,#demand h2,#other h2{
  color: darkgreen;text-align: justify;
  font-size: 18px;line-height: 24px;
  margin-top: 0px;margin-bottom:5px;}
/* 投稿の本文 */
.news_desc{
　text-align: justify;font-size: 15px;line-height: 22px;
　padding:0px 0 0px 0px;}
/* [この記事を表示] */
.hyouji:hover{background:#eb6100;}
.hyouji{background:darkgreen;text-align: center;
  width:150px;height: 27px;font-size: 15px;
  padding: 4px 0 2px;margin: 5px 0 0 0;}
.news_desc a:hover{color:white;}
.hyouji a{color:yellow;font-size: 15px;}

/* ====================================================== レスポンシブ =========== */

@media screen and (max-width:960px){/* header  紫 */
/* ========== 投稿のスペース全体 　　 .news_left +  .news_right  　=========== */
.news_wrap{width: 540px;margin: 0px auto 0px;}
/* ============================================= 　　　　　左　列 　=========== */
/* ------- 左列のスペース */
.news_left{width: 200px;margin: 15px 0px 0 0px;}
/* 日　付  */
.news_time{font-size: 14px;}
/* ============================================= 　　　　　右　列 　=========== */
/* ------- 右列のスペース */
.news_right{width: 320px;margin: 15px 0px 0 0px;}
/* ↓  カテゴリ名の枠    */
.post-categories{width: 200px;font-size: 16px;padding: 2px 0 0 40px;}
/* =========== 投稿のタイトル =========== */
#newest h2,#event h2,#demand h2,#other h2{
  font-size: 18px;line-height: 24px;
  margin-top: 0px;margin-bottom:5px;}
}

@media screen and (max-width:767px){/* header ピンク*/
/* ========== 投稿のスペース全体 　　 .news_left +  .news_right  　=========== */
.news_wrap{width: 440px;margin: 0px auto 0px;}
/* ============================================= 　　　　　左　列 　=========== */
/* ------- 左列のスペース */
.news_left{width: 180px;margin: 15px 0px 0 0px;}
/* 日　付  */
.news_time{font-size: 14px;}
/* ============================================= 　　　　　右　列 　=========== */
/* ------- 右列のスペース */
.news_right{width: 240px;margin: 15px 0px 0 0px;}
/* ↓  カテゴリ名の枠 */
.post-categories{width: 180px;font-size: 16px;}
/* =========== 投稿のタイトル =========== */
#newest h2,#event h2,#demand h2,#other h2{
  font-size: 16px;line-height: 22px;
  margin-top: 0px;margin-bottom:5px;}
}

@media screen and (max-width:555px){/*  header 「灰色」　 */ /* ←　9/3 変更　 元　(max-width:540px)　======　9/3 変更 */
/* ========= 投稿のスペース全体 　ここからは　flex-direction: column ======== */
.news_wrap{flex-direction: column;
  width: 340px;margin: 0px auto 0px;}
.news_left{width: 340px;margin: 15px auto 0px;}
/* 日　付  */
.news_time{font-size: 14px;}
.news_right{width: 340px;margin: 15px auto 0px;}
/* ↓  カテゴリ名の枠 */
.post-categories{width: 336px;font-size: 16px;padding: 3px auto 0px;}
/* =========== 投稿のタイトル =========== */
#newest h2,#event h2,#demand h2,#other h2{
  font-size: 16px;line-height: 22px;
  margin-top: 0px;margin-bottom:5px;}
}

@media screen and (max-width:420px){
/* ========== 投稿のスペース全体 　  　=========== */
.news_wrap{width: 290px;margin: 0px auto 0px;}
.news_left{width: 290px;margin: 15px auto 0px;}
/*  記事の画像 */
.news_pic img{width: 200px;height: 150px;margin: 0px auto 10px;}
/* 日　付  */
.news_time{font-size: 14px;}
.news_right{width: 290px;margin: 15px auto 0px;}
/* ↓  カテゴリ名の枠 */
.post-categories{width: 290px;font-size: 16px;padding: 3px auto 2px;}
.hyouji{padding: 4px 0 4px;}
/* =========== 投稿のタイトル =========== */
#newest h2,#event h2,#demand h2,#other h2{
  font-size: 16px;line-height: 22px;
  margin:-10px 0 5px 5px;}
/* 投稿の本文 */
.news_desc{
font-size: 14px;line-height: 22px;
padding:0px 0 0px 5px;}
}

/* ========== 調整中 　  　=========== */
@media screen and (max-width:360px){
/* ========== 投稿のスペース全体 　  　=========== */
.news_wrap{width: 270px;margin: 0px auto 0px;}
.news_left{width: 270px;margin: 15px auto 0px;}
/*  記事の画像 */
.news_pic img{width: 200px;height: 150px;margin: 0px auto 10px;}
/* 日　付  */
.news_time{font-size: 14px;}
.news_right{width: 270px;margin: 15px auto 0px;}
/* ↓  カテゴリ名の枠 */
.post-categories{width: 270px;font-size: 16px;padding: 3px auto 2px;}
/* ※　カテゴリ名はcssで指定できない */
/* =========== 投稿のタイトル =========== */
#newest h2,#event h2,#demand h2,#other h2{
  font-size: 14px;line-height: 24px;
  margin: -10px 0 5px 5px;}
}

/* ------------------------------------------------------------------------------
    アコーディオン のレイアウト
-----------------------------------------------------#ccc------------------------- */
/*アコーディオン全体*/
.accordion_space{
  display: flex;justify-content: space-between;
  height: auto;margin:0px 0 0px 0;}

ul.accordion-area_l,ul.accordion-area_r{
list-style: none;
width: 100%;max-width: 900px;height: 50px;
margin:0px auto 0;}

.accordion-area_l li,.accordion-area_r li{
list-style: none;font-family: 'Oswald', sans-serif;padding-bottom: 0px;
color:darkgreen;text-align: center;font-size: 15px;margin: 10px 0;
border-bottom: 2px solid white;}

/*アコーディオンの枠の色と太さ*/
.accordion-area_l section,.accordion-area_r section
{border: 1px solid darkgreen;border-radius: 5px;width:397px;}

/*アコーディオンタイトル*/
.title{
position: relative;/*+マークの位置基準とするためrelative指定*/
cursor: pointer;
font-size:1em;line-height: 1.5rem;
font-weight: normal;color: darkgreen;
padding: 2% 3% 2% 3%;
transition: all .5s ease;}
/*アイコンの＋と×*/
.title::before,.title::after{
position: absolute;content:'';width: 15px;height: 2px;background-color: darkgreen;}
.title::before{top:48%;left: 15px;transform: rotate(0deg);}
.title::after{top:48%;left: 15px;transform: rotate(90deg);}
/*　closeというクラスがついたら形状変化　*/
.title.close::before{transform: rotate(45deg);}
.title.close::after{transform: rotate(-45deg);}
/*リストのバック*/
.box{
display: none;/*はじめは非表示*/
background: #EEEEEE;text-align: left;
margin:0 3% 3% 3%;
padding: 3% 5% 3% 5%;}

/* 816-324 おそらく不要
ul.accordion-area{
list-style: none;
width: 100%;max-width: 900px;height: 50px;
margin:0px auto 0;}
.accordion-area li{
list-style: none;font-family: 'Oswald', sans-serif;padding-bottom: 0px;
color:darkgreen;text-align: center;font-size: 15px;margin: 20px 0;}
.accordion-area section
{border: 1px solid darkgreen;background: white;border-radius: 5px;width:200px;}
*/
/*===================================================================================================
     アーカイブ
========================================================================================================*/
/*メインのスペース======================== */
.archive:last-child{margin-bottom:0}
.archive .archive_title{font-size:16px;padding:20px 10px;line-height:1;border-bottom:1px solid #ccc}
.archive .archive_list li{margin:0;border-bottom:1px solid #ccc;line-height:1}
.archive .archive_list li:last-child{border-bottom:none}
/*↓　アコーディオン　リスト内　======================== */
.archive .archive_list li a{
  padding:10px 10px;display:block;text-decoration:none;position:relative;line-height:1;
  -webkit-transition:all 300ms 0s ease;-o-transition:all 300ms 0s ease;
  transition:all 300ms 0s ease}
/*　hover　リストの地色　======================== */
.archive .archive_list li a:hover{background-color:white;}/*　元の色:rgba(112,70,46,0.1)　======== */

/* =========================================================================
                          私たちについて   ABOUT US
          コーナー全体のwidth は  #main-area{width:xxxxx;} に依存
========================================================================= */
#aboutus{margin:-20px auto 0;}/* 上下のコーナーのアキ*/
/*== 文字 h3　「キャンペーンの意義」　===*/
.text_aboutus{
color: #555555;border-top: 2px dotted #555555;color:darkgreen;
text-align: center;font-family: serif;
font-size: 20px;width: 800px;padding-top: 5px;margin: -20px auto 0px;}
/*== 文字 p　「長い文章」　===*/
#aboutus .back_campaign p{
      margin: auto;text-align: justify;font-size: 15px;line-height:28px;
      width: 650px;padding: 5px auto 0px;color:#555555;}
/* キャンペーンについて の下 写真*/
.p_aboutus{display: flex;justify-content:center;width: 650px;margin: auto;}
.p_img_aboutus_l{width: 325px;border-radius: 10px 0 0 10px;margin-top: 10px;}
.p_img_aboutus_r{width: 325px;border-radius: 0px 10px 10px 0;margin-top: 10px;}
.trademark{display: block;margin: 30px auto 0;width: 100px;}

@media screen and (max-width:960px)/*  header 「むらさき」　 */
{
#aboutus{margin:-20px auto 0;}
/*== 文字 h3　「キャンペーンの意義」　===*/
.text_aboutus{
font-size: 20px;width: 600px;padding-top: 5px;margin: 0px auto 0px;}
/*== 文字 p　「長い文章」　===*/
#aboutus .back_campaign p{
 margin: auto;font-size: 15px;line-height:28px;
 width: 600px;padding: 5px auto 0px;}
/* キャンペーンについて の下 写真*/
.p_aboutus{width: 600px;}
.p_img_aboutus_l{width: 300px;border-radius: 5px 0 0 5px;margin: 10px 0px 0 0;}
.p_img_aboutus_r{width: 300px;border-radius: 0px 5px 5px 0;margin: 10px 0 0 0;}
/*アコーディオン部分 ===================================================*/
/*アコーディオンの枠の色と太さ*/
.accordion-area_l section,.accordion-area_r section{width:296px;}
}
@media screen and (max-width:767px)/*  header 「ピンク」　 */
{
#aboutus{margin:5px auto 0;}
#aboutus h2{width: 500px;margin: auto;}
/*== 文字 h3　「キャンペーンの意義」　===*/
.text_aboutus{
font-size: 18px;width: 500px;padding-top: 5px;margin: 5px auto 0px;}
/*== 文字 p　「長い文章」　===*/
#aboutus .back_campaign p{
 margin: auto;font-size: 15px;line-height:28px;
 width:500px;padding: 5px auto 0px;}
/* キャンペーンについて の下 写真*/
.p_aboutus{width: 500px;}
.p_img_aboutus_l{width: 250px;border-radius: 5px 0 0 5px;margin: 10px 0px 0 0;}
.p_img_aboutus_r{width: 250px;border-radius: 0px 5px 5px 0;margin: 10px 0 0 0;}
/*アコーディオン部分 ===================================================*/
.accordion-area_l section{width:248px;}
.accordion-area_r section{width:248px;margin-left: 4px;}
}
@media screen and (max-width:555px)/*  header 「灰色」　 */ /* ←　9/3 変更　 元　(max-width:540px)　======　9/3 変更 */
{
#aboutus{width: 380px;margin:0px auto 0;}
#aboutus h2{width: 380px;margin: auto;}
/*== 文字 h3　「キャンペーンの意義」　===*/
.text_aboutus{
font-size: 18px;width: 380px;padding-top: 5px;margin: 5px 0 0px;}/* ←　元　 margin: 5px 0 -5px ==========　9/3 変更 */
/*　↓　== 文字 p　「長い文章」　===*/
#aboutus .back_campaign p{
 margin: auto;font-size: 15px;line-height:28px;width: 360px;padding: 5px auto 0px;}/*元　width: 380px==========　9/43 変更 */
/* キャンペーンについて の下 写真*/
.p_aboutus{width: 380px;}
.p_img_aboutus_l{width: 190px;border-radius: 5px 0 0 5px;margin: 10px 0px 0 0;}
.p_img_aboutus_r{width: 190px;border-radius: 0px 5px 5px 0;margin: 10px 0 0 0;}
/*アコーディオン全体*/
.accordion_space{flex-direction: column;align-items: center;margin:0px auto 0;}
ul.accordion-area_l,ul.accordion-area_r{
list-style: none;width: 100%;max-width: 900px;height: 50px;margin:0px auto 0;}
.accordion-area_l li,.accordion-area_r li{
  list-style: none;font-family: 'Oswald', sans-serif;
color:darkgreen;text-align: center;font-size: 15px;margin: 5px auto 0;}
.accordion-area_l section,.accordion-area_r section{width:380px;}
.accordion-area_r section{margin-left: 0px;}
}
@media screen and (max-width:420px)
{
/*アコーディオンタイトル*/
.title{font-size:0.9em;line-height: 1.2rem;padding: 3% 3% 3% 3%;}
.accordion-area h3{font-size: 12px;padding-left: 22px;}/*各 2行の見出し*/
.accordion-area_l section,.accordion-area_r section{width:300px;}
#aboutus{width: 100%;margin:0px auto 0;}
#aboutus h2{width: 90%;margin: auto;}
/*== 文字 h3　「キャンペーンの意義」　===*/
.text_aboutus{width: 90%;font-size: 16px;padding-top: 5px;margin: 5px auto -5px;}
/*== 文字 p　「長い文章」　===*/
#aboutus .back_campaign p{
 font-size: 14px;line-height:25px;
 width: 300px;padding: 5px auto 0px;}
/* キャンペーンについて の下 写真*/
.p_aboutus{width: 300px;}
.p_img_aboutus_l{width: 150px;border-radius: 5px 0 0 5px;margin: 10px 0px 0 0;}
.p_img_aboutus_r{width: 150px;border-radius: 0px 5px 5px 0;margin: 10px 0 0 0;}
}

/* =========================================================================
        325px 315px 調整まだ
   ========================================================================= */
@media screen and (max-width:325px)
{
.accordion-area h3{font-size: 11px;padding-left: 25px;}/*　各 2行の見出し　　*/
.accordion-area_l section,.accordion-area_r section{width:260px;}
/*== 文字 h3　「キャンペーンの意義」　===*/
.text_aboutus{font-size: 14px;margin: 5px auto 0;}
/*== 文字 p　「長い文章」　===*/
#aboutus .back_campaign p{
 font-size: 13px;line-height:23px;
 width: 280px;padding: 10px 0px 0 0px;}
/* キャンペーンについて の下 写真*/
.p_aboutus{width:280px;}
.p_img_aboutus_l{width: 140px;border-radius: 5px 0 0 5px;margin: 10px 0px 0 0;}
.p_img_aboutus_r{width: 140px;border-radius: 0px 5px 5px 0;margin: 10px 0 0 0;}
}

@media screen and (max-width:315px)/*  295pxあたりで調整　 */
{
#event{margin:480px 0 10px 0;}
#event .img{width:100%;max-height: 200px;margin: 0px auto 0;}
.accordion-area h3{font-size: 11px;padding-left: 25px;}/*　各 2行の見出し　　*/
.accordion-area_l section,.accordion-area_r section{width:240px;}
}

/* =========================================================================
              CONTACT／JOIN    ご意見等／加入のご案内 #eb6100
              コーナー全体のwidth は  #main-area{width:xxxx;} に依存
   ========================================================================= */
/* =========== CONTACT　 =========== */
#contact{margin:-20px auto 0px;}/* 上下のコーナーのアキ*/
/* スペースの大きさと色など */
.toiawase_wrap{text-align: center;background:#FAEBD7;
  border-left:1px solid #eb6100;
  border-top:1px solid #eb6100;
  border-right:1px solid #eb6100;
  width: 800px;
  margin:-18px auto 0;}
/* 文字　「お問い合わせ」 */
.toiawase_wrap h3{
  color:#eb6100;border-bottom: 2px dotted #eb6100;
  width: 200px;font-size: 20px;margin:-20px auto 0;}
/* 文字　「ご意見など、お気軽にお問い合わせください」 */
.toiawase_wrap h4{font-family:serif,'arial black';
  font-size: 16px;line-height: 24px;
  margin:-20px auto 5px;}
/* ボタン　フォーム */
.btn_form span{color:black;}/*　ボタン「ENTER」の文字色 */
.btn_form{
  position: relative;
  border: 1px solid black;border-radius:25px;
  font-family: 'Oswald', sans-serif;
  text-align: center;font-size:15px;
  display: inline-block;text-decoration: none;
  width: 300px;height: 40px;
  margin: 0px auto 20px;color: white;background: white;
  outline: none;transition: all 0.4s;}
/*hoverした際の変化*/
.btn_form:hover{
  border-color:transparent;color: #fff;
  background: linear-gradient(270deg,darkgreen 0%, #eb6100 50%, #eb6100 100%);
  background-size: 200% auto;
  background-position: right center;
  box-shadow: 0 5px 10px rgb(250,108,159,0.4)}
.btn_form span{
  /*絶対配置でテキストの位置を決める*/
  position: absolute;left: 50%;top:50%;
  transform:translate(-50%,-50%);transition: all .5s;}
/*差し替わるテキストの設定  　*/
.btn_form span:nth-child(2){opacity:0;color:white;/*透過0に*/}
/*hoverするとテキストが入れ替わる設定*/
.btn_form:hover span:nth-child(1){opacity:0;/*透過0に*/}
.btn_form:hover span:nth-child(2){opacity:1;/*不透明に*/}
/* =========== JOIN　 地色　#E6FFE9　薄い緑　=========== */
.join_wrap{background: #E6FFE9;
  border-left: 1px solid darkgreen;
  border-bottom: 1px solid darkgreen;
  border-right: 1px solid darkgreen;
  width: 800px;margin:0px auto 0;}
/* 文字　「加入のご案内」 */
.join_wrap h3{color:darkgreen;text-align: center;
  border-bottom: 2px dotted darkgreen;
  width: 200px;font-size: 20px;margin:-20px auto 0;}
/* 文字　「リード文章」 */
.join_lead{font-family:serif,'arial black';
  text-align: center;
  font-size: 16px;line-height: 24px;
  width: 450px;margin:-20px auto 0px;}
.join_wrap_sub{display: flex;justify-content: space-between;
  margin: 0 auto 0;
  width: 600px;}
/*　文字　 ■年会費 ■振込先 ■お問い合わせ
　　widhは「内容」と合わせて　600pxになるように　　 */
.sikaku{font-weight: bold;color:darkgreen;
  width: 150px;margin-top: -16px;font-size: 18px;}
/* 文字　「内容」 widhは「■年会費 ■振込先 ■お問い合わせ」と
　　　合わせて600pxになるように*/
.naiyou{width: 450px;font-size: 16px;line-height: 22px;margin-top:-10px;}
.join_line{border-bottom: 1px solid darkgreen;
  width: 600px;margin: 10px auto 20px;}

/* =========== レスポンシブ　 ========================================================= */
@media screen and (max-width:960px)/*  header 「むらさき」　 */
{
#contact{margin:-20px auto 0px;}/* 上下のコーナーのアキ*/
/* スペースの大きさと色など */
.toiawase_wrap{width: 600px;margin:5px auto 0;}
/* 文字　「お問い合わせ」 */
.toiawase_wrap h3{width: 200px;font-size: 20px;margin:-20px auto 0;}
/* 文字　「ご意見など、お気軽にお問い合わせください」 */
.toiawase_wrap h4{font-size: 16px;line-height: 24px;margin:-20px auto 5px;}
/* ボタン　フォーム */
.btn_form{font-size:15px;width: 300px;height: 40px;margin: 0px auto 20px;}
/* =========== JOIN　 地色　#E6FFE9　薄い緑　=========== */
.join_wrap{width: 600px;margin:0px auto 0;}
/*　文字　 ■年会費 ■振込先 ■お問い合わせ
　　widhは「内容」と合わせて　600pxになるように　　 */
.sikaku{width: 150px;margin: -16px 0 0 30px;font-size: 18px;}
/* 文字　「内容」 widhは「■年会費 ■振込先 ■お問い合わせ」と
　　　合わせて560pxになるように*/
.naiyou{width: 410px;font-size: 16px;line-height: 22px;margin:-10px 20px 0 0;}
.join_line{width: 540px;margin: 10px auto 20px;}

}
@media screen and (max-width:767px)/*  header 「ピンク」　 */
{
#contact{margin:-20px auto 0px;}/* 上下のコーナーのアキ*/
/* スペースの大きさと色など */
.toiawase_wrap{width: 500px;margin:6px auto 0;}
/* 文字　「お問い合わせ」 */
.toiawase_wrap h3{width: 200px;font-size: 20px;margin:-20px auto 0;}
/* 文字　「ご意見など、お気軽にお問い合わせください」 */
.toiawase_wrap h4{font-size: 15px;line-height: 24px;margin:-20px auto 5px;}
/* ボタン　フォーム */
.btn_form{font-size:15px;width: 300px;height: 40px;margin: 0px auto 20px;}
/* =========== JOIN　 地色　#E6FFE9　薄い緑　=========== */
.join_wrap{width: 500px;margin:0px auto 0;}
.join_wrap_sub{flex-direction: column;
  margin: 0 auto 0;
  width: 380px;}
/* 文字　「ご意見など、お気軽にお問い合わせください」 */
.toiawase_wrap h4{
  font-size: 15px;line-height: 24px;
  margin:-20px auto 5px;}
/* 文字　「リード文章」 */
.join_lead{width: 355px;font-size: 15px;line-height: 24px;margin:-20px auto 0px;}
/*　文字　 ■年会費 ■振込先 ■お問い合わせ
　　widhは「内容」と合わせて　600pxになるように　　 */
.sikaku{width: 150px;margin: -16px 0 0 0px;font-size: 18px;}
/* 文字　「内容」 widhは「■年会費 ■振込先 ■お問い合わせ」と
　　　合わせて560pxになるように*/
.naiyou{width: 410px;font-size: 16px;line-height: 22px;margin:0px 20px 0 0;}
.join_line{width: 440px;margin: 10px auto 20px;}
}

@media screen and (max-width:555px)/*  header 「灰色」　 */ /* ←　9/3 変更　 元　(max-width:540px)　======　9/3 変更 */
{
#contact{margin:-20px auto 0px;}/* 上下のコーナーのアキ*/
/* スペースの大きさと色など */
.toiawase_wrap{width: 380px;margin:5px auto 0;}/* ←　9/3 変更　 元　width: 90%　===========================　9/3 変更 */
/* 文字　「お問い合わせ」 */
.toiawase_wrap h3{width: 200px;font-size: 20px;margin:-20px auto 0;}
/* 文字　「ご意見など、お気軽にお問い合わせください」 */
.toiawase_wrap h4{font-size: 16px;line-height: 24px;margin:-20px auto 5px;}
/* ボタン　フォーム */
.btn_form{font-size:15px;width: 300px;height: 40px;margin: 0px auto 20px;}
/* =========== JOIN　 地色　#E6FFE9　薄い緑　=========== */
.join_wrap{width: 380px;margin:0px auto 0;}/* ←　9/3 変更　 元　width: 90%　===============================　9/3 変更 */
.join_wrap_sub{
  margin: 0 auto 0;
  width: 360px;}
/* 文字　「ご意見など、お気軽にお問い合わせください」 */
.toiawase_wrap h4{
  font-size: 14px;line-height: 20px;
  margin:-20px auto 10px;}
/* 文字　「リード文章」 */
.join_lead{width: 360px;font-size: 13px;line-height: 20px;margin:-20px auto 10px;}
/*　文字　 ■年会費 ■振込先 ■お問い合わせ
　　widhは「内容」と合わせて　600pxになるように　　 */
.sikaku{width: 150px;margin: -16px 0 0 20px;font-size: 16px;}

.naiyou{width: 380px;font-size: 14px;line-height: 20px;margin:0px 0px 0 20px;}/* ←　元　width: 410px =======　9/3 変更 */
.join_line{width: 90%;margin: 10px auto 20px;}
}
@media screen and (max-width:420px)
{
#contact{margin:-20px auto 0px;}/* 上下のコーナーのアキ*/
/* スペースの大きさと色など */
.toiawase_wrap{width:90%;margin:10px auto 0;}
/* 文字　「お問い合わせ」 */
.toiawase_wrap h3{width: 200px;font-size: 16px;margin:-20px auto 0;}
/* 文字　「ご意見など、お気軽にお問い合わせください」 */
.toiawase_wrap h4{
  width: 90%;font-size: 12px;line-height: 20px;
  margin:-20px auto 10px;}
/* ボタン　フォーム */
.btn_form{font-size:13px;width: 200px;height: 40px;margin: 0px auto 20px;}
/* =========== JOIN　 地色　#E6FFE9　薄い緑　=========== */
.join_wrap{width:90%;margin:0px auto 0;}
.join_wrap_sub{
  margin: 0 auto 0;
  width: 100%;}
/* 文字　「加入のご案内」 */
.join_wrap h3{font-size: 16px;margin:-20px auto 0;}
/* 文字　「リード文章」 */
.join_lead{width: 270px;font-size: 12px;line-height: 20px;margin:-20px auto 10px;}
/*　文字　 ■年会費 ■振込先 ■お問い合わせ
　　widhは「内容」と合わせて　600pxになるように　　 */
.sikaku{width: 150px;margin: -16px 0 0 30px;font-size: 15px;}
.naiyou{width:280px;font-size: 12px;line-height: 22px;margin:0px 0px 0 30px;padding: 0 0px;}
.join_line{width: 90%;margin: 10px auto 20px;}
}

/* =========================================================================
      基本的な情報
========================================================================= */
.adress_a{margin-top: 30px;text-align: center;}
.adress_a h5{font-size:15px;line-height:20px;}
/* ↓　<h3> 会費、カンパ等のお振り込みは */
.furikomi h3{font-size:18px;font-weight: bold;color:darkgreen;padding: 1px;
            border-top: 1px solid black;border-bottom: 1px solid black;}
.adress_b{margin-top: 7px;margin-bottom: 10px;text-align: center;}
.adress_b h5{font-size:15px;line-height:20px;}

@media screen and (max-width:555px)/*  header 「灰色」　 */ /* ←　9/3 変更　 元　(max-width:540px)　======　9/3 変更 */
{
.furikomi h3{width: 380px;margin: auto;}
}

@media screen and (max-width:420px)
{
.adress_a{margin-top:20px;}
.adress_a h5{font-size:13px;line-height:20px;}
/* ↓　<h3> 会費、カンパ等のお振り込みは */
.furikomi h3{width: 300px;font-size:15px;padding: 1px;}
.adress_b{margin-top: 7px;}
.adress_b h5{font-size:13px;line-height:20px;}
}

@media screen and (max-width:325px)
{
.adress_a{margin-top:20px;}
.adress_a h5,.adress_b h5{font-size:12px;line-height:17px;}
/* ↓　<h3> 会費、カンパ等のお振り込みは */
.furikomi h3{font-size:13px;padding: 1px;margin-top: -10px;}
.adress_b{margin-top: 7px;}
}
/* =========================================================================
                          SNS
   ========================================================================= */
.sns_wrap{display: flex;justify-content: center;background:white;
width: 100%;padding-bottom: 0;height: 100px;}
.sns-follow {margin: 40px 0;text-align: center;}
.sns-list {
display: flex;justify-content: center;gap: 16px;list-style: none;
padding: 0;margin: 0;}
.sns-list a {
display: flex;align-items: center;justify-content: center;
border-radius: 50%;transition: all 0.25s ease;
background-color: #222;color: #fff;
width: 48px;height: 48px;}
.sns-list a:hover {background-color: #000;transform: translateY(-3px);}
/* 各SNSのホバー色を変えたい場合 */
.sns-list li:nth-child(1) a:hover { background-color: #000; }      /* X */
.sns-list li:nth-child(2) a:hover { background-color: #E1306C; }  /* Instagram */
.sns-list li:nth-child(3) a:hover { background-color: #FF0000; }  /* YouTube */
.sns-list svg {width: 22px;height: 22px;}

/* =========================================================================
                      ぼかしのスペース
   ========================================================================= */
.bokasi{position: fixed;bottom:10px;width: 100%;height: 20px;
  z-index: 1;background: white;filter: blur(5px);}
.bokasinokakusi{position: fixed;bottom:0;width: 100%;height: 20px;
  z-index: 1;background: white;}

/* =========================================================================
                          footer
   ========================================================================= */
#footer{
position:relative;bottom: 0;text-transform: uppercase;z-index: 1;
text-align: center;
width: 100%;height: 180px;
background: darkgreen;}
/*== 文字　「Copyright ©遺伝子組み換え食品いらない！キャンペーン」All Rights Reserved.　===*/
#footer p{
font-size: 12px;color: tan;
font-weight: bold;letter-spacing: 0.1em;line-height: 1.5;
padding-top:40px;}
.copyright_420{display: none;}
/*========= タイピング  下のアイコン　===============*/
.hamon img{border-radius: 50%;width:60px;height: 60px;margin-top: 17px;}/*.hamonと同じ大きさにする*/
/*.imgにぼかし影を付ける　左位置/上位置/左右の大きさ/上下の大きさ/ rgba(色/色/色/透過)*/
.hamon img{box-shadow:0px 0px 30px 30px rgba(256,256,256,0%);}/*色と透過は はhtml内で上書き*/
/*========= 波紋を付ける　===============*/
.hamon{top:15px;/*配置する位置*/
       position: relative;/*波紋の基点とするためrelativeを指定*/
       display:inline-block;
       width:60px;height:60px;/*画像と同じ大きさにする*/
       border-radius: 50%;
       outline: none;transition: all .3s;}
/*波形を2つ設定*/
.hamon::after,.hamon::before {
       content: '';
       position: absolute;left: -24%;top: 4%;
       /*波形の形状*/
       border: 1px solid tan;/*線の色*/
       width: 150%;height: 150%;border-radius: 50%;
       opacity: 1;/*はじめは不透明*/
       animation:1s circleanime linear infinite;}
/*波形の2つ目は0.5秒遅らせてアニメーション*/
.hamon::before {animation-delay:.5s;}
/*波形のアニメーション*/
@keyframes circleanime{
  0%{
    transform: scale(0.68);
  }
  100%{
    transform: scale(1.2);
    opacity: 0;
  }
}

@media screen and (max-width:960px)/*  header 「むらさき」　 */
{
#footer{height: 160px;padding: 0 0 15px 0;}
.hamon img{width:60px;height: 60px;margin-top: 17px;}/*.hamonと同じ大きさにする*/
.hamon{top:10px;width:60px;height:60px;}/*画像と同じ大きさにする*/
#footer p{font-size: 10px;letter-spacing: 0.1em;padding-top:27px;}
}
@media screen and (max-width:555px)/*  header 「灰色」　 */ /* ←　9/3 変更　 元　(max-width:540px)　======　9/3 変更 */
{
#footer{height: 120px;padding: 0 0 10px 0;}
.hamon img{width:40px;height: 40px;margin-top: 12px;}/*.hamonと同じ大きさにする*/
.hamon{top:10px;width:40px;height:40px;}/*画像と同じ大きさにする*/
#footer p{font-size: 10px;letter-spacing: 0.1em;padding-top:20px;}
}
@media screen and (max-width:420px)
{
.hamon img{width:40px;height: 40px;margin-top: 12px;}/*.hamonと同じ大きさにする*/
.hamon{top:10px;width:40px;height:40px;}/*画像と同じ大きさにする*/
/*波形を2つ設定*/
.hamon::after,.hamon::before {border: 2px solid tan;}

#footer{height: 140px;padding: 0 0 10px 0;}
#footer p{font-size: 9px;letter-spacing: 0.1em;padding-top:25px;}
.copyright_pc{display: none;}
.copyright_420{display: block;}
}
@media screen and (max-width:325px)
{
.hamon img{width:40px;height: 40px;margin-top: 12px;}/*.hamonと同じ大きさにする*/
.hamon{top:10px;width:40px;height:40px;}/*画像と同じ大きさにする*/
#footer{height: 136px;padding: 0 0 10px 0;}
#footer p{font-size: 7px;letter-spacing: 0.1em;padding-top:20px;}
}