@charset "utf-8";


/* --------------------------------------------------- */
/* PageTitle                                           */
/* --------------------------------------------------- */

/* PageTitleArea
--------------------------------------------------- */
.PageTitleArea{
  position: relative;
}

/* PageTitleBlock
--------------------------------------------------- */
.PageTitleBlock{
}
    .PageTitleBlock .BlockHeader{
      padding: 25px 0;
    }
        .PageTitleBlock .BlockHeader .Heading{
          color: #fff;
          text-align: center;
          font-weight: 400;
          margin: 0;
        }
        .PageTitleBlock .BlockHeader .Heading .Main,
        .PageTitleBlock .BlockHeader .Heading .Sub{
          display: block;
        }
        .PageTitleBlock .BlockHeader .Heading .Main{
          font-size: 200%;
          border-bottom: 1px dotted rgba(255,255,255,1);
          margin-bottom: 0.5em;
          padding-bottom: 0.5em;
          display: inline-block;
        }
        .PageTitleBlock .BlockHeader .Heading .Sub{
          font-size: 75%;
          letter-spacing: 0.25em;
        }

    .PageTitleBlock .BlockContents{
      overflow: hidden;
      text-align: center;
    }



    .PageTitleBlock .BlockFooter{
      padding-top: 0;
    }
        .PageTitleBlock .BlockFooter::after {
          background-position: 50% 0%;
        }



            /* + + + + + レスポンシブ + + + + +  */
            
                /* bp2より広いディスプレイ用 */
                .PageTitleBlock .BlockHeader{
                  position: absolute;
                  z-index: 10;
                  margin-left: -300px;
                  width: 600px;
                  top:  250px;
                  left: 50%;
                  background: rgba(30,30,30,0.9);
                }
                .PageTitleBlock .BlockContents{
                  height: 500px;
                  /*min-height: 30vw;*/
                }
                .PageTitleBlock .BlockContents .Image{
                }




    
    /* - - LocalMenuList - - */
    .MenuList.LocalMenuList {
      margin: 0 0;
    }
        .MenuList.LocalMenuList li{
        }
        .MenuList.LocalMenuList li a{
          color: #222;
          background: #fff;
          min-width: 14em;
          border: 1px solid #ccc;
          display: block;
          border-radius: 0.25em;
          text-align: center;
          margin: 4px;
        }
        .MenuList.LocalMenuList li a:hover,
        .MenuList.LocalMenuList li a:focus{
          border-color: #777;
          text-decoration: none;
        }
        .MenuList.LocalMenuList li a .TextItem{
          padding: 0.875em 1em;
        }
        .MenuList.LocalMenuList li a .Icon{
          font-size: 75%;
          opacity: 0.5;
        }
        .MenuList.LocalMenuList li a .Label{
          font-size: 112.5%;
          font-size: 100%;
        }
        
        .MenuList.LocalMenuList li a.Active{
          border-color: #333;
          color: #fff;
          background: #333;
          cursor: default;
        }
        .MenuList.LocalMenuList li a.Active .Icon{
          display: none;
        }


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

                /* bp2より狭いディスプレイ用 */
                body.rsbp-under-bp2 .MenuList.LocalMenuList{
                -webkit-justify-content: start;
                    -ms-justify-content: start;
                        justify-content: start;
                }
                body.rsbp-under-bp2 .MenuList.LocalMenuList li{
                  width: 50%;
                }
                body.rsbp-under-bp2 .MenuList.LocalMenuList li a{
                  min-width: 0em;
                }
                body.rsbp-under-bp2 .MenuList.LocalMenuList li a .TextItem{
                  padding: 0.875em 0
                }











/* --------------------------------------------------- */
/* DecorationArea                                      */
/* 汎用スタイル                                        */
/* --------------------------------------------------- */

