@charset "UTF-8";
/*-----------------
reset
-------------------*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { border: 0; font-size: 100%; font: inherit; vertical-align: baseline; margin: 0; padding: 0; }

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }

body { line-height: 1; }

ol, ul { list-style: none; }

blockquote, q { quotes: none; }

blockquote:before, blockquote:after, q:before, q:after { content: none; }

table { border-collapse: collapse; border-spacing: 0; }

body { font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; color: #261b18; font-size: 14px; line-height: 1.6em; }

@media screen and (max-width: 768px) { body { font-size: 16px; line-height: 1.6em; } }

img, object { max-width: 100%; height: auto; }

.image { font-size: 0; line-height: 0; }

.cb { clear: both; }

.pc { display: inline-block; }

@media screen and (max-width: 768px) { .pc { display: none; } }

.sp { display: none; }

@media screen and (max-width: 768px) { .sp { display: inline-block; } }

.inner { width: 1024px; margin: 0 auto; position: relative; }

@media screen and (max-width: 1024px) { .inner { width: auto; } }

.cv a { display: inline-block; border-radius: 10px; padding: 10px 15px; line-height: 1.4em; transition: 0.3s; }

.cv a br { display: none; }

@media screen and (max-width: 768px) { .cv a br { display: inherit; } }

@media screen and (max-width: 768px) { .cv a { display: block; text-align: center; line-height: 1.4em; padding: 10px 20px 10px 10px !important; font-size: 18px !important; line-height: 1.4em !important; } }

.cv a span { display: inline-block; position: relative; }

.cv a span:after { content: ""; display: inline-block; width: 0; height: 0; border: 8px solid transparent; border-left: 8px solid #fff; margin-left: 5px; position: relative; top: 3px; }

@media screen and (max-width: 768px) { .cv a span:after { margin: auto; border: 8px solid transparent !important; border-left: 8px solid #fff !important; position: absolute !important; right: -25px !important; top: 50% !important; margin-top: -8px !important; } }

.cv a:link, .cv a:visited { color: #fff; background: #f03755; }

.cv a:hover, .cv a:active { color: #fff; background: #ff6680; }

#header .inner .logo { position: absolute; left: 0; top: 20px; font-size: 0; line-height: 0; }

@media screen and (max-width: 1024px) { #header .inner .logo { left: 10px; } }

@media screen and (max-width: 768px) { #header .inner .logo { top: 10px; } }

@media screen and (max-width: 480px) { #header .inner .logo { width: 140px; top: 10px; } }

#header .inner .cv { position: absolute; right: 0; top: 20px; }

@media screen and (max-width: 1024px) { #header .inner .cv { right: 10px; } }

@media screen and (max-width: 768px) { #header .inner .cv { display: none; } }

#header .inner .cv a { box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); }

#header #mv { font-size: 0; line-height: 0; }

#header #mv img { width: 100%; height: auto; }

#header h1 { padding: 35px; font-size: 0; line-height: 0; text-align: center; }

@media screen and (max-width: 1100px) { #header h1 { padding: 20px 0; } }

#header h1 span { position: relative; display: inline-block; }



@media screen and (max-width: 1100px) { #header h1 img { width: 80%; height: auto; }
  #header h1 span { margin-left: 0; }
  #header h1 span:after { right: 20px; top: -65px; width: 63px; height: 64px; background-size: 100% auto; } }

#header .lead { background: #fceef2; text-align: center; padding: 40px 0; }

@media screen and (max-width: 768px) { #header .lead { padding: 20px 10px; } }

@media screen and (max-width: 480px) { #header .lead { text-align: left; } }

#header .lead p { font-size: 18px; line-height: 1.8em; font-weight: bold;  }

@media screen and (max-width: 768px) { #header .lead p { font-size: 16px; line-height: 1.8em; margin-bottom: 10px; } }

#header .lead p strong { background: linear-gradient(transparent 60%, #ffe325 60%); }

#header .lead .cv a { font-size: 26px; line-height: 1.4em; font-weight: bold; padding: 20px 20px 20px 40px; }

#header .lead .cv a span:after { border: 13px solid transparent; border-left: 13px solid #fff; margin-left: 20px; }

.box01 { background: #fff; width: 498px; min-height: 440px; float: left; margin-bottom: 28px; }

@media screen and (max-width: 1024px) { .box01 { width: calc(50% - 14px); } }

@media screen and (max-width: 768px) { .box01 { width: auto; float: none; clear: both; min-height: 0; margin-right: auto !important; margin-bottom: 10px !important; }
  .box01 .image img { width: 100%; height: auto; } }

.box01:nth-of-type(1), .box01:nth-of-type(3) { margin-right: 28px; }

.box01:nth-of-type(4) { margin-bottom: 50px; }

.box01 .text { padding: 20px 20px 0; }

@media screen and (max-width: 768px) { .box01 .text { padding: 20px 10px; } }

.box01 .text h3 { font-weight: bold; font-size: 20px; line-height: 1.6em; margin-bottom: 10px; }

@media screen and (max-width: 768px) { .box01 .text h3 { font-size: 18px; line-height: 1.4em; } }

.box02 { border-top: 10px solid #ed7994; background: #fff; clear: both; }

.box02 h2 { margin-bottom: 20px; }

@media screen and (max-width: 768px) { .box02 h2 { margin-bottom: 10px; } }

.box02 .box-inner { padding: 20px; position: relative; overflow: hidden; }

@media screen and (max-width: 1024px) { .box02 .box-inner { padding: 10px; } }

.box02 .box-inner p { margin-bottom: 20px; }

@media screen and (max-width: 1024px) { .box02 .box-inner p { margin-bottom: 10px; } }

.box02 .box-inner .image:nth-of-type(3) { position: absolute; right: -5px; top: 0; }

@media screen and (max-width: 768px) { .box02 .box-inner .image:nth-of-type(3) { position: relative; top: auto; margin-right: -15px; } }

.box03 { background: #fff; border-radius: 20px; margin-bottom: 40px; position: relative; }

@media screen and (max-width: 768px) { .box03 { margin-bottom: 15px; border-radius: 10px; } }

.box03:after { content: ""; display: block; position: absolute; left: 30px; top: -15px; width: 428px; height: 92px; background: url(../img/sec02-01.png) no-repeat left top; }

@media screen and (max-width: 768px) { .box03:after { width: 214px; height: 46px; background-size: auto 100%; top: -10px; left: 10px; } }

.box03 .box-inner { padding: 110px 30px 30px; zoom: 1; overflow: hidden; }

@media screen and (max-width: 768px) { .box03 .box-inner { padding: 45px 10px 20px; } }

.box03 .box-inner .image { width: 455px; float: left; margin-right: 30px; }

@media screen and (max-width: 1024px) { .box03 .box-inner .image { width: 40%; } }

@media screen and (max-width: 768px) { .box03 .box-inner .image { width: auto; float: none; margin: auto; margin-bottom: 20px; }
  .box03 .box-inner .image img { width: 100%; height: auto; } }

.box03 .box-inner .image img:nth-of-type(2) { margin-top: 20px; }

@media screen and (max-width: 768px) { .box03 .box-inner .image img:nth-of-type(2) { display: none; } }

.box03 .box-inner .text { zoom: 1; overflow: hidden; }

.box03 .box-inner .text h3 { font-weight: bold; font-size: 24px; line-height: 1.4em; border-bottom: 1px solid #ee5c7e; color: #ee5c7e; padding-bottom: 5px; margin-bottom: 10px; }

@media screen and (max-width: 768px) { .box03 .box-inner .text h3 { font-size: 18px; line-height: 1.4em; } }

.box03 .box-inner .text p { margin-bottom: 1.5em; }

.box03 .box-inner .text p:last-child { margin-bottom: 0; }

.box03:nth-of-type(2):after { background-image: url(../img/sec02-02.png); }

.box03:nth-of-type(2) .box-inner .text h3 { color: #88a306; border-color: #88a306; }

.box03:nth-of-type(3):after { background-image: url(../img/sec02-03.png); }

.box03:nth-of-type(3) .box-inner .text h3 { color: #f7942b; border-color: #f7942b; }

.box03:nth-of-type(4):after { background-image: url(../img/sec02-04.png); }

.box03:nth-of-type(4) .box-inner .text h3 { color: #60a7cf; border-color: #60a7cf; }

.box04 { border-top: 10px solid #ed7994; background: #fff; clear: both; }

.box04 .box-inner { padding: 25px 30px 30px; position: relative; overflow: hidden; }

@media screen and (max-width: 768px) { .box04 .box-inner { padding: 10px 10px 20px; } }

.box04 .box-inner .cv { position: absolute; right: 30px; top: 25px; }

@media screen and (max-width: 1024px) { .box04 .box-inner .cv { position: relative; right: auto; top: auto; text-align: center; } }

.box04 .box-inner h2 { margin-bottom: 40px; }

@media screen and (max-width: 768px) { .box04 .box-inner h2 { margin-bottom: 10px; }
  .box04 .box-inner h2 span { display: block; text-align: center; } }

.box04 .box-inner h2 img { vertical-align: middle; margin-right: 20px; }

@media screen and (max-width: 768px) { .box04 .box-inner h2 img { width: 124px; height: auto; display: block; margin: 0 auto 10px; } }

.box04 .box-inner ul { text-align: center;  }

@media screen and (max-width: 768px) { .box04 .box-inner ul { margin-bottom: 20px; } }

.box04 .box-inner ul li { width: 220px; display: inline-block; color: #614c3f; }

@media screen and (max-width: 768px) { .box04 .box-inner ul li { width: auto; display: block; clear: both; margin-bottom: 10px; } }

.box04 .box-inner ul li .image { margin-bottom: 10px; }

.box04 .box-inner ul li:nth-of-type(1) { position: relative; margin-right: 60px; }

@media screen and (max-width: 1024px) { .box04 .box-inner ul li:nth-of-type(1) { margin-right: 30px; } }

@media screen and (max-width: 768px) { .box04 .box-inner ul li:nth-of-type(1) { margin-right: auto; } }

.box04 .box-inner ul li:nth-of-type(1):after { content: ""; width: 32px; height: 32px; background: url(../img/sec02-plus.png) no-repeat; display: block; position: absolute; right: -48px; top: 25%; }

@media screen and (max-width: 1024px) { .box04 .box-inner ul li:nth-of-type(1):after { right: -32px; } }

@media screen and (max-width: 768px) { .box04 .box-inner ul li:nth-of-type(1):after { display: none; } }

.box04 .box-inner .area01 { background: #f2a1b4; padding: 15px 20px; color: #fff;margin-top:30px; }

@media screen and (max-width: 1024px) { .box04 .box-inner .area01 { padding: 10px; margin-bottom: 10px;;margin-top:15px; } }

.box05 { background: #fff; margin-bottom: 20px; }

@media screen and (max-width: 768px) { .box05 { margin-bottom: 10px; } }

.box05:last-child { margin-bottom: 0; }

.box05 .box-inner { zoom: 1; overflow: hidden; }

.box05 .box-inner .image { width: 475px; float: left; }

@media screen and (max-width: 1024px) { .box05 .box-inner .image { width: 40%; } }

@media screen and (max-width: 768px) { .box05 .box-inner .image { width: auto; float: none !important; clear: both !important; }
  .box05 .box-inner .image img { width: 100%; height: auto; } }

.box05 .box-inner .text { zoom: 1; overflow: hidden; padding: 30px; }

@media screen and (max-width: 1024px) { .box05 .box-inner .text { padding: 20px 10px; } }

.box05 .box-inner .text h3 { color: #614c3f; border-bottom: 1px solid #614c3f; font-size: 24px; line-height: 1.6em; font-weight: bold; margin-bottom: 15px; padding-bottom: 5px; white-space: nowrap; }

@media screen and (max-width: 1024px) { .box05 .box-inner .text h3 { white-space: normal; } }

@media screen and (max-width: 768px) { .box05 .box-inner .text h3 { font-size: 18px; line-height: 1.4em; } }

.box05:nth-child(odd) .box-inner .image { float: right; }

#sec01 { background: #f8f2e6; padding-bottom: 30px; }

@media screen and (max-width: 768px) { #sec01 { padding-bottom: 20px; } }

#sec01 .sec-ttl { text-align: center; font-size: 0; line-height: 0; background: #ed7994; padding: 20px 0; margin-bottom: 40px; }

@media screen and (max-width: 1024px) { #sec01 .sec-ttl { padding: 20px 10px; } }

@media screen and (max-width: 768px) { #sec01 .sec-ttl { margin-bottom: 20px; } }

@media screen and (max-width: 1024px) { #sec01 .inner { padding: 0 10px; } }

#sec02 { background: url(../img/sec02-bg.jpg) center top; background-size: cover; padding-bottom: 70px; }

@media screen and (max-width: 768px) { #sec02 { padding-bottom: 20px; } }

#sec02 .sec-ttl { text-align: center; padding: 50px 0; }

@media screen and (max-width: 1024px) { #sec02 .sec-ttl { padding: 40px 10px; } }

@media screen and (max-width: 768px) { #sec02 .sec-ttl { padding: 20px 10px; } }

@media screen and (max-width: 1024px) { #sec02 .inner { padding: 0 10px; } }

#sec03 { background: #f8f2e6; padding-bottom: 50px; }

@media screen and (max-width: 768px) { #sec03 { padding-bottom: 20px; } }

#sec03 .sec-ttl { padding: 50px 0 40px; }

@media screen and (max-width: 768px) { #sec03 .sec-ttl { padding: 20px 0 10px; } }

@media screen and (max-width: 1024px) { #sec03 .inner { padding: 0 10px; } }


#footer .cv { text-align: center; padding: 60px 0 50px; }

@media screen and (max-width: 1024px) { #footer .cv { padding: 20px 10px; } }

#footer .cv a { font-size: 26px; line-height: 1.4em; font-weight: bold; padding: 20px 20px 20px 40px; }

#footer .cv a span:after { border: 13px solid transparent; border-left: 13px solid #fff; margin-left: 20px; }

@media screen and (max-width: 1024px) { #footer .inner { padding: 0 10px 20px; } }

#footer h3 { background: #eeeeee; padding: 5px; font-weight: bold; text-align: center; margin-bottom: 10px; }

@media screen and (max-width: 1024px) { #footer h3 { font-size: 14px; line-height: 1.4em; } }

#footer .note { font-size: 11px; line-height: 1.6em; margin-bottom: 60px; }

@media screen and (max-width: 1024px) { #footer .note { margin-bottom: 0; } }

#footer .footer-inner { padding: 30px 0; }

@media screen and (max-width: 1024px) { #footer .footer-inner { padding: 20px 0 0; } }

#footer .footer-inner .inner { position: relative; }

#footer .footer-inner .inner .tel { position: absolute; right: 0; top: 0; }

@media screen and (max-width: 1024px) { #footer .footer-inner .inner .tel { position: relative; text-align: center; margin-bottom: 10px; } }

@media screen and (max-width: 480px) { #footer .footer-inner .inner .tel img { width: 205px; height: auto; } }

#footer .footer-inner .logo { margin-bottom: 15px; font-size: 0; line-height: 0; }

@media screen and (max-width: 1024px) { #footer .footer-inner .logo { text-align: center; margin-bottom: 10px; } }

@media screen and (max-width: 480px) { #footer .footer-inner .logo img { width: 209px; height: auto; } }

#footer .footer-inner .time { margin-bottom: 15px; font-size: 0; line-height: 0; }

@media screen and (max-width: 1024px) { #footer .footer-inner .time { text-align: center; margin-bottom: 10px; } }

@media screen and (max-width: 480px) { #footer .footer-inner .time img { width: 137px; height: auto; } }

#footer .footer-inner p { font-size: 10px; line-height: 1.4em; }

#totop { position: fixed; right: 30px; bottom: 30px; z-index: 9999; cursor: pointer; display: none; }

#totop img { cursor: pointer; }

@media screen and (max-width: 768px) { #totop { width: 30px; height: 30px; right: 10px; bottom: 10px; } }

.catalog_btn{text-align:center;padding:30px 0 0;}

@media screen and (max-width: 768px) { 
.catalog_btn{text-align:center;padding:30px 20px 0;}
}

.catalog_btn2{text-align:center;padding:30px 0 0;}

@media screen and (max-width: 768px) { 
.catalog_btn2{text-align:center;padding:10px 20px 0;}
}