@charset "utf-8";

@import url(normalize.css);
@import url(all.css);
@import url(common_parts.css);
@import url(common.css);




/* color */
.d_brn { color:#432d22; }
.brn { color:#955125; }
.cam { color:#c58949; }
.d_bl { color:#143640; }
.blk { color:#0e161f; }
.crm { color:#fcf0d1; }
.whi { color:#fff; }
.lbr { color:#fdeecf; }

/* back color */
.back_bk{ background:#000; }
.back_pi{ background:#eb738f; }
.back_lpi{ background:#f7baa5; }
.back_bl{ background:#0e6eb8; }
.back_org{ background:#ea591d; }
.back_cme{ background:#c99e2a; }
.back_brn{ background:#7f4e20; }
.back_nev{ background:#161b61; }
.back_blk { background:#221814; }
.back_gry { background:#c9c9ca; }
.back_grn { background:#006834; }
.back_wine { background:#a11251; }
.back_lgrn { background:#9dbb87; }
.back_pp { background:#920681; }
.back_red { background:#ea000e; }

/* common parts */
.inner { max-width: 120rem; padding:0 2rem; margin:0 auto; }
h2 { font-size: 4rem; text-align:center; font-weight: bold; letter-spacing:5px; line-height:1.5; }
h2 span { display:block; font-size: 2.6rem; font-family:"游明朝", YuMincho, "ヒラギノ明朝 ProN W6", "Hiragino Mincho ProN", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", "Times New Roman", Meiryo, serif; letter-spacing:0; }
#concept,#service,#feature,#pop,#voice,#category { margin-top:10rem; }
div:after,ul:after { display:none; }
p { margin:0; }
@media screen and (max-width:414px){
	#concept,#service,#feature,#pop,#voice,#category { margin-top: 5rem; }
}
@media screen and (max-width: 375px){
	h2 { font-size: 3.4rem; }
	h2 span { font-size: 2rem; }
}
.width-max { margin:0 calc(50% - 50vw); }
body { background:#c3af96; }

/* main_inner */
.main_inner { max-width:100%; margin:0; }

/* header */
#header {  }
#header .inner { width:100%; max-width:1100px; margin:0 auto; padding:0; }
#header h1:after { content:""; display:block; clear:both; }

/* mv */
#mv {}
#mv .inner {  }
#mv .inner .topimg { display:flex; width:100%; align-items:center; padding:3rem 0; }
#mv .inner .topimg li { text-align:center; }
#mv .inner .topimg .girl img { max-height:60rem; }
#mv .inner .topimg .copy { text-align:center; font-weight: bold; font-size:2.4porem; letter-spacing:5px; padding:3rem 0; color:#fff; line-height:3; }
@media screen and (max-width:414px){
	section { margin-bottom: 0; }
    #mv .inner .topimg { display:block; padding:0 2rem; }
	#mv .inner .topimg .copy { font-size:2rem; line-height:normal; }
}

/* catch */
#catch {  }
#catch .inner {  }
#catch .top-img { display:flex; }
#catch .top-img img { width:100%; height:auto; }
#catch p { color:#fff; font-weight: bold; font-size: 3rem; text-align:center; letter-spacing:1px;}
#catch .catch-text { margin: 3rem 0; }

@media screen and (max-width:414px){
    #catch {  }
    #catch .inner { padding:0; }
    #catch .top-img { display:block; }
    #catch p  { font-size: 2.4rem; }
}



/* pickup */
#pickup {  }
#pickup .inner {  }
#pickup .item ul { width:85%; margin:0 auto; display:flex; justify-content:space-between; }
#pickup .item ul li { width:48%; }
#pickup .item ul li.text-area { padding:2rem 0; text-align:center; line-height:1.5; }
#pickup .item ul li.text-area .title { font-size:2rem; font-weight: bold; margin-bottom: 1rem; text-align:center; color:#fff; }
#pickup .item ul li.text-area .title span { display:block; }
#pickup .item ul li.text-area .text { margin-bottom:5rem; color:#fff; }
#pickup .item ul li.text-area .btn a { border:solid 5px #fff; color:#fff; font-weight:bold; font-size: 2rem; padding:1rem 2rem; border-radius:5px; }
@media screen and (max-width:768px){
    #pickup .inner { padding:0; }
	#pickup .item ul { display:block; width:100%; }
	#pickup .item ul li { width:100%; }
	#pickup .item ul li.text-area { width:85%; padding:0; margin:2rem auto 0; }
	#pickup .item ul li.text-area .title { font-size: 2rem; letter-spacing:0; }
	#pickup .item ul li.text-area .text { margin-bottom:3rem; }
	#pickup .item ul li.text-area .text span { font-size: 1.8rem; margin-bottom: 1rem; }
    #pickup .item ul li.text-area .btn a { border:solid 3px #fff; }
	.owl-carousel .owl-stage-outer { overflow:visible; }
}

/* #pickup owl-carousel */
#pickup .owl-carousel { margin-top: 3rem; position:relative; }

/* slide nav */
#pickup .owl-nav { display: flex; }
#pickup .owl-nav button { position:absolute; top:50%; transform:translate(0,-50%); color:#fff; font-weight: normal; font-size:8rem; z-index:10; }
#pickup .owl-nav .owl-prev { left:10px; }
#pickup .owl-nav .owl-next { right:10px; }
.owl-nav button span { padding:5rem 2rem; }
@media screen and (max-width:768px){
	#pickup .owl-nav button { font-size:8rem; }
}
@media screen and (max-width:414px){
	#pickup .owl-nav button { top:28%; font-size: 8rem; }	
}
@media screen and (max-width:320px){
	#pickup .owl-nav button { top:25%; font-size:6rem; }	
}

/* slide dot */
#pickup .owl-dots { margin: 2rem 0 3rem; display:block; text-align:center; }
#pickup .owl-dots button { margin:0 0.5rem; }
#pickup .owl-dots button span { width:1.5rem; height:1.5rem; display:block; }
#pickup .owl-dots button.owl-dot { background:#ddd; }
#pickup .owl-dots button.owl-dot.active { background:#663300; }
@media screen and (max-width:768px){
	#pickup .owl-dots { margin:3rem 0; }
}

/* banner */
#banner {  }
#banner .bnr { margin: 3rem 0; position:relative; }
#banner .txt { text-align:center; color:#fff; font-weight: bold; font-size:3rem; letter-spacing:10px; }
#banner .kome { text-align:center; color:#fff; }
@media screen and (max-width:414px){
    #banner .txt { font-size:1.8rem; letter-spacing:normal; } 
}

/* link */
#link { margin-bottom: 5rem; }
#link .brand-area { text-align:center; color:#fff; margin-top:4rem; }
#link .brand-area p { text-align:center; margin:2rem 0; line-height:1.5; }
#link .insta { text-align:center; }
#link .insta p { text-align:center; color:#fff; font-size: 2.4rem; font-weight: bold; }
#link .insta .fa-instagram { background:radial-gradient(at 20% 120%,orange, #f15a4d 25%, #f13f79 55%, #9933ff 100%) no-repeat;
  border-radius:20%; }
#link .oekaki { text-align:center; display:flex; justify-content:center; }
#link .oekaki img { margin-left:2rem; width:5rem; height:5rem; }

/* footer */
#footer { background: #663300; padding: 5rem 0 4rem; }
#footer .inner { position: relative; width: 100%; max-width: 1100px; margin: 0 auto; padding: 2rem; }
.footer_logo { position: static; bottom: 2rem; max-width: inherit; text-align: center; }
#footer-copy { position: inherit; bottom: 0; width: 100%; text-align: center; }
.footer_logo_text { width: 100%; max-width: 50rem; margin: 0 auto 3rem; }