/* DecorationArea
 * 装飾画像を幅いっぱいに表示させるエリア
 * テキスト配置は絶対配置になる
--------------------------------------------------- */
.DecorationArea{
  
}
    .DecorationArea.bg-wagara::before,
    .DecorationArea.bg-wagara::after{
      z-index: 4;
      top: auto;
      bottom: auto;
    }
    /* 内側に画像を付加するため bg-wagara を上書き */
    .DecorationArea.bg-wagara::before{
      top: 0%;
      height: 100px;
      background: url(../../img/common/decoration/wagara_white_btm.png) repeat-x 50% 0%;
    }
    .DecorationArea.bg-wagara::after{
      bottom: 0%;
      height: 75px;
      background: url(../../img/common/decoration/wagara_white_top.png) repeat-x 0% 100%;
    }

                /* bp2より狭いディスプレイ用 */
                .DecorationArea .Image{
                  margin-left: -10%;
                }
                .DecorationArea .Image img{
                  width: 120%;
                  max-width: none;
                }

    
    /*  - - 画像上にテキストを置くための補足CSS - -  */
    .DecorationArea .TextItem{
      position: absolute;
      width: 100%;
      top: 0%;
      text-align: center;
    }



    /* 背景画像に対応（imgは空にしておく） */
    .DecorationArea.EmptyImage .ImageItem .Image{
      height: 250px;
    }










/* --------------------------------------------------- */
/* DefaultBlock                                        */
/* 汎用スタイル                                        */
/* --------------------------------------------------- */

/* DefaultArea
--------------------------------------------------- */
.DefaultArea{
  padding: 50px 0;
}





/* DefaultBlock (common style)
 * Type1:画像左寄せ  Type2:画像右寄せ  Type3:複数段落向け（どっちにも寄せない）
--------------------------------------------------- */
.DefaultBlock{
  margin: 0 10px;
}
    .DefaultBlock  .TextItem{
    /*max-width: 800px;*/
      margin: auto;
      position: relative;
      z-index: 1;
    }
    
    
    
    .DefaultBlock .BlockContents{
    }

    .DefaultBlock .BlockContents .TextItem,
    .DefaultBlock .BlockContents .ImageItem{
      margin: 0 auto 40px;
    }
    
        .DefaultBlock .BlockContents .ImageItem .Image .Sub{
          position: relative;
          z-index: 5;
          display: inline-block;
        }
        .DefaultBlock .BlockContents .ImageItem .Image .Sub::before{
          /* content: ""; 和柄軽減のため無効化 */
          display: block;
          width:  90%;
          height: 90%;
          position: absolute;
        }
        
        /* サブ写真 - 装飾付き */
        .DefaultBlock .BlockContents .ImageItem .Image .Sub.Type1{
          margin-top: -150px;
        }
        .DefaultBlock .BlockContents .ImageItem .Image .Sub.Type1::before{
          left:  5%;
          top:   25%;
          background: url(../../img/common/decoration/colored_circle_type1.png) no-repeat 0px 0px;
          background-size: contain;
          z-index: -1;
        }
        .DefaultBlock .BlockContents .ImageItem .Image .Sub.Type1 img{
          width: 92.5%;
        }
    
        /* サブ写真 - シンプル */
        .DefaultBlock .BlockContents .ImageItem .Image .Sub.Type2{
          z-index: 1;
          margin-top: 2px;
        }
        .DefaultBlock .BlockContents .ImageItem .Image .Sub.Type2::before{
          left: 0%;
          top:  70%;
          background: url(../../img/common/decoration/colored_circle_type2.png) no-repeat 0% 100%;
          background-size: contain;
          z-index: -1;
        }
        



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


                /* bp2より狭いディスプレイ用  のスタイルを使用 */
                .DefaultBlock .BlockContents .ImageItem .Image .Sub.Decorated{
                  margin-top: -80px;
                }
                    .DefaultBlock .BlockContents .ImageItem .Image .Sub.Decorated{
                      height: 250px;
                    }
                    .DefaultBlock .BlockContents .ImageItem .Image .Sub.Type1{
                      margin-top: -100px;
                    }



