@charset "UTF-8";

/*********

DEFAULT RESET

**********/
html, body {
height: -webkit-fill-available;
}
html {
-webkit-text-size-adjust: 100%;
width: 100%;
font-size: 62.5%;
margin-top: 0 !important;
}
body {
width: 100%;
padding: 0;
margin: 0 auto;
font-family: "Noto Sans JP", ' ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'MS Pゴシック ', 'MS PGothic', sans-serif;
font-weight: 500;
font-style: normal;
font-size: 15px;
font-size: 1.5rem;
line-height: 1.68;
letter-spacing: 0.14em;
color: #000;
background: #fff;
position: relative;
}
body * {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
a {
text-decoration: none;
color: #000;
}
a:hover,
a:active,
a:focus {
outline: none;
}
div, ol, ul,dl, dt, dd,
h1, h2, h3, h4, h5, h6,
header, footer, nav, section, article, aside, hgroup, menu,
form,
img, figure, picture {
display: block;
margin: 0 auto;
padding: 0;
margin-block-start: 0;
margin-block-end: 0;
margin-inline-start: 0;
margin-inline-end: 0;
border: none;
-ms-interpolation-mode: bicubic;
}
h1, h2, h3, h4, h5, h6 {
font-weight: 600;
line-height: 1.333;
}
figure img {
width: 100%;
height: auto;
}
dl, ol, ul {
list-style-type: none;
margin: 0;
padding: 0;
margin-block-start: 0;
margin-block-end: 0;
margin-inline-start: 0;
margin-inline-end: 0;
padding-inline-start: 0;
}
table {
width: 100%;
margin: 0;
padding: 0;
word-break: break-all;
word-wrap: break-word;
border-collapse: collapse;
border-spacing: 0;
}
*:before, *:after {
box-sizing: inherit;
}
@media screen and (min-width: 768px) {
body {
font-size: 1.6rem;
}
}
@media screen and (min-width: 1024px) {
body {
font-size: 1.7rem;
}
}


/*********

FONT

**********/
.t_En {
font-family: "Alegreya", serif;
font-weight: 700;
font-style: normal;
}

/*********

IMAGECOLOR

**********/
.bg_sand {
background-color: #e8ece2;
color: #312f30;
}
.bg_forest {
background-color: #606c5c;
color: #fff;
}
.bg_ocean {
background-color: #4d7985;
color: #fff;
}
.bg_midnight {
background-color: #312f30;
color: #fff;
}
.bg_forest_pail {
background-color: #d3e3d1;
color: #fff;
}

/*********

LAYOUT

**********/
.contentswrapper {
overflow: hidden;
}
.secin_row {
width: 100%;
max-width: 1040px;
margin: auto;
padding: 36px 24px;
text-align: center;
}
.flex,
.row_flex {
display: flex;
}
.row_flex {
flex-direction: column;
}
@media screen and (min-width: 768px) {
.row_flex.ms {
flex-direction: row;
flex-wrap: wrap;
}
}
@media screen and (min-width: 1024px) {
.secin_row {
padding: 50px 24px;
}
.row_flex.ls {
flex-direction: row;
flex-wrap: wrap;
}
}
@media screen and (min-width: 1040px) {
.secin_row {
padding: 80px 0;
}
}



/*********

HEADER

**********/
#head_wrapper {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 24px;
}
#head_wrapper .hdr_rogo {
display: block;
width: 42.8vw;
max-width: 360px;
height: auto;
background: url('../images/icon_cargo.png') no-repeat;
aspect-ratio: auto 470/138;
object-fit: cover;
object-position: center;
overflow: hidden;
}
#head_wrapper .global_nav {
position: fixed;
top: 0;
right: -100%;
width: 100%;
height: 100vh;
background-color: rgba(255,255,255,0.97);
transition: right 0.5s cubic-bezier(0.65, 0.05, 0.36, 1);
padding: 12vw 5vw 5vw;
z-index: 99;
}
#head_wrapper .global_nav.active {
right: 0;
}
.nav_list li {
margin: 0.68em 0;
}
.nav_list a {
font-size: 1.24em;
display: flex;
align-items: center;
gap: 0.5em;
line-height: 1;
padding: 1em;
}
.nav_list a > br {
display: none;
}
.nav_list a::before {
content: '';
display: block;
}
.nav_list li:nth-child(1) a::before {
background: url('../images/icon_cargo.png');
width: 2em;
height: auto;
aspect-ratio: auto 45/38;
background-size: cover;
object-fit: cover;
}
.nav_list li:nth-child(4) a::before {
background: url('../images/icon_ch.png');
width: 2em;
height: auto;
aspect-ratio: auto 45/38;
background-size: cover;
object-fit: cover;
}
.nav_list li:nth-child(5) a::before {
background: url('../images/icon_log.png');
width: 2em;
height: auto;
aspect-ratio: auto 45/38;
background-size: cover;
object-fit: cover;
}
.humb_btn {
position: relative;
width: 50px;
height: 44px;
cursor: pointer;
z-index: 999;
}
.humb_btn span {
position: absolute;
left: 0;
width: 100%;
height: 4px;
background-color: #333;
border-radius: 4px;
}
.humb_btn,
.humb_btn span {
display: inline-block;
transition: all .5s;
box-sizing: border-box;
}
.humb_btn span:nth-of-type(1) {
top: 0;
}
.humb_btn span:nth-of-type(2) {
top: 20px;
}
.humb_btn span:nth-of-type(3) {
bottom: 0;
}
.humb_btn.active span:nth-of-type(1) {
-webkit-transform: translateY(20px) rotate(45deg);
transform: translateY(20px) rotate(45deg);
}
.humb_btn.active span:nth-of-type(2) {
opacity: 0;
}
.humb_btn.active span:nth-of-type(3) {
-webkit-transform: translateY(-20px) rotate(-45deg);
transform: translateY(-20px) rotate(-45deg);
}
@media screen and (min-width: 768px) {
#head_wrapper .hdr_rogo {
max-width: 300px;
}
}
@media screen and (min-width: 1024px) {
#head_wrapper .hdr_rogo {
width: 23vw;
max-width: 380px;
}
.nav_list {
gap: clamp(10px, 1vw, 30px);
}
.nav_list a {
font-size: 0.9em;
padding: 0;
}
.nav_list a > br {
display: block;
}
.humb_btn,
.humb_btn span {
display: none;
}
#head_wrapper .global_nav {
display: block;
padding: 0;
position: static;
top: auto;
right: auto;
width: auto;
max-width: none;
height: auto;
background-color: transparent;
transition: none;
z-index: auto;
}
.nav_list,
.nav_list a {
display: flex;
align-items: center;
line-height: 1;
}
}

