@charset "UTF-8";
/*-- Reset CSS --*/
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 {margin:0;padding:0;border:0;font-size:100;font:inherit;vertical-align:baseline;}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {display:block;}
body {line-height:1;font-family:'Noto Sans JP', sans-serif;}
ol, ul {list-style:none;}
blockquote, q {quotes:none;}
blockquote:before, blockquote:after,
q:before, q:after {content:'';content:none;}
table {border-collapse:collapse;border-spacing:0;}
a {text-decoration:none;}
img {vertical-align:top;width:100%;}
h1, h2, h3, h4, h5, h6,　p, a {color:#333;font-feature-settings:"palt";letter-spacing:1.1px;font-style:normal;}
.container {width:100%;height:auto;}
.flex {display:flex;}
.inner1000 {max-width:1000px;margin:0 auto;text-align:center;}
@media screen and (max-width:1000px) {
.inner1000 {margin:0 3%;}
}
.inner1200 {max-width:1200px;margin:0 auto;text-align:center;}
@media screen and (max-width:1200px) {
.inner1200 {margin:0 3%;}
}
.inner1500 {max-width:1500px;margin:0 auto;text-align:center;}
@media screen and (max-width:1500px) {
.inner1500 {margin:0 3%;}
}
@media screen and (max-width:1024px) {
.inner1000, .inner1200, .inner1500 {margin:0 5%;}
}
/*-- ボタンスタイル --*/
a.button {position:relative;display:inline-block;width:520px;margin:0 auto 10%;padding:20px 0px;text-align:center;background-color:#00a29a;border:1px solid #00a29a;border-radius:0px;font-style:normal;color:#fff;letter-spacing:2px;transition:all .4s ease;cursor:pointer;font-size:18px;}
a.button:hover {background-color:#fff;border:1px solid #00a29a;color:#00a29a;}
a.button.arrow::after {position:absolute;right:5%;top:50%;display:block;content:"";width:10px;height:10px;border-right:2px solid #fff;border-top:2px solid #fff;transform:rotate(45deg) translate(-50%, -5%);transition:all .4s ease;}
a.button.arrow:hover::after {border-right:2px solid #00a29a;border-top:2px solid #00a29a;}
@media screen and (max-width:590px) {
a.button.arrow::after {display:none;}
a.button {width:300px;margin:0 auto 15%;padding:15px 0;font-size:14px;}
}

/*-- ヘッダーはじまり --*/
header {position:fixed;display:flex;justify-content:space-between;box-sizing:border-box;width:100%;top:0;padding:15px 3%;align-items:center;border-bottom:1px solid #ccc;background-color:#FFF;z-index:100000;}
header h1 {margin:0;padding:0;}
header h1.pc {display:block;}
header h1.sp {display:none;}
header h1 > a {display: flex;align-items:center;}
header h1 > a > img {width:auto;}
header a {text-decoration:none;}
header nav {margin:0 0 0 auto;}
header ul {display:flex;margin:0;list-style:none;}
header li {margin:0 0 0 40px;padding:0 0 0 0;font-size:16px;letter-spacing:.5px;}
header li a {padding:10px;font-weight:500;font-style:normal;transition:all .3s ease;-webkit-transition:all .3s ease;}
header li a:hover {color:#036e4f;}
header .sp-nav {display:none;}
header .rel {position:relative;}
header .rel:hover .submenu {display:block;}
header ul.submenu {width:180px;display:none;margin:0;padding:0;position:absolute;top:35px;left:50%;transform:translate(-50% , 0);z-index:1000;background-color:#fff;text-align:center;filter:drop-shadow(0px 0px 1px #a3a3a3);}
header ul.submenu::before {content:"";position:absolute;top:-30px;left:50%;margin-left:-15px;border:15px solid transparent;border-bottom:15px solid #fff;}
header ul.submenu li {display:block;margin:0;padding:0;text-align:center;letter-spacing:1.1px;border-left:none;border-bottom:1px solid #cccccc;}
header ul.submenu a {display:block;padding:16px 12px;font-size:14px;line-height:1.35em;}
header ul.submenu li:hover {background-color:#f5f5f5;transition:all .4s ease;}
header ul.submenu li a:hover {padding:24px 12px;}
@media screen and (max-width:1570px) {
header li {margin:0 0 0 25px;padding:0;font-size:16px;}
}
@media screen and (max-width:1390px) {
header li {font-size:14px;}
header ul.submenu a {display:block;padding:14px 8px;font-size:12px;line-height:1.35em;}
}
@media screen and (max-width:1023px) {
header {padding:15px 3%;background-color:#00a29a;}
header h1.pc {display:none;}
header h1.sp {display:block;}
header li {border-left:none;}
header .pc-nav {display:none;}
header .sp-nav {position:fixed;top:0;left:0;width:100%;height:100vh;display:block;background:rgba(255, 255, 255,.97);opacity:0;transform:translateX(100%);transition:all .45s ease-in-out;z-index:1;}
header #hamburger {position:relative;display:block;width:30px;height:25px;margin:0;cursor:pointer;}
header #hamburger span,header #hamburger::before,header #hamburger::after {position:absolute;display:block;width:100%;height:2px;background-color:#fff;}
header #hamburger span {top:50%;left:0;transform:translateY(-50%);}
header #hamburger::before {content:'';top:0;left:0;}
header #hamburger::after {content:'';bottom:0;left:0;}
header .sp-nav ul {padding:0;display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;}
header .sp-nav li {margin:0;padding:0;}
header .sp-nav li span {font-size:15px;color:#fff;}
header .sp-nav li a, .sp-nav li span {display:block;padding:20px 0;}
header .sp-nav li span {font-weight:600;font-style:normal;}
header .sp-nav .close {position:relative;margin-top:10%;padding-left:20px;background:#333;width:20%;text-align:center;}
header .sp-nav .close::before, 
header .sp-nav .close::after {content:'';position:absolute;top:50%;left:10px;display:block;width:16px;height:1px;background:#fff;}
header .sp-nav .close::before {transform:rotate(45deg);}
header .sp-nav .close::after {transform:rotate(-45deg);}
header .toggle {transform:translateY(0);opacity:1;}
}
/*--- ヘッダーおわり ---*/

/*--- ファーストビューはじまり ---*/
top {display:block;width:100%;height:calc(100% - 66px);padding-top:66px;}
top #mv {display:flex;justify-content:space-between;flex-wrap:wrap;position:relative;}
top #mv::after {content:"";position:absolute;display:inline-block;bottom:0;right:0;width:85%;height:1px;max-height:1px;background-color:#333;transform:translate(0, 0);}
top #mv .top-slid {display:flex;flex-direction:column;width:calc(55% - 15px);}
top #mv .top-slid div.slider {position:relative;width:100%;height:auto;}
top #mv .top-slid div.slider > h1.title {position:absolute;top:15%;left:50%;transform:translate(-50%, 15%);z-index:5;}
top #mv .top-slid div.slider > h1.title img {filter:drop-shadow(0px 0px 7px #414141);}
top #mv .top-slid div.slider .swiper-pagination-bullet {margin:0 10px;background:#ccc;opacity:.7;width:12px;height:12px;}
top #mv .top-slid div.slider .swiper-pagination-bullet-active {background:#00a29a;opacity:1;}
top #mv .top-slid div.slider .swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction {bottom:30px;}
top #mv .top-slid div.words {display:flex;justify-content:center;align-items:center;height:100%;}
top #mv .top-slid div.words::after {content:url("../img/2021/top_arrow.png");padding-left:10%}
top #mv .top-slid div.words a.anchor {margin-right:5%;}
top #mv .top-slid div.words .words-content {display:block;}
top #mv .top-slid div.words .words-content h2 {font-size:24px;font-weight:500;letter-spacing:2px;}
top #mv .top-slid div.words .words-content p {padding:20px 0;font-size:16px;font-weight:500;line-height:1.75em;letter-spacing:1.5px;}
top #mv .top-info {display:flex;flex-direction:column;width:calc(45% - 15px);}
top #mv .top-info div:first-child > h5 {background-color:#efefef;display:block;padding:16px 20px;font-weight:500;font-size:18px;}
top #mv .top-info div:first-child > ul {display:flex;flex-wrap:wrap;width:80%;justify-content:space-between;}
top #mv .top-info div:first-child > ul li {position:relative;width:calc(50% - 25px);margin-bottom:20px;border-top:1px solid #333;box-sizing:border-box;}
top #mv .top-info div:first-child > ul > li::after {content:"";display:inline-block;position:absolute;top:0;right:0;width:1px;height:80px;max-height:80px;background-color:#333;transform:translate(0, 0);}
top #mv .top-info div:first-child > ul li a {display:flex;align-items:center;justify-content:space-between;padding:5% 3% 0 0;transition:.4s ease;}
top #mv .top-info div:first-child > ul li a:hover{opacity:.5;}
top #mv .top-info div:first-child > ul li a > div {width:calc(50% - 5px);font-weight:500;}
top #mv .top-info div:first-child > ul li a > div > img {width:75%}
top #mv .top-info div:first-child > ul li a > div > h4 {padding-bottom:10px;font-size:18px;line-height:1.35em;}
top #mv .top-info div:first-child > ul li a > div > p {color:#00a29a;font-size:14px;}
top #mv .top-info div:first-child > ul li a > div > p::after {content:"";display:inline-block;vertical-align:top;margin-left:5px;background-image:url("../img/2021/top_case_a-after.png");background-size:contain;background-repeat:no-repeat;width:14px;height:14px;}
top #mv .top-info div.gallery {margin:15px 0 5%;width:80%;}
top #mv .top-info div.gallery > p {margin-bottom:15px;color:#a48b78;font-size:18px;font-weight:500;}
top #mv .top-info div.gallery ul.flex {justify-content:space-between;}
top #mv .top-info div.gallery ul.flex li {display:inline-block;margin:0 20px 0 0px;}
top #mv .top-info div.gallery ul.flex li a {transition:.3s ease}
top #mv .top-info div.gallery ul.flex li a:hover {opacity:.7}
top #mv .top-info div#form {margin-bottom:5%;display:flex;align-items:center;background-color:#dddddd;}
top #mv .top-info div#form .form {display:inline-block;}
top #mv .top-info div#form a.btn {padding:20px 20px;background-color:#00a29a;color:#fff;font-size:16px;font-weight:500;transition:.3s ease;}
top #mv .top-info div#form a.btn:hover{opacity:.7;}
top #mv .top-info div#form a.btn::after {content:"";background-image:url(../img/2021/access_after.png);background-size:contain;background-repeat:no-repeat;display:inline-block;vertical-align:top;height:18px;width:18px;margin-left:8px;}
top #mv .top-info div#form form.search {display:flex;align-items:center;}
top #mv .top-info div#form input[type="search"] {width:15vw;margin-left:20px;padding:10px;border:0px solid;border-radius:0px;font-weight:300;}
top #mv .top-info div#form input[type="search"]:focus {outline:none;}
top #mv .top-info div#form button {padding:6px 20px;margin:0 10px;border:0px;border-radius:7px;background-color:#00a29a;cursor:pointer;}

@media screen and (max-width:1280px) {
top #mv .top-info div:first-child > ul {width:95%;}
top #mv .top-info div:first-child > ul li {width:calc(50% - 15px);}
top #mv .top-info div:first-child > ul > li::after {height:60px;}
top #mv .top-info div:first-child > ul li a > div > h4 {font-size:16px;letter-spacing:.5px;}
top #mv .top-info div:first-child > ul li a > div > p {font-size:12px;}
top #mv .top-info div:first-child > ul li a > div > p::after {width:12px;height:12px;vertical-align:middle;}
top #mv .top-info div.gallery {width:95%;margin:15px 0 3%;}
top #mv .top-info div#form a.btn {padding:15px 10px;font-size:14px;}
top #mv .top-info div#form a.btn::after {vertical-align:text-bottom;padding-left:5px;}
top #mv .top-slid div.words .words-content h2 {font-size:22px;font-weight:bold;}
top #mv .top-slid div.words::after {padding-left:5%;}
}
@media screen and (max-width:768px) {
top #mv::after {width:100%;}
top #mv .top-slid, top #mv .top-info {width:calc(100% - 0px);}
top #mv .top-slid div.words a.anchor {display:none;}
top #mv .top-slid div.words::after {display:none;}
top #mv .top-slid div.words .words-content {margin:8% auto;text-align:center;}
top #mv .top-slid div.words .words-content h2 {font-size:18px;font-weight:600;}
top #mv .top-slid div.words .words-content p {padding:20px 0 0px;font-size:14px;font-weight:500;line-height:1.55em;}
top #mv .top-info {flex-direction:column-reverse;}
top #mv .top-info div#form {flex-wrap:wrap;justify-content:center;background-color:#fff;}
top #mv .top-info div#form a.btn {width:60%;margin-bottom:5%;text-align:center;font-size:16px;border-radius: 10px;}
top #mv .top-info div#form a.btn::after {vertical-align:middle;padding-left:10px;}
top #mv .top-info div#form form.search {width:100%;padding:20px 30px;background-color:#dddddd;}
top #mv .top-info div#form input[type="search"] {width:100%;margin:0;font-size:16px;transform:scale(0.96);}
top #mv .top-info div#form button {margin:0 0 0 10px;}
top #mv .top-info div.gallery {display:none;}
top #mv .top-info div:first-child > h5 {text-align:center;}
top #mv .top-info div:first-child > ul {width:100%;}
top #mv .top-info div:first-child > ul li {width: calc(25% - 0px);margin-bottom:0;}
top #mv .top-info div:first-child > ul > li::after {height:100%;max-height:100%;}
top #mv .top-info div:first-child > ul > li:nth-child(4)::after {display:none;}
top #mv .top-info div:first-child > ul > li:nth-child(8)::after {display:none;}
top #mv .top-info div:first-child > ul li a {justify-content:center;flex-wrap:wrap-reverse;padding:15px 10px 0;}
top #mv .top-info div:first-child > ul li a > div {width:calc(100% - 0px);text-align:center;}
top #mv .top-info div:first-child > ul li a > div > h4 {font-size:12px;padding:10px 0;display:inline-block;text-align:left;}
top #mv .top-info div:first-child > ul li a > div > p {display:none;}
}
@media screen and (max-width:560px) {
top #mv .top-slid div.slider > h1.title {width:70%;}
top #mv .top-slid div.slider .swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction {display:none;}
}
/*--- ファーストビューおわり ---*/

/*--- mainはじまり ---*/
#topic {background-color:#efefef;overflow:hidden;margin-top:5%}
#topic h3 {padding:5% 0 50px;color:#333;font-size:42px;font-weight:400;}
#topic .swiper-container {padding-bottom:6.4%;overflow:visible;}
#topic .swiper-slide {transition:.42s ease;transform:scale(0.92);}
#topic .swiper-slide-active {z-index:1;transform:scale(1.06);transition:.42s ease;}
#topic .swiper-pagination {bottom:0;margin:35px 0 45px;display:flex;align-items:center;justify-content:center;}
#topic .swiper-pagination-bullet {width:12px;height:12px;margin:0 12px!important;background:#ddd;opacity:.65;transition:.3s ease;}
#topic .swiper-pagination-bullet-active {width:16px;height:16px;background:#00a29a;opacity:1;}
@media screen and (max-width:1300px) {
#topic .swiper-container {padding-bottom:8%;}
#topic .swiper-pagination {margin:20px 0 25px;}
}
@media screen and (max-width:768px) {
#topic {background-color:#000;}
#topic h3 {padding:8% 0 30px;color:#fff;font-size:36px;}
}
@media screen and (max-width:415px) {
#topic .swiper-container {padding-bottom:20%;}
}

#item {margin-top:3%;}
#item h3 {margin-bottom:25px;padding-top:90px;text-align:left;font-size:42px;font-weight:400;color:#333;}
#item h3 span {padding-left:20px;font-size:24px;font-weight:500;vertical-align:middle;}
#item h2 {display:flex;align-items:center;margin-bottom:3%;padding:20px 0;font-size:16px;font-weight:500;text-align:left;border-top:1px solid #333;border-bottom:1px solid #333;}
#item h2 span {display:inline-block;font-size:1.55em;}
#item h2 :first-child {margin-right:20px;padding-right:20px;border-right:1px solid;}
#item h2 :last-child {font-size:1.2em;}
#item .flex {justify-content:space-between;flex-wrap:wrap;}
#item .flex > li {position:relative;border-radius:10px;transform:translateZ(0);overflow:hidden;margin-bottom:7.5px;}
#item .flex > li p {position:absolute;top:50%;left:50%;width:100%;transform:translate(-50%, -50%) translateZ(0);color:#fff;font-size:1.45em;font-family:source-han-sans-japanese, sans-serif;font-weight:600;font-style:normal;line-height:1.65em;filter:drop-shadow(0px 0px 6px #000);}
#item .flex > li p span {display:block;padding-bottom:15px;font-size:75%;line-height:1em;}
#item .flex > li img {filter:brightness(.62);border-radius:10px;transition:.48s ease;}
#item .flex > li:hover img {filter:brightness(.9);transform:scale(1.075,1.075);}
#item #category .flex > li {width:calc(33.33333% - 5px);}
#item #category {margin-bottom:8%;}
@media screen and (max-width:880px) {
#item #category .flex > li p {font-size:1.25em;}
#item h2 span {font-size:1.2em;}
}
@media screen and (max-width:768px) {
#item h3 span {font-size: 18px;}
#item #category .flex > li p {font-size:1.1em;}
}
@media screen and (max-width:600px) {
#item {margin-top:15%;}
#item h3 {font-size:36px;text-align:center;}
#item #category .flex > li {width:calc(50% - 5px);}
}
@media screen and (max-width:510px) {
#item {margin-top:8%;}
#item h2 {flex-wrap:wrap;justify-content:center;}
#item h2 span {font-size:1.45em;}
#item h2 :first-child {padding-right:0px;padding-bottom:0px;margin-right:0px;border-right:0px solid;}
#item h2 :last-child {display:none;}
#item .flex > li p {font-size:.85em!important;}
#item .flex > li p span {padding-bottom: 5px;}
}

#service {padding:3% 0;background-image:url("../img/2021/servic_bg.jpg");background-position:center center;background-repeat:no-repeat;background-size:cover;}
#service h3 {padding-bottom:20px;margin-bottom:30px;font-size:42px;text-align:left;color:#fff;border-bottom:1px solid;}
#service h3 > span {padding-left:20px;font-size:60%;font-weight:bold;vertical-align:middle;}
#service ul.flex {justify-content:flex-start;flex-wrap:wrap;margin:-8px;}
#service ul.flex > li {width:calc(20% - 16px);margin:8px;display:block;background-color:#fff;border-radius:16px;box-shadow:3px 3px 6px 0 rgb(0 0 0 / 30%);transition:all .3s ease;overflow:hidden;transform:translateZ(0);}
#service ul.flex > li p {padding:25px 0;font-size:18px;font-weight:500;}
#service ul.flex > li:hover {filter:brightness(.72);box-shadow:0px 0px 6px 0 rgb(0 0 0 / 30%);}
@media screen and (max-width:1024px) {
#service {padding:8% 0;}
#service ul.flex > li {width:calc(33.333333% - 16px);}
#service ul.flex > li p {font-size:16px;}
}
@media screen and (max-width:768px) {
}
@media screen and (max-width:600px) {
#service {padding:15% 0;}
#service h3 {font-size:36px;text-align:center;}	
#service ul.flex {margin:0 -8px}
#service ul.flex > li {width:calc(50% - 16px);margin:0 8px 16px;}
#service ul.flex > li p {padding:16px 0;font-size:14px;font-weight:500;}
}
/*--- mainおわり ---*/

/*-- 商品ページはじまり --*/
div#cat-item {padding-top:66px;}/*ヘッダー分上に間隔を開ける*/
#cat-item h2.genre_name_ {margin:5% auto;padding:20px 0;border-top:2px solid #00a29a;border-bottom:2px solid #d5d5d5;color:#333333;text-align:left;font-size:22px;font-weight:600;line-height:1.55em;}
#cat-item ul.flex {display:flex;flex-wrap:wrap;margin:0 -10px 8%;}
#cat-item ul.flex li.flex-item {width:calc(33.3333% - 20px);margin:0 10px 40px;}
#cat-item ul.flex li.flex-item a > div img {width:100%;height:auto;transition:.4s ease;}
#cat-item ul.flex li.flex-item a {text-decoration:none;}
#cat-item ul.flex li.flex-item a h3 {display:flex;position:relative;min-height:44px;align-items:center;margin-bottom:10px;padding:10px 20px;line-height:1.4em;text-align:left!important;font-size:16px;font-family:fot-rodin-pron, sans-serif;font-weight:500;color:#333;background:#e6e6e6;}
#cat-item ul.flex li.flex-item a h3::before {content:"";display:inline-block;position:absolute;top:50%;left:0;width:3px;height:30px;max-height:30px;background-color:#036e4f;transform:translate(0%, -50%);}
#cat-item ul.flex li.flex-item a:hover h3 {color:#036e4f;background-color:#dfeada;transition:.3s ease;}
#cat-item ul.flex li.flex-item a:hover img {opacity:.8;}
@media screen and (max-width:768px) {
#cat-item ul.flex li.flex-item a h3 {font-size:.875em;}
} 
@media screen and (max-width:590px) {
#cat-item h2.genre_name_ {margin:10% auto;padding:15px 0;text-align:center;font-size:20px;}
#cat-item ul.flex {display:flex;flex-wrap:wrap;margin:0 -5px 10%}
#cat-item ul.flex li.flex-item {width:calc(100% - 0px);margin:0 5px 30px;}
#cat-item ul.flex li.flex-item a h3 {padding:10px 15px;margin-bottom:10px;font-size:1em;}
}
/*-- 商品ページおわり --*/

/*--- footerはじまり ---*/
footer{border-top:1px solid #A48B77;width:100%}
div#footer {clear:both;width:auto;max-width:1200px;margin:0 auto;padding:15px 0;font-size:14px;line-height:1.5em;}
div#footer p#footNav {display:inline;float:left;padding:0 90px 15px 0;}
div#footer p#footNav a {padding-right:6px;margin-right:6px;border-right:1px solid #ccc;color:#036e4f;}
div#footer p#footNav a:last-child {padding-right:0px;margin-right:0px;border-right:0px solid;}
div#footer p#copyright {display:inline;float:left;padding-bottom:15px;color:#333;}
div#footer p#pagetop {display:inline;float:right;padding-bottom:15px;}
div#footer p#pagetop a:hover img {filter:alpha(opacity=50);-moz-opacity:0.5;opacity:0.5;}
div#footer p#pagetop img {vertical-align:middle;}
div#footer p.logo {clear:both;padding-top:15px;border-top:1px dashed #d4d4d4;text-align:right;}
div#footer p.logo a {display:inline-block;}
@media screen and (max-width:1200px){
div#footer {padding:15px 3%;}
}
@media screen and (max-width:590px){
div#footer {font-size:12px;}
div#footer p#footNav {display:block;text-align:center;float:none;padding:0 0 15px 0;}
div#footer p#copyright {display:block;text-align:center;float:none;padding:0 0 15px 0;font-size:10px;}
}
/*--- footerおわり ---*/