@charset "utf-8";
@import url(https://fonts.googleapis.com/css?family=Vollkorn);
@import url(https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap);

/*--------------------------------------------------
RESET CSS 
---------------------------------------------------*/
html, body, header, hgroup, nav, section, menu, article, aside, footer,
div, dl, dt, dd, p, ol, ul, li, iframe, img, figure, figcaption, audio, video, canvas, details, time, mark,
table, thead, tbody, tfoot, tr, th, td, caption, fieldset, form, label, legend, summary, 
em, span, object, blockquote, pre, abbr, address, cite, code, del, dfn, ins, kbd, q, samp, strong, sub, sup, var, b, i
{ margin:0; padding:0; border:0; outline:0; background:transparent;
font-family: '-apple-system', 'BlinkMacSystemFont','Hiragino Sans','Hiragino Kaku Gothic ProN',"segoe ui",'游ゴシック  Medium','メイリオ', Meiryo,'ＭＳ Ｐゴシック','MS PGothic',sans-serif;
line-height:1.7; color:#000; letter-spacing:0; font-size:1.7rem; font-weight:300; }
header, hgroup, nav, section, menu, article, aside, footer, figure, figcaption, details, form { display:block; }

* { -webkit-appearance: none; }

html { font-size:62.5%; width:100%; height:100%; box-sizing:border-box; -webkit-box-sizing:border-box; overflow-y:scroll; }
body { font-size:1.6rem; width:100%; height:100%; position:relative; -webkit-text-size-adjust:100%; min-width:1040px; box-sizing:border-box; -webkit-box-sizing:border-box; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body > div { min-width:1040px; position:relative; }
ul { list-style:none; padding:0; margin:0; }
li { list-style:none; padding:0; margin:0; }
img { vertical-align:bottom; }
em { font-style:normal; }
input,button { font-family: '-apple-system', 'BlinkMacSystemFont','Hiragino Sans','Hiragino Kaku Gothic ProN',"segoe ui",'游ゴシック  Medium','メイリオ', Meiryo,'ＭＳ Ｐゴシック','MS PGothic',sans-serif; font-weight:300; }

h1, h2, h3, h4, h5, h6 { line-height:1.5; margin:0; padding:0; border:0; outline:0; background:transparent; font-size:1.6rem; font-weight:normal;
font-family: '-apple-system', 'BlinkMacSystemFont','Hiragino Sans','Hiragino Kaku Gothic ProN',"segoe ui",'游ゴシック  Medium','メイリオ', Meiryo,'ＭＳ Ｐゴシック','MS PGothic',sans-serif; font-weight:300; }
small { display:block; font-size:1.3rem; color:#fff; font-weight:bold; letter-spacing:-0.5px; background:#2b5f0d; text-align:center; padding:20px 0; }

a { color:#1F88E7; line-height:1.5; outline:0; text-decoration:none; transition: all 0.1s ease 0s; }
a:hover { color:#ea702f; text-decoration:none; }
span { transition: all 0.1s ease 0s; }

.spMenu { display:none; }
strong { font-weight:bold; }

.fadeUpT { opacity:0; }
.fadeInT { opacity:0; }
.boundUpT { opacity:0; }

/*--------------------------------------------------
CONTENT
---------------------------------------------------*/

.firstNavWrap { padding:100px 0 120px 0; text-align:center; background:#F9F8EE; }
.firstNavWrap h2 { margin:0 0 50px; font-size:3.8rem; font-weight:bold; color:#96514d; }
.firstNavmenu { border:solid #96514d; border-width:1px; display:flex; display:-webkit-flex; width:800px; margin:0 auto 0 auto; -moz-border-radius:0.6em; -khtml-border-radius:0.6em; -webkit-border-radius:0.6em; border-radius:0.6em; }
.firstNavmenu li { width:33.3%; border:solid #96514d; border-width:0 1px 0 0; }
.firstNavmenu li:first-child { -moz-border-radius:0.6em 0 0 0.6em; -khtml-border-radius:0.6em 0 0 0.6em; -webkit-border-radius:0.6em 0 0 0.6em; border-radius:0.6em 0 0 0.6em; }
.firstNavmenu li:last-child { border-width:0; -moz-border-radius:0 0.6em 0.6em 0; -khtml-border-radius:0 0.6em 0.6em 0; -webkit-border-radius:0 0.6em 0.6em 0; border-radius:0 0.6em 0.6em 0; }
.firstNavmenu li:first-child a { -moz-border-radius:0.5em 0 0 0.5em; -khtml-border-radius:0.5em 0 0 0.5em; -webkit-border-radius:0.5em 0 0 0.6em; border-radius:0.5em 0 0 0.5em; }
.firstNavmenu li:last-child a { -moz-border-radius:0 0.5em 0.5em 0; -khtml-border-radius:0 0.5em 0.5em 0; -webkit-border-radius:0 0.5em 0.5em 0; border-radius:0 0.5em 0.5em 0; }
.firstNavmenu li a { background:#fff; display:block; padding:20px 0; line-height:1.4; text-align:center; }
.firstNavmenu li a span { font-size:1.8rem; color:#96514d; font-weight:bold; line-height:1.4; display:inline-block; position:relative; padding:0 0 0 16px; }
.firstNavmenu li a span:before { transition: all 0.2s ease 0s; top:3px; left:0; bottom:0; position:absolute; content:""; vertical-align:middle; margin:auto; box-sizing: border-box; width:6px; height:6px; border:5px solid transparent; border-top:8px solid #96514d; }
.firstNavmenu li a:hover span:before { border-top-color:#fff; top:6px; }

.firstNavmenu li a:hover { background:#96514d; }
.firstNavmenu li a:hover span { color:#fff; }

.deliWrap { background:transparent url(../img/bg2.jpg) top center no-repeat; background-size:cover; padding:110px 0; }
.deliWrap > div { width:1040px; margin:0 auto 0 auto; overflow:hidden; }
.deliWrap > div dl { padding:60px 50px; float:right; background:#fff; -moz-border-radius:0.6em; -khtml-border-radius:0.6em; -webkit-border-radius:0.6em; border-radius:0.6em; }
.deliWrap > div dl dt { margin:0 0 20px; }
.deliWrap > div dl dd p { margin:0 0 10px; font-size:1.8rem; }
.deliWrap > div dl dd p:last-child { margin:0; }

.cTitle { color:#2B5F0D; font-size:3.6rem; font-weight:bold; }

.safeWrap { background:#F9F8EE; }
.safeWrapContent { box-sizing:border-box; overflow:hidden; }
.safeWrapContent p { font-size:1.8rem; }
.safeWrapContent dt span { display:none; }
.safeWrapContent dd { width:1100px; margin:0 auto 0 auto; padding:100px 20px; box-sizing:border-box; }
.safeWrapContent dd img { max-width:100%; }

.safeWrapContent p { margin:0 0 25px; }

.bradi { border-radius:0.5em; }

.cultivation { background:transparent url(../img/bg5.jpg) top right no-repeat; background-size:cover; padding:110px 0; }
.cultivation > div { width:1040px; margin:0 auto 0 auto; overflow:hidden; }
.cultivation > div dl { padding:60px 50px; float:left; background:#fff; -moz-border-radius:0.6em; -khtml-border-radius:0.6em; -webkit-border-radius:0.6em; border-radius:0.6em; }
.cultivation > div dl dt { margin:0 0 20px; }
.cultivation > div dl dd p { margin:0 0 10px; font-size:1.8rem; }
.cultivation > div dl dd p:last-child { margin:0; }

.userVoiceTitle { background-image:url(../img/pm1.jpg),url(../img/pm2.jpg); background-position:top left,top right; background-repeat:no-repeat,no-repeat; background-size:395px; }
.userVoiceTitle h3 { padding:100px 0; color:#2B5F0D; font-size:3.6rem; font-weight:bold; text-align:center; }
.userWrap { background:#2B5F0D; padding:56px 0; }
.userWrap article { width:1040px; margin:0 auto 0 auto; box-sizing:border-box; -webkit-box-sizing:border-box; padding:40px; background:#fff; -moz-border-radius:0.6em; -khtml-border-radius:0.6em; -webkit-border-radius:0.6em; border-radius:0.6em; }
.userWrap article dl { display:flex; display:-webkit-flex; margin:0 0 40px; }
.userWrap article dl:last-child { margin:0; }
.userWrap article dl dt { width:210px; text-align:center; }
.userWrap article dl dt img { width:131px; margin:0 0 10px; }
.userWrap article dl dt em { display:block; line-height:1; color:#2B5F0C; font-size:1.4rem; }
.userWrap article dl dd { position:relative; background:#fff; box-sizing:border-box; -webkit-box-sizing:border-box; padding:28px 40px; flex:1; border:solid #2B5F0D; border-width:1px; -moz-border-radius:0.6em; -khtml-border-radius:0.6em; -webkit-border-radius:0.6em; border-radius:0.6em; }
.userWrap article dl dd h4 { font-size:2.2rem; font-weight:bold; color:#2B5F0C; margin:0 0 12px; }
.userWrap article dl dd p { color:#2B5F0C; font-size:1.8rem; }

.userWrap article dl dd:before { transition: all 0.2s ease 0s; top:0; left:-33px; bottom:0; position:absolute; content:""; vertical-align:middle; margin:auto; box-sizing: border-box; width:6px; height:6px; border:12px solid transparent; border-right:20px solid #2B5F0C; }
.userWrap article dl dd:after { transition: all 0.2s ease 0s; top:0; left:-31px; bottom:0; position:absolute; content:""; vertical-align:middle; margin:auto; box-sizing: border-box; width:6px; height:6px; border:12px solid transparent; border-right:20px solid #fff; }

.aboutWrap { display:flex; display:-webkit-flex; box-sizing:border-box; -webkit-box-sizing:border-box; }
.aboutWrap > div { width:50%; }
.aboutWrap .aboutimg { text-align:right; padding:50px 40px 0 0; box-sizing:border-box; -webkit-box-sizing:border-box; }
.aboutWrap .aboutimg img { width:500px; }
.aboutContent { padding:180px 60px 0 60px; box-sizing:border-box; -webkit-box-sizing:border-box; }
.aboutContent p { margin:0 0 20px; font-size:1.8rem; }
.aboutContent img { width:187px; }

.cookWrap { background:#F9F8EE; padding:80px 0; }
.cookWrap > div { width:1040px; margin:0 auto 0 auto; box-sizing:border-box; -webkit-box-sizing:border-box; display:flex; display:-webkit-flex; }
.cookWrap > div dl { width:500px; cursor:pointer; }
.cookWrap > div dl:first-child { margin:0 40px 0 0; }
.cookWrap > div dl dt img { width:100%; border-radius:0.4em; }
.cookWrap > div dl dt { margin:0 0 18px; position:relative; }
.cookWrap > div dl dt:after { color:#96514d; background:#fff; font-family:'icomoon'; content:"\e986"; opacity:0; position:absolute; left:50%; top:50%; z-index:3; font-size:30px; font-weight:normal;
-moz-border-radius:50%; -khtml-border-radius:50%; -webkit-border-radius:50%; border-radius:50%; margin:-60px 0 0 -60px; color:#96514d;
padding:34px 44px; -webkit-transform: scale(1.3); transform: scale(1.3); transition: all 0.5s ease-in-out 0s;
}
.cookWrap > div dl:hover dt:after { opacity:0.8; -webkit-transform: scale(1); transform: scale(1); }

.cookWrap > div dl dd h4 { font-size:1.8rem; color:#96514d; font-weight:bold; margin:0 0 15px; }
.cookWrap > div dl dd p { font-size:1.5rem; }

.contactWrap { background:transparent url(../img/kv2.jpg) top center no-repeat; background-size:cover; position:relative; }
.contactWrap> div { box-sizing:border-box; -webkit-box-sizing:border-box; background:rgba(0,0,0,0.3); padding:50px 180px; }
.contactWrap> div section { background:#fff; box-sizing:border-box; -webkit-box-sizing:border-box; padding:40px; text-align:center; }
.contactWrap> div section h4 { font-family: 'Roboto', sans-serif; margin:0 0 22px; color:#2B5F0C; font-size:4.8rem; font-weight:bold; line-height:1.2; }
.contactWrap> div section h4 span { font-weight:bold; display:block; line-height:1.5; font-family: "Roboto Slab" , Garamond , "Times New Roman" , "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif; }
.contactWrap> div section em { font-size:1.4rem; color:#2B5F0C; font-weight:bold; letter-spacing:-1px; }
.contactWrap> div section p { margin:0 0 20px; }
.contactWrap> div section p:last-child { margin:0; }
.cc { color:#2B5F0C; font-weight:bold; font-size:3.5rem; font-family: 'Roboto', sans-serif; line-height:1; }
.cl { color:#2B5F0C; font-weight:bold; font-size:4.5rem; font-family: 'Roboto', sans-serif; line-height:1; }
.contactBtn { line-height:1.5; border:solid #2B5F0D; border-width:2px; display:inline-block; padding:12px 30px; text-align:center; }
.contactBtn span { position:relative; line-height:1.5; letter-spacing:-1px; color:#2B5F0C; font-weight:bold; font-size:2.0rem; display:inline-block; background:transparent url(../img/mailicon.jpg) left 7px no-repeat; background-size:21px; padding:0 18px 0 32px; font-family: "Roboto Slab" , Garamond , "Times New Roman" , "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif; }
.contactBtn span:after { top:-2px; transition: all 0.1s ease 0s; position: absolute; right:0; bottom:0; margin: auto; content: ""; vertical-align: middle; width:8px; height:8px; border-top:2px solid #2B5F0C; border-right: 2px solid #2B5F0C; -webkit-transform: rotate(405deg); transform: rotate(405deg); }
.contactBtn:hover { border-color:#f7b401; }

.kv1 { background-image:url(../img/kv1.jpg); background-repeat:no-repeat; }
.kv2 { background-image:url(../img/kv2.jpg); background-repeat:no-repeat; }


.modalWrap { padding:20px; box-sizing:border-box; -webkit-box-sizing:border-box; }
.modalWrap h3 { color:#96514d; font-weight:bold; margin:0 0 15px; font-size:2.0rem; text-align:center; }
.modalWrap h4 { color:#96514d; font-weight:bold; border:solid #eee; border-width:0 0 1px; margin:0 0 15px; font-size:1.8rem; }

.deciList { padding:0 0 0 20px; margin:0 0 20px; }
.deciList li { list-style:decimal; margin:0 0 5px; font-size:1.5rem; }

.discList { padding:0 0 0 20px; }
.discList li { list-style:disc; margin:0 0 5px; font-size:1.5rem; }

header { z-index:999; padding:20px 0 0; position:absolute; left:0; top:0; width:100%; box-sizing:border-box; -webkit-box-sizing:border-box; }
header div { display:flex; display:-webkit-flex; overflow:hidden; background:#fff; width:1040px; margin:0 auto 0 auto; -moz-border-radius:0.7em; -khtml-border-radius:0.7em; -webkit-border-radius:0.7em; border-radius:0.7em; }
header div h1 { padding:12px 15px; width:240px; }
header div nav { overflow:hidden; text-align:right; margin-left:auto; }
header div nav ul { display:flex; display:-webkit-flex; }
header div nav ul li a { color:#000; font-weight:bold; display:block; padding:17px 20px; font-size:1.5rem; }
header div nav ul li:last-child a { background:#ea702f; color:#fff; padding:17px 30px; }
header div nav ul li:nth-child(4) a { padding:17px 40px 17px 20px; }

@-webkit-keyframes zoomUp {
  0% {
      -webkit-transform: scale(1);
      transform: scale(1);
  }
  100% {
      -webkit-transform: scale(1.15);
      transform: scale(1.15);
  }
}

@keyframes zoomUp {
  0% {
      -webkit-transform: scale(1);
      transform: scale(1);
  }
  100% {
      -webkit-transform: scale(1.15);
      transform: scale(1.15);
  }
}

.swiper-slide {
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.swiper-slide-active .slide-img,
.swiper-slide-duplicate-active .slide-img,
.swiper-slide-prev .slide-img {
    -webkit-animation: zoomUp 12s linear 0s;
    animation: zoomUp 12s linear 0s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.slide-img {
    background-size: cover; 
    background-position: center center;
    height: 100vh;
}

.slide-text {
box-sizing:border-box; -webkit-box-sizing:border-box;
padding:0 0 0 100px;
position: absolute;
z-index: 10;
width: 100%;
top:50%;
margin-top:-100px;
}


.deliciousnessWrap { padding:100px 0 160px 0; }
.deliciousnessContent { width:1200px; display:flex; margin:0 auto 80px auto; }
.deliciousnessContent:last-child { margin:0 auto 0 auto; }
.deliciousnessContent dt { width:700px; box-sizing:border-box; margin:0 50px 0 0; position:relative; }
.deliciousnessContent dt div { position:relative; }
.deliciousnessContent dt div:after { z-index:-1; content:""; background:#f9f2ee; width:100%; height:100%; border-radius:50%; position:absolute; left:-30px; bottom:-30px; }
.deliciousnessContent dt img { position:relative; max-width:100%; border-radius:50%; object-fit:contain; }
.deliciousnessContent dd { flex:1; padding:100px 20px; box-sizing:border-box; }
.subTitle { background:#96514d; padding:14px 16px; color:#fff; font-weight:bold; font-size:1.8rem; border-radius:0.4em; margin:0 0 15px; }
.deliciousnessContent dd p { margin:0 0 20px; }
.deliciousnessContent dd p:last-child { margin:0; }

.od2 dt { order:2; margin:0 0 0 50px; }
.od2 dt div:after { left:30px; }
.od2 dd { order:1; }

.fTitle { margin:0 0 100px; }
.fTitle span { font-size:3.8rem; font-weight:bold; color:#96514d; display:inline-block; position:relative; }
.fTitle span:after { content:""; position:absolute; width:60px; height:3px; background:#96514d; display:inline-block; left:50%; bottom:-20px; margin:0 0 0 -30px; }

.keepWrap { background:#96514d url(../img/mangosteen_bg.png) left bottom no-repeat; padding:100px 0 120px 0; background-size:400px; }
.keepContent { box-sizing:border-box; border-radius:0.4em; background:#fff; padding:80px; width:1100px; margin:0 auto 0 auto; }
.keepContent p { margin:0 0 20px; }
.keepContent p:last-child { margin:0; }

/*------------------------------------
MARGIN
-------------------------------------*/
#mc .m0 { margin:0; }
#mc .w10 { width:10%; }
#mc .w20 { width:20%; }
#mc .w30 { width:30%; }
#mc .w40 { width:40%; }
#mc .w50 { width:50%; }
#mc .w60 { width:60%; }
#mc .w70 { width:70%; }
#mc .w80 { width:80%; }
#mc .w100 { width:100%; }
#mc .tc { text-align:center; }
#mc .tr { text-align:right; }
#mc .ml5 { margin:0 0 0 5px; }
#mc .ml10 { margin:0 0 0 10px; }
#mc .m0c { margin:0 auto 0 auto; }
#mc .mb10 { margin:0 0 10px; }
#mc .mb15 { margin:0 0 15px; }
#mc .mb20 { margin:0 0 20px; }
#mc .mb25 { margin:0 0 25px; }
#mc .mb30 { margin:0 0 30px; }
#mc .mt20 { margin:20px 0 0 0; }
#mc .mr10 { margin:0 10px 0 0; }
#mc .mr20 { margin:0 20px 0 0; }
#mc .mb40 { margin:0 0 40px; }
#mc .mb70 { margin:0 0 70px; }
#mc .mb1 { margin:0 0 1px; }
#mc .mT5 { margin:5px 0 0; }
#mc .mT10 { margin:10px 0 0; }
#mc .mb50 { margin:0 0 50px; }
#mc .mb60 { margin:0 0 60px; }
#mc .ml10 { margin:0 0 0 10px; }
#mc .ml20 { margin:0 0 0 20px; }
#mc .mlb20 { margin:0 0 20px 20px; }
#mc .mr2 div:nth-child(1) { margin:0 2% 0 0; }
#mc .mr70 div:nth-child(1) { margin:0 20px 0 0; }
#mc .nI { text-indent:0; }
.rr { color:red; }

/*------------------------------------
FONTS
-------------------------------------*/
#mc .sFont { font-size:70%; }
#mc .lFont { font-size:110%; }
#mc .semPoint { font-size:84%; }
#mc .fw { font-weight:bold; }
#mc .cb { color:#075880; }
#mc .redPoint { color:#ff2413; font-weight:bold; font-size:110%; text-decoration:underline; }