/*********

FOOTER

**********/
footer {
background: #E5662F;
text-align: center;
}
.foot_cpright {
padding: 1.8em 0;
}



/*********

TOPINDEX

**********/
/* COMMON */
.sec_title {
font-weight: 700;
line-height: 1.4;
margin-bottom: 1.64em;
}
.sec_title span {
display: block;
font-size: 1.64em;
color: #E5662F;
}
.mores_btn {
margin-top: 1.6em;
text-align: right;
}
.mores_btn a {
display: inline-flex;
justify-content: center;
align-items: center;
gap: 12px;
background: #fff;
border: 1px solid #000;
padding: 1em 2em;
}
.mores_btn a::after {
content: '';
display: block;
width: 22px;
height: 22px;
background: url('../images/btn_arrow.gif') no-repeat;
background-size: cover;
}
.mores_btn.rnd a {
background: #622334;
color: #fff;
border-radius: 100px;
border: none;
}
.mores_btn.rnd a::after {
background: url('../images/btn_arrow_r.png') no-repeat;
background-position: center center;
background-size: contain;
}

/* 00 */
.swiper {
width: 100%;
max-width: 1280px;
margin: 0 auto;
position: relative;
overflow: hidden;
}
.swiper-slide {
display: flex;
justify-content: center;
align-items: center;
}
.swiper-slide img {
width: 100%;
height: auto;
object-fit: contain;
display: block;
}
.swiper-pagination {
position: absolute;
bottom: 28px !important;
left: 0;
width: 100%;
text-align: center;
}
.swiper-pagination-bullet {
background: #fff !important;
width: 8px !important;
height: 8px !important;
border-radius: 50%;
margin: 0 4px !important;
opacity: 1 !important;
transition: all 0.3s ease;
}
.swiper-pagination-bullet-active {
background: #565656 !important;
}
.catch_content {
text-align: left;
}
@media screen and (min-width: 768px) {
.swiper-slide img {
object-fit: cover;
}
.swiper-pagination-bullet {
width: 12px !important;
height: 12px !important;
margin: 0 6px !important;
}
}
@media screen and (min-width: 1280px) {
.sec_title span {
font-size: 1.64em;
}
.swiper-pagination-bullet {
width: 20px !important;
height: 20px !important;
margin: 0 10px !important;
}
}