/* BannerParagraph
--------------------------------------------------- */
.BannerParagraph{
  width: 75%;
  margin: 30px auto;
  position: relative;
  z-index: 5;
  background: url(../../img/common/decoration/wagara_type2.png);
}
    .BannerParagraph::before{
      content: "";
      display: block;
      width: 100%;
      height: 100%;
      background: none;
      border: 2px solid #f90;
      position: absolute;
      z-index: 10;
      top:  -15px;
      left: -15px;
    }
    .BannerParagraph .ParagraphContents .TextItem,
    .BannerParagraph .ParagraphContents .ImageItem {
      flex-grow: 1;
      margin: 0;
    }
    .BannerParagraph .ParagraphContents .ImageItem .Image{
      overflow: hidden;
    }
    .BannerParagraph .ParagraphContents .ImageItem img{
      margin-top: -50px;
      width: 100%;
    }
    .BannerParagraph .ParagraphContents .TextItem {
      padding: 50px;
      padding-bottom: 25px;
      position: relative;
      z-index: 15;
    }
    














/* --------------------------------------------------- */
/* ContactBanner                                       */
/* お問い合わせ情報表示用                              */
/* --------------------------------------------------- */

/* ContactBannerArea
--------------------------------------------------- */
.ContactBannerArea{
  padding: 20px 0;
  margin-bottom: 0!important;
  z-index: 10;
}
.ContactBannerArea.bg-wagara:nth-last-of-type(1)::after{
  display: none;
}


    .ContactBannerArea .ContactHeading{
      text-align: center;
    }
            /* + + + + + レスポンシブ + + + + +  */
            
                /* bp2より狭いディスプレイ用 */
                body.rsbp-under-bp2 .ContactHeading .Main{
                  letter-spacing: 0;
                }




/* BannerParagraph (問い合わせ枠 専用)
--------------------------------------------------- */
.BannerParagraph.ContactBannerParagraph{
  margin: 0px auto 0;
}
.BannerParagraph.ContactBannerParagraph:before{
  z-index: -1;
  background: #e7bfd1;
  border: none;
  opacity: 0.375;
}
    .BannerParagraph.ContactBannerParagraph .inner{
      color: #fff;
      background: rgba(210,130,170,0.9);
      border: 2px solid;
      padding: 20px 30px;
    }
        .BannerParagraph.ContactBannerParagraph .inner > div{
          align-self: center;
          flex-grow: 1;
        }
        .BannerParagraph.ContactBannerParagraph .inner .ParagraphHeader{
          padding: 0.75em;
          background: #b66b8f;
          text-align: center;
          font-size: 137.5%;
        }
        .BannerParagraph.ContactBannerParagraph .inner .ParagraphContents{
        }
        .BannerParagraph.ContactBannerParagraph .inner .ParagraphFooter{
        }
            .BannerParagraph.ContactBannerParagraph dl,
            .BannerParagraph.ContactBannerParagraph dd{
              margin: 0
            }
            .BannerParagraph.ContactBannerParagraph .inner .Heading{
              margin-bottom: 0;
            }
            .BannerParagraph.ContactBannerParagraph .Button {
              color: #333;
              border-color: #fff;
              font-size: 100%;
            }
            .BannerParagraph.ContactBannerParagraph .Button:hover,
            .BannerParagraph.ContactBannerParagraph .Button:focus{
              color: #000;
              background: #fff;
              border-color: #777;
            }

            .BannerParagraph.ContactBannerParagraph .Number {
              font-size: 225%;
              font-weight: 500;
              margin: 0 0.1em;
            }

            /* + + + + + レスポンシブ + + + + +  */
                /* bp2より広いディスプレイ用 */
                body.rsbp-over-bp2 .BannerParagraph.ContactBannerParagraph .inner{
                  padding: 20px 30px;
                }
                body.rsbp-over-bp2 .BannerParagraph.ContactBannerParagraph .inner .ParagraphContents{
                  border-right: 1px solid rgba(255,255,255,0.5);
                  padding: 0 20px 0 30px;
                }
                body.rsbp-over-bp2 .BannerParagraph.ContactBannerParagraph .inner .ParagraphFooter{
                  padding-left: 30px;
                }
                body.rsbp-over-bp2 .BannerParagraph.ContactBannerParagraph .Button {
                  padding: 1.5em 1em;
                  min-width: 0;
                }
                /* bp2より狭いディスプレイ用 */
                body.rsbp-under-bp2 .BannerParagraph.ContactBannerParagraph{
                  margin: 10px auto;
                }
                body.rsbp-under-bp2 .BannerParagraph.ContactBannerParagraph .inner{
                  padding: 20px 10px;
                }
                body.rsbp-under-bp2 .BannerParagraph.ContactBannerParagraph .inner .ParagraphHeader{
                  margin-bottom: 20px;
                }
                body.rsbp-under-bp2 .BannerParagraph.ContactBannerParagraph .inner .ParagraphContents{
                  margin-bottom: 20px;
                }
                body.rsbp-under-bp2 .BannerParagraph.ContactBannerParagraph .Button {
                  padding: 1em 0.5em;
                  min-width: 17.5em;
                }







