@charset "UTF-8";
/* 基本設定： ページ全体 */
*{
   margin: 0;
   padding: 0;
}
BODY{
   font-size : 16px;
   color : #2a2a2a;
   font-family: 'メイリオ' ,Meiryo, 'ヒラギノ角ゴ Pro W3' , 'Hiragino Kaku Gothic Pro' , 'ＭＳ Ｐゴシック' , 'Osaka' ,sans-serif;
}
IMG{
   border-style:none;
}
A IMG{
   border-style:none;
}
*, *::before, *::after{
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   -o-box-sizing: border-box;
   -ms-box-sizing: border-box;
   box-sizing: border-box;
}
/* 汎用クラス */
.hide{
   display: none;
}
/* スマホ時改行 <BR class="br-sp"> */
.br-sp{
   display:block;
}
/*===============================================
● モバイルファースト用（スマホ）
===============================================*/
/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝　ヘッダーメニュー　＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
HEADER{
   background-color : rgba(255, 255, 255, 0.7);
   width : 100%;
}
.head_rogo{
   line-height : 70px;
   background-color : #87bf28;
   padding-left : 20px;
   padding-right : 20px;
   display : inline-block;
   color : white;
   text-decoration : none;
   font-size : 6vw;
}
.head_menu UL{
   list-style: none;
}
.head_menu A{
   display: block;
   padding : 15px;
   color : black;
   font-size: 1em;
   text-decoration: none;
}
.head_menu A:hover{
   background-color : rgba(111, 156, 33, 0.7);
   color : white;
}
/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝　トップイメージ　＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
.top-img{
   background-image :linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.1)), url(../img_meigen/mTOP2.jpg);
   background-position: center;
   background-size: cover;
   height : 200px;
   -js-display: flex;
   display: -ms-flexbox;
   display: -webkit-box;
   display: -webkit-flex;
   display: flex;
   -ms-flex-align: center;
   -webkit-box-align: center;
   -webkit-align-items: center;
   align-items: center;
   -ms-flex-pack: center;
   -webkit-box-pack: center;
   -webkit-justify-content: center;
   justify-content: center;
   background-color : green;
}
.top-img H1{
   font-size : 1.5em;
   text-align : center;
   text-shadow: 1px 1px 2px #696969;
   color : white;
}
.top-img H2{
   font-size : 1.2em;
   color : white;
   text-align : center;
}
/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝　フッター用（全共通）　＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
FOOTER{
   width: 100%;
   padding: 15px 20px;
   background: #000;
}
FOOTER .container{
   max-width : 1200px;
   margin-left : auto;
   margin-right : auto;
}
FOOTER UL{
   width: 100%;
   margin-bottom : 10px;
   list-style-type: none;
}
FOOTER LI{
   width: 50%;
   float: left;
}
@media screen and (min-width:768px) {
   FOOTER UL{
   max-width : 1000px;
}
FOOTER LI{
   width: 16.0%;
}
}
FOOTER LI A{
   display: block;
   color : white;
   font-size : 0.9em;
   line-height: 45px;
   padding-left : 20px;
   text-decoration: none;
}
@media screen and (min-width:768px) {
   FOOTER LI A{
   line-height : 20px;
   padding-right : 10px;
   padding-top : 5px;
   padding-bottom : 5px;
}
}
FOOTER LI A:hover{
   background: #C30;
}
FOOTER UL::after{
   display: table;
   content: "";
   clear: both;
}
#copyright{
   text-align: right;
   color : white;
   font-size : 0.85em;
   border-top-width : 1px;
   border-top-style : solid;
   border-top-color : white;
   padding-top : 8px;
}
@media screen and (min-width:600px) {
   #copyright BR{
   display: none;
}
}
@media screen and (max-width:360px) {
   #copyright{
   font-size : 0.7em;
}
FOOTER LI A{
   font-size : 0.8em;
   padding-left: 5px;
}
}
/*===============================================
● 767px以下　スマホ（トグルボタン）
===============================================*/
@media screen and (max-width: 767px) {
   header .container-small {
   -js-display: flex;
   display: -ms-flexbox;
   display: -webkit-box;
   display: -webkit-flex;
   display: flex;
   -ms-flex-align: center;
   -webkit-box-align: center;
   -webkit-align-items: center;
   align-items: center;
   -ms-flex-pack: justify;
   -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
   justify-content: space-between;
}
.toggle{
   margin-right: 30px;
   padding: 0;
   border: none;
   outline: none;
   background: none;
   font-size: 30px;
   opacity: 0.9;
   cursor: pointer;
color:#000;
}
.head_menu{
   display: none;
}
HEADER{
   background-color : rgba(255, 255, 255, 0.95);
}
}
/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝　パンくずリスト　＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
.bread{
   max-width : 1000px;
   margin-left : auto;
   margin-right : auto;
   padding-top : 15px;
   padding-left : 8px;
}
.bread OL{
   -js-display: flex;
   display: -ms-flexbox;
   display: -webkit-box;
   display: -webkit-flex;
   display: flex;
   list-style: none;
}
.bread A{
   display: block;
   padding: 5px;
   font-size: 0.875rem;
   text-decoration: none;
   color : #2a2a2a;
}
.bread A::after{
   margin-left: 10px;
   content: '\f054';
   font-family: 'FontAwesome';
}
.bread A:hover{
   background-color : rgba(195, 195, 195, 0.4);
}
/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝　名言　＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
.blog .container{
   padding-left : 10px;
   padding-right : 10px;
   margin-bottom : 20px;
   margin-top : 30px;
}
.blog H3{
   padding-left : 0.5em;
   border-left-width : 0.75em;
   border-left-style : solid;
   border-left-color : #666666;
   border-bottom-width : 1px;
   border-bottom-style : solid;
   border-bottom-color : #666666;
   margin-bottom : 20px;
   font-size : 1.1em;
   margin-top : 20px;
}
.blog H3 A{
   color : #2a2a2a;
   text-decoration : none;
}
.blog H4 A{
   color : #2a2a2a;
   text-decoration : none;
}
.blog P{
   font-size: 1em;
   line-height : 1.7;
   padding-bottom : 1em;
   margin-bottom : 1em;
   border-bottom-width : 1px;
   border-bottom-style : dotted;
}
/*===============================================
● 600px以下　Nexus7 以下用
===============================================*/
@media screen and (max-width: 600px) {
   .blog IMG{
   width : 100%;
   height : auto;
   padding-bottom : 15px;
}
}
/*===============================================
● ● 画面の横幅が768px以上: タブレットとPC用
===============================================*/
@media screen and (min-width:768px){
   .br-sp{
   display:none;
}
/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝　タブレットとPC　ヘッダーメニュー　＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
.head_rogo{
   font-size : 24px;
}
HEADER .container{
   -js-display: flex;
   display: -ms-flexbox;
   display: -webkit-box;
   display: -webkit-flex;
   display: flex;
   -ms-flex-align: center;
   -webkit-box-align: center;
   -webkit-align-items: center;
   align-items: center;
   -ms-flex-pack: justify;
   -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
   justify-content: space-between;
}
.head_menu UL{
   -js-display: flex;
   display: -ms-flexbox;
   display: -webkit-box;
   display: -webkit-flex;
   display: flex;
}
.head_menu{
   display: block !important;
}
.toggle{
   display: none;
}
/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝　タブレットとPC　トップイメージ　＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
.top-img H1{
   font-size : 2em;
}
/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝　タブレットとPC　名言　＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
   .blog .container{
   max-width: 1000px;
   margin-left: auto;
   margin-right: auto;
   padding-left : 0px;
   padding-right : 0px;
}
.blog IMG{
   max-width : 100%;
   height : auto;
   padding-right : 15px;
}
/* パンくずリスト */
.bread{
   padding-left : 0px;
}
}
/*==================================================
画面の横幅が768px以上1090px以下（タブレット専門）
==================================================*/
@media screen and (min-width: 768px) and (max-device-width: 1090px) {
 /* ヘッダーメニュー */
.head_rogo{
   font-size : 21px;
}
.head_menu A{
   padding : 15px 7px;
   font-size: 13px;
}
/* トップイメージ */
.top-img H1{
   font-size : 2.2em;
}
/* 日記内余白 */
   .blog .container{
   padding-left : 15px;
   padding-right : 15px;
}
/* パンくずリスト */
.bread{
   padding-left : 12px;
}
}