/* 01 */
.item_tilte {
display: flex;
align-items: center;
gap: 40px;
margin-bottom: 1.6em;
}
.gotoListTop > a {
font-weight: 600;
display: inline-block;
color: #fff;
background: #4d7985;
border-radius: 0.3em;
padding: 0.7em 1.4em;
margin-top: 1em;
overflow: hidden;
}

/* 02 */
.topiclist li {
border-top: 1px solid #9f9f9f;
text-align: left;
}
.topiclist li:last-child {
border-bottom: 1px solid #9f9f9f;
}
.topiclist a {
display: block;
padding: 1em 2em;
letter-spacing: 0;
}
.topiclist .news_ttl {
display: block;
font-weight: bold;
}

/* 03 */
.item_wrapper {
margin: 30px auto;
}
.item_wrapper picture img {
width: 100%;
height: auto;
}

/* 04 */
#information table {
width: 100%;
text-align: left;
}
#information table th {
white-space: nowrap;
vertical-align: top;
}
#information table th,
#information table td {
padding: 0.64em;
line-height: 1.26;
}

/* 05 */
.ft_container {
background: #F2F2F4;
}
.biz_row {
text-align: left;
}
.biz_row h3 {
border-left: 1px solid #000;
line-height: 1;
font-weight: normal;
padding-left: 0.5em;
margin-bottom: 1em;
}	
.biz_row li {
flex: 1;
}
.biz_row figure {
width: 100%;
aspect-ratio: 230/103;
overflow: hidden;
position: relative;
}
.biz_row figure img {
width: 100%;
height: 100%;
object-fit: cover;
}
@media screen and (min-width: 768px) {
.biz_row {
display: flex;
gap: 3.5vw;
}
}







/*********

PAGED

**********/
@media screen and (min-width: 768px) {
section ul.row_flex {
gap: 1.4em;
}
section ul.row_flex li {
width: calc(50% - 1.4em);
}
}

/* Item */
#page_ttl h2.t_En {
font-size: 2.64em;
line-height: 1;
color: #E5662F;
}
#page_ttl h2.t_Jp {
font-size: 1.52em;
font-weight: 600;
line-height: 1;
}
section .itemcate_name h3 {
display: inline-block;
padding: 0.84em 1.2em;
font-size: 0.9em;
color: #fff;
margin-bottom: 35px;	
}
#reccomed .itemcate_name h3 {
background: #E5662F;	
}
#emel .itemcate_name h3 {
background: #6B2D46;	
}
#eml .itemcate_name h3 {
background: #9270A2;	
}
#other .itemcate_name h3 {
background: #D3D3D3;	
}
section ul {
text-align: left;
}
#lineup ul .item_name {
margin: 1em 0;
}
#lineup ul .item_price,
#lineup ul p {
font-size: 0.9em;
}
#lineup ul p {
font-size: 0.9em;
}
@media screen and (min-width: 768px) {
section .itemcate_name {
text-align: left;
}
#emel ul.row_flex li,
#eml ul.row_flex li,
#other ul.row_flex li {
width: calc((100% / 3) - 1.4em);
}
#itemlist .item_name h3 {
font-size: 1em;
}
}
@media screen and (min-width: 1024px) {
#page_ttl .secin_row {
text-align: left;
}
}


