@charset "utf-8";
/* Theme Name: CuteDesing
Theme URI: http://wizlife.xsrv.jp/cute_wp/
Description: WordPressオリジナルテーマ
Version: 1.0.1 2019/07/16
Author: Free
Author URI: http://wizlife.xsrv.jp/cute_wp/*/

                                                                @media (min-width: 1350px) {
                                                                  .bg_100_pink_02 {
                                                                    background-size: auto;
                                                                  }
                                                                }
                                                                @media (min-width: 1850px) {
                                                                  .bg_100_pink_02 {
                                                                    background-size: 100% 120%;
                                                                  }
                                                                }
                                        /* 例1200px(高数値ならなんでも)から始まり973pxまで縮まってから発動 */
                                        /* 0px~973pxまでという2パターンから考えられる{混乱した時用メモ}*/
                                        @media (max-width: 974px) {
                                          #logo {
                                            width: 400px;
                                            background-size: 400px auto;
                                          }
                                          #flour {
                                            display: block;
                                            width: 100%;
                                            transform: none;
                                            height: auto;
                                            margin: 0 auto;
                                            position: static;
                                            top: auto;
                                            left: auto;
                                          }
                                          #flour img {
                                            width: 110%;
                                            position: relative;
                                            top: 0;
                                            left: 50%;
                                            margin: 0 0 0 -55%;
                                            z-index: 3;
                                          }
                                          #logo:hover {
                                            width: 400px;
                                            background-size: 400px auto;
                                          }
                                          #main {
                                            padding: 0 0 0 0;
                                            background-position: 0 -43px;
                                          }
                                          .wrap {
                                            max-width: 800px;
                                          }
                                          #contents .container {
                                            padding: 0px 0 500px 0;
                                          }
                                          #contents .container .inner .mask {
                                            background-size: contain;
                                          }
                                          #contents .container .inner .mask h2 {
                                            margin: 130px auto 0;
                                          }
                                          #contents .outer {
                                          	max-width: 650px;
                                            flex-wrap: wrap;
                                            margin: 0 auto;
                                          }
                                          #contents .outer .thumbnail {
                                            margin: 50px 0 0 0;
                                          }
                                          .content_title.section-title::after {
                                            font-weight: bold;
                                            color: #996d6d;
                                          }
                                        }
                        /* 例1200px(高数値ならなんでも)から始まり671pxまで縮まってから発動 */
                        /* 0px~671pxまでという2パターンから考えられる{混乱した時用メモ}*/
                        @media (max-width: 771px) {
                          /* -------------- フレックスボックスマージンのみ消す -------------- */
                          header {
                            height: 440px;
                          }
                          #logo {
                            width: 300px;
                            background-size: 300px auto;
                            top: 140px;
                          }
                          #logo:hover {
                            width: 300px;
                            background-size: 300px auto;
                          }
                          #flour {
                            display: block;
                            width: 100%;
                          }
                          #main {
                            padding: 0 0 0 0;
                            background-position: 0 -13px;
                          }
                          #contents .container {
                            padding: 0px 0 450px 0;
                          }
                          #contents .container .inner .mask {
                            /* width: 771px; */
                          }
                          #contents .container .inner .mask h2 {
                            margin: 90px auto 0;
                            font-size: 20px;
                          }
                          #contents .outer {
                            width: 95%;
                            max-width: 95%;
                          }
                          #contents .outer .thumbnail {
                            width: 48%;
                            height: auto;
                            margin: 23px 0 0 0;
                          }

                        }

          /* 例1200px(高数値ならなんでも)から始まり651pxまで縮まってから発動 */
          /* 0px~651pxまでという2パターンから考えられる{混乱した時用メモ}*/
          @media (max-width: 615px) {
            /* -------------- ヘッダー(header) -------------- */
            header {
              height: 340px;
            }
            .bg_100_pink {
              margin: 0px 0 0 0;
            }
            #logo {
              width: 230px;
              background-size: 230px auto;
              top: 115px;
            }
            #logo:hover {
              width: 230px;
              background-size: 230px auto;
            }
            #flour {
              display: block;
              width: 100%;
            }
            main {
              background-position: 0 50px;
              padding: 0 0 450px 0;
            }
            #contents .container {
              padding: 0 0 330px 0;
            }
            #contents .container .inner .mask {
              /* width: 615px; */
            }
            #contents .container .inner .mask h2 {
              margin: 55px auto 0;
              font-size: 16px;
            }
            .section-title::after {
              font-size: 14px;
              padding: 5px 0 0 0;
            }
            .bg_100_pink_02 {
              padding: 0 0 40px 0;
              background-size: auto 100%;
            }
          }

@media (max-width: 501px) {
  /* -------------- ヘッダー(header) -------------- */
  header {
    height: 285px;
  }
  #logo {
    width: 230px;
    background-size: 230px auto;
    top: 65px;
  }
  #logo:hover {
    width: 230px;
    background-size: 230px auto;
  }
  main {
    background-position: 0 10px;
    padding: 0 0 280px 0;
  }
  #flour {
    display: block;
    width: 100%;
  }
  .bg_100_pink {
    margin: 0px 0 0 0;
    padding: 50px 0 50px 0;
  }
  .news .inner .time {
    font-size: 9px;
  }
  #contents .outer {
    margin: 30px auto 0;
  }
  #contents .container {
    padding: 0 0 230px 0;
    background-position: center center;
    background-size: 500px auto;
  }
  #contents .container .inner {
    background-color: #f9ddd3;
  }
  #contents .container .inner .mask {
    background: url(img/mask_sp.png) no-repeat, rgba(229, 197, 186, 0.72);
    background-position: center center;
    padding: 10px 0 10px 0;
  }
  #contents .container .inner .mask h2 {
    margin: 5px auto 0;
    padding: 30px 10px 30px 10px;
    opacity: 1.0;
  }
  .section-title::after {
    padding: 5px 0 0 0;
  }
  .news .inner h3 a {
    font-size: 10px;
    line-height: 1.3em;
  }
  .news .inner {
    margin: 0 30px 10px 30px;
    padding: 0 0 10px 0;
  }
  .news .inner:first-child {
    margin: 0 30px 10px 30px;
  }
  #bg_100_white #news .news_text .inner h3 {
    font-size: 10px;
    line-height: 1.3em;
  }
  .iphone .bg_100_pink_02 {
  	padding: 0 0 80px 0;
  	background: #E5C5BA;
  	background: url(img/bg_visual_04.jpg) repeat-y;
  	background-size: 100vh;
  	background-attachment: scroll;;
  }
}