@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;
}
/* ======================== 現在地メニュー ================================ */
#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 変更 ==== */
/* [TOP] [NEWS] [ARCHIVE] の配置*/
#pc-nav{left: 8px;right:0px;top:33px;}
#pc-nav a{padding:0px 4px 0;font-size: 13px;}/* 9/4 変更 ==== */
#pc-nav ul{margin: 0px 0 0 0px;}
#pc-nav li a{padding:0 7px;}
}
@media screen and (max-width:420px)/* header 黄緑*/
{
/* =========== 10/3 変更中 ================================== 10/3 変更中 === */
#header{width:100%;height: 70px;top:0;}
/* =========== header 左の文字 「食の未来を考えよう」 =========== */
#header h1{font-size: 1.0rem;left: 12px;top:7px;}
/* [TOP] [NEWS] [ARCHIVE] の配置*/
#pc-nav{left: 8px;right:0px;top:33px;}
#pc-nav ul{margin: 3px 0 0 5px;}
#pc-nav li a{font-size: 13px;padding:5px 12px 0 0px;}/* [TOP] [NEWS] [ARCHIVE] の配置*/
}
@media screen and (max-width:380px)/* 10/3 変更 元 max-width:328px 10/3 変更*/
{
#pc-nav ul{margin: 10px 10px 0px 10px;}/* 10/3 変更 元 margin: 3px 0 0 0px; 10/3 変更*/
#pc-nav li a{font-size: 12px;transform: scale(0.8,1);padding:0 0px;}
}
@media screen and (max-width:325px)/* 10/3 変更 元 max-width:315px 10/3 変更*/
{
#pc-nav ul{margin: 10px 10px 0px 10px;}/* 10/3 変更 元 margin: 3px 0 0 0px; 10/3 変更*/
#pc-nav li a{font-size: 11px;transform: scale(0.8,1);padding:0 0px;}
}
/* =========================================================================
スライドショー
========================================================================= */
/* ↓ 9/15 変更 ===== 元 width: 100%;height:450px ============= 9/12 変更 */
/* ↓ 9/16 変更 ===== 元 width: 100%;height:500px ============= 9/12 変更 */
.slide_box{width: 100%;height:460px;position: relative;;position: relative;}
/* 写真 の大きさ・配置 */
/* ↓ 9/12 変更 == 元 width: 800px;height:450px;top: 295px === 9/12 変更 */
/* ↓ 9/16 変更 == 元 width: 800px;height:500px;top: 318px === 9/16 変更 */
.slide img
{
position:fixed;transform: translate(-50%,-50%);
opacity:0;transition:all 1s ease-in-out;padding: auto;
top:295px;left: 50%;background-size:contain;
width: 800px;height: 460px;
}
#slide_speed
{
display: none;transform:rotateY(180deg);
width: 50px;margin: 110px 0px 0px 10px;
}
/* ====================== メイン画像の中の文字 ==========================
「 遺伝子組み換え食品いらない！
キャンペーン 」 */
.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;
color:darkgreen;text-shadow: 0px 0px 5px 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 「むらさき」 */
{
/* ↓ 9/12 変更 ===== 元 width: 600px;height:350px;top: 245px === 9/12 変更 */
.slide img {width: 600px;height: 345px;top: 237px;left: 50%;}
.top-lead_a{width: 500px;top:106px;left:50%;font-size:26px;}
}
@media screen and (max-width:767px)/* header 「ピンク」 */
{
/* ↓ 9/12 変更 ===== 元 480px;height:300px;top: 220px ========= 9/12 変更 */
.slide img {width: 480px;height: 276px;top: 202px;left: 50%;}
.top-lead_a{width: 100%;top:95px;left:50%;font-size:22px;}
}
@media screen and (max-width:555px) /* 元 (max-width:540px)== 9/3 変更 */
{
.slide img {width: 100%;height: 270px;top: 195px;left: 50%;}
.top-lead_a{width: 100%;top:92px;left:50%;font-size:20px;}
}
@media screen and (max-width:420px)/* header 「黄緑」 */
{
.slide img {width: 100%;height: 240px;top: 190px;left: 50%;}
.top-lead_a{letter-spacing: 0.05em;
width: 325px;top:98px;left:50%;font-size:16px;line-height: 1.1;}
}
@media screen and (max-width:325px)/* header 「黄緑」 */
{
/* 10/3 変更 元 top:88px; ========================================== 10/3 変更*/
.top-lead_a{letter-spacing: 0.05em;
width: 325px;top:95px;left:50%;font-size:14px;line-height: 1.1;}
}
@media screen and (max-width:315px)/* 295pxあたりで調整 */
{
.top-lead_b{width: 300px;top:88px;left:55%;font-size:14px;}
}
/* =========================================================================
container main-area
========================================================================= */
#container{position: relative;z-index:1;background:#fff;}
/*.slide img のwidth:800px /* 上下のコーナーのアキ*/
/* === 9/16変更 元 width:800px;margin:70px auto 0;padding: 15px 0;======= */
#main-area{height:100%;width:800px;margin:60px 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:-70px auto 0;padding: 15px 0;}
#topics li{font-size: 15px;}/* 文字 「□□□□□□□□」「□□□□□□□□」「□□□□□□□□□□ */
}
@media screen and (max-width:767px)/* header 「ピンク」 */
{
#main-area{width:480px;margin:-116px auto 0;padding: 13px 0;}
#topics h2{font-size: 20px;}/* 文字 「遺伝子組み換えはいらない！」 */
#topics li{font-size: 14px;}/* 文字 「□□□□□□□□」「□□□□□□□□」「□□□□□□□□□□」*/
}
@media screen and (max-width:555px) /* ← 9/3 変更 元 (max-width:540px) */
{
#main-area{width:100%;margin:-130px 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:-155px auto 0;padding: 10px 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:-170px 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:-170px 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:-70px;}/* 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) /* ← 9/3 変更 元 (max-width:540px) */
{
#rinks{margin-top:-70px;}/* 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 に変更 */
.group_b img:active{height: 80px;transition-duration: .5s;}/* 9/5 active に変更 */
/* 文字 「▲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;}
.sec{
width: 100%;
margin: 0px auto 0;background-color: #FFDBC9;}
/*エリアの表示非表示と形状*/
.area{
display: none;opacity: 0;
border-left: 1px solid white;border-right: 1px solid white;
background: #FFDBC9;
padding:50px 0px 20px;}
/*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」 ========*/
/* 9/10 変更 元 margin:0 5px 0px 0px; width:160px ============ 9/10 変更 */
.tab li a{
display: block;font-family:'Oswald', sans-serif;
color:#696969;/*文字:濃いグレー*/
background:#D3D3D3;/*地色:薄いグレー*/
border: 1px solid white;
margin:0px 0px 0px 0px;/*タブの配置*/
padding:5px 0px;text-align: center;
border-radius: 10px 0px 0 0;
width:200px;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: center;
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;}
/* 9/10 変更 元 margin:60px 5px 0px 0px; width:130px ========= 9/10 変更 */
.tab li a{
margin:60px 0px 0px 0px;/*タブの配置*/
padding:3px 0px;
border-radius: 10px 0px 0 0;
width:150px;font-size: 18px;}
/* カテゴリー内部の タイトル / 地色:緑 文字:白 */
.area h4{margin:-50px auto 0px;padding: 10px;}
.area li{width: 70%;}
/* ▲ 先頭の記事へ 記事一覧 のスペース */
.kiji_lr{width: 540px;margin: 20px auto 0;} /*9/3 変更 元 (max-width:540px) */
.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;
margin: auto;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」 ========*/
/* 9/10 変更 元 margin:60px 5px 0px 0px; width:110px ========= 9/10 変更 */
.tab li a{
margin:60px 0px 0px 0px;/*タブの配置*/
padding:3px 0px;
border-radius: 10px 0px 0 0;
width:125px;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スペースと配置*/
/* 9/10 変更 元 width:380px =================================== 9/10 変更 */
.tab_wrap{width:400px;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」 ========*/
/* 9/10 変更 元 margin:60px 4px 0px 0px; width:90px ========== 9/10 変更 */
.tab li a{
margin:60px 0px 0px 0px;
padding:3px 0px;
width: 100px;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スペースと配置*/
/* 9/10 変更 元 width:90% ====================================== 9/10 変更 */
.tab_wrap{width:320px;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の形状*/
/* 9/10 変更 元 margin:0px 4px 0px 0px; width:70px =========== 9/10 変更 */
.tab li a{
margin:0px 0px 0px 0px;
padding:3px 0px;
width:80px;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 10/2変更 元「.post-categories」*/
.post-categories a{display: block;
border-radius: 5px;border: solid 1px gray;background:#E6FFE9;text-align: center;
width: 250px;padding: 2px 0px 0px;
font-size: 14px;}
/* 10/2 追記 */
.post-categories a:hover{background:darkgreen;color:white;}
/* 副題 ======================== */
.entry-subtitle{
font-size:16px;text-align: justify;
color:black;
line-height:1.5;
margin-top:8px;}
/* =========== 投稿のタイトル =========== */
#newest h2,#event h2,#demand h2,#other h2{
color: darkgreen;text-align: justify;letter-spacing: normal;
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 a{display: block;background:darkgreen;color:yellow;text-align: center;
width:150px;height: 27px;font-size: 15px;
padding: 0px 0 0px;margin: 5px 0 0 0;}
.hyouji a:hover{background:#eb6100;color:white;}
/* ====================================================== レスポンシブ ======== */
@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;}
/* ↓ カテゴリ名の枠 10/2 変更 元「.post-categories」*/
.post-categories a{width: 200px;font-size: 14px;}
/* =========== 投稿のタイトル =========== */
#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;}
/* ↓ カテゴリ名の枠 10/2 変更 元「.post-categories」*/
.post-categories a{width: 180px;font-size: 14px;}
/* =========== 投稿のタイトル =========== */
#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){/* 9/3 変更 元 (max-width:540px) */
/* ========= 投稿のスペース全体 ここからは 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;}
/* ↓ カテゴリ名の枠 10/2 変更 元「.post-categories」*/
.post-categories a{width: 336px;font-size: 14px;}
/* =========== 投稿のタイトル =========== */
#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;}
/*カテゴリ名の枠 widthは.news_leftのwidth:290px 10/12変更*/
.post-categories a{display: block;text-align: center;
width: 290px;padding: 1px 0px 1px;
font-size: 13px;}
/* 副題 ======================== */
.entry-subtitle{
font-size:14px;text-align: justify;
color:black;
line-height:1.5;
margin-top:5px;}
/* [この記事を表示] */
.hyouji a{
width:150px;height: 27px;font-size: 14px;
padding: 0px 0 0px;margin: 5px 0 0 0;}
/* =========== 投稿のタイトル =========== */
#newest h2,#event h2,#demand h2,#other h2{
font-size: 16px;line-height: 22px;
margin:-10px 0 0px 0px;}
/* 投稿の本文 */
.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;}
/* ↓ カテゴリ名の枠 10/2 変更 元「.post-categories」*/
.post-categories a{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;}
/*アコーディオンの枠の色と太さ*/
.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;/*はじめは非表示*/
text-align: left;
margin:0 3% 3% 3%;
padding: 3% 5% 3% 5%;}
/* ========================================================================
サイドバー カテゴリー
========================================================================= */
.archive .archive_list li{
margin:0;
border-top:1px solid #999999;
border-left:1px solid #999999;
border-right:1px solid #999999;
line-height:1}
.archive .archive_list li:last-child{
border-bottom:1px solid #999999;}
.archive .archive_list li a{
padding:15px 5px;display:block;text-decoration:none;position:relative;
line-height:1;-webkit-transition:all 300ms 0s ease;line-height: normal;
-o-transition:all 300ms 0s ease;transition:all 300ms 0s ease;}
.archive .archive_list li a:hover{background-color:#eb6100;color: white;}
@media only screen and (max-width:767px){
.archive{margin-top:0px;margin-bottom: 20px;}
}
@media only screen and (max-width:420px){
.archive .archive_list li a{
padding:10px 5px;}
}
/*==============================================================================
サイドバー 階層アーカイブリスト オレンジ #eb6100
=========================================================================== */
/* 1月 - 12月 font-size */
.monthly-archives li{text-align: left;
padding:2px 0 5px 20px;font-size: 1.2em;color: #999999;
border-bottom: 2px dotted #CCCCCC;font-family:"游ゴシック体", YuGothic, "游ゴシック Medium",
"Yu Gothic Medium", "游ゴシック", "Yu Gothic",
"メイリオ", sans-serif;}
.yearly-accordion .monthly-archives li {
position: relative;
padding-left: 1.2em; /* 左に余白を作る */
margin: 0.25em 0;
color: #999999;
}
/* 左の矢印アイコン */
.yearly-accordion .monthly-archives li::before {
content: ">"; /* ←ここでアイコンを指定 */
position: absolute;
left: 0; /* 左端に配置 */
top: 11px;
font-size: 1em;font-weight: bold;
color: darkgreen; /* 月の文字色と合わせる */
line-height: 1.0em;
}
/* li を横並びレイアウトにする */
.yearly-accordion .monthly-archives li {
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
padding-left: 1.2em; /* 左の矢印用 */
margin: 0.25em 0;
color: #999999;
}
/* a をブロック化して行全体クリック可能にする */
.yearly-accordion .monthly-archives li a {
display: block;
flex: 1; /* 左側いっぱいに広げる */
padding: 2px 0 0;
text-decoration: underline;
}
/* 投稿数（右側） */
.yearly-accordion .monthly-archives li .count {
white-space: nowrap; /* 改行させない */
margin-left: 0.5em;
color: #888;
}
/* 全てのhover */
a:hover{color:#eb6100;}
.yearly-archives .count {color: #888;font-size: 0.85em;}
/* 周りのケイ */
.yearly-accordion {
margin: 0;padding: 0;
border: 1px solid #999999;
overflow: hidden;}
.yearly-accordion .accordion-item + .accordion-item {
border-top: 1px solid #999999;}
/* 「 2026年 」年タイトル の font-size */
.yearly-accordion .accordion-header {
margin: 0;font-size: 1.2em;}
/* 年タイトル */
.yearly-accordion .accordion-trigger {
display: flex;align-items: center;
width: 100%;gap: 0.4em;
margin: 0;padding: 0.5em 1em;
border: 0;
background: #CEF9DC;
color: inherit;font: inherit;
font-family:"游ゴシック体", YuGothic, "游ゴシック Medium",
"Yu Gothic Medium", "游ゴシック", "Yu Gothic",
"メイリオ", sans-serif;
font-weight: 700;text-align: left;cursor: pointer;}
/* 年タイトル の hover */
.yearly-accordion .accordion-trigger:hover,
.yearly-accordion .accordion-trigger:focus-visible {
background: #86F9C5;}
/* 上下のカッコ <> */
.yearly-accordion .accordion-icon {
margin-left: auto;
width: 0.55em;height: 0.55em;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: rotate(45deg);
transition: transform 0.2s ease;}
.yearly-accordion .accordion-trigger[aria-expanded="true"] .accordion-icon {
transform: rotate(-135deg);}
.yearly-accordion .accordion-panel {
padding: 0.6em 1em 0.6em;
background: #fff;}
.yearly-accordion .accordion-panel[hidden] {
display: none;}
.yearly-accordion .monthly-archives {
list-style: none;margin: 0;padding: 0;}
/* 各月の右の カウント */
.yearly-accordion .monthly-archives li {
margin: 0.25em 0;color:#999999;}
/* これは表示したくないので font-size を 0にした */
.yearly-accordion .year-link {
margin-bottom: 0.45em;padding-bottom: 0.35em;
font-size: 0px;}
@media only screen and (max-width:960px){
/* 「 2026年 」年タイトル の font-size */
.yearly-accordion .accordion-header {margin: 0;font-size: 1.0em;}
/* 1月 - 12月 font-size */
.monthly-archives li{padding: 2px 0 5px 10px;font-size: 1.0em;}
}
@media only screen and (max-width:767px){
/* 「 2026年 」年タイトル の font-size */
.yearly-accordion .accordion-header {margin: 0;font-size: 1.0em;}
/* 1月 - 12月 font-size */
.monthly-archives li{padding: 2px 0 3px 10px;font-size: 1.0em;}
}
@media only screen and (max-width:555px){
/* 「 2026年 」年タイトル の font-size */
.yearly-accordion .accordion-header {margin: 0;font-size: 0.9em;}
/* 1月 - 12月 font-size */
.monthly-archives li{
text-align: left !important;padding: 2px 0 3px 10px;font-size: 0.5em;}
}
@media only screen and (max-width:420px){
/* 「 2026年 」年タイトル の font-size */
.yearly-accordion .accordion-header {margin: 0;font-size: 0.9em;}
/* 1月 - 12月 font-size */
.monthly-archives li{
text-align: left !important;padding: 2px 0 3px 10px;font-size: 0.5em;}
}
/* =========================================================================
私たちについて 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) /* ← 9/3 変更 元 (max-width:540px) 更 */
{
#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;}/* 9/3 変更 */
/* ↓ == 文字 p 「長い文章」 ===*/
#aboutus .back_campaign p{
margin: auto;font-size: 15px;line-height:28px;width: 360px;padding: 5px auto 0px;}/* 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;
color:darkgreen;text-align: center;font-size: 15px;margin: 5px auto 0;}
.accordion-area_l section,.accordion-area_r section{width:400px;}
.accordion-area_l section{margin-top: 10px;}
.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:320px;}
.accordion-area_l section{margin-top: 10px;}
#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) /* ← 9/3 変更 元 (max-width:540px) */
{
#contact{margin:-20px auto 0px;}/* 上下のコーナーのアキ*/
/* スペースの大きさと色など */
.toiawase_wrap{width: 380px;margin:5px auto 0;}/* ← 9/3 変更 元 width: 90% */
/* 文字 「お問い合わせ」 */
.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% */
.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 */
.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;}
/* ↓ 会費、カンパ等のお振り込みは */
.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) /* ← 9/3 変更 元 (max-width:540px) */
{
.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;}
/* ↓ 会費、カンパ等のお振り込みは */
.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;}
/* ↓ 会費、カンパ等のお振り込みは */
.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) /* ← 9/3 変更 元 (max-width:540px) */
{
#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;}
}