@charset "UTF-8";
/* CSS Document */
#mv .mvInr h1 { max-width: 1200px; margin: 0 auto; }
#mv .mvInr h1 img { max-width: 100%; }

.mvInfo { background: rgba(255, 255, 255, 0.5); width: 100%; display: table; padding: 30px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; }
.mvInfo .L { display: table-cell; vertical-align: middle; }
.mvInfo .L img { max-width: 100%; padding: 3%; }
.mvInfo .R { display: table-cell; vertical-align: middle; }

.bg01 { /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ecd6d8+0,ffffff+100 */ background: #ecd6d8; /* Old browsers */ background: -moz-linear-gradient(top, #ecd6d8 0%, #ffffff 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, #ecd6d8 0%, #ffffff 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, #ecd6d8 0%, #ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ecd6d8', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */ padding: 60px 0; margin-bottom: 0; }

.mvInfo .R .txt { font-size: 2.0rem; margin-bottom: 20px; }
.mvInfo .R .txt span { font-size: 1.3em; font-weight: 600; }

.box02 .scInr { background: url(../images/img_03.png) no-repeat top left; padding: 0 0 100px; }
.box02 h2 { margin-bottom: 60px; }
.box02 h2 img { width: 100%; }
.box02 p { font-size: 2.0rem; line-height: 2 !important; padding: 30px; float: right; width: 70%; background: rgba(255, 255, 255, 0.8); -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; }

@media screen and (max-width: 767px) { #mv .mvInr h1 { padding: 0 3%; }
  .mvInfo .L { display: block; text-align: center; }
  .mvInfo .R { display: block; text-align: center; }
  .mvInfo .R img { max-width: 100%; }
  .mvInfo .R .txt { font-size: 1.5rem; }
  .box02 p { font-size: 1.3rem; float: none; width: auto; margin: 0 3%; }
  .box01 { margin-bottom: 0; padding: 0 !important; } }
/* ========================================================================================================================
　sc01
========================================================================================================================= */
#sc01 { padding: 80px 0; background: url(../images/bg_01.jpg) no-repeat top center; background-color: #fcf4e0; margin-bottom: 0; }
#sc01 .advantage { width: 1000px; position: relative; margin: 50px auto; }
#sc01 .advantage ul li { margin-bottom: 60px; }
#sc01 .advantage dl dt img { max-width: 100%; vertical-align: bottom; }
#sc01 .advantage dl dd { overflow: hidden; width: 100%; padding: 3%; background-color: rgba(255, 255, 255, 0.6); }
#sc01 .advantage dl dd p { font-size: 15px; }
#sc01 .advantage dl dd .info { width: 75%; }
#sc01 .advantage dl dd .icon { width: 23%; text-align: center; }
#sc01 .advantage dl dd .flow { margin-bottom: 10px; }
#sc01 .advantage dl dd .flow span { display: inline-block; border: 1px solid #000; padding: 5px 10px; margin-right: 10px; width: 200px; text-align: center; }
#sc01 .advantage dl dd .flow02 span { background: #9a37a5; color: #FFF; }
#sc01 .advantage dl dd .flow em { display: inline-block; border: 1px solid #000; padding: 5px 10px; font-style: normal; margin-right: 10px; margin-bottom: 10px; }
#sc01 .advantage dl dd .flow i { display: inline-block; margin-right: 10px; font-weight: 600; }
#sc01 .advantage dl dd p.fltL { width: 23%; }
#sc01 .advantage .last .info { width: 53%; }

@media screen and (max-width: 767px) { #sc01 .advantage { background-size: 50%; width: 100%; margin: 0 auto; }
  #sc01 .advantage dl dd p { font-size: 13px; }
  #sc01 .advantage dl dt { float: none; width: 100%; }
  #sc01 .advantage dl dd { float: none; width: 100%; }
  #sc01 .advantage dl dd .info, #sc01 .advantage dl dd .icon { width: 100%; }
  #sc01 .advantage dl dd .flow span { display: block; width: auto; margin-bottom: 10px; }
  #sc01 .advantage dl dd p.fltL { width: 100%; text-align: center; }
  #sc01 .advantage .last .info { width: 100%; } }
/* ========================================================================================================================
　sc02
========================================================================================================================= */
#sc02 { text-align: center; padding: 80px 0; background: url(../images/bg_02.jpg) no-repeat center top; }
#sc02 h3 { font-family: 'Yu Mincho', YuMincho, "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝"; font-size: 2.2rem; padding: 15px 10px; text-align: center; border-bottom: 1px solid #7b6835; border-top: 1px solid #7b6835; color: #7b6835; margin-bottom: 30px; }
#sc02 h3 + p { text-align: left; }

.productList { overflow: visible !important; }
.productList .ph { text-align: center; margin-bottom: 10px; position: relative; z-index: 1; }
.productList .ph img { width: 100%; position: relative; z-index: 1; }
.productList .ph .no { display: inline-block; position: absolute; z-index: 2; left: 15px; top: -5px; }
.productList .ph .no img { width: auto; }
.productList li .info h4 { font-size: 1.7rem; text-align: center; margin-bottom: 15px; line-height: 1.5; position: relative; }
.productList li .info h4 i { color: #9a37a5; font-weight: 600; position: absolute; left: 50%; font-size: 1.5em; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); }
.productList li .info h4 + p { font-size: 1.5rem; margin-bottom: 10px; text-align: center; }
.productList li .info .price p { font-size: 11px; display: table; width: 100%; margin-bottom: 10px; font-weight: 600; }
.productList li .info .price p span { display: table-cell; vertical-align: middle; }
.productList li .info .price p .before { border: 1px solid #9a37a5; padding: 5px 10px; height: 40px; }
.productList li .info .price p .off { border: 1px solid #9a37a5; background: #9a37a5; padding: 5px 10px; color: #FFF; font-size: 2rem; text-align: center; }
.productList li .info .price p .after { color: #9a37a5; padding: 5px 10px; font-size: 3.4rem; font-family: 'Yu Mincho', YuMincho, "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝"; font-weight: 600; }
.productList li .info .price p span em { font-style: normal; font-size: 0.7em; }

#loopSlider { background: url(../images/flowers.jpg) left top repeat-x; background-size: cover; height: 244px; width: 100%; margin-bottom: 60px; }

@media screen and (max-width: 767px) { #sc02 .intro { width: 100%; }
  .productList li { float: none; width: 100%; }
  #loopSlider { display: none; } }
/* ========================================================================================================================
　sc03
========================================================================================================================= */
#sc03 { background: url(../images/bg_03.jpg) repeat; padding: 65px 0 0 0; overflow: hidden; margin-bottom: 0; }
#sc03 .txtBox { background: rgba(255, 255, 255, 0.6); padding: 3%; max-width: 800px; margin: 0 auto 60px; text-align: center; }

.bg03 { background: url(../images/bg_06.jpg); padding: 60px 0; }
.bg03 ul li { background: #FFF; padding: 0 5% 5%; border-top: 5px solid #a29571; margin-bottom: 45px; }
.bg03 ul li h3 { margin-bottom: 20px; }
.bg03 ul li h3 img { max-width: 100%; }
.bg03 ul.indList li { border-top: none; background: none; margin-bottom: 10px; padding: 0 0 10px 1em; overflow: hidden; }
.bg03 ul.indList li span { font-weight: bold; font-size: 1.1em; }

@media screen and (max-width: 767px) { #sc03 { padding: 0px 20px; }
  #sc03 img { display: block; width: 100%; }
  #sc03 h2 { font-size: 2rem; margin: 20px auto 0 auto; }
  .bg03 .last .indList li::before { content: none; }
  .bg03 .last .indList li .fltImgR { display: block; } }
/* ========================================================================================================================
　sc04
========================================================================================================================= */
#sc04 { padding: 80px 0 40px; text-align: center; background: url(../images/cont4_bg.png) no-repeat bottom; margin-bottom: 0; }
#sc04 ul.voice { width: 1000px; position: relative; margin: 50px auto; text-align: left; }
#sc04 ul.voice li { margin-bottom: 40px; background-color: #fcf4e0; padding: 30px; box-shadow: 0 0 0 1px #c8bc9c, 0 0 0 5px #fcf4e0; }
#sc04 ul.voice dl { overflow: hidden; }
#sc04 ul.voice dl dt { float: left; width: 27%; }
#sc04 ul.voice dl dd { float: left; width: 72%; }
#sc04 ul.voice dl dd h3 { font-family: 'Yu Mincho', YuMincho, "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝"; font-size: 2rem; color: #7b6835; margin-bottom: 10px; }
#sc04 ul.voice dl dd .name { font-size: 1.4rem; margin-top: 10px; }
#sc04 ul.voice dl dd .name span { display: block; color: #7b6835; }

@media screen and (max-width: 767px) { #sc04 ul.voice { width: 90%; }
  #sc04 ul.voice dl dt { float: none; width: 100%; text-align: center; margin-bottom: 10px; }
  #sc04 ul.voice dl dd { float: none; width: 100%; } }
/* ========================================================================================================================
　sc01
========================================================================================================================= */
#sc05 { padding: 80px 0; text-align: center; background-color: #fcf4e0; background: url(../images/bg_04.jpg) no-repeat center bottom; margin-bottom: 0; }
#sc05 .advantage { background-color: rgba(255, 255, 255, 0.6); width: 1000px; position: relative; margin: 50px auto; }
#sc05 .flow { width: 1000px; background: #FFF; padding: 5%; border-top: 5px solid #a29571; margin-bottom: 45px; }
#sc05 .flow h3 { font-family: 'Yu Mincho', YuMincho, "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝"; font-size: 3.0rem; color: #7b6835; margin-bottom: 60px; }
#sc05 .flow ul { overflow: visible; }
#sc05 .flow ul li { position: relative; }
#sc05 .flow ul li .img { border: none; }
#sc05 .flow ul li::after { content: ""; display: block; width: 55px; height: 44px; background: url(../images/icon_arrow.png); position: absolute; right: -25px; top: 20%; }
#sc05 .flow ul li.last::after { content: none; }
#sc05 .flow ul li h4 { color: #7b6835; font-size: 1.8rem; margin-bottom: 20px; line-height: 1.3; }

@media screen and (max-width: 767px) { #sc01 { padding: 15px; }
  #sc05 .flow { width: 100%; }
  #sc05 .flow ul li { float: none; width: 100%; }
  #sc05 .flow ul li::after { content: none; } }
/* ========================================================================================================================
　sc06
========================================================================================================================= */
#sc06 { padding: 80px 0; text-align: center; background-color: #fcf4e0; background: url(../images/bg_05.png) no-repeat center top; }
#sc06 h3 { font-family: 'Yu Mincho', YuMincho, "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝"; line-height: 1.7; margin-bottom: 40px; }
#sc06 .clm3 li img { max-width: 100%; }

@media screen and (max-width: 767px) { #sc01 { padding: 15px; }
  #sc06 .clm3 li { float: none; width: 100%; } }
/* ========================================================================================================================
　footer
========================================================================================================================= */
footer#footer .copy { text-align: center; color: #FFF; background-color: #7b6835; padding: 20px 0; font-size: 1.4rem; }

.button { margin: 80px auto; text-align: center; }
.button img { max-width: 100%; }

@media only screen and (max-width: 767px) { .button { margin: 20px auto; text-align: center; } }
/*SP*/
@media only screen and (max-width: 800px) { #loopSlider { background: url(../lib/cmn_images/sample.jpg) left top repeat-x; background-size: contain; height: 250px; }
  #loopSlider2 { background: url(../lib/cmn_images/sample.jpg) left top repeat-y; height: 250px; } }
/*/*/