@charset "UTF-8";

HTML{height:100%;}

* { margin: 0px; /*HTML　空白無くす*/
    padding: 0px; }

/*クリーム色　#FFF4D6　*/
body{  font-size: 18px;
       background-color: #FFF4D6;
       color: #ffffff;}

/*全てのコンテンツ下地。中央寄せ。*/
.main_box{width: 1050px;
          margin:0 auto;
          background-color: #000;}

/*メグルメガネ　トップのロゴ~画像*/
.top_title{background: linear-gradient(#000001, #2A2A2A);}
.top_title p{font-size: 12px;
             padding: 5px 5px 10px 25px;}
.logo_img:hover{opacity: 0.7;
                     transition-duration: 0.3s;}
.logo_img{width: 300px;
          padding: 15px 0px 0px 25px;}
.top_img{width: 1050px;
         padding-top: 10px;
         vertical-align: bottom;}
.qr_img{width: 100px;}

/*--------------------メニュー-----------------------------*/
/*
.pc_menu{background: linear-gradient(#000001, #2A2A2A);}
*/

/*クリーム色　#FFF4D6　*/
.pc_menu{background: linear-gradient(#FFF4D6, #F2E8CB);}
.pc_menu_box{display: flex;
           　justify-content: center;}
.pc_menu_li{font-size: 12px;
            width: 150px;
            padding: 20px;
            font-weight: bold;
            text-align: center;}
.pc_menu_li a{color: black;
              text-decoration: none;}
.pc_menu_li a:hover{color: #fc3d03;}

.mobile_menu{display: none;}

/*-----------------------------contents-----------------------------*/
.main_contents{padding: 30px 40px 40px 40px;}
.main_contents a{color: #6686b0;}
.main_contents a:hover{color: #a62944;}

.news_title{background-color: #000001;}
.news_h{font-size: 20px;
         padding: 10px 20px 10px 20px;}

.top_news{padding: 20px 30px 10px 30px;}
.top_news p{padding: 2px;
            font-size: 20px;}

/*--------------------------個人ブログへのリンク-----------------------------*/
.blog_link{padding-top: 30px;
           display: grid;
           justify-items: center;
           align-items: center;
           grid-template-columns: 300px 300px 300px;}
.blog_link_box{border: 1px solid #000;
               padding: 5px;}
.blog_link_box img{width: 200px;}
.blog_link_box a:hover{opacity: 0.7;
                         transition-duration: 0.3s;}

/*-------------------SNS共有リンク、Twitterメグルメガネリスト---------------------------*/
.share_list{display: grid;
            padding-bottom: 20px;
            grid-template-columns: 50px 50px 50px 50px 50px 120px;}
.share_list_icon{border-radius: 10px 10px 10px 10px;
                 text-align: center;
                 font-size: 15px;
                 padding: 5px;
                 margin: 10px 5px;}
.share_list a{color: #fff;
              text-decoration: none;}
.share_list_icon:hover{transform: scale(1.1);} /*SNSアイコンBOX　ホバーで膨らむ*/

.Twitter_box{width: 500px;} /*メグルメガネリスト表示*/


/*-----------------------------------フッターwhite#2A2A2A,#000001------------------------------------------*/
footer{text-align: center;
       font-size: 12px;}
.footer_box{font-size: 12px;
            background: linear-gradient(#FFF4D6,#FFF4D6);}
.footer_box img{width: 300px;
                padding: 20px 0px 15px 0px;}
.footer_box p{padding-bottom: 20px;
                color: black;}

/*フッターメニュー*/
.footer_link{padding-top: 40px;}
.footer_link span{padding: 5px;}
.footer_link a{color: black;
              text-decoration: none;}
.footer_link a:hover{color: #fc3d03;}
/*フッターメニューここまで*/

/*----------------------------トップへ戻る-------------------------------*/
#back-top a{position: fixed;
            right:0px;
            bottom:10px;
            transition: 1s;}
 #back-top a:hover{opacity: 0.75;
                  transition-duration: 0.3s;}


/*-------------------------------------------各ページ--------------------------------------------*/
.page_title{font-size: 25px;
            padding-bottom: 20px;
            color: #fff;}

.page_container{display: flex;
                justify-content: space-between;}

/*メインコンテンツ　左側*/
.page_left{width: 67%;}
.home_link{padding-bottom: 20px;
           color: #cccccc;
           font-size: 13px;}
.home_link a{color: #cccccc;
             text-decoration: none;}

/*サブコンテンツ　右側*/
.page_right{width: 30%;}

/*RSS購読バー*/
.RSS_title{background-color: #000001;}
.RSS_title:hover{background-color: #2A2A2A;}
.RSS_title p{color: #ffffff;
             font-size: 15px;
             padding: 2px 10px;}
.RSS_title i{padding-right: 10px;}
.RSS_petit{color: #ffffff;
           text-decoration: none;}
/*ブログリンク・リンク用画像*/
.right_blog{padding: 15px;
            font-size: 15px;
            font-weight: bold;}
.right_img{padding-bottom: 15px;
           font-size: 15px;}
.right_img img{width: 50px;
               vertical-align: bottom;}
.right_img a:hover{opacity: 0.7;
                    transition-duration: 0.3s;}

/*-------------------メンバーページ---------------------------*/

.member_img{padding: 15px 0px;}
.member_img img{width: 250px;}
.member_p{font-size: 15px;
          padding-bottom: 15px;}

/*-------------------バイオグラフィー---------------------------*/

.biography_text{font-size: 14px;
                padding-bottom: 1px;
                color: #fff;}

/*-------------------お問い合わせ---------------------------*/

.contact_field p{font-size: 15px;
              padding-bottom: 1px;
              color: #fff;}

.contact_field input{width: 55%;
                     height: 25px;
                     margin-bottom: 15px;}

.contact_field textarea{width: 55%;
                        height: 250px;
                        max-width: 90%;
                        margin-bottom: 10px;}

.contact_field button{padding: 5px;}

.contact_text{font-size: 14px;
              padding-bottom: 1px;
              color: #fff;}


/*-------------------熊本応援ページ---------------------------*/

.kumamoto_text{font-size: 14px;}
.kumamoto_video{width: 100%;}

.memo_kuma{width: 30px;
           height: 30px;
           background-image: url("../img/kuma.png");
           background-size: cover;
           background-repeat: no-repeat;}

.message_kuma{background-color: #f0f0f0;
              padding: 15px;
              margin-bottom: 20px;}
.message_kuma p{font-size: 14px;
                padding: 10px 0px;}


/*-------------------歌ページ---------------------------*/

.song_title{font-size: 20px;
            padding-bottom: 15px;
            color: #fff;}
.song_date{font-size: 14px;
           padding-left: 10px;}

.song_box p{font-size: 14px;
            padding: 10px 0px;
            color: #fff;}
.song_box img{width: 100%;}

/*-------------------ギャラリーページ---------------------------*/
.gallery_box img{width: 100%;}

.gallery_box p{font-size: 14px;
            padding: 10px 0px;
            color: #fff;}

/*-------------------------------------------ここからレスポンシブ--------------------------------------------*/
@media screen and (max-width:768px){

  /*全てのコンテンツ下地。中央寄せ。*/
  .main_box{width: 100%;
            margin:0 auto;
            background-color: #000;}

  body{ font-family: 'YuGothic','Yu Gothic','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3','メイリオ', 'Meiryo','ＭＳ ゴシック',sans-serif;}

  /*メグルメガネ　トップのロゴ~画像*/
  .top_title{text-align: center;
             background: linear-gradient(#000001, #2A2A2A);}
  .top_title p{font-size: 12px;
               padding: 0px 0px;}
  .logo_img{width: 300px;
            padding: 5px 0px;}
  .top_img{width: 100%;
           vertical-align: bottom;}
  .qr_img{width: 90px;}

  /*--------------------メニュー-----------------------------*/
  .pc_menu{display: none;}

  .mobile_menu{display:block;}
  .mobile_menu label {
      display: block;
      margin: 0 0 4px 0;
      padding : 15px 20px 5px 0px;
      line-height: 1;
      cursor :pointer;}
  .mobile_menu input {display: none;}

  .mobile_menu_list p{font-size: 25px;
                      text-align: right;}
  .mobile_menu_list ul {
      margin: 0;
      padding: 0 10px 0px 20px;
      text-align: left;
      list-style: none;}

  .mobile_menu_list li {
      height: 0;
      padding-left: 10px;
      overflow: hidden;
      font-size: 15px;
      -webkit-transition: all 0.5s;
      -moz-transition: all 0.5s;
      -ms-transition: all 0.5s;
      -o-transition: all 0.5s;
      transition: all 0.5s;}

  .mobile_menu_list i{padding-right: 10px;}
  .mobile_menu_list hr{width: 90%;
                       border: none;
                       border-top: 1px dotted #000;}

  #type1:checked ~ #links1 li{
      height: 50px;
      opacity: 1;}

  .mobile_menu_list a{color: white;
                    text-decoration: none;}
  .mobile_menu_list a:hover{color: #fc3d03;}


  /*-----------------------------contents-----------------------------*/
  .main_contents{padding: 0px 0px;}
  .main_contents a{color: #6686b0;}
  .main_contents a:hover{color: #2A2A2A;}

  .news_title{background-color: #000001;}
  .news_h{font-size: 18px;
           padding: 10px 20px 10px 20px;}

  .top_news{padding: 10px;}
  .top_news p{padding: 2px;
              font-size: 15px;}
  .top_news img{width: 30%;}

  /*--------------------------個人ブログへのリンク-----------------------------*/
  .blog_link{padding: 30px;
             display:grid;
           justify-items: center;
           align-items: center;
                 grid-template-columns: 100px 100px 100px;}
  .blog_link_box{border: 1px solid #000;
                 padding: 5px;}
  .blog_link_box img{width: 90px;}
  .blog_link_box a:hover{opacity: 0.7;
                           transition-duration: 0.3s;}

  /*-------------------SNS共有リンク、Twitterメグルメガネリスト---------------------------*/
  .share_list{display: grid;
              padding-bottom: 20px;
              grid-template-columns: 40px 40px 40px 40px 40px 100px;}
  .share_list_icon{border-radius: 10px 10px 10px 10px;
                   text-align: center;
                   font-size: 12px;
                   padding: 5px;
                   margin: 10px 5px;}
  .share_list a{color: #fff;
                text-decoration: none;}
  .share_list_icon:hover{transform: scale(1.1);} /*SNSアイコンBOX　ホバーで膨らむ*/

  .Twitter_box{width: 100%;} /*メグルメガネリスト表示*/


  /*-----------------------------------フッターwhite#FFF4D6#2A2A2A#000001------------------------------------------*/
  footer{text-align: center;
         font-size: 12px;}

  .footer_box{font-size: 12px;
              background: linear-gradient(#FFF4D6,#FFF4D6);}
  .footer_box img{width: 300px;
                  padding: 20px 0px;}
  .footer_box p{padding-bottom: 20px;
                color: black;}

  /*フッターメニュー*/
  .footer_link{padding: 40px;}
  .footer_link span{padding: 5px;}
  .footer_link a{color: black;
                text-decoration: none;}
  .footer_link a:hover{color: #fc3d03;}
  /*フッターメニューここまで*/

  /*----------------------------トップへ戻る-------------------------------*/
  #back-top a{position: fixed;
              right:0px;
              bottom:10px;
              transition: 1s;}
   #back-top a:hover{opacity: 0.75;
                    transition-duration: 0.3s;}


  /*-------------------------------------------各ページ--------------------------------------------*/
  .page_title{font-size: 25px;
              padding-bottom: 20px;
              color: #fff;}

  .page_container{display: block;
                  padding: 10px;}

  /*メインコンテンツ　左側*/
  .page_left{width: 100%;}
  .home_link{padding-bottom: 20px;
             color: #cccccc;
             font-size: 13px;}
  .home_link a{color: #cccccc;
               text-decoration: none;}

  /*サブコンテンツ　右側*/
  .page_right{width: 100%;}

  /*RSS購読バー*/
  .RSS_title{background-color: #000001;}
  .RSS_title:hover{background-color: #2A2A2A;}
  .RSS_title p{color: #ffffff;
               font-size: 15px;
               padding: 2px 10px;}
  .RSS_title i{padding-right: 10px;}
  .RSS_petit{color: #ffffff;
             text-decoration: none;}
  /*ブログリンク・リンク用画像*/
  .right_blog{padding: 15px;
              font-size: 15px;
              font-weight: bold;}
  .right_img{padding-bottom: 15px;
             font-size: 15px;}
  .right_img img{width: 50px;
                 vertical-align: bottom;}
  .right_img a:hover{opacity: 0.7;
                      transition-duration: 0.3s;}

  /*-------------------メンバーページ---------------------------*/

  .member_img{padding: 15px 0px;}
  .member_img img{width: 250px;}
  .member_p{font-size: 15px;
            padding-bottom: 15px;}

  /*-------------------バイオグラフィー---------------------------*/

  .biography_text{font-size: 14px;
                  padding-bottom: 1px;
                  color: #fff;}

  /*-------------------お問い合わせ---------------------------*/

  .contact_field p{font-size: 15px;
                padding-bottom: 1px;
                color: #fff;}

  .contact_field input{width: 100%;
                       height: 25px;
                       margin-bottom: 15px;}

  .contact_field textarea{width: 100%;
                          height: 250px;
                          margin-bottom: 10px;}

  .contact_field button{padding: 5px;}
  
  .contact_text{font-size: 14px;
                  padding-bottom: 1px;
                  color: #fff;}


  /*-------------------熊本応援ページ---------------------------*/

  .kumamoto_text{font-size: 14px;}
  .kumamoto_video{width: 100%;}

  .memo_kuma{width: 30px;
             height: 30px;
             background-image: url("../img/kuma.png");
             background-size: cover;
             background-repeat: no-repeat;}

  .message_kuma{background-color: #f0f0f0;
                padding: 15px;
                margin-bottom: 20px;}
  .message_kuma p{font-size: 14px;
                  padding: 10px 0px;}


  /*-------------------歌ページ---------------------------*/

  .song_title{font-size: 20px;
              padding-bottom: 15px;
              color: #fff;}
  .song_date{font-size: 14px;
             padding-left: 10px;}


  .song_box p{font-size: 14px;
              padding: 10px 0px;
              color: #fff;}
  .song_box img{width: 100%;}

  /*-------------------ギャラリーページ---------------------------*/
  .gallery_box img{width: 100%;}

  .gallery_box p{font-size: 14px;
              padding: 10px 0px;
              color: #fff;}

}