/* --------------------------------------------------- */
/* お客様の声                                          */
/* --------------------------------------------------- */

/* ReviewArea
--------------------------------------------------- */
.ReviewArea{
  padding-bottom: 30px;
}


/* ReviewBlock
--------------------------------------------------- */
.ReviewBlock{
}
    .ReviewBlock .BlockHeader{
      width: 250px;
      margin: 0 auto;
      position: relative;
      top: -50px;
      z-index: 10;
    }
    .ReviewBlock .BlockContents{
      position: relative;
      z-index: 5;
      overflow: hidden;
    }




    .ReviewBlock .Paragraph {
      overflow: hidden;
      flex-grow: 1;
      background-color: #eee;
      background-repeat: no-repeat, no-repeat;
      background-position: 50% 0%, 50% 0%;
      margin: 0 auto;
      width: 50%;
    }
        .ReviewBlock .Paragraph .ParagraphHeader{
        }
            .ReviewBlock .Paragraph .ParagraphHeader .Heading{
              margin: 0 auto;
              text-align: center;
              padding: 0.5em 1em;
              width: 15em;
              color: #fff;
              font-size: 125%;
              font-weight: 500;
              letter-spacing: 0.05em;
              border-radius: 0.5em;
            }
        /* リスト部分 */
        .ReviewBlock .Paragraph .ParagraphContents{
        }
            .ReviewBlock .Paragraph .ParagraphContents ul{
              list-style: none;
              margin: 0 auto;
              padding: 0;
            }
            .ReviewBlock .Paragraph .ParagraphContents ul li{
              border-radius: 0.5em;
              padding: 1.5em 1.5em;
              margin:  0 0 0.5em;
              background: #fff;
              border: 2px solid rgba(129,171,117,1);
              line-height: 1.5;
            }
            .ReviewBlock .Paragraph .ParagraphContents ul li,
            .ReviewBlock .Paragraph .ParagraphContents ul li *{
              vertical-align: middle;
              
            }
            .ReviewBlock .Paragraph .ParagraphContents ul li .Icon{
              margin-right: 0.5em;
            }
            .ReviewBlock .Paragraph .ParagraphContents ul li .Icon img{
              width: 2em;
            }

            .ReviewBlock .Paragraph .ParagraphContents ol li a{
              vertical-align: inherit;
              text-decoration: underline;
            }



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

                /* bp2より広いディスプレイ用 */
                .ReviewBlock .BlockContents {
                  margin-top: -225px;
                }
                .ReviewBlock .BlockContents .Paragraph{
                  padding: 20px;
                  padding-top: 300px;
                  border-radius: 1.5em;
                }
                .ReviewBlock .BlockContents  ul{
                  column-count: 3;
                }
                .ReviewBlock .BlockContents  ul li{
                  break-inside: avoid;
                }