/* Ch */
#introhead .introTitle .subTitle {
display: block;	
font-size: 1.84em;
font-weight: 700;
line-height: 1;
color: #CECECE;
}
#introhead .introTitle .en_Title {
font-size: 3.8em;
font-weight: 500;
line-height: 1;
color: #622334;
margin: 0.25em auto;
}
#introhead .introTitle h2.jp_Title {
font-size: 2em;
}
#introhead p {
padding: 1em 2em 0;
}
#ch_line::before,
#ch_line::after,
#incho::before {
content: '';
display: block;
width: 75%;
height: 5vw;
background: url('../images/deco_border.png') no-repeat;
background-size: contain;
margin: auto;
}
.video_container {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
}
.video_container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#shoppin .shop_buy {
display: block;
font-size: 1.16em;
font-weight: 700;
color: #FF0033;
}
#shoppin ul {
margin: 50px auto;
}
#shoppin ul figure {
width: 100%;
height: auto;
object-fit: cover;
object-position: center;
aspect-ratio: 290 / 194;
overflow: hidden;
}
#shoppin ul .item_name {
font-size: 0.88em;
margin: 1em 0;
}
#shoppin ul .item_name h3 {
font-size: 1.33em;
}
#shoppin ul .item_price,
#shoppin ul p {
font-size: 0.76em;
}
#incho .incho_tHead {
margin-bottom: 80px;
}
#incho .incho_tHead h3 {
font-size: 2.8em;
font-weight: 700;
color: #622334;
}
#incho .incho_tHead h3 > span {
display: block;
font-size: 0.48em;
font-weight: 500;
color: #231815;
}
#incho .incho_Prof {
background: #622334;
color: #fff;
padding: 75px 8vw 8vw;
position: relative;
}
#incho .incho_Prof figure {
width: 120px;
height: 120px;
border: 5px solid #622334;
border-radius: 50%;
overflow: hidden;
position: absolute;
top: -60px;
left: 50%;
transform: translateX(-50%);
}
.incho_name {
font-size: 1.47em;
}
.incho_name_en {
display: block;
font-weight: 500;
color: #D6B4BF;
}
#incho .incho_Shop {
background: #D6B4BF;
padding: 2em;
}
#incho .incho_Shop h3 {
font-size: 1.17em;
}
@media screen and (min-width: 768px) {
#incho .incho_tHead {
margin-bottom: 120px;
}
#incho .incho_Prof figure {
width: 200px;
height: 200px;
top: -100px;
}
#incho .incho_Prof {
padding-top: 140px;
}
}
@media screen and (min-width: 1024px) {
}





/*********

POSTED

**********/
.news_post__list {
font-size: 0.9em;
}
.news_post__list li {
border-bottom: 1px solid #6B6B6B;
padding: 3em 0;
}
.news_post__list li:first-child {
padding-top: 0;
}
.news_post__list li:last-child {
border-bottom: none;
padding-bottom: 0;
}
.news_post__list h2.post_ttl. {
font-size: 1em;
}
.post_body img.aligncenter {
display: inline-block;
max-width: 160px;
margin: auto 10px;
vertical-align: middle;
}
.post_body p:has(img.aligncenter) {
text-align: center;
}
@media screen and (min-width: 768px) {
.post_body img.aligncenter {
max-width: 180px;
margin: auto 25px;
}
}
@media screen and (min-width: 1024px) {
.post_body img.aligncenter {
max-width: 220px;
margin: auto 50px;
}
}




/*******************************

ページネーション用のスタイルシート

********************************/
.pagination{
margin: 30px 0 0;
}
.pagination,
.pagination li a {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
line-height: 1;
}
.pagination  {
gap: 12px;
}
.pagination li a {
width: 45px;
height: 45px;
text-align: center;
border-radius: 50%;
}
.pagination li:not([class*="current"]) a:hover {
background: #777;
color: #fff;
}
.pagination li.first span,
.pagination li.last span,
.pagination li.previous span,
.pagination li.next span {
position: absolute;
top: -9999px;
left: -9999px;
}
.pagination li.first a,
.pagination li.last a {
display: none;
}
.pagination li.previous a,
.pagination li.next a {
border: solid 2px #777;
width: 35px;
height: 35px;
}
.pagination li.previous a::before,
.pagination li.next a::after {
font-family: 'Material Icons';
content: '\e5e1';
transform: translateX(0.5px);
}
.pagination li.previous a::before {
transform: scale(-1, 1);
}
.pagination li.current a {
background: #777;
color: #fff;
cursor: default;
pointer-events: none;
}
@media only screen and ( max-width: 680px ) {
.pagination li.first,
.pagination li.last {
position: absolute;
top: -9999px;
left: -9999px;
}
.pagination li.previous a { border-left-width: 1px; }
}
@media only screen and ( max-width: 500px ) {
.pagination li {
position: absolute;
top: -9999px;
left: -9999px;
}
.pagination li.current,
.pagination li.first,
.pagination li.last,
.pagination li.previous,
.pagination li.next{
position: initial;
top: initial;
left: initial;
}
.pagination li.previous a { border-left-width: 0; }
}
@media only screen and ( max-width: 400px ) {
.pagination li.first,
.pagination li.last {
position: absolute;
top: -9999px;
left: -9999px;
}
.pagination li.previous a { border-left-width: 1px; }
}